From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/it/_redirects.txt | 457 ++ files/it/_wikihistory.json | 6026 ++++++++++++++++++++ .../index.html | 34 + .../index.html | 42 + files/it/api_sociale/index.html | 63 + files/it/archive/add-ons/index.html | 8 + .../index.html | 52 + .../add-ons/sviluppare_un_estensione/index.html | 242 + files/it/archive/b2g_os/apps/index.html | 48 + .../writing_a_web_app_for_firefox_os/index.html | 34 + .../it/archive/b2g_os/automated_testing/index.html | 93 + files/it/archive/b2g_os/building/index.html | 241 + .../compatible_devices/index.html | 227 + .../building_and_installing_firefox_os/index.html | 120 + .../index.html | 195 + files/it/archive/b2g_os/debugging/index.html | 84 + .../b2g_os/debugging/installazione_adb/index.html | 63 + .../filing_bugs_against_firefox_os/index.html | 197 + .../b2g_os/developing_firefox_os/index.html | 45 + .../localizing_firefox_os/index.html | 188 + .../firefox_os_apps/building_blocks/index.html | 195 + files/it/archive/b2g_os/firefox_os_apps/index.html | 85 + .../b2g_os/firefox_os_usage_tips/index.html | 27 + .../build_system_primer/index.html | 127 + .../customizing_build-time_apps/index.html | 86 + .../diversi_modi_per_eseguire_gaia/index.html | 120 + .../gaia_tools_reference/index.html | 128 + .../guida_rapida_allo_sviluppo_di_gaia/index.html | 52 + .../make_options_reference/index.html | 347 ++ .../making_gaia_code_changes/index.html | 73 + .../running_the_gaia_codebase/index.html | 68 + .../submitting_a_gaia_patch/index.html | 117 + .../testing_gaia_code_changes/index.html | 119 + .../understanding_the_gaia_codebase/index.html | 153 + files/it/archive/b2g_os/index.html | 136 + .../installare_su_un_dispositivo_mobile/index.html | 136 + files/it/archive/b2g_os/introduction/index.html | 67 + .../b2g_os/phone_guide/fairphone/index.html | 184 + .../it/archive/b2g_os/phone_guide/flame/index.html | 323 ++ .../b2g_os/phone_guide/geeksphone/index.html | 156 + files/it/archive/b2g_os/phone_guide/index.html | 24 + .../specifiche_telefoni_dispositivi/index.html | 470 ++ .../archive/b2g_os/phone_guide/zte_open/index.html | 179 + .../b2g_os/phone_guide/zte_open_c/index.html | 263 + .../b2g_os/platform/apps_architecture/index.html | 38 + .../b2g_os/platform/architecture/index.html | 761 +++ .../platform/feature_support_chart/index.html | 158 + .../b2g_os/platform/gaia/gaia_apps/index.html | 90 + .../b2g_os/platform/gaia/hacking/index.html | 132 + files/it/archive/b2g_os/platform/gaia/index.html | 62 + files/it/archive/b2g_os/platform/gonk/index.html | 109 + files/it/archive/b2g_os/platform/index.html | 82 + .../b2g_os/platform/settings_list/index.html | 719 +++ .../index.html | 132 + .../prerequisiti_firefox_os_build/index.html | 455 ++ .../archive/b2g_os/quickstart/app_tools/index.html | 16 + files/it/archive/b2g_os/quickstart/index.html | 48 + .../quickstart/intro_app_web_aperte/index.html | 53 + .../quickstart/intro_to_firefox_os/index.html | 16 + .../b2g_os/quickstart/la_tua_prima_app/index.html | 262 + .../quickstart/per_sviluppatori_web/index.html | 52 + files/it/archive/b2g_os/security/index.html | 63 + .../b2g_os/security/security_model/index.html | 386 ++ files/it/archive/b2g_os/simulator/index.html | 244 + .../b2g_os/sviluppo_applicazioni/index.html | 14 + .../b2g_os/tvs_connected_devices/index.html | 175 + .../archive/b2g_os/usare_l_app_manager/index.html | 247 + .../ux/building_blocks/action_menu/index.html | 46 + .../b2g_os/ux/building_blocks/bottoni/index.html | 231 + .../b2g_os/ux/building_blocks/conferme/index.html | 87 + .../archive/b2g_os/ux/building_blocks/index.html | 528 ++ .../b2g_os/ux/design_asset_library/index.html | 31 + .../it/archive/b2g_os/web_applications/index.html | 61 + files/it/archive/index.html | 21 + files/it/archive/mdn/index.html | 20 + files/it/archive/mozilla/index.html | 10 + .../persona/.well-known-browserid/index.html | 44 + .../compatibilit\303\240_con_i_browser/index.html" | 86 + files/it/archive/mozilla/persona/index.html | 175 + .../persona/internationalization/index.html | 49 + .../persona/libraries_and_plugins/index.html | 195 + .../it/archive/mozilla/persona/marchio/index.html | 13 + .../archive/mozilla/persona/quick_setup/index.html | 273 + .../persona/remote_verification_api/index.html | 171 + .../persona/security_considerations/index.html | 55 + .../persona/the_implementor_s_guide/index.html | 57 + .../the_implementor_s_guide/testing/index.html | 8 + .../persona/the_navigator.id_api/index.html | 148 + .../archive/mozilla/persona/why_persona/index.html | 59 + files/it/archive/mozilla/xbl/index.html | 27 + files/it/archive/mozilla/xul/index.html | 63 + files/it/archive/mozilla/xul/tutorial/index.html | 170 + .../xulrunner/a_cosa_serve_xulrunner/index.html | 63 + .../applicazioni_basate_su_xulrunner/index.html | 45 + .../getting_started_with_xulrunner/index.html | 271 + files/it/archive/mozilla/xulrunner/index.html | 11 + .../index.html | 82 + .../mozilla/xulrunner/xulrunner_faq/index.html | 24 + files/it/archive/rss/index.html | 35 + files/it/archive/rss/iniziare/index.html | 6 + files/it/archive/standard_web/index.html | 75 + .../index.html | 104 + .../rdf_in_fifty_words_or_less/index.html | 76 + files/it/archive/web/index.html | 12 + .../archive/web/server-side_javascript/index.html | 14 + .../index.html | 17 + files/it/circa_il_document_object_model/index.html | 17 + .../cascata_ed_ereditariet\303\240/index.html" | 86 + .../conoscere_i_css/che_cosa_sono_i_css/index.html | 113 + .../come_funzionano_i_css/index.html | 117 + files/it/conoscere_i_css/css_leggibili/index.html | 156 + files/it/conoscere_i_css/i_selettori/index.html | 150 + files/it/conoscere_i_css/index.html | 42 + .../perch\303\251_usare_i_css/index.html" | 106 + .../index.html | 1193 ++++ .../index.html | 588 ++ files/it/creare_patch/index.html | 37 + files/it/creare_plugin_mozsearch/index.html | 190 + .../index.html | 171 + files/it/creare_un_microsommario/index.html | 209 + files/it/dare_una_mano_al_puntatore/index.html | 40 + files/it/dhtml/index.html | 56 + files/it/dom/index.html | 83 + files/it/dom_inspector/index.html | 24 + .../domande_frequenti_sulle_estensioni/index.html | 67 + files/it/e4x/index.html | 24 + "files/it/estensioni/comunit\303\240/index.html" | 22 + files/it/estensioni/index.html | 67 + files/it/firefox_1.5_per_sviluppatori/index.html | 165 + files/it/firefox_18_for_developers/index.html | 109 + files/it/firefox_2.0_per_sviluppatori/index.html | 117 + files/it/games/index.html | 93 + files/it/games/publishing_games/index.html | 27 + files/it/gecko/index.html | 71 + files/it/gli_user_agent_di_gecko/index.html | 40 + files/it/glossary/ajax/index.html | 29 + files/it/glossary/array/index.html | 28 + files/it/glossary/block/css/index.html | 16 + files/it/glossary/block/index.html | 13 + files/it/glossary/control_flow/index.html | 50 + files/it/glossary/css/index.html | 49 + files/it/glossary/doctype/index.html | 24 + files/it/glossary/first-class_function/index.html | 20 + files/it/glossary/head/index.html | 20 + files/it/glossary/header_di_risposta/index.html | 38 + files/it/glossary/hoisting/index.html | 74 + files/it/glossary/html/index.html | 50 + files/it/glossary/html5/index.html | 18 + files/it/glossary/http/index.html | 26 + files/it/glossary/index.html | 45 + files/it/glossary/javascript/index.html | 41 + files/it/glossary/node/dom/index.html | 14 + files/it/glossary/node/index.html | 15 + files/it/glossary/nullish/index.html | 6 + files/it/glossary/primitive/index.html | 32 + files/it/glossary/protocollo/index.html | 27 + files/it/glossary/reflow/index.html | 12 + files/it/glossary/rest/index.html | 33 + files/it/glossary/serialization/index.html | 22 + files/it/glossary/undefined/index.html | 12 + files/it/glossary/world_wide_web/index.html | 42 + files/it/il_modulo_xml_extras/index.html | 116 + files/it/impacchettare_l'estensione/index.html | 29 + files/it/incorporare_mozilla/index.html | 7 + .../indentazione_corretta_delle_liste/index.html | 106 + .../index.html | 33 + .../it/introduzione_a_svg_dentro_xhtml/index.html | 50 + files/it/le_colonne_nei_css3/index.html | 67 + files/it/le_preferenze_utente_e_xforms/index.html | 26 + .../index.html" | 336 ++ .../index.html" | 113 + .../cosa_\303\250_accessibilit\303\240/index.html" | 196 + .../index.html" | 359 ++ .../html_accessibilit\303\240/index.html" | 538 ++ "files/it/learn/accessibilit\303\240/index.html" | 67 + .../accessibilit\303\240/multimedia/index.html" | 392 ++ .../wai-aria_basics/index.html" | 422 ++ files/it/learn/come_contribuire/index.html | 88 + files/it/learn/common_questions/index.html | 139 + .../thinking_before_coding/index.html | 180 + files/it/learn/css/building_blocks/index.html | 89 + .../learn/css/building_blocks/selettori/index.html | 231 + .../css/building_blocks/styling_tables/index.html | 294 + files/it/learn/css/css_layout/flexbox/index.html | 344 ++ files/it/learn/css/css_layout/index.html | 78 + .../learn/css/css_layout/introduction/index.html | 711 +++ .../it/learn/css/css_layout/normal_flow/index.html | 108 + files/it/learn/css/index.html | 65 + .../styling_text/definire_stili_link/index.html | 438 ++ files/it/learn/css/styling_text/index.html | 57 + .../index.html" | 117 + .../come_funziona_il_web/index.html | 99 + .../css_basics/index.html | 267 + .../gestire_i_file/index.html | 95 + .../html_basics/index.html | 217 + .../learn/getting_started_with_the_web/index.html | 59 + .../installing_basic_software/index.html | 54 + .../javascript_basics/index.html | 402 ++ .../pubbicare_sito/index.html | 128 + .../index.html | 825 +++ .../it/learn/html/forms/form_validation/index.html | 846 +++ files/it/learn/html/forms/index.html | 85 + .../author_fast-loading_html_pages/index.html | 185 + files/it/learn/html/howto/index.html | 155 + .../learn/html/howto/uso_attributi_data/index.html | 82 + files/it/learn/html/index.html | 47 + .../fondamenti_di_testo_html/index.html | 953 ++++ .../getting_started/index.html | 649 +++ .../i_metadata_nella_head_in_html/index.html | 265 + .../it/learn/html/introduction_to_html/index.html | 67 + .../contenuti_video_e_audio/index.html | 270 + .../images_in_html/index.html | 352 ++ .../immagini_reattive/index.html | 241 + .../learn/html/multimedia_and_embedding/index.html | 71 + .../scrivi_una_semplice_pagina_in_html/index.html | 276 + files/it/learn/html/tables/index.html | 45 + files/it/learn/index.html | 83 + .../it/learn/javascript/building_blocks/index.html | 59 + files/it/learn/javascript/comefare/index.html | 291 + .../cosa_\303\250_andato_storto/index.html" | 253 + files/it/learn/javascript/first_steps/index.html | 68 + .../javascript/first_steps/variabili/index.html | 337 ++ files/it/learn/javascript/index.html | 63 + .../it/learn/javascript/oggetti/basics/index.html | 242 + files/it/learn/javascript/oggetti/index.html | 51 + files/it/learn/javascript/oggetti/json/index.html | 345 ++ .../index.html" | 69 + .../learn/server-side/django/admin_site/index.html | 361 ++ .../server-side/django/authentication/index.html | 700 +++ .../django/development_environment/index.html | 415 ++ files/it/learn/server-side/django/forms/index.html | 678 +++ .../server-side/django/generic_views/index.html | 626 ++ .../learn/server-side/django/home_page/index.html | 419 ++ files/it/learn/server-side/django/index.html | 70 + .../server-side/django/introduzione/index.html | 281 + .../it/learn/server-side/django/models/index.html | 466 ++ .../learn/server-side/django/sessions/index.html | 195 + .../server-side/django/skeleton_website/index.html | 406 ++ .../tutorial_local_library_website/index.html | 79 + .../it/learn/server-side/express_nodejs/index.html | 75 + files/it/learn/server-side/index.html | 52 + files/it/link_prefetching_faq/index.html | 126 + files/it/localization/index.html | 10 + files/it/mdn/about/index.html | 116 + files/it/mdn/community/index.html | 49 + .../creating_and_editing_pages/index.html | 110 + files/it/mdn/contribute/feedback/index.html | 49 + files/it/mdn/contribute/getting_started/index.html | 95 + .../convert_code_samples_to_be_live/index.html | 33 + .../howto/create_an_mdn_account/index.html | 49 + .../contribute/howto/delete_my_profile/index.html | 24 + .../howto/do_a_technical_review/index.html | 50 + .../howto/do_an_editorial_review/index.html | 46 + .../index.html | 57 + files/it/mdn/contribute/howto/index.html | 16 + files/it/mdn/contribute/howto/tag/index.html | 380 ++ files/it/mdn/contribute/index.html | 71 + .../contribute/localize/guidaitaliano/index.html | 82 + files/it/mdn/contribute/localize/index.html | 28 + .../localize/progetti_localizzazione/index.html | 283 + .../localize/translating_pages/index.html | 55 + files/it/mdn/contribute/persona_sign-in/index.html | 26 + files/it/mdn/editor/index.html | 9 + files/it/mdn/guidelines/index.html | 13 + files/it/mdn/guidelines/macros/index.html | 42 + .../it/mdn/guidelines/migliore_pratica/index.html | 34 + files/it/mdn/index.html | 29 + files/it/mdn/structures/index.html | 16 + .../tabelle_compatibilit\303\240/index.html" | 496 ++ files/it/mdn_at_ten/index.html | 41 + files/it/midas/index.html | 330 ++ files/it/midas/security_preferences/index.html | 73 + .../index.html | 1268 ++++ files/it/mozilla/add-ons/index.html | 93 + files/it/mozilla/add-ons/kaspersky/index.html | 82 + .../firefox_addons_developer_guide/index.html | 29 + .../mozilla/add-ons/overlay_extensions/index.html | 71 + .../index.html | 71 + .../overlay_extensions/xul_school/index.html | 71 + .../index.html | 104 + files/it/mozilla/add-ons/sdk/builder/index.html | 13 + files/it/mozilla/add-ons/sdk/guide/index.html | 114 + files/it/mozilla/add-ons/sdk/index.html | 84 + files/it/mozilla/add-ons/sdk/tutorials/index.html | 145 + .../add-ons/sdk/tutorials/installazione/index.html | 75 + .../anatomy_of_a_webextension/index.html | 146 + .../mozilla/add-ons/webextensions/api/index.html | 53 + .../api/runtime/connectnative/index.html | 122 + .../add-ons/webextensions/api/runtime/index.html | 168 + .../add-ons/webextensions/api/search/index.html | 10 + .../cosa_sono_le_webextensions/index.html | 59 + files/it/mozilla/add-ons/webextensions/index.html | 88 + .../la_tua_prima_webextension/index.html | 153 + .../webextensions/script_contenuto/index.html | 494 ++ .../webextensions/user_interface/index.html | 89 + files/it/mozilla/bugzilla/index.html | 58 + files/it/mozilla/bugzilla/testopia/index.html | 165 + files/it/mozilla/connettere/index.html | 98 + files/it/mozilla/developer_guide/index.html | 145 + .../mozilla/firefox/developer_edition/index.html | 60 + .../developer_edition/ripristinare/index.html | 27 + .../funzionalit\303\240_sperimentali/index.html" | 1506 +++++ files/it/mozilla/firefox/index.html | 52 + .../firefox/multiprocess_firefox/index.html | 73 + files/it/mozilla/firefox/releases/40/index.html | 117 + files/it/mozilla/firefox/releases/42/index.html | 189 + files/it/mozilla/firefox/releases/59/index.html | 203 + files/it/mozilla/firefox/releases/64/index.html | 184 + files/it/mozilla/firefox/releases/66/index.html | 156 + files/it/mozilla/firefox/releases/index.html | 10 + files/it/mozilla/firefox_for_android/index.html | 66 + files/it/mozilla/index.html | 13 + files/it/mozilla/localizzazione/index.html | 23 + .../criteri_revisione_marketplace/index.html | 79 + files/it/mozilla/marketplace/index.html | 129 + .../introduction_monetization/index.html | 31 + .../profiting_from_your_app/index.html | 53 + files/it/mozilla/marketplace/options/index.html | 21 + .../marketplace/options/packaged_apps/index.html | 55 + .../choosing_your_business_model/index.html | 121 + .../marketplace/prepare/introduction/index.html | 35 + files/it/mozilla/marketplace/publishing/index.html | 9 + .../opzioni_pubblicazione_app/index.html | 152 + .../marketplace/publishing/submit/index.html | 10 + files/it/mozilla/mobile/index.html | 28 + .../it/mozilla/mobile/viewport_meta_tag/index.html | 94 + .../performance/about_colon_memory/index.html | 188 + files/it/mozilla/performance/index.html | 143 + files/it/mozilla/preferences/index.html | 48 + .../index.html | 110 + files/it/mozilla/projects/index.html | 14 + .../projects/nss/esempi_codice_nss/index.html | 28 + files/it/mozilla/projects/nss/index.html | 198 + .../mozilla/qa/bug_writing_lineeguida/index.html | 253 + files/it/mozilla/qa/index.html | 251 + files/it/mozilla/tech/index.html | 14 + files/it/nspr/index.html | 16 + .../index.html | 26 + files/it/plug-in/index.html | 63 + files/it/python/index.html | 105 + files/it/rdf/index.html | 53 + files/it/rhino/index.html | 17 + files/it/rhino/scarica_rhino/index.html | 108 + files/it/spidermonkey/index.html | 50 + files/it/stringhe_user_agent_di_gecko/index.html | 52 + .../index.html | 37 + files/it/svg/index.html | 102 + files/it/sviluppare_mozilla/index.html | 75 + files/it/sviluppo_web/index.html | 51 + files/it/temi/background/index.html | 100 + files/it/temi/index.html | 8 + files/it/toolkit_api/index.html | 32 + files/it/tools/add-ons/index.html | 17 + .../debugger/how_to/disable_breakpoints/index.html | 20 + files/it/tools/debugger/how_to/index.html | 11 + .../debugger/how_to/open_the_debugger/index.html | 28 + .../debugger/how_to/set_a_breakpoint/index.html | 31 + .../how_to/set_a_conditional_breakpoint/index.html | 22 + .../debugger/how_to/step_through_code/index.html | 31 + files/it/tools/debugger/index.html | 69 + files/it/tools/index.html | 214 + files/it/tools/page_inspector/index.html | 48 + files/it/tools/prestazioni/index.html | 91 + files/it/tools/remote_debugging/index.html | 47 + .../it/tools/visualizzazione_flessibile/index.html | 79 + files/it/tools/web_console/helpers/index.html | 79 + files/it/tools/web_console/index.html | 37 + files/it/tools/webide/index.html | 333 ++ files/it/tools/webide/monitor/index.html | 160 + files/it/tools/webide/troubleshooting/index.html | 106 + files/it/tutorial_sulle_canvas/index.html | 55 + files/it/venkman/index.html | 42 + .../index.html | 32 + files/it/web/accessibility/index.html | 56 + files/it/web/accessibility/sviluppo_web/index.html | 66 + .../api/canvasrenderingcontext2d/canvas/index.html | 101 + .../canvasrenderingcontext2d/fillstyle/index.html | 209 + .../it/web/api/canvasrenderingcontext2d/index.html | 448 ++ .../ispointinpath/index.html | 208 + files/it/web/api/closeevent/index.html | 197 + files/it/web/api/console/index.html | 294 + files/it/web/api/console/log/index.html | 88 + files/it/web/api/console/table/index.html | 143 + files/it/web/api/crypto/index.html | 68 + files/it/web/api/crypto/subtle/index.html | 52 + files/it/web/api/datatransfer/getdata/index.html | 161 + files/it/web/api/datatransfer/index.html | 183 + files/it/web/api/document/anchors/index.html | 31 + files/it/web/api/document/applets/index.html | 25 + files/it/web/api/document/body/index.html | 88 + files/it/web/api/document/characterset/index.html | 32 + files/it/web/api/document/close/index.html | 27 + files/it/web/api/document/createelement/index.html | 139 + files/it/web/api/document/createrange/index.html | 30 + files/it/web/api/document/defaultview/index.html | 27 + files/it/web/api/document/doctype/index.html | 27 + .../it/web/api/document/documentelement/index.html | 68 + files/it/web/api/document/firstchild/index.html | 40 + files/it/web/api/document/forms/index.html | 128 + .../it/web/api/document/getelementbyid/index.html | 149 + .../api/document/getelementsbyclassname/index.html | 82 + .../web/api/document/getelementsbyname/index.html | 97 + .../api/document/getelementsbytagname/index.html | 116 + files/it/web/api/document/head/index.html | 84 + files/it/web/api/document/height/index.html | 35 + files/it/web/api/document/images/index.html | 52 + files/it/web/api/document/importnode/index.html | 45 + files/it/web/api/document/index.html | 308 + files/it/web/api/document/lastmodified/index.html | 31 + files/it/web/api/document/links/index.html | 100 + files/it/web/api/document/namespaceuri/index.html | 29 + files/it/web/api/document/open/index.html | 46 + files/it/web/api/document/queryselector/index.html | 121 + .../web/api/document/queryselectorall/index.html | 180 + files/it/web/api/document/referrer/index.html | 23 + files/it/web/api/document/stylesheets/index.html | 43 + files/it/web/api/document/title/index.html | 32 + files/it/web/api/document/url/index.html | 29 + files/it/web/api/document/width/index.html | 32 + files/it/web/api/document/write/index.html | 74 + files/it/web/api/document/writeln/index.html | 34 + files/it/web/api/document_object_model/index.html | 435 ++ .../document_object_model/introduzione/index.html | 257 + .../index.html | 46 + .../getinstalled/index.html | 49 + .../it/web/api/domapplicationsregistry/index.html | 89 + files/it/web/api/domstring/index.html | 56 + files/it/web/api/domtokenlist/index.html | 115 + files/it/web/api/domtokenlist/item/index.html | 67 + .../it/web/api/element/addeventlistener/index.html | 694 +++ files/it/web/api/element/attributes/index.html | 120 + files/it/web/api/element/childnodes/index.html | 99 + files/it/web/api/element/classlist/index.html | 288 + files/it/web/api/element/classname/index.html | 84 + files/it/web/api/element/clientheight/index.html | 36 + files/it/web/api/element/closest/index.html | 147 + files/it/web/api/element/firstchild/index.html | 90 + files/it/web/api/element/getattribute/index.html | 48 + .../api/element/getelementsbytagname/index.html | 80 + files/it/web/api/element/hasattribute/index.html | 75 + files/it/web/api/element/hasattributes/index.html | 28 + files/it/web/api/element/index.html | 475 ++ files/it/web/api/element/innerhtml/index.html | 213 + .../web/api/element/insertadjacenthtml/index.html | 102 + files/it/web/api/element/nodename/index.html | 116 + files/it/web/api/element/nodetype/index.html | 178 + files/it/web/api/element/nodevalue/index.html | 75 + files/it/web/api/element/parentnode/index.html | 61 + files/it/web/api/element/prefix/index.html | 26 + files/it/web/api/element/queryselector/index.html | 131 + .../it/web/api/element/queryselectorall/index.html | 182 + .../it/web/api/element/removeattribute/index.html | 57 + .../web/api/element/requestfullscreen/index.html | 110 + files/it/web/api/element/scrollheight/index.html | 170 + files/it/web/api/element/scrolltop/index.html | 83 + files/it/web/api/element/setattribute/index.html | 83 + files/it/web/api/element/tagname/index.html | 72 + files/it/web/api/element/textcontent/index.html | 138 + .../it/web/api/element/toggleattribute/index.html | 104 + files/it/web/api/event/altkey/index.html | 46 + files/it/web/api/event/bubbles/index.html | 31 + files/it/web/api/event/button/index.html | 57 + files/it/web/api/event/cancelable/index.html | 23 + files/it/web/api/event/charcode/index.html | 49 + files/it/web/api/event/ctrlkey/index.html | 44 + files/it/web/api/event/currenttarget/index.html | 99 + files/it/web/api/event/eventphase/index.html | 19 + files/it/web/api/event/index.html | 240 + files/it/web/api/event/ischar/index.html | 30 + files/it/web/api/event/keycode/index.html | 48 + files/it/web/api/event/layerx/index.html | 102 + files/it/web/api/event/layery/index.html | 102 + files/it/web/api/event/metakey/index.html | 30 + files/it/web/api/event/pagex/index.html | 98 + files/it/web/api/event/pagey/index.html | 98 + files/it/web/api/event/preventdefault/index.html | 176 + files/it/web/api/event/shiftkey/index.html | 45 + files/it/web/api/event/stoppropagation/index.html | 60 + files/it/web/api/event/timestamp/index.html | 45 + files/it/web/api/event/type/index.html | 50 + files/it/web/api/event/view/index.html | 22 + files/it/web/api/event/which/index.html | 60 + files/it/web/api/fetch_api/index.html | 170 + files/it/web/api/file/index.html | 101 + .../using_files_from_web_applications/index.html | 506 ++ files/it/web/api/geolocation/index.html | 133 + .../api/geolocation/using_geolocation/index.html | 321 ++ .../web/api/geolocation/watchposition/index.html | 166 + files/it/web/api/geolocationposition/index.html | 126 + files/it/web/api/globaleventhandlers/index.html | 714 +++ .../api/globaleventhandlers/onresize/index.html | 77 + files/it/web/api/htmlcanvaselement/index.html | 245 + .../it/web/api/htmlcanvaselement/toblob/index.html | 262 + files/it/web/api/htmlcollection/index.html | 101 + files/it/web/api/htmlcollection/item/index.html | 50 + files/it/web/api/htmlelement/index.html | 481 ++ .../it/web/api/htmlelement/offsetheight/index.html | 123 + .../api/htmlformelement/acceptcharset/index.html | 22 + files/it/web/api/htmlformelement/action/index.html | 30 + .../it/web/api/htmlformelement/elements/index.html | 34 + .../it/web/api/htmlformelement/enctype/index.html | 28 + files/it/web/api/htmlformelement/index.html | 125 + files/it/web/api/htmlformelement/length/index.html | 26 + files/it/web/api/htmlformelement/method/index.html | 28 + files/it/web/api/htmlformelement/name/index.html | 35 + files/it/web/api/htmlformelement/reset/index.html | 28 + files/it/web/api/htmlformelement/submit/index.html | 30 + files/it/web/api/htmlformelement/target/index.html | 24 + files/it/web/api/htmliframeelement/index.html | 455 ++ files/it/web/api/htmliframeelement/mute/index.html | 93 + files/it/web/api/htmlunknownelement/index.html | 58 + files/it/web/api/index.html | 17 + files/it/web/api/indexeddb_api/index.html | 243 + files/it/web/api/mutationobserver/index.html | 102 + .../it/web/api/navigator/cookieenabled/index.html | 83 + files/it/web/api/navigator/credentials/index.html | 57 + files/it/web/api/navigator/index.html | 119 + .../web/api/navigatorconcurrenthardware/index.html | 56 + files/it/web/api/node/appendchild/index.html | 99 + files/it/web/api/node/index.html | 368 ++ files/it/web/api/node/lastchild/index.html | 59 + files/it/web/api/node/nextsibling/index.html | 101 + files/it/web/api/node/previoussibling/index.html | 81 + files/it/web/api/nodelist/foreach/index.html | 125 + files/it/web/api/nodelist/index.html | 124 + files/it/web/api/notifiche/dir/index.html | 72 + files/it/web/api/notifiche/index.html | 495 ++ files/it/web/api/parentnode/children/index.html | 95 + .../api/parentnode/firstelementchild/index.html | 99 + files/it/web/api/parentnode/index.html | 90 + .../web/api/parentnode/lastelementchild/index.html | 98 + files/it/web/api/performance/index.html | 135 + files/it/web/api/performance/now/index.html | 104 + files/it/web/api/range/clonecontents/index.html | 27 + files/it/web/api/range/clonerange/index.html | 28 + files/it/web/api/range/collapse/index.html | 36 + files/it/web/api/range/collapsed/index.html | 33 + .../api/range/commonancestorcontainer/index.html | 31 + .../web/api/range/compareboundarypoints/index.html | 54 + files/it/web/api/range/comparepoint/index.html | 37 + .../api/range/createcontextualfragment/index.html | 37 + files/it/web/api/range/deletecontents/index.html | 25 + files/it/web/api/range/detach/index.html | 28 + files/it/web/api/range/endcontainer/index.html | 29 + files/it/web/api/range/endoffset/index.html | 29 + files/it/web/api/range/extractcontents/index.html | 27 + files/it/web/api/range/index.html | 150 + files/it/web/api/range/insertnode/index.html | 38 + files/it/web/api/range/ispointinrange/index.html | 31 + files/it/web/api/range/selectnode/index.html | 35 + .../it/web/api/range/selectnodecontents/index.html | 37 + files/it/web/api/range/setend/index.html | 38 + files/it/web/api/range/setendafter/index.html | 35 + files/it/web/api/range/setendbefore/index.html | 35 + files/it/web/api/range/setstart/index.html | 38 + files/it/web/api/range/setstartafter/index.html | 35 + files/it/web/api/range/setstartbefore/index.html | 35 + files/it/web/api/range/startcontainer/index.html | 29 + files/it/web/api/range/startoffset/index.html | 29 + files/it/web/api/range/surroundcontents/index.html | 36 + files/it/web/api/range/tostring/index.html | 28 + files/it/web/api/selection/addrange/index.html | 39 + files/it/web/api/selection/anchornode/index.html | 21 + files/it/web/api/selection/anchoroffset/index.html | 21 + files/it/web/api/selection/collapse/index.html | 44 + .../it/web/api/selection/collapsetoend/index.html | 19 + .../web/api/selection/collapsetostart/index.html | 14 + files/it/web/api/selection/containsnode/index.html | 47 + .../api/selection/deletefromdocument/index.html | 28 + files/it/web/api/selection/extend/index.html | 39 + files/it/web/api/selection/focusnode/index.html | 21 + files/it/web/api/selection/focusoffset/index.html | 21 + files/it/web/api/selection/getrangeat/index.html | 37 + files/it/web/api/selection/index.html | 102 + files/it/web/api/selection/iscollapsed/index.html | 24 + files/it/web/api/selection/rangecount/index.html | 19 + .../web/api/selection/removeallranges/index.html | 19 + files/it/web/api/selection/removerange/index.html | 38 + .../web/api/selection/selectallchildren/index.html | 39 + files/it/web/api/selection/tostring/index.html | 27 + files/it/web/api/storage/clear/index.html | 126 + files/it/web/api/storage/getitem/index.html | 144 + files/it/web/api/storage/index.html | 161 + files/it/web/api/storage/setitem/index.html | 133 + files/it/web/api/urlutils/index.html | 205 + files/it/web/api/webgl_api/index.html | 254 + files/it/web/api/websocket/index.html | 148 + files/it/web/api/websocket/websocket/index.html | 48 + files/it/web/api/window/alert/index.html | 36 + files/it/web/api/window/back/index.html | 27 + files/it/web/api/window/blur/index.html | 26 + files/it/web/api/window/close/index.html | 72 + files/it/web/api/window/closed/index.html | 66 + files/it/web/api/window/confirm/index.html | 47 + files/it/web/api/window/crypto/index.html | 90 + files/it/web/api/window/defaultstatus/index.html | 38 + .../web/api/window/devicemotion_event/index.html | 97 + files/it/web/api/window/document/index.html | 39 + files/it/web/api/window/focus/index.html | 26 + files/it/web/api/window/forward/index.html | 22 + files/it/web/api/window/getselection/index.html | 46 + files/it/web/api/window/history/index.html | 37 + files/it/web/api/window/home/index.html | 24 + files/it/web/api/window/index.html | 686 +++ files/it/web/api/window/localstorage/index.html | 138 + files/it/web/api/window/locationbar/index.html | 43 + files/it/web/api/window/matchmedia/index.html | 91 + files/it/web/api/window/moveby/index.html | 36 + files/it/web/api/window/moveto/index.html | 37 + files/it/web/api/window/name/index.html | 23 + files/it/web/api/window/onuserproximity/index.html | 45 + files/it/web/api/window/opener/index.html | 24 + .../api/window/orientationchange_event/index.html | 66 + files/it/web/api/window/print/index.html | 17 + files/it/web/api/window/prompt/index.html | 51 + .../api/window/requestanimationframe/index.html | 115 + files/it/web/api/window/resizeby/index.html | 35 + files/it/web/api/window/resizeto/index.html | 39 + files/it/web/api/window/sessionstorage/index.html | 138 + files/it/web/api/window/sidebar/index.html | 56 + files/it/web/api/window/sizetocontent/index.html | 15 + files/it/web/api/window/status/index.html | 26 + files/it/web/api/window/statusbar/index.html | 32 + files/it/web/api/window/stop/index.html | 17 + files/it/web/api/window/top/index.html | 87 + .../api/windoworworkerglobalscope/fetch/index.html | 167 + .../web/api/windoworworkerglobalscope/index.html | 115 + .../web/api/windowtimers/clearinterval/index.html | 48 + files/it/web/api/windowtimers/index.html | 124 + files/it/web/api/worker/index.html | 107 + files/it/web/api/xmlhttprequest/index.html | 173 + .../xmlhttprequest/onreadystatechange/index.html | 119 + files/it/web/api/xmlhttprequest/open/index.html | 115 + .../web/api/xmlhttprequest/readystate/index.html | 152 + .../xmlhttprequest/usare_xmlhttprequest/index.html | 741 +++ .../api/xmlhttprequest/xmlhttprequest/index.html | 50 + .../web/css/-moz-border-bottom-colors/index.html | 89 + .../web/css/-moz-font-language-override/index.html | 6 + .../web/css/-webkit-overflow-scrolling/index.html | 52 + files/it/web/css/@document/index.html | 47 + files/it/web/css/_colon_-moz-first-node/index.html | 46 + files/it/web/css/_colon_-moz-last-node/index.html | 46 + .../it/web/css/_colon_-moz-list-bullet/index.html | 42 + files/it/web/css/_colon_active/index.html | 128 + files/it/web/css/_colon_focus/index.html | 117 + files/it/web/css/_colon_hover/index.html | 99 + files/it/web/css/_doublecolon_selection/index.html | 134 + files/it/web/css/attribute_selectors/index.html | 239 + files/it/web/css/background-attachment/index.html | 135 + files/it/web/css/background-color/index.html | 86 + files/it/web/css/background-image/index.html | 126 + files/it/web/css/background-position/index.html | 158 + files/it/web/css/background-repeat/index.html | 165 + files/it/web/css/background/index.html | 116 + files/it/web/css/border-bottom/index.html | 99 + files/it/web/css/border-style/index.html | 229 + files/it/web/css/border/index.html | 109 + files/it/web/css/cascade/index.html | 149 + files/it/web/css/color/index.html | 81 + files/it/web/css/css_box_model/index.html | 165 + .../introduction_to_the_css_box_model/index.html | 68 + .../it/web/css/css_flexible_box_layout/index.html | 118 + .../using_css_flexible_boxes/index.html | 394 ++ files/it/web/css/css_positioning/index.html | 63 + .../understanding_z_index/index.html | 51 + files/it/web/css/cursor/index.html | 388 ++ .../index.html" | 40 + files/it/web/css/flex-shrink/index.html | 120 + files/it/web/css/flex/index.html | 200 + files/it/web/css/font-size-adjust/index.html | 114 + .../web/css/guida_di_riferimento_ai_css/index.html | 96 + files/it/web/css/index.html | 107 + files/it/web/css/media_queries/index.html | 136 + files/it/web/css/min-width/index.html | 258 + files/it/web/css/mozilla_extensions/index.html | 336 ++ files/it/web/css/object-fit/index.html | 161 + files/it/web/css/pseudo-classes/index.html | 167 + files/it/web/css/ricette_layout/index.html | 60 + .../it/web/css/selettore_figli_diretti/index.html | 121 + files/it/web/css/text-align/index.html | 108 + files/it/web/css/text-shadow/index.html | 122 + .../web/css/transition-timing-function/index.html | 634 ++ files/it/web/css/type_selectors/index.html | 78 + files/it/web/css/universal_selectors/index.html | 105 + files/it/web/css/word-break/index.html | 131 + files/it/web/css/z-index/index.html | 192 + .../web/esempi_di_tecnologie_web_open/index.html | 136 + files/it/web/events/domcontentloaded/index.html | 75 + files/it/web/events/index.html | 2310 ++++++++ files/it/web/events/load/index.html | 123 + files/it/web/guide/ajax/index.html | 57 + files/it/web/guide/ajax/iniziare/index.html | 252 + files/it/web/guide/api/index.html | 26 + files/it/web/guide/css/index.html | 23 + files/it/web/guide/graphics/index.html | 58 + .../guide/html/categorie_di_contenuto/index.html | 141 + .../it/web/guide/html/editable_content/index.html | 216 + .../rich-text_editing_in_mozilla/index.html | 420 ++ files/it/web/guide/index.html | 39 + files/it/web/guide/woff/index.html | 99 + files/it/web/html/attributi/index.html | 590 ++ .../canvas/drawing_graphics_with_canvas/index.html | 161 + files/it/web/html/canvas/index.html | 73 + files/it/web/html/element/a/index.html | 457 ++ files/it/web/html/element/abbr/index.html | 142 + files/it/web/html/element/acronym/index.html | 118 + files/it/web/html/element/address/index.html | 120 + files/it/web/html/element/applet/index.html | 120 + files/it/web/html/element/area/index.html | 191 + files/it/web/html/element/article/index.html | 119 + files/it/web/html/element/aside/index.html | 134 + files/it/web/html/element/audio/index.html | 341 ++ files/it/web/html/element/b/index.html | 134 + files/it/web/html/element/base/index.html | 137 + files/it/web/html/element/basefont/index.html | 103 + files/it/web/html/element/bdi/index.html | 116 + files/it/web/html/element/bdo/index.html | 128 + files/it/web/html/element/bgsound/index.html | 101 + files/it/web/html/element/big/index.html | 99 + files/it/web/html/element/blink/index.html | 112 + files/it/web/html/element/blockquote/index.html | 130 + files/it/web/html/element/body/index.html | 211 + files/it/web/html/element/br/index.html | 135 + files/it/web/html/element/canvas/index.html | 178 + files/it/web/html/element/caption/index.html | 134 + files/it/web/html/element/center/index.html | 51 + files/it/web/html/element/div/index.html | 137 + files/it/web/html/element/figura/index.html | 170 + files/it/web/html/element/footer/index.html | 119 + files/it/web/html/element/head/index.html | 85 + files/it/web/html/element/header/index.html | 120 + files/it/web/html/element/hgroup/index.html | 99 + files/it/web/html/element/html/index.html | 87 + files/it/web/html/element/i/index.html | 115 + files/it/web/html/element/iframe/index.html | 471 ++ files/it/web/html/element/img/index.html | 422 ++ files/it/web/html/element/index.html | 235 + files/it/web/html/element/input/file/index.html | 520 ++ files/it/web/html/element/input/index.html | 576 ++ files/it/web/html/element/kbd/index.html | 153 + files/it/web/html/element/main/index.html | 154 + files/it/web/html/element/nav/index.html | 124 + files/it/web/html/element/output/index.html | 122 + files/it/web/html/element/p/index.html | 109 + files/it/web/html/element/section/index.html | 150 + files/it/web/html/element/span/index.html | 110 + files/it/web/html/element/strike/index.html | 51 + files/it/web/html/element/table/index.html | 437 ++ files/it/web/html/element/time/index.html | 118 + files/it/web/html/element/title/index.html | 56 + files/it/web/html/forms_in_html/index.html | 83 + files/it/web/html/global_attributes/id/index.html | 109 + files/it/web/html/global_attributes/index.html | 444 ++ files/it/web/html/html5/index.html | 167 + .../html/html5/introduction_to_html5/index.html | 22 + files/it/web/html/index.html | 75 + files/it/web/html/riferimento/index.html | 46 + .../index.html | 320 ++ .../html/utilizzare_application_cache/index.html | 383 ++ files/it/web/http/authentication/index.html | 134 + files/it/web/http/basi_http/index.html | 48 + files/it/web/http/caching/index.html | 187 + files/it/web/http/compressione/index.html | 67 + files/it/web/http/conditional_requests/index.html | 144 + files/it/web/http/cookies/index.html | 193 + .../http/cors/errors/corsdidnotsucceed/index.html | 36 + .../cors/errors/corsmissingalloworigin/index.html | 46 + files/it/web/http/cors/errors/index.html | 76 + files/it/web/http/cors/index.html | 565 ++ files/it/web/http/feature_policy/index.html | 161 + files/it/web/http/headers/age/index.html | 69 + files/it/web/http/headers/authorization/index.html | 88 + files/it/web/http/headers/cookie/index.html | 74 + files/it/web/http/headers/host/index.html | 77 + files/it/web/http/headers/index.html | 368 ++ files/it/web/http/headers/server/index.html | 70 + .../headers/strict-transport-security/index.html | 118 + .../http/headers/x-content-type-options/index.html | 90 + .../web/http/headers/x-xss-protection/index.html | 90 + files/it/web/http/index.html | 231 + .../web/http/negoziazione-del-contenuto/index.html | 143 + files/it/web/http/panoramica/index.html | 176 + .../web/http/protocol_upgrade_mechanism/index.html | 148 + files/it/web/http/redirections/index.html | 318 ++ .../http/resources_and_specifications/index.html | 267 + files/it/web/http/richieste_range/index.html | 115 + files/it/web/http/sessione/index.html | 171 + files/it/web/http/status/100/index.html | 42 + files/it/web/http/status/101/index.html | 51 + files/it/web/http/status/200/index.html | 55 + files/it/web/http/status/302/index.html | 50 + files/it/web/http/status/404/index.html | 62 + files/it/web/http/status/500/index.html | 43 + files/it/web/http/status/index.html | 171 + files/it/web/index.html | 125 + files/it/web/javascript/chiusure/index.html | 345 ++ .../javascript/cos\303\250_javascript/index.html" | 57 + files/it/web/javascript/data_structures/index.html | 444 ++ .../ecmascript_6_support_in_mozilla/index.html | 153 + files/it/web/javascript/eventloop/index.html | 106 + .../javascript/gestione_della_memoria/index.html | 197 + files/it/web/javascript/getting_started/index.html | 330 ++ .../index.html | 461 ++ .../guida/dettagli_object_model/index.html | 727 +++ .../guida/espressioni_regolari/index.html | 647 +++ files/it/web/javascript/guida/functions/index.html | 646 +++ .../javascript/guida/grammar_and_types/index.html | 659 +++ files/it/web/javascript/guida/index.html | 124 + .../web/javascript/guida/introduzione/index.html | 140 + .../guida/iteratori_e_generatori/index.html | 162 + .../guida/loops_and_iteration/index.html | 340 ++ .../web/javascript/il_dom_e_javascript/index.html | 81 + files/it/web/javascript/index.html | 116 + .../inheritance_and_the_prototype_chain/index.html | 556 ++ .../index.html | 390 ++ .../javascript/new_in_javascript/1.8.5/index.html | 123 + .../it/web/javascript/new_in_javascript/index.html | 80 + .../novit\303\240_in_javascript_1.6/index.html" | 81 + .../novit\303\240_in_javascript_1.7/index.html" | 79 + .../reference/classes/costruttore/index.html | 161 + .../reference/classes/extends/index.html | 175 + .../it/web/javascript/reference/classes/index.html | 270 + .../javascript/reference/classes/static/index.html | 70 + .../it/web/javascript/reference/errors/index.html | 31 + .../errors/invalid_array_length/index.html | 77 + .../invalid_assignment_left-hand_side/index.html | 54 + .../missing_semicolon_before_statement/index.html | 78 + .../reference/errors/too_much_recursion/index.html | 72 + .../reference/errors/unexpected_token/index.html | 50 + .../reference/errors/unexpected_type/index.html | 67 + .../arguments/index.html | 224 + .../arrow_functions/index.html | 394 ++ .../functions_and_function_scope/get/index.html | 154 + .../functions_and_function_scope/index.html | 617 ++ .../functions_and_function_scope/set/index.html | 214 + .../global_objects/array/concat/index.html | 188 + .../global_objects/array/copywithin/index.html | 180 + .../global_objects/array/entries/index.html | 77 + .../global_objects/array/every/index.html | 184 + .../reference/global_objects/array/fill/index.html | 155 + .../global_objects/array/filter/index.html | 245 + .../reference/global_objects/array/find/index.html | 216 + .../global_objects/array/findindex/index.html | 182 + .../reference/global_objects/array/flat/index.html | 159 + .../global_objects/array/flatmap/index.html | 142 + .../global_objects/array/foreach/index.html | 331 ++ .../reference/global_objects/array/from/index.html | 242 + .../global_objects/array/includes/index.html | 162 + .../reference/global_objects/array/index.html | 480 ++ .../global_objects/array/indexof/index.html | 226 + .../global_objects/array/isarray/index.html | 133 + .../reference/global_objects/array/join/index.html | 112 + .../reference/global_objects/array/keys/index.html | 74 + .../global_objects/array/lastindexof/index.html | 169 + .../global_objects/array/length/index.html | 129 + .../reference/global_objects/array/map/index.html | 323 ++ .../reference/global_objects/array/of/index.html | 92 + .../reference/global_objects/array/pop/index.html | 117 + .../global_objects/array/prototype/index.html | 203 + .../reference/global_objects/array/push/index.html | 142 + .../global_objects/array/reduce/index.html | 576 ++ .../global_objects/array/reverse/index.html | 133 + .../global_objects/array/slice/index.html | 241 + .../reference/global_objects/array/some/index.html | 202 + .../reference/global_objects/array/sort/index.html | 267 + .../global_objects/array/splice/index.html | 163 + .../global_objects/array/tostring/index.html | 80 + .../global_objects/array/unshift/index.html | 98 + .../global_objects/array/values/index.html | 87 + .../global_objects/arraybuffer/index.html | 147 + .../reference/global_objects/atomics/index.html | 166 + .../global_objects/atomics/store/index.html | 91 + .../global_objects/date/getdate/index.html | 78 + .../global_objects/date/getday/index.html | 89 + .../global_objects/date/getfullyear/index.html | 84 + .../global_objects/date/gethours/index.html | 79 + .../global_objects/date/getmilliseconds/index.html | 77 + .../global_objects/date/getminutes/index.html | 77 + .../global_objects/date/getmonth/index.html | 90 + .../global_objects/date/getseconds/index.html | 79 + .../global_objects/date/gettime/index.html | 125 + .../date/gettimezoneoffset/index.html | 99 + .../reference/global_objects/date/index.html | 249 + .../reference/global_objects/date/now/index.html | 96 + .../reference/global_objects/date/utc/index.html | 135 + .../reference/global_objects/decodeuri/index.html | 120 + .../global_objects/decodeuricomponent/index.html | 124 + .../reference/global_objects/encodeuri/index.html | 160 + .../global_objects/encodeuricomponent/index.html | 162 + .../reference/global_objects/escape/index.html | 126 + .../reference/global_objects/eval/index.html | 231 + .../global_objects/function/apply/index.html | 250 + .../global_objects/function/arguments/index.html | 92 + .../global_objects/function/arity/index.html | 26 + .../global_objects/function/bind/index.html | 277 + .../global_objects/function/call/index.html | 175 + .../reference/global_objects/function/index.html | 237 + .../global_objects/function/length/index.html | 87 + .../reference/global_objects/generator/index.html | 187 + .../global_objects/generator/next/index.html | 157 + .../javascript/reference/global_objects/index.html | 182 + .../reference/global_objects/infinity/index.html | 114 + .../reference/global_objects/isfinite/index.html | 136 + .../reference/global_objects/isnan/index.html | 176 + .../reference/global_objects/json/index.html | 244 + .../reference/global_objects/json/parse/index.html | 126 + .../global_objects/json/stringify/index.html | 325 ++ .../reference/global_objects/map/clear/index.html | 76 + .../reference/global_objects/map/delete/index.html | 74 + .../global_objects/map/foreach/index.html | 88 + .../reference/global_objects/map/index.html | 439 ++ .../reference/global_objects/math/abs/index.html | 95 + .../reference/global_objects/math/acos/index.html | 94 + .../reference/global_objects/math/atan/index.html | 100 + .../reference/global_objects/math/atan2/index.html | 155 + .../reference/global_objects/math/ceil/index.html | 161 + .../reference/global_objects/math/e/index.html | 79 + .../reference/global_objects/math/floor/index.html | 158 + .../reference/global_objects/math/index.html | 208 + .../reference/global_objects/math/max/index.html | 145 + .../reference/global_objects/math/min/index.html | 160 + .../reference/global_objects/math/pow/index.html | 151 + .../global_objects/math/random/index.html | 107 + .../reference/global_objects/math/round/index.html | 100 + .../reference/global_objects/math/sqrt/index.html | 136 + .../reference/global_objects/nan/index.html | 79 + .../reference/global_objects/null/index.html | 89 + .../reference/global_objects/number/index.html | 188 + .../global_objects/object/assign/index.html | 268 + .../global_objects/object/create/index.html | 234 + .../object/defineproperties/index.html | 224 + .../global_objects/object/freeze/index.html | 210 + .../object/getprototypeof/index.html | 130 + .../object/hasownproperty/index.html | 164 + .../reference/global_objects/object/index.html | 224 + .../reference/global_objects/object/is/index.html | 130 + .../global_objects/object/isfrozen/index.html | 184 + .../global_objects/object/issealed/index.html | 146 + .../global_objects/object/keys/index.html | 167 + .../global_objects/object/observe/index.html | 189 + .../global_objects/object/prototype/index.html | 214 + .../global_objects/object/seal/index.html | 157 + .../global_objects/object/tostring/index.html | 170 + .../reference/global_objects/parsefloat/index.html | 139 + .../reference/global_objects/parseint/index.html | 190 + .../global_objects/promise/all/index.html | 110 + .../global_objects/promise/catch/index.html | 124 + .../reference/global_objects/promise/index.html | 248 + .../global_objects/proxy/handler/apply/index.html | 119 + .../global_objects/proxy/handler/index.html | 83 + .../reference/global_objects/proxy/index.html | 396 ++ .../global_objects/proxy/revocabile/index.html | 86 + .../global_objects/set/entries/index.html | 113 + .../reference/global_objects/set/index.html | 394 ++ .../reference/global_objects/set/values/index.html | 114 + .../global_objects/string/charat/index.html | 247 + .../global_objects/string/includes/index.html | 188 + .../reference/global_objects/string/index.html | 410 ++ .../global_objects/string/indexof/index.html | 151 + .../global_objects/string/length/index.html | 90 + .../global_objects/string/prototype/index.html | 178 + .../reference/global_objects/string/raw/index.html | 108 + .../reference/global_objects/symbol/index.html | 230 + .../reference/global_objects/undefined/index.html | 173 + .../reference/global_objects/unescape/index.html | 124 + .../reference/global_objects/uneval/index.html | 112 + files/it/web/javascript/reference/index.html | 49 + .../operators/destructuring_assignment/index.html | 451 ++ .../javascript/reference/operators/in/index.html | 198 + .../web/javascript/reference/operators/index.html | 282 + .../javascript/reference/operators/new/index.html | 186 + .../operators/operator_condizionale/index.html | 171 + .../operators/operatore_virgola/index.html | 105 + .../operators/operatori_aritmetici/index.html | 291 + .../reference/operators/spread_syntax/index.html | 257 + .../reference/operators/super/index.html | 181 + .../javascript/reference/operators/this/index.html | 410 ++ .../reference/operators/yield/index.html | 163 + .../reference/statements/break/index.html | 130 + .../reference/statements/empty/index.html | 102 + .../reference/statements/export/index.html | 259 + .../reference/statements/for...of/index.html | 264 + .../reference/statements/function_star_/index.html | 280 + .../reference/statements/import/index.html | 167 + .../web/javascript/reference/statements/index.html | 131 + .../javascript/reference/statements/let/index.html | 208 + .../reference/statements/switch/index.html | 320 ++ .../reference/statements/throw/index.html | 195 + .../javascript/reference/statements/var/index.html | 221 + .../reference/template_strings/index.html | 210 + .../una_reintroduzione_al_javascript/index.html | 966 ++++ files/it/web/performance/index.html | 286 + .../percorso_critico_di_rendering/index.html | 62 + files/it/web/reference/api/index.html | 58 + files/it/web/reference/index.html | 23 + files/it/web/security/index.html | 18 + files/it/web/security/password_insicure/index.html | 67 + files/it/web/svg/element/animate/index.html | 115 + files/it/web/svg/element/index.html | 297 + files/it/web/tutorials/index.html | 152 + files/it/web/web_components/index.html | 210 + .../usare_custom_elements/index.html | 297 + files/it/web/xslt/index.html | 40 + .../mobile/design_sensibile/index.html | 49 + files/it/web_development/mobile/index.html | 17 + files/it/websockets/index.html | 179 + .../index.html | 184 + files/it/window.find/index.html | 32 + files/it/xforms/index.html | 47 + files/it/xhtml/index.html | 26 + files/it/xml_in_mozilla/index.html | 283 + files/it/xml_web_services/index.html | 38 + files/it/xpcnativewrapper/index.html | 191 + files/it/xpcom/binding_per_i_linguaggi/index.html | 22 + files/it/xpcom/index.html | 53 + files/it/zone/index.html | 57 + 1016 files changed, 151528 insertions(+) create mode 100644 files/it/_redirects.txt create mode 100644 files/it/_wikihistory.json create mode 100644 files/it/adattare_le_applicazioni_xul_a_firefox_1.5/index.html create mode 100644 files/it/aggiungere_fornitori_di_dati_anti-phishing/index.html create mode 100644 files/it/api_sociale/index.html create mode 100644 files/it/archive/add-ons/index.html create mode 100644 files/it/archive/add-ons/supportare_i_suggerimenti_nei_plugin_di_ricerca/index.html create mode 100644 files/it/archive/add-ons/sviluppare_un_estensione/index.html create mode 100644 files/it/archive/b2g_os/apps/index.html create mode 100644 files/it/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html create mode 100644 files/it/archive/b2g_os/automated_testing/index.html create mode 100644 files/it/archive/b2g_os/building/index.html create mode 100644 files/it/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html create mode 100644 files/it/archive/b2g_os/building_and_installing_firefox_os/index.html create mode 100644 files/it/archive/b2g_os/building_and_installing_firefox_os/sommario_del_processo_di_compilazione_di_b2g_os/index.html create mode 100644 files/it/archive/b2g_os/debugging/index.html create mode 100644 files/it/archive/b2g_os/debugging/installazione_adb/index.html create mode 100644 files/it/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html create mode 100644 files/it/archive/b2g_os/developing_firefox_os/index.html create mode 100644 files/it/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html create mode 100644 files/it/archive/b2g_os/firefox_os_apps/building_blocks/index.html create mode 100644 files/it/archive/b2g_os/firefox_os_apps/index.html create mode 100644 files/it/archive/b2g_os/firefox_os_usage_tips/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/build_system_primer/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/customizing_build-time_apps/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/diversi_modi_per_eseguire_gaia/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/gaia_tools_reference/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/make_options_reference/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/making_gaia_code_changes/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/running_the_gaia_codebase/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/submitting_a_gaia_patch/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/testing_gaia_code_changes/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/understanding_the_gaia_codebase/index.html create mode 100644 files/it/archive/b2g_os/index.html create mode 100644 files/it/archive/b2g_os/installare_su_un_dispositivo_mobile/index.html create mode 100644 files/it/archive/b2g_os/introduction/index.html create mode 100644 files/it/archive/b2g_os/phone_guide/fairphone/index.html create mode 100644 files/it/archive/b2g_os/phone_guide/flame/index.html create mode 100644 files/it/archive/b2g_os/phone_guide/geeksphone/index.html create mode 100644 files/it/archive/b2g_os/phone_guide/index.html create mode 100644 files/it/archive/b2g_os/phone_guide/specifiche_telefoni_dispositivi/index.html create mode 100644 files/it/archive/b2g_os/phone_guide/zte_open/index.html create mode 100644 files/it/archive/b2g_os/phone_guide/zte_open_c/index.html create mode 100644 files/it/archive/b2g_os/platform/apps_architecture/index.html create mode 100644 files/it/archive/b2g_os/platform/architecture/index.html create mode 100644 files/it/archive/b2g_os/platform/feature_support_chart/index.html create mode 100644 files/it/archive/b2g_os/platform/gaia/gaia_apps/index.html create mode 100644 files/it/archive/b2g_os/platform/gaia/hacking/index.html create mode 100644 files/it/archive/b2g_os/platform/gaia/index.html create mode 100644 files/it/archive/b2g_os/platform/gonk/index.html create mode 100644 files/it/archive/b2g_os/platform/index.html create mode 100644 files/it/archive/b2g_os/platform/settings_list/index.html create mode 100644 files/it/archive/b2g_os/preparazione_della_tua_prima_build_di_b2g/index.html create mode 100644 files/it/archive/b2g_os/prerequisiti_firefox_os_build/index.html create mode 100644 files/it/archive/b2g_os/quickstart/app_tools/index.html create mode 100644 files/it/archive/b2g_os/quickstart/index.html create mode 100644 files/it/archive/b2g_os/quickstart/intro_app_web_aperte/index.html create mode 100644 files/it/archive/b2g_os/quickstart/intro_to_firefox_os/index.html create mode 100644 files/it/archive/b2g_os/quickstart/la_tua_prima_app/index.html create mode 100644 files/it/archive/b2g_os/quickstart/per_sviluppatori_web/index.html create mode 100644 files/it/archive/b2g_os/security/index.html create mode 100644 files/it/archive/b2g_os/security/security_model/index.html create mode 100644 files/it/archive/b2g_os/simulator/index.html create mode 100644 files/it/archive/b2g_os/sviluppo_applicazioni/index.html create mode 100644 files/it/archive/b2g_os/tvs_connected_devices/index.html create mode 100644 files/it/archive/b2g_os/usare_l_app_manager/index.html create mode 100644 files/it/archive/b2g_os/ux/building_blocks/action_menu/index.html create mode 100644 files/it/archive/b2g_os/ux/building_blocks/bottoni/index.html create mode 100644 files/it/archive/b2g_os/ux/building_blocks/conferme/index.html create mode 100644 files/it/archive/b2g_os/ux/building_blocks/index.html create mode 100644 files/it/archive/b2g_os/ux/design_asset_library/index.html create mode 100644 files/it/archive/b2g_os/web_applications/index.html create mode 100644 files/it/archive/index.html create mode 100644 files/it/archive/mdn/index.html create mode 100644 files/it/archive/mozilla/index.html create mode 100644 files/it/archive/mozilla/persona/.well-known-browserid/index.html create mode 100644 "files/it/archive/mozilla/persona/compatibilit\303\240_con_i_browser/index.html" create mode 100644 files/it/archive/mozilla/persona/index.html create mode 100644 files/it/archive/mozilla/persona/internationalization/index.html create mode 100644 files/it/archive/mozilla/persona/libraries_and_plugins/index.html create mode 100644 files/it/archive/mozilla/persona/marchio/index.html create mode 100644 files/it/archive/mozilla/persona/quick_setup/index.html create mode 100644 files/it/archive/mozilla/persona/remote_verification_api/index.html create mode 100644 files/it/archive/mozilla/persona/security_considerations/index.html create mode 100644 files/it/archive/mozilla/persona/the_implementor_s_guide/index.html create mode 100644 files/it/archive/mozilla/persona/the_implementor_s_guide/testing/index.html create mode 100644 files/it/archive/mozilla/persona/the_navigator.id_api/index.html create mode 100644 files/it/archive/mozilla/persona/why_persona/index.html create mode 100644 files/it/archive/mozilla/xbl/index.html create mode 100644 files/it/archive/mozilla/xul/index.html create mode 100644 files/it/archive/mozilla/xul/tutorial/index.html create mode 100644 files/it/archive/mozilla/xulrunner/a_cosa_serve_xulrunner/index.html create mode 100644 files/it/archive/mozilla/xulrunner/applicazioni_basate_su_xulrunner/index.html create mode 100644 files/it/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html create mode 100644 files/it/archive/mozilla/xulrunner/index.html create mode 100644 files/it/archive/mozilla/xulrunner/note_di_rilascio_di_xulrunner_1.8.0.4/index.html create mode 100644 files/it/archive/mozilla/xulrunner/xulrunner_faq/index.html create mode 100644 files/it/archive/rss/index.html create mode 100644 files/it/archive/rss/iniziare/index.html create mode 100644 files/it/archive/standard_web/index.html create mode 100644 files/it/archive/standard_web/issues_arising_from_arbitrary-element_hover/index.html create mode 100644 files/it/archive/standard_web/rdf_in_fifty_words_or_less/index.html create mode 100644 files/it/archive/web/index.html create mode 100644 files/it/archive/web/server-side_javascript/index.html create mode 100644 files/it/cambiamenti_di_xmlhttprequest_in_gecko1.8/index.html create mode 100644 files/it/circa_il_document_object_model/index.html create mode 100644 "files/it/conoscere_i_css/cascata_ed_ereditariet\303\240/index.html" create mode 100644 files/it/conoscere_i_css/che_cosa_sono_i_css/index.html create mode 100644 files/it/conoscere_i_css/come_funzionano_i_css/index.html create mode 100644 files/it/conoscere_i_css/css_leggibili/index.html create mode 100644 files/it/conoscere_i_css/i_selettori/index.html create mode 100644 files/it/conoscere_i_css/index.html create mode 100644 "files/it/conoscere_i_css/perch\303\251_usare_i_css/index.html" create mode 100644 files/it/costruire_e_decostruire_un_documento_xml/index.html create mode 100644 files/it/creare_estensioni_personalizzate_per_firefox_con_il_sistema_di_sviluppo_di_mozilla/index.html create mode 100644 files/it/creare_patch/index.html create mode 100644 files/it/creare_plugin_mozsearch/index.html create mode 100644 files/it/creare_un_installer_per_windows_di_seamonkey/index.html create mode 100644 files/it/creare_un_microsommario/index.html create mode 100644 files/it/dare_una_mano_al_puntatore/index.html create mode 100644 files/it/dhtml/index.html create mode 100644 files/it/dom/index.html create mode 100644 files/it/dom_inspector/index.html create mode 100644 files/it/domande_frequenti_sulle_estensioni/index.html create mode 100644 files/it/e4x/index.html create mode 100644 "files/it/estensioni/comunit\303\240/index.html" create mode 100644 files/it/estensioni/index.html create mode 100644 files/it/firefox_1.5_per_sviluppatori/index.html create mode 100644 files/it/firefox_18_for_developers/index.html create mode 100644 files/it/firefox_2.0_per_sviluppatori/index.html create mode 100644 files/it/games/index.html create mode 100644 files/it/games/publishing_games/index.html create mode 100644 files/it/gecko/index.html create mode 100644 files/it/gli_user_agent_di_gecko/index.html create mode 100644 files/it/glossary/ajax/index.html create mode 100644 files/it/glossary/array/index.html create mode 100644 files/it/glossary/block/css/index.html create mode 100644 files/it/glossary/block/index.html create mode 100644 files/it/glossary/control_flow/index.html create mode 100644 files/it/glossary/css/index.html create mode 100644 files/it/glossary/doctype/index.html create mode 100644 files/it/glossary/first-class_function/index.html create mode 100644 files/it/glossary/head/index.html create mode 100644 files/it/glossary/header_di_risposta/index.html create mode 100644 files/it/glossary/hoisting/index.html create mode 100644 files/it/glossary/html/index.html create mode 100644 files/it/glossary/html5/index.html create mode 100644 files/it/glossary/http/index.html create mode 100644 files/it/glossary/index.html create mode 100644 files/it/glossary/javascript/index.html create mode 100644 files/it/glossary/node/dom/index.html create mode 100644 files/it/glossary/node/index.html create mode 100644 files/it/glossary/nullish/index.html create mode 100644 files/it/glossary/primitive/index.html create mode 100644 files/it/glossary/protocollo/index.html create mode 100644 files/it/glossary/reflow/index.html create mode 100644 files/it/glossary/rest/index.html create mode 100644 files/it/glossary/serialization/index.html create mode 100644 files/it/glossary/undefined/index.html create mode 100644 files/it/glossary/world_wide_web/index.html create mode 100644 files/it/il_modulo_xml_extras/index.html create mode 100644 files/it/impacchettare_l'estensione/index.html create mode 100644 files/it/incorporare_mozilla/index.html create mode 100644 files/it/indentazione_corretta_delle_liste/index.html create mode 100644 files/it/installare_plugin_di_ricerca_dalle_pagine_web/index.html create mode 100644 files/it/introduzione_a_svg_dentro_xhtml/index.html create mode 100644 files/it/le_colonne_nei_css3/index.html create mode 100644 files/it/le_preferenze_utente_e_xforms/index.html create mode 100644 "files/it/learn/accessibilit\303\240/accessibilit\303\240_dispositivi_mobili/index.html" create mode 100644 "files/it/learn/accessibilit\303\240/accessibilit\303\240_test_risoluzione_problemi/index.html" create mode 100644 "files/it/learn/accessibilit\303\240/cosa_\303\250_accessibilit\303\240/index.html" create mode 100644 "files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/index.html" create mode 100644 "files/it/learn/accessibilit\303\240/html_accessibilit\303\240/index.html" create mode 100644 "files/it/learn/accessibilit\303\240/index.html" create mode 100644 "files/it/learn/accessibilit\303\240/multimedia/index.html" create mode 100644 "files/it/learn/accessibilit\303\240/wai-aria_basics/index.html" create mode 100644 files/it/learn/come_contribuire/index.html create mode 100644 files/it/learn/common_questions/index.html create mode 100644 files/it/learn/common_questions/thinking_before_coding/index.html create mode 100644 files/it/learn/css/building_blocks/index.html create mode 100644 files/it/learn/css/building_blocks/selettori/index.html create mode 100644 files/it/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/it/learn/css/css_layout/flexbox/index.html create mode 100644 files/it/learn/css/css_layout/index.html create mode 100644 files/it/learn/css/css_layout/introduction/index.html create mode 100644 files/it/learn/css/css_layout/normal_flow/index.html create mode 100644 files/it/learn/css/index.html create mode 100644 files/it/learn/css/styling_text/definire_stili_link/index.html create mode 100644 files/it/learn/css/styling_text/index.html create mode 100644 "files/it/learn/getting_started_with_the_web/che_aspetto_avr\303\240_il_tuo_sito_web/index.html" create mode 100644 files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html create mode 100644 files/it/learn/getting_started_with_the_web/css_basics/index.html create mode 100644 files/it/learn/getting_started_with_the_web/gestire_i_file/index.html create mode 100644 files/it/learn/getting_started_with_the_web/html_basics/index.html create mode 100644 files/it/learn/getting_started_with_the_web/index.html create mode 100644 files/it/learn/getting_started_with_the_web/installing_basic_software/index.html create mode 100644 files/it/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html create mode 100644 files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html create mode 100644 files/it/learn/html/forms/form_validation/index.html create mode 100644 files/it/learn/html/forms/index.html create mode 100644 files/it/learn/html/howto/author_fast-loading_html_pages/index.html create mode 100644 files/it/learn/html/howto/index.html create mode 100644 files/it/learn/html/howto/uso_attributi_data/index.html create mode 100644 files/it/learn/html/index.html create mode 100644 files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html create mode 100644 files/it/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html create mode 100644 files/it/learn/html/introduction_to_html/index.html create mode 100644 files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html create mode 100644 files/it/learn/html/multimedia_and_embedding/images_in_html/index.html create mode 100644 files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html create mode 100644 files/it/learn/html/multimedia_and_embedding/index.html create mode 100644 files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html create mode 100644 files/it/learn/html/tables/index.html create mode 100644 files/it/learn/index.html create mode 100644 files/it/learn/javascript/building_blocks/index.html create mode 100644 files/it/learn/javascript/comefare/index.html create mode 100644 "files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" create mode 100644 files/it/learn/javascript/first_steps/index.html create mode 100644 files/it/learn/javascript/first_steps/variabili/index.html create mode 100644 files/it/learn/javascript/index.html create mode 100644 files/it/learn/javascript/oggetti/basics/index.html create mode 100644 files/it/learn/javascript/oggetti/index.html create mode 100644 files/it/learn/javascript/oggetti/json/index.html create mode 100644 "files/it/learn/riservatezza,_integrit\303\240_e_disponibilit\303\240/index.html" create mode 100644 files/it/learn/server-side/django/admin_site/index.html create mode 100644 files/it/learn/server-side/django/authentication/index.html create mode 100644 files/it/learn/server-side/django/development_environment/index.html create mode 100644 files/it/learn/server-side/django/forms/index.html create mode 100644 files/it/learn/server-side/django/generic_views/index.html create mode 100644 files/it/learn/server-side/django/home_page/index.html create mode 100644 files/it/learn/server-side/django/index.html create mode 100644 files/it/learn/server-side/django/introduzione/index.html create mode 100644 files/it/learn/server-side/django/models/index.html create mode 100644 files/it/learn/server-side/django/sessions/index.html create mode 100644 files/it/learn/server-side/django/skeleton_website/index.html create mode 100644 files/it/learn/server-side/django/tutorial_local_library_website/index.html create mode 100644 files/it/learn/server-side/express_nodejs/index.html create mode 100644 files/it/learn/server-side/index.html create mode 100644 files/it/link_prefetching_faq/index.html create mode 100644 files/it/localization/index.html create mode 100644 files/it/mdn/about/index.html create mode 100644 files/it/mdn/community/index.html create mode 100644 files/it/mdn/contribute/creating_and_editing_pages/index.html create mode 100644 files/it/mdn/contribute/feedback/index.html create mode 100644 files/it/mdn/contribute/getting_started/index.html create mode 100644 files/it/mdn/contribute/howto/convert_code_samples_to_be_live/index.html create mode 100644 files/it/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/it/mdn/contribute/howto/delete_my_profile/index.html create mode 100644 files/it/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/it/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/it/mdn/contribute/howto/impostare_il_riassunto_di_una_pagina/index.html create mode 100644 files/it/mdn/contribute/howto/index.html create mode 100644 files/it/mdn/contribute/howto/tag/index.html create mode 100644 files/it/mdn/contribute/index.html create mode 100644 files/it/mdn/contribute/localize/guidaitaliano/index.html create mode 100644 files/it/mdn/contribute/localize/index.html create mode 100644 files/it/mdn/contribute/localize/progetti_localizzazione/index.html create mode 100644 files/it/mdn/contribute/localize/translating_pages/index.html create mode 100644 files/it/mdn/contribute/persona_sign-in/index.html create mode 100644 files/it/mdn/editor/index.html create mode 100644 files/it/mdn/guidelines/index.html create mode 100644 files/it/mdn/guidelines/macros/index.html create mode 100644 files/it/mdn/guidelines/migliore_pratica/index.html create mode 100644 files/it/mdn/index.html create mode 100644 files/it/mdn/structures/index.html create mode 100644 "files/it/mdn/structures/tabelle_compatibilit\303\240/index.html" create mode 100644 files/it/mdn_at_ten/index.html create mode 100644 files/it/midas/index.html create mode 100644 files/it/midas/security_preferences/index.html create mode 100644 files/it/migrare_applicazioni_da_internet_explorer_a_mozilla/index.html create mode 100644 files/it/mozilla/add-ons/index.html create mode 100644 files/it/mozilla/add-ons/kaspersky/index.html create mode 100644 files/it/mozilla/add-ons/overlay_extensions/firefox_addons_developer_guide/index.html create mode 100644 files/it/mozilla/add-ons/overlay_extensions/index.html create mode 100644 files/it/mozilla/add-ons/overlay_extensions/xul_school/getting_started_with_firefox_extensions/index.html create mode 100644 files/it/mozilla/add-ons/overlay_extensions/xul_school/index.html create mode 100644 files/it/mozilla/add-ons/performance_best_practices_in_extensions/index.html create mode 100644 files/it/mozilla/add-ons/sdk/builder/index.html create mode 100644 files/it/mozilla/add-ons/sdk/guide/index.html create mode 100644 files/it/mozilla/add-ons/sdk/index.html create mode 100644 files/it/mozilla/add-ons/sdk/tutorials/index.html create mode 100644 files/it/mozilla/add-ons/sdk/tutorials/installazione/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/api/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/api/runtime/connectnative/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/api/runtime/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/api/search/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/script_contenuto/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/user_interface/index.html create mode 100644 files/it/mozilla/bugzilla/index.html create mode 100644 files/it/mozilla/bugzilla/testopia/index.html create mode 100644 files/it/mozilla/connettere/index.html create mode 100644 files/it/mozilla/developer_guide/index.html create mode 100644 files/it/mozilla/firefox/developer_edition/index.html create mode 100644 files/it/mozilla/firefox/developer_edition/ripristinare/index.html create mode 100644 "files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" create mode 100644 files/it/mozilla/firefox/index.html create mode 100644 files/it/mozilla/firefox/multiprocess_firefox/index.html create mode 100644 files/it/mozilla/firefox/releases/40/index.html create mode 100644 files/it/mozilla/firefox/releases/42/index.html create mode 100644 files/it/mozilla/firefox/releases/59/index.html create mode 100644 files/it/mozilla/firefox/releases/64/index.html create mode 100644 files/it/mozilla/firefox/releases/66/index.html create mode 100644 files/it/mozilla/firefox/releases/index.html create mode 100644 files/it/mozilla/firefox_for_android/index.html create mode 100644 files/it/mozilla/index.html create mode 100644 files/it/mozilla/localizzazione/index.html create mode 100644 files/it/mozilla/marketplace/criteri_revisione_marketplace/index.html create mode 100644 files/it/mozilla/marketplace/index.html create mode 100644 files/it/mozilla/marketplace/monetization/introduction_monetization/index.html create mode 100644 files/it/mozilla/marketplace/monetization/profiting_from_your_app/index.html create mode 100644 files/it/mozilla/marketplace/options/index.html create mode 100644 files/it/mozilla/marketplace/options/packaged_apps/index.html create mode 100644 files/it/mozilla/marketplace/prepare/choosing_your_business_model/index.html create mode 100644 files/it/mozilla/marketplace/prepare/introduction/index.html create mode 100644 files/it/mozilla/marketplace/publishing/index.html create mode 100644 files/it/mozilla/marketplace/publishing/opzioni_pubblicazione_app/index.html create mode 100644 files/it/mozilla/marketplace/publishing/submit/index.html create mode 100644 files/it/mozilla/mobile/index.html create mode 100644 files/it/mozilla/mobile/viewport_meta_tag/index.html create mode 100644 files/it/mozilla/performance/about_colon_memory/index.html create mode 100644 files/it/mozilla/performance/index.html create mode 100644 files/it/mozilla/preferences/index.html create mode 100644 files/it/mozilla/preferences/una_breve_guida_alle_impostazioni_di_mozilla/index.html create mode 100644 files/it/mozilla/projects/index.html create mode 100644 files/it/mozilla/projects/nss/esempi_codice_nss/index.html create mode 100644 files/it/mozilla/projects/nss/index.html create mode 100644 files/it/mozilla/qa/bug_writing_lineeguida/index.html create mode 100644 files/it/mozilla/qa/index.html create mode 100644 files/it/mozilla/tech/index.html create mode 100644 files/it/nspr/index.html create mode 100644 files/it/nuove_tabelle_di_compatibilita_in_beta/index.html create mode 100644 files/it/plug-in/index.html create mode 100644 files/it/python/index.html create mode 100644 files/it/rdf/index.html create mode 100644 files/it/rhino/index.html create mode 100644 files/it/rhino/scarica_rhino/index.html create mode 100644 files/it/spidermonkey/index.html create mode 100644 files/it/stringhe_user_agent_di_gecko/index.html create mode 100644 files/it/strumenti_di_sviluppo_aderenti_agli_standard/index.html create mode 100644 files/it/svg/index.html create mode 100644 files/it/sviluppare_mozilla/index.html create mode 100644 files/it/sviluppo_web/index.html create mode 100644 files/it/temi/background/index.html create mode 100644 files/it/temi/index.html create mode 100644 files/it/toolkit_api/index.html create mode 100644 files/it/tools/add-ons/index.html create mode 100644 files/it/tools/debugger/how_to/disable_breakpoints/index.html create mode 100644 files/it/tools/debugger/how_to/index.html create mode 100644 files/it/tools/debugger/how_to/open_the_debugger/index.html create mode 100644 files/it/tools/debugger/how_to/set_a_breakpoint/index.html create mode 100644 files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html create mode 100644 files/it/tools/debugger/how_to/step_through_code/index.html create mode 100644 files/it/tools/debugger/index.html create mode 100644 files/it/tools/index.html create mode 100644 files/it/tools/page_inspector/index.html create mode 100644 files/it/tools/prestazioni/index.html create mode 100644 files/it/tools/remote_debugging/index.html create mode 100644 files/it/tools/visualizzazione_flessibile/index.html create mode 100644 files/it/tools/web_console/helpers/index.html create mode 100644 files/it/tools/web_console/index.html create mode 100644 files/it/tools/webide/index.html create mode 100644 files/it/tools/webide/monitor/index.html create mode 100644 files/it/tools/webide/troubleshooting/index.html create mode 100644 files/it/tutorial_sulle_canvas/index.html create mode 100644 files/it/venkman/index.html create mode 100644 files/it/visualizzare_e_cercare_il_sorgente_di_mozilla_online/index.html create mode 100644 files/it/web/accessibility/index.html create mode 100644 files/it/web/accessibility/sviluppo_web/index.html create mode 100644 files/it/web/api/canvasrenderingcontext2d/canvas/index.html create mode 100644 files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html create mode 100644 files/it/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html create mode 100644 files/it/web/api/closeevent/index.html create mode 100644 files/it/web/api/console/index.html create mode 100644 files/it/web/api/console/log/index.html create mode 100644 files/it/web/api/console/table/index.html create mode 100644 files/it/web/api/crypto/index.html create mode 100644 files/it/web/api/crypto/subtle/index.html create mode 100644 files/it/web/api/datatransfer/getdata/index.html create mode 100644 files/it/web/api/datatransfer/index.html create mode 100644 files/it/web/api/document/anchors/index.html create mode 100644 files/it/web/api/document/applets/index.html create mode 100644 files/it/web/api/document/body/index.html create mode 100644 files/it/web/api/document/characterset/index.html create mode 100644 files/it/web/api/document/close/index.html create mode 100644 files/it/web/api/document/createelement/index.html create mode 100644 files/it/web/api/document/createrange/index.html create mode 100644 files/it/web/api/document/defaultview/index.html create mode 100644 files/it/web/api/document/doctype/index.html create mode 100644 files/it/web/api/document/documentelement/index.html create mode 100644 files/it/web/api/document/firstchild/index.html create mode 100644 files/it/web/api/document/forms/index.html create mode 100644 files/it/web/api/document/getelementbyid/index.html create mode 100644 files/it/web/api/document/getelementsbyclassname/index.html create mode 100644 files/it/web/api/document/getelementsbyname/index.html create mode 100644 files/it/web/api/document/getelementsbytagname/index.html create mode 100644 files/it/web/api/document/head/index.html create mode 100644 files/it/web/api/document/height/index.html create mode 100644 files/it/web/api/document/images/index.html create mode 100644 files/it/web/api/document/importnode/index.html create mode 100644 files/it/web/api/document/index.html create mode 100644 files/it/web/api/document/lastmodified/index.html create mode 100644 files/it/web/api/document/links/index.html create mode 100644 files/it/web/api/document/namespaceuri/index.html create mode 100644 files/it/web/api/document/open/index.html create mode 100644 files/it/web/api/document/queryselector/index.html create mode 100644 files/it/web/api/document/queryselectorall/index.html create mode 100644 files/it/web/api/document/referrer/index.html create mode 100644 files/it/web/api/document/stylesheets/index.html create mode 100644 files/it/web/api/document/title/index.html create mode 100644 files/it/web/api/document/url/index.html create mode 100644 files/it/web/api/document/width/index.html create mode 100644 files/it/web/api/document/write/index.html create mode 100644 files/it/web/api/document/writeln/index.html create mode 100644 files/it/web/api/document_object_model/index.html create mode 100644 files/it/web/api/document_object_model/introduzione/index.html create mode 100644 files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html create mode 100644 files/it/web/api/domapplicationsregistry/getinstalled/index.html create mode 100644 files/it/web/api/domapplicationsregistry/index.html create mode 100644 files/it/web/api/domstring/index.html create mode 100644 files/it/web/api/domtokenlist/index.html create mode 100644 files/it/web/api/domtokenlist/item/index.html create mode 100644 files/it/web/api/element/addeventlistener/index.html create mode 100644 files/it/web/api/element/attributes/index.html create mode 100644 files/it/web/api/element/childnodes/index.html create mode 100644 files/it/web/api/element/classlist/index.html create mode 100644 files/it/web/api/element/classname/index.html create mode 100644 files/it/web/api/element/clientheight/index.html create mode 100644 files/it/web/api/element/closest/index.html create mode 100644 files/it/web/api/element/firstchild/index.html create mode 100644 files/it/web/api/element/getattribute/index.html create mode 100644 files/it/web/api/element/getelementsbytagname/index.html create mode 100644 files/it/web/api/element/hasattribute/index.html create mode 100644 files/it/web/api/element/hasattributes/index.html create mode 100644 files/it/web/api/element/index.html create mode 100644 files/it/web/api/element/innerhtml/index.html create mode 100644 files/it/web/api/element/insertadjacenthtml/index.html create mode 100644 files/it/web/api/element/nodename/index.html create mode 100644 files/it/web/api/element/nodetype/index.html create mode 100644 files/it/web/api/element/nodevalue/index.html create mode 100644 files/it/web/api/element/parentnode/index.html create mode 100644 files/it/web/api/element/prefix/index.html create mode 100644 files/it/web/api/element/queryselector/index.html create mode 100644 files/it/web/api/element/queryselectorall/index.html create mode 100644 files/it/web/api/element/removeattribute/index.html create mode 100644 files/it/web/api/element/requestfullscreen/index.html create mode 100644 files/it/web/api/element/scrollheight/index.html create mode 100644 files/it/web/api/element/scrolltop/index.html create mode 100644 files/it/web/api/element/setattribute/index.html create mode 100644 files/it/web/api/element/tagname/index.html create mode 100644 files/it/web/api/element/textcontent/index.html create mode 100644 files/it/web/api/element/toggleattribute/index.html create mode 100644 files/it/web/api/event/altkey/index.html create mode 100644 files/it/web/api/event/bubbles/index.html create mode 100644 files/it/web/api/event/button/index.html create mode 100644 files/it/web/api/event/cancelable/index.html create mode 100644 files/it/web/api/event/charcode/index.html create mode 100644 files/it/web/api/event/ctrlkey/index.html create mode 100644 files/it/web/api/event/currenttarget/index.html create mode 100644 files/it/web/api/event/eventphase/index.html create mode 100644 files/it/web/api/event/index.html create mode 100644 files/it/web/api/event/ischar/index.html create mode 100644 files/it/web/api/event/keycode/index.html create mode 100644 files/it/web/api/event/layerx/index.html create mode 100644 files/it/web/api/event/layery/index.html create mode 100644 files/it/web/api/event/metakey/index.html create mode 100644 files/it/web/api/event/pagex/index.html create mode 100644 files/it/web/api/event/pagey/index.html create mode 100644 files/it/web/api/event/preventdefault/index.html create mode 100644 files/it/web/api/event/shiftkey/index.html create mode 100644 files/it/web/api/event/stoppropagation/index.html create mode 100644 files/it/web/api/event/timestamp/index.html create mode 100644 files/it/web/api/event/type/index.html create mode 100644 files/it/web/api/event/view/index.html create mode 100644 files/it/web/api/event/which/index.html create mode 100644 files/it/web/api/fetch_api/index.html create mode 100644 files/it/web/api/file/index.html create mode 100644 files/it/web/api/file/using_files_from_web_applications/index.html create mode 100644 files/it/web/api/geolocation/index.html create mode 100644 files/it/web/api/geolocation/using_geolocation/index.html create mode 100644 files/it/web/api/geolocation/watchposition/index.html create mode 100644 files/it/web/api/geolocationposition/index.html create mode 100644 files/it/web/api/globaleventhandlers/index.html create mode 100644 files/it/web/api/globaleventhandlers/onresize/index.html create mode 100644 files/it/web/api/htmlcanvaselement/index.html create mode 100644 files/it/web/api/htmlcanvaselement/toblob/index.html create mode 100644 files/it/web/api/htmlcollection/index.html create mode 100644 files/it/web/api/htmlcollection/item/index.html create mode 100644 files/it/web/api/htmlelement/index.html create mode 100644 files/it/web/api/htmlelement/offsetheight/index.html create mode 100644 files/it/web/api/htmlformelement/acceptcharset/index.html create mode 100644 files/it/web/api/htmlformelement/action/index.html create mode 100644 files/it/web/api/htmlformelement/elements/index.html create mode 100644 files/it/web/api/htmlformelement/enctype/index.html create mode 100644 files/it/web/api/htmlformelement/index.html create mode 100644 files/it/web/api/htmlformelement/length/index.html create mode 100644 files/it/web/api/htmlformelement/method/index.html create mode 100644 files/it/web/api/htmlformelement/name/index.html create mode 100644 files/it/web/api/htmlformelement/reset/index.html create mode 100644 files/it/web/api/htmlformelement/submit/index.html create mode 100644 files/it/web/api/htmlformelement/target/index.html create mode 100644 files/it/web/api/htmliframeelement/index.html create mode 100644 files/it/web/api/htmliframeelement/mute/index.html create mode 100644 files/it/web/api/htmlunknownelement/index.html create mode 100644 files/it/web/api/index.html create mode 100644 files/it/web/api/indexeddb_api/index.html create mode 100644 files/it/web/api/mutationobserver/index.html create mode 100644 files/it/web/api/navigator/cookieenabled/index.html create mode 100644 files/it/web/api/navigator/credentials/index.html create mode 100644 files/it/web/api/navigator/index.html create mode 100644 files/it/web/api/navigatorconcurrenthardware/index.html create mode 100644 files/it/web/api/node/appendchild/index.html create mode 100644 files/it/web/api/node/index.html create mode 100644 files/it/web/api/node/lastchild/index.html create mode 100644 files/it/web/api/node/nextsibling/index.html create mode 100644 files/it/web/api/node/previoussibling/index.html create mode 100644 files/it/web/api/nodelist/foreach/index.html create mode 100644 files/it/web/api/nodelist/index.html create mode 100644 files/it/web/api/notifiche/dir/index.html create mode 100644 files/it/web/api/notifiche/index.html create mode 100644 files/it/web/api/parentnode/children/index.html create mode 100644 files/it/web/api/parentnode/firstelementchild/index.html create mode 100644 files/it/web/api/parentnode/index.html create mode 100644 files/it/web/api/parentnode/lastelementchild/index.html create mode 100644 files/it/web/api/performance/index.html create mode 100644 files/it/web/api/performance/now/index.html create mode 100644 files/it/web/api/range/clonecontents/index.html create mode 100644 files/it/web/api/range/clonerange/index.html create mode 100644 files/it/web/api/range/collapse/index.html create mode 100644 files/it/web/api/range/collapsed/index.html create mode 100644 files/it/web/api/range/commonancestorcontainer/index.html create mode 100644 files/it/web/api/range/compareboundarypoints/index.html create mode 100644 files/it/web/api/range/comparepoint/index.html create mode 100644 files/it/web/api/range/createcontextualfragment/index.html create mode 100644 files/it/web/api/range/deletecontents/index.html create mode 100644 files/it/web/api/range/detach/index.html create mode 100644 files/it/web/api/range/endcontainer/index.html create mode 100644 files/it/web/api/range/endoffset/index.html create mode 100644 files/it/web/api/range/extractcontents/index.html create mode 100644 files/it/web/api/range/index.html create mode 100644 files/it/web/api/range/insertnode/index.html create mode 100644 files/it/web/api/range/ispointinrange/index.html create mode 100644 files/it/web/api/range/selectnode/index.html create mode 100644 files/it/web/api/range/selectnodecontents/index.html create mode 100644 files/it/web/api/range/setend/index.html create mode 100644 files/it/web/api/range/setendafter/index.html create mode 100644 files/it/web/api/range/setendbefore/index.html create mode 100644 files/it/web/api/range/setstart/index.html create mode 100644 files/it/web/api/range/setstartafter/index.html create mode 100644 files/it/web/api/range/setstartbefore/index.html create mode 100644 files/it/web/api/range/startcontainer/index.html create mode 100644 files/it/web/api/range/startoffset/index.html create mode 100644 files/it/web/api/range/surroundcontents/index.html create mode 100644 files/it/web/api/range/tostring/index.html create mode 100644 files/it/web/api/selection/addrange/index.html create mode 100644 files/it/web/api/selection/anchornode/index.html create mode 100644 files/it/web/api/selection/anchoroffset/index.html create mode 100644 files/it/web/api/selection/collapse/index.html create mode 100644 files/it/web/api/selection/collapsetoend/index.html create mode 100644 files/it/web/api/selection/collapsetostart/index.html create mode 100644 files/it/web/api/selection/containsnode/index.html create mode 100644 files/it/web/api/selection/deletefromdocument/index.html create mode 100644 files/it/web/api/selection/extend/index.html create mode 100644 files/it/web/api/selection/focusnode/index.html create mode 100644 files/it/web/api/selection/focusoffset/index.html create mode 100644 files/it/web/api/selection/getrangeat/index.html create mode 100644 files/it/web/api/selection/index.html create mode 100644 files/it/web/api/selection/iscollapsed/index.html create mode 100644 files/it/web/api/selection/rangecount/index.html create mode 100644 files/it/web/api/selection/removeallranges/index.html create mode 100644 files/it/web/api/selection/removerange/index.html create mode 100644 files/it/web/api/selection/selectallchildren/index.html create mode 100644 files/it/web/api/selection/tostring/index.html create mode 100644 files/it/web/api/storage/clear/index.html create mode 100644 files/it/web/api/storage/getitem/index.html create mode 100644 files/it/web/api/storage/index.html create mode 100644 files/it/web/api/storage/setitem/index.html create mode 100644 files/it/web/api/urlutils/index.html create mode 100644 files/it/web/api/webgl_api/index.html create mode 100644 files/it/web/api/websocket/index.html create mode 100644 files/it/web/api/websocket/websocket/index.html create mode 100644 files/it/web/api/window/alert/index.html create mode 100644 files/it/web/api/window/back/index.html create mode 100644 files/it/web/api/window/blur/index.html create mode 100644 files/it/web/api/window/close/index.html create mode 100644 files/it/web/api/window/closed/index.html create mode 100644 files/it/web/api/window/confirm/index.html create mode 100644 files/it/web/api/window/crypto/index.html create mode 100644 files/it/web/api/window/defaultstatus/index.html create mode 100644 files/it/web/api/window/devicemotion_event/index.html create mode 100644 files/it/web/api/window/document/index.html create mode 100644 files/it/web/api/window/focus/index.html create mode 100644 files/it/web/api/window/forward/index.html create mode 100644 files/it/web/api/window/getselection/index.html create mode 100644 files/it/web/api/window/history/index.html create mode 100644 files/it/web/api/window/home/index.html create mode 100644 files/it/web/api/window/index.html create mode 100644 files/it/web/api/window/localstorage/index.html create mode 100644 files/it/web/api/window/locationbar/index.html create mode 100644 files/it/web/api/window/matchmedia/index.html create mode 100644 files/it/web/api/window/moveby/index.html create mode 100644 files/it/web/api/window/moveto/index.html create mode 100644 files/it/web/api/window/name/index.html create mode 100644 files/it/web/api/window/onuserproximity/index.html create mode 100644 files/it/web/api/window/opener/index.html create mode 100644 files/it/web/api/window/orientationchange_event/index.html create mode 100644 files/it/web/api/window/print/index.html create mode 100644 files/it/web/api/window/prompt/index.html create mode 100644 files/it/web/api/window/requestanimationframe/index.html create mode 100644 files/it/web/api/window/resizeby/index.html create mode 100644 files/it/web/api/window/resizeto/index.html create mode 100644 files/it/web/api/window/sessionstorage/index.html create mode 100644 files/it/web/api/window/sidebar/index.html create mode 100644 files/it/web/api/window/sizetocontent/index.html create mode 100644 files/it/web/api/window/status/index.html create mode 100644 files/it/web/api/window/statusbar/index.html create mode 100644 files/it/web/api/window/stop/index.html create mode 100644 files/it/web/api/window/top/index.html create mode 100644 files/it/web/api/windoworworkerglobalscope/fetch/index.html create mode 100644 files/it/web/api/windoworworkerglobalscope/index.html create mode 100644 files/it/web/api/windowtimers/clearinterval/index.html create mode 100644 files/it/web/api/windowtimers/index.html create mode 100644 files/it/web/api/worker/index.html create mode 100644 files/it/web/api/xmlhttprequest/index.html create mode 100644 files/it/web/api/xmlhttprequest/onreadystatechange/index.html create mode 100644 files/it/web/api/xmlhttprequest/open/index.html create mode 100644 files/it/web/api/xmlhttprequest/readystate/index.html create mode 100644 files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html create mode 100644 files/it/web/api/xmlhttprequest/xmlhttprequest/index.html create mode 100644 files/it/web/css/-moz-border-bottom-colors/index.html create mode 100644 files/it/web/css/-moz-font-language-override/index.html create mode 100644 files/it/web/css/-webkit-overflow-scrolling/index.html create mode 100644 files/it/web/css/@document/index.html create mode 100644 files/it/web/css/_colon_-moz-first-node/index.html create mode 100644 files/it/web/css/_colon_-moz-last-node/index.html create mode 100644 files/it/web/css/_colon_-moz-list-bullet/index.html create mode 100644 files/it/web/css/_colon_active/index.html create mode 100644 files/it/web/css/_colon_focus/index.html create mode 100644 files/it/web/css/_colon_hover/index.html create mode 100644 files/it/web/css/_doublecolon_selection/index.html create mode 100644 files/it/web/css/attribute_selectors/index.html create mode 100644 files/it/web/css/background-attachment/index.html create mode 100644 files/it/web/css/background-color/index.html create mode 100644 files/it/web/css/background-image/index.html create mode 100644 files/it/web/css/background-position/index.html create mode 100644 files/it/web/css/background-repeat/index.html create mode 100644 files/it/web/css/background/index.html create mode 100644 files/it/web/css/border-bottom/index.html create mode 100644 files/it/web/css/border-style/index.html create mode 100644 files/it/web/css/border/index.html create mode 100644 files/it/web/css/cascade/index.html create mode 100644 files/it/web/css/color/index.html create mode 100644 files/it/web/css/css_box_model/index.html create mode 100644 files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/it/web/css/css_flexible_box_layout/index.html create mode 100644 files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html create mode 100644 files/it/web/css/css_positioning/index.html create mode 100644 files/it/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/it/web/css/cursor/index.html create mode 100644 "files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" create mode 100644 files/it/web/css/flex-shrink/index.html create mode 100644 files/it/web/css/flex/index.html create mode 100644 files/it/web/css/font-size-adjust/index.html create mode 100644 files/it/web/css/guida_di_riferimento_ai_css/index.html create mode 100644 files/it/web/css/index.html create mode 100644 files/it/web/css/media_queries/index.html create mode 100644 files/it/web/css/min-width/index.html create mode 100644 files/it/web/css/mozilla_extensions/index.html create mode 100644 files/it/web/css/object-fit/index.html create mode 100644 files/it/web/css/pseudo-classes/index.html create mode 100644 files/it/web/css/ricette_layout/index.html create mode 100644 files/it/web/css/selettore_figli_diretti/index.html create mode 100644 files/it/web/css/text-align/index.html create mode 100644 files/it/web/css/text-shadow/index.html create mode 100644 files/it/web/css/transition-timing-function/index.html create mode 100644 files/it/web/css/type_selectors/index.html create mode 100644 files/it/web/css/universal_selectors/index.html create mode 100644 files/it/web/css/word-break/index.html create mode 100644 files/it/web/css/z-index/index.html create mode 100644 files/it/web/esempi_di_tecnologie_web_open/index.html create mode 100644 files/it/web/events/domcontentloaded/index.html create mode 100644 files/it/web/events/index.html create mode 100644 files/it/web/events/load/index.html create mode 100644 files/it/web/guide/ajax/index.html create mode 100644 files/it/web/guide/ajax/iniziare/index.html create mode 100644 files/it/web/guide/api/index.html create mode 100644 files/it/web/guide/css/index.html create mode 100644 files/it/web/guide/graphics/index.html create mode 100644 files/it/web/guide/html/categorie_di_contenuto/index.html create mode 100644 files/it/web/guide/html/editable_content/index.html create mode 100644 files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html create mode 100644 files/it/web/guide/index.html create mode 100644 files/it/web/guide/woff/index.html create mode 100644 files/it/web/html/attributi/index.html create mode 100644 files/it/web/html/canvas/drawing_graphics_with_canvas/index.html create mode 100644 files/it/web/html/canvas/index.html create mode 100644 files/it/web/html/element/a/index.html create mode 100644 files/it/web/html/element/abbr/index.html create mode 100644 files/it/web/html/element/acronym/index.html create mode 100644 files/it/web/html/element/address/index.html create mode 100644 files/it/web/html/element/applet/index.html create mode 100644 files/it/web/html/element/area/index.html create mode 100644 files/it/web/html/element/article/index.html create mode 100644 files/it/web/html/element/aside/index.html create mode 100644 files/it/web/html/element/audio/index.html create mode 100644 files/it/web/html/element/b/index.html create mode 100644 files/it/web/html/element/base/index.html create mode 100644 files/it/web/html/element/basefont/index.html create mode 100644 files/it/web/html/element/bdi/index.html create mode 100644 files/it/web/html/element/bdo/index.html create mode 100644 files/it/web/html/element/bgsound/index.html create mode 100644 files/it/web/html/element/big/index.html create mode 100644 files/it/web/html/element/blink/index.html create mode 100644 files/it/web/html/element/blockquote/index.html create mode 100644 files/it/web/html/element/body/index.html create mode 100644 files/it/web/html/element/br/index.html create mode 100644 files/it/web/html/element/canvas/index.html create mode 100644 files/it/web/html/element/caption/index.html create mode 100644 files/it/web/html/element/center/index.html create mode 100644 files/it/web/html/element/div/index.html create mode 100644 files/it/web/html/element/figura/index.html create mode 100644 files/it/web/html/element/footer/index.html create mode 100644 files/it/web/html/element/head/index.html create mode 100644 files/it/web/html/element/header/index.html create mode 100644 files/it/web/html/element/hgroup/index.html create mode 100644 files/it/web/html/element/html/index.html create mode 100644 files/it/web/html/element/i/index.html create mode 100644 files/it/web/html/element/iframe/index.html create mode 100644 files/it/web/html/element/img/index.html create mode 100644 files/it/web/html/element/index.html create mode 100644 files/it/web/html/element/input/file/index.html create mode 100644 files/it/web/html/element/input/index.html create mode 100644 files/it/web/html/element/kbd/index.html create mode 100644 files/it/web/html/element/main/index.html create mode 100644 files/it/web/html/element/nav/index.html create mode 100644 files/it/web/html/element/output/index.html create mode 100644 files/it/web/html/element/p/index.html create mode 100644 files/it/web/html/element/section/index.html create mode 100644 files/it/web/html/element/span/index.html create mode 100644 files/it/web/html/element/strike/index.html create mode 100644 files/it/web/html/element/table/index.html create mode 100644 files/it/web/html/element/time/index.html create mode 100644 files/it/web/html/element/title/index.html create mode 100644 files/it/web/html/forms_in_html/index.html create mode 100644 files/it/web/html/global_attributes/id/index.html create mode 100644 files/it/web/html/global_attributes/index.html create mode 100644 files/it/web/html/html5/index.html create mode 100644 files/it/web/html/html5/introduction_to_html5/index.html create mode 100644 files/it/web/html/index.html create mode 100644 files/it/web/html/riferimento/index.html create mode 100644 files/it/web/html/sections_and_outlines_of_an_html5_document/index.html create mode 100644 files/it/web/html/utilizzare_application_cache/index.html create mode 100644 files/it/web/http/authentication/index.html create mode 100644 files/it/web/http/basi_http/index.html create mode 100644 files/it/web/http/caching/index.html create mode 100644 files/it/web/http/compressione/index.html create mode 100644 files/it/web/http/conditional_requests/index.html create mode 100644 files/it/web/http/cookies/index.html create mode 100644 files/it/web/http/cors/errors/corsdidnotsucceed/index.html create mode 100644 files/it/web/http/cors/errors/corsmissingalloworigin/index.html create mode 100644 files/it/web/http/cors/errors/index.html create mode 100644 files/it/web/http/cors/index.html create mode 100644 files/it/web/http/feature_policy/index.html create mode 100644 files/it/web/http/headers/age/index.html create mode 100644 files/it/web/http/headers/authorization/index.html create mode 100644 files/it/web/http/headers/cookie/index.html create mode 100644 files/it/web/http/headers/host/index.html create mode 100644 files/it/web/http/headers/index.html create mode 100644 files/it/web/http/headers/server/index.html create mode 100644 files/it/web/http/headers/strict-transport-security/index.html create mode 100644 files/it/web/http/headers/x-content-type-options/index.html create mode 100644 files/it/web/http/headers/x-xss-protection/index.html create mode 100644 files/it/web/http/index.html create mode 100644 files/it/web/http/negoziazione-del-contenuto/index.html create mode 100644 files/it/web/http/panoramica/index.html create mode 100644 files/it/web/http/protocol_upgrade_mechanism/index.html create mode 100644 files/it/web/http/redirections/index.html create mode 100644 files/it/web/http/resources_and_specifications/index.html create mode 100644 files/it/web/http/richieste_range/index.html create mode 100644 files/it/web/http/sessione/index.html create mode 100644 files/it/web/http/status/100/index.html create mode 100644 files/it/web/http/status/101/index.html create mode 100644 files/it/web/http/status/200/index.html create mode 100644 files/it/web/http/status/302/index.html create mode 100644 files/it/web/http/status/404/index.html create mode 100644 files/it/web/http/status/500/index.html create mode 100644 files/it/web/http/status/index.html create mode 100644 files/it/web/index.html create mode 100644 files/it/web/javascript/chiusure/index.html create mode 100644 "files/it/web/javascript/cos\303\250_javascript/index.html" create mode 100644 files/it/web/javascript/data_structures/index.html create mode 100644 files/it/web/javascript/ecmascript_6_support_in_mozilla/index.html create mode 100644 files/it/web/javascript/eventloop/index.html create mode 100644 files/it/web/javascript/gestione_della_memoria/index.html create mode 100644 files/it/web/javascript/getting_started/index.html create mode 100644 files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html create mode 100644 files/it/web/javascript/guida/dettagli_object_model/index.html create mode 100644 files/it/web/javascript/guida/espressioni_regolari/index.html create mode 100644 files/it/web/javascript/guida/functions/index.html create mode 100644 files/it/web/javascript/guida/grammar_and_types/index.html create mode 100644 files/it/web/javascript/guida/index.html create mode 100644 files/it/web/javascript/guida/introduzione/index.html create mode 100644 files/it/web/javascript/guida/iteratori_e_generatori/index.html create mode 100644 files/it/web/javascript/guida/loops_and_iteration/index.html create mode 100644 files/it/web/javascript/il_dom_e_javascript/index.html create mode 100644 files/it/web/javascript/index.html create mode 100644 files/it/web/javascript/inheritance_and_the_prototype_chain/index.html create mode 100644 files/it/web/javascript/introduzione_al_carattere_object-oriented_di_javascript/index.html create mode 100644 files/it/web/javascript/new_in_javascript/1.8.5/index.html create mode 100644 files/it/web/javascript/new_in_javascript/index.html create mode 100644 "files/it/web/javascript/new_in_javascript/novit\303\240_in_javascript_1.6/index.html" create mode 100644 "files/it/web/javascript/new_in_javascript/novit\303\240_in_javascript_1.7/index.html" create mode 100644 files/it/web/javascript/reference/classes/costruttore/index.html create mode 100644 files/it/web/javascript/reference/classes/extends/index.html create mode 100644 files/it/web/javascript/reference/classes/index.html create mode 100644 files/it/web/javascript/reference/classes/static/index.html create mode 100644 files/it/web/javascript/reference/errors/index.html create mode 100644 files/it/web/javascript/reference/errors/invalid_array_length/index.html create mode 100644 files/it/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html create mode 100644 files/it/web/javascript/reference/errors/missing_semicolon_before_statement/index.html create mode 100644 files/it/web/javascript/reference/errors/too_much_recursion/index.html create mode 100644 files/it/web/javascript/reference/errors/unexpected_token/index.html create mode 100644 files/it/web/javascript/reference/errors/unexpected_type/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/get/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/set/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/copywithin/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/flat/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/flatmap/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/prototype/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/sort/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/tostring/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/values/index.html create mode 100644 files/it/web/javascript/reference/global_objects/arraybuffer/index.html create mode 100644 files/it/web/javascript/reference/global_objects/atomics/index.html create mode 100644 files/it/web/javascript/reference/global_objects/atomics/store/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getdate/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getday/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getfullyear/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/gethours/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getmilliseconds/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getminutes/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getmonth/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getseconds/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/gettime/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/utc/index.html create mode 100644 files/it/web/javascript/reference/global_objects/decodeuri/index.html create mode 100644 files/it/web/javascript/reference/global_objects/decodeuricomponent/index.html create mode 100644 files/it/web/javascript/reference/global_objects/encodeuri/index.html create mode 100644 files/it/web/javascript/reference/global_objects/encodeuricomponent/index.html create mode 100644 files/it/web/javascript/reference/global_objects/escape/index.html create mode 100644 files/it/web/javascript/reference/global_objects/eval/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/apply/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/arguments/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/arity/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/bind/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/call/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/length/index.html create mode 100644 files/it/web/javascript/reference/global_objects/generator/index.html create mode 100644 files/it/web/javascript/reference/global_objects/generator/next/index.html create mode 100644 files/it/web/javascript/reference/global_objects/index.html create mode 100644 files/it/web/javascript/reference/global_objects/infinity/index.html create mode 100644 files/it/web/javascript/reference/global_objects/isfinite/index.html create mode 100644 files/it/web/javascript/reference/global_objects/isnan/index.html create mode 100644 files/it/web/javascript/reference/global_objects/json/index.html create mode 100644 files/it/web/javascript/reference/global_objects/json/parse/index.html create mode 100644 files/it/web/javascript/reference/global_objects/json/stringify/index.html create mode 100644 files/it/web/javascript/reference/global_objects/map/clear/index.html create mode 100644 files/it/web/javascript/reference/global_objects/map/delete/index.html create mode 100644 files/it/web/javascript/reference/global_objects/map/foreach/index.html create mode 100644 files/it/web/javascript/reference/global_objects/map/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/abs/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/acos/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/atan/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/atan2/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/ceil/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/e/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/floor/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/max/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/min/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/pow/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/random/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/round/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/sqrt/index.html create mode 100644 files/it/web/javascript/reference/global_objects/nan/index.html create mode 100644 files/it/web/javascript/reference/global_objects/null/index.html create mode 100644 files/it/web/javascript/reference/global_objects/number/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/assign/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/create/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/defineproperties/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/freeze/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/getprototypeof/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/hasownproperty/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/is/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/isfrozen/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/issealed/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/keys/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/observe/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/prototype/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/seal/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/tostring/index.html create mode 100644 files/it/web/javascript/reference/global_objects/parsefloat/index.html create mode 100644 files/it/web/javascript/reference/global_objects/parseint/index.html create mode 100644 files/it/web/javascript/reference/global_objects/promise/all/index.html create mode 100644 files/it/web/javascript/reference/global_objects/promise/catch/index.html create mode 100644 files/it/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/handler/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html create mode 100644 files/it/web/javascript/reference/global_objects/set/entries/index.html create mode 100644 files/it/web/javascript/reference/global_objects/set/index.html create mode 100644 files/it/web/javascript/reference/global_objects/set/values/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/charat/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/includes/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/indexof/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/length/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/prototype/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/raw/index.html create mode 100644 files/it/web/javascript/reference/global_objects/symbol/index.html create mode 100644 files/it/web/javascript/reference/global_objects/undefined/index.html create mode 100644 files/it/web/javascript/reference/global_objects/unescape/index.html create mode 100644 files/it/web/javascript/reference/global_objects/uneval/index.html create mode 100644 files/it/web/javascript/reference/index.html create mode 100644 files/it/web/javascript/reference/operators/destructuring_assignment/index.html create mode 100644 files/it/web/javascript/reference/operators/in/index.html create mode 100644 files/it/web/javascript/reference/operators/index.html create mode 100644 files/it/web/javascript/reference/operators/new/index.html create mode 100644 files/it/web/javascript/reference/operators/operator_condizionale/index.html create mode 100644 files/it/web/javascript/reference/operators/operatore_virgola/index.html create mode 100644 files/it/web/javascript/reference/operators/operatori_aritmetici/index.html create mode 100644 files/it/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/it/web/javascript/reference/operators/super/index.html create mode 100644 files/it/web/javascript/reference/operators/this/index.html create mode 100644 files/it/web/javascript/reference/operators/yield/index.html create mode 100644 files/it/web/javascript/reference/statements/break/index.html create mode 100644 files/it/web/javascript/reference/statements/empty/index.html create mode 100644 files/it/web/javascript/reference/statements/export/index.html create mode 100644 files/it/web/javascript/reference/statements/for...of/index.html create mode 100644 files/it/web/javascript/reference/statements/function_star_/index.html create mode 100644 files/it/web/javascript/reference/statements/import/index.html create mode 100644 files/it/web/javascript/reference/statements/index.html create mode 100644 files/it/web/javascript/reference/statements/let/index.html create mode 100644 files/it/web/javascript/reference/statements/switch/index.html create mode 100644 files/it/web/javascript/reference/statements/throw/index.html create mode 100644 files/it/web/javascript/reference/statements/var/index.html create mode 100644 files/it/web/javascript/reference/template_strings/index.html create mode 100644 files/it/web/javascript/una_reintroduzione_al_javascript/index.html create mode 100644 files/it/web/performance/index.html create mode 100644 files/it/web/performance/percorso_critico_di_rendering/index.html create mode 100644 files/it/web/reference/api/index.html create mode 100644 files/it/web/reference/index.html create mode 100644 files/it/web/security/index.html create mode 100644 files/it/web/security/password_insicure/index.html create mode 100644 files/it/web/svg/element/animate/index.html create mode 100644 files/it/web/svg/element/index.html create mode 100644 files/it/web/tutorials/index.html create mode 100644 files/it/web/web_components/index.html create mode 100644 files/it/web/web_components/usare_custom_elements/index.html create mode 100644 files/it/web/xslt/index.html create mode 100644 files/it/web_development/mobile/design_sensibile/index.html create mode 100644 files/it/web_development/mobile/index.html create mode 100644 files/it/websockets/index.html create mode 100644 files/it/websockets/writing_websocket_client_applications/index.html create mode 100644 files/it/window.find/index.html create mode 100644 files/it/xforms/index.html create mode 100644 files/it/xhtml/index.html create mode 100644 files/it/xml_in_mozilla/index.html create mode 100644 files/it/xml_web_services/index.html create mode 100644 files/it/xpcnativewrapper/index.html create mode 100644 files/it/xpcom/binding_per_i_linguaggi/index.html create mode 100644 files/it/xpcom/index.html create mode 100644 files/it/zone/index.html (limited to 'files/it') diff --git a/files/it/_redirects.txt b/files/it/_redirects.txt new file mode 100644 index 0000000000..0fdb919288 --- /dev/null +++ b/files/it/_redirects.txt @@ -0,0 +1,457 @@ +# FROM-URL TO-URL +/it/docs/AJAX /it/docs/Web/Guide/AJAX +/it/docs/AJAX/Iniziare /it/docs/Web/Guide/AJAX/Iniziare +/it/docs/AJAX:Iniziare /it/docs/Web/Guide/AJAX/Iniziare +/it/docs/CSS /it/docs/Web/CSS +/it/docs/CSS/-moz-font-language-override /it/docs/Web/CSS/-moz-font-language-override +/it/docs/CSS/:-moz-first-node /it/docs/Web/CSS/:-moz-first-node +/it/docs/CSS/:-moz-last-node /it/docs/Web/CSS/:-moz-last-node +/it/docs/CSS/:-moz-list-bullet /it/docs/Web/CSS/:-moz-list-bullet +/it/docs/CSS/@-moz-document /it/docs/Web/CSS/%40document +/it/docs/CSS/Getting_Started /it/docs/Conoscere_i_CSS +/it/docs/CSS/Mozilla_Extensions /it/docs/Web/CSS/Mozilla_Extensions +/it/docs/CSS/background /it/docs/Web/CSS/background +/it/docs/CSS/background-attachment /it/docs/Web/CSS/background-attachment +/it/docs/CSS/background-color /it/docs/Web/CSS/background-color +/it/docs/CSS/background-image /it/docs/Web/CSS/background-image +/it/docs/CSS/background-position /it/docs/Web/CSS/background-position +/it/docs/CSS/background-repeat /it/docs/Web/CSS/background-repeat +/it/docs/CSS/border /it/docs/Web/CSS/border +/it/docs/CSS/border-bottom /it/docs/Web/CSS/border-bottom +/it/docs/CSS/color /it/docs/Web/CSS/color +/it/docs/CSS/cursor /it/docs/Web/CSS/cursor +/it/docs/CSS/cursor/Usare_valori_URL_per_la_propriet%C3%A0_cursor /it/docs/Web/CSS/cursor/Usare_valori_URL_per_la_propriet%C3%A0_cursor +/it/docs/CSS/text-align /it/docs/Web/CSS/text-align +/it/docs/CSS/text-shadow /it/docs/Web/CSS/text-shadow +/it/docs/CSS/transition-timing-function /it/docs/Web/CSS/transition-timing-function +/it/docs/CSS/vertical-align /it/docs/Web/CSS/vertical-align +/it/docs/CSS/word-break /it/docs/Web/CSS/word-break +/it/docs/CSS::-moz-first-node /it/docs/Web/CSS/:-moz-first-node +/it/docs/CSS::-moz-last-node /it/docs/Web/CSS/:-moz-last-node +/it/docs/CSS::-moz-list-bullet /it/docs/Web/CSS/:-moz-list-bullet +/it/docs/CSS:@-moz-document /it/docs/Web/CSS/%40document +/it/docs/CSS:Getting_Started /it/docs/Conoscere_i_CSS +/it/docs/CSS:background /it/docs/Web/CSS/background +/it/docs/CSS:background-attachment /it/docs/Web/CSS/background-attachment +/it/docs/CSS:background-color /it/docs/Web/CSS/background-color +/it/docs/CSS:background-image /it/docs/Web/CSS/background-image +/it/docs/CSS:text-align /it/docs/Web/CSS/text-align +/it/docs/CSS_Reference/Mozilla_Extensions /it/docs/Web/CSS/Mozilla_Extensions +/it/docs/CSS_Reference:Mozilla_Extensions /it/docs/Web/CSS/Mozilla_Extensions +/it/docs/Canvas_tutorial:Basic_usage /it/docs/Canvas_tutorial/Basic_usage +/it/docs/Canvas_tutorial:Utilizzo_di_base /it/docs/Canvas_tutorial/Utilizzo_di_base +/it/docs/Compatibilit%C3%A0_di_AJAX /it/docs/Web/Guide/AJAX +/it/docs/Conoscere_i_CSS-redirect-1 /it/docs/Conoscere_i_CSS +/it/docs/Conoscere_i_CSS/Che_cosa_sono_i_CSS-redirect-1 /it/docs/Conoscere_i_CSS/Che_cosa_sono_i_CSS +/it/docs/Conoscere_i_CSS:CSS_leggibili /it/docs/Conoscere_i_CSS/CSS_leggibili +/it/docs/Conoscere_i_CSS:Cascata_ed_ereditariet%C3%A0 /it/docs/Conoscere_i_CSS/Cascata_ed_ereditariet%C3%A0 +/it/docs/Conoscere_i_CSS:Che_cosa_sono_i_CSS /it/docs/Conoscere_i_CSS/Che_cosa_sono_i_CSS +/it/docs/Conoscere_i_CSS:Colori /it/docs/Conoscere_i_CSS/Colori +/it/docs/Conoscere_i_CSS:Come_funzionano_i_CSS /it/docs/Conoscere_i_CSS/Come_funzionano_i_CSS +/it/docs/Conoscere_i_CSS:I_Selettori /it/docs/Conoscere_i_CSS/I_Selettori +/it/docs/Conoscere_i_CSS:Perch%C3%A9_usare_i_CSS /it/docs/Conoscere_i_CSS/Perch%C3%A9_usare_i_CSS +/it/docs/Conoscere_i_CSS:Stili_del_testo /it/docs/Conoscere_i_CSS/Stili_del_testo +/it/docs/Core_JavaScript_1.5_Reference /it/docs/Web/JavaScript/Reference +/it/docs/Crea_Documentazione /it/docs/Mozilla/Developer_guide/Documentazione_per_build +/it/docs/DOM/Selection /it/docs/Web/API/Selection +/it/docs/DOM/Selection/addRange /it/docs/Web/API/Selection/addRange +/it/docs/DOM/Selection/anchorNode /it/docs/Web/API/Selection/anchorNode +/it/docs/DOM/Selection/anchorOffset /it/docs/Web/API/Selection/anchorOffset +/it/docs/DOM/Selection/collapse /it/docs/Web/API/Selection/collapse +/it/docs/DOM/Selection/collapseToEnd /it/docs/Web/API/Selection/collapseToEnd +/it/docs/DOM/Selection/collapseToStart /it/docs/Web/API/Selection/collapseToStart +/it/docs/DOM/Selection/containsNode /it/docs/Web/API/Selection/containsNode +/it/docs/DOM/Selection/deleteFromDocument /it/docs/Web/API/Selection/deleteFromDocument +/it/docs/DOM/Selection/extend /it/docs/Web/API/Selection/extend +/it/docs/DOM/Selection/focusNode /it/docs/Web/API/Selection/focusNode +/it/docs/DOM/Selection/focusOffset /it/docs/Web/API/Selection/focusOffset +/it/docs/DOM/Selection/getRangeAt /it/docs/Web/API/Selection/getRangeAt +/it/docs/DOM/Selection/isCollapsed /it/docs/Web/API/Selection/isCollapsed +/it/docs/DOM/Selection/rangeCount /it/docs/Web/API/Selection/rangeCount +/it/docs/DOM/Selection/removeAllRanges /it/docs/Web/API/Selection/removeAllRanges +/it/docs/DOM/Selection/removeRange /it/docs/Web/API/Selection/removeRange +/it/docs/DOM/Selection/selectAllChildren /it/docs/Web/API/Selection/selectAllChildren +/it/docs/DOM/Selection/toString /it/docs/Web/API/Selection/toString +/it/docs/DOM/XMLHttpRequest /it/docs/Web/API/XMLHttpRequest +/it/docs/DOM/XMLHttpRequest/Usare_XMLHttpRequest /it/docs/Web/API/XMLHttpRequest/Usare_XMLHttpRequest +/it/docs/DOM/document /it/docs/Web/API/Document +/it/docs/DOM/document.URL /it/docs/Web/API/Document/URL +/it/docs/DOM/document.anchors /it/docs/Web/API/Document/anchors +/it/docs/DOM/document.applets /it/docs/Web/API/Document/applets +/it/docs/DOM/document.body /it/docs/Web/API/Document/body +/it/docs/DOM/document.characterSet /it/docs/Web/API/Document/characterSet +/it/docs/DOM/document.close /it/docs/Web/API/Document/close +/it/docs/DOM/document.createElement /it/docs/Web/API/Document/createElement +/it/docs/DOM/document.createElementNS /it/docs/Web/API/Document/createElementNS +/it/docs/DOM/document.createRange /it/docs/Web/API/Document/createRange +/it/docs/DOM/document.defaultView /it/docs/Web/API/Document/defaultView +/it/docs/DOM/document.doctype /it/docs/Web/API/Document/doctype +/it/docs/DOM/document.documentElement /it/docs/Web/API/Document/documentElement +/it/docs/DOM/document.firstChild /it/docs/Web/API/Document/firstChild +/it/docs/DOM/document.forms /it/docs/Web/API/Document/forms +/it/docs/DOM/document.getElementById /it/docs/Web/API/Document/getElementById +/it/docs/DOM/document.getElementsByName /it/docs/Web/API/Document/getElementsByName +/it/docs/DOM/document.height /it/docs/Web/API/Document/height +/it/docs/DOM/document.importNode /it/docs/Web/API/Document/importNode +/it/docs/DOM/document.lastModified /it/docs/Web/API/Document/lastModified +/it/docs/DOM/document.links /it/docs/Web/API/Document/links +/it/docs/DOM/document.namespaceURI /it/docs/Web/API/Document/namespaceURI +/it/docs/DOM/document.open /it/docs/Web/API/Document/open +/it/docs/DOM/document.referrer /it/docs/Web/API/Document/referrer +/it/docs/DOM/document.styleSheets /it/docs/Web/API/Document/styleSheets +/it/docs/DOM/document.title /it/docs/Web/API/Document/title +/it/docs/DOM/document.width /it/docs/Web/API/Document/width +/it/docs/DOM/element /it/docs/Web/API/Element +/it/docs/DOM/element.addEventListener /it/docs/Web/API/Element/addEventListener +/it/docs/DOM/element.attributes /it/docs/Web/API/Element/attributes +/it/docs/DOM/element.childNodes /it/docs/Web/API/Element/childNodes +/it/docs/DOM/element.className /it/docs/Web/API/Element/className +/it/docs/DOM/element.clientHeight /it/docs/Web/API/Element/clientHeight +/it/docs/DOM/element.firstChild /it/docs/Web/API/Element/firstChild +/it/docs/DOM/element.hasAttributes /it/docs/Web/API/Element/hasAttributes +/it/docs/DOM/element.nodeName /it/docs/Web/API/Element/nodeName +/it/docs/DOM/element.nodeType /it/docs/Web/API/Element/nodeType +/it/docs/DOM/element.nodeValue /it/docs/Web/API/Element/nodeValue +/it/docs/DOM/element.parentNode /it/docs/Web/API/Element/parentNode +/it/docs/DOM/element.prefix /it/docs/Web/API/Element/prefix +/it/docs/DOM/element.textContent /it/docs/Web/API/Element/textContent +/it/docs/DOM/event /it/docs/Web/API/Event +/it/docs/DOM/event.altKey /it/docs/Web/API/Event/altKey +/it/docs/DOM/event.bubbles /it/docs/Web/API/Event/bubbles +/it/docs/DOM/event.button /it/docs/Web/API/Event/button +/it/docs/DOM/event.cancelable /it/docs/Web/API/Event/cancelable +/it/docs/DOM/event.charCode /it/docs/Web/API/Event/charCode +/it/docs/DOM/event.ctrlKey /it/docs/Web/API/Event/ctrlKey +/it/docs/DOM/event.detail /it/docs/Web/API/Event/detail +/it/docs/DOM/event.eventPhase /it/docs/Web/API/Event/eventPhase +/it/docs/DOM/event.isChar /it/docs/Web/API/Event/isChar +/it/docs/DOM/event.keyCode /it/docs/Web/API/Event/keyCode +/it/docs/DOM/event.layerX /it/docs/Web/API/Event/layerX +/it/docs/DOM/event.layerY /it/docs/Web/API/Event/layerY +/it/docs/DOM/event.metaKey /it/docs/Web/API/Event/metaKey +/it/docs/DOM/event.pageX /it/docs/Web/API/Event/pageX +/it/docs/DOM/event.pageY /it/docs/Web/API/Event/pageY +/it/docs/DOM/event.preventDefault /it/docs/Web/API/Event/preventDefault +/it/docs/DOM/event.shiftKey /it/docs/Web/API/Event/shiftKey +/it/docs/DOM/event.stopPropagation /it/docs/Web/API/Event/stopPropagation +/it/docs/DOM/event.timeStamp /it/docs/Web/API/Event/timeStamp +/it/docs/DOM/event.type /it/docs/Web/API/Event/type +/it/docs/DOM/event.view /it/docs/Web/API/Event/view +/it/docs/DOM/event.which /it/docs/Web/API/Event/which +/it/docs/DOM/form /it/docs/Web/API/HTMLFormElement +/it/docs/DOM/form.acceptCharset /it/docs/Web/API/HTMLFormElement/acceptCharset +/it/docs/DOM/form.action /it/docs/Web/API/HTMLFormElement/action +/it/docs/DOM/form.elements /it/docs/Web/API/HTMLFormElement/elements +/it/docs/DOM/form.enctype /it/docs/Web/API/HTMLFormElement/enctype +/it/docs/DOM/form.length /it/docs/Web/API/HTMLFormElement/length +/it/docs/DOM/form.method /it/docs/Web/API/HTMLFormElement/method +/it/docs/DOM/form.name /it/docs/Web/API/HTMLFormElement/name +/it/docs/DOM/form.reset /it/docs/Web/API/HTMLFormElement/reset +/it/docs/DOM/form.submit /it/docs/Web/API/HTMLFormElement/submit +/it/docs/DOM/form.target /it/docs/Web/API/HTMLFormElement/target +/it/docs/DOM/range /it/docs/Web/API/Range +/it/docs/DOM/range.cloneContents /it/docs/Web/API/Range/cloneContents +/it/docs/DOM/range.cloneRange /it/docs/Web/API/Range/cloneRange +/it/docs/DOM/range.collapse /it/docs/Web/API/Range/collapse +/it/docs/DOM/range.collapsed /it/docs/Web/API/Range/collapsed +/it/docs/DOM/range.commonAncestorContainer /it/docs/Web/API/Range/commonAncestorContainer +/it/docs/DOM/range.compareBoundaryPoints /it/docs/Web/API/Range/compareBoundaryPoints +/it/docs/DOM/range.comparePoint /it/docs/Web/API/Range/comparePoint +/it/docs/DOM/range.createContextualFragment /it/docs/Web/API/Range/createContextualFragment +/it/docs/DOM/range.deleteContents /it/docs/Web/API/Range/deleteContents +/it/docs/DOM/range.detach /it/docs/Web/API/Range/detach +/it/docs/DOM/range.endContainer /it/docs/Web/API/Range/endContainer +/it/docs/DOM/range.endOffset /it/docs/Web/API/Range/endOffset +/it/docs/DOM/range.extractContents /it/docs/Web/API/Range/extractContents +/it/docs/DOM/range.insertNode /it/docs/Web/API/Range/insertNode +/it/docs/DOM/range.isPointInRange /it/docs/Web/API/Range/isPointInRange +/it/docs/DOM/range.selectNode /it/docs/Web/API/Range/selectNode +/it/docs/DOM/range.selectNodeContents /it/docs/Web/API/Range/selectNodeContents +/it/docs/DOM/range.setEnd /it/docs/Web/API/Range/setEnd +/it/docs/DOM/range.setEndAfter /it/docs/Web/API/Range/setEndAfter +/it/docs/DOM/range.setEndBefore /it/docs/Web/API/Range/setEndBefore +/it/docs/DOM/range.setStart /it/docs/Web/API/Range/setStart +/it/docs/DOM/range.setStartAfter /it/docs/Web/API/Range/setStartAfter +/it/docs/DOM/range.setStartBefore /it/docs/Web/API/Range/setStartBefore +/it/docs/DOM/range.startContainer /it/docs/Web/API/Range/startContainer +/it/docs/DOM/range.startOffset /it/docs/Web/API/Range/startOffset +/it/docs/DOM/range.surroundContents /it/docs/Web/API/Range/surroundContents +/it/docs/DOM/range.toString /it/docs/Web/API/Range/toString +/it/docs/DOM/window /it/docs/Web/API/Window +/it/docs/DOM/window.alert /it/docs/Web/API/Window/alert +/it/docs/DOM/window.back /it/docs/Web/API/Window/back +/it/docs/DOM/window.blur /it/docs/Web/API/Window/blur +/it/docs/DOM/window.closed /it/docs/Web/API/Window/closed +/it/docs/DOM/window.confirm /it/docs/Web/API/Window/confirm +/it/docs/DOM/window.defaultStatus /it/docs/Web/API/Window/defaultstatus +/it/docs/DOM/window.document /it/docs/Web/API/Window/document +/it/docs/DOM/window.focus /it/docs/Web/API/Window/focus +/it/docs/DOM/window.forward /it/docs/Web/API/Window/forward +/it/docs/DOM/window.getSelection /it/docs/Web/API/Window/getSelection +/it/docs/DOM/window.history /it/docs/Web/API/Window/history +/it/docs/DOM/window.home /it/docs/Web/API/Window/home +/it/docs/DOM/window.locationbar /it/docs/Web/API/Window/locationbar +/it/docs/DOM/window.moveBy /it/docs/Web/API/Window/moveBy +/it/docs/DOM/window.moveTo /it/docs/Web/API/Window/moveTo +/it/docs/DOM/window.name /it/docs/Web/API/Window/name +/it/docs/DOM/window.opener /it/docs/Web/API/Window/opener +/it/docs/DOM/window.print /it/docs/Web/API/Window/print +/it/docs/DOM/window.prompt /it/docs/Web/API/Window/prompt +/it/docs/DOM/window.resizeBy /it/docs/Web/API/Window/resizeBy +/it/docs/DOM/window.resizeTo /it/docs/Web/API/Window/resizeTo +/it/docs/DOM/window.sizeToContent /it/docs/Web/API/Window/sizeToContent +/it/docs/DOM/window.status /it/docs/Web/API/Window/status +/it/docs/DOM/window.statusbar /it/docs/Web/API/Window/statusbar +/it/docs/DOM/window.stop /it/docs/Web/API/Window/stop +/it/docs/DOM:Selection /it/docs/Web/API/Selection +/it/docs/DOM:Selection:addRange /it/docs/Web/API/Selection/addRange +/it/docs/DOM:Selection:anchorNode /it/docs/Web/API/Selection/anchorNode +/it/docs/DOM:Selection:anchorOffset /it/docs/Web/API/Selection/anchorOffset +/it/docs/DOM:Selection:collapse /it/docs/Web/API/Selection/collapse +/it/docs/DOM:Selection:collapseToEnd /it/docs/Web/API/Selection/collapseToEnd +/it/docs/DOM:Selection:collapseToStart /it/docs/Web/API/Selection/collapseToStart +/it/docs/DOM:Selection:containsNode /it/docs/Web/API/Selection/containsNode +/it/docs/DOM:Selection:deleteFromDocument /it/docs/Web/API/Selection/deleteFromDocument +/it/docs/DOM:Selection:extend /it/docs/Web/API/Selection/extend +/it/docs/DOM:Selection:focusNode /it/docs/Web/API/Selection/focusNode +/it/docs/DOM:Selection:focusOffset /it/docs/Web/API/Selection/focusOffset +/it/docs/DOM:Selection:getRangeAt /it/docs/Web/API/Selection/getRangeAt +/it/docs/DOM:Selection:isCollapsed /it/docs/Web/API/Selection/isCollapsed +/it/docs/DOM:Selection:rangeCount /it/docs/Web/API/Selection/rangeCount +/it/docs/DOM:Selection:removeAllRanges /it/docs/Web/API/Selection/removeAllRanges +/it/docs/DOM:Selection:removeRange /it/docs/Web/API/Selection/removeRange +/it/docs/DOM:Selection:selectAllChildren /it/docs/Web/API/Selection/selectAllChildren +/it/docs/DOM:Selection:toString /it/docs/Web/API/Selection/toString +/it/docs/DOM:document /it/docs/Web/API/Document +/it/docs/DOM:document.URL /it/docs/Web/API/Document/URL +/it/docs/DOM:document.anchors /it/docs/Web/API/Document/anchors +/it/docs/DOM:document.applets /it/docs/Web/API/Document/applets +/it/docs/DOM:document.body /it/docs/Web/API/Document/body +/it/docs/DOM:document.characterSet /it/docs/Web/API/Document/characterSet +/it/docs/DOM:document.close /it/docs/Web/API/Document/close +/it/docs/DOM:document.createElement /it/docs/Web/API/Document/createElement +/it/docs/DOM:document.createElementNS /it/docs/Web/API/Document/createElementNS +/it/docs/DOM:document.createRange /it/docs/Web/API/Document/createRange +/it/docs/DOM:document.defaultView /it/docs/Web/API/Document/defaultView +/it/docs/DOM:document.doctype /it/docs/Web/API/Document/doctype +/it/docs/DOM:document.documentElement /it/docs/Web/API/Document/documentElement +/it/docs/DOM:document.firstChild /it/docs/Web/API/Document/firstChild +/it/docs/DOM:document.forms /it/docs/Web/API/Document/forms +/it/docs/DOM:document.getElementById /it/docs/Web/API/Document/getElementById +/it/docs/DOM:document.getElementsByName /it/docs/Web/API/Document/getElementsByName +/it/docs/DOM:document.height /it/docs/Web/API/Document/height +/it/docs/DOM:document.importNode /it/docs/Web/API/Document/importNode +/it/docs/DOM:document.lastModified /it/docs/Web/API/Document/lastModified +/it/docs/DOM:document.links /it/docs/Web/API/Document/links +/it/docs/DOM:document.namespaceURI /it/docs/Web/API/Document/namespaceURI +/it/docs/DOM:document.open /it/docs/Web/API/Document/open +/it/docs/DOM:document.referrer /it/docs/Web/API/Document/referrer +/it/docs/DOM:document.styleSheets /it/docs/Web/API/Document/styleSheets +/it/docs/DOM:document.title /it/docs/Web/API/Document/title +/it/docs/DOM:document.width /it/docs/Web/API/Document/width +/it/docs/DOM:element /it/docs/Web/API/Element +/it/docs/DOM:element.addEventListener /it/docs/Web/API/Element/addEventListener +/it/docs/DOM:element.attributes /it/docs/Web/API/Element/attributes +/it/docs/DOM:element.childNodes /it/docs/Web/API/Element/childNodes +/it/docs/DOM:element.className /it/docs/Web/API/Element/className +/it/docs/DOM:element.clientHeight /it/docs/Web/API/Element/clientHeight +/it/docs/DOM:element.firstChild /it/docs/Web/API/Element/firstChild +/it/docs/DOM:element.hasAttributes /it/docs/Web/API/Element/hasAttributes +/it/docs/DOM:element.nodeName /it/docs/Web/API/Element/nodeName +/it/docs/DOM:element.nodeType /it/docs/Web/API/Element/nodeType +/it/docs/DOM:element.nodeValue /it/docs/Web/API/Element/nodeValue +/it/docs/DOM:element.parentNode /it/docs/Web/API/Element/parentNode +/it/docs/DOM:element.prefix /it/docs/Web/API/Element/prefix +/it/docs/DOM:element.textContent /it/docs/Web/API/Element/textContent +/it/docs/DOM:event /it/docs/Web/API/Event +/it/docs/DOM:event.altKey /it/docs/Web/API/Event/altKey +/it/docs/DOM:event.bubbles /it/docs/Web/API/Event/bubbles +/it/docs/DOM:event.button /it/docs/Web/API/Event/button +/it/docs/DOM:event.cancelable /it/docs/Web/API/Event/cancelable +/it/docs/DOM:event.charCode /it/docs/Web/API/Event/charCode +/it/docs/DOM:event.ctrlKey /it/docs/Web/API/Event/ctrlKey +/it/docs/DOM:event.detail /it/docs/Web/API/Event/detail +/it/docs/DOM:event.eventPhase /it/docs/Web/API/Event/eventPhase +/it/docs/DOM:event.isChar /it/docs/Web/API/Event/isChar +/it/docs/DOM:event.keyCode /it/docs/Web/API/Event/keyCode +/it/docs/DOM:event.layerX /it/docs/Web/API/Event/layerX +/it/docs/DOM:event.layerY /it/docs/Web/API/Event/layerY +/it/docs/DOM:event.metaKey /it/docs/Web/API/Event/metaKey +/it/docs/DOM:event.pageX /it/docs/Web/API/Event/pageX +/it/docs/DOM:event.pageY /it/docs/Web/API/Event/pageY +/it/docs/DOM:event.preventDefault /it/docs/Web/API/Event/preventDefault +/it/docs/DOM:event.shiftKey /it/docs/Web/API/Event/shiftKey +/it/docs/DOM:event.stopPropagation /it/docs/Web/API/Event/stopPropagation +/it/docs/DOM:event.timeStamp /it/docs/Web/API/Event/timeStamp +/it/docs/DOM:event.type /it/docs/Web/API/Event/type +/it/docs/DOM:event.view /it/docs/Web/API/Event/view +/it/docs/DOM:event.which /it/docs/Web/API/Event/which +/it/docs/DOM:form /it/docs/Web/API/HTMLFormElement +/it/docs/DOM:form.acceptCharset /it/docs/Web/API/HTMLFormElement/acceptCharset +/it/docs/DOM:form.action /it/docs/Web/API/HTMLFormElement/action +/it/docs/DOM:form.elements /it/docs/Web/API/HTMLFormElement/elements +/it/docs/DOM:form.enctype /it/docs/Web/API/HTMLFormElement/enctype +/it/docs/DOM:form.length /it/docs/Web/API/HTMLFormElement/length +/it/docs/DOM:form.method /it/docs/Web/API/HTMLFormElement/method +/it/docs/DOM:form.name /it/docs/Web/API/HTMLFormElement/name +/it/docs/DOM:form.reset /it/docs/Web/API/HTMLFormElement/reset +/it/docs/DOM:form.submit /it/docs/Web/API/HTMLFormElement/submit +/it/docs/DOM:form.target /it/docs/Web/API/HTMLFormElement/target +/it/docs/DOM:range /it/docs/Web/API/Range +/it/docs/DOM:range.cloneContents /it/docs/Web/API/Range/cloneContents +/it/docs/DOM:range.cloneRange /it/docs/Web/API/Range/cloneRange +/it/docs/DOM:range.collapse /it/docs/Web/API/Range/collapse +/it/docs/DOM:range.collapsed /it/docs/Web/API/Range/collapsed +/it/docs/DOM:range.commonAncestorContainer /it/docs/Web/API/Range/commonAncestorContainer +/it/docs/DOM:range.compareBoundaryPoints /it/docs/Web/API/Range/compareBoundaryPoints +/it/docs/DOM:range.comparePoint /it/docs/Web/API/Range/comparePoint +/it/docs/DOM:range.createContextualFragment /it/docs/Web/API/Range/createContextualFragment +/it/docs/DOM:range.deleteContents /it/docs/Web/API/Range/deleteContents +/it/docs/DOM:range.detach /it/docs/Web/API/Range/detach +/it/docs/DOM:range.endContainer /it/docs/Web/API/Range/endContainer +/it/docs/DOM:range.endOffset /it/docs/Web/API/Range/endOffset +/it/docs/DOM:range.extractContents /it/docs/Web/API/Range/extractContents +/it/docs/DOM:range.insertNode /it/docs/Web/API/Range/insertNode +/it/docs/DOM:range.isPointInRange /it/docs/Web/API/Range/isPointInRange +/it/docs/DOM:range.selectNode /it/docs/Web/API/Range/selectNode +/it/docs/DOM:range.selectNodeContents /it/docs/Web/API/Range/selectNodeContents +/it/docs/DOM:range.setEnd /it/docs/Web/API/Range/setEnd +/it/docs/DOM:range.setEndAfter /it/docs/Web/API/Range/setEndAfter +/it/docs/DOM:range.setEndBefore /it/docs/Web/API/Range/setEndBefore +/it/docs/DOM:range.setStart /it/docs/Web/API/Range/setStart +/it/docs/DOM:range.setStartAfter /it/docs/Web/API/Range/setStartAfter +/it/docs/DOM:range.setStartBefore /it/docs/Web/API/Range/setStartBefore +/it/docs/DOM:range.startContainer /it/docs/Web/API/Range/startContainer +/it/docs/DOM:range.startOffset /it/docs/Web/API/Range/startOffset +/it/docs/DOM:range.surroundContents /it/docs/Web/API/Range/surroundContents +/it/docs/DOM:range.toString /it/docs/Web/API/Range/toString +/it/docs/DOM:window /it/docs/Web/API/Window +/it/docs/DOM:window.alert /it/docs/Web/API/Window/alert +/it/docs/DOM:window.back /it/docs/Web/API/Window/back +/it/docs/DOM:window.blur /it/docs/Web/API/Window/blur +/it/docs/DOM:window.closed /it/docs/Web/API/Window/closed +/it/docs/DOM:window.confirm /it/docs/Web/API/Window/confirm +/it/docs/DOM:window.defaultStatus /it/docs/Web/API/Window/defaultstatus +/it/docs/DOM:window.document /it/docs/Web/API/Window/document +/it/docs/DOM:window.focus /it/docs/Web/API/Window/focus +/it/docs/DOM:window.forward /it/docs/Web/API/Window/forward +/it/docs/DOM:window.getSelection /it/docs/Web/API/Window/getSelection +/it/docs/DOM:window.history /it/docs/Web/API/Window/history +/it/docs/DOM:window.home /it/docs/Web/API/Window/home +/it/docs/DOM:window.locationbar /it/docs/Web/API/Window/locationbar +/it/docs/DOM:window.moveBy /it/docs/Web/API/Window/moveBy +/it/docs/DOM:window.moveTo /it/docs/Web/API/Window/moveTo +/it/docs/DOM:window.name /it/docs/Web/API/Window/name +/it/docs/DOM:window.opener /it/docs/Web/API/Window/opener +/it/docs/DOM:window.print /it/docs/Web/API/Window/print +/it/docs/DOM:window.prompt /it/docs/Web/API/Window/prompt +/it/docs/DOM:window.resizeBy /it/docs/Web/API/Window/resizeBy +/it/docs/DOM:window.resizeTo /it/docs/Web/API/Window/resizeTo +/it/docs/DOM:window.sizeToContent /it/docs/Web/API/Window/sizeToContent +/it/docs/DOM:window.status /it/docs/Web/API/Window/status +/it/docs/DOM:window.statusbar /it/docs/Web/API/Window/statusbar +/it/docs/DOM:window.stop /it/docs/Web/API/Window/stop +/it/docs/Developer_Guide /it/docs/Mozilla/Developer_guide +/it/docs/Documentazione_per_build /it/docs/Mozilla/Developer_guide/Documentazione_per_build +/it/docs/Estensioni:Comunit%C3%A0 /it/docs/Estensioni/Comunit%C3%A0 +/it/docs/Firefox_1.5 /it/docs/Firefox_1.5_per_Sviluppatori +/it/docs/Firefox_2 /it/docs/Firefox_2.0_per_Sviluppatori +/it/docs/Firefox_2_per_Sviluppatori /it/docs/Firefox_2.0_per_Sviluppatori +/it/docs/Firefox_3_for_developers /it/docs/Firefox_3_per_sviluppatori/Firefox_3_per_sviluppatori +/it/docs/Guida_di_riferimento_ai_CSS /it/docs/Web/CSS/Guida_di_riferimento_ai_CSS +/it/docs/HTML /it/docs/Web/HTML +/it/docs/HTML/Aree_tematiche /it/docs/Web/Guide/HTML/Categorie_di_contenuto +/it/docs/HTML/Attributi /it/docs/Web/HTML/Attributi +/it/docs/HTML/Canvas /it/docs/Web/HTML/Canvas +/it/docs/HTML/Canvas/Drawing_graphics_with_canvas /it/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas +/it/docs/HTML/Element /it/docs/Web/HTML/Element +/it/docs/HTML/Element/a /it/docs/Web/HTML/Element/a +/it/docs/HTML/Element/abbr /it/docs/Web/HTML/Element/abbr +/it/docs/HTML/Element/address /it/docs/Web/HTML/Element/address +/it/docs/HTML/Element/area /it/docs/Web/HTML/Element/area +/it/docs/HTML/Element/article /it/docs/Web/HTML/Element/article +/it/docs/HTML/Element/html /it/docs/Web/HTML/Element/html +/it/docs/HTML/Element/output /it/docs/Web/HTML/Element/output +/it/docs/HTML/Element/section /it/docs/Web/HTML/Element/section +/it/docs/HTML/Element/time /it/docs/Web/HTML/Element/time +/it/docs/HTML/Forms_in_HTML /it/docs/Web/HTML/Forms_in_HTML +/it/docs/HTML/Global_attributes /it/docs/Web/HTML/Global_attributes +/it/docs/HTML/HTML5 /it/docs/Web/HTML/HTML5 +/it/docs/HTML/HTML5/Introduction_to_HTML5 /it/docs/Web/HTML/HTML5/Introduction_to_HTML5 +/it/docs/HTML/Introduzione /it/docs/Learn/HTML/Introduction_to_HTML +/it/docs/HTML/Sections_and_Outlines_of_an_HTML5_document /it/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document +/it/docs/HTML/Using_HTML5_audio_and_video /it/docs/Web/HTML/Using_HTML5_audio_and_video +/it/docs/HTML/utilizzare_application_cache /it/docs/Web/HTML/utilizzare_application_cache +/it/docs/Il_DOM_e_JavaScript /it/docs/Web/JavaScript/Il_DOM_e_JavaScript +/it/docs/Importare_applicazioni_da_Internet_Explorer_a_Mozilla /it/docs/Migrare_applicazioni_da_Internet_Explorer_a_Mozilla +/it/docs/Introduzione /it/docs/Mozilla/Developer_guide/Introduction +/it/docs/Introduzione_al_carattere_Object-Oriented_di_JavaScript /it/docs/Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript +/it/docs/JavaScript /it/docs/Web/JavaScript +/it/docs/JavaScript/ECMAScript_6_support_in_Mozilla /it/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla +/it/docs/JavaScript/Guida /it/docs/Web/JavaScript/Guida +/it/docs/JavaScript/Guide/Predefined_Core_Objects /it/docs/JavaScript/Guida/Oggetti_nativi +/it/docs/JavaScript/New_in_JavaScript /it/docs/Web/JavaScript/New_in_JavaScript +/it/docs/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.6 /it/docs/Web/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.6 +/it/docs/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.7 /it/docs/Web/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.7 +/it/docs/JavaScript/Reference /it/docs/Web/JavaScript/Reference +/it/docs/JavaScript/Reference/Functions_and_function_scope /it/docs/Web/JavaScript/Reference/Functions_and_function_scope +/it/docs/JavaScript/Reference/Global_Objects /it/docs/Web/JavaScript/Reference/Global_Objects +/it/docs/JavaScript/Reference/Global_Objects/Object /it/docs/Web/JavaScript/Reference/Global_Objects/Object +/it/docs/JavaScript/Reference/Global_Objects/Object/keys /it/docs/Web/JavaScript/Reference/Global_Objects/Object/keys +/it/docs/JavaScript/Reference/Global_Objects/eval /it/docs/Web/JavaScript/Reference/Global_Objects/eval +/it/docs/JavaScript/Reference/Statements /it/docs/Web/JavaScript/Reference/Statements +/it/docs/JavaScript/Reference/Statements/let /it/docs/Web/JavaScript/Reference/Statements/let +/it/docs/JavaScript/Una_reintroduzione_al_JavaScript /it/docs/Web/JavaScript/Una_reintroduzione_al_JavaScript +/it/docs/Learn/CSS/Basics/Box_model /en-US/docs/Learn/CSS/Building_blocks/The_box_model +/it/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps +/it/docs/Learn/CSS/Introduction_to_CSS/Come_funziona_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/it/docs/Learn/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks +/it/docs/Learn/CSS/Styling_boxes/Stili_per_tabelle /it/docs/Learn/CSS/Building_blocks/Styling_tables +/it/docs/Libert%C3%A0!_Uguaglianza!_Validit%C3%A0! /en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML +/it/docs/Linux_Build_Prerequisites /it/docs/Mozilla/Developer_guide/Documentazione_per_build/Linux_Build_Prerequisites +/it/docs/Localizzazione /it/docs/Localization +/it/docs/MDN/Contribute/Content /it/docs/MDN/Guidelines +/it/docs/MDN/Contribute/Content/Macros /it/docs/MDN/Guidelines/Macros +/it/docs/MDN/Contribute/Content/Migliore_pratica /it/docs/MDN/Guidelines/Migliore_pratica +/it/docs/MDN/Contribute/Editor /it/docs/MDN/Editor +/it/docs/MDN/Contribute/Structures /it/docs/MDN/Structures +/it/docs/MDN/Contribute/Structures/Tabelle_compatibilit%C3%A0 /it/docs/MDN/Structures/Tabelle_compatibilit%C3%A0 +/it/docs/MDN/Editor/Project:MDC_editor_guide /it/docs/MDN/Contribute/Editor/Basics +/it/docs/MDN/Feedback /it/docs/MDN/Contribute/Feedback +/it/docs/Mozilla/Developer_guide/Introduzione /it/docs/Mozilla/Developer_guide/Introduction +/it/docs/Novit%C3%A0_in_JavaScript_1.6 /it/docs/Web/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.6 +/it/docs/Novit%C3%A0_in_JavaScript_1.7 /it/docs/Web/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.7 +/it/docs/Pagina_Principale /it/docs/Web +/it/docs/Plugins /it/docs/Plug-in +/it/docs/Reference_del_DOM_di_Gecko:Esempi /it/docs/Reference_del_DOM_di_Gecko/Esempi +/it/docs/Reference_del_DOM_di_Gecko:Introduzione /it/docs/Reference_del_DOM_di_Gecko/Introduzione +/it/docs/Rich-Text_Editing_in_Mozilla /it/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +/it/docs/Scripting_Plugins:_Macromedia_Flash /it/docs/Scripting_Plugins/Macromedia_Flash +/it/docs/Strumenti:Validare /it/docs/Strumenti/Validare +/it/docs/Strumenti:Validatori /it/docs/Strumenti/Validatori +/it/docs/Una_re-introduzione_a_Javascript /it/docs/Web/JavaScript/Una_reintroduzione_al_JavaScript +/it/docs/Usare_le_URL_nella_propriet%C3%A0_cursor /it/docs/Web/CSS/cursor/Usare_valori_URL_per_la_propriet%C3%A0_cursor +/it/docs/Usare_valori_URL_per_la_propriet%C3%A0_cursor /it/docs/Web/CSS/cursor/Usare_valori_URL_per_la_propriet%C3%A0_cursor +/it/docs/Web/API/Element.getElementsByTagName /it/docs/Web/API/Element/getElementsByTagName +/it/docs/Web/API/Element.scrollHeight /it/docs/Web/API/Element/scrollHeight +/it/docs/Web/API/Navigator.cookieEnabled /it/docs/Web/API/Navigator/cookieEnabled +/it/docs/Web/API/Position /it/docs/Web/API/GeolocationPosition +/it/docs/Web/API/URLUtils.href /it/docs/Web/API/URLUtils/href +/it/docs/Web/API/document.write() /it/docs/Web/API/Document/write +/it/docs/Web/CSS/@-moz-document /it/docs/Web/CSS/%40document +/it/docs/Web/CSS/Getting_Started /it/docs/Conoscere_i_CSS +/it/docs/Web/Events/devicemotion /it/docs/Web/API/Window/devicemotion_event +/it/docs/Web/Events/orientationchange /it/docs/Web/API/Window/orientationchange_event +/it/docs/Web/Guide/HTML /it/docs/Learn/HTML +/it/docs/Web/HTML/Aree_tematiche /it/docs/Web/Guide/HTML/Categorie_di_contenuto +/it/docs/Web/JavaScript/Guide /it/docs/Web/JavaScript/Guida +/it/docs/Web/JavaScript/Guide/About /it/docs/JavaScript/Guida/About +/it/docs/Web/JavaScript/Guide/Expressions_and_Operators /it/docs/JavaScript/Guida/Expressions_and_Operators +/it/docs/Web/JavaScript/Reference/Operators/Spread_operator /en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax +/it/docs/Web/WebGL /it/docs/Web/API/WebGL_API +/it/docs/XMLHttpRequest /it/docs/Web/API/XMLHttpRequest +/it/docs/XPCOM:Binding_per_i_linguaggi /it/docs/XPCOM/Binding_per_i_linguaggi +/it/docs/XPInstall /it/docs/XPI +/it/docs/XPath /it/docs/Web/XPath +/it/docs/XSLT /it/docs/Web/XSLT +/it/docs/en /en-US/ diff --git a/files/it/_wikihistory.json b/files/it/_wikihistory.json new file mode 100644 index 0000000000..e37ca36f53 --- /dev/null +++ b/files/it/_wikihistory.json @@ -0,0 +1,6026 @@ +{ + "Adattare_le_applicazioni_XUL_a_Firefox_1.5": { + "modified": "2019-03-23T23:41:34.028Z", + "contributors": [ + "wbamberg", + "Indigo" + ] + }, + "Circa_il_Document_Object_Model": { + "modified": "2019-03-23T23:40:46.607Z", + "contributors": [ + "teoli", + "DaViD83" + ] + }, + "Conoscere_i_CSS": { + "modified": "2019-03-23T23:43:26.363Z", + "contributors": [ + "libri-nozze", + "Davidee", + "Grino", + "Verruckt", + "Indigo" + ] + }, + "Conoscere_i_CSS/CSS_leggibili": { + "modified": "2019-03-23T23:43:30.247Z", + "contributors": [ + "Verruckt", + "Indigo" + ] + }, + "Conoscere_i_CSS/Cascata_ed_ereditarietà": { + "modified": "2019-03-23T23:44:51.382Z", + "contributors": [ + "Sheppy", + "Andrealibo", + "Verruckt", + "Indigo" + ] + }, + "Conoscere_i_CSS/Che_cosa_sono_i_CSS": { + "modified": "2019-03-23T23:43:28.433Z", + "contributors": [ + "pignaccia", + "Grino", + "Verruckt", + "Indigo" + ] + }, + "Conoscere_i_CSS/Come_funzionano_i_CSS": { + "modified": "2019-03-23T23:43:26.112Z", + "contributors": [ + "Verruckt", + "Indigo" + ] + }, + "Conoscere_i_CSS/I_Selettori": { + "modified": "2019-03-23T23:43:27.992Z", + "contributors": [ + "Verruckt", + "Indigo" + ] + }, + "Conoscere_i_CSS/Perché_usare_i_CSS": { + "modified": "2019-03-23T23:43:33.204Z", + "contributors": [ + "pignaccia", + "Verruckt", + "Indigo" + ] + }, + "Costruire_e_decostruire_un_documento_XML": { + "modified": "2019-03-24T00:13:01.603Z", + "contributors": [ + "fscholz", + "foto-planner", + "fusionchess" + ] + }, + "DHTML": { + "modified": "2019-03-24T00:02:50.459Z", + "contributors": [ + "teoli", + "fscholz", + "Samuele" + ] + }, + "DOM": { + "modified": "2019-03-24T00:03:02.057Z", + "contributors": [ + "teoli", + "Samuele", + "Grino", + "khela", + "Federico", + "DaViD83" + ] + }, + "DOM_Inspector": { + "modified": "2020-07-16T22:36:24.345Z", + "contributors": [ + "Federico", + "Leofiore", + "Samuele" + ] + }, + "Dare_una_mano_al_puntatore": { + "modified": "2019-03-23T23:43:11.495Z", + "contributors": [ + "teoli", + "ethertank", + "bradipao" + ] + }, + "Firefox_1.5_per_Sviluppatori": { + "modified": "2019-03-23T23:44:26.825Z", + "contributors": [ + "wbamberg", + "teoli", + "Leofiore", + "Federico" + ] + }, + "Firefox_18_for_developers": { + "modified": "2019-03-23T23:34:04.358Z", + "contributors": [ + "wbamberg", + "Indil", + "0limits91" + ] + }, + "Firefox_2.0_per_Sviluppatori": { + "modified": "2019-03-23T23:44:14.083Z", + "contributors": [ + "wbamberg", + "Leofiore", + "Samuele", + "Federico", + "Neotux" + ] + }, + "Games": { + "modified": "2019-09-09T15:32:14.707Z", + "contributors": [ + "SphinxKnight", + "isocialweb", + "wbamberg", + "PyQio", + "lybhy" + ] + }, + "Games/Publishing_games": { + "modified": "2019-03-18T21:10:16.530Z", + "contributors": [ + "Antonio-Caminiti" + ] + }, + "Gli_User_Agent_di_Gecko": { + "modified": "2019-03-23T23:44:58.670Z", + "contributors": [ + "fotografi", + "teoli", + "Federico" + ] + }, + "Glossary": { + "modified": "2020-10-07T11:11:11.203Z", + "contributors": [ + "peterbe", + "SphinxKnight", + "wbamberg", + "klez" + ] + }, + "Glossary/AJAX": { + "modified": "2020-04-16T13:58:31.813Z", + "contributors": [ + "xplosionmind", + "maruskina", + "SimoneSalern" + ] + }, + "Glossary/Block": { + "modified": "2019-03-23T22:07:59.540Z", + "contributors": [ + "Sheppy" + ] + }, + "Glossary/Block/CSS": { + "modified": "2019-03-23T22:07:52.239Z", + "contributors": [ + "sambuccid" + ] + }, + "Glossary/CSS": { + "modified": "2019-03-23T22:06:23.064Z", + "contributors": [ + "SimoneSalern" + ] + }, + "Glossary/Control_flow": { + "modified": "2019-03-18T21:27:30.313Z", + "contributors": [ + "ladysilvia" + ] + }, + "Glossary/Doctype": { + "modified": "2019-01-17T02:41:07.401Z", + "contributors": [ + "gnardell" + ] + }, + "Glossary/First-class_Function": { + "modified": "2019-03-18T21:46:04.586Z", + "contributors": [ + "tontonialberto" + ] + }, + "Glossary/HTML": { + "modified": "2019-03-23T22:03:10.082Z", + "contributors": [ + "AndreaNaspi" + ] + }, + "Glossary/HTML5": { + "modified": "2019-03-23T22:03:14.763Z", + "contributors": [ + "AndreaNaspi" + ] + }, + "Glossary/HTTP": { + "modified": "2020-07-30T13:08:44.286Z", + "contributors": [ + "sara_t", + "xplosionmind", + "Sav22999" + ] + }, + "Glossary/Head": { + "modified": "2019-03-18T21:40:44.730Z", + "contributors": [ + "gnardell" + ] + }, + "Glossary/Header_di_risposta": { + "modified": "2019-03-18T21:31:16.700Z", + "contributors": [ + "lucat92" + ] + }, + "Glossary/Hoisting": { + "modified": "2020-07-09T10:59:09.829Z", + "contributors": [ + "ImChrono", + "Spyna" + ] + }, + "Glossary/JavaScript": { + "modified": "2019-03-18T21:45:58.560Z", + "contributors": [ + "EndBug" + ] + }, + "Glossary/Node": { + "modified": "2019-03-18T21:19:43.745Z", + "contributors": [ + "klez" + ] + }, + "Glossary/Node/DOM": { + "modified": "2019-03-18T21:19:38.420Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Glossary/Nullish": { + "modified": "2020-10-14T13:32:16.214Z", + "contributors": [ + "sharq" + ] + }, + "Glossary/Primitive": { + "modified": "2019-03-23T22:31:06.215Z", + "contributors": [ + "Fredev" + ] + }, + "Glossary/Protocollo": { + "modified": "2020-04-21T13:55:15.140Z", + "contributors": [ + "sara_t", + "xplosionmind" + ] + }, + "Glossary/REST": { + "modified": "2020-04-21T13:56:38.394Z", + "contributors": [ + "sara_t", + "Sav22999", + "xplosionmind" + ] + }, + "Glossary/Reflow": { + "modified": "2019-12-05T05:19:52.753Z", + "contributors": [ + "LoSo" + ] + }, + "Glossary/Serialization": { + "modified": "2019-03-18T21:27:14.829Z", + "contributors": [ + "ladysilvia" + ] + }, + "Glossary/World_Wide_Web": { + "modified": "2019-03-23T22:03:18.770Z", + "contributors": [ + "AndreaNaspi" + ] + }, + "Glossary/array": { + "modified": "2019-06-03T12:35:12.894Z", + "contributors": [ + "Umberto81" + ] + }, + "Glossary/undefined": { + "modified": "2019-03-23T22:57:58.153Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Indentazione_corretta_delle_liste": { + "modified": "2019-03-23T23:43:02.621Z", + "contributors": [ + "music-wedding", + "artistics-weddings", + "teoli", + "bradipao" + ] + }, + "Installare_plugin_di_ricerca_dalle_pagine_web": { + "modified": "2019-01-16T16:19:44.703Z", + "contributors": [ + "Federico" + ] + }, + "Introduzione_a_SVG_dentro_XHTML": { + "modified": "2019-03-23T23:41:29.996Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Le_Colonne_nei_CSS3": { + "modified": "2019-03-23T23:43:04.536Z", + "contributors": [ + "bradipao" + ] + }, + "Learn": { + "modified": "2020-07-16T22:43:43.043Z", + "contributors": [ + "SphinxKnight", + "PyQio", + "siron94", + "MarcoMatta" + ] + }, + "Learn/Accessibilità": { + "modified": "2020-07-16T22:39:57.773Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibilità/Accessibilità_dispositivi_mobili": { + "modified": "2020-07-16T22:40:30.564Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibilità/Accessibilità_test_risoluzione_problemi": { + "modified": "2020-07-16T22:40:35.761Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibilità/CSS_e_JavaScript_accessibilità": { + "modified": "2020-07-16T22:40:17.303Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibilità/Cosa_è_accessibilità": { + "modified": "2020-07-16T22:40:04.717Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibilità/HTML_accessibilità": { + "modified": "2020-07-16T22:40:11.165Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibilità/Multimedia": { + "modified": "2020-07-16T22:40:26.699Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibilità/WAI-ARIA_basics": { + "modified": "2020-07-16T22:40:22.345Z", + "contributors": [ + "mipo" + ] + }, + "Learn/CSS": { + "modified": "2020-11-02T07:57:14.931Z", + "contributors": [ + "josefsimionato", + "fabiopozzi", + "pietro.tamburrano", + "aki54", + "ExplosiveLab", + "Jeremie" + ] + }, + "Learn/CSS/Building_blocks": { + "modified": "2020-07-30T13:10:35.572Z", + "contributors": [ + "sara_t", + "xplosionmind", + "chrisdavidmills" + ] + }, + "Learn/CSS/Building_blocks/Selettori": { + "modified": "2020-10-27T14:47:40.269Z", + "contributors": [ + "francescomazza91" + ] + }, + "Learn/CSS/Building_blocks/Styling_tables": { + "modified": "2020-07-16T22:28:16.589Z", + "contributors": [ + "chrisdavidmills", + "bobgen" + ] + }, + "Learn/CSS/CSS_layout": { + "modified": "2020-07-30T14:33:23.625Z", + "contributors": [ + "sara_t", + "danielebarell" + ] + }, + "Learn/CSS/CSS_layout/Flexbox": { + "modified": "2020-11-17T12:27:45.093Z", + "contributors": [ + "danielebarell" + ] + }, + "Learn/CSS/CSS_layout/Introduction": { + "modified": "2020-08-07T07:59:31.659Z", + "contributors": [ + "danielebarell", + "sara_t" + ] + }, + "Learn/CSS/CSS_layout/Normal_Flow": { + "modified": "2020-10-23T12:57:51.380Z", + "contributors": [ + "danielebarell", + "sara_t", + "Mte90" + ] + }, + "Learn/CSS/Styling_text": { + "modified": "2020-07-16T22:25:58.230Z", + "contributors": [ + "wilton-cruz" + ] + }, + "Learn/CSS/Styling_text/Definire_stili_link": { + "modified": "2020-07-16T22:26:19.044Z", + "contributors": [ + "genoa1893" + ] + }, + "Learn/Come_contribuire": { + "modified": "2020-07-16T22:33:44.464Z", + "contributors": [ + "SphinxKnight", + "ZiaRita", + "ivan.lori" + ] + }, + "Learn/Common_questions": { + "modified": "2020-07-16T22:35:24.563Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/Common_questions/Thinking_before_coding": { + "modified": "2020-07-16T22:35:34.470Z", + "contributors": [ + "duel89" + ] + }, + "Learn/Getting_started_with_the_web": { + "modified": "2020-10-31T11:54:00.576Z", + "contributors": [ + "JennyDC", + "howilearn", + "mozzy91", + "Redsnic", + "Lorenzo_FF" + ] + }, + "Learn/Getting_started_with_the_web/CSS_basics": { + "modified": "2020-11-14T17:54:31.688Z", + "contributors": [ + "JennyDC", + "stefsava", + "howilearn" + ] + }, + "Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web": { + "modified": "2020-07-16T22:34:17.256Z", + "contributors": [ + "PyQio" + ] + }, + "Learn/Getting_started_with_the_web/Come_funziona_il_Web": { + "modified": "2020-11-10T20:12:58.028Z", + "contributors": [ + "massic80", + "JennyDC" + ] + }, + "Learn/Getting_started_with_the_web/Gestire_i_file": { + "modified": "2020-07-16T22:34:34.196Z", + "contributors": [ + "ZiaRita", + "PatrickT", + "DaniPani", + "cubark" + ] + }, + "Learn/Getting_started_with_the_web/HTML_basics": { + "modified": "2020-11-14T17:53:13.393Z", + "contributors": [ + "JennyDC", + "KetiJ", + "jwhitlock" + ] + }, + "Learn/Getting_started_with_the_web/Installing_basic_software": { + "modified": "2020-07-16T22:34:08.318Z", + "contributors": [ + "costacarlo", + "PatrickT", + "siron94", + "SphinxKnight" + ] + }, + "Learn/Getting_started_with_the_web/JavaScript_basics": { + "modified": "2020-11-14T17:55:41.640Z", + "contributors": [ + "JennyDC", + "PatrickT", + "Tonystrel", + "mnemosdev" + ] + }, + "Learn/Getting_started_with_the_web/Pubbicare_sito": { + "modified": "2020-07-30T14:39:28.232Z", + "contributors": [ + "sara_t", + "dag7dev" + ] + }, + "Learn/HTML": { + "modified": "2020-07-16T22:22:18.921Z", + "contributors": [ + "PatrickT", + "Ella" + ] + }, + "Learn/HTML/Forms": { + "modified": "2020-10-05T13:36:42.596Z", + "contributors": [ + "ArgusMk", + "Jeffrey_Yang" + ] + }, + "Learn/HTML/Forms/Come_costruire_custom_form_widgets_personalizzati": { + "modified": "2020-07-16T22:21:56.435Z", + "contributors": [ + "whiteLie" + ] + }, + "Learn/HTML/Forms/Form_validation": { + "modified": "2020-12-03T10:32:19.605Z", + "contributors": [ + "LoSo", + "claudiod" + ] + }, + "Learn/HTML/Howto": { + "modified": "2020-07-16T22:22:29.048Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/HTML/Howto/Author_fast-loading_HTML_pages": { + "modified": "2020-07-16T22:22:32.665Z", + "contributors": [ + "ladysilvia" + ] + }, + "Learn/HTML/Howto/Uso_attributi_data": { + "modified": "2020-07-16T22:22:35.395Z", + "contributors": [ + "Elfo404", + "Enrico_Polanski" + ] + }, + "Learn/HTML/Introduction_to_HTML": { + "modified": "2020-07-16T22:22:49.350Z", + "contributors": [ + "fabiopozzi", + "Aedo1", + "nicco88", + "robertsillo", + "federico71", + "sginestrini", + "chrisdavidmills" + ] + }, + "Learn/HTML/Introduction_to_HTML/Getting_started": { + "modified": "2020-07-16T22:23:01.401Z", + "contributors": [ + "chack1172", + "PatrickT", + "howilearn" + ] + }, + "Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML": { + "modified": "2020-07-16T22:23:20.000Z", + "contributors": [ + "Aedo1", + "howilearn" + ] + }, + "Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html": { + "modified": "2020-07-16T22:23:34.063Z", + "contributors": [ + "b4yl0n", + "duduindo", + "Th3cG", + "robertsillo" + ] + }, + "Learn/HTML/Multimedia_and_embedding": { + "modified": "2020-07-16T22:24:26.195Z", + "contributors": [ + "Hirpux", + "chrisdavidmills" + ] + }, + "Learn/HTML/Multimedia_and_embedding/Images_in_HTML": { + "modified": "2020-07-16T22:24:45.449Z", + "contributors": [ + "dnaxxx", + "howilearn" + ] + }, + "Learn/HTML/Multimedia_and_embedding/contenuti_video_e_audio": { + "modified": "2020-07-16T22:24:53.308Z", + "contributors": [ + "howilearn" + ] + }, + "Learn/HTML/Multimedia_and_embedding/immagini_reattive": { + "modified": "2020-07-16T22:24:35.114Z", + "contributors": [ + "kalamun", + "howilearn" + ] + }, + "Learn/HTML/Scrivi_una_semplice_pagina_in_HTML": { + "modified": "2020-07-16T22:22:27.063Z", + "contributors": [ + "duduindo", + "wbamberg", + "Ella" + ] + }, + "Learn/HTML/Tables": { + "modified": "2020-07-16T22:25:12.659Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:40.494Z", + "contributors": [ + "mario.dilodovico1", + "ManuelDesigner", + "LoSo", + "emilio.giuffrida" + ] + }, + "Learn/JavaScript/Building_blocks": { + "modified": "2020-07-16T22:31:08.796Z", + "contributors": [ + "Gioelio", + "chrisdavidmills" + ] + }, + "Learn/JavaScript/Comefare": { + "modified": "2020-07-16T22:33:09.378Z", + "contributors": [ + "mario.dilodovico1" + ] + }, + "Learn/JavaScript/First_steps": { + "modified": "2020-07-16T22:29:52.003Z", + "contributors": [ + "bosluca", + "theant72", + "Elllenn" + ] + }, + "Learn/JavaScript/First_steps/Cosa_è_andato_storto": { + "modified": "2020-07-16T22:30:33.953Z", + "contributors": [ + "rosso791" + ] + }, + "Learn/JavaScript/First_steps/Variabili": { + "modified": "2020-08-19T06:27:13.303Z", + "contributors": [ + "a.ros", + "SamuelaKC", + "Ibernato93" + ] + }, + "Learn/JavaScript/Oggetti": { + "modified": "2020-07-16T22:31:50.631Z", + "contributors": [ + "maboglia", + "s3lvatico" + ] + }, + "Learn/JavaScript/Oggetti/Basics": { + "modified": "2020-07-16T22:31:59.612Z", + "contributors": [ + "dq82elo", + "claudiod" + ] + }, + "Learn/JavaScript/Oggetti/JSON": { + "modified": "2020-07-16T22:32:26.492Z", + "contributors": [ + "mario.dilodovico1" + ] + }, + "Learn/Server-side": { + "modified": "2020-07-16T22:35:58.950Z", + "contributors": [ + "rsidorov" + ] + }, + "Learn/Server-side/Django": { + "modified": "2020-08-26T14:18:40.901Z", + "contributors": [ + "MatteoMaso", + "Odle98", + "Loder91", + "Cereal84", + "chrisdavidmills" + ] + }, + "Learn/Server-side/Django/Admin_site": { + "modified": "2020-07-16T22:37:03.768Z", + "contributors": [ + "umarino", + "paco80", + "mattiatoselli" + ] + }, + "Learn/Server-side/Django/Authentication": { + "modified": "2020-07-16T22:37:22.138Z", + "contributors": [ + "wbamberg", + "mattiatoselli" + ] + }, + "Learn/Server-side/Django/Forms": { + "modified": "2020-07-16T22:37:31.642Z", + "contributors": [ + "duduindo", + "FrancescoLucia", + "mattiatoselli" + ] + }, + "Learn/Server-side/Django/Generic_views": { + "modified": "2020-07-16T22:37:16.343Z", + "contributors": [ + "paco80", + "mattiatoselli" + ] + }, + "Learn/Server-side/Django/Home_page": { + "modified": "2020-07-16T22:37:09.320Z", + "contributors": [ + "duduindo", + "paco80", + "mattiatoselli" + ] + }, + "Learn/Server-side/Django/Introduzione": { + "modified": "2020-10-29T07:11:12.599Z", + "contributors": [ + "sara_t", + "dag7dev", + "gianluca.gioino", + "CristinaS24" + ] + }, + "Learn/Server-side/Django/Models": { + "modified": "2020-07-16T22:36:57.781Z", + "contributors": [ + "paco80", + "mattiatoselli" + ] + }, + "Learn/Server-side/Django/Sessions": { + "modified": "2020-07-16T22:37:26.936Z", + "contributors": [ + "paco80" + ] + }, + "Learn/Server-side/Django/Tutorial_local_library_website": { + "modified": "2020-07-16T22:36:49.252Z", + "contributors": [ + "paco80", + "r0bby", + "Loder91" + ] + }, + "Learn/Server-side/Django/development_environment": { + "modified": "2020-12-02T04:01:12.130Z", + "contributors": [ + "SphinxKnight", + "catta", + "paco80", + "Loder91", + "Cereal84" + ] + }, + "Learn/Server-side/Django/skeleton_website": { + "modified": "2020-07-16T22:36:52.791Z", + "contributors": [ + "paco80", + "mattiatoselli" + ] + }, + "Learn/Server-side/Express_Nodejs": { + "modified": "2020-07-16T22:37:52.837Z", + "contributors": [ + "mattiatoselli" + ] + }, + "Link_prefetching_FAQ": { + "modified": "2019-03-23T23:44:25.588Z", + "contributors": [ + "fscholz", + "artistics-weddings", + "jigs12", + "Leofiore" + ] + }, + "Localization": { + "modified": "2019-03-23T23:44:27.139Z", + "contributors": [ + "teoli", + "Verruckt", + "Leofiore", + "Etms", + "Federico" + ] + }, + "MDN": { + "modified": "2019-09-10T15:42:00.204Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "Jeremie", + "klez", + "teoli", + "Sheppy" + ] + }, + "MDN/About": { + "modified": "2019-09-10T08:52:46.593Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "PsCustomObject", + "jswisher", + "klez" + ] + }, + "MDN/Community": { + "modified": "2019-03-23T22:36:02.220Z", + "contributors": [ + "Italuil", + "wbamberg", + "Vinsala" + ] + }, + "MDN/Contribute": { + "modified": "2019-03-23T23:18:14.834Z", + "contributors": [ + "wbamberg", + "klez", + "Sheppy" + ] + }, + "MDN/Contribute/Creating_and_editing_pages": { + "modified": "2019-03-23T23:06:13.182Z", + "contributors": [ + "wbamberg", + "fabriziobianchi3", + "claudio.mantuano", + "Sav_" + ] + }, + "MDN/Contribute/Feedback": { + "modified": "2020-09-30T17:51:21.113Z", + "contributors": [ + "chrisdavidmills", + "jswisher", + "SphinxKnight", + "wbamberg", + "LucaCtt", + "frbi" + ] + }, + "MDN/Contribute/Getting_started": { + "modified": "2020-09-30T17:12:42.224Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "klez", + "teoli", + "Mmarco", + "Xyzale" + ] + }, + "MDN/Contribute/Howto": { + "modified": "2019-01-16T19:06:07.701Z", + "contributors": [ + "wbamberg", + "micheleceo", + "Sheppy" + ] + }, + "MDN/Contribute/Howto/Convert_code_samples_to_be_live": { + "modified": "2019-01-16T21:33:55.637Z", + "contributors": [ + "wbamberg", + "sginestrini", + "plovec", + "nicokant" + ] + }, + "MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-01-16T19:06:05.374Z", + "contributors": [ + "ladysilvia", + "wbamberg", + "plovec", + "klez" + ] + }, + "MDN/Contribute/Howto/Delete_my_profile": { + "modified": "2020-10-21T23:15:42.235Z", + "contributors": [ + "FrancescoCoding" + ] + }, + "MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2019-01-16T19:16:55.097Z", + "contributors": [ + "wbamberg", + "klez" + ] + }, + "MDN/Contribute/Howto/Do_an_editorial_review": { + "modified": "2019-03-23T23:10:59.000Z", + "contributors": [ + "wbamberg", + "mat.campanelli", + "Navy60" + ] + }, + "MDN/Contribute/Howto/Tag": { + "modified": "2020-07-29T06:42:10.343Z", + "contributors": [ + "sara_t", + "danielebarell", + "wbamberg", + "frbi", + "digo62.ddp", + "Originalsin8" + ] + }, + "MDN/Contribute/Howto/impostare_il_riassunto_di_una_pagina": { + "modified": "2019-03-23T23:07:02.988Z", + "contributors": [ + "wbamberg", + "Enrico12" + ] + }, + "MDN/Contribute/Localize": { + "modified": "2019-01-16T18:45:24.347Z", + "contributors": [ + "wbamberg", + "klez", + "Sheppy" + ] + }, + "MDN/Contribute/Localize/GuidaItaliano": { + "modified": "2019-01-16T19:24:37.678Z", + "contributors": [ + "wbamberg", + "klez" + ] + }, + "MDN/Contribute/Localize/Translating_pages": { + "modified": "2019-12-17T21:17:14.987Z", + "contributors": [ + "wbamberg", + "lindakovacs", + "andrealeone", + "plovec", + "Originalsin8", + "klez", + "nicolo-ribaudo" + ] + }, + "MDN/Contribute/Localize/progetti_localizzazione": { + "modified": "2019-05-03T00:34:26.550Z", + "contributors": [ + "wbamberg", + "demmy" + ] + }, + "MDN/Editor": { + "modified": "2020-09-30T15:41:34.289Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "klez", + "turco" + ] + }, + "MDN/Guidelines": { + "modified": "2020-09-30T15:30:11.537Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Sheppy" + ] + }, + "MDN/Guidelines/Macros": { + "modified": "2020-09-30T15:30:11.714Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "frbi" + ] + }, + "MDN/Guidelines/Migliore_pratica": { + "modified": "2020-09-30T15:30:11.829Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Giacomo_" + ] + }, + "MDN/Structures": { + "modified": "2020-09-30T09:07:10.947Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "jswisher" + ] + }, + "MDN/Structures/Tabelle_compatibilità": { + "modified": "2020-10-15T22:03:08.289Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "PsCustomObject", + "Carlo-Effe" + ] + }, + "MDN_at_ten": { + "modified": "2019-03-23T22:42:30.395Z", + "contributors": [ + "foto-planner", + "Vinsala", + "Redsnic", + "Lorenzo_FF" + ] + }, + "Mozilla": { + "modified": "2019-03-23T23:36:49.678Z", + "contributors": [ + "ethertank", + "ziyunfei" + ] + }, + "Mozilla/Add-ons": { + "modified": "2019-09-06T07:54:41.084Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "Joe-VR", + "sara_t", + "purplewasp" + ] + }, + "Mozilla/Add-ons/WebExtensions": { + "modified": "2019-06-09T20:28:21.269Z", + "contributors": [ + "chack1172", + "ezabba", + "tommaso" + ] + }, + "Mozilla/Add-ons/WebExtensions/API": { + "modified": "2019-11-26T22:19:47.758Z", + "contributors": [ + "wbamberg" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/runtime": { + "modified": "2020-10-15T22:09:59.504Z", + "contributors": [ + "wbamberg" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/runtime/connectNative": { + "modified": "2020-10-15T22:09:56.225Z", + "contributors": [ + "wbamberg", + "mxggithub" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/search": { + "modified": "2019-03-18T21:01:55.523Z", + "contributors": [ + "ChristianPredebon" + ] + }, + "Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension": { + "modified": "2019-06-07T12:40:53.568Z", + "contributors": [ + "MarcoAGreco" + ] + }, + "Mozilla/Add-ons/WebExtensions/Cosa_sono_le_WebExtensions": { + "modified": "2019-03-18T21:03:03.594Z", + "contributors": [ + "chack1172" + ] + }, + "Mozilla/Add-ons/WebExtensions/La_tua_prima_WebExtension": { + "modified": "2019-03-18T21:03:00.548Z", + "contributors": [ + "chack1172" + ] + }, + "Mozilla/Add-ons/WebExtensions/Script_contenuto": { + "modified": "2019-06-07T12:34:39.378Z", + "contributors": [ + "MarcoAGreco" + ] + }, + "Mozilla/Add-ons/WebExtensions/user_interface": { + "modified": "2019-06-07T11:18:06.662Z", + "contributors": [ + "MarcoAGreco" + ] + }, + "Mozilla/Developer_guide": { + "modified": "2019-03-23T23:26:03.365Z", + "contributors": [ + "chrisdavidmills", + "bskari" + ] + }, + "Mozilla/Firefox": { + "modified": "2019-09-10T14:58:45.333Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "teoli", + "klez", + "paisa_82", + "Prashanth" + ] + }, + "Mozilla/Firefox/Funzionalità_sperimentali": { + "modified": "2020-07-01T10:55:50.190Z", + "contributors": [ + "Karm46" + ] + }, + "Mozilla/Firefox/Releases": { + "modified": "2019-03-23T23:26:09.968Z", + "contributors": [ + "wbamberg", + "Indil", + "ziyunfei" + ] + }, + "Mozilla/Firefox/Releases/40": { + "modified": "2019-03-23T22:55:04.255Z", + "contributors": [ + "wbamberg", + "SphinxKnight", + "Indil" + ] + }, + "Mozilla/Firefox/Releases/42": { + "modified": "2019-08-30T13:56:30.724Z", + "contributors": [ + "duduindo", + "wbamberg", + "enofx" + ] + }, + "Mozilla/Firefox/Releases/59": { + "modified": "2019-03-18T21:38:34.697Z", + "contributors": [ + "wbamberg", + "Karm46" + ] + }, + "Mozilla/Firefox/Releases/64": { + "modified": "2019-03-18T21:20:06.425Z", + "contributors": [ + "Spiritoso" + ] + }, + "Mozilla/Firefox/Releases/66": { + "modified": "2019-04-01T03:50:37.020Z", + "contributors": [ + "rcondor" + ] + }, + "Plug-in": { + "modified": "2019-03-23T23:42:05.451Z", + "contributors": [ + "teoli", + "Samuele", + "Gialloporpora" + ] + }, + "Python": { + "modified": "2019-03-23T23:07:51.453Z", + "contributors": [ + "foto-planner", + "domcorvasce" + ] + }, + "SVG": { + "modified": "2019-03-23T23:44:24.568Z", + "contributors": [ + "sangio90", + "teoli", + "janvas", + "Grino", + "ethertank", + "Verruckt", + "DaViD83", + "Federico" + ] + }, + "Sviluppo_Web": { + "modified": "2019-03-23T23:44:27.263Z", + "contributors": [ + "Leofiore" + ] + }, + "Tools": { + "modified": "2020-07-16T22:44:15.461Z", + "contributors": [ + "spinaffs", + "tGstep", + "pietro.pnt", + "costacarlo", + "SphinxKnight", + "tassoman", + "music-wedding", + "edovio", + "Ilprofeta89", + "dinoop.p1" + ] + }, + "Tools/Add-ons": { + "modified": "2020-07-16T22:36:23.403Z", + "contributors": [ + "mfluehr" + ] + }, + "Tools/Debugger": { + "modified": "2020-07-16T22:35:04.703Z", + "contributors": [ + "jzz21q", + "dany1959bo", + "MicheleRiva" + ] + }, + "Tools/Debugger/How_to": { + "modified": "2020-07-16T22:35:07.645Z", + "contributors": [ + "wbamberg" + ] + }, + "Tools/Debugger/How_to/Disable_breakpoints": { + "modified": "2020-07-16T22:35:11.331Z", + "contributors": [ + "jzz21q" + ] + }, + "Tools/Debugger/How_to/Open_the_debugger": { + "modified": "2020-07-16T22:35:09.082Z", + "contributors": [ + "jzz21q" + ] + }, + "Tools/Debugger/How_to/Set_a_breakpoint": { + "modified": "2020-07-16T22:35:10.028Z", + "contributors": [ + "jzz21q" + ] + }, + "Tools/Debugger/How_to/Set_a_conditional_breakpoint": { + "modified": "2020-07-16T22:35:10.598Z", + "contributors": [ + "jzz21q" + ] + }, + "Tools/Debugger/How_to/Step_through_code": { + "modified": "2020-07-16T22:35:11.959Z", + "contributors": [ + "jzz21q" + ] + }, + "Tools/Page_Inspector": { + "modified": "2020-07-16T22:34:28.006Z", + "contributors": [ + "MicheleRiva" + ] + }, + "Tools/Prestazioni": { + "modified": "2020-07-16T22:36:12.757Z", + "contributors": [ + "Jackerbil" + ] + }, + "Tools/Remote_Debugging": { + "modified": "2020-07-16T22:35:37.452Z", + "contributors": [ + "Mte90", + "BruVe", + "crakdelpol", + "Grilla", + "turco", + "Fulvio", + "davanzo_m" + ] + }, + "Tools/Visualizzazione_Flessibile": { + "modified": "2020-07-16T22:35:21.469Z", + "contributors": [ + "tassoman" + ] + }, + "Tools/Web_Console": { + "modified": "2020-07-16T22:34:06.052Z", + "contributors": [ + "dany1959bo", + "pino-grassi" + ] + }, + "Tools/Web_Console/Helpers": { + "modified": "2020-07-16T22:34:12.129Z", + "contributors": [ + "aki54", + "CRONOtime" + ] + }, + "Tutorial_sulle_Canvas": { + "modified": "2019-03-23T23:52:28.960Z", + "contributors": [ + "Romanzo", + "fotografi", + "Arset", + "teoli", + "Mmarco", + "Indigo", + "Fuma 90" + ] + }, + "Web": { + "modified": "2020-09-09T03:14:54.712Z", + "contributors": [ + "SphinxKnight", + "freddygovoni", + "chack1172", + "libri-nozze", + "Tommaso30", + "klez", + "Sheppy" + ] + }, + "Web/API": { + "modified": "2019-03-23T23:26:04.951Z", + "contributors": [ + "ladysilvia", + "Giuseppe37", + "teoli" + ] + }, + "Web/API/CanvasRenderingContext2D": { + "modified": "2019-03-23T22:58:10.677Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/CanvasRenderingContext2D/canvas": { + "modified": "2019-03-23T22:58:14.179Z", + "contributors": [ + "endeios" + ] + }, + "Web/API/CanvasRenderingContext2D/fillStyle": { + "modified": "2019-03-23T22:43:20.542Z", + "contributors": [ + "Sebastianz", + "teoli", + "Lucarnosky" + ] + }, + "Web/API/CanvasRenderingContext2D/isPointInPath": { + "modified": "2019-03-23T22:58:22.259Z", + "contributors": [ + "endeios" + ] + }, + "Web/API/CloseEvent": { + "modified": "2019-03-23T22:52:56.147Z", + "contributors": [ + "andreacomo" + ] + }, + "Web/API/Console": { + "modified": "2020-10-15T22:09:09.162Z", + "contributors": [ + "irenesmith" + ] + }, + "Web/API/Console/log": { + "modified": "2020-10-15T22:28:43.661Z", + "contributors": [ + "michelebergadano", + "Mystral" + ] + }, + "Web/API/Console/table": { + "modified": "2020-10-15T22:09:07.124Z", + "contributors": [ + "ilsergente1993" + ] + }, + "Web/API/Crypto": { + "modified": "2020-10-15T22:09:57.166Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/Crypto/subtle": { + "modified": "2020-10-15T22:09:56.082Z", + "contributors": [ + "mxggithub" + ] + }, + "Web/API/DOMString": { + "modified": "2019-04-24T13:38:49.925Z", + "contributors": [ + "IsibisiDev", + "giacar", + "teoli", + "brouwer89" + ] + }, + "Web/API/DOMTokenList": { + "modified": "2020-10-15T22:13:13.631Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/DOMTokenList/item": { + "modified": "2020-10-15T22:13:12.227Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/DataTransfer": { + "modified": "2019-03-23T22:31:47.478Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/API/DataTransfer/getData": { + "modified": "2019-03-23T22:31:46.435Z", + "contributors": [ + "jwhitlock", + "Quinta" + ] + }, + "Web/API/Document": { + "modified": "2019-03-23T23:44:59.920Z", + "contributors": [ + "teoli", + "Hasilt", + "Federico", + "DaViD83" + ] + }, + "Web/API/Document/URL": { + "modified": "2019-03-23T23:45:00.029Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/anchors": { + "modified": "2019-03-23T23:45:10.813Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/applets": { + "modified": "2019-03-23T23:45:10.908Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/body": { + "modified": "2020-10-15T21:18:28.305Z", + "contributors": [ + "IsibisiDev", + "teoli", + "Hasilt", + "DaViD83" + ] + }, + "Web/API/Document/characterSet": { + "modified": "2019-03-23T23:45:08.323Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/close": { + "modified": "2019-03-23T23:45:10.708Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/createElement": { + "modified": "2020-10-15T21:18:00.913Z", + "contributors": [ + "IsibisiDev", + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Document/createRange": { + "modified": "2019-03-23T23:44:59.391Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/defaultView": { + "modified": "2019-03-23T23:46:35.162Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/doctype": { + "modified": "2019-03-23T23:44:55.085Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/documentElement": { + "modified": "2020-10-15T21:18:12.835Z", + "contributors": [ + "IsibisiDev", + "teoli", + "Federico" + ] + }, + "Web/API/Document/firstChild": { + "modified": "2019-03-23T23:45:06.385Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/forms": { + "modified": "2020-10-15T21:18:07.841Z", + "contributors": [ + "IsibisiDev", + "teoli", + "Federico" + ] + }, + "Web/API/Document/getElementById": { + "modified": "2020-10-15T21:18:10.220Z", + "contributors": [ + "IsibisiDev", + "teoli", + "giuscri", + "Federico" + ] + }, + "Web/API/Document/getElementsByClassName": { + "modified": "2020-10-15T22:11:27.446Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Document/getElementsByName": { + "modified": "2020-10-15T21:18:13.142Z", + "contributors": [ + "IsibisiDev", + "teoli", + "Federico" + ] + }, + "Web/API/Document/getElementsByTagName": { + "modified": "2020-10-15T22:13:34.246Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Document/head": { + "modified": "2020-10-15T22:17:32.293Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Document/height": { + "modified": "2019-03-23T23:45:00.160Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/images": { + "modified": "2019-03-23T22:30:23.356Z", + "contributors": [ + "MicheleDomanico" + ] + }, + "Web/API/Document/importNode": { + "modified": "2019-03-23T23:44:59.500Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/lastModified": { + "modified": "2019-03-23T23:44:58.375Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/links": { + "modified": "2019-03-23T23:46:56.936Z", + "contributors": [ + "MicheleDomanico", + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Document/namespaceURI": { + "modified": "2019-03-23T23:45:08.038Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/open": { + "modified": "2019-03-23T23:46:30.372Z", + "contributors": [ + "teoli", + "Hasilt", + "Ruggi", + "Federico" + ] + }, + "Web/API/Document/querySelector": { + "modified": "2020-10-31T12:12:00.361Z", + "contributors": [ + "arj95", + "IsibisiDev", + "andrea.rizzo" + ] + }, + "Web/API/Document/querySelectorAll": { + "modified": "2020-10-15T21:34:36.853Z", + "contributors": [ + "IsibisiDev", + "Obras" + ] + }, + "Web/API/Document/referrer": { + "modified": "2019-03-23T23:44:58.474Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/styleSheets": { + "modified": "2019-03-23T23:46:31.284Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Document/title": { + "modified": "2019-03-23T23:44:54.978Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/width": { + "modified": "2019-03-23T23:44:55.977Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/write": { + "modified": "2019-03-23T23:16:28.970Z", + "contributors": [ + "teoli", + "khalid32", + "Ruggi" + ] + }, + "Web/API/Document/writeln": { + "modified": "2019-03-18T21:15:27.892Z", + "contributors": [ + "nikiink" + ] + }, + "Web/API/Document_Object_Model": { + "modified": "2019-03-23T22:07:03.870Z", + "contributors": [ + "SuperBisco" + ] + }, + "Web/API/Document_Object_Model/Introduzione": { + "modified": "2020-02-23T14:30:00.735Z", + "contributors": [ + "giacomomaccanti" + ] + }, + "Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors": { + "modified": "2019-03-18T21:19:09.556Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Element": { + "modified": "2020-10-15T21:18:34.829Z", + "contributors": [ + "IsibisiDev", + "teoli", + "AshfaqHossain", + "Joey santiago", + "DaViD83" + ] + }, + "Web/API/Element/addEventListener": { + "modified": "2020-10-15T21:07:44.354Z", + "contributors": [ + "IsibisiDev", + "akmur", + "gitact", + "vindega", + "teoli", + "khalid32", + "loris94", + "Samuele", + "DaViD83" + ] + }, + "Web/API/Element/attributes": { + "modified": "2020-10-15T21:18:26.646Z", + "contributors": [ + "IsibisiDev", + "teoli", + "khalid32", + "DaViD83" + ] + }, + "Web/API/Element/childNodes": { + "modified": "2020-10-15T21:18:25.382Z", + "contributors": [ + "IsibisiDev", + "stefanoio", + "render93", + "teoli", + "AshfaqHossain", + "DaViD83" + ] + }, + "Web/API/Element/classList": { + "modified": "2020-10-15T22:08:44.689Z", + "contributors": [ + "IsibisiDev", + "dariokf", + "LBreda" + ] + }, + "Web/API/Element/className": { + "modified": "2020-10-15T21:18:25.635Z", + "contributors": [ + "IsibisiDev", + "teoli", + "khalid32", + "DaViD83" + ] + }, + "Web/API/Element/clientHeight": { + "modified": "2019-03-23T23:41:11.695Z", + "contributors": [ + "teoli", + "khalid32", + "DaViD83" + ] + }, + "Web/API/Element/closest": { + "modified": "2020-10-15T22:17:42.551Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Element/firstChild": { + "modified": "2020-10-15T21:18:24.892Z", + "contributors": [ + "IsibisiDev", + "wbamberg", + "render93", + "teoli", + "khalid32", + "Sheppy", + "DaViD83" + ] + }, + "Web/API/Element/getAttribute": { + "modified": "2020-10-15T22:12:34.368Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Element/getElementsByTagName": { + "modified": "2020-10-15T21:27:28.006Z", + "contributors": [ + "IsibisiDev", + "teoli", + "AshfaqHossain", + "Ruggi" + ] + }, + "Web/API/Element/hasAttribute": { + "modified": "2020-10-15T22:12:28.393Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Element/hasAttributes": { + "modified": "2019-03-23T23:46:57.445Z", + "contributors": [ + "teoli", + "AshfaqHossain", + "Federico" + ] + }, + "Web/API/Element/innerHTML": { + "modified": "2020-10-15T22:10:18.880Z", + "contributors": [ + "IsibisiDev", + "SphinxKnight", + "Daniele202" + ] + }, + "Web/API/Element/insertAdjacentHTML": { + "modified": "2020-10-15T21:46:44.431Z", + "contributors": [ + "IsibisiDev", + "marcozanghi" + ] + }, + "Web/API/Element/nodeName": { + "modified": "2020-10-15T21:17:56.733Z", + "contributors": [ + "IsibisiDev", + "teoli", + "jsx", + "AshfaqHossain", + "Federico" + ] + }, + "Web/API/Element/nodeType": { + "modified": "2020-10-15T21:17:56.649Z", + "contributors": [ + "IsibisiDev", + "DavideCanton", + "teoli", + "khalid32", + "ethertank", + "Federico" + ] + }, + "Web/API/Element/nodeValue": { + "modified": "2019-03-24T00:13:06.084Z", + "contributors": [ + "teoli", + "jsx", + "dextra", + "Federico" + ] + }, + "Web/API/Element/parentNode": { + "modified": "2020-10-15T21:17:57.762Z", + "contributors": [ + "IsibisiDev", + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Element/prefix": { + "modified": "2019-03-23T23:47:01.925Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Element/querySelector": { + "modified": "2020-10-15T22:12:29.147Z", + "contributors": [ + "duduindo", + "IsibisiDev" + ] + }, + "Web/API/Element/querySelectorAll": { + "modified": "2020-10-15T22:17:35.796Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Element/removeAttribute": { + "modified": "2020-10-15T21:49:35.746Z", + "contributors": [ + "IsibisiDev", + "fbatta" + ] + }, + "Web/API/Element/requestFullScreen": { + "modified": "2019-03-23T22:30:36.693Z", + "contributors": [ + "lviggiani" + ] + }, + "Web/API/Element/scrollHeight": { + "modified": "2019-03-18T20:59:00.850Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Ruggi" + ] + }, + "Web/API/Element/scrollTop": { + "modified": "2020-10-15T22:01:45.470Z", + "contributors": [ + "IsibisiDev", + "NicolaCastellaniTB" + ] + }, + "Web/API/Element/setAttribute": { + "modified": "2020-10-15T22:12:29.114Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Element/tagName": { + "modified": "2020-10-15T21:58:39.149Z", + "contributors": [ + "IsibisiDev", + "Shabunken" + ] + }, + "Web/API/Element/textContent": { + "modified": "2020-10-15T21:17:56.553Z", + "contributors": [ + "LoSo", + "IsibisiDev", + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Element/toggleAttribute": { + "modified": "2020-10-15T22:14:01.364Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Event": { + "modified": "2019-03-23T23:46:35.054Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/altKey": { + "modified": "2019-03-23T23:46:44.336Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Event/bubbles": { + "modified": "2019-03-23T23:46:36.123Z", + "contributors": [ + "teoli", + "xuancanh", + "Federico" + ] + }, + "Web/API/Event/button": { + "modified": "2019-03-23T23:46:37.711Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/cancelable": { + "modified": "2019-03-23T23:46:38.519Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Event/charCode": { + "modified": "2019-03-23T23:46:31.812Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/ctrlKey": { + "modified": "2019-03-23T23:46:43.027Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/currentTarget": { + "modified": "2019-03-23T22:47:05.735Z", + "contributors": [ + "brakko" + ] + }, + "Web/API/Event/eventPhase": { + "modified": "2019-03-23T23:46:37.898Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/isChar": { + "modified": "2019-03-23T23:46:41.517Z", + "contributors": [ + "teoli", + "xuancanh", + "Federico" + ] + }, + "Web/API/Event/keyCode": { + "modified": "2019-03-23T23:46:33.218Z", + "contributors": [ + "teoli", + "xuancanh", + "Federico" + ] + }, + "Web/API/Event/layerX": { + "modified": "2019-03-23T23:46:44.079Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Event/layerY": { + "modified": "2019-03-23T23:46:42.670Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/metaKey": { + "modified": "2019-03-23T23:46:45.023Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/pageX": { + "modified": "2019-03-23T23:46:41.625Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Event/pageY": { + "modified": "2019-03-23T23:46:46.107Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Event/preventDefault": { + "modified": "2020-10-15T21:17:58.593Z", + "contributors": [ + "IsibisiDev", + "nicecatch", + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Event/shiftKey": { + "modified": "2019-03-23T23:46:40.291Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Event/stopPropagation": { + "modified": "2020-10-15T21:17:59.102Z", + "contributors": [ + "IsibisiDev", + "teoli", + "khalid32", + "willywongi", + "Federico" + ] + }, + "Web/API/Event/timeStamp": { + "modified": "2019-03-23T23:46:36.323Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/type": { + "modified": "2019-03-23T23:46:36.031Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/view": { + "modified": "2019-03-23T23:46:31.176Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/which": { + "modified": "2019-03-23T23:46:32.154Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Fetch_API": { + "modified": "2019-10-28T11:29:11.758Z", + "contributors": [ + "shylockness", + "rainst", + "AlessandroSanino1994" + ] + }, + "Web/API/File": { + "modified": "2020-10-15T22:30:43.460Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/API/File/Using_files_from_web_applications": { + "modified": "2020-06-12T08:46:27.721Z", + "contributors": [ + "stefanodorazio70" + ] + }, + "Web/API/Geolocation": { + "modified": "2019-03-18T21:46:55.204Z", + "contributors": [ + "robertopinotti" + ] + }, + "Web/API/Geolocation/Using_geolocation": { + "modified": "2019-03-18T21:46:47.006Z", + "contributors": [ + "robertopinotti" + ] + }, + "Web/API/Geolocation/watchPosition": { + "modified": "2019-03-18T21:46:55.440Z", + "contributors": [ + "robertopinotti" + ] + }, + "Web/API/GeolocationPosition": { + "modified": "2019-12-10T11:03:48.479Z", + "contributors": [ + "chrisdavidmills", + "robertopinotti" + ] + }, + "Web/API/GlobalEventHandlers": { + "modified": "2019-03-23T22:04:41.955Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/API/GlobalEventHandlers/onresize": { + "modified": "2019-03-23T22:04:51.035Z", + "contributors": [ + "fareilweb" + ] + }, + "Web/API/HTMLCanvasElement": { + "modified": "2019-03-23T22:27:54.708Z", + "contributors": [ + "Mathkute" + ] + }, + "Web/API/HTMLCanvasElement/toBlob": { + "modified": "2019-03-23T22:04:57.927Z", + "contributors": [ + "ssava" + ] + }, + "Web/API/HTMLCollection": { + "modified": "2020-10-15T22:11:22.825Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/HTMLCollection/item": { + "modified": "2020-10-15T22:11:26.893Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/HTMLElement": { + "modified": "2019-04-18T23:22:28.058Z", + "contributors": [ + "IsibisiDev", + "teoli", + "jsx", + "klez" + ] + }, + "Web/API/HTMLElement/offsetHeight": { + "modified": "2019-03-18T20:58:53.365Z", + "contributors": [ + "SphinxKnight", + "DLuPi", + "mautrok" + ] + }, + "Web/API/HTMLFormElement": { + "modified": "2019-03-23T23:45:13.519Z", + "contributors": [ + "teoli", + "khalid32", + "Federico", + "DaViD83" + ] + }, + "Web/API/HTMLFormElement/acceptCharset": { + "modified": "2019-03-23T23:45:06.067Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/action": { + "modified": "2019-03-23T23:45:09.260Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/elements": { + "modified": "2019-03-23T23:41:38.107Z", + "contributors": [ + "teoli", + "arunpandianp", + "DaViD83" + ] + }, + "Web/API/HTMLFormElement/enctype": { + "modified": "2019-03-23T23:45:07.772Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/length": { + "modified": "2019-03-23T23:45:12.308Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/method": { + "modified": "2019-03-23T23:45:11.223Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/name": { + "modified": "2019-03-23T23:45:05.688Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/reset": { + "modified": "2019-03-23T23:45:07.858Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/submit": { + "modified": "2019-03-23T23:45:09.078Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/target": { + "modified": "2019-03-23T23:45:12.633Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLIFrameElement": { + "modified": "2019-07-30T13:28:27.031Z", + "contributors": [ + "rainydio" + ] + }, + "Web/API/HTMLUnknownElement": { + "modified": "2020-10-15T22:17:30.215Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/IndexedDB_API": { + "modified": "2019-03-27T08:42:23.353Z", + "contributors": [ + "tommyblue", + "unziojack" + ] + }, + "Web/API/MutationObserver": { + "modified": "2020-10-15T22:10:44.906Z", + "contributors": [ + "frappacchio" + ] + }, + "Web/API/Navigator": { + "modified": "2019-03-23T23:01:39.014Z", + "contributors": [ + "wbamberg", + "teoli" + ] + }, + "Web/API/Navigator/cookieEnabled": { + "modified": "2019-03-23T23:16:26.897Z", + "contributors": [ + "teoli", + "jsx", + "Ruggi" + ] + }, + "Web/API/Navigator/credentials": { + "modified": "2020-10-15T22:09:03.582Z", + "contributors": [ + "fredmaggiowski" + ] + }, + "Web/API/NavigatorConcurrentHardware": { + "modified": "2020-10-15T22:17:43.299Z", + "contributors": [ + "music-thetale" + ] + }, + "Web/API/Node": { + "modified": "2020-10-15T22:09:53.341Z", + "contributors": [ + "ikemo" + ] + }, + "Web/API/Node/appendChild": { + "modified": "2020-10-15T22:17:30.429Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Node/lastChild": { + "modified": "2020-10-15T22:13:58.693Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Node/nextSibling": { + "modified": "2020-10-15T22:14:02.013Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Node/previousSibling": { + "modified": "2020-10-15T22:13:58.654Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/NodeList": { + "modified": "2020-10-15T22:00:23.657Z", + "contributors": [ + "IsibisiDev", + "giacar" + ] + }, + "Web/API/NodeList/forEach": { + "modified": "2020-10-15T22:19:59.717Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/ParentNode": { + "modified": "2020-10-15T22:13:14.638Z", + "contributors": [ + "ExE-Boss" + ] + }, + "Web/API/ParentNode/children": { + "modified": "2020-10-15T22:13:17.341Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/ParentNode/firstElementChild": { + "modified": "2020-10-15T22:17:20.523Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/ParentNode/lastElementChild": { + "modified": "2020-10-15T22:17:20.462Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Performance": { + "modified": "2020-10-15T22:10:46.200Z", + "contributors": [ + "fscholz", + "frappacchio" + ] + }, + "Web/API/Performance/now": { + "modified": "2020-10-15T22:13:16.615Z", + "contributors": [ + "Rufis01" + ] + }, + "Web/API/Range": { + "modified": "2019-03-23T23:45:07.167Z", + "contributors": [ + "teoli", + "soumya", + "Federico", + "Todarogiovanni", + "DaViD83" + ] + }, + "Web/API/Range/cloneContents": { + "modified": "2019-03-23T23:46:37.810Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Range/cloneRange": { + "modified": "2019-03-23T23:44:58.754Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/collapse": { + "modified": "2019-03-23T23:44:56.406Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/collapsed": { + "modified": "2019-03-23T23:44:55.708Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/commonAncestorContainer": { + "modified": "2019-03-23T23:45:00.555Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/compareBoundaryPoints": { + "modified": "2019-03-23T23:45:00.370Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/comparePoint": { + "modified": "2019-03-23T23:45:06.170Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/createContextualFragment": { + "modified": "2019-03-23T23:45:13.109Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/deleteContents": { + "modified": "2019-03-23T23:46:37.314Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Range/detach": { + "modified": "2019-03-23T23:44:57.076Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/endContainer": { + "modified": "2019-03-23T23:45:00.639Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/endOffset": { + "modified": "2019-03-23T23:45:03.942Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/extractContents": { + "modified": "2019-03-23T23:46:35.754Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Range/insertNode": { + "modified": "2019-03-23T23:46:35.932Z", + "contributors": [ + "teoli", + "arunpandianp", + "Federico" + ] + }, + "Web/API/Range/isPointInRange": { + "modified": "2019-03-23T23:45:10.129Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/selectNode": { + "modified": "2019-03-23T23:44:57.862Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/selectNodeContents": { + "modified": "2019-03-23T23:44:56.541Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/setEnd": { + "modified": "2019-03-23T23:45:00.267Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/setEndAfter": { + "modified": "2019-03-23T23:44:55.536Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/setEndBefore": { + "modified": "2019-03-23T23:45:00.463Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/setStart": { + "modified": "2019-03-23T23:42:37.319Z", + "contributors": [ + "teoli", + "Todarogiovanni" + ] + }, + "Web/API/Range/setStartAfter": { + "modified": "2019-03-23T23:45:02.951Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/setStartBefore": { + "modified": "2019-03-23T23:45:04.772Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/startContainer": { + "modified": "2019-03-23T23:45:05.282Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/startOffset": { + "modified": "2019-03-23T23:45:12.949Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/surroundContents": { + "modified": "2019-03-23T23:46:34.486Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Range/toString": { + "modified": "2019-03-23T23:45:04.241Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Selection": { + "modified": "2019-03-23T23:46:46.823Z", + "contributors": [ + "nicokant", + "teoli", + "khalid32", + "DR", + "Federico", + "DaViD83" + ] + }, + "Web/API/Selection/addRange": { + "modified": "2019-03-23T23:46:48.819Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Selection/anchorNode": { + "modified": "2019-03-23T23:46:46.999Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Selection/anchorOffset": { + "modified": "2019-03-23T23:46:54.697Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Selection/collapse": { + "modified": "2019-03-23T23:47:02.507Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Selection/collapseToEnd": { + "modified": "2019-03-23T23:46:50.665Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Selection/collapseToStart": { + "modified": "2019-01-16T16:00:26.825Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Selection/containsNode": { + "modified": "2019-03-23T23:46:48.446Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Selection/deleteFromDocument": { + "modified": "2019-03-23T23:46:53.555Z", + "contributors": [ + "teoli", + "AshfaqHossain", + "basemnassar11", + "Federico" + ] + }, + "Web/API/Selection/extend": { + "modified": "2019-03-23T23:46:53.275Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Selection/focusNode": { + "modified": "2019-03-23T23:46:46.664Z", + "contributors": [ + "teoli", + "jsx", + "DR", + "Federico" + ] + }, + "Web/API/Selection/focusOffset": { + "modified": "2019-03-23T23:46:53.044Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Selection/getRangeAt": { + "modified": "2019-03-23T23:44:56.321Z", + "contributors": [ + "teoli", + "Ruggi", + "Federico" + ] + }, + "Web/API/Selection/isCollapsed": { + "modified": "2019-03-23T23:46:54.286Z", + "contributors": [ + "teoli", + "khalid32", + "DR", + "Federico" + ] + }, + "Web/API/Selection/rangeCount": { + "modified": "2019-03-23T23:46:54.197Z", + "contributors": [ + "teoli", + "jsx", + "DR", + "Federico" + ] + }, + "Web/API/Selection/removeAllRanges": { + "modified": "2019-03-23T23:46:51.490Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Selection/removeRange": { + "modified": "2019-03-23T23:46:52.407Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Selection/selectAllChildren": { + "modified": "2019-03-23T23:46:50.989Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Selection/toString": { + "modified": "2019-03-23T23:46:47.771Z", + "contributors": [ + "teoli", + "khalid32", + "DR", + "Federico" + ] + }, + "Web/API/Storage": { + "modified": "2019-09-20T06:23:52.261Z", + "contributors": [ + "sturmer" + ] + }, + "Web/API/Storage/clear": { + "modified": "2019-03-23T22:08:34.106Z", + "contributors": [ + "matteolongo" + ] + }, + "Web/API/Storage/getItem": { + "modified": "2019-03-23T22:07:28.911Z", + "contributors": [ + "azanatta" + ] + }, + "Web/API/Storage/setItem": { + "modified": "2019-09-20T06:22:40.087Z", + "contributors": [ + "sharq", + "nandowalter", + "robertopinotti" + ] + }, + "Web/API/URLUtils": { + "modified": "2019-03-23T23:01:38.757Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/WebGL_API": { + "modified": "2020-10-15T22:34:13.570Z", + "contributors": [ + "robertsillo" + ] + }, + "Web/API/WebSocket": { + "modified": "2020-10-15T22:21:40.095Z", + "contributors": [ + "sideshowbarker" + ] + }, + "Web/API/WebSocket/WebSocket": { + "modified": "2019-08-01T02:54:10.157Z", + "contributors": [ + "SphinxKnight", + "shintakawa" + ] + }, + "Web/API/Window": { + "modified": "2019-03-23T23:41:37.229Z", + "contributors": [ + "lvzndr", + "teoli", + "khalid32", + "DaViD83" + ] + }, + "Web/API/Window/alert": { + "modified": "2019-03-23T23:45:07.588Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/back": { + "modified": "2019-03-23T23:44:59.600Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/blur": { + "modified": "2019-03-23T23:45:10.222Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/close": { + "modified": "2020-10-15T21:41:40.994Z", + "contributors": [ + "SphinxKnight", + "luigi.quarta" + ] + }, + "Web/API/Window/closed": { + "modified": "2019-03-23T23:45:06.616Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/confirm": { + "modified": "2020-09-16T06:37:39.424Z", + "contributors": [ + "DarioSacco", + "teoli", + "Federico" + ] + }, + "Web/API/Window/crypto": { + "modified": "2019-03-23T22:40:34.995Z", + "contributors": [ + "luigi.quarta" + ] + }, + "Web/API/Window/defaultstatus": { + "modified": "2019-03-23T23:45:05.869Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/devicemotion_event": { + "modified": "2019-04-11T18:36:04.208Z", + "contributors": [ + "estelle", + "fscholz", + "ExplosiveLab" + ] + }, + "Web/API/Window/document": { + "modified": "2019-03-23T23:45:06.723Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/focus": { + "modified": "2019-03-23T23:45:07.264Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/forward": { + "modified": "2019-03-23T23:45:08.676Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/getSelection": { + "modified": "2019-03-23T23:46:39.366Z", + "contributors": [ + "jsx", + "teoli", + "mimzi_fahia", + "Ruggi", + "Federico" + ] + }, + "Web/API/Window/history": { + "modified": "2019-03-23T23:45:08.885Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/home": { + "modified": "2019-03-23T23:44:57.169Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/localStorage": { + "modified": "2019-05-08T11:23:19.757Z", + "contributors": [ + "farturi", + "Taletex", + "Peppuz" + ] + }, + "Web/API/Window/locationbar": { + "modified": "2019-03-23T23:45:08.987Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/matchMedia": { + "modified": "2019-03-23T22:56:20.018Z", + "contributors": [ + "giancarlo" + ] + }, + "Web/API/Window/moveBy": { + "modified": "2019-03-23T23:45:06.833Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/moveTo": { + "modified": "2019-03-23T23:45:08.786Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/name": { + "modified": "2019-03-23T23:44:57.275Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/onuserproximity": { + "modified": "2020-10-15T22:13:21.435Z", + "contributors": [ + "cam0347" + ] + }, + "Web/API/Window/opener": { + "modified": "2019-03-23T23:45:05.974Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/orientationchange_event": { + "modified": "2019-04-02T12:01:28.415Z", + "contributors": [ + "fscholz", + "afalchi82" + ] + }, + "Web/API/Window/print": { + "modified": "2019-03-23T23:44:55.181Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/prompt": { + "modified": "2019-03-23T23:45:08.519Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/requestAnimationFrame": { + "modified": "2020-10-15T22:10:48.306Z", + "contributors": [ + "frappacchio" + ] + }, + "Web/API/Window/resizeBy": { + "modified": "2019-03-23T23:45:09.646Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/resizeTo": { + "modified": "2019-03-23T23:45:06.497Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/sessionStorage": { + "modified": "2019-03-18T21:10:48.383Z", + "contributors": [ + "sharq", + "bwlt", + "ale-rt", + "Belio" + ] + }, + "Web/API/Window/sidebar": { + "modified": "2019-03-23T22:02:58.914Z", + "contributors": [ + "IsaacSchemm" + ] + }, + "Web/API/Window/sizeToContent": { + "modified": "2019-03-23T23:45:12.715Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/status": { + "modified": "2019-03-23T23:45:05.405Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/statusbar": { + "modified": "2019-03-23T23:45:11.669Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/stop": { + "modified": "2019-03-23T23:45:04.684Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/top": { + "modified": "2019-03-23T22:56:44.582Z", + "contributors": [ + "brakko" + ] + }, + "Web/API/WindowOrWorkerGlobalScope": { + "modified": "2020-10-15T22:04:42.998Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/WindowOrWorkerGlobalScope/fetch": { + "modified": "2020-10-15T22:04:43.287Z", + "contributors": [ + "iruy" + ] + }, + "Web/API/WindowTimers": { + "modified": "2019-03-23T22:33:10.851Z", + "contributors": [ + "aragacalledpat" + ] + }, + "Web/API/WindowTimers/clearInterval": { + "modified": "2019-03-23T22:33:02.364Z", + "contributors": [ + "lorenzopieri" + ] + }, + "Web/API/Worker": { + "modified": "2020-10-15T22:05:05.715Z", + "contributors": [ + "rainst" + ] + }, + "Web/API/XMLHttpRequest": { + "modified": "2020-10-15T21:18:25.293Z", + "contributors": [ + "fscholz", + "ivorykeys", + "teoli", + "ethertank", + "Federico" + ] + }, + "Web/API/XMLHttpRequest/Usare_XMLHttpRequest": { + "modified": "2019-09-22T07:49:44.300Z", + "contributors": [ + "chkrr00k", + "valerio-bozzolan", + "teoli", + "Andrea_Barghigiani" + ] + }, + "Web/API/XMLHttpRequest/XMLHttpRequest": { + "modified": "2020-01-22T12:40:19.899Z", + "contributors": [ + "sock-et" + ] + }, + "Web/API/XMLHttpRequest/onreadystatechange": { + "modified": "2019-03-23T22:11:52.690Z", + "contributors": [ + "fedebamba" + ] + }, + "Web/API/XMLHttpRequest/open": { + "modified": "2019-03-18T21:39:53.888Z", + "contributors": [ + "valerio-bozzolan" + ] + }, + "Web/API/XMLHttpRequest/readyState": { + "modified": "2019-03-18T21:17:26.042Z", + "contributors": [ + "fedebamba" + ] + }, + "Web/API/notifiche": { + "modified": "2019-03-18T20:57:39.827Z", + "contributors": [ + "francymin", + "Mascare" + ] + }, + "Web/API/notifiche/dir": { + "modified": "2020-10-15T22:17:29.488Z", + "contributors": [ + "Belingheri" + ] + }, + "Web/Accessibility": { + "modified": "2019-09-09T14:13:55.035Z", + "contributors": [ + "SphinxKnight", + "mipo", + "PyQio", + "klez" + ] + }, + "Web/Accessibility/Sviluppo_Web": { + "modified": "2019-03-23T23:18:40.805Z", + "contributors": [ + "klez" + ] + }, + "Web/CSS": { + "modified": "2020-01-15T05:51:31.675Z", + "contributors": [ + "Pardoz", + "SphinxKnight", + "massic80", + "sginestrini", + "teoli", + "jmc", + "Grino", + "ethertank", + "Federico", + "bradipao", + "Indigo", + "DaViD83" + ] + }, + "Web/CSS/-moz-font-language-override": { + "modified": "2019-03-23T23:28:40.117Z", + "contributors": [ + "teoli", + "lboy" + ] + }, + "Web/CSS/-webkit-overflow-scrolling": { + "modified": "2020-10-15T22:09:13.015Z", + "contributors": [ + "zeroerrequattro" + ] + }, + "Web/CSS/:-moz-first-node": { + "modified": "2019-03-23T23:48:44.707Z", + "contributors": [ + "teoli", + "Zibibbo84" + ] + }, + "Web/CSS/:-moz-last-node": { + "modified": "2019-03-23T23:48:40.245Z", + "contributors": [ + "teoli", + "Zibibbo84" + ] + }, + "Web/CSS/:-moz-list-bullet": { + "modified": "2019-03-23T23:48:40.552Z", + "contributors": [ + "teoli", + "Zibibbo84" + ] + }, + "Web/CSS/::selection": { + "modified": "2019-03-23T22:13:07.331Z", + "contributors": [ + "Winni-", + "Swear" + ] + }, + "Web/CSS/:active": { + "modified": "2020-10-15T22:29:19.196Z", + "contributors": [ + "Pardoz" + ] + }, + "Web/CSS/:focus": { + "modified": "2020-10-15T22:29:43.751Z", + "contributors": [ + "Pardoz" + ] + }, + "Web/CSS/:hover": { + "modified": "2020-10-15T22:29:45.329Z", + "contributors": [ + "Pardoz" + ] + }, + "Web/CSS/@document": { + "modified": "2019-03-23T23:48:44.142Z", + "contributors": [ + "teoli", + "Zibibbo84" + ] + }, + "Web/CSS/Attribute_selectors": { + "modified": "2020-10-15T22:29:45.918Z", + "contributors": [ + "Pardoz" + ] + }, + "Web/CSS/CSS_Box_Model": { + "modified": "2019-03-23T22:05:15.030Z", + "contributors": [ + "mfluehr" + ] + }, + "Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model": { + "modified": "2019-03-23T22:05:16.040Z", + "contributors": [ + "mipo" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout": { + "modified": "2019-03-18T21:16:43.477Z", + "contributors": [ + "teoli" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes": { + "modified": "2019-03-18T20:58:13.071Z", + "contributors": [ + "KadirTopal", + "ATrogolo", + "fscholz", + "Renatvs88" + ] + }, + "Web/CSS/CSS_Positioning": { + "modified": "2020-05-29T22:27:05.116Z" + }, + "Web/CSS/CSS_Positioning/Understanding_z_index": { + "modified": "2020-05-29T22:27:05.339Z" + }, + "Web/CSS/Cascade": { + "modified": "2019-03-18T21:16:55.672Z", + "contributors": [ + "itektopdesigner" + ] + }, + "Web/CSS/Guida_di_riferimento_ai_CSS": { + "modified": "2020-04-22T10:36:23.257Z", + "contributors": [ + "xplosionmind", + "Pardoz", + "teoli", + "tregagnon", + "Federico" + ] + }, + "Web/CSS/Media_Queries": { + "modified": "2019-03-23T22:04:20.173Z", + "contributors": [ + "mipo" + ] + }, + "Web/CSS/Mozilla_Extensions": { + "modified": "2019-03-23T23:48:43.276Z", + "contributors": [ + "teoli", + "Zibibbo84" + ] + }, + "Web/CSS/Pseudo-classes": { + "modified": "2020-05-10T13:50:36.157Z", + "contributors": [ + "Pardoz" + ] + }, + "Web/CSS/Ricette_layout": { + "modified": "2019-03-18T21:23:52.893Z", + "contributors": [ + "Yoekkul" + ] + }, + "Web/CSS/Type_selectors": { + "modified": "2020-10-15T22:29:37.496Z", + "contributors": [ + "Pardoz" + ] + }, + "Web/CSS/Universal_selectors": { + "modified": "2020-10-15T22:29:42.104Z", + "contributors": [ + "Pardoz" + ] + }, + "Web/CSS/background": { + "modified": "2019-03-24T00:08:46.545Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Yuichiro", + "Federico" + ] + }, + "Web/CSS/background-attachment": { + "modified": "2019-03-23T23:53:59.091Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Federico" + ] + }, + "Web/CSS/background-color": { + "modified": "2019-03-23T23:28:12.389Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Yuichiro", + "Federico" + ] + }, + "Web/CSS/background-image": { + "modified": "2019-03-23T23:18:31.669Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Federico" + ] + }, + "Web/CSS/background-position": { + "modified": "2019-03-24T00:00:19.111Z", + "contributors": [ + "massic80", + "teoli", + "pbrenna" + ] + }, + "Web/CSS/background-repeat": { + "modified": "2019-03-24T00:00:20.041Z", + "contributors": [ + "SphinxKnight", + "teoli", + "pbrenna" + ] + }, + "Web/CSS/border": { + "modified": "2019-03-24T00:00:20.561Z", + "contributors": [ + "teoli", + "pbrenna" + ] + }, + "Web/CSS/border-bottom": { + "modified": "2019-03-24T00:00:16.438Z", + "contributors": [ + "teoli", + "pbrenna" + ] + }, + "Web/CSS/border-style": { + "modified": "2020-10-15T21:55:36.905Z", + "contributors": [ + "Pardoz", + "fscholz", + "SerenaG" + ] + }, + "Web/CSS/color": { + "modified": "2019-03-24T00:00:19.477Z", + "contributors": [ + "teoli", + "pbrenna" + ] + }, + "Web/CSS/cursor": { + "modified": "2019-03-23T23:12:03.465Z", + "contributors": [ + "mrstork", + "Sebastianz", + "teoli", + "claudepache" + ] + }, + "Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor": { + "modified": "2019-03-23T23:43:56.513Z", + "contributors": [ + "teoli", + "Leofiore" + ] + }, + "Web/CSS/flex": { + "modified": "2019-03-23T22:48:31.643Z", + "contributors": [ + "Sebastianz", + "Renatvs88" + ] + }, + "Web/CSS/flex-shrink": { + "modified": "2020-10-15T22:16:46.816Z", + "contributors": [ + "lmacchiavelli" + ] + }, + "Web/CSS/font-size-adjust": { + "modified": "2020-10-15T22:14:51.320Z", + "contributors": [ + "enzo4d" + ] + }, + "Web/CSS/min-width": { + "modified": "2019-03-23T22:01:46.505Z", + "contributors": [ + "sedetiam" + ] + }, + "Web/CSS/object-fit": { + "modified": "2020-10-15T22:30:51.713Z", + "contributors": [ + "arturu" + ] + }, + "Web/CSS/selettore_figli_diretti": { + "modified": "2019-03-23T22:33:41.612Z", + "contributors": [ + "ExplosiveLab" + ] + }, + "Web/CSS/text-align": { + "modified": "2019-03-23T23:54:00.082Z", + "contributors": [ + "SaverioITA", + "teoli", + "Federico" + ] + }, + "Web/CSS/text-shadow": { + "modified": "2019-03-24T00:00:17.112Z", + "contributors": [ + "teoli", + "pbrenna" + ] + }, + "Web/CSS/transition-timing-function": { + "modified": "2019-03-23T23:17:45.018Z", + "contributors": [ + "mrstork", + "fscholz", + "Sebastianz", + "teoli", + "Andrea_Barghigiani" + ] + }, + "Web/CSS/word-break": { + "modified": "2019-03-23T22:40:10.489Z", + "contributors": [ + "teoli", + "fscholz", + "Sebastianz", + "klez" + ] + }, + "Web/CSS/z-index": { + "modified": "2020-10-24T21:54:43.421Z", + "contributors": [ + "p3k1n0", + "duduindo", + "tallaGitHub" + ] + }, + "Web/Esempi_di_tecnologie_web_open": { + "modified": "2019-03-23T22:06:33.966Z", + "contributors": [ + "siron94" + ] + }, + "Web/Events": { + "modified": "2019-04-30T14:19:44.404Z", + "contributors": [ + "wbamberg", + "bep" + ] + }, + "Web/Events/DOMContentLoaded": { + "modified": "2020-10-15T22:04:24.853Z", + "contributors": [ + "IsibisiDev", + "wbamberg", + "bolste" + ] + }, + "Web/Events/load": { + "modified": "2019-04-30T14:10:24.678Z", + "contributors": [ + "wbamberg", + "IsibisiDev", + "sickDevelopers", + "fscholz", + "lucamemma" + ] + }, + "Web/Guide": { + "modified": "2019-03-23T23:29:02.031Z", + "contributors": [ + "andrealeone", + "ethertank" + ] + }, + "Web/Guide/AJAX": { + "modified": "2019-01-16T15:41:57.982Z", + "contributors": [ + "chrisdavidmills", + "Summit677", + "DaViD83", + "Federico" + ] + }, + "Web/Guide/AJAX/Iniziare": { + "modified": "2019-03-23T23:41:32.850Z", + "contributors": [ + "chrisdavidmills", + "Mattia_Zanella", + "Federico" + ] + }, + "Web/Guide/API": { + "modified": "2019-09-11T09:42:07.898Z", + "contributors": [ + "SphinxKnight", + "Sheppy" + ] + }, + "Web/Guide/CSS": { + "modified": "2019-03-23T23:29:02.257Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/Guide/Graphics": { + "modified": "2019-03-23T22:54:59.847Z", + "contributors": [ + "robertsillo", + "Swear", + "Turkish", + "arc551" + ] + }, + "Web/Guide/HTML/Categorie_di_contenuto": { + "modified": "2019-03-23T23:34:44.540Z", + "contributors": [ + "Sebastianz", + "Ella", + "nicolo-ribaudo", + "teoli", + "Nicola_D" + ] + }, + "Web/Guide/HTML/Editable_content": { + "modified": "2019-03-23T22:02:08.397Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla": { + "modified": "2019-03-18T20:59:06.217Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "khela" + ] + }, + "Web/Guide/WOFF": { + "modified": "2019-03-23T23:19:16.066Z", + "contributors": [ + "fscholz", + "klez" + ] + }, + "Web/HTML": { + "modified": "2019-08-30T09:49:56.780Z", + "contributors": [ + "TastefullElm548", + "chack1172", + "TataBlack", + "artistics-weddings", + "Alessandro947", + "franzfonta", + "Renatvs88", + "teoli", + "klez", + "Grino", + "ethertank", + "DavidWalsh", + "Federico", + "DaViD83" + ] + }, + "Web/HTML/Attributi": { + "modified": "2019-03-23T23:34:35.010Z", + "contributors": [ + "teoli", + "Nicola_D" + ] + }, + "Web/HTML/Canvas": { + "modified": "2019-09-27T19:03:03.922Z", + "contributors": [ + "NeckersBOX", + "nataz77", + "teoli", + "Grino", + "mck89" + ] + }, + "Web/HTML/Canvas/Drawing_graphics_with_canvas": { + "modified": "2019-03-23T23:15:33.594Z", + "contributors": [ + "teoli", + "MrNow" + ] + }, + "Web/HTML/Element": { + "modified": "2019-03-23T23:34:47.626Z", + "contributors": [ + "rudijuri", + "howilearn", + "nicolo-ribaudo", + "teoli", + "Nicola_D" + ] + }, + "Web/HTML/Element/a": { + "modified": "2019-03-23T23:34:44.333Z", + "contributors": [ + "DLuPi", + "cirelli94", + "nicolo-ribaudo", + "Renatvs88", + "teoli", + "Nicola_D" + ] + }, + "Web/HTML/Element/abbr": { + "modified": "2019-03-23T23:34:43.129Z", + "contributors": [ + "nicolo-ribaudo", + "fscholz", + "Renatvs88", + "teoli", + "Nicola_D" + ] + }, + "Web/HTML/Element/acronym": { + "modified": "2019-03-23T22:52:54.493Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/address": { + "modified": "2019-03-23T23:34:43.331Z", + "contributors": [ + "Renatvs88", + "teoli", + "klez", + "Nicola_D" + ] + }, + "Web/HTML/Element/applet": { + "modified": "2019-03-23T22:52:59.900Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/area": { + "modified": "2019-03-23T23:34:45.225Z", + "contributors": [ + "nicolo-ribaudo", + "teoli", + "Nicola_D" + ] + }, + "Web/HTML/Element/article": { + "modified": "2019-03-23T23:20:55.754Z", + "contributors": [ + "wbamberg", + "nicolo-ribaudo", + "Renatvs88", + "klez", + "teoli" + ] + }, + "Web/HTML/Element/aside": { + "modified": "2019-03-23T22:58:05.936Z", + "contributors": [ + "wbamberg", + "ncalca", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/audio": { + "modified": "2019-03-23T22:53:14.617Z", + "contributors": [ + "wbamberg", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/b": { + "modified": "2019-03-23T22:52:54.303Z", + "contributors": [ + "massic80", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/base": { + "modified": "2019-03-23T22:52:58.579Z", + "contributors": [ + "graziastracquadanio", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/basefont": { + "modified": "2019-03-23T22:52:59.624Z", + "contributors": [ + "fscholz", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/bdi": { + "modified": "2019-03-23T22:52:59.332Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/bdo": { + "modified": "2019-03-23T22:52:46.554Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/bgsound": { + "modified": "2019-03-23T22:52:45.882Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/big": { + "modified": "2019-03-23T22:52:46.708Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/blink": { + "modified": "2019-05-31T07:12:45.159Z", + "contributors": [ + "f4nu", + "altermetax", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/blockquote": { + "modified": "2019-03-23T22:52:46.389Z", + "contributors": [ + "lucadebort", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/body": { + "modified": "2020-04-11T18:37:21.227Z", + "contributors": [ + "MitchDLincoln", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/br": { + "modified": "2019-03-23T22:52:45.021Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/canvas": { + "modified": "2019-03-23T22:46:16.907Z", + "contributors": [ + "s3lvatico", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/caption": { + "modified": "2019-09-25T06:39:36.826Z", + "contributors": [ + "FrancescoLucia", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/center": { + "modified": "2020-07-28T11:41:08.194Z", + "contributors": [ + "DarioSacco", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/div": { + "modified": "2020-10-15T22:01:21.748Z", + "contributors": [ + "chack1172", + "Enrico_Polanski" + ] + }, + "Web/HTML/Element/figura": { + "modified": "2020-10-15T22:23:23.465Z", + "contributors": [ + "NeckersBOX" + ] + }, + "Web/HTML/Element/footer": { + "modified": "2019-03-23T22:58:06.411Z", + "contributors": [ + "Gianlucamonaco", + "FedericoBiccheddu", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/head": { + "modified": "2020-10-15T21:34:29.566Z", + "contributors": [ + "gnardell", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/header": { + "modified": "2019-03-23T22:58:06.108Z", + "contributors": [ + "wbamberg", + "massimilianomarini", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/hgroup": { + "modified": "2019-03-23T22:58:08.873Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/html": { + "modified": "2020-10-15T21:27:37.448Z", + "contributors": [ + "gnardell", + "teoli", + "klez" + ] + }, + "Web/HTML/Element/i": { + "modified": "2020-10-15T22:04:36.939Z", + "contributors": [ + "SphinxKnight", + "chiabgigi", + "rudijuri" + ] + }, + "Web/HTML/Element/iframe": { + "modified": "2019-06-14T10:56:59.315Z", + "contributors": [ + "deviloper", + "wbamberg", + "salvan13", + "mikspi" + ] + }, + "Web/HTML/Element/img": { + "modified": "2020-10-29T11:49:17.786Z", + "contributors": [ + "massic80" + ] + }, + "Web/HTML/Element/input": { + "modified": "2020-10-15T22:23:23.775Z", + "contributors": [ + "mfuji09" + ] + }, + "Web/HTML/Element/input/file": { + "modified": "2020-10-15T22:30:37.009Z", + "contributors": [ + "layerZer0" + ] + }, + "Web/HTML/Element/kbd": { + "modified": "2019-03-23T22:16:33.974Z", + "contributors": [ + "eineki" + ] + }, + "Web/HTML/Element/main": { + "modified": "2019-03-23T23:11:38.417Z", + "contributors": [ + "equinusocio", + "vindega", + "mek" + ] + }, + "Web/HTML/Element/nav": { + "modified": "2019-03-23T23:10:34.959Z", + "contributors": [ + "wbamberg", + "nicolo-ribaudo", + "Emanuel" + ] + }, + "Web/HTML/Element/output": { + "modified": "2019-03-23T23:16:27.188Z", + "contributors": [ + "wbamberg", + "Arset", + "teoli", + "Ruggi" + ] + }, + "Web/HTML/Element/p": { + "modified": "2020-10-15T22:00:58.430Z", + "contributors": [ + "SphinxKnight", + "ScardracS", + "IsibisiDev", + "giacar" + ] + }, + "Web/HTML/Element/section": { + "modified": "2019-03-23T23:20:55.591Z", + "contributors": [ + "wbamberg", + "nicolo-ribaudo", + "teoli", + "klez" + ] + }, + "Web/HTML/Element/span": { + "modified": "2020-10-15T22:13:46.509Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/HTML/Element/strike": { + "modified": "2019-03-23T23:09:59.392Z", + "contributors": [ + "Astio_k", + "Viridovix" + ] + }, + "Web/HTML/Element/table": { + "modified": "2019-03-23T22:53:24.772Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/time": { + "modified": "2019-03-23T23:17:48.369Z", + "contributors": [ + "teoli", + "Angoo" + ] + }, + "Web/HTML/Element/title": { + "modified": "2019-03-23T22:57:58.557Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Forms_in_HTML": { + "modified": "2019-03-23T23:29:43.061Z", + "contributors": [ + "teoli", + "Giona" + ] + }, + "Web/HTML/Global_attributes": { + "modified": "2019-03-23T23:16:28.665Z", + "contributors": [ + "teoli", + "Ruggi" + ] + }, + "Web/HTML/Global_attributes/id": { + "modified": "2019-03-23T22:06:38.062Z", + "contributors": [ + "sambuccid" + ] + }, + "Web/HTML/HTML5": { + "modified": "2019-03-23T23:35:35.217Z", + "contributors": [ + "artistics-weddings", + "teoli", + "bertuz83", + "Giona", + "Mattei", + "Grino" + ] + }, + "Web/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-23T23:29:36.115Z", + "contributors": [ + "teoli", + "bertuz", + "Giona" + ] + }, + "Web/HTML/Riferimento": { + "modified": "2019-09-09T07:18:46.738Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "LoSo" + ] + }, + "Web/HTML/Sections_and_Outlines_of_an_HTML5_document": { + "modified": "2019-03-23T23:29:51.242Z", + "contributors": [ + "teoli", + "Giona" + ] + }, + "Web/HTML/utilizzare_application_cache": { + "modified": "2019-03-23T23:28:46.240Z", + "contributors": [ + "Carlo-Effe", + "g4b0", + "teoli", + "pastorello" + ] + }, + "Web/HTTP": { + "modified": "2019-03-18T21:00:54.655Z", + "contributors": [ + "Mystral", + "groovecoder" + ] + }, + "Web/HTTP/Authentication": { + "modified": "2020-11-30T09:16:11.222Z", + "contributors": [ + "klediceliku16", + "meogrande" + ] + }, + "Web/HTTP/Basi_HTTP": { + "modified": "2020-11-30T09:32:11.577Z", + "contributors": [ + "MatteoZxy", + "giuseppe.librandi02" + ] + }, + "Web/HTTP/CORS": { + "modified": "2020-10-15T22:09:12.111Z", + "contributors": [ + "theborgh", + "PaolinoAngeletti", + "serafinomb", + "gabriele.bernuzzi" + ] + }, + "Web/HTTP/CORS/Errors": { + "modified": "2019-03-18T21:23:26.317Z", + "contributors": [ + "nchevobbe" + ] + }, + "Web/HTTP/CORS/Errors/CORSDidNotSucceed": { + "modified": "2020-01-08T06:39:41.776Z", + "contributors": [ + "Mte90", + "sf3ris" + ] + }, + "Web/HTTP/CORS/Errors/CORSMissingAllowOrigin": { + "modified": "2019-03-18T21:23:21.324Z", + "contributors": [ + "Marsangola" + ] + }, + "Web/HTTP/Caching": { + "modified": "2020-12-05T07:45:06.792Z", + "contributors": [ + "Wilkenfeld" + ] + }, + "Web/HTTP/Compressione": { + "modified": "2020-11-30T09:31:19.301Z", + "contributors": [ + "davide.martinelli13", + "lucathetiger96.96", + "SphinxKnight" + ] + }, + "Web/HTTP/Conditional_requests": { + "modified": "2020-12-05T07:29:03.909Z", + "contributors": [ + "alessiogasparini02", + "pietro.voltarel" + ] + }, + "Web/HTTP/Cookies": { + "modified": "2019-03-18T21:30:36.615Z", + "contributors": [ + "edoardopa", + "meliot" + ] + }, + "Web/HTTP/Feature_Policy": { + "modified": "2020-11-30T11:38:06.042Z", + "contributors": [ + "pastrochristian", + "tommaso_biadene" + ] + }, + "Web/HTTP/Headers": { + "modified": "2019-03-23T22:06:50.529Z", + "contributors": [ + "Naesten" + ] + }, + "Web/HTTP/Headers/Age": { + "modified": "2020-10-15T21:59:33.765Z", + "contributors": [ + "andreapernici" + ] + }, + "Web/HTTP/Headers/Authorization": { + "modified": "2019-08-30T13:21:19.490Z", + "contributors": [ + "duduindo", + "sginestrini" + ] + }, + "Web/HTTP/Headers/Cookie": { + "modified": "2020-10-15T22:19:54.288Z", + "contributors": [ + "cobyan" + ] + }, + "Web/HTTP/Headers/Host": { + "modified": "2020-10-15T22:29:02.963Z", + "contributors": [ + "AndrewKant-ML" + ] + }, + "Web/HTTP/Headers/Server": { + "modified": "2020-10-15T22:06:39.131Z", + "contributors": [ + "lucat92" + ] + }, + "Web/HTTP/Headers/Strict-Transport-Security": { + "modified": "2020-10-15T21:56:41.041Z", + "contributors": [ + "diego-betto", + "AlessiaMichelaDiCampi", + "meliot" + ] + }, + "Web/HTTP/Headers/X-Content-Type-Options": { + "modified": "2020-10-15T22:22:02.861Z", + "contributors": [ + "AlessiaMichelaDiCampi", + "FabrizioMontanari" + ] + }, + "Web/HTTP/Headers/X-XSS-Protection": { + "modified": "2020-10-15T22:07:15.256Z", + "contributors": [ + "meliot" + ] + }, + "Web/HTTP/Panoramica": { + "modified": "2020-11-08T15:52:52.082Z", + "contributors": [ + "meogrande", + "abatti" + ] + }, + "Web/HTTP/Protocol_upgrade_mechanism": { + "modified": "2020-11-30T09:35:43.369Z", + "contributors": [ + "SphinxKnight", + "Bilal", + "edoardobortoluzzi" + ] + }, + "Web/HTTP/Redirections": { + "modified": "2020-11-28T07:25:14.464Z", + "contributors": [ + "jottojotto888", + "keiram.x101", + "alessiogasparini02" + ] + }, + "Web/HTTP/Resources_and_specifications": { + "modified": "2020-11-30T09:28:26.417Z", + "contributors": [ + "EnricoDant3" + ] + }, + "Web/HTTP/Richieste_range": { + "modified": "2019-08-03T05:17:24.435Z", + "contributors": [ + "theborgh" + ] + }, + "Web/HTTP/Sessione": { + "modified": "2020-11-29T21:39:50.877Z", + "contributors": [ + "zambonmichelethanu" + ] + }, + "Web/HTTP/Status": { + "modified": "2019-03-23T22:02:43.572Z", + "contributors": [ + "mgold" + ] + }, + "Web/HTTP/Status/100": { + "modified": "2020-10-15T22:23:29.640Z", + "contributors": [ + "Alby7503" + ] + }, + "Web/HTTP/Status/101": { + "modified": "2019-03-18T21:36:46.685Z", + "contributors": [ + "PsCustomObject", + "cometarossa" + ] + }, + "Web/HTTP/Status/200": { + "modified": "2020-10-15T21:59:03.164Z", + "contributors": [ + "DadiBit", + "flaruggi" + ] + }, + "Web/HTTP/Status/302": { + "modified": "2020-10-15T22:18:43.134Z", + "contributors": [ + "eliamaino" + ] + }, + "Web/HTTP/Status/404": { + "modified": "2020-10-15T22:16:43.194Z", + "contributors": [ + "stefalda" + ] + }, + "Web/HTTP/Status/500": { + "modified": "2020-10-15T22:15:03.942Z", + "contributors": [ + "damis0g" + ] + }, + "Web/HTTP/negoziazione-del-contenuto": { + "modified": "2020-11-30T09:20:26.423Z", + "contributors": [ + "endlessDoomsayer", + "sharq" + ] + }, + "Web/JavaScript": { + "modified": "2020-03-12T19:36:53.666Z", + "contributors": [ + "Mystral", + "SphinxKnight", + "fscholz", + "artistics-weddings", + "alvise", + "nicolo-ribaudo", + "teoli", + "clamar59", + "Grino", + "ethertank", + "Federico", + "Leofiore", + "Verruckt", + "Kyuzz", + "DaViD83" + ] + }, + "Web/JavaScript/Chiusure": { + "modified": "2020-07-09T10:58:36.507Z", + "contributors": [ + "ImChrono", + "massimilianoaprea7", + "EmGargano", + "nicrizzo", + "AndreaP", + "Linko", + "masrossi", + "mar-mo" + ] + }, + "Web/JavaScript/Cosè_JavaScript": { + "modified": "2020-03-12T19:42:53.580Z", + "contributors": [ + "SpaceMudge" + ] + }, + "Web/JavaScript/Data_structures": { + "modified": "2020-05-27T14:48:54.824Z", + "contributors": [ + "LucaPipolo" + ] + }, + "Web/JavaScript/EventLoop": { + "modified": "2020-03-12T19:44:37.548Z", + "contributors": [ + "csarnataro", + "xpepper", + "mrbabbs", + "finvernizzi" + ] + }, + "Web/JavaScript/Gestione_della_Memoria": { + "modified": "2020-03-12T19:40:57.516Z", + "contributors": [ + "darknightva", + "jspkay", + "sokos", + "guspatagonico" + ] + }, + "Web/JavaScript/Getting_Started": { + "modified": "2019-03-23T23:05:35.907Z", + "contributors": [ + "clamar59" + ] + }, + "Web/JavaScript/Guida": { + "modified": "2020-03-12T19:38:40.547Z", + "contributors": [ + "Mystral", + "fscholz", + "teoli", + "natebunnyfield" + ] + }, + "Web/JavaScript/Guida/Controllo_del_flusso_e_gestione_degli_errori": { + "modified": "2020-07-03T09:14:04.292Z", + "contributors": [ + "lucamonte", + "ladysilvia", + "Goliath86", + "catBlack" + ] + }, + "Web/JavaScript/Guida/Dettagli_Object_Model": { + "modified": "2020-03-12T19:45:00.589Z", + "contributors": [ + "wbamberg", + "dem-s" + ] + }, + "Web/JavaScript/Guida/Espressioni_Regolari": { + "modified": "2020-03-12T19:44:32.587Z", + "contributors": [ + "Mystral", + "pfoletto", + "camilgun", + "adrisimo74", + "Samplasion", + "mar-mo" + ] + }, + "Web/JavaScript/Guida/Functions": { + "modified": "2020-03-12T19:43:03.997Z", + "contributors": [ + "MikePap", + "lvzndr" + ] + }, + "Web/JavaScript/Guida/Grammar_and_types": { + "modified": "2020-03-12T19:43:14.274Z", + "contributors": [ + "AliceM5", + "mme000", + "Goliath86", + "JsD3n", + "catBlack", + "edoardopa" + ] + }, + "Web/JavaScript/Guida/Introduzione": { + "modified": "2020-03-12T19:42:19.516Z", + "contributors": [ + "edoardopa", + "claudiod" + ] + }, + "Web/JavaScript/Guida/Iteratori_e_generatori": { + "modified": "2020-03-12T19:46:49.658Z", + "contributors": [ + "jackdbd" + ] + }, + "Web/JavaScript/Guida/Loops_and_iteration": { + "modified": "2020-10-11T06:08:37.488Z", + "contributors": [ + "bombur51", + "Edo", + "koalacurioso", + "ladysilvia", + "massimiliamanto", + "Cereal84" + ] + }, + "Web/JavaScript/Il_DOM_e_JavaScript": { + "modified": "2019-12-13T21:06:11.041Z", + "contributors": [ + "wbamberg", + "teoli", + "DaViD83" + ] + }, + "Web/JavaScript/Inheritance_and_the_prototype_chain": { + "modified": "2020-03-12T19:40:53.603Z", + "contributors": [ + "novembre", + "spreynprey", + "mean2me", + "davide-perez", + "liuzzom", + "JacopoBont", + "koso00", + "xbeat", + "aur3l10", + "kdex", + "claudiod", + "claudio.mantuano" + ] + }, + "Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript": { + "modified": "2020-03-12T19:36:12.785Z", + "contributors": [ + "wbamberg", + "gabriellaborghi", + "giovanniragno", + "teoli", + "fusionchess" + ] + }, + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:38:44.699Z", + "contributors": [ + "teoli", + "nicolo-ribaudo", + "raztus" + ] + }, + "Web/JavaScript/Reference/Classes": { + "modified": "2020-10-15T21:38:26.392Z", + "contributors": [ + "fscholz", + "MaxArt", + "SphinxKnight", + "pdina", + "Glitches", + "AAllegro91", + "afalchi82", + "huckbit", + "Cereal84", + "mrbabbs", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Classes/costruttore": { + "modified": "2020-03-12T19:44:11.878Z", + "contributors": [ + "webpn", + "alexandr-sizemov", + "Cereal84" + ] + }, + "Web/JavaScript/Reference/Classes/extends": { + "modified": "2020-03-12T19:45:50.905Z", + "contributors": [ + "mnemosdev" + ] + }, + "Web/JavaScript/Reference/Classes/static": { + "modified": "2020-10-15T21:38:26.501Z", + "contributors": [ + "ifthenelse", + "lucafbb", + "fscholz", + "SphinxKnight", + "sharq", + "Cereal84", + "ciaoben" + ] + }, + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:45:58.836Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Errors/Invalid_array_length": { + "modified": "2020-03-12T19:47:15.932Z", + "contributors": [ + "oly_oly" + ] + }, + "Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side": { + "modified": "2020-03-12T19:46:22.091Z", + "contributors": [ + "oly_oly", + "nullYoung" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { + "modified": "2020-03-12T19:45:56.839Z", + "contributors": [ + "ladysilvia", + "IkobaNoOkami", + "solemarnautica", + "passinform88" + ] + }, + "Web/JavaScript/Reference/Errors/Too_much_recursion": { + "modified": "2020-08-27T11:23:03.109Z", + "contributors": [ + "valeriolotterini" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_token": { + "modified": "2020-03-12T19:46:20.239Z", + "contributors": [ + "crisz", + "ladysilvia", + "bobgen" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_type": { + "modified": "2020-03-12T19:47:09.154Z", + "contributors": [ + "MPinna" + ] + }, + "Web/JavaScript/Reference/Functions_and_function_scope": { + "modified": "2020-03-12T19:39:12.043Z", + "contributors": [ + "lvzndr", + "ungarida", + "teoli", + "Salvo1402" + ] + }, + "Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions": { + "modified": "2020-03-12T19:45:00.553Z", + "contributors": [ + "nickdastain", + "DrJest" + ] + }, + "Web/JavaScript/Reference/Functions_and_function_scope/arguments": { + "modified": "2020-10-15T22:02:48.792Z", + "contributors": [ + "lesar", + "adrisimo74" + ] + }, + "Web/JavaScript/Reference/Functions_and_function_scope/get": { + "modified": "2020-10-15T22:01:12.442Z", + "contributors": [ + "matteogatti" + ] + }, + "Web/JavaScript/Reference/Functions_and_function_scope/set": { + "modified": "2020-07-11T16:38:00.325Z", + "contributors": [ + "CostyEffe", + "DeadManPoe" + ] + }, + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-03-12T19:39:20.143Z", + "contributors": [ + "frappacchio", + "nicolo-ribaudo", + "SphinxKnight", + "teoli", + "Delapouite" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2019-08-20T14:20:15.094Z", + "contributors": [ + "pfoletto", + "Umberto81", + "wbamberg", + "kdex", + "arai" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/Reduce": { + "modified": "2020-10-15T21:51:38.546Z", + "contributors": [ + "linsock", + "SphinxKnight", + "IsibisiDev", + "Samplasion", + "massic80", + "Nighteye", + "mnemosdev", + "Cesarec88" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/concat": { + "modified": "2019-04-09T10:38:25.595Z", + "contributors": [ + "stesua", + "fontsie", + "fzancan", + "the-reversengineer", + "mikspi", + "pallapo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": { + "modified": "2020-10-15T22:11:36.187Z", + "contributors": [ + "Airsit" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/entries": { + "modified": "2020-10-15T22:08:21.740Z", + "contributors": [ + "cyberpro4" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/every": { + "modified": "2020-10-15T22:04:47.252Z", + "contributors": [ + "pirlott" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/fill": { + "modified": "2020-10-15T21:59:11.776Z", + "contributors": [ + "yazevedopure" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/filter": { + "modified": "2019-10-14T05:21:39.776Z", + "contributors": [ + "shylockness", + "Easaaa", + "the-reversengineer", + "Cesarec88" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/find": { + "modified": "2019-06-03T13:37:19.806Z", + "contributors": [ + "fedeolto", + "mnemosdev", + "Gigitsu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { + "modified": "2020-10-15T22:35:03.644Z", + "contributors": [ + "AttilioCapocchiani" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/flat": { + "modified": "2020-10-15T22:20:39.692Z", + "contributors": [ + "bombur51", + "andreapavia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/flatMap": { + "modified": "2020-10-15T22:27:22.552Z", + "contributors": [ + "bombur51", + "antcolag" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/forEach": { + "modified": "2020-10-15T21:53:06.535Z", + "contributors": [ + "IsibisiDev", + "azzar1", + "dauricchio", + "mnemosdev" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/from": { + "modified": "2020-10-15T21:59:39.069Z", + "contributors": [ + "IsibisiDev", + "bolste", + "CapelliC" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/includes": { + "modified": "2019-03-23T22:26:46.029Z", + "contributors": [ + "mnemosdev", + "adrisimo74" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { + "modified": "2020-10-15T21:49:15.814Z", + "contributors": [ + "IsibisiDev", + "dauricchio", + "federica", + "adrisimo74" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/isArray": { + "modified": "2020-10-15T21:54:52.255Z", + "contributors": [ + "IsibisiDev", + "inuyaksa" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/join": { + "modified": "2020-10-15T21:58:39.710Z", + "contributors": [ + "dauricchio", + "gentax" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/keys": { + "modified": "2020-10-15T21:59:10.775Z", + "contributors": [ + "yazevedopure" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": { + "modified": "2020-10-15T22:00:35.554Z", + "contributors": [ + "AlecsFerra" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/length": { + "modified": "2019-03-23T22:14:01.094Z", + "contributors": [ + "pirlott", + "mikspi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/map": { + "modified": "2020-10-15T21:53:39.014Z", + "contributors": [ + "IsibisiDev", + "lucadebort", + "mikspi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/of": { + "modified": "2020-10-15T21:59:10.072Z", + "contributors": [ + "zeroerrequattro", + "yazevedopure" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/pop": { + "modified": "2020-10-15T21:54:18.141Z", + "contributors": [ + "IsibisiDev", + "vidoz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/prototype": { + "modified": "2019-03-23T22:43:29.228Z", + "contributors": [ + "zauli83" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/push": { + "modified": "2020-10-15T21:57:19.586Z", + "contributors": [ + "bombur51", + "carzacc", + "randomBrainstormer" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/reverse": { + "modified": "2019-08-30T12:44:50.302Z", + "contributors": [ + "duduindo", + "bebosh" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/slice": { + "modified": "2020-10-15T21:57:58.630Z", + "contributors": [ + "antsam23", + "duduindo", + "SphinxKnight", + "ir3ne", + "marco476", + "7laria" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/some": { + "modified": "2020-10-15T22:08:29.350Z", + "contributors": [ + "redjin", + "nicolocarpignoli", + "Gerigot" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/sort": { + "modified": "2020-10-15T21:58:52.025Z", + "contributors": [ + "massic80", + "Samplasion", + "one89", + ".Ruggero." + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/splice": { + "modified": "2020-10-15T21:52:49.028Z", + "contributors": [ + "IsibisiDev", + "V1LL0" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/toString": { + "modified": "2020-10-15T22:03:27.527Z", + "contributors": [ + "IsibisiDev", + "dauricchio" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/unshift": { + "modified": "2020-10-15T22:12:57.882Z", + "contributors": [ + "TinyTanic" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/values": { + "modified": "2020-10-15T22:19:37.666Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { + "modified": "2020-10-15T22:10:56.996Z", + "contributors": [ + "frappacchio" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics": { + "modified": "2019-03-23T22:08:10.595Z", + "contributors": [ + "AndTemp" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics/store": { + "modified": "2020-10-15T22:08:25.849Z", + "contributors": [ + "ladysilvia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2020-10-15T22:19:36.562Z", + "contributors": [ + "troystarwalt" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/UTC": { + "modified": "2020-10-15T22:19:32.963Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getDate": { + "modified": "2020-10-15T22:19:33.830Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getDay": { + "modified": "2020-10-15T22:19:32.824Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { + "modified": "2020-10-15T22:19:33.814Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getHours": { + "modified": "2020-10-15T22:19:33.745Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": { + "modified": "2020-10-15T22:19:34.257Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": { + "modified": "2020-10-15T22:19:33.828Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMonth": { + "modified": "2020-10-15T22:19:35.006Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": { + "modified": "2020-10-15T22:19:33.751Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getTime": { + "modified": "2020-10-15T22:19:32.760Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": { + "modified": "2020-10-15T22:19:34.667Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/now": { + "modified": "2020-10-15T22:19:33.212Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2020-03-02T12:38:04.753Z", + "contributors": [ + "TurnuAlessandro", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/apply": { + "modified": "2019-03-23T22:29:37.063Z", + "contributors": [ + "bicccio", + "giacomocerquone" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/arguments": { + "modified": "2020-10-15T22:25:14.314Z", + "contributors": [ + "Airsit" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/bind": { + "modified": "2020-10-15T22:08:09.650Z", + "contributors": [ + "willywongi", + "mirkoAtWork", + "ladysilvia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/call": { + "modified": "2020-10-15T22:28:06.881Z", + "contributors": [ + "massimilianoaprea7" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/length": { + "modified": "2020-10-15T22:21:03.500Z", + "contributors": [ + "Makkoyev", + "koci" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Generator": { + "modified": "2019-03-23T22:19:07.844Z", + "contributors": [ + "nmve" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Generator/next": { + "modified": "2019-03-23T22:19:17.162Z", + "contributors": [ + "SpartacusRoot" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Infinity": { + "modified": "2020-03-12T19:40:58.527Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON": { + "modified": "2019-03-23T22:51:18.477Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON/parse": { + "modified": "2020-10-15T21:38:37.212Z", + "contributors": [ + "IsibisiDev", + "bombur51", + "giacar", + "lanzoninicola", + "lonejack" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { + "modified": "2020-10-15T21:37:39.493Z", + "contributors": [ + "IsibisiDev", + "giacomoRanieri", + "DavideCanton" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2019-03-23T22:44:26.238Z", + "contributors": [ + "SphinxKnight", + "cdbajorin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/clear": { + "modified": "2020-10-15T22:11:39.518Z", + "contributors": [ + "azzar1" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/delete": { + "modified": "2020-10-15T22:24:27.180Z", + "contributors": [ + "AndreaCitrolo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/forEach": { + "modified": "2020-10-15T21:39:59.999Z", + "contributors": [ + "azzar1", + "SphinxKnight", + "Andreaf" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math": { + "modified": "2019-03-23T22:38:38.335Z", + "contributors": [ + "Fr4nci", + "Keshavanti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/E": { + "modified": "2020-10-15T22:03:32.556Z", + "contributors": [ + "dardino" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/abs": { + "modified": "2020-10-15T21:58:13.899Z", + "contributors": [ + "VanDjango" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/acos": { + "modified": "2020-10-15T21:58:13.115Z", + "contributors": [ + "VanDjango" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/atan": { + "modified": "2020-10-15T21:58:23.039Z", + "contributors": [ + "riccardoscotti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/atan2": { + "modified": "2019-03-23T22:25:36.856Z", + "contributors": [ + "AlexTaietti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/ceil": { + "modified": "2020-10-15T21:58:59.254Z", + "contributors": [ + "altermetax" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/floor": { + "modified": "2020-10-15T21:58:11.241Z", + "contributors": [ + "interazioni", + "VanDjango" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/max": { + "modified": "2019-03-23T22:32:55.876Z", + "contributors": [ + "mariol.grimaldi89" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/min": { + "modified": "2019-03-23T22:20:07.766Z", + "contributors": [ + "ilsergente1993", + "Cesarec88" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/pow": { + "modified": "2019-03-23T22:20:14.709Z", + "contributors": [ + "Cesarec88" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/random": { + "modified": "2020-10-15T21:55:55.820Z", + "contributors": [ + "dash1e", + "LoSo", + "Dorilama", + "HighSoftWare96" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/round": { + "modified": "2020-10-15T21:53:03.456Z", + "contributors": [ + "Gnafu", + "DanieleCux" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/sqrt": { + "modified": "2019-03-23T22:20:01.535Z", + "contributors": [ + "Cesarec88" + ] + }, + "Web/JavaScript/Reference/Global_Objects/NaN": { + "modified": "2020-10-15T21:33:03.152Z", + "contributors": [ + "azuccanigra", + "Nonno", + "brakko" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number": { + "modified": "2020-10-15T22:31:23.763Z", + "contributors": [ + "elchap" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2019-04-26T10:13:46.483Z", + "contributors": [ + "massimiliamanto", + "wbamberg", + "nicolo-ribaudo", + "teoli", + "Robg1" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/assign": { + "modified": "2020-06-26T04:52:08.816Z", + "contributors": [ + "DarioSacco", + "SphinxKnight", + "narsenico", + "kdex", + "claudio-destro", + "gpbl", + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/create": { + "modified": "2019-03-23T23:05:09.020Z", + "contributors": [ + "StefanoMagrassi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/defineProperties": { + "modified": "2019-03-23T22:17:19.339Z", + "contributors": [ + "LordKenzo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/freeze": { + "modified": "2019-09-19T10:26:59.453Z", + "contributors": [ + "sharq", + "pdina", + "zedrix", + "kdex", + "Cesarec88", + "DeadManPoe" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { + "modified": "2019-03-23T22:40:55.304Z", + "contributors": [ + "Andrws" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { + "modified": "2020-10-15T21:46:41.140Z", + "contributors": [ + "IsibisiDev", + "tiberakis" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/is": { + "modified": "2020-10-15T21:58:52.008Z", + "contributors": [ + "DanielVip3", + "Rawnly" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": { + "modified": "2020-10-15T22:07:54.483Z", + "contributors": [ + "DanielVip3" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/isSealed": { + "modified": "2020-10-15T22:07:54.491Z", + "contributors": [ + "DanielVip3" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/keys": { + "modified": "2019-03-23T23:16:28.015Z", + "contributors": [ + "teoli", + "nicelbole" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/prototype": { + "modified": "2019-03-23T22:58:00.342Z", + "contributors": [ + "gamerboy", + "fantarama", + "tommyblue", + "roccomuso", + "vindega", + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/seal": { + "modified": "2020-10-15T22:07:44.226Z", + "contributors": [ + "sharq", + "DanielVip3" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/toString": { + "modified": "2020-10-03T16:00:13.100Z", + "contributors": [ + "Belingheri", + "claudio.mantuano" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise": { + "modified": "2020-10-15T21:38:08.781Z", + "contributors": [ + "frappacchio", + "SphinxKnight", + "lorthirk", + "cipollafrancesco", + "AAllegro91", + "nbena", + "kdex", + "marcofugaro", + "mrbabbs", + "teoli", + "pasqLisena", + "lysz210" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise/all": { + "modified": "2020-10-15T21:50:01.455Z", + "contributors": [ + "afalchi82", + "lellefood", + "nbena", + "pinturic" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise/catch": { + "modified": "2019-03-23T22:49:42.926Z", + "contributors": [ + "SphinxKnight", + "lysz210" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Proxy": { + "modified": "2020-10-15T21:58:36.083Z", + "contributors": [ + "sbarex", + "jfet97", + "nuandawm", + "sidmonta", + "federicoviceconti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Proxy/handler": { + "modified": "2020-10-15T22:07:04.638Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply": { + "modified": "2020-10-15T22:07:00.348Z", + "contributors": [ + "shb" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Proxy/revocabile": { + "modified": "2020-10-15T22:10:51.734Z", + "contributors": [ + "jfet97" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Set": { + "modified": "2019-03-23T22:31:04.521Z", + "contributors": [ + "macolic", + "zandorzz", + "Fredev" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Set/entries": { + "modified": "2019-03-23T22:23:12.825Z", + "contributors": [ + "Gigitsu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Set/values": { + "modified": "2019-03-23T22:23:11.605Z", + "contributors": [ + "Gigitsu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2019-03-23T22:19:38.780Z", + "contributors": [ + "lazycesar", + "SphinxKnight", + "marco1947", + "kdex" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/charAt": { + "modified": "2020-10-15T22:08:21.889Z", + "contributors": [ + "ladysilvia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/includes": { + "modified": "2019-06-05T12:27:29.815Z", + "contributors": [ + "Umberto81", + "DarioSacco", + "afalchi82", + "FabioVergani" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/indexOf": { + "modified": "2020-10-15T22:08:20.806Z", + "contributors": [ + "IsibisiDev", + "Clyky", + "ladysilvia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/length": { + "modified": "2020-10-15T22:08:11.693Z", + "contributors": [ + "ladysilvia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/prototype": { + "modified": "2020-10-15T22:08:09.616Z", + "contributors": [ + "ladysilvia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/raw": { + "modified": "2020-10-15T22:08:05.242Z", + "contributors": [ + "ladysilvia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Symbol": { + "modified": "2020-10-15T21:56:57.878Z", + "contributors": [ + "fscholz", + "Cerealkillerway" + ] + }, + "Web/JavaScript/Reference/Global_Objects/decodeURI": { + "modified": "2020-03-12T19:41:01.758Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": { + "modified": "2020-03-12T19:41:02.785Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/encodeURI": { + "modified": "2020-03-12T19:41:01.209Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": { + "modified": "2020-03-12T19:41:01.351Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/escape": { + "modified": "2020-03-12T19:41:03.158Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/eval": { + "modified": "2020-03-12T19:39:17.387Z", + "contributors": [ + "teoli", + "SphinxKnight", + "Ruggi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/isFinite": { + "modified": "2020-03-12T19:41:01.244Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/isNaN": { + "modified": "2020-03-12T19:41:02.121Z", + "contributors": [ + "massic80", + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/null": { + "modified": "2020-10-15T21:34:19.479Z", + "contributors": [ + "IsibisiDev", + "Metsuryu", + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/parseFloat": { + "modified": "2020-03-12T19:40:21.865Z", + "contributors": [ + "wannymiarelli" + ] + }, + "Web/JavaScript/Reference/Global_Objects/parseInt": { + "modified": "2020-10-15T21:32:05.309Z", + "contributors": [ + "IsibisiDev", + "Molok" + ] + }, + "Web/JavaScript/Reference/Global_Objects/undefined": { + "modified": "2020-03-12T19:41:00.668Z", + "contributors": [ + "AndySky21", + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/unescape": { + "modified": "2020-03-12T19:41:03.668Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/uneval": { + "modified": "2020-03-12T19:40:59.495Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Operators": { + "modified": "2020-07-06T09:58:34.217Z", + "contributors": [ + "zamiky", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Operators/Destructuring_assignment": { + "modified": "2020-03-12T19:45:00.588Z", + "contributors": [ + "kdex", + "Giuseppe37" + ] + }, + "Web/JavaScript/Reference/Operators/Operator_Condizionale": { + "modified": "2019-03-18T21:30:29.773Z", + "contributors": [ + "lesar" + ] + }, + "Web/JavaScript/Reference/Operators/Operatore_virgola": { + "modified": "2020-10-15T22:23:54.628Z", + "contributors": [ + "ca42rico" + ] + }, + "Web/JavaScript/Reference/Operators/Operatori_Aritmetici": { + "modified": "2020-10-15T21:38:22.596Z", + "contributors": [ + "chrisdavidmills", + "fscholz", + "wbamberg", + "ladysilvia", + "lazycesar", + "kdex", + "alberto.decaro" + ] + }, + "Web/JavaScript/Reference/Operators/Spread_syntax": { + "modified": "2020-10-15T22:03:10.047Z", + "contributors": [ + "IsibisiDev", + "spinjam", + "quackmore", + "adrisimo74" + ] + }, + "Web/JavaScript/Reference/Operators/in": { + "modified": "2020-03-12T19:44:40.332Z", + "contributors": [ + "ertento", + "Crowbit" + ] + }, + "Web/JavaScript/Reference/Operators/new": { + "modified": "2020-10-15T21:50:50.688Z", + "contributors": [ + "Samplasion", + "Giuseppe37" + ] + }, + "Web/JavaScript/Reference/Operators/super": { + "modified": "2020-10-15T21:49:55.513Z", + "contributors": [ + "novembre", + "rmkngy", + "Cereal84" + ] + }, + "Web/JavaScript/Reference/Operators/this": { + "modified": "2020-03-12T19:41:38.881Z", + "contributors": [ + "ILTORU", + "dr-astico", + "lvzndr", + "scurtoni" + ] + }, + "Web/JavaScript/Reference/Operators/yield": { + "modified": "2020-03-12T19:42:38.456Z", + "contributors": [ + "SphinxKnight", + "kdex", + "Mattia_Zanella" + ] + }, + "Web/JavaScript/Reference/Statements": { + "modified": "2020-03-12T19:38:43.909Z", + "contributors": [ + "teoli", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Statements/Empty": { + "modified": "2020-10-15T22:24:08.768Z", + "contributors": [ + "dantevitale" + ] + }, + "Web/JavaScript/Reference/Statements/break": { + "modified": "2020-10-15T22:33:26.688Z", + "contributors": [ + "aldus65" + ] + }, + "Web/JavaScript/Reference/Statements/export": { + "modified": "2020-10-29T07:25:40.081Z", + "contributors": [ + "Roberto.Balducci", + "AAllegro91", + "Nico-92" + ] + }, + "Web/JavaScript/Reference/Statements/for...of": { + "modified": "2020-03-12T19:44:07.898Z", + "contributors": [ + "jspkay" + ] + }, + "Web/JavaScript/Reference/Statements/function*": { + "modified": "2020-03-12T19:44:37.996Z", + "contributors": [ + "biroplane", + "Samplasion", + "nispa", + "McGiogen", + "Nico-92", + "zambotn" + ] + }, + "Web/JavaScript/Reference/Statements/import": { + "modified": "2020-10-15T21:50:25.119Z", + "contributors": [ + "f4bo", + "tegola", + "star-ter-js" + ] + }, + "Web/JavaScript/Reference/Statements/let": { + "modified": "2020-10-15T21:25:16.190Z", + "contributors": [ + "Siberi0", + "Molok", + "azuccanigra", + "lucaing", + "crakdelpol", + "1ba1", + "teoli", + "EdoPut" + ] + }, + "Web/JavaScript/Reference/Statements/switch": { + "modified": "2020-03-12T19:45:00.500Z", + "contributors": [ + "sharq", + "lucafabbian", + "fsorge", + "federica", + "neclepsio", + "glauxbond" + ] + }, + "Web/JavaScript/Reference/Statements/throw": { + "modified": "2020-10-15T22:02:39.628Z", + "contributors": [ + "fsorge" + ] + }, + "Web/JavaScript/Reference/Statements/var": { + "modified": "2020-10-15T22:05:48.821Z", + "contributors": [ + "IkobaNoOkami" + ] + }, + "Web/JavaScript/Reference/template_strings": { + "modified": "2020-03-12T19:43:06.757Z", + "contributors": [ + "zedrix", + "sharq", + "manuel-di-iorio" + ] + }, + "Web/JavaScript/Una_reintroduzione_al_JavaScript": { + "modified": "2020-10-03T10:20:38.079Z", + "contributors": [ + "matt.polvenz", + "tangredifrancesco", + "igor.bragato", + "microjumper", + "maboglia", + "e403-mdn", + "clamar59", + "teoli", + "ethertank", + "Nicola_D" + ] + }, + "Web/Performance": { + "modified": "2019-08-09T16:36:45.228Z", + "contributors": [ + "estelle" + ] + }, + "Web/Performance/Percorso_critico_di_rendering": { + "modified": "2019-10-26T07:16:57.508Z", + "contributors": [ + "theborgh" + ] + }, + "Web/Reference": { + "modified": "2019-03-23T23:17:01.442Z", + "contributors": [ + "Nickolay" + ] + }, + "Web/Reference/API": { + "modified": "2019-03-23T23:17:02.060Z", + "contributors": [ + "klez" + ] + }, + "Web/SVG/Element": { + "modified": "2020-11-09T06:43:40.808Z", + "contributors": [ + "nicola.tarallo.zebb" + ] + }, + "Web/SVG/Element/animate": { + "modified": "2020-10-15T22:17:04.015Z", + "contributors": [ + "maicol07" + ] + }, + "Web/Security": { + "modified": "2019-09-10T16:35:57.576Z", + "contributors": [ + "SphinxKnight", + "Sheppy" + ] + }, + "Web/Security/Password_insicure": { + "modified": "2019-03-18T21:40:50.724Z", + "contributors": [ + "oprof" + ] + }, + "Web/Tutorials": { + "modified": "2019-03-23T22:46:08.934Z", + "contributors": [ + "PyQio", + "Italuil", + "Gianluigi" + ] + }, + "Web/Web_Components": { + "modified": "2019-11-23T14:48:11.112Z", + "contributors": [ + "theborgh" + ] + }, + "Web/Web_Components/Usare_custom_elements": { + "modified": "2020-03-31T06:51:28.687Z", + "contributors": [ + "massimiliano.mantovani" + ] + }, + "Web/XSLT": { + "modified": "2019-01-16T16:09:31.557Z", + "contributors": [ + "ExE-Boss", + "Verruckt", + "DaViD83", + "Federico" + ] + }, + "WebSockets": { + "modified": "2019-03-23T23:27:06.479Z", + "contributors": [ + "AlessandroSanino1994", + "br4in", + "music-wedding", + "pbrenna" + ] + }, + "WebSockets/Writing_WebSocket_client_applications": { + "modified": "2019-03-23T22:14:26.473Z", + "contributors": [ + "mnemosdev" + ] + }, + "Web_Development/Mobile": { + "modified": "2019-03-23T23:24:04.119Z", + "contributors": [ + "BenB" + ] + }, + "Web_Development/Mobile/Design_sensibile": { + "modified": "2019-03-23T23:24:00.771Z", + "contributors": [ + "SlagNe" + ] + }, + "XHTML": { + "modified": "2019-01-16T16:01:20.965Z", + "contributors": [ + "Federico", + "DaViD83", + "Indigo" + ] + }, + "window.find": { + "modified": "2019-03-24T00:02:59.251Z", + "contributors": [ + "khalid32", + "teoli", + "khela" + ] + } +} \ No newline at end of file diff --git a/files/it/adattare_le_applicazioni_xul_a_firefox_1.5/index.html b/files/it/adattare_le_applicazioni_xul_a_firefox_1.5/index.html new file mode 100644 index 0000000000..7062b6a3ae --- /dev/null +++ b/files/it/adattare_le_applicazioni_xul_a_firefox_1.5/index.html @@ -0,0 +1,34 @@ +--- +title: Adattare le applicazioni XUL a Firefox 1.5 +slug: Adattare_le_applicazioni_XUL_a_Firefox_1.5 +tags: + - Estensioni + - Tutte_le_categorie + - XUL +translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 +--- +
{{FirefoxSidebar}}

 

+ +

Questa pagina contiene un elenco di modifiche in Firefox 1.5, che coinvolgono gli sviluppatori XUL.

+ +

Cambiamenti specifici

+ + + +

Altre informazioni

+ + + +

{{ languages( { "fr": "fr/Adaptation_des_applications_XUL_pour_Firefox_1.5", "en": "en/Adapting_XUL_Applications_for_Firefox_1.5" } ) }}

diff --git a/files/it/aggiungere_fornitori_di_dati_anti-phishing/index.html b/files/it/aggiungere_fornitori_di_dati_anti-phishing/index.html new file mode 100644 index 0000000000..cefea5fa76 --- /dev/null +++ b/files/it/aggiungere_fornitori_di_dati_anti-phishing/index.html @@ -0,0 +1,42 @@ +--- +title: Aggiungere fornitori di dati anti-phishing +slug: Aggiungere_fornitori_di_dati_anti-phishing +translation_of: Mozilla/Adding_phishing_protection_data_providers +--- +

Grazie alla tecnologia di protezione dal phishing, Firefox aiuta i suoi utenti a proteggersi comparando gli URL che vengono visitati con una lista nera di siti maliziosi già conosciuti, e presentando un avviso all'utente che visita uno di tali siti. +

+

Installare un nuovo fornitore di dati

+

Per installare un fornitore di dati, è necessario impostare una serie di preferenze che contengono alcuni dettagli sul fornitore stesso. +

Ogni fornitore ha un numero ID unico. Quello con ID 0 è il fornitore preimpostato da Firefox. Quando se ne installa uno nuovo, si dovrebbe utilizzare il numero più basso ancora inutilizzato. +

Per trovare l'ID da utilizzare, è possibile creare un ciclo che richieda il valore di browser.safebrowsing.provider.0.name, poi quello di browser.safebrowsing.provider.1.name, e così via finchè non viene restituito alcun valore. Allora si sarà trovato il numero utilizzabile. +

E' possibile trovare esempi di come accedere alle preferenze in lettura e in scrittura nell'articolo Aggiungere preferenze a un'estensione. +

+

Preferenze richieste

+
browser.safebrowsing.provider.idnum.name +
Un nome descrittivo per il provider. +
+
browser.safebrowsing.provider.idnum.keyURL +
Un URL che restituisca una chiave privata per la crittografia. +
+
browser.safebrowsing.provider.idnum.lookupURL +
L'URL dove si può trovare la lista nera. La richiesta verrà criptata utilizzando la chiave privata restituita da keyURL. +
+

Preferenze opzionali

+
browser.safebrowsing.provider.idnum.reportURL +
Un URL utilizzato per riportare quando un utente visita pagine phisher e se ha ignorato l'avviso o meno. +
+
browser.safebrowsing.provider.idnum.updateURL +
Un URL utilizzato per richiedere aggiornamenti della lista dei siti maliziosi. Il server può fornire l'ultima versione della lista oppure aggiornamenti incrementali. +
+
browser.safebrowsing.provider.idnum.reportGenericURL +
Un URL al quale l'utente viene direzionato quando desidera segnalare un sito "phisher" che non è stato rilevato dal sistema di protezione. +
+
browser.safebrowsing.provider.idnum.reportErrorURL +
Un URL al quale l'utente viene direzionato quando desidera segnalare una pagina sicura che viene erroneamente considerata maliziosa. +
+
browser.safebrowsing.provider.idnum.reportPhishURL +
Un URL al quale l'utente viene direzionato per riportare una pagina maliziosa. +
+

Determinare quale provider viene utilizzato correntemente

+

Per conoscere l'ID del provider attualmente selezionato, è possibile leggere il valore della preferenza browser.safebrowsing.dataProvider. +

{{ languages( { "en": "en/Adding_phishing_protection_data_providers" } ) }} diff --git a/files/it/api_sociale/index.html b/files/it/api_sociale/index.html new file mode 100644 index 0000000000..8c10dbc9c5 --- /dev/null +++ b/files/it/api_sociale/index.html @@ -0,0 +1,63 @@ +--- +title: API Sociale +slug: API_Sociale +translation_of: Archive/Social_API +--- +

L'API Sociale è una nuova API per rendere semplice per i browser internet integrare i servizi di social media. Quando un provider di servizio sociale è implementato in Firefox, è possibile mostrare  dentro al browser i comandi e le informazioni relative al servizio. L'articolo che segue spiega come implementare un servizio sociale.

+
+

Nota: Alcuni dei contenuti di questa pagina sono stati scritti ma non sono stati inclusi nella sottocategoria; li puoi trovare qui temporaneamente.

+
+ + + + + + + +
+

Documentazione per l'api sociale

+
+
+ Glossario API Sociale
+
+ Provvede definizioni di parole chivi che dovrai capre per capire come usare l'API Sociale
+
+ Social API and social service guide
+
+ An introduction and guide to the Social API and the associated services.
+
+ Social service manifest
+
+ A description of—and guide to building—the manifest required
+
+ Social service worker API reference
+
+ A reference to the social service worker API.
+
+ Social service content API: MozSocial
+
+ A reference to the social service content API, which is provided by the {{domxref("navigator.MozSocial")}} object.
+
+ Social service widgets
+
+ A guide to the widgets provided by the social service.
+
+

View All...

+ 		+

ricevi aiuto dalla comunità

+

You need help on a Social API related problem and can't find the solution in the documentation?

+
    +
  • Ask your question on the Mozilla IRC channel: #socialdev
    • +
+

Don't forget about the netiquette...

+

strumenti e demo

+ +

View All...

+ + +
+

 

diff --git a/files/it/archive/add-ons/index.html b/files/it/archive/add-ons/index.html new file mode 100644 index 0000000000..caac45ae4c --- /dev/null +++ b/files/it/archive/add-ons/index.html @@ -0,0 +1,8 @@ +--- +title: Add-ons +slug: Archive/Add-ons +translation_of: Archive/Add-ons +--- +

In progress. Archived add-ons documentation.

+ +

{{SubpagesWithSummaries}}

diff --git a/files/it/archive/add-ons/supportare_i_suggerimenti_nei_plugin_di_ricerca/index.html b/files/it/archive/add-ons/supportare_i_suggerimenti_nei_plugin_di_ricerca/index.html new file mode 100644 index 0000000000..d3470577ac --- /dev/null +++ b/files/it/archive/add-ons/supportare_i_suggerimenti_nei_plugin_di_ricerca/index.html @@ -0,0 +1,52 @@ +--- +title: Supportare i suggerimenti nei plugin di ricerca +slug: Archive/Add-ons/Supportare_i_suggerimenti_nei_plugin_di_ricerca +tags: + - Plugin_di_ricerca +translation_of: Archive/Add-ons/Supporting_search_suggestions_in_search_plugins +--- +

MozSearch supporta i suggerimenti di ricerca; mentre l'utente scrive nella barra di ricerca, Firefox 2 interroga l'URL specificato dal plugin di ricerca per ottenere i suggerimenti di ricerca. +

Una volta che la lista è stata ottenuta, viene mostrata in una casella popup che appare sotto la barra di ricerca, che permette all'utente di selezionare uno dei termini suggeriti. Se l'utente continua a scrivere, una nuova lista di suggerimenti viene richiesta dal motore di ricerca e la casella si aggiorna. +

I plugin di ricerca per Yahoo e Google inclusi in Firefox 2 supportano i suggerimenti di ricerca. +

+

Implementare il supporto per i suggerimenti nel plugin

+

Per supportare i suggerimenti di ricerca, un plugin deve definire un elemento <Url> con un attributo type impostato a "application/x-suggestions+json". Questo significa che ci saranno due elementi <Url>: l'altro è l'URL principale della ricerca. +

Per esempio, il plugin di Yahoo ha il seguente <Url>: +

+
<Url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchTerms}"/>
+
+

Se l'utente scrive "fir" nella barra di ricerca e poi fa una pausa, Firefox inserirà "fir" al posto di {searchTerms} e interrogherà l'URL: +

+
<Url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command=fir"/>
+
+

I risultati dell'interrogazione costituiranno la lista di suggerimenti. +

Si veda Creare Plugin MozSearch per ulteriori informazioni su come implementare un plugin di ricerca. +

+

Implementare il supporto per i suggerimenti sul server

+

La maggior parte del lavoro per gestire i suggerimenti di ricerca è effettivamente implementarli lato server. Se si desidera farlo, si deve implementare un programma che, ricevendo come parametri i termini di ricerca, restituisca i suggerimenti. Il programma sarà scritto in JavaScript Object Notation (JSON). +

Quando un browser vuole ricevere una lista di corrispondenze per un dato termine, invia una richiesta HTTP GET all'URL specificato dall'elemento <Url>. +

Il server dovrà allora decidere quali suggerimenti offrire utilizzando quelli che vi si addicono e costruire un JSON che consiste di un minimo di due e un massimo di quattro elementi: +

+
query string +
Il primo elemento nella query string originale in JSON. Questo permette a Firefox di verificare che il suggerimento corrisponda a quanto digitato dall'utente. +
+
completion list +
Un array di suggerimenti. L'array deve essere racchiuso tra parentesi quadre. Per esempio: <tt>{{ mediawiki.external('\"termine 1\", \"termine 2\", \"termine 3\", \"termine 4\"') }}</tt> +
+
descriptions +
Questo elemento è opzionale ed è un array di descrizioni per ognuno dei suggerimenti presenti nella completion list. Queste possono essere informazioni aggiuntive che il motore di ricerca potrebbe restituire perchè vengano visualizzate dal browser, così come il numero di risultati che verranno trovati. +
+
Questo elemento non è supportato in Firefox 2 e se presente sarà ignorato.
+
URL +
Questo elemento è opzionale ed è un array di URL alternativi per ognuno dei suggerimenti presenti nella completion list. Per esempio, se si desidera offrire una mappa di link invece di una semplice pagina di risultati, è possibile restituire un URL a una mappa in questo array. +
+
Se non si specifica un URL da interrogare, viene utilizzato l'URL di default specificato nell'elemento <Url> del plugin. +
+
Questo elemento non è supportato in Firefox 2 e se presente sarà ignorato.
+

Per esempio, se il termine di ricerca è "fir" e non si necessita di restituire alcuna descrizione o URL di ricerca alternativo, si può restituire il sequente JSON: +

+
["fir", ["firefox", "first choice", "mozilla firefox"]]
+
+

Si noti che in questo esempio sono stati specificati solo la query string e l'array di completamento, tralasciando tutti gli elementi opzionali. +

La completion list può includere tanti suggerimenti quanti si desidera offrirne, sebbene sia meglio mantenerla maneggevole, dato che la casella dei suggerimenti si aggiorna mente l'utente continua a scrivere. Inoltre, il criterio utilizzato per selezionare i suggerimenti da offrire viene lasciato interamente allo sviluppatore. +

{{ languages( { "en": "en/Supporting_search_suggestions_in_search_plugins" } ) }} diff --git a/files/it/archive/add-ons/sviluppare_un_estensione/index.html b/files/it/archive/add-ons/sviluppare_un_estensione/index.html new file mode 100644 index 0000000000..84f5df691e --- /dev/null +++ b/files/it/archive/add-ons/sviluppare_un_estensione/index.html @@ -0,0 +1,242 @@ +--- +title: Sviluppare un'Estensione +slug: Archive/Add-ons/Sviluppare_un_Estensione +tags: + - Estensioni + - Tutte_le_categorie +translation_of: Archive/Add-ons/Developing_add-ons +--- +

 

+

Introduzione

+

Questo tutorial accompagnerà passo-passo nella creazione di un'estensione semplice e basilare che permetta di aggiungere un pannello alla barra di stato contenente il testo "Hello, World!"

+
+

Nota Questo tutorial si rifersice allo sviluppo di un'estensione per Firefox 1.5. Esistono altri tutorial per le precedenti versioni di Firefox.

+
+

Organizzare l'ambiente di sviluppo

+

Le estensioni vengono impacchettate e distribuite in file ZIP, o Bundles, con l'estensione <tt>xpi</tt> ( + + pronunciata “zippy” + ). Lo schema del contenuto di un file XPI è simile a questo:

+
extension.xpi:
+              /install.rdf
+              /components/*
+              /components/cmdline.js
+              /defaults/
+              /defaults/preferences/*.js
+              /plugins/*
+              /chrome.manifest
+              /chrome/icons/default/*
+              /chrome/
+              /chrome/content/
+
+
+

Per questo motivo è consigliabile organizzare i file sorgente in una struttura simile, a meno che non si voglia scrivere un qualche tipo di Makefile or shell script per impacchettare e comprimere i propri file. Anche qualora si sia in grado di farlo, è molto più semplice eseguire i test attraverso la struttura sopra indicata a causa delle caratteristiche del sistema di installazione delle estensioni di Firefox 1.5.

+

Iniziamo. Crea una cartella per l'estensione da qualche parte sull'hard disk, ad es. <tt>C:\extensions\myExtension\</tt> o <tt>~/extensions/myExtension/</tt>. Dentro questa cartella crea un'altra cartella chiamata <tt>chrome</tt>, e all'interno della cartella <tt>chrome</tt> crea un'altra cartella chiamata <tt>content</tt>. (Su sistemi di tipo Unix è possibile creare tutte e tre le directory eseguendo semplicemente <tt>mkdir -p chrome/content</tt> dalla directory di root dell'estensione.)

+

Dentro alla root della cartella dell'estensione, insieme alla cartella <tt>chrome</tt>, crea due nuovi file di testo vuoti, uno chiamato <tt>chrome.manifest</tt>, l'altro invece <tt>install.rdf</tt>.

+

Altri suggerimenti sull'organizzazione dell'ambiente di sviluppo possono essere trovati su Mozillazine Knowledge Base(EN).

+

Creare il manifesto di installazione

+

Apri il file chiamato <tt>install.rdf</tt> che hai creato al vertice della gerarchia delle cartelle dell'estensione e scrivici dentro:

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>sample@foo.net</em:id>
+    <em:version>1.0</em:version>
+    <em:type>2</em:type>
+
+    <!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. -->
+    <em:targetApplication>
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+        <em:minVersion>1.0+</em:minVersion>
+        <em:maxVersion>1.5.0.*</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- Front End MetaData -->
+    <em:name>Esempio!</em:name>
+    <em:description>Estensione di prova</em:description>
+    <em:creator>Il tuo nome</em:creator>
+    <em:homepageURL>http://www.iltuositoweb.com/</em:homepageURL>
+  </Description>
+</RDF>
+
+ +

Guarda Manifesti di installazione per un elenco completo delle proprietà richieste e opzionali.

+

Salva il file.

+

Estendere il browser con XUL

+

L'interfaccia utente di Firefox è scritta in XUL e JavaScript. XUL è una grammatica XML che fornisce all'interfaccia utente dei componenti come pulsanti, menu, barre degli strumenti, strutture ad albero, etc. Le azioni dell'utente sono invece collegate alle funzionalità attraverso dei JavaScript.

+

Per estendere il borwser si modificano parti dell'UI del browser aggiungendo o modificando i componenti. Si aggiungono componenti inserendo nuovi elementi XUL DOM nella finestra del browser, e si modificano usando script e associando dei gestori di eventi.

+

Il browser è implementato in un file XUL chiamato <tt>browser.xul</tt> (<tt>$FIREFOX_INSTALL_DIR/chrome/browser.jar</tt> che contiene <tt>content/browser/browser.xul</tt>). Dentro browser.xul si può trovare la barra di stato, che assomiglierà a qualcosa del genere:

+
<statusbar id="status-bar">
+ ... <statusbarpanel>s ...
+</statusbar>
+
+

<tt><statusbar id="status-bar"></tt> è un "punto di fusione" per un Overlay XUL.

+
Overlay XUL
+

Gli Overlay XUL sono un modo di associare altri oggetti UI a un documento XUL al momento dell'esecuzione. Un Overlay XUL è un file .xul che specifica dei frammenti del file XUL da inserire in specifici "punti di fusione" contenuti nel documento principale. Questi frammenti possono indicare l'inserimento, la rimozione o la modifica degli oggetti.

+

Esempio di un documento di Overlay XUL

+
<?xml version="1.0"?>
+<overlay id="sample"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <statusbar id="status-bar">
+  <statusbarpanel id="my-panel" label="Hello, World"/>
+ </statusbar>
+</overlay>
+
+

La <tt><statusbar></tt> chiamata <tt>status-bar</tt> indica il "punto di fusione" all'interno della finestra del browser al quale si intende associare la modifica.

+

Il figlio <tt><statusbarpanel></tt> rappresenta un nuovo oggetto da inserire all'interno del punto di fusione.

+

Usa questo semplice codice e salvalo in un file chiamato <tt>sample.xul</tt> dentro la cartella <tt>chrome/content</tt> che hai creato.

+

Per ulteriori informazioni circa l'inserimento di oggetti e la modifica dell'interfaccia utente attraverso gli Overlay, guarda sotto.

+

URI Chrome

+

I file XUL sono parti del "Pacchetto Chrome" - una serie di componenti dell'interfaccia utente che vengono caricati attraverso indirizzi URI <tt>chrome://</tt>. Invece di caricare il browser da disco usando un URI <tt>file://</tt> (poichè l'ubicazione di Firefox nel sistema può cambiare da piattaforma a piattaforma e da sitema a sistema), gli sviluppatori di Mozilla hanno trovato una soluzione per creare degli URI al contenuto XUL che l'applicazione installata possa conoscere.

+

Ad esempio, la finestra del browser è: <tt>chrome://browser/content/browser.xul</tt> Prova a digitare questa URL nella barra degli indirizzi di Firefox!

+

Gli URI Chrome sono composti da diversi componenti:

+ +

Quindi, <tt>chrome://foo/skin/bar.png</tt> carica il file <tt>bar.png</tt> dalla sezione <tt>skin</tt> del tema <tt>foo</tt>.

+

Quando si carica un file mediante l'URI Chrome, Firefox usa il Registro del Chrome per tradurre questi URI nella effettiva sorgente del file su disco (o nel pacchetto JAR).

+

Creare il manifesto di installazione

+

Per maggiori informazioni sul Chrome Manifest e le proprietà supportate, guarda il riferimento sul Chrome Manifest.

+

Apri il file chiamato <tt>chrome.manifest</tt> che hai creato insieme alla directory <tt>chrome</tt> nella root dell'estensione.

+

Aggiungi questo codice:

+
content     sample    chrome/content/
+
+

(Non dimenticare gli slash posteriori, "<tt>/</tt>"! Senza, l'estensione non verrà caricata.)

+

Il codice indica:

+
    +
  1. il tipo di materiale all'interno del pacchetto chrome
    2. +
  2. il nome del pacchetto chrome
    3. +
  3. la ubicazione dei file del pacchetto chrome
    4. +
+

Quindi, la stringa indicata sopra dice che per il pacchetto chrome sample, si possono trovare i suoi file content all'ubicazione <tt>chrome/content</tt> che è un percorso relativo alla ubicazione di <tt>chrome.manifest</tt>.

+

N.B. i file content, locale e skin devono essere contenuti nelle cartelle chiamate content, locale e skin all'interno della sotto-directory <tt>chrome</tt>.

+

Salva il file. Quando Firefox verrà eseguito con questa estensione, (più avanti in questo tutorial), il chrome.manifest registrerà il pacchetto chrome.

+

Registrare un Overlay

+

E' necessario che Firefox fonda il tuo overlay con la finestra del browser ogni volta che ne mostra una. Quindi aggiungi questa stringa al file <tt>chrome.manifest</tt>:

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

Questo dice a Firefox di fondere <tt>sample.xul</tt> in <tt>browser.xul</tt> quando viene caricato <tt>browser.xul</tt> .

+

Test

+

Primo, devi far sapere a Firefox della tua estensione. Nei vecchi e bui giorni di Firefox 1.0 questo significava impacchettare l'estensione come un XPI e installarla attraverso l'interfaccia utente, che era davvero una faticaccia. Ora è più semplice.

+
    +
  1. Apri la cartella del Profilo
    2. +
  2. Apri la cartella dell'estensione (creala se non esiste)
    3. +
  3. Crea un nuovo file di testo e scrivici dentro il percorso alla cartella dell'estensione, ad es. <tt>C:\extensions\myExtension\</tt> o <tt>~/extensions/myExtension</tt>. Salva il file con l'ID dell'estensione, per esempio <tt>sample@foo.net</tt>
    4. +
+

Ora sei pronto a fare un test dell'estensione!

+

Avvia Firefox. Firefox rileverà il link testuale alla directory dell'estensione e la installerà. Quando apparirà la finestra del browser si dovrebbe vedere la scritta "Hello, World!" sulla destra della barra di stato.

+

Ora puoi tornare indietro ed effettuare dei cambiamenti al file .xul, chiudere e riavviare Firefox e questi dovrebbero essere mostrati.

+<center> +

Image:Helloworld_tools_menu.PNG

+

Image:Helloworld_extensions_wnd.PNG

+</center> +

Impacchettamento

+

Ora che l'estensione funziona, può essere impacchettata per l'installazione e la circolazione.

+

Comprimi il contenuto della cartella dell'estensione (non la cartella stessa), e rinomina il file .zip con l'estensione .xpi. In ambiente Windows XP, si può facilmente esguire questa operazione selezionando tutti i file e le sottocartelle presenti nella cartella dell'estensione, cliccando col tasto destro del mouse e scegliendo "Invia a -> Cartella compressa". Verrà creato un file .zip. Basta rinominarlo ed il gioco è fatto!

+

Ora è possibile caricare il file .xpi su un server, avendo cura di controllare che offra il servizio di <tt>application/x-xpinstall</tt>. Basta quindi creare un collegamento al file sul server per permettere alle persone di scaricare e installare l'estensione su Firefox.

+

 

+
Utilizzare addons.mozilla.org
+

Mozilla Update è un sito di distribuzione dove è possibile ospitare (hosting) le proprie estensioni gratuitamente. + + Your extension will be hosted on Mozilla's mirror network to guarantee your download even though it might be very popular. + Il sito di Mozilla garantisce inoltre agli utenti un'installazione semplificata delle estensioni, e rende automaticamente disponibili, per gli utenti che già le possiedano, gli aggiornamenti ogni volta che viene effettuato l'upload delle nuove versioni delle estensioni. In più Mozilla Update consente agli utenti di commentare e lasciare un feedback sulla estensione. E' vivamente consigliabile di utilizzare Mozilla Update per distribuire le tue estensioni!

+

Visita http://addons.mozilla.org/developers/ per creare un account ed iniziare a distribuire le tue estensioni!

+

+ + N.B. + Le tue estensioni saranno promosse più velocemente e maggiormente scaricate se fornisci una descrizione accurata e alcuni screenshot delle funzionalità dell'estensione.

+
Registrare le Estensioni nel registro di Windows
+

Su Windows, possono essere aggiunte nel registro delle informazioni sulle estensioni, cosicché l'estensione sarà automaticamente caricata all'avvio dell'applicazione. Questo permette ai programmi di installazione delle applicazioni di aggiungere facilmente dei punti di acesso perl'integrazione sottoforma di estensioni. Guarda "Aggiugere estensioni utilizzando il Registro di Windows" per ulteriori informazioni.

+

Altre informazioni sugli Overlay XUL

+

Oltre che per inserire dei componenti UI ai "punti di fusione", si possono usare i frammenti di XUL negli Overlay per:

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

Creare nuovi componenti per l'interfaccia utente

+

E' possibile creare proprie finestre (e finestre di dialogo) come file .xul separati, fornire nuove funzionalità implementando le azioni disponibili per l'utente nei file .js, usando il metodo DOM per manipolare i componenti UI. Si possono definire le regole di stile nei file .css per associare delle immagini, impostare i colori, etc.

+

Guarda la documentazione su XUL per ulteriori risorse sullo sviluppo con XUL.

+

File predefiniti

+

I file predefiniti con i quali modificare il profilo dell'utente dovrebbero essere posti nella cartella <tt>defaults/</tt> sotto la root della gerarchia di cartelle dell'estensione. I file .js che settano impostazioni predefinite dovrebbero invece essere posti nella cartella <tt>defaults/preferences/</tt> - infatti, qualora vengano ubicati in queste cartelle, saranno automaticamente caricati dal sistema di preferenze di Firefox all'avvio e sarà possibile accedervi facilmente utilizzando l'API delle Preferenze.

+

Componenti XPCOM

+

Firefox supporta anche i componenti XPCOM all'interno delle estensioni. Questi componenti possono essere facilmente creati con JavaScript o C++ (utilizzando il Gecko SDK).

+

Riponi tutti i file .js o .dll nella directory <tt>components/</tt> - saranno automaticamente registrati al primo avvio di Firefox successivo all'installazione dell'estensione.

+

Per maggiori informazioni guarda Come costruire un componente XPCOM con Javascript e il libro Creare componenti XPCOM.

+
Linea di comando per l'applicazione
+

Uno dei possibili usi dei componenti XPCOM personalizzati è quello di aggiungere una gestione a linea di comando per Firefox o Thunderbird. Questa tecnica è utile per eseguire l'estensione come se fosse un'applicazione:

+
 firefox.exe -myapp
+
+

Guarda Chrome: Linea di comando ed una discussione sul forum(EN) per maggiori dettagli.

+

Localizzazione

+

Per supportare più di una lingua, occorre separare le stringhe dal contenuto utilizzando le entities e le string bundles. E' più semplice effettuare questa operazione mentre si sviluppa l'estensione che dover tornare indietro e farlo alla fine!

+

Le informazioni sulla Localizzazione sono immagazzinate nella directory del locale dell'estensione. Per esempio, per aggiungere un locale all'estensione che abbiamo sviluppato fin ora, basta creare una directory chiamata "locale" nel chrome (dove è ubicata la directory "content") e aggiungere la seguente stringa al file chrome.manifest:

+
locale sample sampleLocale chrome/locale/
+
+

Per creare valori localizzabili per gli attributi XUL, è necessario inserire tali valori in un file <tt>.ent</tt> (o <tt>.dtd</tt>), che deve essere ubicato nella directory del locale ed avere questo aspetto:

+
<!ENTITY  button.label     "Click Me!">
+<!ENTITY  button.accesskey "C">
+
+

E quindi includere all'inizio del documento XUL (ma dopo il prologo "<?xml version"1.0"?>") qualcosa del genere:

+
<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.ent">
+
+

dove window è il valore localName dell'elemento di root del documento XUL, ed il valore della proprietà <tt>SYSTEM</tt> è l'URI chrome al file dell'entità (entity). Nell'estensione dell'esempio, l'elemento di root è overlay.

+

Per usare le entità occorre modificare il proprio XUL così:

+
<button label="&button.label;" accesskey="&button.accesskey;"/>
+
+

Il Registro del Chrome farà in modo che il file dell'entità venga caricato dalla cartella del locale corrispondente al locale selezionato.

+

Per le stringhe usate negli script crea un file .properties: un file di testo che contiene una stinga per ogni linea in questo formato:

+
chiave=valore
+
+

e utilizza il tag <tt>nsIStringBundleService</tt>/<tt>nsIStringBundle</tt> o il tag <tt><stringbundle></tt> per caricare i valori negli script.

+

Conoscere il Browser

+

Usa il DOM Inspector (non è parte dell'installazione Standard di Firefox, se manca dal menu Strumenti occorre reinstallare Firefox con l'opzione "installazione personalizzata" e selezionare Strumenti di sviluppo) per esplorare la finestra del browser ed ogni altra finestra XUL che hai l'intenzione di estendere.

+

Utilizza il pulsante in alto a sinistra nella bara degli strumenti del DOM Inspector per attivare la modalità di ricerca dei nodi "punta-e-clicca": in tal modo basterà un clic visuale su un nodo nella finestra XUL per selezionarlo. Effettuando quest'operazione l'albero della gerarchia DOM del DOM inspector salterà automaticamente al nodo selezionato.

+

Usa il pannello di destra del DOM Inspector per trovare i punti di fusione e gli "id" da usare per inserire gli elementi tramite l'overlay. Se non riesci a trovare un elemento che abbia un'id sulla quale sia possibile effettuare l'inserimento, potrebbe essere necessario aggiungere uno script nell'overlay per inserire i propri elementi quando l'evento <tt>load</tt> si attiva nella finestra XUL principale.

+

Effettuare il debug sull'estensione

+

Strumenti per il debug analitico

+ +

Debug con printf

+ +

Debug avanzato

+ +

Iniziare velocemente

+

Può essere utilizzato lo strumento online Extension Wizard(EN) per generare una semplice estensione.

+

Un'estensione "Hello World"(EN) simile a quella prodotta dall'Extension Wizard è spiegata passo-passo in un altro tutorial di MozillaZine(EN).

+

{{ languages( { "en": "en/Building_an_Extension", "de": "de/Erweiterung_erstellen", "es": "es/Creando_una_extensi\u00f3n", "fr": "fr/Construire_une_extension", "ja": "ja/Building_an_Extension", "pl": "pl/Tworzymy_rozszerzenie", "pt": "pt/Construir_uma_Extens\u00e3o" } ) }}

diff --git a/files/it/archive/b2g_os/apps/index.html b/files/it/archive/b2g_os/apps/index.html new file mode 100644 index 0000000000..5f4b422008 --- /dev/null +++ b/files/it/archive/b2g_os/apps/index.html @@ -0,0 +1,48 @@ +--- +title: Creare App per Firefox OS +slug: Archive/B2G_OS/Apps +translation_of: Web/Apps/Fundamentals +--- +

Le applicazioni per Firefox OS sono open Web App che si basano interamento sulle open Web Technology come JavaScript, HTML e CSS.
+ La nostra documentazione per le app copre principalmente quasi tutto ciò di cui hai bisogno e questi sono alcuni argomenti specifici per lo sviluppo su Firefox OS che ti potrebbe servire leggere.

+
+
+

Documentazione e tutorial

+
+
+ Scrivere una web app per Firefox OS
+
+ Un tutorial per creare a tua prima web app per Firefox OS.
+
+ Esperienza utente
+
+ Consigli per aiutarti nello sviluppo della tua app per renderla ancora più favolosa e attraente, sono inclusi modelli e codici già pronti.
+
+ Consigli e tecniche
+
+ Un assortimento di consigli e trucchi (ma anche soluzioni per problemi) che i nostri sviluppatori ti suggeriscono!
+
+

Vedi tutti...

+
+
+

Ricevi aiuto dalla comunità

+

Hai bisgno di aiuto per un problema con la tua app e non trovi una soluzione nella documentazione?

+
    +
  • Chiedi aiuto nel forum delle web app: {{DiscussionList("dev-webapps", "mozilla.dev.webapps")}}
    • +
  • Chiedi aiuto nel forum dedicato al Layout per problemi di HTML e CSS: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}
    • +
  • Chiedi aiuto sul canale IRC di Mozilla: #openwebapps
    • +
+

E non ti dimenticare della netiquette...

+

Strumenti

+ +

Vedi tutti...

+ + +
+
+

 

diff --git a/files/it/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html b/files/it/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html new file mode 100644 index 0000000000..d186c908cb --- /dev/null +++ b/files/it/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html @@ -0,0 +1,34 @@ +--- +title: Scrivere una web app per Firefox OS +slug: Archive/B2G_OS/Apps/Writing_a_web_app_for_Firefox_OS +translation_of: Web/Apps/Fundamentals/Quickstart +--- +

Le app per B2G/Firefox OS sono web app scritte in HTML, CSS e JavaScript. Le puoi pubblicare sul web esattamente come faresti con un sito. Per rendere un sito installabile come web app sui dispositivi devi solo aggiungere un file manifest e un pulsante al tuo sito per avviare l'installazione.

+ +

I seguenti argomenti sono il punto di partenza raccomandato:

+ + + +

Naturalmente sentititi libero di immergerti ancora più in profondità nelle open Web Apps!

+ +

Installare le web app

+ +

Dopo aver pubblicato app e file manifest sul web devi far in modo che il browser se ne accorga. Nel momento dell'installazione, il browser cerca il file manifest e aggiunge ciò che serve alla home screen, etc.

+ +

Per installare un'app devi fare eseguire una chiamata a navigator.mozApps.install API. Questo è un esempio per il pulsante di installazione che puoi inserire nella tua app quando la pubblicherai:

+ +
<script>
+var manifest_url = "http://my.webapp.com/manifest.json";
+</script>
+
+<button onclick="navigator.mozApps.install(manifest_url); return false;">
+  Installa questa fantastica app nella tua schermata Home!
+</button>
+
+ +

Nota: questo pulsante potrebbe anche essere aggiunto in un app market come il  Firefox Marketplace, ma spesso è molto comodo avere un link a "Installa come Web app" sulla pagina principale del tuo sito.

+ +

Adesso visita il tuo sito nel browser di B2G/Firefox OS e installa la tua app cliccando sul bottone "Installa come web app".

diff --git a/files/it/archive/b2g_os/automated_testing/index.html b/files/it/archive/b2g_os/automated_testing/index.html new file mode 100644 index 0000000000..9a725806c4 --- /dev/null +++ b/files/it/archive/b2g_os/automated_testing/index.html @@ -0,0 +1,93 @@ +--- +title: Automated Testing of Firefox OS +slug: Archive/B2G_OS/Automated_testing +translation_of: Archive/B2G_OS/Automated_testing +--- +

Dato che  Firefox OS è ancora in fase di sviluppo, e il supporto per nuovo hardware sarà imminente per il prossimo futuro, è importante sapere come provarlo. Questa pagina offre articoli che forniscono informazioni su vari aspetti della sperimentazione Firefox OS, tra cui l'esecuzione di test differenti, l'automazione, e risultato di reporting e di monitoraggio.

+ +

Inziamo

+ +
+
Esecuzione di test su Firefox OS: Una guida per gli sviluppatori
+
A, guida pratica sviluppatori focalizzati ad ottenere iniziato con l'esecuzione dei test. Questo è dove si dovrebbe cominciare se non siete esperti nella gestione di test di Mozilla e sistemi di automazione. Se si, allora probabilmente avete un'idea di ciò che i test che si desidera eseguire e come, e si può saltare a delle guide dettagliate più specifici indicati di seguito.
+
+ +

Gaia tests

+ +

These articles cover the primary test suites designed to put Gaia through its paces.

+ +
+
Gaia UI tests
+
Python tests for Gaia UI interactions and features.
+
Gaia integration tests
+
JavaScript integration tests for Gaia, based on Marionette.
+
Gaia unit tests
+
Gaia unit tests with no UI interaction; written in JavaScript, not Marionette-based.
+
Gaia performance tests
+
Measures Gaia app performance based on internal instrumentation. The testing harness is in-tree.
+
+ +

B2G tests

+ +

The guides below cover a number of different test harnesses that test various aspects of B2G functionality.

+ +
+
Mochitests
+
Gecko functional and API tests; HTML & JS based.  No Gaia interaction.
+
Reftests
+
Gecko rendering correctness tests.
+
WebAPI tests
+
Gecko JS-based WebAPI tests; most of these require an emulator.
+
xpcshell tests
+
Headless tests of Gecko XPCOM APIs.
+
B2GPerf
+
Measures Gaia app performance based on internal instrumentation.
+
Eideticker
+
Provides performance measurements for Firefox OS based on video captures.
+
Endurance tests
+
Long-running repetitive tests designed to find memory leaks and stability problems.
+
MTBF test
+
This is a test framework based on non-restart gaia-ui-test. It tries to locate all kinds of issue prevents tests from running in a long time. (Currently, it is owned by Taiwan QA team and still a developing test framework)
+
Memory tests - coming soon
+
Repetitive tests run per-commit to mozilla-central, reporting to https://areweslimyet.com/, designed to find problems with memory usage.
+
+ +

Supporting documentation

+ +

This section provides links to some of the supporting technologies that underpin Mozilla's tests, which you may want to find more information about.

+ +
+
Marionette
+
A remote test driver based on Selenium WebDriver.
+
Marionette JavaScript tests
+
A node.js-based runner for Marionette.
+
Marionette Python tests
+
A Python runner for Marionette.
+
+ +
+

Note: If you want to run Marionette against a production build (to run gaia integration tests, gaia-ui-tests, etc.), you can install Marionette as an extension (this currently only works for 1.3 builds, but more support will be added soon.)

+
+ +

Continuous integration and result reporting

+ +

The following articles cover the continuous integration and result reporting mechanisms Mozilla uses to store and intepret test data.

+ +
+
TBPL
+
Understand the tests and builds that run on TBPL.
+
Jenkins
+
Understand the tests that are run on real devices via Jenkins.
+
Datazilla
+
Understand which performance tests are reporting to the Datazilla dashboard, and what those tests measure.
+
Test execution chart
+
A chart showing which tests are being run — on what devices and where — and which platforms are supported for each test.
+
+ +

Unit testing framework video

+ +

{{EmbedYouTube("LxnRIm0wLLo")}}

+ +
+
 
+
diff --git a/files/it/archive/b2g_os/building/index.html b/files/it/archive/b2g_os/building/index.html new file mode 100644 index 0000000000..ce4dcf887b --- /dev/null +++ b/files/it/archive/b2g_os/building/index.html @@ -0,0 +1,241 @@ +--- +title: Build-are Firefox OS +slug: Archive/B2G_OS/Building +translation_of: Archive/B2G_OS/Building +--- +
+

Once you've set up your build system and performed your initial pull and configure of the code, you can build Boot to Gecko. This guide explains how.

+
+

Updating your code

+

If this isn't your very first time building B2G, you might want to pull the latest code before you start to build. To do that, you should update both the B2G tools and the dependencies, using the following two commands:

+
git pull
+./repo sync -d
+
+

You can update a specific make target's repository by specifying its name:

+
./repo sync gaia
+
+

The repo command has other options available that might be interesting; repo help will give you a lot of information.

+

Building

+
+

Note: Before building, you may want to set up a .userconfig file to customize the build. See Customization with the .userconfig file for details.

+
+

To build Boot to Gecko, simply use the build.sh tool:

+
cd B2G
+./build.sh
+
+

Time for another coffee break, or possibly a nap (especially if this is your first build). As in the configure step on the previous page, if you are using a directory of previously-extracted Android system files, you should set ANDROIDFS_DIR before running build.sh.

+

Building specific modules

+

If you want to build just a particular module, such as Gecko, you can specify it by name:

+
./build.sh gecko
+
+

In order to refresh only one application, you can build only gaia module by using the BUILD_APP_NAME environment variable:

+
BUILD_APP_NAME=calendar ./build.sh gaia
+

To get a list of the modules you can build, you can do:

+
./build.sh modules
+
+

Setting the number of processor cores to use

+

By default, the B2G build scripts use the number of cores your system has plus two as the number of parallel tasks to run. You can change this by specifying the -j parameter when running build.sh. This can be handy if you're using your system for other things while building in the background and need to reduce CPU load a bit. It's also handy when you're having build problems, as it can make reading error output from the build process easier if you have just one task going at a time!

+

For example, to build using just two parallel tasks:

+
./build.sh -j2
+
+

The most common use case for this, however, is to prevent builds from running in parallel at all. This makes the output of the process much easier to read, making it easier to sort out build problems. To do this:

+
./build.sh -j1
+
+

Building multilocale

+

To create a multilocale build, do the following:

+

Gaia

+
    +
  1. Determine which Gaia languages file to use. We're currently using locales/languages_dev.json and locales/languages_all.json as our Gaia languages files.
    2. +
  2. Clone the appropriate locales from http://hg.mozilla.org/gaia-l10n into a directory; we use gaia-l10n/. You could use the locales/ directory . You'll need to clone a repo for each locale listed in the languages file.
    3. +
  3. In your environment, set LOCALE_BASEDIR to the absolute path of the directory in step 2. Set LOCALES_FILE to the absolute path of the file in step 1.
    4. +
  4. Also, you can set a GAIA_DEFAULT_LOCALE if you want to set a default locale.
    5. +
+
cd gaia/locales/
+hg clone https://hg.mozilla.org/releases/gaia-l10n/v1_2/es
+
+ Set your environment variables:
+
+  
+
export LOCALE_BASEDIR=$PWD/locales
+export LOCALES_FILE=$PWD/locales/languages_dev.json
+export GAIA_DEFAULT_LOCALE=es
+
+

And the languages-dev.json could be replaced by your own languages-own.json path, which could formed like this. You would need to add an entry per each repo cloned in your locales directory.:

+
{
+  "en-US"     : "English (US)",
+  "es"        : "Español"
+}
+
+
+

Since bug 884752 landed (November 2013), to add keyboard layouts (if available in Gaia), you can use parameter GAIA_KEYBOARD_LAYOUTS. 

+

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=884752

+

Layouts: https://github.com/mozilla-b2g/gaia/tree/v1.2/keyboard/layouts

+

For example, to add Spanish and Italian keyboard layout, run the previous command adding

+ 
  GAIA_KEYBOARD_LAYOUTS=en,es,it
+

At this point you're ready to flash Gaia to the phone for the first time. Connect the phone and make sure Remote Debugging is checked in Settings > Device Information > More Information > Developer.  You only need to do this once, for your own build of Gaia will have that pref turned on thanks to REMOTE_DEBUGGER=1:

+ 
 make clean && make production LOCALES_FILE=locales/languages-own.json
+

Gecko

+
    +
  1. Determine which Gecko languages file to use. We're currently using b2g/locales/all-locales as our Gecko languages file.
    2. +
  2. Clone the appropriate locales into a directory; this can be gecko-l10n/ . + +
    3. +
  3. Clone compare-locales.
    4. +
  4. +

    In your environment, set L10NBASEDIR to the absolute path of the directory in step 2. Set MOZ_CHROME_MULTILOCALE to a string of space-delimited locales from step 1.

    +

    Add the compare-locales/scripts dir to your PATH, and compare-locales/lib to your PYTHONPATH.

    + For instance, + 
    export L10NBASEDIR=$PWD/gecko-l10n
+export MOZ_CHROME_MULTILOCALE="ja zh-TW"
+export PATH="$PATH:$PWD/compare-locales/scripts"
+export PYTHONPATH="$PWD/compare-locales/lib"
+
    +

    Once you have the above set up, you can run build.sh.

    +

    You can use .userconfig as well:

    + 
    ## Gaia
+export GAIA_DEFAULT_LOCALE=es
+export LOCALE_BASEDIR=/b2g/gaia-l10n-transifex-v1.2/
+export LOCALES_FILE=/b2g/languages_propio.json
+
+## Gecko
+export L10NBASEDIR='/b2g/gecko-l10n-v1.2'
+export MOZ_CHROME_MULTILOCALE="es-ES eu ca gl pt-BR"
+export PATH="$PATH:/b2g/compare-locales/scripts"
+export PYTHONPATH="/b2g/compare-locales/lib"
+
    +
    5. +
+
+

There are some mappings between Gaia languages and Gecko ones. For example, in Gaia, Spanish is "es", but on Gecko is tranlated to "Spanish of Spain" (es-ES)

+
+

These instructions may change as we smooth things out.

+

Known errors

+

"Build failed!"

+

If you get a general "Build failed" message, you should always try reconnecting your phone to your computer; sometimes the phone can become unmounted for a variety of reasons.

+
+

Note that configuring and building B2G for Keon DOESN'T WORK on Mac. You'll need to use Linux to build for this device.

+
+

Mountain Lion-specific build errors

+
+

1. If you are building on OS X 10.8 "Mountain Lion" (Xcode 4.4.1 or later) and encounter the following error:

+ 
external/qemu/android/skin/trackball.c:130:25: error: 'M_PI' undeclared (first use in this function)
+ Edit the file: B2G/external/qemu/Makefile.android and add in line 78:
+ 
MY_CFLAGS += -DM_PI=3.14159265358979323846264338327950288   #/* B2G_fix: not finding M_PI constant */
+
+
+
+ 2. If you are on Mountain Lion and you receive an error during ./build.sh like:
+
+ 
/System/Library/Frameworks/IOKit.framework/Headers/usb/USB.h:797:9: error: too many #pragma options align=reset
+

Replace all instances of '#pragma options align=reset' with '#pragma pack()' inside /System/Library/Frameworks/IOKit.framework/Headers/usb/USB.h

+
+

Undefined symbols "_sqlite3_androidopt_handle_pragma" and "_sqlite3_androidopt_open"

+

This error appears if you are building on OS X 10.7 or newer with Xcode 4.5 or newer. To fix this, apply the patch at https://groups.google.com/forum/#!msg/android-building/yAfPyUqCsiQ/7zvICk4GWjYJ to the external/sqlite/dist/Android.mk file.

+

KeyedVector.h:193:31: error: indexOfKey was not declared in this scope

+

This error appears when your gcc version is too recent. Install gcc/g++/g++-multilib 4.6.x versions. See Customizing with the .userconfig file for more information.

+
+

Community Note: It is possible to use gcc 4.7.x with slight modifications to the B2G code (gcc will guide you) but you won't get any help! Neither with modifying the code nor with bugs you encounter.

+
+

arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)

+

If you see this message, it most likely means that free memory is lacking. Ensure there is enough free memory before running ./build.sh. It should run fine if your system has 4GB of RAM.

+

"...is referenced by DSO" error

+

While building the emulator, if you get /usr/bin/ld: out/host/linux-x86/obj/EXECUTABLES/triangleCM_intermediates/triangleCM: hidden symbol `_XGetRequest' in out/host/linux-x86/obj/STATIC_LIBRARIES/libSDL_intermediates/libSDL.a(SDL_x11dyn.o) is referenced by DSO.

+

You can get this with some versions in binutils. If you run Debian Stable, you can use the gold linker by installing the package binutils-gold. Note that the gold linker is already installed by binutils, but it's not used by default; binutils-gold does just that.

+

If you get build errors while the build system is running tests

+

Sometimes (especially after build tool or operating system updates) you'll get weird errors like this when the build system runs its post-build tests:

+ 
Generating permissions.sqlite...
+test -d profile || mkdir -p profile
+run-js-command  permissions
+WARNING: permission unknown:offline-app
+WARNING: permission unknown:indexedDB-unlimited
+build/permissions.js:122: NS_ERROR_UNEXPECTED: Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPermissionManager.add]
+make[1]: *** [permissions] Error 3
+make: *** [gaia/profile.tar.gz] Error 2
+

In this situation, try deleting the gaia/xulrunner-sdk directory and re-pulling the code:

+ 
rm -r gaia/xulrunner-sdk
+
+

This deletes the downloaded, precompiled copy of XULRunner that the build system retrieves automatically; on your next build, a new copy of XULRunner will be automatically retrieved.

+

Cannot fetch platform/libcore

+

If you tried to configure your B2G build for Nexus S (./config.sh nexus-s) and got an error related to libcore, it is because of a problem with the linaro git that feeds into this. To fix this, checkout the B2G manifest like so:

+ 
git clone https://github.com/mozilla-b2g/b2g-manifest.git
+

Edit the nexus-s.xml file in this repo, replacing the linaro git entry with a reference to the aosp entry, which should read like so:

+ 
<default revision="refs/tags/android-4.0.4_r1.2"
+              remote="aosp"
+              sync-j="4" />
+

Commit these changes (git commit -a) and then change the config.sh file in the master branch of the main B2G repo that you checked out to point to your modified local manifest instead of the Mozilla one:

+ 
GITREPO=${GITREPO:-"file:///home/path/to/my/b2g-manifest"}
+

clang errors when building with Xcode 5 on Mac

+

If you are building on Mac OS X 10.8 with Xcode 5, you will likely see errors like the following:

+ 
clang: error: argument unused during compilation: '-include system/core/include/arch/darwin-x86/AndroidConfig.h'
+clang: error: argument unused during compilation: '-U DEBUG'
+clang: error: argument unused during compilation: '-U DEBUG'
+clang: error: argument unused during compilation: '-MF out/host/darwin-x86/obj/EXECUTABLES/obbtool_intermediates/Main.d'
+make: *** [out/host/darwin-x86/obj/EXECUTABLES/obbtool_intermediates/Main.o] Error 1
+

This is because Xcode 5 changes the g++ compiler in /usr/bin, which breaks the build process if you try to use it to compile. In order to work around the problem, edit the following line in build/core/combo/HOST_darwin-x86.mk:

+ 
HOST_CXX := g++
+

to

+ 
HOST_CXX := g++-4.6
+ifeq (,$(wildcard /usr/local/bin/g++-4.6))
+ HOST_CXX := g++
+endif
+

Next, you'll want to uninstall gcc, using brew (this assumes you've run the Mac OS bootstrap script — if not, you'll need to complete that step before continuing):

+ 
brew uninstall gcc-4.6
+

Now reinstall gcc with multilib and c++ support:

+ 
brew install --enable-cxx https://gist.github.com/artlogic/6988658/raw/aeb9d1ea098274ad3f3fe2637b9df7f308a8a120/gcc-4.6.rb
+

Make sure /usr/local/bin is on your PATH. You can do this temporarily by typing the following into the command prompt:

+ 
export PATH=/usr/local/bin:$PATH
+

You can make the above change permanent by adding it to the .bash_profile file in your home directory.

+

After you've set your PATH, make sure you can run both of the following commands:

+ 
gcc-4.6 -v
+
+g++-4.6 -v
+

If either of these commands fail, you may need to relink your gcc using brew with the following command:

+ 
brew link --overwrite gcc-4.6
+

It's also possible that /usr/bin/c++ is not pointing at clang++ as it should be with Xcode 5 installed. You can determine if it is by typing the following:

+ 
ls -l /usr/bin/c++
+

It should return something that looks like this:

+ 
lrwxr-xr-x 1 root admin 7 Sep 19 11:40 /usr/bin/c++ -> clang++
+
+

If c++ is pointing at something other than clang++, update it with the following commands:

+ 
sudo rm /usr/bin/c++
+
+sudo ln -s /usr/bin/clang++ /usr/bin/c++
+

Cannot pull files from backup directory

+

This could happen when the USB connection is broken while the script pulls data from device to computer.

+

When you run the script again, you'll probably get the following (the example is for the Peak device):

+ 
Pulling files from ../../../backup-peak
+cat: ../../../backup-peak/system/build.prop: No such file or directory
+Found firmware with build ID
+Pulling "libaudioeq.so"
+cp: cannot stat `../../../backup-peak/system/lib/libaudioeq.so': No such file or directory
+Failed to pull libaudioeq.so. Giving up.
+
+> Build failed! <
+
+Build with |./build.sh -j1| for better messages
+If all else fails, use |rm -rf objdir-gecko| to clobber gecko and |rm -rf out| to clobber everything else.
+

To solve this, it is not necessary to remove the whole objdir-gecko or out directories. Just remove the backup directory, like this (for the example above):

+ 
$rm -rf backup-peak
+

Next steps

+

After building, your next step depends on whether you built Boot to Gecko for the emulator or for a real mobile device; see the following articles for details:

+ +
+

Submitting bugs on B2G/Firefox OS/Gaia

+

Once you've got a B2G/Firefox OS build running, you'll probably want to start to file bugs against this specific version, so the Firefox OS community can improve things as effectively as possible. You'll want to file the bug on Bugzilla, under the "Firefox OS" project, but you should include version specifics:

+
    +
  1. To start with, tell us the major version number, e.g. 1.4.0.0-prerelease. This can be found on the device under Settings > Device Information.
    2. +
  2. You can provide more specific version identifiers by  returning the current hashes from the gaia and gecko repositories. This can be done like so: + 
    #!/bin/bash
+(cd gaia;  echo "gaia  $(git rev-parse HEAD)")
+(cd gecko; echo "gecko $(git rev-parse HEAD)")
    +
    3. +
diff --git a/files/it/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html b/files/it/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html new file mode 100644 index 0000000000..b2c3808168 --- /dev/null +++ b/files/it/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html @@ -0,0 +1,227 @@ +--- +title: Dispositivi compatibili +slug: Archive/B2G_OS/Building_and_installing_Firefox_OS/Compatible_Devices +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices +--- +
+

Nota: Ogni dispositivo ha un proprio "nome in codice" da usare per la compilazione. Per esempio per compilare per il Nexus 6 scrivere:  ./build.sh nexus-6-l

+
+ +

Dispositivi di sviluppo

+ +

Questi dispositivi sono i dispositivi di riferimento ufficiali di Mozilla per lo sviluppo di Firefox OS. 

+ + + + + + + + + + + + + + + + + + + +
Z3 Compact (Kitkat)Z3 (Kitkat)Flame
aries-kkleo-kkflame-kk
+ +

 

+ +

Dispositivi supportati dalla Community

+ +

Nexus

+ +

Questi dispositivi sono (quasi del tutto) automaticamente supportati da Firefox OS poiche' sono dispositivi di riferimento di Google per AOSP (Android Open Source Project).

+ + + + + + + + + + + + + + + + + + + +
Nexus 6Nexus 5Nexus 4
nexus-6-lnexus-5-lnexus-4-kk
+ +

Sony

+ +

Questi dispositivi usano il programma Open Device di Sony Mobile, che intende supportare tutti i moderni dispositivi Xperia per l'AOSP. Attualmente 10 dispositivi su 3 piattaforme sono candidabili alla compilazione.

+ +

Questi dispositivi sono costruiti sulla base Lollipop AOSP.

+ +
+

Finora nessun dispositivo Sony supporta l'uso della fotocamera. Questo comunque rientra tra i lavori da fare per gli sviluppatori dei dispositivi Sony.

+
+ +

Piattaforma Sony Shinano

+ + + + + + + + + + + + + + + + + + + + + + +
Z3Z3 CompactZ3 Tablet CompactZ2
leo-laries-lscorpion-lsirius-l
+ +
+
+ +

Piattaforma Sony Rhine

+ +
+

Rhine devices use a legacy NFC chip so this feature is currently missing. See bug 1226720

+
+ + + + + + + + + + + + + + + + +
Z1Z1 Compact
honami-lamami-l
+ +

Sony Yukon Platform

+ + + + + + + + + + + + + + + + + + + + + + +
T2 UltraT3M2E3
tianchi-lseagull-leagle-lflamingo-l
+ +

CyanogenMod Supported Devices

+ +

Here be dragons!

+ +

Legacy Devices

+ +

Some old devices are no longer maintained directly by Mozilla, but a community of developers keeps these devices alive (yay open source!).

+ +

Obsolete Devices

+ +

Several old devices are no longer maintained, and do not have a community to keep them alive. The current status of these devices is unknown, which probably means they cannot be built on Firefox OS master branches.

+ + + + + + + + + + + + + + + + + + + + + + +
Geeksphone PeakGeeksphone KeonZTE OpenTCL Fire
peakkeoninarihamachi
+ + + + + + + + + + + + + + + + + + + + + + +
Samsung Galaxy S2Galaxy NexusNexus SNexus S 4G
galaxy-s2galaxy-nexusnexus-snexus-s-4g
+ + + + + + + + + + + + + + + + + + + + + + +
Foxconn InFocusVia VixenPandaboardRaspberry Pi
flatfishvixenpandaboardrpi
diff --git a/files/it/archive/b2g_os/building_and_installing_firefox_os/index.html b/files/it/archive/b2g_os/building_and_installing_firefox_os/index.html new file mode 100644 index 0000000000..2d606cdb93 --- /dev/null +++ b/files/it/archive/b2g_os/building_and_installing_firefox_os/index.html @@ -0,0 +1,120 @@ +--- +title: Compilare e installare B2G OS +slug: Archive/B2G_OS/Building_and_installing_Firefox_OS +tags: + - B2G OS + - Documentazione compilazione +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS +--- +

+ +
+

Poiché B2G OS è attualmente in sviluppo ed in stato di pre-release, il modo migliore per assicurarti di avere installata la versione più aggiornata è compilarla ed installarla da solo. Gli articoli mostrati in questa pagina ti guideranno attraverso compilazione e l'installazione di B2G OS su un emulatore, su un dispositivo compatibile o sull'interfaccia Gaia del browser Firefox.

+
+ + + + + + + + +
+

Ottenere e compilare B2G OS

+ +
+
Sommario del processo di compilazione di B2G OS
+
Compilare ed installare B2G OS richiede un consistente impiego di tempo, banda e potenza computazionale. Questa pagina delina gli obiettivi del processo di compilazione ed i relativi passaggi per aiutare l'utente lungo il suo percorso.
+
Prerequisiti per la compilazione
+
Di cosa avrai bisogno (e cosa è necessario fare) prima di compilare B2G OS per la prima volta.
+
Preparare la tua prima compilazione
+
Prima che tu possa compilare B2G OS, sarà necessario clonare il repository e configurare la compilazione. Questo articolo spiega come fare.
+
Compilare B2G OS
+
Come compilare B2G OS.
+
Add-on per l'installazione di B2G OS
+
L'add-on B2G installer aiuta a risolvere il problema, di non poco conto, di non poter ridistribuire compilazioni dell'intero sistema operativo, per via dei cd. "blobs" (ovvero i componenti proprietari). Questo articolo illustra il funzionamento dell'add-on e come installarlo.
+
+ +

Ulteriore materiale di riferimento

+ +
+
Compilare B2G OS per Flame su Mac OS X
+
Una guida scritta dalla comunità per compilare B2G OS per il dispositivo di riferimento Flame, su Mac OS X.
+
Dispositivi compatibili
+
Un elenco ufficiale delle dei dispositivi di sviluppo che supportano B2G OS.
+
Creare e applicare pacchetti di aggiornamento per B2G OS
+
Questa guida estremamente dettagliata spiega come creare pacchetti di aggiornamento OTA/FOTA, che possano poi essere distribuiti ai dispositivi degli utenti per fornire aggiornamenti software.
+
Compilare e installare community builds FOTA
+
Una guida scritta dalla comunità per creare ed installare pacchetti FOTA.
+
Foglio di riferimento per le variabili di compilazione di B2G OS
+
Un utile riferimento per tutte le variabili di compilazione di B2G, Gaia e Gecko e dei comandi di cui potresti avere bisogno durante le operazioni di compilazione legate a B2G OS.
+
+ 		+

Installare B2G OS e/o Gaia

+ +
+
Scegliere come eseguire Gaia e B2G OS
+
Puoi usare Gaia all'interno di B2G, oppure far girare B2G OS su un dispositivo mobile o ancora su un simulatore per desktop. Questa guida ti aiuterà a decidere quale scelta è la migliore per le tue esigenze.
+
Compilare il simulatore di B2G OS
+
Una guida per compilare il simulatore di B2G OS, che permette di eseguire Gaia e le Web apps in un ambiente basato su Gecko simile ai dispositivi odierni, sul tuo computer desktop.
+
Utilizzare degli emulatori di B2G OS
+
Una guida per compilare ed utilizzare gli emulatori di B2G OS, con spiegazioni su quali usare a seconda della necessità.
+
Installare B2G OS su dispositivo mobile
+
Come installare B2G OS su un vero dispositivo mobile.
+
+
+ +

 

diff --git a/files/it/archive/b2g_os/building_and_installing_firefox_os/sommario_del_processo_di_compilazione_di_b2g_os/index.html b/files/it/archive/b2g_os/building_and_installing_firefox_os/sommario_del_processo_di_compilazione_di_b2g_os/index.html new file mode 100644 index 0000000000..e7a0f71285 --- /dev/null +++ b/files/it/archive/b2g_os/building_and_installing_firefox_os/sommario_del_processo_di_compilazione_di_b2g_os/index.html @@ -0,0 +1,195 @@ +--- +title: Sommario del processo di compilazione di B2G OS +slug: >- + Archive/B2G_OS/Building_and_installing_Firefox_OS/Sommario_del_processo_di_compilazione_di_B2G_OS +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary +--- +

+ +
+

Building and installing B2G OS requires a significant amount of time, network bandwidth, and computational power. Unfortunately, along the way, things are liable to go wrong. This page outlines the goals of the build process and the steps of that process in order to help users along the way. Details of each step are discussed in the linked pages.

+
+ +
+

Note: The B2G OS build process is full of references to 'B2G' or 'Boot2Gecko'. 'Boot2Gecko' was the original code name of the B2G OS project.

+
+ +

The Build Goal: three 'image' files

+ +

The overall purpose of the build process is to build three files that can be installed onto a device compatible with B2G OS.

+ + + + + + + + + + + + + + + + +
boot.imgThe Linux kernel and a root filesystem image, the latter providing a usable set of basic Unix tools.
system.imgThe core of B2G OS including parts of Gonk, the port of Gecko, and the b2g executable.
recovery.imgA Linux kernel and a root filesystem image along with a simple tool to enable users to fix a bad installation.
+ +

Once the three images have been created, they can be installed onto a device.

+ +

B2G OS is built on top of the lower levels of Android Open Source Project (AOSP). The AOSP tools adb and fastboot provide powerful tools to access and manipulate a device. Specifically, the command adb reboot bootloader instructs a connected device to reboot and pause at the early bootloader stage. The command fastboot flash $partition $image can be used to install an image onto the device.

+ +

The Boot Image

+ +

The Boot Image (boot.img) is a combination of the Linux kernel and an initial root partition providing the core utility software and initialization scripts. The latter will be copied into device memory for efficient use by the device and therefore is called a "ramdisk". The Boot Image will be copied to the 'boot' partition on the device and the contents of the ramdisk are visible starting in the root directory when the device filesystem is accessed at runtime, such as when using adb shell.

+ +

The Boot Image also establishes the permissions of the root user in the default.prop file in the root directory.

+ +

It is also possible to modify an existing boot image by inspecting the file, splitting the file into the kernel and ramdisk image, extracting the contents of the ramdisk image, modifying those contents, re-assembling the ramdisk image, then rebuilding a functional boot.img. See, for example, the Alcatel One Touch Fire Hacking (Mini) Guide page.

+ +

Boot Images can be tested before being installed by 'sideloading' them; the device can be started and paused in the bootloader and then fastboot can be used to boot from the Boot Image without installing it using the command fastboot boot boot.img.

+ +

The System Image

+ +

The System Image (system.img) provides the core of B2G OS:

+ + + +
+

See the B2G OS platform guide for more information about the platform architecture.

+
+ +

The System Image will be copied to the system partition on the device and will be visible in the /system/ directory when the device filesystem is accessed at runtime.

+ +
+

Note: The System Image also provides the binary blobs that may be used by the device, notably the RIL (Radio Interface Layer) blob controlling the cellular radio on the device.

+
+ +

The Recovery Image

+ +

The Recovery Image (recovery.img) contains the same kernel and a similar ramdisk as present on the Boot Image partition. The recovery image however uses a different initialization script, which leads the user to a set of recovery commands accessible using the hardware buttons on the device.

+ +

The Recovery Image will be copied to the recovery partition on the device, which is not mounted onto the filesystem at regular runtime.

+ +

The Build Process: setup, configure, build, install

+ +

The overall process of building and installing B2G OS involves four steps:

+ + + + + + + + + + + + + + + + + + + + +
SetupObtain copies of all the programs used by the build process, such as the right compilers and libraries.
ConfigureDownload the source code that will be built and create the .configure file that defines environmental variables specifying the paths and other values used in the build.
BuildBuild the Gecko profile of the user and the Gaia web applications for the device.
InstallInstall the files on a device.
+ +

 

+ +

Setup

+ +

Inital setup must be done to ensure the computer running the build has all of the software required during the build, such as compilers and build tools.

+ +

This step can be done by hand or using a script. Details are discussed in the B2G OS build prerequisites page.

+ +
+

Note: On UNIX and UNIX-like machines, the presence of the required software can be checked using the unix command which with the name of the required program as a parameter.

+
+ +

Configuration

+ +

The actual build process starts with obtaining a copy of the B2G OS (or B2G) software, usually by creating a Git clone of the B2G project. The build configuration will both obtain copies of all the source code which is to be built and create the .config file that specifies variables for the build.

+ +

This is run with the config.sh script. Details are discussed in the Preparing for your first B2G build page.

+ +

The configure script needs a parameter specifying the type of device to build. The build names are code names linked to the CPU architecture rather than a specific device, and there is currently no way to establish which build works for which physical device. A list of available code names can be found here.

+ +

The configure step will also use the Android Open Source Project repo tool to download (or update) a copy of all the code used in the build. These copies will be stored in the .repo/projects directory. Due to this activity, the configure step can take a long time and will download a lot of data.

+ +

Build

+ +

The build step will actually compile all of the source code and produce the output images.

+ +

This is run with the build.sh script. Details are discussed in the Building B2G OS page.

+ +

By default, the build step is monolithic, attempting to build everything at once from the Android Open Source Project tools to the Linux kernel to the Gaia web applications. When the build fails, it can sometimes be unclear in which step it has failed.

+ +

It is possible to build only certain parts of the whole B2G  stack. For example, the Gecko system only can be built by calling the build script with the gecko parameter. Similarly, Gaia can be built on its own using the gaia parameter. These parts can then be installed separately onto the device as explained next.

+ +

It is also possible to build the images discussed in the first part of this page. For example, the system image can be built using ./build.sh out/platform/$target/system.img, where the $target parameter is the same as given in the Configuration step.

+ +

Install

+ +

The install step will place the newly compiled code onto a device. This is run with the flash.sh script.

+ +

Individual parts of the build can be installed by adding a parameter to the flash script. For example, it is possible to install only the gaia web applications by specifying ./flash.sh gaia.

diff --git a/files/it/archive/b2g_os/debugging/index.html b/files/it/archive/b2g_os/debugging/index.html new file mode 100644 index 0000000000..12a896d185 --- /dev/null +++ b/files/it/archive/b2g_os/debugging/index.html @@ -0,0 +1,84 @@ +--- +title: Debugging on Firefox OS +slug: Archive/B2G_OS/Debugging +tags: + - B2G + - Debugging + - Firefox OS + - NeedsTranslation + - QA + - Testing + - TopicStub +translation_of: Archive/B2G_OS/Debugging +--- +
+

There are two main types of debugging you'll want to with Firefox OS: debugging apps, and debugging other aspects of the system. This section of the site provides articles covering the different tools at your disposal to debug your Firefox OS code.

+
+

Debugging apps

+

When debugging your web apps, the best tool at your disposal is Mozilla's powerful App Manager, which allows you to run your apps directly on a real device or simulator, update any changes instantly, and debug them directly on the device using Mozilla's excellent developer tools. This should be your first choice, especially for app/Gaia debugging.

+
+
+ Using WebIDE
+
+ The WebIDE is the replacement for the App Manager. Like the App Manager, it enables you to run and debug Firefox OS apps using the Firefox OS Simulator or a real Firefox OS device. However, it also provides an editing environment for you to create and develop apps.
+
+ Using the App Manager
+
+ The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator, directly from your browser.
+
+ Debugging out of memory errors on Firefox OS
+
+ This article describes how B2G's multiprocess architecture affects what the phone does when we run out of memory, and how to understand and debug OOM crashes.
+
+

Debugging Gaia/B2G

+

If you want to debug code from the Gaia apps suite or B2G itself, the following tools will be of use to you.

+
+
+ Debugging using the desktop B2G client
+
+ You can use the dedicated B2G desktop application (and associated tools) to debug multiple aspects of B2G and Gaia.
+
+ Firefox OS crash reporting
+
+ This page details how to handle crash reporting on Firefox OS, including retrieving crash reports, and forcing crashes.
+
+ Debugging B2G using gdb
+
+ The popular gdb debugger can be used to debug Firefox OS and web apps running on a device, or on an emulator. This guide will show you how it's done.
+
+ Debugging B2G using Valgrind
+
+ Valgrind gives developers access to information about memory allocations, threads, and other information important to performance. This guide shows how to run Valgrind either on desktop B2G or select phone hardware.
+
+ Getting NSPR logs in B2G
+
+ You can use NSPR logs to record HTTP and other networking.
+
+ Debugging OpenGL
+
+ How to debug OpenGL code on Firefox OS.
+
+

General setup and information

+

The following articles provide information on individual aspects of setup for Firefox OS development. The chances are that you won't need these, especially if you are just debugging apps using the App Manager. But we have made them available here in case you do.

+
+
+ Developer settings for Firefox OS
+
+ There are a number of settings options available for developers on Firefox OS. This guide explains what they do and how to take advantage of them.
+
+ Installing and using ADB
+
+ Many aspects of Firefox OS development require installation of adb, the Android Debug Bridge. This article explains how to do that, and shares some common useful ADB commands.
+
+ On-device console logging
+
+ How to log to console on a Firefox OS device, and how to access the resulting logs for review on your computer.
+
+ Connecting a Firefox OS device to the desktop
+
+ This short guide explains how to set up your Firefox OS device and your desktop so that the desktop can communicate with the device over USB.
+
+ Setting up to debug Firefox OS code
+
+ Before you can begin using most of the tools integrated into Firefox for debugging code running under Firefox OS, you need to do a little configuration work. This article explains what you need to do.
+
diff --git a/files/it/archive/b2g_os/debugging/installazione_adb/index.html b/files/it/archive/b2g_os/debugging/installazione_adb/index.html new file mode 100644 index 0000000000..52672aa1be --- /dev/null +++ b/files/it/archive/b2g_os/debugging/installazione_adb/index.html @@ -0,0 +1,63 @@ +--- +title: Installazione e uso di ADB +slug: Archive/B2G_OS/Debugging/Installazione_ADB +translation_of: Archive/B2G_OS/Debugging/Installing_ADB +--- +
+

Molti aspetti dello sviluppo del SO Firefox richiedono l'installazione di ADB, l'Android Debug Bridge. Questo articolo spiega come fare, e condivide alcuni comandi ADB comuni utili.

+
+

Installazione di ADB

+

Puoi scaricare ed installare adb come parte del pacchetto Android SDK, per Mac, Linux o Windows — visita la pagina Ottenere l'Android SDK.

+

Le distribuzioni Linux più nuove hanno adb già nei loro repositories. Per Ubuntu 12.10 e successivi, esegui il seguente comando:

+
sudo apt-get install android-tools-adb
+

O per Fedora 18/19:

+
sudo yum install android-tools
+

O su OSX tramite Homebrew:

+
brew install android-platform-tools
+

Se la tua distribuzione non dispone di pacchetti per adb (es. Ubuntu 12.04 o Fedora 17), sarà necessario installare il pacchetto Android SDK per la tua piattaforma (avrai bisogno dell'ADT Bundle, non dell'opzione SDK Tools Only). Esegui quindi il loro gestore di pacchetti, $SDK_HOME/tools/android, e usa la GUI per installare "Android SDK Platform-tools".

+

Scopri dove adb viene installato (di solito in usr/bin, eventualmente anche dentro adt/platform-tools, a seconda di come lo hai installato). Assicurati di aggiungere questa cartella alla tua PATH. Questo può esser fatto aggiungendo la riga

+
PATH=$SDK_HOME:$PATH
+

sostituendo $SDK_HOME con il percorso dell'Android SDK, al tuo file ~/.bashrc o equivalente.

+

Risoluzione dei problemi

+

Se stai installando la versione 64-bit, e ottieni un errore "File non trovato" quando esegui 'adb' anche se il file è presente, è necessario installare le librerie di compatibilità a 32-bit. Per fare questo con apt:

+
sudo apt-get install ia32-libs
+

Comandi ADB comuni

+

Le sezioni seguenti spiegano alcuni comandi adb comuni, utili.

+

Riavvio del processo b2g

+

b2g è l'equivalente di un'applicazione XULRunner in esecuzione sul telefono in cima ad un kernel basato su Android. A volte potresti volerlo riavviare; questo è un modo per ripristinare l'ambiente applicativo senza riavviare l'intero dispositivo. E' possibile effettuarlo inserendo quanto segue nel tuo terminale mentre il tuo dispositivo è connesso al tuo computer (o durante l'esecuzione del debugger):

+
adb shell killall b2g
+

Abilitazione port forwarding per il debug

+

Per abilitare semplicemente il port forwarding (trasferimento dati tramite una specifica porta; per esempio se stai usando il Gestore di Applicazioni per il debug di applicazioni su un dispositivo Firefox OS), immetti il seguente comando nel tuo terminale:

+
adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
+

Avrete bisogno di fare questo ogni volta che il telefono viene riavviato o scollegato e poi ri-collegato. È possibile modificare il numero di socket, se necessario.

+

Forwarding delle porte a una macchina locale

+

Per il forwarding delle porte a un computer locale, è necessario scaricare i binari netcat e ssh, ed eseguire i seguenti comandi:

+
# questo è un trucco enorme, ma di fatto funziona...
+host$ adb forward tcp:7979 tcp:6969
+
+# crea qualche named pipe in modo da fare un netcat bidirezionale
+phone$ mknod readback p
+host$ mknod readback p
+
+# questo stabilisce una connessione all'host usata una volta sola
+# ascolto sulle porte 6969 e 5959 e inoltro di tutte le informazioni tra loro
+phone$ ./netcat -l -p 6969 < readback | ./netcat -l -p 5959 > readback
+# connessione alla porta 7979 (porta 6969 sul dispositivo) e il server ssh locale e inoltro di tutte le informazioni tra loro
+host$ ./netcat localhost 7979 < readback | ./netcat localhost 22 > readback
+
+# ora, quando ci colleghiamo alla porta 5959 sul telefono, sarà come connettersi al server ssh sull'host
+
+# uso inverso di netcat per impostare una connessione ssh all'host e inoltro della porta 9999 sul dispositivo verso il 'localhost:8000' (questo potrebbe essere qualsiasi cosa come 'google.com:80')
+phone$ ./ssh localhost -p 5959 -L 9999:localhost:8000
+

Questo inoltrerà la porta 9999 sul dispositivo verso la porta 8000 dell'host.

+

Alternativamente, puoi usare un server ssh (dropbear e host_key) direttamente sul dispositivo, usando i comandi seguenti:

+
phone$ DROPBEAR_PASSWORD=root ./dropbear -p 9000 -F -v -a -r host_key ./dropbear
+host$ adb forward tcp:8888 tcp:9000
+# l'autenticazione con chiave pubblica è stata hard-coded per avere successo (assicuratevi di avere una chiave pubblica per ssh da usare)
+host$ ssh -vvv root@localhost -p 8888 -R 9999:people.mozilla.org:80
+
+

Ulteriori risorse:

+ diff --git a/files/it/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html b/files/it/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html new file mode 100644 index 0000000000..648fcb8288 --- /dev/null +++ b/files/it/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html @@ -0,0 +1,197 @@ +--- +title: Filing bugs against Firefox OS +slug: Archive/B2G_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS +translation_of: Archive/B2G_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS +--- +
+
+
 
+
+ +
Questo articolo fornisce una guida per l'archiviazione di errori (bugs) individuati nel contesto del progetto Firefox OS , che include anche Gaia e B2G .
+
+ +

Bugzilla

+ +
+
+

Come nella maggior parte dei progetti Mozilla, Bugzilla viene utilizzato per gestire lo stato di bugs e problemi individuati in programmi appartenenti al progetto. Dopo aver scopeto un bug puoi archiviarlo in Bugzilla  - nota che esiste un prodotto specifico per Firefox OS, contenente componenti che trattano argomenti che possono essere classificati nel contesto di Gaia, Gonk e Gecko. Si consiglia di utilizzare questo componente per archiviare i bugs individuati in Firefox OS, Gaia, etc.

+
+
+ +

Archiviazione dei bugs

+ +

Per archiviare un bug, è possibile utilizzare questo modello proposto da Bugzilla e seguire le istruzioni riportate qui di seguito nel compilarlo.

+ +

Campi obbligatori e facoltativi

+ +

Quando si archivia un bug, alcuni campi sono obbligatori:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CampoDescrizione
ComponenteScegliete la categoria di appartenenza del bug. Se non avete idea di quale categoria assegnare, scegliete la categoria "Generale".
SommarioFornite un sintesi della descrizione del bug
DescrizioneDescrivete chiaramente la situazione. Un buon bug dovrebbe contenere una descrizione, passo per passo, della procedura per riprodurre il problema (Steps To Reproduce -STR), dei risultati che uno si aspetta e dei risultati riscontrati. Si prega di indicare anche la frequenza di riproduzione (cioè quante volte il bug appare se ripetete i passi più e più volte).
Informazione relativa al BuildAndate a Impostazioni> Informazioni sul dispositivo> Ulteriori informazioni e menzionate nel bug le seguenti caratteristiche: versione del sistema operativo, il numero dei build, la Versione della Piattaforma,  l' identificatore del Build, l' Aggiornamento del canale e l'informazione del Git Commit. (Se si dispone di un computer Mac / Linux con adb e git installato, è possibile eseguire questo script e incollare l'output dello script del bug.)
Immagini delle schermateSi prega di allegare una immagine dello schermo che possa essere utile per analizzare il bug. (Sul dispositivo Fiamma, tenere premuto il tasto Power e Abbassa Volume simultaneamente per 2 secondi fino a quando il telefono non mostri una notifica della avvenuta acquisizione ddell'immagine dello schermo. Succesivamente trasferire l'immagine acquisita sul computer utilizzando un attacco USB.)
VideoSe il bug riguarda transizioni dello schermo che sono difficili da catturare attraverso l'acquisizione di immagini delle schermate, si prega di girare un video. Caricate il file del video come allegato al bug oppure caricate il video su YouTube e poi allegate l'indirizzo dell'URL del video utilizzando la funzione di copia-incolla .
Registrazioni ADBSe il vostro computer contiene una installazione di ADB, per favore collegatelo al telefono ed eseguite il comando | adb logcat |. Si prega di inserire l'output di questo comando in un file di testo e quindi allegarlo al bug.
+ +

The following fields are optional:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CampoDescrizione
Dipedenze/blocchiMostare la dipendenza fra i vari bugs.
Parola chiaveParole chiave per Bugzilla. Gruppi specifici le useranno per rintracciare il bug.
LavagnaContiene etichette. Inserisci etichette utili per rintracciare il bug. Si consiglia di non rimuovereetichette assegnate da altri senza permesso.
Vedi AncheA volte due diversi problemi sono in qualche modo collegati. La loro connessione puo' essere riportata qui
BandierineBandierine per il monitoraggio dello stato; la bandierina più utilizzata nei bugs del sistema operativo Firefox e' "Blocca-B2G". Se un bug contiene la bandierina blocco-B2G, significa che e' necessario prestare più attenzione alle specificahe del bug in quanto puo' bloccare la distribuzione.
SicurezzaSe un bug è relativo alla sicurezza dei dati personali, la perdita di guadagno o simili questioni, selezionat la casella di controllo cosicche sarà visiable solamente ai dipendenti interessati.
+ +

Per ulteriori informazioni sui campi Bugzilla, è possibile visualizzare la pagina dei campi Bugzilla su Bugzilla.

+ +

Archiviazione di bugs di localizzazione

+ +

Quando uncontrate un stringa non tradotta puo' significare due cose:

+ + + +

Come archiviare bugs di localizzazione (l12y)

+ +
    +
  1. Nel sistema operativo Firefox, andate su Impostazioni> Informazioni sul dispositivo> Ulteriori informazioni e attivate il menu Developer
    2. +
  2. Andate a Impostazioni> Developer e attivate pseudo-localizzazione.
    3. +
  3. Andate a Impostazioni> Lingua e scorrere fino alla fine per selezionare inglese accentato.
    4. +
  4. Tornate indietro e guardate la stringa non tradotta. Se appare in normale inglese e non inglese accentato, si tratta molto probabilmente di un poblema legato allalocalizzabilità (l12y).
    5. +
  5. In Bugzilla, aprite un bug sotto la sezione del prodotto 'Firefox OS'. Selezionate il componente dove la stringa non tradotta appare. Aggiungete 'l12y' nel campo Parola chiave.
    6. +
  6. Si prega di compilare tutti gli altri campi obbligatori.
    7. +
+ +

Tipiche Parole chiave

+ +

La seguente tabella fornisce informazioni sulle tipiche parole chiave che vedrete utilizzate nei bugs del sistema operativo Firefox.
+
+
+ Si deve sempre indicare il build / l'OS / la piattaforma (e) utilizzati per verificare il bug nei commenti relativi all' errore riscontrato, prima di modificare lo stato a verificato. Se il bug è riportato su tutte e tre le piattaforme e si dispone di una sola piattaforma per verificare la correzione, andate avanti e annotate le vostre osservazioni nel bug, ma non segnalate il bug come verificato. Tutte le piattaforme devono essere controlle prima di modificare lo Stato a verificato.
+
+ Infine, se altri bug sono stati contrassegnati come un duplicato del bug che state verificando, assicuratevi di controllare e annotare pure quelli. Spesso i programmatori indicano bug correlati, ma non identici, come duplicati  e questi possono essere trascurati se non appaiono selezionati.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Parola ChiaveDescrizione
metaIndica che il bug è un bug di monitoraggio dello stato. Mozilla usa questa etichetta per controllare lo stato di vari bugs o delle implementazioni delle storie degli utenti. Una volta segnalato in questo modo, i programmatori non dovrebbero mettere delle pezze sopra a questi bugs. Si ricorda che i responsabili di progetto e il personale che si occupa della qualita' usano meta bugs per sequire lo stato delle varie applicazioni.
qablockerUtilizzare questa parola chiave per i bug che stanno bloccando test di verifica (manuali o automatizzati di un aspetto specifico) e che devono essere risolti prima della scadenza relativa alla pubblicazione della prossima versione Beta o RC.
qawantedUtilizzare questa parola chiave per i bug che hanno bisogno di più informazioni, che richiedono di essere riprodotti o verificati di nuovo, o che sono duplicati (ma non si riesce a trovare il bug originale che e' stato duplicato). Sulla lavagna viene riportato l' avanzamento delle verifiche di qualita' obbligatorie; questa parola chiave deve essere rimossa quando le verifiche di qualita' richieste sono state completate.
regression +

Questa parola chiave significa che il problema è stato risolto, ma poi è ritornato (regredito) e il bug in questione è un nuovo bug, archiviato per registrare la regressione. Può anche riferirsi a problemi al di fuori quelli identificati nella registrazione iniziale del bug o riscontrati nei test di fumo e che sono stati individuti nei build attuali e che funzionavano in build precedenti. Il monitoraggio di tali errori aiuta ad identificare aree di fragilita' e soggette a rottura. Tali errori sono utili per la identificazione di nuovi test da aagiungere ai test di verifica che appaionno nelle liste dei pre-Test e dei test di fumo.

+
regressionwindow-wanted +

Indica che il bug è una regressione e che sarebbe importante che qualcuno identificasse il momento in cui è accaduto e il relativo specifico controllo.

+
steps-wantedMette in evidenza un bug che potrebbe migliorare se qualcuno identificasse la procedura per riprodurlo.
verifymeSignifica che questo bug è pronto per essere verificato con l'ultima build FX OS da una persona diversa dal contatto di verifica qualita' indicato nel bug. Il bug contiene specifici dettagli di configurazione della macchinada utilizzarsi per verificare la correzione. Si dovrebbe cercare di riprodurre l'errore, e, se d'accordo che la stato Fixed è corretto, cambiare lo stato a verificato.
+  
crashAggiungete questa parola chiave se si incontra un rottura del programma in FX OS.
+ +
+

Nota: È possibile fare riferimento alle "Guida di come scrivere un Bug". La pagina WIKI di Mozilla B2G QA ha anche alcune risorse utili sulla gestione dei bug del sistema operativo di Firefox; le pagine più utili sono Uso di Bugzilla  e Incoming triage bug per Firefox OS.

+
+ +
+

Note: For more information on handling bugs during Gaia development, read Submitting a Gaia patch.

+
+ +

 

diff --git a/files/it/archive/b2g_os/developing_firefox_os/index.html b/files/it/archive/b2g_os/developing_firefox_os/index.html new file mode 100644 index 0000000000..7aceb1f5a9 --- /dev/null +++ b/files/it/archive/b2g_os/developing_firefox_os/index.html @@ -0,0 +1,45 @@ +--- +title: Developing Firefox OS +slug: Archive/B2G_OS/Developing_Firefox_OS +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Developing_Firefox_OS +--- +
+

This section provides useful documentation covering different ways in which the Firefox OS experience can be modified/customized during the build or app writing process, and how you can help to develop the platform.

+
+
+
+ Quickstart guide to Gaia development
+
+ Gaia is the collection of web apps which make up the front end of Firefox OS. Everything you see on the screen in Firefox OS is built using open Web technologies. This includes the home screen and all the default apps. This guide provides a quick and simple guide to getting started with modifying Gaia.
+
+ Build system primer
+
+ This article explains how Gaia's build system works, including the makefile, the build process, environment variables, and potential customizations.
+
+ Hacking Gaia
+
+ This article provides a detailed guide to modifying Gaia.
+
+ Market customizations guide
+
+ Market customizations allow you to specify build-time customization instructions (for example, which apps should be included in your build) in separate directories, without modifying the core Gaia repo. You can include your own customizations in distinct directories, or use the preexisting directories that come with the source. These customizations are specified with build options. In this article we look in detail at how to create and use these customizations.
+
+ Modifying the hosts file
+
+ A guide to what can be achieved by modifying the Firefox OS hosts file.
+
+ Customization with the .userconfig file
+
+ How to customize the build and execution of Firefox OS by changing the .userconfig file.
+
+ Customizing the keyboard in Firefox OS apps
+
+ This guide shows how to customize the keyboard in your Firefox OS apps.
+
+ Localizing Firefox OS
+
+ A guide to localising the Firefox OS platform, making it available in your preferred languages.
+
diff --git a/files/it/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html b/files/it/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html new file mode 100644 index 0000000000..05e211521d --- /dev/null +++ b/files/it/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html @@ -0,0 +1,188 @@ +--- +title: Localizzazione di B2G OS +slug: Archive/B2G_OS/Developing_Firefox_OS/Localizing_Firefox_OS +tags: + - B2G OS + - Localizzazione +translation_of: Archive/B2G_OS/Developing_Gaia/Localizing_B2G_OS +--- +

+ +
+

In questa guida, vi mostreremo quanto è semplice localizzare B2G OS, soprattutto per quanto riguarda Gaia e le applicazioni. Iniziermo aiutandoti ad impostare il tuo computer, assistendoti nella localizzazione delle stringhe di Gaia e, infine, nel performare i test L10n sul lavoro svolto.

+
+ +
+

Nota: Questa è una guida pensata per aiutare nella localizzazione di B2G OS. Gli sviluppatori interessati a scrivere applicazioni localizzabili devono invece iniziare con Localizzazione delle applicazioni B2G OS, e poi dare uno sguardo a Best practices L10n.

+
+ +

Recuperare gli strumenti

+ +

Per ottenere i file sorgenti di Gaia e testare il vostro lavoro di localizzazione sul vostro PC è necessario che vi assicuriate che le seguenti utility e i seguenti linguaggi siano installati:

+ +
+
GNU make
+
make è uno strumento utilie per la creazione di build direttamente da codice sorgente. Risulterà utile quando sarete pronti ad effettuare test l10n sul vostro lavoro con il vostro PC. Scaricare e installare make è facile e può essere effettuato direttamente dal sito web GNU. Se utilizzate Mac OSX, dovrete installare XCode e gli strumenti XCode's Command line dall'App Store.
+
git
+
git è il sistema di controllo di versioning utilizzato per archiviare il codice sorgente sviluppato attivamente di Gaia. Scaricare e installare git è semplice e può essere fatto direttamente dal loro sito web.
+
Python
+
Python è un linguaggio di programmazione che vi aiuterà a creare le build di Firefox OS per il testing l10n. Scaricare e installare Python è semplice e può essere effettuato direttamente dal loro sito web.
+
Mercurial (hg)
+
Mercurial (hg) è un altro systema di controllo di versioning che ospita le versioni stabili di Gaia usate per l'l10n e i repository localizzati. Scaricare e installare Mercurial è facile e può essere effettuato direttamente dal loro sito web.
+
compare-locales
+
compare-locales è uno script Python che aiuta i localizzatori a valutare il proprio lavoro e a separare il contenuto nuovo dal materiale già localizzato (chiamato diff). Scaricare e installare compare-locales è facile e può essere effettuato direttamente dalla pagina wiki di compare-locales (sudo apt-get install python-setuptools && sudo easy_install -U compare-locales). Tenete presente che è necessario solo se localizzate Gaia usando la linea di comando o un editor di testo. Se utilizzate Pootle, Transifex o Pontoon non ne avrete bisogno.
+
+ +

Creare un repository locale

+ +

Una volta che avrete installato il software elencato sopra, sarà il momento di scaricare i sorgenti e le stringhe localizzate sul vostro computer.

+ +
    +
  1. Da linea di comando andate nella directory dove archivierete i sorgenti di Gaia e le stringhe localizzate.
    2. +
  2. Usando hg, clonare il repository en-US inserendo questo comando: + 
    hg clone https://hg.mozilla.org/gaia-l10n/en-US
    +
    3. +
  3. Adesso clonate il vostro repository locale usando il comando seguente. Come esempio, la seconda linea di codice provvede un esempio di clonazione del repository in cinese tradizionale nella cartela adeguata: + 
    hg clone https://hg.mozilla.org/gaia-l10n/your-locale-code
+hg clone https://hg.mozilla.org/gaia-l10n/zh-TW/ B2G/gaia/locales/zh-TW
    +
    4. +
  4. Per l'italiano, il comando dovrebbe essere simile al seguente: + 
    hg clone https://hg.mozilla.org/gaia-l10n/it
    +
    5. +
  5. Now run the following command: + 
    LOCALE_BASEDIR=locales/ LOCALES_FILE=locales/languages_mine.json make
    +
    6. +
  6. I file locali dovrebbero essere indicati nel file languages_mine.json, che utilizza una struttura simile alla seguente: + 
      {
+  "en-US" : "English (US)",
+  "fr" : "Français (fr)"
+  }
    +
    7. +
  7. Infine scrivere questo comando per creare un diff tra il repo localizzato e quello en-US: + 
    compare-dirs en-US it
    +
    8. +
+ +

Adesso dovreste avere un diff di stringhe non localizzate pronte per essere tradotte! Tenete presente che se state iniziando una nuova localizzazione di B2G OS non sarà necessario creare un diff dato che tutte le stringhe dovranno essere tradotte.

+ +
+

Nota: Fare riferimento a questo gist per uno script che automatizzi la procedura.

+
+ +

Traduzione delle stringhe di Gaia

+ +

Il workflow per la traduzione delle stringhe di Gaia è fortemente influenzato dagli strumenti utilizzati per tradurre. Questa parte del processo è simile alla fase tradizionale di traduzione degli altri prodotti Mozilla. La pagina Fase della traduzione della Guida rapida alla localizzazione contiene una lista di tutti gli strumenti usati per tradurre le stringhe contenute nei prodotti Mozilla oltre a dei tutorial su come tradurre con tali strumenti. Questa pagina risulterà utile sia se farete parte di un team l10n che dovrà decidere quali strumenti usare per tradurre le stringhe di Gaia, ma anche se starete cercando il tutorial giusto per lo strumento che il vostro team utilizza.

+ +

Testing L10n per B2G OS

+ +

Sono due i metodi principali per effettuare testing l10n su B2G OS: build desktop e build mobile. Attualmente il metodo desktop è quello utilizzato maggiormente per il testing l10n.

+ +

Testing l10n su desktop

+ +
    +
  1. Scaricate e installate l'ultima nightly build di boot2gecko in versione desktop, scaricando il pacchetto corrispondente al vostro sistema operativo. Cercate i pacchetti che contengono la parola localizer. Questo indica che la build ha tutte le localizzazioni elencate in languages-all.json attivate.
    2. +
  2. Clonate l'ultima versione di Gaia andando alla directory del vostro PC dove volete che venga scaricato e scrivete questo comando nella linea di comando:git clone git://github.com/mozilla-b2g/gaia.git
    3. +
  3. Se il vostro team sta localizzando B2G OS per la prima volta, dovrete abilitare la vostra lingua (altrimenti preparatevi un bel drink in attesa che sia qualcun altro ad abitarla): +
      +
    1. Sempre da linea di comando, andate nella directory contenente la clonazione di Gaia ed eseguite questo comando per clonare il vostro repo locale: hg clone ssh://hg.mozilla.org/gaia-l10n/it
      2. +
    2. Aprite il file languages.json che si trova nella directory  shared/resources della directory locale appena clonata.
      3. +
    3. Aggiungete le informazioni della localizzazione secondo il formato: "it-IT" : "Italian (IT)", e salvate il file.
      4. +
    4. Infine eseguite il comando: make multilocale che abilita la vostra localizzazione nella build sul vostro PC.
      5. +
    +
    4. +
  4. Create il vostro profilo Gaia profile eseguendo questo comando: DEBUG=1 make -C gaia profile
    5. +
  5. Infine, eseguite B2G OS con il profilo della vostra localizzazione e iniziate il test. Per farlo, inserite questo comando: b2g/b2g -profile gaia/profile. Se state usando Mac OS X, eseguite questo  comando: /Applications/B2G.app/Contents/MacOS/b2g -profile gaia/profile
    6. +
  6. Per aggiornare le vostre build desktop dovrete semplicemente andare nella directory della clonazione del repo di Gaia e inserire questo comando: git pull
    7. +
+ +

Testing l10n su mobile

+ +

This section will come as more devices that support B2G OS become available to localizers.

+ +

Cosa cercare durante i test l10n

+ +

Effettuare un test sulla localizzazione per un sistema operativo mobile ha alcune similarità con gli analoghi test che si effettuano nella localizzazione di applicazioni desktop. Ecco alcune linee guida su cosa verificare quando eseguite i test di localizzazione sul vostro lavoro:

+ +
    +
  1. Controllate che la traduzione "stia" all'interno degli elementi testuali dell'interfaccia utente;
    2. +
  2. Assicuratevi che il tolo, lo stile e la terminologia siano coerenti con l'intero prodotto;
    3. +
  3. Cercate stringhe inglesi non ancora tradotte all'interno dell'interfaccia. Queste potrebbero essere codificate nel codice sorgente di Gaia o potrebbero essere causate da un errore nell'identificativo dell'elmento ID.
    4. +
  4. Accertatevi che tempo e data siano visualizzati correttamente, secondo gli standard della vostra regione.
    5. +
+ +

Individuate bachi relativi alla localizzazione

+ +

Ecco alcuni link a bugzilla, per farti degli esempi di bachi che sono stati incontrati nell'utilizzo di telefoni. Ti darà un'idea di dove guardare per individuare questa tipologia di errori e su come riportarli.

+ + + +

Regole generali per la segnalazione di bug di localizzazione:

+ + + +

Per coloro i quali utilizzano Moztrap, un buon modo per verificare la localizzazione di B2G OS è guardare ai test presenti sotto il tag "localization" di FirefoxOS e verificare se avreste passato quel stes sul vostro dispositivo.

+ +

E ora?

+ +

Ora sei pronto per iniziare la localizzazione! Apri il tuo strumento di localizzazione preferito per l10n, forza! Come sempre, se hai domande cui non hai trovato risposta in questo documento, puoi inviarle a mozilla.dev.l10n newsgroup.

diff --git a/files/it/archive/b2g_os/firefox_os_apps/building_blocks/index.html b/files/it/archive/b2g_os/firefox_os_apps/building_blocks/index.html new file mode 100644 index 0000000000..af56f0301c --- /dev/null +++ b/files/it/archive/b2g_os/firefox_os_apps/building_blocks/index.html @@ -0,0 +1,195 @@ +--- +title: Firefox OS Building Blocks +slug: Archive/B2G_OS/Firefox_OS_apps/Building_blocks +tags: + - Design + - Design patterns + - Firefox OS + - NeedsTranslation + - TopicStub + - UI + - building blocks +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks +--- +

+ +
+

The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all Gaia default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.

+
+ +

Using the Firefox OS Building Blocks

+ +

The code for the Firefox OS Building Blocks can be found in the Gaia Github repo under shared/style. Here, you can find a CSS file that contains the CSS for that particular Building Block, and a sub directory containing the HTML fragments and image assets. If you are creating your own standalone Web app, you can simply copy the CSS, HTML and image asset files across into your own project; if your app is intended to be installed on Firefox OS only (or you want to use these features only when the app is being used on Firefox OS), then you can link to the versions available inside Gaia.

+ +

The pages for the individual Building Block implementations can be found under the pages for each building block — see next section. These contain instructions on how to implement each one.

+ +
+

Note: The version 2.0 building block code is used in Firefox OS releases 2.0 through 2.2. Version 2.3 sees an update, with the building blocks being reimplemented using Web components — these provide the same functionality, but implemented in a much more powerful, flexible way. You'll see 2.3 pages appear underneath the main building block pages covering these Web components as soon as the information is available.

+
+ +
+

Note: We also have an old guide covering the v1.x building blocks used in older versions of Firefox OS. This is mainly for legacy information.

+
+ +

Web components preliminary setup

+ +

This section details the preliminary setup needed to use Gaia Web components.

+ +

Web components browser support

+ +

To use Gaia Web components at all, you need to run them using a browser that supports Web components. The state of support is as follows:

+ + + +

Web components are supported in Firefox OS from v2.1 onwards, although most of them weren't actually implemented until v2.3. Be aware also that currently Web components won't work for Firefox OS apps below internal (certified) level. This restriction should be lessened in the future.

+ +
+

Note: If your app is certified, the components will just work. You don't need to set a specific manifest permission.

+
+ +

Web components installation notes

+ +

Gaia Web components are installed in your app using the Bower package manager. To install this, you first need Node.js/npm and Git installed. Once they are installed you can install Bower with

+ +
npm install -g bower
+ +

At this point you could also install the Gaia Fira Sans font that Firefox OS uses in your app , with the following command:

+ +
bower install gaia-components/gaia-fonts
+ +

You can then make use of the font by including the following in your head (along with a font-family of FiraSans):

+ +
<link rel="stylesheet" type="text/css" href="bower_components/gaia-fonts/style.css"></link>
+ +

Firefox OS Building Blocks

+ +
+
+
+
Action menu
+
An action menu presents a list of actions, related to the app's content, from which the user may make a selection.
+
Banners
+
Banners (Status, in older versions of Firefox OS) provide information to the user in a transitory fashion, typically to confirm an action or to alert the user to a system event.
+
Buttons
+
Buttons are used to perform explicit actions. Buttons may be text or images.
+
Context menu
+
Accessed via a tap and hold gesture (sometimes called a long press), the Context Menu (called the Object Menu in older versions of Firefox OS) allows users to perform actions on objects without having to leave their current view.
+
Dialog
+
A Dialog (Confirm, in older versions of Firefox OS) provides the user with some important information, asks the user to take or confirm an action, or allows the user to make a choice or enter some information.
+
Drawer
+
The drawer is a scalable way for users to navigate between views or filter views. The drawer can also include links to app settings or other tools.
+
Header
+
A header is a dedicated space at the top of the screen, most often used to display the view title. It can also include navigation, action buttons and other controls.
+
Input area
+
An input area is a data entry field, and can be as simple as a text only entry field, or as complex as a multipart entry field with text entry, value selections, and buttons.
+
Layout
+
The Layout utility will help you to create common layout structures for your Firefox OS apps. Note that Layout is only available in Firefox OS 2.1 and above.
+
List items
+
List items are typically used to navigate to a new screen, or to display information or controls.
+
+
+ +
+
+
Picker
+
The Picker is designed to select a group of items as attachments for messaging and email.
+
Progress and activity
+
Progress and activity indicators provide the user with visual feedback that a process (such as a resource loading) is active.
+
Scrolling
+
Scrolling areas allow the user to move text and/or images across the device's display.
+
Search
+
Search is used to filter a list or find context-specific content.
+
Slider
+
A Slider (which was called Seekbar in older Firefox OS versions) is used to select a value from a continuous or discrete range of values by dragging the handle.
+
Select mode
+
Select Mode (which was called Edit Mode in older Firefox OS versions) is designed to select and perform actions on items.
+
Subheader
+
Subheaders are used to describe a subsection of content.
+
Switches
+
Switches (such as checkboxes, etc.) allow users to activate and deactivate items. Switches are also used to select items within a list.
+
Tab/Filter
+
A Tab/Filter gives the user a way to easily switch between views or to filter a set of data.
+
Toolbars
+
Toolbars contain actions, indicators and navigation elements associated with the current view.
+
Value selector
+
Value Selectors let the user choose from among a list of possible values.
+
+
+
+ +
+

Note: For a detailed guide to the design pattern followed by the building blocks when the Arabic locale (bidirectional) is selected, read Firefox OS in Arabic.

+
+ +

Cross browser CSS

+ +

Arnau March wrote a CSS file called cross browser CSS, containing rules to allow Firefox 2.0 building blocks to render properly across different browsers (ie 9, Firefox 18, Chrome 24, Safari 5.1.) If you want to write hosted apps that look ok across different browsers, include this CSS in your project.

+ +

Browse Firefox OS Building Block implementations by version

+ +

The pages below list links to pages covering the Firefox OS Building Block implementations as they appear in different versions of Firefox OS.

+ + diff --git a/files/it/archive/b2g_os/firefox_os_apps/index.html b/files/it/archive/b2g_os/firefox_os_apps/index.html new file mode 100644 index 0000000000..370236dd14 --- /dev/null +++ b/files/it/archive/b2g_os/firefox_os_apps/index.html @@ -0,0 +1,85 @@ +--- +title: Firefox OS apps +slug: Archive/B2G_OS/Firefox_OS_apps +tags: + - Apps + - Building + - Components + - Firefox OS + - Installing + - NeedsTranslation + - TopicStub + - device APIs +translation_of: Archive/B2G_OS/Firefox_OS_apps +--- +

This section of the Firefox OS docs covers the specific techniques required — and available tools — for building Firefox OS apps. You'll find a number of details below, from Firefox OS building blocks/web components, to device APIs and App installation.

+ +

Building Firefox OS apps

+ +
+
Building apps for Firefox OS
+
Firefox OS/Firefox platform app specifics, including App installation and management APIs, manifest files, packaged and hosted apps, handling API permissions.
+
Localization
+
This set of articles provides information for developers wishing to provide localized versions of their apps.
+
Performance
+
This page lists performance-related topics specific to Firefox OS.
+
Firefox Accounts on Firefox OS
+
This article provides an overview of using Firefox Accounts in Firefox OS.
+
Reference apps
+
This page lists a number of sample apps we've put together for you to download, install, play with and learn from. Have fun!
+
Screencast series: App Basics for Firefox OS
+
In this collection of short videos, developers from Mozilla and Telenor explain in a few steps how you can get started with building applications for Firefox OS.
+
+ +

Building blocks

+ +
+
Building Blocks
+
The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all Gaia default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.
+
+ +

Styleguides

+ +
+
Firefox OS Visual styleguide
+
Our style guide for Firefox OS visual design, covering colours, typeface, backgrounds, app icons, and the design of specific UI elements.
+
Firefox OS Copy styleguide
+
This guide outlines the rules we follow for writing Firefox OS app copy, but can be used as a general guide to writing good copy for any app interfaces.
+
Firefox OS in Arabic
+
A guide to the specific UX design implementation Firefox OS has in place for dealing with Arabic (and other RTL languages.)
+
+ +

Assets

+ +
+
Firefox OS design asset library
+
In this section you'll find design assets, artwork, graphic templates, fonts and other materials that will be helpful as you design Firefox OS/Gaia apps.
+
Firefox OS icon font
+
Firefox OS has its own icon font set available: this article explains how to use it in your own apps.
+
Firefox OS transitions
+
A reference to some of the transitions used in Firefox OS to move between different states in apps, including animated GIFs demonstrating the animations used, plus code samples to show the CSS animation code needed to implement these animations.
+
+ +

References

+ +
+
Firefox OS device APIs
+
This article provides a list of pages covering those APIs, as well as the app manifest permissions for each one.
+
Firefox OS app tools
+
This page provides a list of useful tools, libraries, examples, etc. that are useful for Firefox OS app developers, whether you want a code template to copy, or need help with adding a specific feature to your Firefox OS app.
+
+ +

Other app topics

+ +
+
Porting Chrome apps to Firefox OS Apps
+
This article discusses the differences between Chrome apps and Firefox OS Apps, and how you can convert between the two.
+
App development FAQ
+
This FAQ is a compilation of answers to common app development questions.
+
+ +

See also

+ + diff --git a/files/it/archive/b2g_os/firefox_os_usage_tips/index.html b/files/it/archive/b2g_os/firefox_os_usage_tips/index.html new file mode 100644 index 0000000000..08761312b3 --- /dev/null +++ b/files/it/archive/b2g_os/firefox_os_usage_tips/index.html @@ -0,0 +1,27 @@ +--- +title: Firefox OS usage tips +slug: Archive/B2G_OS/Firefox_OS_usage_tips +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Firefox_OS_usage_tips +--- +
+
+ To be done
+
+ Explain all of the developer features on the phone and what they do (Settings > Device information > More information > Developer)
+
+ Remote debugging
+
+ How to set your Phone up for remote debugging.
+
+ Unlocking your phone
+
+ Basic instructions on unlocking your phone.
+
+ Taking screenshots
+
+ How to take screenshots on your Firefox OS phone.
+
+

 

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/build_system_primer/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/build_system_primer/index.html new file mode 100644 index 0000000000..3752aa2279 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/build_system_primer/index.html @@ -0,0 +1,127 @@ +--- +title: Il sistema di build di Gaia +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Build_System_Primer +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - il sistema di build di Gaia +translation_of: Archive/B2G_OS/Developing_Gaia/Build_System_Primer +--- +
+

Questo articolo spiega il funzionamento del sistema di build di Gaia, incluso il Makefile, il processo di build, le variabili di ambiente e le potenziali personalizzazioni.

+
+

Gran parte del lavoro significativo degli step di build sono eseguiti dagli script presenti all'interno della cartella build/ di Gaia, che vengono eseguiti tramite make, node.js e XPCShell (conosciuto anche col nome di JS Shell), un ambiente di runtime per XULRunner. Il sistema di build di Gaia contiene molti tool a supporto per l'installazione, il testing, la localizzazione e per il packaging delle app su dispositivi reali. Consentono agli sviluppatori di personalizzare Gaia, per esempio cambiando lo sfondo di default, le suonerie, le app e le configurazioni di base.

+
+

Nota: XPCShell è simile a node.js ma con la possibilità di eseguire alcuni javascript personalizzati da Mozilla. Permette agli script di build di Gaia di essere eseguiti all'interno di un'estensione di Firefox.

+
+

Il Makefile

+

Il Makefile contiene un insieme di obiettivi (di operazioni da compiere). Questa sezione descrive le più significative.

+

install-gaia

+

Vengono installate tutte le app di Gaia sul tuo device. Se vuoi installarne una specifica, puoi utilizzare la variabile di ambiente APP come mostrato di seguito:

+
APP=calendar make install-gaia
+

Calendar deve esistere come cartella all'interno di una delle cartelle di app di Gaia  (ad esempio all'interno della cartella apps).

+

reset-gaia

+

Analogamente a install-gaia, ma con la seguente sequenza di azioni: rimuove le app dal device, installa le app sul device e configura i permessi di default. Le app verranno installate sul device nella cartella /data/local. Verranno installate su device anche le app di testing e debugging.

+
+

Fai attenzione: Utilizzando la variabile di ambiente APP con reset-gaia porterà il tuo telefono in una stoto inutilizzabile (puoi ripristinarlo eseguendo nuovamente questa opzione senza APP). Pertanto non farlo.

+
+

production

+

Analogamente a reset-gaia ma il codice sorgente verrà ottimizzato. Questa opzione permette di emulare le build utente. Verranno installate tutte le app previste dalle build utente.

+
+

Fai attenzione: Utilizzando la variabile di ambiente APP con production porterà il tuo telefono in una stoto inutilizzabile (puoi ripristinarlo eseguendo nuovamente questa opzione senza APP). Pertanto non farlo.

+
+

reference workloads

+

Questi obiettivi caricheranno sul dispositivo workload (carichi di lavoro) di differente dimensione, aiutandoci nelle attività di debugging e fixing di problematiche inerenti le prestazioni. Accettano la variabile APP o APPS (contenente più nomi di app separati da uno spazio), ad esempio:

+
APP=sms make reference-workload-light
+APPS="sms communications/contacts" make reference-workload-heavy
+
+
+

Nota: Per ulteriori informazioni leggi l'articolo Hacking Gaia: workload di riferimento.

+
+

Variabili di ambiente

+

Alcune variabili d'ambiente ti permettono di controllare alcuni aspetti della costruzione e della installazione sul dispositivo, per esempio:

+

P=1

+

Abilita un grado di parallelismo nel processo di build e consente di trarre vantaggio da CPU multicore riducendo le tempistiche di build. Il valore di default è 0.

+
+

Fai attenzione: la funzionalità di parallelismo è sperimentale e può essere instabile.

+
+

GAIA_OPTIMIZE=1

+

Innesca un processo di ottimizzazione sui file JavaScript. Viene valorizzata automaticamente quando si esegue il comando make production. Può essere utilizzata anche con con install-gaia o reset-gaia.

+

PRODUCTION=1

+

E' un alias di make production.

+

DEBUG=1

+

Ti consente di creare un profilo di debug da utilizzare negli unit testing di Gaia oppure nello sviuppo di app di Firefox OS in Firefox. Il nuovo profilo viene creato all'interno della cartella di Gaia (ad esempio profile-debug). Dovresti eliminare la precedente cartella prima di generare un nuovo profilo.

+

DEVICE_DEBUG=1

+

Disabilita il blocco dello schermo sul dispositivo.

+

GAIA_DEVICE_TYPE=phone

+

Consente di differenziare la lista delle app da installare in funzione del device. Le liste di app  (app-*.list) sono presenti nella cartella /build/config/$(GAIA_DEVICE_TYPE)/ .

+

Il valore di default per questa variabile è phone.

+
+

Nota: Per maggiori dettagli e ulteriori opzioni, consultate la guida Hacking Gaia opzioni di make.

+
+

Il processo di build

+

Segue un diagramma che illustra il processo di build di Gaia:
+  

+

+

pre-app.js, app.js & post-app.js vengono eseguite dal Makefile, di cui gran parte dei task tramite script xpcshell. Tramite Makefile viene anche identificato l'OS e scaricato il b2g-desktop specifico. Verranno migrati sempre più task da Makefile a script xpcshell.
+
+ Sono state create pre-app, app e post-app per agevolare il passaggio delle dipendenze da Makefile a script xpcshell. Pre-app.js e post-app.js sul bug 1021051, mentre app.js, pre-app.js e post-app.js sul bug 1053703.
+
+ Esistono tre tipologie di cartelle per il sistema di build di Gaia:
+
+      1. cartelle con i sorgenti: apps, dev_apps, shared directories
+      2. cartelle di appoggio: build_stage
+      3. cartelli con i profili: profile, profile-debug o cartelle di profile-test
+
+ L'obiettivo è quello di non produrre più file all'interno di cartelle con i sorgenti. Sebbene esistono ancora dei moduli che non rispettano questa regola, ne è stato pianificato l'adeguamento quanto prima. Segue una tabella che illustra quali moduli producono file nelle cartelle con i sorgenti, in quelle di appoggio e in quelle con i profili:

+

+

Segue il processo di build da quando viene eseguito il comando make nella cartella di Gaia. Le seguenti regole vengono eseguite in ordine:

+
    +
  1. b2g_sdk: b2g-desktop è usato per eseguire gli script xpcshell nella cartella GAIA_DIR/build/.
    2. +
  2. svoperapps: vengono scaricate le app e generati i file di configurazione per l'installazione delle app su base operatore telefonico e Paese.
    3. +
  3. webapp-manifests: vengono generati i metadati delle webapp richiesti per il processo di build.
    4. +
  4. keyboard-layouts: viene generata la configurazione di default del layout della tastiera.
    5. +
  5. webapp-shared: vengono prelevati i file utilizzati da ciascuna app presenti nella cartella shared e copiati nella cartella build_stage.
    6. +
  6. preferences: vengono generate le preferenze di default per Firefox OS; viene generato il file user.js, che istallato sul dispositivo verrà letto da Gecko. Nota che i valori possono essere cambiati tramite variabili di ambiente quali DEBUG=1.
    7. +
  7. app-makefiles: vengono eseguiti i makefile presenti nelle cartelle delle singole app. Se il makefile non è presente, l'app (intesa come cartella completa) verrà copiata nella cartella build_stage e verrà eseguito [app-directory]/build/build.js se esiste. Vedi {{ anch("Build script for apps") }} per maggiori dettagli.
    8. +
  8. app.js: se esistono, vengono eseguiti i Makefile nelle cartelle delle app. Altrimenti, il Makefile di Gaia copierà la cartella della app nall'interno di build_stage ed eseguirà [app-directory]/build/build.js se esiste. Vedi {{ anch("Build script for apps") }} per maggiori dettagli.
    9. +
  9. test-agent-bootstrap & test-agent-config: l'ambiente di test per ciascuna app prevede l'esecuzione di due regole di make: test-agent-config & test-agent-bootstrap-apps.
    10. +
  10. webapp-optimize: questo script contiene alcune procedure di ottimizzazione e include le procedure di minimizzazione di JavaScript (JavaScript minification), la concatenazione delle risorse di localizzazione all'interno di file JSON e la generazione degli HTML per il linguaggio di default se necessario.
    11. +
  11. webapp-zip: ciascuna app viene compressa in un file .zip e spostata nella cartella profile/. I file nella cartella shared/ dichiarati nei file HTML delle webapp verranno inclusi in questo step.
    12. +
  12. optimize-clean: optimize-clean  pulisce i fle HTML per la lingua di default.
    13. +
  13. contacts: se esiste, vene copiata la lista predefinita dei contatti dalla cartella GAIA_DISTRIBUTION_DIR in quella del nuovo profilo.
    14. +
  14. extensions: vengono copiate le estensioni dalla cartella GAIA_DIR/tools/extensions in quella del nuovo profilo; differenti configurazioni di setup consentono di copiare differenti estensioni.
    15. +
  15. installed-extensions.json (additional-extensions.js): infine, questo script scarica alcune estensioni addizionali nella cartella del nuovo profilo.
    16. +
+

Script di build per le app

+

Di default, il makefile di Gaia copierà tutte la app nelle cartelle build_stage ed eseguirà [app directory]/build/build.js, se presente.

+

Per esempio, per costruire l'app Camera viene richiesto r.js (come ottimizzatore RequireJS) e  viene eseguito uno script JavaScript per personalizzare la massima risoluzione, pertanto nella cartella sono presenti sia un Makefile che un  build/build.js per personalizzare il suo processo di build.

+

Segue un diagramma di flusso per illustrare i principali step di un makefile per le app:

+

+

Personalizzare le preferenze

+

Se hai delle preferenze specifiche le devi impostare ogni qualvolta reinstalli il software sul tuo dispositivo. Lo puoi fare creando un file chiamato custom-prefs.js all'interno della cartella build/config.

+

Seguono alcune preferenze utili:

+
// this enables marionette which lets you run performance tests
+// see https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_performance_tests
+user_pref("marionette.defaultPrefs.enabled", true);
+
+// this sets the port for remote debugging your application on the device
+user_pref("devtools.debugger.remote-port", 60000);
+
+// this enables the remote debugger
+user_pref("devtools.debugger.remote-enabled", true);
+
+// this outputs debug information about the Radio Interface Layer in logcat
+user_pref("ril.debugging.enabled", true);
+
+

Questo file viene letto ogni qualvolta viene generato un profilo. Per sicurezza ti conviene eliminare il precedente profilo prima di generarne uno nuovo.

+
rm -rf profile && make profile
+

Quindi puoi utilizzare in sicurezza l'opzione install-gaia.

+

FAQ

+

Il dispositivo rimane nero dopo una reinstallazione

+

Può capitare se installi un device mentre è idle. Per rimediare riavvia B2G utilizzando il seguente comando:

+
adb shell stop b2g && adb shell start b2g
+


+  

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/customizing_build-time_apps/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/customizing_build-time_apps/index.html new file mode 100644 index 0000000000..e7d750d161 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/customizing_build-time_apps/index.html @@ -0,0 +1,86 @@ +--- +title: Personalizzare le app in fase di build +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Customizing_build-time_apps +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - Personalizzare le app in fase di build +translation_of: Archive/B2G_OS/Developing_Gaia/Customizing_build-time_apps +--- +
+

Come sviluppatore o vendor di dispositivi mobile, potresti voler personalizzare le app presenti sul dispositivo Firefox OS al primo utilizzo per svariati motivi. Questo articolo spiega le differenti metodologie disponibili.

+
+

Le app nel codice sorgente di Gaia

+

Le app presenti in Firefox OS sono tutte contenute nel codice sorgente di Gaia, in una delle seguenti cartelle:

+ +

Se vuoi aggiungere o rimuovere delle app dalla tua build, potrai farlo nei seguenti modi che andiamo a descrivere.

+

Metodo a furza bruta

+

Il metodo a "forza bruta" è semplicemente quello di rimuovere (inteso come rimozione dalla tua alberatura di Gaia) le app che non vuoi, durante il processo di costruzione della build stessa.

+

Editing delle liste di configurazione

+

Un metodo più raffinato consiste nel modificare i file di configurazione apps-*.list  (li trovi in differenti sottocartelle all'interno della cartella gaia/build/config/, quali phone/ e tablet/) definendo il path delle app che vuoi includere nella build. Per esempio, gaia/build/config/phone/apps-production.list contiene qualcosa di simile a:

+
apps/bluetooth
+apps/bookmark
+apps/browser
+apps/calendar
+apps/callscreen
+etc.
+

Puoi semplicemente includere tutte le app presenti nella cartella nel seguente modo:

+
apps/*
+

La logica per scegliere quale apps-*.list utilizzare per la build (cioè la lista della app) è definita nel gaia/Makefile ed è qualcosa di simile a:

+
GAIA_DEVICE_TYPE?=phone
+  ...
+GAIA_APP_TARGET?=engineering
+  ...
+ifeq ($(MAKECMDGOALS), demo)
+GAIA_DOMAIN=thisdomaindoesnotexist.org
+GAIA_APP_TARGET=demo
+else ifeq ($(MAKECMDGOALS), dogfood)
+DOGFOOD=1
+else ifeq ($(MAKECMDGOALS), production)
+PRODUCTION=1
+endif
+  ...
+ifeq ($(PRODUCTION), 1)
+GAIA_OPTIMIZE=1
+GAIA_APP_TARGET=production
+endif
+
+ifeq ($(DOGFOOD), 1)
+GAIA_APP_TARGET=dogfood
+endif
+  ...
+ifndef GAIA_APP_CONFIG
+GAIA_APP_CONFIG=build$(SEP)config$(SEP)apps-$(GAIA_APP_TARGET).list
+endif
+

Inizialmente, la variabile GAIA_APP_TARGET è impostata a engineering mentre la variabile GAIA_DEVICE_TYPE è impostata a phone, perciò la build di Gaia utilizzerà la lista di app definita in gaia/config/phone/app-engineering.list (che include le app di test, demo, ecc.)

+

Per costruire una build con una differente lista di app dovrai lanciare make con una differente opzione. Per esempio, per costruire la build con la lista di app definita in gaia/build/config/phone/apps-production.list, dovrai invocare il seguente comando:

+
PRODUCTION=1 make
+

Se imposterai l'opzione DEMO=1, verrà utilizzata la lista  apps-demo.list. Se invece specificherai DOGFOOD=1, verrà di conseguenza utilizzata la lista apps-dogfood.list.

+

In alternativa, puoi costruire una build con una tua lista di app impostando la variabile GAIA_APP_CONFIG direttamente nel gaia/Makefile, e fornendo di conseguenza una tua lista apps-*.list.

+

gaia/Android.mk contiene queste linee:

+
ifneq ($(filter user userdebug, $(TARGET_BUILD_VARIANT)),)
+GAIA_MAKE_FLAGS += PRODUCTION=1
+B2G_SYSTEM_APPS := 1
+endif
+

Durante la build di Gaia, se la variabile VARIANT assume i valori VARIANT=user o VARIANT=userdebug (questo valore viene successivamente copiato nella variabile TARGET_BUILD_VARIANT), allora viene automaticamente impostata l'opzione PRODUCTION=1.

+
+

Nota: Puoi scoprire quali altre opzioni di make sono disponibili leggi l'articolo di  riferimento per le opzione di make.

+
+

Personalizzazione Commerciale

+

Il terzo metodo, più dettagliato (ma altrettanto più complesso) consiste nell'utilizzare le personalizzazioni. Ti consentono di personalizzare la build senza modificare il codice di Gaia. Puoi includere le tue personalizzazioni sia in cartelle separate che utilizzare quelle preesistenti.

+

Per esempio, specificando la variabile di ambiente GAIA_DISTRIBUTION_DIR, indichi quale cartella contiene la tua personalizzazione:

+
GAIA_DISTRIBUTION_DIR=<DISTRIBUTION_PATH> make production
+

Al seguente repository https://github.com/mozilla-b2g/gaia/tree/master/customization trovi un esempio completo con tutte le funzionalità personalizzabili.

+

Possiamo considerare la personalizzazione come un argomento completamente separato. Per ulteriori informazioni fai riferimento alla Guida alla Personalizzazione Commerciale.

+
+

Nota: Se vuoi includere app custom esterne come parte della tua build di Gaia, devi utilizzare un processo di build specifico e metterle nella cartella gaia/dev-apps. Per ulteriori informazioni leggi l'articolo Building Prebundled web apps.

+
+
+

Importante: Se sei un vendor di apparati e vuoi creare e distribuire una build custom di B2G/Gaia, devi rispettare alcuni criteri prima di poter includere la app di Firefox Marketplace sui tuoi dispositivi. Contatta Mozilla per maggiori dettagli.

+
+

 

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/diversi_modi_per_eseguire_gaia/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/diversi_modi_per_eseguire_gaia/index.html new file mode 100644 index 0000000000..591e1716e1 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/diversi_modi_per_eseguire_gaia/index.html @@ -0,0 +1,120 @@ +--- +title: Diversi modi per eseguire Gaia +slug: >- + Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Diversi_modi_per_eseguire_Gaia +tags: + - B2G + - Diversi modi per eseguire Gaia + - Firefox OS + - Gaia + - Guida +translation_of: Archive/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia +--- +
+

Puoi eseguire Gaia in un simulatore via WebIDE, direttamente all'interno di Firefox Desktop, come applicazione desktop dedicata (Desktop B2G), oppure in un dispositivo mobile compatibile. Questo articolo fornisce una panoramica per ciascun metodo e i link per ulteriori informazioni.

+
+

Quanto è vicino alla realtà?

+

Alcune delle soluzioni per eseguire Gaia descritte nell'articolo sono più vicine all'esperienza su un dispositivo reale di altre. Ordinando le soluzioni per semplicità di predisposizione dell'ambiente di esecuzione, avresti la seguente sequenza:

+
    +
  1. Gaia nel Simulatore
    2. +
  2. Gaia nel Desktop B2G
    3. +
  3. Gaia in Firefox Mulet
    4. +
  4. Gaia nell'Emulatore
    5. +
  5. Gaia su un dispositivo reale
    6. +
  6. Gaia+Gecko su un dispositivo reale
    7. +
+

Volendo invece ordinare per “quanto è vicino al prodotto venduto", l'ordine sarebbe esattamente l'opposto. In funzione delle caratteristiche su cui stai lavorando, dovrai utlizzare la soluzione che meglio risponde alle tue esigenze.

+

Utilizzare Gaia all'interno di WebIDE con un Simulatore di Firefox OS

+

La modalità più veloce per provare Gaia è con WebIDE, uno strumento di sviluppo disponibile in Firefox Desktop. WebIDE ti offre numerosi strumenti per aiutarti nelle fasi di testing, installazione e debugging di applicazioni web HTML5 sia su telefoni Firefox OS che sul Simulatore Firefox OS, direttamente dal tuo browser.
+
+ In Firefox per desktop dalla versione 34 e successive, trovi WebIDE seguendo Tools > Web Developer > WebIDE. Apri il menù Runtime sulla destra in alto per installare e avviare un Simulatore.

+

Per eseguire una tua versione di Gaia, il processo è un po' più complesso, ma sempre piuttosto semplice:

+
    +
  1. Come prerequisito dovresti aver costruito un profilo di debug di Gaia - vai nel tuo repository locale di Gaia ed esegui il comando DEVICE_DEBUG=1 make. Sarai in grado di fare debug delle App di Gaia senza fare altro, inoltre non dovrai confermare ogni volta la richiesta di debugging remoto all'avvio.
    2. +
  2. Avvia Firefox (consigliamo la versione Nightly)
    3. +
  3. Apri WebIDE utilizzando Tools > Web Developer > WebIDE.
    4. +
  4. Installa un Simulatore di Firefox OS in WebIDE. Utilizza Select Runtime > Install Simulator e scegli una versione fra quelle proposte. Assicurati di utilizzare la medesima versione di Simulatore e di Gaia (per esempio, se il branch di Gaia è il  2.2, devi utilizzare il Simulatore Firefox OS 2.2.)
    5. +
  5. Torna a Firefox e seleziona Tools > Add-ons. Seleziona la voce Options del Simulatore Firefox OS per la vesrione che hai scelto di utilizzare.
    6. +
  6. Seleziona Select a custom Gaia directory, per impostare la cartella in cui è presente il profilo di debug di Gaia (che hai precedentemente costruito).
    7. +
  7. Avvia il Simulatore da WebIDE (dovrebbe ora avviarsi con il profilo custom di Gaia che hai appena specificato).
    8. +
+
+

Nota: Se vuoi riconfigurare il Simulatore affinchè non esegua più il profilo custom che hai appena impostato, devi procedere da Firefox about:config, cerca extensions.fxos_2_2_simulator@mozilla.org.gaiaProfile pref (2_2 piuttosto che la versione che hai scelto precedentemente) fai doppio clic e rimuovi il valore impostato nella dialog box, quindi premi OK.

+
+
+

Note: Poichè il branch principale di Gaia cambia rapidamente, può succedere che l'ultimo Simulatore pubblicato fallisca. Se stai utilizzando il branch principale e rilevi un fallimento (in questo caso WebIDE restituisce un messaggio di errore quale "Operation timed out" ), dovresti scaricare e utilizzare l'ultima branch nightly del Simulatore  — visita Nightly Mozilla Central e scarica il file fxos-simulator-*.xpi appropriato per il tuo sistema. Tieni in mente che le build nightly non si aggiornano automaticamente alle versioni successive. Per ottenere gli aggiornamenti devi tornare a utilizzare le build ufficiali.

+
+

Utilizzare Gaia in B2G Desktop

+

B2G Desktop è un'applicazione che puoi utilizzare per eseguire Gaia sul desktop, implementa il motore di esecuzione delle app utilizzato nei dispositivi Firefox OS. Verrà presto sostituito con Firefox Mulet (vedi sotto), non appena Mulet sarà sufficientemente stabile.

+

Puoi scaricare una build nightly di B2G Desktop dal sito di Firefox Nightly. A seconda dell'utilizzo sono disponibili differenti versioni della latest-mozilla. Sono disponibili build per Linux (32 bit e 64 bit), OS X e Windows.

+

Le build nightly sono disponibili con una versione di Gaia recente. Dopo aver scaricato l'archivio, devi semplicemente estrarlo in una cartella ed eseguire il binario b2g dalla cartella stessa:

+
$ cd b2g
+$ ./b2g
+

Per eseguire B2G con una tua versione di Gaia per finalità di sviluppo dovrai inizialmente costruirti un profilo di debug dal tuo repository locale di Gaia:

+
$ cd /path/to/gaia
+$ DEBUG=1 DESKTOP=0 make
+

Questo produrrà una sottocartella all'interno della cartella gaia chiamata profile. Per evitare di ricostruire Gaia a ogni modifica al codice, l'opzione DEBUG, anzichè produrre la versione packaged di default, produrrà una versione hosted che verrà eseguita tramite un web server integrato. Trovi il percorso alla cartella contenente il profilo generato nell'ultima linea di output del comando precedente:

+
Profile Ready: please run [b2g|firefox] -profile /path/to/gaia/profile
+

Potrai quindi eseguire B2G Desktop col profilo appena generato nel seguente modo:

+
$ ./b2g /path/to/gaia/profile
+

Se vuoi, puoi costruire B2G Desktop direttamente dal codice sorgente.

+
+

Note: Per OS X, il binario b2g sarà all'interno della cartella B2G.app. Per eseguire B2G Desktop utililizza il seguente comando:
+ ./B2G.app/Contents/MacOS/b2g /path/to/gaia/profile

+
+

Utilizzare Gaia in Firefox Mulet

+

È anche possibile eseguire Gaia all'interno di una versione speciale di Firefox chiamata Firefox Mulet. Questa soluzione ti offre il vantaggio di abbinare un ciclo di sviluppo rapido alla disponibilità di strumenti web standard di sviluppo e di debugging disponibili.

+
+

Nota: Firefox Mulet è attualmente in una fase iniziale di sviluppo, probabilmente troverai dei bug. Se dovessi riscontrarne, per favore segnalaceli.

+
+
    +
  1. Prima di tutto, è necessario disporre di una copia locale del repository di Gaia (leggi l'articolo Eseguire il tuo build di Gaia per la procedura migliore se vuoi contribuire al progetto). Mulet è compatibile con la versione di Gaia 2.2 e superiore, ti consigliamo di utilizzare il branch master.
    2. +
  2. Quindi, spostati con cd nella tua copia locale del repository e costruisci il profilo con make (leggi l'articolo Riferimento alle opzioni di make per le differenti opzioni disponibili). In futuro, Mulet supporterà le differenti opzioni di make e avrà tutti gli strumenti per facilitarti il debug delle applicazioni (ad esempio riavviare le singole applicazioni se vorrai verificare i singoli aggiornamenti).
    3. +
  3. Ora devi scaricare una versione nightly di Firefox Mulet  — lo trovi al link Mozilla Central. Le versioni Mulet sono quelle il cui nome inizia per firefox-*, per esempio firefox-36.0a1.en-US.mac64.dmg — scelgli la versione appropriata per il tuo sistema di sviluppo.
    4. +
  4. Dopo averlo scaricato, installa Mulet evitando di sovrascrivere la build Nightly di Firefox. Per esempio, su Mac OS X, crea una nuova cartella all'interno di Applications chiamata "mulet", e trascinaci il file.
    5. +
  5. Ora esegui Mulet da linea di comando, specificando il profilo di Gaia da utilizzare (tramite l'opzione -profile). Per esempio, su un Mac OS X, dalla cartella Applications, potresti eseguire un comando simile al seguente: + 
    ./mulet/FirefoxNightly.app/Contents/MacOS/firefox-bin -profile /Users/my-home-folder/git/gaia/profile/
    +
    6. +
+

Mulet dovrebbe avviarsi e dovresti vedere qualcosa di simile:

+


+ L'applicazione contiene la standard Toolbox di Firefox per il debugging delle tue applicazioni di Gaia, un emulatore di Firefox OS sulla sinistra e numerosi altri strumenti utili per gestire Gaia. I controlli presenti sopra l'emulatore ti consentono di:

+ +
+

Nota: Il bottone Home attualmente non funziona e lo schermo occasionalmente manifesta dei malfunzionamenti. Puoi ovviare a questi problemi ricaricando la scheda del browser.

+
+

Flashare Gaia su un dispositivo reale

+
+

Importante: Se stai cercando di flashare Gaia su un dispositivo con poca memoria quale Tarako o Spice Fire One, dovresti utilizzare una branch specifica ottimizzata per dispositivi con poca memoria, quale 1.3t branch. Provando a flashare il branch master di Gaia su un dispositivo con poca memoria probabilmente il dispositivo risulterà non più funzionante.

+
+

Per flashare una nuova versione di Gaia su un dispositivo reale:

+
    +
  1. Prima assicurati di avere una copia del repository di Gaia sul tuo computer e di avere installato ADB.
    2. +
  2. Assicurati di aver abilitato il debugging via USB.
    3. +
  3. Connetti il dispositivo al computer via USB.
    4. +
  4. Se il dispositivo è connesso e se il driver USB è configurato correttamente potrai eseguire i seguenti comandi. Per configurare correttamente il driver, gli utilizzatori di Windows o Linux potrebbero controllare sulla pagina specifica per il driver USB del produttore del dispositivo mobile.
    5. +
  5. Esegui il seguente comando all'interno del repository di Gaia per installare completamente Gaia sul dispositivo:
    + 
    $ make reset-gaia
    +
    6. +
  6. Per installare solo gli aggiornamenti, senza riavviare il dispositivo utilizza: + 
    $ make install-gaia
    +
    7. +
  7. Se invece vuoi installare solo un'applicazione specifica, puoi utilizzare la variabile di ambiente APP: + 
    $ make install-gaia APP=browser
    +
    8. +
+
+

Nota: I comandi make install-gaia / make reset-gaia costruiscono Gaia con una risoluzione pari a 1x di default. Per specificare risoluzioni maggiori dovrai utilizzare le opzioni di make GAIA_DEV_PIXELS_PER_PX o GAIA_DPPX (per maggiori dettali vedi High resolution image assets) assieme al fattore di scala specifico per il tuo dispositivo, per esempio make install-gaia GAIA_DEV_PIXELS_PER_PX=1.5 per un dispositivo Flame (oppure 2, o 2.5, etc; trovi i fattori di scala nella tabella contenuta nel paragrafo 512 icon for device display.)

+
+

Per verificare se il tuo dispositivo è correttamente connesso via USB utilizza il seguente comando:

+
$ adb devices
+

Dovresti ottenere un risultato simile al seguente:

+
List of devices attached
+emulator-5554  device
+

Costruire Gecko e Gaia e utilizzarli in un Emulatore o un dispositivo reale

+

Se hai un dispositivo mobile compatibile puoi  compilare e installare Firefox OS ed eseguirlo su un Emulatore piuttosto che scaricarlo sul tuo dispositivo.

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/gaia_tools_reference/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/gaia_tools_reference/index.html new file mode 100644 index 0000000000..056a240eaa --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/gaia_tools_reference/index.html @@ -0,0 +1,128 @@ +--- +title: Strumenti di Gaia +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Gaia_tools_reference +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - Strumenti +translation_of: Archive/B2G_OS/Developing_Gaia/Gaia_tools_reference +--- +
+

Questo articolo descrive alcuni strumenti di grande aiuto per lavorare con Gaia

+
+ +
+

Nota: Puoi trovare alcuni suggerimenti e trucchi molto utili per il debug di Firefox OS alla pagina B2G QA Tips and tricks.

+
+ +

Strumenti di backup/restore/flash

+ +

Strumenti di backup per il tuo profilo, ecc.

+ +

b2g_util

+ +

Il pacchetto b2g_util tools fornisce alcuni strumenti utili nel debugging di Firefox OS. Può:

+ + + +

Per installarlo hai bisogno di Python 2.7, pip, e setuptools. Quindi puoi eseguire:

+ +
sudo pip install -U b2g_util
+ +

Dopo aver completato l'installazione, puoi connetterti al tuo dispositivo e testarlo utilizzando, ad esempio, il seguente comando per ottenere la versione di b2g:

+ +
b2g_check_versions
+ +

pc-sync-tool

+ +

pc-sync-tool è una app disponibile nel Marketplace di Firefox che permette di fare il backup dei tuoi dati/profilo. Deve essere utilizzato congiuntamente all'add-on per desktop Firefox OS assistant.

+ +

Backup e restore del profilo

+ +

Per gestire backup e restore dei dati puoi utilizzare lo script backup_restore_profile.py, disponibile all'interno del repository GIT B2G-flash-tool.

+ +
    +
  1. Clona il repository (git clone https://github.com/Mozilla-TWQA/B2G-flash-tool.)
    2. +
  2. Assicurati che il telefono sia connesso via USB al computer, e che ADB (vedi {{anch("Important steps to follow first")}}) e l'opzione di Debugging via USB (presente nei settaggi del tuo dispositivo Developer settings) siano abilitati.
    3. +
  3. Spostati all'interno della cartella clonata
    4. +
+ +

Per fare backup dei dati:

+ +
python backup_restore_profile.py -b
+ +

Questo comando dovrebbe salvare il profilo del dispositivo all'interno di una cartella chiamata  mozilla-profile, nella medisima cartella in cui è posizionato lo script. Per fare restore del tuo backup:

+ +
python backup_restore_profile.py -r
+ +
+

Nota: Per vedere la lista completa delle opzioni esegui lo script con il flag -h o --help.

+
+ +

B2G-flash-tool

+ +

Il repository B2G-flash-tool contiene molti altri strumenti che ti consentono di fare rapidamente il flash delle nuove build sui dispositivi — strumenti ideali per il lavoro di QA. Per esempio:

+ + + +

Strumenti per il debug

+ +

Strumenti con funzionalità di debug.

+ +

WebIDE

+ +

WebIDE di Firefox merita una menzione speciale — oltre alle funzionalità di test e debug, offre funzionalità di monitoraggio delle performance, dell'utilizzo della memoria, ecc (vedi Monitoring performance.)

+ +

get_crashreports.sh

+ +

All'interno del repository B2G-flash-tool, get_crashreports.sh restituisce i report di crash (/data/b2g/mozilla/Crash Reports/.)

+ +

Strumenti contenuti all'interno della cartella di root di B2G

+ +

Nella cartella di root di B2G sono presenti numerosi script che eseguono funzionalità di debug utili, quali:

+ + + +

Ulteriori strumenti

+ +

Sono disponibili ulteriori e utili strumenti nella cartella gaia/tools/ e in altre.

+ +

png_recompress.sh

+ +

Script per comprimere immagini in formato png. Puoi utilizzarlo analogamente al seguente esempio:

+ +
$ ./tools/png_recompress.sh -v bg.png
+ +

Rimuove metadati non necessari e comprime ulteriormente l'immagine; può produrre un risparmio fino al 99.5% sulla dimensione del file, si traduce in un impatto misurabile sulla dimensione della app e sull'utilizzo di memoria.

+ +

svg_recompress.sh

+ +

Presente nella cartella gaia/tools/, svg_recompress.sh comprime immagini SVG.

+ +

cache_sync.py

+ +

Presente nella cartella gaia/tools/, cache_sync.py sincronizza la cache offline di una app in una cartella locale. Il comando deve essere eseguito dalla cartella base di una app in gaia/external-apps. Costruisce una cartella per ciascuna origine nella cache offline.

+ +

edit_prefs.sh

+ +

Presente nella cartella di root di B2G, edit_prefs.sh restituisce le preferenze di un dispositivo.

+ +

 

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/index.html new file mode 100644 index 0000000000..c9cb461e0a --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/index.html @@ -0,0 +1,52 @@ +--- +title: Guida allo sviluppo di Gaia +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - Guida rapida allo sviluppo di Gaia +translation_of: Archive/B2G_OS/Developing_Gaia +--- +
+

Gaia è l'interfaccia utente di Firefox OS e l'insieme delle app predefinite: include la schermata di blocco, la schermata principale, il dialer e altre applicazioni. Sostanzialmente, Gaia è un insieme di applicazioni web complesse eseguite sulla piattaforma Firefox OS. Questa serie di articoli copre tutto quello che ti serve sapere per contribuire al progetto Gaia.

+
+ +

In questa guida ti mostreremo come contribuire allo sviluppo di Gaia attraverso una metodologia strutturata — e con questo intendiamo sia aggiungere nuove funzionalità al codice base di Gaia che lavorare sui bug aperti. La prima serie di articoli può essere letta in ordine, piuttosto che spostandosi direttamente alla sezione di interesse, nel caso in cui ci fosse la necessità di rivedere un aspetto specifico del processo.

+ +

Dopo di che, ti forniremo materiale di riferimento e informazioni su argomenti supplementari.

+ +

+ +

Nozioni di base

+ +
    +
  1. Eseguire il codice di Gaia
    2. +
  2. Capire il codice di Gaia
    3. +
  3. Modificare il codice di Gaia
    4. +
  4. Provare le modifiche al codice di Gaia
    5. +
  5. Sottoporre una patch di Gaia
    6. +
+ +

Compilazione di Gaia

+ + + +

Vedi inoltre

+ + diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/make_options_reference/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/make_options_reference/index.html new file mode 100644 index 0000000000..dd5f1f4f70 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/make_options_reference/index.html @@ -0,0 +1,347 @@ +--- +title: Riferimento alle opzioni di make +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/make_options_reference +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - Riferimento alle opzioni di make +translation_of: Archive/B2G_OS/Developing_Gaia/make_options_reference +--- +
+

Il comando make viene utilizzato all'interno del repository di Gaia per creare il profilo che verrà poi caricato sul dispositivo o eseguito in B2G Desktop. Questo articolo descrive in dettaglio le differenti opzioni di make disponibili.

+
+ +
+

Nota: Sono disponibili molte variabili di ambiente nel Makefile. In futuro potrebbero cambiare.

+
+ +

I profili creati sono generalmente posti sotto la root della directory gaia, per esempio /gaia/profile, e contengono i seguenti elementi:

+ + + +
+

Nota: Ricordati di rimuovere un profilo già esistete, rimuovendo l'intera cartella, prima di  crearne uno nuovo.

+
+ +

Default

+ +
make
+ +

Senza opzioni verrà creato un profilo anonimo, non di debug. Per un profilo marcato Mozilla vedi {{ anch("Opzione per build Mozilla ufficiale") }}; per un profilo di debug vedi {{ anch("Opzione di debug") }}.

+ +

Installare sul dispositivo

+ +
make install-gaia
+
+make reset-gaia
+
+ +

Dopo aver installato ADB (Android Debug Bridge) sul tuo sistema, queste opzioni di make ti consentiranno di installare Gaia sul dispositivo. Mentre install-gaia installerà solo gli aggiornamenti/update, reset-gaia installerà completamente Gaia rimuovendo prima configurazioni, profili e web app.

+ +
+

Nota: Installando Gaia sul tuo dispositivo utilizzando  make install-gaia / make reset-gaia verrà costruito Gaia con una risoluzione pari a 1x per default. Per specificare una più alta risoluzione dovrai utilizzare le opzioni  GAIA_DEV_PIXELS_PER_PX o GAIA_DPPX  (vedi Immagini ad alta risoluzione per maggiori dettagli). Quando installi Gaia sul tuo dispositivo in questo modo, dovresti specificare le opzioni rilevanti assieme al fattore di scala del tuo dispositivo, ad esempio make install-gaia GAIA_DEV_PIXELS_PER_PX=1.5 per un Flame  (o 2, o 2.5, ecc; trovi i valori di scala nella tabella all'interno di questo articolo 512 icon for device display.)

+
+ +

Costruire app specifiche

+ +
APP=system make
+
+APP=system make install-gaia
+ +

Se un profilo è già esistente, l'opzione APP ti consente di specificare quale app ricostruire invece di ricostruire e reinstallare tutte le app. Nota che mentre questo comando ti consente di pubblicare il nuovo package e il file di manifest della app sul dispositivo, le modifiche apportate al file di manifest  (nuovi permessi, layout della tastiera, ecc) non verranno recepite da Gecko.

+ +

Specificare una cartella per il profilo

+ +

Puoi specificare una cartella custom per costruire il tuo profilo utilizzando PROFILE_FOLDER, per esempio:

+ +
PROFILE_FOLDER=profile-b2g-desktop make
+ +

Build specifiche per dispositivi

+ +

Ci sono alcune opzioni di make che ti consentono di costruire build per differenti device, per differenti scopi.

+ +

Creare una build di Gaia per telefono

+ +
GAIA_DEVICE_TYPE=phone make
+ +

La lista delle app è quella contenuta nel file /gaia/build/config/phone/apps-engineering.list.

+ +

Crea una build di Gaia per tablet

+ +
GAIA_DEVICE_TYPE=tablet make
+ +

La lista delle app è quella definita nel file /gaia/build/config/tablet/apps-engineering.list.

+ +

Crea una build per Spark

+ +
GAIA_DISTRIBUTION_DIR=distros/spark make reset-gaia
+ +

Per Installare spark sul tuo dispositivo. L'opzione equivalente per B2G build.sh:

+ +
GAIA_DISTRIBUTION_DIR=distros/spark ./build.sh
+ +

Differenti opzioni di Build

+ +

Differenti opzioni di make consentono di costruire differenti tipi di build per scopi differenti.

+ +

Build di produzione

+ +
PRODUCTION=1 make
+ +

Costruisce una build di produzione di Gaia:

+ + + +
+

Nota: Puoi anche utilizzare l'alias make production.

+
+ +

Opzione di debug

+ +
DEBUG=1 make
+ +

Tramite la variabile di DEBUG le app vengono eseguite in modalità hosted su un web server interno su una specifica GAIA_PORT. Rispetto alla modalità di default packaged, in cui le app dovranno essere reinstallate dopo ogni modifica, la modalità hosted semplifica il testing. Utilizzando il profilo all'interno delle più recenti Nightly di Firefox sarà disponibile un pannello specifico per B2G all'interno dei Firefox Developer Tools. Una volta apportata la modifica sarà sufficiente effettuare un refresh del browser per rendere la modifica disponibile sul simulatore.

+ +

Inoltre:

+ + + +

Opzione di debug per dispositivo

+ +
DEVICE_DEBUG=1 make
+ +

Questa opzione crea un profilo di debug per dispositivo, con lo schermo di blocco disabilitato e la funzione di debugging via ADB abilitata.

+ +

In Firefox OS con versione superiore a 1.2 puoi utilizzare questo paramatro per abilitare la funzionalità di debugging attraverso App Manager.

+ +

Opzione di debug per desktop

+ +
DEBUG=1 DESKTOP=0 make
+ +

Questa opzione crea un profilo di debug che potrà essere eseguita all'interno di B2G desktop.

+ +

Opzione per build Mozilla ufficiale

+ +
MOZILLA_OFFICIAL=1 make
+ +

Utilizza questa opzione per costruire una build con brand Mozilla ufficiale.

+ +

Opzione Dogfood

+ +
DOGFOOD=1 make
+ +

Questa opzione attiva la modalità Dogfood e le relative utility. Per esempio l'app di feedback, che consente di sottomettere feedback facilmente.

+ +

Opzione per installare sotto la cartella system

+ +
B2G_SYSTEM_APPS=1 make
+ +

Questa opzione consente di installare le app sotto la cartella /system/b2g invece di /data/local. Dovresti utilizzarla quando lavori su una build utente. Viene automaticamente impostata quando viene eseguito make production. Può essere utilizzata anche per le opzioni install-gaia o reset-gaia .

+ +

Opzione per distribuzione commerciale

+ +
GAIA_DISTRIBUTION_DIR=./dir
+ +
+

Nota: Leggi l'articolo Customizzazioni Commerciali per maggiori dettagli.

+
+ +

Opzioni per sviluppo e debugging

+ +

A scopo di debugging vengono introdotte alcune opzioni specifiche per aggiungere/rimuovere funzionalità o modificare configurazioni/setting.

+ +

Abilitare il debugging remoto

+ +
REMOTE_DEBUGGER=1
+ +

Abilita il debugging remoto su dispositivo, analogamente all'utilizzo dell'opzione specifica all'interno del menù delle configurazioni per sviluppatore (developer settings).

+ +

Opzione di ottimizzazione JavaScript

+ +
GAIA_OPTIMIZE=1 make
+ +

Abilita lo step di ottimizzazione del codice JavaScript di Gaia, concatenando/comprimendo i file. Viene automaticamente abilitato quando viene eseguito make production. Può anche essere utilizzato per install-gaia o reset-gaia.

+ +

Immagini ad alta risoluzione

+ +
GAIA_DEV_PIXELS_PER_PX=1.5 make
+ +

Analogamento con:

+ +
GAIA_DPPX=1.5 make
+ +

Questa opzione sostituisce le immagini con le corrispettive *@1.5x.(gif|jpg|png) se disponibili. Dovresti utilizzare questa opzione come parte del comando make, per esempio:

+ +
GAIA_DEV_PIXELS_PER_PX=1.5 make reset-gaia
+
+GAIA_DEV_PIXELS_PER_PX=1.5 make install-gaia
+ +

Gaia di default utilizza le seguenti risoluzioni per lo schermo:

+ + + +

utilizza GAIA_DEV_PIXELS_PER_PX per essere certo che le immagini appaiano limpide su dispositivi qHD e WVGA. Fai riferimento all'articolo un pixel non è un pixel per maggiori informazioni.

+ +

Eseguire i tesi di integrazione

+ +

Puoi eseguire i test di integrazione su Gaia utilizzando make. Vedi Gaia integration tests per maggiori dettagli.

+ +

Eseguire i test di performance Raptor

+ +

Prima di eseguire i test devi configurare il tuo dispositivo per eseguire i test Raptor. Per i dettagli vedi direttamente Raptor.

+ +
make raptor
+ +

Build di profili per dispositivi con scarsa memoria

+ +
GAIA_MEMORY_PROFILE=low make
+ +

Tramite questa opzione viene generato un profilo specifico per dispositivi con scarsa memoria quale ad esempio il Tarako.

+ +

Disabilitare l'esperienza utente di primo utilizzo (first time use experience, FTU)

+ +
NOFTU=1
+
+ +

Tramite questa variabile di ambiente viene disabilitata la FTU.

+ +

Disabilitare lo schermo di blocco

+ +

Puoi disabilitare lo schermo di blocco di Firefox OS utilizzando l'opzione NO_LOCK_SCREEN, per esempio:

+ +
NO_LOCK_SCREEN=1 make
+ +

Attivare carichi di lavoro (workloads)

+ +

Le seguenti opzioni permettono a sviluppatori/tester di installare grandi quantità di dati in differenti applicazioni, generalmente su dispositivi nuovi e appena installati.

+ +

I comandi da utilizzare (dalla cartella di Gaia) sono:

+ +
make reference-workload-light
+ + + +
make reference-workload-medium
+ + + +
make reference-workload-heavy
+ + + +
make reference-workload-x-heavy
+ + + +

Tramite le variabili di ambiente APP o APPS puoi speficare la singola app o le singole app, ad esempio:

+ +
APP=sms make reference-workload-light
+APPS="sms communications/contacts" make reference-workload-heavy
+
+ +

La variabile APP può assumere i seguenti valori:

+ +
APPS="gallery music video communications/contacts sms communications/dialer"
+ +

Per installare canzoni, devi avere installato sul tuo sistema il programma mid3v2. Ad esempio tramite il comando:

+ +
sudo apt-get install python-mutagen
+ +

Se hai un sistema Fedora o RHEL, utilizza:

+ +
sudo yum install python-mutagen
+ +

Opzioni per la documentazione

+ +

I documenti di Gaia vengono generati tramite jsdoc3, utilizzando il seguente comando:

+ +
make docs
+ +

Abilitare layout e dizionario IME

+ +

Per abilitare tastiera e dizionari IME utilizza il seguente comando:

+ +
GAIA_KEYBOARD_LAYOUTS=en,zh-Hant-Zhuyin,el,de,fr,zh-Hans-Pinyin make
+ +

Attualmente non vengono distribuiti tutti i layout di default, per via dell'occupazione di spazio disco. Il bug 1029951 è stato aperto per disaccoppiare la distribuzione di layout e dizionari (offrendo all'utente la possibilità di scaricare quelli di interesse).

+ +

Per favore dai un'occhiata al seguente file build/config/keyboard-layouts.json per trovare tutti i layout disponibili.

+ +
+
+
+
+
 
+
+
+
+
+ +
+
+
+
+
+
+
 
+
+
+
+
+
+
diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/making_gaia_code_changes/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/making_gaia_code_changes/index.html new file mode 100644 index 0000000000..21c61bfddd --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/making_gaia_code_changes/index.html @@ -0,0 +1,73 @@ +--- +title: Modificare il codice di Gaia +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Making_Gaia_code_changes +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - modificare il codice di Gaia +translation_of: Archive/B2G_OS/Developing_Gaia/Making_Gaia_code_changes +--- +
+

Ora che sai come eseguire Gaia all'interno di Firefox desktop e hai un certo livello di comprensione della struttura del codice, dovresti essere pronto per iniziare a contribuire al progetto. In questo articolo viene descritto come apportare modifiche e dove trovare i bug su cui lavorare.

+
+

Come utilizzare Git

+
    +
  1. Quando apporti modifiche a Gaia, dovresti sempre prendere l'ultima versione dalla master: + 
    cd path/to/gaia
+git checkout master
+git pull upstream master
    +
    2. +
  2. Successivamente, fai checkout su un nuovo branch: + 
    git checkout -b my-code-fix
    +
    3. +
  3. Infine, vai  al direttorio gaia/apps e applica lì le modifiche.
    4. +
+

Esempio di modifica semplice al codice

+

Per apportare le modifiche al codice:

+
    +
  1. Fai le modifiche al codice di Gaia come richiesto e salva.
    2. +
  2. Arresta Firefox Mulet o il simulatore in WebIDE.
    3. +
  3. Ricostruisci il tuo profilo di Gaia utilizzando make.
    4. +
  4. Riavvia Firefox Mulet o il simulatore in WebIDE.
    5. +
+

Facciamo qualcosa di semplice, come cambiare il colore del testo dell'orologio sulla schermata di blocco:

+

Gaia lockscreen showing the clock display in white text

+
    +
  1. +
    +
    + Il modo migliore per scoprire come è impostato questo stile è quello di utilizzare gli strumenti di sviluppo. Premi il taso destro del mouse (oppure tasto Ctrl + clic su Mac OS X) sull'orologio in Firefox desktop e seleziona Inspect Element dal menu contestuale.
    +
    +
    2. +
  2. Puoi scoprire facilmente quale foglio CSS da modificare — gaia/apps/system/lockscreen/style/lockscreen.css  in questo caso — ed effettuare le modifiche che vuoi direttamente sul foglio di stile nel box di destra dello schermo.
    3. +
  3. Quando sei soddisfatto con le modifiche, vai e apporta le modifiche direttamente nel file.
    4. +
  4. Quindi, segui le indicazioni fornite all'inizio di questa sezione per visualizzare le tue modifiche.
    5. +
+

Gaia lockscreen showing the clock display modified from white to red text
+
+
+ Limiti di rendering della modalità di esecuzione di Gaia in Firefox desktop: 

+ +

Dove puoi trovare i bug su cui lavorare

+

Il modo migliore per trovare bug di Firefox OS su cui lavorare è quello di consultare l'applicazione di Josh Matthews Bugs Ahoy — che raccoglie i bug direttamente dal Bugzilla di Mozilla e li rappresenta in una forma che semplifica la  ricerca e consultazione. Una volta che hai identificato il bug su cui lavorare vai alla pagina di Bugzilla, assegnati il bug utilizzando il campo "assigned to" e inizia a lavorarlo, come indicato sotto.

+

Suggerimenti utili

+ +

https://bugzilla.mozilla.org/buglist.cgi?columnlist=product%2Ccf_blocking_b2g%2Cbug_status%2Cresolution%2Cshort_desc&resolution=---&query_based_on=CLOCK&query_format=advanced&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&component=Gaia%3A%3AClock&product=Boot2Gecko&known_name=CLOCK&list_id=9776392

+

Vedi inoltre

+ diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/running_the_gaia_codebase/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/running_the_gaia_codebase/index.html new file mode 100644 index 0000000000..3f3c9b1964 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/running_the_gaia_codebase/index.html @@ -0,0 +1,68 @@ +--- +title: Eseguire il codice di Gaia +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Running_the_Gaia_codebase +tags: + - B2G + - Eseguire il codice di Gaia + - Firefox OS + - Gaia + - Guida +translation_of: Archive/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase +--- +
+

Questo articolo descrive in dettaglio come eseguire il codice di Gaia localmente e quali strumenti sono disponibili.

+
+ +

Per cominciare, dobbiamo sottolineare che NON devi costruire Gecko, o B2G, per contribuire allo sviluppo di Gaia. Ti serve il codice sorgente di Gaia e le conoscenze per eseguirlo e modificarlo.
+
+ Ci sono diversi modi per eseguire Gaia:

+ + + +

Si possono trovare informazioni concise per ciascuno dei metodi sopra citati alla pagina differenti modalità per eseguire Gaia, assieme ai puntamenti alle informazioni di dettaglio se richiesto. In generale, le modalità sono state ordinate dalla più complessa (ma in grado di offrire un'esperienza più realistica) alla più semplice (ma meno realistica).

+ +

In questo articolo ci concentreremo sull'esecuzione di Gaia all'interno di Firefox Mulet o WebIDE - per la maggior parte delle modifiche che vorrai apportare al codice di Gaia questo metodo offre la modalità più rapida per provare gli aggiornamenti, ovviamente alcune funzionalità (quali le API di dispositivo o le interazioni con l'hardware del telefono) richiedono un dispositivo reale.

+ +
+

Nota: Per ottenere ulteriore supporto per Gaia, i posti migliori in cui cercare sono rappresentati dai canali IRC di Gaia (vedi Mozilla IRC per maggiori informazioni) e dalla mailing list di sviluppo dev-gaia mailing list.

+
+ +

Eseguire il tuo build di Gaia

+ +
    +
  1. Primo, crea una copia dell'alberatura principale del repository di Gaia su Github.
    2. +
  2. Quindi, crea una copia locale: + 
    git clone https://github.com/your-username/gaia.git
    +
    3. +
  3. Aggiungi il repository di upstream come segue: + 
    cd gaia
+git remote add upstream https://github.com/mozilla-b2g/gaia
    +
    4. +
  4. Ora procedi con la creazione di un profilo di Gaia. Eseguendo il comando make all'interno del repository verrà creato un profilo nella cartella profile ottimizzato per il debugging. Verra creata una versione hosted delle app di Gaia che potrà essere servita direttamente dal server HTTPD disponibile in Firefox stesso come estensione. Quando apporterai una modifica sarà sufficiente effettuare un refresh del browser per verificarne il risultato (come vedrai dopo), invece di ricostruire il profilo, ripubblicarlo sul dispositivo, etc. Questa modalità è molto utile per un rapido sviluppo di CSS/JS/HTML.
    5. +
  5. Quindi esegui il profilo di debugging in Mulet o WebIDE, tramite le istruzioni riportate.
    6. +
+ +

Troobleshooting e problemi noti

+ +

Error: Python executable "python3" is v3.x, which is not supported by gyp.

+ +

In alcune distribuzioni Linux (ad esempio Archlinux) la versione di default di python è python3. Per questo motivo npm va in errore quando esegue alcuni comandi (ad esempio durante i test). Per risolvere definitivamente, puoi eseguire il seguente comando:

+ +
npm config set python python2
+ +

Per ulteriori soluzioni puoi dare un'occhiata a questa pagina di Stack Overflow.
+
+ Quindi dovresti rimuovere la cartella locale node_modules ed eseguire nuovamente il comando fallito.

+ +

Please Install NodeJS -- (use aptitude on linux or homebrew on osx)

+ +

Potresti ottenere questo errore nonostante tu possa pensare di aver installato NodeJs. Probabilmente stai utilizzando Debian o una distribuzione basata su Debian quale Ubuntu. In queste distribuzioni, NodeJS è contenuto nel pacchetto nodejs e per installarlo correttamente dovrai installare il pacchetto nodejs-legacy:

+ +
sudo aptitude install nodejs-legacy
+ +

Se hai problemi di installazione, forse stai utilizzando il PPA di Chris Lea per Node; per favore rimuovilo prima di proseguire oltre.

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/submitting_a_gaia_patch/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/submitting_a_gaia_patch/index.html new file mode 100644 index 0000000000..ef206a4a97 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/submitting_a_gaia_patch/index.html @@ -0,0 +1,117 @@ +--- +title: Sottoporre una patch di Gaia +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Submitting_a_Gaia_patch +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - Sottoporre una patch +translation_of: Archive/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch +--- +
+

Ora dovresti aver apportato una modifica e verificato che non abbia introdotto regressioni sul codice di Gaia. Il prossimo passo consiste nel sottoporre la patch sul repository centrale. Viene descritto in questo articolo.

+
+ +

Sottoporre patch a Gaia può risultare un po' complicato in quanto la procedura richiede l'utilizzo di Bugzilla e Github, e la compilazione di alcuni flag speciali in Bugzilla per garantire la corretta sequenza delle azioni.

+ +

Sottoporre una patch facilmente con Autolander

+ +

Autolander è uno strumento che automaticamente gestisce molti dei passi richiesti per la sottomissione di patch di Gaia (e di altri progetti in cui viene utilizzato), risparmiando tempo e riducendo errori manuali di processo. Autolander integra Bugzilla con il workflow di Github agganciando richieste di pull ai bug automaticamente e altre cose simili. Per utilizzare Autolander:

+ +
    +
  1. Primo, apri un bug su Bugzilla per indicare cosa stai facendo, se non ne è già stato aperto uno per la medesima modifica al codice. Dovrai aprirlo come prodotto Firefox OS e dovrai assegnargli un titolo descrittivo.
    2. +
  2. Ora è il momento di creare una richiesta di pull (pull request, PR in breve) per proporre la tua patch. Se hai seguito la nostra guida dall'inizio, dovresti avere le tue modifiche localmente in un'alberatura duplicata del repository di Gaia a cui hai assegnato un nome univoco. Successivamente, dovrai eseguire il comando git add .  e  git commit -m 'messaggio di commit'.
    3. +
  3. 'messaggio di commit' dovrà essere sostituito con una stringa che conterrà il numero di bug di Bugzilla, il titolo utilizzato per l'apertura, le informazioni che descrivono cosa fa la patch e chi sta committando. Per esempio: + 
    Bug 9999999 - Fix per la risoluzione del bug R=johndoe
    +
    4. +
  4. Deposita il codice sul tuo fork di Gaia su github, quindi crea la richiesta di PR per proporre l'inclusione nella branch main.
    5. +
  5. Non appena la richiesta di pull verrà aperta, verrà associata al bug tracciato nel titolo della richiesta di PR.
    6. +
  6. Successivamente, quando sull'allegato verrà posto il flag r+ da un revisore, potrai aggiungere la parola chiave autoland  all'interno del campo keywords affinchè il codice venga depositato nel branch master di Gaia (Autolander depositerà il codice, farà il merge della richiesta di PR, farà la commit e segnalerà il bug come fissato). Attualmente questa parte è ancora in revisione, pertanto dovra ancora aggiungere la parola chiave checkin-needed e attendere che il codice venga depositato per tuo conto.
    7. +
+ +
+

Nota: Autolander esegue i test di integrazione prima di depositare il codice nella master. Se i test di integrazione falliscono, Autolander non depositerà il codice. Autolander esegue alcune regole semplici di validazione quali la verifica della presenza del numero di bug nella richeista di pull e nel messaggio di commit.

+
+ +
+

Nota: le richieste di pull vengono depositate secondo l'ordine in cui arrivano, in un branch di integrazione e quindi vengono eseguiti i test di integrazione in parallelo su tutte le richieste. Se i test falliscono per una PR, essa viene rigettata, e la branch di integrazione viene ricostruita con le richieste rimanenti. Quando una richiesta passa i test viene depositata nella branch master.

+
+ +

Sottoporre una patch manualmente

+ +

In alternativa a Autolander, puoi seguire la seguente procedura per sottoporre una patch di Gaia:

+ +
    +
  1. Primo, apri un bug su Bugzilla per indicare cosa stai facendo, se non ne è già stato aperto uno per la medesima modifica. Dovrai aprirlo come prodotto Firefox OS e dovrai assegnargli un titolo descrittivo.
    2. +
  2. Ora è il momento di creare una richiesta di pull (pull request, PR in breve) per proporre la tua patch. Se hai seguito la nostra guida dall'inizio, dovresti avere le tue modifiche localmente in un'alberatura duplicata del repository di Gaia a cui hai assegnato un nome univoco. Successivamente, dovrai eseguire il comando git add .  e  git commit -m 'messaggio di commit'.
    3. +
  3. 'messaggio di commit' dovrà essere sostituito con una stringa che conterrà il numero di bug di Bugzilla, il titolo utilizzato per l'apertura, le informazioni che descrivono cosa fa la patch e chi sta committando. Per esempio: + 
    Bug 9999999 - Fix per la risoluzione del bug R=johndoe
    +
    4. +
  4. Sottoponi il codice e crea la richiesta di PR.
    5. +
  5. Aggiungi la URL della PR come allegato del Bug di Bugzilla (segui il link Add an attachment e inserisci la URL del PR come contenuto dell'allegato, aggiungi quindi una breve descrizione).
    6. +
  6. All'interno della scheda dove hai allegato la richiesta di PR richiedi un revisore per la tua patch. Potrai farlo aggiungendo un flag review: ?, quindi includendo il possessore del modulo che intendi modificare (vedi la pagina dei possessori dei moduli per maggiori dettagli).
    7. +
  7. Attendi che venga assegnato un revisore e che riveda la tua patch. Il revisore potrebbe aggiungere alcuni commenti e chiederti di apportare modifiche direttamente sulla tua richiesta  di PR in github.
    8. +
  8. Gestisci le richieste del revisore e quindi carica le nuove modifiche al medesimo PR come fatto in precedenza, rimettendo il flag review: ?.
    9. +
  9. Se vengono approvate, al bug verrà assegnato il flag r+ (significa che è stato rivisto/approvato). Dovrai aggregare tutti i commit in uno (leggi anche la sezione sottostante {{ anch("Suggerimenti_per_il_riallineamento") }}).
    10. +
  10. Aggiungi la parola chiave checkin-needed nel campo keywords. A questo punto devi solo attendere che qualcuno depositi la tua patch nei sorgenti di Gaia..
    11. +
  11. Congratulazione il tuo codice è ora parte di Firefox OS!
    12. +
+ +
+

Nota: vi raccomandiamo di attenervi ad una commit per revisione.

+
+ +
+

Nota: per ulteriori informazioni sulla sottomissione di patch puoi leggere l'artcolo  contributing.md.

+
+ +

Suggerimenti per il riallineamento

+ +

Il branch master di Gaia cambia continuamente (molte volte al giorno). Dopo aver creato una patch in 2 ore, potresti trovare che il branch master sia cambiato nel frattempo.
+
+ Dal tuo branch di lavoro (per esempio my-code-fix) il primo tentativo di riallineamento potrebbe somigliare al seguente:

+ +
git checkout -b my-code-fix-r1
+git pull --rebase upstream master
+ +

Se non ci sono conflitti, puoi procedere come segue:

+ +
git checkout my-code-fix
+git pull --rebase upstream master
+git branch -D my-code-fix-r1
+ +

Se trovi dei conflitti, discutili con gli sviluppatori responsabili delle modifiche che hanno generato i conflitti e una volta risolti ripeti la procedura di riallineamento appena descritta.

+ +

Bug di tracciamento di stato e bug di ingegneria

+ +

Mozilla ha una figura speciale chiamata Sceriffo (sheriff). Gli sceriffi hanno il compito di effettuare i merge di codice e di manutenere lo stato dei branch. Poichè il numero degli sceriffi è limitato, è difficile per loro gestire tutte le patch imperfette.

+ +

Per questo motivo per Firefox OS preferiamo aprire un nuovo bug e quindi gestire una nuova patch ogni qualvolta la patch inviata non lavora come dovrebbe. Ciò potrebbe causare qualche difficoltà nell'interpretazione dello stato del bug in QA e nei team di project management.

+ +

Per questo motivo i bugs vengono classificati fra bug di tracciamento di stato (status tracking bugs) e bug di ingegneria (engineering bugs).

+ + + +
+

Nota: Se si tartta di un bug "user story", il project manager dorvebbe scrivere nel campo user story la storia e i criteri di accettazione.

+
+ +

Come recuperare se accidentalmente carichi una patch su un bug di tracciamento di stato

+ +

Se ti succede, non andare in panico. Se accidentalmente sottoponi una patch, ricevi un review+, la sottoponi sul trunk, o viene riportato che non è risolutiva per nulla, segui le seguenti istruzioni:

+ +
    +
  1. Premi "Clone this bug" in alto a destra dell'interfaccia utente di Bugzilla per creare un nuovo bug copiando la maggior parte dei campi originali. Verifiche che i campi whiteboard, keyword, e STR/user story siano stati copiati nel nuovo bug.
    2. +
  2. Imposta il nuovo bug come bloccato dal vecchio bug. Il nuovo bug sarà di tipo bug di tracciamento di stato.
    3. +
  3. Utiliza il flag needinfo per avvisare il project manager del cambiamento di stato. Puoi trovare gli indirizzi email dei differenti project managers di Firefox OS sul nostro Wiki.
    4. +
  4. Crea un nuovo bug di ingegneria per descrivere lo step che fallisce o il criterio di accettazione. Inoltre utilizza il nuovo bug per bloccare il bug di tracciamento.
    5. +
  5. Infine prova a sviluppare una fix per il nuovo bug. Felice hacking!
    6. +
+ +

Applicare patch su vecchi branch

+ +

Potresti trovare differenti tag di versione associati a bug. Se vuoi applicare patch a vecchi branch di  Firefox OS, verifica che soddisfino le regole di sottomissione. Puoi trovare maggiori dettagli nel seguente aricolo B2G Landing.

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/testing_gaia_code_changes/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/testing_gaia_code_changes/index.html new file mode 100644 index 0000000000..72b4c5e998 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/testing_gaia_code_changes/index.html @@ -0,0 +1,119 @@ +--- +title: Provare le modifiche al codice di Gaia +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Testing_Gaia_code_changes +tags: + - B2G + - Firefox OS + - Gaia + - Guide + - Integrazione + - Performance + - Testing +translation_of: Archive/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes +--- +
+

Prima di sottomettere una patch al progetto dovrai eseguire alcune procedure di test per verificare che le modifiche che hai apportato al codice siano realmente funzionanti, e lo siano con tutto il resto del codice di Gaia. Questo articolo spiega come.

+
+ +

La procedura di test generalmente consiste in:

+ + + +

Esaminiamole ora entrambe.

+ +

Debugging standard

+ +

Se sei uno sviluppatore web esperto debuggare il codice potrebbe risultare un processo familiare. Abbiamo già discusso come eseguire il codice di Gaia tramite Firefox e come modificare il codice di Gaia. Per modifiche più complesse farai sicuramente un uso maggiore degli strumenti di debugging messi a disposizione da Firefox.

+ +

Nota: Ulteriori informazioni sull'utilizzo di questi strumenti sono disponibili nella nostra zona degli strumenti.

+ +

Test automatici

+ +

Prima di sottomettere una patch, dovrai eseguire la sequenza di test standard automatici abbinati a Gaia per assicurarti che le modifiche al codice non incidano negativamente su nessuna delle funzionalità essenziali offerte dal telefono. I test che si possono eseguire sono:

+ + + +

Noi generalmente ti chiediamo di eseguire i test prima di sottomettere una patch; se sei alla tua prima esperienza puoi anche sottomettere senza eseguire i test, ma devi chiedere aiuto per poterli eseguire in futuro. Devi aggiornare il repository di Gaia per assicurarti di avere l'ultima versione.

+ +
+

Nota: Puoi trovare maggiori informazioni alla pagina test automatici di Firefox OS.

+
+ +
+

Nota: Dovresti prendere in considerazione di eseguire ciascun set di test su un dispositivo reale se disponibile (alcune funzionalità non sono supportate su un emulatore), in alternativa puoi utilizzare l'emultare B2G Desktop o Firefox Nightly.

+
+ +

Unit testing

+ +

Gli unit testing sono test che vengono eseguiti sulle singole unità di codice di una più grande applicazione - nel caso di Gaia, le singole app. Gaia utilizza:

+ + + +

Puoi utilizzare il seguente comando per scaricare, installare e avviare un server di unit testing (le operazioni impiegano alcuni minuti, potrebbe essere un buon momento per una tazza di caffè):

+ +
DEBUG=1 make
+export FIREFOX=/Applications/FirefoxNightly.app/Contents/MacOS/firefox
+bin/gaia-test
+ +

Verrà aperta una pagina web locale con una lista di unit testing. Per eseguirli:

+ + + +

Con la finestra aperta, puoi eseguire l'intera suite di test tramite il seguente comando:

+ +
make test-agent-test
+ +
+

Nota: Questa azione può richiedere molto tempo in quanto verranno eseguiti parecchi test (anche un'ora o più), ti converrebbe eseguire solo i test sulla app che hai mdificato. Potrai farlo aggiungendo APP=<app nome cartella> al comando precedente, per esempio APP=settings.

+
+ +
+

Nota: Per ulteriori informazioni puoi leggere l'articolo uniit testing di Gaia.

+
+ +

Test di integrazione

+ +

I test di integrazione prevedono il testing di differenti unità di codice assieme per verificare la correttezza dell'interazione fra le stesse, logicamente questo step avviene successivamente agli unit testing. I test di integrazione di Gaia sono gestiti tramite uno script marionette scritto in JavaScript e un server basato su python. Il server può comunicare con Gecko quindi è possibile controllare sia il browser che il dispositivo Firefox OS, facendoli interagire l'un l'altro.

+ +

Puoi eseguire il seguente comando per avviare i test di integrazione:

+ +
make test-integration
+ +
+

Nota: Analogamente agli unit testing, eseguire i test di integrazione completi può richiedere parecchio tempo, puoi aggiungere APP=<app nome cartella> al comando precedente per provare una singola app, per esempio APP=calendar.

+
+ +
+

Nota: per eseguire test di integrazione su dispositivi differenti (non smartphone) aggiungi GAIA_DEVICE_TYPE=<device type name> al precedente comando per specificare la tipologia di dispositivo, per esempio GAIA_DEVICE_TYPE=tv. Se non lo farai il test potrà fallire.

+
+ +
+

Nota: per ulteriori informazioni puoi leggere l'articolo sui test di integrazione di Gaia.

+
+ +

Test prestazionali

+ +

I test prestazionali di Gaia vengono eseguiti utilizzando il tool esterno Raptor CLI tool. Tramite Raptor puoi automatizzare l'esecuzione di un applicazione più volte e ottenere statistiche sui tempi di caricamento. Dopo aver eseguito un test, Raptor inoltre mostra l'utilizzo di memoria dell'applicazione.

+ +

Per utilizzare Raptor, per favore leggi il seguente articolo Raptor: Getting Started.

+ +

Test sulla UI

+ +

Fai riferimento all'articolo introduzione ai test sulla UI di Gaia.

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/understanding_the_gaia_codebase/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/understanding_the_gaia_codebase/index.html new file mode 100644 index 0000000000..64338ff8e1 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/understanding_the_gaia_codebase/index.html @@ -0,0 +1,153 @@ +--- +title: Capire il codice di Gaia +slug: >- + Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Understanding_the_Gaia_codebase +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - capire il codice di Gaia +translation_of: Archive/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase +--- +
+

Prima di iniziare a fare le proprie modifiche al codice di Gaia è necessario comprendere le nozioni di base sulla struttura di Gaia e quali convenzioni di programmazione utilizzare. Questo articolo descrive entrambi questi aspetti.

+
+ +

Branch di Gaia

+ +

Nel codice di Gaia sono presenti differenti branch, e in funzione del tuo obiettivo (o del dispositivo in tuo possesso), potresti non necessariamente scaricare o lavorare sulla branch master. Segue una guida sintetica ai repository principali:

+ + + +

Struttura del codice di Gaia

+ +

Questa sezione descrive le parti più importanti del codice di Gaia.

+ +

apps/

+ +

Questo direttorio contiene tutte le principali applicazioni di Gaia, sia le applicazioni presenti sulla home screen - come il calendar e la camera -  che le applicazioni sottostanti - quali l'app di sistema (system app), la home screen, e la tastiera.

+ +

Sebbene le app lavorino con modalità leggermente differenti fra loro, tutte hanno un certo numero di caratteristiche in comune, fra cui:

+ + + +
+

Nota: Puoi trovare ulteriori informazioni sulle app di default di Gaia nella guida delle app di Gaia.

+
+ +

build/

+ +

Questo direttorio contiene gli script di build.

+ +

dev_apps/

+ +

Questo direttorio contiene tutte le altre app che si vogliono includere in una build customizzata.

+ +
+

Nota: Per maggiori informzazioni sulla customizzazione di Gaia, leggi la specifica Guida alla customizzazione commerciale.

+
+ +

keyboard/

+ +

Questo direttorio contiene dizionari e layout di tastiere in differenti lingue.

+ +

locales/

+ +

Questo direttorio contiene un file JSON, languages_all.json, che definisce quali lingue sono supportati in Gaia. Per maggiori informazioni sulla localizzazione delle app, leggi la guida di Avvio alla localizzazione delle app.

+ +

shared/

+ +

Questo direttorio contiene una serie di risorse condivise da più app, fra cui le più importanti sono:

+ + + +

tools/

+ +

Questo direttorio contiene strumenti per gli script di build e test.

+ +

Stile di programmazione di Gaia

+ +

Gaia segue lo stile di programmazione Javascript definito da Google.

+ +

Informazioni di base:

+ + + +

Regole specifiche

+ +
    +
  1. Assicurati che i file HTML sono dichiarati con <!DOCTYPE html> (come nei documenti HTML5). Se non lo fai, Internet Explorer 9 e successivi caricheranno le pagine in modalità compatibile.
    2. +
  2. Includi l'istruzione "use strict"; (esattamente così, compresi gli apici) all'inizio del tuo file javaScript per abilitare la modalità strict.
    3. +
  3. Utilizza sempre due spazi per l'indentazione, piuttosto che il tab.
    4. +
  4. Per favore utilizza separatori di linea per separare blocchi logici di codice!
    5. +
  5. I file che hanno nomi con più parole dovrebbero utilizzare il carattere di "underscore" per separare le parole, like_this.js.
    6. +
  6. Utilizza gli apici singoli invece che doppi per le stringhe.
    7. +
  7. Utilizza la struttura condizionale estesa: + 
    Bad
+if (expression) doSomething();
+
+Correct
+if (expression) {
+  doSomething();
+}
    +
    8. +
  8. Se stai lavorando sulla system app, leggi la convenzione qui descritta.
    9. +
+ +

Controllo dello stile di programmazione su base commit

+ +

Gaia utilizza JSHint per automatizzare i controlli sullo stile di programmazione Javascript prima di ogni commit (sfruttando una funzionalità di git che consente di automatizzarne l'esecuzione).

+ +

Lo script di pre-commit gaia/tools/pre-commit verrà copiato nel direttorio .git/hooks di progetto una volta eseguito il comando make.

+ +
+

Nota: Inizialmente utilizzavamo gjslint per controllare lo stile di programmazione, successivamente è stato deprecato a favore di JSHint in quanto permette controlli più stringenti e produce risultati migliori. Stiamo utilizzando JSHint da Firefox OS 1.4, mentre gjslint è unicamente consigliato per quei file che non sono ancora gestiti con JSHint.

+
+ +

Eseguire i controlli manualmente

+ +

Prima di sottomettere una patch ti consigliamo di eseguire JSHint manualmente per controllare eventuali errori di stile.
+
+ Dovresti guardare nel direttorio gaia/build/jshint per maggiori dettagli sull'utilizzo di JSHint in Gaia; Gaia ti fornisce gli script di build. Puoi eseguire il comando:

+ +
$ make lint
+ +

per eseguire sia gjslint che jshint. Oppure puoi eseguire:

+ +
$ make hint
+ +

per eseguire solamente jshint.

+ +
+

Nota: Se vuoi installare JSHint da te stesso, senza utilizzare Gaia, puoi utilizzare i seguenti comandi:

+ +
npm install jshint -g
+jshint myfile.js
+
+
+ +

 

diff --git a/files/it/archive/b2g_os/index.html b/files/it/archive/b2g_os/index.html new file mode 100644 index 0000000000..eab7788bec --- /dev/null +++ b/files/it/archive/b2g_os/index.html @@ -0,0 +1,136 @@ +--- +title: B2G OS +slug: Archive/B2G_OS +tags: + - B2G + - B2G OS + - Basic + - Gaia + - Gecko + - Gonk + - Mozilla + - Overview + - b2g smartphone os +translation_of: Archive/B2G_OS +--- +
B2G OS è un sistema operativo completo ed indipendente per il web aperto. Si tratta di un progetto sviluppato dalla comunità degli utenti di Mozilla e costituisce la base dei prodotti Firefox OS.
+ +

B2G OS è un sistema operativo open-source mantenuto dalla comunità per smartphone, tablet, smart TV e altri dispositivi connessi. Il progetto nasce nel 2011 ed è basato sul kernel Linux e sul motore di rendering Gecko. L'intera interfaccia utente è costruita usando tecnologie web quali HTML, CSS e Javascript e può essere usato per lanciare ed utilizzare applicazioni web.  Da quando Mozilla ha interrotto il suo programma commerciale di diffusione di smartphone Firefox OS, il lato smartphone del progetto è interamente mantenuto dai volontari della comunità con il nome di B2G OS.

+ +

+ +
+

Nota: Una chiamata alla cotribunzione ed una chiamata per l'adozione delle app sono state realizzate per avvicinare ulteriori volontari, sentiti libero di condividerle!

+
+ +
+
+

   Come aiutare

+ +
    +
  • Trova bug (il meta bug è bug 1252143)
    • +
  • Correggi bug
    • +
  • Aiutaci a sistemare i test automatici
    • +
  • Porta una app per smartphone gaia: +
      +
    1. facendola diventare una webapp;
      2. +
    2. o traducendola in chrome:// (perché?) e dacci un report.  
      3. +
    +
    • +
  • Porta B2G OS sul tuo telefono o aiuta a mantenere un porting esistente
    • +
  • Aiuta a correggere bug di Gecko
    • +
  • Aiuta a migliorare e tradurre questa documentazione ed il wiki
    • +
  • Proponi e implementa nuove funzionalità per smartphone
    • +
+
+ +
+

   Partecipa

+ + +
+ +
+

Dispositivi supportati

+ + + +

Per maggiori informazioni consulatare questa pagina.
+ Installa facilmente B2GOS sul tuo dispositivo con B2G installer.
+ Il tuo dispositivo non è nella lista? Prova Mulet sul tuo desktop.

+
+
+ +
+

Nota: alcune pagine sono state spostate nell'Archivio MDN — facci sapere se riscontri difficoltà a trovare qualcosa, o se individui qualcosa nell'archivio che ritieni debba essere ritrasferito in questa sezione.

+
+ + + +
    +
  1. Compilazione e installazione + +
      +
    1. Panoramica su compilazione e installazione
      2. +
    2. Sommario del processo di compilazione di B2G OS
      3. +
    3. Prerequisiti per la compilazione
      4. +
    4. Preparare la tua prima compilazione
      5. +
    5. Compilare B2G OS
      6. +
    6. Add-on per la compilazione di B2G OS
      7. +
    7. Compilare B2G OS per Flame su Mac OS X
      8. +
    8. Scegliere come eseguire Gaia e B2G OS
      9. +
    9. Foglio di riferimento per le variabili di compilazione di B2G OS
      10. +
    +
    2. +
  2. Dispositivi compatibili +
      +
    1. Installare B2G OS su dispositivo mobile
      2. +
    2. Creare e applicare pacchetti di aggiornamento per B2G OS
      3. +
    3. Compilare e installare aggiornamenti via Internet prodotti dalla comunità (FOTA)
      4. +
    +
    3. +
  3. Portabilità di B2G OS +
      +
    1. Panoramica sulla portabilità
      2. +
    2. Basi della portabilità
      3. +
    3. Portabilità su CyanogenMod
      4. +
    +
    4. +
  4. Sviluppare Gaia +
      +
    1. Panoramica sullo sviluppo di Gaia
      2. +
    2. Eseguire il codice base di Gaia
      3. +
    3. Esegui Gaia su desktop usando Mulet
      4. +
    4. Comprendere il codice base di Gaia
      5. +
    5. Modificare il codice di Gaia
      6. +
    6. Verificare le modifiche al codice di Gaia
      7. +
    7. Inviare una patch di Gaia
      8. +
    8. Sistema di compilazione primario di Gaia
      9. +
    9. Differenti modi per eseguire Gaia
      10. +
    10. Riferimenti per le opzioni di Make
      11. +
    11. Riferimenti per gli strumenti di Gaia
      12. +
    +
    5. +
  5. API di B2G OS
    6. +
diff --git a/files/it/archive/b2g_os/installare_su_un_dispositivo_mobile/index.html b/files/it/archive/b2g_os/installare_su_un_dispositivo_mobile/index.html new file mode 100644 index 0000000000..10c0384a89 --- /dev/null +++ b/files/it/archive/b2g_os/installare_su_un_dispositivo_mobile/index.html @@ -0,0 +1,136 @@ +--- +title: Come installare Firefox OS su un dispositivo mobile +slug: Archive/B2G_OS/Installare_su_un_dispositivo_mobile +translation_of: Archive/B2G_OS/Installing_on_a_mobile_device +--- +
+

Dopo avere compilato "Boot to Gecko" per uno dei dispositivi supportati,  puoi installare Firefox OS. Questa articolo ti guiderà nel processo.

+
+ +
Nota: La prima volta che effettuerai il flash al tuo cellulare, questo deve avere Android 4 (Ice Cream Sandwich) installato, altrimenti il processo non andrà a buon fine. Una volta effettuata la prima installazione di B2G, si potrà quindi aggiornare alle versioni successive.
+ +
Nota: Per alcuni dispositivi (per es. Flame) è possibile saltare l'intero processo di compilazione. Vedere questa guida per maggiori informazioni.
+ +

Installare ADB

+ +

Su OSX

+ +

Se hai Homebrew :

+ +
brew install android-platform-tools
+ +

Altrimenti scarica l'Android Developer Tools e aggiungi i sorgenti al tua PATH.

+ +

Su Ubuntu

+ +
sudo apt-get install android-tools-adb
+ +

Effettuare il flash al tuo cellulare

+ +

Per effettuare il flash al tuo cellulare, semplicemente connetti il tuo dispositivo e digita:

+ +
./flash.sh
+
+ +

Fatto! Adesso il B2G che avevi compilato si installerà nel tuo dispositivo.

+ +

Nota che se avevi effettuato precedenti installazioni di Gaia potresti aver bisogno anche di scrivere:

+ +
cd gaia
+make reset-gaia
+ +

Questo cancellerà sia tutti i tuoi dati memorizzati in Gaia, sia anche le impostazioni e le preferenze obsolete di Gaia in modoo da effettuare una installazione pulita. Teoricamente ./flash.sh dovrebbe fare tutto questo automaticamente ma per alcuni dispositivi, come hamachi, ./flash.sh effettua il flash solo ad alcuni moduli (./flash.sh -f farà effettuare il flash a tutto.)

+ +

Configurare le regole udev rule per il tuo dispositivo

+ +

Su Linux se ricevi questo messaggio

+ +
< waiting for device >
+ +

significa che probabilmente non hai aggiunto una udev rule per l'avvio veloce del dispositivo (che per ADB non è lo stesso), oppure significa che hai semplicemente bisogno di far partire ./flash.sh con "sudo". Puoi ottenere l'USB vendor ID con "lsusb", ma di solito è quello di Google: 18d1, quindi aggiungendo la riga successiva in /etc/udev/rules.d/51-android.rules dovrebbe funzionare:

+ +
SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"
+ +
Note: Se su linux ottieni l'errore libusb  error "-3" significa che per avere l'accesso al dispositivo USB devi essere root. Esegui di nuovo lo script usando Sudo.
+ +
Note 2: Se possiedi un Unagi o un Geeksphone Keon, ti servono due linee: una per l'ID del Vendor del telefono e una per l'ID di Google.
+ +

Note speciali per dispositivi Hamachi, Helix e Leo

+ +

Se il tuo telefono è un dispositivo hamachi, helix o leo, lo script ./flash.sh al momento eseguirà il flash solamente per gecko e gaia.  It is recommended that you flash with the OEM as a base build to get the firmware and the gonk layers and then flash the gecko and gaia on top.  If you want to flash using the images, there is an override flash where you can ./flash.sh -f and it will use the image files to flash your device.

+ +

Special notes for the Samsung Galaxy S2

+ +

If your phone is a Galaxy S2 and you are using heimdall 1.3.2 (the latest version; use heimdall version to check), you may see an alarming error "FACTORYFS upload failed!" followed by "Heimdall flashing failed" and some additional information. This is actually a success condition, and you can ignore the advice.

+ +

To get rid of this strange behavior, grab a source copy of heimdall, downgrading to the 1.3.1 release ("git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06"), then compile it  according to the README, then install that to make the error go away. However, this isn't strictly necessary.

+ +

All versions of heimdall are unable to flash a system.img larger than 100MB. Do:

+ +
ls -l ./out/target/product/galaxys2/system.img
+
+ +

to see how big yours is. If it's too large, ask in IRC for advice; there are ways to do it in two stages.

+ +

Added step for the Samsung Galaxy S2

+ +

If you're flashing onto the Galaxy S2, there is an additional step to follow. Gaia does not get flashed automatically by the flash.sh script; you'll need to also do:

+ +
./flash.sh gaia
+
+ +

Flashing specific partitions to fastboot phones

+ +

You can flash specific partitions to fastboot phones (that is, any phone other than the Samsung Galaxy S2). For example:

+ +
./flash.sh system
+./flash.sh boot
+./flash.sh user
+
+ +

WARNING: flashing user (at least) may delete your user-specific data (contacts, etc.).

+ +

Updating specific modules

+ +

You can update specific components of B2G by specifying their names when flashing. For example:

+ +
./flash.sh gaia
+./flash.sh gecko
+
+ +

In order to update only one application you can use BUILD_APP_NAME environment variable:

+ +
BUILD_APP_NAME=calendar ./flash.sh gaia
+ +

If your phone is not for developer (you aren't interested on test apps and/or require optimization), you can update gaia using:

+ +
VARIANT=user ./flash.sh gaia
+ +

Next steps

+ +

At this point, your phone should be running Boot to Gecko! It's time to experiment, write some code, test, or do some debugging!

+ +
Note: A helpful usage tip: if your build of B2G starts up with the lock screen requesting a pass code to unlock the phone, the default code is 0000.
+ +

Troubleshooting

+ +

Here are a some tips for what to do if your device doesn't work right after installing B2G, or updating it to a new version

+ +

If the UI doesn't start up

+ +

If you update your phone and the user interface doesn't start up, you can reset it to clear out out-of-date configuration and the like. This may bring it back to life, but note that it may also delete your user-specific data (contacts, etc.). Here's how:

+ +
cd gaia
+make reset-gaia
+
+ +

If you want change from developer to production mode

+ +
cd gaia
+make reset-gaia PRODUCTION=1
+ +

WARNING: reset-gaia may delete your user-specific data (contacts, etc.).

+ +

"image is too large" error message on ./flash.sh execution

+ +

It might mean that you phone needs to be rooted first before flashing it. As b2g needs to be written on root partition, your phone needs to be rooted in order to install it.

diff --git a/files/it/archive/b2g_os/introduction/index.html b/files/it/archive/b2g_os/introduction/index.html new file mode 100644 index 0000000000..309e25034c --- /dev/null +++ b/files/it/archive/b2g_os/introduction/index.html @@ -0,0 +1,67 @@ +--- +title: Introduzione a Firefox OS +slug: Archive/B2G_OS/Introduction +tags: + - B2B + - Firefox OS +translation_of: Archive/B2G_OS/Introduction +--- +

Firefox OS (conosciuto anche attraverso il suo nome in codice "Boot to Gecko" o "B2G") è il sistema operativo mobile, di Mozilla, basato su Linux e la tecnologia Gecko di Mozilla. Firefox OS è un sistema operativo mobile senza tecnologie proprietarie ... che fornisce, agli svilupparoti di applicazioni, l'opportunità di creare prodotti eccellenti. In più, Firefox OS è flessibile ed abbstanza potente da rendere sodisfatti i suoi utilizzatori.

+

Per gli sviluppatori Web, la parte più importante, da comprendere, e che l'intera interfaccia utente è un'applicazione Web, capace di eseguire e visualizzare altre applicazioni Web. Qualsiasi modifica all'interfaccia utente ed ogni applicazione, creata per essere eseguita su Firefox OS, sono pagine Web, con un accesso avanzato ai servizi ed all'hardware del dispositivo mobile.

+

Puoi imparare come costruire ed installare Firefox OS seguendo la nostra guida pratica.
+  

+

Requisisti Hardware

+

La maggior parte dei recenti dispositivi mobili, bassati su processori di tipo ARM, sono sufficientemente potenti da supportare l'installazione di Firefox OS

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComponentMinimumRecommended
CPUARMv6Classe Cortex A5 oppure ( ancor meglio )
+ ARMv7a with NEON
GPU—Adreno Adreno 200 o migliore
Connectivity—WiFi
+ 3G
Sensors—Accelerometro
+ Sensore di Prossimità
+ Sensore luminoso
+ A-GPS
+

Per una migliore esperienza utente è un'ottima idea scegliere un dispositivo che offre un profilo colore uniforme ( implementato da un driver per dispositivi grafici ) e supporto per cuffie/auricolari per l'attivazione e la disattivazione e per eseguire, mettere in pausa o fermare contenuti media. Queste funzionalità sono comuni in quasi tutti i moderni smarphone. 

+

Pulsanti e controlli

+

Un tipico dispositivo con Firefox OS  ha un piccolo numero di pulsanti fisici:

+
+
+ Pulsante Home
+
+ Questo pulsante, generalmente, si trova al centro, sotto il display. Premendolo ritorneremo al menù principale ( o app-launcher ). Tenendolo premuto si aprirà la vista con la quale visualizzare le applicazioni in esecuzione;  per chiudere/terminare un'applicazione basterà poggiarvi il dito e poi "strisciarla" verso l'alto.
+
+ Pulsante per il controllo volume
+
+ Lungo la parte sinistra c'è il pulsante per il controllo volume; premendo la metà, in alto, del pulsante si aumenterà il volume e premendo l'altra metà, in basso, il volume diminuirà.
+
+ Pulsante di accensione
+
+ Nell'angolo in alto a destra, del dispositivo, si trova il pulsante di accensione/spegnimento.
+
diff --git a/files/it/archive/b2g_os/phone_guide/fairphone/index.html b/files/it/archive/b2g_os/phone_guide/fairphone/index.html new file mode 100644 index 0000000000..f7dee28295 --- /dev/null +++ b/files/it/archive/b2g_os/phone_guide/fairphone/index.html @@ -0,0 +1,184 @@ +--- +title: Fairphone +slug: Archive/B2G_OS/Phone_guide/Fairphone +tags: + - B2G + - Dispositivo + - Equo solidale + - Fairphone + - Firefox OS + - Gaia + - Guida + - Telefono +translation_of: Archive/B2G_OS/Phone_guide/Fairphone +--- +
+

Attenzione: Questo dispositivo non è ancora in grado di eseguire Firefox OS, ma questo è l'obiettivo finale. Questa pagina vuole essere il punto centrale per le informazioni per la comunità per coordinare il lavoro di portabilità.

+
+ +

Il Fairphone è uno smartphone basato sull'economia equa nei riguardi dell'approvvigionamento, della produzione, della distribuzione, dell'auto-riparazione e del riciclaggio dell'elettronica. Non utilizza hardware completamente FOSS, ma supporta l'ideale di restituire un minimo di controllo hardware ai suoi utenti.

+ +

Informazioni sulla distribuzione del dispositivo

+ +

Fairphone ha rilasciato due dispositivi finora — il Fairphone v1 FP1 (prima edizione) è stato rilasciato il 30 dicembre 2013 e il FP1U (secondo lotto) è stato rilasciato il 22 luglio 2014. Le vendite sono ormai giunte alla conclusione per il dispositivo v1. Il Fairphone v2 stato rilasciato il 16 luglio 2015 e può essere ordinato da Fairphone.

+ + + + + + + + + + + + + + +
Fairphone v1Fairphone v2
A picture of the Fairphone v1 device, showing lockscreen and the back. Credit : Fairphone. CC BY-NC-SA.Fairphone 2 Black Matte
+ +
+

Nota: è possibile seguire lo stato di avanzamento sul blog di Fairphone e controllare la strategia annunciata e l'approccio.

+
+ +

La portabilità di Firefox OS per il dispositivo Fairphone

+ +

Non è ancora disponibile, ma si sta lavorando in questa direzione.

+ +

Problemi reali

+ +

Fairphone v1 non può aggiornare il proprio sistema operativo Android personalizzato perché il produttore del chipset non ha rilasciato il codice sorgente aggiornato o una sua compilazione.

+ +

Al Mobile World Congress 2015, Fairphone ha aperto a possibili sistemi operativi alternativi disponibili per l'imminente Fairphone v2. A partire da queste discussioni è stato deciso di iniziare il lavoro di portabilità di Firefox OS per il Fairphone. La portabilità di Firefox OS può essere un modo per salvare il Fairphone v1, così come evitare tali questioni per le future generazioni del telefono. La collaborazione di Mozilla con i tre principali fornitori di chipset potrebbe essere un'ulteriore aiuto.

+ +

Fairphone v2 è orientato al codice sorgente aperto con i contributi della comunità al codice sorgente / compilazione di Fairphone OS.

+ +

L'avanzamento e la soluzione

+ +

In questo momento il progetto di portabilità è appena agli inizi (fase di accensione). Ci auguriamo che il lavoro di portabilità possa iniziare presto — tenete d'occhio questo spazio per ulteriori informazioni.

+ +

Contribuire

+ +

Se siete interessati a saperne di più o a contribuire al lavoro di portabilità, i seguenti link vi saranno utili.

+ +

Strumenti del progetto

+ + + +

Firefox OS

+ +

Se siete degli sviluppatori per la portabilità e volete saperne di più a proposito di Firefox OS:

+ + + +

Comunità XDA

+ +

Se siete degli sviluppatori di Firefox OS e volete saperne di più a proposito della portabilità di un sistema operativo:

+ + + +

Caratteristiche dispositivo

+ +

Fairphone v1

+ +

Potete trovare un elenco dettagliato delle specifiche sulla pagina delle specifiche di Fairphone.

+ +

Rete

+ + + +

Hardware

+ + + +

Software

+ + + +

Fairphone v2

+ +

Potete trovare un elenco dettagliato delle specifiche sulla pagina delle specifiche Fairphone.

+ +

Rete

+ + + +

Hardware

+ + + +

Software

+ + + +

Vedere anche

+ + diff --git a/files/it/archive/b2g_os/phone_guide/flame/index.html b/files/it/archive/b2g_os/phone_guide/flame/index.html new file mode 100644 index 0000000000..07a18504c5 --- /dev/null +++ b/files/it/archive/b2g_os/phone_guide/flame/index.html @@ -0,0 +1,323 @@ +--- +title: Flame +slug: Archive/B2G_OS/Phone_guide/Flame +translation_of: Archive/B2G_OS/Phone_guide/Flame +--- +

 

+ +
+

Aggiornamenti sul tuo Flame: ti incoraggiamo a iscriverti alla maililng list per ricevere aggiornamenti periodici sulle nuove versioni del software e altre notizie riguardo il tuo dispositivo Flame: https://mail.mozilla.org/listinfo/flamenews

+
+ +

A picture of the Flame device, showing the Firefox OS homescreen containing several app icons.

+ +

Disponibile per l'ordine

+ +

Il telefono di riferimento per gli sviluppatori, il Flame, è una pietra miliare nel rilascio di dispositivi Firefox OS. L'hardware del Flame offre un insieme rappresentativo di specifiche, incluso un display FWVGA e un processore dual-core per aiutare gli sviluppatori a creare fantastici contenuti ed esperienze. Una singola piattaforma hardware è anche una buona cosa per i tester, rendendo semplice provare e indirizzare problemi software specifici senza doversi preoccupare dei bug di un determinato dispositivo o di altro.

+ +

Se già possiedi il telefono e vuoi cominciare a sperimentare, sviluppare e distribuire app o contribuire alla piattaforma Firefox, i seguenti link sono utili per iniziare a muovere i primi passi:

+ + + +

Se cerchi ulteriori informazioni riguardo all'aggiornamento del sistema operativo, al ripristino, al caricamento delle app o alle specifiche del telefono, qui troverai tutte le informazioni necessarie.

+ +

Acquistare il dispositivo

+ +

Il nostro partner per la realizzazione dei dispositivi ha reso il telefono disponibile per l'ordine sul sito everbuying.com al prezzo di 170 US$, spese di spedizione in tutto il mondo incluse (il dispositivo costa 145 $, la spedizione 25 $ e potrebbero essere addebitate tasse doganali, a seconda della destinazione). Il dispositivo non ha blocchi nel bootloader né per quanto riguarda gli operatori. Utilizza una radio quadri-band GSM+UMTS funzionante con una vasta gamma di operatori.

+ +

Operazioni preliminari importanti

+ +

Ci sono alcune operazioni da eseguire a seconda del sistema operativo che utilizzi prima di aggiornare il tuo dispositivo, per esempio per aggiornare la versione di Firefox OS presente nel Flame o inviare app al proprio telefono (entrambe le operazioni sono discusse più avanti).

+ +

Tutti i sistemi operativi

+ +

È necessario installare ADB e Fastboot sul proprio computer. Queste applicazioni permettono al computer di interagire con il telefono quando quest'ultimo è connesso con il cavo USB. Sono necessarie per installare una nuova versione di Firefox OS sul telefono, per ripristinarlo nel caso si blocchi, per caricare app sul telefono ecc.

+ +
+

Nota: se utilizzi Ubuntu puoi installare ADB e Fastboot semplicemente usando i comandi sudo apt-get install android-tools-adb android-tools-fastboot in un terminale.

+
+ +

ADB e Fastboot sono disponibili nell'Android Developer Toolkit:

+ +
    +
  1. Visita il link
    2. +
  2. Fai clic sul pulsante Download Eclipse ADT
    3. +
  3. Accetta i termini della licenza
    4. +
  4. Scegli tra la versione a 32 o 64 bit (la versione a 32 bit andrà bene se non sei sicuro)
    5. +
  5. Fai clic sul pulsante Download Eclipse ADT with the Android SDK... .
    6. +
  6. Quando il download è terminato, estrai i contenuti del file zip sul tuo desktop
    7. +
  7. Visto che il nome della cartella è abbastanza complicato, puoi cambiare il nome semplicemente in adt
    8. +
+ +

ADB è uno strumento che va eseguito dalla riga di comando. Se apri un terminale o prompt dei comandi, ti posizioni nella cartella adt/sdk/platform-tools ed esegui il comando adb, dovresti vedere varie informazioni riguardo a quello che puoi fare con ADB. Eseguire adb devices dovrebbe mostrarti la riga List of devices attached, e nient'altro, poiché non hai ancora collegato alcun dispositivo.

+ +

A questo punto, è necessario impostare la variabile PATH per puntare allo strumento ADB, così da poterlo eseguire ovunque, non solo quando ti trovi nella cartella che lo contiene. Per farlo:

+ + + +

Su Mac/Linux:

+ + + +

Linux & Mac

+ +

Se stai usando un sistema Linux o Mac non sono necessarie ulteriori operazioni anche se, a seconda della distribuzione Linux che utilizzi, potresti dover aggiungere una regola udev per il telefono, con una configurazione simile a questa:

+ +
SUBSYSTEM=="usb", ATTRS{idVendor}=="05c6", ATTRS{idProduct}=="9025", GROUP="users", MODE="0666"
+ +

Assicurati di ricaricare le regole con --reload-rules, poi stacca e riattacca il dispositivo prima di procedere.

+ +

Windows

+ +

Per inviare le app al telefono utilizzando AppManager o ADB avrai bisogno di installare un driver per consentire la comunicazione via USB. Segui le istruzioni seguenti per installarli.

+ +

Scaricare il driver

+ +

Scarica da qui il driver per Windows. Quando l'avrai scaricato estrai il contenuto del file ZIP in una cartella del tuo hard drive.

+ +
+

Nota: l'Android Debug Bridge (ADB) deve essere già installato.

+
+ +

Installare il driver USB

+ +

A questo punto connetti il tuo Flame al computer utilizzando un cavo USB.

+ +

Per installare il driver apri la cartella Alcatel_USB_Driver_Q_4.0.0_2013_11_11_noinstall all'interno della cartella nella quale hai estratto il file ZIP e fai doppio clic sull'eseguibile DriverInstaller.exe . Potresti ricevere un avvertimento che ti informa che l'eseguibile proviene da un autore sconosciuto. Se accade fai clic sul pulsante Sì e l'eseguibile verrà avviato.

+ +

Simple dialog box showing a picture of a phone along with install and uninstall buttons.

+ +

Fai clic sul pulsante Install per installare il driver.

+ +

Dopo che il driver è stato installato puoi verificare che funzioni aprendo una riga di comando su Windows e digitando adb devices . Questo dovrebbe fornire un elenco di dispositivi connessi simile a:

+ +
List of devices attached
+3561d02a          device
+ +

Se il tuo dispositivo non viene visualizzato, controlla la Gestione Dispositivi di Windows. Il tuo Flame potrebbe essere indicato come "ACER ADB Interface". Puoi confermarlo scollegando e ricollegando il dispositivo e verificando che scompaia dalla gestione dispositivi. Disinstalla il driver facendo clic col tasto destro del mouse su "ACER ADB Interface" e facendo poi clic su Disinstalla. Poi esegui nuovamente l'installazione come sopra. È consigliabile impostare il conto alla rovescia per lo spegnimento dello schermo del Flame ad un valore alto (su Impostazioni > Schermo > Blocca schermo dopo) poiché pare che Windows disinstalli e reinstalli il driver di default quando lo schermo si spegne.

+ +

Aggiornare il software del tuo Flame

+ +

Saranno disponibili due "canali" principali per le versioni di Firefox OS rilasciate per il Flame:

+ + + +

Puoi scaricare i file e gli strumenti di ripristino ai seguenti link:

+ + + +

Per installare l'immagine di base sul tuo dispositivo:

+ +
    +
  1. Assicurati che l'opzione di debug remoto sia attivata sul tuo Flame, utilizzando l'opzione Debug Remoto/Debug via USB nelle Impostazioni di sviluppo del tuo dispositivo (l'opzione potrebbe chiamarsi in modo diverso a seconda che tu abbia installato una versione pari o inferiore alla 1.3 o pari o superiore alla 1.4).
    2. +
  2. Collega il Flame al tuo computer attraverso il cavo USB. Verifica che il computer sia connesso al dispositivo eseguendo il comando adb devices in un terminale.
    3. +
  3. Scarica ed estrai il software appropriato per il tuo sistema (il file .zip se utilizzi Mac o Linux, oppure il .exe se utilizzi Windows).
    4. +
  4. Entra nella directory in cui hai estratto il software ed eseguilo: +
      +
    • In Windows, entra nella directory tramite il prompt dei comandi, poi avvia lo script flash.bat (o fai doppio clic sul file).
      + NOTA: Se il file non fosse presente, puoi rinominare il file flash.sh in file.bat e usare quello.
      • +
    • In Linux / OSX, utilizza il terminale per entrare nella directory, poi esegui lo script flash.sh utilizzando il comando sudo ./flash.sh (se non lo avvii utilizzando sudo, lo script potrebbe non riconoscere il telefono e non funzionare).
      • +
    +
    5. +
+ +
+

Note: ti incoraggiamo, inoltre, a compilare da te Firefox OS per installarlo sul tuo Flame. Vedi l'articolo Compilare e installare Firefox OS.

+
+ +

Aggiornare il Flame ad una versione nightly

+ +
+

Nota: al momento le versioni di sviluppo Nightly di Firefox OS non supportano l'A-GPS. Questo potrebbe causare problemi di performance delle funzionalità GPS. Contiamo di risolvere il problema con un aggiornamento futuro sul canale Nightly.

+
+ +
    +
  1. Prima di aggiornare il tuo telefono alla versione nightly dovresti installare l'ultima immagine di base per assicurarti che il sistema sottostante sia aggiornato. Puoi scaricare un'immagine di base tramite i collegamenti qui sopra.
    2. +
  2. Poiché i passi descritti sopra installano una nuova versione del sistema operativo, dovrai abilitare nuovamente il debug remoto sul Flame, usando l'opzione Debug remoto nelle opzioni Sviluppo.
    3. +
  3. Scegli la versione Nightly che vuoi installare. Puoi trovarne varie all'indirizzo http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/. Probabilmente quella che ti interessa è una tra: + +
    4. +
  4. Scegli una versione e scarica sia il file b2g-XX.XX.en-US.android-arm.tar.gz che gaia.zip.
    5. +
  5. Scarica il shallow flash script e salvalo in una directory appropriata (ad esempio la stessa directory dove hai salvato i due file scaricati prima).
    6. +
  6. Installa le immagini sul telefono col seguente comando: +

    Mac

    + + 
    ./shallow_flash.sh -g /path/to/gaia.zip -G /path/to/b2g-XX.XX.en-US.android-arm.tar.gz
    + +

    Linux

    + + 
    ./shallow_flash.sh -ggaia.zip -Gb2g-XX.XX.en-US.android-arm.tar.gz
    + +

    Windows (Nota: istruzioni provvisorie, potrebbe non funzionare al momento; funzionante con Cygwin)

    + + 
    shallow_flash.sh -g gaia.zip -G b2g-XX.XX.en-US.android-arm.tar.gz
+
    +
    7. +
+ +
+

Nota: se ricevi un errore "permission denied" (permesso negato) durante l'esecuzione del comando, probabilmente lo script non ha i permessi corretti. Eseguire chmod +x shallow_flash.sh dovrebbe risolvere il problema.

+
+ +
+

Nota: uno "shallow flash" aggiorna solamente Gecko e Gaia, al contrario di un'installazione completa che aggiorna Gecko/Gaia ma anche il livello Gonk sottostante e i binari associati al particolare tipo di dispositivo. Per questo è il caso di installare prima l'immagine di base ufficiale, come suggerito sopra, e poi effettuare lo "shallow flash" sopra di essa, una volta che i livello Gonk e quello dei binari sono a posto.

+
+ +
+

Le immagini Shallow contengono altro oltre a Gecko e Gaia, quindi tutti i dati nel dispositivo verranno cancellati!

+
+ +

Una volta terminato, il telefono dovrebbe riavviarsi con la versione aggiornata e mostrare la sequenza di primo avvio.

+ +

Risoluzione dei problemi dei font

+ +

Dopo aver aggiornato Gecko e Gaia alla versione nightly con l'immagine base v180, si verifica un'incongruenza tra i font che Gecko e Gaia si aspettano e quelli forniti dall'immagine base. Per sopperire al problema, scarica il pacchetto di aggiornamento dei font, estrailo, entra nella cartella creata dall'estrazione ed esegui lo script flash.sh.

+ +

Spostartsi sul canale di aggiornamento nightly

+ +
    +
  1. Assicurati che il debug remoto sia abilitato sul tuo Flame, utilizzando l'opzione Debug remoto/Debug USB nelle Impostazioni di sviluppo del dispositivo.
    2. +
  2. Scarica lo script di modifica del canale: segui il link, fai clic sul pulsante Raw, poi utilizza la funzionalità di salvataggio del browser per salvare la pagina direttamente come change_channel.sh.
    3. +
  3. Nel terminale, utilizza cd per entrare nella cartella in cui hai salvato lo script e spostati nel canale di aggiornamento desiderato eseguendo il seguente comando:
    + + 
    ./change_channel.sh -v nightly
    +
    4. +
  4. Quando il telefono si sarà riavviato puoi verificare se esistono aggiornamenti tramite la voce Impostazioni > Informazioni dispositivo > Controlla ora
    5. +
+ +

Dovresti ora essere in grado di ricevere aggiornamenti OTA sul tuo telefono.

+ +
+

Nota: Puoi scegliere tra vari canali di aggiornamento. Esegui il comando "./change_channel.sh -h" per scoprire quali sono gli altri canali.

+
+ +

Modalità Fastboot

+ +

Se l'installazione di una nuova versione non va a buon fine, il telefono potrebbe smettere di rispondere, portandolo a riavviarsi in modalità ripristino. Questa modalità mette a disposizione alcune opzioni (Reboot, Update from adb, Wipe data, Wipe cache, e Update from sdcard). Purtroppo, selezionare Update from adb avvia una modalità di caricamento che non permette di utilizzare altri comandi di adb. Il comando adb sideload funzionerebbe, ma i vari script per l'installazione fanno affidamento su altri comandi che non funzionano in questa modalità.

+ +

Dalla modalità sideload, puoi forzare la modalità fastboot:

+ +
    +
  1. Spegni il telefono (potrebbe comportare la rimozione della batteria in casi estremi...)
    2. +
  2. Collega il cavo USB.
    3. +
  3. Riaccendi il telefono premendo contemporaneamente il pulsante di accensione e quello Volume giù.
    4. +
+ +

Il telefono dovrebbe mostrare il testo "FASTBOOT": si trova in modalità fastboot e in attesa di una connessione USB. Una volta connesso, adb dovrebbe riconoscerlo quando si esegue il comando fastboot devices. Nota che adb non lo riconosce. Lo riconosce solo fastboot. In questa modalità puoi usare lo script di installazione per la versione v180 come spiegato precedentemente. Poiché lo script utilizza sia comandi adb che comandi fastboot, potrebbero apparire alcuni errori iniziali riguardanti adb, ma l'installazione nel dispositivo dovrebbe essere avvenuta con successo al termine della procedura.

+ +

Modalità di download di emergenza

+ +

Quando l'installazione di una nuova distribuzione fallisce, il telefono diventa inutilizzabile e non si riesce ad avviarlo in modalità fastboot, è possibile utilizzare la modalità di download di emergenza per recuperare l'uso del telefono.

+ +

Per entrare nella modalità di download di emergenza sono necessari un cavo USB e lo Strumento per il Download di Emergenza. Installa questo strumento e segui le istruzioni.

+ +

Modalità ripristino

+ +

È possibile avviare la modalità ripristino per eliminare i dati presenti nel telefono o per aggiornare manualmente il firmware. Ci sono due procedure per entrare in questa modalità:

+ + + +

In modalità ripristino, utilizza i pulsanti di controllo volume per muoversi tra le voci disponibili e il pulsante di accensione per selezionare. Assicurati di aver effettuato un backup dei dati del telefono (contatti, SMS, ecc.) prima di eliminarli e di avere pronti i pacchetti di aggiornamento.

+ +

Caricare app sul tuo Flame

+ +

Lo strumento App Manager semplifica l'invio di app al telefono per provarle ecc. Le istruzioni complete sono disponibili nell'articolo Usare l'App Manager.

+ +
+

Nota: se stai utilizzando Firefox Nightly, puoi utilizzare il nostro nuovo strumento WebIDE, con le stesse funzionalità dell'app manager e molto di più.

+
+ +

 

+ +

Regolazione della RAM

+ +

È possibile regolare la quantità di RAM disponibile per testare come le app si comportino su terminali Firefox OS con minore memoria disponibile.

+ +

La procedura consiste nell'entrare in modalità fastboot (è necessario installare prima di tutto fastboot, disponibile nella stessa pagina dell'SDK insieme ad ADB) e digitare:

+ +
adb reboot bootloader
+fastboot oem mem [0|256-1024]
+ +

“0” indica la memoria rilevata automaticamente, mentre “256-1024” è la quantità in megabyte. Ad esempio, se si volesse impostare la quantità di RAM a 512 M, si dovrebbe digitare fastboot oem mem 512.

+ +

Sarà necessario riavviare il telefono affinché l'impostazione diventi effettiva. Sarà sufficiente digitare:

+ +
fastboot reboot
+ +

La quantità di memoria correntemente impostata può essere letta entrando in modalità fastboot e digitando:

+ +
fastboot getvar mem
+
+ +

Specifiche di rete e del dispositivo

+ +

Reti:

+ + + +

Hardware: ulteriori informazioni sono disponibili nell'articolo Specifiche di telefoni e dispositivi.

+ +

Altre caratteristiche includono:

+ + + +

Vedi anche

+ + diff --git a/files/it/archive/b2g_os/phone_guide/geeksphone/index.html b/files/it/archive/b2g_os/phone_guide/geeksphone/index.html new file mode 100644 index 0000000000..23cafa4fd9 --- /dev/null +++ b/files/it/archive/b2g_os/phone_guide/geeksphone/index.html @@ -0,0 +1,156 @@ +--- +title: Geeksphone +slug: Archive/B2G_OS/Phone_guide/Geeksphone +translation_of: Archive/B2G_OS/Phone_guide/Geeksphone +--- +
+
Developer Preview editions of the Firefox OS phone are now becoming widely available to the community, mainly through Geeksphone. Since these are for developers, naturally we want to encourage you to tinker and play with them as much as possible! In this article we cover some basic tips on how to keep your phone up to date and how to tweak the system Gaia applications.
+
+ +
(Note that these instructions are for the older Keon and Peak, not necessarily the latest Geeksphone Revolution phone)
+ +

 

+ +

Updating your Geeksphone to the latest images

+ +

Firefox OS updates can be be downloaded from within the Settings app, listed under Device information. The phone can be set to check for updates daily, weekly, or monthly. In addition a “check now” button is provided. When an update is available you will be prompted to download and install the current version.

+ +

The screen for checking updates on the Firefox OS settings app

+ +

Flashing your phone

+ +

The team at Geeksphone is also now providing the latest stable and nightly builds as self contained downloads for flashing your phone.

+ +

Set up your phone and computer

+ +

Before trying to flash your phone make sure you have set it up as described in the section “Setting Up the Geeksphone Device” in Pushing Firefox OS Apps to the Geeksphone. This will ensure that you can push data to the phone. In that same section, follow the instructions to make sure your computer has the right USB drivers.

+ +
+

Note: It is particularly important that Windows computers be set up with the right USB drivers.

+
+ +

The builds are located at the Geeksphone download site. On this site you will be presented with options for selecting your device and what type of build you want to use.

+ +

Two phone images side by side, the Geeksphone Keon and Peak, with different software download options below each one.

+ +

Download your particular build and extract the archive to your filesystem. The archive contains the images and commands required to flash the phone using Windows, Mac OS, or Linux. Before attempting to flash the phone make sure that you have enabled Remote debugging on the phone. This option can be set by launching the Settings app and navigating to the Device information -> More information -> Developer tab. Also do not attempt to flash the phone if the power level is below 50%.

+ +

Enabling remote debugging on the Firefox OS Settings app

+ +

Windows

+ +
+

Note: You might need to install USB drivers on Windows. For instructions, see the section “Setting Up the Geeksphone Device” in Pushing Firefox OS Apps to the Geeksphone.

+
+ +

Open a Command Prompt (start -> type cmd in search -> enter on Windows 7, Windows key + X -> select Command Prompt on Windows 8) and cd to the directory containing the extracted files. Run:

+ +
flash.bat
+
+ +

Mac OS

+ +

Open a Terminal (Cmd + space -> type terminal -> enter) window and cd to the directory containing the extracted files. Run:

+ +
./flash_mac.sh
+
+ +

Linux

+ +

To flash a Keon from Linux add the following rules to /etc/udev/rules.d/51-android.rules

+ +
SUBSYSTEM=="usb", ATTR{idVendor}=="05c6", ATTR{idProduct}=="8013", MODE="0666"
+ +
SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", ATTR{idProduct}=="d00d", MODE="0666"
+ +
 
+ +

Open a Terminal (control-alt-t on Ubuntu) window and cd to the directory containing the extracted files. Run:

+ +
./flash.sh
+
+ +

This should flash the new image to the phone. The phone will need to be set up again as all data will be cleared. If you want to backup your data and restore afterwards, you can follow the instructions at Backup the phone system partition.

+ +

If you have an 'unagi' or developer preview phone that is not a Geeksphone

+ +

If you have a developer phone that is not a Geeksphone such as an 'unagi' or a previously Android-based device, you may need to perform the following steps. If this is not you, please skip to the next section.

+ +

You will need to install adb and fastboot. These utilities can be found in the Android Developer Toolkit.

+ +

It is not necessary to install the entire toolkit. Download the toolkit from here and extract the contents. adb and fastboot are found in the /platform-tools/ folder. They can be copied to the /usr/bin of your Linux or Mac OS machine, or copied to another folder as long as that folder is added to your $PATH.

+ +

If you are attempting to flash your device and have another device plugged in via USB, your phone may not be detected by these utilities correctly. Only have your phone plugged in while trying to flash it.

+ +

Tweaking Gaia

+ +

If you are the industrious sort, you may want to tweak the default applications in Gaia — the UI in Firefox OS. In this section we will cover some of the basics for cloning Gaia and making changes to the default system apps. Bear in mind these tips are “at your own risk” and may involve you later referring to the section “Ok, I bricked my phone”. Before proceeding make sure that you have adb and fastboot installed on your system. To verify if these are installed open a terminal and type adb devices with your phone connected. You should see your phone listed under the attached devices.

+ +

You should also be able to run fastboot from the terminal. If you run fastboot, a set of parameter options should be displayed. If you do not have adb or fastboot installed, a quick Google search with your operating system will return several quick starts on how to install them. In addition to adb and fastboot you will need Git. If you do not currently have Git installed, have a look at this setup guide. Finally make sure your phone is set up for remote debugging as described in the previous section.

+ +

Once you have the prerequisites you can open a terminal and cd to the directory you would like to clone the Gaia source code to. Type the following commands:

+ +
git clone git://github.com/mozilla-b2g/gaia.git gaia
+cd gaia
+
+ +

This will clone the current Gaia code to your system.

+ +
+

If you plan on submitting changes back to the Gaia source, be sure to fork the source before cloning as described in Hacking Gaia.

+
+ +

Currently the Geeksphone Keon uses the v1.0.1 branch of Gaia code, so set the proper branch using the following command before you do anything else:

+ +
git checkout -b v1.0.1 origin/v1.0.1
+
+ +

Most of the system apps are located in the apps subdirectory of gaia. You can now make any changes to these Firefox OS apps you wish. Once you have made changes, make sure your device is mounted properly by first running:

+ +
adb remount
+ +

Next, run the following command to push the modified apps to your phone. This will by default push all the system apps to the phone:

+ +
B2G_SYSTEM_APPS=1 make install-gaia
+
+ +

If you only changed one of the apps you can specify the particular app using similar syntax. In this example only the calendar app will be pushed to the phone:

+ +
APP=calendar B2G_SYSTEM_APPS=1 make install-gaia
+
+ +

If you have issues while making the changes, you can reset the phone to default values using either of the following commands:

+ +
make production
+make reset-gaia
+
+ +
+

Note: Bear in mind that either of the above commands will clear any data or apps that you have pushed to the phone. If you want to backup your data and restore afterwards, you can follow the instructions at Backup the phone system partition.

+
+ +

"Ok, I bricked my phone"

+ +

If you are in the process of modifying your phone and it becomes “unresponsive” you should be able to recover it using fastboot with a simple procedure. The following illustrates resetting the Keon but other phones should have a similar process. You will also need to verify that you have fastboot installed.

+ +

First remove the USB cable and then remove the battery from the phone for 30 seconds. Then reinsert the battery and press the volume down button while holding the power button for a few seconds. Next reconnect the USB cable and run the following commands from a terminal window in the directory that contains the latest img files described in the first section of this post:

+ +
fastboot flash recovery recovery.img
+fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot reboot
+
+ +

This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.

+ +

Go play!

+ +

We hope these instructions are useful to you, and naturally we want you to be as happy about Firefox OS and the possibilities as we are! Feel free to play around with updating your devices, make changes/updates to Gaia apps, and also be inspired to build you own open web apps.

+ +

See also

+ + diff --git a/files/it/archive/b2g_os/phone_guide/index.html b/files/it/archive/b2g_os/phone_guide/index.html new file mode 100644 index 0000000000..378c500e80 --- /dev/null +++ b/files/it/archive/b2g_os/phone_guide/index.html @@ -0,0 +1,24 @@ +--- +title: Guida ai telefoni di sviluppo Firefox OS +slug: Archive/B2G_OS/Phone_guide +translation_of: Archive/B2G_OS/Phone_guide +--- +

Questa sezione contiene informazioni per gli sviluppatori riguardo specifici modelli di telefoni cellulari che supportano Firefox OS. Sono disponibili informazioni generali per Compilare ed installare Firefox OS e sull'Hacking di Firefox OS. Gli sviluppatori che possiedono specifici modelli di telefoni cellulari possono trovare utili i seguenti articoli.

+
+
+ Telefoni cellulari con Firefox OS
+
+ In questo articolo sono elencati i vari telefoni cellulari Firefox OS, con ulteriori informazioni quali, ad esempio, i loro nomi in codice e la loro disponibilità.
+
+ Aggiornare e Modificare il proprio cellulare Firefox OS Developer Preview/Geeksphone
+
+ In questo articolo sono presenti alcuni consigli di base sul tenere aggiornato il proprio Geeksphone e su come modificare le applicazioni di sistema di Gaia.
+
+ Firefox OS ZTE OPEN
+
+ Questo articolo ha lo scopo di condividere le informazioni che abbiamo al momento a nostra disposizione sul modello Firefox OS ZTE OPEN. Man mano che altre informazioni saranno disponibili, verranno aggiunte qui.
+
+ Risoluzione problemi
+
+ Questo articolo contiene suggerimenti per risolvere problematiche comuni che si potrebbero riscontrare nell'utilizzo di Firefox OS.
+
diff --git a/files/it/archive/b2g_os/phone_guide/specifiche_telefoni_dispositivi/index.html b/files/it/archive/b2g_os/phone_guide/specifiche_telefoni_dispositivi/index.html new file mode 100644 index 0000000000..59f3ebe923 --- /dev/null +++ b/files/it/archive/b2g_os/phone_guide/specifiche_telefoni_dispositivi/index.html @@ -0,0 +1,470 @@ +--- +title: Specifiche di telefoni e dispositivi +slug: Archive/B2G_OS/Phone_guide/Specifiche_telefoni_dispositivi +translation_of: Archive/B2G_OS/Phone_guide/Phone_specs +--- +
+

Questo articolo fornisce alcune informazioni sui dispositivi Firefox OS, indicando specifiche hardware, nomi in codice, versione di Firefox OS installata di default e altri dati.

+
+

Telefoni Firefox OS disponibili

+

Nelle varie fasi di sviluppo abbiamo avuto a disposizione diversi telefoni. Ora, con la commercializzazione dei dispositivi, abbiamo a disposizione diversi modelli da vari produttori partner.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Nome / Nome in codice

+ 		Data di rilascioVersione iniziale di Firefox OSNote di rilascio di Firefox OSDisponibilitàCommenti
+

Alcatel One Touch Fire

+

hamachi, buri

+ 		12 luglio, 20131.0.1Sviluppatori
+ Utenti		Attualmente disponibileDisponibile per il pubblico in Brasile, Uruguay, Italia, Germania, Serbia, Ungheria e Polonia. Disponibile presso i rivenditori su eBay.
otoro, unagi, inari    Dispositivo ZTE disponibile sul mercato, utilizzato per lo sviluppo prima dell'uscita dello ZTE Open.
+

ZTE Open

+

ikura

+ 		2 luglio 20131.0.1Sviluppatori
+ Utenti		Attualmente disponibileSimile ad inari; disponibile al pubblico su eBay.
+

LG Fireweb

+

leo

+ 		24 ottobre 20131.1Sviluppatori
+ Utenti		Attualmente disponibileIn vendita al pubblico in Brasile.
+

Geeksphone Keon

+

keon

+ 		24 aprile 20131.0.1Svilupattori
+ Utenti		Attualmente esauritoDispositivo per sviluppatori
+

Geeksphone Peak

+

peak

+ 		24 aprile 20131.0.1Sviluppatori
+ Utenti		Attualmente esauritoIl nome in codice per un certo periodo è stato "twist"; dispositivo per sviluppatori
Geeksphone Peak+----Progetto cancellato
Geeksphone Revolution4 marzo 20141.3pre-Attualmente disponibileAcquistabile online
+

LG Google Nexus 4

+

nexus-4

+ 		    Sperimentale. Non supportato da LG o da Google. Hardware fuori produzione.
+

Flame

+

"the reference device"

+ 		Tardo aprile 20141.3 Disponibile a breve 
+

Spreadtrum

+

tarako

+ 		Fine del secondo trimestre 2014?  Disponibile a breve 
+

Firefox OS per versione

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VersioneData di completamento (Feature Complete - FC)Data di rilascio ai partner
+ (Release to Partner - RTP)		Nome in codiceVersione di GeckoCorrezioni di sicurezza incluse
1.022 dicembre, 201221 febbraio, 2013TEFGecko 18Gecko 18
1.0.115 gennaio, 20136 settembre, 2013ShiraGecko 18Gecko 20
1.1.029 marzo, 20139 ottobre, 2013LeoGecko 18+ (nuove API)Gecko 23
1.1.1 Da definireHDCome 1.1.0, più WVGAGecko 23
1.2.015 settebmre, 20139 dicembre, 2013KoiGecko 26[39]Gecko 26
1.3.09 dicembre, 2013Da definire Gecko 28Gecko 28
1.4.017 marzo, 2014Da definire Gecko 30Gecko 30
+

Specifiche dei dispositivi

+

Si noti che vi sono alcuni casi in cui un dispositivo non è stato ufficialmente rilasciato, ma ci è stata data la possibilità di condividerne il nome in codice e alcune caratteristiche. NON inserire altre informazioni su questi dispositivi a meno che Andreas Gal o qualcun'altro che sia autorizzato a dare la propria benedizione al rilascio di queste informazioni al pubblico non abbia fatto annunci a riguardo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomeVersioniRisoluzioneDisplay (in pollici)CPUFotocamera/e, MpxRAMROMCapacità di memorizzazioneBatteria (in mAh)
+

Alcatel One Touch Fire

+

hamachi, buri

+ 		v1.0.1/v1.1 +

320 x 480
+ PX=1

+ 		3.5Qualcomm MSM7227A 1 GHzPosteriore: 3.2256MB512MB/data: probabilmente la stessa di inari; le specifiche parlano di una "memoria per l'utente" di 160MB. Probabilmente senza un DeviceStorage, è richiesta una scheda MicroSD (fino a 32GB)
+  		1400
+

ZTE Open / varianti

+

ikura

+ 		v1.0.1 (alla consegna)320 x 480
+ PX=1		3.5Qualcomm MSM7225A 800 MHzPosteriore: 3.2256MB512MB +

/data: 152M
+ Nessuno DeviceStorage, Richiesta scheda MicroSD

+ 		1200
+

LG Fireweb

+

leo

+ 		v1.1320 x 480
+ PX=1		4Qualcomm  MSM7227A 1 GHzPosteriore: 5512MB4GB +

/data: 1007.90M DeviceStorage: sì, capacità non certa. probabilmente 3.7G, ma può essere un errore di calcolo.  (Su un dispositivo unhapy  /sys/devices/platform/msm_sdcc.3/mmc_host/mmc0/mmc0:0001/block/mmcblk0/block risulta 7733248, assumendo blocchi da 512 byte otteniamo 3.7G)

+ 		1540
+

Geeksphone Keon

+

keon

+ 		+

v1.0.1 - nightly
+ scaricabile qui

+ 		320 x 480
+ PX=1		3.5Qualcomm Snapdragon S1 7225AB 1 GHzPosteriore: 3512MB4GB +

/data: 1.5G
+  DeviceStorage disponibile: 1023.4M

+ 		1580
+

Geeksphone Peak

+

peak

+ 		v1.0.1 - nightly
+ scaricabile qui		540 x 960
+ PX=1.5		4.3Qualcomm Snapdragon S4 8225 1.2 GHz dual-core +

Frontale: 2
+ Posteriore: 8

+ 		512MB4GB/data: 1.5G
+  DeviceStorage disponibile: 1023.4M		1800
Geeksphone Revolutionv1.3pre (alla consegna)540 x 960 PX=1.54.7Dual-core Intel® Atom™ processor Z2560 fino a 1.6GHz +

Frontale: 1.3 Posteriore: 8

+ 		1GB4GB +

/data: 2G
+  DeviceStorage disponibile: 2.5GB

+ 		2000
+

Nexus 4

+

nexus-4

+ 		v1.3 - nightly768 x 1280
+ 720p		4.7 +

Qualcomm
+ Snapdragon S4 Pro
+ 1.5 GHz quad-core

+ 		Posteriore: 82GB8 o 16GBtutto si trova in un grande calderone, non è disponibile uno slot MicroSD.  La dimensione del "calderone" varia a seconda della versione del dispositivo.2100
+

Foxconn InFocus

+

flatfish

+ 		 1280 x 80010A31 (Arm Cortex A7) Quad-Core 1.0 GHz +

Frontale: 2
+ Posteriore: 5

+ 		2GB16GB 7000
+

some phone thing

+

fugu

+ 		v1.2f (branch) per320 x 480   256MB   
+

Spreadtrum SC6821

+

tarako

+ 		v1.3 perHVGA
+ 320 x 480		3.5Cortex A5 1GHz0.3 (solo posteriore?)128MB (zram)2GB NAND flash (esterna) + 1GB LPDDR1 (interna)32GB (scheda MicroSD)1100
+

VIA Vixen

+

versione di flatfish sviluppata dalla comunità?

+ 		 1024 x 6007Cortex-A9 Dual Core 1.2 GHz +

Frontale: 0.3 Posteriore: 2
+  

+ 		1GB8GB  
+

Flame

+

"dispositivo di riferemento"

+ 		v1.3854 × 4804.5Qualcomm MSM8210 Snapdragon, 1.2GHZ Dual core processorFrontale: 2
+ Posteriore: 5		256MB -1GB (regolabile dallo sviluppatore)8GB 1800
+

Spiegazione delle colonne:

+ diff --git a/files/it/archive/b2g_os/phone_guide/zte_open/index.html b/files/it/archive/b2g_os/phone_guide/zte_open/index.html new file mode 100644 index 0000000000..7ccf6182a8 --- /dev/null +++ b/files/it/archive/b2g_os/phone_guide/zte_open/index.html @@ -0,0 +1,179 @@ +--- +title: The Firefox OS ZTE OPEN +slug: Archive/B2G_OS/Phone_guide/ZTE_OPEN +translation_of: Archive/B2G_OS/Phone_guide/ZTE_OPEN +--- +
+

Mozilla have partnered with ZTE to create the ZTE OPEN, a powerful Firefox OS-based device aimed at developers and early adopters worldwide. They are unlocked and open for testing and experimentation.

+
+

Purchasing a device

+

These devices are available through ZTE's US and UK eBay stores, and a separate Hong Kong page aimed at Asian and Oceanian customers who don't want to pay high postage costs. They are priced at $79.99/£59.99.

+ +

Upgrading Firefox OS

+

This section provides instructions for upgrading Firefox OS on your ZTE OPEN device.

+

General

+

In general, Firefox OS builds, updates and testing are done by connecting your phone to a computer using a USB cable, and using ADB (Android Debugging Bridge) and Fastboot to join the devices together and issue commands. You'll therefore need to install ADB and fastboot from the Android Developer Toolkit on your desktop machine. It is not necessary to install the entire toolkit. adb and fastboot are found in the /platform-tools/ folder.

+

Next, you need to go to your phone and enable remote debugging.

+

Firefox OS 1.1

+

On 10th December 2013: ZTE released a Firefox OS 1.1 upgrade for the ZTE OPEN. This now has fastboot enabled, which was caused the problems with the previous published builds.

+

At this point, it's best to first upgrade your phone to version 1.1, even if you wanted to go to version 1.2. To do this, download the 1.1 package that corresponds to your phone (OPEN (American Standard) or OPEN (European Standard)) and unzip it to get a PDF of instructions plus a firmware ZIP.

+
+

Note: User data will be wiped by the SD package installation. You should backup your data before starting.

+
+

Now follow these steps:

+
    +
  1. Power off your phone, remove the battery to access the microSD card and extract the card from its holder.
    2. +
  2. Connect the microSD card to your desktop machine.
    3. +
  3. Move US_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip or EU_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip (depending on the version you downloaded) to the root directory of your microSD card. Do not unzip the file.
    4. +
  4. Disconnect the microSD card from your desktop computer and return it to your phone.
    5. +
  5. Hold the volume up and power keys down simultaneously. Volume up is activated by pressing the upper part of the long key on the left side of the phone. If you did it properly, you’ll enter the Firefox OS recovery mode. (Note that the Firefox OS logo may display briefly before you enter the recovery mode; sometimes this can take a little while.)
    6. +
  6. Use the volume up/down key to move from one item to the other in the menu, and chose “apply update from external storage.”
    7. +
  7. Press the power key to confirm the selection. You’ll see a new screen listing the files you have on the microSD card.
    8. +
  8. Again use volume up/down key to select the firmware: either US_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip or EU_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip (depending on the version you downloaded), and press the power key to confirm.
    9. +
+

If everything went well, you’ll see a sequence of status messages, culminating with one that says, “Install from sdcard complete.” You’ll need to select “reboot system now”: your phone will reboot, and you’ll see the configuration screen you saw the first time you powered on the phone.

+

Firefox OS 1.2

+

In January 2014, ZTE released a beta version of Firefox OS 1.2 (fastboot enabled, with root access). It is basically version 1.1 baseline + version 1.2 Gecko and Gaia, and doesn't require the build to be put on the phone's SD Card.

+

With 1.1 installed as described above, open a terminal and check that the connection is made with the following command:

+
adb devices -l
+
+

You should see your device as something like, "roamer2    device usb:2-1.2", in response.

+

Download the appropriate version of the build from the Dropbox account ZTE has set up: US version or UK version. For Windows users, you can also download special instructions, and an upgrade tool to help you to install the new version easily. The steps below however will work on all operating systems – Linux, OS X, and Windows – without relying on the special tool.

+

Once you have the file, extract the contents, and open a console. Note that those steps will erase your personal data, so be sure to make a (backup) first. Then navigate to the folder where the files are. Still in the console, type this command:

+
adb reboot bootloader
+

While the phone is rebooting, execute the following command. (Fastboot only works inside a reboot):

+
sudo fastboot devices
+
+

If you see, "< waiting for device >", hit Ctrl-C and retry the command until you see something like, "ROAMER2    fastboot", in response.

+

Then, quickly execute the following commands while it is still rebooting:

+
fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot flash recovery recovery.img
+fastboot erase cache
+fastboot reboot
+

(The reboot completed before I was done entering all the commands as I was distracted. I simply restarted from the, "adb reboot bootloader".)

+

If everything went well, your phone should reboot at this point. You’ll find that this version of 1.2 from ZTE includes many test applications, which you can remove if you like.

+
+

Note: Upgrading your ZTE Open to Firefox 1.1 or 1.2 (fastboot enabled) by Frédéric Harper also provides a useful breakdown of the install process.

+
+

Phone features

+ +
+

Note: the Hong Kong phones also support tri-band 3G Networks — HSDPA 850/1900/2100 (850/1900 for US, CA, 850/1900/2100 for Asia, AU, and 900/2100 for EU.)

+
+

Wireless carriers

+
+

Pricing information is for reference only and may not be accurate. Visit the associated link for official information.

+
+

US carriers

+

AT&T

+ +
Sampling of prepaid AT&T plans
+

Prepaid GoPhone®, Smartphone Plans

+ +

Aio

+ +
Sampling of prepaid Aio plans
+ +

Good2GO

+ +
Sampling of prepaid Good2GO plans
+ +

Other {{ anch("AT&T") }} MVNOs

+

These carriers do not offer additional 3G data.

+ +

T-Mobile

+ +

Canadian carriers

+

The US version of the ZTE Open also work in Canada on carriers that use the Bell/Telus network, or the Rogers network. Some regional carriers like Sasktel or MTS that have UMTS should work too.

+

It will not work on carriers that do not use UMTS or GSM, like Public Mobile, nor on the carriers that use the AWS band like WIND Mobile, Mobilicity, Videotron or Eastlink.

+

Memory card

+

File system

+

In order to be recognized by the phone, the MicroSD card must be formatted as a FAT32 file system. If a card is new or has never been reformatted, it should work as is.

+

Device revisions

+

Revision 01

+

Phones produced before 09/27/2013 do not have fastboot enabled and must be updated. Normally, this would be handled by Software Updates, but since some users have reported trouble with this method, ZTE have made SD card packages available to enable fastboot on earlier devices. Flash images for:

+ +

The zip file is linked under Downloads. Once the file is downloaded and unzipped, follow the instructions in the bundled PDF to flash the package to your phone.

+

Related Support Forum Questions:

+ +

Revision 02

+

Phones produced on or after 09/27/2013 are fastboot enabled by default. This includes the Hong Kong phones.

+
+

Note: If you are unsure of your phone's revision, check it in Settings > Device Information > Software. If it is older than the following version numbers, you will need to update your phone using the above SD packages to enable fastboot.

+ +
+

Device support

+

Once your phone has {{ anch("Device revisions","fastboot enabled") }}, you will then be able to build and install new Firefox OS/B2G builds on it (start at the build prerequisite instructions, and treat the ZTE like it is an Inari device, for the purposes of configuration), and recover your phone if necessary, using the procedure cited in the {{ anch("I bricked my phone") }} section.

+

If you encounter errors about setting the system time while flashing a custom build, you may need to download a modified boot image.

+

I bricked my phone

+

If you are in the process of modifying your phone and it becomes “unresponsive” you should be able to recover it using fastboot with the following simple procedure.

+

First remove the USB cable and then remove the battery from the phone for 30 seconds. Then reinsert the battery and press the volume up button while holding the power button for a few seconds. Next reconnect the USB cable and run the following commands from a terminal window in the directory that contains the SD package files described above (it is worth checking for an update to the SD package before you do this):

+
fastboot flash recovery recovery.img
+fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot reboot
+
+

This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.

+

Headphones not working?

+

We found that the headset jack is designed by a Chinese manufacturer that has compatibility problems with other brands of headsets that include microphones. You may have voice mute problems when you try to use headsets made by Apple, Samsung, HTC, and others. You can buy a 3.5 mm headset adapter that reverses the microphone and ground pins to avoid this problem. For more information, see {{ Bug("812607") }}.

+

Other support notes

+

Some customers have come across an Issue of FOTA updates failing to enable fastboot; this is still under investigation, and we are assisting ZTE to analyze every scenario. We will post more information as it is available.

+

If your phone was unfortunately damaged during the FOTA update because of ZTE providing false or wrong update files, you can attempt to restore it to factory settings using the appropriate SD image and instructions referenced in {{ anch("Revision 01") }}. Otherwise, send your phone back to the eBay store you purchased it from in exchange for a new one. You may contact the store owner directly via an eBay message.

+

See also

+

Official Dev Phone page on Firefox Marketplace

+

Draft User Manual [en-US] - PDF

diff --git a/files/it/archive/b2g_os/phone_guide/zte_open_c/index.html b/files/it/archive/b2g_os/phone_guide/zte_open_c/index.html new file mode 100644 index 0000000000..b18b0ff3da --- /dev/null +++ b/files/it/archive/b2g_os/phone_guide/zte_open_c/index.html @@ -0,0 +1,263 @@ +--- +title: ZTE OPEN C +slug: Archive/B2G_OS/Phone_guide/ZTE_OPEN_C +tags: + - Device + - Firefox OS + - Gaia + - Open C + - Phone + - Smartphone + - zte +translation_of: Archive/B2G_OS/Phone_guide/ZTE_OPEN_C +--- +
+

Lo smartphone ZTE Open C Firefox OS rappresenta un'offerta evoluta di ZTE con hardware di fascia alta, tra cui una fotocamera a 3 MP e uno schermo da 4 pollici ed è disponibile con versione 1.3 di Firefox OS preinstallata.  Questo articolo fornisce informazioni sul telefono, incluse procedure dettagliate di aggiornamento e di risoluzione di problemi.

+
+ +
+

Nota: Le seguenti istruzioni non sono valide per dispositivi ZTE Open. Se hai un dispositivo ZTE Open dorvesti andare alla nostra pagina ZTE Open.

+
+ +
+

Nota: Il tool di aggiornamento necessario per lo sblocco del telefono (vedi sotto) è disponibile ad oggi solamente per Windows. Non acquistare questo telefono se non hai un sistema Windows e vuoi installare manualmente gli aggiornamenti di Firefox OS.

+
+ +

Open C blue nuit

+ +

Lo ZTE Open C è stato il primo telefono con l'ultimo aggiornamento di Firefox OS a metà 2014. Offre molteplici nuove funzionalità tra cui l'accesso diretto al lettore musicale dalla schermata di blocco o dalla barra delle notifiche e funzionalità avanzate di condivisione dati via Bluetooth, quali il trasferimento simultaneo di più file. Gli utenti ora possono navigare il telefono più rapidamente con gli "smart folder" che organizzano automaticamente le applicazioni in categorie, con prestazioni di scorrimento dello schermo migliorate e con tempi di avvio più rapidi per le applicazioni di sistema (ad esempio il calendario, i contatti, la fotocamera).

+ +

Acquistare un dispositivo

+ +

Il telefono viene venduto a US $69.99, ed è disponibile su eBay:

+ + + +
+

Nota: I telefoni non sono dotati di applicazioni pre-installate o servizi specifici di compagnie telefoniche. Sono inoltre completamente sbloccati per l'uso da parte degli sviluppatori.

+
+ +

Caratteristiche del telefono

+ +

Puoi trovare più informazioni alla nostra pagina dedicata alle specifiche per telefoni e dispositivi.

+ +

Aggiornare il software

+ +

Per aggiornare la versione di Firefox OS del tuo Open C il modo più semplice è quello di utilizzare le immagini disponibili sul sito web di ZTE. Vai alla pagina di supporto Software di ZTE, seleziona la tua regione nella colonna di sinistra, quindi Smart Phone nella colonna al centro, e Open C (European Standard) o Open C (American Standard), a seconda di dove è stato acquistato il telefono, nella colonna di destra. Quindi fai clic sul pulsante Selected per andare alla pagina di download.

+ +

Quando hai scaricato la build, troverai un PDF nel file ZIP che ti spiega come installarla.

+ +

 

+ +

Immagini di sistema fornite dalla Community francese di Mozilla

+ +
+

Ricordate che l'installazione delle rom della community non può prescindere dal rooting del telefono per il tramite del software windows Open C upgrade Tool. Il rooting con altri metodi (via linux. ad esempio) non vi permetterà di portare a buon fine l'installazione!

+
+ +

Ormai da qualche tempo, la community francese di Mozilla mette a disposizione degli utenti delle immagini di firefox os realizzate appositamente per lo ZTE Open C.

+ +

Al momento, questa è la procedura più semplice per aggiornare il vostro dispositivo. Anche in questo caso, però, sarà necessario avere un terminale con i permessi di root.

+ +

Anzitutto, recatevi sul portale dedicato e selezionate la tipologia di dispositivo in vostro possesso, scegliendo tra:

+ + + +

Dopo aver effettuato il rooting del vostro dispositivo con l'ausilio dell'Open C Upgrade Tool, scegliete l'immagine che preferite, a seconda del canale di sviluppo:

+ + + +

Prima di provvedere all'installazione tramite recovery mode, ricordate di verificare la carrispondenza del codice sha1.checksum, tramite il seguente comando:

+ +
 sha1sum update-xxxxxxxxxxxxxx.zip
+ +

 

+ +

Immagini di sistema fornite da Mozilla

+ +

Se non vuoi aggiornare Gecko e Gaia con le procedure descritte nei paragrafi precedenti puoi utilizzare direttamente le immagini fornite da Mozilla per i dispositivi Flame. Dopo aver sblocccato il telefono con il programma di aggiornamento di ZTE, puoi scaricare un'immagine di sistema dalla cartella delle nigthly builds. Questo procedimento cancellerà tutti i tuoi dati. Per eseguire un backup del tuo profilo utente utilizza questo script prima di scaricare la nuova immagine ma dopo aver sbloccato il telefono.

+ +

Scegli la distribuzione fra mozilla-central, aurora o vanilla e quindi scarica l'immagine con il runtime di Gecko. Ogni cartella ha una nomenclatura quale "2014-10-06-xx-yy-zz-mozilla-distribuzione-nome_in_codice_del_dispositivo" perciò tu dovrai cercare "2014-10-06-xx-yy-zz-mozilla-distribuzione-flame". L'immagine all'interno della cartella specifica la versione di Gecko e il linguaggio, "b2g-34.0a2.en-US.android-arm.tar.gz" identifica la versione 34 di Gecko e inglese-americano come linguaggio. Scarica "Gaia.zip" se vuoi aggiornare anche Gaia.

+ +

Per scaricare queste immagini sul telefono devi utilizzare lo script shallow_flash, che trovi qui, scaricalo ed esegui i seguenti comandi attraverso un emulatore di terminale.
+
+ Da Mac e Cygwin:

+ +
 ./shallow_flash.sh -g gaia.zip -G b2g-XX.XX.en-US.android-arm.tar.gz
+ +

Da Linux:

+ +
 ./shallow_flash.sh -ggaia.zip -Gb2g-XX.XX.en-US.android-arm.tar.gz
+ +

 

+ +

Aggiornamenti "manuali"

+ +

Se desideri aggiornare te stesso Gecko o Gaia, il processo è un po' più complicato in quanto il telefono è bloccato di default (senza privilegi di root). Per sbloccare il telefono si può utilizzare il programma Open_C_upgrade_Tool disponibile sul sito comebuy.com che ti permette di aggiornare il firmware per consentire l'accesso come root e abilitare fastboot. Con questi privilegi puoi successivamente aggiornare il telefono con nuove componenti software.

+ +
+

Nota: Questo programma di aggiornamento è disponibile solo per Wondows per ora.

+
+ +

Se vuoi sbloccare il telefono da OS X o Linux, segui la seguente procedura:

+ +
    +
  1. Scarica l'immagine disponibile al sito comebuy.com tramite il link riportato sopra (indicata con ZTE_OPENC_EU).
    2. +
  2. Fai l'unzip dell'immagine, dovresti trovare boot.img.
    3. +
  3. Aggiungi le seguenti linee in /etc/udev/android.rules:
    4. +
  4. + 
    SUBSYSTEM=="usb", ATTR{idVendor}=="19d2", ATTR{idProduct}=="1350", MODE="0666", GROUP="plugdev"
+SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", ATTR{idProduct}=="d00d", MODE="0666", GROUP="plugdev"
    +
    5. +
  5.  Riavvia il dispositivo nella modalità fastboot utilizzando il comando: + 
    adb reboot-bootloader
    +
    6. +
  6. Carica sul dispositivo la nuova immagine boot.img utilizzando il seguente comando: + 
    fastboot flash boot boot.img
    +  Se preferisci, per verificre il corretto funzionamento della build prima di caricare la nuova immagine, puoi utilizzare il comando: + + 
      fastboot boot boot.img
    +
    7. +
  7. Riavvia il dispositivo utilizzando: + 
    fastboot reboot
    +
    8. +
  8. Ora dovresti avere un telefono sbloccato. Per verificare, il seguente comando dovrebbe restituire 0: + 
    adb shell getprop ro.secure
    +
    9. +
+ +

Aggiornare Gecko e Gaia

+ +

Dopo aver abilitato fastboot, potrai costruire e installare per Firefox OS/B2G le nuove componenti Gecko e Gaia.

+ +
+

Warning: Questo non significa che puoi installare un immagine completa per Flame. Renderebbe il telefono permanentemente inutilizzabile.

+
+ +
    +
  1. Parti dai prerequisiti di build e tratta l'Open C come se fosse un dispositivo Flame ai fini della configurazione: questo perchè Flame e Open C sono entrambi basati sul sistema Android Jellybean. 
    2. +
+ +
    +
  1. Durante lo step di configurazione è necessario fare riferimento ad un file di manifesto personalizzato per l'Open C. Scarica l'allegato di questa segnalazione di bug e salvalo localmente sul tuo disco fisso in un posto facilmente indirizzabile col nome di openc.xml.
    2. +
  2. Ripulisci la directory B2G, rimuovendo le cartelle non necessarie: + 
     rm -rf objdir-gecko/ out/ backup-flame/
    +
    3. +
  3. Opzionale: Prima di procedere con gli step successivi, puoi scegliare la versione di build di Gecko e Gaia. Per far ciò, apri il tuo file open.xml, cerca i tag di progetto gecko.git, gaia, e gonk-misc e modifica il valore dell'attributo revision per definire la build. Ad esempio puoi fare la build della versione 2.2. di Gecko and Gaia, modificando i valori di revision come mostrato di seguito: + 
    <project name="gecko.git" path="gecko" remote="mozillaorg" revision="v2.2"/>
+(...)
+<project name="gaia" path="gaia" remote="mozillaorg" revision="v2.2"/>
+<project name="gonk-misc" path="gonk-misc" remote="b2g" revision="v2.2"/>
    + +
     
    +
    4. +
  4. Ora configura Firefox OS con il seguente comando: + 
    ./config.sh flame /PERCORSO/PER/openc.xml
+
    +
    5. +
  5. Quindi puoi creare Gecko e installarlo sul telefono utilizzando i seguenti comandi: + 
    ./build.sh gecko
+./flash.sh gecko
    + +
    +

    Nota: L'ultimo passo del comando flash.sh dovrebbe riavviare il dispositivo, ma la sequenza di avvio non si completerà (si bloccherà sulla spash page con la volpe animata). Non preoccuparti, è normale.

    +
    +
    6. +
  6. +

    Ora dovrai aggiornare anche Gaia, in modo tale che sul dispositivo la versione di Gecko lavorerà con la versione di Gaia.

    + + 
    cd gaia
+make reset-gaia
    + +

    In altrernativa, se vorrai installare anche Spark potrai utilizzare i seguenti comandi:

    + + 
    cd gaia
+make GAIA_DISTRIBUTION_DIR=distros/spark GAIA_DEV_PIXEL_PER_PX=1.5 make reset-gaia
    +
    7. +
  7. Infine, potresti aver bisogno di aggionare i font.
    8. +
+ +
+

Attenzione: Installando un'immagine completa di Flame sul dispositivo renderebbe inutilizzabile il telefono. (Questo perchè flash.sh utilizza adb push invece di fastboot flash)

+
+ +

 

+ +

Aggiornare Gaia

+ +

Per aggiornare solo Gaia, e non Gecko, devi fare un fork e quindi clonare il repository di Gaia da Github e successivamente installarlo sul dispositivo.

+ +
    +
  1. Assicurati di avere ADB installato.
    2. +
  2. Vai alla pagina https://github.com/mozilla-b2g/gaia, quindi fai clic sul pulsante "fork" nell'angolo in alto a destra per disporre del codice nel tuo repository personale.
    3. +
  3. Copia il codice dal repository che hai precedentemente creato sul tuo desktop/laptop utilizzando il seguente comando dal tuo terminale: + 
    git clone https://github.com/your-github-username/gaia.git
    +
    4. +
  4. Sempre dal terminale fai cd nella cartella creata.
    5. +
  5. Sul tuo dispositivo, abilita il debugging remoto (seleziona le opzioni ADB e Devtools).
    6. +
  6. Ora collega il telefono al computer via USB e controlla che sia stato riconosciuto eseguendo il comando  adb devices all'interno del terminale.
    7. +
  7. Esegui il seguente comando per riavviare il telefono e aggiornarlo col nuovo codice sorgente Gaia: + 
    make reset-gaia
    +
    8. +
+ +

Aggiornamento dei font

+ +

Dopo aver aggiornato Gecko/Gaia, potresti riscontrare un'incoerenza fra i font che Gecko e Gaia si aspettano e quelli che vengono forniti con l'immagine. Per fissare questo difetto scarica il nostro pacchetto per l'aggiornamento dei font, estrai il contenuto, spostati all'interno della cartella ed esegui lo script flash.sh.

+ +

Un'altra possibilità è quella di utilizzare lo script update_system_fonts.sh, che scaricherà e installerà i font di sistema automaticamente.

+ +

 

+ +

Il mio telefono non è più utilizzabile

+ +

Se il tuo telefono non dovesse più rispondere ai comandi, dovresti essere in grado di ripristinarlo utilizzando le immagini ufficiali e le istruzioni per installarle tramite scheda SD, sul sito web di ZTE:

+ + + +

Invece, se la partizione di sistema è difettosa, dovrai riparare il telefono utilizzando l'accesso diretto con fastboot. Assumendo che tu stia utilizzando Ubuntu GNU/Linux:

+ +
    +
  1. Scarica l'immagine di sistema di recovery dalla pagina di supporto di ZTE e estrai l'archivio update.zip sul tuo desktop (~/Desktop/).
    2. +
  2. Estrai il file recovery.img dall'archivio update.zip e salvalo sul tuo desktop.
    3. +
  3. Crea una cartella small-system/ sul tuo desktop e copia all'interno il file build.prop e le cartelle lib/ e bin/ che troverai nell'archio update.zip all'interno della cartella system.
    4. +
  4. Installa il pacchetto android-tools-fsutils (o installa ext4_utils dai sorgenti seguendo questa pagina di XDAdevelopers).
    5. +
  5. Crea la tua immagine small-system.img: + 
    make_ext4fs -l 53M small-system.img ~/Desktop/small-system/
    +
    6. +
  6. Sposta small-system.img sul desktop e riavvia il tuo dispositivo nella modalità  fastboot premendo i tasti di power + volume down.
    7. +
  7. Connetti il dispositivo al tuo computer (fastboot devices dovrebbe mostrare il dispositivo) e carica small-system.img su di esso: + 
    fastboot flash system ~/Desktop/small-system.img
    +
    8. +
  8. Quindi riavvia nella modalità di recovery utilizzando recovery.img: + 
    fastboot boot ~/Desktop/recovery.img
    +
    9. +
  9. Dal menu di boot seleziona apply update from ADB entry (utilizzando volume up e volume down per navigare e power per selezionare) e quindi: + 
    adb sideload ~/Desktop/update.zip
    +
    10. +
  10. +

    Alla fine del processo riavvia il telefono.

    +
    11. +
+ +
+

Nota: Fai riferimento a questo articolo nel supporto per maggiori informazioni.

+
diff --git a/files/it/archive/b2g_os/platform/apps_architecture/index.html b/files/it/archive/b2g_os/platform/apps_architecture/index.html new file mode 100644 index 0000000000..4a8abbf3f8 --- /dev/null +++ b/files/it/archive/b2g_os/platform/apps_architecture/index.html @@ -0,0 +1,38 @@ +--- +title: Architettura delle apps di Firefox OS +slug: Archive/B2G_OS/Platform/Apps_architecture +tags: + - Apps + - Architettura + - Firefox OS + - Guida +translation_of: Archive/B2G_OS/Platform/Apps_architecture +--- +
+

Questo articolo spiega i dettagli su come le applicazioni sono eseguite e gestite in Firefox OS. Queste informazioni saranno utili per la piattaforma degli sviluppatori di Firefox OS oltre che ai singoli team al lavoro per portare il sistema operativo verso nuovo hardware. Se sei uno sviluppatore di app queste informazioni potrebbero non esserti necessarie ma potresti comunque esserne interessato.

+
+ +

Il processo di avvio delle app

+ +

Quando l'utente seleziona l'app che desidera avviare, o quando un'app deve essere lanciata dal sistema, nella home screen viene inserito un collegamento dalla {{domxref("App")}} API, successivamente viene fatta una chiamata al metodo {{domxref("App.launch()")}} per avviare l'applicazione.

+ +

Gecko riceve la richiesta e invia il {{domxref("mozChromeEvent")}} all' app di sistema con i dettagli. L' app di sistema gestisce l'evento inserendo un nuovo {{HTMLElement("iframe")}} all'interno del suo DOM tree e caricando l' app all'interno del nuovo {{HTMLElement("iframe")}}. Quel frame sarà l'home della app fino al momento in cui terminerà.

+ +

Ogni app richiede un manifest che la descrive ed ha una particolare gerarchia all'interno del suo contenitore. Per dettagli è disponibile l'articolo App manifest.

+ +

Comunicare con Gecko

+ +

La comunicazione tra Gecko e l'app di sistema Gaia è effettuata tramite {{domxref("mozChromeEvent")}} e {{domxref("mozContentEvent")}}. mozChromeEvents sono trasmessi da chrome al contenuto e mozContentEvents sono trasmessi dal contenuto a chrome. La comunicazione è utilizzata per controllare la creazione e la chiusura sicura della UI per inserire le funzioni richieste per le notifiche e per gli altri compiti, incluso l'avviso all' app di sistema di avviare un' app.

+ +
+

Nota: Puoi trovare ulteriori informazioni sul funzionamento di questi eventi leggendo la nostra documentazione System app documentation. Puoi anche imparare molto sulle implementazioni dando un'occhiata al codice {{source("b2g/chrome/content/shell.js")}}.

+
+ +

Guarda anche

+ + diff --git a/files/it/archive/b2g_os/platform/architecture/index.html b/files/it/archive/b2g_os/platform/architecture/index.html new file mode 100644 index 0000000000..c226b82a56 --- /dev/null +++ b/files/it/archive/b2g_os/platform/architecture/index.html @@ -0,0 +1,761 @@ +--- +title: Visione architetturale di insieme +slug: Archive/B2G_OS/Platform/Architecture +tags: + - Architettura + - B2G + - Firefox OS + - Guida + - IPC + - IPDL +translation_of: Archive/B2G_OS/Architecture +--- +
+

Questo articolo offre una panoramica di alto livello dell'architettura della piattaforma Firefox OS, introducendo concetti chiave e spiegando come le sue componenti interagiscono a livello base.

+
+ +
+

Nota: Tieni presente che Firefox OS è ancora un prodotto in pre-release. L'architettura qui descritta non è necessariamente definitiva.

+
+ +

Terminologia

+ +

Seguono alcuni termini che vanno compresi prima di procedere oltre con la lettura della documentazione.

+ +
+
B2G
+
In breve Boot to Gecko.
+
Boot to Gecko
+
Il nome in codice del sistema operativo Firefox OS. Vedrai spesso questo termine riferito a Firefox OS, in quanto venne usato a lungo prima che il progetto avesse un nome ufficiale.
+
Firefox OS
+
Firefox OS è fondamentalmente Mozilla (e i partner OEM) con i rispettivi brand e servizi di supporto e il sistema Boot to Gecko, con l'obiettivo di crearne un prodotto finito.
+
Gaia
+
+
+
L'interfaccia utente della piattaforma Firefox OS. Ogni oggetto rappresentato sullo schermo, dopo aver avviato Firefox OS, viene gestito dallo strato di Gaia. Gaia implementa la schermata di blocco, la schermata iniziale, e tutte le applicazioni standard che ci si aspetta in un moderno smartphone. Gaia è implementato interamente con HTML, CSS e JavaScript. Le sue uniche interfacce al sistema operativo sottostante sono attraverso le open Web API. implementate dallo strato di Gecko. Applicazioni di terze parti possono essere installate attraverso Gaia.
+
+
+
Gecko
+
È l’ambiente di esecuzione delle app di Firefox OS; cioè, lo strato che fornische tutto il supporto per gli standard HTML, CSS e JavaScript. Garantisce che tutte le API siano correttamente funzionanti su ogni sistema operativo supportato da Gecko. Questo significa che Gecko include, fra l'altro, uno stack di rete, uno grafico, un motore che realizza il layout del contenuto, una macchina virtuale per l’esecuzione di codice JavaScript e livelli di portabilità per differenti piattaforme.
+
Gonk
+
Gonk è il sistema operativo di basso livello della piattaforma Firefox OS, consiste di un Kernel Linux (derivato da quello sviluppato nel progetto Android Open Source Project (AOSP)) e di uno strato di astrazione dell'hardware nello spazio di indirizzamento utente (userspace HAL). Il kernel e numerose librerie userspace sono noti progetti open source: Linux, libusb, bluez e via dicendo. Alcune parti del HAL sono condivise con il progetto AOSP: il GPS, la fotocamera, e altri. Si potrebbe dire che Gonk è una distribuzione di Linux. Gonk è uno dei sistemi su cui viene portato Gecko; cioè, così come c'è un porting di Gecko per Gonk, c'è un porting di Gecko per Mac OS, Windows e Android. Poichè il progetto Firefox OS ha il pieno controllo su Gonk, si possono esporre interfacce a Gecko che non possono essere esposte da altri sistemi operativi. Per esempio, Gecko ha accesso diretto allo stack di telefonia e al frame buffer di Gonk, ma non ha il medesimo accesso in ogni altro sistema operativo.
+
Jank
+
Questo termine normalmente utilizzato nel mondo delle app mobili, si riferisce all'effetto di lentezza piuttosto che di inefficienza indotto da codice non ottimizzato che blocca l'aggiornamento dell'interfaccia utente causando crash o ritardi nella risposta. I nostri ingegneri lavorano su Gaia utilizzano varie tecniche per cercare di evitare questo effetto a tutti i costi.
+
+ +

Architettura d'insieme

+ +

Nella seguente immagine viene confrontata l'architettura di piattaforme proprietarie e quella di Firefox OS.

+ +

on the left is a native mobile architecture stack, on the right is the Firefox OS architecture. they are similarm +except that the native stack is all proprietary device functionality, and the Firefox OS stack is all done with open source and we +b technologies.

+ +

Firefox OS ha eliminato lo strato di API native fra il sistema operativo e gli strati applicativi. Questa soluzione integrata riduce il carico della piattaforma e semplifica la gestione della sicurezza senza sacrificare le prestazioni e una ricca esperienza utente.

+ +
    +
  1. Gaia è l'insieme delle web app principali e dell'interfaccia utente di Firefox OS. È' scritto in HTML5, CSS e JavaScript. Espone un insieme di API per consentire al codice della UI di interagire con l'hardware del telefono e con le funzionalità di Gecko.
    2. +
  2. Gecko è il motore web e lo strato di presentazione di Firefox OS. Rappresenta l'interfaccia fra i contenuti web e il dispositivo. Gecko fornisce il motore di parsing e rendering HTML5, un insieme di Web API sicure per accedere alle funzionalità hardware, un framework per la gestione della sicurezza, un sistema per la gestione degli aggiornamenti e altri servizi core.
    3. +
  3. Gonk è il componente al livello del kernel nello stack di Firefox OS, è l'interfaccia fra Gecko e l'hardware del dispositivo. Gonk gestisce l'hardware sottostante e espone le funzionalità dell'hardware alle Web API implementate in Gecko. Gonk può essere visto come la “black box” che esegue il lavoro complesso e dettagliato dietro le scene, controllando il dispositivo mobile gestendo le richieste al livello hardware.
    4. +
  4. Il dispositivo mobile è il telefono su cui viene eseguito Firefox OS. L'OEM (Original Equipment Manifacturer, l'azienda che ha costruito il dispositivo) è responsabile per la fornitura del dispositivo mobile.
    5. +
+ +

Architettura specifica di Firefox OS

+ +

Firefox OS Architecture

+ +

Procedura di boot di Firefox OS

+ +

Questa sezione descrive il processo di boot (avvio) dei dispositivi Firefox OS, quali componenti sono coinvolte e dove. Come introduzione, il flusso generale di boot del sistema va dal bootloader nello spazio di indirizzamente del kernel, a init nel codice nativo, a B2G e Gecko nello spazio utente e quindi finalmente alla system app, al window manager, alla homescreen app all'interno di Gecko. Le altre applicazioni vengono eseguite successivamente.

+ +

+ +

Il processo di bootstrap

+ +

Quando un dispositivo Firefox OS viene avviato, l'esecuzione inizia nel bootloader primario. Da li, il processo di caricamento del sistema operativo procede nella modalità tipica; una successione di bootloader di più alto livello caricano quello successivo. Alla fine d questo processo, l'esecuzione viene passata al kernel Linux.

+ +

Ci sono alcuni punti che vale la pena menzionare nel processo di boot:

+ + + +

Il kernel Linux

+ +

Il kernel Linux utilizzato da Gonk è veramente simile a quello originale da cui è derivato (basato sul progetto Android Open Source Project). Ci sono piccole modifiche apportate nel progetto AOSP che non sono ancora stete depositate. Inoltre, i produttori di hardware alcune volte modificano il kernel e depositano tali modifiche sulla base della loro pianificazione. In generale, tuttavia, il kernel è simile all'originale.

+ +

Il processo di avvio di Linux è ben documentato altrove in Internet, pertanto questo articolo non ne parlerà.

+ +

Il Kernel Linux gestirà le componenti hardware del dispositivo e i principali processi. Al termine della sequenza di avvio del Kernel verrà avviato init nello spazio di indirizzamento utente (userspace), come avviene nella maggior parte dei sistemi UNIX-like. Init eseguirà i processi definiti in init.rc e di seguito quelli definiti in init.b2g.rc quali b2g (Il processo principale di Firefox OS, che contiene Gecko stesso) e rild (il processo che gestisce la componente hardware modem e radio del dispositivo) — vedi sotto per maggiori dettagli.

+ +

Dopo aver avviato init, il kernel gestisce le chiamate di sistema dai processi userspace e interrrupt dai dispositivi hardware. Molte funzionalità hardware vengono esposte ai processi userspace via sysfs. Ad esempio, il seguente è un estratto del codice che legge lo stato di carica della batteria in Gecko:

+ +
FILE *capacityFile = fopen("/sys/class/power_supply/battery/capacity", "r");
+double capacity = dom::battery::kDefaultLevel * 100;
+if (capacityFile) {
+  fscanf(capacityFile, "%lf", &capacity);
+  fclose(capacityFile);
+}
+ +

Altro sul processo di Init

+ +

Sempre init esegue il mount dei file system richiesti e l'avvio dei servizi di sistema. Dopo di che, rimane attivo come gestore di processi. Similmente a come avviene in altri sistemi UNIX-like. Esso interpreta script (i file init*.rc ) che contengono i comandi per avviare vari servizi. Il file init.rc di Firefox OS è sostanzialmente quello orignale di Android per quel dispositivo modificato per includere quanto necessario ad avviare Firefox OS, e varia da dispositivo a dispositivo.

+ +

Un compito chiave gestito dal processo di init è l'avvio del processo b2g; il core del sistema opetativo Firefox OS.

+ +

Il codice in init.rc per avviare b2g è simile al seguente:

+ +
service b2g /system/bin/b2g.sh
+  class main
+  onrestart restart media
+ +
+

Nota: Esattamente quanto init.rc differisce dalla versione di Android varia da dispositivo a dispositivo; alcune volte init.b2g.rc è semplicemente aggiunto, altre volte le modifche sono più significative.

+
+ +

L'archituttura dei processi userspace

+ +

Ora diamo uno sguardo di alto livello di come le varie componenti di Firefox OS interagiscono fra loro. Il diagramma mostra i principali processi userspace di Firefox OS.

+ +

Userspace diagram

+ +
+

Nota: Tieni a mente che Firefox OS è in sviluppo attivo, questo diagramma può cambiare e potrebbe non essere estremamente accurato.

+
+ +

b2g è il processo primario di sistema. VIene eseguito con privilegi molto alti; ha accesso alla maggior parte dei device hardware. b2g comunica con il modem, scrive sul framebuffer dello schermo, interagisce col GPS, con le fotocamere e altre funzionalità hardware. Internamente B2G esegue lo strato di Gecko (implementato da libxul.so). Leggi l'articolo su Gecko per conoscere i dettagli di come funziona e come B2G comunica con lui.

+ +

b2g

+ +

Il processo b2g avvia, di volta in volta, un numero di processi a bassa priorità chiamati content process. Si tratta di processi in cui vengono caricate applicazioni web e altri contenuti web. Comunicano con Gecko tramite IPDL, un sistema a passaggio di messaggi.

+ +

Il processo b2g esegue libxul, che referenzia b2g/app/b2g.js per le preferenze di default. Dalle preferenze viene letto il file HTML b2g/chrome/content/shell.html, compilato all'interno del file omni.ja. shell.html include a sua volta il file b2g/chrome/content/shell.js, il quale avvia la system app di Gaia.

+ +

rild

+ +

Il processo rild rappresenta l'interfaccia fra i servizi di telefonia di Firefox OS e l'hardware. rild è il deamon che implementa il Radio Interface Layer (RIL). In parte è codice proprietario ed è implementato dal produttore stesso dell'hardware per comunicare con il modulo modem/radio. Codice cliente può interfacciarsi con rild tramite un socket UNIX-domain su cui rild è in ascolto. Viene avviato dallo script di init, verosimilmente come segue:

+ +
service ril-daemon /system/bin/rild
+  socket rild stream 660 root radio
+ +

rilproxy

+ +

In Firefox OS il processo rilproxy è client di rild e agisce da proxy fra rild e b2g. È sufficente dire che tale proxy è richiesto come dettaglio di implementazione. Potete trovate il codice di rilproxy su GitHub.

+ +

mediaserver

+ +

Il processo mediaserver controlla la riproduzione di audio e video. Gecko si interfaccia ad esso tramite un meccanismo di chiamata di procedura remota di Android (RPC, Remote Procedure Call). Alcuni dei formati media che Gecko può riprodurre (OGG Vorbis audio, OGG Theora video, e WebM video) vengono decodificati da Gecko stesso e inviati direttamente al processo mediaserver. Altri formati vengono invece decodificati tramite libstagefright, che è in grado di accedere a codec proprietari e encoder hardware.

+ +
+

Note: Il mediaserver è un componente "temporaneo" di Firefox OS. Si prevede che verrà sostituito ma non prima della versione 2.0 di Firefox OS.

+
+ +

netd

+ +

Il processo netd viene utilizzato per configurare le interfacce di rete.

+ +

wpa_supplicant

+ +

Il processo wpa_supplicant è un servizio standard UNIX che gestisce la connettività con access point WIFI.

+ +

dbus-daemon

+ +

Il processo dbus-daemon implementa D-Bus, un sistema di comunicazione fra processi basato su bus di sistema a scambio di messaggi. Viene utilizzato da Firefox OS per la comunicazione Bluetooth.

+ +

Gecko

+ +

Gecko, come già accennato, implementa gli standard web (HTML, CSS, e JavaScript) e viene utilizzato per implementare qualsiasi cosa l'utente vede in Firefox OS e controlla tutte le interazioni con l'hardware del telefono. Le web app connettono l'HTML5 all'hardware attraverso l'utilizzo controllato e sicuro di Web API, implementate in Gecko. Le Web API offrono accesso a funzionalità dello strato hardware del telefono (quali la batteria o la vibrazione) e ai dati memorizzati o disponibili sul telefono (quali il calendario o i contatti). I contenuti web richiamano le Web API all'interno di HTML5.

+ +

Una app consiste in una collezione di contenuti web HTML5. Per costruire web app per dispositivi mobili Firefox OS gli sviluppatore semplicemente assemblano, pacchettizzano e distribuiscono questi contenuti web. A run time, i contenuti web vengono interpretati, compilati e renderizzati in un browser web. Per maggiori informazioni sulle App vai all'App Center.

+ +
+

Nota: Puoi trovare il codice sorgente di Gecko alla url http://dxr.mozilla.org. E 'un buon riferimento, ma con un numero limitato di repository. Oppure puoi utilizzare il tradizionale http://mxr.mozilla.org, che contiene più progetti Mozilla.

+
+ +

Diagramma architetturale di Gecko

+ +

+ + + +

I file di Gecko relativi a Firefox OS

+ +

b2g/

+ +

La cartella b2g contiene principalmente le funzioni relative a Firefox OS.

+ +
b2g/chrome/content
+ +

Contiene i file Javascript che vengono eseguiti dalla system app.

+ +
b2g/chrome/content/shell.html
+ +

È il punto di ingresso di Gaia - il codice HTML per la system app. shell.html carica settings.js e shell.js:.

+ +
<script type="application/javascript;version=1.8" src="chrome://browser/content/settings.js"> </script>
+<script type="application/javascript;version=1.8" src="chrome://browser/content/shell.js"> </script>
+ +

settings.js contiene i parametri di default di sistema.

+ +
b2g/chrome/content/shell.js
+ +

shell.js importa tutti i moduli necessari, registra i listener principali, imposta sendCustomEvent e sendChromeEvent per comunicare con Gaia e fornisce supporto per l'installazione delle webapp: dalle quote di indexedDB, alle funzionalità di RemoteDebugger, al supporto per le tastiere e ai tool di cattura delle schermate.

+ +

La funzionalità più importante di shell.js è quella di avviare la system app di Gaia e successivamente quello di delegare tutte le attività di gestione alla system app stessa.

+ +
let systemAppFrame =
+  document.createElementNS('http://www.w3.org/1999/xhtml', 'html:iframe');
+    ...
+  container.appendChild(systemAppFrame);
+ +
b2g/app/b2g.js
+ +

Questo script contiene le impostazioni predefinite, quali about:config nel browser e le stesse pref.js di Gaia. Queste impostazioni possono essere modificate dalla app di Settings o sovrascritte da user.js negli script di build di Gaia.

+ +

dom/{API}

+ +

Le nuove API (post-b2g) saranno collocate nella cartella dom/. Le vecchie API saranno collocate nella cartella dom/base, come ad esempio Navigator.cpp.

+ +
dom/apps
+ +

.jsm verranno caricati— .js API quali webapp.js installate

+ +
dom/apps/src/
+ +

Tutti i permessi sono definiti in PermissionsTable.jsm

+ +

dom/webidl

+ +

WebIDL è il linguaggio utilizzato per definire le web API. Dai una lettura a WebIDL_bindings per conoscere quali attribuiti sono supportati.

+ +

hal/gonk

+ +

Questa cartella contiene i file relativi ai livelli di porting di Gonk.

+ +

File generati

+ +
module/libpref/src/init/all.js
+ +

Contiene tutti i file di configurazione.

+ +
/system/b2g/ omni.ja and omni.js
+ +

Contiene i pacchetti di stile.

+ +

Eleborazione degli eventi di input

+ +

La maggior parte degli eventi di Gecko vengono innescati da azioni utente, quali la pressione di pulsanti, il tocco su un touch screen, e così via. Questi eventi vengono acquisiti da Gecko tramite l'interfaccia nsIAppShell implementata da Gonk che rappresenta il punto di ingresso principale per una applicazione di Gecko; cioè, il device driver della periferica di input richiamerà i metodi esposti dall'oggetto nsAppShell che rappresenta il sottosistema di Gecko per inviare eventi all'interfaccia utente.

+ +

Per esempio:

+ +
void GeckoInputDispatcher::notifyKey(nsecs_t eventTime,
+                                     int32_t deviceId,
+                                     int32_t source,
+                                     uint32_t policyFlags,
+                                     int32_t action,
+                                     int32_t flags,
+                                     int32_t keyCode,
+                                     int32_t scanCode,
+                                     int32_t metaState,
+                                     nsecs_t downTime) {
+  UserInputData data;
+  data.timeMs = nanosecsToMillisecs(eventTime);
+  data.type = UserInputData::KEY_DATA;
+  data.action = action;
+  data.flags = flags;
+  data.metaState = metaState;
+  data.key.keyCode = keyCode;
+  data.key.scanCode = scanCode;
+  {
+    MutexAutoLock lock(mQueueLock);
+    mEventQueue.push(data);
+  }
+  gAppShell->NotifyNativeEvent();
+}
+ +

Questi eventi provengono dal sistema input_event standard di Linux. Su questa struttura Firefox OS ha implementato uno strato di astrazione che fornisce alcune funzioni molto utili come il filtro degli eventi. Si può vedere il codice che crea eventi di input nel metodo EventHub :: GetEvents in widget/Gonk/libui/EventHub.cpp.

+ +

Una volta ricevuti da Gecko, gli eventi vengono inoltrati al DOM da nsAppShell:

+ +
static nsEventStatus sendKeyEventWithMsg(uint32_t keyCode,
+                                         uint32_t msg,
+                                         uint64_t timeMs,
+                                         uint32_t flags) {
+    nsKeyEvent event(true, msg, NULL);
+    event.keyCode = keyCode;
+    event.location = nsIDOMKeyEvent::DOM_KEY_LOCATION_MOBILE;
+    event.time = timeMs;
+    event.flags |= flags;
+    return nsWindow::DispatchInputEvent(event);
+}
+
+ +

Dopo di che, gli eventi vengono consumati da Gecko stesso o vengono inoltrati alle applicazioni Web come eventi DOM per ulteriori elaborazioni.

+ +

Grafica

+ +

Al livello più basso, Gecko utilizza OpenGL ES 2.0 per disegnare un contesto OpenGL. Questo avviene in NSWindow implementata da Gonk, con codice simile a questo:

+ +
gNativeWindow = new android::FramebufferNativeWindow();
+sGLContext = GLContextProvider::CreateForWindow(this);
+ +

La classe FramebufferNativeWindow è quella nativa Android; vedi FramebufferNativeWindow.cpp. Essa utilizza le API gralloc per accedere ai driver grafici per mappare i buffer dal framebuffer nella memoria.

+ +

Gecko usa i suoi Layers per comporre contesti sullo schermo. In sintesi accade quanto di seguito descritto:

+ +
    +
  1. Gecko scrive regioni di pagine separate in buffer di memoria. Spesso questi buffer sono nella memoria di sistema; altre volte sono delle texture mappate nello spazio di indirizzamento di Gecko, il che significha che Gecko sta scrivendo direttamente nela memoria video. Questo avviene generalmente attraverso il metodo BasicThebesLayer::PaintThebes().
    2. +
  2. Gecko quindi compone tutte le texture sullo schermo utilizzando comandi OpenGL. Questa composizione avviene in ThebesLayerOGL::RenderTo().
    3. +
+ +

I dettagli di come il Gecko gestisce il rendering dei contenuti web è oltre lo scopo di questo documento.

+ +

Hardware Abstraction Layer (HAL)

+ +

Lo strato di astrazione dell'hardware di Gecko è uno dei livelli di portabilità. Gestisce l'accesso alle interfacce di sistema di più basso livello su più piattaforme attraverso API C++, utilizzate dai livelli più alti di Gecko. Queste API sono implementate su base piattaforma all'interno del HAL di Gecko stesso. Lo strato di astrazione dell'hardware non viene esposto direttamente al codice JavaScript in Gecko - di questa interazione se ne occupano le Web API.

+ +

Diamo uno sguardo al processo da una prospettiva di più alto livello. Quando un utente utilizza una funzionalità del telefono (ad esempio effettua una chiamata, accede ad una rete wifi o si connette via Bluetooth), tutti gli strati dello stack tecnologico di Firefox OS vengono coinvolti per completare la richiesta. Le applicazioni e i contenuti web sottopongono le richieste per accedere al dispositivo attraverso chiamate alle Web API (direttamente all'interno di funzioni HTML5) implementate in Gecko. Gecko, a sua volta, sottopone le richieste a Gonk. Una singola richiesta di Gecko può innescare una serie complessa di operazioni, avviate e gestite da Gonk, sul dispositivo mobile.

+ +

Come lavora HAL

+ +

Consideriamo come esempio la API di Vibrazione. Definita in hal/Hal.h. In sintesi (semplificando la firma del metodo), abbiamo la seguente funzione:

+ +
void Vibrate(const nsTArray<uint32> &pattern);
+ +

Questa è la funzione chiamata dal codice di Gecko per abilitare la vibrazione del dispositivo in accordo con lo specifico pattern; una funzione corrispondente è disponibile per rimuovere la vibrazione. L'implementazione di Gonk di questo metodo è presente nel file hal/gonk/GonkHal.cpp:

+ +
void Vibrate(const nsTArray<uint32_t> &pattern) {
+  EnsureVibratorThreadInitialized();
+  sVibratorRunnable->Vibrate(pattern);
+}
+
+ +

Viene inviata la richiesta per avviare la vibrazione sul dispositivo ad un altro thread, tramite l'istruzione VibratorRunnable::Run(). Il ciclo principale di questo thread è simile al seguente:

+ +
while (!mShuttingDown) {
+  if (mIndex < mPattern.Length()) {
+    uint32_t duration = mPattern[mIndex];
+    if (mIndex % 2 == 0) {
+      vibrator_on(duration);
+    }
+    mIndex++;
+    mMonitor.Wait(PR_MillisecondsToInterval(duration));
+  }
+  else {
+    mMonitor.Wait();
+  }
+}
+
+ +

vibrator_on() è la API definita nel HAL di Gonk che avvia il motore di vibrazione. Internamente questo metodo invia un messaggio all'apposito driver scrivendo su un oggetto del kernel attraverso sysfs.

+ +

Implementazione delle API di Fallback del HAL

+ +

Le API HAL di Gecko sono sempre disponibili su tutte le piattaforme. Se Gecko viene portato su una nuova piattaforma che non espone il motore di vibrazione (ad esempio un desktop), viene comunque resa disponibile una API di fallback. Per il motore di vibrazione la API è implementata in hal/fallback/FallbackVibration.cpp.

+ +
void Vibrate(const nsTArray<uint32_t> &pattern) {
+}
+ +

Implementazione delle Sandbox

+ +

Poichè molti contenuti web vengono eseguiti in content process con privilegi bassi, non possiamo assumere che quei processi abbiano i privilegi adeguati (ad esempio) per avviare o spegnere il motore di vibrazione. Inoltre, vorremmo avere un posto unico in cui gestire eventuali situazioni di race condition. Nel HAL di Gecko questo viene gestito tramite una "sandbox". La sandbox agisce come un proxy, semplicemente inoltrando le richieste dei content process al "Gecko server". Le richieste vengono inoltrate utilizzando IPDL.

+ +

Per la vibrazione, questo viene gestito dalla funzione di Vibrate() implementata in hal/sandbox/SandboxHal.cpp:

+ +
void Vibrate(const nsTArray<uint32_t>& pattern, const WindowIdentifier &id) {
+  AutoInfallibleTArray<uint32_t, 8> p(pattern);
+
+  WindowIdentifier newID(id);
+  newID.AppendProcessID();
+  Hal()->SendVibrate(p, newID.AsArray(), GetTabChildFrom(newID.GetWindow()));
+}
+ +

Viene inviato un messaggio definito nell'interfaccia PHal, definita in hal/sandbox/PHal.ipdl. Questo metodo è descritto più o meno come segue:

+ +
Vibrate(uint32_t[] pattern);
+ +

Il messaggio viene ricevuto dal metodo HalParent::RecvVibrate() implementato in hal/sandbox/SandboxHal.cpp, come segue:

+ +
virtual bool RecvVibrate(const InfallibleTArray<unsigned int>& pattern,
+            const InfallibleTArray<uint64_t> &id,
+            PBrowserParent *browserParent) MOZ_OVERRIDE {
+
+  hal::Vibrate(pattern, newID);
+  return true;
+}
+ +

Sono stati omessi alcuni dettagli non rilevanti alla discussione; comunque, è stato mostrato come i messaggi progrediscono da un content process in Gecko a Gonk, quindi all'implementazione di Vibrate() nella HAL di Gonk e infine al driver che gestisce il motore di vibrazionie.

+ +

Le API DOM

+ +

Le interfacce DOM rappresentano la modalità con cui i web content comunicano con Gecko. In realtà c'è molto più e se sei interessato, puoi leggere l'articolo about the DOM. Le interfacce DOM vengono definite utilizzando IDL, che comprende sia una funzione esterna (foreign function interface, FFI) che un modello di oggetto (object model, OM) fra Javascript e C++.

+ +

La API di Vibrazione viene esposta attraverso un'interfaccia IDL nsIDOMNavigator.idl:

+ +
[implicit_jscontext] void mozVibrate(in jsval aPattern);
+ +

L'argomento jsval indica che mozVibrate() accetta come parametro di input qualsiasi valore. Il compilatore IDL, xpidl, genera l'interfaccia C++ che viene viene quindi implementata dalla classe Navigator in Navigator.cpp.

+ +
NS_IMETHODIMP Navigator::MozVibrate(const jsval& aPattern, JSContext* cx) {
+  // ...
+  hal::Vibrate(pattern);
+  return NS_OK;
+}
+ +

C'è molto più codice in questo metodo di quanto riportato, ma non è importante ai fini della discussione. Il punto è che la chiamata a hal::Vibrate() trasferisce il controllo dal DOM all'HAL di Gecko. Da qui, entriamo nell'implementazione del HAL discusso precedentemente fino al driver della scheda di rete. Soprattutto, l'implementazione del DOM è indipendente dalla piattaforma su cui è in esecuzione (Gonk, Windows, Mac OS X o qualsiasi altra). Inoltre non si preoccupa se il codice viene eseguito in un content process o nel server Gecko. Questo dettagli sono lasciati ai layer di sistema che se ne occupa.

+ +

L'API di Vibrazione è molto semplice e ciò la rende un buon esempio. L' API di SMS è un esempio di API più complessa che utilizza un proprio strato "remoto" per connettere il content process al server.

+ +

Radio Interface Layer (RIL)

+ +

Il RIL è stato menzionato nella sezione L'archituttura dei processi userspace. Questa sezione esaminerà come le varie componenti di questo strato interagiscono in maggior dettaglio.

+ +

Le principali componenti sono:

+ +
+
rild
+
Il daemon che interagisce con il firmware proprietario del modem.
+
rilproxy
+
il daemon che agisce come proxy fra rild e Gecko (implementato nel processo b2g). Questo risolve il problema di autorizzazione che si pone quando si cerca di interagire direttamente con rild, in quanto è possibile farlo solo per chi appartiene al gruppo radio.
+
b2g
+
Questo processo, conoscuto anche col nome di chrome, implementa Gecko. Le componenti di b2g che interagiscono con RIL sono un worker thread implementato in dom/system/gonk/ril_worker.js che interagisce con rild attraverso rilproxy e implementa la macchina a stati del modem; e l'interfaccia nsIRadioInterfaceLayer che è il thread primario del servizio XPCOM e agisce principalmente per scambiare messaggi fra il worker thread ril_worker.js e le varie componenti di Gecko, inclusi i content process.
+
I content process di Gecko
+
All'interno dei content process di Gecko l'interfaccia nsIRILContentHelper fornisce un servizio XPCOM che permette al codice che implementa parti del DOM, quali le API Telephony e SMS, di comunicare con l'interfaccia modem/radio, che risiede nel processo chrome.
+
+ +

Esempio: Communicazione da rild al DOM

+ +

Diamo un'occhiata ad un esempio di come le parti basse del sistema comunicano col DOM. Quando il modem riceve una chiamata in ingresso, avvisa rild utilizzando un meccanismo proprietario. rild quindi prepara un messaggio per il suo client in conformità con un protocollo "open" descritto in ril.h. Sempre nel caso di una chiamata in ingresso, un messaggio RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED viene generato e inviato da rild a rilproxy.

+ +

rilproxy, implementato in rilproxy.c, riceve questo messaggio nel suo ciclo principale mettendosi in polling sulla connessione con rild nel seguente modo:

+ +
ret = read(rilproxy_rw, data, 1024);
+
+if(ret > 0) {
+  writeToSocket(rild_rw, data, ret);
+}
+ +

Dopo aver ricevuto il messaggio da rild, rilproxy lo invia a Gecko attraverso la socket che li connette. Gecko riceve il messaggio tramite l'IPC thread:

+ +
int ret = read(fd, mIncoming->Data, 1024);
+// ... handle errors ...
+mIncoming->mSize = ret;
+sConsumer->MessageReceived(mIncoming.forget());
+
+ +

Il consumatore di questi messaggi è il SystemWorkerManager, che riconfeziona il messaggio e lo inoltra al worker thread ril_worker.js che implementa la macchina a stati di RIL; questo avviene nel metodo RILReceiver::MessageReceived():

+ +
virtual void MessageReceived(RilRawData *aMessage) {
+  nsRefPtr<DispatchRILEvent> dre(new DispatchRILEvent(aMessage));
+  mDispatcher->PostTask(dre);
+}
+ +

PostTask a sua volta chiama la funzione onRILMessage(),implementata in Javascript. Ciò avviene utilizzando la API JavaScript JS_CallFunctionName():

+ +
return JS_CallFunctionName(aCx, obj, "onRILMessage", NS_ARRAY_LENGTH(argv),
+                           argv, argv);
+ +

onRILMessage() è implementata in dom/system/gonk/ril_woker.js, elabora il messaggio e lo scompone. Ciascun pacchetto viene quindi inviato ad un gestore appropriato:

+ +
handleParcel: function handleParcel(request_type, length) {
+  let method = this[request_type];
+  if (typeof method == "function") {
+    if (DEBUG) debug("Handling parcel as " + method.name);
+    method.call(this, length);
+  }
+}
+
+ +

Il gestore verifica la tipologia di richiesta assicurandosi che sia definita come funzione nel codice JavaScript, e solo successivamente chiamando il metodo. ril_worker.js implementa un metodo specifico per ciascun tipo di richiesta.

+ +

Nel nostro esempio in corrispondenza a RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED viene chiamato il seguente gestore:

+ +
RIL[UNSOLICITED_RESPONSE_CALL_STATE_CHANGED] = function UNSOLICITED_RESPONSE_CALL_STATE_CHANGED() {
+  this.getCurrentCalls();
+};
+ +

Come puoi notare dal codice, se lo stato è cambiato durante la ricezione della notifica viene aggiornato semplicemente chiamando il metodo getCurrentCall():

+ +
getCurrentCalls: function getCurrentCalls() {
+  Buf.simpleRequest(REQUEST_GET_CURRENT_CALLS);
+}
+ +

il quale invia una richiesta a rild per acquisire lo stato di tutte le chiamate attive. La richiesta segue il medesimo percorso ma inverso rispetto a quello seguito da RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED (cioè da ril_worker.js a SystemWorkerManager a Ril.cpp, quindi a rilproxy e finalmente a rild). rild quindi risponde, seguendo il medesimo percorso, fino al gestore dell'evento del messaggio REQUEST_GET_CURRENT_CALLS all'interno di ril_worker.js. In questo modo avvengono le comunicazioni bidirezionali.

+ +

Lo stato viene quindi comparato con lo stato precedente; se c'è stato un cambio, ril_worker.js aggiorna il servizio nsIRadioInterfaceLayer:

+ +
_handleChangedCallState: function _handleChangedCallState(changedCall) {
+  let message = {type: "callStateChange",
+                 call: changedCall};
+  this.sendDOMMessage(message);
+}
+ +

nsIRadioInterfaceLayer è implementato in dom/syste/gonk/RadioInterfaceLayer.js; il messaggio viene ricevuto dal suo metodo onmessage():

+ +
 onmessage: function onmessage(event) {
+   let message = event.data;
+   debug("Received message from worker: " + JSON.stringify(message));
+   switch (message.type) {
+     case "callStateChange":
+       // This one will handle its own notifications.
+       this.handleCallStateChange(message.call);
+       break;
+   ...
+
+ +

e successivamente inviato al content process tramite il Parent Process Message Manager (PPMM):

+ +
handleCallStateChange: function handleCallStateChange(call) {
+  [some internal state updating]
+  ppmm.sendAsyncMessage("RIL:CallStateChanged", call);
+}
+ +

Nel content process, il messaggio viene ricevuto dal metodo receiveMessage() definito nel servizio nsIRILContentHelper, dal Child Process Message Manager (CPMM):

+ +
receiveMessage: function receiveMessage(msg) {
+  let request;
+  debug("Received message '" + msg.name + "': " + JSON.stringify(msg.json));
+  switch (msg.name) {
+    case "RIL:CallStateChanged":
+      this._deliverTelephonyCallback("callStateChanged",
+                                     [msg.json.callIndex, msg.json.state,
+                                     msg.json.number, msg.json.isActive]);
+      break;
+ +

Questo, a sua volta, invoca nsIRILTelephonyCallback.callStateChanged() per ciascun oggetto che ha registrato un metodo di callback. Ogni applicazione web che accede alla API window.navigator.mozTelephony registra un proprio metodo di callback che inoltrerà gli eventi al codice JavaScript all'interno dell'applicatione web, sia come evento di cambio stato che di un evento di chiamata in ingresso.

+ +
NS_IMETHODIMP Telephony::CallStateChanged(PRUint32 aCallIndex, PRUint16 aCallState,
+                                          const nsAString& aNumber, bool aIsActive) {
+  [...]
+
+  if (modifiedCall) {
+    // Change state.
+    modifiedCall->ChangeState(aCallState);
+
+    // See if this should replace our current active call.
+    if (aIsActive) {
+      mActiveCall = modifiedCall;
+    }
+
+    return NS_OK;
+  }
+
+  nsRefPtr<TelephonyCall> call =
+          TelephonyCall::Create(this, aNumber, aCallState, aCallIndex);
+  nsRefPtr<CallEvent> event = CallEvent::Create(call);
+  nsresult rv = event->Dispatch(ToIDOMEventTarget(), NS_LITERAL_STRING("incoming"));
+  NS_ENSURE_SUCCESS(rv, rv);
+  return NS_OK;
+}
+ +

Le appicazioni possono ricevere tali eventi e aggiornare di conseguenza la propria interfaccia utente:

+ +
handleEvent: function fm_handleEvent(evt) {
+  switch (evt.call.state) {
+    case 'connected':
+      this.connected();
+      break;
+    case 'disconnected':
+      this.disconnected();
+      break;
+    default:
+      break;
+  }
+}
+ +

Dai uno sguardo all'implementazione di handleEvent() nell'applicazione Dialer come ulteriore esempio.

+ +

3G dati

+ +

Una "chiamata dati" viene inizializzata tramite un messaggio RIL; questo abilita la modalità di trasferimento dati al modem. Tale chiamata crea e attiva un'interfaccia Point-to-Point Protocol (PPP) nel kernel linux che potrà essere configurata utilizzando le interfacce usuali.

+ +
+

Nota: Questa sessione necessita di essere scritta.

+
+ +

API DOM relative

+ +

Segue la lista delle API DOM relative alla comunicazione con RIL:

+ + + +

Wi-Fi

+ +

La maggior parte del lavoro di back end per Firefox OS viene effettuato dal processo wpa_supplicant. Ciò significa che l'attività principale del back end è quella di gestire il supplicant e di svolgere alcuni compiti ausiliari quali caricare il driver del WIFI e abilitare o disabilitare le interfacce di rete. In pratica, questo significa che il back end è la macchina a stati, con un'evoluzione degli stati che segue quella del supplicant.

+ +
+

Nota: Molto di ciò che accade nel WIFI dipende dai cambiamenti di stato nel processo wpa_supplicant.

+
+ +

L'implementazione delle componenti che costituiscono il WiFi è suddivisa in due file:

+ +
+
dom/wifi/DOMWifiManager.js
+
Implementa le API esposte ai web content, come definite in nsIWifi.idl.
+
dom/wifi/WifiWorker.js
+
Implementa la macchina a stati e il codice che gestisce il supplicant.
+
+ +

Questi due file comunicano tra loro utilizzando il message manager. Il back end rimane in ascolto di messaggi che richiedono certi azioni, quali l'"associazione" e risponde con un messaggio quando l'azione richiesta è stata espletata.

+ +

La parte del DOM si pone in ascolto sia sulle risposte che di eventuali eventi che notificano cambiamenti di stato o l'aggiornamento di informazioni.

+ +
+

Nota: Ogni API sincrona del DOM viene implementata tenendo in cache i dati nella sua parte dell'interfaccia. Messaggi sincroni vanno evitati ogni qualvolta sia possibile.

+
+ +

WifiWorker.js

+ +

Questo file implementa la logica principale dell'interfaccia WIFI. Viene eseguito nel processo chrome e istanziato dal SystemWorkerManager. È suddiviso in due sezioni: una funzione anonima e il WifiWorker. La funzione anonima finisce per essere il WifiManager fornendo una API locale, comprese le notifiche per eventi quali le connessioni al supplicant e i risultati. In generale, contiene poca logica, risponde semplicemente con le informazioni richieste e controlla i dettagli della connessione con il richiedente.

+ +

Il WifiWorker si colloca fra il WifiManager e il DOM. Risponde agli eventi e li inoltra al DOM, riceve richieste dal DOM ed esegue le appropriate azioni sul supplicant. Inoltre mantiene le informazioni di stato del supplicant e queli azioni intraprendere di conseguenza.

+ +

DOMWifiManager.js

+ +

Implementa la API del DOM, gestisce le richieste da e verso i chiamanti e il WiFi worker. C'è veramente poca logica.

+ +
+

Nota: Per evitare messaggi sincroni nel processo chrome il WIFI manager tenendo in cache lo stato in funzione dell'evento ricevuto.

+
+ +

C'è un unico messaggio sincrono, inviato nel momento in cui la API del DOM viene istanziata per ottenere lo stato del supplicant.

+ +

DHCP

+ +

Il DHCP e il DNS sono gestiti dal processo di dhcpcd, lo standard DHCP client di Linux. Purtroppo esso non è in grado di reagire quanto la connessione di rete viene persa. Come conseguenza Firefox OS termina e riavvia dhcpcd ogni qualvolta si connette ad una data rete wireless.

+ +

dhcpcd è anche responsabile per la configurazione della rotta di default; viene inoltre effettuata una chiamata al network manager per configurare i server DNS.

+ +

Network Manager

+ +

Il gestore di rete (Network Manager) configura le interfacce di rete per le connettività 3G e WIFI.

+ +
+

Nota: Questa sessione necessita di essere scritta.

+
+ +

Processi e thread

+ +

Firefox OS utilizza i thread POSIX per implementare tutti i thread applicativi, inclusi i thread principali di ciascuna applicazione, i web workers e gli helper threads. I control group vengono utilizzati per gestire la priorità di esecuzione di processi e thread utilizzando lo scheduler standard di Linux. In funzione dello stato, il processo viene assegnato ad un differente control group. Abbiamo attualmente 6 livelli di priorità corrispondenti a 5 gruppi di controllo:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Livello di priorità dei processi
PrioritàControl groupUtilizzato da
MASTER Processo b2g
FOREGROUND_HIGHapps/criticalApplicazioni che utilizzano CPU wakelock
FOREGROUNDappsApplicazioni in foreground (visibili all'utente)
FOREGROUND_KEYBOARDappsApplicazione tastiera
BACKGROUND_PERCEIVABLEappsApplicazione audio in background (non visibili all'utente)
BACKGROUNDapps/bg_non_interactiveTutte le altre applicazioni in esecuzione in background
+ +

Alcuni livelli condividono lo stesso control group, in quanto quei livelli differiscono nella modalità con cui vengono gestiti dall'out of memory killer. Tutte le proprietà possono essere configurate durante il processo di build attraverso le preferenze; le principali proprietà sono diponibili nel file b2g/app/b2g.js.

+ +

I seguenti control groups vengono attualmente utilizzati:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Control groups
PercorsoAllocazione CPUDescrizione
 50% del tempo totale di CPUControl group di root riservato per il processo b2g principale per i deamon di sistema
apps50% del tempo totale di CPUApplicazioni regolari
apps/critical95% di appsApplicazioni critiche
apps/bg_perceivable10% di appsApplicazioni di background percepibili
apps/bg_non_interactive5% di appsApplicazioni di background
+ +
+

Nota: Per maggiori informazioni sull'out-of-memory killer e sulla modalità con cui Firefox OS gestisce le situazioni di memoria scarsa puoi leggere Out of memory management on Firefox OS.

+
+ +

All'interno di un processo il thread principale eredita il valore di nice del processo, mentre ai thread dei web worker viene assegnato un valore di nice maggiore di un'unità rispetto al thread principale, pertanto vengono eseguiti con una priorità inferiore. Questo per evitare che worker che fanno uso intensivo di CPU rallentino il thread principale. Le priorità sui processi vengono modificate in occasioni di eventi maggiori quali l'invio in background o foreground dell'applicazione, l'avvio di una nuova applicazione o l'acquisizione di CPU wakelock.

+ +
+

Note: Attualmente non è possibile utilizzare cgroups su dispositivi ICS a causa di un bug nel kernel.

+
+ +

 

+ +

 

diff --git a/files/it/archive/b2g_os/platform/feature_support_chart/index.html b/files/it/archive/b2g_os/platform/feature_support_chart/index.html new file mode 100644 index 0000000000..edbb159f49 --- /dev/null +++ b/files/it/archive/b2g_os/platform/feature_support_chart/index.html @@ -0,0 +1,158 @@ +--- +title: Tabella delle funzioni supportate +slug: Archive/B2G_OS/Platform/Feature_support_chart +tags: + - QA + - Testing +translation_of: Archive/B2G_OS/Platform/Feature_support_chart +--- +
+

Firefox OS è disponibile in diverse build, scaribili già pronte o compilabili ad hoc, inoltre alcune funzioni possono variare a seconda del dispositivo su cui la build viene installata. Nella tabella sottostante vengono elencate le funzioni disponibili per ciascuna build.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicheDispositivoEmulatoreDesktop
DialerCompletoSolo UI, no reteSolo UI, no rete
ContattiCompletoCompletoCompleto
SMSCompletoSolo UI, no reteSolo UI, no rete
FotocameraCompletoSolo UI, no supporto fotocameraSolo UI, Solo UI, supporto fotocamera non garantito
GalleriaCompletoCompletoCompleto
VideoCompletoSolo UICompleto
MusicaCompleto?Completo
Radio FMCompletoCompletoSolo UI
EmailCompletoCompletoCompleto
CalcolatriceCompletoCompletoCompleto
BrowserCompletoCompletoCompleto
MarketplaceCompletoCompletoCompleto
OrologioCompletoCompletoCompleto
AgendaCompletoCompletoCompleto
Schermata principaleCompletoCompletoCompleto
Blocca schermoCompletoCompletoCompleto
TastieraCompletoCompletoCompleto
Task ManagerCompletoCompletoCompleto
First-RunCompleto??
NotificheCompletoCompletoCompleto
Barra di statoCompletoImpossibile testare alcuni stati di reteImpossibile testare alcuni stati di rete
ImpostazioniCompletoCompletoCompleto
+ +

 

diff --git a/files/it/archive/b2g_os/platform/gaia/gaia_apps/index.html b/files/it/archive/b2g_os/platform/gaia/gaia_apps/index.html new file mode 100644 index 0000000000..204171bbf1 --- /dev/null +++ b/files/it/archive/b2g_os/platform/gaia/gaia_apps/index.html @@ -0,0 +1,90 @@ +--- +title: App Gaia +slug: Archive/B2G_OS/Platform/Gaia/Gaia_apps +tags: + - Apps + - Firefox OS + - Gaia +translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps +--- +
+

Gaia è il front-end di Firefox OS, contentente sia le funzionalità di amministrazione di sistema che le app pre-installate nei singoli dispositivi Firefox OS. Tutti i sorgenti Gaia — compresi il sistema e keyboard IMEs — sono completamente implementati in HTML5 (HTML + CSS + JavaScript) & Open WebAPIs. Questa raccolta di documenti contiene informazioini su come funzioni ogni applicazione disponibile nella famiglia Gaia.

+
+ +

Categorie di funzionalità di Gaia

+ +

Le diverse app di Gaia possono essere più o meno categorizzate nei seguenti gruppi.

+ +
+

Note: Molte delle pagine linkate per ulteriori informazioni sul funzionamento delle singole app sono pagine di README presenti nel repository Github di Gaia. Questo è necessario in quanto molte app hanno rapidi cicli di sviluppo e si evolvono spesso giorno per giorno, e non avrebbe senso cercare di mantenere le pagine di MDN aggiornate alle ultime modifiche. Le pagine di README aggiornate dagli ingegneri sono la più accurata fonte di informazioni.

+
+ +

Platform

+ +

Include System, Settings, Lockscreen, build scripts, e le app Bluetooth.

+ +

+ +

App Platform: altre spiegazioni

+ +
+
System
+
L'app System è la prima web app caricata da Gecko durante la Procedura di bootup di Firefox OS, e si occupa di molte mansioni necessarie generalmente per il funzionamento del sistema e non progettate specificatamente per una singola app.
+
Browser
+
L'app Browser (che ora è parte di System) rende disponibili funzionalità tipiche dei browser ove richieste — ad esempio per la navigazione nelle pagine, la ricerca ed i segnalibri.
+
Window Management
+
La funzionalità di gestione delle fineste di Firefox OS — incluso il ciclo vitale dell'app, le interazioni, le notifiche, le animazioni e molto altro — sono gestite da una parte specifica della System app. Questo articolo mette in luce la gestione delle finestre in Firefox OS nel dettaglio.
+
Settings
+
L'app Settings permette agli utenti Firefox OS di configurare le impostazioni del dispositivo, rispondere alle activities in arrivo (Web activities con nome configure), che permettono alle altre applicazioni di passare a diversi pannelli contenuti nella app Settings per gestire le configurazioni come richiesto (per esempio mostrando il pannello delle impostazioni Wi-Fi se non è disponibile alcuna connessione).
+
+ +

Communication

+ +

include le app Dialer, Contact, SMS e le app FTU.

+ +

+ +

App Communication: altre informazioni

+ +

TBD

+ +

Productivity

+ +

Include le app Email, Calendar, e Clock.

+ +

+ +

App Productivity: altre informazioni

+ +
+
Calendar
+
L'applicazione pre-installata per il calendario di Firefox OS.
+
Clock
+
L'applicazione standard di Firefox OS per l'orologio, che include sveglia, timer e cronometro.
+
Email
+
L'applicazione e-mail di Gaia.
+
+ +

Media

+ +

Include le app Camera, Gallery, Music, e Video, oltre ad altre funzioni legate alla multimedialità come wallpapers e forward lock DRM.

+ +

+ +

App Media: altre informazioni

+ +
+
Video
+
Video è un' applicazione che si occupa di visualizzare i video contenuti nella memoria di massa del dispositivo Firefox OS.
+
Camera
+
Camera permette agli utenti di realizzare foto e video dalla fotocamera del dispositivo, e di rispondere alle Web activities del tipo pick richiamate da altre app che necessitano delle funzionalità di Camera.
+
+ +

Altre funzionalità di Gaia

+ +

Oltre a queste funzioni, ce ne sono molte altre come browser, homescreen, marketplace, test framework, PDF viewer e app manager, che sono legate nello sviluppo a Gaia.

+ +
+
pdf.js
+
pdf.js è un lettore PDF basato su HTML5, usato in Gaia per visualizzare PDF. Notare che il codice di base per pdf.js è mantenuto in repository diversi da quelli di Gaia.
+
diff --git a/files/it/archive/b2g_os/platform/gaia/hacking/index.html b/files/it/archive/b2g_os/platform/gaia/hacking/index.html new file mode 100644 index 0000000000..ba99b3d1ab --- /dev/null +++ b/files/it/archive/b2g_os/platform/gaia/hacking/index.html @@ -0,0 +1,132 @@ +--- +title: Hacking Gaia +slug: Archive/B2G_OS/Platform/Gaia/Hacking +tags: + - B2G + - Firefox OS + - Gaia + - Sviluppo + - linee guida +translation_of: Firefox_OS/Developing_Gaia +--- +
+

Questa pagina è diretta agli sviluppatori Gaia. Se stai cercando informazioni su come compilare e installare Firefox OS dovresti leggere Compilare e installare Firefox OS.

+
+

Gaia è un insieme di web apps che creano l'interfaccia di Firefox OS. Ciò che vedi sullo schermo in Firefox OS è scritto usando le open Web technologies. Anche la schermata home e le app di default usano le stesse tecnologie.

+

Ottenere i sorgenti

+

Per ottenere  i sorgenti per Gaia, effettua un fork su GitHub  e usalo per scaricare i file tramite git.

+
$ git clone https://github.com/mozilla-b2g/gaia.git
+

Eseguire Gaia

+

Puoi usare Gaia sia su un desktop, dentro a Firefox, sia su un apparecchio mobile compatibile.

+

B2G desktop

+

B2G desktop è una build per desktop del runtime applicativo usato su Firefox OS che è possibile utilizzare per eseguire Gaia su un computer desktop.

+

Puoi scaricare una nightly build di B2G desktop da qui. In base alla versione su cui desideri lavorare potresti volere una versione specifica di latest-mozilla-b2g18. Esistono versioni per Linux (32 bit and 64 bit), Mac OS X e Windows.

+

Le nightly builds sono pacchettizate con una versione di Gaia recente. Una volta scaricato l'archivio, tutto ciò che dovrai fare è estrarlo in una cartella ed eseguire il file compilato di b2g nella cartella.

+
$ cd b2g
+$ ./b2g
+

Se vuoi usare una versione personalizzata di Gaia usando B2G devi creare un profilo:

+
$ cd /path/to/gaia
+$ DEBUG=1 DESKTOP=0 make
+

Questo comando genera una cartella chiamata profile nella directory gaia. L'opzione DEBUG esegue Gaia come una hosted app su di un web-server invece che come app pacchettizzate che devono essere ricompilate e ripacchettizate dopo ogni cambiamento. Una volta creato il nuovo profilo puo trovare la sua posizione leggendo l'ultima riga dell'output del comando precedente:

+
Profile Ready: please run [b2g|firefox] -profile /path/to/gaia/profile
+

A questo punto puoi usare il profilo personalizzato in B2G passandolo come variabile:

+
$ ./b2g /path/to/gaia/profile
+

Inoltre se vuoi puoi compilare B2G sai sorgenti.

+

Usare Gaia in Firefox

+

Puoi anche usare Gaia dentro a Firefox. Questo ti permette di mantenere veloce il ciclo di sviluppo e di avere gli strumenti per lo sviluppo ed il debug integrati in Firefox. Vedi Usare Gaia in Firefox per i dettagli su come usare Gaia in Firefox.

+

Usare Gaia su un dispositivo

+

Se possiedi un dispositivo compatibile puoi usare Gaia installando Firefox OS. Vedi Compilare ed installare Firefox OS per i dettagli. Puoi inoltre consultare la documentazione su come testare Firefox OS.

+

Test di unità

+

Vedi Gaia unit tests per la documentazione su come creare ed eseguire i test di unità per Gaia.

+

Segnala i Bug

+

I bug sono segnalati su Bugzilla nella sezione Boot2Gecko > Gaia. Segnala un nuovo bug under the Gaia component (or one of the sub-components).

+

Contribuisci a Gaia

+

Mozilla dipende dalle dalla comunità open source  per sviluppare Gaia e le app e ci piacerebbe che tu partecipassi.

+

Alcuni posti da cui trovare bug su cui lavorare:

+ +

Direttive sul codice

+ +

Regole in più

+

Sbagliato:

+
if (expression) doSomething();
+
+

Corretto:

+
if (expression) {
+  doSomething();
+}
+
+

Se lavori su un'app di sistema assicurati di leggere questo.

+

Prima di pubblicare una patch esegui gjslint  per controllare gli errori di formattazione:

+
gjslint --nojsdoc my_file.js
+

Pubblicare una patch

+

Prima di tutto riporta il bug su Bugzilla e segnala checi stai lavorando, usa il tuo account account Bugzilla.

+

Crea una nuova branch di Gaia in locale:

+
$ git branch branchname
+$ git checkout branchname
+

Segnala i tuoi cambiamenti:

+
$ git add /file/to/add
+$ git commit -m "Bug XXXXX - Fix the broken Gaia and save the world"
+

Esegui il push della tua branch:

+
$ git push origin branchname
+

Usando il bottone Pull sulla tua branch in GitHub segnala che sei disponibile a pubblicare il tuo codice.

+

Per richiedere una revisione della tua patch, allega la pull request al bug segnalato su Bugzilla aggiungendo l'URL della pull request e settando "review" ("r") a "?" quindi aggiungi il bugzilla ID di uno tra i proprietari del modulo (Molto importante - altrimenti il tuo bug non verrà controllato da nessuno). Puoi usare l'addon Github tweaks for bugzilla extension on AMO per aiutarti ad automatizzare questo processo. Questo addon ti aiuterà creando automaticamente l'allegato e  lo aggiungerà al bug su bugzilla; dovrai però segnalare che il bug ha bisogno della revisione di un proprietario.

+

I revisori potrebbero chiederti qualche modifica; potresti dover annulare i tuoi cambiamenti sulla tua branch ma una volta che avrai soddisfattole loro richieste incorporeranno la tua branch nella master del loro modulo. Potrebbero chiederti di anullare tutti i tuoi cambiamenti graduali per crearne uno singolo finale in modo che il tuo lavoro possa essere seguito meglio.

+

La persona che incorporerà il cambiamento nella master branch aggiungerà il tag r= flag nel commento al momento dell'incorporamento.

+

Opzioni per il comando make

+

Ci sono molte variabili nel Makefile che fanno riferimento a ambienti di sviluppo non più supportati o non sono ben documentate, non fare affidamento su queste perché potrebbero essere rimosse in futuro.

+

Default

+
make
+

Compile un profilo con le app packaged che può essere usato dalla versione B2G Desktop e può essere portato sul dispositivo.

+

Debug make

+
DEBUG=1 make
+

Con questa opzione attivata (DEBUG=1) Gaia può essere utilizzata come una hosted app su un webserver invece che come una app packaged che deve essere pacchettizzata dopo ogni cambiamento. Visita la pagina con l'ultima versione di Firefox Nightly per avere anche gli ultimi strumenti per sviluppatori specifici per B2G.

+

Push to device

+
make install-gaia
+
+make reset-gaia
+

Usando adb (Android Debug Bridge) puoi mandare al dispositivo la versione di Gaia che hai compilato. reset-gaia rimuoverà completamente tutti i file relativi al profilo utente e le web app prima di mandare al dispositivo la nuova versione di Gaia.

+

Selective build

+
APP=system make
+
+APP=system make install-gaia
+

L'opzione APP permette di specificare quali app mettere nella versione di Gaia che compilerai, questo è utile se non vuoi metterle tutte ogni volta che vuoi aggiornare Gaia sul tuo disposistivo.

+

High resolution image assets

+
GAIA_DEV_PIXELS_PER_PX=1.5 make
+

Questa variabile permette di usare diverse risoluzioni per le immagini di sistema, rimpiazzandole con  le rispettive versioni indicate,*@1.5x.(gif|jpg|png), se esistono.

+

Al momento Gaia è rivolta a tre differenti versioni di schermo, HBGA (320x240), qHD (540×960) e WVGA (480×800) ; puoi usare la variabile GAIA_DEV_PIXELS_PER_PX per essere sicuro che le immagini siano alla corretta risoluzione per dispositivi qHD e WVGA . Vedi l'articolo A pixel is not a pixel per maggiori informazioni sulla relazione tra pixel del dispositivo e i pixel css..

+

Script compression and optimization

+
GAIA_OPTIMIZE=1 make
+

Concatena le risorse di Gaia e ottimizza i file javascript interni per avere un minor tempo di caricamento.

+

Preference shortcuts

+
NOFTU=1
+
+

Disattiva la guida introduttiva per l'utente.

+
REMOTE_DEBUGGER=1
+

Abilita il debug tramite lo strumento adb.

+
DEVICE_DEBUG=1
+

Per le versioni di Firefox Os successive alla 1.2,  puoi usare questo parametro quando vuoi eseguire il debug delle app tramite lo strumento AppManager.

+

Distribution and market customization build

+
GAIA_DISTRIBUTION_DIR=./dir
+

Leggi Customization Overview per i dettagli.

+

Contatta il team in questi modi

+ diff --git a/files/it/archive/b2g_os/platform/gaia/index.html b/files/it/archive/b2g_os/platform/gaia/index.html new file mode 100644 index 0000000000..4536970556 --- /dev/null +++ b/files/it/archive/b2g_os/platform/gaia/index.html @@ -0,0 +1,62 @@ +--- +title: Gaia +slug: Archive/B2G_OS/Platform/Gaia +tags: + - B2G + - Gaia + - Mobile + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Platform/Gaia +--- +

Gaia è il livello di interfaccia utente di Firefox OS. Tutto ciò che appare sullo schermo dopo che Firefox OS è stato avviato è disegnato da Gaia, compresa la schermata di blocco, la schermata principale, il tastierino del telefono e le altre applicazioni. Gaia è stato sviluppato completamente in HTML, CSS, e JavaScript. La sua unica interfaccia col sistema operativo e con l'hardware sottostante sono le API Web standard, implementate da Gecko.

+ +

Grazie a questo design, non solo è possibile eseguire Gaia sui dispositivi Firefox OS, ma anche all'interno di altri sistemi operativi e browser web (seppure probabilmente con funzionalità limitate a seconda delle capapcità del browser).

+ +

Applicazioni di terze parti installate sul dispositivo insieme a Gaia possono essere lanciate da Gaia stesso.

+ + + + + + + + +
+

Documentazione su Gaia

+ +
+
Introduzione a Gaia
+
Gaia è l'applicazione per l'interfaccia utente dei dispositivi Firefox OS; non è altro che un'applicazione Web che viene eseguita sul software di Firefox OS. Questa guida introduce Gaia ad alto livello.
+
App Gaia
+
Informazioni sulle app di default della famiglia di Gaia, consigli su come usarle e come modificarle.
+
Guida all'hacking di Gaia
+
Una guida all'hacking e alla modifica dell'interfaccia di Gaia.
+
Primi passi col sistema di compilazione di Gaia
+
La maggior parte del lavoro inerente la compilazione è eseguito dagli script che si trovano all'interno della directory build/ di Gaia.
+
Consigli e FAQ per l'hacking di Gaia
+
Una lista di consigli e risposte a domande frequenti riguardo l'hacking di Gaia.
+
+ +

Vedi tutti...

+ 		+ + + + +

Risorse

+ + +
diff --git a/files/it/archive/b2g_os/platform/gonk/index.html b/files/it/archive/b2g_os/platform/gonk/index.html new file mode 100644 index 0000000000..8c50f1de6f --- /dev/null +++ b/files/it/archive/b2g_os/platform/gonk/index.html @@ -0,0 +1,109 @@ +--- +title: Gonk +slug: Archive/B2G_OS/Platform/Gonk +tags: + - Demoni + - Drivers + - Firefox OS + - Firmware + - Gecko + - Linux + - ODM + - OEM + - porting +translation_of: Archive/B2G_OS/Platform/Gonk +--- +

 

+ +
+

Gonk è la componente di più basso livella della piattaforma Firefox OS, composta da un kernel Linux basato sull'Android Open Source Project (AOSP) e il livello di astrazione hardware dell'userspace (HAL, Hardware Abstraction Layer). Lo scopo di questo articolo è illustrare le componenti di Gonk, per maggiori informazioni sull'architettura di Firefox OS e su quale sia il ruolo di Gonk nel sistema, è possibile leggere la guida sull'architettura di Firefox OS.

+
+ +

Visione d'insieme di Gonk

+ +

Gonk è il livello più basso (Kernel) dello stack di Firefox OS che funge da interfaccia tra Gecko e l'hardware, controllando quest'ultimo e rendendo disponibili le funzionalità hardware alle API Web implementate in Gecko. Gonck può essere visto come la "scatola magica" che si occupa di tutto il complesso lavoro necessario per il controllo del dispositivo a livello hardware.

+ +

Gonk è una distribuzione Linux minimale che include alcuni componenti di Android, come la fotocamera e il GPS, ed è esteso da Mozilla sfruttando progetti open source come libusb, bluez, e altri. Questa struttura rende semplice il porting da parte degli OEM di componenti già disponibili per altrte implementazioni Android (come i driver, il firmware, i demoni del livello service) su dispositivi Firefox OS.

+ +

Gonk è la destinazione del porting di Gecko, così come lo sono anche OS X, Windows e Android.

+ +
+

Note: Siccome i diversi dispositvi disponibili possono avere chipset e specifiche hardware differenti anche le distribuzioni di Gonk possono variare.

+
+ +

Dato che il progetto Firefox OS definisce Gonk, sono disponibili interfacce per Gecko che non sono disponibili su sistemi operativi differenti; per esempio Gecko dispone dell'accesso diretto alla parte telefonica e al buffer del display.

+ +

Architettura di Gonk

+ +

Ogni diverso dispositivo ha una combinazione di Gonk creata ad-hoc per il suo hardware e contenente librerie di sistema, driver e componenti del firmware richieste per il funzionamento del sistema operativo e delle altre componenti hardware. Queste componenti sono determinate dagli OEM in collaborazione con gli sviluppatori del chipset e con gli ODM. L' immagine seguente mostra un' esempio di implementazione di Gonk.

+ +

+ +

Questo esempio mostra i seguenti componenti principali (che rappresentano solo una porzione di tutti i possibili componenti presenti nelle implementazioni di Gonk):

+ + + +

Gonk inoltre avvia, gestisce e spenge il processo b2g, che è il layer Gecko di Firefox OS. Il processo b2g si comporta come un client per i demoni esposti da Gonk; questi interagiscono direttamente con l'hardware ed espongono a Gecko le funzioni hardware del telefono. Gecko comunica con questi demoni attraverso una il protocollo IPC. Questi componenti si scambiano comandi e protocolli per richiedere e fornire servizi. 

+ +
+

Note: Per ulteriori informazioni riguardo l'architettura Gonk vedere la guida all' architettura di Firefox OS.

+
+ +

Effettuare il porting di Gonk

+ +

Siccome Firefox OS è basato sul kernel di Android, effetturare il porting di firmware, driver, demoni di servizio e di altri componenti verso Firefox OS richiede poco sforzo. Se un componente custom (ad esempio un modulo RIL od un nuovo demone) è necessario, oppure se è necessaria una modifica al reference design dell' ODM, ulteriori integrazioni e test potrebbero rivelarsi necessari.

+ +

In b2g i client comunicano con un demone di sistema tramite una il protocollo IPC. Il client avvia una connessione tramite socket verso il demone, invia la richiesta (utilizzando il protocollo di richiesta del server) tramite la stessa connessione, riceve la risposta e chiude la connessione. Gli OEM sono responsabili per la struttura e per l'implementazione della comunicazione inter-processo tra client e server.

+ +
+

Note: per ulteriori informazioni riguardo il funzionamento del processo di porting vedere Porting di Firefox OS.

+
+ +

Come Mozilla lavora sui porting di Gonk insieme agli OEM e ai produttori di telefoni

+ +

Ogni implementazione di Gonk è il risultato della collaborazione di Mozilla, gli OEM e relativi produttori di componenti (ODM, produttori di chipset).

+ +

Mozilla rende disponibile il codice ed i file di supporto a Gonk necessari per l'implementazione in Firefox OS e per la sua distribuzione. Le repository comprendono il kernel Linux (con pochi cambiamenti) e aggiunte per il funzionamento con Gecko.

+ +

Gli OEM sono responsabilii per la creazione, compilazione, testing, certificazione e distribuzione dell'immagine di Firefox OS per uno specifico dispositivo. Per quanto riguarda la versione di Gonk di queste immagini di Firefox OS gli OEM sono responsabili per la maggior parte degli sforzi al fine di garantire la compatibilità tra le chiamate delle Web API e le funzioni dell'hardware del dispositivo. Il tipo e lo scopo dello sforzo richiesto è fortemente dipendente dallo specifico chipset utilizzato nel telefono (e dagli altri componenti).

+ +

Componenti del dispositivo

+ +

Gli OEM collaborano con i produttori del chipset e con gli ODM per rendere disponibili tutti i componenti relativi allo specifico dispositivo, al fine di far funzionare correttamente il sistema operativo. Per esempio, il produttore della scheda Wi-Fi dovrebbe fornire il chipset e il software affiliato. Questi componenti possono includere:

+ + + +

Integrazione tra Gonk e Gecko

+ +

Gli OEM devono assicurare che le funzionalità hardware del dispositivo mobile siano correttamente e completamente aperte alle implementazioni per le Web API di Gecko. Questo prevede:

+ + + +

Codice sorgente di Gonk

+ +

Il repository principale di B2G su Github contiene il progetto supportato per i port di Gonk su vari terminali. Lo si può quindi considerare come il repository di Gonk. La lista dei terminali supportati è disponibile nel file B2G/config.sh.

+ +

La maggior parte del lavoro quotidiano su Gonk consiste nel porting del sistema su diverse piattaforme e nell'assicurarsi che Gecko funzioni bene su questi terminali.

+ +
+
+ +

 

diff --git a/files/it/archive/b2g_os/platform/index.html b/files/it/archive/b2g_os/platform/index.html new file mode 100644 index 0000000000..5708ef1ee5 --- /dev/null +++ b/files/it/archive/b2g_os/platform/index.html @@ -0,0 +1,82 @@ +--- +title: The Firefox OS platform +slug: Archive/B2G_OS/Platform +tags: + - B2G + - Firefox OS + - Landing + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Platform +--- +

The Firefox OS platform consists of many components. While you don't need to understand its architecture in order to build applications that run on Firefox OS, if you're working on developing or porting the platform—or are simply curious—the following documentation may be of interest to you.

+ + + + + + + +
+

Documentation about the Firefox OS platform

+
+
+ Gaia
+
+ Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.
+
+ Gonk
+
+ Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates.
+
+ Gecko
+
+ Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.
+
+  Security
+
+ Documentation about security in Firefox OS; this includes topics about security devices from every perspective: for app developers, device integrators, and so forth.
+
+ Feature support chart
+
+ A chart of which features are available in which types of Firefox OS builds.
+
+ Firefox OS architecture overview
+
+ An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.
+
+ Firefox OS apps architecture
+
+ An overview of the application model on Firefox OS.
+
+ Firefox OS settings list
+
+ A list of common setting names that can be used with the Settings API.
+
+

View All...

+ 		+

Getting help from the community

+

If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!

+
    +
  • Consult the Boot to Gecko project forum: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}
    • +
+
    +
  • Ask your question on Mozilla's Boot to Gecko IRC channel: #b2g
    • +
+

Don't forget about the netiquette...

+
+ + +

Resources

+ +
+

 

diff --git a/files/it/archive/b2g_os/platform/settings_list/index.html b/files/it/archive/b2g_os/platform/settings_list/index.html new file mode 100644 index 0000000000..8e8f22eb2d --- /dev/null +++ b/files/it/archive/b2g_os/platform/settings_list/index.html @@ -0,0 +1,719 @@ +--- +title: Lista delle impostazioni di Firefox OS +slug: Archive/B2G_OS/Platform/Settings_list +tags: + - API + - Firefox OS + - Reference + - Settings + - WebAPI +translation_of: Archive/B2G_OS/Platform/Settings_list +--- +
+

Firefox OS offre diverse opzioni per configurare il dispositivo e le sue caratteristiche predefinite. Queste possono essere utilizzate da app certificate usando le API Settings.

+
+ +
+

Note: A causa delle diverse caratteristiche dei dispositivi e delle versioni di Firefox OS, questa lista potrebbe non corrispondere perfettamente alle funzioni effettivamente disponibili su ciascun dispositivo.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome dell'impostazioneTipoValore di default
accessibility.invertBooleanfalse
accessibility.screenreaderBooleanfalse
alarm.enabledBooleanfalse
app.reportCrashesStringask
app.update.intervalNumber86400
audio.volume.alarmNumber15
audio.volume.bt_scoNumber15
audio.volume.dtmfNumber15
audio.volume.contentNumber15
audio.volume.notificationNumber15
audio.volume.ttsNumber15
audio.volume.telephonyNumber5
bluetooth.enabledBooleanfalse
bluetooth.debugging.enabledBooleanfalse
camera.shutter.enabledBooleantrue
clear.remote-windows.dataBooleanfalse
debug.grid.enabledBooleanfalse
debug.oop.disabledBooleanfalse
debug.fps.enabledBooleanfalse
debug.ttl.enabledBooleanfalse
debug.log-animations.enabledBooleanfalse
debug.paint-flashing.enabledBooleanfalse
debug.peformancedata.sharedBooleanfalse
deviceinfo.firmware_revisionString 
deviceinfo.hardwareString 
deviceinfo.osString 
deviceinfo.platform_build_idString 
deviceinfo.platform_versionString 
deviceinfo.softwareString 
deviceinfo.update_channelString 
gaia.system.checkForUpdatesBooleanfalse
general.useragent.updates.enabledBooleantrue
geolocation.enabledBooleantrue
keyboard.layouts.englishBooleantrue
keyboard.layouts.dvorakBooleanfalse
keyboard.layouts.otherlatinsBooleanfalse
keyboard.layouts.cyrillicBooleanfalse
keyboard.layouts.arabicBooleanfalse
keyboard.layouts.hebrewBooleanfalse
keyboard.layouts.zhuyinBooleanfalse
keyboard.layouts.pinyinBooleanfalse
keyboard.layouts.greekBooleanfalse
keyboard.layouts.japaneseBooleanfalse
keyboard.layouts.polishBooleanfalse
keyboard.layouts.portugueseBooleanfalse
keyboard.layouts.spanishBooleanfalse
keyboard.vibrationBooleanfalse
keyboard.clicksoundBooleanfalse
keyboard.autocorrectBooleantrue
keyboard.wordsuggestionBooleantrue
keyboard.currentStringen
language.currentStringen-US
lockscreen.passcode-lock.codeString0000
lockscreen.passcode-lock.timeoutNumber0
lockscreen.passcode-lock.enabledBooleanfalse
lockscreen.notifications-preview.enabledBooleantrue
lockscreen.enabledBooleantrue
lockscreen.lockedBooleantrue
lockscreen.unlock-sound.enabledBooleanfalse
mail.sent-sound.enabledBooleantrue
message.sent-sound.enabledBooleantrue
operatorvariant.mccString0
operatorvariant.mncString0
ril.iccInfo.mbdnString 
ril.sms.strict7BitEncoding.enabledBooleanfalse
ril.cellbroadcast.searchlistString 
debug.console.enabledBooleanfalse
phone.ring.keypadBooleantrue
powersave.enabledBooleanfalse
powersave.thresholdNumber0
privacy.donottrackheader.enabledBooleanfalse
ril.callwaiting.enabled  
ril.cf.enabledBooleanfalse
ril.data.enabledBooleanfalse
ril.data.apnString 
ril.data.carrierString 
ril.data.defaultServiceIdNumber0
ril.data.passwdString 
ril.data.httpProxyHostString 
ril.data.httpProxyPortNumber0
ril.data.mmscString 
ril.data.mmsproxyString 
ril.data.mmsportNumber0
ril.data.roaming_enabledBooleanfalse
ril.data.userString 
ril.mms.apnString 
ril.mms.carrierString 
ril.mms.httpProxyHostString 
ril.mms.httpProxyPortString 
ril.mms.mmscString 
ril.mms.mmsportString 
ril.mms.mmsproxyString 
ril.mms.passwdString 
ril.mms.userString 
ril.radio.preferredNetworkTypeString 
ril.radio.disabledBooleanfalse
ril.supl.apnString 
ril.supl.carrierString 
ril.supl.httpProxyHostString 
ril.supl.httpProxyPortString 
ril.supl.passwdString 
ril.supl.userString 
ril.sms.strict7BitEncoding.enabledBooleanfalse
ril.sms.defaultServiceIdNumber0
ril.telephony.defaultServiceIdNumber0
ring.enabledBooleantrue
screen.automatic-brightnessBooleantrue
screen.brightnessNumber1
screen.timeoutNumber60
tethering.usb.enabledBooleanfalse
tethering.usb.ipString192.168.0.1
tethering.usb.prefixString24
tethering.usb.dhcpserver.startipString192.168.0.10
tethering.usb.dhcpserver.endipString192.168.0.30
tethering.wifi.enabledBooleanfalse
tethering.wifi.ipString192.168.1.1
tethering.wifi.prefixString24
tethering.wifi.dhcpserver.startipString192.168.1.10
tethering.wifi.dhcpserver.endipString192.168.1.30
tethering.wifi.ssidStringFirefoxHotspot
tethering.wifi.security.typeStringopen
tethering.wifi.security.passwordString1234567890
tethering.wifi.connectedClientsNumber0
tethering.usb.connectedClientsNumber0
time.nitz.automatic-update.enabledBooleantrue
time.timezone  
ums.enabledBooleanfalse
ums.modeNumber0
vibration.enabledBooleantrue
wifi.enabledBooleantrue
wifi.screen_off_timeoutNumber600000
wifi.disabled_by_wakelockBooleanfalse
wifi.notificationBooleanfalse
wifi.connect_via_settingsBooleanfalse
icc.displayTextTimeoutNumber40000
icc.inputTextTimeoutNumber40000
+ +

Vedi anche

+ + diff --git a/files/it/archive/b2g_os/preparazione_della_tua_prima_build_di_b2g/index.html b/files/it/archive/b2g_os/preparazione_della_tua_prima_build_di_b2g/index.html new file mode 100644 index 0000000000..1190d4a7b9 --- /dev/null +++ b/files/it/archive/b2g_os/preparazione_della_tua_prima_build_di_b2g/index.html @@ -0,0 +1,132 @@ +--- +title: Preparazione della tua prima build di B2G +slug: Archive/B2G_OS/Preparazione_della_tua_prima_build_di_B2G +translation_of: Archive/B2G_OS/Preparing_for_your_first_B2G_build +--- +
+

Before you can build B2G, you need to clone the repository and configure your build tree. This article explains how to do that. 

+
+

Depending on your internet connection, the configuration step takes a number of hours to download the files necessary to build FirefoxOS (with a mediocre 150 kBps connection, downloading gigabytes of Android repositories can take tens of hours).  Waiting is not as fun as doing, so after you have read through this page and have kicked off the configure script, consider using the time to set up and try out the Firefox OS simulator, begin familiarizing yourself with Documentation for app developers including Designing and Building an App, or familiarize yourself with the information on upcoming steps.

+
+

You might want to have a side task prepared, or a friend available to go for a coffee with, while you are running the B2G config and build steps. They can take a bit of time.

+
+

Clone B2G repository

+

The first step, before you can start your first build, is to clone the B2G repository. This will not fetch everything! Instead, it will fetch the B2G build system and setup utilities. Most of the actual B2G code is in the main Mozilla Mercurial repository.

+

To clone the repository, use git:

+
git clone git://github.com/mozilla-b2g/B2G.git
+

After cloning (which should only take a minute with a fast connection), cd into the B2G directory:

+
cd B2G
+
+

Configuring B2G for your device

+
+ Important: Remember that only devices running Android 4.0.4 (Ice Cream Sandwich), 4.3 (Jelly Bean) and 4.4 (KitKat) and platforms based around it are supported (current Firefox OS devices are). Please check that your phone is actually running one of those supported versions, otherwise this step will most likely fail since some drivers are pulled from non-Nexus devices. Also, if you have to flash your device with the matching stock release. Keep in mind that some USB hubs don't work well with flashing tools, so you may have to connect your device to a built-in USB port.
+
+ Important: if you are doing the build on Ubuntu 12.10+ or Fedora, you will need to specify GCC 4.6 as the default host compiler after having retrieved the B2G sources, for the process to work (these distros use GCC 4.7 by default). Read Changing the default host compiler to find out how to do it.
+
+ Note: please read all the instructions below before running any of the build process commands, to make sure you are doing the right thing for you!
+

Once you've retrieved the core B2G build system, you need to configure it for the device on which you plan to install it. To get a list of supported devices, you can use the config.sh utility — run the following command from within the B2G directory:

+
./config.sh
+
+

This will display a list of the supported devices, like so:

+
Usage: ./config.sh [-cdflnq] (device name)
+Flags are passed through to |./repo sync|.
+
+Valid devices to configure are:
+- galaxy-s2
+- galaxy-nexus
+- nexus-4
+- nexus-s
+- nexus-s-4g
+- flo "(Nexus 7 2013)"
+- flame
+- otoro
+- unagi
+- inari
+- keon
+- peak
+- leo
+- hamachi
+- helix
+- wasabi
+- fugu
+- tara
+- pandaboard
+- emulator
+- emulator-jb
+- emulator-kk
+- emulator-x86
+- emulator-x86-jb
+- emulator-x86-kk
+
+

If your device isn't listed, you should stop right now and either help port B2G to your device or wait until someone else does it. We'd prefer it if you help out!

+
+ Note: You can find the device name of your phone on the Firefox OS Phones page.
+
+ Note: Configuring and building B2G for Keon on a Mac DOESN'T WORK. You'll need to use Linux when building for this device.
+
+ Note: If for any reason you want to build against a specific version of Gecko, see {{anch("Building against a custom Gecko")}} before you proceed. If you want to build a branch other than the the default for your device (for example, to build a specific version of B2G), see {{anch("Building a branch")}}. Note: the default branch varies by device and is not necessarily trunk.
+

This would be a good time for a coffee break, since at this point, you'll be doing your first pull of all the code needed to build Boot to Gecko. Running the device config step as indicated below can take a long time; you may stop it with Ctrl-C and restart it at a later time. If you think some part of the process may have been terminated without completing, run './repo sync' to repair any possible problems.

+

Configuring the B2G build for a mobile device

+

At this point, connect your device if it is not already connected; the configure process will need to access it.

+

If your device was listed in the results shown above, you can start the configure process by running config.sh again, this time specifying your device's name. For example, to build for the Samsung Google Nexus S, you would type:

+
./config.sh nexus-s
+
+
+ Note: If you get an error message like fatal: manifest 'nexus-s.xml' not available, chances are that you simply have to specify the branch you want to use. See {{anch("Building a branch")}} for details.
+
+ Note: If the config step fails with an error message like error: manifest required for this command -- please run init, then changes are that the manifest file for the repo (located at B2G/.repo/manifest.xml) wasn't created successfully. You should try running config.sh again. If you are doing this for a new device you could add it to config.sh and then hand it your local manifest file like so:
+ ./config.sh <device> -m path/to/manifest.
+

Near the start of the configuration you might need to set the option for color usage, then after this the process continues. You can just select 'y' here, as you probably want a color build.

+

Configuring a build using a system backup

+

If your phone no longer has Android on it, and your B2G tree doesn't have the binary blobs in it, but you wisely made a backup of the /system partition, you can perform the build on the system backup like this:

+
ANDROIDFS_DIR=<absolute path to parent dir of system dir> ./config.sh <target>
+
+

The build system will default to looking in someplace like backup-inari/system (depending on the device configuration); if you place the files in the expected place you won't need to specify the directory.

+

Note that if your phone always had Firefox OS on it to begin with and never ran Android, it's still fine to pull the /system partition per the above directions — this will give you the right files.

+

Configuring the B2G build for an emulator

+

If you want to build an emulator rather than on a real phone, you can specify emulator to get the ARM device emulator, or emulator-x86 to build the x86 emulator. The latter is faster but not as accurate a representation of an actual mobile device and not as well supported; using it is not advised.

+

So, to build the ARM emulator, you would use the following command:

+
./config.sh emulator
+
+

Near the start of the configuration you might need to set the option for color usage, then after this the process continues. You can just select 'y' here, as you probabaly want a color build.

+

By this point you should be ready to start the build, unless you need any of the more advanced information detailed below.

+

Beware that building for the emulator may fail on 64-bit Linux.

+
+ Note: Developers on Mac OS X 10.9 or above have to switch to emulator-jb or emulator-kk instead, because AOSP ICS based emulator can't be built on Mac OS X 10.9. See Requirements for Mac OS X for further information.
+

Building against a custom Gecko

+

There may be times that you want or need to build Boot to Gecko based on a different version of Gecko than the one that's used by default (as specified in the manifest). You can do so by editing the file .userconfig. For example, if you want to build against mozilla-central:

+
export GECKO_PATH=/path/to/mozilla-central
+export GECKO_OBJDIR=/path/to/mozilla-central/objdir-gonk
+
+
+

Note: if building against a custom Gecko in Mac OS X, the mozilla-central directory must be in a case sensitive file system.
+  

+
+

Note that you can do this either before you pull the repository (i.e. before the config.sh step above) or at any later point.  You can also keep multiple builds (with debugging on or not, etc) by having multiple userconfig files (with different settings--each needs a different OBJDIR, of course) and making .userconfig a symlink that points to whichever config you want to build at the moment.

+

For more information, read Changing the Gecko source tree.

+

Building a branch

+

If you want to build for a branch other than the default branch (note: the default branch may not be "master"!), you will need to prefix your call to config.sh with a branch name, like this:

+
BRANCH=branch-name ./config.sh <device>
+

The branch names are pretty logical, and largely follow the names of the products/versions, so v1-train, v1.0.0, v1.0.1, v1.1, v1.1.0hd, v1.2, v1.3, v1.4  and so on into the future. As an example, to build B2G Firefox 1.2, for the Arm emulator, you'd enter

+
BRANCH=v1.2 ./config.sh emulator
+

If you have run config.sh already, you can see the names of the branches, by going to B2G/.repo/manifests and doing "git branch -a" (this isn't populated unti then.) The branch name is given as the final token on the line, e.g. "v1-train" or "master":

+
  remotes/origin/master
+  remotes/origin/v1-train
+  remotes/origin/v1.0.0
+  remotes/origin/v1.0.1
+

See Customization with the .userconfig file for additional customizations you can do.

+

Copying your B2G tree to a new machine

+

If you've previously set up the B2G tree and then gotten a new computer (lucky you!), you'll find your life will be much easier if you simply migrate your entire B2G tree from your old computer to your new one, rather than setting the whole thing up again. To do that, mount your old computer's drive onto your new computer, then do this:

+
rsync -a source/ dest/
+
+

Where source is the full path (including the trailing slash) of the source tree, and dest is where you want to put it (the trailing slash is also important!).

+
+ Note: If you copy the files from a computer with another platform ensure to run './build.sh clean' before you start the build process. If you don't do this you might encounter compilation issues.
+

If you do this, you can skip all of the rest of this article and move right on to building.

+

Updating your B2G tree

+

When the repository is updated to a newer version of B2G, you'll want to update your B2G tree. To do this, you can run the following commands:

+
git fetch origin
+git checkout origin/master
+

You can check that these worked correctly by running:

+
git show HEAD
+

and checking that the commit shown matches the latest commit shown at: https://github.com/mozilla-b2g/B2G/commits/master

diff --git a/files/it/archive/b2g_os/prerequisiti_firefox_os_build/index.html b/files/it/archive/b2g_os/prerequisiti_firefox_os_build/index.html new file mode 100644 index 0000000000..b2b35ee9df --- /dev/null +++ b/files/it/archive/b2g_os/prerequisiti_firefox_os_build/index.html @@ -0,0 +1,455 @@ +--- +title: Prerequisiti Firefox OS build +slug: Archive/B2G_OS/Prerequisiti_Firefox_OS_build +translation_of: Archive/B2G_OS/B2G_OS_build_prerequisites +--- +
+

Prima di ottnere il codice per compilare Firefox OS, ti serve un sistema di build ben configurato — questa pagina ti mostra come fare. Attualmente, è possibile compilare su sistemi Linux e OS X a 64-bit.

+
+
+

Nota: Per compilare Firefox OS su un telefono, comincia tenendo il tuo telefono DISCONNESSO dal computer. Ti diremo quando collegarlo.

+
+

Avere un dispositivo/emulatore compatibile

+

Hai bisogno di un dispositivo compatibile, su cui compilare, oppure utilizzando un emulatore. Difficilmente supportiamo alcuni telefoni, alcuni necessitano di molte variazioni. Al momento supportiamo delle variazioni specifiche e alcuni dispositivi sono costantemente supportati.

+
+

Note:  Il codice sorgente B2G della Mozilla è l'implementazione di referenza di B2G, ma i rivenditori di telefoni sono liberi di aggiungere ulteriori patch o apportare modifiche. Quando compri l'Alcatel One Touch per esempio, questo contiene la versione del rivenditore. Ciò non significa che faccia differenza per le applicazioni installate, ma può esserlo a livello di piattaforma. Il porting sul Nexus 4 è mantenuto direttamente da Mozilla; è evidentemente molto più semplice lavorare sulla nostra versione di Gecko, rispetto alle altre.

+
+

Set 1

+

Il Set numero 1 rappresenta l'obbiettivo principale di sviluppo ed è tipicamente il primo a ricevere bug-fix e funzionalità.

+
+
+ Keon
+
+ Il Keon è il Geeksphone Keon , fù uno dei primi telefoni per sviluppatori.Nota che le build per questo telefono sono rilasciate dalla Geeksphone.
+
+ Inari
+
+ Inari è un'altro dispositivo per testare. Usa qusta configurazione per build-are sui dispositivi ZTE Open.Attenzione: le build più nuove di Firefox OS potrebbero avere problemi  con il boot sulla partizione di default dei ZTE Open.
+
+ Flame
+
+ Il Flame è il nuovo telefono standard di referenza della Mozilla;doversti usare la configurazione del Flame se stai build-ando per il ZTE Open C,entrambi sono basati sul sistema Android Jellybean.
+
+ Emulatore (ARM e x86)
+
+ Ci sono due emulatori disponibili: uno emula il codice ARM ,l'altro esegue tutto in codice x86. Impara di più suill'installazione ed utilizzo degli emulatori.
+
+ Nota bene che non dovresti utilizzare l'emulatore x86 — è difficile da installare e non è ben supportato.
+
+ Desktop
+
+ Puoi anche build-are una versione di Firefox OS per desktop; questa esegue  Gecko in applicazione XULRunner , e successivamente usi l'esperienza utente di  Gaia ,dentro.
+
+

Puoi ,ovviamente , build-are il client desktop oppure uno degli emulatori senza un telefono.

+

Set 2

+

I dispositivi del Set numero 2,sono funzionanti nella norma e molti sviluppatori (in particolare i sviluppatori di app) li utilizzano ,di conseguenza tendono ad accogliere i cambiamenti in secondo piano.

+
+
+ Samsung Nexus S
+
+ I modelli del Nexus S,di cui si è a conoscenza del loro funzionamento ,sono il GT-I9020A e il GTI9023.Gli altri potrebbero funzionare.
+
+ Samsung Nexus S 4G
+
+ Il SPH-D720 è supprtato come dispositivo del Set 2.
+
+

Set 3

+

Firefox Os può essere preparato per questi dispositivi ,ma non hanno funzionato perfettamente su regolari basi degli sviluppatori principali. La loro affidabilità e le loro funzionalità potreggo avere delle latenze,facilemnte avvertibili,più dei dispositivi del Set 1 e del Set 2 .

+
+
+ Samsung Galaxy S2
+
+ L'unico modello cu sui funziona è il i9100; nessun'altra versione funziona officialmente. (Il i9100P potrebbe funzionare, dato che l'unica cosa che differisce è l'aggiunta di un chip NFC)
+
+ Samsung Galaxy Nexus
+
+ Non siamo a conoscenza di eventuali varianti non compatibili.
+
+ Nexus 4
+
+ Alcuni utenti sull'IRC lo hanno testato con successo. Potrebbe o no,richiedere il re-flash di Android 4.3 se prima aveva Android 4.4 ( Android build disponibili da Google )
+
+ Nexus 5
+
+ Alcuni utenti sull'IRC lo hanno testato con successo.
+
+ Tara
+
+ Tara è un'altro dipsositivo per testare.Il Manifest del  Tara è presente solo nel branch master. Lo script/comando pre ottenere il codice è  "BRANCH=master ./config.sh tara".
+
+ Unagi
+
+ Unagi è un dispositivo utilizzato per il test e svilupo della piattaforma come smartphone di fascia basso-media. Molti degli sviluppatori di Firefox OS ,lavorano sul Unagi.
+
+ Pandaboard
+
+ La Pandaboard è una board di sviluppo basata sull'architettura OMAP 4,utilizzato per sviluppare su piattaforme mobili.
+
+
+ Importante: Solo i dispositivi con almeno Android 4 sono supportati.Se iltuo dispositivo è presente nella lista ma ha un versione di Android più vecchia, serve prima aggiornarlo prima di fare qualsiasi cosa.
+
+

Appunto: I dispositivi dei Set 2 e Set 3 ,hanno il tasto Home software anzichè hardware.

+

Tutti i dispositivi del Set 1 hanno un pulsante Home hardware che permette all'utente di tornare alla schermata di Home. Molti dispositivi basati su Android ICS,hanno i pulsanti sullo schermo  per la navigzione. Ora abbiamo un pulsante virtuale per i dispositivi senza pulsante hardware.Se non è già attivo automaticamente ,vai su Impostazioni,poi su  Opzioni Sviluppatore ,e dopo  Abilita il tasto home .

+

Nella versione 1.4 c'è anche un'opzione per "Home gesture abilitate",attivandole verrà rimosso il pulsante sullo schermo in favore dello swipe dal basso verso l'alto per tornare alla home.

+
+

Requisiti per GNU/Linux

+

Per fare la build su linux, avrai bisogno:

+ +

Questo è molto più dei reali requisiti minimi,ma ogni tanto il build-ing fallisce solo per la mancanza di risosrse. Un tipico errore in questo caso è "arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)".

+

Avrai bisogno anche dei seguenti strumenti installati

+ +

Problemi della build per emulatore

+

Se stai facendo una build per emulatore , you need to pay attention to these issues:

+
+

First, note that you shouldn't use the x86 emulator — it is hard to install and not well supported.

+
+

Next, the build-system for the emulator builds both 32bit and 64bit versions of the emulator. As the emulator depends on OpenGL, this means that you need to have both 32bit and 64bit versions of OpenGL libraries installed on your system. See the discussion in bug 897727.

+

There are two ways that you can solve this problem:

+ +

If your linux distro has multilib packages for OpenGL libraries, you can attempt installing them. You might then have to manually create some symlinks.

+

For example, here is the situation on Ubuntu 12.04 LTS x86-64. On this distribution, the libgl1-mesa-dev package cannot be installed simultaneously in x86-64 and i386 versions, but you can have the following combination of packages simultaneously installed:

+
sudo apt-get install libgl1-mesa-dev libglapi-mesa:i386 libgl1-mesa-glx:i386
+

After having run this command, you will still have to manually create some symlinks for the emulator build to succeed:

+
sudo ln -s /usr/lib/i386-linux-gnu/libX11.so.6 /usr/lib/i386-linux-gnu/libX11.so
+sudo ln -s /usr/lib/i386-linux-gnu/mesa/libGL.so.1 /usr/lib/i386-linux-gnu/libGL.so
+

Solution #2: just patch the emulator so it only builds 64bit

+

Just apply this patch to the sdk/ git repository under the B2G repo. This will cause the B2G emulator to only attempt to build the 64bit emulator if you're on a 64bit system, thus avoiding any multilib issues. The 32bit emulator is unused anyway on a 64bit system. This is the simplest solution, until this patch eventually bit-rots.

+

64 bit requirement installation

+

This section lists the commands you need to run in different Linux distributions to install all the requirements for building Firefox OS.

+

Ubuntu 12.04 / Linux Mint 13 / Debian 6

+

Run the following command in Terminal:

+
sudo apt-get update
+sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip
+

If you'll build for the "Flame" reference device or Nexus 5, run the following command in Terminal:

+
sudo apt-get install libxml2-utils
+

And see the above comments about emulator build issues!

+

Ubuntu 12.10

+

Run the following command in Terminal:

+
sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip
+

In addition to the emulator build issues discussed above, the compiler will default to gcc-4.7, which will fail to build with an error along the following lines:

+

"KeyedVector.h:193:31: error: indexOfKey was not declared in this scope, and no declarations were found by argument-dependent lookup at the point of instantiation"

+

To fix this, you will need to specify GCC 4.6 as the default host compiler after having retrieved the B2G sources: Read Changing the default host compiler to find out how to do it.

+

In a fresh Ubuntu 12.10 install, you'll get an error about unmet dependencies for ia32-libs. The following commands fix it:

+
sudo dpkg --add-architecture i386
+sudo apt-get update
+sudo apt-get install ia32-libs
+

Ubuntu 13.04

+

Run the following command in Terminal:

+
sudo apt-get install --no-install-recommends autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev zlib1g:amd64 zlib1g-dev:amd64 zlib1g:i386 zlib1g-dev:i386 libgl1-mesa-dev libx11-dev make zip
+

In addition to the emulator build issues discussed above, the compiler will default to gcc-4.7, which will fail to build with an error along the following lines:

+

"KeyedVector.h:193:31: error: indexOfKey was not declared in this scope, and no declarations were found by argument-dependent lookup at the point of instantiation"

+

To fix this, you will need to specify GCC 4.6 as the default host compiler after having retrieved the B2G sources: Read Changing the default host compiler to find out how to do it.

+

Ubuntu 13.10

+

With Ubuntu 13.10, multi-arch packages are now the main way to support multiple architectures (e.g. 32-bit on a 64-bit install).  You must tell your Ubuntu system that you want to support 32-bit packages as well:
+  

+
sudo dpkg --add-architecture i386
+sudo apt-get update
+

Once you've completed that, then you can install the necessary packages:

+
sudo apt-get install --no-install-recommends autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git lib32ncurses5-dev lib32z1-dev zlib1g:amd64 zlib1g-dev:amd64 zlib1g:i386 zlib1g-dev:i386 libgl1-mesa-dev libx11-dev make zip libxml2-utils
+
+sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.6 1
+
+sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.8 2
+
+sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.6 1
+
+sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.8 2
+
+sudo update-alternatives --set gcc "/usr/bin/gcc-4.6"
+
+sudo update-alternatives --set g++ "/usr/bin/g++-4.6"
+


+ Fedora 17/18/19/20

+

Run the following command in Terminal:

+
sudo yum install autoconf213 bison bzip2 ccache curl flex gawk gcc-c++ git glibc-devel glibc-static libstdc++-static libX11-devel make mesa-libGL-devel ncurses-devel patch zlib-devel ncurses-devel.i686 readline-devel.i686 zlib-devel.i686 libX11-devel.i686 mesa-libGL-devel.i686 glibc-devel.i686 libstdc++.i686 libXrandr.i686 zip perl-Digest-SHA wget
+

In addition to the above you will need GCC 4.6.x in order to compile the project:

+ +

Download the right version for your Fedora installation, then install it to /opt, with the following command on Fedora 17/18:

+
curl -O http://people.mozilla.org/~gsvelto/gcc-4.6.4-fc18.tar.xz
+sudo tar -x -a -C /opt -f gcc-4.6.4-fc18.tar.xz
+
+

And with the following command for Fedora 19/20:

+
curl -O http://people.mozilla.org/~gsvelto/gcc-4.6.4-fc19.tar.xz
+sudo tar -x -a -C /opt -f gcc-4.6.4-fc19.tar.xz
+
+

You will need to specify GCC 4.6.x as the default host compiler after having retrieved the B2G sources: Read Changing the default host compiler to find out how to do it.

+

If build fails with the compiler complaining about not finding libmpc.so.2, install the package compat-libmpc

+

Arch Linux

+

Run the following command in Terminal:

+
sudo pacman -S --needed alsa-lib autoconf2.13 bison ccache curl firefox flex gcc-multilib git gperf libnotify libxt libx11 mesa multilib-devel wget wireless_tools yasm zip lib32-mesa lib32-mesa-libgl lib32-ncurses lib32-readline lib32-zlib
+

To install the lib32-* packages you need to have the multilib repository enabled.

+

B2G can only be compiled with gcc4.6.4, and because Arch Linux always has bleeding edge software you will need to install gcc46-multilib from AUR. Note that you will have to edit the PKGBUILD and add staticlibs to the options array, or gcc will be unable to compile B2G and give you a cannot find -lgcc error when compiling. You will also need to add the following to your .userconfig file:

+
export CC=gcc-4.6.4
+export CXX=g++-4.6.4
+

By default, Arch Linux uses Python3. You'll have to force it to use the old python2. You can do that by linking the python2 executable to python but this is discouraged and considered error-prone. This will also break python 3 if it is installed on your system. A better way is to use virtualenv/virtualenvwrapper:

+
sudo pacman -S python-virtualenvwrapper
+source /usr/bin/virtualenvwrapper.sh
+mkvirtualenv -p `which python2` firefoxos
+workon firefoxos
+
+

Android will complain that you need make 3.81 or make 3.82 instead of 4.0. You can download make 3.81 from AUR.  This will install the make-3.81 binary on your path, you need to create a symlink named make to a location earlier in the PATH variable for the build to use the correct version.

+
mkdir -p ~/bin
+ln -s `which make-3.81` ~/bin/make
+export PATH=~/bin:$PATH
+
+

Android also needs the Java6 SDK and Arch only has Java7.  Unfortunately the aur build is broken, but you can still download the Java 6 SDK and install it manually.  You will then need to put it in your path.

+
cp ~/Downloads/jdk-6u45-linux-x64.bin /opt
+su
+cd /opt
+chmod +x jdk-6u45-linux-x64.bin
+./jdk-6u45-linux-x64.bin
+exit
+ln -s /opt/jdk1.6.0_45/bin/java ~/bin/java
+
+
+

Gentoo Linux

+
Installing ccache
+

You will need to install ccache, a tool for caching partial builds.

+
# emerge -av ccache
+
+

Because ccache is known to frequently cause support issues, Gentoo encourages you to use it explicitly and sparingly.

+

To enable the required use of ccache, on the subsequent step of this guide where the ./build.sh script is called, Gentoo users should instead run the command with an explicitly extended path, ie.

+
PATH=/usr/lib64/ccache/bin:$PATH ./build.sh
+
+
Generating Partition Images
+

If you are building B2G for actual physical hardware, then you may at some point also wish to generate some partition images for upload to your device. (For example, to restore backed up files to the device via the fastboot utility)

+

The filesystem image format used in this case is YAFFS2 (Yet Another Filesystem 2). Gentoo has support for the very latest (ie. git HEAD) yaffs2-utils userland package in portage. (Note: You will also need kernel patches if you want to mount YAFFS2 images, but this is not really required since you can deconstruct and rebuild them instead.)

+
# emerge --autounmask-write yaffs2-utils; etc-update; emerge -av yaffs2-utils
+

In order to generate such an image, simply change to the parent directory of the partition filesystem tree you wish to package, and issue a command like this:

+
mkyaffs2image system/ system.img
+

Requirements for Mac OS X

+

To build Firefox OS on Mac OS X, there are a number of prequisite steps you need to follow, which are detailed below. We also discuss common errors you might come across in particular situations, and solutions to those.

+
+

Note: Configuring and Building B2G for Keon WON'T WORK on a Mac. You'll need to use Linux to build B2G for this device.

+
+

Version Compatibility

+

XCode 4.2 or older are not compatible with Mac OS X 10.9 (a.k.a. "Mavericks"), so you may be surprised to find build failures of Firefox OS. Basically you can no longer build ICS emulator on Mac OS X 10.9 or above, and flatfish fails to build with XCode 5.x series.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Version compatibility of Mac OS X 10.9.x
 emulator (ICS)flatfish (JB-4.2)emulator-jb (JB-4.3)emulator-kk (KitKat-4.4)
XCode 4.3.3XXXX
XCode 4.4.1XO[1]OO
XCode 4.5.2XO[1]OO
XCode 4.6.3XO[1]OO
XCode 5.0.2XXOO
XCode 5.1.1XXOO
+
    +
  1. You must have environment variable BUILD_MAC_SDK_EXPERIMENTAL=1 exported to build flatfish.
    2. +
+

Install XCode Command Line Utilities

+

You need to install Xcode's Command Line Utilities. You can download just the Command Line Utilities from Apple's developer downloads page for your particular version of OS X, however if you would like the entire Xcode suite of applications, you can install Xcode through the Mac App Store. 

+

Xcode 4.3.1 (OS X 10.7 "Lion") and other newer versions such as 4.4.1+ (that is, Mac OS X 10.8 "Mountain Lion"), won't necessarily include the required Command Line Utilities. When you install Xcode, make sure to go into Preferences, then the Downloads panel, and install the Command Line Utilities. In addition, make sure you have at least 20 GB of free disk space.

+

Screenshot of Xcode Downloads Command Line Tools

+
+

Note: The Firefox OS emulator requires a Core 2 Duo processor or later; that is, a system that is compatible with Mac OS X 10.7 "Lion". You do not actually have to be running Lion, you just have to be compatible with it. You can, however, build any Firefox OS build on many older Macs.

+
+
+

Note: XCode 4.2.x or older is not compatible with Mac OS X 10.9 or above, and XCode 4.3.x has no platform SDK for 10.8. Please install a newer version. If you're also working on flatfish, please make sure any of XCode 4.4, 4.5, and 4.6 is available.

+
+

Run Firefox OS Mac Bootstrap

+

Next, open a terminal and run the following command:

+
curl -fsSL https://raw.github.com/mozilla-b2g/B2G/master/scripts/bootstrap-mac.sh | bash
+

This will pull and run a bootstrap script that makes sure you have all the prerequisites met to build the emulator. It will also prompt you for permission to install anything you're missing, and provide warnings and suggested fixes to problems. The script will check for and install the following items:

+ +

Xcode wrangling

+

If you have already upgraded to Xcode 4.4+ and get the message that Xcode is outdated, check the Xcode path with:

+
xcode-select -print-path
+

If it still points to /Developer you can update the path with:

+
sudo xcode-select -switch /Applications/Xcode.app
+

Making the Mac OS X 10.6 SDK available

+

You also need to have the Mac OS X 10.6 SDK available. The SDK needs to be available at

+
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/
+

If it cannot be found there you will need to extract and copy it from Xcode 4.3. To do this:

+
    +
  1. Download the XCode 4.3 .dmg file from the Apple Developer portal (you'll need an Apple Developer account).
    2. +
  2. Download the utility Pacifist and use it to extract the 10.6 SDK from the XCode 4.3 .dmg file. Click on the "Extract Package" button, find the SDK by searching for 10.6 in the search box, then Ctrl + click on the MacOSX10.6.sdk directory and Extract it to a suitable location.
    3. +
  3. Add a symlink from the 10.6 SDK location to the /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/ directory. For example, if you put the 10.6 SDK on your desktop, the comment would be
    4. +
+
ln -s /Users/<yourusername>/Desktop/MacOSX10.6.sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/
+
+

Note: This is not necessary for Mac OS X 10.9 or above, because 10.6 SDK is for ICS and ICS doesn't supports Mac OS X 10.9.

+
+

Be aware of Mac file system case sensitivity

+

By default, Mac OS X ships with a case-insensitive file system.  This is problematic because the Linux kernel has a number of files with the same name, but different case.  For example, see the header files xt_CONNMARK.h and xt_connmark.h.  This results in a number of files appearing to be modified in /kernel after a fresh ./config.sh.

+

In many cases you can run the build just fine; for some platforms, however, you may encounter the following error:

+
ERROR: You have uncommited changes in kernel
+You may force overwriting these changes
+with |source build/envsetup.sh force|
+
+ERROR: Patching of kernel/ failed.
+

Please see bug 867259 for more discussion and possible fixes for this problem.

+

Alternatively, it will always be safest to build on a case sensitive file system.  The easiest way to do this is to create a separate, mountable disk image with case-sensitivity enabled.  You can do this using Apple's Disk Utility application or from the command line:

+
hdiutil create -volname 'firefoxos' -type SPARSE -fs 'Case-sensitive Journaled HFS+' -size 40g ~/firefoxos.sparseimage
+

Mount the drive with:

+
open ~/firefoxos.sparseimage
+

Change into the mounted drive with:

+
cd /Volumes/firefoxos/
+

You can then check out the code and compile from this location without worrying about case-sensitivity problems.

+

Mountain Lion homebrew gotcha

+
+
+ If you are on Mountain Lion and you receive an error during the installation of the dependencies via homebrew, such as:
+
+
+ 
clang: error: unable to execute command: Segmentation fault: 11
+ ... try reinstalling the dependency manually adding the --use-gcc flag, for example: + 
brew install mpfr --use-gcc
+
+

Follow Samsung Galaxy S2 extra steps

+

If you plan to build for the Samsung Galaxy S2, you will also need to install heimdall. See {{ anch("Installing heimdall") }} for details. This is not done for you by the bootstrap script!

+
+ Note: If you have installed the Samsung Kies tool, which is used to manage the contents of many Samsung phones, you will have to remove it before you can flash Firefox OS onto your device. You can use the standard application removal process on Windows; on Mac, the Kies install disk image has a utility to fully remove Kies from your system. Flashing will not work if you have Kies installed. If you forget to remove Kies, the build system will detect it and remind you to uninstall it. Note also that the uninstall tool does not correctly remove the folder ~/Library/Application Support/.FUS, and leaves a reference to a utility there in your user startup items list. You will want to remove these manually.
+

Fix libmpc dependency if broken

+

gcc 4.6 was built with libmpc 0.9; if you then use homebrew to update packages, libmpc gets updated to version 1.0, but homebrew doesn't rebuild gcc 4.6 after the library version changes. So you need to create a symlink to make things work again, like this:

+
cd /usr/local/lib/
+ln -s libmpc.3.dylib libmpc.2.dylib
+

Optional: Install HAX

+

Intel provides a special driver that lets the B2G emulator run its code natively on your Mac instead of being emulated, when you're using the x86 emulator. If you wish to use this, you can download and install it. It's not required, but it can improve emulation performance and stability.  

+

Before you install HAX you will need to install the Android SDK.

+

Install adb

+

The build process needs to pull binary blobs from the Android installation on the phone before building B2G (unless you're building the emulator, of course).  For this, you will need adb, the Android Debug Bridge. Our Installing ADB article explains how to get adb installed.

+
+

Note for future when you start to use adb: adb needs the phone's lock screen to be unlocked in order to see your phone (at least in later versions of Firefox OS). You'll probably want to disable the lock screen (we'll get to how later in the build instructions).

+
+

Install heimdall

+

Heimdall is a utility for flashing the Samsung Galaxy S2. It's used by the Boot to Gecko flash utility to replace the contents of the phone with Firefox OS, as well as to flash updated versions of B2G and Gaia onto the device. You'll need it if you want to install Firefox OS on a Galaxy S2; it is not needed for any other device. For other devices, we build and use the fastboot utility instead.

+
+ Note: Again, it's important to note that this is only required for installing Firefox OS on the Samsung Galaxy S2.
+

There are two ways to install heimdall:

+ +

Configure ccache

+

The B2G build process uses ccache. The default cache size for ccache is 1GB, but the B2G build easily saturates this; around 3GB is recommended. You can configure your cache by running the following command inside terminal:

+
$ ccache --max-size 3GB
+

For Linux: configure the udev rule for your phone

+
+

Note: This section is specific to Linux; Mac OS X has the necessary device permissions set up already.

+
+

Next, you need to confingure the udev rule for your phone,

+

You can get the USB vendor ID by running lsusb with your phone plugged in, but typically it's Google 18d1, Samsung 04e8, ZTE 19d2, Geeksphone/Qualcomm 05c6. Add this line in your /etc/udev/rules.d/android.rules file (replacing XXXX with the ID for your device):

+
SUBSYSTEM=="usb", ATTR{idVendor}=="XXXX", MODE="0666", GROUP="plugdev"
+

Take ZTE for example, the content in android.rules will be

+
SUBSYSTEM=="usb", ATTR{idVendor}=="19d2", MODE="0666", GROUP="plugdev"
+
+

If the file doesn't exist, create it. The rules.d directory is usually read only by default, so you may have to use chmod to make the directory writeable, or the file, or both.

+
+

Once you've saved the file, and closed it,  make the file readable:

+
sudo chmod a+r /etc/udev/rules.d/android.rules
+
+

Now that the udev rules have been updated, restart the udev daemon. For ubuntu:

+
sudo service udev restart
+

Finally, unplug and the USB cable but don't replug it in because we need to enable remote debugging on the phone first.

+

Enable remote debugging

+

Before you plug your phone back into your USB port, put it USB developer mode. This allows you to debug and flash the phone. To enable developer mode, on your phone enable Remote Debugging in Developer settings (this was called Developer mode on older versions.) Once the option is checked, remote debugging is enabled, and you are ready to go.

+

At this point, connect your phone to your computer via a USB cable (if you created the udev rule before, this will trigger udev to detect the phone and create the device node with the right permissions). Now you can check if you can list your device via the adb devices command (remember that adb can only see your phone when the lock screen is unlocked). If everything has worked ok, you should see an output similar to this (the following is for a Geeksphone Keon):

+
$ adb devices
+List of devices attached
+full_keon       device
+

If the device did not list as expect, check the file name and the script are all correct (see previous section), then restart the computer and retype the command again. Note also that if your device uses fastboot, the bootloader may identify itself with a different vendor ID than the one you see when the device boots normally.

+

Backup the phone system partition

+
+

Note: You have to do this before you build your device if you do not have an existing system backup, because some libraries will be referenced in build time. These library might be proprietary so we can't provide in our code base.

+
+

It is recommended that you back up the entire Android system partition on your phone.

+

You can use this copy of the binary blobs for Android in case you later delete your B2G tree. To do this, run:

+
adb pull /system <backup target dir>/system
+
+

 Depending on the phone, you may also need to pull the /data and/or /vendor directories:

+
adb pull /data <backup target dir>/data
+adb pull /vendor <backup target dir>/vendor
+
+

If the pull commands fail with an "insufficient permission" message, try the following:

+ +

On to the next step

+
+

At this point, you should be ready to fetch the Firefox OS code!

+
diff --git a/files/it/archive/b2g_os/quickstart/app_tools/index.html b/files/it/archive/b2g_os/quickstart/app_tools/index.html new file mode 100644 index 0000000000..5d8657ae2a --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/app_tools/index.html @@ -0,0 +1,16 @@ +--- +title: Strumenti di sviluppo per le app +slug: Archive/B2G_OS/Quickstart/App_tools +translation_of: Archive/B2G_OS/Quickstart/App_tools +--- +
+

Cosa si usa per sviluppare le App Open Web? La risposta è "Gli stessi che si utilizzano abitualmente quando si sviluppa per il Web". La seguente è una lista di strumenti e risorse per aiutarti a sviluppare le tue prime App Open Web. Possono essere facilmente integrati nel tuo metodo di sviluppo web, se ne hai uno, o puoi creare un nuovo flusso di lavoro basandoti su di essi.

+
+

Test di validazione dell'app

+

La tua app è pronta per Firefox Marketplace? Il Test di validazione dell'app analizzerà il tuo manifest e ti mostrerà gli errori che potrebbe avere, o gli avvertimenti a cui dovresti prestare attenzione.

+

Firefox OS Simulator

+

Installare e utilizzare il Firefox OS Simulator è il modo più semplice per avere la tua app pronta in breve tempo. Dopo averlo installato, il simulatore è accessibile dal menu Sviluppo Web -> Firefox OS Simulator. Assieme al simulatore viene lanciata una console JavaScript che permette di eseguire il debug delle applicazioni dall'interno del simulatore.

+

App Manager

+

Il nuovo arrivato per quanto riguarda gli strumenti di test si chiama App Manager. Questo strumento ti permette di collegare Firefox a un dispositivo compatibile via USB (o a un simulatore Firefox OS), inviare app direttamente al dispositivo, validarle ed eseguirne il debug mentre vengono eseguite sul dispositivo.

+

Strumenti di sviluppo di Firefox

+

Firefox ora include un insieme di strumenti di sviluppo predefiniti progettati da zero per consentire un'esperienza di sviluppo rapida ed efficiente. Per scoprire di più riguardo questi strumenti, e conoscere una lista dettagliata di cos'altro Mozilla abbia da offrire, visita la  zona Strumenti.

diff --git a/files/it/archive/b2g_os/quickstart/index.html b/files/it/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..325ec38fd0 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/index.html @@ -0,0 +1,48 @@ +--- +title: Crea +slug: Archive/B2G_OS/Quickstart +tags: + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +
+

Informazioni rapide per lo sviluppo di app open web.

+
+
+
+ Introduzione alle app open web
+
+ Cosa sono le app open web? In cosa differiscono dalle normali pagine web? Perché la differenza è importante? Questo articolo punta a rispondere a queste e ad altre domande.
+
+ La tua prima app
+
+ Questo articolo ti guida attraverso i passaggi base e le conoscenze addizionali rispetto allo sviluppo di normali pagine web per creare app open web installabili.
+
+ Introduzione a Firefox OS
+
+ Una presentazione di Firefox OS, la nuova piattaforma mobile di Mozilla basata sulle app open web.
+
+ Introduzione ai manifesti
+
+ FAQ creata per rispondere a qualsiasi domanda tu abbia sui manifesti, l'hosting delle app, origini e altri argomenti correlati.
+
+ Sviluppo di app per sviluppatori web
+
+ Per gli sviluppatori web: in cosa le app open web differiscono da ciò a cui sei abituato? Questo articolo spiega tutto.
+
+ Sviluppo di app per sviluppatori mobile
+
+ Per gli sviluppatori di applicazioni mobile native: quali vantaggi ti portano le app open web, e in cosa differiscono da ciò a cui sei abituato? Qui ci sono alcune idee.
+
+ Sviluppo di funzionalità per le app
+
+ Questa pagina presenta i diversi tipi di funzionalità che potresti voler includere nelle tue app, con link a ulteriori informazioni.
+
+ Pagamenti
+
+ Come puoi implementare le funzionalità per ricevere pagamenti dagli utenti che installano le tue app open web? Qui trovi i dettagli.
+
+ Strumenti per le app
+
+ Nell’ultimo articolo di questa sezione sono raccolti alcuni link a ulteriore documentazione sugli strumenti a disposizione degli sviluppatori per creare app open web di qualità.
+
diff --git a/files/it/archive/b2g_os/quickstart/intro_app_web_aperte/index.html b/files/it/archive/b2g_os/quickstart/intro_app_web_aperte/index.html new file mode 100644 index 0000000000..bd1a8d4cb5 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/intro_app_web_aperte/index.html @@ -0,0 +1,53 @@ +--- +title: Introduzione alle app web aperte +slug: Archive/B2G_OS/Quickstart/Intro_app_web_aperte +translation_of: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps +--- +

Multidispositivo

+
+

This article is designed to act as a good starting point for anyone wishing to learn more about Open Web Apps, whether you are a developer or project manager, or have another role relevant to app development or delivery. Here we'll provide you with a light, high level overview of Open Web Apps and the philosophy behind them.

+
+

Open Web Apps are essentially no different than standard websites or Web pages. They are built using standard open Web technologies — HTML, CSS, JavaScript, etc. — and can be accessed using a Web browser. The main differences lie in their ability to be installed on a device and work offline, and access to advanced APIs that allow interaction with device features such as the camera, address book, and other such things. In addition, they are built on open technologies as much as is possible. Where differences lie in technology implementation between platforms, efforts should be made to ensure that both are supported, through a combination of feature detection and appropriate code for different platforms, and graceful degradation.

+

Advantages of Open Web Apps

+

Let's look at the advantages of Open Web Apps in a little more detail:

+ +

The following video also looks at general advantages of open web apps, and developing for the Firefox OS platform:

+

+

Il Web è la piattaforma

+

An open web app as it exists as installed on a platform like Firefox OS is not a bookmark ‚Äî it‚Äôs a proper part of the system. Le app web rappresentano una importante promessa per il futuro Sono un'opportunità che non dobbiamo perdere se non vogliamo che il Web torni ancora una volta a essere frammentato. Tenendo presente ciò, appare chiaro che l'obiettivo delle app web aperte (AWA per brevità) è diventare standardizzare ed entrare a far parte del "Web". Se avranno successo, le AWA eventualmente funzioneranno su ogni browser, sistema operativo e dispositivo.

+

Noi di Mozilla stiamo lavorando sodo per realizzare una piattaforma di app sostenuta interamente dal Web aperto. Non vogliamo creare una "piattaforma Mozilla" o una "piattaforma Firefox". Il Web è la piattaforma. Stiamo realizzando una collezione di API aperte e implementazioni per dimostrare che le app portabili possono esistere sul Web senza essere bloccate dai lucchetti dei venditori. Altri gruppi come Facebook e Google Chrome stanno lavorando su piattaforme di app che si appoggiano al Web. Le app di Facebook sono progettate per agganciarsi al sito di Facebook, mentre le app di Chrome sono progettate per i dispositivi con Chrome OS e per i server di Google. Le app di Chrome sono le più simili alle app web aperte. Continua la nostra collaborazione con il team di Google Chrome per stare al passo con l'evoluzione degli standard delle app e sicuramente condividiamo in gran parte la stessa visione. Esiste un enorme potenziale per tutte le piattaforme di app basate sul Web di convergere e estendiamo a ogni venditore l'invito di aiutarci a creare le API per app web aperte più adatte.

+

Sebbene al momento sia necessario un motore basato su Mozilla Firefox ("Web runtime") per utilizzare le app web aperte, in futuro non sarà sempre così. Stiamo ancora lavorando su molti punti di questo progetto e non ci è possibile implementare tutto su ogni browser contemporaneamente. Anche se numerose parti delle app web aperte sono già standardizzate, ci sono molti altri aspetti ancora da definire. È nostra intenzione e speranza rendere le app web aperte una funzionalità standardizzata disponibile su tutti i principali browser.

+

Quindi quando si consultano le pagine di MDN sulle app web aperte è opportuno tenere conto che, nonostante molte informazioni siano al momento specifiche per Firefox, se tutto procede come auspicato in futuro consentiranno di sviluppare app per tutti i browser.

+

Standard web

+

La tecnologia AWA non è una sola, più che altro è un ombrello sotto il quale si raggruppano numerose tecnologie differenti, alcune delle quali ancora molto giovani. Attualmente alcune parti di AWA sono standardizzate (HTML5, CSS, JavaScript, IndexedDB, ecc.) Altre parti non sono state ancora standardizzate, pertanto Mozilla le ha implementate solo in Firefox e altri prodotti Mozilla. Dal momento che la missione di Mozilla è condividere le potenzialità del Web con tutti, questa situazione è solo temporanea. Per questa ragione nei documenti AWA tenteremo di identificare con chiarezza le parti non ancora standardizzate.

+

Tieni anche in considerazione che potrebbero esistere anche altre tecnologie proposte per AWA candidate a definirne lo standard e non utilizzate da Mozilla.

+

Standard finali a cui miriamo

+

Le seguenti parti, non ancora standardizzate per tutte le piattaforme web, al momento sono disponibili solo su Firefox:

+ +

Marketplace

+

Acquista una volta, utilizza dappertutto

+

Mozilla ha sviluppato da zero un sistema che permette agli utenti di acquistare un'app una sola volta e utilizzarla su tutti i suoi dispositivi HTML5. Molto presto Mozilla lancerà il primo telefono cellulare Firefox OS, che tuttavia sarà solo uno dei tanti dispositivi su cui utilizzare le app. Quando acquisti un'app da Firefox Marketplace, il sistema installa una ricevuta sul tuo dispositivo. La ricevuta è un JSON Web Token contenente metadati con un collegamento alla chiave pubblica di Firefox Marketplace e all'URL del servizio di verifica. All'avvio dell'app, essa è in grado di verificare la ricevuta, tuttavia la ricevuta del dispositivo non è legata a Firefox Marketplace. Si tratta semplicemente di una prova di acquisto crittograficamente verificabile. Chiunque può vendere app web aperte se rispetta le specifiche della ricevuta. Quando acquisti un'app, essa è pensata per essere portabile su tutti i dispositivi che supportano il sistema per app web aperte.

+

Mozilla is building the infrastructure needed to run Open Web Apps on any HTML5 device. Firefox for Android will let you install and run apps (you can try it today on the nightly build). Installed app icons go to your home screen just like regular Android apps. You can also install and run Web apps on your Windows, Mac, or Linux desktop using Firefox (this currently works in the nightly build). Currently some version of Firefox is required, but it is intended that the Open Web Apps system will eventually be supported by all major browsers as a set of standards. From day one Mozilla has included all major HTML5 compliant browsers in its proof of concepts; you can take a look at this hosted JavaScript shim for ideas on how to support the apps platform on a non-Firefox browser.

+

In futuro il sistema di app web aperte supporterà la sincronizzazione delle app installate tra tutti i dispositivi. Poiché le ricevute sono portabili, esse possono essere sincronizzate direttamente dall'utente, se lo desidera. In caso non fosse ovvio, un'app web aperta gratuita può essere eseguita in qualsiasi browser, in quanto non è diversa da un sito web. Potrebbe tuttavia utilizzare nuove API specifiche per cellulari che non sono state implementate su tutte le piattaforme.

+

The video below provides a useful overview of the advantages of open marketplaces and an open web approach to app discovery:

+

+

API WebPayment

+

Commercio di app

+

Parte del successo delle piattaforme di app per cellulari come iOS e Android è la facilità con cui è possibile sperimentare nuovi modelli di business attraverso i pagamenti via cellulare. Questi modelli si stanno ancora evolvendo ma non c'è dubbio che al momento il commercio di app si svolga in maniera molto più naturale sui cellulari piuttosto che sui computer desktop. In particolare è molto più comodo addebitare un acquisto sulla bolletta del telefono quando lo si sta utilizzando come strumento per accedere alla rete. Grazie al lancio di Firefox OS l'ecosistema delle app supporterà l'acquisto e i pagamenti in-app attraverso l'API WebPayment. Garantire l'efficienza nel gestire il commercio è un fattore cruciale nella crescita di una piattaforma di app. L'API per i pagamenti che proponiamo è assolutamente facoltativa. Mozilla non impedirà ad alcuna app di utilizzare un proprio sistema di pagamenti in-app.

+

Vedi anche

+ diff --git a/files/it/archive/b2g_os/quickstart/intro_to_firefox_os/index.html b/files/it/archive/b2g_os/quickstart/intro_to_firefox_os/index.html new file mode 100644 index 0000000000..88b6068425 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/intro_to_firefox_os/index.html @@ -0,0 +1,16 @@ +--- +title: Introduzione a Firefox OS +slug: Archive/B2G_OS/Quickstart/Intro_to_Firefox_OS +translation_of: Archive/B2G_OS/Quickstart/Intro_to_Firefox_OS +--- +
+

Note: The Quickstart section has been updated with a new, more focused Quickstart article, which replaces all the previous Quickstart articles. We hope you'll find this more useful, and a quicker learning experience than the older set of articles.

+
+
+

Firefox OS è un nuovo sistema operativo mobile sviluppato da Mozilla all'interno del progetto Boot to Gecko (B2G). Firefox OS utilizza il Kernel Linux e un motore di runtime basato su Gecko, che consente agli utenti di eseguire applicazioni sviluppate interamente utilizzando HTML, CSS, JavaScript e anche le Open Web API.

+
+

Firefox OS (conosciuto anche con il nome in codice Boot to Gecko o B2G) è un sistema operativo mobile open source, basato sul Kernel Linux, il quale fa il boot all'interno di una runtime engine bassata su Gecko, questo da la possibilità agli utenti di far girare applicazioni sviluppate solo con HTML, CSS, JavaScript e le Open Web APIs. Firefox OS è un sistema operativo mobile libero dalle tecnologie proprietarie, in più offre una potente piattaforma di svillupo dando la possibilità di creare prodottti eccellenti. Inoltre, è un sistema flessibile, in grado di rende felice l'utilizzatore finale.

+

+

Firefox OS utilizza di default l'interfaccia grafica Gaia, che gestisce le funzioni fondamentali del telefono, ad esempio impostazioni, chiamate, SMS, prendere e archiviare foto, ecc

+

For Web developers, the most important part to understand is that the entire user interface is a Web app, one that is capable of displaying and launching other Web apps. Any modifications you make to the user interface and any applications you create to run on Firefox OS are Web pages, albeit with enhanced access to the mobile device's hardware and services.

+

Firefox OS is currently under heavy development; we are constantly working on ways to make it easier for you to use and hack on Gaia and create apps. However, you need knowledge about systems in order to do things like build the entire Firefox OS stack, or flash a phone with a build of Firefox OS. To find such information, and lots more besides, head on over to our Firefox OS content zone.

diff --git a/files/it/archive/b2g_os/quickstart/la_tua_prima_app/index.html b/files/it/archive/b2g_os/quickstart/la_tua_prima_app/index.html new file mode 100644 index 0000000000..b470246ed7 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/la_tua_prima_app/index.html @@ -0,0 +1,262 @@ +--- +title: La tua prima app +slug: Archive/B2G_OS/Quickstart/La_tua_prima_app +translation_of: Archive/B2G_OS/Quickstart/Your_first_app +--- +
+
+

Le applicazioni web aperte offrono agli sviluppatori esattamente quello che hanno voluto per anni: un ambiente multi-piattaforma dedicata alle applicazioni installabili create con solo HTLM, CSS e JavaScript — Firefox OS è la prima piattaforma aperta dedicata alle apllicazioni web. Questa guida si propone di farvi ottenere rapidamente le basi e le istruzioni di complicazione in modo da poter creare la prossima grande app!

+
+ +

Se vuoi seguire questa guida, è possibile scaricare il nostro modello di applicazione di avvio rapido. Trova più info leggendo la nostra guida sul modello dell'applicazioni.

+ +

Struttura di un'applicazione

+ +

Packaged vs. Hosted Apps

+ +

Ci sono due tipi di applicazioni web aperte: packaged e hosted. Le applicazioni Packaged sono essenzialmente formate da un file zip contenente tutto il necessario: HTML, CSS, JavaScript, immagini, manifest, etc. Le applicazioni Hosted (ospitate) sono eseguite e gestite da un server su un determinato dominio, proprio come un normale sito web. Entrambi i tipi di app richiedono un manifest valido. Quando arriva il momento di inserire la vostra app nel Marketplace di Firefox si carica sia l'app sotto forma di file zip che a indiciare l'url del dominio dove si trovano i vari file dell'applicazione sul server.

+ +
+

{{EmbedYouTube("Q7x-B13y33Q")}}

+ +
+

   Realizzato in collaborazione con Treehouse: DACCI UN'OCCHIATA!

+
+
+ +

Ai fini di questa guida, svilupperete la vostra applicazione Hosted in localhost. Un volta che l'applicazione è pronta di può decidere di caricarla nel Marketplace di Firefox come "Hosted App".

+ +

Manifest di una App

+ +

Ogni applicazione Firefox richiede un file manifest.webapp alla radice dell'app. Il file manifest.webapp fornisce importanti informazioni sull'app come: la versione, nome, descrizione, posizione delle icone e immagini, strighe locali, domini di dove l'app si andrà a installare, e molto altro (Solo il nome e la descrizione sono richieste). Il semploce manifest incluso in un applicazione si presenta:

+ +
{
+  "version": "0.1",
+  "name": "Open Web App",
+  "description": "La vostra nuova App Web",
+  "launch_path": "/app-template/index.html",
+  "icons": {
+    "16": "/app-template/app-icons/icon-16.png",
+    "48": "/app-template/app-icons/icon-48.png",
+    "128": "/app-template/app-icons/icon-128.png"
+  },
+  "developer": {
+    "name": "Il tuo nome",
+    "url": "http://sitodellapp.com"
+  },
+  "locales": {
+    "es": {
+      "description": "Su nueva aplicación impresionante Open Web",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    },
+    "it": {
+      "description": "La vostra nuova fantastica Open Web App",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    }
+  },
+  "default_locale": "it"
+}
+ +
+

{{EmbedYouTube("dgAUgHQOm8M#t")}}

+ +
+

Realizzato in collaborazione con Treehouse: DACCI UN'OCCHIATA!

+
+
+ +

 

+ +

Un Manifest di base dovrà essere sempre la prima cosa da creare per la vostra app. Per maggiori info leggere l'App Manifest.

+ +

App Layout & Design

+ +

Il design responsive è diventato sempre più importante, se prendiamo in considerazione il fatto che le risoluzioni dello schermo dei vari device sono ormai diventate degli standard da seguire.
+ Anche se l'obiettivo principale della vostra applicazione, è quella di distribuirla sulle piattaforme mobili come Firefox OS, potette comunque rendere compatibile l'applicazione con le altre piattaforme. Per fare si che la vostra applicazioni adatti in automatico il layout in base al dispositivo, come mostrato in questo esempio, dovete utilizzare il CSS media queries:

+ +
/* The following are examples of different CSS media queries */
+
+/* Basic desktop/screen width sniff */
+@media only screen and (min-width : 1224px) {
+  /* styles */
+}
+
+/* Traditional iPhone width */
+@media
+  only screen and (-webkit-min-device-pixel-ratio : 1.5),
+  only screen and (min-device-pixel-ratio : 1.5) {
+  /* styles */
+}
+
+/* Device settings at different orientations */
+@media screen and (orientation:portrait) {
+  /* styles */
+}
+@media screen and (orientation:landscape) {
+  /* styles */
+}
+ +

There are many JavaScript and CSS frameworks available to aid in responsive design and mobile app development (Bootstrap, etc.); choose the framework(s) that best fit your app and development style.

+ +

Web APIs

+ +

JavaScript APIs are being created and enhanced as quickly as devices are. Mozilla's WebAPI effort brings dozens of standard mobile features to JavaScript APIs. A list of device support and status is available on the WebAPI page. Of course JavaScript feature detection is still the best practice:

+ +
// If this device supports the vibrate API...
+if('vibrate' in navigator) {
+    // ... vibrate for a second
+    navigator.vibrate(1000);
+}
+ +

In the following example snippet we modify the display style of a <div> based on changes in the device's battery state:

+ +
// Create the battery indicator listeners
+(function() {
+  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
+      indicator, indicatorPercentage;
+
+  if(battery) {
+    indicator = document.getElementById('indicator'),
+    indicatorPercentage = document.getElementById('indicator-percentage');
+
+    // Set listeners for changes
+    battery.addEventListener('chargingchange', updateBattery);
+    battery.addEventListener('levelchange', updateBattery);
+
+    // Update immediately
+    updateBattery();
+  }
+
+  function updateBattery() {
+    // Update percentage width and text
+    var level = (battery.level * 100) + '%';
+    indicatorPercentage.style.width = level;
+    indicatorPercentage.innerHTML = 'Battery: ' + level;
+    // Update charging status
+    indicator.className = battery.charging ? 'charging' : '';
+  }
+})();
+ +

In the code sample above, once you confirm that the Battery API is supported, you can add event listeners for chargingchange and levelchange to update the element's display. Try adding the following to the quickstart template, and see if you can get it working.

+ +

Check the WebAPI page frequently to keep up to date with device API statuses!

+ +

Install API functionality

+ +

In our sample quickstart app template, we've implemented an install button that you can click when viewing the app as a standard Web page, to install that site on Firefox OS as an app. The button markup is nothing special:

+ +
<button id="install-btn">Install app</button>
+ +

This button's functionality is implemented using the Install API (see install.js):

+ +
var manifest_url = location.href + 'manifest.webapp';
+
+function install(ev) {
+  ev.preventDefault();
+  // define the manifest URL
+  // install the app
+  var installLocFind = navigator.mozApps.install(manifest_url);
+  installLocFind.onsuccess = function(data) {
+    // App is installed, do something
+  };
+  installLocFind.onerror = function() {
+    // App wasn't installed, info is in
+    // installapp.error.name
+    alert(installLocFind.error.name);
+  };
+};
+
+// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
+var button = document.getElementById('install-btn');
+
+var installCheck = navigator.mozApps.checkInstalled(manifest_url);
+
+installCheck.onsuccess = function() {
+  if(installCheck.result) {
+    button.style.display = "none";
+  } else {
+    button.addEventListener('click', install, false);
+  };
+};
+
+ +

Let's run through briefly what is going on:

+ +
    +
  1. We get a reference to the install button and store it in the variable button.
    2. +
  2. We use navigator.mozApps.checkInstalled to check whether the app defined by the manifest at http://people.mozilla.com/~cmills/location-finder/manifest.webapp is already installed on the device. This test is stored in the variable installCheck.
    3. +
  3. When the test is successfully carried out, its success event is fired, therefore installCheck.onsuccess = function() { ... } is run.
    4. +
  4. We then test for the existance of installCheck.result using an if statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.
    5. +
  5. If the app isn't installed, we add a click event listener to the button, so the install() function is run when the button is clicked.
    6. +
  6. When the button is clicked and the install() function is run, we store the manifest file location in a variable called manifest_url, and then install the app using navigator.mozApps.install(manifest_url), storing a reference to that installation in the installLocFind variable. You'll notice that this installation also fires success and error events, so you can run actions dependant on whether the install happened successfully or not.
    7. +
+ +

You may want to verify the implementation state of the API when first coming to Installable web apps.

+ +
+

Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allow installable web apps to install on the desktop. See FAQs about apps manifests for more information on origins.

+
+ +

WebRT APIs (Permissions-based APIs)

+ +

There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the manifest.webapp file like so:

+ +
// New key in the manifest: "permissions"
+// Request access to any number of APIs
+// Here we request permissions to the systemXHR API
+"permissions": {
+    "systemXHR": {}
+}
+ +

The three levels of permission are as follows:

+ + + +

For more information on app permission levels, read Types of packaged apps. You can find out more information about what APIs require permissions, and what permissions are required, at App permissions.

+ +
+

It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.

+
+ +

Tools & Testing

+ +

Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps:

+ +

Firefox OS Simulator

+ +

Installing and using the Firefox OS Simulator is the easiest way to get up and running with your app. After installed the simulator is accessible via the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so that you may debug your application from within the simulator!

+ +

App Manager

+ +

The new kid on the block with regards to testing tools is called the App Manager. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.

+ +

Unit Testing

+ +

Unit tests are extremely valuable when testing on different devices and builds. jQuery's QUnit is a popular client-side testing utility, but you can use any set of testing tools you'd like.

+ +

Installing Firefox OS on a Device

+ +

Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on MDN.

+ +

Dedicated Firefox OS developer preview devices are also available: read our Developer preview phone page for more information.

+ +

App Submission and Distribution

+ +

Once your app is complete, you can host it yourself like a standard web site or app (read Self-publishing apps for more information), or it can be submitted to the Firefox Marketplace. Your app's manifest will be validated and you may choose which devices your app will support (i.e. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated you may add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved your app is available to the world for purchase and installation.

+ +

More Marketplace & Listing Information

+ +
    +
  1. Submitting an App to the Firefox OS Marketplace
    2. +
  2. Marketplace Review Criteria
    3. +
  3. App Submission Video Walkthrough
    4. +
+
diff --git a/files/it/archive/b2g_os/quickstart/per_sviluppatori_web/index.html b/files/it/archive/b2g_os/quickstart/per_sviluppatori_web/index.html new file mode 100644 index 0000000000..521d78d1c5 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/per_sviluppatori_web/index.html @@ -0,0 +1,52 @@ +--- +title: Sviluppo delle App per Sviluppatori web +slug: Archive/B2G_OS/Quickstart/per_sviluppatori_web +translation_of: Archive/B2G_OS/Quickstart/For_Web_developers +--- +
+

Se sei uno Sviluppatore web e hai un sito o una applicazione web che vuoi trasformare in una app installabile, ci sono tecnicamente poche cose da fare. Questo articolo spiega i requisiti minimi, insieme alle idee da conoscere sulle web app e quanto sono diverse dai siti web comuni.

+
+

I requisiti minimi sono pochi:

+
    +
  1. Creare un app manifest.
    2. +
  2. Distribuire il file app manifest con l'estensione .webapp. Impostare l'header Content-Type in application/x-web-app-manifest+json.
    3. +
  3. Pubblicare l'app, sul proprio sito, nell' app store o su entrambi. Pubblicare in proprio richiede  l'aggiunta di codice al tuo sito, per gestire l'installazione e l'aggiornamento dell'app nel browser degli utilizzatori.
    4. +
+

Funzionalità facoltative

+

Filosoficamente, l'idea di una Open Web App installabile è molto di più che aggiungere semplicemente un file manifest al sito.  Le tecnologie degli Standard Web possono essere viste come piattaforme per applicazioni in piena regola che permettono ad un browser di rappresentare le interfacce utente, interpretare il codice e utilizzare i protocolli Web per comunicare con il server.

+

Mozilla offre eseguibili "Web runtime" per varie piattaforme in modo che le applicazioni siano in grado di funzionare nella propria finestra senza il contorno di un browser.

+

Per "appificare" un sito Web ci sono alcune aspetti specifici da considerare:

+ +

Se vuoi avvantaggiarti completamente delle capacità offerte alle app installabili, hai cose da fare in abbondanza, ad esempio:

+ +

Tecnologie utili

+

Ci sono alcune tecnologie web che potrebbero essere utili per scrivere app installabili. Nella lista seguente non c'è nulla ad uso esclusivo delle sole app ma dell'intero Web.

+ +

Leggi anche

+ diff --git a/files/it/archive/b2g_os/security/index.html b/files/it/archive/b2g_os/security/index.html new file mode 100644 index 0000000000..f4c05fab41 --- /dev/null +++ b/files/it/archive/b2g_os/security/index.html @@ -0,0 +1,63 @@ +--- +title: La sicurezza in Firefox OS +slug: Archive/B2G_OS/Security +tags: + - Firefox OS + - Mobile + - Security +translation_of: Archive/B2G_OS/Security +--- +

I seguenti articoli coprono gli argomenti inerenti la sicurezza in Firefox OS. Questi includono nozioni sulle opzioni di sicurezza generali, sulla sicurezza delle applicazioni e su come il processo di installazione venga mantenuto sicuro.

+ + + + + + + + +
+

Documentazione sulla sicurezza di Firefox OS

+ +
+
Il modello della sicurezza di FIrefox OS
+
Una presentazione sul modello di sicurezza di Firefox OS.
+
System security
+
Dettagli sui controlli di sicurezza presenti in Firefox OS.
+
Sicurezza delle applicazioni in Firefox OS
+
Una presentazione su come sono mantenute sicure le applicazioni su Firefox OS.
+
Installare e aggiornare applicazioni in modo sicuro
+
Come Firefox OS riesce a installare e aggiornare le applicazioni in modo sicuro.
+
 Debug e test di sicurezza con Firefox OS
+
 Questa guida mostra il procedimento per un semplice test di sicurezza, partendo dall'apertura da remoto del debugger JavaScript all'impostazione di un proxy che intercetti il traffico HTTP(S) generato da una versione Desktop di Firefox OS.
+
+ +

Vedi tutto...

+ 		+

Trovare aiuto nella community

+ +

Se stai lavorando con Firefox OS o stai sviluppando un' applicazione che vorresti funzionasse su di un dispositivo Firefox OS, ci sono risorse della community per aiutarti!

+ +
    +
  • Consulta il forum del progetto Boot to Gecko: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}
    • +
+ +
    +
  • Chiedi aiuto nel canale IRC di Mozilla Boot to Gecko : #b2g
    • +
+ +

Non dimenticarti della netiquette...

+ + + + + +
+ +

 

+ +

+Firefox OS
diff --git a/files/it/archive/b2g_os/security/security_model/index.html b/files/it/archive/b2g_os/security/security_model/index.html new file mode 100644 index 0000000000..8e94417927 --- /dev/null +++ b/files/it/archive/b2g_os/security/security_model/index.html @@ -0,0 +1,386 @@ +--- +title: La sicurezza di Firefox OS +slug: Archive/B2G_OS/Security/Security_model +translation_of: Archive/B2G_OS/Security/Security_model +--- +
+

Questo documento fornisce una presentazione del security framework di Firefox OS, realizzato appositamente per proteggere i dispositivi mobili dalle minacce rivole alla piattaforma, alle app ed ai dati. Il modello della sicurezza implementato da Mozilla su Firefox OS è globale, integrato e stratificato su più livelli per fornire la migliore protezione contro i rischi della sicurezza specifici degli smartphone. 

+
+ +

Platform Security

+ +

La piattaforma Firefox OS usa un modello della sicurezza stratificato con l'obiettivo di mitigare i rischi di violazione ad ogni livello. Contromisure da prima linea e strategie di difesa accurate si uniscono così per fornire globalmente protezioni agli attacchi.

+ +

Secure Architecture

+ +

Firefox OS collega le applicazioni basate sul web all'hardware sottostante. Consiste in una stack di tecnologie integrate suddivisa nei seguenti livelli:

+ +

+ + + +

Il livello Gecko si comporta come intermediario tra le app web (al livello Gaia) e il telefono. Il compito di Gonk è rende a lui disponibili le funzionalità hardware affinchè possa gestire l'accesso delle app web alle API web. Gecko si impone così come passaggio obbligato ed unico per le richieste d'accesso comportando l'assenza di un accesso diretto o una "back door" al dispositivo. In sostanza Gecko fornisce i permessi e previene gli accessi non autorizzati.

+ +

Secure System Deployment

+ +

Firefox OS è già intallato negli smartphone. L'immagine di sistema è creata da una sorgente fidata e conosciuta — di solito gli OEM stessi — responsabile dell' assemblaggio, della creazione della build, del test e della firma digitale del pacchetto distribuito.

+ +

Le misure di sicurezza sono attive su tutti il livelli della stack. I privilegi del file sistem sono gestiti dalla Linux's access control list (ACLs). Le app di sistema sono installate su di un volume read-only (che diventa read-write solo durante gli aggiornamenti) e generalmente solo le aree con contenuto utente possono essere read-write. Vari componenti hardware del dispositivo hanno sistemi di sicurezza interni implementati come pratica standard dai produttori (ad esempio nei chipset). Il nucleo centrale della piattaforma (Gecko e Gonk) è strutturato per migliorare la sua resistenza contro potenziali attacchi e le caratteristiche di hardcoding del compilatore sono utilizzate per questo scopo ove possibile. Per altri dettagli vedere sicurezza del Runtime.

+ +

Secure System Updates

+ +

I seguenti aggiornamenti e patch a Firefox OS sono diffusi tramite un processo sicuro elaborato da Mozilla per assicurare il mantenimento dell'integrità dell'immagine sistema sul dispositivo. Anche l'aggiornamento è fornito da fonti affidabili e conosciute— di solito dagli OEM — responsabili dell'assemblggio, della creazione della build build, del test e della firma digitale del pacchetto distribuito.

+ +

Gli aggiornamenti di sistema possono influire su tutta la stack o solo su porzioni porzioni della stessa. Se gli aggiornamenti includono modifiche a Gonck sarà usto il processo FOTA (Firmware Over the Air) per l'installazione. Questa metodologia può anche includere cambiamenti su qualsiasi altra parte della stack, inclusa la gestione del dispositivo (FOTA, firmware / driver), la gestione delle impostaioni (Firefox OS settings), gli aggiornamenti sulla sicurezza, Gaia, Gecko, e altro.

+ +

GLi aggiornamenti che invece non includono Gonck possono esere effettuati usando la Mozilla System Update Utility. Firefox OS usa lo stesso framework per gli aggiornamenti, i processi, e per il formato Mozilla ARchive (MAR) (usato per i pacchetti di aggiornamento) di Firefox per Desktop.

+ +

un servizio integrato — che piò essere fornito dagli OEM — controlla regolarmente se sono disponibili aggiornamenti per il dispositivo in uso, se ve ne sono viene proposta all'utente l'installazione. PRima che il processo di aggiornamento venga avviato è controllato se lo spazio disponibile nel dispositivo è sufficiente e che la distribuazione sia verificata per:

+ + + +

Le seguente misure di sicurezza sono applicate durante il processo di aggiornamento:

+ + + +

Sono disposti controlli rigorosi per assiucurare che l'aggiornamento sia propriamente applicato al telefono.

+ +
+

Note: Per maggiori informazioni su come funzionano, sono creati e distribuiti gli aggiornamenti, leggere Creare e applicare pacchetti di aggiornamento per Firefox OS.

+
+ +

Sicurezza nelle app

+ +

Firefox OS usa una precisa strategia per proteggere lo smartphone da applicazioni dannose o intrusive; questa consiste in una serie di meccanismi come: livelli di permessi impliciti basati sul modello di affidabilità delle app, modlità sandbox in runtime, accesso hardware riservato alle sole API, modello dei permessi robusto e  processo sicuro di installazione e aggiornamento. Per dettagli tecnici consultare Sicurezza delle applicazioni.

+ +

In Firefox OS, tutte le applicazioni sono app web — programmi scritti in HTML5, JavaScript, CSS, media, ed altre tecnologie web (le pagine web visualizzate nel browser non sono considerate app web in questo contesto). Poichè non ci sono applicazioni binare ("native") installate dall'utente, tutto l'accesso al sistema è delegato strettamente alle API Web. Anche l'accesso al file system è veicolato dalle API Web e da un database back-end SQLite — non c'è accesso diretto dalle app ai file salvati nella scheda SD.

+ +

Firefox OS limita e espande la quantità di risorse accessibili o utilizzabili da un'app, mentre inoltre supporta un ampio spettro di applicazioni con vari livelli di permesso. Mozilla ha inoltre implementato uno stretto controllo su che tipo di applicazioni possono accedere alle API Web. Per esempio, solo app certificate (cioè già incluse nel telefono) possono avere accesso all'API Telephony. L'app Dialer hai i privilegi per L'API Telephony per effettuare telefonate, ma ciò non è vero per tutte le app certificate.

+ +

Questo previene tutte quelle situazioni in cui, per esempio, le app di terze parti avviano telefonate verso numeri a pagamento, provocando un grosso impatto sulla bolletta telefonica.

+ +

Comunque anche altre app OEM selezionate possono avere accesso alle API Telephony. Per esempio, un operatore può fornire un sistema di gestione del proprio account telefonico, per il supporto dei clienti.

+ +

Applicazioni affidabili e non

+ +

Firefox OS divide le app nei seguenti tipi:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Tipi

+ 		+

Livello di affidabilità

+ 		+

Descrizione

+
+

Certificate

+ 		+

Molto affidabili

+ 		+

App di sistema approvate dagli OEM (a causa di rischi inierenti la corruzione del dispositivo o di sue funzionalità critiche). Solo app di sistema e servizi, escluse le applicazioni di terze parti.
+ Questa designazione è riservata solo ad un piccolo numero di app con rilevanza critica. Esempi: SMS, Bluetooth, fotocamera, orologio di sistema, componente telefonica, e il sistema di composizione di default (per assicurare che i servizi d'emergenza siano sempre disponibili).

+
+

Privilegiate

+ 		+

Affidabili

+ 		+

App di teze parti recensite, approvate, e firmate digitalmente su un Marketplace autorizzato.

+
+

Web (tutto il resto)

+ 		+

non affidabili

+ 		+

Contenuto web regolare. include sia le app installate (salvate sullo smartphne) che le hosted (remote, con il solo manifest presente nel dispositivo). Il manifesto per le app hosted può essere ottenuto dal marketplace Marketplace.

+
+ +

Il livello di affidabilità determina, in parte, le capacità dell'applicazione di accedere alle funzionalià del dispositivo.

+ + + +

Alcune operazioni, come l'accesso alla rete, sono considerate implicite in ogni app. In generale, più l' operazione eseguita è sensibile, più il livello di affidabilità dev'essere elevato (ad esempio, comporre un numero e accedere alla lista dei contatti sono operazioni sensibili).

+ +
+

Note: Per più informazioni sulle API disponibili e il loro livello, conusltare permessi delle app.

+
+ +

Principio dei minimi permessi

+ +

Per le web app, il framework della sicurezza di Firefox OS segue il principio dei minimi permessi: partire con il livello di permessi minimo, per poi aggiungere altri privilegi solo se necessari e ragionevoli. Di default, un'applicazione è pressochè priva di autorizzazioni, a un livello comprabile a quello delle app non affidabili. Se l'applicazione effettua chiamate alle API che necessitano di autorizzazioni aggiuntive, deve elencarle nel manifest dell'applicazione (che verrà approfondito successivamente in questo documento). Gecko si occuperà di considerare le richieste ed eventualmente di garantire l'accesso alle API Web richieste dall'applicazione, ma solo se le condizioni di privilegio sono espresse esplicitamente nel manifest. Gecko soddisferà le richieste solo se il type della app Web (certificate, affidabili, o web) è sufficientemente qualificato per l'accesso.

+ +

Il processo di revisione delle app privilegiate Marketplace

+ +

Affinchè un app diventi privilegiata, il fornitore dell'applicazione deve inviarla su in Marketplace autorizzato per l'analisi. Il Marketplace sottopone l'applicazione ad una revisione precisa del codice: verifica la sua autenticità e integrita, assicurando che i permessi richiesti siano effettivamente usati per le finalità indicate, verificando che l'uso dei permessi impliciti sia appropriato e validando ogni interfaccia tra contenuto delle app privilegiate e non, abbiano le appropriate restrizioni per prevenire attacchi che sfruttino l'elevazione dei privilegi. Il Marketplace ha la responsabilità di assicurare che le app non abbiano comportamenti ambigui con i privilegi assegnati.

+ +

Dopo che un applicazione è stata approvata, il suo manifesto è firmato digitalmente dal Marketplace e reso disponibile per il download da parte degli utenti. La firma assicura che, anche se lo store online fosse hackerato, l'hacker non possa installare contenuto arbitrario o codice maligno sul dispositivo. Grazie a questo processo di veto le app del Marketplace possono avere accesso ad una più ampia gamma di privilegi rispetto al normale contenuto web. 

+ +
+

Note: per saperne di più sui Marketplace e sul Firefox Marketplace, visitare la Marketplace zone.

+
+ +

App Packaged Hosted

+ +

Le app per Firefox OS possono essere packaged (salvate sul telefono) o hosted (Salvate su un server remoto, con il solo manifest sul dispositivo). Ci sono delle differenze nel modo in cui la sicurezza è gestita in ogniuna di esse. Inoltre le app packaged e hosted sono eseguite in sandbox, cosa che verrà approfondita più avanti in questo documento.

+ +
+

Note: Per maggiori infomazioni su app Hosted e packaged consultare Opzioni di pubblicazione delle app.

+
+ +

App Packaged

+ +

Un'app packaged consiste in un file ZIP contenete sia le risorse (HTML5, CSS, JavaScript, images, media) che un manifest contenente una dichiarazione esplicita di asset con i relativi hash. Le app certificate e prvilegiate devono essere del tipo packaged perchè il manifest deve essere firmato digitalmente. Quando un utente richiede un app il file ZIP è scaricato sul dispositivo e il manifesto viene letto da una locazione conosciuta all'interno del file ZIP. Durante il processo di installazione gli assets dell'applicazione sono verificati e rimangono salvati locamente nel pacchetto. L' esplicitazione di tutti i permessi, mostrando all'utente come l'app intende maneggiare i dati personali, è richiesta al runtime e deve rimanere tale per default.

+ +

Per fare riferimento alle risorse in un app packaged si usa un URL con all'inizio la dicitura app: nel seguente formato:

+ +

app://identificatore/percorso_interno_al_file_zip/file.html

+ +

dove app:// rappresenta il punto di montaggio del file ZIP, e l'identificatore è un UUID generaato all'installazione dell'app nel telefono. Questo meccanismo assicura che le risorse siano identificate con un app: URL che contiene il file ZIP. Il percorso in app: è relativo, quindi i collegamenti alle risorse nel file ZIP sono permessi.

+ +

Mentre le app packaged sono create principalmente per essere app certifcate o privilegiate, anche le normali app wab possono essere packaged. However, they do not gain any increase in trust or permissions access simply because they are packaged.

+ +

App Hosted

+ +

Le app Hosted sono posizionate su un server web e caricate tramite HTTP. Solo il manifest è salvato sul dispositivo le restanti comonenti si trovano su server remoti. Certe API sono disponibili solo alle app certificate o privilegiate (ossia privilegiate). Perciò, un'app hosted non potrà avere accesso alle operazioni delle API Web che richiedono lo status di app privilegiate o certificate.

+ +

Dal punto di vista della sicurezza le app hosted sono trattaate come comuni siti web. Un'app hosted è caricata invocando un URL hard-coded, e completamente qualificato che punta alla pagina d'avvio nella cartella radice dell'app su quel server web. Una volta che un'app hosted è caricata, il telefono la collega alle pagine usando gli stessi URL che sono usati nonrmalmente navigando nel sito web.

+ +

App Manifest

+ +

Un manifest di una Open Web App contiene informazioni che un browser Web necessita per interagire con un'app, è un file JSON con (almeno) un nome e una descrizione per l'applicazione. Per maggiori dettagli, fare riferimento a FAQ sui manifest delle app.

+ +

Manifest d'esempio

+ +

il codice seguente è un esempio di manifest con alcune semplici impostazioni:

+ +
{
+  "name": "Il titolo dell'applicazione va qui",
+  "description": "La descrizione dell'applicazione va qui",
+  "launch_path": "/",
+  "icons": {
+    "128": "/img/icon-128.png"
+  },
+  "developer": {
+    "name": "il tuo nome o quello dell'organizzazione",
+    "url": "http://la-tua-homepage-va-qui.org"
+  },
+  "default_locale": "it"
+}
+ +

Le impostazioni di sicurezza del Manifest

+ +

Il manifest può contenere varie informazioni, incluse le seguenti impostazioni sulla sicurezza:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Campo

+ 		+

Descrizione

+
+

permissions

+ 		+

Permissions required by the app. An app must list every Web API it intends to use that requires user permission. Most permissions make sense for privileged apps or certified apps, but not for hosted apps. Properties per API:

+ +
    +
  • description: A string specifying the intent behind requesting use of this API. Required.
    • +
  • access: A string specifying the type of access required for the permission. Implicit permissions are granted at install time. Required for only a few APIs. Accepted values: read, readwrite, readcreate, and createonly.
    • +
+
+

installs_allowed_from

+ 		+

The Origin of the app; can be singular or an array of origins (scheme+unique hostname) that are allowed to trigger installation of this app. Allows app providers to restrict installs from only an authorized Marketplace (such as https://marketplace.firefox.com/).

+
+

csp

+ 		+

Content Security Policy (CSP). Applied to all pages loaded in the app. Used to harden the app against bugs that would allow an attacker to inject code into the app. If unspecified, privileged and certified apps have system-defined defaults. Syntax:
+ https://developer.mozilla.org/en-US/docs/Apps/Manifest#csp

+ +

Note that this directive can only increase the CSP applied. You cannot use it, for example, to reduce the CSP applied to a privileged App.

+
+

type

+ 		+

Type of application (web, privileged, or certified).

+
+ +

Firefox OS requires that the manifest be served with a specific mime-type (application/x-web-app-manifest+json) and from the same fully-qualified host name (origin) from which the app is served. This restriction is relaxed when the manifest app (and thus the app manifest) is same-origin with the page that requested the app to be installed. This mechanism is used to ensure that it's not possible to trick a website into hosting an application manifest.

+ +

Sandboxed Execution

+ +

This section describes application and execution sandboxes.

+ +

Application Sandbox

+ +

The Firefox OS security framework uses sandboxing as a defense-in-depth strategy to mitigate risks and protect the mobile phone, platform, and data. Sandboxing is a way of putting boundaries and restrictions around an app during run-time execution. Each app runs in its own worker space and it has access only to the Web APIs and the data it is permitted to access, as well as the resources associated with that worker space (IndexedDB databases, cookies, offline storage, and so on).

+ +

The following figure provides an overview of this security model.

+ +

+ +

By isolating each app, its impact is contained within its own worker space and it cannot interfere with anything (such as other apps or their data) outside of that worker space.

+ +

Execution Sandbox

+ +

B2G (Gecko) runs in a highly-privileged system process that has access to hardware features in the mobile phone. At runtime, each app runs inside an execution environment that is a child process of the B2G system process. Each child process has a restricted set of OS privileges — for example, a child process cannot directly read or write arbitrary files on the file system. Privileged access is provided through Web APIs, which are mediated by the parent B2G process. The parent ensures that, when a child process requests a privileged API, it has the necessary permission to perform this action.

+ +

Apps communicate only with the B2G core process, not with other processes or apps. Apps do not run independently of B2G, nor can apps open each other. The only “communication” between apps is indirect (for example, when one app sets a system alarm and another app triggers a system notification as a result of it), and is mediated through the B2G process.

+ +

Hardware Access Only via the Web API

+ +

Web apps have only one entry point to access mobile phone functionality: the Firefox OS Web APIs, which are implemented in Gecko. Gecko provides the sole gateway to the mobile device and underlying services. The only way to access device hardware functionality is to make a Web API call. There is no “native” API and there are no other routes (no “back doors”) to bypass this mechanism and interact directly with the hardware or penetrate into low-level software layer.

+ +

Security Infrastructure

+ +

The following figure shows the components of the Firefox OS security framework:

+ +

+ + + +

Permissions Management and Enforcement

+ +

Firefox OS security is designed to verify and enforce the permissions granted to web apps.

+ +

The system grants a particular permission to an app only if the content requests it, and only if it has the appropriate permissions requested in the app’s manifest. Some permissions require further authorization from the user, who is prompted to grant permission (as in the case of an app requesting access to the user’s current location). This app-centric framework provides more granular control over permissions than traditional role-centric approaches (in which individual roles are each assigned a set of permissions).

+ +

A given Web API has a set of actions and listeners. Each Web API has a required level of permission. Every time a Web API is called, Gecko checks permission requirements (role lookup) based on:

+ + + +

If the request does not meet the permission criteria, then Gecko rejects the request. For example, untrusted apps cannot execute any Web APIs that are reserved for trusted apps.

+ +

Prompting Users for Permission

+ +

In addition to permissions that are implicitly associated with the web apps, certain operations require explicit permission from the user before they can be executed (for example, "can the web app access your camera?"). For these operations, web apps are required to specify, in their manifest, their justification for requiring this permission. This data usage intention informs users about what the web app intends to do with this data if permission is granted, as well as any risk involved. This allows users to make informed decisions and maintain control over their data.

+ +

Secure App Update Process

+ +

+ +

For app upgrades and patches to a privileged app, app providers submit the updated package to an authorized Marketplace, where it is reviewed and, if approved, signed and made available to users. On Firefox OS devices, an App Update Utility periodically checks for app updates. If an update is available, then the user is asked whether they want to install it. Before a update is installed on the mobile device, the package is verified for:

+ + + +

Rigorous checks are in place to ensure that the update is applied properly to the mobile phone. The complete update package must be downloaded in a specific and secure location before the update process begins. Installation does not overwrite any user data.

+ +
+

Note: For more information on app updates, read Updating apps.

+
+ +

Device Security (Hardware)

+ +

Security mechanisms for the mobile device hardware are typically handled by the OEM. For example, an OEM might offer SIM (Subscriber Identity Module) card locks, along with PUK (PIN Unlock Key) codes to unlock SIM cards that have become locked following incorrect PIN entries. Contact your OEM for details. Firefox OS does allow users to configure passcodes and timeout screens, which are described in the next section.

+ +

Data Security

+ +

Users can store personal data on their phone that they want to keep private, including contacts, financial information (bank & credit card details), passwords, calendars, and so on. Firefox OS is designed to protect against malicious apps that could steal, exploit, or destroy sensitive data.

+ +

Passcode and Timeout Screens

+ +

Firefox OS allows users to set a passcode to their mobile phone so only those who supply the passcode can use the phone. Firefox OS also provides a timeout screen that is displayed after a configurable period of phone inactivity, requiring passcode authentication before resuming use of the phone.

+ +

Sandboxed Data

+ +

As described earlier, apps are sandboxed at runtime. This prevents apps from accessing data that belongs to other apps unless that data is explicitly shared, and the app has sufficient permissions to access it.

+ +

Serialized Data

+ +

Web apps do not have direct read and write access to the file system. Instead, all access to storage occurs only through Web APIs. Web APIs read from, and write to, storage via an intermediary SQLite database. There is no direct I/O access. Each app has its own data store, which is serialized to disk by the database.

+ +

Data Destruction

+ +

When a user uninstalls an app, all of the data (cookies, localStorage, IndexedDB, and so on) associated with that application is deleted.

+ +

Privacy

+ +

Mozilla is committed to protecting user privacy and user data according to its privacy principles (https://www.mozilla.org/privacy/), which stem from the Mozilla Manifesto (https://www.mozilla.org/about/manifesto.html). The Mozilla Firefox Privacy Policy describes how Mozilla collects and uses information about users of the Mozilla Firefox web browser, including what Firefox sends to websites, what Mozilla does to secure data, Mozilla data practices, and so on. For more information, see:

+ + + +

Firefox OS implements these principles by putting the control of the user data in the hands of the user, who gets to decide where this personal information goes. Firefox OS provides the following features:

+ + diff --git a/files/it/archive/b2g_os/simulator/index.html b/files/it/archive/b2g_os/simulator/index.html new file mode 100644 index 0000000000..fd5cf7e8ce --- /dev/null +++ b/files/it/archive/b2g_os/simulator/index.html @@ -0,0 +1,244 @@ +--- +title: Firefox OS Simulator +slug: Archive/B2G_OS/Simulator +translation_of: Archive/B2G_OS/Simulator +--- +
+ Il simulatore di Firefox OS non supporta attualmente Mac OS X 10.9 (Mavericks). Per i dettagli vedere il bug 930511 . C'è una soluzione che consiste nel far partire Firefox dal file immagine (DMG) senza installarlo realmente.
+
+

Firefox OS Simulator é ancora in stato di sviluppo, e non è ancora affidabile e completo come noi vorremmo che fosse.

+

Se trovate qualsiasi bug, vi preghimo di segnalarlo su GitHub, per qualsiasi domanda scrivete alla mailing list dev-developer-tools oppure a #devtools su irc.mozilla.org.

+

Leggi Come attivare il verbose logging e ricevere l'ultima preview build nella sezione Getting help.

+
+

L'add-on Firefox OS Simulator è uno strumento che vi permette di testare e debaggare la vostra app Firefox OS sul desktop. Il ciclo codice-test é molto più veloce rispetto al simulatore piuttosto che con un dispositivo reale, e ovviamente, non avrete bisogno di un dispositivo reale per utilizzarlo.

+

Essentially, the Simulator add-on consists of:

+ +

The screenshot below shows a debugging session using the Simulator.

+

The Dashboard is on the top-right, running inside a Firefox tab. We've added one app, a packaged app called "Where am I?". At the top-left the app is running in the Simulator. We've also connected the debugging tools, which are in the panel at the bottom. You can see that the Console pane displays messages about the app.

+

+

This guide covers the following topics:

+ +
+ For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the Simulator Walkthrough page.
+

Installing the Simulator add-on

+

The Simulator is packaged and distributed as a Firefox add-on. To install it:

+
    +
  1. Using Firefox, go to the Simulator's page on addons.mozilla.org.
    2. +
  2. Click "Add to Firefox".
    3. +
  3. Once the add-on has downloaded you will be prompted to install it: click "Install Now".
    4. +
+

Because of the size of the add-on, Firefox may freeze for several seconds while installing it, and a dialog titled "Warning: Unresponsive script" may appear. It it does, click "Continue" to wait for installation to finish. This should not occur from Firefox 27 onwards.
+
+ Once you have installed the Simulator add-on, Firefox will periodically check for newer versions and keep it up to date for you.

+

The Dashboard opens automatically when you install the Simulator, and you can reopen it at any time by going to the "Firefox" menu (or the "Tools" menu on OS X and Linux), then "Web Developer", then "Firefox OS Simulator":

+


+ The Dashboard is the tool you use to add your app to the Simulator and run it. Here's what it looks like:

+

Adding, removing and refreshing apps

+

Adding apps

+

To add a packaged app to the Simulator, open the Dashboard, click "Add Directory" and select the manifest file for your app.
+
+ To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL: so you can add any website as an app just by entering its URL.
+
+ When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on Manifest Validation for details on what tests are run.

+

Unless manifest validation reveals that your app has errors, the Dashboard will then automatically run your app in the Simulator.

+

Managing apps

+

Once you have added an app, it will appear in the Manager's list of installed apps:
+
+ Each entry gives us the following information about the app:

+ +

It also gives us four commands:

+ +
+

Refresh App from the Simulator window: you can update and reload an app directly from the Simulator window using the menubar action or its associated shortcut while the app is running.

+
+

Manifest validation

+

When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:

+ +

It summarises the problems encountered in the entry for the app: clicking on the summary provides more details.

+

Manifest errors

+

The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:

+ +

Here's the result of trying to add a manifest file with a missing "name":
+

+

Manifest warnings

+

The Dashboard will report the following manifest issues as warnings:

+ +

Simulator-specific warnings

+

Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:

+ +

Running the Simulator

+

There are two different ways the Simulator may be started:

+ +

Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.
+
+ The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a toolbar at the bottom and a menubar at the top that contains some extra features:

+

+

To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:

+

+

Simulator toolbar

+

In the bottom toolbar, from left to right, these are the Home button, the Screen Rotation button, and the Geolocation button.

+ +

+

Simulator menubar

+

In the top menubar, you can access some useful commands to make development more efficient:

+

+ +

The keyboard shortcut for the "App Refresh" command makes it possible to iteratively develop an app much like a web page:

+ +
+

"Refresh App and Clear Data" hidden shortcut: sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, Shift - Ctrl/Cmd - R, that will refresh the running app while clearing the following data:

+ +
+

Attaching developer tools

+

You can attach developer tools to the Simulator, to help debug your app. At the moment you can only attach the JavaScript Debugger, the Web Console, the Style Editor, the Profiler and the Network Monitor, but we're working on adding support for more developer tools.

+
+

Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.

+
+

To attach developer tools to the Simulator, click the "Connect" button for an app:

+

+

The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:

+

+

Web Console

+

The app can log to this console using the global console object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (Learn more about the Web Console.)

+

Debugger

+

Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (Learn more about the Debugger.)

+

Style Editor

+

You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (Learn more about the Style Editor.)

+

Profiler

+

Using the Profiler tool connected to the app, you can to find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (Learn more about the Profiler.)

+

Network Monitor

+

Thanks to the new Network Monitor, you can analyze the status, headers, content and timing of all the network requests initiated by the app through a friendly interface. (Learn more about the Network Monitor.)

+

Receipts

+

If you are developing a paid app, you should test your receipt validation code (e.g. the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.

+

Thanks to the "Receipts" menu in each app entry on the Simulator Dashboard, you can install an app with a "Valid", "Invalid", or "Refunded" test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:

+

+

Push to device

+

If you have a Firefox OS device you can connect it to the Simulator, and can then push apps from the Dashboard to the device.

+

Connecting a device

+

To connect the device, follow the instructions in the guide to connecting a Firefox OS device to the desktop. Note that you don't have to install ADB, as the Simulator add-on includes it already.

+

Pushing apps to the device

+

Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note "Device connected" appear on the left of the Dashboard, and a new command appear in the entry for each app labeled "Push":

+

+

Click "Push", and the app will be installed on the Firefox OS device.

+
+

Manual Steps:

+ +
+

Firefox OS Device Connection Confirmation

+

On every device reboot, the first "Push" request needs to be confirmed on the device:

+

+

Troubleshooting on Linux

+

If you are unable to connect your device after creating udev rules, please see this bug.

+

Limitations of the Simulator

+

Note that the Firefox OS Simulator isn't a perfect simulation.

+

Hardware limitations

+

Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.

+

Audio/video codecs

+

The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:

+ +

This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.

+

Unsupported APIs

+

Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:

+ +

Getting help

+

The Firefox OS Simulator is still at an early stage of development, and isn't yet as reliable and complete as we'd like it to be.

+

If you find any bugs, please file them on GitHub. If you have a question, try asking us on the dev-developer-tools mailing list or on #devtools on irc.mozilla.org.

+

How to enable verbose logging

+

Use about:config to create the preference extensions.r2d2b2g@mozilla.org.sdk.console.logLevel, set it to the integer value 0, and disable/reenable the addon. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).

+

How to get the latest preview build

+

As the section on installing the Simulator explains, you can get the latest release of the Simulator add-on from addons.mozilla.org.

+

Sometimes you might want to try out the very latest features before they're officially released. If so, you can download preview builds from the following URLs:

+ +

Be aware that preview builds are less stable and thoroughly tested than release builds.

diff --git a/files/it/archive/b2g_os/sviluppo_applicazioni/index.html b/files/it/archive/b2g_os/sviluppo_applicazioni/index.html new file mode 100644 index 0000000000..50331abb97 --- /dev/null +++ b/files/it/archive/b2g_os/sviluppo_applicazioni/index.html @@ -0,0 +1,14 @@ +--- +title: Sviluppo applicazioni perFirefox OS +slug: Archive/B2G_OS/Sviluppo_applicazioni +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS +--- +

Per informazioni esaurienti sullo sviluppo di app per Firefox OS vedi il  Firefox Marketplace Developer Hub.

+

Puoi anche controlare le App Development API Reference.

+

Le app per Firefox OS non sono niente più di Open Web apps che vengono installate su un dispositivo ccon installato Firefox OS.

+ +
+ Note: Firefox OS currently identifies using the same UA string as Firefox for Android, except without the Android; clause. For example: Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0a1.
diff --git a/files/it/archive/b2g_os/tvs_connected_devices/index.html b/files/it/archive/b2g_os/tvs_connected_devices/index.html new file mode 100644 index 0000000000..eafe6726be --- /dev/null +++ b/files/it/archive/b2g_os/tvs_connected_devices/index.html @@ -0,0 +1,175 @@ +--- +title: TV e dispositivi connessi +slug: Archive/B2G_OS/TVs_connected_devices +tags: + - B2G + - Firefox OS + - Firefox OS e dispositivi connessi + - Gaia + - Guida + - TV +translation_of: Mozilla/Firefox_OS_for_TV +--- +

Questo articolo è scritto per sviluppatori web interessanti a Firefox OS per TV, allo stato attuale dei lavori e futuro, e allo sviluppo di web app per TV. Descrive come realizzare ed eseguire un simulatore di Firefox OS per TV, quindi come iniziare a scrivere app e installarle su TV.

+ +

Le differenze principali nell'utilizzo di Firefox OS su un TV piuttosto che su un telefono (o su un desktop) sono:

+ + + +

Stato attuale e piani futuri

+ +

Dalla versione 2.2 in avanti Gaia può essere eseguito su una TV. Puoi trovare le app out-of-the-box per smart TV nella cartella gaia/tv_apps; le app con prefisso smart- identificano le app per smart TV. A partire dalla prima metà del 2015, saranno disponibili sul mercato televisori con interfaccia uente (UI) basate sulle app che vedremo di seguito.

+ +
+

Nota: smart-home e smart-deck sono delle buone app da utilizzare come template iniziale per lo sviluppo delle tue app, piuttosto che come fonte di idee o ispirazione.

+
+ +

Sviluppare app per TV

+ +

In questa sezione esplorerai come predisporre un ambiente per eseguire e testare le tue app per TV, e come scrivere una semplice app di test.

+ +

Scaricare gli strumenti

+ +

Ti servono tre componenti principali per costruire l'ambiente di sviluppo:

+ + + +
+

Nota: Non ti serve fare il fork del repository di Gaia ne configurare l'upstream, ma è una buona pratica se vuoi contribuire al progetto riportando indietro le eventuali modifiche.

+
+ +

Configurare il tuo ambiente

+ +

Ora devi creare un profilo di Gaia specifico per TV. Dal tuo repository locale esegui il seguente comando:

+ +
make GAIA_DEVICE_TYPE=tv DEVICE_DEBUG=1
+ +

Verrà creato un profilo per TV all'interno della cartella profile ottimizzato per il debugging. Verrà creata una versione hosted delle app di Gaia che potrà essere servita direttamente dal server HTTPD disponibile in Firefox Desktop come estensione. Quando apporterai una modifica sarà sufficiente effettuare un refresh della app (o della finestra del browser) per verificarne il risultato, invece di ricostruire il profilo, pubblicarlo sul dispositivo, e così via. Questa modalità è molto utile per un rapido sviluppo di CSS/JS/HTML.

+ +

Eseguire nel simulatore

+ +

Ora esegui il Simulatore di Firefox Desktop configurando opportunamente la dimensione dello schermo, abilitando il debug remoto lato server e impostando il path del profilo:

+ +
path/to/b2g-bin -screen 1920x1080 -start-debugger-server 6000 -profile /path/to/gaia/profile
+
+ +
+

Nota: Se la risoluzione dello schermo è superiore a quella del tuo PC, le app di sistema non lavoreranno correttamente. Riduci la dimensione dello schermo per adattarla a quella del tuo sistema.

+
+ +
+

Nota: Trovi b2g-bin nel pacchetto b2g installato assieme al simulatore di Firefox OS.

+
+ +
+

Nota: Il path -profile /path/to/gaia/profile che devi impostare è quello che ti stato restituito quando hai creato il profilo (dopo aver eseguito il comando di make come mostrato precedentemente).

+
+ +

Se tutto procede correttamente dovresti vedere la app di orologio. Temporaneamente è la app di atterraggio.

+ +

+ +

Premendo il tasto di Home nella parte inferiore della finestra viene avviata la app di Home, che rappresenta il punto di ingresso principale per le app per Smart TV. Puoi navigare utilizzando i tasti con le frecce; puoi anche selezionare l'icona Apps per avviare il contenitore delle App (App deck), dove potrai trovare la tua app di test dopo che l'avremo creata (vedi la sezione sottostante {{anch("Esempio Hello World ")}}).

+ +

+ +

Lo schermata principale che contiene le App (App deck) è simile alla seguente:

+ +

+ +

Esempio Hello World

+ +

Ora proverai a svluppare una app di test, così potrai renderti conto di quanto sia facile iniziare. Utilizzerai lo strumento WebIDE di Mozilla. Ti consente di avviare facilmente una web app, di modificare il codice HTML/CSS/JS, di fare attività di test/debug delle app — senza avere a disposizione un dispositivo reale.

+ +

Per aprire WebIDE in Firefox per Desktop, seleziona Tools > Web Developer > WebIDE dal menù principale. Ora clicca Open App nell'angolo in alto a sinistra di WebIDE e scegli New App… dal menu.

+ +

+ +

Seleziona HelloWorld, inserisci il Project Name (nome del progetto) e clicca OK.

+ +

+ +

Dopo aver specificato la cartella in cui salvare il progetto, WebIDE produrrà un template di App con poche righe di codice:

+ +

+ +

Ora puoi programmare la tua app direttamente da WebIDE, piuttosto che utilizzare qualsiasi altro editor.

+ +

Esuguire la tua app sulla TV

+ +

Se hai una televisione Panasonic VIERA con Firefox OS puoi eseguire le tue applicazioni sulla TV via WebIDE e trovi le spiegazioni nell'articolo How to connect WebIDE to TV (VIErA CX/CR series). 

+ +

Poichè non è ancora presente alcun simulatore per TV in WebIDE, dovrai provare l'applicazione di esempio nel simulatore di Firefox OS scaricato precedentemente.

+ +
    +
  1. Se non l'hai ancora avviato, segui le istruzioni nella sezione precedente {{anch("Eseguire nel simulatore")}} per avviare l'ambiente per TV all'interno del simulatore di Firefox OS (ricordati di aggiungere il parametro -start-debugger-server 6000).
    2. +
  2. Da WebIDE, clicca Select Runtime nell'angolo in alto a destra quindi seleziona Remote Runtime dal menu.
    +
    3. +
  3. Assicurati di digitare localhost:6000 nella form e premi OK.
    +
    4. +
  4. Clicca sull'icona Install and Run (l'icona di "avvio") di WebIDE. Dovresti ora vedere la tua app in esecuzione all'interno del Simulatore di Firefox OS.
    +
    5. +
  5. Ora clicca sull'icona di Debug App (l'icona "strumento") di WebIDE per avviare il debug della tua app direttamente nel simulatore utilizzando la Toolbox di DevTools.
    +
    6. +
+ +
+

Nota: Puoi trovare maggiori informazioni sulle modalità di debug delle tue app leggendo Debugging apps.

+
+ +

Interagire con meccanismi di controllo remoto per TV

+ +

Una delle differenze più evidenti fra telefoni e TV è la disponibilità di meccanismi di input. In generale, la TV non ha un touch screen, di conseguenza le app non possono essere controllate da eventi di mouse o di touch. In questo caso il meccanismo di controllo è rappresentato dal telecomando del televisore attraverso la pressione dei tasti.

+ +

Il focus è un altro aspetto importante da evidenziare. E' importante assicurarsi che il focus sia sempre sull'elemento corretto, non potendo selezionare direttamente l'elemento sulla TV tramite pressione sullo schermo.

+ +
+

Nota: I tasti dei telecomandi sono definiti nella specifica W3C DOM Level 3 KeyboardEvent key Values; vedi la sezione Media Controller Keys.

+
+ +

Vedi inoltre

+ +

Sviluppare app per TV è molto simile a come avviene per ogni altro dispositivo. Devi sviluppare codice seguendo gli standard Web, progettare l'interfaccia in modalità responsive e rispettare le caratteristiche specifiche di piattaforma.

+ + + +

Ci sono comunque alcune differenze di concetto e di interazione, Molte di queste sono descritte nella sezione Firefox OS for TV UX Overview di MDN.

+ + + +

Inoltre, leggi i seguenti:

+ + diff --git a/files/it/archive/b2g_os/usare_l_app_manager/index.html b/files/it/archive/b2g_os/usare_l_app_manager/index.html new file mode 100644 index 0000000000..e6171ce168 --- /dev/null +++ b/files/it/archive/b2g_os/usare_l_app_manager/index.html @@ -0,0 +1,247 @@ +--- +title: Usare l'App Manager +slug: Archive/B2G_OS/usare_l_app_Manager +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +
+

L'app manager è uno strumento disponibile nella versione per Desktop di Firefox. Fornisce molti strumenti utili per aiutarti a testare , sviluppare e debuggare, direttamente dal tuo browser, applicazioni web HTML5 su Firefox OS phone e Firefox OS simulator.

+
+ +

{{EmbedYouTube("z1Bxg1UJVf0")}}

+ +

L'App Manager è composto da:

+ + + +

Setup rapido:

+ +

Questa sezione è progettata per portarti "up and running" il più velocemente possibile;; se avessi bisogno di informazioni più dettagliate puoi andare alla sezione {{ anch("Device and system configuration") }}  e ominciare da quel punto. Vedi anche la sezione {{ anch("Troubleshooting") }} se hai problemi e cerchi aiuto.

+ +
    +
  1. Controlla di avere Firefox Desktop 26+ installato
    2. +
  2. Apri l'App Manager (nella barra degli indirizzi, scrivi about:app-manager)
    3. +
  3. Se non possiedi un terminale fisico: +
      +
    1. Installa il Firefox OS Simulator
      2. +
    2. Nella toolbar, in basso dell'App Manager's, fai click su Start Simulator, poi fai click sul nome del simulatore installato, che dovrebbe apparire.
      3. +
    +
    4. +
  4. Se hai un apparato fisico: +
      +
    1. Assicurari che il terminale abbia la versione di Firegox OS maggiore di 1.2+
      2. +
    2. Su Windows assicurati di aver installato i drivers forniti dal costruttore del telefono
      3. +
    3. Nelle impostazioni del tuo apparato, disabilita il Blocco dello Schermo (Settings > Screen Lock) e abilita il Debug Remoto (Settings > Device information > More information > Developer)
      4. +
    4. Installa lo ADB Helper add-on su Firefox Desktop
      5. +
    5. Connetti il tuo apparato al tuo computer con un cavo USB
      6. +
    6. Dovresti vedere il nome del tuo apparato nella barra in basso dell'App Manager. Fai click sopra di esso.
      7. +
    +
    5. +
  5. La barra in basso dovrebbe visualizzare la scritta: "Connected to: xxx"
    6. +
  6. Fai click su Apps panel e aggiungi una app (packaged or hosted)
    7. +
  7. Il pulsante Refresh convalida la tua applicazione e la installa sul Simulatore/Apparato
    8. +
  8. Il pulsante Debug connette gli strumenti di sviluppo all'applicazione in esecuzione
    9. +
  9. Vedi la sezione {{ anch("Troubleshooting") }} se hai problemi e cerchi aiuto.
    10. +
+ +

Configurazione del sistema e dell'Apparato

+ +

La prima cosa che devi fare quando usi l'App Manager è assicurarti che il tuo sistema e il tuo telefono siano configurati conrrettamente. Questa sezione ti guiderà attraverso passo per passo attraverso le configurazioni necessarie.

+ +

Firefox 1.2+ necessario

+ +

Assicurati che sul tuo apparato sia installato Firefox OS 1.2/Boot2Gecko 1.2 o superiore. Per controllare quale versione di Firefox OS sia installato sul terminale, Settings > Device Information > Software.

+ +

Se non hai una versione sufficentemente aggiornata, devi installare una nightly build di Firefox 1.2+, oppure configurarne e compilarne una da solo dal codice sorgente.

+ +

Builds disponibili:

+ + + +

Per compilare da solo la dua distribuzione di Firefox OS 1.2+, segui le istruzioni che trovi a Building and installing Firefox OS, incominciando da Firefox OS build prerequisites.

+ +

Debug remoto

+ +

Devi, poi, abilitare il debug remoto in Firefox OS. Per farlo, vai in Settings > Device information > More information > Developer e spunta la casella il Remote Debugging.

+ +

ADB o ADB helper

+ +

Il processo usa il Android Debug Bridge (ADB) per mantenere la connessione e la comunicazione tra apparato e computer. Ci sono due modalità di funzionamento per ADB:

+ + + +
+

Nota: Non è necessario eseguire questo comando se installi ADB Helper Add-on.

+
+ +

Connettere il tuo apparato all'App Manager

+ +

Finita la configurazione , puoi collegare l'apparato al computer e far partire l'App Manager:

+ +
    +
  1. Connetti l'apparato al computer con il cavo USB.
    2. +
  2. Disabilita lo Screen lock sul tuo apparato andando in Settings > Screen Lock e togliendo lo spunto a Lock Screen . Il motivo per cui è il passaggio precedente è una buona idea poichè lo screen lock determina la disconnissione del terminale; ciò significa che non è più disponibile per il debugging.
    3. +
  3. Apri l'App Manager — Su Firefox Desktop seleziona dal menu Tools > Web Developer > App Manager, o digita about:app-manager nella barra degli indirizzi.
    4. +
  4. Sul fonfo della tab dell'App Manager, vedrai una barra di stato della connessione (vedi screenshot sotto). Dovresti poter connettere il tuo apparato premendo il bottone "Connect to localhost:6000".
    5. +
  5. Se va tutto bene, dovrebbe comparitr una scritta sul terminale: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.
    6. +
+ +

+ +
+

Note that the other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the {{anch("Enable port forwarding")}} section, above.

+
+ +

Using a Firefox OS Simulator Add-on

+ +

If you haven't got a real device available to use with App Manager, you can still try it out using a Firefox OS Simulator Add-on. To start off, install the simulator with the following button (multiple versions are available; you are advised to install them all, for maximum flexibility):

+ +

Install Simulator

+ +

Once you've installed the simulator(s), you need to go to the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. At least three buttons will appear:

+ + + +

Apps panel

+ +

Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps panel. From here, you can import an existing app to push onto your device and debug:

+ + + +

Information about your app should appear on the right hand side of the window, as seen below:

+ +

+ +

Manifest editor

+ +

From Firefox 28 onwards, the Apps Panel includes an editor for the app manifest:

+ +

+ +

Debugging

+ +

Clicking on "Update" will update (install) the app on the device. Clicking on "debug" will connect a toolbox to the app, allowing you to debug its code directly:

+ +

+ +
+

Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.

+
+ +

Before Firefox 28, the tools are launched in a separate window. From Firefox 28 onwards, the tools are launched in a separate tab in the App Manager itself, alongside the Apps and Device tabs. The tab is given your app's icon so it's easy to find:

+ +

+ +

Errors

+ +

If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.

+ +

+ +

You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.

+ +

Device panel

+ +

The Device tab displays information about the connected device. From the "Installed Apps" window, apps on the device can be started and debugged.

+ +

+ +
+

Note: Certified Apps are not listed by default. See how to debug certified apps.

+
+ +

The "Permissions" window shows the required priviledges for different Web APIs on the current device:

+ +

+ +

Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.

+ +

Debugging Certified Apps

+ +

Currently only devices running a development build of Firefox OS 1.2 are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref devtools.debugger.forbid-certified-apps to false in your profile. To do this, follow the steps below:

+ +
    +
  1. +

    On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:

    + + 
    adb shell
    + +

    Your prompt should change to root@android.

    +
    2. +
  2. +

    Next, stop B2G running using the following command:

    + + 
    stop b2g
    +
    3. +
  3. +

    Navigate to the following directory:

    + + 
    cd /data/b2g/mozilla/*.default/
    +
    4. +
  4. +

    Here, update the prefs.js file with the following line:

    + + 
    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
    +
    5. +
  5. +

    After you've finished editing and saving the file, start B2G again using the following command:

    + + 
    start b2g
    +
    6. +
  6. +

    Exit the android filesystem using the exit command; this will return you to your normal terminal prompt.

    +
    7. +
  7. +

    Next, reconnect to the App Manager and you should see certified apps appear for debugging.

    +
    8. +
+ +
+

Note: If you want to add this preference to your Gaia build you can run make DEVICE_DEBUG=1 reset-gaia.

+
+ +

Troubleshooting

+ +

If the device is not recognized:

+ + + +

Can't connect your device to the App Manager or start the simulator? Let us know or file a bug.

diff --git a/files/it/archive/b2g_os/ux/building_blocks/action_menu/index.html b/files/it/archive/b2g_os/ux/building_blocks/action_menu/index.html new file mode 100644 index 0000000000..23fe4c62cb --- /dev/null +++ b/files/it/archive/b2g_os/ux/building_blocks/action_menu/index.html @@ -0,0 +1,46 @@ +--- +title: Menu delle azioni +slug: Archive/B2G_OS/UX/Building_blocks/Action_menu +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Action_menu +--- +

Il menu delle azioni presenta una lista di azioni,relative all'app in uso, tra cui l'utente può scegliere. Leggi la Guida allo sviluppo per i dettagli su come aggiungere il menu delle azioni alla tua app.

+

Caratteristiche

+ +

Aspetto

+ + + + + + + +
+

Il menu aperto

+

+

Il menu resta aperto e aspetta che l'utente scelga un elemento premendolo.

+ 		+

Un elemento viene premuto

+

+

L'aspetto del menu mentre l'utente preme l'elemento "Option 03" con il dito.

+
+

Variazioni

+

Le principali variazioni all'aspetto del menu sono date dal titolo, che può esserci o no.

+

+

Interazione

+

Questo diagramma mostra il processo di interazione dell'utente con il menu delle azioni.

+

+

Vedi anche

+ diff --git a/files/it/archive/b2g_os/ux/building_blocks/bottoni/index.html b/files/it/archive/b2g_os/ux/building_blocks/bottoni/index.html new file mode 100644 index 0000000000..446c9f3928 --- /dev/null +++ b/files/it/archive/b2g_os/ux/building_blocks/bottoni/index.html @@ -0,0 +1,231 @@ +--- +title: Bottoni +slug: Archive/B2G_OS/UX/Building_blocks/Bottoni +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Button +--- +

Svolgono un compito quando vengono premuti. Sono un elemento dell'interfaccia molto flessibile e possono avere una gran varietà di aspetti e stili. Vedi la Guida allo sviluppo per le specifiche e le descrizioni di come dovrebbero apparire e funzionare.

+

Caratteristiche

+ +

Ci sono molti tipi di bottoni:

+
+
+ Bottoni azione
+
+ Usati quando le azioni sono poche e non è richiesta una lista. Il bottone principale è sempre indicato con un colore speciale.
+
+ Bottoni lista
+
+ Usato quando deve essere visualizzata una lista di azioni o per visualizzare un selettore.
+
+ Bottoni per l'input
+
+ Usati quando è richiesto un input da associare all'azione.
+
+ Bottoni speciali/personalizzati
+
+ Sono bottoni speciali per azioni specifiche come la registrazione, la chiamata, etc etc.
+
+

Aspetto

+

I bottoni normali dovrebbero apparire così. Non dimenticare che puoi usare i fogli di stile e immagini di background per personalizzare l'aspetto dei bottoni. Vedi la Guida allo sviluppo per capire come fare le personalizzazioni.

+

Bottoni azione

+

Usati quando le azioni sono poche e non è richiesta una lista. Il bottone principale è sempre indicato con un colore speciale.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Primary actionSecondary actionDelete
Normal
Pressed
Disabled
+

Su sfondo scuro i bottoni disabilitati possono avere un aspetto diverso, simile all'immagine sotto.

+ + + + + + + + + + + + + + + +
 Primary actionSecondary action
Disabled
+

Bottoni lista

+

Usato quando deve essere visualizzata una lista di azioni o per visualizzare un selettore.

+

Innescare azioni

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Trigger an action in the current viewTrigger an action in a new viewDisplay a value selector
Normal
Pressed
Disabled
+

Selettori

+

Una volta aperto deve essere premuto uno dei valori proposti per chiuderlo. Un selettore ha questo aspetto:

+ + + + + + + + + + + + + + + +
NormalPressedDisabled
+

Bottoni per l'input

+

Usati quando è richiesto un input da associare all'azione.

+ + + + + + + + + + + + + + + +
NormalPressedDisabled
+

Bottoni speciali

+

I bottoni speciali sono bottoni usati per scopi speciali come usare la macchina fotografica del dispositivo, rispondere e effettuare una chiamata  e accedere al tastierino numerico. Naturalmente puoi usare questi bottoni per altri scopi.

+

Bottone foto/video

+

Questo bottone non ha uno stato disabilitato, se non è possibile fare foto non dovresti semplicemente mostrarlo.

+ + + + + + + + + + + + + + + + + + + + + + + +
 Record videoStop recording videoCapture photo
Normal
Pressed
+

Bottoni telefono

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Pick upHang upHide keypad
Normal
Pressed
Disabled
+

Bottoni personalizzati

+

Esempi di bottoni personalizzati per aggiungere un contatto alla rubrica.

+ + + + + + + + + + + + + + + +
Normal
Pressed
Disabled
+

Vedi anche

+ diff --git a/files/it/archive/b2g_os/ux/building_blocks/conferme/index.html b/files/it/archive/b2g_os/ux/building_blocks/conferme/index.html new file mode 100644 index 0000000000..5e1bac0d82 --- /dev/null +++ b/files/it/archive/b2g_os/ux/building_blocks/conferme/index.html @@ -0,0 +1,87 @@ +--- +title: Conferme +slug: Archive/B2G_OS/UX/Building_blocks/Conferme +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Confirmation +--- +

Una richiesta di conferma chiede all'utente conferma per una scelta, come garantire o annullare i permessi di un'app, o fornisce istruzioni per eseguire un'azione, come richiedere all'utente di riavviare il dispositivo dopo aver cambiato SIM. Vedi la Guida allo sviluppo per informazioni su come implementare queste richieste nella tua app.

+

Caratteristiche

+ +

Aspetto

+

Ecco alcuni esempi di come devono apparire le richieste di conferma.

+ + + + + + + + + + + +
+

Normale

+

+

Un elemento {{HTMLElement("h1")}} è usato per dare il titolo "Confirmation" alla richiesta. Il bottone Delete ha come classe "delete" per mostrarlo come richiesto nelle linee guida della GUI.

+ 		+

Con elementi nel corpo

+

+

In questo esempio  è stato usato un corpo con immagini  e testo e relativi stili. Al bottone "Action" è stata applicata la Classe "recommend"  per indicare che è il bottone da premere per continuare a svolgere l'azione per cui si chiede conferma all'utente.

+
+

Senza titolo

+

+

Esattamente come l'esempio precedente ma senza l'elemento{{HTMLElement("h1")}} a creare il titolo della richiesta.

+ 		+

In modalità modifica

+

Va

+
+

Variazioni sul tema

+

Le varianti possibili sono quelle elencate sopra nella sezione aspetto. Questo schema semplificato ti aiuterà a capire quali sono i componenti di una richiesta di conferma e a vedere che hai il controllo su ciò che apparirà nei tuoi layout e nei contenuti.

+ + + + + + + + + + + +
+

Richiesta di permessi

+

+

In questo esempio le icone ed il titolo sono usate per identificare l'app che richiede i permessi e che permessi vuole.

+

Il testo nel corpo pagina deve fornire dettagli su ciò che l'app vuole fare con i permessi ed i dati dell'utente.

+ 		+

Richesta di conferma per azioni

+

+

Esempio molto semplice di richiesta di conferma; la richiesta pone una domanda all'utente che deve risponedere, non c'è il titolo.

+
+

Richiesta conferma per azione

+

+

Un esempio più completo per la conferma di un'azione con titolo ed icona.

+ 		 
+

Interazione

+

Cancellare messaggi

+

In questo esempio una richiesta viene fatta all'utente per chiedere se è certo di voler cancellare i messaggi selezionati dalla lista delle email. Toccando il bottone "delete" verrà mostrato il messaggio di richiesta di conferma; i messaggi verranno cancellati soltanto se l'utente tocca il bottone "Delete" nella richiesta di conferma.

+

+

Confermare una richiesta di privilegi/permessi

+

In questo esempio l'utente apre per la la prima volta un'app che richiede i permessi per usare le API di  geolocalizzazione. Poichè l'app richiede questi permessi per funzionare li chiede immediatamente. Quando l'utente tocca il bottone "Don't Allow" ( che nega il permesso all'app di usare i servizi di geolocalizzazione) o "Allow" (che invece concede i permessi) la richiesta viene chiusa e la scelta dell'utente ha effetto

+

Nota che questo esempio include una checkbox nella richiesta per salvare la scelta dell'utente in modo che non venga fatta la stessa  richiesta in futuro dalla stessa app.

+

Vedi anche

+ diff --git a/files/it/archive/b2g_os/ux/building_blocks/index.html b/files/it/archive/b2g_os/ux/building_blocks/index.html new file mode 100644 index 0000000000..98d5964764 --- /dev/null +++ b/files/it/archive/b2g_os/ux/building_blocks/index.html @@ -0,0 +1,528 @@ +--- +title: Firefox OS UX building blocks +slug: Archive/B2G_OS/UX/Building_blocks +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x +--- +

Qui troverai le specifiche e le descrizioni degli elementi per l'interfaccia delle app di Firefox OS insieme ad esempi e modelli di come dovrebbero apparire e funzionare.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+


+  Dettagli
+ Esempi e guide

+ 		+

 

+
+

Bottoni

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Conferme

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Filtri

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Titoli

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Aree di input

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Liste

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+ +
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Indicatori di attività e barre di progresso

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Scrolling

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Seek bar

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Qui troverai le specifiche e le descrizioni degli elementi per l'interfaccia delle app di Firefox OS insieme ad esempi e modelli di come dovrebbero apparire e funzionare.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+


+  Dettagli
+ Esempi e guide

+ 		+

 

+
+

Button

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Conferme

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Filtri

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Titoli

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Aree di input

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Liste

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+ +
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Indicatori di attività e barre di progresso

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Scrolling

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Seek bar

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Stati

+
+


+ Dettagli
+ Esempi e guide

+ 		+

 

+
+

Bottoni

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Schede

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Barra degli strumenti

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+ +
+

+ +

Dettagli

+ 		+

 

+
+ +

 

+ +

Stati

+
+


+ Dettagli
+ Esempi e guide

+ 		+

 

+
+

Bottoni

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Schede

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Barra degli strumenti

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+ +
+

+ +

Dettagli

+ 		+

 

+
+ +

 

diff --git a/files/it/archive/b2g_os/ux/design_asset_library/index.html b/files/it/archive/b2g_os/ux/design_asset_library/index.html new file mode 100644 index 0000000000..6cc81d2bc0 --- /dev/null +++ b/files/it/archive/b2g_os/ux/design_asset_library/index.html @@ -0,0 +1,31 @@ +--- +title: Design asset library +slug: Archive/B2G_OS/UX/Design_asset_library +translation_of: Archive/B2G_OS/Firefox_OS_apps/Design_asset_library +--- +

Qui troverai le specifiche per il design, lavori artistici e altri materiali che ti saranno utili per ultimare l'aspetto della tua Web app. La maggioranza dei file sono in formato Photoshop.

+

Design asset library

+ +

Controlli comuni

+ +

Colori

+ +

Icone

+ +

Vedi anche

+ diff --git a/files/it/archive/b2g_os/web_applications/index.html b/files/it/archive/b2g_os/web_applications/index.html new file mode 100644 index 0000000000..6debfb629d --- /dev/null +++ b/files/it/archive/b2g_os/web_applications/index.html @@ -0,0 +1,61 @@ +--- +title: Web applications +slug: Archive/B2G_OS/Web_applications +tags: + - Web apps +--- +

This page is intended to be a first, non thorough, attempt to collect web apps.

+ +

Categories

+ + + + + + + + + + + + + + + + + + + + +
Note taking apps
NameLicenseHomepage
LavernaMozilla Public License Version 2.0https://laverna.cc/
   
+ +

 

+ + + + + + + + + + + + + + + + + + + + +
Voip
NameLicenseHomepage
SkypeProprietary softwarehttps://web.skype.com/
DiscordProprietary softwarehttps://discordapp.com/
+ +

 

+ +

Further references:

+ +

Alternatives to - http://alternativeto.net/platform/online/

+ +

Dmoz.org - https://www.dmoz.org/Computers/Internet/On_the_Web/Web_Applications/

diff --git a/files/it/archive/index.html b/files/it/archive/index.html new file mode 100644 index 0000000000..0ea2218ac1 --- /dev/null +++ b/files/it/archive/index.html @@ -0,0 +1,21 @@ +--- +title: Archive of obsolete content +slug: Archive +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive +--- +

Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.

+ +

There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should not be used for building new Web sites or apps for modern browsers. It's here for historical reference only.

+ +
+

Note to writers: We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are extremely obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the MDN Web Docs chat room before moving content here.

+
+ +

{{SubpagesWithSummaries}}

+ + + +

{{ListSubpages("/it/docs/Archive", 2, 0, 1)}}

diff --git a/files/it/archive/mdn/index.html b/files/it/archive/mdn/index.html new file mode 100644 index 0000000000..9e550840e3 --- /dev/null +++ b/files/it/archive/mdn/index.html @@ -0,0 +1,20 @@ +--- +title: MDN Archive +slug: Archive/MDN +tags: + - Archive + - MDN + - NeedsTranslation + - TopicStub +translation_of: Archive/MDN +--- +

{{MDNSidebar}}

+ +
+

Obsolete
+ This documentation is obsolete.

+
+ +

The documentation listed below is archived, obsolete material about MDN itself.

+ +

{{LandingPageListSubpages}}

diff --git a/files/it/archive/mozilla/index.html b/files/it/archive/mozilla/index.html new file mode 100644 index 0000000000..0acec76e6d --- /dev/null +++ b/files/it/archive/mozilla/index.html @@ -0,0 +1,10 @@ +--- +title: Archived Mozilla and build documentation +slug: Archive/Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla +--- +

These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.

+

{{SubpagesWithSummaries}}

diff --git a/files/it/archive/mozilla/persona/.well-known-browserid/index.html b/files/it/archive/mozilla/persona/.well-known-browserid/index.html new file mode 100644 index 0000000000..66614c5b3d --- /dev/null +++ b/files/it/archive/mozilla/persona/.well-known-browserid/index.html @@ -0,0 +1,44 @@ +--- +title: .well-known-browserid +slug: Archive/Mozilla/Persona/.well-known-browserid +translation_of: Archive/Mozilla/Persona/.well-known-browserid +--- +

Domains advertise their ability to act as Persona Identity Providers (IdPs) by publishing a support document at /.well-known/browserid. This JSON-formatted document must be served over HTTPS with the content type application/json.

+

This document may either specify how to provision and authenticate users, or may delegate its authority to another Identity Provider.

+

Note: you should also consult the BrowserID Protocol Specification as the authoritative technical reference.

+

Basic Support

+

A domain which directly acts an an IdP must provide three values in its support document:

+ +

Example /.well-known/browserid file:

+
{
+    "public-key": {
+        "algorithm": "RS",
+        "n": "82818905405105134410187227495885391609221288015566078542117409373192106382993306537273677557482085204736975067567111831005921322991127165013340443563713385983456311886801211241492470711576322130577278575529202840052753612576061450560588102139907846854501252327551303482213505265853706269864950437458242988327",
+        "e": "65537"
+    },
+    "authentication": "/browserid/sign_in.html",
+    "provisioning": "/browserid/provision.html"
+}
+

Delegated Support

+

HTTP redirects and other means of "moving" a /.well-known/browserid file are not permitted. If an IdP would like to delegate to another domain for authentication and provisioning, it may publish a support document which only contains an authority entry.

+

Example /.well-known/browserid:

+
{
+  "authority": "subdomain.example.com"
+}
+
+

Then subdomain.example.com would host its own support document, as per the example above.

+

The authority field is specified as a hostname plus, optionally, a port. It may not contain a path. So "example.com", "subdomain.example.com", and "subdomain.example.com:8080" are all valid, but "subdomain.example.com/login" is not.

+

A domain may delegate to any other domain, so long as the other domain publishes a /.well-known/browserid document.

+

Checklist

+ +

Many of these can be tested automatically with the check_primary_support script from the Persona codebase.

diff --git "a/files/it/archive/mozilla/persona/compatibilit\303\240_con_i_browser/index.html" "b/files/it/archive/mozilla/persona/compatibilit\303\240_con_i_browser/index.html" new file mode 100644 index 0000000000..33af33db7c --- /dev/null +++ "b/files/it/archive/mozilla/persona/compatibilit\303\240_con_i_browser/index.html" @@ -0,0 +1,86 @@ +--- +title: Browser compatibility +slug: Archive/Mozilla/Persona/Compatibilità_con_i_Browser +translation_of: Archive/Mozilla/Persona/Browser_compatibility +--- +

Browser supportati

+

Persona è sviluppato, testato e supportato dai seguenti browser. Grazie alla libreria JavaScript multipiattaforma di Persona, gli utenti non hanno bisogno di componenti aggiuntivi per usare il sistema.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browser Desktop
Internet Explorer8.0*, 9.0†, 10.0** (vedi Modalità Compatibilità più sotto)
FirefoxVersione Stabile Corrente, Beta, Aurora, Nightly, e Extended Support Releases
+ Versione Stabile Precedente
ChromeUltima Versione Stabile
SafariUltima Versione Stabile
OperaUltima Versione Stabile‡
Browser iOS
Safari MobileiOS 5.x — 6.x
Browser Android
Browser Predefinito2.2 — 4.x
FirefoxVersione Stabile Corrente, Beta, Aurora, Nightly
+ Versione Stabile Precedente
ChromeUltima Versione Stabile
+

*: Per Windows XP. †: Per Windows Vista e Windows 7. **Windows 8.  ‡: Tempo permettendo.

+

Browser non supportati

+ +

"Modalità compatibilità" di Internet Explorer

+

Dalla versione 8.0 in poi, Internet Explorer supporta la cosiddetta Modalità Compatibilità, nella quale il browser può emulare una versione del browser precedente alla 8.0 nel renderizzare una pagina. Questa funzionalità può essere controllata in tre modi

+
    +
  1. come impostazione locale del browser
    2. +
  2. basandosi sulla presenza e il valore della dichiarazione DOCTYPE nella pagina
    3. +
  3. come istruzione inviata dal sito stesso, utilizzando l'intestazione "X-UA-Compatible" come intestazione HTTP o tramite l'uso del tag <meta> nella pagina. Questo metodo bypassa gli altri due.
    4. +
+

Poiché le versioni di Internet Explorer precedenti alla 8.0 non sono supportate da Persona, qualsiasi versione di Internet Explorer configurata per emulare versioni pre-8.0 non funzioneranno con Persona. Il problema solitamente si verifica per una di queste ragioni:

+ +

Per ulteriori informazioni, vedere "Comprendere le Modalità Compatibilità in Internet Explorer 8" e "Complicazioni su IE8 e IE9".

+

Altri Browser

+

Anche se non esplicitamente supportato, qualunque browser includa sia {{ domxref("window.postMessage()") }} che {{ domxref("Storage", "localStorage") }} dovrebbe funzionare. Queste API sono disponibli in tutti i principali browser da Marzo 2010.

+

Problemi noti

+ diff --git a/files/it/archive/mozilla/persona/index.html b/files/it/archive/mozilla/persona/index.html new file mode 100644 index 0000000000..ae58667799 --- /dev/null +++ b/files/it/archive/mozilla/persona/index.html @@ -0,0 +1,175 @@ +--- +title: Persona +slug: Archive/Mozilla/Persona +translation_of: Archive/Mozilla/Persona +--- +
+
Sistema di autenticazione singola semplice e attento alla privacy: permetti ai tuoi utenti di autenticarsi sul tuo sito con il proprio indirizzo email e liberati dalla gestione delle password.
+ +
+

Mozilla Persona è un sistema di login per il Web utilizzabile con qualsiasi browser, facile da usare e da integrare. Funziona su tutti i principali browser e puoi iniziare a usarlo subito.

+ +

Perché dovresti usare Persona sul tuo sito?

+ +
    +
  1. Persona elimina completamente le password per i singoli siti, liberando l'utente dalla necessità di creare, gestire e tenere al sicuro le password.
    2. +
  2. Persona è facile da usare. In solo due clic, un utente Persona può autenticarsi su un nuovo sito, come Voost, aggirando gli ostacoli associati alla creazione di un account.
    3. +
  3. Persona è facile da implementare. Gli sviluppatori possono aggiungere Persona sul proprio sito in mezza giornata.
    4. +
  4. Non c'è alcun vincolo. Gli sviluppatori ottengono da tutti i loro utenti un indirizzo verificato, mentre gli utenti possono utilizzare qualsiasi indirizzo email con Persona.
    5. +
+ +

Inoltre, Persona può solo migliorare: è sviluppato su un protocollo aperto e decentralizzato, che è progettato per permettere un'integrazione diretta all'interno dei browser e il supporto nativo da parte dei provider di posta. I siti che implementano Persona oggi, otterranno automaticamente questi miglioramenti, senza bisogno di modificare il proprio codice.

+
+ +
+
+

Usare Persona sul proprio sito

+ + +
+

Per iniziare

+ +
+
Perché Persona?
+
Che cosa ha di speciale persona rispetto ad altri sistemi di identificazione e autenticazione.
+
Preparazione veloce
+
Una guida passo passo che insegna come aggiungere Persona al proprio sito web.
+
+ +

Riferimento delle API

+ +
+
La API navigator.id
+
L'API del browser.
+
Riferimento dell'API di verifica
+
L'API di verifica remota.
+
+
+ +
+

Guide

+ +
+
Considerazioni sulla sicurezza
+
Pratiche e tecniche per assicurarsi che il proprio deploy di Persona sia sicuro.
+
Compatibilità con i browser
+
Scopri esattamente quali browser supportano Persona.
+
Internazionalizzazione
+
Scopri come Persona gestisce lingue diverse.
+
Guida dell'implementatore
+
Suggerimenti dai siti che hanno già aggiunto il supporto a Persona.
+
+
+ +
+

Risorse

+ +
+
Librerie e plugin
+
Trova librerie semplici da aggiungere per il tuo linguaggio di programmazione, framework web, blog o content management system preferito.
+
Ricette per Persona
+
Codice sorgente di esempio per i siti che usano Persona. Include esempi per C# (MVC3), PHP, Node.js e altri.
+
Linee guida per l'interfaccia utente
+
Come presentare l'autenticazione con Persona ai propri utenti.
+
+
+
+ +
+

Diventare un Identity Provider

+ +

Se sei un provider di email o un servizio di provider di identificazione, controlla i link qui sotto per scoprire come diventare un Identity Provider di Persona.

+ +
+
+
+
Panoramica di Identity Provider
+
Una visione di alto livello su Persona Identity Providers.
+
+
+ +
+
+
Implementare un Identity Provider
+
Una guida minuziosa ai dettagli tecnici su come diventare un Identity Provider.
+
+
+ +
+
+
.well-known/browserid
+
Una panoramica sul file .well-known/browserid, che gli Identity Provider utilizzano per indicare il proprio supporto al protocollo.
+
+
+
+ +
+

Il progetto Persona

+ +
+
+
+
Glossario
+
Definizioni sulla terminologia di BrowserID e Persona.
+
FAQ
+
Risposte alle domande più comuni.
+
Visione di insieme del protocollo
+
Una visione di insieme tecnica a medio livello del protocollo BrowserID sottostante.
+
+
+ +
+
+
Crittografia
+
Informazioni riguardo i concetti crittografici che sono alla base di Persona e BrowserID.
+
Specifiche
+
Qui si trovano i dettagli più tecnici.
+
+
+ +
+
+
Il sito di Persona
+
Per far funzionare Persona stiamo ospitando tre servizi su https://login.persona.org: un Identity Provider per quando gli altri non funzionano, un implementazione delle API {{domxref("navigator.id")}}, e un servizio di veifica.
+
Il codice sorgente di Persona
+
Il codice sorgete di persona è su GitHub. Le pull request sono le benvenute!
+
+
+
+ + + +
    +
  1. Usare persona su un sito + +
      +
    1. Perché usare Persona?
      2. +
    2. Per cominciare
      3. +
    3. Consigli per implementare Persona
      4. +
    4. Considerazioni sulla sicurezza
      5. +
    5. Compatibilità con i browser
      6. +
    6. Internazionalizzazione
      7. +
    7. L'API navigator.id
      8. +
    8. L'API di verifica remota
      9. +
    9. Librerie e plugin
      10. +
    10. Linee guida per l'interfaccia utente
      11. +
    +
    2. +
  2. Diventare un Identity Provider +
      +
    1. Visione di insieme di Identity Provider
      2. +
    2. Implementare un Identity Provider
      3. +
    3. Formato .well-known-browserid
      4. +
    +
    3. +
  3. Il progetto Persona +
      +
    1. Glossario
      2. +
    2. FAQ
      3. +
    3. Servizi ospitati di Persona
      4. +
    4. Visione di insieme del protocollo
      5. +
    5. Crittografia
      6. +
    +
    4. +
+
diff --git a/files/it/archive/mozilla/persona/internationalization/index.html b/files/it/archive/mozilla/persona/internationalization/index.html new file mode 100644 index 0000000000..29ebccf30a --- /dev/null +++ b/files/it/archive/mozilla/persona/internationalization/index.html @@ -0,0 +1,49 @@ +--- +title: Internazionalizzazione +slug: Archive/Mozilla/Persona/Internationalization +translation_of: Archive/Mozilla/Persona/Internationalization +--- +

What's localized in Persona

+

In the future, the user interface for signing into sites with Persona will be directly integrated into the browser, and thus localized along with the browser's own localization. For browsers without integrated support, Persona's user interface consists of a series of dialogs served from login.persona.org. These dialogs are translated by a team of community volunteers, and more than 45 locales are currently enabled in production.

+

How Persona chooses localizations

+

The Persona service selects a language using the Accept-Language header sent alongside the browser's requests. The algorithm used to map an Accept-Language header to a language is the same as that used by mozilla.org:

+
    +
  1. For each language tag in the Accept-Language header: +
      +
    • check if we have an exact match for the language identified by the language tag
      • +
    • check if we have an exact match for the language identified by the first part of the language tag
      • +
    +
    2. +
  2. If a match can't be made using rule (1), fall back to en-US. However, en or en-US is almost always the last accept-lang header sent by most browsers.
    3. +
+

For example, the table below lists the language selected for various Accept-Language headers, if the following locales were supported: en-US, es, es-MX:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Accept-Language HeaderSelected language
es-AR,es;q=0.8,en-us;q=0.5es
es-MX,es;q=0.8,en-us;q=0.5es-MX
es-es,en-us;q=0.5en-US
es-esen-US
+

There is currently no way for a website to force the dialogs to appear in another language. This is because the Persona UI is logically (and in future native implementations will actually be) part of the browser UI, so its language should be consistent with the language selected for the browser.

+

How you can help

+

Persona uses Mozilla Verbatim to help volunteers create new translations. If you want to help out, read about getting started with Verbatim and check out the "BrowserID" project on Verbatim.

+

 

diff --git a/files/it/archive/mozilla/persona/libraries_and_plugins/index.html b/files/it/archive/mozilla/persona/libraries_and_plugins/index.html new file mode 100644 index 0000000000..2e11654b68 --- /dev/null +++ b/files/it/archive/mozilla/persona/libraries_and_plugins/index.html @@ -0,0 +1,195 @@ +--- +title: Librerie e plugin +slug: Archive/Mozilla/Persona/Libraries_and_plugins +translation_of: Archive/Mozilla/Persona/Libraries_and_plugins +--- +

Want to use Persona on your website or blog? Implementing Persona from scratch is easy, but the plugins and libraries listed here might get you going faster!
+
+ This page lists three types of libraries:
+
+ 1. Plugins that integrate Persona with existing frameworks and content management systems
+ 2. Utility libraries that are useful when building new plugins or integrating Persona into a site from scratch
+ 3. Everything else related to Persona, including libraries for turning your domain into a Persona Identity Provider
+
+ This is a community-maintained list. If you've created a library or plugin, please add it to this page.

+
+ This page is currently being revised and some plugins may be out of date. Please review plugins before using them.
+

Plugins

+

Clojure

+ +

Cold Fusion

+ +

Haskell

+ +

Java

+ +

JavaScript

+ +

Node.js

+ +

PHP

+ +

Python

+ +

Ruby

+ +

Perl

+ +

Erlang

+ +

Miscellaneous

+ +

Didn't see your language or framework listed? LoginRadius, a hosted authentication widget, offers Persona integration for a wide variety of platforms.

+

Verification Libraries

+

Go

+ +

Java

+ +

Node.js

+ +

Perl

+ +

PHP

+ +

Ruby

+ +

Utility Libraries

+

C

+ +

Go

+ +

Haskell

+ +

.Net

+ +

Node.js

+ +

PHP

+ +

Python

+ +

Ur/Web

+ +

Everything Else

+

Perl

+ +

Python

+ +

Ruby

+ +

PHP

+ +

Racket

+ +

Orchard CMS

+ diff --git a/files/it/archive/mozilla/persona/marchio/index.html b/files/it/archive/mozilla/persona/marchio/index.html new file mode 100644 index 0000000000..e7ac828695 --- /dev/null +++ b/files/it/archive/mozilla/persona/marchio/index.html @@ -0,0 +1,13 @@ +--- +title: Personalizzazione dei bottoni +slug: Archive/Mozilla/Persona/marchio +translation_of: Archive/Mozilla/Persona/User_interface_guidelines +--- +

I bottoni per l'accesso con Persona

+

Immagini

+

I bottoni "Accesso con Persona" sono disponibili in tre colorazioni:

+

Scarica (.psd)

+

Versioni basate su CSS

+

Sawyer Hollenshead ha creato un set eccellente di bottoni basati su CSS. Demo / Scarica (.zip)

+

Ulteriori informazioni

+

Puoi trovare ulteriori informazioni sul visual design di Persona alla pagina style primer di Sean Martell (disponibile solo in Inglese).

diff --git a/files/it/archive/mozilla/persona/quick_setup/index.html b/files/it/archive/mozilla/persona/quick_setup/index.html new file mode 100644 index 0000000000..076e004ca1 --- /dev/null +++ b/files/it/archive/mozilla/persona/quick_setup/index.html @@ -0,0 +1,273 @@ +--- +title: Setup veloce +slug: Archive/Mozilla/Persona/Quick_Setup +translation_of: Archive/Mozilla/Persona/Quick_Setup +--- +

Aggiungere il sistema di login Persona al tuo sito richiede solo cinque passaggi:

+ +
    +
  1. Includere la libreria JavaScript di Persona nelle tue pagine.
    2. +
  2. Aggiungere i bottoni di “login” e “logout”.
    3. +
  3. Watch for login and logout actions.
    4. +
  4. Verificare le credenziali dell'utente.
    5. +
  5. Rivedere le best practices.
    6. +
+ +

Dovresti riuscire a implementarlo e farlo funzionare in un solo pomeriggio, ma innanzitutto: se hai intenzione di usare Persona sul tuo sito, per piacere prendi un momento per sottoscrivere la mailing list Persona notices. Genera un traffico estremamente basso, viene solo usata per annunciare cambiamenti o questioni di sicurezza che potrebbero avere un impatto negativo sul tuo sito.

+ +

Step 1: Includi la libreria di Persona

+ +

Persona é progettato per essere indipendente dal browser e funzionare bene su tutti i maggiori browser per desktop e mobile.

+ +

Ci aspettiamo che in futuro i browser supporteranno nativamente Persona, ma nel frattempo forniamo una libreria JavaScript che implementa completamente l'interfaccia utente e la parte client-side del protocollo. Includendo questa libreria, i tuoi utenti saranno in grado di registrarsi con Persona anche se il loro browser non lo supporta nativamente.

+ +

Questa libreria è caricata nella tua pagina, Persona funziona necessita di ({{ domxref("navigator.id.watch()", "watch()") }}, {{ domxref("navigator.id.request()", "request()") }}, and {{ domxref("navigator.id.logout()", "logout()") }}) sarà disponibile al mondo navigator.id object.

+ +

Includere la libreria JavaScript di Persona, tu puoi mettere questo script tag in fondo al body della pagina:

+ +
<script src="https://login.persona.org/include.js"></script>
+
+ +

Devi includere questo script in ogni pagina dove gli utenti utilizzeranno Persona {{ domxref("navigator.id") }}. Ciò perchè Persona è ancora in svilippo, tu non dovresti auto accogliere il file include.js

+ +

Step 2: Aggiungere il bottone di login e di logout

+ +

Because Persona is designed as a DOM API, you must call functions when a user clicks a login or logout button on your site. To open the Persona dialog and prompt the user to log in, you should invoke {{ domxref("navigator.id.request()") }}. For logout, invoke {{ domxref("navigator.id.logout()") }}. Note, the call to {{ domxref("navigator.id.logout()", "logout()") }} must be made in the click handler of the logout button.

+ +

For example:

+ +
var signinLink = document.getElementById('signin');
+if (signinLink) {
+  signinLink.onclick = function() { navigator.id.request(); };
+}
+
+var signoutLink = document.getElementById('signout');
+if (signoutLink) {
+  signoutLink.onclick = function() { navigator.id.logout(); };
+}
+
+ +

What should those buttons look like? Check out our Branding Resources page for premade images and CSS-based buttons!

+ +

Step 3: Watch for login and logout actions

+ +

For Persona to function, you need to tell it what to do when a user logs in or out. This is done by calling the {{ domxref("navigator.id.watch()") }} function and supplying three parameters:

+ +
    +
  1. +

    The email address of the user currently logged into your site from this computer, or null if no one is logged in. For example, you might examine the browser's cookies to determine who is signed in.

    +
    2. +
  2. +

    A function to invoke when an onlogin action is triggered. This function is passed a single parameter, an “identity assertion,” which must be verified.

    +
    3. +
  3. +

    A function to invoke when an onlogout action is triggered. This function is not passed any parameters.

    +
    4. +
+ +
+

Note: You must always include both onlogin and onlogout when you call {{ domxref("navigator.id.watch()") }}.

+
+ +

For example, if you currently think Bob is logged into your site, you might do this:

+ +
var currentUser = 'bob@example.com';
+
+navigator.id.watch({
+  loggedInUser: currentUser,
+  onlogin: function(assertion) {
+    // A user has logged in! Here you need to:
+    // 1. Send the assertion to your backend for verification and to create a session.
+    // 2. Update your UI.
+    $.ajax({ /* <-- This example uses jQuery, but you can use whatever you'd like */
+      type: 'POST',
+      url: '/auth/login', // This is a URL on your website.
+      data: {assertion: assertion},
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(xhr, status, err) { alert("Login failure: " + err); }
+    });
+  },
+  onlogout: function() {
+    // A user has logged out! Here you need to:
+    // Tear down the user's session by redirecting the user or making a call to your backend.
+    // Also, make sure loggedInUser will get set to null on the next page load.
+    // (That's a literal JavaScript null. Not false, 0, or undefined. null.)
+    $.ajax({
+      type: 'POST',
+      url: '/auth/logout', // This is a URL on your website.
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(xhr, status, err) { alert("Logout failure: " + err); }
+    });
+  }
+});
+
+ +

In this example, both onlogin and onlogout are implemented by making an asynchronous POST request to your site’s backend. The backend then logs the user in or out, usually by setting or deleting information in a session cookie. Then, if everything checks out, the page reloads to take into account the new login state.

+ +

You can, of course, use AJAX to implement this without reloading or redirecting, but that’s beyond the scope of this tutorial.

+ +

Here is another example, this time not using jQuery.

+ +
function simpleXhrSentinel(xhr) {
+    return function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200)
+                // reload page to reflect new login state
+                window.location.reload();
+            else
+                alert("XMLHttpRequest error: " + xhr.status); } } }
+
+function verifyAssertion(assertion) {
+    // Your backend must return HTTP status code 200 to indicate successful
+    // verification of user's email address and it must arrange for the binding
+    // of currentUser to said address when the page is reloaded
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", "/xhr/sign-in", true);
+    // see http://www.openjs.com/articles/ajax_xmlhttp_using_post.php
+    var param = "assert="+assertion;
+    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhr.setRequestHeader("Content-length", param.length);
+    xhr.setRequestHeader("Connection", "close");
+    xhr.send(param); // for verification by your backend
+
+    xhr.onreadystatechange = simpleXhrSentinel(xhr); }
+
+function signoutUser() {
+    // Your backend must return HTTP status code 200 to indicate successful
+    // sign out (usually the resetting of one or more session variables) and
+    // it must arrange for the binding of currentUser to 'null' when the page
+    // is reloaded
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "/xhr/sign-out", true);
+    xhr.send(null);
+    xhr.onreadystatechange = simpleXhrSentinel(xhr); }
+
+// Go!
+navigator.id.watch( {
+    loggedInUser: currentUser,
+         onlogin: verifyAssertion,
+        onlogout: signoutUser } );
+
+ +

You must call navigator.id.watch() on every page with a login or logout button. To support Persona enhancements like automatic login and global logout for your users, you should call this function on every page of your site.

+ +

Persona will compare the email address you've passed into loggedInUser with its own knowledge of whether a user is currently logged in, and who they are. If these don't match, it may automatically invoke onlogin or onlogout on page load.

+ +

 

+ +

Step 4: Verify the user’s credentials

+ +

Instead of passwords, Persona uses “identity assertions,” which are kind of like single-use, single-site passwords combined with the user’s email address. When a user wants to log in, your onlogin callback will be invoked with an assertion from that user. Before you can log them in, you must verify that the assertion is valid.

+ +

It’s extremely important that you verify the assertion on your server, and not in JavaScript running on the user’s browser, since that would be easy to forge. The example above handed off the assertion to the site’s backend by using jQuery’s $.ajax() helper to POST it to /auth/login.

+ +

Once your server has an assertion, how do you verify it? The easiest way is to use a helper service provided by Mozilla. Simply POST the assertion to https://verifier.login.persona.org/verify with two parameters:

+ +
    +
  1. assertion: The identity assertion provided by the user.
    2. +
  2. audience: The hostname and port of your website. You must hardcode this value in your backend; do not derive it from any data supplied by the user.
    3. +
+ +

For example, if you’re example.com, you can use the command line to test an assertion with:

+ +
$ curl -d "assertion=<ASSERTION>&audience=https://example.com:443" "https://verifier.login.persona.org/verify"
+
+ +

If it’s valid, you’ll get a JSON response like this:

+ +
{
+  "status": "okay",
+  "email": "bob@eyedee.me",
+  "audience": "https://example.com:443",
+  "expires": 1308859352261,
+  "issuer": "eyedee.me"
+}
+
+ +

You can learn more about the verification service by reading The Verification Service API. An example /api/login implementation, using Python, the Flask web framework, and the Requests HTTP library might look like this:

+ +
@app.route('/auth/login', methods=['POST'])
+def login():
+    # The request has to have an assertion for us to verify
+    if 'assertion' not in request.form:
+        abort(400)
+
+    # Send the assertion to Mozilla's verifier service.
+    data = {'assertion': request.form['assertion'], 'audience': 'https://example.com:443'}
+    resp = requests.post('https://verifier.login.persona.org/verify', data=data, verify=True)
+
+    # Did the verifier respond?
+    if resp.ok:
+        # Parse the response
+        verification_data = json.loads(resp.content)
+
+        # Check if the assertion was valid
+        if verification_data['status'] == 'okay':
+            # Log the user in by setting a secure session cookie
+            session.update({'email': verification_data['email']})
+            return resp.content
+
+    # Oops, something failed. Abort.
+    abort(500)
+
+ +

For an example on how to use Persona in a C# ASP.Net MVC3 application, visit this application demo or see the Controller code below:

+ +

 

+ +
public class AuthController : Controller
+{
+    [HttpPost]
+    public ActionResult Login(string assertion)
+    {
+        if (assertion == null)
+        {
+            // The 'assertion' key of the API wasn't POSTED. Redirect,
+            // or whatever you'd like, to try again.
+            return RedirectToAction("Index", "Home");
+        }
+
+        using (var web = new WebClient())
+        {
+            // Build the data we're going to POST.
+            var data = new NameValueCollection();
+            data["assertion"] = assertion;
+            data["audience"] = "https://example.com:443"; // Use your website's URL here.
+
+
+            // POST the data to the Persona provider (in this case Mozilla)
+            var response = web.UploadValues("https://verifier.login.persona.org/verify", "POST", data);
+            var buffer = Encoding.Convert(Encoding.GetEncoding("iso-8859-1"), Encoding.UTF8, response);
+
+
+            // Convert the response to JSON.
+            var tempString = Encoding.UTF8.GetString(buffer, 0, response.Length);
+            var reader = new JsonReader();
+            dynamic output = reader.Read(tempString);
+
+            if (output.status == "okay")
+            {
+                string email = output.email; // Since this is dynamic, convert it to string.
+                FormsAuthentication.SetAuthCookie(email, true);
+                return RedirectToAction("Index", "Home");
+            }
+
+            // Could not log in, do something else.
+            return RedirectToAction("Index", "Home");
+        }
+    }
+}
+ +

The session management is probably very similar to your existing login system. The first big change is in verifying the user’s identity by checking an assertion instead of checking a password. The other big change is ensuring that the user’s email address is available for use as the loggedInEmail parameter to {{ domxref("navigator.id.watch()") }}.

+ +

Logout is simple: you just need to remove the user’s session cookie.

+ +

Step 5: Review best practices

+ +

Once everything works and you’ve successfully logged into and out of your site, you should take a moment to review best practices for using Persona safely and securely.

+ +

If you're making a production-ready site, you may want to write integration tests that simulate logging a user in and out of your site using Persona. To facilitate this action in Selenium, consider using the bidpom library. The sites mockmyid.com and personatestuser.org may also be helpful.

+ +

Lastly, don’t forget to sign up for the Persona notices mailing list so you’re notified of any security issues or backwards incompatible changes to the Persona API. The list is extremely low traffic: it’s only used to announce changes which may adversely impact your site.

+ +

 

diff --git a/files/it/archive/mozilla/persona/remote_verification_api/index.html b/files/it/archive/mozilla/persona/remote_verification_api/index.html new file mode 100644 index 0000000000..05a0e1e7b5 --- /dev/null +++ b/files/it/archive/mozilla/persona/remote_verification_api/index.html @@ -0,0 +1,171 @@ +--- +title: API di verifica remota +slug: Archive/Mozilla/Persona/Remote_Verification_API +translation_of: Archive/Mozilla/Persona/Remote_Verification_API +--- +

Summary

+

When a user tries to log into a website, their browser generates a data structure called an assertion, which is essentially a cryptographically signed email address. The browser sends this assertion to the web site, which must verify that the assertion is valid before logging the user in.

+

Assertions can be verified locally, or with an API hosted at https://verifier.login.persona.org/verify. This page describes how to use the API.

+

Method

+

HTTP POST request to https://verifier.login.persona.org/verify.

+

Parameters

+
+
+ assertion
+
+ The assertion supplied by the user. Available as the first parameter passed to the onlogin function in {{ domxref("navigator.id.watch()") }}.
+
+ audience
+
+ The protocol, domain name, and port of your site. For example, "https://example.com:443".
+
+

Return values

+

The call returns a JSON structure containing a status element, which may be either "okay" or "failure". Depending on the value of status, the structure contains additional elements listed below.

+

"okay"

+

The assertion is valid.

+

In this case the JSON structure contains the following additional elements:

+ + + + + + + + + + + + + + + + + + + +
"email"The address contained in the assertion, for the intended person being logged in.
"audience"The audience value contained in the assertion. Expected to be your own website URL.
"expires"The date the assertion expires, expressed as the primitive value of a Date object: that is, the number of milliseconds since midnight 01 January, 1970 UTC.
"issuer"The hostname of the identity provider that issued the assertion.
+

"failure"

+

The assertion is invalid. In this case the JSON structure contains one additional element:

+ + + + + + + +
"reason"A string explaining why verification failed.
+

Examples

+

node.js

+

This example uses a node.js server using express.js

+
var express = require("express"),
+    app = express.createServer(),
+    https = require("https"),
+    querystring = require("querystring");
+/* ... */
+
+// The audience must match what your browser's address bar shows,
+// including protocol, hostname, and port
+var audience = "http://localhost:8888";
+
+app.post("/authenticate", function(req, res) {
+  var vreq = https.request({
+    host: "verifier.login.persona.org",
+    path: "/verify",
+    method: "POST"
+  }, function(vres) {
+    var body = "";
+    vres.on('data', function(chunk) { body+=chunk; } )
+        .on('end', function() {
+          try {
+            var verifierResp = JSON.parse(body);
+            var valid = verifierResp && verifierResp.status === "okay";
+            var email = valid ? verifierResp.email : null;
+            req.session.email = email;
+            if (valid) {
+              console.log("assertion verified successfully for email:", email);
+              res.json(email);
+            } else {
+              console.log("failed to verify assertion:", verifierResp.reason);
+              res.send(verifierResp.reason, 403);
+            }
+          } catch(e) {
+            console.log("non-JSON response from verifier");
+            // bogus response from verifier!
+            res.send("bogus response from verifier!", 403);
+
+          }
+        });
+  });
+
+  vreq.setHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+  var data = querystring.stringify({
+    assertion: req.body.assertion,
+    audience: audience
+  });
+
+  vreq.setHeader('Content-Length', data.length);
+  vreq.write(data);
+  vreq.end();
+
+  console.log("verifying assertion!");
+});
+
+
+

via Lloyd Hilaiel

+

PHP

+
$url = 'https://verifier.login.persona.org/verify';
+$assert = filter_input(
+    INPUT_POST,
+    'assertion',
+    FILTER_UNSAFE_RAW,
+    FILTER_FLAG_STRIP_LOW|FILTER_FLAG_STRIP_HIGH
+);
+//Use the $_POST superglobal array for PHP < 5.2 and write your own filter
+$params = 'assertion=' . urlencode($assert) . '&audience=' .
+           urlencode('http://example.com:80');
+$ch = curl_init();
+$options = array(
+    CURLOPT_URL => $url,
+    CURLOPT_RETURNTRANSFER => TRUE,
+    CURLOPT_POST => 2,
+    //CURLOPT_SSL_VERIFYPEER => true,   //This currently blocks connection to 'https://verifier.login.persona.org/verify'
+    CURLOPT_SSL_VERIFYPEER => 0,
+
+    CURLOPT_SSL_VERIFYHOST => 2,
+    CURLOPT_POSTFIELDS => $params
+);
+curl_setopt_array($ch, $options);
+$result = curl_exec($ch);
+curl_close($ch);
+echo $result;
+

Via Christian Heilmann

+

Java

+
@Override
+protected void doPost(final HttpServletRequest req,
+   final HttpServletResponse resp) throws ServletException,
+   IOException {
+
+   final String audience = req.getServerName();
+   final String assertion = req.getParameter("assertion");
+   final Verifier verifier = new Verifier();
+   final BrowserIDResponse personaResponse = verifier.verify(assertion,audience);
+   final Status status = personaResponse.getStatus();
+
+   if (status == Status.OK) {
+     /* Authentication with Persona was successful */
+     String email = personaResponse.getEmail();
+     log.info("{} has sucessfully signed in", email);
+     HttpSession session = req.getSession(true);
+     session.setAttribute("email", email);
+
+   } else {
+     /* Authentication with Persona failed */
+     log.info("Sign in failed...");
+
+   }
+}
+
+

Via Javier

+

 

+

Note: If you send the assertion and audience parameters as a JSON-object, they must not be URL-encoded. If they are sent as regular HTTP POST parameters, as in the example above, they must be URL-encoded.

diff --git a/files/it/archive/mozilla/persona/security_considerations/index.html b/files/it/archive/mozilla/persona/security_considerations/index.html new file mode 100644 index 0000000000..7d13904b45 --- /dev/null +++ b/files/it/archive/mozilla/persona/security_considerations/index.html @@ -0,0 +1,55 @@ +--- +title: Considerazioni sulla sicurezza +slug: Archive/Mozilla/Persona/Security_Considerations +translation_of: Archive/Mozilla/Persona/Security_Considerations +--- +

When you add Persona support to your website, Persona takes on as much of the security burden as it can. However, some aspects of security can only be handled by your website. They're listed below.

+

Essential practices

+

Verify assertions on your server

+

When using Persona, identity assertions are passed into the onlogin function passed to {{ domxref("navigator.id.watch()") }}. You should always pass the assertion to your server for verification, and only your server should decide to grant the user additional permissions based on the verification result:

+
// Inside navigator.id.watch({ ...
+onlogin: function(assertion) {
+  // A user wants to log in! Here you need to:
+  // 1. Send the assertion to your backend for verification and to create a session.
+  // 2. Update your UI.
+},
+
+

If you try to verify the assertion using the JavaScript executing in the user's browser, then a malicious user will be able to impersonate a legitimate user of your site by locally injecting code and subverting your JavaScript. This is possible because you're not fully in control of the user's browser, where the code executes.

+

Again, you should always pass the assertion to your server for verification. Even if you're using the remote verification API.

+

Explicitly specify the audience parameter

+

To verify an assertion, you may issue a POST request to https://verifier.login.persona.org/verify. The request includes a parameter called audience:

+
assertion=<ASSERTION>&audience=https://mysite.com:443"
+

The audience parameter is required. You should always specify the audience explicitly in your code, or in your code's configuration. Specifically:

+ +

If you trust the user's browser to tell you the audience, then it becomes possible for a malicious web site to reuse assertions for its web site to log into your web site.

+

Verify SSL certificates

+

To verify an assertion, you may issue a POST request to https://verifier.login.persona.org/verify. You must ensure that your HTTPS request verifies the certificate sent from the server against a trusted root certificate. If you don't, then an attacker could pose as verifier.login.persona.org and issue false verifications.

+

Check that the library you are using to make the request verifies certificates correctly, and that you are initializing it with the appropriate root certificate(s).

+

For example, Python 2.7's standard urllib2 module does not validate server certificates. Instead, we recommend using the "requests" or "urllib3" modules in Python 2.x, or the standard http.client.HTTPSConnection class in Python 3.x. For Perl, ensure that you are using at least version 6.0 of libwww-perl. Depending on the language, library, and operating system that you're using, you may need to supply either a list of trusted CA roots or the single CA used by verifier.login.persona.org.

+

Implement CSRF protection

+

In a CSRF (Cross-Site Request Forgery) login attack, an attacker uses a cross-site request forgery to log the user into a web site using the attacker's credentials.

+

For example: a user visits a malicious web site containing a form element. The form's action attribute is set to an HTTP POST request to http://www.google.com/login, supplying the attacker's username and password. When the user submits the form, the request is sent to Google, the login succeeds and the Google server sets a cookie in the user's browser. Now the user's unknowingly logged into the attacker's Google account.

+

The attack can be used to gather sensitive information about the user. For example, Google's Web History feature logs all the user's Google search terms. If a user is logged into the attacker's Google account and the attacker has Web History enabled, then the user is giving the attacker all this information.

+

CSRF login attacks, and potential defenses against them, are documented more fully in Robust Defenses for Cross-Site Request Forgery (PDF). They're not specific to Persona: most login mechanisms are potentially vulnerable to them.

+

There are a variety of techniques which can be used to protect a site from CSRF login attacks, which are documented more fully in the study above.

+

One approach is to create a secret identifier in the server, shared with the browser, and require the browser to supply it when making login requests. For example:

+
    +
  1. As soon as the user lands on your site, before they try to log in, create a session for them on the server. Store the session ID in a browser cookie.
    2. +
  2. On the server, generate a random string of at least 10 alphanumeric characters. A randomly generated UUID is a good option. This is the CSRF token. Store it in the session.
    3. +
  3. Deliver the CSRF token to the browser by either embedding it in JavaScript or HTML as a hidden form variable.
    4. +
  4. Ensure that the AJAX submission or form POST includes the CSRF token.
    5. +
  5. On the server side, before accepting an assertion, check that the submitted CSRF token matches the session-stored CSRF token.
    6. +
+

Enhancements

+

Content Security Policy (CSP)

+

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware.

+

If you use CSP on your site, you may need to tweak your policy to enable Persona. Depending on your policy, you may need to:

+ +

An example Apache configuration might include:

+
Header set X-Content-Security-Policy: "default-src 'self'; frame-src 'self' https://login.persona.org ; script-src 'self' https://login.persona.org"
diff --git a/files/it/archive/mozilla/persona/the_implementor_s_guide/index.html b/files/it/archive/mozilla/persona/the_implementor_s_guide/index.html new file mode 100644 index 0000000000..2bd12dcc0b --- /dev/null +++ b/files/it/archive/mozilla/persona/the_implementor_s_guide/index.html @@ -0,0 +1,57 @@ +--- +title: The implementor's guide +slug: Archive/Mozilla/Persona/The_implementor_s_guide +tags: + - NeedsTranslation + - Persona + - TopicStub +translation_of: Archive/Mozilla/Persona/The_implementor_s_guide +--- +

The Quick setup guide should be enough to get you started, but when building a full production site you'll probably need features that aren't covered in that guide. In this page we've collected features that are commonly needed by sign-in systems, and explained the best-practice way to implement them with Persona.

+
+
+
+ Call logout() after a failed login
+
+ Always call logout() if you reject an assertion, to avoid a mismatch between your idea of the current user and Persona's idea, which can lead to an endless loop of failed logins.
+
+
+
+ Adding extra email addresses with Persona
+
+ How to let your users add secondary email addresses using Persona.
+
+
+
+ Enabling users to change their email address
+
+ How to let your users change their email address using Persona.
+
+
+
+ Problems integrating with CSRF protection
+
+ A problem caused by the interaction between a common mechanism for CSRF (Cross Site Request Forgery) protection and Persona's Observer API.
+
+
+
+ Supporting users who don't have JavaScript
+
+ Persona requires JavaScript. This page has some tips for supporting users who have JavaScript disabled.
+
+
+
+
+
+ Call request() or get() only from a key handler or in response to a keypress
+
+ Because Persona uses popup windows, you must call request() or get() only in response to a click or a key press, not some other event.
+
+
+
+ Testing your system
+
+ Some pointers for simulating users logging in and out of your website.
+
+
+

 

diff --git a/files/it/archive/mozilla/persona/the_implementor_s_guide/testing/index.html b/files/it/archive/mozilla/persona/the_implementor_s_guide/testing/index.html new file mode 100644 index 0000000000..4ace111864 --- /dev/null +++ b/files/it/archive/mozilla/persona/the_implementor_s_guide/testing/index.html @@ -0,0 +1,8 @@ +--- +title: Testing +slug: Archive/Mozilla/Persona/The_implementor_s_guide/Testing +translation_of: Archive/Mozilla/Persona/The_implementor_s_guide/Testing +--- +

If you're making a production system you will need to write integration tests that simulate logging a user in and out of your site using Persona.

+

If you're using Selenium for testing, consider using the bidpom library. The sites mockmyid.com and personatestuser.org may also be helpful.

+

You may also want to consider stubbyid.

diff --git a/files/it/archive/mozilla/persona/the_navigator.id_api/index.html b/files/it/archive/mozilla/persona/the_navigator.id_api/index.html new file mode 100644 index 0000000000..7ab75d0f93 --- /dev/null +++ b/files/it/archive/mozilla/persona/the_navigator.id_api/index.html @@ -0,0 +1,148 @@ +--- +title: La API navigator.id +slug: Archive/Mozilla/Persona/The_navigator.id_API +translation_of: Archive/Mozilla/Persona/The_navigator.id_API +--- +
For full details about the navigator.id API, refer to its reference pages.
+ +

With Persona, a website asks the user to provide an "assertion", which is a digitally signed email address. By verifying the signature, the site can be assured that the user really does control the address in question. The site can then use this email address as an identifier for that user.

+ +

To ask for an assertion, the website uses a JavaScript API defined by the id object, which is a member of the global navigator object.

+ +

In future we expect the id object to be built into the browser, but at the moment it isn't, so sites using Persona need to include the polyfill library hosted at https://login.persona.org/include.js in their pages. After that, they can work as if id is just a built-in member of navigator.

+ +

There are two current versions of the API: the "Callback API", and the newer "Observer API".

+ +

The Callback API

+ +

The Callback API consists of a single function, get(). It takes two arguments:

+ + + +

You call get(), and in the callback you send the assertion to the server to verify the assertion. If verification succeeds, you can log the user in:

+ +
var signin = document.getElementById('sign-in');
+signin.addEventListener("click", getAssertion, false);
+
+// get an assertion
+function getAssertion() {
+  navigator.id.get(verifyAssertion, {
+                     backgroundColor: "#606B72",
+                     siteName: "My Example Site"
+                   });
+}
+
+// send the assertion to the server for verification
+function verifyAssertion(assertion) {
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "/verify", true);
+  var param = "assertion="+assertion;
+  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhr.setRequestHeader("Content-length", param.length);
+  xhr.setRequestHeader("Connection", "close");
+  xhr.send(param);
+  xhr.onload = handleVerificationResponse(xhr);
+}
+ +

The Observer API

+ +

The Observer API consists of three functions: request(), watch(), and logout().

+ +

You call request() to ask for a signed assertion, as you do using get() in the old API. But request() doesn't take a callback parameter: instead, you call another function watch(), with which you register callbacks for onlogin and onlogout events. Persona calls these callbacks when a user logs in or out respectively. Like the callback to get(), the onlogin callback gets a signed assertion for you to verify.

+ +

You call logout() when a user logs out of your site, so Persona can update its state.

+ +

The main difference between this API and the Callback API is that the Callback API doesn't maintain any state: it doesn't have any idea which user is currently logged into Persona in general or any site in particular. Each website is responsible for its own session management.

+ +

By contrast the Observer API implements session management: the browser keeps track of which user it thinks is logged into a particular site and can trigger the onlogin and onlogout callbacks when its idea of the state changes. Because of this, you need to ensure that your website's state and Persona's state are kept in synch, and this tends to make the Observer API more complex to use.

+ +

Here's an example showing the Observer API:

+ +
var signin = document.getElementById('sign-in');
+var signout = document.getElementById('sign-out');
+
+signin.addEventListener("click", function() {
+  navigator.id.request();
+}, false);
+
+signout.addEventListener("click", function() {
+  navigator.id.logout();
+}, false);
+
+function handleUserResponse(xhr) {
+  return function() {
+    if (xhr.status == 200) {
+        if (xhr.responseText == "no user") {
+            logoutUser();
+        }
+        else {
+            loginUser(xhr.responseText);
+        }
+      navigator.id.watch({
+        loggedInUser: currentUser,
+        onlogin: function(assertion) {
+          verifyAssertion(assertion);
+        },
+        onlogout: function() {
+          logoutUser();
+        }
+      });
+    }
+    else {
+        navigator.id.logout();
+        alert("XMLHttpRequest error: " + xhr.status);
+    }
+  }
+}
+
+function checkCurrentUser() {
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", "/currentuser", true);
+  xhr.send();
+  xhr.onload = handleUserResponse(xhr);
+}
+
+checkCurrentUser();
+
+function loginUser(loggedInUser) {
+  // update your UI to show that the user is logged in
+}
+
+function logoutUser() {
+  // update your UI to show that the user is logged out
+}
+
+function handleVerificationResponse(xhr) {
+  // if successfully verified, log the user in
+}
+
+function verifyAssertion(assertion) {
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "/verify", true);
+  var param = "assertion="+assertion;
+  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhr.setRequestHeader("Content-length", param.length);
+  xhr.setRequestHeader("Connection", "close");
+  xhr.send(param);
+  xhr.onload = handleVerificationResponse(xhr);
+}
+
+ +

This code adds listeners which call request() and logout() when the user clicks "Sign in" and "Sign out" respectively. It then checks whether the server thinks someone is logged in already, and updates its UI if it thinks someone is. The code then calls watch() to start listening for login and logout events. When Persona triggers onlogout the code updates its state to log the user out, and when Persona triggers onlogin the code sends the assertion to the server for verification.

+ +

Although the Observer API is more complex to use, it provides two extra features: seamless first-time sign-in, and global logout.

+ +

Seamless first-time sign-in

+ +

The first time a user signs in using Persona, they may need to create a Persona account. This will happen if they haven't used Persona before and if their email provider does not support Persona. In this case they will be invited to create an account using the fallback provider operated by Mozilla, which will ask them to prove ownership of their email address. After creating an account, if the original website uses the Callback API, the user will not be automatically redirected to the website and signed in: they will have to navigate back to it.

+ +

If the website uses the Observer API, then once the user finishes creating their account with the fallback provider, they will be immediately redirected to the site, the watch() API will call the onlogin listener, and the user will be signed in.

+ +

Global logout

+ +

With the Observer API, the website listens to the onlogout event. If the user signs out of Persona by visiting https://login.persona.org/ and signing out there, then the Observer API triggers this event for all websites that are listening. In response, the site should log the user out.

+ +

This means that if the user doesn't always trust the other people that may access their computer, they can sign out in one place, and this will be propagated to all sites that use the Observer API. 

diff --git a/files/it/archive/mozilla/persona/why_persona/index.html b/files/it/archive/mozilla/persona/why_persona/index.html new file mode 100644 index 0000000000..b2f606d85b --- /dev/null +++ b/files/it/archive/mozilla/persona/why_persona/index.html @@ -0,0 +1,59 @@ +--- +title: Perché Persona per Mozilla? +slug: Archive/Mozilla/Persona/Why_Persona +translation_of: Archive/Mozilla/Persona/Why_Persona +--- +
+ Persona is an openly distributed, cross-browser identity system providing a solution to the traditional password model. It addresses the usability deficiencies that plague other privacy-related systems such as OpenID, without resorting to a centralized infrastructure such as Facebook Connect.
+
+  
+
+ The current approach for establishing and managing user names and passwords is tedious, inefficient, and unsecure. Users must create and remember complex passwords for each site and service. Sites then must securely encrypt and store passwords to prevent the leaking of sensitive information. The prevention and negation of security leaks is the primary reason for the use of Persona, but the flexibility of its systems outclasses most standard identity security systems.
+
+  
+
+
+ Note: For more detailed information about Persona and its functions see What is Persona and how does it work?
+
+

Persona eliminates the need for per-site passwords

+

Persona utilizes a safe, two-click system built on top of public-key cryptography for logging in to websites. The user's browser generates a cryptographic affirmation of identity that expires after a few minutes and is only valid on one site. By avoiding passwords, users do not need to worry about remembering several distinct passwords and need no longer be concerned with unsecure access to their password. This quick and easy sign-in process eliminates the current inefficiencies of traditional account registration and allows users to quickly establish accounts on websites.

+

Persona uses email addresses as identities

+
+
+
+
+ Persona's system relies on email addresses as their key component because of email's inherent versatile and private nature. The pre-existing infrastructure works very well from not only a design perspective but an ideal perspective of openly maintained and safe transfer of identity across the Internet.
+
+
+
+

 

+

Benefits for the user

+ +
+

Advantages for developers

+
+ +
+

How Persona is different from other providers of single sign-on

+
+

Persona protects privacy, provides the user with control, and embellishes choice in a way that other security providers can't. Many social networks like Facebook and Google+ require users to use their real names, accept their policies, and limit users to only one account. Persona allows users to keep their work, school, and social identities separate by using email addresses as a unique identifier rather than real names. Because of this anonymity you are guaranteed an extra layer of identity and network protection that most social networks do not have.

+

Persona also takes a new approach to protecting user privacy by placing the user's browser in the center of the authentication process. The browser obtains credentials provided by the user's email, then presents these credentials to a website. The email provider cannot track the user, but sites can still have confidence in the identity of the user by cryptographically verifying the credentials. Most other systems, even distributed systems like OpenID, require sites to connect to central networks before allowing a user to log in.

+

The efficiency of Persona allows an advanced relationship between developers and users. Mozilla is leading the way in open and free web development, and Persona supports Mozilla's design philosophy through its easy-to-use interface and user protection features.

diff --git a/files/it/archive/mozilla/xbl/index.html b/files/it/archive/mozilla/xbl/index.html new file mode 100644 index 0000000000..d47f050234 --- /dev/null +++ b/files/it/archive/mozilla/xbl/index.html @@ -0,0 +1,27 @@ +--- +title: XBL +slug: Archive/Mozilla/XBL +tags: + - Tutte_le_categorie + - XBL +translation_of: Archive/Mozilla/XBL +--- +

+

XML Binding Language (XBL, a volte chiamato anche Extensible Bindings Language) è un linguaggio per descrivere i binding che possono essere associati ad elementi di altri documenti. L'elemento al quale il binding è associato, chiamato bound element, acquisisce il nuovo comportamento specificato dal binding. +

I binding possono contenere gestori di eventi che sono registrati per il bound element, un'implementazione di nuovi metodi e proprietà che divengono accessibili dal bound element e del contenuto anonimo che viene inserito sotto il bound element. +

La maggior parte dei widget XUL sono almeno parzialmente implementati utilizzando XBL. E' inoltre possibile costruire widget riutilizzabili partendo da XUL, HTML, SVG e altri linguaggi utilizzando XBL. +

+

Specifiche

+

XBL 1.0 è specificato in XBL 1.0 Reference. Purtroppo, l'attuale implementazione in Mozilla è differente dalle specifiche e non vi è alcun documento conosciuto che descriva tali differenze. E' sperabile che la Reference venga aggiornata per descrivere l'implementazione di Mozilla. +

XBL 1.0 è una tecnologia specifica di Mozilla e non uno standard W3C. Tuttavia, si sta lavorando su almeno due standard: sXBL e XBL 2.0. +

+ +

Alcune differenze tra sXBL e XBL2 sono elencate in un articolo di Anne van Kesteren (EN). +

+

Vedi anche

+ +{{ languages( { "en": "en/XBL", "fr": "fr/XBL", "pl": "pl/XBL", "pt": "pt/XBL" } ) }} diff --git a/files/it/archive/mozilla/xul/index.html b/files/it/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..5de9e8752f --- /dev/null +++ b/files/it/archive/mozilla/xul/index.html @@ -0,0 +1,63 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +tags: + - Tutte_le_categorie + - XUL +translation_of: Archive/Mozilla/XUL +--- +

 

+ +
Tutorial XUL
+Un tutorial guidato che aiuta i principianti a iniziare a programmare in XUL, originariamente pubblicato in XULPlanet.
+ +
XUL (XML User Interface Language) è un linguaggio di Mozilla basato su XML che permette di creare applicazioni multipiattaforma, ricche di funzionalità, che possono funzionare connesse a Internet oppure no. Queste applicazioni possono essere facilmente personalizzate con testi alternativi, elementi grafici, e layout, in modo che possano essere facilmente personalizzate o localizzate. Gli sviluppatori web che già conoscono l'HTML dinamico (DHTML) possono imparare XUL e iniziare a sviluppare rapidamente. Aprendo la pagina XUL Periodic Table con Firefox o un qualsiasi altro browser basato su Gecko si vedranno alcuni esempi dimostrativi di XUL.
+ + + + + + + + +
+

Documentazione

+ +
+
Reference sugli elementi XUL
+
Si veda anche la documentazione MDC su Sistema di Preferenze e richlistbox.
+
+ +
+
La gioia di XUL
+
Descrive le funzionalità e i componenti principali di XUL.
+
+ +
+
Adattare le applicazioni XUL per Firefox 1.5
+
Una lista di cambiamenti in Firefox 1.5 che interessano gli sviluppatori.
+
+ +
+
Guida ai Template XUL
+
Una guida dettagliata sui Template di XUL, che servono essenzialmente a generare contenuti da una fonte dati.
+
+ 		+

Strumenti

+ + + +

Argomenti correlati

+ +
+
JavaScript, XBL, CSS, RDF, Estensioni, XULRunner
+
+
+ +

Interwiki Language Links

+ +

{{ languages( { "en": "en/XUL", "es": "es/XUL", "fr": "fr/XUL", "ja": "ja/XUL", "pl": "pl/XUL", "pt": "pt/XUL" } ) }}

diff --git a/files/it/archive/mozilla/xul/tutorial/index.html b/files/it/archive/mozilla/xul/tutorial/index.html new file mode 100644 index 0000000000..30a8c31e2c --- /dev/null +++ b/files/it/archive/mozilla/xul/tutorial/index.html @@ -0,0 +1,170 @@ +--- +title: Guida a XUL +slug: Archive/Mozilla/XUL/Tutorial +tags: + - Guide + - XUL + - XUL_guida +translation_of: Archive/Mozilla/XUL/Tutorial +--- +

Questo tutorial descrive XUL, the XML Il linguaggio di interfaccia utente. Questo linguaggio è stato creato per le applicazioni Mozilla e viene utilizzato per descrivere l' interfaccia utente.

+ +

Introduzione

+ + + +

Elementi basilari

+ + + +

Il Modello a scatola

+ + + +

Altri elementi di Layout

+ + + +

Barre degli strumenti e Menù

+ + + +

Eventi e Script

+ + + +

Modello ad oggetti del documento

+ + + +

Alberi

+ + + +

RDF e Modelli

+ + + +

Temi e Località

+ + + +

Collegamenti

+ + + +

Tipi di finestre specializzate

+ + + +

Installazione

+ + + +
+

Questa guida XUL è stata originariamente creata da Neil Deakin. Lui ha cortesemente dato a noi il permesso di usarla come parte di MDN.

+
+ +
+

Informazioni sul documento originale

+ + +
+ +

 

diff --git a/files/it/archive/mozilla/xulrunner/a_cosa_serve_xulrunner/index.html b/files/it/archive/mozilla/xulrunner/a_cosa_serve_xulrunner/index.html new file mode 100644 index 0000000000..6ad5d00746 --- /dev/null +++ b/files/it/archive/mozilla/xulrunner/a_cosa_serve_xulrunner/index.html @@ -0,0 +1,63 @@ +--- +title: A cosa serve XULRunner +slug: Archive/Mozilla/XULRunner/A_cosa_serve_XULRunner +translation_of: Archive/Mozilla/XULRunner/What_XULRunner_Provides +--- +

 

+

L'obbiettivo di XULRunner è fornire una soluzione per il rilascio di applicazioni XUL (in particolare Firefox e Thunderbird) e fornire un meccanismo per incorporare parti di programma. Le seguenti funzionalità sono già state implementate o sono pianificate:

+

 

+

Funzionalità di Gecko

+ +

Funzionalità dell'interfaccia utente

+

I seguenti elementi dell'interfaccia utente sono forniti da XULRunner, ma possono essere sovrascritti dai programmi quando necessario:

+ +

Incorporare le API

+

Le API seguenti sono contenute in XULRunner:

+ +

La lista dei "forse"

+

Le seguenti funzionalità sono state discusse e potrebbero essere incluse in XULRunner per il tempo lo permette e le dimensioni del codice saranno accettabili:

+ +

Cosa rimane fuori

+

XULRunner non fornisce:

+ +

Interwiki Language Links

+

{{ languages( { "en": "en/XULRunner/What_XULRunner_Provides", "ja": "ja/XULRunner/What_XULRunner_Provides" } ) }}

diff --git a/files/it/archive/mozilla/xulrunner/applicazioni_basate_su_xulrunner/index.html b/files/it/archive/mozilla/xulrunner/applicazioni_basate_su_xulrunner/index.html new file mode 100644 index 0000000000..fddf5aef0f --- /dev/null +++ b/files/it/archive/mozilla/xulrunner/applicazioni_basate_su_xulrunner/index.html @@ -0,0 +1,45 @@ +--- +title: Applicazioni basate su XULRunner +slug: Archive/Mozilla/XULRunner/Applicazioni_basate_su_XULRunner +tags: + - XULRunner +translation_of: Archive/Mozilla/XULRunner/Hall_of_Fame +--- +

+

In questa pagina tentiamo di tenere traccia di tutte le applicazioni esistenti basate su XULRunner. +

+ +{{ languages( { "en": "en/XULRunner_Hall_of_Fame", "fr": "fr/Floril\u00e8ge_des_applications_XULrunner" } ) }} diff --git a/files/it/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html b/files/it/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html new file mode 100644 index 0000000000..0a9c732401 --- /dev/null +++ b/files/it/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html @@ -0,0 +1,271 @@ +--- +title: Primi passi con XULRunner +slug: Archive/Mozilla/XULRunner/Getting_started_with_XULRunner +translation_of: Archive/Mozilla/XULRunner/Getting_started_with_XULRunner +--- +

{{ Next("Windows and menus in XULRunner") }}

+ +

Questo articolo è stato rivisto e riscritto da Luigi Sentina. La mission di questo è quella di mostrare con un semplice esempio come sia facile costruire applicazioni dektop e molto altro ancora con la tecnologia messa a disposizione da XULrunner. L'articolo originale un pò "datato" (dato che faceva riferimento ad una vecchia versione di XULRunner) è stato rivisto sulla base dell'esempio originale (dato che non realmente testato per qualsiasi informazione potete contattarmi a info@luigisentina.com) Nell'esempio verrà creata la classica applicazione "Ciao Mondo" utilizzando la versione "runtime" (vedere sotto).

+ +

L'alternativa è la versione SDK ma ci vogliono conoscenze del linguaccio C++ e affini! Per correttezza vi rimando il link originale se qualcuno dovesse essere interessato:  Creating XULRunner Apps with the Mozilla Build System.

+ +

Step 1: Download XULRunner

+ +

Puoi trovare il download di XULRunner nella pagina principale di MDC. Dal momento che non stiamo creando componenti XPCOM binari, Dobbiamo scaricare il pacchetto di runtime XULRunner, non l'SDK.

+ +

Il download di XULRunner per Windows prevede un file zip da scompattare in una determianta "posizione" all'interno della nostra applicazione. Quindi non c'e nessun programma da installare. Il vantaggio è propio questo, non avendo un installer rende possibile creare applicazioni "stand-alone" ovvero quelle applicazioni che funzionano in maniera autonoma e svincolata da altri oggetti o software. Inoltre il fatto che non si "agganci" al sistema Windows non rischiamo di creare alcun conflitto da una possibile installazione o disintallazione di XULRunner.

+ +

La versione MAC è distribuita nel formato compresso  tar.bz2. Come per Windows estraggo il contenuto direttamente nella mia applicazione anche se in molte guide vi diranno di installarlo nel percorso locale:  /Library/Frameworks.

+ +

In Ubuntu desktop e le sue varianti (Xubuntu, Kubuntu, ...), dalla versione 11.10 (Oneiric Ocelot), XULRunner non è più mantenuto e non esiste nel repository di Ubuntu. Pertanto, è necessario compilare XULRunner manualmente o scaricare una versione binaria dal server FTP di Mozilla. Un modo per raggiungere questo obiettivo è quello di eseguire il seguente script ogni volta che si desidera installare una nuova versione:

+ +
FIREFOX_VERSION=`grep -Po  "\d{2}\.\d+" /usr/lib/firefox/platform.ini`
+ARCH=`uname -p`
+XURL=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/$FIREFOX_VERSION/runtimes/xulrunner-$FIREFOX_VERSION.en-US.linux-$ARCH.tar.bz2
+cd /opt
+sudo sh -c "wget -O- $XURL | tar -xj"
+sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner
+sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell
+ +

Per comodità si potrebbe anche salvare questo script in un file. Nota: Se si utilizza Firefox costruire dal repository Ubuntuzilla e sostituire / usr / lib / firefox / platform.ini con / opt / firefox / platform.ini.

+ +

Step 2: Installazione di  XULRunner

+ +

Su Windows, scompattare temporanemaente il file zip in una cartella qualsiasi. Come vedremo più avani per creare un applicazione esiste una gerarchia per le applicazioni basata su XULRunner. Quindi in seguito verrà spostata o copiata nella posizione finale.

+ +

Su Mac, estrarre il contenuto del archivio tar.bz2 , e copiarne (temporaneamente) il contenuto nella directory: /Library/Frameworks directory, o se preferite anche in un altra posizione.

+ +

Su Linux, è sufficiente scompattare l'archivio, se si utilizza XULRunner pre-release.

+ +
+

In alternativa, se hai scaricato l'archivio compresso di XULRunner e vuoi installare sul vostro sistema potete farlo eseguendo

+ +

xulrunner --register-global

+ +

come amministratore per registrare XULRunner per tutti gli utenti della macchina.
+
+ Per registrare XULRunner per una singolo utente

+ +

xulrunner --register-user

+
+ +
+

In tutti i sistemi puoi decomprimere il file omni.ja in qualche directory cambiare l'estensione del file in ".zip" e quindi utilizzare lo strumento di decompressione del file system normale per aprirlo. I contenuti di omni.ja sono disponibili per le applicazioni XULRunner e utili risorse per costruire facilmente incredibili applicazioni!

+
+ +

Step 3: Creare la struttura delle cartelle

+ +

Per capire la struttura di un' applicazione XULRunner procederemo con il classico esempio "Ciao mondo".

+ +

Su Windows ho creato una nuova cartella nel percorso c:\program files\miaapp
+ La struttura "gerarchica" di un applicazione su tutti i sistemi operativi è la seguente:

+ +
+ miaapp/
+|
++-+ chrome/
+| |
+| +-+ content/
+| | |
+| | +-- main.xul
+| | |
+| | +-- main.js
+| |
+| +-- chrome.manifest
+|
++-+ defaults/
+| |
+| +-+ preferences/
+|   |
+|   +-- prefs.js
+|
++-- application.ini
+|
++-- chrome.manifest
+
+ +

Nell'esempio si noti che ci sono 5 file nella struttura di cartelle: Application.ini, chrome.manifest (2), prefs.js e main.xul. Il file / chrome / chrome.manifest è facoltativo, ma potrebbe essere utile per la retrocompatibilità. Vedere la nota che segue.

+ +
+

Per maggiori dettagli sulla struttura di fasci installabili in generale, consultare:: Structure of an installable bundle.

+
+ +
Nota: Nelle prime release di XULRunner il file chrome.manifest risiedeva nella root principale come mostrato nella gerarchia sopra. Nelle versioni precedenti è stato spostato nella cartella chrome. Tuttavia per avere una retrocompatibilità lasceremo entrambe i file dove nel primo (root) avrà il link al secondo file dentro chrome e quindi al suo interno comparirà solamente il path: manifest chrome/chrome.manifest. Il contenuto del secondo è spiegato più sotto. 
+ +

I file nell'applicazione di esempio
+
+ Step 4: Il file application.ini

+ +

Il file application.ini è il punto di ingresso per la nostra applicazione. In questo file è sono specificate alcuni parametri di configurazione per la piattaforma XULrunner usata. Sotto per il nostro esempio

+ +
[App]
+Vendor=XULTest
+Name=miaapp
+Version=1.0
+BuildID=20100901
+ID=xulapp@xultest.org
+
+[Gecko]
+MinVersion=16.0
+MaxVersion=22.0
+
+ +
Nota: MinVersion e MaxVersion sono fondamentali per il funzionamento indicano il "range" della versione XULRunner della nostra applicazione. Al momento della stesura di questo testo l'ultima versione disponibile è la 22. (MaxVersion:22.0). 
+ +
Nota: Il nome della nostra applicazione deve avere un minimo di 3 caratteri tutti minuscoli
+ +

Step 5: I  file chrome.manifest

+ +

Il file chrome manifest è usato da XULRunner per specificare gli URI (percorsi) per le risorse utilizzate. Queste possono essere file  JAR o file non compressi o cartelle. Nel nostro esempio utilizziamo cartelle non compresse. Questo è il contenuto del nostro file nella directory chrome/chrome.manifest: (da non confondere con quello nella root principale)

+ +
 content miaapp content/
+
+ +

Come gia spiegato nello Step 3, il file chrome.manifest nella root princiapale conterrà solamente il path che punta al "reale" chrome.manifest.Il contenuto pertanto (ripeto) sarà:

+ +
manifest chrome/chrome.manifest
+ +

Step 6: Il file prefs.js

+ +

Il file prefs.js può contenere molte proprietà a seconde del tipo di applicazione che state creando (per farvi un idea digitate sul browser Firefox about:config e premete il pulsante "farò attenzione"). Nel nostro esempio usiamo una configurazione minima, la più importante che non può mancare è la prima riga. Questa infatti setta la prima pagina (finestra) XUL che verrà aperta quando lanceremo la nostra applicazione (nell' esempio main.xul).
+ Queso è il contenuto:

+ +
pref("toolkit.defaultChromeURI", "chrome://myapp/content/main.xul");
+
+/* debugging prefs, disable these before you deploy your application! */
+pref("browser.dom.window.dump.enabled", true);
+pref("javascript.options.showInConsole", true);
+pref("javascript.options.strict", true);
+pref("nglayout.debug.disable_xul_cache", true);
+pref("nglayout.debug.disable_xul_fastload", true);
+
+ +
+

Le varie prefs sono descritte nel dettagli qui: XULRunner:Specifying Startup Chrome Window.

+ +

Per quelle di Debug qui: Debugging a XULRunner Application

+
+ +

Step 7: Il file main.xul

+ +

Faccio un premessa, il nome "main.xul" non è obbligatorio la pagina può chiamarsi come meglio credete l'importante è che vi ricordiate di cambiare il nome anche nel file prefs.js allo step 6. Creeremo una semplice XUL window, (finestra xul) con il minimo indispensabile per il nostro esmpio "Ciao Mondo". Ecco come si presenta il nostro file main.xul:

+ +
<?xml version="1.0"?>
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <script type="application/javascript" src="chrome://myapp/content/main.js"/>
+
+  <caption label="Ciao Mondo"/>
+  <separator/>
+  <button label="More >>" oncommand="showMore();"/>
+  <separator/>
+  <description id="more-text" hidden="true">E' solamente un semplie esempio ma con l'esperienza potrete creare delel vere e proprie applicazioni professionali!</description>
+
+</window>
+
+ +
Nota: Assicurarsi che no vi siano spazi bianchi all'inizio del filee XML/XUL
+ +

come potete notare viene incluso nel file xul il relativo file .Js (è buona norma chiamarli nello stesso modo). Nel "button" viene richiamata attraverso il "command" (che equivale al classico "onclick") la funzione shoMore();  che ovviamente sarà all'interno del file javascript. Si possono includere molti file .Js a seconde delle esigenze!
+  

+ +

Il file main.js

+ +

ecco l'unica funzione all'interno del nostro file main.js:

+ +
function showMore() {
+  document.getElementById("more-text").hidden = false;
+}
+
+ +
+

Per maggiori informazioni su potete vedere qui:  XUL

+ +

Per implementare html ai file XUL vedere qui Adding HTML Elements.

+
+ +

Step 8: Eseguire l' applicazione

+ +

Finalmente vediamo come eseguire la nostra applicazione.

+ +

Windows

+ +

Apriamo una finestra di prompt, e proviamo ad eseguire questo comando:

+ +
c:\miaapp\xulrunner\xulrunner.exe c:\miaapp\application.ini
+
+ +

Se avete creato l'applicazione sulla cartella programmi potete usare

+ +
​%ProgramFiles%\miaapp\xulrunner\xulrunner.exe %ProgramFiles%\miaapp\application.ini
+
+ +

per la cartella "Program File (x86)" nei sistemi a 64 bit usare questo: 

+ +
​%ProgramFiles(x86)
+ +
+

Nota:  Puoi anche creare un vero e proprio file di installer per distribuire la tua creazione per maggiori dettagli vedere Creare un Installer per Applicazioni XUL.

+
+ +

Mac

+ +

On the Mac, before you can run a XULRunner application with everything intact, you must install it using the --install-app xulrunner commandline flag. Installing the application creates an OS X application bundle:

+ +
 /Library/Frameworks/XUL.framework/xulrunner-bin --install-app /<path>/<to>/myapp.zip
+
+ +

Once installed, you can run the application:

+ +
 /Library/Frameworks/XUL.framework/xulrunner-bin "/Applications/Finkle/TestApp.app/Contents/Resources/application.ini"
+
+ +

You may run it without installing (but with the menu bar and dock icon missing) in OS X by typing:

+ +
/Library/Frameworks/XUL.framework/xulrunner-bin "/<full path>/TestApp/application.ini"
+
+ +
+

Note: The full path is required or a "Error: couldn't parse application.ini."-message will be returned.

+
+ +

This might also be simplified using a very simple shell script (i call mine "run.sh"):

+ +
#!/bin/sh
+/Library/Frameworks/XUL.framework/xulrunner-bin `pwd`/application.ini
+
+ +

Linux

+ +

On Ubuntu, you can run the application from a terminal. First change into the \myapp folder, then start the application by:

+ +
 xulrunner application.ini
+
+ +

You should now see a window that looks something like this. This particular screenshot is from Ubuntu 10.

+ +

myapp-screenshot.png

+ +

Alternative: Run XUL apps with Firefox

+ +

With Firefox 3 and later, you can tell the Firefox executable to run a XUL application from the command line. The XUL application will run instead of the Firefox browser that normally starts. This is similar to starting a XUL app using XULRunner. See Using Firefox to run XULRunner applications. This does not work if Firefox itself was installed as a XUL app - you need to use the installed XULRunner directly.

+ +

Further Reading:

+ +

There are many things you can do with XULRunner. Before you get too far into things you might want to read the XULRunner tips article. Also, throughout this tutorial you've been introduced to various bits of the Toolkit API and it may help you to get familiar with it. Once you've got an application that's ready for the world you'll love our article titled Deploying XULRunner.

+ +

For now, click the "next" link to learn about windows and menus in XULRunner!

+ +

{{ Next("Windows and menus in XULRunner") }}

+ +
+

Original Document Information

+ + +
+ +

{{ languages( { "ja": "ja/Getting_started_with_XULRunner", "ko": "ko/Getting_started_with_XULRunner" } ) }}

diff --git a/files/it/archive/mozilla/xulrunner/index.html b/files/it/archive/mozilla/xulrunner/index.html new file mode 100644 index 0000000000..ecb6ce492f --- /dev/null +++ b/files/it/archive/mozilla/xulrunner/index.html @@ -0,0 +1,11 @@ +--- +title: XULRunner +slug: Archive/Mozilla/XULRunner +translation_of: Archive/Mozilla/XULRunner +--- +

 

+

XULRunner è un pacchetto di runtime Mozilla che può essere utilizzato per l'avvio di applicazioni XUL + XPCOM, anche ricche come Firefox e Thunderbird. Fornisce il meccanismo per installare, aggiornare e disinstallare tali applicazioni. XULRunner fornisce inoltre libxul, una soluzione che permette di incorporare le tecnologie Mozilla in altri programmi.

+ +

Versioni

XULRunner 1.8.0.4 è una developer preview stabile, basata sullo stesso codice di base di Firefox 1.5.0.4. E' disponibile per Windows, Mac OS X e Linux, in inglese. Si vedano le note di rilascio per ulteriori dettagli sull'installazione, la disinstallazione e altro.

Panoramica

Documentazione

Applicazioni di esempio
Semplici applicazioni che è possibile copiare.
A XULRunner Tutorial (EN)
Una breve introduzione a XULRunner.
Rilasciare applicazioni con XULRunner 1.8
Spiega come utilizzare XULRunner 1.8 per sviluppare e rilasciare applicazioni XUL standalone in ambiente di produzione.
Applicazioni basate su XULRunner
Tutte le applicazioni disponibili basate su XULRunner.

Argomenti correlati
+

 

+

{{ languages( { "ca": "ca/XULRunner", "en": "en/XULRunner", "es": "es/XULRunner", "fr": "fr/XULRunner", "zh-cn": "cn/XULRunner", "ja": "ja/XULRunner", "pl": "pl/XULRunner" } ) }}

diff --git a/files/it/archive/mozilla/xulrunner/note_di_rilascio_di_xulrunner_1.8.0.4/index.html b/files/it/archive/mozilla/xulrunner/note_di_rilascio_di_xulrunner_1.8.0.4/index.html new file mode 100644 index 0000000000..f2557a0040 --- /dev/null +++ b/files/it/archive/mozilla/xulrunner/note_di_rilascio_di_xulrunner_1.8.0.4/index.html @@ -0,0 +1,82 @@ +--- +title: Note di rilascio di XULRunner 1.8.0.4 +slug: Archive/Mozilla/XULRunner/Note_di_rilascio_di_XULRunner_1.8.0.4 +translation_of: Archive/Mozilla/XULRunner/1.8.0.4 +--- +

XULRunner 1.8.0.4 è una versione di anteprima stabile del framework Mozilla XULRunner. Essa rimpiazza la versione 1.8.0.1; tutti gli utenti dovrebbero aggiornarla. La nuova versione fornisce gli strumenti per lanciare applicazioni XUL standalone ed incorporare le API che possono essere utilizzate per visualizzare le pagine web in applicazioni nativa o in applicazioni Java. +

+

Requisiti di sistema

+

Prima dell'installazione, assicurarsi che il computer risponda ai requisiti di sistema. I requisiti minimi sono identici a quelli di Firefox. +

+

Installare XULRunner

+

Mozilla fornisce XULRunner per Windows, Mac OS X e Linux, al momento solo in inglese: +

+ +

Windows

+ +

Mac OS X

+ +

Linux

+ +


+

+

Disinstallare XULRunner

+

Windows/Linux

+ +

Mac OS X

+

Se si hanno più versioni di XULRunner installate sul sistema, non è possibile disinstallarne soltanto una. +

+ +

Installare applicazioni XUL

+

Le applicazioni XUL si possono ottenere da diverse fonti e sono tipicamente compresse in un archizio ZIP con l'estensione <tt>.xulapp</tt> o <tt>.xpi</tt>. +

+ +

Windows

+

Eseguire il seguente comando da Avvio -> Esegui o dal prompt dei comandi: +"C:\Program Files\Mozilla XULRunner\1.8.0.4\xulrunner\xulrunner.exe" --install-app "C:\Documents and Settings\UTENTE\Desktop\NOME_APPLICAZIONE.xpi" +

L'applicazione verrà installata in <tt>C:\Program Files\NOME_VENDITORE\NOME_APPLICAZIONE</tt> +

+

Mac OS X

+

Eseguire il seguente comando dal Terminale: +

+
/Library/Frameworks/XUL.framework/xulrunner-bin --install-app ~/Desktop/NOME_APPLICAZIONE.xpi
+
+

L'applicazione verrà installata in <tt>/Applications/NOME_VENDITORE/NOME_APPLICAZIONE</tt> +

+

Linux

+

Eseguire il seguente comando dalla shell: +

+
/opt/xulrunner/1.8.0.4/xulrunner/xulrunner --install-app ~/Desktop/NOME_APPLICAZIONE.xpi
+
+

L'applicazione verrà installata in <tt>/usr/lib/NOME_VENDITORE/NOME_APPLICAZIONE</tt> +

+

Problemi conosciuti

+ +

Frequently Asked Questions

+

+
Perchè installare XULRunner è così complicato? Perchè non c'è un facile programma di installazione? +
Perchè nessuno lo ha ancora creato! Questa versione è un'anteprima per sviluppatori: ulteriori funzionalità per l'installazione e il rilascio di XULRunner e delle applicazioni basate su di esso saranno disponibili in versioni future. +

Sto scrivendo un'applicazione XUL, come posso rilasciarla? +
Per ora Mozilla consiglia che XULRunner venga rilasciato privatamente insieme ad ogni applicazione. Si veda Rilasciare applicazioni con XULRunner 1.8 per ulteriori informazioni. +

Dove sono i sorgenti? +
Qui. +

Credo di aver trovato un bug, come posso segnalarlo? +
bugzilla.mozilla.org viene utilizzato per tenere traccia dei bug di tutti i prodotti Mozilla. Per favore, prima di segnalare un nuovo bug controlla se è già stato segnalato da qualcun altro. +

Come posso aiutarvi? +
Se vuoi aiutare gli sviluppatori di XULRunner ma non sai da dove iniziare, visita la pagina della XULRunner:Community e poni domande sui newsgroup o sul canale IRC. +

+{{ languages( { "en": "en/XULRunner_1.8.0.4_Release_Notes", "fr": "fr/Notes_de_versions_de_XULRunner_1.8.0.4", "ja": "ja/XULRunner_1.8.0.4_Release_Notes" } ) }} diff --git a/files/it/archive/mozilla/xulrunner/xulrunner_faq/index.html b/files/it/archive/mozilla/xulrunner/xulrunner_faq/index.html new file mode 100644 index 0000000000..6602428faa --- /dev/null +++ b/files/it/archive/mozilla/xulrunner/xulrunner_faq/index.html @@ -0,0 +1,24 @@ +--- +title: XULRunner FAQ +slug: Archive/Mozilla/XULRunner/XULRunner_FAQ +tags: + - XULRunner +translation_of: Archive/Mozilla/XULRunner/FAQ +--- +

+

Questa pagina ha lo scopo di rispondere alle domande più frequenti e correggere gli errori più comuni riguardo a XULRunner. +

+
XULRunner è un browser? +
No. Si può utilizzare XULRunner per creare un browser (come mybrowser example o Firefox), ma non esiste "il browser XULRunner". +

XULRunner è uno strumento di sviluppo? +
Non esattamente; XULRunner è una tecnologia internet runtime. Può essere utilizzato per creare strumenti di sviluppo (l'AJAX Toolkit Framework, per esempio). In futuro ci sarà un XULRunner Developer Kit che conterrà vari strumenti di sviluppo. +

XULRunner assomiglia a linguaggi di programmazione come Java o .NET (o Python o...)? +
L'obiettivo di XULRunner è facilitare lo sviluppo e il rilascio di applicazioni internet. Non è concepito per essere un ambiente runtime completo; per questo XULRunner richiede poca memoria e una più semplice strategia di rilascio rispetto a un runtime completo. +

Se utilizzo XULRunner devo scrivere le mie applicazioni in XUL? +
No! Puoi scrivere le tue applicazioni in un qualunque linguaggio supportato dalla piattaforma web Mozilla, compresi HTML, XHTML, SVG, o XUL. +

Ma allora perchè si chiama XULRunner, invece di HTMLRunner o qualche altro nome simile? +
Il nome non è definitivo. E' possibile proporre nomi alternativi a Benjamin Smedberg. +

Quando Firefox si baserà su XULRunner? +
Si veda la XULRunner roadmap. Attualmente è previsto per Firefox 3 (XULRunner 1.9), verso la fine del 2007. +

+{{ languages( { "en": "en/XULRunner_FAQ", "fr": "fr/FAQ_de_XULRunner", "ja": "ja/XULRunner_FAQ" } ) }} diff --git a/files/it/archive/rss/index.html b/files/it/archive/rss/index.html new file mode 100644 index 0000000000..bd80105f0c --- /dev/null +++ b/files/it/archive/rss/index.html @@ -0,0 +1,35 @@ +--- +title: RSS +slug: Archive/RSS +tags: + - RSS + - Tutte_le_categorie +translation_of: Archive/RSS +--- +

+

+
RSS:Iniziare
+Una guida RSS per i principianti.
+

Really Simple Syndication (RSS) è un formato dati molto popolare, simile ad HTML e basato su XML per riassumere le news di un sito. Questo formato ha una storia confusa ed esiste una moltitudine di Versioni RSS incompatibili tra loro. Alcune di esse sono basate su RDF, mentre altre (la maggior parte) sono basate su XML. Indipendentemente da ciò, RSS è molto usato per segnalare su un sito le news di un altro sito, i post su un blog, IPradio e IPTV. +

+ + +
+

Documentazione

+
Perchè RSS Slash è popolare - contare i commenti +
Charles Iliya Krempeaux ha scritto questo articolo sul modulo RSS Slash, sul perchè è così diffuso e come utilizzarlo per avere un conteggio dei commenti. +
+
The Myth of RSS Compatibility (EN) +
Mark Pilgrim racconta la storia di RSS e alcuni dettagli delle incompatibilità tra le diverse versioni. +
+
Atomic RSS (EN) +
Tim Bray spiega come utilizzare Atom 1.0 come microformato e il modulo per RSS 2.0. +
+		 +

Argomenti correlati

+ +
+

Interwiki Language Links +

{{ languages( { "en": "en/RSS", "fr": "fr/RSS", "ja": "ja/RSS", "pl": "pl/RSS", "pt": "pt/RSS" } ) }} diff --git a/files/it/archive/rss/iniziare/index.html b/files/it/archive/rss/iniziare/index.html new file mode 100644 index 0000000000..b6b7419afd --- /dev/null +++ b/files/it/archive/rss/iniziare/index.html @@ -0,0 +1,6 @@ +--- +title: Iniziare +slug: Archive/RSS/Iniziare +translation_of: Archive/RSS/Getting_Started +--- +

(empty)

diff --git a/files/it/archive/standard_web/index.html b/files/it/archive/standard_web/index.html new file mode 100644 index 0000000000..485e14ddca --- /dev/null +++ b/files/it/archive/standard_web/index.html @@ -0,0 +1,75 @@ +--- +title: Standard Web +slug: Archive/Standard_Web +tags: + - Standard_Web + - Tutte_le_categorie +translation_of: Archive/Web_Standards +--- +

 

+
+ Gli standard del Web sono stati progettati per trarre i benefici piu grandi dal enorme numero di utenti, assicurando la visibilità a lungo termine di qualsiasi documento publicato sul Web.Seguendo questi standard la progettazione e la realizzazione del Web sono semplificate e i costi di produzione sono minimizzati, permettendo la distribuzione di siti che sono acessibili dalla maggior parte di persone e di dispositivi Internet.I siti sviluppati seguendo questa traccia continueranno a funzionare correttamente nonostante l'evoluzione dell'interfaccia del broswer o il lancio di nuovi dispositivi internet nel mercato.
+ + + + + + + +
+

Documentazione

+
+
+ Importare applicazioni da Internet Explorer a Mozilla
+
+ Hai mai avuto qualche problema provando a far lavorare le applicazioni specifiche per Internet Explorer con Mozilla? Questo articolo copre le problematiche comuni associate all'importazione di applicazioni al broswer open source basato su Mozilla.
+
+
+
+ Usare gli standard Web nelle tue pagine Web
+
+ Questo articolo mostra una panoramica sul processo di aggiornamento sui contenuti delle tue paggine Web in accordo con gli standard W3C.
+
+
+
+ Scegliere gli standard in accordo alle pratiche proprietarie
+
+ Nel mondo dello sviluppo, gli standard sono necessari perchè le applicazioni sono disegnate da diversi gruppi di sviluppatori.
+
+
+
+ I vantaggi degli standard Web nel business
+
+ Questo articolo discute come su come aderire agli standard Web, lasciandosi alle spalle tecnologie e markup proprietari, e contriubuendo al raggiungimento degli obiettivi dell'azienda.
+
+

Vedi tutti...

+ 		+

Communità

+
    +
  • Vedi forum Mozilla...
    • +
+

{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }}

+ +

Tools

+ +

View All...

+ +
+
+ CSS, DHTML, HTML, Sviluppo Web, XHTML, XML
+
+
+
+

{{ Note(1) }} - The Web Standards Project

+

Categories

+

Interwiki Language Links

+

 

+

{{ languages( { "ca": "ca/Est\u00e0ndards_web", "de": "de/Web-Standards", "es": "es/Est\u00e1ndares_Web", "fr": "fr/Standards_du_Web", "ja": "ja/Web_Standards", "ko": "ko/Web_Standards", "pl": "pl/Standardy_WWW", "pt": "pt/Normas_Web" } ) }}

diff --git a/files/it/archive/standard_web/issues_arising_from_arbitrary-element_hover/index.html b/files/it/archive/standard_web/issues_arising_from_arbitrary-element_hover/index.html new file mode 100644 index 0000000000..bdabe77777 --- /dev/null +++ b/files/it/archive/standard_web/issues_arising_from_arbitrary-element_hover/index.html @@ -0,0 +1,104 @@ +--- +title: Problemi Derivanti Dall Hover Su Elementi Arbitrari +slug: Archive/Standard_Web/Issues_Arising_From_Arbitrary-Element_hover +tags: + - CSS + - Tutte_le_categorie +translation_of: Archive/Web_Standards/Issues_Arising_From_Arbitrary-Element_hover +--- +

 

+ +

Summary: Thanks to long-standing limitations, we're used to thinking of hover styles as applying only to hyperlinks, which has led to some sloppy authoring practices that are now causing problems for some Web sites. This technote explains the source of the problems and how to avoid encountering them.

+ +

Molti sviluppatori fanno uso della pseudo-classe CSS2 :hover per applicare uno stile ai collegamenti. Questa innovazione, introdotta per la prima volta da Microsoft® Internet Explorer e poi introdotta nelle specifiche CSS, è molto utilizzata per modificare i collegamenti testuali, in particolare quelli che sono si vuole far apparire e agire come "rollover" in JavaScript. Tuttavia, il progredire del supporto ai CSS da parte dei browser, ha portato in qualche caso ad un utilizzo spregiudicato di questa funzionalità.

+ +

Hover ed elementi che non sono collegamenti

+ +

La Sezione 5.11.3 dei CSS2 definisce tre pseudo-classi dinamiche (:hover, :active, e :focus) e dice:

+ +
La specifica non definisce quali elementi possano essere nei suddetti stati, o come si entra e si esce da tali stati. Uno scipt può modificare se certi elementi reagiscono o meno agli eventi geenrati dall'utente, e su dispositivi differenti ci possono essere differenti metodi di puntamento e attivazione.
+ +

Quindi, benchè gli sviluppatori siano abituati a pensare che questi stati si applicano esclusivamente ai collegamenti, in realtà non ci sono tali limitazioni nei CSS2. Ogni elemento, in teoria, potrebbe assumere uno dei tre stati sopra elencati, e quindi assumere lo stile ad essi associato.

+ +

 

+ +

Pseudo-classi generiche

+ +

La seconda parte del problema si manifesta quando si considera l'effetto della pseudo-classe generica nel selettore. Per esempio:

+ +
:hover {color: red;}
+ +

Questo è equivalente alla regola CSS2:

+ +
*:hover {color: red;}
+ +

..che si traduce in "ogni elemento su cui si passa deve assumere il colore rosso". Quindi, passando sopra paragrafi, tabelle, intestazioni e ogni altro elemento in un documento, dovrebbe far diventare il testo rosso.

+ +

Una comune variante è utilizzare insieme una classe generica e la pseudo-classe hover, come in questo caso:

+ +
.nav:hover {color: red;}
+ +

Nei casi in cui la classe nav viene applicata solo a collegamenti, non si verificano problemi. Ma nei casi comuni in cui è associata anche ad altri marcatori, come in questo caso:

+ +
<td class="nav">
+<a href="one.html" class="nav">one</a> |
+<a href="two.html" class="nav">two</a> |
+<a href="thr.html" class="nav">three</a> |
+<a href="fou.html" class="nav">four</a>
+</td>
+ +

Poichè si applica la classe nav anche alla cella della tabella, anche i caratteri esterni ai collegamenti (|) diventeranno rossi quando l'utente passerà con il puntatore del mouse sopra un qualsiasi punto della tabella, oltre che quando passerà sopra i collegamenti.

+ +

Il comportamento di Gecko

+ +

In browser basati su Netscape Gecko build 20020410 o successivi (Netscape 6.1+), gli stili associati a :hover possono essere applicati a qualsiasi elemento del documento. Quindi gli sviluppatori che utilizzano pseudo-classi generiche, o combinazioni simili, sono a rischio di vedere questi stili applicati ad altri elementi oltre che ai collegamenti. Il metodo più corretto di correggere questo problema è aggiungere il giusto marcatore come selettore dello stile, come in questo esempio:

+ +
a:hover {color: red;}
+a.nav:hover {color: red;}
+ +

In un tentativo di evitare l'insorgere di problemi con vecchie pagine, i browser basati su Mozilla 1.0 e successivi (Netscape 7+) includono un accorgimento che restringe l'applicazione di pseudo-classi generiche solo ai collegamenti, nel caso in cui il documento venga interpretato nel modo "quirks". Nei browser basati sul motore di Mozilla 1.3b e successivi, questa modalità viene estesa a comprendere selettori che combinano classi generiche con la pseudo-classe :hover (si veda {{ Bug(169078) }} per dettagli).

+ +

Problemi dei collegamenti con attributo Name

+ +

In aggiunti agli effetti sopra descritti, ci sono due altri effetti relativamente comuni, che gli sviluppatori possono non aspettarsi. Uno può essere facilmente corretto con la validazione, ma il secondo è un po' più sottile.

+ +

Prima di tutto, c'è il problema degli sviluppatori che utilizzano collegamenti con attributo Name, senza marcatore di chiusura. Per esempio:

+ +
<a name="pagetop">
+<h2>My Page</h2>
+ +

Senza un </a>, tutto quanto viene dopo viene formalmente considerato come facente parte del collegamento. E questo generalmente significa che tutto il resto del documento assume lo stile associato a hover. Si consideri l'effetto generato da questo stile:

+ +
a:hover {color: red;}
+ +

In un documento con un collegamento con attributo Name e che non viene correttamente chiuso, tutto il testo che segue l'apertura del collegamento, assumerà il colore rosso (sempre che un'altra regola del CSS non intervenga).

+ +

Questo ci porta al secondo problema, che consiste nel fatto che collegamenti con attributo Name possono avere stile hover. Benchè gli sviluppatori vogliano che il selettore a:hover sia associato solo ai veri collegamenti, esso sarà associato anche a quelli con attributo Name, dato che il selettore dichiara semplicemente che qualsiasi elemento a può passare nello stato hover. Per evitare questo problema, gli sviluppatori possono utilizzare una sintassi con pseudo-classi multiple descritta nei CSS2:

+ +
a:link:hover {color: red;}
+a:visited:hover {color: maroon;}
+ +

Si noti che, con questa sintassi, è possibile associare stili diversi a collegamenti visitati e non visitati, quando ci si passa sopra con il puntatore del mouse. Questo non era possibile con il solo a:hover. Ovviamente questo significa che il selettore a:link:hover si applica solamente ai collegamenti non visitati, per cui gli sviluppatori che vogliono applicare lo stesso stile sia a collegamenti visitati e non visitati, devono raggruppare i due selettori in una regola singola.

+ +

Raccomandazioni

+ +

Per evitare problemi inattesi, gli sviluppatori sono fortemente incoraggiati ad associare nomi agli elementi che usano pseudo-classi dinamiche per i collegamenti. Inoltre, le pseudo-classi multiple evitano che gli stili hover siano applicati a collegamenti non reali. Quindi, usare sempre a:hover invece di :hover, e a:link:hover (e a:visited:hover) sono preferiti al più semplice a:hover.

+ +

Collegamenti

+ + + +
+

Original Document Information

+ + +
+ +

 

diff --git a/files/it/archive/standard_web/rdf_in_fifty_words_or_less/index.html b/files/it/archive/standard_web/rdf_in_fifty_words_or_less/index.html new file mode 100644 index 0000000000..5940fa2cb1 --- /dev/null +++ b/files/it/archive/standard_web/rdf_in_fifty_words_or_less/index.html @@ -0,0 +1,76 @@ +--- +title: RDF in cinquanta parole o meno +slug: Archive/Standard_Web/RDF_in_Fifty_Words_or_Less +tags: + - RDF + - Tutte_le_categorie +translation_of: Archive/Web_Standards/RDF_in_Fifty_Words_or_Less +--- +

+

Okay, probabilmente saranno un pò più di cinquanta parole, ma i punti chiave sono abbastanza semplici (e segnati in grassetto per colo i quali vogliono andare dritti al punto). Con Resource Description Framework (framework di descrizione risorse) o "RDF", intendiamo due cose. +

+
+Primo, RDF è un modello basato su grafi per la descrizione di risorse Internet (come pagine web e messaggi email), e di come tali risorse sono correlate l'un l'altra. +
+

Ma cosa vuol dire effettivamente? Per uno sviluppatore Mozilla, significa che il modello dati RDF (il "grafo") può essere usato come meccanismo per integrare ed organizzare risorse Internet. +

Vediamo un esempio: segnalibri. Comunemente, molti browser web permettono l'organizzazione dei propri segnalibri in maniera gerarchica all'interno di cartelle (folders). Ogni segnalibro è un puntatore ad una pagina web chiamata URI (Uniform Resource Identifier). +

Ma una pagina web è solo uno dei tipi di risorse Internet. Esistono tonnellate di tipi, inclusi messaggi email, articoli UseNet (o gli interi newsgroup), e risultati di ricerca del proprio motore preferito, giusto per dirne alcuni. Fondamentalmente, non c'è ragione per cui non possano essere trattati come "segnalibri" anche questi, raggruppandoli in cartelle a proprio piacimento, o creando cartelle "furbe" che, una volta aperte, generino dinamicamente il loro contenuto eseguendo ricerche da voi setssi definite. +

Ed un "segnalibro" può veramente avere proprietà arbitrarie asssociate ad esso: su potrebbe voolere inventare un proprio schema di "classificazione" per un segnalibro a la Macintosh con i suoi codici colore "hot", "warm", "cool". Oppure si potrebbe voler collegare un segnalibro ad un altro, o mantenerlo in molteplici cartelle nello stesso momento. +

Il grafo RDF fornisce un modello dati perfetto sul quale costruire un servizio di bookmarking "universale" come descritto sopra: il grafo può contenere puntatori a risorse arbitrarie e può raggrupparli pressoché in ogni maniera immaginabile. +

Ma aspettate, c'è dell'altro... +

+
+Secondo, RDF è una sintassi di serializzazione (serialization syntax). Questa sintassi permette al modello di grafo la comunicazione tra gli "agenti". +
+

Okay, cosa diamine significa "questo"? Fondamentalmente, significa che parti del modello dati RDF possono essere comunicate tra nodi della rete, e che il contenuto del grafo può cambiare dinamicamente mano a mano che le informazioni arrivano da un servizio remoto +

Torniamo indietro all'esempio dei segnalibri. Diciamo che una delle "cartelle" segnalibro è in realtà un puntatore alla mia casella email. Quando viene aperta la cartella. voila! Tutti i messaggi ricevuti durante la notte appaiono. +

Ma come avviene tutto questo? La cartella inbox in realtà è un puntatore ad una risorsa Internet che contiene un altro RDF che estende il grafo. Questa "risorsa Internet" è un URI che si riferisce ad uno script CGI (diciamo, <tt>http://www.mozilla.org/smart-mail/ge...n&folder=inbox</tt>). Lo script genera un RDF serializzato, che principalmente è un modo di formattare un grafo in XML: +

+
<rdf:RDF
+    xmlns:rdf="http://www.w3.org/TR/WD-rdf-syntax#"
+    xmlns:sm="http://www.mozilla.org/smart-mail/schema#">
+  <rdf:Description
+    about="http://www.mozilla.org/smart-mail/ge...n&folder=inbox">
+    <sm:message id="4025293">
+       <sm:recipient>
+         Chris Waterson "waterson@netscape.com"
+       </sm:recipient>
+       <sm:sender>
+         Aunt Helga "helga@netcenter.net"
+       </sm:sender>
+       <sm:received-by>x-wing.mcom.com</sm:received-by>
+       <sm:subject>Grandi novità per Yam Soup!</sm:subject>
+       <sm:body>
+         http://www.mozilla.org/smart-mail/ge...cgi?id=4025293
+       </sm:body>
+    </sm:message>
+    <sm:message id="4025294">
+       <sm:recipient>
+         Chris Waterson "waterson@netscape.com"
+       </sm:recipient>
+       <sm:sender>
+         Sarah Waterson "waterson.2@postbox.acs.ohio-state.edu"
+       </sm:sender>
+       <sm:received-by>x-wing.mcom.com</sm:received-by>
+       <sm:subject>Abbiamo vinto il nostro gioco</sm:subject>
+       <sm:body>
+         http://www.mozilla.org/smart-mail/ge...cgi?id=4025294
+       </sm:body>
+    </sm:message>
+  </rdf:Description>
+</rdf:RDF>
+
+

Dopo aver ricevuto la mostruosità sopra mostrata, il motore RDF modella il documento nel luogo appropriato, mentre l'albero di controllo che attualmente implementa l'interfaccia ai segnalibri riceve la notifica per disegnare nuove icone per la zuppa Yam (Yam Soup) da Zia Helga. +

Questo è esattamente il modo in cui funziona SmartMail. +

Contatti: +Chris Waterson (waterson@netscape.com) +

+
+

Original Document Information

+ +
+

Interwiki Language Links +

{{ languages( { "ko": "ko/RDF_in_Fifty_Words_or_Less", "en": "en/RDF_in_Fifty_Words_or_Less" } ) }} diff --git a/files/it/archive/web/index.html b/files/it/archive/web/index.html new file mode 100644 index 0000000000..6f60d315ff --- /dev/null +++ b/files/it/archive/web/index.html @@ -0,0 +1,12 @@ +--- +title: Archived open Web documentation +slug: Archive/Web +tags: + - Archived + - NeedsTranslation + - TopicStub + - Web +translation_of: Archive/Web +--- +

The documentation listed below is archived, obsolete material about open Web topics.

+

{{SubpagesWithSummaries}}

diff --git a/files/it/archive/web/server-side_javascript/index.html b/files/it/archive/web/server-side_javascript/index.html new file mode 100644 index 0000000000..8f69b4481f --- /dev/null +++ b/files/it/archive/web/server-side_javascript/index.html @@ -0,0 +1,14 @@ +--- +title: Server-Side JavaScript +slug: Archive/Web/Server-Side_JavaScript +translation_of: Archive/Web/Server-Side_JavaScript +--- +

Vi propongo la mia idea: usare un solo linguaggio per scrivere intere Web Apps, lo stesso linguaggio che milioni di persone usano già tutti i giorni. 

+ +

Sembra scontato, ma per almeno i primi dodici anni dell'evoluzione del Web, gli sviluppatori hanno usato parecchi linguaggi diversi sul server che erano disponibili sul browser, il che ha portato a uno disgregamento di gruppi, un know-how inconsistente e un mucchio di esercitazioni di string manipulation server-side per fare in modo di generare pagine HTML o AJAX.

+ +

La semplicità nell'usare JavaScript lato server faceva parte della vision che Netscape aveva ai tempi di Netscape LiveWire. Ma allora i server da 350 MHz erano il meglio che si poteva trovare e Mozilla ancora non emergeva come tecnologia Web poichè ancora ancorata a Netscape.  Oggi, i cicli computazionali sono aumentati di 10 volte e grazie al lavoro di Mozilla su Rhino (interpreter JavaScript di Java) e SpiderMonkey (interprete JavaScript di C) e JavaScript stesso, abbiamo a disposizione basi molto solide per usare JavaScript in maniera straordinaria ed utile su lato server, con performance della stessa gamma di ambienti di sviluppo lato server come PHP e Ruby on Rails. 

+ +

Adesso grazie a TraceMonkey , JavaScript(sia lato client che server) vede un aumento della velocità di 20 e 40 volte, secondo quanto afferma Brendan Eich, CTO di Mozilla e creatore di JavaScript. JavaScript lato server è un altro modo in cui, come afferma in questo articolo Eich : "Mozilla vuole che la gente pensi a JavaScript come un linguaggio di uso più generico e che mostri quanto possa essere una piattaforma per creare intere applicazioni.

+ +

Oggi, molti vendors stanno incorporando Mozilla Rhino o Mozilla SpiderMonkey nei Web server. Alcuni, come ad esempio Aptana che ha il Jaxer server(open source), ha incorporato l'intero motore Mozilla(che include SpiderMonkey) all'interno di un Web server per attivare AJAX lato server e gli accessi al DOM lato server oltre all'esecuzione di JavaScript su lato server.

diff --git a/files/it/cambiamenti_di_xmlhttprequest_in_gecko1.8/index.html b/files/it/cambiamenti_di_xmlhttprequest_in_gecko1.8/index.html new file mode 100644 index 0000000000..5fa5eeedcd --- /dev/null +++ b/files/it/cambiamenti_di_xmlhttprequest_in_gecko1.8/index.html @@ -0,0 +1,17 @@ +--- +title: Cambiamenti di XMLHttpRequest in Gecko1.8 +slug: Cambiamenti_di_XMLHttpRequest_in_Gecko1.8 +tags: + - Estensioni + - Tutte_le_categorie + - XMLHttpRequest +translation_of: Mozilla/XMLHttpRequest_changes_for_Gecko_1.8 +--- +

Questo documento descrive alcuni dei cambiamento che sono stati fatti all'implementazione di XMLHttpRequest di Gecko dalla versione 1.7 (che era usata per esempio da Firefox 1.0) alla 1.8. Queste modifiche si applicano solo alle estensioni e alle applicazioni in XUL. Non si applicano invece alle pagine web. +

+

Cambiamenti a XMLHttpRequest.send

+

Se si passa un'istanza di nsIInputStream al metodo send, non bisogna più includere le intestazioni <tt>Content-Length</tt> e <tt>Content-Type</tt> all'inizio dello stream. Invece, l'intestazione <tt>Content-Length</tt> verrà dedotta dalla lunghezza dello stream e <tt>Content-Type</tt> sarà specificato manualmente chiamando il metodo setRequestHeader. Queste modifiche sono pienamente documentate in nsIXMLHttpRequest.idl. +

+

Cambiamenti a XMLHttpRequest.onreadystatechange

+

Il tipo di questo attributo ora è nsIOnReadyStateChangeHandler, non più nsIOnReadystatechangehandler (a S di State ora è maiuscola). +

{{ languages( { "en": "en/XMLHttpRequest_changes_for_Gecko1.8" } ) }} diff --git a/files/it/circa_il_document_object_model/index.html b/files/it/circa_il_document_object_model/index.html new file mode 100644 index 0000000000..733960449c --- /dev/null +++ b/files/it/circa_il_document_object_model/index.html @@ -0,0 +1,17 @@ +--- +title: Circa il Document Object Model +slug: Circa_il_Document_Object_Model +tags: + - DOM + - Tutte_le_categorie +translation_of: Web/API/Document_Object_Model +--- +

Cos'è il DOM?

+

Il Modello a Oggetti del Documento è una API per i documenti HTML e XML. Esso fornisce una rappresentazione strutturale del documento, dando la possibilità di modificarne il contenuto e la presentazione visiva. In poche parole, connette le pagine web agli script o ai linguaggi di programmazione.

+

Tutte le proprietà, i metodi e gli eventi disponibili per il programmatore per creare e manipolare le pagine web sono organizzate in oggetti (ad esempio, l'oggetto document rappresenta il documento stesso, l'oggetto table rappresenta l'elemento tabella e così via). Questi oggetti sono accessibili tramite linguaggi di scripting.

+

Il linguaggio più usato in congiunzione con il DOM è JavaScript. Precisamente, il codice viene scritto in JavaScript, ma usa la rappresentazione creata con il DOM per accedere alla pagina web e ai suoi elementi. Ad ogni modo, il DOM é stato pensato e implementato come indipendente da qualsiasi linguaggio di programmazione, al fine di rendere la rappresentazione strutturale del documento disponibile a chiunque, attraverso una singola conforme API. Sebbene in questo sito poniamo l'attenzione su JavaScript, le implementazioni del DOM possono essere fatte da qualunque linguaggio.

+

Il Consorzio per il World Wide Web stabilisce uno standard per il DOM, chiamato W3C DOM. Questo dovrebbe, ora che i più importanti browser lo implementano, permettere la creazione di potenti applicazioni cross-browser.

+

Perchè è importante il supporto al DOM in Mozilla?

+

"HTML Dinamico" (DHTML) è un termine usato da alcuni fornitori per descrivere la combinazione di HTML, fogli di stile e script che insieme permettono di animare i documenti. Il W3C DOM Working Group è al lavoro per assicurare che le soluzioni interoperabili e indipendenti dal linguaggio siano concordate da tutti (vedi anche la FAQ del W3C. Dal momento che Mozilla si propone come piattaforma per il web, il supporto per il DOM diventa una delle caratteristiche più richieste, ed è necessaria a Mozilla se vuole essere una possibile alternativa agli altri browser.

+

Ancora più importante è il fatto che l'interfaccia utente di Mozilla (e quindi anche di Firefox e Thunderbird) è stata creata usando XUL - un linguaggio per l'interfaccia utente basato sulle regole di XML . Perciò Mozilla usa il DOM per manipolare la sua stessa UI.

+

 

diff --git "a/files/it/conoscere_i_css/cascata_ed_ereditariet\303\240/index.html" "b/files/it/conoscere_i_css/cascata_ed_ereditariet\303\240/index.html" new file mode 100644 index 0000000000..4826f292a1 --- /dev/null +++ "b/files/it/conoscere_i_css/cascata_ed_ereditariet\303\240/index.html" @@ -0,0 +1,86 @@ +--- +title: Cascata ed ereditarietà +slug: Conoscere_i_CSS/Cascata_ed_ereditarietà +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +

+

Questa pagina delinea come diversi fogli di stile interagiscano in cascata e come gli elementi ereditino lo stile dai loro elementi genitori. +

Verranno aggiunte delle informazioni al foglio di stile di esempio, modificando lo stile di molte parti del documento con una sola mossa. +

link title== Headline text ==== Informazioni: Cascata ed ereditarietà == +Lo stile finale di un elemento può essere definito in molti luoghi diversi, che possono intergire fra loro in modo complesso. +Questa complessa interazione rende i CSS molto potenti, ma può anche rendere una correzione confusa e difficile. +

Le tre sorgenti principali di informazioni sullo stile che generano la cascata sono: +

+ +

Lo stile dell'utente modifica lo stile predefinito del browser. Lo stile dell'autore del documento modifica ulteriormente lo stile. In questa guida tu sei l'autore del documento di esempio, e verrà considerato solo il foglio di stile dell'autore. +

+ +
Esempio +Quando leggi questo articolo della guida nel tuo browser Mozilla, parte dello stile che vedi proviene da quello predefinito del browser per l'HTML. Un altra parte potrebbe essere definita dalle impostazioni del browser nel menu Strumenti>Opzioni, o dal file userContent.css nel tuo profilo del browser. Un'altra parte deriva infine dal foglio di stile associato al documento dal server del wiki. +
+


+Quando apri il documento di esempio con il browser, gli elementi STRONG sono più marcati del resto del testo. Questo effetto deriva dallo stile predefinito del browser per l'HTML. +

Gli elementi STRONG sono rossi. Questo è stato definto dal tuo foglio di stile di esempio. +

Gli elementi STRONG inoltre ereditano gran parte dello stile dell'elemento P, poiché ne sono figli. Allo stesso modo l'elemento P eredita gran parte dello stile dall'elemento BODY. +

Negi stili in cascata, il foglio di stile dell'autore ha la precedenza, quindi viene il foglio dell'utente ed infine quello predefinito del browser. +

Per gli stili ereditati, lo stile proprio del nodo figlio ha la precedenza su quello ereditato dal genitore. +

Questo non è l'unico ordine di precedenze che viene applicato, ma lo riprenderemo più avanti nella guida. +

+ + +
Di più... +
I CSS forniscono un modo all'utente per prevalere sullo stile definito dall'autore del documento, utilizzando la parola chiave !important. +

Questo significa anche che l'autore del documento non può prevedere esattamente cosa vedrà l'utente. +

Per consocere tutti i dettagli circa la cascata e l'ereditarietà, guarda la sezione relativa a "Assegnare valori alle proprietà, Cascata ed ereditarietà"(EN) nelle specifiche dei CSS. +

+
+

Azione: Utilizzare l'ereditarietà

+

Modifica il tuo file CSS di esempio. +

Aggiungi la seguente linea facendo copia e incolla. +Non è molto importante dove viene incollata. In ogni caso è più logico aggiungerla all'inizio perché nel documento l'elemento P è genitore dell'elemento STRONG: +

+
p {color: blue; text-decoration: underline;}
+
+

Ora aggiorna il browser e nota i cambiamenti al docuemnto di esempio. +La sottolineatura influenza tutto il testo contenuto nel paragrafo, incluse le lettere iniziali. +L'elemento STRON ha ereditato lo stile sottolineato dall'elemento genitore P. +

Ma gli elementi STRONG continuano ad essere di colore rosso. Questo perché il colore rosso è lo stile proprio dell'elemento, che prevale sull'elemento blu dell'elemento P. +

+ + +
+ + +
Prima +
Cascading Style Sheets +
+		 + + +
Dopo +
Cascading Style Sheets +
+
+


+

+ + +
Esercizi +
Cambia il foglio di stile per fare in modo che solo le lettere rosse risultino sottolineate: + + +
Cascading Style Sheets +
+
+


+

+

Cos'altro?

+

Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di Discussione. +

Il foglio di stile d'esempio specifica lo stile per i tag P e STRONG modificandone lo stile per tutto il documento. La prossima pagina spiega come specificare lo stile in modo più selettivo: +I Selettori +

{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pl": "pl/CSS/Na_pocz\u0105tek/Kaskadowo\u015b\u0107_i_dziedziczenie", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a" } ) }} diff --git a/files/it/conoscere_i_css/che_cosa_sono_i_css/index.html b/files/it/conoscere_i_css/che_cosa_sono_i_css/index.html new file mode 100644 index 0000000000..f85f4b3db0 --- /dev/null +++ b/files/it/conoscere_i_css/che_cosa_sono_i_css/index.html @@ -0,0 +1,113 @@ +--- +title: Cosa è CSS +slug: Conoscere_i_CSS/Che_cosa_sono_i_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/it/docs/CSS/Getting_Started", "Getting started")}} Questa è la prima sezione dell'esercitazione "Iniziare (Esercitazione di CSS)" che spiega cosa è CSS. Si creerà un semplice documento su cui lavorare nelle pagine seguenti

+ +

Informazione: Cosa è CSS?

+ +

Cascading Style Sheets (CSS) è un linguaggio per specificare come i documenti sono presentati all'utente.

+ +

Un documento è un insieme di informazioni strutturate utilizzando un linguaggio a marcatori.

+ +
+
Esempi
+ +

Una pagine web come quella che si legge è un documento.
+ Le informazioni che si vedono in una pagina web sono strutturare utilizzando il linguaggio a marcatori HTML  (HyperText Markup Language).
+ Le finestre di dialogo, anche chiamate finestre modali, di una applicazione sono spesso documenti.
+ Tali finestre modali potrebbero essere strutturate utilizzano un linguaggio a marcatori, come XUL. E' questo il caso frequente delle applicazioni di Mozilla, ma non è il caso comune.

+
+ +

In questa esercitazione, i riquadri titolati Maggiori dettagli come quello seguente contengono informazioni facoltative. Se hai fretta di andare avanti con l'esercitazione potresti saltarli, e forse tornare a leggerli più tardi. Diversamente leggerli quando li incontri, e forse seguire i link per imparare di più.

+ +
+
Maggiori dettagli
+ +

Un documento non è un file. Potrebbe o non potrebbe essere memorizzato in un file.

+ +

Per esempio, il documento che stai leggendo non è memorizzaotin un file. Quando il browser web richiede questa pagina, il server interroga un database e genera il documento, traendone le sue parti da molti file. D'altra parte, in questa esercitazione si lavora con documenti che sono memorizzati nei file.

+ +

Per maggiori informazioni sui documenti e i linguaggi a amrcatori, si vedano altre parti di questo sito web—per esempio:

+ + + + + + + + + + + + + + + + + + + + +
HTMLper le pagine web
XMLper i documenti strutturati in generale
SVGper la grafica
XULper le interfacce utente in Mozillafor user interfaces in Mozilla
+ +

Nella Parte II di questa esercitazione si vedranno esempi di questi linguaggi a marcatore.

+
+ +

Presentare un documento ad un utente significa convertirlo in una forma utilizzabile dall'essere umano. Browser, come FireFox, Chrome o Internet Explorer, sono progettati per presentare visivamente i documenti — per esempio, sullo schermo di un computer, un proiettore o una stampante.

+ + + + + + + + +
 
+
Maggiori dettagli
+ CSS non è solo per i browser, e non solo per presentazioni visive. Nella terminologia fomale di CSS, il programma che presenta un documento a un utente è chiamatouser agent (UA). Un browser è solo un tipo di UA. Comunque, nella Parte I dell'esercitazione si lavora esclusivamente con CSS in un browser. + +

Per qualche definizione formale della terminologia relativa a CSS, vedere le Definizioni nelle specifiche CSS.

+
+ +

Azione: Creare un documento

+ +

Utilizzare il proprio computer per creare una nuova cartella ed un nuovo file di testo al suo interno. Il file conterrà il tuo documento.
+ Copia ed incolla il codice HTML mostrato sotto. Salva il file utilizzando il nome doc1.html

+ +
<!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+ +

Nel proprio browser, aprire una nuova scheda o una nuova finestra, e aprirvi il file.

+ +

Si dovrebbe vedere il testo con le lettere iniziali in grassetto, come questo:

+ + + + + + + +
Cascading Style Sheets
+ +

Quello che vedi nel tuo browser potrebbe non apparire esattametne uguale a questo, a causa delle impostazioni utilizzate dal browser e da questo wiki. Se ci sono differenze di font, spaziatura e colori, non ha importanza.

+ +

E poi?

+ +

{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Il documento ancora non utilizza CSS. Nella prossima sezione si utilizzerà CSS per specificare lo stile.

diff --git a/files/it/conoscere_i_css/come_funzionano_i_css/index.html b/files/it/conoscere_i_css/come_funzionano_i_css/index.html new file mode 100644 index 0000000000..2c3719a7e7 --- /dev/null +++ b/files/it/conoscere_i_css/come_funzionano_i_css/index.html @@ -0,0 +1,117 @@ +--- +title: Come funzionano i CSS +slug: Conoscere_i_CSS/Come_funzionano_i_CSS +tags: + - Conoscere_i_CSS + - DOM + - Tutte_le_categorie +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

+

Questa pagina spiega il funzionamento dei CSS nel browser. +Analizzeremo il documento di esempio, rivelando i dettagli del suo stile. +

+

Informazioni: Come funzionano i CSS

+

Quando Mozilla visualizza un documento, deve combinare il suo contenuto con le informazioni sullo stile. Quindi elabora il documento in due fasi: +

+ + +

Un linguaggio di marcatura utilizza i tag per definire la struttura del documento. Un tag può anche essere un contenitore, con altri tag tra il suo inizio e la sua fine. +

Un DOM ha una struttura ad albero. Ogni tag e ogni blocco di testo nel linguaggio di marcatura diviene un nodo della struttura ad albero. I nodi del DOM non sono contenitori. Possono invece essere genitori (parent) dei nodi figli (child). +

I nodi corrispondenti ai tag sono consociuti anche come elementi. +

+ + +
Esempio +
Nel documento di esempio il tag <p> e il suo tag di chiusura </p> creano un contenitore: +
+
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+
+

Nel DOM, il nodo corrispondente P è un genitore. +I suoi figli sono i nodi STRONG e i nodi di testo. +I nodi STRONG sono a loro volta genitori dei nodi di testo (che ne sono quindi figli): +

+
+

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

+
+
+

Comprendere il DOM aiuta nel progettare, correggere e manutenere il CSS, poiché il DOM è il luogo in cui si incontrano CSS e contenuto del documento. +

+

Azione: Analizzare un DOM

+

Per analizzare il DOM occorre un software particolare. +In questa guida si utilizza il DOM Inspector di Mozilla (o DOMi) per analizzare il DOM. +

Apri il documento di esempio con il browser Mozilla. +

Dalla barra dei menu del browser, seleziona Strumenti – DOM Inspector, oppure Strumenti – Sviluppo Web – DOM Inspector. +

+ + +
Di più... +
Se il tuo browser Mozilla non possiede il DOMi, è sufficiente reinstallare il browser avendo cura di scegliere l'installazione dei componenti di sviluppo. +

Se non hai intenzione di installare il DOMi, puoi saltare questa parte e andare direttamente alla prossima pagina. +Saltare questa sezione non interferisce con la comprensione del resto della guida. +

+
+


+Nel DOMi, espandi i nodi del tuo documento cliccando sulle loro freccette. +

Nota:  Gli spazi nel file HTML potrebbero far sì che il DOM mostri alcuni nodi di testo vuoti, che possono essere ignorati. +

Il risultato dovrebbe essere simile a questo, a seconda di quali nodi siano stati espansi: +

+ + +
+

│ +▼╴P +│ │ +│ ▼╴STRONG +│ │ └#text +│ ├╴#text +│ ▶╴STRONG +│ │ +

+
+
+

Quando si seleziona un nodo, nel pannello di destra del DOMi vengono mostrate informazioni ulteriori a proposito di quel nodo. +Per esempio quando si seleziona un nodo di testo, il DOMi mostra il testo nel pannello di destra. +

Quando viene selezionato il nodo di un elemento, il DOMi lo analizza e fornisce una grande quantità di informazioni nel pannello di destra. Le informazioni sullo stile non sono che una parte di quelle fornite. +


+

+ + +
Esercizi +
Nel DOMi, fai clic su un nodo STRONG. +

Utilizza il pannello di destra del DOMi per trovare in quale punto viene definito il colore rosso del nodo e dove il suo aspetto viene reso più marcato del testo normale. +

+
+


+

+

Cos'altro?

+

Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di Discussione. +

Se hai eseguito gli esercizi, hai potuto vedere come le informazioni sullo stile siano presenti in diversi posti ed interagiscano per rendere lo stile finale dell'elemento. +

La prossima pagina spiega meglio queste interazioni: +Cascata ed ereditarietà +

{{ languages( { "en": "en/CSS/Getting_Started/How_CSS_works", "fr": "fr/CSS/Premiers_pas/Fonctionnement_de_CSS", "ja": "ja/CSS/Getting_Started/How_CSS_works", "pl": "pl/CSS/Na_pocz\u0105tek/Jak_dzia\u0142a_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Como_o_CSS_trabalha" } ) }} diff --git a/files/it/conoscere_i_css/css_leggibili/index.html b/files/it/conoscere_i_css/css_leggibili/index.html new file mode 100644 index 0000000000..e26e23cf8b --- /dev/null +++ b/files/it/conoscere_i_css/css_leggibili/index.html @@ -0,0 +1,156 @@ +--- +title: CSS leggibili +slug: Conoscere_i_CSS/CSS_leggibili +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +

+

In questa pagina si parla dello stile e della grammatica del linguaggio CSS stesso. +

Impareremo a cambiare l'aspetto del file CSS di prova per renderlo più leggibile. +

+

Informazioni: CSS leggibili

+

E' possibile aggiungere spazi bianchi e commenti ai propri fogli di stile al fine di renderli più leggibili. +Inoltre si possono raggruppare insieme i selettori quando viene applicata a diversi elementi la stessa regola di stile. +

+

Spazi bianchi

+

Spazi bianchi significa proprio spaziatura, tabulazione e nuove linee. +Si possono aggiungere degli spazi bianchi per rendere i fogli di stile più leggibili. +

Al momento il file CSS di prova ha una regola per ogni linea ed il minimo degli spazi bianchi. In un foglio di stile complesso questa struttura sarebbe molto difficile da decifrare, rendendo la manutenzione e la modifica del foglio di stile alquanto faticose. +

La struttura da scegliere generalmente risponde alle preferenze personali dell'autore, ma in un progetto condiviso potrebbero esistere delle particolari convenzioni comuni. +

+ + +
Esempi +
Alcuni autori preferisono una struttura molto compatta (simile a quella utilizzata fin ora per il file di esempio), dividendo la linea solo quando diventa troppo lunga: +
+.carrot {color: orange; text-decoration: underline; font-style: italic;}
+
+

Altri preferiscono il metodo "una proprietà per linea": +

+
+
.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+
+
+

Altri ancora utilizzano l'indentazione—due, quattro spazi, o una tabulazione sono comuni: +

+
+
.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+
+
+

Alcuni autori addirittura preferiscono allineare tutto verticalmente (ma una struttura simile risulta difficile da mantenere): +

+
+
.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+
+
+

Alcuni usano la tabulazione. Altri solo gli spazi. +

+
+

Commenti

+

I commenti nei CSS iniziano con /* e terminano con */. +

I commenti possono essere utilizzati sia per scrivere un vero e proprio commento al foglio di stile, sia per isolare temporaneamente alcune parti di codice per scopi di test. +

Per isolare una parte del foglio di stile è sufficiente porre quella parte all'interno di un commento. In tal modo il browser la ignorerà. Occorre prestare molta attenzione al punto di inizio e di fine del commento. +Il resto del documento deve continuare ad avere una sintassi corretta. +

+ + +
Esempio +
Un commento vero e proprio: +
+
/* stile per la lettere iniziale C del primo paragrafo */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+

Un isolamento: +

+
+
/* isolo una porzione del codice
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+ */
+
+
+
+

Raggruppare i selettori

+

Se molti elementi hanno lo stesso stile è possibile raggruppare i selettori creando un gruppo separato da virgole. +La dichiarazione verrà applicata a tutti gli elementi selezionati. +

Altrove nel foglio di stile sarà anche possibile trattare individualmente gli stessi selettori, per applicare delle regole di stile personalizzate. +

+ + +
Esempi +
Questa regola rende gli elementi H1, H2 e H3 dello stesso colore. +

E' comodo indicare tale colore in un solo posto per rendere più agevole e veloce l'eventuale modifica. +

+
+
/* colore dei titoli */
+h1, h2, h3 {color: navy;}
+
+
+
+

Azione: Aggiungere commenti e migliorare la struttura

+

Modifica il file CSS e assicurati che al suo interno contenga le seguenti regole (in qualsiasi ordine): +

+
+
strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+
+
+

Rendi il foglio di stile più leggibile strutturandolo nel modo che ritieni più logico ed aggiungendo spazi bianchi e commenti dove pare opportuno. +

Salva il file ed aggiorna la finestra del browser per assicurarti che i cambiamenti effettuati non influiscano sul funzionamento del foglio di stile: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+


+

+ + +
Esercizi +
Isola una parte del foglio di stile, senza modificare nient'altro, per rendere la prima lettera del documento rossa: + + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+

(Esiste più di un modo per ottenere questo risultato.) +

+
+


+

+

Cos'altro?

+

Il foglio di stile dell'esempio utilizza solamente il testo corsivo (italic) o il testo sottolineato (underline). +La prossima pagina della guida spiega ulteriori modi per specificare l'aspetto del testo in un documento: +Stili del testo +

{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "pl": "pl/CSS/Na_pocz\u0105tek/Czytelny_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }} diff --git a/files/it/conoscere_i_css/i_selettori/index.html b/files/it/conoscere_i_css/i_selettori/index.html new file mode 100644 index 0000000000..09c970edd2 --- /dev/null +++ b/files/it/conoscere_i_css/i_selettori/index.html @@ -0,0 +1,150 @@ +--- +title: I Selettori +slug: Conoscere_i_CSS/I_Selettori +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/Building_blocks/Selectors +--- +

+

Questa pagina spiega come applicare gli stili in modo selettivo, e come i diversi tipi di selettori abbiano un diverso grado di prevalenza. +

Verrà aggiunto qualche attributo ai tag nel documento di esempio, e questi attributi saranno utilizzati nel foglio di stile di esempio +

+

Informazioni: I Selettori

+

I CSS hanno una terminologia propria per descrivere il linguaggio CSS. +Precedentemente in questa guida, abbiamo creato una stringa nel foglio di stile come questa: +

+
strong {color: red;}
+
+

Nella terminologia dei CSS l'intera stringa è una regola (rule). La regola inizia con strong, che è un selettore (selector). La sua funzione è quella di selezionare a quali elementi del DOM verrà applicato la regola. +

+ + +
Di più... +
La parte contenuta all'interno delle parentesi graffe è la dichiarazione (declaration). +

La parola chiave color è una proprietà (property), e red è un valore(value). +

Il punto e virgola dopo la coppia proprietà-valore separa quella coppia da altre all'interno della stessa dichiarazione. +

Questa guida si riferirà ai selettori del tipo di strong come a dei selettori tag. +Le specifiche dei CSS vi si riferiscono invece come a dei selettori di tipo. +

+
+


+Questa pagina della guida spiega in modo più approfondito i selettori che possono essere utilizzati nelle regole dei CSS. +

In aggiunta al nome dei tag possono essere utilizzati anche i valori di alcuni attributi. Questa permette di usare i selettori in modo più specifico. +

Esistono due attributi che hanno uno status speciale nei CSS: class e id. +

L'attributo class di un tag serve ad assegnare quel tag a quella data classe. La scelta del nome della classe è a piacere dell'autore della classe. +

Nel foglio di stile occorre digitare un punto "." prima del nome della classe quando viene usata come un selettore. +

L'attributo id di un tag serve ad assegnare un id al tag. Anche in questo caso il nome è a piacere, ma deve essere unico per un dato documento. +

Nel foglio di stile il selettore id si indica anteponendo il simbolo "cancelletto" (#). +

+ + +
Esempi +
Questo tag HTML ha sia un attributo class che uno id: +
+<P class="key" id="principal">
+
+

L'id "principal" deve essere unica in tutto il documento ma gli altri tag nel documento potranno appartenere alla stessa classe ed avere quindi lo stesso valore dell'attributo class. +

In un foglio di stile questa regola rende tutti gli elementi della classe key verdi. +(Potrebbero anche non essere tutti elementi di tipo P.) +

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

Questa regola rende l'unico elemento con l'id principal in grassetto: +

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


+Se più di una regola si applica allo stesso elemento specificando la stessa proprietà, avrà prevalenza quella con il selettore più specifico. Un selettore id è più specifico di un selettore class, che però è più specifico di un selettore di tipo "tag". +

+ + +
Di più... +
I selettori possono anche essere combinati così da essere resi più specifici. +

Per esempio, il selettore .key seleziona tutti gli elementi che hanno l'attributo class con il valore key. Il selettore p.key seleziona solo gli elementi P che abbiano il valore key all'attributo class. +

Non si è limitati ai due attributi speciali, class e id. E' possibile specificare altri attributi utilizzando le parentesi quadre. Ad esempio, il selettore {{ mediawiki.external('type=button') }} seleziona tutti gli elementi che hanno l'attributo type con il valore button assegnato. +

Più avanti in questa guida, la pagina sulle (Tabelle) contiene informazioni sui selettori complessi basati sulle relazioni. +

Per informazioni complete sui selettori, consulta "Selettori" nelle specifiche CSS. +

+
+


+Se un foglio di stile contiene regole in conflitto e con lo stesso grado di specificità, avrà prevalenza la regola che viene dopo nel foglio di stile. +

Se si incontrano dei problemi con delle regole in conflitto si può provare a risolverli rendendo una delle due regole più specifica. Se ciò non è possibile, si può provare a spostare la regola che si intende far prevalere in fondo al foglio di stile, per far sì che abbia la priorità. +

+

Azione: Utilizzare i selettori "class" e "id"

+

Apri il file HTML e duplica il paragrafo facendo copia/incolla. +Quindi aggiungi gli attributi di id e class al primo paragrafo, e solo l'id al secondo, come mostrato sotto. In alternativa si può copiare e incollare quanto sotto, sostituendo l'intero file: +

+
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+  <HEAD>
+  <TITLE>Sample document</TITLE>
+  <LINK rel="stylesheet" type="text/css" href="style1.css">
+  </HEAD>
+  <BODY>
+    <P id="first">
+      <STRONG class="carrot">C</STRONG>ascading
+      <STRONG class="spinach">S</STRONG>tyle
+      <STRONG class="spinach">S</STRONG>heets
+    </P>
+    <P id="second">
+      <STRONG>C</STRONG>ascading
+      <STRONG>S</STRONG>tyle
+      <STRONG>S</STRONG>heets
+    </P>
+  </BODY>
+</HTML>
+
+
+

Ora apri il file CSS. Sostituisci l'intero contenuto con: +

+
strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+
+

Aggiorna il browser per vedere il risultato: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+


+Prova a cambiare l'ordine delle regole nel tuo file CSS: osserva come l'ordine non ha nessun effetto in questo caso. +

I selettori di classe .carrot e .spinach hanno sempre la priorità su il selettore di tag strong. +

Il selettore di id #first ha sempre la priorità sui selettori di classe e di tag. +

+ + +
Esercizi +
Senza modificare il file HTML, aggiungi un unica regola al file CSS che mantenga il colore delle lettere iniziali, ma renda il testo del secondo paragrafo di colore blu: + + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+

Ora modifica la regola appena aggiunta (senza cambiare nient'altro) per rendere anche il testo del primo paragrafo di colore blu: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+
+


+

+

Cos'altro?

+

Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di Discussione. +

Il foglio di stile inizia ad avere un aspetto complicato. La prossima pagina descrive i modi per rendere i CSS più semplici da leggere: +CSS leggibili +

{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "pl": "pl/CSS/Na_pocz\u0105tek/Selektory", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }} diff --git a/files/it/conoscere_i_css/index.html b/files/it/conoscere_i_css/index.html new file mode 100644 index 0000000000..1575848fb2 --- /dev/null +++ b/files/it/conoscere_i_css/index.html @@ -0,0 +1,42 @@ +--- +title: Iniziare (Esercitazione di CSS) +slug: Conoscere_i_CSS +translation_of: Learn/CSS/First_steps +--- +

Rivolto ai principianti assoluti, questa esercitazione di CSS per principianti presenta il Cascading Style Sheets (CSS). Guida l'utente attraverso le caratteristiche di base del linguaggio con esempi pratici che possono essere provati sul proprio computer e illustra le caratteristiche standard di CSS che funzionano nei moderni browser.

+ +

Questa esercitazione è principalmente per principianti di CSS, ma va bene anche per chi ha qualche conoscenza base di CSS. Se sei un esperto di CSS qusta esercitazione probabilmente non è molto utile, la pagina principale di CSS elenca risorse più avanzate.

+ + + +

Di cosa hai bisogno per iniziare?

+ +

Per ottenere il massimo da questa esercitazione, hai bisogno di un editor per file di testo e un moderno browser. Devi anche avere una minima conoscenza del loro utilizzo.

+ +

Se non vuoi modificare i file, allora puoi anche solo leggere l'esercitazione e guardare le immagini, ma è il modo meno efficace per imparare.

+ +

Nota:  CSS fornisce un modo di lavorare con il colore, quindi parte di questa esercitazione dipende dal colore. Puoi utilizzare queste parti dell'esercitazione semplicemente se ha un display a colori e una normale visione dei colori.

+ +

Come utilizzare questa esercitazione

+ +

Per utilizzare questa esercitazione, leggi le pagine attentamente e in sequenza. Se salti una pagina, ti potresti trovare in difficoltà nel compredere le pagine successive.

+ +

In ogni pagina, puoi usare la sezione Informazioni per capire come funziona CSS. Usare la sezione Azione per provare ad utilizzare CSS sul proprio computer.

+ +

Per mettere alla prova la propria comprensione, cogli la sfida alla fine di ogni pagina. Le soluzioni alle sfide sono linkate sotto le sfide stesse, quindi non si ha bisogno di guardarle se non lo si vuole.

+ +

Per comprendere CSS in maggiore profondità, leggere le informazioni che si trovano nei box titolati Maggiori dettagli. Utilizzare i collegamenti presenti per trovare informazioni di riferimento su CSS.

+ +

Esercitazione Parte II

+ +

Una seconda parte dell'esercitazione fornisce esempi che mostrano la visibilità di CSS utilizzato con altre tecnologie web e Mozilla

+ +
    +
  1. JavaScript
    2. +
  2. Grafica SVG
    3. +
  3. Dati XML
    4. +
  4. Collegamento XBL
    5. +
  5. Interfacce utente XUL
    6. +
+ +

 

diff --git "a/files/it/conoscere_i_css/perch\303\251_usare_i_css/index.html" "b/files/it/conoscere_i_css/perch\303\251_usare_i_css/index.html" new file mode 100644 index 0000000000..b7d304c91f --- /dev/null +++ "b/files/it/conoscere_i_css/perch\303\251_usare_i_css/index.html" @@ -0,0 +1,106 @@ +--- +title: Perché usare i CSS +slug: Conoscere_i_CSS/Perché_usare_i_CSS +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

 

+ +

Questa pagina spiega perché i documenti utilizzano i CSS. Utilizzerai i CSS per aggiungere un foglio di stile (stylesheet) al tuo documento di esempio.

+ +

Informazioni: Perché usare i CSS?

+ +

I CSS aiutano a mantenere le informazioni sul contenuto di un documento separate dai dettagli su come presentarlo. Le informazioni sulla presentazione del documento sono note come stile. Mantenere lo stile separato dal contenuto permette di:

+ + + + + + + + + + +
Esempi
1) Il tuo sito web potrebbe avere migliaia di pagine che si assomigliano. Utilizzando i CSS si possono immagazzinare le informazioni sullo stile in dei file comuni che vengono condivisi da tutte le pagine. +

2) E' possibile creare differenti stili in modo che quando l'utente visualizza una pagina web, il browser carichi determinate informazioni sullo stile insieme al contenuto della pagina. Quando invece l'utente stampa la pagina web, venga fornito uno stile diverso che renda la pagina stampata più semplice da leggere.

+
+ +

In linea di massima il linguaggio di markup è utilizzato per descrivere le informazioni sul contenuto di un documento, non il suo stile. I CSS, al contrario, definiscono lo stile, non il contenuto. (Più avanti nella guida vedremo qualche eccezione.)

+ + + + + + + + +
Di più...
Un linguaggio di marcatura come HTML fornisce qualche sistema per specificare lo stile, ad esempio l'uso del tag <b> per segnare un testo in grassetto o la definizione del colore di sfondo della pagina all'interno del tag <body> (questo secondo esempio è fortemente deprecato). +

Quando si utilizzano i CSS normalmente si evita di "sporcare" in questo modo il codice di markup, concentrando tutte le informazioni sullo stile in un solo posto, possibilmente separato.

+
+ +

Azione: Creare un foglio di stile

+ +

Crea un altro file di testo vuoto nella stessa directory utilizzata prima. Questo file sarà il foglio di stile. Nominalo come: style1.css

+ +

Nel file CSS, copia e incolla questa singola stringa, poi salva il file:

+ +
+
strong {color: red;}
+
+
+ +

Collegare il foglio di stile al proprio documento

+ +

Per collegare il foglio di stile al tuo documento occorre modificare il file HTML. Aggiungi la linea segnalata in grassetto:

+ +
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+  <HEAD>
+  <TITLE>Sample document</TITLE>
+  <LINK rel="stylesheet" type="text/css" href="style1.css">
+  </HEAD>
+  <BODY>
+    <P>
+      <STRONG>C</STRONG>ascading
+      <STRONG>S</STRONG>tyle
+      <STRONG>S</STRONG>heets
+    </P>
+  </BODY>
+</HTML>
+
+
+ +

Salva il file e ricarica la finestra del browser. Il foglio di stile renderà ora le lettere iniziali in rosso, come segue:

+ + + + + + + +
Cascading Style Sheets
+ + + + + + + + +
Esercizi
Oltre al rosso ("red"), i CSS accettano altri nomi per indicare i colori (in inglese). Senza guardare una referenza, trova cinque o più nomi di colori che funzionino.
+ +

 

+ +

Cos'altro?

+ +

Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di Discussione.

+ +

Ora che hai un documento di esempio collegato ad un foglio di stile separato, sei pronto per saperne di più su come il browser li combina quando visualizza il documento: Come funzionano i CSS

+ +

{{ languages( { "en": "en/CSS/Getting_Started/Why_use_CSS", "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS" } ) }}

diff --git a/files/it/costruire_e_decostruire_un_documento_xml/index.html b/files/it/costruire_e_decostruire_un_documento_xml/index.html new file mode 100644 index 0000000000..563552085e --- /dev/null +++ b/files/it/costruire_e_decostruire_un_documento_xml/index.html @@ -0,0 +1,1193 @@ +--- +title: Costruire e decostruire un documento XML +slug: Costruire_e_decostruire_un_documento_XML +translation_of: Web/Guide/Parsing_and_serializing_XML +--- +

Quest'articolo si propone di fornire una guida esaustiva per l'uso di XML per mezzo Javascript. Esso si divide in due sezioni. Nella prima sezione verranno illustrati tutti i possibili metodi per costruire un albero DOM, nella seconda invece si darà per scontato che saremo già in possesso di un albero DOM e il nostro scopo sarà quello di trattarne il contenuto.

+ +

Che cos'è un albero DOM?

+ +

Per albero DOM s'intende un'istanza di Document. Si tratta quindi di un oggetto Javascript e non è da confondere con una stringa di testo contenente il codice sorgente di un documento XML ancora da parsare.

+ +

DOM trees can be queried using XPath expressions, converted to strings or written to a local or remote files using XMLSerializer (without having to first convert to a string), POSTed to a web server (via XMLHttpRequest),

+ +

You can use DOM trees to model data which isn't well-suited for RDF (or perhaps you just don't like RDF). Another application is that, since XUL is XML, the UI of your application can be dynamically manipulated, downloaded, uploaded, saved, loaded, converted, or transformed quite easily.

+ +

Mozilla gestisce ampiamente XML. Sono gestite diverse Raccomandazioni e bozze del World Wide Web Consortium (W3C) per la famiglia XML, così come altre tecnologie relative. Tra le più importanti tecnologie native che Mozilla offre per lavorare con documenti XML sono da citare:

+ + + +

È possibile comunque creare manualmente propri algoritmi per la serializzazione o la conversione di un documento XML, come si vedrà in seguito.

+ +

Prima parte: costruire un albero DOM

+ +

Come precedentemente accennato, in questa prima sezione il nostro scopo sarà quello di ottenere un albero DOM.

+ +

Un albero DOM è un oggetto (e precisamente un'istanza di Document). Ci sono molti modi per costruirlo o ottenerlo, a seconda delle proprie esigenze. Di seguito verranno elencate varie strade: a partire da una stringa di codice sorgente, a partire da file o a partire da strutture di differente natura.

+ +

Creare dinamicamente un albero DOM

+ +

Questo paragrafo illustra come utilizzare l'API JavaScript W3C DOM per creare e modificare oggetti DOM. Essa è attiva in tutte le applicazioni Gecko-based (come Firefox, per esempio) sia in privileged code (estensioni) che in unprivileged code (pagine internet).

+ +

Scrivendolo a mano

+ +

L'API JavaScript W3C DOM, supportata da Mozilla, può essere invocata manualmente.

+ +

Si consideri il seguente documento XML:

+ +
<?xml version="1.0"?>
+<people>
+  <person first-name="eric" middle-initial="H" last-name="jung">
+    <address street="321 south st" city="denver" state="co" country="usa" />
+    <address street="123 main st" city="arlington" state="ma" country="usa" />
+  </person>
+  <person first-name="jed" last-name="brown">
+    <address street="321 north st" city="atlanta" state="ga" country="usa" />
+    <address street="123 west st" city="seattle" state="wa" country="usa" />
+    <address street="321 south avenue" city="denver" state="co" country="usa" />
+  </person>
+</people>
+
+ +

Grazie all'API W3C DOM è possibile creare una rappresentazione di esso come la seguente, presente unicamente nella memoria dell'interprete:

+ +
var doc = document.implementation.createDocument("", "", null);
+var peopleElem = doc.createElement("people");
+
+var personElem1 = doc.createElement("person");
+personElem1.setAttribute("first-name", "eric");
+personElem1.setAttribute("middle-initial", "h");
+personElem1.setAttribute("last-name", "jung");
+
+var addressElem1 = doc.createElement("address");
+addressElem1.setAttribute("street", "321 south st");
+addressElem1.setAttribute("city", "denver");
+addressElem1.setAttribute("state", "co");
+addressElem1.setAttribute("country", "usa");
+personElem1.appendChild(addressElem1);
+
+var addressElem2 = doc.createElement("address");
+addressElem2.setAttribute("street", "123 main st");
+addressElem2.setAttribute("city", "arlington");
+addressElem2.setAttribute("state", "ma");
+addressElem2.setAttribute("country", "usa");
+personElem1.appendChild(addressElem2);
+
+var personElem2 = doc.createElement("person");
+personElem2.setAttribute("first-name", "jed");
+personElem2.setAttribute("last-name", "brown");
+
+var addressElem3 = doc.createElement("address");
+addressElem3.setAttribute("street", "321 north st");
+addressElem3.setAttribute("city", "atlanta");
+addressElem3.setAttribute("state", "ga");
+addressElem3.setAttribute("country", "usa");
+personElem2.appendChild(addressElem3);
+
+var addressElem4 = doc.createElement("address");
+addressElem4.setAttribute("street", "123 west st");
+addressElem4.setAttribute("city", "seattle");
+addressElem4.setAttribute("state", "wa");
+addressElem4.setAttribute("country", "usa");
+personElem2.appendChild(addressElem4);
+
+var addressElem5 = doc.createElement("address");
+addressElem5.setAttribute("street", "321 south avenue");
+addressElem5.setAttribute("city", "denver");
+addressElem5.setAttribute("state", "co");
+addressElem5.setAttribute("country", "usa");
+personElem2.appendChild(addressElem5);
+
+peopleElem.appendChild(personElem1);
+peopleElem.appendChild(personElem2);
+doc.appendChild(peopleElem);
+
+ +

Si veda anche Il capitolo sul DOM del Tutorial XUL (in inglese).

+ +

Automatizzando la creazione dinamica dell'albero DOM

+ +

L'invocazione dell'API Javascript W3C DOM, può essere anche automatizzata.

+ +

Non esiste un metodo unico per automatizzare la creazione di un documento XML. Esso dipende molto dal tipo di dati che andremo a scrivere. In ogni caso, per vederne un possibile esempio, si vada all'ultimo paragrafo del capitolo su JXON.

+ +

Costruire un albero DOM XML a partire da stringhe di codice sorgente

+ +

Il seguente esempio mostra la costruzione di un albero DOM tramite parsing di un codice sorgente.

+ +
var sSource = "<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>";
+var oParser = new DOMParser();
+var oDOM = oParser.parseFromString(sSource, "text\/xml");
+// print the name of the root element or error message
+dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
+ +

Tutorial su come rendere questo codice cross browser (in inglese)

+ +

Costruire un albero DOM a partire da un file

+ +

Preambolo da stendere.

+ +

Usando DOMParser

+ +

Ciascuna istanza di DOMParser possiede diversi metodi per parsare un documento XML a partire da un file. È possibile fare ricorso a parseFromStream():

+ +
function loadXMLFile (sFile) {
+  var oIOServ = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService);
+  var oChannel = oIOServ.newChannel(sFile,null,null);
+  var oStream = oChannel.open();
+  // alert("oStream.available() = " + oStream.available()); // debug
+  var parser = new DOMParser();
+
+  doc = parser.parseFromStream(oStream, "", oStream.available(),"text/xml");
+
+  // alert("doc=" + doc); // debug
+  oStream.close();
+
+  return doc;
+}
+
+// alert(loadXMLFile("file:///home/john/hello.xml"));
+
+ +

oppure utilizzare parseFromBuffer():

+ +
// Esempio mancante
+ +

In ogni caso il metodo più pratico per accedere al contenuto di un file XML resta ajax, per l'uso del quale si rimanda al prossimo paragrafo.

+ +

Usando XMLHttpRequest

+ +

Come già precedentemente accennato, sebbene ciascuna istanza di DOMParser possegga un metodo chiamato parseFromStream(), è più facile utilizzare XMLHttpRequest per parsare documenti XML in alberi DOM (XMLHttpRequest funziona bene sia in locale che in remoto). Di seguito c'è un codice di esempio che legge e parsa in un albero DOM un file XML locale:

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", "chrome://passwdmaker/content/people.xml", false);
+oReq.send(null);
+// print the name of the root element or error message
+var oDOM = oReq.responseXML;
+dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
+
+ +

N.B. Il metodo responseXML è sempre un'istanza di Document – e di conseguenza un oggetto – a differenza del metodo responseText, che è sempre un valore primario (una stringa).

+ +

Usando l'elemento {{ HTMLElement("object") }}.

+ +

Di seguito è presentata un'altra via possibile per parsare un file XML in un albero DOM: usando il tag {{ HTMLElement("object") }}. Prima di lanciare il seguente esempio è necessario creare un file XML chiamato purchase_order.xml e contenente un albero simile a questo:

+ +

purchase_order.xml

+ +
<?xml version="1.0"?>
+<purchaseOrder xmlns="http://example.mozilla.org/PurchaseOrderML">
+  <lineItem>
+    <name>Line Item 1</name>
+    <price>1.25</price>
+  </lineItem>
+  <lineItem>
+    <name>Line Item 2</name>
+    <price>2.48</price>
+  </lineItem>
+</purchaseOrder>
+
+ +

Adesso proviamo a lanciare il nostro esempio:

+ +
<!doctype html>
+<html>
+<head>
+<title>XML Data Block Demo</title>
+<script>
+function runDemo() {
+  var doc = document.getElementById("purchase-order").contentDocument;
+  var lineItems = doc.getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "lineItem");
+  var firstPrice = lineItems[0].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "price")[0].textContent;
+  document.getElementById("output-box").textContent = "The purchase order contains " + lineItems.length + " line items. The price of the first line item is " + firstPrice + ".";
+}
+</script>
+</head>
+<body onload="runDemo()";>
+<object id="purchase-order" data="purchase_order.xml" type="text/xml" style="display: none;"></object>
+<div id="output-box">Demo did not run</div>
+</body>
+</html>
+
+ +

Per ulteriori approfondimenti, si rimanda all'articolo: Usare le XML Data Islands in Mozilla.

+ +

Seconda parte: decostruire un albero DOM

+ +

Da adesso in poi daremo per scontato il fatto che abbiamo già un albero DOM nella memoria dell'interprete Javascript e che il nostro scopo è quello di utilizzare tale istanza di Document nei modi più disparati.

+ +

Convertire un documento XML in stringhe di codice sorgente

+ +

L'esempio seguente mostra come ottenere dalla variabile doc — il nostro albero DOM — una stringa contenente l'intero suo codice sorgente:

+ +
var oSerializer = new XMLSerializer();
+var sXML = oSerializer.serializeToString(doc);
+
+ +

Non è possibile creare un istanza di XMLSerializer (ovvero lanciare: new XMLSerializer()) dall'interno di un componente JS XPCOM o dall'interno di un modulo. Per farlo bisogna lanciare:

+ +
var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"].createInstance(Components.interfaces.nsIDOMSerializer);
+var sXML = oSerializer.serializeToString(doc);
+
+ +

Come ottenere stringhe di codice sorgente di facile lettura

+ +

You can pretty print a DOM tree using XMLSerializer and E4X. First, create a DOM tree as described in the Come creare un albero DOM article. Alternatively, use a DOM tree obtained from XMLHttpRequest. We assume it's in the doc variable.

+ +
var oSerializer = new XMLSerializer();
+var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();
+ +

Indents are provided with two spaces. You can, of course, use DOM:treeWalker to write your own, more performant version which also has the advantage that you can customize the indent string to be whatever you like.

+ +

Note: When using the E4X toXMLString method your CDATA elements will be lost and only the containing text remains. So using the above method might not be useful if you have CDATA elements in your XML.

+ +
<content><![CDATA[This is the content]]></content>
+ +

Will become

+ +
<content>This is the content</content>
+ +

Convertire un foglio XML in un albero di oggetti Javascript (JXON)

+ +

JXON (lossless Javascript XML Object Notation) è un nome generico col quale viene definita la rappresentazione di oggetti Javascript in linguaggio XML. Non esistono veri e propri standard per questa rappresentazione, ma da poco tempo a questa parte cominciano ad affacciarsi in rete alcune convenzioni.

+ +

JXON non è un metodo per indirizzare poche parti di un documento XML, dato che il suo punto di forza è la conversione per intero di un albero DOM. Se il nostro scopo è quello di accedere a delle informazioni limitate di un albero DOM, si raccomanda vivamente di Usare XPath.

+ +

Ci sono casi invece in cui un documento XML è costruito in maniera tale da avere come principale destinatario del proprio contenuto proprio l'interprete Javascript. In tal caso JXON si presenta come la via migliore.

+ +

Per tutto questo capitolo immagineremo di aver parsato, come al solito nella nostra variabile doc, questo documento XML di esempio:

+ +
esempio.xml
+ +
<?xml version="1.0"?>
+<!DOCTYPE catalog SYSTEM "catalog.dtd">
+<catalog>
+   <product description="Cardigan Sweater">
+      <catalog_item gender="Men's">
+         <item_number>QWZ5671</item_number>
+         <price>39.95</price>
+         <size description="Medium">
+            <color_swatch image="red_cardigan.jpg">Red</color_swatch>
+            <color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch>
+         </size>
+         <size description="Large">
+            <color_swatch image="red_cardigan.jpg">Red</color_swatch>
+            <color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch>
+         </size>
+      </catalog_item>
+      <catalog_item gender="Women's">
+         <item_number>RRX9856</item_number>
+         <discount_until>Dec 25, 1995</discount_until>
+         <price>42.50</price>
+         <size description="Medium">
+            <color_swatch image="black_cardigan.jpg">Black</color_swatch>
+         </size>
+      </catalog_item>
+   </product>
+   <script type="text/javascript"><![CDATA[function matchwo(a,b) {
+    if (a < b && a < 0) { return 1; }
+    else { return 0; }
+}]]></script>
+</catalog>
+
+ +

Adesso proveremo a ottenere una rappresentazione della variabile doc — l'albero DOM — attraverso un albero di oggetti Javascript (per approfondire si leggano le guide su come lavorare con gli oggetti e su come Javascript sia Object-Oriented). Per far ciò potremo utilizzare diversi algoritmi di conversione.

+ +

Per semplicità gli algoritmi qui proposti (si veda: #1, #2, #3, #4) prenderanno in considerazione unicamente i seguenti tipi di nodi e i loro attributi:

+ +
    +
  1. Document (solo come argomento della funzione),
    2. +
  2. DocumentFragment (solo come argomento della funzione),
    3. +
  3. Element,
    4. +
  4. Text (mai come argomento della funzione),
    5. +
  5. CDATASection (mai come argomento della funzione).
    6. +
+ +

Si tratta di un buon compromesso per un uso Javascript, dacché la gran parte delle informazioni di un documento XML è contenuta in questo tipo di nodi. Ogni altra informazione (come processing instructions, xml schemas, commenti, etc.) andrà persa. Allo scopo di evitare conflitti, la lettura dei nomi dei nodi e dei loro attributi è case insensitive (resa sempre in minuscolo) e di conseguenza le proprietà locali dell'albero di oggetti così ottenuto, aggiunte via JavaScript, dovranno avere sempre un qualche tipo di lettera maiuscola al loro interno (per evitare di sovrascrivere le proprietà ottenute dal foglio XML), come si può vedere di seguito. I seguenti algoritmi sono liberamente basati sulla Convenzione di Parker, versione 0.4, che prevede il riconoscimento del typeof del contenuto di testo di ogni singolo nodo letto.

+ +

Algoritmo #1: una via prolissa

+ +

Questo semplice costruttore ricorsivo converte un albero DOM XML in un albero di oggetti Javascript. Il contenuto di testo di ogni nodo sarà salvato all'interno della proprietà keyValue, mentre i nodeAttributes, se esistono, saranno annidati come proprietà dell'oggetto-figlio keyAttributes. L'argomento del costruttore potrà essere l'intero Document, un DocumentFragment o, più semplicemente, un nodo di tipo Element di esso.

+ +
function buildValue(sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function JXONData (oXMLParent) {
+  var nAttrLen = 0, nLength = 0, sCollectedTxt = "";
+  // children
+  if (oXMLParent.hasChildNodes()) {
+    for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) {
+      oItChild = oXMLParent.childNodes.item(nChildId);
+      if ((oItChild.nodeType + 1 | 1) === 5) { sCollectedTxt += oItChild.nodeType === 3 ? oItChild.nodeValue.replace(/^\s+|\s+$/g, "") : oItChild.nodeValue; } // nodeType is "Text" (3) or "CDATASection" (4)
+      else if (oItChild.nodeType === 1 && !oItChild.prefix) { // nodeType is "Element" (1)
+        sItKey = oItChild.nodeName.toLowerCase();
+        sItVal = new JXONData(oItChild);
+        if (this.hasOwnProperty(sItKey)) {
+          if (this[sItKey].constructor !== Array) { this[sItKey] = [this[sItKey]]; }
+          this[sItKey].push(sItVal);
+        } else { this[sItKey] = sItVal; nLength++; }
+      }
+    }
+    this.keyValue = buildValue(sCollectedTxt);
+  } else { this.keyValue = null; }
+  // node attributes
+  if (oXMLParent.hasAttributes()) {
+    var oItAttr;
+    this.keyAttributes = {};
+    for (nAttrLen; nAttrLen < oXMLParent.attributes.length; nAttrLen++) {
+      oItAttr = oXMLParent.attributes.item(nAttrLen);
+      this.keyAttributes[oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue);
+    }
+  }
+  // optional properties and methods; you could safely adjoust/remove them...
+  this.keyLength = nLength;
+  this.attributesLength = nAttrLen;
+  // this.DOMNode = oXMLParent;
+  this.valueOf = function() { return this.keyValue; };
+  this.toString = function() { return String(this.keyValue); };
+  this.getItem = function(nItem) {
+    if (nLength === 0) { return null; }
+    var iItem = 0;
+    for (var sKeyName in this) { if (iItem === nItem) { return this[sKeyName]; } iItem++; }
+    return null;
+  };
+  this.getAttribute = function(nAttrib) {
+    if (nAttrLen === 0 || nAttrib + 1 > nAttrLen) { return null; }
+    var nItAttr = 0;
+    for (var sAttrName in this.keyAttributes) { if (nItAttr === nAttrib) { return this.keyAttributes[sAttrName]; } nItAttr++; }
+    return null;
+  };
+  this.hasChildren = function() { return this.keyLength > 0; };
+}
+
+var myObject = new JXONData(doc);
+// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject));
+
+ +

Con questo algoritmo il nostro esempio diventerà:

+ +
{
+  "catalog": {
+    "product": {
+      "catalog_item": [{
+        "item_number": {
+          "keyValue": "QWZ5671",
+          "keyLength": 0,
+          "attributesLength": 0
+        },
+        "price": {
+          "keyValue": 39.95,
+          "keyLength": 0,
+          "attributesLength": 0
+        },
+        "size": [{
+          "color_swatch": [{
+            "keyValue": "Red",
+            "keyAttributes": {
+              "image": "red_cardigan.jpg"
+            },
+            "keyLength": 0,
+            "attributesLength": 1
+          }, {
+            "keyValue": "Burgundy",
+            "keyAttributes": {
+              "image": "burgundy_cardigan.jpg"
+            },
+            "keyLength": 0,
+            "attributesLength": 1
+          }],
+          "keyValue": null,
+          "keyAttributes": {
+            "description": "Medium"
+          },
+          "keyLength": 1,
+          "attributesLength": 1
+        }, {
+          "color_swatch": [{
+            "keyValue": "Red",
+            "keyAttributes": {
+              "image": "red_cardigan.jpg"
+            },
+            "keyLength": 0,
+            "attributesLength": 1
+          }, {
+            "keyValue": "Burgundy",
+            "keyAttributes": {
+              "image": "burgundy_cardigan.jpg"
+            },
+            "keyLength": 0,
+            "attributesLength": 1
+          }],
+          "keyValue": null,
+          "keyAttributes": {
+            "description": "Large"
+          },
+          "keyLength": 1,
+          "attributesLength": 1
+        }],
+        "keyValue": null,
+        "keyAttributes": {
+          "gender": "Men's"
+        },
+        "keyLength": 3,
+        "attributesLength": 1
+      }, {
+        "item_number": {
+          "keyValue": "RRX9856",
+          "keyLength": 0,
+          "attributesLength": 0
+        },
+        "discount_until": {
+          "keyValue": new Date(1995, 11, 25),
+          "keyLength": 0,
+          "attributesLength": 0
+        },
+        "price": {
+          "keyValue": 42.5,
+          "keyLength": 0,
+          "attributesLength": 0
+        },
+        "size": {
+          "color_swatch": {
+            "keyValue": "Black",
+            "keyAttributes": {
+              "image": "black_cardigan.jpg"
+            },
+            "keyLength": 0,
+            "attributesLength": 1
+          },
+          "keyValue": null,
+          "keyAttributes": {
+            "description": "Medium"
+          },
+          "keyLength": 1,
+          "attributesLength": 1
+        },
+        "keyValue": null,
+        "keyAttributes": {
+          "gender": "Women's"
+        },
+        "keyLength": 4,
+        "attributesLength": 1
+      }],
+      "keyValue": null,
+      "keyAttributes": {
+        "description": "Cardigan Sweater"
+      },
+      "keyLength": 1,
+      "attributesLength": 1
+    },
+    "script": {
+      "keyValue": "function matchwo(a,b) {\n  if (a < b && a < 0) { return 1; }\n  else { return 0; }\n}",
+      "keyAttributes": {
+        "type": "text/javascript"
+      },
+      "keyLength": 0,
+      "attributesLength": 1
+    },
+    "keyValue": null,
+    "keyLength": 2,
+    "attributesLength": 0
+  },
+  "keyValue": null,
+  "keyLength": 1,
+  "attributesLength": 0
+}
+
+ +

È un approccio raccomandato nel caso in cui ci sia completamente ignota la struttura del documento XML che andremo a leggere.

+ +

Algoritmo #2: una via un po' meno prolissa

+ +

Quello che segue è un altro, più semplice, metodo di conversione. Dove i nodeAttributes saranno annidati nello stesso oggetto contenente la trascrizione dei nodi figli sebbene, a differenza di quelli, questi saranno contrassegnati dal prefisso “@”. Come sopra, il contenuto di testo di ciascun nodo sarà affidato alla proprietà keyValue. L'argomento del costruttore potrà essere l'intero Document, un DocumentFragment o, più semplicemente, un nodo di tipo Element di esso.

+ +
function buildValue(sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function JXONData (oXMLParent) {
+  if (oXMLParent.hasChildNodes()) {
+    var sCollectedTxt = "";
+    for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) {
+      oItChild = oXMLParent.childNodes.item(nChildId);
+      if ((oItChild.nodeType + 1 | 1) === 5) { sCollectedTxt += oItChild.nodeType === 3 ? oItChild.nodeValue.replace(/^\s+|\s+$/g, "") : oItChild.nodeValue; }
+      else if (oItChild.nodeType === 1 && !oItChild.prefix) {
+        sItKey = oItChild.nodeName.toLowerCase();
+        sItVal = new JXONData(oItChild);
+        if (this.hasOwnProperty(sItKey)) {
+          if (this[sItKey].constructor !== Array) { this[sItKey] = [this[sItKey]]; }
+          this[sItKey].push(sItVal);
+        } else { this[sItKey] = sItVal; }
+      }
+    }
+    if (sCollectedTxt) { this.keyValue = buildValue(sCollectedTxt); }
+  }
+  if (oXMLParent.hasAttributes()) {
+    var oItAttr;
+    for (var iAttrId = 0; iAttrId < oXMLParent.attributes.length; iAttrId++) {
+      oItAttr = oXMLParent.attributes.item(iAttrId);
+      this["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue);
+    }
+  }
+}
+
+var myObject = new JXONData(doc);
+// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject));
+
+ +

Con questo algoritmo il nostro esempio diventerà:

+ +
{
+  "catalog": {
+    "product": {
+      "catalog_item": [{
+        "item_number": {
+          "keyValue": "QWZ5671"
+        },
+        "price": {
+          "keyValue": 39.95
+        },
+        "size": [{
+          "color_swatch": [{
+            "keyValue": "Red",
+            "@image": "red_cardigan.jpg"
+          }, {
+            "keyValue": "Burgundy",
+            "@image": "burgundy_cardigan.jpg"
+          }],
+          "@description": "Medium"
+        }, {
+          "color_swatch": [{
+            "keyValue": "Red",
+            "@image": "red_cardigan.jpg"
+          }, {
+            "keyValue": "Burgundy",
+            "@image": "burgundy_cardigan.jpg"
+          }],
+          "@description": "Large"
+        }],
+        "@gender": "Men's"
+      }, {
+        "item_number": {
+          "keyValue": "RRX9856"
+        },
+        "discount_until": {
+          "keyValue": new Date(1995, 11, 25)
+        },
+        "price": {
+          "keyValue": 42.5
+        },
+        "size": {
+          "color_swatch": {
+            "keyValue": "Black",
+            "@image": "black_cardigan.jpg"
+          },
+          "@description": "Medium"
+        },
+        "@gender": "Women's"
+      }],
+      "@description": "Cardigan Sweater"
+    },
+    "script": {
+      "keyValue": "function matchwo(a,b) {\n  if (a < b && a < 0) { return 1; }\n  else { return 0; }\n}",
+      "@type": "text/javascript"
+    }
+  }
+}
+
+ +

È un approccio possibile nel caso in cui ci sia parzialmente nota la struttura del documento XML che andremo a leggere.

+ +

Algoritmo #3: una via sintetica

+ +

Ora proveremo un altro metodo di conversione. Questo algoritmo è quello che si avvicina di più alla Convenzione di Parker. Esso è molto simile al precedente, eccetto che per il fatto che i nodi che non contengono alcun nodo-figlio di tipo Element, ma solo nodi-figli di tipo Text e/o CDATASection, non saranno rappresentati da oggetti, ma direttamente da booleani, numeri, stringhe o istanze del costruttore Date (si veda la Convenzione di Parker). La rappresentazione dei nodi completamente vuoti invece (cioè che non contengono né nodi di tipo Element, né nodi di tipo Text, né nodi di tipo CDATASection) avranno come valore predefinito true (su questo punto si vedano le Considerazioni sul codice). Inoltre questa volta non si è ricorso a un costruttore, ma a una funzione. L'argomento della funzione potrà essere l'intero Document, un DocumentFragment o, più semplicemente, un nodo di tipo Element di esso.

+ +

In molti casi questo rappresenta il metodo di conversione più pratico.

+ +
function buildValue(sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function getJXONData (oXMLParent) {
+  var vResult = /* put here the default value for empty nodes! */ true, nLength = 0, sCollectedTxt = "";
+  if (oXMLParent.hasAttributes()) {
+    vResult = {};
+    for (nLength; nLength < oXMLParent.attributes.length; nLength++) {
+      oItAttr = oXMLParent.attributes.item(nLength);
+      vResult["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue.replace(/^\s+|\s+$/g, ""));
+    }
+  }
+  if (oXMLParent.hasChildNodes()) {
+    for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) {
+      oItChild = oXMLParent.childNodes.item(nChildId);
+      if (oItChild.nodeType === 4) { sCollectedTxt += oItChild.nodeValue; } /* nodeType is "CDATASection" (4) */
+      else if (oItChild.nodeType === 3) { sCollectedTxt += oItChild.nodeValue.replace(/^\s+|\s+$/g, ""); } /* nodeType is "Text" (3) */
+      else if (oItChild.nodeType === 1 && !oItChild.prefix) { /* nodeType is "Element" (1) */
+         if (nLength === 0) { vResult = {}; }
+        sItKey = oItChild.nodeName.toLowerCase();
+        sItVal = getJXONData(oItChild);
+        if (vResult.hasOwnProperty(sItKey)) {
+          if (vResult[sItKey].constructor !== Array) { vResult[sItKey] = [vResult[sItKey]]; }
+          vResult[sItKey].push(sItVal);
+        } else { vResult[sItKey] = sItVal; nLength++; }
+      }
+     }
+  }
+  if (sCollectedTxt) { nLength > 0 ? vResult.keyValue = buildValue(sCollectedTxt) : vResult = buildValue(sCollectedTxt); }
+  /* if (nLength > 0) { Object.freeze(vResult); } */
+  return vResult;
+}
+
+var myObject = getJXONData(doc);
+// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject));
+
+ +
Nota: Se si vuole congelare l'intero oggetto (a causa della natura "statica" di un documento XML), decommentare la stringa: /* if (nLength > 0) { Object.freeze(vResult); } */. Il metodo Object.freeze vieta l'aggiunta di nuove proprietà e la rimozione delle proprietà esistenti, congelando la loro enumerabilità, la loro configurabilità o la loro scrivibilità. In sostanza l'oggetto è reso effettivamente immutabile.
+ +

Con questo algoritmo il nostro esempio diventerà:

+ +
{
+  "catalog": {
+    "product": {
+      "@description": "Cardigan Sweater",
+      "catalog_item": [{
+        "@gender": "Men's",
+        "item_number": "QWZ5671",
+        "price": 39.95,
+        "size": [{
+          "@description": "Medium",
+          "color_swatch": [{
+            "@image": "red_cardigan.jpg",
+            "keyValue": "Red"
+          }, {
+            "@image": "burgundy_cardigan.jpg",
+            "keyValue": "Burgundy"
+          }]
+        }, {
+          "@description": "Large",
+          "color_swatch": [{
+            "@image": "red_cardigan.jpg",
+            "keyValue": "Red"
+          }, {
+            "@image": "burgundy_cardigan.jpg",
+            "keyValue": "Burgundy"
+          }]
+        }]
+      }, {
+        "@gender": "Women's",
+        "item_number": "RRX9856",
+        "discount_until": new Date(1995, 11, 25),
+        "price": 42.5,
+        "size": {
+          "@description": "Medium",
+          "color_swatch": {
+            "@image": "black_cardigan.jpg",
+            "keyValue": "Black"
+          }
+        }
+      }]
+    },
+    "script": {
+      "@type": "text/javascript",
+      "keyValue": "function matchwo(a,b) {\n  if (a < b && a < 0) { return 1; }\n  else { return 0; }\n}"
+    }
+  }
+}
+
+ +

È un approccio raccomandato nel caso in cui ci sia nota la struttura del documento XML che andremo a leggere.

+ +

Algoritmo #4: una via davvero minimalista

+ +

La seguente rappresenta un'altra possibile via di conversione. Anch'essa è molto vicina alla Convenzione di Parker. Con questo algoritmo la rappresentazione dei nodi di tipo Element che contengono a loro volta sullo stesso piano nodi-figli di tipo Element insieme con nodi-figli di tipo Text e/o di tipo CDATASection verrà resa per mezzo di istanze dei costruttori Boolean, Number, String, e Date. E di conseguenza la trascrizione di ogni eventuale nodo-figlio sarà annidata in oggetti di questo tipo.

+ +

Per esempio;

+ +
<employee type="usher">John Smith</employee>
+<manager>Lisa Carlucci</manager>
+
+ +

diventerà

+ +
var myObject = {
+  "employee": new String("John Smith"),
+  "manager": "Lisa Carlucci"
+};
+
+myObject.employee["@type"] = "usher";
+
+// test
+
+alert(myObject.manager); // "Lisa Carlucci"
+alert(myObject.employee["@type"]); // "usher"
+alert(myObject.employee); // "John Smith"
+
+ +

Come per il terzo algoritmo, i nodi che non contengono alcun nodo-figlio di tipo Element, ma solo nodi-figli di tipo Text e/o CDATASection, non saranno rappresentati da oggetti, ma direttamente da booleani, numeri, stringhe (valori primitivi) o da istanze del costruttore Date (si veda la Convenzione di Parker). Come per il terzo algoritmo, non si è usato un costruttore, ma una semplice funzione. L'argomento della funzione potrà essere l'intero Document, un DocumentFragment o, più semplicemente, un nodo di tipo Element di esso.

+ +
function buildValue (sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function objectify (vValue) {
+  if (vValue === null) {
+    return new (function() {
+      this.toString = function() { return "null"; }
+      this.valueOf = function() { return null; }
+    })();
+  }
+  return vValue instanceof Object ? vValue : new vValue.constructor(vValue);
+}
+
+var aTmpEls = []; // loaded element nodes cache
+
+function getJXONData (oXMLParent) {
+  var  sItKey, sItVal, vResult, nLength = 0, nLevelStart = aTmpEls.length,
+       nChildren = oXMLParent.hasChildNodes() ? oXMLParent.childNodes.length : 0, sCollectedTxt = "";
+
+  for (var oItChild, nChildId = 0; nChildId < nChildren; nChildId++) {
+    oItChild = oXMLParent.childNodes.item(nChildId);
+    if (oItChild.nodeType === 4) { sCollectedTxt += oItChild.nodeValue; } /* nodeType is "CDATASection" (4) */
+    else if (oItChild.nodeType === 3) { sCollectedTxt += oItChild.nodeValue.replace(/^\s+|\s+$/g, ""); } /* nodeType is "Text" (3) */
+    else if (oItChild.nodeType === 1 && !oItChild.prefix) { aTmpEls.push(oItChild); } /* nodeType is "Element" (1) */
+  }
+
+  var nLevelEnd = aTmpEls.length, vBuiltVal = buildValue(sCollectedTxt);
+
+  if (oXMLParent.hasAttributes()) {
+    vResult = objectify(vBuiltVal);
+    for (nLength; nLength < oXMLParent.attributes.length; nLength++) {
+      oItAttr = oXMLParent.attributes.item(nLength);
+      vResult["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue.replace(/^\s+|\s+$/g, ""));
+    }
+  } else if (nLevelEnd > nLevelStart) { vResult = objectify(vBuiltVal); }
+
+  for (var nElId = nLevelStart; nElId < nLevelEnd; nElId++) {
+    sItKey = aTmpEls[nElId].nodeName.toLowerCase();
+    sItVal = getJXONData(aTmpEls[nElId]);
+    if (vResult.hasOwnProperty(sItKey)) {
+    if (vResult[sItKey].constructor !== Array) { vResult[sItKey] = [vResult[sItKey]]; }
+      vResult[sItKey].push(sItVal);
+    } else { vResult[sItKey] = sItVal; nLength++; }
+  }
+
+  aTmpEls.length = nLevelStart;
+
+  if (nLength === 0) { vResult = sCollectedTxt ? vBuiltVal : /* put here the default value for empty nodes: */ true; }
+  /* else { Object.freeze(vResult); } */
+
+  return vResult;
+}
+
+var myObject = getJXONData(doc);
+alert(myObject.catalog.product.catalog_item[1].size.color_swatch["@image"]); // "black_cardigan.jpg"
+alert(myObject.catalog.product.catalog_item[1].size.color_swatch); // "Black" !
+ +
Nota: Se si vuole congelare l'intero oggetto (a causa della natura "statica" di un documento XML), decommentare la stringa: /* else { Object.freeze(vResult); } */ . Il metodo Object.freeze vieta l'aggiunta di nuove proprietà e la rimozione delle proprietà esistenti, congelando la loro enumerabilità, la loro configurabilità o la loro scrivibilità. In sostanza l'oggetto è reso effettivamente immutabile.
+ +

È un approccio possibile nel caso in cui ci sia nota la struttura del documento XML che andremo a leggere.

+ +

Algoritmi inversi

+ +

È possibile invertire gli algoritmi qui proposti in maniera tale da ottenere un nuovo documento XML a partire da un albero di oggetti Javascript.

+ +

Per semplicità proporremo qui un unico esempio, che in un unico codice rappresenta l'inversione degli algoritmi #2 e #3. È molto semplice partire da esso per creare gli inversi anche degli algoritmi #1 e #4, qualora se ne abbia la necessità.

+ +
function createXML (oJXONObj) {
+  function loadObj (oParentObj, oParentEl) {
+    var nSameIdx, vValue, oChild;
+    for (var sName in oParentObj) {
+      vValue = oParentObj[sName];
+      if (sName === "keyValue") {
+        if (vValue !== null && vValue !== true) { oParentEl.appendChild(oNewDoc.createTextNode(String(vValue))); }
+      } else if (sName.charAt(0) === "@") {
+        oParentEl.setAttribute(sName.slice(1), vValue);
+      } else {
+        oChild = oNewDoc.createElement(sName);
+        if (vValue.constructor === Date) {
+          oChild.appendChild(oNewDoc.createTextNode(vValue.toGMTString()));
+        } else if (vValue.constructor === Array) {
+          for (nSameIdx = 0; nSameIdx < vValue.length; nSameIdx++) { loadObj(vValue[nSameIdx], oChild); }
+        } else if (vValue instanceof Object) {
+          loadObj(vValue, oChild);
+        } else if (vValue !== null && vValue !== true) {
+          oChild.appendChild(oNewDoc.createTextNode(vValue.toString()));
+        }
+        oParentEl.appendChild(oChild);
+      }
+    }
+  }
+  var oNewDoc = document.implementation.createDocument("", "", null);
+  loadObj(oJXONObj, oNewDoc);
+  return oNewDoc;
+}
+
+var newDoc = createXML(myObject);
+// abbiamo ottenuto il nostro documento! provare per credere: alert((new XMLSerializer()).serializeToString(newDoc));
+
+ +
Nota: Con questo codice le istanze di Date eventualmente presenti verranno convertite in stringhe attraverso l'invocazione del metodo toGMTString(). Nulla vieta l'utilizzo di qualsiasi altro metodo di conversione. Inoltre le proprietà dell'albero con valore uguale a true verranno convertite in elementi privi di nodi di testo (si vedano le Considerazioni sul codice).
+ +

Si tratta di una buona soluzione nel caso si voglia automatizzare la creazione di un documento XML. È una cattiva scelta invece nel caso in cui si voglia ricostruire un documento XML già precedentemente convertito in JSON. Sebbene la conversione sia molto fedele (eccetto che per i nodi di tipo CDATASection, che verranno riconvertiti in nodi di tipo Text), si tratta di un processo inutilmente dispendioso. Nel caso infatti in cui il nostro scopo sia quello di modificare un documento XML, si raccomanda vivamente di lavorare su di esso invece che di crearne di nuovi.

+ +

La Convenzione di Parker

+ +

Le funzioni precedentemente elencate per la conversione di un documento XML in JSON (spesso chiamate «algoritmi JXON») sono più o meno liberamente basate sulla Convenzione di Parker. È chiamata “Convenzione di Parker”, in opposizione alla “Convenzione di BadgerFish”, sulla falsa riga del fumetto di Cuadrado Parker & Badger. Per ulteriori approfondimenti si veda anche la Convenzione di BadgerFish.

+ +

La seguente è una traduzione dall'inglese del paper originale della Convenzione di Parker (versione 0.4), dalla pagina “TransformingRules” del sito del progetto xml2json-xslt.

+ +

Questa convenzione è stata scritta per regolamentare la conversione in JSON da parte di XSLT, di conseguenza alcune parti di essa sono futili per Javascript.

+ +
Conversione in JSON
+ +
    +
  1. +

    L'elemento root verrà assorbito, poiché ce ne può essere soltanto uno:

    + + 
    <root>test</root>
    + +

    diventerà

    + + 
    "test"
+
    +
    2. +
  2. +

    I nomi degli elementi diventeranno proprietà di oggetti:

    + + 
    <root><name>Xml</name><encoding>ASCII</encoding></root>
    + +

    diventerà

    + + 
    {
+  "name": "Xml",
+  "encoding": "ASCII"
+}
+
    +
    3. +
  3. +

    I numeri saranno riconosciuti come tali (sia interi che decimali):

    + + 
    <root><age>12</age><height>1.73</height></root>
+
    + +

    diventerà

    + + 
    {
+  "age": 12,
+  "height": 1.73
+}
+
    +
    4. +
  4. +

    I booleani saranno riconosciuti come tali (case insensitive):

    + + 
    <root><checked>True</checked><answer>FALSE</answer></root>
    + +

    diventerà

    + + 
    {
+  "checked": true,
+  "answer": false
+}
+
    +
    5. +
  5. +

    Le stringhe avranno degli escape quando ce ne sarà la necessità:

    + + 
    <root>Quote: &quot; New-line:
+</root>
+
    + +

    diventerà

    + + 
    "Quote: \" New-line:\n"
+
    +
    6. +
  6. +

    Gli elementi vuoti diventeranno proprietà con valore nullo (null):

    + + 
    <root><nil/><empty></empty></root>
    + +

    diventerà

    + + 
    {
+  "nil": null,
+  "empty": null
+}
+
    +
    7. +
  7. +

    If all sibling elements have the same name, they become an array

    + + 
    <root><item>1</item><item>2</item><item>three</item></root>
+
    + +

    becomes

    + + 
    [1, 2, "three"]
+
    +
    8. +
  8. +

    Mixed mode text-nodes, comments and attributes get absorbed:

    + + 
    <root version="1.0">testing<!--comment--><elementtest="true">1</element></root>
+
    + +

    becomes

    + + 
    { "element": true }
+
    +
    9. +
  9. +

    Namespaces get absorbed, and prefixes will just be part of the property name:

    + + 
    <root xmlns:ding="http://zanstra.com/ding"><ding:dong>binnen</ding:dong></root>
+
    + +

    becomes

    + + 
    { "ding:dong" : "binnen" }
+
    +
    10. +
+ +
Note: Our algorithms comply with the points 2, 3, 4 and 7. The third and the fourth algorithm comply also with the point 6 (but true instead of null – si vedano le Considerazioni sul codice). The point 5 is automatically managed by the Javascript method JSON.stringify.
+ +
Appendice Javascript
+ +

All the same as the JSON translation, but with these extra's:

+ +
    +
  1. +

    Property names are only escaped when necessary

    + + 
    <root><while>true</while><wend>false</wend><only-if/></root>
    + +

    becomes

    + + 
    {
+  "while": true,
+  wend: false,
+  "only-if": null
+}
+
    +
    2. +
  2. +

    Within a string, closing elements "</" are escaped as "<\/"

    + + 
    <root><![CDATA[<script>alert("YES");</script>]]></root>
    + +

    becomes

    + + 
    { script: "<script>alert(\"YES\")<\/script>" }
+
    +
    3. +
  3. +

    Dates are created as new Date() objects

    + + 
    <root>2006-12-25</root>
    + +

    becomes

    + + 
    new Date(2006, 12 - 1, 25)
+
    +
    4. +
  4. +

    Attributes and comments are shown as comments (for testing-purposes):

    + + 
    <!--testing--><root><test version="1.0">123</test></root>
+
    + +

    becomes

    + + 
    /* testing */ { test /* @version = "1.0" */ : 123}
+
    +
    5. +
  5. +

    A bit of indentation is done, to keep things ledgible

    +
    6. +
+ +
Note: Our algorithms comply with the point 3 (but without month decrease). The points 1 and 2 are automatically managed by the Javascript method JSON.stringify.
+ +

In sintesi

+ +

Prendiamo il terzo algoritmo come l'algoritmo di conversione JXON più rappresentativo. Un singolo nodo XML di tipo Element può avere in totale otto differenti configurazioni a seconda di quello che contiene. Esso può essere:

+ +
    +
  1. un elemento vuoto,
    2. +
  2. un elemento contenente al suo interno solamente un nodo di testo,
    3. +
  3. un elemento vuoto ma contenente attributi,
    4. +
  4. un elemento con attributi contenente al suo interno solamente un nodo di testo,
    5. +
  5. un elemento contenente ulteriori elementi-figli con nomi diversi,
    6. +
  6. un elemento contenente ulteriori elementi-figli con nomi uguali,
    7. +
  7. un elemento contenente ulteriori elementi-figli e un unico nodo di testo (testo contiguo),
    8. +
  8. un elemento contenente ulteriori elementi-figli e più nodi di testo (testo non contiguo).
    9. +
+ +

The following table shows the corresponding conversion patterns between XML and JSON according to the third algorithm.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaseXMLJSONJavascript access
1<animal/>"animal": truemyObject.animal
2<animal>text</animal>"animal": "text"myObject.animal
3<animal name="value" />"animal": {"@name": "value"}myObject.animal["@name"]
4<animal name="value">text</animal>"animal": { "@name": "value", "keyValue": "text" }myObject.animal["@name"], myObject.animal.keyValue
5<animal> <dog>Charlie</dog> <cat>Deka</cat> </animal>"animal": { "dog": "Charlie", "cat": "Deka" }myObject.animal.dog, myObject.animal.cat
6<animal> <dog>Charlie</dog> <dog>Mad Max</dog> </animal>"animal": { "dog": ["Charlie", "Mad Max"] }myObject.animal.dog[0], myObject.animal.dog[1]
7<animal> in my house <dog>Charlie</dog> </animal>"animal": { "keyValue": "in my house", "dog": "Charlie" }myObject.animal.keyValue, myObject.animal.dog
8<animal> in my ho <dog>Charlie</dog> use </animal>"animal": { "keyValue": "in my house", "dog": "Charlie" }myObject.animal.keyValue, myObject.animal.dog
+ +

Considerazioni sul codice

+ +

In these examples we chose to use a property named keyValue for the text content. The lack of standars for XML to JSON conversion leads developers to choose several property names for the text content of XML Element nodes which contain also other child nodes. Sometimes it is used a property called $. Other times it is used a property called #text. In the algorithms proposed here you can easily change this name, depending on your needs.

+ +

The choice of using a true value instead of a null value to represent empty nodes is due to the fact that when in an XML document there is an empty node the reason is often to express a Boolean content, as in this case:

+ +
<car>
+  <type>Ferrari</type>
+  <bought />
+</car>
+
+ +

If the value were null it would be more cumbersome to launch a code like this:

+ +
if (myObject.car.bought) {
+  // do something
+}
+
+ +
According to our terzo algoritmo and our quarto algoritmo, just Text nodes or CDATASection nodes which contain nothing but white spaces (precisely: /^\s+$/) are parsed as null.
+ +

An important consideration is that, using the third or the fourth algorithm, an XML Document can be used to create any type of Javascript object. For example, If you want to create an object like the following:

+ +
{
+  "bool": true,
+  "array": ["Cinema", "Hot dogs", false],
+  "object": {
+    "nickname": "Jack",
+    "registration_date": new Date(1995, 11, 25),
+    "privileged_user": true
+  },
+  "num": 99,
+  "text": "Hello World!"
+}
+
+ +

you must just create an XML document with the following structure:

+ +
<bool>true</bool>
+<array>Cinema</array>
+<array>Hot dogs</array>
+<array>false</array>
+<object>
+  <nickname>Jack</nickname>
+  <registration_date>Dec 25, 1995</registration_date>
+  <privileged_user />
+</object>
+<num>99</num>
+<text>Hello World!</text>
+
+ +

This example also shows how the ideal JXON document is an XML document designed specifically to be converted in JSON format.

+ +

Costruire file a partire da istanze di Document

+ +

First, create a DOM tree as described in the Come creare un albero DOM article. If you have already have a DOM tree from using XMLHttpRequest, skip to the end of this section.

+ +

Now, let's serialize doc — the DOM tree — to a file (you can read more about using files in Mozilla):

+ +
var oFOStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
+var oFile = Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties).get("ProfD", Components.interfaces.nsILocalFile); // get profile folder
+oFile.append("extensions"); // extensions sub-directory
+oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}"); // GUID of your extension
+oFile.append("myXMLFile.xml"); // filename
+oFOStream.init(oFile, 0x02 | 0x08 | 0x20, 0664, 0); // write, create, truncate
+(new XMLSerializer()).serializeToStream(doc, oFOStream, ""); // rememeber, doc is the DOM tree
+oFOStream.close();
+
+ +

Costruire file a partire da istanze di XMLHttpRequest

+ +

If you already have a DOM tree from using XMLHttpRequest, use the same code as above but replace serializer.serializeToStream(doc, oFOStream, "") with serializer.serializeToStream(xmlHttpRequest.responseXML.documentElement, oFOStream, "") where xmlHttpRequest is an instance of XMLHttpRequest.

+ +

Note that this first parses the XML retrieved from the server, then re-serializes it into a stream. Depending on your needs, you could just save the xmlHttpRequest.responseText directly.

+ +

Resources

+ + diff --git a/files/it/creare_estensioni_personalizzate_per_firefox_con_il_sistema_di_sviluppo_di_mozilla/index.html b/files/it/creare_estensioni_personalizzate_per_firefox_con_il_sistema_di_sviluppo_di_mozilla/index.html new file mode 100644 index 0000000000..48813c2b19 --- /dev/null +++ b/files/it/creare_estensioni_personalizzate_per_firefox_con_il_sistema_di_sviluppo_di_mozilla/index.html @@ -0,0 +1,588 @@ +--- +title: >- + Creare Estensioni personalizzate per Firefox con il sistema di sviluppo di + Mozilla +slug: >- + Creare_Estensioni_personalizzate_per_Firefox_con_il_sistema_di_sviluppo_di_Mozilla +tags: + - Documentazione_build + - Estensioni + - TraduzioneIncompleta + - Tutte_le_categorie + - XPCOM +translation_of: >- + Archive/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System +--- +
Nota: Tutte le istruzioni contenute in questo articolo si applicano solo al ramo di Mozilla 1.8 (cioè Firefox 1.5). Cercheremo di tenere questo articolo aggiornato ai cambiamenti. Ciò che può sicuramente essere escluso è che funzioni con i rami 1.7 (firefox 1.0) o precedenti.
+ +

Esiste un'abbondanza di materiale su come creare un'estensione per Firefox. Tutta questa documentazione però presume che si stia sviluppando un'estensione utilizzando esclusivamente XUL e JavaScript. Per estensioni più complesse, potrebbe essere necessario creare dei componenti in C++ per fornire funzionalità aggiuntive. Le ragioni per la quale potrebbe essere necessario includere componenti C++ nell'estensione, possono essere:

+ + + +

Questo articolo descrive come impostare l'ambiente di sviluppo per un'estensioni di Firefox grande e complessa con alcuni o tutti i requisiti menzionati più sotto. Il processo di raccolta di queste informazioni è stato un pò faticoso a causa della mancanza di informazioni pubblicate su questo argomento, ma è stato assistito da vari membri della comunità di sviluppo di Mozilla, che hanno mostrato una pazienza estrema nel rispondere alle domande di novizi impreparati. In quest'articolo potrebbero esserci molte cose inesatte, poco chiare o non accurate. L'obbiettivo è quello di limare queste istruzioni fino a farle divenire una guida definitiva per seri programmatori che intendano estendere la piattaforma di Firefox. Se sei uno dei tanti che ne sanno di più, il tuo aiuto per migliorare questo articolo sarà enormemente apprezzato.

+ +

Devo ricordare chenon è necessario compilare Mozilla o usare il Mozilla build system se si vogliono creare componenti C++ per Mozilla. Se si vuole solo creare un componente XPCOM o due, questa è probailmente una guida troppo elaborata, e si farebbe meglio a dare invece uno sguardo a questo documento. D'altra parte, si si è uno sviluppatore (o un team di sviluppo) con una certa esperienza, e si sa che si andrà a realizzare una estensione grande e complessa, si può tenere in considerazione l'approccio descritto in questo documento.

+ +

Un'ultima nota: ho provato queste tecniche solo con Firefox, ma probabilmente funzionano più o meno bene anche con altre piattaforme basate su Gecko, come Thunderbird o Seamonkey. Se qualcuno può confermarmelo e/o fornire linee guida su cosa differisce, Aggiorenrò l'articolo per incorporare tali informazioni.

+ +

Bambi Incontra Mozilla

+ +

Niente di questo doocumento è per i deboli di cuore, In particolare, i passi iniziali richiedono di effettuare il build di Mozilla, che è un enorme - no, gargantuesco! - progetto. Più di uno sviluppatore è stato portato sull'orlo della pazzia provando ad effettuare il build per la prima volta. Se non si è sviluppatori C++ esperti, non me ne preoccuperò. Passate a JavaScript.

+ +

Su piattaforme Windows

+ +

Per il mio primo build di Mozilla ho usato questa guida. Non riesco a ricordare perché, ma mi sono bloccato per diverse maniere, ed il tutto è terminato solo dopo aver preso molto più tempo di quanto avessi preventivato. Ecco una guida di insieme che ha ricevuto buone critiche. Seguite metodicamente ogni passo e probabilmente avrete la meglio. Tenete in mente che una volta fatto funzionare il build, probabilmente da lì in poi potrete lavorare senza sforzi. Forse.

+ +

I can’t even remember why anymore, but I got stuck in a number of places, and the whole affair ended up taking far longer than I originally expected. Much furniture was smashed, much hair torn out by the roots. Here’s a {{ mediawiki.external('http://whereswalden.com/mozilla/msvcfree/ comprehensive looking guide') }} that’s gotten good reviews. Follow every step methodically and you’ll probably be alright. Focus on the fact that once you get the build working, it’ll probably work effortlessly from then on. Maybe.

+ +

Su altre piattaforme

+ +

Non ho mai provato ad effettuare build su altre piattaforme, per cui non so nulla di questo. Immagino comunuque che nei sistemi Unix-like il procedimento sia più semplice. Si può consultare questa lista completa di piattaforme per cui sono disponibili istruzioni per il building.

+ +

Strutturare il proprio progetto

+ +

Mozilla include un insieme di estensioni complesse che sono integrate nel suo processo di build. Per questo motivo si rende necessario risolvere tutti i problemi correlati alla creazione e registrazione di componenti XPCOM, build di file JAR e manifests, installazione del tutto nella directory extensions/ di Firefox e così via. Si rende quindi necessario fare riferimento a questa struttura per costruire la nostra estensione.

+ +

Prima di tutto, pensiamo ad un nome accattivante per l'estensione e creiamo la directory con quel nome come sottodirectory di /mozilla/extensions/. Usare solo lettere minuscole. Ci dovrebbe essere un insieme di altre directory (inspector/, reporter/ e così via) nello stesso livello dell'albero di build.

+ +


+ Notare che prima di effettuare il build di qualcosa, il build system di Mozilla invoca un processo di configurazione che genera i makefile usati per effettuare il build, a partire dallo schema di makefile chiamato Makefile.in. Il makefile attuale tende ad essere molto simile o anche identico allo schema, ma la maggiore flessibilità data dalla sua generaziione automatica è uno dei punti che rendono il sistema di build così potente.

+ +

Anatomia di una semplice estensione C++

+ +

Assumiamo stiate usando C++ per scrivere componenti XPCOM che possono essere usati da altri componenti C++ o da JavaScript. Il processo di creazione di un componente è relativamente lineare, utilizzando il build system di Mozilla.

+ +

Nel caso più semplice, un componente consisterà di una singola directory principale con due sottodirectory, public/ e src/. La directory principale deve contenere un Makefile.in (da ora in poi ci riferiremo a questo come al makefile anche se sappiamo che viene usato per generare quello vero). Questo Makefile ci dà due informazioni. Primo, elenca le sotodirectory che compongono l'estensione, di modo che il build system sa dove cercare per makefile aggiuntivi. Secondo, istruisce il build system sul creare una nuova estensione, piuttosto che copiare i componenti direttamente nella directory binaria di Firefox. Il primo vantaggio di usare una estensione è che diventa veramente facile realizzare un pacchetto con tutto il necessario ed installarlo su un'altra macchina.

+ +

Detto ciò ecco il makefile di base, puro e semplice (Makefile.in nella directory principale dell'estensione):

+ +
DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+
+DIRS		= public src
+
+XPI_NAME		= myextension
+INSTALL_EXTENSION_ID	= myextension@mycompany.com
+XPI_PKGNAME		= myextension
+
+DIST_FILES = install.rdf
+
+include $(topsrcdir)/config/rules.mk
+
+ +

Una descrizione dettagliata del processo di build, che descrive le caratteristiche chiave di questo makefile, può essere trovata a questo indirizzo. MODULE e XPI_NAME sono entrambi impostati come il nome della propria estensione. sono ripetuti in tutti i makefile del progetto di modo che ogni file sia inserito nella stessa posizione all'interno dell'area operativa XPI (XPI staging area , v. sotto). INSTALL_EXTENSION_ID è l'ID univoco della propria estensione. Questo può essere un GUID, ma il formato visto sopra è più grazioso e, diciamocelo, molto più semplice da ricordare. Non è necessario fornire un XPI_PKGNAME, ma se si crea un file XPI, pronto per la distribuzione, viene automaticamente creato nella radice dell'area operativa XPI (/mozilla/$(MOZ_OBJDIR)/dist/xpi-stage/).

+ +

Ogni estensione deve includere un file install.rdf che indica a Firefox come deve essere installata. Questo file dovrebbe essere posizionato nella directory principale dell'estensione ed essere simile a questo:

+ +
<?xml version=\"1.0\"?>
+
+<RDF xmlns=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"
+     xmlns:em=\"http://www.mozilla.org/2004/em-rdf#\">
+  <Description about=\"urn:mozilla:install-manifest\">
+    <em:id>myextension@mycompany.com</em:id>
+    <em:version>0.1</em:version>
+
+    <em:targetApplication>
+      <!-- Firefox -->
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+        <em:minVersion>1.0+</em:minVersion>
+        <em:maxVersion>1.0+</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- front-end metadata -->
+    <em:name>My First Extension</em:name>
+    <em:description>Just an example.</em:description>
+    <em:creator>allpeers.com</em:creator>
+    <em:homepageURL>http://www.allpeers.com/blog/</em:homepageURL>
+  </Description>
+</RDF>
+
+ +

MozillaZine ha una descrizione dettagliata del formato del file install.rdf. Usare la variabile DIST_FILES nel makefile per dire a make di copiare il file nella directory dell'estensione e (opzionalmente) nel file XPI.

+ +

Interfacce pubbliche

+ +

La directory public/ contiene ogni interfaccia che deve essere accedibile da altri moduli. Questi possono essere file IDL che descrivono interfacce XPCOM, i quali vengono usati per generare file header C++ per l'inclusione all'interno del proprio file sorgente. Possono anche essere normali file header C++ che vengono usati direttamente da altri moduli. Il modo più facile per permettere questa ultimaoperazione è l'implementazione inline di tutti i metodi, così da non avere dipendenze aggiuntive in fase di linking. Si dovrà altrimenti eseguire illink statico al proprio modulo se si usano questi header pubblici in altri moduli. Personalmente scoraggerei qyesta pratica (tra l'altro, il linking static significa avere lo stesso codice caricato più di una volta in memoria, il quale non sarà poi disponibile per Javascript o altri linguaggi diversi dal C++) e incoraggerei l'uso di XPCOM dove possibile.

+ +

Il Makefile nella directory public/ dovrebbe seguire questo modello:

+ +
DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE		= myextension
+XPIDL_MODULE	= myextension
+
+XPI_NAME = myextension
+
+EXPORTS = \
+		myHeader.h \
+		$(NULL)
+
+XPIDLSRCS	= \
+		myIFirstComponent.idl \
+		myISecondComponent.idl \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+ +

XPIDL_MODULE è il nome del file XPT generato che contine informazioni de tipo riguardanto le proprie interfacce IDL. Se si hanno più moduli, assicurarsi assolutamente di usare un valore differente di XPIDL_MODULE per ognuno. In caso contrario il primo modulo XPT verrà sovrascritto dal secondo e si otterrnno errori NS_ERROR_XPC_BAD_IID quando si proverà ad accedere alle interfacce IDL dal proprio codice. I file sotto EXPORTS vengono copiati direttamente nella directory /mozilla/$(MOZ_OBJDIR)/dist/include/myextension/ e sono quindi accedibili da altri moduli (il valore di MOZ_OBJDIR è definito in /mozilla/.mozconfig). XPIDLSRCS sono eseguiti attraverso il processore IDL, e gli header C++ generati vengono copiati nella stesa directory di inclusione. In aggiunta, viene generato un file XPT (tipo libreria) e posizionato nella sottodirectory components/ dell'estensione.

+ +

File sorgenti

+ +

Ora è il momento di creare il makefile ed i file sorgente nella sottodirectory src/. Se si stanno reimplementando interfacce descritte usando IDL, la maniera più facile di farlo è lasciare la directory src/ vuota ed eseguire make solo nella directory public/; spiegheremo tra breve il perché.

+ +

Si può poi aprire il file header generato per la propria interfaccia da /mozilla/$(MOZ_OBJDIR)/dist/include/myextension/. QUesta directory contiene i file .H e .CPP dei componenti che possono essere copiati ed incollati all'interno dei propri file di implementazione. Tutto ciò che c'è da fare è riempire gli abbozzi di implementazione presenti nel file C++ e si è pronti per partire.

+ +

Ecco un esempio del makefile da inserire all'interno della directory src:

+ +
DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+IS_COMPONENT = 1
+MODULE = myextension
+LIBRARY_NAME =  myExtension
+
+XPI_NAME = myextension
+
+REQUIRES	= xpcom \
+		  string \
+		  $(NULL)
+
+CPPSRCS		= \
+		  myFirstComponent.cpp \
+		  mySecondComponent.cpp \
+		  myExtension.cpp \
+		  $(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+EXTRA_DSO_LDOPTS += \
+  $(XPCOM_GLUE_LDOPTS) \
+  $(NSPR_LIBS) \
+  $(NULL)
+
+# NOTE: If you are coding against the 1.8.0 branch (not 1.8 branch or trunk), the
+# above line won't work, due to linker flag issues. Use the following
+# variables instead:
+#
+# EXTRA_DSO_LDOPTS += \
+#   $(MOZ_COMPONENT_LIBS) \
+#   $(NULL)
+#
+# Unfortunately, using MOZ_COMPONENT_LIBS links against xpcom_core, which means
+# your components will not work in future versions of Firefox.
+
+ +

La sezione REQUIRES dice a make quali moduli sono utilizzati dal proprio componente. Questo causa l'aggiunta delle sottodirectory di /mozilla/$(MOZ_OBJDIR)/dist/include/ interessate nel path di inclusione del compilatore C++. Se si stanno includendo header Mozilla ed il compilatore non riesce a trovarli, potrebbe benissimo significare che in REQUIRES non sono stati elencati tutti i moduli necessari. CPPSRCS i file sorgente che devono essere compilati.

+ +

In questo esempio, i primi due file contengono l'implementazione dei due componenti dell'estensione. Il fuile finale, myExtension.cpp, contiene il codice necessario per registrare questi componenti, come descritto nella prossima sezione.

+ +

Registrare i componenti

+ +

Pre poter utilizzare i propri componenti da altri moduli C++ e JavaScript, devono prima essere registrati. Per fare ciò, l'estensione deve implementare una classe che espone l'interfaccia nsIModule, che ha i metodi per accedere ai componenti definiti in un modulo. Fortunatamente, questo può essere fatto attraverso l'uso di semplici macro, in modo da non doversi preoccupare dei dettagli di funzionamento.

+ +

Il primo passo è la definizione di un CID, ID di contratto (contract ID ) ed un nome di classe per ogni componente. Inserire il codice seguente (adattando alle proprie esigenze i vari #defines) all'interno dell'header di ogni componente che si vuole istanziare tramite il component manager (gestore dei componenti ):

+ +
// {00000000-0000-0000-0000-000000000000}
+#define MYFIRSTCOMPONENT_CID \
+	{ 0x00000000, 0x0000, 0x0000, \
+	{ 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 } }
+
+#define MYFIRSTCOMPONENT_CONTRACTID	\"@mycompany.com/myfirst;1\"
+#define MYFIRSTCOMPONENT_CLASSNAME	\"My First Component\"
+
+ +

Ovviamente è necessario compilare il CID con GUID vero. In Windows, questo può essere fatto usando guidgen.exe. Gli utenti Unix possono usare uuidgen (fornito direttamente da molte distribuzioni unix e Linux).

+ +

Si deve poi creare il file myExtension.cpp in modo simile a questo:

+ +
#include \"nsXPCOM.h\"
+
+#include \"nsIGenericFactory.h\"
+
+/**
+ * Componenti da registrare
+ */
+#include \"myFirstComponent.h\"
+#include \"mySecondComponent.h\"
+
+NS_GENERIC_FACTORY_CONSTRUCTOR(myFirstComponent)
+NS_GENERIC_FACTORY_CONSTRUCTOR(mySecondComponent)
+
+//----------------------------------------------------------
+
+static const nsModuleComponentInfo components[] =
+{
+	{
+		MYFIRSTCOMPONENT_CLASSNAME,
+		MYFIRSTCOMPONENT_CID,
+		MYFIRSTCOMPONENT_CONTRACTID,
+		myFirstComponentConstructor
+	},
+	{
+		MYSECONDCOMPONENT_CLASSNAME,
+		MYSECONDCOMPONENT_CID,
+		MYSECONDCOMPONENT_CONTRACTID,
+		mySecondComponentConstructor
+	},
+};
+
+NS_IMPL_NSGETMODULE(MyExtension, components)
+
+ +

La macro NS_IMPL_NSGETMODULE crea l'oggetto modulo appropriato fornendo l'accesso a tutti i componenti elencati nell'array nsModuleComponentInfo.

+ +

Effettuare il build

+ +

Come detto prima, probabilmente si vuole effettuare il build di una estensione immediatamente dopo aver creato i propri file IDL in modo da generare gli abbozzi C++ per le proprie implementazioni dei componenti. Assumo che abbiate già compilato con successo Firefox. Se non è così, andate all'inizio di questo articolo e non tornate finché non avrete un firefox.exe fuzionante. Non passate dal via. Non ritirate 20 Euro.

+ +

Ancora qui? Okay, ora va modificato il proprio .mozconfig (nella directory radice /mozilla/) di modo che la propria estensione venga compilata con insieme Mozilla. Aggiungere le seguenti linee alla fine del file:

+ +
ac_add_options --enable-extensions=default,myextension
+
+ +

Lanciare poi make dalla directory radice di Mozilla:

+ +
make -f client.mk build
+
+ +

Anche si si ha una versione compilata recentemente di Firefox, si dovrà attendere per un po' mentre il make visita ricorsivamente tutto l'albero di directory del codice sorgente di Mozilla cercando nuovo materiale (la mia macchina, che è abbastanza veloce, impiega 10-15 minuti). Raggiungerà anche la vostra estensione e genererà una serie di elementi all'interno di /mozilla/$(MOZ_OBJDIR)/:

+ + + +

Gran parte di questo materiale non è creato in questo primo passo finché make segnalerà di non trovare i file sorgenti per i componenti. Non c'è da preoccuparsi di questo: tutto ciò che serve sono i file header generati che contengono gli abbozzi delle implementazioni C++. Perché la compilazone possa terminare devono essere rimpolpate le implementazioni dei componenti. Va ricordato che non si dovrebbe mai modificare uno di questi file generati automaticamente. Vanno sempre modificati i file usati per generarli e riavviari make. Possono esserci delle eccezioni, a questa regola, ma se si stanno cambiando i file automaticamente generati, molto ptobabilmente si sta sbagliando qualcosa.

+ +

Il processo di esplorazione dell'intero albero di Mozilla dura molto tempo. Se si ha già una build di Mozilla, è possibile evitarlo creando un makefile direttamente per ogni estensione. Nella directory radice del proprio $(MOZ_OBJDIR) si digita (da una shell compatibile con bash):

+ +
../build/autoconf/make-makefile extensions/myextension
+
+ +

Se la propria $(MOZ_OBJDIR) è posizionata fuori da $(TOPSRCDIR), è necessario digitare:

+ +
$(TOPSRCDIR)/build/autoconf/make-makefile -t $(TOPSRCDIR) extensions/myextension
+
+ +

perché lo script sappia dove si trovano i sorgenti (it'll use the extension path you gave it relative to the current dir to figure out where you want your makefiles to go).

+ +

Questo genererà il makefile appropriato per l'estensoine. Che si effettui il build di tutto l'albero Mozilla o si prenda questa scorciatoia, da ora in poi è possibile compilare andando in /mozilla/$(MOZ_OBJDIR)/extensions/myextension/ e digitando "make" sulla linea di comando. Questo dovrebbe effettuare il build del proprio componente senza disturbare il resto di Mozilla. Se tutto funziona, si vedrà il proprio file XPI nell'area operativa XPI. Si vedrà anche la versione "esplosa" del pacchetto XPI (ad esempio la struttura decompressa delle directory) all'interno di /mozilla/$(MOZ_OBJDIR)/dist/bin/extensions. (se qualcosa va storto, cercate cosa, risolvetelo e poi tornate qui ed aggiungete la soluzione a questo articolo.)

+ +

Per assicurarsi che il processo di build sia veramente finito, lanciare Firefox e controllare che la propria estensione sia elencate selezionando Tools/Extensions. Se si usa Firefox come browser predefinto (e se no, perché?), potrebbe essere necessario chiudere la versione "regolare" di Frefox prima di eseguire quella modificata. Se questo accade, si può provare ad impostare la variabile d'ambiente MOZ_NO_REMOTE al valore "1" prima di eseguire la versione di Firefox di sviluppo. Si avràa bisogno inoltre di usare un profilo differente per questa versione:

+ +
firefox -Pdevelopment
+
+ +

Dove è sostituito dal nome del nuovo profilo creato. Questo permetterà di eseguire entrambe le versioni di Firefox simultaneamente, permettendo di risparmiare tempo durante il ciclo di build/test.

+ +

Chrome, dolce Chrome

+ +

Nota: il titolo originale e' "No Place Like Chrome", una parafrasi di "No Place Like Home", che non ha equivalenti validi in italiano ma che rassomiglia a "Casa dolce Casa" Yippee-ki-yay! Ora abbiamo una estensione che fa, be', assolutamente nulla. E' ora di fare qualcosa con questi fantastici componenti che sono stati implementati e registrati. Il modo più semplice per fare questo è scrivere un po' di codice JavaScript e XUL. A questo punto, sarebbe di aiuto avere un po' di esperienza nella scrittura di estensioni "regolari" (ad esempio, che non utilizzano componenti C++ personali). Se non si ha mai provato, il mio consiglio è di pensare ad una idea carina per qualcosa di semplice che avreste sempre voluto avere in Firefox e scriverla. Anche solo visualizzare un nuovo elemento di menu che apre una finestra di dialogo "Hello, World!" è pur sempre un grande esercizio di riscaldamento.

+ +

Assumiamo ora che sappiate scrivere estensioni in XUL/JavaScript, siete a conoscenza del fatto che molte delle parti importanti vanno a finire nella directory chrome/ della vostra estensione. Bene, il fatto che si stiano usando anche componenti C++ non cambia nulla. Per questo bisogna creare le solite directory content/, locale/ e skin/ in cui inserire i propri file chrome. Personalmente mi piace posizionare questi direttamente nella directory radice del modulo, ma suppongo non faccia alcuna differenza se si preferisce inserirli in delle sottodirectory chrome/ o altro ancora. Spazio alla libertà!

+ +

Una volta scritti i necessari file chrome (ad esempio un overlay che aggiunga una voce di menu per istanziare ed usare uno dei propri componenti), è necessario inserirli in un pacchetto come parte della propria estensione. Questo si fa utilizzando un Manifest JAR. Per il nostro semplice esempio di estensione, il file potrebbe somigliare a questo:

+ +
myextension.jar:
+%  content myextension %content/
+%  locale myextension en-US %locale/en-US/
+%  skin myextension classic/1.0 %skin/classic/
+%  overlay chrome://browser/content/browser.xul chrome://myextension/content/MyExtensionOverlay.xul
+	content/MyExtensionOverlay.js		(content/MyExtensionOverlay.js)
+	content/MyExtensionOverlay.xul		(content/MyExtensionOverlay.xul)
+	locale/en-US/MyExtension.dtd		(locale/en-US/MyExtension.dtd)
+	locale/en-US/MyExtension.properties	(locale/en-US/MyExtension.properties)
+	skin/classic/MyExtension.css		(skin/classic/MyExtension.css)
+
+ +

Questo codice va inserito in un file chiamato jar.mn nella directory radice della propria estensione, assicurandosi che i percorsi tra parentesi puntino ai file attuali (se interpretati in relazione con la directory radice). Deve inoltre essere fatta una piccola modifica al makefile nella stessa directory, aggiungendo la linea:

+ +
USE_EXTENSION_MANIFEST = 1
+
+ +

Questo indica al make di creare un singolo file manifest chiamato chrome.manifest invece di creare file manifest con strani nomi per ogni pacchetto.

+ +

Dopo aver lanciato ancora make, si dovrebbe veder apparire una nuova sottodirectory chrome nella propria estensione (/mozilla/$(MOZ_OBJDIR)/dist/bin/extensions/myextension@mycompany.com/). Da notare che la directory chrome contiene un file JAR (ad esempio ZIP) con tutti i file chrome elencati in jar.mn cos'ì come una completa struttura delle directory alla strgua di quella presente nel file JAR. La struttura, comunque, è vuota. Perché? Non lo so. Non preoccupatevi di questo, i file contenuti nel JAR gli unici che vengono utilizzati.

+ +

Complicare il tutto

+ +

Se si sta sviluppando una estensione veramente complessa con molti componenti XPCOM, probabilmente si vorrà dividere il proprio codice in moduli più piccoli.

+ +
Estensioni un po' complicate
+ +

Per una estensione moderatamente complicata, probabilmente è sufficiente dividere il codice in un livello singolo di moduli. Assumiamo che abbiate un modulo base/ che definisce un insieme base di componenti XPCOM ed un modulo advanced/ che definisce alcuni chrome così come altri componenti che utilizzano quelli di base. La struttura completa delle directory somiglierà a questa:

+ + + +

Oltre a ciò, non cambia molto altro. I makefile in base/ e advanced/ dovrebbero essere più o meno simili al makefile originale nella directory radice, ricordando di cambiare la variabile DEPTH poiché questi sono stati spostati di un livello di directory rispetto alla radice di Mozilla.

+ +

Va inoltre rimossa la variabile DIST_FILES poiché il suo valore viene preso dal makefile di livello più alto. Ogni makefile che genera qualcosa dovrebbe definire la variabile XPI_NAME per assicurarsi che i file generati finiscano nella directory della propria estensione e non nella directory globale components/. Basta comunuque definire la variabile in ogni makefile per stare tranquilli. Si può usare lo stesso valore di MODULE sia in base/ che in advanced/ di modo che tutti i fileinclude vadano nella stessa directory, assicurandosi però di non usare lo stesso stesso valore XPIDL_MODULE nelle due directory public/, o una delle librerie di tipo componenti (ad es. file XPT) sovrascriverà l'altra e si scatenerà l'inferno.

+ +

Ogni modulo deve inoltre avere un valore differente per la variabile LIBRARY_NAME. Questo è il nome della libreria dinamica generata, per cui se devono essere richiamate le librerie "myBase" e "myAdvanced", useremo i nomi con estensione myBase.dll e myAdvanced.dll (almeno in Windows). Ognuno dei due moduli andrà ad avere un file C++ separato per la registrazione dei componenti. Per questo motivo ci saranno due file simili a myExtension.cpp visto nell'esempio orginale, diciamo Base.cpp e Advanced.cpp. Infine, ogni modulo avrà ovviamente il proprio jar.mn, anche se essi possono fare riferimento allo stesso nome di file e pacchetto JAR, se si vuole che tutti i file chrome siano organizzati in un singolo pacchetto/file JAR. L'unico file che resta immutato è install.rdf, che ancora esiste unicamente nella directory radice dell'estensione.

+ +

Il makefile di livello più alto sarà ora simile a questo:

+ +
DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+
+DIRS		= base advanced
+
+XPI_NAME               = myextension
+INSTALL_EXTENSION_ID   = myextension@mycompany.com
+XPI_PKGNAME		= myextension
+
+DIST_FILES = install.rdf
+
+include $(topsrcdir)/config/rules.mk
+
+ +
Estensioni veramente complicate
+ +

Ad un certo momento, anche un singolo modulo potrebbe crescere al punto da dover essere diviso in sottomoduli. La differenza tra avere moduli separati ed avere un modulo singolo con sottomoduli separati è che i sottomoduli condividono lo stesso file per la registrazione dei componenti (il famoso file myExtension.cpp), e se compilato creano una unica libreria dinamica. La decisione di dividere un modulo in sotomoduli riguarda solo l'organizzazione del codice; non avrà ripercussioni sul prodotto finale.

+ +

Per dividere un modulo in sottomoduli, va prima creata una sottodirectory per ognuno. Dopodiché va creata una directory build/. Ogni sottomodulo sarà configurato per creare una libreria static, che la directory build riunirà per creare una unica libreria dinamica dei componenti. Confusi? Ecco un esempio, che mostra il ramo advanced/ della directory myextension/:

+ + + +

Come si vede, abbiamo diviso advanced/ in due sottomoduli: intricate/ e multifarious/, ed abbiamo aggiunto una sottodirectory build/. Abbiamo lasciato le directory chrome direttamente in advanced/, dato che non appartengono a nessun sottomodulo in particolare. QUesto vuol dire che il file jar.mn sarà nello stesso posto.

+ +

I makefile di intricate/ and multifarious/ somiglieranno molto al makefile originale di advanced/ anche se devono essere un po' manipolati. COme al solito, va aggiustato il valore della variabile DEPTH dato che i makefile sono ora più in profondità nella struttura delle directory. Andrebbe inoltre cambiato il valore di LIBRARY_NAME per indicare che si sta generando una libreria static per ogni sottomodulo. Per convenzione viene usato il suffisso "_s" a questo scopo . Chiamiamo quindi le librerie "myIntricate_s" e "myMultifarious_s". Infine, definiamo la variabile FORCE_STATIC_LIB, ottenendo un makefile il cui inizio è simile a questo:

+ +
DEPTH		= ../../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+LIBRARY_NAME = myIntricate_s
+FORCE_STATIC_LIB = 1
+
+XPI_NAME = myextension
+
+...altre cose qui...
+
+ +

Il makefile di build compone insieme tutte le librerie statiche generate dai sottomoduli e crea una libreria (dinamica)dei componenti:

+ +
DEPTH		= ../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+IS_COMPONENT = 1
+MODULE = myextension
+LIBRARY_NAME = myAdvanced
+
+XPI_NAME = myextension
+
+DEFINES += XPCOM_GLUE
+
+SHARED_LIBRARY_LIBS = \
+		$(DIST)/lib/$(LIB_PREFIX)myIntricate_s.$(LIB_SUFFIX) \
+		$(DIST)/lib/$(LIB_PREFIX)myMultifarious_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)xpcomglue_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)xpcom.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)nspr4.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)plds4.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)plc4.$(LIB_SUFFIX) \
+		$(NULL)
+
+REQUIRES	= \
+		xpcom \
+		string \
+		$(NULL)
+
+CPPSRCS		= \
+		Advanced.cpp \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+LOCAL_INCLUDES += \
+        -I$(srcdir)/../intricate/src \
+        -I$(srcdir)/../multifarious/src \
+        $(NULL)
+
+ +

Il makefile nella directory advanced/ dovrebbe elencare le directory intricate/, multifarious/ e build/ nel calore della sua variabile DIRS. CIs i deve assicurare che build/ sia elencato come ultimo, dato che non può essere creata la libreria di componenti fino a quando gli altri makefile non hanno terminato.

+ +

Altri argomenti

+ +

Aggiungere file di dati alle proprie estensioni

+ +

In alcuni casi, si potrebbe voler includere file aggiuntivi nella propria estensione che non appartengono alla sottodirectory chrome/. Alcuni esempi potrebbero essere file di database o schemas XML. A questo proposito è possibile aggiungere un passo all'interno del makefile, per copiare i file dall'albero sorgente alla directory di destinazione dell'estensione.

+ +
Copiare file di dati nella directory di destinazione
+ +

Diciamo che avete alcuni file di dati contenti informazioni statistiche che volete include nella vostra estensione e rendere disponibile ai vostri componenti. Avete inserito questi file, con estensione .TXT, in una sottodirectory stats/ nella directory sorgente dell'estensione. La seguente regola di makefile può essere usata per copiare tali file nella directory di destinazione finale dell'estensione:

+ +
libs::
+	if test ! -d $(FINAL_TARGET)/stats; then \
+		$(NSINSTALL) -D $(FINAL_TARGET)/stats; \
+	fi
+	$(INSTALL) $(srcdir)/*.txt $(FINAL_TARGET)/stats
+
+ +
Accedere ai file di dati tramite Componenti
+ +

Il trucco per accedere ai propri file di dati è immaginare dove si trova la home directory della propria estensione. Alcune voci sostengono che in un prossimo futuro, questo sarà possibile attraverso l'interfaccia nsIExtensionManager o qualcosa di simile. Nel frattempo, c'è un hack semplice ed affidabile che può essere usato per raggiungere lo scopo. Nell'implementazione di ogni compoente JavaScript XPCOM, è presente uno speciale simbolo __LOCATION__ (due caratteri di underscore all'inizio e alla fine del nome) che punta al file di implementazione del componente. Perciò si può scrivere un semplice componente che deduce la directory radice della propria estensione estrapolandola da lì.

+ +

Questo articolo spiega come creare un componente XPCOM in JavaScript. Si avrà bisogno di un file IDL per una interfaccia simile a questa:

+ +
interface myILocation : nsISupports
+{
+    readonly attribute nsIFile locationFile;
+};
+
+ +

Il file IDL va posizionato nella directory public/ del progetto o sottoprogetto. Nella directory src/, va inserito il file JavaScript che implementa il componente. L'implementazione del componente includerà i metodi per ottenere il percorso o il file per la home directory dell'estensione:

+ +
myLocation.prototype =
+{
+  QueryInterface: function(iid)
+  {
+    if (iid.equals(nsISupports))
+      return this;
+    if (iid.equals(myILocation))
+      return this;
+
+    Components.returnCode = Components.results.NS_ERROR_NO_INTERFACE;
+    return null;
+  },
+
+  get locationFile()
+  {
+     return __LOCATION__.parent.parent;
+  }
+}
+
+ +

Questo metodo assume che il componente risieda in una sottodirectory di quella dell'estensione (per convenzione, questa directory viene chiamata components/). La proprietà parent di __LOCATION__ ritorna components/, ed il suo valore parent è la home directory dell'estensione.

+ +

L'ultimo passo è la modifica del makefile della directory sorgente dove si ha inserito il proprio file JavaScript di modo che venga copiato nel luogo appropriato all'interno dell'estensione:

+ +
libs::
+	$(INSTALL) $(srcdir)/*.js $(FINAL_TARGET)/components
+
+ +

Ora è possibile istanziare il componente ed usare la proprietà locationFile per ottenere una interfaccia nsIFile che punti alla home directory dell'estensione.

+ +

Usare librerie di terze parti

+ +

Per estensioni più sofosticate, si potrebbe voler integrare librerie di terze parti che forniscono funzionalità specializzare per la connettività al database, processing di immagini, rete e simili. Se si vuole che la propria estensione funzioni su tutte le piattaforme Firefox, è necessario avere il codice sorgente della libreria in questione, quindi assumo che questo sia disponibile.

+ +

l'approccio migliore nell'ottica del ciclo di sviluppo è creare un makefile come quello di Mozilla per la libreria. Questa maniera funziona bene per librerie che hanno un processo di make lineare, senza necessità di configurazioni eccessive. Un buon esempio di questo è la libreria SQLite inclusa nell'albero di build di Mozilla in db/sqlite. Adattando il makefile in quetso modo, la libreria è creata come parte del processo standard di build di Mozilla, il che elimina eventuali altri passi di compilazione. Il difetto di questo procedimento è che il makefile va aggiornato ogni qualvolta viene rilasciata una nuova versione della libreria.

+ +

Per librerie che hanno un complesso procedimento di configurazione, usano un compilatore non standard o altre caratteristiche speciali. potrebbe non essere praticabile la creazione di un Makefile compatibile con Mozilla. In questo caso, raccomanderei di inserire l'intera distribuzione della libreria all'interno del progetto o del sottoprogetto che la usa. Per cui se la libreria acmelib viene usata all'interno del sottoprogetto multifarious/ visto nell'esempio sopra, dovrebbe essere inserita in una sottodirectory di quella del sottoprogetto (allo stesso livello di public/ e src/).

+ +

Ovviamente, questo significa che si dovrà compilare manualmente acmelib su tutte le piattaforme prima di lanciare il build di Mozilla. Ma alla fine ci si potrà riferire ai file include ed importare le librerie dal proprio componente usando percorsi dei path relativi.

+ +

Build per più piattaforme

+ +

TODO

+ +
+

Informazioni riguardo il documento originale

+ + +
diff --git a/files/it/creare_patch/index.html b/files/it/creare_patch/index.html new file mode 100644 index 0000000000..3498767037 --- /dev/null +++ b/files/it/creare_patch/index.html @@ -0,0 +1,37 @@ +--- +title: Creare patch +slug: Creare_patch +translation_of: Mercurial/Using_Mercurial +--- +

Dopo aver avuto accesso al codice, dopo aver apportato ad esso delle modifiche, una volta costruito e testato, può darsi che si desideri che queste modifiche vengano riviste e accettate. Per far ciò, occorre creare una lista dei file che sono stati modificati, che chiameremo + + patch + o + + diff file + .

+

Creare il diff di un singolo file == Per creare il diff di un singolo file locale rispetto al file attualmente nel repository, si utilizzi:

+
$ cvs diff -u8p Winning eleven 11 by Tony Montana
+
+

Questo comando crea un diff nel cosiddetto formato 'unificato' (opzione <tt>-u</tt>), con 8 righe di contesto. Il diff è inviato per default allo stdout. Per ridirigere l'output su un file, si utilizzi qualcosa come:

+
$ cvs diff -u8p Winning eleven 11 by Tony Montana >
+
+

Creare un diff su più file

+

Se, invece di utilizzare un normale file per NOMEFILE, si fornisce una directory, questa directory e tutte le sue sottodirectory verranno lette in modo ricorsivo. Per esempio

+
$ cvs diff -u8p . > FILE_DI_OUTPUT
+
+

compara tutti i file nella directory corrente e nelle sue subdirectory con tutte le versioni nel repository, e scrive le differenze combinate in un file chiamato FILE_DI_OUTPUT, utilizzando 8 righe di contesto.

+

Vi dovrebbe essere sufficiente contesto nella patch perchè venga compreso senza aprire il file sorgente. Le linee guida di default utilizzano 8 righe di contesto; se non sono sufficienti, verrà richiesto di rendere la patch comprensibile, si rimpiazzi 8 con un numero più elevato. Inoltre si noti che più contesto si include, più probabilità vi sono che il file venga incluso, se esso differisce pesantemente dal sorgente originale.

+

Includere i nuovi file in una patch

+

Per includere i nuovi file in una patch, si utilizzi l'opzione <tt>-N</tt>:

+
$ cvs diff -u8pN . > FILE_DI_OUTPUT
+
+

Un problema comune è che + + cvs diff' + non include i nuovi file su cui non è stato eseguito un cvs add, e questo comando richiede accesso al repository.

+

La soluzione è utilizzare la utility cvsdo (), che modifica <tt>CVS/Entries</tt> per far credere al cvs che il file sia stato aggiunto al repository:

+
$ cvsdo add NUOVOFILE
+$ cvs diff -u8pN NEWFILE > FILE_DI_OUTPUT
+
+

Si noti che questo trucco non funziona per le nuove directory; per queste, cvs add deve realmente modificare il repository immediatamente, il chè richiede un accesso in scrittura.

diff --git a/files/it/creare_plugin_mozsearch/index.html b/files/it/creare_plugin_mozsearch/index.html new file mode 100644 index 0000000000..fb3236733b --- /dev/null +++ b/files/it/creare_plugin_mozsearch/index.html @@ -0,0 +1,190 @@ +--- +title: Creare Plugin MozSearch +slug: Creare_Plugin_MozSearch +tags: + - Plugin_di_ricerca +translation_of: Mozilla/Creating_MozSearch_plugins +--- +

Firefox 2 supporta MozSearch, una versione semplificata del formato OpenSearch di A9 per creare i plugin di ricerca. Anche i plugin OpenSearch sono supportati; vedi il sito di OpenSearch per ulteriori dettagli.

+ +

Un plugin MozSearch è un file XML che descrive il motore di ricerca, il suo URL e i parametri che occorre passare a questo URL.

+ +
Nota: MozSearch è un formato specifico di Firefox; se si desidera scrivere un plugin che sia compatibile con altri browser, occorre utilizzare il sistema OpenSearch. Fortunatamente i due formati sono molto simili ed è facile passare da uno all'altro a seconda delle proprie necessità.
+ +

Il file di plugin

+ +

Il file XMl che descrive un motore di ricerca è abbastanza semplice e segue il template basilare sotto riportato. Le sezioni in corsivo devono essere personalizzate basandosi sui bisogni dello specifico plugin di ricerca che si sta scrivendo.

+ +
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
+<ShortName>nomeMotore</ShortName>
+<Description>descrizioneMotore</Description>
+<InputEncoding>codificaInput</InputEncoding>
+<Image width="16" height="16">data:image/x-icon;base64,immagine</image>
+<Url type="text/html" method="metodo" template="URLdiRicerca">
+  <Param name="nomeParametro1" value="valoreParametro1"/>
+  ...
+  <Param name="nomeParametroN" value="valoreParametroN"/>
+</Url>
+<Url type="application/x-suggestions+json" template="suggerimentoURL"/>
+<SearchForm>cercaDaURL</SearchForm>
+</SearchPlugin>
+
+ +
+
nomeMotore
+
Un nome in breve per il motore di ricerca.
+
+ +
+
descrizioneMotore
+
Una breve descrizione del motore di ricerca.
+
+ +
+
codificaInput
+
La codifica utilizzata per i dati in input.
+
+ +
+
immagine
+
Un'icona a 64 bit di 16x16 pixel che rappresenta il logo del motore di ricerca. Un tool utile per costruire i dati da immettere qui si trova al seguente URL: The data: URI kitchen.
+
+ +
+
URLdiRicerca
+
Descrive l'URL o gli URL da usare per la ricerca. L'attributo metodo indica se si debba utilizzare il metodo di ricerca GET o POST. L'attributo template indica l'URL di base per l'interrogazione del motore di ricerca.
+
+ +
+
E' possibile specificare due tipi di URL:
+
+ + + +
+
Per entrambi i tipi di URL è possibile utilizzare {searchTerms} per sostituire i termini di ricerca inseriti dall'utente nella barra di ricerca.
+
+ +
+
Per i suggerimenti sulla ricerca, l'URL del template specificato viene utilizzato per recuperare una lista di suggerimenti nel formato JavaScript Object Notation (JSON). Per ulteriori dettagli su come implementare il supporto ai suggerimenti di ricerca su un server, si veda Supportare i suggerimenti nei plugin di ricerca.
+
+ +

Image:SearchSuggestionSample.png

+ +
+
Parametri
+
I parametri che occorre passare insieme all'interrogazione, come coppie chiave/valore. Quando si specifica i valori, è possibile utilizzare {searchTerms} per inserire i termini di ricerca inseriti dall'utente nella barra di ricerca.
+
+ +
+
Form di ricerca
+
L'URL da richiedere per aprire la pagina di ricerca nel sito per il quale il plugin di ricerca è stato progettato. Questo fornisce un modo per Firefox per permettere all'utente di visitare il direttamente il sito.
+
+ +

Ricerca automatica dei plugin

+ +

Un sito web che offre un plugin di ricerca può pubblicizzarlo in modo che gli utenti di Firefox possano facilmente scaricarlo e installarlo.

+ +

Per supportare la ricerca automatica dei plugin, occorre semplicemente aggiungere una linea alla sezione <HEAD> della pagina web:

+ +
<link rel="search" type="application/opensearchdescription+xml" title="nomeRicerca" href="urlPlugin">
+
+ +

Gli elementi da sostituire sono spiegati di seguito:

+ +
+
nomeRicerca
+
Il nome della ricerca, come "Cerca in MDC" o "Cerca in Yahoo!".
+
+ +
+
urlPlugin
+
L'URL del plugin di ricerca in XML, dal quale il browser può scaricarlo.
+
+ +

Se il sito offre più plugin di ricerca, è possibile supportare la ricerca automatica per tutti quanti. Un esempio:

+ +
<link rel="search" type="application/opensearchdescription+xml" title="MioSito: cerca per autore" href="http://www.miosito.com/per_autore.xml">
+<link rel="search" type="application/opensearchdescription+xml" title="Miosito: cerca per titolo" href="http://www.miosito.com/per_titolo.xml">
+
+ +

In questo modo, il sito può offrire entrambi i plugin di ricerca (ricerca per titolo e ricerca per autore) come entità separate.

+ +

Esempio: cercare in Yahoo!

+ +

Il seguente XML è il plugin di ricerca per Firefox 2 per le ricerche attraverso Yahoo!:

+ +
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
+<ShortName>Yahoo</ShortName>
+<Description>Cerca in Yahoo</Description>
+<InputEncoding>UTF-8</InputEncoding>
+<SuggestionUrl>http://ff.search.yahoo.com/gossip?output=fxjson&command=</SuggestionUrl>
+<Image width="16" height="16">data:image/x-icon;base64,R0lGODlhEAAQAJECAP8AAAAAAP///wAAACH5BAEAAAIALAAAAAAQABAAAAIplI+py+0NogQuyBDEnEd2kHkfFWUamEzmpZSfmaIHPHrRguUm/fT+UwAAOw==</Image>
+<Url type="text/html" method="GET" template="http://search.yahoo.com/search">
+  <Param name="p" value="{searchTerms}"/>
+  <Param name="ei" value="UTF-8"/>
+  <Param name="fr" value="moz2"/>
+</Url>
+<SearchForm>http://search.yahoo.com/</SearchForm>
+</SearchPlugin>
+
+ +

Diciamo che l'utente sceglie di utilizzare Yahoo! come motore di ricerca: inserisce "mozilla" nella barra di ricerca e preme il tasto invio. Firefox utilizzerà la descrizione qui sopra per costruire il seguente URL:

+ +

http://search.yahoo.com/search?p=mozilla&ei=UTF-8&fr=moz2

+ +

Se l'utente clicca sull'icona nella barra di ricerca, o sceglie l'opzione "Cerca sul web" nel menu Strumenti quando la barra non è visibile, il browser lo porterà a http://search.yahoo.com/, il valore dell'elemento <SearchForm>.

+ +

Esempio: cercare in MDC

+ +

Questo plugin permette di cercare facilmente dei termini nel sito Mozilla Developer Center.

+ +
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
+<ShortName>MDC</ShortName>
+<Description>Cerca in Mozilla Developer Center</Description>
+<InputEncoding>UTF-8</InputEncoding>
+<Image width="16" height="16">data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAAK%2FINwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz%2F%2Fz8DJQAggJiQOe%2Ffv2fv7Oz8rays%2FN%2BVkfG%2FiYnJfyD%2F1%2BrVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw%2F8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi%2FG%2BQKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo%2BMXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia%2BCuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq%2FvLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg%2FkdypqCg4H8lUIACnQ%2FSOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD%2BaDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg%3D%3D</Image>
+<Url type="text/html" method="GET" template="http://developer.mozilla.org/en/docs/Special:Search?search={searchTerms}"/>
+<SearchForm>http://developer.mozilla.org/en/docs/Special:Search</SearchForm>
+</SearchPlugin>
+
+ +

Si noti in questo caso che invece di utilizzare <Param> per definire i parametri del motore di ricerca, sono stati semplicemente incorporati dentro il modello di URL. Questo in effetti è il metodo preferibile quando si utilizza il metodo GET. <Param> dovrebbe essere utilizzato per il metodo POST.

+ +

Suggerimenti per la risoluzione dei problemi

+ +

Se c'è un errore nell'XML del plugin di ricerca, si dovrebbero incontrare degli errori mentre il plugin viene aggiunto in Firefox (Bon Echo) Alpha 3. Il messaggio d'errore però potrebbe non essere molto d'aiuto, perciò i seguenti suggerimenti potrebbero aiutare a risolvere il problema.

+ + + +

Inoltre, servizio di plugin di ricerca fornisce un meccanismo di log che potrebbe tornare utile agli sviluppatori di plugin. Si utilizziabout:config per impostare la preferenza 'browser.search.log' a true. Quando si aggiunge un plugin di ricerca, appariranno le informazioni loggate nella Console degli errori (Tools->Error Console).

+ +

OpenSearch

+ +

Firefox 2 supporta anche il formato OpenSearch di Amazon A9 per condividere i risultari delle ricerche. Se si scrive un plugin XML utilizzando le specifiche che si trovano in OpenSearch description syntax, può successivamente essere inserito nella directory searchengines.

+ +

Il formato OpenSearch Description è simile al formato Mozilla SearchPlugin. Le differenze principali sono l'elemento radice e il namespace XML:

+ +
<xml version="1.0"  encoding="UTF-8"?>
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
+...
+</OpenSearchDescription>
+
+ +

Materiale di riferimento

+ + + +

{{ languages( { "ca": "ca/Creaci\u00f3_de_connectors_MozSearch", "ja": "ja/Creating_MozSearch_plugins", "en": "en/Creating_MozSearch_plugins" } ) }}

diff --git a/files/it/creare_un_installer_per_windows_di_seamonkey/index.html b/files/it/creare_un_installer_per_windows_di_seamonkey/index.html new file mode 100644 index 0000000000..b1fc6c62bc --- /dev/null +++ b/files/it/creare_un_installer_per_windows_di_seamonkey/index.html @@ -0,0 +1,171 @@ +--- +title: Creare un installer per Windows di SeaMonkey +slug: Creare_un_installer_per_Windows_di_SeaMonkey +tags: + - Localizzazione +translation_of: Mozilla/Creating_a_localized_Windows_installer_of_SeaMonkey +--- +

Gli attrezzi del mestiere

+ +

Premessa: non tutti i programmi elencati sotto sono strettamente necessari. Alcuni semplicemente sono quelli che io uso perché mi ci trovo bene, mentre altri sono script che ho creato per velocizzare il lavoro. Potete in ogni caso scegliere il programma che vi piace di più per svolgere certe operazioni, come potete non sfruttare gli script e scrivere ogni volta i comandi a mano. La scelta è vostra!

+ + + +

Per comodità, posizionate il file mozip.exe presente nel "Pacchetto" nella cartella di Windows, in modo da poterlo usare attraverso il prompt dei comandi senza dover inserire ogni volta il suo percorso.

+ +

Prima di iniziare, un piccolo elenco di convenzioni usate nella guida:

+ + + +

Primi passi

+ +

Per iniziare, bisogna creare le cartelle che dovranno ospitare i file. Personalmente (e questa scelta si ripercuote sui file batch) creo la cartella C:\sm che dovrà contenere tre cartelle: \{{ mediawiki.external('nv') }}eng che conterrà i file in inglese della versione da tradurre; \{{ mediawiki.external('nv') }}ita che conterrà i file in italiano dell'ultima versione disponibile e \{{ mediawiki.external('nv') }} che conterrà i file in italiano della versione di cui vogliamo creare l'installer. Per creare quest'ultima cartella, inizialmente, bisognerà copiare la cartella con i file in inglese e rinominarla.

+ +

Per riempire la cartella in inglese con i file necessari, bisogna mettere l'installer in inglese nella cartella {{ mediawiki.external('nv') }}eng, aprire una console e digitare:

+ +
mozip -x [nv]eng\seamonkey-[nv].en-US.win32.installer.exe
+ +

Una volta estratti i file, è possibile cancellare l'installer.
+ Per scompattare l'installer italiano, è sufficiente mettere il file nella relativa cartella, fare clic col tasto destro e dalle opzioni di 7-zip selezionare Estrai qui.

+ +

Tradurre i file di testo

+ +

Iniziamo col tradurre i due file di testo presenti tra i file estratti: install.ini e config.ini

+ +

Il primo è la traduzione dell'interfaccia dell'installer e quindi, dato che per ora questo resta uguale nel tempo, al 99.99% non dovrete fare altro che copiare il vecchio file in italiano. Ad ogni modo, per andare sul sicuro, controllate che almeno il numero di righe corrisponda.

+ +

Il secondo file invece contiene la configurazione dell'installer per quella particolare versione di SeaMonkey, ed è un po' più delicato da tradurre. Aprite WinMerge e mettete a confronto il vecchio file in italiano e il nuovo file in inglese: il programma evidenzierà automaticamente tutte le righe diverse.
+ Non tutte le stringhe però andranno tradotte: dovrete concentrarvi solamente su quelle che riportano nella riga precedente la scritta "localize me". Noterete che alcune stringhe non sono state tradotte, nonostante sopra venga riportata la dicitura per localizzarle: non è una dimenticanza, ma se si traducono quelle stringhe l'installer non funzionerà. Oltre a queste, dovrete cambiare tutti i riferimenti di en-US e US rispettivamente in it-IT e IT; sicuramente saprete riconoscerli quando li vedrete. WinMerge vi viene in aiuto in questo compito: basta selezionare il testo in italiano in una delle semi-finestre ed incollarlo nell'altra, al posto del testo inglese.

+ +

ATTENZIONE: alla riga 191, che fa parte di quelle da tradurre, c'è l'indicazione del numero di versione esatto della build che state costruendo. Fate attenzione, nel copia-incolla, a non sovrascrivere il numero.

+ +

Dopo aver modificato correttamente i file di testo, possiamo passare ai vari componenti del programma, rappresentati dai vari file xpi. Per il lavoro che dobbiamo fare, questi file possono essere uniti in piccoli gruppi e per ogni gruppo andrà effettuata una serie di operazioni uguali per tutti. Perciò, invece di trattare ogni pacchetto singolarmente, descriverò le azioni da compiere per ogni gruppo.

+ +

Il file langenus.xpi

+ +

Prima di tutto bisogna scompattare il file: nel menu contestuale tra le opzioni di 7-zip selezionate Estrai in "{{ mediawiki.external('path') }}", che creerà una cartella di nome langenus.

+ +

Modificate l'install.js nella sezione indicata "Localize me" ed inserite i codici italiani it-IT dove richiesto. Potete utilizzare il file della vecchia versione italiana e WinMerge per vedere rapidamente cosa modificare.

+ +

Scorrere il file fino in fondo, dove vengono registrati i locale chrome del langpack: tipicamente nelle versioni in inglese i locale chrome di Inspector, della guida e di quant'altro l'installer contenga di opzionale, sono contenuti nei relativi pacchetti. Le traduzioni italiane invece sono contenute tutte nel jar principale, quindi dovremo aggiungere le registrazioni necessarie qui. Anche in questo caso, quasi sicuramente sarà sufficiente copiare le stringhe in più dal vecchio file italiano in quello nuovo ancora in inglese con WinMerge.
+ Completate quindi con la sostituzione dei file jar contenuti nella cartella bin/chrome (in questo caso i file en-*.jar vanno sostituiti con i gli equivalenti it-*.jar).

+ +

Al termine di tutto riportatevi nella cartella contenente l'install.js e selezionate detto file assieme alla cartella bin, quindi dal menu contestuale selezionate "Aggiungi all'archivio..." e nella finestra che vi appare selezionate Zip come formato dell'archivio e Nessuna come livello di compressione. Se volete velocizzare il lavoro, nel campo archivio inserite "../langitit.xpi" che provvederà a creare il file xpi in italiano direttamente nella cartella principale, altrimenti dovrete spostare il nuovo file a mano in \{{ mediawiki.external('nv') }}.

+ +
+

ATTENZIONE: quando si creano gli xpi e i jar contenuti nell'installer, il livello di compressione va assolutamente impostato su Nessuna, per due motivi:

+ +
    +
  1. per non rallentare l'esecuzione dell'installer prima, e l'avvio dell'applicazione installata dopo.
    2. +
  2. perché le dimensioni dell'installer saranno molto più ridotte se non sono stati compressi.
    3. +
+
+ +

Una volta fatto tutto, cancellate il file langenus.xpi e la relativa cartella dalla cartella principale.

+ +

Il file regus.xpi

+ +

Anche in questo caso, come in tutti quelli successivi, create la cartella relativa. Successivamente, modificate il file install.js nelle stringhe che si trovano sotto LOCALIZATION NOTE; anche in questo caso WinMerge vi sarà d'aiuto. Nella cartella bin/chrome sostituite US.jar con IT.jar preso dal langpack italiano. Aggiungete i searchplugins del langpack italiano in bin/searchplugins e sostituite i file in bin/defaults con gli equivalenti presi sempre dal langpack, rinominando la cartella US in IT. Tornate nella cartella che contiene bin ed install.js e create il file xpi chiamandolo regit.xpi. Ricordatevi poi di cancellare il file regus.xpi e la sua cartella.

+ +

Il file deflenus.xpi

+ +

Modificate il file install.js nelle stringhe che si trovano sotto LOCALIZATION NOTE e sostituite i file in bin/defaults con gli equivalenti presi dal langpack italiano. Tornate nella cartella padre che contiene bin ed install.js e create l'archivio xpi chiamandolo deflitit.xpi. Ancora, ricordatevi di cancellare il file deflenus e la cartella relativa.

+ +

Il primo gruppo di file

+ +

La procedura che spiegherò ora si applica ai file venkman, chatzilla, inspector, sroaming, reporter.

+ +

Come già detto in precedenza, mentre nel langpack inglese la traduzione dei componenti opzionali si trova nei pacchetti dei programmi stessi, nel caso della lingua italiana tutte le traduzioni si trovano nel jar principale. L'operazione da compiere ora è quindi quella di eliminare le traduzioni dai singoli pacchetti.

+ +

Nel file install.js dovete eliminare la registrazione del locale. Per fare questo basta commentare la riga relativa (aggiungendo // all'inizio) oppure cancellarla. Per esempio, nel pacchetto venkman:

+ +
// registerChrome(LOCALE | DELAYED_CHROME, getFolder("Chrome","venkman.jar"), "locale/en-US/venkman/");
+ +

Nella cartella bin/chrome invece bisogna aprire il file jar con 7-zip ed eliminare la cartella locale. Una volta fatto questo dovrete ricreare lo xpi.

+ +

ATTENZIONE: mentre prima si cambiavano i nomi ai file, ora il nome del file xpi prima e dopo le operazioni resta lo stesso. Quando perciò avete creato lo xpi e tornate nella cartella principale, ricordatevi di cancellare solamente la cartella relativa al file e non anche il file xpi stesso, altrimenti cancellerete il vostro lavoro. Questo ovviamente vale solamente se in 7-zip avete sfruttato il trucchetto di digitare "../pacchetto.xpi" come nome del file, e resta valido di qui fino alla fine.

+ +

Il secondo gruppo di file

+ +

La procedura che spiegherò ora si applica ai file browser, mail, xpcom, spellcheck, talkback e al file zip seamonkeyuninstall.

+ +

Questi file non vengono toccati dalla traduzione, perciò non c'è da modificare niente. Tuttavia, per diminuire le dimensioni finali dell'installer, andranno scompattati e poi risalvati, questa volta però senza compressione. Vi dovrete perciò limitare a scompattare il pacchetto in una cartella, selezionare tutti i file presenti, e ricreare il file xpi (o zip a seconda dei casi) senza compressione.

+ +

Il file gre-win32-installer.zip

+ +

Questo pacchetto contiene l'installer di GRE (Gecko Runtime Environment) e si comporta proprio come un installer a sé stante. Dopo aver creato la cartella di questo pacchetto, quindi, dovrete di nuovo lanciare il comando "mozip -x" per estrarne i file contenuti, dopodiché potete anche cancellare l'installer. A partire da SeaMonkey 1.0.2 l'installer italiano viene creato con la procedura descritta sotto, perciò per scompattare quello italiano per il confronto tra i file basterà usare il menu contestuale e selezionare l'opzione di estrazione di 7-zip.

+ +

Come per l'installer di SeaMonkey, dovete tradurre i due file install.ini e config.ini, per i quali valgono le stesse considerazioni dette all'inizio di questa guida. Allo stesso modo, dovrete scompattare tutti i file zip e xpi e ricompattarli senza compressione.

+ +

A questo punto, dobbiamo creare l'installer di GRE. Se volete fare in fretta e non darvi troppa pena vi basterà usare lo script grebuild.bat che ho creato, una volta modificati i percorsi delle cartelle per adattarli al vostro caso (i file bat si aprono con un semplice editor di testi). Ci sono solo pochi passaggi da fare a mano: copiare nella cartella i file app.tag e 7zSD.sfx, poi aprire il primo con un editor di testi e nel campo "Title" inserire "GRE".

+ +

Se invece siete masochisti e volete fare tutto a mano, qui di seguito spiego i passaggi da effettuare: per creare l'installer dovete prima di tutto riunire tutti i suoi file in un unico archivio. Aprite quindi una console, spostatevi nella cartella che contiene i file dell'installer di GRE e digitate:

+ +
[path]\7z a app.7z -t7z *.* -mx0
+ +

In questo modo si creerà il file app.7z che contiene tutti i file che erano presenti nella cartella, e che ora potete eliminare. A questo punto copiate nella cartella anche i file app.tag e 7zSD.sfx; editate il file app.tag come già descritto sopra, poi lanciate questo comando:

+ +
copy /b 7zSD.sfx+app.tag+app.7z gre-win32-installer.exe
+ +

Ora che avete creato nuovamente l'installer, cancellate tutti gli altri file presenti.

+ +

Qualunque strada abbiate scelto, a questo punto dovreste avere nella cartella solamente il file che contiene l'installer. Ora non vi resta che rimetterlo nel suo file zip come per tutti gli altri pacchetti e poi proseguire.

+ +

E ora, creiamo l'installer!

+ +

Una volta finito di impacchettare l'installer di GRE, abbiamo finito i file da modificare, e possiamo passare alla creazione dell'installer di SeaMonkey.
+ Anche in questo caso, potete decidere se usare il mio script o se eseguire tutto a mano. In entrambi i casi, la prima (e ultima per chi usa lo script) cosa da fare è mettere nella cartella C:\sm i file app.tag e 7zSD.sfx e modificare il primo inserendo nel campo Title la stringa "SeaMonkey {{ mediawiki.external('nv') }}".
+ A questo punto potete lanciare lo script smbuild e aspettare che venga creato l'installer (sempre dopo aver modificato i nomi delle cartelle), oppure aprire una console e digitare, dopo esservi spostati nella cartella \{{ mediawiki.external('nv') }}, il seguente comando:

+ +
[path]\7z a -t7z ..\app.7z *.* -mx -m0=BCJ2 -m1=LZMA:d24 -m2=LZMA:d19 -m3=LZMA:d19 -mb0:1 -mb0s1:2 -mb0s2:3
+ +

Una volta terminata la compressione, risalire nella cartella superiore e digitare:

+ +
copy /b 7zSD.sfx+app.tag+app.7z mozilla-[nv].it-IT.win32.installer.exe
+ +

et voilà, il vostro installer è pronto!

+ +

Tips, tricks & script

+ +

In questo paragrafo spiegherò le funzioni di tutti gli script che non ho citato finora, e tenterò di dare qualche consiglio dettato dall'esperienza.

+ + + +

Automatizzare le operazioni

+ +

La guida spiega tutti i passaggi da eseguire per creare un installer in italiano di SeaMonkey. Sebbene l'esecuzione di questi passaggi renda consapevoli di ciò che si sta facendo, lo svolgimento delle operazioni richede molto tempo.

+ +

Una volta capiti i passaggi necessari, è possibile utilizzare degli script per velocizzare il processo di creazione dell'installer. Gli script necessari possono essere scaricati dalla lista del materiale all'inizio di questa pagina. Per farli funzionare, basta configurare correttamente il file config.bat (maggiori informazioni sono contenute all'interno del pacchetto).
+ Gli script si basano su questa guida, e assumono che la cartella dove si lavora sia C:\sm e che la sotto-cartella degli script sia \tools.

+ +

Una volta lanciato, lo script si fermerà solamente per permettere all'utente di tradurre i file .ini e .js necessari, aprendoli con WinMerge. Per questi file, valgono le stesse considerazioni fatte sopra: alcuni vanno semplicemente copiati, per altri bisogna fare attenzione.

+ +

Ringraziamenti

+ +

Michele Dal Corso: per aver scritto la prima versione testuale della guida.

+ +

Giacomo Magnini: per aver scritto la prima guida per Mozilla Suite e per avermi aiutato a risolvere tutti i problemi che ho incontrato inizialmente durante la costruzione degli installer. Ah! Ovviamente anche per aver spulciato questa seconda guida alla ricerca di errori.

+ +

Francesco Lodolo: per aver controllato la prima guida di Giacomo, e di conseguenza indirettamente anche questa.

+ +

Fabio Baroni: per aver effettuato il controllo finale della guida di Francesco Lodolo.

+ +

Domenico Zanella: per aver creato gli script per l'automazione del processo di creazione dell'installer.

diff --git a/files/it/creare_un_microsommario/index.html b/files/it/creare_un_microsommario/index.html new file mode 100644 index 0000000000..4d4e37cc46 --- /dev/null +++ b/files/it/creare_un_microsommario/index.html @@ -0,0 +1,209 @@ +--- +title: Creare un Microsommario +slug: Creare_un_Microsommario +translation_of: Archive/Mozilla/Creating_a_microsummary +--- +

+ Un generatore di microsommari è un insieme di istruzioni per creare un microsommario a partire dal contenuto di un documento. Le pagine possono essere collegate ai generatori tramite <link rel="microsummary">, che va inserito nell'elemento <head>. I generatori possono anche essere scaricati in maniera indipendente e installati dagli utenti, se questi scrivono una lista di pagine alla quale i generatori devono essere associati.

+

+ In questo articolo creeremo un generatore di microsommario per la home page di SpreadFirefox che mostra il numero di download del browser con l'etichetta Fx downloads; per esempio: 174475447 Fx downloads.

+

+ Costruiremo poi il foglio stile XSLT che converte la pagina in un microsommario e impareremo a specificare che il generatore si applica proprio a quella pagina; infine impareremo a preparare il generatore per il download e l'installazione.

+

+ In ogni passo della creazione del foglio stile, ciò che viene aggiunto rispetto all'esempio precedente è in grassetto per facilitarne l'identificazione.

+

+ Iniziare

+

+ I generatori si presentano come documenti XML, la cui radice è l'elemento <generator> e il namespace è http://www.mozilla.org/microsummaries/0.1. Per iniziare a costruire il generatore, creiamo un nuovo file di testo vuoto, poi inseriamo la dichiarazione XML e l'elemento radice:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1">
+</generator>
+
+

+ Il nome

+

+ Ogni generatore dovrebbe essere dotato di attributi name, che forniscono descrizioni arbitrarie dei microsommari. I nomi dovrebbero essere abbastanza descrittivi da dare all'utente un'idea di quali informazioni vengono fornite dal microsommario. Siccome il nostro generatore creerà dei microsommari che mostrano il conteggio dei download di Firefox, lo chiameremo "Download di Firefox":

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Download di Firefox">
+</generator>
+
+

+ Creare un foglio stile XSLT

+

+ I generatori devono includere un foglio stile XSLT (o trasformazione XSLT), che trasforma il contenuto della pagina in un microsommario. XSLT è un potente linguaggio per trasformare i documenti in rappresentazioni diverse delle stesse informazioni.

+

+ Aggiungiamo quindi il foglio stile includendolo in un elemento <template>:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Download di Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+    </transform>
+  </template>
+</generator>
+
+

+ Si noti che, mentre i generatori di microsommari includono del codice XSLT arbitrario, compreso codice che produca un output formattato, Firefox attualmente visualizza soltanto una versione di puro testo dell'output XSLT.

+

+ Specificare il tipo di output

+

+ Siccome il foglio stile genera un sommario testuale, dovremmo indicarlo nell'elemento <output>:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Download di Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+    </transform>
+  </template>
+</generator>
+
+

+ Utilizzare un semplice <template>

+

+ L'elaboratore XSLT trasforma i documenti comparando ogni elemento <template> presente nel foglio stile con un insieme di nodi del documento. Quando trova un attributo match, dell'elemento <template>, l'elaboratore esegue le trasformazioni specificate nel contenuto dell'elemento stesso.

+

+ Questo è un meccanismo potente, perchè permette di attraversare l'albero di un documento, generando ricorsivamente un output basato sui contenuti. Ma, per gli scopi di un microsommario per la pagina di Spread Firefox, necessitiamo di un solo <template> che corrisponde al nodo radice del documento e che viene processato una volta sola:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Download di Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+      </template>
+    </transform>
+  </template>
+</generator>
+
+

+ Inserire il conteggio dei download

+

+ Per inserire il conteggio dei download nell'output del foglio stile, occorre aggiungere un elemento <value-of> al template il cui attributo select contiene un'espressione XPath che punta al nodo che contiene il numero da visualizzare.

+

+ XPath è un linguaggio che serve a identificare i nodi nei documenti HTML o XML. Contiene anche alcuni funzioni basilari per la manipolazione dei nodi e del loro contenuto. Il modo più semplice per ottenere una espressione XPath che punti al nodo desiderato è utilizzare l'estensione XPath Checker.

+

+ Quindi installiamo l'estensione e riavviamo Firefox quando l'installazione è completa. Andiamo quindi alla home page di Spread Firefox, troviamo il conteggio dei download (un numero grande nella colonna di destra), clicchiamo col tasto detro del mouse su tale informazione e selezioniamo View XPath nel menù a comparsa.

+

+ XPath Checker aprirà una nuova finestra. La nuova finestra contiene un campo XPath che contiene l'espressione XPath desiderata, che punta al numero di download: id('download-count').

+

+ Aggiungiamo un elemento <value-of> dentro <template>, con un attributo select che contiene detta espressione XPath:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Download di Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+      </template>
+    </transform>
+  </template>
+</generator>
+
+

+ Inserire del testo

+

+ Per inserire l'etichetta Fx downloads nel microsommario, occorre aggiungere un elemento <text> in <template>, il cui contenuto sarà il testo che si desidera inserire.

+

+ Aggiungiamo quindi un elemento <text>, il cui contenuto è Fx downloads:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Download di Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+        <text> download</text>
+      </template>
+    </transform>
+  </template>
+</generator>
+
+

+ Si noti che lo spazio bianco tra i tag XSLT non viene incluso nell'output, diversamente da quanto accade in HTML, dove invece tutti gli spazi vengono riuniti in un singolo spazio, quindi facciamo attenzione a inserire uno spazio prima della frase "download" per separarla dal numero.

+

+ Con questo, abbiamo terminato di scrivere il foglio stile XSLT che converte la pagina principale di Spread Firefox in un microsommario.

+

+ Specificare a quale pagina di riferisce il generatore

+

+ Ora che abbiamo terminato il foglio stile, dobbiamo specificare a quale pagina si applica. Se fossimo i webmaster di Spread Firefox, sarebbe sufficiente inserire un riferimento al generatore nella pagina stessa aggiungendo un tag <link rel="microsummary"> nella sezione <head> del documento:

+
<head>
+  ...
+  <link rel="microsummary" href="path/to/our/generator.xml">
+</head>
+
+

+ Siccome però non siamo i webmaster di quel sito, possiamo specificare la pagina al quale si applica il generatore dentro al generatore stesso e poi renderlo disponibile per il download e l'installazione. Per specificare la pagina, utilizziamo un elemento <pages>, figlio di <generator>:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Download di Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+        <text> download</text>
+      </template>
+    </transform>
+  </template>
+  <pages>
+  </pages>
+</generator>
+
+

+ Tale elemento può contenere una sequenza di tag <include> e <exclude> che specificano, rispettivamente, a quali pagine il generatore si applica e non si applica.

+

+ Per far sì che il generatore si applichi a una pagina, si può aggiungere un elemento <include>, il cui contenuto è un'espressione regolare che corrisponde alla pagina (o alle pagine). Per far sì che il generatore invece ignori una pagina, è necessario inserire un elemento <exclude>, il cui contenuto è anch'esso un'espressione regolare.

+

+ Per default i generatori non si applicano ad alcuna pagina, quindi è possibile elencare esplicitamente a quali pagine si applica e non è necessario escludere altre pagine, a meno che non siano state precedentemente incluse.

+

+ Aggiungiamo un elemento <include> che corrisponda alla home page di Spread Firefox:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="Download di Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+        <text> download</text>
+      </template>
+    </transform>
+  </template>
+  <pages>
+    <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include>
+  </pages>
+</generator>
+
+

+ Rendere il generatore disponibile per il download

+

+ Ora che il nostro generatore si applica alla home page di Spread Firefox, l'unica cosa rimasta da fare è renderlo scaricabile. Per fare questo, dobbiamo caricarlo in rete e creare un link JavaScript in una qualche pagina che chiami il metodo di Firefox window.sidebar.addMicrosummaryGenerator() per scaricarlo e installarlo.

+

+ Per esempio, se carichiamo il generatore all'indirizzo http://people.mozilla.com/~myk/micro...-generator.xml e vogliamo che gli utenti possano installarlo da http://people.mozilla.com/~myk/micro...ial/index.html, possiamo aggiungere il seguente codice alla pagina index.html:

+
<a href="javascript:window.sidebar.addMicrosummaryGenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">Installa il microsommario della pagina principale di Spread Firefox!</a>
+
+

+ Cliccando sul link, si genera un errore JavaScript sui browser che non supportano i microsommari, pertanto si può migliorarlo controllando se i microsommari sono supportati. Potremmo farlo con il codice seguente:

+
<script>
+  const warning = "Spiacente, ma è necessario un browser che supporti i microsommari, come Firefox 2.0";
+  function addGenerator(url) {
+    if (typeof window.sidebar == "object" &&
+        typeof window.sidebar.addMicrosummaryGenerator == "function")
+      window.sidebar.addMicrosummaryGenerator(url);
+    else
+     alert(warning);
+  }
+</script>
+<a href="javascript:addGenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">Installa il microsommario della pagina principale di Spread Firefox!</a>
+
+

+  

+

+ Conclusione

+

+ Abbiamo creato un generatore di microsommari che, una volta installato, mostra il numero attuale di download di Firefox e seleziona il microsommario dal menu a discesa Summary nella finestra Add Bookmark.

+

+ Per ulteriori informazioni sui microsommari, si veda Microsummaries home page (EN).

diff --git a/files/it/dare_una_mano_al_puntatore/index.html b/files/it/dare_una_mano_al_puntatore/index.html new file mode 100644 index 0000000000..9b329f839f --- /dev/null +++ b/files/it/dare_una_mano_al_puntatore/index.html @@ -0,0 +1,40 @@ +--- +title: Dare una mano al puntatore +slug: Dare_una_mano_al_puntatore +tags: + - CSS + - Tutte_le_categorie +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +

Un buon numero di sviluppatori ha chiesto quando Mozilla e Netscape 6+ abbiano pianificato di implementare il supporto per la proprietà cursor. Spesso si stupiscono di scoprire che entrambi i browser già la supportano. Comunque, ciò che non dovrebbe sorprendere è che il supporto è basato sulle specifiche approvate dal W3C per i CSS2.

+

Il problema di base è questo: Internet Explorer 5.x per Windows riconosce il valore hand, che non appare mai nella sezione 18.1 dei CSS2– ne' in altra specifica. Il valore che più si avvicina al comportamento di hand è pointer, che le specifiche definiscono così: "Il cursore è un puntatore che indica un collegamento". Si noti che non viene mai detto niente riguardo l'apparizione di una manina, anche se è ormai pratica convenzionale dei browser.

+

Sfortunatamente, IE5.x/Win non riconosce il valore pointer. Entrambi IE6/Win and IE5.x/Mac riconoscono pointer e hand, fortunatamente. D'altra parte, Mozilla e Netscape 6+ seguono la specifica CSS2 e gestiscono pointer, ignorando il valore proprietario hand.

+

Se Mozilla/Netscape ignorano hand e IE5.x/Win ignora pointer, come deve comportarsi uno sviluppatore? E' necessario specificare entrambi.

+
a { cursor: pointer; cursor: hand; }
+

Si faccia attenzione a non invertire i due valori! Scrivendo i fogli di stile come mostrato sopra, NS6+ mostrerà il primo valore e ignorerà il secondo, così si ottiene il valore pointer. IE5.x/Win riconosce entrambi ed userà il secondo, cioè hand. Invertendo i due valori, Netscape 6+ continuerà a lavorare interpretare correttamente lo stile, mentre IE5.x/Win tenterà di usare il secondo, senza ottenere il risultato voluto.

+

Con questo semplice metodo, è possibile assicurarsi la presenza della "manina" in ogni caso.

+

Una avvertenza: seguendo l'approccio raccomandato, il foglio di stile non passerà una eventuale validazione, dato che contiene un valore non permesso per la proprietà cursor. Gli sviluppatori sono quindi avvisati di prendere in considerazione questo inconveniente rispetto al vantaggio che porta la soluzione, quindi decidere cosa è più importante e procedere di conseguenza.

+

Testare il supporto

+

Vi chiedete come si comporti il vostro browser con hand e pointer? Provate direttamente a spostare il puntatore sulla tabella di test sotto riportata!

+ + + + + + + + +
Questa cella ha lo stile cursor: pointer. Si dovrebbe ottenere un puntatore che cambia in una manina, su Mozilla e Netscape 6+, IE6/Win, and IE5.x/Mac, ma non in IE5.x/Win.Questa cella non ha uno stile cursor per cui il puntatore rimarrà quello standard.Questa cella ha uno stile cursor: hand. Si dovrebbe ottenere un puntatore che cambia in una manina, su IE5+/Win, ma non in Mozilla e Netscape 6+.
+

Collegamenti

+ +
+

Original Document Information

+ +
diff --git a/files/it/dhtml/index.html b/files/it/dhtml/index.html new file mode 100644 index 0000000000..fbc1dbcbe4 --- /dev/null +++ b/files/it/dhtml/index.html @@ -0,0 +1,56 @@ +--- +title: DHTML +slug: DHTML +tags: + - DHTML +translation_of: Glossary/DHTML +--- +

 

+
+ DHTML è un acronimo per "Dynamic HTML", ovvero HTML Dinamico. DHTML è un termine impiegato per riferirsi al codice posto dietro quelle pagine web con un certo livello di interattività ottenuta senza l'uso di plugin o tecnologie come Flash o Java. Comunemente, questo termine indica l'insieme di funzionalità a disposizione di uno sviluppatore web che fa uso di HTML, CSS, DOM (Document Object Model, il Modello ad Oggetti per i Documenti), e JavaScript.
+ + + + + + + +
+

Documentazione

+
+
+ Manuale di riferimento del DOM nei client web
+
+ Questo manuale di riferimento fornisce tutte le informazioni sugli oggetti comunemente usati in DHTML nei vari web client, allo scopo di fornire indicazioni su quali proprietà sono supportate nei vari browser.
+
+
+
+ Esempi di DHTML usando DOM e Stili
+
+ Dimostrazioni sul funzionamento del Modello ad Oggetti per i Documenti (DOM), esempi di codice funzionanti su qualsiasi browser, ed altre risorse per comprendere DOM e gli stili.
+
+
+
+ en:Working around the Firefox 1.0.3 DHTML regression (en)
+
+ Come aggirare le problematiche del DHTML presenti in Firefox 1.0.3. Si noti che gli argomenti coperti da questo articolo sono stati corretti in Firefox 1.0.4, e questo documento riguarda esclusivamente la versione 1.0.3 del browser.
+
+

Mostra tutto...

+ 		+

Comunità

+
    +
  • View Mozilla forums...
    • +
+

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

+

Tools

+ + +
+
+ AJAX, CSS, DOM, HTML, JavaScript
+
+
+

Categories

+

 

diff --git a/files/it/dom/index.html b/files/it/dom/index.html new file mode 100644 index 0000000000..9c8e8851b1 --- /dev/null +++ b/files/it/dom/index.html @@ -0,0 +1,83 @@ +--- +title: DOM +slug: DOM +translation_of: Glossary/DOM +--- +
+ Utilizzare il DOM Base Livello 1 del W3C
+ Introduzione al DOM di W3C.
+
+

Il Modello a Oggetti del Documento (DOM) è una API per documenti HTML e XML. Fornisce una rappresentazione strutturale del documento, permettendo la modifica del suo contenuto e la presentazione visuale utilizzando un linguaggio di script come JavaScript.

+
+
+
+

Documentazione sul DOM

+
+
+ Riferimento al DOM di Gecko
+
+ La guida di riferimento al Modello a Oggetti del Documento in Gecko.
+
+ A proposito del Modello a Oggetti del Documento
+
+ Una breve introduzione al DOM.
+
+ Il DOM e JavaScript
+
+ Cos'è il DOM? Cos'è JavaScript? Come usarli insieme nella pagina web? Questo documento risponde a queste ed altre domande.
+
+ Utilizzare le informazioni di stile dinamiche
+
+ Come ottenere informazioni e manipolare lo stile attraverso il DOM.
+
+ Riferimento agli eventi del DOM
+
+ Elenca tutti gli eventi del DOM e il loro significato.
+
+ History API: Manipolare la cronologia del browser
+
+ Illustra l'oggetto {{ domxref("window.history") }} introdotto dal DOM di HTML5, permettendo la modifica dinamica della cronologia del browser.
+
+ File API: Utilizzare i file dalle applicazioni web
+
+ Descrive la capacità introdotta da HTML5 di selezionare un file locale e leggere i dati da questo.
+
+ Utilizzare la Page Visibility API
+
+ Spiega come intercettare ed utilizzare le informazioni su una pagina web in primo piano o sullo sfondo.
+
+ Fullscreen API: Utilizzare la modalità a pieno schermo
+
+ Descrive come impostare un pagina che utilizza lo schermo intero, senza alcuna UI del browser intorno.
+
+ Determinare la dimensione degli elementi
+
+ Capire il modo giusto per determinare le dimensioni degli elementi, secondo le proprie necessità.
+
+ Modificare dinamicamente l'interfaccia utente basata su XUL
+
+ I principi della manipolazione della UI XUL con i metodi del DOM.
+
+

Vedi Tutto...

+
+
+

Ottenere aiuto dalla comunità

+

Hai bisogno di aiuto su una questione legata al DOM e non trovi la soluzione nella documentazione?

+
    +
  • Consulta la sezione del forum di Mozilla dedicata: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}
    • +
+

Strumenti che semplificano il lavoro con il DOM

+ +

Vedi Tutto...

+ + +
+
+

 

diff --git a/files/it/dom_inspector/index.html b/files/it/dom_inspector/index.html new file mode 100644 index 0000000000..d6566854ca --- /dev/null +++ b/files/it/dom_inspector/index.html @@ -0,0 +1,24 @@ +--- +title: DOM Inspector +slug: DOM_Inspector +tags: + - 'DOM:Strumenti' + - Estensioni + - 'Estensioni:Strumenti' + - Strumenti + - Sviluppo_Web + - 'Sviluppo_Web:Strumenti' + - 'Temi:Strumenti' + - Tutte_le_categorie + - XUL + - 'XUL:Strumenti' +translation_of: Tools/Add-ons/DOM_Inspector +--- +

+

Il DOM Inspector (conosciuto anche con l'acronimo DOMi) è un tool di Mozilla usato per ispezionare, visualizzare, modificare il Modello a Oggetti di un Documento (DOM - Document Object Model), normalmente una pagina web o una finestra XUL. +

Per ulteriore informazioni sul DOMi, visitare la pagina del DOM Inspector su MozillaZine. +

Per utilizzare DOMi con Thunderbird 2.0 o superiore, occorre installare Thunderbird con le seguenti opzioni: +

+
ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis
+{{ languages( { "en": "en/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "pl": "pl/Inspektor_DOM", "ko": "ko/DOM_Inspector" } ) }} diff --git a/files/it/domande_frequenti_sulle_estensioni/index.html b/files/it/domande_frequenti_sulle_estensioni/index.html new file mode 100644 index 0000000000..22b1b00dc4 --- /dev/null +++ b/files/it/domande_frequenti_sulle_estensioni/index.html @@ -0,0 +1,67 @@ +--- +title: Domande frequenti sulle Estensioni +slug: Domande_frequenti_sulle_Estensioni +tags: + - Estensioni + - Tutte_le_categorie +translation_of: Archive/Mozilla/Extension_Frequently_Asked_Questions +--- +

Questo è un breve insieme di risposte ai problemi più comuni che sorgono durante lo sviluppo delle estensioni. Le risposte sono scritte avendo in mente soprattutto Firefox, ma la molte, se non tutte, dovrebbero essere facilmente utilizzabili anche per SeaMonkey, Thunderbird o qualsiasi altra applicazione. +

Se sei in cerca di un posto dove venga insegnato come iniziare, prova la nostra guida, Sviluppare un'Estensione o il Tutorial di MozillaZine "Getting started"(EN). +

Accertati di aver impostato il tuo ambiente di sviluppo(EN). +

+

Effettuare il Debug

+

Dovresti aver organizzato l'ambiente di sviluppo(EN) prima di effettuare il debug alla tua estensione. +

Il debugger Javascript Venkman può essere utile nelle situazioni complesse, ricorda di disattivare l'opzione "Debug -> Escludi i file del browser" quando lavori sul codice dell'estensione. +

+

Come faccio a scoprire gli errori nel mio codice?

+

Dopo aver impostato la preferenza javascript.options.showInConsole a true, gli errori saranno riportati nella console JavaScript. Nota che, nonostante il nome, verranno riportati lì tutti i tipi di errore. +

+

Come faccio a visualizzare cosa sta facendo la mia estensione?

+

Puoi usare le funzioni alert() o dump() o nsIConsoleService. +

+

Perché il mio script non viene eseguito correttamente?

+

Se il tuo script non funziona come ti aspettavi, la prima cosa da fare è controllare la console Javascript (guarda sopra). +

Un errore comune è provare ad accedere al DOM di una finestra prima che questa sia completamente caricata. Questo accade se si mette il codice di inizializzazione al livello più alto dello script (cioè fuori da ogni funzione). La soluzione è utilizzare un evento load per ritardare il proprio codice finché la finestra non sia completamente caricata: +

+
function exampleBrowserStartup(event)
+{
+  // metti il tuo codice di startup qua
+}
+window.addEventListener("load", exampleBrowserStartup, false);
+
+

Non accede ad un documento di una pagina web

+

Per accedere al documento della pagina web corrente da un overlay di browser.xul, si deve utilizzare content.document, invece del semplice document che indica il documento della finestra stessa del browser. Guarda "Lavorare con le finestre nel codice chrome" per i dettagli. +

Inoltre, come opzione predefinita XPCNativeWrapper impedisce di accedere agli oggetti definiti da script nelle pagine web e di effettuare anche altre operazioni. +

+

Ricevo un errore di analisi XML, ma il file sembra corretto!

+

Una comune sorgente di errori di analisi (del testo rosso con una linea -------------^ sotto) è l'utilizzo di caratteri nello script, o l'attribuzione di un valore, che in XML hanno un particolare significato. Per esempio: +

+
<button oncommand="window.open('http://example.com/q?param1=value&param2=val2')"/>
+
+

o +

+
<script>function lesser(a,b) { return a < b ? a : b; }</script>
+
+

Il problema può essere risolto in uno dei seguenti modi: +

+
    +
  1. sostituire i caratteri con una rappresentazione che non confligga con XML (Es: "&" -> "&amp;", "<" -> "&lt;")
    2. +
  2. (nel caso sia un nodo di testo, come uno script) mettere dei tag CDATA intorno: +
    <script><![CDATA[
+   function lesser(a,b) {
+     return a < b ? a : b;
+   }
+ ]]></script>
    +
    3. +
  3. Inserire lo script in un file separato e includerlo usando: +
    <script type="application/x-javascript" src="our.js"/>
    +
+

Esempi di codice

+

Il modo più semplice per trovare quale codice sia necessario per fare qualcosa è cercare un'estensione (o una parte di Mozilla stesso) che esegua quell'azione e guardare il suo codice. (I file XPI e JAR usano il formato ZIP.) +

C'è anche della documentazione. Guarda la lista di articoli relativi alle estensioni su MDC e la pagina di esempi di codice su MozillaZine(EN). +

+

Dove posso ottenere più aiuto?

+

Per favore guarda Estensioni:Altre risorse e Estensioni:Comunità. +

Prima di chiedere aiuto, assicurati di aver impostato le preferenze di debug e controlla la console JavaScript per i messaggi correlati. Inoltre, non dimenticare di fare almeno una semplice ricerca prima di domandare. E leggi queste FAQ! +

{{ languages( { "de": "de/Erweiterungen_FAQ", "en": "en/Extension_Frequently_Asked_Questions", "es": "es/Preguntas_frecuentes_sobre_Extensiones", "fr": "fr/Foire_aux_questions_sur_les_extensions", "ja": "ja/Extension_Frequently_Asked_Questions", "pl": "pl/Cz\u0119sto_zadawane_pytania_dotycz\u0105ce_rozszerze\u0144" } ) }} diff --git a/files/it/e4x/index.html b/files/it/e4x/index.html new file mode 100644 index 0000000000..142b0bf375 --- /dev/null +++ b/files/it/e4x/index.html @@ -0,0 +1,24 @@ +--- +title: E4X +slug: E4X +tags: + - E4X +translation_of: Archive/Web/E4X +--- +

ECMAScript for XML (E4X) è un'estensione di JavaScript che aggiunge a quest'ultimo il supporto nativo a XML. Fornisce l'accesso al documento XML in una forma naturale per i programmatori ECMAScript. L'obiettivo è mettere a disposizione una sintassi alternativa e più semplice rispetto alle interfacce DOM per accedere ai documenti XML. +

E4X è standardizzato dalla ECMA International in ECMA-357 standard (attualmente è alla sua prima edizione, giugno 2004). +

E4X è implementato (almeno in parte in SpiderMonkey (il motore JavaScript di Gecko) e in Rhino. +

Nota: Nei browser basati su Gecko 1.8, come Firefox 1.5, E4X è già parzialmente abilitato per gli autori di pagine web. Per abilitarlo completamente, occorre impostare il tipo MIME nell'elemento <script> a "text/javascript;e4x=1" (con l'attributo type="text/javascript;e4x=1"). La differenza tra le due modalità è che senza il tipo MIME "e4x=1": +

+ +

Limiti e bug conosciuti

+ +

Risorse

+ +{{ languages( { "en": "en/E4X", "fr": "fr/E4X", "ja": "ja/E4X" } ) }} diff --git "a/files/it/estensioni/comunit\303\240/index.html" "b/files/it/estensioni/comunit\303\240/index.html" new file mode 100644 index 0000000000..755b6a74a4 --- /dev/null +++ "b/files/it/estensioni/comunit\303\240/index.html" @@ -0,0 +1,22 @@ +--- +title: Comunità +slug: Estensioni/Comunità +tags: + - Estensioni + - Tutte_le_categorie +translation_of: Extensions/Community +--- +

 

+

Liste di discussione, gruppi, forum e link a comunità relative allo sviluppo di estensioni possono essere aggiunte qua.

+ +

{{ languages( { "en": "en/Extensions/Community", "fr": "fr/Extensions/Communaut\u00e9", "ja": "ja/Extensions/Community", "pl": "pl/Rozszerzenia/Spo\u0142eczno\u015b\u0107" } ) }}

diff --git a/files/it/estensioni/index.html b/files/it/estensioni/index.html new file mode 100644 index 0000000000..c5c2381e32 --- /dev/null +++ b/files/it/estensioni/index.html @@ -0,0 +1,67 @@ +--- +title: Estensioni +slug: Estensioni +tags: + - Estensioni + - Tutte_le_categorie +translation_of: Mozilla/Add-ons +--- +

+

+
Sviluppare un'Estensione
+Una guida passo-passo su come sviluppare un'estensione per Firefox 1.5.
+
+Le Estensioni sono dei piccoli componenti aggiuntivi che apportano nuove funzionalità alle applicazioni di casa Mozilla come Firefox e Thunderbird. Possono aggiungere qualsiasi cosa, da un semplice bottone sulla barra degli strumenti ad una caratteristica completamente nuova. Permettono di personalizzare l'applicazione per soddisfare le esigenze personali di ogni singolo utente qualora necessario, ma anche di mantenere l'applicazione leggera e quindi facile da scaricare.
+ + + + +
+

Documentazione

+
Domande frequenti sulle Estensioni +
Domande e risposte frequenti circa lo sviluppo delle estensioni. +
+
Organizzare l'ambiente di sviluppo dell'Estensione +
Alcuni suggerimenti essenziali sull'organizzazione dell'ambiente per facilitare lo sviluppo di un'estensione. +
+
Impacchettare l'Estensione +
Come impacchettare la propria estensione di Firefox per il download e l'installazione. +
+
Creare Estensioni personalizzate per Firefox con il sistema di sviluppo di Mozilla +
Come organizzare l'ambiente di sviluppo per un'estensione che faccia uso di componenti binari. +
+
Adattare le applicazioni XUL a Firefox 1.5 +
Un elenco dei cambiamenti effettuati su Firefox 1.5 che possono interessare gli sviluppatori di applicazioni XUL. +
+
XPCNativeWrapper +
Limita l'accesso alle proprietà ed ai metodi degli oggetti che imballa, permettendo un accesso sicuro ai metodi dell'oggetto definiti dall'IDL. +
+

Guarda tutti... +

+		 +

Comunità

+
  • Gurda i forum su Mozilla... +
+

{{ DiscussionList("dev-extensions", "mozilla.dev.extensions") }} +

+ +

Tools

+ +

Guarda tutti... +

+ +
XUL, JavaScript, XPCOM, Temi, Plug-in, Sviluppare Mozilla +
+
+

Categories +

Interwiki Language Links +


+

{{ languages( { "en": "en/Extensions", "fr": "fr/Extensions", "es": "es/Extensiones", "pl": "pl/Rozszerzenia", "pt": "pt/Extens\u00f5es", "ja": "ja/Extensions" } ) }} diff --git a/files/it/firefox_1.5_per_sviluppatori/index.html b/files/it/firefox_1.5_per_sviluppatori/index.html new file mode 100644 index 0000000000..6c47af6552 --- /dev/null +++ b/files/it/firefox_1.5_per_sviluppatori/index.html @@ -0,0 +1,165 @@ +--- +title: Firefox 1.5 per Sviluppatori +slug: Firefox_1.5_per_Sviluppatori +tags: + - Da_unire + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Mozilla/Firefox/Releases/1.5 +--- +
{{FirefoxSidebar}}

Firefox 1.5

+ +

Firefox 1.5 è stato rilasciato ed è disponibile per il download. Basato sul motore Gecko 1.8, questa ultima versione del browser migliora il supporto agli standard e fornisce nuove possibilità per implementare applicazioni web di ultima generazione. Le funzionalità di Firefox 1.5 comprendono un supporto più esteso ai CSS livello 2 e 3, API per applicazioni grafiche vettoriali 2D tramite SVG 1.1 e l'elemento <canvas>, eventi XForms e XML, oltre a miglioramenti per DHTML, JavaScript e DOM.

+ +

Firefox 1.5 è disponibile per il download a questo indirizzo: http://www.mozilla.com/firefox/

+ +

Strumenti di sviluppo

+ +

Esistono diversi strumenti ed estensioni che possono essere d'aiuto agli sviluppatori per supportare Firefox 1.5.

+ + + +

Nota: alcune estensioni potrebbero non supportare ancora Firefox 1.5 e potrebbero essere automaticamente disabilitate.

+ +

Nota: non tutte le estensioni hanno una traduzione in italiano.

+ +

Panoramica

+ +

Alcune nuove funzionalità di Firefox 1.5.

+ +

Sviluppatori di siti e applicazioni web

+ +
+
Introduzione a SVG in HTML
+
impara a utilizzare JavaScript e i CSS per manipolare le immagini nello stesso modo in cui manipoleresti un normale documento XHTML. Vedi anche SVG in Firefox 1.5 per conoscere lo stato e i problemi conosciuti dell'implementazione di SVG in Firefox 1.5.
+
+ +
+
Disegnare grafici con le Canvas
+
come utilizzare il nuovo tag <canvas> per disegnare grafici e altri oggetti.
+
+ +
+
Le colonne CSS3
+
Il supporto per il testo multicolonna introdotto da CSS3.
+
+ +
+
Usare la cache di Firefox 1.5
+
Come bfcache velocizza la navigazione coi tasti Indietro e Avanti
+
+ +

Sviluppatori XUL e sviluppatori di estensioni

+ +
+
Creare un'estensione
+
Questo tutorial spiega tutti i passi necessari per creare una semplicissima estensione per Firefox. Si veda anche another tutorial on MozillaZine knowledge base (EN), che illustra le nuove funzionalità dell'Extension Manager nell'1.5 e spiega come creare una nuova estensione ancora più facile.
+
+ +
+
XPCNativeWrapper
+
XPCNativeWrapper è un modo per far sì che un oggetto sia accessibile in maniera sicura dal DOM. Si può utilizzare in tutte le versioni di Firefox, sebbene il suo comportamento sia leggermente cambiato in Firefox 1.5.
+
+ +
+
Sistema di Preferenze
+
Illustra i nuovi widget che permettono di creare finestre di opzioni in maniera molto semplice e utilizzando poco codice JavaScript.
+
+ +
+
Caratteri internazionali nel JavaScript di XUL
+
i file JavaScript delle applicazioni XUL ora possono contenere caratteri non ASCII.
+
+ +
+
Cambiementi nell'API di Tree
+
Le interfacce per accedere all'elemento XUL <tree> sono cambiate.
+
+ +
+
Modifiche a XUL in Firefox 1.5
+
Un sommario dei cambiamenti di XUL. Si veda anche Adattare le applicazioni XUL per Firefox 1.5.
+
+ +
+
Modifiche relative al networking
+
 
+
+ + + +

Nuove funzionalità per gli utenti finali

+ +

Esperienza utente

+ + + +

Sicurezza e Privacy

+ + + +

Supporto agli standard

+ +

Firefox offre un supporto coerente multipiattaforma per i seguenti standard del web:

+ + + +

Firefox 1.5 supporta anche:

+ + + +

Cambiamenti da Firefox 1.0

+ +

Sono stati introdotti diversi cambiamenti in Firefox dalla sua prima release il 9 novembre 2004. Questo browser ha visto molti progressi, molte nuove funzionalità e sono stati corretti molti bug. Lerelease notes sono un'eccellente fonte di informazioni sulle modifiche che sono state apportate:

+ + + +

Nota: le note di rilascio qui linkate sono tutte in inglese.

+ +

{{ languages( { "en": "en/Firefox_1.5_for_Developers", "es": "es/Firefox_1.5_para_Desarrolladores", "fr": "fr/Firefox_1.5_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_1.5_for_Developers", "nl": "nl/Firefox_1.5_voor_ontwikkelaars", "pl": "pl/Firefox_1.5_dla_programist\u00f3w", "pt": "pt/Firefox_1.5_para_Desenvolvedores" } ) }}

diff --git a/files/it/firefox_18_for_developers/index.html b/files/it/firefox_18_for_developers/index.html new file mode 100644 index 0000000000..41af59d3c9 --- /dev/null +++ b/files/it/firefox_18_for_developers/index.html @@ -0,0 +1,109 @@ +--- +title: Firefox 18 per sviluppatori +slug: Firefox_18_for_developers +tags: + - Firefox + - Firefox 18 +translation_of: Mozilla/Firefox/Releases/18 +--- +
{{FirefoxSidebar}}

{{ draft() }}

+ +

Firefox 18 è stato pubblicato l'8 gennaio 2013. In questo articolo sono elencate le modifiche principali che sono utili non solo per gli sviluppatori web, ma anche gli sviluppatori di Firefox e Gecko così come add-on per gli sviluppatori.
+
+ Vuoi aiutare la documentazione di Firefox 18? lista dei bug su cui bisogna scrivere (Vedi l'elenco dei bug )

+ +

Modifiche per gli sviluppatori Web

+ +

HTML

+ + + +

CSS

+ + + +

 DOM

+ + + +

JavaScript

+ + + +

WebGL

+ +

SVG

+ +

MathML

+ +

XUL

+ +

Network

+ + + +

Strumenti di sviluppo

+ +

Novità per add-on e sviluppatori Mozilla

+ +

Novità dell'Interfaccia

+ +
+
{{ interface("nsIStreamListener") }}
+
The 4th parameter (aOffset) of onDataAvailable() method changes to unsigned long long. ({{bug("784912")}})
+
{{ interface("nsIUploadChannel") }}
+
setUploadStream() supports over 2GB content-length ({{bug("790617")}})
+
{{ interface("nsIEditor") }}
+
addEditorObserver() has been removed, use setEditorObserver() instead, removeEditorObserver() no longer takes a {{ interface("nsIEditorObserver") }} parameter ({{bug("785091")}})
+
+ +
+
{{ interface("nsIHttpProtocolHandler") }}
+
http-on-modify-request observers are no longer guaranteed to be called synchronously during
+ nsIChannel.asyncOpen(). For observers that need to be called during asyncOpen(), the new http-on-opening-request observer topic has been added.  See ({{bug("800799")}})
+
+ +

New interfaces

+ +

Removed interfaces

+ +

The following interfaces have been removed.

+ + + +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers('17')}}

diff --git a/files/it/firefox_2.0_per_sviluppatori/index.html b/files/it/firefox_2.0_per_sviluppatori/index.html new file mode 100644 index 0000000000..4f8d46f2cf --- /dev/null +++ b/files/it/firefox_2.0_per_sviluppatori/index.html @@ -0,0 +1,117 @@ +--- +title: Firefox 2.0 per Sviluppatori +slug: Firefox_2.0_per_Sviluppatori +tags: + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Mozilla/Firefox/Releases/2 +--- +
{{FirefoxSidebar}}

Nuove funzionalità per sviluppatori in Firefox 2

+ +

Firefox 2 introduce una vasta gamma di nuove funzionalità. Questo articolo fornisce i link alle rispettive pagine.

+ +

Per gli sviluppatori di siti web e di applicazioni

+ +
+
Microsummaries (EN)
+
I microsommari sono informazioni importanti regolarmente aggiornate e succinte riguardo alle pagine web. Sia un sito che degli sviluppatori esterni possono fornirle e gli utenti possono scegliere di visualizzare i microsommari invece dei titoli statici nei bookmark.
+
+ +
+
Creare un Microsommario
+
Un tutorial che insegna a creare un generatore di microsommari.
+
+ +
+
Creare Plugin MozSearch
+
Firefox 2 supporta MozSearch, un formato per i plugin di ricerca basato su OpenSearch.
+
+ +
+
Supportare i suggerimenti nei plugin di ricerca
+
Come permettere ai plugin in MozSearch di supportare i suggerimenti di ricerca, che appaiono in una casella popup mentre di scrive nella barra di ricerca.
+
+ +
+
Novità in JavaScript 1.7
+
Firefox 2 supporta JavaScript 1.7, che comprende nuove funzionalità come let, assegnamento destrutturato, generatori e iteratori.
+
+ +
+
WHATWG Client-side session and persistent storage (EN)
+
La persistenza dei dati permette alle applicazioni web di immagazzinare dati strutturati nel browser.
+
+ +
+
SVG in Firefox
+
Firefox 2 migliora il supporto a Scalable Vector Graphics (SVG), implementando l'elemento <textPath> e aggiungendo il supporto ad alcuni attributi precedentemente ignorati.
+
+ +

Per gli sviluppatori di applicazioni XUL e di estensioni

+ +
+
Session restore API
+
Aiuta a salvare e recuperare successivamente i dati di sessione in sessione.
+
+ +
+
Feed content access API
+
Questa API è ancora in stato di revisione; la documentazione verrà pubblicata in futuro.
+
+ +
+
Supporto a SAX
+
API di un parser XML basata sugli eventi.
+
+ +
+
Installare plugin di ricerca dalle pagine web
+
E' possibile installare in Firefox un nuovo motore di ricerca tramite JavaScript. Il plugin di ricerca può essere scritto utilizzando anche OpenSearch o il formato Sherlock.
+
+ +
+
Aggiungere fornitori di dati anti-phishing
+
E' possibile migliorare la protezione anti-phishing aggiungendo alcuni fornitori di fati per la navigazione sicura.
+
+ +
+
mozStorage
+
Firefox 2 introduce mozStorage, un'architettura di database basata su SqlLite.
+
+ +
+
Le pratiche migliori per il versioning delle estensioni
+
Come utilizzare i numeri di versione.
+
+ +

Nuove funzionalità per gli utenti finali

+ +

Firefox 2 offre una versione migliorata dell'interfaccia utente impiegata nelle versioni precedenti, a cui sono state aggiunte varie caratteristiche di sicurezza finalizzate a rendere la vostra navigazione più semplice e piacevole di prima.

+ +

Esperienza utente

+ + + +

Sicurezza e Privacy

+ + + +

Argomenti correlati

+ + + +

{{ languages( { "en": "en/Firefox_2_for_developers", "fr": "fr/Firefox_2_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_2_for_developers", "pt": "pt/Firefox_2_para_desenvolvedores" } ) }}

diff --git a/files/it/games/index.html b/files/it/games/index.html new file mode 100644 index 0000000000..5a3c1d131c --- /dev/null +++ b/files/it/games/index.html @@ -0,0 +1,93 @@ +--- +title: Sviluppo di giochi +slug: Games +tags: + - App + - Giochi + - Giochi HTML5 + - Giochi JavaScript + - Sviluppo Giochi + - Web +translation_of: Games +--- +
{{GamesSidebar}}
+ +
+

I giochi sono una delle attività più popolari nel mondo dei computer. Nuove tecnologie sono in costante arrivo per rendere possibile lo sviluppo di giochi migliori e con più grinta, che funzionino in ogni web-browser conforme agli standard.

+
+ +
{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}
+ +
+
+

Sviluppa giochi per il web

+ +

Benvenuto al centro di sviluppo giochi MDN! In quest'area del sito forniamo risorse per gli sviluppatori web che vogliono sviluppare giochi. Nel menu principale a sinistra potrai trovare tanti tutorial utili e articoli - sentiti libero di esplorare.

+ +

Abbiamo anche incluso una sezione di referenze, così che tu possa trovare facilmente informazioni sulle più comuni API usate nello sviluppo di giochi.

+ +
+

Nota: Creare giochi sul web richiede la conoscenza di tecnologie come HTML, CSS, e JavaScript. La Learning Area è un buon posto dove iniziare come le basi.

+
+
+ +
+

Trasferisci giochi nativi sul web

+ +

Se sei uno sviluppatore nativo (per esempio scrivi giochi in C++), e sei interessato a portare i tuoi giochi sul web, dovrai imparare di più sul nostro tool Emscripten - questo è un compilatore LLVM a JavaScript, che prende il bytecode LLVM (p.e. generato con C/C++ tramite Clang oppure da un altro linguaggio) e lo compila in asm.js, che può girare sul Web.

+ +

Per iniziare, vedi:

+ + +
+
+ +
+
+

Esempi

+ +

Per una lista di esempi di giochi web, vedi la nostra pagina di esempi. Dai anche un'occhiata a openwebgames.com per ulteriori risorse utili ed esempi!

+
+
+ +

+ +

Vedi anche

+ +
+
+
+
Crea nuovi giochi
+
Un sito collaborativo che presenta un ampio numero di tutorial sullo sviluppo di web game liberi. Non particolarmente attivo di recente, ha comunque alcune risorse carine.
+
JS creativo 
+
Una collezione impressionante di tecnologie ed esperimenti JavaScript, non specifici per giochi, ma in ogni caso utili. Non particolarmente attivo di recente, ha comunque alcune risorse carine.
+
Modelli di programmazione per giochi
+
Un libro online scritto da Bob Nystrom, il quale discute i modelli di programma nel contesto dello sviluppo di giochi con l'intenzione di aiutare gli sviluppatori videoludici a produrre codici più effettivi ed efficienti.
+
Gamedev.js Weekly
+
Newsletter settimanale sullo sviluppo di giochi in HTML5, inviato ogni venerdì. Contiene gli ultimi articoli, tutorial, tool e risorse.
+
HTML5 Game Devs Forum
+
Forum per sviluppatori, creatori di framework e publishers. Fai domande, ricevi feedback, aiuta gli altri.
+
+
+ +
+
+
HTML5 Game Engine
+
Lista dei framework HTML5 per giochi più popolari con rating, caratteristiche ed anteprime.
+
JSBreakouts
+
Compara JavaScript Breakout ricerca in differenti frameworks per aiutarti a scegliere quello giusto per te.
+
Tuts+ Game Development
+
Tutorials e articoli sullo sviluppo di giochi in generale.
+
HTML5 Gamedev Starter
+
Starter per i nuovi sviluppatori di giochi, un'accurata lista di link vari e risorse utili nel web.
+
js13kGames
+
Una sfida di programmazione JavaScript per sviluppatori di giochi HTML5 con un limite di dimensione file pari a 13 kilobytes. Tutti i giochi inviati sono a disposizione in forma leggibile su GitHub.
+
Mozilla Hacks blog
+
Categoria giochi sul Blog Mozilla Hacks che contiene interessanti articoli correlati allo sviluppo di giochi.
+
+
+
diff --git a/files/it/games/publishing_games/index.html b/files/it/games/publishing_games/index.html new file mode 100644 index 0000000000..d24458f680 --- /dev/null +++ b/files/it/games/publishing_games/index.html @@ -0,0 +1,27 @@ +--- +title: Pubblicare un gioco +slug: Games/Publishing_games +tags: + - Distribuzione + - HTML5 + - JavaScript + - Monetizzazione + - Pubblicare + - Videgiochi +translation_of: Games/Publishing_games +--- +
{{GamesSidebar}}
+ +

I giochi in HTML5 hanno un grande vantaggio in termini di pubblicazione e distribuzione rispetto a quelli native, poiché si può trarre vantaggio da come il Web sia veramente multipiattaforma. Si è infatti liberi di distribuire, pubblicizzare e monetizzare il proprio gioco direttamente sul Web, invece che ritrovarsi con ogni versione del gioco venduta da una singola azienda solo nei suoi negozi. Questa serie di articoli passa in rassegna le varie opzioni che si hanno nella pubblicazione e distribuzione di un gioco, e modi in cui guadagnarci mentre si aspetta che diventi famoso.

+ +

Distribuzione del gioco

+ +

Bene, hai seguito uno tutorial o due e hai creato un gioco in HTM5, in questa pagina troverai tutto quelle che ti serve sapere su come distribuire il tuo gioco appena creato. Ad esempio puoi metterlo online per conto tuo, oppure affidarti a piattaforme apposite, alcune chiuse come Google Play o l'App Store iOS, altre in cui il gioco può essere caricato liberamente

+ +

Promozione del gioco

+ +

Sviluppare e finire un gioco non basta, bisogna anche far sapere al mondo che è divertente, che piacerà alla gente e che è in vendita. Ci sono molti modi di pubblicizzare un gioco e alcuni di questi sono gratis, quindi anche uno sviluppatore indie privo di budget può riuscire a far sapere a molte persone del proprio gioco. Promuovere un gioco rende più facile guadagnarci in futuro, è quindi importante farlo in modo efficace.

+ +

Monetizzare un gioco

+ +

Quando si spende tanto tempo nella produzione, pubblicazione e promozione di un gioco, è normale che si arrivi a pensare di volerci anche guadagnare qualcosa. Questa pagnina è fondamentale per chiunque voglia diventare uno sviluppatore indipendente in grado di supportarsi coi propri giochi, se hai intenzione di lanciarti seriamente in questa impresa, leggi di seguito per vedere quali sono le opzioni a tua disposizione. La tecnologia ormai è pronta, si tratta solo di scegliere il giusto approccio.

diff --git a/files/it/gecko/index.html b/files/it/gecko/index.html new file mode 100644 index 0000000000..66b64e12ab --- /dev/null +++ b/files/it/gecko/index.html @@ -0,0 +1,71 @@ +--- +title: Gecko +slug: Gecko +tags: + - Gecko +translation_of: Mozilla/Gecko +--- +
+

Gecko è il nome del motore di layout sviluppato dal Mozilla Project. Originariamente era chiamato NGLayout. La funzione di Gecko è quella di leggere contenuti web, come HTML, CSS, XUL, JavaScript e renderizzarli sullo schermo dell'utente oppure stamparli. Nelle applicazioni basate su XUL, Gecko è utilizzato anche per renderizzare le interfacce utente delle applicazioni.

+
+

Gecko è usato in molte applicazioni, ad esempio alcuni browser, come Firefox, Seamonkey ecc. (per una lista completa, fare riferimento all'Articolo di Wikipedia su Gecko.) I prodotti che usano la stessa versione di Gecko supportano gli stessi standard.

+ + + + + + + +
+

Documentazione

+
+
+ FAQ di Gecko
+
+ Domande frequenti su Gecko.
+
+ Riferimento al DOM di Gecko
+
+ Riferimento al DOM.
+
+ Riferimento agli eventi di Gecko
+
+ Riferimento agli eventi utilizzati all'interno di Gecko e delle applicazioni di Mozilla; per gli eventi DOM dello standard web, vedere Riferimento agli eventi DOM.
+
+ Versioni di Gecko e versioni delle applicazioni
+
+ Versioni di Gecko e le applicazioni in cui sono utilizzate.
+
+ Introduzione al Layout in Mozilla
+
+ Discussione tecnica sul layout.
+
+ Includere Mozilla
+
+ Utilizzare Gecko all'interno delle proprie applicazioni.
+
+ Set di caratteri supportati da Gecko
+
+ Lista dei set di caratteri supportati da Gecko.
+
+ Threading del parser HTML
+
+ Descrizione del multithreading nel parser HTML.
+
+ {{interwiki('wikimo', 'Gecko:Home_Page', 'Home Page di Gecko su MozillaWiki')}}
+
+ Quartier generale degli sviluppatori attivi. Tabelle di marcia e risorse più aggiornate.
+
+

Vedi tutti...

+ 		+

Comunità

+
    +
  • Vedi i Forum di Mozilla... {{DiscussionList("dev-tech-layout", "mozilla.dev.tech.layout")}}
    • +
+ +
+
+ Standard Web, XUL, Includere Mozilla, Sviluppare Mozilla
+
+
+

 

diff --git a/files/it/gli_user_agent_di_gecko/index.html b/files/it/gli_user_agent_di_gecko/index.html new file mode 100644 index 0000000000..0c4a3c17e2 --- /dev/null +++ b/files/it/gli_user_agent_di_gecko/index.html @@ -0,0 +1,40 @@ +--- +title: Gli User Agent di Gecko +slug: Gli_User_Agent_di_Gecko +translation_of: Web/HTTP/Headers/User-Agent/Firefox +--- +

Lista degli user agent rilasciati da Netscape e AOL basati su Gecko™.

+ +

Uso appropriato

+ +

Mozilla consiglia di non utilizzare le stringhe User Agent come mezzo primario di identificazione del browser. Si veda Identificazione del browser e supporto cross browser per uno sguardo in profondità ai vari approcci per la rilevazione del browser.

+ +

In particolare, Mozilla raccomanda di utilizzare lo user agent solo per l'identificazione lato server. Se il codice già esistente per l'identificazione lato client utilizza lo user agent, è possibile semplicemente cercare la stringa "Gecko" per sapere se il browser è basato su questo motore.

+ +

Per l'identificazione di un browser che utilizza Gecko, è possibile utilizzare l'oggetto navigator.

+ +

Gli User Agent di Gecko

+ +

Si veda mozilla.org's user-agent strings reference per i valori specifici delle vociPlatform ,Security ,OS-or-CPU eLocalization .

+ + + +

Per ulteriori dettagli sulle versioni di Netscape e Mozilla, si veda mozilla.org cvstags reference.

+ +

{{ languages( { "ja": "ja/Gecko_User_Agent_Strings", "en": "en/Gecko_User_Agent_Strings", "fr": "fr/Les_cha\u00eenes_UserAgent_de_Gecko" } ) }}

diff --git a/files/it/glossary/ajax/index.html b/files/it/glossary/ajax/index.html new file mode 100644 index 0000000000..f0228e49e6 --- /dev/null +++ b/files/it/glossary/ajax/index.html @@ -0,0 +1,29 @@ +--- +title: AJAX +slug: Glossary/AJAX +tags: + - AJAX + - CodingScripting + - Glossary + - Infrastructure + - 'l10n:priority' +translation_of: Glossary/AJAX +--- +

AJAX (Asynchronous {{glossary("JavaScript")}} And {{glossary("XML")}}) è una pratica di programmazione che combina {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, il {{glossary("DOM")}}, e l'{{glossary("oggetto")}} XMLHttpRequest per costruire pagine web complesse. AJAX permette di aggiornare singole parti di una pagina, invece di doverla ricaricare completamente. Inoltre consente di lavorare in maniera asincrona: ciò significa che il tuo codice continua ad essere eseguito anche durante l'aggiornamento di quella parte della pagina (al contrario di un'esecuzione sincrona, che blocca il tuo codice finchè l'aggiornamento non è stato completato)

+ +

Approfondimenti

+ +

Conoscenza generale

+ + + +

Informazioni tecniche

+ + diff --git a/files/it/glossary/array/index.html b/files/it/glossary/array/index.html new file mode 100644 index 0000000000..5d78e2ebfc --- /dev/null +++ b/files/it/glossary/array/index.html @@ -0,0 +1,28 @@ +--- +title: Array +slug: Glossary/array +translation_of: Glossary/array +--- +

Un array è una raccolta ordinata di dati (sia {{Glossary("primitive")}} che {{Glossary("object")}} a seconda del linguaggio). Gli array sono utilizzati per immagazzinare valori mutipli in una singola variabile. In comparazione con una variabile che invece può contenere  un solo valore. 

+ +

Ogni elemento in un array ha un numero collegato ad esso, chiamato indice numerico, che ne permette l'accesso. In JavaScript, gli array iniziano all'indice zero e possono essere manipolati con vari {{Glossary("Method", "methods")}}. 

+ +

Aspetto di un array in JavaScript:

+ +
var myArray = [1, 2, 3, 4];
+var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
+//Arrays in JavaScript can hold different types of data, as shown above.
+ +

Apprendi di più

+ +

Conoscenza generale

+ + + +

Riferimento tecnico

+ + diff --git a/files/it/glossary/block/css/index.html b/files/it/glossary/block/css/index.html new file mode 100644 index 0000000000..0b6828a5e4 --- /dev/null +++ b/files/it/glossary/block/css/index.html @@ -0,0 +1,16 @@ +--- +title: Blocco (CSS) +slug: Glossary/Block/CSS +translation_of: Glossary/Block/CSS +--- +

Un blocco in una pagina web è un {{glossary("HTML")}} {{glossary("element")}} che occupa una linea intera, quindi si troverà al di sotto dell'elemento che lo precede e sopra l'elemento successivo(comunemente detto block-level element).Per esempio, un elemento {{htmlelement("p")}} è di base un block-level element, invece un elemento {{htmlelement("a")}} è un inline element — infatti puoi inserire molti link uno dopo l'eltro nel tuo sorgente HTML e, visualizzando la pagina, loro si posizioneranno sulla stessa linea.

+ +

Usando la proprietà {{cssxref("display")}} puoi scegliere come mostrare l'elemento, inline, come un blocco o in altri modi. I blocchi sono anche soggetti agli effetti degli schemi di posizionamento e all'uso della proprietà {{cssxref("position")}}.

+ +

Per saperne di più

+ +

Conoscenza generale

+ + diff --git a/files/it/glossary/block/index.html b/files/it/glossary/block/index.html new file mode 100644 index 0000000000..8f17177e82 --- /dev/null +++ b/files/it/glossary/block/index.html @@ -0,0 +1,13 @@ +--- +title: Block +slug: Glossary/Block +tags: + - Disambiguation + - Glossary + - NeedsTranslation + - TopicStub +translation_of: Glossary/Block +--- +

The term block can have several meanings depending on the context. It may refer to:

+ +

{{GlossaryDisambiguation}}

diff --git a/files/it/glossary/control_flow/index.html b/files/it/glossary/control_flow/index.html new file mode 100644 index 0000000000..92485dd09c --- /dev/null +++ b/files/it/glossary/control_flow/index.html @@ -0,0 +1,50 @@ +--- +title: Controllo del flusso +slug: Glossary/Control_flow +tags: + - Codice Javascript + - Controllo di Flussi + - Glossário + - JavaScript +translation_of: Glossary/Control_flow +--- +

Il flusso di controllo è l'ordine in cui il computer esegue le istruzioni in uno script.

+ +

Il codice viene eseguito in ordine dalla prima riga del file all'ultima riga, a meno che il computer non attraversi le strutture (estremamente frequenti) che modificano il flusso di controllo, ad esempio condizionali e loop.

+ +

Ad esempio, immagina uno script utilizzato per convalidare i dati utente da un modulo di pagina web. 

+ +

Lo script invia i dati convalidati, ma se l'utente, ad esempio, lascia vuoto un campo obbligatorio, lo script chiede di riempirlo. Per fare ciò, lo script utilizza un {{Glossary("Conditional", "conditional")}} struttura o if...else, in modo che il codice venga eseguito a seconda che il modulo sia completo o meno:

+ +
if (field==empty) {
+    promptUser();
+} else {
+    submitForm();
+}
+
+ +

Uno script tipico in {{glossary("JavaScript")}} o {{glossary("PHP")}} (e simili) include molte strutture di controllo, inclusi i condizionali, {{Glossary("Loop", "loops")}} e {{Glossary("Function", "functions")}}. Parti di uno script possono anche essere impostate per essere eseguite quando {{Glossary("Event", "events")}} si verificano.

+ +

Ad esempio, l'estratto di cui sopra potrebbe trovarsi all'interno di una funzione che viene eseguita quando l'utente fa clic sul pulsante Invia per il modulo. La funzione potrebbe anche includere un ciclo, che scorre tutti i campi nel modulo, controllandoli uno a turno. Guardando indietro al codice nelle sezioni if e else, le righe promptUser e submitForm potrebbero anche essere chiamate ad altre funzioni nello script. Come potete vedere, le strutture di controllo possono dettare flussi di elaborazione complessi anche con poche righe di codice.

+ +

Flusso di controllo significa che quando leggi uno script, non solo devi leggere dall'inizio alla fine, ma anche esaminare la struttura del programma e il suo impatto sull'ordine di esecuzion.

+ +

Per saperne di più

+ +

Conoscenza generale

+ + + +

Riferimento tecnico

+ + + +

Impara al riguardo

+ + diff --git a/files/it/glossary/css/index.html b/files/it/glossary/css/index.html new file mode 100644 index 0000000000..f97042c554 --- /dev/null +++ b/files/it/glossary/css/index.html @@ -0,0 +1,49 @@ +--- +title: CSS +slug: Glossary/CSS +tags: + - CSS + - CodingScripting + - Glossary + - Web + - 'l10n:priority' +translation_of: Glossary/CSS +--- +

CSS (Cascading Style Sheets) è un linguaggio dichiarativo che controlla l'aspetto delle pagine web nel {{glossary("browser")}}. Il browser applica le dichiarazioni di stile CSS agli elementi selezionati per mostrarli correttamente. Una dichiarazione di stile contiene gli attributi e i loro valori, che determinano come una pagina web appare.

+ +

CSS è una delle tre tecnologie cardine del Web, insieme a {{Glossary("HTML")}}  e  {{Glossary("JavaScript")}}. Il CSS di solito viene usato per controllare l'aspetto degli {{Glossary("Element","elementi HTML")}}, ma può essere usato anche con altri linguaggi di markup, come {{Glossary("SVG")}} o {{Glossary("XML")}}.

+ +

Una regola CSS è un insieme di {{Glossary("CSS Property","proprietà")}} associate ad un {{Glossary("selettore")}}. Di seguito un esempio che mostra tutti i paragrafi HTML di colore giallo su sfondo nero:

+ +
/* Il selettore "p" indica che tutti i paragrafi nella pagina saranno interessati da questa regola */
+p {
+  /* L'attributo "color" definisce il colore del testo, in questo caso giallo. */
+  color: yellow;
+
+  /* L'attributo "background-color" definisce il colore dello sfondo, in questo caso nero. */
+  background-color: black
+}
+ +

"Cascading" si riferisce alle regole di priorità dei selettori ed è di fondamentale importanza, poichè un sito complesso può dichiarare migliaia di regole CSS.

+ +

Approfondimenti

+ +

Conoscenza generica

+ + + +

Riferimenti tecnici

+ + + +

Scopri di più sul CSS

+ + diff --git a/files/it/glossary/doctype/index.html b/files/it/glossary/doctype/index.html new file mode 100644 index 0000000000..6791600c7f --- /dev/null +++ b/files/it/glossary/doctype/index.html @@ -0,0 +1,24 @@ +--- +title: Doctype +slug: Glossary/Doctype +tags: + - DOCTYPE + - HTML +translation_of: Glossary/Doctype +--- +

In {{Glossary ("HTML")}}, il doctype è il preambolo "<! DOCTYPE html>" richiesto nella parte superiore di tutti i documenti. Il suo unico scopo è impedire al {{Glossary ("browser")}} di passare alla cosiddetta modalità "quirks mode" durante il rendering di un documento; cioè, il doctype "<! DOCTYPE html>" garantisce che il browser faccia il miglior tentativo di seguire le specifiche pertinenti, piuttosto che utilizzare una modalità di rendering diversa che è incompatibile con alcune specifiche.

+ +

Learn more

+ +

General Knowledge

+ + + +

Technical reference

+ + diff --git a/files/it/glossary/first-class_function/index.html b/files/it/glossary/first-class_function/index.html new file mode 100644 index 0000000000..02c413a1d0 --- /dev/null +++ b/files/it/glossary/first-class_function/index.html @@ -0,0 +1,20 @@ +--- +title: First-class Function +slug: Glossary/First-class_Function +translation_of: Glossary/First-class_Function +--- +

 

+ +

Un linguaggio di programmazione implementa le First-class functions se le funzioni di quest'ultimo vengono trattate come ogni altra variabile.

+ +

Per esempio, in un linguaggio che ne fa utilizzo, è possibile passare una funzione come parametro ad un'altra funzione, possono essere restituite da altre funzioni e possono essere assegnate ad una variabile.

+ +

Learn more

+ +

General knowledge

+ + + +

 

diff --git a/files/it/glossary/head/index.html b/files/it/glossary/head/index.html new file mode 100644 index 0000000000..01d27c78fa --- /dev/null +++ b/files/it/glossary/head/index.html @@ -0,0 +1,20 @@ +--- +title: Head +slug: Glossary/Head +tags: + - Glossary + - HTML + - head + - metadata +translation_of: Glossary/Head +--- +

L'Head è la parte di un documento {{glossary("HTML")}} che contiene i {{glossary("metadata")}} relativi al documento, come autore, descrizione, e collegameti a {{glossary("CSS")}} o file {{glossary("JavaScript")}} che possono essere applicati al documento HTML.

+ +

Ulteriorei risorse

+ +

HTML head

+ + diff --git a/files/it/glossary/header_di_risposta/index.html b/files/it/glossary/header_di_risposta/index.html new file mode 100644 index 0000000000..6363a8b84a --- /dev/null +++ b/files/it/glossary/header_di_risposta/index.html @@ -0,0 +1,38 @@ +--- +title: Header di risposta +slug: Glossary/Header_di_risposta +tags: + - Glossário +translation_of: Glossary/Response_header +--- +

Un header di risposta è un {{glossary("header", "HTTP header")}} che può essere utilizzato in una risposta HTTP e che non fa riferimento al contenuto del messaggio. Gli header di risposta, come {{HTTPHeader("Age")}}, {{HTTPHeader("Location")}} o {{HTTPHeader("Server")}} sono usati per fornire un contesto della risposta più dettagliato.

+ +

Non tutti gli header che compaiono in una risposta sono header di risposta. Ad esempio, l'header {{HTTPHeader("Content-Length")}} è un {{glossary("entity header")}} che fa riferimento alla dimensione del corpo del messaggio di risposta. Tuttavia queste entità sono chiamate solitamente header di risposta in questo contesto.

+ +

Di seguito sono mostrati alcuni header di risposta dopo una richiesta {{HTTPMethod("GET")}} . Si noti che, strettamente parlando, gli header {{HTTPHeader("Content-Encoding")}} e {{HTTPHeader("Content-Type")}} sono {{glossary("entity headers")}}:

+ +
200 OK
+Access-Control-Allow-Origin: *
+Connection: Keep-Alive
+Content-Encoding: gzip
+Content-Type: text/html; charset=utf-8
+Date: Mon, 18 Jul 2016 16:06:00 GMT
+Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
+Keep-Alive: timeout=5, max=997
+Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
+Server: Apache
+Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
+Transfer-Encoding: chunked
+Vary: Cookie, Accept-Encoding
+X-Backend-Server: developer2.webapp.scl3.mozilla.com
+X-Cache-Info: not cacheable; meta data too large
+X-kuma-revision: 1085259
+x-frame-options: DENY
+ +

Scopri di più

+ +

Conoscenza tecnica

+ + diff --git a/files/it/glossary/hoisting/index.html b/files/it/glossary/hoisting/index.html new file mode 100644 index 0000000000..77186b6b2b --- /dev/null +++ b/files/it/glossary/hoisting/index.html @@ -0,0 +1,74 @@ +--- +title: Hoisting +slug: Glossary/Hoisting +tags: + - Glossário + - JavaScript +translation_of: Glossary/Hoisting +--- +

Hoisting (sollevare, issare in italiano) è un termine che non sentirai mai usare in nessuno testo normativo prima di ECMAScript® 2015 Language Specification. L'Hoisting è stato pensato come un modo generico di pensare a come funziona, in Javascript, il contesto di esecuzione (nello specifico le fasi di creazioni e di esecuzione). Il concetto può essere poco chiaro all'inizio.

+ +

Una definizione rigida di Hoisting potrebbe essere: "(durante la fase di compilazione)  le dichiarazioni delle variabili e delle funzioni sono fisicamente spostate in cima al codice", ma questo di fatto non è quello che succede. In realtà, le dichiarazioni delle variabili e delle funzioni sono messe in memoria durante la fase di compilazione, ma rimangono esattamente dove le hai scritte nel codice.

+ +

Learn more

+ +

Technical example

+ +

Uno dei vantaggi di mettere in memoria la dichiarazione delle funzioni, prima di eseguire qualunque segmento di codice, è che questo ti permette di usare una funzione prima di dichiararla. Per esempio:

+ +
function catName(name) {
+  console.log("My cat's name is " + name);
+}
+
+catName("Tigger");
+/*
+Il risultato del codice sopra è: "My cat's name is Tigger"
+*/
+
+ +

Il codice sopra è scritto come chiunque si aspetterebbe. Ora, vediamo cosa succede quando chiamiamo la funzione prima di scriverla:

+ +
catName("Chloe");
+
+function catName(name) {
+  console.log("My cat's name is " + name);
+}
+/*
+Il risultato del codice sopra è: "My cat's name is Chloe"
+*/
+
+ +

Anche se chiamiamo la funzione all'inizio del codice, prima che questa sia scritta, il codice continua a funzionare. Questo accade grazie al comportamento del "contesto di esecuzione" (execution context) di Javascript.

+ +

L'Hoisting funziona bene anche con altri tipi di dati (data types) e con le variabili. Le variabili possono essere inizializzate e usate prima di essere dichiarate. Ma non possono essere usate senza inizializzazione.

+ +

Technical example

+ +
num = 6;
+num + 7;
+var num;
+/* non restituisce errore perchè num è dichiarata*/
+
+
+ +

Javascript "solleva" (hoists) solo le dichiarazioni, non le inizializzazioni. Se utilizzi una variabile prima di dichiararla e inizializzarla, il suo valore sarà undefined. L'esempio qui sotto dimostra questo comportamento.

+ +
var x = 1; // Initialize x
+console.log(x + " " + y); // '1 undefined'
+var y = 2; // Initialize y
+
+
+// Il codice seguente si comporterà nella stessa maniera del precedente
+var x = 1; // Initialize x
+var y; // Declare y
+console.log(x + " " + y); // '1 undefined'
+y = 2; // Initialize y
+
+ +

Technical reference

+ + diff --git a/files/it/glossary/html/index.html b/files/it/glossary/html/index.html new file mode 100644 index 0000000000..04b4009ed5 --- /dev/null +++ b/files/it/glossary/html/index.html @@ -0,0 +1,50 @@ +--- +title: HTML +slug: Glossary/HTML +tags: + - CodingScripting + - Glossário + - HTML + - Script + - Story +translation_of: Glossary/HTML +--- +

HTML (HyperText Markup Language) è un linguaggio descrittivo che specifica la struttura delle pagine web.

+ +

Breve storia

+ +

Nel 1990, come parte della sua visione del {{glossary("World Wide Web","Web")}}, Tim Berners-Lee definisce il suo concetto di {{glossary("hypertext","hypertesto (hypertext)")}}, che successivamente ha formalizzato durante gli anni attraverso un markup basato principalmente su {{glossary("SGML")}}. L'{{glossary("IETF")}} inizia a specificare formalmente HTML nel 1993, e dopo diverse bozze rilascia ufficialmente la versione 2.0 nel 1995. Nel 1994 Berners-Lee fonda il {{glossary("W3C")}} per lo sviluppo Web. Nel 1996, il W3C si assume il lavoro riguardo HTML e pubblica la versione 3.2 un anno dopo. Successivamente, HTML 4.0 è stato rilasciato nel 1999 ed è diventato un {{glossary("ISO")}} standard nel 2000.

+ +

Al tempo, il W3C stava quasi per abbandonare l'HTML a favore di {{glossary("XHTML")}}, solleticando la fondazione nel 2004 di un gruppo indipendente chiamato {{glossary("WHATWG")}}. Grazie al WHATWG, il lavoro su {{glossary("HTML5")}} è continuato: le due organizzazioni hanno rilasciato la prima bozza nel 2008 e la versione finale nel 2014.

+ +

Concetto e sintassi

+ +

Un documento HTML è un documento in chiaro strutturato con degli {{glossary("element","elementi")}}. Gli elementi sono racchiusi fra dei {{Glossary("tag")}} di apertura e chiusura. Ogni tag inizia e finisce con delle parentesi angolari (<>). Esistono alcuni tag "vuoti" che non possono includere testo, ad esempio {{htmlelement("img")}}.

+ +

I tag in HTMl possono essere estesi con degli {{Glossary("attribute","attributi")}}, che forniscono informazioni aggiuntive che vanno a influenzare il modo in cui il browser interpreta tale elemento. Esempio:

+ +

Detail of the structure of an HTML element

+ +

Un file HTML è salvato con un estensione .htm o .html, solitamente servito a un {{Glossary("Server","Web server")}}, e visualizzato da qualsiasi {{Glossary("Browser","Web browser")}} (con diverse compatibilità).

+ +

Vedi altro

+ +

Conoscenza generale

+ + + +

Impara HTML

+ + + +

Riferimento tecnici

+ + diff --git a/files/it/glossary/html5/index.html b/files/it/glossary/html5/index.html new file mode 100644 index 0000000000..63a0630a67 --- /dev/null +++ b/files/it/glossary/html5/index.html @@ -0,0 +1,18 @@ +--- +title: HTML5 +slug: Glossary/HTML5 +tags: + - CodingScripting + - Glossário + - HTML + - HTML5 + - Script +translation_of: Glossary/HTML5 +--- +

L'ultimo rilascio stabile di {{Glossary("HTML")}}, HTML5, porta HTML da un semplice linguaggi di markup per strutturare un document a una completa piattaforma di sviluppo app. Tra le altre caratteristiche, HTML5 include nuovi elementi e nuove {{glossary("JavaScript")}} {{glossary("API","APIs")}} per migliorare l'accesso allo storage, ai multimedia e all'hardware.

+ +

Vedi altro

+ + diff --git a/files/it/glossary/http/index.html b/files/it/glossary/http/index.html new file mode 100644 index 0000000000..813d9a4f9e --- /dev/null +++ b/files/it/glossary/http/index.html @@ -0,0 +1,26 @@ +--- +title: HTTP +slug: Glossary/HTTP +tags: + - Beginner + - Glossary + - HTTP + - Infrastructure + - Web Performance + - 'l10n:priority' +translation_of: Glossary/HTTP +--- +

L’HyperText Transfer Protocol (Protocollo di Trasferimento Ipertestuale, HTTP) è il {{glossary("protocol", "protocollo")}} di rete fondamentale per il trasferimento di ipermedia (documenti multimediali che utilizzano hyperlink) sul {{glossary("World Wide Web","Web")}}. Solitamente ha luogo fra un browser e un server, in modo che l'utente possa fruire dei contenuti. La versione corrente di HTTP è {{glossary("HTTP_2", "HTTP/2")}}.

+ +

Il termine "http" fa parte di un {{glossary("URI")}} (come ad esempio in "http://example.com/") ed è chiamato "schema". Le risorse che utilizzano lo schema "http" sono solitamente trasferite per mezzo di una connessione non criptata che usa il protocollo HTTP. Lo schema "https" (come ad esempio in "https://developer.mozilla.org") indica che una risorsa è trasferita sempre tramite il protocollo HTTP, ma attraverso un canale sicuro chiamato {{glossary("TLS")}}.

+ +

L’HTTP è testuale (tutte le comunicazioni avvengono con testo in chiaro) e indipendente (nessuna comunicazione può conoscere o accedere a quelle precedenti). Questa proprietà è fondamentale per permettere agli utenti di navigare in Internet. Tuttavia, l’HTTP può essere usato come base in servizi web {{glossary("REST")}} per comunicare da server a server oppure per rendere più dinamici i siti web attraverso richieste {{glossary("AJAX")}}.

+ +
+

Approfondimenti

+ + +
diff --git a/files/it/glossary/index.html b/files/it/glossary/index.html new file mode 100644 index 0000000000..8e1c81312d --- /dev/null +++ b/files/it/glossary/index.html @@ -0,0 +1,45 @@ +--- +title: Glossary +slug: Glossary +tags: + - Beginner + - Glossary + - Index + - Landing + - NeedsTranslation + - TopicStub +translation_of: Glossary +--- +
{{LearnBox({"title":"Learn a new term:"})}}
+ +

Web technologies contain long lists of jargon and abbreviations that are used in documentation and coding. This glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web.

+ +

Glossary of Terms

+ +

{{GlossaryList({"split": "h3", "css": "multiColumnList"})}}

+ +

Contribute to the glossary

+ +

This glossary is a never ending work in progress. You can help improving it by writing new entries or by making the existing ones better. The easiest way to start is to hit the following link or to pick one of the suggested terms below.

+ +

Add a new entry to the glossary

+ +

{{GlossaryList({"terms":["at-rule", "ALPN", "Attack", "Byte-Order Mark", "client", "Character set", "cryptosystem", "debug", "digital signature", "execution", "flex-direction", "GLSL", "Interface", "Library", "Memory management", "routers", "Self-Executing Anonymous Function", "Stylesheet", "Vector image"], "filter": "notdefined", "css": "multiColumnList"})}}

+ +

If you want to know more on how to contribute to the glossary, check out the glossary documentation status page.

+ +

See also

+ + + + diff --git a/files/it/glossary/javascript/index.html b/files/it/glossary/javascript/index.html new file mode 100644 index 0000000000..b672c4d871 --- /dev/null +++ b/files/it/glossary/javascript/index.html @@ -0,0 +1,41 @@ +--- +title: JavaScript +slug: Glossary/JavaScript +translation_of: Glossary/JavaScript +--- +

JavaScript (JS) è un linguaggio di programmazione principalmente client-side per programmare dinamicamente pagine web, ma spesso anche {{Glossary("Server","server")}}-side, usando pacchetti come Node.js.

+ +

Non confondere JavaScript with the {{interwiki("wikipedia", "Java_(programming_language)", "linguaggio di programmazione Java")}}. Sia "Java" che "JavaScript" sono marchi commerciali o marchi registrati di Oracle negli Stati Uniti e in altri Paesi. Comunque sia, i due linguaggi di programmazione hanno una sintassi, una semantica e degli usi molto diversi.

+ +

Concepito come un linguaggio server-side da Brendan Eich (un allora impiegato della Netscape Corporation), JavaScript superò presto Netscape Navigator 2.0 nel Settembre 1995. JavaScript ottenne immediato successo e {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} introdusse il supporto a JavaScript sotto il nome JScript nell'Agosto del 1996.

+ +

Nel Novembre del 1996, Netscape iniziò a lavorare con ECMA International per fare di JavaScript uno standard industriale. Da allora, il JavaScript standardizzato è chiamato ECMAScript e indicato con ECMA-262, la cui ultima (ottava) edizione sarà disponibile nel Giugno del 2017.

+ +

JavaScript è principalemente usato nel browser, permettendo agli sviluppatori di manipolare il contenuto delle pagine web tramite {{Glossary("DOM")}}, manipolare dati con {{Glossary("AJAX")}} e {{Glossary("IndexedDB")}}, disegnare elementi grafici con vari {{Glossary("canvas")}}, interagire con il dispositivo che fa andare il browser tramite vari {{Glossary("API","API")}}, e cos via. JavaScript è uno dei linguaggi più usati al mondo, essendo la causa della recente creascita e del miglioramento di performance degli {{Glossary("API","API")}} presenti nei browser.

+ +

Recentemente, JavaScript è ritornato ai server con la nota piattaforma Node.js, il più popolare ambiente di sviluppo cross-platform JavaScript esterno al browser. Node.js permette di usare JavaScript come un linguaggio di script per automatizzare processi su un PC e costruire {{Glossary("HTTP")}} totalmente funzionante e server con {{Glossary("Web Sockets", "Web Socket")}}.

+ +

Scopri di più

+ +

Conoscenza generale

+ + + +

Impaare il JavaScript

+ + + +

Riferimenti tecnici

+ + diff --git a/files/it/glossary/node/dom/index.html b/files/it/glossary/node/dom/index.html new file mode 100644 index 0000000000..33c713a074 --- /dev/null +++ b/files/it/glossary/node/dom/index.html @@ -0,0 +1,14 @@ +--- +title: Node (DOM) +slug: Glossary/Node/DOM +translation_of: Glossary/Node/DOM +--- +

Nel contesto del {{Glossary("DOM")}}, un nodo è un singolo punto nell'albero dei nodi. Varie cose che sono nodi sono il documento stesso, elementi, testo e commenti.

+ +

Per saperne di più

+ +

Riferimento tecnico

+ + diff --git a/files/it/glossary/node/index.html b/files/it/glossary/node/index.html new file mode 100644 index 0000000000..49f2190f34 --- /dev/null +++ b/files/it/glossary/node/index.html @@ -0,0 +1,15 @@ +--- +title: Node +slug: Glossary/Node +tags: + - Disambiguation + - Glossary + - NeedsTranslation + - TopicStub +translation_of: Glossary/Node +--- +

The term node can have several meanings depending on the context. It may refer to:

+ +

{{GlossaryDisambiguation}}

+ +

Another use of the word is when talking about {{Glossary("Node.js")}}

diff --git a/files/it/glossary/nullish/index.html b/files/it/glossary/nullish/index.html new file mode 100644 index 0000000000..3d4ac992ed --- /dev/null +++ b/files/it/glossary/nullish/index.html @@ -0,0 +1,6 @@ +--- +title: Nullish value +slug: Glossary/Nullish +translation_of: Glossary/Nullish +--- +

In JavaScript, un valore nullo può essere {{JSxRef("null")}} o {{JSxRef("undefined")}}. I valori nulli sono sempre falsi.

diff --git a/files/it/glossary/primitive/index.html b/files/it/glossary/primitive/index.html new file mode 100644 index 0000000000..a254782313 --- /dev/null +++ b/files/it/glossary/primitive/index.html @@ -0,0 +1,32 @@ +--- +title: Primitive +slug: Glossary/Primitive +translation_of: Glossary/Primitive +--- +

Una primitiva (valore primitivo, tipo di dato primitivo) è un dato che non è un {{Glossary("object", "oggetto")}} e non ha {{glossary("method","metodi")}}. In {{Glossary("JavaScript")}}, cisono 6 tipi di dati primitivi: {{Glossary("string")}}, {{Glossary("number")}}, {{Glossary("boolean")}}, {{Glossary("null")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}} (nuovo in {{Glossary("ECMAScript")}} 2015).

+ +

La maggior parte delle volte, un vaolre primitivo è rappresentato direttamente al livello più basso dell'implementazione del linguaggio.

+ +

Tutte le primitive sono immutabili (non possono essere cambiati).

+ +

Wrapper di oggetti primitivi in JavaScript

+ +

Ad eccezione di null e undefined, tutti i valori primitivi hanno oggetti equivalenti che avvolgono i valori primitivi:

+ + + +

Il methodo wrapper valueOf() ritorna il valore primitivo.

+ +

Per saperne di più

+ +

Conoscenza generale

+ + diff --git a/files/it/glossary/protocollo/index.html b/files/it/glossary/protocollo/index.html new file mode 100644 index 0000000000..d764b42322 --- /dev/null +++ b/files/it/glossary/protocollo/index.html @@ -0,0 +1,27 @@ +--- +title: protocollo +slug: Glossary/Protocollo +tags: + - Glossário + - Infrastruttura + - Protocolli +translation_of: Glossary/Protocol +--- +

Un protocollo è un sistema di regole che stabilisce come vengono scambiati i dati fra computer diversi o all’interno dello stesso computer. Per comunicare tra loro, i dispositivi devono scambiarsi i dati in un formato comune. L’insieme delle regole che definisce un formato si chiama protocollo.

+ +

Vedi altro

+ +

Conoscenze generali

+ + + +

Vedi anche

+ + diff --git a/files/it/glossary/reflow/index.html b/files/it/glossary/reflow/index.html new file mode 100644 index 0000000000..9f62c24c8b --- /dev/null +++ b/files/it/glossary/reflow/index.html @@ -0,0 +1,12 @@ +--- +title: Reflow +slug: Glossary/Reflow +translation_of: Glossary/Reflow +--- +

Il Reflow avviene quando un {{glossary("browser")}} deve processare e ridesignare (posizionie geometrie) una pagina web o una sua parte, come dopo un aggiornamento dinamico della pagina in un sito interattivo.

+ +

Vedi anche

+ + diff --git a/files/it/glossary/rest/index.html b/files/it/glossary/rest/index.html new file mode 100644 index 0000000000..9c6a8f9100 --- /dev/null +++ b/files/it/glossary/rest/index.html @@ -0,0 +1,33 @@ +--- +title: REST +slug: Glossary/REST +tags: + - Architettura + - Funzionamento del web + - Glossário + - HTTP + - Principiante + - Rest +translation_of: Glossary/REST +--- +

Il Representational State Transfer (REST) si riferisce a un insieme di vincoli nell'architettura del software che permettono ai sistemi di essere efficienti, affidabili e scalabili. Un sistema è definito “RESTful” quando rispetta questi vincoli.

+ +

L'idea di base di REST è trasferire una risorsa, ad esempio un documento, insieme al suo stato e ai suoi collegamenti ipertestuali (hypertext) tramite operazioni standard e in formati ben definiti. Spesso le {{Glossary("API","API")}} o servizi differenti vengono chiamati RESTful quando modificano direttamente un documento, invece di attivare azioni altrove.

+ +

Dato che l’{{Glossary("HTTP")}}, il protocollo standard alla base del {{glossary("World Wide Web","Web")}}, trasferisce documenti e link ipertestuali, API e HTTP sono a volte definiti colloquialmente “RESTful API”, “RESTful service” o più semplicemente “REST service”, anche se non rispettano totalmente i vincoli REST. I principianti possono concepire una REST API come un servizio HTTP che può essere chiamato usando librerie e strumenti web.

+ +

Approfondimenti

+ +

Risorse di apprendimento

+ + + +

Conoscenze generali

+ + diff --git a/files/it/glossary/serialization/index.html b/files/it/glossary/serialization/index.html new file mode 100644 index 0000000000..f710d23439 --- /dev/null +++ b/files/it/glossary/serialization/index.html @@ -0,0 +1,22 @@ +--- +title: Serializzazione +slug: Glossary/Serialization +tags: + - Glossário + - JavaScript + - Serializzazione +translation_of: Glossary/Serialization +--- +

Il processo mediante il quale un oggetto o una struttura di dati viene tradotto in un formato adatto per il trasferimento su una rete, o archiviazione (ad esempio in un buffer di matrice o in un formato di file).

+ +

In {{Glossary("JavaScript")}}, ad esempio, puoi serializzare un oggetto su {{Glossary("JSON")}} {{Glossary("string")}} chiamando il {{Glossary("function")}} {{jsxref("JSON.stringify()")}}.

+ +

{{Glossary("CSS")}} sono serializzati chiamando la funzione {{domxref("CSSStyleDeclaration.getPropertyValue()")}}.

+ +

Per saperne di più

+ +

Conoscenza generale

+ + diff --git a/files/it/glossary/undefined/index.html b/files/it/glossary/undefined/index.html new file mode 100644 index 0000000000..dd33699e99 --- /dev/null +++ b/files/it/glossary/undefined/index.html @@ -0,0 +1,12 @@ +--- +title: undefined +slug: Glossary/undefined +translation_of: Glossary/undefined +--- +

Un valore {{Glossary("primitive", "primitivo")}} assegnato automaticamente alle variabili che sono appena state dichiarate o ai {{Glossary("Argument","parametri")}} delle funzioni per i quali non è stato passato nessun valore.

+ +

Di più

+ + diff --git a/files/it/glossary/world_wide_web/index.html b/files/it/glossary/world_wide_web/index.html new file mode 100644 index 0000000000..f3e7e4c64a --- /dev/null +++ b/files/it/glossary/world_wide_web/index.html @@ -0,0 +1,42 @@ +--- +title: World Wide Web +slug: Glossary/World_Wide_Web +tags: + - Glossário + - HTTP + - Infrastrutture + - WWW + - World Wide Web +translation_of: Glossary/World_Wide_Web +--- +

Il World Wide Web — comunemente indicato come WWW, W3, o il Web — è un sistema interconnesso di pagine pubbliche accessibili tramite l'{{Glossary("Internet")}}. Il Web non è la stessa cosa dell'Internet: il Web è una delle tante applicazioni costruite sulla cima dell'Internet.

+ +

Tim Berners-Lee propose l'architettura che divenne nota come World Wide Web. Lui ha creato il primo web {{Glossary("Server","server")}}, il primo web {{Glossary("Browser","browser")}}, e la prima pagina web sul suo computer al laboratorio di ricerca del CERN nel 1990. Nel 1991, sempre Tim Berners-Lee, ha annunciato la sua creazione sul newsgroup di alt.hypertext, segnando il momento in cui il Web è stato reso pubblico per la prima volta.

+ +

Il sistema che conosciamo al giorno d'oggi come "il Web" consiste in vari componenti fra cui:

+ + + +

Il collegamento o la connessione di risorse utilizzando gli {{Glossary("Hyperlink","hyperlink")}} è un concetto definito dal Web per facilitare la sua visione come una collezione di documenti connessi fra di loro.

+ +

Poco dopo aver inventato il Web, Tim Berners-Lee ha fondato il {{Glossary("W3C")}} (World Wide Web Consortium) per standardizzare e sviluppare il Web ulteriormente. Questo consorzio è costituito da gruppi interessati al Web, come sviluppatori di web browser, entità governative, ricercatori e universitari. La missione di tale consorzio consiste nell'educazione e nella sensibilizzazione riguardo lo sviluppo Web.

+ +

Vedi altro

+ +

Informazioni a riguardo

+ + + +

Conoscenza generale

+ + diff --git a/files/it/il_modulo_xml_extras/index.html b/files/it/il_modulo_xml_extras/index.html new file mode 100644 index 0000000000..3a36298935 --- /dev/null +++ b/files/it/il_modulo_xml_extras/index.html @@ -0,0 +1,116 @@ +--- +title: Il modulo XML Extras +slug: Il_modulo_XML_Extras +tags: + - Tutte_le_categorie + - XML +translation_of: Mozilla/Tech/XML_Extras +--- +

 

+

Il modulo XML Extras contiene diverse funzionalità che permettono agli sviluppatori di trattare un documento XML come un insieme di dati e non semplicemente come un documento di qualsiasi altro tipo. Il modulo è strutturato come componente incorporato e rende disponibili le sue caratteristiche sia tramite JavaScript, sia tramite C++/XPCOM. Il modulo è compilato per default su tutte le piattaforme ed è incluso ance dagli installer, in modo che sia disponibile anche con le nightly builds.

+

Stato delle funzionalità

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàStato
XMLSerializerDisponibile
XMLHttpRequestDisponibile
DOMParser (string and stream input source)Disponibile
Web Services con SOAP e WSDLDisponibile a partire da 1.4alpha. Spostato nel modulo Web Services a partire da 1.4beta.
XML Persistence 
FIXptr e XPointerDisponibile da 1.4alpha nel cuore di Mozilla. Spostato nel modulo XMLExtras a partire da 1.4beta.
+

Vedere anche:

+ +

QA and Testing

+

There are some online tests for mainly exercising the HTTP GET method via XMLHttpRequest.

+

Other test cases for each of the implemented components listed above exist in {{ Source("extensions/xmlextras/tests/") }}. More exhaustive test suites need to be created, however. If you'd like to help out with QA, you can do one of the following:

+ +

Documentation

+

Probably the best way to learn how to use these technologies is through examples. There are some in {{ Source("extensions/xmlextras/tests/") }}. If you follow that link to look at the examples you will need to look at page source for the HTML documents.

+

For XMLHttpRequest object you can mostly rely on the Microsoft XMLHttpRequest documentation, with some caveats: all functions and property names begin with a lower case letter and the object creation is different. Some properties are not implemented.

+

Thad Hoffman has written a document that shows how you can mimic XML Data Islands in Mozilla. Edmond Woychowsky has also written articles on XML Data Islands in Mozilla: "Make XML data islands work in Mozilla", "Build cross-browser XML paging code" and "Implement a flexible shopping cart with XML and ASP". The Mozilla Developer Center has several pages for XMLHttpRequest.

+

Below are some key differencies in "XML Extras" between Mozilla and Microsoft software:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DifferenceMicrosoftMozilla
Member namesCase insensitive?Begins with lower case letter
XMLHttpRequest Creationnew ActiveXObject("Msxml2.XMLHTTP")new XMLHttpRequest()
XMLHttpRequest.send("some string")okok starting with milestone 0.9.7 (actually nightly 2001-11-28). With older builds, passing strings to send() works only in chrome, see {{ Source("extensions/xmlextras/tests/post.html", "post.html") }} sample. The "workaround" is to use DOMParser object's parseFromString() method to create a document from string, and pass the temporary document into send().
XMLHttpRequest.open("aHost")ok<tt>file://</tt> documents can access <tt>http://</tt> documents but you need to enable UniversalBrowserRead privilege in your scripts - see the JavaScript Security: Signed Scripts document for more details. Normally your files should reside on a webserver so this shouldn't pose a problem (there you do not need that line either). Additionally, "foo.com:80" and "foo.com:313" are considered different hosts for security purposes. You cannot open a connection to a different host.
DOMParser Creationnot availablenew DOMParser()
XMLSerializer Creationnot availablenew XMLSerializer()
+

Minimal documentation for the components listed above can be found using Mozilla documentation generated by Doxygen. File new bugs for additional documentation contributions, either specifically aimed at JavaScript developers or to complete & clarify the JavaDoc-style comments in the IDL files.

+ +

Please see the XML Linking and Pointing section in XML in Mozilla document for FIXptr and XPointer documentation.

+

How can I help?

+ +

{{ languages( { "fr": "fr/XML_Extras" } ) }}

diff --git a/files/it/impacchettare_l'estensione/index.html b/files/it/impacchettare_l'estensione/index.html new file mode 100644 index 0000000000..4646e4365c --- /dev/null +++ b/files/it/impacchettare_l'estensione/index.html @@ -0,0 +1,29 @@ +--- +title: Impacchettare l'Estensione +slug: Impacchettare_l'Estensione +tags: + - Estensioni + - Toolkit API + - Tutte_le_categorie +translation_of: Archive/Add-ons/Extension_Packaging +--- +

Le estensioni sono una forma di pacchetti installabili che possono essere scaricati e installati dall'utente, o forniti pre-impacchettati insieme all'applicazione o ad un programma esterno. Le estensioni utilizzano una struttura della directory che può essere fornita di chrome, componenti, ed altri file per estendere le funzionalità di un programma XUL.

+

Ogni estensione deve essere fornita di un file install.rdf che contiene i metadati sull'estensione, come le informazioni sul suo ID univoco, sulla versione, sull'autore e sulla compatibilità.

+

Dopo che i file dell'estensione e install.rdf sono pronti, ci sono molti modi di preparare l'estensione per l'installazione: comprimere il contenuto della directory dell'estensione in un file XPI installabile dall'utente, decomprimere direttamente l'estensione nell'applicazione o nella cartella del profilo dell'utente, o registrarla nel registro di Windows.

+

Realizzare un XPI di un'estensione

+

Un file XPI (XPInstall) è semplicemente un file (ZIP) compresso che contiene i file dell'estensione, ed il file install.rdf nella root dell'archivio. Gli utenti possono scaricare i file XPI ed installarli sia da un sito web che da un file in locale, aprendo il file o trascinandolo nella finestra delle Estensioni.

+

Il tipo MIME riconosciuto da Firefox per i file XPI è application/x-xpinstall. Poichè molti server non sono normalmente configurati per restituire questi tipo MIME per l'estensione .xpi, sarà probablimente necessario configurare il proprio server. Nei server Apache HTTP, questa operazione può essere effettuata aggiungendo la seguente istruzione al file di configurazione o .htaccess:

+ +
AddType application/x-xpinstall .xpi
+
+ +

Installare i file dell'estensione direttamente

+

Se si conosce l'ubicazione dell'applicazione (se si sta installando l'estensione come parte dell'installer dell'applicazione, ad esempio) è possibile installare i file dell'estensione direttamente in <appdir>/extensions/<extensionID>. L'estensione sarà trovata automaticamente dal programma di gestione delle estensioni al successivo riavvio dell'applicazione.

+

Quando si usa questo metodo, bisogna verificare che i permessi del file system per le directory ed i file sia settati opportunamente. In caso contrario il programma di gestione delle estensioni potrebbe non funzionare correttamente con l'estensione, o l'estensione stessa potrebbe non funzionare a dovere.

+

Registrare l'ubicazione di un'estensione utilizzando il Registro di Windows

+

I programmi di installazione esterni (come Java runtime) potrebbero volere installare punti di integrazione dell'applicazione così come dell'estensione anche se l'applicazione non è ancora installata. Questo su Windows può essere fatto utilizzando il Registro.

+

XPI di estensioni contenenti più elementi

+

In alcuni casi un singolo file XPI potrebbe voler installare più estensioni/temi. Un tipo speciale di XPI di estensioni chiamata Pacchetto multi-elementi spiega come creare questo tipo di pacchetti. (è richiesto Firefox 1.5/XULRunner 1.8.)

+ +

Official References for Toolkit API

+
{{page("/it/docs/Toolkit_API/Official_References")}}
diff --git a/files/it/incorporare_mozilla/index.html b/files/it/incorporare_mozilla/index.html new file mode 100644 index 0000000000..886b462dc7 --- /dev/null +++ b/files/it/incorporare_mozilla/index.html @@ -0,0 +1,7 @@ +--- +title: Incorporare Mozilla +slug: Incorporare_Mozilla +translation_of: Mozilla/Gecko/Embedding_Mozilla +--- +
+ Gecko consente agli sviluppatori di terze parti di utilizzare la stessa tecnologia come si trova in Mozilla. Ciò significa che è possibile incorporare un browser web all'interno di una applicazione di terze parti, aprire canali e flussi attraverso la rete di back-end, attraverso il DOM, e così via. Si può anche costruire insieme nuove applicazioni che utilizzano Chrome.
diff --git a/files/it/indentazione_corretta_delle_liste/index.html b/files/it/indentazione_corretta_delle_liste/index.html new file mode 100644 index 0000000000..0825377b03 --- /dev/null +++ b/files/it/indentazione_corretta_delle_liste/index.html @@ -0,0 +1,106 @@ +--- +title: Indentazione corretta delle liste +slug: Indentazione_corretta_delle_liste +tags: + - CSS + - Tutte_le_categorie +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +--- +

 

+ +

Summary: Trying to change the indentation of lists with CSS is trickier than it looks, but only because CSS-conformant browsers took different paths to default indentation. Find out how to get them all in line.

+ +

Una delle più frequenti modifiche allo stile delle liste, è la distanza di indentazione, cioè la distanza alla quale i vari punti sono spostati rispetto al bordo. Questa modifica è spesso causa di frustrazione, perchè ciò che funziona in un browser spesso non ha lo stesso effetto in un altro. Per esempio se si dichiarano liste senza margine sinistro, in Explorer si osserva uno spostamento, mentre nei browser basati su Gecko nessuno.

+ +

Per compredere questo fenomeno, e sorpattutto come evitare il problema, è necessario esaminare in dettaglio come sono costruite le liste.

+ +

Costruire una lista

+ +

Prima di tutto, si consideri un singolo elemento di una lista, senza marcatore (tipicamente il "puntino" che lo precede), che non è ancora parte della lista stessa. Fluttua da solo nel vuoto, senza nessun attributo, come mostrato in Figura 1.

+ +

Figure 1

+ +

Il bordo punteggiato rosso rappresenta i limiti esterni dell'area dei contenuti dell'elemento della lista. Si ricordi che, in questo momento, l'elemento della lista non ha ne' bordi ne' rientri (padding). Se si aggiungono due altri elementi alla lista, si ottiene il risultato di Figura 2. add two more list items, we get a result like that shown in Figure 2.

+ +

Figure 2

+ +

Adesso inseriamo questi elementi nell'elemento padre; per questo esempiop useremo una lista non ordinata (cioè <ul>). Secondo il modello a scatole dei CSS (CSS box model), l'area occupata da ciascun elemento della lista, deve essere visualizzata all'interno dell'area dei contenuti dell'elemento padre. E poichè l'elemento padre non ha ancora ne' bordi ne' rientri, si ottiene il risultato di Figura 3.

+ +

Figure 3

+ +

Il bordo punteggiato blu mostra i bordi dell'area dei contenuti dell'elemento <ul>, che non avendo rientri finisce per avvolgere i tre elementi della lista senza lasciare spazi.

+ +

Adesso aggiungiamo i marcatori degli elementi, che nel caso di una lista non ordinata sono tipicamente dei "puntini" circolari, come mostrato in Figura 4.

+ +

Figure 4

+ +

Visivamente i marcatori sono all'esterno dell'area dei contenuti di <ul>, ma questo non è molto importante. Il punto chiave è che i marcatori sono all'esterno del riquadro principale degli elementi <li>, non di <ul>. Sono da considerare una sorta di appendici agli elementi della lista, appese all'esterno dell'area degli elementi <li>, ma ad essi collegate.

+ +

Questa è la ragione per cui, in ogni browser eccetto Internet Explorer, i marcatori sono posizionati all'esterno del bordo eventualmente impostato per gli elementi <li>. Si assume che il valore di list-style-position sia outside, perchè se viene cambiato in inside, i marcatori sono spostati all'interno dei riquadri degli elementi <li>, proprio come se fossero la primissima parte del loro contenuto.

+ +

Indentare due volte

+ +

Quindi come appare tutto ciò in un documento? Al momento, si ha una situazione analoga a questi stili:

+ +
ul, li {margin-left: 0; padding-left: 0;}
+ +

Se avessimo messo questa lista così come è, in un documento, non ci sarebbe stato nessuna apparente indentazione ed i marcatori sarebbero probabilmente finiti all'esterno del bordo sinistro del browser. Per evitare tutto ciò ed avere l'indentazione, ci sono solamente tre opzioni disponibili per gli sviluppatori.

+ +
    +
  1. Dare a ciascun elemento <li> un margine sinistro.
    2. +
  2. Dare all'elemento <ul> un margine sinistro.
    3. +
  3. Dare all'elemento <ul> un rientro (padding) sinistro.
    4. +
+ +

Di fatto nessuno sembra aver usato la prima opzione. La seconda opzione è stata utilizzata da Internet Explorer e da Opera. La terza è stata adottata da Gecko e da tutti i browser basati su tale motore.

+ +

Concentriamoci sulle due opzioni usate. In Internet Explorer e Opera, le liste sono indentate imponendo un margine sinistro di 40 pixel sull'elemento <ul>. Se si applica un colore di sfondo a <ul> lasciando inalterati i bordi, si ottiene il risultato di Figura 5.

+ +

Figure 5

+ +

Gecko da parte sua impone un rientro (padding) di 40 pixel per l'elemento <ul>, per cui visualizzando la lista con lo stesso identico stile usato per la precedente figura, si ottiene il risultato di Figura 6.

+ +

Figure 6

+ +

Come è possibile notare, i marcatori rimangono attaccati agli elementi <li>, ovunque essi siano. La differenza è interamente nello stile di <ul>, per cui è possibile notare le differenze solo con un colore di sfondo per <ul>.

+ +

Trovare la consistenza

+ +

Tirando le fila di quanto detto: se si desidera una visualizzazione omogenea e consistente delle liste su Gecko, Internet Explore e Opera, occorre impostare a entrambi i margini ed i rientri sinistri degli elementi <ul>. Possiamo invece ignorare gli elementi <li>. Se si desidera riprodurre la visualizzazione di default in Netscape 6.x, occorre scrivere:

+ +
ul {margin-left: 0; padding-left: 40px;}
+ +

Se invece siamo interessati a seguire ilmodello di Explorer/Opera:

+ +
ul {margin-left: 40px; padding-left: 0;}
+ +

Ovviamente, è possibile modifcare i valori utilizzati secondo le proprie necessità, anche in unità di misura diverse dal pixel, come 1.25em. Se invece si desidera non avere nessuna indentazione, occorre impostare a zero margine e rientro:

+ +
ul {margin-left: 0; padding-left: 0;}
+ +

Si ricordi comunque, che facendo così si hanno i "puntini" appesi all'esterno della lista e del relativo elemento padre, per cui se l'elemento padre è il body, è molto probabile che i "puntini" finiscano all'esterno della finestra del browser, quindi non visibili.

+ +

Conclusione

+ +

In conclusione, nessuno dei browser mezionati in questo articolo fa la cosa giusta o quella sbagliata su come disegnano le liste. Utilizzano stili differenti, ed è questo che crea problemi. Tuttavia assicurandosi di impostare sia margine che rientro sinistro delle liste, si ottiene un risultato di indentazione delle liste quanto più possibile omogeneo tra i vari browser.

+ +

Raccomandazioni

+ + + +

 

+ +
+

Original Document Information

+ + +
+ +

{{ languages( { "fr": "fr/Indentation_homog\u00e8ne_des_listes" } ) }}

diff --git a/files/it/installare_plugin_di_ricerca_dalle_pagine_web/index.html b/files/it/installare_plugin_di_ricerca_dalle_pagine_web/index.html new file mode 100644 index 0000000000..7ccde7c991 --- /dev/null +++ b/files/it/installare_plugin_di_ricerca_dalle_pagine_web/index.html @@ -0,0 +1,33 @@ +--- +title: Installare plugin di ricerca dalle pagine web +slug: Installare_plugin_di_ricerca_dalle_pagine_web +tags: + - Plugin_di_ricerca +translation_of: Web/OpenSearch +--- +

Firefox permette di installare dei plugin di ricerca tramite JavaScript e supporta tre formati per questi plugin: MozSearch, OpenSearch e Sherlock. +

Quando il codice JavaScript tenta di installare un plugin, Firefox propone un messaggio di allerta che chiede all'utente il permesso di installare il plugin. +

+

Installare plugin in MozSearch o OpenSearch

+

Per installare plugin in MozSearch o OpenSearch, occorre il metodo DOM window.external.AddSearchProvider(). La sintassi è la seguente: +

+
window.external.AddSearchProvider(URL_del_plugin);
+
+

URL_del_plugin è l'URL del file XML o del plugin. +

+
Nota: il supporto per MozSearch e OpenSearch è disponibile solo in Firefox 2 e successivi.
+

Per ulteriori dettagli su MozSearch, vedi Creating MozSearch plugins. +

+

Installare plugin in Sherlock

+

Per installare un plugin in Sherlock, occorre chiamare window.sidebar.addSearchEngine(), la cui sintassi è la seguente: +

+
window.sidebar.addSearchEngine(URL_del_plugin, icona_del_plugin, nome_suggerito, categoria_suggerita);
+
+ +

Per ulteriori informazioni su Sherlock: +http://developer.apple.com/macosx/sherlock/ +

{{ languages( { "en": "en/Adding_search_engines_from_web_pages", "ja": "ja/Adding_search_engines_from_web_pages" } ) }} diff --git a/files/it/introduzione_a_svg_dentro_xhtml/index.html b/files/it/introduzione_a_svg_dentro_xhtml/index.html new file mode 100644 index 0000000000..b277a2fc86 --- /dev/null +++ b/files/it/introduzione_a_svg_dentro_xhtml/index.html @@ -0,0 +1,50 @@ +--- +title: Introduzione a SVG dentro XHTML +slug: Introduzione_a_SVG_dentro_XHTML +translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +--- +

 

+

Panoramica

+

Questo articolo e l'esempio allegato mostrano come utilizzare SVG per inserire un'immagine di sfondo in un form. Mostra come JavaScript e i CSS possano essere utilizzati per manipolare l'immagine allo stesso modo in cui manipolano un normale elemento XHTML. Si noti che l'esempio funziona sui browser che supportano XHTML (non solo HTML) e l'integrazione di SVG.

+

Ecco il codice dell' esempio:

+
<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>XTech SVG Demo</title>
+  <style>
+    stop.begin { stop-color:yellow; }
+    stop.end { stop-color:green; }
+    body.invalid stop.end { stop-color:red; }
+    #err { display:none; }
+    body.invalid #err { display:inline; }
+  </style>
+  <script>
+    function signalError() {
+      document.getElementById('body').setAttribute("class", "invalid");
+    }
+  </script>
+</head>
+<body id="body"
+   style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
+  <form>
+     <fieldset>
+       <legend>HTML Form</legend>
+       <p><label>Enter something:</label>
+          <input type="text"/>
+          <span id="err">Incorrect value!</span></p>
+       <p><button onclick="signalError();">Activate!</button></p>
+     </fieldset>
+  </form>
+  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
+    <linearGradient id="gradient">
+      <stop class="begin" offset="0%"/>
+      <stop class="end" offset="100%"/>
+    </linearGradient>
+    <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
+    <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
+  </svg>
+</body>
+</html>
+

Spiegazione

+

Questa pagina è principalmente normale XHTML, CSS e JavaScript. L'unica parte interessante è l'elemento <svg>. Questo elemento e i suoi figli sono dichiarati nel namespace di SVG.

diff --git a/files/it/le_colonne_nei_css3/index.html b/files/it/le_colonne_nei_css3/index.html new file mode 100644 index 0000000000..7b92b713a0 --- /dev/null +++ b/files/it/le_colonne_nei_css3/index.html @@ -0,0 +1,67 @@ +--- +title: Le Colonne nei CSS3 +slug: Le_Colonne_nei_CSS3 +tags: + - CSS + - CSS_3 + - Tutte_le_categorie +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +

+

+

Introduzione

+

Testi con righe troppo lunghe non sono facilmente leggibili; se ci vuole troppo tempo per muovere l'occhio dalla fine di una riga all'inizio della successiva, si tende a perdere traccia della linea corrente. Perciò, per ottimizzare l'utilizzo di schermi particolarmente larghi, gli autori devono affidarsi a colonne di testo multiple, posizionate l'una accanto all'altra, come nei quotidiani. Sfortunatamente questo è impossibile da gestire con CSS e HTML, senza imporre a priori la fine di una colonna, restringere pesantemente i marcatori utilizzabili o usare script particolarmente complicati. +

Una specifica CSS3 preliminare suggerisce l'utilizzo di alcune nuove proprietà CSS per implementare questa funzionalità. Da Firefox 1.5 sono state implementate alcune di queste proprietà, in modo da ottenere il comportamento descritto nella bozza preliminare (con una eccezione descritta sotto). +

Il blog di Robert O'Callahan utilizza le colonne CSS; provatele con Firefox 1.5 o successivi. +

+

Usare le colonne

+

Numero di colonne e Larghezza

+

Due sono le proprietà CSS che controllano se devono essere utilizzate le colonne e quante: -moz-column-count and -moz-column-width. +

-moz-column-count imposta il numero di colonne. Per esempio, +

+
<div style="-moz-column-count:2">In preparation for the release of Mozilla
+Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
+Daylight Time (UTC -0700). After this point, no more checkins will be accepted
+for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
+
+

Mostrerà il contenuto in due colonne (se state usando Firefox 1.5 o successivi): +

+
In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.
+

-moz-column-width imposta la larghezza minima della colonna. Se -moz-column-count non viene impostato, il browser cercherà di posizionare quante più colonne possibili nella larghezza disponibile. +

+
<div style="-moz-column-width:20em;">In preparation for the release of Mozilla
+Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
+Daylight Time (UTC -0700). After this point, no more checkins will be accepted
+for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
+
+

diventa: +

+
In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.
+

Maggiori dettagli sono descritti nella Bozza preliminare CSS3. +

In un blocco multi-colonna, il contenuto viene automaticamente fatto scorrere da una colonna in quella successiva secondo quanto necessario. Tutte le funzionalità HTML, CSS e DOM, come la modifica e la stampa, sono supportate dalla modalità a colonne. +

+

Bilanciamento dell'altezza

+

La bozza preliminare CSS3 specifica che l'altezza delle colonne deve essere bilanciata: cioè, il browser imposterà automaticamente la massima altezza delle colonne, tale che il contenuto in ogni colonna abbia altezza approssimativamente uguale. Firefox lo fa. +

Tuttavia, in alcune situazione può essere utile impostare esplicitamente la massima altezza delle colonne, e quindi riempire tante colonne quante sono necessarie, partendo dalla prima e andando verso destra. Per esempio, gli articoli su http://iht.com/ lo fanno (però usando uno script). Quindi si estende la specifica preliminare in modo che, se la proprietà CSS height è impostata per un blocco multicolonna, ad ogni colonna sarà permesso di crescere al massimo sino a quel valore di altezza, dopo di che una nuova colonna dovrà essere aggiunta. Questo metodo risulta anche molto più efficiente nel definire il layout. +

+

Distanza tra colonne

+

Normalmente ciascuna colonna è adiacente all'altra, ma di solito il risultato non è ottimale. E' possibile utilizzare la proprietà CSS padding tra le colonne per migliorare il risultato finale, oppure più semplicemente basta utilizzare la proprietà -moz-column-gap con il bloccomulticolonna: +

+
<div style="-moz-column-width:20em; -moz-column-gap:2em;">In preparation for
+the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight
+at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins
+will be accepted for Firefox 1.5 Beta 1, which is set for release on
+Thursday.</div>
+
+
In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.
+

Degradazione

+

Le proprietà -moz-column saranno semplicemente ignorate da browser che non supportano le colonne. Perciò è relativamente semplice creare un layout che mostri una singola colonna nei browser che non supportano questa funzionalità e che risulti invece multicolonna su Firefox 1.5 e successivi. +

+

Conclusione

+

Le colonne in CSS3 sono una nuova primitiva di layout che aiuterà gli sviluppatori Web a fare un uso migliore dello spazio sullo schermo. Gli sviluppatori più creativi troveranno molti modi di usarli, specialmente con la caratteristica di bilanciamento dell'altezza. +


+

+

Riferimenti Addizionali

+ +{{ languages( { "en": "en/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }} diff --git a/files/it/le_preferenze_utente_e_xforms/index.html b/files/it/le_preferenze_utente_e_xforms/index.html new file mode 100644 index 0000000000..3d5ada87de --- /dev/null +++ b/files/it/le_preferenze_utente_e_xforms/index.html @@ -0,0 +1,26 @@ +--- +title: Le preferenze utente e XForms +slug: Le_preferenze_utente_e_XForms +tags: + - Tutte_le_categorie + - XForms +translation_of: Archive/Web/XForms/User_preferences +--- +

Una descrizione delle preferenze utente di Firefox correlate a XForms. Per accedere a queste ed altre opzioni, digitare about:config nella barra degli indirizzi. +

+ + + + + +
Preferenza +Valore predefinito +Descrizione +
xforms.disablePopup +false +Abilita o disabilita i messaggi di errore di XForms +
xforms.enableExperimentalFeatures +false +Abilita o disabilita le funzionalità sperimentali. Allo stato attuale, l'unica funzionalità sperimentale è la SOAP Action di XForms 1.1. +
+{{ languages( { "fr": "fr/XForms/Pr\u00e9f\u00e9rences_utilisateur", "en": "en/XForms/User_preferences", "ja": "ja/XForms/User_preferences" } ) }} diff --git "a/files/it/learn/accessibilit\303\240/accessibilit\303\240_dispositivi_mobili/index.html" "b/files/it/learn/accessibilit\303\240/accessibilit\303\240_dispositivi_mobili/index.html" new file mode 100644 index 0000000000..46a2b24c4d --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/accessibilit\303\240_dispositivi_mobili/index.html" @@ -0,0 +1,336 @@ +--- +title: Accessibilità per dispositivi mobili +slug: Learn/Accessibilità/Accessibilità_dispositivi_mobili +tags: + - Accessibilità + - Articolo + - Mobile + - Principiante + - Responsivo + - Touchscreen + - imparare + - screenreader + - touch +translation_of: Learn/Accessibility/Mobile +--- +
+
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibilità")}}
+ +

L’uso di internet tramite dispositivi mobili è sempre più diffuso, e i sistemi operativi per dispositivi mobili più popolari, Android e iOS, sono dotati di strumenti nativi per l’accessibilità. È dunque importante prendere in considerazione l’accessibilità dei tuoi contenuti su tali piattaforme. Questo articolo tratta specificamente dell’accessibilità per dispositivi mobili.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i precedenti articoli del corso.
Obiettivo:Comprendere i problemi di accessibilità relativi ai dispositivi mobili, e come risolverli.
+ +

Accessibilità per dispositivi mobili

+ +

Lo stato attuale dell’accessibilità, e del supporto degli standard web in generale, è buono nei dispositivi mobili moderni. Sono lontani i giorni in cui i dispositivi mobili utilizzavano tecnologie web completamente differenti dai browser per pc, obbligando gli sviluppatori a fornire siti completamente separati per le due piattaforme (anche se comunque molte aziende continuano a fornire un sito specifico per dispositivi mobili, di solito contenente la parola “mobile” nel dominio).

+ +

 

+ +

Oggigiorno, in generale, i dispositivi mobili non hanno problemi a visualizzare correttamente tutti i tipi di siti, e i principali sistemi operativi mobili hanno lettori di schermo nativi. I browser moderni per dispositivi mobili hanno anche un buon supporto per WAI-ARIA.

+ +

Per rendere un sito accessibile e usabile su dispositivi mobili devi solo rispettare le buone pratiche generali di disegno e accessibilità web.

+ +

 

+ +

Ci sono però alcune eccezioni che richiedono una attenzione particolare; le principali sono:

+ + + +

Riassunto dei test sui lettori di schermo per  Android e iOS

+ +

I più comuni sistemi operativi per dispositivi mobili hanno installati lettori di schermo nativi pienamente funzionanti. Questi funzionano praticamente alla stessa maniera dei lettori di schermo per pc, ma si usano con gesti touch invece che con combinazioni di tasti.

+ +

Prendiamo in considerazione i due principali lettori di schermo per dispositivi mobili: TalkBack per Android e VoiceOver per iOS.

+ +

Android TalkBack

+ +

 

+ +

TalkBack è il lettore di schermo presente di default su Android.

+ +

Per attivarlo, selezionaImpostazioni > Accessibilità > TalkBack, e premi lo switch di attivazione/disattivazione. Inoltre segui qualsiasi altra indicazione che il sistema ti fornisca.

+ +

Nota: versioni anteriori di TalkBack si attivano con metodi leggermente differenti.

+ +

Quando TalkBack è attivato, i controlli basici del tuo dispositivo Android presenteranno alcune differenze rispetto alla modalità normale. Per esempio:

+ +

 

+ +
    +
  1. Fare click sull’icona di una app la selezionerà senza aprirla, e il lettore pronuncerà il nome della app.
    2. +
  2. Fare swipe a destra o a sinistra farà selezionare un’altra app, oppure, se stai navigando un menu, un altro bottone/controllo. Il dispositivo leggerà ogni opzione man mano che le selezioni.
    3. +
  3. Fare doppio click aprirà la app selezionata o attiverà/disattiverà la opzione selezionata.
    4. +
  4. Puoi anche “esplorare col dito“: mantieni premuto il dito sullo schermo e fallo scorrere lungo la superficie dello stesso. Il dispositivo leggerà il nome delle varie app o oggetti su cui passerai il dito.
    5. +
+ +

Se vuoi disattivare TalkBack:

+ +
    +
  1. Naviga alle Impostazioni
    2. +
  2. Naviga a Accessibilità > TalkBack.
    3. +
  3. Naviga allo switch di attivazione/disattivazione e disattivalo.
    4. +
+ +

Nota: puoi navigare alla schermata di inizio in qualsiasi momento facendo swipe in alto e a sinistra lentamente. Se hai più di una schermata di inizio, puoi muoverti da una all’altra facendo swipe con due dita a destra e sinistra.

+ +

Per una lista più completa dei gesti che puoi usare con TalkBack, vedi Utilizzare i gesti TalkBack.

+ +

Sbloccare il telefono

+ +

Quando TalkBack è attivato, la procedura per sbloccare il telefono cambia leggermente.

+ +

Devi fare swipe con due dita dal basso verso l’alto. Se ci sono una password o un codice impostati, sarai reindirizzato allo schermo dove inserirli.

+ +

Puoi anche esplorare con il dito, troverai il bottone di sblocco nel centro della parte bassa dello schermo. Fai doppio click sul bottone per sbloccare lo schermo.

+ + + +

TalkBack ti permette di accedere ai menu contestuali locali e globali del dispositivo da qualunque punto del sistema operativo. I menu globali sono quelli che permettono di accedere ai controlli e alle opzioni generali del dispositivo, mentre i menu locali sono relativi alla applicazione o schermata in cui ti trovi al momento.

+ +

Per accedere ai menu:

+ +
    +
  1. Per accedere al menu globale, fai swipe veloce verso il basso e poi a destra.
    2. +
  2. Per accedere al menu locale, fai swipe veloce verso l’alto e poi a destra.
    3. +
  3. Fai swipe a sinistra o a destra per muoverti da una opzione all’altra.
    4. +
  4. Quando l’opzione che ti interessa è selezionata, fai doppio click per attivarla o disattivarla.
    5. +
+ +

Per maggiori dettagli su tutte le opzioni disponibili nei menu locali e globali, vedi Menu contestuali locali e globali.

+ + + +

Puoi usare il menu contestuale locale del browser per trovare le opzioni per navigare le pagine web usando gli headings, i campi dei formulari, i link, ecc., oppure navigare linea per linea.

+ +

Per esempio, con TalkBack attivato:

+ +
    +
  1. Apri il tuo web browser.
    2. +
  2. Attiva la barra URL.
    3. +
  3. Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL: +
      +
    • Seleziona la barra URL facendo swipe a destra/sinistra fino a trovarla, e poi fai doppio click.
      • +
    • Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per introdurlo. Ripeti il procedimento per ogni carattere.
      • +
    • Quando hai terminato, seleziona il tasto INVIO e premilo.
      • +
    +
    4. +
  4. Fai swipe a sinistra o destra per muoverti tra i differenti oggetti presenti sulla pagina.
    5. +
  5. Fai swipe in alto e a destra per aprire il menu contestuale locale.
    6. +
  6. Fai swipe a destra fino a trovare la opzione "Headings e punti di riferimento".
    7. +
  7. Fai doppio click per selezionarla. Ora puoi fare swipe a destra o sinistra per muoverti tra headings e punti di riferimento ARIA.
    8. +
  8. Per ritornare al modo di default, apri il menu contestuale locale facendo swipe in alto a destra, seleziona l’opzione “Default” e fai doppio click per attivarla.
    9. +
+ +

Nota: Vedi Guida introduttiva a TalkBack su Android per una documentazione più completa.

+ +

iOS VoiceOver

+ +

 

+ +

Una versione di VoiceOver per dispositivi mobili è inclusa in tutti i sistemi operativi iOS.

+ +

Per attivarlo, vai alla tua appImpostazionie selezionaGenerale>Accessibilità>VoiceOver. Premi lo switchVoiceOverper attivarlo (vedrai anche alcune altre opzioni relative a VoiceOver in questa pagina).

+ +

Quando VoiceOver sarà attivato, i controlli basici del sistema saranno leggermente diversi:

+ +

 

+ +
    +
  1. Un click singolo selezionerà l’oggetto su cui premi; il dispositivo pronuncerà il nome dell’oggetto selezionato.
    2. +
  2. Puoi inoltre navigare tra gli oggeti presenti sullo schermo facendo swipe a destra o sinistra per muoverti dall’uno all’altro, o facendo scorrere il dito per lo schermo. Quando troverai l’oggetto che vuoi attivare, rimuovi il dito dallo schermo per selezionarlo.
    3. +
  3. Per attivare l’oggetto dopo averlo selezionato, per esempio se vuoi aprire una applicazione, fai doppio click in qualsiasi punto dello schermo.
    4. +
  4. Fai swipe con tre dita per scorrere attraverso una pagina.
    5. +
  5. Fai click con due dita per eseguire una azione relativa al contesto corrente, come per esempio scattare una foto con la applicazione fotocamera aperta.
    6. +
+ +

Per disattivare VoiceOver, naviga aImpostazioni>Generale>Accessibilità>VoiceOver e premi lo switchVoiceOver.

+ +

Come usare il Rotore

+ +

Quando VoiceOver è attivo, avrai a tua disposizione una funzionalità dei navigazione chiamata Rotore, che ti permette di accedere rapidamente ad alcune opzioni di uso comune. Per usarlo:

+ +

Using the Rotor

+ +

When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:

+ +
    +
  1. Muovi due dita in circolo per lo schermo, come se stessi usando un vecchio telefono a disco. Il dispositivo pronuncerà il nome delle varie opzioni una dopo l’altra man mano che vai muovendo le dita. Puoi andare avanti e indietro mentre il dispositivo passa da un’opzione all’altra ciclicamente.
    2. +
  2. Quando hai trovato l’opzione che ti interessa: +
      +
    • Rimuovi le dita dallo schermo per selezionarla.
      • +
    • Se si tratta di una opzione il cui valore è aumentabile/diminuibile, come per esempio il Volume o la Velocità di Locuzione, puoi fare swipe verso l’alto o verso il basso per aumentare o diminuire il valore dell’opzione selezionata.
      • +
    +
    3. +
+ +

Le opzioni disponibili tramite il Rotore dipendono dal contesto: quando apri il Rotore le opzioni che troverai saranno relative all’applicazione o alla schermata in cui ti trovi (vedi qui sotto per un esempio).

+ + + +

Vediamo come navigare in internet usando VoiceOver:

+ +
    +
  1. Apri il tuo browser.
    2. +
  2. Attiva la barra URL.
    3. +
  3. Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL: +
      +
    • Seleziona la barra URL facendo swipe a destra o a sinistra fino a trovarla, e poi fai doppio click.
      • +
    • Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per selezionarlo. Fai doppio click per introdurlo. Ripeti il procedimento per ogni carattere.
      • +
    • Quando hai terminato, seleziona il tasto INVIO e premilo.
      • +
    +
    4. +
  4. Fai swipe a sinistra e a destra per muoverti tra i differenti oggetti presenti sulla pagina. Fai doppio click su un oggetto per selezionarlo (per esempio, per seguire un link).
    5. +
  5. L’opzione del Rotore selzionata per default è la Velocità di Locuzione; puoi fare swipe in su o in giù per aumentare o diminuire la velocità di locuzione del lettore di schermo.
    6. +
  6. Ora muovi due dita in circolo per lo schermo per aprire il Rotore e far scorrere le sue opzioni. Riportiamo qui alcuni esempi delle opzioni disponibili nel Rotore: +
      +
    • Velocità di locuzione: cambia la velocità di locuzione del dispositivo.
      • +
    • Contenitori: il lettore di schermo si muove per i vari contenitori semantici presenti nella pagina.
      • +
    • Headings: il lettore di schermo si muove per i vari heading presenti nella pagina.
      • +
    • Links: il lettore di schermo si muove per i vari link presenti nella pagina.
      • +
    • Controlli formulario: il lettore di schermo si muove per i vari campi dei formulari presenti nella pagina.
      • +
    • Lingue: cambia la lingua della pagina, se sono disponibili differenti traduzioni.
      • +
    +
    7. +
  7. Seleziona Headings. Ora potrai fare swipe in su e in giù per muoverti da un heading all’altro della pagina.
    8. +
+ +

Nota: per un riferimento più completo sui gesti disponibili in VoiceOver e altri suggerimenti sul testing dell’accessibilità in iOS, vedi Test Accessibility on Your Device with VoiceOver.

+ +

Meccanismi di controllo

+ +

Nel nostro articolo sull’accessibilità in CSS e JavaScript abbiamo preso in considerazione eventi che sono associati a specifici meccanismi di controllo (vedi eventi specifici del mousedel mouse). Per ricapitolare, tali eventi causano problemi di accessibilità, perchè altri meccanismi di controllo non possono attivare le funzionalità ad essi associate.

+ +

Ad esempio, l’evento click è ottimale in termini di accessibilità: un gestore di eventi associato ad esso può essere attivato cliccando con il mouse sull’elemento su cui l’evento è impostato, oppure selezionandolo tramite tasto TAB e premendo INVIO, oppure facendo click con un dito su un touchscreen. Prova il nostro esempio-di-bottone-semplice.html (vedi la versione live) per capire di cosa parliamo.

+ +

Altri eventi simili, come mousedown e mouseup possono creare problemi, in quanto i loro gestori di eventi non possono essere attivati usando controli alternativi al mouse.

+ +

Se provi a controllare il nostro esempio di simple-box-drag.html (vedi la versione live) tramite tastiera o touchscreen, capirai qual è il problema. Ciò succede perchè stiamo usando un codice come il seguente:

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

Per abilitare altre forme di controllo, devi usare eventi alternativi equivalenti. Per esempio, gli eventi touch sono pensati specificamente per i dispositivi con touchscreen:

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

Presentiamo qui un semplice esempio che mostra come usare gli eventi mouse e touch insieme. Vedi  multi-control-box-drag.html (vedi la versione liveee the example live).

+ +

Nota: puoi vedere esempi di come implementare differenti meccanismi di controllo nell’articolo in inglese  Implementing game control mechanisms.

+ +

Disegno responsivo

+ +

 

+ +

Il disegno responsivo è la pratica di realizzare layout e altre caratteristiche delle applicazioni in una forma che cambia dinamicamente secondo alcuni fattori come le dimensioni dello schermo e la risoluzione dello stesso, di modo che le applicazioni siano usabili e accessibili a utenti che usano differenti tipi di dispositivi.

+ +

In particolare, gli aspetti più comuni del disegno responsivo che si devono prendere in considerazione per i dispositivi mobili sono:

+ +

 

+ + + +

Nota: non forniremo una spiegazione dettagliata delle tecniche di disegno responsivo qui, dato che sono già trattate in altri articoli presenti su questo sito (vedi i link qui sopra).

+ +

Considerazioni specifiche per dispositivi mobili

+ +

Ci sono altri importanti aspetti da prendere in considerazione per ottimizzare l’accessibilità dei siti sui dispositivi mobili. Riportiamo due esempi qui sotto, e in futuro speriamo di riuscire ad aggiungerne altri.

+ +

Non disabilitare lo zoom

+ +

Utilizzando viewport, è possibile disabilitare la funzionalità di zoom, ponendo il seguente codice nella <head>:

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

Non dovresti mai farlo, a meno che sia strettamente necessario. Molte persone infatti usano lo zoom per migliorare la visibilità e leggibilità del contenuto, e privare i tuoi utenti di tale possibilità non è una buona pratica. Ci sono alcune situazioni in cui l’uso dello zoom può effettivamente danneggiare la struttura dell’interfaccia utente; in tali casi, se davvero ritieni necessario disabilitare lo zoom, dovresti fornire una funzionalità equivalente, come per esempio dei controlli per aumentare le dimensioni del testo senza alterare altri elementi dell’interfaccia utente.

+ +

Accessibilità dei menu

+ +

È una pratica molto comune, quando un sito viene visualizzato su un dispositivo con schermo di dimensioni ridotte, usare media queries per ridurre il menu di navigazione a un semplice bottone o una icona, che quando vengono premuti si espandono mostrando gli elementi del menu in forma di menu drop-down, o menu a tendina. Di solito si utilizza una icona con tre linee orizzontali, nota come "menu ad hamburger".

+ +

 

+ +

Quando implementi un menu di questo tipo, devi assicurarti che l’”hamburger” sia accessibile con gli appropriati meccanismi di controllo (normalmente su dispositivo mobile vi si accede tramite touch), come discusso in {{anch("Meccanismi di controllo")}} più sopra, e che il resto della pagina sia nascosto o comunque disabilitato mentre il menu sia attivo, per evitare confusione durante l’utilizzo dello stesso.

+ +

Qui puoi trovare un buon esempio di menu ad hamburger.

+ +

Input dell’utente

+ +

Quando si usano dispositivi mobili, inserire dati è di solito un’esperienza più lenta e tediosa che il suo equivalente su pc o laptop. È molto più facile scrivere con una tastiera normale che con una virtuale o una di dimensioni ridotte.

+ +

Per tale ragione, vale la pena cercare di minimizzare il più possibile la quantità di dati da introdurre manualmente sui dispositivi mobili. Per esempio, se vuoi che gli utenti specifichino qual è il loro lavoro, invece di usare un campo di testo aperto puoi usare un menu a selezione {{htmlelement("select")}} contenente le opzioni più comuni (cosa che tra l’altro aiuta anche a migliorare la consistenza dei dati), e offrire tra le opzioni una categoria “Altro” che, se selezionata, fa comparire un campo di testo dove l’utente può scrivere liberamente per specificare la sua occupazione. Puoi vedere un esempio di questa idea alla pagina tipi-di-lavoro-comuni (vedi la versione live).

+ +

Inoltre, vale la pena prendere in considerazione l’uso di tipi di input HTML5 nativi, come per esempio il tipo “date”, che su dispositivi mobili Androd e iOS vengono gestiti automaticamente da widget nativi integrati all’interfaccia che l’utente è già abituato a usare sul dispositivo. Vedi esempi-formulari-html5.html per alcuni esempi (vedi anche la versione live). Prova a visualizzare e usare questi esempi su un dispositivo mobile.

+ +

 

+ +

Alcuni esempi di tipi di input HTML5 e come appaiono quando sono usati da dispositivo mobile:

+ +

 

+ + + +

Se vuoi fornire una versione della tua applicazione specifica per dispositivi mobili e diversa da quella per pc e laptop, puoi usare una tecnologia di feature detection per rilevare il tipo di dispositivo su cui l’applicazione viene visualizzata. Vedi l’articolo in inglese  input types per maggiori informazioni sui differenti tipi di input, e anche il nostro articolo in inglese sulla feature detection.

+ +

Riassunto

+ +

In questo articolo abbiamo riportato alcuni dettagli sui più comuni problemi di accessibilità su dispositivi mobili, e alcune linee guida su come superarli. Abbiamo inoltre fornito indicazioni sull’uso dei più comuni lettori di schermo per dispositivi mobili, per aiutarti nella realizzazione di test di accessibilità.

+ +

Vedi anche

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

In questo modulo

+ + +
+
diff --git "a/files/it/learn/accessibilit\303\240/accessibilit\303\240_test_risoluzione_problemi/index.html" "b/files/it/learn/accessibilit\303\240/accessibilit\303\240_test_risoluzione_problemi/index.html" new file mode 100644 index 0000000000..8c0e97dab4 --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/accessibilit\303\240_test_risoluzione_problemi/index.html" @@ -0,0 +1,113 @@ +--- +title: 'Test di valutazione: risoluzione di problemi di accessibilità' +slug: Learn/Accessibilità/Accessibilità_test_risoluzione_problemi +tags: + - Accessibilità + - CSS + - HTML + - JavaScript + - Principiante + - Test di valutazione + - WAI-ARIA +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Accessibilità/Accessibilità_dispositivi_mobili", "Learn/Accessibilità")}}
+ +

Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i  precedenti articoli del corso.
Obiettivo:Mettere alla prova la tua preparazione su alcuni aspetti fondamentali dell’accessibilità.
+ +

Punto di partenza

+ +

 

+ +

Come primo passo, dovresti scaricare l’archivio ZIP contenente i file che compongono il sito di esempio. Decomprimi l’archivio in una cartella locale sul tuo computer.

+ +

Il risultato finale del test dovrebbe apparire così:

+ +

 

+ +

+ +

Inizialmente aprendo il sito d’esempio nel tuo browser vedrai che appare diverso in alcuni aspetti dall’immagine del risultato finale. Ciò è dovuto al fatto che il codice sorgente di partenza contiene differenze rispetto a quello a cui vogliamo arrivare, differenze che si riflettono nel modo in cui CSS fa visualizzare il sito. Non ti preoccupare, nelle sezioni seguenti sistemeremo tutti questi problemi.

+ +

Schema del progetto

+ +

Il punto di partenza è un immaginario sito sulla natura che mostra un articolo sugli orsi. Il sito presenta numerosi problemi di accessibilità. Il tuo compito è individuarli e, per quanto possibile, risolverli. Usa le domande riportate qui sotto come guida.

+ +

Colori

+ +

Allo stato attuale il testo è di difficile lettura, a causa dello schema di colori in uso. Puoi effettuare un test del contrasto dei colori (colore del testo/colore di fondo) e sistemare il problema cambiando i colori usati?

+ +

HTML semantico

+ +
    +
  1. Il contenuto continua ad essere poco accessibile. Fai una prova di navigazione con un lettore di schermo.
    2. +
  2. Puoi aggiornare il testo dell’articolo per renderlo più facilmente navigabile tramite lettore di schermo?
    3. +
  3. Il menu di navigazione (racchiuso tra le etichette <div class="nav"> e </div>) potrebbe essere reso più accessibile usando un elemento semantico HTML5 appropriato. Di quale elemento si tratta? Aggiorna il menu usando l’elemento appropriato.
    4. +
+ +
+

Nota: dovrai anche aggiornare i selettori CSS che controllano lo stile del contenitore del menu di navigazione.

+
+ +

Le immagini

+ +

Allo stato attuale le immagini sono inaccessibili agli utenti che usano lettore di schermo. Puoi risolvere questo problema?

+ +

Il lettore audio

+ +
    +
  1. Il lettore <audio> non è accessibile alle persone con disabilità uditiva. Puoi aggiungere una alternativa accessibile a questo tipo di utenti?
    2. +
  2. Il lettore <audio> non è accessibile agli utenti che usano browser che non supportano l’audio HTML5. Cosa puoi fare per permettere anche a questi utenti di accedere al contenuto audio?
    3. +
+ +

I formulari

+ +
    +
  1. Sarebbe utile aggiungere un’etichetta all’elemento <input> della barra di ricerca, ma non vogliamo usare un’etichetta visibile, che potrebbe rovinare il disegno della pagina e non è realmente necessaria agli utenti che vedono. Come puoi aggiungere un’etichetta che sia accessibile solo ai lettori di schermo?
    2. +
  2. I due elementi <input> del formulario di commento hanno etichette testuali, ma queste etichette non sono associate ai loro relativi campi in una forma che si possa definire completamente non ambigua. Come puoi risolvere questa imprecisione? Nota che dovrai aggiornare anche alcune regole CSS.
    3. +
+ +

Il bottone mostra/nascondi commenti

+ +

Il bottone mostra/nascondi commenti non è attualmente accessibile tramite tastiera. Puoi renderlo accessibile da tastiera, rendendolo sia selezionabile tramite tasto TAB che attivabile tramite tasto INVIO?

+ +

La tabella

+ +

La tabella dati non è molto accessibile. Risulta difficile per gli utenti che usano lettore di schermo distinguere file e colonne, e inoltre la tabella non ha associata nessuna forma di didascalia che spieghi chiaramente a cosa fa riferimento. Puoi aggiungere tali funzionalità al codice HTML per risolvere questi problemi?

+ +

Altre considerazioni?

+ +

Puoi indicare due ulteriori idee per rendere il sito più accessibile?

+ +

Valutazione

+ +

Se stai sostenendo questa prova di valutazione come parte di un corso organizzato puoi mandare il tuo progetto al tuo insegnante perchè lo valuti. Se invece stai studiando per conto tuo, puoi ricevere una guida alla valutazione richiedendola nel forum di discussione su questo esercizio, o nel canale IRC #mdn su Mozilla IRC. In ogni caso, raccomandiamo di non guardare le soluzioni senza prima fare uno sforzo per risolvere gli esercizi per conto tuo.

+ +

{{PreviousMenu("Learn/Accessibilità/Accessibilità_dispositivi_mobili", "Learn/Accessibilità")}}

+ +

In questo modulo

+ + diff --git "a/files/it/learn/accessibilit\303\240/cosa_\303\250_accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/cosa_\303\250_accessibilit\303\240/index.html" new file mode 100644 index 0000000000..52a5c138f8 --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/cosa_\303\250_accessibilit\303\240/index.html" @@ -0,0 +1,196 @@ +--- +title: Cosa è l'accessibilità? +slug: Learn/Accessibilità/Cosa_è_accessibilità +tags: + - Accessibilità + - Articolo + - CSS + - HTML + - JavaScript + - Principiante + - Strumenti + - TA + - disabilità + - imparare + - lettore schermo + - tastiera + - tecnologie assistive + - utenti +translation_of: Learn/Accessibility/What_is_accessibility +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}
+ +

Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML e CSS.
Obiettivo:Acquisire familiarità con il concetto di accessibilità, capire di cosa si tratta e in che modo influisce sulla tua attività di sviluppatore web. 
+ +

Dunque, cosa è l'accessibilità?

+ +

L'accessibilità è la pratica di rendere i tuoi siti utilizzabili dal maggior numero di persone possibile. Di solito si pensa che il tema dell'accessibilità riguardi solo le persone che soffrono di una disabilità, ma in realtà l'accessibilità è un concetto importante anche per altri gruppi di persone, come coloro che usano dispositivi mobili o chi naviga in internet con una connessione lenta.

+ +

Puoi anche pensare all'accessibilità come alla pratica di trattare tutti alla stessa maniera e dare a tutti le stesse opportunità, indipendentemente dalle loro capacità e circostanze. Così come non è corretto impedire l'accesso a un edificio a una persona che si muove in sedia a rotelle (e infatti gli edifici pubblici devono essere dotati di rampe e ascensori), allo stesso modo non si deve escludere una persona dall'utilizzo di un sito web per il fatto che abbia un handicap o stia usando un dispositivo mobile. Tutti gli utenti devono avere gli stessi diritti.

+ +

Rendere un sito accessibile non solo è la cosa giusta da fare da un punto di vista etico, ma in molti paesi è anche obbligatorio per legge, e inoltre può contribuire a raggiungere categorie di utenti e clienti che altrimenti non potrebbero usare i tuoi servizi o acquistare i tuoi prodotti.

+ +

Rispettare le pratiche di accessibilità è benefico per tutti:

+ + + +

Quali tipi di disabilità prendere in considerazione?

+ +

Le persone con disabilità sono molto diverse tra loro, così come quelle senza disabilità. Il concetto chiave da imparare è smettere di pensare a come tu stesso usi il computer e navighi in internet, e cominciare a considerare come lo fanno gli altri. I principali tipi di disabilità sono spiegati qui sotto, insieme agli strumenti che le persone disabili usano per navigare il web (conosciuti come tecnologie assistive, o TA).

+ +
+

Nota: la Organizzazione Mondiale della Sanità nel suo rapporto (in inglese) Disabilità e salute afferma che "Oltre un miliardo di persone, circa il 15% della popolazione mondiale, ha una qualche forma di disabilità", e "Tra 110 e 190 milioni di adulti hanno significative difficoltà funzionali". 

+
+ +

Persone con deficit visivo

+ +

Questa categoria include persone non vedenti, persone con una capacità visiva molto ridotta (ipovedenti), daltonici, ecc. Molte di queste persone usano ingranditori di schermo (sia fisici che software, per esempio la maggior parte dei navigatori è dotata di funzioni di zoom), e alcuni usano lettori di schermo, cioè programmi che leggono a voce alta il contenuto digitale:

+ + + +

È una buona idea acquisire familiarità con i lettori di schermo; dovresti provare a installarne uno e usarlo, per farti una idea di come funziona. Per maggiori dettagli su come usarli, fai riferimento alla nostra guida (in inglese) Guida al testing dei lettori di schermo su differenti browser. Il video qui sotto inoltre fornisce una breve testimonianza sull'uso dei lettori di schermo.

+ +

{{EmbedYouTube("IK97XMibEws")}}

+ +

In termini statistici, la Organizzazione Mondiale della Sanità stima che "circa 285 milioni di persone nel mondo hanno gravi deficit visivi: 39 milioni sono non vedenti e 246 milioni ipovedenti". (vedi il rapporto in inglese Deficit visivo e cecità). Si tratta di una significativa quantità di utenti, pari quasi alla popolazione degli Stati Uniti, che non potrà usufruire del tuo sito se non lo avrai reso accessibile.

+ +

Persone con deficit uditivo

+ +

Questa categoria di persone presentano una capacità uditiva molto ridotta o del tutto assente. Le persone con deficit uditivo spesso usano TA (vedi l'articolo in inglese Strumenti assistivi per persone con disfunzioni uditive, della voce, dell'apparato fonatorio o del linguaggio), ma non esistono in realtà tecnologie assistive specifiche per l'uso del computer o di internet. 

+ +

Ci sono, comunque, tecniche specifiche da tenere in conto per fornire alternative testuali ai contenuti audio, come per esempio trascrizioni o sottotitoli sincronizzati nei video. Più avanti si tratteranno queste tecniche nel dettaglio in un altro articolo.

+ +

Anche le persone con deficit uditivo rappresentano una significativa base di utenza. Come indica la Organizzazione Mondiale della Sanità nel rapporto in inglese Sordità e perdita dell'udito, "360 milioni di persone nel mondo presentano deficit uditivi gravi".

+ +

Persone con problemi di mobilità

+ +

Alcune persone soffrono di disabilità che riguardano il movimento. Ciò può riferirsi a problemi puramente fisici (come la perdita di un arto o uno stato di paralisi), o a disordini di tipo neurologico/genetico che comportano difficoltà nei movimenti o perdita di controllo sugli arti. Alcune persone possono avere difficoltà a compiere i movimenti della mano necessari per usare un mouse, mentre altre possono presentare problemi più gravi, come per esempio uno stato di paralisi estesa, che rende necessario l'uso di un puntatore comandato tramite movimenti della testa per interagire con il computer. 

+ +

Questo tipo di disabilità può anche essere dovuto all'età avanzata, piuttosto che a un trauma o una condizione specifica, e può anche essere attribuibile a limitazioni dell'hardware, come nel caso di utenti che non hanno un mouse a disposizione.

+ +

In generale, per gestire questo tipo di limitazioni è necessario sviluppare i propri siti o applicazioni in maniera tale che siano utilizzabili tramite tastiera. Tratteremo l'argomento dell'accessibilità tramite tastiera con articoli specifici più avanti nel modulo, ma nel frattempo ti consigliamo di provare a navigare alcuni siti usando solo la tastiera, per farti un'idea di come funziona. Per esempio, puoi usare il tasto TAB per muoverti da un campo all'altro di un formulario? Puoi trovare ulteriori dettagli sull'uso della tastiera per la navigazione dei siti nella sezione (in inglese) Test di accessibilità della navigazione con tastiera su differenti browser.

+ +

Secondo le statistiche, un numero significativo di persone soffre di limitazioni alla mobilità. Il rapporto (in inglese) Disabilità e funzionamento (adulti maggiorenni non ricoverati) indica che negli Stati Uniti la percentuale di adulti con difficoltà di funzionamento fisico è del 15,1%.

+ +

Persone con deficit cognitivo

+ +

Probabilmente il più ampio range di disabilità è quello compreso in quest'ultima categoria. Il termine deficit cognitivo può infatti riferirsi ad un'ampia gamma di disfunzioni, dalle malattie mentali alle difficoltà di apprendimento, da problemi di comprensione e concentrazione, come la sindrome da deficit di attenzione e iperattività, a persone che presentano una forma di autismo, o persone che soffrono di schizofrenia, e molti altri tipi di disturbo. Questo tipo di disabilità possono influenzare molte attività della vita quotidiana, causando problemi di memoria, comprensione, attenzione, ecc.

+ +

Le forme più comuni con cui tali forme di disabilità influenzano l'uso di un sito sono: difficoltà nel capire il procedimento da seguire per raggiungere un risultato; difficoltà nel ricordare come ripetere un'azione compiuta precedentemente; un senso di frustrazione causato da alcune caratteristiche del sito che lo rendono confuso e inconsistente nella navigazione.

+ +

Diversamente da altri problemi di accessibilità web, è impossibile fornire linee guida specifiche per risolvere le difficoltà causate da deficit cognitivo; la strategia migliore è di impegnarsi a disegnare i propri siti nella forma più logica, consistente e usabile possibile. Per esempio, assicurati che:

+ + + +

Queste non sono soltanto tecniche di accessibilità, ma piuttosto buone pratiche di disegno web che saranno utili a chiunque userà i tuoi siti, e dovrebbero essere pratiche standard nel tuo lavoro di sviluppo web.

+ +

In termini statistici, anche in questo caso i numeri sono significativi. Per esempio, il rapporto (in inglese) della Cornell University Rapporto sullo stato della disabilità 2014 (PDF, 511KB) indica che nel 2014 il 4.5% della popolazione degli Stati Uniti di età compresa tra 21 e 64 anni presenta una qualche forma di disabilità cognitiva.

+ +
+

Nota:  La sezione (in inglese) Cognitive del sito WebAIM fornisce utili approfondimenti sulle pratiche riportate sopra, ed è certamente una lettura consigliata.

+
+ +

Come implementare l'accessibilità nei tuoi progetti

+ +

Un mito molto comune sull'accessibilità è che questa sia una sorta di "costoso extra". Questo mito può essere veritiero se:

+ + + +

Se invece l'accessibilità è parte integrante del tuo progetto sin dal principio, il costo per rendere il contenuto accesibile sarà minimo.

+ +

Quando pianifichi un progetto, introduci test di accessibilità nella tua routine di testing, allo stesso modo in cui effettui test per gli altri segmenti di utenza (come per esempio gli utenti che usano pc desktop, iOS o dispositivi mobili, ecc.). Effettua test sin dall'inizio e con frequenza, idealmente facendo uso di test automatizzati che rilevino sistematicamente caratteristiche mancanti (come per esempio mancanza di testo alternativo nelle immagini, o la presenza di link testuali mal costruiti. Vedi l'articolo in inglese Relazione tra elementi e contesto) ed anche, se possibile, effettuando test con persone disabili per verificare il funzionamento delle caratteristiche più complesse del sito. Per esempio: 

+ + + +

Dovresti prendere nota di tutte le potenziali aree problematiche del tuo contenuto su cui sarà necessario intervenire perchè siano rese accessibili, assicurarti che siano testate a sufficienza e pensare a soluzioni o alternative. Il contenuto testuale (come vedrai nel prossimo articolo) è facile da gestire, ma come fare con il contenuto multimediale, o le grafiche 3D? Dovresti considerare il budget a disposizione e pensare a quali possibilità hai per rendere il contenuto accessibile. Per esempio, potresti decidere di pagare qualcuno per trascrivere tutto il contenuto multimediale. Può essere costoso, ma è fattibile.

+ +

Inoltre, devi essere realista. Un sito accessibile al 100% è un ideale irraggiungibile, ci sarà sempre qualche situazione particolare per la quale un utente troverà difficile usare il tuo contenuto, ma devi fare tutto il possibile per evitare che si verifichino tali situazioni. Se hai in mente di includere nel tuo sito uno spettacolare grafico a torta 3D creato con WebGL, dovresti anche includere, come alternativa accessibile, una tabella dati standard. Oppure, potresti addirittura decidere di eliminare il grafico 3D: la tabella è accessibile a tutti, più rapida da creare, richiede meno risorse CPU ed è più facile da mantenere.

+ +

D'altro canto se stai costruendo un sito-galleria per opere d'arte in 3D, non sarebbe ragionevole pretendere che ogni opera fosse perfettamente accessibile alle persone con disabilità visiva, dato che si tratta di un medium interamente visuale.

+ +

Per dimostrare che hai grande considerazione per l'accessibilità e che l'hai inclusa nel tuo progetto, pubblica una dichiarazione di accessibilità sul tuo sito nella quale spieghi in dettaglio la tua politica sull'accessibilità, e quali misure hai adottato per rendere il sito accessibile. Se un utente ti contatta lamentando un problema di accessibilità, assicurati di ascoltarlo con attenzione e chiarire tutti i dettagli, sii empatico, e adotta tutte le misure ragionevoli per risolvere il problema.

+ +
+

Nota: Il nostro articolo (in inglese) Come gestire i problemi di accessibilità più comuni spiega con maggiori dettagli le specifiche di accessibilità che devono essere testate. 

+
+ +

Per riassumere:

+ + + +

Linee guida di accessibilità e legge

+ +

Ci sono numerose checklist e set di linee guida disponibili per effettuare test basici di accessibilità, e a prima vista possono apparire complicate. Ti consigliamo innanzitutto di acquisire familiarità con le aree più importantidi cui devi occuparti, e di cercare di comprendere le strutture generali delle linee guida che sono più rilevanti al tuo caso specifico.

+ + + +

È una buona idea leggere il testo della legge italiana sull'accessibilità, per familiarizzarsi con essa ed evitare eventuali problemi legali per i tuoi siti.

+ +

API per l'accessibilità

+ +

I browser fanno uso di alcune API speciali per l'accessibilità (fornite dal sistema operativo) che mostrano informazioni utili per le tecnologie assistive (TA). Le TA in generale usano solo informazioni semantiche, dunque non prendono in considerazione aspetti come lo stile di una pagina o gli script in JavaScript. Le informazioni sono strutturate in una mappa ad albero.

+ +

Ogni sistema operativo ha la sua API per l'accessibilità:

+ + + +

Quando le informazioni semantiche native fornite dagli elementi HTML della tua applicazione web non sono sufficienti, puoi supplementarle con caratteristiche della specificazione WAI-ARIA (articolo in inglese), che aggiunge informazione semantica alla mappa ad albero per migliorare l'accessibilità. Puoi sapere di più su WAI-ARIA nel nostro articolo basi di WAI-ARIA.

+ +

Riassunto

+ +

Questo articolo dovrebbe averti fornito una utile panoramica sull'accessibilità, averti mostrato perchè è importante, e come puoi inserirla nel tuo flusso di lavoro. Dovrebbe inoltre aver suscitato il tuo interesse e un desiderio di conoscere i dettagli su come implementare l'accessibilità nei tuoi progetti. Cominceremo a occuparcene proprio nella prossima sezione, dove spiegheremo come HTML costituisce un'ottima base per l'accessibilità. 

+ +
{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}
diff --git "a/files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/index.html" new file mode 100644 index 0000000000..6f5e69fea4 --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/index.html" @@ -0,0 +1,359 @@ +--- +title: Linee guida di accessibilità per CSS e JavaScript +slug: Learn/Accessibilità/CSS_e_JavaScript_accessibilità +tags: + - Accessibilità + - Articolo + - CSS + - Guida + - JavaScript + - colore + - contrasto + - imparare + - nascondere + - non intrusivo +translation_of: Learn/Accessibility/CSS_and_JavaScript +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibilità")}}
+ +

CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript e una idea chiara di cosa è l'accessibilità.
Obiettivo:Imparare le basi di come utilizzare CSS e JavaScript correttamente per massimizzare l'accessibilità dei propri siti e allo stesso tempo evitare errori che potrebbero ridurla.
+ +

CSS e JavaScript sono accessibili?

+ +

CSS e JavaScript non hanno per l'accessibilità lo stesso livello di importanza che ha HTML, ma possono comunque arrecare grandi danni se usati impropriamente. Per dirlo in un'altra maniera, è importante che tu apprenda alcune linee guida sull'uso di CSS e JavaScript, per evitare di rovinare l'accessibilità dei tuoi documenti web.

+ +

CSS

+ +

Cominciamo col dare un'occhiata a CSS.

+ +

Semantiche corrette e aspettative dell'utente

+ +

È possibile usare CSS per modificare in qualsiasi modo l'aspetto di qualsiasi elemento HTML, ma questo non significa che lo devi fare obbligatoriamente. Come abbiamo detto più volte nell'articolo HTML: una buona base per l'accessibilità, dovresti utilizzare sempre l'elemento semantico più appropriato per ogni situazione, a meno che sia davvero impossibile. Se non lo fai, puoi causare confusione e problemi di usabilità a tutti gli utenti, e in particolare a quelli con disabilità. Usare le semantiche corrette significa soprattutto venire incontro alle aspettative degli utenti: gli elementi devono apparire e funzionare secondo certi criteri, a seconda della loro funzione, e gli utenti si aspettano che queste convenzioni siano rispettate. 

+ +

Per esempio, un utente che usa lettore di schermo non può navigare una pagina attraverso gli elementi di heading se lo sviluppatore del sito non ha usato gli heading appropriati per etichettare il contenuto. Allo stesso modo, un heading perde la sua funzione visuale se lo hai modificato fino al punto in cui non appare più come un heading.

+ +

La regola generale è che puoi modificare lo stile di un elemento perchè sia congruente con lo stile generale del tuo sito, ma non modificarlo tanto da far si che non appaia o agisca come ci si aspetterebbe. Le sezioni seguenti riassumono i principali elementi HTML da prendere in considerazione.

+ +

Struttura del contenuto testuale "standard"

+ +

Heading, paragrafi, liste... Il contenuto testuale principale della tua pagina:

+ +
<h1>Heading</h1>
+
+<p>Paragrafo</p>
+
+<ul>
+  <li>Lista</li>
+  <li>Lista di due elementi.</li>
+</ul>
+ +

Un codice CSS tipico potrebbe essere il seguente:

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

Dovresti:

+ + + +

Vedi gli articoli in inglese  Fondamenti di testo in HTML e Modificare lo stile del testo per maggiori informazioni.

+ +

Testo enfatizzato

+ +

L'etichetta <em> conferisce enfasi al testo, mostrandolo in corsivo. L'etichetta <strong> ha lo stesso scopo, ma mostra il testo in grassetto:

+ +
<p>L'acqua è <em>molto calda</em>.</p>
+
+<p>Le gocce d'acqua che si formano su una suoerficie sono chiamate <strong>condensa</strong>.</p>
+ +

Potresti aggiungere un colore particolare per il testo in evidenza:

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

Ad ogni modo, raramente avrai bisogno di modificare lo stile di elementi enfatizzati. Gli stili standard grassetto e corsivo sono molto riconoscibili, e modificarli potrebbe creare confusione. Per maggiori informazioni sull'enfasi vedi l'articolo in inglese Enfasi e importanza.

+ +

Abbreviazioni

+ +

l'etichetta <abbr> indica una abbreviazione o un acronimo, e permette, tramite l'attributo title, di fornire la versione estesa della frase o parola abbreviata:

+ +
<p>Il contenuto di un sito è codificato tramite <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
+ +

Anche in questo caso potresti voler apportare qualche semplice modifica allo stile:

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

Lo standard riconosciuto per indicare le abbreviazioni è una sottolineatura punteggiata, ed è raccomandabile non modificarlo significativamente. Per maggiori dettagli sulle abbreviazioni, vedi l'articolo in inglese Abbreviazioni.

+ + + +

I link sono il mezzo con cui ti muovi da un punto all'altro della rete:

+ +
<p>Visita la <a href="https://www.mozilla.org">homepage di Mozilla</a>.</p>
+ +

Qui sotto sono riportate alcune semplici modifiche allo stile dei link:

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

Lo stile di default per i link è la sottolineatura, inoltre si presentano in diversi colori a seconda del loro stato: blu è il colore nello stato di default, viola nel caso il link sia stato visitato, rosso quando si "attiva" cliccandoci sopra. Oltre a ciò, il puntatore del mouse cambia forma quando lo si passa su un link, e il link viene messo in evidenza quando riceve focus (per esempio tramite tast TAB). Nell'immagine qui sotto possiamo vedere l'evidenziazione di un link in Firefox (cornice punteggiata) e Chrome (cornice azzurra):

+ +

+ +

+ +

Puoi modificare lo stile dei link come più ti piace, ma facendo attenzione a fornire agli utenti un feedback quando interagiscono coi link. Quando un link cambia di stato si dovrebbe notare. Inoltre, evita di rimuovere stili di default come il cambio di puntatore del mouse o l'evidenziazione quando un link riceve focus: entrambi sono molto importanti per l'accessibilità degli utenti che usano tastiera.

+ +

Formulari

+ +

I formulari sono elementi che permettono agli utenti di introdurre dati in un sito web:

+ +
<div>
+  <label for="nome">Introduci il tuo nome</label>
+  <input type="text" id="nome" name="nome">
+</div>
+ +

Puoi vedere un buon esempio di uso di CSS  in un formulario qui: form-css.html (vedi anche la versione live).

+ +

La maggior parte del codice CSS che scriverai per i formulari sarà per modificare le dimensioni degli elementi, allineare elementi label e input e migliorarne l'aspetto esteriore.

+ +

Non dovresti comunque modificare troppo il feedback visuale che gli elementi di un formulario mostrano quando ricevono focus, che è in pratica lo stesso dei link (vedi sopra). Puoi modificare l'aspetto delle evidenziazioni applicate agli elementi del formulario quando ricevono focus o hover del puntatore del mouse per far si che lo stile del tuo sito sia consistente sui diversi browser, ma evita di rimuoverle. Come già detto, alcuni utenti contano su tali "segnali" per poter interpretare ciò che sta accadendo mentre navigano un sito.

+ +

Tabelle

+ +

Prendiamo ora in considerazione le tabelle che si usano per presentare dati.

+ +

Puoi vedere un buon esempio di tabella costruita con HTML e CSS qui:  table-css.html (vedi anche la versione live).

+ +

Il codice CSS applicato alle tabelle serve in genere a uniformarle allo stile generale del sito e a migliorarle esteticamente. Alcune buone pratiche sono ad esempio far si che gli header(intestazioni di file o colonne) della tabella siano in risalto, per esempio usando il grassetto, e far uso di una alternanza di sfondo chiaro e scuro per rendere più facile la distinzione tra le varie file della tabella.

+ +

Colore e contrasto

+ +

Quando scegli uno schema di colori per il tuo sito, assicurati che il testo abbia un colore che contrasta bene con lo sfondo. Un basso contrasto dei colori può produrre un effetto interessante dal punto di vista estetico, ma renderà molto difficile poter leggere il tuo contenuto alle persone con problemi visivi come il daltonismo.

+ +

C'è un modo molto facile per verificare se il contrasto che hai scelto è abbastanza alto da non causare problemi. Ci sono numerosi siti che ti permettono di introdurre il colore del testo e quello dello sfondo, per verificarne il contrasto. Per esempio il sito Color Contrast Checker è facile da usare, e fornisce una spiegazione (in inglese) dei criteri WCAG (Linee guida per l'accessibilità dei contenuti Web) sul contrasto dei colori.

+ +
+

Nota: un contrasto alto sarà d'aiuto per poter leggere con maggiore facilità anche a chi si connette tramite telefono o tablet in ambienti con molta luce, come un parco o una piazza. 

+
+ +

Un altro consiglio è di non fare affidamento solo sul colore per fornire un certo tipo di informazioni o segnali, in quanto tali informazioni non potranno essere interpretate da chi non vede i colori. Per esempio, invece di limitarti a marcare in rosso i campi di un formulario che sono da compilare obbligatoriamente, marcali anche con un asterisco.

+ +

Nascondere elementi

+ +

Ci sono molte situazioni nelle quali è necessario che non tutto il contenuto sia mostrato allo stesso tempo. Per esempio nel nostro info box a schede (vedi codice sorgente) abbiamo tre schede con informazioni posizionate una sopra l'altra, e ci sono tre bottoni cliccabili per passare da una scheda all'altra (il box è accessibile anche da tastiera, usando il tasto TAB per spostarsi tra i bottoni e INVIO per selezionare una scheda).

+ +

+ +

Gli utenti che usano lettori di schermo non avranno problemi a leggere tutte le schede, l'importante è che l'ordine del contenuto sia sensato. Usare position: absolute (come nel nostro esempio) è in generale considerato come uno dei migliori metodi per nascondere contenuto, perchè non impedisce ai lettori di schermo di leggerlo.

+ +

D'altro canto, non dovresti usare {{cssxref("visibility")}}:hidden o {{cssxref("display")}}:none, perchè nascondono il contenuto ai lettori di schermo. A meno che, ovviamente, ci sia una buona ragione per nascondere questo contenuto ai lettori di schermo.

+ +
+

Nota: l'articolo in inglese Contenuto visibile solo ai lettori di schermo fornisce molti più dettagli su questo argomento.

+
+ +

È possibile che gli utenti modifichino lo stile dei tuoi elementi

+ +

A volte gli utenti alterano gli stili che hai impostato sostituendoli con stili personalizzati. Per esempio:

+ + + +

Gli utenti modificano il CSS per differenti ragioni: un utente con problemi di vista potrebbe voler ingrandire automaticamente il testo su tutti i siti che visita, un utente con daltonismo potrebbe voler aumentare il contrasto dei colori per facilitare la lettura. Qualunque sia la ragione, dovresti tenere in considerazione questa possibilità, e usare un disegno del tuo sito che sia sufficientemente flessibile per poter gestire tali cambi. Per esempio, dovresti assicurarti che l'area dove è situato il tuo contenuto principale può supportare un ingrandimento del testo, mantenendone il formato base e senza farne scomparire parti.

+ +

JavaScript

+ +

 

+ +

Anche JavaScript può causare problemi di accessibilità, dipendendo da come si utilizza.

+ +

JavaScript è un linguaggio molto potente, e possiamo usarlo per compiere un'infinità di funzioni, da semplici aggiornamenti del contenuto o della IU a giochi completi in 2D o 3D. Nessuna regola dice che tutto il contenuto deve essere accessibile al 100% a tutti, ma devi fare tutto il possibile, e cercare di rendere le tue applicazioni il più accessibili possibile.

+ +

Il contenuto e gli elementi funzionali semplici sono relativamente facili da rendere accessibili: per esempio testo, immagini, tabelle, formulari e bottoni. Come abbiamo visto nell'articolo HTML: una buona base per l'accessibilità, le considerazioni chiave sono:

+ + + +

Abbiamo inoltre visto un esempio di uso di JavaScript per migliorare l'accessibilità aggiungendo una funzionalità che mancava (vedi Implementare l'accessibilità da tastiera in un secondo tempo). Questo procedimento non è ideale, visto che si dovrebbe usare l'elemento più appropriato per ogni funzione sin dall'inizio, ma dimostra che è possibile intervenire sul codice in situazioni in cui è necessario modificarlo dopo la sua creazione. Un altro modo per migliorare l'accessibilità degli elementi che usano JavaScript non semantico è usare la tecnologia WAI-ARIA per fornire valore semantico extra per gli utenti che usano lettori di schermo. Il prossimo articolo spiegherà in dettaglio come farlo.

+ +

Funzionalità complesse come i giochi in 3D non sono tanto facili da rendere accessibili. Un gioco 3D creato usando WebGL si svilupperà su un elemento {{htmlelement("canvas")}} , che al momento non permette di fornire alternative testuali o altre informazioni utili per persone con disabilità visiva. Si può ragionevolmente obbiettare che un tale tipo di gioco non ha nel suo target di utenza persone non vedenti, e in effetti sarebbe esagerato pretendere di renderlo accessibile al 100%. Ma ad ogni modo è consigliabile implementare alcuni elementi di accessibilità come i controlli da tastiera, che permettono di giocare anche a utenti senza mouse, e assicurarsi che lo schema dei colori abbia un contrasto sufficientemente alto per essere usabile da persone con daltonismo.

+ +

Il problema di un uso eccessivo di JavaScript

+ +

Spesso gli sviluppatori di siti fanno un uso eccessivo di JavaScript. A volte si trovano siti in cui tutto è stato fatto con JavaScript, perfino HTML e CSS sono stati generati con JavaScript. Questo tipo di siti presentano grossi problemi di accessibilità e non solo, ed è sconsigliato sviluppare siti in questo modo.

+ +

Così come devi usare il giusto elemento per ogni funzione, assicurati anche di star usando la giusta tecnologia! Pensa bene se vale davvero la pena ricorrere a JavaScript per creare un pannello informazioni in 3D, mentre un semplice pannello testuale potrebbe essere sufficiente. Chiediti se hai davvero bisogno di un formulario basato su un widget super complesso, quando magari un semplice campo di input testuale andrebbe bene. E non generare tutto il tuo contenuto HTML con JavaScript.  

+ +

Mantieni un uso non intrusivo di JavaScript

+ +

Dovresti usare JavaScript con discrezione quando crei il tuo contenuto. L'idea di base è che JavaScript dovrebbe essere usato quando possibile per migliorare una funzionalità, ma non per costruirla. Le funzioni più basiche del sito dovrebbero essere indipendenti da JavaScript, anche se a volte ciò non è possibile. Una buona pratica è usare funzionalità già presenti nei browser quando è possibile.

+ +

Buoni esempi di uso non intrusivo di JavaScript sono:

+ + + +

Per fare un esempio abbiamo creato un semplice formulario con validazione dal lato cliente, vedi: form-validation.html (vedi anche la versione live). Nella pagina vedrai un formulario, e, quando provi a inviarlo, se avrai lasciato uno o entrambi i campi vuoti apparirà un messaggio di errore per spiegarti qual è il problema.

+ +

Questo tipo di validazione di un formulario è non intrusiva, puoi infatti usare il formulario anche con JavaScript disabilitato, e inoltre il formulario dovrà comunque essere validato anche dal lato server, poichè sarebbe troppo facile per un utente con cattive intenzioni bypassare la validazione dal lato cliente (per esempio disattivando JavaScript nel browser). La validazione dal lato cliente è utile per segnalare istantaneamente eventuali errori all'utente, senza dover attendere la risposta del server, migliorando così l'usabilità del formulario.

+ +
+

Nota: nel nostro esempio la validazione dal lato server non è stata implementata. 

+
+ +

Abbiamo inoltre reso la validazione di questo formulario accessibile, usando l'elemento {{htmlelement("label")}} per assicurarci che ogni campo di input abbia associata una etichetta senza alcuna ambiguità, di modo che i lettori di schermo possano leggere il blocco input+etichetta come una sola unità:  

+ +
<label for="nome">Inserisci il tuo nome:</label>
+<input type="text" name="nome" id="nome">
+ +

La validazione avviene solo al momento dell'invio del formulario. In questo modo la IU non viene aggiornata troppo spesso potendo causare confusione negli utenti che usano lettori di schermo (e anche in quelli che non li usano):

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

Nota: in questo esempio stiamo nascondendo e mostrando il messaggio di errore usando position: absolute invece che un altro metodo come visibility: hidden o display: none, perchè in questo modo il lettore di schermo potrà leggerlo senza problemi.  

+
+ +

Una validazione reale sarebbe molto più complessa, dovremmo controllare che il nome introdotto sembri effettivamente un nome, che l'età sia un numero e che sia realistica (per esempio non può essere un numero negativo, o di 4 cifre). Nell'esempio abbiamo implementato solo un sistema di verifica che controlla se i campi sono stati riempiti o no (if(testItem.input.value === '')).

+ +

Quando la validazione ha terminato con esito positivo, il formulario viene inviato. Se ci sono errori (if(errorList.innerHTML !== '')) l'invio viene bloccato (usando preventDefault()), e si mostra il messaggio di errore (vedi sotto). Con questo meccanismo gli errori saranno mostrati solo se ci saranno effettivamente errori, migliorando l'usabilità. 

+ +

Per ogni campo del formulario che è vuoto al momento dell'invio creiamo un item con un link e lo inseriamo nella lista errori (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);
+}
+ +

Ogni link ha una doppia funzionalità: segnala il tipo di errore e inoltre cliccandoci sopra sposta il focus automaticamente sul campo vuoto da riempire.

+ +
+

Nota: il metodo focus() dell'esempio può creare confusione. Chrome e Edge (e le ultime versioni di IE) sposteranno il focus al campo relativo quando si clicca sul link, senza bisogno della funzione onclick/focus(). Safari si limiterà a evidenziare il campo, ma ha bisogno di onclick/focus() per spostare effettivamente il focus su di esso. Firefox al momento non è in grado di spostare il focus su un campo specifico, quindi il metodo non funzionerà su Firefox. Il problema dovrebbe essere risolto in futuro.

+
+ +

 

+ +

Inoltre, il messaggio di errore è stato posto in cima nel codice HTML (anche se poi viene visualizzato in un altro punto della pagina usando CSS per posizionarlo), di modo che l'utente, tornando in cima alla pagina, può sapere che errore c'è nel suo formulario e andare direttamente al campo in questione.

+ +

Come annotazione finale, si noti che abbiamo usato alcuni attributi WAI-ARIA nel nostro esempio, per aiutare a risolvere problemi di accessibilità causati da aree del contenuto che si aggiornano costantemente senza che la pagina si ricarichi (di default i lettori di schermo non segnaleranno ciò agli utenti):

+ +

 

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

Torneremo a occuparci più dettagliatamente di questo tipo di attributi nel prossimo articolo sulla tecnologia WAI-ARIA.

+ +
+

Nota: forse starai pensando che HTML5 include già alcuni meccanismi di validazione come gli attributi required, min/minlength, e max/maxlength. Non abbiamo fatto uso di tali attributi nell'esempio, perchè non presentano ancora un livello accettabile di compatibilità nei differenti browser (per esempio Safari non li supporta, Internet Explorer solo a partire dalla versione 10).

+
+ +
+

Nota: l'articolo in inglese Forme usabili ed accessibili di validazione di formulari e risoluzione di errori fornisce ulteriori utili informazioni su come creare un processo di validazione acessibile.

+
+ +

Altri problemi di accessibilità con JavaScript

+ +

Ci sono altri aspetti relativi all'accessibilità da tenere in conto quando si usa JavaScript. Ne aggiungeremo altri all'articolo in futuro.

+ +

Eventi specifici del mouse

+ +

Come forse già saprai, le interazioni dell'utente con il sito tramite mouse sono gestite in JavaScript usando i gestori di eventi (event handlers), che ci permettono di eseguire funzioni in risposta a determinati eventi attivati dalle azioni compiute dall’utente con il mouse. Alcuni esempi di eventi specificamente relativi al mouse sono mouseover, mouseout, dblclick, ecc. Le funzionalità associate a tali eventi non sono accessibili usando altri dispositivi, come per esempio la tastiera.  

+ +

Per attenuare i problemi di accessibilità che ne derivano, dovresti associare a tali eventi altri eventi simili ma che sono attivati in altra maniera (i cosiddetti gestori di eventi indipendenti dal dispositivo). Per esempio focus e blur forniscono accessibilità per gli utenti che navigano con la tastiera.

+ +

Vediamo ora un esempio che dimostra questo tipo di situazione. Supponiamo che in una pagina del nostro sito ci sia una immagine in miniatura, che si espande quando ci si passa sopra con il puntatore del mouse, oppure quando riceve focus (per esempio pensiamo al catalogo di un sito di e-commerce).

+ +

Abbiamo creato un esempio molto semplice, che puoi trovare qui: mouse-and-keyboard-events.html (vedi anche il codice sorgente). Il codice ha due funzioni per mostrare o nascondere l'immagine ingrandita; qui sotto vediamo il codice dei gestori degli eventi:

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

Le prime due linee di codice riguardano il mouse: la prima funzione si attiva al passare il puntatore del mouse sulla miniatura, mentre la seconda si attiva al togliere il puntatore dall'area della miniatura. Questo codice però non permette di vedere l'immagine ingrandita tramite tastiera. Per poterlo fare, abbiamo aggiunto le atre due linee di codice, che attivano le stesse funzioni quando la miniatura riceve focus o lo perde. Si può spostare il focus sulla miniatura usando il tasto TAB, perchè al codice HTML dell'elemento abbiamo aggiunto l'attributo  tabindex="0".

+ +

L'evento click è interessante, a prima vista potrebbe sembrare un evento esclusivamente relativo  al mouse, ma nella maggior parte dei browser il gestore di eventi onclick si attiverà anche premendo il tasto INVIO su un link o un elemento di formulario con focus, o quando si clicca sull'elemento con il dito se si usa un dispositivo con touchscreen.

+ +

Tieni presente comunque che questo non funziona nel caso in cui si usi tabindex per dare il focus a un elemento che di default non lo potrebbe avere. In casi come questo devi rilevare quando il tasto specifico è premuto (vedi Implementare l'accessibilità da tastiera in un secondo tempo).

+ +

Riassunto

+ +

 

+ +

Speriamo che questo articolo ti sia servito a capire meglio i problemi di accessibilità relativi all'uso di CSS e JavaScript sui tuoi siti o applicazioni.

+ +

E ora, WAI-ARIA!

+ +
{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibilità/WAI-ARIA_basics", "Learn/Accessibilità")}}
diff --git "a/files/it/learn/accessibilit\303\240/html_accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/html_accessibilit\303\240/index.html" new file mode 100644 index 0000000000..26129068e4 --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/html_accessibilit\303\240/index.html" @@ -0,0 +1,538 @@ +--- +title: 'HTML: una buona base per l''accessibilità' +slug: Learn/Accessibilità/HTML_accessibilità +tags: + - Accessibilità + - Articolo + - Bottoni + - Formulari + - HTML semantico + - Lettore di schermo + - Link + - Principiante + - TA + - Testo Alternativo + - tastiera + - tecnologie assistive +translation_of: Learn/Accessibility/HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}
+ +

Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML e una idea chiara di cosa è l'accessibilità.
Obiettivo:Acquisire familiarità con le caratteristiche di HTML che hanno effetti positivi sull'accessibilità, e imparare a usarle correttamente nello sviluppo dei propri siti e applicazioni. 
+ +

HTML e accessibilità

+ +

 

+ +

Man mano che impari cose nuove su HTML (leggendo nuove risorse, analizzando esempi di codice, ecc.), ti accorgerai sicuramente di un tema ricorrente: l'importanza di usare HTML semantico (a volte chiamato POSH, Plain Old Semantic HTML). Ciò significa utilizzare il più possibile gli elementi HTML più corretti per il proprio scopo.

+ +

Forse ti chiederai perché è tanto importante. Dopotutto, puoi usare un combinazione di CSS e JavaScript per far sì che qualsiasi elemento HTML si comporti esattamente come tu vuoi. Per esempio, un bottone che controlla la riproduzione di un video sul tuo sito si potrebbe codificare così:

+ +

 

+ +
<div>Play video</div>
+ +

Ma, come vedrai in dettaglio più avanti, ha molto più senso usare un elemento più specifico:

+ +
<button>Play video</button>
+ +

Non solo l'elemento <button> presenta di default uno stile più appropriato alla sua funzione (anche se probabilmente in seguito modificherai tale stile), ma è anche perfettamente accessibile con la tastiera. Ciò significa che un utente che usa la tastiera per navigare potrà spostarsi da un bottone all'altro del sito usando il tasto TAB, e premere i bottoni usando INVIO.

+ +

L'HTML semantico non richiede più tempo per essere scritto del codice non-semantico se lo utilizzi con consistenza sin dal principio del progetto, e inoltre presenta numerosi altri benefici che vanno al di là dell'accessibilità:

+ +

 

+ +
    +
  1. Maggior facilità nello sviluppo — come già detto in precedenza, gli elementi HTML semantici hanno già integrate in sè alcune funzionalità aggiuntive. inoltre rendono il codice più facile da leggere e interpretare.
    2. +
  2. Miglior rendimento su dispositivi mobili — l'HTML semantico è più leggero del non-semantico, e più facile da rendere responsivo.
    3. +
  3. Utile per il SEO — i motori di ricerca danno maggior importanza alle parole chiave contenute in heading, link, ecc. rispetto a quelle contenute in generici <div> non-semantici, dunque i tuoi siti saranno più facili da trovare. 
    4. +
+ +

Ora vedremo più in dettaglio come produrre un codice HTML accessibile.

+ +
+

Nota: È una buona idea installare un lettore di schermo sul tuo computer, così che tu possa testare gli esempi mostrati più avanti. Vedi la guida in inglese Guida ai lettori di schermo per maggiori dettagli.

+
+ +

Semantiche corrette

+ +

 

+ +

Abbiamo già parlato dell'importanza di usare la giusta semantica, e perchè è importante usare i corretti elementi HTML per ogni situazione. Questa pratica non può essere ignorata, visto che è una delle principali situazioni in cui l'accessibilità viene compromessa se non si agisce propriamente.

+ +

Se si analizzano i siti presenti in rete, si noterà che ci sono casi di utilizzo molto poco ortodosso del codice HTML. Alcuni errori sono dovuti a pratiche ormai in disuso che non sono state debitamente aggiornate, altri semplicemente a ignoranza. In ogni caso, ogni volta che trovi del codice erroneo, dovresti fare il possibile per sistemarlo.

+ +

A volte non sei nella posizione di poter correggere del codice mal scritto, per esempio se le tue pagine si basano su un framework esterno su cui non hai controllo, o se sul tuo sito è presente contenuto di terze parti (come ad esempio banners pubblicitari) che non puoi modificare.

+ +

Comunque, tieni a mente che l'obiettivo non è "tutto o niente". Ogni piccolo miglioramento che riuscirai a implementare sarà utile alla causa dell'accessibilità.

+ +

Contenuto testuale

+ +

Uno dei più grandi aiuti per un utente che usa un lettore di schermo è una buona struttura del contenuto, diviso in headings, paragrafi, liste ecc. Un buon esempio può essere il seguente codice:

+ +
<h1>Titolo</h1>
+
+<p>Questa è la prima sezione del mio documento.</p>
+
+<p>Ecco qui un altro paragrafo.</p>
+
+<ol>
+  <li>Questa è</li>
+  <li>una lista</li>
+  <li>composta da</li>
+  <li>vari elementi</li>
+</ol>
+
+<h2>Sottosezione</h2>
+
+<p>Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla!</p>
+
+<h2>Seconda sottosezione</h2>
+
+<p>Questa è la seconda sottosezione del mio documento.</p>
+ +

Abbiamo preparato un'altra versione più lunga che puoi provare a navigare con un lettore di schermo (vedi: buone-semantiche.html). Se provi a leggere tale pagina, ti renderai conto che è facile da navigare:

+ +
    +
  1. Il lettore di schermo legge ogni etichetta man mano che avanza nella lettura del contenuto, facendoti sapere quale è un heading, quale un paragrafo ecc.
    2. +
  2. Il lettore si ferma dopo ogni elemento, permettendoti di procedere al ritmo di lettura che ti è più comodo.
    3. +
  3. Nella maggior parte dei lettori di schermo, puoi saltare al precedente o seguente heading.
    4. +
  4. Molti lettori di schermo inoltre ti forniscono una lista di tutti gli heading presenti, permettendoti di avere un utile indice per trovare contenuti specifici. 
    5. +
+ +

A volte si scrivono headings e paragrafi usando HTML non semantico e salti di linea, come nel caso seguente:

+ +
<font size="7">Titolo</font>
+<br><br>
+Questa è la prima sezione del mio documento.
+<br><br>
+Ecco qui un altro paragrafo.
+<br><br>
+1. Questa è
+<br><br>
+2. una lista
+<br><br>
+3. composta da
+<br><br>
+4. vari elementi
+<br><br>
+<font size="5">Sottosezione</font>
+<br><br>
+Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla!
+<br><br>
+<font size="5">Seconda sottosezione</font>
+<br><br>
+Questa è la seconda sottosezione del mio documento.
+ +

Se provi a leggere questa versione con un lettore di schermo (vedi cattive-semantiche.html), l’esperienza non ti risulterà positiva. Il lettore di schermo non avrà riferimenti che lo guidino, e non potrà fornirti un sommario dei contenuti. L'intera pagina gli apparirà come un blocco unico, e la leggerà tutta in una volta.

+ +

Ci sono inoltre altri problemi che vanno al di là dell'accessibilità: per esempio è difficile applicare stile al contenuto usando CSS, o manipolarlo con JavaScript, perchè non ci sono elementi da usare come selettori.

+ +

Usare un linguaggio chiaro

+ +

Anche il linguaggio che usi può avere un effetto sull'accessibilità. In generale dovresti usare un linguaggio chiaro e non troppo complesso, privo di termini gergali o eccessivamente tecnici. Ciò non è d'aiuto solo alle persone con disabilità cognitive o di altro tipo; è anche utile ad utenti per i quali il testo è scritto in una lingua che non conoscono bene, a utenti di età molto giovane... Di fatto, è utile a tutti! A parte ciò, dovresti anche fare attenzione a non usare termini e caratteri che risultino poco chiari se letti con un lettore di schermo. Per esempio:

+ + + +

Layout di pagina

+ +

Molto tempo fa, era pratica abituale creare layout di pagina con tabelle HTML, usando le celle di una tabella per contenere header, footer, barra laterale, la colonna del contenuto principale ecc. Questa non è una buona pratica, visto che un lettore di schermo molto probabilmente darà una lettura confusa delle celle, soprattutto se il layout è complesso e presenta sottotabelle secondarie.

+ +

Prova questo esempio: layout-tabella.html, che corrisponde al seguente codice:

+ +
<table width="1200">
+      <!-- fila del titolo della tabella -->
+      <tr id="titolo">
+        <td colspan="6">
+
+          <h1 align="center">Header</h1>
+
+        </td>
+      </tr>
+      <!-- fila del  menu di navigazione  -->
+      <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>
+      <!-- fila del contenuto principale e sezione laterale -->
+      <tr id="main">
+        <td id="content" colspan="4" bgcolor="#ffffff">
+
+          <!-- contenuto principale -->
+        </td>
+        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
+          <h2>Related</h2>
+
+          <!-- sezione laterale -->
+
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- fila del footer -->
+      <tr id="footer" bgcolor="#ffffff">
+        <td colspan="6">
+          <p>©Copyright 2050 by nobody. All rights reversed.</p>
+        </td>
+      </tr>
+    </table>
+ +

 

+ +

Se provi a navigare la pagina con un lettore di schermo, probabilmente ti dirà che c'è una tabella (anche se alcuni lettori di schermo riescono a differenziare i layout a tabella dalle tabelle di dati). Poi dovrai (a seconda del lettore di schermo che stai usando) esplorare la tabella cella per cella, e infine uscirne per poter navigare il contenuto.

+ +

I layout a tabella son una reliquia del passato, avevano senso in un'epoca in cui non tutti i browser supportavano CSS, ma creano confusione per gli utenti che usano lettori di schermo, e inoltre sono una cattiva pratica per molte altre ragioni (per esempio richiedono una quantità maggiore di codice e rendono il disegno meno flessibile). Non usarli!

+ +

Puoi verificare queste affermazioni comparando le tue esperienze precedenti con un esempio di struttura più moderna del sito, che corrisponde al seguente codice:

+ +
<header>
+  <h1>Header</h1>
+</header>
+
+<nav>
+  <!-- navigazione principale -->
+</nav>
+
+<!-- contenuto principale -->
+<main>
+
+  <!-- articolo -->
+  <article>
+    <h2>Article heading</h2>
+
+    <!-- contenuto dell'articolo -->
+  </article>
+
+  <aside>
+    <h2>Related</h2>
+
+    <!-- contenuto della sezione laterale -->
+  </aside>
+
+</main>
+
+<!-- footer, usato in tutte le pagine del sito -->
+
+<footer>
+  <!-- contenuto del footer -->
+</footer>
+ +

Se provi questa nuova versione del sito con un lettore di schermo, vedrai che il layout del codice non è più un ostacolo alla lettura del contenuto. Inoltre puoi notare come sia molto più agile e leggero in termini di quantità di codice, cosa che implica una maggior facilità di gestione e mantenimento, e minor utilizzo di banda da parte dell'utente (molto utile per chi ha una connessione lenta).

+ +

Un'altro aspetto da tenere presente quando si creano layout è quello di usare HTML5 semantico, come visto nell'esempio precedente (vedi il compendio in inglese sezioni del contenuto). Potresti creare un layout usando solo elementi annidati {{htmlelement("div")}}, ma è molto meglio usare elementi specifici appropriati per distinguere le varie sezioni della pagina, come la sezione con gli elementi di navigazione ({{htmlelement("nav")}}), il footer ({{htmlelement("footer")}}), unità di contenuto che si ripetono ({{htmlelement("article")}}), ecc. Questi elementi forniscono un ulteriore contenuto semantico per i lettori di schermo (e per altri strumenti) per dare agli utenti indicazioni extra riguardo il contenuto che stanno navigando (vedi l'articolo in inglese Supporto dei nuovi elementi HTML5 di sezione nei lettori di schermo per farti un'idea dello stato del supporto nei lettori di schermo).

+ +
+

Nota: oltre ad una buona semantica ed un layout esteticamente apprezzabile, il tuo contenuto dovrebbe essere organizzato in un ordine logico. Puoi sempre muoverlo in seguito utilizzando CSS, ma il codice sorgente dovrebbe essere nel giusto ordine, di modo che gli utenti che usano lettori di schermo lo possano interpretare correttamente. 

+
+ +

Controlli di Interfaccia Utente

+ +

Con il termine “controlli IU” intendiamo i componenti di un sito con cui gli utenti interagiscono. I più comuni sono bottoni, link e formulari. In questa sezione analizzeremo gli aspetti basici da tenere in considerazione quando si creano tali elementi. Più avanti gli articoli su WAI-ARIA e multimedia prenderanno in considerazione altri aspetti dell'accessibilità IU.

+ +

Un aspetto chiave dell'accessibilità dei controlli IU è che di default i browser permettono di interagire con essi tramite tastiera. Puoi fare una prova usando il nostro esempio accessibilità-tastiera-nativa.html (vedi il codice sorgente): apri la pagina in una nuova scheda e prova a premere il bottone TAB; dopo averlo premuto qualche volta, dovresti vedere il focus muoversi da un elemento all'altro della pagina. Gli elementi con focus hanno un sistema di evidenziazione per rendere chiaro quale elemento è selezionato al momento. Questo sistema varia leggermente da browser a browser.

+ +

+ +

Dopo averlo selezionato tramite TAB, puoi usare il tasto INVIO per premere un bottone (nell'esempio i bottoni quando premuti producono un messaggio di avviso); allo stesso modo, premendo INVIO puoi aprire un link che hai selezionato. Inoltre, dopo averlo selezionato con il tasto TAB, puoi scrivere in un campo del formulario, o selezionare un elemento dal menu a tendina usando i tasti freccia della tastiera.

+ +
+

Nota: i vari browser possono presentare differenti opzioni di controllo da tastiera. Vedi l'articolo in inglese Accessibilità con la tastiera per maggiori dettagli.

+
+ +

In ogni caso tutti  i browser sono già preconfigurati per la navigazione con tastiera, l'unica cosa di cui devi preoccuparti è usare gli elementi HTML correttamente. Per esempio:

+ +
<h1>Links</h1>
+
+<p>Questo è un link a <a href="https://www.mozilla.org">Mozilla</a>.</p>
+
+<p>Un altro link, a <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
+
+<h2>Bottoni</h2>
+
+<p>
+  <button data-message="Questo messaggio viene dal primo bottone">Cliccami!</button>
+  <button data-message="Questo messaggio viene dal secondo bottone">Clicca anche me!</button>
+  <button data-message="Questo messaggio viene dal terzo bottone">E me!</button>
+</p>
+
+<h2>Formulario</h2>
+
+<form>
+  <div>
+    <label for="name">Inserisci il tuo nome:</label>
+    <input type="text" id="name" name="name">
+  </div>
+  <div>
+    <label for="age">Inserisci la tua età:</label>
+    <input type="text" id="age" name="age">
+  </div>
+  <div>
+    <label for="mood">Come ti senti?</label>
+    <select id="mood" name="mood">
+      <option>Felice</option>
+      <option>Triste</option>
+      <option>Arrabbiato</option>
+      <option>Preoccupato</option>
+    </select>
+  </div>
+</form>
+ +

Questo significa usare link, bottoni, elementi del formulario ed etichette appropriatamente (includendo l'elemento {{htmlelement("label")}} nei campi del formulario).

+ +

Purtroppo a volte queste buone pratiche non sono rispettate. Ad esempio, a volte si trovano bottoni codificati usando elementi {{htmlelement("div")}}:

+ +
<div data-message="Questo messaggio viene dal primo bottone">Cliccami!</div>
+<div data-message="Questo messaggio viene dal secondo bottone">Clicca anche me!</div>
+<div data-message="Questo messaggio viene dal terzo bottone">E me!</div>
+ +

Questo modo di scrivere codice è altamente sconsigliato: non solo perdi l'accessibilità da tastiera che avresti avuto automaticamente usando l'etichetta {{htmlelement("button")}}, ma perdi anche gli stili CSS di default che l'etichetta {{htmlelement("button")}} contiene.

+ +

Implementare l'accessibilità da tastiera in un secondo tempo

+ +

Risolvere problemi di accessibilità da tastiera in un sito già ultimato può richiedere un certo sforzo (per un esempio vedi la pagina   falsi-bottoni-usando-div.html e il suo  codice sorgente). In questo esempio abbiamo dato ad alcuni bottoni, erroneamente creati con una etichetta <div>, la possibilità di ricevere focus tramite tasto TAB fornendo a ognuno l'attributo tabindex="0":

+ +
<div data-message="Questo messaggio viene dal primo bottone" tabindex="0">Cliccami!</div>
+<div data-message="Questo messaggio viene dal secondo bottone" tabindex="0">Clicca anche me!</div>
+<div data-message="Questo messaggio viene dal terzo bottone" tabindex="0">E me!</div>
+ +

L'attributo {{htmlattrxref("tabindex")}} è stato creato per dare agli elementi selezionabili tramite tasto TAB un ordine di focus personalizzato (specificato con numeri positivi in ordine crescente), differente dall'ordine standard con cui sono presenti nel codice sorgente. In generale questa non è una buona pratica, e può causare confusione nell'utente. Questo attributo sarebbe da usare solo in casi particolari, per esempio se il layout mostra gli elementi in una forma molto diversa dal codice sorgente. Ma ci sono altri due possibili usi di tabindex che sono utili per l'accessibilità:

+ + + +

L'uso di tabindex rende i bottoni creati erroneamente usando <div> selezionabili tramite tasto TAB, ma non ci permette di cliccarli usando INVIO. Per renderli cliccabili, dobbiamo ricorrere a Javascript:  

+ +
document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // Il tasto ENTER
+    document.activeElement.onclick(e);
+  }
+};
+ +

Spiegazione del codice: abbiamo aggiunto un listener al documento, di modo che il codice rileva ogni occasione in cui un tasto della tastiera viene premuto. Tramite la proprietà KeyCode il codice individua quale tasto è stato premuto. Se il tasto premuto è INVIO, la funzione associata tramite onclick al bottone attualmente selezionato viene eseguita. La linea document.activeElement.onclick() serve proprio a rilevare l'elemento che attualmente sta ricevendo focus nella pagina, in questo caso il bottone che abbiamo selezionato tramite tasto TAB. 

+ +
+

Nota: Tieni presente che questa tecnica funzionerà solo se usi onclick. Usare addEventListener non funzionerà.

+
+ +

Come vedi, implementare l'uso della tastiera in un secondo momento non è un lavoro semplice né veloce, e inoltre può causare malfunzionamenti del sito. È molto meglio utilizzare l'elemento più appropriato per ogni funzionalità del sito sin dal principio.

+ +

Usare testi con significato

+ +

Una interfaccia utente che presenta une nomenclatura chiara ed esplicativa è utile a tutti, ma avere testi ed etichette curati nei dettagli è particolarmente importante per gli utenti che hanno una disabilità.

+ +

Assicurati che i tuoi bottoni e i tuoi link presentino testi facilmente comprensibili e che distinguano bene un elemento dall'altro. Non usare frasi come "Clicca qui", perchè gli utenti che usano lettori di schermo possono avere difficoltà a distinguere la funzione o destinazione del bottone o link, soprattutto se ce ne sono molti nella pagina. La seguente immagine mostra alcuni campi di un formulario così come sono letti da VoiceOver.

+ +

+ +

Assicurati che i nomi che assegni agli elementi abbiano senso anche se letti fuori dal loro contesto, allo stesso modo in cui hanno senso nel contesto del paragrafo in cui sono contenuti. Il seguente esempio mostra un esempio di costruzione corretta del testo di un link:

+ +
<p>Le balene sono creature davvero straordinarie. <a href="balene.html">Scopri di più sulle balene</a>.</p>
+ +

Mentre questo è un esempio di cattivo uso:

+ +
<p>Le balene sono creature davvero straordinarie. Per saperne di più sulle balene, <a href="balene.html">clicca qui</a>.</p>
+ +
+

Nota: Puoi saperne di più sulle migliori pratiche di implementazione di link nel nostro articolo (in inglese) Creazione di link. Puoi inoltre vedere esempi di buona costruzione di link nella pagina buoni-link.html ed esempi di link mal costruiti nella pagina cattivi-link.html.

+
+ +

Un altro elemento importante sono le etichette <label> dei formulari, che forniscono una indicazione su cosa l'utente deve inserire nel campo del formulario. Il seguente esempio può sembrare una maniera corretta di implementare un campo di formulario:

+ +
Scrivi il tuo nome: <input type="text" id="nome" name="nome">
+ +

Tuttavia, questo campo non sarebbe utile a utenti con disabilità visiva. Non c'è nessuna indicazione non visuale che associ chiaramente il campo di input con il testo "Scrivi il tuo nome:". Se navighi questo elemento con un lettore di schermo, potresti ricevere una descrizione generica tipo "scrivi testo qui".

+ +

Il seguente è un esempio molto migliore:

+ +
<div>
+  <label for="nome">Scrivi il tuo nome:</label>
+  <input type="text" id="nome" name="nome">
+</div>
+ +

Con questo codice, il testo sarà chiaramente associato al campo di input; il lettore di schermo pronuncerà una frase come: "Scrivi il tuo nome: scrivi testo qui". 

+ +

Inoltre, nella maggior parte dei browser associare un testo a un campo di input tramite etichetta <label> permette di selezionare/attivare il campo input cliccando anche sul testo oltre che sul campo stesso. Ciò rende molto più facile selezionare il campo in cui scrivere.

+ +
+

Nota: Puoi vedere esempi di formulari ben costruiti nella pagina esempi-di-buoni-form.html ed esempi di formulari poco accessibili nella pagina esempi-di-cattivi-form.html.

+
+ +

Tabelle dati accessibili

+ +

Una tabella dati basica si può scrivere in modo molto semplice, come per esempio:

+ +
<table>
+  <tr>
+    <td>Nome</td>
+    <td>Età</td>
+    <td>Genere</td>
+  </tr>
+  <tr>
+    <td>Gabriel</td>
+    <td>13</td>
+    <td>Maschio</td>
+  </tr>
+  <tr>
+    <td>Elva</td>
+    <td>8</td>
+    <td>Femmina</td>
+  </tr>
+  <tr>
+    <td>Freida</td>
+    <td>5</td>
+    <td>Femmina</td>
+  </tr>
+</table>
+ +

Ma questo codice può causare problemi: non dà agli utenti che usano lettori di schermo la possibilità di associare file e colonne in gruppi di dati relazionati tra loro. Per rendere ciò possibile devi sapere quali elementi della tabella sono header di file o colonne. Nel caso della tabella qui sopra ciò è possibile solo visualizzandola (vedi tabella-incorretta.html).

+ +

Ora invece considera l'esempio tabella gruppi punk. Puoi notare alcune aggiunte nel codice che migliorano l'accessibilità:

+ + + +
+

Nota: vedi l'articolo in inglese Caratteristiche avanzate delle tabelle HTML e accessibilità per maggiori dettagli sull'accessibilità delle tabelle dati.

+
+ +

Alternative testuali

+ +

Mentre il contenuto testuale è per sua natura accessibile, non si può dire lo stesso per il contenuto multimediale: immagini e video non possono essere visualizzati da persone con disabilità visiva grave, e il contenuto audio è difficile o impossibile da ascoltare per persone con disabilità auditiva. Ci occuperemo dell’accessibilità del contenuto audio e video in un altro articolo, in questa sezione tratteremo il tema dell'accessibilità per gli elementi {{htmlelement("img")}}.

+ +

Proponiamo qui un semplice esempio, immagine-accessibile.html, nel quale possiamo vedere 4 copie della stessa immagine.

+ +

Riportiamo qui sotto il relativo codice HTML tradotto all'italiano (nella pagina del link sarà in inglese):

+ +
<img src="dinosauro.png">
+
+<img src="dinosauro.png"
+     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.">
+
+<img src="dinosauro.png"
+     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi."
+     title="Il dinosauro rosso di Mozilla">
+
+
+<img src="dinosauro.png" aria-labelledby="dino-label">
+
+<p id="dino-label">Il Tirannosauro Rex rosso di Mozilla: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.</p>
+
+ +

La prima immagine, se si usa un lettore di schermo, non è molto accessibile. Per esempio VoiceOver leggerebbe il nome del file come "dinosauro.png, immagine". L'utente saprebbe almeno che nell'immagine è rappresentato un dinosauro di qualche tipo. Ma spesso le immagini che si trovano su internet non hanno neanche un titolo minimamente descrittivo come “dinosauro.png”, e usano invece come titoli codici alfanumerici o nomi generati automaticamente (per esempio da una macchina fotografica), che non forniscono alcun tipo di contesto riguardo al contenuto dell'immagine.

+ +
+

Nota: non dovresti mai includere contenuto testuale in una immagine. I lettori di schermo non lo possono leggere. Ci sono inoltre altri svantaggi, per esempio non è possibile selezionarlo e copiarlo. Non farlo! 

+
+ +

Nel caso della seconda immagine, un lettore di schermo leggerà tutto l'attributo alt: "Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.".

+ +

Dunque è importante fornire alle immagini nomi descrittivi, e anche assicurarsi di fornire testo alternativo ogni volta che è possibile. Fai attenzione a fornire nell'attributo alt un testo che sia una rappresentazione il più possible diretta del contenuto dell'immagine. Evita di includere informazioni extra che non riguardano direttamente l'immagine.

+ +

Un altro aspetto da considerare è se un'immagine ha un significato importante nel contesto del contenuto in cui si trova, o se si tratta solo di un'immagine decorativa. Se un’immagine è solo decorativa, è meglio includerla nella pagina con la proprietà background-image di CSS piuttosto che con l’etichetta <img>.

+ +
+

Nota: Leggi Immagini in HTML e Immagini reattive per saperne di più sulle pratiche ottimali per l'implementazione delle immagini.

+
+ +

Se desideri fornire informazioni contestuali extra, dovresti includerle nel testo vicino all'immagine, o usare un attributo title, come mostrato nel codice della terza immagine. La maggior parte dei lettori di schermo leggerà il testo alternativo, il testo dell'attributo title, e il nome del file. Inoltre, i browser mostrano il testo contenuto in title quando un utente passa sopra l'immagine con il puntatore del mouse.

+ +

+ +

Diamo ora un'occhiata al codice della quarta immagine:

+ +
<img src="dinosauro.png" aria-labelledby="dino-label"> <p id="dino-label">Il Tirannosauro...</p>
+ +

In questo caso non stiamo usando l'attributo alt. Invece, abbiamo presentato la descrizione dell'immagine come un normale paragrafo, le abbiamo assegnato un id, e poi abbiamo usato l'attributo aria-labelledby  associandolo all'id. In questo modo i lettori di schermo useranno il paragrafo come testo alternativo per l'immagine. Questo metodo è utile nel caso in cui si voglia usare lo stesso testo alternativo per multiple immagini, procedimento che è sconsigliabile implementare usando l’attributo alt

+ +
+

Nota: aria-labelledby è parte della specificazione WAI-ARIA, che permette agli sviluppatori di aggiungere valore semantico extra al loro codice e migliorare l'accessiblità per i lettori di schermo. Per saperne di più su come funziona, leggi l'articolo basi di WAI-ARIA.

+
+ +

Altri metodi di testo alternativo

+ +

Ci sono anche altri metodi per associare alle immagini un testo che le descriva. Per esempio, c'è un attributo chiamato longdesc che permette di richiamare descrizioni dettagliate delle immagini presenti in una pagina da un documento HTML esterno. Per esempio:

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

Questa può sembrare una soluzione ottimale, soprattutto per immagini con grandi contenuti informativi come grafici che rappresentano statistiche o risultati. Ma purtroppo l'attributo longdesc non è supportato con consistenza dai lettori di schermo, e inoltre il suo contenuto è totalmente inaccessibile agli utenti che non usano lettori di schermo. Si raccomanda dunque di includere la descrizione testuale nella stessa pagina in cui si trova l'immagine, o rimandare alla descrizione con un link standard.

+ +

In HTML5 sono inclusi inoltre altri due elementi, {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, che servono ad associare un elemento figurativo (non necessariamente un'immagine) ad una didascalia: 

+ +
<figure>
+  <img src="dinosauro.png" alt="Il Tirannosauro di Mozilla">
+  <figcaption>Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.</figcaption>
+</figure>
+ +

Purtroppo anche in questo caso la maggior parte dei lettori di schermo non è ancora in grado di interpretare correttamente gli elementi {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, ma l'uso di questi elementi può essere comunque utile per effettuare modifiche allo stile tramite CSS; inoltre questi elementi danno la possibilità di collocare la descrizione di una immagine nello stesso punto in cui l'immagine è inserita nel codice.

+ +

Attributi alt vuoti

+ +
<h3>
+  <img src="icona-articolo.png" alt="">
+  Tirannosauro Rex: il re dei dinosauti
+</h3>
+ +

In alcuni casi un'immagine viene inclusa in una pagina con uno scopo puramente decorativo. Come puoi notare nel codice qui sopra, l'attributo alt dell'immagine è lasciato vuoto. Questo procedimento permette ai lettori di schermo di riconoscere la presenza di un'immagine, evitando però di fornirne una descrizione (pronuncerebbero solo una frase come "immagine").

+ +

La ragione per cui è buona pratica usare un attributo alt vuoto invece di non includerlo del tutto è perchè molti lettori di schermo, nel caso in cui non incontrino nessun attributo alt associato a un'immagine, leggono al suo posto l'URL dell'immagine. Nell'esempio qui sopra, l'immagine ha una funzione decorativa dell'heading a cui è associata. In casi come questo, e in tutti i casi in cui un'immagine ha una funzione puramente decorativa e nessun valore di contenuto, dovresti associarle un attributo alt vuoto (alt=""). Un'alternativa è usare l'attributo ARIA role (con forma: role="presentation"), che indica ai lettori di schermo di non leggere il testo alternativo.

+ +
+

Nota: se possibile è meglio usare CSS per mostrare immagini con funzione puramente decorativa.

+
+ +

Riassunto

+ +

Dopo aver letto questo articolo dovresti avere un’idea piuttosto chiara di come scrivere HTML accessibile nella maggior parte delle situazioni. Il nostro articolo su WAI-ARIA ti darà informazioni più approfondite, ma con quanto hai già letto e imparato sei in possesso di una buona base. Nei prossimi articoli esploreremo CSS e JavaScript, e come l'accessibilità è influenzata dal loro corretto o incorretto utilizzo.

+ +

{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}

diff --git "a/files/it/learn/accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/index.html" new file mode 100644 index 0000000000..57dee47809 --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/index.html" @@ -0,0 +1,67 @@ +--- +title: Accessibilità +slug: Learn/Accessibilità +tags: + - ARIA + - Accessibilità + - Articoli + - CSS + - Guida accessibilità + - HTML + - Imparare accessibilità + - JavaScript + - Lezioni accessibilità + - Manuale accessibiltà + - Moduli + - Principiante + - Sviluppo Web + - imparare +translation_of: Learn/Accessibility +--- +
{{LearnSidebar}}
+ +

Imparare HTML, CSS e Javascript è fondamentale se vuoi diventare uno sviluppatore web, ma la tua preparazione deve andare al di là del semplice utilizzo delle tecnologie di programmazione web: devi imparare ad utilizzarle in modo responsabile, in maniera tale da massimizzare il numero di utenti che possano usufruire pienamente dei tuoi siti, senza lasciare nessuno chiuso fuori. Per ottenere questi risultati devi seguire con attenzione alcune linee guida (che sono indicate nelle sezioni HTML, CSS, e JavaScript), praticare test su differenti browser e prendere in considerazione l'accessibilità sin dal principio dei tuoi progetti di sviluppo web. In questo modulo ci occuperemo in dettaglio di quest'ultimo aspetto.

+ +

Prerequisiti

+ +

Per ottenere il massimo da questo modulo, è consigliabile aver seguito almeno i primi due moduli delle sezioni HTML, CSS, e JavaScript, oppure, ancor meglio, seguire le varie parti del modulo sull'accessibilità mentre studi (o rivedi) le relative sezioni di HTML, CSS, e JavaScript.  

+ +
+

Nota: Se stai usando un computer, tablet o altro dispositivo sul quale non hai la possibilità di creare files, puoi testare la maggior parte degli esempi di codice che troverai in questo modulo usando un programma online come JSBin o Thimble.

+
+ +

Guide

+ +
+
Cos'è l'accessibilità?
+
Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.
+
HTML: una buona base per l'accessibilità
+
Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.
+
Linee guida di accessibiltà per CSS e JavaScript
+
CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.
+
Basi della tecnologia WAI-ARIA
+
Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.
+
Accessibilità multimediale
+
+
+

Un'altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l'accessibilità di questo tipo di contenuti.

+
+
+
Accessibilità per dispositivi mobili
+
L'uso di internet su dispositivi mobili è sempre più diffuso, e le principali piattaforme come iOS e Android sono dotate di numerosi strumenti per garantire l'accessibilità. È dunque importante prendere in considerazione l'accessibilità del tuo contenuto web su tali piattaforme. Questo articolo propone considerazioni sull'accessibilità specificamente pensate per dispositivi mobili.
+
+ +

Test di valutazione

+ +
+
Risoluzione di problemi di accessibilità 
+
Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.
+
+ +

Vedi anche

+ + diff --git "a/files/it/learn/accessibilit\303\240/multimedia/index.html" "b/files/it/learn/accessibilit\303\240/multimedia/index.html" new file mode 100644 index 0000000000..f920e59050 --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/multimedia/index.html" @@ -0,0 +1,392 @@ +--- +title: Accessibilità multimediale +slug: Learn/Accessibilità/Multimedia +tags: + - Accessibilità + - Articolo + - Audio + - Didascalie + - HTML + - Immagine + - JavaScript + - Multimedia + - Principiante + - Sottotitoli + - Tracce testuali + - Video +translation_of: Learn/Accessibility/Multimedia +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}
+ +

Un’altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l’accessibilità di questo tipo di contenuti.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e una idea chiara di cosa è l'accessibilità.
Obiettivo:Comprendere i problemi di accessibilità relativi agli elementi multimediali, e come risolverli.
+ +

Multimedia e accessibilità

+ +

Fino ad ora in questo modulo sull’accessibilità abbiamo preso in considerazione le procedure necessarie per rendere accessibili una varietà di contenuti: da semplice contenuto testuale a tabelle di dati, immagini, controlli nativi come campi di formulari e bottoni, e anche strutture e intefacce più complesse (con le quali si usano gli attributi WAI-ARIA).

+ +

Questo articolo si occupa di un’altra classe di contenuti per i quali solitamente non è facile garantire una buona accessibilità: i contenuti multimediali. Immagini, video, elementi <canvas>, filmati Flash ecc. non sono facili da interpretare per i lettori di schermo, né da navigare tramite tastiera.

+ +

Ma non ti preoccupare, in questo articolo ti mostreremo le tecniche disponibili per rendere il contenuto multimediale accessibile.

+ +

Immagini

+ +

Abbiamo già discusso delle alternative testuali per le immagini in HTML nell’articolo HTML: una buona base per l’accessibilità: fai riferimento all’articolo per maggiori dettagli. Riassumendo in poche parole l’articolo, per garantire l’accessibilità delle immagini devi assicurarti che al contenuto visuale sia associato un testo alternativo che descriva dettagliatamente l’immagine, e che tale contenuto possa essere letto dai lettori di schermo.

+ +

Per esempio:

+ +
<img src="dinosaur.png"
+     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.">
+
+ +

Controlli audio e video accessibili

+ +

Implementare controlli di riproduzione per elementi audio e video non dovrebbe essere un problema no? Diamo un’occhiata.

+ +

Il problema con i controlli nativi in HTML5

+ +

Gli elementi audio e video di HTML5 hanno un set di controlli nativi che permettono di gestire la riproduzione dei contenuti multimediali. Per esempio (vedi native-controls.html, codice sorgente e versione live):

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Il tuo browser non supporta l’audio in HTML5. Puoi scaricare il file per ascoltarlo. Qui trovi il <a href="viper.mp3">link al file audio.</p>
+</audio>
+
+<br>
+
+<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il <a href="rabbit320.mp4"> link al file video.</p>
+</video>
+ +

L’attributo controls fornisce il bottone play/pausa, uno slider di posizionamento e altri controlli basici di un lettore multimediale generico. In Firefox e Chrome i controlli HTML5 hanno questo aspetto:

+ +

Screenshot of Video Controls in Firefox

+ +

Screenshot of Video Controls in Chrome

+ +

Tuttavia, ci sono alcuni problemi associati a questi controlli:

+ + + +

Per porre rimedio a queste limitazioni, possiamo creare i nostri propri controlli personalizzati. Vediamo come fare.

+ +

Creare controlli audio e video personalizzati

+ +

Gli elementi audio e video di HTML5 hanno in comune una API, chiamata HTML Media Element, che permette di applicare funzionalità personalizzate ai bottoni e ad altri controlli definiti dallo sviluppatore.

+ +

Aggiungiamo ora controlli personalizzati al video di esempio qui sopra.

+ +

Setup basico

+ +

 

+ +

Per prima cosa, salva una copia dei file controlli-custom-start.html, controlli-custom-controls.css, rabbit320.mp4 e rabbit320.webm in una cartella del tuo hard-disk.

+ +

Crea un nuovo file chiamato main.js e salvalo nella stessa cartella.

+ +

Ora diamo un’occhiata al codice HTML del lettore video:

+ +
<section class="player">
+  <video controls>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il <a href="rabbit320.mp4"> link al file video.</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>
+ +

Setup basico di JavaScript

+ +

 

+ +

Abbiamo inserito alcuni bottoni nella barra dei controlli posizionata sotto al video. Tali controlli ovviamente non funzionano di default; è necessario usare JavaScript per assegnargli una funzionalità.

+ +

Innanzitutto dobbiamo creare variabli di riferimento per ognuno dei controlli. Aggiungi il seguente codice al tuo file 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');
+ +

In seguito dobbiamo creare una variabile di riferimento al lettore audio/video stesso. Aggiungi questa linea al codice aggiunto in precedenza:

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

 

+ +

Questa variabile fa riferimento a un oggetto HTMLMediaElement, che contiene numerosi metodi e proprietà che si possono usare per assegnare funzionalità ai nostri bottoni.

+ +

Prima di procedere ad assegnare funzionalità ai nostri bottoni rimuoviamo i controlli nativi, di modo che non si possano verificare conflitti con i nostri controlli personalizzati. Aggiungi il seguente codice, al fondo del tuo file JavaScript:

+ +

 

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

Usando questo metodo, anziché quello di evitare di includere l’attributo controls dal principio, ha il vantaggio che, se il nostro codice JavaScript smettesse di funzionare per una qualsiasi ragione, i controlli nativi si riattiveranno automaticamente, permettendo agli utenti di continuare a usare i contenuti multimediali.

+ +

Collegare i nostri bottoni

+ +

Come primo passo, attiviamo il bottone Play/pausa. Possiamo alternare gli stati di play e pausa usando una semplice funzione condizionale, come la seguente. Aggiungila al fondo del tuo codice JavaScript:

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

In seguito, aggiungi questo codice, che controlla il bottone Stop:

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

 

+ +

Non esiste una funzione stop() nativa negli elementi HTMLMediaElement, dunque al suo posto usiamo pause(), e allo stesso tempo resettiamo a zero il tempo di riproduzione currentTime.

+ +

Aggiungiamo ora i bottoni Riavvolgimento e Avanzamento Rapido. Aggiungi i seguenti blocchi di codice in fondo al file:

+ +

 

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

 

+ +

Questi bottoni sono controlli molto basici, non fanno altro che far avanzare o tornare indietro il video di 3 secondi ogni volta che vengono cliccati. In una applicazione reale probabilmente vorrai aggiungere uno slider di posizionamento più elaborato o qualcosa di simile.

+ +

Nota inoltre che ogni volta che il bottone di Avanzamento Rapido viene cliccato controlliamo se il momento attuale della riproduzione currentTime è maggiore del tempo totale duration, o se la riproduzione è in pausa. Se una delle due condizioni è vera fermiamo la riproduzione del video, per evitare che si verifichino errori nel lettore multimediale se l’utente cerca di avanzare oltre la fine del video o quando il video si trova in stato di pausa.

+ +

Come ultimo passo, aggiungi questo codice al fondo del file, per controllare il display del tempo trascorso:

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

Ogni volta che il tempo si aggiorna (ogni secondo), questa funzione viene eseguita. A partire dal valore di currentTime, che si esprime in secondi, la funzione calcola il numero di minuti e secondi trascorsi, aggiunge uno 0 davanti al numero di minuti o secondi se tale numero è inferiore a 10, dà al risultato il formato “minuti:secondi” e infine lo invia al display timeLabel perchè sia mostrato all’utente.

+ +

Ulteriori letture

+ +

Quanto spiegato finora ti dà un’idea basica di come aggiungere funzionalità personalizzate ai lettori audio/video. Per maggiori informazioni su come aggiungere funzionalità più complesse, incluso come utilizzare Flash come fallback per i browser più vecchi, vedi gli articoli (in inglese):

+ + + +

Abbiamo inoltre creato un esempio avanzato che mostra come si può creare un sistema orientato ad oggetti che trova ogni lettore audio o video presente in una pagina e gli aggiunge i nostri controlli personalizzati. Vedi custom-controls-oojs (qui trovi il codice sorgente).

+ +

Trascrizioni audio

+ +

Per rendere i contenuti audio accessibili alle persone con difficoltà auditive devi ricorrere a trascrizioni testuali. Le trascrizioni possono includersi nella stessa pagina dove l’audio viene riprodotto, o in una pagina separata collegata ad essa con un link.

+ +

Dal punto di vista pratico, le opzioni per la creazione delle trascrizioni sono:

+ + + +

NON è una buona pratica quella di pubblicare del contenuto audio e promettere di pubblicare le trascrizioni in un secondo momento. Spesso tali promesse non vengono compiute, danneggiando la fiducia che gli utenti ripongono in chi pubblica il contenuto. Nel caso in cui l’audio che si pubblica sia un dialogo o un evento come una conferenza pubblica, è accettabile pubblicare note riassuntive del contenuto insieme all’audio.

+ +

Esempi di trascrizioni

+ +

Se ricorri a un servizio di trascrizione automatico, probabilmente dovrai usare l’interfaccia utente fornita dal servizio. Per esempio, apri il video Audio Transcription Sample 1 e clicca sui tre puntini delle opzioni aggiuntive. In seguito clicca su Apri trascrizione.

+ +

Se stai creando una interfaccia personalizzata per presentare il tuo contenuto audio e le relative trascrizioni, tieni in considerazione l’idea di includere un pannello-trascrizioni che appare/scompare; vedi il nostro esempio audio-transcript-iu  (vedi anche il codice sorgente).

+ +

Descrizioni audio

+ +

 

+ +

Se al contenuto audio è associato anche un contenuto visuale, devi fornire descrizioni audio di tale contenuto visuale.

+ +

In molti casi si tratterà di contenuto video, e in tal caso puoi associargli didascalie usando le tecniche descritte nella prossima sezione di questo articolo.

+ +

 

+ +

Tuttavia ci sono dei casi limite. Per esempio, potresti dover pubblicare una registrazione audio di una conferenza durante la quale si fa riferimento a una risorsa visuale, come una tabella o un grafico. In tali casi, dovresti fare in modo che tali risorse vengano fornite insieme all’audio e alla trascrizione, avendo cura di porre un link alle risorse nel punto della trascrizione in cui si fa riferimento ad esse. Questo procedimento sarà di aiuto a tutti gli utenti, non solo alle persone con difficoltà auditive.

+ +
+

Nota: una trascrizione audio sarà utile a vari tipi di utente. Oltre a permettere alle persone con difficoltà auditive di accedere al contenuto audio, sarà molto utile anche agli utenti che navigano con una connessione lenta, che probabilmente preferiscono non scaricare il contenuto audio. Pensa inoltre a un utente che si trova in un ambiente rumoroso, come un pub, e non può udire il contenuto audio correttamente.

+
+ +

Tracce testuali nei video

+ +

Per rendere i contenuti video accessibili a persone con difficoltà auditive o visive, e anche ad altri gruppi di utenti, come per esempio quelli che non capiscono la lingua che si parla nel video, devi associare al contenuto video una traccia testuale.

+ +
+

Nota: le tracce testuali sono utili ad ogni tipo di utente, non solo a chi ha una disabilità. Per esempio, un utente potrebbe non essere in grado di udire l’audio perchè si trova in un ambiente rumoroso, come un bar affollato, o un altro potrebbe decidere di togliere l’audio a un video per non disturbare chi gli sta vicino, se si trova per esempio in una biblioteca.

+
+ +

Non si tratta certo di un concetto nuovo, le stazioni televisive usano le tracce testuali già da moltissimo tempo:

+ +

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

+ +

Molti paesi trasmettono i film in inglese con sottotitoli nella lingua del paese, e spesso nei film in DVD si trovano disponibili tracce testuali in varie lingue. Per esempio:

+ +

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

+ +

Esistono diversi tipi di traccia testuale, con differenti scopi. I tipi principali sono:

+ + + +

Implementare le tracce testuali in HTML5

+ +

Le tracce testuali da mostrarsi associate a un video in HTML5 devono essere scritte in WebVTT, un formato che contiene stringhe di testo associate a metadati come il momento del video in cui si desidera mostrare ogni stringa, e anche informazioni sullo stile e il posizionamento della stringa. Tali stringhe di testo sono chiamate “cues”.

+ +

Un file WebVTT tipico è più o meno così:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+Questo è il primo sottotitolo.
+
+2
+00:00:30.739 --> 00:00:34.074
+Questo è il secondo.
+
+  ...
+ +

To get this displayed along with the HTML media playback, you need to:

+ + + +

Un esempio:

+ +
<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 risultato sarà un video sottotitolato, simile a questo: 

+ +

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

+ +

Per maggiori dettagli leggi l’articolo (in inglese) Adding captions and subtitles to HTML5 video. Puoi trovare l’esempio che appare nell’articolo su Github, scritto da Ian Devlin (vedi anche il codice sorgente). Questo esempio, tramite l’uso di JavaScript, permette agli utenti di scegliere tra differenti sottotitoli. Nota che, per attivare i sottotitoli, devi premere il bottone “CC” e selezionare una opzione tra inglese, tedesco o spagnolo.

+ +
+

Nota: le tracce testuali e le trascrizioni contribuiscono anche al SEO, poichè i motori di ricerca danno molta importanza al contenuto testuale. Le tracce testuali possono perfino permettere ai motori di ricerca di ridirigere l’utente a un punto specifico del video.

+
+ +

Altro contenuto multimediale

+ +

Le sezioni precedenti non trattano tutti i tipi di contenuto multimediale che potresti voler usare sul tuo sito o applicazione. Potresti trovarti a dover gestire giochi, animazioni, slideshow, video inseriti da fonti esterne, o altro contenuto creato usando tecnologie come:

+ + + +

Per tali contenuti è necessario gestire i problemi di accessibilità secondo ogni caso particolare. In alcuni casi non è particolarmente difficile, per esempio:

+ + + +

Tuttavia, ci sono altri tipi di contenuto multimediale per i quali non è facile implementare l’accessibilità. Per esempio, se stai lavorando su un gioco immersivo in 3D o una applicazione di realtà virtuale, è realmente difficile fornire alternative testuali per tale tipo di esperienza. D’altro canto si può obiettare che le persone con vista ridotta non sono parte del target di pubblico di tali applicazioni.

+ +

Dovresti comunque assicurarti che tale tipo di applicazioni abbiano un contrasto dei colori ottimale, di modo che siano più facilmente visualizzabili a persone con vista ridotta o daltonismo. Inoltre dovresti fare tutto il possibile per renderli accessibili da tastiera. Ricorda che è necessario cercare di fare sempre tutto il possibile invece di puntare al 100% dell’accessibilità in ogni situazione, un obiettivo spesso impossibile da raggiungere.

+ +

Riassunto

+ +

Questo articolo ha fornito una sintesi dei problemi di accessibilità relativi ai contenuti multimediali, e inoltre alcune soluzioni pratiche a tali problemi.

+ +

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

+ +

 

+ +

In questo modulo

+ + + +

 

diff --git "a/files/it/learn/accessibilit\303\240/wai-aria_basics/index.html" "b/files/it/learn/accessibilit\303\240/wai-aria_basics/index.html" new file mode 100644 index 0000000000..09891c8a11 --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/wai-aria_basics/index.html" @@ -0,0 +1,422 @@ +--- +title: Basi della tecnologia WAI-ARIA +slug: Learn/Accessibilità/WAI-ARIA_basics +tags: + - ARIA + - Accessibilità + - Articolo + - Guida + - HTML + - HTML semantico + - JavaScript + - Principiante + - WAI-ARIA +translation_of: Learn/Accessibility/WAI-ARIA_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}
+ +

Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, aver letto i precedenti articoli del corso.
Obiettivo:Acquisire familiarità con la tecnologia WAI-ARIA e imparare a usarla dove necessario per fornire valore semantico addizionale che migliori l'accessibilità.
+ +

Cosa è WAI-ARIA?

+ +

Cominciamo col dare un'occhiata a cosa è WAI-ARIA, e in che modo ci può essere utile.

+ +

Un nuovo set di problemi

+ +

Man mano che le applicazioni web cominciarono ad essere sempre più complesse e dinamiche, nuovi problemi di accessibilità iniziarono a manifestarsi.

+ +

Per esempio, HTML5 ha introdotto alcuni elementi semantici per definire componenti di uso comune nelle pagine ({{htmlelement("nav")}}, {{htmlelement("footer")}}, ecc.). Prima dell'arrivo di questi elementi, gli sviluppatori si limitavano a usare {{htmlelement("div")}} con ID o classi, per esempio <div class="nav">. Ma questi elementi erano problematici, perchè non fornivano un sistema standard per individuare programmaticamente i componenti di una pagina, dunque i lettori di schermo non potevano distinguere chiaramente le varie sezioni da cui la pagina era composta. 

+ +

La soluzione inizialmente consisteva nell’aggiungere uno o più link nascosti nella parte alta della pagina. Tali link reindirizzavano alle varie sezioni della pagina, come per esempio la barra di navigazione:

+ +
<a href="#hidden" class="hidden">Vai alla barra di navigazione</a>
+ +

 

+ +

Ma questo sistema non è molto preciso, e può essere usato solo quando il lettore di schermo comincia a leggere dalla parte alta della pagina.

+ +

Per fare un altro esempio, ad un certo punto le applicazioni cominciarono a includere controlli complessi come selezionatori di data o slider per selezionare valori. HTML5 mette a disposizione alcuni tipi speciali di input nativi, specifici per tali controlli:

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

Ma questi elementi non sono supportati da tutti i browser, ed inoltre sono molto difficili da personalizzare, rendendoli complicati da integrare nel disegno di un sito. Di conseguenza, gli sviluppatori spesso fanno uso di librerie JavaScript e creano tali controlli come una serie di {{htmlelement("div")}} annidati o elementi di una tabella a cui assegnano classi, e in seguito li personalizzano con CSS e li controllano con funzioni di JavaScript.

+ +

Il problema di questo metodo è che i lettori di schermo non riescono ad interpretare di cosa si tratta, e riportano solo la presenza di una serie di elementi dei quali non possono descrivere la funzione.

+ +

E arrivò WAI-ARIA

+ +

WAI-ARIA è una specifica, cioè una raccolta di indicazioni, prodotta dal W3C, che definisce una serie di attributi HTML addizionali che possono essere applicati agli elementi per fornire maggior valore semantico e migliorare l'accessibilità dovunque sia necessario. Ci sono tre caratteristiche principali definite nella raccolta:  

+ + + +

Un punto importante da tenere in considerazione riguardo gli attributi WAI-ARIA è che non influiscono in alcun modo sulla pagina, eccetto che sulle informazioni fornite dalla API di accessibilità del browser (dalla quale i lettori di schermo prendono le informazioni). WAI-ARIA non cambia la struttura della pagina, il DOM o altro, anche se i suoi attributi possono essere utili per selezionare gli elementi in CSS.

+ +
+

Nota: puoi trovare una utile lista di tutti i ruoli ARIA e i loro usi, con link a informazioni più approfondite, nella specifica WAI-ARIA: vedi Definizione di Ruoli (in inglese).

+ +

La specifica contiene anche una lista delle proprietà e degli stati, con link ad ulteriori informazioni. Vedi  Definizioni di Stati e Proprietà (in inglese).

+
+ +

Dove è supportata WAI-ARIA?

+ +

A questa domanda non è facile rispondere. È difficile trovare  una risorsa che indichi in maniera completa quali funzionalità di WAI-ARIA sono supportate e dove, perchè:

+ +
    +
  1. Ci sono molte funzionalità nella specifica WAI-ARIA.
    2. +
  2. Ci sono moltissime combinazioni possibili di sistemi operativi, browser e lettori di schermo.
    3. +
+ +

L'ultimo punto è fondamentale: per poter usare un lettore di schermo il tuo sistema operativo deve avere installato almeno un browser con la necessaria API di accessibilità, che fornisca ai lettori di schermo le informazioni necessarie perchè funzionino. La maggior parte dei sistemi operativi ha di serie uno o due browser che funzionano con i lettori di schermo. Sul sito di Paciello Group si può trovare una guida aggiornata costantemente che fornisce dati sul supporto dei lettori di schermo nei vari sistemi operativi. Vedi l'articolo (in inglese) Guida: browser, sistemi operativi e supporto per i lettori di schermo.

+ +

Il seguente passo è assicurarsi che i browser usati supportino la tecnologia ARIA e la trasmettano tramite le loro API, ma anche che i lettori di schermo riconoscano le informazioni che ricevono e le presentino agli utenti in una forma ottimale.

+ +
    +
  1. Il supporto dei browser in generale è molto buono. Al momento della stesura di questo articolo, il sito caniuse.com riporta un livello globale di supporto di WAI-ARIA nei vari browser di circa l'88%.
    2. +
  2. Il supporto di ARIA nei lettori di schermo non è al momento a un livello comparabile, ma i lettori di schermo più popolari stanno facendo grandi sforzi per migliorare la compatibilità con WAI-ARIA.  Puoi farti un'idea del livello di supporto leggendo l'articolo (in inglese) Compatibilità dei lettori di schermo con WAI-ARIA .
    3. +
+ +

In questo articolo non spiegheremo tutte le funzionalità di WAI-ARIA e i dettagli sul supporto che hanno. Cercheremo invece di presentare le funzionalità più importanti e utili agli sviluppatori web; in generale se non facciamo riferimento al livello di supporto di una funzionalità, puoi considerare che il supporto è ragionevolmente buono. In caso di eccezioni lo indicheremo esplicitamente.

+ +
+

Nota: alcune librerie JavaScript supportano WAI-ARIA. Ciò significa che quando generano elementi IU, come per esempio formulari complessi, aggiungono automaticamente attributi ARIA per migliorarne l'accessibilità. Se stai valutando l'utilizzo di una libreria Javascript per sviluppare elementi IU più rapidamente, dovresti tenere in conto il livello di accessibilità della libreria quando scegli quale usare. Buoni esempi sono jQuery UI (vedi l'articolo in inglese jQuery UI: supporto all'accessibilità), ExtJS, e Dojo/Dijit.

+
+ +

Quando dovresti usare WAI-ARIA?

+ +

Abbiamo già discusso di alcuni dei problemi che hanno spinto alla creazione di WAI-ARIA, dovuti soprattutto alla crescente complessità delle moderne applicazioni web. Essenzialmente ci sono 4 grandi aree in cui WAI-ARIA è utile: 

+ +
    +
  1. Indicatori/riferimenti: gli attributi role possono funzionare come descrizioni che fanno riferimento a elementi HTML5 replicandone il valore semantico (per esempio {{htmlelement("nav")}}), oppure possono andare oltre HTML5, e funzionare come indicatori che descrivono differenti aree funzionali, per esempio search, tabgroup, tab, listbox, ecc.
    2. +
  2. Aggiornamento dinamico del contenuto: i lettori di schermo in generale hanno difficoltà a indicare quando il contenuto subisce cambiamenti; con ARIA possiamo usare aria-live per indicare agli utenti che usano lettori di schermo quando un' area del contenuto viene aggiornata, per esempio tramite XMLHttpRequest, o DOM APIs .
    3. +
  3. Migliorare l'accessibilità da tastiera: ci sono elementi HTML che hanno accessibilità da tastiera nativa; quando però invece di usare tali elementi se ne usano altri che li "simulano" in combinazione con JavaScript, l'accessibilità da tastiera e la qualità di lettura dei lettori di schermo ne risentono. In questi casi possiamo usare WAI-ARIA per dare focus a tali elementi  (usando tabindex).
    4. +
  4. Accessibilità dei controlli non semantici: quando si usano una serie di <div> annidati in combinazione con CSS e JavaScript per creare una funzionalità IU particolarmente complessa, oppure quando un controllo nativo viene notevolmente modificato tramite JavaScript, l'accessibilità può risultare danneggiata. Gli utenti che usano lettori di schermo troveranno difficile capire come funzionano tali elementi se non ci sono indicazioni semantiche che lo spieghino. In situazioni come queste la tecnologia ARIA può aiutare a fornire le indicazioni necessarie tramite una combinazione di ruoli come button, listbox, o tabgroup, e proprietà come aria-required o aria-posinset.
    5. +
+ +

Ricorda: dovresti ricorrere a WAI-ARIA solo quando è necessario! Idealmente, dovresti usare sempre funzionalità HTML native per fornire le indicazioni semantiche necessarie ai lettori di schermo per interpretare correttamente il contesto. A volte però ciò non è possibile, forse perchè non hai pieno controllo sul codice, o perchè stai creando qualcosa di particolarmente complesso, che non puoi implementare con un elemento HTML standard. In tali casi, WAI-ARIA può essere un utile strumento di miglioramento dell'accessibilità. 

+ +

Ma ricorda, usala solo quando è necessario!

+ +
+

Nota: cerca di testare il tuo sito con la maggior varietà possibile di utenti reali: persone non disabili, persone che usano lettori di schermo, persone che navigano con la tastiera, ecc. Queste persone sapranno indicarti cosa funziona e cosa no in maniera molto più accurata di ciò che può emergere se ti limiti ad effettuare test di utilizzo in prima persona.

+
+ +

Esempi di uso pratico di WAI-ARIA 

+ +

Nella prossima sezione analizzeremo le 4 aree di utilizzo di WAI-ARIA più dettagliatamente, e forniremo alcuni esempi pratici. Prima di continuare però, dovresti attivare un lettore di schermo, per poter testare alcuni degli esempi.

+ +

Vedi la sezione (in inglese) sul testing con lettori di schermo per maggiori informazioni.

+ +

Indicatori/riferimenti

+ +

WAI-ARIA trasmette ai browser l'attributo role, che permette di aggiungere valore semantico extra agli elementi del tuo sito dovunque sia necessario. La principale utilità di questo attributo è che permette agli utenti che usano lettori di schermo di individuare più facilmente gli elementi più comuni delle pagine. Vediamo un esempio:  il nostro sito senza attributi role (vedi la versione live) ha la seguente struttura:

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

Se provi a navigare il sito con un lettore di schermo in un browser moderno, riceverai diverse informazioni utili. Per esempio, VoiceOver fornisce le seguenti indicazioni:

+ + + +

Se ti rechi nella sezione Rotore di VoiceOver (premendo VO-U), vedrai che la maggior parte degli elementi più importanti sono elencati ordinatamente e si può accedere ad essi rapidamente.

+ +

+ +

Ma in realtà, la situazione è migliorabile. Il campo di ricerca è un punto di riferimento importante che gli utenti vorranno trovare, ma non compare nella lista degli elementi e non è trattato come un elemento di riferimento, a parte l'indicazione che si tratta di una casella di ricerca (<input type="search">). Inoltre, alcuni browser più vecchi (per esempio IE8), non riconoscono le indicazioni semantiche degli elementi HTML5. 

+ +

Possiamo migliorare il tutto usando alcune funzionalità ARIA. Per prima cosa aggiungiamo alcuni attributi role alla nostra struttura HTML. Il nostro  esempio di sito con ruoli aria (vedi la versione live) ha la seguente struttura:

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

C'è anche una funzionalità bonus in questo esempio: all'elemento {{htmlelement("input")}} è stato assegnato l'attributo aria-label, che fornisce ai lettori di schermo un’etichetta descrittiva, anche se non abbiamo incluso un elemento {{htmlelement("label")}}. In casi come questo è molto utile usare l’attributo ARIA. Un campo di ricerca è infatti un elemento molto comune e facilmente riconoscibile, e aggiungere una etichetta visuale potrebbe danneggiare il disegno della pagina.

+ +
<input type="search" name="q" placeholder="Scrivi qui ciò che vuoi cercare" aria-label="Campo per cercare nel contenuto del sito">
+ +

Se ora usiamo VoiceOver per navigare il sito d'esempio, notiamo alcuni miglioramenti:

+ + + +

Inoltre, il sito è ora maggiormente accessibile per utenti che navigano con browser antiquati come IE8; vale la pena includere ruoli ARIA anche per questo. E se per caso il tuo sito è stato costruito usando solo elementi <div>, dovresti decisamente includere i ruoli ARIA per fornire le necessarie semantiche!

+ +

Il valore semantico migliorato del campo di ricerca ha mostrato cosa è possibile fare quando ARIA va oltre le semantiche disponibili con HTML5. Potrai sapere molto di più sulle semantiche e il potere delle proprietà/attributi ARIA qui sotto, specialmente nella sezione {{anch("Accessibilità dei controlli non semantici")}}. Per ora, vediamo come ARIA ci può aiutare a gestire gli aggiornamenti del contenuto dinamico.

+ +

Aggiornamenti del contenuto dinamico

+ +

In generale tutto il contenuto caricato nel DOM può essere facilmente interpretato usando un lettore di schermo, dal contenuto testuale fino al testo alternativo delle immagini. I tradizionali siti statici con contenuto largamente testuale sono dunque facili da rendere accessibili alle persone con deficit visivo.

+ +

Il problema è che le applicazioni web moderne spesso non sono composte da testo statico, di solito hanno una gran quantità di contenuto che si aggiorna dinamicamente, cioè contenuto che si agigorna senza che l'intera pagina si ricarichi, tramite meccanismi come XMLHttpRequest, Fetch, o DOM APIs. Queste aree del contenuto sono talvolta chiamate “aree vive”, o  live regions.

+ +

Consideriamo un esempio: aria-no-live.html (vedi anche la versione live). In questo esempio troviamo un paragrafo contenente una citazione selezionata casualmente:

+ +
<section>
+  <h1>Citazione casuale</h1>
+  <blockquote>
+    <p></p>
+  </blockquote>
+</section>
+ +

JavaScript riceve tramite XMLHttpRequest un file JSON contenente una serie di citazioni con il rispettivo autore. Dopo che la prima citazone tratta dal file è stata caricata nel paragrafo si attiva un loop setInterval() che carica una nuova citazione nel paragrafo ogni 10 secondi:

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

Questo sistema funziona correttamente , ma non è ottimale in termini di accessibilità. Gli aggiornamenti del contenuto non sono rilevati dai lettori di schermo, e gli utenti che li usano non possono rendersi conto di ciò che sta succedendo. Questo esempio è molto basico, ma prova a immaginare cosa succederebbe se stessi creando una interfaccia utente più complessa, con molte aree del contenutto che si aggiornano costantemente, come una chat room, un gioco strategico o magari un sito di e-commerce con un carrello della spesa che si aggiorna con i prodotti selezionati dall'utente. Sarebbe impossibile utilizzare l'applicazione con un lettore di schermo, in assenza di un sistema che avverta gli utenti degli aggiornamenti del contenuto.

+ +

Fortunatamente WAI-ARIA ci mette a disposizione un utile meccanismo per fornire tali avvertimenti, la proprietà aria-live. Applicarla a un elemento fa sì che i lettori di schermo leggano il contenuto che viene aggiornato. Con quanta frequenza il contenuto viene letto dipende dal valore assegnato:

+ + + +

Generalmente, assegnare il valore assertive è sufficiente perchè gli aggiornamenti vengano annunciati in tempo reale, anche se nel caso di aggiornamenti di multiple aree di contenuto che avvengono allo stesso tempo i vari aggiornamenti saranno annunciati in sequenza, quindi con la possibilità di un breve ritardo sul tempo reale. Si raccomanda di usare rude solo per aggiornamenti ad alta priorità che devono "passare davanti" agli altri aggiornamenti in corso.

+ +

Prova a realizzare una copia di aria-no-live.html e quotes.json, e modificare l'etichetta <section> così:

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

D'ora in poi il lettore di schermo leggerà il contenuto ogni volta che quest'ultimo sarà aggiornato.

+ +
+

Nota: : la maggior parte dei browser attiverà una security exception se provi ad effettuare un XMLHttpRequest da un URL file://. Per esempio se carichi il file direttamente nel browser (facendo doppio click). Per farlo funzionare, devi caricare il file a un server, per esempio usando GitHub (articolo in inglese), o un server locale come Python's SimpleHTTPServer (articolo in inglese).

+
+ +

C'è però una considerazione da tenere in conto: il lettore di schermo legge solo la parte del testo che viene aggiornata. È utile dunque che legga anche l'heading, per aiutare l'utente a ricordare quale sezione della pagina è stata aggiornata. Per farlo, possiamo aggiungere la proprietà aria-atomic alla sezione. Modifica la tua etichetta <section> così:

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

L'attributo aria-atomic="true" indica al lettore di schermo che deve leggere l'intero contenuto dell'elemento, non solo le parti che sono state aggiornate.  

+ +
+

Nota: : puoi vedere l'esempio completo qui: aria-live.html (vedi anche la versione live).

+
+ +
+

Nota: : la proprietà aria-relevant è utile per controllare cosa viene letto quando un'area di contenuto viene aggiornata. Per esempio puoi far si che siano lette solo le parti aggiunte o al contrario le parti rimosse dal contenuto.

+
+ +

Migliorare l'accessibilità da tastiera

+ +

Come abbiamo già detto in altri articoli di questo modulo, uno dei punti forti di HTML in termini di accessibilità è che implementa automaticamente l'accessibilità da tastiera per funzionalità come i bottoni, i campi dei formulari e i link. In generale, puoi sempre usare il tasto TAB per muoverti da un elemento all'altro e il tasto INVIO per selezionare o attivare gli elementi. In alcune circostanze puoi anche usare altri tasti (per esempio le frecce, per muoverti su e giù tra le opzioni di una lista <select>).

+ +

Ciononostante, a volte ti troverai a dover scrivere codice che fa uso di elementi non semantici che compiono la funzione di bottoni (o altri tipi di elementi), o codice che usa elementi che possono ricevere focus per scopi diversi dal normale. Forse starai cercando di sistemare del codice mal scritto in precedenza, o di costruire un qualche tipo di widget complesso che richiede tecniche non ortodosse.

+ +

Per rendere focalizzabili elementi che normalmente non lo sono, WAI-ARIA estende l'attributo tabindex con alcuni nuovi valori:

+ + + +

Abbiamo discusso questi valori in maggior dettaglio e mostrato una implementazione tipica nel nostro articolo sull'accessibilità in HTML, vedi Implementare l'accessibilità da tastiera in un secondo tempo.

+ +

Accessibilità dei controlli non semantici

+ +

Proseguendo con il tema trattato nella sezione precedente, quando si usa una serie di <div> annidati in congiunto con CSS o JavaScript per creare una funzionalità complessa per l’interfaccia utente, o se si cambia/migliora sostanzialmente un controllo nativo tramite JavaScript, non solo è possibile che l’accessibilità da tastiera ne risulti ridotta, ma anche per gli utenti che usano lettori di schermo potrebbero prodursi difficoltà a comprendere l’uso della funzionalità, se non ci sono indicazioni semantiche o altri indizi. In tali situazioni, ARIA può aiutare a fornire il valore semantico addizionale necessario. 

+ +

Validazione di formulari e avvisi di errore

+ +

Innanzitutto, rivediamo l’esempio di formulario che avevamo preso in considerazione nell’articolo sull’accessibilità in CSS e JavaScript (vedi Mantieni un uso non intrusivo di JavaScript). Alla fine di tale sezione abbiamo mostrato alcuni attributi ARIA che sono stati aggiunti al messaggio che appare se ci sono errori di validazione quando provi a inviare il formulario:

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

Possiamo ora procedere oltre con il nostro utilizzo di ARIA, e fornire ulteriore assitenza nella validazione dei dati. Per esempio, perchè non indicare dal principio quali campi sono obbligatori, e quale intervallo di età è permesso introdurre?

+ +
    +
  1. A questo punto, salva sul tuo dispositivo una copia dei files  validazione-formulario.html e validazione.js.
    2. +
  2. Aprili entrambi in un editor di testo e dai un’occhiata a come funziona il codice.
    3. +
  3. Per prima cosa, aggiungi un paragrafo come quello che vedi qui sotto giusto prima della etichetta di apertura del formulario <form>, e marca entrambe le etichette <label> del formulario con un asterisco. Questo è il metodo con cui normalmente si segnalano i campi obbligatori agli utenti che non hanno limitazioni visuali. + 
    <p>I campi marcati con un asterisco (*) sono obbligatori.</p>
    +
    4. +
  4. Questa indicazione è utile dal punto di vista visuale, ma non è facile da cogliere per gli utenti che usano lettori di schermo. Fortunatamente, WAI-ARIA fornisce l’attributo  aria-required , che suggerisce al lettore di schermo di indicare all’utente quali sono i campi del formulario che devono essere compilati obbligatoriamente. Aggiorna gli elementi <input> come vedi qui sotto:                                                              
    5. +
  5. + 
    <input type="text" name="name" id="name" aria-required="true">
+
+<input type="number" name="age" id="age" aria-required="true">
    +
    6. +
  6. A questo punto se salvi l’esempio e lo testi con un lettore di schermo dovresti ascoltare qualcosa come “Introduci il tuo nome asterisco, obbligatorio, modifica testo”.
    7. +
  7. Potrebbe inoltre risultare utile indicare agli utenti l’intervallo di anni dentro il quale dovrebbe situarsi il valore dell’età. Spesso tale valore si indica tramite un placeholder, ossia un valore indicativo che appare all’interno del campo quando non è ancora stato compilato. WAI-ARIA include le proprietà aria-valuemin e aria-valuemax per specificare un intervallo di valori minimo e massimo, ma queste proprietà al momento non hanno un supporto ampio; una caratteristica che gode di un migliore supporto è l’attributo HTML5 placeholder, che contiene un messaggio che viene mostrato nel campo quando l’utente non vi ha ancora introdotto nessun valore, e viene letto da un certo numero di lettori di schermo. Aggiorna il campo età come indicato qui: + 
    <input type="number" name="age" id="age" placeholder="introduci un numero compreso tra 1 e 150" aria-required="true">
    +
    8. +
+ +
+

Nota: puoi vedere un esempio completo qui: validazione-formulario-aggiornato.html.

+
+ +

WAI-ARIA permette inoltre alcune tecniche avanzate di etichettazione dei formulari, che vanno al di là del classico elemento {{htmlelement("label")}}. Abbiamo già discusso sull’utilizzo della proprietà aria-label per rendere un’etichetta {{htmlelement("label")}} invisibile agli utenti che non usano lettori di schermo (vedi la sezione Indicatori/riferimenti sopra). Ci sono anche altre tecniche di etichettazione che fanno uso di proprietà come aria-labelledby, se vuoi usare un elemento non-<label> come etichetta o se vuoi etichettare multipli campi del formulario con la stessa etichetta, e aria-describedby, se vuoi associare informazione aggiuntiva a un campo del formulario e vuoi che il lettore di schermo la legga. Vedi l’articolo in inglese  WebAIM's Advanced Form Labeling per maggiori dettagli.

+ +

Ci sono inoltre molte altre proprietà e attributi utili per indicare lo stato di un elemento di un formulario. Per esempio, si può usare aria-disabled="true" per indicare che un campo è disabilitato. Molti browser salteranno i campi disabilitati, e i lettori di schermo non li leggeranno, ma in alcuni casi saranno comunque indicati, dunque è una buona idea includere questo attributo per permettere al lettore di schermo di sapere che un campo è effettivamente disabilitato.

+ +

Se esiste la possibilità che lo stato di un campo cambi da disabilitato ad abilitato è buona norma indicarlo all’utente, e  inoltre spiegare le conseguenze di tale cambio. Per esempio, nel nostro formulario demo validazione-formulario-casella-disabilitata.html c’è una casella che, quando è selezionata, abilita un altro campo del formulario, tramite il quale si possono introdurre informazioni aggiuntive. Abbiamo preparato un paragrafo nascosto:

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

Questo elemento è nascosto alla vista tramite position: absolute. Quando la casella viene selezionata/deselezionata, il contenuto dell’area nascosta si aggiorna per segnalare agli utenti che usano lettore di schermo in che modo la struttura del formulario è cambiata dopo aver selezionato la casella; inoltre si aggiorna anche lo stato dell’attributo aria-disabled e si fornisce anche un indicazione visuale del cambio:

+ +
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 = 'I'Il campo strumenti suonati è ora abilitato; usalo per indicarci quali strumenti sai suonare.';
+  } else {
+    instruItem.input.disabled = true;
+    instruItem.label.style.color = '#999';
+    instruItem.input.setAttribute('aria-disabled', 'true');
+    instruItem.input.removeAttribute('aria-label');
+    hiddenAlert.textContent = ''Il campo Strumenti suonati è ora disabilitato.';
+  }
+}
+ +

Descrivere bottoni non semantici come bottoni

+ +

Ci è già capitato di discutere della accessiblità nativa di alcuni elementi come bottoni, link o campi di formulario, e dei problemi di accessibilità che sorgono quando si usano elementi sostitutivi per compiere le stesse funzioni di questi elementi. Vedi Controlli di interfaccia utente nell’articolo sull’accessibilità in HTML, e Migliorare l’accessibilità da tastiera, qui sopra). In molti casi è possibile restituire l’accessibilità da tastiera a tali elementi senza troppi problemi, usando tabindex e un poco di JavaScript.

+ +

Ma come fare con i lettori di schermo? Non potranno interpretare gli elementi sostitutivi come bottoni. Se facciamo un test con il nostro esempio  div-falsi-bottoni.html e un lettore di schermo, i falsi bottoni saranno segnalati all’utente con frasi come “Cliccami!, gruppo”, che risultano di difficile interpretazione.

+ +

Possiamo rimediare al problema usando un ruolo WAI-ARIA. Salva la pagina div-falsi-buttoni.html, e aggiungi role="button" ad ogni <div> che compie la funzione di bottone, come per esempio:

+ +
<div data-message="Questo messaggio viene dal primo bottone" tabindex="0" role="button">Cliccami!</div>
+ +

Se ora provi a navigare la pagina con un lettore di schermo, i bottoni saranno letti come “Cliccami!, bottone”, e tutto risulterà molto più chiaro.

+ +
+

Nota: non dimenticare che usare il corretto elemento semantico è sempre una opzione migliore. Se vuoi creare un bottone e non ci sono ragioni valide per non usare un elemento  <button>, dovresti usare un elemento <button>!

+
+ +

Guidare gli utenti nell’uso di widget complessi

+ +

Ci sono molti altri ruoli che danno la possibilità di assegnare ad elementi non semantici lo status di comuni elementi dell’interfaccia utente, elementi che vanno al di là di ciò che è disponibile nell’HTML standard, come per esempio  combobox, slider, tabpanel, tree. Puoi trovare alcuni utili esempi nella Deque university code library, per farti un'idea di come tali elementi possono essere resi accessibili.

+ +

Prendiamo in considerazione un esempio. Torniamo ad usare il nostro semplice infobox a schede (vedi Nascondere elementi nell’articolo sull’accessibilità in CSS e JavaScript), che puoi trovare qui: infobox a schede (vedi codice sorgente).

+ +

Questo esempio funziona perfettamente in termini di accessibilità da tastiera: puoi muoverti facilmente da una scheda all’altra usando il tasto TAB e selezionare una scheda con INVIO per visualizzarne il contenuto. È inoltre abbastanza accessibile se si usa un lettore di schermo, puoi infatti usare gli headings per navigare il contenuto anche senza vederlo. Ciò che però non risulterà del tutto chiaro è in cosa consiste il contenuto stesso: un lettore di schermo riporta il contenuto dell’infobox come composto da un lista di link e da dell’altro contenuto con tre headings. Non da nessuna indicazione di come i contenuti sono relazionati tra loro. Fornire all’utente indicazioni precise su come il contenuto è strutturato è sempre una buona idea.

+ +

Abbiamo creato una versione migliorata dell’esempio, chiamata aria-tabbed-info-box.html (vedi versione live). Abbiamo aggiornato l’interfaccia del box così:

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

Nota: il cambio più evidente è la rimozione dei link che erano presenti precedentemente nell’esempio. Ora si usano i componenti li della lista per identificare le schede. Questo procedimento rende il tutto meno confuso per gli utenti che usano lettori di schermo, in quanto i link che c’erano in precedenza non conducevano da nessuna parte, servivano solo a cambiare di scheda. Inoltre gli attributi aria-setsize e aria-posinset permettono ora di identificare chiaramente le schede tramite il lettore di schermo: in precedenza, con i link, il browser trasmetteva sempre al lettore “1 di 1”, e non “1 di 3”, “2 di 3”, ecc.

+
+ +

 

+ +

Le nuove funzionalità aggiunte all’infobox di esempio sono le seguenti:

+ + + +

Secondo i nostri test, questa nuova struttura ha migliorato sensibilmente l’accessibilità dell’infobox a schede. Le schede sono ora riconosciute come schede (ora il lettore pronuncia “scheda”, o perlomeno “tab”, in inglese), la scheda attualmente selezionata è chiaramente indicata, pronunciando il lettore la parola “selezionata” insieme al nome della scheda, e il lettore di schermo indica anche il numero della scheda in cui si trova l’utente. Inoltre, grazie ai valori di aria-hidden impostati (solo la scheda attualmente selezionata ha il valore aria-hidden="false"), il contenuto non nascosto è il solo che il lettore può leggere, rendendolo il tutto più facile e meno confuso da navigare per l’utente.

+ +

 

+ +
+

Nota: puoi assegnare l’attributo aria-hidden="true"  a qualsiasi contenuto che vuoi che sia ignorato dai lettori di schermo.

+
+ +

Riassunto

+ +

Questo articolo non è da considerarsi esaustivo per quanto riguarda tutte le funzionalità disponibili con la tecnologia WAI-ARIA, ma dovrebbe averti fornito informazioni sufficienti a capire come usarla, e come identificare le situazioni più comuni in cui avrai bisogno di ricorrere ad essa.

+ +

Vedi anche

+ + + +

{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}

diff --git a/files/it/learn/come_contribuire/index.html b/files/it/learn/come_contribuire/index.html new file mode 100644 index 0000000000..bd3d90966a --- /dev/null +++ b/files/it/learn/come_contribuire/index.html @@ -0,0 +1,88 @@ +--- +title: Come contribuire nell'area di MDN dedicata all'apprendimento +slug: Learn/Come_contribuire +tags: + - Apprendimento + - Articolo + - Contribuire + - Didattica + - Glossário + - Guida + - Materiale + - Principiante + - insegnante + - sviluppatore +translation_of: Learn/How_to_contribute +--- +

{{LearnSidebar}}

+ +

Se sei qui per la prima volta o dopo un'approfondita ricerca, probabilmente ti interessa contribuire all'area di MDN dedicata all'apprendimento. Questa è una grande notizia!

+ +

In questa pagina, troverai tutto ciò che ti occorre per iniziare a migliorare i contenuti dedicati all'apprendimento in MDN. Ci sono molte cose che puoi fare, a seconda del tempo a tua disposizione e se sei un principiante, uno sviluppatore web o un insegnante.

+ +
+

Nota: Puoi trovare una guida per scrivere un nuovo articolo nell'area dedicata all'apprendimento su Come scrivere un nuovo articolo per aiutare gli utenti a conoscere il Web.

+
+ +

Trova un compito specifico

+ +

I contributori stanno utilizzando una bacheca Trello per organizzare i propri compiti. In questo modo puoi trovare dei compiti specifici da fare nel progetto. Per essere coinvolto, basta creare un account Trello e avvisare Chris Mills per ricevere i permessi di scrittura sulla bacheca.

+ +

Contribuire è il modo migliore per divertirsi, imparando nuove cose. Se ti senti perso o hai domande, non esitare a raggiungerci nella nostra lista email o canale IRC (dettagli a fine pagina). Chris Mills guida gli argomenti per l'area apprendimento — Puoi anche contattarlo direttamente.

+ +

La seguente sezione fornisce delle idee generali di compiti che puoi fare.

+ +

Sono un principiante

+ +

Questo è meraviglioso! I principianti sono molto importanti e preziosi per creare materiale didattico e raccogliere feedback su di esso. In quanto diretto destinatario di questo materiale, riesci a restituire una prospettiva unica su di esso e ciò ti rende un elemento fondamentale del nostro team. Invece, se stai utilizzando i nostri articoli per imparare qualcosa ma ti trovi in difficoltà o trovi un articolo caotico, puoi sia correggerlo oppure farci sapere del problema affinché possiamo provvedere noi a correggerlo.

+ +

Di seguito sono riportati i modi in cui puoi contribuire:

+ +
+
Aggiungi tags ai nostri articoli (5 min)
+
Aggiungere dei tag ai contenuti di MDN è uno dei modi più semplici di dare il tuo contributo. Poichè molte delle nostre sezioni utilizzano i tags per aiutare a fornire le giuste informazioni, contribuire a definire i tags stessi è senz'altro un contributo molto prezioso. Da' un'occhiata alla lista dei lemmi del glossario e agli articoli didattici ancora privi di tags per iniziare a contribuire.
+
Leggi e correggi le voci del glossario (5 min)
+
In qualità di principiante, noi abbiamo bisogno della freschezza del tuo sguardo. Se una voce del glossario ti sembra difficile da comprendere, ciò significa che occorre migliorarla. Sentiti libero di operare qualunque cambiamento ritieni necessario. Se non ti sembra di essere in grado tu stesso di apportare eventuali correzioni, puoi comunque segnalarcelo alla nostra mailing list.
+
Scrivi una nuova voce del glossario (20 min)
+
Ecco il modo più efficace per imparare qualcosa di nuovo. Scegli un concetto che vorresti capire meglio e, mentre impari, scrivi la nuova voce del glossario che gli pertiene. Provare a spiegare qualcosa agli altri è un modo efficace di "fissare" quanto stai imparando nel tuo cervello e di elaborare tu stesso il significato delle cose. Tutto ciò, mentre stai cercando di aiutare qualcun altro: si vince tutti!
+
Leggi e controlla un articolo didattico (2 ore)
+
Compito molto simile al precedente (v. sopra); solo richiede maggior tempo, perchè questi articoli in genere sono più lunghi.
+
+ +

Sono uno sviluppatore

+ +

Fantastico! Le tue competenze tecniche sono proprio quello che ci serve per offrire ai principianti dei contenuti tecnicamente accurati. Poichè questa sezione di MDN è dedicata all'apprendimento del Web, fa in modo che le tue spiegazioni siano il più semplice possibile, ma non così semplici da risultare inutili. E' preferibile essere compresi piuttosto che esageratamente precisi.

+ +
+
Leggi e correggi le voci del glossario (5 min)
+
In quanto sviluppatore, vorremmo essere sicuri che farai in modo di rendere i nostri contenuti in maniera tecnicamente accurata ma non pedante. Sentiti libero di apportare tutte le correzioni del caso. Se vuoi confrontarti sui contenuti prima di intervenire, contattaci via mailing list o IRC channel.
+
Scrivi una nuova voce del glossario (20 min)
+
Rendere più chiaro il linguaggio tecnico è un ottimo metodo per imparare e, allo stesso tempo, per essere tecnicamente precisi. I principianti te ne saranno grati. Ci sono molti termini da definire che richiedono la tua attenzione. Scégline uno e sei pronto per cominciare.
+
Leggi e correggi un articolo didattico (2 ore)
+
Stessa cosa del controllare una voce del glossario (v. sopra); richiede solo un po' più di tempo perchè questi articoli sono generalmente più lunghi.
+
Scrivi un nuovo articolo didattico (4 ore o più)
+
In MDN mancano ancora semplici chiari articoli  dedicati all'utilizzo delle tecnologie per il Web (HTML, CSS, JavaScript, ecc). Ci sono anche contenuti ormai obsoleti che avrebbero bisogno di essere controllati e riorganizzati. Mettiti alla prova e contribuisci a rendere le tecnologie per il Web accessibili anche per i principianti.
+
Crea strumenti didattici interattivi , esempi di codice o esercizi  (? ore)
+
Ciascuno dei nostri articoli didattici prevede quello che chiamiamo materiale di "apprendimento attivo", perchè le persone imparano meglio se fanno loro stessi. Tale materiale è costituito da esercizi o contenuti interattivi, che consentono all'utente di applicare e manipolare i concetti espressi nell'articolo. Esistono diversi modi di creare contenuti didattici per l'apprendimento attivo, dal creare esempi di codice con JSFiddle o simili, alla composizione di contenuti interattivi e del tutto modificabili con Thimble. Scatena la tua fantasia!
+
+ +

Sono un insegnante

+ +

MDN ha una lunga storia di eccellenza tecnica, ma siamo ancora agli inizi per ciò che riguarda gli strumenti didattici migliori per insegnare ai principianti. Ecco dove il tuo aiuto è prezioso, come insegnante o facilitatore: puoi aiutarci a far sì che il nostro materiale fornisca un percorso didattico efficace e pratico per i nostri lettori.

+ +
+
Leggi e correggi una voce del glossario (15 min)
+
Controlla un lemma del glossario e séntiti libero di apportare tutte le correzioni del caso. Se vuoi confrontarti sul contenuto prima di modificarlo, puoi contattarci tramite la nostra mailing list o IRC channel.
+
Scrivi una nuova voce del glossario (1 ora)
+
Definizioni dei termini chiare e semplici e supervisione dei concetti di base del glossario sono elementi fondamentali per aiutare i principianti. La tua esperienza come educatore può essere molto utile per creare delle voci del glossario efficaci; ci sono molti termini da definire che richiedono la tua attenzione. Scégline uno e datti da fare.
+
Aggiungi illustrazioni e/o schemi agli articoli (1 ora)
+
Come saprai, le illustrazioni sono una parte inestimabile di qualunque contenuto didattico. Ecco una cosa che spesso ci manca qui in MDN e la tua abilità può far la differenza in questa sezione. Scorri gli articoli privi di illustrazioni e scégline uno cui vuoi aggiungere la parte grafica.
+
Leggi e correggi un articolo didattico (2 ore)
+
Compito simile alla correzione delle voci del glossario (v. sopra), ma richiede maggior tempo dal momento che gli articoli sono generalmente più lunghi.
+
Scivi un nuovo articolo didattico (4 ore)
+
Ci servono articoli chiari e semplici sull'ecosistema Web e sugli argomenti inerenti di tipo funzionale. Dal momento che questi articoli didattici hanno lo scopo di essere soprattutto educativi e non di coprire letteralmente tutto quello che c'è da sapere, la tua esperienza riguardo cosa e come sia effettivamente da trattare sarà di grande aiuto.
+
Inventa esercizi, questionari o strumenti didattici interattivi (? ore)
+
Tutti i nostri articoli didattici prevedono materiale di "apprendimento attivo". Tale materiale consiste in contenuti interattivi o esercizi, che aiuteranno gli utenti ad apprendere come utilizzare ed espandere i concetti espressi nell'articolo in questione. Ci sono molti modi in cui tu puoi contribuire qui, dal creare quiz al comporre nuovi contenuti interattivi e modificabili su Thimble. Scatena la tua fantasia!
+
Crea percorsi didattici (? ore)
+
Al fine di fornire tutorials di facile comprensione e nella corretta progressione, ci occorre organizzare i contenuti in percorsi didattici: è un modo di raccogliere contenuti preesistenti e individuare ciò che ancora manca, così da proporre gli argomenti per nuovi articoli didattici ancora da scrivere.
+
diff --git a/files/it/learn/common_questions/index.html b/files/it/learn/common_questions/index.html new file mode 100644 index 0000000000..966a03b29e --- /dev/null +++ b/files/it/learn/common_questions/index.html @@ -0,0 +1,139 @@ +--- +title: Common questions +slug: Learn/Common_questions +tags: + - CodingScripting + - Infrastructure + - Learn + - NeedsTranslation + - TopicStub + - Web + - WebMechanics +translation_of: Learn/Common_questions +--- +
{{LearnSidebar}}
+ +

This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the HTML or CSS learning articles.) These articles are designed to work on their own.

+ +

How the Web works

+ +

This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.

+ +
+
+

How does the Internet work?

+
+
The Internet is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.
+
+

What is the difference between webpage, website, web server, and search engine?

+
+
In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!
+
+

What is a URL?

+
+
With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.
+
+

What is a domain name?

+
+
Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.
+
+

What is a web server?

+
+
The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.
+
+ +
+
In this article, we'll go over what hyperlinks are and why they matter.
+
+ +

Tools and setup

+ +

Questions related to the tools/software you can use to build websites.

+ +
+
+

How much does it cost to do something on the Web?

+
+
When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).
+
+

What software do I need to build a website?

+
+
In this article we explain which software components you need when you're editing, uploading, or viewing a website.
+
+

What text editors are available?

+
+
In this article we highlight some things to think about when choosing and installing a text editor for web development.
+
+

How do I set up a basic working environment?

+
+
When working on a web project, you'll want to test it locally before you show it to the world. Some types of code require a server to test, and in this article we'll show you how to set one up. We'll also cover how to put a scalable structure in place so that your files stay organized even when your project gets big.
+
+

What are browser developer tools?

+
+
Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.
+
+

How do you make sure your website works properly?

+
+
So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.
+
+

How do you set up a local testing server?

+
+
+
+

This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.

+
+
+
+

How do you upload files to a web server?

+
+
This article shows how to publish your site online with FTP tools — one fo the most common ways to get a website online so others can access it from their computers.
+
+

How do I use GitHub Pages?

+
+
This article provides a basic guide to publishing content using GitHub's gh-pages feature.
+
+

How do you host your website on Google App Engine?

+
+
Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.
+
+

What tools are available to debug and improve website performance?

+
+
This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.
+
+ +

Design and accessibility

+ +

This section lists questions related to aesthetics, page structure, accessibility techniques, etc.

+ +
+
+

How do I start to design my website?

+
+
This article covers the all-important first step of every project: define what you want to accomplish with it.
+
+

What do common web layouts contain?

+
+
When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.
+
+

What is accessibility?

+
+
This article introduces the basic concepts behind web accessibility.
+
+

How can we design for all types of users?

+
+
This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.
+
+

What HTML features promote accessibility?

+
+
This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.
+
+ +

HTML, CSS and JavaScript questions

+ +

For common solutions to HTML/CSS/JavaScript problems, try the following articles:

+ + diff --git a/files/it/learn/common_questions/thinking_before_coding/index.html b/files/it/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..c88abf5480 --- /dev/null +++ b/files/it/learn/common_questions/thinking_before_coding/index.html @@ -0,0 +1,180 @@ +--- +title: How do I start to design my website? +slug: Learn/Common_questions/Thinking_before_coding +translation_of: Learn/Common_questions/Thinking_before_coding +--- +

Questo articolo tratta l'importantissimo primo passo di ogni progetto: definisci cosa vuoi realizzare con il tuo sito.

+ + + + + + + + + + + + +
Prerequisiti:Nessuno
Obbiettivo:Impara a definire obiettivi per orientare il tuo progetto web.
+ +

Sommario

+ +

Quando si inizia con un progetto Web, molte persone si concentrano sul lato tecnico. Ovviamente devi avere familiarità con la tecnica del tuo mestiere, ma ciò che conta davvero è ciò che vuoi realizzare. Sì, sembra ovvio, ma troppi progetti falliscono non per mancanza di know-how tecnico, ma per mancanza di obiettivi e visione.

+ +

Quindi, quando hai un'idea e vuoi trasformarla in un sito Web, ci sono alcune domande a cui dovresti rispondere prima di ogni altra cosa:

+ + + +

Tutto ciò si chiama ideazione del progetto ed è un primo passo necessario per raggiungere il tuo obiettivo, che tu sia un principiante o uno sviluppatore esperto.

+ +

Apprendimento attivo

+ +
+
Non è ancora disponibile un apprendimento attivo. Per favore, considera di contribuire.
+
+ +

Approfondimento

+ +

Un progetto non inizia mai con il lato tecnico. I musicisti non faranno mai musica a meno che non abbiano prima un'idea di ciò che vogliono suonare, e lo stesso vale per pittori, scrittori e sviluppatori web. La tecnica arriva seconda.
+
+ La tecnica è ovviamente critica. I musicisti devono padroneggiare il loro strumento. Ma i bravi musicisti non potranno mai produrre buona musica senza un'idea. Pertanto, prima di passare al lato tecnico, ad esempio codice e strumenti, è necessario fare un passo indietro e decidere in dettaglio cosa si desidera fare.
+
+ La discussione di un'ora con gli amici è un buon inizio, ma inadeguata. Devi sederti e strutturare le tue idee per avere una visione chiara di quale percorso devi prendere per trasformare le tue idee in realtà. Per fare questo, hai solo bisogno di carta e penna e del tempo per rispondere almeno alle seguenti domande.

+ +
+

Nota: ci sono innumerevoli modi per realizzare l'ideazione del progetto. Non possiamo metterli tutti qui (un intero libro non sarebbe abbastanza). Quello che presenteremo qui è un metodo semplice per gestire ciò che i professionisti chiamano Ideazione del progetto, Pianificazione del progetto e Gestione del progetto.

+
+ +

Cosa voglio esattamente realizzare?

+ +

Questa è la domanda più importante a cui rispondere, poiché guida tutto il resto. Elenca tutti gli obiettivi che desideri raggiungere. Può essere qualsiasi cosa: vendere beni per fare soldi, esprimere opinioni politiche, incontrare nuovi amici, fare concerti con i musicisti, collezionare foto di gatti o qualsiasi cosa tu voglia.

+ +

Supponi di essere un musicista. Potresti voler:

+ + + +

Una volta che hai un tale elenco, devi dare la priorità. Ordina gli obiettivi dal più importante al meno importante:

+ +
    +
  1. Trova una nuova ragazza / ragazzo.
    2. +
  2. Consenti alle persone di ascoltare la tua musica.
    3. +
  3. Parla della tua musica.
    4. +
  4. Incontra altri musicisti.
    5. +
  5. Vendi chicche.
    6. +
  6. Insegna la musica attraverso i video.
    7. +
  7. Pubblica foto dei tuoi gatti.
    8. +
+ +

Fare questo semplice esercizio — scrivere obiettivi e classificarli — ti aiuterà quando hai delle decisioni da prendere. (Devo implementare queste funzionalità, utilizzare questi servizi, creare questi design?)

+ +

Quindi ora che hai un elenco prioritario di obiettivi, passiamo alla domanda successiva.

+ +

In che modo un sito web potrebbe portarmi ai miei obiettivi?

+ +

Quindi hai un elenco di obiettivi e ritieni di aver bisogno di un sito Web per raggiungere tali obiettivi. Sei sicuro?

+ +

Diamo un'occhiata al nostro esempio. Abbiamo cinque obiettivi collegati alla musica, uno legato alla vita personale (trovare il tuo altro significativo) e le foto di gatti completamente indipendenti. È ragionevole creare un singolo sito Web per coprire tutti questi obiettivi? È addirittura necessario? Dopotutto, decine di servizi web esistenti potrebbero portarti ai tuoi obiettivi senza creare un nuovo sito web.

+ +

Trovare una ragazza / ragazzo è il primo caso in cui ha più senso usare le risorse esistenti piuttosto che costruire un sito completamente nuovo. Perché? Perché dedicheremo più tempo alla costruzione e alla manutenzione del sito Web piuttosto che alla ricerca di una ragazza / ragazzo. Poiché il nostro obiettivo è ciò che conta di più, dovremmo spendere le nostre energie per sfruttare gli strumenti esistenti anziché iniziare da zero. Ancora una volta, ci sono così tanti servizi web già disponibili per mostrare le foto che non vale la pena creare un nuovo sito solo per spargere la voce su quanto siano carini i nostri gatti.

+ +

Gli altri cinque obiettivi sono tutti collegati alla musica. Esistono, naturalmente, molti servizi Web in grado di gestire questi obiettivi, ma in questo caso ha senso creare un sito Web dedicato. Tale sito Web è il modo migliore per aggregare tutte le cose che vogliamo pubblicare in un unico posto (buono per gli obiettivi 3, 5 e 6) e promuovere interazione tra di noi e il pubblico (buono per gli obiettivi 2 e 4). In breve, poiché questi obiettivi ruotano tutti intorno allo stesso argomento, avere tutto in un unico posto ci aiuterà a raggiungere i nostri obiettivi e aiuterà i nostri follower a connettersi con noi.

+ +

In che modo un sito Web può aiutarmi a raggiungere i miei obiettivi? Rispondendo a ciò, troverai il modo migliore per raggiungere i tuoi obiettivi e salvarti da uno sforzo sprecato.

+ +

Cosa bisogna fare e in quale ordine per raggiungere i miei obiettivi?

+ +

Ora che sai cosa vuoi realizzare, è tempo di trasformare quegli obiettivi in passaggi attuabili. Come nota a margine, i tuoi obiettivi non sono necessariamente fissati nella pietra. Si evolvono nel tempo anche nel corso del progetto, soprattutto se si incontrano ostacoli imprevisti o si cambia idea.

+ +

Invece di fare una lunga spiegazione, torniamo al nostro esempio con questa tabella:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ObiettiviCose da fare
Consenti alle persone di ascoltare la tua musica +
    +
  1. Registra musica
    2. +
  2. Prepara alcuni file audio utilizzabili online (potresti farlo con i servizi web esistenti?) +
    3. +
  3. Consenti alle persone di accedere alla tua musica su alcune parti del tuo sito web
    4. +
+
Parla della tua musica +
    +
  1. Scrivi alcuni articoli per iniziare la discussione
    2. +
  2. Definisci l'aspetto degli articoli
    3. +
  3. Pubblica tali articoli sul sito Web (come fare?)
    4. +
+
Incontra altri musicisti +
    +
  1. Fornire modi in cui le persone possono contattarti (e-mail? Facebook? Telefono? Posta?) +
    2. +
  2. Definisci come le persone troveranno quei canali di contatto dal tuo sito web
    3. +
+
Vendi chicche +
    +
  1. Crea le chicche
    2. +
  2. Conserva le chicche
    3. +
  3. Trova un modo per gestire la spedizione
    4. +
  4. Trova un modo per gestire il pagamento
    5. +
  5. Crea un meccanismo sul tuo sito affinché le persone possano effettuare ordini
    6. +
+
Insegna musica attraverso i video +
    +
  1. Registra lezioni video
    2. +
  2. Prepara i file video visualizzabili online (Ancora, potresti farlo con i servizi web esistenti?) +
    3. +
  3. Consenti alle persone di accedere ai tuoi video su alcune parti del tuo sito web
    4. +
+
+ +

Due cose da notare. Innanzitutto, alcuni di questi articoli non sono correlati al web (ad esempio, registrare musica, scrivere articoli). Spesso queste attività offline sono ancora più importanti del lato web del progetto. Nelle vendite, ad esempio, è molto più importante e richiede molto tempo gestire la fornitura, il pagamento e la spedizione piuttosto che costruire un sito Web in cui le persone possono effettuare ordini.

+ +

In secondo luogo, la definizione di passaggi attuabili porta a nuove domande a cui dovrai rispondere. Di solito ci sono più domande di quanto pensassimo inizialmente. (Ad esempio, dovrei imparare a fare tutto questo da solo, chiedere a qualcuno di farlo per me o utilizzare servizi di terze parti?)

+ +

Conclusione

+ +

Come puoi vedere, la semplice idea "Voglio creare un sito Web" genera un lungo elenco di cose da fare, che si allunga solo quando ci pensi. Presto potrebbe sembrare travolgente, ma non fatevi prendere dal panico. Non è necessario rispondere a tutte le domande e non è necessario fare tutto sul proprio elenco. Ciò che conta è avere una visione di ciò che vuoi e come arrivarci. Una volta che hai quella visione chiara, devi decidere come e quando farlo. Suddividi i compiti più grandi in piccoli passaggi attuabili. E quei piccoli passi si sommeranno a grandi risultati.

+ +

Da questo articolo, dovresti ora essere in grado di fare un piano approssimativo per la creazione di un sito Web. Un prossimo passo potrebbe essere quello di leggere come funziona Internet.

diff --git a/files/it/learn/css/building_blocks/index.html b/files/it/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..ef61b8c18b --- /dev/null +++ b/files/it/learn/css/building_blocks/index.html @@ -0,0 +1,89 @@ +--- +title: La costruzione del CSS +slug: Learn/CSS/Building_blocks +tags: + - Beginner + - CSS + - Learn + - Principiante + - building blocks +translation_of: Learn/CSS/Building_blocks +--- +
{{LearnSidebar}}
+ +

Questo modulo di apprendimento è il seguito di Primi passi con il CSS: dopo aver familiarizzato con il linguaggio e la sua sintassi e dopo aver acquisito una minima esperienza di utilizzo, è ora di andare più a fondo. In questo modulo verranno trattati: funzionamento a cascata ed ereditarietà, tutti i tipi di selettori disponibili, unità di misura, dimensioni, stilizzazione di sfondi e contorni, debug e molto altro.

+ +

Lo scopo del modulo è fornire gli strumenti per sviluppare CSS efficaci e le basi teoriche essenziali, prima di procedere verso discipline più specifiche come la stilizzazione del testo e il layout CSS.

+ +

Prerequisiti

+ +

Per affrontare questo modulo è necessario:

+ +
    +
  1. Familiarità con l'utilizzo di computer e navigazione passiva sul Web (ovvero consultare semplicemente i contenuti, senza manipolarli).
    2. +
  2. Un ambiente di lavoro base come specificato in Installazione di software fondamentali e le conoscenze necessarie a creare e gestire file, come specificato in Gestire i file.
    3. +
  3. Una minima familiarità con l'HTML, come trattato nel modulo Introduzione all'HTML.
    4. +
  4. Comprensione delle basi del CSS come trattato nel modulo Primi passi con il CSS.
    5. +
+ +
+

Nota: Per chi utilizza un computer/tablet/altro dispositivo che non permette di creare file in locale, è possibile riprodurre la maggior parte degli esempi di codice con un programma online tipo JSBin o Glitch.

+
+ +

Guide

+ +

Questo modulo contiene i seguenti articoli, che coprono le basi del linguaggio CSS. Lungo il percorso sono previsti vari esercizi per verificare la comprensione dell'argomento.

+ +
+
Cascade ed ereditarietà
+
L'obiettivo di questa lezione è sviluppare la comprensione di alcuni dei concetti fondamentali del CSS (il cascade, la specificità e l'ereditarietà) che regolano l'applicazione del CSS all'HTML e la risoluzione dei conflitti.
+
Selettori CSS
+
Esiste una grande varietà di selettori CSS, che permettono di selezionare con estrema precisione gli elementi da stilizzare. In questo articolo e nelle sue sotto-sezioni osservando come funzionano nel dettaglio le differenti tipologie. Le sotto-sezioni sono le seguenti: + +
+
Il modello a contenitori CSS
+
Ogni elemento CSS è racchiuso in un contenitore. Comprendere il funzionamento dei contenitori è fondamentale per creare layout con il CSS o allineare fra loro gli elementi. In questa lezione studieremo il modello a contenitori del CSS, una premessa necessaria per acquisire dimestichezza con il loro funzionamento e relativa terminologia prima di passare a configurazioni di layout più complesse.
+
Sfondi e contorni
+
In questa lezione accenneremo alle potenzialità creative del CSS mediante la stilizzazione di sfondi e contorni. Affronteremo numerose delle domande più frequenti sul CSS come aggiungere gradienti, immagini di sfondo e angoli arrotondati.
+
Gestire direzioni di testo differenti
+
Recentemente il CSS si è evoluto per supportare meglio differenti direzioni del contenuto, sia quella da destra verso sinistra che quella dall'alto verso il basso (come il giapponese). Queste differenti direzioni sono chiamate writing modes, cioè modalità di scrittura. Introduciamo l'argomento perché più avanti, quando inizieremo a lavorare con i layout, sarà utile capire le modalità di scrittura.
+
Overflow dei contenuti
+
In questa lezione vedremo un altro importante concetto nel CSS: l'overflow. L'overflow si verifica quando il contenuto è troppo per essere adeguatamente racchiuso in un contenitore. In questa guida impareremo di cosa si tratta e come gestirlo.
+
Valori e unità CSS
+
Ogni proprietà usata nel CSS ha un valore o un insieme di valori consentiti per quella proprietà. In questa lezione affronteremo i valori e le unità più diffusi.
+
Ridimensionare gli elementi nel CSS
+
Nelle precedenti lezioni abbiamo incontrato diversi metodi per ridimensionare elementi in una pagina web utilizzando il CSS. È importante essere in grado di calcolare la dimensione dei diversi elementi nel proprio concetto grafico. In questa lezione riassumeremo i vari metodi per definire la grandezza di un elemento tramite il CSS e alcuni termini riguardo le grandezze che potranno esserti d'aiuto in futuro.
+
Immagini, contenuti multimediali e moduli
+
In questa lezione vedremo come alcuni elementi speciali vengono gestiti nel CSS. Gli elementi di immagini, altri contenuti multimediali e moduli presentano leggere differenze in termini di possibilità di stilizzazione in contenitori regolari. Sapere cosa sia possibile e cosa no può evitare errori frustranti. In questa lezione evidenzieremo le conoscenze più importanti che ci serviranno.
+
Stili e tabelle
+
Stilizzare una tabella HTML non è il lavoro più entusiasmante al mondo, ma a volte tocca a farlo. Questo articolo fornisce una guida per rendere le tabelle HTML graficamente gradevoli, presentando anche tecniche di stilizzazione specifiche.
+
Fare il debug in CSS
+
Un problema comune nello sviluppo del CSS è quando il codice presenta comportamenti imprevisti. Questo articolo fornisce una traccia per compiere il debug di un problema con il CSS e mostra come impiegare i DevTools (gli strumenti per sviluppatore incorporati in tutti i browser moderni) per individuare le anomalie.
+
Organizzare il CSS
+
Quando si inizia a lavorare su fogli di stile e progetti sempre più corposi, ci si rende conto che mantenere un file CSS di grandi dimensioni può essere impegnativo. In questo articolo affronteremo velocemente alcune buone pratiche per scrivere un foglio CSS facilmente gestibile e altre soluzioni escogitate dai vari sviluppatori per semplificare la gestione del codice.
+
+ +

Valutazioni

+ +

Per chi desidera mettersi alla prova, le seguenti valutazioni sono realizzate appositamente per verificare la comprensione degli argomenti CSS affrontati nelle guide precedenti.

+ +
+
Comprensione delle basi di CSS
+
Questa valutazione verifica la comprensione della sintassi CSS di base, selettori, specificità, modelli di contenitori e altro.
+
Realizza una carta da lettere intestata
+
Per fare una buona prima impressione non c'è niente di meglio che scrivere una lettera su carta intestata ricercata. Per superare questa valutazione dovrai realizzare un modello di carta intestata online dalla grafica accattivante.
+
Un gran bel contenitore
+
In questa valutazione faremo pratica con la stilizzazione di sfondi e contorni per realizzare un contenitore che non passa inosservato.
+
+ +

Vedi anche

+ +
+
Effetti avanzati di stilizzazione
+
Questo articolo è una sorta di scatola dei trucchi: fornisce un'introduzione ad alcune interessanti funzionalità avanzate di stilizzazione come ombre, modalità di fusione e filtri.
+
diff --git a/files/it/learn/css/building_blocks/selettori/index.html b/files/it/learn/css/building_blocks/selettori/index.html new file mode 100644 index 0000000000..cf0f6662cf --- /dev/null +++ b/files/it/learn/css/building_blocks/selettori/index.html @@ -0,0 +1,231 @@ +--- +title: selettori CSS +slug: Learn/CSS/Building_blocks/Selettori +tags: + - Attributo + - CSS + - Classe + - Impara + - Principiante + - Pseudo + - Selettori +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

Nei {{Glossary("CSS")}}, i selettori vengono usati per selezionare elementi {{glossary("HTML")}} della pagina web di cui vogliamo curare lo stile. Esiste una grande varietá di selettori CSS, rendendo possibile selezionare gli elementi con particolare accuratezza. In questo articolo e nelle sue sezioni ci soffermeremo nel dettaglio sui diversi tipi di selettori, osservandone il funzionamento.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenze informatiche di base, istallazione di software fondamentali, conoscenze base di gestione dei file, basi di HTML (vedi Introduzione ad HTML) ed avere un'idea di base di come funzionano i CDD (vedi primi passi con i CSS).
Obbiettivo:Apprendere nel dettaglio il funzionamento dei selettori CSS.
+ +

Cos'é un selettore?

+ +

Hai giá incontrato i selettori prima di questo articolo: un selettore CSS corrisponde infatti alla prima parte di una regola e non é altro che un insieme di termini che dicono al browser quali elementi HTML devono essere selezionati in modo che vi si possano applicare le proprietá contenute dentro la regola. L'elemento o gli elementi selezionati tramite un selettore sono noti come soggetto del selettore.

+ +

Some code with the h1 highlighted.

+ +

Nei precedenti articoli hai incontrato diversi selettori e imparato che alcuni di essi effettuano la selezione in modi differenti — selezionando ad esempio tutti gli elementi h1 oppure una classe come .special.

+ +

Nei CSS, i selettori sono definiti nelle specifiche sui selettori CSS e come ogni parte dei CSS necessitano del supporto del browser per poter funzionare. La maggior parte dei selettori che incontrerai sono definiti in Level 3 Selectors specification (specifica sui selettori di livello 3),  la quale é una raccolta curata e condivisa e i selettori lí elencati hanno il pieno supporto della maggior parte dei browser.

+ +

Liste di selettori

+ +

Nel caso in cui tu abbia  piú elementi che condividano le stesse regole di CSS, allora piú selettori individuali possono essere combinati in una lista. Ad esempio, se mi trovo ad avere lo stesso CSS per un h1 ed anche per la classe .special, potrei scriverlo nel seguente modo.

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

Per sintetizzare questo codice posso unire i due selettori dentro una lista, separandoli con una virgola.

+ +
h1, .special {
+  color: blue;
+}
+ +

Sono ammessi spazi bianchi prima o dopo la virgola. Potresti considerare piú ordinato e leggibile il codice ponendo ogni selettore su una singola riga.

+ +
h1,
+.special {
+  color: blue;
+}
+ +

Dall'esempio precedente, prova a combinare i due selettori con la stessa dichiarazione. Dovresti ottenere lo stesso risultando visivo pur modificando la sintassi del codice.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

Quando raggruppi i selettori in quasto modo, se alcuni di essi non sono validi l'intera regola verrá ignorata.

+ +

Nell'esempio seguente, il selettore di classe non é corretto e pertanto la sua dichiarazione verrá ignorata, mentre il selettore h1 non presenta errori e la sua dichiarazione verrá eseguita correttamente.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

Tuttavia se combinati, né il selettore h1 né il selettore di classe verranno considerati e l'intera regola sará quindi ignorata.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Tipi di selettori

+ +

I selettori sono raggruppabili per tipo e conoscerne la classificazione é il primo passo per poter ricercare agevolmente quello giusto per ogni occorrenza. In questa sezione vedremo nel dettaglio i differenti gruppi di selettori.

+ +

Selettori di tipo, classe e ID

+ +

Questo gruppo include i selettori usati per gli elementi della pagina HTML come <h1>.

+ +
h1 { }
+ +

Include inoltre i selettori di classe:

+ +
.box { }
+ +

oppure di ID:

+ +
#unique { }
+ +

Selettori di attributo

+ +

Questo gruppo di selettori fornisce diversi modi per selezionare elementi tramite la presenza di un particolare attributo su di essi:

+ +
a[title] { }
+ +

Oppure seleziona basandosi sulla presenza di un attributo con uno specifico valore:

+ +
a[href="https://example.com"] { }
+ +

Pseudo-classi e pseudo-elementi

+ +

Questo gruppo di selettori include le pseudo-classi, le cui selezioni hanno effetto solo in determinate condizioni. Ad esempio, la pseudo classe :hover seleziona un elemento solo quando su questo vi passa sopra il puntatore del mouse:

+ +
a:hover { }
+ +

Include inoltre gli pseudo-elementi, i quali selezionano solo una parte dell'elemento in questione. Ad esempio, ::first-line seleziona sempre la prima riga di testo di un elemento (un elemento <p> nell'esempio seguente), come se questa fosse messa dentro un blocco  <span>  e selezionata.

+ +
p::first-line { }
+ +

Combinatori

+ +

L'ultimo gruppo di selettori combina gli altri selettori in modo da poter selezionare piú elementi della pagina. Il seguente esempio seleziona i paragrafi che sono figli di <article> utilizzando il combinatore (>):

+ +
article > p { }
+ +

Prossimo passo

+ +

Puoi dare un'occhiata alla seguente tabella riassuntiva sui selettori, visitare i link di questa guida o di MDN, relativi al tipo di selettore corrispondente, oppure proseguire con la tua esplorazione alla scoperta dei selettori di tipo, classe e id.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Tabella riassuntiva dei selettori

+ +

La tabella sottostante ti fornisce una panoramica dei selettori incontrati con i relativi link alle pagine di questa guida che mostrano come usarli. Vi sono inoltre anche dei link alle pagine MDN del corrispondente tipo di selettore dove é possibile ottenere informazioni su supporto e compatibilitá dei principali browser. Puoi usare questa tabella come punto d'appoggio per ripassare o ricercare i selettori o, piú in generale, mentre ti eserciti coi CSS.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelettoreEsempioTutorial sui CSS
Selettore di tipoh1 {  }Selettore di tipo
Selettore universale* {  }Selettore universale
Selettore di classe.box {  }Selettore di classe
Selettore di ID#unique { }Selettore di ID
Selettore di attributoa[title] {  }Selettore di attributo
Pseudo-classip:first-child { }Pseudo-classi
Pseudo-elementip::first-line { }Pseudo-elementi
Combinatore di discendenzaarticle pCombinatore di discendenza
Combinatore di figliarticle > pCombinatore di figli
Combinatore di fratelli adiacentih1 + pCombinatore di fratelli adiacenti
Combinatore di fratelli genericih1 ~ pCombinatore di fratelli generici
+ +

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/it/learn/css/building_blocks/styling_tables/index.html b/files/it/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..990188c01c --- /dev/null +++ b/files/it/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,294 @@ +--- +title: Stili e tabelle +slug: Learn/CSS/Building_blocks/Styling_tables +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
+ +

Applicare stili a tabelle HTML non è il lavoro più stimolante che esista, ma di tanto in tanto va fatto. Questo articolo vi guiderà nel compito di rendere gradevoli le tabelle HTML, usando gli attributi spiegati in articoli precedenti.

+ + + + + + + + + + + + +
Prerequisiti:Basi HTML (vedi Introduction to HTML), tabelle HTML (vedi il modulo tabelle HTML (TBD)), e un'idea di come funzioni un CSS (studia Introduction to CSS.)
Obiettivo:Uso efficace degli stili su tabelle HTML.
+ +

Una tipica tabella HTML

+ +

Iniziamo a vedere una tipica tabella HTML. Beh, diciamo tipica — gli esempi di tabella contengono scarpe, meteo, dipendenti; rendiamo le cose più interessanti usando le più famose band punk del Regno Unito. Il codice quindi sarà questo:

+ +
<table>
+  <caption>A summary of the UK's most famous punk bands</caption>
+  <thead>
+    <tr>
+      <th scope="col">Band</th>
+      <th scope="col">Year formed</th>
+      <th scope="col">No. of Albums</th>
+      <th scope="col">Most famous song</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>
+
+     ... alcune righe rimosse per concisione
+
+    <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>
+ +

La tabella è ben formata, è facile applicarle stili, è accessibile, grazie all'uso di attributi come {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, ecc. Però non ha un bell'aspetto quando vista su schermo (vedila su punk-bands-unstyled.html):

+ +

+ +

Ha un aspetto rozzo, poco leggibile e noioso. Dobbiamo usare un po' di CSS per rimediare.

+ +

Apprendere attivamente: Diamo stile alla tabella

+ +

In questa sezione di apprendimento attivo daremo stile insieme alla nostra tabella.

+ +
    +
  1. Per iniziare, fai una copia in locale del codice di esempio, scarica le immagini (noise e leopardskin), e e metti i tre files in una directory di lavoro sul tuo computer.
    2. +
  2. Quindi, crea un nuovo file e salvalo col nome style.css nella stessa directory degli altri file.
    3. +
  3. Collega il file CSS all'interno del codice HTML scrivendo questa riga di HTML all'interno della sezione {{htmlelement("head")}}: + 
    <link href="style.css" rel="stylesheet" type="text/css">
    +
    4. +
+ +

Spaziatura e layout

+ +

La prima cosa da fare è mettere ordine nella spaziatura/layout, visto che lo stile predefinito è davvero rozzo! Per ottenere questo risultato, mettiamo queste definizioni CSS al file style.css:

+ +
/* spaziatura */
+
+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;
+}
+ +

Le definizioni più importanti da notare sono:

+ + + +

A uesto punto, la nostra tabella ha già un aspetto molto migliore:

+ +

+ +

Semplici concetti tipografici

+ +

Ora diamo una sistemata al contenuto.

+ +

Innanzi tutto, abbiamo trovato un font su Google Fonts intonato alle nostre band punk. Puoi andare a sceglierne uno diverso se vuoi; devi solo sostituire l'elemento {{htmlelement("link")}} e la {{cssxref("font-family")}} con quelli che Google Fonts ti fornirà.

+ +

Prima, inserisci il seguente elemento {{htmlelement("link")}} nella sezione head, prima dell'altro elemento <link>:

+ +
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
+ +

Ora aggiungi in testa al tuo file style.css i seguenti attributi CSS:

+ +
/* tipografia */
+
+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;
+}
+ +

Non c'è nulla di specifico per tabelle; in generale impostiamo lo stile dei caratteri per rendere tutto di più facile lettura:

+ + + +

The result looks a bit neater:

+ +

+ +

Grafica e colori

+ +

Now onto graphics and colors! Because the table is full of punk and attitude, we need to give it some bright imposing styling to suit. Don't worry, you don't have to make your tables this loud — you can opt for something more subtle and tasteful.

+ +

Start by adding the following CSS to your style.css file, again at the bottom:

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

Again, there's nothing specific to tables here, but it is worthwhile to note a few things.

+ +

We've added a {{cssxref("background-image")}} to the {{htmlelement("thead")}} and {{htmlelement("tfoot")}}, and changed the {{cssxref("color")}} of all the text inside the header and footer to white (and given it a {{cssxref("text-shadow")}}) so it is readable. You should always make sure your text contrasts well with your background, so it is readable.

+ +

We've also added a linear gradient to the {{htmlelement("th")}} and {{htmlelement("td")}} elements inside the header and footer for a nice bit of texture, as well as giving those elements a bright purple border. It is useful to have multiple nested elements available so you can layer styles on top of one another. Yes, we could have put both the background image and the linear gradient on the {{htmlelement("thead")}} and {{htmlelement("tfoot")}} elements using multiple background images, but we decided to do it separately for the benefit of older browsers that don't support multiple background images or linear gradients.

+ +

Zebra striping

+ +

We wanted to dedicate a separate section to showing you how to implement zebra stripes — alternating rows of color that make the different data rows in your table easier to parse and read. Add the following CSS to the bottom of your style.css file:

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

This color explosion results in the following look:

+ +

+ +

Now, this may be a bit over the top and not to your taste, but the point we are trying to make here is that tables don't have to be boring and academic.

+ +

Stile del titolo

+ +

There is one last thing to do with our table — style the caption. To do this, add the following to the bottom of your style.css file:

+ +
caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}
+ +

There is nothing remarkable here, except for the {{cssxref("caption-side")}} property, which has been given a value of bottom. This causes the caption to be positioned on the bottom of the table, which along with the other declarations gives us this final look (see it live at punk-bands-complete.html):

+ +

+ +

Apprendere attivamente: Uno stile per la tua tabella

+ +

At this point, we'd like you to take our example table HTML (or use some of your own!) and style it to make something considerably better designed and less garish than our table.

+ +

Trucchi per gli stili delle tabelle

+ +

Before moving on, we thought we'd provide you with a quick list of the most useful points illustrated above:

+ + + +

Sommario

+ +

With the dizzy exciting heights of styling tables now behind us, we need something else to occupy our time. Never fear — the next chapter provides a look at some advanced box effects, some of which have only landed in browsers very recently (such as blend modes and filters), and some of which are a bit more established (such as box shadows.)

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/css/css_layout/flexbox/index.html b/files/it/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..cc88b74d61 --- /dev/null +++ b/files/it/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,344 @@ +--- +title: Flexbox +slug: Learn/CSS/CSS_layout/Flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
+ +
Flexbox è un metodo di layout monodimensionale per disporre i componenti in righe oppure in colonne. Quando l'area che li contiene aumenta, i componenti si espandono per colmarne lo spazio, quando invece si restringe anche i componenti si restringono.
+Questo articolo comprende i concetti fondamentali.
+ +
+ + + + + + + + + + + + +
Prerequisiti:Le basi di HTML (leggi Introduzione a HTML) e nozioni sul funzionamento del CSS (leggi Introduzione a CSS.)
Obiettivo:Apprendere l'utilizzo di Flexbox per impostare il layout delle pagine web.
+ +

Perchè Flexbox?

+ +

Per molto tempo, le uniche tecniche affidabili per creare layout CSS compatibili con tutti i browser utilizzavano elementi float e posizionamento. Funzionavano a sufficienza, ma erano per alcuni aspetti limitati e frustranti.

+ +

Per esempio con quelle tecniche era difficile o del tutto impossibile definire in maniera flessibile e vantaggiosa le seguenti impostazioni:

+ + + +

Nelle sezioni seguenti apprenderemo come flexbox faciliti notevolmente questi compiti. Iniziamo!

+ +

Introduzione a un semplice esempio

+ +

Questo articolo presenta una serie di esercizi per aiutare a comprendere il funzionamento di flexbox. Per cominciare copiamo in locale il file di partenza flexbox0.html presente in github. Carichiamolo con un browser moderno, ad esempio Firefox o Chrome e facciamo attenzione al codice nell'editor. É possibile in alternativa visionarlo attraverso la versione live.

+ +

Image showing the starting point of Flexbox tutorial

+ +

Come vediamo la pagina è formata da un {{htmlelement("header")}} contenente il titolo principale, poi un elemento {{htmlelement("section")}} che contiene tre {{htmlelement("article")}}. Partiamo da questa situazione per creare un layout a tre colonne abbastanza comune.

+ +

Individuare gli elementi da impostare come box flessibili

+ +

Per cominciare occorre scegliere il gruppo di elementi che devono apparire come box flessibili; per farlo occorre impostare un valore particolare della proprietà {{cssxref("display")}} del loro elemento padre. In questo caso specifico desideriamo sistemare gli elementi {{htmlelement("article")}}, perciò agiamo sul loro contenitore {{htmlelement("section")}}:

+ +
section {
+  display: flex;
+}
+ +

Questa impostazione trasforma <section> in un contenitore flex e gli elementi figli in componenti flex. Questo è l'aspetto che otteniamo:

+ +

+ +

Proprio così: con questa semplice regola abbiamo già ottenuto tutto ciò che volevamo! Il layout diventa multicolonna e le colonne che lo formano sono della medesima larghezza e lunghezza. Tutto ciò avviene grazie ai componenti flex, cioè i figli del contenitore impostato come flex, che, grazie a valori predefiniti, risolvono automaticamente problemi tipici come questo.

+ +

Ripassiamo cosa è avvenuto: l'elemento il cui valore di  {{cssxref("display")}} è flex si comporta come un elemento blocco all'interno della pagina, ma i suoi figli vengono disposti come componenti flex. Nella prossima sezione capiremo meglio che cosa significa. Notiamo che in alternativa possiamo usare il valore inline-flex per display cosicché gli elementi figlio diventano comunque componenti flex, ma il contenitore si comporta come un elemento in linea.

+ +

Il modello flex

+ +

In qualità di componenti flex, gli elementi si dispongono lungo due assi:

+ +

flex_terms.png

+ + + +

Si tengano a mente queste definizioni durante le sezioni successive. In caso di confusione con i termini potete comunque tornare a rileggere questa sezione.

+ +

Colonne o righe?

+ +

Flexbox offre una proprietà chiamata flex-direction {{cssxref("flex-direction")}} che indica quale direzione deve seguire l'asse principale, ovvero come vengono disposti i contenuti flexbox;il valore predefinito è row, in modo che i contenuti si schierino in riga secondo il verso della lingua preimpostata dal browser, che per le quelle occidentali è da sinistra a destra.

+ +

Proviamo ad aggiungere la seguente dichiarazione alle regole di {{htmlelement("section")}}:

+ +
flex-direction: column;
+ +

Come vediamo i componenti tornano a schierarsi in colonna, come in un il flusso normale senza aggiungere CSS. Cancelliamo pure questa dichiarazione dall'esercizio, prima di continuare.

+ +
+

Nota: Potremmo anche invertire la disposizione dei componenti flex utilizzando i valori row-reverse o column-reverse. Sono da sperimentare!

+
+ +

Effettuare il Wrapping

+ +

Il problema che sorge nel layout quando la larghezza o l'altezza vengono esplicitate è che il gruppo dei contenuti flexbox potrebbe eccedere il limite del contenitore, guastando il layout. Diamo un'occhiata all'esempio flexbox-wrap0.html,di cui viene fornita la visione live. Per eseguire le procedure mostrate da questo punto in poi, salvate una copia del file in locale.

+ +

+ +

Come vediamo i contenuti figli eccedono effettivamente il limite del loro contenitore. Una possibile soluzione consiste nell'aggiungere la seguente dichiarazione alle regole di {{htmlelement("section")}}:

+ +
flex-wrap: wrap;
+ +

Proviamo anche ad aggiungere la seguente dichiarazione alle regole di {{htmlelement("article")}}:

+ +
flex: 200px;
+ +

Ricaricando possiamo notare il miglioramento che abbiamo ottenuto grazie queste modifiche.

+ +

Adesso possiamo notare che si sono formate un certo numero di righe, ovviamente tante quante ne servono per tutti i contenuti flexbox: quando un contenuto eccede i limiti, scala alla riga successiva. L'impostazione flex: 200px dichiarata per gli articoli significa che ognuno di essi occuperà almeno 200px; questa proprietà verrà discussa con maggior dettaglio più avanti nell'articolo. Notiamo anche che ciascuno degli ultimi contenuti che occupano l'ultima riga è molto più largo in modo da riempirla completamente.

+ +

Possiamo sperimentare ancora: innanzitutto assegnare alla proprietà {{cssxref("flex-direction")}} il valore row-reverse, così da ottenere un layout con numerose righe come il precedente in cui però i contenuti si schierano a partire dall'angolo opposto della finestra del browser e fluiscono in maniera inversa.

+ +

La forma contratta flex-flow

+ +

Occorre notare a questo punto che esiste una forma contratta, {{cssxref("flex-flow")}, per le proprietà {{cssxref("flex-direction")}} e {{cssxref("flex-wrap")}} — }. É possibile per esempio sostituire

+ +
flex-direction: row;
+flex-wrap: wrap;
+ +

con

+ +
flex-flow: row wrap;
+ +

Dimensionamento flessibile dei componenti flex

+ +

Ora torniamo al primo esempio per capire come determinare la proporzione che occupa ogni componente flex nello spazio rispetto ai componenti suoi pari. Riapriamo il file locale flexbox0.html, oppure, come punto di partenza, prendiamo il nuovo file flexbox1.html di cui viene fornita anche la versione live.

+ +

Cominciamo aggiungendo la seguente regola al termine del nostro CSS:

+ +
article {
+  flex: 1;
+}
+ +

Si indica in questo modo un valore proporzionale, privo di unità di misura, che determina lo spazio che occupa ogni componente flex rispetto agli altri. In questo caso tutti gli elementi {{htmlelement("article")}} hanno valore 1, il che significa, al netto di spaziature interne (padding) ed esterne (margin), che lo spazio verrà equamente ripartito tra tutti i componenti. Questo è un valore relativo a tutti i componenti flex del medesimo gruppo, perciò, se invece di 1 viene scritto un altro valore, 400000 ad esempio, otteniamo lo stesso risultato.

+ +

Di seguito scriviamo questa regola:

+ +
article:nth-of-type(3) {
+  flex: 2;
+}
+ +

Si noti, dopo aver ricaricando la pagina, che il terzo componente {{htmlelement("article")}} riempie il doppio dello spazio occupato da ciascuno degli altri due. Lo spazio totale è ora diviso in quattro, cioè una spaziatura per il primo elemento, una per il secondo e due per il terzo (1+1+2=4), quindi il primo e il secondo occupano un quarto (1/4) di spazio ciascuno mentre il terzo ne occupa due quarti (2/4) ovvero la metà.

+ +

Si può anche specificare una misura reale minima al di sotto del quale non è possibile andare. Correggiamo le regole degli articoli in questo modo:

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}
+ +

Con queste regole affermiamo fondamentalmente quanto segue: "Ogni componente flex occupa almeno 200px nello spazio a disposizione, mentre lo spazio che rimane viene occupato rispettando le unità proporzionali." Ricaricando la pagina possiamo notare la differenza nella ripartizione delle spaziature.

+ +

+ +

La potenza di flexbox risiede nella sua flessibilità ovvero nella responsività con cui gestisce il layout: se ridimensioniamo la finestra del browser oppure inseriamo un nuovo elemento {{htmlelement("article")}} il layout continuerà a funzionare bene.

+ +

flex: forma contratta al posto della forma estesa

+ +

La proprietà  {{cssxref("flex")}} rappresenta la forma contratta delle seguenti tre proprietà::

+ + + +

È consigliabile non utilizzare le forme estese della proprietà flex, a meno che non si possa fare altrimenti, come per esempio sostituire un valore stabilito in precedenza, perché costringono a scrivere una maggior quantità di codice che può risultare in qualche modo confusionario.

+ +

Allineamento orizzontale e verticale

+ +

Con flexbox è possibile allineare i componenti flex lungo l'asse principale (main axis) o lungo l'asse traverso (cross axis). Facciamo alcune prove con la nuova pagina di esempio, flex-align0.html di cui è presente anche la versione live , per mostrare come creare una bottoniera, o barra degli strumenti, semplice e flessibile.

+ +

+ +

Apriamo il codice in locale.

+ +

Aggiungiamo al termine del file CSS la regola seguente:

+ +
div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

+ +

Dopo aver ricaricato la pagina, i bottoni vengono ben centrati, sia orizzontalmente che verticalmente. Abbiamo ottenuto questo risultato operando con due nuove proprietà:

+ +

Attraverso {{cssxref("align-items")}} controlliamo l'allineamento rispetto all'asse traverso (cross axis).

+ + + +

É possibile sostituire l'impostazione data da align-items {{cssxref("align-items")}} , utilizzando la proprietà {{cssxref("align-self")}} di ogni singolo componente figlio. Ad esempio se proviamo ad aggiungere la seguente regola:

+ +
button:first-child {
+  align-self: flex-end;
+}
+ +

+ +

Dopo aver verificato l’effetto, possiamo cancellare questa regola per ritornare alla situazione precedente.

+ +

Attraverso {{cssxref("justify-content")}} controlliamo il tipo di schieramento dei componenti flex lungo l'asse principale (main axis).

+ + + +

É consigliabile sperimentare le proprietà con valori suddetti prima di continuare a leggere l'articolo.

+ +

Ordinare i componenti flex

+ +

Con flexbox è possibile cambiare l'ordine dei componenti senza intervenire manualmente nel sorgente HTML. Questa opportunità non esisteva con le metodologie di layout precedenti.

+ +

Proviamo ad aggiungere al CSS una nuova semplice regola:

+ +
button:first-child {
+  order: 1;
+}
+ +

Una volta ricaricato notiamo che il bottone con label "Sorriso" si è spostato al termine dell'asse principale. Vediamo in dettaglio cosa è successo:

+ + + +

Se impostiamo un valore negativo di order, il componente compare prima di quelli con valore 0. Proviamo ora ad applicare la regola impostando per esempio l'ordine del bottone "Imbarazzo":

+ +
button:last-child {
+  order: -1;
+}
+ +

Flex box annidati

+ +

Con flexbox possiamo creare layout piuttosto complessi; è del tutto lecito impostare un componente flex in modo che contenga a sua volta componenti annidati flex che vengono visualizzati come flex box. Diamo un'occhiata a complex-flexbox.html (see it live also).

+ +

+ +

La struttura HTML è abbastanza semplice, l'elemento {{htmlelement("section")}} contiene gli elementi figli {{htmlelement("article")}}. , il terzo di questi contiene tre {{htmlelement("div")}} :

+ +
section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button
+ +

Ora guardiamo il codice che ha creato il layout.

+ +

Innanzitutto, impostiamo i figli di {{htmlelement("section")}} affinché diventino flex box.

+ +
section {
+  display: flex;
+}
+ +

Quindi valorizziamo alcune proprietà flex all'interno degli stessi {{htmlelement("article")}}. Si noti in particolare la seconda regola, in cui si impone che il terzo elemento {{htmlelement("article")}} abbia a sua volta componenti innestati flex, i quali però devono essere incolonnati.

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+
+ +

Quindi, impostiamo per il primo <div> la proprietà flex a 1 100px; in modo che abbia un'altezza reale di almeno 100px; la proprietà successiva stabilisce che anche gli elementi figli, cioè i (the {{htmlelement("button")}}, divengano componenti flex; tali elementi si dispongono in riga e allineati a partire dal centro dello spazio disponibile mantenendo i margini alle estremità, proprio come l'esempio del bottone visto in precedenza.

+ +
article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Infine viene definita una regola per la dimensione dei bottoni., ma la parte più interessante è la proprietà flex che ha valore 1 auto; questa impostazione genera un comportamento peculiare che notiamo quando restringiamo la finestra del browser: i bottoni cercano di occupare il massimo dello spazio disponibile, si schierano uno accanto all'altro finché c'è spazio disponibile, e poi scalano alla riga seguente.

+ +
button {
+  flex: 1 auto;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}
+ +

Compatibilità tra browser

+ +

Gran parte delle ultime versioni dei browser supportano flexbox, cioè Firefox, Chrome, Opera, Microsoft Edge, IE 11, le versioni recenti di Android/iOS ecc. Occorre tuttavia considerare anche la presenza delle versioni antiquate dei browser che non supportano flexbox oppure lo fanno solo parzialmente.

+ +

Il problema non incide granché quando ne studiamo e ne proviamo le funzionalità, tuttavia quando si cerca di utilizzare flexbox per creare un sito web reale dobbiamo controllare e assicurarci che l'esperienza utente sia comunque accettabile in quanti più browser possibile.

+ +

Applicare flexbox è un po' più complicato di altre funzionalità CSS. Se per esempio il browser non supporta l'ombreggiatura (drop shadow) è facile che l'usabilità del sito rimanga comunque valida, se invece manca il supporto a flexbox è probabile che il layout della pagina si disintegri rendendola inutilizzabile.

+ +

Le strategie per ovviare ai problemi di compatibilità tra browser vengono affrontate nel modulo Cross browser testing.

+ +

Metti alla prova le tue capacità!

+ +

Questo articolo è denso di informazioni, ma riesci a ricordare quelle più importanti?

+ +

Prima di continuare possiamo verificare la nostra comprensione alla pagina Test your skills: Flexbox.

+ +

Sommario

+ +

In conclusione dell'articolo sulle basi di flexbox speriamo di aver suscitato interesse e un buon punto di partenza nel nostro percorso di apprendimento. Nel prossimo articolo ci occupiamo di un altro importante aspetto del layout CSS: le Griglie CSS.

+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
+ +
+

In this module

+ + +
diff --git a/files/it/learn/css/css_layout/index.html b/files/it/learn/css/css_layout/index.html new file mode 100644 index 0000000000..31a85170fa --- /dev/null +++ b/files/it/learn/css/css_layout/index.html @@ -0,0 +1,78 @@ +--- +title: Layout 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 +--- +
{{LearnSidebar}}
+ +

A questo punto abbiamo già visto i fondamenti di CSS, come assegnare uno stile a un testo e come modificare lo stile e l'impostazione dei riquadri nei quali risiede il contenuto. Ora impareremo come posizionare i riquadri rispetto all'area di visualizzazione e l'uno rispetto all'altro. Abbiamo già appreso i prerequisiti necessari per approfondire il layout CSS, analizzare le diverse impostazioni di display, i moderni strumenti di layout quali flexbox, griglia CSS, posizionamento e alcune tecniche legacy che potrebbe comunque tornare utile conoscere.

+ +

Prerequisiti

+ +

Per affrontare questo modulo è necessario:

+ +
    +
  1. Avere una conoscenza di base dell'HTML, discusso nel modulo Introduzione all'HTML [Introduction to HTML].
    2. +
  2. Avere familiarità con i fondamenti di CSS, discussi in Introduzione al CSS [Introduction to CSS].
    3. +
  3. Comprendere come assegnare uno stile ai riquadri [Styling boxes].
    4. +
+ +
+

Nota: Per chi utilizza un computer/tablet/altro dispositivo che non permette di creare file in locale, è possibile riprodurre la maggior parte degli esempi di codice con un programma online tipo JSBin oppure Glitch.

+
+ +

Guide

+ +

I seguenti articoli insegnano a utilizzare gli strumenti fondamentali di layout e le tecniche disponibili nel linguaggio CSS. Alla fine delle lezioni è previsto un test di valutazione per verificare la propria comprensione dei metodi di layout applicandoli a una pagina web.

+ +
+
Introduzione ai layout CSS [Introduction to CSS layout]
+
Questo articolo riassume alcune delle caratteristiche dei layout CSS già incontrate nei moduli precedenti (ad esempio i diversi valori di {{cssxref("display")}}) e introduce diversi concetti che affronteremo in questo modulo.
+
Flusso normale [Normal flow]
+
Gli elementi di una pagina web si dispongono secondo un flusso normale, a meno che non facciamo qualcosa per cambiarlo. Questo articolo spiega le basi di un flusso normale come premessa per imparare a modificarlo.
+
Flexbox [Flexbox]
+
Flexbox [Flexbox] è un metodo di layout monodimensionale per disporre gli elementi in righe e colonne. Gli elementi si espandono per riempire lo spazio extra e si contraggono per adattarsi a uno spazio più ridotto. Questo articolo ne spiega i concetti fondamentali. Dopo aver studiato la guida potrai testare le tue competenze su flexbox [test your flexbox skills] per accertarti di averlo compreso prima di passare all'argomento successivo.
+
Griglie [Grids]
+
La Griglia layout CSS è un sistema bidimensionale di layout per il Web. Permette di disporre i contenuti in righe e colonne, inoltre offre diverse funzionalità per semplificare la costruzione di layout complessi. Questo articolo contiene tutte le informazioni necessarie per iniziare a costruire il layout della pagina, quindi mettere alla prova le proprie abilità sulla griglia [test your grid skills] prima di passare all'argomento successivo.
+
Elementi float [Floats]
+
Originariamente usata per inserire le immagini all'interno di blocchi di testo, la proprietà {{cssxref("float")}} è diventata uno dei più comuni strumenti per creare layout multicolonna nelle pagine web. Con la comparsa di Flexbox e Griglia è tornata alla sua finalità originale, come spiegato in questo articolo.
+
Posizionamento [Positioning]
+
Il posizionamento permette di isolare gli elementi dal normale flusso della pagina assegnando loro un comportamento diverso, ad esempio sovrapporsi uno sull'altro o mantenere sempre la stessa posizione all'interno dell'area di visualizzazione del browser. Questo articolo spiega i differenti valori di {{cssxref("position")}} e come utilizzarli.
+
Layout multicolonna [Multiple-column layout]
+
Le specifiche del layout multicolonna offrono un metodo per strutturare il contenuto in colonne come sulla pagina di un quotidiano. L'articolo spiega come sfruttare questa caratteristica.
+
Design reattivo [Responsive design]
+
Con la comparsa di dispositivi di varie dimensioni in grado di accedere al Web, è nato il concetto di web design reattivo (o RWD, dall'inglese Responsive Web Design): un insieme di procedure che permettono alle pagine web di modificare il proprio layout e aspetto per adattarsi a diverse larghezze, risoluzioni, ecc. Si tratta di un'idea che ha cambiato il modo di progettare il Web multi-dispositivo e questo articolo aiuta a capire le principali tecniche necessarie a padroneggiarlo.
+
Guida per principianti alle media query [Beginner's guide to media queries]
+
Le media query CSS danno modo di applicare i fogli di stile CSS solo quando il browser e le condizioni del dispositivo corrispondono alle regole specificate, ad esempio "l'area di visualizzazione è più larga di 480 pixel". Le media query sono un elemento fondamentale del web design reattivo, poiché non solo permettono di stabilire layout differenti a seconda della grandezza dell'area di visualizzazione, ma anche di rilevare altre condizioni dell'ambiente in cui un sito viene riprodotto, ad esempio se l'utente usa un touchscreen o un mouse. In questa lezione impareremo innanzitutto la sintassi usata nelle media query e poi le applicheremo in un esempio reale che mostra come trasformare un design semplice in reattivo.
+
I metodi di layout legacy [Legacy layout methods]
+
Una caratteristica molto comune dei layout CSS sono i sistemi di griglia. Prima della Griglia Layout CSS cercavamo di realizzare l'impaginazione utilizzando elementi float o altre caratteristiche del layout. Il layout veniva concepito come un numero dato di colonne immaginarie (ad esempio 4, 6 o 12) all'interno delle quali inserire i contenuti. In questo articolo vedremo come funzionano questi metodi ormai obsoleti per capirne l'impostazione in caso dovessimo lavorare su progetti più datati.
+
Supporto per i browser più datati [Supporting older browsers]
+
+

In questo modulo consigliamo di usare Flexbox e Griglia quali principali metodi di progettazione. Va però considerato che alcuni utenti potrebbero visualizzare il nostro sito con browser più datati o che, semplicemente, non supportano i metodi da noi scelti. Bisogna sempre tenerne conto nel Web: man mano che nuove funzionalità vengono messe a punto, ciascun browser si concentra sull'implementarne alcune, a scapito di altre. Questo articolo spiega come usare le moderne tecniche del Web senza escludere chi utilizza tecnologia più datata.

+
+
Valutazione sulla comprensione dei fondamenti di layout [Assessment: Fundamental layout comprehension]
+
Un test per valutare la comprensione dei diversi metodi di layout applicandoli a una vera pagina web.
+
+ +

Vedi anche

+ +
+
Esempi pratici di posizionamento [Practical positioning examples]
+
Questo articolo mostra come impostare alcuni esempi reali per illustrare le potenzialità del posizionamento.
+
diff --git a/files/it/learn/css/css_layout/introduction/index.html b/files/it/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..3a3238e551 --- /dev/null +++ b/files/it/learn/css/css_layout/introduction/index.html @@ -0,0 +1,711 @@ +--- +title: Introduzione al layout CSS +slug: Learn/CSS/CSS_layout/Introduction +translation_of: Learn/CSS/CSS_layout/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
+ +

Questo articolo riassume alcune caratteristiche del CSS viste nei moduli precedenti, come ad esempio i diversi valori di {{cssxref("display")}}, e presenta alcuni concetti che verranno trattati nel corso di questo modulo.

+ + + + + + + + + + + + +
Prerequisiti:Le basi di HTML (leggi Introduzione a HTML) e nozioni sul funzionamento del CSS (leggi Introduzione a CSS [Introduction to CSS].)
Obiettivo:Offrire una panoramica sulle tecniche di CSS usate nei layout delle pagine web. Ogni tecnica viene approfondita negli articoli a seguire.
+ +

Le tecniche di CSS applicate al layout di pagina permettono di controllare il posizionamento degli elementi contenuti nella pagina web relativamente alla loro posizione predefinita nel flusso normale di layout, agli elementi contigui, al contenitore padre o all'area di visualizzazione/finestra principale. Le tecniche per il layout di pagina che approfondiremo in questo modulo sono:

+ + + +

Ogni tecnica ha i propri casi d'uso, vantaggi e svantaggi. Nessuna di esse è concepita per funzionare in isolamento. Una volta compreso per quale scopo è stato progettato ciascun metodo, risulterà facile scegliere lo strumento di layout più adatto alle diverse esigenze.

+ +

Flusso normale

+ +

Per flusso normale si intende il layout predefinito di una pagina HTML, ovvero come viene visualizzata senza interventi da parte nostra. Ecco un breve esempio di codice HTML:

+ +
<p>Amo il mio gatto.</p>
+
+<ul>
+  <li>Compra il cibo per gatti</li>
+  <li>Esercitati</li>
+  <li>Tira su di morale un amico</li>
+</ul>
+
+<p>Fine!</p>
+ +

Secondo le impostazioni predefinite, il browser visualizza il codice in questo modo:

+ +

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

+ +

Notiamo come l'HTML venga visualizzato nell'esatto ordine in cui appare nel codice sorgente, con gli elementi incolonnati uno sotto l'altro: primo paragrafo, elenco non ordinato, secondo paragrafo.

+ +

Gli elementi che compaiono uno sotto l'altro vengono definiti come elementi blocco, al contrario degli elementi in linea, che sono disposti uno accanto all'altro come le singole parole di un paragrafo.

+ +
+

Nota: La direzione in cui si dispongono i contenuti di elementi blocco viene definita direzione blocco. La direzione blocco è verticale in lingue come l'inglese, che hanno una modalità di scrittura orizzontale. Al contrario, è orizzontale in lingue come il giapponese, che hanno una modalità di scrittura verticale. La corrispondente direzione in linea segue la direzione percorsa dai contenuti lineari, ad esempio quelli di una frase scritta.

+
+ +

Nella maggior parte dei casi, il flusso normale è sufficiente a disporre gli elementi nella pagina come ci servono. Tuttavia, per ottenere layout più complessi, occorre modificare la disposizione predefinita grazie ad alcuni strumenti disponibili nel CSS. Partire da un codice HTML ben strutturato è importante, perché permette di ritoccare la disposizione predefinita degli elementi, invece di stravolgerla.

+ +

I metodi per influenzare la disposizione degli elementi con il CSS sono i seguenti:

+ + + +

La proprietà display

+ +

I modi principali per realizzare il layout di una pagina via CSS risiedono nei diversi valori della proprietà display. Questa proprietà permette di cambiare l'impostazione predefinita per la visualizzazione di un elemento. Nel flusso normale, tutti gli elementi hanno un valore display predefinito, che definisce il comportamento per cui sono stati progettati. Ad esempio, il fatto che i paragrafi di testo nelle lingue occidentali vengano visualizzati uno sotto l'altro è dovuto al loro stile predefinito display: block. Se all'interno di un paragrafo si inserisce un link in una porzione del testo, il link rimane allineato con il resto del testo invece di andare a capo poiché lo stile predefinito dell'elemento {{htmlelement("a")}} è display: inline.

+ +

Il tipo di visualizzazione predefinito può essere modificato. Ad esempio, l'impostazione predefinita dell'elemento {{htmlelement("li")}} è display: block. Ciò significa che le voci dell'elenco nel documento vengono visualizzate una sotto l'altra, secondo l'impostazione occidentale. Se il valore di display viene modificato in inline, gli elementi dell'elenco verranno visualizzati uno accanto all'altro, come le parole di una frase. La possibilità di modificare il valore di display per tutti gli elementi significa che è possibile mantenere il loro significato semantico definito nell'HTML, indipendentemente dal modo in cui verranno visualizzati. Abbiamo, in sostanza, la possibilità di cambiarne unicamente il comportamento.

+ +

Oltre alla possibilità di cambiare la presentazione dei componenti da block a inline e vice versa, si possono creare layout con metodi più complessi, iniziando proprio dall'impostazione del valore di display. Tuttavia, occorre solitamente abbinarlo ad altre proprietà per realizzare un layout complesso. I due valori principali quando parliamo di layout sono display: flex e display: grid.

+ +

Flexbox

+ +

Flexbox è l'abbreviazione di Modulo Flexible Box Layout, progettato per facilitare la creazione di layout monodimensionali degli elementi sia in riga che in colonna. Per utilizzare Flexbox, occorre impostare display: flex al padre degli elementi su cui si intende applicare il layout; tutti i figli diretti di tale elemento diventeranno componenti flex. Ecco un semplice esempio.

+ +

Il markup HTML sottostante presenta una classe wrapper associata a un elemento contenitore, nel quale sono presenti tre elementi {{htmlelement("div")}}. Secondo il loro valore predefinito, nel documento d'esempio che ha una direzione di scrittura occidentale, gli elementi dovrebbero essere visualizzati come elementi blocco, uno sotto l'altro.

+ +

Tuttavia, una volta specificato display: flex sul padre, i tre componenti figlio si dispongono in colonna. Questo accade perché essi ora sono componenti flex e assumono il medesimo valore iniziale che Flexbox attribuisce loro attraverso il contenitore padre. In questo caso vengono presentati in riga perché il valore iniziale di {{cssxref("flex-direction")}} impostato dal padre è row. Si allungano tutti fino a raggiungere l'altezza del componente più alto perché il valore iniziale della proprietà {{cssxref("align-items")}} viene impostato a stretch dal padre. Quindi i componenti si distendono fino a raggiungere l'altezza del contenitore flex, che in questo caso è definita dal più alto tra i suoi componenti. Tutti i componenti si schierano al principio del contenitore, lasciando spazio libero alla fine della riga.

+ +
+ + +
.wrapper {
+  display: flex;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">Uno</div>
+  <div class="box2">Due</div>
+  <div class="box3">Tre</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_1', '300', '200') }}

+ +

Oltre alle suddette proprietà applicabili al contenitore flex, esistono anche proprietà che possono essere impostate sui componenti figlio. Tra le altre cose, queste proprietà possono cambiare il modo in cui i componenti si flettono, facendoli espandere o contrarre per adattarsi allo spazio disponibile.

+ +

È possibile, per esempio, aggiungere la proprietà {{cssxref("flex")}} a tutti i componenti figlio, con valore 1. Questo fa sì che tutti i componenti aumentino in dimensione sino a riempire il contenitore, invece di lasciare dello spazio vuoto alla fine. Se lo spazio aumenta, i componenti si allargano. Se lo spazio diminuisce, si contraggono. Inoltre, se viene aggiunto un nuovo elemento al markup, tutti i componenti diminuiscono la propria dimensione per far spazio al nuovo inserimento continuando a riempire la medesima area, qualsiasi essa sia.

+ +
+ + +
.wrapper {
+    display: flex;
+}
+
+.wrapper > div {
+    flex: 1;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Due</div>
+    <div class="box3">Tre</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_2', '300', '200') }}

+ +
+

Nota: Questa è solo una breve introduzione alle possibilità di Flexbox. Per approfondire l'argomento vai all'articolo Flexbox.

+
+ +

Griglia layout

+ +

Mentre Flexbox è stato progettato per il layout monodimensionale, la Griglia layout è stata progettata per essere bidimensionale, cioè per disporre gli elementi in righe e colonne.

+ +

Per passare alla modalità Griglia layout occorre innanzitutto impostare un valore di display specifico, display: grid. L'esempio seguente usa un markup simile a quello visto negli esempi di flex: presenta un contenitore e alcuni elementi figlio. Oltre a usare display: grid, definiamo anche una regola per righe e colonne nell'elemento padre utilizzando rispettivamente le proprietà {{cssxref("grid-template-rows")}} e {{cssxref("grid-template-columns")}}. Definiamo tre colonne di 1fr ciascuna e due righe di 100px. Non occorre specificare alcuna regola per gli elementi figlio, che verranno inseriti nelle celle create dalla nostra griglia in maniera automatica.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Due</div>
+    <div class="box3">Tre</div>
+    <div class="box4">Quattro</div>
+    <div class="box5">Cinque</div>
+    <div class="box6">Sei</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_1', '300', '330') }}

+ +

Una volta impostata la griglia, è possibile posizionarvi all'interno i componenti in maniera esplicita invece di affidarsi all'impostazione automatica come nell'esempio precedente. Nel secondo esempio qui sotto viene definita la stessa griglia, ma in questo caso definiamo delle regole anche per i componenti figlio. La linea iniziale e quella finale di ogni componente vengono impostate nelle proprietà {{cssxref("grid-column")}} e {{cssxref("grid-row")}}. Questo fa sì che i componenti seguano tracciati diversi.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Due</div>
+    <div class="box3">Tre</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_2', '300', '330') }}

+ +
+

Nota: Questi due esempi dimostrano solo una piccola parte delle potenzialità della Griglia layout; per scoprirne altre vedi l'articolo Griglia layout [Grid Layout].

+
+ +

La parte restante di questa guida tratta di altri metodi di strutturazione, meno rilevanti per l'impostazione del layout principale della pagina, ma utili per operazioni specifiche. Una volta compresa la funzione di ogni sezione, risulterà chiaro quale sia il metodo più adatto per strutturare ciascun componente del layout.

+ +

Elementi float

+ +

Configurando un elemento in float cambiamo il suo comportamento e quello degli elementi che gli succedono nel flusso normale. L'elemento viene spostato a sinistra o a destra e isolato dal flusso normale, il contenuto circostante scorre intorno a questo elemento.

+ +

La proprietà {{cssxref("float")}} ha quattro possibili valori:

+ + + +

Nel seguente esempio, un elemento <div> viene spostato a sinistra e il suo {{cssxref("margin")}} impostato a destra per creare uno spazio tra il testo e l'elemento. In questo modo, il corpo del testo fluisce intorno al box. Questo è tutto ciò che ci occorre conoscere nel web design moderno a proposito degli elementi float.

+ +
+ + +
<h1>Esempio semplice di float</h1>
+
+<div class="box">Float</div>
+
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+
+ +
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+
+
+ +

{{ EmbedLiveSample('Float_1', '100%', 600) }}

+ +
+

Nota: Gli elementi float vengono spiegati in maniera esauriente nell'articolo sulle proprietà float e clear. Prima dell'esistenza di metodi come Flexbox e Griglia layout, gli elementi float venivano utilizzati anche come sistema per suddividere il layout in colonne. È tutt'ora possibile imbattersi in siti web che utilizzano questo sistema. Lo scopriremo nella lezione sui metodi di layout legacy.

+
+ +

Tecniche di posizionamento

+ +

Il posizionamento permette di spostare un elemento dalla posizione che assumerebbe nel flusso normale a una nuova posizione. Il posizionamento non è un indicato per creare il layout di un'intera pagina, ma piuttosto per gestire e ritoccare la posizione di un componente specifico.

+ +

Tuttavia, esistono tecniche utili per gestire alcuni modelli di layout basati sulla proprietà {{cssxref("position")}}. Comprendere la tecnica del posizionamento permette anche di capire cos'è il flusso normale e come estromettere un componente da esso.

+ +

I tipi di posizionamento che ci serve conoscere sono cinque:

+ + + +

Semplice esempio di posizionamento

+ +

Per familiarizzare con queste tecniche di layout, vediamo un paio di semplici esempi basati sullo stesso codice HTML:

+ +
<h1>Posizionamento</h1>
+
+<p>Elemento blocco essenziale.</p>
+<p class="positioned">Elemento blocco essenziale.</p>
+<p>Elemento blocco essenziale.</p>
+ +

Il seguente CSS mostra lo stile preimpostato dell'HTML:

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

L'output mostrato è il seguente:

+ +

{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

+ +

Posizionamento relativo

+ +

Il posizionamento relativo permette di spostare un componente dalla posizione predefinita che occuperebbe nel flusso normale. Si potrebbe perciò realizzare lo spostamento di un'icona un po' più in basso per allinearla a un'etichetta testuale, aggiungendo la seguente istruzione:

+ +
.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}
+ +

In questo caso, il secondo paragrafo ha un attributo {{cssxref("position")}} di valore relative che non produce alcun effetto di per sé. Quindi, aggiungiamo le proprietà {{cssxref("top")}} e {{cssxref("left")}}, che spostano l'elemento associato in basso e a destra. Questo passaggio potrebbe sembrare controintuitivo, ma basta figurarselo come se l'elemento subisse una spinta da sinistra e dall'alto che ne provocasse lo spostamento a destra e in basso.

+ +

Aggiungendo questo codice, si ottiene il seguente risultato:

+ +
+ + +
.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Relative_1', '100%', 300) }}

+ +

Posizionamento assoluto

+ +

Il posizionamento assoluto serve a rimuovere un elemento dal flusso normale e riposizionarlo stabilendo l'offset dai margini di un blocco contenitore.

+ +

Riprendendo l'originale esempio senza posizionamento, implementiamo il posizionamento assoluto aggiungendo le seguenti regole CSS per:

+ +
.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}
+ +

In questo caso, assegniamo absolute alla proprietà {{cssxref("position")}} per il secondo paragrafo e manteniamo i valori attribuiti in precedenza alle proprietà {{cssxref("top")}} e {{cssxref("left")}}. Il codice però produce il risultato seguente.

+ +
+ + +
.positioned {
+    position: absolute;
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Absolute_1', '100%', 300) }}

+ +

La differenza si nota! L'elemento a cui viene assegnato il posizionamento è stato separato completamente dal resto del layout della pagina e allocato al di sopra di esso. Gli altri due paragrafi appaiono giustapposti e non influenzati dal primo, come se non esistesse affatto. Le proprietà {{cssxref("top")}} e {{cssxref("left")}} applicate all'elemento producono un effetto diverso a seconda del tipo di posizionamento, se assoluto oppure relativo. In questo caso, l'offset viene calcolato rispetto al lato superiore e sinistro della pagina. L'elemento padre che contiene l'elemento può essere modificato, come spiegato nella lezione dedicata al posizionamento.

+ +

Posizionamento fisso

+ +

Il posizionamento fisso estrae l'elemento a cui è applicato dal flusso del documento allo stesso modo del posizionamento assoluto. Tuttavia, gli offset vengono applicati in relazione all'area di visualizzazione, invece che in relazione al contenitore padre. Poiché il componente rimane fisso rispetto all'area di visualizzazione, siamo in grado di costruire componenti come un menu che rimane fisso mentre il resto della pagina scorre al livello sottostante.

+ +

Nel prossimo esempio, l'HTML è composto da tre paragrafi testuali (in modo da permetterci di far scorrere la pagina) e da un box a cui viene assegnata la regola position: fixed.

+ +
<h1>Posizionamento fisso</h1>
+
+<div class="positioned">Fisso</div>
+
+<p>Paragrafo 1.</p>
+<p>Paragrafo 2.</p>
+<p>Paragrafo 3.</p>
+
+ +
+ + +
.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

+ +

Posizionamento adesivo

+ +

L'ultimo tipo di posizionamento a nostra disposizione è il posizionamento adesivo. Questo tipo unisce caratteristiche del tipo statico predefinito con quelle del tipo fisso. Un componente con regola position: sticky scorre come fosse nel flusso normale sino a quando non incontra i margini definiti dall'area di visualizzazione. In quel momento "aderisce", come se avesse mutato regola in position: fixed.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

+ +
+

Nota: per saperne di più sul posizionamento, vedi l'articolo Posizionamento [Positioning].

+
+ +

Layout con tabelle

+ +

La tabelle HTML sono appropriate per rendere i dati tabulari. Tuttavia, molti anni fa, prima che i vari browser supportassero i più elementari CSS in maniera affidabile, gli sviluppatori web utilizzavano le tabelle anche per costruire l'intero layout della pagina, inserendo intestazioni, piè pagina, contenuti ecc. nelle righe e colonne della tabella. Questo approccio funzionava, ma presentava molti problemi: i layout basati su tabella non erano reattivi, generavano un markup molto pesante, creavano difficoltà nel processo di debug e a livello semantico (ad esempio, non venivano correttamente interpretati dagli screen reader).

+ +

Il modo in cui una tabella appare nella pagina web si deve a un'impostazione di proprietà CSS che ne definisce il layout. È possibile utilizzare queste proprietà anche per posizionare elementi diversi dalle tabelle. Talvolta, questo utilizzo viene definito come “tabelle CSS”.

+ +

Di seguito viene mostrato un esempio di questo uso. Tuttavia, i layout realizzati con tabelle CSS dovrebbero ormai essere considerati un metodo legacy, riservato a situazioni in cui occorre garantire la compatibilità con browser datati, che non supportano Flexbox e Griglia.

+ +

Diamo un'occhiata all'esempio. Innanzitutto vi sono alcuni semplici markup che generano il modulo HTML. Ogni elemento HTML ha un'etichetta, in più è presente un paragrafo contenente una didascalia. Tutti i campi di input accoppiati alle etichette vengono inseriti in {{htmlelement("div")}} al fine di produrre il layout.

+ +
<form>
+  <p>Prima di tutto, dichiara il tuo nome e la tua età.</p>
+  <div>
+    <label for="fname">Nome:</label>
+    <input type="text" id="fname">
+  </div>
+  <div>
+    <label for="lname">Cognome:</label>
+    <input type="text" id="lname">
+  </div>
+  <div>
+    <label for="age">Età:</label>
+    <input type="text" id="age">
+  </div>
+</form>
+ +

Segue il CSS dell'esempio. Si tratta di un codice CSS piuttosto comune, fatta eccezione per l'impiego della proprietà {{cssxref("display")}}. Gli elementi {{htmlelement("form")}}, {{htmlelement("div")}}, {{htmlelement("label")}} e {{htmlelement("input")}} vengono rispettivamente impostati come una tabella, righe di tabella e celle di tabella. Operando fondamentalmente come il markup di una tabella in HTML, i campi input e le didascalie si allineano in maniera corretta. Rimane solo da regolare la dimensione, i margini ecc. per far apparire l'insieme più gradevole.

+ +

Si noti che il paragrafo contenete la didascalia è stato impostato con la regola display: table-caption, che determina un comportamento simile a {{htmlelement("caption")}} all'interno di una tabella. Inoltre, per motivi estetici, ha l'attributo caption-side: bottom;. In questo modo, la didascalia viene visualizzata sotto al modulo, anche se nel codice sorgente è posizionata prima degli elementi <input>.

+ +

Ciò consente una notevole flessibilità.

+ +
html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}
+ +

Otteniamo il seguente risultato:

+ +

{{ EmbedLiveSample('Table_layout', '100%', '170') }}

+ +

Si veda anche l'esempio dal vivo [TODO] e il codice sorgente [TODO IT source code]

+ +

You can also see this example live at css-tables-example.html (see the source code too.)

+ +

Layout multicolonna

+ +

Il modulo di layout multicolonna permette di strutturare il contenuto in colonne, in maniera simile al testo di un quotidiano cartaceo. Il layout a colonne non è una visualizzazione ottimale nei siti web, in quanto costringe chi legge a scorrere continuamente su e giù per la pagina. Tuttavia, in alcuni casi, suddividere il contenuto in colonne si rivela utile.

+ +

Il blocco si può trasformare in un contenitore multicolonna grazie alla proprietà {{cssxref("column-count")}}, che indica al browser il numero di colonne desiderate, oppure alla proprietà {{cssxref("column-width")}}, che specifica la larghezza delle colonne (il loro numero viene automaticamente calcolato in base alla larghezza totale del contenitore).

+ +

Nel seguente esempio, un elemento <div> con classe container contiene un blocco di codice HTML.

+ +
<div class="container">
+    <h1>Layout multi-colonna</h1>
+
+    <p>Paragrafo 1.</p>
+    <p>Paragrafo 2.</p>
+
+</div>
+
+ +

La proprietà column-width con valore 200 pixel viene applicata a questo contenitore, indicando al browser di disporre tante colonne larghe 200 pixel quante sono necessarie per riempirne la larghezza. Lo spazio rimanente viene suddiviso tra le colonne, come spaziatura tra una e l'altra.

+ +
+ + +
    .container {
+        column-width: 200px;
+    }
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

+ +

Sommario

+ +

Questo articolo è un breve compendio di tutte le tecniche che occorre conoscere per sviluppare un layout. Continua la lettura per approfondire ogni singolo aspetto di questa tecnologia!

+ +

{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/css/css_layout/normal_flow/index.html b/files/it/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..01e197ad76 --- /dev/null +++ b/files/it/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,108 @@ +--- +title: Flusso normale +slug: Learn/CSS/CSS_layout/Normal_Flow +tags: + - Beginner + - CSS + - Layout + - Learn + - float + - grid + - normal flow +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

Questo articolo illustra il flusso normale ovvero il modo in cui si dispongono gli elementi che formano una pagina web in maniera spontanea, senza manipolazioni.

+ + + + + + + + + + + + +
Prerequisiti:Le basi di HTML (leggi Introduzione a HTML [Introduction to HTML]) e nozioni sul funzionamento del CSS (leggi Introduzione al CSS [Introduction to CSS].)
Obiettivo:Comprendere come i browser predispongono il layout delle pagine web prima di intervenire su di esso applicando le regole di stile CSS.
+ +

Come specificato nella lezione precedente, che introduceva al layout CSS, gli elementi di una pagina web si dispongono secondo il flusso normale, a meno che non vengano applicate alcune regole CSS che ne mutano il comportamento.
+ Come premesso, è possibile cambiare il comportamento degli elementi adattando la loro posizione all'interno del flusso oppure estrapolandoli da esso.
+ La maniera migliore per costruire una pagina web è iniziare impostando una struttura chiara e solida, adatta a essere visualizzata nel flusso normale.
+ In questo modo ci assicuriamo che il contenuto sia leggibile, anche quando l'utente usa un browser molto limitato oppure un dispositivo che, tramite screen reader, enuncia il contenuto della pagina.
+ Inoltre, poiché il flusso normale è stato progettato per rendere leggibile il documento, possiamo cominciare da questa impostazione per effettuare le modifiche in maniera armonica, senza forzature.

+ +

Prima di esplorare in maniera approfondita i vari metodi di layout, ripassiamo alcune nozioni apprese nei moduli precedenti sul flusso normale del documento.

+ +

Come si dispongono gli elementi con impostazione predefinita?

+ +

Prima di tutto, il riquadro di un determinato elemento varia a seconda del suo contenuto. Successivamente intervengono altri fattori quali la spaziatura interna, il bordo e il margine esterno, seguendo esattamente la logica del Box Model che abbiamo studiato in precedenza.

+ +

Come da impostazione predefinita, la larghezza del contenuto di un elemento di tipo blocco [block level element] copre il 100% della larghezza dell'elemento padre, mentre l'altezza dipende dall'altezza del suo contenuto. Invece, nel caso degli elementi in linea [Inline elements], sia la larghezza che l'altezza dipendono dal contenuto. Non è possibile imporre una larghezza o un'altezza degli elementi in linea, perché essi si posizionano come contenuti fluidi all'interno di un elemento blocco. Se vogliamo stabilire le sue dimensioni, occorre usare display:block per fare in modo che assuma le proprietà di un elemento blocco (oppure display: inline-block, che presenta caratteristiche di entrambi gli stili).

+ +

Il layout del flusso normale, lo abbiamo detto nell'introduzione al layout CSS, è il sistema impiegato dai browser per disporre gli elementi all'interno dell'area di visualizzazione. Come da impostazione predefinita, gli elementi di tipo blocco si dispongono secondo la direzione blocco, determinata dalla proprietà writing-mode dell'elemento padre (che assume valore iniziale horizontal-tb). Ciascun elemento occupa un'intera linea; inoltre è possibile inserire margini per separare i vari elementi. Nel caso di lingue come l'inglese, con la direzione di scrittura preimpostata da sinistra verso destra e dall’alto verso il basso, gli elementi blocco vengono disposti verticalmente dall'alto in basso.

+ +

Gli elementi in linea si comportano diversamente: non occupano una nuova linea ciascuno, bensì si susseguono lungo la medesima linea e si allineano ai contenuti testuali adiacenti sino a riempire l'intera larghezza dell'elemento padre di tipo blocco. Quando non vi è più spazio, gli elementi vanno fluidamente a capo per occupare la linea successiva.

+ +

Se due elementi adiacenti hanno margini contigui, il margine maggiore prevale su quello più esiguo che sparirà del tutto. Questo comportamento, già trattato negli articoli sui CCS di Mozilla, prende il nome di "margin collapsing" (compressione dei margini).

+ +

Il basilare esempio di seguito illustra il comportamento del flusso normale:

+ +
+
<h1>Flusso di base del documento</h1>
+
+<p>Io sono un tipico elemento blocco. L'elemento blocco che viene dopo di me, occupa la linea orizzontale successiva</p>
+
+<p>Da impostazione predefinita occupiamo il 100% della larghezza del nostro elemento padre, mentre l'altezza di ciascuno è determinata dal suo contenuto. Le nostre larghezza e altezza totali sono uguali a contenuto + margine interno + altezza/larghezza del bordo.</p>
+
+<p>Siamo separati dai margini. A causa del "margin collapse", tra uno e l'altro di noi rimane un solo margine, il maggiore, mentre il minore si comprime.</p>
+
+<p>Gli elementi in linea <span>come questo</span> e <span>quest’altro</span> si collocano entrambi sulla stessa linea e, spazio permettendo, sulla stessa linea dei nodi di testo adiacenti.
+Gli elementi in linea che eccedono la larghezza dell'elemento padre, <span> se possibile vanno a capo, continuando su una nuova linea, proprio come questo testo,</span>, altrimenti si spostano direttamente sulla linea successiva proprio come la seguente immagine: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+
+ +

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

+ +

Sommario

+ +

Ora che abbiamo compreso il flusso normale, cioè il meccanismo predefinito con cui un browser dispone gli elementi nella pagina, passiamo a studiare come cambiare l'impostazione predefinita di visualizzazione al fine di sviluppare il layout secondo la progettazione desiderata.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/css/index.html b/files/it/learn/css/index.html new file mode 100644 index 0000000000..9ffaa802c9 --- /dev/null +++ b/files/it/learn/css/index.html @@ -0,0 +1,65 @@ +--- +title: Impara a stilizzare HTML usando i CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - NeedsContent + - NeedsTranslation + - TopicStub +translation_of: Learn/CSS +--- +
{{LearnSidebar}}
+ +
I fogli di stile a cascata - o {{glossary("CSS")}} - sono la seconda tecnologia che dovresti iniziare a imparare dopo l' {{glossary("HTML")}}. Mentre l'HTML è usato per definire la struttura e la semantica del tuo contenuto, i CSS vengono utilizzati per modellarlo e disporlo graficamente. Per esempio puoi utilizzare il CSS per modificare il colore e la dimensione di un testo, animare certi elementi della pagina, aggiungere margini e bordi e molte altre casistiche.
+ +
+ +
Percorso di apprendimento
+ +
Dovresti imparare prima i concetti base dell' HTML prima di cimentarti con i CSS. Ti consigliamo di leggere prima il modulo di introduzione Cominciare con l'HTML.
+ +
Con tale modulo potrai imparare:
+ +
+ + + +

Una volta che avrai compreso i fondamenti dell'HTML, ti consigliamo di imparare HTML e CSS contemporaneamente. Questo perchè l'HTML è molto più interessante e più divertente da imparare quando applichi anche i CSS, e non puoi imparare veramente i CSS senza conoscere l'HTML.

+ +

Prima di iniziare questi argomenti, dovresti avere una certa familiarità nell'uso dei computer e nella navigazione sul web. Dovresti avere un ambiente di lavoro di base impostato secondo i dettagli forniti in Installazione di software fondamentali, e sapere come creare e gestire file, come esposto in Gestire i file — entrambi fanno parte della nostra guida completa per principianti Primi passi con il web.

+ +

Ti raccomandiamo di completare con Primi passi con il web prima di continuare con questo argomento. Questo non è assolutamente indispensabile in quanto molti argomenti affrontati nell'articolo sulle basi del CSS sono anche affrontati nella nostra Introduzione ai CSS, anche se in dettaglio molto maggiore.

+ +

Moduli

+ +

Questo argomento contiene i seguenti moduli, suggeriti in ordine di lettura. Dovresti iniziare con il primo modulo.

+ +
+
Introduzione al CSS
+
Questo modulo ti introdurrà alle basi di come funzionano i CSS, inclusi selettori e proprietà, scrivere regole CSS, applicare CSS ad HTML, come specificare lunghezza, colore ed altri elementi in CSS, ereditarietà e cascata, basi del box model ed il debug di CSS.
+
Styling text
+
Guardiamo ai fondamenti di formattazione del testo, inclusa l'impostazione del carattere, grassetto e corsivo, la spaziatura di lettere e l'interlinea, ombreggiatura ed altre caratteristiche del testo. Concludiamo il modulo guardando a come applicare un carattere personalizzato alla tua pagina e stilizzando liste e collegamenti.
+
Styling boxes
+
Subito dopo diamo un occhio a come stilizzare i contenitori, uno dei passi fondamentali verso la creazione di una pagina web. In questo modulo riepiloghiamo il modello dei contenitori per poi affrontare il controllo della disposizione degli elementi impostando riempimento, bordi e margini, impostando colori di sfondo, immagini ed altre caratteristiche come ombre e filtri sui contenitori.
+
CSS layout
+
A questo punto abbiamo già esaminato i fondamenti dei CSS, come modellare il testo e come modellare e manipolare le caselle in cui si trovano i tuoi contenuti. Ora è il momento di vedere come posizionare le tue box nel posto giusto rispetto al viewport e tra di loro. Abbiamo coperto i prerequisiti necessari in modo che ora possiamo immergerci in profondità nel layout CSS, esaminando diverse impostazioni di visualizzazione, metodi di layout tradizionali che coinvolgono float e posizionamento e nuovi strumenti di layout fangled come flexbox.
+
+ +

Solving common CSS problems

+ + + +

Usare CSS per risolvere problemi comuni fornisce collegamenti a sezioni di contenuto che spiegano come utilizzare CSS per risolvere problemi molto comuni durante la creazione di una pagina web: Styling Box.

+ +

See also

+ +
+
CSS su MDN
+
Il punto d'ingresso principale per la documentazione CSS su MDN, dove troverai documentazione di riferimento dettagliata per tutte le funzionalità del linguaggio CSS. Vuoi conoscere tutti i valori che una proprietà può assumere? Questo è un buon posto dove andare.
+
diff --git a/files/it/learn/css/styling_text/definire_stili_link/index.html b/files/it/learn/css/styling_text/definire_stili_link/index.html new file mode 100644 index 0000000000..b6bdc7a6fa --- /dev/null +++ b/files/it/learn/css/styling_text/definire_stili_link/index.html @@ -0,0 +1,438 @@ +--- +title: Definire gli stili dei link +slug: Learn/CSS/Styling_text/Definire_stili_link +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

Quando si vogliono assegnare degli stili ai link, è importante capire come fare uso delle pseudo-classi per definire efficacemente gli stili dei vari stati dei link, e come attribuire gli stili ai link per il loro uso nei più comuni elementi di interfaccia, come i menu di navigazione e le schede. Nel seguente articolo illustreremo tutti questi argomenti.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza informatica di base, elementi di HTML (leggi Introduction to HTML), elementi di CSS (leggi Introduction to CSS), Fondamenti di testo e font con CSS.
Obbiettivo:Imparare a definire gli stili degli stati dei link, e come utilizzarli efficacemente per i più comuni elementi di interfaccia come i menu di navigazione.
+ + + +

Abbiamo visto come i link possano essere impiegati nel tuo codice HTML in accordo con le best practices viste in Creare gli hyperlink. Nell'articolo aumenteremo ulteriormente questa conoscenza, mostrandoti le best practices per la definizione degli stili dei link.

+ + + +

La prima cosa da capire è il concetto di stato dei link — esistono stati differenti dei link, ai quali è possibile attribuire gli stili utilizzando differenti pseudo-classi:

+ + + +

Stili predefiniti

+ +

L'esempio seguente mostra il comportamento predefinito di un link (in questo caso il CSS aumenta il font e centra il testo per risaltarlo maggiormente).

+ +
<p><a href="#">A simple link</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('Default_styles', '100%', 120) }}

+ +
+

Nota: Tutti i link inseriti negli esempi della pagina sono simulati — sono stati inseriti i simboli # (cancelletto) o $ (sterlina) al posto dell'URL reale. Questo perché se fossero inclusi gli URL reali, cliccando su di essi, si interromperebbero gli esempi (si potrebbe verificare un errore, o caricare una pagina da cui non si potrebbe tornare indietro). Il # (cancelletto) invece si connette esclusivamente alla pagina corrente.

+
+ +

Quando esplorerete gli stili predefiniti, si noteranno alcune cose:

+ + + +

E' abbastanza interessante il fatto che questi stili predefiniti sono relativamente gli stessi rispetto a quelli usciti nei primi tempi dei browser verso la metà degli anni 90. Questo perché gli utenti conoscono e si aspettano questo comportamento — se i link avessero stili differenti da questi, confonderebbero un sacco di persone. Questo non significa che non si debbano definire gli stili del tutto, ma solo che non ci si deve allontanare troppo dalla visualizzazione che gli utenti si aspettano. Si dovrebbe almeno:

+ + + +

Gli stili predefiniti possono essere modificati o disattivati utilizzando le seguenti proprietà dei CSS:

+ + + +
+

Nota: tu non sei limitato alle suddette proprietà per definire gli stili dei tuoi link — sentiti libero di utilizzare le proprietà che più ti piacciono. Cerca solo di non diventare troppo fantasioso !

+
+ +

Definiamo qualche stile

+ +

Ora che abbiamo visto qualche dettaglio sugli stati predefiniti, diamo uno sguardo ad un tipico set di stili dei link.

+ +

Per cominciare, scriviamo il nostro set di stili vuoto:

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

Questo ordine è importante perché gli stili dei link si sovrappongono l'uno sull'altro, per esempio gli stili definiti nella prima regola si applicheranno a tutti quelli seguenti, e quando si attiva un link, ci si passa anche sopra con il mouse. Se si indicano nell'ordine sbagliato, le cose potrebbero non lavorare nel verso giusto.  Per ricordare questo ordine, si può provare ad usare, come aiuto mnemonico, LoVe Fears HAte.

+ +

Adesso si aggiungano alcune altre impostazioni per una appropriata definizione degli stili:

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

Forniamo anche il seguente esempio HTML a cui applicare il CSS:

+ +
<p>There are several browsers available, such as <a href="#">Mozilla
+Firefox</a>, <a href="#">Google Chrome</a>, and
+<a href="#">Microsoft Edge</a>.</p>
+ +

Mettendoli insieme il risultato sarà questo:

+ +

{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}

+ +

Quindi che cosa abbiamo fatto qui? Il risultato è certamente differente rispetto allo stile predefinito, ma propone ancora un'esperienza abbastanza familiare per gli utenti che sanno cosa sta succedendo:

+ + + +

Active learning: Definisci i tuoi stili

+ +

In questa sessione di active learning, ci piacerebbe che tu prendessi il nostro set di regole vuoto e aggiungessi le tue dichiarazioni per rendere i link veramente mitici. Usa la tua immaginazione e scatenati. Siamo sicuri che ti potrà venire in mente qualcosa di più fantasioso e funzionale rispetto al nostro esempio sopra.

+ +

Se fai un errore, puoi sempre ripartire usando il pulsante Reset. E se rimani bloccato, clicca sul bottone Show solution per inserire l'esempio che ti abbiamo mostrato sopra.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ + + +

Una pratica comune consiste nell'includere le icone sui link, per fornire più di un indicatore per quanto riguarda il tipo di contenuto a cui punta il link. Vediamo sotto un esempio molto semplice che associa un'icona ad un link esterno (sono i link che collegano ad altri siti). In genere tale icona è rappresentata come una piccola freccia che indica fuori da un box — per questo esempio, useremo il grande esempio fornito da icons8.com.

+ +

Guardiamo l'HTML e il CSS che ci daranno l'effetto che vogliamo. Per prima cosa, abbiamo del semplice HTML da definire:

+ +
<p>For more information on the weather, visit our <a href="#">weather page</a>,
+look at <a href="#">weather on Wikipedia</a>, or check
+out <a href="#">weather on Extreme Science</a>.</p>
+ +

Quindi il 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('Including_icons_on_links', '100%', 150) }}

+ +

So what's going on here? We'll skip over most of the CSS, as it's just the same information you've looked at before. The last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using {{cssxref("background")}} shorthand instead of the individual properties. We set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.

+ +

We also use {{cssxref("background-size")}} to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes. This does however only work with IE 9 and later, so if you need to support those older browsers, you'll just have to resize the image and insert it as is.

+ +

Finally, we set some {{cssxref("padding-right")}} on the links to make space for the background image to appear in, so we aren't overlapping it with the text.

+ +

A final word — how did we select just external links? Well, if you are writing your HTML links properly, you should only be using absolute URLs for external links — it is more efficient to use relative links to link to other parts of your own site. The text "http" should therefore only appear in external links, and we can select this with an attribute selector: a[href*="http"] selects {{htmlelement("a")}} elements, but only if they have an {{htmlattrxref("href","a")}} attribute with a value that contains "http" somewhere inside it.

+ +

So that's it — try revisiting the active learning section above and trying this new technique out!

+ +
+

Note: Don't worry if you are not familiar with backgrounds and responsive web design yet; these are explained in other places.

+
+ + + +

The tools you've explored so far in this article can also be used in other ways. For example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things.

+ +

In addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site. Let's explore how.

+ +

First, some HTML:

+ +
<ul>
+  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
+</ul>
+ +

And now our 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;
+}
+ +

This gives us the following result:

+ +

{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}

+ +

Let's explain what's going on here, focusing on the most interesting parts:

+ + + +
+

Note: You may have noticed that the list items in the HTML are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout. So we've removed the spaces. You can find more information about this problem (and solutions) at Fighting the space between inline block elements.

+
+ +

Summary

+ +

We hope this article has provided you with all you'll need to know about links — for now! The final article in our Styling text module details how to use custom fonts on your websites, or web fonts as they are better known.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/it/learn/css/styling_text/index.html b/files/it/learn/css/styling_text/index.html new file mode 100644 index 0000000000..ce435ca33b --- /dev/null +++ b/files/it/learn/css/styling_text/index.html @@ -0,0 +1,57 @@ +--- +title: Styling text +slug: Learn/CSS/Styling_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - NeedsTranslation + - Text + - TopicStub + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +
{{LearnSidebar}}
+ +

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

+ +

Prerequisites

+ +

Before starting this module, you should already have basic familiarity with HTML, as discussed in the Introduction to HTML module, and be comfortable with CSS fundamentals, as discussed in Introduction to CSS.

+ +
+

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin, CodePen or Thimble.

+
+ +

Guides

+ +

This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.

+ +
+
Fundamental text and font styling
+
In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
+
Styling lists
+
Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.
+
Styling links
+
When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.
+
Web fonts
+
Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.
+
+ +

Assessments

+ +

The following assessments will test your understanding of the text styling techniques covered in the guides above.

+ +
+
Typesetting a community school homepage
+
In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.
+
diff --git "a/files/it/learn/getting_started_with_the_web/che_aspetto_avr\303\240_il_tuo_sito_web/index.html" "b/files/it/learn/getting_started_with_the_web/che_aspetto_avr\303\240_il_tuo_sito_web/index.html" new file mode 100644 index 0000000000..3d3bc69f60 --- /dev/null +++ "b/files/it/learn/getting_started_with_the_web/che_aspetto_avr\303\240_il_tuo_sito_web/index.html" @@ -0,0 +1,117 @@ +--- +title: Che aspetto avrà il tuo sito Web? +slug: Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web +tags: + - Basi + - Design + - Fonts + - Grafica + - Web + - imparare +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
+ +
+

Che aspetto avrà il tuo sito? spiega come pianificare e lavorare sul design prima di iniziare a scrivere le primissime righe di codice. Esso include risposte a domande come "Che informazioni offre il mio sito Web?", "Quale font e colore voglio?" e "Cosa fa il mio sito?" 

+
+ +

Prima di tutto: pianifica

+ +

Prima che tu faccia qualsiasi cosa, devi avere qualche idea. Il tuo sito Web cosa dovrebbe esattamente fare? Un sito Web può fare praticamente tutto, ma inizialmente dovresti mantenere le cose semplici. Inizieremo creando una semplice pagina con un'intestazione, un'immagine e un po' di paragrafi.

+ +

Prima di iniziare dovrai rispondere a questi domande:

+ +
    +
  1. Di cosa tratterà il tuo sito Web? Ti piacciono i cani, New York, o Pacman?
    2. +
  2. Quali informazioni vorrai portare su quell'argomento? Scrivi un titolo e un po' di paragrafi e pensa a un'immagine che vorresti far vedere nella pagina.
    3. +
  3. Che aspetto ha il tuo sito Web in breve? Qual è il suo colore di sfondo? Quale genere di font è più appropriato: formale, grassetto e rumoroso, simile a un sottotitolo?
    4. +
+ +
+

Nota bene: Progetti complessi necessitano di linee guida dettagliate che vadano a fondo su ogni dettaglio di colore, font, spaziatura tra gli elementi di una pagina, stile di scrittura, e così via. Per fare questo ci si basa, di solito, su guide e linee guida severe. Puoi vedere un esempio su Firefox OS Guidelines.

+
+ +

Fare uno schizzo del design

+ +

Successivamente, prendi carta e penna e fai uno schizzo veloce su come il tuo sito Web dovrebbe essere. Per le tue prime pagine non ci sarà molto da disegnare, ma ti abituerebbe a farlo. È un'abitudine che aiuta: ricorda che non avrai bisogno di essere Van Gogh!

+ +

+ +
+

Nota bene: Anche nei siti Web complessi e professionali, i team grafici di solito iniziano con diversi schizzi veloci su carta e, solo successivamente, sviluppano un modello grafico con editor o tecnologie Web.

+ +

I gruppi di sviluppo Web spesso hanno sia un grafico (front-end developer) che un programmatore (back-end developer). I grafici, ovviamente, mettono insieme le idee grafiche per il sito. Gli sviluppatori UX hanno un ruolo più astratto e si occupano di come l'utente finale si interfaccerà con il sito.

+
+ +

Scegliere le tue risorse

+ +

A questo punto è bene iniziare a mettere insieme il contenuto che apparirà sul tuo sito Web.

+ +

Testo

+ +

Dovresti già avere i tuoi paragrafi e il tuo titolo da prima. Per ora tienili là.

+ +

Colori del tema

+ +

Per scegliere un colore, vai qui e trova il colore che più ti piace. Quando premi su un colore, vedrai uno strano codice a sei cifre come #660066. Questo è chiamato codice esadecimale, e rappresenta il tuo colore. Copia il codice in un posto sicuro per ora.

+ +

+ +

Immagini

+ +

Per scegliere un'immagine, vai su Google Immagini e cerca qualcosa che faccia al caso tuo.

+ +
    +
  1. Quando trovi l'immagine che desideri, premi sull'immagine.
    2. +
  2. Premi sul bottone Visualizza immagine.
    3. +
  3. Sulla pagina che si aprirà, premi con il tasto destro del mouse sull'immagine (Ctrl + click sul Mac), scegli Salva immagine come...,  e scegli un posto sicuro in cui salvare l'immagine. In alternativa, copia l'URL dell'immagine che trovi sulla barra degli indirizzi del tuo browser per un utilizzo futuro.
    4. +
+ +

+ +

+ +
+

Nota bene: La maggior parte delle immagini sul Web, comprese quelle su Google Immagini, sono protette da copyright. Per ridurre la tua possibilità di una violazione del diritto d'autore, puoi usare il filtro di licenza Google. Semplicemente premi su 1) Strumenti, poi su 2) Diritti di utilizzo e, infine, sulla scelta che più soddisfa le vostre necessità:

+ +

+
+ +

Font

+ +

Per scegliere un font:

+ +
    +
  1. Vai su Google Fonts e passa la lista fino a quando non troverai quello che più ti piace. Puoi anche usare il pannello sulla destra per filtrare la ricerca.
    2. +
  2. Premi il bottone con l'icona '+' (Add to) vicino al font che desideri.
    3. +
  3. Premi sul bottone "* Family Selected" nel pannello a fondo della pagina ("*" dipenderà da quanti font avrete selezionato).
    4. +
  4. Nel pop-up che esce, puoi vedere e copiare le linee di codice che Google ti darà. Ricordati di salvarle in un editor di testo, cosicché possa usarle futuro.
    5. +
+ +

+ +

 

+ +

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

+ +

 

+ +

In questo modulo

+ + + +

 

diff --git a/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html b/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html new file mode 100644 index 0000000000..47fb54afda --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html @@ -0,0 +1,99 @@ +--- +title: Come funziona il Web +slug: Learn/Getting_started_with_the_web/Come_funziona_il_Web +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

Come funziona il Web spiega in modo semplice quello che accade quando visualizzi una pagina web sul browser del tuo computer o telefono.

+
+ +

Questa parte teorica non è essenziale sin da subito per scrivere il codice web, ma a breve ti avvantaggerà capire cosa c'è sullo sfondo.

+ +

Client e server

+ +

I computer connessi sul web sono chiamati client e server. Il seguente schema semplificato mostra come possono interagire tra loro:

+ +

I due cerchi rappresentano client e server. Due frecce indicano rispettivamente una richiesta dal client al server e una risposta dal server al client

+ + + +

Le restanti componenti del Web

+ +

La descrizione appena fatta di client e server non racconta l'intera storia. Ci sono altri numerosi elementi coinvolti che descriveremo di seguito.

+ +

Immaginiamo per adesso che la rete sia una strada. A un estremo della strada si trova il client, che è come la tua abitazione. All'altro estremo della strada c'è il server, che è come un negozio dal quale vuoi acquistare qualcosa.

+ +

+ +

Oltre al client e al server dobbiamo anche considerare:

+ + + +

Ma allora: cosa accade esattamente?

+ +

Quando digiti un indirizzo web all'interno del tuo browser (seguendo la nostra analogia, è come raggiungere il negozio camminando):

+ +
    +
  1. Il browser contatta il server DNS e cerca il reale indirizzo del server su cui è ospitato il sito web (equivale a trovare l'indirizzo del negozio).
    2. +
  2. Il browser invia un messaggio di richiesta HTTP al server, chiedendogli di inviare una copia del sito web al client (equivale ad andare nel negozio e ordinare le merci). Questo messaggio e tutti gli altri dati inviati tra client e server sono inviati attraverso la tua connessione Internet, usando il protocollo TCP/IP.
    3. +
  3. Se il server approva la richiesta del client, gli invia un messaggio con scritto "200 OK", che significa "Ma certo che puoi guardare quel sito web! Eccolo" e inizia quindi ad inviare i file del sito web al browser in una serie di piccoli pezzi chiamati pacchetti di dati (seguendo l'analogia, al negozio ricevi i tuoi acquisti e li porti a casa).
    4. +
  4. Il browser assembla i piccoli pezzi in una pagina web completa e te la mostra (nell'analogia, l'ordine arriva alla porta di casa — sfavillante roba nuova, fantastico!).
    5. +
+ +

Chiarimenti sul DNS

+ +

I veri indirizzi web non sono quelle stringhe semplici e facili da ricordare che inserisci all'interno della tua barra degli indirizzi per cercare i tuoi siti web preferiti. Sono piuttosto numeri speciali dall'aspetto simile a questo: 63.245.215.20.

+ +

Si chiama {{Glossary("IP Address", "IP address")}} e rappresenta una posizione unica nel Web. Ad ogni modo, non è molto facile da ricordare, non è vero? Ecco perché sono stati inventati i Domain Name Server. Si tratta di server speciali che abbinano l'indirizzo web che digiti all'interno del tuo browser (come "mozilla.org") all'indirizzo (IP) reale del sito internet.

+ +

I siti web possono essere raggiunti direttamente attraverso il loro indirizzo IP. Puoi trovare l'indirizzo IP di un sito web digitando il suo dominio in uno strumento tipo IP Checker.

+ +

Chiarimenti sui pacchetti

+ +

Prima abbiamo usato il termine "pacchetti" per descrivere il formato in cui i dati sono inviati dal server al client. Che cosa significa? In pratica, quando i dati vengono inviati in tutto il Web, essi sono inviati sotto forma di migliaia di piccoli pezzi in modo tale che differenti utenti possano scaricare lo stesso sito web contemporaneamente. Se i siti web fossero inviati sotto forma di grandi pacchetti singoli, solamente un utente alla volta potrebbe scaricare il che, ovviamente, renderebbe il Web davvero inefficiente e poco divertente da usare.

+ +

Vedi anche

+ + + +

Credit

+ +

Street photo: Street composing, by Kevin D.

+ +

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/getting_started_with_the_web/css_basics/index.html b/files/it/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..b229d8f888 --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,267 @@ +--- +title: Basi di CSS +slug: Learn/Getting_started_with_the_web/CSS_basics +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

CSS (Cascading Style Sheets) è il codice usato per modellare lo stile delle pagine web. In questo capitolo, CSS Basics, viene spiegato di cosa si ha bisogno per iniziare. Risponderemo a domande come: come faccio a rendere il testo nero o rosso? Come faccio a far visualizzare il contenuto in un certo posto sullo schermo? Come faccio a decorare la pagina web con immagini di sfondo e colori?

+
+ +

Quindi, cosa sono i CSS in concreto?

+ +

Come l'HTML, anche il CSS non è un vero e proprio linguaggio di programmazione. Si tratta di un "linguaggio di stile", che consente cioé di applicare, selettivamente, uno stile agli elementi dei documenti HTML. Per esempio, per selezionare tutti gli elementi paragrafo di una pagina HTML e rendere rosso il testo che contengono, devi scrivere questo CSS:

+ +
p {
+  color: red;
+}
+ +

Facciamo una prova: incolliamo le tre righe di CSS nell'editor di testo, in un nuovo file e salviamolo come stile.css nella sottocartella styles.

+ +

Abbiamo ancora bisogno di collegare il CSS al documento HTML, altrimenti non influenzerà il modo in cui il browser visualizza il documento HTML. (Se non avete seguito il nostro progetto, leggete Dealing with files (Gestire i files) e HTML basics (Nozioni di base di HTML) per scoprire cosa è stato fatto fin qui.

+ +
    +
  1. Apriamo il file index.html e incolliamo la seguente riga nella sezione <head>, cioè tra i tag <head> e </head>. + 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
    2. +
  2. Salviamo index.html e apriamolo nel browser. Si dovrebbe vedere qualcosa di simile a questo:
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Se il testo dei paragrafi ora è rosso, congratulazioni! Hai appena scritto il tuo primo CSS funzionante.

+ +

Anatomia di un set di regole CSS

+ +

Diamo un'occhiata più approfondita al CSS precedente.

+ +

+ +

Tutta la struttura è chiamata "insieme di regole" (rule set), ma spesso anche solo "regola", per brevità. Nota anche i nomi delle singole parti:

+ +
+
Selettore
+
Il nome dell'elemento HTML all'inizio del set di regole. Seleziona l'elemento o gli elementi a cui applicare la regola (in questo caso, gli elementi p). Per applicare la regola di stile ad un elemento diverso basta cambiare il selettore.
+
Dichiarazione
+
Una sola regola/dichiarazione (color: red;) che definisce una delle proprietà dell'elemento.
+
Proprietà
+
Le proprietà di un dato elemento HTML che è possibile modificare; in questo caso il colore. Il colore è una delle proprietà degli elementi p. Nelle regole dei CSS si sceglie quali proprietà si desidera modificare.
+
Valore della proprietà
+
A destra della proprietà, separato dai due punti, si definisce il valore di quella proprietà, scegliendone uno tra i molti possibili (ci sono molti altri colori oltre al rosso).
+
+ +

Notate le altre parti importanti della sintassi:

+ + + +

Quindi, per modificare i valori di molte proprietà in una sola volta, è sufficiente scriverle separate da un punto e virgola; in questo modo:

+ +
p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}
+ +

Selezionare più elementi

+ +

È anche possibile selezionare più tipi di elementi e applicare a tutti un unico insieme di regole. Bisogna specificare più selettori separandoli con virgole. Per esempio:

+ +
p,li,h1 {
+  color: red;
+}
+ +

Differenti tipi di selettori

+ +

Ci sono molti diversi selettori. Fin qui, abbiamo guardato solo ai selettori elemento, che selezionano tutti gli elementi di un tipo; ma siamo in grado di effettuare selezioni più specifiche. Ecco alcuni dei più comuni tipi di selettore:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome del selettoreCosa selezionaEsempio
Element selector (a volte chiamato tag o type selector)Tutti gli elementi HTML del tipo specificatop
+ seleziona gli elementi <p>
ID selectorL'elemento della pagina con l'ID specificato (in una specifica pagina HTML è consentito un solo elemento con un certo ID).#my-id
+ Seleziona <p id="my-id"> or <a id="my-id">
Class selectorGli elementi della pagina della classe specificata (in una pagina la classe può essere richiamata più volte)..my-class
+ Selects <p class="my-class"> and <a class="my-class">
Attribute selectorGli elementi della pagina con l'attributo specificatoimg[src]
+ Seleziona <img src="myimage.png"> ma non <img>
Pseudo class selectorGli elementi specificati, ma solo quando sono nello stato specificato, ad esempio quando c'è su il mouse.a:hover
+ Seleziona <a>, ma solo quando il puntatore del mouse si trova sopra il link.
+ +

Ci sono molti altri selettori da conoscere e se ne può trovare un elenco più dettagliato nella nostra Selectors guide (guida ai selettori).

+ +

Caratteri e testo

+ +

Ora che abbiamo esplorato alcune nozioni di base dei CSS, possiamo aggiungere alcune regole e informazioni in più al nostro file stile.css per dare al nostro esempio un aspetto gradevole. Per cominciare, cerchiamo di migliorare l'aspetto dei caratteri e del testo.

+ +
    +
  1. Prima di tutto, andiamo a riprendere i Google Font che abbiamo memorizzato in un posto sicuro. Aggiungiamo il tag <link ...> da qualche parte nella <head> del documento index.html (ancora una volta, in qualsiasi punto tra i tag <head> e </head>. Sarà qualcosa di simile a questo: + + 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    +
    2. +
  2. Successivamente, eliminiamo la regola creata prima: è stato un buon esercizio, ma il testo rosso in realtà non è una bellezza.
    3. +
  3. Al suo posto mettiamo le righe seguenti, sostituendo la linea segnaposto con la vera "font-family" ottenuta da Google Font. (Font-family significa semplicemente "famiglia di caratteri" che si desidera utilizzare). Questa regola imposta un font di base e la dimensione del carattere per l'intera pagina (poiché <html> è l'elemento padre di tutta la pagina, essendo tutti gli altri elementi al suo interno, erediteranno tutti gli stessi font-size e font-family): + 
    html {
+  font-size: 10px; /* px significa 'pixels': la dimensione base del carattere è ora alta 10 pixels  */
+  font-family: segnaposto - questo dovrebbe essere il resto dell'output ottenuto da Google Fonts
+}
    + +
    +

    Nota: per spiegare cosa significa "px" è stato aggiunto un "commento". Tutto ciò che, in un documento CSS, sta tra i simboli /* e */ è un commento CSS che il browser ignora quando esegue il rendering del codice. In questo modo si possono scrivere utili annotazioni su cosa si sta facendo con quelle regole.

    +
    +
    4. +
  4. Ora impostiamo le dimensioni dei caratteri per gli elementi di testo contenuti all'interno del "corpo" del documento HTML  ({{htmlelement("h1")}}, {{htmlelement("li")}}, e {{htmlelement("p")}}). Inoltre, centriamo il testo dell'intestazione e regoliamo l'altezza delle linee e la spaziatura dei caratteri per rendere il contenuto un po' più leggibile: + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

È possibile regolare questi valori a piacimento per far apparire il progetto come si vuole, ma dovrebbe essere qualcosa del genere:

+ +

Immagine della pagina creata, un logo Mozilla e alcuni paragrafi. Impostato un tipo di carattere sans-serif, la dimensione dei caratteri, l'altezza delle linee, la spaziatura tra le lettere e l'intestazione della pagina è stata centrata.

+ +

Box, box, tutta una questione di box

+ +

Una cosa che noterete riguardo ai CSS è che sono in gran parte assimilabili a contenitori (boxes): se ne modificano le dimensioni, il colore, la posizione, ecc. La maggior parte degli elementi HTML della pagina può essere pensato come un contenitore impilato su un altro.

+ +

Immagine di una grande pila di casse impilate una sopra l'altra

+ +

Non a caso, la struttura dei CSS si basa principalmente sul "box model". Ciascuno dei blocchi (o contenitori), occupando spazio sulla pagina, ha proprietà come queste:

+ + + +

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+ +

In questa sezione usiamo anche:

+ + + +

Adesso, aggiungiamo un po' di regole al documento CSS! Mettiamole in fondo alla pagina e sperimentiamo senza paura modificando i valori per vedere cosa si ottiene.

+ +

Cambiare il colore della pagina

+ +
html {
+  background-color: #00539F;
+}
+ +

Questa regola imposta il colore di sfondo per l'intera pagina. Modificate il codice relativo al colore con quello che avete scelto pianificando il sito. (planning your site).

+ +

Formattazione del <body>

+ +
body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+ +

Qui ci sono diverse dichiarazioni; vediamole una per una:

+ + + +

Posizionare e formattare il titolo principale della pagina

+ +
h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}
+ +

Potresti aver notato che c'è un orribile spazio in cima all'elemento body. Questo accade perché i browsers applicano alcune formattazioni di default all'elemento {{htmlelement("h1")}} (tra gli altri) anche quando non viene definita alcuna regola nel CSS. Ciò potrebbe sembrare una cattiva idea, ma si vuole che anche un documento non formattato abbia una minima leggibilità. Per eliminare quello spazio abbiamo scavalcato il comportamento del browser impostando  margin: 0;.

+ +

Poi abbiamo impostato il padding dei lati top e bottom del titolo a 20 pixels e assegnato al testo lo stesso colore dello sfondo dell'elemento <html>.

+ +

Una proprietà piuttosto interessante che abbiamo usato é text-shadow, che applica un'ombra al testo contenuto nell'elemento. I suoi 4 valori sono i seguenti:

+ + + +

Ancora, proviamo a sperimentare diversi valori per capire quali effetti possiamo ottenere.

+ +

Centrare l'immagine

+ +
img {
+  display: block;
+  margin: 0 auto;
+}
+ +

Infine, centriamo l'immagine per avere un miglior effetto. Possiamo usare il trucco dei margini (margin: 0 auto) come abbiamo già fatto per il body, ma abbiamo anche bisogno di qualcos'altro: l'elemento body è block level, ciò significa che prende spazio nella pagina e gli possono essere applicati parametri come i margini e il padding. Le immagini, al contrario, sono elementi inline, il che significa che non gli si potrebbe attribuire quei parametri; quindi per applicare all'immagine i margini dobbiamo stabilire che si comporti come i blocchi, usando la regola "display: block;".

+ +
+

Nota: non preoccuparti se per ora non capisci la regola display: block; e la distinzione tra elementi del block level e inline level. La imparerai studiando più in dettaglio i CSS. Puoi scoprire di più sui possibili valori display nella nostra pagina di riferimento (display reference page).

+
+ +

Conclusioni

+ +

Se hai seguito tutte le istruzioni in questo articolo dovresti aver ottenuto qualcosa che assomiglia a questo (puoi confrontare la nostra versione qui):

+ +

Il logo mozilla, centrato, titolo e paragrafi. Adesso ha un bello stile con uno sfondo blu per l'intera pagina e arancione per la fascia principale.

+ +

Se sei bloccato puoi sempre confrontare il tuo lavoro con il nostro su GitHUb (finished example code on Github).

+ +

Qui abbiamo solo scalfito la superfice dei CSS. Per scoprire di più vai a vedere CSS Learning topic.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html b/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html new file mode 100644 index 0000000000..d7c574320b --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html @@ -0,0 +1,95 @@ +--- +title: Gestire i file +slug: Learn/Getting_started_with_the_web/Gestire_i_file +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

Un sito web è composto da molti file: contenuti testuali, codice, fogli di stile, contenuti multimediali e molto altro. Quando crei un sito web, devi assemblare questi files nel tuo computer in maniera strutturata,  facendo si che essi possano dialogare tra di loro e facendo in modo che tutto il contenuto appaia correttamente, prima di (eventualmente) caricarli su un server. Questa pagina esamina alcune problematiche che dovresti conoscere, così da saper impostare una struttura  corretta dei files necessari al tuo sito web.

+
+ +

Dove andrebbe collocato il tuo sito web all'interno del tuo computer?

+ +

Quando stai lavorando a un sito web localmente sul tuo computer, dovresti tenere tutti i file in una singola cartella che rispecchi la struttura di file all'interno del tuo server. Questa cartella può essere creata ovunque tu voglia, ma dovresti posizionarla in una directory dove tu possa facilmente trovarla, magari sul tuo Desktop, nella tua cartella di Home, o nella root del tuo hard drive.

+ +
    +
  1. Seleziona un posto dove archiviare i tuoi progetti web. Qui, crea una nuova cartella chiamata progetti-web (o qualcosa di simile). Ecco dove vivrà il tuo intero sito web.
    2. +
  2. Dentro questa prima cartella, crea un'altra cartella per archiviare al suo interno il tuo primo sito web. Chiamala sito-test (o qualcosa di più fantasioso).
    3. +
+ +

Un chiarimento riguardo gli spazi e la distinzione tra maiuscole e minuscole

+ +

Forse hai notato che, nel corso di questo articolo, i nomi delle cartelle e dei file sono sempre in minuscolo e senza spazi. Questo perchè:

+ +
    +
  1. Tanti computer, particolarmente i server web, fanno una distinzione tra lettere maiuscole e minuscole. Ad esempio: se crei un'immagine nella cartella test-site e le assegni il nome MyImage.jpg, ma successivamente provi ad aprirla usando myimage.jpg, potrebbe non funzionare.
    2. +
  2. Browsers, server web e linguaggi di programmazione non gestiscono gli spazi tutti allo stesso modo. Per esempio, se usi gli spazi nella denominazione di un file, alcuni sistemi li tratteranno come se fossero più nomi. Alcuni server sostituiscono lo spazio con "%20" (il codice carattere che viene usato al posto degli  spazi nei URL), rendendo impossibile aprire  tutti i tuoi link. È  meglio quindi separare con dei trattini o con delle sottolineature, ad esempio: my-file.html o my_file.html.
    3. +
+ +

In ogni caso dovresti usare il trattino per separare le parole. Google considera i trattini come separatori delle parole, ma non tratta le sottilineature allo stesso modo. Per queste ragioni è buona abitudine scrivere il nome dei file e delle cartelle in minuscolo senza spazi e separando le parole con trattini, almeno fino a quando sai cosa stai facendo. In questo modo non cadrai in errori comuni nel futuro.

+ +

Quale struttura dovrebbe avere il tuo sito?

+ +

La struttura più utilizzata in qualsiasi progetto è un file HTML, che funge da homepage, e delle cartelle per contenere immagini, fogli di stile e file di script. Vediamola insieme:

+ +
    +
  1. index.html: Questo file racchiude generalmente il contenuto della tua homepage, cioè il testo e le immagini che le persone vedono quando accedono per la prima volta al tuo sito. Usando il tuo text editor, crea un nuovo file chiamato index.html e salvalo nella cartella test-site.
    2. +
  2. cartella images: Questa cartella racchiude tutte le immagini che usi nel tuo sito. Crea una sottocartella chiamata images, nella cartella test-site.
    3. +
  3. cartella styles: Questa cartella racchiude il codice CSS usato per creare il contenuto  grafico  (per esempio, quale font usare, quali colori usare come sfondo). Crea una sottocartella chiamata  styles, nella cartella test-site.
    4. +
  4. cartella scripts: Questa cartella racchiude tutto il codice JavaScript usato per aggiungere funzioni interattive al tuo sito (per. es. tasti che caricano dei dati quando vengono cliccati ). Crea una sottocartella chiamata scripts, nella cartella test-site.
    5. +
+ +
+

Nota: Su Windows, potresti avere problemi a vedere l'estensione dei file, perchè Windows ha un opzione chiamata Nascondi estensioni per tipi di file conosciuti attivata per default. Normalmente puoi disattivarla in Windows Explorer, selezionando Opzioni cartella... , deselezionare Nascondi estensioni per tipi di file conosciuti, poi cliccando OK. Per avere più informazioni sulla tua versione di Windows, fai una ricerca su internet!

+
+ +

Percorsi dei file

+ +

Per permettere ad un file di trovarne un altro, dovremo indicare un percorso tra di loro - in pratica creare un itinerario, così che un file possa sapere dov'è l'altro. Per dimostrare ciò, inseriremo un po' di codice HTML nel nostro file index.html, rendendo così possibile mostrare l'immagine scelta nell'articolo "Come dovrebbe apparire il tuo sito web?"

+ +
    +
  1. Copia l'immagine scelta in precedenza nella cartella images.
    2. +
  2. Apri il file index.html, e inserisci il codice che segue, così come lo vedi scritto. Non preoccuparti  del suo significato per ora - approfondiremo i dettagli più avanti. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>La mia pagina di prova</title>
+  </head>
+  <body>
+    <img src="" alt="La mia immagine di prova">
+  </body>
+</html>
    +
    3. +
  3. La riga <img src="" alt="My test image"> è il codice HTML che si occupa di mostrare l'immagine nella pagina. Dobbiamo indicare nell'HTML dove trovare l'immagine: essa si trova all'interno della directory images, che a sua volta è nella directory comune a index.html. Scorrendo lo schema strutturale da index.html alla nostra immagine, il percorso che dovremmo avere è: images/your-image-filename. Se ad esempio, la mia immagine si chiama firefox-icon.png, allora il percorso corretto sarà images/firefox-icon.png.
    4. +
  4. Scrivi l'indirizzo del file nel codice HTML, tra le virgolette di src="".
    5. +
  5. Salva il tuo file HTML, ed aprilo con il browser web (puoi farlo velocemente con un doppio click). Dovresti vedere l'immagine nella tua pagina web appena creata.
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

Alcune regole generali per i percorsi dei file:

+ + + +

For now, this is about all you need to know.

+ +
+

Nota: Il file system di Windows, usa i backslash, non i forward slash, esempio: C:\windows. Questo nel codice HTML non conta — anche se stai sviluppando il tuo sito web su Windows, è obbligatorio usare i forward slash nel codice.

+
+ +

Cos'altro dovrei fare?

+ +

Per ora è tutto. L'albero della tua cartella / directory, dovrebbe essere simile a questo:

+ +

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("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/html_basics/index.html b/files/it/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..8ab4970c7c --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,217 @@ +--- +title: Basi di HTML +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - Corso + - Principianti +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

HTML (Hypertext Markup Language) è il codice usato per strutturare e visualizzare una pagina web e il suo contenuto. Per esempio, il contenuto potrebbe essere strutturato in una serie di paragrafi, un elenco oppure con immagini e tabelle di dati. Come suggerisce il titolo, questo articolo ti fornirà una comprensione di base dell'HTML e delle sue funzioni.

+
+ +

Ma cos'è veramente l'HTML?

+ +

HTML non è un linguaggio di programmazione; è un linguaggio basato sui markup, ed è utilizzato per indicare al browser come visualizzare le pagine web che vengono visitate. Può essere complicato o semplice a seconda di come i web designer ne utilizzano le funzionalità. HTML consiste in una serie di {{Glossary("element", "elementi")}}, che vengono usati per raggruppare o impacchettare parti differenti del contenuto, per farlo apparire o agire in uno specifico modo. L'uso dei {{Glossary("tag", "tags")}} può fare di una parola o di un'immagine un hyperlink, ossia un collegamento a qualcos'altro, oppure può rendere il testo in corsivo, il font più grande o più piccolo, eccetera. Per esempio, prendiamo la seguente linea del contenuto:

+ +
My cat is very grumpy
+ +

Se vogliamo che la linea venga visualizzata isolatamente, possiamo specificare che è un paragrafo, includendola all'interno di tags che identificano il paragrafo:

+ +
<p>My cat is very grumpy</p>
+ +

Anatomia di un elemento HTML

+ +

Analizziamo in maniera più approfondita l'elemento che identifica il paragrafo.

+ +


+

+ +

Le parti principali dell'elemento sono:

+ +
    +
  1. Il tag di apertura: è il nome dell'elemento (in questo caso, p), incluso tra il segno di minore e il segno di maggiore. Questo indica dove l'elemento inizia, o dove inizia ad avere effetto — in questo caso indica l'inizio del paragrafo.
    2. +
  2. Il tag di chiusura: ha lo stesso formato del tag di apertura ad eccezione della barra che deve precedere il nome dell'elemento. Indica dove termina l'elemento — in questo caso, la fine del paragrafo. Dimenticare di includere il tag di chiusura è uno degli errori più comuni tra i principianti e può portare a risultati imprevisti.
    3. +
  3. Il contenuto: Questo rappresenta il contenuto dell'elemento, che nel nostro caso è solo testo.
    4. +
  4. L'elemento: Il tag di apertura insieme al tag di chiusura ed al contenuto rappresentano l'elemento.
    5. +
+ +

Gli elementi possono anche avere attributi, come nell'esempio che segue:

+ +

+ +

Gli attributi contengono informazioni extra sull'elemento che non si desidera appaiano nel contenuto visualizzato. Nell'esempio, class è il nome dell'attributo, e editor-note è il valore dell'attributo. L'attributo class permette di associare un identificatore all'elemento che potrà essere usato in seguito per applicare all'elemento informazioni di stile e altre cose.

+ +

Un attributo dovrebbe sempre avere:

+ +
    +
  1. Uno spazio che lo separa dal nome dell'elemento (o dal precedente attributo, se l'elemento ha già uno o più attributi)
    2. +
  2. Il nome dell'attributo, seguito dal segno di uguale
    3. +
  3. Il valore dell'attributo incluso tra doppi apici.        
    4. +
+ +

Elementi annidati

+ +

E' possibile anche inserire elementi all'interno di altri elementi — questa modalità è chiamata nesting (annidamento). Se volessimo affermare che "The cat is very grumpy", potremmo racchiudere la parola "very" in un elemento {{htmlelement("strong")}}, che indica che la parola deve essere fortemente enfatizzata:

+ +
<p>My cat is <strong>very</strong> grumpy.</p>
+ +

Bisogna tuttavia assicurarsi che gli elementi siano opportunamente annidati: nell'esempio sopra abbiamo aperto il primo elemento {{htmlelement("p")}}, poi l'elemento {{htmlelement("strong")}}, perciò dobbiamo chiudere l'elemento {{htmlelement("strong")}} per primo, poi l'elemento {{htmlelement("p")}}. L'esempio che segue non è corretto:

+ +
<p>My cat is <strong>very grumpy.</p></strong>
+ +

Gli elementi devono essere aperti e chiusi correttamente in modo che sia chiaro come essi si trovino l'uno all'interno dell'altro. Se si sovrappongono come nell'esempio sopra, il browser web cercherà di interpretare al meglio quello che si sta cercando di dire, ma si potrebbero ottenere risultati inattesi. Quindi non va fatto!

+ +

Elementi vuoti

+ +

Alcuni elementi non hanno contenuto, e sono chiamati elementi vuoti. Prendiamo l'elemento {{htmlelement("img")}} che abbiamo nel nostro HTML:

+ +
<img src="images/firefox-icon.png" alt="My test image">
+ +

Contiene due attributi, ma non c'è il tag di chiusura </img> e non c'è un testo incluso. Questo perchè un elemento immagine non deve avere effetti su un testo. Il suo scopo è quello di aggiungere un'immagine alla pagina HTML nel punto in cui si trova.

+ +

Anatomia di un documento HTML

+ +

Include la struttura base dei singoli elementi HTML, che non sono tuttavia molto utili da soli. Ora vedremo come singoli elementi sono combinati per formare un'intera pagina HTML. Riguardiamo il codice che abbiamo inserito nel nostro esempio index.html (che abbiamo incontrato per la prima volta nell'articolo Dealing with files):

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <img src="images/firefox-icon.png" alt="My test image">
+  </body>
+</html>
+ +

Abbiamo:

+ + + +

Immagini

+ +

Rivolgiamo ancora la nostra attenzione all'elemento {{htmlelement("img")}}:

+ +
<img src="images/firefox-icon.png" alt="My test image">
+ +

Come abbiamo detto prima, quest'elemento aggiunge un'immagine nella pagina, nella posizione in cui si trova. E' l'attributo src (source) che fa questo, contenendo il percorso del file immagine.

+ +

Abbiamo anche incluso l'attributo alt (alternative). In questo attributo viene specificato il testo descrittivo per quegli utenti che non possono visualizzare l'immagine, probabilmente per i seguenti motivi:

+ +
    +
  1. Sono ipovedenti. Gli utenti con disabilità visive significative spesso usano strumenti chiamati screen reader che leggono per loro il testo dell'elemento alt
    2. +
  2. Qualcosa è andato storto causando la mancata visualizzazione dell'immagine. Per esempio, se si prova a modificare deliberatamente il percorso all'interno dell'attributo src per renderlo errato. Salvando e ricaricando la pagina, si dovrebbe vedere qualcosa di simile a ciò che segue, al posto dell'immagine:
    3. +
+ +

+ +

Le parole chiave per il testo nell'alt sono "testo descrittivo". Il testo che viene scrito nell'alt dovrebbe fornire al lettore informazioni sufficienti per avere una buona idea di ciò che l'immagine rappresenta. In questo esempio, il testo attuale "My test image" non è per niente adatto. Un'alternativa decisamente migliore per il logo di Firefox potrebbe essere "Il logo di Firefox: una volpe fiammeggiante che circonda la Terra."

+ +

Prova subito a trovare un testo adatto per l'alt delle tua immagine.

+ +
+

Nota: Scopri di più sull'accessibilità al link MDN's Accessibility landing page.

+
+ +

Marcatura del testo

+ +

Questa sezione riguarda alcuni elementi HTML di base che vengono usati per la marcatura del testo.

+ +

Intestazioni

+ +

Gli elementi Intestazioni permettono di specificare che alcune parti del contenuto sono titoli — o sottotitoli. Allo stesso modo in cui un libro ha un titolo principale, titoli di capitoli e sottotitoli, così anche un documento HTML. HTML contiene sei livelli di intestazione, {{htmlelement("h1")}}–{{htmlelement("h6")}} sebbene in genere se ne usino da 3 a 4 al massimo:

+ +
<h1>My main title</h1>
+<h2>My top level heading</h2>
+<h3>My subheading</h3>
+<h4>My sub-subheading</h4>
+ +

Ora prova ad aggiungere un titolo adatto alla tua pagina HTML appena sopra l'elemento {{htmlelement("img")}}.

+ +

Paragrafi

+ +

Come spiegato sopra, gli elementi {{htmlelement("p")}} sono usati per contenere paragrafi di testo; verranno usati di frequente per contrassegnare contenuti di testo regolari:

+ +
<p>This is a single paragraph</p>
+ +

Aggiungi il tuo testo di esempio (dovresti averlo dall'articolo What should your website look like?) in uno o più paragrafi, direttamente sotto l'elemento {{htmlelement("img")}}.

+ +

Liste

+ +

Molti contenuti web sono elenchi, e l'HTML ha elementi speciali per gestirli. La marcatura di liste consiste sempre in almeno due elementi. I tipi più comuni di lista sono le liste ordinate e le liste non ordinate:

+ +
    +
  1. +

    Le liste non ordinate sono liste in cui l'ordine degli articoli non ha importanza, come in una lista della spesa. Queste sono racchiuse in un elemento {{htmlelement("ul")}}.

    +
    2. +
  2. Le liste ordinate sono liste dove l'ordine degli articoli ha importanza, come in una ricetta. Queste sono racchiuse in un elemento {{htmlelement("ol")}}.
    3. +
+ +

Ogni articolo all'interno delle liste è inserito all'interno di un elemento {{htmlelement("li")}} (list item).

+ +

Per esempio, se volessimo convertire una parte del seguente paragrafo in una lista:

+ +
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>
+ +

Potremmo modificare la marcatura così:

+ +
<p>At Mozilla, we’re a global community of</p>
+
+<ul>
+  <li>technologists</li>
+  <li>thinkers</li>
+  <li>builders</li>
+</ul>
+
+<p>working together ... </p>
+ +

Prova ad aggiungere una lista ordinata e una non ordinata alla tua pagina di esempio.

+ +

I collegamenti

+ +

I link sono molto importanti — sono quelli che rendono il web una rete! Per aggiungere un collegamento, si deve usare un semplice elemento — {{htmlelement("a")}} — la "a" è l'abbreviazione di "anchor". Per convertire il testo del paragrafo in un link, seguire i seguenti passaggi:

+ +
    +
  1. Scegliere il testo. Noi abbiamo scelto "Mozilla Manifesto".
    2. +
  2. Includere il testo in un elemento {{htmlelement("a")}}, come segue: + 
    <a>Mozilla Manifesto</a>
    +
    3. +
  3. Dare all'elemento {{htmlelement("a")}} un attributo href, come segue: + 
    <a href="">Mozilla Manifesto</a>
    +
    4. +
  4. Compilare il valore di quest'attributo con l'indirizzo web a cui si desidera che il collegamento si colleghi: + 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
    +
    5. +
+ +

Si potrebbero ottenere risultati imprevisti se si omettono https:// o http://, che sono chiamati protocollo, all'inizio dell'indirizzo web. Dopo aver impostato un link, fare click su di esso per assicurarsi che si colleghi dove desiderato.

+ +
+

href potrebbe apparire in un primo momento come una scelta piuttosto oscura per un nome di attributo. Se hai difficoltà a memorizzarlo, ricorda che sta per hypertext reference.

+
+ +

Ora puoi aggiungere un link alla tua pagina, se ancora non l'hai fatto.

+ +

Conclusione

+ +

Se hai seguito tutte le istruzioni di questo articolo, dovresti aver ottenuto una pagina che assomiglia a questa riportata sotto (può essere anche visualizzata da questo link view it here):
+
+ A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

+ +

Se ti sei bloccato, puoi sempre confrontare il tuo lavoro con il codice di esempio finished example code che trovi su GitHub.

+ +

Qui, abbiamo solo graffiato la superficie dell'HTML. Per saperne di più, vai al seguente link HTML Learning topic.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/index.html b/files/it/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..a079b7905b --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/index.html @@ -0,0 +1,59 @@ +--- +title: Primi Passi con il Web +slug: Learn/Getting_started_with_the_web +tags: + - Beginner + - CSS + - Design + - Guide + - HTML + - Índice +translation_of: Learn/Getting_started_with_the_web +--- +
{{LearnSidebar}} +
+
+ +
+

Primi passi con il Web è una breve introduzione alle tecniche dello sviluppo web. Inizieremo conoscendo e impostando gli strumenti necessari per disegnare una semplice pagina web e pubblicare il tuo codice.

+
+ +

La storia del tuo primo sito web

+ +

Creare un sito web professionale non è certo un lavoro breve, se ti approcci per la prima volta allo sviluppo web ti suggeriamo di partire imparando le basi. Non abbiamo la pretesa di creare un nuovo Facebook ma non è difficile pubblicare il tuo semplice sito online; inizieremo da qua.

+ +

Seguendo le istruzioni contenute nei successivi articoli vedrai la tua prima pagina web pubblicata. Iniziamo!

+ +

Installare il software fondamentale

+ +

Quando si tratta di strumenti per lo sviluppo web ci sono molti software utili. Se stai iniziando potresti essere confuso dalla quantità di editor, framework e strumenti per testing che ci sono. Nella sezione Installare il software fondamentale puoi trovare guide passo-passo su come installare tutti gli strumenti che ti serviranno per iniziare con lo sviluppo.

+ +

Che aspetto avrà il tuo sito web?

+ +

Prima di iniziare a disegnare il tuo sito è meglio pensare a come farlo. Quali informazioni intendi mostrare? Che fonts e che colori vuoi usare? Come sarà il tuo sito? Ti forniamo un semplice metodo da seguire per pianificare la struttura del sito e il suo contenuto.

+ +

Gestire i file

+ +

Un sito web contiene molti file con diversi tipi di contenuto: testuale, codice, css, multimediale e così via. Quando si tratta di costruire un sito è necessario assemblare questi documenti in una struttura concreta ed assicurarsi che questi file possano interfacciasi l'un l'altro. Gestire i file ti spiega come impostare una struttura per il tuo sito e illustra i problemi dei quali essere consapevoli.

+ +

Principi di HTML

+ +

Hypertext Markup Language (HTML) è il linguaggio utilizzato per strutturare il contenuto web e fornirgli forma e significato. Consente, per esempio, di crere paragrafi o elenchi puntati; permette inoltre di disporre le immagini all'interno della pagina, di inserire tabelle o altri contenuti. Principi di HTML mette a disposizione abbastanza informazioni per approcciarsi all'HTML.

+ +

Principi di CSS

+ +

Cascading Stylesheets (CSS) è il tipo di codice utilizzato per aggiungere lo stile al sito. Per esempio, preferisci che il testo sia rosso oppure nero? Dove dovrebbe essere posto il contenuto sullo schermo? Che immagini di sfondo o colori dovrebbero essere inseriti per decorare la tua pagina? Principi di CSS ti illustra le basi necessarie per iniziare.

+ +

Principi di JavaScript

+ +

JavaScript è il linguaggio di programmazione usato per aggiungere contenuto interattivo al tuo sito, come giochi, cose che accadono alla pressione di un pulsante o all'inserimento di informazioni in un form, effetti di stile dinamici, animazioni e molto altro. Principi di JavaScript fornisce un'idea di cosa sia possibile fare con questo interessante linguaggio e di come iniziare.

+ +

Pubblicare il tuo sito

+ +

Una volta completata la scrittura del codice e organizzati i file che compongono il tuo sito è ovvimente necessario porre il tutto online, così che le persone possano trovarlo ed apprezzarlo. Pubblicare il tuo sito descrive come compiere questo processo in modo facile e col minimo sforzo.

+ +

Come funziona il Web

+ +

Quando accedi al tuo sito preferito, accadono una serie di complicati processi in background, dei quali potresti non sapere nulla. Come funziona il web spiega quello che accade quando visualizzi una pagina sul tuo computer.

+ +

{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}

diff --git a/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..8f4871eb46 --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,54 @@ +--- +title: Installazione di software fondamentali +slug: Learn/Getting_started_with_the_web/Installing_basic_software +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+ +
+

In questo articolo, ti mostriamo come eseguire l'installazione di tutti i software necessari per iniziare con lo sviluppo web.

+
+ +

Quali strumenti utilizzano i professionisti?

+ + + +

Di quali strumenti ho bisogno, in questo momento?

+ +

Sembra proprio una lista terrificante, fortunatamente puoi iniziare ad occuparti di web development senza sapere nulla di molto di ciò elencato. In questo articolo ti mostreremo quali sono gli strumenti indispensabili per incominciare — un editor di testo e qualche browser web moderno.

+ +

Installare un editor di testo

+ +

Probabilmente hai già un editor di testo di base nel tuo computer. Windows ha Notepad di default mentre macOS ha TextEdit. Le distro Linux variano; Ubuntu ha gedit di default.

+ +

Per il web development, puoi probabilmente avere di meglio che NotePad o TextEdit. Noi raccomandiamo di iniziare con Brackets, un editor gratuito che offre anteprime live e suggerimenti sul codice.

+ +

Installare browser web moderni

+ +

Per adesso, installeremo solamente un paio di browser web per desktop per testarci il nostro codice. Scegli più sotto il tuo sistema operativo e clicca sui relativi link per scaricare il file d'installazione per il tuo browser preferito:

+ + + +

Prima di andare avanti, dovresti installare almeno due di questi browser e assicurarti di averli pronti per il testing.

+ +

Installazione di un server Web locale

+ +

Alcuni esempi dovranno essere eseguiti da un server Web per funzionare correttamente. Per informazioni su come eseguire questa operazione, vedere Come si configura un server di prova locale? (How do you set up a local testing server? )

+ +

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/javascript_basics/index.html b/files/it/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..bb12f8680e --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,402 @@ +--- +title: Basi di JavaScript +slug: Learn/Getting_started_with_the_web/JavaScript_basics +tags: + - JavaScript +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

JavaScript è un linguaggio di programmazione che aggiunge interattività al tuo sito internet (per esempio: giochi, risposte al premersi di un bottone o inserimento di dati in moduli, stili dinamici e animazioni). Questo articolo ti aiuterà a iniziare il tuo percorso in questo fantastico linguaggio dandoti un'idea di ciò che è possibile costruire (spoiler alert: molte, molte cose).

+
+ +

Cos'è JavaScript, davvero?

+ +

{{Glossary("JavaScript")}} ("JS" per i fan) è un {{Glossary("Dynamic programming language", "linguaggio dinamico di programmazione")}} che, quando applicato a un documento {{Glossary("HTML")}}, può dare interattività dinamica al sito web. Fu inventato da Brendan Eich, co fondatore del Mozilla project, Mozilla Foundation e Mozilla Corporation.

+ +

JavaScript è incredibilmente versatile. Puoi iniziare dal piccolo, con slider (carousel), gallerie di immagini, layout fluttuanti, risposte al premersi di un bottone. Con più esperienza sarai in grado di creare giochi, grafiche animate 2D e 3D, applicazioni con database e molto altro!

+ +

JavaScript è un linguaggio abbastanza compatto ma comunque flessibile. Gli Sviluppatori hanno scritto una grande varietà di plugins e snippets di codice da inserire sopra al linguaggio nativo che è il cuore di JavaScript, aprendo alle potenzialità e alle extra funzionalità del linguaggio, diminuendo gli sforzi. Queste includono:

+ + + +

Questo articolo vuole essere una leggera introduzione a JavaScript, non andremo a confoderti parlando dei dettagli e delle differenze tra il linguaggio nativo di JavaScript e tutte le varie librerie e framework che sono state costruite. Potrai imparare più in dettaglio nell'area di apprendimento JavaScript, oppure nel resto di MDN.

+ +

Sotto introdurremo alcuni aspetti del linguaggio nativo e potrai giocare anche con alcune delle API del browser. Divertiti!

+ +

"ciao mondo"

+ +

Quanto scritto sopra potrebbe sembrare eccitante, e dovrebbe — JavaScript è una delle tecnologie più vivaci e iniziando a usarlo, i tuoi siti si apriranno a nuove dimensioni di potere e creatività.

+ +

Ad ogni modo, JavaScript è un po' più complesso di HTML e CSS (che non sono propriamente linguaggi di programmazione, bensì di markup e di stile). Puoi iniziare con piccole cose come questa qui sotto. Iniziamo con l'aggiungere del JavaScript di base alla nostra pagina creando un esempio "ciao mondo" (lo standard negli esempi base di programmazione).

+ +
+

Importante: Se non hai seguito il resto del corso, scarica questo esempio e usalo come punto di inizio.

+
+ +
    +
  1. Per prima cosa andiamo dove abbiamo salvato il nostro sito di test e creiamo una nuova cartella 'scripts' (senza gli apici). Poi al suo interno creiamo un file e chiamiamolo main.js (questo file è uno script di JavaScript).
    2. +
  2. Poi, nel tuo file index.html inserisci questo elemento in una nuova riga prima del tag di chiusura </body>: + 
    <script src="scripts/main.js"></script>
    +
    3. +
  3. Praticamente stiamo facendo quello che avremmo fatto per un file di stile CSS con {{htmlelement("link")}} - applichiamo il JavaScript alla pagina così che possa avere effetto su questa (e così anche sul CSS e qualsiasi altra cosa sulla pagina).
    4. +
  4. Ora aggiungi questo snippet di codice al file main.js: + 
    var myHeading = document.querySelector('h1'); // Seleziono tutti i tag h1
+myHeading.textContent = 'Hello world!'; // Cambio il testo
    +
    5. +
  5. Assicurati che i file HTML e JavaScript siano salvato e carica index.html nel browser. Dovresti vedere qualcosa di simile:
    6. +
+ +
+

Note: Abbiamo inserito l'elemento script sul fondo della pagina HTML perchè l'HTML carica in ordine lettura, in maniera sincrona. Se il JavaScript venisse caricato prima e non in fondo alla pagina, potrebbe causare dei problemi in quanto sarebbe caricato prima dell'HTML su cui lo script lavorerebbe, ma non sempre è così. Di solito è buona pratica, anche per i tempi di caricamento, inserire il JavaScript a fine pagina HTML, ma ciò può cambiare a seconda delle necessità.

+
+ +

Cos'è successo?

+ +

Il testo nell'elemento h1 è stato cambiato in "Hellow world!" usando JavaScript. Lo hai fatto utilizzando una funzione chiamata {{domxref("Document.querySelector", "querySelector()")}} per prendere un riferimento del tuo elemento h1 e poi salvando l'elemento in una variabile chiamata myHeading. Questo è molto simile a quello che abbiamo fatto con i selettori CSS. Quando vogliamo fare qualcosa con un elemento, dobbiamo prima selezionarlo.

+ +

Dopo aver selezionato l'elemento e averlo inserito nella variabile myHeading, hai cambiato la proprietà {{domxref("Node.textContent", "textContent")}} , una proprietà che fa parte nativamente degli elementi HTML grazie alla DOM API, in "Hello world!".

+ +
+

Nota: Entrambe le funzionalità che hai usato fanno parte della Document Object Model (DOM) API, che ti permette di manipolare i documenti HTML.

+
+ +

Basi del linguaggio

+ +

Parliamo di alcune delle funzionalità principali del linguaggio JavaScript, per darti un'idea migliore di come tutto funziona. Inoltre, alcune di queste funzionalità sono comuni a tutti i linguaggi di programmazione. Se riuscirai a padroneggiare queste fondamenta, sarai sulla strada giusta per programmare più o meno tutto!

+ +
+

Importante: In questo articolo, prova a inserire il codice di esempio nella tua console di JavaScript per vedere cosa succede. Per maggiori dettagli sulle console di JavaScript vedi Scoprire i tool di sviluppo del browser

+
+ +

Variabili

+ +

{{Glossary("Variable", "Le Variabili")}} sono contenitori dove puoi immagazzinare o salvare dei valori. Puoi iniziare dichiarando una variabile con la parola chiave var, seguita da qualsiasi nome tu voglia (più o meno JavaScript Keywords and Preserved Words):

+ +
var myVariable; // ok
+var _myVariable; // ok
+var $myVariable; // ok
+var my_Variable; // ok
+var -myVariable; // error
+var delete; // error, preserved keyword
+myVariable; // error
+ +
+

Nota: Il punto e virgola indica la fine di un'istruzione; è solo necessario quando devi separare le varie istruzioni su una singola riga, ma è anche buona pratica. Ci sono altre regole per sapere quando usarli e quando non usarli - vedi Your Guide to Semicolons in JavaScript per maggiori dettagli.

+
+ +
+

Nota: Puoi chiamare una variabile più o meno con qualsiasi nome ma ci sono alcune regole o restrizioni da seguire (vedi questo articolo). Se non sei sicuro puoi controllarne la validità.

+
+ +
+

Nota: JavaScript è case sensitive quindi myVariable e myvariable sono due variabili diverse. Se riscontri dei problemi nel tuoi codice, controlla le lettere!

+
+ +

Dopo aver dichiarato la variabile, puoi dargli un valore:

+ +
myVariable = 'Bob';
+ +

Oppure puoi usare una scorciatoia e unire i passaggi:

+ +
var myVariable = 'Bob';
+ +

Puoi richiamare il valore della variabile chiamandola:

+ +
myVariable;
+ +

Dopo avergli assegnato un valore puoi anche cambiarlo:

+ +
var myVariable = 'Bob';
+myVariable = 'Steve';
+ +

Nota che queste variabili sono di tipi diversi:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableExplanationExample
{{Glossary("String")}}Per denotare che una variabile è una stringa, dovresti metterne il valore tra virgolette.var myVariable = 'Bob';
{{Glossary("Number")}}I numeri non hanno virgolette intorno a loro.var myVariable = 10;
{{Glossary("Boolean")}} +

Un valore Vero/Falso. Le parole true e false sono parole chiave in JS e non hanno bisogno di virgolette.

+ 		var myVariable = true;
{{Glossary("Array")}}Una struttura che ti permette di immagazzinare più valori su un singolo riferimento.var myVariable = [1,'Bob','Steve',10];
+ Riferisciti a ogni membro dell'array:
+ myVariable[0], myVariable[1], etc.
{{Glossary("Object")}}Tutto in JavaScript è un oggetto e può essere salvato in una variabile. Tienilo a mente mentre impari.var myVariable = document.querySelector('h1');
+ +

Quindi perchè abbiamo bisogno delle variabili? Le variabili sono necessarie per rendere le cose interessanti nella programmazione. Se i valori non potessero cambiare non potremmo fare niente di dinamico, come personalizzare un messaggio di benvenuto o cambiare l'immagine mostrata in una galleria d'immagini.

+ +

Commenti

+ +

Puoi commentare il tuo codice JavaScript come faresti con il CSS:

+ +
/*
+Qui dentro è un commento
+*/
+ +

Se il tuo commento non contiene più di una riga è a volte più semplice fare un commento inline:

+ +
// Questo è un commento inline
+
+ +

Operatori

+ +

Un {{Glossary("operatore")}} è un simbolo matematico che produce risultati basandosi su due valori (o variabili). Nella seguente tabella puoi vedere gli operatori più semplici seguiti da alcuni esempi di JavaScript che puoi provare nella tua console.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorExplanationSymbol(s)Example
addizione/concatenazioneUsato per fare la somma tra due numeri o incollare insieme due stringhe.+6 + 9;
+ "Hello " + "world!";
sottrazione,moltiplicazione,divisioneQueste fanno ciò che ci si aspetta.-, *, /9 - 3;
+ 8 * 2; // per moltiplicare in JS si usa l'asterisco
+ 9 / 3;
operatore di assegnazioneL'hai già visto. Serve per assegnare un valore a una variabile.=var myVariable = 'Bob';
operatore di identitàFa un test per vedere se due variabili sono uguali o meno e restituisce un valore booleano (true/false)===var myVariable = 3;
+ myVariable === 4; // false
negazione, non ugualeRestituisce l'opposto logico.!, !== +

L'espressione di base è true ma restituisce false perchè l'abbiamo negata:

+ +

var myVariable = 3;
+ !(myVariable === 3);

+ +

Qui testiamo che myVariable NON E' UGUALE a 3". Questo restituisce false perchè myVariable E' uguale a 3.

+ +

var myVariable = 3;
+ myVariable !== 3;

+
+ +

Ci sono molti altri operatori da esplorare, per ora va bene così. Vedi Espressioni e operatori per una lista completa.

+ +
+

Nota: Mischiare tipi di dati diversi può portare a strani comportamenti quando andiamo a affrontare calcoli quindi stai attento a riferirti alle variabili corretamente per avere il risultato che ti aspetti. Per esempio, "35" + "25" non darà il risultato sperato, questo perchè i numeri sono stati messi tra virgolette e sono diventati stringhe. In questo caso stiamo facendo una concatenazione di stringhe, non un'addizione, quindi il risultato sarà 3525. Togliendo le virgolette il risultato sarà quello che ci aspettavamo.

+
+ +

Condizionali

+ +

I Condizionali sono strutture di codice che ci permettono di testare delle espressioni che restituiscono valore vero o falso, facendo funzionare parti di codice a seconda del risultato. La forma più comune è chiamata if ... else. Quindi per esempio:

+ +
var iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}
+ +

L'espressione dentro il condizionale if ( ... ) è il test — questo usa l'operatore di identità (come descritto sopra) per comparare la variabile iceCream con la stringa "chocolate" per vedere se sono uguali. Se la comparazione restituisce true, il primo blocco di codice viene eseguito, altrimenti (else) si passa al secondo blocco di codice.

+ +

Funzioni

+ +

{{Glossary("Function", "Le Funzioni")}} sono un modo di impacchettare funzionalità che pensi di riutilizzare. Quando hai bisogno di una procedura puoi chiamare una funzione con il suo nome invece di riscrivere lo stesso codice ogni volta. Avrai visto alcuni esempi di usi di funzione, per esempio:

+ +
    +
  1. + 
    var myVariable = document.querySelector('h1');
    +
    2. +
  2. + 
    alert('hello!');
    +
    3. +
+ +

Queste funzioni, documents.querySelector e alert, sono già presenti nel browser da poter utilizzare quando vuoi.

+ +

Se vedi quaclosa che assomiglia a una variabile ma ha delle parentesi dopo il nome — ( ) — allora probabilmente è una funzione. Le Funzioni spesso prendono degli {{Glossary("Argument", "argomenti")}} — pezzi di dati che gli servono per fare il proprio lavoro. Questi dati vanno all'interno delle parentesi, separati da virgole.

+ +

Per esempio, la funzione alert() fa apparire un box dentro la finestra del browser, ma dobbiamo dargli una stringa come argomento per dire alla funzione cosa scrivere all'interno del pop-up.

+ +

La buona notizia è che puoi definire le tue funzioni — nel prossimo esempio scriviamo una semplice funzione che prende due numeri come argomenti e li moltiplica, restituendo il risultato:

+ +
function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}
+ +

Prova a eseguire la funzione sopra nella console con degli argomenti di test. Per esempio:

+ +
multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);
+ +
+

Nota: La parola chiave return dice al browser di restituire la variabile risultato per renderla utilizzabile al di fuori della funzione. Questo è necessario perchè le cose che vengono definite all'interno di una funzione sono disponibili solo alla funzione. Questo è chiamato {{Glossary("Scope", "scoping")}} (Leggi di più variable scoping.)

+
+ +

Eventi

+ +

La vera interattività di un sito dipende dagli eventi. Questi sono strutture di codice che ascoltano le varie cose che succedono nel browser, rispondendo con l'esecuzione di codice. Un esempio ovvio è l'evento click che è inizializzato dal browser quando si preme qualcosa con il mouse. Per dimostrarlo, inserisci il seguente codice nella console e poi premi ovunque sulla pagina corrente.

+ +
document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}
+ +

Ci sono molti modi per attaccare un evento a un elemento. Qui selezioniamo un elemento HTML, impostando la proprietà del suo gestore onclick  a una funzione anonima (i.e. senza nome), che contiene il codice che vogliamo eseguire quando l'elemento viene premuto.

+ +

Nota che

+ +
document.querySelector('html').onclick = function() {};
+ +

è uguale a

+ +
var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};
+ +

E' solo più corta come soluzione.

+ +

Diamo i superpoteri al nostro sito web di esempio

+ +

Adesso che abbiamo visto un po' le basi di JavaScript, aggiungiamo alcune funzionalità interessanti al nostro sito di esempio per vedere cos'è possibile fare con JavaScript.

+ +

Aggiungere un cambio immagine

+ +

In questa sezione, aggiungeremo un'ulteriore immagine al nostro sito utilizzando alcune funzionalità della DOM API, usando un po' di JavaScript per scambiare le immagini quando vengono premute.

+ +
    +
  1. Prima di tutto, trova un'altra immagine che vorresti usare per il tuo sito. Assicurati che sia della stessa grandezza della prima immagine o più o meno uguale (oppure, se conosci il CSS, applica alcune regole di stile).
    2. +
  2. Salva quest'immagine nella cartella images.
    3. +
  3. Rinomina quest'immagine a 'firefox2.png' (senza apici).
    4. +
  4. Val al tuo main.js file e inserisci il seguente JavaScript. (Se il tuo "hello world" è ancora lì, cancellalo.) + 
    var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var 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. Salva tutti i file e carica index.html nel browser. Ora quando premi sull'immagine, dovrebbe scambiarsi con la seconda!
    6. +
+ +

Immagazzini un riferimento al tuo elemento immagine nella variabile myImage. Poi definisci il gestore della proprietà onclick della variabile myImage con una funzione anonima. Ora, tutte le volte che l'elemento immagine viene premuto:

+ +
    +
  1. Recuperi il valore dell'attributo src dell'immagine.
    2. +
  2. Usi un condizionale per sapere se il valore src è uguale alla destinazione dell'immagine originale: +
      +
    1. Se lo è, cambi la destinazione nell'attributo src con quella della seconda immagine, forzando l'altra immagine a essere caricata nell'elemento {{htmlelement("image")}}.
      2. +
    2. Se non lo è (quindi è già stata scambiata), il valore di src torna a essere quello della destinazione dell'immagine originale.
      3. +
    +
    3. +
+ +

Aggiungere un messaggio di benvenuto personalizzato

+ +

Aggiungiamo un altro po' di codice, cambiando il titolo della pagina in un messaggio personalizzato quando l'utente visita il sito web. Questo messaggio di benvenuto rimarrà in memoria qualora l'utente dovesse lasciare il sito per tornare in un momento successivo — lo salveremo usando la Web Storage API. Includeremo un'opzione per cambiare l'utente e quindi il messaggio di benvenuto in qualsiasi momento risulti necessario.

+ +
    +
  1. In index.html, aggiungiamo la seguente riga prima dell'elemento {{htmlelement("script")}}: + + 
    <button>Cambia utente</button>
    +
    2. +
  2. In main.js, inserisci il seguente codice alla fine del file, proprio come scritto —  questo prende i riferimenti di un nuovo bottone e dell'elemento h1, immagazzinandoli in delle variabili: + 
    var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');
    +
    3. +
  3. Inserisci questa funzione per personalizzare il messaggio di benvenuto — questo ancora non farà niente ma lo sistemeremo tra poco: + 
    function setUserName() {
+  var myName = prompt('Inserisci il tuo nome.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla is cool, ' + myName;
+}
    + Questa funzione utilizza la funzione prompt() che fa apparire un piccolo box di dialogo, un po' come alert(). Questo prompt() però chiede all'utente di inserire dei dati, salvandoli in una variabile dopo che l'utente ha premuto OK. In questo caso chiediamo all'utente di inserire il proprio nome. Dopo chiamiamo un'API chiamata localStorage che ci permette di immagazzinare dati nel browser per poi recuperarli successivamente. Usiamo la funzione setItem() di localStorage per creare e immagazzinare un oggetto chiamato 'name', impostando il suo valore a quello della variabile myName che contiene il dato inserito dall'utente. Finalmente, impostiamo il textContent dell'elemento h1 a una stringa più il valore della variabile myName che contiene il nome dell'utente.
    4. +
  4. Poi aggiungiamo un blocco if ... else — possiamo chiamare questo codice di inizializzazione per strutturare la app al suo avvio: + 
    if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla is cool, ' + storedName;
+}
    + Questo blocco prima usa l'operatore di negazione logica, poi controlla se il dato name esiste nel localStorage. Se non esiste (primo blocco), fa partire la funzione setUserName(), altrimenti recuperiamo il nome dal localStorage con la funzione getItem() e impostiamo textContent dell'elemento h1 a una stringa più il valore della stringa restituita da getItem().
    5. +
  5. Inserisci il gestore dell'evento onclick dell'elemento button. Quando premuto, la funzione setUserName() viene eseguita. Questo permette all'utente di inserire un nuovo nome quando vogliono, premendo il bottone: + 
    myButton.onclick = function() {
+  setUserName();
+}
+
    +
    6. +
+ +

Ora quando visitiamo il sito per la prima volta, ti verrà richiesto il tuo username, poi ti sarà dato un messaggio personalizzato. Puoi cambiare il tuo nome quando vuoi premendo il bottone. Come bonus aggiunto, il nome è salvato in localStorage quindi rimane in memoria anche dopo la chiusura del browser mantenendo il messaggio personalizzato quando riaprirai il sito.

+ +

Conclusione

+ +

Se hai seguito tutte le istruzioni in questo articolo, dovresti avere una pagina così (puoi vedere la nostra versione qui):

+ +

+ +

Se ti blocchi, puoi comparare il tuo lavoro con il nostro esempio finito su Github.

+ +

Abbiamo appena iniziato con JavaScript. Se ti è piaciuto giocare e vorresti avanzare ancora di più, vai al nostro JavaScript learning topic.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html b/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html new file mode 100644 index 0000000000..933bd4245c --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html @@ -0,0 +1,128 @@ +--- +title: Pubblicare il tuo sito +slug: Learn/Getting_started_with_the_web/Pubbicare_sito +tags: + - Advanced + - Beginner + - CodingScripting + - FTP + - GitHub + - Google App Engine + - Learn + - Web + - 'l10n:priority' + - publishing + - web server +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
+ +
+

Una volta finito di scrivere il codice e di organizzare i file del tuo sito, dovrai caricarli online per permettere ad altri di accedervi. Questo articolo ti aiuterà a mettere online la tua creazione senza troppi sforzi.

+
+ +

Quali opzioni ho?

+ +

Ci sono molti modi per pubblicare un sito e l'argomento è molto vasto. Lo scopo di questo articolo non è compilare una lista di tutte le opzioni possibili, ma piuttosto illustrare i pro e i contro dei tre metodi principali più indicati per i principianti e orientarti verso uno in particolare che dà risultati immediati per la maggior parte dei lettori.

+ +

Acquistare un hosting e un dominio

+ +

Per gestire più liberamente i contenuti e l'aspetto del proprio sito, molti scelgono di acquistare:

+ + + +

Molti siti professionali adottano questa soluzione.

+ +

Inoltre avrai bisogno di un programma {{Glossary("FTP", "File Transfer Protocol (FTP)")}} per trasferire i file dal tuo computer al server web (consulta How much does it cost: software per ulteriori dettagli). Ogni programma FTP funziona in modo diverso, ma in linea generale devi connetterli al tuo server web immettendo le credenziali fornite dalla tua compagnia di hosting (es. username, password, hostname). Una volta connesso, vedrai i file locali (sul tuo PC) e i file del server web in due finestre separate e potrai trasferirli da una parte all'altra:

+ +

+ +

Consigli su hosting e domini

+ + + +

Usare una piattaforma online come GitHub o Google App Engine

+ +

Puoi pubblicare il tuo sito anche attraverso alcune piattaforme:

+ + + +

A differenza della maggior parte degli hosting, questi strumenti sono gratuiti ma hanno delle funzionalità limitate.

+ +

Usare un IDE online come CodePen

+ +

Online si possono trovare numerose applicazioni web che emulano l'ambiente di sviluppo di un sito, consentendoti di vedere in tempo reale come appare il codice HTML, CSS e JavaScript mentre lo scrivi… tutto in un'unica finestra del browser! In generale, questi strumenti sono abbastanza semplici, ottimi per imparare e per condividere codice (ad esempio se vuoi mostrare una certa procedura o chiedere ai colleghi di effettuare un debug) e gratuiti accontentandosi delle funzionalità base. La pagina generata dal tuo codice viene ospitata su un indirizzo web univoco. Le funzionalità base sono però limitate e di solito non offrono spazio per ospitare risorse (come le immagini).

+ +

Prova alcuni tra questi servizi e scegli quello più adatto alle tue esigenze:

+ + + +

+ +

Pubblicare con GitHub

+ +

Vediamo ora i passi per pubblicare il tuo sito su GitHub Pages:

+ +
    +
  1. Registra un account GitHub e verifica il tuo indirizzo email.
    2. +
  2. Crea un repository per i tuoi file.
    3. +
  3. Su questa pagina, nella casella Repository name, inserisci username.github.io, dove username è il tuo username. Per esempio, Mario Rossi scriverà qualcosa come mariorossi.github.io.
    + Inoltre, spunta la casella "Initialize this repository with a README" e fai clic su Create repository.
    4. +
  4. Ora trascina e rilascia i contenuti del tuo sito nel repository e fai clic su Commit changes. +
    +

    Nota: Assicurati che la tua cartella contenga un file chiamato index.html.

    +
    +
    5. +
  5. +

    Apri username.github.io per vedere il tuo sito online. Per esempio, per il nome utente chrisdavidmills, vai a chrisdavidmills.github.io.

    + +
    +

    Nota: Potrebbero essere necessari alcuni minuti perché il sito vada online. Se non lo vedi immediatamente, attendi alcuni minuti e riprova.

    +
    +
    6. +
+ +

Per approfondire consulta GitHub Pages Help.

+ +

Approfondimenti

+ + + +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html b/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html new file mode 100644 index 0000000000..288fa8e1c2 --- /dev/null +++ b/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html @@ -0,0 +1,825 @@ +--- +title: Come costruire form widget personalizzati +slug: Learn/HTML/Forms/Come_costruire_custom_form_widgets_personalizzati +translation_of: Learn/Forms/How_to_build_custom_form_controls +--- +
{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
+ +

Ci sono molti casi in cui i widget del modulo html disponibili non sono abbastanza. Se vuoi eseguire uno styling avanzato su alcuni widget come l'elemento {{HTMLElement("select")}}  o sei vuoi fornirli di comportamenti personalizzati, l'unica scelta che hai è quella di costruirti il tuo widget personale.

+ +

In quest'articolo vedremo come costruire questo tipo di widget. A tal fine lavoreremo con un esempio: ricostruire l'elemento {{HTMLElement("select")}} .

+ +
+

Nota: ci concentreremo sulla costruzione del widget, non su come rendere il codice generico e riutilizzabile; questo comporterebbe del codice JavaScript and la manipolazione del DOM in un contesto sconosciuto, uscendo fuori dallo scopo di quest'articolo.

+
+ +

Design, strutture, e semantica

+ +

Prima di costruire un widget personalizzato, dovresti cominciare a pensare esattamente cosa vuoi. Questo ti aiuterà a evitare perdite di tempo. In particolare, e' importante definire chiaramente tutti gli stati del tuo widget. Per fare ciò, è bene cominciare da un widget esistente che ha stati e comportamenti ben noti.

+ +

Nel nostro esempio ricostruiremo l'elemento {{HTMLElement("select")}} . Ecco il risultato che vogliamo raggiungere:

+ +

The three states of a select box

+ +

Questo screenshot ci illustra i tre stati principali del nostro widget: lo stato normale(a sinistra); lo stato di attivazione ( al centro) and lo stato aperto (a destra).

+ +

In termini di compartamento vogliamo che il nostro widget sia utilizabile con il mouse e con la tastiera, proprio come un ogni widget non modificato. Cominciamo definendo come il widget raggiungerà uno stato:

+ +
+
Il widget è nel suo stato normale quando:
+
+
    +
  • la pagina carica
    • +
  • Il widget era attivo e l'utente fa clico ovunque al di fuori del widget
    • +
  • il widget era attivo e l'utente sposta lo stato attivo su un altro widget usando la tastiera
    • +
+ +
+

Nota: Moving the focus around the page is usually done through hitting the tab key, but this is not standard everywhere. For example cycling through links on a page is done in Safari by default using the Option+Tab combination.

+
+
+
Il widget è nel suo stato attivo quando:
+
+
    +
  • L'user lo clicca
    • +
  • L'user clicca il tasto tab e lo evidenzia
    • +
  • il widget era aperto and l'user clicca sul widget.
    • +
+
+
Il widget è nello stato di apertura quando:
+
+
    +
  • il widget è in uno stato diverso da quello aperto e l'utente fa clic su di esso
    • +
+
+
+ +

Una volta compreso come cambiare gli stati, e importante definire come cambiare i valori del widget:

+ +
+
I valori cambiano quando:
+
+
    +
  • l'user clicca su un'opzione quando il widget è nello stato di apertura
    • +
  • l'user preme dalla tastiera la frecciasu o giù quando il widget è aperto 
    • +
+
+
+ +

Finalmente, possiamo definire come le opzioni del widget dovranno comportarsi:

+ + + +

Ai fini del nostro esempio, ci fermeremo qui; comunque, se sei un lettore attendo avrai notato che mancano dei comportamenti. Per esempio: Cosa accadrà se l'user preme tab MENTRE il widget è aperto?La risposta è... Nulla. OK, il comportamento corretto sembra ovvio ma il fatto è che, poiché non è definito nelle nostre specifiche, è molto facile trascurare questo comportamento. Ciò è particolarmente vero in un ambiente di squadra quando le persone che progettano il comportamento del widget sono diverse da quelle che lo implementano.

+ +

Un altro esempio divertente: Cosa succederà se l'user premerà il tasto su o giù mentre il widget è aperto? Questo è un po' più complicato. Se consideri che lo stato attivo e lo stato aperto sono totalmente diversi, la risposta è di nuovo " non succederà niente"!
+ Perchè non abbiamo definito nessuna interazione con la tastiera quando il widget è aperto.D'altronde, se si considera che lo stato attivo e lo stato aperto si sovrappongono un po', il valore potrebbe cambiare ma l'opzione ma l'opzione non sarà sicuramente evidenziata di conseguenza, ancora una volta perchè non abbiamo definito interazioni con la tastiera con le opzioni quando il widget si trova nel suo stato aperto (abbiamo solo definito cosa dovrebbe accadere quando il widget è aperto, ma nulla dopo).

+ +

le specifiche mancanti sono ovvie, quindi le gestiremo, ma potrebbe rivelare dei problemi in widget nuovi ed esotici, fper cui nessuno ha la minima idea di quale sia il comportamento giusto. E' sempre opportuno utilizzare bene il proprio tempo in questa fase di desgin: se definisci malamente un comportamento, o dimentichi di definirne uno, sarà molto difficile ridefinirlo una volta che gli utenti si saranno abituati. Se hai dubbi, chiedi l'opinione altrui , e se disponi di un budget non esitare in un user tests. Questo processo è chiamato UX design. Se vuoi conoscere di più a proposito di questo argomento, dovresti controllare le seguenti risorse:

+ + + +
+

Nota: In molti sistemi c'è un modo per aprire l'elemento {{HTMLElement("select")}} per esaminare tutte le scelte disponibili (lo stesso elemento {{HTMLElement("select")}} ). This is achieved with Alt+Down arrow under Windows and was not implemented in our example —but it would be easy to do so, as the mechanism has already been implemented for the click event.

+
+ +

Definire la struttura e la semantica HTML

+ +

Ora che le funzionalità basi del nostro widget sono state deficse, e' tempo di cominciare a costruire il nostro widget. Il primo passo è di definire la struttura HTML . Questo è ciò che dobbiamo ricostruire {{HTMLElement("select")}}:

+ +
<!-- Questo è il nostro container
+     principale per il nostro widget.
+     l'attributo tabindex permette
+     all'utente di concentrarsi sul widget.
+     Vedremo dopo cos'è meglio
+     utilizzare con javascript. -->
+
+<div class="select" tabindex="0">
+
+  <!-- Questo container verrà usato per stampare il valore corrente del widget -->
+  <span class="value">Cherry</span>
+
+  <!-- Questo container conterrà tutte le opzioni disponibili per il nostro widget.
+       dato che sarà una lista, utilizzare l'opzione ul è valido. -->
+  <ul class="optList">
+    <!-- Ogni opzione contiene solo il valore da visualizzare, vedremo dopo come
+         manipolare il reale valore che vogliamo inviare col form -->
+    <li class="option">Cherry</li>
+    <li class="option">Lemon</li>
+    <li class="option">Banana</li>
+    <li class="option">Strawberry</li>
+    <li class="option">Apple</li>
+  </ul>
+
+</div>
+ +

Nota l'uso del nome delle classi; questi identificano ciascuna parte rilevante indipendentemente dagli effettivi elementi HTML sottostanti utilizzati. Questo è importante per essere sicuri che non legheremo il nostro CSS e JavaScript ad una forte struttura HTML, in modo da poter apportare modifiche all'implementazione in un secondo momento senza rompere il codice che utilizza il widget. Per esempio se desideri implementare l'equivalente dell'elemento {{HTMLElement("optgroup")}}.

+ +

Creare l'aspetto grafico utilizzando i CSS

+ +

Ora che abbiamo una struttura HTML possiamo cominciare a disegnare il nostro widget. L'intero punto di costruzione di questo widget personalizzato è di essere in grado di modellare questo widget esattamente come vogliamo. Al fine di ciò, divideremo i nostri CSS in due parti: la prima parte sarà necessaria per avere un widget simile a {{HTMLElement("select")}} ,la seconda parte consisterà nella parte grafica in modo che appaia come noi vogliamo.

+ +

Stili richiesti

+ +

Gli stili richiesti sono quelli necessari per gestire i tre stati del nostro widget.

+ +
.select {
+  /* Questo creerà un contesto di posizionamento per l'elenco di opzioni */
+  position: relative;
+
+  /*Questo renderà il nostro widget parte del flusso di testo e allo stesso tempo considerevole */
+  display : inline-block;
+}
+ +

Abbiamo bisogno di una classe extra "active" per definire il look del nostro widget quando è nello stato di attivazione. Poichè il nostro widget è selezionabile,dobbiamo raddoppiare questo stile personale con la pseudo-classe {{cssxref(":focus")}} In modo da essere sicuri che abbiano lo stesso comportamento.

+ +
.select.active,
+.select:focus {
+  outline: none;
+
+  /* Questo box-shadow non è richiesto al corretto funzionamento ,
+     tuttavia è importante per essere sicuro che lo stato di attivazione
+     sia visibile e che lo utilizziamo come valore di defaul,
+     sentiti libero di modificarlo. */
+  box-shadow: 0 0 3px 1px #227755;
+}
+ +

Ora manipoliamo la lista delle opzioni:

+ +
/* il selettore .select è zucchero sintattico ( traduzione letterale,
+   concettualmente vuol dire " rendere del codice più dolce, più umano "
+   per essere sicuri che le classi che definiamo siano quelli all'interno del nostro widget.
+ */
+
+.select .optList {
+  /* Ciò assicurerà che il nostro elenco di opzioni sia visualizzato sotto il valore
+      e fuori dal flusso HTML */
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}
+ +

Abbiamo bisogno di una classe extra per manipolare la lista quando le opzioni sono nascoste. Questo è necessario per gestire le differenze tra lo stato attivo e lo stato aperto che non corrispondono esattamente.

+ +
.select .optList.hidden {
+  /* Questo è un modo semplice per nascondere la lista in modo accessibile,
+      parleremo di più sull'accessibilità alla fine */
+  max-height: 0;
+  visibility: hidden;
+}
+ +

Abbellimento

+ +

Ora che abbiamo le funzionalità base, possiamo cominciare a divertirci. Quello seguente è solo un esempio di ciò che è possibile, e corrisponderà allo screenshot all'inizio di questo articolo. Dovresti sentirti libero di sperimentare e vedere cosa accade.

+ +
.select {
+  /* Tutte le taglie saranno espresse con il valore em per motivi di accessibilità
+      (per assicurarsi che il widget rimanga ridimensionabile se l'utente usa il
+      zoom del browser in modalità solo testo). I calcoli sono fatti
+      assumendo 1em == 16px quale è il valore predefinito nella maggior parte dei browser.
+      Se ti perdi la conversione di px in em, prova http://riddle.pl/emcalc/ * /
+  font-size   : 0.625em;
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* Abbiamo bisogno di spazio extra per la freccia in giù che aggiungeremo
+ */
+  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 prima dichiarazione serve per i browser che non supportano i gradienti lineari.
+     La seconda dichiarazione è perché i browser basati su WebKit non hanno ancora una definizione prefissata.
+     Se vuoi supportare i browser legacy prova 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 {
+  /* poichè i valori possono essere più larghi del nostro widget, dobbiamo essere sicuri
+     che il widget cambierà dimensione */
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  vertical-align: top;
+
+  /* E se il contenuto va in overflow, è bello avere un bell'elisse . */
+  white-space  : nowrap;
+  text-overflow: ellipsis;
+}
+ +

Non abbiamo bisogno di altri elementi per disegnare la freccia in basso; useremo invece lo pseudo-elemento {{cssxref(":after")}}. Comunque potrebbe anche essere implementato usando una semplice immagine  di background.

+ +
.select:after {
+  content : "▼"; /* utilizziamo il carattere unicode U+25BC; vedi http://www.utf8-chartable.de */
+  position: absolute;
+  z-index : 1; /* importante per la posizione della freccia in modo da evitare
+               sovrapposizionamenti */
+  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;
+}
+ +

ora cominciamo il design della lista delle opzioni:

+ +
.select .optList {
+  z-index : 2; /* Dichiariamo esplicitamente che la lista delle opzioni si sovraporrà
+                  alla freccia */
+
+  /*Questo resetterà lo stile di default degli elementi <ul> */
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* Ciò assicurerà che anche se i valori sono inferiori al widget,
+      l'elenco delle opzioni sarà grande quanto il widget stesso */
+  min-width : 100%;
+
+  /*Nel caso in cui l'elenco sia troppo lungo, il suo contenuto si sovrapporrà verticalmente
+      (che aggiungerà automaticamente una barra di scorrimento verticale) ma mai in orizzontale
+      (poiché non abbiamo impostato una larghezza, la lista regolerà automaticamente la sua larghezza.
+      Se non è possibile, il contenuto verrà troncato) */
+  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;
+}
+ +

Per le opzioni abbiamo bisogno di aggiungere la classe highlight in modo da identificare il valore che l'user selezionerà (o ha selezionato).

+ +
.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

ecco i risultati dei nostri 3 stati:

+ + + + + + + + + + + + + + + + + + + +
Basic stateActive stateOpen state
{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
Check out the source code
+ +

Porta in vita il tuo widget con javascript

+ +

Ora che il nostro designe e la nostra struttura sono pronti possiamo scrivere il codice JavaScript che farà effettivamente lavorare il widget.

+ +
+

Pericolo: Il seguente codice è educativo e non dovrebbe essere usato così com'è. Tra le tante cose, come vedremo, non è a prova di futuro e non funzionerà sui browser legacy. Ha anche parti ridondanti che dovrebbero essere ottimizzate nel codice di produzione.

+
+ +
+

Nota: Creare widget riutilizzabili è qualcosa che può essere un po 'complicato. La bozza del componente Web W3C è una delle risposte a questo specifico problema. Il progetto X-Tag è un'implementazione di test di questa specifica; ti invitiamo a dare un'occhiata a questo.

+
+ +

Perchè non funziona?

+ +

Prima di cominciare, è importante ricordare qualcosa di fondamentale a proposito di JavaScript: dentro un browser, è una tecnologia inaffidabile. Quando stai costruendo widget personalizzati, dovrai fare affidamento su javascript perchè è un filo necessario per legare tutto insieme. Tuttavia, ci sono molti casi in cui JavaScript non può essere eseguito nel browser:

+ + + +

Per via di questi rischi, è molto importante considerare seriamente cosa accadrà se JavaScript non funziona. Trattare dettagliatamente questo problema è fuori dallo scopo di questo articolo perché è strettamente legato al modo in cui si desidera rendere generico e riutilizzabile lo script, ma nel nostro esempio considereremo le basi di ciò.

+ +

Nel nostro esempio, se il nostro codice JavaScript non è in esecuzione, ricorreremo alla visualizzazione di un elemento {{HTMLElement("select")}}. Per raggiungere questo abbiamo bisogno di due cose.

+ +

Per prima cosa, dobbiamo aggiungere un normale elemento {{HTMLElement ("select")}} prima di ogni utilizzo del nostro widget personalizzato. Questo è in realtà richiesto anche per poter inviare dati dal nostro widget personalizzato insieme al resto dei dati del nostro modulo;diremo di più a proposito più tardi.

+ +
<body class="no-widget">
+  <form>
+    <select name="myFruit">
+      <option>Cherry</option>
+      <option>Lemon</option>
+      <option>Banana</option>
+      <option>Strawberry</option>
+      <option>Apple</option>
+    </select>
+
+    <div class="select">
+      <span class="value">Cherry</span>
+      <ul class="optList hidden">
+        <li class="option">Cherry</li>
+        <li class="option">Lemon</li>
+        <li class="option">Banana</li>
+        <li class="option">Strawberry</li>
+        <li class="option">Apple</li>
+      </ul>
+    </div>
+  </form>
+
+</body>
+ +

Secondo, abbiamo bisogno di due nuove classi per nascondere l'elemento non necessario (cioè, l'elemento "reale" {{HTMLElement ("select")}} se il nostro script non è in esecuzione o il widget personalizzato è in esecuzione) . Nota che per impostazione predefinita, il nostro codice HTML nasconde il nostro widget personalizzato.

+ +
.widget select,
+.no-widget .select {
+  /*Questo selettore css afferma:
+     - o abbiamo impostato la classe del corpo su "widget",
+       quindi nascondiamo l'effettivo elemento {{HTMLElement ("select")}}
+      - o non abbiamo cambiato la classe del corpo, quindi la classe del corpo
+         è ancora "no-widget",
+        quindi gli elementi di classe "select" devono essere nascosti */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+ +

Ora abbiamo solo bisogno di un interruttore JavaScript per determinare se lo script è in esecuzione o meno. Questa opzione è molto semplice: se al momento del caricamento della pagina il nostro script è in esecuzione, rimuoverà la classe no-widget e aggiungerà la classe widget, scambiando così la visibilità dell'elemento {{HTMLElement ("select")}} e del widget personalizzato.

+ +
window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});
+ + + + + + + + + + + + + + + + + +
Without JSWith JS
{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
Check out the source code
+ +
+

Nota: Se vuoi veramente rendere il tuo codice generico e riutilizzabile, invece di fare un cambio di classe è meglio aggiungere semplicemente la classe del widget per nascondere gli elementi {{HTMLElement ("select")}} e aggiungere dinamicamente l'albero DOM che rappresenta il widget personalizzato dopo ogni {{HTMLElement ("select")}} elemento nella pagina.

+
+ +

Rendere il lavoro più facile

+ +

Nel codice che stiamo per costruire, useremo l'API DOM standard per fare tutto il lavoro di cui abbiamo bisogno. Tuttavia, sebbene il supporto dell'API DOM sia diventato molto meglio nei browser, ci sono sempre problemi con i browser legacy (specialmente con il buon vecchio Internet Explorer).

+ +

Se vuoi evitare problemi con i browser legacy, ci sono due modi per farlo: usando un framework dedicato come jQuery, $ dom, prototype, Dojo, YUI, o simili, o facendo il polyfilling della funzione mancante che vuoi usare ( che può essere fatto facilmente attraverso il caricamento condizionale, ad esempio con la libreria yepnope).

+ +

Le funzionalità che intendiamo utilizzare sono le seguenti (ordinate dal più rischioso al più sicuro):

+ +
    +
  1. {{domxref("element.classList","classList")}}
    2. +
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. +
  3. forEach (This is not DOM but modern JavaScript)
    4. +
  4. {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. +
+ +

Oltre alla disponibilità di tali funzionalità specifiche, rimane ancora un problema prima dell'avvio. L'oggetto restituito dalla funzione {{domxref ("element.querySelectorAll", "querySelectorAll ()")}} è un {{domxref ("NodeList")}} piuttosto che una matrice. Questo è importante perché gli oggetti Array supportano la funzione forEach, ma {{domxref ("NodeList")}} no. Poiché {{domxref ("NodeList")}} sembra davvero un array e poiché forEach è così comodo da usare, possiamo facilmente aggiungere il supporto di forEach a {{domxref ("NodeList")}} per rendere la nostra vita più facile, così:

+ +
NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+ +

We weren't kidding when we said it's easy to do.

+ +

Creazione di eventi Callback

+ +

Il terreno è pronto, ora possiamo iniziare a definire tutte le funzioni che verranno utilizzate ogni volta che l'utente interagisce con il nostro widget.

+ +
// Questa funzione verrà utilizzata ogni volta che si desidera disattivare un widget personalizzato
+// Richiede un parametro
+// seleziona: il nodo DOM con la classe `select` da disattivare
+function deactivateSelect(select) {
+
+  // Se il widget non è attivo non c'è nulla da fare
+  if (!select.classList.contains('active')) return;
+
+  // Abbiamo bisogno di ottenere l'elenco delle opzioni per il widget personalizzato
+  var optList = select.querySelector('.optList');
+
+  // Chiudiamo la lista delle opzioni
+  optList.classList.add('hidden');
+
+  // e disattiviamo il custom widget
+  select.classList.remove('active');
+}
+
+// questa funzione verrà utilizzata ogni volta che l'user(dis)attiverà il widget
+// prende due parametri:
+// select : il nodo del DOM con le classi 'select' da attivare
+// selectList :la lista di tutti i nodi dom con la la classe 'select'
+
+function activeSelect(select, selectList) {
+
+  // Se il widget è già attivo non c'è niente da fare
+  if (select.classList.contains('active')) return;
+
+  // Dobbiamo disattivare lo stato attivo su tutti i widget personalizzati
+   // Perché la funzione deactivateSelect soddisfa tutti i requisiti di
+   // per ogni funzione di callback, la usiamo direttamente senza usare un intermediario
+   // funzione anonima.
+  selectList.forEach(deactivateSelect);
+
+  // E attiviamo lo stato attivo per questo specifico widget
+  select.classList.add('active');
+}
+
+// Questa funzione verrà utilizzata ogni volta che l'utente desidera aprire / chiudere l'elenco di opzioni
+// Richiede un parametro:
+// seleziona: il nodo DOM con l'elenco da attivare
+function toggleOptList(select) {
+
+ // L'elenco è tenuto dal widget
+  var optList = select.querySelector('.optList');
+
+  // Modifichiamo la classe dell'elenco per mostrarlo / nasconderlo
+  optList.classList.toggle('hidden');
+}
+
+// Questa funzione verrà utilizzata ogni volta che sarà necessario evidenziare un'opzione
+// Ci vogliono due parametri:
+// seleziona: il nodo DOM con la classe `select` contenente l'opzione da evidenziare
+// opzione: il nodo DOM con la classe `option` da evidenziare
+function highlightOption(select, option) {
+
+  // Otteniamo l'elenco di tutte le opzioni disponibili per il nostro elemento di selezione personalizza
+  var optionList = select.querySelectorAll('.option');
+
+  // Rimuoviamo l'evidenziazione da tutte le opzioni
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+ // Evidenziamo l'opzione giusta
+  option.classList.add('highlight');
+};
+ +

 

+ +

Questo è tutto ciò che serve per gestire i vari stati del widget personalizzato.

+ +

Successivamente, associamo queste funzioni agli eventi appropriati:

+ +

 

+ +
// Gestiamo il binding di eventi quando il documento è caricato.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+
+    // Ogni widget personalizzato deve essere inizializzato
+    var optionList = select.querySelectorAll('.option');
+
+    // Ogni volta che un utente passa il mouse su un'opzione, evidenziamo l'opzione data
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // Nota: le variabili `select` e` option` sono le chiusure
+         // disponibile nell'ambito della nostra chiamata di funzione.
+        highlightOption(select, option);
+      });
+    });
+
+    // Ogni volta che l'utente fa clic su un elemento di selezione personalizzato
+    select.addEventListener('click', function (event) {
+     // Nota: la variabile `select` è una chiusura
+       // disponibile nell'ambito della nostra chiamata di funzione.
+
+      // Accendiamo la visibilità dell'elenco di opzioni
+      toggleOptList(select);
+    });
+
+    // Nel caso in cui il widget ottenga lo stato attivo
+     // Il widget ottiene l'attenzione ogni volta che l'utente fa clic su di esso o ogni volta
+     // usano la chiave di tabulazione per accedere al widget
+    select.addEventListener('focus', function (event) {
+      // Nota: le variabili `select` e` selectList` sono le chiusure
+       // disponibile nell'ambito della nostra chiamata di funzione.
+
+      // Attiviamo il widget
+      activeSelect(select, selectList);
+    });
+
+    // Nel caso in cui il widget lasci il focus
+    select.addEventListener('blur', function (event) {
+      // Nota: la variabile `select` è una chiusura
+       // disponibile nell'ambito della nostra chiamata di funzione.
+
+       // Disattiamo il widget
+      deactivateSelect(select);
+    });
+  });
+});
+ +

A quel punto, il nostro widget cambierà stato in base al nostro progetto, ma il suo valore non viene ancora aggiornato. Lo gestiremo dopo.

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}
Check out the source code
+ +

Gestire il valore del Widget

+ +

 

+ +

Ora che il nostro widget funziona, dobbiamo aggiungere del codice per aggiornarne il valore in base all'input dell'utente e rendere possibile l'invio del valore insieme ai dati del modulo.

+ +

Il modo più semplice per farlo è usare un widget nativo sotto il cofano. Tale widget terrà traccia del valore con tutti i controlli integrati forniti dal browser e il valore verrà inviato normalmente al momento della presentazione di un modulo. Non ha senso reinventare la ruota quando possiamo fare tutto questo per noi.

+ +

Come visto in precedenza, utilizziamo già un widget di selezione nativo come fallback per motivi di accessibilità; possiamo semplicemente sincronizzare il suo valore con quello del nostro widget personalizzato:

+ +

 

+ +
// Questa funzione aggiorna il valore visualizzato e lo sincronizza con il widget nativo.
+// Ci vogliono due parametri:
+// seleziona: il nodo DOM con la classe `select` contenente il valore da aggiornare
+// indice: l'indice del valore da selezionare
+function updateValue(select, index) {
+ // Abbiamo bisogno di ottenere il widget nativo per il widget personalizzato specificato
+   // Nel nostro esempio, quel widget nativo è un fratello del widget personalizzato
+  var nativeWidget = select.previousElementSibling;
+
+  // Abbiamo anche bisogno di ottenere il valore segnaposto del nostro widget personalizzato
+  var value = select.querySelector('.value');
+
+  // E abbiamo bisogno dell'intero elenco di opzioni
+  var optionList = select.querySelectorAll('.option');
+
+  // Impostiamo l'indice selezionato sull'indice di nostra scelta
+  nativeWidget.selectedIndex = index;
+
+  // Aggiorniamo il valore placeholder di conseguenza
+  value.innerHTML = optionList[index].innerHTML;
+
+  // E evidenziamo l'opzione corrispondente del nostro widget personalizzato
+  highlightOption(select, optionList[index]);
+};
+
+// Questa funzione restituisce l'indice selezionato corrente nel widget nativo
+// Richiede un parametro:
+// seleziona: il nodo DOM con la classe `select` relativa al widget nativo
+function getIndex(select) {
+ // È necessario accedere al widget nativo per il widget personalizzato specificato
+   // Nel nostro esempio, quel widget nativo è un fratello del widget personalizzato
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+ +

Con queste due funzioni, possiamo associare i widget nativi a quelli personalizzati:

+ +
// Gestiamo il binding di eventi quando il documento è caricato.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+ // Ogni widget personalizzato deve essere inizializzato
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // Rendiamo focalizzabile il nostro widget personalizzato
+    select.tabIndex = 0;
+
+// Facciamo in modo che il widget nativo non sia più focalizzabile
+    select.previousElementSibling.tabIndex = -1;
+
+    // Ci assicuriamo che il valore selezionato di default sia visualizzato correttamente
+    updateValue(select, selectedIndex);
+
+    // Ogni volta che un utente fa clic su un'opzione, aggiorniamo di conseguenza il valore
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // Ogni volta che un utente usa la propria tastiera su un widget focalizzato, aggiorniamo di conseguenza il valore
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+     // Quando l'utente preme la freccia giù, passiamo all'opzione successiva
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+
+// Quando l'utente preme la freccia su, passiamo all'opzione precedente
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+ +

 

+ +

Nel codice sopra, vale la pena notare l'uso della proprietà tabIndex. L'utilizzo di questa proprietà è necessario per garantire che il widget nativo non acquisisca mai l'attenzione e per assicurarsi che il nostro widget personalizzato ottenga lo stato attivo quando l'utente utilizza la sua tastiera o il suo mouse.

+ +

Con quello, abbiamo finito! Ecco il risultato:

+ +

 

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}
Check out the source code
+ +

Ma aspetta un secondo, abbiamo davvero finito?

+ +

Renderlo accessibile

+ +

 

+ +

Abbiamo costruito qualcosa che funziona e sebbene siamo lontani da una casella di selezione completa, funziona bene. Ma quello che abbiamo fatto non è altro che il violino con il DOM. Non ha una vera semantica e, anche se sembra una casella di selezione, dal punto di vista del browser non ne è uno, quindi le tecnologie assistive non saranno in grado di capire che è una casella di selezione. In breve, questa nuova casella di selezione non è accessibile!

+ +

Fortunatamente, esiste una soluzione e si chiama ARIA. ARIA è l'acronimo di "Accessible Rich Internet Application" ed è una specifica W3C specificamente progettata per ciò che stiamo facendo qui: rendere accessibili le applicazioni web e i widget personalizzati. È fondamentalmente un insieme di attributi che estendono l'HTML in modo da poter meglio descrivere ruoli, stati e proprietà come se l'elemento che abbiamo appena escogitato fosse l'elemento nativo per cui tentava di passare. L'utilizzo di questi attributi è estremamente semplice, quindi facciamolo.

+ +

 

+ +

L'attributo 'role'

+ +

 

+ +

L'attributo chiave utilizzato da ARIA è l'attributo 'role'. L'attributo 'role' accetta un valore che definisce per cosa viene usato un elemento. Ogni 'role' definisce i propri requisiti e comportamenti. Nel nostro esempio, useremo 'role listbox'. È un "ruolo composito", ovvero gli elementi con quel ruolo si aspettano di avere figli, ciascuno con un ruolo specifico (in questo caso, almeno un bambino con il ruolo di opzione).

+ +

Vale anche la pena notare che ARIA definisce i ruoli che vengono applicati di default al markup HTML standard. Ad esempio, l'elemento {{HTMLElement ("table")}} corrisponde alla griglia del ruolo e l'elemento {{HTMLElement ("ul")}} corrisponde all'elenco dei ruoli. Poiché utilizziamo un elemento {{HTMLElement ("ul")}}, vogliamo assicurarci che il ruolo listbox del nostro widget sostituisca il ruolo di lista dell'elemento {{HTMLElement ("ul")}}. A tal fine, useremo la presentazione del ruolo. Questo ruolo è stato progettato per farci indicare che un elemento non ha un significato speciale e viene utilizzato esclusivamente per presentare informazioni. Lo applicheremo al nostro elemento {{HTMLElement ("ul")}}.

+ +

Per supportare il ruolo listbox, dobbiamo solo aggiornare il nostro codice HTML in questo modo:

+ +

 

+ +
<! - Aggiungiamo l'attributo role = "listbox" al nostro elemento principale -><div class="select" role="listbox">
+  <span class="value">Cherry</span>
+  <! - Aggiungiamo anche il role = "presentation" all'elemento ul ->
+  <ul class="optList" role="presentation">
+    <! - E aggiungiamo l'attributo role = "option" a tutti gli elementi 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>
+ +
+

Nota: Includere sia l'attributo role sia un attributo class è necessario solo se si desidera supportare i browser legacy che non supportano i selettori dell'attributo CSS. CSS attribute selectors.

+
+ +

L'attributo aria-selected 

+ +

Usare l'attributo role non è abbastanza. ARIA fornisce anche molti stati e attributi di proprietà. Più e meglio li usi, più il tuo widget sarà compreso dalle tecnologie assistive. Nel nostro caso, limiteremo il nostro utilizzo a un attributo: aria-selected.

+ +

l'attributo aria-selected è usato per contrassegnare quale opzione è attualmente selezionata; questo consente alle tecnologie assistive di informare l'utente su quale sia la selezione corrente. Lo useremo dinamicamente con JavaScript per contrassegnare l'opzione selezionata ogni volta che l'utente ne sceglie uno. A tal fine, abbiamo bisogno di rivedere la nostra funzione updateValue():

+ +
function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // Ci assicuriamo che tutte le opzioni non siano selezionate
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // Ci assicuriamo che l'opzione scelta sia selezionata
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+ +

Ecco il risultato finale di tutti questi cambiamenti (otterrai una sensazione migliore provandola con una tecnologia di assistenza come NVDA o VoiceOver):

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}
Check out the final source code
+ +

Conclusioni

+ +

 

+ +

Abbiamo visto tutti i fondamenti della creazione di un widget di modulo personalizzato, ma come puoi vedere non è banale da fare, e spesso è meglio e più facile affidarsi a librerie di terze parti invece di codificarle da zero da soli (a meno che, ovviamente, il tuo obiettivo è costruire una tale biblioteca).

+ +

Ecco alcune librerie da prendere in considerazione prima di codificare le tue:

+ +

 

+ + + +

Se vuoi andare avanti, il codice in questo esempio necessita di qualche miglioramento prima che diventi generico e riutilizzabile. Questo è un esercizio che puoi provare ad esibirti. Due suggerimenti per aiutarti in questo: il primo argomento per tutte le nostre funzioni è lo stesso, il che significa che quelle funzioni necessitano dello stesso contesto. Costruire un oggetto per condividere quel contesto sarebbe saggio. Inoltre, è necessario renderlo a prova di funzionalità; cioè, deve essere in grado di funzionare meglio con una varietà di browser la cui compatibilità con gli standard Web utilizzati varia. Divertiti!

+ +

{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}

+ +

 

+ +

In questo modulo

+ + + +

 

diff --git a/files/it/learn/html/forms/form_validation/index.html b/files/it/learn/html/forms/form_validation/index.html new file mode 100644 index 0000000000..9557758529 --- /dev/null +++ b/files/it/learn/html/forms/form_validation/index.html @@ -0,0 +1,846 @@ +--- +title: Validazione lato client delle form +slug: Learn/HTML/Forms/Form_validation +tags: + - Apprendere + - Esempio + - Forms + - Guida + - HTML + - JavaScript + - Principiante + - Web + - regex +translation_of: Learn/Forms/Form_validation +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
+ +
Prima di inviare dati al server, è importante assicurarsi che tutti i campi richiesti della form siano stati inseriti e siano nel formato richiesto. Questa viene chiamata validazione delle form lato client, ed aiuta a fare in modo che i dati inviati siano consistenti con quanto richiesto. Questo articolo illustra anche con esempi i concetti base della validazione.
+ +
+ + + + + + + + + + + + +
Prerequisiti:Conoscenze informatiche, ed una ragionevole comprensione di HTML, CSS, e JavaScript.
Obiettivo:Capire che cos'è la validazione delle form lato client, perché è importante e come applicare le varie tecniche per implementarla.
+ +

La validazione lato client è un controllo che va fatto subito ed è una caratteristica importante per una buona esperienza untente; trovando i dati non corretti nel lato client, l'utente li può correggere immediatamente. Se i dati non corretti venissero inviati al server e rifiutati, si assisterebbe ad un considerevole e fastidioso ritardo operativo dovuto al traffico tra client e server per le richieste di correzione.

+ +

Comunque, la validazione lato client non dovrebbe essere considerata una misura di sicurezza sufficiente! La tua app dovrebbe sempre eseguire controlli di sicurezza anche nel lato server, perché le validazioni lato client sono troppo facili da bypassare, quindi gli utenti malevoli potrebbero comunque spedire dati non corretti al server. Leggi l'articolo Website security per farti un idea di quello che potrebbe succedere; in questo articolo non trattiamo la validazione lato server, ma tu dovresti tenerla presente.

+ +

Che cos'è la validazione delle form?

+ +

Vai su qualche diffuso sito con registrazione delle form e ti accorgerai che ti  fornirà informazioni immediate se non inserisci i dati nel formato che loro si aspettano. Otterrai messaggi simili a questi:

+ + + +

Questa viene chiamata validazione della form. Quando inserisci i dati il browser e/o il web server controllano se i dati sono corretti secondo le regole stabilite dalla applicazione. La validazione fatta dal browser viene chiamata validazione lato client e quella fatta dal server viene chiamata validazione lato server. Questo articolo si occupa della validazione lato client.

+ +

Se le informazioni hanno il formato corretto, l'applicazione consente che vengano spedite al server il quale di solito le salva in un database. Se invece non sono corrette, viene mandato un messaggo all'utente spiegando l'errore e consentendo di riprovare.

+ +

Noi desideriamo che l'inserimento delle form sia il più facile possibile. Quindi per quale motivo insistiamo per la validazione? I motivi principali sono tre:

+ + + +

Differenti tipi di validazione lato client

+ +

Ci sono due tipi di validazione che si possono incontrare nel web:

+ + + +

Usare la validazione built-in delle form

+ +

Una delle funzionalità più significative dei HTML5 form controls è la capacità di effettuare molte validazioni senza richiedere l'uso di JavaScript. Questo viene fatto usando attributi di validazione negli elementi della form. Lo abbiamo visto anche in altre occasioni, ma ricapitolando:

+ + + +

Se i dati inseriti nella form seguono tutte le regole specificate dagli attributi è considerata valida. Altrimenti viene considerata non valida.

+ +

Quando un elemento è valido, le seguenti cose sono vere:

+ + + +

Quando un elemento non è valido, le seguenti cose sono vere:

+ + + +
+

Nota: Esistiono alcuni errori che impediscono la spedizione della form, compreso {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} or {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, o un {{domxref('validityState.customError','customError')}}.

+
+ +

Esempi di validazione built-in delle form

+ +

In questa sezione proveremo alcuni degli attributi di cui abbiamo parlato sopra.

+ +

Semplice esempio iniziale

+ +

Incominciamo con un esempio semplice: Un campo di testo che ti permette di scegliere se preferisci le banane o le ciliege (banana or cherry). Questo esempio richiede un semplice testo {{HTMLElement("input")}} con associata una {{htmlelement("label")}} e un pulsante di invio {{htmlelement("button")}}. Il codice sorgente si trova su GitHub su fruit-start.html con un esempio live.

+ +
<form>
+  <label for="choose">Would you prefer a banana or cherry?</label>
+  <input id="choose" name="i_like">
+  <button>Submit</button>
+</form>
+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

{{EmbedLiveSample("Simple_start_file", "100%", 80)}}

+ +

Per incominciare fai una copia di  fruit-start.html in una directory vuota del tuo disco fisso.

+ +

L'attributo required

+ +

La validazione HTML5 più semplice è l'attributo required. Per rendere obbligatorio un campo input aggiungi questo attributo. Se è presente, l'elemento esegue il controllo con la pseudo-classe {{cssxref(':required')}} e la form non viene inviata e visualizza un messaggio d'errore se il campo input è vuoto. Quando è vuoto il campo è considerato non valido anche dalla pseudo-classe {{cssxref(':invalid')}}.

+ +

Aggiungi l'attributo required come si vede qui sotto.

+ +
<form>
+  <label for="choose">Would you prefer a banana or cherry? (required)</label>
+  <input id="choose" name="i_like" required>
+  <button>Submit</button>
+</form>
+ +

Considera il CSS che è incluso nel file d'esempio:

+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:invalid:required {
+  background-image: linear-gradient(to right, pink, lightgreen);
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

Questo CSS assegna all'input un bordo rosso a trattini quando il valore non è valido ed una linea nera più sottile quando è valido. Abbiamo anche aggiunto uno sfondo a gradiente quando è richiesto e non valido. Prova il nuovo comportamento nell'esempio sotto:

+ +

{{EmbedLiveSample("The_required_attribute", "100%", 80)}}

+ +
+

Nota: Puoi trovare questo esempio live su GitHub come fruit-validation.html (vedi anche il codice sorgente.)

+
+ +

Prova ad inviare la form senza un valore. Nota che i campo non valido acquista il focus ed appare il messaggio predefinito ("Per favore inserisci questo campo"), e la form non viene inviata.

+ +

La presenza dell'attributo required in un elemento che lo supporta comporta che l'elemento controlla la pseudoclasse {{cssxref(':required')}} per controllare se contiene un valore oppure no. Se il campo {{HTMLElement("input")}} non ha un valore, attiva la pseudoclasse {{cssxref(':invalid')}}.

+ +
+

Nota: Per una buona esperienza utente, indica all'utente quando un campo è richiesto. Non è solo una buona pratica, ma è anche richiesto dalle linee guida accessibility del WCAG. È anche bene rendere obbligatori i soli campi che ti servono. è inutile rendere obbligatori i campi di cui non hai reale necessità.

+
+ +

Validazione con una regular expression

+ +

Un'altra caratteristica di validazione molto usata è l'attributo pattern, che si aspetta una Regular Expression come valore. Una regular expression (regex) è un modello che può essere usato per confrontare una combinazione di caratteri in una stringa, questo li rende ottimi per la validazione delle form e vengono usati anche per un certo numero di altri usi in JavaScript.

+ +

I regex sono abbastanza complessi, e non riusciamo a spiegarli in modo completo in questo articolo. Di seguito riportiamo alcuni esempi per darti un'idea di base su come funzionano.

+ + + +

Ci sono moltissime altre possibilità che non trattiamo. Per la lista completa e molti esempi consulta la nostra documentazione delle Regular expressions.

+ +

Proviamo ad implementare un esemio. Modifica il tuo HTML per aggiungere un attributo pattern come il seguente:

+ +
<form>
+  <label for="choose">Would you prefer a banana or a cherry?</label>
+  <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry">
+  <button>Submit</button>
+</form>
+
+ + + +

Che ci da il seguente aggiornamento — prova:

+ +

{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}

+ +
+

Nota: Puoi trovare questo esempio live su GitHub su fruit-pattern.html (guarda anche il codice sorgente.)

+
+ +

In questo esempio, l'elemento {{HTMLElement("input")}} accetta una di quattro possibili valori: "banana", "Banana", "cherry", o "Cherry". Le regular expressions sono sono sensibili a maiuscole e minuscole, ma noi abbiamo supportato sia le parole minuscole che quelle con la prima maiuscola usando il modello "Aa" racchiuso tra parentesi quadre.

+ +

Prova ora a cambiare il valore dell attributo pattern con gli esempi visti in precedenza e vedi in che modo cambiano i valori che puoi inserire. Prova anche a scrivere qualche regola per conto tuo e cerca di dare un senso alle regole rispetto al esempio della frutta!

+ +

Se un valore di {{HTMLElement("input")}} non soddisfa il modello della regular expression il campo input  applicherà la pseudoclasse  {{cssxref(':invalid')}}.

+ +
+

Nota: Alcuni tipi di elemento {{HTMLElement("input")}} non necessitano di un attributo pattern per essere validati secondo una regular expression. Specificando il tipo email, ad esempio, l'input viene validato con il consolidato modello per la validazione delle email o con il modello per una lista di email separate da virgole se ha anche l'attributo multiple.

+
+ +
+

Nota: L'elemento {{HTMLElement("textarea")}} non supporta l'attributo pattern.

+
+ +

Limitare la dimensione dei campi

+ +

Puoi limitare la dimensione dei campi testo creati con  {{HTMLElement("input")}} o {{HTMLElement("textarea")}} usando gli attributi minlength e maxlength. Un campo non è valido se ha meno caratteri del valore di minlength o maggiore del valore di maxlength.

+ +

I browsers spesso non consentono all'utente di inserire più caratteri di quelli consentiti dal campo. Per migliorare l'esperienza utente invece di usare solamente maxlength si può fornire l'indicazione del numero di caratteri residui per dare modo all'utente di regolarsi. Un esempio di questo si trova in Twitter. Con JavaScript esiste una soluzione che usa maxlength, che si può utilizzare.

+ +

Limitare i valori dei campi

+ +

Per i campi numerici (es. <input type="number">), gli attirbuti min e max possono essere utilizzati per fornire i limiti di valori validi. Se il campo contiene valori fuori dai limiti non è valido.

+ +

Vediamo un altro esempio. Creiamo una copia del file fruit-start.html.

+ +

Ora sostituiamo i contenuto dell'elemento <body> con il seguente:

+ +
<form>
+  <div>
+    <label for="choose">Would you prefer a banana or a cherry?</label>
+    <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6">
+  </div>
+  <div>
+    <label for="number">How many would you like?</label>
+    <input type="number" id="number" name="amount" value="1" min="1" max="10">
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+ + + + + +

Ecco un esempio live:

+ +

{{EmbedLiveSample("Constraining_the_values_of_your_entries", "100%", 100)}}

+ +
+

Nota: Puoi trovare questo esempio live su GitHub su fruit-length.html (guarda anche il codice sorgente.)

+
+ +
+

Nota: <input type="number"> (ed anche altri tipi come range e date) possono anche avere l'attributo step, che specifica il valore minimo di incremento e decremento quando viene usato il campo (ad esempio premendo i pulsanti su e giu dei campi numerici). Nel esempio precedente non abbiamo inserito l'attributo step quindi il valore parte da 1. Questo significa che i numeri con la virgola come 3.2, sono anch'essi non validi.

+
+ +

Esempio completo

+ +

Ecco un esempio completo che dimostra l'uso delle funzionalità di validazione built-in di HTML:

+ +
<form>
+  <p>
+    <fieldset>
+      <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend>
+      <!-- While only one radio button in a same-named group can be selected at a time,
+           and therefore only one radio button in a same-named group having the "required"
+           attribute suffices in making a selection a requirement -->
+      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label>
+      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
+    </fieldset>
+  </p>
+  <p>
+    <label for="n1">How old are you?</label>
+    <!-- The pattern attribute can act as a fallback for browsers which
+         don't implement the number input type but support the pattern attribute.
+         Please note that browsers that support the pattern attribute will make it
+         fail silently when used with a number field.
+         Its usage here acts only as a fallback -->
+    <input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+">
+  </p>
+  <p>
+    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label>
+    <input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
+    <datalist id="l1">
+      <option>Banana</option>
+      <option>Cherry</option>
+      <option>Apple</option>
+      <option>Strawberry</option>
+      <option>Lemon</option>
+      <option>Orange</option>
+    </datalist>
+  </p>
+  <p>
+    <label for="t2">What's your e-mail address?</label>
+    <input type="email" id="t2" name="email">
+  </p>
+  <p>
+    <label for="t3">Leave a short message</label>
+    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
+  </p>
+  <p>
+    <button>Submit</button>
+  </p>
+</form>
+ +

Ed ora un po' di CSS per dare stile al HTML:

+ +
form {
+  font: 1em sans-serif;
+  max-width: 320px;
+}
+
+p > label {
+  display: block;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="number"],
+textarea,
+fieldset {
+  width : 100%;
+  border: 1px solid #333;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  box-shadow: none;
+}
+ +

Questo viene presentato nel modo seguente:

+ +

{{EmbedLiveSample("Full_example", "100%", 420)}}

+ +

Vedi Validation-related attributes per la lista completa degli attributi che possono essere utilizzati per limitare i valori ed i tipi di input che li supportano.

+ +
+

Nota: Puoi trovare questo esempio live su GitHub su  full-example.html (guarda anche il codice sorgente.)

+
+ +

Validazione delle forms con JavaScript

+ +

Sei costretto ad usare JavaScript se desideri controllare l'aspetto dei messaggi nativi d'errore o per conformarti ai browsers più vecchi che non supportano la validazione built-in di HTML. In questa sezione daremo un occhiata a diversi modi per farlo.

+ +

Le API di limitazione della validazione

+ +

Molti browsers supportano le Constraint Validation API, che consistono in un gruppo di metodi e proprietà disponibili nelle seguienti interfaccie degli elementi delle form del DOM:

+ + + +

Le API di validazione rendono le seguenti proprietà disponibili per li elementi di cui sopra.

+ + + +

Le API di validazione rendono anche disponibili i seguenti metodi per gli elementi di cui sopra.

+ + + +

Implementare un messaggio di errore personalizzato

+ +

Come abbiamo visto negli esempi di limiti di validazione HTML5 in precedenza, ogni volta che l'utente tenta di inviare una form non valida, il browser visualizza un messaggio d'errore. Il modo in cui viene visualizzato dipende dal browser.

+ +

Questi messaggi automatizzati hanno due controindicazioni:

+ + + +

Example of an error message with Firefox in French on an English page

+ +

Personalizzare questi messaggi di errore è uno dei casi più comuni di utilizzo delle constraint validation API. Vediamo un piccolo esempio di come fare questo.

+ +

Incominciamo con un po' di HTML semplice (prova ad inserirlo in un file HTML vuoto o usa come base una copia di of fruit-start.html come preferisci):

+ +
<form>
+  <label for="mail">I would like you to provide me with an e-mail address:</label>
+  <input type="email" id="mail" name="mail">
+  <button>Submit</button>
+</form>
+ +

Ed aggiungi il seguente JavaScript alla pagina:

+ +
const email = document.getElementById("mail");
+
+email.addEventListener("input", function (event) {
+  if (email.validity.typeMismatch) {
+    email.setCustomValidity("I am expecting an e-mail address!");
+  } else {
+    email.setCustomValidity("");
+  }
+});
+ +

Qui aggiungiamo un riferimento al campo email ed aggiungiamo un event listener che viene eseguito ogni volta che il valore cambia.

+ +

Nel codici controlliamo se la proprietà validity.typeMismatch del campo emali diventa true, significa che il valore contenuto non corrisponde al modello degli indirizzi email. Se è così viene chiamato il metodo setCustomValidity() con un messaggio appropriato. Questo rende il campo non valido, in modo che quando viene inviata la form, l'invio fallisce e viene visualizzato il messaggio di errore.

+ +

Se la proprietà validity.typeMismatch restituisce false, chiamiamo il metodo setCustomValidity() con una stringa vuota che rende valido il campo in modo che possa essere spedito.

+ +

Lo puoi provare con:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}

+ +
+

Nota: Puoi trovare questo esempio live su GitHub su custom-error-message.html (vedi anche il codice sorgente.)

+
+ +

Un esempio più dettagliato

+ +

Ora che abbiamo visto un esempio molto semplice, vediamo come possiamo usare le API per costurire un sistema di validazione un po' più complesso.

+ +

Prima di tutto il codice HTML:

+ +
<form novalidate>
+  <p>
+    <label for="mail">
+      <span>Please enter an email address:</span>
+      <input type="email" id="mail" name="mail" required minlength="8">
+      <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <button>Submit</button>
+</form>
+ +

Questa semplice form usa l'attributo novalidate per disattivare la validazine automatica del browser; questo consente al nostro script di prendere il controllo della validazione. Questo comunque non disabilita il supporto per le API di validazione e l'applicazione delle pseudoclassi CSS come {{cssxref(":valid")}}, ecc. Questo significa che se anche il browser con controlla la validità della form prima di spedire i dati, tu puoi comunque farlo dal solo ed applicare lo stile appropriato.

+ +

Il nostro input da validare è un <input type="email">, che è required, ed ha un minlength di 8 caratteri. Proviamo a controllare la validità usando il nostro codice e visualizziamo un messaggio appropriato per ciascun attributo.

+ +

Ci proponiamo di visualizzare il messaggio all'intermo di un elemento <span>. L'attributo aria-live per assicurarci che il nostro messaggio di errore verrà reso disponibile a tutti compresi coloro che usano i lettori di schermo.

+ +
+

Nota: Il punto chiave qui è l'uso dell'attributo novalidate per la form che è ciò che impedisce alla form di vidualizzare il proprio messaggio di errore e ci consente invece di visualizzare il nostro messaggio presonalizzato nel DOM in qualche modo scelto da noi.

+
+ +

Ora un po' di CSS oer migliorare leggermente il look della form, e fornire qualche tipo di informazione quando il valore non è valido:

+ +
body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+  appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* This is our style for the invalid fields */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* This is the style of our error messages */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +

Ora vediamo il codice JavaScript che implementa l'errore personalizzato di validazione.

+ +
// There are many ways to pick a DOM node; here we get the form itself and the email
+// input box, as well as the span element into which we will place the error message.
+const form  = document.getElementsByTagName('form')[0];
+
+const email = document.getElementById('mail');
+const emailError = document.querySelector('#mail + span.error');
+
+email.addEventListener('input', function (event) {
+  // Each time the user types something, we check if the
+  // form fields are valid.
+
+  if (email.validity.valid) {
+    // In case there is an error message visible, if the field
+    // is valid, we remove the error message.
+    emailError.innerHTML = ''; // Reset the content of the message
+    emailError.className = 'error'; // Reset the visual state of the message
+  } else {
+    // If there is still an error, show the correct error
+    showError();
+  }
+});
+
+form.addEventListener('submit', function (event) {
+  // if the email field is valid, we let the form submit
+
+  if(!email.validity.valid) {
+    // If it isn't, we display an appropriate error message
+    showError();
+    // Then we prevent the form from being sent by canceling the event
+    event.preventDefault();
+  }
+});
+
+function showError() {
+  if(email.validity.valueMissing) {
+    // If the field is empty
+    // display the following error message.
+    emailError.textContent = 'You need to enter an e-mail address.';
+  } else if(email.validity.typeMismatch) {
+    // If the field doesn't contain an email address
+    // display the following error message.
+    emailError.textContent = 'Entered value needs to be an e-mail address.';
+  } else if(email.validity.tooShort) {
+    // If the data is too short
+    // display the following error message.
+    emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
+  }
+
+  // Set the styling appropriately
+  emailError.className = 'error active';
+}
+ +

I commenti spiegano le cose per bene, ma brevemente:

+ + + +

Ecco il risultato live:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}

+ +
+

Nota: Puoi trovare questo esempio live su GitHub su detailed-custom-validation.html (vedi anche il codice sorgente.)

+
+ +

Le API di validazione ti forniscono uno stumento potente per gestire la validaizone delle form, fornendoti un grande controllo sulla interfaccia utente sopra e sotto quello che puoi fare con i soli HTML e CSS.

+ +
+

Nota: Per ulteriori ingormazioni vedi il nostro Constraint validation guide, ed il riferimento Constraint Validation API.

+
+ +

Validare le forms senza le built-in API

+ +

In alcuni casi come ad esempio per i browsers più vecchi o per il supporto ai custom controls, non sarà possibile usare le API di validazione. Potrai ancora utilizzare JavaScript per validare la tua form, ma devi scrivere tutto da solo.

+ +

Per validare la form fatti alcune domande:

+ +
+
Che tipo di validazione devo eseguire?
+
Devi determinare come validare i tuoi dati: operazioni sulle stringhe, conversioni di tipo, regular expressions, e via discorrendo. Sta tutto a te.
+
Cosa devo fare se la form non è valida?
+
Questo chiaramente è materia di UI. Devi decidere come si deve comportare la form. Deve la form spedire i dati ugualmente? Devi illuminare i campi che sono in errore? Devi visualizzare messaggi di errore?
+
Come posso aiutare l'utente a correggere i dati non validi?
+
Per ridurre la frustrazione dell'utente, è molto importante fornire il maggior numero di informazioni possibili per guidarlo a correggere gli errori. Dovresti fornire suggerimenti sui dati attesi ed anche messaggi di errore chiari e comprensibili. Se vuoi approfondire come approntare la UI adeguata per la validazione, ecco alcuni articoli utili che dovresti leggere: + +
+
+ +

Un esempio che non usa le API di validazione

+ +

Per illustrare questo, quello che segue è una versione semplificata dell'esempio precedente che funziona anche con i browsers più vecchi.

+ +

Il HTML è quasi uguale; abbiamo solo rimosso alcune funzionalità di validazione.

+ +
<form>
+  <p>
+    <label for="mail">
+        <span>Please enter an email address:</span>
+        <input type="text" class="mail" id="mail" name="mail">
+        <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <!-- Some legacy browsers need to have the `type` attribute
+       explicitly set to `submit` on the `button`element -->
+  <button type="submit">Submit</button>
+</form>
+ +

Allo stesso modo, anche il CSS non necessita di grandi modifiche; abbiamo solo trasformato la pseudoclasse {{cssxref(":invalid")}} in una vera classe ed evitato di usare il selettore di attiributo che non funziona con Internet Explorer 6.

+ +
body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* This is our style for the invalid fields */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* This is the style of our error messages */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +

Le modifiche maggiori sono nel codice JavaScript, che richiede una revisione molto più pesante.

+ +
// There are fewer ways to pick a DOM node with legacy browsers
+const form  = document.getElementsByTagName('form')[0];
+const email = document.getElementById('mail');
+
+// The following is a trick to reach the next sibling Element node in the DOM
+// This is dangerous because you can easily build an infinite loop.
+// In modern browsers, you should prefer using element.nextElementSibling
+let error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// As per the HTML5 Specification
+const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// Many legacy browsers do not support the addEventListener method.
+// Here is a simple way to handle this; it's far from the only one.
+function addEvent(element, event, callback) {
+  let previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    const output = callback(e);
+
+    // A callback that returns `false` stops the callback chain
+    // and interrupts the execution of the event callback.
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// Now we can rebuild our validation constraint
+// Because we do not rely on CSS pseudo-class, we have to
+// explicitly set the valid/invalid class on our email field
+addEvent(window, "load", function () {
+  // Here, we test if the field is empty (remember, the field is not required)
+  // If it is not, we check if its content is a well-formed e-mail address.
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// This defines what happens when the user types in the field
+addEvent(email, "input", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// This defines what happens when the user tries to submit the data
+addEvent(form, "submit", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+
+    // Some legacy browsers do not support the event.preventDefault() method
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});
+ +

Il risultato assomiglia a questo:

+ +

{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 130)}}

+ +

Come puoi vedere, non è proprio così difficile costruire un tuo sistema di validazione. La parte difficile è di renderlo abbastanza generico da essere usato su tutte le piattaforme e con ogni form che andarai a creare. Ci sono anche molte librerie pronte che ti aiuntano nella validazione come ad esempio Validate.js.

+ +

Metti alla prova le tue capacità!

+ +

Sei arrivato alla fine di questo articolo, ma riesci a ricordare le informazioni più importanti? Puoi trovare alcuni ulteriori test per verificare che tu abbia recepito questi informazioni prima di proseguire — vedi Test your skills: Form validation.

+ +

Sommario

+ +

La validazione delle form lato client alle volte richiede JavaScript se desideri configurare lo stile ed i messaggi di errore, ma richiede sempre che tu pensi attentamente all'utente. Ricordati sempre di guidare l'utente ad inserire dati corretti. Quindi assicurati di:

+ + + +

Quando hai controllato che la form è stata compilata correttamente, la puoi inviare. In seguito spieghiamo come spedire i dati delle form.

+ +

{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

+ +

In questo modulo

+ + + +

Argomenti avanzati

+ + diff --git a/files/it/learn/html/forms/index.html b/files/it/learn/html/forms/index.html new file mode 100644 index 0000000000..45c0d055dd --- /dev/null +++ b/files/it/learn/html/forms/index.html @@ -0,0 +1,85 @@ +--- +title: HTML forms +slug: Learn/HTML/Forms +tags: + - Beginner + - Featured + - Forms + - Guide + - HTML + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/Forms +--- +
{{LearnSidebar}}
+ +

Questo modulo fornisce una serie di articoli che ti aiuteranno ad apprendere le parti essenziali dei web forms. I web forms sono dei tool molto potenti per l'interazione con gli utenti - sono usati di solito per la raccolta di dati dagli utenti, o per permettere loro di controllare l'interfaccia utente. Tuttavia, per questioni storiche e tecniche non è sempre chiaro come sfruttare tutto il loro potenziale. Negli articoli che seguono, copriremo tutti gli aspetti essenziali dei web forms includendo anche la realizzazione della loro struttura HTML, dello stile dei controlli del form, della validazione dei dati del form, e dell'invio dei dati al server.

+ +

Prerequisiti

+ +

Prima di iniziare questo modulo, dovresti almeno affrontare la nostra parte di introduzione all'HTML A questo punto dovresti trovare le {{anch("guide introduttive")}} facili da capire, e dovresti anche sapere utilizzare la guida base sui Native form controls.

+ +

Sapere utilizzare perfettamente i forms, comunque, richede molto più della semplice conoscenza HTML - avrai anche bisogno di imparare alcune specifiche tecniche per dare uno stile ai controlli del form, ed è richiesta anche un pò di conoscenza di scripting per affronte cose come la validazione e la creazione di controlli del form personalizzati. Pertanto, prima di andare ad affrontare le altre sezioni presenti qui sotto, ti raccomandiamo di abbandonare questa pagina ed imparare prima un pò di CSS e Javascript.

+ +

Il paragrafo qui sopra spiega bene il perchè abbiamo messo i web forms in una pagina a solo, piuttosto che mischiare un pò di questi contenuti nelle aree delle pagine che spiegano HTML, CSS e Javascript — gli elementi del form sono molto più complessi rispetto a tutti gli altri elementi HTML, e richiedono anche un connubio perfetto con le tecniche CSS e Javascript per ottenere il massimo da loro.

+ +
+

Nota bene: Se stai lavorando su un computer/tablet/altro dispositivo dove non sei in grado di creare i tuoi file, dovresti provare gli esempi di codice su un programma di coding online come JSBin o Glitch

+
+ +

Guida introduttiva

+ +
+
Il tuo primo form HTML
+
The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.
+
How to structure an HTML form
+
With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.
+
+ +

What form widgets are available?

+ +
+
The native form widgets
+
We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.
+
+ +

Validating and submitting form data

+ +
+
Sending form data
+
This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.
+
Form data validation
+
Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.
+
+ +

Advanced guides

+ +
+
How to build custom form widgets
+
You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.
+
Sending forms through JavaScript
+
This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)
+
HTML forms in legacy browsers
+
Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.
+
+ +

Form styling guides

+ +
+
Styling HTML forms
+
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
+
Advanced styling for HTML forms
+
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.
+
Property compatibility table for form widgets
+
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.
+
+ +

See also

+ + diff --git a/files/it/learn/html/howto/author_fast-loading_html_pages/index.html b/files/it/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..ff1155be75 --- /dev/null +++ b/files/it/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,185 @@ +--- +title: Suggerimenti per l'authoring di pagine HTML in rapido caricamento +slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages +tags: + - Avanzate + - Guide + - HTML + - Performance + - Web + - siti web +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

Questi suggerimenti si basano su conoscenze e sperimentazioni comuni.

+ +

Una pagina Web ottimizzata non solo offre un sito più reattivo per i visitatori, ma riduce anche il carico sui server Web e sulla connessione Internet. Questo può essere cruciale per siti ad alto volume che hanno un picco nel traffico a causa di circostanze insolite come le ultime notizie.

+ +

Ottimizzare le prestazioni di caricamento della pagina non è solo per i contenuti che verranno visualizzati dai visitatori di dispositivi mobili o dial-up a banda stretta. È altrettanto importante per i contenuti a banda larga e può portare a notevoli miglioramenti anche per i tuoi visitatori con le connessioni più veloci.

+ +

Suggerimenti

+ +

Riduzione del peso di una pagina

+ +

Il peso della pagina è di gran lunga il fattore più importante nelle prestazioni del caricamento della pagina.

+ +

Riducendo il peso della pagina attraverso l'eliminazione di spazi bianchi e commenti non necessari, comunemente noti come minimizzazione, e spostando script inline e CSS in file esterni, è possibile migliorare le prestazioni di download con il minimo bisogno di altre modifiche nella struttura della pagina.

+ +

Strumenti come HTML Tidy possono automaticamente rimuovere gli spazi bianchi iniziali e le righe vuote aggiuntive da una sorgente HTML valida. Altri strumenti possono "comprimere" JavaScript riformattando l'origine o offuscando l'origine e sostituendo gli identificatori lunghi con versioni più brevi.

+ +

Riduci al minimo il numero di file

+ +

Riducendo il numero di file referenziati in una pagina web si riduce il numero di connessioni HTTP richieste per scaricare una pagina, riducendo quindi il tempo per l'invio di tali richieste e la ricezione delle loro risposte.

+ +

A seconda delle impostazioni della cache di un browser, può inviare una richiesta con l'intestazione If-Modified-Since per ogni file di riferimento, chiedendo se il file è stato modificato dall'ultima volta che è stato scaricato. Troppo tempo trascorso a interrogare l'ultima ora modificata dei file di riferimento può ritardare la visualizzazione iniziale della pagina Web, poiché il browser deve controllare l'ora di modifica per ciascuno di questi file, prima di eseguire il rendering della pagina.

+ +

Se si utilizzano molto le immagini di sfondo nel CSS, è possibile ridurre la quantità di ricerche HTTP necessarie combinando le immagini in una, nota come immagine sprite. Quindi applichi la stessa immagine ogni volta che ne hai bisogno per uno sfondo e regola le coordinate x / y in modo appropriato. Questa tecnica funziona meglio con elementi che avranno dimensioni limitate e non funzionerà per ogni uso di un'immagine di sfondo. Tuttavia, le minori richieste HTTP e la memorizzazione nella cache di immagini singole possono ridurre il tempo di caricamento della pagina.

+ +

Riduci le ricerche di dominio

+ +

Poiché ogni dominio separato costa tempo in una ricerca DNS, il tempo di caricamento della pagina aumenterà insieme al numero di domini separati che appaiono nei link CSS e JavaScript e image src (es).

+ +

Questo potrebbe non essere sempre pratico; tuttavia, dovresti sempre fare attenzione a utilizzare solo il numero minimo necessario di domini diversi nelle tue pagine.

+ +

Cache che riutilizzi i contenuti

+ +

Assicurati che ogni contenuto che può essere memorizzato nella cache, sia memorizzato nella cache e con i tempi di scadenza appropriati.

+ +

In particolare, prestare attenzione all'intestazione Last-Modified. Consente un'efficiente memorizzazione nella cache della pagina; tramite questa intestazione, le informazioni vengono trasmesse all'agente utente sul file che desidera caricare, ad esempio quando è stata modificata l'ultima volta. La maggior parte dei server Web aggiunge automaticamente l'intestazione Last-Modified alle pagine statiche (ad esempio .html, .css), in base alla data dell'ultima modifica memorizzata nel file system. Con le pagine dinamiche (ad esempio .php, .aspx), questo, ovviamente, non può essere eseguito e l'intestazione non viene inviata.

+ +

Quindi, in particolare per le pagine generate dinamicamente, una piccola ricerca su questo argomento è vantaggiosa. Può essere in qualche modo coinvolto, ma farà risparmiare parecchio nelle richieste di pagine su pagine che normalmente non potrebbero essere memorizzate nella cache.

+ +

Maggiori informazioni:

+ +
    +
  1. HTTP Conditional Get for RSS Hackers
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. HTTP ETag on Wikipedia
    4. +
  4. Caching in HTTP
    5. +
+ +

Ordina in modo ottimale i componenti della pagina

+ +

Scarica prima il contenuto della pagina, insieme a qualsiasi CSS o JavaScript che potrebbe essere richiesto per la sua visualizzazione iniziale, in modo che l'utente ottenga la risposta apparente più rapida durante il caricamento della pagina. Questo contenuto è tipicamente testo e può quindi trarre vantaggio dalla compressione del testo durante il trasporto, fornendo così una risposta ancora più rapida all'utente.

+ +

Qualsiasi funzionalità dinamica che richiede il completamento del caricamento della pagina prima di essere utilizzata, dovrebbe inizialmente essere disabilitata e quindi abilitata solo dopo il caricamento della pagina. Ciò causerà il caricamento del JavaScript dopo il contenuto della pagina, che migliorerà l'aspetto generale del caricamento della pagina.

+ +

Ridurre il numero di script in linea

+ +

Gli script in linea possono essere costosi per il caricamento della pagina, poiché il parser deve presupporre che uno script inline possa modificare la struttura della pagina mentre è in corso l'analisi. Ridurre l'uso degli script in linea in generale e ridurre l'uso di  document.write() per l'output del contenuto, in particolare, può migliorare il caricamento generale della pagina. Usa i moderni metodi AJAX per manipolare il contenuto della pagina per i browser moderni, piuttosto che per gli approcci più vecchi basati su document.write().

+ +

Usa CSS moderno e marcatura valida

+ +

L'uso del CSS moderno riduce la quantità di markup, può ridurre la necessità di immagini (spaziali), in termini di layout, e può molto spesso sostituire immagini di testo stilizzato - che "costano" molto più del testo equivalente e CSS .

+ +

L'utilizzo del markup valido presenta altri vantaggi. Innanzitutto, i browser non avranno bisogno di eseguire correzioni degli errori durante l'analisi dell'HTML (questo a parte il problema filosofico di consentire o meno la variazione del formato nell'input dell'utente, quindi programmaticamente "correggerlo" o normalizzarlo o se, invece, applicare un formato di input rigoroso e senza tolleranza).

+ +

Inoltre, il markup valido consente l'uso gratuito di altri strumenti che possono pre-elaborare le tue pagine web. Ad esempio, HTML Tidy può rimuovere spazi bianchi e tag finali opzionali; tuttavia, rifiuterà di funzionare su una pagina con gravi errori di markup.

+ +

Parte del contenuto

+ +

Le tabelle per i layout sono un metodo legacy che non dovrebbe essere più utilizzato. Dovrebbero invece essere utilizzati layout che utilizzano floats, positioning, flexbox, or griglie.

+ +

Le tabelle sono ancora considerate un markup valido, ma dovrebbero essere utilizzate per la visualizzazione di dati tabulari. Per aiutare il browser a rendere più veloce la tua pagina, dovresti evitare di annidare le tue tabelle.

+ +

Piuttosto che tabelle di nidificazione profonda come in:

+ +
<table>
+  <table>
+    <table>
+          ...
+    </table>
+  </table>
+</table>
+ +

usa tabelle o div non annidate come in

+ +
<table>...</table>
+<table>...</table>
+<table>...</table>
+
+ +

Guarda anche: CSS Flexible Box Layout e specifiche della CSS Grid Layout.

+ +

Minimizza e comprime risorse SVG

+ +

SVG prodotto dalla maggior parte delle applicazioni di disegno spesso contiene metadati non necessari che possono essere rimossi. Configura i tuoi server applica la compressione gzip per le risorse SVG.

+ +

Minimizza e comprimi le tue immagini

+ +

Immagini di grandi dimensioni fanno sì che la tua pagina impieghi più tempo per essere caricata. Prendi in considerazione la possibilità di comprimere le tue immagini prima di aggiungerle alla tua pagina. Strumenti online come Compress Jpeg, Tiny PNG e molti altri strumenti sono disponibili online. Puoi utilizzare strumenti offline come Photoshop e altri.

+ +

Specify sizes for images and tables

+ +

Se il browser è in grado di determinare immediatamente l'altezza e / o la larghezza delle immagini e delle tabelle, sarà in grado di visualizzare una pagina Web senza dover ridisporre il contenuto. Questo non solo accelera la visualizzazione della pagina ma impedisce fastidiose modifiche al layout di una pagina quando la pagina completa il caricamento. Per questo motivo, l'altezza e la larghezza dovrebbero essere specificate per le immagini, quando possibile.

+ +

Le tabelle dovrebbero usare il selettore CSS: combinazione di proprietà:

+ +
  table-layout: fixed;
+
+ +

e dovrebbe specificare le larghezze delle colonne usando gli elementi <col> e <colgroup>.

+ +

Scegli saggiamente i tuoi requisiti user-agent

+ +

Per ottenere i migliori miglioramenti nella progettazione della pagina, assicurarsi che siano richiesti requisiti ragionevoli per l'utente-agente per i progetti. Non richiedere che i tuoi contenuti appaiano pixel perfetti in tutti i browser, specialmente nei browser in versione down.

+ +

Idealmente, i requisiti minimi di base dovrebbero essere basati sulla considerazione dei browser moderni che supportano gli standard pertinenti. Questo può includere versioni recenti di Firefox, Internet Explorer, Google Chrome, Opera e Safari.

+ +

Si noti, tuttavia, che molti dei suggerimenti elencati in questo articolo sono tecniche di senso comune applicabili a qualsiasi agente utente e possono essere applicate a qualsiasi pagina Web, indipendentemente dai requisiti di supporto del browser.

+ +

Utilizzare async e defer, se possibile

+ +

Crea gli script JavaScript in modo tale che siano compatibili sia con async sia con il defer e usa async quando possibile, specialmente se hai più tag di script.
+ Con ciò, la pagina può interrompere il rendering mentre JavaScript è ancora in fase di caricamento. Altrimenti, il browser non renderà nulla che si trova dopo i tag di script che non hanno questi attributi.

+ +

Nota: sebbene questi attributi siano di grande aiuto per la prima volta in cui viene caricata una pagina, è necessario utilizzarli ma non fare affidamento sul fatto che funzionerà su tutti i browser. Se segui tutte le linee guida per creare un buon codice JavaScript, non è necessario modificare il codice.

+ +

Esempio di struttura della pagina

+ +

· HTML

+ +
+
· HEAD
+
+ +
+
+
+
· LINK ...
+ File CSS richiesti per l'aspetto della pagina. Riduci al minimo il numero di file per le prestazioni mantenendo CSS indipendenti in file separati per la manutenzione.
+
+
+
+ +
+
+
+
· SCRIPT ...File JavaScript per funzioni richieste durante il caricamento della pagina, ma non DHTML che può essere eseguito solo dopo il caricamento della pagina.
+
Riduci al minimo il numero di file per le prestazioni mantenendo JavaScript non correlato in file separati per la manutenzione.
+
+
+
+ +
+
· BODY
+
· L'utente visualizza il contenuto della pagina in piccoli blocchi (tabelle / div) che possono essere visualizzati senza attendere il download della pagina intera.
+
+ +
+
+
+
· SCRIPT ...Qualsiasi script che verrà utilizzato per eseguire DHTML. Lo script DHTML in genere può essere eseguito solo dopo che la pagina è stata caricata completamente e tutti gli oggetti necessari sono stati inizializzati. Non è necessario caricare questi script prima del contenuto della pagina. Questo rallenta solo l'aspetto iniziale del caricamento della pagina.
+
Riduci al minimo il numero di file per le prestazioni mantenendo JavaScript non correlato in file separati per la manutenzione.
+
Se vengono utilizzate immagini per gli effetti di rollover, è necessario precaricarle qui dopo che il contenuto della pagina è stato scaricato.
+
+
+
+ + + + diff --git a/files/it/learn/html/howto/index.html b/files/it/learn/html/howto/index.html new file mode 100644 index 0000000000..5343bdbaad --- /dev/null +++ b/files/it/learn/html/howto/index.html @@ -0,0 +1,155 @@ +--- +title: Use HTML to solve common problems +slug: Learn/HTML/Howto +tags: + - CodingScripting + - HTML + - NeedsTranslation + - TopicStub +translation_of: Learn/HTML/Howto +--- +
{{LearnSidebar}}
+ +

The following links point to solutions to common everyday problems you'll need to solve with HTML.

+ +
+
+

Basic structure

+ +

The most basic application of HTML is document structure. If you're new to HTML you should start with this.

+ + + +

Basic text-level semantics

+ +

HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.

+ + +
+ +
+ + +

One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:

+ + + +

Images & multimedia

+ + + +

Scripting & styling

+ +

HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.

+ + + +

Embedded content

+ + +
+
+ +

Uncommon or advanced problems

+ +

Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:

+ +
+
+

Forms

+ +

Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our full dedicated guide. Here is where you should start:

+ + + +

Tabular information

+ +

Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:

+ + + +

Data representation

+ + + +

Interactivity

+ + +
+ +
+

Advanced text semantics

+ + + +

Advanced images & multimedia

+ + + +

Internationalization

+ +

HTML is not monolingual. It provides tools to handle common internationalization issues.

+ + + +

Performance

+ + +
+
+ +

     

diff --git a/files/it/learn/html/howto/uso_attributi_data/index.html b/files/it/learn/html/howto/uso_attributi_data/index.html new file mode 100644 index 0000000000..f256a42aaf --- /dev/null +++ b/files/it/learn/html/howto/uso_attributi_data/index.html @@ -0,0 +1,82 @@ +--- +title: Uso degli attributi data +slug: Learn/HTML/Howto/Uso_attributi_data +tags: + - Attributi Di Dati Personalizzati + - Esempi + - Guide + - HTML + - HTML5 + - Web +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +
{{LearnSidebar}}
+ +

HTML5 è progettato tenendo conto dell'estensibilità per i dati che possono essere associati ad un particolare elemento anche se questi non hanno alcun significato definito. I data-* attributes ci permettono di memorizzare informazioni extra su elementi semantici HTML standard senza utilizzare altri hack quali l'utilizzo di attributi non standard, proprietà extra nel DOM o {{domxref("Node.setUserData()")}}.

+ +

Sintassi HTML

+ +

La sintassi è semplice. Qualsiasi attributo associato ad un qualsivoglia elemento, il cui nome inizi con data- è un attributo data. Facciamo l'esempio di un elemento article nel quale vogliamo memorizzare qualche informazione extra che non ha alcuna rappresentazione visuale. E' sufficiente utilizzare l'attributo data per ottenere ciò:

+ +
<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+ +

Accesso mediante JavaScript

+ +

Accedere ai valori di questi attributi mediante JavaScript è molto semplice. E' possibile utilizzare {{domxref("Element.getAttribute", "getAttribute()")}} con il loro nome HTML completo, nello stesso modo in cui si accede a qualsiasi attributo di un elemento HTML, tuttavia lo standard HTML definisce un modo più semplice, un {{domxref("DOMStringMap")}} a cui è possibile accedere attraverso la proprietà {{domxref("HTMLElement.dataset", "dataset")}}.

+ +

Per ottenere un attributo data attraverso l'oggetto dataset, è sufficiente ricavare la proprietà utilizzando la parte del nome dell'attributo dopo data- (notare che i trattini vengono converti in camelCase).

+ +
var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+ +

Ogni proprietà è una stringa e può essere letta e scritta. Nel caso precedente impostare article.dataset.columns = 5 cambierebbe il valore dell'attributo a "5".

+ +

Accesso mediante CSS

+ +

E' importante notare che, poichè gli attributi data sono semplici attributi HTML, è possibile accedere a questi anche via CSS. Ad esempio per mostrare i dati del genitore sull'elemento article è possibile ricorrere contenuti generati in CSS con la funzione {{cssxref("attr")}}:

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

E' possibile anche utilizzare i selettori d'attributi in CSS  per cambiare lo stile in base ai dati:

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

E' possibile vedere tutto ciò all'opera in questo esempio JSBin. 

+ +

Gli attributi data possono anche essere usati per memorizzare informazioni in costante cambiamento, come gli scores in un gioco. Utilizzare qui i selettori CSS e l'accesso via JavaScript è ciò che permette di ottenere effetti molto eleganti senza dover scrivere le proprie routine di visualizzazione. Vedi questo screencast per vedere un esempio che utilizza contenuti generati e transizioni CSS  (esempio JSBin).

+ +

I valori degli attributi data sono stringhe. I valori numerici devono essere virgolettati affinchè la stilizzazione abbia effetto.

+ +

Problemi

+ +

Non memorizzare contenuti che devono essere visibili e accessibili negli attributi data, poichè le tecnologie assistive potrebbero non accederci. In aggiunta, crawler di ricerca potrebbero non indicizzare i valori degli attributi data.

+ +

Le problematiche principali da considerare sono il supporto di Internet Explorer e la performance. Internet Explorer 11+ fornisce supporto per lo standard, ma le versioni precedenti non supportano dataset. Per supportare IE 10 e precedenti è necessario accedere agli attributi data utilizzando {{domxref("Element.getAttribute", "getAttribute()")}}. Inoltre, le prestazioni di lettura degli attributi data rispetto alla memorizzazione di questi dati in un oggetto JS regolare sono scarse. Inoltre, la performance di lettura degli attributi data comparata alla memorizzazione in un oggetto JavaScript è bassa.

+ +

Tenuto conto di ciò, tuttavia, per metadati personalizzati associati ad un elemento HTML, sono un'ottima soluzione.

+ +

In Firefox 49.0.2 (e probabilmente versioni antecedenti e precedenti), gli attributi data che eccedono 1022 caratteri non verranno letti da Javascript (EcmaScript 4).

+ +

Vedi anche

+ + diff --git a/files/it/learn/html/index.html b/files/it/learn/html/index.html new file mode 100644 index 0000000000..c617173ffb --- /dev/null +++ b/files/it/learn/html/index.html @@ -0,0 +1,47 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - Apprendimento + - Argomento + - Guida + - HTML + - Introduzione + - Principianti +translation_of: Learn/HTML +--- +
{{IncludeSubnav("/en-US/Learn")}}
+ +

{{Glossary('HTML')}} è la maggiore tecnologia del Web che definisce la struttura delle pagine web. Se stai cercando di costruire in sito web, dovresti conosce HTML.

+ +

Non è difficile apprendere le basi, ma HTML è anche un' ampia tecnologia con complesse caratteristiche, per questo  non esiste un percorso ben preciso di apprendimento. Suggeriamo di iniziare con il seguire pagine per apprenderne alcune tecniche e conoscenze. Muovetevi dalle basi alle tecniche più avanzate o soltanto attraverso le pagine che vi sembrano più interessanti per voi!

+ +
+
+

Le basi

+ +

inizia da qui se non hai alcuna familiarità con HTML:

+ +
+
Introduzione ad HTML
+
se vi siete mai chiesti cosa accade nel vostro Web browser, è da li che potete iniziare ad imparare.
+
Risolvere problemi comuni con HTML
+
questa serie di articoli è qui per aiutare coloro che usano HTML per risolvere dei problemi davvero molto comuni quando si crea una pagina web:Il rapporto con i titoli, aggiungere immagini o video, enfatizzare contenuti, iniziare ad usare i moduli (ossia i form), etc.
+
Scrivere un semplice pagina in HTML
+
in questo articolo puoi imparare a creare una semplice pagina web.
+
Cosa sono i tag in HTML e come usarli
+
Questo articolo copre l'HTML base.Trovi cosa sono i tag e come usarli.
+
+
+ +
+

Nel dettaglio

+ +

non appena presa più familiarità con HTML, qui puoi trovare informazioni più dettagliate da esplorare:

+ +
+
Riferimento HTML
+
Nella nostra guida di riferimento, potrai trovare dettagli su ogni singolo elemento ed attributo HTML.
+
+
+
diff --git a/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html b/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html new file mode 100644 index 0000000000..e5496dcb1a --- /dev/null +++ b/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html @@ -0,0 +1,953 @@ +--- +title: Fondamenti di testo HTML +slug: Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Imparare/HTML/Introduzione_all_HTML/I_metadati_del_head_HTML", "Imparare/HTML/Introduzione_all_HTML/Creazione_di_collegamenti_ipertestuali", "Imparare/HTML/Introduzione_all_HTML")}}
+ +

Una delle funzioni principali dell'HTML è quella di dare struttura e significato ai testi (conosciuto anche come {{glossary("semantica")}}) in modo che un browser possa visualizzarli correttamente. Questo articolo spiega il modo in cui l'{{glossary ("HTML")}} può essere usato per strutturare una pagina di testo aggiungendo titoli e paragrafi, enfatizzando parole, creando elenchi e altro.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza di base dell'HTML, come spiegato in Getting started with HTML.
Obiettivi:Scopri come costruire una pagina di testo di base per dargli struttura e significato, inclusi paragrafi, intestazioni, elenchi, enfasi e citazioni.
+ +

Le basi: Intestazioni e paragrafi

+ +

Un testo più strutturato è composto da intestazioni e paragrafi, indipendentemente dal fatto che tu stia leggendo una storia, un giornale, un libro di testo del college, una rivista, ecc.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

Il contenuto strutturato rende l'esperienza di lettura più facile e divertente.

+ +

In HTML, ogni paragrafo dev'essere racchiuso in un elemento {{htmlelement("p")}}, in questo modo:

+ +
<p>Sono un paragrafo, oh si lo sono.</p>
+ +

Ogni intestazione dev'essere racchiuso in un elemento d'intestazione:

+ +
<h1>Sono il titolo della storia.</h1>
+ +

Ci sono sei elementi di intestazione — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, e {{htmlelement("h6")}}. Ogni elemento rappresenta un livello di contenuto differente nel documento; <h1> rappresenta l'intestazione principale, <h2> rappresenta i sottotitoli, <h3> rappresenta i sub-sottovoci, e cosi via.

+ +

Implementazione della gerarchia strutturale

+ +

Come esempio, in una storia, <h1> rappresenterebbe il titolo della storia, <h2> rappresenterebbe il titolo di ogni capitolo e <h3> rappresenterebbe le sottosezioni di ogni capitolo, e cosi via.

+ +
<h1>La noia schiacciante</h1>
+
+<p>Di Chris Mills</p>
+
+<h2>Capitolo 1: La notte scura</h2>
+
+<p>Era una notte scura. Da qualche parte, un gufo ha bubolato. La pioggia si abbetté sul ...</p>
+
+<h2>Capitolo 2: Il silenzio eterno</h2>
+
+<p>Il nostro protagonista non poteva nemmeno un sussurro uscire dalla figura oscura ...</p>
+
+<h3>Lo spettro parla</h3>
+
+<p>Erano passate altre ore, quando tutto d'un tratto lo spettro si raddrizzò e esclamò: "Per favore abbi pietà della mia anima!"</p>
+ +

Dipende solo da te che cosa rappresentano esattamente gli elementi coinvolti, purché la gerarchia abbia un senso. Devi solo tenere a mente alcune buone pratiche mentre crei tali strutture:

+ + + +

Perché abbiamo bisogno di una struttura?

+ +

Per rispondere a questa domanda, diamo un'occhiata a  text-start.html — il punto di inizio del nostro esempio per questo articolo (un'ottima ricetta per l'hummus). Dovresti salvare una copia di questo file sul tuo computer, così come avrai bisogno di fare per gli esercizi più avanti. Il corpo di questo documento attualmente contiene molti pezzi di contenuto — non sono marcati in alcun modo, ma sono separati con degli a capo (Invio premuto per andare alla riga successiva).

+ +

Tuttavia, quando aprirai il documento nel tuo browser, vedrai che il testo apparirà come un blocco unico!

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

Questo succede perché non ci sono elemnti per dare una struttura al contenuto, così il browser non sa quale sia l'intestazione e quale sia il paragrafo. Inoltre:

+ + + +

Abbiamo quindi bisogno di dare al nostro contenuto un markup strutturale.

+ +

Apprendimento attivo: Dare una struttura al nostro contenuto

+ +

Approfondiamo con un esempio. Nell'esempio qui sotto, aggiungi degli elementi al testo nel campo Input in modo che appaia come un'intestazione e due paragrafi nel campo  Output.

+ +

In caso di errore, puoi sempre ripartire da zero usando il pulsante Reset. Se ti blocchi, premi il pulsante Show solution per vedere la risposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Perché abbiamo bisogno delle semantiche?

+ +

Le semantiche vengono utilizzate continuamente intorno a noi — ci affidiamo all'esperienza per predire la funzione degli oggetti che usiamo tutti i giorni; quando vediamo qualcosa, sappiamo quale sarà la sua funzione. Così, per esempio, ci aspettiamo che una luce rossa del semaforo significhi "fermati", e una luce verde significhi "vai".  Le cose diventano complicate rapidamente se vengono applicate le semantiche sbagliate (forse qualche Paese usa il rosso per dire "vai"? Spero di no.)

+ +

Sulla stessa falsariga, dobbiamo essere sicuri che stiamo usando gli elementi giusti, per dare al nostro contenuto il giusto significato, funzione o aspetto. In questo contesto l'elemento {{htmlelement("h1")}} è anche un elemento semantico, che conferisce al testo che racchiude il ruolo (o il significato) di "intestazione di primo livello sulla tua pagina".

+ +
<h1>This is a top level heading</h1>
+ +

Per impostazione predefinita, il browser darà al suo font una dimensione grande per farlo apparire come un'intestazione (anche se potresti dargli uno stile per farlo apparire in qualsiasi modo tu voglia usando CSS). E' ancora più importante osservare che il suo valore semantico verrà usato in molti modi, ad esempio dai motori di ricerca e dagli screen reader (come spiegato in precedenza).

+ +

Dall'atro lato, potresti far sembrare qualsiasi elemento come un'intestazione di primo livello. Considera quanto segue:

+ +
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
+ +

Questo è un elemento {{htmlelement("span")}}. non ha semantiche. Lo usi per includere contenuto quando vuoi applicargli il CSS (o lavorarci con JavaScript) senza dargli alcun ulteriore significato (troverai di più su questo argomento più avanti nel corso). Abbiamo applicato del CSS per farlo apparire come un'intestazione di primo livello, m dal momento che non ha valore semantico non avrà nessuna delle qualità extra descritte sopra. E' una buona idea usare per questo scopo l'HTML appropriato.

+ +

Liste

+ +

Ora rivolgiamo la nostra attenzione alle liste. Le liste sono ovunque nella nostra vita — dalla lista della spesa alle indicazioni che in maniera inconscia segui per tornare a casa tutti i giorni, alla lista di istruzioni che stai seguendo in questi tutorial! Le liste sono ovunque anche sul Web, e abbiamo tre tipi differenti di cui occuparci.

+ +

Puntata

+ +

La lista puntanta viene utilizzata come mark up per elementi di cui l'ordine non è importante — prepara la tua lista della spesa.

+ +
milk
+eggs
+bread
+hummus
+ +

Ogni lista puntata comincia con un {{htmlelement("ul")}} che racchiude la lista:

+ +
<ul>
+milk
+eggs
+bread
+hummus
+</ul>
+ +

L'ultimo step è racchiudere ogni elemento della lista con {{htmlelement("li")}} (list item):

+ +
<ul>
+  <li>milk</li>
+  <li>eggs</li>
+  <li>bread</li>
+  <li>hummus</li>
+</ul>
+ +

Apprendimento attivo: prepara la tua lista a punti

+ +

Prova a editare in diretta l'esempio sottostante per creare la tua lista puntata in HTML.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Numerata

+ +

La lista numerata viene utilizzata per elementi di cui l'ordine è importante — ecco un esempio:

+ +
Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road
+ +

La struttura è la stessa della lista puntata ad eccezione che chiuderai la lista di elementi con  {{htmlelement("ol")}} element, al posto del <ul>:

+ +
<ol>
+  <li>Drive to the end of the road</li>
+  <li>Turn right</li>
+  <li>Go straight across the first two roundabouts</li>
+  <li>Turn left at the third roundabout</li>
+  <li>The school is on your right, 300 meters up the road</li>
+</ol>
+ +

Active learning: Marking up an ordered list

+ +

Try editing the live sample below to create your very own HTML ordered list.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Active learning: Marking up our recipe page

+ +

So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our text-start.html starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

If you get stuck, you can always press the Show solution button, or check out our text-complete.html example on our github repo.

+ +

Nesting lists

+ +

It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.</li>
+  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+  <li>If you want a smooth hummus, process it for a longer time.</li>
+</ol>
+ +

Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.
+    <ul>
+      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+      <li>If you want a smooth hummus, process it for a longer time.</li>
+    </ul>
+  </li>
+</ol>
+ +

Try going back to the previous active learning example and updating the second list like this.

+ +

Emphasis and importance

+ +

In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.

+ +

Emphasis

+ +

When we want to add emphasis in spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.

+ +

I am glad you weren't late.

+ +

I am glad you weren't late.

+ +

The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.

+ +

In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below.)

+ +
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+ +

Strong importance

+ +

To emphasize important words, we tend to stress them in spoken language and bold them in written language. For example:

+ +

This liquid is highly toxic.

+ +

I am counting on you. Do not be late!

+ +

In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below.)

+ +
<p>This liquid is <strong>highly toxic</strong>.</p>
+
+<p>I am counting on you. <strong>Do not</strong> be late!</p>
+ +

You can nest strong and emphasis inside one another if desired:

+ +
<p>This liquid is <strong>highly toxic</strong> —
+if you drink it, <strong>you may <em>die</em></strong>.</p>
+ +

Active learning: Let's be important!

+ +

In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Italic, bold, underline...

+ +

The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.

+ +

HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles.

+ +

Here's the best rule of thumb: it's likely appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

+ + + +
+

A kind warning about underline: People strongly associate underlining with hyperlinks. Therefore, on the Web, it's best to underline only links. Use the <u> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.

+
+ +
<!-- scientific names -->
+<p>
+  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
+  is the most common hummingbird in Eastern North America.
+</p>
+
+<!-- foreign words -->
+<p>
+  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- a known misspelling -->
+<p>
+  Someday I'll learn how to <u>spel</u> better.
+</p>
+
+<!-- Highlight keywords in a set of instructions -->
+<ol>
+  <li>
+    <b>Slice</b> two pieces of bread off the loaf.
+  </li>
+  <li>
+    <b>Insert</b> a tomato slice and a leaf of
+    lettuce between the slices of bread.
+  </li>
+</ol>
+ +

Summary

+ +

That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + diff --git a/files/it/learn/html/introduction_to_html/getting_started/index.html b/files/it/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..47a4006b6c --- /dev/null +++ b/files/it/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,649 @@ +--- +title: Cominciare conl'HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

In questo articolo trattiamo le basi dell'HTML, per farti cominciare. Definiamo gli elementi, gli attributi e tutti gli altri termini che puoi aver sentito e vediamo come si integrano nel linguaggio. Vediamo inoltre come sono strutturati un elemento HTML e una tipica pagina e spieghiamo altre importanti caratteristiche del linguaggio. Lungo il percorso, giocheremo con un po' di HTML per mantenere viva l'attenzione.

+ + + + + + + + + + + + +
Prerequisiti:Alfabetizzazione sull'uso del computer, basic software installed, e conoscenze di base di working with files.
Obbiettivo:Acquisire familiarità col linguaggio HTML e fare un po' di pratica nella scrittura di elementi HTML.
+ +

Cos'é l'HTML?

+ +

L'{{glossary("HTML")}} (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, usato per dire al browser come strutturare le pagine web. Può essere complicato o semplice, a seconda di come lo sviluppatore desidera che sia. Un file HTML è composto da una serie di {{glossary("Element", "elementi")}} usati per racchiudere o marcare parti di contenuto, così che venga mostrato in un certo modo.  I {{glossary("Tag", "tag")}} che racchiudono il contenuto, possono renderlo un collegamento a un altra pagina web, formattarlo in carattere italico e così via. Per esempio prendiamo la seguente linea di codice:

+ +
My cat is very grumpy
+ +

Se vogliamo che la linea sia isolata, possiamo specificare che è un paragrafo, racchiudendola con due tag  ({{htmlelement("p")}})

+ +
<p>My cat is very grumpy</p>
+ +

Anatomia di un elemento HTML

+ +

Esploriamo ulteriormente il nostro elemento.

+ +

+ +

Le parti sono:

+ +
    +
  1. Il tag di apertura: consiste nel nome dell'elemento (in questo caso, p), racchiuso tra parentesi angolari (minore e maggiore - < >); indica sia il punto dove inizia l'elemento e quando ha effetto — nel caso in esame indica l'inizio del paragrafo.
    2. +
  2. Il tag di chiusura: uguale al tag di apertura eccetto che per la presenza di uno slash prima del nome dell'elemento; indica dove finisce l'elemento. Dimenticarsi di mettere il tag di chiusura è un tipico errore e può portare a strani risultati.
    3. +
  3. Il contenuto: Ciò che sta fra i due tag; in questo caso è solo testo.
    4. +
  4. L'elemento: l'insieme del tag di apertura, tag di chiusura e contenuto è detto "elemento".
    5. +
+ +

Active learning: creare il primo elemento HTML

+ +

Modifica la linea sottostante nel campo Input racchiudendola fra i tag <em> e </em> (inserisci il tag {{htmlelement("em")}} all'inizio della riga per aprire l'elemento, e {{htmlelement("/em")}} al termine della riga per chiudere l'elemento), questo evidenzierà il contenuto con il carattere italico. Vedrai l'effetto dei cambiamenti nel campo Output.

+ +

Se fai un errore, puoi sempre usare il pulsante reset per ripristinare la situazione iniziale. Se sei bloccato, premi il pulsante Mostra soluzione per vedere la risposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 300) }}

+ +

Elementi annidati

+ +

Puoi inserire elementi dentro altri elementi: si dice annidare (nesting). Se vogliamo sottolineare che il nostro gatto è MOLTO scontroso (VERY grumpy) possiamo racchiudere la parola "very" in un elemento {{htmlelement("strong")}}, per enfatizzarla fortemente.

+ +
<p>My cat is <strong>very</strong> grumpy.</p>
+ +

Dovete assicurarvi che gli elementi siano annidati in modo appropriato: nell'esempio viene aperto prima l'elemento p e poi l'elemento strong, dobbiamo perciò chiudere prima l'elemento strong e poi l'elemento p. L'esempio seguente è sbagliato:

+ +
<p>My cat is <strong>very grumpy.</p></strong>
+ +

Gli elementi devono essere aperti e chiusi correttamente perché sia chiaro se sono all'interno o all'esterno uno dell'altro. Se si mescolano, come nell'esempio qui sopra, il browser cercherà di indovinare quali erano le tue intenzioni e potrebbe darti risultati inaspettati. Quindi presta attenzione.

+ +

Confronto tra elementi "blocco" e "in linea"

+ +

Ci sono due importanti categorie di elementi in HTML. Questi sono gli elementi di tipo blocco (block level) e elementi in linea (inline).

+ + + +

Prendete l'esempio seguente:

+ +
<em>first</em><em>second</em><em>third</em>
+
+<p>fourth</p><p>fifth</p><p>sixth</p>
+
+ +

{{htmlelement("em")}} è un elemento in linea, che viene mostrato nell'esempio sottostante, i tre elementi saranno mostrati sulla stessa linea senza nessuno spazio a separarli.

+ +

{{htmlelement("p")}} è un elemento blocco, quindi ogni elemento dichiarato con questo tag, apparirà su una nuova linea con spazi sopra e sotto (la spaziatura è dovuta alla formattazione di default (CSS styling) che il browser applica ai paragrafi).

+ +

{{ EmbedLiveSample('Confronto_tra_elementi_blocco_e_in_linea', 700, 200) }}

+ +
+

Nota: l'HTML5 ha ridefinito le categorie degli elementi: approfondisci in Categorie degli elementi di contenuto (en) queste nuove definizioni sono più accurate e meno ambigue di quelle definite precedentemente, ma più complicate da capire rispetto a "blocchi" e "in linea", perciò continueremo a usarle in questa spiegazione.

+
+ +
+

Nota: I termini "block" e "inline", come usati in questo argomento , non dovrebbero essere confusi con i tipi dei box CSS con lo stesso nome. Anche se correlati per default, cambiare la proprietà display nei CSS non cambia la categoria dell'elemento e non modifica quali elementi potrebberso essere contenuti e quali saranno contenuti. Uno dei motivi per cui HTLM5 a deprecato l'uso di questi termini, riguarda la possibilità che questi vengano confusi.

+
+ +
+

Nota: Nelle pagine di riferimento, troverai delle liste che includono gli elementi di Blocco e quelli In linea — controlla Elementi di tipo blocco  e Elementi in linea.

+
+ +

Elementi vuoti

+ +

Non tutti gli elementi seguono il modello: tag di apertura, contenuto, tag di chiusura. Alcuni elementi hanno un unico tag, che è abitualmente usato per includere qualcosa nel documento in quel punto. Per esempio l'elemento {{htmlelement("img")}} inserisce un'immagine nella posizione in cui viene scritto.

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

Questo fa apparire ciò che segue:

+ +

{{ EmbedLiveSample('Elementi_vuoti', 700, 300) }}

+ +
+

Note: Gli elementi vuoti sono a volte chiamati elementi void.

+
+ +

Attributi

+ +

Gli elementi possono avere "attributi" che appaiono così:

+ +

&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>

+ +

Gli attributi contengono informazioni extra, riguardanti l'elemento, che non appaiano nel contenuto visualizzato nella pagina. In questo caso, l'attributo class permette di assegnare uno o più nomi che potrà/anno poi  essere usato/i per puntare alle regole di stile per quell elemento o altro.

+ +

Un attributo deve avere:

+ +
    +
  1. uno spazio tra lui e il nome dell'elemento (o il precedente attributo, se l'elemento ha già uno o più attributi.)
    2. +
  2. il nome dell'attributo seguito dal segno di uguale
    3. +
  3. un valore racchiuso tra virgolette
    4. +
+ +

Active learning: aggiunta di attributi ad un elemento

+ +

Un altro esempio di elemento é {{htmlelement("a")}} — che sta per "anchor" e rende il contenuto dell'elemento un collegamento ipertestuale (hyperlink). Questo elemento può avere diversi attributi, come vediamo qui sotto:

+ + + +

Modifica la linea sottostante nel campo Input per farne un link al tuo sito preferito. Per prima cosa, aggiungi l'elemento {{htmlelement("a")}}. Poi specifica gli attributi href e title. Ed infine, specifica l'attributo target affinche il collegamento si aprà in un nuovo/a tab/finestra.Vedrai l'effetto dei cambiamenti nel campo Output mentre digiti.  Dovresti vedere un link che mostrerà il valore dell'attributo title quando il puntatore del mouse verrà posizionato sopra e aprirà la pagina definita dal valore dell'attributo href. Ricorda di lasciare uno spazio tra nome dell'elemento e attributi.

+ +

Se hai commesso un errore, puoi sempre tornare allo stato iniziale con il pulsante Reset. Se non riesci proprio a trovare la soluzione, premi il pulsante Mostra soluzione e vedrai la risposta.

+ + + +

{{ EmbedLiveSample('Playable_code2', 700, 300) }}

+ +

Attributi booleani

+ +

A volte potrai trovare degli attributi senza alcun valore — questo è consentito. Questo tipo di attributi, sono chiamati attributi booleani, e possono avere un unico valore, che solitamente è  uguale al nome dell'attributo stesso. Ad esempio, analizziamo l'attributo {{htmlattrxref("disabled","input")}} che può essere assegnato agli elementi input dei moduli (form) per disabilitarli (renderli grigi) e fare in modo che non possa essere introdotto alcun dato.

+ +
<input type="text" disabled="disabled">
+ +

Per brevità, è permesso scriverli come nell'esempio qui sotto (abbiamo incluso anche un campo non disabilitato per confronto, per darti un assaggio di cosa verrà).

+ +
<input type="text" disabled>
+
+<input type="text">
+
+ +

Entrambi ti mostreranno il seguente output:

+ +

{{ EmbedLiveSample('Attributi_booleani', 700, 100) }}

+ +

Omettere le virgolette attorno al valore degli attributi

+ +

Quando navighi il world wild web, potrai trovare i più strani stili di mark up, inclusi i valori degli attributi senza virgolette: ciò è permesso in alcune circostanze, ma negli altri casi creerà problemi al tuo markup. Per esempio, se riprendiamo il precedente esempio del link, possiamo scriverne una versione base con solo l'attributo href, come qui:

+ +
<a href=https://www.mozilla.org/>favourite website</a>
+ +

Tuttavia, appena aggiungeremo l'attributo title, le cose smetteranno di funzionare

+ +
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>
+ +

A questo punto il browser, fraintenderà il tuo markup, interpretando l'attributo title come tre attributi distinti — un attributo title con valore "The" e due attributi booleani Mozilla e homepage. Non è ovviamente ciò che si intendeva e provocherà errori o comportamenti inaspettati, come nell'esempio live sottostante. Prova a posizionare il mouse sopra il link per vedere qual é il title.

+ +

{{ EmbedLiveSample('Omettere_le_virgolette_attorno_al_valore_degli_attributi', 700, 100) }}

+ +

Il nostro consiglio è di mettere sempre le virgolette — Si evitano questi problemi e si ottiene anche un codice più leggibile.

+ +

Virgolette singole o doppie?

+ +

In questo articolo noterai che sono state usate le doppie virgolette. Potrai tuttavia trovare le virgolette singole in qualche documento HTML. Si tratta esclusivamente di una questione di stile e sei libero di scegliere quelle che preferisci. Le due linee seguenti sono equivalenti.

+ +
<a href="http://www.example.com">A link to my example.</a>
+
+<a href='http://www.example.com'>A link to my example.</a>
+ +

Devi però assicurarti di non mescolarle. L'esempio seguente non funzionerà.

+ +
<a href="http://www.example.com'>A link to my example.</a>
+ +

Se hai usato un tipo di virgolette nel tuo HTML, puoi usare l'altro tipo nel valore dell'attributo senza nessun problema:

+ +
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
+ +

Se vuoi annidare lo stesso tipo di virgolette, dovrai usare {{anch("Entity references: including special characters in HTML")}}.

+ +

Anatomia di un documento HTML

+ +

That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Adesso vedremo come gli elementi sono combinati per formare una intera pagina HTML.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

Qui abbiamo:

+ +
    +
  1. <!DOCTYPE html>: La doctype. Nella notte dei tempi, quando l'HTML era appena nato (about 1991/2), doctypeserano utilizzate per collegare set of rules che la pagina HTML doveva rispettare per essere considerata un buon documento HTML, il che significava determinare automaticamente gli errori e altre cose utili. In genere erano qualcosa tipo questo: + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + Tuttavia oggi, a nessuno interessa di loro e sono solo un residuo storico che deve essere incluso per far si che tutto  funzioni. <!DOCTYPE html> è la più corta stringa di caratteri che rappresenta una doctype valida; è tutto ciò che serve sapere.
    2. +
  2. <html></html>: The <html> element. Questo elemento racchiude tutta la pagina e vi si può riferire come "root", elemento radice.
    3. +
  3. <head></head>: The <head> element. Questo elemento serve da contenitore per tutta una serie di cose da includere nel documento HTML che non sono "contenuto" da far visualizzare ai visitatori della tua pagina. Sono incluse cose come le parole chiave e la descrizione della pagina, che vuoi appaia nei risultati dei motori di ricerca, dichiarazioni CSS per formattare il contenuto, dichiarazioni dei set di caratteri e altro. Imparerai di più riguardo a questo nel prossimo articolo della serie.
    4. +
  4. <meta charset="utf-8">: Questo elemento imposta il set di caratteri che il tuo documento dovrebbe usare a utf-8, che include la maggior parte dei caratteri di tutti gli alfabeti umani conosciuti. Sostanzialmente può trattare qualsiasi tipo di testo tu voglia introdurre. non c'è ragione per non usare questo set di caratteri e può evitare problemi in seguito.
    5. +
  5. <title></title>: Questo imposta il titolo della tua pagina, cioè il titolo che appare nella scheda del browser quando la pagina viene caricata e che viene usato per descrivere la pagina quando la salvi tra i preferiti (bookmark).
    6. +
  6. <body></body>: The <body> element. Questo elemento contiene tutto ciò che vuoi mostrare agli utenti del web che visitano la pagina, sia che si tratti di testo, sia di immagini o video, giochi, tracce audio o qualsiasi altra cosa.
    7. +
+ +

Active learning: Aggiungere alcune caratteristiche ad un documento HTML

+ +

If you want to experiment with writing some HTML on your local computer, you can: Se vuoi esercitarti a scrivere un po' di HTML sul tuo computer, puoi:

+ +
    +
  1. Copiare il codice HTML della pagina di eempio qui sopra
    2. +
  2. creare un nuovo file nel tuo editor di testo
    3. +
  3. incollare il codice nel tuo nuovo file
    4. +
  4. salvare il file col nome index.html
    5. +
+ +
+

Note: Trovi questo modello di base anche nel MDN Learning Area Github repo.

+
+ +

Adesso puoi aprire il file nel tuo browser e vedere come appare il codice, poi puoi modificare il codice e ricaricare la pagina per vedere i risultati. Inizialmente dovrebbe apparire più o meno così:

+ +

A simple HTML page that says This is my pageCosì, in questo esercizio, puoi modificare il codice localmente sul tuo computer come mostrato sopra, o puoi modificare l'esempio sotto (l'esempio modificabile rappresenta solo l'elemento <body>). Ci piacerebbe che tentassi di realizzare questi passi:

+ + + +

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

+ + + +

{{ EmbedLiveSample('Playable_code3', 700, 600) }}

+ +

Spazio bianco nell'HTML

+ +

Nei precedenti esempi potresti aver notato che molto spazio bianco (vuoto) è incluso nel listato del codice - ciò non è affatto necessario; i due seguenti estratti sono equivalenti:

+ +
<p>Dogs are silly.</p>
+
+<p>Dogs        are
+         silly.</p>
+ +

Non importa quanti spazi usi (includendo sia il carattere spaziatura che le interruzioni di linea), il decodificatore (parser) HTML li riduce tutti ad un unico spazio quando restituisce la pagina. Quindi perché usare così tanti spazi? La risposta é per ottenere leggibilità; è molto più semplice capire cosa fa il tuo codice se lo hai formattato ordinatamente e non solo raggruppato insieme in un grande caos. Nel nostro HTML abbiamo fatto rientrare di due spazi, rispetto all'elemento contenitore, tutti gli elementi annidati. Dipende da te quale stile di formattazione usare (per esempio quanti spazi utilizzare per ogni livello di indentazione), ma devi usare qualche tipo di formattazione.

+ +

Elenco di riferimento delle entità: includere caratteri speciali nell'HTML

+ +

In HTML, i caratteri <, >,",' e & sono caratteri speciali. Sono anche parti della sintassi dell'HTML, quindi si pone il problema di come poterli includere nel proprio testo, per indicare ad esempio un "minore di", senza che venga interpretato dal parser come codice, cosa che alcuni browser potrebbero fare.

+ +

Dobbiamo usare speciali codici che rappresentano quei caratteri e che possono quindi essere usati in quelle circostanze. Ognuno di questi codici (character reference) inizia con un ampersand (&) e finisce con un punto e virgola (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Literal characterCharacter reference equivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

Nell'esempio sotto, puoi vedere 2 paragrafi che parlano di tecnologie web:

+ +
<p>In HTML, you define a paragraph using the <p> element.</p>
+
+<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>
+ +

Nel campo di output istantaneo sotto, puoi vedere che il primo paragrafo è sbagliato, perché il browser pensa che il secondo tag p (<p>) sia l'inizio di un nuovo paragrafo. Il secondo paragrafo funziona perché abbiamo sostituito le parentesi angolate con le entità (character references).

+ +

{{ EmbedLiveSample('Elenco_di_riferimento_delle_entità_includere_caratteri_speciali_nell\'HTML', 700, 200) }}

+ +
+

Note: Una tabella di riferimento di tutte le entità disponibili nel linguaggio HTML si trova su Wikipedia: List of XML and HTML character entity references.

+
+ +

Commenti HTML

+ +

In HTML, come in molti linguaggi di programmazione, c'è la possibilità di aggiungere dei "commenti" al codice, che sono ignorati dal browser e sono pertanto invisibili per gli utenti; il loro scopo è di includere nel documento spiegazioni sul funzionamento del codice, su cosa fanno le differenti parti di codice, ecc. Tutto ciò può essere molto utile se ritorni sul codice sei mesi dopo che ci avevi lavorato e non puoi ricordare cosa avevi fatto, o se passi a qualcun'altro il tuo codice perché ci lavori.

+ +

Per far si che una parte del contenuto del documento HTML sia un commento, devi includerlo tra speciali segni, che sono  <!-- and -->. Avrai per esempio:

+ +
<p>I'm not inside a comment</p>
+
+<!-- <p>I am!</p> -->
+ +

Come puoi vedere qui sotto, il primo paragrafo appare nell'output , mentre il secondo no.

+ +

{{ EmbedLiveSample('Commenti_HTML', 700, 100) }}

+ + + +

Hai raggiunto la fine dell'articolo; spero tu abbia gradito questo tour fra le più elementari regole dell'HTML. A questo punto dovresti capire come appare il linguaggio, come funziona ad un livello base e dovresti essere in grado di scrivere alcuni elementi ed attributi. Questo è il punto perfetto a cui essere adesso, perché nei seguenti articoli della serie rivedremo nei dettagli alcune delle cose già viste e introdurremo alcune nuove caratteristiche del linguaggio. Stay tuned! (Resta sintonizzato!)

+ +
+

Note: A questo punto, poiché inizi a saperne di più di  HTML, potresti anche voler iniziare ad esplorare i Cascading Style Sheets, o CSS, che é il linguaggio usato per dare stile e abbellire le pagine web (per esempio cambiare il colore dei font o alterare il layout della pagina). HTML e CSS sono fatti per operare insieme, come presto scoprirai.

+
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
diff --git a/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html b/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html new file mode 100644 index 0000000000..de092cd8b9 --- /dev/null +++ b/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html @@ -0,0 +1,265 @@ +--- +title: Cosa c'è nella head? Metadata in HTML +slug: Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML +tags: + - Guida + - HTML + - Principiante + - favicon + - head + - lang + - metadata +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

La {{glossary("Head", "head")}} di un documento HTML è la parte che non viene visualizzata nel browser quando la pagina viene caricata. Contiene informazioni come il {{htmlelement("title")}}, della pagina, i link ai {{glossary("CSS")}} (se vuoi applicare uno stile al contenuto tramite i CSS), i link alle favicons personalizzate, e altri metadata (dati relativi all'HTML, come chi lo ha scritto, o importanti parole chiave che descrivono il documento). In questo articolo vedremo tutto ciò e anche altro, per darti una buona base del markup e di altro codice che dovrebbe trovarsi nella head.

+ + + + + + + + + + + + +
Prerequisiti:Familiarità con le basi di HTML, spiegate in Cominciare con l'HTML.
Obbiettivi:Conoscere la head dell'HTML, qual è il suo scopo, i più importanti elementi che può contenere e quale effetto può avere sul documento HTML.
+ +

Cosa è la head?

+ +

Riprendiamo il semplice esempio di documento HTML che abbiamo visto nell'articolo precedente.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

La head HTML è il contenuto dell'elemento {{htmlelement("head")}} — diversamente dal contenuto dell'elemento {{htmlelement("body")}} (che è visualizzato quando la pagina viene caricata dal browser), il contenuto della head non viene visualizzato nella pagina. Invece, il compito della head è di contenere dei {{glossary("Metadata", "metadata")}} relativi al documento. Nell'esempio precedente, la head è piuttosto ridotta:

+ +
<head>
+  <meta charset="utf-8">
+  <title>My test page</title>
+</head>
+ +

In pagine più corpose tuttavia, la head può diventare piuttosto piena di elementi — prova ad andare in qualcuno dei tuoi siti favoriti e usando i developer tools esamina il contenuto della loro head. Il nostro scopo qui, non è di mostrarti l'uso di qualsiasi cosa sia possibile mettere nella head, ma piuttosto di insegnarti come usare le cose più ovvie da mettere nella head e fare in modo che tu abbia un po' di familiarità con quelle. Andiamo a cominciare.

+ +

Aggiungere un title

+ +

Abbiamo già visto l'elemento {{htmlelement("title")}} in azione — può essere usato per aggiungere un titolo ad un documento. Ciò può confondere conl'elemento {{htmlelement("h1")}} che è usato per aggiungere l'intestazione principale al contenuto del body — a cui ci si riferisce lo stesso come al titolo della pagina; ma sono due cose differenti!

+ + + +

Active learning: esaminare un sempice esempio.

+ +
    +
  1. Per avviare questo active learning, ci piacerebbe che andassi al nostro repositori Github e scaricassi una copia della nostra pagina title-example.html. Per farlo puoi usare uno dei due modi seguenti: + +
      +
    1. copiare ed incollare il codice della pagina in un nuovo file di testo creato col tuo editor e salvarlo in un posto adatto;
      2. +
    2. Premere il tasto "Raw" nella pagina, scegliere File > Save Page As... nel menù del browser e scegliere un posto in cui salvarlo.
      3. +
    +
    2. +
  2. Adesso apri il file nel browser. Dovresti vedere questo: +

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Adesso dovrebbe essere chiaro dove appare il contenuto dell'elemento <h1> e dove appare il contenutodell'elemento <title>!

    +
    3. +
  3. Dovresti anche provare as aprire il codice nell'editor, modificare il contenuto di questi elementi, ricaricare la pagina nel browser. Adesso puoi divertiti un po'!
    4. +
+ +

Il contenuto dell'elemento <title> è anche usato in altri modi. Per esempio, se provi a salvare  la pagina nei preferiti (Bookmarks > Bookmark This Page, in Firefox), vedrai il contenuto del <title> come nome suggerito per il segnalibro.

+ +

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

+ +

Il <title> è usato anche nelle ricerche, come vedrai più avanti.

+ +

Metadata: l'elemento <meta>

+ +

I metadati sono dati che descrivono altri dati. In HTML c'è un modo "ufficiale" per aggiungere metadata al documento: l'elemento {{htmlelement("meta")}}. Inoltre, le altre cose di cui parliamo in questo articolo possono essere pensate anch'esse come metadata. Ci sono molti tipi di elementi <meta> che possono essere inseriti nella <head> del documento, ma non vogliamo cercare di parlare di tutti adesso, perché renderebbe tutto troppo complicato. Invece, spiegheremo poche cose che potrai vedere più spesso, solo per darti un'idea.

+ +

Specificare la codifica dei caratteri del documento

+ +

Nell'esempio che abbiamo visto, c'era questa riga:

+ +
<meta charset="utf-8">
+ +

Questo elemento specifica semplicemente la codifica dei caratteri del documento: il set di caratteri che il documento può usare.  utf-8 è un set di caratteri universale, che include pressoché ogni carattere di ogni linguaggio umano. Ciò significa che la tua pagina web potrà mostrare qualsiasi lingua; pertanto è una buona cosa usare questo set di caratteri per ogni pagina che crei! Per esempio, la tua pagina potrebbe tranquillamente gestire sia l'inglese che il giapponese:

+ +

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Se imposti il set di caratteri ISO-8859-1, per esempio (il set di caratteri per l'alfabeto latino), il rendering della pagina potrebbe essere scombinato:

+ +

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

+ +

Active learning: esercitarsi con la codifica dei caratteri

+ +

Per questa prova, riprendi il modello di HTML che hai scaricato durante la precedente sezione riguardante l'elemento <title> (il title-example.html), prova a cambiare il set dei caratteri (il valore di charset) a ISO-8859-1 e aggiungi del giapponese alla pagina; questo è il codice che abbiamo usato:

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

Aggiungere l'autore e la descrizione

+ +

Molti elementi <meta> includono gli attributi name e content :

+ + + +

Due degli elementi meta che è utile inserire nella pagina definiscono l'autore della pagina e una concisa descrizione della stessa. Vediamo un esempio:

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="The MDN Learning Area aims to provide
+complete beginners to the Web with all they need to know to get
+started with developing web sites and applications.">
+ +

Specificare un autore è utile per ricavare chi ha scritto la pagina: nel caso li si voglia contattare per chiarimenti riguardo al contenuto. Alcuni Content Management Systems (CMS) hanno dei meccanismi per estrarre automaticamente le informazioni sull'autore e renderle disponibili per questo scopo.

+ +

Specificare una descrizione che includa parole chiave relative al contenuto della pagina è utile perché può far apparire la pagina più avanti nei risultati delle ricerche fatte con i motori di ricerca (questo è un tema trattato in Search Engine Optimization, o {{glossary("SEO")}}.)

+ +

Active learning: L'uso della descrizione nei motori di ricerca

+ +

La descrizione è usata anche per la generazione delle pagine dei risultati della ricerca. Facciamo un esercizio per capire meglio.

+ +
    +
  1. Vai alla prima pagina di The Mozilla Developer Network.
    2. +
  2. Guarda il sorgente della pagina (Right/Ctrl + click sulla pagina, nel menù contestuale scegli View Page Source/Visualizza sorgente pagina).
    3. +
  3. Trova il meta tag description. Sarà così: + 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both
+Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    +
    4. +
  4. Adesso cerca "Mozilla Developer Network" con il tuo motore di ricerca preferito (We used Yahoo.) Vedrai il contenuto dell'elemento <meta> description e il contenuto dell'elemento <title> usati nei risultati della ricerca. — Vale decisamente la pena averli! +

    A Yahoo search result for "Mozilla Developer Network"

    +
    5. +
+ +
+

Note: In Google, vedrai alcune altre pagine rilevanti del sito MDN elencate sotto il link alla homepage MDN — sono chiamati sitelinks e sono configurabili negli strumenti di Google per webmasters (Google's webmaster tools) — un modo per migliorare i risultati del tuo sito nelle ricerche fatte col motore di ricerca di Google.

+
+ +
+

Note: Molte proprietà <meta> non sono più usate. Per esempio, l'elemento <meta> keyword  — che si supponeva dover essere usato per fornire ai motori di ricerca termini per rendere la pagina rilevante per le ricerche di quei termini — è ignorato dai motori di ricerca perché gli spammers lo riempivano di centinaia di parole chiave, pregiudicando i risultati della ricerca.

+
+ +

Altri tipi di metadata

+ +

Setacciando il Web, troverai altri tipi di metadata. Molte delle proprietà che vedrai nei siti web sono creazioni proprietarie (coperte da Copyright), progettate per dotare alcuni siti (tipo i social network) di particolari informazioni che loro possono usare.

+ +

Per esempio, Open Graph Data è un insieme di metadata (un protocollo) che Facebook ha inventato per  avere dei metadata più ricchi per i siti web. Nel codice sorgente MDN troverai questo:

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

Un effetto è che quando crei un link a MDN su facebook, il collegamento appare accompagnato da una immagine e da una descrizione: è una esperienza più ricca per gli utenti.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Anche Twitter ha i suoi metadati proprietari simili, che hanno un effetto simile quando l'indirizzo del sito è mostrato su twitter.com. Per esempio:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Aggiungere icone personalizzate al tuo sito

+ +

Per arricchire ulteriormente il progetto del tuo sito, puoi aggiungere un riferimento a delle icone personalizzate nei tuoi metadata e queste saranno mostrate in alcuni contesti.

+ +

Le humble favicon, che hanno girato per molti molti anni, sono state le prime icone di questo tipo: icone 16 x 16 pixel usate in molti modi. Le favicon possono essere aggiunte alla pagina :

+ +
    +
  1. Salvandole nella stessa directory in cui è salvato il file index.html nel formato .ico (molti browser supportano le favicons in formati più comuni, come .gif or .png,  ma usando il formato .ico si è sicuri che funzionino anche con browser vecchi come Internet Explorer 6.)
    2. +
  2. Aggiungendo la seguente riga nella <head> del docuemnto HTML per creare un riferimento all'icona: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

I browser moderni usano le favicon in molti posti, come nella scheda in cui la pagina è aperta o nel pannello dei segnalibri quando la pagina è salvata tra i preferiti.

+ +

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

Ci sono molti altri tipi di icone da prendere in considerazione attualmente. Per esempio, nel codice della homepage MDN troverai questo:

+ +
<!-- third-generation iPad with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- basic favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

I commenti spiegano per cosa è usata ciascuna icona — questi elementisoddisfano esigenze quali, ad esempio, fornire una piacevole icona ad alta risoluzione quando il sito è salvato nello schermo di un iPad.

+ +

Non preoccuparti troppo di aggiungere tutti questi tipi di icone al momento — sono caratteristiche piuttosto avanzate e non ci si aspetta che tu conosca queste cose per progredire nel corso. Lo scopo principale, qui, è farti sapere cosa sono queste cose nel caso le incontri mentre navighi il codice sorgente di altri siti web.

+ +

Applicare CSS e JavaScript all'HTML

+ +

Pressoché tutti i siti web, oggi, impiegano i {{glossary("CSS")}} per apparire fantastici e i  {{glossary("JavaScript")}} per potenziare l'interattività, i video players, le mappe, i giochi e altro. CSS e JavaScript sono generalmente applicati alle pagine web usando l'elemento {{htmlelement("link")}} e l'elemento {{htmlelement("script")}} rispettivamente.

+ + + +

Active learning: applicare CSS e JavaScript ad una pagina

+ +
    +
  1. Per iniziare questo apprendimento attivo, preleva una copia del nostro meta-example.html, dello script.js e del file style.css , e salvali nel tuo computer nella stessa directory. Assicurati che siano salvati con i nomi e le estensioni dei nomi corrette.
    2. +
  2. Apri il file HTML sia nel browser che nel tuo editor di testo
    3. +
  3. Seguendo le informazioni date precedentemente, aggiungi gli elementi {{htmlelement("link")}} e {{htmlelement("script")}} al tuo HTML così che il CSS e il JavaScript gli siano applicati.
    4. +
+ +

Se fatto correttamente, quando salvi l' HTML e ricarichi la pagina del browser, vedrai cambiare le cose (la lista non ci sarà, perché la dovete fare voi; il testo dice: "Qui sotto c'è una lista dinamica. Clicca ovunque fuori dalla lista per aggiungerle un nuovo punto. Clicca un punto della lista per cambiare il suo testo in qualcos'altro").

+ +

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

+ + + +
+

Note: se sei bloccato e non riesci ad applicare i CSS/JS , prova ad esaminare la pagina d'esempio css-and-js.html.

+
+ +

Impostare la lingua principale del documento

+ +

In fine. vale la pena dire che si può (e lo si dovrebbe proprio fare) impostare la lingua della pagina. Può essere fatto aggiungendo l'attributo lang al tag HTML di apertura (come visto nel meta-example.html.)

+ +
<html lang="en-US">
+ +

Ciò si rivela utile in molti modi. Il tuo documento sarà indicizzato meglio dai motori di ricerca (permettendoti di apparire correttamente nelle ricerche per linguaggi specifici) ed è utile agli utenti con disabilità visive che usano degli screen readers (per esempio, la parola "six" esiste sia in francese che in inglese, ma è pronunciata diversamente.)

+ +

Puoi anche impostare sottosezioni del documento perché vengano riconosciute come scritte in altre lingue; possiamo impostare la lingua giapponese per il nostro esempio in questo modo:

+ +
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
+ +

Questi codici sono definiti dalla ISO 639-1. Puoi trovare più informazioni a questo riguardo in Language tags in HTML and XML.

+ + + +

Queso segna la fine del corso accelerato sull'elemento HTML head — ci sarebbe molto di più da dire, ma un corso completo sarebbe noioso e porterebbe confusione a questo stadio dell'apprendimento; volevamo solo darti un'idea delle cose che più comunemente vi ci troverai. Nel prossimo articolo vedremo i fondamenti dell'HTML per il testo.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/it/learn/html/introduction_to_html/index.html b/files/it/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..459e8e1302 --- /dev/null +++ b/files/it/learn/html/introduction_to_html/index.html @@ -0,0 +1,67 @@ +--- +title: Introduzione a HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - CodingScripting + - HTML + - Introduction to HTML + - Landing + - Links + - NeedsTranslation + - Structure + - Text + - TopicStub + - head + - semantics +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

Al suo centro, {{glossary("HTML")}} è un linguaggio abbastanza semplice composto da elementi, che possono essere applicati a parti di testo per dare loro un significato diverso in un documento (è un paragrafo? E' un elenco puntato? E' parte di una tabella?). Struttura un documento in sezioni logiche (Ha un'intestazione? Ha tre colonne di contenuto? Ha un menù di navigazione?). Incorpora contenuto come immagini e video in una pagina. Questo modulo introdurrà i primi due dI questi argomenti introducendo i concetti fondamentali e sintassi di cui tu hai bisogno per comprendere l'HTML.

+ +

Prerequisiti

+ +

Prima di iniziare questa sezione non hai bisogno di nessuna nozione di HTML, ma dovresti avere una buona familiarità nell'uso dei computer e nell'uso del web passivo(per esempio guardare il contenuto o usarlo). Dovresti avere un normale ambiente di lavoro come spiegato nel dettaglio in Installare il software base e capire come creare e gestire file, come spiegato in Lavorare con i file — entrambi fanno parte della nostra guida per principianti Inizia con il web.

+ +
+

Note: Se stai lavorando su un computer/tablet o un altro device dove non hai la possibilità di creare dei file, potresti provare (almeno la maggior parte) degli esempi di codice in un programma online come JSBin o Thimble.

+
+ +

Guida

+ +

Questo modulo contiene i seguenti articoli, che ti guideranno nella teoria di base dell'HTML e ti daranno un'ampia opportunità per testare alcune abilità.

+ +
+
Iniziare con HTML
+
Copre le basi assolute dell'HTML, per iniziare: definiamo elementi, attributi e tutti gli altri termini importanti che potresti aver sentito e dove si adattano alla lingua. Mostriamo anche come è strutturato un elemento HTML, come è strutturata una tipica pagina HTML e spieghiamo altre importanti funzionalità linguistiche di base. Lungo la strada, avremo un gioco con HTML, per interessarti!
+
Cosa c'è nell'intestazione del documento? Metadati in HTML
+
La testa di un documento HTML è la parte che non viene visualizzata nel browser Web quando la pagina viene caricata. Contiene informazioni come la pagina {{htmlelement ("title")}}, i collegamenti a {{glossary ("CSS")}} (se vuoi dare uno stile al contenuto HTML con CSS), link a favicon personalizzate e metadati (che sono dati sull'HTML, come chi l'ha scritto, e parole chiave importanti che descrivono il documento).
+
Fondamenti del testo HTML
+
Uno dei principali lavori dell'HTML è dare significato al testo (conosciuto anche come semantica), in modo che il browser sappia come visualizzarlo correttamente. Questo articolo esamina come utilizzare l'HTML per suddividere un blocco di testo in una struttura di intestazioni e paragrafi, aggiungere enfasi / importanza alle parole, creare elenchi e altro.
+
Creare collegamenti ipertestuali
+
I collegamenti ipertestuali sono davvero importanti: sono ciò che rende il Web una rete. Questo articolo mostra la sintassi richiesta per effettuare un collegamento e tratta delle migliori prassi inerenti ai collegamenti.
+
Formattazione avanzata del testo
+
Ci sono molti altri elementi in HTML adibiti per la formattazione del testo che non troviamo nell'articolo fondamentali del testo HTML.Questi elementi sono meno conosciuti tuttavia risulta utile conoscerli. Qui imparerai come creare delle citazioni, elenchi puntati, codice del computer e altro relativo al testo come pedici e apici, informazioni di contatto e altro ancora.
+
Struttura del documento e del sito
+
Come per la definizione di parti individuale della tua pagina (come "un paragrafo" o "un'immagine", l'HTML è anche usato per definire aree del tuo sito (come "l'intestazione", "il menù di navigazione" o "la colonna di contenuto principale"). Questo articolo spiega come creare la struttura base di un sito e come trascriverla in codice HTML.
+
Correggere gli errori in HTML
+
Scrivere codice HTML è divertente ma se qualcosa andasse storto e tu non potessi lavorare per comprendere ciò che hai sbagliato, cosa faresti? Questo articolo ti introducerà alcuni utili strumenti che ti possono aiutare.
+
+ +

Valutazioni

+ +

I seguenti test valuteranno la tua comprensione delle basi del codice HTML spiegate nelle guide soprascritte.

+ +
+
Scrivere una lettera
+
Tutti noi dobbiamo imparare a scrivere una lettera prima o poi; e questo è anche un utile esempio per valutare le tue competenze di formattazione del testo. In questo test, infatti, ti verrà data una lettera da creare.
+
Strutturare una pagina di contenuti
+
Questo test valuterà le tue abilità sull'uso dell'HTML per strutturare una semplice pagina di contenuti, contenente un header, un footer, un menù di navigazione, contenuto principale e una sidebar.
+
+ +

Guarda anche

+ +
+
Alfabetizzazione web di base 1
+
Un corso eccellente della fondazione Mozilla che esplora e testa molte delle competenze introdotte nel modulo Introduzione all'HTML. La lettura, la scrittura e la partecipazione sul web vi diventeranno famigliari in questa sesta parte del modulo. Scoprirete su cosa il mondo del web è fondato attraverso produzione e collaborazione.
+
diff --git a/files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html b/files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html new file mode 100644 index 0000000000..3c15046cd4 --- /dev/null +++ b/files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html @@ -0,0 +1,270 @@ +--- +title: Contenuti video e audio +slug: Learn/HTML/Multimedia_and_embedding/contenuti_video_e_audio +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Adesso che siamo pratici con l'aggiunta di immagini, il passo successivo è cominciare ad aggiungere lettori video e audio ai documenti HTML. In questo articolo vedremo come farlo, con gli elementi {{htmlelement("video")}} e {{htmlelement("audio")}}; finiremo dando uno sguardo a come si aggiungono i sottotitoli ai video.

+ + + + + + + + + + + + +
Prerequisiti:Competenze base sui computer, software di base installato, conoscenze base di gestione dei file (working with files), familiarità coi fondamenti di HTML (come trattati in Cominciare con l'HTML) e con Immagini in HTML.
Obbiettivi:Imparare ad inserire contenuti video e audio nelle webpage e aggiungere i sottotitoli ai video.
+ +

Audio e video nel web

+ +

Gli sviluppatori Web han voluto usare video e audio per lungo tempo, fin dai primi anni del terzo millennio, quando abbiamo cominciato ad avere la banda larga, veloce abbastanza da supportare ogni tipo di video (i file video sono molto più grandi dei file testo o immagine). Nei primi tempi, le tecnologie nate per il web, come l'HTML, non avevano la capacità di integrare video e audio nel web, così, per poterlo fare, sono diventate popolari delle tecnologie proprietarie (e i plugin basati su di esse), come Flash (e più tardi Silverlight). Questo tipo di tecnologie funziona bene, ma ha numerosi problemi, tra cui: non essere ben integrate con HTML/CSS, problemi di sicurezza e di accessibilità.

+ +

Una soluzione nativa, sviluppata apposta, avrebbe risolto molti di questi problemi. Fortunatamente, pochi anni dopo, la specifica {{glossary("HTML5")}} aveva queste caratteristiche, conferite dall'aggiunta degli elementi {{htmlelement("video")}} e {{htmlelement("audio")}} e di alcune brillanti nuove {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} per il loro controllo. Non vedremo JavaScript qui — vedremo solo le fondamenta che possono essere ottenute con l'HTML.

+ +

Non ti insegneremo a produrre file audio e video, cosa per la quale sono richieste competenze totalmente diverse. Ti forniremo campioni audio, video e esempi di codice per i tuoi esperimenti, nel caso che tu non possa ottenerli per tuo conto.

+ +
+

Nota: Prima di cominciare, dovresti anche sapere che ci sono abbastanza pochi {{glossary("OVP","OVPs")}} (online video providers - fornitori di video online) come YouTube, Dailymotion, e Vimeo, e fornitori di audio online, come Soundcloud. Queste compagnie offrono un modo comodo e facile per pubblicare e fruire di video, così che tu non ti debba preoccupare dell'enorme consumo di banda. Queste compagnie OVP, in genere, offrono anche il codice da usare per integrare video/audio nelle tue pagine web. Se segui questa strada puoi evitare alcune delle difficoltà di cui discutiamo in questo articolo. Vedremo un po meglio questo tipo di servizi nel prossimo articolo.

+
+ +

L'elemento <video>

+ +

L'elemento {{htmlelement("video")}} permette di aggiungere un video in modo molto semplice. Un esempio può essere questo:

+ +
<video src="rabbit320.webm" controls>
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
+</video>
+ +

Le caratteristiche sono:

+ +
+
{{htmlattrxref("src","video")}}
+
Come per l'elemento {{htmlelement("img")}}, l'attributo src contiene il percorso al video che vuoi integrare nella pagina; funziona esattamente nello stesso modo.
+
{{htmlattrxref("controls","video")}}
+
Gli utenti devono poter controllare il riavvolgimento e la ripetizione del video o dell'audio (è particolarmente importante per i malati di epilessia). Si può usare sia l'attributo controls per aggiungere l'interfaccia di controllo propria del browser, sia costruire la propria interfaccia usando le appropriate API JavaScript. Come minimo, l'interfaccia deve offrire la possibilità di avviare e fermare il media e di regolare il volume.
+
Il paragrafo tra i tag <video>
+
Questo paragrafo è chiamato fallback content (contenuto di ripiego) — sarà mostrato se il browser che accede alla pagina non supporta l'elemento <video>, offrendo un'alternativa per i vecchi browser. Può essere qualunque cosa vogliate; si può ad esempio fornire un collegamento diretto al file video, così che l'utente possa accedervi in qualche modo, indipendentemente dal browser che usa.
+
+ +

Il video integrato apparirà più o meno così:

+ +

A simple video player showing a video of a small white rabbit

+ +

Puoi provare l'esempio qui: try the example (vedi anche il codice sorgente).

+ +

Supportare molti formati

+ +

C'è un problema con l'esempio qui sopra, che potresti aver già notato se hai provato ad accedere il live link con un browser come Safari o Internet Explorer. Il video non parte! Ciò è dovuto al fatto che i browser supportano formati video (e audio) diversi.

+ +

Passiamo rapidamente in rassegna la terminologia. Formati come MP3, MP4 e WebM sono chiamati container formats (formati container). Contengono diverse parti che costituiscono l'intera canzone o video — come un'unica traccia audio (o un unica traccia video nel caso dei video) e i metadati per descrivere il media (mezzo espressivo) che viene presentato.

+ +

Anche le tracce audio e video hanno diversi formati, per esempio:

+ + + +

Un player audio tenderà a riprodurre una traccia audio direttamente, ad es. un MP3 o un file Ogg; queste non necessitano di contenitori.

+ +
+

Nota: non è così semplice, come puoi vedere nella nostra tabella audio-video codec compatibility table. Inoltre, molti browser dei portatili possono riprodurre un formato non supportato passandone la gestione al media player del sistema perché lo riproduca. Ma per ora ce n'è già abbastanza.

+
+ +

I formati precedenti esistono per comprimere i video e gli audio in file maneggiabili (i video e gli audio originali sono molto pesanti). I browser contengono differenti {{Glossary("Codec","Codecs")}}, come Vorbis o H.264, che sono usati per covertire i video e gli audio compressi in file binari e viceversa. Come già detto, sfortunatamente, non tutti i borwser supportano gli stessi codecs, così si dovranno fornire molti file, per ogni riproduttore di media. Se manca il giusto codec per decodificare il media, questo non si avvierà.

+ +
+

Nota: ti potresti chiedere il perché di questa situazione. I formati MP3 (for audio) and MP4/H.264 (for video) sono entrambi ampiamente supportati e di buona qualità. Tuttavia, sono anche ricoperti da brevetto — Il brevetto americano copre MP3 fino almeno al 2017, e H.264 fino al 2027 come minimo; ciò significa che i browser che non detengono il brevetto devono pagare parecchio per poter supportare questi formati. Inoltre, molte persone evitano per principio i software con delle restrizioni, in favore dei formati aperti.

+
+ +

Quindi, come facciamo ad offrire diversi formati? Dai uno sguardo al seguente updated example (try it live here, also):

+ +
<video controls>
+  <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>
+ +

Qui abbiamo tirato fuori l'attributo src dal tag <video> e abbiamo invece incluso elementi {{htmlelement("source")}} che puntano ciascuno a una risorsa. In questo caso il browser cercherà tra gli elementi <source> e riprodurrà il primo per il quale ha il codec. Includere i formati WebM e MP4 dovrebbe essere sufficiente a riprodurre il tuo video sulla maggioranza delle piattaforme e dei browser di oggi.

+ +

Ogni elemento <source> ha un attributo type; è opzionale, ma è consigliato metterlo — contiene i {{glossary("MIME type","MIME types")}} dei file video e i browser possono leggerli e scartare immediatamente i formati che non capiscono. Se non viene messo, i browser dovranno caricare i file e provare a riprodurli fino a che ne troveranno uno che funziona, usando molto più tempo e risorse.

+ +
+

Nota: il nostro articolo sui formati media supportati contiene alcuni comuni {{glossary("MIME type","MIME types")}}.

+
+ +

Altre caratteristiche dell'elemento <video>

+ +

Ci sono numerose altre funzionalità che possono essere incluse in un video HTML5. Dai un occhiata al nostro terzo esempio:

+ +
<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>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+
+ +

Questo ci darà un output simile a questo:

+ +

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!Le nuove funzionalità sono:

+ +
+
{{htmlattrxref("width","video")}} e {{htmlattrxref("height","video")}}
+
Puoi controllare la dimensione del video sia con questi attributi che con i {{Glossary("CSS")}}. In entrambi i casi i video mantengono il loro rapporto larghezza-altezza nativo, conosciuto come aspect ratio. Se il rapporto d'aspetto non è mantenuto dalle dimensioni impostate da te, il video sarà ridimensionato fino alla dimensione orizzontale e lo spazio non occupato verticalmente verrà riempito, di default, con uno sfondo colorato.
+
{{htmlattrxref("autoplay","video")}}
+
Questo attributo fa partire l'audio o il video immediatamente, durante il caricamento della pagina. Ti suggeriamo di non usare l'autoplay nel tuo sito, perché gli utenti possono trovarlo molto fastidioso.
+
{{htmlattrxref("loop","video")}}
+
Questo attributo fa ricominciare il video (o l'audio) nuovamente, ogni volta che finisce. Anche questo può essere fastidioso, quindi usalo solo se necessario.
+
{{htmlattrxref("muted","video")}}
+
Questo attributo fa si che il video parta con l'audio disattivato per default.
+
{{htmlattrxref("poster","video")}}
+
Questo attributo ha per valore l'URL di una immagine che sarà mostrata prima dell'avvio del video. Si suppone sia usata come schermata di lancio, promozionale.
+
+ +

Puoi trovare gli esempi sopra su play live on Github (also see the source code). Nota che non abbiamo incluso l'attributo autoplay nella versione live — se il video parte appena la pagina viene caricata, non potrai vedere il poster!

+ +

L'elemento <audio>

+ +

L'elemento {{htmlelement("audio")}} funziona esattamente come l'elemento {{htmlelement("video")}}, con poche minime differenze illustrate qui sotto. Un esempio tipico potrebbe apparire così:

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
+ +

Ciò produce qualcosa del genere, in un browser:

+ +

A simple audio player with a play button, timer, volume control, and progress bar

+ +
+

Nota: Puoi riprodurre the audio demo live on Github (also see the audio player source code.)

+
+ +

Questo occupa meno spazio di un player video, perché non c'è la componente visiva — devi solo visualizzare i controlli per l'audio. Altre differenze dall'HTML5 video sono queste:

+ + + +

A parte ciò,  <audio> supporta tutte le caratteristiche di <video> — puoi vedere la precedente sezione per avere informazioni a riguardo, se non l'hai ancora vista.

+ +

Mostrare le traccie testuali (sottotitoli) dei video

+ +

Adesso discuteremo un concetto leggermente più avanzato, che è molto utile conoscere. Molta gente non può o non vuole ascoltare il contenuto audio del web, almeno certe volte. Per esempio:

+ + + +

Non sarebbe bello poter fornire a queste persone una trascrizione del testo enunciato nel video/audio? Bene, grazie all'HTML5 si può; con il formato WebVTT e l'elemento {{htmlelement("track")}}.

+ +
+

Nota: "Transcribe (trascrivere)" e "transcript (trascrizione)" significa creare un testo scritto che riproduce le parole come sono pronunciate.

+
+ +

WebVTT è un formato  per scrivere file di testo contenenti molteplici stringhe di testo insieme a metadati come il tempo a cui vuoi che ogni stringa sia mostrata e limitate informazioni relative allo stile e alla opsizione. Queste stringhe di testo sono chiamate cues (battute), e se ne possono visualizzare diversi tipi che hanno scopi diversi; le più comuni sono:

+ +
+
subtitles
+
Traduzioni di materiale straniero, per chi non capisce la lingua
+
captions
+
trascrizioni sincronizzate di dialoghi o descrizioni di suoni significativi, per permettere a chi non può sentire l'audio di capire cosa sta succedendo.
+
timed descriptions
+
testo che deve essere convertito in audio, per essere disponibile a chi ha disabilità visive.
+
+ +

Un tipico file WebVTT appare così:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+  ...
+
+ +

Per visualizzarlo insieme al riproduttore di media HTML, devi:

+ +
    +
  1. salvarlo come file .vtt in un posto adatto
    2. +
  2. collegare il file .vttcon l'elemento {{htmlelement("track")}}. Questo elemento <track> deve essere annidato dentro <audio> o <video>, ma dopo tutti gli elementi <source>. Usa l'attributo {{htmlattrxref("kind","track")}} per specificare se le battute sono subtitles, captions, o descriptions. Inoltre, usa l'attributo {{htmlattrxref("srclang","track")}} per dire al browser in quale lingua sono scritti i sottotitoli.
    3. +
+ +

Ecco un esempio:

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

Ciò produrrà un video coi sottotitoli visualizzati più o meno così:

+ +

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

+ +

Per avere più dettagli, leggi Adding captions and subtitles to HTML5 video. Puoi trovare l'esempio sviluppato in questo articolo qui: find the example, su Github, scritto da Ian Devlin (guarda anche il codice sorgente). Questo esempio usa alcuni JavaScript per permettere agli utenti di scegliere tra differenti sottotitoli. Nota che per attivare i sottotitoli, devi premere il bottone "CC" e selezionare un'opzione — English, Deutch, o Español. 

+ +
+

Nota: le "Text tracks" ti aiutano anche con la {{glossary("SEO")}}, perché i motori di ricerca brillano particolarmente coi testi.  I sottotitoli (Text tracks/traccie di testo) permettono ai motori di ricerca, persino di linkare direttamente una certa parte del video.

+
+ +

Active learning: Includere un proprio audio o video

+ +

Per questo apprendimento attivo, ci piacerebbe che tu andassi fuori a registrare alcuni video tuoi — molti telefoni, oggi, consentono di registrare audio e video molto facilmente e se riesci a trasferirli sul tuo computer, li puoi usare. Potresti dover fare alcune conversioni per ottenere i formati WebM o MP4, per i video, oppure MP3 o Ogg, per l'audio, ma ci sono molti programmi che permettono di farlo senza problemi, come Miro Video Converter e Audacity. Ci piacerebbe che facessi un tentativo!

+ +

Se non sai generare acun video o audio, allora puoi usare i nostri campioni di file video e audio per portare a termine l'esercizio. Puoi anche usare i campioni di codice come riferimento.

+ +

Ci piacerebbe che:

+ +
    +
  1. salvassi i tuoi file audio e video in una nuova directory sul tuo computer,
    2. +
  2. creassi un nuovo file index.html nella stessa directory,
    3. +
  3. aggiungessi gli elementi <audio> e <video> alla pagina facendogli mostrare i controlli di default del browser,
    4. +
  4. dessi a entrambi degli elementi <source> così che il browser trovi il formato che supportano meglio e lo caricassero; ciò include l'uso dell'attributo type,
    5. +
  5. dessi all'elemento <video> un poster da visualizzare prima che il video venga avviato. Divertiti a creare il tuo personale poster disegnato.
    6. +
+ +

Per raggiungere dei bonus, puoi provare a cercare text tracks (sottotitoli) e studiare come aggiungere qualche trascrizione al tuo video.

+ +

Conclusioni

+ +

Questo è quanto. Speriamo tu ti sia divertito/a a giocare con contenuti video e audio! Nel prossimo articolo vedremo altri modi per inserire contenuti nelle pagine web, usando tecnologie come gli {{htmlelement("iframe")}} e gli {{htmlelement("object")}}.

+ +

Vedi anche

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

+ +
+
+ + diff --git a/files/it/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/it/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..5015ad5516 --- /dev/null +++ b/files/it/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -0,0 +1,352 @@ +--- +title: Immagini in HTML +slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+ +

All'inizio, il Web era fatto di solo testo ed era piuttosto noioso. Fortunatamente, non è passato molto prima che venisse aggiunta la possibilità di integrare immagini (e altri tipi di contenuto più interessanti) nelle pagine web. Ci sono altri tipi di contenuti multimediali da considerare, ma è logico cominciare con l'elemento {{htmlelement("img")}}, usato per introdurre una singola immagine. In questo articolo vedremo in profondità come usarlo, le nozioni fondamentali, come commentarlo con il titolo usando l'elemento {{htmlelement("figure")}} e come si collega alle immagini di background coi CSS.

+ + + + + + + + + + + + +
Prerequisiti:Alfabetizzazione di base sui computer, software basilare installato, conoscenze di base su gestione dei file, familiarità con i fondamenti di HTML (come trattati in Cominciare con l'HTML.)
Obbiettivi:Imparare ad introdurre semplici immagini in HTML, commentarle con i titoli e come collegarle alle immagini di background coi CSS.
+ +

Come facciamo a mettere un'immagine in una pagina web?

+ +

Per mettere una semplice immagine in una pagina web, usiamo l'elemento {{htmlelement("img")}}. Si tratta di un elemento vuoto (significa che non ha un contenuto testuale ne un tag di chiusura) che richiede un attributo per poter funzionare — src (pronounciato sarc, a volte chiamato col suo nome intero source). L'attributo src contiene un percorso (path) che punta all'immagine che si vuole mettere nella pagina, che può essere un URL relativo o assoluto; nello stesso modo in cui il valore dell'attributo href dell'elemento {{htmlelement("a")}} punta alla risorsa da linkare (si dovrebbe leggere A quick primer on URLs and paths per rinfrescarsi la memoria prima di continuare).

+ +

Quindi, per esempio, se l'immagine è chiamata dinosaur.jpg ed è collocata nella stessa directory della pagina HTML, la si può inserire così:

+ +
<img src="dinosaur.jpg">
+ +

Se l'immagine si trova in una sottodirectory images della directory in cui si trova la pagina HTML (che è la soluzione raccomandata da Google per scopi di indicizzazione e {{glossary("SEO")}}), allora si può fare così:

+ +
<img src="images/dinosaur.jpg">
+ +

E così via.

+ +
+

Nota: I motori di ricerca leggono anche il nome del file dell'immagine e ne tengono conto per la SEO — si dovrebbe perciò dare al file un nome descrittivo ("dinosaur.jpg" è meglio di "img835.png").

+
+ +

Si potrebbe inserire l'immagine usando l'URL assoluto, per esempio:

+ +
<img src="https://www.example.com/images/dinosaur.jpg">
+ +

Ma ciò è inutile, poiché fa fare al browser più lavoro, ricavando nuovamente l'indirizzo IP daccapo dal server DNS quando, quasi sempre, le immagini saranno salvate sullo stesso server web dell'HTML.

+ +
+

Attenzione: la maggior parte delle immagini è coperta da copyright. Non si deve mostrare un'immagine nel proprio sito, a meno che 1) si sia proprietari dell'immagine 2) si sia ricevuto esplicito permesso scritto dal proprietario dell'immagine, o 3) si abbia prova che l'immagine è di pubblico dominio. Le violazioni al copyright sono illegali ed immorali.

+ +

Inoltre, non si deve mai far puntare l'attributo src ad una immagine ospitata sul sito di qualcun altro senza avere il permesso: questo comportamento è chiamato "hotlinking" — nuovamente, rubare la larghezza di banda di qualcun altro è illegale e sbagliato (in più rallenta la tua pagina e non si ha il controllo sull'immagine, che potrebbe venir rimossa o sostituita con qualcosa di inappropriato).

+
+ +

Il codice riportato sopra dovrebbe dare il seguente risultato:

+ +

A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

+ +
+

Nota: elementi come {{htmlelement("img")}} e {{htmlelement("video")}} sono a volte indicati come replaced elements (elementi sostituiti), perché il contenuto dell'elemento e la dimensione sono determinati da una risorsa esterna (file immagine o video) e non dal contenuto dell'elemento stesso.

+
+ +
+

Nota: si possono trovare gli esempi di questa sezione in running on Github (guarda anche il codice sorgente.)

+
+ +

Testo alternativo

+ +

Il prossimo atrtibuto che guarderemo è alt — il suo valore si suppone che sia una descrizione dell'immagine in forma di testo, che possa essere usata in situazioni nelle quali l'immagine non può essere vista o mostrata. Per esempio, il nostro codice potrebbe essere modificato così:

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth">
+ +

Il modo più semplice per testare il funzionamento di questo attributo è di scrivere male il nome del file nell'attributo src (ad esempio dinosooor.jpg); in questo caso il browser non mostrerà l'immagine perché non la troverà e al suo posto mostrerà il testo alternativo.

+ +

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

+ +

Perciò, perché mai dovresti visualizzare o aver bisogno del testo alternativo? Può essere utile in numerose situazioni:

+ + + +

Cosa si dovrebbe scrivere, esattamente, come valore dell'attributo alt? DIpende dal motivo per cui l'immagine si trova li; in altre parole: cosa si perde se l'immagine non viene vista?

+ + + +

La chiave è consentire una esperienza proficua anche quando non si può fruire delle immagini, così che gli utenti non perdano alcun contenuto. Provate a disattivare le immagini nel browser e a vedere qual è il risultato; ci si renderà subito conto di quanto inutili siano degli alt text come "logo" o "il mio posto preferito" quando le immagini non sono visibili:

+ +
+

Nota: La WebAIM's Alternative text guide fornisce più dettagli e se si vogliono più informazioni è sicuramente una buona lettura.

+
+ +

Larghezza e altezza

+ +

Si possono usare gli attributi width e height per specificare la larghezza e l'altezza dell'immagine (si possono ricavare le misure in diversi modi: per esempio su un Mac si può usare la combinazione di tasti Cmd + I per ottenere le informazioni sull'immagine). Tornando all'esempio, si può fare così:

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

In circostanze normali ciò non produce differenze nella visualizzazione, ma se l'immagine non dovesse essere visualizzata (per esempio si è appena aperta la pagina e l'immagine non è ancora stata visualizzata) si noterà che il browser riserva dello spazio per farvi apparire l'immagine:

+ +

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

+ +

È una buona cosa da fare — produce un più rapido e fluido caricamento della pagina.

+ +

Non si dovrebbe alterare la dimensione dell'immagine per mezzo degli attributi HTML — se si imposta una dimensione troppo grande si otterrà un'immagine sgranata, sfocata; se la si imposta più piccola vuol dire che si spreca banda per far scaricare un'immagine più grande di ciò di cui abbiamo bisogno. Se non si mantiene il corretto rapporto tra le dimensioni (aspect ratio) l'immagine risulterà distorta. Si dovrebbe usare un editor di immagini per ridimensionare l'immagine secondo le proprie necessità, prima di metterla su internet.

+ +
+

Nota: se si ha la necessità di alterare le dimensioni dell'immagine, lo si dovrebbe fare coi CSS piuttosto che con l'HTML.

+
+ +

Titoli delle immagini

+ +

Come per i link, si può aggiungere un attributo title per fornire ulteriori informazioni di supporto. Nell'esempio, possiamo fare così:

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

Ciò produce un tooltip, proprio come accade per i "title" dei link.

+ +

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

+ +

I title delle immagini non sono essenziali per aggiungere qualcosa di significativo e spesso è meglio aggiungere queste informazioni di supporto nel testo principale dell'articolo, piuttosto che attaccarle all'immagine. Sono tuttavia utili in alcune circostanze; per esempio in una galleria di immagini, dove non si ha lo spazio per le didascalie.

+ +

Apprendimento attivo: inserire un'immagine

+ +

Ok, adesso è il tuo turno! In questa sezione active learning ci piacerebbe fare un semplice esercizio. Sei stato istruito su un fondamentale elemento {{htmlelement("img")}}; ci piacerebbe che inserissi l'immagine reperibile al seguente URL:

+ +

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

+ +

Si, prima abbiamo detto di non fare mai degli "hotlink" a immagini su altri server, ma questo è solo a scopo dimostrativo — ti assolveremo, per questa volta.

+ +

Ci piacerebbe anche che:

+ + + +

Se fai un errore, puoi sempre resettare con l'apposito bottone. Se sei proprio bloccato, premi il bottone Show solution .

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Aggiungere note alle immagini (con figures e figure captions)

+ +

Parlando di didascalie, ci sono molti modi per aggiungerle ad una immagine: per esempio non c'è niente ad impedirti di fare così:

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

Questo è ok — produce l'effetto voluto ed è facilmente modificabile con i CSS; ma c'è un problema — non c'è niente che colleghi semanticamente l'immagine alla sua didascalia e ciò può creare problemi agli screen readers; per esempio, quando hai 50 immagini e 50 didascalie, cosa collega una all'altra?

+ +

Una soluzione migliore è usare gli elementi dell'HTML5 {{htmlelement("figure")}} e {{htmlelement("figcaption")}} che sono appositamente stati creati per questa ragione: fornire un contenitore semantico per le immagini, che colleghi chiaramente ogni immagine con la sua didascalia; il nostro esempio può essere riscritto così:

+ +
<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'elemento {{htmlelement("figcaption")}} dice al browser e alle tecnologie per l'accessibilità (assistive technology) che la didascalia descrive il restante contenuto dell'elemento {{htmlelement("figure")}}.

+ +
+

Nota: dal punto di vista dell'accessibilità, le didascalie e l'{{htmlattrxref('alt','img')}} text hanno ruoli distinti. Le didascalie beneficiano anche coloro che possono vedere l'immagine, mentre il testo alternativo ({{htmlattrxref('alt','img')}} text) fornisce le stesse funzionalità di una immagine che però, manca. Perciò captions e alt text non dovrebbero dire la stessa cosa, perché quando l'immagine manca, appaiono entrambe. Provate a disattivare le immagini nel browser e a vedere l'effetto che fa.

+
+ +

Notate che una "figure" non deve necessariamente essere un'immagine — una figure è una unità indipendente di contenuto che:

+ + + +

Una figure potrebbe essere costituita da diverse immagini, un frammento di codice, audio o video, equazioni, una tabella o altro.

+ +

Active learning: creare una figure

+ +

In questa sezione di apprendimento attivo, ci piacerebbe che prendessi il codice della precedente sezione active learning e lo trasformassi in una figure:

+ + + +

Se fai un errore puoi resettare con l'apposito bottone; se sei proprio bloccato premi il pulsante Show solution.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

+ +

CSS e immagini di background

+ +

Puoi anche usare i CSS per inserire immagini nelle pagine web (e anche i JavaScript, ma questa è tutta un'altra storia). Le proprietà dei CSS {{cssxref("background-image")}} — e le altre proprietà background-* — sono usate per controllare il posizionamento delle immagini di sfondo (background). Per esempio, per mettere un'immagine di sfondo ad ogni paragrafo di una pagina, si può fare così:

+ +
p {
+  background-image: url("images/dinosaur.jpg");
+}
+ +

Le immagini risultanti sono presumibilmente più facili da posizionare e controllare delle immagini HTML, quindi perché complicarsi la vita con le immagini HTML? Come suggerito precedentemente, le immagini introdotte con i CSS hanno solo scopo decorativo — se vuoi aggiungere qualcosa di carino alla tua pagina per migliorare l'effetto visivo, va bene; ma queste immagini non hanno alcun significato semantico — non possonoavere alcun testo equivalente, sono invisibili per gli screen readers, etc. Per questo, servono le immagini HTML.

+ +

Quindi, se una immagine ha un contenuto significativo, si dovrebbe inserirla tramite l'HTML; se è puramente decorativa, lo si dovrebbe fare tramite i CSS.

+ +
+

Nota: imparerai molto di più riguardo a CSS background images nel nostro CSS topic.

+
+ +

Conclusioni

+ +

Per ora è tutto — abbiamo trattato le immagini e le didascalie nei dettagli. Nel prossimo articolo cambieremo marcia e vevremo come usare l'HTML per includere video e audio nelle pagine web.

+ +

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

diff --git a/files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html b/files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html new file mode 100644 index 0000000000..cc3dbd7892 --- /dev/null +++ b/files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html @@ -0,0 +1,241 @@ +--- +title: Immagini reattive +slug: Learn/HTML/Multimedia_and_embedding/immagini_reattive +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +
{{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")}}
+ +
+

In questo articolo impareremo il concetto di "immagini reattive" (responsive images) — immagini che funzionano correttamente su dispositivi con monitor di dimensioni e risoluzioni  anche molto diverse — e vedremo quali strumenti l'HTML ci mette a disposizione per implementarle. Le immagini reattive sono solo una parte della progettazione di un web reattivo (responsive web design), e pongono delle buone basi per un argomento del quale si imparerà molto di più in un modulo seguente sui CSS.

+
+ + + + + + + + + + + + +
Prerequisiti:Dovresti già conoscere basics of HTML e come aggiungere immagini a una pagina web.
Obiettivi:Imparare ad usare caratteristiche quali l'attributo {{htmlattrxref("srcset", "img")}} e l'elemento {{htmlelement("picture")}} per aggiungere immagini reattive ai siti web, usando diverse soluzioni.
+ +

Perché le immagini reattive?

+ +

Quale problema stiamo cercando di risolvere con le immagini reattive? Esaminiamo uno scenario tipico. Un sito web, probabilmente, avrà una immagine di testa (header image) per piacere ai visitatori, più, forse, altre immagini più giù nel contenuto. Probabilmente si vorrà che l'immagine di testa occupi l'intera larghezza della pagina e che le immagini nel contenuto riempiano le colonne. Vediamo un esempio:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

+ +

Ciò funziona bene su un dispositivo con uno schermo ampio, come un laptop o un desktop (you can see the example live and find the source code on Github). Non discuteremo molto dei CSS, salvo che per dire questo:

+ + + +

Così va bene, ma il problema arriva quando cominci a vedere il sito su un dispositivo con uno schermo stretto — l'immagine di testata si vede bene, ma inizia a prendere gran parte dell'altezza dello schermo per un dispositivo portatile; d'altra parte la prima immagine del contenuto si vede malissimo - a questa dimensione si possono appena vedere le persone.

+ +

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

+ +

Quando il sito è visualizzato su uno schermo stretto, sarebbe molto meglio mostrare una versione ritagliata dell'immagine che contenga i dettagli importanti dello scatto e magari una via di mezzo tra le due foto quando lo schermo è di media dimensione, come per i tablet. - Questa situazione è nota come art direction problem.

+ +

Inoltre, non c'è bisogno di includere immagini così grandi se la pagina vien vista sui piccoli schermi dei portatili. - Questa è nota come resolution switching problem. Una immagine raster è definita da un certo numero di pixel di larghezza e da un certo numero in altezza; come abbiamo visto parlando di vector graphics, una immagine raster inizia a sgranarsi e a sfocarsi se è mostrata più grande della sua dimensione originale (ciò non accade per le immagini vettoriali), mentre se la visualizziamo più piccola stiamo sprecando banda per far scaricare un file immagine più pesante del necessario - specialmente gli utenti di dispositivi portatili non vogliono che questo accada dal momento che una piccola immagine farebbe a caso loro. Una soluzione ideale la si avrebbe se si avessero diverse immagini, con diverse dimensioni e risoluzioni, da caricare sui diversi dispositivi.

+ +

A rendere le cose ancora più complicate, hanno schermi ad alta risoluzione che necessitano di immagini più grandi di quello che ci si potrebbe aspettare per apparire al meglio. Questo problema è essenzialmente analogo, ma in un contesto leggermente diverso.

+ +

Si potrebbe pensare che le immagini vettoriali possano risolvere questi problemi e in certa misura lo fanno: sono leggere, vengono scalate (ingrandite in scala) bene e dove possibile le si dovrebbe usare. Tuttavia non sono adatte a qualsiasi tipo di immagine: mentre sono ottime per grafiche semplici, cominciano a diventare molto complesse per creare immagini con il livello di dettaglio che si vorrebbe per una foto. Le immagini raster dei formati come ad es. JPEG sono più adatte ai tipi di immagini che abbiamo visto negli esempi precedenti.

+ +

Questo tipo di problemi non esisteva quando il web era agli esordi, nei primi anni 90: allora, gli unici dispositivi esistenti per navigare il web erano i desktop e i laptop, così i progettisti di browser e gli scrittori non dovevano pensare alle soluzioni. Le tecnologie per le immagini reattive (Responsive image technologies) sono state aggiunte di recente per risolvere i problemi accennati sopra, permettendoti di fornire al browser diversi file immagine, che contengono le stesse immagini ma ad una risoluzione diversa, con diverso numero di pixel (resolution switching), o immagini diverse adatte a spazi di allocazione di dimensione diversa (art direction.)

+ +
+

Nota: Le nuove caratteristiche trattate in questo articolo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — sono tutte supportate nelle versioni più aggiornate dei browser per desktop e per dispositivi mobili (incluso il browser Microsoft Edge, non da Internet Explorer.) 

+
+ +

Come creare immagini reattive?

+ +

In questa sezione, esamineremo i 2 problemi illustrati e mostreremo come risolverli usando le caratteristiche dell'HTML per le immagini reattive. Dovreste notare che ci concentreremo sull'elemento {{htmlelement("img")}} come trattato nell'esempio precedente — l'immagine nella header è solo decorativa e perciò è aggiunta usando i CSS. I CSS hanno probabilmente migliori strumenti per il responsive design dell'HTML; ne parleremo in un successivo modulo sui CSS.

+ +

Cambiare risoluzione: dimensioni differenti

+ +

Qual è il problema che vogliamo risolvere cambiando la risoluzione? Vogliamo mostrare una immagine identica, ma più grande o più piccola in funzione del dispositivo — è la situazione che abbiamo con la seconda immagine del nostro esempio. L'elemento standard {{htmlelement("img")}} tradizionalmente, permette solo di puntare a un singolo file sorgente.

+ +
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

Tuttavia, possiamo usare 2 nuovi attributi — {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}} — per fornire molte sorgenti di immagine addizionali insieme a dei suggerimenti per aiutare il browser a prelevare quella giusta. Si può vedere un esempio nel nostro reponsive.html su Github (vedere anche il codice sorgente):

+ +
<img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

Gli attributi srcset e sizes sembrano complicati da capire, ma non lo sono poi tanto se li si formatta come mostrato qui sopra: con una parte del valore dell'attributo per riga. Ogni valore contiene una lista  separata da virgole e ogni parte della lista è fatta di 3 sottoparti. Esaminiamo il contenuto di ognuna:

+ +

srcset definisce il set di immagini tra le quali vogliamo che il browser scelga e quali dimensioni hanno. Prima di ogni virgola, scriviamo:

+ +
    +
  1. un nome di file immagine (elva-fairy-480w.jpg.)
    2. +
  2. uno spazio
    3. +
  3. la dimensione della larghezza dell'immagine in pixels (480w) — notate l'uso dell'unità w e non px come ci si potrebbe aspettare. Si tratta della reale dimensione dell'immagine, che si può trovare esaminando il file immagine sul computer (per esempio in un Mac si può selezionare l'immagine in  Finder, e premere Cmd + I per aprire la scheramta di informazioni).
    4. +
+ +

sizes definisce un set di condizioni (ad es. la larghezza dello schermo) e indica quale dimensione di immagine sarebbe meglio scegliere quando si verificano quelle condizioni — questi sono i suggerimenti di cui si parlava prima. In questo caso, prima di ogni virgola scriviamo:

+ +
    +
  1. una media condition ((max-width:480px)) — imparerete di più a questo riguardo nella sezione sui CSS, ma per adesso diciamo solo che la "media condition" descrive un possibile stato dello schermo. In questo caso, si stà dicendo: "quando la larghezza visualizzata è 480 pixels o meno".
    2. +
  2. uno spazio
    3. +
  3. La larghezza della posizione che l'immagine occuperà quando si realizza la condizione (440px.)
    4. +
+ +
+

Nota: Per la larghezza della posizione, si può fornire una misura assoluta (px, em) o una relativa (come una percentuale). Potreste aver notato che l'ultima larghezza non ha media condition — questa è perciò la condizione di default che deve essere scelta quando nessuna delle condizioni sui dispositivi è vera. Il browser ignora tutto ciò che segue la prima condizione verificata, perciò bisogna fare attenzione all'ordine delle condizioni.

+
+ +

Quindi, definiti questi attributi, il browser farà:

+ +
    +
  1. verifica della larghezza del suo dispositivo
    2. +
  2. calcolo di quale sia la prima condizione tra la lista dell'atributo sizes ad essere vera
    3. +
  3. Look at the slot size given to that media query.
    4. +
  4. Caricamento dell'immagine elencata nell'attributo srcset che maggiormente si avvicina alla dimensione della posizione (slot) scelta.
    5. +
+ +

Fatto! Così a questo punto, se un browser col supporto con una larghezza della viewport di 480px carica la pagina, la (max-width: 480px) media condition sarà vera, perciò verrà scelta la slot da 440px, quindi sarà caricata la elva-fairy-480w.jpg, poiché la sua larghezza (480w) è la più vicina ai 440px. L'immagine da 800px occupa 128KB su disco, mentre la versione da 480px solo 63KB — un risparmio di 65KB. Adesso immagina se fosse una pagina con molte immagini. Usando questa tecnica si può far risparmiare agli utenti mobile un sacco di  ampiezza di banda.

+ +

I browser più vecchi che non supportano queste caratteristiche, semplicemente le ignoreranno e andranno avanti a caricare l'immagine indicata dall'attributo {{htmlattrxref("src", "img")}} come al solito.

+ +
+

Note: nell'elemento {{htmlelement("head")}} del documento si troverà la linea <meta name="viewport" content="width=device-width">: questo obbliga i browser dei dispositivi mobili ad adottare la loro reale larghezza viewport per caricare le pagine web (alcuni browser mentono riguardo alla larghezza e caricano invece pagine a una risoluzione maggiore e poi la riducono, che non è molto utile con una progettazione o una immagine reattiva. Spiegheremo di più a questo proposito in un modulo successivo).

+
+ +

Utili strumenti di sviluppo

+ +

Ci sono alcuni utili developer tools nei browser, per aiutare a calcolare le necessarie larghezze slot, ecc. che si ha bisogno di usare. Mentre le stavo calcolando, prima di tutto ho caricato la versione non reattiva dell'esempio (not-responsive.html), poi sono andato in Responsive Design View (Tools > Web Developer > Responsive Design View - In Firefox, dal sandwich menù -> Sviluppo -> Modalità visualizzazione flessibile), che ti permette di guardare il layout della tua pagina come se fosse visto attraverso dispositivi con diversa dimensione dello schermo.

+ +

Ho impostato la larghezza viewport a 320px e poi a 480px; per ciascuna sono andato nel DOM Inspector, ho cliccato sull'elemento {{htmlelement("img")}} a cui ero interessato e ho guardato la dimensione nella scheda vista Box Model sulla destra del monitor. Questo dovrebbe dare la larghezza dell'immagine di cui si ha bisogno.

+ +

A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.

+ +

Dopo, si può controllare se srcset sta funzionando impostando la larghezza viewport come si desidera (impostatela stretta, per esempio), aprendo il Network Inspector (Tools > Web Developer > Network), poi ricaricando la pagina. Questo dovrebbe dare una lista di risorse che sono state scaricate per per mostrare la pagina e quindi si potrà verificare quale file è stato scelto e scaricato.

+ +

a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images

+ +

Modificare la risoluzione: stessa dimensione, diverse risoluzioni

+ +

Se stai supportando diverse risoluzioni, ma tutti vedono la tua immagine alla stessa dimensione reale sullo schermo, puoi permettere al browser di scegliere una immagine di risoluzione appropriata usando l'attributo srcset con il descrittore x (x-descriptors) e senza sizes — una sintassi piuttosto semplice! Puoi trovare un esempio di come appare in srcset-resolutions.html (vedere anche il codice sorgente):

+ +
<img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
+
+ +

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageIn questo esempio è stato applicato il seguente CSS all'immagine per farle avere una larghezza di 320 pixels sullo schermo (also called CSS pixels):

+ +
img {
+  width: 320px;
+}
+ +

In questo caso sizes non è necessario — il browser calcola qual è la risoluzione del display su cui è mostrato e fornisce l'immagine più appropriata tra quelle elencate in srcset. Così se il dispositivo che accede alla pagina ha un display standard a bassa risoluzione, with one device pixel representing each CSS pixel, viene caricata l'immagine elva-fairy-320w.jpg (il descrittore 1x è implicito e non c'è bisogno di specificarlo.) Se il dispositivo ha una alta risoluzione di 2 pixel per ogni pixel CSS o più, viene caricata l'immagine elva-fairy-640w.jpg. L'immagine a 640px è di 93KB, mentre quella a 320px è di soli 39KB.

+ +

Art direction

+ +

To recap, the art direction problem involves wanting to change the image displayed to suit different image display sizes. For example, if a large landscape shot with a person in the middle is shown on a website when viewed on a desktop browser, then shrunk down when the website is viewed on a mobile browser, it will look bad as the person will be really tiny and hard to see. It would probably be better to show a smaller, portrait image on mobile, which shows the person zoomed in. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.

+ +

Returning to our original not-responsive.html example, we have an image that badly needs art direction:

+ +
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+ +

Let's fix this, with {{htmlelement("picture")}}! Like <video> and <audio>, The <picture> element is a wrapper containing several {{htmlelement("source")}} elements that provide several different sources for the browser to choose between, followed by the all-important {{htmlelement("img")}} element. the code in responsive.html looks like so:

+ +
<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 standing up holding his daughter Elva">
+</picture>
+
+ + + +

This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

+ +
+

Note: You should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute.

+
+ +

Why can't we just do this using CSS or JavaScript?

+ +

When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which on average has shaved 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like srcset. You couldn't for example load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript and dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.

+ + + +

Use modern image formats boldly

+ +

There are several exciting new image formats (such as WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.

+ +

<picture> lets us continue catering to older browsers. You can supply MIME types inside type attributes so the browser can immediately reject unsupported file types:

+ +
<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
+</picture>
+
+ + + +

Active learning: Implementing your own responsive images

+ +

For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <picture>, and a resolution switching example that uses srcset.

+ +
    +
  1. Write some simple HTML to contain your code (use not-responsive.html as a starting point, if you like)
    2. +
  2. Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this.)
    3. +
  3. Use the <picture> element to implement an art direction picture switcher!
    4. +
  4. Create multiple image files of different sizes, each showing the same picture.
    5. +
  5. Use srcset/size to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.
    6. +
+ +
+

Note: Use the browser devtools to help work out what sizes you need, as mentioned above.

+
+ +

Summary

+ +

That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:

+ + + +

This also draws to a close the entire Multimedia and embedding module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun.

+ +

See also

+ + + +
{{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")}}
diff --git a/files/it/learn/html/multimedia_and_embedding/index.html b/files/it/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..8e1f49dad8 --- /dev/null +++ b/files/it/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,71 @@ +--- +title: Multimedialità e incorporamento +slug: Learn/HTML/Multimedia_and_embedding +tags: + - Assessment + - Audio + - Beginner + - CodingScripting + - Flash + - Guide + - HTML + - Images + - Landing + - Learn + - NeedsTranslation + - SVG + - TopicStub + - Video + - iframes + - imagemaps + - responsive +translation_of: Learn/HTML/Multimedia_and_embedding +--- +

{{LearnSidebar}}

+ +

Finora, in questo corso abbiamo visto molto testo. Molto. Testo. Ma il Web sarebbe veramente noisoso con nient'altro che il testo, quindi cominciamo a vedere come rendere il Web animato, con contenuti più interessanti! Questo modulo esplora come usare l'HTML per inserire la multimedialità nelle tue pagine web, inclusi i differenti modi di aggiunta di immagini, e come incorporare video, audio e persino altre intere pagine web.

+ +

Prerequisiti

+ +

Prima di cominciare questo modulo, dovresti avere una ragionevole conoscenza delle basi dell'HTML, trattate in Introduzione all'HTML. Se non hai esaminato questo modulo (o qualcosa di simile), prima studialo, poi torna qui!

+ +
+

Nota: se stai lavorando su un computer/tablet/altro dispositivo dove non hai la possibilità di creare propri file, potresti provare (la maggior parte degli) esempi di codice in un programma di codifica online come JSBin o Thimble.

+
+ +

Guide

+ +

Questo modulo contiene i seguenti articoli, che ti porteranno attraverso tutti i fondamenti dell'incorporazione della multimedialità nelle pagine web.

+ +
+
Immagini nell'HTML
+
Ci sono altri tipi di multimedialità da considerare, ma è logico cominciare con l'umile elemento {{htmlelement("img")}}, usato per inserire una semplice immagine in una pagina web. In questo articolo vedremo come usarlo in profondità, a cominciare dalle basi, annotandolo con didascalie grazie all'elemento {{htmlelement("figure")}}, e come si relaziona con le immagini di sfondo CSS.
+
Contenuti video e audio
+
In seguito, vedremo come usare gli elemeti HTML5 {{htmlelement("video")}} e {{htmlelement("audio")}} per inserire video e audio nelle nostre pagine, a cominciare dalle basi, fornendo l'accesso a differenti formati di file per differenti browser, aggiungendo didascalie e sottotitoli, e come aggiungere le alternative per browser più vecchi.
+
Da <object> a <iframe> — altre tecnologie di integrazione
+
A questo punto ci piacerebbe fare qualche passo di lato, dando un'occhiata ad una coppia di elementi che ti permettono di integrare un'ampia varietà di tipi di contenuti nella tua pagina web: gli elementi {{htmlelement("iframe")}}, {{htmlelement("embed")}} e {{htmlelement("object")}}. Gli <iframe> servono ad integrare altre pagine web, e gli altri due ti permettono di integrare PDF, SVG e anche Flash — una tecnologia sulla via del disuso, ma che ancora vedi in maniera semi-regolare.
+
Aggiungere grafiche vettoriali al Web
+
Le grafiche vettoriali possono essere molto utili in certe situazioni. A differenza dei regolari formati come PNG/JPG, esse non si distorcono/pixellano quando aumenti lo zoom — possono rimanere armoniose quando scalate. Questo articolo introduce cosa sono le grafiche vettoriali e come includere il popolare formato {{glossary("SVG")}} nelle pagine web.
+
Immagini reattive
+
Con così tanti tipi di dispositivi differenti in grado ora di navigare il Web — dai telefoni mobili ai computer da scrivania — un concetto essenziale per padroneggiare il moderno mondo web è il disegno reattivo (responsive design). Questo si riferisce alla creazione di pagine web che possono automaticamente cambiare le loro caratteristiche per adattarsi a differenti dimensioni dello schermo, risoluzioni, ecc. Questo sarà visto più in dettaglio nel successivo modulo CSS, ma per il momento vedremo gli strumenti a disposizione dell'HTML per creare immagini reattive, incluso l'elemento {{htmlelement("picture")}}.
+
+ +

Valutazioni

+ +

Le seguenti valutazioni testeranno il tuo apprendimento delle basi dell'HTML viste nelle guide qui sopra.

+ +
+
Splash page di Mozilla
+
In questa valutazione, noi testeremo la tua conoscenza di alcune delle tecniche discusse negli articoli di questo modulo, portandoti ad aggiungere alcuni video e immagini alla stravagante splash page tutta riguardo Mozilla!
+
+ +

Vedi anche

+ +
+
Aggiungi una hitmap sulla parte superiore di una immagine
+
Le mappe di immagini forniscono un meccanismo per collegare differenti parti di una immagine a differenti posti (pensa ad una mappa, che ti rimanda ad ulteriori informazioni riguardo ciascun differente Paese quando gli clicchi sopra). Questa tecnica può qualche volta essere utile.
+
Letteratura base sul Web 2
+
+

Un eccellente corso della fondazione Mozilla, che esplora e testa alcune delle capacità trattate nel modulo Multimedialità e incorporamento. Immergiti più in profondità nelle nozioni fondamentali sulla composizione di pagine web, disegno per l'accessibilità, condivisione risorse, uso di media online e lavoro libero.

+
+
diff --git a/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html b/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html new file mode 100644 index 0000000000..9c3f5af2c4 --- /dev/null +++ b/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html @@ -0,0 +1,276 @@ +--- +title: Scrivi una semplice pagina in HTML +slug: Learn/HTML/Scrivi_una_semplice_pagina_in_HTML +tags: + - Guide + - HTML + - Principianti + - Web Development +translation_of: Learn/Getting_started_with_the_web +--- +
+

In questo articolo impareremo come creare una semplice pagina web con il {{Glossary("HTML")}}.

+
+ + + + + + + + + + + + +
Prerequisiti:Hai bisogno di  un editore di testo e di sapere come aprire un file in un browser.
Obiettivo:Creare una pagina web che puoi visualizzare con il browser.
+ +

Sommario

+ +

La semplice pagina web è solo un documento {{Glossary("HTML")}}.Le uniche cose del quale hai bisogno sono un documento HTML valido sul tuo computer e un web browser.Vediamo come usare HTML {{Glossary("Tag","tags")}} e potrai essere in grado di vedere la pagina che hai creato nel browser.

+ +

Apprendimento attivo

+ +

Prima di tutto accertiamoci di avere un editore di testo che sia comodo e un web browser funzionante. Praticamente qualsiasi editore di testo può farlo, ad esempio Notepad in Windows o TextEdit sul Mac, ma assicurati di avere creato un semplice documento di testo (solo caratteri senza alcun supporto di formattazione). Se vuoi usare TextEdit sul MAc scegli "Make Plain Text" dal menu "Format.

+ +

Primo passo: Un file

+ +

una singola pagina web è fatta (almeno) da un file HTML, così inziamo a creare una di quelle che lo comporranno. Apri il tuo editore di testo e crea un nuovo file di testo poi scrivi qualcosa come nell'esempio:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Hi there</title>
+</head>
+<body>
+  This is a page
+  a simple page
+</body>
+</html>
+ +

Se vuoi puoi apportare delle modifiche rispetto all'esempio sentiti libero di aggiungere o cambiare il testo nel body o nel title e poi salva il file. Assicurati in fine di dare un nome al file con estensione ".html". Per esempio, potresti nominarla "my_page.html".

+ +

Adesso dovresti avere un file sul tuo computer che assomiglia a questo esempio nella cartella (lla somiglianza dipende dal tuo sistema opertivo):

+ +

Screenshot of a file explorer with a html file for local test

+ +

Facendo un doppio click sul file si aprirà nel browser,  per aprire il file direttamente sull' editore di testo al fine di modificarlo puoi: fare click con il tasto destro e scegliere di aprire il documento nell'editore di testo; oppure trascinare il documento all'interno dell'editore od aprire il documento scegliendo "Open" dal menu dell'editore "File". La somiglianza all'esempio che vedi sotto dipende dall'editore che utilizzi:

+ +

Screenshot of a file explorer with a html file for local test

+ +

Secondo passo: Un web browser

+ +

All'interno del file explorer (come Windows Explorer, Finder sul Mac, o Files in Ubuntu), trovi il documento che hai appena creato e lo apri con il browser (fai doppio click o lo trascini nell'icona del browser). Adesso il browser mostra il testo dal file HTML che hai creato e il tab mostra il titolo della pagina il tutto potrebbe assomigliare all'esempio che visualizzi sotto ,fermo restando che la visalizzazione cambia a seconda della piattaforma e del browser da te utilizzati:

+ +

Screenshot of a file explorer with a html file for local test

+ +

Come puoi vedere il contenuto del tag body corrisponde al contenuto della pagina e il contenuto del tag title da te scelto è mostrato nel tab, ma le due linee di testo non sono scritte su due differente ma su un'unica linea. Interessante.

+ +

Terzo passo: Sperimenta e impara

+ +

Prova a rimuovere parti dell' HTML e guarda cosa accade. Alcuni cambiamenti ti permetteranno di mostrare la pagina  nel browser ed altri daranno risultati sbagliati.Ciò Accade perchè il browser cerca di compensare alcuni errori comuni.

+ +

La prima cosa da notare è che l'unica cosa che vedi sullo schermo è il testo che non è all'interno delle parentesi angolate (altrimenti conosciute come i simboli di maggiore e minore ma che chiamiamo parentesi angolate quando parliamo di HTML). Ogni cosa all'interno delle parentesi angolate è un{{Glossary("tag")}}, che rappresenta una struttura o scheletro della pagina web.Tutti i contenuti mostrati sono racchiusi tra i tags.

+ +

Il nostro esempio di pagina HTML ha due grandi sezioni: un intestazione contenuta all'interno {{HTMLElement("head")}} elemento blocco "block", ed un corpo, contenuto {{HTMLElement("body")}}. Il corpo contiene il testo mostrato all'interno della pagina web.

+ +

Ogni tag ha un significato specifico e può essere usato di conseguenza. Per esempio {{HTMLElement("title")}} è usato per indicare il titolo della pagina che può differire dal nome del file, nota che anche che i tag possono presentaresi all'interno del contenuto di altri tags. L'{{HTMLElement("title")}} è contenuto all'interno {{HTMLElement("head")}}, per esempio.

+ +

Se vuoi inserire qualcosa come un immagine hai bisogno di aggiungere un tag per l'immagine e la stessa immagine all'interno.Per esempio:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Hi there</title>
+</head>
+<body>
+  This is a page
+  a simple page
+  <img src="unicorn_pic.png" alt="Unicorn picture :)" />
+  now with a unicorn
+</body>
+</html>
+ +

Modifica il file per includere il tag {{HTMLElement("img")}} come questo:

+ +
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
+ +

Può essere inserito in qualsiasi parte {{HTMLElement("body")}} non dimenticare di salvare i cambiamenti apportati alla pagina!

+ +

Poi inserisci un file nominato "unicorn_pic.png" nella stessa cartella del documento HTML.Quando avrai aggiornato la finestra del browser o riaperto il documento, vedrai i cambiamenti di contenuto, completa con unicorno!(non dimenticare di salvare la pagina).

+ +

Original file for the unicorn image

+ +
+

Nota: Puoi prendere una copia dell'immagine dell'unicorno per usarla nei tuoi sperimenti cliccando con il tasto destro sopra l'immagine e scegliendo "Save image As..." dal menu che appare.

+
+ +

I documenti necessari perchè questa pagina funzioni adesso assomigliano a qualcosa di questo genere nel desktop:

+ +

Screenshot of the explorer with 2 files : a html file and a picture file

+ +

Il risultato mostrato nel browser è questo:

+ +

Screenshot for the example with a picture

+ +

Come hai notato il tag{{HTMLElement("img")}} ha {{Glossary("attribute","attributes")}} che dà informazioni addizionali necessarie a costruire l'oggetto richiesto in questo caso il nome del file dell'immagine da mostrare e il testo alternativo qualora l'immagine non possa essere caricata.

+ +

Questo è un esempio di come aggiungere un'immagine alla pagina, ma puoi usare una tecnica similare per aggiungere musica, video e molto altro tutto usando nient'altro che l'HTML.

+ +

Più in profondità

+ +

Questa non è una pagina web molto carina

+ +

Come avrai notato questa pagina non è certo un miracolo di design e bellezza, questo perchè HTML è tutto ciò che riguarda il contenuto e ciò che il contenuto significa (in termini del suo contesto e la relazione tra i blocchi di contenuto), piuttosto che design.

+ +

{{Glossary("CSS")}} ti permette di fare contenuti scintillanti aggiungendo layout, colore, font e così via. Un puro HTML è buono abbastanza per costruire semplici pagine web, ma pagine più complesse (o sebbene semplici con un design accattivante) hanno bisogno del CSS e possibilmente  {{Glossary("JavaScript")}}. HTML costruisce il contenuto, CSS gli stili e JavaScript rende il contenuto dinamico.

+ +

Sperimentiamo un poco con il CSS trasformando il testo contenuto nel tag body da nero a blue:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Hi there</title>
+  <style>
+    body {
+      color: blue;
+    }
+  </style>
+</head>
+  <body>
+    <p>This is a some blue text</p>
+    <img src="unicorn_pic.png" alt="Unicorn picture :)" />
+  </body>
+</html>
+ +

Nota l'aggiunta{{HTMLElement("style")}} alla pagina all'interno{{HTMLElement("head")}}. Questo specifica quale caratteristica CSS sarà da applicare al testo contenuto nel tag body.

+ +

Vuoi il testo sottolineato? prova ad aggiungere la regola "text-decoration: underline;" allo style:

+ +
body {
+  color: blue;
+  text-decoration: underline;
+}
+ +

Vuoi che il tuo testo abbia una misura ben precisa?Prova aggiungendo "font-size: 42px;" come in esempio:

+ +
body {
+  color: blue;
+  text-decoration: underline;
+  font-size: 42px;
+}
+ +

Il risultato finale sarà questo:

+ +
<html>
+<head>
+  <title>Hi there</title>
+  <style>
+  body {
+    color: blue;
+    text-decoration: underline;
+    font-size: 42px;
+  }
+  </style>
+</head>
+<body>
+  <p>This is a blue underlined big text</p>
+  <img src="unicorn_pic.png" alt="Unicorn picture :)" />
+</body>
+</html>
+ +

e se salvi la pagina nel tuo editore e poi riaggiorni il browser la pagina che vedrai sarà la seguente:

+ +

Screenshot of the browser with the page with some CSS

+ +

Andiamo alla seconda pagina

+ +

Quando navighi nel Web spesso incontri {{Glossary("hyperlink","links")}}, il modo più utile per navigare da una pagina all'altra. Dal momento in cui l'HTML si occupa del contenuto e i link sono il modulo del contenuto, puoi creare collegamenti tra le pagine utilizzando soltanto l'HTML.

+ +

Collega due pagine locali

+ +

Per questo esercizio abbiamo bisogno di creare un secondo documento HTML sul computer aggiungiamo un link ad ogni pagina così possiamo passare velocemente avanti e indietro tra esse.

+ +

Nel primo documento possiamo tenere la stessa struttura di prima, la cosa importante è aggiungere un nuovo tag {{HTMLElement("a")}}, così:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Page 1 to ground control</title>
+</head>
+<body>
+  This is page 1.
+  <a href="page2.html" title="to page 2">What is going on on page 2?</a>
+</body>
+</html>
+ +

La seconda pagina avrà un link che ci fa tornare alla prima pagina:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Page 2 :)</title>
+</head>
+<body>
+  This is a page 2.
+  <a href="page1.html" title="to page 1">Want to go back to page 1? Click here</a>
+</body>
+</html>
+ +
+

Nota:Assicurati che il nome del file {{HTMLElement("a")}} tag con attributo href sia lo stesso nome del documento creato nel tuo computer.

+
+ +

Puoi adesso navigare tra i due documenti HTML apri la page 1 nel browser e fai click nel link per aprire la page 2 e viceversa. Puoi inoltre testare il bottone "previous" nel tuo browser esso dovrebbe portarti all'ultima pagina visitata.

+ +

Il documento principale dovrebbe avere i due documenti nella stessa cartella, in questa maniera:

+ +

Screenshot of the file explorer with two HTML documents in one directory/folder

+ +

La Page 1 sarà così visualizzata nel browser:

+ +

Screenshot of a file explorer with a html file for local test

+ +

e la Page 2 sarà così visualizzata nel browser dopo aver fatto click sul link di Page 1:

+ +

Screenshot of the 2nd page of the 2 pages example in the browser

+ +
+

Nota:Il link che torna alla page 1 è violetto perchè il browser "sa"  che in precedenza avevamo visitato la Page 1

+
+ +

Se vuoi puoi fare la prova creando più pagine o passare alla prossima sezione per portare tutto questo al lvello successivo.

+ +

Collegamento ad un altra pagina web

+ +

In questo esercizio aggiungiamo un link al documento HTML così che il lettore possa velocemente prendere alcune pagine utili nel Web. Puoi collegare qualsiasi cosa sia disponibile nel Web pubblico, prova a creare un collegamento con Wikipedia:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>My page</title>
+</head>
+<body>
+  One day,...Unicorns are great...See you.
+  <a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia">Want to go know more about unicorns? Wikipedia is right here</a>
+</body>
+</html>
+ +

Potrebbe più o meno assomigliare a questo nel browser:

+ +

Screenshot of the example page with a link to Wikipedia in the browser

+ +

Passando il puntatore del mouse sopra il link vedrai l'attributo{{htmlattrxref("title")}} mostrato in un tooltip.Questo può essere usato per dare maggiori informazioni sul link così che l'utente possa fare una scelta formazioni tra il cliccare su esso o meno.

+ +
+

Ricorda: Ogni volta che modifichi la pagina non dimenticare di salvare il documento sull'editor e di aggiornare la pagina sul browser così che possa vedere i cambiamenti fatti.

+
+ +

Prossimi passi

+ + diff --git a/files/it/learn/html/tables/index.html b/files/it/learn/html/tables/index.html new file mode 100644 index 0000000000..af7fae7ac0 --- /dev/null +++ b/files/it/learn/html/tables/index.html @@ -0,0 +1,45 @@ +--- +title: HTML Tables +slug: Learn/HTML/Tables +tags: + - Article + - Beginner + - CodingScripting + - Guide + - HTML + - Landing + - Module + - NeedsTranslation + - Tables + - TopicStub +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little CSS for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.

+ +

Prerequisites

+ +

Before starting this module, you should already have covered the basics of HTML — see Introduction to HTML.

+ +
+

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

+
+ +

Guides

+ +

This module contains the following articles:

+ +
+
HTML table basics
+
This article gets you started with HTML tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
+
HTML table advanced features and accessibility
+
In the second article in this module, we look at some more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.
+
+ +

Assessments

+ +
+
Structuring planet data
+
In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table.
+
diff --git a/files/it/learn/index.html b/files/it/learn/index.html new file mode 100644 index 0000000000..c301d38b81 --- /dev/null +++ b/files/it/learn/index.html @@ -0,0 +1,83 @@ +--- +title: Impara il web +slug: Learn +tags: + - Indice(2) + - Principiante + - Web + - imparare +translation_of: Learn +--- +
+

Vuoi creare tuoi siti web e tue applicazioni web? Sei nel posto giusto!

+
+ +

C'è molto da imparare sullo sviluppo e sul web design, ma non preoccuparti. Sia che tu abbia appena cominciato a programmare o che tu voglia diventare un programmatore professionista a tutti gli effetti, siamo qui per aiutarti.

+ +

Come cominciare

+ +

Vogliamo conoscerti meglio. In quale descrizione ti riconosci di più?

+ + + +
+

Nota: In futuro stiamo pensando di pubblicare più strumenti per facilitarti l'apprendimento, per esempio per programmatori professionisti che stanno cercando di imparare tecniche avanzate, sviluppatori che sono nuovi nel mondo del Web, o per persone che vogliono imparare tecniche di design.

+
+ +

{{LearnBox({"title":"Quick learning: Vocabulary"})}}

+ +

Imparare con altre persone

+ +

Se hai una domanda o stai ancora pensando cosa fare, Mozilla è una comunità globale di entusiasti del Web, inclusi mentori e insegnanti che sono lieti di aiutarti. Entra in contatto con loro attraverso WebMaker:

+ + + +

Condividi la conoscenza

+ +

Questa intera Area di Apprendimento è stata costruita attraverso i nostri collaboratori. Abbiamo bisogno di te nella nostra squadra, che tu sia un principiante, un insegnante un esperto sviluppatore web. Se sei interessato, dai un occhio a come puoi aiutare, e ti incoraggiamo di contattarci nella nostra mailing list o nel nostro IRC channel. :)

+ +

Sotto categorie

+ +
    +
  1. Introduzione al web
    2. +
  2. Impara il web
    3. +
  3. Domande frequenti
    4. +
  4. Learn technologies +
      +
    1. HTML
      2. +
    2. CSS
      3. +
    3. JavaScript
      4. +
    4. Python
      5. +
    +
    5. +
  5. Tutorial +
      +
    1. How to build a web site?
      2. +
    2. Information security basics
      3. +
    +
    6. +
  6. Learning resources
    7. +
  7. Getting help +
      +
    1. FAQ
      2. +
    2. Glossary
      3. +
    3. Ask your questions
      4. +
    4. Meet teachers and mentors
      5. +
    +
    8. +
  8. How to contribute
    9. +
diff --git a/files/it/learn/javascript/building_blocks/index.html b/files/it/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..9b7bed94d3 --- /dev/null +++ b/files/it/learn/javascript/building_blocks/index.html @@ -0,0 +1,59 @@ +--- +title: JavaScript building blocks +slug: Learn/JavaScript/Building_blocks +tags: + - Article + - Assessment + - Beginner + - CodingScripting + - Conditionals + - Functions + - Guide + - Introduction + - JavaScript + - Landing + - Loops + - Module + - NeedsTranslation + - TopicStub + - events + - 'l10n:priority' +translation_of: Learn/JavaScript/Building_blocks +--- +
{{LearnSidebar}}
+ +
In questo modulo, continueremo con la copertura di tutte le funzionalità fondamentali di Javascript, rivolgendo la nostra attenzione ai tipi di blocco più comuni come istruzioni condizionali, loop, funzioni ed eventi. Avrai già visto queste cose nel corso, ma solo di passaggio -- qui ne discuteremo esplicitamente.
+ +

Prerequisiti

+ +

Prima di iniziare questo modulo, dovresti avere un po' di familiarità con le basi di HTML e CSS, e dovresti anche aver lavorato nei moduli precedenti, JavaScript first steps.

+ +
+

Nota: Se stai lavorantdo su un computer/tablet/altri dispositivi dove non hai la possibilità di creare i tuoi file, potresti provare (la maggior parte) degli esempi di codice in un programma di coding online come JSBin opp Thimble.

+
+ +

Guide

+ +
+
Prendi decisioni nel tuo codice — conditionals
+
In ogni linguaggio di programmazione, il codice necessita di prendere decisioni ed eseguire azioni di conseguenza a seconda dei diversi input. Per esempio, in un gioco, se le vite del giocatore sono 0, allora la partita termina. In un'app meteo, se viene aperta al mattino, verrà mostrata una figura dell'alba e se è notte una relativa a stelle e luna. In questo articolo esploreremo come funzionano le strutture condizionali in JavaScript
+
Cicli di codice (loop)
+
A volte è necessario svolgere la stessa attività più di una volta di seguito. Ad esempi, guardando una lista di nomi. Nella programmazione i loop svolgono questo lavoro molto bene. Qui vedremo la struttura dei loop in JavaScript
+
Funzioni — blocchi di codice riusabile
+
Un altro concetto essenziale nel coding sono le funzioni. Le Funzioni ti consento di memorizzare un pezzo di codice che esegue una singola attività all'interno di un blocco definito e quindi richiamare il codice ogni volta che ne hai bisogno usando un singolo breve comando — invece di dover scrivere lo stesso codice più volte. In questo articolo esploreremo i concetti fondamentali dietro funzioni come la sistassi di base, come invocare e definire funzioni, ambito e parametri.
+
Costruisci la tua funzione
+
Con la maggior parte della teoria essenziale trattata in precedenza, questo articolo offre un'esperienza più pratica. Qui farai un po' di pratica con la creazione della tua funzione personalizzata. Lungo la strada, spiegheremo anche alcuni ulteriori dettagli utili su come gestire le funzioni.
+
Valori di ritorno delle funzioni
+
L'ultimo concetti essenziale che devi sapere sulle funzioni è il tipo di ritorno. Alcune funzioni non ritornano un valore utile dopo l'esecuzione, ma altre lo fanno. É importante capire quali sono i loro valori, come utilizzarli e come fare in modo che le tue funzioni personalizzate restituiscano valori utili
+
Introduzione agli eventi
+
Gli eventi sono azioni o occorrenze che si verificano nel sistema che si sta programmando, il sistema ti informa in modo che tu possa rispondere in qualche modo se lo desideri. Ad esempio se l'utente fa click su un pulsante in una pagina Web, è possibile che si desideri rispondere a tale azione visualizzando una casella di informazioni. In quest'ultimo articolo discuteremo alcuni concetti importanti relativi agli eventi e vedremo come funzionano nei browser.
+
+ +

Valutazioni

+ +

La seguente valutazione metterà alla prova la tua comprensione dei principi di base di JavaScript trattati nelle guide sopra.

+ +
+
Galleria di immagini (carousel)
+
Ora che abbiamo esaminati i blocchi fondamentali di JavaScript, testeremo la tua conoscenza dei loop, funzioni, condizioni ed eventi creando un oggetto abbastanza comune che vedrai su molti siti Web: una galleria di immagini basata su JavaScript.
+
diff --git a/files/it/learn/javascript/comefare/index.html b/files/it/learn/javascript/comefare/index.html new file mode 100644 index 0000000000..275eb0cf8d --- /dev/null +++ b/files/it/learn/javascript/comefare/index.html @@ -0,0 +1,291 @@ +--- +title: Risolvere problematiche frequenti nel tuo codice JavaScript +slug: Learn/JavaScript/Comefare +tags: + - Principianti + - imparare +translation_of: Learn/JavaScript/Howto +--- +
R{{LearnSidebar}}
+ +

I link seguenti indicano soluzioni a problematiche frequenti in cui puoi imbatterti quando programmi in javaScript.

+ +

Errori comuni dei principianti

+ +

Ortografia corretta

+ +

Se il tuo codice non funziona e/o il browser segnala che qualcosa non è definito, controlla di aver scritto tutti i tuoi nomi di variabili, nomi di funzioni, etc. correttamente.

+ +

Alcune comuni funzioni built-in del browser che causano problemi sono: 

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
CorrettoSbagliato
getElementsByTagName()getElementbyTagName()
getElementsByName()getElementByName()
getElementsByClassName()getElementByClassName()
getElementById()getElementsById()
+ +

Posizione del punto e virgola

+ +

Devi assicurarti di non aver posizionato il punto e virgola nel posto sbagliato, ad esempio :

+ + + + + + + + + + + + +
CorrettoSbagliato
elem.style.color = 'red';elem.style.color = 'red;'
+ +

Funzioni

+ +

Ci sono alcune cose che possono andare storte con le funzioni.

+ +

Uno degli errori più comuni è dichiarare la funzione ma non chiamarla da nessuna parte. Per esempio:

+ +
function myFunction() {
+  alert('This is my function.');
+};
+ +

Questo codice non farà nulla, a meno che non venga chiamato con la seguente istruzione:

+ +
myFunction();
+ +

Ambito (scope) della funzione

+ +

Ricorda che le funzioni hanno il loro specifico ambito (scope) — non è possibile accedere ad una variabile definita all'interno di una funzione al di fuori di essa, a meno di dichiararla globalmente (ossia fuori da ogni funzione), oppure restituire il valore (return) dalla funzione stessa.

+ +

Eseguire codice posto dopo un istruzione return

+ +

Ricordati anche che quando incontra l'istruzione return, l'interprete JavaScript esce dalla funzione — nessun codice all'interno della funzione verrà eseguito dopo l'istruzione return.

+ +

Infatti, alcuni browsers (come Firefox) ti daranno un messaggio di errore nella console dello sviluppatore se hai inserito codice dopo un'istruzione return. Firefox restituirà "unreachable code after return statement" (codice irraggiungibile dopo l'istruzione return).

+ +

Notazione per gli oggetti opposto al normale assegnamento

+ +

Quando fai un normale assegnamento in JavaScript, usi un singolo simbolo di uguale, ad es. :

+ +
const myNumber = 0;
+ +

Con gli Oggetti occorre invece prestare attenzione alla corretta sintassi. L'oggetto deve essere definito delimitandolo con parentesi graffe, i nomi dei membri devono essere separati dai loro valori con i due punti e i membri tra loro da virgole. Per esempio:

+ +
const myObject = {
+  name: 'Chris',
+  age: 38
+}
+ +

Definizioni Base

+ +
+
+ +
+ +
+ +
+
+ +

Casi base d'uso

+ +
+
+

Generali

+ + + +

Variabili

+ + + +

Tipi di dati numerici

+ + + +

Stringhe

+ + +
+ +
+

Arrays

+ + + +

Debugging JavaScript

+ + + +

For more information on JavaScript debugging, see Handling common JavaScript problems. Also, see Other common errors for a description of common errors.

+ +

Making decisions in code

+ + + +

Looping/iteration

+ + +
+
+ +

Intermediate use cases

+ +
+
+

Functions

+ + + +

Objects

+ + + +

JSON

+ + +
+ +
+

Events

+ + + +

Object-oriented JavaScript

+ + + +

Web APIs

+ + +
+
diff --git "a/files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" "b/files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" new file mode 100644 index 0000000000..1fa4343de8 --- /dev/null +++ "b/files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" @@ -0,0 +1,253 @@ +--- +title: Cosa è andato storto? Problemi con Javacript +slug: Learn/JavaScript/First_steps/Cosa_è_andato_storto +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")}}
+ +

Quando abbiamo realizzato il gioco "Indovina il numero"  nell'articole precedente, potresti esserti accorto che non funziona. Niente paura — questo articolo mira ad aiutarti e non farti strappare i capelli per tali problemi, fornendoti alcuni semplici aiuti su come trovare e correggere gli errori in JavaScript .

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.
Objective:To gain the ability and confidence to start fixing simple problems in your own code.
+ +

Types of error

+ +

Generally speaking, when you do something wrong in code, there are two main types of error that you'll come across:

+ + + +

Okay, so it's not quite that simple — there are some other differentiators as you drill down deeper. But the above classifications will do at this early stage in your career. We'll look at both of these types going forward.

+ +

An erroneous example

+ +

To get started, let's return to our number guessing game — except this time we'll be exploring a version that has some deliberate errors introduced. Go to Github and make yourself a local copy of number-game-errors.html (see it running live here).

+ +
    +
  1. To get started, open the local copy inside your favourite text editor, and your browser.
    2. +
  2. Try playing the game — you'll notice that when you press the "Submit guess" button, it doesn't work!
    3. +
+ +
+

Note: You might well have your own version of the game example that doesn't work, which you might want to fix! We'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here. Then you can go back and try to fix your example.

+
+ +

At this point, let's consult the developer console to see if we can see any syntax errors, then try to fix them. You'll learn how below.

+ +

Fixing syntax errors

+ +

Earlier on in the course we got you to type some simple JavaScript commands into the developer tools JavaScript console (if you can't remember how to open this in your browser, follow the previous link to find out how). What's even more useful is that the console gives you error messages whenever a syntax error exists inside the JavaScript being fed into the browser's JavaScript engine. Now let's go hunting.

+ +
    +
  1. Go to the tab that you've got number-game-errors.html open in, and open your JavaScript console. You should see an error message along the following lines:
    2. +
  2. This is a pretty easy error to track down, and the browser gives you several useful bits of information to help you out (the screenshot above is from Firefox, but other browsers provide similar information). From left to right, we've got: +
      +
    • A red "x" to indicate that this is an error.
      • +
    • An error message to indicate what's gone wrong: "TypeError: guessSubmit.addeventListener is not a function"
      • +
    • A "Learn More" link that links through to an MDN page that explains what this error means in huge amounts of detail.
      • +
    • The name of the JavaScript file, which links through to the Debugger tab of the devtools. If you follow this link, you'll see the exact line where the error is highlighted.
      • +
    • The line number where the error is, and the character number in that line where the error is first seen. In this case, we've got line 86, character number 3.
      • +
    +
    3. +
  3. If we look at line 86 in our code editor, we'll find this line: + 
    guessSubmit.addeventListener('click', checkGuess);
    +
    4. +
  4. The error message says "guessSubmit.addeventListener is not a function", so we've probably spelled something wrong. If you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on MDN. The best way to do this currently is to search for "mdn name-of-feature" on your favourite search engine. Here's a shortcut to save you some time in this instance: addEventListener().
    5. +
  5. So, looking at this page, the error appears to be that we've spelled the function name wrong! Remember that JavaScript is case sensitive, so any slight difference in spelling or casing will cause an error. Changing addeventListener to addEventListener should fix this. Do this now.
    6. +
+ +
+

Note: See our TypeError: "x" is not a function reference page for more details about this error.

+
+ +

Syntax errors round two

+ +
    +
  1. Save your page and refresh, and you should see the error has gone.
    2. +
  2. Now if you try to enter a guess and press the Submit guess button, you'll see ... another error!
    3. +
  3. This time the error being reported is "TypeError: lowOrHi is null", on line 78. +
    Note: Null is a special value that means "nothing", or "no value". So lowOrHi has been declared and initialised, but not with any meaningful value — it has no type or value.
    + +
    Note: This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the checkGuess() { ... } block). As you'll learn in more detail in our later functions article, code inside functions runs in a separate scope than code outside functions. In this case, the code was not run and the error was not thrown until the checkGuess() function was run by line 86.
    +
    4. +
  4. Have a look at line 78, and you'll see the following code: + 
    lowOrHi.textContent = 'Last guess was too high!';
    +
    5. +
  5. This line is trying to set the textContent property of the lowOrHi variable to a text string, but it's not working because lowOrHi does not contain what it's supposed to. Let's see why this is — try searching for other instances of lowOrHi in the code. The earliest instance you'll find in the JavaScript is on line 48: + 
    var lowOrHi = document.querySelector('lowOrHi');
    +
    6. +
  6. At this point we are trying to make the variable contain a reference to an element in the document's HTML. Let's check whether the value is null after this line has been run. Add the following code on line 49: + 
    console.log(lowOrHi);
    + +
    +

    Note: console.log() is a really useful debugging function that prints a value to the console. So it will print the value of lowOrHi to the console as soon as we have tried to set it in line 48.

    +
    +
    7. +
  7. Save and refesh, and you should now see the console.log() result in your console. Sure enough, lowOrHi's value is null at this point, so there is definitely a problem with line 48.
    8. +
  8. Let's think about what the problem could be. Line 48 is using a document.querySelector() method to get a reference to an element by selecting it with a CSS selector. Looking further up our file, we can find the paragraph in question: + 
    <p class="lowOrHi"></p>
    +
    9. +
  9. So we need a class selector here, which begins with a dot (.), but the selector being passed into the querySelector() method in line 48 has no dot. This could be the problem! Try changing lowOrHi to .lowOrHi in line 48.
    10. +
  10. Try saving and refreshing again, and your console.log() statement should return the <p> element we want. Phew! Another error fixed! You can delete your console.log() line now, or keep it to reference later on — your choice.
    11. +
+ +
+

Note: See our TypeError: "x" is (not) "y" reference page for more details about this error.

+
+ +

Syntax errors round three

+ +
    +
  1. Now if you try playing the game through again, you should get more success — the game should play through absolutely fine, until you end the game, either by guessing the right number, or by running out of lives.
    2. +
  2. At that point, the game fails again, and the same error is spat out that we got at the beginning — "TypeError: resetButton.addeventListener is not a function"! However, this time it's listed as coming from line 94.
    3. +
  3. Looking at line number 94, it is easy to see that we've made the same mistake here. We again just need to change addeventListener to .addEventListener. Do this now.
    4. +
+ +

A logic error

+ +

At this point, the game should play through fine, however after playing through a few times you'll undoubtedly notice that the "random" number you've got to guess is always 1. Definitely not quite how we want the game to play out!

+ +

There's definitely a problem in the game logic somewhere — the game is not returning an error; it just isn't playing right.

+ +
    +
  1. Search for the randomNumber variable, and the lines where the random number is first set. The instance that stores the random number that we want to guess at the start of the game should be around line number 44: + + 
    var randomNumber = Math.floor(Math.random()) + 1;
    + And the one that generates the random number before each subsequent game is around line 113:
    2. +
  2. + 
    randomNumber = Math.floor(Math.random()) + 1;
    +
    3. +
  3. To check whether these lines are indeed the problem, let's turn to our friend console.log() again — insert the following line directly below each of the above two lines: + 
    console.log(randomNumber);
    +
    4. +
  4. Save and refresh, then play a few games — you'll see that randomNumber is equal to 1 at each point where it is logged to the console.
    5. +
+ +

Working through the logic

+ +

To fix this, let's consider how this line is working. First, we invoke Math.random(), which generates a random decimal number between 0 and 1, e.g. 0.5675493843.

+ +
Math.random()
+ +

Next, we pass the result of invoking Math.random() through Math.floor(), which rounds the number passed to it down to the nearest whole number. We then add 1 to that result:

+ +
Math.floor(Math.random()) + 1
+ +

Rounding a random decimal number between 0 and 1 down will always return 0, so adding 1 to it will always return 1.  We need to multiply the random number by 100 before we round it down. The following would give us a random number between 0 and 99:

+ +
Math.floor(Math.random()*100);
+ +

Hence us wanting to add 1, to give us a random number between 1 and 100:

+ +
Math.floor(Math.random()*100) + 1;
+ +

Try updating both lines like this, then save and refresh — the game should now play like we are intending it to!

+ +

Other common errors

+ +

There are other common errors you'll come across in your code. This section highlights most of them.

+ +

SyntaxError: missing ; before statement

+ +

This error generally means that you have missed a semi colon at the end of one of your lines of code, but it can sometimes be more cryptic. For example, if we change this line inside the checkGuess() function:

+ +
var userGuess = Number(guessField.value);
+ +

to

+ +
var userGuess === Number(guessField.value);
+ +

It throws this error because it thinks you are trying to do something different. You should make sure that you don't mix up the assignment operator (=) — which sets a variable to be equal to a value — with the strict equality operator (===), which tests whether one value is equal to another, and returns a true/false result.

+ +
+

Note: See our SyntaxError: missing ; before statement reference page for more details about this error.

+
+ +

The program always says you've won, regardless of the guess you enter

+ +

This could be another symptom of mixing up the assignment and strict equality operators. For example, if we were to change this line inside checkGuess():

+ +
if (userGuess === randomNumber) {
+ +

to

+ +
if (userGuess = randomNumber) {
+ +

the test would always return true, causing the program to report that the game has been won. Be careful!

+ +

SyntaxError: missing ) after argument list

+ +

This one is pretty simple — it generally means that you've missed the closing parenthesis off the end of a function/method call.

+ +
+

Note: See our SyntaxError: missing ) after argument list reference page for more details about this error.

+
+ +

SyntaxError: missing : after property id

+ +

This error usually relates to an incorrectly formed JavaScript object, but in this case we managed to get it by changing

+ +
function checkGuess() {
+ +

to

+ +
function checkGuess( {
+ +

This has caused the browser to think that we are trying to pass the contents of the function into the function as an argument. Be careful with those parentheses!

+ +

SyntaxError: missing } after function body

+ +

This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the checkGuess() function.

+ +

SyntaxError: expected expression, got 'string' or SyntaxError: unterminated string literal

+ +

These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, string would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.

+ +

For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!

+ +
+

Note: See our SyntaxError: Unexpected token and SyntaxError: unterminated string literal reference pages for more details about these errors.

+
+ +

Summary

+ +

So there we have it, the basics of figuring out errors in simple JavaScript programs. It won't always be that simple to work out what's wrong in your code, but at least this will save you a few hours of sleep and allow you to progress a bit faster when things don't turn out right earlier on in your learning journey.

+ +

See also

+ +
+ +
+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/it/learn/javascript/first_steps/index.html b/files/it/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..220f1f25c1 --- /dev/null +++ b/files/it/learn/javascript/first_steps/index.html @@ -0,0 +1,68 @@ +--- +title: JavaScript First Steps +slug: Learn/JavaScript/First_steps +tags: + - Arrays + - Article + - Assessment + - Beginner + - CodingScripting + - Guide + - JavaScript + - Landing + - Module + - NeedsTranslation + - Numbers + - Operators + - TopicStub + - Variables + - 'l10n:priority' + - maths + - strings +translation_of: Learn/JavaScript/First_steps +--- +

{{LearnSidebar}}Nel nostro primo modulo JavaScript, per prima cosa, rispondiamo ad alcune domande fondamentali come "cosa è JavaScript?", "a che cosa assomiglia?", e "cosa può fare?", prima di guidarti nella tua prima esperienza pratica di scrittura JavaScript. Dopodiché, discuteremo dettagliatamente, alcuni elementi chiave, come variabili, stringhe, numeri ed array.

+ +

Prerequisiti

+ +

Prima di iniziare questo modulo, non hai bisogno di alcuna precedente conoscenza di JavaScript, ma dovresti avere familiarità con HTML e CSS. Si consiglia di utilizzare i seguenti moduli prima di iniziare su JavaScript:

+ + + +
+

Nota: Se stai lavorando su un computer/tablet/altro dispositivo dove non sei in grado di creare i tuoi files, potresti provare (la maggior parte) gli esempi di codice in un programma di codifica online come JSBin o Thimble.

+
+ +

Guide

+ +
+
Cosa è JavaScript?
+
Benvenuto nel corso JavaScript per principianti di MDN! In questo primo articolo vedremo JavaScript da un livello alto, rispondendo a domande come "cosa è JavaScript?" e "cosa sta facendo?", e assicurandoci che tu sia a tuo agio con lo scopo di JavaScript.
+
Un primo tuffo in JavaScript
+
Ora che hai imparato qualcosa sulla teoria di JavaScript, e cosa puoi fare con esso, stiamo per fornirti un corso accelerato sulle caratteristiche di base di JavaScript attraverso un tutorial totalmente pratico. Qui costruirai un semplice gioco "Indovina il numero", passo dopo passo.
+
Cosa è andato storto? Risoluzione dei problemi di JavaScript
+
Quando hai costruito il gioco "Indovina il numero" nel precedente articolo, potresti aver trovato che non funzionava. Nessuna paura - questo articolo mira a salvarti dallo strapparti i capelli su questi problemi fornendoti alcuni semplici consigli sul come trovare e correggere gli errori nei programmi JavaScript.
+
Memorizzare le informazioni ci cui hai bisogno - le Variabili
+
Dopo aver letto l'ultima coppia di articoli dovresti sapere cos'è JavaScript, cosa può fare per te, come usarlo con altre tecnologie web, e come le sue principali caratteristiche appaiono da un livello alto. In questo articolo andremo giù fino alle basi reali, guardando come lavorare con i blocchi di costruzione più semplici di JavaScript - Variabili.
+
Matemeatica di base in JavaScript - numeri e operatori
+
A questo punto del corso discuteremo matematica in JavaScript — come possiamo combinare operatori ed altre funzioni per manipolare con successo i numeri per fare i nostri bidding.
+
Handling text — strings in JavaScript
+
Next we'll turn our attention to strings — this is what pieces of text are called in programming. In this article we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in string, and joining them together.
+
Useful string methods
+
Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.
+
Arrays
+
In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.
+
+ +

Assessments

+ +

The following assessment will test your understanding of the JavaScript basics covered in the guides above.

+ +
+
Silly story generator
+
In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun!
+
diff --git a/files/it/learn/javascript/first_steps/variabili/index.html b/files/it/learn/javascript/first_steps/variabili/index.html new file mode 100644 index 0000000000..38da82e607 --- /dev/null +++ b/files/it/learn/javascript/first_steps/variabili/index.html @@ -0,0 +1,337 @@ +--- +title: Memorizzazione delle informazioni necessarie - Variabili +slug: Learn/JavaScript/First_steps/Variabili +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")}}
+ +

Dopo aver letto gli ultimi due articoli, ora dovresti sapere cos'è JavaScript, cosa può fare per te, come lo usi insieme ad altre tecnologie web e quali sono le sue caratteristiche principali da un livello elevato. In questo articolo, passeremo alle basi reali, esaminando come lavorare con i blocchi di base di JavaScript - Variabili.

+ + + + + + + + + + + + +
Prerequisiti:Nozioni di base di informatica, comprensione di base di HTML e CSS, comprensione di cosa sia JavaScript
Obiettivo:Acquisire familiarità con le basi delle variabili JavaScript.
+ +

Strumenti di cui hai bisogno

+ +

In questo articolo ti verrà chiesto di digitare righe di codice per testare la tua comprensione del contenuto. Se si utilizza un browser desktop, il posto migliore per digitare il codice di esempio è la console JavaScript del browser (vedere Quali sono gli strumenti di sviluppo del browser per ulteriori informazioni su come accedere a questo strumento).

+ +

Cosa è una variabile?

+ +

Una variabile è un contenitore per un valore, come un numero che potremmo usare in una somma o una stringa che potremmo usare come parte di una frase. Ma una cosa speciale delle variabili è che i loro valori possono cambiare. Diamo un'occhiata a un semplice esempio:

+ +
<button>Press me</button>
+ +
const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}
+ +

{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

+ +

In questo esempio, premendo il bottone viene eseguito un paio di righe di codice. La prima riga apre una finestra sullo schermo che chiede al lettore di inserire il proprio nome, quindi memorizza il valore in una variabile. La seconda riga mostra un messaggio di benvenuto che include il loro nome, preso dal valore della variabile.

+ +

Per capire perché questo è così utile, pensiamo a come scrivere questo esempio senza usare una variabile. Finirebbe per assomigliare a questo:

+ +
let name = prompt('What is your name?');
+
+if (name === 'Adam') {
+  alert('Hello Adam, nice to see you!');
+} else if (name === 'Alan') {
+  alert('Hello Alan, nice to see you!');
+} else if (name === 'Bella') {
+  alert('Hello Bella, nice to see you!');
+} else if (name === 'Bianca') {
+  alert('Hello Bianca, nice to see you!');
+} else if (name === 'Chris') {
+  alert('Hello Chris, nice to see you!');
+}
+
+// ... and so on ...
+ +

Potresti non comprendere appieno la sintassi che stiamo usando (ancora!), ma dovresti essere in grado di farti un'idea - se non avessimo variabili disponibili, dovremmo implementare un blocco di codice gigante che controlla quale sia il nome inserito e quindi visualizzare il messaggio appropriato per quel nome. Questo è ovviamente molto inefficiente (il codice è molto più grande, anche solo per cinque scelte), e semplicemente non funzionerebbe - non è possibile memorizzare tutte le possibili scelte.

+ +

Le variabili hanno senso e, man mano che impari di più su JavaScript, inizieranno a diventare una seconda natura.

+ +

Un'altra cosa speciale delle variabili è che possono contenere qualsiasi cosa, non solo stringhe e numeri. Le variabili possono anche contenere dati complessi e persino intere funzioni per fare cose sorprendenti. Imparerai di più su questo mentre procedi.

+ +
+

Nota:Diciamo che le variabili contengono valori. Questa è una distinzione importante da fare. Le variabili non sono i valori stessi; sono contenitori per valori. Puoi pensare che siano come piccole scatole di cartone in cui puoi riporre le cose.

+
+ +

+ +

Dichiarare una variabile

+ +

Per usare una variabile, devi prima crearla - più precisamente, dobbiamo dichiarare la variabile. Per fare ciò, utilizziamo la parola chiave var o let seguita dal nome che vuoi chiamare la tua variabile:

+ +
let myName;
+let myAge;
+ +

Qui stiamo creando due variabili chiamate myName e myAge. Prova a digitare queste righe nella console del tuo browser web. Successivamente, prova a creare una (o due) variabili chiamandole a tuo piacimento.

+ +
+

Nota: In JavaScript, tutte le istruzioni del codice dovrebbero terminare con un punto e virgola (;) - il codice potrebbe funzionare correttamente per singole righe, ma probabilmente non funzionerà quando si scrivono più righe di codice insieme. Cerca di prendere l'abitudine di includerlo.

+
+ +

Puoi verificare se questi valori ora esistono nell'ambiente di esecuzione digitando solo il nome della variabile, ad es.

+ +
myName;
+myAge;
+ +

Al momento non hanno valore; sono contenitori vuoti. Quando si immettono i nomi delle variabili, è necessario ottenere un valore undefined. Se non esistono, verrà visualizzato un messaggio di errore: "try typing in

+ +
scoobyDoo;
+ +
+

Nota: Non confondere una variabile esistente ma che non ha alcun valore definito con una variabile che non esiste affatto: sono cose molto diverse. Nell'analogia della scatola che hai visto sopra, non esistere significherebbe che non esiste una scatola (variabile) in cui inserire un valore. Nessun valore definito significherebbe che c'è una scatola, ma non ha alcun valore al suo interno.

+
+ +

Inizializzare una Variabile

+ +

Una volta che hai dichiarato una variabiale, puoi inizializzarla con un valore. Puoi farlo digitando il nome della variabile, seguito dal segno di uguale (=), seguito poi dal valore che vuoi dargli. Per esempio: 

+ +
myName = 'Chris';
+myAge = 37;
+ +

Prova a tornare alla console ora e digita queste linee. Dovresti vedere il valore che hai assegnato alla variabile restituita nella console per confermarla, in ogni caso. Ancora una volta, puoi restituire i valori delle variabili semplicemente digitandone il nome nella console. Riprova:

+ +
myName;
+myAge;
+ +

Puoi dichiarare e inizializzare una variabile nello stesso tempo, come questo: 

+ +
let myDog = 'Rover';
+ +

Questo è probabilmente ciò che farai la maggior parte del tempo, essendo il metodo più veloce rispetto alle due azioni separate. 

+ +

Differenza tra var e let

+ +

A questo punto potresti pensare "perchè abbiamo bisogno di due keywords (parole chiavi) per definire le variabili?? Perchè avere  var e let?".

+ +

Le ragioni sono in qualche modo storiche.  Ai tempi della creazione di JavaScript, c'era solo var. Questa funziona fondamentalmente in molti casi, ma ha alcuni problemi nel modo in cui funziona — il suo design può qualche volta essere confuso o decisamente fastidioso. Così,  let è stata creata nella moderna versione di JavaScript, una nuova keyword (parola chiave) per creare variabili che funzionano differentemente da var, risolvendo i suoi problemi nel processo.

+ +

Di seguito sono spiegate alcune semplici differenze. Non le affronteremo ora tutte, ma inizierai a scoprirle mentre impari più su JavaScript. (se vuoi davvero leggere su di loro ora, non esitare a controllare la nostra pagina di riferimento let).

+ +

Per iniziare, se scrivi un multilinea JavaScript che dichiara e inizializza una variabile, puoi effettivamente dichiarare una variabile con var dopo averla inizializzata funzionerà comunque. Per esempio:

+ +
myName = 'Chris';
+
+function logName() {
+  console.log(myName);
+}
+
+logName();
+
+var myName;
+ +
+

Nota:  Questo non funziona quando digiti linee individuali in una JavaScript console, ma solo quando viene eseguita in linee multiple in un documento web. 

+
+ +

Questo lfunziona a causa di hoisting — leggi var hoisting per maggiori dettagli sull'argomento. 

+ +

Hoisting non funziona con  let. Se cambiamo var a let  nell'esempio precedente, da un errore. Questa è una buona cosa — dichiarare una variabile dopo che averla inizializzata si traduce in un codice confuso e difficile da capire.

+ +

In secondo luogo, quando usi  var, puoi dichiarare la stessa variabile tutte le volte che vuoi, ma con  let non puoi. Quanto segue funzionerebbe: 

+ +
var myName = 'Chris';
+var myName = 'Bob';
+ +

Ma il seguente darebbe un errore sulla seconda linea: 

+ +
let myName = 'Chris';
+let myName = 'Bob';
+ +

Dovresti invece fare questo: 

+ +
let myName = 'Chris';
+myName = 'Bob';
+ +

Ancora una volta, questa è un scelta linquistica più corretta. Non c'è motivo di ridichiarare le variabili: rende le cose più confuse.

+ +

Per queste ragioni e altre, noi raccomandiamo di usare let il più possibile nel tuo codice, piuttosto che var. Non ci sono motivi per usare var, a meno che non sia necessario supportare vecchie versioni di Internet Explorer proprio con il tuo codice.  ( let non è supportato fino fino alla versione 11, il moderno  Windows Edge browser supporta bene let).

+ +
+

Nota:  Attualmente stiamo aggiornando il corso per usare più  let piuttosto che var. Abbi pazienza con noi!

+
+ +

Aggiornare una variabile

+ +

Una volta che una variabile è stata inizializzata con un valore, puoi cambiarlo (o aggiornarlo) dandogli semplicemente un valore differente. Prova a inserire le seguenti linee nella tua console: 

+ +
myName = 'Bob';
+myAge = 40;
+ +

Regole di denominazione delle variabili

+ +

Puoi chiamare una variabile praticamente come preferisci, ma ci sono delle limitazioni. Generalmente, dovresti limitarti ad usare i caratteri latini (0-9, a-z, A-Z) e l'underscore ( _ ).

+ + + +
+

Nota: Puoi trovare un elenco abbastanza completo di parole riservate da evitare a Lexical grammar — keywords.

+
+ +

Esempi di nomi corretti: 

+ +
age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2
+ +

Esempi di nomi errati: 

+ +
1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman
+ +

Esempi di nomi soggetti a errori: 

+ +
var
+Document
+
+ +

Prova a creare qualche altra variabile ora, tenendo presente le indicazioni sopra riportate. 

+ +

Tipi di Variabili

+ +

Esistono diversi tipi di dati che possiamo archiviare in variabili. In questa sezione li descriveremo in breve, quindi in articoli futuri, imparerai su di loro in modo più dettagliato.

+ +

Finora abbiamo esaminato i primi due, ma che ne sono altri. 

+ +

Numeri

+ +

Puoi memorizzare numeri nelle variabili, numeri interi come 30  o numeri decimali come 2,456 (chiamati anche numeri mobili o in virgola mobile). Non è necessario dichiarare i tipi di variabili in JavaScript, a differenza di altri linguaggi di programmazione. Quando dai a una variabile un valore numerico, non si usa le virgolette:

+ +
let myAge = 17;
+ +

Stringhe

+ +

Le stringhe sono pezzi di testo. Quando dai a una variabile un valore di una stringa, hai bisogno di metterla in singole o doppie virgolette; altrimenti, JavaScript cerca di interpretarlo come un altro nome della variabile. 

+ +
let dolphinGoodbye = 'So long and thanks for all the fish';
+ +

Booleani

+ +

I booleani sono dei valori vero/falso — possono avere due valori true o false. Questi sono generalmente usati per testare delle condizioni, dopo di che il codice viene eseguito come appropriato . Ad esempio, un semplice caso sarebbe:

+ +
let iAmAlive = true;
+ +

Considerando che in realtà sarebbe usato più così:

+ +
let test = 6 < 3;
+ +

Questo sta usando l'operatore "minore di" (<) per verificare se 6 è minore di 3. Come ci si potrebbe aspettare, restituisce false, perché 6 non è inferiore a 3! Imparerai molto di più su questi operatori più avanti nel corso.

+ +

Arrays

+ +

Un  array è un singolo oggetto che contiene valori multipli racchiusi in parentesi quadre e separate da virgole. Prova a inserire le seguenti linee nella tua console:

+ +
let myNameArray = ['Chris', 'Bob', 'Jim'];
+let myNumberArray = [10, 15, 40];
+ +

Una volta che gli  arrays sono definiti,  è possibile accedere a ciascun valore in base alla posizione all'interno dell'array. Prova queste linee:

+ +
myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40
+ +

Le parentesi quadre specificano un valore di indice corrispondente alla posizione del valore che si desidera restituire. Potresti aver notato che gli array in JavaScript sono indicizzatI a zero: il primo elemento si trova all'indice 0.

+ +

Puoi imparare molto sugli arrays in un futuro articolo.

+ +

Oggetti

+ +

In programmazione, un oggetto è una struttura di codice che modella un oggetto reale. Puoi avere un oggetto semplice che rappresenta una box e contiene informazioni sulla sua larghezza, lunghezza e altezza, oppure potresti avere un oggetto che rappresenta una persona e contenere dati sul suo nome, altezza, peso, quale lingua parla, come salutarli
+ e altro ancora.

+ +

Prova a inserire il seguente codice nella tua console:

+ +
let dog = { name : 'Spot', breed : 'Dalmatian' };
+ +

Per recuperare le informazioni archiviate nell'oggetto, è possibile utilizzare la seguente sintassi:

+ +
dog.name
+ +

Per ora non esamineremo più gli oggetti: puoi saperne di più su quelli in un  modulo futuro.

+ +

Tipizzazione dinamica

+ +

JavaScript è un "linguaggio a tipizzazione dinamica", questo significa che,  a differenza di altri linguaggi, non è necessario specificare quale tipo di dati conterrà una variabile (numeri, stringhe, array, ecc.).

+ +

Ad esempio, se dichiari una variabile e le assegni un valore racchiuso tra virgolette, il browser considera la variabile come una stringa:

+ +
let myString = 'Hello';
+ +

Anche se il valore contiene numeri, è comunque una stringa, quindi fai attenzione:

+ +
let myNumber = '500'; // oops, questa è ancora una stringa
+typeof myNumber;
+myNumber = 500; // molto meglio - adesso questo è un numero
+typeof myNumber;
+ +

Prova a inserire le quattro righe sopra nella console una per una e guarda quali sono i risultati. Noterai che stiamo usando un speciale operatore chiamato typeof- questo restituisce il tipo di dati della variabile che scrivi dopo. La prima volta che viene chiamato, dovrebbe restituire string, poiché a quel punto la variabile myNumber contiene una stringa, '500'.
+ Dai un'occhiata e vedi cosa restituisce la seconda volta che lo chiami.

+ +

Costanti in JavaScript

+ +

Molti linguaggi di programmazione hanno il concetto di costante - un valore che una volta dichiarato non può mai essere modificato. Ci sono molte ragioni per cui vorresti farlo, dalla sicurezza (se uno script di terze parti ha cambiato tali valori potrebbe causare problemi) al debug e alla comprensione del codice (è più difficile cambiare accidentalmente valori che non dovrebbero essere cambiati e fare confusione).

+ +

All'inizio di JavaScript, le costanti non esistevano. Nel moderno JavaScript, abbiamo la parola chiave const, che ci consente di memorizzare valori che non possono mai essere modificati:

+ +
const daysInWeek = 7;
+const hoursInDay = 24;
+ +

const lavora esattamente come let, eccetto che non puoi dare aconst un nuovo valore. Nell'esempio seguente, la seconda linea genera un errore:

+ +
const daysInWeek = 7;
+daysInWeek = 8;
+ +

Sommario 

+ +

Ormai dovresti conoscere una quantità ragionevole di variabili JavaScript e come crearle. Nel prossimo articolo, ci concentreremo sui numeri in modo più dettagliato, esaminando come eseguire la matematica di base in JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/it/learn/javascript/index.html b/files/it/learn/javascript/index.html new file mode 100644 index 0000000000..faa1dc8f1a --- /dev/null +++ b/files/it/learn/javascript/index.html @@ -0,0 +1,63 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - JavaScript + - Principiante + - ScrtturaCodice +translation_of: Learn/JavaScript +--- +
{{LearnSidebar}}
+ +

{{Glossary("JavaScript")}} è un linguaggio di programmazione che consente la creazione di oggetti complessi in pagine web.  Ogni volta che una pagina web fa più che visualizzare semplici informazioni statiche — visualizzando contenuti aggiornati su base temporale, mappe interattive, o animazioni grafiche 2D/3D, o scrolling video jukeboxes, ecc... ecc... — si può presumere che JavaScript sia coinvolto.

+ +

Percorso di apprendimento

+ +

JavaScript è sicuramente più difficile da imparare rispetto alle tecnologie ad esso correlate, come HTML and CSS. Prima di tentare di imparare JavaScript, si consiglia vivamente di familiarizzare innanzitutto con almeno queste due tecnologie, e forse anche con altre. Inizia a lavorare sui seguenti moduli:

+ + + +

Una pregressa esperienza con altri linguaggi di programmazione può essere senz'altro utile.

+ +

Dopo aver familiarizzato con i concetti base di JavaScript, dovresti essere in grado di imparare argomenti più complessi, per esempio:

+ + + +

Moduli

+ +

Questo tema contiene i seguenti moduli, in un ordine suggerito per lavorarci sopra.

+ +
+
Primi passi JavaScript
+
Nel nostro primo modulo JavaScript, rispondiamo dapprima a domande fondamentali come "cos'è JavaScript?", "come è fatto?" e "cosa può fare?", prima di proseguire guidandoti attraverso le prime esperienze di scrittura di codice JavaScript. In seguito, presentiamo in dettaglio alcune caratteristiche chiave di JavaScript, come variabili, stringhe, numeri e matrici (arrays).
+
Blocchi costruttivi JavaScript
+
In questo modulo continuiamo la nostra descrizione di tutte le principali caratteristiche chiave di JavaScript, rivolgendo la nostra attenzione ai tipi di blocco di codice comunemente incontrati come dichiarazioni condizionali, cicli, funzioni ed eventi. Hai già visto questi elementi nel corso, ma solo di passaggio - qui discuteremo tutto in modo esplicito.
+
Introduzione a oggetti JavaScript
+
In JavaScript, la maggior parte degli elementi sono oggetti, dalle funzionalità di base di JavaScript come stringhe e matrici alle API del browser create sulla base di JavaScript. È anche possibile creare dei propri oggetti per incapsulare funzioni e variabili correlate in pacchetti efficienti (packages). La natura orientata agli oggetti di JavaScript è importante che sia compresa se vuoi andare oltre con la tua conoscenza del linguaggio e scrivere codice più efficiente, quindi abbiamo creato questo modulo per aiutarti. Qui insegniamo la teoria degli oggetti e la sua sintassi in dettaglio, vediamo come puoi creare i tuoi oggetti e spieghiamo cosa sono i dati JSON e come lavorarci.
+
Web APIs lato Client
+
Quando si scrive JavaScript sul lato client per siti Web o applicazioni, non si andrà molto lontano prima di iniziare a utilizzare le API — interfacce per la manipolazione di diversi aspetti del browser e del sistema operativo su cui è in esecuzione il sito, o anche dati da altri siti Web o servizi. In questo modulo esploreremo quali sono le API e come utilizzare alcune delle API più comuni che incontrerai spesso nel tuo lavoro di sviluppatore.
+
+ +

Risolvere i problemi tipici di JavaScript

+ +

Usa JavaScript per risolvere i problemi tipici fornisce collegamenti a sezioni di contenuto che spiegano come usare JavaScript per risolvere problemi molto comuni durante la creazione di una pagina web.

+ +

Vedi anche

+ +
+
JavaScript su MDN
+
Il punto di ingresso principale per la documentazione base di JavaScript su MDN — qui è possibile trovare documenti di riferimento completi su tutti gli aspetti del linguaggio JavaScript e alcuni tutorial avanzati rivolti a esperti JavaScript.
+
Imparare JavaScript 
+
Un eccellente risorsa (in inglese) per aspiranti sviluppatori web — Imparare JavaScript in un ambiente interattivo, con lezioni brevi e test interattivi, guidati da valutazioni automatiche. le prime 40 lezioni sono gratuite, e il corso completo è disponibile con un piccolo pagamento una tantum. 
+
Basi di JavaScript su EXLskills
+
Impara JavaScript con il corso open-source gratuito di EXLskills che presenta tutto ciò che ti occorre per iniziare a costruire applicazioni in JS.
+
 Programmare matematica
+
Una eccellente serie di video tutorial per imparare la matematica che devi conoscere per essere un programmatore valido, di Keith Peters.
+
diff --git a/files/it/learn/javascript/oggetti/basics/index.html b/files/it/learn/javascript/oggetti/basics/index.html new file mode 100644 index 0000000000..539df5c2e0 --- /dev/null +++ b/files/it/learn/javascript/oggetti/basics/index.html @@ -0,0 +1,242 @@ +--- +title: Basi degli oggetti JavaScript +slug: Learn/JavaScript/Oggetti/Basics +translation_of: Learn/JavaScript/Objects/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
+ +

Nel primo articolo sugli oggetti JavaScript, vedremo la sintassi fondamentale degli oggetti JavaScript, e rivedremo alcune funzionalità di JavaScript che abbiamo già esamintato in precedenza in questo corso, rimarcando il fatto che molte delle funzionalità che abbiamo già incontrato son di fatto oggetti.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza basilare dei computers, comprensione di base di HTML e CSS, familiarità con le basi di JavaScript (vedi Primi passi e Costruire blocchi).
Obiettivo:Capire le basi della teoria che stà dietro alla programmazione object-oriented, come questa si relazione con JavaScript ("la maggior parte delle cose sono oggetti"), e come incominciare a lavorare con gli oggetti JavaScript.
+ +

Basi degli oggetti

+ +

Un oggetto è una collezione di dati e/o funzionalità correlati (che di solito consiste in alcune variabili e funzioni — che sono chiamate proprietà e metodi quando fanno parte di oggetti.) Proviamo con un esempio per vedere come si comportano.

+ +

Per incomiciare, facciamo una copia locale del nostro file oojs.html. Questo contiene un piccolissimo — elemento {{HTMLElement("script")}} che possiamo usare per scrivere il nostro sorgente, un elemento {{HTMLElement("input")}} per insrire istruzioni di esempio quando la pagina viene visualizzata, alcune definizioni di variabili, ed una funzione che invia ciò che si inserisce in input in un elemento {{HTMLElement("p")}}. Useremo questo come base per esplorare i concetti fondamentali della sintassi degli oggetti.

+ +

Come molte cose in JavaScript, creare un oggetto spesso inizia definendo ed inizializzando una variabile. Prova ad inserire ciò che segue sotto al codice JavaScript già presente nel file, quindi salva e ricarica:

+ +
var person = {};
+ +

Se scrivi person nella casella di testo e premi il pulsante, dovresti ottenere il seguente risulatato:

+ +
[object Object]
+ +

Congratulazioni, hai appena creato il tuo primo oggetto. Ben fatto! Ma questo è un oggetto vuoto, perciò non ci possiamo fare molto. Aggiorniamo il nostro oggetto in questo modo:

+ +
var person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+
+ +

Dopo aver salvato e ricaricato la pagina, prova ad inserire alcuni di questi nella casella di input:

+ +
person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()
+ +

Ora hai ottenuto alcuni dati e funzionalità nel tuo oggetto, ed ora puoi accedere ad essi con alcune sintassi semplici e graziose!

+ +
+

Nota: Se hai problemi ad ottenere questo risultato, prova comparare quello che hai scritto con la nostra versione — vedi oojs-finished.html (e anche la versione funzionante). Un errore comune quando si inizia con gli oggetti è quello di mettere una virgola dopo l'ultimo elenemto — questo genera un errore.

+
+ +

Quindi che cosa è successo qui? Bene, un oggetto è composto da svariati membri, ogniuno dei quali ha un nome (es. name e age sopra), ed un valore (es, ['Bob', 'Smith'] e 32). Ogni coppia nome/valore deve essere separata da una virgola, ed ogni nome e valore devono essere separati dai due punti. La sintassi segue sempre questo schema:

+ +
var objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+}
+ +

Il valore di un membro di un oggetto può essere qualsiasi cosa — nel nostro oggetto persona abbiamo una strigna, un numero, due array e due funzioni. I primi quatto elementi sono dati e ad essi ci si riferisce come le proprietà (properties) del oggetto. Gli ultimi due elementi sono funzioni che consentono all'oggetto di fare qualcosa con i dati, e ad esse ci si riferisce come i metodi (methods) dell'oggetto.

+ +

Un oggetto come questo viene considerato un oggetto letterale — noi abbiamo scritto letteralmente il conenuto dell'oggetto nel momento che lo abbiamo creato. Questo è in contrasto con l'istanziazione di oggetti da classi, che vedremo un po' più avanti.

+ +

È molto comune creare oggetti letterali quando si desidera trasferire una serie di dati relazionati e strutturati in qualche maniera, ad esempio per inviare richieste al server per inserire i dati nel database. Inviare un singolo oggetto è molto più efficiente che inviare i dati individualmente, ed è più facile lavorarci rispetto agli array, perché i dati vengono identificati per nome.

+ +

Notazione puntata

+ +

Sopra, abbiamo acceduto alle proprietà ed ai metodi degli oggetti utilizzando la notazione puntata. Il nome dell'oggetto (person) serve da namespace — e deve essere insirito prima per accedere a qualsiasi cosa incapsulata nell'oggetto. Quindi si scrive il punto seguito dell'elemento a cui si vuole accedere — 
+ questo può essere il nome di una proprietà semplice, un elemento di una proprietà di tipo array, o una chiamata ad uno dei metodi dell oggetto, ad esempio:

+ +
person.age
+person.interests[1]
+person.bio()
+ +

Namespaces nidificati

+ +

È anche possibile assegnare un altro oggetto ad un membro di un oggetto. Ad esempio prova a cambiare la property name da

+ +
name: ['Bob', 'Smith'],
+ +

a

+ +
name : {
+  first: 'Bob',
+  last: 'Smith'
+},
+ +

In questo modo abbiamo effettivamente creato un  sotto-namespace. Può sembrare complesso, ma non lo è veramente — per accedere a questi devi solo concatenare un ulteriore passo alla fine con un altro punto. Prova questi:

+ +
person.name.first
+person.name.last
+ +

Importante: A questo punto devi anche cambiare il codice dei tuoi metodi e cambiare ogni istanza di

+ +
name[0]
+name[1]
+ +

con

+ +
name.first
+name.last
+ +

Altrimenti i tuoi metodi non funzioneranno più.

+ +

Notazione con parentesi quadre

+ +

C'è un altro modo per accedere alle proprietà degli oggetti — usando la notazione delle parentesi quadre. Invece di usare questi:

+ +
person.age
+person.name.first
+ +

Puoi usare

+ +
person['age']
+person['name']['first']
+ +

Questo assomiglia molto al modo in cui accedi agli elementi di un array, ed è sostanzialmente la stessa cosa — invece di usare un indice numerico per scegliere un elemento, stai usando il nome associato ad ogni valore membro. Non c'è da meravigliarsi che gli oggetti a volte vengono chiamati array associativi — essi infatti associano le stringhe ai valori nello stesso modo in cui gli arrays associano i numeri ai valori.

+ +

Assegnare i membri degli oggetti

+ +

Fino a qui abbiamo solo recuperato (get) valori dei menbri degli oggetti — si possono anche assegnare (set) i valori ai menbri degli oggetti semplicemente dichiarando i membri che si desidera assegnare (usando la notazione puntata o con quadre), cone ad esempio:

+ +
person.age = 45;
+person['name']['last'] = 'Cratchit';
+ +

Prova ad inserire queste linee e poi rileggi i dati nuovamente per vedere che cosa è cambiato:

+ +
person.age
+person['name']['last']
+ +

Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these:

+ +
person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }
+ +

Ora possiamo provare i nostri nuovi membri:

+ +
person['eyes']
+person.farewell()
+ +

Un utile aspetto della notazione con parentesi quadre è che non solo può essere usata per assegnare valori dinamicamente, ma anche per assegnare i nomi dei mebri. Ad esempio se desideriamo che gli utenti siano in grado di assegnare tipi di dato personalizzati scrivendo il nome della proprietà ed il suo valore in due campi di input, possiamo oggenere questi valori in questo modo:

+ +
var myDataName = nameInput.value;
+var myDataValue = nameValue.value;
+ +

e possiamo aggiungere questi nomi e valori nel nostro oggetto person in questo modo:

+ +
person[myDataName] = myDataValue;
+ +

Puoi testare questo aggiungendo le linee seguenti nel tuo codice appena prima della parentesi graffa chiusa nel oggetto person:

+ +
var myDataName = 'height';
+var myDataValue = '1.75m';
+person[myDataName] = myDataValue;
+ +

Ora prova s salvare e ricaricare la pagina ed inserisci ciò che segue nella casella di testo:

+ +
person.height
+ +

Non è possibile aggiungere proprità ad oggetti con il metodo descritto usando la notazione puntata, che accetta solo nomi aggiunti in modo letterale e non valori di variabili puntate da un nome.

+ +

Che cos'è "this"?

+ +

Forse ti sei accorto di qualcosa di leggermente strano nei nostri metodi. Guarda questo per esempio:

+ +
greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}
+ +

Forse ti sei chiesto che cos'è "this". La parola chiave this fa riferimento all'oggetto in cui abbiamo scritto il codice — perciò in questo caso this è equivalente a person. Quindi perché non scrivere invece semplicemente person? Come vedrai nell'articolo Object-oriented JavaScript per principianti quando incominceremo a creare costruttori ecc., this è molto utile — perché garantisce sempre che venga trovato il valore corretto quando il contesto cambia (es. due diverse istanze dell'oggetto person possono avere nomi diversi, ma vogliamo accedere al nome corretto quando vogliamo fargli gli auguri).

+ +

Proviamo ad illustrare ciò che intendiamo con un paio di oggetti person semplificati:

+ +
var person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+var person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+ +

In questo caso, person1.greeting() visualizza "Hi! I'm Chris."; e person2.greeting() "Hi! I'm Brian.", anche se il codice del metodo è esattamente identico. Come abbiamo detto prima, this fa riferimento al valore interno all'oggetto — questo non è molto importante per gli oggetti letterali scritti a mano, ma lo diventa quando gli oggetti vengono generati dinamicamente (per esempio usando i costruttori). Diventerà più chiaro in seguito.

+ +

Finora hai usato oggetti tutto il tempo

+ +

Avendo provato questi esempi, probabilmente hai pensato che la notazione a punto fin qui usata è molto familiare. Questo perché l'hai già usata durante il corso! Tutte le volte che abbiamo lavorato con un esempio che usa le API built-in del browser o oggetti JavaScript, abbiamo usato oggetti, perché quelle funzionalità sono state costruite usando lo stesso tipo di strutture di oggetti che stiamo vedendo qui, anche se molto più complesse dei nostri semplici esempi.

+ +

Quindi quando ha usato un metodo di stringa come:

+ +
myString.split(',');
+ +

Non hai fatto altro che usare un metodo disponibile in una istanza della classe String. Ogni volta che crei una stringa nel tuo codice, viene automaticamente creata una istanza di String, che ha ha disposizione alcuni metodi/proprietà comuni.

+ +

Quando hai acceduto al modello di oggetto documento usando righe come queste:

+ +
var myDiv = document.createElement('div');
+var myVideo = document.querySelector('video');
+ +

Tu hai usato i metodi disponibili in una istanza della classe Document. Per ogni pagina web caricara viene crata una istanza di Document chiamata document, che rappresenta l'intera struttura della pagina, il contenuto e le altre funzionalità come il suo URL. Nuovamente questo significa che ci sono diversi metodi/proprietà comuni disponibili.

+ +

Questo è vero anche per molti degli altri oggetti/API built-in che hai usato — Array, Math, ecc.

+ +

Nota che gli Oggetti/API built-in non sempre creano le istanze di oggetto automaticamente. Ad esempio, le Notifications API — che consentono ai browsers moderni di attivare notifiche di sistema — richiedono che venga instanziato una nuova istanza utilizzando il costruttore per ogni notifica che vuoi avviare. Prova scrivendo questo nella tua console JavaScript:

+ +
var myNotification = new Notification('Hello!');
+ +

Spiegheremo i costruttori in un prossimo articolo.

+ +
+

Nota: È utile pensare al modo in cui gli oggetti comunicano come ad un passaggio di messaggi — quando un oggetto ha bisogno che un altro oggetto faccia qualcosa, spesso manda un messaggio all'altro oggetto usando uno dei suoi metodi, ed aspetta la risposta sottoforma di valore restituito.

+
+ +

Sommario

+ +

Congratulazioni, hai raggiunto la fine del nostro primo artocolo sugli oggetti JS — ora dovresti avere una buona idesa di come lavorare con gli oggetti in JavaScript — compresa la creazione di tuoi semplici oggetti. Dovresti anche apprezzare che gli oggetti sono molto utili come strutture per memorizzare dati e funzionalità correlati — se hai provato a tenere traccia delle proprietà e dei metodi del nostro oggetto person in forma di variabili e funzioni separate, dovrebbe essere stato inefficente e frustrante, ed hai corso il rischio di confondere i dati con altre variabli con lo stesso  nome. Gli oggetti ci permettono di tenere le informazioni confinate in modo sicuro nel proprio pacchetto senza rischio.

+ +

Nel prossimo articolo incominceremo ad introdurre la teoria della programmazione object-oriented (OOP), ed in che modo queste tecniche possono essere usate in JavaScript.

+ +

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

diff --git a/files/it/learn/javascript/oggetti/index.html b/files/it/learn/javascript/oggetti/index.html new file mode 100644 index 0000000000..5fa859db74 --- /dev/null +++ b/files/it/learn/javascript/oggetti/index.html @@ -0,0 +1,51 @@ +--- +title: Introduzione agli oggetti in JavaScript +slug: Learn/JavaScript/Oggetti +tags: + - Articolo + - Guida + - JavaScript + - Oggetti + - Principiante + - Tutorial + - Verifica + - imparare +translation_of: Learn/JavaScript/Objects +--- +
{{LearnSidebar}}
+ +

In JavaScript molte cose sono oggetti, a partire da caratteristiche base di JavaScript come stringhe ed array, fino alle API del browser costruite in JavaScript. Potete anche creare i vostri oggetti, incapsulando funzioni e variabili tra loro correlate in pacchetti funzionalmente efficienti e che funzionano da comodi contenitori di dati. Se volete progredire nella vostra conoscenza di JavaScript, è importante comprendere la sua natura object-oriented (orientata agli oggetti), perciò abbiamo approntato questo modulo per aiutarvi. Qui parleremo in dettaglio della teoria e della sintassi degli oggetti; successivamente vedremo come creare i vostri oggetti personalizzati.

+ +

Prerequisiti

+ +

Prima di iniziare questo modulo, dovreste avere una qualche familiarità con HTML e CSS. Vi consigliamo di seguire i moduli Introduzione a HTML e Introduzione a CSS prima di cimentarvi con JavaScript.

+ +

Dovreste anche avere qualche familiarità con i fondamenti di JavaScript prima di affrontare in dettaglio gli oggetti in JavaScript. Prima di procedere con questo modulo vi consigliamo di seguire i moduli Primi passi con JavaScript e JavaScript building blocks.

+ +
+

Nota: Se state lavorando su un computer, tablet o altro dispositivo sul quale non fosse possibile creare i vostri file, potete sperimentare buona parte del codice di esempio in un programma di scrittura codice online, come ad esempio JSBin o Thimble.

+
+ +

Guide

+ +
+
Fondamenti sugli oggetti
+
Nel primo articolo riguardante gli oggetti JavaScript vedremo la sintassi fondamentale degli oggetti, e rivisiteremo alcune caratteristiche di JavaScript che abbiamo già introdotto durante il corso, verificando che molte delle caratteristche con cui avete già avuto a che fare sono di fatto oggetti.
+
Object-oriented JavaScript per principianti
+
Una volta acquisite le basi ci focalizzeremo sul JavaScript orientato agli oggetti (object-oriented JavaScript, OOJS) — questo articolo illustra i fondamenti della programmazione orientata agli oggetti (object-oriented programming, OOP), per poi esplorare come JavaScript emuli le classi di oggetti tramite le funzioni costruttore, e come creare istanze di un oggetto .
+
Prototipi di oggetto (object prototypes)
+
I prototipi sono il meccanismo tramite il quale gli oggetti JavaScript ereditano caratteristiche tra di loro, e funzionano diversamente dai meccanismi di ereditarietà presenti nei classici linguaggi orientati agli oggetti. In questo articolo esploreremo questa differenza, spiegheremo come funzionano le catene di prototipi, e vedremo come la proprietà di prototipo può essere usata per aggiungere metodi a costruttori esistenti..
+
Ereditarietà in JavaScript
+
Dopo aver spiegato buona parte delle frattaglie dell'OOJS, questo articolo mostra come creare classi di oggetti "figli" che ereditano caratteristiche dalle loro classi "antenate". Presentiamo inoltre alcuni consigli circa quando e dove potreste usare OOJS.
+
Lavorare con i dati JSON
+
JavaScript Object Notation (JSON) è un formato standard per rappresentare dati strutturati come oggetti JavaScript. Esso è comunemente usato per rappresentare e trasmettere dati sui siti web (ad esempio inviare alcuni dati dal server al client, cosicché venga visualizzato in una pagina web). Poiché lo incontrerete piuttosto spesso, in quest'articolo vi daremo tutto ciò di cui avete bisogno per lavorare con JSON usando JavaScript, incluso come accedere agli elementi di dati in un oggetto JSON e come scrivere il vostro JSON.
+
Pratica della costruzione di oggetti
+
Negli articoli precedenti abbiamo descritto la teoria essenziale degli oggetti JavaScript e i dettagli sulla sintassi, dandovi una base solida da cui Partire. In questo articolo ci cimenteremo in un esercizio pratico, in cui costruirete oggetti JavaScript personalizzati che producono qualcosa di divertente e colorato — alcune palline colorate rimbalzanti.
+
+ +

Verifiche

+ +
+
Aggiungere caratteristiche alla demo "bouncing balls"
+
In questa verifiche userete la demo delle palline rimbalzanti come punto di partenza, aggiungendole alcune nuove ed interessanti caratteristiche.
+
diff --git a/files/it/learn/javascript/oggetti/json/index.html b/files/it/learn/javascript/oggetti/json/index.html new file mode 100644 index 0000000000..71cf166e15 --- /dev/null +++ b/files/it/learn/javascript/oggetti/json/index.html @@ -0,0 +1,345 @@ +--- +title: Lavorare con JSON +slug: Learn/JavaScript/Oggetti/JSON +translation_of: Learn/JavaScript/Objects/JSON +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
+ +

JavaScript Object Notation (JSON) è un formato testuale standard, usato per rappresentare dati strutturati basati sulla sintassi degli oggetti in JavaScript. E' usato comunemente per la trasmissione dati nelle applicazioni web (ad es. inviare dati dal server al client in modo da visualizzarli in una pagina web o viceversa). Ti imbatterai abbastanza spesso in questo formato, così in questo articolo ti forniremo tutto ciò che ti occorre per lavorare con JSON usando JavaScript, incluso la lettura (parsing) del JSON in modo da accedere ai dati in esso contenuti, così come a generare JSON.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza informatica di base, comprensione base di HTML e CSS, familiarità con i concetti base di JavaScript (vedi Primi passi e Costruzione blocchi) e con i concetti base degli oggetti JS (vedi Introduzione agli oggetti).
Obiettivi:Comprendere il funzionamento dei dati megorizzati in JSON e creare i tuoi oggetti JSON.
+ +

No, davvero, cos'è JSON?

+ +

{{glossary("JSON")}} è un formato dati testuale che segue la sintassi degli oggetti JavaScript, reso popolare da Douglas Crockford. Anche se richiama da vicino la sintassi letterale degli oggetti JavaScript, può essere usato indipendentemente da JavaScript, e molti ambienti di programmazione supportano la lettura (parsing) e la generazione di JSON.

+ +

JSON esiste sotto forma di una stringa — utile quando vuoi trasmettere dati in una rete. Deve essere poi convertito in un oggetto javaScript nativo quando vuoi accedere ai dati che rappresenta. La conversione tra i due è piuttosto banale —  grazie ai metodi dell'oggetto globale JSON di JavaScript.

+ +
+

Nota: Convertire una stringa in un oggetto nativo è chiamata deserializzazione, mentre convertire un oggetto nativo in una stringa in modo da poterlo trasmettere in rete, è chiamata serializzazione.

+
+ +

Un oggetto JSON object può essere memorizzato in un file dedicato, essenzialmente un file di testo con estensione .json, e un {{glossary("tipo MIME")}} application/json.

+ +

Struutura di un JSON 

+ +

Come descritto sopra, un JSON non è altro che una stringa il cui formato è molto simile al formato letterale di un oggetto JavaScript. E' possibile includere in JSON gli stessi tipi di dato base possibili in un oggetto standard di JavaScript — stringhe, numeri, arrays, booleani e altri oggetti letterali. Questo ti consente di costruire una gerarchia dei dati, ad esempio:

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

Se carichiamo questo oggetto in un programma, processato in una variabile chiamata superHeroes per esempio, potremmo accedere ai dati che contiene usando la medesima notazione punto/parentesi vista nell'articolo Fondamentali degli oggetti JavaScript. Per esempio:

+ +
superHeroes.homeTown
+superHeroes['active']
+ +

Per accedere ai dati gerarchicamente inferiori, occorre semplicemente concatenare i nome delle proprietà e gli indici degli array.  Ad esempio, per accedere al terzo superpotere del secondo eroe nella lista dei membri, procedi come segue:

+ +
superHeroes['members'][1]['powers'][2]
+ +
    +
  1. Per primo abbiamo il nome della variabile — superHeroes.
    2. +
  2. All'interno della variabile vogliamo accedere alla proprietà members, così utilizziamo ["members"].
    3. +
  3. members contiene un array popolato da oggetti. Noi vogliamo accedere al secondo oggetto dell'array, quindi usiamo [1].
    4. +
  4. all'interno dell'oggetto così trovato, vogliamo poi accedere alla proprietà powers e per ciò usiamo ["powers"].
    5. +
  5. La proprietà powers contiene a sua volta un array in cui sono elencate i superpoteri dell'eroe selezionato. Noi vogliamo la terza in lista, usiamo quindi [2].
    6. +
+ +
+

Note: Abbiamo reso disponibile il JSON visto sopra, in una variabile del nostro esempio JSONTest.html (vedi il codice sorgente). Prova a caricarlo e poi accedi alla variabile dalla console JavaScript del tuo browser.

+
+ +

Arrays as JSON

+ +

Above we mentioned that JSON text basically looks like a JavaScript object, and this is mostly right. The reason we said "mostly right" is that an array is also valid JSON, for example:

+ +
[
+  {
+    "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"
+    ]
+  }
+]
+ +

The above is perfectly valid JSON. You'd just have to access array items (in its parsed version) by starting with an array index, for example [0]["powers"][0].

+ +

Other notes

+ + + +

Active learning: Working through a JSON example

+ +

So, let's work through an example to show how we could make use of some JSON data on a website.

+ +

Getting started

+ +

To begin with, make local copies of our heroes.html and style.css files. The latter contains some simple CSS to style our page, while the former contains some very simple body HTML:

+ +
<header>
+</header>
+
+<section>
+</section>
+ +

Plus a {{HTMLElement("script")}} element to contain the JavaScript code we will be writing in this exercise. At the moment it only contains two lines, which grab references to the {{HTMLElement("header")}} and {{HTMLElement("section")}} elements and store them in variables:

+ +
const header = document.querySelector('header');
+const section = document.querySelector('section');
+ +

We have made our JSON data available on our GitHub, at https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

+ +

We are going to load it into our page, and use some nifty DOM manipulation to display it, like this:

+ +

+ +

Obtaining the JSON

+ +

To obtain the JSON, we use an API called {{domxref("XMLHttpRequest")}} (often called XHR). This is a very useful JavaScript object that allows us to make network requests to retrieve resources from a server via JavaScript (e.g. images, text, JSON, even HTML snippets), meaning that we can update small sections of content without having to reload the entire page. This has led to more responsive web pages, and sounds exciting, but it is beyond the scope of this article to teach it in much more detail.

+ +
    +
  1. To start with, we store the URL of the JSON we want to retrieve in a variable. Add the following at the bottom of your JavaScript code: + 
    let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    +
    2. +
  2. To create a request, we need to create a new request object instance from the XMLHttpRequest constructor, using the new keyword. Add the following below your last line: + 
    let request = new XMLHttpRequest();
    +
    3. +
  3. Now we need to open the request using the open() method. Add the following line: + 
    request.open('GET', requestURL);
    + +

    This takes at least two parameters — there are other optional parameters available. We only need the two mandatory ones for this simple example:

    + +
      +
    • The HTTP method to use when making the network request. In this case GET is fine, as we are just retrieving some simple data.
      • +
    • The URL to make the request to — this is the URL of the JSON file that we stored earlier.
      • +
    +
    4. +
  4. Next, add the following two lines — here we are setting the responseType to JSON, so that XHR knows that the server will be returning JSON, and that this should be converted behind the scenes into a JavaScript object. Then we send the request with the send() method: + 
    request.responseType = 'json';
+request.send();
    +
    5. +
  5. The last bit of this section involves waiting for the response to return from the server, then dealing with it. Add the following code below your previous code: + 
    request.onload = function() {
+  const superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
    +
    6. +
+ +

Here we are storing the response to our request (available in the response property) in a variable called superHeroes; this variable now contains the JavaScript object based on the JSON! We are then passing that object to two function calls — the first one fills the <header> with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the <section>.

+ +

We have wrapped the code in an event handler that runs when the load event fires on the request object (see onload) — this is because the load event fires when the response has successfully returned; doing it this way guarantees that request.response will definitely be available when we come to try to do something with it.

+ +

Populating the header

+ +

Now that we've retrieved the JSON data and converted it into a JavaScript object, let's make use of it by writing the two functions we referenced above. First of all, add the following function definition below the previous code:

+ +
function populateHeader(jsonObj) {
+  const myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  const myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  header.appendChild(myPara);
+}
+ +

We named the parameter jsonObj, to remind ourselves that this JavaScript object originated from JSON. Here we first create an {{HTMLElement("h1")}} element with createElement(), set its textContent to equal the squadName property of the object, then append it to the header using appendChild(). We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a concatenated string containing both the homeTown and formed properties of the object.

+ +

Creating the hero information cards

+ +

Next, add the following function at the bottom of the code, which creates and displays the superhero cards:

+ +
function showHeroes(jsonObj) {
+  const heroes = jsonObj['members'];
+
+  for (let i = 0; i < heroes.length; i++) {
+    const myArticle = document.createElement('article');
+    const myH2 = document.createElement('h2');
+    const myPara1 = document.createElement('p');
+    const myPara2 = document.createElement('p');
+    const myPara3 = document.createElement('p');
+    const 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:';
+
+    const superPowers = heroes[i].powers;
+    for (let j = 0; j < superPowers.length; j++) {
+      const 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);
+  }
+}
+ +

To start with, we store the members property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.

+ +

Next, we use a for loop to loop through each object in the array. For each one, we:

+ +
    +
  1. Create several new elements: an <article>, an <h2>, three <p>s, and a <ul>.
    2. +
  2. Set the <h2> to contain the current hero's name.
    3. +
  3. Fill the three paragraphs with their secretIdentity, age, and a line saying "Superpowers:" to introduce the information in the list.
    4. +
  4. Store the powers property in another new constant called superPowers — this contains an array that lists the current hero's superpowers.
    5. +
  5. Use another for loop to loop through the current hero's superpowers — for each one we create an <li> element, put the superpower inside it, then put the listItem inside the <ul> element (myList) using appendChild().
    6. +
  6. The very last thing we do is to append the <h2>, <p>s, and <ul> inside the <article> (myArticle), then append the <article> inside the <section>. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.
    7. +
+ +
+

Note: If you are having trouble getting the example to work, try referring to our heroes-finished.html source code (see it running live also.)

+
+ +
+

Note: If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the superheroes.json file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our JavaScript object basics article for more information on dot and bracket notation.

+
+ +

Converting between objects and text

+ +

The above example was simple in terms of accessing the JavaScript object, because we set the XHR request to convert the JSON response directly into a JavaScript object using:

+ +
request.responseType = 'json';
+ +

But sometimes we aren't so lucky — sometimes we receive a raw JSON string, and we need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we need to convert it to JSON (a string) before sending. Luckily, these two problems are so common in web development that a built-in JSON object is available in browsers, which contains the following two methods:

+ + + +

You can see the first one in action in our heroes-finished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that we set the XHR to return the raw JSON text, then used parse() to convert it to an actual JavaScript object. The key snippet of code is here:

+ +
request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  const superHeroesText = request.response; // get the string from the response
+  const superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +

As you might guess, stringify() works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:

+ +
let myJSON = { "name": "Chris", "age": "38" };
+myJSON
+let myString = JSON.stringify(myJSON);
+myString
+ +

Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using stringify() — saving the return value in a new variable — then checking it again.

+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: JSON.

+ +

Summary

+ +

In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

+ +

In this module

+ + diff --git "a/files/it/learn/riservatezza,_integrit\303\240_e_disponibilit\303\240/index.html" "b/files/it/learn/riservatezza,_integrit\303\240_e_disponibilit\303\240/index.html" new file mode 100644 index 0000000000..23b0a37a89 --- /dev/null +++ "b/files/it/learn/riservatezza,_integrit\303\240_e_disponibilit\303\240/index.html" @@ -0,0 +1,69 @@ +--- +title: 'Riservatezza, Integrità e Disponibilità' +slug: 'Learn/Riservatezza,_Integrità_e_Disponibilità' +tags: + - Iniziare + - Principiante + - Sicurezza + - Tutorial +translation_of: 'Archive/Security/Confidentiality,_Integrity,_and_Availability' +--- +
{{IncludeSubnav("/en-US/Learn")}}{{draft}}
+ +
+

Questo articolo discute gli obiettivi principali della sicurezza: riservatezza, integrità e disponibilità.

+
+ + + + + + + + + + + + +
Prerquisiti:Non sono rischiesti prerequisiti per questo articolo.
Obiettivo:Imparerai cosa sono riservatezza, integrità e disponibilità e come questi possono influire sui dati e il sistema.
+ +

Sommario

+ +

Il modello classico della sicurezza delle informazioni definisce tre obiettivi di sicurezza: il mantenimento della riservatezza, l'integrità, e la disponibiltà. Ciascun obiettivo tratta un differente aspetto del fornire protezione alle informazioni.

+ +

Apprendimento Attivo

+ +

Non sono ancora presenti attività di apprendimento attivo. Prendi in considerazione di contribuire, per favore.

+ +

Approfondimento

+ +

Riservatezza

+ +

Riservatezza significa proteggere le informazioni dagli accessi da parte di soggetti non autorizzati. In altre parole, solo chi è autorizzato a farlo può guadagnare l'accesso ai dati sensibili. Immagina i tuoi dati della banca. Soltanto tu dovresti poter accedervi e l'impiegato della banca che ti sta aiutando con una transazione e nessun altro. Un fallimento nel mantenimento della riservatezza significa che qualcuno che non dovrebbe avere l'accesso è riuscito ad ottenerlo, intenzionalmente o accidentalmente. Un fallimento di riservatezza di questo genere, comunemente conosciuto come breach o violazione, solitamente non è recuperabile. Una volta che il segreto viene svelato, non esiste alcun modo per celarlo di nuovo. Se i tuoi archivi bancari vengono postati su un sito pubblico, chiunque puù conoscere il tuo numero di conto, il tuo estratto conto, ecc... e queste informazioni non possono essere cancellate dalle loro menti, dai fogli, dai computer e qualunque altro posto. Quasi tutti i maggiori incidenti odierni di sicurezza riportati dai media implicano una importante perdita di riservatezza. 

+ +

Tirando le somme, una violazione della riservatezza significa che qualcuno guadagna l'accesso a delle informazioni a cui non dovrebbe averne.

+ +

Integrità

+ +

Integrità vuol dire garantire l'autenticità dell'informazione, che tale informazione non sia alterata e che la sorgente dell'informazione sia autentica. Immagina di avere un sito web e che venda alcuni prodotti su questo sito. Ora, immagina che dei malintenzionati possano fare acquisti sul tuo sito e malevolmente modifichino il prezzo dei tuoi prodotti, potendo in questo modo comprare qualnque cosa a qualunque prezzo scelgano. Questo sarebbe una mancanza di integrità, in quanto le tue informazioni, in questo caso il prezzo del prodotto, è stato modificato pur non avendo mai autorizzato tale modifica. Un altro esempio di fallimento di integrità è quando cerchi di connetteri ad un sito e un malintenzionato frapposto tra te e il sito reindirizzo il tuo traffico in un sito diverso. In questo caso, il sito a cui vieni indirizzato non è autentico.

+ +

Disponibiltà

+ +

Disponibilità significa che l'informazione è accessibile agli utenti autorizzati.

+ +

Prossimo Passo

+ + + +
+

Original Document Information

+ + +
diff --git a/files/it/learn/server-side/django/admin_site/index.html b/files/it/learn/server-side/django/admin_site/index.html new file mode 100644 index 0000000000..6cb1fac11a --- /dev/null +++ b/files/it/learn/server-side/django/admin_site/index.html @@ -0,0 +1,361 @@ +--- +title: 'Django Tutorial Part 4: Django admin site' +slug: Learn/Server-side/Django/Admin_site +tags: + - Articolo + - Codice + - Python + - Script + - Server + - Tutorial + - django + - django_admin + - imparare + - inizio + - nuovo +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")}}
+ +

Dopo aver creato i modelli per la nostra LocalLibrary, useremo il sito di Django Admin per aggiungere alcuni dati "reali" sui libri. Per prima cosa ti mostreremo come registrare i modelli con il sito di amministrazione, quindi ti mostreremo come accedere e creare alcuni dati. Alla fine dell'articolo mostreremo alcuni modi per migliorare ulteriormente la presentazione del sito di amministrazione.

+ + + + + + + + + + + + +
Prerequisiti:Prima completa: Django Tutorial Part 3: Using models.
Obbiettivi:Per capire i vantaggi e le limitazioni del sito di amministrazione Django, e usarlo per creare alcuni record per i nostri modelli.
+ +

Panoramica

+ +

L'applicazione di amministrazione Django può utilizzare i modelli per creare automaticamente un'area del sito che è possibile utilizzare per creare, visualizzare, aggiornare ed eliminare record. Questo può farti risparmiare molto tempo durante lo sviluppo, rendendo molto facile testare i tuoi modelli e capire se hai i dati giusti. L'applicazione di amministrazione può anche essere utile per la gestione dei dati in produzione, a seconda del tipo di sito Web. Il progetto Django lo consiglia solo per la gestione interna dei dati (vale a dire solo per gli amministratori o le persone interne alla tua organizzazione), poiché l'approccio model-centric non è necessariamente la migliore interfaccia possibile per tutti gli utenti e espone molti dettagli inutili sui modelli.

+ +

Tutta la configurazione richiesta per includere l'applicazione di amministrazione nel tuo sito Web è stata eseguita automaticamente quando hai creato il progetto skeleton (per informazioni sulle reali dipendenze necessarie, consulta Django docs). Di conseguenza, tutto ciò che devi fare per aggiungere i tuoi modelli all'applicazione admin è registrarli. Alla fine di questo articolo forniremo una breve dimostrazione di come è possibile configurare ulteriormente l'area di amministrazione per visualizzare meglio i dati del modello.

+ +

Dopo aver registrato i modelli, mostreremo come creare un nuovo "superutente", accedere al sito e creare alcuni libri, autori, istanze di libri e generi. Questi saranno utili per testare le viste e i modelli che inizieremo a creare nel prossimo tutorial.

+ +

Registrare i models 

+ +

Apri admin.py in catalog (/locallibrary/catalog/admin.py). Notare che essa già contiene l'istruzione django.contrib.admin:

+ +
from django.contrib import admin
+
+# Register your models here.
+
+ +

Registrare i modelli copiando il seguente testo nella parte inferiore del file. Questo codice importa semplicemente i modelli e quindi le chiamate admin.site.register Per registrarli.

+ +
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: Se hai accettato la sfida di creare un modello per rappresentare il linguaggio naturale di un libro, importalo e registralo anche tu (see the models tutorial article)!
+ +

Questo è il modo più semplice di registrare un modello o modelli con il sito. Il sito di amministrazione è altamente personalizzabile e parleremo di altri modi per registrare i tuoi modelli più in basso.

+ +

Creare un superuser

+ +

Per accedere al sito admin, abbiamo bisogno di un account utente con lo stato del personale abilitato. Per poter visualizzare e creare record, abbiamo anche bisogno che questo utente abbia i permessi per gestire tutti i nostri oggetti. Puoi creare un account "superutente" che abbia accesso completo al sito e tutte le autorizzazioni necessarie usando manage.py. Chiamare il seguente comando, nella stessa directory di manage.py, per creare il superutente. Ti verrà richiesto di inserire un nome utente, un indirizzo email e una password complessa.

+ +
python3 manage.py createsuperuser
+
+ +

Una volta che questo comando è stato completato, un nuovo superutente sarà stato aggiunto al database. Ora riavvia il server di sviluppo in modo da poter verificare l'accesso:

+ +
python3 manage.py runserver
+
+
+ +

Loggarsi come superuser e usare il sito

+ +

Per effettuare il login, utilizzare nell'URL /admin (esempio: http://127.0.0.1:8000/admin) e inserisci le tue nuove credenziali utente e password per superutente (verrai reindirizzato alla pagina di accesso e poi tornerai all'URL di / admin dopo aver inserito i tuoi dettagli). Questa parte del sito mostra tutti i nostri modelli, raggruppati per applicazione installata. È possibile fare clic sul nome di un modello per andare a una schermata in cui sono elencati tutti i record associati e è possibile fare ulteriori clic su tali record per modificarli. Puoi anche fare clic direttamente sul collegamento add accanto a ciascun modello per iniziare a creare un record di quel tipo.

+ +

Admin Site - Home page

+ +

Clicca sul link Add a destra di Books per creare un nuovo libro (verrà mostrata una finestra di dialogo come sotto). Nota come il titolo di ogni campo, il tipo di widget utilizzato, e l' help_text (se presente) matcha il valore che hai specificato nel modello. 

+ +

Immettere i valori per i campi. Puoi creare nuovi autori o generi premendo il pulsante + vicino ai rispettivi campi (o seleziona i valori esistenti dagli elenchi se li hai già creati). Quando hai finito puoi premere SAVE, Save and add another, o Save and continue editing per salvare il record.

+ +

Admin Site - Book Add

+ +
+

Note: A questo punto vorremmo che passassi un po 'di tempo ad aggiungere alcuni libri, autori e generi (ad es. Fantasy) alla tua applicazione. Assicurati che ogni autore e genere includa un paio di libri diversi (questo renderà le tue visualizzazioni di lista e di dettaglio più interessanti quando le implementeremo più avanti nella serie di articoli).

+
+ +

Al termine dell'aggiunta di libri, fai clic sul link Home nel segnalibro in alto per tornare alla pagina principale dell'amministratore. Quindi fare clic sul link Libri per visualizzare l'elenco corrente di libri (o su uno degli altri collegamenti per vedere altri elenchi di modelli). Ora che hai aggiunto alcuni libri, l'elenco potrebbe essere simile allo screenshot qui sotto. Viene visualizzato il titolo di ogni libro; questo è il valore restituito nel metodo __str __ () del modello Book che abbiamo specificato nell'ultimo articolo.

+ +

Admin Site - List of book objects

+ +

Da questa lista puoi cancellare libri selezionando la checkbox vicino al libro che non vuoi, e selezionando l'azione delete dalla lista di azioni Action, e premendo il pulsante Go. Puoi anche aggiungere nuovi libri, premendo ADD BOOK. 

+ +

Puoi editare un libro selezionando il suo nome dal link. La pagina di edit, mostrata sotto, è uguale a quella di aggiunta di un nuovo libro. Le differenze principali sono il titolo (Change book) e l'aggiunta di Delete, HISTORY e VIEW ON SITE (questo ultimo bottone appare perchè abbiamo definito il metodo get_absolute_url() nel modello).

+ +

Admin Site - Book Edit

+ +

Ora torna alla Home page (utilizzando il collegamento Home il percorso breadcrumb) e quindi visualizza gli elenchi Autore e Genere: dovresti averne già abbastanza creati da quando hai aggiunto i nuovi libri, ma sentiti libero di aggiungerne altri.

+ +

Ciò che sicuramente non avrai, sono delle Book Instances, perchè non vengono create da Books (invece possiamo creare un Book da una BookInstance — questo è il funzionamento del campo di tipo ForeignKey). Naviga indietro alla Home page e premi il bottone Add associato. Notare il campo id, largo ed univoco, che viene utilizzato per identificare una singola copia di un libro in una libreria.

+ +

Admin Site - BookInstance Add

+ +

Crea un numero di questi record per ciascuno dei tuoi libri. Imposta lo stato come Disponibile per almeno alcuni record e In prestito per gli altri. Se lo stato non è Disponibile, imposta anche una data di scadenza futura.

+ +

Questo è tutto! Ora hai imparato come configurare e utilizzare il sito di amministrazione. Hai anche creato record per Book, BookInstance, Genre e Author che saremo in grado di utilizzare una volta create le views e i modelli.

+ +

Configurazione avanzata

+ +

Django fa un buon lavoro nel creare un sito admin di base usando le informazioni dei modelli registrati:

+ + + +

Puoi rendere ancora più semplice da utilizzare l'interfaccia, ecco alcune delle cose che puoi fare:

+ + + +

In questa sezione esamineremo alcune modifiche che miglioreranno l'interfaccia per la nostra libreria locale, tra cui l'aggiunta di ulteriori informazioni agli elenchi di modelli di libri e autori e il miglioramento del layout delle loro viste di modifica. Non cambieremo la presentazione del modello Lingua e genere perché hanno solo un campo ciascuno, quindi non c'è alcun vantaggio reale nel farlo!

+ +

Per maggiori informazioni sulle customizzazioni possibili, consultare The Django Admin site (Django Docs).

+ +

Registrare una classe ModelAdmin

+ +

Per cambiare la visualizzazione dei modelli nell'interfaccia admin, dovremo definire una classe ModelAdmin e registrarla col modello.

+ +

Cominciamo col modello di Author. Apri admin.py nella applicazione catalog (/locallibrary/catalog/admin.py). Commentiamo la registrazione originaria (scrivendo prima della riga di codice un carattere) del modello Author:

+ +
# admin.site.register(Author)
+ +

Aggiungi una nuova registrazione AuthorAdmin.

+ +
# Define the admin class
+class AuthorAdmin(admin.ModelAdmin):
+    pass
+
+# Register the admin class with the associated model
+admin.site.register(Author, AuthorAdmin)
+
+ +

Aggiungiamo anche le classi ModelAdmin per Book, e BookInstance. Commentiamo anche qui le vecchie registrazioni:

+ +
# admin.site.register(Book)
+# admin.site.register(BookInstance)
+ +

Per registrare i nuovi modelli, per i propositi di questa dimostrazione, useremo il decoratore @register (che esegue la stessa azione della sintassi 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
+
+ +

Attualmente tutte le nostre classi di amministrazione sono vuote (vedi pass) cosi il comportamento di admin non e' cambiato! Ora possiamo estendere queste classi per definire i nostri specifici modelli di comportamento di admin.

+ +

Configurare le liste di visualizzazione

+ +

La LocalLibrary attualmente mostra una lista degli autori usando il nome oggetto generato da __str__(). Questo va bene quando hai solo pochi autori, ma una volta che ne hai molti potresti finire per avere dei duplicati. Per differenziarli, o solo perché vuoi mostrare informazioni più interessanti su ciascun autore, puoi utilizzare ad esempio list_display per aggiungere ulteriori campi alla visualizzazione. 

+ +

Sostituisci il tuo codice della classe AuthorAdmin con quello sotto. I campi da mostrare nella lista sono dichiaratiin una tupla nell'ordine desiderato, come mostrato sotto.

+ +
class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+
+ +

Naviga ora alla lista degli autori. I campi inseriti nella tupla ora dovrebbero essere mostrati:

+ +

Admin Site - Improved Author List

+ +

Per il nostro modello Book  mostreremo anche l'autore, author ed il genere, genre. author è un campo di tipo ForeignKey (uno-a-molti), quindi verrà rappresentato dal valore __str__() per il record associato. Rimpiazza la classe BookAdmin con la versione seguente.

+ +
class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+
+ +

Sfortunatamente non possiamo specificare direttamente il campo genre in list_display perchè è un campo di tipo ManyToManyField (Django impedisce questa operazione perché ci sarebbe traffico di "accesso" molto costosa al database nel farlo). Invece definiremo una funzione display_genre per prendere le informazioni sotto forma di stringa (la funzione che abbiamo chiamato sopra, la definiremo di seguito).

+ +
+

Note: Mostrare il genre potrebbe non essere una buona idea qui, a causa del "costo" dell'operazione del database. Ti stiamo mostrando come, perché chiamare le funzioni nei tuoi modelli può essere molto utile per altri motivi, ad esempio per aggiungere un link Elimina accanto a ogni elemento nell'elenco

+
+ +

Aggiungi il seguente codice nel tuo modello Book (models.py). Questa funzione crea una stringa contenente i primi tre valori del campo genre (se esistono) e creano una short_description che può essere utilizzata nel sito admin per questo metodo.

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

Dopo aver salvato il modello e aver aggiornato admin, apri il sito e vai alla lista di visualizzazione Books; ecco ciò che dovresti vedere:

+ +

Admin Site - Improved Book List

+ +

Il modello Genre (ed il modello Language, se ne hai definito uno) entrambi hanno un singolo campo, quindi non ha senso creare un modello aggiuntivo per mostrare campi aggiuntivi.

+ +
+

Note: potrebbe essere utile aggiornare il modello della lista di BookInstance per mostrare almeno anche lo status e la data di restituzione. L'abbiamo inserita come sfida alla fine di questo capitolo!

+
+ +

Aggiungere dei filtri alle liste

+ +

Una volta che hai un sacco di elementi in una lista, può essere utile poter filtrare quali oggetti sono visualizzati. Questo viene fatto elencando i campi nell'attributo list_filter. Rimpiazza la classe corrente BookInstanceAdmin con il codice di seguito.

+ +
class BookInstanceAdmin(admin.ModelAdmin):
+    list_filter = ('status', 'due_back')
+
+ +

La visualizzazione elenco includerà ora una casella filtro sulla destra. Nota come puoi scegliere le date e lo stato per filtrare i valori:

+ +

Admin Site - BookInstance List Filters

+ +

Organizzare il layout della visualizzazione dettaglio

+ +

Per impostazione predefinita, le viste di dettaglio dispongono tutti i campi verticalmente, nel loro ordine di dichiarazione nel modello. È possibile modificare l'ordine di dichiarazione, quali campi vengono visualizzati (o esclusi), se le sezioni vengono utilizzate per organizzare le informazioni, se i campi sono visualizzati orizzontalmente o verticalmente e anche quali widget di modifica vengono utilizzati nei moduli di amministrazione.

+ +
+

Note: I modelli LocalLibrary sono relativamente semplici, quindi non abbiamo un grosso bisogno di cambiare il layout; ne faremo comunque alcuni, solo a scopo dimostrativo.

+
+ +

Controllare quali campi sono visualizzati e come sono disposti

+ +

Aggiorna la tua classe AuthorAdmin class e aggiungi la riga di codice fields mostrata sotto in grassetto:

+ +
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')]
+
+ +

L'attributo fields elenca solo i campi che devono essere visualizzati nel modulo, in ordine. I campi vengono visualizzati verticalmente per impostazione predefinita, ma verranno visualizzati orizzontalmente se vengono ulteriormente raggruppati in una tupla (come mostrato nei campi "data" sopra).

+ +

Nel tuo sito web vai alla vista dettagli dell'autore - ora dovrebbe apparire come mostrato di seguito:

+ +

Admin Site - Improved Author Detail

+ +
+

Note: Puoi anche utilizzare l'attributo exclude per dichiarare una lista di attributi da escludere dal form (tutti gli altri attributi nel modello saranno mostrati). 

+
+ +

Organizzare la vista di dettaglio in sezioni

+ +

È possibile aggiungere "sezioni" per raggruppare le informazioni relative al modello all'interno del modulo dettagli, utilizzando l'attributo fieldsets.

+ +

Nel modello BookInstance abbiamo delle informazioni sul libro (esempio name, imprint, ed id) e sullo stato (status, due_back). Possiamo aggiungere queste informazioni in differenti sezioni aggiungendo il testo in grassetto alla classe BookInstanceAdmin.

+ +
@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_filter = ('status', 'due_back')
+
+    fieldsets = (
+        (None, {
+            'fields': ('book', 'imprint', 'id')
+        }),
+        ('Availability', {
+            'fields': ('status', 'due_back')
+        }),
+    )
+ +

Ogni sezione avrà il suo titolo (o None, se non vuoi un titolo) e una tupla associata di campi in un dizionario - il formato è complicato da descrivere, ma abbastanza facile da capire se si guarda il frammento di codice immediatamente sopra.

+ +

Ora vai a una vista di istanza di un libro nel tuo sito web; il modulo dovrebbe apparire come mostrato di seguito:

+ +

Admin Site - Improved BookInstance Detail with sections

+ +

Modifica in linea dei record associati

+ +

A volte può essere sensato essere in grado di aggiungere record associati nello stesso momento. Ad esempio, può avere senso avere sia le informazioni del libro che le informazioni sulle copie specifiche che si hanno nella stessa pagina di dettaglio.

+ +

Puoi farlo dichiarando inlines, di tipo TabularInline (layout orizzontale) o StackedInline (layout verticale, come il modello di default). Puoi aggiungere l'informazione di BookInstance inline nel dettaglio di Book aggiungendo le linee di codice in grassetto vicino a BookAdmin:

+ +
class BooksInstanceInline(admin.TabularInline):
+    model = BookInstance
+
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+    inlines = [BooksInstanceInline]
+
+ +

Ora vai a una vista per un libro nel tuo sito web: in basso ora dovresti vedere le istanze di libro relative a questo libro (immediatamente sotto i campi di genere del libro):Admin Site - Book with Inlines

+ +

In questo caso, tutto ciò che abbiamo fatto è dichiarare la nostra classe in linea tabellare, che aggiunge solo tutti i campi dal modello in linea. È possibile specificare tutti i tipi di informazioni aggiuntive per il layout, inclusi i campi da visualizzare, il loro ordine, se sono di sola lettura o meno, ecc. (Vedere TabularInline per ulteriori informazioni). 

+ +
+

Note: Ci sono una serie di limitazioni importanti in questa funzionalità! Nello screenshot qui sopra abbiamo tre istanze di libri esistenti, seguite da tre segnaposti per le nuove istanze di libri (che sembrano molto simili!). Sarebbe meglio NON avere istanze di libri di riserva per impostazione predefinita e aggiungerle semplicemente con un link Add another Book instance, o listare le BookInstance come link non leggibili da qui. La prima opzione può essere eseguita impostando l'attributo extra su 0 nel modello BooksInstanceInline, provalo tu stesso

+
+ +

Prova tu

+ +

Abbiamo imparato molto in questa sezione, quindi ora è il momento di provare alcune cose.

+ +
    +
  1. Per la list view di BookInstance, aggiungi un codice che permetta di mostrare libro, status, data di restituzione, e l'id (invece del testo di default restituito da __str__()).
    2. +
  2. Aggiungi una lista inline di oggetti Book inella scheda di dettaglio di Author usando lo stesso approccio che abbiamo utilizzato per Book/BookInstance.
    3. +
+ + + +

Sommario

+ +

Questo è tutto! Ora hai imparato come configurare il sito di amministrazione sia nella sua forma più semplice che migliorata, come creare un superutente e come navigare nel sito di amministrazione e visualizzare, eliminare e aggiornare i record. Lungo la strada hai creato un sacco di libri, pubblicazioni, generi e autori che saremo in grado di elencare e visualizzare una volta creati i nostri modelli e le nostre view.

+ +

Ulteriori letture

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}

+ +

In this module

+ + diff --git a/files/it/learn/server-side/django/authentication/index.html b/files/it/learn/server-side/django/authentication/index.html new file mode 100644 index 0000000000..a0e06c7252 --- /dev/null +++ b/files/it/learn/server-side/django/authentication/index.html @@ -0,0 +1,700 @@ +--- +title: 'Django Tutorial Part 8: User authentication and permissions' +slug: Learn/Server-side/Django/Authentication +tags: + - Articolo + - Forms + - Python + - Server + - Tutorial + - autenticazione + - django + - form + - sessione + - sessioni +translation_of: Learn/Server-side/Django/Authentication +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}
+ +

In questo tutorial ti mostreremo come consentire agli utenti di accedere al tuo sito con i propri account e come controllare cosa possono fare e vedere in base al fatto che abbiano effettuato l'accesso e le relative autorizzazioni. Come parte di questa dimostrazione, estenderemo il sito Web LocalLibrary, aggiungendo pagine di accesso e disconnessione e pagine specifiche per utente e personale per la visualizzazione di libri presi in prestito.

+ + + + + + + + + + + + +
Prerequisiti:Completare tutti i precedenti argomentioltre che il capitolo Django Tutorial Part 7: Sessions framework.
Obiettivi:Per capire come impostare e utilizzare l'autenticazione utente e le autorizzazioni.
+ +

Panoramica

+ +

Django fornisce un sistema di autenticazioni e permessi, costruito sulla base del framework delle sessioni discusso nel precedente tutorial, che consente di verificare le credenziali dell'utente e definire le azioni che ogni utente può eseguire. Il framework include modelli integrati per utenti e gruppi (un modo generico di applicare le autorizzazioni a più di un utente alla volta), permessi / flag che indicano se un utente può eseguire un'attività, formee viste per l'accesso degli utenti e strumenti di visualizzazione per limitare il contenuto.

+ +
+

Note: Secondo Django il sistema di autenticazione mira ad essere molto generico, e quindi non fornisce alcune funzionalità fornite in altri sistemi di autenticazione web. Le soluzioni per alcuni problemi comuni sono disponibili come pacchetti di terze parti. Ad esempio, limitazione dei tentativi di accesso e autenticazione contro terze parti (ad esempio OAuth).

+
+ +

In questa esercitazione ti mostreremo come abilitare l'autenticazione utente nel sito Web LocalLibrary, creare le tue pagine di accesso e di disconnessione, aggiungere autorizzazioni ai tuoi modelli e controllare l'accesso alle pagine. Useremo l'autenticazione / le autorizzazioni per visualizzare elenchi di libri presi in prestito sia per gli utenti che per i bibliotecari.

+ +

Il sistema di autenticazione è molto flessibile e, se lo desideri, puoi creare da zero URL, forms, viste e templates, basta chiamare l'API fornita per accedere all'utente.

+ +

Tuttavia, in questo articolo, utilizzeremo le viste di autenticazione "immagazzinate" in Django e i moduli per le nostre pagine di accesso e di disconnessione. Avremo ancora bisogno di creare alcuni modelli, ma è abbastanza facile. Ti mostreremo anche come creare le autorizzazioni e controllare lo stato e le autorizzazioni di accesso sia nelle viste che nei modelli.

+ +

Abilitare l'autenticazione

+ +

L'autenticazione è stata abilitata automaticamente (nel tutorial 2), quindi non è necessario fare altro in questo punto.

+ +
+

Note: La configurazione necessaria è stata fatta per noi quando abbiamo creato l'app utilizzando il comando startproject di django-admin. Le tabelle del database per gli utenti e le autorizzazioni del modello sono state create quando abbiamo inizialmente chiamato python manage.py migrate.

+
+ +

La configurazione è visibile nelle sezioni INSTALLED_APPS e MIDDLEWARE del file di progetto (locallibrary / locallibrary / settings.py), come mostrato di seguito:

+ +
INSTALLED_APPS = [
+    ...
+    'django.contrib.auth',  #Core authentication framework and its default models.
+    'django.contrib.contenttypes',  #Django content type system (allows permissions to be associated with models).
+    ....
+
+MIDDLEWARE = [
+    ...
+    'django.contrib.sessions.middleware.SessionMiddleware',  #Manages sessions across requests
+    ...
+    'django.contrib.auth.middleware.AuthenticationMiddleware',  #Associates users with requests using sessions.
+    ....
+
+ +

Creazione di utenti e gruppi

+ +

Hai già creato il tuo primo utente quando abbiamo consultato il sito di amministrazione di Django nel tutorial 4 (questo era un superutente, creato con il comando python manage.py createsuperuser). Il nostro superutente è già autenticato e ha tutte le autorizzazioni, quindi avremo bisogno di creare un utente di prova per rappresentare un utente normale del sito. Useremo il sito di amministrazione per creare i nostri gruppi locali e gli accessi al sito Web, poiché è uno dei modi più rapidi per farlo.

+ +
+

Note: Puoi anche creare utenti a livello di programmazione, come mostrato di seguito. Dovresti farlo, ad esempio, se sviluppi un'interfaccia per consentire agli utenti di iscriversi da soli (non si dovrebbe consentire agli utenti di accedere al sito di amministrazione).

+ +
from django.contrib.auth.models import User
+
+# Create user and save to the database
+user = User.objects.create_user('myusername', 'myemail@crazymail.com', 'mypassword')
+
+# Update fields and then save again
+user.first_name = 'John'
+user.last_name = 'Citizen'
+user.save()
+
+
+ +

Di seguito creeremo prima un gruppo e poi un utente. Anche se non abbiamo ancora nessuna autorizzazione da aggiungere per i membri della nostra biblioteca, se è necessario in seguito, sarà molto più facile aggiungerli una volta al gruppo rispetto a ciascun membro. Avviare il server di sviluppo e accedere al sito di amministrazione nel proprio browser Web locale (http:/127.0.0.1:8000/admin/). Accedi al sito usando le credenziali per il tuo account superuser. Il livello principale del sito di amministrazione mostra tutti i tuoi modelli, ordinati per "Applicazione Django". Dalla sezione Autenticazione e autorizzazione, è possibile fare clic sui collegamenti Utenti o Gruppi per visualizzare i record esistenti.

+ +

Admin site - add groups or users

+ +

Creiamo un nuovo gruppo per i membri della libreria.

+ +
    +
  1. Fare clic sul pulsante Aggiungi (accanto a Gruppo) per creare un nuovo gruppo; inserire il nome "Membri libreria" per il gruppo.Admin site - add group
    2. +
  2. Non abbiamo bisogno di permessi per il gruppo, quindi basta premere SALVA (verrai indirizzato a un elenco di gruppi).
    3. +
+ +

Ora creiamo un utente:

+ +
    +
  1. Torna alla home page del sito admin.
    2. +
  2. Fai clic sul pulsante Aggiungi accanto a Utenti per aprire la finestra di dialogo Aggiungi utente.Admin site - add user pt1
    3. +
  3. Immettere un nome utente e una password / conferma appropriati per l'utente del test
    4. +
  4. Premi SALVA.
    +
    + Il sito di amministrazione creerà il nuovo utente e ti condurrà immediatamente a una schermata Cambia utente in cui è possibile modificare il nome utente e aggiungere informazioni per i campi facoltativi del modello Utente. Questi campi includono il nome, il cognome, l'indirizzo e-mail e lo stato e le autorizzazioni dell'utente (deve essere impostato solo il flag Attivo). Più in basso è possibile specificare i gruppi e le autorizzazioni dell'utente e visualizzare date importanti relative all'utente (ad esempio la data di iscrizione e l'ultima data di accesso).Admin site - add user pt2
    5. +
  5. Nella sezione Gruppi, seleziona Gruppo di membri della biblioteca dall'elenco di Gruppi disponibili, quindi premi la freccia destra tra le caselle per spostarlo nella casella Gruppi scelti.Admin site - add user to group
    6. +
  6. Non abbiamo bisogno di fare altro qui, quindi seleziona di nuovo SALVA, per andare alla lista degli utenti.
    7. +
+ +

Questo è tutto! Ora hai un account "membro della libreria normale" che potrai utilizzare per il test (una volta implementate le pagine per consentire loro di accedere).

+ +
+

Note: Dovresti provare a creare un altro utente membro della libreria. Inoltre, crea un gruppo per i bibliotecari e aggiungi un utente anche a quello!

+
+ +

Impostazione delle viste di autenticazione

+ +

Django fornisce quasi tutto ciò che è necessario per creare pagine di autenticazione per gestire login, logout e gestione delle password "out of the box". Ciò include un mappatore di URL, viste e forms, ma non include i template - dobbiamo creare il nostro! In questa sezione, mostreremo come integrare il sistema predefinito nel sito Web di LocalLibrary e creare i modelli. Li inseriremo negli URL principali del progetto.

+ +
+

Note: Non è necessario utilizzare alcun codice, ma è probabile che lo si desideri perché rende le cose molto più semplici. Dovrai quasi certamente cambiare il codice di gestione del modulo se cambi il tuo modello utente (un argomento avanzato!), Ma anche così, sarai comunque in grado di utilizzare le funzioni di visualizzazione in stock.

+
+ +
+

Note: In questo caso, potremmo inserire ragionevolmente le pagine di autenticazione, inclusi gli URL e i modelli, all'interno della nostra applicazione di catalogo. Tuttavia, se avessimo più applicazioni sarebbe meglio separare questo comportamento di accesso condiviso e renderlo disponibile su tutto il sito, è quello che faremo qui!

+
+ +

URL del progetto

+ +

Aggiungi quanto segue alla fine del file urls.py del progetto (locallibrary / locallibrary / urls.py):

+ +
#Add Django site authentication urls (for login, logout, password management)
+urlpatterns += [
+    path('accounts/', include('django.contrib.auth.urls')),
+]
+
+ +

Vai a http://127.0.0.1:8000/accounts/ (nota la barra finale in avanti!) E Django mostrerà un errore dicendo che non è stato in grado di trovare questo URL e elenca tutti gli URL che ha provato. Da questo puoi vedere gli URL che funzioneranno, ad esempio:

+ +
+

Note: Usando il metodo precedente si aggiungono i seguenti URL con i nomi tra parentesi quadre, che possono essere utilizzati per invertire i mapping degli URL. Non è necessario implementare nient'altro: la mappatura degli URL di cui sopra esegue automaticamente la mappatura degli URL sottostanti.

+ +
accounts/ login/ [name='login']
+accounts/ logout/ [name='logout']
+accounts/ password_change/ [name='password_change']
+accounts/ password_change/done/ [name='password_change_done']
+accounts/ password_reset/ [name='password_reset']
+accounts/ password_reset/done/ [name='password_reset_done']
+accounts/ reset/<uidb64>/<token>/ [name='password_reset_confirm']
+accounts/ reset/done/ [name='password_reset_complete']
+
+ +

Ora prova a navigare verso l'URL di accesso (http://127.0.0.1:8000/accounts/login/). Ciò fallirà di nuovo, ma con un errore che ti dice che ci manca il modello richiesto (registration / login.html) sul percorso di ricerca del modello. Vedrai le seguenti righe elencate nella sezione gialla in alto:

+ +
Exception Type:    TemplateDoesNotExist
+Exception Value:    registration/login.html
+ +

Il passo successivo è creare una directory di registrazione sul percorso di ricerca e quindi aggiungere il file login.html.

+ +

Directory template

+ +

Gli URL (e le viste implicite) che abbiamo appena aggiunto si aspettano di trovare i loro template associati in una directory /registration/ da qualche parte nel percorso di ricerca dei template. Per questo sito, inseriremo le nostre pagine HTML nella cartella templates / registration /. Questa directory dovrebbe essere nella directory principale del progetto, cioè nella stessa directory delle cartelle del catalogo e della localibrary). Si prega di creare queste cartelle ora.

+ +
+

Note: La struttura delle cartelle dovrebbe essere:
+ locallibrary (Django project folder)
+    |_catalog
+    |_locallibrary
+    |_templates (new)
+                 |_registration

+
+ +

Per rendere queste directory visibili al caricatore di template (ovvero per inserire questa directory nel percorso di ricerca del modello), aprire le impostazioni del progetto (/locallibrary/locallibrary/settings.py) e aggiornare la riga 'DIRS' della sezione TEMPLATES come mostrato.

+ +
TEMPLATES = [
+    {
+        ...
+        'DIRS': [os.path.join(BASE_DIR, 'templates')],
+        'APP_DIRS': True,
+        ...
+
+ +

Login template

+ +
+

Importante: I modelli di autenticazione forniti in questo articolo sono una versione molto semplice / leggermente modificata dei modelli di login dimostrativi di Django. Potrebbe essere necessario personalizzarli per uso personale!

+
+ +

Crea un nuovo file HTML chiamato /locallibrary/templates/registration/login.html e dagli il seguente contenuto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+
+{% if form.errors %}
+  <p>Your username and password didn't match. Please try again.</p>
+{% endif %}
+
+{% if next %}
+  {% if user.is_authenticated %}
+    <p>Your account doesn't have access to this page. To proceed,
+    please login with an account that has access.</p>
+  {% else %}
+    <p>Please login to see this page.</p>
+  {% endif %}
+{% endif %}
+
+<form method="post" action="{% url 'login' %}">
+{% csrf_token %}
+<table>
+
+<tr>
+  <td>\{{ form.username.label_tag }}</td>
+  <td>\{{ form.username }}</td>
+</tr>
+
+<tr>
+  <td>\{{ form.password.label_tag }}</td>
+  <td>\{{ form.password }}</td>
+</tr>
+</table>
+
+<input type="submit" value="login" />
+<input type="hidden" name="next" value="\{{ next }}" />
+</form>
+
+{# Assumes you setup the password_reset view in your URLconf #}
+<p><a href="{% url 'password_reset' %}">Lost password?</a></p>
+
+{% endblock %}
+ +

Questo modello condivide alcune somiglianze con quelli che abbiamo visto prima: estende il nostro template di base e sovrascrive il blocco del contenuto. Il resto del codice è un codice di gestione della forma abbastanza standard, di cui parleremo in un successivo tutorial. Tutto quello che devi sapere per ora è che questo mostrerà un modulo in cui puoi inserire il tuo nome utente e password, e che se inserisci valori non validi ti verrà chiesto di inserire valori corretti quando la pagina si aggiorna.

+ +

Naviga indietro alla login page (http://127.0.0.1:8000/accounts/login/) una volta salvato il modello, dovresti vedere qualcosa del genere:

+ +

Library login page v1

+ +

Se si tenta di accedere con esito positivo l'utente verrà reindirizzato a un'altra pagina (per impostazione predefinita sarà questa http://127.0.0.1:8000/accounts/profile/). Il problema qui è che, per impostazione predefinita, Django si aspetta che dopo l'accesso si desideri essere indirizzati a una pagina del profilo, che può essere o non essere il caso. Poiché non hai ancora definito questa pagina, riceverai un altro errore!

+ +

Apri le impostazioni del progetto (/locallibrary/locallibrary/settings.py) e aggiungi il testo in basso alla fine. Ora quando accedi devi essere reindirizzato alla homepage del sito per impostazione predefinita.

+ +
# Redirect to home URL after login (Default redirects to /accounts/profile/)
+LOGIN_REDIRECT_URL = '/'
+
+ +

Logout template

+ +

Se navighi verso l'URL di disconnessione (http://127.0.0.1:8000/accounts/logout/), vedrai qualche comportamento strano: l'utente verrà disconnesso, ma sarai indirizzato pagina di logout dell'Amministratore. Non è quello che vuoi, se non altro perché il link di accesso su quella pagina ti porta alla schermata di accesso dell'amministratore (e questo è disponibile solo per gli utenti che hanno il permesso is_staff).

+ +

Crea e apri /locallibrary/templates/registration/logged_out.html. Copia il testo qui sotto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <p>Logged out!</p>
+  <a href="{% url 'login'%}">Click here to login again.</a>
+{% endblock %}
+ +

Questo modello è molto semplice. Visualizza semplicemente un messaggio che informa che sei stato disconnesso e fornisce un collegamento che puoi premere per tornare alla schermata di accesso. Se vai di nuovo all'URL di logout dovresti vedere questa pagina:

+ +

Library logout page v1

+ +

Password reset templates

+ +

Il sistema di reimpostazione della password predefinito utilizza la posta elettronica per inviare all'utente un link di ripristino. È necessario creare moduli per ottenere l'indirizzo e-mail dell'utente, inviare l'e-mail, consentire loro di immettere una nuova password e prendere nota del completamento dell'intero processo.

+ +

I seguenti modelli possono essere utilizzati come punto di partenza.

+ +

Password reset form

+ +

Questo è il modulo utilizzato per ottenere l'indirizzo e-mail dell'utente (per inviare l'e-mail di reimpostazione della password). Crea /locallibrary/templates/registration/password_reset_form.html e dagli il seguente contenuto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <form action="" method="post">
+  {% csrf_token %}
+  {% if form.email.errors %}
+    \{{ form.email.errors }}
+  {% endif %}
+      <p>\{{ form.email }}</p>
+    <input type="submit" class="btn btn-default btn-lg" value="Reset password">
+  </form>
+{% endblock %}
+
+ +

Password reset eseguito

+ +

Questo modulo viene visualizzato dopo che il tuo indirizzo email è stato raccolto. Crea /locallibrary/templates/registration/password_reset_done.html e dagli il seguente contenuto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <p>We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.</p>
+{% endblock %}
+
+ +

Password reset email

+ +

Questo modello fornisce il testo dell'email HTML contenente il link di ripristino che invieremo agli utenti. Crea /locallibrary/templates/registration/password_reset_email.html e dagli il seguente contenuto:

+ +
Someone asked for password reset for email \{{ email }}. Follow the link below:
+\{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
+
+ +

Password reset confirm

+ +

Questo modello fornisce il testo dell'email HTML contenente il link di ripristino che invieremo agli utenti. Crea /locallibrary/templates/registration/password_reset_email.html e dagli il seguente contenuto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+    {% if validlink %}
+        <p>Please enter (and confirm) your new password.</p>
+        <form action="" method="post">
+        {% csrf_token %}
+            <table>
+                <tr>
+                    <td>\{{ form.new_password1.errors }}
+                        <label for="id_new_password1">New password:</label></td>
+                    <td>\{{ form.new_password1 }}</td>
+                </tr>
+                <tr>
+                    <td>\{{ form.new_password2.errors }}
+                        <label for="id_new_password2">Confirm password:</label></td>
+                    <td>\{{ form.new_password2 }}</td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td><input type="submit" value="Change my password" /></td>
+                </tr>
+            </table>
+        </form>
+    {% else %}
+        <h1>Password reset failed</h1>
+        <p>The password reset link was invalid, possibly because it has already been used. Please request a new password reset.</p>
+    {% endif %}
+{% endblock %}
+
+ +

Password reset completato

+ +

Questo è l'ultimo modello di reimpostazione della password, che viene visualizzato per avvisarti quando la reimpostazione della password è riuscita. Crea /locallibrary/templates/registration/password_reset_complete.html e dagli il seguente contenuto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>The password has been changed!</h1>
+  <p><a href="{% url 'login' %}">log in again?</a></p>
+{% endblock %}
+ +

Testare la nuova pagina di autenticazione

+ +

Ora che hai aggiunto la configurazione dell'URL e creato tutti questi modelli, le pagine di autenticazione ora dovrebbero funzionare!

+ +

Puoi testare le nuove pagine di autenticazione usando questi URL:

+ + + +

Sarai in grado di testare la funzionalità di reimpostazione della password dal link nella pagina di accesso. Tieni presente che Django invierà solo e-mail di ripristino a indirizzi (utenti) già memorizzati nel suo database!

+ +
+

Note: Il sistema di reimpostazione della password richiede che il tuo sito Web supporti la posta elettronica, che va oltre lo scopo di questo articolo, quindi questa parte non funzionerà ancora. Per consentire il test, inserisci la seguente riga alla fine del tuo file settings.py. Questo registra tutte le e-mail inviate alla console (in questo modo è possibile copiare il link per la reimpostazione della password dalla console).

+ +
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
+
+ +

Vedi Servizi email (Django docs).

+
+ +

Test verso utenti autenticati

+ +

Questa sezione esamina cosa possiamo fare per controllare selettivamente il contenuto che l'utente vede in base al fatto che sia connesso o meno.

+ +

Testing nei templates

+ +

Puoi ottenere informazioni sull'utente attualmente connesso nei modelli con la variabile di modello \{{user}} (questo viene aggiunto al contesto del modello per impostazione predefinita quando imposti il progetto come abbiamo fatto nel nostro scheletro).

+ +

In genere testerai innanzitutto la variabile di modello \{{user.is_authenticated}} per determinare se l'utente è idoneo a vedere contenuti specifici. Per dimostrarlo, aggiorneremo la nostra barra laterale per visualizzare un collegamento "Accedi" se l'utente è disconnesso e un collegamento "Disconnetti" se sono connessi.

+ +

Apri il template (/locallibrary/catalog/templates/base_generic.html) e copia il seguente testo nel blocco della barra laterale, immediatamente prima del tag endblock.

+ +
  <ul class="sidebar-nav">
+
+    ...
+
+   {% if user.is_authenticated %}
+     <li>User: \{{ user.get_username }}</li>
+     <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li>
+   {% else %}
+     <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li>
+   {% endif %} 
+  </ul>
+ +

Come puoi vedere, utilizziamo i tag if-else-endif per visualizzare in modo condizionale il testo in base al fatto che \{{user.is_authenticated}} sia vero. Se l'utente è autenticato, sappiamo che abbiamo un utente valido, quindi chiamiamo \{{user.get_username}} per visualizzare il loro nome.

+ +

Creiamo gli URL di collegamento di accesso e di disconnessione utilizzando il tag URL e i nomi delle rispettive configurazioni di URL. Nota anche come abbiamo aggiunto ?next=\{{request.path}}. Ciò che fa è aggiungere un parametro URL next contenente l'indirizzo (URL) della pagina corrente, alla fine dell'URL collegato. Dopo che l'utente ha effettuato correttamente l'accesso / uscita, le viste useranno questo valore "next" per reindirizzare l'utente alla pagina in cui hanno prima fatto clic sul collegamento login / logout.

+ +
+

Note: Provalo! Se ti trovi nella home page e fai clic su Accedi / Esci nella barra laterale, dopo il completamento dell'operazione dovresti tornare alla stessa pagina.

+
+ +

Testing nelle views

+ +

Se si utilizzano le viste basate sulle funzioni, il modo più semplice per limitare l'accesso alle funzioni è applicare il decoratore login_required alla funzione di visualizzazione, come mostrato di seguito. Se l'utente ha effettuato l'accesso, il codice di visualizzazione verrà eseguito normalmente. Se l'utente non ha effettuato l'accesso, verrà reindirizzato all'URL di accesso definito nelle impostazioni del progetto (settings.LOGIN_URL), passando il percorso assoluto corrente come parametro successivo. Se l'utente riesce ad accedere, verrà riportato a questa pagina, ma questa volta autenticato.

+ +
from django.contrib.auth.decorators import login_required
+
+@login_required
+def my_view(request):
+    ...
+ +
+

Note: Puoi fare lo stesso genere di cose manualmente testando su request.user.is_authenticated, ma il decoratore è molto più conveniente!

+
+ +

Analogamente, il modo più semplice per limitare l'accesso agli utenti che hanno eseguito l'accesso nelle viste basate su classi è derivare da LoginRequiredMixin. Devi dichiarare questo mixin nella prima lista della superclasse, prima della classe della vista principale.

+ +
from django.contrib.auth.mixins import LoginRequiredMixin
+
+class MyView(LoginRequiredMixin, View):
+    ...
+ +

È inoltre possibile specificare un percorso alternativo per reindirizzare l'utente se non sono autenticati (login_url) e un nome parametro URL invece di "next" per inserire il percorso assoluto corrente (redirect_field_name).

+ +
class MyView(LoginRequiredMixin, View):
+    login_url = '/login/'
+    redirect_field_name = 'redirect_to'
+
+ +

Per informazioni ulteriori, consultare Django docs here.

+ +

Esempio — Elencare i libri correnti dello user

+ +

Ora che sappiamo come limitare una pagina a un particolare utente, creiamo una vista dei libri che l'utente corrente ha preso in prestito.

+ +

Sfortunatamente, non abbiamo ancora modo per gli utenti di prendere in prestito libri! Quindi, prima di poter creare l'elenco dei libri, estenderemo innanzitutto il modello BookInstance per supportare il concetto di prestito e utilizzare l'applicazione Django Admin per prestare diversi libri al nostro utente di test.

+ +

Models

+ +

Innanzitutto, dovremo rendere possibile agli utenti un prestito di BookInstance (abbiamo già uno stato e una data di scadenza, ma non abbiamo ancora alcuna associazione tra questo modello e un utente. creane uno usando un campo ForeignKey (uno-a-molti). Abbiamo anche bisogno di un meccanismo semplice per verificare se un libro in prestito è in ritardo.

+ +

Apri catalog/models.py, ed importa il modello User model da django.contrib.auth.models:

+ +
from django.contrib.auth.models import User
+
+ +

Successivamente, aggiungi il campo del mutuatario al modello BookInstance:

+ +
borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True)
+
+ +

Mentre siamo qui, aggiungiamo una property che possiamo chiamare dai nostri modelli per capire se una determinata istanza di un libro è in ritardo. Mentre potremmo calcolare questo nel modello stesso, usare una proprietà come mostrato di seguito sarà molto più efficiente.

+ +

Aggiungi questo da qualche parte vicino alla parte superiore del file:

+ +
from datetime import date
+ +

Ora aggiungi la seguente definizione di proprietà alla classe BookInstance:

+ +
@property
+def is_overdue(self):
+    if self.due_back and date.today() > self.due_back:
+        return True
+    return False
+ +
+

Note: Verifichiamo se due_back è vuoto prima di fare un confronto. Un campo vuoto forza Django a lanciare un errore invece di mostrare la pagina: i valori vuoti non sono confrontabili. Questo non è qualcosa che vorremmo far provare ai nostri utenti!

+
+ +

Ora che abbiamo aggiornato i nostri modelli, dovremo effettuare nuove migrazioni sul progetto e quindi applicare tali migrazioni:

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+
+ +

Admin

+ +

Ora apri il catalogo/admin.py e aggiungi il campo del mutuatario alla classe BookInstanceAdmin sia in list_display che in fielsets, come mostrato di seguito. Questo renderà il campo visibile nella sezione Amministrazione, permettendoci di assegnare un Utente a una BookInstance quando necessario.

+ +
@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_display = ('book', 'status', 'borrower', 'due_back', 'id')
+    list_filter = ('status', 'due_back')
+
+    fieldsets = (
+        (None, {
+            'fields': ('book','imprint', 'id')
+        }),
+        ('Availability', {
+            'fields': ('status', 'due_back','borrower')
+        }),
+    )
+ +

Prestiamo qualche libro

+ +

Ora che è possibile noleggiare libri a un utente specifico, vai a prestare un certo numero di record su BookInstance. Imposta il campo preso in prestito all'utente di test, imposta lo stato "In prestito" e imposta le scadenze sia nel futuro che nel passato.

+ +
+

Note: Non spiegheremo nuovamente il processo, poiché sai già come utilizzare il sito di amministrazione!

+
+ +

View dei prestiti

+ +

Ora aggiungeremo una vista per ottenere l'elenco di tutti i libri che sono stati prestati all'utente corrente. Useremo la stessa visualizzazione di elenco generica basata sulla classe che conosciamo, ma questa volta importeremo e deriverà da LoginRequiredMixin, in modo che solo un utente che ha effettuato l'accesso possa chiamare questa vista. Scegliamo anche di dichiarare un template_name, piuttosto che usare l'impostazione predefinita, perché potremmo finire per avere alcuni elenchi diversi di record di BookInstance, con visualizzazioni e modelli diversi.

+ +

Aggiungi quanto segue al catalog/views.py:

+ +
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')
+ +

Per limitare la nostra query solo agli oggetti BookInstance per l'utente corrente, re-implementiamo get_queryset () come mostrato sopra. Si noti che "o" è il codice memorizzato per "in prestito" e ordiniamo per data di restituzione, in modo che gli elementi più vecchi vengano visualizzati per primi.

+ +

Conf. URL per libri in prestito

+ +

Ora apri /catalog/urls.py e aggiungi un path() che punta alla vista precedente (puoi semplicemente copiare il testo qui sotto alla fine del file).

+ +
urlpatterns += [
+    path('mybooks/', views.LoanedBooksByUserListView.as_view(), name='my-borrowed'),
+]
+ +

Template per i libri in prestito

+ +

Ora, tutto ciò che dobbiamo fare per questa pagina è aggiungere un template. Per prima cosa, crea il file template /catalog/templates/catalog/bookinstance_list_borrowed_user.html e dagli il seguente contenuto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+    <h1>Borrowed books</h1>
+
+    {% if bookinstance_list %}
+    <ul>
+
+      {% for bookinst in bookinstance_list %}
+      <li class="{% if bookinst.is_overdue %}text-danger{% endif %}">
+        <a href="{% url 'book-detail' bookinst.book.pk %}">\{{bookinst.book.title}}</a> (\{{ bookinst.due_back }})
+      </li>
+      {% endfor %}
+    </ul>
+
+    {% else %}
+      <p>There are no books borrowed.</p>
+    {% endif %}
+{% endblock %}
+ +

Questo modello è molto simile a quelli che abbiamo creato precedentemente per gli oggetti Libro e Autore. L'unica cosa "nuova" qui è che controlliamo il metodo che abbiamo aggiunto nel modello (bookinst.is_overdue) e lo usiamo per cambiare il colore degli elementi scaduti.

+ +

Quando il server di sviluppo è in esecuzione, dovresti essere in grado di visualizzare l'elenco per un utente che ha effettuato l'accesso nel tuo browser all'indirizzo http://127.0.0.1:8000/catalog/mybooks/. Provalo con il tuo utente loggato e disconnesso (nel secondo caso, dovresti essere reindirizzato alla pagina di login).

+ +

Aggiungi l'elenco alla barra laterale

+ +

L'ultimo passo è aggiungere un link per questa nuova pagina nella barra laterale. Inseriremo questo nella stessa sezione in cui vengono visualizzate altre informazioni per l'utente che ha effettuato l'accesso. Aprire il modello di base (/locallibrary/catalog/templates/base_generic.html) e aggiungere la linea in grassetto alla barra laterale come mostrato.

+ +
 <ul class="sidebar-nav">
+   {% if user.is_authenticated %}
+   <li>User: \{{ user.get_username }}</li>
+   <li><a href="{% url 'my-borrowed' %}">My Borrowed</a></li>
+   <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li>
+   {% else %}
+   <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li>
+   {% endif %}
+ </ul>
+
+ +

Che cosa vedo?

+ +

Quando un utente ha effettuato l'accesso, vedrà il link I miei prestiti nella barra laterale e l'elenco dei libri visualizzati come segue (il primo libro non ha una data di scadenza, che è un bug che speriamo di risolvere in un tutorial successivo!).

+ +

Library - borrowed books by user

+ +

Permessi

+ +

Le autorizzazioni sono associate ai modelli e definiscono le operazioni che possono essere eseguite su un'istanza del modello da un utente che dispone dell'autorizzazione. Per impostazione predefinita, Django aggiunge automaticamente autorizzazioni di aggiunta, modifica ed eliminazione a tutti i modelli, che consentono agli utenti con le autorizzazioni di eseguire le azioni associate tramite il sito di amministrazione. È possibile definire le proprie autorizzazioni per i modelli e concederle ad utenti specifici. È inoltre possibile modificare le autorizzazioni associate a diverse istanze dello stesso modello.

+ +

I test sulle autorizzazioni nelle viste e nei modelli sono quindi molto simili per il test sullo stato di autenticazione (e infatti, il test per un'autorizzazione verifica anche l'autenticazione).

+ +

Models

+ +

Dfeinire permessi è un'azione svolta tramite la sezione "class Meta", utilizzando il campo permissions. È possibile specificare tutte le autorizzazioni necessarie in una tupla, ogni autorizzazione viene definita in una tupla nidificata contenente il nome di autorizzazione e il valore di visualizzazione delle autorizzazioni. Ad esempio, potremmo definire un'autorizzazione per consentire a un utente di contrassegnare che un libro è stato restituito come mostrato:

+ +
class BookInstance(models.Model):
+    ...
+    class Meta:
+        ...
+        permissions = (("can_mark_returned", "Set book as returned"),)
+ +

Potremmo quindi assegnare l'autorizzazione a un gruppo "Bibliotecario" nel sito di amministrazione. Apri il catalogo / models.py e aggiungi l'autorizzazione come mostrato sopra. Dovrai rieseguire le tue migrazioni (esegui python3 manage.py makemigrations e python3 manage.py migrate) per aggiornare il database.

+ +

Templates

+ +

I permessi correnti di un utente sono storati in una variabile \{{ perms }}. Puoi verificare se l'utente corrente ha un permesso particolare usando il nome specifico della variabile all'interno della "app" Django associata, ad es. \{{ perms.catalog.can_mark_returned }} sarà True se lo user ha i permessi, e False altrimenti. Tipicamente testiamo i permessi utilizzando il tag {% if %} come mostrato:

+ +
{% if perms.catalog.can_mark_returned %}
+    <!-- We can mark a BookInstance as returned. -->
+    <!-- Perhaps add code to link to a "book return" view here. -->
+{% endif %}
+
+ +

Views

+ +

Le autorizzazioni possono essere verificate nella funzione vista utilizzando il decoratore permission_required o in una visualizzazione basata su classi che utilizza PermissionRequiredMixin. Lo schema e il comportamento sono gli stessi dell'autenticazione di accesso, anche se, naturalmente, è possibile che sia necessario aggiungere multiple autorizzazioni.

+ +

Decoratore:

+ +
from django.contrib.auth.decorators import permission_required
+
+@permission_required('catalog.can_mark_returned')
+@permission_required('catalog.can_edit')
+def my_view(request):
+    ...
+ +

Views.

+ +
from django.contrib.auth.mixins import PermissionRequiredMixin
+
+class MyView(PermissionRequiredMixin, View):
+    permission_required = 'catalog.can_mark_returned'
+    # Or multiple permissions
+    permission_required = ('catalog.can_mark_returned', 'catalog.can_edit')
+    # Note that 'catalog.can_edit' is just an example
+    # the catalog application doesn't have such permission!
+ +

Esempio

+ +

Non aggiorneremo la LocalLibrary qui; forse nel prossimo tutorial!

+ +

Prova tu

+ +

In precedenza in questo articolo, vi abbiamo mostrato come creare una pagina per l'utente corrente che elenca i libri che hanno preso in prestito. La sfida ora è creare una pagina simile che sia visibile solo per i bibliotecari, che mostri tutti i libri presi in prestito e che includa il nome di ciascun mutuatario.

+ +

Dovresti essere in grado di seguire lo stesso schema dell'altra vista. La differenza principale è che dovrai limitare la visualizzazione solo ai bibliotecari. Puoi farlo a seconda che l'utente sia un membro del personale (decoratore di funzioni: staff_member_required, template variabile: user.is_staff) ma ti raccomandiamo invece di utilizzare il permesso can_mark_returned e PermissionRequiredMixin, come descritto sopra nella sezione precedente.

+ +
+

Importante: Ricordati di non utilizzare il superutente per i test basati sulle autorizzazioni (i controlli delle autorizzazioni restituiscono sempre true per i superutenti, anche se non è ancora stata definita un'autorizzazione!). Invece, crea un utente di libreria e aggiungi il permesso richiesto.

+
+ +

Quando hai finito, la tua pagina dovrebbe apparire come lo screenshot qui sotto.

+ +

All borrowed books, restricted to librarian

+ + + +

Sommario

+ +

Lavoro eccellente: ora hai creato un sito Web in cui i membri della biblioteca possono accedere e visualizzare il proprio contenuto e che i bibliotecari (con il permesso corretto) possono utilizzare per visualizzare tutti i libri in prestito ei loro mutuatari. Al momento stiamo ancora solo visualizzando i contenuti, ma gli stessi principi e tecniche sono utilizzati quando si desidera iniziare a modificare e aggiungere dati.

+ +

Nel nostro prossimo articolo, vedremo come è possibile utilizzare i moduli di Django per raccogliere input dell'utente e quindi iniziare a modificare alcuni dei nostri dati memorizzati.

+ +

Vedi anche

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}

+ +

 

+ +

In questo modulo

+ + + +

 

diff --git a/files/it/learn/server-side/django/development_environment/index.html b/files/it/learn/server-side/django/development_environment/index.html new file mode 100644 index 0000000000..75d6cd9ffb --- /dev/null +++ b/files/it/learn/server-side/django/development_environment/index.html @@ -0,0 +1,415 @@ +--- +title: Impostazione ambiente di sviluppo per Django +slug: Learn/Server-side/Django/development_environment +tags: + - Ambiente di sviluppo + - Intro + - Principiante + - Python + - django +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")}}
+ +

Ora che sai a cosa serve Django, ti mostreremo come creare e testare un ambiente di sviluppo per Django su Windows, Linux (Ubuntu), e macOS — qualsiasi sistema operativo, comune, tu stia usando, questo articolo ti darà tutto il necessario per iniziare a sviluppare applicazioni Django.

+ + + + + + + + + + + + +
Prerequisiti:Saper aprire un terminale / linea di comando. Saper installare un pacchetto software sul tuo sistema operativo.
Obiettivo:Avere un ambiente di sviluppo per Django (2.0) sul tuo computer.
+ +

Panoramica sull'ambiente di sviluppo per Django

+ +

Django rende molto semplice impostare il tuo computer per iniziare lo sviluppo di web application. Questa sezione spiega cosa avrai nel tuo ambiente di sviluppo, e fornirà una panoramica delle possibili impostazioni e configurazioni. Il resto dell'articolo spiega il metodo raccomandato per installare l'ambiente di sviluppo di Django su Ubuntu, macOS, e Windows, ed infine come testarlo.

+ +

Cosa è l'ambiente di sviluppo Django?

+ +

L'ambiente di sviluppo è un'installazione di Django sul tuo computer che puoi usare per sviluppare e testare applicazioni Django prima di metterle in ambiente di produzione.

+ +

Gli strumenti principali che Django fornisce sono una serie di script Python per creare e lavorare sui progetti Django, insieme ad un semplice webserver di sviluppo che puoi usare per testare localmente (ad es. sul tuo computer, non su un web server esterno) le applicazione web di Django usando un browser sul tuo computer.

+ +

Ci sono altri strumenti periferici, che formano l'ambiente di sviluppo, che non tratteremo qui. Questi includono cose come editor di testo o IDE per modificare il codice, e uno strumento per gestire il controllo di versione come Git per gestire in modo affidabile differenti versioni del tuo codice. Assumiamo che tu abbia già un editor di testo installato.

+ +

Quali sono le opzioni di setup di Django?

+ +

Django è estremamente flessibile in termni di come e dove può essere installato e configurato. Django può essere:

+ + + +

Ognuna di queste opzioni richiede configurazioni e setup leggermente diverse. La seguente sottosezione spiega alcune di queste possibilità. Per il resto dell'articolo mostreremo come impostare Django in un piccolo numero di sistemi operativi, e questo setup sarà assunto valido per tutto il modulo.

+ +
+

Nota: Altri possbili metodi di installazione sono descritti nella documentazione ufficiale di Django. Diamo i link al documento appropriato più avanti.

+
+ +

Quali sistemi operativi sono supportati?

+ +

Le applicazioni Django possono essere eseguite su quasi tutte le macchine che possono eseguire il linguaggio Python 3: Windows, macOS, Linux/Unix, Solaris, per nominarne alcuni. Quasi tutti i computer hanno le caratteristiche per eseguire Django durante lo sviluppo.

+ +

In questo articolo tratteremo dei casi Windows, macOS, e Linux/Unix.

+ +

Quale versione di Python dovrei usare?

+ +

Django esegue sopra Python, e può essere usato sia con Python 2 o Python 3 (o entrambi). Quando scegli una versione devi stare attento che:

+ + + + + +
+

Nota: Storicamente Python 2 era la scelta più realistica, perché poche delle librerie di terze parti erano disponibili per Python 3. Il trend corrente è che molti dei nuovi package su Python Package Index (PyPi) supportano entrambe le versioni di Python. Mentre esistono ancora moli package che sono disponibili esclusivamente per  Python 2, scegliere Python 3 è ora una scelta fattibile.

+
+ +

Ti raccomandiamo di usare l'ultima versione di Python 3 a meno che il sito non dipenda da librerie di terze parti disponibili solo per Python 2.

+ +

Questo articolo spiegherà come installare un ambiente per Python 3 (il setup equivalente per Python 2 dovrebbe essere molto simile).

+ +

Dove posso scaricare Django?

+ +

Ci sono tre posti dove scaricare Django:

+ + + +

Questo articolo mostra come installare Django da PyPi, in modo da avere l'ultima versione stabile.

+ +

Quale database?

+ +

Django supporta 4 database principali (PostgreSQL, MySQL, Oracle e SQLite), e ci sono librerie che forniscono vari livelli di supporto ai più popolari  database SQL e NOSQL. Ti raccomandiamo di scegliere lo stesso database in sviluppo e in produzione (nonostante Django astragga le differenze tra i database usando il suo Object-Relational Mapper (ORM), ci sono potenziali problemi che è bene evitare).

+ +

Per questo articolo (e molti altri di questo modulo) useremo SQLite,che memorizza i dati in un file. SQLite è da intendersi come un database leggero senza supporto per un alto livello di concorrenza. Tutta via è una scelta eccellente per applicazioni  che fanno principalmente sola lettura.

+ +
+

Nota: Django è configurato per usare SQLite di default quando fai partire il tuo progetto usando gli strumenti standard (django-admin).  E' una scelta ottima quando stai iniziando perchè non necessita di configurazioni. 

+
+ +

Installare da sistema o in un ambiente virtuale di Python?

+ +

Quando installi Python 3 sul tuo computer hai un singolo ambiente globale (inteso come insieme di pacchetti installati) per il tuo codice Python, che puoi gestire usando pip3. Puoi installare qualsiasi pacchetto Python tu voglia, ma puoi installarne solo una certa versione alla volta. Questo vuol dire che ogni cambiamento che fai in una applicazione Python potenzialmente può aver effetto sulle altre, e quindi puoi avere una sola versione di Django alla volta.

+ +

Sviluppatori Python/Django con un po di esperienza spesso decidono di eseguire le loro applicazioni in un ambiente Python virtuale. Questo permette a gli sviluppatori di avere diversi ambienti di Django in un singolo computer, permettendogli di creare nuovi siti web (usando l'ultima versione corrente di Django) mentre mantengono siti web che fanno affidamento a versioni più vecchie. Gli sviluppatori del team di Django raccomandano di usare questi ambienti virtuali!

+ +

Quando si sta iniziando l'approccio iniziale che usate non è importante. Sebbene l'installazione sia un po' più facile, abbiamo deciso di mostrarti come installare Django direttamente sul Python 3 di sistema.

+ +
+

Importante: Il resto dell'articolo mostra come impostare Django in un ambiente con Python 3, su Ubuntu Linux, Mac OS X, e Windows 10.

+
+ +

Installare Python 3

+ +

Per usare Django devi installare Python 3 sul tuo sistema operativo. Avrai bisogno anche di Python Package Index  — pip3 — che viene usato per gestire (installare, aggiornare, e rimuovere) package/librerie Python usate da Django altre tue applicazioni Python.

+ +

Questa sezione mostra brevemente come puoi controllare quali versioni sono presenti, e se necessario installare una nuova versione, per Ubuntu Linux 16.04, Mac OS X, e Windows 10.

+ +
+

Nota: In base alla tua piattaforma, potrebbe essere possibile installare Python/pip dal gestore di pacchetti del sistema operativo o tramite altri meccanismi. Per molte piattaforme puoi scaricare i file di installazione da https://www.python.org/downloads/ usando le istruzioni per il vostro sistema operativo.

+
+ +

Ubuntu 16.04

+ +

Ubuntu Linux include Python 3 di default. Puoi aver conferma di questo eseguendo il seguente comando nel terminale bash:

+ +
python3 -V
+ Python 3.5.2
+ +

Tuttavia il Python Package Index di cui hai bisogno per installare package Python 3 (incluso Django)  non è disponibile di default. Puoi installare pip3 dal terminale bash usando:

+ +
sudo apt-get install python3-pip
+
+ +

Mac OS X

+ +

Mac OS X "El Capitan" non include Python 3. Puoi averne conferma eseguendo il seguente comando nel terminale bash:

+ +
python3 -V
+ -bash: python3: command not found
+ +

Puoi installare facilmente Python 3 (inseme a pip3) da python.org:

+ +
    +
  1. Scarica l'installer: +
      +
    1. Vai su https://www.python.org/downloads/
      2. +
    2. Seleziona Download Python 3.5.2 (il minor del numero di versione esatto può essere differente).
      3. +
    +
    2. +
  2. Cercare il file usando Finder, fai doppio-click sul file. Segui le istruzioni dell'installazione.
    3. +
+ +

Per essere sicuro della corretta installazione di Python 3:

+ +
python3 -V
+ Python 3.5.20
+
+ +

Similmente puoi controllare che pip3 sia installato guardando i package disponibili:

+ +
pip3 list
+ +

Windows 10

+ +

Windows non include Python di default, ma puoi installarlo facilmente (insieme a pip3) da python.org:

+ +
    +
  1. Scarica l'installer: +
      +
    1. Vai su https://www.python.org/downloads/
      2. +
    2. Seleziona Download Python 3.5.2 (il minor del numero di versione esatto può essere differente).
      3. +
    +
    2. +
  2. Installa Python facendo double-click sul file scaricato e segui le istruzioni
    3. +
+ +

Puoi verificare che Python sia stato installato correttamente digitando sulla linea di comando:

+ +
py -3 -V
+ Python 3.5.2
+
+ +

L'installer di Windows contiene pip3 (Python package manager) di default. Puoi vedere la lista dei pacchetti installati usando:

+ +
pip3 list
+
+ +
+

Nota: L'installer dovrebbe essere impostato ovunque tu voglia, perché il comando di sopra funzioni. Se tuttavia dovessi ottenere un messaggio che Python non può essere trovato, potresti aver dimenticato di aggiungerlo al path di sistema. Puoi farlo eseguendo di nuovo l'installer, scegliendo "Modify" e selezionando "Add Pyhton to environment variables" nella seconda pagina.

+
+ +

Utilizzare Django all'interno di un ambiente virtuale Python

+ +

Le librerie che useremo per la creazione dei nostri ambienti virtuali sono virtualenvwrapper (Linux e macOS) e virtualenvwrapper-win (Windows), che a loro volta utilizzano entrambi il tool virtualenv. Gli strumenti wrapper creano un'interfaccia coerente per gestire interfacce su tutte le piattaforme.

+ +

Installare il software virtual environment

+ +

Setup del virtual environment su Ubuntu

+ +

Dopo l'installazione di Python e pip puoi installare virtualenvwrapper (che comprende virtualenv). La guida ufficiale di installazione si può trovare qui, oppure seguire le istruzioni sotto.

+ +

Installare il tool utilizzando pip3:

+ +
sudo pip3 install virtualenvwrapper
+
+ +

Poi aggiungi le seguenti linee alla fine del tuo file di startup della shell (questo è un file nascosto chiamato .bashrc nella tua directory home). Questo imposta la posizione in cui dovrebbero vivere i virtual environment, la posizione delle tue directory di sviluppo dei progetti e la posizione dello script installato con questo pacchetto:

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

Nota: Le variabili VIRTUALENVWRAPPER_PYTHON e VIRTUALENVWRAPPER_VIRTUALENV_ARGS puntano alla posizione di installazione normale per Python3, e source /usr/local/bin/virtualenvwrapper.sh punta alla posizione normale dello script virtualenvwrapper.sh. Se il virtualenv non funziona quando lo si testa, una cosa da controllare è che Python e lo script siano nella posizione attesa (e quindi modificare il file di startup adeguatamente).
+
+ Puoi trovare le posizioni corrette per il tuo sistema utilizzando i comandi which virtualenvwrapper.sh e which python3.

+
+ +

Poi ricarica il file di startup eseguendo il seguente comando nel terminale:

+ +
source ~/.bashrc
+ +

A questo punto si dovrebbe vedere un blocco di script che viene eseguito come mostrato sotto:

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

Ora puoi creare un nuovo ambiente virtuale con il comando mkvirtualenv.

+ +

Setup di un ambiente virtuale su macOS

+ +

Impostare un virtualenvwrapper su macOS è quasi esattamente la stessa cosa che su Ubuntu (ancora una volta, si possono seguire le istruzioni o della guida official installation oppure quelle qui sotto.

+ +

Installare virtualenvwrapper (e costruire virtualenv) utilizzando pip come mostrato.

+ +
sudo pip3 install virtualenvwrapper
+ +

Poi aggiungi le seguenti linee alla fine del file di startup della shell.

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh
+ +
+

Nota: la variabile VIRTUALENVWRAPPER_PYTHON punta alla normale posizione di installazione per Python3, e source /usr/local/bin/virtualenvwrapper.sh punta alla normale posizione dello script virtualenvwrapper.sh. Se il virtualenv non funziona quando lo si testa, una cosa da controllare è che Python e lo script siano nella posizione attesa (e poi modificare il file di startup adeguatamente).

+ +

Per esempio, un test di installazione su macOS avrà le seguenti linee necessarie nel file di 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
+ +

Puoi trovare le posizioni corrette per il tuo sistema utilizzando i comandi which virtualenvwrapper.sh e which python3.

+
+ +

Queste sono le stesse linee come per Ubuntu, ma il file di startup è il file nascosto chiamato (diversamente) .bash_profile nella tua cartella home.

+ +
+

Nota: Se non riesci a trovare .bash_profile per modificarlo nel finder, puoi anche aprirlo nel terminale utilizzando nano.

+ +

I comandi saranno simili a questi:

+ +
cd ~  # Navigate to my home directory
+ls -la #List the content of the directory. YOu should see .bash_profile
+nano .bash_profile # Open the file in the nano text editor, within the terminal
+# Scroll to the end of the file, and copy in the lines above
+# Use Ctrl+X to exit nano, Choose Y to save the file.
+
+
+ +

Poi ricarica il file di startup facendo la seguente chiamata nel terminale:

+ +
source ~/.bash_profile
+ +

A questo punto, si dovrebbero vedere una serie di script che vengono eseguiti (gli stessi script dell'installazione in Ubuntu). Ora dovresti essere in grado di creare un nuovo virtual environment con il comando mkvirtualenv.

+ +

Setup del virtual environment Windows 10

+ +

Installare virtualenvwrapper-win è anche più semplice di settare virtualenvwrapper perché non hai bisogno di configurare dove i tool memorizzano l'informazione dei virtual environment (c'è un valore di dafault). Tutto ciò che devi fare è eseguire il seguente comando nel prompt dei comandi:

+ +
pip3 install virtualenvwrapper-win
+ +

Ora sei in grado di creare un nuovo virtual environment con il comando mkvirtualenv.

+ +

Creazione di un virtual environment

+ +

Una volta installato virtualenvwrapper o virtualenvwrapper-win allora lavorare con virtual environment è molto simile su tutte le piattaforme.

+ +

Ora puoi creare un nuovo virtual environment col comando mkvirtualenv . Quando questo comando viene eseguito vedrai l'ambiente che viene settato (ciò che vedrai è leggermente specifico della piattaforma). Quando il comando viene completato il nuovo ambiente virtuale sarà attivo — potrai vederlo perché l'inizio del prompt sarà il nome dell'environment tra parentesi (sotto mostriamo questo per Ubuntu, ma la linea finale è simile anche per Windows e 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:~$
+
+ +

Ora che sei dentro il virtual environment puoi installare Django e iniziare a sviluppare.

+ +
+

Nota: Da ora in questo articolo (e in effetti nel modulo) considerare che ogni comando venga eseguito in un virtual environment Python come quello che abbiamo settato sopra.

+
+ +

Utilizzare un Ambiente Virtuale

+ +

Ci sono solo pochi altri comandi utili che dovresti conoscere (ce ne sono molti nella documentazione del tool, ma questi sono quelli che userai regolarmente):

+ + + +

Installare Django

+ +

Una volta che hai installato Python 3 e pip3, e creato un virtual environment, puoi usare pip3 per installare Django.

+ +
pip3 install django
+
+ +

Puoi testare se Django è installato eseguendo il seguente comando (questo verifica che Python riesca a trovare il modulo Django):

+ +
# Linux/Mac OS X
+python3 -m django --version
+ 1.10.10
+
+# Windows
+py -3 -m django --version
+ 1.10.10
+
+ +
+

Nota: Su Windows puoi eseguire script Python 3 usando il comando py -3, mentre su Linux/Mac OSX, il comando è python3.

+
+ +
+

Importante: Il resto di questo modulo usa, per invocare Python 3  il comando Linux  (python3) . Se stai lavorando su Windows usa: py -3

+
+ +

Testare la tua installazione

+ +

Il test sopra funziona, ma non è molto divertente. Un test più interessante è creare lo scheletro di un progetto e vederlo funzionare. Per farlo, andate tramite linea di comando/terminale dove volete memorizzare le applicazioni Django. Create una cartella per il sito di test ed entrateci.

+ +
mkdir django_test
+cd django_test
+
+ +

Ora si può creare lo scheletro di un nuovo sito chiamata "mytestsite" utilizzando il tool django-admin come mostrato. Dopo la creazione del sito potete esplorare la cartella creata, e troverete lo script principale per la gestione dei progetti, chiamato manage.py.

+ +
django-admin startproject mytestsite
+cd mytestsite
+ +

Possiamo avviare il server web di sviluppo dalla cartella usando manage.py e il comando runserver.

+ +
$ python3 manage.py runserver 
+Performing system checks...
+
+System check identified no issues (0 silenced).
+
+You have 13 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.
+
+September 19, 2016 - 23:31:14
+Django version 1.10.1, using settings 'mysite.settings'
+Starting development server at http://127.0.0.1:8000/
+Quit the server with CONTROL-C.
+
+ +
+

Nota: Il comando sopra mostra il comando per Linux/macOS. Per ora potete ignorare il messaggio di avviso "13 unapplied migration(s)"!

+
+ +

Una volta che il server è in esecuzione potete vedere il sito usando il web browser e andando sul URL: http://127.0.0.1:8000/. Dovreste vedere un sito simile a questo:

+ +

Django Skeleton App Homepage - Django 2.0

+ + + +

Sommario

+ +

Ora avete un ambiente di sviluppo Django funzionante sul vostro computer.

+ +

Nella sezione di test avete visto brevemente come creare un sito web Django usando django-admin startproject, e come avviarlo sul browser usando il web server di sviluppo (python3 manage.py runserver). Nel prossimo articolo costruiremo una applicazione web semplice, ma completa.

+ +

Vedete anche

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}

diff --git a/files/it/learn/server-side/django/forms/index.html b/files/it/learn/server-side/django/forms/index.html new file mode 100644 index 0000000000..80c0970f16 --- /dev/null +++ b/files/it/learn/server-side/django/forms/index.html @@ -0,0 +1,678 @@ +--- +title: 'Django Tutorial Part 9: Working with forms' +slug: Learn/Server-side/Django/Forms +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")}}
+ +

In questo tutorial ti mostreremo come lavorare con i form HTML in Django e, in particolare, il modo più semplice per scrivere moduli per creare, aggiornare ed eliminare istanze di modelli. Come parte di questa dimostrazione, estenderemo il sito Web LocalLibrary in modo che i bibliotecari possano rinnovare libri e creare, aggiornare ed eliminare autori utilizzando i nostri moduli (anziché utilizzare l'applicazione di amministrazione).

+ + + + + + + + + + + + +
Prerequisiti:Completare il precedente tutorial, compreso: Django Tutorial Part 8: User authentication and permissions.
Obiettivi:Comprendere come scrivere form per ottenere informazioni dagli utenti e aggiornare il database. Per capire come le generiche viste di modifica dei form basate sulla classe possono semplificare enormemente la creazione di form per lavorare con un singolo modello.
+ +

Panoramica

+ +

Un HTML Form, o modulo, è un gruppo di uno o più campi/widget su una pagina Web, che può essere utilizzato per raccogliere informazioni dagli utenti per l'invio a un server. I moduli sono un meccanismo flessibile per la raccolta dell'input dell'utente perché ci sono widget adatti per inserire molti tipi diversi di dati, tra cui caselle di testo, caselle di controllo, pulsanti di opzione, selettori di date, ecc. I moduli sono anche un modo relativamente sicuro di condividere i dati con il server, poiché ci consentono di inviare i dati nelle richieste POST con la protezione dalle falsificazioni delle richieste cross-site.

+ +

Anche se finora non abbiamo creato alcun modulo in questo tutorial, li abbiamo già incontrati nel sito di Django Admin. Ad esempio, lo screenshot seguente mostra un modulo per la modifica di uno dei nostri modelli Book, composto da un certo numero di elenchi di selezione e editor di testo.

+ +

Admin Site - Book Add

+ +

Lavorare con i moduli Web può essere complicato! Gli sviluppatori devono scrivere HTML per il modulo, convalidare e bonificare correttamente i dati immessi sul server (e possibilmente anche nel browser), ripubblicare il modulo con messaggi di errore per informare gli utenti di eventuali campi non validi, gestire i dati quando sono stati inviati correttamente e infine rispondere all'utente in qualche modo per indicare il successo. Django Forms prende molto del lavoro da tutti questi passaggi, fornendo un framework che consente di definire i form e i loro campi a livello di codice, e quindi utilizzare questi oggetti per generare il codice HTML del modulo e gestire gran parte della convalida e dell'interazione dell'utente.

+ +

In questo tutorial, ti mostreremo alcuni dei modi in cui puoi creare e lavorare con i moduli e, in particolare, in che modo le viste generiche del modulo di modifica possono ridurre in modo significativo la quantità di lavoro necessario per creare moduli da manipolare i tuoi modelli Lungo la strada, estenderemo la nostra applicazione LocalLibrary aggiungendo un modulo per consentire ai bibliotecari di rinnovare i libri della biblioteca e creeremo pagine per creare, modificare ed eliminare libri e autori (riproducendo una versione di base del modulo mostrato sopra per la modifica libri).

+ +

HTML Forms

+ +

Prima, una breve panoramica degli HTML Forms. Consideriamo un semplice form, con un singolo campo di testo per inserire il nome di alcuni "team" e la relativa etichetta associata:

+ +

Simple name field example in HTML form

+ +

Un form HTML è definito in un insieme di elementi dentro dei tag <form>...</form>, contenenti almeno un elemento input di type="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>
+ +

Mentre qui abbiamo solo un campo di testo per inserire il nome del team, un modulo può avere qualsiasi numero di altri elementi di input e le loro etichette associate. L'attributo type del campo definisce quale tipo di widget verrà visualizzato. Il nome e l'ID del campo vengono utilizzati per identificare il campo in JavaScript / CSS / HTML, mentre il value definisce il valore iniziale per il campo quando viene visualizzato per la prima volta. L'etichetta del team corrispondente viene specificata utilizzando il tag label (vedere "Immettere il nome" sopra), con un campo for che contiene il valore id dell'input associato.

+ +

L'input  submit  verrà visualizzato come un pulsante (predefinito) che può essere premuto dall'utente per caricare i dati in tutti gli altri elementi di input nel modulo sul server (in questo caso, solo il team_name). Gli attributi del form definiscono il metodo HTTP utilizzato perinviare i dati e la destinazione dei dati sul server (action):

+ + + +

Il ruolo del server è innanzitutto quello di rendere lo stato del form iniziale - contenente campi vuoti o prepopolati con valori iniziali. Dopo che l'utente ha premuto il pulsante di invio, il server riceverà i dati del modulo con i valori del browser Web e dovrà convalidare le informazioni. Se il modulo contiene dati non validi, il server dovrebbe visualizzare nuovamente il modulo, questa volta con i dati immessi dall'utente nei campi e nei messaggi "validi" per descrivere il problema per i campi non validi. Una volta che il server riceve una richiesta con tutti i dati del modulo validi, può eseguire un'azione appropriata (ad esempio, salvare i dati, restituire il risultato di una ricerca, caricare un file, ecc.) E quindi avvisare l'utente.

+ +

Come potete immaginare, la creazione dell'HTML, la convalida dei dati restituiti, la ri-visualizzazione dei dati inseriti con i rapporti di errore se necessario e l'esecuzione dell'operazione desiderata su dati validi possono richiedere un notevole sforzo per "avere ragione". Django rende tutto molto più semplice, eliminando parte del pesante codice ripetitivo.

+ +

Processo di Django di gestione dei form

+ +

La gestione dei form di Django utilizza tutte le stesse tecniche apprese in precedenti tutorial (per la visualizzazione di informazioni sui nostri models): la vista riceve una richiesta, esegue tutte le azioni richieste inclusa la lettura dei dati dai modelli, quindi genera e restituisce una pagina HTML ( da un modello, in cui passiamo un contesto contenente i dati da visualizzare). Ciò che rende le cose più complicate è che il server deve anche essere in grado di elaborare i dati forniti dall'utente e visualizzare nuovamente la pagina in caso di errori.

+ +

Di seguito viene mostrato un diagramma di flusso del processo di gestione delle richieste di modulo da parte di Django, a partire da una richiesta per una pagina contenente un form (mostrato in verde).

+ +

Updated form handling process doc.

+ +

Basandosi sul diagramma sopra, le cose che principalmente svolge Django nella gestione dei form sono:

+ +
    +
  1. Mostra il modulo predefinito la prima volta che viene richiesto dall'utente.
    2. +
+ + + +
    +
  1. Riceve i dati da una richiesta di invio e li associa al modulo. +
      +
    • Collegare i dati al modulo significa che i dati inseriti dall'utente e gli eventuali errori sono disponibili quando è necessario visualizzare nuovamente il modulo.
      • +
    +
    2. +
  2. Pulisce e valida i dati. +
      +
    • La pulizia dei dati esegue la disinfezione dell'input (ad esempio rimuovendo i caratteri non validi che potrebbero essere utilizzati per inviare contenuto dannoso al server) e li converte in tipi coerenti di Python.
      • +
    • La convalida verifica che i valori siano appropriati per il campo (ad es. Sono nel giusto intervallo di date, non sono troppo corti o troppo lunghi, ecc.)
      • +
    +
    3. +
  3. Se i dati non sono validi, visualizza nuovamente il modulo, questa volta con tutti i valori e i messaggi di errore compilati dall'utente per i campi del problema.
    4. +
  4. Se tutti i dati sono validi, eseguire le azioni richieste (ad esempio, salvare i dati, inviare e-mail, restituire il risultato di una ricerca, caricare un file, ecc.)
    5. +
  5. Una volta completate tutte le azioni, reindirizza l'utente a un'altra pagina.
    6. +
+ +

Django fornisce una serie di strumenti e approcci per aiutarti con le attività sopra descritte. La più fondamentale è la classe Form, che semplifica sia la generazione di moduli HTML che la pulizia / convalida dei dati. Nella prossima sezione, descriviamo come le form funzionano usando l'esempio pratico di una pagina per consentire ai bibliotecari di rinnovare i libri.

+ +
+

Note: Capire come si usa Form ti sarà d'aiuto quando discuteremo le classi di form più "di alto livello" di Django.

+
+ +

Modulo di rinnovo del libro utilizzando una Form e funzione vista

+ +

Successivamente, aggiungeremo una pagina per consentire ai bibliotecari di rinnovare i libri presi in prestito. Per fare ciò creeremo un modulo che consenta agli utenti di inserire un valore di data. Daremo il campo con un valore iniziale di 3 settimane rispetto alla data corrente (il normale periodo di prestito) e aggiungiamo alcune convalide per garantire che il bibliotecario non possa inserire una data nel passato o una data troppo lontana nel futuro. Quando è stata inserita una data valida, la scriveremo nel campo BookInstance.due_back del record corrente. L'esempio utilizzerà una vista basata sulle funzioni e una classe Form.

+ +

Le seguenti sezioni spiegano come funzionano le form le modifiche da apportare al nostro progetto LocalLibrary in corso.

+ +

Form

+ +

La classe Form è il cuore del sistema di gestione delle form di Django. Specifica i campi nel modulo, il loro layout, i widget di visualizzazione, le etichette, i valori iniziali, i valori validi e (una volta convalidati) i messaggi di errore associati ai campi non validi. La classe fornisce anche i metodi per eseguire il rendering stesso nei modelli utilizzando formati predefiniti (tabelle, elenchi, ecc.) O per ottenere il valore di qualsiasi elemento (abilitando il rendering manuale a grana fine).

+ +

Dichiarare un Form

+ +

La sintassi della dichiarazione per una form è molto simile a quella per la dichiarazione di un modello e condivide gli stessi tipi di campo (e alcuni parametri simili). Questo ha senso perché in entrambi i casi dobbiamo garantire che ogni campo gestisca i giusti tipi di dati, sia vincolato a dati validi e abbia una descrizione per la visualizzazione / documentazione. I dati del modulo sono memorizzati nel file forms.py dell'applicazione, all'interno della directory dell'applicazione. Crea e apri il file locallibrary / catalog / forms.py. Per creare un modulo, importiamo la libreria dei moduli, deriviamo dalla classe Form e dichiariamo i campi del modulo. Di seguito è riportata una classe di modulo molto semplice per il modulo di rinnovo del libro della biblioteca: aggiungi questo al nuovo file:

+ +
from django import forms
+
+class RenewBookForm(forms.Form):
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+
+ +

Form fields

+ +

In questo caso abbiamo un campo singolo DateField per inserire la data di rinnovo che renderizzerà in HTML con un valore vuoto, l'etichetta di default "Data di rinnovo:", e qualche utile testo di utilizzo: "Inserire una data tra ora e 4 settimane (predefinito 3 settimane)." Dato che nessuno degli altri argomenti opzionali è specificato, il campo accetterà le date usando il input_formats: YYYY-MM-DD (2016-11-06), MM/DD/YYYY (02/26/2016), MM/DD/YY (10/25/16), e sarà visualizzato con il widget standard widget: DateInput.

+ +

Esistono molti altri tipi di campi form, che in gran parte riconoscerete dalla loro somiglianza con le classi di campo del modello equivalente: 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.

+ +

Gli argomenti comuni alla maggior parte dei campi sono elencati di seguito (questi hanno valori predefiniti sensibili):

+ + + +

Validazione

+ +

Django offre numerosi posti dove puoi convalidare i tuoi dati. Il modo più semplice per convalidare un singolo campo è sovrascrivere il metodo clean_ <nomecampo> () per il campo che si desidera controllare. Quindi, ad esempio, possiamo effettuare una convalida richiedendo che i valori di renewal_date inseriti siano compresi tra ora e le 4 settimane future implementando clean_renewal_date () come mostrato di seguito.

+ +

Aggiorniamo il file forms.py:

+ +
import datetime
+
+from django import forms
+from django.core.exceptions import ValidationError
+from django.utils.translation import ugettext_lazy as _
+
+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 if a date is not in the past.
+        if data < datetime.date.today():
+            raise ValidationError(_('Invalid date - renewal in past'))
+
+        # Check if a 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
+ +

Ci sono due cose importanti da notare. Il primo è che otteniamo i nostri dati usando self.cleaned_data ['renewal_date'] e che restituiamo questi dati indipendentemente dal fatto che vengano modificati alla fine della funzione. Questo passaggio ci porta i dati "puliti" e disinfettati da input potenzialmente non sicuri utilizzando i validatori predefiniti e convertiti nel tipo standard corretto per i dati (in questo caso un oggetto datetime.datetime di Python).

+ +

La seconda è che se un valore è al di fuori di quelli ammessi solleviamo un errore di validazione ValidationError, specificando il testo di errore che vogliamo mostrare nel forme se un errore di validazione si è verificato. L'esempio sopra inoltre incapsula il testo in una funzione di traduzione di Django (vedi Django's translation functions) ugettext_lazy() (importata come _()), che è una good practice in caso tu voglia tradurre il sito successivamente.

+ +
+

Note: Esistono molti metodi per validare i form, consultare Form and field validation (Django docs). Per esempio, in alcuni casi in cui si hanno diversi campi che dipendono uno dall'altro si può sovrascrivere la funzione Form.clean() e nuovamente sollevare una ValidationError.

+
+ +

Questo è tutto ciò di cui abbiamo bisogno per il form in questo esempio!

+ +

Configurazione URL

+ +

Prima di creare la nostra vista, aggiungiamo una configurazione URL per la pagina dei rinnovi. Copia la seguente configurazione nella parte inferiore di locallibrary / catalog / urls.py.

+ +
urlpatterns += [
+    path('book/<uuid:pk>/renew/', views.renew_book_librarian, name='renew-book-librarian'),
+]
+ +

La configurazione URL reindirizzerà tutti gli URL con formato /catalog/book/<bookinstance id>/renew/ alla funzione renew_book_librarian() in views.py, e manderà l'id della BookInstance come parametro con nome pk. Il pattern matcha solamente se pk è un dato uuid correttamente formattato.

+ +
+

Note: Possiamo nominare qualsiasi cosa ci piaccia dai nostri dati di URL acquisiti anzichè "pk" , perché abbiamo il controllo completo sulla funzione di visualizzazione (non stiamo usando una classe di vista di dettaglio generica che si aspetta parametri con un certo nome). Tuttavia, pk abbreviazione di "chiave primaria", è una convenzione ragionevole da usare!

+
+ +

Vista

+ +

Come discusso in Django form handling process, la vista deve eseguire il rendering del modulo predefinito quando viene chiamato per la prima volta e quindi eseguire nuovamente il rendering con messaggi di errore se i dati non sono validi oppure elaborare i dati e reindirizzare a una nuova pagina se i dati sono validi. Per poter eseguire queste diverse azioni, la vista deve essere in grado di sapere se è stata richiamata per la prima volta per il rendering del modulo predefinito o un tempo successivo per convalidare i dati.

+ +

Per i form che usano una POST per mandare infromazioni al server, il pattern più comune è fare in modo che sia la view ad eseguire i test verso la richiesta di POST (if request.method == 'POST':) identificare le richieste di convalida del modulo e GET (utilizzando un'altra condizione) per identificare la richiesta iniziale di creazione del modulo. Se si desidera inviare i dati utilizzando una richiesta GET, un approccio tipico per identificare se questa è la prima o successiva chiamata alla vista è leggere i dati del modulo (ad esempio, per leggere un valore nascosto nel modulo).

+ +

Il processo di rinnovo del libro verrà scritto nel nostro database, quindi, per convenzione, utilizziamo l'approccio di richiesta POST. Il frammento di codice seguente mostra il modello (molto standard) per questo tipo di visualizzazione delle funzioni.

+ +
import datetime
+
+from django.shortcuts import render, get_object_or_404
+from django.http import HttpResponseRedirect
+from django.urls import reverse
+
+from catalog.forms import RenewBookForm
+
+def renew_book_librarian(request, pk):
+    book_instance = get_object_or_404(BookInstance, pk=pk)
+
+    # Se è una richiesta di tipo POST allora processa i dati della Form
+    if request.method == 'POST':
+
+        # Crea un'istanza della form e la popola con i dati della richiesta (binding):
+        form = RenewBookForm(request.POST)
+
+        # Controlla se la form è valida:
+        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()
+
+            # reindirizza ad un nuovo URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # Se la richiesta è GET o un altro metodo crea il form di default
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
+
+    context = {
+        'form': form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)
+ +

Innanzitutto, importiamo il nostro form (RenewBookForm) e una serie di altri oggetti / metodi utili utilizzati nel corpo della funzione di visualizzazione:

+ + + +

Nella vista, per prima cosa utilizziamo l'argomento pk in get_object_or_404 () per ottenere l'attuale BookInstance (se questo non esiste, la vista verrà immediatamente chiusa e la pagina mostrerà un errore "non trovato"). Se questa non è una richiesta POST (gestita dalla clausola else), creiamo il form predefinito che passa un valore iniziale per il campo renewal_date (come mostrato in grassetto sotto, questo è 3 settimane dalla data corrente). 

+ +
    book_instance = get_object_or_404(BookInstance, pk=pk)
+
+    # Se la richiesta è GET o un altro metodo crea il form di default
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
+
+    context = {
+        'form': form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)
+ +

Dopo aver creato il modulo, chiamiamo render() per creare la pagina HTML, specificando il modello e un contesto che contiene il nostro form. In questo caso, il contesto contiene anche il nostro BookInstance, che utilizzeremo nel modello per fornire informazioni sul libro che stiamo rinnovando.

+ +

Tuttavia, se si tratta di una richiesta POST, allora creiamo il nostro oggetto form e lo popoliamo con i dati della richiesta. Questo processo è chiamato "binding" e ci consente di convalidare il form. Controlliamo quindi se il form è valido, eseguiamo tutto il codice di convalida su tutti i campi, compreso il codice generico per verificare che il nostro campo data sia effettivamente una data valida e la funzione clean_renewal_date() del nostro from specifico per verificare se la data è nella giusta fascia.

+ +
    # 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_instance.due_back = form.cleaned_data['renewal_date']
+            book_instance.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    context = {
+        'form': form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)
+ +

Se il form non è valido, viene richiamata nuovamente la funzione render(), ma questa volta il form viene passato al contesto con dei messaggi di errore. 

+ +

Se il form è valido, allora possiamo iniziare ad utilizzare i dati, accedendovi tramite l'attributo form.cleaned_data (ad es. data = form.cleaned_data['renewal_date']). Qui salviamo semplicemente i dati nel valore due_back dell'oggetto BookInstance associato.

+ +
+

Importante: Anche se è possibile accedere ai dati del form direttamente tramite la richiesta, per esempio utilizzando request.POST['renewal_date'] o request.GET['renewal_date'] se invece stiamo utilizzando una richiesta GET, Ciò NON è raccomandabile. I dati ripuliti, sanificati, e validati, vengono convertiti in tipi adatti a Python.

+
+ +

Il passo finale nella manipolazione dei formè la direzione verso un'altra pagina, generalmente una "success" page. In questo caso utilizziamo HttpResponseRedirect e reverse() per ridirezionare alla vista nominata "all-borrowed' (creata come "challenge" in Django Tutorial Part 8: User authentication and permissions). Se non l'hai creata, ridireziona alla home page con URL '/').

+ +

Questo è tutto ciò che ci serviva per il per la manipolazione dei form, ma dobbiamo ancora restringere gli accessi dei bibliotecari. Probabilmente dovremmo creare un nuovo permesso sull'oggetto BookInstance ("can_renew"), ma, per mantenere le cose più semplici, useremo solo il decoratore di funzione @permission_required con il nostro permesso esistente can_mark_returned.

+ +

La vista finale è quindi come di seguito. Copiare questo in fondo a locallibrary/catalog/views.py.

+ +
import datetime
+
+from django.contrib.auth.decorators import permission_required
+from django.shortcuts import get_object_or_404
+from django.http import HttpResponseRedirect
+from django.urls import reverse
+
+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):
+        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)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
+
+    context = {
+        'form': form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)
+
+ +

Il template

+ +

Creiamo il template referenziato nella view (/catalog/templates/catalog/book_renew_librarian.html) e copiamo il codice sotto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Renew: \{{ book_instance.book.title }}</h1>
+  <p>Borrower: \{{ book_instance.borrower }}</p>
+  <p{% if book_instance.is_overdue %} class="text-danger"{% endif %}>Due date: \{{ book_instance.due_back }}</p>
+
+  <form action="" method="post">
+    {% csrf_token %}
+    <table>
+    \{{ form.as_table }}
+    </table>
+    <input type="submit" value="Submit">
+  </form>
+{% endblock %}
+ +

La maggior parte di questo sarà completamente familiare dai tutorial precedenti. Estendiamo il modello di base e quindi ridefiniamo il blocco del contenuto. Siamo in grado di fare riferimento a \{{book_instance}} (e alle sue variabili) perché è stato passato all'oggetto contesto nella funzione render (), e le possiamo usare per elencare il titolo del libro, il mutuatario e la data di scadenza originale.

+ +

Il codice del form è relativamente semplice. Per prima cosa dichiariamo i tag del form, specificando dove deve essere inviato il form (action) e il metodo per inviare i dati (in questo caso un "POST HTTP") - se si richiama la panoramica dei moduli HTML nella parte superiore della pagina, un'azione vuota come mostrato, significa che i dati del modulo saranno postati all'URL attuale della pagina (che è ciò che vogliamo!). All'interno dei tag, definiamo l'input di invio, che un utente può premere per inviare i dati. Il {% csrf_token%} aggiunto appena dentro i tag del modulo fa parte della protezione dalle contraffazioni di Django.

+ +
+

Note: Aggiungi il {% csrf_token%} a ogni modello Django che crei che utilizza POST per inviare i dati. Ciò ridurrà la possibilità che le form vengano corrotte da utenti malintenzionati

+
+ +

Tutto ciò che rimane è la variabile di template \{{form}}, che abbiamo passato al template nel dizionario di contesto. Forse non sorprendentemente, se usato come mostrato, fornisce il rendering predefinito di tutti i campi del modulo, incluse le loro etichette, i widget e il testo della guida: il rendering è come mostrato di seguito:

+ +
<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: Forse non è ovvio perché abbiamo solo un campo, ma, per impostazione predefinita, ogni campo è definito nella propria riga della tabella. Questo stesso rendering viene fornito se si fa riferimento alla variabile del template \{{form.as_table}}.

+
+ +

Se dovessi inserire una data non valida, avresti anche un elenco degli errori visualizzati nella pagina (mostrati in grassetto sotto).

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

Altri modi di usare le variabili template

+ +

Utilizzando\{{ form.as_table }} come mostrato sopra, ogni campo viene renderizzato come riga di una tabella. Puoi anche renderizzare ogni campo come elemento di una lista (usando \{{ form.as_ul }} ) o come un paragrafo (\{{ form.as_p }}).

+ +

È anche possibile avere il controllo completo sul rendering di ogni parte del form, indicizzando le sue proprietà mediante la notazione dei punti. Ad esempio, possiamo accedere a un numero di elementi separati per il nostro campo renewal_date:

+ + + +

Per ulteriori esempi su come eseguire il rendering manuale dei form nei modelli e ciclare dinamicamente sui campi del modello, vedere Working with forms > Rendering fields manually (Django docs).

+ +

Testare la pagina

+ +

Se hai accettato la sfida proposta in Django Tutorial Part 8: User authentication and permissions dovresti avere una lista di libri in prestito nella libreria, che saranno visibili solamente allo staff. Possiamo aggiungere un link alla nostra pagina di rinnovo per ogni elemento utilizzando il codice template sotto.

+ +
{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a>  {% endif %}
+ +
+

Note: Remember that your test login will need to have the permission "catalog.can_mark_returned" in order to access the renew book page (perhaps use your superuser account).

+
+ +

In alternativa, puoi costruire manualmente un URL di prova come questo: http://127.0.0.1:8000/catalog/book/<bookinstance_id>/renew/ (è possibile ottenere un id valido per le librerie navigando a una pagina dei dettagli del libro nella libreria, e copiare il campo id).

+ +

Come appare?

+ +

Se hai successo, il form di default sarà così:

+ +

+ +

The form with an invalid value entered will look like this:

+ +

+ +

The list of all books with renew links will look like this:

+ +

+ +

ModelForms

+ +

La creazione di una classe Form utilizzando l'approccio descritto sopra è molto flessibile, consente infatti di creare qualsiasi tipo di pagina di form che ti piace e associarla a qualsiasi modello o modello. Tuttavia, se hai solo bisogno di un modulo per mappare i campi di un singolo modello, il tuo modello definirà già la maggior parte delle informazioni necessarie nel tuo modulo: campi, etichette, testo della guida, ecc. Invece di ricreare le definizioni del modello nel tuo forma, è più facile usare la classe helper ModelForm per creare il modulo dal tuo modello. Questo ModelForm può quindi essere utilizzato all'interno delle visualizzazioni esattamente nello stesso modo di un modulo ordinario.

+ +

Un modello di base ModelForm contenente gli stessi campi del nostro RenewBookForm è mostrato sotto. Tutto ciò che devi fare è aggiungere una classe class Meta con il modello associato (BookInstance) e un elenco dei campi del modello da includere nel modulo (è possibile includere tutti i campi utilizzando fields = '__all__', oppure è possibile utilizzare exclude (anziché i campi) per specificare i campi da non includere nel modello).

+ +
from django.forms import ModelForm
+
+from catalog.models import BookInstance
+
+class RenewBookModelForm(ModelForm):
+    class Meta:
+        model = BookInstance
+        fields = ['due_back']
+
+ +
+

Note: Questo potrebbe non sembrare tutto molto più semplice del semplice utilizzo di un modulo (e non è in questo caso, perché abbiamo solo un campo). Tuttavia, se hai molti campi, puoi ridurre la quantità di codice in modo abbastanza significativo!

+
+ +

Il resto delle informazioni proviene dalle definizioni del campo del modello (ad esempio etichette, widget, testo della guida, messaggi di errore). Se questi non sono corretti, possiamo sostituirli nella nostra classe Meta, specificando un dizionario contenente il campo da modificare e il suo nuovo valore. Ad esempio, in questo modulo potremmo volere un'etichetta per il nostro campo di "Data di rinnovo" (piuttosto che l'impostazione predefinita in base al nome del campo: "Due Back"), e vogliamo anche che il nostro testo di aiuto sia specifico per questo caso d'uso. La Meta sotto mostra come sovrascrivere questi campi, e puoi impostare allo stesso modo widget e messaggi_errore se i valori predefiniti non sono sufficienti.

+ +
class Meta:
+    model = BookInstance
+    fields = ['due_back']
+    labels = {'due_back': _('New renewal date')}
+    help_texts = {'due_back': _('Enter a date between now and 4 weeks (default 3).')} 
+
+ +

Per aggiungere la convalida è possibile utilizzare lo stesso approccio di un modulo normale: si definisce una funzione denominata clean_field_name () e si generano eccezioni ValidationError per valori non validi. L'unica differenza rispetto alla nostra forma originale è che il campo del modello è denominato due_back e non "renewal_date". Questa modifica è necessaria poiché il campo corrispondente in BookInstance è chiamato due_back.

+ +
from django.forms import ModelForm
+
+from catalog.models import BookInstance
+
+class RenewBookModelForm(ModelForm):
+    def clean_due_back(self):
+       data = self.cleaned_data['due_back']
+
+       # Controlla se la data non è passata.
+       if data < datetime.date.today():
+           raise ValidationError(_('Invalid date - renewal in past'))
+
+       # Controlla se una data è nell'intervallo consentito (+4 settimane da oggi).
+       if data > datetime.date.today() + datetime.timedelta(weeks=4):
+           raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+       # Ricorda di restituire sempre la data pulita.
+       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 adesso funziona come la nostra originale RenewBookForm. Puoi importarla e usarla ovunque attualmente usi  RenewBookForm a condizione che si aggiorni anche il nome della variabile corrispondente da  renewal_date a due_back come nella dichiarazione della seconda Form: RenewBookModelForm(initial={'due_back': proposed_renewal_date}.

+ +

Generic editing views

+ +

The form handling algorithm we used in our function view example above represents an extremely common pattern in form editing views. Django abstracts much of this "boilerplate" for you, by creating generic editing views for creating, editing, and deleting views based on models. Not only do these handle the "view" behavior, but they automatically create the form class (a ModelForm) for you from the model.

+ +
+

Note: In addition to the editing views described here, there is also a FormView class, which lies somewhere between our function view and the other generic views in terms of "flexibility" vs "coding effort". Using FormView, you still need to create your Form, but you don't have to implement all of the standard form-handling patterns. Instead, you just have to provide an implementation of the function that will be called once the submitted is known to be valid.

+
+ +

In this section we're going to use generic editing views to create pages to add functionality to create, edit, and delete Author records from our library — effectively providing a basic reimplementation of parts of the Admin site (this could be useful if you need to offer admin functionality in a more flexible way that can be provided by the admin site).

+ +

Views

+ +

Open the views file (locallibrary/catalog/views.py) and append the following code block to the bottom of it:

+ +
from django.views.generic.edit import CreateView, UpdateView, DeleteView
+from django.urls import reverse_lazy
+
+from catalog.models import Author
+
+class AuthorCreate(CreateView):
+    model = Author
+    fields = '__all__'
+    initial = {'date_of_death': '05/01/2018'}
+
+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')
+ +

As you can see, to create, update, or delete the views you need to derive from CreateView, UpdateView, and DeleteView (respectively) and then define the associated model.

+ +

For the "create" and "update" cases you also need to specify the fields to display in the form (using the same syntax as for ModelForm). In this case, we show both the syntax to display "all" fields and how you can list them individually. You can also specify initial values for each of the fields using a dictionary of field_name/value pairs (here we arbitrarily set the date of death for demonstration purposes — you might want to remove that!). By default, these views will redirect on success to a page displaying the newly created/edited model item, which in our case will be the author detail view we created in a previous tutorial. You can specify an alternative redirect location by explicitly declaring parameter success_url (as done for the AuthorDelete class).

+ +

The AuthorDelete class doesn't need to display any of the fields, so these don't need to be specified. You do however need to specify the success_url, because there is no obvious default value for Django to use. In this case, we use the reverse_lazy() function to redirect to our author list after an author has been deleted — reverse_lazy() is a lazily executed version of reverse(), used here because we're providing a URL to a class-based view attribute.

+ +

Templates

+ +

The "create" and "update" views use the same template by default, which will be named after your model: model_name_form.html (you can change the suffix to something other than _form using the template_name_suffix field in your view, e.g. template_name_suffix = '_other_suffix')

+ +

Create the template file locallibrary/catalog/templates/catalog/author_form.html and copy in the text below.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <form action="" method="post">
+    {% csrf_token %}
+    <table>
+    \{{ form.as_table }}
+    </table>
+    <input type="submit" value="Submit">
+  </form>
+{% endblock %}
+ +

This is similar to our previous forms and renders the fields using a table. Note also how again we declare the {% csrf_token %} to ensure that our forms are resistant to CSRF attacks.

+ +

The "delete" view expects to find a template named with the format model_name_confirm_delete.html (again, you can change the suffix using template_name_suffix in your view). Create the template file locallibrary/catalog/templates/catalog/author_confirm_delete.html and copy in the text below.

+ +
{% 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" value="Yes, delete.">
+</form>
+
+{% endblock %}
+
+ +

URL configurations

+ +

Open your URL configuration file (locallibrary/catalog/urls.py) and add the following configuration to the bottom of the file:

+ +
urlpatterns += [
+    path('author/create/', views.AuthorCreate.as_view(), name='author_create'),
+    path('author/<int:pk>/update/', views.AuthorUpdate.as_view(), name='author_update'),
+    path('author/<int:pk>/delete/', views.AuthorDelete.as_view(), name='author_delete'),
+]
+ +

There is nothing particularly new here! You can see that the views are classes, and must hence be called via .as_view(), and you should be able to recognize the URL patterns in each case. We must use pk as the name for our captured primary key value, as this is the parameter name expected by the view classes.

+ +

The author create, update, and delete pages are now ready to test (we won't bother hooking them into the site sidebar in this case, although you can do so if you wish).

+ +
+

Note: Observant users will have noticed that we didn't do anything to prevent unauthorized users from accessing the pages! We leave that as an exercise for you (hint: you could use the PermissionRequiredMixin and either create a new permission or reuse our can_mark_returned permission).

+
+ +

Testing the page

+ +

First, log in to the site with an account that has whatever permissions you decided are needed to access the author editing pages.

+ +

Then navigate to the author create page: http://127.0.0.1:8000/catalog/author/create/, which should look like the screenshot below.

+ +

Form Example: Create Author

+ +

Enter values for the fields and then press Submit to save the author record. You should now be taken to a detail view for your new author, with a URL of something like http://127.0.0.1:8000/catalog/author/10.

+ +

You can test editing records by appending /update/ to the end of the detail view URL (e.g. http://127.0.0.1:8000/catalog/author/10/update/) — we don't show a screenshot, because it looks just like the "create" page!

+ +

Finally, we can delete the page by appending delete to the end of the author detail-view URL (e.g. http://127.0.0.1:8000/catalog/author/10/delete/). Django should display the delete page shown below. Press Yes, delete. to remove the record and be taken to the list of all authors.

+ +

+ + + +

Challenge yourself

+ +

Create some forms to create, edit, and delete Book records. You can use exactly the same structure as for Authors. If your book_form.html template is just a copy-renamed version of the author_form.html template, then the new "create book" page will look like the screenshot below:

+ +

+ + + +

Summary

+ +

Creating and handling forms can be a complicated process! Django makes it much easier by providing programmatic mechanisms to declare, render, and validate forms. Furthermore, Django provides generic form editing views that can do almost all the work to define pages that can create, edit, and delete records associated with a single model instance.

+ +

There is a lot more that can be done with forms (check out our See also list below), but you should now understand how to add basic forms and form-handling code to your own websites.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}

+ + + +

In this module

+ + diff --git a/files/it/learn/server-side/django/generic_views/index.html b/files/it/learn/server-side/django/generic_views/index.html new file mode 100644 index 0000000000..a59f2046f1 --- /dev/null +++ b/files/it/learn/server-side/django/generic_views/index.html @@ -0,0 +1,626 @@ +--- +title: 'Django Tutorial Part 6: Generic list and detail views' +slug: Learn/Server-side/Django/Generic_views +tags: + - Template + - Tutorial + - View + - django + - django view + - imparare + - inizio + - template django + - views + - viste django +translation_of: Learn/Server-side/Django/Generic_views +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}
+ +

Questo tutorial estenderà il nostro sito LocalLibrary, aggiungendo pagine di elenco e pagine di dettaglio per libri e autori. Qui apprenderemo le viste generiche basate su classi e mostreremo come possono ridurre la quantità di codice che devi scrivere per casi di uso comune. Passeremo inoltre alla gestione degli URL in maggiore dettaglio, mostrando come eseguire la corrispondenza di base dei pattern.

+ + + + + + + + + + + + +
Prerequisiti:Completare tutti i tutorial precedenti, incluso Django Tutorial Part 5: Creating our home page.
Obiettivi:Comprendere dove e come utilizzare viste generiche basate su classi e come estrarre modelli dagli URL e passare le informazioni alle viste.
+ +

Panoramica

+ +

In questo tutorial completeremo la prima versione del sito Web LocalLibrary aggiungendo pagine di elenco e dettagli per libri e autori (o per essere più precisi, ti mostreremo come implementare le pagine del libro e ti guideremo nella creazione dellle pagine dell'autore in modo che possa farle tu stesso!)

+ +

Il processo è simile alla creazione della pagina indice, che abbiamo mostrato nel precedente tutorial. Dovremo comunque creare mappe URL, viste e template. La differenza principale è che per le pagine di dettaglio avremo la sfida aggiuntiva di estrarre le informazioni dai pattern nell'URL e passarle alla view. Per queste pagine, mostreremo un tipo di view completamente diverso: view di elenco e view di dettaglio generiche e basate su classi. Queste possono ridurre in modo significativo la quantità di codice necessario per la view, semplificandone la scrittura e la manutenzione.

+ +

La parte finale del tutorial mostrerà come impaginare i dati quando si utilizzano view generiche di elenco basate su classi.

+ +

Pagina lista di libri

+ +

Nella pagina dell'elenco dei libri verrà visualizzato un elenco di tutti i record di libri disponibili nella biblioteca, a cui è possibile accedere utilizzando l'URL: catalog/books/. La pagina mostrerà un titolo e un autore per ogni record, con il titolo che è un collegamento ipertestuale alla relativa pagina dei dettagli del libro. La pagina avrà la stessa struttura e la stessa navigazione di tutte le altre pagine del sito e, pertanto, possiamo estendere il template di base (base_generic.html).

+ +

URL mapping

+ +

Apri /catalog/urls.py e copia la riga in grassetto sotto. Come per la pagina index, la funzione path() definisce un pattern da matchare con l' URL ('books/'), una funzione di view che verrà richiamata se l' URL matcha (views.BookListView.as_view()), e un nome per questa particolare mappatura.

+ +
urlpatterns = [
+    path('', views.index, name='index'),
+    path('books/', views.BookListView.as_view(), name='books'),
+]
+ +

Come discusso nel precedente tutorial, l'URL deve avere già matchato /catalog, quindi la view sarà richiamata per l'URL: /catalog/books/.

+ +

La funzione view ha un formato diverso rispetto a prima - questo perché questa vista verrà effettivamente implementata come una classe. Noi erediteremo da una funzione di visualizzazione generica esistente che già fa la maggior parte di ciò che vogliamo, invece di scriverla noi stessi daccapo.

+ +

Per le view class-based di Django, si accede a una funzione view appropriata chiamando il metodo di classe as_view(). Questo fa tutto il lavoro necessario per creare un'istanza della classe e assicurarsi che i giusti metodi handler vengano chiamati per le richieste HTTP in arrivo.

+ +

Viste (class-based)

+ +

Potremmo facilmente scrivere la view dell'elenco dei libri come una funzione regolare (proprio come la nostra precedente vista indice), che interrogherebbe il database cercando tutti i libri e quindi chiamerebbe render() per passare l'elenco a un template specificato. Invece, utilizzeremo una view elenco generica basata su classi (ListView) — una classe che eredita da una vista esistente. Poiché la vista generica implementa già la maggior parte delle funzionalità di cui abbiamo bisogno e segue la best practice di Django, saremo in grado di creare una vista elenco più robusta con meno codice, meno ripetizioni e, in definitiva, meno manutenzione.

+ +

Apri catalog/views.py, e copia il seguente codice nel file:

+ +
from django.views import generic
+
+class BookListView(generic.ListView):
+    model = Book
+ +

Ecco fatto! la list view generica effettuerà una query al database per prendere tutti i record per lo specifico model (Book) poi effettuerà un render tramite il template in /locallibrary/catalog/templates/catalog/book_list.html che creeremo sotto. Dentro al template puoi accedere alla lista dei libri con la variabile object_list OR book_list (cioè, genericamente "the_model_name_list").

+ +
+

Nota: Questo percorso scomodo per la posizione del template non è un errore di stampa: le view generiche cercano i template in /application_name/the_model_name_list.html (catalog/book_list.html in questo caso) dentro l'applicazione /application_name/templates/ nella directory (/catalog/templates/).

+
+ +

È possibile aggiungere attributi per modificare il comportamento predefinito sopra. Ad esempio, è possibile specificare un altro file template se è necessario disporre di più viste che utilizzano questo stesso model oppure si potrebbe voler utilizzare un dievrso nome di variabile di template se book_list non è intuitivo per il proprio specifico caso d'uso del template. Probabilmente la variante più utile è quella di modificare/filtrare il sottoinsieme di risultati che vengono restituiti, quindi, invece di elencare tutti i libri, potresti elencare i primi 5 libri letti da altri utenti.

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

Override dei metodi nelle viste class-based

+ +

Anche se non è necessario farlo qui, puoi anche sovrascrivere alcuni dei metodi di classe.

+ +

Possiamo, per esempio, sovrascrivere get_queryset() per modificare la lista di record restituiti. Questa metodologia è molto più flessibile rispetto all'attributo queryset come abbiamo fatto nel precedente frammento di codice (sebbene in questo caso non ci sia alcun beneficio reale):

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

Possiamo anche sovrascrivere get_context_data() per passare altre variabili addizionali di context al template (es. la lista di libri è passata per default). Il frammento sotto mostra come aggiungere una variabile "some_data" al context (sarà quindi disponibile come variabile del 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
+ +

Quando si esegue questa operazione è importante seguire lo schema usato sopra:

+ + + +
+

Nota: Leggi Built-in class-based generic views (Django docs) per vedere molti altri esempi di cosa puoi fare.

+
+ +

Creare List View template

+ +

Crea il file HTML /locallibrary/catalog/templates/catalog/book_list.html e copia il testo sotto. Come discusso sopra, questo è il file predefinito per un template previsto dalla vista elenco generica basata su classi (per un modello denominato Book in un'applicazione denominata catalog)

+ +

I template per le view generiche sono come qualsiasi altro template (anche se ovviamente il contesto/informazioni passate al template possono differire). Come con il nostro template di index, estendiamo il nostro template di base nella prima riga e poi sostituiamo il blocco denominato 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 view passa il contesto (elenco di libri) di default con object_list e book_list come alias; in ogni caso funzionerà.

+ +

Esecuzione condizionale

+ +

Usiamo i tag template if, else, ed endif per controllare se la book_list è stata definita e non è vuota. Se book_list è vuota, allora la clausola else mostra un testo alternativo in cui spiega che non sono presenti record da elencare. Se book_list non è vuota, allora iteriamo sulla lista di libri.

+ +
{% if book_list %}
+  <!-- code here to list the books -->
+{% else %}
+  <p>There are no books in the library.</p>
+{% endif %}
+
+ +

La condizione sopra fa il test su un'unica condizione, ma si possono effettuare ulteriori test e gestire ulteriori casi, per testare condizioni addizionali si può usare ad esempio il tag elif (es. {% elif var2 %}). Per maggiori informazioni sugli operatori condizionali consultare: if, ifequal/ifnotequal, ifchanged in Built-in template tags and filters (Django Docs).

+ +

Cicli for

+ +

Il template utilizza i tag for endfor per ciclare la lista di libri, come sotto. Ogni iterazione popola la variabile di template book con le informazioni per l'elemento corrente della lista.

+ +
{% for book in book_list %}
+  <li> <!-- code here get information from each book item --> </li>
+{% endfor %}
+
+ +

Anche se non usato qui, all'interno del loop Django creerà anche altre variabili che puoi usare per tracciare l'iterazione. Ad esempio, è possibile testare la variabile forloop.last per eseguire l'elaborazione condizionale l'ultima volta che viene eseguito il ciclo.

+ +

Accedere alle variabili

+ +

Il codice all'interno del ciclo crea un item di elenco per ogni libro che mostra sia il titolo (come collegamento alla vista dei dettagli ancora da creare) sia l'autore.

+ +
<a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
+
+ +

Accediamo ai campi del record del libro associato utilizzando la "notazione dot" (es. book.title e book.author), dove il testo che segue book è il nome del campo (come definito nel model).

+ +

Possiamo anche chiamare delle functions nel model da dentro il nostro template — in questo caso Book.get_absolute_url() per ottenere un URL che è possibile utilizzare per visualizzare il record di dettaglio associato. Questo funziona a condizione che la funzione non abbia argomenti (non c'è modo di passare argomenti!)

+ +
+

Nota: Dobbiamo stare attenti agli "effetti collaterali" quando chiamiamo le funzioni nei model. Qui visualizziamo solo un URL, ma una funzione può fare praticamente qualsiasi cosa: non vogliamo rischiare di cancellare il nostro database (per esempio) semplicemente mostrando il nostro template!

+
+ +

Update del template di base

+ +

Apri il template di base (/locallibrary/catalog/templates/base_generic.html) ed inserisci {% url 'books' %} dentro il link Url per All books, come sotto. Questo abiliterà il link in tutte le pagine (possiamo metterlo in pratica con successo ora che abbiamo creato il mapper URL "libri").

+ +
<li><a href="{% url 'index' %}">Home</a></li>
+<li><a href="{% url 'books' %}">All books</a></li>
+<li><a href="">All authors</a></li>
+ +

Come viene mostrato?

+ +

Non sarà ancora possibile creare l'elenco dei libri, perché manca ancora una dipendenza: la mappa degli URL per le pagine dei dettagli del libro, necessaria per creare collegamenti ipertestuali a singoli libri. Mostreremo entrambe le viste elenco e dettaglio dopo la prossima sezione.

+ +

Pagina di dettaglio dei libri

+ +

La pagina dei dettagli del libro mostrerà le informazioni su un libro specifico, accessibile tramite l'URL catalog/book/<id> (dove <id> è la chiave primaria per il libro). Oltre ai campi nel model Book (autore, sommario, ISBN, lingua e genere), elencheremo anche i dettagli delle copie disponibili (BookInstances) compreso lo stato, la data di ritorno prevista, l'edizione e l'id. Ciò consentirà ai nostri lettori non solo di conoscere il libro, ma anche di confermare se/quando è disponibile.

+ +

URL mapping

+ +

Apri /catalog/urls.py e aggiungi l'URL mapper 'book-detail' mostrato in grassetto qui sotto. Questa funzione path() definisce un pattern, una vista di dettaglio generica basata sulla classe e un nome.

+ +
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'),
+]
+ +

Per il path dei dettagli del libro, il pattern URL utilizza una sintassi speciale per catturare l'ID specifico del libro che vogliamo vedere. La sintassi è molto semplice: le parentesi angolari definiscono la parte dell'URL da catturare, racchiudendo il nome della variabile che la vista può utilizzare per accedere ai dati acquisiti. Per esempio, <something> , catturerà il pattern marcato, e passerà il valore alla view come variabile con nome "something". Puoi anche far precedere al nome della variabile una specifica di conversione che definisce il tipo di dato (int, str, slug, uuid, path).

+ +

In questo caso usiamo '<int:pk>' per acquisire l'id del libro, che deve essere una stringa appositamente formattata e passarla alla vista come parametro chiamato pk (abbreviazione di primary key). Questo è l'ID che viene utilizzato per archiviare il libro in modo univoco nel database, come definito nel Modello Book.

+ +
+

Nota: Come discusso precedentemente, il nostro URL matchato in realtà è catalog/book/<digits> (ma perchè siamo nell'applicazione catalog /catalog/ è sottinteso).

+
+ +
+

Importante: La vista di dettaglio generica basata sulla classe prevede di passare un parametro denominato pk. Se stai scrivendo la tua vista funzione puoi usare qualsiasi nome di parametro che ti piace, o addirittura passare le informazioni in un argomento senza nome.

+
+ +

Manuale di nozioni avanzate su path matching ed espressioni regolari

+ +
+

Nota: Non avrai bisogno di questa sezione per completare il tutorial! Lo forniamo perché conoscere questa opzione rischia di essere utile nel tuo futuro incentrato su Django.

+
+ +

Il pattern matching fornito da path() è semplice ed utile per il caso (molto diffuso) in cui vuoi solo catturare ogni stringa od intero. Se è necessario un filtro più raffinato (ad esempio, per filtrare solo le stringhe con un determinato numero di caratteri), è possibile utilizzare il metodo re_path().

+ +

Questo metodo funziona esattamente come path() eccetto per il fatto che permette di specificare un pattern utilizzando una Regex. Vedi: Regular expression. Per esempio, avremmo potuto specificare il path precedente con:

+ +
re_path(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),
+
+ +

Le espressioni regolari sono uno strumento di mappatura dei pattern incredibilmente potente. Sono, francamente, abbastanza non intuitive e spaventose per i principianti. Di seguito è riportato un primer molto breve!

+ +

La prima cosa da sapere è che di solito le espressioni regolari dovrebbero essere dichiarate usando la sintassi "raw string" letterale (cioè, sono incluse come mostrato: r'<testo della regex>').

+ +

Le parti principali della sintassi che devi conoscere per dichiarare i match del pattern sono:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SymbolMeaning
^Matcha l'inizio del testo
$Matcha la fine del testo
\dMatcha un numero (0, 1, 2, ... 9)
\wMatcha una parola word character, es. ogni maiuscola- o minuscola- dell'alfabeto, numero o underscore (_)
+Matcha uno o più caratteri precedenti. Ad esempio, per matchare una o più cifre useresti \d+. Per abbinare uno o più caratteri "a", potresti usare a+
*Abbina zero o più del carattere precedente. Ad esempio, per abbinare niente o una parola che potresti usare \w*
( )Cattura la parte del pattern all'interno delle parentesi. Tutti i valori acquisiti verranno passati alla vista come parametri senza nome (se vengono catturati più pattern, i parametri associati verranno forniti nell'ordine in cui sono state dichiarate le acquisizioni)
(?P<name>...)Cattura il pattern (indicato da ...) come una variabile con nome (in questo caso "name"). I valori catturati sono passati alla view con il nome specificato. La tua view deve dichiarare un argomento con lo stesso nome!
[  ]Abbina uno dei caratteri del set. Per esempio, [abc] matcherà con 'a' o 'b' o 'c'. [-\w] restituirà un match con il carattere '-' o con ogni parola.
+ +

La maggioranza degli altri caratteri può essere presa letteralmente!

+ +

Consideriamo alcuni esempi di pattern realistici:

+ + + + + + + + + + + + + + + + + + + + + + +
PatternDescription
r'^book/(?P<pk>\d+)$' +

Matcha una stringa che ha book/ all'inizio della linea (^book/), dopo ha una o più cifre (\d+), e quindi termina (senza caratteri non numerici prima dell'indicatore di fine riga).

+ +

Cattura anche tutte le cifre (?P<pk>\d+) e le passa alla vista in un parametro chiamato 'pk'. I valori catturati vengono sempre passati come una stringa!

+ +

Ad esempio, book/1234 invierà una variabile pk = '1234' alla view.

+
r'^book/(\d+)$'Questo corrisponde agli stessi URL del caso precedente. Le informazioni acquisite verranno inviate come argomento senza nome alla vista.
r'^book/(?P<stub>[-\w]+)$' +

Matcha una stringa che ha book/ all'inizio della linea (^book/), quindi ha uno o più caratteri che sono o un carattere '-' o una parola ([-\w]+), e si conclude. Cattura anche questo set di caratteri e li passa alla vista in un parametro chiamato 'stub'.

+ +

Questo è uno schema abbastanza tipico per uno "stub". Gli stub sono chiavi primarie basate sull'uso di URL per i dati. È possibile utilizzare uno stub se si desidera che l'URL del libro sia più informativo. Per esempio /catalog/book/the-secret-garden anzichè /catalog/book/33.

+
+ +

È possibile acquisire più pattern nello stesso match e quindi codificare molte informazioni diverse in un URL.

+ +
+

Nota: Come sfida, considera come potresti codificare un URL per elencare tutti i libri pubblicati in un particolare anno, mese, giorno e RE che potrebbero essere utilizzati per abbinarlo.

+
+ +

Passare opzioni addizionali nelle tue mappe URL

+ +

Una caratteristica che non abbiamo usato qui, ma che potresti trovare di valore, è che puoi dichiarare e passare alla view opzioni aggiuntive. Le opzioni sono dichiarate come dizionario che si passa come terzo argomento non assegnato (senza nome) alla funzione path(). Questo approccio può essere utile se si desidera utilizzare la stessa view per più risorse e passare i dati per configurarne il comportamento in ciascun caso (di seguito forniamo un template diverso in ciascun caso).

+ +
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'),
+
+ +
+

Nota: Entrambe le opzioni extra e i pattern nominati catturati vengono passati alla view come argomenti con nome. Se si utilizza lo stesso nome sia per un pattern catturato che per un'opzione extra, solo il valore del pattern catturato verrà inviato alla vista (il valore specificato nell'opzione aggiuntiva verrà scartato).

+
+ +

View (class-based)

+ +

Apri catalog/views.py, e copia il seguente codice alla fine del file:

+ +
class BookDetailView(generic.DetailView):
+    model = Book
+ +

Fatto! Tutto ciò che ti serve fare ora è creare un template chiamato /locallibrary/catalog/templates/catalog/book_detail.html, e la view passerà al database l'informazione per lo specifico record di tipo Book estratto dall'URL mapper. All'interno del modello è possibile accedere all'elenco di libri con la variabile template denominata object OR book (cioè genericamente "the_model_name").

+ +

Se necessario, è possibile modificare il template utilizzato e il nome dell'oggetto contesto utilizzato per fare riferimento al libro nel template. È inoltre possibile sovrascrivere i metodi per aggiungere ulteriori informazioni al contesto, ad esempio.

+ +

Cosa succede se il record non esiste?

+ +

Se un record richiesto non esiste, la vista generica basata sulla classe genererà un'eccezione Http404 automaticamente: in produzione, verrà automaticamente visualizzata una pagina appropriata "risorsa non trovata", che è possibile personalizzare se lo si desidera. Solo per darti un'idea di come funziona, il frammento di codice seguente mostra come implementare la vista basata su classi come una funzione se non si stesse utilizzando la vista di dettaglio generica basata sulla classe.

+ +
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 vista prima cerca di ottenere il record del libro specifico dal modello. Se questo fallisce, la vista dovrebbe sollevare un'eccezione Http404 per indicare che il libro è "non trovato". Il passo finale è quindi, come al solito, chiamare render () con il nome del modello e i dati del libro nel parametro di contesto (come dizionario).

+ +

In alternativa, possiamo usare la funzione get_object_or_404() come scorciatoia per sollevare un'eccezione Http404 se il record non viene trovato.

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

Creare il template per la vista dettaglio

+ +

Crea il file HTML /locallibrary/catalog/templates/catalog/book_detail.html ed inserisci il seguente contenuto. come discusso precedentmente, questo nome file di default per il template è quello atteso dalla generica class-based detail view (per un modello di nome Book in una applicazione di nome 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> {% for genre in book.genre.all %} \{{ genre }}{% if not forloop.last %}, {% endif %}{% endfor %}</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 %}
+ + + +
+

Il link dell'autore nel template sopra ha un URL vuoto perché non abbiamo ancora creato una pagina dei dettagli dell'autore. Una volta che esisterà, dovresti aggiornare l'URL in questo modo:

+ +
<a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a>
+
+
+ +

Anche se un po 'più grande, quasi tutto in questo template è stato descritto in precedenza:

+ + + +

Prima non abbiamo visto la funzione interessante book.bookinstance_set.all(). Questo metodo viene auto-magicamente creato da Django per restituire un set di record BookInstance  associati con un particolare Book.

+ +
{% for copy in book.bookinstance_set.all %}
+  <!-- code to iterate across each copy/instance of a book -->
+{% endfor %}
+ +

Questo metodo è necessario perchè hai dichiarato una ForeignKey (uno-a-molti) solamente da una parte della relazione. Poichè non hai fatto nulla per dichiarare la relazione negli altri ("molti") modelli, non ci sono alcun campo da cui prendere il set di record associati. Per superare questo problema, Django costruisce un appropriata funzione di nome "reverse lookup" (ricerca inversa) che puoi usare. Il nome della funzione viene costruito con le lettere minuscole del modello in cui la ForeignKey è stata dichiarata, seguita da _set (ovvero la funzione creata in Book è bookinstance_set()).

+ +
+

Nota: Qui usiamo all() per ottenere tutti i record (di default). Anche se puoi usare il metodo filter() per ricevere un sottoinsieme di record nel tuo codice, non puoi farlo direttamente nei template perchè non puoi specificare argomenti nelle funzioni.

+ +

Fai attenzione anche a non definire un ordine (sulla tua vista class-based o model), altrimenti vedrai anche degli errori dal server di sviluppo come questo:

+ +
[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)
+
+ +

Ciò si verifica perché paginator object si aspetta di vedere alcuni ORDER BY eseguiti sul database sottostante. Senza di esso, non può essere sicuro che i record siano restituiti effettivamente nell'ordine corretto! 

+ +

In questo tutorial non abbiamo ancora visto Pagination (ancora, ma presto), ma poichè non puoi utilizzare sort_by() e passare un parametro, (stessa cosa con filter()) dovrai scegliere tra tre strade:

+ +
    +
  1. Aggiungere un ordering dentro una dichiarazione class Meta nel tuo modello.
    2. +
  2. Aggiungere un attibuto queryset  nella tua view custom class-based, specificando un order_by().
    3. +
  3. Aggiungere un metodo get_queryset alla tua view  custom class-based e specificando un order_by().
    4. +
+ +

Se decidi di usare una classe Meta per il model Author (probabilmente non così flessibile come personalizzare la vista basata sulla classe, ma abbastanza facile), ti ritroverai con qualcosa di simile a questo

+ +
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']
+ +

Ovviamente, il campo non necessita di essere un last_name: può essere qualunque altro.

+ +

E per ultimo, ma non meno importante, dovresti ordinare un attributo/colonna che abbia effettivamente un indice (unico o meno) sul tuo database per evitare problemi di prestazioni. Ovviamente, questo non sarà necessario qui, con così pochi libri (e utenti!), ma è qualcosa da tenere a mente per i progetti futuri.

+
+ +

Come viene visualizzato?

+ +

A questo punto, avremmo dovuto creare tutto il necessario per visualizzare sia l'elenco dei libri sia le pagine di dettaglio dei libri. Lancia il comando (python3 manage.py runserver) ed apri sul tuo browser http://127.0.0.1:8000/.

+ +
+

Warning: Non fare ancora clic su nessun link di autore o di dettaglio dell'autore: creerai quelli nella sfida!

+
+ +

Click su All books per vedere la lista di tutti i libri. 

+ +

Book List Page

+ +

Quindi fai clic su un link a uno dei tuoi libri. Se tutto è impostato correttamente, dovresti vedere qualcosa come il seguente screenshot.

+ +

Book Detail Page

+ +

Impaginazione

+ +

Se hai appena qualche record, la nostra pagina di elenco dei libri sembrerà a posto. Tuttavia, inserendo decine o centinaia di record la pagina impiegherà più tempo a caricarsi (e avrà troppi contenuti per navigare in modo ragionevole). La soluzione a questo problema è di aggiungere l'impaginazione alle visualizzazioni della lista, riducendo il numero di elementi visualizzati su ciascuna pagina.

+ +

Django ha un eccellente supporto per l'impaginazione built-in. Ancora meglio, questo è incorporato nelle view lista generiche basate su classe, quindi non devi fare molto per abilitarlo!

+ +

Views

+ +

Apri catalog/views.py, ed aggiungi la riga di codice paginate_by mostrata sotto.

+ +
class BookListView(generic.ListView):
+    model = Book
+    paginate_by = 10
+ +

Con questa aggiunta, non appena si hanno più di 10 record, la vista inizierà a impaginare i dati che invia al modello. Si accede alle diverse pagine usando i parametri GET - per accedere alla pagina 2 si utilizzerà l'URL: /catalog/books/?page=2.

+ +

Templates

+ +

Ora che i dati sono impaginati, è necessario aggiungere il supporto al template per scorrere il set di risultati. Poiché potremmo volerlo fare in tutte le view elenco, lo faremo in un modo che possa essere aggiunto al template base.

+ +

Apri /locallibrary/catalog/templates/base_generic.html e copiaci dentro il seguente blocco di paginazione (evidenziato in grassetto qui in basso) sotto il nostro block content. Il codice controlla innanzitutto se l'impaginazione è abilitata nella pagina corrente. In tal caso, aggiunge i collegamenti successivo e precedente se appropriato (e il numero di pagina corrente).

+ +
{% 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">
+          <p>Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}.</p>
+        </span>
+        {% if page_obj.has_next %}
+          <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a>
+        {% endif %}
+      </span>
+    </div>
+  {% endif %}
+{% endblock %}
+ +

Il page_obj è un oggetto Paginator che esisterà se la paginazione viene utilizzata nella pagina corrente. Ti permette di ottenere tutte le informazioni sulla pagina corrente, le pagine precedenti, quante pagine ci sono, ecc.

+ +

Usiamo \{{ request.path }} per ottenere l'URL della pagina corrente per la creazione dei collegamenti di paginazione. Questo è utile perché è indipendente dall'oggetto che stiamo impaginando.

+ +

Ecco fatto!

+ +

Come viene visualizzato?

+ +

Lo screenshot qui sotto mostra l'aspetto della paginazione: se non hai inserito più di 10 titoli nel tuo database, puoi testarlo più facilmente abbassando il numero specificato in paginate_by.

+ +

I link di impaginazione sono visualizzati in basso, con i link successivo / precedente visualizzati a seconda della pagina in cui ti trovi.

+ +

Book List Page - paginated

+ +

Sfida te stesso

+ +

La sfida in questo articolo è di creare le view di dettaglio e le view di elenco dell'autore richieste per completare il progetto. Questi dovrebbero essere resi disponibili ai seguenti URL:

+ + + +

Il codice richiesto per i mappatori di URL e le viste dovrebbe essere praticamente identico all'elenco di libri e alle viste di dettaglio che abbiamo creato sopra. I modelli saranno diversi ma condivideranno un comportamento simile.

+ +
+

Note:

+ + +
+ +

Quando hai finito, le tue pagine dovrebbero apparire come gli screenshot qui sotto.

+ +

Author List Page

+ + + +

Author Detail Page

+ + + +

Sommario

+ +

Congratulazioni, la nostra funzionalità di libreria di base è ora completa!

+ +

In questo articolo, abbiamo imparato come utilizzare la lista generica basata sulla classe e le viste di dettaglio e li abbiamo usati per creare pagine per visualizzare i nostri libri e autori. Lungo la strada abbiamo imparato a conoscere la corrispondenza dei modelli con le espressioni regolari e come puoi passare i dati dagli URL alle tue visualizzazioni. Abbiamo anche imparato qualche altro trucco per l'utilizzo dei modelli. Infine, abbiamo mostrato come impaginare le visualizzazioni degli elenchi in modo che le nostre liste siano gestibili anche quando abbiamo molti record.

+ +

Nei nostri prossimi articoli, estenderemo questa libreria per supportare gli account utente, dimostrando in tal modo l'autenticazione dell'utente, permissons, sessioni e moduli.

+ +

Vedi anche

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/server-side/django/home_page/index.html b/files/it/learn/server-side/django/home_page/index.html new file mode 100644 index 0000000000..42c8d69eee --- /dev/null +++ b/files/it/learn/server-side/django/home_page/index.html @@ -0,0 +1,419 @@ +--- +title: 'Django Tutorial Parte 5: Creare una Home page' +slug: Learn/Server-side/Django/Home_page +tags: + - Articolo + - Codice + - Script + - Tutorial + - django + - imparare + - lezioni + - server-side + - template django + - viste 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")}}
+ +

Ora siamo pronti per aggiungere il codice che mostra la nostra prima pagina completa: una home page per il sito web LocalLibrary. La home page mostrerà il numero di record che abbiamo per ogni tipo di modello e fornirà i link di navigazione della barra laterale alle nostre altre pagine. Lungo la strada acquisiremo esperienza pratica nella scrittura di mappe e viste URL di base, nel leggere record dal database e utilizzare i templates.

+ + + + + + + + + + + + +
Prerequisiti:Leggere Django Introduction e Django Tutorial Part 4: Django admin site.
Obiettivi:Impara a creare semplici mappe url e viste (in cui nessun dato è codificato nell'URL), ottienere dati dai modelli e creare modelli.
+ +

Panoramica

+ +

Dopo aver definito i nostri modelli e creato alcuni record della biblioteca iniziale con cui lavorare, è tempo di scrivere il codice che presenta tali informazioni agli utenti. La prima cosa che dobbiamo fare è determinare quali informazioni vogliamo visualizzare nelle nostre pagine e definire gli URL da utilizzare per restituire tali risorse. Quindi creeremo un URL mapper, visualizzazioni e templates per visualizzare le pagine.

+ +

Il diagramma seguente descrive il flusso di dati principale e i componenti richiesti durante la gestione delle richieste e delle risposte HTTP. Siccome abbiamo già implementato il modello, i componenti principali che creeremo sono:

+ + + +

+ +

Come vedrai nella prossima sezione, abbiamo 5 pagine da visualizzare, che sono troppe informazioni da documentare in un singolo articolo. Pertanto, questo articolo si concentrerà su come implementare la home page e tratteremo le altre pagine in un articolo successivo. Questo dovrebbe darti una buona comprensione end-to-end di come funzionano in pratica i mappatori, le viste e i modelli.

+ +

Definizione degli URL delle risorse

+ +

Siccome questa LocalLibrary è essenzialmente di sola lettura per gli utenti finali, abbiamo solo bisogno di fornire una pagina di destinazione per il sito (una home page) e pagine che visualizzano elenchi e viste di dettaglio per libri e autori.

+ +

Gli URL di cui avremo bisogno per le nostre pagine sono:

+ + + +

I primi tre URL restituiranno la pagina di indice, l'elenco di libri e l'elenco di autori. Questi URL non codificano alcuna informazione aggiuntiva e le query che prelevano i dati dal database saranno sempre le stesse. Tuttavia, i risultati restituiti dalle query dipendono dal contenuto del database.

+ +

Al contrario, gli ultimi due URL mostreranno informazioni dettagliate su uno specifico libro o autore. Questi URL codificano l'identità dell'oggetto da visualizzare (rappresentato da <id>. Il mapper URL estrarrà le informazioni codificate e le passerà alla view e la view determinerà dinamicamente quali informazioni ottenere dal database. Codificando le informazioni nell'URL useremo un singolo set di una mappatura url, una view e un template per gestire tutti i libri (o gli autori).

+ +
+

Nota: Con Django, puoi costruire i tuoi URL come richiesto, puoi codificare le informazioni nel corpo dell'URL come mostrato sopra, o includere i parametri GET nell'URL, per esempio /book/?id=6. Qualunque approccio tu usi, gli URL dovrebbero essere mantenuti puliti, logici e leggibili, come raccomandato dagli standard W3C.

+ +

La documentazione di Django consiglia di codificare le informazioni nel corpo dell'URL per ottenere una migliore progettazione dell'URL

+
+ +

Come accennato nella panoramica, il resto di questo articolo descrive come costruire la pagina indice.

+ +

Creare la pagina index

+ +

La prima pagina che creeremo è la pagina indice (catalogo/). La pagina indice includerà alcuni HTML statici, insieme ai "conteggi" generati di diversi record nel database. Per fare questo, creeremo una mappatura URL, una view e un template.

+ +
+

Nota: Vale la pena prestare molta attenzione in questa sezione. La maggior parte delle informazioni si applica anche alle altre pagine che creeremo.

+
+ +

Mappatura dell'URL

+ +

Quando abbiamo creato lo scheletro del website, abbiamo aggiornato il file locallibrary/urls.py per garantire che ogni volta che un URL che inizia con catalog/ viene ricevuto, il modulo URLConf in catalog.urls elaborerà la sottostringa rimanente.

+ +

Il seguente codice da locallibrary/urls.py include il modulo catalog.urls:

+ +
urlpatterns += [
+    path('catalog/', include('catalog.urls')),
+]
+
+ +
+

Nota: Ogni volta che Django incontra la funzione di importazione django.urls.include(), divide la stringa URL al carattere finale designato e invia la sottostringa rimanente al modulo URLconf incluso per un'ulteriore elaborazione.

+
+ +

Abbiamo anche creato un placeholder file per il modulo URLConf, chiamato /catalog/urls.py. Aggiungi il seguente codice a quel file:

+ +
urlpatterns = [
+    path('', views.index, name='index'),
+]
+ +

la funzione path()definisce:

+ + + +

La funzione path() specifica anche un parametro name, che è un identificatore univoco per questa particolare mappatura degli URL. È possibile utilizzare il name per "invertire" il mapper, ovvero creare dinamicamente un URL che punta alla risorsa che il programma di mappatura è progettato per gestire. Ad esempio, possiamo usare il parametro name per collegarci alla nostra home page da qualsiasi altra pagina aggiungendo il seguente link in un template:

+ +
<a href="{% url 'index' %}">Home</a>.
+ +
+

Nota: Potremmo anche mettere un link statico  <a href="/catalog/">Home</a>), ma se in futuro cambiassimo il pattern della home page, per esempio, in/catalog/index) i templates non si collegheranno più correttamente. L'utilizzo di una mappatura URL invertita è molto più flessibile e robusto.

+
+ +

View (function-based)

+ +

Una vista è una funzione che elabora una richiesta HTTP, recupera i dati richiesti dal database, esegue il rendering dei dati in una pagina HTML utilizzando un template HTML e quindi restituisce l'HTML generato in una risposta HTTP per far visualizzare la pagina all'utente. La vista dell'indice segue questo modello — raccoglie informazioni sul numero di Book, BookInstance, BookInstance disponibili, e Author presenti nel database, e passa tali informazioni a un template per la visualizzazione.

+ +

Apri catalog/views.py e nota che il file già importa la funzione di shortcut render() per generare un file HTML usando un template e i dati: 

+ +
from django.shortcuts import render
+
+# Create your views here.
+
+ +

Incolla le seguenti righe nella parte inferiore del file:

+ +
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 prima riga importa le classi di modello che useremo per accedere ai dati in tutte le nostre views.

+ +

La prima parte della funzione view recupera il numero di record usando l'attributo objects.all() sulle classi del model. Inoltre prende una lista di oggetti BookInstance che hanno il valore 'a' (Available) nel campo status. Trovi ulteriori informazioni sull'accesso ai dati di modello nel precedente tutorial Django Tutorial Part 3: Using models > Searching for records.

+ +

Alla fine della funzione view, chiamiamo la funzione render() per creare una pagina HTML e restituire la pagina come risposta. Questa funzione scorciatoia include una serie di altre funzioni per semplificare un caso d'uso molto comune. La funzione render() accetta i seguenti parametri:

+ + + +

Approfondiremo context e templates nella prossima sezione. Iniziamo a creare il nostro modello in modo che possiamo effettivamente mostrare qualcosa all'utente!

+ +

Template

+ +

Un template è un file di testo che definisce la struttura o il layout di un file (come una pagina HTML), utilizzando placeholder per rappresentare contenuto effettivo.

+ +

Django cercherà automaticamente i template in una directory chiamata 'templates' nella tua applicazione. Ad esempio, nella view index che abbiamo appena aggiunto, la funzione render() si aspetterà di trovare il file index.html in /locallibrary/catalog/templates/ e solleverà un errore se il file non è presente. Puoi eseguire un controlo salvando i cambiamenti precedenti ed accedendo a 127.0.0.1:8000 col tuo browser - verrà mostrato un messaggio di errore abbastanza intuitivo: "TemplateDoesNotExist at /catalog/", ed altri dettagli.

+ +
+

Nota: Sulla base del file delle impostazioni del progetto, Django cercherà i template in un numero di punti, cercando di default nelle applicazioni installate. Puoi trovare ulteriori informazioni su come Django trova i template e su quali formati di modello supporta sulla sezione Templates della documentazione Django.

+
+ +

Estendere i templates

+ +

Il template dell'index richiederà un markup HTML standard per la head e il body, insieme alle sezioni di navigazione per collegarsi alle altre pagine del sito che non abbiamo ancora creato e alle sezioni che visualizzano il testo introduttivo e i dati del libro.

+ +

Gran parte della struttura HTML e di navigazione sarà la stessa in ogni pagina del nostro sito. Invece di duplicare il codice su ogni pagina, puoi usare il linguaggio di template di Django per dichiarare un template di base, e quindi estenderlo per sostituire solo i bit che sono diversi per ogni pagina specifica.

+ +

Il seguente frammento di codice è un modello di base di esempio da un file base_generic.html. L'esempio include HTML comune con sezioni per un titolo, una barra laterale e il contenuto principale contrassegnati con i tag di template chiamati block e endblock, mostrati in grassetto. È possibile lasciare i blocchi vuoti o includere il contenuto predefinito da utilizzare durante il rendering delle pagine derivate dal template.

+ +
+

Nota: I tag Template sono funzioni che è possibile utilizzare in un Template per scorrere gli elenchi, eseguire operazioni condizionali in base al valore di una variabile e così via. Oltre ai tag del template, la sintassi del template consente di fare riferimento alle variabili passate nel template dalla view e utilizzare i template filter per formattare le variabili (ad esempio, per convertire una stringa in lettere minuscole).

+
+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  {% block title %}<title>Local Library</title>{% endblock %}
+</head>
+<body>
+  {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
+  {% block content %}<!-- default content text (typically empty) -->{% endblock %}
+</body>
+</html>
+
+ +

Quando definiamo un template per una particolare vista, per prima cosa specifichiamo il template di base usando il tag extends  — vedere il codice di esempio sotto. Quindi dichiariamo quali sezioni del template vogliamo sostituire (se ce ne sono), usando le sezioni block/endblock come nel template di base. 

+ +

Ad esempio, il frammento di codice qui sotto mostra come usare il template tag extends ed effettuare un override del block content. L'HTML generato includerà il codice e la struttura definiti nel template di base, incluso il contenuto di default che hai definito nel blocco title, ma il nuovo blocco content al posto di quello di default.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Local Library Home</h1>
+  <p>Welcome to LocalLibrary, a website developed by <em>Mozilla Developer Network</em>!</p>
+{% endblock %}
+ +

Template di base di LocalLibrary

+ +

Utilizzeremo il seguente snippet di codice come modello di base per il sito Web di LocalLibrary. Come puoi vedere, contiene del codice HTML e definisce i blocchi per title, sidebar e content. Abbiamo un titolo di default e una barra laterale predefinita con collegamenti agli elenchi di tutti i libri e gli autori, entrambi racchiusi in blocchi per essere facilmente modificati in futuro.

+ +
+

Nota: Presentiamo anche due ulteriori tag di template: url e load static. Questi tag verranno spiegati nelle seguenti sezioni.

+
+ +

Crea un nuovo file base_generic.html in /locallibrary/catalog/templates/ e copia il codice sotto nel file:

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  {% block title %}<title>Local Library</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="">All books</a></li>
+          <li><a href="">All authors</a></li>
+        </ul>
+     {% endblock %}
+      </div>
+      <div class="col-sm-10 ">{% block content %}{% endblock %}</div>
+    </div>
+  </div>
+</body>
+</html>
+ +

Il template include CSS da Bootstrap per migliorare il layout e la presentazione della pagina HTML. Usare di Bootstrap (o di un altro framework web sul lato client) è un modo rapido per creare una pagina attraente che si mostra bene su diverse dimensioni dello schermo.

+ +

Il template di base fa anche riferimento a un file css locale (styles.css) che fornisce uno styling aggiuntivo. Crea un file styles.css in /locallibrary/catalog/static/css/ e incolla il seguente codice nel file:

+ +
.sidebar-nav {
+    margin-top: 20px;
+    padding: 0;
+    list-style: none;
+}
+ +

Il template di index

+ +

Crea un nuovo file HTML index.html in /locallibrary/catalog/templates/ and paste the following code in the file. Questo codice estende il nostro template di base sulla prima riga, quindi sostituisce il blocco di content predefinito per il modello. 

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Local Library Home</h1>
+  <p>Welcome to LocalLibrary, a website developed by <em>Mozilla Developer Network</em>!</p>
+  <h2>Dynamic content</h2>
+  <p>The library has the following record counts:</p>
+  <ul>
+    <li><strong>Books:</strong> \{{ num_books }}</li>
+    <li><strong>Copies:</strong> \{{ num_instances }}</li>
+    <li><strong>Copies available:</strong> \{{ num_instances_available }}</li>
+    <li><strong>Authors:</strong> \{{ num_authors }}</li>
+  </ul>
+{% endblock %}
+ +

Nella sezione Dynamic content dichiariamo i placeholders (variabili del template) per le informazioni dalla view che vogliamo includere. Le variabili sono racchiuse tra doppie parentesi graffe (handlebars), come mostrato in grassetto nel codice di esempio. 

+ +
+

Nota: È possibile riconoscere facilmente variabili di template e tag di template (funzioni) - le variabili sono racchiuse tra doppie parentesi (\{{ num_books }}), e i tag sono racchiusi tra parentesi graffe singole con segni di percentuale ({% extends "base_generic.html" %}).

+
+ +

La cosa importante da notare qui è che le variabili sono nominate con le keys che passiamo nel dizionario context nella funzione render() della nostra view (vedi esempio sotto). Le variabili saranno sostituite con i loro valori associati quando il modello è renderizzato. 

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

Referenziare file statici nei templates

+ +

È probabile che il tuo progetto utilizzi risorse statiche, inclusi JavaScript, CSS e immagini. Perché la posizione di questi file potrebbe non essere nota (o potrebbe cambiare) Django ti consente di specificare la posizione nei tuoi template rispetto alle impostazioni globali di STATIC_URL. Lo scheletro del website imposta il valore di STATIC_URL predefinito a '/static/', ma potresti scegliere di ospitarli su una rete di distribuzione dei contenuti o altrove.

+ +

All'interno del template chiami prima il tag di template load che specifica "statico" per aggiungere la libreria modello, come mostrato nell'esempio di codice seguente. È quindi possibile utilizzare il tag del template static e specificare l'URL relativo al file richiesto.

+ +
<!-- Add additional CSS in static file -->
+{% load static %}
+<link rel="stylesheet" href="{% static 'css/styles.css' %}">
+ +

Puoi anche aggiungere una immagine allo stesso modo, per esempio:

+ +
{% load static %}
+<img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="UML diagram" style="width:555px;height:540px;">
+
+ +
+

Nota: Gli esempi sopra specificano dove si trovano i file, ma Django non li serve di default. Abbiamo configurato il web server di sviluppo per servire i file modificando il mapper URL globale (/locallibrary/locallibrary/urls.py) quando abbiamo creato lo scheletro del website, ma è comunque necessario abilitare il file serving in produzione. Lo vedremo più tardi.

+
+ +

Per maggiori informazioni sul lavoro con file statici vedere utilizzare static files.

+ +

Collegarsi agli URLs

+ +

Il template di base sottostante presenta il tag di template URL.

+ +
<li><a href="{% url 'index' %}">Home</a></li>
+
+ +

Questo tag accetta il nome di una funzione path() chiamata in urls.py e i valori per qualsiasi argomento che la vista associata riceverà da quella funzione e restituisce un URL che è possibile utilizzare per collegarsi alla risorsa.

+ +

Configurare dove trovare i templates

+ +

Devi indicare a Django dove cercare i tuoi template nella cartella dei template. Per fare ciò, aggiungi la directory templates all'oggetto TEMPLATES modificando il file settings.py come mostrato in grassetto nel seguente esempio di codice:

+ +
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',
+            ],
+        },
+    },
+]
+ +

Come viene renderizzato?

+ +

A questo punto abbiamo creato tutte le risorse necessarie per visualizzare la pagina indice. Esegui il serve (python3 manage.py runserver) e apri http://127.0.0.1:8000/ nel browser. Se tutto è configurato correttamente, il tuo sito dovrebbe apparire come il seguente screenshot.

+ +

Index page for LocalLibrary website

+ +
+

Nota: I link All books e All authors non funzioneranno ancora perché i path, le view e i template per tali pagine non sono definiti. Abbiamo solo inserito i segnaposto per quei link nel template base_generic.html.

+
+ +

Prova tu

+ +

Ecco un paio di attività per testare la tua familiarità con le query al model, le view e i template.

+ +
    +
  1. Il base template di LocalLibrary include un blocco title. Effettua un override nell' index template e crea un nuovo titolo per la pagina. + +
    +

    Consiglio: La sezione Extending templates mostra come creare blocchi ed estendere blocchi in altri template.

    +
    +
    2. +
  2. Modifica la view per generare conteggi per i genres e books che contengono una parola particolare (maiuscole e minuscole) e passano i risultati a context. Lo realizzi in un modo simile alla creazione e all'utilizzo di num_books e num_instances_available. Dopo fai un update dell' index template per includere le variabili.
    3. +
+ + + +

Sommario

+ +

Abbiamo appena creato la home page del nostro sito: una pagina HTML che visualizza un numero di record dal database e collegamenti ad altre pagine ancora da creare. Lungo il percorso abbiamo appreso informazioni fondamentali sui mappatori url, le viste, l'interrogazione del database con i modelli, il passaggio di informazioni a un modello da una vista e la creazione e l'estensione di modelli. Nel prossimo articolo svilupperemo questa conoscenza per creare le restanti quattro pagine del nostro sito web.

+ +

Vedi anche

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/server-side/django/index.html b/files/it/learn/server-side/django/index.html new file mode 100644 index 0000000000..63e9b5ec39 --- /dev/null +++ b/files/it/learn/server-side/django/index.html @@ -0,0 +1,70 @@ +--- +title: Django Web Framework (Python) +slug: Learn/Server-side/Django +tags: + - CodingScripting + - Intro + - Learn + - Principiante + - Python + - Server-side programming + - TopicStub + - django +translation_of: Learn/Server-side/Django +--- +
{{LearnSidebar}}
+Django è un server-side web framework Python estremamente popolare. Il modulo mostra perché Django è uno dei server web framework più usati, come impostare l'ambiente di sviluppo e come iniziare ad usarlo per creare le tue web application.
+ +
+ +

Prerequisiti

+ +

Per iniziare non hai bisogno di nessuna conoscenza di Django. Hai bisogno di capire cosa sono la programmazione web lato server e i framework web, leggendo il modulo Server-side website programming first steps.

+ +

E'  raccomandata una conoscenza generale dei concetti di programmazione e di Python, ma non è essenziale per capire i concetti fondamentali.

+ +
+

Nota: Python è uno dei linguaggi di programmazione più semplici da leggere e capire per i principianti. Detto questo, se vuoi capire meglio questo modulo su Internet puoi trovare numerosi  libri gratuiti e tutorial ( nuovi programmatori potrebbero voler leggere la pagina Python for Non Programmers su python.org wiki).

+
+ +

Guide

+ +
+
Introduzione a Django
+
In questo primo articolo su Django risponderemo alla domanda "Cosa è Django?" e daremo una panoramica su cosa rende questo framework web speciale. Sottolineeremo le caratteristiche principali, inclusa qualche funzionalità avanzata di cui non abbiamo il tempo per parlarne in dettaglio in questo modulo. Mostreremo anche alcuni blocchi principali che compongono una applicazione Django, questo per dare una idea di cosa può fare prima ancora che tu possa configurarlo e iniziare a giocarci.
+
 Configurare un ambiente di sviluppo per Django
+
Ora che sai cosa è Django, mostreremo come configurare e testare un ambiente di sviluppo di Django su Windows, Linux (Ubuntu), e Mac OS X — o qualunque sistema operativo comune tu stia usando, questo articolo ti darà quello che ti server per iniziare lo sviluppo di applicazioni Django.
+
Django Tutorial: Il sito  "Local Library"
+
Primo articolo nella serie di tutorial pratici che spiega cosa imparerai, e fornirà una panoramica del sito web, di esempio, "local library"  su cui lavoreremo e che evolverà nei seguenti articoli.
+
Django Tutorial Parte 2: Creare lo scheletro di un sito web
+
Questo articolo mostra come puoi creare lo scheletro del progetto che potrai continuare a popolare con impostazioni specifiche, url, modelli, view e  template.
+
Django Tutorial Parte 3: Usare i modelli
+
Questo articolo mostra come definire i modelli per il sito LocalLibrary  — i modelli rappresentano le strutture dati usate per memorizzare i dati dell'applicazione, e permette a Django di salvare i dati in un database. Spiega cosa è un modello, come si dichiara e alcuni dei tipi di dati principali. Inoltre mostra brevemente alcuni dei modi principali con cui accedere il modello dei dati.
+
Django Tutorial Parte 4: Django admin site
+
Ora che abbiamo creato i modelli per il LocalLibrary website, useremo il sito Django Admin per aggiungere qualche "real" book data. Prima ti mostreremo come registrare i modelli con il sito admin, quindi ti mostreremo come effettuare il login e creare qualche dato. Infine mostriamo qualcuno dei modi con cui puoi migliorare la presentazione del sito admin.
+
Django Tutorial Parte 5: Creare la nostra home page
+
Ora siamo pronti ad aggiungere il codice per visualizzare la nostra prima pagina intera, una home page per il sito LocalLibrary che mostra quanti record abbiamo di ogni tipo di modello e fornisce collegamenti di navigazione della barra laterale alle altre nostre pagine. Lungo la strada acquisiremo esperienza pratica nella scrittura di URL maps e views, ottenendo dei record dal database e usando i templates.
+
Django Tutorial Parte 6: Generic list and detail views
+
Questo tutorial estende il nostro sito LocalLibrary, aggiungendo pagine con liste e dettagli dei libri e degli autori. Qui impareremo le generic class-based views, e mostreremo come possono ridurre l'ammontare di codice da scrivere per i casi d'uso comuni. Vedremo anche la gestione degli URL in modo più approfondito, mostrando come effettuare un pattern matching di base.
+
Django Tutorial Parte 7: Sessions framework
+
Questo tutorial estende il nostro sito LocalLibrary, aggiungendo un contatore delle visite basatoi sulle sessioni nella home page. Questo è un esempio relativamente semplice, ma mostra come è possibile utilizzare il session framework per fornire comportamenti persistenti agli utenti anonimi nei propri siti.
+
Django Tutorial Parte 8: Autenticazione utenti e permessi
+
In questo tutorial ti mostreremo come consentire agli utenti di accedere al tuo sito con i loro account e come controllare cosa possono fare e vedere in base al fatto che siano o meno connessi e in base alle loro permissions. Come parte di questa dimostrazione estenderemo il sito LocalLibrary, aggiungendo pagine di accesso e logout e pagine specifiche dell'utente e del personale per la visualizzazione di libri presi in prestito.
+
Django Tutorial Part 9: Lavorare con i forms
+
In questo tutorial ti mostreremo come lavorare con i Forms HTML in Django, e in particolare il modo più semplice per scrivere forms per creare, aggiornare ed eliminare le istanze del model. Come parte di questa dimostrazione estenderemo il sito LocalLibrary in modo che i bibliotecari possano rinnovare i libri e creare, aggiornare ed eliminare gli autori utilizzando i nostri forms (anziché utilizzare l'applicazione di admin).
+
Django Tutorial Part 10: Testing a Django web application
+
As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate unit testing of your website using Django's test framework.
+
Django Tutorial Part 11: Deploying Django to production
+
Now you've created (and tested) an awesome LocalLibrary website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.
+
Django web application security
+
Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article Web security — this article provides a practical demonstration of how Django's in-built protections handle such threats.
+
+ +

Assessments

+ +

The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.

+ +
+
DIY Django mini blog
+
In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.
+
diff --git a/files/it/learn/server-side/django/introduzione/index.html b/files/it/learn/server-side/django/introduzione/index.html new file mode 100644 index 0000000000..4eb36683eb --- /dev/null +++ b/files/it/learn/server-side/django/introduzione/index.html @@ -0,0 +1,281 @@ +--- +title: Introduzione a Django +slug: Learn/Server-side/Django/Introduzione +tags: + - Introduzione + - Learn + - Principianti + - Python + - django + - programmazione lato server +translation_of: Learn/Server-side/Django/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+ +
In questo primo articolo su Django risponderemo alla domanda "Cos'è Django?" e forniremo una panoramica su cosa rende speciale questo web framework. Andremo a sottolinearne le principali caratteristiche, incluse alcune delle funzionalità avanzate, che però in questo modulo non avremo tempo di presentare nel dettaglio. Mostreremo poi alcuni dei principali blocchi che compongono un'applicazione Django (sebbene a questo punto non dovreste ancora avere un ambiente di sviluppo in cui poterla testare).
+ + + + + + + + + + + + +
Prerequisiti: +

Conoscenza base del computer. Un'introduzione generale alla programmazione lato server, in particolare ai meccanismi di interazione client-server.

+
Obiettivo:Acquisire familiarità con l'ambiente Django: cos'è, come funziona, quali sono le principali funzionalità che mette a disposizione e i blocchi principali delle applicazioni Django.
+ +

Che cos'è Django?

+ +

Django è un framework web Python di alto livello che consente un rapido sviluppo di siti web sicuri e manutenibili. Costruito da sviluppatori esperti, Django si occupa di gran parte del problema dello sviluppo web, in modo da potersi concentrare sulla scrittura della propria app senza dover reinventare la ruota. È gratuito e open source, ha una comunità fiorente e attiva, un'ottima documentazione e molte opzioni per il supporto gratuito e a pagamento. 

+ +

Django vi aiuta a scrivere software che è:

+ +
+
Completo
+
Django segue la filosofia "Batterie incluse" e fornisce quasi tutto ciò che gli sviluppatori potrebbero voler fare "out of the box". Poiché tutto ciò di cui si ha bisogno è parte di un unico "prodotto", funziona tutto insieme senza soluzione di continuità, segue principi di progettazione coerenti e ha una vasta e aggiornata documentazione.
+
Versatile
+
Django può essere (ed è stato) utilizzato per costruire quasi ogni tipo di sito web - dai sistemi di gestione dei contenuti e wiki, fino ai social network e ai siti di notizie. Può funzionare con qualsiasi framework lato client, e può fornire contenuti in quasi tutti i formati (inclusi HTML, feed RSS, JSON, XML, ecc.). Il sito che state leggendo è basato su Django!
+
Internamente, mentre fornisce scelte per quasi tutte le funzionalità che si possono desiderare (ad esempio, diversi database popolari, motori di modellizzazione, ecc), può anche essere esteso per utilizzare altri componenti se necessario.
+
Sicuro
+
Django aiuta gli sviluppatori ad evitare molti errori di sicurezza comuni, fornendo un framework che è stato progettato per "fare le cose giuste" per proteggere automaticamente il sito web. Ad esempio, Django fornisce un modo sicuro per gestire gli account utente e le password, evitando i comuni errori come l'inserimento di informazioni di sessione nei cookie dove sono vulnerabili (i cookie contengono solo una chiave e i dati reali sono memorizzati nel database) o la memorizzazione diretta delle password piuttosto che l'hash della password.
+
Un hash della password è un valore di lunghezza fissa creato inviando la password attraverso una funzione di hash crittografico. Django può controllare se una password inserita è corretta eseguendola attraverso la funzione hash e confrontando l'uscita con il valore hash memorizzato. Tuttavia, a causa della natura "unidirezionale" della funzione, anche se un valore hash memorizzato è compromesso, è difficile per un aggressore elaborare la password originale.
+
Django consente la protezione contro molte vulnerabilità di default, tra cui SQL injection, cross-site scripting, cross-site request forgery e clickjacking (vedere Sicurezza del sito web per maggiori dettagli su tali attacchi).
+
Scalabile
+
Django utilizza un'architettura basata su componenti "shared-nothing" (ogni parte dell'architettura è indipendente dalle altre e può quindi essere sostituita o modificata se necessario). Avere una chiara separazione tra le diverse parti significa che può scalare per l'aumento del traffico aggiungendo hardware a qualsiasi livello: server di caching, server di database o server di applicazioni. Alcuni dei siti più trafficati hanno scalato con successo Django per soddisfare le loro richieste (ad esempio Instagram e Disqus, per citarne solo due).
+
Manutenibile
+
Il codice Django è scritto utilizzando principi di progettazione e modelli che incoraggiano la creazione di codice manutenibile e riutilizzabile. In particolare, si avvale del principio Don't Repeat Yourself (DRY) per evitare inutili duplicazioni, riducendo la quantità di codice. Django promuove anche il raggruppamento delle funzionalità correlate in "applicazioni" riutilizzabili e, ad un livello più basso, raggruppa il codice correlato in moduli (sulla falsariga del modello Model View Controller (MVC)).
+
Portabile
+
Django è scritto in Python, che funziona su molte piattaforme. Ciò significa che non siete legati a nessuna particolare piattaforma server e potete eseguire le vostre applicazioni su molti tipi di Linux, Windows e Mac OS X. Inoltre, Django è ben supportato da molti web hosting provider, che spesso forniscono infrastrutture e documentazione specifiche per l'hosting dei siti Django.
+
+ +

Da dove proviene?

+ +

Django è stato inizialmente sviluppato tra il 2003 e il 2005 da un team web che si occupava della creazione e della manutenzione dei siti web dei giornali. Dopo aver creato un certo numero di siti, il team ha iniziato a elaborare e riutilizzare un sacco di codice e modelli di design comuni. Questo codice comune si è evoluto in un generico framework di sviluppo web, che è stato "open-sourced" come progetto "Django" nel luglio 2005. 

+ +

Django ha continuato a crescere e migliorare, dalla sua prima release milestone (1.0) nel settembre 2008 fino alla recente versione 2.0 (2017). Ogni release ha aggiunto nuove funzionalità e correzioni di bug, che vanno dal supporto per nuovi tipi di database, motori di template e caching, fino all'aggiunta di funzioni di visualizzazione e classi "generiche" (che riducono la quantità di codice che gli sviluppatori devono scrivere per una serie di attività di programmazione). 

+ +
+

Nota: Date un'occhiata alle note di rilascio sul sito web di Django per vedere cosa è cambiato nelle ultime versioni, e quanto lavoro si sta facendo per rendere Django migliore.

+
+ +

Django è ora un progetto open source fiorente e collaborativo, con molte migliaia di utenti e collaboratori. Pur avendo ancora alcune caratteristiche che riflettono la sua origine, Django si è evoluto in un framework versatile in grado di sviluppare qualsiasi tipo di sito web. 

+ +

Quanto è popolare Django?

+ +

Non c'è una misura disponibile e definitiva della popolarità dei framework lato server (anche se siti come Hot Frameworks tentano di valutare la popolarità usando meccanismi come il conteggio del numero di progetti GitHub e le domande di StackOverflow per ogni piattaforma). Una domanda migliore è se Django è "abbastanza popolare" per scongiurare i problemi delle piattaforme poco popolari. Continua ad evolversi? Puoi chiedere aiuto se ne hai bisogno? C'è la possibilità di ottenere un lavoro retribuito se si impara Django? 

+ +

In base al numero di siti di alto profilo che utilizzano Django, al numero di persone che contribuiscono al codice e al numero di persone che forniscono supporto sia gratuito che a pagamento, allora sì, Django è un framework popolare!

+ +

I siti di alto profilo che utilizzano Django includono: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest e Open Stack (fonte: home page di Django).

+ +

Django è dogmatico?

+ +

I framework web spesso si riferiscono a se stessi come "dogmatici" o "non dogmatici".

+ +

I framework dogmatici sono quelli che hanno dogmi sul "giusto modo" di gestire un particolare compito. Spesso supportano un rapido sviluppo in un particolare dominio (risolvere problemi di un particolare tipo) perché il modo giusto di fare qualsiasi cosa è di solito ben compreso e ben documentato. Tuttavia possono essere meno flessibili nel risolvere i problemi al di fuori del loro dominio principale e tendono ad offrire meno scelte per quali componenti e approcci si possono utilizzare.

+ +

I framework non dogmatici, al contrario, hanno molte meno restrizioni sul modo migliore per collegare i componenti per raggiungere un obiettivo, o anche su quali componenti usare. Con essi è più facile per gli sviluppatori utilizzare gli strumenti più adatti per completare un particolare compito, al anche se devono sostenere un dispendio di energie per trovare da soli quei componenti.

+ +

Django è "mediamente dogmatico", e quindi fornisce il "meglio di entrambi i mondi". Fornisce un insieme di componenti per gestire la maggior parte dei compiti di sviluppo web e uno (o due) modi preferiti per utilizzarli. Tuttavia, l'architettura disaccoppiata di Django significa che di solito è possibile scegliere tra una serie di opzioni diverse, o, se lo si desidera, aggiungere il supporto per quelle completamente nuove.

+ +

Che aspetto ha il codice di Django?

+ +

In un sito web tradizionale basato su dati, un'applicazione web attende le richieste HTTP dal browser web (o da un altro client). Quando una richiesta viene ricevuta, l'applicazione elabora ciò che è necessario in base all'URL ed eventualmente alle informazioni contenute nei dati POST o nei dati GET. A seconda di ciò che è richiesto, può quindi leggere o scrivere informazioni da un database o eseguire altri compiti necessari per soddisfare la richiesta. L'applicazione restituisce quindi una risposta al browser web, spesso creando dinamicamente una pagina HTML che il browser può visualizzare inserendo i dati recuperati nei segnaposto in un modello HTML.

+ +

Le applicazioni web Django tipicamente raggruppano il codice che gestisce ciascuno di questi passaggi in file separati:

+ + + +
+

Nota: Django si riferisce a questa organizzazione come all'architettura "Model View Template (MVT)". Ha molte somiglianze con la più familiare architettura del Model View Controller.

+
+ + + +

Le sezioni seguenti vi daranno un'idea di come sono fatte queste parti principali di un'applicazione Django (approfondiremo i dettagli più avanti nel corso, una volta creato un ambiente di sviluppo).

+ +

Inviare la richiesta alla vista giusta (urls.py)

+ +

Un URL mapper è tipicamente memorizzato in un file chiamato urls.py. Nell'esempio seguente, il mapper (urlpatterns) definisce una lista di mappature tra le routes (specifici URL patterns ) e le corrispondenti funzioni di visualizzazione (view). Se viene ricevuta una richiesta HTTP che ha un URL che corrisponde a uno specifico pattern, allora la funzione di view associata sarà chiamata e passerà la richiesta.

+ +
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'oggetto urlpatterns è una lista di funzioni path() e/o re_path() (le liste Python sono definite usando parentesi quadre, dove gli elementi sono separati da virgole e possono avere una virgola di tracciamento opzionale. Per esempio: [item1, item2, item3,]).

+ +

Il primo argomento per entrambi i metodi è il percorso (pattern) che sarà abbinato. Il metodo path() usa le parentesi angolari per definire le parti di un URL che saranno catturate e passate alla funzione di visualizzazione come argomenti. La funzione re_path() usa un approccio flessibile per la corrispondenza dei pattern, noto come espressione regolare. Ne parleremo in un articolo successivo!

+ +

Il secondo argomento è la funzione che viene chiamata in abbinamento al pattern. La notazione views.book_detail indica che la funzione chiamata book_detail() può essere trovata in un modulo chiamato views (cioè all'interno di un file chiamato views.py)

+ +

Gestione della richiesta (views.py)

+ +

Le views sono il cuore dell'applicazione web, ricevono le richieste HTTP dai client web e restituiscono le risposte HTTP. Nel mezzo, esse mettono a disposizione le altre risorse del framework per accedere ai database, rendere i modelli, ecc. 

+ +

L'esempio seguente mostra una minima funzione di view index(), che avrebbe potuto essere chiamata dal nostro URL mapper nella sezione precedente.  Come tutte le funzioni di view riceve un oggetto HttpRequest come parametro (request) e restituisce un oggetto HttpResponse. In questo caso non facciamo nulla con la richiesta, e la nostra risposta restituisce semplicemente una stringa codificata. Vi mostreremo una richiesta che fa qualcosa di più interessante in una sezione successiva.

+ +
# filename: views.py (Django view functions)
+
+from django.http import HttpResponse
+
+def index(request):
+    # Get an HttpRequest - the request parameter
+    # perform operations using information from the request.
+    # Return HttpResponse
+    return HttpResponse('Hello from Django!')
+
+ +
+

Nota: Un po' di Python:

+ + +
+ + + +

Le views sono solitamente salvate in un file chiamato views.py.

+ +

Definizione dei modelli di dati (models.py)

+ +

Le applicazioni web Django gestiscono e interrogano i dati attraverso oggetti Python chiamati modelli (models). I modelli definiscono la struttura dei dati memorizzati, inclusi i tipi di campo ed eventualmente anche la loro dimensione massima, i valori di default, le opzioni della lista di selezione, il testo di aiuto per la documentazione, il testo dell'etichetta per i moduli, ecc. La definizione del modello è indipendente dal database sottostante - è possibile scegliere uno dei diversi modelli come parte delle impostazioni del progetto. Una volta scelto il database che si vuole utilizzare, non è necessario parlare direttamente con esso - basta scrivere la struttura del modello e altro codice, e Django si occupa per voi di tutto il lavoro sporco di comunicazione con il database.

+ +

Il frammento di codice qui sotto mostra un modello Django molto semplice per un oggetto Team. La classe Team è derivata dalla classe django model.Model. Essa definisce il nome del team e il livello del team come campi di caratteri e specifica un numero massimo di caratteri da memorizzare per ogni record. Il team_level può essere uno dei diversi valori, quindi lo definiamo come un campo di scelta e forniamo una mappatura tra le scelte da visualizzare e i dati da memorizzare, insieme ad un valore predefinito. 

+ +
# filename: models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11', 'Under 11s'),
+        ...  #list other team levels
+    )
+    team_level = models.CharField(max_length=3, choices=TEAM_LEVELS, default='U11')
+
+ +
+

Nota: Un po' di Python:

+ + +
+ +

Interrogare i dati (views.py)

+ +

Il modello Django fornisce una semplice API di interrogazione per la ricerca nel database. Questa può essere confrontata con una serie di campi alla volta utilizzando diversi criteri (ad es. esatto, non sensibile alle maiuscole, maggiore di, ecc.), e può supportare affermazioni complesse (ad esempio, è possibile specificare una ricerca su squadre U11 che hanno un nome di squadra che inizia con "Fr" o finisce con "al"). 

+ +

Il frammento di codice mostra una funzione di visualizzazione (gestore di risorse) per la visualizzazione di tutti i nostri team U09. La linea in grassetto mostra come possiamo usare l'API della query del modello per filtrare per tutti i record dove il campo team_level ha esattamente il testo 'U09' (notare come questo criterio è passato alla funzione filter() come argomento con il nome del campo e il tipo di match separati da un doppio underscore: team_level__exact).

+ +
## filename: views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def index(request):
+    list_teams = Team.objects.filter(team_level__exact="U09")
+    context = {'youngest_teams': list_teams}
+    return render(request, '/best/index.html', context)
+
+ +
+
+ +

Questa funzione utilizza la funzione render() per creare la HttpResponse che viene inviata al browser. Questa funzione è una scorciatoia; crea un file HTML combinando un template HTML specificato e alcuni dati da inserire nel template (forniti nella variabile denominata "context"). Nella sezione successiva mostriamo come il template ha i dati inseriti per creare l'HTML.

+ +

Visualizzazione dei dati (HTML templates)

+ +

I sistemi di template consentono di specificare la struttura di un documento di output, utilizzando dei segnaposto per i dati che verranno compilati al momento della generazione di una pagina. I template sono spesso usati per creare HTML, ma possono anche creare altri tipi di documenti. Django supporta sia il suo sistema di template nativo che un'altra popolare libreria Python chiamata Jinja2 out of the box (può anche essere realizzata per supportare altri sistemi se necessario). 

+ +

Il frammento di codice mostra come potrebbe apparire il template HTML chiamato dalla funzione render() nella sezione precedente. Questo template è stato scritto partendo dal presupposto che avrà accesso ad una variabile di lista chiamata youngest_teams al momento del rendering (contenuta nella variabile context all'interno della funzione render() di cui sopra). All'interno dello scheletro HTML abbiamo un'espressione che prima controlla se la variabile youngest_teams esiste, e poi la itera in un ciclo for. Su ogni iterazione il template mostra il valore team_name di ogni squadra in un elemento {{htmlelement("li")}}.

+ +
## filename: best/templates/best/index.html
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Home page</title>
+</head>
+<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>
+ +

Cos'altro si può fare?

+ +

Le sezioni precedenti mostrano le principali caratteristiche che utilizzerete in quasi tutte le applicazioni web: URL mapping, views, modelli e templates. Solo alcune delle altre cose fornite da Django includono: 

+ + + +

Sommario

+ +

Congratulazioni, hai completato il primo passo del tuo viaggio Django! Ora dovreste aver compreso i principali vantaggi di Django, un po' della sua storia e più o meno come potrebbero essere le parti principali di un'applicazione Django. Dovreste anche aver imparato alcune cose sul linguaggio di programmazione Python, compresa la sintassi per le liste, le funzioni e le classi.

+ +

Avete già visto un po' di vero codice Django qui sopra, ma a differenza del codice lato client, è necessario impostare un ambiente di sviluppo per eseguirlo. Questo è il nostro prossimo passo.
+  

+ +
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+ +

In this module

+ + diff --git a/files/it/learn/server-side/django/models/index.html b/files/it/learn/server-side/django/models/index.html new file mode 100644 index 0000000000..ec3554f577 --- /dev/null +++ b/files/it/learn/server-side/django/models/index.html @@ -0,0 +1,466 @@ +--- +title: 'Django Tutorial Part 3: Using models' +slug: Learn/Server-side/Django/Models +tags: + - Articolo + - Dati + - Model + - Server + - Tutorial + - data + - django + - imparare + - lezione + - modello + - nuovo +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")}}
+ +

Questo articolo mostra come definire dei modelli per il sito della LocalLibrary. Spiega cos'è un modello, come viene dichiarato e alcuni dei principali tipi di campo. Mostra anche brevemente alcuni dei principali modi in cui è possibile accedere ai dati del modello.

+ + + + + + + + + + + + +
Prerequisiti:Django Tutorial Part 2: Creating a skeleton website.
Obbiettivi:Essere in grado di progettare e creare i propri modelli, scegliendo i campi in modo appropriato.
+ +

Panoramica

+ +

Le applicazioni web Django accedono e gestiscono i dati tramite oggetti Python denominati modelli. I modelli definiscono la struttura dei dati memorizzati, inclusi i tipi di campo e possibilmente anche la loro dimensione massima,valori predefiniti, opzioni dell'elenco di selezione, testo di aiuto per la documentazione, testo della label per i moduli, ecc. La definizione del modello è indipendente dal database sottostante: è possibile sceglierne uno tra i diversi come parte delle impostazioni del progetto. Una volta scelto il database che si desidera utilizzare, non è necessario interrogarlo direttamente, basta scrivere la struttura del modello e altro codice, e Django gestirà tutto il lavoro sporco di comunicazione con il database.

+ +

Questo tutorial mostra come definire e accedere ai modelli per l'esempio del LocalLibrary website.

+ +

Progettare i model per la LocalLibrary

+ +

Prima di saltare e iniziare a codificare i modelli, vale la pena dedicare alcuni minuti a pensare a quali dati dobbiamo memorizzare e alle relazioni tra i diversi oggetti.

+ +

Sappiamo che abbiamo bisogno di memorizzare informazioni sui libri (titolo, sommario, autore, lingua scritta, categoria, ISBN) e che potremmo avere più copie disponibili (con ID unico globale, stato di disponibilità, ecc.). Potremmo aver bisogno di memorizzare più informazioni sugli autori oltre al loro nome e potrebbero esserci più autori con nomi uguali o simili. Vogliamo essere in grado di ordinare le informazioni in base al titolo del libro, autore, lingua scritta e categoria.

+ +

Quando si progettano i modelli, è logico disporre di modelli separati per ogni "oggetto" (un gruppo di informazioni correlate). In questo caso gli oggetti ovvi sono i libri, le istanze di libri e gli autori

+ +

Potresti anche voler utilizzare i modelli per rappresentare delle opzioni per un elenco di selezione (ad esempio, come un elenco a discesa), piuttosto che codificare le scelte nel sito stesso - questo è consigliato quando tutte le opzioni non sono note in anticipo o potrebbero essere modificate. I candidati ovvi per i modelli in questo caso includono il genere di libro (ad esempio Fantascienza, Poesia francese, ecc.) e la lingua (Inglese, Francese, Giapponese).

+ +

Una volta che abbiamo deciso i nostri modelli e i nostri campi, dobbiamo pensare alle relazioni. Django ti permette di definire relazioni che sono uno a uno (OneToOneField), uno a molti (ForeignKey) e molti a molti (ManyToManyField).Con questo in mente, lo schema di associazione UML qui sotto mostra i modelli che definiremo in questo caso (come schede).

+ +

LocalLibrary Model UML

+ +

Come sopra, abbiamo creato modelli per book (i dettagli generici del libro), per book instance (lo stato di specifiche copie fisiche del libro disponibile nel sistema) e author. Abbiamo anche deciso di avere un modello per il genere (genre), in modo che i valori possano essere creati/selezionati attraverso l'interfaccia di amministrazione. Abbiamo deciso di non avere un modello per BookInstance:status - abbiamo codificato i valori (LOAN_STATUS) perché non ci aspettiamo che questi cambino. All'interno di ciascuna casella è possibile visualizzare il nome del model, i nomi dei campi e i tipi, nonché i metodi e i relativi tipi di ritorno.

+ +

Il diagramma mostra anche le relazioni tra i modelli, incluse le loro molteplicità. Le molteplicità sono i numeri sul diagramma che mostrano i numeri (massimo e minimo) di ciascun modello che può essere presente nella relazione. Ad esempio, la linea di collegamento tra le caselle mostra che Book e un Genre sono correlati. I numeri vicino al modello Genre mostrano che un Book deve avere uno o più Genres (quanti ne vuoi), mentre i numeri all'altro capo della riga accanto al model Book mostrano che un Genre può avere zero o molti Books associati.

+ +
+

Nota: La prossima sezione fornisce un manuale di base che spiega come vengono definiti e utilizzati i models. Mentre lo leggi, considera come costruiremo ciascuno dei modelli nel diagramma sopra.

+
+ +

Fondamenti del modello

+ +

Questa sezione fornisce una breve panoramica di come viene definito un model e alcuni dei campi e argomenti di campo più importanti.

+ +

Definizione del modello

+ +

I model vengono generalmente definiti nel file models.py di una applicazione. Sono implementati come sottoclassi di django.db.models.Model, e possono includere campi, metodi e metadati. Il frammento di codice seguente mostra un modello "tipico", denominato 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
+ +

Nelle sezioni seguenti esploreremo in dettaglio ciascuna funzionalità all'interno del modello:

+ +

Campi

+ +

Un modello può avere un numero arbitrario di campi, di qualsiasi tipo - ognuno rappresenta una colonna di dati che vogliamo memorizzare in una delle nostre tabelle del database. Ogni record di database (riga) consisterà in uno di ciascun valore di quei campi. Osserviamo l'esempio seguente:

+ +
my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
+ +

Il nostro esempio precedente ha un singolo campo chiamato my_field_name, di tipo models.CharField — che significa che questo campo conterrà stringhe di caratteri alfanumerici. I tipi di campo vengono assegnati utilizzando classi specifiche, che determinano il tipo di record utilizzato per memorizzare i dati nel database, insieme ai criteri di convalida da utilizzare quando i valori vengono ricevuti da un form HTML (vale a dire ciò che costituisce un valore valido). I tipi di campo possono anche prendere argomenti che specificano ulteriormente come il campo è memorizzato o può essere utilizzato. In questo caso stiamo dando al nostro campo due argomenti:

+ + + +

Il nome del campo viene utilizzato per fare riferimento ad esso in query e templates. I campi hanno anche un'etichetta, che è specificata come argomento (verbose_name) o dedotto variando in maiuscola la prima lettera del nome della variabile del campo e sostituendo qualsiasi underscore con uno spazio (ad esempio my_field_name avrebbe una etichetta di default My field name).

+ +

L'ordine in cui i campi sono dichiarati influenzerà il loro ordine predefinito se un modello viene reso in un modulo (ad esempio nel sito di amministrazione), tuttavia questo ordine può essere sovrascritto.

+ +
Argomenti comuni nei campi
+ +

I seguenti argomenti comuni possono essere utilizzati per dichiarare molti dei diversi tipi di campo:

+ + + +

Ci sono molte altre opzioni — consultare full list of field options here.

+ +
Tipi di campo più comuni
+ +

Il seguente elenco descrive alcuni dei tipi di campi più comunemente usati.

+ + + +

Esistono molti altri tipi di campi, compresi i campi per diversi tipi di numeri (interi grandi, interi piccoli, float), booleani, URL, slug, ID univoci e altre informazioni "temporali" (durata, tempo, ecc.) . È possibile visualizzare la full list here.

+ +

Metadata

+ +

Puoi dichiarare metadata per il tuo Modello utilizzando class Meta, come mostrato sotto.

+ +
class Meta:
+    ordering = ['-my_field_name']
+
+ +

Una delle funzionalità più utili di questi metadati consiste nel controllare l'ordinamento predefinito dei record restituiti quando si esegue una query sul tipo di modello. A tale scopo, specificare l'ordine di corrispondenza in un elenco di nomi di campi sull'attributo ordering come sopra. L'ordine dipende dal tipo di campo (i campi dei caratteri sono ordinati alfabeticamente, mentre i campi delle date sono ordinati in ordine cronologico). Come mostrato sopra, puoi anteporre il nome del campo al simbolo meno (-) per invertire l'ordine.

+ +

Per esempio, se scegliamo un sort dei libri come nell'esempio per default:

+ +
ordering = ['title', '-pubdate']
+ +

i libri saranno ordinati alfabeticamente per titolo, dalla A alla Z e quindi per data di pubblicazione all'interno di ciascun titolo, dal più recente al più vecchio. Un altro attributo comune è verbose_name, un nome dettagliato per la classe in forma singolare e plurale:

+ +
verbose_name = 'BetterName'
+ +

Altri attributi utili consentono di creare e applicare nuove "autorizzazioni di accesso" per il modello (le autorizzazioni predefinite vengono applicate automaticamente), consentire l'ordinamento in base a un altro campo o dichiarare che la classe è "astratta" (una classe base per cui non è possibile creare record, e sarà invece derivato da creare altri modelli). Molte altre opzioni di metadati controllano quale database deve essere utilizzato per il modello e come vengono archiviati i dati (questi sono davvero utili solo se è necessario associare un modello a un database esistente).

+ +

La lista completa di opzioni per i metadati: Model metadata options (Django docs).

+ +

Metodi

+ +

Un modello può avere metodi.

+ +

In ogni caso, in ogni modello è necessario definire il metodo standard della classe Python __str__() per restituire una stringa leggibile dall'uomo per ciascun oggetto. Questa stringa viene utilizzata per rappresentare singoli record nel sito di amministrazione (e in qualsiasi altro punto è necessario fare riferimento a un'istanza del modello). Spesso questo restituirà un titolo o un campo nome dal modello.

+ +
def __str__(self):
+    return self.field_name
+ +

Un altro metodo comune da includere nei modelli Django è get_absolute_url (), che restituisce un URL per la visualizzazione di record di modelli individuali sul sito Web (se si definisce questo metodo, Django aggiungerà automaticamente un pulsante "Visualizza sul sito" alle schermate di modifica dei record del modello in il sito di amministrazione). Di seguito viene mostrato un tipico pattern per get_absolute_url ().

+ +
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)])
+
+ +
+

Nota: Supponendo che utilizzerai URLs come /myapplication/mymodelname/2 per visualizzare record individuali per il tuo modello (dove "2" è l'id per un particolare record), dovrai creare un mapper URL per passare la risposta e l'id a una "model detail view" (vista di dettaglio del modello) (che farà il lavoro richiesto per mostrare il record). la funzione reverse() sopra effettua un "reverse" del tuo url mapper (nel caso sopra nominato 'model-detail-view') per creare un URL nel formato corretto.

+ +

Ovviamente per fare questo lavoro devi ancora scrivere la mappatura degli URL, la vista e il template!

+
+ +

Puoi anche definire altri metodi che ti piacciono e chiamarli dal tuo codice o template (a condizione che non prendano alcun parametro).

+ +

Gestone del modello

+ +

Una volta definite le classi model, è possibile utilizzarle per creare, aggiornare o eliminare record e per eseguire query per ottenere tutti i record o particolari sottoinsiemi di record. Ti mostreremo come farlo nel tutorial quando definiremo le nostre views, ma ecco un breve sommario.

+ +

Creare e modificare record

+ +

Per creare un record puoi definire una istanza del modello e poi richiamare save().

+ +
# Create a new record using the model's constructor.
+record = MyModelName(my_field_name="Instance #1")
+
+# Save the object into the database.
+record.save()
+
+ +
+

Note: Se non hai dichiarato alcun campo come primary_key, al nuovo record ne verrà assegnato uno automaticamente, con nome del campo id. È possibile interrogare questo campo dopo aver salvato il record precedente, esso dovrebbe avere il valore 1.

+
+ +

È possibile accedere ai campi in questo nuovo record e modificarne i valori utilizzando la sintassi dot (.) e per memorizzare nel database i valori modificati devi chiamare save().

+ +
# Access model field values using Python attributes.
+print(record.id) # should return 1 for the first record.
+print(record.my_field_name) # should print 'Instance #1'
+
+# Change record by modifying the fields, then calling save().
+record.my_field_name = "New Instance Name"
+record.save()
+ +

Ricercare record

+ +

È possibile cercare i record che soddisfano determinati criteri utilizzando l'attributo objects del model (fornito dalla classe base).

+ +
+

Nota: Spiegare come cercare i record usando il modello "astratto" nei nomi dei campi può generare un po 'di confusione. Nella discussione seguente faremo riferimento a un modello Book con campi title e genre, in cui genre è anche lui un modello con un singolo campo name.

+
+ +

Possiamo ottenere tutti i record per un modello come un QuerySet, utilizzando objects.all().  Il QuerySet è un oggetto iterabile, ovvero contiene un numero di oggetti che è possibile scorrere/iterare/ciclare.

+ +
all_books = Book.objects.all()
+
+ +

Il metodo filter() di Django ci consente di filtrare il QuerySet restituito per matchare un campo di testo o numerico specificato a un particolare criterio. Ad esempio, per filtrare i libri che contengono "wild" nel titolo e poi contarli, potremmo fare quanto segue.

+ +
wild_books = Book.objects.filter(title__contains='wild')
+number_wild_books = wild_books.count()
+
+ +

I campi da matchare e il tipo di corrispondenza sono definiti nel nome del parametro del filtro, utilizzando il formato: field_name__match_type (notare il doppio underscore tra title e contains sopra). In alto stiamo filtrando title con una corrispondenza case-sensitive. Esistono molti altri tipi di corrispondenze: icontains (case-insensitive), iexact (corrispondenza esatta case-insensitive), exact (corrispondenza esatta case-sensitive) e in, gt (grater than), startswith, ecc. Consultare la lista completa qui.

+ +

In alcuni casi sarà necessario filtrare su un campo che definisce una relazione uno-a-molti con un altro modello (per esempio una ForeignKey). In questo caso è possibile "indicizzare" i campi all'interno del modello correlato con un doppio underscore aggiuntivo. Quindi, ad esempio, per filtrare i libri con uno specifico pattern genre, dovrai indicizzare al name attraverso il campo genre, come mostrato sotto:

+ +
# Will match on: Fiction, Science fiction, non-fiction etc.
+books_containing_genre = Book.objects.filter(genre__name__icontains='fiction')
+
+ +
+

Nota: Puoi usare gli underscores (__) per navigare su tutti i livelli di relazione che ti servono (ForeignKey/ManyToManyField). Per esempio, un Book che aveva diversi tipi, definiti utilizzando un'ulteriore relazione "cover" potrebbe avere un nome di parametro: type__cover__name__exact='hard'.

+
+ +

C'è molto di più che puoi fare con le query, comprese le ricerche all'indietro dai modelli correlati, concatenare i filtri, restituire un insieme più piccolo di valori, ecc. Per ulteriori informazioni, vedere Making queries (Django Docs).

+ +

Definire i Models della LocalLibrary

+ +

In questa sezione inizieremo a definire i modelli per la libreria. Apri models.py (in /locallibrary/catalog/). Le righe di codice iniziali importano il modulo models, che contiene la classe di base models.Model da cui i nostri modelli erediteranno.

+ +
from django.db import models
+
+# Create your models here.
+ +

Modello Genre

+ +

Copia il codice del modello Genre mostrato sotto e incollalo alla fine del file models.py. Questo modello viene utilizzato per memorizzare informazioni sulla categoria di libri, ad esempio se si tratta di narrativa o saggistica, storia romantica o militare, ecc. Come menzionato sopra, abbiamo creato il Genre come model piuttosto che come testo libero o elenco di selezione in modo che i possibili valori possano essere gestiti tramite il database anziché essere hard-coded.

+ +
class Genre(models.Model):
+    """Model representing a book genre."""
+    name = models.CharField(max_length=200, help_text='Enter a book genre (e.g. Science Fiction)')
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return self.name
+ +

Il modello ha un singolo campo CharField (name), che descrive il genere (limitato a 200 caratteri e con un help_text. Alla fine del modello definiamo un metodo __str__(), che restituisce semplicemente il nome del genere definito da un particolare record. Nessun nome dettagliato (verbose) è stato definito, quindi il campo nel form verrà chiamato Name.

+ +

Modello Book

+ +

Copia il modello Book in basso e incollalo nuovamente nella parte inferiore del file. Il modello del libro rappresenta tutte le informazioni su un libro disponibile in senso generale, ma non una particolare "istanza" fisica o "copia" disponibile per il prestito. Il modello usa un campo CharField per rappresentare title e isbn del libro (notare come isbn specifica la sua etichetta come "ISBN" utilizzando il primo parametro senza nome, in caso contrario la label di default sarebbe "Isbn"). Il modello usa TextField per il summary, perchè potrebbe essere un campo abbastanza lungo.

+ +
from django.urls import reverse # Used to generate URLs by reversing the URL patterns
+
+class Book(models.Model):
+    """Model representing a book (but not a specific copy of a book)."""
+    title = models.CharField(max_length=200)
+
+    # Foreign Key used because book can only have one author, but authors can have multiple books
+    # Author as a string rather than object because it hasn't been declared yet in the file
+    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>')
+
+    # ManyToManyField used because genre can contain many books. Books can cover many genres.
+    # Genre class has already been defined so we can specify the object above.
+    genre = models.ManyToManyField(Genre, help_text='Select a genre for this book')
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return self.title
+
+    def get_absolute_url(self):
+        """Returns the url to access a detail record for this book."""
+        return reverse('book-detail', args=[str(self.id)])
+
+ +

Genre è un campo ManyToManyField, in modo che un libro possa avere più generi e un genere possa avere molti libri. L'autore è dichiarato come ForeignKey, quindi ogni libro avrà un solo autore, ma un autore può avere molti libri (in pratica un libro potrebbe avere più autori, ma non in questa implementazione semplificata!)

+ +

In entrambi i tipi di campo, la classe del modello correlata viene dichiarata come il primo parametro senza nome utilizzando la classe del modello o una stringa contenente il nome del modello correlato. È necessario utilizzare il nome del modello come stringa se la classe associata non è stata ancora definita in questo file prima che venga referenziata! Gli altri parametri di interesse nel campo author sono null=True, che consente al database di memorizzare un valore Null se nessun autore viene selezionato e on_delete=models.SET_NULL, che imposterà il valore dell'autore su Null se l'autore associato al record viene cancellato.

+ +

Inoltre il modello definisce __str__() , utilizzando il titolo del libro title per rappresentare un record di Book. L'ultimo metodo, get_absolute_url() ritorna un URL che può essere usato per accedere a un record di dettaglio per questo modello (per farlo funzionare dovremo definire una mappatura URL che abbia il nome book-detail, e una view e un template associati).

+ +

Modello BookInstance

+ +

Copia il modello BookInstance sotto gli altri modelli. BookInstance rappresenta una copia specifica di un libro che potrebbe essere presa in prestito da qualcuno e include informazioni sul fatto che la copia sia disponibile o sulla data in cui è prevista la restituzione, o dettagli sulla versione e un ID univoco per il libro nella biblioteca.

+ +

Alcuni metodi e campi suoneranno familiari. Il modello utilizza

+ + + +
import uuid # Required for unique book instances
+
+class BookInstance(models.Model):
+    """Model representing a specific copy of a book (i.e. that can be borrowed from the library)."""
+    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):
+        """String for representing the Model object."""
+        return f'{self.id} ({self.book.title})'
+ +

Dichiaramo una ulteriore serie di nuovi campi di altri tipi:

+ + + +

__str__() rappresenta l'oggetto BookInstance usando una combinazione del suo id univoco e del titolo del libro.

+ +
+

Nota: un po' di Python:

+ + +
+ +

Modello Autore

+ +

Copia il modello Author (che trovi qui sotto) dopo il codice esistente in 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}'
+
+
+ +

Tutti i campi/metodi dovrebbero ora essere familiari. Il modello definisce un autore avente un nome, un cognome, una data di nascita e la data di morte (entrambe opzionali). Esso specifica che per impostazione predefinita __str__() restituisca il nome nell'ordine cognome nome. Il metodo get_absolute_url() inverte il mapping degli URL di author-detail per ottenere l'URL per la visualizzazione di un singolo autore.

+ +

Rieseguire le migrazioni del database

+ +

Tutti i modelli sono stati creati. Rilanciamo la migrazione del database per aggiungerli effettivamente al database.

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+ +

Modello del linguaggio — Sfida

+ +

Immagina che un benefattore locale doni un certo numero di nuovi libri scritti in un'altra lingua (diciamo, Farsi). La sfida è capire come questi sarebbero meglio rappresentati nel nostro sito web della biblioteca e poi aggiungerli ai model.

+ +

Alcune considerazioni:

+ + + +

Dopo aver deciso, aggiungi il campo. Puoi vedere cosa abbiamo deciso su Github here.

+ +

Non dimenticare di rieffettuare le migrazioni dopo ogni cambiamento al tuo modello.

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+ + + + + +

Sommario

+ +

In questo articolo abbiamo appreso come sono definiti i modelli, quindi abbiamo utilizzato queste informazioni per progettare e implementare modelli appropriati per il sito Web LocalLibrary.

+ +

A questo punto ci allontaneremo brevemente dalla creazione del sito e controlleremo il sito di amministrazione di Django. Questo sito ci permetterà di aggiungere alcuni dati alla biblioteca, che possiamo quindi visualizzare usando le nostre view e template (ancora da creare).

+ +

Consulta anche

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/server-side/django/sessions/index.html b/files/it/learn/server-side/django/sessions/index.html new file mode 100644 index 0000000000..0706090bd5 --- /dev/null +++ b/files/it/learn/server-side/django/sessions/index.html @@ -0,0 +1,195 @@ +--- +title: 'Django Tutorial Part 7: Sessions framework' +slug: Learn/Server-side/Django/Sessions +tags: + - Articolo + - Principiante + - Python + - Server + - django + - sessioni +translation_of: Learn/Server-side/Django/Sessions +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}
+ +

Questo tutorial estende il nostro sito LocalLibrary, aggiungendo un contatore di visite session-based alla home page. Questo è un esempio relativamente semplice, ma mostra come si può usare il session framework per fornire comportamento persistente per utenti anonimi nei tuoi siti.

+ + + + + + + + + + + + +
Prerequisiti:Completa tutti gli argomenti dei tutorial precedenti, compreso Django Tutorial Part 6: Generic list and detail views
Obiettivo:Capire come vengono utilizzate le sessioni.
+ +

Panoramica

+ +

Il sito LocalLibrary che abbiamo creato nei precedenti tutorial permette agli utenti di navigare tra i libri e gli autori nel catalogo. Anche se il contenuto viene generato dinamicamente dal database, ogni utente essenzialmente avrà accesso alle stesse pagine e e gli stessi tipi di informazione quando utilizzano il sito.

+ +

In una biblioteca "reale" potresti desiderare di fornire agli utenti individuali una esperienza customizzata, basata sul loro precedente utilizzo del sito, preferenze, ecc. Per esempio, potresti nascondere messaggi di avviso di cui gli utenti hanno già preso conoscenza la prossima volta che essi visitano il sito, o archiviare e rispettare le loro preferenze (ad esempio, il numero di risultati di ricerca che vogliono mostrato su ogni pagina). 

+ +

Il session framework ti consente di implementare questo tipo di comportamento, permettendoti di memorizzare e recuperare dati arbitrari su una base di visitstore per sito (per-site-visitor). 

+ +

Cosa sono le sessioni?

+ +

Tutte le comunicazioni tra browser web e i server avvengono attraverso il prootocollo HTTP, che è stateless. Il fatto che il protocollo sia stateless significa che i messagggi tra il client e il server sono completamente indipendenti da ciascuno degli altri— non esiste la nozione di "sequenza" o comportamento basato sui precedenti messaggi. Di conseguenza, se vuoi avere un sito che tenga traccia delle relazioni che sono in attive con un client, hai bisogno di implementarlo tu stesso.

+ +

Le sessioni sono il meccanismo utilizzato da Django (e dalla maggior parte dell'Internet) per tenere traccia dello "stato" tra il sito e un particolare browser. Le sessioni ti consentono di memorizzare dati arbitrari per browser, e avere questi dati disponibili per il sito ogni volta che il browser si connette. Item individuali di dati associati con la sessione sono quindi referenziati con una "key", la quale è utilizzata sia per rchiviare che per recuperare i dati.

+ +

Django utilizza un cookie contenente uno speciale session id per identificare ciascun browser e la sua sessione associata col sito. I dati della sessione effettiva sono archiviati nel database del sito di default (questo è più sicuro del memorizzare i dati in un cookie, dove sono più vulnerabili a utenti malevoli). Si può configurare Django per memorizzare i dati della sessione in altre posizioni (nella cache, nei file, nei "secure" cookie), ma la posizione di default è una opzione buona e relativamente sicura.

+ +

Abilitare le sessioni

+ +

Le sessioni sono state abilitate automaticamente quando abbiamo creato lo scheletro del sito web (nel tutorial 2).

+ +

La configurazione è imnpostata nelle sezioni INSTALLED_APPS e MIDDLEWARE del file di progetto (locallibrary/locallibrary/settings.py), come mostrato qui sotto:

+ +
INSTALLED_APPS = [
+    ...
+    'django.contrib.sessions',
+    ....
+
+MIDDLEWARE = [
+    ...
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    ....
+ +

Utilizzo delle sessioni

+ +

Si può accedere all'attributo session nell view dal parametro request (una HttpRequest passata dentro come primo argomento alla view). Questo attributo sessione rappresenta la connessione specifica con l'utente attuale (o per essere più precisi, la connessione al browser attuale, come identificato dal session id nel cookie del browser per questo sito).

+ +

L'attributo session è un oggetto simile a un dizionario (dictionary-like) che puoi leggere e scrivere quante volte vuoi nella tua view, modificandolo come desiderato. Si possono effettuare tutte le normali operazioni dei dictionary, inclusa la cancellazione di tutti i dati, testare se una chiave è presente, ciclare sui dati, ecc. Il più delle volte userete solo l'API standard "dictionary" per ottenere valori e impostare valori.

+ +

I frammenti di codice sotto mostrano come si può ottenere, impostare, e cancellare alcuni dati con la key "my_car", associata alla sessione corrente (browser). 

+ +
+

Nota: Una delle cose belle di Django è che non c'è bisogno di pensare ai meccanismi che legano la sessione alla tua attuale richiesta nella tua view. Se dovessimo usare i frammenti di codice qui sotto nella nostra view, sapremmo che l'informazione su my_car è associata solo al browser che ha inviato la richiesta corrente.

+
+ +
# Get a session value by its key (e.g. 'my_car'), raising a KeyError if the key is not present
+my_car = request.session['my_car']
+
+# Get a session value, setting a default if it is not present ('mini')
+my_car = request.session.get('my_car', 'mini')
+
+# Set a session value
+request.session['my_car'] = 'mini'
+
+# Delete a session value
+del request.session['my_car']
+
+ +

L'API offre anche un certo numero di altri metodi che sono usati principalmente per gestire il cookie associato alla sessione. Per esampio, ci sono metodi per testare che i cookie sono supportati nel browser client, per impostare e controllare la data di scadenza del cookie, e per cancellare le sessioni scadute dal data store. Puoi trovare informazioni sulla API completa in How to use sessions (Django docs).

+ +

Salvare i dati di sessione

+ +

Di default, Django salva solamente il database di sessione e invia il session cookie al client quando la sessione è stata modificata (assegnata) ocancellata. Se si sta aggiornando qualche dato utilizzando la sua session key come mostrato nella precedente sezione, allora non devi preoccuparti di questo! Per esempio:

+ +
# This is detected as an update to the session, so session data is saved.
+request.session['my_car'] = 'mini'
+ +

Se si stanno aggiornando alcune informazioni all'interno dei dati di sessione, allora Django non riconoscerà che hai fatto una modifica alla sessione e salva i dati (per esempio, se dovessi modificare i dati "wheels" all'interno dei tuoi dati "my_car", come mostrato sotto). In questo caso avrai bisogno di contrassegnare esplicitamente la sessione come modificata.

+ +
# Session object not directly modified, only data within the session. Session changes not saved!
+request.session['my_car']['wheels'] = 'alloy'
+
+# Set session as modified to force data updates/cookie to be saved.
+request.session.modified = True
+
+ +
+

Nota: Si può modificare il comportamento in modo che il sito aggiorni il database/invii cookie su ciascuna request aggiungendo SESSION_SAVE_EVERY_REQUEST = True nelle tue impostazioni di progetto (locallibrary/locallibrary/settings.py).

+
+ +

Semplice esempio — ottenere il conteggio delle visite

+ +

Come esempio semplice del mondio reale, aggiorneremo la nostra biblioteca per dire all'utente attuale quante volte essi hanno visitato la home page della LocalLibrary. 

+ +

Apri /locallibrary/catalog/views.py, e effettua le modifiche mostrate in grassetto sotto. 

+ +
def index(request):
+    ...
+
+    num_authors = Author.objects.count()  # The 'all()' is implied by default.
+
+    # Number of visits to this view, as counted in the session variable.
+    num_visits = request.session.get('num_visits', 0)
+    request.session['num_visits'] = num_visits + 1
+
+    context = {
+        'num_books': num_books,
+        'num_instances': num_instances,
+        'num_instances_available': num_instances_available,
+        'num_authors': num_authors,
+        'num_visits': num_visits,
+    }
+
+    # Render the HTML template index.html with the data in the context variable.
+    return render(request, 'index.html', context=context)
+ +

Qui prima otteniamo il valore della session key 'num_visits', impostiamo il valore a 0 se esso non è stato precedentemente impostato. Ogni volta che viene ricevuta una richiesta, allora si incrementa il valore e lo si memorizza di nuovo nella sessione (per la prossima volta che l'utente visita la pagina). La variabile num_visits viene quindi passata al template nella nostra variabile context.

+ +
+

Nota: Potremmo anche verificare se i cookie sono anche supportati nel browser qui (vedi How to use sessions per esempi) o progettare la nostra UI in modo che non importa se i cookie sono supportati o meno.

+
+ +

Aggiungi la linea che trovi alla fine del blocco qui sotto al tuo template HTML principale (/locallibrary/catalog/templates/index.html) alla fine della sezione "Dynamic content" per mostrare la variabile context:

+ +
<h2>Dynamic content</h2>
+
+<p>The library has the following record counts:</p>
+<ul>
+  <li><strong>Books:</strong> \{{ num_books }}</li>
+  <li><strong>Copies:</strong> \{{ num_instances }}</li>
+  <li><strong>Copies available:</strong> \{{ num_instances_available }}</li>
+  <li><strong>Authors:</strong> \{{ num_authors }}</li>
+</ul>
+
+<p>You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.</p>
+
+ +

Salva le modifiche e riavvia il server di test. Ogni volta che tu farai un refresh della pagina, il numero dovrebbe aggiornarsi.

+ + + + + +

Ora sai come è facile utilizzare per migliorare la tua interazione con utenti anonimi. 

+ +

Nei nostri prossimi articoli spiegheremo il framework per l'autenticazione ed autorizzazione (permessi), e ti mostreremo come supportare gli account user.

+ +

Vedi anche

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/server-side/django/skeleton_website/index.html b/files/it/learn/server-side/django/skeleton_website/index.html new file mode 100644 index 0000000000..1f5d7117ff --- /dev/null +++ b/files/it/learn/server-side/django/skeleton_website/index.html @@ -0,0 +1,406 @@ +--- +title: 'Django Tutorial Parte 2: Creare lo scheletro di un sito web' +slug: Learn/Server-side/Django/skeleton_website +tags: + - Articolo + - Guida + - Intro + - Introduzione + - Principianti + - Tutorial + - backend + - django + - imparare +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")}}
+ +

Questo secondo articolo del nostro Tutorial Django mostra come creare uno "scheletro" di progetto di un sito web come base, che potrà poi essere popolato con le impostazioni specifiche del sito, con i path, con i modelli, le view, e i template.

+ + + + + + + + + + + + +
Prerequisiti:Creare un ambiente di sviluppo Django. Visita: Django Tutorial.
Obiettivi:Essere in grado di utilizzare i tool Django per iniziare il tuo progetto web.
+ +

Panoramica

+ +

Questo articolo mostra come creare uno "scheletro" di un sito web, che potrà poi essere popolato con impostazioni specifiche del sito, con i path, con i model, le view, e i template (discuteremo di questo in successivi articoli).

+ +

Il processo è semplice:

+ +
    +
  1. Utilizzare lo strumento django-admin per creare la cartella del progetto, i templates di file di base e lo script di gestione del progetto (manage.py).
    2. +
  2. Utilizzare manage.py per creare una o più applicazioni. +
    +

    Nota: un sito Web può essere costituito da una o più sezioni, ad es. sito principale, blog, wiki, area download, ecc. Django ti incoraggia a sviluppare questi componenti come applicazioni separate, che potrebbero poi essere riutilizzate in diversi progetti, se necessario. 

    +
    +
    3. +
  3. Registrare le nuove applicazioni per includerle nel progetto.
    4. +
  4. Collegare il mapper url/path per ciascuna applicazione.
    5. +
+ +

Per il sito web Local Library la cartella del sito web e la sua cartella di progetto saranno chiamate locallibrary, e avremo solo un'applicazione chiamata catalog. La struttura delle cartelle di livello superiore sarà quindi la seguente:

+ +
locallibrary/         # Cartella Sito Web
+    manage.py         # Script per eseguire i tool di Django per questo progetto (creato utilizzando django-admin)
+    locallibrary/     # Cartella sito web/progetto (creata utilizzando django-admin)
+    catalog/          # Cartella Application (creata utilizzando manage.py)
+
+ +

Le sezioni seguenti illustrano in dettaglio le fasi del processo e mostrano come testare le modifiche. Alla fine dell'articolo discuteremo alcune delle altre configurazioni a livello di sito che potresti fare anche in questa fase.

+ +

Creare il progetto

+ +

Per prima cosa apri un prompt dei comandi / terminale, assicurati di essere nel tuo virtual environment, accedi a dove vuoi archiviare le tue app Django (mettile in un posto facilmente reperibile, all'interno della tua cartella documenti) e crea una cartella per il tuo nuovo sito web (in questo caso: django_projects). Poi entra nella cartella col comando cd:

+ +
mkdir django_projects
+cd django_projects
+ +

Crea il nuovo progetto utilizzando il comando django-admin startproject come mostrato, poi naviga fino alla cartella.

+ +
django-admin startproject locallibrary
+cd locallibrary
+ +

lo strumento django-admin crea una struttura cartella/file come mostrata sotto:

+ +
locallibrary/
+    manage.py
+    locallibrary/
+        __init__.py
+        settings.py
+        urls.py
+        wsgi.py
+ +

la cartella corrente dovrebbe somigliare alla seguente:

+ +
../django_projects/locallibrary/
+ +

La sottocartella del progetto locallibrary è l'entry point per il sito Web:

+ + + +

Lo script manage.py viene utilizzato per creare applicazioni, lavorare con i database e avviare il server web di sviluppo. 

+ + + +

Quindi, esegui il seguente comando per creare l'applicazione catalog che risiederà all'interno del nostro progetto di localibrary (deve essere eseguito nella stessa cartella di manage.py del tuo progetto):

+ +
python3 manage.py startapp catalog
+ +
+

Note: il comando precedente è per Linux / macOS X. Su Windows il comando dovrebbe essere:

+ +

 py -3 manage.py startapp catalog

+ +

Se stai lavorando con Windows rimpiazza python3 con py -3 in tutto questo modulo.

+ +

Se stai usando la versione di Python 3.7.0 o superiore, devi usare solo:

+ +

py manage.py startapp catalog

+
+ +

Lo strumento crea una nuova cartella e la popola con i file per le diverse parti dell'applicazione (mostrate in grassetto sotto). La maggior parte dei file ha un nome utile in base al loro scopo (ad esempio, le viste dovrebbero essere memorizzate in views.py, models in models.py, i test tests.py, le configurazioni per l'amministrazione in admin.py, le applicazioni in apps.py) e contenere un minimo di codice per il lavoro con gli oggetti associati.

+ +

La directory del progetto aggiornata dovrebbe essere così ora:

+ +
locallibrary/
+    manage.py
+    locallibrary/
+    catalog/
+        admin.py
+        apps.py
+        models.py
+        tests.py
+        views.py
+        __init__.py
+        migrations/
+
+ +

Inoltre abbiamo:

+ + + +
+

Note: Hai notato cosa manca nella lista dei file sopra? Mentre c'è un posto per le tue viste e modelli, non c'è nessun posto per te per mettere i tuoi mapping url, templates e file statici. Ti mostreremo come crearli più avanti (non sono necessari in tutti i siti Web ma sono necessari in questo esempio).

+
+ +

Registrare l'applicazione catalog

+ +

Ora che l'applicazione è stata creata, dobbiamo registrarla nel progetto in modo che venga inclusa quando vengono eseguiti tutti gli strumenti (ad esempio per aggiungere modelli al database). Le applicazioni vengono registrate aggiungendole alla lista INSTALLED_APPS in project settings. 

+ +

Aprire il file di project settings django_projects/locallibrary/locallibrary/settings.py e cerca la definizione della lista INSTALLED_APPS. Quindi aggiungi una nuova riga alla fine dell'elenco, come mostrato in grassetto sotto.

+ +
INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'catalog.apps.CatalogConfig', 
+]
+ +

La nuova riga specifica l'oggetto di configurazione dell'applicazione (CatalogConfig) che è stato generato per te in /locallibrary/catalog/apps.py quando hai creato l'applicazione.

+ +
+

Nota: Noterai che ci sono già molti altri INSTALLED_APPS (e MIDDLEWARE, più in basso nel file delle impostazioni).. Questi abilitano il supporto per il sito  Django administration e, di conseguenza, molte delle funzionalità che utilizza (incluse sessioni, autenticazione, ecc.).

+
+ +

Specificare il database

+ +

Questo è anche il punto in cui normalmente si specifica il database da utilizzare per il progetto - è logico utilizzare lo stesso database per lo sviluppo e la produzione laddove possibile, al fine di evitare piccole differenze di comportamento.  Per le differenti opzioni si rimanda a Databases (Django docs). 

+ +

Useremo il database SQLite per questo esempio, perché non ci aspettiamo di richiedere molti accessi simultanei su un database dimostrativo, e anche perché non richiede lavoro aggiuntivo per impostarlo! Puoi vedere come è configurato questo database in settings.py (ulteriori informazioni sono incluse anche di seguito):

+ +
DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
+    }
+}
+
+ +

Poichè usiamo SQLite, non abbiamo bisogno di altri setup. Andiamo avanti!

+ +

Altre impostazioni per il progetto

+ +

Il file settings.py viene anche usato per configurare un certo numero di altre impostazioni, ma a questo punto probabilmente si desidera solo modificare TIME_ZONE — che dovrebbe essere impostato uguale ad una delle stringhe standard presenti nella lista List of tz database time zones (la colonna TZ contiene i valori da sostituire). Cambia la tua TIME_ZONE con una di queste stringhe, per esempio:

+ +
TIME_ZONE = 'Europe/Rome'
+ +

Queste altre due impostazioni invece non le cambierai ora, ma dovresti comunque conoscerle:

+ + + +

Collegare il mapper URL

+ +

Il sito Web viene creato con un file di mappatura URL (urls.py) nella cartella del progetto. Sebbene sia possibile utilizzare questo file per gestire tutti i mapping degli URL, è più frequente rinviare i mapping all'applicazione associata.

+ +

Aprite locallibrary/locallibrary/urls.py, notare il testo istruttivo che spiega alcuni modi per utilizzare il mappatore URL.

+ +
"""locallibrary URL Configuration
+
+
+L'elenco "urlpatterns" indirizza gli URL alle viste. Per maggiori informazioni vedi:
+    https://docs.djangoproject.com/en/2.1/topics/http/urls/
+Esempi:
+Views basate su funzioni
+    1. Aggiungere un import:  from my_app import views
+    2. Aggiungere un URL a urlpatterns:  path('', views.home, name='home')
+Views basate su classi
+    1. Aggiungere un import:  from other_app.views import Home
+    2. Aggiungere un URL a urlpatterns:  path('', Home.as_view(), name='home')
+Includere un altro URLconf
+    1. Importare la funzione include(): from django.urls import include, path
+    2. Aggiungere URL a urlpatterns: path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+]
+
+ +

Le mappature URL sono gestite tramite la variabile urlpatterns, che è una list Python di funzioni path(). Ogni funzione path() associa un pattern URL a una view specifica, che verrà visualizzata quando il pattern viene matchato, o con un altro elenco di codice di test pattern URL (in questo secondo caso, il pattern diventa "base URL" per i pattern definiti nel modulo target). La list urlpatterns definisce inizialmente una singola funzione che associa tutti gli URL con il pattern admin/ al modulo admin.site.urls, che contiene le definizioni di mappatura URL proprie dell'applicazione di Amministrazione.

+ +
+

Nota: il percorso (route) in path() è una stringa che definisce un pattern URL da matchare. Questa stringa potrebbe includere una variabile con nome (tra parentesi angolari), ad es. 'catalog/<id>/'. Questo pattern corrisponderà a un URL come /catalog/any_chars/ e passerà any_chars alla view come una stringa con nome di parametro id. Discuteremo ulteriormente i metodi path e i route patterns in successivi argomenti.

+
+ +

Aggiungi le linee qua sotto alla fine del file per aggiungere un nuovo elemento alla lista urlpatterns. Questo nuovo elemento della lista include un path() che inoltra richieste con il pattern catalog/ al modulo catalog.urls (il file con il relativo URL /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')),
+]
+
+
+ +

Adesso reindirizziamo il root URL del nostro sito (cioè 127.0.0.1:8000) all'URL 127.0.0.1:8000/catalog/; questa è l'unica app che useremo in questo progetto. Per fare ciò, useremo una speciale funzione (RedirectView), che prende come primo argomento il nuovo URL relativo verso cui fare il redirect (/catalog/) quando il pattern URL specificato nella funzione path() viene matchato (il root URL, in questo caso).

+ +

Aggiungere le seguenti linee di codice, sempre alla fine del file:

+ +
#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)),
+]
+
+ +

Lasciare il primo parametro della funzione path vuoto per implicare '/'. Se scrivi il primo parametro come '/' Django ti darà il seguente avviso quando avvii il server di sviluppo:

+ +
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 non utilizza file statici come CSS, JavaScript e immagini per impostazione predefinita, ma può essere utile per lo sviluppo del server Web durante la creazione del sito. Come aggiunta finale a questo mapper URL, è possibile abilitare la pubblicazione di file statici durante lo sviluppo aggiungendo le seguenti righe.

+ +

Aggiungi il seguente blocco di codice alla fine del file:

+ +
# 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)
+
+ +
+

Nota: Ci sono diversi modi per estendere la list urlpatterns (nel nostro esempio utiliziamo l'operatore append += per separare chiaramente il codice nuovo e da quello vecchio). Avremmo potuto semplicemente includere tutto nella definizione originale della list:

+ +
urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('catalog/', include('catalog.urls')),
+    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
+] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+
+ +

Inoltre, abbiamo aggiunto la linea di import (from django.urls import include) insieme al codice che la utilizza, ma comunemente si preferisce mettere tutti gli import all'inizio del file Python.

+
+ +

Come ultimo passaggio, crea un file all'interno della cartella del tuo catalogo chiamato urls.py e aggiungi il testo seguente per definire gli urlpatterns importati (vuoti). Qui è dove aggiungeremo i nostri modelli, mentre costruiamo l'applicazione.

+ +
from django.urls import path
+from . import views
+
+urlpatterns = [
+
+]
+
+ +

Test del framework del sito Web

+ +

A questo punto abbiamo uno scheletro completo. Il sito Web in realtà non fa ancora nulla, ma vale la pena eseguirlo per assicurarsi che nessuno dei nostri cambiamenti abbia infranto nulla.

+ +

Prima di farlo, dovremmo prima eseguire una migrazione del database. Questo aggiorna il nostro database per includere tutti i modelli nelle nostre applicazioni installate (e rimuove alcuni avvisi di build).

+ +

Effettuare migrazioni di database

+ +

Django utilizza un Object-Relational-Mapper (ORM) per mappare le definizioni di modello nel codice Django alla struttura dati utilizzata dal database sottostante. Quando cambiamo le definizioni dei nostri modelli, Django tiene traccia delle modifiche e può creare script di migrazione del database (in /locallibrary/catalog/migrations/) per migrare automaticamente la struttura dati sottostante nel database in modo che corrisponda al modello.

+ +

Quando abbiamo creato il sito Django ha aggiunto automaticamente un numero di modelli per l'uso da parte della sezione admin del sito (che vedremo in seguito). Eseguire i seguenti comandi per definire le tabelle per tali modelli nel database (assicurarsi di essere nella directory che contiene manage.py):

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+
+ +
+

Importante: Avrai bisogno di eseguire i suddetti comandi ogni volta che i tuoi modelli cambiano in modo tale da influenzare la struttura dei dati che devono essere memorizzati (inclusi sia l'aggiunta che la rimozione di interi modelli e singoli campi).

+
+ +

Il comando makemigrations crea (ma non applica) le migrazioni per tutte le applicazioni installate nel progetto (puoi anche specificare il nome dell'applicazione per eseguire semplicemente una migrazione per un singolo progetto). Questo ti dà la possibilità di controllare il codice per queste migrazioni prima che vengano applicate - quando sei un esperto di Django puoi scegliere di modificarle direttamente!

+ +

Il comando migrate applica effettivamente le migrazioni al tuo database (Django tiene traccia di quelli che sono stati aggiunti al database corrente).

+ +
+

Nota: Consulta Migrations (Django docs) per info aggiuntive sui comandi meno usati nelle migrazioni.

+
+ +

Testare il sito web

+ +

Durante lo sviluppo è possibile testare il sito Web utilizzando il server web di sviluppo e quindi visualizzandolo sul browser web locale.

+ +
+

Nota: Il web server di sviluppo non è abbastanza robusto o performante per l'uso in produzione, ma è un modo molto semplice per far funzionare il tuo sito Django durante lo sviluppo per testarlo in modo rapido. Per impostazione di default il sito si troverà sul tuo computer all'indirizzo (http://127.0.0.1:8000/), ma puoi anche specificare altri computer sulla tua rete su cui hostare il sito. Per ulteriori informazioni, vedere django-admin and manage.py: runserver (Django docs).

+
+ +

Eseguire il server Web di sviluppo chiamando il comando runserver (nella stessa directory di 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.
+
+ +

Una volta attivato il server, puoi vedere il sito visitando il seguente indiriizzo sul browser web locale http://127.0.0.1:8000/. Dovresti vedere la seguente pagina di errore:

+ +

Django Debug page for Django 2.0

+ +

Non preoccuparti! Questa pagina di errore è prevista perché non abbiamo alcuna pagina/URL definita nel modulo catalogs.urls (a cui siamo reindirizzati quando otteniamo un URL alla radice del sito).

+ +
+

Nota: La pagina sopra mostra una grande funzionalità di Django - registrazione automatica del debug. Verrà visualizzata una schermata di errore con informazioni utili ogni volta che non è possibile trovare una pagina o qualsiasi errore viene generato dal codice. In questo caso possiamo vedere che l'URL che abbiamo fornito non corrisponde a nessuno dei nostri pattern URL (come elencato). Il logging verrà disattivato in produzione (quando mettiamo il sito sul Web), nel qual caso verrà pubblicata una pagina meno informativa ma più user-friendly.

+
+ +

Ora sappiamo che Django sta funzionando! 

+ +
+

Nota: Dovresti rieffettuare le migrazioni ogni volta che fai dei cambiamenti significativi, non richiedono molto tempo!

+
+ +

Sfida te stesso

+ +

La cartella catalog/ contiene file per le views, models, e altre parti dell'applicazione. Apri questi file e studiali. 

+ +

Come hai visto sopra, una mappatura URL per il sito di amministrazione è già stata aggiunta nella urls.py del progetto. Passa all'area di amministrazione nel tuo browser e vedi cosa succede (puoi dedurre l'URL corretto dalla mappatura sopra).

+ + + +

Sommario

+ +

Abbiamo creato uno scheletro completo del nostro progetto web, che potremo ora popolare con urls, models, views e templates.

+ +

Ora che lo scheletro per Local Library website è completo e funzionante, è ora di scrivere del codice per far fare al nostro sito cosa vogliamo fargli fare. 

+ +

Consulta anche

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}

+ +

In this module

+ + diff --git a/files/it/learn/server-side/django/tutorial_local_library_website/index.html b/files/it/learn/server-side/django/tutorial_local_library_website/index.html new file mode 100644 index 0000000000..eeabfd4a01 --- /dev/null +++ b/files/it/learn/server-side/django/tutorial_local_library_website/index.html @@ -0,0 +1,79 @@ +--- +title: 'Django Tutorial: The Local Library website' +slug: Learn/Server-side/Django/Tutorial_local_library_website +tags: + - Articolo + - Guida + - Principiante + - Scripting + - Tutorial + - django + - imparare + - lato-server +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")}}
+ +

Il primo articolo della serie di tutorial pratici spiega ciò che imparerai, e fornisce una panoramica del sito web di esempio "local library" con cui andremo a lavorare e che faremo evolvere nei prossimi articoli.

+ + + + + + + + + + + + +
Prerequisiti:Leggere la Introduzione a Django. Per i seguenti articoli sarà anche necessario avere predisposto un  ambiente di sviluppo Django. 
Obiettivo:Presentare l'applicazione di esempio utilizzata in questo tutorial, e mettere in grado i lettori di capire quali argomenti saranno trattati.
+ +

Panoramica

+ +

Benvenuti al tutorial Django MDN "Local Library", nel quale sviluppiamo un sito web che potrebbe essere utilizzato per gestire il catalogo per una biblioteca locale.

+ +

In questa serie di articoli tutorial vedrai come:

+ + + +

Hai già imparato qualcosa riguardo ad alcuni di questi argomenti e hai toccato brevemente gli altri. Alla fine della serie di tutorial dovresti sapere abbastanza per sviluppare semplici app Django da solo.

+ +

Il sito web LocalLibrary

+ +

LocalLibrary è il nome di un sito web che creeremo e faremo evolvere durante il corso di questa serie di tutorial. Come ti aspetteresti, lo scopo del sito è quello di fornire un catalogo online per un piccola biblioteca locale, in cui gli utenti possono ricercare i libri disponibili e gestire i loro account.

+ +

Questo esempio è stato scelto con cura poichè può essere scalato per mostrare pochi o molti dettagli di cui necessitiamo, e può essere utilizzato per mostrare quasi tutte le feature di Django. In modo più importante, ci permette di fornire un percorso guidato attraverso le più importanti funzionalità nel web framework Django:

+ + + +

Anche se questo è un esempio molto estensibile, viene chiamato LocalLibrary per una ragione — stiamo sperando di mostrare le informazioni minime che possano aiutare a metterti in funzione con Django rapidamente. Di conseguenza, archivieremo informazioni su libri, copie di libri, autori e altre informazioni chiave. Non memorizzeremo tuttavia informazioni circa altri elementi che una biblioteca potrebbe archiaviare, o forniremo l'infrastruttura necessaria per supportare più siti di biblioteche o altre feature di "grandi biblioteche". 

+ +

Sono bloccato, dove posso trovare il sorgente?

+ +

Man mano che so segue il tutorial forniremo i frammenti di codice appropriati da copiare e incollare in ciascun punto, e ci sarà altro codice che speriamo tu estenda da solo (con un po' di guida).

+ +

Se ci si blocca, si può trovare la versione completamente sviluppata del sito web su Github qui.

+ +

Sommario

+ +

Ora che sai un po' di più sul sito web LocalLIbrary e cosa stai per andare a imparare, è tempo di iniziare a creare un scheletro di progetto per contenere il nostro esempio.

+ +

{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}

diff --git a/files/it/learn/server-side/express_nodejs/index.html b/files/it/learn/server-side/express_nodejs/index.html new file mode 100644 index 0000000000..d6a55af9c8 --- /dev/null +++ b/files/it/learn/server-side/express_nodejs/index.html @@ -0,0 +1,75 @@ +--- +title: Express web framework (Node.js/JavaScript) +slug: Learn/Server-side/Express_Nodejs +tags: + - Codice + - Express + - Express.js + - Intro + - JavaScript + - Node + - Principiante + - Scripting + - Server + - node.js +translation_of: Learn/Server-side/Express_Nodejs +--- +
{{LearnSidebar}}
+ +

Express è un framework di tipo unopinionated, scritto in Javascript ed hostato dentro un amiente di runtime Node.js. Qusto modulo illustra i benefici chiave di questo framework, come configurare un ambiente di sviluppo, e come compiere alcuni compiti comuni di sviluppo e deploy.

+ +

Prerequisiti

+ +

Prima di iniziare dovrai esssere in grado di capire cosa sia la programmazione lato server e che cosa sia un framework, preferibilmente leggendo i topics Server-side website programming first steps. Una infarinatura generale di programmazione e JavaScript è altamente raccomandata, ma non necessaria per comprendere i concetti chiave.

+ +
+

Nota: questo sito Web offre molte risorse utili per l'apprendimento di JavaScript nel contesto dello sviluppo lato client: JavaScript, JavaScript Guide, JavaScript Basics, JavaScript. Il linguaggio e i concetti fondamentali di JavaScript sono gli stessi per lo sviluppo lato server su Node.js e questo materiale sarà rilevante. Node.js offre API aggiuntive per supportare funzionalità utili in ambienti senza browser (es. per creare un server HTTP ed accedere al file system, ma non supporta le API per lavorare sul browser o interagire con il DOM).

+ +

Questa guida fornirà alcune informazioni su come lavorare con Node.js e Express, e ci sono numerose altre eccellenti risorse su Internet e nei libri - alcune delle quali disponibili ai seguenti link How do I get started with Node.js (StackOverflow) e What are the best resources for learning Node.js? (Quora).

+
+ +

Guide

+ +
+
Express/Node: una introduzione
+
In questo primo articolo rispondiamo alle domande "Cos'è Node?" e "Cos'è Express?" e faremo una panoramica di ciò che rende speciale la struttura web Express. Descriveremo le caratteristiche principali e mostreremo alcuni dei principali elementi costitutivi di un'applicazione Express (sebbene a questo punto non avrete ancora un ambiente di sviluppo in cui testarlo).
+
Creare un ambiente di sviluppo Node (Express)
+
Ora che sai a cosa serve Express, ti mostreremo come configurare e testare un ambiente di sviluppo Node/Express su Windows, Linux (Ubuntu) e Mac OS X. Qualunque sia il sistema operativo che stai usando, questo articolo dovrebbe darti quello che ti serve per iniziare a sviluppare applicazioni Express.
+
Tutorial Express: Il sito Local Library
+
Il primo articolo della nostra serie di tutorial pratica spiega cosa imparerai e fornirà una panoramica del sito web di esempio della "biblioteca locale" che elaboreremo e svilupperemo in articoli successivi.
+
Express Tutorial Parte 2: Creare lo scheletro del sito
+
Questo articolo mostra come è possibile creare uno "scheletro" di un sito web, che può poi essere popolato con percorsi, modelli/viste e database specifici del sito.
+
Express Tutorial Parte 3: Usare un Database (con Mongoose)
+
Questo articolo introduce brevemente i database per Node / Express. Poi continua a mostrare come possiamo usare Mongoose per fornire l'accesso al database per il sito Web LocalLibrary. Spiega come vengono dichiarati lo schema e i modelli dell'oggetto, i tipi di campo principali e la convalida di base. Mostra anche brevemente alcuni dei principali modi in cui è possibile accedere ai dati del modello.
+
Express Tutorial Parte 4: Routeing e controllers
+
In questo tutorial imposteremo i percorsi (codice di gestione degli URL) con le funzioni di gestione "fittizia" per tutti gli endpoint delle risorse che saranno necessari nel sito Web di LocalLibrary. Al termine, avremo una struttura modulare per il nostro codice di gestione del routing, che possiamo estendere con le funzioni di gestione reale nei seguenti articoli. Avremo anche una buona conoscenza di come creare percorsi modulari usando Express.
+
Express Tutorial Parte 5: Mostrare i dati della libreria
+
Siamo ora pronti per aggiungere le pagine che visualizzano i libri del sito Web LocalLibrary e altri dati. Le pagine includeranno una home page che mostra quanti record abbiamo di ogni tipo di modello e lista e pagine di dettaglio per tutti i nostri modelli. Lungo la strada, acquisiremo esperienza pratica nell'ottenere record dal database e utilizzare modelli.
+
Express Tutorial Part 6: Utilizzare i form
+
Vedremo come lavorare con i Forms in Express, usando Pug, e in particolare come creare forms per eseguire operazioni CRUD.
+
Express Tutorial Parte 7: Deployare in produzione
+
Ora hai creato un sito Web di LocalLibrary fantastico, vorrai installarlo su un server Web pubblico in modo che sia accessibile al personale della biblioteca e ai membri su Internet. Questo articolo fornisce una panoramica di come si può trovare un host per la distribuzione del sito Web e di cosa è necessario fare per rendere il sito pronto per la produzione.
+
+ +

Consulta anche

+ +
+
Installare LocalLibrary su PWS/Cloud Foundry
+
Questo articolo fornisce una dimostrazione pratica di come installare LocalLibrary sul Pivotal Web Services PaaS cloud: si tratta di un'alternativa open source completa di Heroku, il servizio cloud PaaS utilizzato nella parte 7 del tutorial, sopra elencato. PWS/Cloud Foundry Merita sicuramente un'occhiata se stai cercando una alternativa ad Heroku o vuoi provare qualcos'altro.
+
+ +

Aggiungere altri tutorials

+ +
+

Questa è la fine degli articoli del tutorial (per ora). Se desideri estenderlo, altri argomenti interessanti da trattare sono:

+ + + +

And of course, it would be excellent to have an assessment task!

+
diff --git a/files/it/learn/server-side/index.html b/files/it/learn/server-side/index.html new file mode 100644 index 0000000000..35d72b3443 --- /dev/null +++ b/files/it/learn/server-side/index.html @@ -0,0 +1,52 @@ +--- +title: Server-side website programming +slug: Learn/Server-side +tags: + - Beginner + - CodingScripting + - Intro + - Landing + - Learn + - NeedsTranslation + - Server + - Server-side programming + - Topic + - TopicStub +translation_of: Learn/Server-side +--- +
{{LearnSidebar}}
+ +

The Dynamic Websites – Server-side programming topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a generic introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.

+ +

Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using HTML, CSS, and JavaScript), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.

+ +

In the modern world of web development, learning about server-side development is highly recommended.

+ +

Learning pathway

+ +

Getting started with server-side programming is usually easier than with client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.

+ +

A basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".

+ +

You will need to understand "how the web works". We recommend that you first read the following topics:

+ + + +

With that basic understanding you'll be ready to work your way through the modules in this section. 

+ +

Modules

+ +

This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks . 

+ +
+
Server-side website programming first steps
+
This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.
+
Django Web Framework (Python)
+
Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.
+
Express Web Framework (Node.js/JavaScript)
+
Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.
+
diff --git a/files/it/link_prefetching_faq/index.html b/files/it/link_prefetching_faq/index.html new file mode 100644 index 0000000000..41a0e183c1 --- /dev/null +++ b/files/it/link_prefetching_faq/index.html @@ -0,0 +1,126 @@ +--- +title: Link prefetching FAQ +slug: Link_prefetching_FAQ +tags: + - Gecko + - HTML + - HTTP + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Web/HTTP/Link_prefetching_FAQ +--- + + +

Il link prefetching è un meccanismo del browser, che utilizza il tempo di inattività per il download o effettuare ilprefetch dei documenti che l'utente potrebbe visitare in un futuro prossimo. Una pagina web fornisce dei consigli per il prefetching al browser, il quale dopo averla caricata, comincia in silenzio il prefetchinf dei documenti specificati e li memorizza nella sua cache. Quando l'utente visita uno dei documenti precaricati, quest'ultimo viene servito velocemente a partire dalla cache del browser.

+ +

Cosa sono i prefetching consigliati (prefetching hints)?

+ +

Il browser cerca o un tag HTML link o una intestazione HTTP Link: con una relazione tipo next o prefetch. Ecco un esempio usando il tag link:

+ +
<link rel="prefetch" href="/images/big.jpeg">
+
+ +

Lo stesso suggerimento di prefetch usando una intestazione Link::

+ +
Link: </images/big.jpeg>; rel=prefetch
+
+ +

L'intestazione Link: può anche essere specificata all'interno del documento HTML usando un tag meta:

+ +
<meta http-equiv="Link" content="&lt;/images/big.jpeg&gt;; rel=prefetch">
+
+ +

Il formato dell'intestazione Link: viene descritta nella RFC 2068, sezione 19.6.2.4.

+ +
Nota: internamente facciamo riferimento ad una vecchia specifica di HTTP/1.1 dato che la nuova RFC 2616 non descrive l'intestazione Link:. Nonostante le intestazioni Link: non siano parte dello standard revisionato, vengono pratiacmente ancora usate dai server per specificare fogli di stile CSS, per questi ne facciamo qui uso.
+ +

Il browser osserva tutti questi suggerimenti ed mette in attesa ogni richiesta per poi effettuare il prefetching nel periodo di inattività del browser. Possono esserci molteplici suggerumenti per ogni pagina, per cui avrebbe senso precaricare molteplici documenti. Ad esempio, il prossimo documento potrebbe contenere diverse immagini di grandi dimensioni.

+ +

Seguono alcuni esempi:

+ +
<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css">
+<link rel="next" href="2.html">
+
+ +

Viene eseguito il prefetch sui tag ancora (<a>)?

+ +

No, solo i tag <link> con un tipo relazione next o prefetch vengono precaricati. Comunque, in caso di interesse sufficiente, potremmo pensare di estendere il supporto prefetching ai tag <a> che includono un tipo relazione next o prefetch. Fare questo potrebbe aiutare i fornitori di contenuti ad evitare il problema di aggiornare i link precaricati.

+ +

Il prefetching è attinente agli standard?

+ +

Si, il prefetching di link, come descritto in questo documento, non viola nessuno standard web. Infatti, le specifiche HTML 4.01 permettono esplicitamente la definizione di nuovi tipi relazione link (vedere la Sezione 6.12: Link types). Comunque, l'esatto meccanismo usato da Mozilla non è ancora parte dello standard. Un draft è in preparazione.

+ +

Come viene determinato il periodo di inattività (idle) del browser?

+ +

Nell'implementazione corrente (Mozilla 1.2), il tempo di inattività si determina usando l'API nsIWebProgressListener. Si collega un listener all'oggetto nsIWebProgress ("@mozilla.org/docloaderservice;1"). Da questo, si ricevono notifiche di start e stop, e si approssima il tempo di inattività come il periodo tra l'ultimo documento dal caricamento terminato ed il primo documento dal caricamento iniziato. La notifica dello stop dell'ultimo documento avviene approssimativamente quando il gestore onLoad inizia la sua attività per il documento. Questo accade quando si dà il via a richieste di prefetch. Se un frame figlio contiene suggerimenti di prefetching, il prefetch non inizierà fino a che non siano caricati il documento padre e tutti i figli.

+ + + +

QUando l'utente clicca un link, o inizia un qualche tipo di caricamento di pagina, il prefetch di link si interrompe ed ogni suggerimento di prefetch viene ignorato. Se un documento precaricato è stato parzialmente scaricato, viene comunque memorizzato nella cache se il server invia una intestazione "Accept-Ranges: bytes". Questa intestazione viene tipicamente generata dal webserver nel fornire un documento statico. QUando l'utente visita realmente un documento precaricato, la rimanente porzione del documento viene caricata usando una richiesta HTTP byte-range.

+ + + +

Si e no. Se si sta scaricando qualcosa usando Mozilla, il link prefetching verrà posticipato fino a che i download in background non saranno completati. Ad esempio, se si carica un gruppo di segnalibri (il che significa aprire diverse tab), ogni richiesta di prefetch iniziata da una delle pagine di segnalibro non inizierà fino a quando tutte le tab non avranno terminato il caricamento. Se si usa un'altra applicazione di rete, il link prefetching potrebbe competere per la banda con l'altra applicazione. Questo è un problema che speriamo di risolvere in futuro usando i servizi del sistema operativo per controllare il tempo di inattività della connesione.

+ +

Ci sono restrizioni su cosa viene eseguito il prefetching?

+ +

Si, solo gli URL http:// possono essere precaricati (URL https:// non sono mai precaricato per ragioni di sicurezza). Altri protocolli (come FTP) non forniscono un supporto abbastanza ricco per il caching da lato client. In aggiunta a questa restrizione, gli URL conquery strings (stringhe di interrogazione) non sono precaricate. Questo perché alcuni URL inviano a documenti che non possono essere riutilizzati fuori dalla cache del browser, per cui il prefetching non darebbe grandi risultati. Abbiamo visto come siti esistenti utilizzino il tag <link rel="next"> con degli URL contenenti query string per fare riferimento al prossimo documento di una serie. Bugzilla ne è un esempio, e questo fa si che i sui report non siano memorizzabili in cache, per cui il prefetch degli URL raddoppierebbe il carico del server del pover Bugzilla! Si possono failmente pensare che altri siti siano stati progettati come Bugzilla, per cui noi esplicitamente non facciamo eseguire il prefetch degli URL con query string. (Avrebbe sensio permettere il prefecth di questi documenti quando è specificato il tipo relazione rel=prefetch, dato che non dovrebbe apparire in nessun contenuto esistente.) Non ci sono altre restrizioni sugli URL precaricati.

+ +

Mozilla effettua il prefetch di documenti da host differenti?

+ +

Si. Non ci sono restrizioni sull'origine dei documenti per il link prefetching. Litare il prefetching solo agli URL dello stesso server non offrirebbe nessun aumento della sicurezza del browser.

+ +

Le richieste da prefetching contengono una intestazione Refer: ?

+ +

Sì, le richieste da prefetch includono una intestazione HTTP Referer: indicante il documento dal quale il suggerimento di prefetch è stato estratto.

+ +

Questo potrebbe avere impatto sul tracciamento dei refer solitamente usato in molti siti. Per questo, il link prefetching potrebbe non essere appropriato per tutti i contenuti. Comunque, è possibile istruire Mozilla per validare un documento precaricato quando l'utente segue un href verso il documento precaricato, specificando l'intestazione HTTP Cache-control: must-revalidate. Questa intestazione abilita la memorizzazione in cache, ma ha necessita di una richiesta di validazione If-Modified-Since o If-None-Match prima di servire il documento dalla cache stessa.

+ +

Come amministratore di server, posso distinguere tra richieste di prefetch e richieste normali?

+ +

Si, mandiamo la seguente intestazione insieme con la richiesta di prefetch:

+ +
X-moz: prefetch
+ +

Ovviamente, questa intestazione di richiesta non è del tutto standard, e potrebbe cambiare in future release di Mozilla.

+ +

C'è una opzione per disabilitare il prefetching di link?

+ +

Si, c'è una preferenza nascosta da impostare per disabilatare il link prefetching. Aggiungere questa linea a prefs.js nella directory del proprio profilo di Mozilla.

+ +
user_pref("network.prefetch-next",false);
+ +

Stiamo considerando di aggiungere una Interfaccia Utente per questa preferenza (vedere {{ Bug(166648) }}); in ogni caso, la nostra teoria è che se il link prefetching deve essere disabilitato allora qualcosa è sagliato nella sua implementazione. Cerchiamo di migliorare l'implementazione se questa si rivelasse errata, piuttosto che attenderci che gli utenti vadano a cercare qualche oscura voce di preferenza nell'interfaccia uente. Diamine, l'interfaccia utente di Mozilla per le opzioni è già abbastanza piena ;-)

+ +
Aggiornamento: causa la moltitudine di richieste, Mozilla 1.3+ include una opzione di preferenza nell'interfaccia utente per disabilitare il prefetching. Vedere Preferences->Advanced-> +
user_pref("network.prefetch-next",false);
+
+ +

Riguardo alle persone che pagano per avere banda?

+ +

Basically, there are two ways of looking at this issue: # websites can already cause things to be silently downloaded using JS/DOM hacks. # prefetching is a browser feature; users should be able to disable it easily. It is important that websites adopt <code><link></code> tag based prefetching instead of trying to roll-in silent downloading using various JS/DOM hacks. The <code><link></code> tag gives the browser the ability to know what sites are up to, and we can use this information to better prioritize document prefetching. The user preference to disable <code><link></code> tag prefetching may simply encourage websites to stick with JS/DOM hacks, and that would not be good for users. This is one reason why prefetching is enabled by default.

+ + + +

I browser basati su Mozilla 1.2 (o successivi) così come browser basati su Mozilla 1.0.2 (o successivi) supportano il prefetching. Questo include Firefox e Netscape 7.01+. Le build di Camino da Marzo 2003 sono basate su Mozilla 1.0.1, pre cui non supportano il prefetching.

+ +

Effettua un test con il tuo browser per vedere se supporta il Link Prefetching.

+ +

Cos'altro riguardo...?

+ +

Per qualasiasi altra domanda o commento riguardo al link prefetching, mandatele pure a me :-)

+ +

Vedere inoltre...

+ +

Prefetching Hints

+ +
+

Original Document Information

+ + +
+ +

{{ languages( { "en": "en/Link_prefetching_FAQ" } ) }}

diff --git a/files/it/localization/index.html b/files/it/localization/index.html new file mode 100644 index 0000000000..678f3670ed --- /dev/null +++ b/files/it/localization/index.html @@ -0,0 +1,10 @@ +--- +title: Localization +slug: Localization +tags: + - Da_unire + - Tutte_le_categorie +translation_of: Glossary/Localization +--- +

La localizzazione è il processo di traduzione delle interfacce utente di un software da un linguaggio a un altro adattandolo anche a una cultura straniera. Queste risorse servono ad aiutare la localizzazione delle applicazioni e delle estensioni basate su Mozilla.

+

{{ languages( { "es": "es/Localizaci\u00f3n", "fr": "fr/Localisation", "ja": "ja/Localization", "pl": "pl/Lokalizacja", "pt": "pt/Localiza\u00e7\u00e3o" } ) }}

diff --git a/files/it/mdn/about/index.html b/files/it/mdn/about/index.html new file mode 100644 index 0000000000..b6b978345d --- /dev/null +++ b/files/it/mdn/about/index.html @@ -0,0 +1,116 @@ +--- +title: Informazioni su MDN +slug: MDN/About +tags: + - Collaborazione + - Copyright + - Documentazione + - Guide + - Licenzze + - Meta MDN +translation_of: MDN/About +--- +
{{MDNSidebar}}
+ +

Mozilla Developer Network o MDN (la Rete di Sviluppatori Mozilla) è una piattaforma di apprendimento in continua evoluzione per le tecnologie e il software che rendono il Web possibile, tra cui:

+ + + +

La nostra missione

+ +

La missione di MDN è semplice: fornire agli sviluppatori tutte le informazioni di cui hanno bisogno per creare facilmente progetti web open. Se si tratta di una tecnologia open disponibile sul Web, vogliamo documentarla.

+ +

Inoltre, forniamo documentazione sui prodotti Mozilla come sviluppare e contribuire ai progetti Mozilla.

+ +

Se non sei sicuro che un argomento in particolare debba essere trattato su MDN, leggi l'articolo: Questo appartiene a MDN?

+ +

Come contribuire

+ +

Non devi essere in grado di programmare - o esser uno scrittore - per poter contribuire a MDN! Esistono molti modi per aiutare, dalla revisione degli articoli per assicurarsi che siano sensati, allo scrivere testi, all'aggiungere esempi di codice.  Esistono così tanti modi di contribuire che abbiamo creato una pagina Come Iniziare per aiutarti a scegliere i task piu' adatti in base ai tuoi interessi o al tempo che gli puoi dedicare!

+ +

Puoi contribuire anche promuovendo MDN sul tuo blog o sito web.

+ +

La comunità di MDN

+ +

La nostra è una comunità globale! Abbiamo fantastici collaboratori in tutto il mondo che parlano varie lingue. Se vuoi maggiori informazioni, o se hai bisogno di qualsiasi tipo di aiuto riguardo MDN, puoi cercare nel nostro forum di discussione o il nostro canale IRC! Puoi seguirci su Twitter @MozDevNet per essere sempre aggiornato su quello che stiamo facendo. Se vedi qualcosa di sbagliato, ci vuoi dare il tuo feedback o inviare un ringraziamento ai nostri editori e collaboratori mandaci i tuoi tweet!

+ +

Utilizzare i Web Docs MDN

+ +

I contenuti di MDN sono disponibili gratuitamente sotto licenze opern source.

+ + + +

I contenuti MDN sono completamente disponibili sotto differenti licenze opern source. Questa sezione descrive il tipo di contenuti e le licenze in uno per ognuno di essi.

+ +

Documentazione e articoli

+ +

I documenti wiki di MDN sono stati realizzati con il contributo di vari autori, sia interni che esterni alla Mozilla Foundation. A meno che non sia indicato diversamente, i contenuti sono disponibili secondo i termini della licenza Creative Commons Attribution-ShareAlike (CC-BY-SA), v2.5 o qualsiasi versione successiva. Per favore attribuisci gli articoli a "Mozilla Contributors" e includi un collegamento  (online) o un URL (per le stampe) alla pagina wiki specifica da cui hai preso i contenuti. Per esempio, per indicare l'attribuzione di questo articolo, puoi scrivere

+ +
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
+ +

Nota che nell'esempio, "Mozilla Contributors" è un collegamento allo storico della pagina citata. Per ulteriori informazioni leggi Regole per una corretta attribuzione.

+ +
+

Nota: per maggiori informazioni su come riutilizzare e attribuire contenuti MDN sul sito WebPlatform.org, leggi contenuti MDN su WebPlatform.org.

+
+ +

Esempi di codice e frammenti

+ +

Gli esempi di codice aggiunti dal 20 agosto 2010 (incluso) sono di pubblico dominio. Non è necessaria alcuna nota di licenza, ma se te ne serve una puoi usare: "Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".

+ +

Gli esempi di codice aggiunti a questo wiki prima del 20 agosto 2010 sono disponibili sotto la licenza MIT; dovresti inserire le seguenti informazioni di attribuzione nel template MIT: "© <data della ultima revisione della pagina wiki> <nome della persona che l'ha inserita nel wiki>".

+ +

Contributi

+ +

Se desideri contribuire a questo wiki devi rendere la tua documentazione disponibile sotto licenza Attribution-ShareAlike (o occasionalmente una licenza altrenativa già specificata nella pagina che stai modificando), e il tuo codice di esempio deve essere disponibile sotto licenza Creative Commons CC-0 (una dedica al Pubblico Dominio). Aggiungere materiale a questo wiki significa che acconsenti a che i tuoi contributi siano resi disponibili secondo queste licenze.

+ +

Alcuni vecchi contenuti sono resi disponibili sotto licenze diverse da quelle qui indicate; questi sono indicati in fondo alla pagina attraverso un Blocco di licenza alternativa.

+ +
+

Nessuna nuova pagina può essere creata usando licenze alternative.

+
+ +

Il copyright per i materiali aggiunti rimane all'autore, a meno che l'autore non lo assegni a qualcun altro.

+ +

In caso di dubbi sull'argomento, contattare gli amministratori MDN.

+ +

Loghi, marchi, marchi di servizio e logotipo

+ +
+

I diritti dei marchi, loghi e marchi dei servizi della Mozilla Foundation, così come l'aspetto di questo sito, non sono sotto licenza Creative Commons e, se si tratta di lavori di autore (come loghi e design grafico) non sono inclusi nelle opere che sottostanno a questa licenza. Se intendi usare il testo di questi documenti e intendi esercitare qualcuno di questi diritti, o se hai altre domande riguardo il rispetto dei nostri termini di licenza per questa collezione, puoi contattare la Mozilla foundation all'indirizzo: licensing@mozilla.org.

+ +

Collegamenti a MDN

+ +

Questo articolo fornisce una guida e best practices quando si crea un link a MDN.

+ +

Scaricare contenuti

+ +

Puoi scaricare un mirror completo in formato tarball di MDN (2.1 GB aggiornato a Febbraio 2017).

+ +

Pagine singole

+ +

Puoi ottenere i contenuti di una singola pagina di MDN aggiungendo dei parametri di documento all'URL per specificare quale formato vuoi richiedere.

+ +

Strumenti di terze parti

+ +

Puoi visualizzare i contenuti di MDN anche tramite strumenti di terze parti come Dash (per Mac OS) e Zeal (per Linux e Windows).

+ +

Kapeli pubblica documenti MDN offline su HTML, CSS, JavaScript, SVG e XSLT.

+ +

Segnalare problemi con i Web Docs MDN

+ +

Visita Come segnalare un problema con MDN.

+ +

La storia di MDN

+ +

Il progetto Mozilla Developer Network (precedentemente Mozilla Developer Center (MDC) o Devmo) è nato all'inizio del 2005 quando la Mozilla Foundation ha ottenuto la licenza da AOL per utilizzare i contenuti originali di DevEdge. Il contenuto di DevEdge è stato estratto per cercare materiale ancora utile, poi migrato su questo wiki dai volontari affinché fosse più facile da aggiornare e mantenere.

+ +

Puoi trovare altre informazioni nella pagina del 10mo anniversario oltre ad un racconto da parte di alcune delle persone che ne hanno fatto parte.

+ +

Informazioni su Mozilla

+ +

Se vuoi saperne di più su chi siamo, su come entrare a far parte di Mozilla o semplicemente sapere dove trovarci, sei arrivato nel posto giusto. Per scoprire cosa ci spinge e ci rende differenti, visita la pagina sulla nostra missione.

diff --git a/files/it/mdn/community/index.html b/files/it/mdn/community/index.html new file mode 100644 index 0000000000..14a121baca --- /dev/null +++ b/files/it/mdn/community/index.html @@ -0,0 +1,49 @@ +--- +title: Join the MDN community +slug: MDN/Community +translation_of: MDN/Community +--- +
{{MDNSidebar}}
+ +

{{IncludeSubnav("/it-IT/docs/MDN")}}

+ +
+

MDN (l'abbreviazione sta per Mozilla Developer Network) è più di un wiki: è una comunità di sviluppatore che lavorano insieme per rendere MDN una risorsa eccezionale per gli sviluppatori che usano le tecnologie web di tipo open.

+
+ +

Ci fa piacere se contribuisci a MDN, ma ci piacerebbe ancora di più se tu partecipassi alla community di MDN. Ecco come puoi connetterti, in tre facili passi:

+ +
    +
  1. Crea un account MDN.
    2. +
  2. Unisciti a una conversazione.
    3. +
  3. Segui ciò che avviene.
    4. +
+ +

Come lavora la community

+ +

Quelli che seguono sono articoli aggiuntivi per descrivere la community di MDN.

+ +
+
+
+
Regole della Community
+
Ci sono alcuni ruoli nella community di MDN che hanno specifiche responsabilità.
+
Sprint di documentazione
+
Questa è una guida per organizzare uno sprint documentale. Contiene consigli e trucchi forniti da chi ne ha organizzati, per fare in modo che anche tu ne possa organizzarne uno.
+
Segui cosa succede
+
MDN ti viene proposto dalla community del Mozilla Developer Network. Questi sono alcuni modi che utilizziamo per condividere le informazioni circa ciò che facciamo.
+
+ +
+
+
+ +
+
+
Conversazioni nella community di MDN
+
Il "lavoro" di MDN avviene sul sito MDN, ma la "community" appare anche in discussioni (di tipo asincrono) e chat e meeting (di tipo sincrono).
+
Lavorare nella community
+
Una parte interessante nel contribuire alla documentazione di MDN a qualsiasi livello  è capire come lavorare come parte della community di MDN. Questo articolo offre consigli per aiutarti a gestire la maggior parte delle interazioni sia con altri autori che con team di sviluppo.
+
+
+
diff --git a/files/it/mdn/contribute/creating_and_editing_pages/index.html b/files/it/mdn/contribute/creating_and_editing_pages/index.html new file mode 100644 index 0000000000..2ffa7888a4 --- /dev/null +++ b/files/it/mdn/contribute/creating_and_editing_pages/index.html @@ -0,0 +1,110 @@ +--- +title: 'creare., edizione paginaCreazione e modifica delle pagine' +slug: MDN/Contribute/Creating_and_editing_pages +translation_of: MDN/Contribute/Howto/Create_and_edit_pages +--- +
{{MDNSidebar}}

Modificare e creare una pagina sono le due attività più comuni per la maggior parte dei  COLLABORATORI MDN.  Questo articolo spiega come eseguire queste due operazioni.

+ +

Modificare una pagina esistente

+ +

E' facile modificare-

+ + + +

Anteprima delle modifiche

+ +

Per osservare le tue modifiche-

+ + + +

Attenzione! L'anteprima di una pagina non salva i tuoi cambiamenti, quindi ricorda di non chiudere la finestra in cui stai modificando.

+ +

Commenti di correzione

+ +

Dopo aver visualizzato i cambiamenti, vorrai salvare la tua revisione. Prima di salvare, verfica i commenti di correzione nella finestra sotto la sezione del titolo e lascia un commento per informare gli altri collaboratori sul perchè hai effettuato qualche cambiamento. Per esempio, potresti aver aggiunto una nuova sezione, cambiato qualche parole per rendere la terminologia più appropriata, riscritto un paragrafo per renderlo più chiaro, oppure rimosso informazioni ridondanti.

+ +

Tags

+ +

Puoi aggiungere o rimuovere etichette che descrivono il contenuto della pagina e funzioni sotto la sezione di modifica della pagina. Visita Come taggare in modo appropriato una pagina per avere informazioni su quali etichette applicare.

+ +

Revisione necessaria?

+ +

Se un esperto o un collaboratore esperto dovrebbe controllare le tue modifiche, puoi richiedere una revisione tecnica (per codice, API o tecnologie), una revisione editoriale (per forma, grammatica e contenuto), oppure una revisione della rappresentazione (per il codice KumaScript) facendo una spunta nel box prima di salvare.

+ +

Allegare file

+ +

Se volessi allegare un file ad una pagina esistente per aggiungere un'illustrazione oppure ulteriori chiarimenti, puoi farlo a fondo pagina.

+ +

Salvare, scartare o continuare a modificare

+ +

Quando hai terminato di modificare e sei soddisfatto dell'anteprima, puoi salvare il tuo lavoro e i tuoi commenti cliccando "Salva cambiamenti" (in verde) a destra del titolo della pagina. Se cambi idea, puoi scartare le tue modifiche cliccando su "Scarta cambiamenti" (in rosso) a destra del titolo della pagina.

+ +

Premendo invio nel campo commenti di revisione equivale a cliccare "Salva e continua a modificare".

+ +

Creare una nuova pagina

+ +

Se non sai dove inserire un nuovo articolo, non preoccuparti! Mettilo ovunque, noi lo troveremo e lo sposteremo nel posto giusto o lo aggiungeremo ad un contenuto esistente se è più sensato. Inoltre non preoccuparti di renderlo perfetto. Abbiamo aiutanti gnomi che saranno felici di migliorare il tuo contenuto.

+ +

Ci sono alcuni modi di creare una nuova pagina:

+ + + +

Collegamento da una pagina esistente

+ +
    +
  1. Inserisci il nome della nuova pagina ovunque abbia senso nel testo di una pagina esistente.
    2. +
  2. Evidenzia il nome e clicca l'icona Link () nella barra degli strumenti di modifica. La finestra di dialogo "Update Link" si apre, con il testo evidenziato nel campo "Link To".
    3. +
  3. "/en-US/docs/"  viene inserito di default all'inizio del campo URL. Inserisci il nome della pagina dopo "/en-US/docs/". (Il nome della pagina non deve essere lo stesso del link.)
    4. +
  4. Clicca OK per creare e inserire il link.
    5. +
+ +

Se la pagina non esiste ancora il link viene visualizzato in rosso. Se la pagina esiste già, il link viene visualizzato in blu. Se vuoi creare una nuova pagina, ma il titolo della pagina che vuoi utilizzare esiste già controlla prima se non sia meglio aiutare a modificare e migliorare la pagina esistente. Altrimenti pensa a un titolo diverso per la tua nuova pagina e creane uno. Fai riferimento alla guida per nominare le pagine per linee guida.

+ +

Per aggiungere un contenuto alla tua nuova pagina clicca nel link in rosso che hai appena creato (dopo aver salvato e chiuso l'editor). La nuova pagina si apre nella modalità di modifica così che potrai cominciare a scrivere. Fai riferimento alla sezione Modificare una pagina esistente di questo articolo sull'utilizzo della modalità di modifica.

+ + + +

Per creare una nuova pagina senza link da altre pagine, inserisci un nome unico per la pagina nel campo URL del tuo browser. Per esempio, se inserisci:

+ +
https://developer.mozilla.org/en-US/docs/FooBar
+ +

MDN crea una nuova pagina con il titolo "FooBar" e apre l'editor così che tu possa aggiungere il contenuto nella nuova pagina. Vedi la sezione Modificare una pagina esistente di questo articolo per sapere come usare la modalità editor.

+ +

Sottopagina di una pagina esistente

+ +

Per creare una pagina che sia sotto una pagina esistente nella gerarchia della pagina:

+ +
    +
  1. In una pagina "padre", clicca sulla voce di menu Advanced (l'icona ingranaggio nella toolbar) e clicca New sub-page. Un editor sarà aperto per la creazione di un nuovo documento.
    2. +
  2. Digita il titolo del documento nel campo Title.
    3. +
  3. Cambia il campo Slug se necessario (per esempio, se il titolo è molto lungo e tu vuoi una URL più breve). Questo campo è automaticamente riempito dall'editor, sostituendo con i caratteri undescores gli spazi nel titolo. In questo caso, puoi cambiare solo l'ultima parte della URL del documento.
    4. +
  4. Nel campo TOC, seleziona il livello di heading che vuoi che venga automaticamente visualizzato nella tabella dei contenuti per la pagina, oppure "No table of contents" se la pagina non ne contiene uno.
    5. +
  5. Scrivi il contenuto della pagina nel pannello dell'editor e salva le modifiche. Vedi la sezione Modificare una pagina esistente di questo articolo per sapere come usare la modalità editor.
    6. +
+ +

Clonare una pagina esistente

+ +

Se esiste una pagina di cui vuoi usare il formato per una nuova, puoi "clonare" la pagina e quindi le modificare il contenuto.

+ +
    +
  1. Sulla pagina originale, clicca sulla voce di menu Advanced  (l'icona ingranaggio della toolbar) e clicca Clone this page. Un editor si editor si aprirà per creare un nuovo documento.
    2. +
  2. Cambia il Title della pagina come appropriato per il nuovo contenuto. Il campo Slug sarà modificato automaticamente quando cambierai il campo Title.
    3. +
  3. Se necessario, cambia la parte del path del campo Slug,  per inserire il nuovo documento una diversa parte della gerarchia del documento (nella maggior parte dei casi non è necessario, poiché la pagina clonata ha un contenuto simile all'originale, e perciò  dovrebbe essere posizionata nello stesso posto).
    4. +
  4. Nel campo TOC, seleziona il livello di heading che vuoi che sia automaticamente visualizzato nella tabella dei contenuti della pagina o "No table of contents" se la pagina non ne necessita uno.
    5. +
  5. Scrivi il contenuto di una pagina nel pannello di editor e salva le modifiche. Vedi la sezione Modificare una pagina esistemte di questo articolo per conoscere come usare la modalità editor.
    6. +
+ +

 

diff --git a/files/it/mdn/contribute/feedback/index.html b/files/it/mdn/contribute/feedback/index.html new file mode 100644 index 0000000000..a8e48e0e47 --- /dev/null +++ b/files/it/mdn/contribute/feedback/index.html @@ -0,0 +1,49 @@ +--- +title: Invia feedback su MDN +slug: MDN/Contribute/Feedback +tags: + - Documentazione + - Guida + - Italiano + - MDN +translation_of: MDN/Contribute/Feedback +--- +
{{MDNSidebar}}
+ +

Benvenuto su MDN! Se hai dei suggerimenti, o hai dei problemi nell'utilizzare MDN, questo è il luogo giusto. Il fatto stesso che tu sia interessato nell'offrire feedback ti rende ancora più importante nella community di Mozilla, e ti ringraziamo in anticipo per il tuo interesse.

+ +

Hai diverse opzione per offrire la tua "saggezza"; questo articolo ti aiuterà in tal proposito.

+ +

Aggiorna la documentazione

+ +

Innanzitutto, se hai notato un problema con la documentazione, sentiti pure libero di correggerla tu stesso. Semplicemente accedi utilizzando Github, premi un qualsiasi pulsante blu modifica per aprire l'editor ed entrare nel mondo dei contributori alla documentazione di MDN. Tutta la documentazione qui presente è una wiki, curata da un team di volontari e da dello staff pagato, perciò non essere timido: la tua grammatica non deve essere perfetta. Ci penseremo noi a pulirla nel caso tu dovessi fare un errore!

+ +

Per maggiori informazioni riguardanti la collaborazione alla documentazione di MDN, guarda:

+ + + +

Unisciti alla conversazione

+ +

Parla con noi! Ci sono diversi modi per metterti in contatto con altre persone che lavorano su MDN.

+ +

Chat

+ +

+

Discussioni (Asincroni)

+ + +

Le discussioni a lungo termine si verificano sul nostro forum di discussione MDN. Puoi inviare al forum via e-mail a mdn@mozilla-community.org. Se si aggiunge al forum, puoi scegliere di avere notifiche sulle discussioni inviate anche via e-mail.

+ +

Segnala un problema

+ +

Problemi di documentazione

+ +

Se noti un problema nella documentazione e non lo puoi aggiustare tu stesso per qualsiasi ragione, puoi segnalare il problema! Puoi utilizzare questo form per qualsiasi problema riguardante la documentazione, sia esso una semplice correzione o una richiesta per del contenuto completamente nuovo. Come menzionato in precedenza, ti invitiamo a contribuire ai cambiamenti tu stesso, ma questa opzione è comunque a tua completa disponibilità.

+ +

Problemi del sito

+ +

Se incontri dei problemi con il sito, o se hai delle idee per il futuro di MDN, puoi scrivere un ticket al team di sviluppo di MDN.

diff --git a/files/it/mdn/contribute/getting_started/index.html b/files/it/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..d76748a0dc --- /dev/null +++ b/files/it/mdn/contribute/getting_started/index.html @@ -0,0 +1,95 @@ +--- +title: Primi passi su MDN +slug: MDN/Contribute/Getting_started +translation_of: MDN/Contribute/Getting_started +--- +
{{MDNSidebar}}
+

Siamo una comunità aperta di sviluppatori che stanno creando risorse per un Web migliore, indipendentemente da marchi, browser o piattaforme. Tutti possono contribuire. Ogni nuovo collaboratore ci rende più forti. Insieme possiamo continuare a guidare il processo di innovazione sul Web per il bene comune. E cominciamo da qui, da te.

+

Tutte le varie parti di MDN (documentazione, demo, il sito stesso) sono create da una comunità aperta di sviluppatori. Unisciti a noi!

+

3 semplici passi per contribuire a MDN

+

MDN è un wiki, dove tutti possono aggiungere e modificare contenuti. Non è necessario essere programmatori o sapere tutto sulla tecnologia. Esistono molti compiti che necessitano di volontari, dai più semplici (revisione e correzione degli articoli) ai più complessi (scrivere la documentazione delle API).

+

Contribuire è facile e sicuro. Anche se fai errori è semplice sistemarli. Anche se non sai esattamente quale deve essere l'aspetto delle cose o la tua grammatica non è perfetta, non ti preoccupare! Abbiamo un gruppo di persone che ha il compito di assicurarsi che il contenuto di MDN sia il migliore possibile. Ci sarà sempre qualcuno pronto ad assicurarsi che il tuo lavoro sia ordinato e ben scritto. Condividi quello che sai.

+

Passo 1: creare un account su MDN

+

Per iniziare a collaborare con MDN, devi avere un account su MDN. Per i dettagli leggi come creare un account.

+

Passo 2: scegli un compito da portare a termine

+

Ora che sei registrato e hai effettuato l'accesso, leggi le descrizioni dei vari tipi di compiti nella {{anch("Tipi_di_compiti_possibili", "lista qui sotto")}} e decidi quale ti attira di più. Puoi scegliere qualsiasi compito preferisci per iniziare a collaborare.

+

Passo 3: esegui il compito

+

Una volta che hai deciso che tipo di compito vuoi eseguire, trova una pagina specifica, un esempio di codice ecc. su cui lavorare. E buon lavoro!

+

Non preoccuparti di farlo alla perfezione; altri collaboratori di MDN sono qui per aiutare a correggere gli errori che potresti commettere.  Se in corso d'opera hai qualche dubbio o bisogno di chiarimenti, vedi la pagina Comunità per informazioni sulle mailing list e i canali di chat dove puoi trovare le risposte ai tuoi quesiti.

+
+

Nota: se vuoi fare qualche esperimento prima di affrontare un vero compito su MDN, puoi modificare la pagina Sandbox. Per favore limita i tuoi esperimenti a questa pagina e non effettuare modifiche non necessarie alle altre pagine solo per vedere cosa succede; creeresti confusione che altri dovrebbero poi sistemare.

+
+

Quando hai portato a termine il compito che hai scelto, sentiti libero di scegliere un altro compito o scopri quali altre cose puoi fare su MDN.

+

Tipi di compiti possibili

+

Esistono vari modi per collaborare a MDN a seconda delle tue capacità e interessi. Anche se alcuni compiti possono essere veramente impegnativi, sono disponibili anche molte attività più semplici. Molte di queste richiedono solo cinque minuti (o meno). Insieme ai compiti e a una breve descrizione, viene indicato anche il tempo approssimativamente necessario al loro completamento.

+

Opzione 1: mi piace scrivere

+

Puoi aiutarci a revisionare o modificare la documentazione corrente e applicarle le etichette corrette.

+ +
+ Nota: se stai revisionando un articolo o ne stai scrivendo di nuovi ti chiediamo di leggere la Guida di stile. Questo ci aiuta ad assicurarci che lo stile degli articoli sia omogeneo.
+

Opzione 2: mi piace programmare

+

Abbiamo bisogno di più esempi di codice! Puoi anche aiutare nello sviluppo della piattaforma del sito, Kuma!

+ +

Opzione 3: mi piace sia scrivere che programmare

+

Abbiamo dei compiti che richiedono capacità sia tecniche che linguistiche, come ad esempio la scrittura di nuovi articoli, la revisione tecnica o l'adattamento dei documenti.

+ +

Opzione 4: voglio MDN tradotto nella mia lingua

+

Tutto il lavoro di localizzazione e traduzione di MDN viene svolto dalla nostra fantastica comunità di volontari.

+ +

Opzione 5: ho trovato informazioni sbagliate ma non so come correggerle

+

Puoi segnalare problemi aprendo un bug riguardo la documentazione. (5 minutes)

+

Usa questi valori per i campi richiesti:

+ + + + + + + + + + + + + + + + + + + + + + + +
Campo su BugzillaValore
productDeveloper Documentation
component[scegli un'area appropriata all'argomento o "General" se non sei sicuro su quale sia quella corretta]
URLLa pagina in cui hai trovato il problema
DescriptionIl maggior numero possibile di informazioni per permetterci di replicare il problema e trovare informazioni utili alla sua risoluzione. Puoi includere nomi di persone ("chiedete a tizio o caio") o anche collegamenti web.
+

Altre cose che puoi fare su MDN

+ +
+

 

diff --git a/files/it/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/it/mdn/contribute/howto/convert_code_samples_to_be_live/index.html new file mode 100644 index 0000000000..7c1fe93a6e --- /dev/null +++ b/files/it/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -0,0 +1,33 @@ +--- +title: Come convertire esempi di codice per renderli "vivi" +slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live +tags: + - Come fare + - Principiante +translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live +--- +
{{MDNSidebar}}

MDN ha un sistema di "esempi vivi",  in cui il codice d'esempio mostrato nella pagina è utilizzato per mostrare immediatamente il risultato che si ottiene con quel codice. Comunque, molti articoli esistenti hanno esempi di codice che non sfruttano questo sistema e devono essere convertiti.

+ +

Gli esempi vivi, che permettono di vedere qual è il risultato di un esempio, rendono la documentazione più dinamica e istruttiva. Questa guida spiega come modificare gli esempi e aggiungere la funzionalità "live".

+ +
+
Dove c'è bisogno di farlo?
+
Negli articoli con etichetta NeedsLiveSample
+
Cosa ho bisogno di sapere?
+
+
    +
  • Conoscere i linguaggi HTML, CSS e/o JavaScript, a seconda del codice d'esempio.
    • +
  • Capacità nell'usare le macro KumaScript negli articoli di MDN.
    • +
+
+
Quali sono i passi per completare il compito?
+
+
    +
  1. Scegli un articolo dalla lista di quelli che sono etichettati con NeedsLiveSample, in cui il codice d'esempio usa una funzionalità che ti è familiare.
    2. +
  2. Converti il codice per renderlo "vivo".
    3. +
  3. Cancella qualsiasi codice o immagine che era usata in precedenza per mostrare il risultato dell'esempio.
    4. +
+
+
+ +

Per maggiori informazioni su come creare e modificare "esempi vivi", fai riferimento a Utilizzare il sistema di esempi dal vivo.

diff --git a/files/it/mdn/contribute/howto/create_an_mdn_account/index.html b/files/it/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..c6759dc479 --- /dev/null +++ b/files/it/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,49 @@ +--- +title: Come creare un account su MDN +slug: MDN/Contribute/Howto/Create_an_MDN_account +tags: + - Documentazione + - Guide + - MDN + - Principianti + - Sviluppatori +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}
+ +

Per apportare qualsiasi modifica ai contenuti di MDN hai bisogno di un profilo MDN. Tranquillo, non hai bisogno di un profilo MDN se vuoi solo leggere e cercare in MDN! Questa semplice guida ti aiuta a creare un profilo MDN.

+ +
+
+

Perché MDN ha bisogno del mio indirizzo email?
+
+ Il tuo indirizzo email serve per recuperare l'account, oppure se gli amministratori di MDN hanno la necessità di contattarti in merito al tuo account o alla tua attività sul sito.
+
+ Inoltre hai la possibilità di registrarti per ricevere le notifiche (come quando una certa pagina è cambiata) e messaggi (ad esempio, se decidici di unirti al nostro gruppo di beta testing, potresti ricevere email in merito alle nuove funzionalità che hanno bisogno di essere controllate).
+
+ Il tuo indirizzo email non verrà mai visualizzato su MDN e sarà usato solo in accordo alla nostra informativa sulla privacy.

+ +
Se fai login tramite Github ed usi un indirizzo email "noreply" su Github, non riceverai i messaggi da MDN (comprese le notifiche quando ti registri alle pagine.)
+
+
+ +
    +
  1. In cima ad ogni pagina su MDN trovi un pulsante con etichetta Accedi. Muovi il mouse sul pulsante (o fai tap sullo stesso se usi un dispositivo mobile) per visualizzare una lista dei servizi di autenticazione che usiamo per accedere a MDN.
    2. +
  2. +

    Seleziona il servizio che vuoi usare per accedere. Attualmente è disponibile solo GitHub. Nota che se usi GitHub, un link al tuo profilo GitHub verrà incluso nella tua pagina pubblica del profilo MDN.

    +
    3. +
  3. +

    Segui le richieste di GitHub per collegare il tuo account a MDN.

    +
    4. +
  4. Quando il servizio di autenticazione ti riporta su MDN, ti verrà chiesto da MDN di inserire un nome utente ed un indirizzo email. Il tuo nome utente sarà visualizzato pubblicamente per identificare il lavoro che hai svolto. Non usare il tuo indirizzo email come nome utente.
    5. +
  5. Fai click su Crea nuovo profilo.
    6. +
  6. Se l'indirizzo email che hai indicato al punto 4 non è lo stesso che usi con il servizio di autenticazione, controlla la tua email e fai click sul link nell'email di conferma che ti abbiamo inviato.
    7. +
+ +

Fatto! Ora hai un account MDN e puoi immediatamente modificare le pagine!

+ +

Puoi fare click sul tuo nome in cima ad ogni pagina MDN per vedere il tuo profilo pubblico. Da lì puoi fare click su Modifica per fare modifiche od aggiunte al tuo profilo.

+ +
+

I nuovi nomi utenti non possono contenere spazi o il carattere "@". Ricordati che il tuo nome utente sarà visualizzato pubblicamente per identificare il lavoro che hai svolto!

+
diff --git a/files/it/mdn/contribute/howto/delete_my_profile/index.html b/files/it/mdn/contribute/howto/delete_my_profile/index.html new file mode 100644 index 0000000000..182bc6a241 --- /dev/null +++ b/files/it/mdn/contribute/howto/delete_my_profile/index.html @@ -0,0 +1,24 @@ +--- +title: Come rimuovere il mio profilo +slug: MDN/Contribute/Howto/Delete_my_profile +translation_of: MDN/Contribute/Howto/Delete_my_profile +--- +
{{MDNSidebar}}
+ +

Nel caso decidessi di non voler più far parte di MDN, puoi richiedere la cancellazione del tuo profilo. Ciò nonostante, non possiamo cancellare alcuna tua revisione (modifiche alle pagine), e la nostra licenza del contenuto prevede che le tue modifiche abbiano una fonte. Se hai fatto delle modifiche, dovrai decidere di volerle attribuire al tuo nome utente, o ri-attribuirle ad "Anonimo".

+ +
    +
  1. Dopo aver eseguito l'accesso su MDN, clicca sul tuo profilo nella barra di navigazione in alto visibile in qualsiasi pagina. Si aprirà la tua pagina di profilo, mostrando tutte le informazioni su ciò a cui hai contribuito. Annota se le revisioni sono elencate in Attività Documenti Recenti.
    2. +
  2. Clicca su Modifica. Si apirà il modulo Modifica il tuo profilo.
    3. +
  3. Scorri fino alla fine del modulo e fai clic sul link "Elimina il tuo account". Si aprirà il modulo "Elimina il tuo profilo".
    4. +
  4. Seleziona una delle seguenti opzioni: +
      +
    • Non ho fatto alcuna modifica, cancella il mio account. Scegli questa opzione se non c'era alcun elemento in Attività Documenti Recenti.
      • +
    • Mantieni il mio nome utente come fonte per le mie modifiche, cancella il mio indirizzo email e sospendi il mio account, in modo che non possa più eseguire l'accesso.  Se scegli questa opzione, il tuo profilo verrà associato con le tue modifiche, ma non sarai più in grado di accedere a MDN. La tua pagina del profilo continuerà ad esistere, ma le informazioni personali verranno rimosse.
      • +
    • Cambia la fonte delle mie modifiche in "Anonimo", e cancella il mio account. Se scegli questa opzione, tutte le modifiche da te eseguite verranno attribuite ad "Anonimo". Il tuo account e pagina del profilo verranno rimosse. Non ci sarà più alcuna associazione tra te e le tue modifiche.
      • +
    +
    5. +
  5. Fai clic su Segnala un Bug per Chiudere il tuo Account. Questa azione creerà un nuovo caso nel sistema di tracciamento dei problemi Bugzilla per la tua richiesta di cancellazione dell'account, con i campi Riepilogo e Descrizione precompilati in base al tuo nome utente e all'opzione che hai scelto. Questo passaggio è necessario perché un essere umano esaminerà la tua richiesta ed eseguirà le azioni necessarie.
    6. +
  6. Devi accedere a Bugzilla per inviare la richiesta. Se non hai un account Bugzilla, dovrai crearne uno.
    7. +
  7. Fare clic su Invia bug per inviare la richiesta. Quando la tua richiesta è stata gestita, riceverai una notifica da Bugzilla all'indirizzo email che hai utilizzato per accedere a Bugzilla.
    8. +
diff --git a/files/it/mdn/contribute/howto/do_a_technical_review/index.html b/files/it/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..31f0885a09 --- /dev/null +++ b/files/it/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,50 @@ +--- +title: Come effettuare una revisione tecnica +slug: MDN/Contribute/Howto/Do_a_technical_review +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +
{{MDNSidebar}}

La revisione tecnica consiste nel controllo dell'accuratezza tecnica e della completezza di un articolo e, se necessario, nella sua correzione. Se chi scrive un articolo desidera che qualcun altro verifichi il contenuto tecnico di un articolo, può segnalarlo attivando l'opzione "Revisione tecnica" durante la modifica di una pagina. A volte chi scrive contatta un ingegnere specifico affinché effettui la revisione tecnica, ma chiunque abbia esperienza tecnica può farlo.

+

Questo articolo spiega come effettuare una revisione tecnica, permettendo così di mantenere corretto il contenuto di MDN.

+ + + + + + + + + + + + + + + + + + + +
In cosa consiste?Revisionare e correggere gli articoli per assicurarsi che siano tecnicamente corretti e completi
Dove è necessaria?In articoli specifici che sono contrassegnati per essere sottoposti a una revisione tecnica.
Cosa hai bisogno di sapere per completare l'operazione? +
    +
  • Conoscenza da esperto sull'argomento dell'articolo che stai revisionando.
    • +
  • Capacità di modificare un articolo wiki su MDN.
    • +
+
Quali sono i passi necessari? +
    +
  1. Scegli un articolo da revisionare +
      +
    1. Visita l'elenco delle pagine che necessitano di revisioni tecniche. Questo contiene tutte le pagine per le quali è stata richiesta una revisione tecnica.
      2. +
    2. Scegli una pagina che tratta di un argomento con cui hai familiarità.
      3. +
    3. Fai clic sul link dell'articolo per caricare la pagina.
      4. +
    +
    2. +
  2. Al termine del caricamento della pagina, fai clic sul pulsante MODIFICA in alto a sinistra; verrà aperto l'editor di MDN. Non esitare a cambiare pagina se la prima che hai scelto non ti è congeniale.
    3. +
  3. Man mano che leggi l'articolo, sistema qualsiasi informazione errata e aggiungi le parti importanti mancanti.
    4. +
  4. Inserisci un Commento per la revisione nell'apposito campo in fondo alla pagina, ad esempio 'Revisione tecnica completata'. Se hai corretto qualche informazione, includi le modifiche effettuate nel commento, ad esempio 'Revisione tecnica: corrette le descrizioni dei parametri'.
    5. +
  5. Fai clic sul pulsante SALVA MODIFICHE.
    6. +
  6. Alla chiusura dell'editor, quando l'articolo a cui sono state apportate le correzioni verrà visualizzato sullo schermo, spunta la voce Tecnica a lato (nel riquadro Sono state richieste le seguenti revisioni) e fai clic su CARICA REVISIONE.
    7. +
  7. Congratulazioni! Hai concluso la revisione!
    8. +
+
+


+  

diff --git a/files/it/mdn/contribute/howto/do_an_editorial_review/index.html b/files/it/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..7bfc4bf759 --- /dev/null +++ b/files/it/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,46 @@ +--- +title: Come effettuare una revisione editoriale +slug: MDN/Contribute/Howto/Do_an_editorial_review +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +
{{MDNSidebar}}

Una revisione editoriale consiste nel sistemare errori di digitazione, grammatica, utilizzo, ortografia in un articolo. Non tutti i collaboratori sono traduttori esperti, ma data la loro conoscenza hanno scritto articoli estremamente utili, che necessitano di revisioni e correzioni; questo è lo scopo della revisione editoriale.

+

Questo articolo descrive come eseguire una revisione editoriale, così da accertarsi che il contenuto di MDN sia accurato.

+ + + + + + + + + + + + + + + + + + + +
In che cosa consiste?In una revisione e correzione di articoli per i quali è richiesta una revisione editoriale.
Quando è necessaria?In articoli specifici che sono contrassegnati per essere sottoposti a una revisione editoriale.
Cosa hai bisogno di sapere per completare l'operazione?Ti serve avere una buona conoscenza della grammatica e del lessico della lingua in questione.
Quali sono i passi necessari? +
    +
  1. Scegli un articolo da revisionare: +
      +
    1. Visita l'elenco delle pagine che necessitano di revisione editoriale. Questo contiene tutte le pagine per le quali è stata richiesta una revisione editoriale.
      2. +
    2. Scegli una pagina che possiede un titolo nella lingua in questione e il cui indirizzo non inizia con Template:.
      3. +
    3. Fai clic sul collegamento per caricare la pagina.
      4. +
    +
    2. +
  2. Al termine del caricamento della pagina, fai clic sul pulsante MODIFICA in alto a sinistra; verrà aperto l'editor di MDN. Non esitare a cambiare pagina se la prima che hai scelto non ti è congeniale.
    3. +
  3. Correggi tutti gli errori di digitazione, grammatica, utilizzo che trovi.
    4. +
  4. Inserisci un Commento per la revisione nell'apposito campo in fondo alla pagina, ad esempio 'Revisione editoriale completata: sistemati errori digitazione, grammatica e ortografia'.
    5. +
  5. Fai clic sul pulsante SALVA MODIFICHE.
    6. +
  6. Alla chiusura dell'editor, quando l'articolo a cui sono state apportate le correzioni verrà visualizzato sullo schermo, spunta la voce Editoriale a lato (nel riquadro Sono state richieste le seguenti revisioni) e fai clic su CARICA REVISIONE.
    7. +
  7. +

    Congratulazioni! Hai concluso la revisione!

    +
    8. +
+
+

 

diff --git a/files/it/mdn/contribute/howto/impostare_il_riassunto_di_una_pagina/index.html b/files/it/mdn/contribute/howto/impostare_il_riassunto_di_una_pagina/index.html new file mode 100644 index 0000000000..ba8df38979 --- /dev/null +++ b/files/it/mdn/contribute/howto/impostare_il_riassunto_di_una_pagina/index.html @@ -0,0 +1,57 @@ +--- +title: Come impostare il riassunto di una pagina +slug: MDN/Contribute/Howto/impostare_il_riassunto_di_una_pagina +tags: + - Community + - Documentazione + - Guida + - MDN + - Riassunto Pagina +translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +--- +
{{MDNSidebar}}

Il riassunto di una pagina di MDN è definito in modo da essere utilizzabile in vari ambiti, tra cui i risultati dei motori di ricerca, in altre pagine di MDN, come ad esempio nelle landing pages relative a diversi argomenti, e nei tooltips. Deve essere quindi un testo che conservi il proprio significato sia nel contesto della propria pagina, sia quando si trova in contesti differenti, privato dei contenuti della pagina di origine.

+

Un riassunto può essere identificato esplicitamente all'interno della pagina. In caso contrario, si utilizza in genere la prima frase, il che non sempre si rivela la scelta più adatta per raggiungere lo scopo prefissato.

+ + + + + + + + + + + + + + + + + + + +
Qual è il tuo compito?Evidenziare la parte di testo all' interno della pagina che, a tuo parere, dovrebbe essere utilizzata come riassunto della pagina nei vari contesti; questo compito richiede talvolta la scrittura di un testo appropriato, là dove ve ne sia necessità.
Dove c'è bisogno del tuo intervento?In quelle pagine che non hanno riassunto o ne presentano uno di scarsa qualità.
Di cosa hai bisogno per portare a termine la tua missione?Conoscenza dell' editor testi di MDN; buone capacità di scrittura in lingua inglese; sufficiente familiarità con l'argomento della pagina in questione, al fine di poterne scrivere un valido riassunto.
Le tappe del tuo lavoro: +
    +
  1. Scegli una pagina di cui fare il riassunto: +
      +
    1. Nella pagina MDN documentation status, sotto Sections, seleziona l'argomento che meglio conosci (ad esempio HTML):
      +
      2. +
    2. Nella pagina dello stato di documentazione dell'argomento scelto, clicca sulla casella Pages della tabella Summary. Si aprirà un indice di tutte le pagine di quell'argomento; nella colonna di sinistra troverai i links delle pagine, in quella di destra i tags e i riassunti:
      +
      3. +
    3. Scegli una pagina senza riassunto o con un riassunto mediocre:
      +
      4. +
    4. Clicca il link per aprire quella pagina.
      5. +
    +
    2. +
  2. Clicca su Edit per aprire la pagina nell'editor testi di MDN.
    3. +
  3. Cerca una o due frasi adatte per un riassunto, o, all'occorrenza, creane di nuove o modificane di esistenti allo scopo di creare un buon riassunto.
    4. +
  4. Seleziona il testo da utilizzare come riassunto
    5. +
  5. Nello Styles widget della barra degli strumenti di editor, seleziona SEO Summary. (Si crea così un elemento {{HTMLElement("span")}} nella page source con class="seoSummary" attorno al testo prescelto.) +

    +
    6. +
  6. Salva le modifiche con un commento di revisione del tipo "riassunto pagina".
    7. +
+
+

 

+

 

+

 

diff --git a/files/it/mdn/contribute/howto/index.html b/files/it/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..129865db8b --- /dev/null +++ b/files/it/mdn/contribute/howto/index.html @@ -0,0 +1,16 @@ +--- +title: Guide come fare per +slug: MDN/Contribute/Howto +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Howto +--- +
{{MDNSidebar}}
{{IncludeSubnav("/it/docs/MDN")}}
+ +

Questi articoli forniscono una guida passo passo per raggiugnere specifici obiettivi quando si contribuisce a MDN.

+ +

{{LandingPageListSubpages}}

diff --git a/files/it/mdn/contribute/howto/tag/index.html b/files/it/mdn/contribute/howto/tag/index.html new file mode 100644 index 0000000000..e518fc0c96 --- /dev/null +++ b/files/it/mdn/contribute/howto/tag/index.html @@ -0,0 +1,380 @@ +--- +title: Usare correttamente i tag +slug: MDN/Contribute/Howto/Tag +tags: + - Beginner + - Contribute + - Glossary + - Guide + - Howto + - Intro + - MDN Meta + - Tutorial +translation_of: MDN/Contribute/Howto/Tag +--- +
{{MDNSidebar}}
+ +

I tag associati agli articoli sono uno strumento fondamentale per permettere ai visitatori di accedere a contenuti rilevanti. Normalmente, ogni pagina dovrebbe essere associata a più tag, che contribuiscono a mantenere i contenuti organizzati. Questa pagina spiega come ottimizzare l'uso dei tag per facilitare i lettori nella ricerca e agevolare i gestori nell'organizzazione e mantenimento dei contenuti.

+ +

Per informazioni su come modificare i tag dall'interfaccia utente, consulta la sezione sui tag della guida all'editor di testo di MDN.

+ +

È importante utilizzare i tag secondo queste regole, altrimenti gli automatismi non saranno in grado di generare liste di contenuti, landing page e link incrociati tra i vari articoli.

+ +
+

Nota per i traduttori e i localizzatori: non tradurre nessuno dei tag elencati in questa pagina. Sono necessari per scopi specifici, come ad esempio operazioni di gestione del sito ed elaborazione automatica di dati. Tali processi non funzionano con tag tradotti.

+
+ +

Uso dei tag in MDN

+ +

In MDN i tag vengono utilizzati in diversi modi:

+ +
+
{{anch("Categoria documento")}}
+
Di che tipo di documento si tratta? È un materiale di consultazione? Un tutorial? Una landing page? Si tratta di una categoria di tag fondamentali, che i lettori possono utilizzare per filtrare le ricerche.
+
{{anch("Argomento")}}
+
Qual è l'argomento dell'articolo? Parla di API? Oppure di DOM? O di grafica? Questi tag, al pari dei precedenti, hanno un ruolo fondamentale nel filtrare i risultati di ricerca.
+
{{anch("Identificazione API")}}
+
Ogni pagina di consultazione di un'API deve essere associata a un tag che identifichi lo specifico componente trattato (ovvero l'interfaccia di cui fa parte e, dove applicabile, la proprietà o metodo).
+
{{anch("Stato tecnologia")}}
+
Qual è lo stato dell'arte della tecnologia trattata? Non è riconosciuta come standard? È obsoleta o deprecata? Oppure sperimentale?
+
{{anch("Livello di competenza")}}
+
Applicabile a tutorial e guide: quanto è avanzata la materia di cui tratta l'articolo?
+
{{anch("Metadati del documento")}}
+
Chi scrive e gestisce i contenuti usa questi tag per tenere traccia del tipo di interventi da effettuare sulle pagine.
+
+ +

Guida ai tipi di tag

+ +

Segue una breve guida ai tipi di tag utilizzati su MDN e i loro significati.

+ +

Categoria documento

+ +

I tag di categoria, associati a un articolo, facilitano la generazione automatica di landing page, indici e via dicendo. Inoltre, nel nuovo sistema di ricerca, questi termini possono essere usati anche dagli utenti per trovare materiali di consultazione e guide pertinenti.

+ +

Ecco i tag che identificano le categorie:

+ +
+
{{Tag("Intro")}}
+
"Introduzione". L'articolo tratta di contenuti introduttivi su un argomento. Come regola generale, ciascuna area tecnologica dovrebbe disporre di un unico tag "Intro".
+
{{Tag("Reference")}}
+
"Consultazione". L'articolo contiene materiali di consultazione su un'API, un elemento, un attributo, una proprietà o simili.
+
{{Tag("Landing")}}
+
Indica che la pagina in questione è una landing page, la pagina iniziale di un dato argomento.
+
{{Tag("Guide")}}
+
"Guida". L'articolo consiste in una pagina contenente una guida o una procedura guidata.
+
{{Tag("Example")}}
+
"Esempio". L'articolo contiene un codice di esempio, oppure campioni di codice (ovvero non semplici esempi di sintassi da una riga, bensì frammenti di codice che possono essere riutilizzati).
+
+ +

Argomento

+ +

I tag che identificano l'argomento di un articolo consentono di ottenere risultati di ricerca più pertinenti. Inoltre, facilitano la navigazione e l'individuazione di landing page.

+ +

Pur trattandosi di una categoria che può espandersi mano a mano che vengono identificati nuovi argomenti, cerchiamo di limitare i tag ai nomi di API o tecnologie. Alcuni esempi pratici:

+ + + +

In linea generale, i tag di argomento sono nomi di un'interfaccia associati a diverse pagine rilevanti (per esempio, Node è associato a diverse pagine perché possiede molteplici proprietà e metodi), o nomi che indicano un complesso di tecnologie. Ad esempio, una pagina che parla di WebGL potrebbe essere associata ai tag Graphics e WebGL, mentre una pagina che tratta dell'elemento {{HTMLElement("canvas")}} ai tag HTML, Element, Canvas e Graphics.

+ +

Contenuti Mozilla

+ +

I seguenti tag sono associati esclusivamente a contenuti specifici di Mozilla:

+ + + +

Identificazione API

+ +

All'interno del materiale di consultazione delle API, ciascun articolo dovrebbe essere associato a un tag che identifichi la specifica parte dell'API trattata:

+ +
+
{{tag("Interface")}}
+
"Interfaccia". Il tag da associare all'articolo principale dell'interfaccia. Esempio: {{DOMxRef("RTCPeerConnection")}}.
+
{{tag("Constructor")}}
+
"Costruttore". Ciascuna interfaccia può contenere fino a una pagina con tag "Constructor", ovvero il costruttore dell'interfaccia. Il titolo della pagina deve corrispondere al nome dell'interfaccia. Esempio: {{DOMxRef("RTCPeerConnection.RTCPeerConnection()", "RTCPeerConnection()")}}.
+
{{tag("Property")}}
+
"Proprietà". Questo tag va associato a ciascun articolo che descrive una proprietà specifica all'interno dell'interfaccia. Esempio: {{DOMxRef("RTCPeerConnection.connectionState")}}
+
{{tag("Method")}}
+
"Metodo". Questo tag va associato a ciascun articolo che descrive un metodo dell'interfaccia. Esempio: {{DOMxRef("RTCPeerConnection.createOffer()")}}
+
+ +

In aggiunta, le pagine di consultazione devono includere tra i tag i nomi di interfaccia, proprietà e metodo. Alcuni esempi:

+ +
+
L'interfaccia {{DOMxRef("RTCPeerConnection")}}
+
include il tag {{Tag("RTCPeerConnection")}} in aggiunta ad altri tag rilevanti come {{Tag("Interface")}}, {{Tag("WebRTC")}}, {{Tag("WebRTC API")}}, {{Tag("API")}}, {{Tag("Reference")}} ecc.
+
Il metodo {{DOMxRef("RTCPeerConnection.createOffer()")}}
+
include i tag {{Tag("RTCPeerConnection")}} e {{Tag("createOffer")}} (attenzione: non inserire parentesi all'interno dei nomi dei tag!) in aggiunta ad altri tag rilevanti come {{Tag("Method")}}, {{Tag("WebRTC")}}, {{Tag("WebRTC API")}}, {{Tag("API")}}, {{Tag("Reference")}}, ecc. Qui è anche possibile aggiungere anche altri tag rilevanti come {{Tag("Offer")}} e {{Tag("SDP")}}.
+
La proprietà {{DOMxRef("RTCPeerConnection.iceConnectionState")}}
+
include i tag {{Tag("RTCPeerConnection")}} e {{Tag("iceConnectionState")}} in aggiunta ad altri tag rilevanti come {{Tag("Property")}}, {{Tag("WebRTC")}}, {{Tag("WebRTC API")}}, {{Tag("API")}} e {{Tag("Reference")}}. È possibile aggiungere anche il tag {{Tag("ICE")}}.
+
+ +

Stato tecnologia

+ +

I seguenti tag identificano lo stato dell'arte delle specifiche tecnologiche. Aiutano il lettore a farsi un'idea di quanto praticabile sia una particolare tecnologia. Il tag non spiega in dettaglio il tipo e i progressi della tecnologia nel processo di specificazione (per questo scopo c'è la tabella delle specifiche), ma aiuta il lettore a giudicare a colpo d'occhio quanto convenga utilizzare la tecnologia descritta nell'articolo.

+ +

Di seguito, i possibili valori per questa categoria di tag:

+ +
+
{{Tag("Read-only")}}
+
"Sola lettura". Il tag da applicare alle pagine di consultazione, che descrivono una proprietà o un attributo di sola lettura.
+
{{Tag("Non-standard")}}
+
"Non standardizzata". Indica che la tecnologia o l'API descritta sulla pagina non rientra in alcuno standard, indipendentemente dalla sua stabilità nei browser che la implementano (se è instabile, va aggiunto anche il tag {{Tag("Experimental")}}). In assenza di questo tag, il lettore presumerà che quella descritta sia una tecnologia standard. La pagina deve inoltre contenere una tabella di compatibilità con l'elenco dei browser che supportano l'API o la tecnologia trattata.
+
{{Tag("Deprecated")}}
+
"Deprecata". Quando la tecnologia o API trattata nella pagina è segnalata come "deprecata", è probabile che cada in disuso, anche se per il momento è ancora disponibile nelle versioni più recenti dei browser.
+
{{Tag("Obsolete")}}
+
"Obsoleta". La tecnologia o API trattata è ormai ritenuta obsoleta, dunque è stata rimossa (o è in corso di rimozione) da tutti gli attuali browser, o quasi.
+
{{Tag("Experimental")}}
+
"Sperimentale". La pagina tratta di una tecnologia non ancora standardizzata, dunque sperimentale, oppure di un'API che potrebbe o meno diventare parte di uno standard. È inoltre soggetta alle modifiche nel motore del browser che la implementa (di solito si tratta di un singolo browser). Se tale tecnologia non fa parte di alcuna specifica (neanche in forma di bozza), deve essere associata anche al tag {{tag("Non-standard")}}.
+
{{Tag("Needs Privileges")}}
+
"Richiede privilegi". L'API trattata richiede privilegi di accesso al dispositivo su cui si esegue il codice.
+
{{Tag("Certified Only")}}
+
"Solo certificato". L'API trattata funziona solo con codice certificato.
+
+ +

I tag precedenti non sostituiscono la tabella di compatibilità, che deve essere sempre presente nell'articolo.

+ +

Livello di competenza

+ +

I tag che indicano il livello di competenza vanno applicati unicamente a guide e tutorial (ovvero, alle pagine con tag Guide). Aiutano l'utente a scegliere un tutorial in base alla propria conoscenza di una data tecnologia. Questa categoria ha tre valori:

+ +
+
{{Tag("Beginner")}}
+
"Principiante". Articoli concepiti per presentare una tecnologia a chi non l'ha mai utilizzata o la conosce solo superficialmente.
+
{{Tag("Intermediate")}}
+
"Intermedio". Articoli destinati a utenti che hanno già iniziato a utilizzare la tecnologia trattata, ma non ne sono ancora esperti.
+
{{Tag("Advanced")}}
+
"Avanzato". Articoli che approfondiscono le possibilità della tecnologia trattata e mettono alla prova le competenze dell'utente.
+
+ +

Metadati del documento

+ +

La comunità dei creatori di contenuti usa i tag per contrassegnare gli articoli che richiedono interventi di tipo specifico. Di seguito, una lista dei più utilizzati:

+ +
+
{{Tag("Draft")}}
+
"Bozza". L'articolo non è ancora completo. In teoria, significa che è in fase di aggiornamento, ma potrebbe trattarsi anche di un articolo abbandonato. Prima di eseguire qualsiasi modifica, è buona norma contattare i collaboratori che hanno lavorato all'ultima bozza dell'articolo, al fine di evitare possibili conflitti di contenuto.
+
{{Tag("NeedsCompatTable")}}
+
"Richiede tabella compatibilità". Occorre aggiungere all'articolo una tabella che specifichi la compatibilità della funzione trattata con i vari browser. Vedi anche la guida per collaborare alla compilazione di una tabella di compatibilità dei browser.
+
{{Tag("NeedsContent")}}
+
"Richiede contenuti". L'articolo è solo un abbozzo, oppure contiene informazioni incomplete. Questo tag indica che è richiesto un revisore per controllare la correttezza dei contenuti, aggiungere ulteriori informazioni e/o completare la stesura dell'articolo.
+
{{Tag("NeedsExample")}}
+
"Richiede esempio". L'articolo necessita di uno o più esempi che chiariscano i concetti illustrati. Tali esempi devono utilizzare il sistema di codice esempio live.
+
{{Tag("NeedsLiveSamples")}}
+
"Richiede esempi live". L'articolo contiene uno o più esempi che devono essere aggiornati al sistema di codice esempio live.
+
{{Tag("NeedsMarkupWork")}}
+
"Richiede formattazione". Il codice di markup che costituisce la formattazione dell'articolo deve essere ottimizzato (solitamente perché l'articolo è formattato solo o quasi da tag generici tipo {{HTMLElement("p")}}).
+
{{Tag("NeedsSpecTable")}}
+
"Richiede tabella specifiche". Occorre aggiungere all'articolo una tabella che documenti le specifiche della funzione trattata.
+
{{Tag("NeedsUpdate")}}
+
"Richiede aggiornamento". Occorre aggiornare i contenuti dell'articolo con informazioni più recenti.
+
{{Tag("l10n:exclude")}}
+
"Escluso da localizzazione". Non vale la pena localizzare questo contenuto, dunque verrà escluso dalle pagine di stato della localizzazione.
+
{{Tag("l10n:priority")}}
+
"Priorità localizzazione". Questo contenuto è importante, i traduttori di MDN dovrebbero dargli la priorità rispetto ad altri articoli. Questo tag viene visualizzato in una tabella delle priorità a parte nelle pagine di stato della localizzazione.
+
+ +

Combinare i vari tag

+ +

Abbiamo visto che a ogni pagina vanno assegnati più tag di diverse categorie, per esempio:

+ +
+
Un tutorial per principianti su WebGL
+
comprende i tag {{Tag("WebGL")}}, {{Tag("Graphics")}}, {{Tag("Guide")}}, {{Tag("Beginner")}}
+
La pagina di consultazione dell'elemento {{HTMLElement("canvas")}}
+
comprende i {{Tag("Canvas")}}, {{Tag("HTML")}}, {{Tag("Element")}}, {{Tag("Graphics")}}, {{Tag("Reference")}}
+
Una landing page sugli strumenti di sviluppo di Firefox
+
comprende i tag {{Tag("Tools")}}, {{Tag("Firefox")}}, {{Tag("Landing")}}
+
+ +

Tag e filtri di ricerca

+ +

L'efficacia dei filtri di ricerca dipende dall'inserimento dei tag corretti nelle pagine di MDN. Di seguito, una tabella dei filtri di ricerca con i tag corrispondenti. (Questi filtri di ricerca si applicano unicamente al sito wiki (la versione modificabile di MDN); la versione MDN in sola lettura utilizza un sistema di ricerca diverso, senza filtri.)

+ +
+

Nota: Quando sotto la colonna "Nome tag" sono presenti più tag, significa che, perché l'articolo compaia nei risultati di ricerca, deve essere associato a uno o più dei tag elencati.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Gruppo filtroNome filtro ricercaNome tag
ArgomentoAPIs and DOM{{Tag("API")}} || {{Tag("DOM")}} {{Deprecated_Inline}}
Add-ons & Extensions {{Deprecated_Inline}}{{Tag("Add-ons")}} || {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}} || {{Tag("WebExtensions")}}
CSS{{Tag("CSS")}}
Canvas{{Tag("Canvas")}}
Firefox{{Tag("Firefox")}}
Firefox OS{{Tag("Firefox OS")}}
Games{{Tag("Games")}}
HTML{{Tag("HTML")}}
HTTP{{Tag("HTTP")}}
JavaScript{{Tag("JavaScript")}}
Marketplace {{Non-standard_Inline}}{{Tag("Marketplace")}}
MathML{{Tag("MathML")}}
Mobile{{Tag("Mobile")}}
Open Web Apps {{Non-standard_Inline}}{{Tag("Apps")}}
SVG{{Tag("SVG")}}
Web Development{{Tag("Web Development")}}
Web Standards{{Tag("Web")}}
WebExtensions{{Tag("WebExtensions")}}
WebGL{{Tag("WebGL")}}
Writing Documentation{{Tag("MDN Meta")}}
XPCOM {{Non-standard_Inline}}{{Tag("XPCOM")}}
XUL {{Non-standard_Inline}}{{Tag("XUL")}}
{{anch("Livello di competenza")}}I'm an Expert{{Tag("Advanced")}}
Intermediate{{Tag("Intermediate")}}
I'm Learning{{Tag("Beginner")}}
Tipo di documentoDocsRestringe il campo di ricerca alla documentazione, escludendo i contenuti di Hacks e contenuti di altro tipo in MDN.
DemosQuesto tipo di documento non è più in uso nella documentazione web di MDN.
Tools{{Tag("Tools")}}
Code Samples{{Tag("Example")}}
How-To & Tutorial{{Tag("Guide")}}
Developer ProfilesInclude nei risultati di ricerca i profili degli sviluppatori registrati su MDN.
External ResourcesIl team di sviluppo non ha ancora stabilito come utilizzare questo filtro...
+ +

Problemi di tag che puoi aiutare a risolvere

+ +

I collaboratori possono contribuire a risolvere diversi tipi di problemi riguardanti i tag:

+ +
+
Niente tag
+
Di norma, ogni articolo dovrebbe essere associato almeno a un tag per la {{anch("Categoria documento", "categoria")}} e a un tag per l'{{anch("Argomento", "argomento")}} del documento. È possibile aggiungere altri tag appropriati, ma assicurarsi che ogni pagina abbia i tag strettamente necessari costituisce già di per sé un enorme contributo.
+
Tag non conformi agli standard MDN
+
Quando si trova un documento che non segue gli standard di questa pagina, è opportuno correggerlo.
+Attenzione: su alcune pagine in lingua inglese è possibile talvolta imbattersi in tag localizzati in altre lingue (es. Référence). Questo problema è dovuto a un bug in Kuma per cui i tag ricomparivano anche dopo essere stati eliminati. Il bug è stato successivamente risolto: ora è possibile ripulire le pagine da tutti i tag erratamente localizzati.
+
Tag non corretti
+
Se un articolo sul codice HTML è associato al tag "JavaScript", si tratta probabilmente di un errore. Lo stesso vale per un articolo che tratta di meccanismi interni di prodotti Mozilla, ma è associato al tag "Web". I tag non corretti vanno rimossi e quelli appropriati vanno aggiunti, se mancanti. Inoltre, vanno corretti anche i tag che contengono errori di battitura, come ad esempio "Javascript" (il tag funziona comunque, poichè il sistema non coglie la differenza tra maiuscole e minuscole, ma anche la forma va curata).
+
Tag mancanti
+
Un articolo potrebbe già essere associato ad alcuni tag, ma non a tutti quelli necessari. In questo caso, occorre aggiungere i tag mancanti. Per esempio, se una pagina di consultazione in JavaScript presenta soltanto il tag "JavaScript" (peraltro corretto), i collaboratori sono incoraggiati ad aggiungere i tag "Reference" o di un'altra {{anch("Categoria documento", "categoria")}}.
+
Tag spam
+
Si tratta del problema più fastidioso di tutti: alcuni malevoli frequentatori del Web hanno attaccato anche MDN, infestando le pagine con tag tipo "Free warez!" o "Ehi passavo da questo sito e volevo sapere se potete aiutarmi a risolvere il problema con Flash che crasha sempre". Questi tag vanno eliminati al più presto! Non solo danno fastidio e creano problemi nella gestione delle pagine se non vengono rimossi tempestivamente, ma hanno anche un effetto deleterio sul {{Glossary("SEO")}}.
+
+ +

Quando si nota uno (o più) di questi tag, accedere a MDN e premere MODIFICA nell'angolo in alto a destra della finestra. Una volta che l'editor si sarà caricato, scorrere fino al riquadro dei tag, che si trova in fondo alla pagina. Per ulteriori dettagli sull'interfaccia di inserimento dei tag, consulta la sezione sui tag nella guida all'editor di MDN.

diff --git a/files/it/mdn/contribute/index.html b/files/it/mdn/contribute/index.html new file mode 100644 index 0000000000..2a0a00581a --- /dev/null +++ b/files/it/mdn/contribute/index.html @@ -0,0 +1,71 @@ +--- +title: Contribuire a MDN +slug: MDN/Contribute +tags: + - Documentation + - Guide + - Landing + - MDN +translation_of: MDN/Contribute +--- +
{{MDNSidebar}}
+ +

 Benvenuto! Visitando questa pagina hai fatto il primo passo per diventare un collaboratore di MDN. Queste guide coprono tutti gli aspetti inerenti la collaborazione con MDN, ad esempio le guide di stile, le guide per l'uso dell'editor, dei vari strumenti e altro ancora.

+ +
+
+

Guide per i collaboratori

+ +
+
Primi passi
+
Una guida veloce per prepararti ai tuoi primi contributi.
+
Guida di stile e di contenuto
+
La guida di stile e di contenuto di MDN fornisce i dettagli riguardo lo stile di scrittura, il layout delle pagine e lo stile dei contenuti, per fare sì che ciò che scrivi sia in linea con il resto del contenuto di MDN.
+
Guida all'editor
+
Una guida completa all'uso dell'editor di MDN.
+
Revisione degli articoli
+
Una guida alla revisione editoriale e tecnica del contenuto degli articoli, per assicurarci che tutto il contenuto di MDN sia il più possibile utile e leggibile.
+
Terminologia e convenzioni
+
La nostra guida alla terminologia e alle convenzioni fornisce informazioni che puoi utilizzare per assicurarti che tu stia usando la corretta terminologia per descrivere i vari concetti.
+
Lavorare con la comunità di MDN
+
Una guida che spiega come lavorare con la nostra comunità, trovare aiuto e connetterti con le persone giuste per risolvere qualsiasi dubbio tu abbia nella tua collaborazione con MDN.
+
Risposte a domande frequenti
+
Suggerimenti e risposte alle domande più frequenti riguardo alla collaborazione con MDN.
+
+ +
+
Contribuire a Kuma
+
Una guida alla collaborazione con il progetto Kuma, ovvero la piattaforma del sito web di MDN.
+
+
+ +
+

Come fare per...

+ +

I nostri manuali di istruzioni ti guideranno passo passo nello svolgere specifici compiti quando collabori con MDN.

+ +
+
Come documentare una proprietà CSS
+
Una guida alla scrittura di documentazione per le proprietà CSS. Tutti i documenti sulle proprietà dei CSS devono adeguarsi allo stile e al layout descritti in questo articolo.
+
Come documentare un elemento HTML
+
Questa guida alla scrittura di documentazione sugli elementi HTML permette di preparare documenti che siano in linea con la documentazione già presente su MDN.
+
Come etichettare correttamente le pagine
+
Questa guida all'etichettatura delle pagine fornisce informazioni riguardo ai nostri standard per l'etichettatura. Inoltre contiene un elenco di etichette che hanno un significato standard su MDN. Seguire questa guida garantirà che i tuoi contenuti siano categorizzati appropriatamente, più facili da cercare e che il nostro sistema di filtri di ricerca funzioni correttamente con i tuoi articoli.
+
Come interpretare le specifiche
+
Questa guida ti aiuterà ad interpretare correttamente le specifiche degli standard Web; la capacità di leggere queste specifiche può essere una vera e propria forma d'arte. Una corretta interpretazione ti aiuterà a creare una documentazione migliore.
+
+ +

Localizzazione

+ +
+
Tour guidato alla localizzazione
+
Questo tour guidato spiega come localizzare i contenuti su MDN.
+
Guida alla localizzazione
+
Questa guida fornisce maggiori dettagli riguardo al processo di localizzazione dei contenuti su MDN.
+
Progetti di localizzazione
+
Quasta pagina ti permette di trovare i progetti di localizzazione per la tua lingua o, se non ne esistono, ti spiega come crearne uno!
+
+
+
+ +

 

diff --git a/files/it/mdn/contribute/localize/guidaitaliano/index.html b/files/it/mdn/contribute/localize/guidaitaliano/index.html new file mode 100644 index 0000000000..203b17067d --- /dev/null +++ b/files/it/mdn/contribute/localize/guidaitaliano/index.html @@ -0,0 +1,82 @@ +--- +title: Processo di localizzazione di MDN per la versione Italiana +slug: MDN/Contribute/Localize/GuidaItaliano +tags: + - Localization + - MDN + - l10n +--- +
{{MDNSidebar}}
+ La localizzazione di MDN viene gestita principalmente da Mozilla Italia, un gruppo di volontari che si occupa della localizzazione e diffusione dei progetti e dei valori di Mozilla per gli utenti italiani.
+
+  
+
+ Abbiamo messo a punto un sistema che ci permette di gestire più agevolmente il processo di localizzazione e QA (Quality Assurance, ovvero Controllo Qualità) degli articoli presenti su MDN. Se da un lato non è obbligatorio usare questo sistema per partecipare alla localizzazione degli articoli di MDN, dall'altro questo ci aiuta ad evitare la duplicazione del lavoro e ad avere un approccio più sistematico nell'opera che stiamo portando avanti.
+
+  
+

Ruoli attuali

+
+ Il processo di traduzione viene eseguito da due figure: il traduttore ed il revisore.
+
+  
+
+ Il traduttore si occupa di tradurre gli articoli, mentre il revisore si occupa della parte di QA, ovvero di verificare che la traduzione sia scritta in maniera chiara, leggibile e linguisticamente corretta.
+
+  
+

Prerequisiti

+
+ I localizzatori devono:
+
+ 1. Essere in grado di modificare e creare nuovi articoli su MDN (vedi [link alla pagina di MDN sulla modifica degli articoli])
+
+ 2. Essere iscritti al forum di Mozilla Italia (http://forum.mozillaitalia.org )
+
+  
+
+ I revisori devono:
+
+ 1. Essere iscritti al forum di Mozilla Italia (http://forum.mozillaitalia.org )
+
+  
+

Il processo di localizzazione

+
+ Questo elenco di operazioni copre il ciclo di vita di una localizzazione, da quando il localizzatore comincia il proprio lavoro a quando la localizzazione dell'articolo risulta terminata.
+
+  
+
+ 1. Il localizzatore decide quale pagina localizzare. Nella scelta di quante e quali pagine tradurre occorre tenere presente che il lavoro del localizzatore non si esaurisce con la traduzione della pagina allo stato attuale, ma continua con l’impegno di tenerla costantemente aggiornata.
+
+ 2. Il localizzatore esegue il proprio lavoro.
+
+ 3. Prima di salvare si assicura che, in fondo alla pagina dell'editor siano spuntate le voci "Localizzazione in corso" e "Editoriale" sotto la sezione "È necessaria una revisione?"
+
+ 4. Il localizzatore aggiunge una riga sull'etherpad presente all'indirizzo https://etherpad.mozilla.org/9LBcQCAbkA indicando il titolo dell'articolo, l'URL dell'articolo e il proprio nickname.
+
+ 5. Il localizzatore aggiunge un post al topic "[MDN] Traduzione articoli" sul forum di Mozilla Italia all'indirizzo http://forum.mozillaitalia.org/index.php?topic=54775.0 
+
+ 6. Il revisore controlla l'articolo tradotto e nello stesso topic suggerisce al localizzatore le correzioni da effettuare. Questi suggerimenti non sono vincolanti, sta al localizzatore decidere se accettarli o meno
+
+ 7. Il localizzatore effettua le correzioni che ritiene opportune
+
+ 8. Se i revisori si ritengono soddisfatti delle correzioni apportate, il localizzatore sbarra la voce dell'articolo sull'etherpad (selezionando la riga corrispondente e usando il pulsante con la "S" sbarrata in alto a destra dell'editor per applicare alla selezione lo stile "Strikethrough")
+
+  
+

Suggerimenti

+ +
+  
+

Consistenza terminologica e aggiornamenti

+
+ Essendo MDN una guida per sviluppatori, è di fondamentale importanza che la terminologia degli articoli sia consistente con quella utilizzata nella localizzazione ufficiale di Mozilla. Pertanto:
+ +

Traduzioni incomplete

+
+ Se un traduttore interrompe la localizzazione di una pagina e desidera riprenderla in un secondo (ragionevolmente non troppo lontano) momento, è bene che spunti la casella “Localizzazione in corso” nella schermata di traduzione, in modo da informare gli altri utenti che quella pagina non è stata abbandonata a se stessa. Le pagine incomplete sprovviste dell’etichetta “Localizzazione in corso” verranno considerate a tutti gli effetti libere di essere modificate da altri localizzatori.
+
+  
diff --git a/files/it/mdn/contribute/localize/index.html b/files/it/mdn/contribute/localize/index.html new file mode 100644 index 0000000000..a322dd56f2 --- /dev/null +++ b/files/it/mdn/contribute/localize/index.html @@ -0,0 +1,28 @@ +--- +title: Localizzazione di MDN +slug: MDN/Contribute/Localize +tags: + - Documentation + - Localization + - MDN + - TopicStub +translation_of: MDN/Contribute/Localize +--- +
{{MDNSidebar}}

MDN è usato in tutto il mondo come riferimento e guida alle tecnologie del Web e come documentazione tecnica di Firefox. Le nostre comunità di localizzazione sono una componente fondamentale del progetto Mozilla; il loro sforzo nel tradurre e localizzare la documentazione permette alle persone in tutto il mondo di sviluppare per l'open Web. Se vuoi maggiori informazioni sui nostri gruppi di localizzazione, unirti a uno dei gruppi esistenti o magari iniziare una nuova localizzazione non ancora presente, sei nel posto giusto.

+

{{LandingPageListSubpages}}

+

Strumenti per la localizzazione

+

Questi sono alcuni degli strumenti che vengono utilizzati per la localizzazione:

+
+
+ Verbatim
+
+ Utilizzato per la traduzione delle stringhe di vari progetti Mozilla, tra cui l'interfaccia utente di MDN e quella di Firefox.
+
+ Transvision
+
+ Uno strumento fornito da Mozilla France che permette di cercare occorrenze di una stringa in inglese e di trovare, in base alla lingua di proprio interesse, tutte le varie traduzioni che vengono utilizzate all'interno del codice Mozilla. È molto utile per trovare le traduzioni più utilizzate per i vari termini o frasi.
+
+

Vedi anche

+ diff --git a/files/it/mdn/contribute/localize/progetti_localizzazione/index.html b/files/it/mdn/contribute/localize/progetti_localizzazione/index.html new file mode 100644 index 0000000000..5266f57222 --- /dev/null +++ b/files/it/mdn/contribute/localize/progetti_localizzazione/index.html @@ -0,0 +1,283 @@ +--- +title: I progetti di localizzazione +slug: MDN/Contribute/Localize/progetti_localizzazione +translation_of: MDN/Contribute/Localize/Localization_projects +--- +

Il lavoro di localizzazione e di traduzione su MDN viene svolto dalla nostra straordinaria comunità di volontari. In questo articolo vengono elencati i progetti di localizzazione, coloro che ve ne sono alla guida e chi vi collabora, oltre ad altri dettagli.

+

A capo della localizzazione vi è colui che guida una comunità di localizzazione su MDN,  a localizzare i contenuti in base ad uno specifico luogo o tema. Insieme ai team di localizzazione, essi devono riportare i loro dati nella tabella progetti sottostante, in modo che, coloro interessati a contribuire, possano contattarli. Ognuno a capo della localizzazione ( o qualsiasi persona facente parte del team del progetto di localizzazione) è stimolato nel creare sul wiki una pagina team per i vostri progetti di localizzazione , da utilizzare per scopi organizzativi e amministrativi.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LinguaCapo LocalizzazioneCollaboratoriNotes
+

ગુજરાતી

+

(Gujarati)

+ 		prafull_satasiyaprafull_satasiyaCerchiamo traduttori
العربية wassim_h 
Persian Amir Farsi, Kazem EbrahimiCerchiamo traduttori
Bengali (Bangladesh)Shafiul Azam Chowdhury +

tuxboy, shafiul, Nasir Khan Saikat, Towfique Anam Rine, Tanha Islam, Sekander Badsha, Fahia Nasnin, Salman Rahman Desh, jaggedzak

+ 		Il Team Mozilla Bangladesh  cerca nuovi collaboratori. Maggiori informazioni
FrenchJeremie PatonnierFredB, Alain Boquet, Fréderic Chateaux, Vincent N., Benoit Leseul, Shz, Thierry Régagnon (tregagnon), xaky, Goofy, sylzys, the prisoner, Julien STUBY, poum, sylvie, Delapouite, Sphinx(note o URL alla pagina del team del progetto di traduzione)
Italian Federico, mck89, marcostudios, loris94, MrW0lf, Iacchi, camaleo, marcantonio, Grino, Nicola_D, EdoPut, Giona, klezMozilla Italia cerca collaboratori! Se vuoi aiutare a localizzare MDN, ti chiediamo di guardare questa guida per imparare come tradurre MDN.
Indonesian ariestiyansyah, Pieter Erlanda,  imrizal, Vernando Simbolon 
Japanese Yoshino(ex.Mozilla Japan), Yuichiro, myakura(Masataka Yakura), yyss, ethertank, sosleepy, Marsf(Masahiko Imanaka), Masayuki, nobuoka, yoshitanaka, taguchi-ch, sii, saneyuki_s, Shimono(Atsushi Shimono), Taken(Takeshi Kurosawa), Electrolysis, dextra,PotappoMDC Japan Project (-2009)
Lao ພາສາລາວ Anousak Souphavanh, Angkhan Buasavanh, Phaynalinh Sypasert, Sulaxay Manivong, Robert M Campbell, Lao Thor 
Polish Tomasz Sokół,Marcoos(Marek Stępień), Dapi 
SpanishManuel CamachoNukeador, Superruzafa, vhanla, maedca, inma_610, ccarruitero, artopal, StripTM, Jorge.villalobos, Scipion, Verruckt, Nathymig, Rkovac, ajimix, mhauptma73, deimidis, Joalar, Maharba, jessest, MPoli, Daniel Pereyra, luisgm76, LeoHirsch, gorrotowiCerchiamo urgentemente traduttori.
Portuguese (Brazil) Jaydson Gomes, Galvão, Atila, francisco.hansen, francineemilia, battisti, jpalharini, LeonardoPacheco, Lehrerschuler, hsteffano, lfz, -pedrohenrique-, eduardodx, mateus.m.luna, josivansilva, TelaSocial, mazulo, vlopez5, robsonds, HenriqueSilverio, srsaudeCome collaborare con MDN
Portuguese (Portugal) Leandro Mercês Xavier, Matheus Smythe Svolenski, Luis Henrique Sousa, f.sanxz 
KoreanChanny Yun Korean ContributorsGoogle Groups
Germanfscholzeminor, AlexPl, Sprottenwels, tessarakt3, jwl, SJW, Holger Sinn, Sebastian ZartnerCerchiamo traduttori
+

Greek

+ 		 syssgx, JasnaPaka, DJ.MacaCerchiamo traduttori
Russian Cobalt747, Sky_Fox, Chernetsky, uleming, karasiov, Dionys, Megapotz, hazestalker, Kwinto, kupCerchiamo traduttori
Chinese (Traditional) BobChao, dwchiang, happysadman, petercpg, sailplaneTW, Kourge, Josesun, Sonrisa, Kennyluck, sycheng, naihsi, evelynhung, ypwalter, steely.wingCerchiamo traduttori! Unisciti a noi! Google Groups!
+

中文 (简体)

+ 		ziyunfei如有问题讨论，请加 QQ 群 26079139 咨询带头人。
Hebrew Ziv Perry, InkbugCerchiamo traduttori
Romanian Raul Malea, Andrew_PhamCerchiamo traduttori.
Telugu Dyvik Chenna Thirunahari, DyvikCerchiamo traduttori
Thai Hassadee PimsuwanCerchiamo traduttori
+

Turkish

+ 		 Hakan Damar, ramesaliyev +

Cerchiamo urgentemente traduttori

+
Hindi Meghraj Suthar, meghraj +

Cerchiamo traduttori

+
Hawaiian KolonaheCerchiamo urgentemente traduttori
Serbian Vladimir KrsticIniziate a localizzare, siete i benvenuti. C'è molto da fare!
SinhalesepkavindaPasindu Kavinda (පසිඳු කවින්ද) +

Cerchiamo traduttori

+
MalayalamRigin OommenAmjad M, Kumaresan C.S, ST AlfasSiamo alla ricerca di persone in grado di tradurre documenti  in lingua malese.
MyanmarSet Kyar Wa larSet Kyar Wa LarSiamo alla ricerca di persone in grado di tradurre documenti  in lingua birmana.
+ diff --git a/files/it/mdn/contribute/localize/translating_pages/index.html b/files/it/mdn/contribute/localize/translating_pages/index.html new file mode 100644 index 0000000000..f45ad0085f --- /dev/null +++ b/files/it/mdn/contribute/localize/translating_pages/index.html @@ -0,0 +1,55 @@ +--- +title: Come tradurre le pagine di MDN +slug: MDN/Contribute/Localize/Translating_pages +tags: + - Guide + - Localization + - MDN Meta + - Page Translation + - l10n +translation_of: MDN/Contribute/Localize/Translating_pages +--- +

{{MDNSidebar}}

+ +

Questo articolo contiene una guida di base su come tradurre i contenuti su MDN, includendo sia le meccaniche di traduzione che consigli per la corretta gestione dei diversi tipi di argomenti.

+ +

Iniziare una nuova traduzione

+ +

Quando t'imbatti in una pagina che vorresti vedere tradotta nella tua lingua, segui questi passaggi:

+ +
    +
  1. Clicca sull'icona delle lingue per aprire il menu delle lingue e clicca su Add a Translation. Se non dovessi trovare questa voce, prova  prima a passare alla lingua Inglese.
    2. +
  2. Nella pagina Select Languages, scegli la lingua in cui vuoi tradurre il testo. Si aprirà la pagina con l'articolo originale sulla sinistra e l'editor di testo per scrivere la nuova versione sulla destra dello schermo.
    3. +
  3. Nella sezione Translate Description, puoi tradurre il titolo e lo slug della pagina. Lo slug è l'ultima parte dell'url di una pagina (per esempio, "Translating_pages" in questo articolo). In alcune lingue lo slug non viene tradotto, mantenendo quello originale in inglese. Confronta dunque le altre pagine nella tua lingua per seguire una pratica comune. Per nascondere la sezione Translate Description puoi cliccare sul meno a sinistra del titolo, così da avere più spazio sullo schermo per la sezione Translate Content.
    4. +
  4. Nella sezione Translate Content puoi tradurre il testo principale e puoi vederne l'anteprima cliccando su Preview Changes.
    5. +
  5. Ricordati di scegliere almeno un tag per pagina.
    6. +
  6. Clicca Save Changes quando hai finito, Discard Changes se hai deciso di annullare le modifiche apportate.
    7. +
+ +
Nota: L'interfaccia di traduzione è inizialmente mostrata in inglese. Nelle successive visite verrà visualizzata nella tua lingua, sempre se il servizio di localizzazione di MDN riesce a stabilirla. La lingua viene scelta usando il servizio Verbatim.
+Vai a Localizzazione con Verbatim per i dettagli di questo strumento.
+ +

Modificare una pagina già tradotta

+ + + +

Se la versione originale in inglese è stata modificata dopo l'ultimo aggiornamento nella tua lingua, l'interfaccia di traduzione mostrerà le modifiche a livello del codice sorgente, che può essere utile per aggiornare la traduzione.

+ +

Tag

+ +

È importante che ogni pagina abbia almeno un tag. Anche se si tratta di una traduzione. Generalmente, usare gli stessi tag della versione originale dell’articolo è una buona prassi.

+ +

Alcuni tag sono utilizzati come filtri per le ricerche, o come riferimento per chi contribuisce a MDN. Non dovrebbero essere tradotti. Per sapere quali sono questi tag, visita la pagina standard di etichettatura. Sei libero di creare nuovi tag nella tua lingua, a patto che non siano parte di questa lista.

+ +

Suggerimenti per i nuovi localizzatori

+ +

Se tu sei principiante nella localizzazione su MDN, qui sono alcuni suggerimenti:

+ + diff --git a/files/it/mdn/contribute/persona_sign-in/index.html b/files/it/mdn/contribute/persona_sign-in/index.html new file mode 100644 index 0000000000..5b89975a4d --- /dev/null +++ b/files/it/mdn/contribute/persona_sign-in/index.html @@ -0,0 +1,26 @@ +--- +title: MDN and Persona sign-ins +slug: MDN/Contribute/Persona_sign-in +translation_of: Archive/MDN/Persona_sign-ins +--- +
{{MDNSidebar}}
+

Please link your GitHub account to your MDN profile now so you can continue to sign into MDN.

+
+ +

Attualmente, MDN permette ai collaboratori di accedere utilizzando due differenti modalità: Mozilla Persona e GitHub. A partire dal 1 novembre 2016 verrà rimossa l'opzione Persona per il login. Di conseguenza, sarà necessario abilitare l'autenticazione Github sul proprio profilo per evitare di perdere l'accesso di login a MDN.

+ +

Ci rendiamo conto che questo è un inconveniente e ci scusiamo per questo. Purtroppo questa cosa è al di fuori del nostro controllo.

+ +

Perché Persona verrà rimosso?

+ +

Mozilla ha terminato il progetto Persona, e i suoi server verranno spenti nel Novembre 2016. You can learn more about Mozilla's decision to shut down Persona on the Mozilla wiki.

+ +

When will Persona be removed?

+ +

We will disable Persona as an authentication provider on November 1, 2016; in other words, the last day you'll be able to sign into MDN using Persona will be October 31, 2016. We will be issuing increasingly frequent and increasingly urgent notifications to add a GitHub account to your MDN profile starting now. Please do this as soon as you can, in order to avoid any risk of losing access to your MDN account.

+ +

Will MDN offer another authentication provider?

+ +

We would very much like to do so, but have not yet identified another provider which meets our requirements; in addition, we don't currently have the developer resources to integrate another provider. For the time being, your only option to keep contributor access to MDN is to link your MDN profile to your GitHub account.

+ +

Keep in mind, of course, that you don't need to sign into MDN in order to read our content. But if you have an account for contributing, and wish to be able to contribute at any time in the future, be sure to add a GitHub account to your profile as soon as you can, before October 31, 2016.

diff --git a/files/it/mdn/editor/index.html b/files/it/mdn/editor/index.html new file mode 100644 index 0000000000..856ef1fc2d --- /dev/null +++ b/files/it/mdn/editor/index.html @@ -0,0 +1,9 @@ +--- +title: Guida all'editor di MDN +slug: MDN/Editor +translation_of: MDN/Editor +--- +
{{MDNSidebar}}

L'editor WYSIWYG (what-you-see-is-what-you-get, ciò che vedi è ciò che ottieni) messo a disposizione dal wiki del Mozilla Developer Network semplifica la creazione di nuovi contenuti. La guida all'editor di MDN fornisce alcune informazioni sull'utilizzo dell'editor e su alcune caratteristiche utili che possono migliorare la tua produttività.

+

La guida di stile di MDN fornisce alcune informazioni sulla formattazione e lo stile da applicare ai contenuti, comprese le regole di grammatica che preferiamo vengano utilizzate.

+

{{LandingPageListSubpages}}

+

{{EditorGuideQuicklinks}}

diff --git a/files/it/mdn/guidelines/index.html b/files/it/mdn/guidelines/index.html new file mode 100644 index 0000000000..11412724a1 --- /dev/null +++ b/files/it/mdn/guidelines/index.html @@ -0,0 +1,13 @@ +--- +title: MDN content and style guides +slug: MDN/Guidelines +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Guidelines +--- +
{{MDNSidebar}}

These guides provide details on how MDN documentation should be written and formatted, as well as how our code samples and other content should be presented. By following these guides, you can ensure that the material you produce is clean and easy to use.

+

{{LandingPageListSubpages}}

diff --git a/files/it/mdn/guidelines/macros/index.html b/files/it/mdn/guidelines/macros/index.html new file mode 100644 index 0000000000..a09cf37e30 --- /dev/null +++ b/files/it/mdn/guidelines/macros/index.html @@ -0,0 +1,42 @@ +--- +title: Using macros on MDN +slug: MDN/Guidelines/Macros +tags: + - italino tags +translation_of: MDN/Structures/Macros +--- +
{{MDNSidebar}}

The Kuma platform on which MDN runs provides a powerful macro system, KumaScript, which makes it possible to do a wide variety of things automatically. This article provides information on how to invoke MDN's macros within articles.

+ +

The KumaScript guide provides an in-depth look at how to use macros on MDN, so this section is more of a brief overview. If you've already read the section above on {{SectionOnPage("/en-US/docs/Project:MDN/Contributing/Editor_guide/Links", "Using link macros")}}, you're already at least a little bit familiar with the concept.

+ +

How macros are implemented

+ +

Macros on MDN are implemented using server-executed JavaScript code, interpreted using Node.js. On top of that we have a number of libraries we've implemented that provide wiki-oriented services and features to let macros interact with the wiki platform and its contents. If you're interested in learning more, see the KumaScript guide; the KumaScript reference provides details on the libraries and other KumaScript APIs we've implemented.

+ +

Using a macro in content

+ +

To actually use a macro, you simply enclose the call to the macro in a pair of double-braces, with its parameters, if any, enclosed in parentheses; that is:

+ +
\{{macroname(parameter-list)}}
+ +

A few notes about macro calls:

+ + + +

Macros are heavily cached; for any set of input values (both parameters and environmental values such as the URL for which the macro was run), the results are stored and reused. This means that the macro is only actually run when the inputs change.

+ +
+

Note: You can force all the macros on a page to be re-evaluated by force-refreshing the page in your browser (that is, a shift-reload).

+
+ +

Macros can be as simple as just inserting a larger block of text or swapping in contents from another part of MDN, or as complex as building an entire index of content by searching through parts of the site, styling the output, and adding links.

+ +

You can read up on our most commonly-used macros on the Custom macros page; also, there's a complete list of all macros here. Most macros have documentation built into them, as comments at the top.

+ +

{{EditorGuideQuicklinks}}

diff --git a/files/it/mdn/guidelines/migliore_pratica/index.html b/files/it/mdn/guidelines/migliore_pratica/index.html new file mode 100644 index 0000000000..2aadc92c27 --- /dev/null +++ b/files/it/mdn/guidelines/migliore_pratica/index.html @@ -0,0 +1,34 @@ +--- +title: Migliore pratica +slug: MDN/Guidelines/Migliore_pratica +tags: + - Guida + - MDN Meta + - linee guida +translation_of: MDN/Guidelines/Conventions_definitions +--- +
{{MDNSidebar}}

Quest'articolo descrive i metodi raccomandati di lavoro con il contenuto su MDN. Queste linee guida descrivono i metodi preferiti per fare tutto ciò che porta ad un miglior risultato, o offrire un consiglio nel decidere tra diversi metodi nel fare cose simili.

+ +

Copiare il contenuto

+ +

A volte, avrai la necessità di utilizzare lo stesso testo su più pagine (oppure utilizzare il modello di una pagina per un'altra). Hai tre opzioni:

+ + diff --git a/files/it/mdn/index.html b/files/it/mdn/index.html new file mode 100644 index 0000000000..16a5058327 --- /dev/null +++ b/files/it/mdn/index.html @@ -0,0 +1,29 @@ +--- +title: Il progetto MDN +slug: MDN +translation_of: MDN +--- +
{{MDNSidebar}}
+ +

Mozilla Developer Network (MDN) è un wiki che utilizziamo per documentare il Web open, le tecnologie Mozilla, Firefox OS e altri argomenti inerenti il lavoro degli sviluppatori. Tutti coloro che vogliono aggiungere o modificare contenuti sono i benvenuti. Non è necessario essere programmatori o sapere tutto sulla tecnologia; esistono vari compiti che necessitano di volontari, dai più semplici (revisione e correzione degli articoli) ai più complessi (scrivere documentazione per le API).

+ +
+

L'obiettivo del progetto MDN è quello di documentare l'Open Web, le tecnologie Mozilla e il progetto Mozilla. Ti invitiamo ad aiutarci!

+
+ +

Ci serve il tuo aiuto! È semplice. Non serve che chiedi il permesso e non avere paura di commettere errori. D'altro canto, ti consigliamo di fare conoscenza con la comunità MDN; siamo qui per aiutarti! La documentazione sottostante può essere un valido aiuto per iniziare.

+ + + + diff --git a/files/it/mdn/structures/index.html b/files/it/mdn/structures/index.html new file mode 100644 index 0000000000..b8df701dac --- /dev/null +++ b/files/it/mdn/structures/index.html @@ -0,0 +1,16 @@ +--- +title: Document structures +slug: MDN/Structures +tags: + - Landing + - MDN Meta + - NeedsTranslation + - Structures + - TopicStub +translation_of: MDN/Structures +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

Throughout MDN, there are various document structures that are used repeatedly, to provide consistent presentation of information in MDN articles. Here are articles describing these structures, so that, as an MDN author, you can recognize, apply, and modify them as appropriate for documents you write, edit, or translate.

+ +

{{LandingPageListSubPages()}}

diff --git "a/files/it/mdn/structures/tabelle_compatibilit\303\240/index.html" "b/files/it/mdn/structures/tabelle_compatibilit\303\240/index.html" new file mode 100644 index 0000000000..81ee695696 --- /dev/null +++ "b/files/it/mdn/structures/tabelle_compatibilit\303\240/index.html" @@ -0,0 +1,496 @@ +--- +title: Tabelle di compatibilità +slug: MDN/Structures/Tabelle_compatibilità +translation_of: MDN/Structures/Compatibility_tables +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

MDN ha un formato standard di tabelle di compatibilità per la nostra documentazione web open; in altre parole, la documentazione di tecnologie come DOM, HTML, CSS, JavaScript, SVG, ecc., che viene condivisa attraverso tutti i browsers. Questo articolo spiega come usare le nostre funzionalità per aggiungere dati di compatibilità alle pagine MDN.

+ +
+

Importante: Il modo in cui i dati sono generati è cambiato. Storicamente le nostre tabelle erano inserite sulla pagina e i dati inseriti manualmente.   Questo è inefficiente, rende la manutenzione difficile e rende i dati inflessibili. Per questo, stiamo cambiando i dati di compatibilità per browser al fine di essere immagazzinati in una repository dati (vedi https://github.com/mdn/browser-compat-data) generando le tabelle programmaticamente.
+
+ In questa guida, documentiamo il nuovo metodo per aggiungere dati di compatibilità in MDN, mantenendo tuttavia, la documentazione sul vecchio metodo, poiché saranno ancora presenti per un po' le tabelle popolate manualmente su MDN. Se hai bisogno di vedere la vecchia documentazione, controlla il nostro articolo Old compatibility tables.

+
+ +
+

Nota: Se hai bisogno di aiuto con un qualsiasi step di questa guida, puoi contattarci al MDN discussion forum.

+
+ +

Come accedere alla repository dati

+ +

I dati sono conservati in un repository GitHub — vedi https://github.com/mdn/browser-compat-data. Per accedervi, hai bisogno di un account GitHub, fare un fork del repository browser-compat-data attraverso il tuo account, infine clonare il fork localmente sulla tua macchina.

+ +

Choosing a feature to add data for

+ +

First of all, find a feature that you want to add browser-compat-data for. This could be an HTML element, CSS property, JS language feature or JS API interface, for example. We would like to encourage you to work on API features, as we already have people working on HTML, JS, and CSS. You can find the status of features that need their data adding to the repo on our Browser Compat Data migration spreadsheet.

+ +

The process for using this is as follows:

+ +
    +
  1. Go ahead and choose a feature that is not already being worked on or complete. Put your name in the "Who" column, preferably along with your MDN username so we can find your email address and contact you if we need to.
    2. +
  2. If the feature you want to work on is not already listed in the spreadsheet, add rows for it in an appropriate place, copying the format that is already there. You should also use the same granularity (e.g. per element for HTML, per property or selector for CSS, per object for JS, per interface for APIs).
    3. +
  3. Once you've started work on adding the data, put the status to "In progress".
    4. +
  4. Once you've added the data and submitted a pull request to the main repo, put the status to "PR done".
    5. +
  5. As your data is merged to the repo, then added to the npm package, update the status as necessary.
    6. +
  6. Once you've updated the documentation page(s) for your feature to use the new macro to dynamically generate the appropriate data table on each page, set the status to "Article updated". At this point, you are done.
    7. +
+ +

Preparing to add the data

+ +

Before adding some new data, you should make sure that your fork is up-to-date with the main repo (it contains the same content), create a new branch inside your fork to contain your additions, then pull that branch into your local clone so you can start working inside it:

+ +

Let's look at a simple way to make sure your fork is to-to-date is as follows:

+ +

Adding the main browser-compat-data repo as a remote

+ +

Go to your local clone of your fork in your terminal/command line, and add a remote pointing to the main (upstream) repo like so (you only need to do this once):

+ +
git remote add upstream https://github.com/mdn/browser-compat-data.git
+ +

If you are unsure whether you've done this, you can check what remotes your repo has using

+ +
git remote -v
+ +

Updating your fork with the remote's content

+ +

Now, whenever you want to update your fork, you can do so by:

+ +
    +
  1. +

    Making sure you are in the master branch:

    + + 
    git checkout master
    +
    2. +
  2. +

    fetching the up-to-date repo contents using the following:

    + + 
    git fetch upstream
    +
    3. +
  3. +

    rebasing the contents of your master with the main repo's contents:

    + + 
    git rebase upstream/master
    +
    4. +
  4. +

    pushing these updates back to your remote fork using this:

    + + 
    git push -f
    +
    5. +
+ +

Creating a new branch to do your work in

+ +

Next, go to your remote fork (it will be at https://github.com/your-username/browser-compat-data) and create a new branch to store your changes for this data addition. This can be done by:

+ +
    +
  1. Clicking on the "Branch: Master" button.
    2. +
  2. Entering a new branch name into the "Find or create a branch..." text field.
    3. +
  3. Pressing the resulting "Create branch name-of-branch from Master" button.
    4. +
+ +

For example, if you were wanting to add data for the WebVR API, you'd create a branch called something like "webvr".

+ +

Switching to the new branch

+ +

At this point, go back to your terminal/command line, and update your fork's local clone to include your new branch using the following command:

+ +
git pull
+ +

Now switch to your new branch using this:

+ +
git checkout name-of-branch
+ +

You should now be ready to start adding your data!

+ +

Adding the data

+ +

To add the data, you need to create a new file or files to store your compat data in. The files you need to create differ, depending on what technology you are working on:

+ + + +
+

Note: You'll notice that the repo also contains data for Browser Extensions and HTTP. These data sets are basically finished as they stand, but more features may need to be added in the future.

+
+ +

Each file you create has to follow the pattern defined in the schema contained within our repo; you can see the detailed schema description here.

+ +

Basic compat data structure

+ +

Let's look at an example. CSS property JSON files for example need the following basic structure:

+ +
{
+  "css": {
+    "properties": {
+      "border-width": {
+        "__compat": {
+          ...
+        }
+      }
+    }
+  }
+}
+ +

You have the css object, inside of which is a properties object. Inside the properties object, you need one member for each of the specific features you want to define the compat data for. Each of these members has a __compat member, inside of which the actual data goes.

+ +

The above data is found in the border-width.json file — compare this to the rendered border-width support table on MDN.

+ +

Other types of features work in the same way, but with different object names:

+ + + +
+

In HTML, CSS, and JS pages, you'll normally only need one feature. API interfaces work slightly differently — they always have multiple sub-features (see {{anch("Sub-features")}}, below).

+ +

Basic structure inside a feature

+ +

Inside a feature __compat member, you need to include the following members:

+ + + +

The names of the browser members are defined in the schema (see Browser identifiers). You should use the full list of currently defined identifiers. If you wish to add another browser, talk to us first, as this could have a wide-ranging impact and should not be done without careful thought.

+ +

In a basic browser compat data file, you'll only need to include "version_added" inside the browser identifier members (we'll cover {{anch("Advanced cases")}} later on). The different values you might want to include are as follows:

+ + + +

Inside the status member, you'll include three submembers:

+ + + +

The feature data for border-width (also see border-width.json) is shown below as an example:

+ +
"__compat": {
+  "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width",
+  "support": {
+    "chrome": {
+      "version_added": "1"
+    },
+    "webview_android": {
+      "version_added": "2"
+    },
+    "edge": {
+      "version_added": true
+    },
+    "edge_mobile": {
+      "version_added": true
+    },
+    "firefox": {
+      "version_added": "1"
+    },
+    "firefox_android": {
+      "version_added": "1"
+    },
+    "ie": {
+      "version_added": "4"
+    },
+    "ie_mobile": {
+      "version_added": "6"
+    },
+    "opera": {
+      "version_added": "3.5"
+    },
+    "opera_android": {
+      "version_added": "11"
+    },
+    "safari": {
+      "version_added": "1"
+    },
+    "safari_ios": {
+      "version_added": "3"
+    }
+  },
+  "status": {
+    "experimental": false,
+    "standard_track": true,
+    "deprecated": false
+  }
+}
+ +

Adding a description

+ +

There is a fourth, optional, member that can go inside the __compat member — description. This can be used to include a human-readable description of the feature. You should only include this if it is hard to see what the feature is from glancing at the data. For example, it might not be that obvious what a constructor is from looking at the data structure, so you can include a description like so:

+ +
{
+  "api": {
+    "AbortController": {
+      "__compat": {
+        ...
+      },
+      "AbortController": {
+        "__compat": {
+          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
+          "description": "<code>AbortController()</code> constructor",
+          "support": {
+            ...
+          }
+        }
+      }
+
+      ... etc.
+    }
+  }
+}
+ +

Sub-features

+ +

In a page where the compat table has more than one row, you'll need multiple subfeatures inside each feature to define the information for each row. This can happen, for example, when you've got the basic support for a feature stored in one row, but then the feature also has a new property or value type that was addded much later in the specification's life and is only supported in a couple of browsers.

+ +

As an example, see the compat data and corresponding MDN page for the background-color property. The basic support exists inside the __compat object as explained above, then you have an additional row for browsers' support for "alpha channel for hex values", which contains its own __compat object.

+ +
{
+  "css": {
+    "properties": {
+      "background-color": {
+        "__compat": {
+          ...
+        },
+        "alpha_ch_for_hex": {
+          "__compat": {
+            ...
+          },
+        }
+      }
+    }
+  }
+}
+ +

For an API, you've got the top two levels defined as api.name-of-the-interface, then a top-level __compat section to define the overall browser compatibility of the interface, then a sub-feature for each of the methods, properties, and constructors contained inside the interface. The basic structure looks like this:

+ +
{
+  "api": {
+    "VRDisplay": {
+      "__compat": {
+        ...
+      },
+      "cancelAnimationFrame": {
+        "__compat": {
+          ...
+        }
+      },
+      "capabilities": {
+        "__compat": {
+          ...
+        }
+      },
+
+      ... etc.
+
+    }
+  }
+}
+ +

See VRDisplay.json for a full example.

+
+ +

Adding data: Advanced cases

+ +

There are some advanced features that you'll want to include in browser compat data. The aim of this section is to list the most common ones, providing an example of each to show how you can implement them in your own compat data.

+ +

Including a footnote

+ +

Often compat tables will include footnotes related to certain entries that explain useful details or strange behavior that developers will find useful. As an example, the Chrome Android entry for {{domxref("VRDisplay.capabilities")}} (see also VRDisplay.json)  (at the time of writing) had a footnote "Currently supported only by Google Daydream." To include this in the capabilities data, we added a "notes" submember inside the relevant "chrome_android" submember; it would look like this:

+ +
"chrome_android": {
+  "version_added": true,
+  "notes": "Currently supported only by Google Daydream."
+}
+ +

Including a vendor prefix

+ +

If a feature is supported behind a vendor prefix in one or more browsers, you'll want to make that clear in the browser compat data. imagine you had a feature that was supported with a -moz- prefix in Firefox. To specify this in the compat data, you'd need to add a "prefix" submember inside the relevant "firefox" submember. It would look something like this:

+ +
"firefox": {
+  "version_added": true,
+  "prefix": "-moz-"
+}
+ +

Including browser preferences or flags

+ +

Some features may be supported in a browser, but they are experimental and turned off by default. If a user wants to play with this feature they need to turn it on using a preference/flag.

+ +

To represent this in the compat data, you need to add the "flags" submember inside the relevant browser identifier submember. The value of "flags" is an array of objects each of which contains of three members:

+ + + +

So to add a preference/flag to the Chrome support for a feature, you'd do something like this:

+ +
"chrome": {
+  "version_added": "50",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "Enable Experimental Web Platform Features",
+      "value_to_set": "true"
+    }
+  ]
+},
+ +

If a feature is behind two or more flags, you can add additional objects to the "flags" array, like in this case, for example:

+ +
"firefox": {
+  "version_added": "57",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "dom.streams.enabled",
+      "value_to_set": "true"
+    },
+    {
+      "type": "preference",
+      "name": "javascript.options.streams",
+      "value_to_set": "true"
+    }
+  ]
+},
+ +

Including a version where support was removed

+ +

Sometimes a feature will be added in a certain browser version, but then removed again as the feature is deprecated. This can be easily represented using the "version_removed" submember, which takes as its value a string representing the version number it was removed on. For example:

+ +
"firefox": {
+  "version_added": "35",
+  "version_removed": "47",
+},
+ +

Including multiple support points for the same browser entry

+ +

Sometimes you'll want to add multiple support data points for the same browser inside the same feature.

+ +

As an example, the {{cssxref("text-align-last")}} property (see also text-align-last.json) was added to Chrome in version 35, supported behind a pref.

+ +

The support mentioned above was then removed in version 47; also in version 47, support was added for text-align-last enabled by default.

+ +

To include both of these data points, you can make the value of the "chrome" submember an array containing two support information objects, rather than just a single support information object:

+ +
"chrome": [
+  {
+    "version_added": "47"
+  },
+  {
+    "version_added": "35",
+    "version_removed": "47",
+    "flags": [
+      {
+        "type": "preference",
+        "name": "Enable Experimental Web Platform Features",
+        "value_to_set": "true"
+      }
+    ]
+  }
+],
+ +
+

Note: You should put the most current or important support point first in the array — this makes the data easier to read for people who just want to scan it for the latest info.

+
+ +

Including an alternative name

+ +

Occasionally browsers will support a feature under a different name to the name defined in its specification. This might be for example because a browser added experimental support for a feature early, and then the name changed before the spec stabilized.

+ +

To include such a case in the browser compat data, you can include a support information point that specifies the alternative name inside an "alternative_name" member.

+ +
+

Note: The alternative name might not be an exact alias — it might have differing behaviour to the standard version.

+
+ +

Let's look at an example. The {{cssxref("border-top-right-radius")}} property (see also border-top-right-radius.json) was supported in Firefox:

+ + + +

To represent this in the data, we used the following JSON:

+ +
"firefox": [
+  {
+    "version_added": "4",
+    "notes": "Prior to Firefox 50.0, border styles of rounded corners were always rendered as if <code>border-style</code> was solid. This has been fixed in Firefox 50.0."
+  },
+  {
+    "prefix": "-webkit-",
+    "version_added": "49",
+    "notes": "From Firefox 44 to 48, the <code>-webkit-</code> prefix was available with the <code>layout.css.prefixes.webkit</code> preference. Starting with Firefox 49, the preference defaults to <code>true</code>."
+  },
+  {
+    "alternative_name": "-moz-border-radius-topright",
+    "version_added": "1",
+    "version_removed": "12"
+  }
+],
+ +

Pushing a change back to the main repo

+ +

Once you are finished with adding your compat data, you should first test it using the following commands:

+ + + +

If it is looking OK, you then need to commit it and push it back up to your remote fork on GitHub. You can do this easily with terminal commands like this:

+ +
git add .
+git commit -m 'adding compat data for name-of-feature'
+git push
+ +

Now go to your remote fork (i.e. https://github.com/your-username/browser-compat-data) and you should see information about your push at the top of the files list (under "Your recently pushed branches"). You can create a pull request (starting the process of pushing this to the main repo) by pressing the "Compare & pull request" button, then following the simple prompts on the subsequent screen.

+ +

At this point, you just need to wait. A reviewer will review your pull request, and merge it with the main repo, OR request that you make changes. If changes are needed, make the changes and submit again until the PR is accepted.

+ +

Inserting the data into MDN pages

+ +

Once your new data has been included in the main repo, you can start dynamically generating browser compat tables based on that data on MDN pages using the \{{Compat}} macro. This takes a single parameter, the dot notation required to walk down the JSON data and find the object representing the feature you want to generate the compat table for.

+ +

Above the macro call, to help other contributors finding their way, you should add a hidden text that is only visible in MDN contributors in edit mode:

+ +
<div class="hidden">
+<p>The compatibility table on this page is generated from structured data.
+If you'd like to contribute to the data, please check out
+<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>
+and send us a pull request.</p>
+</div>
+ +

As an example, on the {{httpheader("Accept-Charset")}} HTTP header page, the macro call looks like this: \{{Compat("http.headers.Accept-Charset")}}. If you look at the accept-charset.json file in the repo, you'll see how this is reflected in the JSON data.

+ +

As another example, The compat table for the {{domxref("VRDisplay.capabilities")}} property is generated using \{{Compat("api.VRDisplay.capabilities")}}. The macro call generates the following table (and corresponding set of notes):

+ +
+ + +

{{Compat("api.VRDisplay.capabilities")}}

+ +
+

Note: The filenames often match the labels given to the interfaces inside the JSON structures, but it is not always the case. When the macro calls generate the tables, they walk through all the files until they find the relevant JSON to use, so the filenames are not critical. Saying that, you should always name them as intuitively as possible.

+
diff --git a/files/it/mdn_at_ten/index.html b/files/it/mdn_at_ten/index.html new file mode 100644 index 0000000000..ab7c64d1ad --- /dev/null +++ b/files/it/mdn_at_ten/index.html @@ -0,0 +1,41 @@ +--- +title: 10 anni di MDN +slug: MDN_at_ten +tags: + - History + - Landing + - MDN Meta +translation_of: MDN_at_ten +--- +

Celebra 10 anni di documentazione Web.

+ +
+
+

La storia di MDN

+ +

All'inizio del 2005 una piccola squadra di idealisti si unì per creare una nuova raccolta di risorse per gli sviluppatori web che fosse gratuita e costruita dalla comunità. Dalla loro idea tanto brillante quanto anticonformista crebbe il Mozilla Developer Network che conosciamo oggi, ovvero la principale fonte di risorse per tutte le tecnologie web aperte. Dieci anni più tardi la nostra comunità globale è più grande che mai e continuiamo ancora a creare documentazione, codice d'esempio, risorse relative a tutte le tecnologie web open, incluse CSS, HTML e Javascript, e tutti gli strumenti che rendono l'open Web all'avanguardia.

+ +

Scopri di più about the history

+ + +

Collaborare a MDN

+ +

Da dieci anni la community di MDN sta documentando l'open Web. Dalla correzione di semplici errori di battitura fino ad arrivare allo sviluppo di API completamente nuove, tutti hanno qualcosa da offrire e non esistono contributi troppo piccoli o troppo grandi. MDN annovera oltre 90.000 pagine scritte o tradotte da membri della nostra fantastica comunità di Mozillians. Anche tu puoi diventare uno di loro, anzi, uno di noi.

+ +

Scopri di più about contributing

+ +

 

+ +

 

+
+ +
{{TenthCampaignQuote}}
+ +

Vedi anche

+ +
    +
  1. 10 anni di MDN
    2. +
  2. La storia di MDN
    3. +
  3. Contribuire a MDN
    4. +
+
diff --git a/files/it/midas/index.html b/files/it/midas/index.html new file mode 100644 index 0000000000..975b7bdfa8 --- /dev/null +++ b/files/it/midas/index.html @@ -0,0 +1,330 @@ +--- +title: Midas +slug: Midas +tags: + - DOM + - Midas + - NeedsContent + - NeedsHelp + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub +translation_of: Mozilla/Projects/Midas +--- +

Introduction

+ +

Midas is the code name for Gecko's built-in rich text editor. Midas can be enabled via JavaScript on an HTML document. When Midas is enabled, the document becomes editable by the user. Scripting for Midas is based on the DHTML commands supported by Internet Explorer. Internet Explorer supports the ability to make an entire document editable by setting the designMode property of the {{domxref("document")}} object; this is how Midas is invoked in Gecko. Internet Explorer also supports the ability to edit specific elements using the contentEditable attribute; Starting with Firefox 3, Gecko also supports contentEditable. Once Midas is invoked, a few more methods of the document object become available.

+ +

Properties

+ +
+
document.designMode
+
By setting this property to "on", the document becomes editable.
+
+ +

Notes

+ +

Since an entire document becomes editable, authors often load the editable document into an IFRAME and do the bulk of the scripting in the parent document. According to standards, The IFRAME element has the contentDocument property that refers to the document in the inline frame. It also has a property called contentWindow that refers to the window object inside the inline frame. This also avoids problems with {{bug(198155)}}.

+ +

In addition to the built-in commands, advanced editing can be done by manipulating the {{domxref("Selection")}} and {{domxref("range")}} objects. It is beneficial to be familiar with these objects when working with an editable document.

+ +

Examples

+ +

This example shows the basic structure described in the Notes section :

+ +
<html>
+	<head>
+		<title>Simple Edit Box</title>
+	</head>
+	<body>
+		<iframe
+			id="MidasForm"
+			src="about:blank"
+			onload="this.contentDocument.designMode='on';"
+		></iframe>
+	</body>
+</html>
+
+ +

Methods

+ +
+
{{domxref("Document.execCommand")}}
+
Executes the given command.
+
{{domxref("Document.queryCommandEnabled")}}
+
Determines whether the given command can be executed on the document in its current state.
+
{{domxref("Document.queryCommandIndeterm")}}
+
Determines whether the current selection is in an indetermined state.
+
{{domxref("Document.queryCommandState")}}
+
Determines whether the given command has been executed on the current selection.
+
{{domxref("Document.queryCommandValue")}}
+
Determines the current value of the document, range, or current selection for the given command.
+
+ +

Supported Commands

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandValueDescription
backcolorA color code.This command will set the background color of the document.
bold If there is no selection, the insertion point will set bold for subsequently typed characters. +

If there is a selection and all of the characters are already bold, the bold will be removed. Otherwise, all selected characters will become bold.

+
contentReadOnly This command will make the editor readonly(true)or editable(false). Anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page.
copy If there is a selection, this command will copy the selection to the clipboard. If there isn't a selection, nothing will happen. +

note: this command won't work without setting a pref or using signed JS. See: more about security preferences

+ +

note: the shortcut key will automatically trigger this command (typically accel-C) with or without the signed JS or any code on the page to handle it.

+
createlinkA URI.This command will not do anything if no selection is made. If there is a selection, a link will be inserted around the selection with the url parameter as the href of the link.
cut If there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control. If there isn't a selection, nothing will happen. +

note: this command won't work without setting a pref or using signed JS. See: more about security preferences

+ +

note: the shortcut key will automatically trigger this command (typically accel-X) with or without the signed JS or any code on the page to handle it.

+
decreasefontsize This command will add a <small> tag around selection or at insertion point.
delete This command will delete all text and objects that are selected. If no text is selected it deletes one character to the right. This is similar to the Delete button on the keyboard.
fontnameA font nameThis command will set the font face for a selection or at the insertion point if there is no selection. +

The given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names.

+
fontsizeA numberThis command will set the fontsize for a selection or at the insertion point if there is no selection. +

The given number is such as would be used in the "size" attribute of the font tag.

+
forecolorA color codeThis command will set the text color of the selection or at the insertion point.
formatblockH1, H2, H3, H4, H5, H6, P, DIV, ADDRESS, BLOCKQUOTE (more?)The selection surrounded by the given block element.
headingH1, H2, H3, H4, H5, H6Selected block will be formatted as the given type of heading.
hilitecolorA color codeThis command will set the hilite color of the selection or at the insertion point. It only works with styleWithCSS enabled.
increasefontsize This command will add a <big> tag around selection or at insertion point.
indent Indent the block where the caret is located. If the caret is inside a list, that item becomes a sub-item one level deeper.
insertbronreturntrue/falseSelects whether pressing return inside a paragraph creates another paragraph or just inserts a <br> tag.
inserthorizontalrulenull/string (when string is the Line's id)This command will insert a horizontal rule (line) at the insertion point. +

Does it delete the selection? Yes!

+
inserthtmlA string.This command will insert the given html into the <body> in place of the current selection or at the caret location. +

The given string is the HTML to insert.

+
insertimageA URI.This command will insert an image (referenced by the given url) at the insertion point.
insertorderedlist Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and an OL. If the caret is inside a bulleted item, the bulleted item becomes a numbered item.
insertunorderedlist Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and UL. If the caret is inside a numbered item, the numbered item becomes a bulleted item.
insertparagraph Inserts a new paragraph.
italic If there is no selection, the insertion point will set italic for subsequently typed characters. +

If there is a selection and all of the characters are already italic, the italic will be removed. Otherwise, all selected characters will become italic.

+
justifycenter Center-aligns the current block.
justifyfull Fully-justifies the current block.
justifyleft Left-aligns the current block.
justifyright Right aligns the current block.
outdent Outdent the block where the caret is located. If the block is not indented prior to calling outdent, nothing will happen. +

If the caret is in a list item, the item will bump up a level in the list or break out of the list entirely.

+
paste This command will paste the contents of the clipboard at the location of the caret. If there is a selection, it will be deleted prior to the insertion of the clipboard's contents. +

note: this command won't work without setting a pref or using signed JS. user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); See: more about security preferences

+ +

note: the shortcut key will automatically trigger this command (typically accel-V) with or without the signed JS or any code on the page to handle it.

+
redo This command will redo the previous undo action. If undo was not the most recent action, this command will have no effect. +

note: the shortcut key will automatically trigger this command (typically accel-shift-Z)

+
removeformat Removes inline formatting from the current selection.
selectall This command will select all of the contents within the editable area. +

note: the shortcut key will automatically trigger this command (typically accel-A)

+
strikethrough If there is no selection, the insertion point will set strikethrough for subsequently typed characters. +

If there is a selection and all of the characters are already striked, the strikethrough will be removed. Otherwise, all selected characters will have a line drawn through them.

+
styleWithCSS This command is used for toggling the format of generated content. By default (at least today), this is true. An example of the differences is that the "bold" command will generate <b> if the styleWithCSS command is false and generate css style attribute if the styleWithCSS command is true.
subscript If there is no selection, the insertion point will set subscript for subsequently typed characters. +

If there is a selection and all of the characters are already subscripted, the subscript will be removed. Otherwise, all selected characters will be drawn slightly lower than normal text.

+
superscript If there is no selection, the insertion point will set superscript for subsequently typed characters. +

If there is a selection and all of the characters are already superscripted, the superscript will be removed. Otherwise, all selected characters will be drawn slightly higher than normal text.

+
underline If there is no selection, the insertion point will set underline for subsequently typed characters. +

If there is a selection and all of the characters are already underlined, the underline will be removed. Otherwise, all selected characters will become underlined.

+
undo This command will undo the previous action. If no action has occurred in the document, then this command will have no effect. +

note: the shortcut key will automatically trigger this command (typically accel-Z)

+
unlink If the insertion point is within a link or if the current selection contains a link, the link will be removed and the text will remain.
{{Deprecated_header}}
readonly This command has been replaced with contentReadOnly. It takes the same values as contentReadOnly, but the meaning of true and false are inversed.
useCSS This command has been replaced with styleWithCSS. It takes the same values as styleWithCSS, but the meaning of true and false are inversed.
+ +

 

diff --git a/files/it/midas/security_preferences/index.html b/files/it/midas/security_preferences/index.html new file mode 100644 index 0000000000..c3962fce60 --- /dev/null +++ b/files/it/midas/security_preferences/index.html @@ -0,0 +1,73 @@ +--- +title: 'Midas editor, cambiare le impostazioni di sicurezza' +slug: Midas/Security_preferences +tags: + - Firefox + - Gecko + - Midas + - Non-standard + - Sicurezza + - editor +translation_of: Mozilla/Projects/Midas/Security_preferences +--- +
+

Nota: Se hai raggiunto questa pagina da un messaggio di Firefox oppure da un altro prodotto Mozilla, prova ad utilizzare gli shortcut da tastiera : taglia,copia ed incolla :

+ + + +

Il resto delle informazioni presenti in questa pagina sono per sviluppatori web ed utenti esperti. Per favore non tentare di modificare questa pagina

+
+ +

Per proteggere la privacy degli utenti, gli scripts non autorizzati non possono invocare taglia, copia ed incolla in Midas, il text editor di Mozilla. Questo significa che i pulsanti corrispondenti in Mozilla Rich Text Editing demo page non funzioneranno. Per abilitare queste funzioni, devi modificare le preferenze del tuo browser.

+ +
+

Attenzione : Cambiando queste impostazioni, il tuo browser diventa vulnerabile, soprattutto se fornisci permessi a siti poco sicuri. Cambia questi settaggi solo se hai bisogno di testare il demo sopra oppure per testare un tuo addon per Firefox. Assicurati di ripristinare questi settaggi quando hai concluso

+
+ +

Cambiare le preferenze in Firefox

+ +
    +
  1. Chiudi Firefox. Se hai il quick launch attivo (su Windows è un icona nella toolbar), chiudi anche quella.
    2. +
  2. Cerca la directory contenente il tuo profilo Firefox
    3. +
  3. Apri il file user.js presente nella cartella in un text editor. Se il file user.js non è presente, creane uno.
    4. +
  4. Aggiungi queste righe al file user.js: + 
    user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+
    +
    5. +
  5. Modifica l' URL https://www.mozilla.org con il sito verso cui vuoi abilitare questa funzione.
    6. +
  6. Salva il file e apri Firefox. I bottoni della Clipboard nel demo, o bottoni simili nel sito da te indicato, ora dovrebbero funzionare.
    7. +
+ +
Nota: E' preferibile un sito come da protocollo specifico.. Esempio: + +
user_pref("capability.policy.allowclipboard.sites", "http://www-archive.mozilla.org")
+
+ +

non è uguale a :

+ +
user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org")
+
+ +

Questo perchè il primo esempio usa HTTP mentre il secondo usa HTTPS.

+Se vuoi consentire a multipli url di accere alla funzione "Incolla", separa gli URLs con uno spazio. Esempio : + +
user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org https://developer.mozilla.org")
+
+
+ +

Ancora, non dimenticare i rischi per la sicurezza a cui incorri e assicurati alla conclusione, di aver rimosso i permessi di accesso .

+ +

Guarda anche

+ + diff --git a/files/it/migrare_applicazioni_da_internet_explorer_a_mozilla/index.html b/files/it/migrare_applicazioni_da_internet_explorer_a_mozilla/index.html new file mode 100644 index 0000000000..83afe5e679 --- /dev/null +++ b/files/it/migrare_applicazioni_da_internet_explorer_a_mozilla/index.html @@ -0,0 +1,1268 @@ +--- +title: Migrare applicazioni da Internet Explorer a Mozilla +slug: Migrare_applicazioni_da_Internet_Explorer_a_Mozilla +tags: + - Da_unire + - Standard_Web + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Archive/Mozilla/Migrate_apps_from_Internet_Explorer_to_Mozilla +--- +

 

+ +

Introduzione

+ +

Quando Netscape diede il via al browser Mozilla, prese la decisione conscia di supportare gli standard W3C. Come risultato, Mozilla non è pienamente retrocompatibile con il vecchio codice di Netscape Navigator e Microsoft Internet Explorer; ad esempio, Mozilla non supporta <layer> come discuteremo in seguito. I browser, come Internet Explorer 4, realizzati prima della concezione degli standard W3C hanno ereditato molti comportamenti anomali (quirks). In questo articolo, descriveremo il quirks mode di Mozilla, che fornisce una forte retrocompatibiltà HTML con Internet Explorer ed altri browser datati.

+ +

Verranno considerate anche tecnologie non standard, come XMLHttpRequest ed il rich text editing, supportati da Mozilla perche' non esistevano all'epoca equivalenti del W3C. Esse includono:

+ + + +

Consigli generali di programmazione cross-browser

+ +

Anzhe se esistono gli standard Web, browser differenti si comportano in maniera differente (infatti, lo stesso browser potrebbe agire in modi diversi in base alla piattaforma). Molti browser, come Internet Explorer, supportano inoltre API precedenti a quelle definite dal W3C, e non hanno mai aggiunto un suporto estensivo per quelle definite dal W3C stesso.

+ +

Prima di entrare nello specifico delle differenze tra Mozilla ed Internet Explorer, verranno introdotti alcuni metodi base per rendere una applicazione Web estensibile in modo da aggiungere in un secondo momento il supporto per nuovi browser.

+ +

Poiché browser differenti a volte usano API differenti per le stesse funzionalità, di solito si trovano molti blocchi if() else() all'interno del codice per stabilire la differenza tra i vari browser. Il codice seguente mostra blocchi disegnati per Internet Explorer:

+ +
. . .
+
+var elm;
+
+if (ns4)
+  elm = document.layers["myID"];
+else if (ie4)
+  elm = document.all["myID"]
+
+ +

Il codice appena visto non è estensibile, perciò se si vuole supportare un nuovo browser, bisogna necessariamente aggiornare questi blocchi all'interno dell'applicazione Web.

+ +

Il modo più semplice per eliminare il bisogno di riprogrammare per un nuovo browser è asttrarre le funzionalità. Piuttosto di molteplici blocchi if() else(), è possibile aumentare l'efficienza prendendo le azioni comuni e ed astraendole dalle proprie funzioni. Non solo questeo rende il codice più facile da leggere, semplifica l'aggiunta del supporto per nuovi client:

+ +
var elm = getElmById("myID");
+
+function getElmById(aID){
+  var element = null;
+
+  if (isMozilla || isIE5)
+    element = document.getElementById(aID);
+  else if (isNetscape4)
+    element = document.layers[aID];
+  else if (isIE4)
+    element = document.all[aID];
+
+  return element;
+}
+
+ +

Il codice soprastante ha ancora il problema del browser sniffing, o le rilevazione del browser che l'utente sta usando. Il browser sniffing viene solitamente eseguito attraverso lo useragent, come ad esempio:

+ +
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016
+
+ +

Mentre l'uso dell'useragent per rilevare il browser fornisce dettagliate informazioni sul browser in uso, il codice che gestisce gli useragent è soggetto ad errori nel momento in cui arrivano nuove versioni di un browser, il che richiede un cambiamento nel codice.

+ +

Se il tipo di browser non è importante (supponiamo siano stati già bloccati i browser non supportati dall'accesso all'applicazione Web), è molto meglio e più sicuro rilevare le funzionalità del browser o il supporto di caratteristiche degli oggetti. Solitamenre è possibile fare questo testando le funzionalità richieste in JavaScript. Ad esempio, piuttosto che:

+ +
if (isMozilla || isIE5)
+
+ +

Si preferisce usare:

+ +
if (document.getElementById)
+
+ +

Questo potrebbe permettere ad altri browser che supportano i metodi standard del W3C, come Opera o Safari, di funzionare senza altri cambiamenti.

+ +

Lo sniffing dello useragent, in ogni caso, ha senso quando è importante l'accuratezza, ad esempio quando si sta verificando che un browser venga incontro ai requisiti di versione dell'applicazione Web o si sta provando ad evitare un bug.

+ +

JavaScript permette inoltre l'uso di statement condizionali abbreviati, il che può semplificare la leggibilità del codice:

+ +
 var foo = (condition) ? conditionIsTrue : conditionIsFalse;
+
+ +

Ad esempio, per ottenere un elemento, è possibile usare:

+ +
 function getElement(aID){
+   return (document.getElementById) ? document.getElementById(aID)
+                                    : document.all[aID]);
+ }
+
+ +

Oppure un'altra maniera è l'uso dell'operatore ||:

+ +
 function getElement(aID){
+   return (document.getElementById(aID)) || document.all[aID]);
+ }
+
+ +

 

+ +

Differenze tra Mozilla e Internet Explorer

+ +

Anzitutto, discuteremo le differenze nel modo in cui HTML lavora tra Mozilla ed Internet Explorer.

+ +

 

+ +

Tooltip

+ +

I browser più datati hanno introdotto i tooltip in HTML mostrandoli sui link ed usando il valore dell'attributo alt come contenuto del tooltip. Le ultile specifice del W3C hanno dato vita all'attributo title, che serve per contenere una dettagliata descrizione del link. I browser moderni useranno l'attributo title per mostrare i tooltip, e Mozilla supporta solo la visualizzazione dei tooltip per questo attributo e non per alt.

+ +

Entità

+ +

Il marcatore HTML può contenere molte entità, come definito dal W3C web standards body. Le entità possono essere riferite attraverso il loro riferimento numerico o a caratteri. Ad esempio, è possibile riferire il carattere di spazio bianco #160 con &#160;, o con il suo equivalente riferimento a caratteri &nbsp;.

+ +

Alcuni browser più vecchi, come Internet Explorer, hanno comportamenti strani che permettono l'uso di entità sostituendo il carattere ; (punto e virgola) alla fine con del testo normale:

+ +
&nbsp Foo
+&nbsp&nbsp Foo
+
+ +

Mozilla interpreterà il precedente &nbsp con spazi bianchi, anche se contro le specifiche W3C. Il browser non effettuerà il parsing di un &nbsp se è direttamente seguito da più caratteri, come ad esempio:

+ +
&nbsp12345
+
+ +

Questo codice non funziona in Mozilla, poiché contro gli standard web del W3C. Per evitare discrepanze, è buona norma usare sempre la forma corretta (&nbsp;).

+ +

Differenze del DOM

+ +

Il Document Object Model (DOM) è la 'struttura ad albero che contiene gli elemendi del documento. Si può manipolarlo tramite le API JavaScript, che il W3C ha reso standard. In ogni caso, prima della standardizzazione del W3c, Netscape 4 ed Internet Explorer 4 implementavano delle API simili. Mozilla implementa solo le vecchie API che non sono riprodotte dagli standard W3C

+ +

 

+ +

Accedere agli elementi

+ +

Per ottenere un riferimento ad un elemento usando l'approccio cross-browser, si utilizza document.getElementById(aID), che funziona in Internet Explorer 5.0 e superiori, nei browser basati su Mozilla, altri browser che si attengono allo standard W3C ed è parte delle specifiche DOM Level 1.

+ +

Mozilla non supporta l'accesso agli elementi attraverso document.elementName o anche tramite il nome dell'elemento, come accade in Internet Explorer (una pratica chiamata anche inquinamento globale dei namspace). Mozilla inoltre non supporta il metodo document.layers di Netscape 4 né il document.all di Internet Explorer. Mentre document.getElementById permette di ottenere un elemento, si possono usare document.layers e document.all per avere una lista di tutti gli elementi del documento con un certo tag, come ad esempio tutti gli elementi <div>.

+ +

I metodi del DOM Level 1 del W3c fanno riferimento a tutti gli elementi con lo stesso tag attraverso getElementsByTagName(). Il metodo ritorna un array in JavaScript, e può essere chiamato sull'elemento document o altri nodi per cercare solo un il loro sottoalbero. Per ottenenere un array di elementi nell'albero DOM, è possibile usare getElementsByTagName("*").

+ +

Come mostrato nella Tabella 1, i metodi del DOM Level1 sono comunemente usati per muovere un elemento da una certa posizione e cambiare la sua visibilità (menu, animazioni). Netscape 4 usava il tag <layer>, che non è supportato da Mozilla, dato che un elemento HTML può essere posizionato ovunque. In Mozilla, è possibile posizionare ogni elemento usando il tag <div>, che usa anche Internet Esplorer e che si trova nella specifica di HTML.

+ +

 

+ + + + + + + + + + + + + + + + + +
Tabella 1. Metodi usati per accedere agli elementi
MetodoDescrizione
document.getElementById( aId )Ritorna un riferimento all'elemento con l'ID specificato.
document.getElementsByTagName( aTagName )Ritorna un array di elementi avebti il nome specifico nel documento.
+ +

Attraversare il DOM

+ +

Mozilla supporta le API DOM W3C per attraversare l'albero DOM tramite JavaScript (vedi Tabella 2). Le API esistono per ogni nodo nel documento e permettono di esplorare l'albero in ogni direzione. Anche Internet Explorer supporta queste API, ma support anche le sue vecchie API per per l'esplorazione dell'albero DOM, come la proprietà children

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabella 2. Metodi usati per attraversare il DOM
Proprietà/MetodoDescrizione
childNodesRitorna un array di tutti i nodi figli child dell'elemento.
firstChildRitorna il primo nodo figlio dell'elemento.
getAttribute( aAttributeName )Ritorna il valore per l'attributo specifico.
hasAttribute( aAttributeName )Ritorna un valore booleano indicante se il nodo corrente ha un attributo definito con il nome specifico.
hasChildNodes()Ritorna un valore booleano se il nodo corrente ha nodi figli.
lastChildRitorna l'ultimo nodo figlio dell'elemento.
nextSiblingRitorna il nodo immediatamente seguente a quello considerato.
nodeNameRitorna il nome del nodo in forma di stringa.
nodeTypeRitorna il tipo del nodo corrente. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValoreDescrizione
1Nodo Element
2Nodo Attribute
3Nodo Text
4Nodo Sezione CDATA
5Nodo Entity Reference
6Nodo Entity
7Nodo Processing Instruction
8Nodo Comment
9Nodo Document
10Nodo Document Type
11Nodo Document Fragment
12Nodo Notation
+
nodeValueRitorna il valore del nodo corrente. Per nodi che contengono testo, ad esempio nodi text e comment, ritorna il loro valore in stringa. Per nodi attribute, viene ritornato il valore dell'attributo. Per tutti gli altri nodi, viene ritornato null.
ownerDocumentRitorna l'oggetto document contenente il nodo corrente.
parentNodeRitorna il nodo padre del nodo corrente.
previousSiblingRitorna il nodo immediatamente precedente a quello corrente.
removeAttribute( aName )Rimuove l'attributo specificato dal nodo corrente.
setAttribute( aName, aValue )Setta il valore dell'attributo specificato con il valore specificato.
+ +

Internet Explorer ha un comportamento non standard, dove molte delle API vanno ad evitare i nodi di spazi bianchi che sono generati, ad esempio, da caratteri di ritorno a capo. Mozilla non li evita, per questo alcune volte si ha bisogno di distinguere questi nodi. Ogni nodo ha una propietà nodeType che specifica il tipo di nodo. Ad esempio, un nodo element ha tipo 1, mentre un nodo text ha tipo 3 ed un nodo comment è di tipo 8. Il modo migliore per processare solo i nodi elemento è iterare su tutti i nodi figli e processare solo quelli con un nodeType di 1:

+ +

 

+ +
HTML:
+  <div id="foo">
+    <span>Test</span>
+  </div>
+
+JavaScript:
+  var myDiv = document.getElementById("foo");
+  var myChildren = myXMLDoc.childNodes;
+  for (var i = 0; i < myChildren.length; i++) {
+    if (myChildren[i].nodeType == 1){
+      // element node
+    };
+  };
+
+ +

 

+ +

Generare e manipolare contenuto

+ +

Mozilla supporta i metodi più datati per aggiungere dinamicamente contenuto al DOM, come document.write, document.open w document.close. Mozilla supporta inoltre il metodo di Internet Explorer innerHTML, che può essere richiamato su quasi tutti i nodi. Non supporta outerHTML (che aggiunge marcatori intorno all'elemento e non ha equivalenti standard) e innerText (che modifica il valore del testo del nodo ed il cui comportamento viene ripreso in Mozilla usando textContent).

+ +

Internet Explorer ha diversi metodi per la manipolazione del contenuto che non sono né standard né supportati da Mozilla, incluso la ricezione del valore, l'inserimento di testo e di elementi adiacenti ad un nodo, come getAdjacentElement e insertAdjacentHTML. La Tabella 3 mostra i modi con cui standard W3C e Mozilla manipolano il contenuto, ognuno dei quali è metodo di un nodo DOM.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabella 3. Metodi usati da Mozilla per manipolare contenuti
MetodoDescrizione
appendChild( aNode )Crea un nuovo nodo figlio. Ritorna un riferimento al nuovo nodo figlio.
cloneNode( aDeep )Crea una copia del nodo sul quale viene chiamato e ritorna la copia. Se aDeep è true, la copia viene estesa all'intero sottoalbero del nodo.
createElement( aTagName )Crea e ritorna un nuvo nodo DOM senza genitori, del tipo specificato da aTagName.
createTextNode( aTextValue )Crea e ritorna un nuovo nodo di testo DOM senza genitori, con il valore specificato da aTextValue.
insertBefore( aNewNode, aChildNode )Inserisce aNewNode prima di aChildNode, il quale deve essere figlio del nodo corrente.
removeChild( aChildNode )rimuove aChildNode e ritorna un riferimento ad esso
replaceChild( aNewNode, aChildNode )Sostituisce aChildNode con aNewNode e ritorna un riferimento al nodo rimosso.
+ +

Frammenti del documento

+ +

per ragioni di performance, è possibile creare il documento in memoria piuttosto che lavorare nel DOM del documento esistente. La specifica DOM Level 1 Core ha introdotto i document fragments (frammenti di documento), ovvero documenti leggeri che contengono un sottoinsieme della normale interfaccia del documento. Ad esempio, getElementById non esiste, al contrario di appendChild. Inoltre è possbile aggiungere facilmente frammenti di documento al documento esistente.

+ +

Mozilla crea frammenti i documento attraverso document.createDocumentFragment(), che ritorna un frammento vuoto.

+ +

L'implementazione di Internet Explorer dei frammenti, comunque, non si attiene allo standard web del W3C e semplicemente ritorna un documento regolare.

+ +

Differenze di JavaScript

+ +

Molte differenze tra Mozilla e Internet Explorer sono solitamente notate in JavaScript. IN ogni caso, ilproblema risiede solitamente nelle API che un browser fornisce a JavaScript, come ad esempio gli agganci al DOM. I due browser possiedono alcune differenze nel linguaggio JavaScript stesso; i problemi incontrati sono spesso legati a fattori temporali.

+ +

 

+ +

Differenza di Date in JavaScript

+ +

L'unica differenza di Date è il metodo getYear. Secondo le specifiche ECMAScript (che sono le specifiche seguite da JavaScript), il metodo non è Y2k-compliant, e l'esecuzione di new Date().getYear() nel 2004 ritorna "104". Per la specifica ECMAScript, getYear ritorna l'anno meno 1900, originariamente inteso come "98" per "1998". getYear è assunto come deprecato nella versione 3 di ECMAScript ed è sostituito da getFullYear(). Internet Explorer ha modificato getYear() in modo da funzionare nella stessa maniera di getFullYear() rendendolo Y2K-compliant, mentre Mozilla ha mantenuto il metodo standard.

+ +

Differenze nell'esecuzione di JavaScript

+ +

Browser differenti eseguono JavaScript in maniera differente. Ad esempio, il codice seguente assume che il nodo div esista al momento in cui il blocco di codice script viene eseguito:

+ +
...
+<div id="foo">Loading...</div>
+
+<script>
+  document.getElementById("foo").innerHTML = "Done.";
+</script>
+
+ +

Ovviamente, ciò non è garantito. Per assicurarsi che l'elemento esisya, è necessario usare il gestore di evento onload nel tag <body>:

+ +
<body onload="doFinish();">
+
+<div id="foo">Loading...</div>
+
+<script>
+  function doFinish() {
+    var element = document.getElementById("foo");
+    element.innerHTML = "Done.";
+  }
+</script>
+...
+
+ +

Problemi collegati al tempo sono inoltre legati all'hardware -- sistemi più lenti possono manifestare dei bug che invece sistemi più veloci nascondono. Un esempio concreto è window.open, che apre una nuova finestra:

+ +
<script>
+  function doOpenWindow(){
+    var myWindow = window.open("about:blank");
+    myWindow.location.href = "http://www.ibm.com";
+  }
+</script>
+
+ +

Il problema con il codice è dato dal fatto che window.open è asincrona -- non blocca l'esecuzione di JavaScript finché la finestra non ha terminato il caricamento. Per questo, è possibile eseguire le linee di codice dopo window.open anche prima che la nuova finestra abbia terminato. Si può cercare di risolvere il problema usando un gestore onload nella nuova finestra e quindi tornare indietro alla finestra progenitrice (usando window.opener)

+ +

Differenza nella generazione di HTML con JavaScript

+ +

Javascript può, attraverso document.write, generare HTML al volo da una stringa. Il primo problema qui si ha quando JavaScript, inserito all'interno del documento HTML (cioè all'interno dei tag <script>), genera HTML che contiene un tag <script>. Se il documento è nel modo di impaginazione strict, verrà effettuato il parsing di <script> all'interno della stringa fino al tag di chiusura di <script>. Il codice seguente illustra meglio questa situazione:

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+...
+<script>
+  document.write("<script type='text\/javascript'>alert('Hello');<\/script>")
+</script>
+
+ +

Dato che la pagina è in modo strict, il parser di Mozilla vedrà prima <script> ed effettuerà il parsing fino a trovare un tag di chiusura, che sarà la prima occorrenza di </script>. Questo perché il parser non è a conoscenza di JavaScript (o altri linguaggi) nella modalità strict. Nel modo quirks, il parser tiene conto di JavaScript nella sua esecuzione (il che lo rallenta). Internet Explorer è sempre in modalità quirks, poiché non supporta veramente XHTML. Per fare in modo che il funzionamento sia lo stesso in Mozilla, basta separare la stringa in due parti:

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+...
+<script>
+  document.write("<script type='text\/javascript'>alert('Hello');</" + "script>")
+</script>
+
+ +

Debug di JavaScript

+ +

Mozilla fornisce diversi modi per il debugging di problemi legati a JavaScript trovati in applicazioni create per Internet Explorer. Il primo strumento è la console JavaScript integrata, mostrata in figura 1, dove errori ed avvertenze sono registrate. Vi si può accedere in Mozilla andando su Tools -> Web Development -> JavaScript Console o in Firefox (il prodotto solo browser di Mozilla) da Tools -> JavaScript Console.

+ +


+ Figura 1. console JavaScript

+ +

Console Javascript

+ +

La console JavaScript può mostrare l'intera lista registrata o solamente errori, avvertenze e messaggi. Il messaggio di errore in Figura 1 indica che, su aol.com, la linea 95 prova ad accedere ad una variabile non definita chiamata is_ns70. Cliccando sil link si apre la finestra di visualizzazione sorgente di Mozilla con la riga interessata dall'errore evidenziata.

+ +

La console permette inoltre di valutare espressioni JavaScript. Per fare una prova della sinatssi JavaScript, inserire 1+1 nel campo di input e premere Evaluate,come mostrato dalla Figura 2.

+ +

Figura 2. valutazione di codice JavaScript

+ +

JavaScript Console evaluating

+ +

Il motore JavaScript di Mozilla ha un supporto integrato per il debugging, ovvero fornisce strumenti potenti per gli sviluppatori JavaScript. Venkman, mostrato nella Figura 3, è un potente debugger JavaScript multipiattaforma integrato con Mozilla. usualmente viene incluso insieme con le varie release di Mozilla; si può trovare in Tools -> Web Development -> JavaScript Debugger. Firefox non include ill debugger; invece, si può installarlo dalla pagina del progetto Venkman. Sono disponibili anche dei tutorial nella pagina di sviluppo, situati nella pagina di sviluppo Venkman.

+ +

Figura 3. Debugger JavaScript di Mozilla

+ +

Mozilla's JavaScript debugger

+ +

Il debugger JavaScript può effettuare il debug di JavaScript in esecuzione nella finestra browser di Mozilla. Supporta molte caratteristiche standard per il debugging, come la gestione breakpoint, l'inspezione dello stack di chiamata, e l'ispezione di variabile/oggetto. Tutte le caratteristiche sono accedibili attraverso l'interfaccia utente oppure tramite la console interattiva del debugger. Con la console, può essere eseguito codice JavaScript arbitrario nello stesso scope del codice JavaScript in corso di debugging.

+ +

Differenze sui CSS

+ +

I prodotti basati su Mozilla hanno il più forte supporto per i fogli di stile a cascata (CSS), inclusi la gran parte di CSS1, CSS2.1 e parti di CSS3, in rapporto ad Internet Explorer così come con altri browser.

+ +

Per molti dei problemi menzionati sotto, Mozilla aggiunge una riga di errore o di avvertenza nella console JavaScript. Per problemi legati a CSS, è sufficiente quindi controllare la console JavaScript.

+ +

Mimetypes (Quando i file CSS non vengono applicati)

+ +

Il più comune problema legato ai CSS è dato dal fatto che le definizioni dei CSS all'interno di file CSS referenziati non vengono applicate. Questo solitamente a causa del server che invia un errato mimetype per il file CSS. Le specifiche CSS indicano che il file CSS deve essere servito con il tipo mime text/css. Mozilla rispetta questa indicazione e carica solo file CSS con questo mimetype se la pagina web è visualizzata con in modalità strettamente standard. Internet Explorer carica sempre il file CSS, senza tenere conto del mimetype con il quale viene servito. Le pagine web vengono considerate nel modo strettamente standard quando iniziano con un doctype strict. Discuteremo dei doctype nella sezione seguente.

+ +

CSS e unità

+ +

Molte applicazioni web non usano unità con i propri CSS, specialmente se viene utilizzato Javascript per impostare i CSS. Mozilla tollera questo comportamento, nel momento in cui la pagina non viene visualizzata nel modo strict. Poiché Internet Explorer non supporta XHTML, non considera per niente se vengono specificate delle unità. Se la pagina è in modo strettamente standard, e nessuna unità viene usata, Mozilla ignora lo stile:

+ +
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+  "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+   <title>CSS and units example</title>
+  </head>
+  <body>
+    // works in strict mode
+    <div style="width: 40px; border: 1px solid black;">
+      Text
+    </div>
+
+    // will fail in strict mode
+    <div style="width: 40; border: 1px solid black;">
+      Text
+    </div>
+  </body>
+</html>
+
+ +

Dato che l'esempio mostrato ha un doctype strict, la pagina viene visualizzata con modo di impaginazione strettamente standard. Il primo div ha una lunghezza di 40px, poiché usa una unità, ma il secondo div non avrà una lunghezza, cioè tornerà alla lunghezza di default di 100%, la qual cosa accadrebbe se la stessa lunghezza fosse impostata tramite JavaScript.

+ +

JavaScript e CSS

+ +

Dato che Mozilla supporta gli standard CSS, supporta inoltre lo standard DOM CSS per impostare i CSS attraverso JavaScript. Si può accedere, rimuovere e cambiare la regola di un elemento CSS attraverso il membro style dell'elemento:

+ +
<div id="myDiv" style="border: 1px solid black;">
+  Text
+</div>
+
+<script>
+  var myElm = document.getElementById("myDiv");
+  myElm.style.width = "40px";
+</script>
+
+ +

In questo modo si può raggiungere ogni attributo CSS. Ancora, se la pagina Web è in modo strict, va impostata una unità o Mozilla ignorerà il comando. Nella richiesta di un valore, diciamo per .style.width, in Mozilla ed Internet Explorer, il valore ritornato conterrà l'unità, il che implica il ritorno di una stringa. La stringa può essere convertita attraverso parseFloat("40px").

+ +

Differenze nell'overflow dei CSS

+ +

CSS aggiunge la nozione di overflow (traboccamento), che permette di definire come gestire un traboccamento; ad esempio, quando il contenuto di un div con una specifica altezza risulta più alto. Lo standard CSS definisce che se non è impostato alcun comportamento nel caso di overflow, il contenuto del div traboccherà dallo stesso. In ogni caso, Internet Explorer non rispetta questa indicazione e va ad espandere il div oltre l'altezza impostata per poter riprendere il contenuto. Sotto un esempio che mostra la differenza:

+ +
<div style="height: 100px; border: 1px solid black;">
+  <div style="height: 150px; border: 1px solid red; margin: 10px;">
+    a
+  </div>
+</div>
+
+ +

Come si vede dalla Figura 4, Mozilla agisce secondo le specifiche dello standard W3C. Lo standard dice che, in questo caso, il div interno trabocca verso il basso poiché il suo contenuto ha una maggiore altezza relativa al suo contenitore. Se si preferisce il comportamento di Internet Explorer, semplicemente non va specificata alcuna altezza per l'elemento esterno.

+ +

Figura 4. overflow DIV

+ +

DIV Overflow

+ +

differenza di hover

+ +

Il comportamento non standard del selettore hover in Internet Exloprer si può riconoscere in diversi siti web. Usualmente si manifesta cambiando lo stile del testo se attraversato dal mouse con Mozilla, ma non con Internet Explorer. Questo perché il selettore a:hover in Internet Explorer considera <a href="">...</a> ma non <a name="">...</a>, che imposta una ancora in HTML. Il cambio di testo avviene perché gli autori incapsulano l'area con un marcatore di impostazione ancora:

+ +
CSS:
+  a:hover {color: green;}
+
+HTML:
+  <a href="foo.com">This text should turn green when you hover over it.</a>
+
+  <a name="anchor-name">
+    This text should change color when hovered over, but doesn't
+    in Internet Explorer.
+  </a>
+
+ +

Mozilla segue le specifiche CSS correttamente e cambia il colore in verde in questo esempio. SI possono usare due maniere per far agire Mozilla come Internet Explorer a non cambiare il colore del testo al passaggio del mouse:

+ + + +

Quirks vs. modo standard

+ +

Le versioni più antiquate di alcuni browser, come Internet Exlporer 4, impaginano insernedo artefatti in determinate condizioni. Mentre Mozilla tende ad essere un browser aderente agli standard, fornisce tre modi per sopportare pagine Web meno recenti realizzate con in mente questi comportamenti particolari. Recapito e contenuto della pagina determinano quale modo sarà utilizzato. Mozilla indicherà il modo di impaginazione in View -> Page Info (o premendo Ctrl+I); Firefox lo mostrerà in Tools -> Page Info.

+ +

The mode in which a page is located depends on its doctype.

+ +

Un Doctype (abbreviazione per document type declaration) è simile a questo:

+ +

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

+ +

La sezione in blu viene chiamata identificatore pubblico (public identifier), la parte vedere è l'identificatore di sistema (system identifier), nella forma di URI.

+ +

Modo standard

+ +

Il modo standard di impaginazione è qullo più restrittivo -- l'impaginazione avviene attenendosi alle specifiche HTML e CSS del W3C e non saranno supportati artefatti. Mozilla lo utilizza alle seguenti condizioni:

+ + + +

Modo quasi standard

+ +

Mozilla ha introdotto il modo quasi standard (almost standard mode) per una ragione: una sezione nella specifica CSS 2 rompe i design basati su un preciso schema fatto di piccole immagini in celle di tabelle. Invece di fornire una immagine intera all'utente, ogni piccola immagine finisce con un piccolo spazio a seguire. La vecchia homepage IBM mostrata in Figura 5 offre un esempio di questo comportamento.

+ +

Figura 5. Spazio tra immagini

+ +

Image Gap

+ +

Il modo quasi standard agisce quasi esattamente come il modo standard, fatta eccezione nel trattamento di immagini con un problema di spazio finale. Il problema occorre solitamente nelle pagine aderenti agli standard e causa la loro incorretta visualizzazione.

+ +

Mozilla usa il modo quasi standard alle seguenti condizioni:

+ + + +


+ Per altre informazioni, consultare l'articolo riguardante il problema di spazio tra immagini

+ +

Modo Quirks

+ +

Ad oggi, il Web è pieno di marcatori HTML invalidi, così come altri che funzionano solo a causa di bug di alcuni browser. I vecchi browser Netscape, nel periodo della loro leadership di mercato, contenevano bug. Quando fece il suo ingresso Internet Explorer, cercò di imitare gli stessi bug per poter funzionare con i contenuti dell'epoca. Con l'introduzione di nuovi browser nel mercato, molti di questi bug originali, solitamente chiamati quirks (artefatti), sono stati mantenuti per avere retrocompatibilità. Mozilla supporta molti di questi nel suo modo di impaginazione quirks. Si noti che a causa di questi artefatti, i documenti vengono impaginati più lentamente che se fossero stati aderenti agli standard. Molte pagine web sono trattate in questa maniera.

+ +

Mozilla usa il modo quirks alle seguenti condizioni:

+ + + +

Per approfondimenti, si vedano: Funzionamento del Quirks Mode di Mozilla e Sniffing DOCTYPE di Mozilla

+ +

Differenze nella gestione eventi

+ +

Mozilla e Internet Explorer sono completamente differenti nell'area degli eventi Il modello eventi di Mozilla segue i modelli W3C e Netscale. In Internet Explorer, se una funzione viene chiamata tramite evento, ha accesso all'oggetto event attraverso window.event Mozilla passa un oggetto event ai gestori di eventi, i quali devono specificatamente passare l'oggetto alla funzione chiamata tramite un argomento.

+ +

Ecco un esempio di gestione cross-browser (nota: implica l'impossibilità di definire una vasriabile globale chiamata event nel proprio codice):

+ +
<div onclick="handleEvent(event);">Click me!</div>
+
+<script>
+  function handleEvent(aEvent) {
+    var myEvent = window.event ? window.event : aEvent;
+  }
+</script>
+
+ +

Funzioni e proprietà esposte dell'oggetto event sono solitamente chiamate in maniera differente in Mozilla e Internet Explorer, come mostrato dalla Tabella 4.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabella 4. Differenze delle proprietà di event tra Mozilla e Internet Explorer
Nome Internet ExplorerNome MozillaDescrizione
altKeyaltKeyProprietà booleana ritornata in caso di pressione del tasto ALT durante l'evento.
cancelBubblestopPropagation()Usata per fermate la propagazione dell'evento verso la radice dell'alberoUsed to stop the event.
clientXclientXOrdinata dell'evento, in relazione al viewport dell'elemento.
clientYclientYAscissa dell'evento, in relazione al viewport dell'elemento.
ctrlKeyctrlKeyproprietà ritornata in caso di pressione del tasto CTRL durante l'evento.
fromElementrelatedTargetper eventi del mouse, l'elemento dal quale il mouse si è spostato.
keyCodekeyCodePer eventi da tastiera, il numero che rappresentante il tasto premuto. Per eventi del mouse è 0. Per eventi keypress (non keyup o keydown) riguardanti tasti che producono output, l'equivalente Mozilla è charCode, non keyCode.
returnValuepreventDefault()usato per prevenire l'esecuzione dell'azione di default dell'evento.
screenXscreenXOrdinata dell'evento, in relazione allo schermo.
screenYscreenYAscissa dell'evento, in relazione allo schermo.
shiftKeyshiftKeyProprietà booleana ritornata in caso di pressione del tasto SHIFT durante l'evento.
srcElementtargetElemento dal quale l'evento ha avuto origine.
toElementcurrentTargetPer eventi del mouse, l'elemento verso il quale il mouse si è mosso.
typetypeRitorna il nome dell'evento.
+ +

Aggiungere gestori di eventi

+ +

Mozilla supporta due modi per aggiungere eventi attraverso JavaScript. Il primo, supportato da tutti i browser, imposta le proprietà event direttamente sugli oggetti. Per impostare un gestore di evento click, un riferimento di funzione viene passato alla proprietà onclick dell'oggetto:

+ +
<div id="myDiv">Click me!</div>
+
+<script>
+  function handleEvent(aEvent) {
+    // if aEvent is null, means the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad(){
+    document.getElementById("myDiv").onclick = handleEvent;
+  }
+</script>
+
+ +

Mozilla supporta pienamente il metodo standard del W3C di aggiungere dei listener (letterarmente ascoltatori) ai nodi DOM. L'uso dei metodi addEventListener() e removeEventListener() ha il beneficio di permettere l'impostazione di molteplici listener per lo stesso tipo di evento. Entrambi i metodi richiedono tre paramentri: Il tipo di evento, una riferimento a funzione, ed un valore booleano che indica se il listener debba o meno catturare eventi nella sua fase di cattura. Se il valore del booleano è false, verranno catturati solo gli eventi propagati. Gli eventi W3C hanno tre fasi: cattura (capturing), obbiettivo (at target) e propagazione (bubbling). Ogni oggetto evet ha un attributo eventPhase che indica la fase numericamente (a partire da 0). Ogni qualvolta viene eseguito un evento, esso parte dall'elemento più esterno del DOM, quello alla radice dell'albero DOM. L'evento poi viaggia all'interno del DOM usando il percorso più diretto verso l'obbiettivo, realizzando la fase di capturing. Appena arriva, l'evento si trova nella fase obbiettivo. Dopo il suo arrivo, effettua un nuovo viaggio nell'albero verso il nodo più esterno: la fase di propagazione. Il modello eventi di Internet Explorer ha solo la fase di propagazione; questo significa che impostare il terzo parametro come false equivale ad imitare il comportamento di Internet Explorer:

+ +
<div id="myDiv">Click me!</div>
+
+<script>
+
+  function handleEvent(aEvent) {
+    // if aEvent is null, it is the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad() {
+    var element = document.getElementById("myDiv");
+    element.addEventListener("click", handleEvent, false);
+  }
+</script>
+
+ +

Un vantaggio di addEventListener() e removeEventListener() rispetto ad impostare proprietà è la possibilità di impostare molteplici listener per lo stesso evento, ognuno dei quali richiama una funzione. Per questo la rimozione di un listener richiede che i tre parametri siano gli stessi usati per la sua aggiunta.

+ +

Mozilla non supporta il metodo di Internet Explorer di conversione dei tag <script> in gestori di event, che estende <script> con gli attributi for e event (vedi Tabella 5). Inoltre non supporta i metodi attachEvent e detachEvent. Al loro posto si consiglia l'utilizzo dei metodi addEventListener e removeEventListener. Internet Explorer non supporta le specifiche degli eventi del W3C

+ + + + + + + + + + + + + + + + + + + + +
Tabella 5. Differenze dei metodi di eventi tra Mozilla e Internet Explorer
Metodo Internet ExplorerMetodo MozillaDescrizione
attachEvent(aEventType, aFunctionReference)addEventListener(aEventType, aFunctionReference, aUseCapture)Aggiunge un listener di evento ad un elemento DOM.
detachEvent(aEventType, aFunctionReference)removeEventListener(aEventType, aFunctionReference, aUseCapture)Rimuove un listener di evento da un elemento DOM.
+ +

Rich text editing

+ +

Mentre Mozilla si vanta di essere il milgior browser attinente agli standard W3C, supporta inoltre funzionalità standard, come innerHTML ed il rich text editing, nel momento in cui non esistenti equivalenti W3C.

+ +

Mozilla 1.3 ha introdotto una implementazione del designMode di Internet Explorer, che converte un documento HTML in un rich text editor. Una volta fatto questo, possono essere esguiti comandi attraverso il comando execCommand. Mozilla non supporta l'attributo contentEditable di Internet Explorer per rendere ogni widget modificabile. Si può usare un iframe per aggiungere un rich text editor.

+ +

Differenze nel Rich text

+ +

Mozilla supporta lo standard W3C per accedere all'oggetto document di un iframe attraverso IFrameElmRef.contentDocument, mentre Internet Explorer richiede l'accesso attraverso document.frames{{ mediawiki.external('\"IframeName\"') }} e poi l'accesso al document risultante.

+ +
<script>
+function getIFrameDocument(aID) {
+  var rv = null;
+
+  // if contentDocument exists, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    rv = document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    rv = document.frames[aID].document;
+  }
+  return rv;
+}
+</script>
+
+ +

Un'altra differenza tra Internet Explorer e Mozilla è nell'HTML creato dal rich text editor. Mozilla usa come modo predefinito i CSS per i marcatori generati. In ogni caso, Mozilla permette anche di scegliere tra i modi HTML e CSS usando il comando execCommand useCSS e scegliendo tra i valori true e false. Internet Explorer usa sempre il modo HTML.

+ +
Mozilla (CSS):
+  <span style="color: blue;">Big Blue</span>
+
+Mozilla (HTML):
+  <font color="blue">Big Blue</font>
+
+Internet Explorer:
+  <FONT color="blue">Big Blue</FONT>
+
+ +

Sotto una lista di comandi supportati in execCommand di Mozilla:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabella 6. Comandi rich text editing
Nome comandoDescrizioneArgomento
boldCambia l'attributo bold (grassetto) della selezione.---
createlinkgenera un link HTML dal testo selezionato.URL da usare per il link
deleteCancella la selezione.---
fontnameCambia il font usato nel testo selezionato.Nome del font da usare (ad esempio Arial)
fontsizeCambia la dimensione del font usato nel testo selezionato.Dimensione da usare
fontcolorCambia il colore del font usato nel testo selezionato.Colore da usare
indentIndenta il blocco su cui è posizionato il cursore.---
inserthorizontalruleInserisce un elemeto <hr> alla posizione del cursore.---
insertimageInserisce una immagine alla posizione del cursore.URL dell'immagine da usare
insertorderedlistInserisce un elemento di lista ordinata (<ol>) alla posizione del cursore.---
insertunorderedlistInserisce un elemento di lista non ordinata (<ul>) alla posizione del cursore.---
italicCambia l'attributo italic (corsivo) della selezione.---
justifycenterCentra il contenuto della linea corrente.---
justifyleftGiustifica il contenuto della linea corrente a sinistra.---
justifyrightGiustifica il contenuto della linea corrente a destra.---
outdentIndenta all'indietro il blocco su cui è posizionato il cursore.---
redoRiesegue un comando precedentemente annullato---
removeformatRimuove la formattazione del testo selezionato---
selectallSeleziona tutto all'interno del rich text editor.---
strikethroughCambia l'attributo strikethrough (segnato) della selezione.---
subscriptConverte la selezione corrente in pedice.---
superscriptConverte la selezione corrente in apice.---
underlineCambia l'attributo underline (sottolineato) della selezione.---
undoAnnulla l'ultimo comando eseguito---
unlinkRimuove le informazioni di link del testo selezionato.---
useCSSCambia l'uso dei CSS nel marcatore generatoValore booleano
+ +

Per altre informazioni, consultare Rich-Text Editing in Mozilla.

+ +

Differenze in XML

+ +

Mozilla ha un robusto supporto per XML e tecnologie ad esso correlato, come XSLT e Web service. Supporta inoltrer alcune estensioni non standard di Internet Explorer, come XMLHttpRequest.

+ +

Come gestire XML

+ +

Come con lo standard HTML, Mozilla supporta le specifiche W3C XML DOM, che permettono di manipolare quasi ogni aspetto di un documento XML. Differenze tra il DOM XML in Internet Explorer e Mozilla sono solitamente causate da comportamenti non standard di Internet Explorer. Probabilmente la più comune è la gestione nodi di spazi bianchi. Solitamente un documento generato in XML contiene spazi tra i nodi XML. Internet Explorer, nell'uso di Node.childNodes, non contiene tali nodi di spazio. In Mozilla, questi nodi saranno contenuti nell'array.

+ +
XML:
+  <?xml version="1.0"?>
+  <myXMLdoc xmlns:myns="http://myfoo.com">
+    <myns:foo>bar</myns:foo>
+  </myXMLdoc>
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  alert(myXMLDoc.childNodes.length);
+
+ +

La prima linea di javaScript carica il documento XML ed accede all'elemento radice (myXMLDoc) usando documentElement. La seconda linea semplicemente annuncia il numero di nodi figli. Secondo le specifiche W3C, gli spazi bianchi ed i ritorno a capo si fondono in un solo nodo di testo, se essi si susseguono. Per Mozilla, il nodo myXMLdoc ha tre figli: un nodo testo contenente un ritorno a capo e due spazi; il nodo the myns:foo: ed un altro nodo di testo con un ritorno a capo. Internet Explorer, comunque, Internet Explorer non tollera questo e ritorna "1" per il codice soprastante, indicando solo il nodo myns:foo. Per questo, per scorrere gli elementi figli evitando i nodi testo, questi vanno identificati.

+ +

Come detto prima, ogni nodo ha una proprietà nodeType rappresentante il tipo di nodo. Ad esempio, un nodo element ha tipo1, mentre un nodo document ha tipo 9. Per evitare i nodi di testo, è sufficiente controllare i tipi 3 (nodo testo) e 8 (nodo commento).

+ +
XML:
+  <?xml version="1.0"?>
+  <myXMLdoc xmlns:myns="http://myfoo.com">
+    <myns:foo>bar</myns:foo>
+  </myXMLdoc>
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  var myChildren = myXMLDoc.childNodes;
+
+  for (var run = 0; run < myChildren.length; run++){
+    if ( (myChildren[run].nodeType != 3) &&
+          myChildren[run].nodeType != 8) ){
+      // not a text or comment node
+    };
+  };
+
+ +

Vedere Spazi nel DOM per una discussione dettagliata e possibili soluzioni.

+ +

Isole dati XML

+ +

Internet Explorer ha una caratteristica non standard chiamata Isole dati XML (XML data islands), che permette di integrare XML all'interno di tag di un documento HTML. La stessa funzionalità è raggiungibile tramite l'uso di XHTML: comunque, poiché il supporto ad XHTML di Internet Explorer è debole, questa non si rivela una opzione usuale.

+ +

IE XML data island:

+ +
<xml id="xmldataisland">
+  <foo>bar</foo>
+</xml>
+
+ +


+ Una soluzione cross-browser consiste nell'usare i parser DOM, che effettuano i parsing di una stringa che contiene un documento XML serializzato e generano il documento per l'XML sottoposto al parsing. Mozilla usa l'oggetto DOMParser, che prende una stringa serializzata e genera un documento da essa. Il codice seguente mostra come:

+ +
var xmlString = "<xml id=\"xmldataisland\"><foo>bar</foo></xml>";
+var myDocument;
+
+if (window.DOMParser) {
+  // This browser appears to support DOMParser
+  var parser = new DOMParser();
+  myDocument = parser.parseFromString(xmlString, "text/xml");
+} else if (window.ActiveXObject){
+  // Internet Explorer, create a new XML document using ActiveX
+  // and use loadXML as a DOM parser.
+  myDocument = new ActiveXObject("Microsoft.XMLDOM");
+  myDocument.async = false;
+
+  myDocument.loadXML(xmlString);
+} else {
+  // Not supported.
+}
+
+ +

vedere Uso di Isole dati XML in Mozilla per un approccio alternativo.

+ +

XMLHttpRequest

+ +

Internet Explorer permette di inviare e ricevere file XML usando la classe MSXML XMLHTTP. Istanzata attraverso ActiveX usando new ActiveXObject("Msxml2.XMLHTTP") o new ActiveXObject("Microsoft.XMLHTTP"). Poiché non esiste metodo standard per fare questo, Mozilla fornisce la stessa funzionalità nell'oggetto globale XMLHttpRequest. Dalla versione 7 IE stesso supporta un oggetto XMLHttpRequest "nativo".

+ +

Dopo aver instanziato l'oggetto usando new XMLHttpRequest(), si può usare il metodo open per specificare il tipo di richiesta (GET o POST) da usare, quale file caricare, e l'asincronicità o meno della chiamata. Se la chiamata è asincrona, va dato un riferimento a funzione al membro onload, chiamato una volta completata la richiesta.

+ +

Synchronous request:

+ +
var myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "data.xml", false);
+
+myXMLHTTPRequest.send(null);
+
+var myXMLDocument = myXMLHTTPRequest.responseXML;
+
+ +

Asynchronous request:

+ +
var myXMLHTTPRequest;
+
+function xmlLoaded() {
+  var myXMLDocument = myXMLHTTPRequest.responseXML;
+}
+
+function loadXML(){
+  myXMLHTTPRequest = new XMLHttpRequest();
+  myXMLHTTPRequest.open("GET", "data.xml", true);
+  myXMLHTTPRequest.onload = xmlLoaded;
+  myXMLHTTPRequest.send(null);
+}
+
+ +

La Tabella 7 mostra a lista di metodi e proprietà disponibili per XMLHttpRequest di Mozilla.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabella 7. Proprietà e metodi XMLHttpRequest
NomeDescrizione
void abort()Ferma la richiesta se ancora in esecuzione.
string getAllResponseHeaders()Ritorna tutte le intestazioni di risposta in un'unica stringa.
string getResponseHeader(string headerName)Ritorna il valore dell'intestazione specificata.
functionRef onerrorSe impostata, la funzione riferita viene chiamata ogni qualvolta si presenta un errore durante la richiesta.
functionRef onloadSe impostata, la funzione riferita viene chiamata quando la richiesta termina con successo e viene ricevuta la risposta. Metodo usato per richieste asincrone.
void open (string HTTP_Method, string URL)
+
+ void open (string HTTP_Method, string URL, boolean async, string userName, string password)		Inizializza la richiesta per lo URL dato, usando uno dei metodi HTTP GET o POST. Per inviare la richiesta, viene chiamato il metodo send() dopo l'inizializzazione. Se async è false, la richiesta è sincrona, altrimento automaticamente asincrona. Opzionalmente, possono essere specificati username e password per lo URL se necessario.
int readyStateStato della richiesta. valori possibili: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValoreDescrizione
0UNINITIALIZED - open() non è ancora stato chiamato.
1LOADING - send() non è ancora stato chiamato.
2LOADED - send() è stato chiamato, sono disponibili stato e intestazioni.
3INTERACTIVE - In fase di download, responseText mantiene i dati parziali.
4COMPLETED - Tutte le operazioni terminate.
+
string responseTextStringa contenente la risposta.
DOMDocument responseXMLDOM Document contenente la risposta.
void send(variant body)Inizia la richiesa. Se body è definito, viene inviato come corpo della richiesta POST. body puo essere un XML document o un XML document serializzato come stringa.
void setRequestHeader (string headerName, string headerValue)Imposta una intestazione HTTP da usare per la richista. Deve essere invocato dopo la chiamata di open().
string statusCodice di stato della risposta HTTP.
+ +

Differenze in XSLT

+ +

Mozilla supporta XSL Transformations (XSLT) 1.0. Permette inoltre a JavaScript di eseguire trasformazioni XSLT e di eseguire XPath su un documento.

+ +

Mozilla richiede di inviare i file XML ed XSLT con un mimetype XML (text/xml or application/xml). Questa è la ragione più comune per cui XSLT solitamente non funziona con Mozilla ma funziona con Internet Explorer. Mozilla è molto esigente per questo.

+ +

Internet Explorer 5.0 e 5.5 supportano il working draft di XSLT, il quale è sostanzialmente differente dalla raccomandazione finale 1.0. Un semplice modo per distinguere quale versione viene utilizzata per scrivere un file XSLT è dato dal controllo del namespace. Il namespace per la raccomandazione 1.0 è http://www.w3.org/1999/XSL/Transform, mentre il namespace del draft è http://www.w3.org/TR/WD-xsl. Internet Explorer 6 supporta il draft per retrocompatibilità ma Mozilla non supporta il draft, ma solo la raccomandazione finale.

+ +

Se XSLT richiede l'identificazione del browser, è possibile interrogare la proprietà di sistema "xsl:vendor". Il motore XSLT di Mozilla dà come risposta "Transformiix", e Internet Explorer risponde "Microsoft".

+ +
<xsl:if test="system-property('xsl:vendor') = 'Transformiix'">
+  <!-- Mozilla specific markup -->
+</xsl:if>
+<xsl:if test="system-property('xsl:vendor') = 'Microsoft'">
+  <!-- Internet Explorer specific markup -->
+</xsl:if>
+
+ +

Mozilla fornisce inoltre interfacce JavaScript per XSLT, permettendo ad un sito Web di completare trasformazioni XSLT in memoria, attraverso l'oggetto globale XSLTProcessor. XSLTProcessor richiede di caricare i file XML ed XSLT, in quanto necessita i loro DOM document. Il document XSLT, importato attraverso XSLTProcessor, permette di manipolare parametri XSLT.

+ +

XSLTProcessor può generare un documento a sé usando transformToDocument(), o creare un frammento di documento tramite transformToFragment(), che può essere facilmente aggiunto ad un altro document DOM. Un esempio sotto:

+ +
var xslStylesheet;
+var xsltProcessor = new XSLTProcessor();
+
+// load the xslt file, example1.xsl
+var myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xsl", false);
+myXMLHTTPRequest.send(null);
+
+// get the XML document and import it
+xslStylesheet = myXMLHTTPRequest.responseXML;
+
+xsltProcessor.importStylesheet(xslStylesheet);
+
+// load the xml file, example1.xml
+myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xml", false);
+myXMLHTTPRequest.send(null);
+
+var xmlSource = myXMLHTTPRequest.responseXML;
+
+var resultDocument = xsltProcessor.transformToDocument(xmlSource);
+
+ +

Dopo la creazione di un XSLTProcessor, è possibile caricare un file XSLT usando XMLHttpRequest. Il membro responseXML di XMLHttpRequest contiene il documento XML per il file XSLT, il quale viene passato importStylesheet. Si può ancora usare XMLHttpRequest per caricare il documento sorgente XML da trasformare; tale documento viene passato al metodo transformToDocument metodo di XSLTProcessor. La Tabella 8 mostra una lista di metodi XSLTProcessor.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabella 8. Metodi XSLTProcessor
MethodDescrizione
void importStylesheet(Node styleSheet)Importa il foglio di stile XSLT. L'argomento styleSheet è il nodo radice del documento DOM del foglio si stile XSLT.
DocumentFragment transformToFragment(Node source, Document owner)Trasforma il nodo source applicando il foglio di stile importato tramite il metodo importStylesheet e genera un DocumentFragment. owner il documento DOM a cui DocumentFragment deve appartenere, permettendone l'aggiunta.
Document transformToDocument(Node source)Trasforma il nodo source applicando il foglio di stile importato usando importStylesheet e ritorna un documento DOM a sé.
void setParameter(String namespaceURI, String localName, Variant value)Imposta un parametro nel foglio di stile XSLT importato.
Variant getParameter(String namespaceURI, String localName)Ritorna il valore di un parametro nel foglio di stile XSLT importato.
void removeParameter(String namespaceURI, String localName)Rimuove tutti i valori impostati nel foglio di stile XSLT e riporta i parametri ai valori predefiniti
void clearParameters()Removes all set parameters and sets them to defaults specified in the XSLT stylesheet.
void reset()Rimuove tutti i parametri e fogli di stile.
+ +
+

Original Document Information

+ + +
+ +

 

diff --git a/files/it/mozilla/add-ons/index.html b/files/it/mozilla/add-ons/index.html new file mode 100644 index 0000000000..a9545252da --- /dev/null +++ b/files/it/mozilla/add-ons/index.html @@ -0,0 +1,93 @@ +--- +title: Componenti aggiuntivi +slug: Mozilla/Add-ons +tags: + - Add-ons + - TopicStub +translation_of: Mozilla/Add-ons +--- +
{{AddonSidebar}}
+ +
Modifica ed espandi le applicazioni Mozilla
+ +

I componenti aggiuntivi arricchiscono di nuove funzionalità le applicazioni basate su Gecko come Firefox, SeaMonkey e Thunderbird. Esistono due diversi tipi di componenti aggiuntivi: le estensioni che aggiungono nuove funzionalità all'applicazione, mentre i temi modificano l'interfaccia utente.

+ +

Sia le estensioni che i temi vengono raccolti in un repository gestito da Mozilla su addons.mozilla.org, noto anche come AMO. Quando uno sviluppatore sceglie di caricare un componente aggiuntivo su AMO, esso viene sottoposto a una revisione e, se la supera, pubblicato sul sito per essere scaricato dagli utenti. Sottoporre i propri componenti aggiuntivi ad AMO non è obbligatorio, tuttavia costituisce la garanzia per gli utenti che il componente sia stato revisionato e offre agli sviluppatori visibilità su una piattaforma riconosciuta come fonte di applicazioni utili.

+ +

I componenti aggiuntivi possono alterare in maniera significativa il funzionamento dell'applicazione che li ospita. Mozilla ha quindi sviluppato una serie di linee guida per assicurare che ogni componente offra all'utente un'esperienza ottimale. Queste linee guida sono valide per tutti i tipi di componente aggiuntivo, che siano ospitati sul server di addons.mozilla.org o meno.

+ +
+

Estensioni

+ +

Le estensioni aggiungono nuove funzionalità alle applicazioni sviluppate da Mozilla come Firefox o Thunderbird. Possono integrare il browser con funzioni particolari, come per esempio un sistema alternativo per gestire le schede, e modificare i contenuti web per migliorare l'accessibilità o la sicurezza di un sito particolare.

+ +

Le estensioni possono essere sviluppate con tre tecniche diverse: estensioni basate su Add-on SDK, estensioni che si avviano manualmente senza richiedere il riavvio del browser ed estensioni overlay.

+ + + +

Quando possibile, è consigliabile utilizzare Add-on SDK, che sfrutta lo stesso meccanismo delle estensioni con riavvio non richiesto ma semplificando alcune operazioni ed eliminando automaticamente il codice superfluo. In caso Add-on SDK non soddisfi le proprie esigenze, l'alternativa è implementare manualmente un'estensione con riavvio non richiesto. Le estensioni overlay sono attualmente obsolete, anche se ne rimane in circolazione un numero elevato.

+ +

Per un approfondimento su quale tecnica sia più opportuno scegliere, ecco un articolo comparativo.

+ +
+
+

Pratiche consigliate

+ +

Indipendentemente dalle modalità con cui si sceglie di sviluppare un'estensione, esistono linee guida comuni da rispettare per garantire che il proprio componente offra la migliore esperienza utente possibile.

+ +
+
Prestazioni
+
Come rendere un'estensione veloce, reattiva e ottimizzata nel consumo della memoria.
+
Sicurezza
+
Come evitare di esporre l'utente a siti dannosi.
+
Etichetta
+
Come gestire l'interazione con altre estensioni correttamente.
+
+
+ +
+

Nozioni specifiche per applicazione

+ +

La maggior parte della documentazione è scritta pensando a chi sviluppa per Firefox Desktop. Gli sviluppatori che intendono progettare per altre applicazioni basate su Gecko devono prendere atto di alcune differenze fondamentali.

+ +
+
Thunderbird
+
Sviluppare estensioni per il client di posta elettronica Thunderbird.
+
Firefox per Android
+
Sviluppare estensioni per la versione di Firefox per il sistema operativo Android.
+
SeaMonkey
+
Sviluppare estensioni per la suite di applicazioni SeaMonkey.
+
+
+
+ +
+

Temi

+ +

I Temi sono componenti aggiuntivi in grado di personalizzare l'interfaccia utente dell'applicazione. Esistono due tipi di tema: temi di sfondo (o semplicemente "temi") e temi completi.

+ +
+
+

I temi di sfondo sono significativamente più semplici da implementare rispetto ai temi completi, ma offrono un livello di personalizzazione più limitato.

+
+ +
+

I temi completi consentono modifiche più radicali all'interfaccia utente dell'applicazione. La documentazione sui temi completi è attualmente incompleta, ma viene qui citata in previsione di futuri aggiornamenti.

+
+
+ +
+

Altri tipi di componente aggiuntivo

+ +

I plugin dei motori di ricerca sono un tipo di componente aggiuntivo semplice e specifico: aggiungono nuovi motori alla barra di ricerca del browser.

+ +

I plugin consentono all'applicazione di elaborare contenuti non supportati nativamente. Mozilla sta tentando di scoraggiare l'implementazione dei plugin, che hanno in passato causato problemi di stabilità, prestazioni e sicurezza.

+ +
diff --git a/files/it/mozilla/add-ons/kaspersky/index.html b/files/it/mozilla/add-ons/kaspersky/index.html new file mode 100644 index 0000000000..dd6dcd576c --- /dev/null +++ b/files/it/mozilla/add-ons/kaspersky/index.html @@ -0,0 +1,82 @@ +--- +title: Firma e distribuzione del vostro componente aggiuntivo +slug: Mozilla/Add-ons/kaspersky +translation_of: Mozilla/Add-ons/Distribution +--- +

Dopo che avete compilato il vostro add-on, voi vorrete distribuirlo di modo che gli altri possano provarlo. Sia che vogliate distribuirlo pubblicamente o privatamente, attraverso addons.mozilla.org (AMO) o altrove, voi vorrete avere il vostro pacchetto add-on firmato.

+ +

Firmare il vostro add-on

+ +

Ad iniziare dalla versione n. 43 di Firefox, esistono delle restrizioni per distribuire un componente aggiuntivo. Le estensioni e i programmi di installazione multipackage che supportano Firefox devono essere firmati da Mozilla affinché possano essere installati nelle versioni beta e di rilascio di Firefox. Si noti che questo si applica solo ai componenti aggiuntivi di tipo 2 e 32; altri tipi di componenti aggiuntivi come temi e language pack non richiedono la firma. Sono esclusi anche i componenti aggiuntivi che supportano solo altre applicazioni come Thunderbird e SeaMonkey. I componenti aggiuntivi non firmati possono ancora essere installati nelle versioni Developer Edition, Nightly e versioni ESR di Firefox, dopo aver attivato la preferenza xpinstall.signatures.required in about: config.

+ +

Solo Mozilla può firmare il componente aggiuntivo in modo che Firefox lo installi per impostazione predefinita.I componenti aggiuntivi vengono firmatisubmitting them to AMO o utilizzando l'API e passando una revisione automatica o manuale del codice. Si noti che non è necessario elencare o distribuire il componente aggiuntivo tramite AMO. Se stai distribuendo il componente aggiuntivo da soli, di può scegliere l'opzione Unlisted e AMO servirà solo per firmare il pacchetto contenente il componente aggiuntivo.

+ +

API per la firma

+ +

Voi potete firmare il vostro file XPI usando le addons.mozilla.org signing API. Se usate il tool jpm, il comando jpm sign utilizza le API per firmare il vostro componente aggiuntivo.

+ +

Inviare ad AMO

+ +

Il nuovo componente aggiuntivo è inviato ad AMO tramite questa form di invio. Il primo passo è leggere e poi accettare Developer Agreement.

+ +

Successivamente, dovrete decidere se vorrete distribuire e pubblicizzare il vostro componente aggiuntivo tramite AMO oppure no. Ecco alcune cose da prendere in considerazione per prendere questa decisione:

+ + + +

You should make this decision carefully, as it isn't easy to switch between Listed and Unlisted at present. Due to some platform limitations, in order to make the switch you'll need to delete your add-on entry and then contact the AMO Admins list in order to enable your add-on ID so you can submit it again. You should also know that if you switch from Listed to Unlisted, your current users won't be automatically migrated to the unlisted versions of your add-on. Switching from Unlisted to Listed is easier because Firefox will check for updates on AMO if an add-on doesn't have an updateURL in its install manifest.

+ +

Unlisted add-ons

+ +

After accepting the Developer Agreement, you'll be asked if you want to list your add-on on AMO. Make sure you choose not to list it.

+ +

You'll then be asked if you want your add-on to be side-loaded or not. Side-loading is when your add-on XPI isn't installed directly by users but instead it is bundled in an application installer. An example of this would be an antivirus software package that includes a companion security extension. If your add-on XPI will be installed directly from the web or downloaded and installed manually by your users, then you don't need this option.

+ +
+

Internally, AMO labels unlisted add-on submissions that require side-loading as Full Review submissions, and all the rest as Preliminary Review submissions. You may find these labels when looking at your add-on review status. Note that there's no difference between full and preliminary review for unlisted add-ons, other than the ability to side-load the add-on.

+
+ +

Choose the platforms your add-on supports and upload your XPI. The file will be scanned by an automatic code validator which will show a number or warnings or errors depending on what it detects. If no errors are found in your package, your add-on management page will be created and your file will be immediately signed. You'll receive an email with instructions on how to download the signed file.

+ +

All new versions of your add-ons will also need to signed. Once your first version has been submitted, you can upload new versions in the developer page for your add-on.  The signing process is the same as with new add-ons.

+ +

Listed add-ons

+ +

After accepting the Developer Agreement, you'll be asked if you want to list your add-on on AMO. Listing it should be the default option.

+ +

Choose the platforms your add-on supports and upload your XPI. The file will be scanned by an automatic code validator which will show a number of warnings or errors depending on what it detects. Errors only show up for listed add-ons if there's something wrong in the package that needs to be fixed before it can be accepted. Warnings can vary in importance and severity; you should read through all of them carefully and see if there's anything you can fix in your add-on in order to avoid them showing up. This doesn't mean that you should obfuscate your code to bypass validation warnings. That practice can lead to your add-on being rejected and potentially blocklisted.

+ +

Once you finish your listed add-on submission, it will be placed in a review queue, where one member of our review team will eventually give it a look. This can take between a couple of hours to a number of weeks, depending on add-on complexity and other factors. It also takes longer for the first submission, since all of the code needs to be reviewed. Updates are reviewed based on a diff, so they are quicker. Once your add-on passes review, the file is signed and published on AMO.

+ +

Listed add-ons can be submitted for Preliminary Review or Full Review.  Preliminary Review consists of security and content checks, focused on the add-on's code. Full Review is a higher standard, and reviews include feature testing and performance checks. Add-ons with Full Review have more prominence on the site and can be nominated to be featured. Add-ons that are nominated for Full Review and don't meet that standard may receive Preliminary Review approval instead.

+ +

Beta versions

+ +

Beta channels are only available to fully-reviewed add-ons.

+ +

To create a beta channel, upload a file with a unique version string that contains any of the following strings: a,b,alpha,beta,pre,rc, with an optional number at the end. This text must come at the end of the version string. If you understand regex format, here's what we look for in the version number: "(a|alpha|b|beta|pre|rc)\d*$".

+ +

Once a file meeting this criteria is uploaded to AMO, it will automatically be detected as a beta version. Users of add-ons with these unique version numbers will automatically be served the newest beta updates. Beta versions are treated like unlisted add-on versions, in that they will be accepted and signed immediately if they pass automatic validation.

+ +

While we call these "Beta versions", you can use this channel for nightlies, or alphas, or prerelease versions as you wish. Please note that there is only one channel for this purpose and all of your users on this channel will receive the latest add-ons submitted. For instance, if you upload 1.0beta1 to the release channel and then upload 1.1alpha1, all users of 1.0beta1 will be offered an upgrade to 1.1alpha1. Updates are pushed by submission date and not version number, so users will always get the most recent channel update regardless of any kind of alphabetical sorting.

+ +

Ownership

+ +

Add-ons can have multiple users with permission to update and manage the listing. Existing authors of an add-on can transfer ownership and add additional developers to an add-on's listing through the Developer Tools provided. No interaction with Mozilla representatives is necessary for a transfer of ownership.

+ +

Code disputes

+ +

Many add-ons allow their source code to be openly viewed. This does not mean that the source code is open source or available for use in another add-on. The original author of an add-on retains copyright of their work unless otherwise noted in the add-on's license.

+ +

In the event that we're notified of a copyright or license infringement, we will take steps to address the situation per the DMCA, which may include taking down the add-on listing. Details about this process and how to report trademark or licensing issues can be found here.

+ +

If you are unsure of the current copyright status of an add-on's source code, you must contact the original author and receive explicit permission before using the source code.

diff --git a/files/it/mozilla/add-ons/overlay_extensions/firefox_addons_developer_guide/index.html b/files/it/mozilla/add-ons/overlay_extensions/firefox_addons_developer_guide/index.html new file mode 100644 index 0000000000..eef336d088 --- /dev/null +++ b/files/it/mozilla/add-ons/overlay_extensions/firefox_addons_developer_guide/index.html @@ -0,0 +1,29 @@ +--- +title: Firefox addons developer guide +slug: Mozilla/Add-ons/Overlay_Extensions/Firefox_addons_developer_guide +translation_of: Archive/Add-ons/Overlay_Extensions/Firefox_addons_developer_guide +--- +
+
+ La guida per sviluppatori Firefox Add-ons è stata inviata da nostra comunità del Giappone; Esso copre come andare sulla creazione di estensioni per Firefox utilizzando XPCOM e XUL. In questi giorni, si consiglia di utilizzare invece il SDK del componente aggiuntivo, ma ci sono momenti quando è necessario il controllo aggiuntivo offerto da un approccio più diretto.
+
+
+ {{Next ("Firefox addons sviluppatore guida/introduzione alle estensioni")}}
+
+
    +
  1. Introduzione alle estensioni
    2. +
  2. Tecnologie utilizzate nello sviluppo di estensioni
    3. +
  3. Introduzione a XUL — come costruire un'interfaccia utente più intuitiva
    4. +
  4. Utilizzando XPCOM — implementazione avanzata di processi
    5. +
  5. Costruiamo un'estensione per Firefox
    6. +
  6. Applicazioni XUL e estensioni di Firefox
    7. +
+
+ +
+
+ {{Next ("Firefox addons sviluppatore guida/introduzione alle estensioni")}}
+
+

 

diff --git a/files/it/mozilla/add-ons/overlay_extensions/index.html b/files/it/mozilla/add-ons/overlay_extensions/index.html new file mode 100644 index 0000000000..6b6ac40112 --- /dev/null +++ b/files/it/mozilla/add-ons/overlay_extensions/index.html @@ -0,0 +1,71 @@ +--- +title: Overlay extensions +slug: Mozilla/Add-ons/Overlay_Extensions +tags: + - Add-ons + - Extensions + - Landing + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons/Overlay_Extensions +--- +

This page contains links to documentation for the approach to developing extensions for Gecko-based applications which uses:

+ +

Before Gecko 2.0 was released this was the only way to develop extensions. Now there are two alternative techniques: restartless extensions and Add-on SDK-based extensions. The privileged JavaScript APIs described here can still be used by the newer techniques.

+

XUL School

+

XUL School is a comprehensive add-on development tutorial, focusing on Firefox extension development but mostly applicable to other Gecko-based applications.

+

More resources

+
+
+
+
+ Setting up your environment
+
+ Setting up the application for extension development.
+
+ XUL
+
+ Tutorials and reference for the user interface language used by XUL extensions.
+
+ Code snippets
+
+ Sample code for many of the things you'll want to do.
+
+ Installing extensions
+
+ How to install an extension by copying the extension files into the application's install directory.
+
+ Firefox add-ons developer guide
+
+ A guide to developing overlay extensions.
+
+
+
+
+
+ JavaScript code modules
+
+ JavaScript modules available to extension developers.
+
+ Extension preferences
+
+ How to specify the preferences for your extension that will appear in the Add-ons Manager.
+
+ Frequently Asked Questions
+
+ Common issues with extension development.
+
+ Extension packaging
+
+ How extensions are packaged and installed.
+
+ Binary Firefox extensions
+
+ Creating binary extensions for Firefox.
+
+
+
+

 

diff --git a/files/it/mozilla/add-ons/overlay_extensions/xul_school/getting_started_with_firefox_extensions/index.html b/files/it/mozilla/add-ons/overlay_extensions/xul_school/getting_started_with_firefox_extensions/index.html new file mode 100644 index 0000000000..3857bb6773 --- /dev/null +++ b/files/it/mozilla/add-ons/overlay_extensions/xul_school/getting_started_with_firefox_extensions/index.html @@ -0,0 +1,71 @@ +--- +title: Getting Started with Firefox Extensions +slug: >- + Mozilla/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions +--- +

{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}

+

Che cos'è un'estensione di Firefox?

+
+

Le estensioni aggiungono funzionalità alle applicazioni di Mozilla come Firefox e Thunderbird. Possono aggiungere qualsiasi cosa da un pulsante sulla barra degli strumenti a funzionalità completamente nuove. Permettono di personalizzare l'applicazione per soddisfare le necessità personali di qualsiasi utente che le necessiti, permettendo comunque di mantenere dimensioni ridotte.

+
+

Tratto dalla Pagina della estensioni.

+

Come descritto nel testo virgolettato, un'estensione è una piccola applicazione che aggiunge qualcosa di nuovo a una o più applicazioni Mozilla. Questo corso si focalizza sulle estensioni per Firefox, ma gli stessi principi sono validi (quasi identicamente) per qualsiasi altra applicazione come per esempio,Thunderbird, Seamonkey e Flock.

+

Vale la pena notare che ci sono delle differenze nelle definizioni di estensione e add-on. Tutte le estensioni sono degli add-ons, ma gli add-ons possono anche essere temi, plugin o traduzioni (language packs). Questo corso riguarda lo sviluppo delle applicazioni, ma anche i temi e i language pack si sviluppano in modo molto simile. I plugin sono tutt'altra cosa e non saranno spiegati in questo corso. Puoi trovare più informazioni sui plugin e il loro sviluppo nella pagina dei plugins.

+

Firefox provides a very rich and flexible architecture that allows extension developers to add advanced features, customize the user's experience, and completely replace and remove parts of the browser. The Mozilla Add-ons repository (AMO) holds an extensive number of extensions with a wide variety of functions: content filtering (AdBlock Plus, NoScript), web application interaction (Delicious Bookmarks, eBay Companion) and web development (DOM Inspector, Firebug). These are very advanced and complex extensions, and you'll learn most of what it takes to create extensions like these (Glaxstar actually worked on 3 of those listed).

+

Extensions now exist in 3 different forms: Add-ons SDK extensions (also known as Jetpacks), bootstrapped extensions and traditional extensions. If you're only getting started developing add-ons, the Add-ons SDK provides a great way to quickly create simple ones and build on them. This tutorial focuses on traditional extensions, which are created differently. Bootstrapped extensions are a step above traditional ones in complexity, so you should go through this tutorial before giving them a try.

+

We'll begin the tutorial by analyzing a very simple extension.

+

The Hello World Extension

+

Our sample extensions and this tutorial in general are meant for modern versions of Firefox, but most of it works on older versions too.

+

We'll now begin with a basic "Hello World" extension. Let's start by installing it. Click on the link below.

+

Install Hello World

+

This will either trigger an install or a file download, depending on the content type the web server is using for the file. The appropriate content type to trigger an install is application/x-xpinstall. In the case of this wiki, the content type is properly set and a install window should appear.

+

If the content type is set correctly, you will probably get notified that the site is not allowed to install add-ons on Firefox. This is a security barrier that prevents sites from installing extensions without user consent. It is necessary because malicious extensions can do the same level of harm as any malicious program: stealing data, erasing or replacing files, and causing unwanted behavior in general. AMO is the only pre-allowed site because all published add-ons on AMO have gone through a review process that includes security checks.

+

After downloading the file, you can drag and drop it into the Firefox content area, and installation should begin.

+

You'll see a window telling you that you're about to install an extension, with some additional information such as the name of the author. You'll see a message saying that the author cannot be verified. Only extensions signed with a digital certificate can verify authorship. Signed extensions are rare, but we'll cover how to sign them later on.

+

Click on the Install Now button. After the extension is installed, you'll be asked to restart Firefox. Installing, uninstalling, enabling and disabling add-ons require a restart to complete, with the exception of NPAPI plugins, Add-ons SDK extensions and bootstrapped extensions. This is an important point to keep in mind if you're building an extension that manipulates other extensions or themes.

+

After installing, look at the main Firefox window and see if you notice anything different.

+

Did you see it? There's a new menu on the main menu, labeled "Hello World!". If you open the menu and then the menu item below, you'll see a nice alert message (for some definitions of 'nice'). Click on the OK button to close it.

+

+

That's all the extension does. Now let's take a closer look at it.

+

Extension Contents

+

You may have noticed that the extension file you installed is named xulschoolhello1.xpi. XPI (pronounced "zippy") stands for Cross-Platform Installer, because the same installer file can work on all platforms Firefox supports. XPIs are simply ZIP files, but Firefox recognizes the XPI extension and triggers the installation process when an XPI file is loaded.

+

To look into the XPI file you need to download it first, not install it. If the server triggers an install when clicking on a link or button, what you need to do is right click on the install link, and choose the Save Link As... option.

+

Decompress the XPI file in a convenient location. Issue the following command to unzip the file on Linux or Mac OS X:

+
unzip xulschoolhello1.xpi -d xulschoolhello1
+
+

On Windows, you can change the file extension from xpi to zip, or open the file directly, then unzip it, using a ZIP tool.

+

You should see the following directory structure:

+ +

That's lots of files for something so simple! In the next section, we'll inspect these files and see what they do.

+

{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}

+

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/it/mozilla/add-ons/overlay_extensions/xul_school/index.html b/files/it/mozilla/add-ons/overlay_extensions/xul_school/index.html new file mode 100644 index 0000000000..085c07b26f --- /dev/null +++ b/files/it/mozilla/add-ons/overlay_extensions/xul_school/index.html @@ -0,0 +1,71 @@ +--- +title: XUL School Tutorial +slug: Mozilla/Add-ons/Overlay_Extensions/XUL_School +tags: + - Add-ons + - Extensions + - NeedsTranslation + - References + - TopicStub + - Tutorials + - XUL +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School +--- +

XUL School è una guida per lo sviluppo di estensioni, che si focalizza sulla creazione di estensioni per Firefox. Si raccomanda di leggere almeno una volta tutto il contenuto. Il contenuto di questa guida sarà aggiornato e valido, anche mentre Firefox cambia rapidamente.

+ +
+
Introduzione
+
+ +
+
Basic functionality
+
+ +
+
Intermediate functionality
+
+ +
+
Advanced topics
+
+ +
+
Appendices
+
+ +
+
+ +

The XUL School project was developed by Appcoast (formerly Glaxstar). The project is now published here following its sharing licenses. Its contents have been modified from the original source as necessary.

diff --git a/files/it/mozilla/add-ons/performance_best_practices_in_extensions/index.html b/files/it/mozilla/add-ons/performance_best_practices_in_extensions/index.html new file mode 100644 index 0000000000..6908930ec7 --- /dev/null +++ b/files/it/mozilla/add-ons/performance_best_practices_in_extensions/index.html @@ -0,0 +1,104 @@ +--- +title: Performance best practices in extensions +slug: Mozilla/Add-ons/Performance_best_practices_in_extensions +translation_of: Archive/Add-ons/Performance_best_practices_in_extensions +--- +

+ One of Firefox's great advantages is its extreme extensibility. Extensions + can do almost anything. There is a down side to this: poorly written + extensions can have a severe impact on the browsing experience, including on + the overall performance of Firefox itself. This article offers some best + practices and suggestions that can not only improve the performance and speed + of your extension, but also of Firefox itself. +

+ +

Improving startup performance

+ +

Extensions are loaded and run whenever a new browser window opens. That means every time a window opens, your extension can have an impact on how long it takes the user to see the content they're trying to view. There are several things you can do to reduce the amount of time your extension delays the appearance of the user's desired content.

+ +

Load only what you need, when you need it

+ +

Don't load things during startup that are only needed if the user clicks a button, or if a given preference is enabled when it's not. If your extension has features that only work when the user has logged into a service, don't load the resources for those features until the user actually logs in.

+ +

Use JavaScript code modules

+ +

You can create your own JavaScript code modules incorporating sets of features that are only needed under specific circumstances. This makes it easy to load chunks of your extension on the fly as needed, instead of loading everything all at once.

+ +

+ While JavaScript modules can be extremely useful, and provide significant performance benefits, they should be used wisely. Loading modules incurs a small cost, so breaking code up to an unnecessary degree can be counter-productive. Code should be modularized to the extend that doing so increases clarity, and loading of large or expensive chunks of code fragments can be significantly deferred. +

+ +

Defer everything that you can

+ +

Most extensions have a load event listener in the main overlay that runs their startup functions. Do as little as possible here. The browser window is blocked while your add-on's load handler runs, so the more it does, the slower Firefox will appear to the user.

+ +

If there is anything that can be done even a fraction of a second later, you can use an {{ interface("nsITimer") }} or the {{ domxref("window.setTimeout()") }} method to schedule that work for later.  Even a short delay can have a big impact.

+ +

General Performance Tips

+ +

Avoid Creating Memory Leaks

+ +

Memory leaks require the garbage collector and the cycle collector to work harder, which can significantly degrade performance.

+ +

Zombie compartments are a particular kind of memory leak that you can detect with minimal effort.  See the Zombie compartments page, especially the Proactive checking of add-ons section.

+ +

See Common causes of memory leaks in extensions for ways to avoid zombie compartments and other kinds of leaks.

+ +

As well as looking for these specific kinds of leaks, it's worth exercising your extension's functionality and checking the contents of about:memory for any excessive memory usage.  For example, bug 719601 featured a "System Principal" JavaScript compartment containing 100s of MBs of memory, which is much larger than usual.

+ +

Avoid Writing Slow CSS

+ + + +

Avoid DOM mutation event listeners

+ +

DOM mutation event listeners are extremely expensive and, once added to a document even briefly, significantly harm its performance. As mutation events are officially deprecated, and there are many alternatives, they should be avoided at all costs.

+ +

Lazily load services

+ +

The XPCOMUtils JavaScript module provides two methods for lazily loading things:

+ + + +

Many common services are already cached for you in Services.jsm.

+ +

Use asynchronous I/O

+ +

This cannot be stressed enough: never do synchronous I/O on the main thread.

+ +

Any kind of I/O on the main thread, be it disk or network I/O, can cause serious UI responsiveness issues.

+ + + +

Avoid mouse movement events

+ +

Avoid using mouse event listeners, including mouseover, mouseout, mouseenter, mouseexit, and especially mousemove. These events happen with high frequency, so their listeners can trivially create very high CPU overhead.

+ +

When these events cannot be avoided, computation during the listeners should be kept to a minimum and real work throttled. The listeners should be added to the most specific element possible, and removed when not immediately necessary.

+ +

Avoid animated images

+ +

Animated images are much more expensive than generally expected, especially when used in XUL {{ XULElem("tree") }} elements..

+ +

Consider using Chrome Workers

+ +

You can use a {{ domxref("ChromeWorker") }} to execute long running tasks or do data processing.

+ +

See also

+ + diff --git a/files/it/mozilla/add-ons/sdk/builder/index.html b/files/it/mozilla/add-ons/sdk/builder/index.html new file mode 100644 index 0000000000..a28a909dd4 --- /dev/null +++ b/files/it/mozilla/add-ons/sdk/builder/index.html @@ -0,0 +1,13 @@ +--- +title: Builder +slug: Mozilla/Add-ons/SDK/Builder +translation_of: Archive/Add-ons/Add-on_SDK/Builder +--- +

Add-on Builder era un ambiente di sviluppo web-based che permetteva agli sviluppatori usando le SDK API, ma senza il bisogno di utilizzare lo strumento linea di comando cfx. È stato dismesso l'1 Aprile 2014, e il dominio "builder.addons.mozilla.org" adesso reindirizza a questa pagina.
+
+ Se hai già usato SDK attraverso il builder, conosci già la maggior parte delle cose di cui hai bisogno per sviluppare usando solo SDK. Le high-level e le low-level API usate per il Builder sono esattamente le stesse. Per passare all'SDK:

+ diff --git a/files/it/mozilla/add-ons/sdk/guide/index.html b/files/it/mozilla/add-ons/sdk/guide/index.html new file mode 100644 index 0000000000..82e8c97f15 --- /dev/null +++ b/files/it/mozilla/add-ons/sdk/guide/index.html @@ -0,0 +1,114 @@ +--- +title: Guide +slug: Mozilla/Add-ons/SDK/Guide +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Guides +--- +

Questa pagina contiene più articoli approfonditi sull'SDK.

+ +
+

Contributor's guide

+ +
+
+
+
Per cominciare
+
Scopri come contribuire all'SDK: ottieni il codice sorgente, apri/lavora su un bug, presenta una patch, ottieni recensioni e aiuto.
+
Moduli
+
Impara di più sul sitema a moduli usato dall'SDK (che è basato sulla specifica CommonJS), su come i sandbox e i compartimenti possono essere usati per migliorare la sicurezza, o sull'SDK Module Loader incorporato, Cuddlefish.
+
Classi ed ereditarietà
+
Impara come le classi e l'ereditarietà può essere implementata in JavaScript, usando costruttori e prototipi, e su come la funzione di aiuto fornita dall'SDK semplifica tutto ciò.
+
+
+ +
+
+
Proprietà Private
+
Scopri come le proprietà private possono essere implementate in JavaScript usando prefissi, chiusure (closures), e le WeakMaps, e come l'SDK supporta le proprietà private usando i namespace (che sono una generalizzazione delle WeakMaps).
+
Content Processes
+
L'SDK è stata concepita per lavorare in un ambiente dove il codice per manipolare il contenuto web viene eseguito in un processo diverso dal codice principale del componente aggiuntivo. Questo articolo mette in risalto le funzioni principali di questo design.
+
Testare il Componente Aggiuntivo nell'SDK
+
Impara come eseguire il Componente Aggiuntivo nella suite per il testing contenuta nell'SDK.
+
+
+
+ +
+

Strutture dell'SDK

+ +
+
+
+
Struttura a moduli dell'SDK
+
L'SDK, e i Componenti Aggiuntivi sviluppati con esso, sono formati a partire da moduli riusabili di JavaScript. Questo articolo spiega cosa sono questi moduli, come caricare i moduli, e come l'albero dei moduli dell'SDK è strutturato.
+
Ciclo Vitale delle API dell'SDK
+
Definizione di ciclo vitale per le API dell'SDK, incluso il rating di stabilità.
+
+
+ +
+
+
Program ID
+
Il Program ID è un identificativo unico per il tuo Add-on. Questa guida spiega come è creato, come viene usato e come crearne uno tuo.
+
Compatibilità con Firefox
+
Controlla quale versione di Firefox è compatibile con la versione dell'SDK in uso, e controlla i problemi di compatibilità.
+
+
+
+ +
+

Linguaggi dell'SDK

+ +
+
+
+
Lavorare con gli Eventi
+
Scrivi codice attraverso gli Eventi. L'SDK ti permette di fare ciò usando il suo framework concepito per lavorare con gli eventi.
+
Guida sui Content Scripts
+
Una panoramica sui content scripts, includendo: cosa sono, cosa possono fare, come caricarli e come comunicare con loro.
+
+
+ +
+
+
Due tipi di script
+
Questo articolo illustra le differenze tra le API disponibili al codice principale del tuo Add-On e quelle disponibili ai Content Scripts.
+
+
+
+ +
+

XUL migration

+ +
+
+
+
XUL - Guida al Porting
+
Tecniche per aiutare il porting dall'add-on in XUL all'SDK.
+
XUL contro SDK
+
Le debolezze e le forze dell'SDK, confrontate ad un tradizionale add-on basato su XUL.
+
+
+ +
+
+
Esempio di Porting
+
Una procedura dettagliata sul porting di un semplice add-on basato su XUL all'SDK.
+
+
+
+ +
+

Firefox Multiprocesso

+ +
+
+
+
Firefox Multiprocesso e l'SDK
+
Come controllare che il tuo add-on sia compatibile con Firefox Multiprocesso e, in caso di non-compatibilita, come correggere.
+
+
+ +
+
diff --git a/files/it/mozilla/add-ons/sdk/index.html b/files/it/mozilla/add-ons/sdk/index.html new file mode 100644 index 0000000000..42dd1efbbb --- /dev/null +++ b/files/it/mozilla/add-ons/sdk/index.html @@ -0,0 +1,84 @@ +--- +title: Add-on SDK +slug: Mozilla/Add-ons/SDK +tags: + - Add-on SDK + - Guide Add-on +translation_of: Archive/Add-ons/Add-on_SDK +--- +

Con Add-on SDK puoi creare componenti aggiuntivi per Firefox utilizzando tecnologie standard del Web come JavaScript, HTML e CSS. SDK include delle API per JavaScript che puoi usare per sviluppare i componenti aggiuntivi, nonché strumenti per eseguirli, testarli e comprimerli in pacchetto.

+ +
+

Guide

+ +
+
+
+
Per iniziare
+
Come installare SDK e utilizzare gli strumenti della suite cfx per sviluppare, testare e comprimere in pacchetto i componenti aggiuntivi.
+
Interagire con il browser
+
Aprire pagine web, monitorare lo stato di caricamento di una pagina e elencare le schede aperte.
+
Tecniche di sviluppo
+
Scopri le tecniche di sviluppo più comuni come, ad esempio, i test di unità, il logging, i moduli riutilizzabili, la localizzazione e lo sviluppo per dispositivi portatili.
+
+
+ +
+
+
Creare i componenti di una interfaccia utente
+
Aggiungi all’interfaccia utente componenti come pulsanti della barra strumenti, menu contestuali, elementi del menu e finestre di dialogo.
+
Modificare le pagine web
+
Modifica le pagine basandoti su un determinato modello URL oppure opera dinamicamente su una singola scheda.
+
Ricapitolando
+
Guida passo per passo del componente aggiuntivo esempio Annotator.
+
+
+
+ +
+

Guide varie

+ +
+
+
+
Guida per i collaboratori
+
Scopri come contribuire a SDK e quali sono gli elementi fondamentali nel suo codice, come i moduli, le classi e l’ereditarietà, le proprietà private e l’elaborazione dei contenuti.
+
Infrastruttura di SDK
+
I vari aspetti delle tecnologie alla base di SDK: i moduli, il Program ID e le regole che definiscono la compatibilità con Firefox.
+
Content script
+
Una guida dettagliata per lavorare con i content script.
+
+
+ +
+
+
Idiomi di SDK
+
La gestione degli eventi e la distinzione tra add-on script e content script.
+
Migrazione da XUL
+
Una guida per effettuare il porting da XUL a SDK. Include un confronto tra i due sistemi e un esempio pratico di come effettuare il porting di un componente aggiuntivo XUL.
+
Firefox in modalità multiprocesso e SDK
+
Come garantire e verificare la compatibilità di un componente aggiuntivo con Firefox in modalità multiprocesso.
+
+
+
+ +
+

Riferimenti

+ +
+
+
+
API di alto livello
+
Documentazione di riferimento per le API di alto livelli di SDK.
+
Strumenti di riferimento
+
Documentazione di riferimento per lo strumento cfx utilizzato per sviluppare, testare e comprimere in pacchetto i componenti aggiuntivi, la console globale utilizzata per il logging e il file package.json.
+
+
+ +
+
+
API di basso livello
+
Documentazione di riferimento per le API di basso livello di SDK.
+
+
+
diff --git a/files/it/mozilla/add-ons/sdk/tutorials/index.html b/files/it/mozilla/add-ons/sdk/tutorials/index.html new file mode 100644 index 0000000000..3de449f5f1 --- /dev/null +++ b/files/it/mozilla/add-ons/sdk/tutorials/index.html @@ -0,0 +1,145 @@ +--- +title: Tutorials +slug: Mozilla/Add-ons/SDK/Tutorials +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials +--- +

Questa pagina riporta articoli pratici su come compiere specifici compiti usando l'SDK.

+ +
+

Primi passi

+ +
+
+
+
Installazione
+
Scaricare, installare, e iniziare ad usare l'SDK su Windows, OS X e Linux.
+
+ +
+
Risoluzione problemi
+
Alcune indicazioni per risolvere i problemi più comuni e ottenere più aiuto.
+
+
+ +
+
+
Inizia
+
Scenario di creazione di un semplice add-on con l'SDK.
+
+
+
+ +
+

Creazione di l'interfacce grafiche per l'utente

+ +
+
+
+
Aggiungere un bottone alla toolbar
+
aggiungi un bottone alla toolbar degli Add-on di Firefox.
+
Aggiungiere una voce al menu di Firefox
+
Aggiungi delle voci al menù principale di Firefox.
+
+
+ +
+
+
Mostra un popup
+
Mostra un dialogo di popup implementato con HTML e JavaScript
+
Aggiungi una voce al menù contestuale
+
Aggiungi delle voci al menù contestuale di Firefox.
+
+
+
+ +
+

Interazione con il browser

+ +
+
+
+
Apri una pagina web
+
Apri una pagina web in una nuova scheda o in una nuova finestra del  browser , usando il modulo tabs, e accedendo al suo contenuto.
+
Cattura l'evento di caricamento di una pagina
+
Usa il modulo tabs per essere notificato quando nuove pagine web sono caricate ed accedi al loro contenuto.
+
+
+ +
+
+
Recupera l'elenco delle schede aperte
+
Usa il modulo tabs per scorrere lungo le schede attualmente aperte, accedendo al loro contenuto.
+
+
+
+ +
+

Modifica delle pagine web

+ +
+
+
+
Modifica le pagine web basate su URL
+
Crea filtri per le pagine web, basati sul loro URL: ogni volta che viene caricata una pagina web il cui URL combacia con il filtro, si esegue uno specifico script in essa.
+
+
+ +
+
+
Modifica la pagina web attiva
+
Dinamicamente carica uno script in una pagina web attualmente attiva
+
+
+
+ +
+

Tecniche di Sviluppo

+ +
+
+
+
Logging
+
Impiega messaggi di log alla console per scopi diagnostici.
+
Crea moduli riusabili
+
Struttura il tuo add-on in moduli separati per renderlo più facile da sviluppare, debuggare e manutenerlo. Crea packages riusabili, contenenti i tuoi moduli, affinché anche altri sviluppatori di add-on possano usarli.
+
Unit testing
+
Scrivi ed esegui test di unità usando il framework di test dell'SDK.
+
Chrome authority
+
Ottieni l'accesso alle componenti dell'oggetto, abilitando il tuo add-on a caricare e usare qualsiasi oggetto XPCOM.
+
Crea event targets
+
Abilita gli oggetti che definisci ad emettere i loro eventi.
+
+
+ +
+
+
Cattura l'evento abilitazione e disabilitazione dell'add-on
+
Ottieni notifiche quando il tuo add-on è abilitato o disabilitato da Firefox, e passa gli argomenti nel tuo add-on dalla linea di comando.
+
Usa moduli di terze parti
+
Installa e usa moduli aggiuntivi che non sono inclusi nell'SDK stessa.
+
Localizzazione
+
Scrivi codice localizzabile.
+
Sviluppo Mobile
+
Sviluppa add-ons perFirefox Mobile su Android.
+
Add-on Debugger
+
Debugga i tuoi add-on in JavaScript.
+
+
+
+ +
+

Unificazione dei concetti illustrati

+ +
+
+
+
Annotator add-on
+
Una spiegazione esauriente di un add-on relativamente complesso.
+
+
+
+ +

 

diff --git a/files/it/mozilla/add-ons/sdk/tutorials/installazione/index.html b/files/it/mozilla/add-ons/sdk/tutorials/installazione/index.html new file mode 100644 index 0000000000..ae1ede9fb2 --- /dev/null +++ b/files/it/mozilla/add-ons/sdk/tutorials/installazione/index.html @@ -0,0 +1,75 @@ +--- +title: Installazione +slug: Mozilla/Add-ons/SDK/Tutorials/Installazione +translation_of: Mozilla/Add-ons/SDK/Tools/jpm#Installation +--- +

Prerequisiti

+

Per sviluppare con Add-on SDK hai bisogno di:

+ +

L'ultima versione in sviluppo è presente nella repository su GitHub.

+

Costruire l'estensione per AMO

+

Solo l'ultima versione della tag verrà usata se presentata alla AMO.

+

The git archive command is needed to expand some git attribute placeholders.

+
git checkout 1.16
+
+git archive 1.16 python-lib/cuddlefish/_version.py | tar -xvf -
+

Procedimento di installazione per Linux/ Mac OS X / FreeBSD

+

Utilizzando il terminale si estrarre il file contenenti nell'archivio dell'SDK e dopodichè si ci sposta nella cartella principale appena estratta.

+

Per esempio:

+
tar -xf addon-sdk.tar.gz
+cd addon-sdk
+
+

Se siete utenti Bash (molte persone lo sono) eseguire questo comando dal vostro terminale:

+
source bin/activate
+
+

se non funziona il comando precedente e/o non siete utensi Bash usate questo comando:

+
bash bin/activate
+
+

Dal vostro terminale dovrebbe aparire la stringa simile a questa contenente il nome della cartella dell'SDK, come per esempio:

+
(addon-sdk)~/mozilla/addon-sdk >
+
+

Installazione nel Mac usando Homebrew

+

Se siete utenti Mac, si può scegliere di utilizzare Homebrew per l'installazione dell'SDK, usando i seguenti comandi:

+
brew install mozilla-addon-sdk
+

Una volta che l'installazione è completata con successo, si può usare il programma cfx dal terminale in qualsiasi momento: senza dover eseguire bin/activate.

+

Installation on Windows

+

Extract the file contents wherever you choose, and navigate to the root directory of the SDK with a shell/command prompt. For example:

+
7z.exe x addon-sdk.zip
+cd addon-sdk
+
+

Then run:

+
bin\activate
+
+

Your command prompt should now have a new prefix containing the full path to the SDK's root directory:

+
(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk>
+
+

activate

+

The activate command sets some environment variables that are needed for the SDK. It sets the variables for the current command prompt only. If you open a new command prompt, the SDK will not be active in the new prompt. until you type activate again.

+

This means that you can have multiple copies of the SDK in different locations on disk and switch between them, or even have them both activated in different command prompts at the same time.

+

Making activate permanent

+

By setting these variables permanently in your environment so every new command prompt reads them, you can make activation permanent. Then you don't need to type activate every time you open up a new command prompt.

+

Because the exact set of variables may change with new releases of the SDK, it's best to refer to the activation scripts to determine which variables need to be set. Activation uses different scripts and sets different variables for bash environments (Linux and Mac OS X) and for Windows environments.

+

Windows

+

On Windows, bin\activate uses activate.bat, and you can make activation permanent using the command line setx tool or the Control Panel.

+

Linux/Mac OS X

+

On Linux and Mac OS X, source bin/activate uses the activate bash script, and you can make activation permanent using your ~/.bashrc (on Linux) or ~/.bashprofile (on Mac OS X).

+

As an alternative to this, you can create a symbolic link to the cfx program in your ~/bin directory:

+
ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx
+
+

If you used Homebrew to install the SDK, the environment variables are already set permanently for you.

+

Sanity check

+

Run this at your shell prompt:

+
cfx
+
+

It should produce output whose first line looks something like this, followed by many lines of usage information:

+
Usage: cfx [options] [command]
+
+

This is the cfx command-line program. It's your primary interface to the Add-on SDK. You use it to launch Firefox and test your add-on, package your add-on for distribution, view documentation, and run unit tests.

+

Ci sono problemi?

+

Prova la pagina per Risoluzione dei problemi.

+

Prossimo passo

+

Quindi, guardate la Guida introduttiva di CFX, che spiega come creare add-on utilizzando lo strumento CFX.

diff --git a/files/it/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/it/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html new file mode 100644 index 0000000000..56e7917140 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html @@ -0,0 +1,146 @@ +--- +title: Anatomy of an extension +slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +--- +
{{AddonSidebar}}
+ +

Un'estensione consiste in una raccolta di file, confezionati per la distribuzione e l'installazione. In questo articolo, esamineremo rapidamente i file che potrebbero essere presenti in un'estensione.

+ +

manifest.json

+ +

Questo è l'unico file che deve essere necessariamente presente in ogni estensione. Contiene metadati di base come il nome, la versione e le autorizzazioni richieste. Fornisce anche puntatori ad altri file nell'estensione.

+ +

Il file manifest può anche contenere puntatori a diversi altri tipi di file:

+ + + +

+ +

Vedere la pagina di riferimento manifest.json per maggiori dettagli.

+ +

Oltre a quelli a cui fa riferimento il manifest, un'estensione può includere Extension pages aggiuntive con file di supporto.

+ +

Script di Background

+ +

Extensions often need to maintain long-term state or perform long-term operations independently of the lifetime of any particular web page or browser window. That is what background scripts are for.

+ +

Background scripts are loaded as soon as the extension is loaded and stay loaded until the extension is disabled or uninstalled. You can use any of the WebExtension APIs in the script, as long as you have requested the necessary permissions.

+ +

Specifying background scripts

+ +

You can include a background script using the background key in "manifest.json":

+ +
// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}
+ +

You can specify multiple background scripts: if you do, they run in the same context, just like multiple scripts that are loaded into a single web page.

+ +

Instead of specifying background scripts, you can specify a background page which has the added advantage of supporting ES6 modules:

+ +

manifest.json

+ +
// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}
+ +

background-page.html

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <script type="module" src="background-script.js"></script>
+  </head>
+</html>
+ +

Background script environment

+ +

DOM APIs

+ +

Background scripts run in the context of a special page called a background page. This gives them a window global, along with all the standard DOM APIs provided by that object.

+ +

WebExtension APIs

+ +

Background scripts can use any of the WebExtension APIs in the script, as long as their extension has the necessary permissions.

+ +

Cross-origin access

+ +

Background scripts can make XHR requests to any hosts for which they have host permissions.

+ +

Web content

+ +

Background scripts do not get direct access to web pages. However, they can load content scripts into web pages and can communicate with these content scripts using a message-passing API.

+ +

Content security policy

+ +

Background scripts are restricted from certain potentially dangerous operations, like the use of eval(), through a Content Security Policy. See Content Security Policy for more details on this.

+ + + +

Your extension can include various user interface components whose content is defined using an HTML document:

+ + + +

For each of these components, you create an HTML file and point to it using a specific property in manifest.json. The HTML file can include CSS and JavaScript files, just like a normal web page.

+ +

All of these are a type of Extension pages, and unlike a normal web page, your JavaScript can use all the same privileged WebExtension APIs as your background script. They can even directly access variables in the background page using {{WebExtAPIRef("runtime.getBackgroundPage()")}}.

+ +

Extension pages

+ +

You can also include HTML documents in your extension which are not attached to some predefined user interface component. Unlike the documents you might provide for sidebars, popups, or options pages, these don't have an entry in manifest.json. However, they do also get access to all the same privileged WebExtension APIs as your background script.

+ +

You'd typically load a page like this using {{WebExtAPIRef("windows.create()")}} or {{WebExtAPIRef("tabs.create()")}}.

+ +

See Extension pages to learn more.

+ +

Script di contenuto

+ +

Use content scripts to access and manipulate web pages. Content scripts are loaded into web pages and run in the context of that particular page.

+ +

Content scripts are extension-provided scripts which run in the context of a web page; this differs from scripts which are loaded by the page itself, including those which are provided in {{HTMLElement("script")}} elements within the page.

+ +

Content scripts can see and manipulate the page's DOM, just like normal scripts loaded by the page.

+ +

Unlike normal page scripts, they can:

+ + + +

Content scripts cannot directly access normal page scripts but can exchange messages with them using the standard window.postMessage() API.

+ +

Usually, when we talk about content scripts, we are referring to JavaScript, but you can inject CSS into web pages using the same mechanism.

+ +

See the content scripts article to learn more.

+ +

Web accessible resources

+ +

Web accessible resources are resources such as images, HTML, CSS, and JavaScript that you include in the extension and want to make accessible to content scripts and page scripts. Resources which are made web-accessible can be referenced by page scripts and content scripts using a special URI scheme.

+ +

For example, if a content script wants to insert some images into web pages, you could include them in the extension and make them web accessible. Then the content script could create and append img tags which reference the images via the src attribute.

+ +

To learn more, see the documentation for the web_accessible_resources manifest.json key.

+ +

 

+ +

 

diff --git a/files/it/mozilla/add-ons/webextensions/api/index.html b/files/it/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..955086de10 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,53 @@ +--- +title: JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/API +tags: + - NeedsTranslation + - TopicStub + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API +--- +
{{AddonSidebar}}
+ +
+

JavaScript APIs for WebExtensions can be used inside the extension's background scripts and in any other documents bundled with the extension, including browser action or page action popups, sidebars, options pages, or new tab pages. A few of these APIs can also be accessed by an extension's content scripts (see the list in the content script guide).

+ +

To use the more powerful APIs you need to request permission in your extension's manifest.json.

+ +

You can access the APIs using the browser namespace:

+ +
function logTabs(tabs) {
+  console.log(tabs);
+}
+
+browser.tabs.query({currentWindow: true}, logTabs);
+
+ +
+

Many of the APIs are asynchronous, returning a Promise:

+ +
function logCookie(c) {
+  console.log(c);
+}
+
+function logError(e) {
+  console.error(e);
+}
+
+var setCookie = browser.cookies.set(
+  {url: "https://developer.mozilla.org/"}
+);
+setCookie.then(logCookie, logError);
+
+ +
+

Note that this is different from Google Chrome's extension system, which uses the chrome namespace instead of browser, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions APIs supports chrome and callbacks as well as browser and promises. Mozilla has also written a polyfill which enables code that uses browser and promises to work unchanged in Chrome: https://github.com/mozilla/webextension-polyfill.

+ +

Firefox also implements these APIs under the chrome namespace using callbacks. This allows code written for Chrome to run largely unchanged in Firefox for the APIs documented here.

+ +

Microsoft Edge uses the browser namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.

+ +

Not all browsers support all the APIs: for the details, see Browser support for JavaScript APIs.

+
+ +
{{SubpagesWithSummaries}}
diff --git a/files/it/mozilla/add-ons/webextensions/api/runtime/connectnative/index.html b/files/it/mozilla/add-ons/webextensions/api/runtime/connectnative/index.html new file mode 100644 index 0000000000..7f52576e62 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/api/runtime/connectnative/index.html @@ -0,0 +1,122 @@ +--- +title: runtime.connectNative() +slug: Mozilla/Add-ons/WebExtensions/API/runtime/connectNative +tags: + - API + - Add-ons + - Estensioni + - Estensioni Web + - Non-standard + - Riferimenti + - connectNative + - metodo + - runtime +translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/connectNative +--- +
{{AddonSidebar()}}
+ +
Connette l'estensione ad un'applicazione nativa presente sul computer dell'utente.
+ +
 
+ +
Utilizza il nome di un'applicazione nativa come parametro.
+ +
Avvia l'applicazione nativa e restituisce un oggetto {{WebExtAPIRef("runtime.Port")}} alla funzione invocante.
+ +
 
+ +
La funzione invocante può usare la Port per scambiare messaggi con l'applicazione nativa utilizzando Port.postMessage() e port.onMessage.
+ +
 
+ +
L'applicazione nativa rimane attiva a meno che non termini autonomamente, sia invocata la funzione Port.disconnect(), o la pagina che ha generato la Port venga distrutta. Un volta disconnessa la Port il browser rimane in attesa qualche secondo finchè il processo non termina correttamente ed in definitiva lo chiude se non fosse ancora terminato.
+ +
Per maggiori informazioni, vedere Native messaging.
+ +

Syntax

+ +
var port = browser.runtime.connectNative(
+  application // string
+)
+
+ +

Parameters

+ +
+
application
+
string. Il nome dell'applicazione nativa alla quale collegarsi. Questo deve combaciare con la proprietà "name" nel native application's manifest file.
+
+ +

Return value

+ +

Un oggetto {{WebExtAPIRef('runtime.Port')}}. La porta che la funzione invocante può usare per scambiare messaggi con l'applicazione nativa.

+ +

Browser compatibility

+ + + +

{{Compat("webextensions.api.runtime.connectNative")}}

+ +

Examples

+ +

L'esempio crea una connessione con l'applicazione nativa "ping_pong" e rimane in ascolto per i messaggi in entrata. Invia inoltre, all'applicazione nativa, un messaggio nel momento in cui l'utente clicca su un'icona specifica del browser:

+ +
/*
+On startup, connect to the "ping_pong" app.
+*/
+var port = browser.runtime.connectNative("ping_pong");
+
+/*
+Listen for messages from the app.
+*/
+port.onMessage.addListener((response) => {
+  console.log("Received: " + response);
+});
+
+/*
+On a click on the browser action, send the app a message.
+*/
+browser.browserAction.onClicked.addListener(() => {
+  console.log("Sending:  ping");
+  port.postMessage("ping");
+});
+ +

{{WebExtExamples}}

+ +
Fonti informative + +

Questa API è basata sull'API Chromium chrome.runtime.  Questo documento deriva dal runtime.json del codice di Chromium.

+ +

La compatibilità con Microsoft Edge è fornita da Microsoft ed è qui inclusa su licenza Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/it/mozilla/add-ons/webextensions/api/runtime/index.html b/files/it/mozilla/add-ons/webextensions/api/runtime/index.html new file mode 100644 index 0000000000..1768642e7a --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/api/runtime/index.html @@ -0,0 +1,168 @@ +--- +title: runtime +slug: Mozilla/Add-ons/WebExtensions/API/runtime +tags: + - API + - Add-ons + - Extensions + - Interface + - NeedsTranslation + - Reference + - TopicStub + - WebExtensions + - runtime +translation_of: Mozilla/Add-ons/WebExtensions/API/runtime +--- +
{{AddonSidebar}}
+ +

This module provides information about your extension and the environment it's running in.

+ +

It also provides messaging APIs enabling you to:

+ + + +

Types

+ +
+
{{WebExtAPIRef("runtime.Port")}}
+
Represents one end of a connection between two specific contexts, which can be used to exchange messages.
+
{{WebExtAPIRef("runtime.MessageSender")}}
+
+

Contains information about the sender of a message or connection request.

+
+
{{WebExtAPIRef("runtime.PlatformOs")}}
+
Identifies the browser's operating system.
+
{{WebExtAPIRef("runtime.PlatformArch")}}
+
Identifies the browser's processor architecture.
+
{{WebExtAPIRef("runtime.PlatformInfo")}}
+
Contains information about the platform the browser is running on.
+
{{WebExtAPIRef("runtime.RequestUpdateCheckStatus")}}
+
Result of a call to {{WebExtAPIRef("runtime.requestUpdateCheck()")}}.
+
{{WebExtAPIRef("runtime.OnInstalledReason")}}
+
The reason that the {{WebExtAPIRef("runtime.onInstalled")}} event is being dispatched.
+
{{WebExtAPIRef("runtime.OnRestartRequiredReason")}}
+
The reason that the {{WebExtAPIRef("runtime.onRestartRequired")}} event is being dispatched.
+
+ +

Properties

+ +
+
{{WebExtAPIRef("runtime.lastError")}}
+
This value is set when an asynchronous function has an error condition that it needs to report to its caller.
+
{{WebExtAPIRef("runtime.id")}}
+
The ID of the extension.
+
+ +

Functions

+ +
+
{{WebExtAPIRef("runtime.getBackgroundPage()")}}
+
Retrieves the Window object for the background page running inside the current extension.
+
{{WebExtAPIRef("runtime.openOptionsPage()")}}
+
+

Opens your extension's options page.

+
+
{{WebExtAPIRef("runtime.getManifest()")}}
+
Gets the complete manifest.json file, serialized as an object.
+
{{WebExtAPIRef("runtime.getURL()")}}
+
Given a relative path from the manifest.json to a resource packaged with the extension, returns a fully-qualified URL.
+
{{WebExtAPIRef("runtime.setUninstallURL()")}}
+
Sets a URL to be visited when the extension is uninstalled.
+
{{WebExtAPIRef("runtime.reload()")}}
+
Reloads the extension.
+
{{WebExtAPIRef("runtime.requestUpdateCheck()")}}
+
Checks for updates to this extension.
+
{{WebExtAPIRef("runtime.connect()")}}
+
Establishes a connection from a content script to the main extension process, or from one extension to a different extension.
+
{{WebExtAPIRef("runtime.connectNative()")}}
+
+
Connects the extension to a native application on the user's computer.
+
+
{{WebExtAPIRef("runtime.sendMessage()")}}
+
Sends a single message to event listeners within your extension or a different extension. Similar to {{WebExtAPIRef('runtime.connect')}} but only sends a single message, with an optional response.
+
{{WebExtAPIRef("runtime.sendNativeMessage()")}}
+
Sends a single message from an extension to a native application.
+
{{WebExtAPIRef("runtime.getPlatformInfo()")}}
+
Returns information about the current platform.
+
{{WebExtAPIRef("runtime.getBrowserInfo()")}}
+
Returns information about the browser in which this extension is installed.
+
{{WebExtAPIRef("runtime.getPackageDirectoryEntry()")}}
+
Returns a DirectoryEntry for the package directory.
+
+ +

Events

+ +
+
{{WebExtAPIRef("runtime.onStartup")}}
+
Fired when a profile that has this extension installed first starts up. This event is not fired when an incognito profile is started.
+
{{WebExtAPIRef("runtime.onInstalled")}}
+
Fired when the extension is first installed, when the extension is updated to a new version, and when the browser is updated to a new version.
+
{{WebExtAPIRef("runtime.onSuspend")}}
+
Sent to the event page just before the extension is unloaded. This gives the extension an opportunity to do some cleanup.
+
{{WebExtAPIRef("runtime.onSuspendCanceled")}}
+
Sent after {{WebExtAPIRef("runtime.onSuspend")}} to indicate that the extension won't be unloaded after all.
+
{{WebExtAPIRef("runtime.onUpdateAvailable")}}
+
Fired when an update is available, but isn't installed immediately because the extension is currently running.
+
{{WebExtAPIRef("runtime.onBrowserUpdateAvailable")}} {{deprecated_inline}}
+
Fired when an update for the browser is available, but isn't installed immediately because a browser restart is required.
+
{{WebExtAPIRef("runtime.onConnect")}}
+
Fired when a connection is made with either an extension process or a content script.
+
{{WebExtAPIRef("runtime.onConnectExternal")}}
+
Fired when a connection is made with another extension.
+
{{WebExtAPIRef("runtime.onMessage")}}
+
Fired when a message is sent from either an extension process or a content script.
+
{{WebExtAPIRef("runtime.onMessageExternal")}}
+
Fired when a message is sent from another extension. Cannot be used in a content script.
+
{{WebExtAPIRef("runtime.onRestartRequired")}}
+
Fired when the device needs to be restarted.
+
+ +

Browser compatibility

+ + + +

{{Compat("webextensions.api.runtime")}}

+ +
{{WebExtExamples("h2")}}
+ +
Acknowledgements + +

This API is based on Chromium's chrome.runtime API. This documentation is derived from runtime.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/it/mozilla/add-ons/webextensions/api/search/index.html b/files/it/mozilla/add-ons/webextensions/api/search/index.html new file mode 100644 index 0000000000..07f8f4d05a --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/api/search/index.html @@ -0,0 +1,10 @@ +--- +title: search +slug: Mozilla/Add-ons/WebExtensions/API/search +translation_of: Mozilla/Add-ons/WebExtensions/API/search +--- +
 
+ +
{{AddonSidebar}}
+ +

Lasciato intenzionalmente bianco fino a che l'API non sarà completata.

diff --git a/files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html b/files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html new file mode 100644 index 0000000000..c74fbd8473 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html @@ -0,0 +1,59 @@ +--- +title: Cosa sono le estensioni? +slug: Mozilla/Add-ons/WebExtensions/Cosa_sono_le_WebExtensions +tags: + - Estensioni + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +
{{AddonSidebar}}
+ +

Un'estensione modifica le funzionalità di un browser. Viene creata utilizzando gli standard della tecnologia web - HTML, CSS, e JavaScript. Può trarre vantaggio dalle stesse web API come JavaScript può in una pagina web, ma un'estensione ha anche accesso ad un proprio set di API JavaScript. Questo significa che puoi fare molto di più in un'estensione di quanto tu ne possa fare con il codice in una pagina. Questi sono soltanto alcuni esempi delle cose che puoi fare:

+ +

Migliorare o completare un sito web: Usa un'estensione per inviare nel browser caratteristiche o informazioni aggiuntive dal tuo sito web. Permettere agli utenti di raccogliere informazioni dalle pagine che visitano per migliorare il servizio che offri.

+ +

+ +

Esempi: Amazon Assistant, OneNote Web Clipper e Grammarly for Firefox

+ +

Permettere agli utenti di mostrare la loro personalità: Le estensioni del browser possono manipolare il contenuto delle pagine che l'utente visita. Aiuta gli utenti ad aggiungere un logo o un'immagine preferita come sfondo di tutte le pagine che visitano. Le estensioni ti danno anche la possibilità di aggiornare l'aspetto di Firefox. (Puoi aggiornare l'aspetto di Firefox anche con i temi).

+ +

+ +

Esempi: MyWeb New Tab, Tabliss e VivaldiFox

+ +

Aggiungere o rimuovere contenuti dalle pagine web: Potresti voler aiutare le persone a bloccare le pubblicità intrusive dalle pagine web, fornire l'accesso ad una guida di viaggio ogni volta che un paese o una città vengono menzionati in una pagina web, o ristrutturare il contenuto di una pagina per offrire un'esperienza di lettura coerente. Con la possibilità di poter accedere e aggiornare sia l'HTML che il CSS di una pagina, puoi aiutare gli utenti a fargli vedere il web nel modo in cui lo desiderano.

+ +

+ +

Esempi: uBlock Origin, Reader e Toolbox for Google Play Store™

+ +

Aggiungere strumenti e nuove funzionalità di navigazione: Aggiungi nuove funzionalità ad una taskboard, o generare immagini di codici QR da URL, da collegamenti ipertestuali, o dal testo di una pagina. Con le opzioni flessibili dell'UI e dal potenziale delle WebExtension API, puoi aggiungere facilmente nuove funzionalità ad un browser. Inoltre, puoi aumentare le caratteristiche e le funzionalità di qualsiasi sito web, anche se non è il tuo.

+ +

+ +

Esempi: QR Code Image Generator, Swimlanes for Trello e Tomato Clock

+ +

Giochi: Offri giochi per computer tradizionali, con la possibilità di giocare offline, ma anche esplorare nuove possibilità di gioco, ad esempio, incorporando il gameplay nella navigazione di tutti i giorni.

+ +

 

+ +

Esempi: Asteroids in Popup, Solitaire Card Game New Tab e 2048 Prime

+ +

Aggiungere strumenti di sviluppo: Puoi fornire strumenti di sviluppo web per il tuo lavoro, o hai sviluppato una tecnica utile o un approccio allo sviluppo web che vuoi condividere. In entrambi i casi, puoi migliorare gli strumenti di sviluppo integrati in Firefox aggiungendo una nuova scheda alla barra di strumenti per sviluppatori.

+ +

+ +

Esempi: Web Developer, Web React Developer Tools e aXe Developer Tools

+ +

Le estensioni per Firefox vengono create utilizzando le WebExtension API, un sistema cross-browser per lo sviluppo delle estensioni. In gran parte, l'API è compatibile con l'API delle estensioni supportato da Google Chrome e Opera. Le estensioni scritte per questi browser in molti casi funzioneranno in Firefox o Microsoft Edge soltanto con poche modifiche. L'API è anche completamente compatibile con multiprocess Firefox.

+ +

Se hai idee, domande, o hai bisogno di aiuto per migrare un add-on ad una WebExtension, puoi raggiungerci nelladev-addons mailing list o in #extdev su IRC.

+ +

E adesso?

+ + diff --git a/files/it/mozilla/add-ons/webextensions/index.html b/files/it/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..078f67268d --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,88 @@ +--- +title: WebExtensions +slug: Mozilla/Add-ons/WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions +--- +
{{AddonSidebar}}
+ +

Le WebExtensions sono un metodo cross-browser per sviluppare add-on. In larga parte il metodo è compatibile con le extension API supportate da Google, Chrome e Opera. Le estensioni create per questi browsers funzioneranno con poche modifiche su Firefox o Microsoft Edge. Le API sono anche completamente compatibili con Firefox multiprocesso.

+ +

Vogliamo continuare ad estendere le API per supportare le necessità degli sviluppatori di add-ons, perciò se hai idee, ci piacerebbe sentirle. Contattaci su dev-addons mailing list o #webextensions su IRC.

+ +
+
+

Iniziare

+ + + +

Come fare

+ + + +

Concetti

+ + + +

Porting

+ + + +

Firefox workflow

+ + +
+ +
+

Riferimenti

+ + + +

JavaScript APIs

+ +
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}
+ +

Manifest keys

+ +
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}
+
+
diff --git a/files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html b/files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html new file mode 100644 index 0000000000..fac1b12e36 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html @@ -0,0 +1,153 @@ +--- +title: La tua prima estensione +slug: Mozilla/Add-ons/WebExtensions/La_tua_prima_WebExtension +tags: + - Guida + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +
{{AddonSidebar}}
+ +

In questo articolo creeremo passo dopo passo un'estensione per Firefox, dall'inizio alla fine. L'estensione aggiungerà un bordo rosso a tutte le pagine caricate da "mozilla.org" o da un suo sottodominio.

+ +

Il codice sorgente di questo esempio è su GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

+ +

Per prima cosa hai bisogno di Firefox versione 45 o superiore.

+ +

Scrittura dell'estensione

+ +

Crea una cartella e posizionati al suo interno:

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

Ora, crea un nuovo file chiamato "manifest.json" all'interno della cartella "borderify". Scrivi nel file il seguente contenuto:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Aggiunge un bordo rosso a tutte le pagine caricate da mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ + + +

La chiave più interessante è content_scripts, dice a Firefox di caricare uno script nelle pagine Web i cui URL corrispondono ad uno schema specifico. In questo caso, chiediamo a Firefox di caricare uno script chiamato "borderify.js" in tutto le pagine HTTP o HTTPS fornite da "mozilla.org" o dai suoi sottodomini.

+ + + +
+

In alcune situazioni è necessario specificare un ID per la propria estensione. Se devi specificare l'ID dell'estensione, includi la chiave  applications nel file manifest.json e imposta la sua proprietà gecko.id:

+ +
"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}
+
+ +

icons/border-48.png

+ +

L'estensione dovrebbe avere un'icona. Essa verrà mostrata accanto alla lista delle estensioni in Gestione componenti aggiuntivi. Il file manifest.json ha dichiarato di avere un'icona a "icons/border-48.png".

+ +

Crea la cartella "icons" all'interno della cartella "borderify". Salva un'icona al suo interno chiamata "border-48.png".  Puoi usare la stessa del nostro esempio, presa dal set di icone di Google Material Design, e usata secondo i termini della licenza Creative Commons Attribution-ShareAlike.

+ +

Se scegli di usare la tua icona, dovrebbe essere di 48x48 pixel. Potresti anche fornire un'icona di 96x96 pixel, per i display ad alta risoluzione. Se la aggiungi, dovrà essere specificata con la proprietà 96 dell'oggetto icons nel file manifest.json:

+ +
"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}
+ +

In alternativa, potresti fornite un file SVG che verrà ridimensionato correttamente. (Comunque: se utilizzi SVG e la tua icona comprende del testo, puoi utilizzare lo strumento "converti in percorso" dell'editor SVG per appiattire il testo, in modo da poter essere ridimensionato con una dimensione/posizione coerente.)

+ + + +

borderify.js

+ +

Infine, crea un file chiamato "borderify.js" all'interno della cartella "borderify" e scrivici questo contenuto:

+ +
document.body.style.border = "5px solid red";
+ +

Questo script verrà caricato in tutte le pagine che corrispondono allo schema specificato nella chiave content_scripts nel file manifest.json. Lo script ha accesso diretto al documento, proprio come gli script caricati normalmente dalla pagina.

+ + + +

Provala

+ +

Innanzitutto, controlla di avere i file giusti nei posti giusti:

+ +
borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json
+ +

Installazione

+ +

Apri "about:debugging" in Firefox, clicca "Carica comp. aggiuntivo temporaneo" e seleziona un qualsiasi file nella cartella dell'estensione:

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

L'estensione verrà ora installata e rimarrà finché non riavvii Firefox.

+ +

In alternativa, puoi eseguire l'estensione da riga di comanto utilizzando lo strumento web-ext.

+ +

Prova

+ +

Ora prova a visitare una pagina di "mozilla.org", dovresti vedere un bordo rosso intorno alla pagina:

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

Non provarlo su addons.mozilla.org, però! Gli script di contenuto sono attualmente bloccatu su quel dominio.

+
+ +

Prova a sperimentare un po. Modifica lo script per far cambiare il colore del bordo, o fai qualcosaltro al contenuto della pagina. Salva lo script e ricarica i file dell'estensione cliccando il pulsante "Ricarica" in about:debugging. Puoi vedere subito i cambiamenti:

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

Impacchettamento e pubblicazione

+ +

Per far utilizzare la tua estensione ad altre persone, devi impacchettarla e inviarla a Mozilla per firmarla. Per saperne di più, guarda "Pubblicazione della tua estensione".

+ +

E adesso?

+ +

Ora hai un'idea del processo di sviluppo di una WebExtension per firefox, prosegui con:

+ + diff --git a/files/it/mozilla/add-ons/webextensions/script_contenuto/index.html b/files/it/mozilla/add-ons/webextensions/script_contenuto/index.html new file mode 100644 index 0000000000..4ee11316c5 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/script_contenuto/index.html @@ -0,0 +1,494 @@ +--- +title: Script di contenuto +slug: Mozilla/Add-ons/WebExtensions/Script_contenuto +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts +--- +
{{AddonSidebar}}
+ +

Uno script di contenuto è una parte dell'estensione che viene eseguita nel contesto di una particolare pagina Web (al contrario degli script di sfondo che fanno parte dell'estensione o degli script che fanno parte del sito stesso, come quelli caricati utilizzando l'elemento {{HTMLElement("script")}}).

+ +

Gli script in Background possono accedere a tutte le WebExtension JavaScript APIs, ma non possono accedere direttamente al contenuto delle pagine Web. Quindi, se la tua estensione ha bisogno di farlo, hai bisogno degli script di contenuto .

+ +

Proprio come gli script caricati da normali pagine web, gli script di contenuto possono leggere e modificare il contenuto delle loro pagine usando le API DOM standard.

+ +

Gli script di contenuto possono accedere solo a un piccolo sottoinsieme delle API di WebExtension, ma possono comunicare con script in background utilizzando un sistema di messaggistica e quindi accedere indirettamente alle API di WebExtension.

+ +

Gli script di contenuto possono accedere solo a un piccolo sottoinsieme delle WebExtension APIs, ma possono comunicare con gli script in background utilizzando un sistema di messaggistica e quindi accedere indirettamente alle WebExtension APIs.

+ +
+

Nota che gli script di contenuto sono bloccati nei seguenti domini:

+ + + +

Se provi a iniettare uno script di contenuto in una pagina in uno di questi domini, l'operazione fallirà e la pagina registrerà un errore CSP.

+ +

Poiché queste restrizioni includono addons.mozilla.org, gli utenti possono essere tentati di utilizzare l'estensione immediatamente dopo l'installazione, solo per scoprire che non funziona! È possibile aggiungere un avviso appropriato o una pagina di inserimento per spostare gli utenti da addons.mozilla.org.

+
+ +
+

Valori aggiunti all'ambito globale di uno script di contenuto con var foo o window.foo = "bar" potrebbe scomparire a causa di un bug 1408996.

+
+ +

Caricamento di script di contenuto

+ +

Puoi caricare uno script di contenuto in una pagina web in tre modi:

+ +

Al momento dell'installazione, nelle pagine che corrispondono ai pattern URL: utilizzando la chiave content_scripts in manifest.json, è possibile chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL corrisponde a un determinato pattern.

+ +
    +
  1. Al momento dell'installazione, nelle pagine che corrispondono al pattern URL: utilizzando il tag content_scripts nel vostro file manifest.json, è possibile chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL corrisponde ad un determinato pattern
    2. +
  2. In fase di runtime, nelle pagine che corrispondono a un determinato pattern URL: utilizzando {{WebExtAPIRef("contentScripts")}} API, potete chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL corrisponde ad un determinato pattern. Questo è un metodo possibile (1), tranne che è possibile aggiungere e rimuovere script di contenuto in fase di esecuzione.
    3. +
  3. In fase di runtime, in specifiche schede: utilizzando le tabs.executeScript() API, è possibile caricare uno script di contenuto in una scheda specifica ogni volta che si desidera: ad esempio, in risposta all'utente che fa clic su una azione del browser.
    4. +
+ +

Esiste un solo ambito globale per frame e per estensione. Ciò significa che le variabili di uno script di contenuto possono essere direttamente accessibili da un altro script di contenuto, indipendentemente dal modo in cui è stato caricato.

+ +

Utilizzando i metodi (1) e (2), è possibile caricare gli script solo in pagine i cui URL possono essere rappresentati utilizzando un pattern di confronto.

+ +

Usando il metodo (3), puoi anche caricare script in pagine contenute nella tua estensione, ma non puoi caricare script in pagine del browser privilegiate (come "about: debugging" o "about: addons").

+ +

Ambiente degli script di contenuto

+ +

accesso al DOM

+ +

Gli script di contenuto possono accedere e modificare il DOM della pagina, proprio come possono fare i normali script di pagina. Possono anche vedere eventuali modifiche apportate al DOM tramite script di pagina.

+ +

Tuttavia, gli script di contenuto ottengono una "visualizzazione originale del DOM". Questo significa:

+ + + +

In Firefox, questo comportamento è chiamato Xray vision.

+ +

Consideriamo una pagina web come questa:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  </head>
+
+  <body>
+    <script src="page-scripts/page-script.js"></script>
+  </body>
+</html>
+ +

Lo script "page-script.js" esegue:

+ +
// page-script.js
+
+// add a new element to the DOM
+var p = document.createElement("p");
+p.textContent = "This paragraph was added by a page script.";
+p.setAttribute("id", "page-script-para");
+document.body.appendChild(p);
+
+// define a new property on the window
+window.foo = "This global variable was added by a page script";
+
+// redefine the built-in window.confirm() function
+window.confirm = function() {
+  alert("The page script has also redefined 'confirm'");
+}
+ +

Ora un'estensione inietta uno script di contenuto nella pagina:

+ +
// content-script.js
+
+// can access and modify the DOM
+var pageScriptPara = document.getElementById("page-script-para");
+pageScriptPara.style.backgroundColor = "blue";
+
+// can't see page-script-added properties
+console.log(window.foo);  // undefined
+
+// sees the original form of redefined properties
+window.confirm("Are you sure?"); // calls the original window.confirm()
+ +

Lo stesso vale al contrario: gli script di pagina non possono vedere le proprietà JavaScript aggiunte dagli script di contenuto.

+ +

Ciò significa che gli script di contenuto possono contare su proprietà DOM che si comportano in modo prevedibile, senza preoccuparsi delle sue variabili che si scontrano con le variabili dello script di pagina.

+ +

Una conseguenza pratica di questo comportamento è che uno script di contenuto non avrà accesso a nessuna libreria JavaScript caricata dalla pagina. Ad esempio, se la pagina include jQuery, lo script di contenuto non sarà in grado di vederlo.

+ +

Se uno script di contenuto desidera utilizzare una libreria JavaScript, la stessa libreria deve essere iniettata come script di contenuto insieme allo script di contenuto che vuole utilizzarlo:

+ +
"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["jquery.js", "content-script.js"]
+  }
+]
+ +
+

Nota: Firefox fornisce alcune API che consentono agli script di contenuto di accedere agli oggetti JavaScript creati dagli script di pagina e di esporre i propri oggetti JavaScript agli script di pagina.

+ +

Vedere Condivisione di oggetti con script di pagina per maggiori dettagli.

+
+ +

WebExtension APIs

+ +

Oltre alle API DOM standard, gli script di contenuto possono utilizzare le seguenti API WebExtension:

+ +

Da extension:

+ + + +

Da runtime:

+ + + +

Da i18n:

+ + + +

Da menus:

+ + + +

Tutto da storage.

+ +

XHR e Fetch

+ +

Gli script di contenuto posso fare delle normali richieste usando window.XMLHttpRequest e window.fetch() APIs.

+ +

Gli script di contenuto ottengono gli stessi privilegi per i cross-domain del resto dell'estensione: quindi se l'estensione ha richiesto l'accesso tra cross-domain per un dominio utilizzando il tag permissions nel file manifest.json, i suoi script di contenuto ottengono l'accesso anche a quel dominio.

+ +

Ciò si ottiene esponendo le istanze XHR e di recupero più privilegiate nello script di contenuto, che ha l'effetto collaterale di non impostare le intestazioni di Origin e Referer come una richiesta dalla pagina stessa, spesso è preferibile evitare che la richiesta sveli la sua natura trasversale. Dalla versione 58 in poi le estensioni che devono eseguire richieste che si comportano come se fossero inviate dal contenuto stesso possono utilizzare content.XMLHttpRequest e content.fetch() instead. Per le estensioni cross-browser, la loro presenza deve essere rilevata dalla funzione.

+ +

Communicazione con gli script di background

+ +

Sebbene gli script di contenuto non possano utilizzare direttamente la maggior parte delle API di WebExtension, possono comunicare con gli script in background dell'estensione utilizzando le API di messaggistica e pertanto possono accedere indirettamente a tutte le API a cui possono accedere gli script in background.

+ +

Esistono due schemi di base per la comunicazione tra gli script in background e gli script di contenuto: è possibile inviare messaggi una tantum, con una risposta opzionale, oppure è possibile impostare una connessione più longeva tra i due lati e utilizzare tale connessione per scambiare messaggi .

+ +

Messaggi one-off

+ +

Per inviare messaggi one-off, con una risposta opzionale, puoi utilizzare le seguenti API:

+ + + + + + + + + + + + + + + + + + + + + +
 In content scriptIn background script
Invia un messaggibrowser.runtime.sendMessage()browser.tabs.sendMessage()
Ricevi un messaggiobrowser.runtime.onMessagebrowser.runtime.onMessage
+ +

Ad esempio, ecco uno script di contenuto che si pone in ascolto degli eventi click in una pagina web.
+
+ Se il clic era su un collegamento, invia la pagina di sfondo con l'URL di destinazione:

+ +
// content-script.js
+
+window.addEventListener("click", notifyExtension);
+
+function notifyExtension(e) {
+  if (e.target.tagName != "A") {
+    return;
+  }
+  browser.runtime.sendMessage({"url": e.target.href});
+}
+ +

Lo script in background ascolta questi messaggi e visualizza una notifica utilizzando le notifications API:

+ +
// background-script.js
+
+browser.runtime.onMessage.addListener(notify);
+
+function notify(message) {
+  browser.notifications.create({
+    "type": "basic",
+    "iconUrl": browser.extension.getURL("link.png"),
+    "title": "You clicked a link!",
+    "message": message.url
+  });
+}
+
+ +

(Questo codice di esempio è una riduzione dell'esempio notify-link-clicks-i18n che è possibile trovare su GitHub.)

+ +

Messaggi connection-based

+ +

L'invio di messaggi one-off può risultare complicato se si scambiano molti messaggi tra uno script in background e uno script di contenuto. Quindi uno schema alternativo è stabilire una connessione più longeva tra i due contesti e usare questa connessione per scambiare messaggi.

+ +

Ogni lato ha un oggetto runtime.Port, che può utilizzare per scambiare messaggi.

+ +

Per creare la connessione:

+ + + +

Questo metodo ritorna un oggetto di tipo runtime.Port.

+ + + +

Dopo che tutti e due i lati hanno una porta di comunicazione possono:

+ + + +

Ad esempio, appena viene caricato, questo script di contenuto:

+ + + +
// content-script.js
+
+var myPort = browser.runtime.connect({name:"port-from-cs"});
+myPort.postMessage({greeting: "hello from content script"});
+
+myPort.onMessage.addListener(function(m) {
+  console.log("In content script, received message from background script: ");
+  console.log(m.greeting);
+});
+
+document.body.addEventListener("click", function() {
+  myPort.postMessage({greeting: "they clicked the page!"});
+});
+ +

Lo script di sfondo corrispondente:

+ + + +
// background-script.js
+
+var portFromCS;
+
+function connected(p) {
+  portFromCS = p;
+  portFromCS.postMessage({greeting: "hi there content script!"});
+  portFromCS.onMessage.addListener(function(m) {
+    console.log("In background script, received message from content script");
+    console.log(m.greeting);
+  });
+}
+
+browser.runtime.onConnect.addListener(connected);
+
+browser.browserAction.onClicked.addListener(function() {
+  portFromCS.postMessage({greeting: "they clicked the button!"});
+});
+
+ +

Multipli script di contenuto

+ +

Se si dispone di più script di contenuto che comunicano contemporaneamente, è possibile memorizzare ciascuna connessione in un array.

+ + + +
// background-script.js
+
+var ports = []
+
+function connected(p) {
+  ports[p.sender.tab.id]    = p
+  //...
+}
+
+browser.runtime.onConnect.addListener(connected)
+
+browser.browserAction.onClicked.addListener(function() {
+  ports.forEach(p => {
+        p.postMessage({greeting: "they clicked the button!"})
+    })
+});
+
+ + + +

Communicazione con la pagina web

+ +

Sebbene per impostazione predefinita gli script di contenuto non abbiano accesso agli oggetti creati dagli script di pagina, possono comunicare con gli script di pagina utilizzando la API DOM window.postMessage e window.addEventListener.

+ +

Per esempio:

+ +
// page-script.js
+
+var messenger = document.getElementById("from-page-script");
+
+messenger.addEventListener("click", messageContentScript);
+
+function messageContentScript() {
+  window.postMessage({
+    direction: "from-page-script",
+    message: "Message from the page"
+  }, "*");
+ +
// content-script.js
+
+window.addEventListener("message", function(event) {
+  if (event.source == window &&
+      event.data &&
+      event.data.direction == "from-page-script") {
+    alert("Content script received message: \"" + event.data.message + "\"");
+  }
+});
+ +

Per un esempio completo e funzionante, visitate la pagina demo su GitHub e seguite le istruzioni.

+ +
+

Nota che ogni volta che si interagisce con contenuti web non fidati in questo modo, è necessario fare molta attenzione. Le estensioni sono codici privilegiati che possono avere potenti funzionalità e pagine Web ostili possono facilmente ingannarli per accedere a tali funzionalità.
+
+ Per fare un esempio banale, supponiamo che il codice dello script del contenuto che riceve il messaggio faccia qualcosa del genere: 

+ +
window.addEventListener("message", function(event) {
+  if (event.source == window &&
+      event.data.direction &&
+      event.data.direction == "from-page-script") {
+    eval(event.data.message);
+  }
+});
+ +

Ora lo script di pagina può eseguire qualsiasi codice con tutti i privilegi dello script di contenuto.

+
+ +

Usare eval() in uno script di contenuto

+ +

In Chrome, eval() esegue sempre il codice nel contesto dello script del contenuto, non nel contesto della pagina.

+ +

In Firefox:

+ + + +

Per esempio, considerate uno script di contenuto simile a questo:

+ +
// content-script.js
+
+window.eval('window.x = 1;');
+eval('window.y = 2');
+
+console.log(`In content script, window.x: ${window.x}`);
+console.log(`In content script, window.y: ${window.y}`);
+
+window.postMessage({
+  message: "check"
+}, "*");
+ +

Questo codice crea semplicemente le variabili x e y usando window.eval() and eval(), quindi invia i loro valori al log della console, ed infine invia un messaggio alla pagina.

+ +

Alla ricezione del messaggio, lo script della pagina invia le variabili al log della console:

+ +

 

+ +
window.addEventListener("message", function(event) {
+  if (event.source === window && event.data && event.data.message === "check") {
+    console.log(`In page script, window.x: ${window.x}`);
+    console.log(`In page script, window.y: ${window.y}`);
+  }
+});
+ +

In Chrome, si ottine questo risultato:

+ +
In content script, window.x: 1
+In content script, window.y: 2
+In page script, window.x: undefined
+In page script, window.y: undefined
+ +

In Firefox, invece, il risultato sarà il seguente:

+ +
In content script, window.x: undefined
+In content script, window.y: 2
+In page script, window.x: 1
+In page script, window.y: undefined
+ +

Lo stesso vale per setTimeout(), setInterval(), e Function().

+ +
+

Quando si esegue il codice nel contesto della pagina, è necessario prestare molta attenzione. L'ambiente della pagina è controllato da pagine Web potenzialmente dannose, che possono ridefinire gli oggetti con cui interagire per comportarsi in modi imprevisti:

+ +
// page.js redefines console.log
+
+var original = console.log;
+
+console.log = function() {
+  original(true);
+}
+
+ + +
// content-script.js calls the redefined version
+
+window.eval('console.log(false)');
+
+
diff --git a/files/it/mozilla/add-ons/webextensions/user_interface/index.html b/files/it/mozilla/add-ons/webextensions/user_interface/index.html new file mode 100644 index 0000000000..bfc48bdc9e --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/user_interface/index.html @@ -0,0 +1,89 @@ +--- +title: Interfaccia utente +slug: Mozilla/Add-ons/WebExtensions/user_interface +translation_of: Mozilla/Add-ons/WebExtensions/user_interface +--- +
{{AddonSidebar}}
+ +

Le estensioni che usa le API delle WebExtension sono fornite con diverse opzioni dell'interfaccia utente che possono aggiungere nuove funzioni all'utente. Un elenco di queste opzioni è presente di seguito, in questa sezione è presente una descrizione dettagliata di ogni opzione.

+ +
+

Per consigli sull'utilizzo di questi componenti UI per permettere un migliore utilizzo, da parte dell'utente, della vostra estensione, guardate l'articolo User experience best practices.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI optionDescriptionExample
Toolbar button (browser action)Un pulsante nella barra degli strumenti del browser che invia un evento all'estensione quando si fa clic sul pulsante. Per impostazione predefinita, il pulsante è visibile in tutte le schede.Example showing a toolbar button (browser action).
Toolbar button with a popupUna finestra popup che si attiva facendo clic su un pulsante nella barra degli strumenti del browser. la finestra popup è definita in un documento HTML che gestisce l'interazione con l'utente.Example of the pop-up on a toolbar button
Address bar button (page action)Un pulsante nella barra degli indirizzi del browser che invia un evento all'estensione quando si fa clic. Per impostazione predefinita, il pulsante è nascosto in tutte le schede.Example showing an address bar button (page action)
Address bar button with a popupUna finestra popup che si attiva facendo clic su un pulsante nella barra degli indirizzi del browser. La finestra popup è definita in un documento HTML che gestisce l'interazione con l'utente.Example of a popup on the address bar button
Context menu itemElementi del menu, caselle di controllo e pulsanti di opzione su uno o più menu di scelta rapida del browser. Inoltre, i menu possono essere strutturati aggiungendo separatori. Quando si fa clic su una voce del menu, un evento viene inviato all'estensione.Example of content menu items added by a WebExtension, from the context-menu-demo example
Sidebar +

Un documento HTML visualizzato accanto a una pagina Web, con l'opzione per contenuti unici per pagina. La barra laterale viene aperta quando viene installata l'estensione, quindi obbedisce alla selezione della visibilità della barra laterale dell'utente. L'interazione dell'utente all'interno della barra laterale è gestita dal suo documento HTML.

+ 		Example of a sidebar
Options pageUna pagina che consente di definire le preferenze della vostra estensione che gli utenti possono modificare. L'utente può accedere a questa pagina dal gestore dei componenti aggiuntivi del browser.Example showing the options page content added in the favorite colors example.
Extension pageUtilizzare le pagine Web incluse nell'estensione per fornire moduli, aiuto o qualsiasi altro contenuto richiesto, all'interno di finestre o schede.Example of a simple bundled page displayed as a detached panel.
NotificationNotifiche temporanee visualizzate all'utente tramite il meccanismo delle notifiche del sistema operativo sottostante. Invia un evento all'estensione quando l'utente fa clic su una notifica o quando una notifica si chiude (automaticamente o su richiesta dell'utente).Example of an extension triggered system notification
Address bar suggestionOffre suggerimenti personalizzati sulla barra degli indirizzi quando l'utente inserisce una parola chiave.Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
Developer tools panelUna scheda con un documento HTML associato che viene visualizzato negli strumenti di sviluppo del browser.Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
+ +

Le seguenti guide pratiche forniscono indicazioni dettagliate per la creazione di alcune di queste opzioni dell'interfaccia utente:

+ + diff --git a/files/it/mozilla/bugzilla/index.html b/files/it/mozilla/bugzilla/index.html new file mode 100644 index 0000000000..83c9832732 --- /dev/null +++ b/files/it/mozilla/bugzilla/index.html @@ -0,0 +1,58 @@ +--- +title: Bugzilla +slug: Mozilla/Bugzilla +tags: + - Bugzilla + - Developing Mozilla + - 'Developing_Mozilla:Tools' + - NeedsTranslation + - QA + - Tools + - TopicStub +translation_of: Mozilla/Bugzilla +--- +

bugzilla.mozilla.org (often abbreviated b.m.o) is Mozilla.org's bug-tracking system, a database for recording bugs and enhancement requests for Firefox, Thunderbird, SeaMonkey, Camino, and other mozilla.org projects.

+ +
+
+

Documentation about B.m.o.

+ +
+
What to do and what not to do in Bugzilla
+
Tips for how to use Bugzilla, as well as things you should avoid.
+
Bugzilla etiquette
+
A guide to etiquette; this guide will help you understand how best to conduct yourself on b.m.o. and how using proper manners and civility will help ensure your problem gets solved sooner rather than later.
+
How to tell if a bug has already been reported
+
It's useful (but not mandatory) for you to check if the problem you're reporting has been already tracked. This guide will help you do so.
+
Quality assurance
+
Documentation about quality assurance at Mozilla.
+
Bug writing guidelines
+
A guide to writing a good, understandable, bug that will be easily followed by the development team.
+
How to submit a patch
+
If you've fixed a bug, or have implemented a new feature, you'll need to get your patch into the tree so it can become part of the product. This guide will teach you how!
+
+ +

View All...

+
+ +
+

Other materials

+ + + +

Tools

+ +
    +
  • Bugzilla Todos lists review and flag requests, patches to check in, unfulfilled requests you made of other people, and assigned bugs.
    • +
  • Bz Kanban is a board to visualize the status of bugs within a milestone.
    • +
+
+
diff --git a/files/it/mozilla/bugzilla/testopia/index.html b/files/it/mozilla/bugzilla/testopia/index.html new file mode 100644 index 0000000000..a7b2105705 --- /dev/null +++ b/files/it/mozilla/bugzilla/testopia/index.html @@ -0,0 +1,165 @@ +--- +title: Testopia +slug: Mozilla/Bugzilla/Testopia +tags: + - Questo documento non ha tag +translation_of: Mozilla/Bugzilla/Testopia +--- +

Testopia è un "test case management system" cioè un "gestore per tenere traccia dei test" fornito come estensione di Bugzilla. E' stato progettato come tool generico permettendo di integrare i report dei difetti (bug reporting) nelle vostre prove.  Benché progettato pensando al Software Testing, può essere usato per tenere traccia dei test su qualsiasi problematica del processo ingegneristico.

+ +

Testopia 2.5

+ +

Questa versione supporta Bugzilla 4.2 e la bella notizia è che non richiede più di applicare correzioni (patch) a Bugzilla stesso. Se stai aggiornando Testopia da una precedente versione, per favore togli le correzioni precedentemente applicate prima di proseguire.  Un'istallazione pulita richiede soltanto di scompattatare (untar) il pacchetto nella cartella radice di Bugzilla e lanciare (il solito) checksetup(.pl).
+ I ringraziamenti vanno a LpSolit del gruppo di sviluppatori di Bugzilla che ha reso possibile ciò.

+ +

Testopia 2.4 - Nota importante!

+ +

Se stai facendo un aggiornamento su un filesystem case sensitive (cioè che differenzia tra lettere maiuscole e minuscole), devi rimuovere la cartella testopia presente nella cartella delle estensioni (extensions) di Bugzilla . Se hai fatto delle modifiche sul codice sorgente di "testopia", devi farne il merge (riportare le stesse modifiche) nella nuova cartella "Testopia" (nota la T maiuscola). Se stai lavorando con un OS come Windows, che non differenzia tra maiuscole e minuscole, per prima cosa rinomina la vecchia cartella testopia (ad esempio testopia-old) e quindi scompatta la nuova distribuzione (tarball). Puoi ora fare il merge delle tue modifiche prima di cancellare la vecchia versione.

+ +

AVVERTENZA PER CHI USA LE API:  l'utilizzo dei parametri posizionali è stato deprecato. D'ora in poi tutti i parametri andrebbero trasmessi in un hash (struct, dict, hashmap o comunque vi piaccia chiamare una chiave e il suo valore). Benché sia stato fatto tutto il possibile per continuare a supportare i parametri posizionali, vi preghiamo di prestare attenzione al fatto che alcune chiamate alle API potrebbero fallire se non viene adottato il nuovo approccio. Inoltre, nelle versioni future questo supporto potrebbe venir meno.

+ +

Al solito si prega di fare un backup della propria istallazione prima di procedere ad una nuova installazione o aggiornamento.

+ +

Punti di integrazione (condivisione)

+ + + +

Peculiarità della versione 2.4 (Bugzilla 3.6.x)

+ + + +

Peculiarità della versione 2.3 (Bugzilla 3.4.x)

+ + + +

Peculiarità  della ver. 2.2 (Bugzilla 3.2 e 3.0.x)

+ +

Questa versione è un rilascio effettuato principalmente per stabilità e rendere compatibile Testopia con Bugzilla 3.2 and Bugzilla 3.0.6.  Attenzione a scaricare il pacchetto corretto rispetto alla versione di Bugzilla in uso.

+ +

Per l'istallazione seguire queste linee guida (vedere README per i dettagli):

+ +
    +
  1. Untar il pacchettone Testopia 2.4 all'interno della vostra cartella (principale) di Bugzilla.
    2. +
  2. Applicare le correzioni sui files di Bugzilla.
    + Nei sistemi Linux potreste fare così: +

    patch -p0 -i extensions/testopia/patch-3.6

    +
    3. +
  3. Al termine lanciare il solito comando di Bugzilla "checksetup.pl"
    4. +
+ +

Per aggiornare una istallazione esistente di Testopia si proceda come sopra avendo cura di togliere le vecchie correzioni PRIMA di scaricare i files. Se nell'occasione pensate anche di aggiornare Bugzilla completate questa attività prima di passare ad occuparvi di Testopia stesso.

+ +

patch -p0 -R -i extensions/testopia/patch-<version>

+ +

Dove <version> è la versione della correzione che avete applicato (versione di Bugzilla).

+ +

Presupposti

+ +

Durante lo sviluppo abbiamo deciso di utilizzare come riferimento l'ultima versione stabile di Bugzilla (attualmente la 3.4). Questo ci ha dato una buona base di partenza per il nostro lavoro. Centrare l'obiettivo nello sviluppo di plugins ed estensioni è arduo proprio come colpire un bersaglio in movimento. Questo approccio permette di traguardare nuove funzionalità spesso in anticipo sui tempi.  Quindi la compatibilità col passato può essere sacrificata per mancanza di tempo. Chiunque desiderasse aiutarci in questo sforzo è il benvenuto.

+ + + +

DA FARE

+ + + +

Guardate la Roadmap e la Bug List per maggiori dettagli.

+ +

Collegamenti

+ + + +

Cosa e dove scaricare (Downloads)

+ + + +

Sviluppatori

+ +

Greg Hendricks (corrente)
+ Vance Baarda (precedente)
+ Ed Fuentetaja (precedente)

diff --git a/files/it/mozilla/connettere/index.html b/files/it/mozilla/connettere/index.html new file mode 100644 index 0000000000..b15c279efa --- /dev/null +++ b/files/it/mozilla/connettere/index.html @@ -0,0 +1,98 @@ +--- +title: Connettere con Mozilla +slug: Mozilla/Connettere +translation_of: Mozilla/Connect +--- +
+

Facilita, ispira e collabora per rendere il Web la piattaforma principale per creare esperienze su tutti i dispositivi connessi.

+
+ + +
+
+
+
+

Hacks blog

+ +

Una risorsa chiave per le persone che sviluppano per l'Open Web, il blog Mozilla Hacks offre notizie e discussioni sulle novità nel campo delle tecnologie Web e le funzionalità del browser.

+ +
Leggi ora
+
+
+ +
+
+

Aiuta Q&A

+ +

Unisciti alle discussioni riguardanti il Web e le Web apps su Stack Overflow, dove potrai condividere le tue idee con altri sviluppatori Web.

+ +
{{anch("Developer discussions", "Search the Q&A below")}}
+ +
Mozilla Q&A su Stack Overflow
+
+
+ +
+
+

Unisciti MDN

+ +

Iscriviti a MDN! Avrai la possibilità di modificare la documentazione, creare un profilo per mostrare il tuo lavoro e ottenere l'accesso a varie funzionalità man mano che verranno implementate.

+ +
Iscriviti o effettua l'accesso
+
+
+
+ +
+

Connettiti con Mozilla

+ +

Gli sviluppatori stanno creando il futuro costruendo servizi e applicazioni di qualità per gli utenti. L'obiettivo di Mozilla Developer Relation è aiutarli ad usare tecnologie aperte e standardizzate nel portare a termine i loro progetti. Oltre alla documentazione presente su MDN offriamo aiuto e risorse per permettere loro di raggiungere i propri obiettivi, attraverso vari canali. Ti invitiamo a connetterti, imparare e condividere la tua conoscenza.

+ +

Offriamo aiuto tramite Q&A su Stack Overflow per risolvere specifiche questioni tecniche e possibili problemi. È disponibile anche una newsletter per tenerti informato sulle ultime novità nella scena del web riguardo web apps e molto altro. Iscriviti alla newsletter Apps & Hacks.

+ +

Se condividi i principi e la missione di Mozilla e vuoi aiutarci a diffonderli tra gli sviluppatori, scopri come puoi entrare a far parte degli evangelisti tecnici ed entrare a far parte del gruppo di discussione sull'evangelizzazione.

+ +

Abbiamo molti piani e idee per espandere il Mozilla Developer Program in maniera iterativa, e vogliamo la tua partecipazione. Quindi segui i tag su Stack Overflow, segui Hacks blog, ed iscriviti!

+
+ +
+
+

Q&A su Stack Overflow Vedi tutte Q&A...

+ +

Abbiamo una serie di Q&A per discutere problemi e complicazioni che si presentano durante lo sviluppo, soprattutto per Firefox OS e l'Open Web su mobile. È raggiungibile su Stack Overflow tramite l'URL http://stackoverflow.com/r/mozilla.

+ +
Stack form
+ +

Ultimi argomenti Q&A

+
+ +
 
+
+ +

Sviluppatori ad un laboratorio di Firefox OS a Madrid.

+ +
+
+

Dov'è Mozilla? Vedi i partecipanti e i dettagli nella nostra pagina Eventi...

+ +

Qui trovi una lista di rappresentanti di Mozilla che terranno dei talk a eventi a te vicini. Assicurati di parlare con loro!

+
+ +
+

Altre risorse

+ + +
+
+
+ +

 

diff --git a/files/it/mozilla/developer_guide/index.html b/files/it/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..288d4e19ac --- /dev/null +++ b/files/it/mozilla/developer_guide/index.html @@ -0,0 +1,145 @@ +--- +title: Developer Guide +slug: Mozilla/Developer_guide +tags: + - Developing Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Developer_guide +--- +

Whether you're an old hand or just getting started, articles you can find starting from this page will help you while you're working on Mozilla development.

+ + + + + + + +
+

Documentation topics

+
+
+ Getting Started
+
+ A step-by-step beginner's guide to getting involved with Mozilla.
+
+
+
+ Working with Mozilla Source Code
+
+ A code overview, how to get the code, and the coding style guide.
+
+ Build Instructions
+
+ How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.
+
+ Development process overview
+
+ An overview of the entire Mozilla development process.
+
+ Managing multiple profiles
+
+ When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.
+
+ Automated Testing
+
+ How to run Mozilla's automated tests, and how to write new tests.
+
+ How to submit a patch
+
+ After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.
+
+ Getting documentation updated
+
+ How to ensure that documentation is kept up to date as you develop.
+
+ Mozilla modules and module ownership
+
+ This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.
+
+ Code snippets
+
+ Useful code samples for a wide variety of things you might need to figure out how to do.
+
+ Mozilla development strategies
+
+ Tips for how to make the most of your time working on the Mozilla project.
+
+ Debugging
+
+ Find helpful tips and guides for debugging Mozilla code.
+
+ Performance
+
+ Performance guides and utilities to help you make your code perform well (and to play nicely with others).
+
+ The Mozilla platform
+
+ Information about the workings of the Mozilla platform.
+
+ Adding APIs to the navigator object {{ gecko_minversion_inline("9.0") }}
+
+ How to augment the {{ domxref("window.navigator") }} object with additional APIs.
+
+ Interface Compatibility
+
+ Guidelines for modifying scriptable and binary APIs in Mozilla.
+
+ Customizing Firefox
+
+ Information about creating customized versions of Firefox.
+
+ Virtual ARM Linux environment
+
+ How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.
+
+ Obsolete Build Caveats and Tips
+
+ A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.
+
+ 		+

Tools

+
+
+ Bugzilla
+
+ The Bugzilla database used to track issues for Mozilla projects.
+
+ MXR
+
+ Browse and search the Mozilla source code repository on the Web.
+
+ Bonsai
+
+ The Bonsai tool lets you find out who changed what file in the repository, and when they did it.
+
+ Mercurial
+
+ The distributed version-control system used to manage Mozilla's source code.
+
+ Tinderbox
+
+ Tinderbox shows the status of the tree (whether or not it currently builds successfully).  Check this before checking in and out, to be sure you're working with a working tree.
+
+ Crash tracking
+
+ Information about the Socorro and Talkback crash reporting systems.
+
+ Performance tracking
+
+ See performance information for Mozilla projects.
+
+ Callgraph
+
+ A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.
+
+ Developer forums
+
+ A topic-specific list of discussion forums where you can talk about Mozilla development issues.
+
+ Mozilla Platform Development Cheat Sheet
+
+ Brian Bondy's list of frequently referenced information for platform developers.
+
+
+

 

diff --git a/files/it/mozilla/firefox/developer_edition/index.html b/files/it/mozilla/firefox/developer_edition/index.html new file mode 100644 index 0000000000..f735815e52 --- /dev/null +++ b/files/it/mozilla/firefox/developer_edition/index.html @@ -0,0 +1,60 @@ +--- +title: Developer Edition +slug: Mozilla/Firefox/Developer_Edition +tags: + - Beginner + - Firefox + - Landing + - NeedsTranslation + - TopicStub + - 'etichette{locale}' +translation_of: Mozilla/Firefox/Developer_Edition +--- +
{{FirefoxSidebar}}

A version of Firefox that's tailored for web developers.

+ +

Download Firefox Developer Edition

+ +
+
+
+

The latest Firefox features

+ +

Firefox Developer Edition replaces the Aurora channel in the Firefox Release Process. Like Aurora, features will land in the Developer Edition every six weeks, after they have stabilized in Nightly builds.

+ +

By using the Developer Edition, you gain access to tools and platform features at least 12 weeks before they reach the main Firefox release channel.

+ +

Find out what's new in the Developer Edition.

+
+ +
+

A distinct theme

+ +

This includes quicker access to the developer tools.

+ +

Experimental developer tools

+ +

We'll include experimental tools that aren't yet ready to ride the trains to release.

+ +

For example, the Developer Edition includes the Valence add-on, which enables you to connect the Firefox developer tools to other browsers such as Chrome on Android and Safari on iOS.

+
+
+ +
+
+

A separate profile

+ +

Firefox Developer Edition uses a separate profile from other Firefox versions installed on your machine. This means you can easily run the Developer Edition alongside your release or Beta version of Firefox.

+ +
+

Note: This means that the first time you start up the Developer Edition, you will see a completely uncustomized browser, with no add-ons, bookmarks, or history. You can use Firefox Sync if you want to unify your settings between the Developer Edition and other editions of Firefox.

+
+
+ +
+

Set up for web developers

+ +

We've set default preference values tailored for web developers. For example, chrome and remote debugging are enabled by default.

+
+
+ +

 

diff --git a/files/it/mozilla/firefox/developer_edition/ripristinare/index.html b/files/it/mozilla/firefox/developer_edition/ripristinare/index.html new file mode 100644 index 0000000000..d087d53194 --- /dev/null +++ b/files/it/mozilla/firefox/developer_edition/ripristinare/index.html @@ -0,0 +1,27 @@ +--- +title: Ripristinare +slug: Mozilla/Firefox/Developer_Edition/Ripristinare +translation_of: Mozilla/Firefox/Developer_Edition/Reverting +--- +
{{FirefoxSidebar}}

Ripristinare il tema dalla Developer Edition

+ +


+ Se vuoi usare la Developer Edition, ma preferisci il tema 'Australis' usato in Firefox e Firefox Beta, puoi tornare al normale tema Firefox : Basta aprire il pannello "Customize" e cliccare su "Use Firefox Developer Edition Theme".

+ +

{{EmbedYouTube("OvJwofTjsNg")}}

+ +

Il tema Developer Edition non è ancora compatibile con temi "lightweight", per cui se usate questi temi, dovete ripristinare il tema Australis.

+ +

Ripristinare Firefox Aurora

+ +


+ Se volete tutte le caratteristiche della "pre-beta" che sono nella Firefox Developer Edition, ma non volete nessuna delle altre modifiche, potete ripristinare il sistema a qualcosa di simile al vecchio Firefox Aurora. Ciò ripristinerà anche il tuo profilo prima dell'aggiornamento e i dati delle sessioni.

+ +

Questo si articola in due fasi, da eseguire in quest'ordine:

+ +
    +
  1. Aprire la pagina preferenze della Developer Edition e disabilitare la casella "Allow Firefox Developer Edition and Firefox to run at the same time". Ti verrà richiesto di riavviare il browser.
    2. +
  2. Dopo il riavvio, puoi ripristinare il tema dalla developer edition, aprendo il pannello "Customize" e cliccando su "Use Firefox Developer Edition Theme".
    3. +
+ +

{{EmbedYouTube("0Ofq-vlw8Qw")}}

diff --git "a/files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" "b/files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" new file mode 100644 index 0000000000..2cc528ad36 --- /dev/null +++ "b/files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" @@ -0,0 +1,1506 @@ +--- +title: Funzionalità sperimentali in Firefox +slug: Mozilla/Firefox/Funzionalità_sperimentali +translation_of: Mozilla/Firefox/Experimental_features +--- +
{{FirefoxSidebar}}
+ +

In order to test new features, Mozilla publishes a test version of the Firefox browser, Firefox Nightly, every day. These nightly builds of Firefox typically include experimental or partially-implemented features, including those for proposed or cutting-edge Web platform standards.

+ +

This page lists features that are in Nightly versions of Firefox along with information on how to activate them, if necessary. You can test your Web sites and applications before these features get released and ensure everything will still work with the latest Web technology capabilities.

+ +

To test these experimental features, you need to download Firefox Nightly or Firefox Developer Edition. Which you need is described alongside each feature's description below.

+ +
+

Editor's note: When adding features to these tables, please try to include a link to the relevant bug or bugs using the {{TemplateLink("bug")}} macro: \{{bug(bug-number)}}.

+
+ +

HTML

+ +

Element: <dialog>

+ +

The HTML {{HTMLElement("dialog")}} element and its associated DOM APIs provide support for HTML-based modal dialog boxes. The current implementation is a little inelegant but is basically functional. See {{bug(840640)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly53No
Developer Edition53No
Beta53No
Release53No
Preference namedom.dialog_element.enabled
+ +

Global attribute: inputmode

+ +

Our implementation of the inputmode global attribute has been updated as per the WHATWG spec ({{bug(1509527)}}), but we still need to make other changes too, like making it available on contenteditable content. See also {{bug(1205133)}} for details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly75Yes
Developer Edition75No
Beta75No
Release75No
Preference namedom.forms.inputmode
+ + + +

The {{HTMLElement("link")}} element's {{htmlattrxref("rel", "link")}} attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering. Read Preloading content with rel="preload" for more details. For more details on the status of this feature, see {{bug(1639607)}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly78Yes
Developer Edition78Yes
Beta78Yes
Release78No
Preference namenetwork.preload
+ +

CSS

+ +

Display stray control characters in CSS as hex boxes

+ +

This feature renders control characters (Unicode category Cc) other than tab (U+0009), line feed (U+000A), form feed (U+000C), and carriage return (U+000D) as a hexbox when they are not expected.
+
+ See {{bug(1099557)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly43Yes
Developer Edition43No
Beta43No
Release43No
Preference namelayout.css.control-characters.enabled or layout.css.control-characters.visible
+ +

Property: initial-letter

+ +

The {{cssxref("initial-letter")}} CSS property is part of the {{SpecName("CSS3 Inline")}} specification and allows you to specify how dropped, raised, and sunken initial letters are displayed.
+
+ See {{bug(1223880)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly50No
Developer Edition50No
Beta50No
Release50No
Preference namelayout.css.initial-letter.enabled
+ +

Conic gradients

+ +

Conic gradients expand CSS gradients to allow the color transitions to be rendered circling around a center point rather than radiating from it. See {{bug(1175958)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namelayout.css.conic-gradient.enabled and gfx.webrender.all
+ +

Pseudo-class: :focus-visible

+ +

Allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g. when tabbing between elements), and not when they are focused using a mouse or other pointing device. See bug 1617600 for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namelayout.css.focus-visible.enabled
+ +

Single numbers as aspect ratio in media queries

+ +

Support for using a single {{cssxref("number")}} as a {{cssxref("ratio")}} when specifying the aspect ratio for a media query. See {{bug(1565562)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly70No
Developer Edition70No
Beta70No
Release70No
Preference namelayout.css.aspect-ratio-number.enabled
+ +

Property: backdrop-filter

+ +

The {{cssxref("backdrop-filter")}} property applies filter effects to the area behind an element. See {{bug(1178765)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly70No
Developer Edition70No
Beta70No
Release70No
Preference namelayout.css.backdrop-filter.enabled
+ +

Grid: Masonry layout

+ +

Adds support for a masonry style layout based on grid layout where one axis has a masonry layout while having normal grid layout on the other. This allows to create gallery style layouts like on Pinterest. See {{bug(1607954)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly77No
Developer Edition77No
Beta77No
Release77No
Preference namelayout.css.grid-template-masonry-value.enabled
+ +

APIs

+ +

Graphics: Canvas, WebGL, and WebGPU

+ +

Interface: OffscreenCanvas

+ +

The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered offscreen. It is available in both the window and worker contexts. See {{bug(1390089)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly44No
Developer Edition44No
Beta44No
Release44No
Preference namegfx.offscreencanvas.enabled
+ +

Hit regions

+ +

Whether the mouse coordinates are within a particular area on the canvas is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly30No
Developer Edition30No
Beta30No
Release30No
Preference namecanvas.hitregions.enabled
+ +

WebGL: Draft extensions

+ +

When this preference is enabled, any WebGL extensions currently in "draft" status which are being tested are enabled for use. Currently, there are no WebGL extensions being tested by Firefox.

+ +

WebGPU API

+ +

This new API provides low-level support for performing computation and graphics rendering using the {{interwiki("wikipedia", "Graphics Processing Unit")}} (GPU) of the user's device or computer. The specification is still a work-in-progress. See {{bug(1602129)}} for our progress on this API.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly73No
Developer Edition73No
Beta73No
Release73No
Preference namedom.webgpu.enabled
+ +

HTML DOM API

+ +

Global event: beforeinput

+ +

The global {{domxref("HTMLElement.beforeinput_event", "beforeinput")}} event is sent to an {{HTMLElement("input")}} element—or any element whose {{htmlattrxref("contenteditable")}} attribute is enabled—immediately before the element's value changes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly74No
Developer Edition74No
Beta74No
Release74No
Preference namedom.input_events.beforeinput.enabled
+ +

HTMLMediaElement method: setInkId()

+ +

{{domxref("HTMLMediaElement.setSinkId()")}} allows you to set the sink ID of an audio output device on an {{domxref("HTMLMediaElement")}}, thereby changing where the audio is being output. See {{bug(934425)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly64No
Developer Edition64No
Beta64No
Release64No
Preference namemedia.setsinkid.enabled
+ +

HTMLMediaElement properties: audioTracks and videoTracks

+ +

Enabling this feature adds the {{domxref("HTMLMediaElement.audioTracks")}} and {{domxref("HTMLMediaElement.videoTracks")}} properties to all HTML media elements. However, because Firefox doesn't currently suport multiple audio and video tracks, the most common use cases for these properties don't work, so they're both disabled by default. See {{bug(1057233)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly33No
Developer Edition33No
Beta33No
Release33No
Preference namemedia.track.enabled
+ +

DOM

+ +

Document property: autoplayPolicy

+ +

The {{domxref("document")}} property {{domxref("Document.autoplayPolicy", "autoplayPolicy")}} returns a string indicating how the browser handles requests to automatically play media (either using the {{domxref("HTMLMediaElement.autoplay", "autoplay")}} property on a media element or by attempting to trigger playback from JavaScript code. The spec for this API is still being written. The value changes over time depending on what the user is doing, their preferences, and the state of the browser in general. Potential values include allowed (autoplay is currently permitted), allowed-muted (autoplay is allowed but only with no—or muted—audio), and disallowed (autoplay is not allowed at this time). See {{bug(1506289)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly66No
Developer Edition66No
Beta66No
Release66No
Preference namedom.media.autoplay.autoplay-policy-api
+ +

GeometryUtils methods: convertPointFromNode(), convertRectFromNode(), and convertQuadFromNode()

+ +

The {{domxref("GeometryUtils")}} methods {{domxref("GeometryUtils.convertPointFromNode", "convertPointFromNode()")}}, {{domxref("GeometryUtils.convertRectFromNode", "convertRectFromNode()")}}, and {{domxref("GeometryUtils.convertQuadFromNode", "convertQuadFromNode()")}} map the given point, rectangle, or quadruple from the {{domxref("Node")}} on which they're called to another node. See {{bug(918189)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly31Yes
Developer Edition31No
Beta31No
Release31No
Preference namelayout.css.getBoxQuads.enabled
+ +

GeometryUtils method: getBoxQuads()

+ +

The {{domxref("GeometryUtils")}} method {{domxref("GeometryUtils.getBoxQuads", "getBoxQuads()")}} returns the CSS boxes for a {{domxref("Node")}} relative to any other node or viewport. See {{bug(917755)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly31Yes
Developer Edition31No
Beta31No
Release31No
Preference namelayout.css.convertFromNode.enable
+ +

Payment Request API

+ +

Primary payment handling

+ +

The Payment Request API provides support for handling web-based payments within web content or apps. Due to a bug that came up during testing of the user interface, we have decided to postpone shipping this API while discussions over potential changes to the API are held. Work is ongoing. See {{bug(1318984)}} for more details on the state of this API.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly55No
Developer Edition55No
Beta55No
Release55No
Preference namedom.payments.request.enabled and
+ dom.payments.request.supportedRegions
+ +

Basic Card API

+ +

Extends the Payment Request API with dictionaries that define data structures describing card payment types and payment responses. See {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly56No
Developer Edition56No
Beta56No
Release56No
Preference namedom.payments.request.enabled and
+ dom.payments.request.supportedRegions
+ +

Visual Viewport API

+ +

The Visual Viewport API provides access to information describing the position of the {{Glossary("visual viewport")}} relative to the document as well as to the window's content area. It also supports events to monitor changes to this information. See {{bug(1550390)}} for more details. There currently is no real plan to ship this on desktop, but you can track the state of that just in case it changes in {{bug(1551302)}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly63No
Developer Edition63No
Beta63No
Release63Starting in Firefox 68, on Android only
Preference namedom.visualviewport.enabled
+ +

Constructable stylesheets

+ +

The addition of a constructor to the {{domxref("CSSStyleSheet")}} interface as well as a variety of related changes makes it possible to directly create new stylesheets without having to add the sheet to the HTML. This makes it much easier to create reusable stylesheets for use with Shadow DOM. Our implementation is not yet complete; see {{bug(1520690)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly73No
Developer Edition73No
Beta73No
Release73No
Preference namelayout.css.constructable-stylesheets.enabled
+ +

WebRTC and media

+ +

The following experimental features include those found in the WebRTC API, the Web Audio API, the Media Session API, the Media Source Extensions API, the Encrypted Media Extensions API, and the Media Capture and Streams API.

+ +

Media Session API

+ +

The entire Firefox implementation of the Media Session API is currently experimental. This API is used to customize the handling of media-related notifications, to manage events and data useful for presenting a user interface for managing media playback, and to obtain media file metadata. See {{bug(1112032)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly71Yes
Developer Edition71No
Beta71No
Release71No
Preference namedom.media.mediasession.enabled
+ +

Asynchronous SourceBuffer add and remove

+ +

This adds the promise-based methods {{domxref("SourceBuffer.appendBufferAsync", "appendBufferAsync()")}} and {{domxref("SourceBuffer.removeAsync", "removeAsync()")}} for adding and removing media source buffers to the {{domxref("SourceBuffer")}} interface. See {{bug(1280613)}} and {{bug(778617)}} for more information.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly62No
Developer Edition62No
Beta62No
Release62No
Preference namemedia.mediasource.experimental.enabled
+ +

AVIF (AV1 Image File format) support

+ +

With this feature enabled, Firefox supports the AV1 Image File (AVIF) format. This is a still image file format that leverages the capabilities of the AV1 video compression algorithms to reduce image size. See {{bug(1443863)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly77No
Developer Edition77No
Beta77No
Release77No
Preference nameimage.avif.enabled
+ +

Security and privacy

+ +

Block plain text requests from Flash on encrypted pages

+ +

In order to help mitigate man-in-the-middle (MitM) attacks caused by Flash content on encrypted pages, a preference has been added to treat OBJECT_SUBREQUESTs as active content. See {{bug(1190623)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly59No
Developer Edition59No
Beta59No
Release59No
Preference namesecurity.mixed_content.block_object_subrequest
+ +

Insecure page labeling

+ +

These two preferences add a "Not secure" text label in the address bar next to the traditional lock icon when a page is loaded insecurely (that is, using {{Glossary("HTTP")}} rather than {{Glossary("HTTPS")}}). See {{bug(1335970)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly60No
Developer Edition60No
Beta60No
Release60No
Preference namesecurity.insecure_connection_text.enabled for normal browsing mode; security.insecure_connection_text.pbmode.enabled for private browsing mode
+ +

Upgrading mixed display content

+ +

When enabled, this preference causes Firefox to automatically upgrade requests for media content from HTTP to HTTPS on secure pages. The intent is to prevent mixed-content conditions in which some content is loaded securely while other content is insecure. If the upgrade fails (because the media's host doesn't support HTTPS), the media is not loaded. See {{bug(1435733)}} for more details.

+ +

This also changes the console warning; if the upgrade succeeds, the message indicates that the request was upgraded, instead of showing a warning.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly60No
Developer Edition60No
Beta60No
Release60No
Preference namesecurity.mixed_content.upgrade_display_content
+ + + +

Following Safari's lead, this experiment causes setting the {{htmlattrxref("target", "a")}} attribute on an {{HTMLElement("a")}} element to _blank (that is, using target="_blank") to imply that the default value of {{htmlattrxref("rel", "a")}} is noopener rather than opener, which is the usual default. To bypass this security measure, web developers should explicitly request an opener relationship using rel="opener" on their <a> elements that use target="_blank" to open the link into a new window or tab. See {{bug(1503681)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly65Yes
Developer Edition65Yes
Beta65Yes
Release65No
Preference namedom.targetBlankNoOpener.enabled
+ +

FTP support disabled

+ +

For security reasons, Mozilla intends to remove support for {{Glossary("FTP")}} from Firefox in 2010, effective in Firefox 82. See {{bug(1622409)}} for implementation progress. The network.ftp.enabled preference must be enabled (set to true) to allow FTP to be used.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly77Yes
Developer Edition77No
Beta77No
Release77No
Preference namenetwork.ftp.enabled
+ +

Developer tools

+ +

Mozilla's developer tools are constantly evolving. We experiment with new ideas, add new features, and test them on the Nightly and Developer Edition channels before letting them go through to beta and release. The features below are the current crop of experimental developer tool features.

+ +

Color scheme simulation

+ +

Adds an option to simulate different color schemes allowing to test {{cssxref("@media/prefers-color-scheme", "@prefers-color-scheme")}} media queries. Using this media query lets your style sheet specify whether it prefers a light or dark user interface. This feature lets you test your code without having to change settings in your browser (or operating system, if the browser follows a system-wide color scheme setting).

+ +

See {{bug(1550804)}} and {{bug(1137699)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly72No
Developer Edition72No
Beta72No
Release72No
Preference namedevtools.inspector.color-scheme-simulation.enabled
+ +

Execution context selector

+ +

This feature displays a button on the console's command line that lets you change the context in which the expression you enter will be executed. See {{bug(1605154)}} and {{bug(1605153)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namedevtools.webconsole.input.context
+ +

Mobile gesture support in Responsive Design Mode

+ +

Mouse gestures are used to simulate mobile gestures like swiping/scrolling, double-tap and pinch-zooming and long-press to select/open the context menu. See {{bug(1621781)}}, {{bug(1245183)}}, and {{bug(1401304)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly76[1]Yes
Developer Edition76[1]Yes
Beta76[1]Yes
Release76[1]No
Preference namen/a
+ +

[1] Support for zooming using the double-tap gesture was added in Firefox 76. The other gestures were added for Firefox 79.

+ +

Compatibility panel

+ +

A side panel for the Page Inspector that shows you information detailing your app's cross-browser compatibility status. See {{bug(1584464)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly71Yes
Developer Edition71Yes
Beta71No
Release71No
Preference namedevtools.inspector.compatibility.enabled
+ +

UI

+ +

Desktop zooming

+ +

This feature lets you enable smooth pinch zooming on desktop computers without requiring layout reflows, just like mobile devices do. See {{bug(1245183)}} for further details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly42No
Developer Edition42No
Beta42No
Release42No
Preference nameapz.allow_zooming and (on Windows) apz.windows.use_direct_manipulation
+ +

See also

+ + diff --git a/files/it/mozilla/firefox/index.html b/files/it/mozilla/firefox/index.html new file mode 100644 index 0000000000..c49c144593 --- /dev/null +++ b/files/it/mozilla/firefox/index.html @@ -0,0 +1,52 @@ +--- +title: Firefox +slug: Mozilla/Firefox +tags: + - Firefox + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Firefox +--- +
{{FirefoxSidebar}}
+ +
+

Firefox è il popolare browser web di Mozilla, disponibile per varie piattaforme, tra cui Windows, Mac OS X, e Linux sul desktop, Android e altri dispositivi mobile. Con la sua ampia compatibilità, le ultime novità nelle tecnologie web e i potenti strumenti di sviluppo, Firefox è una scelta fantastica sia per gli sviluppatori web che per gli utenti.

+ +

Firefox è un progetto open source; la maggior parte del codice è stata scritta dalla nostra enorme comunità di volontari. In questo documento è possibile imparare come contribuire al progetto Firefox e anche trovare link alle informazioni riguardanti lo sviluppo di componenti aggiuntivi per Firefox, utilizzare gli strumenti di sviluppo e altro ancora.

+ +
+

Impara a creare componenti aggiuntivi per Firefox, sviluppare e compilare Firefox stesso e come funzionano le parti interne di Firefox e dei suoi sottoprogetti.

+
+ + + +

Firefox è disponibile su quattro canali. Il canale release è adatto all'uso quotidiano; è la versione fornita e usata dalle persone di tutto il mondo. Gli altri canali vengono utilizzati dai tester, dai pionieri e dai veri entusiasti.

+ + +
diff --git a/files/it/mozilla/firefox/multiprocess_firefox/index.html b/files/it/mozilla/firefox/multiprocess_firefox/index.html new file mode 100644 index 0000000000..316b048c8c --- /dev/null +++ b/files/it/mozilla/firefox/multiprocess_firefox/index.html @@ -0,0 +1,73 @@ +--- +title: Multiprocess Firefox +slug: Mozilla/Firefox/Multiprocess_Firefox +translation_of: Mozilla/Firefox/Multiprocess_Firefox +--- +
{{FirefoxSidebar}}

Nelle attuali versioni di Firefox Desktop, l'intero browser gira in un singolo processo del sistema operativo. In particolare, JavaScript che avvia la UI del browser (conosciuta anche come "codice chrome") gira nello stesso processo così come nelle pagine web (meglio conosciute come "contenuto" o "contenuto web").
+
+ Le future versioni di Firefox avvieranno la UI del browser in un processo separato dal contenuto web. Nella iniziale iterazione di questa architettura tutte le schede del browser funzioneranno nello stesso processo, e la UI del browser girerà in un processo differente. Nelle prossime iterazioni, ci aspettiamo di avere più di un unico processo di contenuti. Il progetto di Firefox multiprocesso che stiamo consegnando è chiamato Electrolysis, a volte abbreviato in e10s.

+ +

Le normali pagine web non sono influenzate da Firefox multiprocesso. Lo staff che sta lavorando a Firefox stesso e gli sviluppatori di Firefox add-on saranno influenzati se il loro i loro rilasci di codice potranno aver accesso diretto al contenuto web.

+ +

Anziché accedere direttamente al contenuto, JavaScript di chrome dovrà usare il message manager per accedere al contenuto. Per rendere più semplice la transizione abbiamo implementato il Cross Process Object Wrappers e alcuni integratori di compatibilità per sviluppatori di add-on. Se sei uno sviluppatore di add-on che si sta chiedendo se ne sei influenzato, vedi la guida per operare con Firefox multiprocesso.

+ +

Firefox Multiprocesso è attualmente abilitato di default nelle builds di Nightly.

+ +
+
+
+
+
Technical overview
+
A very high-level view of how multiprocess Firefox is implemented.
+
Glossary
+
A reference for the jargon used in multiprocess Firefox.
+
The message manager
+
How to communicate between chrome and content.
+
Message Manager interfaces
+
Includes links to the API reference for the message manager interfaces.
+
Frame script environment
+
The environment frame scripts run in, and especially how it differs from the environment for chrome code.
+
+
+ +
+
+
Motivation
+
Why we're implementing multiprocess Firefox: performance, security, and stability.
+
Add-on migration guide
+
If you're an add-on developer, find out if you're affected and how to update your code.
+
Cross Process Object Wrappers
+
Cross Process Object Wrappers are a migration aid, giving chrome code synchronous access to content.
+
Debugging frame scripts
+
Using the Browser Content Toolbox to debug frame scripts.
+
+
+
+ +
+
+
+
+
Limitations of chrome scripts
+
Practices that will no longer work in chrome code, and how to fix them.
+
+
+ +
+
+
Limitations of frame scripts
+
Practices that will not work inside frame scripts, and what to do instead.
+
+
+
+ +
+

Contact us

+ +

Find out more about the project, get involved, or ask us your questions.

+ + diff --git a/files/it/mozilla/firefox/releases/40/index.html b/files/it/mozilla/firefox/releases/40/index.html new file mode 100644 index 0000000000..0b57ccb6ba --- /dev/null +++ b/files/it/mozilla/firefox/releases/40/index.html @@ -0,0 +1,117 @@ +--- +title: Firefox 40 per sviluppatori +slug: Mozilla/Firefox/Releases/40 +tags: + - Firefox + - Rilasci +translation_of: Mozilla/Firefox/Releases/40 +--- +
{{FirefoxSidebar}}
Installa Firefox Nightly
+ +

Novità per Sviluppatori Web

+ +

Strumenti per sviluppatore

+ + + +

CSS

+ + + +

HTML

+ +

Nessuna novità.

+ +

JavaScript

+ + + +

Interfacce/APIs/DOM

+ + + +

MathML

+ +

Nessuna novità.

+ +

SVG

+ +

Nessuna novità.

+ +

Audio/Video

+ +

Nessuna novità.

+ +

Networking

+ +

Nessuna novità.

+ +

Sicurezza

+ +

Nessuna novità.

+ +

Novità per componenti aggiuntivi e sviluppatori Mozilla

+ +

XUL

+ +

Nessuna novità.

+ +

Moduli di codice JavaScript

+ + + +

XPCOM

+ +

Nessuna novità.

+ +

Altro

+ + + +

Vedi anche

+ + + +

Vecchie versioni

+ +

{{Firefox_for_developers('39')}}

diff --git a/files/it/mozilla/firefox/releases/42/index.html b/files/it/mozilla/firefox/releases/42/index.html new file mode 100644 index 0000000000..5d02b8ce79 --- /dev/null +++ b/files/it/mozilla/firefox/releases/42/index.html @@ -0,0 +1,189 @@ +--- +title: Firefox 42 for developers +slug: Mozilla/Firefox/Releases/42 +tags: + - Firefox + - Note di rilascio + - Rilasci +translation_of: Mozilla/Firefox/Releases/42 +--- +
{{FirefoxSidebar}}
+ +
Installa Firefox Developer Edition Firefox 42 was released on November 3, 2015. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
+ +

Modifiche per gli sviluppatori

+ +

Strumenti per gli sviluppatori

+ +

In evidenza:

+ + + +

All devtools bugs fixed between Firefox 41 and Firefox 42.

+ +

CSS

+ + + +

HTML

+ + + +

JavaScript

+ + + +

Interfaces/APIs/DOM

+ +

DOM & HTML DOM

+ + + +

Service Workers

+ + + +

Web Animations API

+ +

Our experimental implementation of Web Animations API have been extended to support:

+ + + +

Web Components

+ +

Our experimental implementation of the Shadow DOM has been modified:

+ + + +

WebGL

+ + + +

WebRTC

+ + + +

New APIs

+ + + +

Miscellaneous

+ + + +

MathML

+ +

No change.

+ +

SVG

+ +

No change.

+ +

Audio/Video

+ +

No change.

+ +

HTTP

+ +

No change.

+ +

Networking

+ + + +

Sicurezza

+ + + +

Cambiamenti per gli add-on e Mozilla developers

+ +

Interfaces

+ +

nsIContentPolicy

+ + + +

XUL

+ +

No change.

+ +

JavaScript code modules

+ +

No change.

+ +

XPCOM

+ +

No change.

+ +

Other

+ +

No change.

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers('41')}}

diff --git a/files/it/mozilla/firefox/releases/59/index.html b/files/it/mozilla/firefox/releases/59/index.html new file mode 100644 index 0000000000..7d1cec5737 --- /dev/null +++ b/files/it/mozilla/firefox/releases/59/index.html @@ -0,0 +1,203 @@ +--- +title: Firefox 59 per sviluppatori +slug: Mozilla/Firefox/Releases/59 +translation_of: Mozilla/Firefox/Releases/59 +--- +
{{FirefoxSidebar}}

Questo articolo fornisce informazioni sulle modifiche in Firefox 59 che interesseranno gli sviluppatori. Firefox 59 è l'attuale versione Beta di Firefox, che  sarà pubblicata il 13 marzo 2018.

+ +

Cambios pro le disveloppatores de web

+ +

Utensiles pro le disveloppatores de web

+ + + +

HTML

+ +

The {{HTMLElement("textarea")}} element's {{htmlattrxref("autocomplete", "textarea")}} attribute has been implemented. This lets you enable or disable form auto-fill for the element.

+ +

CSS

+ + + +

SVG

+ +

No changes.

+ +

JavaScript

+ +

No changes.

+ +

APIs

+ +

New APIs

+ +

{{domxref("PointerEvent","PointerEvents")}} have been enabled in Firefox Desktop ({{bug(1411467)}}).

+ +

DOM

+ + + +

DOM events

+ +

The {{domxref("Event.composedPath()")}} method has been implemented ({{bug(1412775)}}).

+ +

Service workers

+ + + +

Media and WebRTC

+ + + +

Canvas and WebGL

+ +

No changes.

+ +

CSSOM

+ +

The {{domxref("CSSNamespaceRule")}} interface and its namespaceURL and prefix properties have been implemented ({{bug(1326514)}}).

+ +

HTTP

+ +

No changes.

+ +

Security

+ + + +

Plugins

+ +

No changes.

+ +

Other

+ +

No changes.

+ +

Removals from the web platform

+ +

HTML

+ +

The non-standard version parameter of the {{htmlelement("script")}} element's {{htmlattrxref("type","script")}} attribute (e.g.  type="application/javascript;version=1.8") has been removed ({{bug(1428745)}}).

+ +

CSS

+ + + +

JavaScript

+ + + +

APIs

+ + + +

SVG

+ +

Support for SMIL's accessKey feature has been removed ({{bug(1423098)}}).

+ +

Other

+ +

Support for the non-standard pcast:// and feed:// protocols has been removed from Firefox ({{bug(1420622)}}).

+ +

Changes for add-on and Mozilla developers

+ +

WebExtensions

+ + + +

See also

+ +

Site compatibility for Firefox 59

+ +

Older versions

+ +

{{Firefox_for_developers(58)}}

diff --git a/files/it/mozilla/firefox/releases/64/index.html b/files/it/mozilla/firefox/releases/64/index.html new file mode 100644 index 0000000000..dd7d4e1532 --- /dev/null +++ b/files/it/mozilla/firefox/releases/64/index.html @@ -0,0 +1,184 @@ +--- +title: Firefox 64 for developers +slug: Mozilla/Firefox/Releases/64 +translation_of: Mozilla/Firefox/Releases/64 +--- +
{{FirefoxSidebar}}
+ +

Questo articolo fornisce informazioni riguardo i cambiamenti in Firefox 64 che interesseranno gli sviluppatori. Firefox 64 è stato rilasciato l' 11 Dicembre, 2018.

+ +

Changes for web developers

+ +

Developer tools

+ + + +

Removals

+ + + +

HTML

+ +

No changes.

+ +

CSS

+ + + +

Removals

+ + + +

SVG

+ +

No changes.

+ +

JavaScript

+ + + +

APIs

+ +

DOM

+ + + +

Service workers

+ + + +

Media, Web Audio, and WebRTC

+ + + +

Removals

+ + + +

Security

+ + + +

Plugins

+ +

No changes.

+ +

Changes for add-on developers

+ +

API changes

+ + + + + +

Windows

+ + + +

Privacy

+ + + +

devtools.panels API

+ + + +

Manifest changes

+ + + +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(64)}}

diff --git a/files/it/mozilla/firefox/releases/66/index.html b/files/it/mozilla/firefox/releases/66/index.html new file mode 100644 index 0000000000..85441c5ce4 --- /dev/null +++ b/files/it/mozilla/firefox/releases/66/index.html @@ -0,0 +1,156 @@ +--- +title: Firefox 66 for developers +slug: Mozilla/Firefox/Releases/66 +translation_of: Mozilla/Firefox/Releases/66 +--- +
{{FirefoxSidebar}}
+ +

Questo articolo fornisce informazioni sulle modifiche in Firefox 66 che interesseranno gli sviluppatori. Firefox 66 è l'attuale versione Beta di Firefox, sarà disponibile 19 Marzo del 2019.

+ +

Modifiche per gli sviluppatori web

+ +

Strumenti di sviluppo

+ + + +

HTML

+ + + +

Removals

+ + + +

CSS

+ + + +

SVG

+ +

No additions.

+ +

Removals

+ + + +

JavaScript

+ +

No changes.

+ +

APIs

+ +

New APIs/changes

+ + + +

DOM

+ + + +

DOM events

+ + + +

Media, Web Audio, and WebRTC

+ + + +

Removals

+ + + +

Networking

+ + + +

Security

+ +

No changes.

+ +

Plugins

+ +

No changes.

+ +

Changes for add-on developers

+ +

API changes

+ + + + + +

Manifest changes

+ +

No changes.

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(65)}}

diff --git a/files/it/mozilla/firefox/releases/index.html b/files/it/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..a7185bc5e5 --- /dev/null +++ b/files/it/mozilla/firefox/releases/index.html @@ -0,0 +1,10 @@ +--- +title: Firefox developer note di rilascio +slug: Mozilla/Firefox/Releases +tags: + - Firefox +translation_of: Mozilla/Firefox/Releases +--- +
{{FirefoxSidebar}}

Questa pagina fornisce i link "Firefox X per sviluppatori" agli articoli di ogni rilascio Firefox. Queste note ci mostrano quali funzionalità saranno aggiunte e quali bug verranno eliminati in ogni versione di Firefox.

+ +
{{ListSubpages("",1,0,1)}}
diff --git a/files/it/mozilla/firefox_for_android/index.html b/files/it/mozilla/firefox_for_android/index.html new file mode 100644 index 0000000000..15240f6c30 --- /dev/null +++ b/files/it/mozilla/firefox_for_android/index.html @@ -0,0 +1,66 @@ +--- +title: Firefox per Android +slug: Mozilla/Firefox_for_Android +translation_of: Mozilla/Firefox_for_Android +--- +

Per molte persone i device mobili sono la fonte primaria, o anche l' unica, per l' accesso al Web.

+ +

Firefox for Android (nome in codice Fennec) è open, hackable, basata sugli standard web, come Firefox desktop.

+ +

Firefox per Android basa  la sua interfaccia utente su quella nativa  di Android widgets, invece di XUL: questo migliora notevolmente le prestazioni, soprattutto in tempo di avvio, e utilizzo della memoria. Per il momento questa versione si rivolge solo a telefoni, mentre la versione tablet utilizza ancora XUL. In futuro, si prevede di sostituire ufficialmente la versione dell' interfaccia utente nativa anche sui tablet.

+ +

Contribuire a Firefox per Android.

+ +

Il principale punto di partenza per informazioni su Firefox per Android è il progetto stesso pagina Wiki del progetto.

+ +

Potete aiutarci a creare e migliorare Firefox per Android:

+ + + +

Sviluppare per il web mobile

+ +

Abbiamo iniziato a mettere insieme una guida per progettare siti web per dispositivi mobili.

+ +

Con Firefox per Android, hai accesso a un certo numero di API che espongono le funzionalità di base del dispositivo per colmare il divario tra il Web e le applicazioni native:

+ + + +

Per testare il vostro sito web su Firefox per Android, è possibile istallarlo su un dispositivo Android  o  eseguirlo sul proprio desktop utilizzando l'emulatore di Android.

+ +

Realizzare addon per il mobile

+ +

Firefox for Android supports add-ons using the exact same extension system used by all other Gecko-based applications. We did not invent a new add-on system. This means that building an add-on for Firefox on Android is the same process that would be used for desktop Firefox. Add-ons that work with desktop Firefox do not automatically work in Firefox on Android. The user interfaces are just too different.

+ +
Firefox on Android has a unique application identifier which must be used in install.rdf. The identifier is {aa3c5121-dab2-40e2-81ca-7ea25febc110}
+ +

Both classic restart-required and newer restartless add-on approaches are supported. Using the restartless approach is preferred whenever possible because the user experience is far superior to forcing an application restart when installing or removing an add-on.

+ +

Introduzione Veloce

+ + + +

Informati e ricevi informazioni su Firefox per Android

+ +

Documentation and tutorials for using and troubleshooting Firefox for Android are available on the Mozilla Support website.

diff --git a/files/it/mozilla/index.html b/files/it/mozilla/index.html new file mode 100644 index 0000000000..e24ed8a774 --- /dev/null +++ b/files/it/mozilla/index.html @@ -0,0 +1,13 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +
+ {{draft}}
+

This will soon be an awesome landing page for Mozilla internals. For now, it's not.

+
+ {{ListSubpages}}
diff --git a/files/it/mozilla/localizzazione/index.html b/files/it/mozilla/localizzazione/index.html new file mode 100644 index 0000000000..4aff8d7f64 --- /dev/null +++ b/files/it/mozilla/localizzazione/index.html @@ -0,0 +1,23 @@ +--- +title: La localizzazione su Mozilla +slug: Mozilla/Localizzazione +tags: + - Localizzazione + - Mozilla + - Traduzione + - l10n +translation_of: Mozilla/Localization +--- +

La localizzazione (L10n) consiste nel tradurre le interfacce software degli utenti da una lingua ad un'altra, rendendola accessibile a tutte le altre culture straniere. Queste risorse sono destinate a chiunque abbia interesse per gli aspetti tecnici coinvolti nella localizzazione, oltre che agli sviluppatori e a tutti i collaboratori.

+ +

Vedi anche

+ +

Localizzare MDN

+ +
+
Come localizzare la documentazione qui su MDN.
+
App di localizzazione
+
Articolo riguardante più nello specifico le applicazioni di localizzazione, inclusa l'applicazione di Firefox OS.
+
L10n
+
Documenti in riferimento all' L10n API che Mozilla usa per localizzare Firefox OS.
+
diff --git a/files/it/mozilla/marketplace/criteri_revisione_marketplace/index.html b/files/it/mozilla/marketplace/criteri_revisione_marketplace/index.html new file mode 100644 index 0000000000..9e2d6e10bf --- /dev/null +++ b/files/it/mozilla/marketplace/criteri_revisione_marketplace/index.html @@ -0,0 +1,79 @@ +--- +title: Criteri di revisione del Marketplace +slug: Mozilla/Marketplace/criteri_revisione_marketplace +translation_of: Archive/Mozilla/Marketplace/Publishing/Marketplace_review_criteria +--- +
+

Questo articolo descrive i requisiti che un'app deve soddisfare per essere distribuita su Firefox Marketplace. Tali requisiti sono stati elaborati per conservare un equilibrio tra le esigenze degli sviluppatori e quelle degli utenti. Gli sviluppatori cercano requisiti equi, coerenti, non troppo rigorosi e affidabili per costituire le basi del loro business. D'altra parte, gli utenti esigono la garanzia che le app siano sicure, in grado di funzionare sui loro dispositivi e che rispettino quanto dichiarato nelle note di versione. I seguenti requisiti tentano di conciliare tutte queste esigenze.

+
+

Di seguito le prospettive di Mozilla riguardo alle revisioni:

+ +

Sicurezza

+

Tutte le specifiche di sicurezza per la progettazione di app sono disponibili in questa pagina:https://wiki.mozilla.org/Apps/Security

+ +

Privacy

+ +

Contenuto

+ +

Linee guida per i contenuti

+

Questa lista descrive contenuti considerati inappropriati su Firefox Marketplace. Non è una lista definitiva ma solo illustrativa e potrebbe essere aggiornata. Se un'applicazione viola queste linee guida, Mozilla si riserva il diritto di rimuoverla da Firefox Marketplace.

+ +

Funzionalità

+ +

Usabilità

+ +

Politica sulle app bloccate

+

Nella speranza di non arrivare mai a esercitarlo, ci riserviamo il diritto di eliminare ("bloccare") qualsiasi app già pubblicata che in un secondo momento riveli di aver violato i requisiti di sicurezza, privacy o contenuto, oppure di causare un peggioramento significativo nelle prestazioni del sistema o del network. Gli sviluppatori verranno informati prima del blocco della loro app, saranno considerati in buona fede in assenza di prove che dimostrino il contrario e potranno contare sulla piena collaborazione del team di revisione, che comunicherà loro la situazione e li assisterà nella risoluzione del problema. Esempi specifici di casi in cui si procede al blocco di un'app:

+ diff --git a/files/it/mozilla/marketplace/index.html b/files/it/mozilla/marketplace/index.html new file mode 100644 index 0000000000..b868c7f23d --- /dev/null +++ b/files/it/mozilla/marketplace/index.html @@ -0,0 +1,129 @@ +--- +title: Firefox Marketplace +slug: Mozilla/Marketplace +tags: + - Apps + - Firefox OS + - Marketplace + - Mobile + - TopicStub +translation_of: Archive/Mozilla/Marketplace +--- +
Firefox Marketplace è una piattaforma online aperta e non proprietaria per la distribuzione di app web. Questa sezione fornisce le informazioni necessarie per realizzare ed esporre un’app su Firefox Marketplace, illustra consigli su come rendere l'app più fruibile e popolare, le varie opzioni di distribuzione, pubblicazione e aggiornamento, le librerie e API necessarie per sfruttare le funzionalità del Marketplace.
+ +
+

Mozilla porta i suoi principi fondamentali, apertura, libertà e diritto dell'utente di scegliere, nel mercato delle app.

+ +

Firefox Marketplace permette di pubblicare app open web sfruttando tecnologie web, linguaggi e strumenti standardizzati. Le app possono essere di due tipi: locali (packaged), cioè eseguibili dall'interno di Firefox, oppure remote (hosted), ospitate su un server proprio. Le app pubblicate sul Marketplace sono disponibili agli utenti di Firefox OS in tutto il mondo e possono essere facilmente trovate attraverso la sezione "App consigliate", le varie categorie di app e una versatile funzione di ricerca. L'installazione delle app gratuite richiede pochi istanti, mentre le app a pagamento possono essere acquistate sfruttando il sempre più completo supporto per i pagamenti con carta di credito oppure direttamente dal cellulare.

+
+ +
+
+

Prepararsi al successo

+ +
+
Che tu sviluppi app per profitto o semplicemente per soddisfazione personale, se le esponi sul Marketplace probabilmente è perché miri a farle scoprire, utilizzare e apprezzare dagli utenti. Questa sezione spiega come far conoscere la propria app e costruire una comunità di utenti soddisfatti.
+
+ +

Opzioni di pubblicazione

+ +
+
Locale o remota, questo è il dilemma. Le risposte alle tue domande su come distribuire il contenuto delle app e sulle varie opzioni per desktop, dispositivi Android e Firefox OS.
+
+ +

Pubblicare un'app

+ +
+
Esibisci le tue app davanti al resto del mondo. Scopri come esporre le tue app su Firefox Marketplace, dal procedimento per caricare l'app al processo di revisione, all'aggiornamento, al controllo delle statistiche, alla revisione dei commenti degli utenti.
+
+
+ +
+
+
+ +

Strumenti per lo sviluppo di app

+ +
+
Librerie e API di Firefox Marketplace
+
Una panoramica con i link alle librerie e alle API a disposizione per aggiungere nuove funzionalità alle app del Marketplace.
+
Strumenti per sviluppatori di app
+
Una lista esauriente dei vari strumenti a disposizione per rendere lo sviluppo delle app open web efficiente e divertente.
+
WebIDE
+
Lo strumento principale per verificare, inviare a un dispositivo e sottoporre al debug le app di Firefox OS attraverso Firefox OS Simulator o un dispositivo con sistema operativo Firefox OS.
+
+
+
+ + + +
    +
  1. Prepararsi al successo + +
      +
    1. Introduzione
      2. +
    2. Deciding what to build
      3. +
    3. Getting to know your users
      4. +
    4. Choosing your business model
      5. +
    5. Localizing your apps
      6. +
    6. Promoting your app
      7. +
    7. Creating your community
      8. +
    +
    2. +
  2. Opzioni di pubblicazione +
      +
    1. Introduzione
      2. +
    2. Packaged apps
      3. +
    3. Hosted apps
      4. +
    4. Packaged or hosted?
      5. +
    5. Mobile-optimized websites
      6. +
    6. Publish apps yourself
      7. +
    +
    3. +
  3. App publishing overview +
      +
    1. Introduzione
      2. +
    2. Submission checklist
      3. +
    3. Criteri di revisione del Marketplace
      4. +
    4. Marketplace showcase criteria
      5. +
    5. Adding a subdomain for an app
      6. +
    6. Policies and Guidelines +
        +
      1. Introduzione
        2. +
      2. Marketplace screenshot criteria
        3. +
      3. Privacy policy
        4. +
      4. App testing and troubleshooting
        5. +
      +
      7. +
    +
    4. +
  4. Submit your app +
      +
    1. Panoramica
      2. +
    2. Step 1: Sign-in
      3. +
    3. Step 2: Load app
      4. +
    4. Step 3: Listing details
      5. +
    5. Step 4: Next steps
      6. +
    6. Step 5: App rating
      7. +
    7. Step 6: Define team members
      8. +
    8. Step 7: View listing
      9. +
    9. Step 8: Edit other localizations
      10. +
    +
    5. +
  5. Managing and updating published apps +
      +
    1. Introduzione
      2. +
    2. Your app's status
      3. +
    3. Updating apps
      4. +
    4. App Stats
      5. +
    +
    6. +
  6. Add-on submission +
      +
    1. Add-on submission overview
      2. +
    2. Add-on review criteria
      3. +
    +
    7. +
  7. Librerie e API
    8. +
  8. FAQ di Firefox Marketplace
    9. +
diff --git a/files/it/mozilla/marketplace/monetization/introduction_monetization/index.html b/files/it/mozilla/marketplace/monetization/introduction_monetization/index.html new file mode 100644 index 0000000000..ef368a9586 --- /dev/null +++ b/files/it/mozilla/marketplace/monetization/introduction_monetization/index.html @@ -0,0 +1,31 @@ +--- +title: Introduction — Monetization +slug: Mozilla/Marketplace/Monetization/Introduction_Monetization +tags: + - italiano tags +translation_of: Archive/Marketplace/Monetization/Introduction_Monetization +--- +
+

You've worked hard on designing your latest app, and now you want to ensure it generates revenue. This section provides the information you need to implement and publish a paid app, a paid upgrade app, and apps using in-app payments or in-app advertising.

+
+ +
+
+
Publishing your app for profit
+
An overview to the development and publishing process for each type of monetized app, as well as details on refunds and how payments are processed.
+
Building paid apps
+
An introduction to creating an app users have to pay for.
+
Building for in-app payments
+
Guides to implementing support for in-app payments using fxPay or mozPay.
+
Refunds
+
Details on refunds users can request and how they effect your app.
+
Validating a receipt
+
A guide to when and how to validate your app's purchase receipt, whether you want to implement the validation yourself or use an existing library.
+
App pricing tiers
+
Details of the fixed price points you can choose for your paid apps, and how these vary among different currencies, along with useful supporting information on dealing with app payments.
+
Country guide
+
Additional details, such as tax and exchange rates used, for each country where payments in the local currency are available.
+
+
+ +

 

diff --git a/files/it/mozilla/marketplace/monetization/profiting_from_your_app/index.html b/files/it/mozilla/marketplace/monetization/profiting_from_your_app/index.html new file mode 100644 index 0000000000..f623f72cc8 --- /dev/null +++ b/files/it/mozilla/marketplace/monetization/profiting_from_your_app/index.html @@ -0,0 +1,53 @@ +--- +title: Publishing your app for profit +slug: Mozilla/Marketplace/Monetization/Profiting_from_your_app +tags: + - italiano tags +translation_of: Archive/Marketplace/Monetization/Profiting_from_your_app +--- +
+

Creating Web Apps is not only fun; it's also a great way to turn your passion into revenue! This article sumarizes how you publish app using various the monetization models available.

+
+ +
+

Note: If you're looking for more information on monetization models or advice on which one to use, check out Choosing your business model. In addition, the payments section of the Marketplace FAQ provides answers to many common questions about Marketplace payments.

+
+ +

How to ...

+ +

Release a premium app

+ +

To offer a premium (paid) app you need to set it so it's installed from Firefox Marketplace. Then include code to verify a receipt issued by Marketplace, to make sure the app has been paid for before allowing it to run. For more information, see the App payments guide.

+ +

To setup an app as premium in Firefox Marketplace you first identify it as Paid in the initial (monetization) section of the Submit an App page. You then create an account with one or more payment providers. Once this is done you can select a price point for your app. Bear in mind that currently only apps installed into Firefox OS can be premium apps, because payments are not yet supported on desktop or Android.

+ +

Release a promote as upgrade app

+ +

For this approach you obviously need two apps — the free one and the premium app you'll promote as an upgrade.

+ +

Once your apps are ready, first add the free version of the app to Firefox Marketplace, then the premium version. While submitting the premium app select the promote as upgrade to free version option at the bottom of the Compatibility & Pricing page.

+ +

Release an app with in-app payments

+ +

You have two options for adding in-app payments to your apps: fxPay and mozPay. The principal difference between the two options is that fxPay works without the need for your own server, while mozPay requires you to have a server to store transaction receipts.

+ +

In simple terms, development of your app involves defining a number of in-app products you have for sale, reading those products into your app, providing a purchase 'button', and validating the receipt when the product is 'consumed' to ensure it was validly purchased. Full details on the coding required is provided in the In-app payments section.

+ +
+

Note: While we encourage apps using in-app payments to be free for download, it's possible to have a paid app that also uses in-app payments.

+
+ +

To setup an app with in-app purchases in Firefox Marketplace, you first identify it as Paid / In-app in the initial (monetization) section of the Submit an App page (noting that you will do this for a stub app before development starts to get a API key for mozPay or load in-app products for fxPay). You then create an account with one or more payment providers, before publishing your app. Bear in mind that currently only apps installed into Firefox OS can be premium apps, because payments are not yet supported on desktop or Android.

+ +

Releasing an app with in-app advertising

+ +

Mozilla has no special relationship with any advertising network, so you are free to choose the ad network or networks. You'll need to consult the developer resources from your chosen network to get full details of the development process, but in general the process is likely to involve: getting a key that will identify to the network that an ad has been displayed or clicked in your app, and coding the ads into your app.

+ +

To publish on Firefox Marketplace you now simply identify it as Free or Paid / In-app as appropriate in the initial (monetization) section of the Submit an App page and compete the apps details. There are no special steps to follow, compared to posting an app without in-app adverts.

+ +

See also

+ + diff --git a/files/it/mozilla/marketplace/options/index.html b/files/it/mozilla/marketplace/options/index.html new file mode 100644 index 0000000000..067b7756f8 --- /dev/null +++ b/files/it/mozilla/marketplace/options/index.html @@ -0,0 +1,21 @@ +--- +title: Your publication options +slug: Mozilla/Marketplace/Options +tags: + - NeedsTranslation + - Structure only + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Options/Introduction +--- +

In this section you'll discover:

+ +
+

Content in this section is still under development.

+
+

 

diff --git a/files/it/mozilla/marketplace/options/packaged_apps/index.html b/files/it/mozilla/marketplace/options/packaged_apps/index.html new file mode 100644 index 0000000000..056adf7d11 --- /dev/null +++ b/files/it/mozilla/marketplace/options/packaged_apps/index.html @@ -0,0 +1,55 @@ +--- +title: Packaged apps +slug: Mozilla/Marketplace/Options/Packaged_apps +translation_of: Archive/Mozilla/Marketplace/Options/Packaged_apps +--- +
+

A packaged app is an Open Web App that has all of its resources (HTML, CSS, JavaScript, app manifest, and so on) contained in a zip file, instead of having its resources on a Web server. This article provides an introduction to packaged apps and links to everything you need to know about packaged apps from a developer standpoint.

+
+

A packaged app is zip file that contains all the resources that enable an Open Web App to function, along with an app manifest in the zip's root directory. The app manifest provides details about the app such as its description, icons used to identify the installed app and such like. The package is then used to install the app to Firefox OS devices, Android devices and desktops. Once installed the app runs on the device, but is still able to access resources on the Web, such as a database on a Web server.

+

There are three types of packaged apps: web app, privileged app and certified app. While packaged apps can be used to deliver any type of Open Web App, privileged and certified apps are digitally signed to enable the use of privileged and certified APIs. Privileged apps are signed as part of the Marketplace review process, while certified apps are signed by device manufacturers or operators.

+

In addition to their ability to use privileged and certified APIs, packaged apps offer users a faster first start response as all the of the app's resources are available on the device after installation.These feature makes packaged apps the recommended approach for delivering Open Web Apps to Firefox OS devices, Android devices and desktops.

+
+

Note: Currently the Firefox Marketplace supports web and privileged packaged apps. In addition, Firefox Marketplace supports paid packaged apps for Firefox OS only and free packaged apps for Firefox OS, Firefox for Android and Firefox for Desktop. Support for paid apps on all platforms is under development.

+
+

Types of packaged apps

+

There are three types of packaged apps: web apps, privileged apps and certified app. Each type of packaged app corresponds to a level of the App Security model implemented in Firefox OS. This section provides more information on each.

+

Web app

+

A web app is one that doesn't make use of privileged or certified APIs. When submitted to Marketplace the app's package is signed, but the special authentication process used for privileged or certified apps isn't performed. Web apps therefore cannot use privileged or certified APIs. These apps are not subject to the Content Security Policies (CSPs) required for privileged and certified apps.

+

This type of packaged app doesn't require the type field in its manifest.webapp file, because the default value for type (web) is correct.

+

Web apps may be self-published or distributed through the Firefox Marketplace. Web apps can also be delivered using the Hosted app mechanism.

+

Privileged app

+

A privileged app is one that makes use of privileged APIs and can be considered as the equivalent of a native app on platforms such as iOS and Android. When submitted to the Firefox Marketplace, privileged apps are approved using a special process. This process gives users of the app a level of assurance that the app has been carefully reviewed for potential security, privacy and capability issues.

+

To specify that an app is a privileged app, add the type field to its manifest.webapp file and set it to privileged. Every privileged API your app needs to access  must be added to the permissions field in the app's manifest.

+

Firefox OS and the Web runtimes for Android and desktops enforces the following CSP for privileged apps:

+
"default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"
+

Privileged apps may be distributed through the Firefox Marketplace only.

+

Certified app

+
+

Certified apps are not generally available to third-party developers and aren't distributed through the Firefox Marketplace. The long term goal for the APIs covered by certification is to harden then so they can be made available as privileged APIs. If you've an interest in seeing a particular API made available, please provide feedback on the dev-webapps mailing list.

+
+

A certified app is one that makes used of certified APIs, APIs that offer access to critical system function such as the default dialer or the system settings app on a device. Compared to to a privileged app, all API permissions in a certified app are implicit, meaning they are enabled without explicit user approval. A certified app must be approved for a device by the OEM or carrier.

+

To specify that an app is a certified app, add the type field to its manifest.webapp file and set it to certified. Every privileged and certified API your app needs to access  must be added to the permissions field in the app's manifest.

+

Firefox OS implements the following CSP for certified apps:

+
"default-src *; script-src 'self'; object-src 'none'; style-src 'self'"
+

This has the effect of implementing stricter rules for inline CSP for certified compared to privileged apps. If you want to understand the reasoning behind this, see Default CSP policy and Bug 768029.

+

Certified apps are preloaded onto devices by OEMs and operators.

+

Testing packaged apps

+

To install a packaged app into a Firefox OS Simulator or onto a device for testing purposes, see Using the App Manager. Alternatively, you can install it on to a device from a Web server by following the steps described in Publishing apps yourself. Remember that when you publish apps yourself, packaged web apps only can be installed .

+

Publishing packaged apps

+

You have two options for publishing packaged apps: on Firefox Marketplace or self-publishing.

+

Publishing on Firefox Marketplace

+

The process for submitting a packaged app to Firefox Marketplace is described in the App Publishing section.

+

When you submit your packaged app, its zip file is stored on the Marketplace servers, and the Marketplace generates a new manifest called the mini-manifest that is based on the app manifest in your packaged app's zip file. When a user installs your app, the mini-manifest is passed to the Apps.installPackage() function to install the app. The mini-manifest exists for installation and update purposes and isn't used when your app runs.

+

Publishing yourself

+

It's possible to publish packaged web apps outside Firefox Marketplace, on your own web server. Details are provided in Publishing apps yourself.

+

Updating packaged apps

+

For information on updating apps, see Updating apps.

+

More information

+ +

 

+Ytughf diff --git a/files/it/mozilla/marketplace/prepare/choosing_your_business_model/index.html b/files/it/mozilla/marketplace/prepare/choosing_your_business_model/index.html new file mode 100644 index 0000000000..b4bceec5cf --- /dev/null +++ b/files/it/mozilla/marketplace/prepare/choosing_your_business_model/index.html @@ -0,0 +1,121 @@ +--- +title: Choosing your business model +slug: Mozilla/Marketplace/Prepare/Choosing_your_business_model +tags: + - italiano tags +translation_of: Archive/Mozilla/Marketplace/Prepare/Choosing_your_business_model +--- +
+

A guide to and advice on choosing an appropriate business model for monetizing Firefox Marketplace apps.

+
+ +

You may be happy to create and distribute your apps for free. We applaud you for that, it’s very much in the spirit of everything we do here at Mozilla. However, we also understand that you may want to make app development your source of income and there is nothing wrong with that. Selecting the most appropriate monetization model your apps is a critical step if you want to maximize the revenue you earn. It's about a lot more than simply loading your app into Firefox Marketplace and setting a price: it's entirely possible that you could make more money by not charging for your app at all.

+ +

To assist you with implementing the best monetization option, this page describes the models available before looking at the criteria to consider in deciding which option to use.

+ +

Monetization models

+ +

When it comes to making money from your Firefox Marketplace apps there are a number of monetization models you can use. This section describes the options available.

+ +

The Paid App or Premium model

+ +

This is the simple, traditional model for monetizing apps: You generate your revenue from sales of your app by setting a price for it in the Marketplace. The user must then pay before being able to download and install your app.

+ +

The advantage of this model is its simplicity, you simply write your app and price it. There are however several disadvantages:

+ + + +

Try and Buy model

+ +

In this model you make a version of your app available for free and then offer a paid app version with enhanced features, using Marketplace's 'promote as an upgrade' feature. This enables you to retain the simplicity of the premium monetization model, while addressing some of the issues with using the premium model alone.

+ +

There are several approaches you can take to differentiating the free and paid versions of your app, such as:

+ + + +

This approach can overcome the resistance to buying apps, as it allows the user to understand the app’s value before making the purchase. However, it doesn’t overcome any limitations created by the means of payment available in some markets.

+ +

If you choose to use this model, Firefox Marketplace offers the Promote as upgrade to free version option. Using this option you link a paid app to its free version and Firefox Marketplace then provides a link to the paid version from the free one's Marketplace listing, as shown below.

+ +

The Premium version available notice and link in the listing of a free app on a Firefox OS device..

+ +

 

+ +

In-App Purchases model

+ +

In this model you distribute a free version of your app only, but then offer users various additional items from within the app. These in-app purchases fall broadly into two categories:

+ + + +

This model can often be easiest to implement in games, where additional levels, characters, power ups, and various other game unlocks lend themselves well to separate purchases. But equally an information app could offer a small set of information for free and an expanded or more details set from an in-app purchase.

+ +

One particular benefit of in-app purchases is that it offers the ability to generate a recurring stream of revenue from installed apps. Games are a particularly good example of how this model works. You might offer a free download with 5 levels. Then, when the user has completed those levels, offer an additional 5 levels as an in-app purchase. Then at the end of those levels, offer 5 more for an in-app payment and so on. And as long as each new level pack is as engaging as the last, users will most likely continue to purchase new level packs.

+ +

This model, overcomes the issues associated with any reluctance to download a paid app, but could still be effected by the same disadvantages notably any limitation on payment options.

+ +
+

The in-app payment system in Firefox OS doesn’t yet support periodic subscriptions.

+
+ +

Ad supported

+ +

In this model you incorporate advertising into your app and generate revenue from ad views and clickthroughs to view the advertised product or service. You will usually offer your app for free when it's ad-supported, but you can include ads in a premium app or in conjunction with in-app purchases, but do this with caution — particularly in premium apps — as users may consider you're 'charging ' them twice. You could also combine this approach with Promote as upgrade: offer the full app with adverts as the 'try' and a premium version without ads as the 'upgrade'. Alternatively you could use an in-app payment to offer a 'remove the ads' feature in the app.

+ +

If you want to take this approach you can use any ad network you wish. There are a number of companies that offer ad services for websites and mobile apps, for example Google AdMob and Inneractive.

+ +

This model completely removes the barriers that paid app or in-app purchases have, in that you don’t have to worry about the willingness or ability of users to make payments.

+ +

Choosing your model

+ +

Finding the right monetization model for your application isn’t an exact science; even simply deciding what price to charge can be a difficult process. The information you gathered while getting to know your users is the best place to start. This should provide you with some insight into their expectations:

+ + + +

This information needs to be combined with that on the available payment methods. This will help you determine if users will be willing and able to purchase apps or in-app products. You also should consider that the Firefox Marketplace will allow you to convert a free app to one users have to pay for, but you cannot make a paid for app free. So, unless you release a second version of the app, once you've chosen a paid model it’s hard to change to a free one.

+ +

If you choose to use a paid or in-app purchase model, you’ll need to assess what your users will tolerate in terms of app price. Here it’s worth investigating what models and prices are being used by your competitors. Even if there is no direct competition, look at similar classes of app and see what they do.

+ +

Even if you want to price your apps, err towards a model that provides users with a free download of some sort — as a paid download, even a low priced one, will be a barrier to many users.

+ +

If you've any doubts about the effectiveness of a model with a paid element, then consider implementing in-app advertising in a free to download app.

+ +

You can also mix the models, for example by using both advertising and in-app purchases. The only combination that should be used with caution is advertising in a paid app, as users may view this combination negatively.

+ +

Bear in mind that there are some apps where you may be practically limited to either free or paid options only. For example games targeted at children may work better as paid apps: parents may look for games without advertising or in-app purchases that they can safely let their children use.

+ +

If you come to no firm conclusions from your research, consider trying these general guidelines when choosing your model:

+ + + +

You’ll probably have to experiment with different models to find the right one for any particular app. You may also find that you need to use different models for different apps in your portfolio, particularly if the user base varies between those apps. Similarly, variations among markets may mean that you can price your app in one country, but need to use in-app advertising in another — for example, you might be able to position a soccer app as paid in the UK or Brazil, but need to use in-app advertising in a version for the US.

+ +

Also see

+ + diff --git a/files/it/mozilla/marketplace/prepare/introduction/index.html b/files/it/mozilla/marketplace/prepare/introduction/index.html new file mode 100644 index 0000000000..80a27bbc81 --- /dev/null +++ b/files/it/mozilla/marketplace/prepare/introduction/index.html @@ -0,0 +1,35 @@ +--- +title: Introduction — Prepare for Success +slug: Mozilla/Marketplace/Prepare/Introduction +tags: + - italiano tags +translation_of: Archive/Mozilla/Marketplace/Prepare/Introduction +--- +
+

Learn about the techniques you can use to create quality Firefox Marketplace apps and games people want, and build a worldwide user base of dedicated and loyal fans.

+
+ +

Creating a successful Open Web App isn't just about great coding for a great open platform. Whether you’re coding for pleasure and the joy of sharing your ideas, or you want to build a business from your coding activities, you’ll want users to download and use your apps.

+ +

This section contains the advice you need to achieve your goals in terms of app downloads, revenue and use.

+ +
+
+
Deciding what to build
+
A great app starts with a great idea. Get guidance on choosing what to build.
+
Getting to know your users
+
Understanding your users and what they are looking for in your apps is critical to success.
+
Choosing your business model
+
Discover the business models available to your apps and games, and see how you might use them.
+
 
+
Localizing your apps
+
Taking your app to the world means localizing it for users worldwide. Find out about the processes and implications of localizing your app.
+
Promoting your app
+
Firefox Marketplace is a great way for users to discover apps, but to achieve the downloads you deserve you’ll need to shout about your app. Find out how to make a noise.
+
Creating your community
+
Nurture and grow a vibrant community around your apps and tap into their enthusiasm and expertise.
+  
+
+
+ +

 

diff --git a/files/it/mozilla/marketplace/publishing/index.html b/files/it/mozilla/marketplace/publishing/index.html new file mode 100644 index 0000000000..e2b172a388 --- /dev/null +++ b/files/it/mozilla/marketplace/publishing/index.html @@ -0,0 +1,9 @@ +--- +title: Publishing +slug: Mozilla/Marketplace/Publishing +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Introduction +--- +

Marketplace publishing

diff --git a/files/it/mozilla/marketplace/publishing/opzioni_pubblicazione_app/index.html b/files/it/mozilla/marketplace/publishing/opzioni_pubblicazione_app/index.html new file mode 100644 index 0000000000..ab3302cc6c --- /dev/null +++ b/files/it/mozilla/marketplace/publishing/opzioni_pubblicazione_app/index.html @@ -0,0 +1,152 @@ +--- +title: Autopubblicare un'app +slug: Mozilla/Marketplace/Publishing/opzioni_pubblicazione_app +translation_of: Archive/Mozilla/Marketplace/Options/Self_publishing +--- +
+

In alcune circostanze è preferibile non distribuire un'app attraverso Firefox Marketplace, per esempio nel caso si desideri condividerla soltanto con i membri della propria organizzazione, eseguire un test su una versione beta o semplicemente farne un uso privato. In questa pagina è spiegato come autopubblicare le proprie app al di fuori di Firefox Marketplace.

+
+ +

Le app open web possono essere installate su Firefox OS e dispositivi dotati di Firefox per Android o Firefox per desktop utilizzando {{ domxref("Apps.install") }} o {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }}. Il ruolo di entrambe le API è trasmettere l'URL del manifesto contenente la descrizione dell'app da installare. Dunque i requisiti di base per autopubblicare un'app sono:

+ +
    +
  1. un server dove ospitare il manifesto dell'app,
    2. +
  2. un server dove ospitare l'app (nel caso di app remota) o l'app stessa compressa in un file zip,
    3. +
  3. un codice nel sito web che richiami {{ domxref("Apps.install") }} o {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }} a seconda del caso.
    4. +
+ +

Limitazioni

+ +

Prima di autopubblicare un'app open web è bene considerare le seguenti limitazioni:

+ + + +

App locali autopubblicate

+ +

È possibile pubblicare un'app locale ospitando il file zip su un server insieme a un mini-manifesto. Il mini-manifesto, utilizzato per identificare l'app durante il processo di installazione, deve essere ospitato nella stessa directory del file zip. Il passo successivo è creare uno script per richiamare {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }} e trasmettergli le informazioni contenute nel mini-manifesto. Ecco il procedimento dettagliato:

+ +
    +
  1. +

    Comprimere i contenuti dell'app in un file zip e rinominarlo package.zip. Questo file deve contenere tutte le risorse dell'app, compreso il manifesto principale.

    + +
    +

    Attenzione: al momento di creare il file zip, posizionare tutti i contenuti che devono comparire nell'app nella cartella principale, senza sottocartelle. Comprimendo la cartella genitore con all'interno le sottocartelle, il manifesto risulterebbe in una posizione sbagliata, invalidando l'app.

    +
    +
    2. +
  2. Creare un file e nominarlo manifest.webapp, poi aggiungere i contenuti riportati di seguito. Questo file è chiamato mini-manifesto perché consiste in una versione leggermente ridotta del manifesto incluso nel file zip dell'app locale. Viene utilizzato da {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }} per installare l'app. Per informazioni dettagliate sul contenuto del file leggere Campi del mini-manifesto di seguito. + 
    {
+    "name": "My sample app",
+    "package_path" : "http://my-server.com/my-app-directory/package.zip",
+    "version": "1",
+    "developer": {
+        "name": "A. Developer",
+        "url": "http://my-server.com"
+    }
+}
    +
    3. +
  3. Creare lo script di installazione. Nell'esempio viene utilizzato un semplice file html nominato index.html , ma è possibile anche aggiungere lo script a un pulsante o utilizzare qualsiasi altro metodo appropriato per richiamarlo al sito web. Il codice JavaScript di questa pagina richiama l'API di installazione per le app locali ({{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }}), includendo anche dei callback per notificare l'esito dell'installazione. + 
    <html>
+  <body>
+    <p>Packaged app installation page</p>
+    <script>
+      // This URL must be a full url.
+      var manifestUrl = 'http://my-server.com/my-app-directory/manifest.webapp';
+      var req = navigator.mozApps.installPackage(manifestUrl);
+      req.onsuccess = function() {
+        alert(this.result.origin);
+      };
+      req.onerror = function() {
+        alert(this.error.name);
+      };
+    </script>
+  </body>
+</html>
    +
    4. +
  4. Caricare i file su un server o sito web copiando package.zip, manifest.webapp e index.html nella directory desiderata (nel codice di esempio my-app-directory).
    5. +
  5. Ora è possibile installare l'app su un dispositivo compatibile (come uno smartphone Firefox OS). Aprire il file index.html (nel testo di esempio posizionato al percorso http://my-server.com/my-app-directory/index.html). Verrà visualizzata una richiesta di conferma per procedere con l'installazione. Confermando inizierà il processo di installazione. Al termine del processo, lo script della pagina web notificherà l'esito positivo o negativo dell'operazione.
    6. +
+ +
+

Suggerimento: per eseguire i test su dispositivo è possibile anche ospitare un'app locale su un server locale. Il server web e il dispositivo devono essere sullo stesso network, inoltre il server deve essere abilitato a servire richieste dal network locale. Sarà sufficiente includere il percorso assoluto nel package_path del mini-manifesto, esattamente come viene incluso normalmente (vedi sotto). Se si sta utilizzando una porta non predefinita, includere anche le informazioni della porta (es. http://10.10.12.1:8080/package.zip).

+
+ +

Campi del mini-manifesto

+ +

Gli sviluppatori che scelgono di pubblicare le proprie app con Firefox Marketplace non hanno bisogno di compilare il mini-manifesto, in quanto esso viene generato automaticamente dal Marketplace, estrapolando le informazioni necessarie dal manifesto dell'app incluso nel file zip. I dettagli sui contenuti del manifesto principale si trovano nell'articolo App manifest.

+ +

Gli sviluppatori che desiderano autopubblicare un'app devono invece compilare il mini-manifesto. Il metodo più sicuro per ottenere un mini-manifesto è fare una copia del manifesto principale e modificare le parti necessarie. Lavorare su una copia garantisce il rispetto del primo requisito di un mini-manifesto, ovvero che i campi name, version, developer e locales siano esattamente uguali a quelli del manifesto principale. Occorre poi aggiungere i campi esclusivi del mini-manifesto: package_path, release_notes e size.

+ +
+
package_path (obbligatorio)
+
Il percorso assoluto (ovvero l'url completo, ad esempio http://my-server.com/my-app-directory/manifest.webapp) della posizione in cui è stato archiviato il file zip dell'app.
+
release_notes (facoltativo)
+
Informazioni sulla versione corrente dell'app. Su Firefox Marketplace queste informazioni vengono fornite durante il processo di caricamento.
+
+ +
+
size (facoltativo)
+
Le dimensioni del file zip espresse in byte. Questa informazione viene utilizzata da {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }} per mostrare l'avanzamento del processo di installazione.
+
+ +

Esempio:

+ +
{
+  "name": "My app",
+  "package_path": "http://thisdomaindoesnotexist.org/myapp.zip",
+  "version": "1.0",
+  "size": 172496,
+  "release_notes": "First release",
+  "developer": {
+    "name": "Developer Name",
+    "url": "http://thisdomaindoesnotexist.org/"
+  },
+  "locales": {
+    "fr-FR": {
+      "name": "Mon application"
+    },
+    "se-SE": {
+      "name": "Min balla app"
+    }
+  },
+  "icons": {
+    "16": "/icons/16.png",
+    "32": "/icons/32.png",
+    "256": "/icons/256.png"
+  }
+}
+
+ +

Gli altri campi presenti nell'esempio sono:

+ +
+
name (obbligatorio)
+
Il nome dell'app. Lunghezza massima 128 caratteri.
+
version (facoltativo)
+
La versione dell'app.
+
developer  (facoltativo)
+
Informazioni sullo sviluppatore, contiene i campi name e url. Le informazioni sullo sviluppatore presenti nel manifesto principale e nel mini-manifesto devono coincidere.
+
locales (facoltativo)
+
Informazioni sulla localizzazione. I codici del locale devono essere espressi nel formato xx-YY.
+
icons (facoltativo)
+
Le icone in uso dell'app.
+
+ +

Per informazioni più dettagliate sui contenuti dei manifesti leggere App manifest.

+ +

App remote autopubblicate

+ +

Rispetto a quello per le app locali, il processo di autopubblicazione di un'app remota (hosted) è più diretto: basta creare i contenuti con lo stesso metodo utilizzato per la pubblicazione su Firefox Marketplace. In pratica occorre creare il file manifest dell'app. In seguito si aggiunge il codice per richiamare {{ domxref("Apps.install") }}. Il codice è essenzialmente lo stesso che si utilizza per le app locali, mostrato precedentemente, con la sola differenza che è anche possibile utilizzare un riferimento relativo alla posizione del file manifest.

+ +

Vedi anche

+ + diff --git a/files/it/mozilla/marketplace/publishing/submit/index.html b/files/it/mozilla/marketplace/publishing/submit/index.html new file mode 100644 index 0000000000..265a1ad776 --- /dev/null +++ b/files/it/mozilla/marketplace/publishing/submit/index.html @@ -0,0 +1,10 @@ +--- +title: Submit +slug: Mozilla/Marketplace/Publishing/Submit +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit +--- +

This section describes the process for submitting an app to Firefox Marketplace

+

Residual details: https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Submitting_an_app

diff --git a/files/it/mozilla/mobile/index.html b/files/it/mozilla/mobile/index.html new file mode 100644 index 0000000000..f406d8be3a --- /dev/null +++ b/files/it/mozilla/mobile/index.html @@ -0,0 +1,28 @@ +--- +title: Mobile +slug: Mozilla/Mobile +tags: + - HTML + - HTTP + - JavaScript + - Mobile + - Mozilla +translation_of: Mozilla/Mobile +--- +

Firefox OS

+ +

Firefox OS è un sistema operativo mobile Open Source che utilizza Linux e Mozilla con il motore Gecko per eseguire una interfaccia utente e un insieme di applicazioni scritte interamente in HTML, CSS e javaScript

+ +

Leggi come installare Firefox OS e come sviluppare applicazioni per esso.

+ +

Firefox per Android

+ +

Firefox per Android è il browser web mobile di Mozilla per i dispositivi Android. E' stato recentemente riscritto per poter utilizzare un'interfaccia utente nativa di Android, rendendolo più veloce, più snello e reattivo. Fornisce supporto per le più potenti API per accedere alle funzionalità del dispositivo, come la macchina fotografica e la chiamata telefonica.

+ +

Leggi come contribuire al creare Firefox per Android, come utilizzare le sue API e come contribuire a creare componenti aggiunti.

+ +

Sviluppo web sul mobile

+ +

I dispositivi mobili solo molto diversi per quanto riguarda le caratteristiche hardware da un Desktop o laptot, e molte delle API utilizzate per lavorare con tutti gli ambienti sono ancora in corso di standardizzazione.

+ +

Leggi come sviluppare siti web ottimali per i dispositivi mobili e sfruttare le nuove possibilità che tali offrono. Impara a creare il tuo sito web su diversi dispositivi e browser.

diff --git a/files/it/mozilla/mobile/viewport_meta_tag/index.html b/files/it/mozilla/mobile/viewport_meta_tag/index.html new file mode 100644 index 0000000000..5e6617d215 --- /dev/null +++ b/files/it/mozilla/mobile/viewport_meta_tag/index.html @@ -0,0 +1,94 @@ +--- +title: Usare il viewport meta tag per controllare il layout nei browser su mobile +slug: Mozilla/Mobile/Viewport_meta_tag +tags: + - Layout + - Mobile +translation_of: Mozilla/Mobile/Viewport_meta_tag +--- +

Background

+ +

La “{{glossary("viewport")}}” di un browser è l'area della finestra in cui si può vedere il contenuto di una pagina web. Spesso, questa non ha la stessa dimensione della pagina intera, in questo caso i browser mostrano delle barre di scorrimento (scrollbar) per permettere all'utente di scorrere in ogni direzione e usufruire di tutti i contenuti.

+ +

Gli schermi di dispsitivi stretti (come i telefoni) renderizzano le pagine in una finestra virtuale, o “viewport”, che solitamente è più larga dello schermo, e successivamente stringono il risultato già renderizzato in modo che possa essere visto interamente. Gli utenti possono dunque spostarsi e ingrandire per vedere aree differenti della pagina. Per esempio, se lo schermo di uno smartphone ha una larghezza di 640 pixel, le pagine potrebbero essere renderizzate con una finestra virtuale di 980 pixel, e successivamente ristrette per stare nello spazio di 640 pixel.

+ +

Questo avviene perché molte pagine non sono ottimizzate per dispositivi mobili (o almeno, appaiono peggio) quando renderizzati a una minore larghezza rispetto alla finestra virtuale. La “viewport” è un modo per rendere siti non ottimizzati per la visualizzazione da mobile per apparire in modo migliore su schermi stretti.

+ +

Enter viewport meta tag

+ +

However, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.

+ +

To mitigate this problem, Apple introduced the "viewport meta tag" in Safari iOS to let web developers control the viewport's size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard. Apple's documentation does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.

+ +

Learn more about viewports in different mobile browsers in A Tale of Two Viewports at quirksmode.org.

+ +

Viewport basics

+ +

A typical mobile-optimized site contains something like the following:

+ +
<meta name="viewport" content="width=device-width, initial-scale=1">
+ +

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

+ +

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

+ +
+

Usage of user-scalable=no can cause accessibility issues to users with visual impairements such as low vision.

+
+ +

A pixel is not a pixel

+ +

In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially this caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in A pixel is not a pixel.

+ +

On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the CSS 2.1 specification, which says:

+ +
+

If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.

+
+ +

For web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly. But remember that not all mobile devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.

+ +

The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor(density/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.

+ +

Viewport width and screen width

+ +

Sites can set their viewport to a specific size. For example, the definition "width=320, initial-scale=1" can be used to fit precisely onto a small phone display in portrait mode. This can cause problems when the browser doesn't render a page at a larger size. To fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. This is especially useful on large-screen devices like the iPad. (Allen Pike's Choosing a viewport for iPad sites has a good explanation for web developers.)

+ +

For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:

+ +
<meta name="viewport" content="width=500, initial-scale=1">
+ +

Other attributes that are available are minimum-scale, maximum-scale, and user-scalable. These properties affect the initial scale and width, as well as limiting changes in zoom level.

+ +

Not all mobile browsers handle orientation changes in the same way. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:

+ +
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
+ +

Suppress the small zoom applied by many smartphones by setting the initial scale and minimum-scale values to 0.86. The result is horizontal scroll is suppressed in any orientation and the user can zoom in if they want to.

+ +
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
+ +

Common viewport sizes for mobile and tablet devices

+ +

If you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of mobile and tablet viewport sizes here. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}{{Spec2('CSS3 Device')}}Non-normatively describes the Viewport META element
+ +

There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to keep up to date with any changes.

diff --git a/files/it/mozilla/performance/about_colon_memory/index.html b/files/it/mozilla/performance/about_colon_memory/index.html new file mode 100644 index 0000000000..b3d0e3c732 --- /dev/null +++ b/files/it/mozilla/performance/about_colon_memory/index.html @@ -0,0 +1,188 @@ +--- +title: 'about:memory' +slug: 'Mozilla/Performance/about:memory' +tags: + - Performance + - diagnosi + - memoria + - registro + - resoconto +translation_of: 'Mozilla/Performance/about:memory' +--- +

about:memory è una pagina speciale all'interno di Firefox che ti permette di vedere, salvare, caricare e differenziare misure dettagliate sull'uso di memoria di Firefox. Ti permette anche di fare altre operazioni legate alla memoria come attivare i GC, CC; scaricare registri GC e CC; e scaricare resoconti DMD.

+ +

Come generare registri di memoria

+ +

Mettiamo che vuoi misurare l'uso di memoria di Firefox. Forse vorrai analizzarlo tu stesso, o forse qualcuno ti ha chiesto di usare about:memory per generare "registri di memoria" in modo che possano analizzare il problema che stai avendo. Segui questi passaggi.

+ + + +

Nota che in entrambi i casi i dati generati contengono dati sensibili come una lista completa delle pagine web che hai aperte in altri pannelli. Se non desideri condividere queste informazioni, puoi scegliere la spunta "anonymize" prima di premere su "Measure and save..." o "Measure...". Questo fara in modo che i dati sensibili vengano rimossi, ma renderà anche più difficile per gli altri investigare l'uso di memoria.

+ +

Caricare registri di memoria da file

+ +

Il modo più facile di caricare registri di memoria da file è usare il pulsante "Load...". Puoi anche usare il pulsante "Load and diff..." per avere la differenza tra due file di registro.

+ +

I file di registro singoli possono essere caricati automaticamente quando about:memory viene caricato aggiungendo una stringa di ricerca file, per esempio:

+ +
about:memory?file=/home/username/reports.json.gz
+
+ +

Questa è maggiormente utile quando carichi registri di memoria ottenuti da un dispositivo con S. O. firefox

+ +

I registri di memoria vengono salvati come file JSON gzipped. Questi file possono venire caricati per come sono, ma possono anche venire caricati dopo essere stati estratti.

+ +

Interpretare i registri di memoria.

+ +

Quasi tutto quello che vedi in about:memory ha un suggerimento esplicativo. Passa sopra un qualsiasi pulsante per vedere una descrizione di cosa fa. Passa sopra una qualsiasi misura per vedere una descrizione di cosa significa.

+ +

Informazioni fondamentali sulle misure.

+ +

Molte misure usano i byte come unita, ma alcune sono somme o percentuali.

+ +

Molte misure sono presentate all'interno di alberi. Ad esempio:

+ +
 585 (100.0%) -- preference-service
+ └──585 (100.0%) -- referent
+    ├──493 (84.27%) ── strong
+    └───92 (15.73%) -- weak
+        ├──92 (15.73%) ── alive
+        └───0 (00.00%) ── dead
+
+ +

I nodi a foglia rappresentano effettive misure; il valore di ogni nodo interno è la somma dei suoi children.

+ +

L'uso degli alberi permette alle misure di essere divide in ulteriori categorie, sotto-categorie, sotto-sotto-categorie, ecc., fin dove serve. Tutte le misure all'interno di un singolo albero non si soprappongono.

+ +

Possono venire aggiunti percorsi usando "/" come separatore. Per esempio, preference/referent/weak/dead rappresenta il rpercorso  che va all'ultimo nodo a foglia nell'esempio qua sopra. 

+ +

I sotto-alberi possono venire ristretti o allargati cliccandoci sopra. Se trovi un qualsiasi albero in particolare troppo grande da gestire, può essere utile restringere i sotto-alberi immediatamente sotto la radice e poi allargare graduatamente i sotto-alberi d'interesse.

+ +

Sezioni

+ +

Molti registri di memoria sono mostrati in base al processo, con un processo per sezione. All'interno delle misure di ogni processo, ci sono le seguenti sottosezioni.

+ +

Allocazioni esplicite

+ +

Questa sezione contiene un singolo albero, chiamato "explicit", che misure tutta la memoria allocata attraverso chiamate esplicite alle funzioni di allocazione di tipo heap (come malloc e new) e alle funzioni di allocazione non-heap (come mmap e VirtualAlloc).

+ +

Qui c'è un esempio di una sessione di un browser dove i pannelli erano aperti su cnn.com, techcrunch.con e artechnica.com. Vari sotto-alberi sono stati allargati ed altri ristretti per presentare il tutto meglio.

+ +
191.89 MB (100.0%) -- explicit
+├───63.15 MB (32.91%) -- window-objects
+│   ├──24.57 MB (12.80%) -- top(http://edition.cnn.com/, id=8)
+│   │  ├──20.18 MB (10.52%) -- active
+│   │  │  ├──10.57 MB (05.51%) -- window(http://edition.cnn.com/)
+│   │  │  │  ├───4.55 MB (02.37%) ++ js-compartment(http://edition.cnn.com/)
+│   │  │  │  ├───2.60 MB (01.36%) ++ layout
+│   │  │  │  ├───1.94 MB (01.01%) ── style-sheets
+│   │  │  │  └───1.48 MB (00.77%) -- (2 tiny)
+│   │  │  │      ├──1.43 MB (00.75%) ++ dom
+│   │  │  │      └──0.05 MB (00.02%) ── property-tables
+│   │  │  └───9.61 MB (05.01%) ++ (18 tiny)
+│   │  └───4.39 MB (02.29%) -- js-zone(0x7f69425b5800)
+│   ├──15.75 MB (08.21%) ++ top(http://techcrunch.com/, id=20)
+│   ├──12.85 MB (06.69%) ++ top(http://arstechnica.com/, id=14)
+│   ├───6.40 MB (03.33%) ++ top(chrome://browser/content/browser.xul, id=3)
+│   └───3.59 MB (01.87%) ++ (4 tiny)
+├───45.74 MB (23.84%) ++ js-non-window
+├───33.73 MB (17.58%) ── heap-unclassified
+├───22.51 MB (11.73%) ++ heap-overhead
+├────6.62 MB (03.45%) ++ images
+├────5.82 MB (03.03%) ++ workers/workers(chrome)
+├────5.36 MB (02.80%) ++ (16 tiny)
+├────4.07 MB (02.12%) ++ storage
+├────2.74 MB (01.43%) ++ startup-cache
+└────2.16 MB (01.12%) ++ xpconnect
+ +

Per capire i dettagli completi è richiesta della competenza, ma ci sono varie cose che vale la pena di segnalare.

+ + + +

Un po' dell'uso di memoria dei componenti aggiuntivi può venire identificato, come mostra il seguente esempio.

+ +
├───40,214,384 B (04.17%) -- add-ons
+│   ├──21,184,320 B (02.20%) ++ {d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d}/js-non-window/zones/zone(0x100496800)/compartment([System Principal], jar:file:///Users/njn/Library/Application%20Support/Firefox/Profiles/puna0zr8.new/extensions/%7Bd10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d%7D.xpi!/bootstrap.js (from: resource://gre/modules/addons/XPIProvider.jsm:4307))
+│   ├──11,583,312 B (01.20%) ++ jid1-xUfzOsOFlzSOXg@jetpack/js-non-window/zones/zone(0x100496800)
+│   ├───5,574,608 B (00.58%) -- {59c81df5-4b7a-477b-912d-4e0fdf64e5f2}
+│   │   ├──5,529,280 B (00.57%) -- window-objects
+│   │   │  ├──4,175,584 B (00.43%) ++ top(chrome://chatzilla/content/chatzilla.xul, id=4293)
+│   │   │  └──1,353,696 B (00.14%) ++ top(chrome://chatzilla/content/output-window.html, id=4298)
+│   │   └─────45,328 B (00.00%) ++ js-non-window/zones/zone(0x100496800)/compartment([System Principal], file:///Users/njn/Library/Application%20Support/Firefox/Profiles/puna0zr8.new/extensions/%7B59c81df5-4b7a-477b-912d-4e0fdf64e5f2%7D/components/chatzilla-service.js)
+│   └───1,872,144 B (00.19%) ++ treestyletab@piro.sakura.ne.jp/js-non-window/zones/zone(0x100496800)
+ +

Altre cose che vale la pena di far notare sono come segue:

+ + + +

Altre misure

+ +

Questa sezione contiene alberi multipli, inclusde molti che si incrociano le misure nell'albero "explicit". Per esempio, nell'albero "explicit" tutti i DOM e le misure dei layout sono divise da finestra a finestra, ma in "Other Measurements" quelle misure sono aggregate in totali per l'intero browser, come mostra il seguente esempio.

+ +
26.77 MB (100.0%) -- window-objects
+├──14.59 MB (54.52%) -- layout
+│  ├───6.22 MB (23.24%) ── style-sets
+│  ├───4.00 MB (14.95%) ── pres-shell
+│  ├───1.79 MB (06.68%) ── frames
+│  ├───0.89 MB (03.33%) ── style-contexts
+│  ├───0.62 MB (02.33%) ── rule-nodes
+│  ├───0.56 MB (02.10%) ── pres-contexts
+│  ├───0.47 MB (01.75%) ── line-boxes
+│  └───0.04 MB (00.14%) ── text-runs
+├───6.53 MB (24.39%) ── style-sheets
+├───5.59 MB (20.89%) -- dom
+│   ├──3.39 MB (12.66%) ── element-nodes
+│   ├──1.56 MB (05.84%) ── text-nodes
+│   ├──0.54 MB (02.03%) ── other
+│   └──0.10 MB (00.36%) ++ (4 tiny)
+└───0.06 MB (00.21%) ── property-tables
+ +

Alcuni degli alberi di questa sezione misurano cose che non si incrociano con le misure dell'albero "explicit", come quelle nell'esempio "preference service" qua sopra.

+ +

Per ultimo, alla fine di questa sezione ci sono misure individuali, come mostra l'esempio seguente.

+ +
    0.00 MB ── canvas-2d-pixels
+    5.38 MB ── gfx-surface-xlib
+    0.00 MB ── gfx-textures
+    0.00 MB ── gfx-tiles-waste
+          0 ── ghost-windows
+  109.22 MB ── heap-allocated
+        164 ── heap-chunks
+    1.00 MB ── heap-chunksize
+  114.51 MB ── heap-committed
+  164.00 MB ── heap-mapped
+      4.84% ── heap-overhead-ratio
+          1 ── host-object-urls
+    0.00 MB ── imagelib-surface-cache
+    5.27 MB ── js-main-runtime-temporary-peak
+          0 ── page-faults-hard
+    203,349 ── page-faults-soft
+  274.99 MB ── resident
+  251.47 MB ── resident-unique
+1,103.64 MB ── vsize
+ +

Alcune misure importanti sono come segue.

+ + diff --git a/files/it/mozilla/performance/index.html b/files/it/mozilla/performance/index.html new file mode 100644 index 0000000000..828fe485be --- /dev/null +++ b/files/it/mozilla/performance/index.html @@ -0,0 +1,143 @@ +--- +title: Performance +slug: Mozilla/Performance +tags: + - Add-ons + - Debugging + - Development + - Mozilla + - NeedsTranslation + - Performance + - TopicStub +translation_of: Mozilla/Performance +--- +

The articles linked to from here will help you improve performance, whether you're developing core Mozilla code or an add-on.

+ + + + + + + + +
+

Documentation

+ +
+
Reporting a Performance Problem
+
A user friendly guide to reporting a performance problem. A development environment is not required.
+
Benchmarking
+
Tips on generating valid performance metrics.
+
Performance best practices in extensions
+
A performance "best practices" guide for extension developers.
+
Measuring Add-on Startup Performance
+
A guide for add-on developers on how to set up a performance testing environment.
+
XUL School: Add-on Performance
+
Tips for add-on developers to help them avoid impairing application performance.
+
GPU performance
+
Tips for profiling and improving performance when using a GPU.
+
Scroll-Linked Effects
+
Information on scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques.
+
Automated Performance Testing and Sheriffing
+
Information on automated performance testing and sheriffing at Mozilla.
+
+ +

View all pages tagged with "Performance"...

+ +

Memory profiling and leak detection tools

+ +
+
The Developer Tools "Memory" panel
+
The memory panel in the devtools supports taking heap snapshots, diffing them, computing dominator trees to surface "heavy retainers", and recording allocation stacks.
+
+ +
+
about:memory
+
about:memory is the easiest-to-use tool for measuring memory usage in Mozilla code, and is the best place to start. It also lets you do other memory-related operations like trigger GC and CC, dump GC & CC logs, and dump DMD reports. about:memory is built on top of Firefox's memory reporting infrastructure.
+
DMD
+
DMD is a tool that identifies shortcomings in about:memory's measurements, and can also do multiple kinds of general heap profiling.
+
Are We Slim Yet
+
areweslimyet.com (a.k.a. AWSY) is a memory usage and regression tracker.
+
BloatView
+
BloatView prints per-class statistics on allocations and refcounts, and provides gross numbers on the amount of memory being leaked broken down by class. It is used as part of Mozilla's continuous integration testing.
+
Refcount tracing and balancing
+
Refcount tracing and balancing are ways to track down leaks caused by incorrect uses of reference counting. They are slow and not particular easy to use, and thus most suitable for use by expert developers.
+
GC and CC logs
+
GC and CC logs can be generated and analyzed to in various ways. In particular, they can help you understand why a particular object is being kept alive.
+
Valgrind
+
Valgrind is a tool that detects various memory-related problems at runtime, including leaks. Valgrind is used as part of Mozilla's continuous integration testing, though the coverage is limited because Valgrind is slow.
+
LeakSanitizer
+
LeakSanitizer (a.k.a. LSAN) is similar to Valgrind, but it runs faster because it uses static source code instrumentation. LSAN is part of Mozilla's continuous integration testing, with most tests running through it as part of the AddressSanitizer (a.k.a. ASAN) test jobs.
+
Apple tools
+
Apple provides some tools for Mac OS X that report similar problems to those reported by LSAN and Valgrind. The "leaks" tool is not recommended for use with SpiderMonkey or Firefox, because it gets confused by tagged pointers and thinks objects have leaked when they have not (see bug 390944).
+
Leak Gauge
+
Leak Gauge is a tool that can be used to detect certain kinds of leaks in Gecko, including those involving documents, window objects, and docshells.
+
LogAlloc
+
LogAlloc is a tool that dumps a log of memory allocations in Gecko. That log can then be replayed against Firefox's default memory allocator independently or through another replace-malloc library, allowing the testing of other allocators under the exact same workload.
+
Memory Profiler
+
The memory profiler samples allocation events and provides different views to analyze the allocation characteristic.
+
+ +

See also the documentation on Leak-hunting strategies and tips.

+ 		+

Profiling and performance tools

+ +
+
Profiling with the Developer Tools Profiler
+
The profiler built into the developer tools has a high-level waterfall, detailed call tree, allocations and GC profiling, and flame graphs. It is available on all platforms and release channels, and also supports remote profiling b2g and Fennec.
+
+ +
+
Profiling with the Gecko Profiler {{ gecko_minversion_inline("16.0") }}
+
The Gecko Profiler is a good tool to start with, particularly for understanding where time is spent within C++ code in Firefox.
+
Profiling with Instruments
+
How to use Apple's Instruments tool to profile Mozilla code.
+
Profiling with Xperf
+
How to use Microsoft's Xperf tool to profile Mozilla code.
+
Profiling with Concurrency Visualizer
+
How to use Visual Studio's Concurrency Visualizer tool to profile Mozilla code.
+
Profiling with Zoom
+
Zoom is a profiler for Linux done by the people who made Shark
+
Measuring performance using the PerfMeasurement.jsm code module {{ gecko_minversion_inline("2.0") }}
+
Using PerfMeasurement.jsm to measure performance data in your JavaScript code.
+
Adding a new Telemetry probe
+
Information on how to add a new measurement to the Telemetry performance-reporting system
+
Profiling JavaScript with Shark (obsolete - replaced by Instruments)
+
How to use the Mac OS X Shark profiler to profile JavaScript code in Firefox 3.5 or later.
+
Profiling with Shark (obsolete - replaced by Instruments)
+
How to use Apple's Shark tool to profile Mozilla code.
+
Investigating CSS Performance
+
How to figure out why restyle is taking so long
+
+ +

Power profiling

+ +
+
Power profiling overview
+
This page provides an overview of relevant information, including details about hardware, what can be measured, and recommended approaches. It should be the starting point for anybody new to power profiling.
+
tools/power/rapl (Mac, Linux)
+
tools/power/rapl is a command-line utility in the Mozilla codebase that uses the Intel RAPL interface to gather direct power estimates for the package, cores, GPU and memory.
+
powermetrics (Mac-only)
+
powermetrics is a command-line utility that gathers and displays a wide range of global and per-process measurements, including CPU usage, GPU usage, and various wakeups frequencies.
+
TimerFirings logging (All platforms)
+
TimerFirings logging is a built-in logging mechanism that prints data on every time fired.
+
Activity Monitor, Battery Status Menu and top (Mac-only)
+
The battery status menu, Activity Monitor and top are three related Mac tools that have major flaws but often consulted by users, and so are worth understanding.
+
Intel Power Gadget (Windows, Mac, Linux)
+
Intel Power Gadget provides real-time graphs for package and processor RAPL estimates. It also provides an API through which those estimates can be obtained.
+
perf (Linux-only)
+
perf is a powerful command-line utility that can measure many different things, including energy estimates and high-context measurements of things such as wakeups.
+
turbostat (Linux-only)
+
turbostat is a command-line utility that gathers and displays various power-related measurements, with a focus on per-CPU measurements such as frequencies and C-states.
+
powertop (Linux-only)
+
powertop is an interactive command-line utility that gathers and displays various power-related measurements.
+
+ + + +
+
JavaScript, XPCOM, Developing Mozilla, Extensions, Addons
+
+
+ +

 

diff --git a/files/it/mozilla/preferences/index.html b/files/it/mozilla/preferences/index.html new file mode 100644 index 0000000000..1169ecabf1 --- /dev/null +++ b/files/it/mozilla/preferences/index.html @@ -0,0 +1,48 @@ +--- +title: Preferences +slug: Mozilla/Preferences +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Preferences +--- +

The preference system makes it possible to store data for Mozilla applications using a key/value pairing system. These articles provide information about how to use the preference system.

+ + + + + + + +
+

Documentation

+
+
Preferences system
+
An introduction to using the preference system in Mozilla.
+
XUL School: Handling preferences
+
The XUL School tutorial chapter on preferences.
+
Mozilla preference reference
+
A reference guide to all Mozilla preferences; currently a work in progress.
+
A brief guide to Mozilla preferences
+
An introductory guide to where preferences are stored and other useful information about the core preference system.
+
Using preferences from application code {{gecko_minversion_inline("6.0")}}
+
Firefox 6 introduced static functions for accessing preferences efficiently from within application code. This API is not available for add-ons, but if you're working on a Gecko application, this API is the preferred way to access preferences.
+
Mozilla networking preferences
+
A guide to key networking-related preferences.
+
Mozilla preferences for uber-geeks
+
A guide to preferences that only truly elite geeks should play with.
+
+

View all pages tagged with "Preferences"...

+ 		+

Examples

+
+
Code snippets
+
Preference-related code snippets.
+
Adding preferences to an extension
+
How to add preferences to an existing extension.
+
+ + +
diff --git a/files/it/mozilla/preferences/una_breve_guida_alle_impostazioni_di_mozilla/index.html b/files/it/mozilla/preferences/una_breve_guida_alle_impostazioni_di_mozilla/index.html new file mode 100644 index 0000000000..6256382fe5 --- /dev/null +++ b/files/it/mozilla/preferences/una_breve_guida_alle_impostazioni_di_mozilla/index.html @@ -0,0 +1,110 @@ +--- +title: Una breve guida alle preferenze di Mozilla +slug: Mozilla/Preferences/Una_breve_guida_alle_impostazioni_di_Mozilla +translation_of: Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences +--- +
+

Questo articolo è rivolto agli utenti con conoscenze avanzate e agli amministratori di sistema. In questo articolo troverete una panoramica generale delle impostazioni di Mozilla ( note come preferenze ), compreso l'elenco dei file in cui esse vengono memorizzate ed un'analisi della sequenza di caricamento di questi file, oltre alle informazioni necessarie alla modifica di tali impostazioni.

+
+ +

Cos'è una preferenza?

+ +
+

Una preferenza è un qualsiasi valore oppure un particolare comportamento che possa essere selezionato fra altri valori o comportamenti ( presumibilmente, un valore o un comportamento è "preferibile" ad un altro ). Le modifiche alle preferenze, apportate attraverso l'interfaccia utente, normalmente diventano effettive immediatamente. I valori vengono salvati nel profilo utente ( nel file prefs.js ), sia per Firefox che per Thunderbird.

+ +

Una preferenza viene letta da un file e può invocare fino a quattro metodi: pref(), user_pref(), sticky_pref() e lockPref(). Tutti i file che conservano le preferenze possono invocare pref(), user_pref() e sticky_pref(), mentre il file di configurazione può invocare anche lockPref().

+
+ +

I file delle preferenze

+ +
+

Per proteggere la privacy, prevenendo la possibilità di un caricamento involontario, nel browser, di un file delle preferenze, la prima riga del file viene resa "un-parseable" ( non analizzabile ) e saltata in fase di caricamento. La sola eccezione è per il file user.js .

+ +

Al lancio dell'applicazione, vengono caricati diversi file delle preferenze:

+ +
+
I file delle preferenze di default
+
+

Firefox trova le preferenze di default in più file, tutti all'interno della directory dell'applicazione:

+ +
    +
  • greprefs.js - contiene le preferenze condivise da tutte le applicazioni che utilizzano la piattaforma Mozilla.
    • +
  • services/common/services-common.js - contiene le preferenze per alcuni servizi condivisi. Verosimilmente, potrebbe essere incluso in qualche altro file.
    • +
  • defaults/pref/services-sync.js - contiene le preferenze di default per la sincronizzazione di Firefox ( Firefox Sync ): salvato anche in posizione strana.
    • +
  • browser/app/profile/channel-prefs.js - un file che contiene il nome del canale dell'utente da usare per gli aggiornamenti. Viene tenuto separato dalle altre preferenze, poichè può agire sulle modalità di applicazione degli aggiornamenti.
    • +
  • browser/app/profile/firefox.js - contiene le preferenze di default specifiche per Firefox.
    • +
  • browser/app/profile/firefox-branding.js - contiene le preferenze di default specifiche per la versione di Firefox installata (Nightly, Aurora, Beta, Release).
    • +
  • browser/defaults/preferences/firefox-l10n.js - contiene le preferenze di default specifiche per la lingua installata in Firefox. Nessuno degli altri file delle  preferenze contiene preferenze locali specifiche.
    • +
+
+
Config. file
+
+

Un file di configurazione, normalmente con estensione .cfg, può essere invocato da un file di default delle preferenze utilizzando la preferenza general.config.filename. Questo file permette il blocco delle preferenze (preference locking) attraverso la funzione lock_pref(). I dettagli sul file di configurazione sono al di fuori dello scopo di questo documento.

+
+
User pref. files
+
+

Nella directory di profilo ci sono due file delle preferenze riservate all'utente:  prefs.js e user.js.  prefs.js viene generato automaticamente dall'applicazione e non dovrebbe essere modificato manualmente, mentre user.js è un file opzionale che l'utente può creare per sovrascrivere le preferenze inizializzate in altri file delle preferenze.

+
+
+
+ +

Caricamento delle preferenze e risoluzione

+ +
+

Al lancio dell'applicazione, l'applicazione carica le preferenze nel seguente ordine:

+ +
    +
  1. +

    tutti i file di default delle preferenze.

    +
    2. +
  2. +

    Se c'è, il file di configurazione.

    +
    3. +
  3. +

    I file delle preferenze dell'utente: il file prefs.js prima, il file user.js  poi.

    +
    4. +
+ +

I conflitti vengono risolti in favore dell'ultimo record caricato; per esempio, user.js ha la precedenza su prefs.js .

+ +

Se l'applicazione incontra un qualsiasi errore durante il caricamento di un file di default delle preferenze, l'applicazione emette un messaggio di avviso che informa che il caricamento del file è fallito e si chiude. Questo permette agli amministratori di sistema di sapere velocemente se c'è un errore di configurazione nell'installazione. Se l'applicazione incontra un qualsiasi errore durante il caricamento di un file delle preferenze dell'utente, invece, l'applicazione emette un messaggio di avviso, ma continua nell'esecuzione.

+
+ +

Salvare le preferenze

+ +
+

Normalmente, quando un utente conferma una modifica di una preferenza, effettuata attraverso l'interfaccia utente, come, ad esempio, la finestra di dialogo Preferenze, l'applicazione salva la modifica sovrascrivendo il file prefs.js . Alla chiusura dell'applicazione, tutte le preferenze utente vengono salvate nel file prefs.js . Questo significa anche che le preferenze inizialmente impostate nel file user.js verranno anche salvate nel file prefs.js.

+ +

NON modificare il file prefs.js direttamente.

+ +

Nota: l'applicazione non modifica mai il file user.js. In questo modo, al lancio dell'applicazione, il file user.js sovrascrive le preferenze in conflitto con la precedente sessione dell'applicazione.

+ +

Quando viene scritto il file prefs.js, vengono salvate solo le preferenze utente che hanno valori differenti dai valori di default. La sola eccezione a questo è la preferenza letta utilizzando la funzione sticky_pref() - questa preferenza viene scritta comunque, basta che contenga un valore dato dall'utente, anche se questo valore fosse identico al valore di default.

+
+ +

Modificare le preferenze

+ +
+

Gli utenti avanzati possono impostare le preferenze utilizzando l'editor avanzato delle preferenze, digitando about:config nella barra degli indirizzi del browser. Questa interfaccia utente ( UI ) non è da raccomandare alla gran parte degli utenti. Le modifiche alle preferenze da effettuarsi da un programma possono essere richieste utilizzando il modulo JS Preferences.jsm ( JavaScript Module ), oppure i metodi della classe statica mozilla::Preferences del codice C++.

+ +

Modificare i valori di default

+ +

Un amministratore di sistema può modificare una preferenza di default in due modi:

+ +
    +
  1. l'amministratore può aggiungere un file delle preferenze chiamato all-companyname.js (install_directory/browser/defaults/preferences/all-companyname.js). Questo file verrà analizzato per ultimo, nel corso del processo di caricamento delle preferenze.
    2. +
  2. +

    l'amministratore, in alternativa, può salvare il file user.js nella directory app_dir/defaults/profile/ ; in questo modo, una copia del file user.js verrà salvata in ogni nuovo profilo creato. Questo metodo ha il vantaggio di riportare, ad ogni start-up, le preferenze ai valori voluti dall'amministratore. Ricorda, però, che un utente, detenendo i privilegi necessari ad accedere alla propria directory di profilo, potrà sempre modificare i valori di default, sempre che sappia come farlo. Un altro svantaggio di questa alternativa è che i profili esistenti non verranno influenzati dai nuovi valori assegnati. Questo metodo è considerato user-hostile ( ostile all'utente ). Qualsiasi uso di questa tecnica, fatta da software quali le estensioni Firefox, al fine di sovrascrivere le preferenze utente normali, darà, come risultato, quello di essere inseriti nella blocklist di Firefox oppure di vedere rimosse forzatamente le preferenze stesse.

    +
    3. +
+ +
+

Nota: a causa degli abusi del file user.js, il supporto per il file user.js potrebbe essere rimosso nelle versioni future di Firefox.

+
+
+ +

Le Sticky Preference

+ +

Le Sticky preference furono introdotte in Firefox 40, via bug 1098343.

+ +

Le Sticky preference vengono create con la funzione sticky_pref(). Queste preferenze si comportano come le preferenze di default, ma ovunque venga stabilito un valore per la preferenza, quel valore viene sempre scritto, anche se uguale al valore di default. Le Sticky preference vengono usate, generalmente, per le preferenze che hanno un valore di default differente per ciascun canale. L'intento è di impostare il valore di una preferenza per un canale e far sì che quel valore resti invariato, anche utilizzando un differente canale, per il quale sia previsto un diverso valore di default. Per esempio, ipotizziamo che Nightly abbia una preferenza "some.preference" con valore di default impostato a "true", mentre DeveloperEdition assegna alla stessa preferenza il valore di default "false". Ipotizziamo ora che l'utente desideri che la preferenza abbia valore "true" per entrambi i canali. Se la preferenza non è una Sticky preference e l'utente esegue DeveloperEdition e cambia la preferenza in "true", la modifica verrà salvata perchè non è uguale al valore di default. Quando l'utente eseguirà Nightly, la preferenza avrà lo stesso valore di default e, di conseguenza, non verrà salvata da Nightly. Quando l'utente eseguirà ancora DeveloperEdition, il valore della preferenza sarà "false", poichè  Nightly non aveva salvato alcuna preferenza utente. Se la preferenza viene definita come Sticky preference, il valore "true" verrà salvato da Nightly anche se riconosciuto come valore corrente di default, così che quando verrà eseguita DeveloperEdition, la preferenza avrà il valore desiderato di "true".

diff --git a/files/it/mozilla/projects/index.html b/files/it/mozilla/projects/index.html new file mode 100644 index 0000000000..6291137b31 --- /dev/null +++ b/files/it/mozilla/projects/index.html @@ -0,0 +1,14 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +

{{ draft() }}

+

This page needs to become a pretty index to Mozilla projects whose documentation is located under it.

+

{{ LandingPageListSubpages() }}

diff --git a/files/it/mozilla/projects/nss/esempi_codice_nss/index.html b/files/it/mozilla/projects/nss/esempi_codice_nss/index.html new file mode 100644 index 0000000000..e98ceaa015 --- /dev/null +++ b/files/it/mozilla/projects/nss/esempi_codice_nss/index.html @@ -0,0 +1,28 @@ +--- +title: Esempi di Codice NSS +slug: Mozilla/Projects/NSS/Esempi_Codice_NSS +tags: + - Esempi NSS +translation_of: Mozilla/Projects/NSS/NSS_Sample_Code +--- +

Esempi di Codice NSS

+ +

La collezione di esempi di codice che segue, mostra come NSS possa essere usato per le operazioni crittografiche, la gestione di certificati, SSL, ecc... Mostra inoltre alcune buone norme nell'applicazione della crittografia.

+ +

 

+ +
    +
  1. Esempio di Codice 1: Generazione di Chiavi e Trasporto tra server
    2. +
  2. Esempio di Codice 2: Crittografia Simmetrica
    3. +
  3. Esempio di Codice 3: Hashing, MAC
    4. +
  4. Esempio di Codice 4: Crittografia PKI
    5. +
  5. Esempio di Codice 5: Crittografia PKI con chiave pubblica e privata raw in formato DER
    6. +
  6. Sample Code 6: Chiavi Simmetriche Permanenti in database NSS
    7. +
+ +


+ Questi esempi dono molto vecchi e necessitano di essere sostituiti. Vedi https://bugzilla.mozilla.org/show_bug.cgi?id=490238

+ +

C'è una git repo temporanea con il lavoro in corso

+ +
git clone git://fedorapeople.org/~emaldonado/samples.git
diff --git a/files/it/mozilla/projects/nss/index.html b/files/it/mozilla/projects/nss/index.html new file mode 100644 index 0000000000..718314f916 --- /dev/null +++ b/files/it/mozilla/projects/nss/index.html @@ -0,0 +1,198 @@ +--- +title: Network Security Services +slug: Mozilla/Projects/NSS +tags: + - JSS + - NSS + - NeedsMigration + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Projects/NSS +--- +

Network Security Services (NSS) is a set of libraries designed to support cross-platform development of security-enabled client and server applications. Applications built with NSS can support SSL v2 and v3, TLS, PKCS #5, PKCS #7, PKCS #11, PKCS #12, S/MIME, X.509 v3 certificates, and other security standards.

+

For detailed information on standards supported, see Overview of NSS. For a list of frequently asked questions, see the FAQ.

+

NSS is available under the Mozilla Public License. For information on downloading NSS releases as tar files, see Download PKI Source.

+

If you're a developer and would like to contribute to NSS, you might want to read the documents highlevel overview of internal details of NSS and getting started with NSS.

+ + + + + + + +
+

Documentation

+

Background Information

+
+
+ Overview of NSS
+
+ Provides a brief summary of NSS and its capabilities.
+
+ NSS FAQ
+
+ Answers basic questions about NSS.
+
+ Introduction to Public-Key Cryptography
+
+ Explains the basic concepts of public-key cryptography that underlie NSS.
+
+ Introduction to SSL
+
+ Introduces the SSL protocol, including information about cryptographic ciphers supported by SSL and the steps involved in the SSL handshake.
+
+

Getting Started

+
+
+ NSS Releases
+
+ This page contains information about the current and past releases of NSS.
+
+ Get the source code and Build it
+
+ Instructions on how to build NSS on the different supported platforms.
+
+ Get Mozilla Source Code Using Mercurial
+
+ Information about with working with Mercurial.
+
+ Get Mozilla Source Code Using CVS (deprecated)
+
+ Old deprecated CVS documentation.
+
+

NSS APIs

+
+
+ Introduction to Network Security Services
+
+ Provides an overview of the NSS libraries and what you need to know to use them.
+
+ NSS Public Functions
+
+ Summarizes the APIs exported by the NSS shared libraries.
+
+ NSS Reference
+
+ API used to invoke SSL operations.
+
+ NSS API Guidelines
+
+ Explains how the libraries and code are organized, and guidelines for developing code (naming conventions, error handling, thread safety, etc.)
+
+ NSS Technical Notes
+
+ Links to NSS technical notes, which provide latest information about new NSS features and supplementary documentation for advanced topics in programming with NSS.
+
+

Tools, testing, and other technical details

+
+
+ Build Instructions for NSS
+
+ Describe how to check out and build NSS releases.
+
+
+
+ NSS Developer Tutorial
+
+ How to make changes in NSS. Coding style, maintaining ABI compatibility.
+
+
+
+ NSS Tools
+
+ Tools for developing, debugging, and managing applications that use NSS.
+
+ Sample Code
+
+ Demonstrates how NSS can be used for cryptographic operations, certificate handling, SSL, etc.
+
+ NSS 3.2 Test Suite
+
+ Archived version. Describes how to run the standard NSS tests.
+
+ NSS Performance Reports
+
+ Archived version. Links to performance reports for NSS 3.2 and later releases.
+
+ Encryption Technologies Available in NSS 3.11
+
+ Archived version. Lists the cryptographic algorithms used by NSS 3.11.
+
+ NSS 3.1 Loadable Root Certificates
+
+ Archived version. Describes the scheme for loading root CA certificates.
+
+ cert7.db
+
+ Archived version. General format of the cert7.db database.
+
+

PKCS #11 information

+ +
+
+

CA certificates pre-loaded into NSS

+ +
+
+

NSS is built on top of Netscape Portable Runtime (NSPR)

+
+
+ Netscape Portable Runtime
+
+ NSPR project page.
+
+ NSPR Reference
+
+ NSPR API documentation.
+
+

Additional Information

+ +

Testing

+ +

Planning

+

Information on NSS planning can be found at wiki.mozilla.org, including:

+ + 		+

Community

+
    +
  • View Mozilla Security forums...
    • +
+

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

+
    +
  • View Mozilla Cryptography forums...
    • +
+

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

+ + +
+

 

diff --git a/files/it/mozilla/qa/bug_writing_lineeguida/index.html b/files/it/mozilla/qa/bug_writing_lineeguida/index.html new file mode 100644 index 0000000000..31eca62c6d --- /dev/null +++ b/files/it/mozilla/qa/bug_writing_lineeguida/index.html @@ -0,0 +1,253 @@ +--- +title: Linee guida per la segnalazione dei Bug +slug: Mozilla/QA/Bug_writing_lineeguida +translation_of: Mozilla/QA/Bug_writing_guidelines +--- +
+

Se avete bisogno di aiuto con i software Mozilla (per esempio con Firefox, Seamonkey o Thunderbird), usate una delle support options disponibili. Non modifcate questa pagina!

+
+ +

Questa pagina da per scontato che vogliate contribuire al progetto Mozilla raccogliendo abbastanza informazioni per poter caricare un bug report utile, nel sistema di bug tracking di Mozilla. Grazie!

+ +

Se siete nuovi nella segnalazione dei bug, potreste voler provare ad ottenere aiuto da i contributori di maggior esperienza. Controllate la sezione Community nella pagina  QA (Question and Answers - Domande e risposte) per avere indicazioni. Se vi accingete a segnalare un bug  Firefox, potete anche ottenere assistenza nel canale #firefox su irc.mozilla.org. Per altri progetti (es., Thunderbird, SeaMonkey) potete trovare  il canale appropriato su IRC.

+ +

Come segnalare un bug

+ +

Aprite un nuovo bug report per ogni problema!

+ +

Così verrà completato un flusso di correzione bug (bugfix) efficace per ogni  problema.

+ +

Altri dettagli cui prestare attenzione

+ +
    +
  1. Descrivere i passi per riprodurre il bug: + +
      +
    • Se avete precisi passi per riprodurre — ottimo! — siete sulla buona strada per segnalare un bug report utile.
      • +
    • Se riuscite a riprodurre occasionalmente, ma non a seguito di specifici passi, dovete  fornire ulteriori informazioni perchè il bug report sia utile.
      • +
    • Se non riuscite a riprodurre il problema, probabilmente non è utile riportarlo, a meno che non riusciate a fornire informazioni univoche circa il suo verificarsi.
      • +
    +
    2. +
  2. assicuratevi che il vs software sia aggiornato. L'ideale sarebbe, testare il problema conuna versione in fase di sviluppo per vedere se il bug è stato già corretto (e.g. Firefox Beta, Aurora, o l'avanzatissima Nightly).
    3. +
  3. Quando riportate un bug di Firefox, prima verificate se potete riprodurlo in un nuovo profilo Firefox. Se il bug si verifica solo nel vostro profilo esistente, provate a identificare quali settings, extensions, o files nel vostro profilo sono necessari per riprodurre il bug. +
      +
    • Se il bug sembra "eclatante" (cioè ovviamente che affligge una larga porzione di utenti),  probabilmente c'è qualcosa di insolito nella configurazione che è una parte necessaria dei passaggi per riprodurre il bug. Hai molte più possibilità di capirlo rispetto a uno sviluppatore che non ha accesso al tuo sistema.
      • +
    • Se il bug rientra in uno dei tipi specifici di bug elencati in una sezione sottostante, potrebbe comunque essere utile anche se non potete riprodurlo in un nuovo profilo Firefox.
      +  
      • +
    +
    4. +
  4. Apri il modulo Inserisci un nuovo bug  (Enter a new bug) che ti guiderà nella maggior parte del processo di segnalazione dei bug: +
      +
    • Crea un account Bugzilla se non ne hai già uno, seleziona il prodotto con il bug.
      • +
    • Inserite un riassunto univoco chiaro (clear unique summary) come descritto nel seguito; controlla se il bug è già stato segnalato (se vuoi essere più completo, c'è una guida avanzata sullo screening dei bug duplicati).
      • +
    • Fornite passaggi precisi per riprodurre, risultati attesi e risultati effettivi come descritto nella sezione seguente.
      • +
    • Fornite ulteriori informazioni (anche descritte di seguito), soprattutto se non è possibile riprodurre il bug in un nuovo profilo; e / o segnalando crash, utilizzo della memoria, prestazioni, bug di regressione; o se il problema è con un sito web specifico.
      • +
    +
    5. +
  5. In caso di problemi multipli, si prega di presentare segnalazioni di bug separate.
    6. +
+ +

Scrivere un riassunto chiaro

+ +

Come descrivereste il bug usando approssimativamente 10 parole? Questa è la prima parte del vostro bug report che un triager o uno sviluppatore vedrà.

+ +

Un buon riassunto deve identificare il bug report in maniera rapida e chiara. Esso deve spiegare il problema, non suggerire la soluzione.

+ + + + + +

Scrivere passi precisi per riprodurre

+ +

Come può uno sviluppatore riprodurre il bug sul proprio computer?
+
+ I passaggi per la riproduzione sono la parte più importante di qualsiasi segnalazione di bug. Se uno sviluppatore è in grado di riprodurre il bug, è molto probabile che il bug sia corretto. Se i passaggi non sono chiari, potrebbe non essere nemmeno possibile sapere se il bug è stato corretto.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Cosa includere in un bug report?Bene (preciso) esempio +

Cattivo (inpreciso)

+
Indicare se è possibile riprodurre il bug a volontà, occasionalmente o per niente.Posso riprodurlo eseguendo i passi seguenti: 
+

Descrivi il tuo metodo di interazione con Firefox oltre all'intento di ogni passaggio.

+ 		+

1. Avvia Firefox facendo clic sull'icona del desktop
+ 2. Premere Cmd + N (o Ctrl + N per utenti Windows) per aprire una nuova finestra del browser
+ 3. Incolla https://mail.google.com/ nella barra degli indirizzi e premere Invio

+ 		Apri Gmail in un'altra finestra
+

Dopo i passaggi, descrivere con precisione il risultato (effettivo) osservato e il risultato atteso. Separare chiaramente i fatti (osservazioni) dalle speculazioni.

+ 		Risultati previsti: la mia Posta in arrivo viene visualizzata correttamente.
+ Risultati effettivi: nella mia Posta in arrivo viene visualizzato il messaggio "Il browser non supporta i cookie (errore -91)".		 +

"Non funziona"

+ +

"La pagina è mostrata non correttamente"

+
+ +

Providing additional information

+ +

The following information is requested for most bug reports. You can save time by providing this information below the Expected results. If you need to attach multiple files, you can do so after submitting the report.

+ +

For specific types of bugs

+ +

If you are reporting a crash bug, please include a Breakpad ID or attach stack trace, and include the crash signature in the bug summary as well as in the Crash Signature field.

+ +

If you are reporting a memory use or leak bug, please attach the output of about:memory. Ideally, find steps to reproduce an increase in what is shown in about:memory (even after clicking the "Minimize memory usage" button at the bottom). If you have trouble finding steps to reproduce, try the Firefox Support page titled Firefox Uses Too Much Memory (Ram) - How to Fix. If you are a C++ developer, more precise tools are available.

+ +

If you are reporting a bug about slowness or high CPU usage, please provide a link to the performance profile in the bug.

+ +

If you are reporting a hang (beachball on OS X or "not responding" on Windows), please follow the instructions in How to Report a Hung Firefox.

+ +

If you are reporting a bug involving a Flash hang, please visit https://wiki.mozilla.org/Flash/Hang_Debugging to learn how to provide useful information for developers.

+ +

If you are reporting a bug involving a specific web page, please try to make a reduced testcase and attach it to the bug report. If you don't have time or expertise, please report the issue to webcompat.com instead, where our volunteers will do this for you.

+ +

If the bug was recently introduced, finding a regression window can help identify the cause of the bug.

+ +

What if my bug seems "random" or "intermittent"?

+ +

For most Firefox bugs

+ +

You should provide the following information for most Firefox bugs.

+ + + + + + + + + + + + + + + + + + + + +
What should you include in a bug report?Example
Indicate if the problem can be reproduced using a new Firefox profile and any changes you need to make in order to reproduce.The problem can be reproduced in a new profile, but only if Preferences -> Privacy & Security -> Tracking Protection is selected.
If you can only reproduce with an existing profile try to figure out what settings, extensions, or files in your profile are needed to reproduce the bug. If you skip the step, save the troubleshooting information from about:support to a file and attach it to the bug report.I can't reproduce in a new profile, about:support information from the offending profile is attached.
+

Indicate if the problem can be reproduced using the latest Nightly build. Include the Build ID from about:support.

+ +

If possible, test using the new Firefox profile you created. If you need to test the Nightly build with your regular profile, you might want to back up the profile first, since the pre-release build may corrupt your data.

+ 		The problem can be reproduced on the latest Nightly (Build ID 20170416100136).
+ +

 

+ +
+

Original document information

+ + +
+ +

 

+ +
+

Advanced

+ +

Finding the correct product and component

+ +

You will be asked to categorize your bug into a "product" and a "component" within that product, in order to direct your report to the correct developers.

+ +

If you're using Firefox, the bug is most likely in "Firefox", "Toolkit", or "Core".

+ + + +

When in doubt, search for similar bugs and see which component they are in.

+ +

If none of the components seem appropriate, look for a "General" component in the most appropriate product.

+ +

General Outline of a Bug Report

+ +
+

Most of the following article has been merged into this page from QMO: How to write a proper bug

+
+ + + +

 

+ +
+

Original document information

+ + +
diff --git a/files/it/mozilla/qa/index.html b/files/it/mozilla/qa/index.html new file mode 100644 index 0000000000..99a8a38dd2 --- /dev/null +++ b/files/it/mozilla/qa/index.html @@ -0,0 +1,251 @@ +--- +title: 'QA: Quality assurance at Mozilla' +slug: Mozilla/QA +tags: + - Landing + - NeedsTranslation + - QA + - Testing + - TopicStub +translation_of: Mozilla/QA +--- +

The Mozilla Quality Assurance (QA) team drives software quality assurance activities across Mozilla and plays a key role in releasing a diverse range of software products on schedule. Within each project in Mozilla, we work to explore new features, write and execute tests, uncover and file bugs, build and maintain tools, collect and analyze metrics, and support the release world-class products that promote the open Web.

+ +

Here you'll find articles and tools to help you gear up to join the QA team testing Firefox to ensure that each release is as good as it can be.

+ +

Get started

+ + + +

Bugs

+ +
+
+

Reporting bugs

+ +
+
Bugzilla
+
All Mozilla projects use Bugzilla to track bugs. You will need to create an account with Bugzilla in order to report bugs and triage them.
+
Bug writing guidelines
+
The more effectively a bug is reported, the more likely that an engineer will actually fix it. By following these guidelines, you can help ensure that your bugs stay at the top of the Mozilla engineers' heap, and get fixed.
+
A Bug's Life
+
This tutorial will give an overview of what happens in the states that a bug will go through as well as how it will go from one to the next within its total life. It also explains the meaning of flags/keywords used in QA.
+
Filing Crash Bugs
+
This document lists guidelines and tips on how to file bug reports for crashes in a way that helps in debugging and fixing the reported issue.
+
+
+ +
+

Triaging bugs

+ +
+
Confirming unconfirmed bugs
+
Identify useful bug reports and close the rest.
+
Triaging Bugs for Firefox
+
Information about the entire bug triaging process – from processing incoming bugs to narrowing down the steps to reproducing bugs.
+
Screening duplicate bugs
+
Help get bugs fixed faster by screening incoming reports for duplicates.
+
General Guidelines
+
What to do and what not to do in Bugzilla.
+
+
+
+ +
+

Manual testing

+ +
+
+
+
Manual Test Case Writing Primer
+
How to write proper manual test cases
+
+
+ +
+
+
TestRail
+
Mozilla QA's manual test cases reside in TestRail. You will need an LDAP account in order to login and execute test cases. Learn more on the TestRail wiki page.
+
+
+
+ +
+

Automated testing

+ +
+
+
+
Automated testing at Mozilla
+
Documentation about creating and using automated tests for Mozilla code.
+
Running automated tests
+
+

This page lists the steps required to run Mozilla's automated test suites.

+
+
Developing tests
+
Ensure that future changes to Mozilla don't break things that currently work correctly.
+
Avoiding intermittent test failures
+
Suggestions for ways to make your tests more reliable, thereby helping to avoid random, intermittent test failures.
+
Test Verification
+
When a changeset adds a new test, or modifies an existing test, the test verification (TV) test suite performs additional testing to help find intermittent failures in the modified test as quickly as possible.
+
Mozharness FAQ
+
Answers to common questions about Mozharness.
+
+
+ +
+
+
Robocop
+
Robocop is the automated testing system used for Firefox for Android. Learn its code style guidelines
+
Marionette
+
Get started with Marionette UI testing.
+
web-platform-tests
+
Learn how to use the industry standard, cross-browser, cross-platform Web runtime testing system from the W3C used by Mozilla and others to ensure browser interoperability.
+
External Media Tests
+
Get started testing HTML5-based video elements using VideoPuppeteer, a Marionette- -based test suite used to test sites like YouTube and Netflix.
+
Chrome tests
+
A chrome test is basically a Mochitest running with chrome privileges.
+
+
+
+ +
+

Firefox QE

+ +
+
+
+
Triaging Bugs for Firefox
+
Information about the entire bug triaging process – from processing incoming bugs to narrowing down the steps to reproduce a bug.
+
+ +
+
Tips and Tricks
+
These tips and tricks will make your life easier when you are testing.
+
+Downloading Nightly or Trunk Builds + +
+
Every 24 hours, a "nightly" build is created that testers all over the world download and test, reporting as they go along on any bugs that hit them.
+
+
+ +
+
+
Command Line Options
+
Command line options are used to specify various startup options for Firefox.
+
Reporting a Performance Problem
+
This article will guide you in reporting a performance problem using the Gecko Profiler extension.
+
Crash reporting
+
Firefox ships with an open-source crash reporting system.
+
+
+
+ +
+

Firefox for Android

+ +
+
+
+
Mobile Firefox
+
Firefox for Android is the mobile version of Firefox with a native Android look and feel.
+
Compatibility Testing
+
Help us identify websites that do not work well in Firefox by reporting the specific issues that you find in your investigation.
+
+
+ +
+
+
Logging with the Android Debug Bridge and Logcat
+
This article will provide a walkthrough in downloading and setting up an environment to which one can gain access to and view Android system logs.
+
Enabling the Error Console
+
See the Mozilla Hacks article on Remote Debugging on Firefox for Android for web content. If you need to debug the Firefox browser itself use Android's adb logcat.
+
+
+
+ +
+

Firefox OS

+ +
+
+

Manual testing

+ +
+
Simulator vs Emulator vs Device
+
These are three basic options when it comes to getting a Firefox OS environment in order to work on, or developing for, Firefox OS.
+
Debugging
+
Discover the different tools at your disposal to debug your Firefox OS code.
+
Reporting Bugs
+
This article provides a guide to filing bugs against the Firefox OS project, including Gaia and B2G.
+
+
+ +
+

Platform (Gecko)

+ +
+
Automated Testing
+
Learn various aspects of testing Firefox OS, including running different tests, automation, and result reporting and tracking.
+
Gaia Performance Tests
+
This article provides information about running performance tests on Gaia, as well as how to create new tests.
+
Feature Support Chart
+
There are several different builds of Firefox OS you can download or build for yourself, and there are some differences between the types of features available on each device.
+
+
+
+ +
+

Web QA

+ +
+
+
+
Reducing testcases
+
Improve bug reports by turning broken web pages into simple testcases, which can help developers understand the bug and can also be used for creating automated tests.
+
Managing XFails
+
One of the ongoing tasks of the Web QA department is managing xfails. This document will explain what xfails are, and describe the steps one can take to investigate and update them.
+
+
+ +
+
+
Running Automated Tests
+
So you’re interested in contributing to Mozilla Web QA automation projects but don’t know where to start? This doc will help you get up and running a set of tests locally.
+
+
+
+ +
+

Glossary

+ +
+
+
Smoke Test
+
+
+
+ +

See also

+ + diff --git a/files/it/mozilla/tech/index.html b/files/it/mozilla/tech/index.html new file mode 100644 index 0000000000..f9682e62e1 --- /dev/null +++ b/files/it/mozilla/tech/index.html @@ -0,0 +1,14 @@ +--- +title: Mozilla technologies +slug: Mozilla/Tech +tags: + - Landing + - Mozilla + - NeedsTranslation + - Reference + - TopicStub + - XUL +translation_of: Mozilla/Tech +--- +

Mozilla has several technologies used as components of its projects. These are documented here. (flesh out this text).

+

{{LandingPageListSubpages}}

diff --git a/files/it/nspr/index.html b/files/it/nspr/index.html new file mode 100644 index 0000000000..4f3290d763 --- /dev/null +++ b/files/it/nspr/index.html @@ -0,0 +1,16 @@ +--- +title: NSPR +slug: NSPR +tags: + - NSPR +translation_of: Mozilla/Projects/NSPR +--- +

+

Netscape Portable Runtime (NSPR) fornisce una API multipiattaforma per funzioni di sistema e funzioni libc. La API viene usata nei client Mozilla, molte delle applicazioni server Red Hat e Sun, e da altri produttori software. +

+

Riferimenti

+ +{{ languages( { "ja": "ja/NSPR", "en": "en/NSPR" } ) }} diff --git a/files/it/nuove_tabelle_di_compatibilita_in_beta/index.html b/files/it/nuove_tabelle_di_compatibilita_in_beta/index.html new file mode 100644 index 0000000000..5ee004d6c9 --- /dev/null +++ b/files/it/nuove_tabelle_di_compatibilita_in_beta/index.html @@ -0,0 +1,26 @@ +--- +title: Nuove tabelle di compatibilità in beta +slug: Nuove_tabelle_di_compatibilita_in_beta +translation_of: Archive/MDN/New_Compatibility_Tables_Beta +--- +

Ti trovi qui probabilmente perché hai seguito il link di informativa della beta da una delle nostre nuove tabelle di compatibilità. (Non è così? Vuoi provare le nuove tabelle? Diventa anche tu un beta tester.)

+ +

Grazie per aiutarci a testarle. Sono parte di un progetto ancora più grande. Stiamo migrando tutti i nostri dati di compatibilità browser in formato JSON strutturato.

+ +

Le nuove tabelle apparirano nelle pagine non appena i dati sono stati convertiti al nuovo formato.

+ +

Contribuire

+ +

I dati di compatibilità sono stati migrati in file JSON nel repository browser-compat-data su GitHub.

+ +

Per contribuire dati di compatibilità puoi ora proporre una pull request o aprire una issue nel repository.

+ +

Come aiutare

+ +

Se trovi un problema nei dati per cortesia apri una issue nel repository GitHub.

+ +

Se qualcosa è andato storto nell’aspetto o nella funzionalità della tabella stessa, per cortesia fai click sul bottone con la dicitura “Segnala un errore” (o “Report an error” in inglese) dal menu a tendina sopra alla tabella.

+ +

Se hai un momento, apprezzeremmo se tu potessi prendere parte al nostro questionario.

+ +
{{MDNSidebar}}{{IncludeSubnav("/it-IT/docs/MDN")}}
diff --git a/files/it/plug-in/index.html b/files/it/plug-in/index.html new file mode 100644 index 0000000000..b6c23742d2 --- /dev/null +++ b/files/it/plug-in/index.html @@ -0,0 +1,63 @@ +--- +title: Plug-in +slug: Plug-in +tags: + - Add-ons + - Plugins + - Tutte_le_categorie +translation_of: Web/API/Plugin +--- +

 

+
+

I Plugins (o plug-ins) sono piccoli software che interagiscono con il browser al fine di fornire alcune funzioni specifiche. Classici esempi di plugin sono quelli che consentono di visualizzare formati grafici specifici, o di eseguire file multimediali. I plugin sono leggermente diversi dalle estensioni, che modificano o aggiungono funzionalità già presenti.

+
+ + + + + + + +
+

Documentazione

+
+
+ Gecko Plugin API Reference
+
+ Questo manuale di riferimento descrive le interfacce impiegabili dal programmatore nella realizzazione di plugin per Gecko, e fornisce indicazioni su come usare tali interfacce.
+
+
+
+ Using XPInstall to Install Plugins
+
+ XPInstall è una tecnologia che consente una interazione utente molto semplice qualora sia necessario aggiungere nuovi plugin, senza dover costringere l'utente ad uscire dal proprio ambiente di navigazione per eseguire un programma esterno di installazione.
+
+
+
+ Detecting Plugins (en)
+
+ "Dato che ci sono delle ovvie situazioni in cui ha un senso usare un plug-in, la domanda che sorge è come interagire con coloro che non hanno già installato il plug-in necessario"
+
+
+
+ Scripting Plugins: Macromedia Flash
+
+ Questo articolo spiega come è possibile usare JavaScript per accedere a metodi disponibili in un plugin Flash, ed anche come impiegare la funzionalità chiamata FSCommands per accedere a funzioni JavaScript dall'interno di animazioni Flash.
+
+

Mostra tutto...

+ 		+

Community

+
    +
  • View Mozilla forums...
    • +
+

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

+ +
+
+ Gecko
+
+
+

Categories

+

Interwiki Language Links

+

 

+

{{ languages( { "en": "en/Plugins", "es": "es/Plugins", "fr": "fr/Plugins", "ja": "ja/Plugins", "pl": "pl/Wtyczki" } ) }}

diff --git a/files/it/python/index.html b/files/it/python/index.html new file mode 100644 index 0000000000..11edf5cb11 --- /dev/null +++ b/files/it/python/index.html @@ -0,0 +1,105 @@ +--- +title: Python +slug: Python +translation_of: Learn/Server-side/Django +--- +

Python è un linguaggio di programmazione interpretato disponibile su una vasta varietà di piattaforme, inclusi Linux, MacOS X e Microsoft Windows.

+ +

Imparare Python

+ +

Libri digitali (gratuiti)

+ +

Dive Into Python è considerata una delle migliori introduzioni a Python disponibili, anche se è aggiornato al 2004. Ciò nonostante, fornisce una buona trattazione delle basi del linguaggio e dei compiti più comuni per cui è usato il linguaggio come le richieste web o le operazioni sui file. Per gli argomenti più complessi, Text Processing In Python è un eccellente tutorial (o reference).

+ +

Ci sono poi altri tutorial e risorse gratuite, disponibili:

+ + + +

Una volta acquisite le basi, si può passare a Code Like a Pythonista: Idiomatic Python per approfondire alcuni aspetti di Python che lo rendono diverso dagli altri linguaggi .

+ +

Corsi Online (gratuiti)

+ + + +

Python nelle applicazioni Mozilla

+ +

XPCOM di per sè supporta solamente la comunicazione tra C++ e JavaScript. Il modulo Python XPCOM (chiamato anche PyXPCOM) è uno strato di basso-livello che mette insieme Python e Mozilla, permettendo ai componenti XPCOM scritti in C++ o JavaScript di comunicare con Python, o viceversa. PyXPCOM non è incluso di default in Firefox, quindi si dovrebbe usare una versione di terze-parti che include il modulo. Un esempio di utilizzatori di PyXPCOM sono la famiglia di prodotti Komodo.

+ +

A partire da Mozilla 1.9, è stato implementato Python DOM (PyDOM). Ciò permette agli sviluppatori di usare Python col tag <script> (ovviamente non nella release default di Firefox o Thunderbird).

+ +

Strumenti scritti in Python

+ +

Python usato in Mozilla per gli strumenti che si occupano di svolgere diverse operazioni sulle applicazioni e le infrastrutture. Sarebbe utile leggere Python Environment and Tools for Mozilla.

+ +

Gli strumenti scritti in Python sono listati qui: http://k0s.org/toolbox/?language=python

+ +

L'uso di Python in Mozilla

+ +

Mozilla ha diverse infrastrutture basate su Python:

+ + + +

Python in Mozilla-Central

+ +

[Nota: guarda https://bugzilla.mozilla.org/show_bug.cgi?id=835553]

+ +

Molti dei sistemi di sviluppo, di testing, altri strumenti ed infrastrutture in mozilla-central sono scritte in Python.

+ + + +

Nota: un virtualenv è stato attivato nella  objdir  ($OBJDIR/_virtualenv) . Per aggiungere moduli a virtualenv, edita build/virtualenv_packages.txt . Questi sono installati via build/virtualenv/populate_virtualenv.py .

+ +

Pacchetti Python

+ +

Python usa il file setup.py per l'installazione di moduli Python. Digitando python setup.py install installerai il modulo, ciò ti permetterà di usare il modulo stesso perchè aggiunto nel percorso PATH di Python. Per Python 2.x esistono molti moduli disponibili. distutils è l'unico gestore di moduli presente nella libreria standard. distutils puo caricare moduli su PyPI ed installarli. Per maggiori dettagli, puoi consultare la documentazione ufficiale di Python.

+ +

A differenza di distutils che fa parte della libreria standard, setuptools è un modulo di terze parti. È certamente compatibile con distutils, ma la cosa importante è che include le dependenze necessarie all'installazione dei vari moduli come pre-requisito quando si invoca setup.py così come la possibilità di installare i moduli in modalità sviluppo. Questo permette di editare i file tramite file .pth che risultano maneggievoli. setuptools fornisce anche easy_install che permette di installare moduli (e relative dipendenze) da PyPI. Per esempio, se volessimo installare PyYAML, basterebbe digitare:

+ +
easy_install PyYAML
+
+ +

Dal momento che setuptools non è presente di default in Python, avrai sicuramente bisogno di installarlo per usarlo. Puoi installare setuptools da PyPI scaricando il pacchetto, estraendolo, e digitando python setup.py install a linea-di-comando, oppure usare ez_setup.py. Puoi scaricarlo ed avviarlo con Python (sono richiesti privilegi di root), oppure in una sezione bash.

+ +
sudo python <(curl http://peak.telecommunity.com/dist/ez_setup.py)
+
+ +

setuptools potrebbe essere già presente in virtualenv, quindi potresti non avere bisogno di installare (manualmente) setuptools se usi virtualenv. C'è poi distribute, un fork di setuptools scritto dal nostro amico Tarek Ziade. È compatibile con setuptools.

+ +
Note: È altamente consigliato usare virtualenv durante la fase di sviluppo.
+ +

Python Package Index (PyPI) è il punto di raccolta centrale per i moduli Python di terze-parti. Se hai bisogno di funzionalità extra in Python, dacci un'occhiata!

+ +

Guarda anche: http://k0s.org/portfolio/packaging.html

+ +

Vedi anche:

+ + diff --git a/files/it/rdf/index.html b/files/it/rdf/index.html new file mode 100644 index 0000000000..bbf3afa1a5 --- /dev/null +++ b/files/it/rdf/index.html @@ -0,0 +1,53 @@ +--- +title: RDF +slug: RDF +tags: + - RDF + - Tutte_le_categorie +translation_of: Archive/Web/RDF +--- +

+


+Resource Description Framework (RDF) è una famiglia di specifiche per un modello di metadati generalmente implementati come applicazioni XML. E' mantenuto dal World Wide Web Consortium (W3C). +

Il modello di metadati RDF si basa sull'idea di scrivere delle frasi sulle risorse nella forma "soggetto-predicato-oggetto", che nella terminologia specifica si definisce triple (tripletta). Il soggetto è la risorsa, cioè ciò che viene descritto. Il predicato è un aspetto di quella risorse, spesso esprime una relazione fra il soggetto e l'oggetto. Quest'ultimo è l'oggetto della relazione. +

+ + +
+

Documentazione

+
Presentazioni all'XTech 2005: Direzioni del motore RDF di Mozilla +
Questa presentazione mostra i nuovi sviluppi del motore RDF di Mozilla. Ciò comprende i piani per esporre l'API RDF al contenuto web, oltre ai miglioramenti di performance e alla maggiore aderenza agli standard. +
+
What is RDF (EN) +
Un'introduzione di Tim Braya a RDF, su XML.com. +
+
RDF in Mozilla FAQ +
Domande frequenti sull'RDF in Mozilla. +
+
RDF in cinquanta parole o meno +
Una rapida introduzione al Resource Description Framework. +
+
RDF Datasource How-To +
Un documento stile libro di ricette, che descrive come creare una fonte dati nativa lato client che funzioni con l'implementazione RDF di Mozilla. +
+
Aggregare fonti dati in-memory +
Usare le aggregazioni XPCOM con le fonti dati in-memory. +
+		 +

Community

+
  • Vedi i forum Mozilla... +
+

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

+ +

Strumenti

+ +

Argomenti correlati

+ +
+

Interwiki Language Links +

{{ languages( { "en": "en/RDF", "fr": "fr/RDF", "ja": "ja/RDF", "pl": "pl/RDF", "pt": "pt/RDF" } ) }} diff --git a/files/it/rhino/index.html b/files/it/rhino/index.html new file mode 100644 index 0000000000..d2a5c03fcb --- /dev/null +++ b/files/it/rhino/index.html @@ -0,0 +1,17 @@ +--- +title: Rhino +slug: Rhino +tags: + - JavaScript + - Rhino +translation_of: Mozilla/Projects/Rhino +--- +

Image:rhino.jpg

+

Rhino è un'implementazione open-source di JavaScript scritta interamente in Java. Solitamente è incorporato nelle applicazioni Java per fornire lo scripting agli utenti finali. È stato inserito nel J2SE 6 come motore predefinito di scripting.

+

Scaricare Rhino

+

Come ottentere i sorgenti e i binari. 

+

Documentazione su Rhino

+

Informazioni su Rhino.

+

Aiuto su Rhino

+

Alcune risorse se rimani bloccato.

+

{{ languages( { "ja": "ja/Rhino" } ) }}

diff --git a/files/it/rhino/scarica_rhino/index.html b/files/it/rhino/scarica_rhino/index.html new file mode 100644 index 0000000000..06ceceeb70 --- /dev/null +++ b/files/it/rhino/scarica_rhino/index.html @@ -0,0 +1,108 @@ +--- +title: Scarica Rhino +slug: Rhino/Scarica_Rhino +tags: + - Rhino +translation_of: Mozilla/Projects/Rhino/Download_Rhino +--- +

È possibile scaricare sia i sorgenti che la versione compilata di Rhino.

+ +

Binari

+ +

Rhino 1.7R4 è l'ultima release.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ReleaseData rilascioChange logDownload link
Rhino 1.7R42012-06-18New in Rhino 1.7R4rhino1_7R3.zip
Rhino 1.7R52015-01-29Note di rilasciorhino1_7R5.zip
Rhino 1.7.62015-04-15Note di rilasciorhino1.7.6.zip
Rhino 1.7.72015-06-17Note di rilasciorhino1.7.7.zip
Rhino 1.7.7.12016-02-01Note di rilasciorhino1.7.7.1.zip
Rhino 1.7.7.22017-08-24Note di rilasciorhino1.7.7.2.zip
Rhino 1.7.82018-01-22Note di rilasciorhino1.7.8.zip
Rhino 1.7.92018-03-15Note di rilasciorhino1.7.9.zip
Rhino 1.7.102018-04-09Note di rilasciorhino1.7.10.zip
Rhino 1.7.112019-05-30Note di rilasciorhino1.7.11.zip
Rhino 1.7.122020-01-13Note di rilasciorhino1.7.12.zip
+ +

Per scaricare le versioni precedenti, controlla l'archivio.

+ +

Licenza

+ +

Rhino è open source. Dalla versione 1.7R4 Rhino è disponibile sotto la licenza MPL 2.0.

+ +

Le versioni precedenti erano rilasciate sotto licenza MPL 1.1/GPL 2.0.

+ +

Per maggiori informazioni controlla la licenza di Rhino.

+ +

Sorgenti

+ +

I sorgenti di Rhino sono inoltre disponibili su github all'indirizzo https://github.com/mozilla/rhino. Per ottenere i sorgenti usa il comando:

+ +
git clone https://github.com/mozilla/rhino.git
+
+ +

Rhino utilizza Ant come build system.

diff --git a/files/it/spidermonkey/index.html b/files/it/spidermonkey/index.html new file mode 100644 index 0000000000..5f22fc2353 --- /dev/null +++ b/files/it/spidermonkey/index.html @@ -0,0 +1,50 @@ +--- +title: SpiderMonkey +slug: SpiderMonkey +translation_of: Mozilla/Projects/SpiderMonkey +--- +

SpiderMonkey è il motore JavaScript di Gecko, scritto in C. Viene utilizzato in vari programmi Mozilla ed è disponibile sotto tre licenze: MPL/GPL/LGPL.

+ + + + + + + + +
+

Documentazione

+ +
+
JSAPI Reference
+
La reference per l'API di SpiderMonkey.
+
+ +
+
Guida per l'embedding del motore C di JavaScript
+
Questa guida fornisce una panoramica di SpiderMonkey e descrive come incorporare le chiamate al motore in altre applicazione per fare in modo che supportino JavaScript.
+
+ +
+
How to embed the JavaScript engine (EN)
+
Un asciutto tutorial su come incorporare SpiderMonkey.
+
+ +
+
SpiderMonkey Garbage Collection Tips (EN)
+
Suggerimenti per evitare problemi con il garbage collector.
+
+ +
+
Introduction to the JavaScript shell (EN)
+
Come ottenere, compilare e utilizzare la shell JavaScript.
+
+ 		+

Argomenti correlati

+ +
+
JavaScript
+
+
+ +

Interwiki Language Links

diff --git a/files/it/stringhe_user_agent_di_gecko/index.html b/files/it/stringhe_user_agent_di_gecko/index.html new file mode 100644 index 0000000000..d95ef4bd45 --- /dev/null +++ b/files/it/stringhe_user_agent_di_gecko/index.html @@ -0,0 +1,52 @@ +--- +title: Stringhe User Agent di Gecko +slug: Stringhe_User_Agent_di_Gecko +tags: + - Sviluppo_Cross-browser + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Web/HTTP/Headers/User-Agent/Firefox +--- +

Lista di user agent rilasciati da Netscape e AOL basati su Gecko™.

+ +

Uso appropriato

+ +

Non raccomandiamo di usare le stringhe User Agent come strumento principale per il riconoscimento del browser. Vedere Riconoscimento di Browser supporto cross-browser per una panoramica più dettagliata dui varia approcci per il riconoscimento di browser con raccomandazioni.

+ +

In particolare, raccomandiamo il riconoscimento di browser mediante stringa User Agent solo per il lato server. Se il vostro codice lato client di riconoscimento ne fa utilizzo, è sufficente cercare la stringa "Gecko" nella stringa per rilevare browser basati su Gecko.

+ +

Per tutti i problemi di identificazione di Gecko che hanno a che fare con specifici bug o che richiedono la conoscenza di stringhe vendor o di date di build, usare l'oggetto navigator.

+ +

Listadi riferimento delle stringhe User Agent di Netscape Gecko

+ +

Consultare la lista di riferimento di mozilla.org per i valori specifici diPiattaforma,Sicurezza,OS-o-CPU eLocalizzazione.

+ + + +

Per informazioni dettagliate sulle release Netscape e Mozilla, consultare mozilla.org cvstags reference.

+ +
+

Original Document Information

+ + +
diff --git a/files/it/strumenti_di_sviluppo_aderenti_agli_standard/index.html b/files/it/strumenti_di_sviluppo_aderenti_agli_standard/index.html new file mode 100644 index 0000000000..50513b4650 --- /dev/null +++ b/files/it/strumenti_di_sviluppo_aderenti_agli_standard/index.html @@ -0,0 +1,37 @@ +--- +title: Strumenti di sviluppo aderenti agli standard +slug: Strumenti_di_sviluppo_aderenti_agli_standard +tags: + - 'CSS:Strumenti' + - HTML + - 'HTML:Strumenti' + - Strumenti + - Tutte_le_categorie + - XHTML + - 'XHTML:Strumenti' +translation_of: Archive/Web/Standards-Compliant_Authoring_Tools +--- +

Creare codice che funzioni su tutti i browser è utile per ridurre il tempo necessario al test di qualità dei propri contenuti web. I seguenti strumenti di sviluppo aderiscono agli standard del W3C. Se si sta utilizzando versioni più vecchie di questi strumenti che fanno affidamento sui bug dei vecchi browser o che generano codice specifico per un dato browser, forse è ora di aggiornarli:

+ +

Aggiornamenti alle versioni più vecchie per l'aderenza agli standard:

+ +

Sembra che gli strumenti attualmente disponibili da Namo generino codice specifico per IE o Netscape 4, il che potrebbe richiedere un ulteriore debug per verificare la compatibilità con i browser basati sugli standard. Le versioni più recenti di Microsoft FrontPage sono state migliorate, ma si consiglia di non affidarsi ad esse per le funzionalità o i contenuti critici dei siti web. Alcune versioni di Microsoft Word creano codice HTML non valido che funziona esclusivamente con Internet Explorer. Assicurarsi sempre di validare le proprie pagine.

+

Vedi anche

+ +

 

diff --git a/files/it/svg/index.html b/files/it/svg/index.html new file mode 100644 index 0000000000..4fcdc7a78d --- /dev/null +++ b/files/it/svg/index.html @@ -0,0 +1,102 @@ +--- +title: SVG +slug: SVG +tags: + - SVG + - Tutte_le_categorie +translation_of: Web/SVG +--- +
Iniziare ad usare SVG
+Questa esercitazione ti aiuterà ad iniziare ad usare SVG.
+ +
Scalable Vector Graphics (SVG) è un linguaggio XML di markup per la descrizione di grafica vettoriale a due dimensioni. Essenzialmente SVG sta alla grafica come XHTML sta al testo. + +

SVG è simile negli scopi alla tecnologia proprietaria Macromedia Flash di Adobe, ma quello che distingue SVG da Flash l'essere una raccomandazione W3C (vale a dire, uno standard a tutti gli effetti) e che è basato su XML anzichè essere un formato binario proprietario. E' esplicitamente progettato per lavorare con altri standard W3C quali CSS, DOM e SMIL.

+ +
+
+

Documentazione

+ +
+
Riferimento degli elementi SVG
+
Ottieni i dettagli di ogni elemento SVG.
+
Riferimento degli attributi SVG
+
Ottieni i dettagli di ogni attributo SVG.
+
Riferimento alle API nel DOM di SVG
+
Ottieni i dettagli sull'intra API nel DOM di SVG.
+
Migliora il contenuto HTML
+
SVG opera insieme ad HTML, CSS e JavaScript. Utilizza SVG per una comune pagna HTML o un'apllicazione web.
+
SVG in Mozilla
+
Note e informazioni su come SVG è implementato in Mozilla. + +
+
+ +

Vedi Tutto...

+ +

Comunità

+ +
    +
  • Vedi i forum di Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}
    • +
+ +

Strumenti

+ + +
+ +
+ + + + +

Animazione e interazione

+ +

Come HTML, SVG ha un modello di documento a oggetti (DOM) ed events accessibili via JavaScript. Ciò permette agli sviluppatori di creare ricche immagini animate ed interattive.

+ + + +

Mappe, grafici, giochi ed sperimentazioni  3D

+ +

Se un piccolo SVG può fare tanta strada per migliorare il contenuto del web, ecco qualche esempio di uso intensivo di SVG.

+ + +
+
+ +
{{HTML5ArticleTOC}}SMIL.
+
+ +

diff --git a/files/it/sviluppare_mozilla/index.html b/files/it/sviluppare_mozilla/index.html new file mode 100644 index 0000000000..ddde4904ef --- /dev/null +++ b/files/it/sviluppare_mozilla/index.html @@ -0,0 +1,75 @@ +--- +title: Sviluppare Mozilla +slug: Sviluppare_Mozilla +translation_of: Archive/Mozilla/Developing_New_Mozilla_Features +--- +

 

+

Vuoi contribuire a risolvere qualche bug e non sai da dove cominciare? Questo e' il punto di partenza per tutto cio' che riguarda l'hacking. Scoprirai come trovare il codice, svilupparlo, creare patch, e tutto l'essenziale che ogni hacker Mozilla dovrebbe conoscere.

+ + + + + + + +
+

Documentazione

+
+
+ Documentazione Hacking su mozilla.org
+
+ Un'altra pagina web con documentazione relativa all'hacking.
+
+
+
+ Hacking Firefox
+
+ fatti coinvolgere nello sviluppo.
+
+
+
+ Documentazione per lo sviluppo
+
+ Questa sezione contiene la documentazione del sistema di sviluppo di Mozilla. Tra le altre cose, imparerai dove trovare il codice sorgente e come svilupparlo.
+
+
+
+ Debugging FAQs
+
+ Consigli sul debugging, sono le specifiche della piattaforma. Puoi scegliere tra: Windows, Linux, oppure Mac OS X.
+
+
+
+ Creare patch
+
+ Consigli su come creare patch per ottenere cambiamenti nel modello.
+
+

Mostra tutti...

+ 		+

Community

+
    +
  • Mostra i forum su Mozilla...
    • +
+

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

+ +

Strumenti

+ +

Vedi Tutti...

+

Argomenti Corelati

+
+
+ Controllo di Qualità
+
+
+

Categorie *

+

Interwiki Language Links

+

 

+

{{ languages( { "fr": "fr/D\u00e9veloppement_de_Mozilla", "ja": "ja/Developing_Mozilla", "zh-cn": "cn/\u5f00\u53d1Mozilla", "pl": "pl/Programowanie_Mozilli" } ) }}

diff --git a/files/it/sviluppo_web/index.html b/files/it/sviluppo_web/index.html new file mode 100644 index 0000000000..ecdd032677 --- /dev/null +++ b/files/it/sviluppo_web/index.html @@ -0,0 +1,51 @@ +--- +title: Sviluppo Web +slug: Sviluppo_Web +tags: + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Web/Guide +--- +

+

+
Lo sviluppo Web comprende tutti gli aspetti di sviluppo di un sito web o di una applicazione web.
+ + +
+

Documentazione

+
Migrare applicazioni da Internet Explorer a Mozilla +
Doron Rosenberg vi dice come assicurarvi che le vostre applicazioni web sia con IE che con Mozilla. +
+
Usare valori URL per la proprietà cursor +
Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) supportano l'uso di valori URL per la proprietà cursor CSS2 , che permette di specificare immagini arbitrarie da usare come puntatori del mouse. +
+
Usare il caching di Firefox 1.5 +
Firefox 1.5 memorizza intere pagine web, incluso il loro stato JavaScript, in memoria. La navigazione in avanti ed indietro tra le pagine visitate non richiede caricamento di pagina e lo stato del JavaScript è preservato. Questa carateristica permette una navigazione delle pagine molto veloce. +
+

Vedi tutti... +

+		 +

Community

+
  • Visita i forum Mozilla... +
+

{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }} +

+ +

Strumenti

+ +

Vedi tutti... +

+

Argomenti correlati

+
AJAX, CSS, HTML, JavaScript, Standard Web, XHTML, XML +
+
+

Categories +

Interwiki Language Links +


+

{{ languages( { "en": "en/Web_Development", "de": "de/Webentwicklung", "es": "es/Desarrollo_Web", "fr": "fr/D\u00e9veloppement_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW" } ) }} diff --git a/files/it/temi/background/index.html b/files/it/temi/background/index.html new file mode 100644 index 0000000000..0e52fbc07e --- /dev/null +++ b/files/it/temi/background/index.html @@ -0,0 +1,100 @@ +--- +title: Background Themes +slug: Temi/Background +tags: + - Documentazione +translation_of: Mozilla/Add-ons/Themes/Lightweight_themes +--- +

Come creare il vostro Tema di sfondo

+ +
+

I temi sono costituiti da un file grafico(immagine) "intestazione", che ricopre lo sfondo dell'interfaccia utente (UI) Firefox.

+ +

Hai finito il tuo disegno? Puoi inviarlo immediatamente!

+ +

Creare un'immagine Intestazione per il Tema

+ +

L'immagine di intestazione viene visualizzata come sfondo della parte alta della finestra del browser e si innesta dietro le barre degli strumenti, la barra degli indirizzi, la barra di ricerca e la barra delle schede. Verrà ancorata nell'angolo in alto a destra della finestra del browser.

+ +

+ + + +

Requisiti per l'immagine

+ + + +

Suggerimenti

+ + + +

Elaborazione di Immagini Online

+ + + +

Creare un'immagine Piè di pagina per il Tema

+ +

Nelle versioni più vecchie di Firefox, o nelle versioni più recenti con determinati add-ons installati, l'immagine piè di pagina si vede come sfondo della parte bassa della finestra del browser, dietro le barre degli add-on e di ricerca. Verrà ancorata nell'angolo in basso a sinistra della finestra del browser. Le immagini piè di pagina sono opzionali.

+ +

+ + + +

Requisiti per l'immagine

+ + + +

Suggerimenti

+ + + +

Presentazione dei tuoi temi personalizzati

+ +

Per iniziare a presentare le tue immagini, vai alla pagina di Presentazione Temi:

+ +
    +
  1. Dai un nome al tuo tema — assegna un nome unico per il tuo tema. Nomi duplicati non sono ammessi, pertanto potresti aver bisogno di tentare alcune volta prima di trovarne uno.
    2. +
  2. Assegna una categoria e parole-chiave — seleziona una categoria e inserisci alcune parole-chiave che meglio descrivano il tuo tema. Tieni in mente che un revisore potrebbe rifiutare il tuo tema se risultasse che categoria e/o parole chiave non c'entrano molto con il tuo tema.
    3. +
  3. Descrivi il tuo tema — scrivi una breve descrizione del tuo tema. Tieni in mente che un revisore potrebbe rifiutare il tuo tema se risultasse che la tua descrizione non rappresenta accuratamente il tuo tema.
    4. +
  4. Sciegli un tipo di licenza per il tuo tema — decidi il tipo di licenza copyright per la tua creazione. Approfondisci il tema del tipo licenze Creative Common. +
      +
    • Importante: Assicurati di avere il diritto di utilizzare l'immagine nel tuo tema!
      • +
    +
    5. +
  5. Carica le tue immagini — assicurati che siano in formato JPG or PNG e che non eccedano i 300 KB!
    6. +
  6. Scegli i colori di testo e schede — puoi scegliere il colore di scheda("sfondo") e di testo in primo piano che meglio si adatta alla tua immagine di intestazione.
    7. +
  7. Anteprima del tuo tema — sei pronto per un'anteprima del tuo tema! Semplicemente passa il mouse sull'immagine sopra il pulsante "Inoltra il tema" e vedi all'istante come appare.
    8. +
  8. Inoltra il tuo tema — se ti sembra tutto a posto, premi il bottone "Inoltra il tema" e hai finito! Puoi vedere tutti i temi pubblicati da te sulla pagina del tuo profilo. +
      +
    • Suggerimento: per assicurarti che il tuo tema venga approvato, controlla bene che sia risppondente con le linee guida dei contenuti e con i termini di servizio!
      • +
    +
    9. +
+ +

+ +

Submit Your Theme Now

+
diff --git a/files/it/temi/index.html b/files/it/temi/index.html new file mode 100644 index 0000000000..c6bdeb3894 --- /dev/null +++ b/files/it/temi/index.html @@ -0,0 +1,8 @@ +--- +title: Temi +slug: Temi +translation_of: Mozilla/Add-ons/Themes +--- +

I Temi sono delle Skin (pelli) per le differenti applicazioni di Mozilla. Permettono di cambiare l'aspetto dell'interfaccia utente rendendola personale al vostro gusto. Un Tema può cambiare semplicemente i colori dell'interfaccia utente o cambiarne l'intero aspetto.

+

Documentazione

+

Creare Skin per Firefox

diff --git a/files/it/toolkit_api/index.html b/files/it/toolkit_api/index.html new file mode 100644 index 0000000000..701e5db3fb --- /dev/null +++ b/files/it/toolkit_api/index.html @@ -0,0 +1,32 @@ +--- +title: Toolkit API +slug: Toolkit_API +translation_of: Mozilla/Tech/Toolkit_API +--- +

+

Il Mozilla Toolkit è un insieme di interfacce di programmazione (API), costruite su Gecko, che forniscono servizi avanzati per le applicazioni XUL. Qualche esempio: +

+ +

Guide di riferimento ufficiali

+

....in costruzione +

+

Ulteriori informazioni

+

Le pagine seguenti contengono esempi e spiegazioni riguardo agli argomenti specifici: +

+ +{{ languages( { "en": "en/Toolkit_API", "fr": "fr/API_du_toolkit", "pl": "pl/Toolkit_API" } ) }} diff --git a/files/it/tools/add-ons/index.html b/files/it/tools/add-ons/index.html new file mode 100644 index 0000000000..53b7924169 --- /dev/null +++ b/files/it/tools/add-ons/index.html @@ -0,0 +1,17 @@ +--- +title: Add-ons +slug: Tools/Add-ons +tags: + - NeedsTranslation + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Add-ons +--- +

Developer tools that are not built into Firefox, but ship as separate add-ons.

+ +
+
WebSocket Monitor
+
Examine the data exchanged in a WebSocket connection.
+
 
+
diff --git a/files/it/tools/debugger/how_to/disable_breakpoints/index.html b/files/it/tools/debugger/how_to/disable_breakpoints/index.html new file mode 100644 index 0000000000..d98d34e98f --- /dev/null +++ b/files/it/tools/debugger/how_to/disable_breakpoints/index.html @@ -0,0 +1,20 @@ +--- +title: Disable breakpoints +slug: Tools/Debugger/How_to/Disable_breakpoints +translation_of: Tools/Debugger/How_to/Disable_breakpoints +--- +
+
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+
+ +

Per disabilitare un singolo punto di interruzione, deseleziona il checkbox relativo nella lista dei pnti di interruzione.

+ +

Per disabilitare tutti i punti di interruzione, click sull' icona:  sulla barra dei comandi.

+ +

{{EmbedYouTube("ULoZ70XPd90")}}

diff --git a/files/it/tools/debugger/how_to/index.html b/files/it/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..d77ec65938 --- /dev/null +++ b/files/it/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +

These articles describe how to use the debugger.

+ +

{{ ListSubpages () }}

diff --git a/files/it/tools/debugger/how_to/open_the_debugger/index.html b/files/it/tools/debugger/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..0e9dcba1df --- /dev/null +++ b/files/it/tools/debugger/how_to/open_the_debugger/index.html @@ -0,0 +1,28 @@ +--- +title: Open the debugger +slug: Tools/Debugger/How_to/Open_the_debugger +translation_of: Tools/Debugger/How_to/Open_the_debugger +--- +
+

 

+ +
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+
+ +

Ci sono due modi per aprire il debbugger:

+ + + +

{{EmbedYouTube("yI5SlVQiZtI")}}

+ +

 

diff --git a/files/it/tools/debugger/how_to/set_a_breakpoint/index.html b/files/it/tools/debugger/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..9180de2a40 --- /dev/null +++ b/files/it/tools/debugger/how_to/set_a_breakpoint/index.html @@ -0,0 +1,31 @@ +--- +title: Set a breakpoint +slug: Tools/Debugger/How_to/Set_a_breakpoint +translation_of: Tools/Debugger/How_to/Set_a_breakpoint +--- +
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+ +

Puoi fissare un punto di interruzione in uno dei modi seguenti:

+ + + +

Il video seguente usa il context menu per fissare un punto di interruzione :

+ +

{{EmbedYouTube("P7b98lEijF0")}}

+ +

Ogni punto di interruzione viene visualizzato in due posizioni nel debugger:

+ + diff --git a/files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html b/files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html new file mode 100644 index 0000000000..2e70147e49 --- /dev/null +++ b/files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html @@ -0,0 +1,22 @@ +--- +title: Set a conditional breakpoint +slug: Tools/Debugger/How_to/Set_a_conditional_breakpoint +translation_of: Tools/Debugger/How_to/Set_a_conditional_breakpoint +--- +
+

This page describes the JavaScript Debugger as it appears in Firefox 52 and above, in Firefox Nightly and Firefox Developer Edition.

+ +

To see what it's like in earlier versions of Firefox or in Firefox Beta and Release, see Debugger (before Firefox 52).

+ +

If you are getting this version of the Debugger and need to switch back to the old version, you can do so by visiting about:config and setting the "devtools.debugger.new-debugger-frontend" preference to false.

+
+ +

Un normale punto di interruzione è associato solo ad una riga di codice: quando l'esecuzione raggiunge qualla linea il debbuger si ferma. Un punto di interruzione condizionale ha anche una condizione associata, che è rrappresentata da un'espressione. quando l'esecuzione raggiunge qualla linea, il debugger si ferma solo se l' espressione è   vera.

+ +

{{EmbedYouTube("pVPlMhfrMwM")}}

+ +

Per impostare un punto di interruzione condizionale, nel panel sorgente, sulla linea dove vuoi il un punto di interruzione, premi tasto destro e seleziona "Aggiungi punto di interruzione condizionale". Apparirà un textbox dove digitare l'espressione. premiReturn per finire.

+ +

I punti di interruzione condizionali vengono visualizzati come frecce arancioni sul numewro di riga.

+ +

Se clicchi su uno dei punti di interruzione, apparirà la voce di menù "Edit Breakpoint". Puoi usarla per modificare una condizione oppure per aggiungere una condizione ad un brakpoint esistente.

diff --git a/files/it/tools/debugger/how_to/step_through_code/index.html b/files/it/tools/debugger/how_to/step_through_code/index.html new file mode 100644 index 0000000000..33a2305f21 --- /dev/null +++ b/files/it/tools/debugger/how_to/step_through_code/index.html @@ -0,0 +1,31 @@ +--- +title: Step through code +slug: Tools/Debugger/How_to/Step_through_code +translation_of: Tools/Debugger/How_to/Step_through_code +--- +
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+ +

Quando il debugger è fermo su un punto di interruzione, puoi proseguire usando i bottoni della barra dei comandi:

+ +

+ +

Nell'ordine, ii bottoni sono:

+ + + +

{{EmbedYouTube("RQBwEk0-xe0")}}

+ +

Quando è in pausa, il bottone "attiva/disattiva console divisa"  può essere usato per attivare(aprire) o disattivare (chiudere) la console web per indagare gli errori e le variabili:

+ +

diff --git a/files/it/tools/debugger/index.html b/files/it/tools/debugger/index.html new file mode 100644 index 0000000000..76dafea0fa --- /dev/null +++ b/files/it/tools/debugger/index.html @@ -0,0 +1,69 @@ +--- +title: Debugger +slug: Tools/Debugger +tags: + - Debugger + - Debugging + - Dev Tools + - Firefox OS + - JS Debug + - Strumenti di Sviluppo + - febugging +translation_of: Tools/Debugger +--- +
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+ +

{{EmbedYouTube("QK4hKWmJVLo")}}

+ +

Il debugger JavaScript ti permette di eseguire il codice passo passo ed esaminare o modificare il suo stato, aiutandoti così a scovare eventuali bugs.

+ +

E' possibile usare il debugger sia per il codice eseguito localmente in Firefox, sia per il codice che viene eseguito in remoto, per esempio su un terminale Android che usa Firefox per Android. Vedi remote debugging per sapere come come connettere il debugger ad un terminale remoto.

+ +

Il debugger è compreso in Firefox, e queste pagine descrivono come utilizzare la versione che è incorporata in Firefox. Comunque è anche possibile farlo funzionare come applicazione web indipendente, e quindi usarlo per eseguire il debug di codice eseguito in altri browser o in Node. Per ulteriori dettagli su questa funzione, vedere il contenitore GitHub del progetto.

+ +

Il nuovo debugger non supporta - ancora - tutte le funzionalità del vecchio debugger. Vedi Limitazioni del nuovo debugger.

+ +
+

Panoramica dell'interfaccia utente

+ +

Per avere una generale idea del debugger, questo è il link: veloce panoramica dell'Interfaccia Utente.

+ +
+

Come fare

+ +

Per sapere quello che è possibile fare col debugger, questi sono i link alle guide disponibili:

+ +
+ +
+ +
+

Reference

+ +
+ +
diff --git a/files/it/tools/index.html b/files/it/tools/index.html new file mode 100644 index 0000000000..0fa06dcda3 --- /dev/null +++ b/files/it/tools/index.html @@ -0,0 +1,214 @@ +--- +title: Strumenti di Sviluppo di Firefox +slug: Tools +tags: + - Developing Mozilla + - NeedsMarkupWork + - NeedsTechnicalReview + - NeedsTranslation + - Tools + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools +--- +
{{ToolsSidebar}}
+ +

Firefox Developer Tools è un insieme di strumenti di sviluppo web integrati in Firefox. È possibile utilizzarli per esaminare, modificare ed eseguire il debug di HTML, CSS e JavaScript

+ +

Se stai cercando informazioni sull'utilizzo degli strumenti di sviluppo web disponibili in Firefox, sei arrivato nel posto giusto - questa pagina fornisce collegamenti a informazioni dettagliate su tutti gli strumenti principali e strumenti aggiuntivi, e ulteriori informazioni come come connettersi e eseguire il debug di Firefox per Android, come estendere gli strumenti di sviluppo e come eseguire il debug del browser nel suo complesso.

+ +

Si prega di esplorare i link che si trovano nella barra laterale, e più in basso nella pagina. Se hai commenti o domande sui devtools, inviaci messaggi sulla nostra mailing list o sul canale IRC (vedi i link della community in fondo alla pagina). Se hai commenti o domande specifiche sulla documentazione, la community DevTools di MDN è un buon posto per pubblicare.

+ +
+

Nota: se hai appena iniziato con lo sviluppo Web e l'uso degli strumenti di sviluppo, i nostri documenti sullo sviluppo Web per l'apprendimento ti aiuteranno: vedi Introduzione al Web e Che cosa sono gli strumenti di sviluppo del browser? per ottenere buoni punti di partenza.

+
+ +

Gli strumenti di base

+ +

È possibile aprire gli strumenti di sviluppo di Firefox dal menu selezionando Strumenti > Sviluppo Web > Attiva/disattiva strumenti o utilizzare la scorciatoia  da tastiera Ctrl + Shift + I or F12 in Windows e Linux, o Cmd + Opt + I in macOS.

+ +

Il menu con i farlips sul lato destro di Strumenti di sviluppo contiene diversi comandi che consentono di eseguire azioni o modificare le impostazioni dello strumento.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Questo bottone appare soltanto quando ci sono iframes multipli in una pagina. Premilo per visualizzare la lista degli iframes nella pagina corrente e seleziona quello con cui vuoi lavorare.
Premi questo bottone per ottenere uno screenshot della pagina corrente. (Nota: Questa funzionalità non è attiva di default e deve essere abilitata nelle impostazioni prima che venga visualizzata.)
Attiva/disattiva la modalità di progettazione Responsive.
Apre il menu che include le opzioni di ancoraggio, la possibilità di mostrare o nascondere la console divisa, e le impostazioni degli strumenti di sviluppo. Il menu include anche collegamenti alla documentazione di Firefox Web Tools e Mozilla Community.
Chiude gli strumenti per sviluppatori
+ +
+
+

Page Inspector

+ +

The all-new Inspector panel in Firefox 57.

+ +

Osserva e modifica il contenuto e il design della pagina. Visualizza e interagisci con le caratteristiche degli elementi come: box model, animazioni e grid layouts.

+
+ +
+

Web Console

+ +

The all-new Console in Firefox 57.

+ +

Guarda i messaggi inviati in console dalla pagina web e comunica con essa utilizzando Javascript.

+
+
+ +
+
+

Debugger

+ +

The all-new Firefox 57 Debugger.html

+ +

Stoppa, avanza, esamina e modifica passo a passo il codice Javascript in esecuzione nella pagina.

+
+ +
+

Network Monitor

+ +

The Network panel in Firefox 57 DevTools.

+ +

Visualizza le richieste di rete effettuate quando una pagina viene caricata.

+
+
+ +
+
+

Performance Tools

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Analizza la reattività generale del sito, le performance di layout e Javascript.

+
+ +
+

Responsive Design Mode

+ +

Responsive Design mode in Firefox 57.

+ +

Osserva come il tuo sito web o la tua applicazione apparirebbero su dispositivi e reti differenti.

+
+
+ +
+
+

Accessibility inspector

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Fornisce uno strumento di controllo dell'accessibilità del sito da parte di tutti, permettendoti di controllare cosa manca o dove c'è necessità di più attenzione.

+
+ +
+
+ +
+

Note: The collective term for the UI inside which the DevTools all live is the Toolbox.

+
+ +

Altri Strumenti

+ +

Anche questi strumenti sono a disposizione tramite l'analisi della pagina. Diversamente dagli "Strumenti Chiave" descritti sopra, potresti non usarli tutti i giorni.

+ +
+
+
Memoria.
+
Ti permette di capire come viene gestita la memoria nelle varie schede di navigazione.
+
Archiviazione
+
Ispeziona cookies, archiviazione locale, indexedDB, e archiviazione sessioni presenti nella pagina.
+
DOM Property Viewer
+
Ispeziona tutto quello che riguarda il DOM della pagina.
+
Eyedropper
+
Seleziona un colore dalla pagina.
+
Editor Stili
+
Visualizza e modifica il CSS and della pagina corrente.
+
Cattura Schermata
+
Ottieni uno screenshot dell'intera pagina o di un singolo elemento.
+
Strumento di misurazione
+
Misura un area della pagina web
+
Rulers
+
Sovrascrivi le regole verticali e orizzontali
+
+
+ +
+
+

+ +

Per gli ultimi strumenti di sviluppo e funzionalità, prova Firefox Developer Edition.

+ +

Download Firefox Developer Edition

+
+ +
+
+ +

Connecting the Developer Tools

+ +

If you open the developer tools using keyboard shortcuts or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.

+ +
+
+
about:debugging
+
Debug add-ons, content tabs, and workers running in the browser.
+
Connecting to Firefox for Android
+
Connect the developer tools to an instance of Firefox running on an Android device.
+
Connecting to iframes
+
Connect the developer tools to a specific iframe in the current page.
+
Connecting to other browsers
+
Connect the developer tools to Chrome on Android and Safari on iOS.
+
+
+ +

Debugging the browser

+ +

By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.

+ +
+
+
Browser Console
+
See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.
+
Browser Toolbox
+
Attach the Developer Tools to the browser itself.
+
+
+ +

Extending the devtools

+ +

For information on extending the Firefox DevTools, see Extending the developer tools over in the Browser Extensions section of MDN.

+ +

Migrating from Firebug

+ +

Firebug has come to the end of its lifespan (see Firebug lives on in Firefox DevTools for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — Migrating from Firebug.

+ +

Contribute

+ +

If you want to help improve the developer tools, these resources will get you started.

+ +
+
+
Get Involved
+
Our developer documentation explains how to get involved.
+
bugs.firefox-dev.tools
+
A tool helping to find bugs to work on.
+
+
diff --git a/files/it/tools/page_inspector/index.html b/files/it/tools/page_inspector/index.html new file mode 100644 index 0000000000..56133a05a0 --- /dev/null +++ b/files/it/tools/page_inspector/index.html @@ -0,0 +1,48 @@ +--- +title: Page Inspector +slug: Tools/Page_Inspector +translation_of: Tools/Page_Inspector +--- +

Usa Page Inspector per esaminare e modificare il codice HTML e CSS della pagina.

+ +

Puoi esaminare pagine caricate in una copia locale di Firefox o in remoto, come su devices Firefox OS o Firefox per Android. Guarda la guida sul debugging remoto per imparare a connettere gli strumenti di sviluppo ad un dispositivo remoto.

+ +
+

Interfaccia Utente

+ +

To find your way around the Inspector, here's a quick tour of the UI.

+ +
+

How to

+ +

To find out what you can do with the Inspector, see the following how to guides:

+ +
+ +
+ +
+

Reference

+ +
+ +
diff --git a/files/it/tools/prestazioni/index.html b/files/it/tools/prestazioni/index.html new file mode 100644 index 0000000000..30117d7c02 --- /dev/null +++ b/files/it/tools/prestazioni/index.html @@ -0,0 +1,91 @@ +--- +title: Prestazioni +slug: Tools/Prestazioni +translation_of: Tools/Performance +--- +

Lo strumento per l'analisi delle prestazioni ti fornisce una panoramica della risposta generale del tuo sito, della prestazione del layout e del Javascript. Con lo strumento per l'analisi delle prestazioni crei una registrazione, o tracci un profilo, del tuo sito in un periodo di tempo. Lo strumento ti mostra poi un resoconto delle cose che il tuo browser stava facendo al fine di rappresentare il tuo sito nel profilo, ed un grafico del frame rate nel profilo.

+ +

Hai a disposizione tre sotto-strumenti per esaminare gli aspetti del profilo più dettagliatamente:

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Per cominciare

+ +
+
+
+
UI Tour
+
+

Per orientarti nell' uso dello strumento d'analisi delle prestazioni, ecco un breve tour della UI.

+
+
+
+ +
+
+
How to
+
Operazioni basilari: apri lo strumetno, crea, salva, carica e configura le registrazioni
+
+
+
+ +
+

Componenti dello strumento per l' analisi delle prestazioni

+ +
+
+
+
Frame rate
+
Comprendi la risposta generale del tuo sito
+
Albero delle chiamate
+
Trova gli intoppi nel Javascript del tuo sito.
+
+
+ +
+
+
Cascata
+
Comprendi il lavoro che sta svolgendo il browser quando l' utente interagisce con il tuo sito.
+
Grafico a fiamma
+
Controlla quali funzioni Javascript sono in esecuzione ed in che momento, durante la registrazione.
+
 
+
+
+
+ +
+

Scenari

+ +
+
+
+
Animazione delle proprietà CSS
+
Usa la cascata per capire in che modo il browser aggiorna una pagina e come l' animazione di differenti proprietà CSS può intaccare le prestazioni.
+
 
+
+
+ +
+
+
Javascript intensivo
+
Usa gli strumenti Frame rate e Cascata  per evidenziare problemi di prestazione dovuti ad un Javascript particolarmente pesante e come l'utilizzo dei worker può essere d' aiuto.
+
+
+
+ +

 

+ +
+
+
 
+
+
+ +

 

diff --git a/files/it/tools/remote_debugging/index.html b/files/it/tools/remote_debugging/index.html new file mode 100644 index 0000000000..dfee871612 --- /dev/null +++ b/files/it/tools/remote_debugging/index.html @@ -0,0 +1,47 @@ +--- +title: Remote Debugging +slug: Tools/Remote_Debugging +translation_of: Tools/Remote_Debugging +--- +

Puoi usare gli strumenti di sviluppo Firefox sul tuo computer per migliorare siti Web o applicazioni Web che funzionano con altri browser o con altre modalità di esecuzione. Gli altri browser potrebbero essere sullo stesso dispositivo come gli strumenti di sviluppo stessi o su un altro dispositivo, come un telefono cellulare collegato con una porta USB.

+ +

Le istruzioni dettagliate per connettere gli strumenti di sviluppo sono specificate nelle seguenti spiegazioni.

+ +

Modalità Gecko-based

+ +

Per prima cosa, puoi connettere gli strumenti di sviluppo alla modalità Gecco-base a piacere con Firefox Desktop, Firefox per Android, Firefox OS e Thunderbird.

+ +

 

+ +

 

+ +

 

+ +

 

+ +

Per fare questo puoi usare Firefox per aggiungere il Toolbox nel preocesso remoto, e il Toolbox verrà eseguito nella tua finestra. In questo momento il tools implementa le seguenti funzioni da remoto:

+ + + +

Firefox per Android

+ +

Remotely debugging Firefox for Android spiega come collegare Firefox, tramite USB, su un dispositivo Android.

+ +

Firefox per Metro

+ +

Remotely debugging Firefox for Metro spiega come usare Firefox per provare il codice in esecuzione su Windows 8 (Metro-style) Firefox.

+ +

Firefox OS

+ +

Using the App Manager spiega come collegare Firefox developer tools a Firefox OS simulator o a Firefox OS device.

+ +

Thunderbird

+ +

Remotely debugging Thunderbird spiega come Firefox eThunderbird possono essere usati per provare il codice in esecuzione su Thunderbird.

diff --git a/files/it/tools/visualizzazione_flessibile/index.html b/files/it/tools/visualizzazione_flessibile/index.html new file mode 100644 index 0000000000..09fd2cb08c --- /dev/null +++ b/files/it/tools/visualizzazione_flessibile/index.html @@ -0,0 +1,79 @@ +--- +title: Visualizzazione Flessibile +slug: Tools/Visualizzazione_Flessibile +tags: + - Design + - Firefox + - Guida + - Mobile + - Strumenti + - Sviluppo + - Sviluppo Web + - responsive +translation_of: Tools/Responsive_Design_Mode +--- +

Le interfacce web responsive si adattano a diverse dimensioni di schermo permettendo una presentazione fruibile su dispositivi di tipo diverso, come smartphone o tablet. La Visualizzazione Flessibile permette di visionare facilmente come il proprio sito o applicazione web risulterà su schermi di diverse dimensioni.

+ +

La schermata seguente mostra il contenuto di una pagina Wikipedia in versione mobile simulando uno schermo della dimensione di 320x480 pixel.

+ +

+ +

La Visualizzazione flessibile risulta conveniente perché permette di ridimensionare l'area del contenuto velocemente e con precisione.

+ +

Naturalmente potrebbe essere sufficiente soltanto ridimensionare la finestra del browser ma questo comporterebbe il ridimensionamento in piccolo anche delle altre schede in fase di navigazione, rendendo il browser più difficile da usare.

+ +

Mentre è attiva la Visualizzazione flessibile su una particolare scheda, è comunque possibile continuare a navigare normalmente i contenuti delle altre schede.

+ +

Attivazione e disattivazione

+ +

Ci sono tre modi per attivare la Visualizzazione flessibile:

+ + + +

e ci sono anche tre modi per disattivare la Visualizzazione flessibile:

+ + + +

Ridimensionamento

+ +

Si può ridimensionare l'area del contenuto in due modi:

+ + + +

Decidendo di ridimensionare tramite click e trascina, tenendo premuto il tasto CTRL (Command su OSX) è possibile rallentare la velocità di ridimensionamento al fine aumentare la precisione per scegliere la dimensione giusta.

+ +
+

Controlli della modalità Visualizzazione flessibile

+ +

+ +

Lungo la parte alta della finestra in modalità "Visualizzazione flessibile" ci sono cinque controlli:

+ +
+
Chiudi
+
Termina la modalità "Visualizzazione flessibile" e ritorna alla navigazione normale.
+
Selezione dimensione
+
Permette di scegliere un numero preimpostato di combinazioni larghezza x altezza, oppure di definirne una personalizzata.
+
Orientamento
+
Alterna l'orientamento verticale ed orizzontale simulando il cambio di orientamento del dispositivo.
+
Simula gli eventi touch
+
Attiva/disattiva la simulazione degli eventi touch: quando la simulazione è attivata, gli eventi del mouse vengono tradotti in eventi touch.
+
Screenshot
+
Cattura la schermata dell'area. Il salvataggio avviene nella posizione in cui vengono salvati anche gli altri Download.
+
User Agent personalizzato
+
Novità da Firefox 47. Immettere una stringa che corrisponde al nome di un User Agent. L'area risulta evidenziata e le richieste verranno effettuate utilizzando la stringa User Agent impostata. Questo è utile quando i siti restituiscono diversi contenuti in base al riconoscimento per mezzo di UA sniffing. Per tornare alla normalità è sufficiente svuotare il campo di testo.
+
+
+ +

 

diff --git a/files/it/tools/web_console/helpers/index.html b/files/it/tools/web_console/helpers/index.html new file mode 100644 index 0000000000..d64e42e6ec --- /dev/null +++ b/files/it/tools/web_console/helpers/index.html @@ -0,0 +1,79 @@ +--- +title: Web Console Helpers +slug: Tools/Web_Console/Helpers +translation_of: Tools/Web_Console/Helpers +--- +

I comandi

+ +

la riga di comando JavaScript fornito dalla console web offre alcune funzioni di supporto built-in che rendono più semplici determinate attivita

+ +
+
$()
+
Sembra una stringa selettore CSS, restituendo il primo elemento che corrisponde. Equivalente a {{domxref ("document.querySelector ()")}} o chiama la funzione $ nella pagina, se esiste
+
$$()
+
Sembra una stringa selettore CSS, restituendo una serie di nodi DOM quella partita. Questo è come per {{domxref ("document.querySelectorAll ()")}}, ma restituisce un array invece di un {{domxref ("NodeList")}}.
+
$0
+
L'elemento attualmente ispezionato nella pagina.
+
$_
+
Memorizza il risultato dell'ultima espressione eseguito nella linea di comando console. Ad esempio, se si digita "2 + 2 <Enter>", quindi "$ _ <invio>", la console stampare 4.
+
$x()
+
Valuta un'espressione XPath e restituisce un array di nodi corrispondenti.
+
keys()
+
Dato un oggetto, restituisce un elenco dei tasti (o nomi di proprietà) su tale oggetto. Questa è una scorciatoia per Object.keys.
+
values()
+
Dato un oggetto, restituisce una lista dei valori di tale oggetto; serve come un compagno di chiavi ().
+
clear()
+
Cancella l'area di uscita della console.
+
inspect()
+
Dato un oggetto, si apre la finestra di ispezione oggetto per quell'oggetto.
+
pprint()
+
Formatta il valore specificato in modo leggibile; questo è utile per lo scarico del contenuto di oggetti e array.
+
help()
+
Visualizza la guida del testo. In realtà, in un delizioso esempio di ricorsione, che vi porterà a questa pagina.
+
cd()
+
+

Interruttore contesto di valutazione JavaScript per un iframe diversa all'interno della pagina. Questo helper accetta più modi diversi di identificazione del telaio per passare. È possibile fornire una delle seguenti:

+ +
    +
  • una stringa selettore che verrà passato al document.querySelector per individuare l'elemento iframe
    • +
  • l'elemento iframe stesso
    • +
  • la finestra di contenuto all'interno del iframe
    • +
+ +

Vedere lavorare con iframe

+
+
copy()
+
Nuovo in Firefox 38. Copia l'argomento negli appunti. Se l'argomento è una stringa, viene copiato così com'è. Se l'argomento è un nodo DOM, la sua outerHTML viene copiato. In caso contrario, JSON.stringify sarà chiamato sull'argomento, e il risultato sarà copiata negli appunti.
+
clearHistory()
+
.Nuovo in Firefox 39. Proprio come una normale linea di comando, la riga di comando della console ricorda i comandi che avete digitato. Utilizzare questa funzione per cancellare la cronologia dei comandi della console.
+
+ +

Si prega di fare riferimento alla API Console per maggiori informazioni sulla connessione dal contenuto.

+ +

variabili

+ +
+
tempN
+
L'opzione "Use in Console" in Impostazioni genera una variabile per un nodo denominato temp0, temp1, temp2, ecc riferimento al nodo.
+
+ +

esempi

+ +

Guardando il contenuto di un nodo DOM

+ +

Diciamo che hai un nodo DOM con il "titolo" ID. In realtà, questa pagina che stai leggendo in questo momento ha uno, in modo da poter aprire la console Web e provare questo momento.

+ +

Diamo uno sguardo ai contenuti di quel nodo utilizzando il $ () e ispezionare () funzioni:

+ +
inspect($("#title"))
+ +

Questo apre automaticamente l'ispettore oggetto, che mostra il contenuto del nodo DOM che corrisponde al selettore CSS "#title", che è ovviamente l'elemento con ID "titolo".

+ +

Dumping il contenuto di un nodo DOM

+ +

Questo è molto bello, se vi capita di essere seduti al browser esporre qualche problema, ma diciamo che stai debug remoto per un utente, e hanno bisogno di uno sguardo il contenuto di un nodo. Si può avere l'utente aprire la console Web e scaricare il contenuto del nodo nel registro, quindi copiare e incollare in una e-mail a voi, utilizzando la funzione pprint ():

+ +
pprint($("#title"))
+
+ +

Questo sputa fuori il contenuto del nodo in modo da poter dare un'occhiata. Naturalmente, questo può essere più utile con altri oggetti che un nodo DOM, ma si ottiene l'idea.

diff --git a/files/it/tools/web_console/index.html b/files/it/tools/web_console/index.html new file mode 100644 index 0000000000..1be4e7942e --- /dev/null +++ b/files/it/tools/web_console/index.html @@ -0,0 +1,37 @@ +--- +title: Web Console +slug: Tools/Web_Console +translation_of: Tools/Web_Console +--- +

La console web

+ +
    +
  1. Registra informazioni associate con la pagina web: richieste in rete, JavaScript, CSS, erori generici ed errori relativi alla sicurezza, warning e addizionali messaggi generati dal codice JavaScript che viene eseguito nel contesto della pagina
    2. +
  2. Abilita l'interazione con la pagina web eseguendo le istruzioni JavaScript nel contesto della pagina
    3. +
+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +
+
+
+
Aprire la console web
+
Come iniziare ad usare la console web
+
L'interprete della riga di comando
+
Come interagine con un documento usando la console web.
+
Dividere la console web
+
Usare console web insieme con altri strumenti.
+
+
+ +
+
+
Messagi della console web
+
Dettagli dei messaggi registrati nella console web.
+
Output arrichito
+
Vedi e interagisci con gli oggetti .
+
Scorciatoie da tastiera
+
Elenco delle scorciatoie da tastiera.
+
+
+
diff --git a/files/it/tools/webide/index.html b/files/it/tools/webide/index.html new file mode 100644 index 0000000000..2e2bad73d0 --- /dev/null +++ b/files/it/tools/webide/index.html @@ -0,0 +1,333 @@ +--- +title: WebIDE +slug: Tools/WebIDE +translation_of: Archive/WebIDE +--- +
+

WebIDE è disponibile da Firefox 34 in poi.

+ +

Puoi attivare WebIDE anche in Firefox 33, semplicemente cambiando una preferenza: digita about:config nella barra degli indirizzi e imposta come vero il parametro di devtools.webide.enabled.

+
+ +
+

WebIDE è il sostituto di App Manager. Come App Manager,  ti permette di usare e fare il debug delle app di Firefox OS usando Firefox OS Simulator oppure un normale dispositivo con Firefox OS.

+ +

WebIDE include un ambiente di editing che ti permette di creare e sviluppare app per Firefox OS, fornisce una visione ad albero di tutti i file presenti nella tua app con la possibilità di modificarli e salvarli, e in più due template per aiutarti a iniziare.

+ +

Inoltre, WebIDE ti permette di connetere i Firefox Developer Tools ad altri browser, come Firefox per Android, Chrome per Android e Safari su iOS. Dai un'occhiata alla pagina Debug Remoto per ottenere informazioni su come connetterti ad un browser specifico.

+
+ +

Con WebIDE, per prima cosa devi impostare una o più runtime. Una runtime, è l'ambiente in cui testerai ed eseguirai il debug di un App. La runtime potrebbe essere un device con a bordo Firefox OS connesso tramite cavo USB, oppure Firefox OS Simulator installato sul computer.

+ +

Adesso, puoi creare un app, o aprire un app esistente. Se stai creando una nuova app, puoi partire da un template che include la struttura base delle cartelle e un modello contenente il minimo indispensabile per iniziare a sviluppare, oppure usare un template più corposo che mostra come usare una API privilegiata. Con WebIDE puoi modificare e salvare i file della tua app, che vengono mostratti in una struttura ad albero, attraverso un editor incorporato. Ovviamente non sei obbligato ad usare l'editor incorporato, puoi sviluppare l'app esternamente ed usare WebIDE solamente per eseguire il debug.

+ +

Infine, puoi installare l'app in  una delle runtime ed eseguirla. Durante l'esecuzione dell'app puoi osservarla e modificarla tramite gli strumenti per lo sviluppo come l'Inspector, la Console, Il Debugger Javascript e molto altro.

+ +

Requisiti di sistema

+ +

Per sviluppare ed eseguire il debug delle app utilizzando WebIDE, tutto ciò che ti serve è Firefox 23 o versioni successive.  Per testare l'app su un dispositivo vero e proprio, hai bisogno di un device che abbia Firefox OS 1.2 o versioni successive.

+ +

Puoi usare WebIDE solamente se il tuo sviluppo riguarda Firefox OS 1.2 o versioni successive.

+ +

Aprire WebIDE

+ +

WebIDE può essere aperto in tre modi:

+ + + +

+ +

Ecco WebIDE in azione:Il menu a cascata sulla sinistra denominato "Apri App", ti permette di aprire un app esistente o di crearne una nuova, mentre il menu sulla destra ti permette di scegliere una runtime o crearne una nuova.

+ +

I tasti esegui, stop e debug: appaiono solamente dopo aver aperto un app e selezionato una runtime.

+ +

Da Firefox 36, puoi modificare la grandezza del font in WebIDE utilizzando le seguenti scorciatoie da tastiera (usa il tasto Command al posto Control se stai usando OS X):

+ + + +

Impostare le runtime

+ +

Nel menu "Seleziona Runtime", le runtime sono raggruppate in tre tipi:

+ + + +

La prima volta che clicchi il menu, probabilmente non vedrai alcuna runtime:

+ +

Il resto di questa sezione mostra come fare per aggiungere delle runtime.

+ +

Connettersi ad un device Firefox OS

+ +

Prima di connetterti ad un device, ci sono alcune cose da fare:

+ + + +
+

Linux only:

+ + +
+ +
+

Windows only:

+ + +
+ +

If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":

+ +

+ +

If you don't see your device, see the Troubleshooting page.

+ +

Connecting to Firefox for Android

+ +

From Firefox 36 onwards Android devices connected over USB and running Firefox for Android appear as a runtime under "USB devices". See the article on connecting to Firefox for Android from WebIDE.

+ +

Before Firefox 36, you can connect to Firefox for Android without using WebIDE at all, or can use WebIDE by setting up a custom remote runtime.

+ +

Adding a Simulator

+ +

The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.

+ +

This means that in many cases, you don't need a real device to test and debug your app.

+ +

The Simulator is big, so it doesn't ship inside Firefox but as a Firefox add-on. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.

+ +

You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:

+ +

To learn more about the Simulator, see its documentation page.

+ +

Custom runtimes

+ +

Remote runtime

+ +

With a custom remote runtime you can use an arbitrary hostname and port to connect to the remote device.

+ +

Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or ADB. By default, WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.

+ +

This is convenient in most cases, but sometimes you might want to use ADB outside of WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the adb forward command (example: adb forward tcp:6000 localfilesystem:/data/local/debugger-socket).
+
+ If you then want to use WebIDE to connect as well, you should disable the ADB Helper add-on and connect WebIDE using the Custom runtime option, entering the host and port that you passed to adb forward (example: localhost:6000).

+ +

Also, before Firefox 36, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. See more about connecting to Firefox for Android using ADB prior to Firefox 36.

+ +

Valence-enabled runtimes

+ +

If you have the Valence add-on installed, you'll see three additional runtimes:

+ + + +

For instructions on how to connect to these runtimes, see the relevant entry in the Remote Debugging page.

+ +

Selecting a runtime

+ +

Once you've set up a runtime you can select it using the "Select Runtime" menu.

+ + + +

Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.

+ +

Runtime actions

+ +

When a runtime is selected, the Runtimes dropdown menu has three extra items:

+ + + +

+ +

+ +

Creating and opening apps

+ +

Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:

+ +

+ +

Create a new app

+ +

Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".

+ +

+ +

Both templates are from Mozilla's app template collection, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.

+ +

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

+ +

Open a packaged app

+ +

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

+ +

Open a hosted app

+ +

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

+ +

Editing apps

+ +

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.

+ +

The app summary page

+ +

When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:

+ +

+ +

You can always get back to the app summary page by clicking on the root of the tree on the left.

+ +

Manifest validation

+ +

WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

+ +

+ +

Of course, you can edit the manifest.webapp file right in the project editor as well.

+ +

The source editor

+ +

WebIDE uses the CodeMirror source editor.

+ +

Source editor shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

Code completion

+ +

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

+ +

To display autocomplete suggestions in JavaScript press Control + Space:

+ +

+ +

Inline documentation

+ +

The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:

+ +

+ +

Clicking the [docs] link in the popup will take you to the MDN page for the symbol.

+ +

Saving files

+ +

For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).

+ +

Removing projects

+ +

To remove an app from WebIDE, go to the app summary page and click "Remove Project".

+ +

Running and debugging apps

+ +

When you're ready to run the app, you need to select a runtime from the "Select Runtime" dropdown menu. If you don't have any available runtimes here, find out how to add some in Setting up runtimes.

+ +

The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:

+ +

To debug the app, click the "Pause" button and the Developer Tools Toolbox appears, connected to your app:

+ +

+ +
+

From Firefox 36 onwards, the "Pause" button is replaced with a wrench icon.

+
+ +

Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the Inspector, Console, JavaScript Debugger, Style Editor, Profiler and Scratchpad. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.

+ +

Unrestricted app debugging (including certified apps, main process, etc.)

+ +

You can run the debugger against the simulator, b2g desktop, or a real device.

+ +

With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including certified apps:

+ +

+ +


+ However, when connecting to a real device we have a security policy in force:

+ + + +

To remove this restriction:

+ + + +

To disable DevTools restricted privileges, connect to the runtime, and then, in the menu, go to Runtime > Runtime Info. The path then differs depending on what you are debugging against:

+ + + +

Now (or after a restart of the B2G desktop client) in WebIDE you should see all the apps on the device.

+ +

Monitoring performance

+ +

If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:

+ + + +

Troubleshooting

+ +

If you have any problems working with WebIDE, see the Troubleshooting page.

+ +

 

+ +

 

diff --git a/files/it/tools/webide/monitor/index.html b/files/it/tools/webide/monitor/index.html new file mode 100644 index 0000000000..a883cac837 --- /dev/null +++ b/files/it/tools/webide/monitor/index.html @@ -0,0 +1,160 @@ +--- +title: Monitor +slug: Tools/WebIDE/Monitor +tags: + - italiano tags +translation_of: Archive/WebIDE/Monitor +--- +
+

The WebIDE Monitor is a general-purpose data tool designed to help you track the performance of Firefox OS apps and devices.

+
+ +

The WebIDE Monitor

+ +

The Monitor is able to display live, interactive graphs to visualize time series.

+ +

Available graphs

+ +

The Monitor comes with several different graphs. They usually show up once WebIDE is connected to a Firefox OS runtime.

+ +

Unique Set Size

+ +

Unique Set Size

+ +

This graph shows the memory footprint of all Firefox OS processes over time. If you are interested in the memory consumption of a Firefox OS app, launch it, and the private memory used by its process will be displayed here.

+ +

Displaying your own data

+ +

It's relatively easy to display any kind of data in the Monitor, because it accepts loosely-formatted updates from many different sources.

+ +

From a Firefox OS device

+ +

You can send data from a connected device by sending observer notifications.

+ +

Note: If you would like to do this in a certified app, please follow these instructions.

+ +

JavaScript

+ +

Services.obs.notifyObservers(null, 'devtools-monitor-update', data);

+ +

You can send data from any JS code with chrome privileges. Here is a complete example measuring the run time of some JS code:

+ +

const Services = require('Services');
+
+ var start = Date.now();
+ // code to benchmark
+ var stop = Date.now();
+
+ var data = { graph: 'Performance', myFeature: stop-start, time: stop };
+ Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));

+ +

C++

+ +

observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);

+ +

You can send data from anywhere in Gecko. Here is a complete example measuring the run time of some code:

+ +

#include <time.h>
+ #include "nsPrintfCString.h"
+ #include "nsIObserverService.h"
+
+ clock_t start = clock();
+ // code to benchmark
+ clock_t stop = clock();
+ double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);
+
+ nsCOMPtr<nsIObserverService> observerService = services::GetObserverService();
+ if (observerService) {
+   nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);
+   nsAutoString data = NS_ConvertUTF8toUTF16(str);
+   observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get());
+ }

+ +

From your computer

+ +

You can easily send data to the Monitor over a WebSockets server. This can be useful if you're writing a Firefox extension, a command-line tool or a web service.

+ +

By default, the Monitor looks for a server running on the port 9000 of you computer. You can change this by updating the devtools.webide.monitorWebSocketURL preference.

+ +

You can even make it accept data from your local network, or from anywhere on the Internet.

+ +

Node.js

+ +

TODO

+ +

Python

+ +

TODO

+ +

Supported formats

+ +

The Monitor accepts data in the form of JSON objects that generally look like this:

+ +

{
+   "graph": "myGraph",
+   "curve": "myCurve",
+   "value": 42,
+   "time": 1234567890
+ }

+ +

That format is meant to be very flexible. If a specified graph or curve doesn't exist, it will be created automatically.

+ +

Arbitrary names

+ +

Unrecognized entries will be considered as curve name and value.

+ +

The smallest data packet you can send is something like:

+ +

{ "myCurve": 42 }

+ +

This will add a data point to "myCurve" in a graph with no name. The missing time will default to when the Monitor received the packet.

+ +

For better precision, it's probably better to always specify a timestamp for your data:

+ +

{
+   "current": 60,
+   "voltage": 500,
+   "time": 1234567890
+ }

+ +

Multiple values

+ +

In a single update, you can send data for multiple curves:

+ +

{
+   "graph": "myGraph",
+   "myCurve1": 50,
+   "myCurve2": 300,
+   "myCurve3": 9000,
+   "time": 1234567890
+ }

+ +

Or several data points for a single curve:

+ +

{
+   "graph": "myGraph",
+   "curve": "myCurve",
+   "values": [
+     { "time": 1234567890, "value": 42 },
+     { "time": 1234567981, "value": 51 }
+   ]
+ }

+ +

Multiple updates

+ +

And you can also send multiple data updates as an Array:

+ +

[
+   { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },
+   { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }
+ ]

+ +

Punctual events

+ +

To mark special events in a graph with a vertical bar, add an event key to your update:

+ +

{
+   "graph": "myGraph",
+   "event": "myEvent",
+   "time": 1234567980
+ }

diff --git a/files/it/tools/webide/troubleshooting/index.html b/files/it/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..462bb661d2 --- /dev/null +++ b/files/it/tools/webide/troubleshooting/index.html @@ -0,0 +1,106 @@ +--- +title: 'WebIDE, risoluzione dei problemi' +slug: Tools/WebIDE/Troubleshooting +tags: + - 'etichette{locale}' +translation_of: Archive/WebIDE/Troubleshooting +--- +

Connettere un dispositivo Firefox OS tramite USB

+ +

Se stai tentando di connettere un dispositivo con Firefox Os al WebIDE e non viene mostrato, ecco alcuni consigli che puoi provare a mettere in atto.

+ + + +

Connettere un dispositivo Firefox OS tramite Wi-Fi

+ + + +

Connettersi a Firefox per Android

+ +

Se stai cercando di connettere il WebIDE con un dispositivo Android su cui esegui Firefox e questo non viene mostrato nel WebIDE ecco alcuni consigli che puoi provare a mettere in atto:

+ + + +

Connettersi ad altri browser (Chrome, Safari)

+ +

Il WebIDE usa il progetto Valence (conosciuto come Firefox Tools Adapter) per comunicare con altri browser, come  Chrome e  Safari. 

+ +

Se ha problemi a connettersi ad altri browser controlla i passaggi per impostare il tuo dispositivo per quel browser sulla pagina del progetto Valence.

+ +

Problemi con il debug delle app

+ +

Se non riesci a effettuare il debug di app certificate, di sistema o precedentemente installate potresti essere incappato in un problema di insufficenti permessi. Per saperne di più leggi la sezione debug senza restrizioni (app certificate, di sistema, processi, etc.).

+ +

Impossibile caricare la lista dei progetti

+ +

Se usi il WebIDE ed effettui il downgrade di Firefox ad una versione precedente e continui ad utilizzare lo stesso profilo potresti incontrare l'errore "Impossibile carica la lista dei progetti" quando apri il WebIDE nella versione precedente.

+ +

Questo problema può accadere quando il sistema di salvataggio dei progetti del WebIDE (IndexedDB) ha aggiornato o cambiato i suoi file durante l'uso della versione più recente di Firefox. La lista dei progetti è a tutti gli effetti inaccessibile alle versioni più vecchie di Firefox.

+ +

Non è stata persa nessuna informazione ma dovrai necessariamente continuare ad utilizzare la versione più recente di Firefox per recuperare la lista dei progetti.

+ +

Se vuoi veramente utilizzare la versione meno recente di Firefox puoi provare a cancelleare la lista dei progetti nel seguente modo, ma questa procedura non è supportata e potresti incorrere in altri problemi o altre perdite di informazioni.

+ +
    +
  1. Chiudi Firefox
    2. +
  2. Trova la tua cartella dei profili
    3. +
  3. Trova la cartella storage dentro alla cartella del tuo profilo
    4. +
  4. Nel contenuto della cartella ci saranno dei file o cartelle il cui nome comincia per4268914080AsptpcPerjo (una hash del nome del database)
    5. +
  5. Rimuovi tutte le cartelle ed i file in questione
    6. +
  6. Avvia Firefox ed il WebIDE nuovamente
    7. +
+ +

Abilitare i log

+ +

Puoi inoltre abilitare un logging senza filtri per raccogliere informazioni diagnostiche:

+ +
    +
  1. Apri about:config, aggiunti una nuova preferenza chiamata extensions.adbhelper@mozilla.org.sdk.console.logLevel, con il valore in forma di Stringa impostato ad all, ed imposta la proprietà extensions.adbhelper@mozilla.org.debug al valore true.
    2. +
  2. Nella pagina Add-ons Manager, disabilita e abilita nuovamente l'add-on ADB Helper.
    3. +
  3. Apri la Console del Browser e vedrai dei messaggi che hanno come prefisso la stringa adb. Se i messaggi non sono comprensibili per te  chiedi aiuto.
    4. +
+ +

Chiedere aiuto

+ +

Vai alla stanza #devtools su IRC e proveremo ad aiutarti.

diff --git a/files/it/tutorial_sulle_canvas/index.html b/files/it/tutorial_sulle_canvas/index.html new file mode 100644 index 0000000000..577a620cb7 --- /dev/null +++ b/files/it/tutorial_sulle_canvas/index.html @@ -0,0 +1,55 @@ +--- +title: Tutorial sulle Canvas +slug: Tutorial_sulle_Canvas +tags: + - Canvas tutorial + - 'HTML:Canvas' +translation_of: Web/API/Canvas_API/Tutorial +--- +
+

<canvas> è un nuovo elemento HTML che può essere utilizzato per disegnare elementi grafici utilizzando lo scripting (di solito JavaScript). Per esempio può essere utilizzato per disegnare grafici, fare composizioni di fotografie o semplici (e non così semplici) animazioni. L'immagine a destra mostra alcuni esempi di implementazioni di <canvas> che vedremo più avanti in questo tutorial.

+
+ +

Questo tutorial descrive come usare l'elemento <canvas> per disegnare grafica 2D, cominciando dagli apetti più elementari. Gli esempi forniti vi forniranno un'idea di ciò che è possibile fare con canvas nonché il codice di alcuni snippet come ispirazione per lo sviluppo dei vostri contenuti originali.

+ +

<canvas> è stato introdotto originariamente da Apple per il Mac OS X Dashboard e solo implementato da Safari. Anche il browser basato sulla 1.8 Gecko, come ad esempio Firefox 1.5, supporta questo elemento. L'elemento <canvas> è anche parte delle specifiche WhatWG Web applications 1.0 conosciute come HTML 5

+ +

In questo tutorial proveremo a descrivere l'utilizzo dell'elemento <canvas> nelle pagine HTML. Gli esempi forniti dovrebbero darvi dei chiarimenti di cosa tu puoi fare con <canvas> e come può essere utilizzato per iniziare a costruire le tue implementazioni.

+ +

Prima di iniziare

+ +

Utilizzare l'elemento <canvas> non è molto difficile, ma richiede una conoscenza di base di HTML e JavaScript.

+ +

Sebbene l'elemento <canvas> non sia supportato da alcuni vecchi browser dovrebbe essere supportato dalle versioni recenti di tutti i principali browser. La dimensione predefinita del canvas (tela) è di 300px × 150 px (altezza x larghezza). E' possibile personalizzare le dimensioni ricorrendo alle proprietà height e width dei fogli CSS. Nei seguenti esempi ricorreremo a codice javascript (javascript context object) per generare la grafica al volo.

+ +

In questo tutorial

+ + + +

Vedi anche

+ + + +
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
+ +

{{ languages( { "fr": "fr/Tutoriel_canvas", "ja": "ja/Canvas_tutorial", "ko": "ko/Canvas_tutorial", "pl": "pl/Przewodnik_po_canvas", "zh-cn": "cn/Canvas_tutorial", "ru": "ru/\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435_canvas" } ) }}

diff --git a/files/it/venkman/index.html b/files/it/venkman/index.html new file mode 100644 index 0000000000..cdebf87b65 --- /dev/null +++ b/files/it/venkman/index.html @@ -0,0 +1,42 @@ +--- +title: Venkman +slug: Venkman +tags: + - Estensioni + - 'Estensioni:Strumenti' + - 'JavaScript:Strumenti' + - Strumenti + - Sviluppo_Web + - 'Sviluppo_Web:Strumenti' + - Tutte_le_categorie + - Venkman +translation_of: Archive/Mozilla/Venkman +--- +

+Venkman è un debugger JavaScript basato su Mozilla. +

+

Articoli in MDC su Venkman

+ + +

Ottenere Venkman

+ +

Risorse

+

Visitare i link seguenti per ulteriori informazioni su Venkman: +

+ + +{{ languages( { "es": "es/Venkman", "en": "en/Venkman", "fr": "fr/Venkman", "ja": "ja/Venkman", "ko": "ko/Venkman", "pl": "pl/Venkman" } ) }} diff --git a/files/it/visualizzare_e_cercare_il_sorgente_di_mozilla_online/index.html b/files/it/visualizzare_e_cercare_il_sorgente_di_mozilla_online/index.html new file mode 100644 index 0000000000..79aedc8bb9 --- /dev/null +++ b/files/it/visualizzare_e_cercare_il_sorgente_di_mozilla_online/index.html @@ -0,0 +1,32 @@ +--- +title: Visualizzare e cercare il sorgente di Mozilla online +slug: Visualizzare_e_cercare_il_sorgente_di_Mozilla_online +translation_of: Mozilla/Tech/Viewing_and_searching_Mozilla_source_code_online +--- +

Il codice sorgente per tutti i progetti mozilla, ospitato nei repository Mercurial e CVS può essere cercato e visualizzato online utilizzando  MXR. È una variante  migliorata dell'originale Linux Cross Reference Tool.

+ +

Una nuova pagina di ricerca chiamata DXR è oltretutto disponibile - non offre tutte le radici che MXR fornisce, ma i suoi risultati possono essere anche più complicati.

+ +

Non scaricare il codice sorgente facendo crawling su MXR; scarica un tarball oppure usa Mercurial o CVS.

+ +

MXR indicizza multiple branches CVS e moduli; la radice MXR più interessante per un contributore è comm-central, la quante contiene l'ultimo sorgente per la maggior parte dei prodotti Mozilla (incluso Firefox, Thunderbird, SeaMonkey, Sunbird/Lighting, Chatzilla, Dot Inspector e Venkam Javascript Debugger) ed è aggiornato frequentemente.

+ +

Alcune radici MXR d'interesse sono:

+ + + +

Struttura della directory del codice sorgente Mozilla ha una corta descrizione del codice che risiede in ciascuna sorgente.

+ +

Risorse

+ +

CVS Tags

diff --git a/files/it/web/accessibility/index.html b/files/it/web/accessibility/index.html new file mode 100644 index 0000000000..2e786c4fb1 --- /dev/null +++ b/files/it/web/accessibility/index.html @@ -0,0 +1,56 @@ +--- +title: Accessibilità +slug: Web/Accessibility +tags: + - Accessibilità +translation_of: Web/Accessibility +--- +

L'accessibilità nello sviluppo web indica il fatto di permettere a quante più persone possibile l'utilizzo dei siti web, anche se le capacità di quelle persone sono in qualche modo limitate. In questo articolo vengono riportate alcune informazioni sullo sviluppo di contenuti accessibili.

+ +

"Il termine 'accessibile' è più spesso utilizzato per descrivere strutture o servizi per l'assistenza delle persone disabili, ad esempio una struttura 'accessibile alle sedie a rotelle'. Tuttavia questa definizione può essere estesa alla scrittura Braille, ai segnali audio sugli attraversamenti pedonali, alle rampe per sedie a rotelle, al design dei siti web, ecc." Articolo di Wikipedia sull'accessibilità

+ +

"Fondamentalmente, il Web è progettato per funzionare per tutti, indipendentemente dall'hardware o dal software utilizzati, dalla lingua, dalla cultura, dalla posizione geografica o dalle capacità fisiche e mentali. Quando il Web raggiunge questo scopo, è accessibile alle persone con diverse capacità di udito, movimento, vista e abilità cognitive." W3C - Accessibility

+ +
+
+

Documentazione

+ +

L'Area di Apprendimento dell'Accessibilità di Mozilla Developer Network contiene guide aggiornate che spiegano gli elementi essenziali dell'accessibilità:

+ +
+
Cos'è l'accessibilità?
+
Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web
+
HTML: una buona base per l'accessibilità
+
Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.
+
Linee guida di accessibiltà per CSS e JavaScript
+
CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.
+
Basi della tecnologia WAI-ARIA
+
Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.
+
Accessibilità multimediale
+
+

Un'altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l'accessibilità di questo tipo di contenuti.

+
+
Accessibilità per dispositivi mobili
+
L'uso di internet su dispositivi mobili è sempre più diffuso, e le principali piattaforme come iOS e Android sono dotate di numerosi strumenti per garantire l'accessibilità. È dunque importante prendere in considerazione l'accessibilità del tuo contenuto web su tali piattaforme. Questo articolo propone considerazioni sull'accessibilità specificamente pensate per dispositivi mobili
+
+ +

Vedi tutti gli articoli sull'Accessibilità...

+
+ +
+

Strumenti per gli sviluppatori Web

+ + + +

Vedi tutti...

+ +

Altri siti utili

+ + +
+
diff --git a/files/it/web/accessibility/sviluppo_web/index.html b/files/it/web/accessibility/sviluppo_web/index.html new file mode 100644 index 0000000000..6388da389a --- /dev/null +++ b/files/it/web/accessibility/sviluppo_web/index.html @@ -0,0 +1,66 @@ +--- +title: Sviluppo Web +slug: Web/Accessibility/Sviluppo_Web +translation_of: Web/Accessibility +--- +

 

+ + + + + + + +
+

Accessibilità Web

+
+
+ ARIA per sviluppatori
+
+
+
+ ARIA rende possibile la creazione di contenuto HTML dinamico accessibile. Ad esempio, regioni di contenuto attivo e widget JavaScript.
+
+
+
+ Widget JavaScript navigabili da tastiera
+
+ Fino ad ora, gli sviluppatori che volevano rendere i propri widget basati su <div> e <span> accessibili tramite tastiera mancavano della tecnica adatta. L'usabilità da tastiera è parte dei requisiti minimi di accessibilità di cui ogni sviluppatore dovrebbe essere a conoscenza.
+
+

Accessibilità di XUL

+
+
+  
+
+ Sviluppare componenti personalizzati accessibili con XUL
+
+ Come usare tecniche di accessibilità in DHTML per rendere accessibili i propri componenti XUL personalizzati.
+
+
+
+ Linee guida alla creazione di XUL accessibile
+
+ Quando viene utilizzato secondo queste linee guida, XUL è in grado di generare interfacce utente accessibili. Sviluppatori, revisori, designer e ingegneri del controllo qualità devono avere familiarità con queste linee guida.
+
+
+
+
+
+ 		+

Risorse esterne

+
+
+ Dive into Accessibility
+
+
+
+ Questo libro risponde a due domande. La prima è "Perché dovrei rendere il mio sito web più accessibile?" La seconda è "Come posso rendere il mio sito più accessibile?"
+
+
+
+ Accessible Web Page Authoring
+
+ Una pratica lista di controllo sull'accessibilità Web, da IBM.
+
+
+

 

diff --git a/files/it/web/api/canvasrenderingcontext2d/canvas/index.html b/files/it/web/api/canvasrenderingcontext2d/canvas/index.html new file mode 100644 index 0000000000..bb453e4419 --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/canvas/index.html @@ -0,0 +1,101 @@ +--- +title: CanvasRenderingContext2D.canvas +slug: Web/API/CanvasRenderingContext2D/canvas +translation_of: Web/API/CanvasRenderingContext2D/canvas +--- +
{{APIRef}}
+ +

La proprietà CanvasRenderingContext2D.canvas è un riferimento di sola lettura verso il canvas {{domxref("HTMLCanvasElement")}} che contiene il context corrente. Può essere {{jsxref("null")}} se non vi è un elemento {{HTMLElement("canvas")}} associato.

+ +

Sintassi

+ +
ctx.canvas;
+ +

Esempi

+ +

Dato il seguente elmento  {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas"></canvas>
+
+ +

È possibile ottenere un riferimento all'elemento canvas da cui è ottenuto questo CanvasRenderingContext2D utilizzando la property canvas:

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.canvas // HTMLCanvasElement
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html new file mode 100644 index 0000000000..2f905a5241 --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html @@ -0,0 +1,209 @@ +--- +title: CanvasRenderingContext2D.fillStyle +slug: Web/API/CanvasRenderingContext2D/fillStyle +tags: + - API + - CamvasRenderingContext2D + - Canvas + - Proprietà + - Riferimento +translation_of: Web/API/CanvasRenderingContext2D/fillStyle +--- +
{{APIRef}}
+ +

La proprietà CanvasRenderingContext2D.fillStyle delle Canvas 2D API specifica il colore o lo stile da usare all'interno delle forme. Il colore preimpostato è #000 (nero).

+ +

Vedi anche i capitoli Applicare stili e colori nel Canvas Tutorial.

+ +

Sintassi

+ +
ctx.fillStyle = color;
+ctx.fillStyle = gradient;
+ctx.fillStyle = pattern;
+
+ +

Opzioni

+ +
+
color
+
Una {{domxref("DOMString")}} letta come valore CSS {{cssxref("<color>")}}.
+
gradient
+
Un oggetto {{domxref("CanvasGradient")}} (gradiente lineare o radiale).
+
pattern
+
Un oggetto {{domxref("CanvasPattern")}} (immagine ripetuta).
+
+ +

Esempi

+ +

Usare la proprietà fillStyle per impostare un colore diverso

+ +

In questa semplice porzione di codice viene usata la proprietù fillStyle per impostare un colore diverso.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "blue";
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Modifica il codice qui sotto e vedi i cambiamenti in tempo reale nel canvas:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Un esempio di fillStyle con i cicli for

+ +

In questo esempio, useremo due cicli for per disegnare una griglia di rettangoli, ognuno di un colore differente. Il risultato finale dovrebbe assomigliare allo screenshot. Niente di particolarmente spettacolare. Usiamo due variabili i e j per generare un colore RGB unico per ogni quadrato, questo modificando soltanto i valori del rosso e del verde. Il canale del blu ha un valore fisso. Modificando i canali, puoi generare ogni tipo di palette. Aumentando le ripetizioni del ciclo, puoi ottenere qualcosa di assomigliante alle palette usate da Photoshop.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+for (var i=0;i<6;i++){
+  for (var j=0;j<6;j++){
+    ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
+                     Math.floor(255-42.5*j) + ',0)';
+    ctx.fillRect(j*25,i*25,25,25);
+  }
+}
+
+ +

Il risultato assomiglia a questo:

+ +

{{EmbedLiveSample("Un_esempio_di_fillStyle_con_i_cicli_for", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità dei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ + + + + +

Vedi anche

+ + diff --git a/files/it/web/api/canvasrenderingcontext2d/index.html b/files/it/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..e6b2eb7167 --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,448 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Games + - Graphics + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CanvasRenderingContext2D +--- +
{{APIRef}}
+ +The CanvasRenderingContext2D interface provides the 2D rendering context for the drawing surface of a {{ HTMLElement("canvas") }} element. + +

To get an object of this interface, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} on a <canvas>, supplying "2d" as the argument:

+ +
var canvas = document.getElementById('mycanvas');
+var ctx = canvas.getContext('2d');
+
+ +

Once you have the 2D rendering context for a canvas, you can draw within it. For example:

+ +
ctx.fillStyle = "rgb(200,0,0)";
+ctx.fillRect(10, 10, 55, 50);
+
+ +

See the properties and methods in the sidebar and below. The canvas tutorial has more information, examples, and resources as well.

+ +

Drawing rectangles

+ +

There are three methods that immediately draw rectangles to the bitmap.

+ +
+
{{domxref("CanvasRenderingContext2D.clearRect()")}}
+
Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content.
+
{{domxref("CanvasRenderingContext2D.fillRect()")}}
+
Draws a filled rectangle at (x, y) position whose size is determined by width and height.
+
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
+
Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style.
+
+ +

Drawing text

+ +

The following methods are provided for drawing text. See also the {{domxref("TextMetrics")}} object for text properties.

+ +
+
{{domxref("CanvasRenderingContext2D.fillText()")}}
+
Draws (fills) a given text at the given (x,y) position.
+
{{domxref("CanvasRenderingContext2D.strokeText()")}}
+
Draws (strokes) a given text at the given (x, y) position.
+
{{domxref("CanvasRenderingContext2D.measureText()")}}
+
Returns a {{domxref("TextMetrics")}} object.
+
+ +

Line styles

+ +

The following methods and properties control how lines are drawn.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth")}}
+
Width of lines. Default 1.0
+
{{domxref("CanvasRenderingContext2D.lineCap")}}
+
Type of endings on the end of lines. Possible values: butt (default), round, square.
+
{{domxref("CanvasRenderingContext2D.lineJoin")}}
+
Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default).
+
{{domxref("CanvasRenderingContext2D.miterLimit")}}
+
Miter limit ratio. Default 10.
+
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
+
Returns the current line dash pattern array containing an even number of non-negative numbers.
+
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
+
Sets the current line dash pattern.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+
Specifies where to start a dash array on a line.
+
+ +

Text styles

+ +

The following properties control how text is laid out.

+ +
+
{{domxref("CanvasRenderingContext2D.font")}}
+
Font setting. Default value 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign")}}
+
Text alignment setting. Possible values: start (default), end, left, right or center.
+
{{domxref("CanvasRenderingContext2D.textBaseline")}}
+
Baseline alignment setting. Possible values: top, hanging, middle, alphabetic (default), ideographic, bottom.
+
{{domxref("CanvasRenderingContext2D.direction")}}
+
Directionality. Possible values: ltr, rtl, inherit (default).
+
+ +

Fill and stroke styles

+ +

Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle")}}
+
Color or style to use inside shapes. Default #000 (black).
+
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
+
Color or style to use for the lines around shapes. Default #000 (black).
+
+ +

Gradients and patterns

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+
Creates a linear gradient along the line given by the coordinates represented by the parameters.
+
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
+
Creates a radial gradient along the line given by the coordinates represented by the parameters.
+
{{domxref("CanvasRenderingContext2D.createPattern()")}}
+
Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.
+
+ +

Shadows

+ +
+
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
+
Specifies the blurring effect. Default 0
+
{{domxref("CanvasRenderingContext2D.shadowColor")}}
+
Color of the shadow. Default fully-transparent black.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+
Horizontal distance the shadow will be offset. Default 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+
Vertical distance the shadow will be offset. Default 0.
+
+ +

Paths

+ +

The following methods can be used to manipulate paths of objects.

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath()")}}
+
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
+
{{domxref("CanvasRenderingContext2D.closePath()")}}
+
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
+
{{domxref("CanvasRenderingContext2D.moveTo()")}}
+
Moves the starting point of a new sub-path to the (x, y) coordinates.
+
{{domxref("CanvasRenderingContext2D.lineTo()")}}
+
Connects the last point in the subpath to the x, y coordinates with a straight line.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
+
Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo() before creating the Bézier curve.
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
+
Adds a quadratic Bézier curve to the current path.
+
{{domxref("CanvasRenderingContext2D.arc()")}}
+
Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.arcTo()")}}
+
Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
+
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
+
Adds an ellipse to the path which is centered at (x, y) position with the radii radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.rect()")}}
+
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
+
+ +

Drawing paths

+ +
+
{{domxref("CanvasRenderingContext2D.fill()")}}
+
Fills the subpaths with the current fill style.
+
{{domxref("CanvasRenderingContext2D.stroke()")}}
+
Strokes the subpaths with the current stroke style.
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
+
If a given element is focused, this method draws a focus ring around the current path.
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
+
Scrolls the current path or a given path into the view.
+
{{domxref("CanvasRenderingContext2D.clip()")}}
+
Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.
+
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
+
Reports whether or not the specified point is contained in the current path.
+
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
+
Reports whether or not the specified point is inside the area contained by the stroking of a path.
+
+ +

Transformations

+ +

Objects in the CanvasRenderingContext2D rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.

+ +
+
{{domxref("CanvasRenderingContext2D.currentTransform")}}
+
Current transformation matrix ({{domxref("SVGMatrix")}} object).
+
{{domxref("CanvasRenderingContext2D.rotate()")}}
+
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
+
{{domxref("CanvasRenderingContext2D.scale()")}}
+
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
+
{{domxref("CanvasRenderingContext2D.translate()")}}
+
Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.
+
{{domxref("CanvasRenderingContext2D.transform()")}}
+
Multiplies the current transformation matrix with the matrix described by its arguments.
+
{{domxref("CanvasRenderingContext2D.setTransform()")}}
+
Resets the current transform to the identity matrix, and then invokes the transform() method with the same arguments.
+
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
+
Resets the current transform by the identity matrix.
+
+ +

Compositing

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
+
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
+
With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap.
+
+ +

Drawing images

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage()")}}
+
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
+
+ +

Pixel manipulation

+ +

See also the {{domxref("ImageData")}} object.

+ +
+
{{domxref("CanvasRenderingContext2D.createImageData()")}}
+
Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.
+
{{domxref("CanvasRenderingContext2D.getImageData()")}}
+
Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.
+
{{domxref("CanvasRenderingContext2D.putImageData()")}}
+
Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
+
+ +

Image smoothing

+ +
+
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
+
Image smoothing mode; if disabled, images will not be smoothed if scaled.
+
+ +

The canvas state

+ +

The CanvasRenderingContext2D rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:

+ +
+
{{domxref("CanvasRenderingContext2D.save()")}}
+
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
+
{{domxref("CanvasRenderingContext2D.restore()")}}
+
Restores the drawing style state to the last element on the 'state stack' saved by save().
+
{{domxref("CanvasRenderingContext2D.canvas")}}
+
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+
+ +

Hit regions

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Adds a hit region to the canvas.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Removes the hit region with the specified id from the canvas.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Removes all hit regions from the canvas.
+
+ +

Non-standard APIs

+ + + +

Most of these APIs are deprecated and will be removed in the future.

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.clearShadow()
+
Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.drawImageFromRect()
+
This is redundant with an equivalent overload of drawImage.
+
{{non-standard_inline}} CanvasRenderingContext2D.setAlpha()
+
Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setCompositeOperation()
+
Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineWidth()
+
Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineJoin()
+
Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineCap()
+
Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setMiterLimit()
+
Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setStrokeColor()
+
Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setFillColor()
+
Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setShadow()
+
Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDash
+
Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDashOffset
+
Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
+
Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.
+
+ + + +
+
{{non-standard_inline}} CanvasRenderingContext2D.getContextAttributes()
+
Inspired by the same WebGLRenderingContext method it returns an Canvas2DContextAttributes object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (true by default) to indicate that transparency is used in the canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
+
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.
+
+ +

WebKit only

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
+
The backing store size in relation to the canvas element. See High DPI Canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
+ +
+
+ +

Gecko only

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.
+
+ +

Prefixed APIs

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
+
Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
+
Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
+
See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDash
+
An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDashOffset
+
Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
+
Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
+
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozTextAlongPath()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
+ +

Internal APIs (chrome-context only)

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}
+
Renders a region of a XUL element into the canvas.
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
+
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
+
{{non-standard_inline}} CanvasRenderingContext2D.demote()
+
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
+
+ +

Internet Explorer

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("1")}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatOpera("9")}}{{CompatSafari("2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Compatibility notes

+ + + +

See also

+ + diff --git a/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html b/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html new file mode 100644 index 0000000000..bcb314845c --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html @@ -0,0 +1,208 @@ +--- +title: CanvasRenderingContext2D.isPointInPath() +slug: Web/API/CanvasRenderingContext2D/isPointInPath +translation_of: Web/API/CanvasRenderingContext2D/isPointInPath +--- +
{{APIRef}}
+ +

Il metodo CanvasRenderingContext2D.isPointInPath() delle API Canvas 2D controlla se un punto specificato cade all'interno del path corrente.

+ +

Sintassi

+ +
boolean ctx.isPointInPath(x, y);
+boolean ctx.isPointInPath(x, y, algorithmo);
+
+boolean ctx.isPointInPath(path, x, y);
+boolean ctx.isPointInPath(path, x, y, algoritmo);
+
+ +

Parametri

+ +
+
x
+
La coordinata X del punto da controllare
+
y
+
La coordinata Y del punto da controllare
+
Algoritmo
+
La'lgoritmo con cui viene verificato se il punto cade all'interno del path.
+ Valori possibili: +
    +
  • "nonzero": La regola non-zero ,  valore predefinito.
    • +
  • "evenodd": La regola even-odd .
    • +
+
+
path
+
Il {{domxref("Path2D")}} path da usare come path corrente.
+
+ +

Restituisce

+ +
+
{{jsxref("Boolean")}}
+
+

Un Boolean, che sarà true (vero) se il punto cade all'interno della forma, altrimenti restitiusce false (falso).

+
+
+ +

Esempi

+ +

Uso del metodo isPointInPath

+ +

Questa è una semplice snippet che usa il metodo isPointInPath per controllare se un punto cade o no sulla forma corrente.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true
+
+ +

Modifica il codice qui sotto, e guarda live come cambia il canvas: per guardare i log apri la tua console

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ispointinpath", "CanvasRenderingContext2D.isPointInPath")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Parametro path{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(31) }}{{ CompatNo }}{{ CompatVersionUnknown() }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Parametro path{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile(31) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Note di compatibilità

+ + + +

Vedi anche

+ + diff --git a/files/it/web/api/closeevent/index.html b/files/it/web/api/closeevent/index.html new file mode 100644 index 0000000000..4d534f6858 --- /dev/null +++ b/files/it/web/api/closeevent/index.html @@ -0,0 +1,197 @@ +--- +title: CloseEvent +slug: Web/API/CloseEvent +translation_of: Web/API/CloseEvent +--- +

{{APIRef("Websockets API")}}

+ +

Un evento di tipo CloseEvent viene inviato al client tramite WebSockets in fase di chiusura della connessione. Questo viene ricevuto dal listener registrato sull'attributo onclose dell'oggetto di tipo WebSocket.

+ +

Costruttore

+ +
+
{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}
+
Crea un nuovo CloseEvent.
+
+ +

Proprietà

+ +
+
{{domxref("CloseEvent.code")}} {{readOnlyInline}}
+
Restituisce un unsigned short che contiene il codice di chiusura inviato dal server. Questi sono i valori ammessi. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Status codeNameDescription
0–999 Riservati e non usati.
1000CLOSE_NORMALChiusura normale; la connessione si è conclusa normalmente, qualsiasi fosse il suo scopo.
1001CLOSE_GOING_AWAYL'endpoint se ne è andato, o per un errore del server oppure perché la pagina che ha aperto la connessione non è più attiva.
1002CLOSE_PROTOCOL_ERRORL'endpoint ha terminato la connessione per un errore di protocollo.
1003CLOSE_UNSUPPORTEDLa connessione è stata terminata perché l'endpoint ha ricevuto dei dati che non può accettare (per esempio, dati binari a fronte di un endpoint che consuma solo testo).
1004 Riservato. In futuro potrebbe esserne rivelato l'uso.
1005CLOSE_NO_STATUSRiservato. Indica che non è stato ricevuto nessuno stato di chiusura sebbene fosse atteso.
1006CLOSE_ABNORMALRiservato. Usato per indicare che la connessione è stata chiusa in modo anomalo (cioè, cioè senza l'invio del frame di chiusura) dove invece era atteso un codice di chiusura.
1007 L'endpoint ha terminato la connessione perché ha ricevuto un messaggio con dati inconsistenti (per esempio, dati non-UTF-8 all'interno di un messaggio testuale).
1008 L'endpoint ha terminato la connessione perché ha ricevuto un messaggio che viola la sua politica. E' un codice generico, quando 1003 e 1009 non sono adatti.
1009CLOSE_TOO_LARGEL'endpoint ha terminato la connessione perché ha ricevuto un frame di dati troppo grande.
1010 Il client ha terminato la connessione perché era attesa una negoziazione di una o più "estensioni" del protocollo che però non è avvenuta.
1011 Il server ha terminato la connessione perché ha incontrato una condizione inattesa che gli ha impedito di completare la richiesta.
1012–1014 Riservati per usi futuri dallo standard WebSocket.
1015 Riservato. Indica che la connessione è stata chiusa a causa di un fallimento dell'handshake TLS (per esempio, il certificato del server non può essere verificato).
1016–1999 Riservati per usi futuri dallo standard WebSocket.
2000–2999 Riservati per estensioni WebSocket.
3000–3999 Disponibili per librerie e framework. Meglio non usarli nelle applicazioni.
4000–4999 Disponibili per essere utilizzati dalle applicazioni.
+
+
{{domxref("CloseEvent.reason")}} {{readOnlyInline}}
+
Restituisce un {{ domxref("DOMString") }} che indica la ragione per cui il server ha chiuso la connessione. Questo dipende dal particolare server e sotto-protocollo.
+
{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}
+
Restituisce un {{jsxref("Boolean")}} che indica se la connessione è stata chiusa senza problemi o meno.
+
+ +

 

+ +

Compatibilità con i browser

+ +

 

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatUnknown() }}{{ CompatGeckoDesktop("8.0") }} [1][2]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Prima di Gecko 8.0 {{ geckoRelease("8.0") }}, Gecko inviava l'evento WebSocket {{event("close")}} come semplice evento. Il supporto al CloseEvent è stato implementato in Gecko 8.0.

+ +

[2] Prima di Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko restituiva il codice di chiusura CLOSE_NORMAL anche quando il canale veniva chiuso a causa di un errore inatteso, o anche a causa di un errore non coperto dalla specifica. Adesso viene restituito CLOSE_GOING_AWAY.

+ +

Vedi anche

+ + + +

 

diff --git a/files/it/web/api/console/index.html b/files/it/web/api/console/index.html new file mode 100644 index 0000000000..61521af0f3 --- /dev/null +++ b/files/it/web/api/console/index.html @@ -0,0 +1,294 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - Debugging + - Interface + - NeedsTranslation + - Reference + - TopicStub + - console + - web console +translation_of: Web/API/Console +--- +
{{APIRef("Console API")}}
+ +

The Console object provides access to the browser's debugging console (e.g. the Web Console in Firefox). The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.

+ +

The Console object can be accessed from any global object. {{domxref("Window")}} on browsing scopes and {{domxref("WorkerGlobalScope")}} as specific variants in workers via the property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as simply console. For example:

+ +
console.log("Failed to open the specified link")
+ +

This page documents the {{anch("Methods")}} available on the Console object and gives a few {{anch("Usage")}} examples.

+ +

{{AvailableInWorkers}}

+ +

Methods

+ +
+
{{domxref("Console.assert()")}}
+
Log a message and stack trace to console if the first argument is false.
+
{{domxref("Console.clear()")}}
+
Clear the console.
+
{{domxref("Console.count()")}}
+
Log the number of times this line has been called with the given label.
+
{{domxref("Console.countReset()")}}
+
Resets the value of the counter with the given label.
+
{{domxref("Console.debug()")}}
+
Outputs a message to the console with the log level "debug". +
Note: Starting with Chromium 58 this method only appears in Chromium browser consoles when level "Verbose" is selected.
+
+
{{domxref("Console.dir()")}}
+
Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.
+
{{domxref("Console.dirxml()")}}
+
+

Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not possible.

+
+
{{domxref("Console.error()")}}
+
Outputs an error message. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
An alias for error().
+
{{domxref("Console.group()")}}
+
Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd().
+
{{domxref("Console.groupCollapsed()")}}
+
Creates a new inline group, indenting all following output by another level. However, unlike group() this starts with the inline group collapsed requiring the use of a disclosure button to expand it. To move back out a level, call groupEnd().
+
{{domxref("Console.groupEnd()")}}
+
Exits the current inline group.
+
{{domxref("Console.info()")}}
+
Informative logging of information. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.log()")}}
+
For general output of logging information. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.profile()")}} {{Non-standard_inline}}
+
Starts the browser's built-in profiler (for example, the Firefox performance tool). You can specify an optional name for the profile.
+
{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}
+
Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the Firefox performance tool).
+
{{domxref("Console.table()")}}
+
Displays tabular data as a table.
+
{{domxref("Console.time()")}}
+
Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
+
{{domxref("Console.timeEnd()")}}
+
Stops the specified timer and logs the elapsed time in seconds since it started.
+
{{domxref("Console.timeLog()")}}
+
Logs the value of the specified timer to the console.
+
{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
+
Adds a marker to the browser's Timeline or Waterfall tool.
+
{{domxref("Console.trace()")}}
+
Outputs a stack trace.
+
{{domxref("Console.warn()")}}
+
Outputs a warning message. You may use string substitution and additional arguments with this method.
+
+ +

Usage

+ +

Outputting text to the console

+ +

The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods respectively. Each of these results in output styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.

+ +

There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of objects to replace them.

+ +

Outputting a single object

+ +

The simplest way to use the logging methods is to output a single object:

+ +
var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+
+ +

The output looks something like this:

+ +
[09:27:13.475] ({str:"Some text", id:5})
+ +

Outputting multiple objects

+ +

You can also output multiple objects by simply listing them when calling the logging method, like this:

+ +
var car = "Dodge Charger";
+var someObject = { str: "Some text", id: 5 };
+console.info("My first car was a", car, ". The object is:", someObject);
+ +

This output will look like this:

+ +
[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})
+
+ +

Using string substitutions

+ +

Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:

+ + + + + + + + + + + + + + + + + + + + + + + + +
Substitution stringDescription
%o or %OOutputs a JavaScript object. Clicking the object name opens more information about it in the inspector.
%d or %iOutputs an integer. Number formatting is supported, for example  console.log("Foo %.2d", 1.1) will output the number as two significant figures with a leading 0: Foo 01
%sOutputs a string.
%fOutputs a floating-point value. Formatting is supported, for example  console.log("Foo %.2f", 1.1) will output the number to 2 decimal places: Foo 1.10
+ +
+

Note: Precision formatting doesn't work in Chrome

+
+ +

Each of these pulls the next argument after the format string off the parameter list. For example:

+ +
for (var i=0; i<5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+
+ +

The output looks like this:

+ +
[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+
+ +

Styling console output

+ +

You can use the %c directive to apply a CSS style to console output:

+ +
console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
+ +
The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.
+ +
 
+ +
+ +
 
+ +
+

Note: Quite a few CSS properties are supported by this styling; you should experiment and see which ones prove useful.

+
+ +
 
+ +
{{h3_gecko_minversion("Using groups in the console", "9.0")}}
+ +

You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call console.group(). The console.groupCollapsed() method is similar but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.

+ +
Note: Collapsed groups are not supported yet in Gecko; the groupCollapsed() method is the same as group() at this time.
+ +

To exit the current group, simply call console.groupEnd(). For example, given this code:

+ +
console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+
+ +

The output looks like this:

+ +

nesting.png

+ +
{{h3_gecko_minversion("Timers", "10.0")}}
+ +

In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the console object. To start a timer, call the console.time() method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the console.timeEnd() method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.

+ +

For example, given this code:

+ +
console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");
+
+ +

Will log the time needed by the user to dismiss the alert box, log the time to the console, wait for the user to dismiss the second alert, and then log the ending time to the console:

+ +

timerresult.png

+ +

Notice that the timer's name is displayed both when the timer is started and when it's stopped.

+ +
Note: It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.
+ +

Stack traces

+ +

The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:

+ +
function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+
+ +

The output in the console looks something like this:

+ +

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Console API')}}{{Spec2('Console API')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Console")}}

+ +

Notes

+ + + +

See also

+ + + +

Other implementations

+ + diff --git a/files/it/web/api/console/log/index.html b/files/it/web/api/console/log/index.html new file mode 100644 index 0000000000..4229185824 --- /dev/null +++ b/files/it/web/api/console/log/index.html @@ -0,0 +1,88 @@ +--- +title: console.log() +slug: Web/API/Console/log +translation_of: Web/API/Console/log +--- +
{{APIRef("Console API")}}
+ +

Il metodo  log() di {{domxref("Console")}} stampa un messaggio sulla web console. Il messaggio può essere una semplice stringa (opzionalmente, anche con valori sostituibili), o può essere uno qualsiasi o più oggetti JavaScript.

+ +

{{AvailableInWorkers}}

+ +

Sintassi

+ +
console.log(obj1 [, obj2, ..., objN]);
+console.log(msg [, subst1, ..., substN]);
+
+ +

Parametri

+ +
+
obj1 ... objN
+
Una lista di oggetti JavaScript da stampare. La rappresentazione sotto forma di stringa di ciascuno di questi oggetti sarà messa in coda nell'ordine presentato e stampata. Perfavore fai attenzione che se tu stampi degli oggetti nelle ultime versioni si Chrome e Firefox quello che otterrai sarà un riferimento all'oggetto, che non necessariamente è il 'valore' dell'oggetto nel momento della chiamata di console.log(), ma è il valore dell'oggetto al momento in cui tu apri la console.
+
msg
+
Una stringa JavaScript contenente zero o più stringhe da sostituire.
+
subst1 ... substN
+
Oggetti JavaScript con i quali verranno sostituite le stringhe da sostituire in msg. Questo ti offre controlli aggiuntivi sul formato dell'output
+
+ +

Vedi Stampare del testo sulla Console nella documentazione di {{domxref("console")}} per maggiori dettagli.

+ +

Differenza tra log() e dir()

+ +

Ti potresti esser chiesto qual è la differenza tra {{domxref("console.dir()")}} e console.log().

+ +

Un'altra utile differenza esiste in Chrome quando invii elementi DOM alla console.

+ +

+ +

Nota bene:

+ + + +

Specificamente, console.log offre un trattamento speciale agli elementi del DOM, mentre console.dir non lo fa. Ė spesso utile quando si prova a vedere la rappresentazione completa degli oggetti JS del DOM.

+ +

Ulteriori informazioni si possono trovare sulle Chrome Console API reference su questa e altre funzioni.

+ +

Registrare (loggare) gli oggetti

+ +

Non usare console.log(obj), usa console.log(JSON.parse(JSON.stringify(obj))).

+ +

In questo modo sarai sicuro di visulizzare il valore di obj al momento in cui lo stai registrando (loggando). Altrimenti, svariati browser offrono una vista live che aggiorna costantemente i valori non appena cambiano. Potrebbe non essere quel che cerchi.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName("Console API", "#log", "console.log()")}}{{Spec2("Console API")}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Console.log")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/console/table/index.html b/files/it/web/api/console/table/index.html new file mode 100644 index 0000000000..d2ae5bbce2 --- /dev/null +++ b/files/it/web/api/console/table/index.html @@ -0,0 +1,143 @@ +--- +title: Console.table() +slug: Web/API/Console/table +translation_of: Web/API/Console/table +--- +
 {{APIRef("Console API")}}
+ +

Visualizza dati tabulari come una tabella.

+ +

Questa funzione richiede un argomento obbligatorio data, che deve essere un array di oggetti, ed un parametro opzionale columns.

+ +

La funzione visualizza data come una tabella ed ogni elemento dell'array (o ogni sua proprietà numerabile se data è un oggetto) sarà una riga della tabella.

+ +

La prima colonna della tabella rappresenta l'etichetta (index). Se data è un array allora il valore sarà il suo indice nell'array. Se, invece, data è un oggetto, il suo valore sarà il nome della proprietà. Nota che (in Firefox) console.table limita a 1000 la visualizzazione delle righe (la prima riga contiene i nomi delle etichette).

+ +

{{AvailableInWorkers}}

+ +

Collezioni di tipi di primitive

+ +

L'argomento data può essere un array o un oggetto.

+ +
// array di stringhe
+
+console.table(["apples", "oranges", "bananas"]);
+ +

+ +
// un oggetto le cui proprietà sono stringhe
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);
+ +

+ +

Collezioni di tipi composti

+ +

Se l'elemento nell'array o le proprietà nell'oggetto sono a loro volta array o oggetti, allora i loro elementi o proprietà sono enumerati nella riga, uno per colonna:

+ +
// un array di arrays
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);
+ +

Table displaying array of arrays

+ +
// un array di oggetti
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);
+ +

Nota che se l'array contiene oggetti, allora le colonne sono etichettate con il nome della proprietà.

+ +

Table displaying array of objects

+ +
// un oggetto le cui proprietà sono oggetti
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);
+ +

Table displaying object of objects

+ +

Restringimento delle colonne visualizzate

+ +

Di default, console.table() visualizza la lista di elementi in ogni riga. Puoi usare il parametro opzionale columns per selezionare un sottoinsieme delle colonne da visualizzare:

+ +
// un array di oggetti, visualizzando solo firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);
+ +

Table displaying array of objects with filtered output

+ +

Ordinamento delle colonne

+ +

Puoi ordinare la tabella in base ad una particolare colonna cliccando sulla sua etichetta.

+ +

Sintassi

+ +
console.table(data [, columns]);
+
+ +

Parametri

+ +
+
data
+
Il dato da visualizzare. Deve essere un oggetto o un array.
+
columns
+
Un array contenente i nomi delle colonne da includere nell'output.
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatoCommenti
{{SpecName("Console API", "#table", "console.table()")}}{{Spec2("Console API")}}Initial definition
+ +

Compatibilità dei browser

+ +
+ + +

{{Compat("api.Console.table")}}

+
diff --git a/files/it/web/api/crypto/index.html b/files/it/web/api/crypto/index.html new file mode 100644 index 0000000000..0add9721d2 --- /dev/null +++ b/files/it/web/api/crypto/index.html @@ -0,0 +1,68 @@ +--- +title: Crypto +slug: Web/API/Crypto +tags: + - API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Crypto API +translation_of: Web/API/Crypto +--- +

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

+ +

The Crypto interface represents basic cryptography features available in the current context. It allows access to a cryptographically strong random number generator and to cryptographic primitives.

+ +

An object with this interface is available on Web context via the {{domxref("Window.crypto")}} property.

+ +

Properties

+ +

This interface implements properties defined on {{domxref("RandomSource")}}.

+ +
+
{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}
+
Returns a {{domxref("SubtleCrypto")}} object providing access to common cryptographic primitives, like hashing, signing, encryption or decryption.
+
+ +

Methods

+ +

This interface implements methods defined on {{domxref("RandomSource")}}.

+ +
+
{{domxref("Crypto.getRandomValues()")}}
+
Fills the passed {{ jsxref("TypedArray") }} with cryptographically sound random values.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}{{Spec2("Web Crypto API")}}Initial definition
+ +

Browser Compatibility

+ +
+ + +

{{Compat("api.Crypto")}}

+
+ +

See Also

+ + diff --git a/files/it/web/api/crypto/subtle/index.html b/files/it/web/api/crypto/subtle/index.html new file mode 100644 index 0000000000..ae850ea329 --- /dev/null +++ b/files/it/web/api/crypto/subtle/index.html @@ -0,0 +1,52 @@ +--- +title: Crypto.subtle +slug: Web/API/Crypto/subtle +tags: + - API + - Crittografia + - D + - Proprietà + - Riferimenti + - Sola lettura + - Web Crypto API +translation_of: Web/API/Crypto/subtle +--- +

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

+ +

La proprietà in sola lettura Crypto.subtle restituisce un oggetto {{domxref("SubtleCrypto")}}, rendendo disponibili le funzioni crittografiche.

+ +

Syntax

+ +
var crypto = crypto.subtle;
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}{{ Spec2('Web Crypto API') }}Definizione iniziale.
+ +

Browser compatibility

+ + + +

{{Compat("api.Crypto.subtle")}}

+ +

See also

+ + diff --git a/files/it/web/api/datatransfer/getdata/index.html b/files/it/web/api/datatransfer/getdata/index.html new file mode 100644 index 0000000000..635da432ed --- /dev/null +++ b/files/it/web/api/datatransfer/getdata/index.html @@ -0,0 +1,161 @@ +--- +title: DataTransfer.getData() +slug: Web/API/DataTransfer/getData +translation_of: Web/API/DataTransfer/getData +--- +
+

 

+{{APIRef("HTML DOM")}}
+ +

Il metodo DataTransfer.getData() recupera i dati del trascinamento  (come {{domxref("DOMString")}}) per il data type specificato. Se l'operazione di trascinamento non include dati, questo metodo restituisce una stringa vuota.

+ +

Esempi di tipi di data types sono text/plain e text/uri-list.

+ +

Sintassi

+ +
DOMString dataTransfer.getData(format);
+
+ +

Argomenti

+ +
+
formato
+
Una {{domxref("DOMString")}} rappresentante il  tipo di dato da recuperare.
+
+ +

Valore restituito

+ +
+
{{domxref("DOMString")}}
+
Una {{domxref("DOMString")}} rappresentante i dati trascinati per il formato specificato. Se l'operazione di trascinamento non ha dati o l'operazione non ha dati per il formato specificato, questo metodo restituisce una stringa vuota.
+
+ +

Esempio

+ +

Questo esempio mostra l'uso dell'oggetto {{domxref("DataTransfer")}} e dei metodi {{domxref("DataTransfer.getData()","getData()")}} e {{domxref("DataTransfer.setData()","setData()")}} .

+ +

HTML

+ +
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
+    <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span>
+</div>
+<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+
+ +

CSS

+ +
#div1, #div2 {
+    width:100px;
+    height:50px;
+    padding:10px;
+    border:1px solid #aaaaaa;
+}
+
+ +

JavaScript

+ +
function allowDrop(allowdropevent) {
+    allowdropevent.target.style.color = 'blue';
+    allowdropevent.preventDefault();
+}
+
+function drag(dragevent) {
+    dragevent.dataTransfer.setData("text", dragevent.target.id);
+    dragevent.target.style.color = 'green';
+}
+
+function drop(dropevent) {
+    dropevent.preventDefault();
+    var data = dropevent.dataTransfer.getData("text");
+    dropevent.target.appendChild(document.getElementById(data));
+    document.getElementById("drag").style.color = 'black';
+}
+
+ +

Result

+ +

{{ EmbedLiveSample('Esempio', 600, '', '', 'Web/API/DataTransfer/getData') }}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-getdata", "getData()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dom-datatransfer-getdata", "getData()")}}{{Spec2("HTML5.1")}}definizione iniziale
+ +

Compatibilità dei browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support43.5{{CompatGeckoDesktop(10)}} [1]123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(10)}}[1]{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] in versioni di Firefox precedenti alla 49, questo metodo restituisce sempre una lista vuota se il tipo mime non è in una white list.

+ +

Vedere anche

+ +

{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}

diff --git a/files/it/web/api/datatransfer/index.html b/files/it/web/api/datatransfer/index.html new file mode 100644 index 0000000000..a821dabb6a --- /dev/null +++ b/files/it/web/api/datatransfer/index.html @@ -0,0 +1,183 @@ +--- +title: DataTransfer +slug: Web/API/DataTransfer +tags: + - API + - NeedsMarkupWork + - NeedsTranslation + - Reference + - TopicStub + - Web Development + - drag and drop +translation_of: Web/API/DataTransfer +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. For more information about drag and drop, see HTML Drag and Drop API.

+ +

This object is available from the {{domxref("DragEvent.dataTransfer","dataTransfer")}} property of all {{domxref("DragEvent","drag events")}}. It cannot be created separately (i.e. there is no constructor for this object).

+ +

Properties

+ +

Standard properties

+ +
+
{{domxref("DataTransfer.dropEffect")}}
+
Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be none copy link or move.
+
{{domxref("DataTransfer.effectAllowed")}}
+
Provides all of the types of operations that are possible. Must be one of none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized.
+
{{domxref("DataTransfer.files")}}
+
Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.
+
{{domxref("DataTransfer.items")}} {{readonlyInline}}
+
Gives a {{domxref("DataTransferItemList")}} object which is a list of all of the drag data.
+
{{domxref("DataTransfer.types")}} {{readonlyInline}}
+
An array of {{domxref("DOMString","string")}} giving the formats that were set in the {{event("dragstart")}} event.
+
+ +

Gecko properties

+ +

{{SeeCompatTable}}

+ +
Note: All of the properties in this section are Gecko-specific.
+ +
+
{{domxref("DataTransfer.mozCursor")}}
+
Gives the drag cursor's state. This is primarily used to control the cursor during tab drags.
+
{{domxref("DataTransfer.mozItemCount")}} {{readonlyInline}}
+
Gives the number of items in the drag operation.
+
{{domxref("DataTransfer.mozSourceNode")}} {{readonlyInline}}
+
The {{ domxref("Node") }} over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is null for external drags or if the caller can't access the node.
+
{{domxref("DataTransfer.mozUserCancelled")}} {{readonlyInline}}
+
This property applies only to the dragend event, and is true if the user canceled the drag operation by pressing escape. It will be false in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location.
+
+ +

Methods

+ +

Standard methods

+ +
+
{{domxref("DataTransfer.clearData()")}}
+
Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.
+
{{domxref("DataTransfer.getData()")}}
+
Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.
+
{{domxref("DataTransfer.setData()")}}
+
Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.
+
{{domxref("DataTransfer.setDragImage()")}}
+
Set the image to be used for dragging if a custom one is desired.
+
+ +

Gecko methods

+ +

{{SeeCompatTable}}

+ +
Note: All of the methods in this section are Gecko-specific.
+ +
+
{{domxref("DataTransfer.addElement()")}}
+
Sets the drag source to the given element.
+
{{domxref("DataTransfer.mozClearDataAt()")}}
+
Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.
+
{{domxref("DataTransfer.mozGetDataAt()")}}
+
Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.
+
{{domxref("DataTransfer.mozSetDataAt()")}}
+
A data transfer may store multiple items, each at a given zero-based index. mozSetDataAt() may only be called with an index argument less than mozItemCount in which case an existing item is modified, or equal to mozItemCount in which case a new item is added, and the mozItemCount is incremented by one.
+
{{domxref("DataTransfer.mozTypesAt()")}}
+
Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.
+
+ +

Example

+ +

Every method and property listed in this document has its own reference page and each reference page either directly includes an example of the interface or has a link to an example.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#datatransfer','DataTransfer')}}{{Spec2('HTML WHATWG')}}mozCursor, mozItemCount, mozSourceNode, mozUserCancelled, addElement(), mozClearDataAt(), mozGetDataAt(), mozSetDataAt() and mozTypesAt are Gecko specific.
{{SpecName('HTML5.1', 'editing.html#the-datatransfer-interface','DataTransfer')}}{{Spec2('HTML5.1')}}Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support43.5 [2]10 [1] [2]123.1 [2]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1]Partial support refers to not supporting {{domxref("DataTransfer.setDragImage()")}} [CanIUse.com]

+ +

[2]Does not support {{domxref("DataTransfer.items")}} property

+ +

See also

+ + diff --git a/files/it/web/api/document/anchors/index.html b/files/it/web/api/document/anchors/index.html new file mode 100644 index 0000000000..2b7261420d --- /dev/null +++ b/files/it/web/api/document/anchors/index.html @@ -0,0 +1,31 @@ +--- +title: document.anchors +slug: Web/API/Document/anchors +translation_of: Web/API/Document/anchors +--- +
{{APIRef("DOM")}}
+ +

anchors restituisce un Array contenente tutte le ancore presenti nel documento.

+ +

Sintassi

+ +
nodeList = document.anchors
+
+ +

Esempio

+ +
if ( document.anchors.length >= 5 ) {
+    dump("Ho trovato troppe ancore");
+    window.location = "http://www.google.com";
+}
+
+ +

Note

+ +

Per ragioni di compatibilità all'indietro, l'array restituito contiene solo le ancore che hanno un attributo name e non quelle che hanno solo l'attributo id.

+ +

Specifiche

+ +

DOM Level 2 HTML: anchors

+ +

{{ languages( { "ja": "ja/DOM/document.anchors", "pl": "pl/DOM/document.anchors" } ) }}

diff --git a/files/it/web/api/document/applets/index.html b/files/it/web/api/document/applets/index.html new file mode 100644 index 0000000000..47328fbe65 --- /dev/null +++ b/files/it/web/api/document/applets/index.html @@ -0,0 +1,25 @@ +--- +title: document.applets +slug: Web/API/Document/applets +translation_of: Web/API/Document/applets +--- +
{{APIRef("DOM")}}
+ +

applets restituisce un array contenente le applet presenti nel documento.

+ +

Sintassi

+ +
nodeList = document.applets
+
+ +

Esempio

+ +
// ( voglio la seconda applet )
+la_mia_applet_java = document.applets[1];
+
+ +

Specifiche

+ +

DOM Level 2 HTML: applets

+ +

{{ languages( { "pl": "pl/DOM/document.applets" } ) }}

diff --git a/files/it/web/api/document/body/index.html b/files/it/web/api/document/body/index.html new file mode 100644 index 0000000000..e13f8e1400 --- /dev/null +++ b/files/it/web/api/document/body/index.html @@ -0,0 +1,88 @@ +--- +title: Document.body +slug: Web/API/Document/body +tags: + - API + - DOM + - HTML DOM + - Proprietà + - Referenza +translation_of: Web/API/Document/body +--- +
{{APIRef("DOM")}}
+ +

La proprietà Document.body rappresenta il nodo {{HTMLElement("body")}} o {{HTMLElement("frameset")}} del documento corrente, o null se non esiste alcun elemento di questo tipo.

+ +

Sintassi

+ +
var objRef = document.body;
+document.body = objRef;
+ +

Esempio

+ +
// Dato questo HTML: <body id="oldBodyElement"></body>
+alert(document.body.id); // "oldBodyElement"
+
+var aNewBodyElement = document.createElement("body");
+
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+
+ +

Appunti

+ +

document.body è l'elemento che contiene il contenuto per il documento. Nei documenti con contenuto <body> restituisce l'elemento <body>, e nei documenti frameset, restituisce l'elemento <frameset> più esterno.

+ +

Anche se body è settabile, l'impostazione di un nuovo corpo su un documento rimuoverà efficacemente tutti i figli attuali dell'elemento <body>.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +
{{Compat("api.Document.body")}}
+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/characterset/index.html b/files/it/web/api/document/characterset/index.html new file mode 100644 index 0000000000..e2062ac971 --- /dev/null +++ b/files/it/web/api/document/characterset/index.html @@ -0,0 +1,32 @@ +--- +title: document.characterSet +slug: Web/API/Document/characterSet +translation_of: Web/API/Document/characterSet +--- +
{{APIRef("DOM")}}
+ +

Restituisce la codifica dei caratteri utilizzata per il documento corrente.

+ +

Sintassi

+ +
stringa = document.characterSet
+
+ +

Esempio

+ +
<button onclick="alert(document.characterSet);"
+>Mostra il set di caratteri</button>
+// restituisce il set di caratteri, come "ISO-8859-1" o "UTF-8"
+
+ +

Note

+ +

La codifica dei caratteri è il set di caratteri utilizzato per visualizzare il documento, che potrebbe essere differente dalla codifica specificata nella pagina (l'utente può reimpostare la codifica da utilizzare).

+ +

Per un elenco completo delle codifiche, si veda: http://www.iana.org/assignments/character-sets.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

+ +

{{ languages( { "pl": "pl/DOM/document.characterSet" } ) }}

diff --git a/files/it/web/api/document/close/index.html b/files/it/web/api/document/close/index.html new file mode 100644 index 0000000000..bc86c7bacc --- /dev/null +++ b/files/it/web/api/document/close/index.html @@ -0,0 +1,27 @@ +--- +title: document.close +slug: Web/API/Document/close +translation_of: Web/API/Document/close +--- +
{{APIRef("DOM")}}
+ +

document.close() termina la scrittura su un documento che è stato aperto con document.open().

+ +

Sintassi

+ +
document.close();
+
+ +

Esempio

+ +
// apro un documento per scrivervi sopra;
+// scrivo il contenuto sul documento;
+// chiudo il documento.
+document.open();
+document.write("<p>Testo da inserire...</p>");
+document.close();
+
+ +

Specifiche

+ +

DOM Level 2 HTML: close() Method

diff --git a/files/it/web/api/document/createelement/index.html b/files/it/web/api/document/createelement/index.html new file mode 100644 index 0000000000..649ba72fb3 --- /dev/null +++ b/files/it/web/api/document/createelement/index.html @@ -0,0 +1,139 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Referenza + - createElement + - metodo +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ +

In un documento HTML, il metodo document.createElement() crea l'elemento HTML specificato da tagName o un {{domxref("HTMLUnknownElement")}} se tagName non viene riconosciuto.

+ +
+

Note: In un documento XUL, crea l'elemento XUL specificato. In altri documenti, crea un elemento con un URI namespace null.

+
+ +

Sintassi

+ +
var element = document.createElement(tagName[, options]);
+
+ +

Parametri

+ +
+
tagName
+
Una stringa che specifica il tipo di elemento da creare. Il {{domxref("Node.nodeName", "nodeName")}} dell'elemento creato viene inizializzato con il valore di tagName. Non utilizzare nomi qualificati (come "html:a") con questo metodo. Quando chiamato su un documento HTML, createElement() converte tagName in minuscolo prima di creare l'elemento. In Firefox, Opera e Chrome, createElement(null) funziona come createElement("null").
+
options{{optional_inline}}
+
Un oggetto ElementCreationOptions opzionale contenente una singola proprietà denominata is, il cui valore è il nome del tag per un elemento personalizzato precedentemente definito utilizzando customElements.define(). Vedi {{anch("Esempio di componente Web")}} per ulteriori dettagli.
+
+ +

Valore di ritorno

+ +

Il nuovo {{domxref("Element")}}.

+ +

Esempi

+ +

Esempio basilare

+ +

Questo crea un nuovo <div> e lo inserisce prima dell'elemento con l'ID "div1".

+ +

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Lavorare con gli elementi||</title>
+</head>
+<body>
+  <div id="div1">Il testo sopra è stato creato dinamicamente.</div>
+</body>
+</html>
+
+ +

JavaScript

+ +
document.body.onload = addElement;
+
+function addElement() {
+  // crea un nuovo elemento div
+  var newDiv = document.createElement("div");
+  // ed assegnargli un contenuto
+  var newContent = document.createTextNode("Hi there and greetings!");
+  // aggiungi il nodo di testo al div appena creato
+  newDiv.appendChild(newContent);
+
+  // aggiungi l'elemento appena creato e il suo contenuto nel DOM
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}
+ +

{{EmbedLiveSample("Esempio_basilare", 500, 50)}}

+ +

Esempio di componente Web

+ +

Il seguente frammento di esempio è tratto dal nostro esempio di componente di espansione list-web (vedi anche live). In questo caso, il nostro elemento personalizzato estende {{domxref("HTMLUListElement")}}, che rappresenta l'elemento {{htmlelement("ul")}}.

+ +
// Crea una classe per l'elemento
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Chiama sempre super prima nel costruttore
+    super();
+
+    // definizione del costruttore lasciata fuori per brevità
+    ...
+  }
+}
+
+// Definisce il nuovo elemento
+customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+ +

Se volessimo creare un'istanza di questo elemento a livello di codice, utilizzeremmo una chiamata seguendo le linee seguenti:

+ +
let expandingList = document.createElement('ul', { is : 'expanding-list' })
+ +

Al nuovo elemento verrà assegnato un attributo is il cui valore è il nome del tag dell'elemento personalizzato.

+ +
+

Note: Per la retrocompatibilità con le versioni precedenti della specifica Elementi personalizzati, alcuni browser ti permetteranno di passare una stringa qui invece di un oggetto, dove il valore della stringa è il nome del tag dell'elemento personalizzato.

+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.createElement")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/createrange/index.html b/files/it/web/api/document/createrange/index.html new file mode 100644 index 0000000000..6c78f471f3 --- /dev/null +++ b/files/it/web/api/document/createrange/index.html @@ -0,0 +1,30 @@ +--- +title: document.createRange +slug: Web/API/Document/createRange +translation_of: Web/API/Document/createRange +--- +
{{APIRef("DOM")}}
+ +

Restituisce un nuovo oggetto Range.

+ +

Sintassi

+ +
range = document.createRange();
+
+ +

range è l'oggetto range creato.

+ +

Esempio

+ +
var range = document.createRange();
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+
+ +

Note

+ +

Una volta che un Range è stato creato, occorre impostare il punto iniziale e quello finale prima di poter utilizzare la maggior parte dei suoi metodi.

+ +

Specifiche

+ +

DOM Level 2 Range: DocumentRange.createRange

diff --git a/files/it/web/api/document/defaultview/index.html b/files/it/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..46f9ef20c0 --- /dev/null +++ b/files/it/web/api/document/defaultview/index.html @@ -0,0 +1,27 @@ +--- +title: document.defaultView +slug: Web/API/Document/defaultView +translation_of: Web/API/Document/defaultView +--- +
{{APIRef("DOM")}}
+ +

document.defaultView restituisce un riferimento all'AbstractView predefinita del documento, oppure null se non ne esiste una.

+ +

Sintassi

+ +
var vista = document.defaultView;
+
+ +

Questa proprietà è di sola lettura.

+ +

Note

+ +

document.defaultView fa parte dell'interfaccia DocumentView del DOM Level 2.

+ +

document.defaultView generalmente è un riferimento all'oggetto window del documento, però questo non è definito nella specifica è non può essere dato per scontato in ogni tipo di ambiente, o più precisamente in ogni browser.

+ +

Specifiche

+ +

DOM Level 2 defaultView

+ +

{{ languages( { "pl": "pl/DOM/document.defaultView" } ) }}

diff --git a/files/it/web/api/document/doctype/index.html b/files/it/web/api/document/doctype/index.html new file mode 100644 index 0000000000..e9393d19b6 --- /dev/null +++ b/files/it/web/api/document/doctype/index.html @@ -0,0 +1,27 @@ +--- +title: document.doctype +slug: Web/API/Document/doctype +translation_of: Web/API/Document/doctype +--- +
{{APIRef("DOM")}}
+ +

Restituisce la dichiarazione di tipo di documento (DTD) associata al documento corrente. L'oggetto restituito implementa l'interfaccia DocumentType.

+ +

Sintassi

+ +
doctype = document.doctype
+
+ +

doctype è un proprietà di sola lettura

+ +

Note

+ +

Questa proprietà restituisce null se non vi è alcun DTD associato al documento corrente.

+ +

Lo standard DOM level 2 non permette modifiche alla DTD.

+ +

Specifiche

+ +

DOM Level 2 Core: doctype

+ +

{{ languages( { "pl": "pl/DOM/document.doctype" } ) }}

diff --git a/files/it/web/api/document/documentelement/index.html b/files/it/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..e48895b7a0 --- /dev/null +++ b/files/it/web/api/document/documentelement/index.html @@ -0,0 +1,68 @@ +--- +title: Document.documentElement +slug: Web/API/Document/documentElement +translation_of: Web/API/Document/documentElement +--- +
{{ApiRef("DOM")}}
+ +

Document.documentElement ritorna l'{{domxref("Element")}} che è l'elemento principale di {{domxref("document")}} (per esempio, l'elemento {{HTMLElement("html")}} per i documenti HTML).

+ +

Sintassi

+ +
var element = document.documentElement;
+
+ +

Esempio

+ +
var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+
+// firstTier è la NodeList dei figli diretti dell'elemento root
+for (var i = 0; i < firstTier.length; i++) {
+   // fare qualcosa con ogni child diretto dell'elemento radice
+   // come firstTier[i]
+}
+ +

Appunti

+ +

Per qualsiasi documento HTML non vuoto, document.documentElement sarà sempre un elemento {{HTMLElement("html")}}. Per qualsiasi documento XML non vuoto, document.documentElement sarà sempre qualunque elemento sia l'elemento radice del documento.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}{{Spec2('DOM4')}} 
{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}{{Spec2('DOM3 Core')}} 
{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}{{Spec2('DOM2 Core')}} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.documentElement")}}

diff --git a/files/it/web/api/document/firstchild/index.html b/files/it/web/api/document/firstchild/index.html new file mode 100644 index 0000000000..ed5a34a883 --- /dev/null +++ b/files/it/web/api/document/firstchild/index.html @@ -0,0 +1,40 @@ +--- +title: document.firstChild +slug: Web/API/Document/firstChild +translation_of: Web/API/Node/firstChild +--- +
{{APIRef("DOM")}}
+ +

document.firstChild restituisce il primo nodo figlio del documento.

+ +

Sintassi

+ +
child = document.firstChild
+
+ +

Parametri

+ + + +

Esempio

+ +
function primoFiglio() {
+  f = document.firstChild;
+  alert(f.tagName);
+}
+// restituisce [object DocumentType] se il documento ha una DTD
+// altrimenti restituisce "HTML"
+
+// Per un documento HTML che ha una DTD
+// document.firstChild
+// restituisce [object DocumentType]
+
+
+ +

Specifiche

+ +

DOM Level 2 Core: firstChild

+ +

{{ languages( { "pl": "pl/DOM/document.firstChild" } ) }}

diff --git a/files/it/web/api/document/forms/index.html b/files/it/web/api/document/forms/index.html new file mode 100644 index 0000000000..cda3146a42 --- /dev/null +++ b/files/it/web/api/document/forms/index.html @@ -0,0 +1,128 @@ +--- +title: Document.forms +slug: Web/API/Document/forms +tags: + - API + - DOM + - Document + - Forms + - HTML DOM + - HTML forms + - Proprietà + - Referenza +translation_of: Web/API/Document/forms +--- +

La proprietà di sola lettura forms dell'interfaccia {{domxref("Document")}} restituisce una {{domxref("HTMLCollection")}} che elenca tutti gli elementi {{HTMLElement("form")}} contenuti nel documento.

+ +
+

Note: Allo stesso modo, è possibile accedere a un elenco di elementi di input utente di un modulo utilizzando la proprietà {{domxref("HTMLFormElement.elements")}}.

+
+ +

Sintassi

+ +
collection = document.forms;
+ +

Valore

+ +

Un oggetto {{domxref("HTMLCollection")}} che elenca tutti i form del documento. Ogni elemento della collezione è un {{domxref("HTMLFormElement")}} che rappresenta un singolo elemento <form>.

+ +

Se il documento non ha moduli, la raccolta restituita è vuota, con una lunghezza pari a zero.

+ +

Esempi

+ +

Ottenere informazioni sul modulo

+ +
<!DOCTYPE html>
+<html lang="en">
+
+<head>
+<title>document.forms example</title>
+</head>
+
+<body>
+
+<form id="robby">
+  <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" />
+</form>
+
+<form id="dave">
+  <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" />
+</form>
+
+<form id="paul">
+  <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" />
+</form>
+
+</body>
+</html>
+
+ +

Ottenere un elemento all'interno di un modulo

+ +
var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];
+
+ +

Accesso al modulo con nome

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>document.forms example</title>
+</head>
+
+<body>
+
+<form name="login">
+  <input name="email" type="email">
+  <input name="password" type="password">
+  <button type="submit">Log in</button>
+</form>
+
+<script>
+  var loginForm = document.forms.login; // Or document.forms['login']
+  loginForm.elements.email.placeholder = 'test@example.com';
+  loginForm.elements.password.placeholder = 'password';
+</script>
+</body>
+</html>
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}{{ Spec2('DOM2 Events') }}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.forms")}}

+ +

Vedi anche

+ + + +
{{APIRef("DOM")}}
diff --git a/files/it/web/api/document/getelementbyid/index.html b/files/it/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..bdcfac73a5 --- /dev/null +++ b/files/it/web/api/document/getelementbyid/index.html @@ -0,0 +1,149 @@ +--- +title: Document.getElementById() +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Document + - Elementi + - Referenza + - Web + - getElementById + - id + - metodo +translation_of: Web/API/Document/getElementById +--- +
{{ ApiRef("DOM") }}
+ +

Il metodo {{domxref("Document")}} getElementById() restituisce un oggetto {{domxref("Element")}} che rappresenta l'elemento la cui proprietà {{domxref("Element.id", "id")}} corrisponde alla stringa specificata. Poiché gli ID degli elementi devono essere univoci se specificati, sono un modo utile per accedere rapidamente a un elemento specifico.

+ +

Se hai bisogno di accedere a un elemento che non ha un ID, puoi usare {{domxref("Document.querySelector", "querySelector()")}} per trovare l'elemento usando un qualsiasi {{Glossary("CSS selector", "selettore")}}.

+ +

Sintassi

+ +
var element = document.getElementById(id);
+
+ +

Parametri

+ +
+
id
+
L'ID dell'elemento da localizzare. L'ID è una stringa sensibile al maiuscolo/minuscolo, che è univoca all'interno del documento; solo un elemento può avere un dato ID.
+
+ +

Valore di ritorno

+ +

Un oggetto {{domxref("Element")}} che descrive l'oggetto elemento DOM che corrisponde all'ID specificato o null se nel documento non è stato trovato alcun elemento corrispondente.

+ +

Esempio

+ +

HTML

+ +
<html>
+<head>
+  <title>getElementById example</title>
+</head>
+<body>
+  <p id="para">text here</p>
+  <button onclick="changeColor('blue');">blue</button>
+  <button onclick="changeColor('red');">red</button>
+</body>
+</html>
+ +

JavaScript

+ +
function changeColor(newColor) {
+  var elem = document.getElementById('para');
+  elem.style.color = newColor;
+}
+ +

Risultato

+ +

{{ EmbedLiveSample('Esempio', 250, 100) }}

+ +

Note di utilizzo

+ +

La maiuscola di "Id" nel nome di questo metodo deve essere corretta affinché il codice funzioni; getElementByID() non è valido e non funzionerà, per quanto naturale possa sembrare.

+ +

A differenza di altri metodi di ricerca degli elementi come {{domxref("Document.querySelector()")}} e {{domxref("Document.querySelectorAll()")}}, getElementById() è disponibile solo come metodo per l'oggetto globale document, e non è disponibile come metodo su tutti gli oggetti elemento nel DOM. Poiché gli ID devono essere univoci nell'intero documento, non sono necessarie versioni "locali" della funzione.

+ +

Esempio

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>hello word1</p>
+        <p id="test1">hello word2</p>
+        <p>hello word3</p>
+        <p>hello word4</p>
+    </div>
+    <script>
+        var parentDOM = document.getElementById('parent-id');
+        var test1 = parentDOM.getElementById('test1');
+        // throw error
+        // Uncaught TypeError: parentDOM.getElementById is not a function
+    </script>
+</body>
+</html>
+ +

Se non ci sono elementi con l'id fornito, questa funzione restituisce null. Nota che il parametro id è case-sensitive, quindi document.getElementById("Main") restituirà null invece dell'elemento <div id="main"> perché "M" e "m" sono diversi per gli scopi di questo metodo.

+ +

Gli elementi non presenti nel documento non vengono cercati da getElementById(). Quando crei un elemento ed assegni un ID ad esso, devi inserire l'elemento nell'albero del documento con {{domxref("Node.insertBefore()")}} o un metodo simile prima di poterlo ottenere con getElementById():

+ +
var element = document.createElement('div');
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el sarà nullo!
+
+ +

Documenti non HTML. L'implementazione del DOM deve avere informazioni che indicano quali attributi sono di tipo ID. Gli attributi con il nome "id" non sono di tipo ID a meno che non siano definiti nella DTD del documento. L'attributo id è definito come di tipo ID nei casi comuni di XHTML, XUL, e altri. Si prevede che le implementazioni che non sanno se gli attributi siano di tipo ID o non restituiscano null.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}{{Spec2('DOM1')}}Definizione iniziale per l'interfaccia
{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM2 Core')}}Sostituisce DOM 1
{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM3 Core')}}Sostituisce DOM 2
{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}{{Spec2('DOM WHATWG')}}Intende rimpiazzare DOM 3
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.getElementById")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/getelementsbyclassname/index.html b/files/it/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..c752bd665d --- /dev/null +++ b/files/it/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,82 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +translation_of: Web/API/Document/getElementsByClassName +--- +

{{APIRef("DOM")}}

+ +

Il metodo getElementsByClassName dell'interfaccia {{domxref("Document")}} restituisce un array-like object di tutti gli elementi figli che hanno le classi specificate. Quando viene richiamato sull'oggetto {{domxref("document")}}, viene eseguita la ricerca del documento completo, incluso il nodo radice. Puoi anche usare {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} su qualsiasi elemento; restituirà solo gli elementi che sono discendenti dell'elemento radice specificato con le classi fornite.

+ +

Sintassi

+ +
var elementi = document.getElementsByClassName(nomi); // oppure:
+var elementi = rootElement.getElementsByClassName(nomi);
+ + + +

Esempi

+ +

Ottenere tutti gli elementi che hanno una come classe 'test':

+ +
document.getElementsByClassName('test')
+ +

Ottenere tutti gli elementi che hanno entrambe le classi 'red' e 'test':

+ +
document.getElementsByClassName('red test')
+ +

Ottenere tutti gli elementi che hanno una classe di 'test', all'interno di un elemento che ha l'ID di 'main':

+ +
document.getElementById('main').getElementsByClassName('test')
+ +

Ottenere il primo elemento con classe 'test' o indefinito se non ci sono elementi corrispondenti:

+ +
document.getElementsByClassName('test')[0]
+
+ +

Possiamo anche utilizzare il metodo Array.prototype su qualsiasi {{domxref("HTMLCollection")}} passando la HTMLCollection come il valore this. Qui troveremo tutti gli elementi div che hanno come classe 'test':

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});
+ +

Ottenere il primo elemento la cui classe è 'test'

+ +

Questo è il metodo di operazione più comunemente usato.

+ +
<html>
+<body>
+    <div id="parent-id">
+        <p>hello world 1</p>
+        <p class="test">hello world 2</p>
+        <p>hello world 3</p>
+        <p>hello world 4</p>
+    </div>
+
+    <script>
+        var parentDOM = document.getElementById("parent-id");
+
+        var test = parentDOM.getElementsByClassName("test"); // una lista di elementi corrispondenti, *non* l'elemento stesso
+        console.log(test); //HTMLCollection[1]
+
+        var testTarget = parentDOM.getElementsByClassName("test")[0]; // il primo elemento, come volevamo
+        console.log(testTarget); //<p class="test">hello world 2</p>
+    </script>
+</body>
+</html>
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.getElementsByClassName")}}

+ +

Specifiche

+ + diff --git a/files/it/web/api/document/getelementsbyname/index.html b/files/it/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..f39fdf8ef7 --- /dev/null +++ b/files/it/web/api/document/getelementsbyname/index.html @@ -0,0 +1,97 @@ +--- +title: Document.getElementsByName() +slug: Web/API/Document/getElementsByName +tags: + - API + - DOM + - Document + - HTML + - Referenza + - metodo +translation_of: Web/API/Document/getElementsByName +--- +
{{APIRef("DOM")}}
+ +

Il metodo getElementsByName() dell'oggetto {{domxref("Document")}} ritorna una raccolta di elementi {{domxref("NodeList")}} con un determinato {{domxref("element.name","name")}} nel documento.

+ +

Sintassi

+ +
var elements = document.getElementsByName(name);
+
+ + + +

Esempio

+ +
<!DOCTYPE html>
+<html lang="en">
+<title>Example: using document.getElementsByName</title>
+
+<input type="hidden" name="up">
+<input type="hidden" name="down">
+
+<script>
+  var up_names = document.getElementsByName("up");
+  console.log(up_names[0].tagName); // ritorna "INPUT"
+</script>
+</html>
+
+ +

Appunti

+ +

L'attributo {{domxref("element.name","name")}} può essere applicato solo nei documenti (X)HTML.

+ +

La raccolta {{domxref("NodeList")}} restituita contiene tutti gli elementi con il parametro name dato, come {{htmlelement("meta")}}, {{htmlelement("object")}}, e persino elementi che non supportano affatto l'attributo name.

+ +
+

Il metodo getElementsByName funziona in modo diverso in IE10 e versioni precedenti. Lì, getElementsByName() restituisce anche gli elementi che hanno un attributo id con il valore specificato. Fai attenzione a non usare la stessa stringa sia di un name che di un id.

+
+ +
+

Il metodo getElementsByName funziona in modo diverso in IE. Lì, getElementsByName() non restituisce tutti gli elementi che potrebbero non avere un attributo name (come <span>).

+
+ +
+

Sia IE che Edge restituiscono una {{domxref("HTMLCollection")}}, non una {{domxref("NodeList")}}

+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}{{Spec2("DOM2 HTML")}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.getElementsByName")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/getelementsbytagname/index.html b/files/it/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..e5ad9540fb --- /dev/null +++ b/files/it/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,116 @@ +--- +title: Document.getElementsByTagName() +slug: Web/API/Document/getElementsByTagName +tags: + - API + - DOM + - Referenza + - metodo +translation_of: Web/API/Document/getElementsByTagName +--- +
{{APIRef("DOM")}}
+ +

Il metodo getElementsByTagName dell'interfaccia {{domxref("Document")}} ritorna una {{domxref("HTMLCollection")}} di elementi con il tag specificato. Viene cercato il documento completo, incluso il nodo radice. L'HTMLCollection è dinamica, il che significa che si aggiorna automaticamente per rimanere sincronizzato con l'albero del DOM senza dover chiamare di nuovo document.getElementsByTagName().

+ +

Sintassi

+ +
var elementi = document.getElementsByTagName(nome);
+ + + +
Le ultime specifiche W3C dicono che gli elementi sono una HTMLCollection; tuttavia, questo metodo restituisce una {{domxref("NodeList")}} nei browser WebKit. Vedi {{bug(14869)}} per i dettagli.
+ +

Esempio

+ +

Nell'esempio seguente, getElementsByTagName() inizia da un particolare elemento padre e ricerca dall'alto verso il basso ricorsivamente attraverso il DOM da quell'elemento padre, una raccolta di tutti i discendenti che corrispondono al parametro nome del tag. Questo documento mostra sia document.getElementsByTagName() che l'identico funzionale {{domxref("Element.getElementsByTagName()")}}, che avvia la ricerca su un elemento specifico all'interno dell'albero del DOM.

+ +

Facendo click sui pulsanti viene utilizzato getElementsByTagName() per contare gli elementi del paragrafo discendente di un particolare genitore (il documento stesso o uno dei due elementi {{HTMLElement("div")}}).

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>esempio di getElementsByTagName</title>
+  <script>
+    function getAllParaElems() {
+      var allParas = document.getElementsByTagName('p');
+      var num = allParas.length;
+      alert('Ci sono ' + num + ' paragrafi in questo documento');
+    }
+
+    function div1ParaElems() {
+      var div1 = document.getElementById('div1');
+      var div1Paras = div1.getElementsByTagName('p');
+      var num = div1Paras.length;
+      alert('Ci sono ' + num + ' paragrafi in #div1');
+    }
+
+    function div2ParaElems() {
+      var div2 = document.getElementById('div2');
+      var div2Paras = div2.getElementsByTagName('p');
+      var num = div2Paras.length;
+      alert('Ci sono ' + num + ' paragrafi in #div2');
+    }
+  </script>
+</head>
+<body style="border: solid green 3px">
+  <p>Qualche testo esterno</p>
+  <p>Qualche testo esterno</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Qualche testo div1</p>
+    <p>Qualche testo div1</p>
+    <p>Qualche testo div1</p>
+
+    <div id="div2" style="border: solid red 3px">
+      <p>Qualche testo div2</p>
+      <p>Qualche testo div2</p>
+    </div>
+  </div>
+
+  <p>Qualche testo esterno/p>
+  <p>Qualche testo esterno</p>
+
+  <button onclick="getAllParaElems();">
+    mostra tutti gli elementi p nel documento</button><br />
+
+  <button onclick="div1ParaElems();">
+    mostra tutti gli elementi p nell'elemento div1</button><br />
+
+  <button onclick="div2ParaElems();">
+   mostra tutti gli elementi p nell'elemento div2</button>
+
+</body>
+</html>
+
+ +

Note

+ +

Quando chiamato su un documento HTML, getElementsByTagName() converte in minuscolo il suo argomento prima di procedere. Ciò non è desiderabile quando si cerca di far corrispondere gli elementi SVG di camelCase in una sottostruttura in un documento HTML. {{Domxref("document.getElementsByTagNameNS()")}} è utile in questo caso. Vedi anche {{Bug(499656)}}.

+ +

document.getElementsByTagName() è simile a {{domxref("Element.getElementsByTagName()")}}, ad eccezione del fatto che la sua ricerca comprende l'intero documento.

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.getElementsByTagName")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/head/index.html b/files/it/web/api/document/head/index.html new file mode 100644 index 0000000000..941a533431 --- /dev/null +++ b/files/it/web/api/document/head/index.html @@ -0,0 +1,84 @@ +--- +title: Document.head +slug: Web/API/Document/head +tags: + - API + - Document + - HTML DOM + - Proprietà + - Referenza +translation_of: Web/API/Document/head +--- +
{{APIRef("DOM")}}
+ +

La proprietà head di sola lettura dell'interfaccia {{domxref("Document")}} restituisce l'elemento {{HTMLElement("head")}} del documento corrente.

+ +

Sintassi

+ +
var objRef = document.head;
+
+ +

Valore

+ +

Un {{domxref("HTMLHeadElement")}}.

+ +

Esempio

+ +
<!doctype html>
+<head id="my-document-head">
+  <title>Esempio: usare document.head</title>
+</head>
+
+<script>
+  var theHead = document.head;
+
+  console.log(theHead.id); // "my-document-head";
+
+  console.log( theHead === document.querySelector("head") ); // true
+</script>
+
+ +

Appunti

+ +

document.head è di sola lettura. Cercare di assegnare un valore a questa proprietà fallirà silenziosamente o, in Strict Mode, genera un {{jsxref("TypeError")}} .

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML WHATWG')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.head")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/height/index.html b/files/it/web/api/document/height/index.html new file mode 100644 index 0000000000..ee517b6c39 --- /dev/null +++ b/files/it/web/api/document/height/index.html @@ -0,0 +1,35 @@ +--- +title: document.height +slug: Web/API/Document/height +translation_of: Web/API/Document/height +--- +
{{APIRef("DOM")}}
+ +

Restituisce l'altezza in pixel dell'elemento body del documento corrente.

+ +

Syntax

+ +
height_value = document.height
+
+ +

Parametri

+ + + +

Esempio

+ +
// visualizza l'altezza del documento
+alert(document.height);
+
+ +

Note

+ +

Si veda document.width.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di uno standard.

+ +

{{ languages( { "pl": "pl/DOM/document.height" } ) }}

diff --git a/files/it/web/api/document/images/index.html b/files/it/web/api/document/images/index.html new file mode 100644 index 0000000000..abe27b2a11 --- /dev/null +++ b/files/it/web/api/document/images/index.html @@ -0,0 +1,52 @@ +--- +title: Document.images +slug: Web/API/Document/images +translation_of: Web/API/Document/images +--- +
{{APIRef("DOM")}}
+ +

document.images restituisce una collezione delle immagini nel documento HTML corrente.

+ +

Sintassi

+ +
var htmlCollection = document.images;
+ +

Esempio

+ +
var ilist = document.images;
+
+for(var i = 0; i < ilist.length; i++) {
+    if(ilist[i].src == "banner.gif") {
+        // found the banner
+    }
+}
+ +

Note

+ +

document.images.length – proprietà che restituisce il numero di immagini della pagina.

+ +

document.images è parte del DOM HTML, e funziona solo per documenti HTML.

+ +

Specifiche tecniche

+ + + + + + + + + + + + + + + + + + + + + +
Specifiche tecnicheStatoCommento
{{SpecName('HTML WHATWG', '#dom-document-images', 'Document.images')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-90379117', 'Document.images')}}{{ Spec2('DOM2 Events') }}Initial definition.
diff --git a/files/it/web/api/document/importnode/index.html b/files/it/web/api/document/importnode/index.html new file mode 100644 index 0000000000..354db3c0c8 --- /dev/null +++ b/files/it/web/api/document/importnode/index.html @@ -0,0 +1,45 @@ +--- +title: document.importNode +slug: Web/API/Document/importNode +translation_of: Web/API/Document/importNode +--- +
{{APIRef("DOM")}}
+ +

Restituisce un clone di un nodo preso da un documento esterno.

+ +

Sintassi

+ +
nodo =
+document.importNode(
+nodoEsterno,
+bool)
+
+ + + +

Esempio

+ +
var iframe = document.getElementsByTagName("iframe")[0];
+var vecchioNodo = iframe.contentDocument.getElementById("mioNodo");
+var nuovoNodo = document.importNode(vecchioNodo,true);
+document.getElementById("contenitore").appendChild(nuovoNodo);
+
+ +

Note

+ +

Il nodo non viene rimosso dal documento originale. Il nodo importato è un clone dell'originale. I nodi presi dai documenti esterni devono essere importati prima di poter essere inseriti nel documento corrente.

+ +

http://www.w3.org/DOM/faq.html#ownerdoc

+ +

Specifiche

+ +

DOM Level 2 Core: Document.importNode

+ +

{{ languages( { "fr": "fr/DOM/document.importNode" } ) }}

diff --git a/files/it/web/api/document/index.html b/files/it/web/api/document/index.html new file mode 100644 index 0000000000..108f317cc3 --- /dev/null +++ b/files/it/web/api/document/index.html @@ -0,0 +1,308 @@ +--- +title: Document +slug: Web/API/Document +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - SezioneIncompleta + - Tutte_le_categorie +translation_of: Web/API/Document +--- +

{{ ApiRef("DOM") }}

+ +

Introduzione

+ +

L'oggetto document fornisce un modo generico di rappresentare documenti HTML, XHTML, e XML. Implementa l'interfaccia DOM Core document.

+ +

In aggiunta all'interfaccia generalizzata DOM core document, i documenti HTML implementano pure l'interfaccia DOM HTMLDocument, che è un'interfaccia più specializzata per interagire con i documenti HTML (contiene ad esempio document.cookie). In questa pagina, le proprietà e i metodi che fanno parte di questa interfaccia più specializzata sono seguite da un asterisco.

+ +

L'oggetto document è contenuto nell'oggetto window e può contenere un numero qualsiasi di elementi.

+ +

L'interfaccia di document fornisce accesso a informazioni come il tipo di documento, i plugin e le applet, e fornisce metodi per creare e manipolare i suoi nodi figli.

+ +

Proprietà

+ +
+
document.alinkColor*{{ Deprecated_inline() }}
+
Restituisce o setta il colore dei link attivi nel corpo del documento.
+
+ +
+
document.anchors*
+
Restituisce una collezione delle ancore presenti nel documento.
+
+ +
+
document.applets*
+
Restituisce una collezione delle applet presenti nel documento.
+
+ +
+
document.bgColor*{{ Deprecated_inline() }}
+
Restituisce/setta il colore di sfondo dell'elemento body del documento.
+
+ +
+
document.body*
+
Restituisce il nodo BODY del documento.
+
+ +
+
document.characterSet
+
Restituisce il set di caratteri usato nel documento.
+
+ +
+
document.compatMode*
+
Indica se il documento viene letto dal browser in modalità standard o in modalità compatibile.
+
+ +
+
document.cookie*
+
Restituisce una stringa contenente la lista dei cookie(separati da un punto e virgola) usati dal documento o setta un singolo cookie.
+
+ +
+
document.contentWindow*
+
Restituisce l'oggetto window in cui è contenuto il documento.
+
+ +
+
document.defaultView
+
Restituisce un riferimento all'oggetto window.
+
+ +
+
document.designMode
+
Restituisce/setta lo stato di attivazione del Rich Text Editor di firefox, Midas.
+
+ +
+
document.doctype
+
Restituisce la Dichiarazione del Tipo di Documento(DTD) del documento corrente.
+
+ +
+
document.documentElement
+
Restituisce l'elemento che è figlio diretto di document, cioè nella maggior parte dei casi l'elemento HTML.
+
+ +
+
document.domain*
+
Restituisce il dominio del documento corrente.
+
+ +
+
document.embeds*
+
Restituisce una lista degli elementi object contenuti nel documento.
+
+ +
+
document.fgColor*{{ Deprecated_inline() }}
+
Restituisce/setta il colore di default per il testo del documento corrente.
+
+ +
+
document.firstChild
+
Restituisce il primo nodo figlio di document. (Guarda anche firstChild presente nell'intefaccia element).
+
+ +
+
document.forms*
+
Restituisce una collezione degli elementi FORM contenuti nel documento.
+
+ +
+
document.height*
+
Restituisce/setta l'altezza del documento corrente.
+
+ +
+
document.images*
+
Restituisce una collezione delle immagini contenute nel documento corrente.
+
+ +
+
document.implementation*
+
Restituisce l'implementazione DOM associata al documento corrente.
+
+ +
+
document.lastModified*
+
Restituisce la data in cui il documento è stato modificato l'ultima volta.
+
+ +
+
document.linkColor*{{ Deprecated_inline() }}
+
Restituisce/setta il colore dei collegamenti nel documento.
+
+ +
+
document.links*
+
Restituisce una collezione dei collegamenti presenti nel documento.
+
+ +
+
document.location*
+
Restituisce l'URI del documento corrente.
+
+ +
+
document.namespaceURI
+
Restituisce lo spazio dei nomi XML del documento corrente.
+
+ +
+
document.plugins*
+
Restituisce una lista dei plugin disponibili.
+
+ +
+
document.referrer*
+
Restituisce l'URI della pagina che ha portato al documento corrente.
+
+ +
+
document.styleSheets*
+
Restituisce una collezione degli oggetti stylesheet presenti nel documento corrente.
+
+ +
+
document.title*
+
Restituisce il titolo del documento corrente.
+
+ +
+
document.URL
+
Restituisce una stringa che rappresenta l'URI del documento corrente.
+
+ +
+
document.vlinkColor*{{ Deprecated_inline() }}
+
Restituisce/setta il colore dei collegamenti visitati.
+
+ +
+
document.width*
+
Restituisce la larghezza del documento corrente.
+
+ +

Metodi

+ +
+
document.clear {{ Deprecated_inline() }}
+
Cancella i contenuti del documento.
+
+ +
+
document.close
+
Chiude lo stream per la scrittura del documento.
+
+ +
+
document.createAttribute
+
Crea (e restituisce) un nuovo nodo attributo.
+
+ +
+
document.createDocumentFragment
+
Crea un frammento.
+
+ +
+
document.createElement*
+
Crea un elemento a partire dal nome di tag dato. Non funziona con documenti xml.
+
+ +
+
document.createElementNS
+
Crea un elmento col nome di tag e l'URI per lo spazio dei nomi dati.
+
+ +
+
document.createTextNode
+
Crea un nodo testuale.
+
+ +
+
document.createEvent
+
Crea un oggetto di classe Event.
+
+ +
+
document.createRange
+
Crea un oggetto di classe Range.
+
+ +
+
document.execCommand
+
Esegue un comando Midas.
+
+ +
+
document.evaluate
+
Valuta una espressione XPath.
+
+ +
+
document.getElementById
+
Restituisce un riferimento a oggetto per l'elemento che ha il dato id.
+
+ +
+
document.getElementsByName
+
Restituisce una collezione di elementi con il dato attributo name.
+
+ +
+
document.getElementsByTagName
+
Restituisce una collezione degli elementi con il dato nome di tag.
+
+ +
+
document.importNode
+
Restituisce un clone di un nodo preso da un documento esterno.
+
+ +
+
document.loadOverlay
+
Carica un overlay XUL dinamicamente. Funziona solo con i documenti XUL.
+
+ +
+
document.open
+
Apre uno stream di documento per la scrittura.
+
+ +
+
document.queryCommandEnabled
+
Restituisce true se il comando Midas può essere eseguito sul range corrente.
+
+ +
+
document.queryCommandIndeterm
+
Restituisce true se il comando Midas è in uno stato indeterminato per il range corrente.
+
+ +
+
document.queryCommandState
+
Restituisce true se il comando Midas è stato eseguito sul range corrente.
+
+ +
+
document.queryCommandValue
+
Restituisce il valore corrente del range corrente per il comando Midas.
+
+ +
+
document.write*
+
Scrive del codice all'interno del documento.Non funziona con i documenti xml.
+
+ +
+
document.writeln
+
Scrive una linea di codice all'interno del documento. Non funziona con i documenti xml.
+
+ +

{{ languages( { "fr": "fr/DOM/document", "pl": "pl/DOM/document", "en": "en/DOM/document" } ) }}

diff --git a/files/it/web/api/document/lastmodified/index.html b/files/it/web/api/document/lastmodified/index.html new file mode 100644 index 0000000000..4e56851ee4 --- /dev/null +++ b/files/it/web/api/document/lastmodified/index.html @@ -0,0 +1,31 @@ +--- +title: document.lastModified +slug: Web/API/Document/lastModified +translation_of: Web/API/Document/lastModified +--- +
{{APIRef("DOM")}}
+ +

Restituisce una stringa contenente la data e l'ora dell'utlima modifica apportata al documento corrente.

+ +

Sintassi

+ +
stringa = document.lastModified
+
+ +

Esempio

+ +
dump(document.lastModified);
+// restituisce: Tuesday, July 10, 2001 10:19:42
+
+ +

Note

+ +

Si noti che essendo una stringa, lastModified non può essere utilizzata facilmente per le comparazioni tra le date di modifica di un altro documento.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

+ +

MSDN: proprietà lastModified

+ +

{{ languages( { "pl": "pl/DOM/document.lastModified" } ) }}

diff --git a/files/it/web/api/document/links/index.html b/files/it/web/api/document/links/index.html new file mode 100644 index 0000000000..fff02b997f --- /dev/null +++ b/files/it/web/api/document/links/index.html @@ -0,0 +1,100 @@ +--- +title: document.links +slug: Web/API/Document/links +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Document/links +--- +
+

{{ APIRef("DOM") }}

+ +

La proprietà links restituisce una collezione di tutti gli elementi {{HTMLElement("area")}} e di tutti gli elementi {{HTMLElement("a")}} in un documento con un valore per l'attributo href .

+ +

Sintassi

+ +
nodeList = document.links
+ +

Esempio

+ +
var links = document.links;
+for(var i = 0; i < links.length; i++) {
+  var linkHref = document.createTextNode(links[i].href);
+  var lineBreak = document.createElement("br");
+  document.body.appendChild(linkHref);
+  document.body.appendChild(lineBreak);
+}
+ +

Specifiche tecniche

+ + + + + + + + + + + + + + + + + + + +
Specifiche tecnicheStatoCommento
{{SpecName('HTML WHATWG', '#dom-document-links', 'Document.links')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}{{Spec2("DOM2 HTML")}}Definizione iniziale
+ +

Compatibilità browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+
diff --git a/files/it/web/api/document/namespaceuri/index.html b/files/it/web/api/document/namespaceuri/index.html new file mode 100644 index 0000000000..704185463f --- /dev/null +++ b/files/it/web/api/document/namespaceuri/index.html @@ -0,0 +1,29 @@ +--- +title: document.namespaceURI +slug: Web/API/Document/namespaceURI +translation_of: Web/API/Node/namespaceURI +--- +
{{APIRef("DOM")}}
+ +

namespaceURI restituisce lo spazio dei nomi XML del documento corrente.

+ +

Sintassi

+ +
NSURI = document.namespaceURI
+
+ +

Parametri

+ + + +

Note

+ +

Il DOM di per sè non supporta la validazione del namespace. Spetta all'applicazione DOM effettuare la necessaria validazione. Si noti inoltre che il prefisso del namespace, una volta associato a un nodo particolare, non può più cambiare.

+ +

Specifiche

+ +

DOM Level 2 Core: namespaceURI

+ +

{{ languages( { "fr": "fr/DOM/document.namespaceURI", "pl": "pl/DOM/document.namespaceURI" } ) }}

diff --git a/files/it/web/api/document/open/index.html b/files/it/web/api/document/open/index.html new file mode 100644 index 0000000000..7f4c1eb77a --- /dev/null +++ b/files/it/web/api/document/open/index.html @@ -0,0 +1,46 @@ +--- +title: document.open +slug: Web/API/Document/open +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Document/open +--- +
{{APIRef("DOM")}}
+ +

Il metodo document.open() apre un documento in scrittura (document.write()).

+ +

Sintassi

+ +
document.open();
+
+ +

Esempio

+ +
// In questo esempio, i contenuti del documento
+// vengono sovrascritti quando il documento
+// viene reinizializzato con open().
+document.write("<html><p>eliminami</p></html>");
+document.open();
+// il documento è vuoto
+
+ +

Note

+ +

Se un documento esiste, questo metodo lo svuota (si veda l'esempio sopra).

+ +

Inoltre document.open() viene chiamato implicitamente quando si chiama document.write() dopo che la pagina è stata caricata, nonostante ciò non sia richiesto dalle specifiche del W3C.

+ +

Non confondere questo metodo con window.open(). document.open() permette di sovrascrivere il documento corrente o aggiungere testo allo stesso, mentre window.open fornisce un modo per apreire una finestra, lasciando intatto il documento. Poiché window è l'oggetto globale, scrivere solamente open(...) fa la stessa cosa

+ +

Puoi chiudere il documento aperto usando document.close().

+ +

Specificazioni

+ +

DOM Level 2 HTML: open() Method

+ +
 
+ +

{{ languages( { "fr": "fr/DOM/document.open", "ja": "ja/DOM/document.open", "pl": "pl/DOM/document.open" } ) }}

diff --git a/files/it/web/api/document/queryselector/index.html b/files/it/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..6d8000818d --- /dev/null +++ b/files/it/web/api/document/queryselector/index.html @@ -0,0 +1,121 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +translation_of: Web/API/Document/querySelector +--- +
{{ApiRef("DOM")}}
+ +

Il metodo {{domxref("Document")}} querySelector() ritorna il primo {{domxref("Element")}} all'interno del documento che corrisponde al selettore specificato o al gruppo di selettori. Se non vengono trovate corrispondenze, viene restituito null.

+ +
+

Note: Il matching viene eseguito utilizzando il deep-pre-order traversal dei nodi del documento partendo dal primo elemento nel markup del documento e iterando attraverso i nodi sequenziali per ordine del numero di nodi figli.

+
+ +

Sintassi

+ +
element = document.querySelector(selectors);
+
+ +

Parametri

+ +
+
selectors
+
Una {{domxref("DOMString")}} contenente uno o più selettori da trovare. Questa stringa deve essere una stringa di selettore CSS valida; se non lo è, viene generata un'eccezione SYNTAX_ERR. Vedi Individuazione degli elementi DOM mediante selettori per ulteriori informazioni sui selettori e su come gestirli.
+
+ +
+

Note: I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape di backslash, prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.

+
+ +

Valore di ritorno

+ +

Un oggetto {{domxref ("Element")}} che rappresenta il primo elemento nel documento che corrisponde al set specificato di CSS selectors, o null viene restituito se non ci sono corrispondenze.

+ +

Se hai bisogno di un elenco di tutti gli elementi che corrispondono ai selettori specificati, dovresti usare {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.

+ +

Eccezioni

+ +
+
SYNTAX_ERR
+
La sintassi dei selettori specificati non è valida.
+
+ +

Note di utilizzo

+ +

Se il selettore specificato corrisponde a un ID erroneamente utilizzato più di una volta nel documento, viene restituito il primo elemento con quell'ID.

+ +

Gli pseudo-elementi CSS non restituiranno mai alcun elemento, come specificato nelle API dei selettori.

+ +

Escaping caratteri speciali

+ + + +

Per eseguire la corrispondenza con un ID o selettori che non seguono la sintassi CSS standard (ad esempio utilizzando due punti o uno spazio in modo inappropriato), è necessario eseguire l'escape del carattere con un backslash ("\"). Poiché il backslash è anche un carattere di escape in JavaScript, se si immette una stringa letterale, è necessario eseguire l'escape due volte (una per la stringa JavaScript e un'altra per querySelector ()):

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar');               // "#fooar" (\b è il carattere di controllo backspace)
+  document.querySelector('#foo\bar');    // Non corrisponde a nulla
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\\\bar'); // Seleziona il primo div
+
+  document.querySelector('#foo:bar');    // Non corrisponde a nulla
+  document.querySelector('#foo\\:bar');  // Seleziona il secondo div
+ +

Esempi

+ +

Trovare il primo elemento che corrisponde a una classe

+ +

In questo esempio, viene restituito il primo elemento del documento con la classe "myclass":

+ +
var el = document.querySelector(".myclass");
+
+ +

Un selettore più complesso

+ +

I selettori possono anche essere molto potenti, come dimostrato nel seguente esempio. Qui, il primo elemento {{HTMLElement("input")}} con il nome "login" (<input name="login"/>) situato all'interno di un {{HTMLElement("div")}} la cui classe è "user-panel main" (<div class="user-panel main">) nel documento viene restituito:

+ +
var el = document.querySelector("div.user-panel.main input[name='login']");
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}}
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +
{{Compat("api.Document.querySelector")}}
+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/queryselectorall/index.html b/files/it/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..a8e614ce9e --- /dev/null +++ b/files/it/web/api/document/queryselectorall/index.html @@ -0,0 +1,180 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - Cercare elementi + - Document + - Localizzare Elementi + - Referenza + - Selettori + - Selettori CSS + - Selezionare Elementi + - Trovare elementi + - metodo + - querySelectorAll +translation_of: Web/API/Document/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

Il metodo {{domxref("Document")}} querySelectorAll() ritorna una {{domxref("NodeList")}} statica (non dinamica) che rappresenta un elenco di elementi del documento che corrispondono al gruppo specificato di selettori.

+ +
+

Note: This method is implemented based on the {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.

+
+ +

Sintassi

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

Parametri

+ +
+
selectors
+
Una {{domxref("DOMString")}} contenente uno o più selettori con cui confrontarsi. Questa stringa deve contenere dei selettori CSS validi; se non lo sono, viene generata un'eccezione SyntaxError. Vedi Individuazione degli elementi DOM mediante selettori per ulteriori informazioni sull'uso dei selettori per cercare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.
+
+ +
+

Note: I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape di backslash, è necessario prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.

+
+ +

Valore di ritorno

+ +

Una {{domxref("NodeList")}} non dinamica contenente un oggetto {{domxref("Element")}} per ogni elemento che corrisponde ad almeno uno dei selettori specificati o una {{domxref("NodeList")}} vuota in caso di assenza di corrispondenze.

+ +
+

Note: Se i selectors specificati includono uno pseudo-elemento CSS, l'elenco restituito è sempre vuoto.

+
+ +

Eccezioni

+ +
+
SyntaxError
+
La sintassi della stringa selectors specificata non è valida.
+
+ +

Esempi

+ +

Ottenere un elenco di elementi

+ +

Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} nel documento:

+ +
var matches = document.querySelectorAll("p");
+ +

Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} all'interno del documento con la classe "note" o "alert":

+ +
var matches = document.querySelectorAll("div.note, div.alert");
+
+ +

Qui, otteniamo un elenco di elementi <p> il cui elemento padre immediato è un {{domxref("div")}} con la classe "highlighted" e che si trovano all'interno di un contenitore il cui ID è "test".

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

Questo esempio utilizza un selettore tramite attributo per restituire un elenco degli elementi {{domxref("iframe")}} nel documento che contengono un attributo denominato "data-src":

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è "userlist" con l'attributo "data-active" il cui valore è "1":

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

Accedere ai risultati

+ +

Una volta che viene restituita la {{domxref("NodeList")}} degli elementi corrispondenti, è possibile esaminarla come qualsiasi array. Se l'array è vuoto (ovvero la sua proprietà length è 0), non è stato trovato alcun elemento.

+ +

Altrimenti, puoi semplicemente usare la notazione array standard per accedere ai contenuti della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

Note dell'utente

+ +

querySelectorAll() si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.

+ +

HTML

+ +

Considera questo HTML, con i suoi tre blocchi {{HTMLElement("div")}} nidificati.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

In questo esempio, quando si seleziona ".outer .inner" nel contesto <div> con la classe "select", si trova ancora l'elemento con la classe ".inner" anche se .outer non è un discendente dell'elemento base su cui viene eseguita la ricerca (".select"). Per impostazione predefinita, querySelectorAll() verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.

+ +

La pseudo-classe {{cssxref(":scope")}} ripristina il comportamento previsto, trova solo i selettori corrispondenti sui discendenti dell'elemento base:

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Standard di vita
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Nessun cambiamento
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Definizione iniziale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definizione originale
+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Document.querySelectorAll")}}

+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/referrer/index.html b/files/it/web/api/document/referrer/index.html new file mode 100644 index 0000000000..8cefd3c9ac --- /dev/null +++ b/files/it/web/api/document/referrer/index.html @@ -0,0 +1,23 @@ +--- +title: document.referrer +slug: Web/API/Document/referrer +translation_of: Web/API/Document/referrer +--- +
{{APIRef("DOM")}}
+ +

Restituisce l'URI della pagina che l'utente ha visitato e che conteneva il link al documento corrente.

+ +

Sintassi

+ +
stringa = document.referrer
+
+ +

Note

+ +

Il valore è una stringa vuota se l'utente si è recato alla pagina corrente digitando l'indirizzo direttamente o attraverso un bookmark. Siccome questa proprietà restituisce solo una stringa, non fornisce un accesso al DOM della pagina a cui si riferisce.

+ +

Specifiche

+ +

DOM Level 2: referrer

+ +

{{ languages( { "pl": "pl/DOM/document.referrer" } ) }}

diff --git a/files/it/web/api/document/stylesheets/index.html b/files/it/web/api/document/stylesheets/index.html new file mode 100644 index 0000000000..9de0ad0fc5 --- /dev/null +++ b/files/it/web/api/document/stylesheets/index.html @@ -0,0 +1,43 @@ +--- +title: document.styleSheets +slug: Web/API/Document/styleSheets +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +--- +

{{APIRef("DOM")}}

+ +

Restituisce una lista di oggetti stylesheet per i fogli stile esplicitamente linkati o inclusi nel documento.

+ +

Proprietà

+ +

styleSheetList.length - restituisce il numero di oggetti stylesheet contenuti nell'oggetto.

+ +

Sintassi

+ +
styleSheetList =
+document.styleSheets
+
+ +

L'oggetto restituito è di tipo StyleSheetList.

+ +

E' una collezione ordinata di oggetti stylesheet. + styleSheetList + .item( + + indice + ) o semplicemente + styleSheetList + {{ mediawiki.external(' + + indice + ') }} restituisce un singolo oggetto stylesheet indicato dall'indice (indice comincia da 0).

+ +

Specifiche

+ +

DOM Level 2 Style: styleSheets

+ +

{{ languages( { "ja": "ja/DOM/document.styleSheets", "pl": "pl/DOM/document.styleSheets" } ) }}

diff --git a/files/it/web/api/document/title/index.html b/files/it/web/api/document/title/index.html new file mode 100644 index 0000000000..5e93fa8318 --- /dev/null +++ b/files/it/web/api/document/title/index.html @@ -0,0 +1,32 @@ +--- +title: document.title +slug: Web/API/Document/title +translation_of: Web/API/Document/title +--- +

{{APIRef("DOM")}}document.title restituisce il titolo del documento.

+ +

Sintassi

+ +
sTitle = document.title
+
+ +

Parametri

+ + + +

Esempio

+ +
<html>
+  <title>Ciao mondo!</title>
+  <body>
+...
+// document.title restituisce "Ciao mondo!"
+
+ +

Specifiche

+ +

DOM Level 2: title

+ +

{{ languages( { "pl": "pl/DOM/document.title" } ) }}

diff --git a/files/it/web/api/document/url/index.html b/files/it/web/api/document/url/index.html new file mode 100644 index 0000000000..e3a04cf953 --- /dev/null +++ b/files/it/web/api/document/url/index.html @@ -0,0 +1,29 @@ +--- +title: document.URL +slug: Web/API/Document/URL +translation_of: Web/API/Document/URL +--- +
{{APIRef("DOM")}}
+ +

Restituisce l'URL del documento corrente.

+ +

Sintassi

+ +
stringa = document.URL
+
+ +

Esempio

+ +
var currentURL = document.URL;
+alert(currentURL);
+
+ +

Notesù

+ +

URL è un sostituto della proprietà non standard document.location.href. Tuttavia document.URL è di sola lettura, diversamente da document.location.href.

+ +

Specifiche

+ +

DOM Level 2 HTML: URL

+ +

{{ languages( { "ja": "ja/DOM/document.URL", "pl": "pl/DOM/document.URL" } ) }}

diff --git a/files/it/web/api/document/width/index.html b/files/it/web/api/document/width/index.html new file mode 100644 index 0000000000..82756dbbc7 --- /dev/null +++ b/files/it/web/api/document/width/index.html @@ -0,0 +1,32 @@ +--- +title: document.width +slug: Web/API/Document/width +translation_of: Web/API/Document/width +--- +
{{APIRef("DOM")}}
+ +

Restituisce la larghezza in pixel dell'elemento body del documento corrente.

+ +

Non supportato da IE.

+ +

Sintassi

+ +
pixels = document.width;
+
+ +

Esempio

+ +
function init() {
+  alert("La larghezza del documento è di " + document.width + " pixel.");
+}
+
+ +

Note

+ +

Si veda document.height.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di uno standard.

+ +

{{ languages( { "pl": "pl/DOM/document.width" } ) }}

diff --git a/files/it/web/api/document/write/index.html b/files/it/web/api/document/write/index.html new file mode 100644 index 0000000000..0337177181 --- /dev/null +++ b/files/it/web/api/document/write/index.html @@ -0,0 +1,74 @@ +--- +title: Document.write() +slug: Web/API/Document/write +translation_of: Web/API/Document/write +--- +

{{ ApiRef("DOM") }}

+ +

Riassunto

+ +

Scrive una stringa di testo in un flusso di documento aperto da document.open().

+ +

Sintassi

+ +
document.write(markup);
+
+ + + +

Example

+ +
<html>
+
+<head>
+<title>write example</title>
+
+<script type="text/javascript">
+
+function newContent()
+{
+alert("load new content");
+document.open();
+document.write("<h1>Out with the old - in with the new!</h1>");
+document.close();
+}
+
+</script>
+</head>
+
+<body onload="newContent();">
+<p>Some original document content.</p>
+</body>
+</html>
+
+ +

Note

+ +

La scrittura di un documento che è gia stato caricato senza document.open() eseguirà automaticamente document.open. Una volta che hai finito di scrivere, si consiglia di chiamare document.close(), per dire al browser di completare il caricamento della pagina. Il testo che si scrive viene analizzato nel modello struttura del documento. Nell'esempio precedente, l'h1 diventa nodo del documento.

+ +

Se il document.write() viene incorporato direttamente nel codice HTML, allora non chiamerà il document.open(). Per esempio:

+ +
 <div>
+  <script type="text/javascript">
+    document.write("<h1>Main title</h1>")
+  </script>
+ </div>
+
+ +
Nota: document.write (come document.writeln) non lavora in documenti XHTML (si otterrà "Operazione non ammessa" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) nella console). Questo è il caso se l'apertura di un file locale con estensione .xhtml, o per qualsiasi documento servito con un tipo MIME application/xhtml+xml . Ulteriori informazioni sono disponibili nel W3C XHTML FAQ.
+ +

Specificazioni

+ + + +

Vedi anche

+ + diff --git a/files/it/web/api/document/writeln/index.html b/files/it/web/api/document/writeln/index.html new file mode 100644 index 0000000000..080eb49c4e --- /dev/null +++ b/files/it/web/api/document/writeln/index.html @@ -0,0 +1,34 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +translation_of: Web/API/Document/writeln +--- +

{{ ApiRef("DOM") }}

+ +

Scrive una stringa di testo seguita da un carattere di accapo nel documento.

+ +

Sintassi

+ +
document.writeln(riga);
+
+ +

Parametri

+ + + +

Esempio

+ +
document.writeln("<p>inserisci una password:</p>");
+
+ +

Note

+ +

document.writeln è uguale a document.write, in più aggiunge una nuova riga.

+ +
Nota: document.writeln (come document.write) non funziona nei documenti XHTML (restituisce un errore "Operation is not supported" (Operazione non supportata) (NS_ERROR_DOM_NOT_SUPPORTED_ERR) sulla console degli errori). Questo può capitare per esempio aprendo un file locale con estensione .xhtml o qualsiasi documento da un server che abbia MIME type application/xhtml+xml. Altre informazioni sono disponibili nelle W3C XHTML FAQ.
+ +

Specifiche

+ +

writeln

diff --git a/files/it/web/api/document_object_model/index.html b/files/it/web/api/document_object_model/index.html new file mode 100644 index 0000000000..c1877f3642 --- /dev/null +++ b/files/it/web/api/document_object_model/index.html @@ -0,0 +1,435 @@ +--- +title: Document Object Model (DOM) +slug: Web/API/Document_Object_Model +tags: + - API + - DOM + - DOM Reference + - Intermediate + - Reference +translation_of: Web/API/Document_Object_Model +--- +
{{DefaultAPISidebar("DOM")}}
+ +

Il Document Object Model (DOM) rappresenta una pagina web come un documento con un albero logico di oggetti.

+ +

Ogni ramo dell'albero termina in un nodo, e ogni nodo contiene oggetti. Il modello DOM collega le pagine web agli script o ai linguaggi di programmazione. Usualmente significa usare JavaScript, anche se modellare documenti HTML, SVG o XML come oggetti non è parte del linguaggio JavaScript.

+ +

I metodi del DOM permettono un accesso programmatico all'albero; tramite i metodi e le proprietà del DOM è possibile modificare la struttura del documento stesso, lo stile e/o il contenuto.

+ +

I nodi possono avere degli eventi aggangiati ad essi e quando un evento viene scatenato, l'handler dell'evento viene eseguito.

+ +

E' disponibile una introduzione al DOM.

+ +

Interfacce DOM

+ +
+ +
+ +

Interfacce DOM obsolete {{obsolete_inline}}

+ +

The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specification have been removed. It is still not very clear whether some may be reintroduced or not, but for the time being they have to be considered as obsolete and should be avoided:

+ +
+ +
+ +

HTML interfaces

+ +

A document containing HTML is described using the {{domxref("HTMLDocument")}} interface. Note that the HTML specification also extends the {{domxref("Document")}} interface.

+ +

An HTMLDocument object also gives access to various features of browsers like the tab or the window, in which a page is drawn using the {{domxref("Window")}} interface, the {{domxref("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{domxref("window.history", "History")}}. Eventually, {{domxref("Selection")}} is done on the document.

+ +

HTML element interfaces

+ +
+ +
+ +

Other interfaces

+ +
+ +
+ +

Obsolete HTML interfaces {{obsolete_inline}}

+ +
+ +
+ +

SVG interfaces

+ +

SVG element interfaces

+ +
+ +
+ +

SVG data type interfaces

+ +

Here are the DOM API for data types used in the definitions of SVG properties and attributes.

+ +
+

Note: Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.

+
+ +

Static type

+ +
+ +
+ +

Animated type

+ +
+ +
+ + + +
+ +
+ +

Other SVG interfaces

+ +
+ +
+ +

See also

+ + diff --git a/files/it/web/api/document_object_model/introduzione/index.html b/files/it/web/api/document_object_model/introduzione/index.html new file mode 100644 index 0000000000..328caa0c5c --- /dev/null +++ b/files/it/web/api/document_object_model/introduzione/index.html @@ -0,0 +1,257 @@ +--- +title: Introduzione al DOM +slug: Web/API/Document_Object_Model/Introduzione +tags: + - Beginner + - DOM + - Guida + - HTML DOM + - Introduzione + - Principianti + - Tutorial +translation_of: Web/API/Document_Object_Model/Introduction +--- +

Il Document Object Model (DOM) è la rappresentazione degli oggetti che comprendono la struttura e il contenuto di un documento sul web. In questa guida, introdurremo brevemente il DOM. Vedremo come il DOM rappresenta un documento {{Glossary("HTML")}} o {{Glossary("XML")}} in memoria e come puoi usare le APIs per creare contenuti web e applicazioni.

+ +

Che cos'è il DOM?

+ +

Il Document Object Model (DOM) è una interfaccia di programmazione per documenti HTML e XML. Rappresenta la pagina in modo che i programmi possano modificare la struttura, lo stile e il contenuto del documento. Il DOM rappresenta il documento come nodi e oggetti. In questo modo, i linguaggi di programmazione possono connettersi alla pagina.

+ +

La pagina web è un documento. Questo documento può essere visualizzato nella finestra del browser o come sorgente HTML. Ma è lo stesso documento in entrambi i casi. Il Document Obkect Model (DOM) rappresenta come entrambi i documenti possono essere manipolati. Il DOM è una rappresentazione ad oggetti della pagina web, che può essere modificata con linguaggi di scripting come JavaScript.

+ +

Gli standard W3C DOM e WHATWG DOM sono implementati nei più moderni browsers. Molti browsers estendono lo standard, pertanto è necessario prestare attenzione quando li si utilizza sul Web in cui è possibile accedere ai documenti da vari browser con DOM diversi.

+ +

Per esempio, lo standard DOM specifica che il metodo getElementsByTagName usato qui sotto, dovrebbe ritornare una lista di tutti gli elementi <p> nel documento.

+ +
const paragrafi = document.getElementsByTagName("p");
+// paragrafi[0] è il primo <p> elemento
+// paragrafi[1] è il secondo <p> elemento, etc.
+alert(paragrafi[0].nodeName);
+
+ +

Tutte le proprietà, metodi ed eventi disponibili per la manipolazione e la creazione di pagine web sono organizzate in oggetti (per esempio, l'oggetto document che rappresenta il documento stesso, l'oggetto table che implementa la speciale interfaccia DOM {{domxref("HTMLTableElement")}} per accedere alle tabelle HTML, e così via). Questa documentazione fornisce una documentazione oggetto per oggetto al DOM.

+ +

Il DOM moderno è costruito utilizzando APIs multiple che lavorano insieme. Il DOM principale definisce gli oggetti che descrivono, fondamentalmente, un documento e gli oggetti al suo interno. Questo viene ampliato come richiesto da altre API che aggiungono nuove funzionalità e capacità al DOM. Ad esempio, l'HTML DOM API aggiunge il supporto per la rappresentazione di documenti HTML nel DOM principale.

+ +

DOM e JavaScript

+ +

Il breve esempio qui sotto, come quasi tutti gli esempi in questo riferimento, è {{glossary("JavaScript")}}. Che significa che è scrittp in JavaScript ma usa il DOM per accedere al documenti ed ai suoi elementi. Il DOM non è un linguaggio di programmazione, ma senza di esso, il linguaggio JavaScript non potrebbe avere nessun modello o conoscenza sulla pagina web HTML o XML e le loro componenti (ad es. elementi). Ogni elemento nel documento - il documento nel suo insieme, la testata, le tabelle all'interno del documento, le intestazioni delle tabelle, il testo all'interno della cella della tabella - è parte del document object model per quel documento, che può essere accessibile e manipolato usanto il DOM e linguaggi di scripting come Java.

+ +

Agli inizi, JavaScript e il DOM 

+ +

All'inizio, JavaScript e DOM erano strettamente intrecciati, ma alla fine si sono evoluti in entità separate. Il contenuto della pagina è memorizzato nel DOM e può essere consultato e manipolato tramite JavaScript, in modo da poter scrivere questa equazione approssimativa:

+ +

API = DOM + JavaScript

+ +

Il DOM è stato progettato per essere indipendente da qualsiasi particolare linguaggio di programmazione, rendendo la rappresentazione strutturale del documento disponibile da un'unica API coerente. Sebbene ci concentriamo esclusivamente su JavaScript in questa documentazione di riferimento, le implementazioni del DOM possono essere costruite per qualsiasi linguaggio, come dimostra questo esempio di Python:

+ +
# Esempio DOM in Python
+import xml.dom.minidom as m
+doc = m.parse(r"C:\Projects\Py\chap1.xml")
+doc.nodeName # DOM property of document object
+p_list = doc.getElementsByTagName("para")
+
+ +

Per ulteriori informazioni su quali tecnologie sono coinvolte nella scrittura di JavaScript sul Web, vedere JavaScript technologies overview.

+ +

Accedere al DOM

+ +

Tu non devi fare niente di speciale per avere accesso al DOM. Browser differenti hanno differenti implementazione del DOM, e le loro implementazioni variano in base alla conformazione dello standard DOM (il soggetto che tenta di 

+ +

Non devi fare nulla di speciale per iniziare a utilizzare il DOM. Browser diversi hanno implementazioni diverse del DOM e queste implementazioni presentano vari gradi di conformità allo standard DOM effettivo (un argomento che cerchiamo di evitare in questa documentazione), ma ogni browser Web utilizza alcuni modelli di oggetti per rendere accessibili le pagine Web tramite JavaScript .

+ +

Quando crei uno script, indipendentemente dal fatto che sia in linea in un elemento <script> o incluso nella pagina Web mediante un'istruzione di caricamento degli script, puoi immediatamente iniziare a utilizzare l'API {{domxref ("document")}} o {{domxref("Window", "window")}} per manipolare il documento stesso o per ottenere i figli di quel documento, che sono i vari elementi nella pagina web. La tua programmazione DOM potrebbe essere qualcosa di semplice come la seguente, che visualizza un messaggio di avviso utilizzando la funzione {{domxref("window.alert", "alert()")}} dalla funzione {{domxref("Window", "window")}} oppure può utilizzare metodi DOM più sofisticati per creare effettivamente nuovi contenuti, come nell'esempio più lungo di seguito.

+ +
<body onload="window.alert('Benvenuto nella mia pagina web!');">
+
+ +

Un altro esempio. Questa funzione crea un nuovo elemento H1, gli aggiunge del testo (all'elemento) e, infine, aggiunge l'H1 all'albero di questo documento.

+ +
<html>
+  <head>
+    <script>
+       // esegui questa funzione quando la pagina è stata caricata
+       window.onload = function() {
+
+         // crea un paio di elementi in una pagina HTML altrimenti vuota
+         const heading = document.createElement("h1");
+         const heading_text = document.createTextNode("Big Head!");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+
+ +

Tipi di dati fondamentali

+ +

Questo riferimento cerca di descrivere i vari oggetti e tipi in termini semplici. Tuttavia, ci sono diversi tipi di dati che vengono trasmessi all'API di cui dovresti essere a conoscenza.

+ +
+

Nota: poiché la stragrande maggioranza del codice che utilizza il DOM ruota attorno alla manipolazione di documenti HTML, è comune fare riferimento ai nodi nel DOM come elementi anche se, a rigor di termini, non tutti i nodi sono un elemento.

+
+ +

La tabella seguente descrive brevemente questi tipi di dati.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipi di dati (Interfaccia)Descrizione
{{domxref("Document")}} +

Quando un membro restituisce un oggetto di tipo documento (ad esempio, la proprietà ownerDocument di un elemento restituisce il document a cui appartiene), questo oggetto è l'oggetto del documento radice stesso. Il capitolo DOM document Reference descrive l'oggetto del documento.

+
{{domxref("Node")}}Ogni oggetto situato all'interno di un documento è un nodo di qualche tipo. In un documento HTML, un oggetto può essere un nodo elemento ma anche un nodo testo o nodo attributo.
{{domxref("Element")}}Il tipo element è basado sul node. Si riferisce a un elemento o un nodo di tipo element restituito da un membro dell'API DOM. Anziché dire, ad esempio, che il metodo{{domxref("document.createElement()")}} restituisce un riferimento a un oggetto a un node, diciamo solo che questo metodo restituisce l'element che è stato appena creato nel DOM. Gli oggetti element implementano l'interfaccia DOM Element e anche l'interfaccia Node più basilare, entrambe incluse in questo riferimento. In un documento HTML, gli elementi sono ulteriormente migliorati dall'interfaccia {{domxref("HTMLElement")}} dell'API DOM HTML e da altre interfacce che descrivono le capacità di tipi specifici di elementi (ad esempio {{domxref("HTMLTableElement")}} per {{HTMLElement("table")}} elements).
{{domxref("NodeList")}}Una nodeList è un array di elementi, simili al tipo ritornanto dal metodo.{{domxref("document.getElementsByTagName()")}}. Gli elementi nel nodeList sono accessibili, da indice, tramite due opzioni: +
    +
  • list.item(1)
    • +
  • list[1]
    • +
+ Questi due sono equivalenti. Nel primo, item() è un singolo metodo dell'oggetto nodeList. Quest'ultimo utilizza la tipica sintassi dell'array per recuperare il secondo elemento nell'elenco.
{{domxref("Attribute")}}Quando un attribute viene restituito da un membro (ad es. con il metodo createAttribute()), si ha un riferimento a un oggetto che espone un'interfaccia speciale (sebbene piccola) per gli attributi. Gli attributi sono nodi nel DOM proprio come gli elementi, anche se raramente li puoi usare come tali.
{{domxref("NamedNodeMap")}}Un namedNodeMap è simile a un array ma è possibile accedere agli elementi in base al nome o all'indice, sebbene quest'ultimo caso sia solo una comodità per l'enumerazione, poiché non sono in un ordine particolare nell'elenco. Un namedNodeMap ha un metodo item() per questo scopo e puoi anche aggiungere e rimuovere elementi da una namedNodeMap.
+ +

Ci sono anche alcune considerazioni terminologiche comuni da tenere a mente. È comune fare riferimento a qualsiasi nodo {{domxref ("Attribute")}} semplicemente come un attribute, ad esempio, e fare riferimento a un array di nodi DOM come nodeList. Troverai questi termini e altri da introdurre e utilizzare in tutta la documentazione.

+ +

interfaccia DOM

+ +

Questa guida riguarda gli oggetti e le cose reali che puoi usare per manipolare la gerarchia DOM. Ci sono molti punti in cui capire come questi lavori possono essere fonte di confusione. Ad esempio, l'oggetto che rappresenta l'elemento del modulo HTML ottiene la sua proprietà name dall'interfaccia HTMLFormElement ma la sua proprietà className dall'interfaccia HTMLElement. In entrambi i casi, la proprietà desiderata è semplicemente nell'oggetto modulo.
+
+ Ma la relazione tra gli oggetti e le interfacce che implementano nel DOM può essere confusa, e quindi questa sezione tenta di dire qualcosa sulle interfacce effettive nella specifica DOM e su come sono rese disponibili.

+ +

Interfacce ed oggetti

+ +

Molti oggetti prendono in prestito da diverse interfacce. L'oggetto tabella, ad esempio, implementa un'interfaccia specializzata {{domxref("HTMLTableElement")}}, che include metodi come createCaption e insertRow. Ma poiché è anche un elemento HTML, la table implementa l'interfaccia Element descritta nel capitolo DOM {{domxref ("Element")}}. E infine, poiché un elemento HTML è anche, per quanto riguarda il DOM, un nodo nella struttura ad albero dei nodi che compongono il modello a oggetti per una pagina HTML o XML, l'oggetto table implementa anche l'interfaccia Node di base, da quale Element deriva.

+ +

Quando si ottiene un riferimento a un oggetto table, come nell'esempio seguente, si utilizzano abitualmente tutte e tre queste interfacce in modo intercambiabile sull'oggetto, forse senza saperlo.

+ +
const table = document.getElementById("table");
+const tableAttrs = table.attributes; // Node/Element interface
+for (let i = 0; i < tableAttrs.length; i++) {
+  // HTMLTableElement interface: border attribute
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// HTMLTableElement interface: summary attribute
+table.summary = "note: increased border";
+
+ +

Principali interfacce nel DOM

+ +

Questa sezione elenca alcune delle interfacce più comunemente utilizzate nel DOM. L'idea non è di descrivere cosa fanno queste API qui, ma di darti un'idea del tipo di metodi e proprietà che vedrai molto spesso mentre usi il DOM. Queste API comuni sono usate negli esempi più lunghi nel capitolo DOM Examples alla fine di questo libro.

+ +

Gli oggetti document e window sono gli oggetti le cui interfacce si utilizzano generalmente più spesso nella programmazione DOM. In termini semplici, l'oggetto window rappresenta qualcosa di simile al browser e l'oggetto document è la radice del documento stesso. L'Element eredita dall'interfaccia del Node generico e insieme queste due interfacce forniscono molti dei metodi e delle proprietà che usi sui singoli elementi. Questi elementi possono anche avere interfacce specifiche per gestire il tipo di dati contenuti in tali elementi, come nell'esempio dell'oggetto tabella nella sezione precedente.

+ +

Di seguito è riportato un breve elenco di API comuni negli script di pagine Web e XML che utilizzano DOM.

+ + + +

Test dell'API DOM

+ +

Questo documento fornisce esempi per ogni interfaccia che è possibile utilizzare nel proprio sviluppo Web. In alcuni casi, gli esempi sono pagine HTML complete, con l'accesso DOM in un elemento <script>, l'interfaccia (ad es. Pulsanti) necessaria per accendere lo script in un modulo e gli elementi HTML su cui opera il DOM elencati come bene. In questo caso, puoi tagliare e incollare l'esempio in un nuovo documento HTML, salvarlo ed eseguire l'esempio dal browser.

+ +

Ci sono alcuni casi, tuttavia, quando gli esempi sono più concisi. Per eseguire esempi che dimostrano solo la relazione di base dell'interfaccia con gli elementi HTML, è possibile impostare una pagina di prova in cui è possibile accedere facilmente alle interfacce dagli script. La seguente pagina Web molto semplice fornisce un elemento <script> nell'intestazione in cui è possibile inserire funzioni che testano l'interfaccia, alcuni elementi HTML con attributi che è possibile recuperare, impostare o altrimenti manipolare e l'interfaccia utente Web necessaria per chiama quelle funzioni dal browser.

+ +

Puoi utilizzare questa pagina di prova o crearne una simile per testare le interfacce DOM che ti interessano e vedere come funzionano sulla piattaforma del browser. È possibile aggiornare il contenuto della funzione test() secondo necessità, creare più pulsanti o aggiungere elementi se necessario.

+ +
<html>
+<head>
+  <title>DOM Tests</title>
+  <script>
+    function setBodyAttr(attr, value) {
+      if (document.body) document.body[attr] = value;
+      else throw new Error("no support");
+    }
+  </script>
+</head>
+<body>
+  <div style="margin: .5in; height: 400px;">
+    <p><b><tt>text</tt></b></p>
+    <form>
+      <select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);">
+        <option value="black">black</option>
+        <option value="red">red</option>
+      </select>
+      <p><b><tt>bgColor</tt></b></p>
+      <select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);">
+        <option value="white">white</option>
+        <option value="lightgrey">gray</option>
+      </select>
+      <p><b><tt>link</tt></b></p>
+      <select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);">
+        <option value="blue">blue</option>
+        <option value="green">green</option>
+      </select>
+      <small>
+        <a href="http://some.website.tld/page.html" id="sample">
+          (sample link)
+        </a>
+      </small><br />
+      <input type="button" value="version" onclick="ver()" />
+    </form>
+  </div>
+</body>
+</html>
+
+ +

Per testare molte interfacce in una singola pagina —ad esempio una "suite" di proprietà che influisce sui colori di una pagina Web— è possibile creare una pagina di test simile con un'intera console di pulsanti, campi di testo e altri elementi HTML. La schermata seguente ti dà un'idea di come le interfacce possono essere raggruppate per il test.

+ +
+
Figure 0.1 Esempio DOM Test Page
+Image:DOM_Ref_Introduction_to_the_DOM.gif
+ +

In questo esempio, i menu drop-down, aggiornano dinamicamente tali aspetti accessibili della pagina Web come il colore di sfondo (bgColor), il colore dei collegamenti ipertestuali (aLink) e il colore del testo (text). Tuttavia, progettate le vostre pagine di test e testare le interfacce mentre le implementate è una parte importante dell'apprendimento dell'uso efficace del DOM.

+ + + + + +
{{DefaultAPISidebar("DOM")}}
diff --git a/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html new file mode 100644 index 0000000000..7e82547d5d --- /dev/null +++ b/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -0,0 +1,46 @@ +--- +title: Individuazione degli elementi DOM mediante selettori +slug: Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +--- +

L'API dei selettori fornisce metodi che consentono di recuperare in modo rapido e semplice i nodi {{domxref("Element")}} dal DOM confrontando una serie di selettori. Questo è molto più rapido rispetto alle tecniche passate, in cui era necessario, ad esempio, utilizzare un loop nel codice JavaScript per individuare gli elementi specifici che dovevi trovare.

+ +

L'interfaccia NodeSelector

+ +

Questa specifica aggiunge due nuovi metodi a qualsiasi oggetto che implementa le interfacce {{domxref("Document")}}, {{domxref("DocumentFragment")}}, o {{domxref("Element")}}:

+ +
+
querySelector
+
Restituisce il primo nodo {{domxref("Element")}} corrispondente nella sottostruttura del nodo. Se non viene trovato alcun nodo corrispondente, viene restituito null.
+
querySelectorAll
+
Restituisce una {{domxref("NodeList")}} contenente tutti i nodi Element corrispondenti all'interno della sottostruttura del nodo o una NodeList vuota se non vengono trovate corrispondenze.
+
+ +
Note: La {{domxref("NodeList")}} restituita da {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} non è dinamica, il che significa che le modifiche nel DOM non si riflettono nella collezione. Questo è diverso dagli altri metodi di DOM querying che restituiscono gli elenchi dei nodi dinamici.
+ +

È possibile trovare esempi e dettagli leggendo la documentazione per i metodi {{domxref("Element.querySelector()")}} e {{domxref("Element.querySelectorAll()")}}, nonché nell'articolo Code snippets for querySelector.

+ +

Selettori

+ +

I metodi di selezione accettano uno o più selettori separati da virgola per determinare quale elemento o elementi devono essere restituiti. Ad esempio, per selezionare tutti gli elementi paragrafo (p)  in un documento la cui classe CSS è warning o note, è possibile effettuare le seguenti operazioni:

+ +
var special = document.querySelectorAll("p.warning, p.note");
+ +

Puoi anche effettuare una query per ID. Per esempio:

+ +
var el = document.querySelector("#main, #basic, #exclamation");
+ +

Dopo aver eseguito il codice sopra, el contiene il primo elemento nel documento il cui ID è uno di main, basic, o exclamation.

+ +

Puoi usare qualsiasi selettore CSS con i metodi querySelector() e querySelectorAll().

+ +

Vedi anche

+ + diff --git a/files/it/web/api/domapplicationsregistry/getinstalled/index.html b/files/it/web/api/domapplicationsregistry/getinstalled/index.html new file mode 100644 index 0000000000..24657e5900 --- /dev/null +++ b/files/it/web/api/domapplicationsregistry/getinstalled/index.html @@ -0,0 +1,49 @@ +--- +title: DOMApplicationsRegistry.getInstalled() +slug: Web/API/DOMApplicationsRegistry/getInstalled +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/getInstalled +--- +

 

+ +

 

+ +

{{ ApiRef("Apps") }}

+ +

{{ non-standard_header() }}

+ +

Summary

+ +

Get a list of all installed apps from this origin. For example, if you call this on the Firefox Marketplace, you will get the list of apps installed by the Firefox Marketplace.

+ +
+

Note: Installable open web apps used to have a "single app per origin" security policy, but this was lifted as of Firefox 34/Firefox OS 2.1 (read this FAQ entry for more information). If you still need to support older versions, consider hosting your apps at separate origins; one strategy is to create different subdomains for your apps.

+
+ +

Syntax

+ +
var request = window.navigator.mozApps.getInstalled();
+
+ +

Errors

+ +

The string ERROR can be returned in DOMRequest.error.

+ +

Example

+ +
var request = window.navigator.mozApps.getInstalled();
+request.onerror = function(e) {
+  alert("Error calling getInstalled: " + request.error.name);
+};
+request.onsuccess = function(e) {
+  alert("Success, number of apps: " + request.result.length);
+  var appsRecord = request.result;
+};
+ +

Callers are expected to set the onsuccess and onerror callback properties of the returned object, as shown in this example. If the call is successful an array of App objects is returned in the result property of the returned object. In the example this is request.result.

+ + + + diff --git a/files/it/web/api/domapplicationsregistry/index.html b/files/it/web/api/domapplicationsregistry/index.html new file mode 100644 index 0000000000..4effc6546e --- /dev/null +++ b/files/it/web/api/domapplicationsregistry/index.html @@ -0,0 +1,89 @@ +--- +title: DOMApplicationsRegistry +slug: Web/API/DOMApplicationsRegistry +tags: + - API + - Apps + - Apps API + - NeedsTranslation + - Non-standard + - TopicStub +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry +--- +

{{ ApiRef("Apps") }}

+ +

{{ non-standard_header() }}

+ +

Provides support for installing, managing, and controlling Open Web apps in a browser. Currently implemented as {{ domxref('window.navigator.mozApps') }}.

+ +

Property

+ +
+
{{domxref("DOMApplicationsRegistry.mgmt")}}
+
A mgmt object that exposes functions that let dashboards manage and launch apps on a user's behalf.
+
+ +

Methods

+ +
+
{{ domxref("DOMApplicationsRegistry.checkInstalled()") }}
+
Checks whether an app has already been installed, taking its manifest as parameter.
+
{{ domxref("DOMApplicationsRegistry.install()") }}
+
Triggers the installation of an app. During the installation process, the app is validated and the user is prompted to approve the installation.
+
{{ domxref("DOMApplicationsRegistry.getSelf()") }}
+
Returns an object that contains an {{ domxref('app') }} object for the app.
+
{{ domxref("DOMApplicationsRegistry.getInstalled()") }}
+
Gets a list of all installed apps.
+
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatUnknown() }}16.0{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}16.0{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/it/web/api/domstring/index.html b/files/it/web/api/domstring/index.html new file mode 100644 index 0000000000..625d5762d3 --- /dev/null +++ b/files/it/web/api/domstring/index.html @@ -0,0 +1,56 @@ +--- +title: DOMString +slug: Web/API/DOMString +tags: + - API + - DOM + - Referenza + - String +translation_of: Web/API/DOMString +--- +
{{APIRef("DOM")}}
+ +

DOMString è una stringa UTF-16. Poiché JavaScript utilizza già tali stringhe, DOMString viene mappato direttamente su {{jsxref("String")}}.

+ +

Passare {{jsxref("null")}} ad un metodo o parametro che accetta una DOMString tipicamente si trasforma in "null".

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}{{Spec2('WebIDL')}}Riformulazione della definizione per rimuovere casi di bordo strani.
{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM2 Core')}}Nessun cambiamento da {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Vedi anche

+ + diff --git a/files/it/web/api/domtokenlist/index.html b/files/it/web/api/domtokenlist/index.html new file mode 100644 index 0000000000..dab0967959 --- /dev/null +++ b/files/it/web/api/domtokenlist/index.html @@ -0,0 +1,115 @@ +--- +title: DOMTokenList +slug: Web/API/DOMTokenList +tags: + - API + - DOM + - DOMTokenList + - Interfaccia + - Referenza +translation_of: Web/API/DOMTokenList +--- +
{{APIRef("DOM")}}
+ +

L'interfaccia DOMTokenList rappresenta un insieme di token separati dallo spazio. Tale insieme viene restituito da {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}}, {{domxref("HTMLAreaElement.relList")}}, {{domxref("HTMLIframeElement.sandbox")}}, o {{domxref("HTMLOutputElement.htmlFor")}}. Viene indicizzato a partire da 0 come con gli JavaScript {{jsxref("Array")}} oggetti. DOMTokenList è sempre case-sensitive.

+ +

Proprietà

+ +
+
{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}
+
È un integer che rappresenta il numero di oggetti memorizzati nell'oggetto.
+
{{domxref("DOMTokenList.value")}}
+
Il valore della lista come una {{domxref("DOMString")}}.
+
+ +

Metodi

+ +
+
{{domxref("DOMTokenList.item()")}}
+
Restituisce un elemento nell'elenco per il suo indice (restituisce undefined se il numero è maggiore o uguale alla lunghezza dell'elenco).
+
{{domxref("DOMTokenList.contains()")}}
+
Restituisce true se la lista contiene il token dato, altrimenti false.
+
{{domxref("DOMTokenList.add()")}}
+
Aggiunge il token indicato alla lista.
+
{{domxref("DOMTokenList.remove()")}}
+
Rimuove il token specificato dall'elenco.
+
{{domxref("DOMTokenList.replace()")}}
+
Sostituisce un token esistente con un nuovo token.
+
{{domxref("DOMTokenList.supports()")}}
+
Restituisce true se un determinato token si trova nei token supportati dell'attributo associato.
+
{{domxref("DOMTokenList.toggle()")}}
+
Rimuove un determinato token dall'elenco e restituisce false. Se il token non esiste viene aggiunto e la funzione restituisce true.
+
{{domxref("DOMTokenList.entries()")}}
+
Restituisce un {{jsxref("Iteration_protocols","iterator")}} consentendoti di passare attraverso tutte le coppie chiave/valore contenute in questo oggetto.
+
{{domxref("DOMTokenList.forEach()")}}
+
Esegue una funzione fornita una volta per elemento DOMTokenList.
+
{{domxref("DOMTokenList.keys()")}}
+
Restituisce un {{jsxref("Iteration_protocols", "iterator")}} consentendo di esaminare tutte le chiavi delle coppie chiave/valore contenute in questo oggetto.
+
{{domxref("DOMTokenList.values()")}}
+
Restituisce un {{jsxref("Iteration_protocols", "iterator")}} consentendo di esaminare tutti i valori delle coppie chiave/valore contenute in questo oggetto.
+
+ +

Esempi

+ +

Nel seguente semplice esempio, recuperiamo l'elenco di classi impostato su un elemento {{htmlelement("p")}} come una DOMTokenList usando {{domxref("Element.classList")}}, aggiungi una classe usando {{domxref("DOMTokenList.add()")}}, quindi aggiorna il {{domxref("Node.textContent")}} di <p> per uguagliare DOMTokenList.

+ +

Innanzitutto, l'HTML:

+ +
<p class="a b c"></p>
+ +

Ora JavaScript:

+ +
var para = document.querySelector("p");
+var classes = para.classList;
+para.classList.add("d");
+para.textContent = 'paragraph classList is "' + classes + '"';
+ +

L'output è simile a questo:

+ +

{{ EmbedLiveSample('Esempi', '100%', 60) }}

+ +

Taglio di spazi bianchi e rimozione di duplicati

+ +

I metodi che modificano DOMTokenList (come {{domxref("DOMTokenList.add()")}}) tagliano automaticamente gli spazi bianchi in eccesso e rimuovono i valori duplicati dall'elenco. Per esempio:

+ +
<span class="    d   d e f"></span>
+ +
var span = document.querySelector("span");
+var classes = span.classList;
+span.classList.add("x");
+span.textContent = 'span classList is "' + classes + '"';
+ +

L'output è simile a questo:

+ +

{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}

+ +

Specificazioni

+ + + + + + + + + + + + + + + + +
SpecificazioneStatoCommento
{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}{{Spec2("DOM WHATWG")}}Initial definition
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.DOMTokenList")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/api/domtokenlist/item/index.html b/files/it/web/api/domtokenlist/item/index.html new file mode 100644 index 0000000000..c81eedcbc9 --- /dev/null +++ b/files/it/web/api/domtokenlist/item/index.html @@ -0,0 +1,67 @@ +--- +title: DOMTokenList.item() +slug: Web/API/DOMTokenList/item +translation_of: Web/API/DOMTokenList/item +--- +

{{APIRef("DOM")}}

+ +

Il metodo item() dell'interfaccia {{domxref("DOMTokenList")}} restituisce un elemento nell'elenco per il suo indice.

+ +

Sintassi

+ +
tokenList.item(index);
+ +

Parametri

+ +
+
index
+
Una {{domxref("DOMString")}} che rappresenta l'indice dell'elemento che si desidera restituire.
+
+ +

Valore di ritorno

+ +

Una {{domxref("DOMString")}} che rappresenta l'elemento restituito. Restituisce undefined se il numero è maggiore o uguale alla lunghezza della lista.

+ +

Esempi

+ +

Nel seguente esempio recuperiamo l'elenco di classi impostate su un elemento {{htmlelement("span")}} come DOMTokenList usando {{domxref("Element.classList")}}. Quindi recuperiamo l'ultimo elemento nell'elenco usando item(length-1) e lo scriviamo nel <span>'s {{domxref("Node.textContent")}}.

+ +

Innanzitutto, l'HTML:

+ +
<span class="a b c"></span>
+ +

Ora JavaScript:

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+var item = classes.item(classes.length-1);
+span.textContent = item;
+ +

L'output è simile a questo:

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificazioneStatoCommento
{{SpecName('DOM WHATWG','#dom-domtokenlist-item','item()')}}{{Spec2('DOM WHATWG')}}Definizione iniziale
+ +

Compatibilità con i Browser

+ +
+ + +

{{Compat("api.DOMTokenList.item")}}

+
diff --git a/files/it/web/api/element/addeventlistener/index.html b/files/it/web/api/element/addeventlistener/index.html new file mode 100644 index 0000000000..6608e69bd3 --- /dev/null +++ b/files/it/web/api/element/addeventlistener/index.html @@ -0,0 +1,694 @@ +--- +title: EventTarget.addEventListener() +slug: Web/API/Element/addEventListener +tags: + - API + - DOM + - EventTarget + - Gestori di Eventi + - JavaScript + - Referenza + - Ricevere Eventi + - Rilevare Eventi + - addEventListener + - attachEvent + - eventi + - metodo + - mselementresize +translation_of: Web/API/EventTarget/addEventListener +--- +
{{APIRef("DOM Events")}}
+ +

Il metodo {{domxref("EventTarget")}} addEventListener() imposta una funzione che verrà chiamata ogni volta che l'evento specificato viene consegnato all'elemento di destinazione. I target comuni sono {{domxref("Element")}}, {{domxref("Document")}}, e {{domxref("Window")}}, ma la destinazione può essere qualsiasi oggetto che supporti eventi (come XMLHttpRequest).

+ +

addEventListener() funziona aggiungendo una funzione o un oggetto che implementa {{domxref("EventListener")}} all'elenco di listener di eventi per il tipo di evento specificato sul {{domxref("EventTarget")}} sul quale è chiamato.

+ +

Sintassi

+ +
target.addEventListener(type, listener[, options]);
+target.addEventListener(type, listener[, useCapture]);
+target.addEventListener(type, listener[, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla only
+ +

Parametri

+ +
+
type
+
Una stringa sensibile al maiuscolo/minuscolo che rappresenta il tipo di evento da assegnare.
+
listener
+
L'oggetto che riceve una notifica (un oggetto che implementa l'interfaccia {{domxref("Event")}}) quando si verifica un evento del tipo specificato. Questo deve essere un oggetto che implementa l'interfaccia {{domxref("EventListener")}}, o una funzione. Vedi {{anch("Il callback del listener di eventi")}} per i dettagli sul callback stesso.
+
options {{optional_inline}}
+
Un oggetto opzioni che specifica le caratteristiche del listener di eventi. Le opzioni disponibili sono: +
    +
  • capture: Un {{jsxref("Boolean")}} che indica che eventi di questo tipo verranno inviati al listener registrato prima di essere inviati a qualsiasi EventTarget sotto di esso nell'albero del DOM.
    • +
  • once: Un {{jsxref("Boolean")}} che indica che il listener dovrebbe essere invocato al massimo una volta dopo essere stato aggiunto. Se ritorna true, il listener verrebbe automaticamente rimosso quando invocato.
    • +
  • passive: Un {{jsxref("Boolean")}} che, se true, indica che la funzione specificata da listener non chiamerà mai {{domxref("Event.preventDefault", "preventDefault()")}}. Se un listener passivo chiama preventDefault(), l'user agent non farà altro che generare un avviso nella console. Vedi {{anch("Miglioramento delle prestazioni di scorrimento con i listeners passivi")}} per saperne di più.
    • +
  • {{non-standard_inline}} mozSystemGroup: Un {{jsxref("Boolean")}} che indica che l'ascoltatore deve essere aggiunto al gruppo di sistema. Disponibile solo nel codice in esecuzione in XBL o nel {{glossary("chrome")}} del browser Firefox.
    • +
+
+
useCapture {{optional_inline}}
+
Un {{jsxref("Boolean")}} che indica se eventi di questo tipo verranno inviati al listener registrato prima di essere inviati a qualsiasi EventTarget sotto di esso nell'albero del DOM. Gli eventi che stanno ribollendo verso l'alto attraverso l'albero non innescheranno un ascoltatore designato ad usare il capturing. Il bubbling e la cattura degli eventi sono due modi di propagare gli eventi che si verificano in un elemento che è annidato in un altro elemento, quando entrambi gli elementi hanno registrato un handle per quell'evento. La modalità di propagazione dell'evento determina l'ordine in cui gli elementi ricevono l'evento. Vedi DOM Level 3 Events e JavaScript Event order per una spiegazione dettagliata. Se non specificato, useCapture di default è false.
+
+
Note: Per gli ascoltatori di eventi collegati al target dell'evento, l'evento si trova nella fase target, piuttosto che nelle fasi di cattura e bubbling. Gli eventi nella fase di destinazione attiveranno tutti gli ascoltatori di un elemento nell'ordine in cui sono stati registrati, indipendentemente dal parametro useCapture.
+ +
Note: useCapture non è sempre stato opzionale. Idealmente, dovresti includerlo per la massima compatibilità con i browser.
+
+
wantsUntrusted {{Non-standard_inline}}
+
Un parametro specifico per Firefox (Gecko). Se è true, il listener riceve eventi sintetici inviati dal contenuto web (il valore predefinito è false per il browser {{glossary("chrome")}} e true per le normali pagine Web). Questo parametro è utile per il codice trovato nei componenti aggiuntivi e anche per il browser stesso.
+
+ +

Valore di ritorno

+ +

undefined

+ +

Note di utilizzo

+ +

Il callback del listener di eventi

+ +

Il listener di eventi può essere specificato come funzione di callback o come oggetto che implementa {{domxref("EventListener")}}, il cui metodo {{domxref("EventListener.handleEvent", "handleEvent()")}} funge da funzione di callback.

+ +

La stessa funzione di callback ha gli stessi parametri e il valore di ritorno del metodo handleEvent() cioè, il callback accetta un singolo parametro: un oggetto basato su {{domxref("Event")}} che descrive l'evento che si è verificato e non restituisce nulla.

+ +

Ad esempio, un callback del gestore di eventi che può essere utilizzato per gestire entrambi gli eventi {{event("fullscreenchange")}} e {{event("fullscreenerror")}} potrebbe avere il seguente aspetto:

+ +
function eventHandler(event) {
+  if (event.type == 'fullscreenchange') {
+    /* gestire un interruttore a schermo intero */
+  } else /* fullscreenerror */ {
+    /* gestire un errore di commutazione a schermo intero */
+  }
+}
+ +

Rilevamento sicuro del supporto opzionale

+ +

Nelle versioni precedenti della specifica DOM, il terzo parametro di addEventListener() era un valore booleano che indicava se utilizzare o meno l'acquisizione. Nel corso del tempo, è diventato chiaro che erano necessarie più opzioni. Piuttosto che aggiungere altri parametri alla funzione (complicando enormemente le cose quando si tratta di valori opzionali), il terzo parametro è stato modificato in un oggetto che può contenere varie proprietà che definiscono i valori delle opzioni per configurare il processo di rimozione del listener di eventi.

+ +

Poiché i browser più vecchi (così come alcuni browser non troppo vecchi) presuppongono ancora che il terzo parametro sia un booleano, è necessario creare il codice per gestire questo scenario in modo intelligente. Puoi farlo utilizzando il rilevamento delle funzioni per ciascuna delle opzioni che ti interessano.

+ +

Ad esempio, se si desidera verificare l'opzione passive:

+ +
var passiveSupported = false;
+
+try {
+  var options = {
+    get passive() { // Questa funzione verrà chiamata quando il browser
+                    //     tenta di accedere alla proprietà passiva.
+      passiveSupported = true;
+    }
+  };
+
+  window.addEventListener("test", options, options);
+  window.removeEventListener("test", options, options);
+} catch(err) {
+  passiveSupported = false;
+}
+
+ +

Questo crea un oggetto options con una funzione getter per la proprietà passive; il getter imposta una flag, passiveSupported, è true se viene chiamato. Ciò significa che se il browser controlla il valore della proprietà passive sull'oggetto options, passiveSupported sarà impostato su true; altrimenti rimarrà false. Chiamiamo quindi addEventListener() per impostare un gestore di eventi falsi, specificando tali opzioni, in modo che le opzioni vengano controllate se il browser riconosce un oggetto come terzo parametro. Quindi, chiamiamo removeEventListener() per pulire dopo noi stessi. (Nota che handleEvent() viene ignorato sui listener di eventi che non vengono chiamati.)

+ +

Puoi verificare se un'opzione è supportata in questo modo. Basta aggiungere un getter per quella opzione usando il codice simile a quello mostrato sopra.

+ +

Quindi, quando vuoi creare un listener di eventi effettivo che utilizza le opzioni in questione, puoi fare qualcosa di simile a questo:

+ +
someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
+                               ? { passive: true } : false);
+ +

Qui stiamo aggiungendo un listener per l'evento {{event("mouseup")}} sull'elemento someElement. Per il terzo parametro, se passiveSupported è true, stiamo specificando un oggetto options con passive impostato su true; altrimenti, sappiamo che dobbiamo passare un booleano e passiamo false come valore del parametro useCapture.

+ +

Se preferisci, puoi usare una libreria di terze parti come Modernizr o Detect It per fare questo test per te.

+ +

È possibile ottenere ulteriori informazioni dall'articolo su EventListenerOptions dal gruppo di Web Incubator Community.

+ +

Esempi

+ +

Aggiungere un semplice listener

+ +

Questo esempio dimostra come utilizzare addEventListener() per controllare i click del mouse su un elemento.

+ +

HTML

+ +
<table id="outside">
+    <tr><td id="t1">one</td></tr>
+    <tr><td id="t2">two</td></tr>
+</table>
+
+ +

JavaScript

+ +
// Funzione per modificare il contenuto di t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "three") {
+    t2.firstChild.nodeValue = "two";
+  } else {
+    t2.firstChild.nodeValue = "three";
+  }
+}
+
+// Aggiungere listener di eventi alla tabella
+var el = document.getElementById("outside");
+el.addEventListener("click", modifyText, false);
+
+ +

In questo codice, modifyText() è un listener per gli eventi click registrati usando addEventListener(). Un click in qualsiasi punto della tabella esegue il gestore ed esegue modifyText().

+ +

Risultato

+ +

{{EmbedLiveSample('Aggiungere_un_semplice_listener')}}

+ +

Listener di eventi con funzione anonima

+ +

Qui, daremo un'occhiata a come utilizzare una funzione anonima per passare parametri nel listener di eventi.

+ +

HTML

+ +
<table id="outside">
+    <tr><td id="t1">one</td></tr>
+    <tr><td id="t2">two</td></tr>
+</table>
+ +

JavaScript

+ +
// Funzione per modificare il contenuto di t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Funzione per aggiungere listener alla tabella
+var el = document.getElementById("outside");
+el.addEventListener("click", function(){modifyText("four")}, false);
+
+ +

Nota che il listener è una funzione anonima che incapsula codice che è quindi, a sua volta, in grado di inviare parametri alla funzione modifyText(), che è responsabile per rispondere effettivamente all'evento.

+ +

Risultato

+ +

{{EmbedLiveSample('Listener_di_eventi_con_funzione_anonima')}}

+ +

Listener di eventi con una funzione a freccia

+ +

Questo esempio dimostra un semplice listener di eventi implementato utilizzando la notazione della funzione a freccia.

+ +

HTML

+ +
<table id="outside">
+    <tr><td id="t1">one</td></tr>
+    <tr><td id="t2">two</td></tr>
+</table>
+ +

JavaScript

+ +
// Funzione per modificare il contenuto di t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Aggiungere un listener alla tabella con una funzione a freccia
+var el = document.getElementById("outside");
+el.addEventListener("click", () => { modifyText("four"); }, false);
+
+ +

Risultato

+ +

{{EmbedLiveSample('Listener_di_eventi_con_una_funzione_a_freccia')}}

+ +

Si noti che, mentre le funzioni anonime e le frecce sono simili, hanno diversi collegamenti this. Mentre le funzioni anonime (e tutte le funzioni JavaScript tradizionali) creano i propri collegamenti this, le funzioni a freccia ereditano il vincolo this della funzione di contenimento.

+ +

Ciò significa che le variabili e le costanti disponibili per la funzione di contenimento sono disponibili anche per il gestore di eventi quando si utilizza una funzione di freccia.

+ +

Esempio di utilizzo delle opzioni

+ +

HTML

+ +
<div class="outer">
+    outer, once & none-once
+    <div class="middle" target="_blank">
+        middle, capture & none-capture
+        <a class="inner1" href="https://www.mozilla.org" target="_blank">
+            inner1, passive & preventDefault(which is not allowed)
+        </a>
+        <a class="inner2" href="https://developer.mozilla.org/" target="_blank">
+            inner2, none-passive & preventDefault(not open new page)
+        </a>
+    </div>
+</div>
+
+ +

CSS

+ +
    .outer, .middle, .inner1, .inner2 {
+        display:block;
+        width:520px;
+        padding:15px;
+        margin:15px;
+        text-decoration:none;
+    }
+    .outer{
+        border:1px solid red;
+        color:red;
+    }
+    .middle{
+        border:1px solid green;
+        color:green;
+        width:460px;
+    }
+    .inner1, .inner2{
+        border:1px solid purple;
+        color:purple;
+        width:400px;
+    }
+
+ +

JavaScript

+ +
    let outer  = document.getElementsByClassName('outer') [0];
+    let middle = document.getElementsByClassName('middle')[0];
+    let inner1 = document.getElementsByClassName('inner1')[0];
+    let inner2 = document.getElementsByClassName('inner2')[0];
+
+    let capture = {
+        capture : true
+    };
+    let noneCapture = {
+        capture : false
+    };
+    let once = {
+        once : true
+    };
+    let noneOnce = {
+        once : false
+    };
+    let passive = {
+        passive : true
+    };
+    let nonePassive = {
+        passive : false
+    };
+
+
+    outer.addEventListener('click', onceHandler, once);
+    outer.addEventListener('click', noneOnceHandler, noneOnce);
+    middle.addEventListener('click', captureHandler, capture);
+    middle.addEventListener('click', noneCaptureHandler, noneCapture);
+    inner1.addEventListener('click', passiveHandler, passive);
+    inner2.addEventListener('click', nonePassiveHandler, nonePassive);
+
+    function onceHandler(event) {
+        alert('outer, once');
+    }
+    function noneOnceHandler(event) {
+        alert('outer, none-once, default');
+    }
+    function captureHandler(event) {
+        //event.stopImmediatePropagation();
+        alert('middle, capture');
+    }
+    function noneCaptureHandler(event) {
+        alert('middle, none-capture, default');
+    }
+    function passiveHandler(event) {
+        // Unable to preventDefault inside passive event listener invocation.
+        event.preventDefault();
+        alert('inner1, passive, open new page');
+    }
+    function nonePassiveHandler(event) {
+        event.preventDefault();
+        //event.stopPropagation();
+        alert('inner2, none-passive, default, not open new page');
+    }
+
+ +

Risultato

+ +

Fai click rispettivamente sui contenitori esterni, centrali e interni per vedere come funzionano le opzioni.

+ +

{{ EmbedLiveSample('Esempio_di_utilizzo_delle_opzioni', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}

+ +

Prima di utilizzare un particolare valore nell'oggetto options è una buona idea assicurarsi che il browser dell'utente lo supporti, poiché si tratta di un'aggiunta che non tutti i browser hanno supportato storicamente. Vedi {{anch("Rilevamento sicuro del supporto opzionale")}} per i dettagli.

+ +

Altre note

+ +

Perchè usare addEventListener?

+ +

addEventListener() è il modo per registrare un listener di eventi come specificato nel DOM W3C. I benefici sono i seguenti:

+ + + +

Il modo alternativo, più vecchio per registrare i listener, è descritto di seguito.

+ +

Aggiunta di un listener durante la spedizione dell'evento

+ +

Se un {{domxref("EventListener")}} viene aggiunto ad un {{domxref("EventTarget")}} mentre sta elaborando un evento, quell'evento non attiva il listener. Tuttavia, lo stesso listener può essere attivato durante una fase successiva del flusso di eventi, come la fase di bubbling.

+ +

Più listeners identici

+ +

Se più EventListener indentici sono registrati sullo stesso EventTarget con gli stessi parametri, le istanze duplicate vengono scartate. Non causano l'EventListener da chiamare due volte e non devono essere rimossi manualmente con il metodo {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}. Nota tuttavia che quando si utilizza una funzione anonima come gestore, tali listener NON saranno identici poiché le funzioni anonime non sono identiche anche se definite utilizzando il codice sorgente invariato SAME chiamato semplicemente ripetutamente, anche se in un ciclo. Tuttavia, definire ripetutamente la stessa funzione denominata in questi casi può essere più problematico. (vedi Problemi di memoria di seguito.)

+ +

Il valore di this all'interno del gestore

+ +

È spesso preferibile fare riferimento all'elemento su cui è stato attivato il gestore eventi, ad esempio quando si utilizza un gestore generico per un insieme di elementi simili.

+ +

Se si collega un handler ad un elemento utilizzando addEventListener(), il valore di this all'interno del gestore è un riferimento all'elemento. È uguale al valore della proprietà currentTarget dell'argomento evento che viene passato al gestore.

+ +
my_element.addEventListener('click', function (e) {
+  console.log(this.className)           // registra il className di my_element
+  console.log(e.currentTarget === this) // ritorna `true`
+})
+
+ +

Come promemoria, le funzioni freccia non hanno il loro this contesto.

+ +
my_element.addEventListener('click', (e) => {
+  console.log(this.className)           // WARNING: `this` is not `my_element`
+  console.log(e.currentTarget === this) // logs `false`
+})
+ +

Se un gestore di eventi (ad esempio, {{domxref("Element.onclick", "onclick")}}) è specificato su un elemento nel codice sorgente HTML, il codice JavaScript nel valore dell'attributo viene effettivamente racchiuso in una funzione di gestore che associa il valore di this in modo coerente con addEventListener(); un'occorrenza di this all'interno del codice rappresenta un riferimento all'elemento.

+ +
<table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' -->
+  ...
+</table>
+
+ +

Si noti che il valore di this all'interno di una funzione, chiamato dal codice nel valore dell'attributo, si comporta come per regole standard. Questo è mostrato nel seguente esempio:

+ +
<script>
+  function logID() { console.log(this.id); }
+</script>
+<table id="my_table" onclick="logID();"><!-- when called, `this` will refer to the global object -->
+  ...
+</table>
+
+ +

Il valore di this all'interno di logID() è un riferimento all'oggetto globale {{domxref("Window")}} (o undefined nel caso della strict mode).

+ +

Specificare this usando bind()

+ +

Il metodo Function.prototype.bind() consente di specificare il valore che dovrebbe essere usato come this per tutte le chiamate a una determinata funzione. Ciò ti consente di bypassare facilmente i problemi in cui non è chiaro quale sarà this a seconda del contesto in cui è stata chiamata la tua funzione. Nota, tuttavia, che è necessario mantenere un riferimento per l'ascoltatore in modo da poterlo rimuovere in seguito.

+ +

Questo è un esempio con e senza bind():

+ +
var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, as |this| is the element
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', as |this| is bound to newly created object
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+var s = new Something(document.body);
+
+ +

Un'altra soluzione sta utilizzando una funzione speciale chiamata handleEvent() per catturare qualsiasi evento:

+ +
var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', as this is bound to newly created object
+    switch(event.type) {
+      case 'click':
+        // some code here...
+        break;
+      case 'dblclick':
+        // some code here...
+        break;
+    }
+  };
+
+  // Note that the listeners in this case are |this|, not this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // You can properly remove the listeners
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+var s = new Something(document.body);
+
+ +

Un altro modo di gestire il riferimento a this è passare ad EventListener una funzione che chiama il metodo dell'oggetto che contiene i campi a cui è necessario accedere:

+ +
class SomeClass {
+
+  constructor() {
+    this.name = 'Something Good';
+  }
+
+  register() {
+    var that = this;
+    window.addEventListener('keydown', function(e) {return that.someMethod(e);});
+  }
+
+  someMethod(e) {
+    console.log(this.name);
+    switch(e.keyCode) {
+      case 5:
+        // some code here...
+        break;
+      case 6:
+        // some code here...
+        break;
+    }
+  }
+
+}
+
+var myObject = new SomeClass();
+myObject.register();
+ +

Legacy Internet Explorer e attachEvent

+ +

Nelle versioni di Internet Explorer precedenti a IE 9, devi usare {{domxref("EventTarget.attachEvent", "attachEvent()")}}, piuttosto che lo standard addEventListener(). Per IE, modifichiamo l'esempio precedente per:

+ +
if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+
+ +

C'è un inconveniente di attachEvent(): il valore di this sarà un riferimento all'oggetto window, invece dell'elemento su cui è stato chiamato.

+ +

Il metodo attachEvent() potrebbe essere associato all'evento onresize per rilevare quando alcuni elementi di una pagina Web sono stati ridimensionati. L'evento proprietario mselementresize quando abbinato al metodo addEventListener di registrazione dei gestori di eventi, fornisce funzionalità simili a onresize, attivando quando alcuni elementi HTML vengono ridimensionati.

+ +

Compatibilità

+ +

Puoi lavorare attorno a addEventListener(), removeEventListener(), {{domxref("Event.preventDefault()")}}, e {{domxref("Event.stopPropagation()")}} non supportati da Internet Explorer 8 di usando il seguente codice all'inizio del tuo script. Il codice supporta l'uso di handleEvent() e anche l'evento {{event("DOMContentLoaded")}}.

+ +
+

Note: useCapture non è supportato, in quanto IE 8 non ha alcun metodo alternativo. Il seguente codice aggiunge solo il supporto per IE 8. Questo polyfill di IE 8 funziona solo in modalità standard: è richiesta una dichiarazione doctype.

+
+ +
(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (typeof listener.handleEvent != 'undefined') {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var counter=0;
+      while (counter<eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();
+ +

Il modo più antico per registrare i listeners

+ +

addEventListener() è stato introdotto con la specifica DOM 2 Prima di allora, gli ascoltatori di eventi sono stati registrati come segue:

+ +
// Passando un riferimento alla funzione - non aggiungere "()" dopo di esso, che chiamerebbe la funzione!
+el.onclick = modifyText;
+
+// Using a function expression
+element.onclick = function() {
+  // ... function logic ...
+};
+
+ +

Questo metodo sostituisce il listener dell'evento click esistente sull'elemento se ce n'è uno. Altri eventi e gestori di eventi associati come blur (onblur) e keypress (onkeypress) si comportano in modo simile.

+ +

Poiché era essenzialmente parte di {{glossary("DOM", "DOM 0")}}, questa tecnica per aggiungere listener di eventi è ampiamente supportata e non richiede uno speciale codice cross-browser. Viene normalmente utilizzato per registrare dinamicamente i listener di eventi a meno che non siano necessarie le funzionalità extra di addEventListener().

+ +

Problemi di memoria

+ +
var els = document.getElementsByTagName('*');
+
+
+// Case 1
+for(var i = 0; i < els.length; i++) {
+  els[i].addEventListener("click", function(e){/* do something */}, false);
+}
+
+
+// Case 2
+function processEvent(e) {
+  /* do something */
+}
+
+for(var i = 0; i < els.length; i++){
+  els[i].addEventListener("click", processEvent, false);
+}
+
+ +

Nel primo caso sopra, viene creata una nuova funzione (anonima) di gestione con ogni iterazione del ciclo. Nel secondo caso, la stessa funzione dichiarata in precedenza viene utilizzata come gestore di eventi, il che si traduce in un minore consumo di memoria poiché è stata creata una sola funzione di gestore. Inoltre, nel primo caso, non è possibile chiamare {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} perché non viene mantenuto alcun riferimento alla funzione anonima (o qui, non mantenuto a nessuna delle più funzioni anonime che il loop potrebbe creare.) Nel secondo caso, è possibile eseguire myElement.removeEventListener("click", processEvent, false) perchè processEvent è il riferimento alla funzione.

+ +

In realtà, per quanto riguarda il consumo di memoria, la mancanza di mantenere un riferimento alla funzione non è il vero problema; piuttosto è la mancanza di mantenere un riferimento di funzione STATICO. In entrambi i casi di problemi di seguito, viene mantenuto un riferimento alla funzione, ma poiché viene ridefinito a ogni iterazione, non è statico. Nel terzo caso, il riferimento alla funzione anonima viene riassegnato ad ogni iterazione. Nel quarto caso, l'intera definizione di funzione è invariata, ma viene ancora ripetutamente definita come se fosse nuova (a meno che non fosse [[promoted]] dal compilatore) e quindi non sia statica. Pertanto, sebbene sembrino essere semplicemente [[Multiple identifier event listers]], in entrambi i casi ogni iterazione creerà invece un nuovo listener con il proprio riferimento univoco alla funzione del gestore. Tuttavia, poiché la definizione della funzione stessa non cambia, la STESSA funzione può ancora essere chiamata per ogni listener duplicato (specialmente se il codice viene ottimizzato).

+ +

Anche in entrambi i casi, poiché il riferimento alla funzione è stato mantenuto ma ripetutamente ridefinito con ogni aggiunta, l'istruzione remove di sopra può ancora rimuovere un listener, ma ora solo l'ultimo aggiunto.

+ +
// Solo a scopo illustrativo: nota che "MISTAKE" di [j] per [i] causando così l'associazione di tutti gli eventi desiderati allo STESSO elemento
+
+// Case 3
+for (var i = 0, j = 0 ; i < els.length ; i++) {
+  /* do lots of stuff with */
+  els[j].addEventListener("click", processEvent = function(e){/* do something */}, false);
+}
+
+// Case 4
+for (var i = 0, j = 0 ; i < els.length ; i++) {
+  /* do lots of stuff with j */
+  function processEvent(e){/* do something */};
+  els[j].addEventListener("click", processEvent, false);
+}
+ +

Miglioramento delle prestazioni di scorrimento con i listeners passivi

+ +

Secondo la specifica, il valore predefinito per l'opzione passive è sempre falso. Tuttavia, questo introduce il potenziale per gli ascoltatori di eventi che gestiscono determinati eventi di tocco (tra gli altri) per bloccare il thread principale del browser mentre sta tentando di gestire lo scrolling, con conseguente enorme riduzione delle prestazioni durante la gestione dello scorrimento.

+ +

Per evitare questo problema, alcuni browser (in particolare, Chrome e Firefox) hanno modificato il valore predefinito dell'opzione passive in true per gli eventi {{event("touchstart")}} e {{event("touchmove")}} sui nodi a livello del documento {{domxref("Window")}}, {{domxref("Document")}}, e {{domxref("Document.body")}}. Questo impedisce al listener di eventi di essere chiamato, quindi non può bloccare il rendering della pagina mentre l'utente sta scorrendo.

+ +
+

Note: Vedi la tabella di compatibilità qui sotto se hai bisogno di sapere quali browser (e / o quali versioni di quei browser) implementano questo comportamento alterato.

+
+ +

Puoi sovrascrivere questo comportamento impostando esplicitamente il valore di passive a false, come mostrato qui:

+ +
/* Feature detection */
+var passiveIfSupported = false;
+
+try {
+  window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { passiveIfSupported = { passive: true }; } }));
+} catch(err) {}
+
+window.addEventListener('scroll', function(event) {
+  /* do something */
+  // can't use event.preventDefault();
+}, passiveIfSupported );
+
+ +

Nei browser meno recenti che non supportano il parametro options su addEventListener(), il tentativo di utilizzarlo impedisce l'utilizzo dell'argomento useCapture senza utilizzare correttamente il rilevamento delle funzionalità.

+ +

Non è necessario preoccuparsi del valore di passive per l'evento di base {{event("scroll")}}. Poiché non può essere annullato, i listener di eventi non possono comunque bloccare il rendering della pagina.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificazioneStatoCommento
{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}{{Spec2("DOM2 Events")}}Definizione inziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.EventTarget.addEventListener", 3)}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/attributes/index.html b/files/it/web/api/element/attributes/index.html new file mode 100644 index 0000000000..5bd14f3e4b --- /dev/null +++ b/files/it/web/api/element/attributes/index.html @@ -0,0 +1,120 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +tags: + - API + - Attributi + - DOM + - Element + - Proprietà + - Referenza +translation_of: Web/API/Element/attributes +--- +

{{ APIRef("DOM") }}

+ +

La proprietà Element.attributes restituisce una raccolta in tempo reale di tutti i nodi di attributo registrati nel nodo specificato. È una {{domxref("NamedNodeMap")}}, non un Array, quindi non ha metodi predefiniti degli {{jsxref("Array")}} e non ha i metodi {{domxref("Attr")}} dei nodi che possono differire tra i browser. Per essere più specifici, attributes è una coppia chiave/valore di stringhe che rappresenta qualsiasi informazione riguardante quell'attributo.

+ +

Sintassi

+ +
var attr = element.attributes;
+
+ +

Esempio

+ +

Esempi basilari

+ +
// Ottenere il primo elemento <p> nel documento
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+ +

Enumerazione degli attributi degli elementi

+ +

L'indicizzazione numerica è utile per passare attraverso tutti gli attributi di un elemento.
+ L'esempio seguente esegue i nodi dell'attributo per l'elemento nel documento con id "paragraph" e stampa il valore di ciascun attributo.

+ +
<!DOCTYPE html>
+
+<html>
+
+ <head>
+  <title>Attributes example</title>
+  <script type="text/javascript">
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // First, let's verify that the paragraph has some attributes
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i >= 0; i--) {
+         output += attrs[i].name + "->" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No attributes to show";
+     }
+   }
+  </script>
+ </head>
+
+<body>
+ <p id="paragraph" style="color: green;">Sample Paragraph</p>
+ <form action="">
+  <p>
+    <input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();">
+    <input id="result" type="text" value="">
+  </p>
+ </form>
+</body>
+</html>
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}Nessun cambiamento da {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.attributes")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/childnodes/index.html b/files/it/web/api/element/childnodes/index.html new file mode 100644 index 0000000000..f56bcc4380 --- /dev/null +++ b/files/it/web/api/element/childnodes/index.html @@ -0,0 +1,99 @@ +--- +title: Node.childNodes +slug: Web/API/Element/childNodes +translation_of: Web/API/Node/childNodes +--- +
+
{{APIRef("DOM")}}
+
+ +

La proprietà di sola lettura Node.childNodes restituisce una {{domxref("NodeList")}} dinamica di {{domxref("Node","nodi")}} figli dell'elemento dato in cui il primo nodo figlio viene assegnato all'indice 0.

+ +

Sintassi

+ +
var nodeList = elementNodeReference.childNodes;
+
+ +

Esempi

+ +

Utilizzo semplice

+ +
// parg è un riferimento a un elemento <p>
+
+// Innanzitutto controlliamo che l'elemento abbia dei nodi figli
+if (parg.hasChildNodes()) {
+  var children = parg.childNodes;
+
+  for (var i = 0; i < children.length; i++) {
+    // fare qualcosa con ogni bambino da children[i]
+    // NOTA: l'elenco è dinamico, l'aggiunta o la rimozione di bambini modificherà l'elenco
+  }
+}
+ +

Rimuovi tutti i bambini da un nodo

+ +
// Questo è un modo per rimuovere tutti i bambini da una
+// finestra di nodo è un riferimento ad un oggetto
+
+while (box.firstChild) {
+    //L'elenco è DINAMICO, quindi indicizzerà nuovamente ogni chiamata
+    box.removeChild(box.firstChild);
+}
+ +

Appunti

+ +

Gli elementi nella raccolta di nodi sono oggetti e non stringhe. Per ottenere dati da oggetti nodo, usa le loro proprietà (ad esempio elementNodeReference.childNodes[1].nodeName per ottenere il nome, ecc.).

+ +

L'oggetto document ha 2 figli: la dichiarazione Doctype e l'elemento root, in genere documentElement. (Nei documenti (X)HTML questo è l'elemento HTML.)

+ +

childNodes include tutti i nodi figli, inclusi nodi non-elemento come nodi di testo e commenti. Per ottenere una raccolta di soli elementi, usa {{domxref("ParentNode.children")}}.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM3 Core')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.childNodes")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/classlist/index.html b/files/it/web/api/element/classlist/index.html new file mode 100644 index 0000000000..3d86fa8400 --- /dev/null +++ b/files/it/web/api/element/classlist/index.html @@ -0,0 +1,288 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +tags: + - API + - DOM + - Element + - Proprietà + - Read-only + - Referenza +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

La proprietà Element.classList di sola lettura restituisce una raccolta {{domxref("DOMTokenList")}} dinamica delle classi dell'elemento.

+ +

L'utilizzo di classList è una comoda alternativa all'accesso all'elenco di classi di un elemento come stringa delimitata dallo spazio tramite {{domxref("element.className")}}.

+ +

Sintassi

+ +
const elementClasses = elementNodeReference.classList;
+
+ +

elementClasses è una {{domxref("DOMTokenList")}} che rappresenta l'attributo class di elementNodeReference. Se l'attributo class non è stato impostato o è vuoto elementClasses.length ritorna 0. element.classList è di sola lettura, sebbene sia possibile modificarlo utilizzando i metodi add() e remove().

+ +

Metodi

+ +
+
add( String [, String [, ...]] )
+
Aggiunge le classi specificate. Se queste classi esistono già nell'attributo class dell'elemento, vengono ignorate.
+
remove( String [, String [, ...]] )
+
+

Rimuove le classi specificate.

+ +
Nota: La rimozione di una classe inesistente NON genera un errore.
+
+
item( Number )
+
Restituisce il valore della classe per indice nella collezione.
+
toggle( String [, force] )
+
Quando è presente un solo argomento: aggiunge/rimuove il valore della classe; ad esempio, se la classe esiste, la rimuove e restituisce false, altrimenti, la aggiunge e restituisce true.
+
+ Quando è presente un secondo argomento: Se il secondo argomento restituisce true, aggiunge la classe specificata; se restituisce false, la rimuove.
+
contains( String )
+
Verifica se il valore di classe specificato esiste nell'attributo class dell'elemento.
+
replace( vecchiaClasse, nuovaClasse )
+
Sostituisce una classe esistente con una nuova classe.
+
+ +

Esempi

+ +
const div = document.createElement('div');
+div.className = 'foo';
+
+// il nostro stato iniziale: <div class="foo"></div>
+console.log(div.outerHTML);
+
+// usare l'API classList per rimuovere e aggiungere classi
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// <div class="anotherclass"></div>
+console.log(div.outerHTML);
+
+// se visible è impostato rimuovilo, altrimenti aggiungilo
+div.classList.toggle("visible");
+
+// aggiungi/rimuovi visible, a seconda del test condizionale, i meno di 10
+div.classList.toggle("visible", i < 10 );
+
+console.log(div.classList.contains("foo"));
+
+// aggiungere o rimuovere più classi
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// aggiungere o rimuovere più classi utilizzando la spread syntax
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// sostituire la classe "foo" con la classe "bar"
+div.classList.replace("foo", "bar");
+ +
+

Le versioni di Firefox precedenti alla 26 non implementano l'uso di diversi argomenti nei metodi add/remove/toggle. Vedi https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +
+
+ +

Polyfill

+ +

L'evento legacy onpropertychange può essere utilizzato per creare un mockup dinamico di classList dinamico grazie alla proprietà Element.prototype.className che attiva l'evento specificato una volta modificato.

+ +

Il seguente polyfill sia per classList che per DOMTokenList garantisce la piena conformità (copertura) per tutti i metodi e le proprietà standard di Element.prototype.classList per i browser IE10-IE11 oltre ad un comportamento quasi conforme per IE 6-9. Controlla:

+ +
// 1. String.prototype.trim polyfill
+if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
+(function(window){"use strict"; // prevent global namespace pollution
+if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
+var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
+  if (V === "") throw new DOMException(
+    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
+  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
+    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
+}
+// 2. Implement the barebones DOMTokenList livelyness polyfill
+if (typeof DOMTokenList !== "function") (function(window){
+    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
+    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
+    function DOMTokenList(){
+        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
+    }
+    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
+    DOMTokenList.prototype.add = function(){
+        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
+            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
+                if (this[i] === val) continue a; else resStr += " " + this[i];
+            this[Len] = val, proto.length += 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    DOMTokenList.prototype.remove = function(){
+        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
+            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
+                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
+            if (!is) continue;
+            delete this[Len], proto.length -= 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    window.DOMTokenList = DOMTokenList;
+    function whenPropChanges(){
+        var evt = window.event, prop = evt.propertyName;
+        if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) {
+            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
+            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
+            var oldLen = protoObjProto.length;
+            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
+                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
+                resTokenList[cI-sub] = tokens[cI];
+            }
+            for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            if(prop !== "classList") return;
+            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
+            skipPropChange = 0, resTokenList.length = tokens.length - sub;
+        }
+    }
+    function polyfillClassList(ele){
+        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
+        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
+        allowTokenListConstruction = 1;
+        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
+        finally { allowTokenListConstruction = 0 }
+        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
+        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
+            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
+            this[cI-sub] = toks[cI];
+        }
+        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
+        if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM
+            enumerable:   1, get: function(){return resTokenList},
+            configurable: 0, set: function(newVal){
+                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
+                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
+                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
+                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
+                    resTokenList[cI-sub] = toks[cI];
+                }
+                for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            }
+        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
+            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
+        }); defineProperty(protoObjProto, " uCL", {
+            enumerable: 0, configurable: 0, writeable: 0, value: ele
+        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
+        ele.attachEvent( "onpropertychange", whenPropChanges );
+    }
+    try { // Much faster & cleaner version for IE8 & IE9:
+        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
+        window.Object.defineProperty(window.Element.prototype, "classList", {
+            enumerable: 1,   get: function(val){
+                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
+                                 return this.classList;
+                             },
+            configurable: 0, set: function(val){this.className = val}
+        });
+    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
+        window[" uCL"] = polyfillClassList;
+        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
+        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
+            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + //  IE6
+            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8
+        );
+    }
+})(window);
+// 3. Patch in unsupported methods in DOMTokenList
+(function(DOMTokenListProto, testClass){
+    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
+        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
+    };
+    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
+        if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
+        var oldValue = this.value;
+        return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/);
+    };
+    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
+        DOMTokenListProto.replace = function(oldToken, newToken){
+            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
+            var oldValue = this.value;
+            return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true));
+        };
+    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
+        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
+        return false;
+    };
+    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
+        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
+        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
+    };
+    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: [nextIndex, that[nextIndex]], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: that[nextIndex], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: nextIndex, done: false} : {done: true};
+        }};
+    };
+})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
+})(window);
+
+ +

Avvertenze

+ +

Il polyfill ha funzionalità limitate. Al momento non è in grado di eseguire il polyfill fuori dagli elementi del documento (ad esempio elementi creati da document.createElement prima di essere appesi su un nodo padre) in IE6-7.

+ +

Tuttavia, dovrebbe funzionare bene in IE9. Una discrepanza maggiore tra la versione polyfilled di classList e le specifiche W3 è che per IE6-8, non esiste un modo per creare un oggetto immutabile (un oggetto le cui proprietà non possono essere modificate direttamente). In IE9, tuttavia, è possibile estendere il prototipo, congelando l'oggetto visibile e sovrascrivendo i metodi di proprietà native. Tuttavia, tali azioni non funzionerebbero in IE6-IE8 e, in IE9, rallenterebbero le prestazioni dell'intera pagina Web fino alla scansione di una lumaca, rendendo queste modifiche completamente impraticabili per questo polyfill.

+ +

Una nota minore è che in IE6-7, questo polyfill usa la proprietà window[" uCL"] sull'oggetto window per comunicare con le espressioni CSS, la proprietà css x-uCLp su tutti gli elementi e la proprietà element[" uCL"] su tutti gli elementi per consentire la raccolta di garbadge e migliorare le prestazioni. In tutti i browser polyfilled (IE6-9), una proprietà aggiuntiva element[" uCLp"] viene aggiunta all'elemento per garantire la prototipazione conforme agli standard e una proprietà DOMTokenList[" uCL"] viene aggiunta ad ogni oggetto element["classList"] per garantire che la DOMTokenList sia limitata al proprio elemento.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Definizione iniziale
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.classList")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/classname/index.html b/files/it/web/api/element/classname/index.html new file mode 100644 index 0000000000..ca463f5f75 --- /dev/null +++ b/files/it/web/api/element/classname/index.html @@ -0,0 +1,84 @@ +--- +title: Element.className +slug: Web/API/Element/className +tags: + - API + - DOM + - Gecko + - Proprietà + - Referenza +translation_of: Web/API/Element/className +--- +
{{APIRef("DOM")}}
+ +

La proprietà className dell'interfaccia {{domxref("Element")}} ottiene e imposta il valore dell'attributo class dell'elemento specificato.

+ +

Sintassi

+ +
var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+ + + +

Esempio

+ +
let el = document.getElementById('item');
+
+if (el.className === 'active'){
+  el.className = 'inactive';
+} else {
+  el.className = 'active';
+}
+ +

Appunti

+ +

Il nome className viene utilizzato per questa proprietà anziché class a causa di conflitti con la parola chiave "class" in molti linguaggi che vengono utilizzati per manipolare il DOM.

+ +

className può anche essere un'istanza di {{domxref("SVGAnimatedString")}} se element è un {{domxref("SVGElement")}}. È meglio ottenere/impostare className di un elemento usando {{domxref("Element.getAttribute")}} e {{domxref("Element.setAttribute")}} se si ha a che fare con elementi SVG. Tuttavia, tieni presente che {{domxref("Element.getAttribute")}} ritorna null anzichè "" se element ha un attributo class vuoto.

+ +
elm.setAttribute('class', elm.getAttribute('class'))
+ +
+

class è un Attributo HTML, mentre className è una proprietà del DOM.

+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-element-classname", "element.className")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}{{Spec2("DOM2 HTML")}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.className")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/clientheight/index.html b/files/it/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..167dd00ca3 --- /dev/null +++ b/files/it/web/api/element/clientheight/index.html @@ -0,0 +1,36 @@ +--- +title: element.clientHeight +slug: Web/API/Element/clientHeight +translation_of: Web/API/Element/clientHeight +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce l'altezza interna di un elemento in pixel, incluso il padding, ed esclusi il bordo, il margine e l'altezza della barra di scorrimento orizzontale.

+

clientHeight può essere calcolato come CSS height + CSS padding - altezza della barra di scorrimento orizzontale(se presente).

+

Sintassi e valori

+
var altezza = elemento.clientHeight;
+
+

altezza è un numero intero che rappresenta l'altezza in pixel di elemento.

+

clientHeight è di sola lettura.

+

Esempio

+
+
+

padding-top

+

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+

Cat image and text coming from http://www.best-cat-art.com/

+

padding-bottom

+
+ LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom
+

Image:clientHeight.png

+

Specifiche

+

Non fa parte di nessuna specifica W3C.

+

Note

+

clientHeight è una proprietà non standard, introdotta dal modello a oggetti di Internet Explorer.

+

Riferimenti

+ +

{{ languages( { "fr": "fr/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "en": "en/DOM/element.clientHeight" } ) }}

diff --git a/files/it/web/api/element/closest/index.html b/files/it/web/api/element/closest/index.html new file mode 100644 index 0000000000..cded9f95bb --- /dev/null +++ b/files/it/web/api/element/closest/index.html @@ -0,0 +1,147 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Element + - Method + - Reference +translation_of: Web/API/Element/closest +--- +

{{APIRef('Shadow DOM')}}

+ +
Il metodo closest() dell'interfaccia {{domxref("Element")}} restituisce l'antenato più vicino dell'elemento corrente (o l'elemento corrente stesso) che corrisponde ai selettori dati in un parametro. Se nessun elemento di questo tipo esiste, restituisce null.
+ +

Sintassi

+ +
var closestElement = element.closest(selectors);
+
+ +

Parametri

+ + + +

Valore del risultato

+ + + +

Eccezioni

+ + + +

Esempio

+ +

HTML

+ +
<article>
+  <div id="div-01">Here is div-01
+    <div id="div-02">Here is div-02
+      <div id="div-03">Here is div-03</div>
+    </div>
+  </div>
+</article>
+ +

JavaScript

+ +
var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// returns the element with the id=div-02
+
+var r2 = el.closest("div div");
+// restituisce l'antenato più vicino che è un div in div, qui è div-03 stesso
+
+var r3 = el.closest("article > div");
+// restituisce l'antenato più vicino che è un div e ha un articolo genitore, qui è div-01
+
+var r4 = el.closest(":not(div)");
+// restituisce l'antenato più vicino che non è un div, qui è l'articolo più esterno
+ +

Polyfill

+ +

Per i browser che non supportano Element.closest(),  ma supportano il supporto per element.matches() (o un equivalente prefissato, ovvero IE9 +), esiste un polyfill:

+ +
if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}
+ +

Tuttavia, se davvero si richiede il supporto per IE 8, il seguente polyfill farà il lavoro molto lentamente, ma alla fine. Tuttavia, supporta solo i selettori CSS 2.1 in IE 8 e può causare gravi ritardi nei siti Web di produzione.

+ +
if (window.Element && !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i >= 0 && matches.item(i) !== el) {};
+    } while ((i < 0) && (el = el.parentElement));
+    return el;
+  };
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Element.closest")}}

+ +

Note di compatibilità

+ + +
+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/firstchild/index.html b/files/it/web/api/element/firstchild/index.html new file mode 100644 index 0000000000..b5052f5dfe --- /dev/null +++ b/files/it/web/api/element/firstchild/index.html @@ -0,0 +1,90 @@ +--- +title: Node.firstChild +slug: Web/API/Element/firstChild +tags: + - API + - DOM + - Node + - Proprietà + - Referenza +translation_of: Web/API/Node/firstChild +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura Node.firstChild restituisce il primo figlio del nodo nell'albero o null se il nodo non ha figli. Se il nodo è un Document, restituisce il primo nodo nell'elenco dei suoi figli diretti.

+ +

Sintassi

+ +
var childNode = node.firstChild;
+
+ +

Esempio

+ +

Questo esempio dimostra l'uso di firstChild e il modo in cui i nodi degli spazi bianchi potrebbero interferire con l'utilizzo di questa proprietà.

+ +
<p id="para-01">
+  <span>First span</span>
+</p>
+
+<script>
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+</script>
+ +

In quanto sopra, la console console mostrerà '#text' perché viene inserito un nodo di testo per mantenere lo spazio bianco tra la fine dei tag di apertura <p> e <span>. Qualsiasi spazio bianco creerà un nodo #text da un singolo spazio a più spazi, ritorni, schede e così via.

+ +

Un altro nodo #text viene inserito tra i tag di chiusura </span> e </p>.

+ +

Se questo spazio viene rimosso dall'origine, i nodi #text non vengono inseriti e l'elemento span diventa il primo figlio del paragrafo.

+ +
<p id="para-01"><span>First span</span></p>
+
+<script>
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+</script>
+
+ +

Ora l'avviso mostrerà 'SPAN'.

+ +

Per evitare il problema con node.firstChild che restituisce i nodi #text o #comment, {{domxref("ParentNode.firstElementChild")}} può essere utilizzato per restituire solo il primo nodo elemento. Tuttavia, node.firstElementChild richiede uno shim per Internet Explorer 9 e versioni precedenti.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommentp
{{SpecName('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM3 Core')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.firstChild")}}

diff --git a/files/it/web/api/element/getattribute/index.html b/files/it/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..e10427e5bd --- /dev/null +++ b/files/it/web/api/element/getattribute/index.html @@ -0,0 +1,48 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +translation_of: Web/API/Element/getAttribute +--- +
{{APIRef("DOM")}}
+ +

getAttribute() restituisce il valore di un attributo specificato sull'elemento. Se l'attributo specificato non esiste, il valore restituito sarà null o "" (la stringa vuota); vedi {{Anch("Appunti")}} per maggiori dettagli.

+ +

Sintassi

+ +
var attributo = element.getAttribute(attributeName);
+
+ +

dove

+ + + +

Esempio

+ +
let div1 = document.getElementById('div1');
+let align = div1.getAttribute('align');
+
+alert(align); // Mostra il valore di "align" per l'elemento con id="div1"
+ +

Appunti

+ +

Quando viene chiamato su un elemento HTML in un DOM contrassegnato come un documento HTML, getAttribute() converte in minuscolo il suo argomento prima di procedere.

+ +

Essenzialmente tutti i browser Web (Firefox, Internet Explorer, versioni recenti di Opera, Safari, Konqueror e iCab, come elenco non esaustivo) restituiscono null quando l'attributo specificato non è presente sull'elemento specificato e questo è quello che l'attuale bozza della specifica DOM specifica. La vecchia specifica del DOM 3 Core, d'altra parte, dice che il valore di ritorno corretto in questo caso è in realtà la stringa vuota, e alcune implementazioni DOM implementano questo comportamento. L'implementazione di getAttribute in XUL (Gecko) segue effettivamente la specifica DOM 3 Core e restituisce una stringa vuota. Di conseguenza, dovresti usare {{domxref("element.hasAttribute()")}} per verificare l'esistenza di un attributo prima di chiamare getAttribute() se è possibile che l'attributo richiesto non esista sull'elemento specificato.

+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Element.getAttribute")}}

+
+ +

Specifiche

+ + diff --git a/files/it/web/api/element/getelementsbytagname/index.html b/files/it/web/api/element/getelementsbytagname/index.html new file mode 100644 index 0000000000..9239135259 --- /dev/null +++ b/files/it/web/api/element/getelementsbytagname/index.html @@ -0,0 +1,80 @@ +--- +title: Element.getElementsByTagName() +slug: Web/API/Element/getElementsByTagName +tags: + - API + - DOM + - Element + - Method + - Referenza +translation_of: Web/API/Element/getElementsByTagName +--- +
{{ APIRef("DOM") }}
+ +

Il metodo Element.getElementsByTagName() ritorna una {{domxref("HTMLCollection")}} dinamica di elementi con il tag name specificato. Vengono cercati tutti i discendenti dell'elemento specificato, ma non l'elemento stesso. L'elenco restituito è dinamico, il che significa che si aggiorna automaticamente con l'albero del DOM. Pertanto, non è necessario chiamare Element.getElementsByTagName() con lo stesso elemento e gli stessi argomenti ripetutamente se il DOM cambia tra le chiamate.

+ +

Quando viene chiamato su un elemento HTML in un documento HTML, getElementsByTagName converte in minuscolo l'argomento prima di cercarlo. Ciò non è desiderabile quando si cerca di abbinare elementi SVG camel-cased (come <linearGradient>) in un documento HTML. Invece, usa {{ domxref("Element.getElementsByTagNameNS()") }}, che preserva la conversione in minuscolo del nome del tag.

+ +

Element.getElementsByTagName è simile a {{domxref("Document.getElementsByTagName()")}}, tranne per il fatto che cerca solo elementi discendenti dell'elemento specificato.

+ +

Sintassi

+ +
elements = element.getElementsByTagName(tagName)
+ + + +

Esempio

+ +
// Controlla lo stato di ogni cella in una tabella
+const table = document.getElementById('forecast-table');
+const cells = table.getElementsByTagName('td');
+
+for (let cell of cells) {
+  let status = cell.getAttribute('data-status');
+  if (status === 'open') {
+    // Prendi i dati
+  }
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}{{Spec2('DOM WHATWG')}}Modificato il valore di ritorno da {{domxref("NodeList")}} a {{domxref("HTMLCollection")}}
{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM2 Core')}}Nessun cambiamento da {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.getElementsByTagName")}}

diff --git a/files/it/web/api/element/hasattribute/index.html b/files/it/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..4cd6d2a9d2 --- /dev/null +++ b/files/it/web/api/element/hasattribute/index.html @@ -0,0 +1,75 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +translation_of: Web/API/Element/hasAttribute +--- +
{{APIRef("DOM")}}
+ +

Il metodo Element.hasAttribute() restituisce un valore booleano che indica se l'elemento specificato ha o meno l'attributo specificato.

+ +

Sintassi

+ +
var risultato = element.hasAttribute(name);
+
+ +
+
risultato
+
detiene il valore di ritorno true o false.
+
name
+
è una stringa che rappresenta il nome dell'attributo.
+
+ +

Esempio

+ +
var foo = document.getElementById("foo");
+if (foo.hasAttribute("bar")) {
+    // fare qualcosa
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasAttribute = prototype.hasAttribute || function(name) {
+        return !!(this.attributes[name] &&
+                  this.attributes[name].specified);
+    }
+})(Element.prototype);
+
+ +

Appunti

+ +
{{DOMAttributeMethods}}
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.hasAttribute")}}

diff --git a/files/it/web/api/element/hasattributes/index.html b/files/it/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..ca408ca96d --- /dev/null +++ b/files/it/web/api/element/hasattributes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasAttributes +slug: Web/API/Element/hasAttributes +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Element/hasAttributes +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un valore booleano: true se l'elemento ha un qualunque numero di attributi, altrimenti false.

+

Sintassi

+

+ + bool + = element.hasAttributes()

+

Esempio

+
t1 = document.getElementById("tabella-dati");
+if (t1.hasAttributes()) {
+    // fai qualcosa con
+    // t1.attributes
+}
+
+

Specifiche

+

hasAttributes

+

{{ languages( { "en": "en/DOM/element.hasAttributes", "fr": "fr/DOM/element.hasAttributes", "pl": "pl/DOM/element.hasAttributes" } ) }}

diff --git a/files/it/web/api/element/index.html b/files/it/web/api/element/index.html new file mode 100644 index 0000000000..f518252bc7 --- /dev/null +++ b/files/it/web/api/element/index.html @@ -0,0 +1,475 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - Element + - Interface + - Referenza + - Referenza del DOM + - Web API +translation_of: Web/API/Element +--- +
{{APIRef("DOM")}}
+ +

Element è la classe base più generale da cui ereditano tutti gli oggetti in un {{DOMxRef("Document")}}. Ha solo metodi e proprietà comuni a tutti i tipi di elementi. Classi più specifiche ereditano da Element. Ad esempio, l'interfaccia {{DOMxRef("HTMLElement")}} è l'interfaccia di base per gli elementi HTML, mentre l'interfaccia {{DOMxRef("SVGElement")}} è la base per tutti gli elementi SVG. La maggior parte delle funzionalità è specificata più in basso nella gerarchia delle classi.

+ +

Le lingue al di fuori del regno della piattaforma Web, come XUL attraverso l'interfaccia XULElement, implementano anche  Element.

+ +

{{InheritanceDiagram}}

+ +

Proprietà

+ +

Eredita le proprietà dalla sua interfaccia genitore, {{DOMxRef("Node")}}, e per estensione l'interfaccia genitore, {{DOMxRef("EventTarget")}}. Implementa le proprietà di {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, e {{DOMxRef("Animatable")}}.

+ +
+
{{DOMxRef("Element.attributes")}} {{readOnlyInline}}
+
Restituisce un oggetto {{DOMxRef("NamedNodeMap")}} contenente gli attributi assegnati dell'elemento HTML corrispondente.
+
{{DOMxRef("Element.classList")}} {{readOnlyInline}}
+
Ritorna un oggetto {{DOMxRef("DOMTokenList")}} contenente la lista delle classi dell'elemento.
+
{{DOMxRef("Element.className")}}
+
È una {{DOMxRef("DOMString")}} che rappresenta la classe dell'elemento.
+
{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}
+
Ritorna un {{jsxref("Number")}} che rappresenta l'altezza interna dell'elemento.
+
{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}
+
Ritorna un {{jsxref("Number")}} che rappresenta la larghezza del bordo sinistro dell'elemento.
+
{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}
+
Restituisce un {{jsxref("Number")}} che rappresenta la larghezza del bordo superiore dell'elemento.
+
{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}
+
Restituisce un {{jsxref("Number")}} che rappresenta la larghezza interna dell'elemento.
+
{{DOMxRef("Element.computedName")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.
+
{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. 
+
{{DOMxRef("Element.id")}}
+
Is a {{DOMxRef("DOMString")}} representing the id of the element.
+
{{DOMxRef("Element.innerHTML")}}
+
Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.
+
{{DOMxRef("Element.localName")}} {{readOnlyInline}}
+
A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.
+
{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}
+
The namespace URI of the element, or null if it is no namespace. +
+

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}

+
+
+
{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}
+
Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or null if there's no sibling node.
+
{{DOMxRef("Element.outerHTML")}}
+
Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.
+
{{DOMxRef("Element.prefix")}} {{readOnlyInline}}
+
A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or null if no prefix is specified.
+
{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}
+
Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or null if there is no sibling element.
+
{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view height of an element.
+
{{DOMxRef("Element.scrollLeft")}}
+
Is a {{jsxref("Number")}} representing the left scroll offset of the element.
+
{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.
+
{{DOMxRef("Element.scrollTop")}}
+
A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.
+
{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.
+
{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view width of the element.
+
{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}
+
Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.
+
{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}
+
Returns the shadow root that is hosted by the element, regardless if its open or closed. Available only to WebExtensions.
+
{{DOMxRef("Element.slot")}} {{Experimental_Inline}}
+
Returns the name of the shadow DOM slot the element is inserted in.
+
{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.
+
{{DOMxRef("Element.tagName")}} {{readOnlyInline}}
+
Returns a {{jsxref("String")}} with the name of the tag for the given element.
+
{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}
+
Returns the {{DOMxRef("UndoManager")}} associated with the element.
+
{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.
+
+ +
+

Note: DOM Level 3 defined namespaceURI, localName and prefix on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to Element.

+ +

This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.

+
+ +

Proprietà incluse da Slotable

+ +

L'interfaccia Element include la seguente proprietà, definita nel  mixin {{DOMxRef("Slotable")}}.

+ +
+
{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}
+
Restituisce un {{DOMxRef("HTMLSlotElement")}} che rappresenta lo {{htmlelement("slot")}} in cui è inserito il nodo.
+
+ +

Gestori di eventi

+ +
+
{{domxref("Element.onfullscreenchange")}}
+
Un gestore di eventi per l'evento {{event("fullscreenchange")}} che viene inviato quando l'elemento entra o esce dalla modalità a schermo intero. Questo può essere usato per guardare sia le transizioni attese con successo, ma anche per osservare cambiamenti inaspettati, come quando l'app è in background.
+
{{domxref("Element.onfullscreenerror")}}
+
Un gestore di eventi per l'evento {{event("fullscreenerror")}} che viene inviato quando si verifica un errore durante il tentativo di passare alla modalità a schermo intero.
+
+ +

Gestori di eventi obsoleti

+ +
+
{{DOMxRef("Element.onwheel")}}
+
Restituisce il codice di gestione degli eventi per l'evento {{Event("wheel")}}. Questo è ora implementato su {{DOMxRef("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.
+
+ +

Metodi

+ +

Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, and {{DOMxRef("Animatable")}}.

+ +
+
{{DOMxRef("EventTarget.addEventListener()")}}
+
Registers an event handler to a specific event type on the element.
+
{{DOMxRef("Element.attachShadow()")}}
+
Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.
+
{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}
+
A shortcut method to create and run an animation on an element. Returns the created Animation object instance.
+
{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}
+
Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.
+
{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+
Creates a shadow DOM on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.
+
{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}
+
Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.
+
{{DOMxRef("EventTarget.dispatchEvent()")}}
+
Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.
+
{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}
+
Returns an array of Animation objects currently active on the element.
+
{{DOMxRef("Element.getAttribute()")}}
+
Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.
+
{{DOMxRef("Element.getAttributeNames()")}}
+
Returns an array of attribute names from the current element.
+
{{DOMxRef("Element.getAttributeNS()")}}
+
Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.
+
{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}
+
Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.
+
{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}
+
Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.
+
{{DOMxRef("Element.getBoundingClientRect()")}}
+
Returns the size of an element and its position relative to the viewport.
+
{{DOMxRef("Element.getClientRects()")}}
+
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
+
{{DOMxRef("Element.getElementsByClassName()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.
+
{{DOMxRef("Element.getElementsByTagName()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.
+
{{DOMxRef("Element.getElementsByTagNameNS()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.
+
{{DOMxRef("Element.hasAttribute()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.
+
{{DOMxRef("Element.hasAttributeNS()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.
+
{{DOMxRef("Element.hasAttributes()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.
+
{{DOMxRef("Element.hasPointerCapture()")}}
+
Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
+
{{DOMxRef("Element.insertAdjacentElement()")}}
+
Inserts a given element node at a given position relative to the element it is invoked upon.
+
{{DOMxRef("Element.insertAdjacentHTML()")}}
+
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
+
{{DOMxRef("Element.insertAdjacentText()")}}
+
Inserts a given text node at a given position relative to the element it is invoked upon.
+
{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}
+
Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.
+
{{DOMxRef("Element.querySelector()")}}
+
Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.
+
{{DOMxRef("Element.querySelectorAll()")}}
+
Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.
+
{{DOMxRef("Element.releasePointerCapture()")}}
+
Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.
+
{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}
+
Removes the element from the children list of its parent.
+
{{DOMxRef("Element.removeAttribute()")}}
+
Removes the named attribute from the current node.
+
{{DOMxRef("Element.removeAttributeNS()")}}
+
Removes the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}
+
Removes the node representation of the named attribute from the current node.
+
{{DOMxRef("EventTarget.removeEventListener()")}}
+
Removes an event listener from the element.
+
{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}
+
Asynchronously asks the browser to make the element full-screen.
+
{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}
+
Allows to asynchronously ask for the pointer to be locked on the given element.
+
+ +
+
{{domxref("Element.scroll()")}}
+
Scrolls to a particular set of coordinates inside a given element.
+
{{domxref("Element.scrollBy()")}}
+
Scrolls an element by the given amount.
+
{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}
+
Scrolls the page until the element gets into the view.
+
{{domxref("Element.scrollTo()")}}
+
Scrolls to a particular set of coordinates inside a given element.
+
{{DOMxRef("Element.setAttribute()")}}
+
Sets the value of a named attribute of the current node.
+
{{DOMxRef("Element.setAttributeNS()")}}
+
Sets the value of the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}
+
Sets the node representation of the named attribute from the current node.
+
{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}
+
Sets the node representation of the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}
+
Sets up mouse event capture, redirecting all mouse events to this element.
+
{{DOMxRef("Element.setPointerCapture()")}}
+
Designates a specific element as the capture target of future pointer events.
+
{{DOMxRef("Element.toggleAttribute()")}}
+
Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
{{domxref("Element/cancel_event", "cancel")}}
+
Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the Esc key or clicks a "Close dialog" button which is part of the browser's UI.
+ Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.
+
error
+
Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.
+
{{domxref("Element/scroll_event", "scroll")}}
+
Fired when the document view or an element has been scrolled.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.
+
{{domxref("Element/select_event", "select")}}
+
Fired when some text has been selected.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.
+
{{domxref("Element/show_event", "show")}}
+
Fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.
+
{{domxref("Element/wheel_event","wheel")}}
+
Fired when the user rotates a wheel button on a pointing device (typically a mouse).
+ Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}
+
+ +

Clipboard events

+ +
+
{{domxref("Element/copy_event", "copy")}}
+
Fired when the user initiates a copy action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.
+
{{domxref("Element/cut_event", "cut")}}
+
Fired when the user initiates a cut action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.
+
{{domxref("Element/paste_event", "paste")}}
+
Fired when the user initiates a paste action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.
+
+ +

Composition events

+ +
+
{{domxref("Element/compositionend_event", "compositionend")}}
+
Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.
+
{{domxref("Element/compositionstart_event", "compositionstart")}}
+
Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.
+
{{domxref("Element/compositionupdate_event", "compositionupdate")}}
+
Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.
+
+ +

Focus events

+ +
+
{{domxref("Element/blur_event", "blur")}}
+
Fired when an element has lost focus.
+ Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.
+
{{domxref("Element/focus_event", "focus")}}
+
Fired when an element has gained focus.
+ Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property
+
{{domxref("Element/focusin_event", "focusin")}}
+
Fired when an element is about to gain focus.
+
{{domxref("Element/focusout_event", "focusout")}}
+
Fired when an element is about to lose focus.
+
+ +

Fullscreen events

+ +
+
{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}
+
Sent to a {{domxref("Document")}} or {{domxref("Element")}} when it transitions into or out of full-screen mode.
+ Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}  property.
+
{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}
+
Sent to a Document or Element if an error occurs while attempting to switch it into or out of full-screen mode.
+ Also available via the {{domxref("Document.onfullscreenerror", "onfullscreenerror")}} property.
+
+ +

Mouse events

+ +
+
{{domxref("Element/Activate_event", "Activate")}}
+
Occurs when an element is activated, for instance, through a mouse click or a keypress.
+ Also available via the {{domxref("ServiceWorkerGlobalScope/onactivate", "onactivate")}} property.
+
{{domxref("Element/auxclick_event", "auxclick")}}
+
Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.
+
{{domxref("Element/click_event", "click")}}
+
Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.
+ Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.
+
{{domxref("Element/contextmenu_event", "contextmenu")}}
+
Fired when the user attempts to open a context menu.
+ Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.
+
{{domxref("Element/dblclick_event", "dblclick")}}
+
Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.
+ Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.
+
{{domxref("Element/mousedown_event", "mousedown")}}
+
Fired when a pointing device button is pressed on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.
+
{{domxref("Element/mouseenter_event", "mouseenter")}}
+
Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.
+
{{domxref("Element/mouseleave_event", "mouseleave")}}
+
Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.
+
{{domxref("Element/mousemove_event", "mousemove")}}
+
Fired when a pointing device (usually a mouse) is moved while over an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.
+
{{domxref("Element/mouseout_event", "mouseout")}}
+
Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.
+
{{domxref("Element/mouseover_event", "mouseover")}}
+
Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.
+
{{domxref("Element/mouseup_event", "mouseup")}}
+
Fired when a pointing device button is released on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.
+
{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}
+
Fired each time the amount of pressure changes on the trackpadtouchscreen.
+
{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}
+
Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".
+
{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}
+
Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.
+
{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}
+
Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".
+
+ +

Touch events

+ +
+
{{domxref("Element/touchcancel_event", "touchcancel")}}
+
Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).
+ Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.
+
{{domxref("Element/touchend_event", "touchend")}}
+
Fired when one or more touch points are removed from the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property
+
{{domxref("Element/touchmove_event", "touchmove")}}
+
Fired when one or more touch points are moved along the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property
+
{{domxref("Element/touchstart_event", "touchstart")}}
+
Fired when one or more touch points are placed on the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property
+
+ +
+
 
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Aggiunto il metodo getAnimations().
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Aggiunge le proprietà undoScope e undoManager.
{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events 2')}}Aggiunti i seguenti gestori di eventi: ongotpointercapture and onlostpointercapture.
+ Aggiunti i seguenti metodi: setPointerCapture() e releasePointerCapture().
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Aggiunti i seguenti gestori di eventi: ongotpointercapture e onlostpointercapture.
+ Aggiunti i seguenti metodi: setPointerCapture() e releasePointerCapture().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Aggiunti i seguenti metodi: querySelector() e querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Aggiunto il metodo requestPointerLock().
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Aggiunto il metodo requestFullscreen().
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Aggiunte le seguenti proprietà: innerHTML, e outerHTML.
+ Aggiunti i seguenti metodi: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Aggiunte le seguenti proprietà: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
+ Aggiunti i seguenti metodi: getClientRects(), getBoundingClientRect(), scroll(), scrollBy(), scrollTo() and scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Aggiunta ereditarietà dell'interfaccia {{DOMxRef("ElementTraversal")}}.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Aggiunti i seguenti metodi: closest(), insertAdjacentElement() and insertAdjacentText().
+ Spostato hasAttributes() dall'interfaccia Node a questa.
{{SpecName("DOM4", "#interface-element", "Element")}}{{Spec2("DOM4")}}Rimossi i seguenti metodi: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
+ Modificato il valore di ritorno di getElementsByTagName() e getElementsByTagNameNS().
+ Rimossa la proprietà schemaTypeInfo.
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}Aggiunti i seguenti metodi: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode(). Questi metodi non sono mai stati implementati e sono stati rimossi nelle specifiche successive.
+ Aggiunta la proprietà schemaTypeInfo. Questa proprietà non è mai stata implementata ed è stata rimossa nelle specifiche successive.
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}Il metodo normalize() è stato spostato su {{DOMxRef("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element")}}

diff --git a/files/it/web/api/element/innerhtml/index.html b/files/it/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..6fbdb3c47b --- /dev/null +++ b/files/it/web/api/element/innerhtml/index.html @@ -0,0 +1,213 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - DOM Parsing + - Element + - Parsing HTML + - Proprietà + - Referenza + - innerHTML +translation_of: Web/API/Element/innerHTML +--- +
{{APIRef("DOM")}}
+ +

La proprietà {{domxref("Element")}} innerHTML ottiene o imposta il markup HTML o XML contenuto all'interno dell'elemento.

+ +
Note: Se un {{HTMLElement("div")}}, {{HTMLElement("span")}}, o {{HTMLElement("noembed")}} ha un nodo di testo figlio che include i caratteri (&), (<), o (>), innerHTML restituisce questi caratteri come entità HTML "&amp;", "&lt;" e "&gt;" rispettivamente. Usa {{domxref("Node.textContent")}} per ottenere una copia non elaborata del contenuto di questi nodi di testo.
+ +

Per inserire l'HTML nel documento invece di sostituire il contenuto di un elemento, utilizza il metodo {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.

+ +

Sintassi

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+
+ +

Valore

+ +

Una {{domxref("DOMString")}} contenente la serializzazione HTML dei discendenti dell'elemento. L'impostazione del valore di innerHTML rimuove tutti i discendenti dell'elemento e li sostituisce con i nodi creati analizzando l'HTML fornito nella stringa htmlString.

+ +

Eccezioni

+ +
+
SyntaxError
+
È stato effettuato un tentativo di impostare il valore di innerHTML utilizzando una stringa che non è HTML correttamente formato.
+
NoModificationAllowedError
+
È stato effettuato un tentativo di inserire l'HTML in un nodo il cui padre è {{domxref("Document")}}.
+
+ +

Note di utilizzo

+ +

La proprietà innerHTML può essere utilizzata per esaminare il codice sorgente HTML corrente della pagina, comprese le eventuali modifiche apportate da quando la pagina è stata inizialmente caricata.

+ +

Leggere i contenuti HTML di un elemento

+ +

La lettura di innerHTML fa sì che l'user agent serializzi il fragment HTML o XML composto dai discendenti di elment. La stringa risultante viene restituita.

+ +
let contents = myElement.innerHTML;
+ +

Questo ti permette di guardare il markup HTML dei nodi di contenuto dell'elemento.

+ +
+

Note: Il fragment HTML o XML restituito viene generato in base al contenuto corrente dell'elemento, pertanto è probabile che la marcatura e la formattazione del frammento restituito non corrispondano al markup della pagina originale.

+
+ +

Sostituzione del contenuto di un elemento

+ +

L'impostazione del valore di innerHTML consente di sostituire facilmente i contenuti esistenti di un elemento con nuovi contenuti.

+ +

Ad esempio, è possibile cancellare l'intero contenuto di un documento cancellando il contenuto dell'attributo {{domxref("Document.body", "body")}} del documento:

+ +
document.body.innerHTML = "";
+ +

Questo esempio recupera l'attuale markup HTML del documento e sostituisce i caratteri "<" con l'entità HTML "&lt;", convertendo in tal modo l'HTML in testo non elaborato. Questo è quindi avvolto in un elemento {{HTMLElement("pre")}} element. Quindi il valore di innerHTML viene modificato in questa nuova stringa. Di conseguenza, il contenuto del documento viene sostituito con una visualizzazione dell'intero codice sorgente della pagina.

+ +
document.documentElement.innerHTML = "<pre>" +
+         document.documentElement.innerHTML.replace(/</g,"&lt;") +
+            "</pre>";
+ +

Dettagli operativi

+ +

Cosa succede esattamente quando imposti il valore di innerHTML? In questo modo, l'user agent deve seguire questi passaggi:

+ +
    +
  1. Il valore specificato viene analizzato come HTML o XML (in base al tipo di documento), risultando in un oggetto {{domxref("DocumentFragment")}} che rappresenta il nuovo set di nodi del DOM per i nuovi elementi.
    2. +
  2. Se l'elemento il cui contenuto viene sostituito è un elemento {{HTMLElement("template")}} l'attributo <template> dell'elemento {{domxref("HTMLTemplateElement.content", "content")}} viene sostituito con il nuovo DocumentFragment creato nel passaggio 1.
    3. +
  3. Per tutti gli altri elementi, i contenuti dell'elemento vengono sostituiti con i nodi nel nuovo DocumentFragment.
    4. +
+ +

Considerazioni sulla sicurezza

+ +

Non è raro vedere innerHTML utilizzato per inserire del testo in una pagina web. C'è la possibilità che questo diventi un vettore di attacco su un sito, creando un potenziale rischio per la sicurezza.

+ +
const name = "John";
+// supponiamo che 'el' sia un elemento DOM HTML
+el.innerHTML = name; // innocuo in questo caso
+
+// ...
+
+name = "<script>alert('Sono John in una noiosa allerta!')</script>";
+el.innerHTML = name; // innocuo in questo caso
+ +

Sebbene possa sembrare un attacco {{interwiki("wikipedia", "cross-site scripting")}} il risultato è innocuo. HTML5 specifica che un tag {{HTMLElement("script")}} inserito con innerHTML non deve essere eseguito.

+ +

Tuttavia, ci sono modi per eseguire JavaScript senza utilizzare gli elementi {{HTMLElement("script")}}, quindi c'è ancora un rischio per la sicurezza ogni volta che utilizzi innerHTML per impostare le stringhe su cui non si ha il controllo. Per esempio:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // mostra l'alert
+ +

Per questo motivo, si consiglia di non utilizzare innerHTML quando si inserisce testo normale; invece, usa {{domxref("Node.textContent")}}. Questo non analizza il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.

+ +
+

Warning: Se il tuo progetto è uno che subirà alcuna forma di revisione della sicurezza, utilizzando innerHTML molto probabilmente il tuo codice verrà rifiutato. Ad esempio, se utilizzi innerHTML in un'estensione del browser e si invia l'estensione a addons.mozilla.org, non verrà passato il processo di revisione automatica.

+
+ +

Esempio

+ +

In questo esempio viene utilizzato innerHTML per creare un meccanismo per la registrazione dei messaggi in una casella in una pagina Web.

+ +

JavaScript

+ +
function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
+}
+
+log("Registrazione degli eventi del mouse in questo contenitore...");
+
+ +

La funzione log() crea l'output del log ottenendo l'ora corrente da un oggetto {{jsxref("Date")}} utilizzando {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, e creando una stringa con il timestamp e il testo del messaggio. Quindi il messaggio viene aggiunto al box con classe "log".

+ +

Aggiungiamo un secondo metodo che registra le informazioni sugli eventi basati su {{domxref("MouseEvent")}} (come ad esempio {{event("mousedown")}}, {{event("click")}}, e {{event("mouseenter")}}):

+ +
function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
+  log(msg);
+}
+ +

Quindi usiamo questo come gestore di eventi per un numero di eventi del mouse sulla casella che contiene il nostro registro:

+ +
var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);
+ +

HTML

+ +

L'HTML è abbastanza semplice per il nostro esempio.

+ +
<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+ +

Il {{HTMLElement("div")}} con la classe "box" è solo un contenitore per scopi di layout, presentando il contenuto con una scatola attorno ad esso. Il <div> la cui classe è "log" è il contenitore per il testo del log stesso.

+ +

CSS

+ +

I seguenti stili CSS del nostro contenuto di esempio.

+ +
.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}
+ +

Risultato

+ +

Il contenuto risultante assomiglia a questo. È possibile visualizzare l'output nel registro spostando il mouse dentro e fuori dalla scatola, facendo click su di esso e così via.

+ +

{{EmbedLiveSample("Esempio", 640, 350)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}{{Spec2('DOM Parsing')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.innerHTML")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/insertadjacenthtml/index.html b/files/it/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..f69fbb1daf --- /dev/null +++ b/files/it/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,102 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - API + - Cambiare il DOM + - DOM + - Element + - HTML + - Inserire elementi + - Inserire nodi + - Referenza + - insertAdjacentHTML + - metodo +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

Il metodo insertAdjacentHTML() dell'interfaccia {{domxref("Element")}} analizza il testo specificato come HTML o XML e inserisce i nodi risultanti nell'albero DOM in una posizione specificata. Non esegue il reparse dell'elemento su cui viene utilizzato, e quindi non corrompe gli elementi esistenti all'interno di quell'elemento. Questo evita il passaggio extra della serializzazione, rendendolo molto più veloce della manipolazione diretta di {{domxref("Element.innerHTML", "innerHTML")}}.

+ +

Sintassi

+ +
element.insertAdjacentHTML(position, text);
+ +

Parametri

+ +
+
position
+
Una {{domxref("DOMString")}} che rappresenta la posizione relativa ad element; deve essere una delle seguenti stringhe: +
    +
  • 'beforebegin': Davanti ad element stesso.
    • +
  • 'afterbegin': Appena dentro element, prima del suo primo figlio.
    • +
  • 'beforeend': Appena dentro element, prima del suo ultimo figlio.
    • +
  • 'afterend': Dopo ad element stesso.
    • +
+
+
text
+
La stringa da analizzare come HTML o XML e inserita nell'albero.
+
+ +

Visualizzazione dei nomi delle posizioni

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Note: Le posizioni beforebegin e afterend funzionano solo se il nodo si trova nell'albero del DOM e ha un elemento padre.
+ +

Esempio

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// A questo punto, la nuova struttura è:
+// <div id="one">one</div><div id="two">two</div>
+ +

Note

+ +

Considerazioni sulla sicurezza

+ +

Quando si inserisce HTML in una pagina utilizzando insertAdjacentHTML(), fare attenzione a non utilizzare l'input dell'utente che non è stato analizzato.

+ +

Non è consigliabile utilizzare  insertAdjacentHTML() quando si inserisce testo normale; usa invece la proprietà {{domxref("Node.textContent")}} o il metodo {{domxref("Element.insertAdjacentText()")}}. Questo non interpreta il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.insertAdjacentHTML")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/nodename/index.html b/files/it/web/api/element/nodename/index.html new file mode 100644 index 0000000000..2030226b37 --- /dev/null +++ b/files/it/web/api/element/nodename/index.html @@ -0,0 +1,116 @@ +--- +title: Node.nodeName +slug: Web/API/Element/nodeName +tags: + - API + - DOM + - Gecko + - NeedsSpecTable + - Node + - Property + - Read-only +translation_of: Web/API/Node/nodeName +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura nodeName restituisce il nome dell'attuale {{domxref("Node")}} come stringa.

+ +

Sintassi

+ +
var str = node.nodeName;
+
+ +

Valore

+ +

Una {{domxref("DOMString")}}. I valori per i diversi tipi di nodi sono:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Interfacciavalore nodeName
{{domxref("Attr")}}Il valore di {{domxref("Attr.name")}}
{{domxref("CDATASection")}}"#cdata-section"
{{domxref("Comment")}}"#comment"
{{domxref("Document")}}"#document"
{{domxref("DocumentFragment")}}"#document-fragment"
{{domxref("DocumentType")}}Il valore di {{domxref("DocumentType.name")}}
{{domxref("Element")}}Il valore di {{domxref("Element.tagName")}}
{{domxref("Entity")}}Il nome dell'entità
{{domxref("EntityReference")}}Il nome del riferimento all'entità
{{domxref("Notation")}}Il nome della notazione
{{domxref("ProcessingInstruction")}}Il valore di {{domxref("ProcessingInstruction.target")}}
{{domxref("Text")}}"#text"
+ +

Esempio

+ +

Dato il seguente markup:

+ +
<div id="d1">hello world</div>
+<input type="text" id="t">
+
+ +

e il seguente script:

+ +
var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+
+text_field.value = div1.nodeName;
+
+ +

IIn XHTML (o in qualsiasi altro formato XML), il valore di text_field sarebbe letto "div". Tuttavia, in HTML, il valore di text_field sarebbe letto "DIV", poichè nodeName e tagName restituiscono in maiuscolo gli elementi HTML nei DOM contrassegnati come documenti HTML. Read more details on nodeName case sensitivity in different browsers.

+ +

Nota che la proprietà {{domxref("Element.tagName")}} potrebbe essere stata utilizzata, poiché nodeName ha lo stesso valore di tagName per un elemento. Tieni presente, tuttavia, che nodeName ritornerà "#text" per i nodi di testo mentre tagName restituirà undefined.

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.nodeName")}}

diff --git a/files/it/web/api/element/nodetype/index.html b/files/it/web/api/element/nodetype/index.html new file mode 100644 index 0000000000..fba395288a --- /dev/null +++ b/files/it/web/api/element/nodetype/index.html @@ -0,0 +1,178 @@ +--- +title: Node.nodeType +slug: Web/API/Element/nodeType +tags: + - API + - DOM + - Proprietà + - Referenza +translation_of: Web/API/Node/nodeType +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura Node.nodeType è un numero intero che identifica il nodo. Distingue tra diversi tipi di nodi tra loro, come {{domxref("Element", "elements")}}, {{domxref("Text", "text")}} and {{domxref("Comment", "comments")}}.

+ +

Sintassi

+ +
var type = node.nodeType;
+
+ +

Restituisce un numero intero che specifica il tipo del nodo. I valori possibili sono elencati in {{anch("Tipi di nodi costanti")}}.

+ +

Constanti

+ +

Tipi di nodi costanti

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValoreDescrizione
Node.ELEMENT_NODE1Un nodo {{domxref("Element")}} come {{HTMLElement("p")}} o {{HTMLElement("div")}}.
Node.TEXT_NODE3L'attuale {{domxref("Text")}} dentro un {{domxref("Element")}} o {{domxref("Attr")}}.
Node.CDATA_SECTION_NODE4Una {{domxref("CDATASection")}}, ad esempio <!CDATA[[ … ]]>.
Node.PROCESSING_INSTRUCTION_NODE7Una {{domxref("ProcessingInstruction")}} di un documento XML, come <?xml-stylesheet … ?>.
Node.COMMENT_NODE8Un nodo {{domxref("Comment")}}, come <!-- … -->.
Node.DOCUMENT_NODE9Un nodo {{domxref("Document")}}.
Node.DOCUMENT_TYPE_NODE10Un nodo {{domxref("DocumentType")}}, come <!DOCTYPE html>.
Node.DOCUMENT_FRAGMENT_NODE11Un nodo {{domxref("DocumentFragment")}}.
+ +

Tipi di nodo deprecati {{deprecated_inline()}}

+ +
+

Le seguenti costanti sono state deprecate e non dovrebbero essere più utilizzate.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValoreDescrizione
Node.ATTRIBUTE_NODE2Un {{domxref("Attr", "Attribute")}} di un {{domxref("Element")}}. Gli attributi non implementano più l'interfaccia {{domxref("Node")}} dal {{SpecName("DOM4")}}.
Node.ENTITY_REFERENCE_NODE5Un nodo di riferimento di entità XML, come &foo;. Rimosso nel {{SpecName("DOM4")}}.
Node.ENTITY_NODE6Un nodo XML <!ENTITY …>. Rimosso nel {{SpecName("DOM4")}}.
Node.NOTATION_NODE12Un nodo XML <!NOTATION …>. Rimosso nel {{SpecName("DOM4")}}.
+ +

Esempi

+ +

Diversi tipi di nodi

+ +
document.nodeType === Node.DOCUMENT_NODE; // true
+document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true
+
+document.createDocumentFragment().nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true
+
+var p = document.createElement("p");
+p.textContent = "Once upon a time…";
+
+p.nodeType === Node.ELEMENT_NODE; // true
+p.firstChild.nodeType === Node.TEXT_NODE; // true
+
+ +

Commenti

+ +

Questo esempio controlla se il primo nodo all'interno dell'elemento del documento è un commento e visualizza un messaggio in caso contrario.

+ +
var node = document.documentElement.firstChild;
+if (node.nodeType !== Node.COMMENT_NODE) {
+  console.warn("Dovresti commentare il tuo codice!");
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}{{Spec2('DOM WHATWG')}}Deprecated ATTRIBUTE_NODE, ENTITY_REFERENCE_NODE and NOTATION_NODE types.
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}{{Spec2('DOM3 Core')}}Nessun cambiamento.
{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}{{Spec2('DOM2 Core')}}Nessun cambiamento.
{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.nodeType")}}

diff --git a/files/it/web/api/element/nodevalue/index.html b/files/it/web/api/element/nodevalue/index.html new file mode 100644 index 0000000000..547ba77939 --- /dev/null +++ b/files/it/web/api/element/nodevalue/index.html @@ -0,0 +1,75 @@ +--- +title: element.nodeValue +slug: Web/API/Element/nodeValue +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Node/nodeValue +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il valore del nodo corrente.

+

Sintassi

+
valore = document.nodeValue
+
+

valore è una stringa contenente il valore del nodo corrente, se esiste.

+

Note

+

La proprietà nodeValue dell'intero documento, restituisce null. Per un nodo di tipo testo, commento o CDATA, nodeValue restituisce il contenuto del nodo. Per i nodi attributo, restituisce il valore dell'attributo.

+

La tabella seguente mostra i valori restituiti per i vari tipi di elementi:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attril valore dell'attributo
CDATASectionil contenuto della sezione CDATA
Commentil commento
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructionl'intero contenuto, escluso il target
Textil contenuto del nodo testo
+

Quando nodeValue è impostato a null, reimpostarlo non ha alcun effetto.

+

Specifiche

+

nodeValue

diff --git a/files/it/web/api/element/parentnode/index.html b/files/it/web/api/element/parentnode/index.html new file mode 100644 index 0000000000..03e89aa432 --- /dev/null +++ b/files/it/web/api/element/parentnode/index.html @@ -0,0 +1,61 @@ +--- +title: Node.parentNode +slug: Web/API/Element/parentNode +tags: + - API + - DOM + - Gecko + - Proprietà +translation_of: Web/API/Node/parentNode +--- +
+
{{APIRef("DOM")}}
+
+ +

La proprietà di sola lettura Node.parentNode restituisce il genitore del nodo specificato nell'albero DOM.

+ +

Sintassi

+ +
parentNode = node.parentNode
+
+ +

parentNode è il genitore del nodo corrente. Il genitore di un elemento è un nodo Element, un nodo Document, o un nodo DocumentFragment.

+ +

Esempio

+ +
if (node.parentNode) {
+  // rimuovi un nodo dall'albero, a meno che
+  // non sia già nell'albero
+  node.parentNode.removeChild(node);
+}
+ +

Note

+ +

I nodi Document e DocumentFragment non possono mai avere un genitore, quindi parentNode ritornerà sempre null.

+ +

Restituisce anche null se il nodo è appena stato creato e non è ancora collegato all'albero.

+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.parentNode")}}

+ +

Specifiche

+ + + +

Vedi anche

+ + diff --git a/files/it/web/api/element/prefix/index.html b/files/it/web/api/element/prefix/index.html new file mode 100644 index 0000000000..3371ff1f8d --- /dev/null +++ b/files/it/web/api/element/prefix/index.html @@ -0,0 +1,26 @@ +--- +title: element.prefix +slug: Web/API/Element/prefix +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Node/prefix +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il namespace del nodo, oppure null se il nodo non ha alcun prefisso.

+

Sintassi

+
stringa = element.prefix
+element.prefix =stringa
+
+

Esempi

+

Il seguente esempio produce il messaggio "x".

+
<x:div onclick="alert(this.prefix)"/>
+
+

Note

+

Questa proprietà funziona solo quando si utilizza un interprete in grado di gestire i namespace, per esempio quando un documento viene presentato con il tipo mime XML. Non funziona invece con i documenti HTML.

+

Specifiche

+

Node.prefix (introdotto in DOM2).

+

{{ languages( { "en": "en/DOM/element.prefix", "ja": "ja/DOM/element.prefix", "pl": "pl/DOM/element.prefix" } ) }}

diff --git a/files/it/web/api/element/queryselector/index.html b/files/it/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..f6455563d9 --- /dev/null +++ b/files/it/web/api/element/queryselector/index.html @@ -0,0 +1,131 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +
{{APIRef("DOM")}}
+ +

Il metodo querySelector() dell'interfaccia {{domxref("Element")}} restituisce il primo elemento discendente dell'elemento su cui è invocato corrispondente al gruppo specificato di selettori.

+ +

Sintassi

+ +
var element = baseElement.querySelector(selectors);
+
+ +

Parameters

+ +
+
selectors
+
Un gruppo di selettori per abbinare gli elementi discendenti di {{domxref ("Element")}} baseElement contro; questa deve essere una sintassi CSS valida o si verificherà un SyntaxError. Viene restituito il primo elemento trovato che corrisponde a questo gruppo di selettori.
+
+ +

Valore di ritorno

+ +

Il primo elemento discendente di baseElement che corrisponde al gruppo specificato di selectors. L'intera gerarchia di elementi viene considerata durante la corrispondenza, inclusi quelli esterni all'insieme di elementi, incluso baseElement e i suoi discendenti; in altre parole, selectors viene prima applicato all'intero documento, non a baseElement, per generare un elenco iniziale di elementi potenziali. Gli elementi risultanti vengono quindi esaminati per vedere se sono discendenti di baseElement. La prima corrispondenza di questi elementi rimanenti viene restituita dal metodo querySelector().

+ +

Se non vengono trovate corrispondenze, il valore restituito è null.

+ +

Eccezioni

+ +
+
SyntaxError
+
I selectors specificati non sono validi.
+
+ +

Esempi

+ +

Consideriamo alcuni esempi.

+ +

Trova un elemento specifico con valori specifici di un attributo

+ +

In questo primo esempio, viene restituito il primo elemento {{HTMLElement("style")}} che non ha né il tipo né il tipo "text/css" nel corpo del documento HTML:

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

L'intera gerarchia conta

+ +

Questo esempio dimostra che la gerarchia dell'intero documento è considerata quando si applicano i selectors, in modo che i livelli al di fuori di baseElement specificato siano ancora considerati quando si localizzano le corrispondenze.

+ +

HTML

+ +
<div>
+  <h5>Original content</h5>
+  <p>
+    inside paragraph
+    <span>inside span</span>
+    inside paragraph
+  </p>
+</div>
+<div>
+  <h5>Output</h5>
+  <div id="output"></div>
+</div>
+ +

JavaScript

+ +
var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML =
+  (baseElement.querySelector("div span").innerHTML);
+ +

Risultato

+ +

Il risultato è simile a questo:

+ +

{{ EmbedLiveSample("L'intera_gerarchia_conta", 600, 160) }}

+ +

Nota come il selettore "div span" corrisponda ancora correttamente all'elemento {{HTMLElement("span")}} anche se il
+ i nodi figli di baseElement non includono l'elemento {{domxref("div")}} (fa ancora parte del selettore specificato).

+ +

More examples

+ +

Vedi {{domxref("Document.querySelector()")}} per ulteriori esempi del formato corretto per i selectors.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}{{Spec2('DOM WHATWG')}}
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}}
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.querySelector")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/queryselectorall/index.html b/files/it/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..696b449cb6 --- /dev/null +++ b/files/it/web/api/element/queryselectorall/index.html @@ -0,0 +1,182 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +tags: + - API + - CSS Selectors + - DOM + - Element + - Finding Elements + - Method + - Referenza + - Searching Elements + - Selecting Elements + - Selectors + - querySelector +translation_of: Web/API/Element/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

Il metodo {{domxref("Element")}} querySelectorAll() restituisce una {{domxref("NodeList")}} statica (non dinamica) che rappresenta un elenco di elementi corrispondenti al gruppo specificato di selettori che sono i discendenti dell'elemento su cui è stato chiamato il metodo.

+ +
+

Note: This method is implemented based on the {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.

+
+ +

Sintassi

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

Parametri

+ +
+
selectors
+
Una {{domxref("DOMString")}} contenente uno o più selettori con cui confrontarsi. Questa stringa deve essere una stringa di un CSS selector valido; se non lo è, viene generata un'eccezione SyntaxError. Vedi Individuazione degli elementi DOM mediante selettori per ulteriori informazioni sull'uso dei selettori per identificare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.
+
+ +
+

Note: I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape del backspace, è necessario prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.

+
+ +

Valore di ritorno

+ +

Una {{domxref("NodeList")}} non dinamica contenente un oggetto {{domxref("Element")}} per ciascun nodo discendente che corrisponde ad almeno uno dei selettori specificati.

+ +
+

Note: Se i selectors specificati includono un CSS pseudo-element, l'elenco restituito è sempre vuoto.

+
+ +

Exceptions

+ +
+
SyntaxError
+
La sintassi della stringa selectors specificata non è valida.
+
+ +

Esempi

+ +

Ottenere un elenco di risultati

+ +

Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} contenuti nell'elemento "myBox":

+ +
var matches = myBox.querySelectorAll("p");
+ +

Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} di "myBox" con la classe "note" o "alert":

+ +
var matches = myBox.querySelectorAll("div.note, div.alert");
+
+ +

Qui, otteniamo un elenco degli elementi <p> del documento il cui elemento padre immediato è un {{domxref("div")}} con la classe "highlighted" e che si trovano all'interno di un contenitore il cui ID è "test".

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

Questo esempio usa un attribute selector per restituire una lista degli elementi {{domxref("iframe")}} nel documento che contengono un attributo chiamato "data-src":

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è "userlist" che hanno un attributo "data-active" il cui valore è "1":

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

Accedere ai risultati

+ +

Una volta restituita la {{domxref("NodeList")}} degli elementi di corrispondenza, è possibile esaminarlo come qualsiasi array. Se la matrice è vuota (ovvero la sua proprietà length è 0), non è stata trovata alcuna corrispondenza.

+ +

Altrimenti, puoi semplicemente usare la notazione standard per accedere al contenuto della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +
+

Note: NodeList non è un vero array, vale a dire che non ha i metodi dell'array come slice, some, map etc. Per convertirlo in un array, prova Array.from(nodeList).

+
+ +

Note dell'utente

+ +

querySelectorAll() si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.

+ +

HTML

+ +

Considera questo HTML, con i suoi tre blocchi {{HTMLElement("div")}} annidati.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

In questo esempio, quando si seleziona ".outer .inner" nel contesto il <div> con la classe "select", tsi trova ancora l'elemento con la classe ".inner", anche se​​​​​​ .outer non è un discendente dell'elemento base su cui viene eseguita la ricerca (".select"). Per impostazione predefinita, querySelectorAll() verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.

+ +

La pseudo-classe {{cssxref(":scope")}} ripristina il comportamento previsto, abbinando solo i selettori sui discendenti dell'elemento base:

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Standard di vita
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Nessun cambiamento
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Definizione iniziale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definizione originale
+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Element.querySelectorAll")}}

+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/removeattribute/index.html b/files/it/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..2a64205cc3 --- /dev/null +++ b/files/it/web/api/element/removeattribute/index.html @@ -0,0 +1,57 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +tags: + - API + - DOM + - Elemento + - Riferimento + - metodo +translation_of: Web/API/Element/removeAttribute +--- +
{{ APIRef("DOM") }}
+ +

Il metodo {{domxref("Element")}} removeAttribute() rimuove l'attributo con il nome specificato dall'elemento.

+ +

Sintassi

+ +
element.removeAttribute(attrName);
+
+ +

Parametri

+ +
+
attrName
+
Una {{domxref("DOMString")}} che specifica il nome dell'attributo da rimuovere dall'elemento. Se l'attributo specificato non esiste, removeAttribute() restituisce senza generare un errore.
+
+ +

Valore di ritorno

+ +

undefined.

+ +
+

Note: Poiché removeAttribute() non restituisce un valore, non è possibile concatenare più chiamate contemporaneamente per rimuovere più attributi contemporaneamente.

+
+ +

Note di utilizzo

+ +

Dovresti usare removeAttribute() invece di impostare il valore dell'attributo null direttamente o usando {{domxref("Element.setAttribute", "setAttribute()")}}. Molti attributi non si comportano come previsto se li imposti a null.

+ +

{{ DOMAttributeMethods() }}

+ +

Esempio

+ +
// Prima: <div id="div1" align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// Dopo: <div id="div1" width="200px">
+
+ +

Specifica

+ +

DOM Level 2 Core: removeAttribute (introdotta nel DOM Level 1 Core)

+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.removeAttribute")}}

diff --git a/files/it/web/api/element/requestfullscreen/index.html b/files/it/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..624e2da766 --- /dev/null +++ b/files/it/web/api/element/requestfullscreen/index.html @@ -0,0 +1,110 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +translation_of: Web/API/Element/requestFullScreen +--- +
{{APIRef("Fullscreen API")}}
+ +

Il metodo Element.requestFullscreen() invia una richiesta asincrona per visualizzare l'elemento a schremo intero (full-screen).

+ +

Non c'è garanzia che l'elemento verrà effettivamente visualizzato a schermo intero. Se il permesso di entrare in modalità full-screen è accordato, il documento riceverà un evento di tipo {{event("fullscreenchange")}} che lo informarà dell'avvenuto passaggio in modalità full-screen. Viceversa, se il permesso è negato, il documento riceve un evento di tipo {{event('fullscreenerror')}}.

+ +
+

Soltanto gli elementi nel documento principale o in un {{HTMLElement('iframe')}} con l'attributo {{htmlattrxref("allowfullscreen", "iframe")}} possono essere visualizzati a schermo intero. Questo signigica che gli elementi all'interno di un {{HTMLElement('frame')}} o un {{HTMLElement('object')}} non possono.

+
+ +

Sintassi

+ +
elt.requestFullscreen();
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatoNote
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Initial definition
+ +

Compatibilità browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefoxInternet ExplorerEdgeOperaSafari
Basic support{{CompatVersionUnknown}}{{property_prefix("webkit")}}[1]{{CompatGeckoDesktop("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled		11{{property_prefix("ms")}}[3]{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] implementato anche come webkitRequestFullScreen.

+ +

[2] Implementato come mozRequestFullScreen (notare la letterea S maiuscola per Screen). Prima di Firefox 44, Gecko erroneamente permetteva agli elementi all'inderno di un {{HTMLElement('frame')}} o un {{HTMLElement('object')}} di richiedere e ottenere il full screen. Da Firefox 44 in poi ciò è stato corretto: solo gli elementi del documento principale o di un {{HTMLElement('iframe')}} con l'attributo {{htmlattrxref("allowfullscreen", "iframe")}} possono essere visualizzati a schermo intero.

+ +

[3] Vedi documentazione su MSDN.

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/scrollheight/index.html b/files/it/web/api/element/scrollheight/index.html new file mode 100644 index 0000000000..05cc48fd15 --- /dev/null +++ b/files/it/web/api/element/scrollheight/index.html @@ -0,0 +1,170 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +translation_of: Web/API/Element/scrollHeight +--- +

{{ APIRef("DOM") }}

+ +

L' Element.scrollHeight è una proprietà di sola lettura e contiene la misura dell'altezza del contenuto di un elemento, incluso il contenuto non visibile sullo schermo a causa dell'overflow. Il valore dello scrollHeight è uguale al minimo valore del clientHeight che l'elemento richiederebbe per adattare tutto il contenuto nel punto di vista, senza usare una barra di scorrimento verticale. Esso include il padding, ma non il bordo dell'elemento.

+ +
+

Questa proprietà ritornerà un numero intero. Se hai bisogno di un numero decimale, invece, usa {{ domxref("Element.getBoundingClientRect()") }}.

+
+ +

Sintassi

+ +
var intElemScrollHeight = document.getElementById("nome dell'id").scrollHeight;
+
+ +

La variabile intElemScrollHeight è una variabile contenente un numero intero che corrisponde allo scrollHeight in pixel dell'elemento. ScrollHeight è una proprietà di sola lettura.

+ +

Esempio

+ +
+
+

padding-top

+ +

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+ +

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+ +

Cat image and text coming from www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: _fckstyle="position: _fckstyle="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+ +

Image:scrollHeight.png

+ +

Problemi e soluzioni

+ +

Determinare se un elemento è arrivato in fondo con lo scroll.

+ +

La seguente funzione ritorna true se l'elemento è in fondo al suo scorrimento, false altrimenti.

+ +
element.scrollHeight - element.scrollTop === element.clientHeight
+ +

 

+ +

Associato all'evento onscroll, questa equivalenza potrebbe tornare utile per determinare se l'utente ha letto un testo o no (guarda anche le proprietà element.scrollTop e element.clientHeight). Per esempio:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+function checkReading () {
+  if (checkReading.read) { return; }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ?
+    "Thank you." :
+    "Please, scroll and read the following text.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}
+
+</script>
+<style type="text/css">
+
+#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}
+</style>
+</head>
+
+<body>
+
+  <form name="registration">
+
+    <p>
+      <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim.
+
+Phasellus ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta at arcu.
+
+Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in ligula. Vivamus vitae urna mauris, eget euismod nunc.
+
+Aenean semper gravida enim non feugiat. In hac habitasse platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et a orci. Donec aliquet volutpat scelerisque.
+
+Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.</textarea>
+    </p>
+
+    <p>
+      <input type="checkbox" name="accept" id="agree" />
+      <label for="agree">I agree</label>
+      <input type="submit" id="nextstep" value="Next" />
+    </p>
+
+  </form>
+
+</body>
+</html>
+
+ +

Guarda l'esempio qui sopra

+ +

Specificazioni

+ +

scrollHeight è parte del modello dell'oggetto MSIE's DHTML . scrollHeight funziona su questi browser: {{SpecName("CSSOM View")}}.

+ +

Compatibilità dei Browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersioni
Internet Explorer8.0
Firefox (Gecko)3.0 (1.9)
Opera?
Safari | Chrome | WebKit4.0 | 4.0 | ?
+ +

Nelle versioni più vecchie di FireFox: Qualora un contenuto di un elemento non generasse una barra di scorrimento varticale, allora il suo scrollHeight sarebbe uguale al suo clientHeight . Questo ci può dire che, o il contenuto è talmente corto da non richiedere una barra di scorrimento verticale, o che quell'elemento ha impostato la proprietà CSS overflow su visible (non-scrollabile).

+ +

Guarda anche

+ + diff --git a/files/it/web/api/element/scrolltop/index.html b/files/it/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..52d7520f6f --- /dev/null +++ b/files/it/web/api/element/scrolltop/index.html @@ -0,0 +1,83 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +tags: + - API + - Proprietà + - Referenza +translation_of: Web/API/Element/scrollTop +--- +
{{ APIRef("DOM") }}
+ +

La proprietà Element.scrollTop ottiene o imposta il numero di pixel in cui il contenuto di un elemento viene fatto scorrere verticalmente.

+ +

Il valore scrollTop di un elemento è una misura della distanza dalla parte superiore dell'elemento al suo contenuto visibile più in alto. Quando il contenuto di un elemento non genera una barra di scorrimento verticale, il suo valore scrollTop è 0.

+ +
+

Sui sistemi che usano il ridimensionamento del display, scrollTop può darti un valore decimale.

+
+ +

Sintassi

+ +
// Get the number of pixels scrolled.
+var intElemScrollTop = someElement.scrollTop;
+
+ +

Dopo aver eseguito questo codice, intElemScrollTop è un numero intero corrispondente al numero di pixel che il contenuto dell'{{domxref("element")}} è stato fatto scorrere verso l'alto.

+ +
// Set the number of pixels scrolled.
+element.scrollTop = intValue;
+
+ +

scrollTop può essere impostato su qualsiasi valore intero, con alcuni avvertimenti:

+ + + +

Esempio

+ +
+
+

padding-top

+If you can see this, scrollTop = 0 + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+If you can see this, scrollTop is > 0 + +

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+If you can see this, scrollTop is maxed-out + +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Specifiche

+ + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.scrollTop")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/setattribute/index.html b/files/it/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..b3644c8bb2 --- /dev/null +++ b/files/it/web/api/element/setattribute/index.html @@ -0,0 +1,83 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +translation_of: Web/API/Element/setAttribute +--- +

{{APIRef("DOM")}}

+ +

Imposta il valore di un attributo sull'elemento specificato. Se l'attributo esiste già, il valore viene aggiornato; in caso contrario viene aggiunto un nuovo attributo con il nome e il valore specificati.

+ +

Per ottenere il valore corrente di un attributo, utilizza il metodo {{domxref("Element.getAttribute", "getAttribute()")}}; per rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Sintassi

+ +
Element.setAttribute(nome, valore);
+
+ +

Parametri

+ +
+
nome
+
Una {{domxref("DOMString")}} specifica il nome dell'attributo il cui valore deve essere impostato. Il nome dell'attributo viene automaticamente convertito in minuscolo quando setAttribute() viene chiamato su un elemento in un documento HTML.
+
valore
+
Una {{domxref("DOMString")}} contenente il valore da assegnare all'attributo. Qualsiasi valore non stringa specificato viene convertito automaticamente in una stringa.
+
+ +

Gli attributi booleani sono considerati true se sono presenti sull'elemento, indipendentemente dal loro valore effettivo; di norma, è necessario specificare la stringa vuota ("") in valore (alcune persone usano il nome dell'attributo, ma funziona in modo non standard). Vedi l'{{anch ("Esempio", "esempio")}} sotto per una dimostrazione pratica.

+ +

Poiché il valore specificato viene convertito in una stringa, specificare null non fa necessariamente ciò che si aspetta. Invece di rimuovere l'attributo o impostarne il valore come {{jsxref("null")}}, imposta invece il valore dell'attributo sulla stringa null. Se vuoi rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Valore di ritorno

+ +

{{jsxref("undefined")}}.

+ +

Eccezioni

+ +
+
InvalidCharacterError
+
L'attributo specificato nome contiene uno o più caratteri che non sono validi nei nomi degli attributi.
+
+ +

Esempio

+ +

Nell'esempio seguente, setAttribute() viene utilizzato per impostare gli attributi su un {{HTMLElement("button")}}.

+ +

HTML

+ +
<button>Hello World</button>
+ +

JavaScript

+ +
var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");
+
+ +

Questo dimostra due cose:

+ + + +

{{ EmbedLiveSample('Example', '300', '50') }}

+ +

{{DOMAttributeMethods}}

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.setAttribute")}}

+ +

Gecko notes

+ +

L'utilizzo di setAttribute() per modificare determinati attributi, in particolare value in XUL, funziona in modo incoerente, in quanto l'attributo specifica il valore predefinito. Per accedere o modificare i valori correnti, è necessario utilizzare le proprietà. Ad esempio, utilizzare Element.value anziché Element.setAttribute().

diff --git a/files/it/web/api/element/tagname/index.html b/files/it/web/api/element/tagname/index.html new file mode 100644 index 0000000000..950a9a17a4 --- /dev/null +++ b/files/it/web/api/element/tagname/index.html @@ -0,0 +1,72 @@ +--- +title: Element.tagName +slug: Web/API/Element/tagName +tags: + - API + - DOM + - Di sola lettura + - Element + - Gecko + - Proprietà + - Referenza + - Referenza del DOM + - tagName +translation_of: Web/API/Element/tagName +--- +
{{ApiRef("DOM")}}
+ +

La proprietà tagName di sola lettura dell'interfaccia {{domxref("Element")}} restituisce il nome del tag dell'elemento su cui è chiamato. Ad esempio, se l'elemento è un {{HTMLElement("img")}}, la sua proprietà tagName è "IMG" (per i documenti HTML, può essere modificata in modo diverso per i documenti XML/XHTML).

+ +

Sintassi

+ +
elementName = Element.tagName;
+
+ +

Valore

+ +

Una stringa che indica il nome del tag dell'elemento. La capitalizzazione di questa stringa dipende dal tipo di documento:

+ + + +

Per gli oggetti {{domxref("Element")}}, il valore di tagName è uguale al valore della proprietà {{domxref("Node.nodeName", "nodeName")}} che l'oggetto elemento eredita da {{domxref("Node")}}.

+ +

Esempio

+ +

HTML

+ +
<span id="born">Quando sono nato...</span>
+
+ +

JavaScript

+ +
var span = document.getElementById("born");
+console.log(span.tagName);
+
+ +

In XHTML (o qualsiasi altro formato XML), il caso originale verrà mantenuto, quindi "span" verrebbe stampato nel caso in cui il nome del tag originale fosse stato creato in minuscolo. In HTML, "SPAN" verrebbe invece stampato indipendentemente dal caso utilizzato durante la creazione del documento originale.

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-tagname', 'Element: tagName')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.tagName")}}

diff --git a/files/it/web/api/element/textcontent/index.html b/files/it/web/api/element/textcontent/index.html new file mode 100644 index 0000000000..137c76a3eb --- /dev/null +++ b/files/it/web/api/element/textcontent/index.html @@ -0,0 +1,138 @@ +--- +title: Node.textContent +slug: Web/API/Element/textContent +tags: + - API + - Command API + - DOM + - Proprietà + - Referenza +translation_of: Web/API/Node/textContent +--- +
{{APIRef("DOM")}}
+ +

La proprietà textContent dell'interfaccia {{domxref("Node")}} rappresenta il contenuto del testo di un nodo e dei suoi discendenti.

+ +
+

Note: textContent e {{domxref("HTMLElement.innerText")}} sono facilmente confusi, ma i due sono diversi in modi molto importanti.

+
+ +

Sintassi

+ +
var text = Node.textContent;
+Node.textContent = string;
+
+ +

Valore di ritorno

+ +

Una stringa o null.

+ +

Descrizione

+ +

Quando ottieni questa proprietà:

+ + + +

L'impostazione di textContent su un nodo rimuove tutti i figli del nodo e li sostituisce con un singolo nodo di testo con il valore di stringa specificato.

+ +

Differenze da innerText

+ +

Non lasciarti confondere dalle differenze tra Node.textContent e {{domxref("HTMLElement.innerText")}}. Anche se i nomi sembrano simili, ci sono differenze importanti:

+ + + +

Differenze da innerHTML

+ +

{{domxref("Element.innerHTML")}} restituisce HTML, come indica il nome. A volte le persone usano innerHTML per recuperare o scrivere testo all'interno di un elemento, ma textContent ha prestazioni migliori perché il suo valore non viene analizzato come HTML. Inoltre, l'utilizzo di textContent può impedire gli attacchi XSS.

+ +

Esempi

+ +

Dato questo codice HTML:

+ +
<div id="divA">Questo è <span>un</span> testo!</div>
+ +

...puoi usare textContent per ottenere il contenuto del testo dell'elemento:

+ +
let text = document.getElementById('divA').textContent;
+// La variabile text è ora: "Questo è un testo!"
+ +

...o imposta il contenuto del testo dell'elemento:

+ +
document.getElementById('divA').textContent = 'Questo testo è diverso!';
+// L'HTML per divA è ora:
+// <div id="divA">Questo testo è diverso!</div>
+
+ +

Polyfill per IE8

+ +
// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8
+if (Object.defineProperty
+  && Object.getOwnPropertyDescriptor
+  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
+  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
+  (function() {
+    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
+    Object.defineProperty(Element.prototype, "textContent",
+     // Passare innerText o innerText.get direttamente non funziona,
+     // è richiesta la funzione wrapper.
+     {
+       get: function() {
+         return innerText.get.call(this);
+       },
+       set: function(s) {
+         return innerText.set.call(this, s);
+       }
+     }
+   );
+  })();
+}
+
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.textContent")}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento vs. DOM4
{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM4')}}
{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}{{Spec2('DOM3 Core')}}Introdotto
+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/toggleattribute/index.html b/files/it/web/api/element/toggleattribute/index.html new file mode 100644 index 0000000000..c997b4efdd --- /dev/null +++ b/files/it/web/api/element/toggleattribute/index.html @@ -0,0 +1,104 @@ +--- +title: Element.toggleAttribute() +slug: Web/API/Element/toggleAttribute +translation_of: Web/API/Element/toggleAttribute +--- +
{{APIRef("DOM")}}
+ +

Il metodo toggleAttribute() dell'interfaccia {{domxref("Element")}} attiva/disattiva un attributo booleano (rimuovendolo se è presente e aggiungendolo se non è presente) sull'elemento specificato.

+ +

Sintassi

+ +
Element.toggleAttribute(name [, force]);
+
+ +

Parametri

+ +
+
name
+
Una {{domxref("DOMString")}} che specifica il nome dell'attributo da attivare. Il nome dell'attributo viene automaticamente convertito in minuscolo quando toggleAttribute() viene chiamato su un elemento HTML in un documento HTML.
+
force {{optional_inline}}
+
Un valore booleano per determinare se l'attributo deve essere aggiunto o rimosso, indipendentemente dal fatto che l'attributo sia presente o meno al momento.
+
+ +

Valore di ritorno

+ +

true se l'attributo name è eventualmente presente, in caso contrario false.

+ +

Exceptions

+ +
+
InvalidCharacterError
+
L'attributo specificato name contiene uno o più caratteri che non sono validi nei nomi degli attributi.
+
+ +

Esempio

+ +

Nell'esempio seguente, toggleAttribute() viene utilizzato per commutare l'attributo  readonly di un {{HTMLElement("input")}}.

+ +

HTML

+ +
<input value="text">
+<button>toggleAttribute("readonly")</button>
+ +

JavaScript

+ +
var button = document.querySelector("button");
+var input = document.querySelector("input");
+
+button.addEventListener("click", function(){
+  input.toggleAttribute("readonly");
+});
+
+ +

Risultato

+ +

{{ EmbedLiveSample('Esempio', '300', '50') }}

+ +

{{DOMAttributeMethods}}

+ +

Polyfill

+ +
if (!Element.prototype.toggleAttribute) {
+  Element.prototype.toggleAttribute = function(name, force) {
+    if(force !== void 0) force = !!force
+
+    if (this.getAttribute(name) !== null) {
+      if (force) return true;
+
+      this.removeAttribute(name);
+      return false;
+    } else {
+      if (force === false) return false;
+
+      this.setAttribute(name, "");
+      return true;
+    }
+  };
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-toggleattribute', 'Element.toggleAttribute')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.toggleAttribute")}}

diff --git a/files/it/web/api/event/altkey/index.html b/files/it/web/api/event/altkey/index.html new file mode 100644 index 0000000000..1ab63e4329 --- /dev/null +++ b/files/it/web/api/event/altkey/index.html @@ -0,0 +1,46 @@ +--- +title: event.altKey +slug: Web/API/Event/altKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/altKey +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il tasto ALT era premuto mentre l'evento si verificava.

+

Syntax

+
bool = event.altKey
+
+

bool vale true se il tasto ALT era premuto, altrimenti false.

+

Esempio

+
<html>
+<head>
+<title>esempio tasto ALT</title>
+
+<script type="text/javascript">
+
+function mostraCarattere(e){
+  alert(
+    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+    + "Codice carattere: " + e.charCode + "\n"
+    + "Tasto ALT premuto: " + e.altKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="mostraCarattere(event);">
+<p>
+Prova a premere un tasto tenendo premuto ALT e prova a premere un tasto senza premere ALT.<br />
+Puoi anche provare a premere ALT+SHIFT.
+</p>
+</body>
+</html>
+
+

Specifiche

+

altKey

+

{{ languages( { "en": "en/DOM/event.altKey", "pl": "pl/DOM/event.altKey" } ) }}

diff --git a/files/it/web/api/event/bubbles/index.html b/files/it/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..e75e385070 --- /dev/null +++ b/files/it/web/api/event/bubbles/index.html @@ -0,0 +1,31 @@ +--- +title: event.bubbles +slug: Web/API/Event/bubbles +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/bubbles +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se un dato evento può emergere attraverso il DOM oppure no.

+

Sintassi

+
bool = event.bubbles
+
+

bool vale true se l'evento può emergere, altrimenti vale false.

+

Note

+

Solo alcuni eventi possono emergere. Tali eventi hanno questa proprietà impostata a true. E' possibile utilizzarla per controllare se un evento può emergere.

+

Esempio

+
 function leggiInput(e) {
+  // controlla se emerge
+  if not e.bubbles {
+     // in caso negativo, passa oltre
+     passaOltre(e);
+  }
+  // altrimenti emerge
+  scriviOutput(e)
+}
+
+

{{ languages( { "en": "en/DOM/event.bubbles", "pl": "pl/DOM/event.bubbles" } ) }}

diff --git a/files/it/web/api/event/button/index.html b/files/it/web/api/event/button/index.html new file mode 100644 index 0000000000..5862d54439 --- /dev/null +++ b/files/it/web/api/event/button/index.html @@ -0,0 +1,57 @@ +--- +title: event.button +slug: Web/API/Event/button +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/button +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un intero che indica quale tasto del mouse è stato premuto.

+

Sintassi

+
var codiceBottone = event.button;
+
+

codiceBottone può assumere uno dei seguenti valori:

+ +

L'ordine dei bottoni è inverso se il mouse è configurato per l'utilizzo da parte dei mancini.

+

Esempio

+
<script type="text/javascript">
+
+function qualeTasto(e)
+{
+  var e = e || window.event;
+  var codiceTasto;
+
+  if ('object' == typeof e){
+    codiceTasto = e.button;
+
+    switch (codiceTasto){
+      case 0  : alert('Hai premuto il tasto sinistro');
+                break;
+      case 1  : alert('Hai premuto il tasto centrale');
+                break;
+      case 2  : alert('Hai premuto il tasto destro');
+                break;
+      default : alert('Codice sconosciuto: ' + btnCode);
+    }
+  }
+}
+
+</script>
+
+<p onclick="qualeBottone(event);">Clicca con il mouse...</p>
+
+
+

Note

+

Poichè i click del mouse spesso vengono intercettati dall'interfaccia utente, in alcuni casi potrebbe essere difficile rilevare la pressione di un bottone che non sia quello standard (generalmente il sinistro).

+

Gli utenti possono cambiare la configurazione dei tasti del loro dispositivo di puntamento in modo tale che se il valore di codiceBottone è 0, questo non è causato dal tasto che si trova fisicamente a sinistra, ma questo non ha molta importanza.

+

Specifiche

+

DOM 2 Events Specification: button

+

{{ languages( { "en": "en/DOM/event.button", "pl": "pl/DOM/event.button" } ) }}

diff --git a/files/it/web/api/event/cancelable/index.html b/files/it/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..3258a2b37d --- /dev/null +++ b/files/it/web/api/event/cancelable/index.html @@ -0,0 +1,23 @@ +--- +title: event.cancelable +slug: Web/API/Event/cancelable +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/cancelable +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se è possibile cancellare la risposta predefinita di questo evento o meno.

+

Sintassi

+
bool =event.cancelable;
+
+

bool vale true se l'evento è cancellabile, altrimenti false.

+

Note

+

Se un evento possa essere cancellato o meno, viene determinato al momento dell'inizializzazione dell'evento.

+

Per cancellare un evento, si chiami il metodo preventDefault. Questo impedisce al browser di eseguire l'azione di default associata a tale evento.

+

Specification

+

DOM Level 2 Events: cancelable

+

{{ languages( { "en": "en/DOM/event.cancelable", "pl": "pl/DOM/event.cancelable" } ) }}

diff --git a/files/it/web/api/event/charcode/index.html b/files/it/web/api/event/charcode/index.html new file mode 100644 index 0000000000..fb785e722e --- /dev/null +++ b/files/it/web/api/event/charcode/index.html @@ -0,0 +1,49 @@ +--- +title: event.charCode +slug: Web/API/Event/charCode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/KeyboardEvent/charCode +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il valore Unicode del tasto carattere che è stato premuto e ha scatenato un evento keypress.

+

Sintassi

+
valore = event.charCode
+
+ +

Esempio

+
<html>
+<head>
+<title>esempio di charCode</title>
+
+<script type="text/javascript">
+
+function mostraCarattere(e)
+{
+alert("Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+      + "Codice carattere: " + e.charCode);
+}
+
+</script>
+</head>
+
+<body onkeypress="mostraCarattere(event);">
+<p>Premere un qualsiasi tasto carattere.</p>
+</body>
+</html>
+
+

Note

+

In un evento keypress, il valore Unicode del tasto premuto viene registrato nella proprietà keyCode oppure nella proprietà charCode, mai in entrambe. Se il tasto premuto corrisponde a un carattere (per esempio 'a'), charCode assume il valore Unicode di quel carattere (che è diverso per le maiuscole e per le minuscole). In caso contrario, il codice del tasto premuto viene registrato nella proprietà keyCode.

+

charCode non viene mai impostato durante gli eventi keydown e keyup. In questi casi, viene impostato keyCode.

+

Per leggere il codice del tasto indipendentemente dal fatto che esso si trovi in keyCode o in charCode, si può utilizzare la proprietà which.

+

I caratteri inseriti attraverso un IME non vengono registrati nè in keyCode nè in charCode.

+

Per una lista dei possibili valori di charCode e per conoscere i tasti ai quali sono associati, vedere l'esempio Reference del DOM di Gecko:Esempi #Example 7: Mostrare le costanti dell'oggetto Event.

+

Specifiche

+

Non è parte di alcuna specifica. Si veda nsIDOMKeyEvent

+

{{ languages( { "en": "en/DOM/event.charCode", "pl": "pl/DOM/event.charCode" } ) }}

diff --git a/files/it/web/api/event/ctrlkey/index.html b/files/it/web/api/event/ctrlkey/index.html new file mode 100644 index 0000000000..02fe7f82bf --- /dev/null +++ b/files/it/web/api/event/ctrlkey/index.html @@ -0,0 +1,44 @@ +--- +title: event.ctrlKey +slug: Web/API/Event/ctrlKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/ctrlKey +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il tasto CTRL è stato premuto mentre l'evento si verificava.

+

Sintassi

+
bool = event.ctrlKey
+
+

bool vale true se il tasto CTRL era premuto, altrimenti false.

+

Esempio

+
<html>
+<head>
+<title>esempio tasto control</title>
+
+<script type="text/javascript">
+
+function mostraCarattere(e){
+  alert(
+    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+    + "Codice carattere: " + e.charCode + "\n"
+    + "Tasto CTRL premuto: " + e.ctrlKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="mostraCarattere(event);">
+<p>Prova a premere un tasto tenendo premuto CTRL e prova a premere un tasto senza premere CTRL.<br />
+Puoi anche provare a premere CTRL+SHIFT.</p>
+</body>
+</html>
+
+

Specifiche

+

ctrlKey

+

{{ languages( { "en": "en/DOM/event.ctrlKey", "pl": "pl/DOM/event.ctrlKey" } ) }}

diff --git a/files/it/web/api/event/currenttarget/index.html b/files/it/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..7fcc81f4b3 --- /dev/null +++ b/files/it/web/api/event/currenttarget/index.html @@ -0,0 +1,99 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +translation_of: Web/API/Event/currentTarget +--- +

{{APIRef("DOM")}}

+ +

Identifica l'elemento del DOM a cui è stato assegnato l'event handler diversamente dall' event.target che rappresenta l'elemento da cui è stato generato l'evento.

+ +

Esempio

+ +

L' event.currentTarget risulta utile da usare quando si assegna lo stesso event handler a numerosi elementi.

+ +
function hide(e){
+  e.currentTarget.style.visibility = "hidden";
+  // When this function is used as an event handler: this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i < ps.length; i++){
+  ps[i].addEventListener('click', hide, false);
+}
+
+// click around and make paragraphs disappear
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}{{Spec2("DOM2 Events")}}Initial definition
+ +

Compatibilità Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Il modello degli eventi implementato dagli Internet Explorer da 6 a 8 è diverso. Gli event listerner sono attaccati attraverso il metodo non standard element.attachEvent. In questo modello non esiste un equivalente dell' event.currentTarget inoltre this è l'oggetto globale. Una possibile soluzione è quella di wrappare la gestione dell' event.currentTarget in una funzione che chiami la funzione di handler attraverso la Function.prototype.call passando come primo parametro l'elemento. In questo modo il valore associato allo this è quello aspettato.

+ +

Vedi anche

+ +

Comparison of Event Targets

diff --git a/files/it/web/api/event/eventphase/index.html b/files/it/web/api/event/eventphase/index.html new file mode 100644 index 0000000000..d695a1451a --- /dev/null +++ b/files/it/web/api/event/eventphase/index.html @@ -0,0 +1,19 @@ +--- +title: event.eventPhase +slug: Web/API/Event/eventPhase +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/eventPhase +--- +

{{ ApiRef() }}

+

Sommario

+

Indica quale fase del flusso degli eventi è attualmente in elaborazione.

+

Sintassi

+
fase = event.eventPhase
+
+

Specifiche

+

eventPhase

+

{{ languages( { "en": "en/DOM/event.eventPhase", "pl": "pl/DOM/event.eventPhase" } ) }}

diff --git a/files/it/web/api/event/index.html b/files/it/web/api/event/index.html new file mode 100644 index 0000000000..6ae75ff300 --- /dev/null +++ b/files/it/web/api/event/index.html @@ -0,0 +1,240 @@ +--- +title: event +slug: Web/API/Event +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event +--- +

{{ ApiRef() }}

+

Introduzione

+

Questo capitolo descrive il modello degli eventi del DOM Level 2 così come è implementato in Gecko. Viene descritta l'interfaccia Event, così come le interfacce per la registrazione di eventi per i nodi del DOM, i gestori di eventi, i listener e diversi esempi che mostrano come le interfacce dei diversi eventi si relazionano tra loro.

+

Vi è un diagramma eccellente che spiega chiaramente le tre fasi del flusso degli eventi nella bozza di DOM Level 3.

+

L'interfaccia Event

+

I gestori degli eventi possono essere assegnati a vari elementi DOM. Quando un dato evento si verifica, un oggetto evento viene creato dinamicamente e passato agli event listener che permettono di gestirlo. L'interfaccia Event del DOM è quindi accessibile dalla funzione che gestisce l'evento, alla quale viene passato un oggetto evento come primo e unico argomento.

+

Vi sono tre modi di assegnare un listener a un elemento. Con due di queste tecniche, l'oggetto evento viene passato implicitamente alla funzione che gestisce l'evento. Con la terza tecnica, occorre passare esplicitamente l'oggetto evento come parametro.

+

L'esempio seguente mostra come un oggetto evento viene passato a tale funzione e come può essere utilizzato all'interno della funzione.

+

Si noti che nel codice non viene passato alcun parametro "evt". L'oggetto evento viene passato automaticamente a foo. Tutto ciò che occorre fare è definire un parametro nel gestore di eventi che riceva l'oggetto evento.

+
function foo(evt) {
+  // le funzioni per la gestione degli eventi come questa
+  // ricevono un riferimento implicito all'oggetto evento che gestiscono
+  // (in questo caso abbiamo scelto di chiamarlo "evt").
+  alert(evt);
+}
+elementoTabella.onclick = foo;
+
+

Questo esempio è molto semplice, ma mostra una caratteristica importante degli eventi nel DOM di Gecko, cioè che è possibile accedere all'oggetto evento dalla funzione gestore. Una volta che si ha un riferimento a un evento, si può accedere a tutte le proprietà e ai metodi descritti in questo capitolo.

+

Gestori degli eventi DOM

+

Oltre all'oggetto event qui descritto, il DOM di Gecko fornisce anche metodi per la registrazione dei listener sui nodi del DOM, la rimozione di questi listeners ed eliminare gli eventi dal DOM. Questi event listener sugli elementi HTML o XML sono i modi principali per accedere agli eventi. Questi tre metodi sono descritti nella lista sottostante.

+

Si può anche passare un riferimento all'oggetto evento sotto forma di un parametro definito, chiamato event, alla funzione che gestisce l'evento. Il funzionamento è molto simile a quello della parola chiave this.

+
<html>
+<head>
+<title>esempio sul parametro evento</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  alert(
+    "valore clientX: " + evt.clientX + "\n" +
+    "valore clientY: " + evt.clientY + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+<p>Per conoscere le coordinate della posizione del mouse, clicca in qualunque punto di questa pagina.</p>
+</body>
+</html>
+
+

Utilizzando l'oggetto event predefinito è possibile passare altri parametri alla funzione, come mostrato nel seguente esempio:

+
<html>
+<head>
+<title>esempio sul parametro evento + parametri extra</title>
+
+<script type="text/javascript">
+
+var par2 = 'ciao';
+var par3 = 'mondo!';
+
+function mostraCoordinate(evt, p2, p3){
+  alert(
+    "valore clientX: " + evt.clientX + "\n"
+    + "valore clientY: " + evt.clientY + "\n"
+    + "parametro 2: " + p2 + "\n"
+    + "parametro 3: " + p3 + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onmousedown="mostraCoordinate(event, par2, par3)">
+<p>Per conoscere le coordinate della posizione del mouse e visualizzare un saluto al mondo, clicca in qualunque punto di questa pagina.</p>
+</body>
+</html>
+
+

Proprietà

+
+
+ event.altKey
+
+ Restituisce un booleano che indica se il tasto <alt> è stato premuto durante l'evento.
+
+ event.bubbles
+
+ Restituisce un booleano che indica se l'evento emerge dal DOM.
+
+ event.button
+
+ Restituisce un intero che indica quale tasto del mouse è stato premuto.
+
+ event.cancelBubble
+
+ {{ Deprecated_inline() }} Restituisce un booleano che indica se l'evento è stato cancellato.
+
+ event.cancelable
+
+ Restituisce un booleano che indica se l'evento è cancellabile.
+
+ event.charCode
+
+ Restituisce il tasto carattere che è stato premuto e che ha scatenato l'evento keypress.
+
+ event.clientX
+
+ Restituisce la posizione orizzontale del puntatore del mouse.
+
+ event.clientY
+
+ Restituisce la posizione verticale del puntatore del mouse.
+
+ event.ctrlKey
+
+ Restituisce un booleano che indica se il tasto <ctrl> è stato premuto durante l'evento.
+
+ event.currentTarget
+
+ Restituisce un riferimento all'elemento a cui appartiene l'evento.
+
+ event.detail
+
+ Restituisce alcuni dettagli sull'evento.
+
+ event.eventPhase
+
+ Indica in quale fase si trova il flusso dell'elaborazione degli eventi.
+
+ event.explicitOriginalTarget
+
+ Restituisce l'elemento dal quale ha avuto origine l'evento (solo Mozilla).
+
+ event.isChar
+
+ Restituisce un booleano che indica se l'evento è stato causato dalla pressione di un tasto carattere.
+
+ event.keyCode
+
+ Restituisce un valore Unicode per un tasto non carattere che è stato premuto.
+
+ event.layerX
+
+ Restituisce la coordinata orizzontale relativa al layer corrente.
+
+ event.layerY
+
+ Restituisce la coordinata verticale relativa al layer corrente.
+
+ event.metaKey
+
+ Restituisce un booleano che indica se il tasto meta è stato premuto durante l'evento.
+
+ event.originalTarget
+
+ Restituisce l'elemento dal quale ha avuto origine l'evento (solo Mozilla).
+
+ event.pageX
+
+ Restituisce la coordinata orizzontale relativa alla pagina.
+
+ event.pageY
+
+ Restituisce la coordinata verticale relativa alla pagina.
+
+ event.relatedTarget
+
+ Identifica un elemento secondario legato all'evento.
+
+ event.screenX
+
+ Restituisce la posizione orizzontale relativa allo schermo.
+
+ event.screenY
+
+ Restituisce la posizione verticale relativa allo schermo.
+
+ event.shiftKey
+
+ Restituisce un booleano che indica se il tasto <shift> è stato premuto durante l'evento.
+
+ event.target
+
+ Restituisce un riferimento all'elemento al quale l'evento era legato originariamente.
+
+ event.timeStamp
+
+ Restituisce il timestamp nel quale l'evento è stato scatenato.
+
+ event.type
+
+ Restituisce il nome dell'evento (case-insensitive).
+
+ event.view
+
+ Identifica l'AbstractView dal quale l'evento è stato generato.
+
+ event.which
+
+ Restituisce il valore Unicode del tasto che è stato premuto, indipendentemente da quale tipo di tasto sia stato premuto.
+
+

Metodi

+
+
+ event.initEvent
+
+ Inizializza il valore di un evento che è stato creato tramite l'interfaccia DocumentEvent.
+
+ event.initKeyEvent
+
+ Inizializza un evento legato alla tastiera (specifico di Gecko).
+
+ event.initMouseEvent
+
+ Inizializza un evento legato al mouse
+
+ event.initUIEvent
+
+ Inizializza un evento legato all'interfaccia utente
+
+ event.preventBubble
+
+ {{ Obsolete_inline() }} Previene l'emergere di un evento. Questo metodo è deprecato in favore dello standard stopPropagation ed è stato rimosso in Gecko 1.9.
+
+ event.preventCapture
+
+ {{ Obsolete_inline() }} Questo metodo è deprecato in favore dello standard stopPropagation ed è stato rimosso in Gecko 1.9.
+
+ event.preventDefault
+
+ Cancella l'evento (se è cancellabile).
+
+ event.stopPropagation
+
+ Arresta un'ulteriore propagazione degli eventi DOM.
+
+
+  
+

{{ languages( { "en": "en/DOM/event", "es": "es/DOM/event", "fr": "fr/DOM/event", "pl": "pl/DOM/event" } ) }}

diff --git a/files/it/web/api/event/ischar/index.html b/files/it/web/api/event/ischar/index.html new file mode 100644 index 0000000000..ae1edd3975 --- /dev/null +++ b/files/it/web/api/event/ischar/index.html @@ -0,0 +1,30 @@ +--- +title: event.isChar +slug: Web/API/Event/isChar +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/isChar +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un booleano che indica se è stato premuto un tasto carattere o meno.

+

Sintassi

+
bool = event.isChar
+
+ +

Esempio

+
 if e.isChar
+   ripetiInput(e.type);
+ }
+
+

Note

+

Alcune combinazioni di tasti potrebbero produrre degli eventi ma non produrre alcun carattere (per esempio CTRL+b). Quando questo accade, isChar restituisce false.

+

Attenzione: attualmente isChar è afflitto da un bug, a causa del quale il risultato è sempre false. Gli sviluppatori di Mozilla potrebbero correggere questo bug, ma potrebbero anche decidere di eliminare questa proprietà non standard.

+

Specifiche

+

Non è parte di alcuna specifica.

+

{{ languages( { "en": "en/DOM/event.isChar", "pl": "pl/DOM/event.isChar" } ) }}

diff --git a/files/it/web/api/event/keycode/index.html b/files/it/web/api/event/keycode/index.html new file mode 100644 index 0000000000..d1d69dec46 --- /dev/null +++ b/files/it/web/api/event/keycode/index.html @@ -0,0 +1,48 @@ +--- +title: event.keyCode +slug: Web/API/Event/keyCode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/KeyboardEvent/keyCode +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il valore Unicode di un tasto non-carattere che è stato premuto scatenando un evento keypress, oppure il valore di qualsiasi tasto premuto scatenando un qualsiasi altro evento relativo alla tastiera.

+

Sintassi

+
valore = event.keyCode
+
+ +

Esempio

+
<html>
+<head>
+<title>esempio di keyCode</title>
+
+<script type="text/javascript">
+
+function mostraCodiceTasto(e)
+{
+alert("Codice del tasto premuto: " + e.keyCode + "\n");
+}
+
+</script>
+</head>
+
+<body onkeydown="mostraCodiceTasto(event);">
+<p>Premere un tasto qualsiasi.</p>
+</body>
+</html>
+
+

Note

+

In un evento keypress, il valore Unicode del tasto premuto viene registrato nella proprietà keyCode oppure nella proprietà charCode, mai in entrambe. Se il tasto premuto corrisponde a un carattere (per esempio 'a'), charCode assume il valore Unicode di quel carattere (che è diverso per le maiuscole e per le minuscole). In caso contrario, il codice del tasto premuto viene registrato nella proprietà keyCode.

+

charCode non viene mai impostato durante gli eventi keydown e keyup. In questi casi, viene impostato keyCode.

+

Per leggere il codice del tasto indipendentemente dal fatto che esso si trovi in keyCode o in charCode, si può utilizzare la proprietà which.

+

I caratteri inseriti attraverso un IME non vengono registrati nè in keyCode nè in charCode.

+

Per una lista dei possibili valori di charCode e per conoscere i tasti ai quali sono associati, vedere l'esempio Reference del DOM di Gecko:Esempi #Example 7: Mostrare le costanti dell'oggetto Event.

+

Specifiche

+

Non è parte di alcuna specifica. Si veda nsIDOMKeyEvent

+

{{ languages( { "en": "en/DOM/event.keyCode", "pl": "pl/DOM/event.keyCode" } ) }}

diff --git a/files/it/web/api/event/layerx/index.html b/files/it/web/api/event/layerx/index.html new file mode 100644 index 0000000000..80dc20b35b --- /dev/null +++ b/files/it/web/api/event/layerx/index.html @@ -0,0 +1,102 @@ +--- +title: event.layerX +slug: Web/API/Event/layerX +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/layerX +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce la coordinata orizzontale del punto in cui si è scatenato l'evento, relativamente al layer corrente.

+

Sintassi

+
X = event.layerX
+
+ +

Esempio

+
<html>
+<head>
+<title>esempio di pageX/pageY e layerX/layerY</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+
+<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
+
+<div id="d1">
+<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+</span>
+</div>
+
+<div id="d2">
+<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+</span>
+
+<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
+</div>
+
+<div id="d3">
+<form name="form_coordinate">
+ Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
+ pageX:<input type="text" name="coordinataXpagina" size="7" />
+ pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
+ layerX:<input type="text" name="coordinataXlayer" size="7" />
+ layerY:<input type="text" name="coordinataYlayer" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

Note

+

layerX tiene conto di eventuali scorrimenti orizzontali avvenuti nella pagina e restituisce un valore relativo all'intero documento, a meno che l'evento non avvenga all'interno di un elemento con posizione fissa; nel qual caso il valore restituito sarà relativo all'angolo in alto a sinistra dell'elemento.

+

Specifiche

+

DOM level 0. Non è parte di alcuna specifica.

+

{{ languages( { "en": "en/DOM/event.layerX", "pl": "pl/DOM/event.layerX" } ) }}

diff --git a/files/it/web/api/event/layery/index.html b/files/it/web/api/event/layery/index.html new file mode 100644 index 0000000000..9bb4f99947 --- /dev/null +++ b/files/it/web/api/event/layery/index.html @@ -0,0 +1,102 @@ +--- +title: event.layerY +slug: Web/API/Event/layerY +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/layerY +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce la coordinata verticale del punto in cui si è scatenato l'evento, relativamente al layer corrente.

+

Sintassi

+
Y = event.layerY
+
+ +

Esempio

+
<html>
+<head>
+<title>esempio di pageX/pageY e layerX/layerY</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+
+<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
+
+<div id="d1">
+<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+</span>
+</div>
+
+<div id="d2">
+<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+</span>
+
+<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
+</div>
+
+<div id="d3">
+<form name="form_coordinate">
+ Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
+ pageX:<input type="text" name="coordinataXpagina" size="7" />
+ pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
+ layerX:<input type="text" name="coordinataXlayer" size="7" />
+ layerY:<input type="text" name="coordinataYlayer" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

Note

+

layerY tiene conto di eventuali scorrimenti verticali avvenuti nella pagina e restituisce un valore relativo all'intero documento, a meno che l'evento non avvenga all'interno di un elemento con posizione fissa; nel qual caso il valore restituito sarà relativo all'angolo in alto a sinistra dell'elemento.

+

Specifiche

+

DOM level 0. Non è parte di alcuna specifica.

+

{{ languages( { "en": "en/DOM/event.layerX", "pl": "pl/DOM/event.layerX" } ) }}

diff --git a/files/it/web/api/event/metakey/index.html b/files/it/web/api/event/metakey/index.html new file mode 100644 index 0000000000..b3a22bfa38 --- /dev/null +++ b/files/it/web/api/event/metakey/index.html @@ -0,0 +1,30 @@ +--- +title: event.metaKey +slug: Web/API/Event/metaKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/metaKey +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il tasto META era premuto mentre l'evento si verificava. Questo tasto è il tasto Apple sui computer Mac, il tasto Windows sui pc con tastiere per Windows sui quali gira questo sistema operativo e potrebbe corrispondere ad altri tasti su altre piattaforme. Non esiste però un unico tasto standard sulla cui presenza si possa fare affidamento per qualsiasi tipo di piattaforma.

+

Sintassi

+
bool = event.metaKey
+
+

bool vale true se il tasto META era premuto, altrimenti false.

+

Esempio

+
 function leggiInput(e) {
+ // controlla il tasto meta
+   if e.metaKey
+        // se era premuto si comporta di conseguenza
+     outputBellissimo(e);
+   else
+     outputMediocre(e)
+ }
+
+

Specifiche

+

metaKey

+

{{ languages( { "en": "en/DOM/event.metaKey", "pl": "pl/DOM/event.metaKey" } ) }}

diff --git a/files/it/web/api/event/pagex/index.html b/files/it/web/api/event/pagex/index.html new file mode 100644 index 0000000000..90cf1beaac --- /dev/null +++ b/files/it/web/api/event/pagex/index.html @@ -0,0 +1,98 @@ +--- +title: event.pageX +slug: Web/API/Event/pageX +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/pageX +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce la coordinata orizzontale dell'evento, all'interno dell'intero documento.

+

Sintassi

+
X =event.pageX;
+
+

X è un intero che rappresenta il valore in pixel della coordinata X del puntatore del mouse, relativamente all'intero documento. La coordinata fa riferimento al momento in cui l'evento si è verificato. Questa proprietà tiene conto di ogni scorrimento orizzontale che è stato effettuato all'interno del browser.

+

Esempio

+
<html>
+<head>
+<title>esempio di pageX/pageY e layerX/layerY</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+
+<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
+
+<div id="d1">
+<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+</span>
+</div>
+
+<div id="d2">
+<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+</span>
+
+<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
+</div>
+
+<div id="d3">
+<form name="form_coordinate">
+ Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
+ pageX:<input type="text" name="coordinataXpagina" size="7" />
+ pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
+ layerX:<input type="text" name="coordinataXlayer" size="7" />
+ layerY:<input type="text" name="coordinataYlayer" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

Specifiche

+

Non è parte di alcuno standard.

+

{{ languages( { "en": "en/DOM/event.pageX", "es": "es/DOM/event.pageX", "pl": "pl/DOM/event.pageX" } ) }}

diff --git a/files/it/web/api/event/pagey/index.html b/files/it/web/api/event/pagey/index.html new file mode 100644 index 0000000000..d0d87573cc --- /dev/null +++ b/files/it/web/api/event/pagey/index.html @@ -0,0 +1,98 @@ +--- +title: event.pageY +slug: Web/API/Event/pageY +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/pageY +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce la coordinata verticale dell'evento, all'interno dell'intero documento.

+

Sintassi

+
Y =event.pageY;
+
+

Y è un intero che rappresenta il valore in pixel della coordinata Y del puntatore del mouse, relativamente all'intero documento. La coordinata fa riferimento al momento in cui l'evento si è verificato. Questa proprietà tiene conto di ogni scorrimento verticale che è stato effettuato all'interno del browser.

+

Esempio

+
<html>
+<head>
+<title>esempio di pageX/pageY e layerX/layerY</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+
+<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
+
+<div id="d1">
+<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+</span>
+</div>
+
+<div id="d2">
+<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+</span>
+
+<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
+</div>
+
+<div id="d3">
+<form name="form_coordinate">
+ Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
+ pageX:<input type="text" name="coordinataXpagina" size="7" />
+ pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
+ layerX:<input type="text" name="coordinataXlayer" size="7" />
+ layerY:<input type="text" name="coordinataYlayer" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

Specifiche

+

Non è parte di alcuno standard.

+

{{ languages( { "es": "es/DOM/event.pageY", "pl": "pl/DOM/event.pageY" } ) }}

diff --git a/files/it/web/api/event/preventdefault/index.html b/files/it/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..040257b4a3 --- /dev/null +++ b/files/it/web/api/event/preventdefault/index.html @@ -0,0 +1,176 @@ +--- +title: Event.preventDefault() +slug: Web/API/Event/preventDefault +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/preventDefault +--- +
{{ ApiRef("DOM") }}
+ +

Il metodo preventDefault() dell'interfaccia {{domxref("Event")}} dice all'{{Glossary("user agent")}} che se l'evento non viene esplicitamente gestito, la sua azione predefinita non dovrebbe essere presa come normalmente. L'evento continua a propagarsi come al solito, a meno che uno dei suoi listener di eventi non chiami {{domxref("Event.stopPropagation", "stopPropagation()")}} o {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}, uno dei due interrompa la propagazione contemporaneamente.

+ +

Sintassi

+ +
Event.preventDefault();
+ +

Parametri

+ +

Nessuno.

+ +

Valore di ritorno

+ +

undefined.

+ +

Esempi

+ +

Blocco della gestione dei click predefinita

+ +

La commutazione di una casella di controllo è l'azione predefinita di fare click su una casella di controllo. Questo esempio mostra come impedire che ciò accada:

+ +

JavaScript

+ +
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
+         document.getElementById("output-box").innerHTML += "Mi dispiace! <code>preventDefault()</code> non ti lascerà controllare questo!<br>";
+         event.preventDefault();
+}, false);
+ +

HTML

+ +
<p>Si prega di fare click sul controllo casella di controllo.</p>
+
+<form>
+  <label for="id-checkbox">Checkbox:</label>
+  <input type="checkbox" id="id-checkbox"/>
+</form>
+
+<div id="output-box"></div>
+ +

Risultato

+ +

Puoi vedere questo in azione qui:

+ +

{{EmbedLiveSample("Blocking_default_click_handling")}}

+ +

Interruzione delle sequenze di tasti per raggiungere un campo di modifica

+ +

L'esempio seguente dimostra come interrompere l'input di testo non valido per raggiungere il campo di input con preventDefault(). Al giorno d'oggi, di solito dovresti usare convalida del modulo HTML nativo.

+ +

HTML

+ +

Ecco il modulo:

+ +
<div class="container">
+  <p>Inserisci il tuo nome utilizzando solo lettere minuscole.</p>
+
+  <form>
+    <input type="text" id="my-textbox">
+  </form>
+</div>
+ +

CSS

+ +

Usiamo un po' di CSS per la finestra di avviso che disegneremo quando l'utente preme una chiave non valida:

+ +
.warning {
+  border: 2px solid #f39389;
+  border-radius: 2px;
+  padding: 10px;
+  position: absolute;
+  background-color: #fbd8d4;
+  color: #3b3c40;
+}
+ +

JavaScript

+ +

Ed ecco il codice JavaScript che fa il lavoro. Per prima cosa, ascolta gli eventi {{event("keypress")}}:

+ +
var myTextbox = document.getElementById('my-textbox');
+myTextbox.addEventListener('keypress', checkName, false);
+
+ +

La funzione checkName(), che controlla il tasto premuto e decide se permetterlo:

+ +
function checkName(evt) {
+  var charCode = evt.charCode;
+  if (charCode != 0) {
+    if (charCode < 97 || charCode > 122) {
+      evt.preventDefault();
+      displayWarning(
+        "Per favore usa solo lettere minuscole."
+        + "\n" + "charCode: " + charCode + "\n"
+      );
+    }
+  }
+}
+
+ +

la funzione displayWarning() presenta la notifica di un problema. Non è una funzione elegante ma fa il lavoro ai fini di questo esempio:

+ +
var warningTimeout;
+var warningBox = document.createElement("div");
+warningBox.className = "warning";
+
+function displayWarning(msg) {
+  warningBox.innerHTML = msg;
+
+  if (document.body.contains(warningBox)) {
+    window.clearTimeout(warningTimeout);
+  } else {
+    // inserisci warningBox dopo myTextbox
+    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
+  }
+
+  warningTimeout = window.setTimeout(function() {
+      warningBox.parentNode.removeChild(warningBox);
+      warningTimeout = -1;
+    }, 2000);
+}
+ +

Risultato

+ +

Ecco il risultato del codice precedente:

+ +

{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}

+ +

Note

+ +

Chiamando preventDefault() durante qualsiasi fase del flusso di eventi annulla l'evento, il che significa che non verrà eseguita alcuna azione predefinita normalmente eseguita dall'implementazione come risultato dell'evento.

+ +
+

A partire da {{Gecko("6.0")}}, chiamare preventDefault()  fa sì che il valore della proprietà {{ domxref("Event.defaultPrevented()") }} diventi true.

+
+ +

Puoi utilizzare {{domxref("Event.cancelable")}} per verificare se l'evento è cancellabile. Chiamare preventDefault() per un evento non cancellabile non ha alcun effetto.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}{{ Spec2('DOM2 Events') }}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Event.preventDefault")}}

diff --git a/files/it/web/api/event/shiftkey/index.html b/files/it/web/api/event/shiftkey/index.html new file mode 100644 index 0000000000..fcc11142ef --- /dev/null +++ b/files/it/web/api/event/shiftkey/index.html @@ -0,0 +1,45 @@ +--- +title: event.shiftKey +slug: Web/API/Event/shiftKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/shiftKey +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il tasto SHIFT è stato premuto durante l'evento.

+

Sintassi

+
bool = event.shiftKey
+
+

bool restituisce true se il tasto SHIFT era premuto mentre l'evento si verificava, altrimenti false.

+

Esempio

+
<html>
+<head>
+<title>esempio tasto shift</title>
+
+<script type="text/javascript">
+
+function mostraCarattere(e){
+  alert(
+    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+    + "Codice carattere: " + e.charCode + "\n"
+    + "Tasto SHIFT premuto: " + e.shiftKey + "\n"
+    + "Tasto ALT premuto: " + e.altKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="mostraCarattere(event);">
+<p>Prova a premere un tasto tenendo premuto SHIFT e prova a premere un tasto senza premere SHIFT.<br />
+Puoi anche provare a premere SHIFT+ALT.</p>
+</body>
+</html>
+
+

Specifiche

+

shiftKey

+

{{ languages( { "en": "en/DOM/event.shiftKey", "pl": "pl/DOM/event.shiftKey" } ) }}

diff --git a/files/it/web/api/event/stoppropagation/index.html b/files/it/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..1eef27bf30 --- /dev/null +++ b/files/it/web/api/event/stoppropagation/index.html @@ -0,0 +1,60 @@ +--- +title: Event.stopPropagation() +slug: Web/API/Event/stopPropagation +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/stopPropagation +--- +

{{APIRef("DOM")}}

+ +

Il metodo stopPropagation() dell'interfaccia {{domxref("Event")}} impedisce un'ulteriore propagazione dell'evento corrente nelle fasi di cattura e bubbling.

+ +

Sintassi

+ +
event.stopPropagation();
+ +

Esempio

+ +

Vedi Esempio 5: Propagazione degli eventi nel capitolo degli Esempi per un esempio più dettagliato di questo metodo e la propagazione degli eventi nel DOM.

+ +

Note

+ +

Vedi la specificazione DOM per la spiegazione del flusso di eventi. (La bozza degli eventi di DOM Level 3" ha un'illustrazione.)

+ +

preventDefault è un metodo complementare che può essere utilizzato per impedire l'azione predefinita dall'evento.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}{{Spec2("DOM2 Events")}}Definzione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Event.stopPropagation")}}

diff --git a/files/it/web/api/event/timestamp/index.html b/files/it/web/api/event/timestamp/index.html new file mode 100644 index 0000000000..d01ab1986a --- /dev/null +++ b/files/it/web/api/event/timestamp/index.html @@ -0,0 +1,45 @@ +--- +title: event.timeStamp +slug: Web/API/Event/timeStamp +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/timeStamp +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il timestamp (cioè il numero di millisecondi trascorsi dalla Unix Epoch, le ore 00:00:00 del 1/1/1970) corrispondente al momento in cui si è verificato l'evento.

+

Sintassi

+
ts = event.timeStamp
+
+

Esempio

+
<html>
+<head>
+
+<title>esempio di timeStamp</title>
+
+<script type="text/javascript">
+var ora = null;
+
+function leggiOrario(evt) {
+  ora = evt.timeStamp;
+  document.getElementById("time").firstChild.nodeValue = ora;
+}
+</script>
+</head>
+
+<body onkeypress="leggiOrario(event)">
+
+<p>Premi un tasto per conoscere il timestamp corrente grazie all'evento onkeypress.</p>
+<p>timeStamp: <span id="time">-</span></p>
+
+</body>
+</html>
+
+

Note

+

Il sistema di eventi potrebbe non supportare questa proprietà per ogni possibile tipo di evento.

+

Specifiche

+

timestamp

+

{{ languages( { "en": "en/DOM/event.timeStamp", "pl": "pl/DOM/event.timeStamp" } ) }}

diff --git a/files/it/web/api/event/type/index.html b/files/it/web/api/event/type/index.html new file mode 100644 index 0000000000..108e944059 --- /dev/null +++ b/files/it/web/api/event/type/index.html @@ -0,0 +1,50 @@ +--- +title: event.type +slug: Web/API/Event/type +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/type +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il nome dell'evento (case-insensitive).

+

Sintassi

+
stringa = event.type
+
+

Esempio

+
<html>
+<head>
+
+<title>esempio su event.type</title>
+
+<script type="text/javascript">
+var eventoCorrente = null;
+
+function tipoEvento(evt) {
+  eventoCorrente = evt.type;
+  document.getElementById("Etype").firstChild.nodeValue = eventoCorrente;
+}
+
+</script>
+</head>
+
+<body
+  onkeydown="tipoEvento(event)"
+  onkeyup="tipoEvento(event)"
+  onmousedown="tipoEvento(event)"
+  onmouseup="tipoEvento(event)">
+
+<p>Premi un tasto della tastiera o del mouse per visualizzare il nome dell'evento.</p>
+<p>Tipo evento: <span id="Etype">-</span></p>
+
+</body>
+</html>
+
+

Note

+

Il è un nome XML valido.

+

Specifiche

+

type

+

{{ languages( { "en": "en/DOM/event.type", "pl": "pl/DOM/event.type" } ) }}

diff --git a/files/it/web/api/event/view/index.html b/files/it/web/api/event/view/index.html new file mode 100644 index 0000000000..00d9f88004 --- /dev/null +++ b/files/it/web/api/event/view/index.html @@ -0,0 +1,22 @@ +--- +title: event.view +slug: Web/API/Event/view +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/view +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce l'oggetto AbstractView nel quale si è verificato l'evento. Nei browser web, questo è l'oggetto window che ha generato l'evento.

+

Sintassi

+
view =event.view
+
+ +

Specifiche

+

DOM Level 2 Events: UIEvent.view

+

{{ languages( { "en": "en/DOM/event.view", "pl": "pl/DOM/event.view" } ) }}

diff --git a/files/it/web/api/event/which/index.html b/files/it/web/api/event/which/index.html new file mode 100644 index 0000000000..0ab544b60c --- /dev/null +++ b/files/it/web/api/event/which/index.html @@ -0,0 +1,60 @@ +--- +title: event.which +slug: Web/API/Event/which +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/KeyboardEvent/which +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il valore di keyCode se il tasto premuto non è un tasto carattere, altrimenti restituisce il valore di charCode se è stato premuto un tasto alfanumerico.

+

Sintassi

+
int = event.which
+
+

int è il codice numerico del tasto che è stato premuto, sia esso alfanumerico oppure no. Si vedano charCode e keyCode per ulteriori informazioni.

+

Esempio

+
<html>
+<head>
+<title>esempio con charCode/keyCode/which</title>
+
+<script type="text/javascript">
+
+function mostraTastoPremuto(evt)
+{
+alert("Evento onkeypress: \n"
+      + "proprietà keyCode: " + evt.keyCode + "\n"
+      + "proprietà which: " + evt.which + "\n"
+      + "proprietà charCode: " + evt.charCode + "\n"
+      + "Tasto premuto (se alfanumerico): "
+      + String.fromCharCode(evt.charCode) + "\n"
+     );
+}
+
+
+function pressioneTasto(evt)
+{
+alert("onkeydown handler: \n"
+      + "proprietà keyCode: " + evt.keyCode + "\n"
+      + "proprietà which: " + evt.which + "\n"
+     );
+}
+
+
+</script>
+</head>
+
+<body
+ onkeypress="mostraTastoPremuto(event);"
+ onkeydown="pressioneTasto(event);"
+>
+
+<p>Premere un tasto</p>
+
+</body>
+</html>
+
+

Specifiche

+

Non è parte di alcuna specifica.

diff --git a/files/it/web/api/fetch_api/index.html b/files/it/web/api/fetch_api/index.html new file mode 100644 index 0000000000..1a458fb681 --- /dev/null +++ b/files/it/web/api/fetch_api/index.html @@ -0,0 +1,170 @@ +--- +title: Fetch API +slug: Web/API/Fetch_API +tags: + - API + - Documentazione + - Fetch + - Response + - Sperimentale + - XMLHttpRequest + - request +translation_of: Web/API/Fetch_API +--- +

{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}

+ +

La Fetch API fornisce un'interfaccia per ottenere risorse (anche attraverso la rete). Sembrerá familiare a tutti coloro che hanno usato {{domxref("XMLHttpRequest")}}, ma la nuova API fornisce un'insieme piú potente e flessibile di funzionalitá.

+ +

Concetti e uso

+ +

Fetch fornisce una definizione generica di oggetti {{domxref("Request")}} e {{domxref("Response")}} (e altri inclusi nelle richieste di rete). Questo permette loro di essere usati ovunque necessari, in futuro, sia che servano per service workers, Cache API e altri oggetti simili che usano o modificano richieste e risposte, sia per qualunque altro caso d'uso che richieda di generare le proprie risposte via codice.

+ +

Esso fornisce anche una definizione per concetti correlati come CORS e la semantica degli header HTTP di tipo origin, ovviando alla necessità di doverli definire separatamente altrove.

+ +

Per effettuare una richiesta e ottenere una risorsa, si usa il metodo {{domxref("GlobalFetch.fetch")}}. Esso è implementato in piú interfacce (specificatamente {{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}). Questo lo rende disponibile all'incirca in ogni contesto in cui si puó voler ottenere risorse.

+ +

Il metodo fetch() richiede un parametro obbligatorio, il percorso (path) alla risorsa che si vuole ottenere, e ritorna una {{domxref("Promise")}} che risolve la {{domxref("Response")}} a quella richiesta, sia essa stata eseguita con successo oppure no. Si puó anche passare in via opzionale un oggetto init (per definire opzioni facoltative) come secondo parametro (per l'elenco completo delle opzioni visitare {{domxref("Request")}}).

+ +

Non appena una {{domxref("Response")}} è recuperata, vi è un certo numero di metodi disponibile allo scopo di definire cosa sia il corpo della risposta e come dovrebbe essere gestito (in dettaglio : {{domxref("Body")}}.)

+ +

È possibile creare una richiesta e una risposta direttamente usando i costruttori delle classi {{domxref("Request.Request","Request()")}} e {{domxref("Response.Response","Response()")}}, ma non e' una pratica comune. Invece, e' piu' frequente che essi vengano creati come risultato delle altre azioni della API (ad esempio, {{domxref("FetchEvent.respondWith")}} dei service workers.)

+ +
+

Note: Puoi trovare informazioni aggiuntive riguardo l'uso di fetch sulla pagina Using Fetch, e studiare i concetti sulla pagina Fetch basic concepts.

+
+ +

Annullare un fetch

+ +

I browsers hanno cominciato a supportare in via sperimentale le interfacce {{domxref("AbortController")}} e {{domxref("AbortSignal")}} (meglio note come Abort API), che permettono di annullare operazioni come Fetch e XHR quando non sono ancora state completate. Per maggiori informazioni controlla la pagina con la descrizione delle interfacce.

+ +

Fetch Interfaces

+ +
+
{{domxref("GlobalFetch")}}
+
Contiene il metodo globale fetch() usato per ottenere una risorsa.
+
{{domxref("Headers")}}
+
Rappresenta un header di richiesta/risposta, permettendo di interrogarlo ed eseguire azioni differenti in base ai risultati.
+
{{domxref("Request")}}
+
Rappresenta una richiesta.
+
{{domxref("Response")}}
+
Rappresenta una risposta a una richiesta.
+
+ +

Fetch mixin

+ +
+
{{domxref("Body")}}
+
Fornisce metodi relativi al corpo di una richiesta/risposta permettendo di dichiarare quale sia il tipo di contenuto e come dovrebbe essere gestito.
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Definizione di cui sopra
+ +

Compatibilitá coi Browsers

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)IEOperaSafari (WebKit)
Supporto base{{CompatChrome(42)}}14{{CompatGeckoDesktop(39)}}
+ 34[1]
+ {{ CompatGeckoDesktop(52)}}[2]		{{CompatNo}}29
+ 28[1]		10.1
{{domxref('ReadableStream')}}{{CompatChrome(43)}}14{{CompatNo}}[3]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Supporto base{{CompatChrome(42)}}{{CompatChrome(42)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}10.1
{{domxref('ReadableStream')}}{{CompatChrome(43)}}{{CompatChrome(43)}}{{CompatVersionUnknown}}{{CompatNo}}[3]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +

[1] Questa API è implementata ma dev'essere abilitata da un'opzione di Firefox.

+ +

[2] Per le versioni di Firefox precedenti la 52, get() ottiene solamente il primo valore nell'header specificato, mentre getAll() ottiene tutti i valori. Dalla versione 52 in avanti, get() ottiene tutti i valori e getAll() è stato eliminato.

+ +

[3] La lettura degli streams è disponibile nell'attuale versione di Firefox, ma deve essere abilitata tramite le opzioni dom.streams.enabled e javascript.options.streams.

+ +

Guarda anche

+ + diff --git a/files/it/web/api/file/index.html b/files/it/web/api/file/index.html new file mode 100644 index 0000000000..1d1941d482 --- /dev/null +++ b/files/it/web/api/file/index.html @@ -0,0 +1,101 @@ +--- +title: File +slug: Web/API/File +tags: + - API + - File API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/API/File +--- +
{{APIRef}}
+ +

The File interface provides information about files and allows JavaScript in a web page to access their content.

+ +

File objects are generally retrieved from a {{DOMxRef("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's {{DOMxRef("DataTransfer")}} object, or from the mozGetAsFile() API on an {{DOMxRef("HTMLCanvasElement")}}.

+ +

A File object is a specific kind of a {{DOMxRef("Blob")}}, and can be used in any context that a Blob can. In particular, {{DOMxRef("FileReader")}}, {{DOMxRef("URL.createObjectURL()")}}, {{DOMxRef("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, and {{DOMxRef("XMLHttpRequest", "", "send()")}} accept both Blobs and Files.

+ +

See Using files from web applications for more information and examples.

+ +

{{InheritanceDiagram}}

+ +

Constructor

+ +
+
{{DOMxRef("File.File", "File()")}}
+
Returns a newly constructed File.
+
+ +

Properties

+ +
+
{{DOMxRef("File.lastModified")}} {{ReadOnlyInline}}
+
Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight).
+
{{DOMxRef("File.lastModifiedDate")}} {{Deprecated_Inline}} {{ReadOnlyInline}}
+
Returns the last modified {{JSxRef("Date")}} of the file referenced by the File object.
+
{{DOMxRef("File.name")}}{{ReadOnlyInline}}
+
Returns the name of the file referenced by the File object.
+
{{DOMxRef("File.webkitRelativePath")}} {{Non-standard_Inline}} {{ReadOnlyInline}}
+
Returns the path the URL of the {{DOMxRef("File")}} is relative to.
+
+ +

File implements {{DOMxRef("Blob")}}, so it also has the following properties available to it:

+ +
+
{{DOMxRef("File.size")}} {{ReadOnlyInline}}
+
Returns the size of the file in bytes.
+
{{DOMxRef("File.type")}} {{ReadOnlyInline}}
+
Returns the MIME type of the file.
+
+ +

Methods

+ +

The File interface doesn't define any methods, but inherits methods from the {{DOMxRef("Blob")}} interface:

+ +
+
{{DOMxRef("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
+
Returns a new Blob object containing the data in the specified range of bytes of the source Blob.
+
{{DOMxRef("Blob.stream()")}}
+
Transforms the File into a {{DOMxRef("ReadableStream")}} that can be used to read the File contents.
+
{{DOMxRef("Blob.text()")}}
+
Transforms the File into a stream and reads it to completion. It returns a promise that resolves with a {{DOMxRef("USVString")}} (text).
+
{{DOMxRef("Blob.arrayBuffer()")}}
+
Transforms the File into a stream and reads it to completion. It returns a promise that resolves with an {{DOMxRef("ArrayBuffer")}}.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', "#file-section", "The File interface")}}{{Spec2('File API')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.File")}}

+ +

See also

+ + diff --git a/files/it/web/api/file/using_files_from_web_applications/index.html b/files/it/web/api/file/using_files_from_web_applications/index.html new file mode 100644 index 0000000000..00d0b5f28c --- /dev/null +++ b/files/it/web/api/file/using_files_from_web_applications/index.html @@ -0,0 +1,506 @@ +--- +title: Using files from web applications +slug: Web/API/File/Using_files_from_web_applications +translation_of: Web/API/File/Using_files_from_web_applications +--- +
{{APIRef ("File API")}}
+ +

Utilizzando l'API File, che è stata aggiunta al DOM in HTML5, è ora possibile per il contenuto Web chiedere all'utente di selezionare i file locali e quindi leggere il contenuto di tali file. Questa selezione può essere effettuata utilizzando un {{HTMLElement("input/file", '<input type="file">')}}elemento HTML o trascinandolo.

+ +

Se si desidera utilizzare l'API del file DOM da estensioni o altro codice Chrome del browser, è possibile; tuttavia, nota che ci sono alcune funzionalità aggiuntive di cui essere a conoscenza. Per i dettagli, vedi Utilizzo dell'API del file DOM nel codice Chrome .

+ +

Accesso ai file selezionati

+ +

Considera questo HTML:

+ +
<input type = "file" id = "input" multiple>
+ +

L'API File consente di accedere a un {{DOMxRef ("FileList")}} contenente {{DOMxRef ("File")}} oggetti che rappresentano i file selezionati dall'utente.

+ +

L' multipleattributo inputsull'elemento consente all'utente di selezionare più file.

+ +

Accesso al primo file selezionato usando un classico selettore DOM:

+ +
const selectedFile = document.getElementById ('input'). files [0];
+ +

Accesso ai file selezionati su un evento di modifica

+ +

È anche possibile (ma non obbligatorio) accedere a {{DOMxRef ("FileList")}} tramite l' changeevento. È necessario utilizzare {{DOMxRef ("EventTarget.addEventListener ()")}} per aggiungere il changelistener di eventi, in questo modo:

+ +
const inputElement = document.getElementById ("input");
+inputElement.addEventListener ("change", handleFiles, false);
+funzione handleFiles () {
+  const fileList = this.files; / * ora puoi lavorare con l'elenco dei file * /
+}
+ +

Ottenere informazioni sui file selezionati

+ +

L'oggetto {{DOMxRef ("FileList")}} fornito dal DOM elenca tutti i file selezionati dall'utente, ognuno specificato come oggetto {{DOMxRef ("File")}}. È possibile determinare il numero di file selezionato dall'utente controllando il valore dell'attributo dell'elenco file length:

+ +
const numFiles = fileList.length;
+ +

I singoli oggetti {{DOMxRef ("File")}} possono essere recuperati semplicemente accedendo all'elenco come un array:

+ +
for (let i = 0, numFiles = fileList.length; i <numFiles; i ++) {
+  const file = fileList [i];
+  // ...
+}
+
+ +

Questo ciclo scorre su tutti i file nell'elenco dei file.

+ +

Esistono tre attributi forniti dall'oggetto {{DOMxRef ("File")}} che contengono informazioni utili sul file.

+ +
+
name
+
Il nome del file come stringa di sola lettura. Questo è solo il nome del file e non include alcuna informazione sul percorso.
+
size
+
La dimensione del file in byte come numero intero a 64 bit di sola lettura.
+
type
+
Il tipo MIME del file come stringa di sola lettura o ""se il tipo non può essere determinato.
+
+ +

Esempio: visualizzazione delle dimensioni dei file

+ +

L'esempio seguente mostra un possibile utilizzo della sizeproprietà:

+ +
<! DOCTYPE html>
+<Html>
+<Head>
+<meta charset = "UTF-8">
+<title> Dimensioni file </title>
+<Script>
+funzione updateSize () {
+  let nBytes = 0,
+      oFiles = this.files,
+      nFiles = oFiles.length;
+  for (let nFileId = 0; nFileId <nFiles; nFileId ++) {
+    nBytes + = oFiles [nFileId] .size;
+  }
+  let sOutput = nBytes + "bytes";
+  // codice opzionale per l'approssimazione di multipli
+  const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+  per (nMultiple = 0, nApprox = nBytes / 1024; nApprox> 1; nApprox / = 1024, nMultiple ++) {
+    sOutput = nApprox.toFixed (3) + "" + aMultiples [nMultiple] + "(" + nBytes + "bytes)";
+  }
+  // fine del codice opzionale
+  document.getElementById ("fileNum"). innerHTML = nFiles;
+  document.getElementById ("fileSize"). innerHTML = sOutput;
+}
+
+document.getElementById ("uploadInput"). addEventListener ("change", updateSize, false);
+</ Script>
+</ Head>
+
+<Body>
+  <form name = "uploadForm">
+    <Div>
+      <input id = "uploadInput" type = "file" name = "myFiles" multiple>
+      file selezionati: <span id = "fileNum"> 0 </span>;
+      dimensione totale: <span id = "fileSize"> 0 </span>
+    </ Div>
+    <div> <input type = "submit" value = "Invia file"> </div>
+  </ Form>
+</ Body>
+</ Html>
+
+ +

Utilizzo di elementi di input di file nascosti utilizzando il metodo click ()

+ +

Puoi nascondere l'elemento file {{HTMLElement ("input")}}, ammesso, brutto e presentare la tua interfaccia per aprire il selettore di file e visualizzare il file o i file selezionati dall'utente. Puoi farlo stilando l'elemento di input con display:nonee chiamando il metodo {{DOMxRef ("HTMLElement.click", "click ()")}} sull'elemento {{HTMLElement ("input")}}.

+ +

Considera questo HTML:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none">
+<button id="fileSelect">Select some files</button>
+ +

The code that handles the click event can look like this:

+ +
const fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+}, false);
+
+ +

You can style the new button for opening the file picker as you wish.

+ +

Using a label element to trigger a hidden file input element

+ +

To allow opening the file picker without using JavaScript (the click() method), a {{HTMLElement("label")}} element can be used. Note that in this case the input element must not be hidden using display: none (nor visibility: hidden), otherwise the label would not be keyboard-accessible. Use the visually-hidden technique instead.

+ +

Consider this HTML:

+ +
<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden">
+<label for="fileElem">Select some files</label>
+ +

and this CSS:

+ +
.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+/* Separate rule for compatibility, :focus-within is required on modern Firefox and Chrome */
+input.visually-hidden:focus + label {
+  outline: thin dotted;
+}
+input.visually-hidden:focus-within + label {
+  outline: thin dotted;
+}
+
+ +

There is no need to add JavaScript code to call fileElem.click(). Also in this case you can style the label element as you wish. You need to provide a visual cue for the focus status of the hidden input field on its label, be it an outline as shown above, or background-color or box-shadow. (As of time of writing, Firefox doesn’t show this visual cue for <input type="file"> elements.)

+ +

Selecting files using drag and drop

+ +

You can also let the user drag and drop files into your web application.

+ +

The first step is to establish a drop zone. Exactly what part of your content will accept drops may vary depending on the design of your application, but making an element receive drop events is easy:

+ +
let dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+
+ +

In this example, we're turning the element with the ID dropbox into our drop zone. This is done by adding listeners for the {{event('dragenter')}}, {{event('dragover')}}, and {{event('drop')}} events.

+ +

We don't actually need to do anything with the dragenter and dragover events in our case, so these functions are both simple. They just stop propagation of the event and prevent the default action from occurring:

+ +
function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+ +

The real magic happens in the drop() function:

+ +
function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  const dt = e.dataTransfer;
+  const files = dt.files;
+
+  handleFiles(files);
+}
+
+ +

Here, we retrieve the dataTransfer field from the event, pull the file list out of it, and then pass that to handleFiles(). From this point on, handling the files is the same whether the user used the input element or drag and drop.

+ +

Example: Showing thumbnails of user-selected images

+ +

Let's say you're developing the next great photo-sharing website and want to use HTML to display thumbnail previews of images before the user actually uploads them. You can establish your input element or drop zone as discussed previously and have them call a function such as the handleFiles() function below.

+ +
function handleFiles(files) {
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+
+    if (!file.type.startsWith('image/')){ continue }
+
+    const img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.
+
+    const reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+
+ +

Here our loop handling the user-selected files looks at each file's type attribute to see if its MIME type begins with the string "image/"). For each file that is an image, we create a new img element. CSS can be used to establish any pretty borders or shadows and to specify the size of the image, so that doesn't need to be done here.

+ +

Each image has the CSS class obj added to it, making it easy to find in the DOM tree. We also add a file attribute to each image specifying the {{DOMxRef("File")}} for the image; this will let us fetch the images for actual upload later. We use {{DOMxRef("Node.appendChild()")}} to add the new thumbnail to the preview area of our document.

+ +

Next, we establish the {{DOMxRef("FileReader")}} to handle asynchronously loading the image and attaching it to the img element. After creating the new FileReader object, we set up its onload function and then call readAsDataURL() to start the read operation in the background. When the entire contents of the image file are loaded, they are converted into a data: URL which is passed to the onload callback. Our implementation of this routine sets the img element's src attribute to the loaded image which results in the image appearing in the thumbnail on the user's screen.

+ +

Using object URLs

+ +

The DOM {{DOMxRef("URL.createObjectURL()")}} and {{DOMxRef("URL.revokeObjectURL()")}} methods let you create simple URL strings that can be used to reference any data that can be referred to using a DOM {{DOMxRef("File")}} object, including local files on the user's computer.

+ +

When you have a {{DOMxRef("File")}} object you'd like to reference by URL from HTML, you can create an object URL for it like this:

+ +
const objectURL = window.URL.createObjectURL(fileObj);
+ +

The object URL is a string identifying the {{DOMxRef("File")}} object. Each time you call {{DOMxRef("URL.createObjectURL()")}}, a unique object URL is created even if you've created an object URL for that file already. Each of these must be released. While they are released automatically when the document is unloaded, if your page uses them dynamically you should release them explicitly by calling {{DOMxRef("URL.revokeObjectURL()")}}:

+ +
URL.revokeObjectURL(objectURL);
+ +

Example: Using object URLs to display images

+ +

This example uses object URLs to display image thumbnails. In addition, it displays other file information including their names and sizes.

+ +

The HTML that presents the interface looks like this:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none">
+<a href="#" id="fileSelect">Select some files</a>
+<div id="fileList">
+  <p>No files selected!</p>
+</div>
+
+ +

This establishes our file {{HTMLElement("input")}} element as well as a link that invokes the file picker (since we keep the file input hidden to prevent that less-than-attractive user interface from being displayed). This is explained in the section {{anch("Using hidden file input elements using the click() method")}}, as is the method that invokes the file picker.

+ +

The handleFiles() method follows:

+ +
const fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+fileElem.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+  if (!this.files.length) {
+    fileList.innerHTML = "<p>No files selected!</p>";
+  } else {
+    fileList.innerHTML = "";
+    const list = document.createElement("ul");
+    fileList.appendChild(list);
+    for (let i = 0; i < this.files.length; i++) {
+      const li = document.createElement("li");
+      list.appendChild(li);
+
+      const img = document.createElement("img");
+      img.src = URL.createObjectURL(this.files[i]);
+      img.height = 60;
+      img.onload = function() {
+        URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      const info = document.createElement("span");
+      info.innerHTML = this.files[i].name + ": " + this.files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+
+ +

This starts by fetching the URL of the {{HTMLElement("div")}} with the ID fileList. This is the block into which we'll insert our file list, including thumbnails.

+ +

If the {{DOMxRef("FileList")}} object passed to handleFiles() is null, we simply set the inner HTML of the block to display "No files selected!". Otherwise, we start building our file list, as follows:

+ +
    +
  1. A new unordered list ({{HTMLElement("ul")}}) element is created.
    2. +
  2. The new list element is inserted into the {{HTMLElement("div")}} block by calling its {{DOMxRef("Node.appendChild()")}} method.
    3. +
  3. For each {{DOMxRef("File")}} in the {{DOMxRef("FileList")}} represented by files: +
      +
    1. Create a new list item ({{HTMLElement("li")}}) element and insert it into the list.
      2. +
    2. Create a new image ({{HTMLElement("img")}}) element.
      3. +
    3. Set the image's source to a new object URL representing the file, using {{DOMxRef("URL.createObjectURL()")}} to create the blob URL.
      4. +
    4. Set the image's height to 60 pixels.
      5. +
    5. Set up the image's load event handler to release the object URL since it's no longer needed once the image has been loaded. This is done by calling the {{DOMxRef("URL.revokeObjectURL()")}} method and passing in the object URL string as specified by img.src.
      6. +
    6. Append the new list item to the list.
      7. +
    +
    4. +
+ +

Here is a live demo of the code above:

+ +

{{EmbedLiveSample('Example_Using_object_URLs_to_display_images', '100%', '300px')}}

+ +

Example: Uploading a user-selected file

+ +

Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily.

+ +

Creating the upload tasks

+ +

Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class obj with the corresponding {{DOMxRef("File")}} attached in a file attribute. This allows us to select all of the images the user has chosen for uploading using {{DOMxRef("Document.querySelectorAll()")}}, like this:

+ +
function sendFiles() {
+  const imgs = document.querySelectorAll(".obj");
+
+  for (let i = 0; i < imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+
+ +

Line 2 fetches a {{DOMxRef("NodeList")}}, called imgs, of all the elements in the document with the CSS class obj. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new FileUpload instance for each. Each of these handles uploading the corresponding file.

+ +

Handling the upload process for a file

+ +

The FileUpload function accepts two inputs: an image element and a file from which to read the image data.

+ +
function FileUpload(img, file) {
+  const reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  const xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  const self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          const percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          const canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.send(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+
+ +

The FileUpload() function shown above creates a throbber, which is used to display progress information, and then creates an {{DOMxRef("XMLHttpRequest")}} to handle uploading the data.

+ +

Before actually transferring the data, several preparatory steps are taken:

+ +
    +
  1. The XMLHttpRequest's upload progress listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.
    2. +
  2. The XMLHttpRequest's upload load event handler is set to update the throbber progress information to 100% to ensure the progress indicator actually reaches 100% (in case of granularity quirks during the process). It then removes the throbber since it's no longer needed. This causes the throbber to disappear once the upload is complete.
    3. +
  3. The request to upload the image file is opened by calling XMLHttpRequest's open() method to start generating a POST request.
    4. +
  4. The MIME type for the upload is set by calling the XMLHttpRequest function overrideMimeType(). In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all depending on your use case.
    5. +
  5. The FileReader object is used to convert the file to a binary string.
    6. +
  6. Finally, when the content is loaded the XMLHttpRequest function send() is called to upload the file's content.
    7. +
+ +

Asynchronously handling the file upload process

+ +

This example, which uses PHP on the server side and JavaScript on the client side, demonstrates asynchronous uploading of a file.

+ +
<?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?><!DOCTYPE html>
+<html>
+<head>
+    <title>dnd binary upload</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="application/javascript">
+        function sendFile(file) {
+            const uri = "/index.php";
+            const xhr = new XMLHttpRequest();
+            const fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            const dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                const filesArray = event.dataTransfer.files;
+                for (let i=0; i<filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+    <div>
+        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
+    </div>
+</body>
+</html>
+
+ +

Example: Using object URLs to display PDF

+ +

Object URLs can be used for other things than just images! They can be used to display embedded PDF files or any other resources that can be displayed by the browser.

+ +

In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference pdfjs.disabled must be set to false {{non-standard_inline()}}.

+ +
<iframe id="viewer">
+
+ +

And here is the change of the src attribute:

+ +
const obj_url = URL.createObjectURL(blob);
+const iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+URL.revokeObjectURL(obj_url);
+ +

Example: Using object URLs with other file types

+ +

You can manipulate files of other formats the same way. Here is how to preview uploaded video:

+ +
const video = document.getElementById('video');
+const obj_url = URL.createObjectURL (blob);
+video.src = obj_url;
+Video.play ();
+URL.revokeObjectURL (obj_url);
+ +

specificazioni

+ + + + + + + + + + + + + + + + + + + + + +
specificazioneStatoCommento
{{SpecName ('HTML WHATWG', 'numero-stato.html # concetto-input-tipo-file-selezionato', 'Stato caricamento file')}}{{Spec2 ('HTML WHATWG')}}
{{SpecName ('File API')}}{{Spec2 ('API file')}}Definizione iniziale
+ +

Guarda anche

+ + diff --git a/files/it/web/api/geolocation/index.html b/files/it/web/api/geolocation/index.html new file mode 100644 index 0000000000..290260cdd6 --- /dev/null +++ b/files/it/web/api/geolocation/index.html @@ -0,0 +1,133 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +translation_of: Web/API/Geolocation +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

L'interfaccia Geolocation rappresenta un oggetto in grado di ottenere tramite codice la posizione del dispositivo utilizzato. Questo permette ai contenuti web di accedere alla posizione del dispositivo: ad esempio un sito web o una applicaziomne possono mostrare risultati personalizzati in base alla posizione del dispositivo.

+ +

Un oggetto con questa interfaccia si ottiene usando la proprietà {{domxref("navigator.geolocation")}}, implementata dall'oggetto {{domxref("Navigator")}}.

+ +
+

Nota: Per ragioni di sicurezza, quando una pagina web cerca di accedere alla posizione, l'utente viene notificato e gli viene chiesto il permesso. Considera che ogni browser ha una propria policy e un modo differente per chiedere il permesso.

+
+ +

Proprietà

+ +

L'interfaccia Geolocation non ha né implementazioni né proprietà.

+ +

Metodi

+ +

L'interfaccia Geolocation non eredita alcun metodo.

+ +
+
{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}
+
Determina la posizione corrente del dispositivo e ritorna un oggetto {{domxref("Position")}} con i dati.
+
{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}
+
Ritorna un valore long che rappresenta l'ultima chiamata alla funzione eseguita, quando la posizione del dispositivo cambia.
+
{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}
+
Rimuove l'handler installato con watchPosition().
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Specifiche iniziali.
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base5{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}910.60
+ Rimosso nella 15.0
+ Reintrodotto nella 16.0		5
Secure context-only47{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatUnknown()}}{{CompatUnknown()}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
Secure context-only{{CompatNo}}47{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/geolocation/using_geolocation/index.html b/files/it/web/api/geolocation/using_geolocation/index.html new file mode 100644 index 0000000000..303cb4a8bb --- /dev/null +++ b/files/it/web/api/geolocation/using_geolocation/index.html @@ -0,0 +1,321 @@ +--- +title: Using geolocation +slug: Web/API/Geolocation/Using_geolocation +translation_of: Web/API/Geolocation_API +--- +

{{securecontext_header}}{{APIRef("Geolocation API")}}

+ +

Le API per la geolocalizzazione permettono agli utenti di fornire la propria posizione alle applicazioni web. Per ragioni di privacy, all'utente viene richiesta l'autorizzazione all'uso della posizione.

+ +

L'oggetto della geolocalizzazione

+ +

Le API di geolocalizzazione sono pubblicate tramite l'oggetto {{domxref("navigator.geolocation")}}.

+ +

Se l'oggetto esiste, il servizio di geolocalizzazione è disponibile. Puoi testare l'esistenza dell'oggetto tramite:

+ +
if ("geolocation" in navigator) {
+  /* la geolocalizzazione è disponibile */
+} else {
+  /* la geolocalizzazione NON È disponibile */
+}
+
+ +
+

Nota: Su Firefox 24 e versioni più vecchie, "geolocation" in navigator ritorna sempre true anche se l'API è stata disabilitata. Questa cosa è stata sistemata con Firefox 25. ({{bug(884921)}}).

+
+ +

Ottenere la posizione corrente

+ +

Per ottenere la posizione corrente dell'utente devi chiamare il metodo {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Viene così lanciata una richiesta asincrona che calcola la posizione attuale dell'utente. Quando la posizione viene calcolata, la funzione viene eseguita. Puoi creare una funzione che viene chiamata in caso di errore. Un terzo parametro opzionale è un oggetto che permette di settare il tempo massimo della posizione calcolata, il tempo di attessa per una nuova richiesta e la possibilità di usare la massima accuratezza per il cacolo della posizione.

+ +
+

Nota: Per default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} cerca di calcolare la posizione nel modo più veloce possibile avendo però una bassa accuratezza. Questo metodo è utile se ti serve una risposta veloce. Dispositivi con il GPS possono richiedere anche alcuni minuti per fare un calcolo preciso della posizione, quindi dei dati meno accurati (come l'indirizzo IP o il wifi) possono essere usati da {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+
+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

L'esempio qui sopra chiama la funzione do_something() quando la posizione viene calcolata.

+ +

Controllare la posizione attuale

+ +

Se la posizione cambia (perché il dispositivo di sposta o perché viene calcolata una posizione più accurata), puoi settare una funzione che viene chiamata quando la posizione attuale si aggiorna. Basta usare la funzione {{domxref("Geolocation.watchPosition()","watchPosition()")}}, che ha gli stessi parametri di input di {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Questa funzione viene chiamata più volte così da permettere al browser di sapere sempre la posizione del dispositivo. La funzione di errore è opzionale come lo era per {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+ +
+

Nota: Puoi usare {{domxref("Geolocation.watchPosition()","watchPosition()")}} senza una chiamata iniziale a {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}

+
+ +
var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

Il metodo {{domxref("Geolocation.watchPosition()","watchPosition()")}} ritorna un ID numerico che può essere usato per identificare univocamente il controllo della posizione; puoi usare questo valore insieme al metodo {{domxref("Geolocation.clearWatch()","clearWatch()")}} per fermare il controllo della posizione.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

Risposta positiva

+ +

Sia {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} che {{domxref("Geolocation.watchPosition()","watchPosition()")}} accettano una risposta positiva, opzionalmente una risposta di errore e un oggetto PositionOptions.

+ +

{{page("/en-US/docs/DOM/navigator.geolocation.getCurrentPosition","PositionOptions")}}

+ +

Una chiamata a {{domxref("Geolocation.watchPosition()","watchPosition")}} è più o meno così:

+ +
function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Nessuna posizione disponibile.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
+ +

Descrivere una posizione

+ +

La posizione dell'utente è descritta usando un oggetto Position, che deriva dall'oggetto Coordinates.

+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Position")}}

+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Coordinates")}}

+ +

Errori

+ +

La funzione che viene invocata in caso di errore quando si chiamano getCurrentPosition() o watchPosition() vuole un oggetto PositionError come primo parametro.

+ +
function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+
+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","PositionError")}}

+ +

Esempi live

+ + + +

HTML Content

+ +
<p><button onclick="geoFindMe()">Viasualizza la mia posizione</button></p>
+<div id="out"></div>
+
+ +

JavaScript Content

+ +
function geoFindMe() {
+  var output = document.getElementById("out");
+
+  if (!navigator.geolocation){
+    output.innerHTML = "<p>La geolocalizzazione non è supportata dal tuo browser</p>";
+    return;
+  }
+
+  function success(position) {
+    var latitude  = position.coords.latitude;
+    var longitude = position.coords.longitude;
+
+    output.innerHTML = '<p>Latitudine: ' + latitude + '° <br>Longitudine: ' + longitude + '°</p>';
+
+    var img = new Image();
+    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
+
+    output.appendChild(img);
+  }
+
+  function error() {
+    output.innerHTML = "Impossibile calcolare la tua posizione";
+  }
+
+  output.innerHTML = "<p>Locating…</p>";
+
+  navigator.geolocation.getCurrentPosition(success, error);
+}
+
+ +

Risultato live

+ +

{{EmbedLiveSample('Geolocation_Live_Example', 350, 410)}}

+ +

I permessi

+ +

Tutte le estensioni presenti su addons.mozilla.org che richiedono la posizione sono obbligate a chiedere un permesso all'utente. La seguente funzione richiede il permesso per l'uso della posizione. La risposta dell'utente viene salvata nelle preferenze tramite il parametro pref. La funzione fornita nel parametro callback viene chiamata con un valore booleano (true o false) che indica la risposta dell'utente. Se la risposta è true, l'estensione può accedere alla posizione dell'utente.

+ +
function prompt(window, pref, message, callback) {
+    let branch = Components.classes["@mozilla.org/preferences-service;1"]
+                           .getService(Components.interfaces.nsIPrefBranch);
+
+    if (branch.getPrefType(pref) === branch.PREF_STRING) {
+        switch (branch.getCharPref(pref)) {
+        case "always":
+            return callback(true);
+        case "never":
+            return callback(false);
+        }
+    }
+
+    let done = false;
+
+    function remember(value, result) {
+        return function() {
+            done = true;
+            branch.setCharPref(pref, value);
+            callback(result);
+        }
+    }
+
+    let self = window.PopupNotifications.show(
+        window.gBrowser.selectedBrowser,
+        "geolocation",
+        message,
+        "geo-notification-icon",
+        {
+            label: "Share Location",
+            accessKey: "S",
+            callback: function(notification) {
+                done = true;
+                callback(true);
+            }
+        }, [
+            {
+                label: "Always Share",
+                accessKey: "A",
+                callback: remember("always", true)
+            },
+            {
+                label: "Never Share",
+                accessKey: "N",
+                callback: remember("never", false)
+            }
+        ], {
+            eventCallback: function(event) {
+                if (event === "dismissed") {
+                    if (!done) callback(false);
+                    done = true;
+                    window.PopupNotifications.remove(self);
+                }
+            },
+            persistWhileVisible: true
+        });
+}
+
+prompt(window,
+       "extensions.foo-addon.allowGeolocation",
+       "Foo Add-on wants to know your location.",
+       function callback(allowed) { alert(allowed); });
+
+ +

Compatibilità dei browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{CompatChrome(5.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}[1]910.60
+ {{CompatNo}} 15.0
+ 16.0		5
Secure origins only{{CompatChrome(50.0)}}{{CompatNo}}{{CompatGeckoDesktop("55")}}{{CompatNo}}3910
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Supporto base{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}1.0.1{{CompatUnknown}}10.60
+ {{CompatNo}} 15.0
+ 16.0		3.2{{CompatVersionUnknown}}
Secure origins only{{CompatUnknown}}{{CompatChrome(50.0)}}{{CompatNo}}{{CompatGeckoMobile("55")}}   10.1{{CompatChrome(50.0)}}
+
+ +

[1] Firefox calcola la tua posizione anche usando il tuo WiFi grazie ai Google Location Services. Durante il trasferimento tra Firefox e Google, i dati scambiati includono dei dati sul WiFi Access Point, un token di accesso (simile a un cookie) e l'indirizzo IP dell'utente. Per maggiori informazioni, dai un'occhiata alla Privacy Policy di Mozzilla e alla Privacy Policy di Google.

+ +

[2] A causa del punto [1], questa API non si può usare in China. Puoi usare le API di Baidu o di Autonavi.

+ +

Firefox 3.6 (Gecko 1.9.2) ha aggiunta il supporto per l'uso del servizio GPSD (GPS daemon) per usare la geolocalizzazione su Linux.

+ +

Vedi anche

+ + diff --git a/files/it/web/api/geolocation/watchposition/index.html b/files/it/web/api/geolocation/watchposition/index.html new file mode 100644 index 0000000000..e218675cf7 --- /dev/null +++ b/files/it/web/api/geolocation/watchposition/index.html @@ -0,0 +1,166 @@ +--- +title: Geolocation.watchPosition() +slug: Web/API/Geolocation/watchPosition +translation_of: Web/API/Geolocation/watchPosition +--- +

{{securecontext_header}}{{ APIref("Geolocation API") }}

+ +

Il metodo watchPosition() viene usato per creare una funzione che viene chiamata automaticamente ogni volta che cambia la posizione del dispositivo. Si può anche specificare una funzione da chiamare in caso di errore.

+ +

Questo metodo ritorna un valore ID che può essere usato per terminare il metodo {{domxref("Geolocation.clearWatch()")}}.

+ +

Sintassi

+ +
id = navigator.geolocation.watchPosition(successo[, errore[, opzioni]])
+ +

Parametri

+ +
+
successo
+
Un funzione che prende come parametro di input un oggetto {{domxref("Position")}}.
+
errore {{optional_inline}}
+
Una funzione che prende come parametro di input un oggetto {{domxref("PositionError")}}.
+
opzioni {{optional_inline}}
+
Un oggetto {{domxref("PositionOptions")}} che permette di configurare la funzione che controlla la posizione.
+
+ +

Esempi

+ +
var id, target, options;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
+    console.log('Congratulazioni, hai raggiunto il target');
+    navigator.geolocation.clearWatch(id);
+  }
+}
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+}
+
+target = {
+  latitude : 0,
+  longitude: 0
+};
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+
+ +
+

Se la tua applicazione gira su Firefox OS, controlla la pagina geolocation wake lock per fare in modo che la posizione del dispositivo venga aggiornata in backgound o quando lo schermo del dispositivo è spento.

+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}{{Spec2('Geolocation')}}Specifica iniziale.
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base5{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}910.60
+ Rimosso nella 15.0
+ Reintrodotto nella 16.0		5
Secure context-only47{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatUnknown()}}{{CompatUnknown()}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
Secure context-only{{CompatNo}}47{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/geolocationposition/index.html b/files/it/web/api/geolocationposition/index.html new file mode 100644 index 0000000000..7498033a57 --- /dev/null +++ b/files/it/web/api/geolocationposition/index.html @@ -0,0 +1,126 @@ +--- +title: Position +slug: Web/API/GeolocationPosition +translation_of: Web/API/GeolocationPosition +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

L'interfaccia Position rappresenta la posizione di un particolare dispositivo in un preciso istante. La posizione, rappresentata da un oggetto {{domxref("Coordinates")}}, comprende la posizione in 2D del dispositivo, su una sfera che rappresenta la Terra, l'altitudine e la velocità.

+ +

Proprietà

+ +

L'interfaccia Position non estende alcuna proprietà.

+ +
+
{{domxref("Position.coords")}} {{readonlyInline}} {{securecontext_inline}}
+
Ritorna un oggetto {{domxref("Coordinates")}} che rappresenta la posizione attuale.
+
{{domxref("Position.timestamp")}} {{readonlyInline}} {{securecontext_inline}}
+
Ritorna {{domxref("DOMTimeStamp")}} che rappresenta l'orario in cui è stata calcolata la posizione.
+
+ +

Metodi

+ +

L'interaccia Position non va implementata e non estende alcun metodo.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('Geolocation', '#position', 'Position')}}{{Spec2('Geolocation')}}Specifica iniziale.
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{CompatChrome(5)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}910.60
+ Rimosso nella 15.0
+ Reintrodotto nella 16.0		5
Secure context-only{{CompatChrome(47)}}{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatUnknown()}}{{CompatUnknown()}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
Secure context-only{{CompatNo}}{{CompatChrome(47)}}{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/globaleventhandlers/index.html b/files/it/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..9238474923 --- /dev/null +++ b/files/it/web/api/globaleventhandlers/index.html @@ -0,0 +1,714 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM + - GlobalEventHandlers + - HTML DOM + - Mixin + - NeedsTranslation + - Reference + - TopicStub + - events +translation_of: Web/API/GlobalEventHandlers +--- +
{{ApiRef("HTML DOM")}}
+ +

The GlobalEventHandlers mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}. Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.

+ +
+

Note: GlobalEventHandlers is a mixin and not an interface; you can't actually create an object of type GlobalEventHandlers.

+
+ +

Properties

+ +

This interface doesn't include any properties except for the event handlers listed below.

+ +

Event handlers

+ +

These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, as well as by {{domxref("WorkerGlobalScope")}} for Web Workers.

+ +
+
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationcancel")}} event is sent, indicating that a running CSS animation has been canceled.
+
{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationend")}} event is sent, indicating that a CSS animation has stopped playing.
+
{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationiteration")}} event has been sent, indicating that a CSS animation has begun playing a new iteration of the animation sequence.
+
{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationstart")}} event is sent, indicating that a CSS animation has started playing.
+
{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("auxclick")}} event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncanplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncanplaythrough")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncuechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrag")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragexit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrop")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondurationchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onemptied")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.
+
{{domxref("GlobalEventHandlers.onended")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.
+
{{domxref("GlobalEventHandlers.ongotpointercapture")}}
+
+

Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("gotpointercapture")}} event type is raised.

+
+
{{domxref("GlobalEventHandlers.oninput")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.
+
{{domxref("GlobalEventHandlers.oninvalid")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadeddata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadedmetadata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadend")}} event is raised (when progress has stopped on the loading of a resource.)
+
{{domxref("GlobalEventHandlers.onloadstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)
+
{{domxref("GlobalEventHandlers.onlostpointercapture")}}
+
+

Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("lostpointercapture")}} event type is raised.

+
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousewheel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.
+
{{ domxref("GlobalEventHandlers.onwheel") }}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("wheel")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpause")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplaying")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerdown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointermove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointercancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.
+
{{domxref("GlobalEventHandlers.onprogress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onratechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeked")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeking")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselectstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the user starts to make a new text selection on a web page.
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the text selected on a web page changes.
+
{{domxref("GlobalEventHandlers.onshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onstalled")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsuspend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontimeupdate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.
+
{{domxref("GlobalEventHandlers.onvolumechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchcancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchmove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontransitioncancel")}}
+
An {{domxref("EventHandler")}} called when a {{event("transitioncancel")}} event is sent, indicating that a CSS transition has been cancelled.
+
{{domxref("GlobalEventHandlers.ontransitionend")}}
+
An {{domxref("EventHandler")}} called when a {{event("transitionend")}} event is sent, indicating that a CSS transition has finished playing.
+
{{domxref("GlobalEventHandlers.onwaiting")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.
+
+
+ +

Methods

+ +

This interface defines no methods.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}{{Spec2('Selection API')}}Adds onselectionchange.
{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}{{Spec2('Pointer Lock')}}Adds onpointerlockchange and onpointerlockerror on {{domxref("Document")}}. It is experimentally implemented on GlobalEventHandlers.
{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onsort since the {{SpecName("HTML5 W3C")}} snapshot.
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of GlobalEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, ontimeupdate, onvolumechange, onwaiting{{CompatGeckoDesktop(1.9.1)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsuspend{{CompatGeckoDesktop(1.9.2)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop{{CompatGeckoDesktop(1.9.1)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmouseenter, onmouseleave{{CompatGeckoDesktop(10)}}{{CompatChrome(30.0)}}{{CompatUnknown}}5.517{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncancel{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onclose{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncuechange{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmousewheel{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsort {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmozfullscreenchange, onmozfullscreenerror {{non-standard_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onpointerlockchange, onpointerlockerror{{CompatGeckoDesktop(10)}}[1]{{CompatVersionUnknown}}[2] {{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onpointercancel, onpointerdown, onpointerup, onpointermove, onpointerout, onpointerover, onpointerenter, onpointerleave{{CompatVersionUnknown}}[3]{{CompatChrome(55.0)}}{{CompatVersionUnknown}}10{{CompatUnknown}}{{CompatUnknown}}
onselectionchange{{CompatGeckoDesktop(43)}}[4]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ontouchend, ontouchcancel, ontouchmove, ontouchstart{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
animationstart, animationend, animationcancel, animationiteration{{CompatGeckoDesktop(51)}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ongotpointercapture, onlostpointercapture{{CompatUnknown}}{{CompatChrome(57.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
onauxclick{{CompatGeckoDesktop(53)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onwheel{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, ontimeupdate, onvolumechange, onwaiting{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onmouseenter, onmouseleave{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(10)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onsuspend{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
oncancel{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onclose{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
oncuechange{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onmousewheel{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onsort{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
onmozfullscreenchange, onmozfullscreenerror {{non-standard_inline}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)
onpointerlockchange, onpointerlockerror{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(10)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
onpointercancel, onpointerdown, onpointerup, onpointermove, onpointerout, onpointerover, onpointerenter, onpointerleave{{CompatChrome(55.0)}}{{CompatUnknown}}{{CompatVersionUnknown}}[3]{{CompatNo}}10{{CompatNo}}{{CompatNo}}{{CompatChrome(55.0)}}
onselectionchange{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(43)}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
ontouchend, ontouchcancel, ontouchmove, ontouchstart{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
animationstart, animationend, animationcancel, animationiteration{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatUnknown}}{{CompatGeckoMobile(51)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)
ongotpointercapture, onlostpointercapture{{CompatChrome(57.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatChrome(57.0)}}
onauxclick{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoMobile(53)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
onwheel{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] In Gecko this is implemented as onmozpointerlockchange, onmozpointerlockerror.

+ +

[2] In Blink this is implemented as onwebkitpointerlockchange, onwebkitpointerlockerror.

+ +

[3] This is implemented behind the dom.w3c_pointer_events.enabled preference, defaulting to false.

+ +

[4] This is implemented behind the dom.select_events.enabled preference, that default to false, except on Nightly.

+ +

See also

+ + diff --git a/files/it/web/api/globaleventhandlers/onresize/index.html b/files/it/web/api/globaleventhandlers/onresize/index.html new file mode 100644 index 0000000000..27e71c3438 --- /dev/null +++ b/files/it/web/api/globaleventhandlers/onresize/index.html @@ -0,0 +1,77 @@ +--- +title: GlobalEventHandlers.onresize +slug: Web/API/GlobalEventHandlers/onresize +tags: + - API + - DOM + - Proprietà +translation_of: Web/API/GlobalEventHandlers/onresize +--- +

{{ ApiRef() }}

+ +

La proprietà GlobalEventHandlers.onresize contiene un {{domxref("EventHandler")}} il quale viene lanciato quando un evento {{event("resize")}} viene ricevuto.

+ +

Sintassi

+ +
window.onresize = funcRef;
+
+ +

Parameters

+ + + +

Esempio

+ +
window.onresize = doFunc;
+
+ +
<html>
+<head>
+
+<title>onresize test</title>
+
+</head>
+
+<body>
+<p>Ridimensiona la finestra del browser per lanciare l'evento resize.</p>
+
+<p>Altezza finestra: <span id="height"></span></p>
+<p>Larghezza finestra: <span id="width"></span></p>
+
+<script type="text/javascript">
+  var heightOutput = document.querySelector('#height');
+  var widthOutput = document.querySelector('#width');
+
+  function resize() {
+    heightOutput.textContent = window.innerHeight;
+    widthOutput.textContent = window.innerWidth;
+  }
+
+  window.onresize = resize;
+</script>
+</body>
+</html>
+
+ +

Note

+ +

L'evento resize viene scatenato dopo che la finestra è stata ridimensionata.

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificazioneStatoCommento
{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/it/web/api/htmlcanvaselement/index.html b/files/it/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..763a2bc7bc --- /dev/null +++ b/files/it/web/api/htmlcanvaselement/index.html @@ -0,0 +1,245 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +tags: + - API + - Canvas + - HTML DOM + - Interfaccia + - Riferimenti +translation_of: Web/API/HTMLCanvasElement +--- +
+
{{APIRef("Canvas API")}}
+ +
L'interfaccia HTMLCanvasElement fornisce proprietà e metodi per manipolare il layout e la presentazione degli elementi del canvas. L'interfaccia HTMLCanvasElement eredita anche le proprietà ed i metodi della interfaccia {{domxref("HTMLElement")}}.
+
+ +

 

+ +

Proprietà

+ +

Eredita proprietà dalla interfaccia genitore, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.height")}}
+
Intero positivo che rispecchia l'attributo dell'elemento HTML {{htmlattrxref("height", "canvas")}} interpretato in unità pixel CSS. Quando l'attributo non è specificato, o se è impostato ad un valore non valido, come un numero negativo, è usato il valore di default 150.
+
{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
+
Un {{jsxref("Boolean")}} che rispecchia l'attributo HTML {{htmlattrxref("moz-opaque", "canvas")}} dell'elemento {{HTMLElement("canvas")}}. Permette al canvas di sapere se la traslucenza sarà un fattore. Se il canvas sa che non ci sarà traslucenza, la prestazione del dipingere puo' essere ottimizzata.
+
{{domxref("HTMLCanvasElement.width")}}
+
Intero positivo che rispecchia l'attributo HTML {{htmlattrxref("width", "canvas")}} dell'elemento {{HTMLElement("canvas")}} interpretato in unità pixel CSS. Quando l'attributo non è specificato, o se è impostato ad un valore non valido, ad esempio negativo, è usato il valore di default 300.
+
+ +

Metodi

+ +

Eredita dal proprio genitore, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+
Restituisce un oggetto {{domxref("CanvasCaptureMediaStream")}} che è una capture video in tempo reale della superficie del canvas.
+
{{domxref("HTMLCanvasElement.getContext()")}}
+
Restituisce un contesto di disegno sul canvas, oppure null se l'identificativo del contesto non ha supporto. Un contesto di disegno permette di disegnare sul canvas. Chiamare getContext con "2d" come parametro restituisce un oggetto {{domxref("CanvasRenderingContext2D")}}, mentre chiamarlo con "experimental-webgl" (o "webgl") restituisce un oggetto {{domxref("WebGLRenderingContext")}}. Questo contesto è disponibile solo su browsers che implementano WebGL.
+
{{domxref("HTMLCanvasElement.toDataURL()")}}
+
Restituisce un URL dati contentente una rappresentazione della immagine nel formato specificato dal parametro tipo (il valore di default è png). L'immagine restituita ha una risoluzione di 96dpi.
+
{{domxref("HTMLCanvasElement.toBlob()")}}
+
Crea un oggetto {{domxref("Blob")}} che rappresenta l'immagine contenuta nel canvas; questo file puo' essere immagazzinato temporaneamente su disco oppure nella memoria a discrezione dell'agente per l'utente (user agent).
+
{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
+
Trasferisce il controllo ad un oggetto {{domxref("OffscreenCanvas")}}, o nella thread principale oppure in una worker.
+
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Restituisce un oggetto {{domxref("File")}} che rappresenta l'immagine contenuta nel canvas; questo è un file immagazzinato nella memoria, col nome indicato. Se il tipo del file non è specificato, il tipo di default per l'immagine è image/png.
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}{{Spec2('Media Capture DOM Elements')}}Aggiunge il metodo captureStream().
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}}Il metodo getContext() ora restituisce  {{domxref("RenderingContext")}} invece di un oggetto opaco.
+ Sono stati aggiunti i metodi probablySupportsContext(), setContext() etransferControlToProxy().
{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5 W3C')}}Definizione iniziale.
+ +

Compatibilità coi Browsers

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (2D context)4.0{{CompatGeckoDesktop('1.9.2')}}9.09.0 [1]3.1
toBlob()50{{CompatGeckoDesktop('19')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatGeckoDesktop('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (2D context)2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}10.0 [1]3.2
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} as experimental-webgl{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
toBlob(){{CompatNo}} (bug 67587)50{{CompatGeckoMobile('18')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Supporto parziale in Opera Mini 5.0 e successivi.

+ +

[2] Il supporto per il terzo parametro, è stato aggiunto solo con Gecko 25: quando viene usato col tipo "image/jpeg," questo argomento specifica la qualità dell'immagine.

+ +

[3] Da questa funzionalità dipende una impostazione di preferenza di funzionalità. Imposta come true gfx.offscreencanvas.enabled in about:config .

+ +

Vedi anche:

+ + diff --git a/files/it/web/api/htmlcanvaselement/toblob/index.html b/files/it/web/api/htmlcanvaselement/toblob/index.html new file mode 100644 index 0000000000..f0793eb393 --- /dev/null +++ b/files/it/web/api/htmlcanvaselement/toblob/index.html @@ -0,0 +1,262 @@ +--- +title: HTMLCanvasElement.toBlob() +slug: Web/API/HTMLCanvasElement/toBlob +translation_of: Web/API/HTMLCanvasElement/toBlob +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

Il metodoHTMLCanvasElement.toBlob() crea un oggetto {{domxref("Blob")}} rappresentante l'immagine contenuta nel canvas;  questo file potrebbe essere immagazzinato per usi futuri su disco o in memoria a discrezione dell'user agent. Se type non è specificato, il tipo immagine è impostato aimage/png. L'immagine creata ha una risoluzione di 96dpi.
+ Il terzo argomento è usato con immagini di tipoimage/jpeg per specificare la qualità dell'output.

+ +

Sintassi

+ +
void canvas.toBlob(callback, mimeType, qualityArgument);
+
+ +

Parametri

+ +
+
callback
+
Funzione di callback con l'oggetto {{domxref("Blob")}} risultante come singolo argomento.
+
mimeType {{optional_inline}}
+
Un oggetto {{domxref("DOMString")}} indicante il tipo immagine. Quella di default èimage/png.
+
qualityArgument {{optional_inline}}
+
Un oggetto {{jsxref("Number")}} tra0 e1 indicante la qualità immagine se il tipo richiesto è image/jpeg oimage/webp. Se questo argomento è diverso dai due precedenti è utilizzato il valore di qualità immagine di default. Altri argomenti verranno ignorati.
+
+ +

Valore ritornato

+ +

Nessuno.

+ +

Esempi

+ +

Ottenere un file rappresentante il canvas

+ +

Una volta aver disegnato il contenuto in un canvas, è possibile convertirlo in un file di un qualsiasi. Lo snippet di codice in basso, ad esempio, prende l'immagine contenuta nell'elemento {{HTMLElement("canvas")}} avente ID "canvas", ottenendo una sua copia in formato immagine PNG, quindi aggiunge un nuovo elemento {{HTMLElement("img")}} al documento, la cui immagine di origine è quella creata utilizzando il canvas.

+ +
var canvas = document.getElementById('canvas');
+
+canvas.toBlob(function(blob) {
+  var newImg = document.createElement('img'),
+      url = URL.createObjectURL(blob);
+
+  newImg.onload = function() {
+    // no longer need to read the blob so it's revoked
+    URL.revokeObjectURL(url);
+  };
+
+  newImg.src = url;
+  document.body.appendChild(newImg);
+});
+
+ +

Si noti che si sta creando un'immagine PNG; se si specifica un secondo parametro nella chiamata a toBlob(),  si può specificare il formato immagine. Ad esempio, per ottenere l'immagine in formato JPEG:

+ +
 canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG at 95% quality
+ +
+

Convertire un canvas in icona (solo su Mozilla)

+ +

Ora si userà -moz-parse per convertire un canvas in icona. Windows XP non supporta la conversione dal formato PNG ad ICO, quindi usa quello bitmap (BMP) al suo posto. Un link di download è creato impostando l'attributo download. Il valore dello stesso è il nome che verrà utilizzato come nome del file.

+ +
var canvas = document.getElementById('canvas');
+var d = canvas.width;
+ctx = canvas.getContext('2d');
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = 'yellow';
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var a = document.createElement('a');
+    a.textContent = 'Download';
+    document.body.appendChild(a);
+    a.style.display = 'block';
+    a.download = iconName + '.ico';
+    a.href = window.URL.createObjectURL(b);
+  }
+}
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');
+
+ +

Salvare toBlob su disco con OS.File (valido solo per chrome/add-on)

+ +
+

This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code as OS APIs are not present on web sites.

+
+ +
var canvas = document.getElementById('canvas');
+var d = canvas.width;
+ctx = canvas.getContext('2d');
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = 'yellow';
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var r = new FileReader();
+    r.onloadend = function () {
+    // r.result contains the ArrayBuffer.
+    Cu.import('resource://gre/modules/osfile.jsm');
+    var writePath = OS.Path.join(OS.Constants.Path.desktopDir,
+                                 iconName + '.ico');
+    var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result),
+                                      {tmpPath:writePath + '.tmp'});
+    promise.then(
+      function() {
+        console.log('successfully wrote file');
+      },
+      function() {
+        console.log('failure writing file')
+      }
+    );
+  };
+  r.readAsArrayBuffer(b);
+  }
+}
+
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML5.1')}}No change
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML5 W3C')}}Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("50")}}{{CompatGeckoDesktop('19')}}{{CompatIE(10)}}{{property_prefix("ms")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
Image quality parameter{{CompatChrome("50")}}{{CompatGeckoDesktop('25')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome("50")}}{{CompatGeckoMobile("19")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatChrome("50")}}
Image quality parameter{{CompatNo}}{{CompatChrome("50")}}{{CompatGeckoMobile("25")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatChrome("50")}}
+
+ +

[1] See {{WebKitBug("71270")}}.

+ +

Polyfill

+ +

A low performance polyfill based on toDataURL.

+ +
if (!HTMLCanvasElement.prototype.toBlob) {
+ Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+  value: function (callback, type, quality) {
+
+    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
+        len = binStr.length,
+        arr = new Uint8Array(len);
+
+    for (var i = 0; i < len; i++ ) {
+     arr[i] = binStr.charCodeAt(i);
+    }
+
+    callback( new Blob( [arr], {type: type || 'image/png'} ) );
+  }
+ });
+}
+
+ +

See also

+ + diff --git a/files/it/web/api/htmlcollection/index.html b/files/it/web/api/htmlcollection/index.html new file mode 100644 index 0000000000..53eb23edd1 --- /dev/null +++ b/files/it/web/api/htmlcollection/index.html @@ -0,0 +1,101 @@ +--- +title: HTMLCollection +slug: Web/API/HTMLCollection +tags: + - API + - DOM + - HTML DOM + - HTMLCollection + - Interfaccia + - Lista di elementi + - Referenza + - Referenza DOM +translation_of: Web/API/HTMLCollection +--- +

{{APIRef("HTML DOM")}}

+ +

L'interfaccia HTMLCollection rappresenta una raccolta generica (array-like object simile agli argomenti) di elementi (nell'ordine del documento) e offre metodi e proprietà per la selezione dall'elenco.

+ +
Note: Questa interfaccia è chiamata HTMLCollection per ragioni storiche (prima del DOM moderno, le raccolte che implementano questa interfaccia potevano avere solo elementi HTML come elementi).
+ +

Una HTMLCollection nell'HTML DOM è attiva; viene aggiornata automaticamente quando viene modificato il documento sottostante.

+ +

Proprietà

+ +
+
{{domxref("HTMLCollection.length")}} {{readonlyInline}}
+
Restituisce il numero di elementi nella raccolta.
+
+ +

Metodi

+ +
+
{{domxref("HTMLCollection.item()")}}
+
Restituisce il nodo specifico al dato index a base zero nella lista. Restituisce null se index non è compreso nell'intervallo
+
{{domxref("HTMLCollection.namedItem()")}}
+
Restituisce il nodo specifico il cui ID o, come nome di fallback, corrisponde alla stringa specificata da nome. La corrispondenza per nome viene eseguita solo come ultima risorsa, solo in HTML, e solo se l'elemento di riferimento supporta l'attributo name. Restituisce null se nessun nodo corrisponde con il nome specificato.
+
+ +

Utilizzo in JavaScript

+ +

HTMLCollection espone anche i suoi membri direttamente come proprietà sia per nome che per indice. Gli ID HTML possono contenere : e . come caratteri validi, che richiederebbero l'uso della notazione della parentesi per l'accesso alla proprietà. Attualmente HTMLCollections non riconosce gli ID puramente numerici, il che causerebbe un conflitto con l'accesso in stile array, sebbene HTML5 li autorizzi.

+ +

Ad esempio, supponendo che esista un elemento <form> nel documento e il suo id sia "myForm":

+ +
var elem1, elem2;
+
+// document.forms è una HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // ritorna: "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // ritorna: "true"
+
+elem1 = document.forms["named.item.with.periods"];
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}{{ Spec2('DOM2 HTML') }} 
{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}{{ Spec2('DOM1') }}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.HTMLCollection")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/htmlcollection/item/index.html b/files/it/web/api/htmlcollection/item/index.html new file mode 100644 index 0000000000..f53047ffbc --- /dev/null +++ b/files/it/web/api/htmlcollection/item/index.html @@ -0,0 +1,50 @@ +--- +title: HTMLCollection.item +slug: Web/API/HTMLCollection/item +translation_of: Web/API/HTMLCollection/item +--- +
{{APIRef("HTML DOM")}}
+ +

Il metodo {{domxref("HTMLCollection")}} item() restituisce il nodo situato nell'offset specificato nella raccolta.

+ +
+

Note: Poiché il contenuto di una HTMLCollection è attivo, le modifiche al DOM sottostante possono e causano la modifica della posizione dei singoli nodi nella raccolta, pertanto il valore dell'indice non resterà necessariamente costante per un determinato nodo.

+
+ +

Sintassi

+ +
var elemento = HTMLCollection.item(index)
+ +

Parametri

+ +
+
index
+
La posizione del {{domxref("Node")}} da restituire. Gli elementi appaiono in una HTMLCollection nello stesso ordine in cui appaiono nella fonte del documento.
+
+ +

Valore di ritorno

+ +

Il {{domxref("Node")}} nell'indice specificato, o null se index è minore di zero o maggiore o uguale alla proprietà length.

+ +

Note di utilizzo

+ +

Il metodo item() estituisce un elemento numerato da una HTMLCollection. In JavaScript, è più semplice trattare HTMLCollection come una matrice e indicizzarla mediante la notazione degli array. Vedi l'{{anch ("Esempio", "esempio")}} sotto.

+ +

Esempio

+ +
var c = document.images;  // Questa è una HTMLCollection
+var img0 = c.item(0);     // Puoi usare il metodo item() in questo modo
+var img1 = c[1];          // Ma questa notazione è più facile e più comune
+
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.HTMLCollection.item")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/api/htmlelement/index.html b/files/it/web/api/htmlelement/index.html new file mode 100644 index 0000000000..a1b53a7528 --- /dev/null +++ b/files/it/web/api/htmlelement/index.html @@ -0,0 +1,481 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API + - HTML DOM + - Interface + - NeedsNewLayout + - Referenza +translation_of: Web/API/HTMLElement +--- +
{{ApiRef("HTML DOM")}}
+ +

L'interfaccia HTMLElement rappresenta un qualsiasi elemento HTML. Alcuni elementi implementano direttamente questa interfaccia, altri la implementano attraverso un'interfaccia che la eredita.

+ +

Proprietà

+ +

Eredita le proprietà dai propri genitori, da {{domxref("Element")}} e da {{domxref("GlobalEventHandlers")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomeTipoDescrizione
{{domxref("HTMLElement.accessKey")}}{{domxref("DOMString")}}La chiave d'accesso assegnata all'elemento.
{{domxref("HTMLElement.accessKeyLabel")}}{{domxref("DOMString")}}Una stringa che rappresenta la chiave d'accesso assegnata all'elemento.
{{domxref("HTMLElement.contentEditable")}}{{domxref("DOMString")}}Ritorna o assegna la modificabilità dell'elemento.
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}{{domxref("Boolean")}}Indica se il contenuto dell'elemento sia modificabile.
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}{{domxref("DOMStringMap")}}Permette di leggere e scrivere attributi personalizzati (data-*) nell'elemento.
{{domxref("HTMLElement.dir")}}{{domxref("DOMString")}}Ritorna o assegna la direzione dell'elemento
{{domxref("HTMLElement.draggable")}}{{domxref("Boolean")}} 
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.hidden")}}{{domxref("Boolean")}} 
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}{{domxref("Boolean")}} 
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}{{domxref("DOMString")}} 
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}any 
{{domxref("HTMLElement.lang")}}{{domxref("DOMString")}}Ritorna o assegna la lingua di un attributo, di un elemento, del testo e del contenuto di un elemento.
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}doubleL'altezza di un elemento, relativa al layout.
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}doubleLa distanza tra il bordo sinistro dell'elemento e il bordo sinistro del suo offsetParent.
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}{{domxref("Element")}}L'elemento a partire dal quale tutti i calcoli dell'offset sono effettuati.
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}doubleLa distanza tra il bordo superiore dell'elemento e il bordo superiore del suo offsetParent.
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}doubleLa larghezza di un elemento, relativa al layout.
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}{{domxref("HTMLPropertiesCollection")}} 
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}{{domxref("Boolean")}}Controlla il controllo ortografico (presente in tutti gli elementi HTML)
{{domxref("HTMLElement.style")}}{{domxref("CSSStyleDeclaration")}}Un oggetto che rappresenta la dichiarazione degli attributi di stile di un elemento.
{{domxref("HTMLElement.tabIndex")}}longRitorna o assegna la posizione di un elemento nell'ordine di tabbing.
{{domxref("HTMLElement.title")}}{{domxref("DOMString")}}Una stringa che appare in un popup quando il mouse si trova sopra all'elemento.
{{domxref("HTMLElement.translate")}} {{experimental_inline}}{{domxref("Boolean")}} 
+ +

Gestori degli eventi

+ +

Le proprietà degli eventi, nella forma onXYZ, sono definite nei {{domxref("GlobalEventHandlers")}} implementati da HTMLElement. Alcune altre sono specifiche per HTMLElement.

+ +
+
{{domxref("HTMLElement.onTouchStart")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchstart")}}.
+
{{domxref("HTMLElement.onTouchEnd")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchend")}}.
+
{{domxref("HTMLElement.onTouchMove")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchmove")}}.
+
{{domxref("HTMLElement.onTouchEnter")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchenter")}}.
+
{{domxref("HTMLElement.onTouchLeave")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchleave")}}.
+
{{domxref("HTMLElement.onTouchCancel")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchcancel")}}.
+
+ +

Metodi

+ +

Eredita i metodi dal genitore, {{domxref("Element")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome e argomentiRestituisceDescrizione
{{domxref("HTMLElement.blur()")}}voidRimuove il focus della tastiera dall'elemento attualmente in focus.
{{domxref("HTMLElement.click()")}}voidInvia un evento di clic del mouse all'elemento.
{{domxref("HTMLElement.focus()")}}voidPorta il focus della tastiera sull'elemento.
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}void 
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}Aggiunge le seguenti proprietà: offsetParent, offsetTop, offsetLeft, offsetWidth, e offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}Aggiunge le seguenti proprietà: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, e itemValue.
+ Aggiunti i seguenti metodi: forceSpellcheck().
+ Spostati gli attributi onXYZ all'interfaccia {{domxref("GlobalEventHandlers")}} e aggiunta la sua ereditarietà.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}Aggiunge le seguenti proprietà: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, e tutte le proprietà onXYZ.
+ Spostate le proprietà id e className all'interfaccia {{domxref("Element")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}Nessun cambiamento da {{SpecName('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Supporto di base{{CompatGeckoDesktop("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoDesktop("5.0")}}17.0{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.10)
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoDesktop("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{WebkitBug(72715)}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.24)
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}9.0{{CompatUnknown}}11.105.1
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.contentEditable", "contentEditable")}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}5.59{{CompatVersionUnknown}}
{{domxref("HTMLElement.spellcheck", "spellcheck")}}{{CompatGeckoDesktop("1.8.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}8.01111.106
{{domxref("HTMLElement.draggable", "draggable")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}12.0{{CompatUnknown}}
{{domxref("HTMLElement.dropzone", "dropzone")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}12.0{{CompatNo}}
{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatNo}}11.60
+ (Removed in Opera 15)		{{CompatNo}}
{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Supporto di base +

{{CompatGeckoMobile("1.0")}}

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoMobile("8.0")}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoMobile("6.0")}}
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoMobile("5.0")}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/htmlelement/offsetheight/index.html b/files/it/web/api/htmlelement/offsetheight/index.html new file mode 100644 index 0000000000..46b7232b50 --- /dev/null +++ b/files/it/web/api/htmlelement/offsetheight/index.html @@ -0,0 +1,123 @@ +--- +title: HTMLElement.offsetHeight +slug: Web/API/HTMLElement/offsetHeight +translation_of: Web/API/HTMLElement/offsetHeight +--- +
{{ APIRef("HTML DOM") }}
+ +

La proprietà HTMLElement.offsetHeight è una proprietà di tipo read-only e rappresenta l'altezza dell'elemento incluso padding verticale e magini, in pixels, come intero.

+ +

Di solito, l'offsetHeight di un elemento è una misura che include i bordi dell'elemento, il padding verticale dell'elemento, la scrollbar orizzontale dell'elemento  (se presente , se renderizzata) e l'altezza nel css dell'elemento.

+ +

Per l'oggetto body, la misua include la totale altezza lineare invece dell'altezza CSS. Elementi floattati sotto altri contenuti lineari sono ignorati.

+ +
+

Questa proprietà arrotonderà il valore ad un intero. Se vi serve un valore decimale usate {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Sintassi

+ +
var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;
+
+ +

intElemOffsetHeight è una variabile che associa un intero corrispondente al valore dell'offsetHeight in pixel dell'elemento. La proprietà offsetHeight è di tipo readonly.

+ +

Esempio

+ +

 

+ +

             Image:Dimensions-offset.png

+ + +

L'immagine nell'esempio sopra mosta una scrollbar e un offsetHeigh che si adatta alla finestra. Comunque, elementi non scrollabili potrebbero avere un offsetHeights largo, molto più largo del contenuto visibile. Questi elemnti sono tipicamente contenuti in un elemento scrollabile; di conseguenza questi elementi non scrollabili possono essere invisibili completamente o parzialmente, dipende dal settaggio dello scrollTop del contenitore scrollabile.

+ +

 

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatusCommenti
{{SpecName('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}{{Spec2('CSSOM View')}} 
+ +

Note

+ +

offsetHeight è una proprietà del DHTML object model la quale era stata introdotta precedentemente da MSIE. Questa si riferisce a volte alla dimensione fisica/grafica di un elemento, o all'altezza del border-box di un elemento.

+ +

Compatibilità Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vedi Anche

+ + diff --git a/files/it/web/api/htmlformelement/acceptcharset/index.html b/files/it/web/api/htmlformelement/acceptcharset/index.html new file mode 100644 index 0000000000..5100a8d7f4 --- /dev/null +++ b/files/it/web/api/htmlformelement/acceptcharset/index.html @@ -0,0 +1,22 @@ +--- +title: HTMLFormElement.acceptCharset +slug: Web/API/HTMLFormElement/acceptCharset +translation_of: Web/API/HTMLFormElement/acceptCharset +--- +
{{APIRef("HTML DOM")}}
+ +

acceptCharset restituisce una lista delle codifiche dei caratteri supportate per un dato elemento form. Questa lista è una stringa e gli elementi possono essere separati da virgole o da spazi.

+ +

Sintassi

+ +
stringa = form.acceptCharset;
+
+ +

Esempio

+ +
inputs = document.forms["myform"].acceptCharset
+
+ +

Specifiche

+ +

DOM Level 2 HTML: acceptCharset

diff --git a/files/it/web/api/htmlformelement/action/index.html b/files/it/web/api/htmlformelement/action/index.html new file mode 100644 index 0000000000..8b55910259 --- /dev/null +++ b/files/it/web/api/htmlformelement/action/index.html @@ -0,0 +1,30 @@ +--- +title: HTMLFormElement.action +slug: Web/API/HTMLFormElement/action +translation_of: Web/API/HTMLFormElement/action +--- +
{{APIRef("HTML DOM")}}
+ +

action legge o imposta l'attributo action dell'elemento FORM.

+ +

Sintassi

+ +
stringa = form.action
+form.action =
+stringa
+
+ +

Esempio

+ +
form.action = "/cgi-bin/publish";
+
+ +

Note

+ +

L'attributo action di un form è il programma che viene eseguito sul server quando il form viene inviato. Questa proprietà può essere letta o impostata.

+ +

Specifiche

+ +

DOM Level 2 HTML: action

+ +

{{ languages( { "ja": "ja/DOM/form.action" } ) }}

diff --git a/files/it/web/api/htmlformelement/elements/index.html b/files/it/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..3ea2a2aa32 --- /dev/null +++ b/files/it/web/api/htmlformelement/elements/index.html @@ -0,0 +1,34 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/HTMLFormElement/elements +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Restituisce una HTMLCollection contenente tutti i controlli dell'elemento form a cui si riferisce.

+ +

Puoi accedere un elemento della collezione sia usando l'indice che usando l'id o il name.

+ +

Sintassi

+ +
nodeList =
+HTMLFormElement.elements
+
+ +

Esempio

+ +
var input = document.getElementById("form1").elements;
+var inputByIndex = inputs[2]; //indice
+var inputByName = inputs["login"]; //id oppure name
+
+ +

Specifiche

+ +

Specifica W3C DOM 2 HTML Specifica elements

diff --git a/files/it/web/api/htmlformelement/enctype/index.html b/files/it/web/api/htmlformelement/enctype/index.html new file mode 100644 index 0000000000..082db19303 --- /dev/null +++ b/files/it/web/api/htmlformelement/enctype/index.html @@ -0,0 +1,28 @@ +--- +title: HTMLFormElement.enctype +slug: Web/API/HTMLFormElement/enctype +translation_of: Web/API/HTMLFormElement/enctype +--- +
{{APIRef("HTML DOM")}}
+ +

enctype legge o imposta il tipo di contenuto del form.

+ +

Sintassi

+ +
stringa = form.enctype
+form.enctype =
+stringa
+
+ +

Esempio

+ +
form.enctype = "application/x-www-form-urlencoded";
+
+ +

Note

+ +

Il tipo di codifica predefinito è "application/x-www-form-urlencoded".

+ +

Specifiche

+ +

DOM Level 2 HTML: enctype

diff --git a/files/it/web/api/htmlformelement/index.html b/files/it/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..35ef7bcb58 --- /dev/null +++ b/files/it/web/api/htmlformelement/index.html @@ -0,0 +1,125 @@ +--- +title: form +slug: Web/API/HTMLFormElement +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/HTMLFormElement +--- +

{{ ApiRef() }}

+

HTML Form Element Interface

+

L'elemento FORM possiede tutte le proprietà e i metodi di qualunque element, e inoltre ha un'interfaccia specializzata: HTMLFormElement.

+

Questa interfaccia fornisce i metodi per creare e modificare gli elementi del FORM. L'esempio seguente mostra come creare un nuovo elemento form, modificare i suoi attributi e inviarlo.

+
// Crea un form
+var f = document.createElement("form");
+
+// Lo aggiungere come ultimo nodo all'interno dell'elemento Body
+document.body.appendChild(f);
+
+// Setta l'attributo action e l'attributo method
+f.action = "/cgi-bin/some.cgi";
+f.method = "POST"
+
+// Invia il form tramite il metodo submit
+f.submit();
+
+

Il seguente esempio di pagina HTML mostra come estrarre informazioni da un form e come settare alcuni dei suoi attributi.

+
</html>
+<head>
+<title>Esempio di Form</title>
+<script type="text/javascript">
+  function getFormInfo() {
+    var info;
+
+    // Ricava un riferimento al form usando la collezione di form disponibile in document
+    var f = document.forms["formA"];
+    info = "f.elements: " + f.elements + "\n"
+         + "f.length: " + f.length + "\n"
+         + "f.name: " + f.elements + "\n"
+         + "f.acceptCharset: " + f.acceptCharset + "\n"
+         + "f.action: " + f.action + "\n"
+         + "f.enctype: " + f.enctype + "\n"
+         + "f.encoding: " + f.encoding + "\n"
+         + "f.method: " + f.method + "\n"
+         + "f.target: " + f.target;
+    document.forms["formA"].elements['tex'].value = info;
+  }
+
+  // Un riferimento al form viene passato
+  //  dall'attributo onclick del button usando 'this.form'
+  function setFormInfo(f) {
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+</script>
+</head>
+<body>
+<h1>Form  example</h1>
+
+<form id="formA"
+ action="/cgi-bin/test" method="POST">
+ <p>Clicca "Info" per vedere delle info sul form.
+    Cllica set per cambiare i settaggi,quindi di nuovo info per vedere l'effetto</p>
+ <p>
+  <input type="button" value="info"
+   onclick="getFormInfo();">
+  <input type="button" value="set"
+   onclick="setFormInfo(this.form);">
+  <input type="reset" value="reset">
+  <br>
+  <textarea id="tex" style="height:15em; width:20em">
+ </p>
+</form>
+</body>
+</html>
+
+

Proprietà

+
+
+ form.elements
+
+ Restituisce una collezione dei controlli contenuti form corrente.
+
+ form.length
+
+ Restituisce il numero di controlli contenuti nel form corrente.
+
+ form.name
+
+ Restituisce una stringa con con il valore dell'attributo name del form corrente.
+
+ form.acceptCharset
+
+ Restituisce una lista dei set di caratteri supportati per il form corrente.
+
+ form.action
+
+ Restituisce/setta l'URI a cui verranno spediti i dati del form.
+
+ form.enctype
+
+ Restituisce/setta il tipo di contenuto che il form corrente invierà al server.
+
+ form.method
+
+ Restituisce/setta il metodo con cui inviare le informazioni al server.
+
+ form.target
+
+ Restituisce/setta il nome del frame in cui rendere la pagina di risposta del server.
+
+

Metodi

+
+
+ form.submit
+
+ Invia il form.
+
+ form.reset
+
+ Riporta il form al suo stato iniziale.
+
+

{{ languages( { "fr": "fr/DOM/form", "pl": "pl/DOM/form", "en": "en/DOM/form" } ) }}

diff --git a/files/it/web/api/htmlformelement/length/index.html b/files/it/web/api/htmlformelement/length/index.html new file mode 100644 index 0000000000..34f1e82ef3 --- /dev/null +++ b/files/it/web/api/htmlformelement/length/index.html @@ -0,0 +1,26 @@ +--- +title: HTMLFormElement.length +slug: Web/API/HTMLFormElement/length +translation_of: Web/API/HTMLFormElement/length +--- +
{{APIRef("HTML DOM")}}
+ +

length restituisce il numero di controlli contenuti dall'elemento FORM.

+ +

Sintassi

+ +
integer = form.length
+
+ +

Esempio

+ +
if (document.getElementById("form1").length > 1) {
+  // vi è più di un controllo
+}
+
+ +

Specification

+ +

DOM Level 2: length

+ +

{{ languages( { "ja": "ja/DOM/form.length" } ) }}

diff --git a/files/it/web/api/htmlformelement/method/index.html b/files/it/web/api/htmlformelement/method/index.html new file mode 100644 index 0000000000..bffd4f7faf --- /dev/null +++ b/files/it/web/api/htmlformelement/method/index.html @@ -0,0 +1,28 @@ +--- +title: HTMLFormElement.method +slug: Web/API/HTMLFormElement/method +translation_of: Web/API/HTMLFormElement/method +--- +
{{APIRef("HTML DOM")}}
+ +

method legge o imposta il metodo HTTP utilizzato per l'invio del form.

+ +

+

Sintassi

+

+ +
stringa = form.method
+form.method =
+stringa
+
+ +

Esempio

+ +
document.forms["myform"].method = "POST";
+
+ +

Specifiche

+ +

DOM Level 2 HTML: method

+ +

{{ languages( { "ja": "ja/DOM/form.method" } ) }}

diff --git a/files/it/web/api/htmlformelement/name/index.html b/files/it/web/api/htmlformelement/name/index.html new file mode 100644 index 0000000000..1e6c741329 --- /dev/null +++ b/files/it/web/api/htmlformelement/name/index.html @@ -0,0 +1,35 @@ +--- +title: HTMLFormElement.name +slug: Web/API/HTMLFormElement/name +translation_of: Web/API/HTMLFormElement/name +--- +
{{APIRef("HTML DOM")}}
+ +

name restituisce il nome dell'elemento FORM corrente come stringa.

+ +

Sintassi

+ +
stringa = form.name
+form.name =
+stringa
+
+ +

Esempio

+ +
form1 = document.getElementById("form1").name;
+if (form1 != document.form.form1) {
+   // il browser non supporta questo tipo di riferimenti
+}
+
+ +

Note

+ +

Si noti che questa proprietà può essere letta o impostata, il chè significa che è possibile modificare o impostare il nome del form.

+ +

Se l'elemento FORM contiene un elemento chiamato "name", questo elemento coprirà la proprietà form.name, quindi non sarà possibile utilizzarla.

+ +

Internet Explorer (IE) non permette di modificare l'attributo name di un elemento che è stato creato con createElement() utilizzando la proprietà name.

+ +

Specifiche

+ +

DOM Level 2 HTML: name

diff --git a/files/it/web/api/htmlformelement/reset/index.html b/files/it/web/api/htmlformelement/reset/index.html new file mode 100644 index 0000000000..0d373e6938 --- /dev/null +++ b/files/it/web/api/htmlformelement/reset/index.html @@ -0,0 +1,28 @@ +--- +title: HTMLFormElement.reset +slug: Web/API/HTMLFormElement/reset +translation_of: Web/API/HTMLFormElement/reset +--- +
{{APIRef("HTML DOM")}}
+ +

reset resetta il form al suo stato iniziale.

+ +

Sintassi

+ +
HTMLForm.reset()
+
+ +

Esempio

+ +
document.forms["mioForm"].reset();
+
+ +

Note

+ +

Questo metodo simula ciò che accadrebbe se l'utente cliccasse il bottone reset.

+ +

Se un controllo di un form (come il bottone reset) ha come nome reset, questo coprirà il metodo reset.

+ +

Specifiche

+ +

DOM Level 2 HTML: reset

diff --git a/files/it/web/api/htmlformelement/submit/index.html b/files/it/web/api/htmlformelement/submit/index.html new file mode 100644 index 0000000000..b762349b6c --- /dev/null +++ b/files/it/web/api/htmlformelement/submit/index.html @@ -0,0 +1,30 @@ +--- +title: HTMLFormElement.submit() +slug: Web/API/HTMLFormElement/submit +translation_of: Web/API/HTMLFormElement/submit +--- +
{{APIRef("HTML DOM")}}
+ +

submit invia il form.

+ +

Sintassi

+ +
HTMLForm.submit()
+
+ +

Esempio

+ +
document.forms["mioForm"].submit()
+
+ +

Note

+ +

Questo metodo simula ciò che accadrebbe se l'utente cliccasse sul bottone "invia".

+ +

Se il controllo di un form (come il bottone di invio) ha come nome o un id submit, questo coprirà il metodo submit.

+ +

Specifiche

+ +

DOM Level 2 HTML: submit

+ +

{{ languages( { "ja": "ja/DOM/form.submit" } ) }}

diff --git a/files/it/web/api/htmlformelement/target/index.html b/files/it/web/api/htmlformelement/target/index.html new file mode 100644 index 0000000000..c94b8a78f9 --- /dev/null +++ b/files/it/web/api/htmlformelement/target/index.html @@ -0,0 +1,24 @@ +--- +title: HTMLFormElement.target +slug: Web/API/HTMLFormElement/target +translation_of: Web/API/HTMLFormElement/target +--- +
{{APIRef("HTML DOM")}}
+ +

target legge o imposta il contenuto dell'attributo target (per esempio, il frame dove verrà visualizzato l'output del form).

+ +

Sintassi

+ +
stringa = form.target
+form.target =
+stringa
+
+ +

Esempio

+ +
myForm.target = document.frames[1].name;
+
+ +

Specifiche

+ +

DOM Level 2 HTML: target

diff --git a/files/it/web/api/htmliframeelement/index.html b/files/it/web/api/htmliframeelement/index.html new file mode 100644 index 0000000000..4138970a78 --- /dev/null +++ b/files/it/web/api/htmliframeelement/index.html @@ -0,0 +1,455 @@ +--- +title: HTMLIFrameElement +slug: Web/API/HTMLIFrameElement +tags: + - API + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLIFrameElement +--- +
{{APIRef("HTML DOM")}}
+ +

The HTMLIFrameElement interface provides special properties and methods (beyond those of the {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} that specifies the alignment of the frame with respect to the surrounding context.
+
{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}
+
Is a {{domxref("Boolean")}} indicating whether the inline frame is willing to be placed into full screen mode. See Using full-screen mode for details.
+
{{domxref("HTMLIFrameElement.allowPaymentRequest")}}
+
Is a {{domxref("Boolean")}} indicating whether the Payment Request API may be invoked inside a cross-origin iframe.
+
{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}
+
Returns a {{domxref("Document")}}, the active document in the inline frame's nested browsing context.
+
{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}
+
Returns a {{domxref("WindowProxy")}}, the window proxy for the nested browsing context.
+
{{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} that indicates whether to create borders between frames.
+
{{domxref("HTMLIFrameElement.height")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("height", "iframe")}} HTML attribute, indicating the height of the frame.
+
{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} that contains the URI of a long description of the frame.
+
{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} being the height of the frame margin.
+
{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} being the width of the frame margin.
+
{{domxref("HTMLIFrameElement.name")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("name", "iframe")}} HTML attribute, containing a name by which to refer to the frame.
+
{{domxref("HTMLIFrameElement.referrerPolicy")}} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerPolicy", "iframe")}} HTML attribute indicating which referrer to use when fetching the linked resource.
+
{{domxref("HTMLIFrameElement.sandbox")}}
+
Is a {{domxref("DOMSettableTokenList")}} that reflects the {{htmlattrxref("sandbox", "iframe")}} HTML attribute, indicating extra restrictions on the behavior of the nested content.
+
{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} that indicates whether the browser should provide scrollbars for the frame.
+
{{domxref("HTMLIFrameElement.src")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "iframe")}} HTML attribute, containing the address of the content to be embedded.
+
{{domxref("HTMLIFrameElement.srcdoc")}}
+
Is a {{domxref("DOMString")}} that represents the content to display in the frame.
+
{{domxref("HTMLIFrameElement.width")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "iframe")}} HTML attribute, indicating the width of the frame.
+
+ +

Methods

+ +

Inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +

Browser API methods

+ +

To support the requirement of a browser {{HTMLElement("iframe")}}, HTMLIFrameElement has been extended with new methods that give the {{HTMLElement("iframe")}} some super powers. These are non-standard (see {{anch("Browser compatibility")}}.)

+ + + +

The following navigation methods allow navigation through the browsing history of the {{HTMLElement("iframe")}}. They are necessary to be able to implement back, forward, stop, and reload buttons.

+ +
+
{{domxref("HTMLIFrameElement.reload()")}}
+
Allows reloading of the {{HTMLElement("iframe")}} element content.
+
{{domxref("HTMLIFrameElement.stop()")}}
+
Allows stopping of the {{HTMLElement("iframe")}}'s content loading.
+
{{domxref("HTMLIFrameElement.getCanGoBack()")}}
+
Indicates whether it's possible to navigate backwards.
+
{{domxref("HTMLIFrameElement.goBack()")}}
+
Changes the location of the {{HTMLElement("iframe")}} for the previous location in its browsing history.
+
{{domxref("HTMLIFrameElement.getCanGoForward()")}}
+
Indicates whether it's possible to navigate forward.
+
{{domxref("HTMLIFrameElement.goForward()")}}
+
Changes the location of the {{HTMLElement("iframe")}} for the next location in its browsing history.
+
+ +

Management methods

+ +

The next set of methods manage the resources used by a browser {{HTMLElement("iframe")}}. These are especially useful for implementing tabbed browser application.

+ +
+
{{domxref("HTMLIFrameElement.executeScript()")}}
+
Allows a specified script to be executed against a page loaded in the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.purgeHistory()")}}
+
Clears all the resources (cookies, localStorage, cache, etc.) associated with the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.setVisible()")}}
+
Changes the visibility state of a browser {{HTMLElement("iframe")}}. This can influence resource allocation and some function usage such as {{domxref("window.requestAnimationFrame","requestAnimationFrame")}}.
+
{{domxref("HTMLIFrameElement.getVisible()")}}
+
Indicates the current visibility state of the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.setActive()")}}
+
Sets the current {{HTMLElement("iframe")}} as the active frame, which has an effect on how it is prioritized by the process manager.
+
{{domxref("HTMLIFrameElement.getActive()")}}
+
Indicates whether the current browser {{htmlelement("iframe")}} is the currently active frame.
+
+ + + +

The following methods allow direct control of sound in the browser element.

+ +
+
{{domxref("HTMLIFrameElement.getVolume()")}}
+
Gets the current volume of the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.setVolume()")}}
+
Sets the current volume of the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.mute()")}}
+
Mutes any audio playing in the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.unmute()")}}
+
Unmutes any audio playing in the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.getMuted()")}}
+
Indicates whether the browser {{HTMLElement("iframe")}} is currently muted.
+
+ +

Search methods

+ +

New methods are provided to allow programmatic searches of browser {{HTMLElement("iframe")}}s to be carried out.

+ +
+
{{domxref("HTMLIFrameElement.findAll()")}}
+
Searches for a string in a browser {{HTMLElement("iframe")}}'s content; if found, the first instance of the string relative to the caret position will be highlighted.
+
{{domxref("HTMLIFrameElement.findNext()")}}
+
Highlights the next or previous instance of a search result after a {{domxref("HTMLIFrameElement.findAll","findAll()")}} search has been carried out.
+
{{domxref("HTMLIFrameElement.clearMatch()")}}
+
Clears any content highlighted by {{domxref("HTMLIFrameElement.findAll","findAll()")}} or {{domxref("HTMLIFrameElement.findNext","findNext()")}}.
+
+ + + +

In order to manage the browser {{HTMLElement("iframe")}}'s content, many new events were added (see below). The following methods are used to deal with those events:

+ +
+
The {{HTMLElement("iframe")}} gains support for the methods of the {{domxref("EventTarget")}} interface
+
{{domxref("EventTarget.addEventListener","addEventListener()")}}, {{domxref("EventTarget.removeEventListener","removeEventListener()")}}, and {{domxref("EventTarget.dispatchEvent","dispatchEvent()")}}.
+
{{domxref("HTMLIFrameElement.sendMouseEvent()")}}
+
Sends a {{domxref("MouseEvent")}} to the {{HTMLElement("iframe")}}'s content.
+
{{domxref("HTMLIFrameElement.sendTouchEvent()")}}
+
Sends a {{domxref("TouchEvent")}} to the {{HTMLElement("iframe")}}'s content. Note that this method is available for touch enabled devices only.
+
{{domxref("HTMLIFrameElement.addNextPaintListener()")}}
+
Defines a handler to listen for the next {{event("MozAfterPaint")}} event in the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.removeNextPaintListener()")}}
+
Removes a handler previously set with {{domxref("HTMLIFrameElement.addNextPaintListener","addNextPaintListener()")}}.
+
+ +

Utility methods

+ +

Last, there are some utility methods, useful for apps that host a browser {{HTMLElement("iframe")}}.

+ +
+
{{domxref("HTMLIFrameElement.download()")}}
+
Downloads a specified URL, storing it at the specified filename/path.
+
{{domxref("HTMLIFrameElement.getContentDimensions()")}}
+
Retrieves the X and Y dimensions of the content window.
+
{{domxref("HTMLIFrameElement.getManifest()")}}
+
Retrieves the manifest of an app loaded in the browser {{HTMLElement("iframe")}} and returns it as JSON.
+
{{domxref("HTMLIFrameElement.getScreenshot()")}}
+
Takes a screenshot of the browser {{HTMLElement("iframe")}}'s content. This is particularly useful to get thumbnails of tabs in a tabbed browser app.
+
{{domxref("HTMLIFrameElement.getStructuredData()")}}
+
Retrieves any structured microdata (and hCard and hCalendar microformat data) contained in the HTML loaded in the browser {{HTMLElement("iframe")}} and returns it as JSON.
+
{{domxref("HTMLIFrameElement.zoom()")}}
+
Changes the zoom factor of the browser {{HTMLElement("iframe")}}'s content. This is particularly useful for zooming in/out on non-touch-enabled devices.
+
+ +
+
+ + + + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Payment','#paymentrequest-and-iframe-elements','allowPaymentRequest')}}{{Spec2('Payment')}}Adds allowPaymentRequest property.
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Added the referrerPolicy property.
{{SpecName('HTML WHATWG', "the-iframe-element.html#the-iframe-element", "HTMLIFrameElement")}}{{Spec2('HTML WHATWG')}}The following property has been added: allowFullscreen.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}{{Spec2('HTML5 W3C')}}The following properties are now obsolete: scrolling, marginWidth, marginHeight, longDesc, frameBorder, and align.
+ The following properties have been added: srcdoc, sandbox, and contentWindow.
{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}{{Spec2('DOM2 HTML')}}The contentDocument property has been added.
{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
srcdoc{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
sandbox{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(17)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contentDocument{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}8.0[3]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contentWindow{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
allowFullScreen {{experimental_inline}}{{CompatChrome(17)}} {{property_prefix("-webkit")}}[4]{{CompatVersionUnknown}}{{CompatGeckoDesktop(9.0)}} {{property_prefix("-moz")}}
+ {{CompatGeckoDesktop(18.0)}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
referrerPolicy {{experimental_inline}}{{CompatChrome(51)}}{{CompatNo}}{{compatGeckoDesktop(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Browser API methods{{CompatNo}}{{CompatNo}}{{CompatNo}}[5]{{CompatNo}}{{CompatNo}}{{CompatNo}}
allowPaymentRequest{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
srcdoc{{CompatChrome(4)}}{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoMobile(25)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
sandbox{{CompatChrome(4)}}{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoMobile(17)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
seamless {{experimental_inline}}{{CompatChrome(4)}}{{CompatChrome(4)}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contentDocument{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contentWindow{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
allowFullScreen {{experimental_inline}}{{CompatChrome(17)}} {{property_prefix("-webkit")}}[4]{{CompatChrome(17)}} {{property_prefix("-webkit")}}[4]{{CompatVersionUnknown}}{{CompatGeckoMobile(9.0)}} {{property_prefix("-moz")}}
+ {{CompatGeckoMobile(18.0)}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
referrerPolicy {{experimental_inline}}{{CompatChrome(51)}}{{CompatChrome(51)}}{{CompatNo}}{{compatGeckoMobile(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Browser API methods{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
allowPaymentRequest{{CompatNo}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ + + +

See also

+ + diff --git a/files/it/web/api/htmliframeelement/mute/index.html b/files/it/web/api/htmliframeelement/mute/index.html new file mode 100644 index 0000000000..ca7e44107e --- /dev/null +++ b/files/it/web/api/htmliframeelement/mute/index.html @@ -0,0 +1,93 @@ +--- +title: HTMLIFrameElement.mute() +slug: Web/API/HTMLIFrameElement/mute +translation_of: Mozilla/Gecko/Chrome/API/Browser_API/mute +--- +

{{APIRef("HTML DOM")}}{{non-standard_header}}

+ +

Il metodo mute() del {{domxref("HTMLIFrameElement")}} muta qualsiasi audio in riproduzione nel browser {{HTMLElement("iframe")}}.

+ +

Sintassi

+ +
instanceOfHTMLIframeElement.mute();
+ +

Ritorna

+ +

Nulla.

+ +

Parametri

+ +

Nessuno.

+ +

Esempio

+ +
var browser = document.querySelector('iframe');
+
+browser.mute();
+
+ +

Specifica

+ +

Non è parte di nessuna specifica.

+ +

Compatibilità browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Supporto base{{CompatNo}}{{CompatGeckoDesktop(47)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Supporto base{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Supportato solo in codice chrome.

+ +

Vedi anche

+ + diff --git a/files/it/web/api/htmlunknownelement/index.html b/files/it/web/api/htmlunknownelement/index.html new file mode 100644 index 0000000000..079de3d82d --- /dev/null +++ b/files/it/web/api/htmlunknownelement/index.html @@ -0,0 +1,58 @@ +--- +title: HTMLUnknownElement +slug: Web/API/HTMLUnknownElement +tags: + - API + - HTML DOM + - Interfaccia + - Referenza +translation_of: Web/API/HTMLUnknownElement +--- +

{{APIRef("HTML DOM")}}

+ +

L'interfaccia HTMLUnknownElement rappresenta un elemento HTML non valido e deriva dall'interfaccia {{DOMxRef("HTMLElement")}}, ma senza implementare ulteriori proprietà o metodi.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Proprietà

+ +

Nessuna proprietà specifica; eredita proprietà dal suo genitore, {{DOMxRef("HTMLElement")}}.

+ +

Metodi

+ +

Nessuna proprietà specifica; eredita proprietà dal suo genitore, {{DOMxRef("HTMLElement")}}.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2("HTML WHATWG")}}Nessun cambiamento da {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2("HTML5 W3C")}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.HTMLUnknownElement")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/index.html b/files/it/web/api/index.html new file mode 100644 index 0000000000..e5b4b1b744 --- /dev/null +++ b/files/it/web/api/index.html @@ -0,0 +1,17 @@ +--- +title: Riferimento Web API +slug: Web/API +tags: + - API + - Landing + - Riferimento + - Web +translation_of: Web/API +--- +

Le APIs sono dispositivi pronti per coloro che scrivono codice per il Web in JavaScript. Di seguito è riportato un elenco di tutte le interfacce (ovvero tipi di oggetti) che potresti essere in grado di utilizzare durante lo sviluppo della tua app o sito Web. API è l'acronimo di Application Programming Interface, nonché di Application Program Interface. Come parzialmente intuibile dai termini che compongono l'acronimo, le API rappresentano un'interfaccia di programmazione.

+ +
+
{{APIListAlpha}}
+
+ +

 

diff --git a/files/it/web/api/indexeddb_api/index.html b/files/it/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..8512b030bd --- /dev/null +++ b/files/it/web/api/indexeddb_api/index.html @@ -0,0 +1,243 @@ +--- +title: IndexedDB +slug: Web/API/IndexedDB_API +translation_of: Web/API/IndexedDB_API +--- +
+

IndexedDB è una API per la memorizzazione client-side di una considerevole quantità di dati strutturati (inclusi file e blob) e per una ricerca performante su questi dati mediante gli indici. Se Web Storage è utile per memorizzare piccole quantità di dati, non lo è invece per memorizzare grandi quantità di dati strutturati. IndexedDB fornisce la soluzione. Questa è la pagina principale su IndexedDB di MDN — qui vengono forniti link a tutti i riferimenti API e guide all'uso, dettagli di supporto al browser ed alcune spiegazioni dei concetti chiave.

+
+ +

Concetti chiave ed uso

+ +

IndexedDB è un sistema di database transazionale, che inizialmente potrebbe creare confusione se si è abituati a lavorare solo con i database relazionali, ma presto diverrà abbastanza chiaro. IndexedDB permette di memorizzare e recuperare oggetti indicizzati con una chiave. E' necessario specificare lo schema del database, aprire una connessione al proprio database e poi recuperare ed aggiornare i dati attraverso una serie di transazioni.

+ + + +
+

Nota: Come molte soluzioni web storage, IndexedDB segue una same-origin policy. Quindi mentre si può accedere ai dati memorizzati sotto un dominio, non è possibile accedere ai dati attraverso domini differenti.

+
+ +

Sincrono e asincrono

+ +

IndexedDB include sia una API asincrona che una API sincrona. La API asincrona può essere usata in molti casi, incluso WebWorkers, mentre la API sincrona è designata ad essere utilizzata solo con Web Workers e sarà usata molto raramente.

+ +
+

Nota: Attualmente, nessuno dei principali browser supporta la API sincrona.

+
+ +

Limiti di memorizzazione

+ +

Non c'è alcun limite alla dimensione di un singolo elemento del database, tuttavia ci potrebbe essere un limite ad ogni dimensione complessiva del database IndexedDB. Questo limite (ed il modo con cui l'interfaccia utente lo supporterà) potrebbe variare da un browser ad un altro:

+ + + +

Asynchronous API

+ +

The asynchronous API methods return without blocking the calling thread. To get asynchronous access to a database, call open() on the indexedDB attribute of a window object. This method returns an {{domxref("IDBRequest")}} object; asynchronous operations communicate to the calling application by firing events on {{domxref("IDBRequest")}} objects.

+ +

Connecting to a database

+ +
+
{{domxref("IDBEnvironment")}}
+
Provides access to a client-side database. It is implemented by the {{ domxref("window") }} and {{ domxref("worker") }} objects.
+
{{domxref("IDBFactory")}}
+
Provides access to a database. This is the interface implemented by the global object indexedDB and is therefore the entry point for the API.
+
{{domxref("IDBOpenDBRequest")}}
+
Represents a request to open a database.
+
{{domxref("IDBDatabase")}}
+
Represents a connection to a database. It's the only way to get a transaction on the database.
+
+ +

Accessing results of database requests

+ +
+
{{domxref("IDBRequest")}}
+
Provides access to results of asynchronous requests to databases and database objects. It is what you get when you call an asynchronous method.
+
+ +

Retrieving and modifying data

+ +
+
{{domxref("IDBTransaction")}}
+
Represents a transaction. You create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or write) that you want.
+
{{domxref("IDBObjectStore")}}
+
Represents an object store.
+
{{domxref("IDBIndex")}}
+
Provides access to the metadata of an index.
+
{{domxref("IDBCursor")}}
+
Iterates over object stores and indexes.
+
{{domxref("IDBCursorWithValue")}}
+
Iterates over object stores and indexes and returns the cursor's current value.
+
{{domxref("IDBKeyRange")}}
+
Defines a range of keys.
+
+ +

Deprecated interfaces

+ +

An early version of the specification also defined these now removed interfaces. They are still documented in case you need to update previously written code:

+ +
+
{{domxref("IDBVersionChangeRequest")}}
+
Represents a request to change the version of a database. The way to change the version of the database has since changed (by calling {{domxref("IDBFactory.open")}} without also calling {{domxref("IDBDatabase.setVersion")}}), and the interface {{domxref("IDBOpenDBRequest")}} now has the functionality of the removed {{domxref("IDBVersionChangeRequest")}}.
+
{{domxref("IDBDatabaseException")}}  {{ obsolete_inline() }}
+
Represents exception conditions that can be encountered while performing database operations.
+
+ +

Synchronous API

+ +
+

Important: This is a reminder that the synchronous version of IndexedDB is not yet implemented in any browser.

+
+ +

To get synchronous access to a database, call open() on the Unimplemented indexedDBSync attribute of a worker object. This returns an IDBDatabaseSync object, which enables you to create, open, and remove object stores and indexes, set the version of the database, and create transactions.

+ + + +

Examples

+ + + +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Asynchronous API +

11.0 {{ property_prefix("webkit") }}
+ 24

+ 		{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1017{{ CompatNo() }}
Synchronous API
+ (used with WebWorkers)		{{ CompatNo() }}{{ CompatNo() }}
+ See {{ bug(701634) }}		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Asynchronous API4.4{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1017{{ CompatNo() }}
+
+ +
+

Note: Some browsers don't yet support IndexedDB but do support WebSQL, most notably Safari/Webkit on desktop and iOS. One way around this problem is to use an IndexedDB Polyfill or Shim that falls back to WebSQL or even localStorage for non-supporting browsers. The best available polyfill at present is localForage.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}}{{Spec2('IndexedDB')}} 
+ + diff --git a/files/it/web/api/mutationobserver/index.html b/files/it/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..6c15916a56 --- /dev/null +++ b/files/it/web/api/mutationobserver/index.html @@ -0,0 +1,102 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - Cambiamenti del DOM + - DOM + - DOM Reference + - Mutation Observer + - Mutation Observer e resize + - resize + - resize listener +translation_of: Web/API/MutationObserver +--- +
{{APIRef("DOM WHATWG")}}
+ +

L'interfaccia {{domxref("MutationObserver")}} offre la possibilità di monitorare le mutazioni subite dall'alberatura del DOM. È stata progettata per sostituire i Mutation Events che fanno parte del DOM3 Events specification.

+ +

Costruttore

+ +
+
{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}
+
Crea e restituisce un nuovo MutationObserver che invocherà una funzione di callback specificata alla mutazione del DOM.
+
+ +

Metodi

+ +
+
{{domxref("MutationObserver.disconnect", "disconnect()")}}
+
Interrompe la ricezione da parte dell'istanza MutationObserver di notifiche sulla mutazione del DOM fino a quando verrà nuovamente invocato {{domxref("MutationObserver.observe", "observe()")}}
+
{{domxref("MutationObserver.observe", "observe()")}}
+
Configura il MutationObserver affinché possa ricevere notifiche attraverso la funzione di callback specificata quando avviene una mutazione del DOM che corrisponda alle opzioni impostate.
+
{{domxref("MutationObserver.takeRecords", "takeRecords()")}}
+
Rimuove tutte le notifiche in coda sul MutationObserver e le restituisce come nuovo  {{jsxref("Array")}} di oggetti {{domxref("MutationRecord")}}
+
+ +

Mutation Observer & customizzazione del resize event & demo

+ +

https://codepen.io/webgeeker/full/YjrZgg/

+ +

Esempio

+ +

L'esempio seguente è un adattamento di questo post

+ +
// Seleziona il nodo di cui monitare la mutazione
+var targetNode = document.getElementById('some-id');
+
+// Opzioni per il monitoraggio (quali mutazioni monitorare)
+var config = { attributes: true, childList: true, subtree: true };
+
+// Funzione di callback da eseguire quando avvengono le mutazioni
+var callback = function(mutationsList, observer) {
+    for(var mutation of mutationsList) {
+        if (mutation.type == 'childList') {
+            console.log('A child node has been added or removed.');
+        }
+        else if (mutation.type == 'attributes') {
+            console.log('The ' + mutation.attributeName + ' attribute was modified.');
+        }
+    }
+};
+
+// Creazione di un'istanza di monitoraggio collegata alla funzione di callback
+var observer = new MutationObserver(callback);
+
+// Inizio del monitoraggio del nodo target riguardo le mutazioni configurate
+observer.observe(targetNode, config);
+
+// Successivamente si può interrompere il monitoraggio
+observer.disconnect();
+ +

Leggi pure

+ + + +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }} 
+ +

Compatibilità dei Browser

+ + + +

{{Compat("api.MutationObserver")}}

diff --git a/files/it/web/api/navigator/cookieenabled/index.html b/files/it/web/api/navigator/cookieenabled/index.html new file mode 100644 index 0000000000..4905b8deb8 --- /dev/null +++ b/files/it/web/api/navigator/cookieenabled/index.html @@ -0,0 +1,83 @@ +--- +title: Navigator.cookieEnabled +slug: Web/API/Navigator/cookieEnabled +translation_of: Web/API/Navigator/cookieEnabled +--- +

{{ ApiRef("HTML DOM") }}

+ +

Riassunto

+ +

Restituisce un valore booleano che indica se i cookie abilitati o meno (sola lettura).

+ +

Sintassi

+ +
var cookieEnabled = navigator.cookieEnabled;
+
+ + + +

Example

+ +
if (!navigator.cookieEnabled) {
+  // dire all'utente che l'attivazione dei cookie rende le pagine web più utile}
+
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic supportYes{{ CompatGeckoDesktop(1.0) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile(1.0) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Note di Gecko

+ +

Prima di Gecko 8.0 {{ geckoRelease("8.0") }}, window.navigator.cookieEnabled potrebbe segnalare il risultato errato se un'eccezione del sito è stata in vigore per la pagina in cui è stato eseguito il controllo. Questo è stato risolto.

+ +

Specifications

+ +

HTML WHATWG

diff --git a/files/it/web/api/navigator/credentials/index.html b/files/it/web/api/navigator/credentials/index.html new file mode 100644 index 0000000000..107fe4a123 --- /dev/null +++ b/files/it/web/api/navigator/credentials/index.html @@ -0,0 +1,57 @@ +--- +title: credentials +slug: Web/API/Navigator/credentials +tags: + - API + - CredentialContainer + - Proprietà + - Riferimento + - credentials +translation_of: Web/API/Navigator/credentials +--- +

{{SeeCompatTable}}{{APIRef("")}}

+ +

La proprietà credentials dell'interfaccia {{domxref("Navigator")}} restituisce un interfaccia {{domxref("CredentialsContainer")}}, la quale espone metodi utili per fare request-credentials. L'interfaccia {{domxref("CredentialsContainer")}} inoltre notifica louser agent quando un avviene un evento di interesse, come, ad esempio, un sign-in o un sign-out avvenuto con successo. Questa interfaccia può essere utilizzata per scoprire la presenza della funzionalità.

+ +

Sintassi

+ +
var credentialsContainer = navigator.credentials
+ +

Value

+ +

Un'interfaccia {{domxref("CredentialsContainer")}}.

+ +

Esempio

+ +
if ('credentials' in navigator) {
+  navigator.credentials.get({password: true})
+  .then(function(creds) {
+    // Usa le credenziali.
+  });
+} else {
+  // Gestisci il sign-in alternativo, senza credentials.
+};
+
+ +

Specifica

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Definizione iniziale.
+ +

Browser compatibili

+ + + +

{{Compat("api.Navigator.credentials")}}

diff --git a/files/it/web/api/navigator/index.html b/files/it/web/api/navigator/index.html new file mode 100644 index 0000000000..6ef2055b7a --- /dev/null +++ b/files/it/web/api/navigator/index.html @@ -0,0 +1,119 @@ +--- +title: Navigator +slug: Web/API/Navigator +translation_of: Web/API/Navigator +--- +

{{ apiref() }}

+ +

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.

+ +

A Navigator object can be retrieved using the read-only {{domxref("Window.navigator")}} property.

+ +

Properties

+ +

Doesn't inherit any property, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorGeolocation")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NetworkInformation")}}.

+ +

Standard

+ +
+
{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}
+
Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.
+
{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.
+
{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}
+
Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.
+
{{domxref("Navigator.battery")}} {{readonlyInline}}
+
Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.
+
{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}
+
Provides a {{domxref("Connection")}} with information about the network connection of a device.
+
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
+
Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.
+
{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The null value is returned when this is unknown.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.
+
{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the browser is working online.
+
{{domxref("Navigator.oscpu")}}
+
Returns a string that represents the current operating system.
+
{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.
+
{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.
+
{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}
+
Always returns 'Gecko', on any browser. This property is kept only for compatibility purpose.
+
{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}
+
Returns the user agent string for the current browser.
+
{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}
+
Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the associated document.
+
+ +

Non-standard

+ +
+
{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}
+
Returns the build identifier of the browser (e.g., "2006090803").
+
{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}
+
Returns a boolean indicating whether cookies are enabled in the browser or not.
+
{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}
+
Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.
+
{{domxref("navigator.id")}} {{non-standard_inline}}
+
Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for BrowserID to your web site.
+
{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}
+
Returns an {{domxref("window.navigator.mozApps", "Apps")}} object you can use to install, manage, and control Open Web apps.
+
{{domxref("Navigator.mozAudioChannelManager", "navigator.mozAudioChannelManager")}} {{non-standard_inline}}
+
The navigator.mozAudioChannelManager object provides access to the {{domxref("mozAudioChannelManager")}} interface, which is used to manage your Firefox OS device's audio channels, including setting what channel's volume to affect when the volume buttons are pressed inside a particular app.
+
{{domxref("window.navigator.mozNotification","navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}
+ {{domxref("window.navigator.webkitNotification","navigator.webkitNotification")}}
+
Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.
+
{{domxref("navigator.mozSocial")}} {{non-standard_inline}}
+
The Object, returned by the navigator.mozSocial property, is available within the social media provider's panel to provide functionality it may need.
+
{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}
+
Returns the build number of the current browser (e.g., "20060909").
+
{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}
+
Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".
+
{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}
+
Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.
+
{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}
+
Returns the vendor name of the current browser (e.g., "Netscape6").
+
{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}
+
Returns the vendor version number (e.g. "6.1").
+
navigator.webkitPointer {{non-standard_inline}}
+
Returns a PointerLock object for the Mouse Lock API.
+
+ +

Methods

+ +

Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NavigatorStorageUtils")}}.

+ +

Standard

+ +
+
{{domxref("NavigatorUserMedia.getUserMedia()")}}
+
After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.
+
{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}
+
Allows web sites to register themselves as a possible handler for a given MIME type.
+
{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}
+
Allows web sites to register themselves as a possible handler for a given protocol.
+
{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}
+
Returns false. JavaScript taint/untaint functions removed in JavaScript 1.2.
+
{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}
+
Causes vibration on devices with support for it. Does nothing if vibration support isn't available.
+
+ +

Non standard

+ +
+
{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}
+
Lets code check to see if the document at a given URI is available without using the network.
+
{{domxref("window.navigator.mozPay", "navigator.mozPay")}} {{non-standard_inline}}
+
Allows in-app payment.
+
{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}
+
Sets a user preference. This method is only available to privileged code and is obsolete; you should use the XPCOM Preferences API instead.
+
{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}
+
Request a wake lock for a resource. A wake lock prevents a specific part of a device from being turned off automatically.
+
diff --git a/files/it/web/api/navigatorconcurrenthardware/index.html b/files/it/web/api/navigatorconcurrenthardware/index.html new file mode 100644 index 0000000000..10fb1576ca --- /dev/null +++ b/files/it/web/api/navigatorconcurrenthardware/index.html @@ -0,0 +1,56 @@ +--- +title: NavigatorConcurrentHardware +slug: Web/API/NavigatorConcurrentHardware +translation_of: Web/API/NavigatorConcurrentHardware +--- +

 

+ +

Il NavigatorConcurrentHardware aggiunge all'interfaccia delle caratteristiche che permettono ai contenuti Web di determinare quanti processori logici sono a disposizione dell'utente, in modo tale da ottimizzare le operazioni di contenuti e Web apps che possano usufruire al meglio la CPU dell'utente.

+ +

Il numero dei processori logici del core serve a misurare il numero di threads che possono essere di fatto eseguiti per volta, senza che questi condividano la stesse CPU. Oggigiorno i computer hanno diversi core nella loro CPU(2 o 4 cores). Ogni core è in grado di eseguire più di un thread per volta, avvalendosi di tecniche avanzate di scheduling. Una CPU a 4 cores può restituire dunque 8 threads. Tuttavia, il browser può scegliere di ridurre questo numero in modo tale da rappresentare in maniera più accurata il numero di Worker eseguiti per volta.

+ +

Proprietà

+ +
+
NavigatorConcurrentHardware.hardwareConcurrency 
+
Restituisce il numero di processori logici disponibili allo user agent. Il valore sarà sempre almeno pari a 1 e restituirà 1 se non è possibile determinare il numero di processori logici. 
+
+ +

Metodi

+ +

Il mixin di NavigatorConcurrentHardware non ha metodi.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
HTML Living Standard
+ The definition of 'NavigatorConcurrentHardware' in that specification.		Living Standard +

Definizione Iniziale

+
+ +

Browser compatibility

+ + + +

{{Compat("api.NavigatorConcurrentHardware")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/node/appendchild/index.html b/files/it/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..acef4909a3 --- /dev/null +++ b/files/it/web/api/node/appendchild/index.html @@ -0,0 +1,99 @@ +--- +title: Node.appendChild() +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Node + - Referenza + - metodo +translation_of: Web/API/Node/appendChild +--- +
{{APIRef("DOM")}}
+ +

Il metodo Node.appendChild() aggiunge un nodo alla fine dell'elenco di figli di un nodo genitore specificato. Se il figlio dato è un riferimento a un nodo esistente nel documento, appendChild() lo sposta dalla sua posizione corrente alla nuova posizione (non è necessario rimuovere il nodo dal suo nodo padre prima di aggiungerlo ad un altro nodo).

+ +

Ciò significa che un nodo non può essere in due punti del documento contemporaneamente. Quindi se il nodo ha già un genitore, il nodo viene prima rimosso, quindi aggiunto alla nuova posizione. Il metodo {{domxref("Node.cloneNode()")}} può essere usato per fare una copia del nodo prima di aggiungerlo sotto il nuovo genitore. Si noti che le copie eseguite con cloneNode non verranno automaticamente mantenute sincronizzate.

+ +

Se il figlio dato è un {{domxref("DocumentFragment")}}, l'intero contenuto di {{domxref("DocumentFragment")}} viene spostato nell'elenco secondario del nodo genitore specificato.

+ +

Sintassi

+ +
element.appendChild(aChild);
+ +

Parametri

+ +
+
aChild
+
Il nodo da aggiungere al nodo genitore dato (comunemente un elemento).
+
+ +

Valore di ritorno

+ +

Il valore restituito è il figlio aggiunto tranne quando il figlio dato è un {{domxref("DocumentFragment")}}, nel qual caso viene restituito il {{domxref("DocumentFragment")}}.

+ +

Appunti

+ +

Il concatenamento potrebbe non funzionare come previsto a causa di appendChild() che restituisce l'elemento figlio:

+ +
var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));
+ +

Sets aBlock to <b></b> only, which is probably not what you want.

+ +

Esempio

+ +
// Crea un nuovo elemento di paragrafo e aggiungilo alla fine del corpo del documento
+var p = document.createElement("p");
+document.body.appendChild(p);
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento da {{SpecName("DOM3 Core")}}.
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName("DOM2 Core")}}.
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM2 Core')}}Nessun cambiamento da {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM1')}}Definizione inziale.
+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Node.appendChild")}}

+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/node/index.html b/files/it/web/api/node/index.html new file mode 100644 index 0000000000..97fdc9ed89 --- /dev/null +++ b/files/it/web/api/node/index.html @@ -0,0 +1,368 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - DOM Reference + - Interface + - NeedsTranslation + - Node + - Reference + - TopicStub +translation_of: Web/API/Node +--- +
{{APIRef("DOM")}}
+ +

Node is an interface from which a number of DOM API object types inherit. It allows those types to be treated similarly; for example, inheriting the same set of methods, or being tested in the same way.

+ +

The following interfaces all inherit from Node’s methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("Attr")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}

+ +

These interfaces may return null in certain cases where the methods and properties are not relevant. They may throw an exception — for example when adding children to a node type for which no children can exist.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

Inherits properties from its parents {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.baseURI")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last '/'.
+
{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}
+
(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.
+
{{domxref("Node.childNodes")}} {{readonlyInline}}
+
Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the Node change, the {{domxref("NodeList")}} object is automatically updated.
+
{{domxref("Node.firstChild")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the first direct child node of the node, or null if the node has no child.
+
{{domxref("Node.isConnected")}} {{readonlyInline}}
+
Returns a boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{domxref("Document")}} object in the case of the normal DOM, or the {{domxref("ShadowRoot")}} in the case of a shadow DOM.
+
{{domxref("Node.lastChild")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the last direct child node of the node, or null if the node has no child.
+
{{domxref("Node.nextSibling")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the next node in the tree, or null if there isn't such node.
+
{{domxref("Node.nodeName")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the name of the Node. The structure of the name will differ with the node type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like 'audio' for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the '#text' string, or a {{domxref("Document")}} node will have the '#document' string.
+
{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}
+
A {{ Interface("nsIPrincipal") }} representing the node principal.
+
{{domxref("Node.nodeType")}}{{readonlyInline}}
+
Returns an unsigned short representing the type of the node. Possible values are: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameValue
ELEMENT_NODE1
ATTRIBUTE_NODE {{deprecated_inline()}}2
TEXT_NODE3
CDATA_SECTION_NODE {{deprecated_inline()}}4
ENTITY_REFERENCE_NODE {{deprecated_inline()}}5
ENTITY_NODE {{deprecated_inline()}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{deprecated_inline()}}12
+
+
{{domxref("Node.nodeValue")}}
+
Returns / Sets the value of the current node
+
{{domxref("Node.ownerDocument")}} {{readonlyInline}}
+
Returns the {{domxref("Document")}} that this node belongs to. If the node is itself a document, returns null.
+
{{domxref("Node.parentNode")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns null.
+
{{domxref("Node.parentElement")}} {{readonlyInline}}
+
Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns null.
+
{{domxref("Node.previousSibling")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the previous node in the tree, or null if there isn't such node.
+
{{domxref("Node.textContent")}}
+
Returns / Sets the textual content of an element and all its descendants.
+
+ +

Deprecated properties

+ +
+
{{domxref("Node.rootNode")}} {{readOnlyInline}} {{deprecated_inline}}
+
Returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by {{domxref("Node.getRootNode()")}}.
+
+ +

Obsolete properties

+ +
+
{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. +
+

Note: In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{gecko_minversion_inline("1.9.2")}}

+
+
+
{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
+
The namespace URI of this node, or null if it is no namespace. +
+

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml/ namespace in both HTML and XML trees. {{gecko_minversion_inline("1.9.2")}}

+
+
+
{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}
+
Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or null if no prefix is specified.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.appendChild()")}}
+
Adds the specified childNode argument as the last child to the current node.
+ If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.
+
{{domxref("Node.cloneNode()")}}
+
Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.
+
{{domxref("Node.compareDocumentPosition()")}}
+
Compares the position of the current node against another node in any other document.
+
{{domxref("Node.contains()")}}
+
Returns a {{jsxref("Boolean")}} value indicating whether a node is a descendant of a given node or not.
+
{{domxref("Node.getRootNode()")}}
+
Returns the context object's root which optionally includes the shadow root if it is available. 
+
{{domxref("Node.hasChildNodes()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has any child nodes, or not.
+
{{domxref("Node.insertBefore()")}}
+
Inserts a {{domxref("Node")}} before the reference node as a child of a specified parent node.
+
{{domxref("Node.isDefaultNamespace()")}}
+
Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of true if the namespace is the default namespace on the given node or false if not.
+
{{domxref("Node.isEqualNode()")}}
+
Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.
+
{{domxref("Node.isSameNode()")}}
+
Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).
+
{{domxref("Node.lookupPrefix()")}}
+
Returns a {{domxref("DOMString")}} containing the prefix for a given namespace URI, if present, and null if not. When multiple prefixes are possible, the result is implementation-dependent.
+
{{domxref("Node.lookupNamespaceURI()")}}
+
Accepts a prefix and returns the namespace URI associated with it on the given node if found (and null if not). Supplying null for the prefix will return the default namespace.
+
{{domxref("Node.normalize()")}}
+
Clean up all the text nodes under this element (merge adjacent, remove empty).
+
{{domxref("Node.removeChild()")}}
+
Removes a child node from the current element, which must be a child of the current node.
+
{{domxref("Node.replaceChild()")}}
+
Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.
+
+ +

Obsolete methods

+ +
+
{{domxref("Node.getFeature()")}} {{obsolete_inline}}
+
 
+
{{domxref("Node.getUserData()")}} {{obsolete_inline}}
+
Allows a user to get some {{domxref("DOMUserData")}} from the node.
+
{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.
+
{{domxref("Node.isSupported()")}} {{obsolete_inline}}
+
Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.
+
{{domxref("Node.setUserData()")}} {{obsolete_inline}}
+
Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.
+
+ +

Examples

+ +

Remove all children nested within a node

+ +
Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};
+ +

Sample usage

+ +
/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();
+ +

Recurse through child nodes

+ +

The following function calls a function recursively for each node contained by a root node (including the root itself):

+ +
function eachNode(rootNode, callback){
+	if(!callback){
+		var nodes = [];
+		eachNode(rootNode, function(node){
+			nodes.push(node);
+		});
+		return nodes;
+	}
+
+	if(false === callback(rootNode))
+		return false;
+
+	if(rootNode.hasChildNodes()){
+		var nodes = rootNode.childNodes;
+		for(var i = 0, l = nodes.length; i < l; ++i)
+			if(false === eachNode(nodes[i], callback))
+				return;
+	}
+}
+ +

Syntax

+ +
eachNode(rootNode, callback);
+ +

Description

+ +

Recursively calls a function for each descendant node of rootNode (including the root itself).

+ +

If callback is omitted, the function returns an {{jsxref("Array")}} instead, which contains rootNode and all nodes contained therein.

+ +

If callback is provided, and it returns {{jsxref("Boolean")}} false when called, the current recursion level is aborted, and the function resumes execution at the last parent's level. This can be used to abort loops once a node has been found (such as searching for a text node that contains a certain string).

+ +

Parameters

+ +
+
rootNode
+
The Node object whose descendants will be recursed through.
+
callback
+
An optional callback function that receives a Node as its only argument. If omitted, eachNode returns an {{jsxref("Array")}} of every node contained within rootNode (including the root itself).
+
+ +

Sample usage

+ +

The following example prints the textContent properties of each <span> tag in a <div> element named "box":

+ +
<div id="box">
+	<span>Foo</span>
+	<span>Bar</span>
+	<span>Baz</span>
+</div>
+ +
var box = document.getElementById("box");
+eachNode(box, function(node){
+	if(null != node.textContent){
+		console.log(node.textContent);
+	}
+});
+ +

The following strings will be displayed in the user's console:

+ +
"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"
+ +
+

Note: Whitespace forms part of a {{domxref("Text")}} node, meaning indentation and newlines form separate Text between the Element nodes.

+
+ +

Realistic usage

+ +

The following demonstrates a real-world use of the eachNode function: searching for text on a web-page. We use a wrapper function named grep to do the searching:

+ +
function grep(parentNode, pattern){
+	var matches = [];
+	var endScan = false;
+
+	eachNode(parentNode, function(node){
+		if(endScan)
+			return false;
+
+		// Ignore anything which isn't a text node
+		if(node.nodeType !== Node.TEXT_NODE)
+			return;
+
+		if("string" === typeof pattern){
+			if(-1 !== node.textContent.indexOf(pattern))
+				matches.push(node);
+		}
+		else if(pattern.test(node.textContent)){
+			if(!pattern.global){
+				endScan = true;
+				matches = node;
+			}
+			else matches.push(node);
+		}
+	});
+
+	return matches;
+}
+ +

For example, to find {{domxref("Text")}} nodes that contain typos:

+ +
var typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"];
+var pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi");
+var mistakes = grep(document.body, pattern);
+console.log(mistakes);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Removed the following properties: attributes, namespaceURI, prefix, and localName.
+ Removed the following methods: isSupported(), hasAttributes(), getFeature(), setUserData(), and getUserData().
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM3 Core')}}The methods insertBefore(), replaceChild(), removeChild(), and appendChild() returns one more kind of error (NOT_SUPPORTED_ERR) if called on a {{domxref("Document")}}.
+ The normalize() method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.
+ Added the following methods: compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), and getUserData().
+ Added the following properties: baseURI and textContent.
{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM2 Core')}}The ownerDocument property was slightly modified so that {{domxref("DocumentFragment")}} also returns null.
+ Added the following properties: namespaceURI, prefix, and localName.
+ Added the following methods: normalize(), isSupported() and hasAttributes().
{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Node")}}

diff --git a/files/it/web/api/node/lastchild/index.html b/files/it/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..34804c5644 --- /dev/null +++ b/files/it/web/api/node/lastchild/index.html @@ -0,0 +1,59 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +translation_of: Web/API/Node/lastChild +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura Node.lastChild restituisce l'ultimo figlio del nodo. Se il suo genitore è un elemento, allora il bambino è generalmente un nodo di elemento, un nodo di testo o un nodo di commento. Restituisce null se non ci sono elementi figli.

+ +

Sintassi

+ +
var childNode = node.lastChild;
+
+ +

Esempio

+ +
var tr = document.getElementById("row1");
+var corner_td = tr.lastChild;
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM3 Core')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.lastChild")}}

diff --git a/files/it/web/api/node/nextsibling/index.html b/files/it/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..f2355a6402 --- /dev/null +++ b/files/it/web/api/node/nextsibling/index.html @@ -0,0 +1,101 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +translation_of: Web/API/Node/nextSibling +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura Node.nextSibling restituisce il nodo immediatamente successivo a quello specificato nei {{domxref("Node.childNodes","childNodes")}}, del loro genitore o restituisce null se il nodo specificato è l'ultimo figlio nell'elemento genitore.

+ +

Sintassi

+ +
nextNode = node.nextSibling
+
+ +

Appunti

+ +
+

I browser basati su Gecko inseriscono nodi di testo in un documento per rappresentare gli spazi bianchi nel codice sorgente. Pertanto, un nodo ottenuto, ad esempio, utilizzando Node.firstChild o Node.previousSibling può fare riferimento a un nodo di testo di spazi bianchi piuttosto che all'elemento effettivo che l'autore intendeva ottenere.

+ +

Vedi Whitespace in the DOM e W3C DOM 3 FAQ: Why are some Text nodes empty? per maggiori informazioni.

+
+ +

{{domxref("Element.nextElementSibling")}} può essere usato per ottenere l'elemento successivo saltando eventuali nodi di spazi vuoti, altro testo tra elementi o commenti.

+ +

Esempio

+ +
<div id="div-1">Here is div-1</div>
+<div id="div-2">Here is div-2</div>
+
+<script>
+var el = document.getElementById('div-1').nextSibling,
+    i = 1;
+
+console.group('Siblings of div-1:');
+
+while (el) {
+  console.log(i, '. ', el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+console.groupEnd();
+</script>
+
+/**************************************************
+  The console displays the following:
+
+     Siblings of div-1
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/
+
+ +

Nell'esempio precedente, i nodi, #text sono inseriti nel DOM in cui si verifica lo spazio bianco tra i tag (ad esempio dopo il tag di chiusura di un elemento e prima del tag di apertura del successivo).

+ +

La possibile inclusione di nodi di testo deve essere consentita quando si attraversa il DOM utilizzando nextSibling. Vedi le risorse nella sezione Appunti.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-nextsibling', 'Node.nextSibling')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-6AC54C2F', 'Node.nextSibling')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#attribute-nextSibling', 'Node.nextSibling')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.nextSibling")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/node/previoussibling/index.html b/files/it/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..735433da9e --- /dev/null +++ b/files/it/web/api/node/previoussibling/index.html @@ -0,0 +1,81 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +translation_of: Web/API/Node/previousSibling +--- +
+
{{APIRef("DOM")}}
+
+ +

La proprietà di sola lettura Node.previousSibling restituisce il nodo immediatamente precedente a quello specificato nell'elenco {{domxref("Node.childNodes", "childNodes")}} del genitore, o null se il nodo specificato è il primo in tale elenco.

+ +

Sintassi

+ +
previousNode = node.previousSibling;
+
+ +

Esempio

+ +
<img id="b0">
+<img id="b1">
+<img id="b2">
+ +
console.log(document.getElementById("b1").previousSibling); // <img id="b0">
+console.log(document.getElementById("b2").previousSibling.id); // "b1"
+
+ +

Appunti

+ +
+

I browser basati su Gecko inseriscono nodi di testo in un documento per rappresentare gli spazi bianchi nel codice sorgente. Pertanto, un nodo ottenuto, ad esempio, utilizzando Node.firstChild o Node.previousSibling può fare riferimento a un nodo di testo di spazi bianchi piuttosto che all'elemento effettivo che l'autore intendeva ottenere.

+ +

Vedi Whitespace in the DOM e W3C DOM 3 FAQ: Why are some Text nodes empty? per maggiori informazioni.

+
+ +

Per navigare nella direzione opposta attraverso l'elenco dei nodi secondari usa Node.nextSibling.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-previousSibling', 'Node.previousSibling')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM3 Core', 'core.html#ID-640FB3C8', 'Node.previousSibling')}}{{Spec2('DOM3 Core')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-640FB3C8', 'Node.previousSibling')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#attribute-previousSibling', 'Node.previousSibling')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.previousSibling")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/nodelist/foreach/index.html b/files/it/web/api/nodelist/foreach/index.html new file mode 100644 index 0000000000..5d8f5d0088 --- /dev/null +++ b/files/it/web/api/nodelist/foreach/index.html @@ -0,0 +1,125 @@ +--- +title: NodeList.prototype.forEach() +slug: Web/API/NodeList/forEach +tags: + - DOM + - Iterabile + - NodeList + - Referenza + - Web + - metodo +translation_of: Web/API/NodeList/forEach +--- +

{{APIRef("DOM")}}

+ +

Il metodo forEach() dell'interfaccia {{domxref("NodeList")}} chiama il callback fornito nel parametro una volta per ogni coppia di valori nell'elenco, in ordine di inserimento.

+ +

Sintassi

+ +
NodeList.forEach(callback[, thisArg]);
+
+ +

Parametri

+ +
+
callback
+
Funzione da eseguire per ciascun elemento, eventualmente con 3 argomenti: +
+
currentValue
+
L'elemento corrente in elaborazione nella NodeList.
+
currentIndex
+
L'indice dell'elemento corrente in fase di elaborazione nella NodeList.
+
listObj
+
La NodeList a cui viene applicato forEach().
+
+
+
thisArg {{Optional_inline}}
+
Valore da utilizzare come {{jsxref("this")}} quando viene eseguito callback.
+
+ +

Valore di ritorno

+ +

{{jsxref('undefined')}}.

+ +

Eccezioni

+ +

Nessuna.

+ +

Esempio

+ +
var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+list.forEach(
+  function(currentValue, currentIndex, listObj) {
+    console.log(currentValue + ', ' + currentIndex + ', ' + this);
+  },
+  'myThisArg'
+);
+ +

ritorna:

+ +
[object HTMLParagraphElement], 0, myThisArg
+[object Text], 1, myThisArg
+[object HTMLSpanElement], 2, myThisArg
+ +

Polyfill

+ +

Questo {{Glossary("Polyfill","polyfill")}} aggiunge compatibilità a tutti i browser che supportano ES5:

+ +
if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = function (callback, thisArg) {
+        thisArg = thisArg || window;
+        for (var i = 0; i < this.length; i++) {
+            callback.call(thisArg, this[i], i, this);
+        }
+    };
+}
+ +

OPPURE

+ +
if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+}
+ +

Il comportamento sopra riportato indica il numero di browser che implementa effettivamente NodeList.prototype.forEach (Chrome, ad esempio).

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("WebIDL", "#es-forEach", "forEach")}}{{Spec2("WebIDL")}}Definisce forEach sulle dichiarazioni iterable
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.NodeList.forEach")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/nodelist/index.html b/files/it/web/api/nodelist/index.html new file mode 100644 index 0000000000..4b18f62d63 --- /dev/null +++ b/files/it/web/api/nodelist/index.html @@ -0,0 +1,124 @@ +--- +title: NodeList +slug: Web/API/NodeList +tags: + - API + - DOM + - Interfaccia + - NodeList +translation_of: Web/API/NodeList +--- +
{{APIRef("DOM")}}
+ +

Gli oggetti NodeList sono un insieme di nodi, di solito restituiti da proprietà come {{domxref("Node.childNodes")}} ed il metodo {{domxref("document.querySelectorAll()")}}.

+ +
+

Nonostante NodeList non sia un Array, è possibile iterare su esso usando forEach(). Può anche essere convertito in un vero Array usando Array.from().

+ +

Tuttavia, alcuni browser meno recenti non hanno implementato NodeList.forEach() né Array.from(). Questo può essere aggirato usando {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} — vedi l'esempio di questo documento.

+
+ +

In alcuni casi, la NodeList è dinamica, ciò significa che i cambiamenti nel DOM si riflettono sulla collezione. Per esempio, {{domxref("Node.childNodes")}} è dinamico:

+ +
var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // assume "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // dovrebbe produrre "3"
+
+ +

In altri casi, la NodeList è statica, ciò vuol dire che il contenuto della collezione non è influenzato da quelli nel DOM. {{domxref("document.querySelectorAll()")}} restituisce una NodeList statica.

+ +

È bene tenere in mente questa distinzione quando si sceglie di iterare sugli elementi nella NodeList, ed in particolare al modo in cui si salva la lunghezza della lista.

+ +

Proprietà

+ +
+
{{domxref("NodeList.length")}}
+
Il numero dei nodi nella NodeList.
+
+ +

Metodi

+ +
+
{{domxref("NodeList.item()")}}
+
Restituisce un elemento nell'elenco per il suo indice, o null se l'indice è fuori misura.
+
Un'alternativa all'accesso a nodeList[i] (che invece restituisce undefined quando i è fuori dai limiti). Ciò è utile soprattutto per le implementazioni DOM di linguaggi non JavaScript.
+
{{domxref("NodeList.entries()")}}
+
Ritorna un {{jsxref("Iteration_protocols","iterator")}} che permette al codice di passare attraverso tutte le coppie chiave/valore contenute nella collezione. (In questo caso, le chiavi sono numeri che iniziano da 0 e i valori sono nodi.)
+
{{domxref("NodeList.forEach()")}}
+
Esegue una funzione fornita una volta per elemento NodeList passando l'elemento come argomento alla funzione.
+
{{domxref("NodeList.keys()")}}
+
Ritorna un {{jsxref("Iteration_protocols", "iterator")}} che permette al codice di passare attraverso tutte le chiavi delle coppie chiave/valore contenute nella collezione. (In questo caso, i tasti sono numeri che iniziano da 0).
+
{{domxref("NodeList.values()")}}
+
Ritorna un {{jsxref("Iteration_protocols", "iterator")}} che permette al codice di passare attraverso tutti i valori (nodi) delle coppie chiave/valore contenute nella collezione.
+
+ +

Esempio

+ +

È possibile iterare sugli elementi in una NodeList usando un for loop:

+ +
for (var i = 0; i < myNodeList.length; i++) {
+  var item = myNodeList[i];  // La chiamata myNodeList.item(i) non è necessaria in JavaScript
+}
+
+ +

Non utilizzare for...in o for each...in per enumerare gli elementi nelle NodeList, poiché enumereranno anche le proprietà length e item e causeranno errori se il tuo script presume che debba occuparsi solo di oggetti {{domxref("element")}}. Inoltre, for..in non garantisce la visita delle proprietà in un particolare ordine.

+ +

for...of itererà sugli oggetti NodeList correttamente:

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}
+ +

I browser recenti supportano anche metodi iteratori, {{domxref("NodeList.forEach()", "forEach()")}}, come {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, e {{domxref("NodeList.keys()", "keys()")}}.

+ +

Esiste anche un modo compatibile con Internet Explorer {{jsxref("Array.forEach()", "Array.prototype.forEach")}} per l'iterazione.

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+Array.prototype.forEach.call(list, function (item) {
+  item.checked = true;
+});
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM3 Core') }} 
{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM2 Core') }} 
{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM1') }} +

Definizione iniziale.

+
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.NodeList")}}

diff --git a/files/it/web/api/notifiche/dir/index.html b/files/it/web/api/notifiche/dir/index.html new file mode 100644 index 0000000000..c1e16410d6 --- /dev/null +++ b/files/it/web/api/notifiche/dir/index.html @@ -0,0 +1,72 @@ +--- +title: Notification.dir +slug: Web/API/notifiche/dir +translation_of: Web/API/Notification/dir +--- +

{{APIRef("Web Notifications")}}

+ +

La proprieta' in sola lettura dir dell'interfaccia {{domxref("Notification")}} indica la direzione del testo della notifica, puo' essere specificata nell'opzione dir del costruttore di {{domxref("Notification.Notification","Notification()")}} .

+ +

{{AvailableInWorkers}}

+ +

Sintassi

+ +
var direzione = Notification.dir;
+
+ +

Valori

+ +

La {{domxref("DOMString")}} specifica la direzione el testo. I possibili valori sono:

+ + + +
+

Note: La maggior parte dei browser ignora le opzioni esplicite settate e funzionano con le proprie impostazioni.

+
+ +

Esempi

+ +

Il seguente frammento di codice crea un oggetto opzioni, da passare al costruttore Notification().

+ +
var opzioni = {
+  body: 'Amo JavaScript!',
+  dir: 'rtl'
+}
+
+var n = new Notification('Mio titolo',opzioni);
+
+n.dir // dovrebbe ritornare 'rtl'
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications','#dom-notification-dir','dir')}}{{Spec2('Web Notifications')}}Living standard
+ +

Browser compatibility

+ + + +

{{Compat("api.Notification.dir")}}

+ +

See also

+ + diff --git a/files/it/web/api/notifiche/index.html b/files/it/web/api/notifiche/index.html new file mode 100644 index 0000000000..ae8300aa01 --- /dev/null +++ b/files/it/web/api/notifiche/index.html @@ -0,0 +1,495 @@ +--- +title: Notifiche +slug: Web/API/notifiche +translation_of: Web/API/Notification +--- +

{{APIRef("Web Notifications")}}

+ +

L'interfaccia Notification di Notifications API viene usata per configurare e mostrare le notifiche desktop all'utente.

+ +

{{AvailableInWorkers}}

+ +

Costruttore

+ +
+
{{domxref("Notification.Notification", "Notification()")}}
+
Crea una nuova istanza dell'oggetto Notification.
+
+ +

Proprietà

+ +

Proprietà Static

+ +

Queste proprietà sono disponibili solo sull'oggetto Notification stesso.

+ +
+
{{domxref("Notification.permission")}} {{readonlyinline}}
+
Una stringa che rappresenta l'attuale permesso per mostrare le notifiche. I possibili valori sono: denied (l'utente rifiuta la ricezione delle notifiche), granted (l'utente accetta la ricezione delle notifiche), o default (la scelta dell'utente è sconosciuta, quindi il browser agirà come se il valore fosse negato).
+
+ +

Proprietà Instance

+ +

Queste proprietà sono disponibili solo su istanze dell'oggetto Notification.

+ +
+
{{domxref("Notification.actions")}} {{readonlyinline}}
+
L'array di azioni della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.badge")}} {{readonlyinline}}
+
L'URL dell'immagine utilizzata per rappresentare la notifica quando non c'è abbastanza spazio per visualizzare la notifica stessa.
+
{{domxref("Notification.body")}} {{readonlyinline}}
+
La stringa del corpo della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.data")}} {{readonlyinline}}
+
Restituisce un clone strutturato dei dati della notifica.
+
{{domxref("Notification.dir")}} {{readonlyinline}}
+
La direzione del testo della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.lang")}} {{readonlyinline}}
+
Il codice della lingua della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.tag")}} {{readonlyinline}}
+
L'ID della notifica (se presente) come specificato nel parametro options del costruttore.
+
{{domxref("Notification.icon")}} {{readonlyinline}}
+
L'URL dell'immagine utilizzata come icona della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.image")}} {{readonlyinline}}
+
L'URL di un'immagine da visualizzare come parte della notifica, come specificato nel parametro options del costruttore.
+
{{domxref("Notification.requireInteraction")}} {{readonlyinline}}
+
Un {{jsxref("Boolean")}} che indica che una notifica deve rimanere attiva finché l'utente non fa click o non la chiude, anziché chiudersi automaticamente.
+
{{domxref("Notification.silent")}} {{readonlyinline}}
+
Specifica se la notifica deve essere silenziosa, ovvero che non emetta suoni o vibrazioni, indipendentemente dalle impostazioni del dispositivo.
+
{{domxref("Notification.timestamp")}} {{readonlyinline}}
+
Specifica l'ora in cui viene creata o applicata una notifica (passato, presente o fututo).
+
{{domxref("Notification.title")}} {{readonlyinline}}
+
Il titolo della notifica come specificato nel primo parametro del costruttore.
+
{{domxref("Notification.vibrate")}} {{readonlyinline}}
+
Specifica un modello di vibrazione da emettere per i dispositivi con hardware di vibrazione.
+
+ +

Proprietà non supportate

+ +

Le seguenti proprietà sono elencate nelle specifiche più aggiornate, ma non sono ancora supportate da alcuni browser. È consigliabile controllare regolarmente per vedere se lo stato di queste proprietà viene aggiornato, e facci sapere se trovi informazioni non aggiornate.

+ +
+
{{domxref("Notification.noscreen")}} {{readonlyinline}}
+
Specifica se l'attivazione della notifica deve abilitare o meno lo schermo del dispositivo.
+
{{domxref("Notification.renotify")}} {{readonlyinline}}
+
Specifica se l'utente deve essere avvisato dopo che una nuova notifica sostituisce una vecchia.
+
{{domxref("Notification.sound")}} {{readonlyinline}}
+
Specifica una risorsa sonora da riprodurre quando scatta la notifica, al prosto del suono di notifica predefinito del sistema.
+
{{domxref("Notification.sticky")}} {{readonlyinline}}
+
Specifica se la notifica deve essere "sticky", cioè non facilmente modificabile dall'utente.
+
+ +

Gestori di eventi

+ +
+
{{domxref("Notification.onclick")}}
+
Un gestore per l'evento {{event("click")}}. Viene attivato ogni volta che l'utente fa click sulla notifica.
+
{{domxref("Notification.onerror")}}
+
Un gestore per l'evento {{event("error")}}. Viene attivato ogni volta che la notifica incontra un errore.
+
+ +

Obsolete handlers

+ +

The following event handlers are still supported as listed in the {{anch("browser compatibility")}} section below, but are no longer listed in the current spec. It is safe therefore to assume they are obsolete, and may stop working in future browser versions.

+ +
+
{{domxref("Notification.onclose")}}
+
A handler for the {{event("close")}} event. It is triggered when the user closes the notification.
+
{{domxref("Notification.onshow")}}
+
A handler for the {{event("show")}} event. It is triggered when the notification is displayed.
+
+ +

Methods

+ +

Static methods

+ +

These methods are available only on the Notification object itself.

+ +
+
{{domxref("Notification.requestPermission()")}}
+
Requests permission from the user to display notifications.
+
+ +

Instance methods

+ +

These properties are available only on an instance of the Notification object or through its prototype. The Notification object also inherits from the {{domxref("EventTarget")}} interface.

+ +
+
{{domxref("Notification.close()")}}
+
Programmatically closes a notification.
+
+ +

Example

+ +

Assume this basic HTML:

+ +
<button onclick="notifyMe()">Notify me!</button>
+ +

It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.

+ +
function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+  }
+
+  // Let's check whether notification permissions have already been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification("Hi there!");
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}
+ +

{{EmbedLiveSample('Example', '100%', 30)}}

+ +

In many cases, you don't need to be this verbose. For example, in our Emogotchi demo (see source code), we simply run {{domxref("Notification.requestPermission")}} regardless to make sure we can get permission to send notifications (this uses the newer promise-based method syntax):

+ +
Notification.requestPermission().then(function(result) {
+  console.log(result);
+});
+ +

Then we run a simple spawnNotification() function when we want to fire a notification — this is passed arguments to specify the body, icon and title we want, then it creates the necessary options object and fires the notification using the {{domxref("Notification.Notification","Notification()")}} constructor.

+ +
function spawnNotification(theBody,theIcon,theTitle) {
+  var options = {
+      body: theBody,
+      icon: theIcon
+  }
+  var n = new Notification(theTitle,options);
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{property_prefix("webkit")}}[1]
+ 22		{{CompatVersionUnknown}}4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}256[3]
icon5{{property_prefix("webkit")}}[1]
+ 22		{{CompatUnknown}}4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}25{{CompatNo}}
Available in workers{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
silent{{CompatChrome(43.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
noscreen, sticky{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
sound{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
renotify{{CompatChrome(50.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Promise-based Notification.requestPermission(){{CompatChrome(46.0)}}{{CompatUnknown}}{{CompatGeckoDesktop("47.0")}}{{CompatUnknown}}{{CompatOpera(40)}}{{CompatNo}}
vibrate, actions{{CompatChrome(53.0)}}{{CompatUnknown}}  {{CompatOpera(39)}} 
badge{{CompatChrome(53.0)}}{{CompatUnknown}}  {{CompatOpera(39)}} 
image{{CompatChrome(55.0)}}{{CompatUnknown}}  {{CompatUnknown}} 
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}} +

{{CompatVersionUnknown}}

+ 		{{CompatVersionUnknown}}4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+
icon{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
silent{{CompatNo}}{{CompatChrome(43.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(43.0)}}
noscreen, sticky{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
sound{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
renotify{{CompatNo}}{{CompatChrome(50.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Promise-based Notification.requestPermission(){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
vibrate, actions{{CompatNo}}{{CompatChrome(53.0)}}{{CompatUnknown}}   {{CompatOperaMobile(39)}} {{CompatChrome(53.0)}}
badge{{CompatNo}}{{CompatChrome(53.0)}}{{CompatUnknown}}   {{CompatOperaMobile(39)}} {{CompatChrome(53.0)}}
image{{CompatNo}}{{CompatNo}}{{CompatUnknown}}   {{CompatUnknown}} {{CompatChrome(55.0)}}
+
+ +

[1] Before Chrome 22, the support for notification followed an old prefixed version of the specification and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.

+ +

Before Chrome 32, {{domxref("Notification.permission")}} was not supported.

+ +

Before Chrome 42, service worker additions were not supported.

+ +

Starting in Chrome 49, notifications do not work in incognito mode.

+ +

[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its createNotification method.

+ +

Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the show method and supported only the click and close events.

+ +

Nick Desaulniers wrote a Notification shim to cover both newer and older implementations.

+ +

One particular Firefox OS issue is that you can pass a path to an icon to use in the notification, but if the app is packaged you cannot use a relative path like /my_icon.png. You also can't use window.location.origin + "/my_icon.png" because window.location.origin is null in packaged apps. The manifest origin field fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to pass an absolute URL to an externally hosted version of the icon. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.

+ +

When using notifications  in a Firefox OS app, be sure to add the desktop-notification permission in your manifest file. Notifications can be used at any permission level, hosted or above: "permissions": { "desktop-notification": {} }

+ +

[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).

+ +

See also

+ + diff --git a/files/it/web/api/parentnode/children/index.html b/files/it/web/api/parentnode/children/index.html new file mode 100644 index 0000000000..7bedb73eed --- /dev/null +++ b/files/it/web/api/parentnode/children/index.html @@ -0,0 +1,95 @@ +--- +title: ParentNode.children +slug: Web/API/ParentNode/children +tags: + - API + - Child + - Child Nodes + - DOM + - HTMLCollection + - Node + - ParentNode + - Proprietà + - children +translation_of: Web/API/ParentNode/children +--- +
{{ APIRef("DOM") }}
+ +

La proprietà {{domxref("ParentNode")}} children è una proprietà di sola lettura che restituisce una {{domxref("HTMLCollection")}} dinamica che contiene tutti gli {{domxref("Element","elements")}} figli del nodo su cui è stato chiamato.

+ +

Sintassi

+ +
var children = node.children;
+ +

Valore

+ +

Una {{ domxref("HTMLCollection") }} che è dimanica, raccolta ordinata degli elementi DOM che sono figli di node. È possibile accedere ai singoli nodi figlio nella raccolta utilizzando il metodo {{domxref("HTMLCollection.item", "item()")}} nella collezione o utilizzando la notazione in stile array JavaScript.

+ +

Se il nodo non ha elementi figli, children è una lista vuota con una length di 0.

+ +

Esempio

+ +
var foo = document.getElementById('foo');
+for (var i = 0; i < foo.children.length; i++) {
+    console.log(foo.children[i].tagName);
+}
+
+ +

Polyfill

+ +
// Sovrascrive il prototipo nativo di "children".
+// Aggiunge il supporto Document e DocumentFragment per IE9 & Safari.
+// Restituisce un array invece di una HTMLCollection.
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.children == null) {
+        Object.defineProperty(constructor.prototype, 'children', {
+            get: function() {
+                var i = 0, node, nodes = this.childNodes, children = [];
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) {
+                        children.push(node);
+                    }
+                }
+                return children;
+            }
+        });
+    }
+})(window.Node || window.Element);
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.ParentNode.children")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/parentnode/firstelementchild/index.html b/files/it/web/api/parentnode/firstelementchild/index.html new file mode 100644 index 0000000000..472b7737a3 --- /dev/null +++ b/files/it/web/api/parentnode/firstelementchild/index.html @@ -0,0 +1,99 @@ +--- +title: ParentNode.firstElementChild +slug: Web/API/ParentNode/firstElementChild +tags: + - API + - DOM + - ParentNode + - Proprietà +translation_of: Web/API/ParentNode/firstElementChild +--- +

{{ APIRef("DOM") }}

+ +

La proprietà ParentNode.firstElementChild di sola lettura restituisce il primo figlio {{domxref("Element")}} dell'oggetto, oppure null se non ha elementi figli.

+ +
+

Questa proprietà era inizialmente definita nell'interfaccia pura {{domxref("ElementTraversal")}} pure interface. Poiché questa interfaccia conteneva due distinti set di proprietà, una diretta al {{domxref("Node")}} che ha figli, una a quelli che sono figli, sono stati spostati in due interfacce pure separate, {{domxref("ParentNode")}} e {{domxref("ChildNode")}}. In questo caso, firstElementChild è stato spostato su {{domxref("ParentNode")}}. Questa è una modifica abbastanza tecnica che non dovrebbe influire sulla compatibilità.

+
+ +

Sintassi

+ +
var element = node.firstElementChild;
+
+ +

Esempio

+ +
<ul id="foo">
+  <li>First  (1)</li>
+  <li>Second (2)</li>
+  <li>Third  (3)</li>
+</ul>
+
+<script>
+var foo = document.getElementById('foo');
+// yields: First  (1)
+console.log(foo.firstElementChild.textContent);
+</script>
+
+ +

Polyfill per IE8, IE9 e Safari

+ +
// Overwrites native 'firstElementChild' prototype.
+// Adds Document & DocumentFragment support for IE9 & Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.firstElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'firstElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = 0;
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Diviso l'interfaccia ElementTraversal in {{domxref("ChildNode")}} e ParentNode. Questo metodo è ora definito su quest'ultimo.
+ Il {{domxref("Document")}} e {{domxref("DocumentFragment")}} implementato le nuove interfacce.
{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}{{Spec2('Element Traversal')}}Aggiunta la sua definizione iniziale all'interfaccia pura ElementTraversal e usarla su {{domxref("Element")}}.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.ParentNode.firstElementChild")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/parentnode/index.html b/files/it/web/api/parentnode/index.html new file mode 100644 index 0000000000..2cbf79f11c --- /dev/null +++ b/files/it/web/api/parentnode/index.html @@ -0,0 +1,90 @@ +--- +title: ParentNode +slug: Web/API/ParentNode +tags: + - API + - DOM + - Finding Elements + - Finding Nodes + - Interface + - Locating Elements + - Locating Nodes + - Managing Elements + - Managing Nodes + - Mixin + - NeedsTranslation + - Node + - ParentNode + - Reference + - Selectors + - TopicStub +translation_of: Web/API/ParentNode +--- +
{{APIRef("DOM")}}
+ +

The ParentNode mixin contains methods and properties that are common to all types of {{domxref("Node")}} objects that can have children. It's implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.

+ +

See Locating DOM elements using selectors to learn how to use CSS selectors to find nodes or elements of interest.

+ +

Properties

+ +
+
{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}
+
Returns the number of children of this ParentNode which are elements.
+
{{domxref("ParentNode.children")}} {{readonlyInline}}
+
Returns a live {{domxref("HTMLCollection")}} containing all of the {{domxref("Element")}} objects that are children of this ParentNode, omitting all of its non-element nodes.
+
{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}
+
Returns the first node which is both a child of this ParentNode and is also an Element, or null if there is none.
+
{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}
+
Returns the last node which is both a child of this ParentNode and is an Element, or null if there is none.
+
+ +

Methods

+ +
+
{{domxref("ParentNode.append()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects after the last child of the ParentNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("ParentNode.prepend()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects before the first child of the ParentNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("ParentNode.querySelector()")}}
+
Returns the first {{domxref("Element")}} with the current element as root that matches the specified group of selectors.
+
{{domxref("ParentNode.querySelectorAll()")}}
+
Returns a {{domxref("NodeList")}} representing a list of elements with the current element as root that matches the specified group of selectors.
+
+ +

Specification

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and used it on {{domxref("Element")}}.
+ +

Browser compatibility

+ + + +

{{Compat("api.ParentNode")}}

+ +

See also

+ + diff --git a/files/it/web/api/parentnode/lastelementchild/index.html b/files/it/web/api/parentnode/lastelementchild/index.html new file mode 100644 index 0000000000..006a3a316d --- /dev/null +++ b/files/it/web/api/parentnode/lastelementchild/index.html @@ -0,0 +1,98 @@ +--- +title: ParentNode.lastElementChild +slug: Web/API/ParentNode/lastElementChild +tags: + - API + - DOM + - ParentNode + - Proprietà +translation_of: Web/API/ParentNode/lastElementChild +--- +

{{ APIRef("DOM") }}

+ +

La proprietà ParentNode.LastElementChild di sola lettura restituisce l'ultimo figlio Element dell'oggetto, oppure null se non ha elementi figli.

+ +
+

Questa proprietà era inizialmente definita nell'interfaccia pura {{domxref("ElementTraversal")}} pure interface. Poiché questa interfaccia conteneva due distinti set di proprietà, una diretta al {{domxref("Node")}} che ha figli, una a quelli che sono figli, sono stati spostati in due interfacce pure separate, {{domxref("ParentNode")}} e {{domxref("ChildNode")}}. In questo caso, lastElementChild è stato spostato su {{domxref("ParentNode")}}. Questa è una modifica abbastanza tecnica che non dovrebbe influire sulla compatibilità.

+
+ +

Sintassi

+ +
var element = node.lastElementChild;
+ +

Esempio

+ +
<ul id="foo">
+  <li>First  (1)</li>
+  <li>Second (2)</li>
+  <li>Third  (3)</li>
+</ul>
+
+<script>
+var foo = document.getElementById('foo');
+// yields: Third  (3)
+console.log(foo.lastElementChild.textContent);
+</script>
+
+ +

Polyfill per IE8, IE9 e Safari

+ +
// Overwrites native 'lastElementChild' prototype.
+// Adds Document & DocumentFragment support for IE9 & Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.lastElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'lastElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = nodes.length - 1;
+                while (node = nodes[i--]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Diviso l'interfaccia ElementTraversal in {{domxref("ChildNode")}} e ParentNode. Questo metodo è ora definito su quest'ultimo.
+ Il {{domxref("Document")}} e {{domxref("DocumentFragment")}} implementato le nuove interfacce.
{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}{{Spec2('Element Traversal')}}Aggiunta la sua definizione iniziale all'interfaccia pura ElementTraversal e usarla su {{domxref("Element")}}.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.ParentNode.firstElementChild")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/performance/index.html b/files/it/web/api/performance/index.html new file mode 100644 index 0000000000..fde24fddb4 --- /dev/null +++ b/files/it/web/api/performance/index.html @@ -0,0 +1,135 @@ +--- +title: Performance +slug: Web/API/Performance +tags: + - API + - Interface + - Misurazione delle performance + - Performance + - Reference + - Web Performance +translation_of: Web/API/Performance +--- +
{{APIRef("High Resolution Time")}}
+ +

 
+ L'interaccia Performance fornisce l'accesso alle informazioni relative alle performance della pagina corrente. Fa parte delle High Resolution Time API, ma viene migliorata tramite le Performance Timeline API, le Navigation Timing API, le User Timing API e le Resource Timing API.

+ +

Un oggetto di questo tipo può essere ottenuto chiamando {{domxref("Window.performance")}} in sola lettura.

+ +
+

Nota:  Questa interfaccia ed i suoi metodi sono disponibili nei Web Workers, ad eccezione di dove diversamente indicato nella guida sottostante.
+ Da notare inoltre che i markers delle peformance e le misurazioni sono relative al contesto. Se crei un marker sul thread principale (o su un altro worker), non potrai vederlo in un thread del worker e viceversa.

+
+ +

Proprietà

+ +

L'interfaccia Performance non eredita nessuna proprietà.

+ +
+
{{deprecated_inline}} {{domxref("Performance.navigation")}} {{readonlyInline}}
+
{{domxref("PerformanceNavigation")}} è un oggetto che fornisce un utile contesto sulle operazioni incluse nella lista timing, sia che la pagina venga caricata o ricaricata, quante occorrenze di redirect sono presenti e così via. Not available in workers.
+
{{deprecated_inline}}  {{domxref("Performance.timing")}} {{readonlyInline}}
+
L'oggetto {{domxref("PerformanceTiming")}} contiene le informazioni relative alla latenza delle performance. Not available in workers.
+
{{domxref("Performance.memory", "performance.memory")}} {{Non-standard_inline}}
+
Estensione non-standard aggiunta in Chrome, questa proprietà fornisce un oggetto con l'utilizzo della memoria di base. Non dovresti usare questa API non-stanrdard.
+
{{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Non-standard_inline}}
+
Restituisce il timestamp preciso del momento in cui si è iniziato a misurare le performance.
+
+ +
+
+

Event handlers

+
+
{{domxref("Performance.onresourcetimingbufferfull")}}
+
Un {{domxref("EventTarget")}} che funge da callback e che viene eseguito quando viene scatenato l'evento {{event("resourcetimingbufferfull")}}
+
+ +

Metodi

+ +

L'interfaccia Performance non eredita nessun metodo.

+ +
+
{{domxref("Performance.clearMarks()")}}
+
Rimuove il segnaposto specificato dal buffer delle performance del browser.
+
{{domxref("Performance.clearMeasures()")}}
+
Rimuove la misurazione specificata dal buffer delle performance del browser.
+
{{domxref("Performance.clearResourceTimings()")}}
+
Rimuove tutte le {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entryType")}} di resource dal data buffer delle performance del browser.
+
{{domxref("Performance.getEntries()")}}
+
Restituisce una lista di oggetti di tipo {{domxref("PerformanceEntry")}}  basati sul filtro specificato.
+
{{domxref("Performance.getEntriesByName()")}}
+
Restituisce una lista di oggetti di tipo {{domxref("PerformanceEntry")}} secondo il nome specificato ed il tipo divoce specificata.
+
{{domxref("Performance.getEntriesByType()")}}
+
Restituisce una list di oggetti {{domxref("PerformanceEntry")}} relativi alla voce specificata
+
{{domxref("Performance.mark()")}}
+
Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} nel buffer delle performance usando il nome specificato.
+
{{domxref("Performance.measure()")}}
+
Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} nel buffer delle performance del browser tra due segnaposti (indicati rispettivamente come start mark ed end mark)
+
{{domxref("Performance.now()")}}
+
Restituisce un {{domxref("DOMHighResTimeStamp")}} ceh rappresenta il numero in millisecondi trascorso dall'istante preso come riferimento.
+
{{domxref("Performance.setResourceTimingBufferSize()")}}
+
Imposta la dimensione del buffer del browser relativo alla temporizzazione in un numero specificato di oggetti {{domxref("PerformanceEntry","performance entry")}} "resource" {{domxref("PerformanceEntry.entryType","type")}}
+
{{domxref("Performance.toJSON()")}}
+
Restituisce un oggetto json che rappresenta l'oggetto Performance
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('Highres Time Level 3', '#dom-performance-timeorigin','timeOrigin')}}{{Spec2('Highres Time Level 3')}}Definisce la proprietà timeOrigin 
{{SpecName('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}{{Spec2('Highres Time Level 2')}}Definisce il metodo toJson() .
{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}{{Spec2('Highres Time')}}Definisce il metodo now() .
{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline Level 2')}}Cambia l'interfaccia getEntries() .
{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}{{Spec2('Performance Timeline')}}Definisce i metodi getEntries(), getEntriesByType() e getEntriesByName() .
{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('Resource Timing')}}Definisce i metodi clearResourceTimings() e setResourceTimingBufferSize() e la proprietà onresourcetimingbufferfull .
{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing Level 2')}}Spiega i metodi mark(), clearMark(), measure() e clearMeasure() .
{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing')}}Definisce i metodi mark(), clearMark(), measure() e clearMeasure().
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.Performance")}}

+
diff --git a/files/it/web/api/performance/now/index.html b/files/it/web/api/performance/now/index.html new file mode 100644 index 0000000000..2331157f18 --- /dev/null +++ b/files/it/web/api/performance/now/index.html @@ -0,0 +1,104 @@ +--- +title: performance.now() +slug: Web/API/Performance/now +tags: + - API + - Performance + - Prestazioni + - Reference + - Riferimento + - Web Performance API + - metodo +translation_of: Web/API/Performance/now +--- +
{{APIRef("High Resolution Timing")}}
+ +

Il metodo performance.now() restituisce un {{domxref("DOMHighResTimeStamp")}}, misurato in millisecondi.

+ +
+

The timestamp is not actually high-resolution. To mitigate security threats such as Spectre, browsers currently round the results to varying degrees. (Firefox started rounding to 1 millisecond in Firefox 60.) Some browsers may also slightly randomize the timestamp. The precision may improve again in future releases; browser developers are still investigating these timing attacks and how best to mitigate them.

+
+ +

{{AvailableInWorkers}}

+ +

Il valore restituito rappresenta il tempo trascorso dal time origin.

+ +

Tieni a mente i seguenti punti:

+ + + +

Sintassi

+ +
t = performance.now();
+ +

Esempio

+ +
var t0 = performance.now();
+doSomething();
+var t1 = performance.now();
+console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");
+
+ +

A differenza di altri timing data disponibili con JavaScript (per esempio Date.now), i timestamps restituiti da Performance.now() non sono limitati a una risoluzione di un millisecondo. Invece, rappresentano il tempo come numeri a virgola mobile con una precisione che può arrivare a un microsecondo.

+ +

Inolre, a differenza di Date.now(), il valore restituito da Performance.now() aumenta sempre con costanza, indipendentemente dal clock di sistema (che può essere regolato manualmente o distorto da software come NTP). Altrimenti, performance.timing.navigationStart + performance.now() sarà approssimativamente uguale a Date.now().

+ +

Reduced time precision

+ +

To offer protection against timing attacks and fingerprinting, the precision of performance.now() might get rounded depending on browser settings.
+ In Firefox, the privacy.reduceTimerPrecision  preference is enabled by default and defaults to 1ms.

+ +
// reduced time precision (1ms) in Firefox 60
+performance.now();
+// 8781416
+// 8781815
+// 8782206
+// ...
+
+
+// reduced time precision with `privacy.resistFingerprinting` enabled
+performance.now();
+// 8865400
+// 8866200
+// 8866700
+// ...
+
+ +

In Firefox, you can also enable privacy.resistFingerprinting — this changes the precision to 100ms or the value of privacy.resistFingerprinting.reduceTimerPrecision.microseconds, whichever is larger.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time Level 2')}}Stricter definitions of interfaces and types.
{{SpecName('Highres Time', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Performance.now")}}

+ +

See also

+ + diff --git a/files/it/web/api/range/clonecontents/index.html b/files/it/web/api/range/clonecontents/index.html new file mode 100644 index 0000000000..48d1bc09b9 --- /dev/null +++ b/files/it/web/api/range/clonecontents/index.html @@ -0,0 +1,27 @@ +--- +title: range.cloneContents +slug: Web/API/Range/cloneContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/cloneContents +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un frammento del documento copiando i nodi di un Range.

+

Sintassi

+
frammento = range.cloneContents();
+
+

Esempio

+
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+frammento = range.cloneContents();
+document.body.appendChild(frammento);
+
+

Note

+

Gli Event Listener aggiunti utilizzando gli Event del DOM non vengono copiati durante la clonazione. Gli attributi-evento di HTML vengono duplicati allo stesso modo in cui li copia il metodo clonNode. Anche gli attributi HTML "id" vengono clonati, il che può portare a rendere il documento non valido.

+

I nodi parzialmente selezionati includono i tag padri necessari perché il frammento di documento sia valido.

+

Specifiche

+

cloneContents

diff --git a/files/it/web/api/range/clonerange/index.html b/files/it/web/api/range/clonerange/index.html new file mode 100644 index 0000000000..ba8c0076b3 --- /dev/null +++ b/files/it/web/api/range/clonerange/index.html @@ -0,0 +1,28 @@ +--- +title: range.cloneRange +slug: Web/API/Range/cloneRange +translation_of: Web/API/Range/cloneRange +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un oggetto Range con i punti d'inizio e di fine identici a quelli del Range attuale.

+ +

Sintassi

+ +
clone = range.cloneRange();
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+clone = range.cloneRange();
+
+ +

Note

+ +

Il Range viene copiato per valore, non per referenza, quindi una modifica su uno dei due oggetti non avrà effetti sull'altro.

+ +

Specifiche

+ +

cloneRange

diff --git a/files/it/web/api/range/collapse/index.html b/files/it/web/api/range/collapse/index.html new file mode 100644 index 0000000000..f976cfeca6 --- /dev/null +++ b/files/it/web/api/range/collapse/index.html @@ -0,0 +1,36 @@ +--- +title: range.collapse +slug: Web/API/Range/collapse +translation_of: Web/API/Range/collapse +--- +

{{ APIRef("DOM") }}

+ +

Collassa il range tra i suoi due estremi.

+ +

Sintassi

+ +
range.collapse(toStart);
+
+ +

Parametri

+ +
+
toStart 
+
Un booleano, true collassa il Range al suo punto iniziale, False lo collassa alla fine.
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.selectNode(referenceNode);
+range.collapse(true);
+
+ +

Note

+ +

Un Range collassato è vuoto, non ha alcun contenuto, specifica un singolo punto nell'albero del DOM. Per determinare se un Range è già collassato, si veda la proprietà collapsed.

+ +

Specifiche

+ +

collapse

diff --git a/files/it/web/api/range/collapsed/index.html b/files/it/web/api/range/collapsed/index.html new file mode 100644 index 0000000000..3d06ee5385 --- /dev/null +++ b/files/it/web/api/range/collapsed/index.html @@ -0,0 +1,33 @@ +--- +title: range.collapsed +slug: Web/API/Range/collapsed +translation_of: Web/API/Range/collapsed +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un booleano che indica se i punti d'inizio e di fine sono nella stessa posizione.

+ +

Sintassi

+ +
isCollapsed = range.collapsed;
+
+ +

Esempio

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+isCollapsed = range.collapsed;
+
+ +

Note

+ +

Restituisce il valore booleano true se l'inizio e la fine del Range sono lo stesso punto nel DOM, altrimenti restituisce false.

+ +

Un Range collapsed è vuoto, non ha alcun contenuto, rappresenta un singolo punto nell'albero del DOM. Per collassare un Range, si veda il metodo collapse.

+ +

Specifiche

+ +

collapsed

+ +

{{ languages( { "ja": "ja/DOM/range.collapsed" } ) }}

diff --git a/files/it/web/api/range/commonancestorcontainer/index.html b/files/it/web/api/range/commonancestorcontainer/index.html new file mode 100644 index 0000000000..9f4cbec910 --- /dev/null +++ b/files/it/web/api/range/commonancestorcontainer/index.html @@ -0,0 +1,31 @@ +--- +title: range.commonAncestorContainer +slug: Web/API/Range/commonAncestorContainer +translation_of: Web/API/Range/commonAncestorContainer +--- +

{{ APIRef("DOM") }}

+ +

Restituisce il nodo più interno che contiene i nodi startContainer e endContainer.

+ +

Sintassi

+ +
rangeAncestor = range.commonAncestorContainer;
+
+ +

Esempio

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+rangeAncestor = range.commonAncestorContainer;
+
+ +

Note

+ +

Restituisce il nodo che si trova più in profondità, o più in basso nell'albero del DOM, che contiene entrambi i nodi startContainer e endContainer. Siccome Range non deve necessariamente essere contiguo e potrebbe anche selezionare solo in parte alcuni nodi, questo è un modo conveniente per trovare un nodo che racchiuda completamente il Range.

+ +

Questa proprietà è di sola lettura. Per cambiare il più profondo contenitore di un nodo, si consideri la possibilità di utilizzare i vari metodi per impostare le posizioni iniziali e finali di un Range.

+ +

Specifiche

+ +

commonAncestorContainer

diff --git a/files/it/web/api/range/compareboundarypoints/index.html b/files/it/web/api/range/compareboundarypoints/index.html new file mode 100644 index 0000000000..f815fd019b --- /dev/null +++ b/files/it/web/api/range/compareboundarypoints/index.html @@ -0,0 +1,54 @@ +--- +title: range.compareBoundaryPoints +slug: Web/API/Range/compareBoundaryPoints +translation_of: Web/API/Range/compareBoundaryPoints +--- +

{{ APIRef("DOM") }}

+ +

Compara i punti estremi di due Range.

+ +

Sintassi

+ +
compara =
+range.compareBoundaryPoints(
+come,
+rangeSorgente);
+
+ +
+
compara 
+
Un numero che vale 1, 0, o -1, che indica se un punto estremo di + range + è rispettivamente prima, nella stessa posizione o dopo il corrispondente punto estremo di rangeSorgente.
+
come 
+
Una costante che indica la modalità di comparazione, i possibili valori sono descritti sotto.
+
rangeSorgente 
+
Un range con cui effettuare la comparazione
+
+ +

Esempio

+ +
var range, rangeSorgente, compara;
+range = document.createRange();
+range.selectNode(document.getElementsByTagName("div")[0]);
+rangeSorgente = document.createRange();
+rangeSorgente.selectNode(document.getElementsByTagName("div")[1]);
+compara = range.compareBoundaryPoints(START_TO_END, rangeSorgente);
+
+ +

Note

+ +

Il parametro + come + può assumere i seguenti valori:

+ + + +

Specifiche

+ +

DOM Level 2 Traversal: compareBoundaryPoints

diff --git a/files/it/web/api/range/comparepoint/index.html b/files/it/web/api/range/comparepoint/index.html new file mode 100644 index 0000000000..2d3356b532 --- /dev/null +++ b/files/it/web/api/range/comparepoint/index.html @@ -0,0 +1,37 @@ +--- +title: range.comparePoint +slug: Web/API/Range/comparePoint +translation_of: Web/API/Range/comparePoint +--- +

{{ APIRef("DOM") }}

+ +

Restituisce -1 se nodo si trova prima del range, 0 se si trova nello stesso punto, 1 se si trova dopo.

+ +

Sintassi

+ +
int = range.comparePoint( nodo, offset )
+
+ +

Parametri

+ +
+
nodo 
+
Il node da comparare con range
+
offset 
+
Un intero maggiore o uguale a zero che rappresenta la distanza dall'inizio del nodo
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+valore = range.comparePoint(document.getElementsByTagName("p").item(0),1);
+
+ +

Note

+ +

Se il nodo è di tipo Text, Comment, o CDATASection, allora l'offset è il numero di caratteri dall'inizio del nodo. Per tutti gli altri tipi di nodo, offset</offset> rappresenta il numero dei nodi figlio dall'inizio di <code>nodo.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/range/createcontextualfragment/index.html b/files/it/web/api/range/createcontextualfragment/index.html new file mode 100644 index 0000000000..f56354ddc4 --- /dev/null +++ b/files/it/web/api/range/createcontextualfragment/index.html @@ -0,0 +1,37 @@ +--- +title: range.createContextualFragment +slug: Web/API/Range/createContextualFragment +translation_of: Web/API/Range/createContextualFragment +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un frammento di documento.

+ +

Sintassi

+ +
frammento = range.createContextualFragment( tag )
+
+ +

Parametri

+ +
+
tag 
+
stringa che contiene del testo da convertire in un frammento di documento
+
+ +

Esempio

+ +
var tag = "<div>Ciao, sono un nodo!</div>";
+var range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+var frammento = range.createContextualFragment(tag);
+document.body.appendChild(frammento);
+
+ +

Note

+ +

Questo metodo accetta una stringa e utilizza l'interprete di Mozilla per convertirla in un ramo (o un singolo nodo) del DOM.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/range/deletecontents/index.html b/files/it/web/api/range/deletecontents/index.html new file mode 100644 index 0000000000..25ade9f3ca --- /dev/null +++ b/files/it/web/api/range/deletecontents/index.html @@ -0,0 +1,25 @@ +--- +title: range.deleteContents +slug: Web/API/Range/deleteContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/deleteContents +--- +

{{ ApiRef() }}

+

Sommario

+

Rimuove i contenuti di un Range dal documento.

+

Sintassi

+
range.deleteContents()
+
+

Esempio

+
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.deleteContents();
+
+

Note

+

Diversamente dal metodo extractContents, deleteContents non restituisce un frammento di documento contenente il contenuto cancellato.

+

Specifiche

+

deleteContents

diff --git a/files/it/web/api/range/detach/index.html b/files/it/web/api/range/detach/index.html new file mode 100644 index 0000000000..be4f1de75d --- /dev/null +++ b/files/it/web/api/range/detach/index.html @@ -0,0 +1,28 @@ +--- +title: range.detach +slug: Web/API/Range/detach +translation_of: Web/API/Range/detach +--- +

{{ APIRef("DOM") }}

+ +

Rilascia un Range in uso, per liberare memoria.

+ +

Sintassi

+ +
range.detach();
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.detach();
+
+ +

Note

+ +

Permette a Mozilla di rilasciare le risorse associate a questo Range. Successivi tentativi di usare il range rilasciato causeranno una DOMException lanciata con un codice di errore INVALID_STATE_ERR.

+ +

Specifiche

+ +

detach

diff --git a/files/it/web/api/range/endcontainer/index.html b/files/it/web/api/range/endcontainer/index.html new file mode 100644 index 0000000000..b727827a32 --- /dev/null +++ b/files/it/web/api/range/endcontainer/index.html @@ -0,0 +1,29 @@ +--- +title: range.endContainer +slug: Web/API/Range/endContainer +translation_of: Web/API/Range/endContainer +--- +

{{ APIRef("DOM") }}

+ +

Restituisce il nodo dentro il quale termina il Range.

+ +

Sintassi

+ +
endRangeNode = range.endContainer;
+
+ +

Esempio

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+endRangeNode = range.endContainer;
+
+ +

Note

+ +

Restituisce una referenza al Nodo del documento dentro il quale termina il Range. Questa proprietà è di sola lettura. Per modificare la posizione finale di un nodo, si può utilizzare il metodo setEnd o un altro metodo simile.

+ +

Specifiche

+ +

endContainer

diff --git a/files/it/web/api/range/endoffset/index.html b/files/it/web/api/range/endoffset/index.html new file mode 100644 index 0000000000..0d4556ef6f --- /dev/null +++ b/files/it/web/api/range/endoffset/index.html @@ -0,0 +1,29 @@ +--- +title: range.endOffset +slug: Web/API/Range/endOffset +translation_of: Web/API/Range/endOffset +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un numero che rappresenta dove termina il Range, all'interno di endContainer.

+ +

Sintassi

+ +
endRangeOffset = range.endOffset;
+
+ +

Esempio

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+endRangeOffset = range.endOffset;
+
+ +

Note

+ +

endOffset ha due significati. Se endContainer è un Node di tipo Text, Comment, o CDATASection, allora l'offset è il numero di caratteri dall'inizio di endContainer alla fine del Range. Per altri tipi di Node, endOffset è il numero dei nodi figli tra l'inizio di endContainer e la fine del Range. Questa proprietà è di sola lettura. Per cambiare l'endOffset del Range, è possibile utilizzare uno dei metodi setEnd.

+ +

Specifiche

+ +

endOffset

diff --git a/files/it/web/api/range/extractcontents/index.html b/files/it/web/api/range/extractcontents/index.html new file mode 100644 index 0000000000..9c2cc50586 --- /dev/null +++ b/files/it/web/api/range/extractcontents/index.html @@ -0,0 +1,27 @@ +--- +title: range.extractContents +slug: Web/API/Range/extractContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/extractContents +--- +

{{ ApiRef() }}

+

Sommario

+

Sposta i contenuti di un Range da un ramo del documento ad un altro ramo del documento.

+

Sintassi

+
frammento = range.extractContents();
+
+

Esempio

+
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+frammento = range.extractContents();
+document.body.appendChild(frammento);
+
+

Note

+

Gli Event Listener creati utilizzando gli eventi DOM non vengono conservati durante l'estrazione. Gli attributi-evento di HTML non vengono conservati nè duplicati. Gli attributi HTML "id" vengono clonati, il che può portare a rendere invalido un documento se il nodo parzialmente selezionato è estratto ed aggiunto in un altro punto del documento.

+

I nodi parzialmente selezionati vengono clonati per includere i tag padri necessari perché il frammento del documento sia valido.

+

Specifiche

+

extractContents

diff --git a/files/it/web/api/range/index.html b/files/it/web/api/range/index.html new file mode 100644 index 0000000000..9ff0663ee0 --- /dev/null +++ b/files/it/web/api/range/index.html @@ -0,0 +1,150 @@ +--- +title: range +slug: Web/API/Range +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - SezioneIncompleta + - Tutte_le_categorie +translation_of: Web/API/Range +--- +

{{ ApiRef() }}

+

Introduzione

+

L'oggetto Range rappresenta una parte di un documento, che può contenere nodi e parti di nodi testuali del documento dato.

+

Un range può essere creato usando il metodo createRange dell'oggetto document. Gli oggetti Range possono essere ottenuti anche usando il metodo getRangeAt dell'oggetto selection.

+

Proprietà

+
+
+ collapsed
+
+ Restituisce un booleano che indica se i punti d'inizio e di fine del range sono nella stessa posizione.
+
+ commonAncestorContainer
+
+ Restituisce il nodo più interno che contiene i nodi startContainer e endContainer.
+
+ endContainer
+
+ Restituisce il nodo nel quale il Range finisce.
+
+ endOffset
+
+ Restituisce un numero che rappresenta il punto preciso in cui il Range finisce, all'interno di endContainer.
+
+ startContainer
+
+ Restituisce il nodo nel quale il Range inizia.
+
+ startOffset
+
+ Restituisce un numero che rappresenta il punto preciso in cui il Range inizia, all'interno di startContainer.
+
+

Metodi

+

Metodi di posizionamento

+

Questi metodi impostano i punti di inizio e di fine di un range.

+
+
+ setStart
+
+ Imposta la posizione iniziale di un Range.
+
+ setEnd
+
+ Setta la posizione finale di un Range.
+
+ setStartBefore
+
+ Setta la posizione iniziale di un Range nel nodo precedente a quello indicato.
+
+ setStartAfter
+
+ Setta la posizione iniziale di un Range nel nodo successivo a quello indicato.
+
+ setEndBefore
+
+ Setta la posizione finale di un Range nel nodo precedente a quello indicato.
+
+ setEndAfter
+
+ Setta la posizione finale di un Range nel nodo successivo a quello indicato.
+
+ selectNode
+
+ Inserisce all'interno di un Range uno specifico nodo e il suo contenuto.
+
+ selectNodeContents
+
+ Inserisce all'interno di un Range esclusivamente il contenuto di uno specifico nodo.
+
+ collapse
+
+ Collassa un Range in uno dei punti estremi.
+
+

Metodi per modificare un Range

+

Questi metodi prendono i nodi da un range e ne modificano i contenuti.

+
+
+ cloneContents
+
+ Restituisce un frammento di documento copiando i nodi da un Range.
+
+ deleteContents
+
+ Rimuove dal documento i contenuti di un Range.
+
+ extractContents
+
+ Muove i contenuti di un Range dall'albero del documento in un frammento del documento.
+
+ insertNode
+
+ Inserisce un nodo all'inizio di un Range.
+
+ surroundContents
+
+ Muove il contenuto di un Range in un nuovo nodo.
+
+

Altri metodi

+
+
+ compareBoundaryPoints
+
+ Compara i punti estremi di due Range.
+
+ cloneRange
+
+ Restituisce un oggetto Range con i punti estremi identici al Range clonato.
+
+ detach
+
+ Rilascia un Range dall'uso, per migliorare le performance.
+
+ toString
+
+ Restituisce il testo di un Range.
+
+

Metodi proprietari di Gecko

+

Questa sezione descrive metodi di Range implementati in Gecko ma che non fanno parte delle specifiche DOM del W3C.

+
+
+ compareNode (obsoleto)
+
+ Restituisce una costante che rappresenta se il nodo viene prima, dopo o dentro il Range.
+
+ comparePoint
+
+ Restituisce -1, 0, o 1 per indicare se il punto viene prima, dentro o dopo il range.
+
+ createContextualFragment
+
+ Restituisce un frammento di documento creato a partire da una data stringa di codice.
+
+ intersectsNode (obsoleto)
+
+ Restituisce un booleano che indica se il nodo dato interseca il range.
+
+ isPointInRange
+
+ Restituisce un booleano che indica se il punto dato è interno al range.
+
diff --git a/files/it/web/api/range/insertnode/index.html b/files/it/web/api/range/insertnode/index.html new file mode 100644 index 0000000000..6abfe0f295 --- /dev/null +++ b/files/it/web/api/range/insertnode/index.html @@ -0,0 +1,38 @@ +--- +title: range.insertNode +slug: Web/API/Range/insertNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/insertNode +--- +
+ {{APIRef}}
+
+  
+

Sommario

+

Inserisce un nodo all'inizio di un range.

+

Sintassi

+
range.insertNode(nuovoNodo);
+
+

Parameters

+
+
+ nuovoNodo 
+
+ è un oggetto node.
+
+

Esempio

+
range = document.createRange();
+nuovoNodo = document.createElement("p");
+nuovoNodo.appendChild(document.createTextNode("Un nuovo nodo viene inserito qui"));
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.insertNode(nuovoNodo);
+
+

Note

+

nuovoNodo viene inserito al punto iniziale del Range. Se nuovoNodo deve essere aggiunto a un nodo testo, quel nodo viene diviso al punto dell'inserimento e l'aggiunta avviene tra il due nodi testo risultanti (si veda però il bug http://bugzilla.mozilla.org/show_bug.cgi?id=135922 ).

+

Se nuovoNodo è un frammento di documento, i figli del frammento vengono inseriti al suo posto.

+

Specifiche

+

insertNode

diff --git a/files/it/web/api/range/ispointinrange/index.html b/files/it/web/api/range/ispointinrange/index.html new file mode 100644 index 0000000000..86c7e3ec43 --- /dev/null +++ b/files/it/web/api/range/ispointinrange/index.html @@ -0,0 +1,31 @@ +--- +title: range.isPointInRange +slug: Web/API/Range/isPointInRange +translation_of: Web/API/Range/isPointInRange +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un valore booleano che indica se il punto passato si trova all'interno del range.

+ +

Sintassi

+ +
bool = range.isPointInRange( nodo )
+
+ +

Parametri

+ +
+
nodo 
+
Il Node da comparare con il Range.
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+bool = range.isPointInRange(document.getElementsByTagName("p").item(0),1);
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcun standard.

diff --git a/files/it/web/api/range/selectnode/index.html b/files/it/web/api/range/selectnode/index.html new file mode 100644 index 0000000000..2b08e16731 --- /dev/null +++ b/files/it/web/api/range/selectnode/index.html @@ -0,0 +1,35 @@ +--- +title: range.selectNode +slug: Web/API/Range/selectNode +translation_of: Web/API/Range/selectNode +--- +

{{ APIRef("DOM") }}

+ +

Imposta il Range in modo tale che contenga un nodo e tutti i suoi elementi.

+ +

Sintassi

+ +
range.selectNode(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node da selezionare dentro un Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.selectNode(referenceNode);
+
+ +

Note

+ +

Il Node padre dell'inizio e della fine del Range sarà lo stesso del padre del referenceNode.

+ +

Specifiche

+ +

selectNode

diff --git a/files/it/web/api/range/selectnodecontents/index.html b/files/it/web/api/range/selectnodecontents/index.html new file mode 100644 index 0000000000..e558cf5982 --- /dev/null +++ b/files/it/web/api/range/selectnodecontents/index.html @@ -0,0 +1,37 @@ +--- +title: range.selectNodeContents +slug: Web/API/Range/selectNodeContents +translation_of: Web/API/Range/selectNodeContents +--- +

 

+ +

{{ APIRef("DOM") }}

+ +

Imposta il Range perchè contenga il contenuti di un dato Node.

+ +

Sintassi

+ +
range.selectNodeContents(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node i cui contenuti devono essere selezionati dentro il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.selectNodeContents(referenceNode);
+
+ +

Note

+ +

Il Node padre dell'inizio e della fine del Range sarà referenceNode. startOffset è 0 e endOffset è il numero dei Node figli o il numero dei caratteri contenuti nel referenceNode.

+ +

Specifiche

+ +

selectNodeContents

diff --git a/files/it/web/api/range/setend/index.html b/files/it/web/api/range/setend/index.html new file mode 100644 index 0000000000..02754fbedb --- /dev/null +++ b/files/it/web/api/range/setend/index.html @@ -0,0 +1,38 @@ +--- +title: range.setEnd +slug: Web/API/Range/setEnd +translation_of: Web/API/Range/setEnd +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione finale di un Range.

+ +

Sintassi

+ +
range.setEnd(endNode,endOffset);
+
+ +

Parametri

+ +
+
endNode 
+
Il Node che termina il Range
+
endOffset 
+
Un intero maggiore o uguale a zero che rappresenta la distanza della fine del Range dall'inizio di endNode.
+
+ +

Esempio

+ +
range = document.createRange();
+endNode = document.getElementsByTagName("p").item(3);
+endOffset = document.getElementsByTagName("p").item(3).childNodes.length;
+range.setEnd(endNode,endOffset);
+
+ +

Note

+ +

Se l'endNode è un Node di tipo Text, Comment, o CDATASection, allora endOffset è il numero di caratteri dall'inizio di endNode. Per altri tipi di Node, endOffset è il numero dei nodi figlio dall'inizio di endNode.

+ +

Specifiche

+ +

setEnd

diff --git a/files/it/web/api/range/setendafter/index.html b/files/it/web/api/range/setendafter/index.html new file mode 100644 index 0000000000..7d23e74e02 --- /dev/null +++ b/files/it/web/api/range/setendafter/index.html @@ -0,0 +1,35 @@ +--- +title: range.setEndAfter +slug: Web/API/Range/setEndAfter +translation_of: Web/API/Range/setEndAfter +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione finale di un Range relativamente a un altro Node.

+ +

Syntax

+ +
range.setEndAfter(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node dopo il quale deve terminare il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setEndAfter(referenceNode);
+
+ +

Note

+ +

Il Node della fine del Range sarà lo stesso di referenceNode.

+ +

Specification

+ +

setEndAfter

diff --git a/files/it/web/api/range/setendbefore/index.html b/files/it/web/api/range/setendbefore/index.html new file mode 100644 index 0000000000..69b3f0e961 --- /dev/null +++ b/files/it/web/api/range/setendbefore/index.html @@ -0,0 +1,35 @@ +--- +title: range.setEndBefore +slug: Web/API/Range/setEndBefore +translation_of: Web/API/Range/setEndBefore +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione finale di un Range relativamente a un altro Node.

+ +

Sintassi

+ +
range.setEndBefore(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node prima del quale deve terminare il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setEndBefore(referenceNode);
+
+ +

Note

+ +

Il Node padre della fine del Range sarà lo stesso di referenceNode.

+ +

Specification

+ +

setEndBefore

diff --git a/files/it/web/api/range/setstart/index.html b/files/it/web/api/range/setstart/index.html new file mode 100644 index 0000000000..27623b9ea8 --- /dev/null +++ b/files/it/web/api/range/setstart/index.html @@ -0,0 +1,38 @@ +--- +title: range.setStart +slug: Web/API/Range/setStart +translation_of: Web/API/Range/setStart +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione iniziale di un Range.

+ +

Sintassi

+ +
range.setStart(startNode,startOffset);
+
+ +

Parametri

+ +
+
startNode 
+
Il Node all'inizio del Range
+
startOffset 
+
Un numero intero molto grande rappresentante l'offset per l'inizio del Range dall'iniszio dello startNode.
+
+ +

Esempio

+ +
range = document.createRange();
+startNode = document.getElementsByTagName("p").item(2);
+startOffset = 0;
+range.setStart(startNode,startOffset);
+
+ +

Note

+ +

Se lo startNode è un Node di tipo Text, Comment, oppure CDATASection, allora lo startOffset è il numero di caratteri dall'inizio dello startNode. Per gli altri tipi di Node, lo startOffset è il numero di nodi figli tra l'inizio dello startNode.

+ +

Specifiche

+ +

setStart

diff --git a/files/it/web/api/range/setstartafter/index.html b/files/it/web/api/range/setstartafter/index.html new file mode 100644 index 0000000000..4a5676a9d6 --- /dev/null +++ b/files/it/web/api/range/setstartafter/index.html @@ -0,0 +1,35 @@ +--- +title: range.setStartAfter +slug: Web/API/Range/setStartAfter +translation_of: Web/API/Range/setStartAfter +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione iniziale di un Range relativamente a un altro Node.

+ +

Sintassi

+ +
range.setStartAfter(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node dopo il quale deve iniziare il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setStartAfter(referenceNode);
+
+ +

Note

+ +

Il Node padre dell'inizio del Range sarà lo stesso di referenceNode.

+ +

Specification

+ +

setStartAfter

diff --git a/files/it/web/api/range/setstartbefore/index.html b/files/it/web/api/range/setstartbefore/index.html new file mode 100644 index 0000000000..d98800f57b --- /dev/null +++ b/files/it/web/api/range/setstartbefore/index.html @@ -0,0 +1,35 @@ +--- +title: range.setStartBefore +slug: Web/API/Range/setStartBefore +translation_of: Web/API/Range/setStartBefore +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione iniziale di un Range relativamente a un altro Node.

+ +

Sintassi

+ +
range.setStartBefore(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node prima del quale deve iniziare il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setStartBefore(referenceNode);
+
+ +

Note

+ +

Il Node padre dell'inizio del Range sarà lo stesso di referenceNode.

+ +

Specification

+ +

setStartBefore

diff --git a/files/it/web/api/range/startcontainer/index.html b/files/it/web/api/range/startcontainer/index.html new file mode 100644 index 0000000000..e1eb8d3c7f --- /dev/null +++ b/files/it/web/api/range/startcontainer/index.html @@ -0,0 +1,29 @@ +--- +title: range.startContainer +slug: Web/API/Range/startContainer +translation_of: Web/API/Range/startContainer +--- +

{{ APIRef("DOM") }}

+ +

Restituisce il Node dentro il quale comincia il Range.

+ +

Sintassi

+ +
startRangeNode = range.startContainer;
+
+ +

Esempio

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+startRangeNode = range.startContainer;
+
+ +

Note

+ +

Restituisce un riferimento al Node del documento, dentro il quale comincia il Range. Questa proprietà è di sola lettura. Per modificare la posizione dell'inizio di un nodo, si utilizzi i metodi setStart.

+ +

Specifiche

+ +

startParent

diff --git a/files/it/web/api/range/startoffset/index.html b/files/it/web/api/range/startoffset/index.html new file mode 100644 index 0000000000..e0408fa445 --- /dev/null +++ b/files/it/web/api/range/startoffset/index.html @@ -0,0 +1,29 @@ +--- +title: range.startOffset +slug: Web/API/Range/startOffset +translation_of: Web/API/Range/startOffset +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un numero che rappresenta il punto iniziale del Range all'interno di startContainer.

+ +

Sintassi

+ +
startRangeOffset = range.startOffset;
+
+ +

Esempio

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+startRangeOffset = range.startOffset;
+
+ +

Note

+ +

startRangeOffset ha due significati. Se startContainer è un code>Node</code> di tipo Text, Comment, o CDATASection, allora startRangeOffset rappresenta il numero di caratteri dall'inizio di startContainer alla fine di Range, Per tutti gli altri tipi di Node, startRangeOffset rappresenta il numero di nodi figlio tra l'inizio di startContainer e la fine di Range. Questa proprietà è di sola lettura. Per modificare il valore startOffset di un nodo, si utilizzino i metodi setStart.

+ +

Speicifiche

+ +

startOffset

diff --git a/files/it/web/api/range/surroundcontents/index.html b/files/it/web/api/range/surroundcontents/index.html new file mode 100644 index 0000000000..32b94161ef --- /dev/null +++ b/files/it/web/api/range/surroundcontents/index.html @@ -0,0 +1,36 @@ +--- +title: range.surroundContents +slug: Web/API/Range/surroundContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/surroundContents +--- +

{{ ApiRef() }}

+

Sommario

+

Sposta il contenuto di un Range in un nuovo nodo, piazzando il nuovo nodo all'inizio del range specificato.

+

Sintassi

+
range.surroundContents(nuovoNodo);
+
+
+
+ nuovoNodo 
+
+ è un nodo
+
+

Esempio

+
var range = document.createRange();
+var nuovoNodo = document.createElement("p");
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.surroundContents(nuovoNodo);
+
+

Note

+

surroundContents equivale a:

+
nuovoNodo.appendChild(range.extractContents());
+range.insertNode(nuovoNodo)
+
+

Per effetto di questo metodo, i punti estremi del range includono nuovoNodo.

+

Specifiche

+

DOM Level 2 Range: Range.surroundContents

diff --git a/files/it/web/api/range/tostring/index.html b/files/it/web/api/range/tostring/index.html new file mode 100644 index 0000000000..fd3c9d3999 --- /dev/null +++ b/files/it/web/api/range/tostring/index.html @@ -0,0 +1,28 @@ +--- +title: range.toString +slug: Web/API/Range/toString +translation_of: Web/API/Range/toString +--- +

{{ APIRef("DOM") }}

+ +

Restituisce il testo del Range.

+ +

Sintassi

+ +
text = range.toString();
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+text = range.toString();
+
+ +

Note

+ +

Alterare i contenuti di un Range causa una chiamata implicita di toString(), quindi comparare il Range e il testo attraverso un alert dialog è inutile.

+ +

Specifiche

+ +

toString

diff --git a/files/it/web/api/selection/addrange/index.html b/files/it/web/api/selection/addrange/index.html new file mode 100644 index 0000000000..cff46a4d65 --- /dev/null +++ b/files/it/web/api/selection/addrange/index.html @@ -0,0 +1,39 @@ +--- +title: addRange +slug: Web/API/Selection/addRange +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/addRange +--- +

{{ ApiRef() }}

+

Sommario

+

Aggiunge un range alla selezione.

+

Sintassi

+
selezione.addRange(range)
+
+

Parametri

+
+
+ + range +
+
+ Un oggetto range che verrà aggiunto alla selezione.
+
+

Esempio

+
 /* seleziono tutti gli oggetti STRONG all'interno del documento HTML */
+ var strongs = document.getElementsByTagName("strong");
+ var s = window.getSelection();
+ if(s.rangeCount > 0) s.removeAllRanges();
+ for(var i = 0; i < strongs.length; i++) {
+  var range = document.createRange();
+  range.selectNode(strongs[i]);
+  s.addRange(range);
+ }
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/addRange", "it": "it/DOM/Selection/addRange", "pl": "pl/DOM/Selection/addRange" } ) }}

diff --git a/files/it/web/api/selection/anchornode/index.html b/files/it/web/api/selection/anchornode/index.html new file mode 100644 index 0000000000..2dcd33e119 --- /dev/null +++ b/files/it/web/api/selection/anchornode/index.html @@ -0,0 +1,21 @@ +--- +title: anchorNode +slug: Web/API/Selection/anchorNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/anchorNode +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il nodo nel quale inizia la selezione.

+

Sintassi

+
selection.anchorNode
+
+

Note

+

Un utente può creare una selezione da sinistra a destra (nell'ordine del documento) oppure da destra a sinistra (in ordine inverso rispetto al documento). L'anchor è il punto in cui l'utente ha iniziato a selezionare. Per comprendere e visualizzare questo meccanismo, si può tenere premuto il tasto SHIFT e poi premere i tasti freccia; l'anchor rimane immobile ma il focus, cioè l'altro estremo della selezione, si sposta.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/anchorNode", "es": "es/DOM/Selection/anchorNode", "pl": "pl/DOM/Selection/anchorNode" } ) }}

diff --git a/files/it/web/api/selection/anchoroffset/index.html b/files/it/web/api/selection/anchoroffset/index.html new file mode 100644 index 0000000000..0c6de4e0ed --- /dev/null +++ b/files/it/web/api/selection/anchoroffset/index.html @@ -0,0 +1,21 @@ +--- +title: anchorOffset +slug: Web/API/Selection/anchorOffset +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/anchorOffset +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il numero di caratteri che separano il primo carattere della selezione (anchor), dal primo carattere del primo nodo selezionato (anchorNode).

+

Sintassi

+
selezione.anchorOffset
+
+

Note

+

Il valore restituito inizia da 0. Se la selezione comincia con il primo carattere dell'anchorNode, anchorOffset restituisce 0.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/anchorOffset", "es": "es/DOM/Selection/anchorOffset", "pl": "pl/DOM/Selection/anchorOffset" } ) }}

diff --git a/files/it/web/api/selection/collapse/index.html b/files/it/web/api/selection/collapse/index.html new file mode 100644 index 0000000000..63f2407ac1 --- /dev/null +++ b/files/it/web/api/selection/collapse/index.html @@ -0,0 +1,44 @@ +--- +title: collapse +slug: Web/API/Selection/collapse +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/collapse +--- +

{{ ApiRef() }}

+

Sommario

+

Fa collassare la selezione corrente in un singolo punto. Il documento non viene modificato. Se il contenuto è modificabile, il cursore lampeggerà.

+

Sintassi

+
selezione.collapse(nodoPadre,offset);
+
+

Parametri

+
+
+ + nodoPadre +
+
+ Il cursore si troverà all'interno di questo nodo.
+
+
+
+ + offset +
+
+ La distanza in caratteri tra il cursore e l'inizio del testo di + + parentNode + .
+
+

Esempio

+
/* Porta il cursore all'inizio del BODY */
+var body = document.getElementsByTagName("body")[0];
+window.getSelection().collapse(body,0);
+
+
+  
+

{{ languages( { "en": "en/DOM/Selection/collapse", "es": "es/DOM/Selection/collapse", "pl": "pl/DOM/Selection/collapse" } ) }}

diff --git a/files/it/web/api/selection/collapsetoend/index.html b/files/it/web/api/selection/collapsetoend/index.html new file mode 100644 index 0000000000..b7193eb8e6 --- /dev/null +++ b/files/it/web/api/selection/collapsetoend/index.html @@ -0,0 +1,19 @@ +--- +title: collapseToEnd +slug: Web/API/Selection/collapseToEnd +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/collapseToEnd +--- +

{{ ApiRef() }}

+

Sommario

+

Sposta l'anchor della selezione allo stesso punto in cui si trova il focus. Il focus non si muove. Se il contenuto è modificabile, il cursore lampeggerà.

+

Syntax

+
selezione.collapseToEnd()
+
+
+  
+

{{ languages( { "en": "en/DOM/Selection/collapseToEnd", "es": "es/DOM/Selection/collapseToEnd", "pl": "pl/DOM/Selection/collapseToEnd" } ) }}

diff --git a/files/it/web/api/selection/collapsetostart/index.html b/files/it/web/api/selection/collapsetostart/index.html new file mode 100644 index 0000000000..ccf6084f65 --- /dev/null +++ b/files/it/web/api/selection/collapsetostart/index.html @@ -0,0 +1,14 @@ +--- +title: collapseToStart +slug: Web/API/Selection/collapseToStart +translation_of: Web/API/Selection/collapseToStart +--- +

Sommario

+

Sposta il focus della selezione allo stesso punto in cui si trova l'anchor. L'anchor non si muove. Se il contenuto è modificabile, il cursore lampeggerà. +

+

Sintassi

+
selezione.collapseToStart()
+
+
+
+{{ languages( { "en": "en/DOM/Selection/collapseToStart", "es": "es/DOM/Selection/collapseToStart", "pl": "pl/DOM/Selection/collapseToStart" } ) }} diff --git a/files/it/web/api/selection/containsnode/index.html b/files/it/web/api/selection/containsnode/index.html new file mode 100644 index 0000000000..b7729228b6 --- /dev/null +++ b/files/it/web/api/selection/containsnode/index.html @@ -0,0 +1,47 @@ +--- +title: containsNode +slug: Web/API/Selection/containsNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/containsNode +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il nodo specificato fa parte della selezione.

+

Sintassi

+
selezione.containsNode(nodo,nodoParziale)
+
+

Parametri

+
+
+ + nodo +
+
+

Il nodo da cercare all'interno della selezione

+
+
+ + nodoParziale +
+
+ Se è + + true + , containsNode restituisce true nel caso in cui solo una parte di nodo sia contenuta dalla selezione.
+
+ Se è + + false + , containsNode restituisce false nel caso in cui solo una parte di nodo sia contenuta dalla selezione.
+
+

Esempi

+
 /* controlliamo se qualcosa all'interno dell'elemento BODY è stato selezionato */
+ alert(window.getSelection().containsNode(document.body, true));
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/containsNode", "en": "en/DOM/Selection/containsNode", "pl": "pl/DOM/Selection/containsNode" } ) }}

diff --git a/files/it/web/api/selection/deletefromdocument/index.html b/files/it/web/api/selection/deletefromdocument/index.html new file mode 100644 index 0000000000..5a065e7b37 --- /dev/null +++ b/files/it/web/api/selection/deletefromdocument/index.html @@ -0,0 +1,28 @@ +--- +title: deleteFromDocument +slug: Web/API/Selection/deleteFromDocument +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/deleteFromDocument +--- +

{{ ApiRef }}

+ +

Sommario

+ +

Elimina dal documento il testo attualmente rappresentato dall'oggetto selection.

+ +

Sintassi

+ +
selezione.deleteFromDocument()
+
+ +

Esempi

+ +

Un utente seleziona il testo (immaginario) "la capra " all'interno della stringa "sotto la panca la capra crepa". L'utente poi clicca un bottone che esegue la riga JavaScript window.getSelection().deleteFromDocument(). Il testo del documento diventa "sotto la panca crepa".

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/deleteFromDocument", "es": "es/DOM/Selection/deleteFromDocument", "pl": "pl/DOM/Selection/deleteFromDocument" } ) }}

diff --git a/files/it/web/api/selection/extend/index.html b/files/it/web/api/selection/extend/index.html new file mode 100644 index 0000000000..58e022a2a9 --- /dev/null +++ b/files/it/web/api/selection/extend/index.html @@ -0,0 +1,39 @@ +--- +title: extend +slug: Web/API/Selection/extend +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/extend +--- +

{{ ApiRef() }}

+

Sommario

+

Sposta il focus della selezione ad un punto specificato. L'anchor invece resta immobile. La selezione si estenderà dall'anchor fino al nuovo focus, indipendentemente da quale sia la direzione (cioè potrebbe essere inversa rispetto al testo).

+

Sintassi

+
selezione.extend(nodoPadre,offset)
+
+

Parametri

+
+
+ + nodoPadre +
+
+ Il nuovo focus, cioè il nodo fino al quale si estenderà la selezione.
+
+
+
+ + offset +
+
+ Il numero di caratteri che separeranno l'inizio del testo del + + nodoPadre' + dal nuovo focus.
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/extend", "en": "en/DOM/Selection/extend", "pl": "pl/DOM/Selection/extend" } ) }}

diff --git a/files/it/web/api/selection/focusnode/index.html b/files/it/web/api/selection/focusnode/index.html new file mode 100644 index 0000000000..8c8653b829 --- /dev/null +++ b/files/it/web/api/selection/focusnode/index.html @@ -0,0 +1,21 @@ +--- +title: focusNode +slug: Web/API/Selection/focusNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/focusNode +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il nodo nel quale la selezione termina

+

Sintassi

+
selection.focusNode
+
+

Note

+

Un utente può creare una selezione da sinistra a destra (nell'ordine del documento) oppure da destra a sinistra (in ordine inverso rispetto al documento). L'anchor è il punto in cui l'utente ha iniziato a selezionare, il focus è il punto in cui la selezione è terminata. Per comprendere e visualizzare questo meccanismo, si può tenere premuto il tasto SHIFT e poi premere i tasti freccia; l'anchor rimane immobile ma il focus, cioè l'altro estremo della selezione, si sposta.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/focusNode", "es": "es/DOM/Selection/focusNode", "pl": "pl/DOM/Selection/focusNode" } ) }}

diff --git a/files/it/web/api/selection/focusoffset/index.html b/files/it/web/api/selection/focusoffset/index.html new file mode 100644 index 0000000000..92978a8dba --- /dev/null +++ b/files/it/web/api/selection/focusoffset/index.html @@ -0,0 +1,21 @@ +--- +title: focusOffset +slug: Web/API/Selection/focusOffset +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/focusOffset +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il numero di caratteri che separano il primo carattere della selezione (focus) dal primo carattere dell'ultimo nodo della selezione (focusNode).

+

Sintassi

+
selezione.focusOffset
+
+

Note

+

Questo valore inizia da 0. Se la selezione termina con il primo carattere di focusNode, focusOffset restituisce 0.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/focusOffset", "es": "es/DOM/Selection/focusOffset", "pl": "pl/DOM/Selection/focusOffset" } ) }}

diff --git a/files/it/web/api/selection/getrangeat/index.html b/files/it/web/api/selection/getrangeat/index.html new file mode 100644 index 0000000000..f5307b03d9 --- /dev/null +++ b/files/it/web/api/selection/getrangeat/index.html @@ -0,0 +1,37 @@ +--- +title: getRangeAt +slug: Web/API/Selection/getRangeAt +translation_of: Web/API/Selection/getRangeAt +--- +

Sommario

+

Restituisce un oggetto range che rappresenta i nodi attualmente selezionati.

+

Sintassi

+
range =sel.getRangeAt(index)
+
+

Parametri

+
+
+ range
+
+ L'oggetto range che verrà restituito.
+
+
+
+ + index +
+
+ L'indice del range da restituire; parte da zero. Un valore negativo o un numero uguale o maggiore a rangeCount causa un errore.
+
+

Esempi

+
var ranges = [];
+
+sel = window.getSelection();
+
+for(var i = 0; i < sel.rangeCount; i++) {
+ ranges[i] = sel.getRangeAt(i);
+}
+/* Ogni oggetto nei ranghi ora è un
+ * oggetto range che rappresenta uno dei ranghi
+ * presenti nella selezione attuale. */
+
diff --git a/files/it/web/api/selection/index.html b/files/it/web/api/selection/index.html new file mode 100644 index 0000000000..aca2185be0 --- /dev/null +++ b/files/it/web/api/selection/index.html @@ -0,0 +1,102 @@ +--- +title: Selection +slug: Web/API/Selection +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection +--- +

{{ ApiRef() }}

+ +

Sommario

+ +

E' la classe dell'oggetto restituito da window.getSelection ed altri metodi.

+ +

Descrizione

+ +

L'oggetto selection rappresenta i range che l'utente ha selezionato. In una selezione fatte dall'utente col mouse possono esserci più range, ad esempio perchè tramite posizionamento assoluto nei CSS due contenitori(DIV) distanti fra di loro nel flusso del documento appaiono vicini sul display e vengono selezionati insieme. Per accedere ai diversi Range che formano una selezione, si usa il metodo getRangeAt().

+ +

In JavaScript, l'oggetto selection può venire modificato come se fosse una stringa, ad esempio vi si può concatenare una stringa, perchè in questi casi viene automaticamente applicato il metodo toString. Ad esempio, con il codice seguente, nell'alert apparirà una stringa:

+ +
selObj = window.getSelection();
+window.alert(selObj);
+
+ +

ma la variabile selObj rimane un oggetto di tipo selection e non di tipo String, solo che all'occorrenza gli viene applicato il metodo toString().

+ +

Glossario

+ +

Altre parole chiave usate in questa sezione.

+ +
+
anchor
+
Rappresenta il punto in cui inizia una selezione. Quando si fa una selezione con il mouse, l'anchor è il punto in cui il mouse è stato premuto e non cambia mentre si muove il mouse.
+
focus
+
Rappresenta il punto in cui finisce una selezione. Quando si fa una selezione con il mouse, il focus si muove in corrispondenza del mouse(mentre il tasto è premuto), e quando il tasto viene rilasciato, rappresenta il punto in cui finisce la selezione.
+
range
+
Rappresenta un insieme di nodi contigui del documento. Un range può contenere interi nodi come anche porzioni di nodi(nel caso di nodi testuali). Un range può essere recuperato da una selezione attraverso l'oggetto range, oppure può essere creato via script e aggiunto o rimosso da una selezione.
+
+ +

Proprietà

+ +
+
anchorNode
+
Restituisce il nodo in cui inizia la selezione.
+
anchorOffset
+
Restituisce il numero di caratteri fra l'inizio del nodo testuale e l'anchor, all'interno dell'anchorNode.
+
focusNode
+
Restituisce il nodo in cui finisce la selezione.
+
focusOffset
+
Restituisce il numero di caratteri fra l'inizio del nodo testuale e il focus, all'interno del focusNode.
+
isCollapsed
+
Restituisce un valore booleano che indica se l'anchor e il focus di una selezione si trovano nella stessa posizione.
+
rangeCount
+
Restituisce il numero di range di cui è composta una selezione.
+
+ +

Metodi

+ +
+
getRangeAt
+
Restituisce un oggetto range che rappresenta uno dei range attualmente selezionati.
+
collapse
+
Collassa la selezione corrente in un singolo punto.
+
extend
+
Muove il focus della selezione in uno specifico punto.
+
collapseToStart
+
Muove il focus della selezione nel punto in cui c'è l'anchor (che non viene spostata).
+
collapseToEnd
+
Muove il focus della selezione nel punto in cui c'è il focus (che non viene spostato).
+
selectAllChildren
+
Aggiunge tutti i figli del nodo specificato alla selezione.
+
addRange
+
Aggiunge un oggetto range alla selezione..
+
removeRange
+
Rimuove un range dalla selezione.
+
removeAllRanges
+
Rimuove tutti i range dalla selezione.
+
deleteFromDocument
+
Elimina dal documento il contenuto della selezione.
+
selectionLanguageChange
+
 
+
toString
+
Restituisce una stringa che rappresenta l'oggetto selection (cioè il testo attualmente selezionato).
+
containsNode
+
Indica se un certo nodo fa parte dell'oggetto selection.
+
+ +

Guarda anche

+ +

window.getSelection, Range

+ + + + + +
 
+ +

{{ languages( { "en": "en/DOM/Selection", "es": "es/DOM/Selection", "pl": "pl/DOM/Selection" } ) }}

diff --git a/files/it/web/api/selection/iscollapsed/index.html b/files/it/web/api/selection/iscollapsed/index.html new file mode 100644 index 0000000000..f91cfc5d1d --- /dev/null +++ b/files/it/web/api/selection/iscollapsed/index.html @@ -0,0 +1,24 @@ +--- +title: isCollapsed +slug: Web/API/Selection/isCollapsed +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/isCollapsed +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un booleano che indica se l'inizio e la fine della selezione corrente corrispondono (cioè restituisce true se la selezione è + + collassata + ).

+

Sintassi

+
selection.isCollapsed
+
+

Note

+

Anche una selezione collassata può avere un rangeCount più grande di 0. Anche selezione.getRangeAt(0) potrebbe restituire un range collassato.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/isCollapsed", "es": "es/DOM/Selection/isCollapsed", "pl": "pl/DOM/Selection/isCollapsed" } ) }}

diff --git a/files/it/web/api/selection/rangecount/index.html b/files/it/web/api/selection/rangecount/index.html new file mode 100644 index 0000000000..db26f87b6f --- /dev/null +++ b/files/it/web/api/selection/rangecount/index.html @@ -0,0 +1,19 @@ +--- +title: rangeCount +slug: Web/API/Selection/rangeCount +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/rangeCount +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il numero di range presenti nella selezione.

+

Sintassi

+
selection.rangeCount
+
+

Note

+

Prima che l'utente clicchi su una pagina appena caricata, rangeCount vale 0. Un utente normalmente può selezionare un solo range alla volta, quindi rangeCount solitamente vale 1. Tramite lo script è possibile far si che la selezione contenga più di un range.

+

{{ languages( { "en": "en/DOM/Selection/rangeCount", "es": "es/DOM/Selection/rangeCount", "pl": "pl/DOM/Selection/rangeCount" } ) }}

diff --git a/files/it/web/api/selection/removeallranges/index.html b/files/it/web/api/selection/removeallranges/index.html new file mode 100644 index 0000000000..b9aa7bba25 --- /dev/null +++ b/files/it/web/api/selection/removeallranges/index.html @@ -0,0 +1,19 @@ +--- +title: removeAllRanges +slug: Web/API/Selection/removeAllRanges +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/removeAllRanges +--- +

{{ ApiRef() }}

+

Sommario

+

Rimuove tutti i range dalla selezione, impostando le proprietà anchorNode e focusNode a null. Dopo la chiamata a questo metodo, non vi saranno elementi selezionati nella pagina.

+

Sintassi

+
selezione.removeAllRanges();
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/removeAllRanges", "en": "en/DOM/Selection/removeAllRanges", "pl": "pl/DOM/Selection/removeAllRanges" } ) }}

diff --git a/files/it/web/api/selection/removerange/index.html b/files/it/web/api/selection/removerange/index.html new file mode 100644 index 0000000000..cb4186afe9 --- /dev/null +++ b/files/it/web/api/selection/removerange/index.html @@ -0,0 +1,38 @@ +--- +title: removeRange +slug: Web/API/Selection/removeRange +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/removeRange +--- +

{{ ApiRef() }}

+

Sommario

+

Rimuove un range dalla selezione.

+

Sintassi

+
selezione.removeRange(range)
+
+

Parametri

+
+
+ + range +
+
+ Un oggetto range che verrà rimosso dalla selezione.
+
+

Esempio

+
/* Da programma, è possibile selezionare più di un range.
+   Questo script li deseleziona tutti tranne il primo. */
+s = window.getSelection();
+if(s.rangeCount > 1) {
+ for(var i = 1; i < s.rangeCount; i++) {
+  s.removeRange(s.getRangeAt(i));
+ }
+}
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/removeRange", "en": "en/DOM/Selection/removeRange", "pl": "pl/DOM/Selection/removeRange" } ) }}

diff --git a/files/it/web/api/selection/selectallchildren/index.html b/files/it/web/api/selection/selectallchildren/index.html new file mode 100644 index 0000000000..2df5613a3d --- /dev/null +++ b/files/it/web/api/selection/selectallchildren/index.html @@ -0,0 +1,39 @@ +--- +title: selectAllChildren +slug: Web/API/Selection/selectAllChildren +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/selectAllChildren +--- +

{{ ApiRef() }}

+

Sommario

+

Aggiunge alla selezione tutti i figli del nodo specificato. La selezione precedente viene perduta.

+

Sintassi

+
selezione.selectAllChildren(nodoPadre)
+
+

Parametri

+
+
+ + nodoPadre +
+
+ Tutti i figli di + + nodoPadre + verranno aggiunti alla selezione. + + nodoPadre + invece non verrà selezionato.
+
+

Esempio

+
pieDiPagina = document.getElementById("pieDiPagina");
+window.getSelection().selectAllChildren(pieDiPagina);
+/* ora tutto ciò che si trova a piè di pagina è selezionato */
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/selectAllChildren", "it": "it/DOM/Selection/selectAllChildren", "pl": "pl/DOM/Selection/selectAllChildren" } ) }}

diff --git a/files/it/web/api/selection/tostring/index.html b/files/it/web/api/selection/tostring/index.html new file mode 100644 index 0000000000..17a6be112b --- /dev/null +++ b/files/it/web/api/selection/tostring/index.html @@ -0,0 +1,27 @@ +--- +title: toString +slug: Web/API/Selection/toString +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/toString +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce una stringa che rappresenta l'oggetto selection. Generalmente è il testo selezionato.

+

Sintassi

+
stringa =selezione.toString()
+
+ +

Note

+

In JavaScript, questo metodo viene chiamato implicitamente quando un oggetto selection viene passato a un metodo o a una funzione che richiede una stringa:

+
alert(window.getSelection()) // la chiamata scritta da noi
+alert(window.getSelection().toString())  // la chiamata effettiva
+
+
+  
+

{{ languages( { "en": "en/DOM/Selection/toString", "es": "es/DOM/Selection/toString", "pl": "pl/DOM/Selection/toString" } ) }}

diff --git a/files/it/web/api/storage/clear/index.html b/files/it/web/api/storage/clear/index.html new file mode 100644 index 0000000000..e99735a34f --- /dev/null +++ b/files/it/web/api/storage/clear/index.html @@ -0,0 +1,126 @@ +--- +title: Storage.clear() +slug: Web/API/Storage/clear +tags: + - API + - Persistenza + - Persistenza Browser + - Riferimento + - metodo +translation_of: Web/API/Storage/clear +--- +

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

+ +

Il metodo clear() dell'interfaccia {{domxref("Storage")}} , quando invocato, pulisce tutte le chiavi salvate.

+ +

Sintassi

+ +
storage.clear();
+ +

Return value

+ +

{{jsxref("undefined")}}.

+ +

Esempi

+ +

La seguente funzione crea tre coppie chiave/valore in local storage, infine le elimina invocando il metodo clear().

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'miGato.png');
+
+  localStorage.clear();
+}
+ +
+

Note: Per un esempio reale guarda Web Storage Demo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità browser {{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

Ogni browser riserva una quantità di memoria differente per localStorage e sessionStorage. Qui si trova il dettaglio di tutte le quantità di memoria per i vari browser.

+ +
+

Note: da iOS 5.1, Safari Mobile persiste i dati di localStorage nella cartella cache, che è soggetta a pulizie occasionali, su ordine del sistema operativo, tipicamente in condizioni di poco spazio libero sul dispositivo.

+
+ +

Vedi anche

+ +

Utilizzo di Web Storage API

diff --git a/files/it/web/api/storage/getitem/index.html b/files/it/web/api/storage/getitem/index.html new file mode 100644 index 0000000000..701fff9910 --- /dev/null +++ b/files/it/web/api/storage/getitem/index.html @@ -0,0 +1,144 @@ +--- +title: Storage.getItem() +slug: Web/API/Storage/getItem +tags: + - API + - Memoria locale + - memoria + - metodo +translation_of: Web/API/Storage/getItem +--- +

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

+ +

Il metodo getItem() dell'interfaccia {{domxref("Storage")}} restituisce il valore contenuto nella chiave passata a parametro.

+ +

Syntax

+ +
var aValue = storage.getItem(keyName);
+
+ +

Parametri

+ +
+
keyName
+
Una {{domxref("DOMString")}} che contiene il nome della chiave da cui si vuole ottenerne il valore associato.
+
+ +

Valore restituito

+ +

Una {{domxref("DOMString")}} contenente il valore associato alla chiave. Se la chiave non esiste, null viene restituito.

+ +

Esempio

+ +

La funzione seguente ottiene tre elementi dalla memoria locale, per poi utilizzarli per impostare alcuni stili personalizzati nella pagina.

+ +
function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

Nota: Per vedere questo esempio usato nel mondo reale, guarda il nostro Web Storage Demo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità browsers

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

Tutti i browser hanno differenti livelli capacitativi per entrambi localStorage e sessionStorage. Qui puoi trovare una lista dettagliata delle capacità di memoria per browser differenti.

+ +
+

Nota: da iOS 5.1, Safari Mobile immagazzina i dati di localStorage nella cartella cache, che viene svuotata occasionalmente a discrezione dell'OS, solitamente quando lo spazio disponibile scarseggia.

+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/storage/index.html b/files/it/web/api/storage/index.html new file mode 100644 index 0000000000..ab30b1de21 --- /dev/null +++ b/files/it/web/api/storage/index.html @@ -0,0 +1,161 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - API + - Dati + - Interfaccia + - Riferimento + - Storage + - Web Storage +translation_of: Web/API/Storage +--- +

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

+ +

L'interfaccia Storage dell'API Web Storage fornisce accesso allo storage di sessione o allo storage locale per un dato dominio, permettendo, ad esempio, l'aggiunta, modifica o rimozione di dati salvati.

+ +

Se si vuole manipolare lo storage di sessione per un dominio, va invocato il metodo {{domxref("Window.sessionStorage")}}; se si vuole manipolare lo storage locale per un dominio, va invocato {{domxref("Window.localStorage")}}.

+ +

Proprietà

+ +
+
{{domxref("Storage.length")}} {{readonlyInline}}
+
Ritorna un intero che rappresenta il numero di oggetti presenti in un oggetto Storage.
+
+ +

Metodi

+ +
+
{{domxref("Storage.key()")}}
+
Dato un numero n,  ritorna il nome dell'n-esima chiave nello storage.
+
+ +
+
{{domxref("Storage.getItem()")}}
+
Dato un nome di chiave, ritorna il corrispondente valore.
+
{{domxref("Storage.setItem()")}}
+
Dati un nome di chiave e un valore, aggiunge questa chiave allo storage, o aggiorna il valore della chiave se essa esiste già.
+
{{domxref("Storage.removeItem()")}}
+
Dato un nome di chiave, rimuove quella chiave dallo storage.
+
{{domxref("Storage.clear()")}}
+
Rimuove tutte le chiavi dallo storage.
+
+ +

Esempi

+ +

Questo è un esempio di accesso all'oggetto Storage tramite chiamata a localStorage. In primo luogo, si verifica se lo storage locale contenga oggetti usando !localStorage.getItem('bgcolor'). Se il test passa, si invoca una funzione setStyles() che recupera gli oggetti tramite {{domxref("localStorage.getItem()")}} e ne usa i valori per aggiornare gli stili della pagina. Se il test fallisce, viene invocata un'altra funzione, populateStorage(), che usa {{domxref("localStorage.setItem()")}} per settare i valori, per poi ritornare setStyles().

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

Nota: Per vedere quest'esempio girare, si veda la Web Storage Demo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}{{Spec2('Web Storage')}} 
+ +

Compatibilità dei browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Supporto minimo2.1{{ CompatUnknown }}8113.2[1]
+
+ +

[1] A partite da iOS 5.1, Safari Mobile salva i dati del localStorage in una cartella di cache, soggetta occasionalmente a pulizia su richiesta del sistema operativo, tipicamente in mancanza di spazio.

+ +

I vari browser hanno diversi livelli di capacità sia per localStorage che per sessionStorage. Qui si trova un resoconto dettagliato delle capacità di immagazzinamento dei vari browser.

+ +

Vedere anche

+ +

Usare la API Web Storage

diff --git a/files/it/web/api/storage/setitem/index.html b/files/it/web/api/storage/setitem/index.html new file mode 100644 index 0000000000..c96e805956 --- /dev/null +++ b/files/it/web/api/storage/setitem/index.html @@ -0,0 +1,133 @@ +--- +title: Storage.setItem() +slug: Web/API/Storage/setItem +translation_of: Web/API/Storage/setItem +--- +

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

+ +

Il metodo setItem(), che fa parte della funzionalità {{domxref("Storage")}} , quando passa il nome di una chiave e un valore, aggiunge questa chiave allo storage, oppure se la chiave esiste già aggiorna il valore della chiave stessa.

+ +

Sintassi

+ +
storage.setItem(keyName, keyValue);
+ +

Parametri

+ +
+
keyName
+
Il {{domxref("DOMString")}} contiene il nome della chiave che si vuole creare o aggiornare.
+
keyValue
+
Il {{domxref("DOMString")}} contiene il valore che si vuole dare alla chiave che si sta creando o aggiornando.
+
+ +

Valore di ritorno

+ +

{{jsxref("undefined")}}.

+ +

Eccezioni

+ +

setItem() potrebbe dar luogo a eccezioni se lo storage è pieno. Ad esempio, in Safari Mobile (da iOS 5) non è possibile salvare dati quando l'utente è in modalità in incognito (questo perché Safari non alloca spazio per l'utente nella modalità in incognito, al contrario degli altri browsers, i quali permettono di usare lo storage nella modalità in incognito, salvando i dati in uno spazio apposito e separato). Quindi è sempre meglio implementare delle funzioni che gestiscano le eccezioni quando si usa setItem().

+ +

Esempi

+ +

Le seguenti funzioni creano tre oggetti all'interno del local storage:

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}
+ +
+

Nota: Se vuoi un esempio veritiero, dai un'occhiata alla pagina Web Storage Demo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('Web Storage', '#dom-storage-setitem', 'setItem()')}}{{Spec2('Web Storage')}}
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

Tutti i browser hanno diversi livelli di gestione sia del localStorage che del sessionStorage. Qui trovi ulteriori dettagli.

+ +
+

Nota: da iOS 5.1, Safari Mobile memorizza i dati del localStorage nella cartella delle cache, la quale, ogni tanto, viene cancellata (ricorda che questo spazio è solitamente piccolo).

+
+ +

Altre informazioni

+ +

Come usare le Web Storage API

diff --git a/files/it/web/api/urlutils/index.html b/files/it/web/api/urlutils/index.html new file mode 100644 index 0000000000..05cc01aa9b --- /dev/null +++ b/files/it/web/api/urlutils/index.html @@ -0,0 +1,205 @@ +--- +title: URLUtils +slug: Web/API/URLUtils +translation_of: Web/API/HTMLHyperlinkElementUtils +--- +

{{ApiRef("URL API")}}{{SeeCompatTable}}

+ +

The URLUtils interface defines utility methods to work with URLs.

+ +

There are no objects of this type, but several objects implement it, such as {{domxref("Location")}}, {{domxref("URL")}}, {{domxref("HTMLAnchorElement")}}, and {{domxref("HTMLAreaElement")}}.

+ +

Properties

+ +

This interface doesn't inherit any property.

+ +
+
{{domxref("URLUtils.href")}}
+
Is a {{domxref("DOMString")}} containing the whole URL.
+
{{domxref("URLUtils.protocol")}}
+
Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final ':'.
+
{{domxref("URLUtils.host")}}
+
Is a {{domxref("DOMString")}} containing the host, that is the hostname, and then, if the port of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a ':', and the port of the URL.
+
{{domxref("URLUtils.hostname")}}
+
Is a {{domxref("DOMString")}} containing the domain of the URL.
+
{{domxref("URLUtils.port")}}
+
Is a {{domxref("DOMString")}} containing the port number of the URL.
+
{{domxref("URLUtils.pathname")}}
+
Is a {{domxref("DOMString")}} containing an initial '/' followed by the path of the URL.
+
{{domxref("URLUtils.search")}}
+
Is a {{domxref("DOMString")}} containing a '?' followed by the parameters of the URL.
+
{{domxref("URLUtils.hash")}}
+
Is a {{domxref("DOMString")}} containing a '#' followed by the fragment identifier of the URL.
+
{{domxref("URLUtils.username")}}
+
Is a {{domxref("DOMString")}} containing the username specified before the domain name.
+
{{domxref("URLUtils.password")}}
+
Is a {{domxref("DOMString")}} containing the password specified before the domain name.
+
{{domxref("URLUtils.origin")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.
+
{{domxref("URLUtils.searchParams")}}
+
Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.
+
+ +

Methods

+ +

This interface doesn't inherit any method.

+ +
+
{{domxref("URLUtils.toString()")}}
+
Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('URL', '#urlutils', 'URLUtils')}}{{Spec2('URL')}}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}} [1]{{CompatGeckoDesktop("22")}} [1]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
searchParams{{CompatUnknown}}{{CompatGeckoDesktop("29")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
username and password{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin {{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin on Windows.location{{CompatUnknown}}{{CompatGeckoDesktop("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("22")}} [1]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
searchParams{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
username and password{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin {{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin on Windows.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Though not grouped in a single abstract interface, these methods are directly available on the interfaces that implement it, if this interface is supported.

+ +

See also

+ + + +

+
+
+ +
 
+
diff --git a/files/it/web/api/webgl_api/index.html b/files/it/web/api/webgl_api/index.html new file mode 100644 index 0000000000..c085be1e41 --- /dev/null +++ b/files/it/web/api/webgl_api/index.html @@ -0,0 +1,254 @@ +--- +title: 'WebGL: Grafica 2D e 3D per il web' +slug: Web/API/WebGL_API +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +
+

WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements. This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device.

+
+ +

Support for WebGL is present in Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+, and Microsoft Edge build 10240+; however, the user's device must also have hardware that supports these features.

+ +

The {{anch("WebGL 2")}} API introduces support for much of the OpenGL ES 3.0 feature set; it's provided through the {{domxref("WebGL2RenderingContext")}} interface.

+ +

The {{HTMLElement("canvas")}} element is also used by the Canvas API to do 2D graphics on web pages.

+ +

Reference

+ +

Standard interfaces

+ +
+ +
+ +

Extensions

+ +
+ +
+ +

Events

+ + + +

Constants and types

+ + + +

WebGL 2

+ +

WebGL 2 is a major update to WebGL which is provided through the {{domxref("WebGL2RenderingContext")}} interface. It is based on OpenGL ES 3.0 and new features include:

+ + + +

See also the blog post "WebGL 2 lands in Firefox" and webglsamples.org/WebGL2Samples for a few demos.

+ +

Guides and tutorials

+ +

Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.

+ +

Guides

+ +
+
Data in WebGL
+
A guide to variables, buffers, and other types of data used when writing WebGL code.
+
WebGL best practices
+
Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.
+
Using extensions
+
A guide to using WebGL extensions.
+
+ +

Tutorials

+ +
+
WebGL tutorial
+
A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.
+
+ +

Examples

+ +
+
A basic 2D WebGL animation example
+
This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.
+
WebGL by example
+
A series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.
+
+ +

Advanced tutorials

+ +
+
WebGL model view projection
+
A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.
+
Matrix math for the web
+
A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.
+
+ +

Resources

+ + + +

Libraries

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}}
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}}
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}Builds on top of WebGL 1. Based on OpenGL ES 3.0.
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Initial definition. Based on OpenGL ES 2.0
+ +

Browser compatibility

+ +

WebGL 1

+ +
+ + +

{{Compat("api.WebGLRenderingContext", 0)}}

+ +

WebGL 2

+ + + +

{{Compat("api.WebGL2RenderingContext", 0)}}

+
+ +

Compatibility notes

+ +

In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the webgl context name, but older ones need experimental-webgl as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name webgl2.

+ +

Gecko notes

+ +

WebGL debugging and testing

+ +

Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:

+ +
+
webgl.min_capability_mode
+
A Boolean property that, when true, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is false by default.
+
webgl.disable_extensions
+
A Boolean property that, when true, disables all WebGL extensions. This is false by default.
+
+ +

See also

+ + diff --git a/files/it/web/api/websocket/index.html b/files/it/web/api/websocket/index.html new file mode 100644 index 0000000000..af8738a82a --- /dev/null +++ b/files/it/web/api/websocket/index.html @@ -0,0 +1,148 @@ +--- +title: WebSocket +slug: Web/API/WebSocket +tags: + - API + - NeedsContent + - NeedsTranslation + - TopicStub + - WebSocket + - WebSockets +translation_of: Web/API/WebSocket +--- +
{{APIRef("Web Sockets API")}}
+ +

The WebSocket object provides the API for creating and managing a WebSocket connection to a server, as well as for sending and receiving data on the connection.

+ +

To construct a WebSocket, use the WebSocket() constructor.

+ +

Constructor

+ +
+
{{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}
+
Returns a newly created WebSocket object.
+
+ +

Constants

+ + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValue
WebSocket.CONNECTING0
WebSocket.OPEN1
WebSocket.CLOSING2
WebSocket.CLOSED3
+ +

Properties

+ +
+
{{domxref("WebSocket.binaryType")}}
+
The binary data type used by the connection.
+
{{domxref("WebSocket.bufferedAmount")}} {{readonlyinline}}
+
The number of bytes of queued data.
+
{{domxref("WebSocket.extensions")}} {{readonlyinline}}
+
The extensions selected by the server.
+
{{domxref("WebSocket.onclose")}}
+
An event listener to be called when the connection is closed.
+
{{domxref("WebSocket.onerror")}}
+
An event listener to be called when an error occurs.
+
{{domxref("WebSocket.onmessage")}}
+
An event listener to be called when a message is received from the server.
+
{{domxref("WebSocket.onopen")}}
+
An event listener to be called when the connection is opened.
+
{{domxref("WebSocket.protocol")}} {{readonlyinline}}
+
The sub-protocol selected by the server.
+
{{domxref("WebSocket.readyState")}} {{readonlyinline}}
+
The current state of the connection.
+
{{domxref("WebSocket.url")}} {{readonlyinline}}
+
The absolute URL of the WebSocket.
+
+ +

Methods

+ +
+
{{domxref("WebSocket.close", "WebSocket.close([code[, reason]])")}}
+
Closes the connection.
+
{{domxref("WebSocket.send", "WebSocket.send(data)")}}
+
Enqueues data to be transmitted.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
close
+
Fired when a connection with a WebSocket is closed.
+ Also available via the onclose property
+
error
+
Fired when a connection with a WebSockethas been closed because of an error, such as when some data couldn't be sent.
+ Also available via the onerror property.
+
message
+
Fired when data is received through a WebSocket.
+ Also available via the onmessage property.
+
open
+
Fired when a connection with a WebSocketis opened.
+ Also available via the onopen property.
+
+ +

Examples

+ +
// Create WebSocket connection.
+const socket = new WebSocket('ws://localhost:8080');
+
+// Connection opened
+socket.addEventListener('open', function (event) {
+    socket.send('Hello Server!');
+});
+
+// Listen for messages
+socket.addEventListener('message', function (event) {
+    console.log('Message from server ', event.data);
+});
+ +

Specifications

+ + + + + + + + + + + + +
SpecificationStatus
{{SpecName("HTML WHATWG", "#the-websocket-interface", "WebSocket")}}{{Spec2("HTML WHATWG")}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.WebSocket")}}

+
+ +

See also

+ + diff --git a/files/it/web/api/websocket/websocket/index.html b/files/it/web/api/websocket/websocket/index.html new file mode 100644 index 0000000000..8170b8aead --- /dev/null +++ b/files/it/web/api/websocket/websocket/index.html @@ -0,0 +1,48 @@ +--- +title: WebSocket() +slug: Web/API/WebSocket/WebSocket +translation_of: Web/API/WebSocket/WebSocket +--- +

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

+

Il costruttore WebSocket() restituisce un nuovo oggetto WebSocket {{domxref("WebSocket")}}.

+ +

Sintassi

+ +
var aWebSocket = new WebSocket(url [, protocols]);
+ +

Parametri

+ +
+
url
+
Corrisponde al URL al quale ci si vuole connetterse, questo dovrebbe essere l'URL a cui risponderà il server WebSocket.
+
protocols {{optional_inline}}
+
una singola stringa di protocollo o un array di stringhe di protocollo. Queste stringhe vengono utilizzate per indicare i sub-protocolli, in modo che un server possa implementare più sub-protocolli WebSocket (ad esempio, è possibile che un server sia in grado di gestire diversi tipi di interazioni a seconda del protocollo specificato). Se non si specifica una stringa di protocollo, si presume una stringa vuota.
+
+ +

Exceptions thrown

+ +
+
SECURITY_ERR
+
La porta a cui si sta tentando la connessione risulta bloccata.
+
+ +

Specifice

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-websocket', 'the WebSocket constructor')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibili

+ + diff --git a/files/it/web/api/window/alert/index.html b/files/it/web/api/window/alert/index.html new file mode 100644 index 0000000000..bfbb04052c --- /dev/null +++ b/files/it/web/api/window/alert/index.html @@ -0,0 +1,36 @@ +--- +title: Window.alert() +slug: Web/API/Window/alert +translation_of: Web/API/Window/alert +--- +

{{ APIRef }}

+ +

Mostra una finestra di avviso contenente il testo specificato.

+ +

Sintassi

+ +
window.alert(messaggio);
+
+ + + +

Esempio

+ +
window.alert("Ciao, mondo!");
+// il prefisso "window." è opzionale, quindi
+// alert("Ciao, mondo!"); ha lo stesso effetto
+
+ +

Note

+ +

La finestra di avviso dovrebbe essere utilizzata per i messaggi che non richiedono alcuna risposta da parte dell'utente, se non la conferma che tale messaggio è stato letto.

+ +

Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di permettere al resto dell'interfaccia del programma finchè la finestra non è chiusa. Non si dovrebbe abusare delle funzioni che creano questo tipo di finestre.

+ +

I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare u netidi di nsIPromptService, invece di alert.

+ +

Specifiche

+ +

HTML5

diff --git a/files/it/web/api/window/back/index.html b/files/it/web/api/window/back/index.html new file mode 100644 index 0000000000..7b24f97b28 --- /dev/null +++ b/files/it/web/api/window/back/index.html @@ -0,0 +1,27 @@ +--- +title: Window.back() +slug: Web/API/Window/back +translation_of: Web/API/Window/back +--- +
{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}
+ +

Sommario

+ +

Riporta la finestra corrente all'ultima pagina visitata, o alla pagina più indietro nella Cronologia del browser.

+ +

Sintassi

+ +
window.back()
+
+ +

Esempio

+ +
function vaiIndietro() {
+   if ( possoAndareIndietro )
+      window.back();
+}
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/blur/index.html b/files/it/web/api/window/blur/index.html new file mode 100644 index 0000000000..de26372766 --- /dev/null +++ b/files/it/web/api/window/blur/index.html @@ -0,0 +1,26 @@ +--- +title: Window.blur() +slug: Web/API/Window/blur +translation_of: Web/API/Window/blur +--- +

{{APIRef}}

+ +

Deseleziona la finestra, come se l'utente avesse cliccato altrove.

+ +

Sintassi

+ +
window.blur()
+
+ +

Esempio

+ +
window.blur();
+
+ +

Note

+ +

Non ha effetto se la finestra non è selezionata. Si veda anche window.focus.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/close/index.html b/files/it/web/api/window/close/index.html new file mode 100644 index 0000000000..de07d87f7b --- /dev/null +++ b/files/it/web/api/window/close/index.html @@ -0,0 +1,72 @@ +--- +title: Window.close() +slug: Web/API/Window/close +translation_of: Web/API/Window/close +--- +

{{APIRef}}

+ +

Il metodo Window.close() chiude la finestra corrente, oppure quella sulla quale è invocato.

+ +

Questo metodo può essere invocato solo su finestre che sono state aperte da uno script  utilizzando il metodo {{domxref("window.open()")}}. Se la finestra non è stata aperta mediante script, nella Console JavaScript apparirà il seguente errore: Scripts may not close windows that were not opened by script.

+ +

Sintassi

+ +
window.close();
+ +

Esempi

+ +

Chiudere una finestra aperta mediante window.open()

+ +

Questo esempio mostra come chiudere una finestra aperta da uno script mediante l'invocazione di {{domxref("window.open()")}}.

+ +
<script>
+//Variabile globale in cui si memorizza un riferimento alla finestra aperta
+var openedWindow;
+
+function openWindow()
+{
+  openedWindow = window.open('moreinfo.htm');
+}
+
+function closeOpenedWindow()
+{
+  openedWindow.close();
+}
+</script>
+
+ +

Chiudere la finestra corrente

+ +

Quando si invoca direttamente il metodo close() sull'oggetto window, piuttosto che invocare close() su una istanza di window, il browser chiuderà la finestra in primo piano, indipendentemente dal fatto che uno script abbia creato quella finestra oppure no.  (Firefox 35.0.1: gli script non possono chiudere una finestra che non hanno aperto)

+ +
<script>
+function closeCurrentWindow()
+{
+  window.close();
+}
+</script>
+
+ +

Specifica

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}{{Spec2('HTML WHATWG')}} 
+ + +

Browser compatibility

+ + + +

{{Compat("api.Window.close")}}

diff --git a/files/it/web/api/window/closed/index.html b/files/it/web/api/window/closed/index.html new file mode 100644 index 0000000000..66152b63e7 --- /dev/null +++ b/files/it/web/api/window/closed/index.html @@ -0,0 +1,66 @@ +--- +title: Window.closed +slug: Web/API/Window/closed +translation_of: Web/API/Window/closed +--- +
{{APIRef}}
+ +

Questa proprietà indica se la finestra è chiusa.

+ +

Sintassi

+ +
var isClosed = window.closed;
+
+ +

Questa proprietà è di sola lettura.

+ +

Valori restituiti

+ +
+
isClosed
+
un booleano; valori possibili:
+
+ + + +

Esempi

+ +

Cambiare l'URL di una finestra da una popup

+ +

L'esempio seguente mostra come una finestra popup possa contenere codice JavaScript che modifichi l'URL della finestra che l'ha generata. Prima di tentare di modificare l'URL, controlleremo che la finestra corrente (la popup, appunto) abbia una "opener" utilizzando la proprietà window.opener e che l'opener non sia chiusa:

+ +
// controllo che l'opener esista e non sia chiusa
+if (window.opener && !window.opener.closed) {
+  window.opener.location.href = "http://www.mozilla.org";
+}
+
+ +

Si noti che le popup possono accedere solo a se stesse e alle finestre che le hanno generate.

+ +

Ricaricare una popup

+ +

In questo esempio la funzione aggiornaPopup() chiama il metodo reload() dell'oggetto location della popup per aggiornare il suo contenuto. Se la popup non è stata ancora aperta o l'utente l'ha chiusa, viene aperta una nuova finestra.

+ +
var finestraPopup = null;
+
+function aggiornaPopup() {
+  if (popupWindow && !popupWindow.closed) {
+    // finestraPopup è aperta, la aggiorno
+    finestraPopup.location.reload(true);
+  } else {
+    // apro una nuova popup
+    finestraPopup = window.open("popup.html","miaPopup");
+  }
+}
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

+ +

Altre risorse

+ +

MSDN window.closed

diff --git a/files/it/web/api/window/confirm/index.html b/files/it/web/api/window/confirm/index.html new file mode 100644 index 0000000000..215e3091e5 --- /dev/null +++ b/files/it/web/api/window/confirm/index.html @@ -0,0 +1,47 @@ +--- +title: Window.confirm() +slug: Web/API/Window/confirm +tags: + - Window + - confirm +translation_of: Web/API/Window/confirm +--- +
{{ApiRef("Window")}}
+ +

Mostra una finestra di dialogo con un messaggio (opzionale) e due bottoni: OK e Annulla.

+ +

Sintassi

+ +
input = window.confirm(messaggio);
+
+ +

Parametri

+ +

messaggio
+      Una stringa che viene mostrata nella finestra di dialogo.

+ +

Valore ritornato

+ +

input
+      Un valore booleano che indica se è stato selezionato OK (true) o Annulla (false).

+ +

Esempio

+ +
if (window.confirm("vuoi vedere il mio vestito nuovo?")) {
+    window.open("vestito.html", "Il mio vestito nuovo", "");
+}
+
+ +

Note

+ +

Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di accedere al resto dell'interfaccia del programma finchè la finestra non viene chiusa. Per questo motivo, è meglio non abusare delle funzioni che creano questo tipo di finestre.

+ +

I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare i metodi di nsIPromptService, invece di alert.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

+ +

Altri metodi

+ +

alert, prompt

diff --git a/files/it/web/api/window/crypto/index.html b/files/it/web/api/window/crypto/index.html new file mode 100644 index 0000000000..65107e937c --- /dev/null +++ b/files/it/web/api/window/crypto/index.html @@ -0,0 +1,90 @@ +--- +title: Window.crypto +slug: Web/API/Window/crypto +translation_of: Web/API/Window/crypto +--- +
{{APIRef}}
+ +

La proprietà di sola lettura {{domxref("Window.crypto")}} ritorna l'oggetto {{domxref("Crypto")}} associato all'oggetto globale. Questo oggetto permette alle pagine web di accedere al alcuni servizi si crittografia.

+ +

Sintassi

+ +
var cryptoObj = window.crypto || window.msCrypto; // per IE 11
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}{{Spec2("Web Crypto API")}}Initial definition
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Basic support44 {{CompatVersionUnknown}}{{CompatVersionUnknown}}6 {{property_prefix("ms")}}2019{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChrome for AndroidFirefox MobileFirefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Guarda anche

+ + diff --git a/files/it/web/api/window/defaultstatus/index.html b/files/it/web/api/window/defaultstatus/index.html new file mode 100644 index 0000000000..5212fabcd7 --- /dev/null +++ b/files/it/web/api/window/defaultstatus/index.html @@ -0,0 +1,38 @@ +--- +title: Window.defaultStatus +slug: Web/API/Window/defaultstatus +translation_of: Web/API/Window/defaultStatus +--- +
{{ApiRef()}}
+ +

Legge o imposta il testo predefinito della barra di stato della finestra a cui si riferisce l'oggetto window.

+ +

Sintassi

+ +
messaggio = window.defaultStatus
+window.defaultStatus =
+messaggio
+
+ +

Parameters

+ + + +

Esempio

+ +
<html>
+ <body onload="window.defaultStatus='ciao!';"/>
+  <button onclick="window.confirm('Sei sicuro di volertene andare?');">chiudi</button>
+ </body>
+</htm>
+
+ +

Note

+ +

Per impostare lo stato della finestra dopo che questa si è aperta, si può utilizzare window.status.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/devicemotion_event/index.html b/files/it/web/api/window/devicemotion_event/index.html new file mode 100644 index 0000000000..bbc0b22717 --- /dev/null +++ b/files/it/web/api/window/devicemotion_event/index.html @@ -0,0 +1,97 @@ +--- +title: devicemotion +slug: Web/API/Window/devicemotion_event +translation_of: Web/API/Window/devicemotion_event +--- +

L'evento devicemotion viene attivato a intervalli regolari e indica la quantità di forza fisica dell'accellezazione che il dispositivo riceve in quel dato momento. Fornisce inoltre informazioni circa la velocità di rotazione, se disponibili.

+ +

Informazioni Generali

+ +
+
Specifica
+
DeviceOrientation Event
+
Interfaccia
+
DeviceMotionEvent
+
Bubbles
+
No
+
Cancellabile
+
No
+
Bersaglio
+
DefaultView (window)
+
Azione predefinita
+
nessuna
+
+ +

Propietà

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not?
acceleration {{readonlyInline}}{{domxref("DeviceAcceleration")}}The acceleration of the device. This value has taken into account the effect of gravity and removed it from the figures. This value may not exist if the hardware doesn't know how to remove gravity from the acceleration data.
accelerationIncludingGravity {{readonlyInline}}{{domxref("DeviceAcceleration")}}The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don't have a gyroscope to allow them to properly remove gravity from the data.
interval {{readonlyInline}}doubleThe interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time.
rotationRate {{readonlyInline}}{{domxref("DeviceRotationRate")}}The rates of rotation of the device about all three axes.
+ +

Esempio

+ +
function handleMotionEvent(event) {
+
+    var x = event.accelerationIncludingGravity.x;
+    var y = event.accelerationIncludingGravity.y;
+    var z = event.accelerationIncludingGravity.z;
+
+    // Fai qualcosa di maestoso.
+}
+
+window.addEventListener("devicemotion", handleMotionEvent, true);
+
+ +

Eventi correlati

+ + diff --git a/files/it/web/api/window/document/index.html b/files/it/web/api/window/document/index.html new file mode 100644 index 0000000000..5d98a10385 --- /dev/null +++ b/files/it/web/api/window/document/index.html @@ -0,0 +1,39 @@ +--- +title: Window.document +slug: Web/API/Window/document +translation_of: Web/API/Window/document +--- +
{{APIRef}}
+ +

Restituisce un riferimento al documento contenuto nella finestra.

+ +

Sintassi

+ +
doc = window.document
+
+ +

Parametri

+ + + +

Esempio

+ +
<html>
+<head>
+   <title>Ciao, mondo!</title>
+</head>
+<body>
+
+<script type="text/javascript">
+   var doc = window.document;
+   alert( doc.title);    // produce: Ciao, mondo!
+</script>
+
+</body>
+</html>
+ +

Specifiche

+ +

HTML

diff --git a/files/it/web/api/window/focus/index.html b/files/it/web/api/window/focus/index.html new file mode 100644 index 0000000000..696383a27c --- /dev/null +++ b/files/it/web/api/window/focus/index.html @@ -0,0 +1,26 @@ +--- +title: Window.focus() +slug: Web/API/Window/focus +translation_of: Web/API/Window/focus +--- +
{{APIRef}}
+ +

Seleziona la finestra, come se l'utente avesse cliccato su di essa.

+ +

Sintassi

+ +
window.focus()
+
+ +

Esempio

+ +
if (click) { window.focus(); }
+
+ +

Note

+ +

Non ha effetto se la finestra è già selezionata. Si veda anche window.blur.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/forward/index.html b/files/it/web/api/window/forward/index.html new file mode 100644 index 0000000000..e07fcaa219 --- /dev/null +++ b/files/it/web/api/window/forward/index.html @@ -0,0 +1,22 @@ +--- +title: Window.forward() +slug: Web/API/Window/forward +translation_of: Web/API/Window/forward +--- +
{{APIRef}}
+ +

Visualizza la pagina successiva che si trova nella Cronologia, come se l'utente avesse cliccato sul bottone Avanti.

+ +

Sintassi

+ +
window.forward()
+
+ +

Esempio

+ +
function vaiAvanti() { if (possoAndareAvanti) window.forward(); }
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/getselection/index.html b/files/it/web/api/window/getselection/index.html new file mode 100644 index 0000000000..c4f561801e --- /dev/null +++ b/files/it/web/api/window/getselection/index.html @@ -0,0 +1,46 @@ +--- +title: Window.getSelection() +slug: Web/API/Window/getSelection +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Window/getSelection +--- +

{{ ApiRef() }}

+ +

Restituisce un oggetto selection che rappresenta il testo selezionato dall'utente.

+ +

Sintassi

+ +
selection = window.getSelection() ;
+
+ + + +

Esempio

+ +
function esempio() {
+   var selezione = window.getSelection();
+   window.alert(selezione);
+   var range = selezione.getRangeAt(0);
+   // fai qualcosa con il range
+}
+
+ +

Note

+ +

In JavaScript, quando un oggetto selezione viene passato a una funzione che si aspetta una stringa (come window.alert o document.write), al suo posto viene passata una stringa, generalmente corrispondente al testo selezionato. Questo fa si che selection assomigli a una stringa, mentre invece è un normale oggetto dotato di metodi e proprietà. La stringa passata è infatti il risultato di toString().

+ +

Nell'esempio sopra, selezione è automaticamente "convertito" quando viene passato a window.alert. Tuttavia per utilizzare una proprietà o un metodo della classe String, come ad esempio length o substr, occorre chiamare esplicitamente il metodo toString.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuna specifica.

+ +

Vedi anche

+ +

Selection, Range

diff --git a/files/it/web/api/window/history/index.html b/files/it/web/api/window/history/index.html new file mode 100644 index 0000000000..5f087d8d0e --- /dev/null +++ b/files/it/web/api/window/history/index.html @@ -0,0 +1,37 @@ +--- +title: Window.history +slug: Web/API/Window/history +translation_of: Web/API/Window/history +--- +
{{APIRef}}
+ +

Restituisce un riferimento all'oggetto history, che fornisce un'interfaccia per manipolare la Cronologia del browser.

+ +

Sintassi

+ +
oggettoHistory = window.history
+
+ +

Parametri

+ + + +

Esempio

+ +
h = window.history;
+if ( h.length ) { // se c'è una cronologia
+    h.back();     // vai indietro nella cronologia
+}
+
+ +

Note

+ +

L'oggetto history fornisce la seguente interfaccia: current, length, next, previous, back(), forward(), go().

+ +

E' possibile accedere a questa interfaccia dall'oggetto window chiamando, per esempio, window.history.back().

+ +

Specifiche

+ +

HTML5

diff --git a/files/it/web/api/window/home/index.html b/files/it/web/api/window/home/index.html new file mode 100644 index 0000000000..ab9086cc2f --- /dev/null +++ b/files/it/web/api/window/home/index.html @@ -0,0 +1,24 @@ +--- +title: Window.home() +slug: Web/API/Window/home +translation_of: Web/API/Window/home +--- +
{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}
+ +

Rimanda il browser alla home page impostata.

+ +

Sintassi

+ +
window.home()
+
+ +

Esempio

+ +
function vai_a_casa() {
+  window.home();
+}
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuna specifica.

diff --git a/files/it/web/api/window/index.html b/files/it/web/api/window/index.html new file mode 100644 index 0000000000..af317f6eab --- /dev/null +++ b/files/it/web/api/window/index.html @@ -0,0 +1,686 @@ +--- +title: Window +slug: Web/API/Window +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - SezioneIncompleta + - TraduzioneIncompleta + - Tutte_le_categorie +translation_of: Web/API/Window +--- +

{{ ApiRef() }}

+ +

Introduzione

+ +

Questo capitolo contiene una breve reference per tutti i metodi, proprietà, ed eventi disponibili attraverso l'oggetto window del DOM. L'oggetto window implementa l'interfacciawindow , la quale eredita dall'interfaccia AbstractView.

+ +

L'oggetto window rappresenta una finestra, contenente un documento DOM. La proprietà document punta ad un DOM document ( documento DOM ) caricato in quella pagina

+ +

Ogni tab che viene aperta contiene il suo personale oggetto window; ciò significa che l'oggetto window non è condiviso fra le varie tab aperte nella stessa finestra. Solo due metodi vengono condivisi dai vari oggetti window presenti in una stessa finestra, e sono i metodi window.resizeTo e window.resizeBy.

+ +

Proprietà

+ +
+
window.Components
+
The entry point to many XPCOM features. Some properties, e.g. classes, are only available to sufficiently privileged code.
+
+ +
+
window.content and window._content
+
Returns a reference to the content element in the current window. The variant with underscore is deprecated.
+
+ +
+
window.closed
+
This property indicates whether the current window is closed or not.
+
+ +
+
window.controllers
+
Returns the XUL controller objects for the current chrome window.
+
+ +
+
window.crypto
+
Returns the browser crypto object.
+
+ +
+
window.defaultStatus
+
Gets/sets the status bar text for the given window.
+
+ +
+
window.directories
+
Returns a reference to the directories toolbar in the current chrome.
+
+ +
+
window.document
+
Returns a reference to the document that the window contains.
+
+ +
+
window.frameElement
+
Returns the element in which the window is embedded, or null if the window is not embedded.
+
+ +
+
window.frames
+
Returns an array of the subframes in the current window.
+
+ +
+
window.history
+
Returns a reference to the history object.
+
+ +
+
window.innerHeight
+
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
+
+ +
+
window.innerWidth
+
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
+
+ +
+
window.length
+
Returns the number of frames in the window.
+
+ +
+
window.location
+
Gets/sets the location, or current URL, of the window object.
+
+ +
+
window.locationbar
+
Returns the locationbar object, whose visibility can be toggled in the window.
+
+ +
+
window.menubar
+
Returns the menubar object, whose visibility can be toggled in the window.
+
+ +
+
window.name
+
Gets/sets the name of the window.
+
+ +
+
window.navigator
+
Returns a reference to the navigator object.
+
+ +
+
window.navigator.appCodeName
+
Returns the internal "code" name of the current browser.
+
+ +
+
window.navigator.appName
+
Returns the official name of the browser.
+
+ +
+
window.navigator.appVersion
+
Returns the version of the browser as a string.
+
+ +
+
window.navigator.cookieEnabled
+
Returns a boolean indicating whether cookies are enabled in the browser or not.
+
+ +
+
window.navigator.javaEnabled()
+
Indicates whether Java is enabled in the host browser.
+
+ +
+
window.navigator.language
+
Returns a string representing the language version of the browser.
+
+ +
+
window.navigator.mimeTypes
+
Returns a list of the MIME types supported by the browser.
+
+ +
+
window.navigator.oscpu
+
Returns a string that represents the current operating system.
+
+ +
+
window.navigator.platform
+
Returns a string representing the platform of the browser.
+
+ +
+
window.navigator.plugins
+
Returns an array of the plugins installed in the browser.
+
+ +
+
window.navigator.product
+
Returns the product name of the browser (e.g. "Gecko").
+
+ +
+
window.navigator.productSub
+
Returns the product version number (e.g. "5.0").
+
+ +
+
window.navigator.userAgent
+
Returns the user agent string for the current browser.
+
+ +
+
window.navigator.vendor
+
Returns the vendor name of the current browser (e.g. "Netscape6").
+
+ +
+
window.navigator.vendorSub
+
Returns the vendor version number (e.g. "6.1").
+
+ +
+
window.opener
+
Returns a reference to the window that opened this current window.
+
+ +
+
window.outerHeight
+
Gets the height of the outside of the browser window.
+
+ +
+
window.outerWidth
+
Gets the width of the outside of the browser window.
+
+ +
+
window.pageXOffset
+
Gets the amount of content that has been hidden by scrolling to the right.
+
+ +
+
window.pageYOffset
+
Gets the amount of content that has been hidden by scrolling down.
+
+ +
+
window.parent
+
Returns a reference to the parent of the current window or subframe.
+
+ +
+
window.personalbar
+
Returns the personalbar object, whose visibility can be toggled in the window.
+
+ +
+
window.pkcs11
+
Returns the pkcs11 object, which can be used to install drivers and other software associated with the pkcs11 protocol.
+
+ +
+
window.prompter
+
Returns a reference to the prompt window, if any, currently displayed.
+
+ +
+
window.screen
+
Returns a reference to the screen object associated with the window.
+
+ +

The following is duplicated on DOM:window.screen

+ +
+
window.screen.availTop
+
Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.
+
+ +
+
window.screen.availLeft
+
Returns the first available pixel available from the left side of the screen.
+
+ +
+
window.screen.availHeight
+
Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.
+
+ +
+
window.screen.availWidth
+
Returns the amount of horizontal space in pixels available to the window.
+
+ +
+
window.screen.colorDepth
+
Returns the color depth of the screen.
+
+ +
+
window.screen.height
+
Returns the height of the screen in pixels.
+
+ +
+
window.screen.left
+
Gets/sets the current distance in pixels from the left side of the screen.
+
+ +
+
window.screen.pixelDepth
+
Gets the bit depth of the screen.
+
+ +
+
window.screen.top
+
Gets/sets the distance from the top of the screen.
+
+ +
+
window.screen.width
+
Returns the width of the screen.
+
+ +

end of duplicated content

+ +
+
window.screenX
+
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
+
+ +
+
window.screenY
+
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
+
+ +
+
window.scrollbars
+
Returns the scrollbars object, whose visibility can be toggled in the window.
+
+ +
+
window.scrollMaxX
+
The maximum offset that the window can be scrolled to horizontally.
+
(i.e., the document width minus the viewport width)
+
+ +
+
window.scrollMaxY
+
The maximum offset that the window can be scrolled to vertically.
+
(i.e., the document height minus the viewport height)
+
+ +
+
window.scrollX
+
Returns the number of pixels that the document has already been scrolled horizontally.
+
+ +
+
window.scrollY
+
Returns the number of pixels that the document has already been scrolled vertically.
+
+ +
+
window.self
+
Returns an object reference to the window object itself.
+
+ +
+
window.sidebar
+
Returns a reference to the window object of the sidebar.
+
+ +
+
window.status
+
Gets/sets the text in the statusbar at the bottom of the browser.
+
+ +
+
window.statusbar
+
Returns the statusbar object, whose visibility can be toggled in the window.
+
+ +
+
window.toolbar
+
Returns the toolbar object, whose visibility can be toggled in the window.
+
+ +
+
window.top
+
Returns a reference to the topmost window in the window hierarchy.
+
+ +
+
window.window
+
Returns a reference to the current window.
+
+ +

Metodi

+ +
+
window.alert
+
Displays an alert dialog.
+
+ +

base64 func https://bugzilla.mozilla.org/show_bug.cgi?id=287112 (see last comments) https://bugzilla.mozilla.org/show_bug.cgi?id=123003 http://lxr.mozilla.org/seamonkey/sou...indow.cpp#4946

+ +
+
window.atob
+
Decodes a string of data which has been encoded using base-64 encoding.
+
+ +
+
window.back
+
Moves back one in the window history.
+
+ +
+
window.blur
+
Sets focus away from the window.
+
+ +
+
window.btoa
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
+ +
+
window.captureEvents {{ Obsolete_inline() }}
+
Registers the window to capture all events of the specified type.
+
+ +
+
window.clearInterval
+
Cancels the repeated execution set using setInterval.
+
+ +
+
window.clearTimeout
+
Clears a delay that's been set for a specific function.
+
+ +
+
window.close
+
Closes the current window.
+
+ +
+
window.confirm
+
Displays a dialog with a message that the user needs to respond to.
+
+ +
+
window.dump
+
Writes a message to the console.
+
+ +
+
window.escape
+
Encodes a string.
+
+ +
+
window.focus
+
Sets focus on the current window.
+
+ +
+
window.forward
+
Moves the window one document forward in the history.
+
+ +
+
window.getAttention
+
Flashes the application icon.
+
+ +
+
window.getComputedStyle
+
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
+
+ +
+
window.getSelection
+
Returns the selection object representing the selected item(s).
+
+ +
+
window.home
+
Returns the browser to the home page.
+
+ +
+
window.moveBy
+
Moves the current window by a specified amount.
+
+ +
+
window.moveTo
+
Moves the window to the specified coordinates.
+
+ +
+
window.open
+
Opens a new window.
+
+ +
+
window.openDialog
+
Opens a new dialog window.
+
+ +
+
window.print
+
Prints the current document.
+
+ +
+
window.prompt
+
Returns the text entered by the user in a prompt dialog.
+
+ +
+
window.releaseEvents {{ Obsolete_inline() }}
+
Releases the window from trapping events of a specific type.
+
+ +
+
window.resizeBy
+
Resizes the current window by a certain amount.
+
+ +
+
window.resizeTo
+
Dynamically resizes window.
+
+ +
+
window.scroll
+
Scrolls the window to a particular place in the document.
+
+ +
+
window.scrollBy
+
Scrolls the document in the window by the given amount.
+
+ +
+
window.scrollByLines
+
Scrolls the document by the given number of lines.
+
+ +
+
window.scrollByPages
+
Scrolls the current document by the specified number of pages.
+
+ +
+
window.scrollTo
+
Scrolls to a particular set of coordinates in the document.
+
+ +
+
window.setInterval
+
Execute a function each X milliseconds.
+
+ +
+
window.setTimeout
+
Sets a delay for executing a function.
+
+ +
+
window.sizeToContent
+
Sizes the window according to its content.
+
+ +
+
window.stop
+
This method stops window loading.
+
+ +
+
window.unescape
+
Unencodes a value that has been encoded in hexadecimal (e.g. a cookie).
+
+ +
+
window.updateCommands
+
+ +

Gestori di Eventi

+ +
+
window.onabort
+
An event handler property for abort events on the window.
+
+ +
+
window.onblur
+
An event handler property for blur events on the window.
+
+ +
+
window.onchange
+
An event handler property for change events on the window.
+
+ +
+
window.onclick
+
An event handler property for click events on the window.
+
+ +
+
window.onclose
+
An event handler property for handling the window close event.
+
+ +
+
window.ondragdrop
+
An event handler property for drag and drop events on the window.
+
+ +
+
window.onerror
+
An event handler property for errors raised on the window.
+
+ +
+
window.onfocus
+
An event handler property for focus events on the window.
+
+ +
+
window.onkeydown
+
An event handler property for keydown events on the window.
+
+ +
+
window.onkeypress
+
An event handler property for keypress events on the window.
+
+ +
+
window.onkeyup
+
An event handler property for keyup events on the window.
+
+ +
+
window.onload
+
An event handler property for window loading.
+
+ +
+
window.onmousedown
+
An event handler property for mousedown events on the window.
+
+ +
+
window.onmousemove
+
An event handler property for mousemove events on the window.
+
+ +
+
window.onmouseout
+
An event handler property for mouseout events on the window.
+
+ +
+
window.onmouseover
+
An event handler property for mouseover events on the window.
+
+ +
+
window.onmouseup
+
An event handler property for mouseup events on the window.
+
+ +
+
window.onpaint
+
An event handler property for paint events on the window.
+
+ +
+
window.onreset
+
An event handler property for reset events on the window.
+
+ +
+
window.onresize
+
An event handler property for window resizing.
+
+ +
+
window.onscroll
+
An event handler property for window scrolling.
+
+ +
+
window.onselect
+
An event handler property for window selection.
+
+ +
+
window.onsubmit
+
An event handler property for submits on window forms.
+
+ +
+
window.onunload
+
An event handler property for unload events on the window.
+
+ +

{{ languages( { "fr": "fr/DOM/window", "pl": "pl/DOM/window", "en": "en/DOM/window" } ) }}

diff --git a/files/it/web/api/window/localstorage/index.html b/files/it/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..f17f5cece8 --- /dev/null +++ b/files/it/web/api/window/localstorage/index.html @@ -0,0 +1,138 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +translation_of: Web/API/Window/localStorage +--- +

{{APIRef()}}

+ +

La proprietà read-only localStorage ti permette di accedere all'oggetto {{domxref("Storage")}} per l'origine del {{domxref("Document")}}; i dati persistono anche tra diverse sessioni browser. localStorage è simile a sessionStorage, ma si differenzia dal fatto che i dati salvati con localStoragenon hanno  expiration time, i dati salvati in sessionStorage vengono cancellati al termine della sessione della pagina — cioé, quando la pagina viene chiusa.

+ +

Si dovrebbe notare che i dati salvati in entrambi localStorage o sessionStorage sono specifici rispetto al protocollo della pagina.

+ +

Sintassi

+ +
myStorage = window.localStorage;
+ +

Valore

+ +

L'oggetto {{domxref("Storage")}} che puo essere usato per accedere alla memoria del localStorage.

+ +

Eccezioni

+ +
+
SecurityError
+
La richiesta viola la policy decision, o l'origine non è un valido scheme/host/port tuple (può succedere, per esempio, se l'origine usa lo schemafile: o data: ). Per esempio, l'utente può aver il browser configurato a negare i permessi di dati persistenti.
+
+ +

Esempi

+ +

Il seguente snippet accede all'oggetto local {{domxref("Storage")}} del dominio e aggiunge i dati usando {{domxref("Storage.setItem()")}}.

+ +
localStorage.setItem('myCat', 'Tom');
+ +

La sintassi per leggere localStorage è la seguente:

+ +
var cat = localStorage.getItem("myCat");
+ +

La sintassi per rimuovere dati da localStorage è la seguente:

+ +
localStorage.removeItem("myCat");
+ +
+

Note: Riferimenti di esempi completi all'articolo: Usare lo Web Storage API.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatusCommento
{{SpecName('HTML WHATWG', 'webstorage.html#dom-localstorage', 'localStorage')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatVersionUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

Tutti i browsers hanno livelli di capacità vari per entrambilocalStorage e {{domxref("sessionStorage")}}. Qui una dettagliata lista di tutte le capacità di vari browser.

+ +
+

Note: A partire da iOS 5.1, Safari Mobile salva i dati di localStorage nella cartella cache, che è soggetta a rimozioni occasionali. Safari Mobile in Private mode previene la scrittura al localStorage.

+
+ +

Consulta anche

+ + diff --git a/files/it/web/api/window/locationbar/index.html b/files/it/web/api/window/locationbar/index.html new file mode 100644 index 0000000000..583c6def10 --- /dev/null +++ b/files/it/web/api/window/locationbar/index.html @@ -0,0 +1,43 @@ +--- +title: Window.locationbar +slug: Web/API/Window/locationbar +translation_of: Web/API/Window/locationbar +--- +
{{APIRef}}
+ +

Restituisce l'oggetto locationbar, che può essere reso invisibile.

+ +

Sintassi

+ +
oggetto = window.locationbar
+
+ +

Esempio

+ +

Il seguente esempio completo mostra un possibile modo per utilizzare la proprietà visible dei vari oggetti "bar" (quelli che rappresentano una qualsiasi barra); mostra anche come cambiare i privilegi necessari per modificare tale proprietà.

+ +

The following complete HTML example shows way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.

+ +
<html>
+<head>
+  <title>Esperimenti sul DOM</title>
+  <script>
+    // modifico lo stato della barra in questa finestra
+    netscape.security.PrivilegeManager.
+        enablePrivilege("UniversalBrowserWrite");
+    window.statusbar.visible=!window.statusbar.visible;
+  </script>
+</head>
+<body>
+  <p>Esperimenti sul DOM</p>
+</body>
+</html>
+
+ +

Note

+ +

Quando si carica l'esempio sopra riportato, il browser mostra una finestra di avviso. Si veda anche: window.menubar, window.personalbar, window.scrollbars, window.statusbar, window.toolbar

+ +

Specifiche

+ +

HTML5

diff --git a/files/it/web/api/window/matchmedia/index.html b/files/it/web/api/window/matchmedia/index.html new file mode 100644 index 0000000000..a4dc984d9a --- /dev/null +++ b/files/it/web/api/window/matchmedia/index.html @@ -0,0 +1,91 @@ +--- +title: Window.matchMedia() +slug: Web/API/Window/matchMedia +translation_of: Web/API/Window/matchMedia +--- +

Sommario

+ +

Restituisce un nuovo oggetto {{domxref("MediaQueryList")}} che rappresenta i risultati dell'anaisi effettuta in base alla  stringa media query specificata.

+ +

Sintassi

+ +
mql = window.matchMedia(mediaQueryString)
+ +

dove QueryString è una stringa che rappresenta la ricerca media query per la quale restituire il nuovo oggetto {{domxref("MediaQueryList")}} .

+ +

Esempio

+ +
if (window.matchMedia("(min-width: 400px)").matches) {
+  /* the viewport is at least 400 pixels wide */
+} else {
+  /* the viewport is less than 400 pixels wide */
+}
+ +

Questo codice permette di gestire la pagina in modo diverso quando la finestra è molto piccola.

+ +

Vedere Using media queries from code per altri esempi.

+ +

Compatibilità browser

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatGeckoDesktop("6.0")}}1012.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0{{CompatGeckoMobile("6.0")}}{{CompatNo}}12.15
+
+ +

Specifica

+ + + +

Vedere anche

+ + diff --git a/files/it/web/api/window/moveby/index.html b/files/it/web/api/window/moveby/index.html new file mode 100644 index 0000000000..41f373f9eb --- /dev/null +++ b/files/it/web/api/window/moveby/index.html @@ -0,0 +1,36 @@ +--- +title: Window.moveBy() +slug: Web/API/Window/moveBy +translation_of: Web/API/Window/moveBy +--- +
{{APIRef}}
+ +

Sposta la finestra di un certo numero di pixel.

+ +

Sintassi

+ +
window.moveBy(x,
+y)
+
+ +

Parametri

+ + + +

Esempio

+ +
 function in_alto_a_destra() {
+    moveBy(10, -10);
+ }
+
+ +

Note

+ +

E' possibile utilizzare numeri negativi come parametri. Questa funzione esegue uno spostamento della finestra relativamente alla sua posizione attuale, mentre window.moveTo la sposta in un punto assoluto.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/moveto/index.html b/files/it/web/api/window/moveto/index.html new file mode 100644 index 0000000000..5e9b2c271c --- /dev/null +++ b/files/it/web/api/window/moveto/index.html @@ -0,0 +1,37 @@ +--- +title: Window.moveTo() +slug: Web/API/Window/moveTo +translation_of: Web/API/Window/moveTo +--- +
{{APIRef}}
+ +

Sposta la finestra alle coordinate specificate.

+ +

Sintassi

+ +
window.moveTo(x,
+y)
+
+ +

Parametri

+ + + +

Esempio

+ +
 function origine() {
+    // sposta la finestra all'angolo in alto a sinistra
+    window.moveTo(0, 0)
+ }
+
+ +

Note

+ +

Le coordinate iniziali sono 0, 0 e rappresentano l'angolo in alto a sinistra dello schermo. Questa funzione sposta la finestra in un punto assoluto, mentre window.moveBy la sposta relativamente alla sua posizione attuale.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/name/index.html b/files/it/web/api/window/name/index.html new file mode 100644 index 0000000000..8127d67285 --- /dev/null +++ b/files/it/web/api/window/name/index.html @@ -0,0 +1,23 @@ +--- +title: Window.name +slug: Web/API/Window/name +translation_of: Web/API/Window/name +--- +

{{APIRef}}
+ Restituisce o imposta il nome della finestra.

+ +

Sintassi

+ +
stringa = window.name
+ window.name =
+stringa
+
+ +

Esempio

+ +
window.name = "vista1";
+
+ +

Note

+ +

Il nome della finestra viene utilizzato soprattutto per impostare i target dei link e dei form. In realtà una finestra non deve necessariamente avere un nome.

diff --git a/files/it/web/api/window/onuserproximity/index.html b/files/it/web/api/window/onuserproximity/index.html new file mode 100644 index 0000000000..41f760ee44 --- /dev/null +++ b/files/it/web/api/window/onuserproximity/index.html @@ -0,0 +1,45 @@ +--- +title: Window.onuserproximity +slug: Web/API/Window/onuserproximity +translation_of: Web/API/Window/onuserproximity +--- +

{{ ApiRef() }}

+ +

La proprietà Window.onuserproxymity rappresenta un {{domxref("EventHandler")}}, una funzione che viene richiamata quando l'evento {{event("userproximity")}} si verifica. Questi eventi sono del tipo {{domxref("UserProximityEvent")}} e si verificano quando il sensore di prossimità del dispositivo individua che un oggetto si sta avvicinando.

+ +

Sintassi

+ +
window.onuserproximity = eventHandler
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{ SpecName('Proximity Events', '#user-proximity', 'Proximity Events') }}{{ Spec2('Proximity Events') }}Specifica iniziale
+ +

Compatibilità browser

+ + + +

{{Compat("api.Window.onuserproximity")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/api/window/opener/index.html b/files/it/web/api/window/opener/index.html new file mode 100644 index 0000000000..368b0a2f74 --- /dev/null +++ b/files/it/web/api/window/opener/index.html @@ -0,0 +1,24 @@ +--- +title: Window.opener +slug: Web/API/Window/opener +translation_of: Web/API/Window/opener +--- +
{{APIRef}}
+ +

Restituisce un riferimento alla finestra che ha aperto la finestra corrente.

+ +

Sintassi

+ +
oggetto = window.opener
+
+ +

Esempio

+ +
 if window.opener != finestraPrincipale {
+     vaiInizio(window.opener);
+ }
+
+ +

Note

+ +

Quando una finestra viene aperta come popup da un'altra finestra, mantiene un riferimento a quest'ultima a cui si può accedere con window.opener. Se la finestra corrente non ha un "opener", questo metodo restituisce null.

diff --git a/files/it/web/api/window/orientationchange_event/index.html b/files/it/web/api/window/orientationchange_event/index.html new file mode 100644 index 0000000000..ba6e0dc550 --- /dev/null +++ b/files/it/web/api/window/orientationchange_event/index.html @@ -0,0 +1,66 @@ +--- +title: orientationchange +slug: Web/API/Window/orientationchange_event +translation_of: Web/API/Window/orientationchange_event +--- +

L'evento orientationchange si scatena quando viene modificato l'orientamento del dispositivo.

+ +

Informazioni generali

+ +
+
Specification
+
Compatibility Living Standard
+
Interface
+
Event
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Screen
+
Default Action
+
None
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Example

+ +
// Note that "orientationchange" and screen.orientation are unprefixed in the following
+// code although this API is still vendor-prefixed browsers implementing it.
+window.addEventListener("orientationchange", function() {
+    alert("the orientation of the device is now " + screen.orientation.angle);
+});
+
diff --git a/files/it/web/api/window/print/index.html b/files/it/web/api/window/print/index.html new file mode 100644 index 0000000000..87f63a0b44 --- /dev/null +++ b/files/it/web/api/window/print/index.html @@ -0,0 +1,17 @@ +--- +title: Window.print() +slug: Web/API/Window/print +translation_of: Web/API/Window/print +--- +
{{APIRef}}
+ +

Apre una finestra di stampa per stampare il documento corrente.

+ +

Sintassi

+ +
window.print()
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/prompt/index.html b/files/it/web/api/window/prompt/index.html new file mode 100644 index 0000000000..a3336c95be --- /dev/null +++ b/files/it/web/api/window/prompt/index.html @@ -0,0 +1,51 @@ +--- +title: Window.prompt() +slug: Web/API/Window/prompt +translation_of: Web/API/Window/prompt +--- +
{{APIRef}}
+ +

Mostra una finestra di dialogo che chiede all'utente di inserire del testo.

+ +

Sintassi

+ +
input = window.prompt(
+testo,
+valore);
+
+ + + +

Esempio

+ +
var segno = prompt("Di che segno sei?");
+if (segno.toLowerCase() == "scorpione")
+   alert("Ma dai!.. anch'io!!!");
+
+ +

Quando l'utente clicca il bottone OK, viene restituito il testo che ha digitato. Se l'utente clicca su OK senza aver inserito del testo, viene restituita una stringa vuota. Se invece l'utente clicca su Cancella, la funzione restituisce null.

+ +

Note

+ +

Una finestra di dialogo contiene un campo di testo di una sola riga, un bottone OK e un bottone Cancella. La funzione restituisce il testo (eventualmente vuoto) inserito dall'utente nel campo di testo.

+ +

A prompt dialog contains a single-line textbox, a Cancel button, and an OK button, and returns the (possibly empty) text the user inputted into that textbox.

+ +

Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di permettere al resto dell'interfaccia del programma finchè la finestra non è chiusa. Non si dovrebbe abusare delle funzioni che creano questo tipo di finestre.

+ +

I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare u netidi di nsIPromptService, invece di alert.

+ +

Specifiche

+ +

HTML5

+ +

Altri metodi

+ + diff --git a/files/it/web/api/window/requestanimationframe/index.html b/files/it/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..f3c835b671 --- /dev/null +++ b/files/it/web/api/window/requestanimationframe/index.html @@ -0,0 +1,115 @@ +--- +title: window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +tags: + - API + - Animations + - Animazioni + - DOM + - DOM Reference + - Drawing + - Graphics + - Performance + - Reference + - Window + - requestAnimationFrame +translation_of: Web/API/window/requestAnimationFrame +--- +
{{APIRef}}
+ +
Il metodo window.requestAnimationFrame()indica al browser che intendi eseguire un'animazione e desideri che il browser richiami una funzione specifica per aggiornare un'animazione prima che venga eseguito nuovamente il render del browser. Il metodo accetta una funzione di callback come argomento che verrà eseguita prima del nuovo render del browser.
+ +
 
+ +
Nota: la funzione di callback deve chiamare a sua volta requestAnimationFrame() se vuoi animare un'altro frame alla successiva azione di render del browser.
+ +

Dovresti chiamare questo metodo ogni qualvolta intendi aggiornare lo stato della tua animazione sul monitor. In questo modo la tua richiesta verrà eseguita prima che il browser esegua nuvamente il render della pagina. Il numero di esecuzioni della callback è generalmente di 60 volte al secondo, ma di solito rispetta il refresh-rate del display per quasi tutti i browser secondo le raccomandazioni W3C.
+ L'esecuzione di requestAnimationFrame() vengono messe in pausa in quasi tutti i browser quando la pagina è eseguita in un tab non visibile on in un {{ HTMLElement("iframe") }} non visibile in modo da migliorare le performance e l'utilizzo della batteria.

+ +

Alla funzione di callback viene passato come singolo argomento il parametro {{domxref("DOMHighResTimeStamp")}} che indica i momento corrente in cui viene eseguito dalla coda di requestAnimationFrame()
+ Nel caso di callback multiple in un singolo frame, ogni funzione riceve lo stesso timestamp anche se è trascorso del tempo durante il calcolo di ogni processo.
+ Il timestamp è un numero decimale, in millisecondi, con una precisione di 1ms (1000µs).

+ +

Sintassi

+ +
window.requestAnimationFrame(callback);
+
+ +

Parametri

+ +
+
callback
+
Il parametro che specifica la funzione di callback da richiamare prima che venga eseguito il render successivo della pagina.
+ La funzione accetta un solo parametro, {{domxref("DOMHighResTimeStamp")}}, che indica il momento esatto (nel formato {{domxref('performance.now()')}}) in cui requestAnimationFrame() inizia la sua esecuzione.
+
+ +

Valori di ritorno

+ +

Un valore intero di tipo long, l'id della richiesta che identifica univocamente la callback specifica nella lista di callback. Questo è un valore assoluto, ma non dovresti fare nessun tipo di ragionamento sulla base di questo valore. Puoi, però, usare questo valore per passarlo a {{domxref("window.cancelAnimationFrame()")}} in modo da  rimuovere/cancellare la callback dalla coda di richieste da eseguire.

+ +

Esempio

+ +
var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+element.style.position = 'absolute';
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.left = Math.min(progress / 10, 200) + 'px';
+  if (progress < 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}{{Spec2('HTML WHATWG')}} +

Nessun cambiamento. Sostituisce il precedente.

+
{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}{{Spec2('RequestAnimationFrame')}} +

Definizione iniziale

+
+ +

Compatibilità del Browser

+ +
+ + +

{{Compat("api.Window.requestAnimationFrame")}}

+
+ +

Leggi anche

+ + diff --git a/files/it/web/api/window/resizeby/index.html b/files/it/web/api/window/resizeby/index.html new file mode 100644 index 0000000000..ee662251c4 --- /dev/null +++ b/files/it/web/api/window/resizeby/index.html @@ -0,0 +1,35 @@ +--- +title: Window.resizeBy() +slug: Web/API/Window/resizeBy +translation_of: Web/API/Window/resizeBy +--- +

{{APIRef}}

+ +

Aumenta o diminuisce le dimensioni della finestra di un certo numero di pixel.

+ +

Sintassi

+ +
window.resizeBy(xDelta,
+yDelta)
+
+ +

Parametri

+ + + +

Esempio

+ +
// rimpicciolisce la finestra
+window.resizeBy(-200, -200);
+
+ +

Note

+ +

Questo metodo ridimensiona la finestra relativamente alle sue dimensioni attuali. Per ridimensionare la finestra in termini assoluti, è possibile utilizzare window.resizeTo.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/resizeto/index.html b/files/it/web/api/window/resizeto/index.html new file mode 100644 index 0000000000..c716aa0411 --- /dev/null +++ b/files/it/web/api/window/resizeto/index.html @@ -0,0 +1,39 @@ +--- +title: Window.resizeTo() +slug: Web/API/Window/resizeTo +translation_of: Web/API/Window/resizeTo +--- +

{{APIRef}}

+ +

Ridimensiona la finestra dinamicamente.

+ +

Sintassi

+ +
window.resizeTo(larghezza,
+altezza)
+
+ +

Parameters

+ + + +

Esempio

+ +
 // questa funzione ridimensiona la finestra
+ // e fa in modo che occupi metà dello schermo
+ function ridimensiona() {
+   window.resizeTo(window.screen.availWidth/2,
+      window.screen.availHeight/2);
+ }
+
+ +

Note

+ +

Si veda anche window.resizeBy.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/sessionstorage/index.html b/files/it/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..06c3b48c4a --- /dev/null +++ b/files/it/web/api/window/sessionstorage/index.html @@ -0,0 +1,138 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +translation_of: Web/API/Window/sessionStorage +--- +

{{APIRef()}}

+ +

La proprietà sessionStorage permette di accedere all'oggetto di sessione {{domxref("Storage")}}. sessionStorage è simile a  {{domxref("Window.localStorage")}}, l'unica differenza è che mentre i dati salvati in localStorage non hanno scadenza, i dati in sessionStorage vengono ripuliti ogniqualvolta la sessione della pagina termina. La sessione della pagina dura fino a quando il browser è aperto e sopravvive alla ricarica della pagina e al ripristino. L'apertura di una pagina in un nuovo tab o in una nuova finestra implica l'apertura di una nuova sessione, il che differisce da come funzionano i cookie di sessione.

+ +

Va ricordato che i dati memorizzati nel sessionStorage o localStorage sono specifici per il protocollo della pagina.

+ +
// Salva i dati nel sessionStorage
+sessionStorage.setItem('key', 'value');
+
+// Recupare i dati dal sessionStorage
+var data = sessionStorage.getItem('key');
+ +

Value

+ +

Un oggetto {{domxref("Storage")}}.

+ +

Example

+ +

Il seguente esempio accede all'oggetto di sessione corrente  {{domxref("Storage")}} e vi aggiunge un elemento tramite  {{domxref("Storage.setItem()")}}.

+ +
sessionStorage.setItem('myCat', 'Tom');
+ +

Il seguente esempio salva automaticamente il contenuto di un campo di testo e se la pagina del browser viene ricaricata, ripristina il contenuto del campo di testo in modo da non perdere nessuna digitazione.

+ +
// Ottiene il campo di testo
+var field = document.getElementById("field");
+
+// Verifica se ha un valore di salvataggio automatico (autosave)
+// (succederò solo se la pagina viene ricaricata accidentalmente)
+if (sessionStorage.getItem("autosave")) {
+  // Ripristina il contenuto del campo di testo
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Rimane in ascolto di cambiamenti sul campo di testo
+field.addEventListener("change", function() {
+  // E salva i risultati nell'oggetto sessionStorage
+  sessionStorage.setItem("autosave", field.value);
+});
+ +

 

+ +
+

Nota: Fare riferimento a Using the Web Storage API per un esempio completo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoComment
{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}{{Spec2('Web Storage')}} 
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Supporto Base2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Ogni browser ha un livello di supporto differente per localStorage e sessionStorage. 

+ +
+

Nota: da iOS 5.1, Safari Mobile salva i dati del localStorage nella directory cache, che è soggetta a pulizie occasinonali, tipicamente quando lo c'è poco spazio disponibile.

+
+ +

Vedere anche

+ + diff --git a/files/it/web/api/window/sidebar/index.html b/files/it/web/api/window/sidebar/index.html new file mode 100644 index 0000000000..280b5dcce3 --- /dev/null +++ b/files/it/web/api/window/sidebar/index.html @@ -0,0 +1,56 @@ +--- +title: Window.sidebar +slug: Web/API/Window/sidebar +tags: + - DOM + - NeedsTranslation + - Non-standard + - Property + - Reference + - TopicStub + - Window +translation_of: Web/API/Window/sidebar +--- +
{{APIRef}} {{Non-standard_header}}
+ +

Returns a sidebar object, which contains several methods for registering add-ons with the browser.

+ +

Notes

+ +

The sidebar object returned has the following methods:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription (SeaMonkey)Description (Firefox)
addPanel(title, contentURL, "")Adds a sidebar panel.Obsolete since Firefox 23 (only present in SeaMonkey).
+ End users can use the "load this bookmark in the sidebar" option instead. Also see Creating a Firefox sidebar.
addPersistentPanel(title, contentURL, "")Adds a sidebar panel, which is able to work in the background.
AddSearchProvider(descriptionURL)Installs a search provider (OpenSearch). Adding OpenSearch search engines contains more details. Added in Firefox 2.
addSearchEngine(engineURL, iconURL, suggestedTitle, suggestedCategory) {{Obsolete_inline(44)}}Installs a search engine (Sherlock). Adding Sherlock search engines contains more details.
IsSearchProviderInstalled(descriptionURL)Indicates if a specific search provider (OpenSearch) is installed.
+ +

Specification

+ +

Mozilla-specific. Not part of any standard.

diff --git a/files/it/web/api/window/sizetocontent/index.html b/files/it/web/api/window/sizetocontent/index.html new file mode 100644 index 0000000000..4880ff9fbd --- /dev/null +++ b/files/it/web/api/window/sizetocontent/index.html @@ -0,0 +1,15 @@ +--- +title: window.sizeToContent +slug: Web/API/Window/sizeToContent +translation_of: Web/API/Window/sizeToContent +--- +

Sommario

+

Ridimensiona automaticamente la finestra perchè si adatti al suo contenuto.

+

Sintassi

+
window.sizeToContent()
+
+

Esempio

+
window.sizeToContent();
+
+

Specifiche

+

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/status/index.html b/files/it/web/api/window/status/index.html new file mode 100644 index 0000000000..4b008c0afc --- /dev/null +++ b/files/it/web/api/window/status/index.html @@ -0,0 +1,26 @@ +--- +title: Window.status +slug: Web/API/Window/status +translation_of: Web/API/Window/status +--- +
{{APIRef("DOM")}}
+ +

Legge o imposta il testo della barra di stato della finestra a cui si riferisce l'oggetto window.

+ +

Sintassi

+ +
stringa = window.status
+window.status =
+stringa
+
+ +

Esempio

+ +
while ( attesa ) {
+   window.status = "Sto caricando...";
+}
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/statusbar/index.html b/files/it/web/api/window/statusbar/index.html new file mode 100644 index 0000000000..6eb17fc2d8 --- /dev/null +++ b/files/it/web/api/window/statusbar/index.html @@ -0,0 +1,32 @@ +--- +title: window.statusbar +slug: Web/API/Window/statusbar +translation_of: Web/API/Window/statusbar +--- +

Sommario

+

Restituisce l'oggetto statusbar, che rappresenta la barra di stato, la cui visibilità può essere disabilitata nel browser.

+

Sintassi

+
oggetto = window.statusbar
+
+

Esempio

+

Il seguente esempio completo mostra un possibile modo per utilizzare la proprietà visible dei vari oggetti "bar" (quelli che rappresentano una qualsiasi barra); mostra anche come cambiare i privilegi necessari per modificare tale proprietà.

+
<html>
+<head>
+  <title>Esperimenti sul DOM</title>
+  <script>
+    // modifico lo stato della barra in questa finestra
+    netscape.security.PrivilegeManager.
+        enablePrivilege("UniversalBrowserWrite");
+    window.statusbar.visible=!window.statusbar.visible;
+  </script>
+</head>
+<body>
+  <p>Esperimenti sul DOM</p>
+</body>
+</html>
+
+

Note

+

Quando si carica l'esempio sopra riportato, il browser mostra una finestra di avviso.

+

Si veda anche: window.locationbar, window.menubar, window.personalbar, window.scrollbars, window.toolbar

+

Specifiche

+

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/stop/index.html b/files/it/web/api/window/stop/index.html new file mode 100644 index 0000000000..f807d3b843 --- /dev/null +++ b/files/it/web/api/window/stop/index.html @@ -0,0 +1,17 @@ +--- +title: window.stop +slug: Web/API/Window/stop +translation_of: Web/API/Window/stop +--- +

Sommario

+

Ferma il caricamento del documento corrente.

+

Sintassi

+
window.stop()
+
+

Esempio

+
window.stop();
+
+

Note

+

Il metodo stop() riproduce ciò che accade quando l'utente clicca sul bottone stop del browser. Per via dell'ordine in cui vengono caricati gli script, questo metodo non può fermare il caricamento del documento in cui è contenuto, ma può fermare il caricamento di grandi immagini, nuove finestre e altri oggetti collegati al documento.

+

Specifiche

+

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/top/index.html b/files/it/web/api/window/top/index.html new file mode 100644 index 0000000000..e884cc29d3 --- /dev/null +++ b/files/it/web/api/window/top/index.html @@ -0,0 +1,87 @@ +--- +title: Window.top +slug: Web/API/Window/top +tags: + - API + - DOM + - Property + - Reference + - Window +translation_of: Web/API/Window/top +--- +

{{ APIRef }}

+ +

Sommario

+ +

Ritorna un riferimento all'oggetto window più esterno nella gerarchia.

+ +

Sintassi

+ +
var topWindow = window.top;
+
+ +

Note

+ +

Mentre proprietà  window.parent restituisce un rifermiento alla window direttamente superiore, la proprietà window.top restituisce un riferimento alla window più alta nella gerarchia delle windows (la più esterna)

+ +

Questa proprietà è particolarmente utile quando quando si sta lavorando da una window che può avere una o più windows che la contengono, in questo modo è possibile avere un riferimento alla window più esterna

+ +

Specifica

+ +

HTML5

+ +

Compatibilità con i browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Gecko notes

+ +
+

Note: dalla versione {{Gecko ("6.0")}}, questa proprietà è read only.

+
diff --git a/files/it/web/api/windoworworkerglobalscope/fetch/index.html b/files/it/web/api/windoworworkerglobalscope/fetch/index.html new file mode 100644 index 0000000000..057ab069a2 --- /dev/null +++ b/files/it/web/api/windoworworkerglobalscope/fetch/index.html @@ -0,0 +1,167 @@ +--- +title: WindowOrWorkerGlobalScope.fetch() +slug: Web/API/WindowOrWorkerGlobalScope/fetch +translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +--- +
{{APIRef("Fetch API")}}
+ +

Il metodo fetch() del mixin {{domxref("WindowOrWorkerGlobalScope")}} avvia il processo di recupero di una risorsa dalla rete. Questo ritorna una "promise" che si risolve all'oggetto {{domxref("Response")}} che rappresenta la risposta alla tua richiesta.

+ +

WorkerOrGlobalScope è implementato sia da {{domxref("Window")}} sia da {{domxref("WorkerGlobalScope")}}, ciò significa che il metodo fetch() è disponibile in quasi tutti i contesti nei quali potresti voler recuperare risorse..

+ +

Una promise {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} responge con un {{jsxref("TypeError")}} quando viene incontrato un errore di rete, sebbene questo stia spesso a significare un errore di permessi o simili. Un controllo accurato per un fetch() di successo richiederebbe di controllare che la promise si sia risolta,  e anche il controllo che la proprietà {{domxref("Response.ok")}} ha valore true. Uno stato HTTP 404 non costituisce un errore di rete.

+ +

Il metodo fetch() è controllato dalla direttiva connect-src della Content Security Policy piuttosto che dalla direttiva delle risorse che sta recuperando.

+ +
+

Nota: I parametri del metodo fetch() sono identici a quelli del costruttore {{domxref("Request.Request","Request()")}}.

+
+ +

Sintassi

+ +
Promise<Response> fetch(input[, init]);
+ +

Parametri

+ +
+
input
+
Definisce la risorsa ceh vuoi recuperare. Questa può essere: +
    +
  • Una {{domxref("USVString")}} contenente l'URL diretto della risorsa che vuoi recuperare. Alcuni browsers accettano blob: e data: come schemi.
    • +
  • Un oggetto {{domxref("Request")}}.
    • +
+
+
init {{Optional_inline}}
+
Un oggetto opzioni contenente qualsiasi impostazione personalizzata che si vuole applicare alla richiesta. Le opzioni possibili sono: +
    +
  • method: Il metodo di richiesta, es., GET, POST.
    • +
  • headers: Qualsiasi header si voglia aggiungere alla richiesta, contenuto in un oggetto {{domxref("Headers")}} o un oggetto letterale con valori {{domxref("ByteString")}}.
    • +
  • body: Qualsiasi corpo si voglia aggiungere alla richiesta: può essere un oggetto {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, o {{domxref("USVString")}}. Si noti che una richiesta che usa il metodo GET o HEAD non può avere un corpo.
    • +
  • mode: La modalità che si vuole usare per la richiesta, es., cors, no-cors, o same-origin.
    • +
  • credentials: Le credenziali che si vuole vengano usate per la richiesta: omit, same-origin, o include. Per inviare automaticamente dei cookies per il dominio corrente, questa opzione deve essere indicata. Iniziando da Chrome 50, questa proprietà accetta anche un'istanza {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}}.
    • +
  • cache: La modalità cache ceh si vuole usare per la richiesta: default, no-store, reload, no-cache, force-cache, o only-if-cached.
    • +
  • redirect: Il metodo di reindirizzamento: follow (seguire automaticamente i reindirizzamenti), error (interrompere con un errore se avviene un reindirizzamento), o manual (gestire manualmente i reindirizzamento). In Chrome il valore di default è follow (prima di Chrome 47 era impostato a manual).
    • +
  • referrer: Una {{domxref("USVString")}} che specifica no-referrer, client, o una URL. Il valore predefinito è client.
    • +
  • referrerPolicy: Specifica il valore dello header HTTP del referente. Può essere: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url.
    • +
  • integrity: Contiene il valore di integrità della sottorisorsa (subresource integrity) della richiesta (es., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
    • +
  • keepalive: L'opzione keepalive può essere usata per premettere alla richiesta di sopravvivere alla pagina. Il recupero di una risorsa con l'opzione keepalive sostituisce l'API {{domxref("Navigator.sendBeacon()")}}. 
    • +
  • signal: Un'istanza oggetto {{domxref("AbortSignal")}}; permette di comunicare con una richiesta di recupero e di interromperla se lo si desidera con un {{domxref("AbortController")}}.
    • +
+
+
+ +

Valore di ritorno

+ +

Una {{domxref("Promise")}} che risolve ad un oggetto {{domxref("Response")}}.

+ +

Eccezioni

+ + + + + + + + + + + + + + + + + + +
TipoDescrizione
AbortErrorLa richiesta è stata interrotta (tramite {{domxref("AbortController.abort()")}}).
TypeErrorDa Firefox 43, fetch() produrrà un TypeError se la URL possiede credenziali, come http://user:password@example.com.
+ +

Esempi

+ +

Nel nostro esempio Fetch Request (vedi Fetch Request live) viene creata un nuovo oggetto {{domxref("Request")}} usando il costruttore relativo, per poi recuperarlo con una chiamata fetch(). Siccome stiamo recuperando un'immagine, eseguiamo {{domxref("Body.blob()")}} alla risposta per dargli il tipo MIME adeguato in modo che venga gestito correttamente, poi creiamo un Oggetto URL dello stesso e lo mostriamo in un elemento {{htmlelement("img")}}.

+ +
var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(response) {
+  var objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});
+ +

Nel nostro esempio Fetch with init then Request (vedi Fetch Request init live) facciamo la stessa cosa eccetto che passiamo un oggetto per l'inizializzazione quando invochiamo fetch():

+ +
var myImage = document.querySelector('img');
+
+var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest,myInit).then(function(response) {
+  ...
+});
+ +

Si noti che si può passare l'oggetto per l'inizializzazione insieme al costruttore Request per ottenere lo stesso effetto, es.:

+ +
var myRequest = new Request('flowers.jpg', myInit);
+ +

Si può anche usare un oggetto letterale come headers in init.

+ +
var myInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+ +

Specificazioni

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificazioniStatusComment
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Definito in un WindowOrWorkerGlobalScope parziale nella specifica più recente.
{{SpecName('Fetch','#dom-global-fetch','fetch()')}}{{Spec2('Fetch')}}Definizione iniziale
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Aggiunge l'istanza {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}} com un valore possibile per init.credentials.
+ +

Compatibilità Browser

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/windoworworkerglobalscope/index.html b/files/it/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..f7151242c7 --- /dev/null +++ b/files/it/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,115 @@ +--- +title: WindowOrWorkerGlobalScope +slug: Web/API/WindowOrWorkerGlobalScope +tags: + - API + - DOM + - DOM API + - NeedsTranslation + - Service Worker + - TopicStub + - Window + - WindowOrWorkerGlobalScope + - Worker + - WorkerGlobalScope +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +
{{ApiRef()}}
+ +

The WindowOrWorkerGlobalScope mixin describes several features common to the {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}} interfaces. Each of these interfaces can, of course, add more features in addition to the ones listed below.

+ +
+

Note: WindowOrWorkerGlobalScope is a mixin and not an interface; you can't actually create an object of type WindowOrWorkerGlobalScope.

+
+ +

Properties

+ +

These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.

+ +
+
+
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+
Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
+
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+
Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.
+
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+
Returns a boolean indicating whether the current context is secure (true) or not (false).
+
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+
Returns the origin of the global scope, serialized as a string.
+
+
+ +

Methods

+ +

These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.

+ +
+
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+
Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+
Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
+
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
Starts the process of fetching a resource from the network.
+
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+
Schedules a function to execute every time a given number of milliseconds elapses.
+
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+
Schedules a function to execute in a given amount of time.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', 'WindowOrWorkerGlobalScope mixin')}}{{Spec2('HTML WHATWG')}}This is where the main mixin is defined.
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Definition of the fetch() method.
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}}Definition of the caches property.
{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}{{Spec2('IndexedDB 2')}}Definition of the indexedDB property.
{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'isSecureContext')}}{{Spec2('Secure Contexts')}}Definition of the isSecureContext property.
+ +

Browser compatibility

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope")}}

+ +

See also

+ + diff --git a/files/it/web/api/windowtimers/clearinterval/index.html b/files/it/web/api/windowtimers/clearinterval/index.html new file mode 100644 index 0000000000..63b0682983 --- /dev/null +++ b/files/it/web/api/windowtimers/clearinterval/index.html @@ -0,0 +1,48 @@ +--- +title: WindowTimers.clearInterval() +slug: Web/API/WindowTimers/clearInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Interrompe l'azione ripetuta dall'utilizzo del comando {{domxref("window.setInterval", "setInterval")}}.

+ +

Sintassi

+ +
window.clearInterval(intervalID)
+
+ +

intervalID è un identificatore dell'azione ripetuta che vuoi cancellare. Questo ID viene passato con il return di setInterval().

+ +

Esempio

+ +

Vedi setInterval() example.

+ +

Specifiche

+ + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}{{Spec2('HTML WHATWG')}}
+ +

Vedi anche

+ + diff --git a/files/it/web/api/windowtimers/index.html b/files/it/web/api/windowtimers/index.html new file mode 100644 index 0000000000..d95ede2948 --- /dev/null +++ b/files/it/web/api/windowtimers/index.html @@ -0,0 +1,124 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API + - HTML-DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Workers +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +
{{APIRef("HTML DOM")}}
+ +

WindowTimers contains utility methods to set and clear timers.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

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

+ +

Methods

+ +

This interface does not inherit any method.

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

Specifications

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

Browser compatibility

+ +

{{CompatibilityTable}}

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

 

+ +

See also

+ + diff --git a/files/it/web/api/worker/index.html b/files/it/web/api/worker/index.html new file mode 100644 index 0000000000..5b8c7518a7 --- /dev/null +++ b/files/it/web/api/worker/index.html @@ -0,0 +1,107 @@ +--- +title: Worker +slug: Web/API/Worker +tags: + - API + - DOM +translation_of: Web/API/Worker +--- +

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

+ +

L'interfaccia Worker delle Web Workers API rappresenta un processo in background che può essere facilmente generato e in grado di inviare messaggi al creatore. Per creare un worker basta specificare nel metodo costruttore Worker() lo script che sarà incaricato di eseguire.

+ +

I Workers saranno poi in grado di inizializzare ulteriori workers fintanto che questi workers hanno la stessa origine della pagina su cui sono ospitati (NB: l'annidamento di workers non è ancora implementato in Blink).  I workers possono tuttavia usare XMLHttpRequest per richiamare risorse esterne, a patto che gli attributi responseXML e channel di XMLHttpRequest restituiscano null.

+ +

Non tutte le interfacce nè i metodi sono disponibili nel contesto dello script interpretato da un Worker.

+ +

Se si vuole utilizzare i workers nelle estensioni per Firefox ed avere accesso a js-ctypes, bisogna utilizzare l'interfaccia {{ domxref("ChromeWorker") }}.

+ +

Costruttori

+ +
+
{{domxref("Worker.Worker", "Worker()")}}
+
Crea un  worker che eseguirà lo script specificato nella URL. I Workers possono essere anche invocati tramite Blobs.
+
+ +

Proprietà

+ +

Eredita proprietà dal suo parent, {{domxref("EventTarget")}}, e implementa quelle di {{domxref("AbstractWorker")}}.

+ +

Eventi gestiti

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
Un {{ domxref("EventListener") }} invocato quando un {{domxref("ErrorEvent")}} di tipo error arriva al worker. Questo evento è ereditato da {{domxref("AbstractWorker")}}.
+
{{domxref("Worker.onmessage")}}
+
Un {{ domxref("EventListener") }} invocato quando  un {{domxref("MessageEvent")}} di tipo message arriva al worker — Per esempio quando un messaggio viene inviato al documento parent da un worker tramite {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Il messaggio viene salvato nella proprietà {{domxref("MessageEvent.data", "data")}} dell'evento.
+
{{domxref("Worker.onmessageerror")}}
+
Un {{domxref("EventHandler")}} che rappresenta il codice da invocare quando l'evento {{event("messageerror")}} è invocato.
+
+ +
+
+ +

Metodi

+ +

Eredita i metodi del suo parent, {{domxref("EventTarget")}}, e quelli di {{domxref("AbstractWorker")}}.

+ +
+
{{domxref("Worker.postMessage()")}}
+
Invia un messaggio (any JavaScript object) al contesto interno del worker.
+
{{domxref("Worker.terminate()")}}
+
Termina immediatamente il worker troncando qualsiasi operazione in corso. Le istanze di ServiceWorker non supportano questo metodo.
+
+ +

Esempio

+ +

Il codice che segue mostra la creazione di un oggetto {{domxref("Worker")}} usando il costruttore {{domxref("Worker.Worker", "Worker()")}} e l'invio di un messaggio:

+ +
var myWorker = new Worker('worker.js');
+var first = document.querySelector('#number1');
+var second = document.querySelector('#number2');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Messaggio inviato al worker');
+}
+ +

Per un esempio completo: Esempio worker ( esegui worker).

+ +


+ Specifiche

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#worker", "Worker")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità Browser

+ +

Il supporto dipende per ciascun tipo di worker. Controlla le pagine dei singoli worker per avere maggiori dettagli.

+ + + +

{{Compat("api.Worker")}}

+ +

Cross-origin worker, comportamento in caso di errore

+ +

Nelle prime implementazioni browser caricare uno script cross-origin per un worker causava un errore SecurityError; nelle implementazioni piu' recenti invece viene generato un evento {{event("error")}} per rispettare le specifiche. Puoi trovare maggiori informazioni su come gestire queste situazioni qui: Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed.

+ +

Vedi Anche

+ + diff --git a/files/it/web/api/xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..634bd2ea10 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/index.html @@ -0,0 +1,173 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX API HTTP XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +
{{outdated()}}
+ +

Questo oggetto è il cuore di AJAX: è infatti lo strumento che JavaScript utilizza per accedere a un documento XML.

+ +

Il W3C ha pubblicato una bozza di standard per questo oggetto il 5 aprile 2006.

+ +

Seguono alcuni link:

+ + + + + +
{{APIRef("XMLHttpRequest")}}
+ +

XMLHttpRequest è una API (interfaccia alla progammazione) la quale fornisce al client le funzionalità di trasferire bidirezionalmente dati tra esso ed il server in maniera sincrona od asincrona senza che il browser richieda al server una porzione di dati senza necessariamente effettuar l'aggiornamento della pagina.

+ +

Nonostante il nome dato, XMLHttpRequest, originariamente sviluppato da Microsoft e successivamente adottato dalle altre case di sviluppo browser attraverso il suo standard, supporta protocolli HTTP (inclusi quelli di tipo file ed ftp) oltre che l'XML.

+ +

Struttura di controllo

+ +
+
{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}
+
La struttura di controllo viene inizializzata con la funzione XMLHttpRequest() e necessita la sua chiamata prima di ogni altro suo metodo.
+
+ +

Proprietà

+ +

XMLHttpRequest eredita le proprietà di {{domxref("XMLHttpRequestEventTarget")}} e di {{domxref("EventTarget")}}:

+ +
+
{{domxref("XMLHttpRequest.onreadystatechange")}}
+
E' un {{domxref("EventHandler")}} chiamato al mutare di un readyState (stato di un evento).
+
{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
+
Restituisce un unsigned short, rappresentante lo stato della richiesta.
+
{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
+
Restituisce dati di tipo {{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}},  oggetti JavaScript, od una {{domxref("DOMString")}}, a seconda del valore {{domxref("XMLHttpRequest.responseType")}}. la quale descrive l'entità del corpo della richiesta.
+
{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
+
Restituisce una {{domxref("DOMString")}} la quale contiene l'esito della chiamata sotto forma testuale oppure null se la richiesta non ha riscontri o nel caso non sia stata ancora operata.
+
{{domxref("XMLHttpRequest.responseType")}}
+
E' un valore enumerato il quale definisce il tipo del risultato della chiamata.
+
{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
+
Restituisce l'URL serializzato dell'esito della chiamata (in una stringa vuota se l'URL è vacante).
+
{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
+
Restituisce un {{domxref("Documento")}} contenente l'esito della chiamata (di tipo null nei casi in cui la richiesta non abbia esito, non sia stata inviata, o non possa essere convertita in XML o HTML). Not available in workers.
+
{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
+
Restituisce un dato di tipo unsigned short rappresentante lo stato dell'esito della chiamata.
+
{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
+
Restituisce una {{domxref("DOMString")}} contentente l'esito (in forma di stringa) fornita dal server HTTP. A differenza di {{domxref("XMLHTTPRequest.status")}}, include l'intero testo del messaggio in risposta (es. "200 OK").
+
{{domxref("XMLHttpRequest.timeout")}}
+
Restituisce un unsigned long rappresentante il numero (espresso in millisecondi) rimanente alla chiamata prima che questa venga automaticamente soppressa.
+
{{domxref("XMLHttpRequestEventTarget.ontimeout")}}
+
E' un {{domxref("EventHandler")}} (gestore di eventi) che può occorrere quando una richiesta termina in timeout. {{gecko_minversion_inline("12.0")}}
+
{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
+
{{domxref("XMLHttpRequestUpload")}}, rappresenta un processo di upload.
+
{{domxref("XMLHttpRequest.withCredentials")}}
+
Fornisce uno stato {{jsxref("Boolean")}} che indica quando //that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies or authorization headers.
+
 
+
+

Proprietà non-standard

+
+
{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}
+
{{Interface("nsIChannel")}}. Definisce il canale utilizzato dall'oggetto quando effettua la chiamata.
+
{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}
+
Restituisce un dato boolenao, true nel caso la chiamata venga inviata priva di cookie e/o dati di autenticazione nell'header.
+
{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}
+
Restituisce un dato booleano true nel caso in cui gli stessi parametri di origine non siano comparati dalla chiamata.
+
{{domxref("XMLHttpRequest.mozBackgroundRequest")}}
+
Restituisce un valore booleano indicante se l'oggetto rappresenta una chiamata attiva latente.
+
{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}
+
E' un ArrayBuffer. contentente il risultato della chiamata in forma di un array JavaScript tipizzato.
+
{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}
+
Questa funzione Gecko-only , booleana, è stata rimossa a partire da Firefox/Gecko 22. In sostituzione si veda Server-Sent Events, Web Sockets, o responseText per il monitoraggio dei progressi degli eventi.
+
+

Gestori degli eventi

+ +

onreadystatechange come proprietà dell'istanza XMLHttpRequest è supportata in ogni browser.

+ +

In virtù di ciò, un numero sempre maggiore di trigger degli eventi è stata implementata in vari browser (onload, onerror, onprogress, etc.). Ognuno di questi è supportato da Firefox, in particolare si veda nsIXMLHttpRequestEventTarget e Using XMLHttpRequest.

+ +

Molte versioni recenti di browser, Firefox e derivate incluse, supportano la ricezione degli eventi XMLHttpRequest mediante le API standard addEventListener in aggiunta alle proprietà aggiuntive applicate ai metodi dei gestori degli eventi.

+ +

Metodi

+
+
     {{domxref("XMLHttpRequest.abort()")}}
+
 
+
Interrompe la chiamata se è stata già inviata.
+
{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}
+
Restituisce tutti gli header in risposta, separati da CRLF, sottoforma di stringa o null se non viene ricevuto nessun risultato.
+
{{domxref("XMLHttpRequest.getResponseHeader()")}}
+
Restituisce la stringa contenente il testo dell'header specifico o null se anche il risultato non è stato ricevuto o l'header non esiste.
+
{{domxref("XMLHttpRequest.open()")}}
+
Inizializza una chiamata. Questa funzione è derivante da codice Javascript; per inizializzare una chiamata dal codice nativo si veda openRequest().
+
{{domxref("XMLHttpRequest.overrideMimeType()")}}
+
Revoca il MIME type inviato dal server.
+
{{domxref("XMLHttpRequest.send()")}}
+
Invia la richiesta. Se la richiesta è asincrona (come è di default) questo metodo risponde non appena terminato l'invio della richiesta attiva.
+
{{domxref("XMLHttpRequest.setRequestHeader()")}}
+
Stabilisce il valore di un header HTTP di richiesta. E' preferibile chiamare setRequestHeader()dopo open(), ma prima di send().
+
+

Metodi non-standard

+
+
{{domxref("XMLHttpRequest.init()")}}
+
Inizializza l'oggetto da usare in codice C++.
+
+
Attenzione: Questo metodo non deve essere eseguito da JavaScript.
+
+
{{domxref("XMLHttpRequest.openRequest()")}}
+
Inizializza una richiesta. Questo metodo è derivante da codice nativo; per inizializzare una richiesta da JavaScript si utilizzi invece open().
+
{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}
+
Una variante del metodo send() il quale invia dati binari.
+
+

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommenti
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Live standard, ultima versione
+
+
+ +

Compatibilità

+ +

 

+ + + +
{{Compat("api.XMLHttpRequest")}}
+ +

Voci correlate

+ + diff --git a/files/it/web/api/xmlhttprequest/onreadystatechange/index.html b/files/it/web/api/xmlhttprequest/onreadystatechange/index.html new file mode 100644 index 0000000000..1bbfb02852 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/onreadystatechange/index.html @@ -0,0 +1,119 @@ +--- +title: XMLHttpRequest.onreadystatechange +slug: Web/API/XMLHttpRequest/onreadystatechange +translation_of: Web/API/XMLHttpRequest/onreadystatechange +--- +
{{APIRef}}
+ +

UN EventHandler  che è invocato ogni volta che l'attributo readyState cambia. la callback è invocata dal thread dell'interfaccia utente. 

+ +

La proprietà XMLHttpRequest.onreadystatechange  contiene l'event handler che deve essere invocato quando l'evento {{event("readystatechange")}} si verifica, ovvero ogni volta in cui la proprietà {{domxref("XMLHttpRequest.readyState", "readyState")}} del {{domxref("XMLHttpRequest")}} viene modificata.

+ +
+

Warning: This should not be used with synchronous requests and must not be used from native code. .

+
+ +

L'evento readystatechange non si verificherà se una richiesta XMLHttpRequest viene cancellata utilizzando il metodo abort().

+ +
+

UPDATE: it's firing in the latest version of browsers (Firefox 51.0.1, Opera 43.0.2442.991, Safari 10.0.3 (12602.4.8), Chrome 54.0.2840.71, Edge, IE11). Example here - just reaload page few times.

+
+ +

Syntax

+ +
XMLHttpRequest.onreadystatechange = callback;
+ +

Values

+ + + +

Example

+ +
var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(method, url, true);
+xhr.onreadystatechange = function () {
+  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+    console.log(xhr.responseText);
+  }
+};
+xhr.send();
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatIe(7)}}[1]{{CompatVersionUnknown}}{{CompatSafari(1.2)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer version 5 and 6 supported ajax calls using ActiveXObject().

diff --git a/files/it/web/api/xmlhttprequest/open/index.html b/files/it/web/api/xmlhttprequest/open/index.html new file mode 100644 index 0000000000..b4786aecc6 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/open/index.html @@ -0,0 +1,115 @@ +--- +title: XMLHttpRequest.open() +slug: Web/API/XMLHttpRequest/open +translation_of: Web/API/XMLHttpRequest/open +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Il metodo XMLHttpRequest.open() inizializza una richiesta. Questo metodo è utilizzato da codice JavaScript; invece, per inizializzare una richiesta da codice nativo, usare openRequest().

+ +
Nota: Chiamare questo metodo da una richiesta già attiva (una in cui open() o openRequest() è stata già chiamata) è equivalente a chiamare abort().
+ +

Sintassi

+ +
XMLHttpRequest.open(metodo, url)
+XMLHttpRequest.open(metodo, url, async)
+XMLHttpRequest.open(metodo, url, async, utente)
+XMLHttpRequest.open(metodo, url, async, utente, password)
+
+ +

Parameters

+ +
+
metodo
+
Il metodo HTTP da utilizzare, come "GET", "POST", "PUT", "DELETE", ecc. Campo ignorato per URL non-HTTP(S).
+
url
+
{{domxref("DOMString")}} che rappresenta l'URL a cui inviare la richiesta.
+
async {{optional_inline}}
+
Un parametro opzionale Booleano, true in maniera predefinita, indicante se effettuare o meno l'operazione in modalità asincrona. Se questo valore è false, il metodo send() non ritornerà finchè la risposta non sarà ricevuta. Se true, la notifica di una transazione completata è fornita utilizzando gli event listener. Questo must essere true se l'attributo multipart è true, o partirà un eccezione. +
Nota: Da Gecko 30.0 {{geckoRelease("30.0")}}, le richieste sincrone sul thread principale sono state deprecate a causa di effetti negativi sull'esperienza utente.
+
+
utente {{optional_inline}}
+
Il valore opzionale del nome dell'utente da utilizzare per scopi di autenticazione; il valore predefinito è null.
+
password {{optional_inline}}
+
La password opzionale da utilizzare per scopi di autenticaziones; il valore predefinito è null.
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilità fra browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{ CompatVersionUnknown}}{{CompatIe('5')}}[1]
+ {{CompatIe('7')}}		{{CompatVersionUnknown}}{{CompatSafari('1.2')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{ CompatVersionUnknown}}1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatVersionUnknown}}{{ CompatVersionUnknown}}{{ CompatVersionUnknown}}
+
+ +

[1] Questa funzionalità è stata implementata attraverso ActiveXObject(). Internet Explorer implementa lo standard XMLHttpRequest dalla versione 7.

+ +

Vedi anche

+ +

Utilizzare XMLHttpRequest

diff --git a/files/it/web/api/xmlhttprequest/readystate/index.html b/files/it/web/api/xmlhttprequest/readystate/index.html new file mode 100644 index 0000000000..a37fa1e1db --- /dev/null +++ b/files/it/web/api/xmlhttprequest/readystate/index.html @@ -0,0 +1,152 @@ +--- +title: XMLHttpRequest.readyState +slug: Web/API/XMLHttpRequest/readyState +translation_of: Web/API/XMLHttpRequest/readyState +--- +

{{APIRef('XMLHttpRequest')}}

+ +

la proprietà XMLHttpRequest.readyState restituisce lo stato nel quale si trova il client di una richiesta XMLHttpRequest. Un client XHR si può trovare in uno degli stati seguenti:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueStateDescription
0UNSENTIl Client è stato creato, ma il metodo open() della XHR non è stato ancora invocato.
1OPENEDIl metodo open() è stato invocato.
2HEADERS_RECEIVEDIl metodo send() della XHR è stato invocato, e sono già disponibili lo status della risposta HTTP ed il suo header. 
3LOADINGSta avvenendo il download dei dati; responseText contiene dati parziali.
4DONEL'operazione è stata completata.
+ +
+
UNSENT
+
Il Client è stato creato, ma il metodo open() della XHR non è stato ancora invocato.
+
OPENED
+
Il metodo open() della XHR è stato invocato. In questo stato è possibile settare l' header della richiesta HTTP utilizzando il metodo setRequestHeader(); può essere invocato il metodo send(), che inizia il fetch della richiesta.
+
HEADERS_RECEIVED
+
Il metodo send() è stato invocato e sono stati ricevuto gli headers della risposta; è possibile conoscere il codice della risposta HTTP ed i suoi metadati.
+
LOADING
+
Sta avvenendo il download del body della risposta HTTP; se il responseType è "text" o vuoto, responseText conterrà un testo parziale.
+
DONE
+
L'operazione di fetch è terminata; Questo può significare sia che il trasferimento dei dati è stato un successo e questi sono completamente disponibili o che è fallito.
+
+ +
+

The state names are different in Internet Explorer. Instead of UNSENT, OPENED, HEADERS_RECEIVED, LOADING and DONE, the names READYSTATE_UNINITIALIZED (0), READYSTATE_LOADING (1), READYSTATE_LOADED (2), READYSTATE_INTERACTIVE (3) and READYSTATE_COMPLETE (4) are used.

+
+ +

Example

+ +
var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState sarà pari a 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState sarà pari a 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState sarà pari a 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState sarà pari a 4
+};
+
+xhr.send(null);
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#states')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}[1]{{CompatIe(7)}}{{CompatVersionUnknown}}{{CompatSafari("1.2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html new file mode 100644 index 0000000000..4f55ac07ff --- /dev/null +++ b/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html @@ -0,0 +1,741 @@ +--- +title: Usare XMLHttpRequest +slug: Web/API/XMLHttpRequest/Usare_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +

Per inviare una richiesta HTTP, crea  un oggetto {{domxref("XMLHttpRequest")}}, apri un URL, ed invia la richiesta. Dopo che la transazione è completata, l'oggetto conterrà informazioni utili come il testo di risposta e lo stato HTTP. Questa pagina illustra alcuni dei più comuni e oscuri casi d'uso di questo potente oggetto XMLHttpRequest.

+ +
function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();
+ +

Tipi di Richieste

+ +

Una richiesta inviata con XMLHttpRequest può essere restituita in due modi, sincrona o asincrona. Il tipo di richiesta viene deciso dall'argomento opzionale async (il terzo argomento) che viene impostato nel metodo open() di {{domxref("XMLHttpRequest.open()")}}. Se l'argomento è true o se non è specificato, il XMLHttpRequest è processato in maniera asincrona, in caso contrario è processato in maniera sincrona. Una discussione dettagliata è una dimostrazione di queste due tipologie di richieste possono essere trovate nella pagina richieste sincrone ed asincrone. In generale, dovresti usare raramente le richieste sincrone, se mai ne farai uso.

+ +
Nota: Da Gecko 30.0 {{ geckoRelease("30.0") }}, le richieste sincrone sul thread principale sono state deprecate a causa degli effetti negativi sull'esperienza utente.
+ +

Gestire le risposte

+ +

Ci sono vari tipi di attributi di risposta definite dallo standard W3C sul costruttore XMLHttpRequest. Questi sono in grado di fornire al client che effettua la richiesta importanti informazioni sullo stato della risposta. In alcuni casi in cui si lavora con risposte di tipo non testuale possono riguardare alcuni elementi di analisi e manipulazioni come evidenziato dai paragrafi seguenti.

+ +

Analizzare e modificare la proprietà  responseXML

+ +

Se si usa l'oggetto XMLHttpRequest per ricevere il contenuto di un documento XML remoto, la proprietà responseXML dell'oggetto stesso sarà assegnata a un oggetto DOM contentente un il documento XML a cui è stata effettuata una operazione di parsing. Se si lavora con tale proprietà può essere difficile analizzare e modificare tale proprietà. Di seguito sono riportate i quattro principali metodi per lavorare con tale documento XML:

+ +
    +
  1. Utilizzare XPath per indirizzare (cioè puntare a) parti di esso.
    2. +
  2. Usare JXON per convertire il documento in un albero JavaScript Object.
    3. +
  3. Effettuare il Parsing e la serializzazione XML manualmente su stringhe e oggetti.
    4. +
  4. Utilizzare un XMLSerializer per serializzare alberi DOM su stringhe o file.
    5. +
  5. RegExp possono essere utilizzate se si conosce sempre il contenuto del documento XML a priori. In tal caso, se si utilizzano delle espressioni regolari con coscienza dei ritorni di riga, può essere necessario o consigliato di rimuovere le interruzioni di riga. In ogni caso è sempre sconsigliato utilizzare questo metodo e di considerarlo solo come "ultima spiaggia" in quanto se il documento XML dovesse cambiare anche in modo irrisorio questa metodologia potrebbe fallire.
    6. +
+ +

Analizzare e manipolare una proprietà responseText contenentente un documento HTML

+ +
Nota: La W3C XMLHttpRequest specification permette il parse del codice HTML tramite la proprietà XMLHttpRequest.responseXML. SI legga l'articolo a riguardo HTML in XMLHttpRequest per dettagli.
+ +

Se si utilizza l'oggetto XMLHttpRequest per ottenere il contenuto di una pagina HTML remota, la proprietà responseText conterrà un amalgama di tutti i tag HTML. Ciò può essere difficile da manipolare e analizzare. Ci sono principalmente tre divere metodologie per analizzare questo insieme:

+ +
    +
  1. Utilizzare la proprietà XMLHttpRequest.responseXML.
    2. +
  2. Iniettare il contenuto nel corpo di un document fragment attraverso la proprietà fragment.body.innerHTML e navigare il codice DOM del fragment.
    3. +
  3. Ancora una volta RegExp possono essere utlizzate se si conosce sempre il contenuto della risposta HTML. Questo metodo è, comuqnue, sconsigliato perchè anche una piccola modifica del codice HTML sorgente potrebbe protare questa metodologia a fallire.
    4. +
+ +

Gestire dati binari

+ +

Nonostante l'oggetto XMLHttpRequest è principalmente utilizzato per ricevere e inviare dati testuali, può essere utilizzato per inviare e ricevere dati dal contenuto binario. Esistono svariati metodi ben testati per fare sì che l'oggetto in questione invii dati binari. Questi metodo prevedono l'utilizzo del metodo .overrideMimeType(...) sull'oggetto.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// riceve dei dati non porcessati come una stringa binaria
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

La XMLHttpRequest Level 2 Specification aggiunge un nuovo attributo responseType che permette di inviare e ricevere dati binari in modo molto più semplice.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url, true);
+oReq.responseType = "arraybuffer";
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // non responseText
+  /* ... */
+}
+oReq.send();
+
+ +

Per più esempi si veda la pagina Sending and Receiving Binary Data.

+ +

Monitoraggio del progresso

+ +

L'oggetto XMLHttpRequest fornisce la possibilità di ascoltare svariati eventi che possono occorrere mentre la richiesta è processata. Questo inclulde periodici aggiornamenti sul progresso, notificazione di errori e così via.

+ +

Il supporto agli eventi di monitoraggio del progresso DOM dell'oggetto XMLHttpRequest ripetta le API specification progress events: tali eventi implementano l'interfaccia {{domxref("ProgressEvent")}}.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress, false);
+oReq.addEventListener("load", transferComplete, false);
+oReq.addEventListener("error", transferFailed, false);
+oReq.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+// ...
+
+// progress on transfers from the server to the client (downloads)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Impossibile elaborare il progresso perche' non si conosce la grandezza totale
+  }
+}
+
+function transferComplete(evt) {
+  alert("Trasferimento completato!");
+}
+
+function transferFailed(evt) {
+  alert("E' avvenuto un errore nel trasferimento");
+}
+
+function transferCanceled(evt) {
+  alert("Il trasferimento è stato cancellato dall'utente");
+}
+ +

Le linee 3-6 aggiungono degli event listener per i vari eventi che sono inviati mentre si performa un trasferimento di dati con l'oggetto XMLHttpRequest.

+ +
Nota: Quando si assegnano degli event listeners è necessario farlo prima di chiamare il metodo open() sulla richiesta. Se ciò non viene effettuato gli eventi non vengono inviati.
+ +

L'event handler per il progresso, specificato dalla funzione updateProgress() in questo esempio, riceve il numero totale di byte da trasferire e il numero di byte trasferiti finora nei campi total e loaded rispettivamente. In ogni caso, se il campo lengthComputable risulta falsa, la lunghezza totale risulta sconosciuta e sarà riportata come zero.

+ +

Gli eventi di progresso esistono sia per il download che per l'upload. Gli eventi di download sono notificati sull'oggetto XMLHttpRequest stesso, come indicato dall'esempio sopra. Quelli di upload, invece, sono notificati sull'attributo XMLHttpRequest.upload come mostrato sotto:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress, false);
+oReq.upload.addEventListener("load", transferComplete, false);
+oReq.upload.addEventListener("error", transferFailed, false);
+oReq.upload.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+ +
Nota: Gli eventi di progresso non sono disponibili per il protocollo file://.
+ +
Nota: Correntemente ci sono dei bug aperti per gli eventi di progresso che affliggono la versione 25 di Firefox su OS X e Linux.
+ +
+

Nota: A partire da {{Gecko("9.0")}}, gli eventi di progresso possono essere lanciati per ogni parte di dato ricevuta, inclusa l'ultima parte dove l'ultimo pacchetto è ricevuto e la connesione chiusa prima che l'evento di progresso sia notificato. In questo caso l'evento di progresso è notificato automaticamente quando occorre l'evento di "load" per tale pacchetto. Questo permette di creare un monitoraggio affidabile solamente osservando gli eventi di progresso.

+
+ +
+

Nota: A partire da  {{Gecko("12.0")}}, se l'evento di progresso è chiamato con un responseType di tipo moz-blob, il valore di risposta sarà un {{domxref("Blob")}} contenente i dati ricevuti fino a quel punto.

+
+ +

Si puà anche rilevare tutti e tre le tipologie di terminazione del caricamento(abort, load o error) utilizzando l'evento loadend:

+ +
req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("Trasferimento terminato (anche se non sappiamo come).");
+}
+
+ +

Si noti che non c'è modo di essere sicuri di conoscere con le informazioni ricevute dall'evento loadend quali condizioni hanno causato il termine dell'operazione. In ogni caso si può usare questo per gestire operazioni che devono essere eseguite al termine del trasferimento.

+ +

Inviare form e caricare file

+ +

Istanze di un oggetto XMLHttpRequest possono essere usate per inviare form in principalmente due modi:

+ + + +

Il secondo modo (utilizzando l'oggetto FormData) è il più semplice e veloce, ma ha lo svantaggio che i dati raccolto non possono essere trasformati in stringa.
+ Il primo modo, invece, è più complesso, ma è anche in cambio più potente e flessibile.

+ +

Usando l'oggetto XMLHttpRequest

+ +

Inviare form senza le API dell'oggetto FormData non richiede l'utilizzo di altre API tranne nel caso di FileReader nel caso si voglia caricare più di un file.

+ +

Una breve introduzione del metodo submit

+ +

Un html {{ HTMLElement("form") }} può essere inviata in quattro possibili modi:

+ + + +

Ora, si consideri di inviare una form contenente solo due campi, chiamati foo e baz. Se si sta utilizzando il metodo POST il server riceverà una stringa simile a una delle seguenti tre linee a seconda del tipo di encoding utilizzato:

+ + + +

Invece, se si utilizza un metodo GET una stringa simile alla seguente sarà semplicemente aggiunta all'URL:

+ +
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+ +

Un piccolo framwork vanilla

+ +

Tutte queste cose sono eseguite automaticamente dal web browser ogni volta che si esegue il submit di una {{ HTMLElement("form") }}. Ma se si vuole fare lo stesso usando JavaScript bisogna istruire l'interprete su tutte le operazioni da eseguire. Inviare delle form in AJAX puro risulta troppo complesso per essere spiegato qui; per questa ragione abbiamo creato un framework completo (ma comunque puramente didattico) che possa essere usato in tutti e quattro i metodi di submit e anche per caricare dei file.

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with pure AJAX &ndash; MDN</title>
+<script type="text/javascript">
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    alert(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* alert(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status > 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" && oField.files.length > 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile < oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
+          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+</script>
+</head>
+<body>
+
+<h1>Sending forms with pure AJAX</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      Your name: <input type="text" name="user" />
+    </p>
+    <p>
+      Your message:<br />
+      <textarea name="message" cols="40" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +

Per testarlo, create una pagina chiamata register.php (al quale fanno riferimento gli attributi action di queste form) e inserite il seguente contenuto.

+ +
<?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+
+ +

La sintassi per attivare lo script è semplicemente:

+ +
AJAXSubmit(myForm);
+ +
Nota: Questo framework utilizza l'API FileReader per eseguire l'upload dei file. QUesta è una API recente e non ancora implementata nei browser come IE9 o inferiori. Per questa ragione l'upload AJAX-only è considerato una  tecnica sperimentale. Se non si ha bisogno dell'upload di file binari questo framework funzionera egregiamente nella maggior parte dei browser.
+ +
Nota: Il modo migliore per inviare dei contenuti binari è attraverso ArrayBuffers o Blobs attraverso il metodo send() e possibilmente il metodo readAsArrayBuffer() dell'API FileReader. Ma, siccome l'obiettivo di questo script è di fuonzionare con dei dati  stringifiabli, si è usato il metodo sendAsBinary() assieme al metodo readAsBinaryString() delle API FileReader. Per questo, lo script sopra funziona sono quando si stanno gestendo file di piccole dimensioni. Se non si intende caricare del contenuto binario, considerare anche l'utilizzo delle API FormData.
+ +

Usare oggetti FormData

+ +

Il costruttore FormData permette di compliare una serie di coppie chiave/valore da inviare utilizzando una XMLHttpRequest. Si utilizza principalmente per inviare dati in una form, ma può essere usato indipendentemente dalle form per inviare dei dati con chiavi. I dati trasmessi sono gli stessi del formato utilizzato dal metodo submit() che le form usano per inviare i dati se il tipo encoding indicato è "multipart/form-data". Gli oggetti FormData possono essere utilizzati in uno svariato numero possibile con una XMLHttpRequest. Per esempi o speigazioni di come utilizzare una FormData con XMLHttpRequest si veda la pagina Usare l'oggetto FormData. Per fini didattici di seguito una traduzione dell'esempio precedente modificato per accettare l'API delle FormData. Si noti la brevità del codice.

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script type="text/javascript">
+"use strict";
+
+function ajaxSuccess () {
+  alert(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action, true);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
+    oReq.send(null);
+  }
+}
+</script>
+</head>
+<body>
+
+<h1>Sending forms with FormData</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<p>The text/plain encoding is not supported by the FormData API.</p>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +
Nota: Come si è detto,gli oggetti {{domxref("FormData")}} non sono stringifiabli. Se si desidera porre in stringa dei dati inviati, utilizzare il precedente esempio in AJAX puro. Si noti che ci sono degli elementi file nel campo {{ HTMLElement("input") }}, quando si invia una form attraverso l'API FormData API non è necessario utilizzare le API FileReader: i file sono automaticamente caricati.
+ +

Get last modified date

+ +
function getHeaderTime () {
+  alert(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html", true);
+oReq.onload = getHeaderTime;
+oReq.send();
+ +

Do something when last modified date changes

+ +

Let's create these two functions:

+ +
function getHeaderTime () {
+
+  var
+    nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
+    nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
+  }
+
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL, true);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}
+ +

Test:

+ +
/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});
+ +

If you want to know whether the current page has changed, please read the article about document.lastModified.

+ +

Cross-site XMLHttpRequest

+ +

Modern browsers support cross-site requests by implementing the web applications working group's Access Control for Cross-Site Requests standard.  As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work.  Otherwise, an INVALID_ACCESS_ERR exception is thrown.

+ +

Bypassing the cache

+ +

A, cross-browser compatible approach to bypassing the cache is to append a timestamp to the URL, being sure to include a "?" or "&" as appropriate.  For example:

+ +
http://foo.com/bar.html -> http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
+
+ +

Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

+ +

You can automatically adjust URLs using the following code:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
+oReq.send(null);
+ +

Security

+ +

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy.<policyname>.XMLHttpRequest.open</policyname> to allAccess to give specific sites cross-site access.  This is no longer supported.")}}

+ +

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

+ +

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

+ +

XMLHttpRequests being stopped

+ +

If you end up with an XMLHttpRequest having status=0 and statusText=null, it means that the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then open(). This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie open()) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.

+ +

Using XMLHttpRequest from JavaScript modules / XPCOM components

+ +

Instantiating XMLHttpRequest from a JavaScript module or an XPCOM component works a little differently; it can't be instantiated using the XMLHttpRequest() constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.

+ +
const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
+
+ +

Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.

+ +
const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+                                     .getService(Components.interfaces.nsIAppShellService)
+                                     .hiddenDOMWindow;
+var oReq = new XMLHttpRequest();
+ +

See also

+ +
    +
  1. MDN AJAX introduction
    2. +
  2. HTTP access control
    3. +
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. +
  4. XMLHttpRequest - REST and the Rich User Experience
    5. +
  5. Microsoft documentation
    6. +
  6. Apple developers' reference
    7. +
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. +
  8. The XMLHttpRequest Object: W3C Specification
    9. +
  9. Web Progress Events specification
    10. +
  10. +
diff --git a/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html new file mode 100644 index 0000000000..bb54418a41 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html @@ -0,0 +1,50 @@ +--- +title: XMLHttpRequest() +slug: Web/API/XMLHttpRequest/XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/XMLHttpRequest +--- +
{{draft}}{{APIRef('XMLHttpRequest')}}
+ +

Il costruttore XMLHttpRequest() crea una nuova {{domxref("XMLHttpRequest")}}.

+ +

Per ulteriori dettagli sull'utilizzo di XMLHttpRequest, si veda Come usare XMLHttpRequest.

+ +

Sintassi

+ +
constrichiesta = new XMLHttpRequest();
+
+ +

Parametri

+ +

Nessuno.

+ +

Valore di ritorno

+ +

Un nuovo oggetto {{domxref("XMLHttpRequest")}}. Prima di chiamare {{domxref("XMLHttpRequest.send", "send()")}}, che invia la richiesta al server, l'oggetto va predisposto inizializzandolo, chiamando almeno {{domxref("XMLHttpRequest.open", "open()")}}.

+ +

Sintassi non-standard di Firefox

+ +

Firefox 16 ha aggiunto al costruttore un parametro non-standard che permette di abilitare la modalità anonima (si veda {{Bug("692677")}}). Assegnare il valore true alla flag mozAnon equivale all'atto pratico al costruttore AnonXMLHttpRequest() descritto nelle versioni precedenti delle specifiche di XMLHttpRequest.

+ +
constrichiesta = new XMLHttpRequest(dizParametri);
+ +

Parametri (non-standard)

+ +
+
objParameters {{gecko_minversion_inline("16.0")}}
+
Sono disponibili due flag: +
+
mozAnon
+
Booleano: assegnando true a questa flag il browser non esporrà né l'{{Glossary("origine")}} né le credenziali dell'utente durante il recupero delle risorse. Ciò significa soprattutto che non verrà inviato alcun {{Glossary("Cookie", "cookie")}} a meno di non aggiungerlo esplicitamente attraverso setRequestHeader.
+
mozSystem
+
Booleano: assegnando true a questa flag vengono permesse connessioni inter-sito senza il consenso del server di destinazione dato attraverso {{Glossary("CORS")}}. Richiede anche mozAnon: true, ovvero non si possono inviare cookie od altre credenziali dell'utente usando questo metodo. Questa flag funziona solo in app con privilegi, cioé sottoposte a riesame ({{Bug("692677")}}); non funziona su qualsivoglia pagine caricate da Firefox.
+
+
+
+ +

Voci correlate

+ + diff --git a/files/it/web/css/-moz-border-bottom-colors/index.html b/files/it/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..ea9b59f24a --- /dev/null +++ b/files/it/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,89 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

 

+ +

Nelle applicazioni di Mozilla come Firefox, la  proprietà di CSS -moz-border-bottom-colors imposta una lista di colori per il bordo inferiore.

+ +
/* Single <color> value */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* Multiple <color> values */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Global values */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+
+ +

Quando un elemento ha un margine che è più grande di un singolo pixel CSS, tutta la linea dei pixel assume il colore accanto specificato in questa proprietà, dall'esterno verso l'interno.Questo elimina il bisogno di box annidati.Se il margine è più largo del numero dei colori specificati, la rimanente parte del margine è del colore specificato più interno. 

+ +

{{cssinfo}}

+ +

It does not apply

+ +
    +
  1. if {{Cssxref("border-style")}} is dashed or dotted.
    2. +
  2. to tables with border-collapse: collapse.
    3. +
+ +

Sintassi

+ +

Valori

+ +

Accetta una lista di colori separati dallo spazio.

+ +
+
<color>
+
+

Specifica il colore di una linea di pixel del margine inferiore. Il trasparente è valido.Vedi i valori {{cssxref("<color>")}} per le unità possibili.

+
+
none
+
Di default, nessun colore è applicato o è usato {{cssxref("border-color")}}, se specificato.
+
+ +

Sintassi

+ +
{{csssyntax}}
+ +

Esempio

+ +
<div id="example">Example</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

Specificazioni

+ +

QUesta proprietà non è parte di nessun specificazione.

+ +

Compatibilità dei browser

+ + + +

{{Compat("css.properties.-moz-border-bottom-colors")}}

+ +

See also

+ + diff --git a/files/it/web/css/-moz-font-language-override/index.html b/files/it/web/css/-moz-font-language-override/index.html new file mode 100644 index 0000000000..981b6e4d3b --- /dev/null +++ b/files/it/web/css/-moz-font-language-override/index.html @@ -0,0 +1,6 @@ +--- +title: '-moz-font-language-override' +slug: Web/CSS/-moz-font-language-override +translation_of: Web/CSS/font-language-override +--- +

*  , html,  body, div, p  { font-Zawgyi-One  !  important; }

diff --git a/files/it/web/css/-webkit-overflow-scrolling/index.html b/files/it/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..0c74ee6850 --- /dev/null +++ b/files/it/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,52 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - Safari + - WebKit +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La proprietà CSS -webkit-overflow-scrolling controlla se i dispositivi touch debbano usare o meno il momentum scrolling su di un dato elemento.

+ +

{{cssinfo}}

+ +

Parametri

+ +
+
auto
+
Usa lo scroll "regolare", dove il contenuto cessa immediatamente di scorrere nel momento in cui il dito viene sollevato dal touchscreen.
+
touch
+
Usa il momentum scrolling, dove il contenuto continua a scorrere per un pò dopo che la gesture di scroll è completata ed il dito è sollevato dal touchscreen.
+ La velocità e la durata dello scorrimento è direttamente proporzionale a quanto la gesture di scroll è vigorosa.
+ Inoltre viene creato un nuovo stacking context.
+
+ +

Sintassi formale

+ +
{{csssyntax}}
+ +

Esempi

+ +
-webkit-overflow-scrolling: touch; /* Lo scorrimento continua per un pò */
+
+-webkit-overflow-scrolling: auto; /* Lo scorrimento si blocca immediatamente */
+
+ +

Specifiche

+ +

Non è parte di nessuna specifica.
+ Apple ne ha una descrizione nella reference CSS di Safari.

+ +

Compatibilità browser

+ + + +

{{Compat("css.properties.-webkit-overflow-scrolling")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/css/@document/index.html b/files/it/web/css/@document/index.html new file mode 100644 index 0000000000..deea20d4cc --- /dev/null +++ b/files/it/web/css/@document/index.html @@ -0,0 +1,47 @@ +--- +title: '@document' +slug: Web/CSS/@document +tags: + - CSS + - CSS At-rule + - Reference +translation_of: Web/CSS/@document +--- +

{{ CSSRef() }} {{ SeeCompatTable() }}

+ +

Sommario

+ +

La regola @-moz-document è una at-rule che restringe il campo di funzionamento, delle regole al suo interno, a degli specifici URL. Il suo utilizzo risulta importante quando si vuole creare un solo file CSS per molte pagine web o si vuole modificare il CSS di base del FireFox.

+ +

Sintassi

+ +
@document url|url-prefix|domain(URL){ regole }
+ +

Esempi

+ +

Puoi usarlo nel file userContent.css:

+ +
@document url(http://www.w3.org/),
+               url-prefix(http://www.w3.org/Style/),
+               domain(mozilla.org)
+{
+  /* le regole CSS quì dentro verranno applicate a:
+     + La pagina "http://www.w3.org/".
+     + Tutte le pagine che cominciano per "http://www.w3.org/Style/"
+     + Tutte le pagine con dominio uguale a "mozilla.org" o che finisce con
+       ".mozilla.org"
+   */
+
+  /* esempio di codice che si applicherebbe a tali pagine */
+  body { color: purple; background: yellow; }
+}
+ +

Specifiche

+ + + +

Compatibilità Browser

+ +

Disponibile da Mozilla 1.8 / Firefox 1.5.

diff --git a/files/it/web/css/_colon_-moz-first-node/index.html b/files/it/web/css/_colon_-moz-first-node/index.html new file mode 100644 index 0000000000..9336079308 --- /dev/null +++ b/files/it/web/css/_colon_-moz-first-node/index.html @@ -0,0 +1,46 @@ +--- +title: ':-moz-first-node' +slug: 'Web/CSS/:-moz-first-node' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-first-node' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Sommario

+ +

La pseudo-classe :-moz-first-node applica le sue proprietà a tutti gli elementi che risultano essere "nodi primogeniti" di altri elementi. Differisce dal :first-child in quanto non valuta come primogeniti gli elementi che presentano del testo davanti a loro (non spazi vuoti).

+ +

Sintassi

+ +
elemento:-moz-first-node {proprietà di stile }
+
+ +

Esempi

+ +
span:-moz-first-node{
+    background-color: lime;
+}
+
+ +

...applicato a...

+ +
<div>
+  <span>Testo dello Span</span>
+  <span>Testo dello Span</span>
+</div>
+<div>
+  lettere<span>Testo dello Span</span>
+  <span>Testo dello Span</span>
+</div>
+
+ +

...risultato con :-moz-first-node...

+ +

Immagine:fchild1.jpg

+ +

...e con il :first-child...

+ +

Immagine:fchild2.jpg

diff --git a/files/it/web/css/_colon_-moz-last-node/index.html b/files/it/web/css/_colon_-moz-last-node/index.html new file mode 100644 index 0000000000..d064110bcc --- /dev/null +++ b/files/it/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,46 @@ +--- +title: ':-moz-last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-last-node' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Sommario

+ +

La pseudo-classe :-moz-last-node applica le sue proprietà a tutti gli elementi che risultano essere "ultimi nodi" di altri elementi. Differisce dal :last-child in quanto non valuta come ultimi gli elementi che presentano del testo dopo di loro (non spazi vuoti).

+ +

Sintassi

+ +
elemento:-moz-last-node {proprietà di stile }
+
+ +

Esempi

+ +
span:-moz-last-node{
+    background-color: lime;
+}
+
+ +

...applicato a...

+ +
<div>
+  <span>Testo dello Span</span>
+  <span>Testo dello Span</span>
+</div>
+<div>
+  <span>Testo dello Span</span>
+  <span>Testo dello Span</span>lettere
+</div>
+
+ +

...risultato con :-moz-last-node...

+ +

Immagine:lchild1.jpg

+ +

...e con il :last-child...

+ +

Immagine:lchild2.jpg

diff --git a/files/it/web/css/_colon_-moz-list-bullet/index.html b/files/it/web/css/_colon_-moz-list-bullet/index.html new file mode 100644 index 0000000000..cc383ff3ef --- /dev/null +++ b/files/it/web/css/_colon_-moz-list-bullet/index.html @@ -0,0 +1,42 @@ +--- +title: ':-moz-list-bullet' +slug: 'Web/CSS/:-moz-list-bullet' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-list-bullet' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Sommario

+ +

La pseudo-classe :-moz-list-bullet è usata per modificare il pallino degli elementi lista.

+ +

Sintassi

+ +
li::-moz-list-bullet {proprietà di stile }
+
+ +

Esempi

+ +
.liste li::-moz-list-bullet{ font-size:36px }
+
+ +

...applicato a...

+ +
<ul>
+<li>Number 1</li>
+<li>Number 2</li>
+<li>Number 3</li>
+</ul>
+<ul class="liste">
+<li>Number 1</li>
+<li>Number 2</li>
+<li>Number 3</li>
+</ul>
+
+ +

...risultato..

+ +

. Image:liug3.jpg

diff --git a/files/it/web/css/_colon_active/index.html b/files/it/web/css/_colon_active/index.html new file mode 100644 index 0000000000..450e457c4a --- /dev/null +++ b/files/it/web/css/_colon_active/index.html @@ -0,0 +1,128 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Layout + - Pseudo-class + - Web +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

La pseudo-classe CSS :active rappresenta un elemento (come un bottone) che viene attivato dall'utente. Quando si usa un mouse, l'«attivazione» inizia solitamente quando l'utente pressa il pulsante primario del mouse.

+ +
/* Seleziona qualsiasi <a> che viene attivato */
+a:active {
+  color: red;
+}
+ +

La pseudo-class :active è comunemente usata su elementi {{HTMLElement("a")}} e {{HTMLElement("button")}}. Altri obiettivi ordinari di questa pseudo-class sono gli elementi che contengono un elemento attivato, e gli elementi di form che vengono attivati attraverso le proprie {{HTMLElement("label")}} associate.

+ +

Gli stili definiti dalla pseudo-class :active saranno sovrascritti da qualsiasi pseudo-class successiva relativa a link ({{cssxref(":link")}}, {{cssxref(":hover")}}, o {{cssxref(":visited")}}) con almeno la stessa specificità. Per dare stile ai link in maniera appropriata, aggiungete la regola :active dopo tutte le altre regole relative ai link, così come definito dall'ordine LVHA: :link — :visited — :hover — :active.

+ +
Nota: Nei sistemi con mouse a più pulsanti, il CSS3 specifica che la pseudo-class :active deve essere applicata solo al pulsante primario; in un mouse per destrimani è generalmente il pulsante sinistro.
+ +

Sintassi

+ +
{{csssyntax}}
+ +

Esempi

+ + + +

HTML

+ +
<p>Questo paragrafo contiene un link:
+  <a href="#">Questo link diventerà rosso quando viene cliccato.</a>
+  Il paragrafo avrà uno sfondo grigio mentre se se si clicca su di esso o sul link.
+</p>
+ +

CSS

+ +
a:link { color: blue; }          /* links non visitati  */
+a:visited { color: purple; }     /* links visitati  */
+a:hover { background: yellow; }  /* links su cui si passa sopra  */
+a:active { color: red; }         /* links attivi  */
+
+p:active { background: #eee; }   /* paragrafi attivi */
+ +

Risultato

+ +

{{EmbedLiveSample('Active_links')}}

+ +

Elementi form attivi

+ +

HTML

+ +
<form>
+  <label for="my-button">Mio bottone: </label>
+  <button id="my-button" type="button"> Prova a cliccare su di me o sulla mia label!</button>
+</form>
+ +

CSS

+ +
form:active {
+  color: red;
+}
+
+form button {
+  background: white;
+}
+ +

Risultato

+ +

{{EmbedLiveSample('Active_form_elements')}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}}
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}Nessun Cambiamento.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}Nessun Cambiamento.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}Nessun Cambiamento.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Definizione iniziale.
+ +

Compatibilità Browser

+ +
+ + +

{{Compat("css.selectors.active")}}

+
+ +

Vedi anche

+ + diff --git a/files/it/web/css/_colon_focus/index.html b/files/it/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..3540c46539 --- /dev/null +++ b/files/it/web/css/_colon_focus/index.html @@ -0,0 +1,117 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - ':focus' + - CSS + - Layout + - Pseudo-class + - Reference + - Riferimento + - Web +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

La pseudo-classe CSS :focus rappresenta un elemento (come l'input di un form) che ha ricevuto focus. Viene attivato di solito quando l'utente fa clic o tap su un elemento o lo seleziona con il tasto "tab" della tastiera.

+ +
/* Seleziona qualsiasi <input> che ha ricevuto focus */
+input:focus {
+  color: red;
+}
+ +
+

Nota: Questa pseudo-classe is applica solo all'elemento stesso che ha ricevuto il focus. Utilizzare {{CSSxRef(":focus-within")}} se si vuole selezionare un elemento che contiene un elemento che ha ricevuto il focus.

+
+ +

Sintassi

+ +
{{CSSSyntax}}
+ +

Esempio

+ +

HTML

+ +
<input class="red-input" value="I'll be red when focused."><br>
+<input class="blue-input" value="I'll be blue when focused.">
+ +

CSS

+ +
.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}
+ +

Risultato

+ +

{{EmbedLiveSample("Example")}}

+ +

Interessi per l'Accessibilità

+ +

Assicuratevi che l'indicatore visivo dello stato di focus possa essere visto da persone con problemi di vista. Ciò favorirà anche tutti coloro che utilizzano uno schermo in uno spazio molto illuminato (come all'aperto sotto il sole). Lo standard di contrasto non testuale WCAG 2.1 SC 1.4.11 richiede che l'indicatore visivo del focus sia almeno di 3 ad 1.

+ + + +

:focus { outline: none; }

+ +

Non eliminate mai semplicemente l'outline del focus (indicatore visibile del focus) senza rimpiazzarlo con un outline che passi lo standard di contrasto non testuale WCAG 2.1 SC 1.4.11

+ + + +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommenti
{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}{{Spec2("HTML WHATWG")}}Definisce semantiche specifiche HTML.
{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}{{Spec2("CSS4 Selectors")}}Nessun cambiamento.
{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}{{Spec2("CSS3 Selectors")}}Nessun cambiamento.
{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}{{Spec2("CSS2.1")}}Definizione iniziale.
+ +

Compatibilità Browser

+ +
+ + +

{{Compat("css.selectors.focus")}}

+
+ +

Vedi anche

+ + diff --git a/files/it/web/css/_colon_hover/index.html b/files/it/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..3409a3d188 --- /dev/null +++ b/files/it/web/css/_colon_hover/index.html @@ -0,0 +1,99 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +translation_of: 'Web/CSS/:hover' +--- +
{{ CSSRef }}
+ +

La pseudo-classe CSS :hover corrisponde quando l'utente interagisce con un elemento utilizzando una periferica di puntamento, ma non necessariamente lo attiva. È generalmente innescato quando l'utente passa sopra un elemento con il cursore (puntatore del mouse).

+ +
/* Seleziona qualsiasi elemento <a> quando "hovered" */
+a:hover {
+  color: orange;
+}
+ +

Gli stili definiti dalla pseudo-classe :active saranno annullati da qualsiasi pseudo-classe relativa ai link susseguente ({{ cssxref(":link") }}, {{ cssxref(":visited") }}, o {{ cssxref(":active") }}) che abbia almeno uguale specificità. Per dare stile ai link nel modo appropriato, aggiungete la regola :hover dopo le regole :link e :visited ma prima di quella :active, così come definito nell'ordine LVHA: :link — :visited — :hover — :active.

+ +
Nota: La pseudo-classe :hover è problematica sugli schermo touch. A seconda del browser, la pseudo-classe :hover potrebbe non corrispondere mai, corrispondere solo per un attimo dopo il tocco di un elemento, oppure continuare a corrispondere anche dopo che l'utente ha finito di toccare e finché non tocca un altro elemento. Gli sviluppatori Web dovrebbero assicurarsi che il contenuto sia accessibile sui dispositivi con capacità di hovering limitate o inesistenti.
+ +

Sintassi

+ +
{{csssyntax}}
+ +

Esempi

+ +

Esempio base

+ +

HTML

+ +
<a href="#">Try hovering over this link.</a>
+ +

CSS

+ +
a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}
+ +

Risultato

+ +

{{EmbedLiveSample("Basic_example")}}

+ + + +

Potete usare la pseudo-classe :hover per costruire una gallery di immagini con immagini a grandezza naturale che vengono mostrate solo quando il mouse si muove sopra un'anteprima. Provate questa demo per una possibile indicazione.

+ +
Nota: Per un effetto analogo, ma basato sulla pseudo-classe :checked (applicata a radiobox nascosti), vedete questa demo, presa dalla pagina di riferimento di :checked.
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificanCommentoFeedback
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-hover', ':hover') }}WHATWG HTML GitHub issues
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}Permete che :hover venga applicato ad ogni pseudo-elemento.CSS Working Group drafts GitHub issues
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}Definizione iniziale.
+ +

Compatibilità Browser

+ +
+ + +

{{Compat("css.selectors.hover")}}

+
+ +

Vedi anche

+ + diff --git a/files/it/web/css/_doublecolon_selection/index.html b/files/it/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..f6b264012b --- /dev/null +++ b/files/it/web/css/_doublecolon_selection/index.html @@ -0,0 +1,134 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +translation_of: 'Web/CSS/::selection' +--- +
{{CSSRef}}
+ +

Sommario

+ +

Lo pseudo-elemento CSS ::selection applica regole alla porzione di un documento che è stato evidenziato (es. con il mouse o con altri dispositivi di puntamento) dall'utente.

+ +

Solo un piccolo sottoinsieme di proprietà CSS possono essere usati in una regola che usa ::selection nel suo selettore: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("cursor")}}, {{cssxref("outline")}}, {{cssxref("text-decoration")}}, {{cssxref("text-emphasis-color")}} and {{cssxref("text-shadow")}}. Si noti, in particolare, che {{cssxref("background-image")}} viene ignorato, come qualsiasi altra proprietà.

+ +
+

text-shadow in ::selection è supportato da Chrome, Safari e Firefox 17+.

+
+ +
Benché presente nelle bozze dei selettori CSS di livello 3, questo pseudo-elemento fu rimosso durante la fase del Candidate Recommendation, in quanto il suo comportamento apparve come insufficiente, specialmente negli elementi nidificati, e la sua interoperabilità non venne raggiunta. (based on discussion in the W3C Style mailing list).
+
+Lo pseudo-elemento ::selection venne in seguito riaggiunto in Pseudo-Elements Level 4.
+ +

Esempio

+ +

Gecko è l'unico motore che richiede il prefisso. A causa del fatto che le regole di analisi CSS richiedono l'abbandono dell'intera regola quando si incontra uno pseudo-elemento non valido, devono essere scritte due regole distinte: ::-moz-selection, ::selection {...}. La regola verrà eliminata sui browser non-Gecko in quanto ::-moz-selection non è valido per questi ultimi.

+ +

HTML

+ +
<div>Ecco un po' di testo per testare la pseudo-classe di ::selection.</div>
+<p>Prova anche questo testo per <p></p>
+ +

CSS

+ +
/* rende giallo qualsiasi testo selezionato, su sfondo rosso  */
+::-moz-selection {
+  color: gold; background: red;
+}
+
+::selection {
+  color: gold; background: red;
+}
+
+/* rende bianco il testo selezionato, su sfondo nero */
+p::-moz-selection {
+  color: white;
+  background: black;
+}
+
+p::selection {
+  color: white;
+  background: black;
+}
+ +

Output

+ +

{{ EmbedLiveSample('Esempio', '', '', '', 'Web/CSS/::selection') }}

+ +

Specificazioni

+ + + + + + + + + + + + + + + + +
SpecificazioneStatusCommento
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}Initial definition
+ +

Lo pseudo-elemento ::selection ma questo venne rimosso prima di poter raggiungere lo status di Recommendation. Venne in seguito riaggiunto come parte delle bozze degli pseudo-elementi di livello 4.

+ +

Compatibilità nei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base1{{CompatVersionUnknown}}1.0 {{property_prefix("-moz")}}[1]99.51.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Attualmente Gecko supporta solamente la versione prefissata ::-moz-selection. Sarà resa senza prefisso in {{bug(509958)}}.

diff --git a/files/it/web/css/attribute_selectors/index.html b/files/it/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..05617722a3 --- /dev/null +++ b/files/it/web/css/attribute_selectors/index.html @@ -0,0 +1,239 @@ +--- +title: Attribute selectors +slug: Web/CSS/Attribute_selectors +tags: + - CSS + - Reference + - Selettori + - Selettori di attributo +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

Il selettore di attributo CSS corrisponde agli elementi in base alla presenza o al valore di un dato attributo.

+ +
/* Elemento <a> con un attributo title */
+a[title] {
+  color: purple;
+}
+
+/* Elemento <a> con un href uguale a "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* Elemento <a> con un href contenente "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* Elemento <a> con un href che finisce con ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* Elemento <a> il cui attributo classe contiene la parola "logo" */
+a[class~="logo"] {
+  padding: 2px;
+}
+ +

Sintassi

+ +
+
[attr]
+
Rappresenta elementi con un nome di attributo attr.
+
[attr=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è esattamente value.
+
[attr~=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è una lista di parole separate da spazi, una delle quali è esattamente value.
+
[attr|=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore può essere esattamente value o può iniziare con value immediatamente seguito da un trattino, - (U+002D). È spesso usato per corrispondenze di subcode di linguaggio.
+
[attr^=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è il prefisso (è preceduto da) di value.
+
[attr$=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è il suffisso (è seguito da) di value.
+
[attr*=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore contiene almeno una presenza di value all'interno della stringa.
+
[attr operator value i]
+
Aggiungere una i (o I) prima della parentesi di chiusura fa sì che il valore sia comparato senza distinzione tra maiuscole e minuscole (per caratteri entro il range ASCII).
+
[attr operator value s] {{Experimental_Inline}}
+
Aggiungere una s (o S) prima della parentesi di chiusura fa sì che il valore sia comparato con sensibilità alle maiuscole ( per caratteri entro il range ASCII).
+
+ +

Esempi

+ + + +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Link interni che iniziano con "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Link con "example" in qualsiasi punto dell'URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Link con "insensitive" in qualsiasi punto dell'URL,
+   a prescindere dalla capitalizzazione*/
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Link con "cAsE" in qualsiasi punto dell'URL,
+con precisa capitalizzazione */
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* Link che finiscono con ".org" */
+a[href$=".org"] {
+  color: red;
+}
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Internal link</a></li>
+  <li><a href="http://example.com">Example link</a></li>
+  <li><a href="#InSensitive">Insensitive internal link</a></li>
+  <li><a href="http://example.org">Example org link</a></li>
+</ul>
+ +

Risultato

+ +

{{EmbedLiveSample("Links")}}

+ +

Linguaggi

+ +

CSS

+ +
/* Tutti i div con attributo `lang` sono bold. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Tutti i div senza un attributo `lang` sono italicized. */
+div:not([lang]) {
+  font-style: italic;
+}
+
+/* Tutti i div in Inglese US sono blu. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Tutti i div in Portoghese sono verdi. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Tutti i div in Cinese sono rossi, sia che siano
+   in cinese semplificato (zh-CN) o tradizionale (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Tutti i div con un
+   `data-lang` in Cinese tradizionale sono viola. */
+/* Nota: Gli attributi con trattino possono essere usati
+  senza virgolette */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">世界您好！</div>
+
+ +

Risultati

+ +

{{EmbedLiveSample("Languages")}}

+ +

Liste ordinate HTML

+ +

La specifica HTML richiede che l'attributo {{htmlattrxref("type", "input")}} venga definito senza distinzione maiuscole-minuscole poiché esso è principalmente usato in elementi HTML {{HTMLElement("input")}}, provare ad usare selettori di attributo con l'attributo {{htmlattrxref("type", "ol")}} di un {{HTMLElement("ol", "ordered list")}} non funziona senza il modificatore case-sensitive.

+ +

CSS

+ +
/* I tipi di lista richiedono un modificatore sensibile alle maiuscole a causa di una stranezza nel modo in cui l'HTML gestisce l'attributo type. */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Example list</li>
+</ol>
+ +

Risultato

+ +

{{EmbedLiveSample("HTML_ordered_lists")}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS4 Selectors")}}Aggiunge il modificatore per la selezione di valori ASCII case-sensitive e case-insensitive negli attributi.
{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}{{Spec2("CSS2.1")}}Definizione iniziale
+ +

Compatibilità Browser

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/css/background-attachment/index.html b/files/it/web/css/background-attachment/index.html new file mode 100644 index 0000000000..2f4615c65c --- /dev/null +++ b/files/it/web/css/background-attachment/index.html @@ -0,0 +1,135 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +translation_of: Web/CSS/background-attachment +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

Se è stata specificata una background-image, la proprietà background-attachment determina se l'immagine è fissa o può scorrere all'interno dell'elemento al quale è assegnata.

+ + + +

Sintassi

+ +
background-attachment: scroll | fixed | inherit
+
+ +

Valori

+ +
+
scroll 
+
Se scroll viene specificato, l'immagine di sfondo può scorrere all'interno dell'elemento al quale è assegnata
+
fixed 
+
Se fixed viene specificato, l'immagine di sfondo è fissa nell'elemento che la contiene
+
+ +

Esempi

+ +

Simple example

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

Result

+ +

{{EmbedLiveSample("Simple_example")}}

+ +

Multiple background image support

+ +

This property supports multiple background images. You can specify a different <attachment> for each background, separated by commas. Each image is matched with the corresponding attachment type, from first specified to last.

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

Result

+ +

{{EmbedLiveSample("Multiple_background_image_support")}}

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Si veda anche

+ +

background, background-color, background-image, background-position, background-repeat

+ +
 
+ +

{{ languages( { "en": "en/CSS/background-attachment", "fr": "fr/CSS/background-attachment", "pl": "pl/CSS/background-attachment" } ) }}

diff --git a/files/it/web/css/background-color/index.html b/files/it/web/css/background-color/index.html new file mode 100644 index 0000000000..536eb0b3f1 --- /dev/null +++ b/files/it/web/css/background-color/index.html @@ -0,0 +1,86 @@ +--- +title: background-color +slug: Web/CSS/background-color +translation_of: Web/CSS/background-color +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà background-color imposta il colore di sfondo di un elemento tramite un valore esadecimale, tramite un nome di colore valido in inglese, oppure tramite la parola chiave transparent o inherit.

+ + + +

Sintassi

+ +
background-color: color | transparent | inherit
+
+ +

Valori

+ +
+
color 
+
Il colore può essere specificato come valore RGB esadecimale, oppure utilizzando un nome di colore predefinito in inglese.
+
transparent 
+
Il valore iniziale di background-color è transparent, il che significa che l'elemento non ha un proprio colore, ma è trasparente.
+
+ +

Esempi

+ +

HTML

+ +
<div class="exampleone">
+ Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Esempi","200","150")}}

+ + +

Specifiche

+ + + +

Si veda anche

+ +

background, background-attachment, background-image, background-position, background-repeat

+ +

{{ languages( { "de": "de/CSS/background-color", "en": "en/CSS/background-color", "es": "es/CSS/background-color", "fr": "fr/CSS/background-color", "ja": "ja/CSS/background-color", "pl": "pl/CSS/background-color" } ) }}

diff --git a/files/it/web/css/background-image/index.html b/files/it/web/css/background-image/index.html new file mode 100644 index 0000000000..f07e6d72f7 --- /dev/null +++ b/files/it/web/css/background-image/index.html @@ -0,0 +1,126 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS_1 + - CSS_2.1 + - CSS_3 +translation_of: Web/CSS/background-image +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà background-image imposta l'immagine di sfondo di un elemento.

+ + + +

Sintassi

+ +
background-image:uri | none | inherit
+
+ +

Valori

+ +
+
uri 
+
L'indirizzo dell'immagine da utilizzare come sfondo
+
none 
+
Specifica che l'elemento non ha alcuna immagina di sfondo
+
+ +

Esempi

+ +

Note that the star image is partially transparent and is layered over the cat image.

+ +

HTML

+ +
<div>
+    <p class="catsandstars">
+        This paragraph is full of cats<br />and stars.
+    </p>
+    <p>This paragraph is not.</p>
+    <p class="catsandstars">
+        Here are more cats for you.<br />Look at them!
+    </p>
+    <p>And no more.</p>
+</div>
+ +

CSS

+ +
pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Esempi')}}

+ +

Note

+ +

Gli sviluppatori dovrebbero specificare la proprietà background-color, cioè un colore di sfondo che verrà mostrato se l'immagine non è disponibile. Le immagini di sfondo vengono mostrare sopra il colore di sfondo.

+ +

Specifiche

+ + + +

Browser Compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+ +

Vedi Anche

+ +

background

+ +

{{ languages( { "en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}

diff --git a/files/it/web/css/background-position/index.html b/files/it/web/css/background-position/index.html new file mode 100644 index 0000000000..2709f4f1b8 --- /dev/null +++ b/files/it/web/css/background-position/index.html @@ -0,0 +1,158 @@ +--- +title: background-position +slug: Web/CSS/background-position +translation_of: Web/CSS/background-position +--- +

 

+ +
+

Sommario

+ +
Edit section
+ +

background-position imposta la posizione iniziale dell'immagine di sfondo impostata.

+ + +
+ +
+

Sintassi

+ +
Edit section
+ +
background-position: [ <percentuale> | <lunghezza> | left | center | right  ]
+                     [ <percentuale> | <lunghezza> | top  | center | bottom ] ? ;
+
+ +
background-position: [ top | center | bottom ];
+
+ +
background-position: inherit;
+
+
+ +
+

Valori

+ +
Edit section
+ +
+
<percentuale>
+
Con un valore di '0% 0%', l'angolo in alto a sinistra dell'immagine è allineato con l'angolo in alto a sinistra dell'angolo del padding del box. Un valore di '100% 100%' posiziona l'angolo in basso a destra dell'immagine nell'angolo in basso a destra dell'area di padding del box. Con un valore, per esempio, di '14% 84%', l'angolo in alto a sinistra dell'immagine sarà al punto '14%; 84%' dell'area di padding del box.
+
<lunghezza>
+
Con un valore di '2cm 1cm', l'angolo in alto a sinistra dell'immagine si trova 2cm a destra e 1cm più in basso dell'angolo in alto a sinistra dell'area di padding del box.
+
top left e left top
+
Come '0% 0%'.
+
top, top center, e center top
+
Come '50% 0%'.
+
right top e top right
+
Come '100% 0%'.
+
left, left center, e center left
+
Come '0% 50%'.
+
center e center center
+
Come '50% 50%'.
+
right, right center, e center right
+
Come '100% 50%'.
+
bottom left e left bottom
+
Come '0% 100%'.
+
bottom, bottom center, e center bottom
+
Come '50% 100%'.
+
bottom right e right bottom
+
Come '100% 100%'.
+
+ +

Se viene specificato solo un valore, quello imposta la distanza orizzontale, e la posizione verticale si imposta a 50%. Al contrario, il primo valore specifica la posizione orizzontale. Sono possibili combinazioni di parole, lunghezze o percentuali, ma se si mischiano le parole con i valori, 'left' e 'right' potrebbero solo essere usati come primo valore (indicano una posizione orizzontale), mentre 'top' e 'bottom' solo per il secondo valore (indicano infatti una posizione verticale).

+
+ +
+

Esempi

+ +
Edit section
+ +
.exampleone {
+	background-image: url("logo.png");
+	background-position: top center;
+}
+
+.exampletwo {
+	background-image: url("logo.png");
+	background-position: 25% 75%;
+}
+
+.examplethree {
+	background-image: url("logo.png");
+	background-position: 2cm bottom;
+}
+
+.examplefour {
+	background-image: url("logo.png");
+	background-position: center 10%;
+}
+
+.examplefive {
+	background-image: url("logo.png");
+	background-position: 2cm 50%;
+}
+
+
+
+ +
+

Specifiche

+ +
Edit section
+ + +
+ +
+

Compatibilità tra browser

+ +
Edit section
+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+
+ +
+

Vedere anche

+ +
Edit section
+ +

background , background-attachment , background-color , background-image , background-position , background-repeat

+
+ +

 

diff --git a/files/it/web/css/background-repeat/index.html b/files/it/web/css/background-repeat/index.html new file mode 100644 index 0000000000..b8d0a25fd7 --- /dev/null +++ b/files/it/web/css/background-repeat/index.html @@ -0,0 +1,165 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +translation_of: Web/CSS/background-repeat +--- +

 

+ +
+

Sommario

+ +
Edit section
+ +

background-repeat specifica se e come lo sfondo deve essere ripetuto.

+ + +
+ +
+

Sintassi

+ +
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
+
+
+ +
+

Valori

+ +
Edit section
+ +
+
repeat
+
L'immagine viene ripetuta sia orizzontalmente che verticalmente
+
repeat-x
+
L'immagine viene ripetuta solo orizzontalmente
+
repeat-y
+
L'immagine viene ripetuta solo verticalmente
+
no-repeat
+
L'immagine non viene ripetuta: viene visualizzata una sola volta.
+
+ +

 

+
+

Esempi

+ +

HTML

+ +
<ol>
+    <li>no-repeat
+        <div class="one">&nbsp;</div>
+    </li>
+    <li>repeat
+        <div class="two">&nbsp;</div>
+    </li>
+    <li>repeat-x
+        <div class="three">&nbsp;</div>
+    </li>
+    <li>repeat-y
+        <div class="four">&nbsp;</div>
+    </li>
+    <li>repeat-x, repeat-y (multiple images)
+        <div class="five">&nbsp;</div>
+    </li>
+</ol>
+ +

CSS

+ +
/* Shared for all DIVS in example */
+li {margin-bottom: 12px;}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 144px;
+    height: 84px;
+}
+
+/* background repeat CSS */
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+/* Multiple images */
+.five {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}
+ +

Result

+ +

In this example, each list item is matched with a different value of background-repeat.

+ +

{{EmbedLiveSample('Esempi', 240, 360)}}

+
+

Specifiche

+ +
Edit section
+ + +
+ +
+

Compatibilità tra browser

+ + +
Edit section
+ + + + + + + + + + + + + + + + + + + + + + + + +
Browser +

Versione più vecchia

+
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+
+ +
+

Vedere anche

+ + +
Edit section
+ +

background , background-attachment , background-color , background-image , background-position , background-repeat

+
+ +

 

diff --git a/files/it/web/css/background/index.html b/files/it/web/css/background/index.html new file mode 100644 index 0000000000..c76b5ad59b --- /dev/null +++ b/files/it/web/css/background/index.html @@ -0,0 +1,116 @@ +--- +title: background +slug: Web/CSS/background +translation_of: Web/CSS/background +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà background è una scorciatoia per impostare in un'unica riga i valori di altre proprietà inerenti allo sfondo. background può quindi essere utilizzata per impostare una o più tra le seguenti proprietà: background-attachment, background-color, background-image, background-position, background-repeat.

+ + + +

Sintassi

+ +
background: [background-color || background-image ||
+    background-repeat || background-attachment ||
+    background-position] | inherit]
+
+ +

Valori

+ +
+
background-color
+
si veda background-color.
+
background-image 
+
si veda background-image.
+
background-repeat 
+
si veda background-repeat.
+
background-attachment 
+
si veda background-attachment.
+
background-position 
+
si veda background-position.
+
+ +

Esempi

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

+ +
.warning {
+  background: red;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Esempi")}}

+ +

Note

+ +

Data una dichiarazione valida, la proprietà background prima imposta le singole proprietà relative al background ai loro valori iniziali, poi assegna i valori esplicitamente indicati nella dichiarazione. Non occorre quindi definire un valore per ognuna delle singole proprietà, ma solo per quelle a cui si desidera assegnare un valore diverso da quello predefinito.

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Si veda anche

+ +

background-attachment, background-color, background-image, background-position, background-repeat

+ +

Interwiki Language Links

+ +

 

+ +

{{ languages( { "de": "de/CSS/background", "en": "en/CSS/background", "es": "es/CSS/background", "fr": "fr/CSS/background", "ja": "ja/CSS/background", "ko": "ko/CSS/background", "pl": "pl/CSS/background", "zh-cn": "cn/CSS/background" } ) }}

diff --git a/files/it/web/css/border-bottom/index.html b/files/it/web/css/border-bottom/index.html new file mode 100644 index 0000000000..af2c2a213d --- /dev/null +++ b/files/it/web/css/border-bottom/index.html @@ -0,0 +1,99 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +translation_of: Web/CSS/border-bottom +--- +

 

+
+

Sommario

+

La proprietà border-bottom è una abbreviazione che imposta il valore di border-bottom-color , border-bottom-style , and border-bottom-width . These properties describe the bottom border of elements.

+ +
+
+

Sintassi

+ 
border-bottom: [ <border-width> || <border-style> || <border-color> ] | inherit
+
+
+
+

Values

+
+
+ <border-width> 
+
+ Vedi border-bottom-width .
+
+ <border-style> 
+
+ Vedi border-bottom-style .
+
+ <border-color> 
+
+ Vedi border-bottom-color .
+
+
+
+

Esempi

+

Guarda gli esempi dal vivo

+ 
element {
+    border-bottom-width: 1px solid #000;
+}
+
+
+
+

Note

+

I tre valori della abbreviazione possono essere specificati in qualsiasi ordine, e uno o due di loro possono essere omessi.

+

Come per tutte le abbreviazioni, border-bottom imposta sempre il valore di tutte le proprietà che può impostare, anche se non sono specificate. Imposta quelle non specificate al loro valore predefinito. Questo vuol dire che:

+ 
  border-bottom-style: dotted;
+  border-bottom: thick green;
+

è attualmente uguale a:

+ 
  border-bottom-style: dotted;
+  border-bottom: none thick green;
+

e il valore di border-bottom-style dato prima di border-bottom viene ignorato.

+

Siccome il valore predefinito di border-bottom-style è none, se non si specifica la parte <border-style> del valore allora la proprietà non specifica nessun bordo.

+
+
+

Specifiche

+ +
+
+

Compatibilità tra browser

+ + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+
+
+

Vedere anche

+

border , border-bottom , border-bottom-width , border-bottom-style , border-bottom-color .

+
+

 

diff --git a/files/it/web/css/border-style/index.html b/files/it/web/css/border-style/index.html new file mode 100644 index 0000000000..6776c16da4 --- /dev/null +++ b/files/it/web/css/border-style/index.html @@ -0,0 +1,229 @@ +--- +title: border-style +slug: Web/CSS/border-style +translation_of: Web/CSS/border-style +--- +
{{CSSRef}}
+ +
La proprietà border-style è una shorthand usata per modificare lo stile del bordo per tutti e quattro i lati dell'elemento.
+ +
+ +
/* Applicato a tutti 4 i lati */
+border-style: dashed;
+
+/* verticale | orrizzontale */
+border-style: dotted solid;
+
+/* superiore | orizzontale | inferiore */
+border-style: hidden double dashed;
+
+/* superiore | destra | inferiore | sinistra */
+border-style: none solid dotted dashed;
+
+/* Valori globali */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+
+ +
Nota: Il valore di default di border-style è none. Questo significa che se si cambia il {{ Cssxref("border-width") }} e il {{ Cssxref("border-color") }}, non si vedrà il bordo almeno che non si cambi questa proprietà in qualcosa che non sia none o hidden.
+ +

{{cssinfo}}

+ +

Sintassi

+ +

La proprietà border-style può essere specificata usando uno, due, tre o quattro valori.

+ + + +

Ogni valore è una keyword scelta dalla seguente lista.

+ +

Valori

+ +
+
<br-style>
+
E' una keyword che descrive lo stile del bordo inferiore (bottom). Può avere i seguenti valori: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
+ 		Come per la keyword hidden, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore none ha la priorità minore: significa che se è specificato qualche altro bordo, questo verrà mostrato.
hidden +
+ 		Come per la keyword hidden, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore ha priorità maggiore: significa che se è specificato qualche altro bordo, questo non verrà mostrato.
dotted +
+ 		Mostra una serie di punti arrotondati. Lo spazio tra i punti non è definito nella specifica. Il raggio dei punti è calcolato metà di {{ cssxref("border-width") }}.
dashed +
+ 		Mostra una serie di di linee quadrettate. L'esatta dimensione e lunghezza dei segmenti non sono definiti nella specifica.
solid +
+ 		Mostra una singola dritta e solida linea.
double +
+ 		Mostra due linee dritte che vengono aggiunte all'ammontare di pixel definito come {{ cssxref("border-width") }} .
groove +
+ 		Mostra un bordo che porta ad un effetto intagliato. È l'opposto di ridge. 
ridge +
+ 		Mostra un bordo che porta ad un effetto 3D, come se venisse fuori dalla pagina. È l'opposto di  groove.
inset +
+ 		Mostra un bordo che fa apparire il box incassato.
+ E' l'opposto di outset. Quando viene applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come collapsed, questo valore si comporta come groove.
outset +
+ 		+

Mostra un bordo che fa apparire il box in 3D, in rilievo. E' l'opposto di inset. Quando applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come collapsed, questo valore si comporta come ridge.

+
+
+
+ +

Sintassi Formale

+ +
{{csssyntax}}
+ +

Esempi

+ +

Tabella con tutti i valori della proprietà

+ +

Ecco un esempio con tutti i valori che la proprietà può assumere

+ +

HTML

+ +
<table>
+    <tr>
+        <td class="b1">none</td>
+        <td class="b2">hidden</td>
+        <td class="b3">dotted</td>
+        <td class="b4">dashed</td>
+    </tr>
+    <tr>
+        <td class="b5">solid</td>
+        <td class="b6">double</td>
+        <td class="b7">groove</td>
+        <td class="b8">ridge</td>
+    </tr>
+    <tr>
+        <td class="b9">inset</td>
+        <td class="b10">outset</td>
+    </tr>
+</table>
+ +

CSS

+ +
/* Definizione stile tabella */
+table {
+    border-width: 3px;
+    background-color: #52E396;
+}
+tr, td {
+    padding: 2px;
+}
+
+/* border-style classi di esempio */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}
+ +

Output

+ +

{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}

+ +

Specific​he

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}{{ Spec2('CSS3 Backgrounds') }}No change
{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}{{ Spec2('CSS2.1') }}Added hidden
{{ SpecName('CSS1', '#border-style', 'border-style') }}{{ Spec2('CSS1') }}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border-style")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/css/border/index.html b/files/it/web/css/border/index.html new file mode 100644 index 0000000000..2e903b8520 --- /dev/null +++ b/files/it/web/css/border/index.html @@ -0,0 +1,109 @@ +--- +title: border +slug: Web/CSS/border +translation_of: Web/CSS/border +--- +

 

+
+

Sommario

+
+ Edit section
+

La proprietà border è una abbreviazione per impostare in una sola volta i valori individuali di border. border può essere usata per impostare uno o più dei seguenti valori: border-width , border-style , border-color .

+ +
+
+

Sintassi

+
+ Edit section
+ 
border:  [ <border-width> || <border-style> || <border-color> ] | inherit
+
+
+
+

Valori

+
+ Edit section
+
+
+ border-width
+
+ Opzionale, se è assente viene usato il valore di default medium. Vedi border-width .
+
+ border-style 
+
+ Richiesto, se è assente viene usato il valore di default none. Vedi border-style .
+
+ border-color 
+
+ Opzionale, se è assente il valore di default è la proprietà color (colore di primo piano). Vedi border-color .
+
+
+
+

Esempi

+
+ Edit section
+

Guarda gli esempi dal vivo

+ 
element { border: dashed }          /* bordo tratteggiato di medio spessore, lo stesso colore del testo */
+element { border: dotted 1.5em }    /* bordo spesso 1.5em a punti, lo stesso colore del testo */
+element { border: solid red }       /* bordo rosso continuo di medio spessore */
+element { border: solid blue 10px } /* bordo continuo blu spesso 10px */
+
+
+
+

Note

+
+ Edit section
+

Mentre le proprietà border-width , border-style , e border-color accettano fino a quattro valori, questa proprietà accetta solo un valore per ciascuna.

+
+
+

Specifiche

+
+ Edit section
+ +
+
+

Compatibilità tra browser

+
+ Edit section
+ + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet Explorer4.0
Firefox1.0
Safari1.0
Opera3.5
+
+
+

Vedere anche

+
+ Edit section
+

border , border-width , border-style , border-color , margin , padding

+
+

 

diff --git a/files/it/web/css/cascade/index.html b/files/it/web/css/cascade/index.html new file mode 100644 index 0000000000..8ce2e4dafc --- /dev/null +++ b/files/it/web/css/cascade/index.html @@ -0,0 +1,149 @@ +--- +title: Cascade +slug: Web/CSS/Cascade +translation_of: Web/CSS/Cascade +--- +

{{ CSSRef() }}

+ +

The cascade is a fundamental feature of CSS. It is an algorithm defining how to combine properties values originating from different sources. It lies at the core of CSS as stressed by its name: Cascading Style Sheets.

+ +

What CSS entities participate in the cascade

+ +

Only CSS declarations, that is property/value pairs, participate in the cascade. That means that at-rules containing entities other than declarations, like  {{ cssxref("@font-face")}} containing descriptors don't participate in the cascade. In these case, only the at-rule as the whole participates in the cascade; here the @font-face identified by its font-family descriptor. If several @font-face with the same descriptor are defined, only the most adequate @font-face, as a whole, is considered.

+ +

If the declarations contained in most at-rules participate in the cascade, like declarations contained in {{cssxref("@media")}}, {{cssxref("@documents")}}, or {{cssxref("@supports")}}, declarations contained in {{cssxref("@keyframes")}} doesn't. Like for {{cssxref("@font-face")}}, only the at-rule as a whole is selected via the cascade algorithm.

+ +

Finally note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.

+ +

Origin of CSS declarations

+ +

The CSS cascade algorithm wants to select CSS declarations to set the correct value for CSS properties. CSS declarations originate from different origins:

+ + + +

Though style sheets come from these different origins, they overlap in scope: the cascade algorithm defines how they interact.

+ +

Cascading order

+ +

The cascading algorithm determines how to find the value to apply for each property for each document element.

+ +
    +
  1. It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.
    2. +
  2. Then it sorts these rules according to their importance, that is, whether or not they are followed by !important, and by their origin. The cascade is in ascending order, which means that !important values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
     OriginImportance
    1user agentnormal
    2user agent!important
    3usernormal
    4authornormal
    5CSS Animationssee below
    6author!important
    7user!important
    +
    3. +
  3. In case of equality, the specificity of a value is considered to choose one or the other.
    4. +
+ +

CSS animations and the cascade

+ +

CSS Animations, using {{ cssxref("@keyframes")}} at-rules defines animations between states. Keyframes don't cascade, meaning that at any time CSS takes values from one single @keyframes and never mixes several of them.

+ +

When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.

+ +

Also note that values within @keyframes at-rules overwrite all normal values but are overwritten by !important values.

+ +

Example

+ +

User-agent CSS:

+ +
li { margin-left: 10px }
+ +

Author CSS 1:

+ +
li { margin-left: 0 } /* This is a reset */
+ +

Author CSS 2:

+ +
@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+
+ +

User CSS:

+ +
.specific { margin-left: 1em }
+ +

HTML:

+ +
<ul>
+  <li class="specific">1<sup>st</sup></li>
+  <li>2<sup>nd</sup></li>
+</ul>
+
+ +

In this case, declarations inside li and .specific rules should apply. No declaration is marked as !important so the precedence order is author style sheets before user style sheets or user-agent stylesheet.

+ +

So three declarations are in competition:

+ +
margin-left: 0
+ +
margin-left: 3px
+ +
margin-left: 1px
+ +

The last one is ignored (on a screen), and the two first have the same selector, hence the same specificity: it is the last one that is then selected:

+ +
margin-left: 3px
+ +

Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.

+ +

See also

+ + diff --git a/files/it/web/css/color/index.html b/files/it/web/css/color/index.html new file mode 100644 index 0000000000..04a15799cc --- /dev/null +++ b/files/it/web/css/color/index.html @@ -0,0 +1,81 @@ +--- +title: color +slug: Web/CSS/color +translation_of: Web/CSS/color +--- +

 

+
+

Sommario

+
+ Edit section
+

La proprietà CSS color imposta il colore di primo piano del contenuto testuale di un elemento.

+ +
+
+

Sintassi

+
+ Edit section
+ 
color:  <color> | inherit
+
+
+

Valori

+
+ Edit section
+
+
+ <color>
+
+ La proprietà color accetta varie parole chiave e valori numerici. Vedi i valori di <color> per maggiori dettagli.
+
+
+
+

Esempi

+
+ Edit section
+

Tutti gli esempi seguenti rendono il testo rosso.

+ 
element { color: red }
+element { color: #f00 }
+element { color: #ff0000 }
+element { color: rgb(255,0,0) }
+element { color: rgb(100%, 0%, 0%) }
+element { color: hsl(0, 100%, 50%) }
+
+/* 50% translucent, support since Firefox 3 */
+element { color: rgba(255, 0, 0, 0.5) }
+element { color: hsla(0, 100%, 50%, 0.5) }
+
+
+

Specifiche

+
+ Edit section
+ +
+
+

Compatibilità tra browser

+
+
+ Edit section
+

La proprietà color è supportata molto bene da tutti i browser più comuni.
+ Una tabella di compatibilità tra browser è qui: <color> .

+
+
+

Vedere anche

+
+
+ Edit section
+ +
+

 

diff --git a/files/it/web/css/css_box_model/index.html b/files/it/web/css/css_box_model/index.html new file mode 100644 index 0000000000..65d01c1965 --- /dev/null +++ b/files/it/web/css/css_box_model/index.html @@ -0,0 +1,165 @@ +--- +title: CSS Box Model +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

CSS Box Model is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual formatting model.

+ +

Reference

+ +

Properties

+ +

Properties controlling the flow of content in a box

+ +
+ +
+ +

Properties controlling the size of a box

+ +
+ +
+ +

Properties controlling the margins of a box

+ +
+ +
+ +

Properties controlling the paddings of a box

+ +
+ +
+ +

Other properties

+ +
+ +
+ +

Guides

+ +
+
Introduction to the CSS box model
+
Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.
+
Mastering margin collapsing
+
Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.
+
Visual formatting model
+
Explains the visual formatting model.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..6aa8f3ae9e --- /dev/null +++ b/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,68 @@ +--- +title: Introduzione al box model in CSS +slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +tags: + - CSS + - CSS Box Model + - Guida +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +
Quando un browser presenta un documento HTML all'utente,  il motore del browser rappresenta ogni elemento del documento come un rettangolo, chiamato box, secondo lo standard del box model di CSS. Il codice CSS determina le dimensioni, la posizione e le proprietà (colore, background, spessore del bordo, ecc.) dei box.
+ +
 
+ +

Ogni box è composto da quattro parti (o aree), definite dai rispettivi limiti: il limite del contenuto, il limite del padding, il limite del bordo e il limite del margine.

+ +

CSS Box model

+ +

L'area del contenuto, circoscritta dal limite del contenuto, è dove si trova il contenuto vero e proprio dell'elemento, come testo, immagini o un video. Le sue dimensioni sono chiamate content width (o content-box width) e content height (o content-box height). Spesso ha un colore o una immagine di background.

+ +

Se la proprietà {{cssxref("box-sizing")}} è impostata su content-box ( valore di default), le dimensioni dell'area del contenuo si possono definire esplicitamente con le proprietà {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, e {{cssxref("max-height")}}.

+ +

L'area del padding, circoscritta dal limite del padding, estende l'area del contenuto per includere il padding dell'elemento. Le sue dimensioni sono chiamate padding-box width e padding-box height. Se l'area del contenuto ha un background, il background si estende all'area del padding.

+ +

lo spessore del padding è determinato tramite le proprietà {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, o usando la forma abbreviata {{cssxref("padding")}}.

+ +

L'area del bordo, circoscritta dal limite del bordo, estende l'area del padding per includere i bordi dell'elemento. Le sue dimensioni sono chiamate border-box width e border-box height.

+ +

Lo spessore dei bordi è determinato tramite la proprietà {{cssxref("border-width")}}, o usando la forma abbreviata {{cssxref("border")}}. Se la proprietà {{cssxref("box-sizing")}} è impostata su  border-box, le dimensioni dell'area del bordo possono essere definite esplicitamente usando le proprietà {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, e {{cssxref("max-height")}}.

+ +

L'area del margine, circoscritta dal limite del margine, estende l'area del bordo per includere uno spazio vuoto usato per separare l'elemento dagli elementi vicini. Le sue dimensioni sono chiamate margin-box width e margin-box height.

+ +

Le dimensioni dell'area del margine sono determinate tramite le proprietà {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}, o usando la forma abbreviata {{cssxref("margin")}}. Quando si verifica un caso di margini che collassano (margin collapsing), l'area del margine non è più chiaramente definita, perché i margini di due differenti box vengono condivisi.

+ +

Infine, si noti come negli elementi non-replaced (ossia elementi che hanno il contenuto inserito nell'HTML tra l'etichetta di apertura e chiusura dell'elemento, come <span>contenuto</span> anziché derivare il contenuto da una fonte esterna come src per le etichette <img>)  e con disposizione in linea (inline), la quantità di spazio che occupano (il loro contributo all'altezza della linea) è determinato dalla proprietà {{cssxref('line-height')}}, anche se i bordi e il padding sono comunque mostrati attorno al contenuto.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificheStatoCommenti
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Descrizione più precisa, ma nessun cambio a livello pratico.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definizione iniziale.
+ +

Vedi anche

+ + diff --git a/files/it/web/css/css_flexible_box_layout/index.html b/files/it/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..fadc582c86 --- /dev/null +++ b/files/it/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,118 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Boxes + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +

{{CSSRef}}

+ +

CSS Flexible is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

Guides

+ +
+
Using CSS flexible boxes
+
Step-by-step tutorial about how to build layouts using this feature.
+
Using flexbox to lay out Web applications
+
Tutorial explaining how to use flexbox in the specific context of Web applications.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("20.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}}
+ 11.0		12.106.1{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

 

diff --git a/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html new file mode 100644 index 0000000000..9acef6a218 --- /dev/null +++ b/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html @@ -0,0 +1,394 @@ +--- +title: Using CSS flexible boxes +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

Il CSS3 Flexible Box, o flexbox, è un layout mode che prevede la disposizione di elementi su una pagina in modo tale che questi si comportino prevedibilmente quando la pagina di layout cambia di risoluzione o quando si cambia schermo . Per molti utilizzi, il flexible box model fornisce un miglioramento rispetto al block model in quanto non utilizza i floats, né il collasso dei margini nel contenuto flex con margini del proprio contenuto.

+ +

Molti designers troveranno il flexbox model facile da usare. Gli elementi figli in flexbox possono essere disposti in qualsiasi direzione e possono avere dimensioni flessibili per adattarsi allo spazio dello schermo. Il posizionamento degli elementi figli è quindi molto più facile, e i layout complessi possono essere realizzati più semplicemente e con codice più pulito, anche l'ordine di visualizzazione degli elementi è indipendente dal loro ordine nel codice sorgente. Questa indipendenza colpisce solo la resa visiva, non stravolgendo l'ordine del codice.

+ +
Nota: Anche CSS Flexible Boxes Layout specification è in fase Last Call Working Draft stage (vedi anche Latest Editor draft), non tutti i borwser hanno implementato completamente le funzioni del Flexbox. Detto questo, vi è un buon supporto su tutta la linea per flexbox. Guarda la tabella delle compatibilità su ogni proprietà per aggiornarti sullo stato di compatibilità.
+ +

Caratteristiche del flexible boxes

+ +

L'aspetto caratterizzante del layout flex è la possibilità di modificare larghezza e/o altezza  riempiendo bene lo spazio creato dai vari schermi di dispositivi. Un contenitore flessibile estende gli elementi per riempire lo spazio disponibile, o restringe per evitare overflow.

+ +

L'algoritmo del flexbox layout è direction-agnostic rispetto al block layout, che è vertically-based, o all'inline layout, che è horizontally-based. Mentre il block layout funziona bene per le pagine, non è sufficientemente adatto per sostenere componenti applicativi che devono modificare l'orientamento, ridimensionamento, larghezza, o restringimento causati dai diversi user agent, cambi da orizzontale a verticale, e così via. Il layout flexbox è più appropriato per alcuni utilizzi, come layouts su piccola scala, mentre il Grid layout (in fase di svliluppo)  è destinato ai layout di scala più ampia. Entrambi fanno parte di uno sforzo più ampio del CSS Working Group per fornire una maggiore interoperabilità delle applicazioni web con diversi user agents, diverse modalità di scrittura, e altre richieste di flessibilità.

+ +

Vocabolario del flexible boxes

+ +

Mentre la discussione di flexible boxes è libera da termini come assi horizontal/inline e  assi vertical/block , richiede comunque una nuova terminologia propria per descrivere il modello. Si consideri il seguente schema al momento di rivedere gli elementi di vocabolario qui sotto. Essa mostra un contenitore flessibile che ha un flex-direction di row, il che significa che gli elementi flessibili susseguono orizzontalmente attraverso l'asse principale secondo la modalità di scrittura stabilita, la direzione in cui il testo dell'elemento scorre, in questo caso da sinistra a destra.

+ +

flex_terms.png

+ +
+
Flex container
+
L'elemento principale in cui gli elementi di flessione sono contenuti. Un contenitore flex viene definito utilizzando i valori di flex o inline-flex della proprietà {{Cssxref ("visualizzazione")}} .
+
Flex item
+
+

Ciascun figlio di un contenitore flessibile diventa un elemento flessibile. Del testo direttamente contenuto in un contenitore flessibile è avvolto in un elemento flex anonimo.

+
+
Axes
+
+

Ogni flexible box di layout flessibile segue due assi. L'asse principale è l'asse lungo il quale gli elementi flessibili susseguono. L'asse trasversale è l'asse perpendicolare all'asse principale.

+ +
    +
  • Il flex-direction proprietà che stabilisce l'asse principale.
    • +
  • Il justify-content proprietà definisce come gli elementi flessibili siano disposti lungo l'asse principale sulla riga corrente.
    • +
  • La align-items proprietà che definisce di default per come i flex items sono disposti lungo l'asse trasversale sulla riga corrente.
    • +
  • La align-self proprietà che definisce come un singolo elemento flessibile sia allineato sull'asse principale, è sostituisce il valore predefinito da align-items.
    • +
+
+
Directions
+
+

La main start/main end e cross start/cross end lati del contenitore flex descrivono l'origine e la fine del flusso degli elementi flessibili. Seguono l'asse principale e l'asse trasversale del contenitore flex nel vettore stabilito dalla writing-mode (da sinistra a destra, da destra a sinistra, ecc).

+ +
    +
  • La order proprietà che assegna elementi a gruppi ordinati e determina quali elementi appaiono per primi.
    • +
  • La flex-flow proprietà shorthands la flex-direction e flex-wrap proprietà per layout the flex items.
    • +
+
+
Lines
+
+

Gli elementi Flex possono essere disposti su una singola linea o più linee in base alla proprietà flex-wrap, che controlla la direzione dell'asse trasversale e la direzione in cui le nuove righe sono ravvicinate.

+
+
Dimensions
+
+

gli elementi di height e width sono main size e cross size, che seguono rispettivamente l'asse principale e l'asse trasversale del contenitore flex.

+ + +
+
+ +

Scegliere un flexible box

+ +

Per scegliere un CSS da usare per assegnare uno stile agli elementi, imposta la proprietà display e prova:

+ +
display : flex
+ +

o

+ +
display : inline-flex
+ +

In questo modo definisce gli elementi come un contenitore flessibile e i figli come elementi flessibili. Il valore flex rende il contenitore flex un block-level element. IL valore inline-flex rende il contenitore flex come inline-level element.

+ +
Nota: Per il prefix tag, aggiungerlo sulla proprietà di visualizzazione, non sul selettore display. Per esempio, display : -webkit-flex.
+ +

Considerazione elementi flessibili

+ +

Il testo contenuto all'interno di un contenitore flessibile fa parte automaticamente di un elemento flex anonimo . Tuttavia, un elemento flex anonimo che contiene solo spazi vuoti non è considerato, come se fosse display: none.

+ +

Figli posizionati in modo assoluto di un contenitore flex sono posizionati in modo che la loro posizione iniziale sia determinata in riferimento al principale start content-box del loro contenitore flessibile.

+ +

Attualmente, a causa di un problema noto, specificando visibility: collapse su un elemento flessibile, questo viene visto come display: none, invece si ha il comportamento previsto con visibility: hidden. La soluzione prevista, fino a quando il problema non verrà risolto, è quello di usare visibility:hidden per gli elementi flessibili che dovrebbero comportarsi come visibility:collapse. Per ulteriori informazioni, vedi {{bug(783470)}}.

+ +

I margini di elementi flessibili non collassano. Usando i margini auto assorbono spazio extra nella direzione verticale o orizzontale e può essere utilizzato per l'allineamento o per separare gli elementi flessibili adiacenti. Vedi Aligning with 'auto' margins nel W3C Flexible Box Layout Model specification per maggiori dettagli.

+ +

To ensure a reasonable default minimum size for flex items, use min-width:auto and/or min-height:auto. For flex items, the auto attribute value calculates the minimum width/height of the item to be no less than the width/height of its content, guaranteeing that the item is rendered large enough to hold the content. See {{cssxref("min-width")}} and {{cssxref("min-height")}} for more details.

+ +

Nella proprietà di allineamento del Flexbox basta "true" per centrare, a differenza degli altri metodi CSS. Ciò significa che gli elementi flessibili rimarranno centrati, anche nel caso di overflow nel contenuto flessibile. Questo a volte può essere un problema, tuttavia, se l'overflow oltre il bordo superiore, o oltre il bordo sinistro (in LTR languages like English; the problem occurs on the right edge in RTL languages like Arabic), dove non si può scorrere in quell'area, anche se lì ci sono contenuti! In una futura relase, la proprietà di allinneamento sarà estesa un'opzione "safe". Per ora, se questo è un problema, si possono invece utilizzare i margini per ottenere la centratura, as they'll respond in a "safe" way and stop centering if they overflow. Invece di utilizzare align- properties, basta inserire auto margins sugli elementi flessibili che si desidera centrare. Invece della  justify- properties, inserire auto margins sui bordi esterni del primo e ultimo elemento flessibile all'interno del container flessibile. L' auto margins "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. Però, se si sta cercando di sostituire justify-content con margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the justify-content property.

+ +

Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.

+ +

Flexible box properties

+ +

Proprietà non influenzate da flexible boxes

+ +

Perché il flexible boxes usa un diverso algoritmo di layout, alcune proprietà non sono sensate su un contenitore flessibile:

+ + + +

Esempi

+ +

Esempi base flex

+ +

Questo esempio di base mostra come applicare la "flessibilità" per un elemento e come gli elementi fratelli si comportano in uno stato flessibile.

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex > div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      width: 30px; /* To make the transition work nicely.  (Transitions to/from
+                      "width:auto" are buggy in Gecko and Webkit, at least.
+                      See http://bugzil.la/731886 for more info.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex > div:nth-child(1){ background : #009246; }
+   .flex > div:nth-child(2){ background : #F1F2F1; }
+   .flex > div:nth-child(3){ background : #CE2B37; }
+
+   .flex > div:hover
+   {
+        width: 200px;
+   }
+
+   </style>
+
+ </head>
+ <body>
+  <p>Flexbox nuovo</p>
+  <div class="flex">
+    <div>uno</div>
+    <div>due</div>
+    <div>tre</div>
+  </div>
+ </body>
+</html>
+ +

Holy Grail Layout example

+ +

Questo esempio dimostra come FlexBox fornisce la possibilità di modificare dinamicamente il layout per diverse risoluzioni dello schermo. Il seguente diagramma illustra la trasformazione.

+ +

HolyGrailLayout.png

+ +

Qui è illustrato il caso in cui il layout di pagina adatto ad una finestra del browser deve essere ottimizzato per una finestra di smartphone. Gli elementi non solo riducono le dimensioni, ma anche disposizione. Flexbox lo rende molto semplice.

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main > article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main > nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main > aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* Too narrow to support three columns */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-direction: column;
+   }
+
+   #main > article, #main > nav, #main > aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main > nav, #main > aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ </style>
+  </head>
+  <body>
+ <header>header</header>
+ <div id='main'>
+    <article>article</article>
+    <nav>nav</nav>
+    <aside>aside</aside>
+ </div>
+ <footer>footer</footer>
+  </body>
+</html>
+ +

Prova

+ +

Ci sono diversi siti per la sperimentazione del flexBox:

+ + + +

Cose da tenere a mente

+ +

The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.

+ +

Flexible boxes are laid out in conformance of the writing mode, which means that main start and main end are laid out according to the position of start and end.

+ +

cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

+ +

Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before, and break-inside as well as CSS 2.1 page-break-before, page-break-after, and page-break-inside properties are accepted on a flex container, flex items, and inside flex items.

+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (single-line flexbox){{CompatGeckoDesktop("18.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10[5]
+ 15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
Basic support (single-line flexbox){{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoMobile("22.0")}}		 +

1.0{{property_prefix("-moz")}}[2]
+ 1.1

+ 		2.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
+
+ +

[1] Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version.

+ +

[2] Up to Firefox 22, to activate flexbox support, the user has to change the about:config preference layout.css.flexbox.enabled to true. From Firefox 22 to Firefox 27, the preference is true by default, but the preference has been removed in Firefox 28.

+ +

[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 has been updated to support the final version.

+ +

[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.

+ +

[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.

+ +

See also

+ + diff --git a/files/it/web/css/css_positioning/index.html b/files/it/web/css/css_positioning/index.html new file mode 100644 index 0000000000..61afa2e242 --- /dev/null +++ b/files/it/web/css/css_positioning/index.html @@ -0,0 +1,63 @@ +--- +title: CSS Positioned Layout +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Positioning +--- +
{{CSSRef}}
+ +

CSS Positioned Layout is a module of CSS that defines how to position elements on the page.

+ +

Reference

+ +

CSS properties

+ +
+ +
+ +

Guides

+ +
+
Understanding CSS z-index
+
Presents the notion of stacking context and explains how z-ordering works, with several examples.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }} 
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }} 
diff --git a/files/it/web/css/css_positioning/understanding_z_index/index.html b/files/it/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..554652f1b8 --- /dev/null +++ b/files/it/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,51 @@ +--- +title: Understanding CSS z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index +tags: + - Advanced + - CSS + - Guide + - NeedsTranslation + - Reference + - TopicStub + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +
{{cssref}}
+ +

In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.

+ +
+

In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.

+
+ +

(from CSS 2.1 Section 9.9.1 - Layered presentation)

+ +

This means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS z-index property.

+ +

Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification CSS-2.1 Appendix E to explain these rules better.

+ +

This article will try to explain those rules, with some simplification and several examples.

+ +
    +
  1. Stacking without the z-index property: The stacking rules that apply when z-index is not used.
    2. +
  2. Stacking with floated blocks: How floating elements are handled with stacking.
    3. +
  3. Using z-index: How to use z-index to change default stacking.
    4. +
  4. The stacking context: Notes on the stacking context.
    5. +
  5. Stacking context example 1: 2-level HTML hierarchy, z-index on the last level
    6. +
  6. Stacking context example 2: 2-level HTML hierarchy, z-index on all levels
    7. +
  7. Stacking context example 3: 3-level HTML hierarchy, z-index on the second level
    8. +
+ +
+

Original Document Information

+ + + +

Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.

+
diff --git a/files/it/web/css/cursor/index.html b/files/it/web/css/cursor/index.html new file mode 100644 index 0000000000..5284daf295 --- /dev/null +++ b/files/it/web/css/cursor/index.html @@ -0,0 +1,388 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - CSS Property + - Layout + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}
+ +

Summary

+ +

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("cursor")}}
+
+ +

Values

+ +
+
<uri>
+
A url(…) or a comma separated list url(…), url(…), …, pointing to an image file. More than one {{cssxref("<uri>")}} may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one ore more of the other values) must be at the end of the fallback list. See Using URL values for the cursor property for more details.
+
<x> <y> {{ experimental_inline() }}
+
Optional x- and y-coordinates. Two unit-less non-negative numbers less than 32.
+
Keyword values
+
+

Move mouse over value for testing:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategoryCSS value Description
Generalauto The browser determines the cursor to display based on the current context.
+ E.g. equivalent to text when hovering text.
defaultdefault.gifDefault cursor, typically an arrow.
none No cursor is rendered.
Links & statuscontext-menucontext-menu.pngA context menu is available under the cursor.
+ Only IE 10 and up have implemented this on Windows: {{ Bug("258960") }}.
helphelp.gifIndicating help is available.
pointerpointer.gifE.g. used when hovering over links, typically a hand.
progressprogress.gifThe program is busy in the background but the user can still interact with the interface (unlike for wait).
waitwait.gifThe program is busy (sometimes an hourglass or a watch).
Selectioncellcell.gifIndicating that cells can be selected.
crosshaircrosshair.gifCross cursor, often used to indicate selection in a bitmap.
texttext.gifIndicating text can be selected, typically an I-beam.
vertical-textvertical-text.gifIndicating that vertical text can be selected, typically a sideways I-beam.
Drag and dropaliasalias.gifIndicating an alias or shortcut is to be created.
copycopy.gifIndicating that something can be copied.
movemove.gifThe hovered object may be moved.
no-dropno-drop.gifCursor showing that a drop is not allowed at the current location.
+ {{ bug("275173") }} on Windows, "no-drop is the same as not-allowed".
not-allowednot-allowed.gifCursor showing that something cannot be done.
Resize & scrollingall-scrollall-scroll.gifCursor showing that something can be scrolled in any direction (panned).
+ {{ bug("275174") }} on Windows, "all-scroll is the same as move".
col-resizecol-resize.gifThe item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.
row-resizerow-resize.gifThe item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
n-resizeExample of a resize towards the top cursorSome edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gifIndicates a bidirectional resize cursor.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
Zoomzoom-inzoom-in.gif +

Indicates that something can be zoomed (magnified) in or out.

+
zoom-outzoom-out.gif
Grabgrabgrab.gif +

Indicates that something can be grabbed (dragged to be moved).

+
grabbinggrabbing.gif
+
+
+ +

Examples

+ +
.foo { cursor: crosshair; }
+
+/* use prefixed-value if "zoom-in" isn't supported */
+.bar { cursor: -webkit-zoom-in;  cursor: zoom-in; }
+
+/* standard cursor value as fallback for url() must be provided (doesn't work without) */
+.baz { cursor: url(hyper.cur), auto }
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 UI', '#cursor', 'cursor') }}{{ Spec2('CSS3 Basic UI') }}Addition of several keywords and the positioning syntax for url().
{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

Browser compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChrome (WebKit)Firefox (Gecko)Internet ExplorerOperaSafari
auto, crosshair, default, move, text, wait, help,
+ n-resize, e-resize, s-resize, w-resize,
+ ne-resize, nw-resize, se-resize, sw-resize		1.01.0 (1.0)4.07.01.2
pointer, progress1.01.0 (1.0 | 1.7)6.07.x1.2 | 3.0
url() - See Using URL values1.0 (523)1.5 (1.8);
+ OS X: 4.0 (2.0)		6.0{{ CompatUnknown }}3.0
Positioning syntax for url() values {{ experimental_inline() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatNo }}{{ CompatUnknown }}{{ CompatVersionUnknown() }}
not-allowed, no-drop, vertical-text, all-scroll,
+ col-resize, row-resize		1.0 (522)1.5 (1.8)6.010.63.0
alias, cell, copy,
+ ew-resize, ns-resize, nesw-resize, nwse-resize		1.0 (522)1.5 (1.8)10.010.63.0
context-menuOS X, Linux: 1.0 (522)OS X, Linux: 1.5 (1.8)10.010.63.0
none5.0 (533)3.0 (1.9)9.0{{ CompatUnknown }}5.0
inherit1.01.08.09.01.2
zoom-in, zoom-out1.0 (522) {{ property_prefix("-webkit-") }}1.0 (1.4) {{ property_prefix("-moz-") }}
+ 24.0		{{ CompatNo }}11.63.0 {{ property_prefix("-webkit-") }}
grab, grabbing1.0; Windows: 22.0 {{ property_prefix("-webkit-") }}1.5 (1.8) {{ property_prefix("-moz-") }}
+ 27.0		{{ CompatNo }}{{ CompatUnknown }}4.0 {{ property_prefix("-webkit-") }}
+ +

See also

+ + diff --git "a/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" "b/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" new file mode 100644 index 0000000000..772fa80e13 --- /dev/null +++ "b/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" @@ -0,0 +1,40 @@ +--- +title: Usare valori URL per la proprietà cursor +slug: Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor +tags: + - CSS + - CSS_2.1 + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +

 

+

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) supportano l'uso di valori URL per la proprietà cursor CSS2. che permette di specificare immagini arbitrarie da usare come puntatori del mouse..

+

Sintassi

+

La sintassi per questa proprietà è:

+
cursor: [<url>,]* keyword;
+
+

Queso significa che zero o più URL possono essere specificati (separati da virgola), seguiti necessariamente da una delle keyword definite nella specifica CSS, come auto o pointer.

+

Ad esempio, la scrittura seguente è corretta:

+
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+
+

Si cercherà anzitutto di caricare foo.cur. Se il file non esiste oppure non è valido per altre rafgioni, si prova con bar.gif, e se anche questa non può essere usata, la scelta cadrà su auto.

+

il supporto della sintassi CSS3 per i valori cursor è stata aggiunta in Gecko 1.8beta3; funziona perciò in Firefox 1.5. Permette di specificare le coordinate dell'hotspot del puntatore, che verrà spostato dai bordi dell'immagine del puntatore. Se nono sono specificate, le coordinate dell'hotspot vengono lette dal file stesso (nel caso di CUR o XBM) o vengono definite come l'angolo in alto a sinistra dell'immagine. Un esempio della sintassi CSS3 è:

+
cursor: url(foo.png) 4 12, auto;
+
+

Il primo numero è l'ascissa (X), il secondo la ordinata (Y). L'esempio definirà l'hotspot come il pixel (4,12) a partire dall'alto a sinistra (0,0).

+

Limitazioni

+

Sono usabili tutti i formati immagine supportati da Gecko. Questo significa che possono essere usate immagini BMP, JPG, CUR, GIF, eccetera. In ogni caso, ANI non è supportato. Ed anche se viene secificata una GIF animata, il puntatore non diventerà animato. Questa limitazione verrà rimossa nelle prossime release.

+


+ Gecko non pone limiti alle dimensioni dei cursori. In ogni caso, ci si deve limitare ad una grandezza di 32x32 per la massima compatibilià con sistemi operativi e piattaforme. In particolare, puntatori più grandi di tale dimensioni non funzioneranno su Windows 9x (95,98, ME).

+

Non è supportata la translucenza per i puntatori su versioni di Windows precedenti ad XP. QUesta è una limitazione del sistema operativo. La trasparenza funziona su tutte le piattaforme.

+

Solo le versioni per Windows, OS/2 e Linux (con l'uso di GTK+ 2.4 o maggiore) di Mozilla supportano i valori URL per i puntatori. Il supporto per altre piattaforme potrà essere aggiunto in versioni future (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})

+

Compatibilità con altri browsers

+

Anche Microsoft Internet Explorer supporta valori URI per la proprietà cursor. In ogni caso sono supportati solo i formati ANI e CUR.

+

La sintassi per la proprietà cursor è inoltre meno restrittiva. Questo significa che sia la scrittura:

+
cursor: url(foo.cur);
+
+

che:

+
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+

funzioneranno in MSIE, ma non nei browser Gecko. Per mantenere la compatibilità con Gecko e in accordo con le specifiche CSS, inserire sempre per prima la lista degli URI ed usare esattamente un valore keyword al termine.

diff --git a/files/it/web/css/flex-shrink/index.html b/files/it/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..81cc7cfd51 --- /dev/null +++ b/files/it/web/css/flex-shrink/index.html @@ -0,0 +1,120 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +tags: + - CSS + - CSS Flex + - Proprietà CSS +translation_of: Web/CSS/flex-shrink +--- +
{{CSSRef}}
+ +
 
+ +

La proprietà CSS flex-shrink setta il fattore di restringimento di un elemento flessibile. Se la dimensione di tutti gli elementi flessibili è maggiore del loro contenitore flessibile: gli elementi si restringono per adattarsi secondo il valore impostato di flex-shrink.

+ +
{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}
+ + + +

Sintassi

+ +
/* <number> valori */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Valori globali */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+
+ +

La proprietà flex-shrink è specificata come un singolo <number>.

+ +

Valori

+ +
+
<number>
+
Guarda {{cssxref("<number>")}}. Non sono ammessi valori negativi.
+
+ +

Sintassi formale

+ +
{{csssyntax}}
+ +

Esempio

+ +

HTML

+ +
+
<p>La larghezza del contenuto è di 500 px; la base flessibile degli articoli flessibili è 120 px.</p>
+<p>A, B, C hanno il valore flex-shrink:1 invece D ed E hanno flex-shrink:2 </p>
+<p>La larghezza di D ed E è minore delle altre.</p>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+</div>
+
+ +

CSS

+ +
#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+
+
+ +

Result

+ +

{{EmbedLiveSample('Example', 500, 300)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}{{Spec2('CSS3 Flexbox')}}Definizione iniziale
+ +

{{cssinfo}}

+ +

Compatibilità dei browser

+ + + +

{{Compat("css.properties.flex-shrink")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/css/flex/index.html b/files/it/web/css/flex/index.html new file mode 100644 index 0000000000..a59a226f90 --- /dev/null +++ b/files/it/web/css/flex/index.html @@ -0,0 +1,200 @@ +--- +title: flex +slug: Web/CSS/flex +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

Sommario

+ +

La proprietà flex di CSS è una proprietà shorthand usata per modificare le dimensioni di un elemento flessibile e riempire gli spazi. Gli elementi flex possono essere usati per distribuire lo spazio in modo proporzionale, al loro allargarsi o al loro restringersi, per evitare sovrapposizioni o eccedenze.

+ +

{{cssinfo}}

+ +

Vedi L'Uso di flexible boxes per altre proprietà e informazioni.

+ +

Sintassi

+ +
/* 0 0 auto */
+flex: none;
+
+/* Un valore, numero senza unità: flex-grow */
+flex: 2;
+
+/* Un valore, width/height: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: auto;
+flex: content;
+
+/* Due valori: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Due valori: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* Tre valori: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Valori globali */
+flex: inherit;
+flex: initial;
+flex: unset;
+
+ +

Valori

+ +
+
<'flex-grow'>
+
Il valore flex-grow appartiene all'elemento flex. Vedi {{cssxref("<number>")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.
+
<'flex-shrink'>
+
Il valore flex-shrink appartiene all'elemento flex. Vedi {{cssxref("<number>")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.
+
<'flex-basis'>
+
Il valore flex-basis appartiene all'elemento flex. Qualsiasi valore valido per width e heigth è accettato. La dimensione con valore 0 deve avere un'unità, per evitare di essere interpretata come un valore di flessibilità. Quando non si inseriscono valori, quello predefinito è 0%.
+
none
+
Questo valore viene interpretato come: 0 0 auto.
+
+

Sintassi formale

+
+
+ +
{{csssyntax}}
+ +

Example

+ +
#flex-container {
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+}
+
+#flex-container > .flex-item {
+	-webkit-flex: auto;
+	flex: auto;
+}
+
+#flex-container > .raw-item {
+	width: 5rem;
+}
+
+ +
<div id="flex-container">
+    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
+    <div class="raw-item" id="raw">Raw box</div>
+</div>
+
+ + + +

Risultato

+ +

{{EmbedLiveSample('Example','100%','60')}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#flex', 'flex')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("18.0")}} (behind a pref) [1] [2]
+ {{CompatGeckoDesktop("20.0")}} [2][3]		21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}} [3][4]
+ 11.0 [3][4]		12.106.1{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

[1] Per attivare il supporto FlexBox per Firefox 18 e 19, l'utente deve cambiare la about: config preferenza "layout.css.flexbox.enabled" true.

+ +

[2] Multi-line flexbox sono supportate da Firefox 28.

+ +

[3] Internet Explorer 10-11 (ma non 12+) ignora l'uso di calc()nella flex-basis parte della sintassi di flex. Questo può essere aggirato con semplici proprietà. Vedi Flexbug #8 per maggiori informazioni.

+ +

[4] In Internet Explorer 10-11 (ma non 12+), una dichiarazione flessibile con un valore senza unità nella sua parte flex-base è considerato sintatticamente valido e sarà quindi ignorata. Una soluzione è quella di includere sempre una unità nella parte flex-base del valore di shorthand di flex. Vedi Flexbug #4 per ulteriori informazioni.

+ +

Guarda altro

+ + diff --git a/files/it/web/css/font-size-adjust/index.html b/files/it/web/css/font-size-adjust/index.html new file mode 100644 index 0000000000..8933c16794 --- /dev/null +++ b/files/it/web/css/font-size-adjust/index.html @@ -0,0 +1,114 @@ +--- +title: font-size-adjust +slug: Web/CSS/font-size-adjust +translation_of: Web/CSS/font-size-adjust +--- +

il font-size-adjust nelle proprieta CSS, dice come  dovrebbe essere impostatala dimensione del font  scelto, in base all' altezza dei caratteri minuscoli piuttosto che le lettere maiuscole.

+ +
/* usa uno specifico font size */
+font-size-adjust: none;
+
+/* usa un dimensione font che dimezza le lettere
+minuscole rispetto al font in uso*/
+font-size-adjust: 0.5;
+
+/* Valori globali */
+font-size-adjust: inherit;
+font-size-adjust: initial;
+font-size-adjust: unset;
+
+ +

La proprieta è utilissima per la leggibilita dei fonts, specialmente alle piccole dimensioni, che è determinata piu dalla dimensione dei caratteri minuscoli che quelli maiuscoli. La leggibilita puo diventare un problema  quando la prima scelta {{ Cssxref("font-family") }} non è disponibile e la sua sostituzione porta una significativa differenza nell' aspetto in rapportato (tra la dimensione caratteri minuscoli e la dimensione del font).

+ +

Per usare questa proprieta in modo che sia comparibile con i browsers che non supportano il font-size-adjust, questa viene definita come un numero che  sarà moltiplicato per  la proprieta {{ Cssxref("font-size") }}. Questo significa che il valore specificato per la proprieta, deve essere normalmente il rapporto dell' aspetto del primo font scelto. Per esempio  un foglio di stile  che specifica :

+ +
font-size: 14px;
+font-size-adjust: 0.5;
+
+ +

...sta specificando che le lettere minuscole del font dovrebbero essere alte 7 pixel (0.5 × 14px).

+ +

{{cssinfo}}

+ +

Sintassi

+ +

Valori

+ +
+
none
+
Sceglie  la dimensione del font in base solo alla proprieta {{ Cssxref("font-size") }}.
+
{{cssxref("<numero>")}}
+
+

Sceglie la dimensione del font in modo che il minuscolo ( come determinato dalla  x-height del font ) sia  un  numero  di volte il {{ Cssxref("font-size") }}.

+ +

Il numero specificato dovrebbe normalmente avere il rapporto di aspetto (rapporto di x-height con il font size) della prima scelta nel {{ Cssxref("font-family") }}. Questo vuol dire che il primo font scelto, quando disponibile, apparira della stessa dimensione nei browsers se supportano o no il font-size-adjust.

+ +

0 genera un testo di altezza zero (testo nascosto).

+
+
+ +

Sintassi Formale

+ +
{{csssyntax}}
+ +

Esempi

+ +

HTML

+ +
<p class="times">Questo testo usa il font Times(10px), che è difficile da leggere nelle piccole dimensioni.</p>
+<p class="verdana">Questo testo usa il font Verdana(10px), che a delle lettere minuscole relativamente grandi.</p>
+<p class="adjtimes">Questo è il Times 10px, ma adesso corretto allo stesso rapporto di aspetto del Verdana.</p>
+ +

CSS

+ +
.times {
+  font-family: Times, serif;
+  font-size: 10px;
+}
+
+.verdana {
+  font-family: Verdana, sans-serif;
+  font-size: 10px;
+}
+
+.adjtimes {
+  font-family: Times, sans-serif;
+  font-size-adjust: 0.58;
+  font-size: 10px;
+}
+
+ +

Risultati

+ +

{{ EmbedLiveSample('Examples', 500, 200) }}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }}{{ Spec2('CSS3 Fonts') }}Initial definition
+ +
+

The CSS property font-size-adjust was initially defined in CSS 2, but dropped in CSS 2.1. It has been newly defined in CSS 3.

+
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.font-size-adjust")}}

+ +
{{CSSRef}}
diff --git a/files/it/web/css/guida_di_riferimento_ai_css/index.html b/files/it/web/css/guida_di_riferimento_ai_css/index.html new file mode 100644 index 0000000000..c97a962ac6 --- /dev/null +++ b/files/it/web/css/guida_di_riferimento_ai_css/index.html @@ -0,0 +1,96 @@ +--- +title: Guida di riferimento ai CSS +slug: Web/CSS/Guida_di_riferimento_ai_CSS +tags: + - CSS + - Overview + - Reference + - 'l10n:priority' +translation_of: Web/CSS/Reference +--- +
{{CSSRef}}
+ +

Usate questo riferimento CSS per consultare un indice alfabetico di tutte le proprietà CSS standard, le pseudo-classi, pseudo-elementi, i tipi di dati, e le at-rules. Potete anche visualizzare i concetti chiave del CSS e una lista dei selettori organizzati per tipo. È anche inclusa un breve prontuario su DOM-CSS / CSSOM.

+ +

Sintassi di regola base

+ +

Sintassi di una regola di stile

+ +
regola-stile ::=
+    lista-selettori {
+      lista-proprietà
+    }
+
+ +

... dove :

+ +
lista-selettori ::=
+    selettore[:pseudo-classe] [::pseudo-elemento]
+    [, lista-selettori]
+
+lista-proprietà ::=
+    [proprietà : valore] [; lista-proprietà]
+
+ +

Consultate la lista dei selettori, pseudo-classi, e pseudo-elementi sotto. La sintassi per ogni valore specificato dipende dal tipo di dato definito per ogni proprietà specificata.

+ +

Esempi di regole di stile

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Per un'introduzione a livello principiante della sintassi dei selettori, consultate la nostra guida ai Selettori CSS. Siate consapevoli che ogni errore di sintassi in una definizione di regola invalida l'intera regola. Le regole invalidate vengono ignorate dal browser. Prendete nota ceh la definizione di una regola CSS è interamente basata su stringhe di testo (ASCII), dove DOM-CSS / CSSOM (il sistema di gestione delle regole) è basato su oggetti.

+ +

Sintassi at-rules

+ +

Poiché la struttura delle At-rules varia ampiamente, per piacere consultate At-rule per trovare la sintassi della regola specifica che volete.

+ +

Selettori

+ + + +

Concetti

+ + + +

Estensioni di Mozilla

+ + + +

{{ languages( { "de": "de/CSS_Referenz", "es": "es/Referencia_CSS", "fr": "fr/CSS/R\u00e9f\u00e9rence_CSS", "it": "it/Guida_di_riferimento_ai_CSS", "ja": "ja/CSS_Reference", "ko": "ko/CSS_Reference", "pl": "pl/Dokumentacja_CSS", "zh-cn": "cn/CSS_\u53c2\u8003" } ) }}

diff --git a/files/it/web/css/index.html b/files/it/web/css/index.html new file mode 100644 index 0000000000..4a4f4efb55 --- /dev/null +++ b/files/it/web/css/index.html @@ -0,0 +1,107 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Stile +translation_of: Web/CSS +--- +

Il Cascading Style Sheets (CSS) è un linguaggio per fogli di stile utilizzato per descrivere la presentazione di un documento scritto in HTML o XML (inclusi vari linguaggi XML quali SVG o XHTML). Il CSS descrive come gli elementi dovrebbero apparire su schermo, su carta, nel parlato o in altri media.

+ +

Il CSS è uno dei linguaggi fondamentali dell'open Web ed è standardizzato nei browser web secondo la specifica W3C. Sviluppato a livelli, il CSS1 è ora obsoleto, il CSS2.1 è raccomandato, e CSS3, ora diviso in moduli più piccoli, sta progredendo sulla via della standardizzazione.

+ +
+ +
+ +
+
+

Documentazione ed esercitazioni su CSS

+ +
+
Concetti chiave del CSS
+
Descrive la sintassi del linguaggio e introduce a elementi fondamentali quali specificità ed ereditarietà, il modello a box ed il collasso dei margini, impilamento e contesti di formattazione dei blocchi, o i valori iniziali, calcolati, utilizzati ed attuali. Sono anche definite entità quali le proprietà scorciatoia di CSS.
+
Scrivere CSS efficienti
+
Spiega come i motori dei fogli di stile realizzano il riscontro dei selettori e descrive le regole per la scrittura di CSS più efficienti.
+
Utilizzare le trasformazioni di CSS
+
Illustra le operazioni 2D che possono essere applicate a ogni elemento al fine di ruotarlo, inclinarlo o traslarlo.
+
Utilizzare le transizioni di CSS
+
Spiega come cambiare l'aspetto di un elemento utilizzado un'animazione graduale tra lo stato iniziale e il finale.
+
Utilizzare le animazioni di CSS
+
Descrive come definire le animazioni di un elemento ma anche come rilevare con Javascript se il browser le supporta.
+
Utilizzare i gradienti di CSS
+
Spiega come definire i gradienti, immagini composte di graduali variazioni dei colori.
+
Utilizzare l'impaginazione multicolonna di CSS
+
Illustra come effettuare l'impostazione di pagine a colonne multiple utilizzando l'impaginazione multicolonna di CSS Livello 3.
+
Utilizzare sfondi multipli di CSS
+
Descrive come definire parecchi sfondi sullo stesso elemento.
+
Scalare immagini di sfondo
+
Mostra come controllare il comportamento delle immagini di sfondo quando queste non riscontrano esattamente la dimensione del loro contenitore.
+
Utilizzare l'interrogazione del media di CSS
+
Presenta come selezionare i fogli di stile in base a dettagli del dispositivo di visualizzazione, come la dimensione dell'area disponibile, la sua risoluzione o se ha un touchscreen.
+
Utilizzare i contatori di CSS
+
Spiega come utilizzare numerazione e contatori automatici, essenzialmente utilizzati come contatori d'elenco.
+
Font e Tipografia
+
Informa sulla gestione dei propri font utilizzando {{ cssxref("@font-face") }} e il formato font WOFF.
+
Utilizzare i box flessibili di CSS
+
Descrive come utilizzare i box felssibili per la progettazione dell'impaginazione.
+
Il Rientro Coerente degli Elenchi
+
Cercare di cambiare il rientro delle liste con i CSS è più complicato di quanto sembri, ma solo perchè i browser conformi a CSS hanno intrapreso strade diverse sul rientro predefinito. Scopri come metterli tutti in riga.
+
+
Utilizzare le informazioni di stile dinamiche
+
Come ottenere informazioni sullo stile e manipolarlo via DOM.
+
+ +

Vedi Tutto...

+
+ +
+

Ottentere aiuto dalla comunità

+ +

Hai bisogno di aiuto su problemi relativi a CSS e non trovi la soluzione nella documentazione?

+ +
    +
  • Controlla le domande comuni su CSS che danno suggerimenti per risolvere i problemi comuni.
    • +
  • Vai su Stack Overflow, un sito collaborativo di Q&A in cui cercare risposte alla tue domande o, se non ne trovi, porre lì le tue domande.
    • +
  • Consulta il forum layout, che tratta CSS e HTML: + +
    • +
+ +

Non dimenticare la netiquette...

+ +

Strumenti che semplificano lo sviluppo in CSS

+ +
    +
  • Il Servizio di Validazione di CSS del W3C controlla se un dato CSS è valido. E' un'inestimabile strumento di debug.
    • +
  • L'estensione Firebug di FireFox, una popolare estensione che permette di modificare il CSS in uso sul sito che si sta visualizzando. Molto pratica per testare i cambiamenti, sebbene questa estensione faccia molto di più.
    • +
  • L'estensione Web Developer di FireFox permette anche di vedere e editare il CSS in uso sul sito visualizzato. Più semplice di Firebug, sebbene meno potente.
    • +
  • L'estensione EditCSS di FireFox permette di editare il CSS nella barra laterale.
    • +
+ +

Vedi Tutto...

+ + + + +
+
diff --git a/files/it/web/css/media_queries/index.html b/files/it/web/css/media_queries/index.html new file mode 100644 index 0000000000..aaa9a6ac17 --- /dev/null +++ b/files/it/web/css/media_queries/index.html @@ -0,0 +1,136 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +tags: + - CSS + - CSS3 Media Query + - Disegno Responsivo + - media query +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef("CSS3 Media Queries")}}
+ +

Le Media Queries sono un componente essenziale del disegno responsivo, che rende possibile adattare il codice CSS a differenti parametri e caratteristiche dei dispositivi con cui viene visualizzato un sito. Per esempio, una media query può applicare uno stile differente al sito se lo schermo del dispositivo è di dimensioni inferiori a un certo limite, o a seconda che l'utente stia usando il dispositivo in modalità portrait (visualizzazione verticale) o landscape (visualizzazione orizzontale).  La direttiva {{cssxref("@media")}} è usata per applicare stili condizionali a un documento.

+ +

Inoltre, la sintassi delle media queries è usata anche in altri contesti, come nell'attributo {{htmlattrxref("media", "source")}} di un elemento {{HTMLElement("source")}} , con il quale si può specificare quale sorgente usare per un elemento {{HTMLElement("picture")}}.

+ +

Esiste inoltre il metodo {{domxref("Window.matchMedia()")}} che si può usare per testare il rapporto tra lo schermo corrente e una media query. Puoi anche usare {{domxref("MediaQueryList.addListener()")}} per ricevere una notifica ogni volta che lo stato delle queries cambia. Con quesa funzionalità, il tuo sito o la tua applicazione possono rispondere a cambi nella configurazione, nell'orientamento o nello stato del dispositivo.

+ +

Puoi saperne di più su come usare le media queries programmaticamente nell'articolo Testing media queries.

+ +

Referenze

+ +

Direttive

+ +
+ +
+ +

Guide

+ +
+
Come usare le media queries
+
Introduzione alle media queries, alla loro sintassi, agli operatori e alle funzionalità usate per costruire espressioni di media query.
+
Come testare le media queries
+
Come testare le media queries dal tuo codice JavaScript, programmaticamente, per determinare lo stato del dispositivo, e implementare listeners che comunichino al tuo codice un cambio nei risultati delle media queries, come per esempio quando l'utente ruota lo schermo, causando un cambio di orientamento.
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommenti
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Definizione iniziale
+ +

Compatibilità browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
BrowserChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto basico1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.7)}}9.09.21.3
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
BrowserAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
+ + + + + + + +
Supporto basico 
+ 		1.0{{CompatVersionUnknown}}{{CompatGeckoMobile(1.7)}}9.09.03.1
+
diff --git a/files/it/web/css/min-width/index.html b/files/it/web/css/min-width/index.html new file mode 100644 index 0000000000..881d345344 --- /dev/null +++ b/files/it/web/css/min-width/index.html @@ -0,0 +1,258 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - CSS + - Proprietà CSS + - Riferimento +translation_of: Web/CSS/min-width +--- +
{{CSSRef}}
+ +

La proprietà CSS min-width imposta la larghezza minima di un elemento.  Questo evita che lo used value della proprietà {{ Cssxref("width") }} diventi più piccolo del valore specificato per min-width.

+ +
/* <length> value */
+min-width: 3.5em;
+
+/* <percentage> value */
+min-width: 10%;
+
+/* Keyword values */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content;
+min-width: fill-available;
+
+/* Global values */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+
+ +

La larghezza dell'elemento viene impostata al valore di min-width ogni volta che min-width risulta essere maggiore di {{ Cssxref("max-width") }} or {{Cssxref("width")}}.

+ +

{{cssinfo}}

+ +

Sintassi

+ +

Valori

+ +
+
{{cssxref("<length>")}}
+
La larghezza minima espressa come {{cssxref("<length>")}}. Valori negativi rendono la dichiarazione non valida.
+
 
+
{{cssxref("<percentage>")}}
+
La larghezza minima espressa come {{cssxref("<percentage>")}} della larghezza del contenitore. Valori negativi rendono la dichiarazione non valida.
+
+ +

Parole chiave

+ +
+
auto
+
La larghezza di default per oggetti di tipo flex, assegna un valore di default più ragionevole di 0 per gli altri layout.
+
max-content {{ experimental_inline() }}
+
La larghezza massima preferita (intrinsic).
+
min-content {{ experimental_inline() }}
+
La larghezza minima preferita (intrinsic).
+
fill-available{{ experimental_inline() }}
+
La larghezza del blocco contenitore sottratto de: il margine orizzontale, il bordo ed il padding. (Alcuni browsers usano un nome diverso per questa parola chiave, available.)
+
fit-content {{ experimental_inline() }}
+
Definito come min(max-content, max(min-content, fill-available)).
+
+ +

Sintassi formale

+ +
{{csssyntax}}
+ +

Esempi

+ +
table { min-width: 75%; }
+
+form { min-width: 0; }
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }}{{ Spec2('CSS3 Sizing') }}Vengono aggiunte le parole chiave max-content, min-content, fit-content e fill-available. (I draft Box CSS3 e CSS3 Writing Modes definiscono queste keyword, ma vengono sostituiti da questa specifica.)
{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}{{ Spec2('CSS3 Flexbox') }}Viene aggiunta la keyword auto e viene utilizzata come valore iniziale.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}{{ Spec2('CSS3 Transitions') }}Definisce min-width come animabile.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}{{ Spec2('CSS2.1') }}Definizione iniziale.
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}1.0 (1.0)7.04.02.0.2 (416), buggy before
si applica a <table> [1]{{ CompatNo() }}{{CompatNo}}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
max-content, min-content, fit-content, efill-available {{ experimental_inline() }}24.0 {{property_prefix("-webkit")}} [3]{{CompatNo}}{{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }} [2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }} [3]
auto21.0 [4]{{CompatUnknown}}{{ CompatGeckoDesktop("16.0") }} [4]
+ Removed in {{ CompatGeckoDesktop("22.0") }}
+ Reintroduced in {{CompatGeckoDesktop("34.0")}} with the new behavior defined by the spec.		{{ CompatNo() }}12.10 [6]{{ CompatNo() }}
auto as initial value{{obsolete_inline()}}21.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("18.0") }}
+ Removed in {{ CompatGeckoDesktop("22.0") }}		{{ CompatNo() }}12.10{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}[5]
applies to <table>[1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
max-content, min-content, fit-content, e fill-available {{ experimental_inline() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
auto{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
auto come valore iniziale {{obsolete_inline()}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] CSS 2.1 descrive esplicitamente il comportamento di min-width con {{ HTMLElement("table") }} come indefinito. Quindi qualsiasi tipo di comportamento rispetta CSS2.1; le nuove specifiche CSS potrebbero definire questo comportamento, per cui al momento gli sviluppatori Web non dovrebbero fare affidamento su una specifica implementazione.

+ +

[2] Gecko implementa in via sperimentale le definizioni date in CSS3 Basic Box. Questa definisce la keyword available ma non fill-available. Inoltre la definizione di fit-content è più lasca di quella data da CSS3 Intrinsic.

+ +

[3] WebKit implementa una proposta precedente, la parola chiave intrinsic.

+ +

[4] Queste implementazioni realizzavano un comportamento leggermente più semplice per questa parola chiave: veniva impostata a min-content per gli oggetti di tipo flex, e 0 per qualsiasi altro elemento.

+ +

[5] In alcuni browsers in iOS, un elemento di tipo <button> nella sua configurazione nativa (default) non reagirà all'impostazione del valore min-width. Questo problema dipende dai pulsanti di tipo nativo. Uno <span> collocato dentro ad un pulsante nativo, mostrerà lo stesso problerma, nonostante venga impostato "display:inline-block". Quando altri parametri di stile vengono impostati ed il browser è costretto ad abbandonare il pulsante nativo, l'impostazione di min-width ha effetto.  

+ +

See also

+ + diff --git a/files/it/web/css/mozilla_extensions/index.html b/files/it/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..f2dca7f728 --- /dev/null +++ b/files/it/web/css/mozilla_extensions/index.html @@ -0,0 +1,336 @@ +--- +title: Mozilla Extensions +slug: Web/CSS/Mozilla_Extensions +tags: + - CSS + - CSS Reference + - 'CSS:Mozilla Extensions' + - NeedsContent + - NeedsTechnicalReview + - Tutte_le_categorie +translation_of: Web/CSS/Mozilla_Extensions +--- +

 

+
+

Traduzione a tempo perso ! Non essendo presente la traduzione mi dedicherò a tempo perso in questo progetto, quindi se mancano molte traduzioni non fatemene una colpa.

+ Zibibbo84 10:30, 11 ott 2007 (PDT) ;)
+

Mozilla supporta alcune estensioni del CSS le quali hanno il prefisso '-moz'. Queste consentono di modificare alcune proprietà delle pagine web in modo non tradizionale, per facilitare l'utente nello sviluppo dei suoi progetti.

+

Alcune di queste proprietà sono state inserite successivamente nel CSS , quindi possono presentarsi differenze nell'utilizzo delle proprietà standard e delle -moz.

+

Alcune di queste proprietà non standard possono essere applicate solo su elementi di tipo XUL.

+

At-rules

+ +

Pseudo-elements and pseudo-classes

+ +

Properties

+ + + + + +

Values

+

Probabilmente documentate nelle pagine delle proprietà standard.

+ + + +

Note: Tutti questi valori sono da considerare disapprovati. E' preferibile usare overflow-x and overflow-y, nonostante non rimpiazzino l'ultimo di questi.

+ + + + + + + + + + + +

Others

+ + + +

Talk:Mozilla CSS Extensions

+

{{ Bug(311415) }} implemented -moz-intrinsic, -moz-min-intrinsic, -moz-shrink-wrap, -moz-fill values for {{ Cssxref("width") }}, {{ Cssxref("min-width") }}, and {{ Cssxref("max-width") }} properties.

+

{{ languages( { "en": "en/R\u00e9f\u00e9rence_CSS/Extensions_Mozilla", "fr": "fr/R\u00e9f\u00e9rence_CSS/Extensions_Mozilla", "pl": "pl/Dokumentacja_CSS/Rozszerzenia_Mozilli" } ) }}

diff --git a/files/it/web/css/object-fit/index.html b/files/it/web/css/object-fit/index.html new file mode 100644 index 0000000000..1421cd58c8 --- /dev/null +++ b/files/it/web/css/object-fit/index.html @@ -0,0 +1,161 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +translation_of: Web/CSS/object-fit +--- +
{{CSSRef}}
+ +

La proprietà CSS object-fit istruisce il browser su come deve ridimensionare il contenuto di un elemento incluso, come avviene per i tag {{HTMLElement("img")}} o {{HTMLElement("video")}}, per adattarlo al suo contenitore.

+ +

Per modificare l'allineamento dell'elemento ridimensionato rispetto al suo contenitore puoi usare la proprietà {{cssxref("object-position")}}.

+ +
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
+ + + +

Sintassi

+ +

La proprietà object-fit viene specificata usando uno dei seguenti valori.

+ +

Valori

+ +
+
contain
+
L'elemento viene ridimensionato in relazione al suo contenitore preservando le proporzioni. Se le proporzioni dell'elemento e il suo contenitore non sono identici si avrà come risultato l'effetto "letterboxed".
+
cover
+
L'elemento viene ridimensionato in relazione al suo contenitore preservando le proporzioni. Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà ritagliato per adattarsi.
+
fill
+
L'elemento viene ridimensionato per riempire completamente il suo contenitore. Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà deformato per adattarsi.
+
none
+
L'elemento non viene ridimensionato.
+
scale-down
+
L'elemento viene ridimensionto come se none o contain fossero specificati, ma con la differenza che si ottiene sempre un oggetto più piccolo.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Esempi

+ +

HTML

+ +
<div>
+  <h2>object-fit: fill</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
+
+  <h2>object-fit: contain</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
+
+  <h2>object-fit: cover</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
+
+  <h2>object-fit: none</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
+
+  <h2>object-fit: scale-down</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
+
+</div>
+ +

CSS

+ +
h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+
+ +

Risultato

+ +

{{ EmbedLiveSample('Example', 500, 450) }}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}Initial definition
+ +

{{cssinfo}}

+ +

Compatibilità browser

+ + + +

{{Compat("css.properties.object-fit")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/css/pseudo-classes/index.html b/files/it/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..935d570c71 --- /dev/null +++ b/files/it/web/css/pseudo-classes/index.html @@ -0,0 +1,167 @@ +--- +title: Pseudo-classes +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Panoramica + - Pseudo-class + - Riferimento + - Selettori +translation_of: Web/CSS/Pseudo-classes +--- +
{{CSSRef}}
+ +

Una pseudo-classe CSS è una parola chiave aggiunta ad un selettore la quale specifica lo stato speciale degli elementi selezionati. Ad esempio, {{CSSxRef(":hover")}} può essere usato per cambiare il colore di un pulsate quando il puntatore dell'utente vi passa sopra.

+ +
/* Qualsiasi button sopra al quale passa il cursore dell'utente*/
+button:hover {
+  color: blue;
+}
+ +

La pseudo-classi permettono di applicare uno stile ad un elemento non solo in relazione al contenuto dell'alberatura del documento, ma anche in relazione a fattori esterni come la storia della navigazione ({{CSSxRef(":visited")}}, per esempio), lo stato del suo contenuto (come {{CSSxRef(":checked")}} su determinati elementi di form), oppure la posizione del mouse (come {{CSSxRef(":hover")}}), il quale permette di sapere se il mouse si trova su un elemento o no.

+ +
+

Nota: Al contrario delle pseudo-classi, gli pseudo-elementi possono essere usati per dare stile a parti specifiche di un elemento.

+
+ +

Sintassi

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

Come per una classe regolare, è possibile concatenare insieme quante più pseudo-classi volute in un selettore.

+ +

Indice delle pseudo-classi standard

+ +
+ +
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Definito :fullscreen.
{{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}Definisce quando particolari selettori corrisponde ad elementi HTML.
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}Definiti :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() e :where().
+ Cambiato il comportamento di :empty {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.
+ Nessun cambiamento significativo per le altre pseudo-classi definite nel {{SpecName("CSS3 Selectors")}} e {{SpecName("HTML5 W3C")}} (sebbene il significato semantico non sia stato preso in considerazione).
{{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}Copia della sezione pertinente dalla specifica canonica HTML (WHATWG).
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}Definiti :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, ma senza l'associazione di significato semantico.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}Definiti :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty e :not().
+ Definita la sintassi di :enabled, :disabled, :checked, e :indeterminate, ma senza l'associazione di significato semantico.
+ Nessun cambiamento significativo per le pseudo-classi definite nel {{SpecName('CSS2.1')}}.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}Definiti :lang(), :first-child, :hover, e :focus.
+ Nessun cambiamento significativo per le pseudo-classi definite nel {{SpecName('CSS1')}}.
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Definiti :link, :visited e :active, ma senza l'associazione di significato semantico.
+ +

Vedi anche

+ + diff --git a/files/it/web/css/ricette_layout/index.html b/files/it/web/css/ricette_layout/index.html new file mode 100644 index 0000000000..bbdee7472e --- /dev/null +++ b/files/it/web/css/ricette_layout/index.html @@ -0,0 +1,60 @@ +--- +title: Ricette per layout in CSS +slug: Web/CSS/Ricette_layout +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+ +

Lo scopo del ricettario per layout in CSS è quello di raccogliere schemi per layouts utili per le tue pagine. In aggiunta a ricevere codice per iniziare i propri progetti, queste ricette sottolineano le differenti modalità e decisioni nel design di layouts messe a disposizione per sviluppatori.

+ +
+

Nota: Se sei nuovo a sviluppare layouts in CSS consigliamo dare un ochhiata al nostro CSS layout learning module, che darà le basi per fare pieno uso delle seguenti ricette.

+
+ +

Le Ricette

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RicettaDescrizioneMetodi di layout
Oggetti mediaUna scatola con due colonne avente un immagine su un lato e del testo descrittivo nell'altro, p.es: un post su facebook o un tweet.CSS Grid, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing
ColonneQuando scegliere un layout a più colonne, un flexbox o una griglia per le colonneCSS Grid, Multicol, Flexbox
Centrare un elementoCome centrare un oggetto orizzontalmente e verticalmenteFlexbox, Box Alignment
Note a piè di pagina appiccicoseCreare una nota a piè di pagina che sta alla fine del container o del punto di vista attuale quando il contenuto è più corto. CSS Grid, Flexbox
Navigazione divisaUno schema nel quale alcuni link sono visualmente separati da altri.Flexbox, {{cssxref("margin")}}
Navigazione a bricioleCreare una lista di links che perrmette il visitatore di navigare inditro nella gerarchia della pagina.Flexbox
+ +

Contribuire al ricettario

+ +

Come  con tutto il MDM ci piacerebbe se contribuisci ricette nello stesso formato a quelle mostrate sopra. Guarda questa pagina per trovare un template e delle linee guida per scrivere il tuo esempio.

diff --git a/files/it/web/css/selettore_figli_diretti/index.html b/files/it/web/css/selettore_figli_diretti/index.html new file mode 100644 index 0000000000..cf2903dbc9 --- /dev/null +++ b/files/it/web/css/selettore_figli_diretti/index.html @@ -0,0 +1,121 @@ +--- +title: Selettore di Figli Diretti +slug: Web/CSS/selettore_figli_diretti +tags: + - compinatori css + - selettore di figli diretti +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +
Il combinatore ">" separa due selettori selezionando solo quegli elementi selezionati con il secondo selettore che sono figli diretti del primo selettore.
+ +
 
+ +
Al contrario, quando due selettori sono combinati con il selettore discendente, vengono selezionati tutti gli elementi che soddisfano il secondo selettore per il quale esiste un elemento antenato definito dal primo selettore, indipendentemente dal numero di "salti" attraverso l'albero DOM.
+ +
 
+ +

Sintassi

+ +
selettore1 > selettore2 {stili CSS }
+
+ +

Esempio

+ +
span { background-color: white; }
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +
<div>
+  <span>Span 1. In the div.
+    <span>Span 2. In the span that's in the div.</span>
+  </span>
+  <span>Span 3. In the div</span>
+</div>
+
+<span>Span 4. Not in a div at all.</span>
+
+ +

{{EmbedLiveSample("Example", 200, 100)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}No change
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Compatibilità tra i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/it/web/css/text-align/index.html b/files/it/web/css/text-align/index.html new file mode 100644 index 0000000000..281bf0d8fa --- /dev/null +++ b/files/it/web/css/text-align/index.html @@ -0,0 +1,108 @@ +--- +title: text-align +slug: Web/CSS/text-align +translation_of: Web/CSS/text-align +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà text-align indica come le linee di testo devono essere allineate tra loro. text-align non influisce sull'allineamento degli altri elementi, solo del loro contenuto in-line.

+ + + +

Sintassi

+ +
text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+
+ +

Valori

+ + + +

Esempi

+ +
p.left { text-align: left; }
+
+p.right { text-align: right; }
+
+ +

Esempi Live

+ +
div { text-align: center; border:solid; } + +

p { background:gold; width:22em; }

+e le altre righe di codice...
+ +
div { text-align: center; border:solid; } + +

p { background:gold; width:22em; margin: 1em auto; }

+e le altre righe di codice...
+ +
div { text-align:-moz-center; text-align:-webkit-center; border:solid; } + +

p { background:gold; width:22em; }

+e le altre righe di codice...
+ +

Note

+ + + +

Specifiche

+ + + +

Compatibilità coi browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima supportata
Firefox (Gecko)1.0
Internet Explorer3
Netscape4
Opera3.5
+ +

Vedi anche

+ +

text-indent, text-align, text-decoration, letter-spacing, word-spacing, text-transform, white-space, white-space-collapse, text-rendering, text-wrap, text-shadow, margin, margin-left, margin-right, vertical-align,

+ +

{{ languages( { "en": "en/CSS/text-align", "fr": "fr/CSS/text-align" } ) }}

diff --git a/files/it/web/css/text-shadow/index.html b/files/it/web/css/text-shadow/index.html new file mode 100644 index 0000000000..fa04ed546b --- /dev/null +++ b/files/it/web/css/text-shadow/index.html @@ -0,0 +1,122 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +translation_of: Web/CSS/text-shadow +--- +

 

+
+

Introdotto in Gecko 1.9.1

+
+ Si applica a Firefox 3.5, Thunderbird 3 e superiori
+
+

 

+
+

Sommario

+
+ Edit section
+

La proprietà CSS text-shadow accetta una lista di effetti di ombreggiatura separata da virgole, che viene applicata al testo e alle  text-decoration dell'elemento.

+ +
+
+

Sintassi

+
+ Edit section
+ 
text-shadow: none | [<shadow>,]* <shadow>
+
+  dove <shadow> è:
+
+[ <colore> <lunghezza> <lunghezza> <lunghezza>? | <lunghezza> <lunghezza> <lunghezza>? <colore>? ]
+
+
+

Valori

+
+ Edit section
+
+
+ <colore>
+
+ Opzionale, prima o dopo i valori di <lunghezza> . Se il <colore> non è specificato, viene usato un colore predefinito. Gecko/Firefox usa il valore della proprietà color dell'elemento. Gli altri browser potrebbero comportarsi diversamente. +
+ Nota: Specifica un colore per la compatibilità tra browser.
+
+
+ <lunghezza> <lunghezza>
+
+ Vedi <length> per le possibili unità di misura.
+ Questi valori di <lunghezza> stabiliscono la distanza dell'ombreggiatura. Il primo parametro <lunghezza> specifica la distanza orizzontale. Valori negativi spostano l'ombreggiatura a sinistra del testo. Il secondo parametro <lunghezza> specifica la distanza verticale. Valori negativi spostano l'ompreggiatura sopra il testo. Se entrambi i valori sono 0 l'ombreggiatura si sposta dietro al testo (e potrebbe generare un effetto di sfocato se è specificato il terzo parametro <lunghezza>).
+
+
+
+ <lunghezza>
+
+ Opzionale. Il terzo parametro <lunghezza> specifica il raggio dell'effetto sfocato. Se non viene specificato, è 0. Più alto è il valore, più grande è l'effetto sfocato, quindi l'ombreggiatura diventa più estesa e più chiara.
+
+
+
+

Examples

+
+ Edit section
+

Esempio 1 Esempio 2 da Bugzilla

+ 
  h1 { text-shadow: black 0 0 0.4em; }
+
+ 
  h2 { text-shadow: red 2px 2px 2px, blue 4px 4px 2px, 6px 6px, green 8px 8px; }
+
+
+
+

Specifiche

+
+ Edit section
+

Nota: text-shadow era stata definita impropriamente in CSS2 e scartata in CSS2.1. La specifica Text di CSS3 ha migliorato la sintassi.

+ +
+
+

Compatibilità tra browser

+
+ Edit section
+ + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet ExplorerNo
+ La versione 5.5  supporta il Filter Shadow e DropShadow
Firefox (Gecko)3.5 (1.9.1)
Opera9.5
Safari (WebKit)1.1 (100), ombreggiature multiple dalla versione 4.0 (528)
+

Al momento di scrittura:

+ +
+
+

Vedere anche

+
+ Edit section
+

-moz-box-shadow

+
+

 

diff --git a/files/it/web/css/transition-timing-function/index.html b/files/it/web/css/transition-timing-function/index.html new file mode 100644 index 0000000000..c99e5f5678 --- /dev/null +++ b/files/it/web/css/transition-timing-function/index.html @@ -0,0 +1,634 @@ +--- +title: transition-timing-function +slug: Web/CSS/transition-timing-function +translation_of: Web/CSS/transition-timing-function +--- +

{{ CSSRef("CSS Transitions") }}

+ +

Sommario

+ +

La proprietà CSS transition-timing-function è usata per descrivere come gli stati intermedi delle proprietà CSS vengono modificati quando viene calcolato il risultato di un effetto di transizione. Ti permette di definire una curva di accelerazione, in modo che la velocità della transizione possa variare nell'arco della sua durata.

+ +

Questa curva di accelerazione viene definita utilizzando uno {{cssxref("<timing-function>")}} per ogni proprietà che ottiene una transizione.

+ +

È possibile specificare un numero arbitrario di funzioni di temporizzazione; ciasuna di queste sarà applicata alla corrispondente proprietà seguendo le specifiche in {{ cssxref("transition-property") }}, dove in questo caso si comporta come la lista principale.

+ +

Se ci sono meno funzione specificate rispetto alle proprietà presenti nella lista, i valori mancanti saranno impostati a quello iniziale (ease). Se ci sono più funzioni di temporizzazione, i valori verranno applicati seguendo la lista principale e i valori in eccesso verranno semplicemente scartati. In entrambi i casi entrambe le dichiarazioni sono considerate valide.

+ +

{{cssinfo}}

+ +

Sintassi

+ +
Formal syntax: {{csssyntax("transition-timing-function")}}
+
+ +
transition-timing-function: ease
+transition-timing-function: ease-in
+transition-timing-function: ease-out
+transition-timing-function: ease-in-out
+transition-timing-function: linear
+transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
+transition-timing-function: step-start
+transition-timing-function: step-end
+transition-timing-function: steps(4, end)
+
+transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
+
+transition-timing-function: inherit
+
+ +

Valori

+ +
+
<timing-function>
+
Ciascun {{cssxref("<timing-function>")}} rappresenta una funzione di temporizzazione che dovrà essere linkata alla corrispondente proprietà che avrà la transizione, come definito in {{ cssxref("transition-property") }}.
+
+ +

Esempi

+ +
+
+

transition-timing-function: ease

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_ease",275,150)}}
+
+ +
+

transition-timing-function: ease-in

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_easein",275,150)}}
+
+ +
+

transition-timing-function: ease-out

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-out;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_easeout",275,150)}}
+
+ +
+

transition-timing-function: ease-in-out

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_easeinout",275,150)}}
+
+
+ +
+

transition-timing-function: linear

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_linear",275,150)}}
+
+ +
+

transition-timing-function: step-start

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-start;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-start;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-start;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-start;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepstart",275,150)}}
+
+ +
+

transition-timing-function: step-end

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepend",275,150)}}
+
+ +
+

transition-timing-function: steps(4, end)

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_step4end",275,150)}}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '#transition-timing-function', 'transition-timing-function') }}{{ Spec2('CSS3 Transitions') }} 
+ +

Compatibilità tra Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("2.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1011.6{{ property_prefix("-o") }}
+ 12.10 #		{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("2.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+
+ +

Vedi Anche

+ + diff --git a/files/it/web/css/type_selectors/index.html b/files/it/web/css/type_selectors/index.html new file mode 100644 index 0000000000..91e6b48de9 --- /dev/null +++ b/files/it/web/css/type_selectors/index.html @@ -0,0 +1,78 @@ +--- +title: Type selectors +slug: Web/CSS/Type_selectors +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef}}
+ +

Il selettore di tipo CSS identifica gli elementi in base al nome del nodo. In altre parole, seleziona tutti gli elementi di un dato tipo entro il documento.

+ +
/* Tutti gli elemnti <a>. */
+a {
+  color: red;
+}
+ +

Sintassi

+ +
element { style properties }
+
+ +

Esempio

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<span>Here's a span with some text.</span>
+<p>Here's a p with some text.</p>
+<span>Here's a span with more text.</span>
+
+ +

Risultato

+ +

{{EmbedLiveSample('Example', '100%', 150)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Nessun cambiamento
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Nessun cambiamento
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Definizione iniziale
+ +

Compatibilità Browser

+ + + +

{{Compat("css.selectors.type")}}

diff --git a/files/it/web/css/universal_selectors/index.html b/files/it/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..6c247e09da --- /dev/null +++ b/files/it/web/css/universal_selectors/index.html @@ -0,0 +1,105 @@ +--- +title: Universal selectors +slug: Web/CSS/Universal_selectors +tags: + - CSS + - Reference + - Selettori +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef}}
+ +

Il selettore universale CSS (*) corrisponde ad elementi di qualsiasi tipo.

+ +
/* Seleziona tutti gli elementi */
+* {
+  color: green;
+}
+ +

A partire dal CSS3, l'asterisco può essere usato in combinazione con {{cssxref("CSS_Namespaces", "namespaces")}}:

+ + + +

Sintassi

+ +
* { style properties }
+ +

L'asterisco è opzionale con i selettori semplici. Per esempio, *.warning e .warning sono equivalenti.

+ +

Esempio

+ +

CSS

+ +
* [lang^=en] {
+  color: green;
+}
+
+*.warning {
+  color: red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left
+}
+
+/* Aggiungi clear automatico al fratello immediatamente successivo dopo un elemento flottante */
+.floating + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="warning">
+  <span lang="en-us">Uno span verde</span> in un paragrafo rosso.
+</p>
+<p id="maincontent" lang="en-gb">
+  <span class="warning">Uno span rosso</span> in un paragrafo verde.
+</p>
+ +

Risultati

+ +

{{EmbedLiveSample('Examples')}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommenti
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Nessun cambiamento
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Definisce il comportamento relativo ai namespace e aggiunge il consiglio per cui omettere il selettore sia consentito nell'ambito degli pseudo-elementi
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Definizione iniziale
+ +

Compatibilità Browser

+ + + +

{{Compat("css.selectors.universal")}}

diff --git a/files/it/web/css/word-break/index.html b/files/it/web/css/word-break/index.html new file mode 100644 index 0000000000..0af1a85bd0 --- /dev/null +++ b/files/it/web/css/word-break/index.html @@ -0,0 +1,131 @@ +--- +title: word-break +slug: Web/CSS/word-break +translation_of: Web/CSS/word-break +--- +
{{CSSRef}}
+ +

Riassunto

+ +

La proprietà CSS word-break è usata per specificare come (e se) andare a capo in mezzo alle parole.

+ +
{{cssinfo}}
+ +

Sintassi

+ +
Sintassi Formale: {{csssyntax("word-break")}}
+
+ +
word-break: normal
+word-break: break-all
+word-break: keep-all
+
+word-break: inherit
+
+ +

Valore

+ +
+
normal
+
Usa le regole di a-capo predefinite.
+
break-all
+
Gli a-capo possono essere inseriti tra due caratteri qualsiasi nel testo non-CJK (Cinese/Giapponese/Coreano).
+
keep-all
+
Non permettere a-capo in mezzo ad una parola nei testi CJK.  Il comportamento nei testi non-CJK è lo stesso di normal.
+
+ +

Esempi

+ +

{{todo}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('CSS3 Text', '#word-break', 'word-break')}}{{Spec2('CSS3 Text')}} 
+ +

Compatibilità con i browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base1.0{{CompatGeckoDesktop("15.0")}}5.5 [1]{{CompatNo}}{{CompatVersionUnknown}}
keep-all{{CompatNo}} [2]{{CompatGeckoDesktop("15.0")}}5.5{{CompatNo}}{{CompatNo}} [2]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatVersionUnknown}}18.0{{CompatGeckoMobile("15.0")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
keep-all{{CompatNo}} [2]{{CompatNo}} [2]{{CompatGeckoMobile("15.0")}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}} [2]
+
+ +

[1] IE8 ha introdotto -ms-word-break come sinonimo di word-break. Si sconsiglia di usare il prefisso -ms- .

+ +

[2] Vedi {{webkitbug("123782")}}.

diff --git a/files/it/web/css/z-index/index.html b/files/it/web/css/z-index/index.html new file mode 100644 index 0000000000..7f58297a34 --- /dev/null +++ b/files/it/web/css/z-index/index.html @@ -0,0 +1,192 @@ +--- +title: z-index +slug: Web/CSS/z-index +translation_of: Web/CSS/z-index +--- +
{{CSSRef}}
+ +
La Proprietà CSS z-index specifica lo z-order di un elemento posizionato e dei suoi discendenti. Nel caso di elementi che si sovrappongono, quelli con un valore di z-order maggiore sono sovrapposti a quelli con un valore più basso.
+ +
+ +
/* Keyword value */
+z-index: auto;
+
+/* <integer> values */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1; /* Negative values to lower the priority */
+
+/* Global values */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+
+ +

Per una box posizionata (ovvero con valore qualsiasi di position che non sia static) la proprietà z-index indica;

+ +
    +
  1.  Il livello di sovrapposizione della box nello stacking context corrente.
    2. +
  2.  Se la box stabilisce uno stacking context locale.
    3. +
+ +
<div class="container">
+<div class="block position1 text-top">z-index: auto</div>
+<div class="block position2 text-top">z-index: auto</div>
+<div class="block position3 text-top">z-index: auto</div>
+</div>
+
+<div class="container">
+<div class="block position1 text-bottom" style="z-index:3">z-index: 3</div>
+<div class="block position2 text-bottom" style="z-index:2">z-index: 2</div>
+<div class="block position3 text-bottom" style="z-index:1">z-index: 1</div>
+</div>
+ +
+
* {
+  box-sizing: border-box;
+}
+
+.container {
+  display: inline-block;
+  width: 250px;
+  position: relative;
+}
+
+.block {
+  width: 150px;
+  height: 75px;
+  position: absolute;
+  font-family: monospace;
+  background-color: #E5E8FC;
+  border: solid 5px #112382;
+}
+
+.text-top {
+  padding: 0.5em 0 5em .5em;
+}
+
+.text-bottom {
+  padding: 4em 0 1.5em .5em;
+}
+
+.position1 {
+  top: 0;
+  left: 0;
+}
+
+.position2 {
+  top: 30px;
+  left: 30px;
+}
+
+.position3 {
+  top: 60px;
+  left: 60px;
+}
+
+ +

{{EmbedLiveSample("z-index", 1200, 160, "", "", "example-outcome-frame")}}

+ +

L'esempio sopra mostra l'effetto di z-index. Sulla sinistra abbiamo disegnato tre boxes, facendole sovrapporre usando absolute positioning. Per default, gli elementi sono sovrapposti seguendo l'ordine dichiarato nel codice HTML. Sulla destra abbiamo lo stesso markup, ma a differenza dell'ordine di default usiamo lo z-index. 

+ +

{{cssinfo}}

+ +

Sintassi

+ +

La proprieta z-index e' specificata anche con le chiavi auto o <integer>.

+ +

Valori

+ +
+
auto
+
La box non stabilisce una nuova stacking context locale. Il livello di sovrapposizione della box generata e' lo stesso del livello di sovrapposizione del suo genitore
+
<integer>
+
Questo {{cssxref("<integer>")}} e' il livello di sovrapposizione della box generata nel corrente stacking context. La box stabilisce anche una locale stacking context in cui il suo livello di sovrapposizione e' 0. Questo significa che gli z-indexes dei discendenti non sono confrontati con gli z-indexes degli elementi all'esterno di questo elemento.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

HTML

+ +
<div class="dashed-box">Dashed box
+  <span class="gold-box">Gold box</span>
+  <span class="green-box">Green box</span>
+</div>
+
+ +

CSS

+ +
.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* put .green-box above .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+
+ +

Result

+ +

{{ EmbedLiveSample('Examples', '550', '200', '') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}{{Spec2('CSS3 Transitions')}}Defines z-index as animatable.
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.z-index")}}

+ +

See also

+ + diff --git a/files/it/web/esempi_di_tecnologie_web_open/index.html b/files/it/web/esempi_di_tecnologie_web_open/index.html new file mode 100644 index 0000000000..2244c73297 --- /dev/null +++ b/files/it/web/esempi_di_tecnologie_web_open/index.html @@ -0,0 +1,136 @@ +--- +title: Esempi di tecnologie web open +slug: Web/Esempi_di_tecnologie_web_open +translation_of: Web/Demos_of_open_web_technologies +--- +

Mozilla supporta un'ampia varietà di emozionanti tecnologie web open, e noi ne incoraggiamo l'uso. In questa pagina sono contenuti collegamenti a degli interessanti esempi di queste tecnologie.

+ +

Se sei al corrente di esempi ben fatti o di applicazioni che fanno uso di tecnologia web open, per favore aggiungi un link nella sezione appropriata.

+ +

Grafica 2D

+ +

Canvas

+ + + +

SVG

+ + + +

Video

+ + + +

Grafica 3D

+ +

WebGL

+ + + +

Realtà Virtuale

+ + + +

CSS

+ + + +

Trasformazioni

+ + + +

Giochi

+ + + +

HTML

+ + + +

Web APIs

+ + + +

Notifications API

+ + + + + +

Web Audio API

+ + + +

File API

+ + + +

Web Workers

+ + diff --git a/files/it/web/events/domcontentloaded/index.html b/files/it/web/events/domcontentloaded/index.html new file mode 100644 index 0000000000..9b2cf7467e --- /dev/null +++ b/files/it/web/events/domcontentloaded/index.html @@ -0,0 +1,75 @@ +--- +title: DOMContentLoaded event +slug: Web/Events/DOMContentLoaded +tags: + - Evento + - Referenza + - Web + - eventi +translation_of: Web/API/Window/DOMContentLoaded_event +--- +
{{APIRef}}
+ +

L'evento DOMContentLoaded si attiva quando il documento HTML iniziale è stato completamente caricato e analizzato, senza attendere che i fogli di stile, le immagini e i sottoframe finiscano di caricarsi.

+ + + + + + + + + + + + + + + + + + + + +
BubblingSì
CancellabileSì (anche se specificato come evento semplice che non è cancellabile)
Interfaccia{{domxref("Event")}}
Proprietà dell'handlerNessuna
+ +

L'obiettivo originale per questo evento è il Document che è stato caricato. È possibile ascoltare questo evento nell'interfaccia Window per gestirlo nelle fasi di capturing o bubbling. Per i dettagli completi su questo evento, consulta la pagina sull'evento Document: DOMContentLoaded.

+ +

Un evento diverso, load, dovrebbe essere utilizzato solo per rilevare una pagina completamente caricata. È un errore comune utilizzare load dove DOMContentLoaded sarebbe più appropriato.

+ +

Esempi

+ +

Utilizzo di base

+ +
document.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM completamente caricato e analizzato');
+});
+
+ +

Specifiche

+ + + + + + + + + + + + +
SpecificaStato
{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Window.DOMContentLoaded_event")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/events/index.html b/files/it/web/events/index.html new file mode 100644 index 0000000000..c492f87dd4 --- /dev/null +++ b/files/it/web/events/index.html @@ -0,0 +1,2310 @@ +--- +title: Event reference +slug: Web/Events +tags: + - NeedsTranslation + - TopicStub + - events +translation_of: Web/Events +--- +

DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the {{domxref("Event")}} interface, and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.

+ +

This article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, Mozilla-specific events are listed so that add-ons can use them to interact with the browser.

+ +

Standard events

+ +

These events are defined in official Web specifications, and should be common across browsers. Each event is listed along with the interface representing the object sent to recipients of the event (so you can find information about what data is provided with each event) as well as a link to the specification or specifications that define the event.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("abort")}}{{domxref("UIEvent")}}DOM L3The loading of a resource has been aborted.
abort{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has been terminated (not due to an error).
abort{{domxref("Event")}}IndexedDBA transaction has been aborted.
{{event("afterprint")}}{{gecko_minversion_inline("6")}}{{domxref("Event")}}HTML5The associated document has started printing or the print preview has been closed.
{{event("animationend")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation has completed.
{{event("animationiteration")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation is repeated.
{{event("animationstart")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation has started.
{{event("audioprocess")}}{{domxref("AudioProcessingEvent")}}{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.
{{event("audioend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has finished capturing audio for speech recognition.
{{event("audiostart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has started to capture audio for speech recognition.
{{event("beforeprint")}} {{gecko_minversion_inline("6")}}{{domxref("Event")}}HTML5The associated document is about to be printed or previewed for printing.
{{event("beforeunload")}}{{domxref("BeforeUnloadEvent")}}HTML5  
{{event("beginEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element begins.
blocked IndexedDBAn open connection to a database is blocking a versionchange transaction on the same database.
{{event("blur")}}{{domxref("FocusEvent")}}DOM L3An element has lost focus (does not bubble).
{{event("boundary")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a word or sentence boundary
{{event("cached")}}{{domxref("Event")}}OfflineThe resources listed in the manifest have been downloaded, and the application is now cached.
{{event("canplay")}}{{domxref("Event")}}HTML5 mediaThe user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
{{event("canplaythrough")}}{{domxref("Event")}}HTML5 mediaThe user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
{{event("change")}}{{domxref("Event")}}DOM L2, HTML5The change event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user.
{{event("chargingchange")}}{{domxref("Event")}}Battery statusThe battery begins or stops charging.
{{event("chargingtimechange")}}{{domxref("Event")}}Battery statusThe chargingTime attribute has been updated.
{{event("checking")}}{{domxref("Event")}}OfflineThe user agent is checking for an update, or attempting to download the cache manifest for the first time.
{{event("click")}}{{domxref("MouseEvent")}}DOM L3A pointing device button has been pressed and released on an element.
close{{domxref("Event")}}WebSocketA WebSocket connection has been closed.
complete IndexedDB 
{{event("complete")}}{{domxref("OfflineAudioCompletionEvent")}}{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}The rendering of an {{domxref("OfflineAudioContext")}} is terminated.
{{event("compositionend")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3The composition of a passage of text has been completed or canceled.
{{event("compositionstart")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3A character is added to a passage of text being composed.
{{event("contextmenu")}}{{domxref("MouseEvent")}}HTML5The right button of the mouse is clicked (before the context menu is displayed).
{{event("copy")}}{{domxref("ClipboardEvent")}}ClipboardThe text selection has been added to the clipboard.
{{event("cut")}}{{domxref("ClipboardEvent")}}ClipboardThe text selection has been removed from the document and added to the clipboard.
{{event("dblclick")}}{{domxref("MouseEvent")}}DOM L3A pointing device button is clicked twice on an element.
{{event("devicelight")}}{{domxref("DeviceLightEvent")}}Ambient Light EventsFresh data is available from a light sensor.
{{event("devicemotion")}}{{domxref("DeviceMotionEvent")}}Device Orientation EventsFresh data is available from a motion sensor.
{{event("deviceorientation")}}{{domxref("DeviceOrientationEvent")}}Device Orientation EventsFresh data is available from an orientation sensor.
{{event("deviceproximity")}}{{domxref("DeviceProximityEvent")}}Proximity EventsFresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).
{{event("dischargingtimechange")}}{{domxref("Event")}}Battery statusThe dischargingTime attribute has been updated.
DOMActivate {{deprecated_inline}}{{domxref("UIEvent")}}DOM L3A button, link or state changing element is activated (use {{event("click")}} instead).
DOMAttributeNameChanged {{deprecated_inline}}{{domxref("MutationNameEvent")}}DOM L3 RemovedThe name of an attribute changed (use mutation observers instead).
DOMAttrModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3The value of an attribute has been modified (use mutation observers instead).
DOMCharacterDataModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A text or another CharacterData has changed (use mutation observers instead).
{{event("DOMContentLoaded")}}{{domxref("Event")}}HTML5The document has finished loading (but not its dependent resources).
DOMElementNameChanged {{deprecated_inline}}{{domxref("MutationNameEvent")}}DOM L3 RemovedThe name of an element changed (use mutation observers instead).
DOMFocusIn {{deprecated_inline}}{{domxref("FocusEvent")}}DOM L3An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).
DOMFocusOut {{deprecated_inline}}{{domxref("FocusEvent")}}DOM L3An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).
DOMNodeInserted {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been added as a child of another node (use mutation observers instead).
DOMNodeInsertedIntoDocument {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been inserted into the document (use mutation observers instead).
DOMNodeRemoved {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been removed from its parent node (use mutation observers instead).
DOMNodeRemovedFromDocument {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been removed from the document (use mutation observers instead).
DOMSubtreeModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A change happened in the document (use mutation observers instead).
{{event("downloading")}}{{domxref("Event")}}OfflineThe user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.
{{event("drag")}}{{domxref("DragEvent")}}HTML5An element or text selection is being dragged (every 350ms).
{{event("dragend")}}{{domxref("DragEvent")}}HTML5A drag operation is being ended (by releasing a mouse button or hitting the escape key).
{{event("dragenter")}}{{domxref("DragEvent")}}HTML5A dragged element or text selection enters a valid drop target.
{{event("dragleave")}}{{domxref("DragEvent")}}HTML5A dragged element or text selection leaves a valid drop target.
{{event("dragover")}}{{domxref("DragEvent")}}HTML5An element or text selection is being dragged over a valid drop target (every 350ms).
{{event("dragstart")}}{{domxref("DragEvent")}}HTML5The user starts dragging an element or text selection.
{{event("drop")}}{{domxref("DragEvent")}}HTML5An element is dropped on a valid drop target.
{{event("durationchange")}}{{domxref("Event")}}HTML5 mediaThe duration attribute has been updated.
{{event("emptied")}}{{domxref("Event")}}HTML5 mediaThe media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
{{event("end_(SpeechRecognition)","end")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has disconnected.
{{event("end_(SpeechSynthesis)","end")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName("Web Speech API")}}The utterance has finished being spoken.
{{event("ended")}}{{domxref("Event")}}HTML5 mediaPlayback has stopped because the end of the media was reached.
{{event("ended_(Web_Audio)", "ended")}}{{domxref("Event")}}{{SpecName("Web Audio API")}} 
{{event("endEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element ends.
{{event("error")}}{{domxref("UIEvent")}}DOM L3A resource failed to load.
{{event("error")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has failed.
{{event("error")}}{{domxref("Event")}}OfflineAn error occurred while downloading the cache manifest or updating the content of the application.
{{event("error")}}{{domxref("Event")}}WebSocketA WebSocket connection has been closed with prejudice (some data couldn't be sent for example).
{{event("error")}}{{domxref("Event")}}Server Sent EventsAn event source connection has been failed.
{{event("error")}}{{domxref("Event")}}IndexedDBA request caused an error and failed.
{{event("error_(SpeechRecognitionError)","error")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}A speech recognition error occurs.
{{event("error_(SpeechSynthesisError)","error")}}{{domxref("SpeechSynthesisErrorEvent")}}{{SpecName('Web Speech API')}}An error occurs that prevents the utterance from being successfully spoken.
{{event("focus")}}{{domxref("FocusEvent")}}DOM L3An element has received focus (does not bubble).
{{event("focusin")}}{{domxref("FocusEvent")}}DOM L3An element is about to receive focus (bubbles).
{{event("focusout")}}{{domxref("FocusEvent")}}DOM L3An element is about to lose focus (bubbles).
{{event("fullscreenchange")}}{{domxref("Event")}}Full ScreenAn element was turned to fullscreen mode or back to normal mode.
{{event("fullscreenerror")}}{{domxref("Event")}}Full ScreenIt was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
{{event("gamepadconnected")}}{{domxref("GamepadEvent")}}GamepadA gamepad has been connected.
{{event("gamepaddisconnected")}}{{domxref("GamepadEvent")}}GamepadA gamepad has been disconnected.
{{event("gotpointercapture")}}{{domxref("PointerEvent")}}Pointer EventsElement receives pointer capture.
{{event("hashchange")}}{{domxref("HashChangeEvent")}}HTML5The fragment identifier of the URL has changed (the part of the URL after the #).
{{event("lostpointercapture")}}{{domxref("PointerEvent")}}Pointer EventsElement lost pointer capture.
{{event("input")}}{{domxref("Event")}}HTML5The value of an element changes or the content of an element with the attribute contenteditable is modified.
{{event("invalid")}}{{domxref("Event")}}HTML5A submittable element has been checked and doesn't satisfy its constraints.
{{event("keydown")}}{{domxref("KeyboardEvent")}}DOM L3A key is pressed down.
{{event("keypress")}}{{domxref("KeyboardEvent")}}DOM L3A key is pressed down and that key normally produces a character value (use input instead).
{{event("keyup")}}{{domxref("KeyboardEvent")}}DOM L3A key is released.
{{event("languagechange")}}{{domxref("Event")}}{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }} 
{{event("levelchange")}}{{domxref("Event")}}Battery statusThe level attribute has been updated.
{{event("load")}}{{domxref("UIEvent")}}DOM L3A resource and its dependent resources have finished loading.
load{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has been successful.
{{event("loadeddata")}}{{domxref("Event")}}HTML5 mediaThe first frame of the media has finished loading.
{{event("loadedmetadata")}}{{domxref("Event")}}HTML5 mediaThe metadata has been loaded.
{{event("loadend")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgress has stopped (after "error", "abort" or "load" have been dispatched).
{{event("loadstart")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgress has begun.
{{event("mark")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a named SSML "mark" tag.
message{{domxref("MessageEvent")}}WebSocketA message is received through a WebSocket.
message{{domxref("MessageEvent")}}Web WorkersA message is received from a Web Worker.
message{{domxref("MessageEvent")}}Web MessagingA message is received from a child (i)frame or a parent window.
message{{domxref("MessageEvent")}}Server Sent EventsA message is received through an event source.
{{event("message_(ServiceWorker)","message")}}{{domxref("ServiceWorkerMessageEvent")}} or {{domxref("ExtendableMessageEvent")}}, depending on context.Service WorkersA message is received from a service worker, or a message is received in a service worker from another context.
{{event("mousedown")}}{{domxref("MouseEvent")}}DOM L3A pointing device button (usually a mouse) is pressed on an element.
{{event("mouseenter")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached.
{{event("mouseleave")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached.
{{event("mousemove")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved over an element.
{{event("mouseout")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached or off one of its children.
{{event("mouseover")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached or onto one of its children.
{{event("mouseup")}}{{domxref("MouseEvent")}}DOM L3A pointing device button is released over an element.
{{event("nomatch")}}{{domxref("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a final result with no significant recognition.
{{event("notificationclick")}}{{domxref("NotificationEvent")}}{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}A system notification spawned by {{domxref("ServiceWorkerRegistration.showNotification()")}} has been clicked.
{{event("noupdate")}}{{domxref("Event")}}OfflineThe manifest hadn't changed.
{{event("obsolete")}}{{domxref("Event")}}OfflineThe manifest was found to have become a 404 or 410 page, so the application cache is being deleted.
{{event("offline")}}{{domxref("Event")}}HTML5 offlineThe browser has lost access to the network.
{{event("online")}}{{domxref("Event")}}HTML5 offlineThe browser has gained access to the network (but particular websites might be unreachable).
open{{domxref("Event")}}WebSocketA WebSocket connection has been established.
open{{domxref("Event")}}Server Sent EventsAn event source connection has been established.
{{event("orientationchange")}}{{domxref("Event")}}Screen OrientationThe orientation of the device (portrait/landscape) has changed
{{event("pagehide")}}{{domxref("PageTransitionEvent")}}HTML5A session history entry is being traversed from.
{{event("pageshow")}}{{domxref("PageTransitionEvent")}}HTML5A session history entry is being traversed to.
{{event("paste")}}{{domxref("ClipboardEvent")}}ClipboardData has been transferred from the system clipboard to the document.
{{event("pause")}}{{domxref("Event")}}HTML5 mediaPlayback has been paused.
{{event("pause_(SpeechSynthesis)", "pause")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance is paused part way through.
{{event("pointercancel")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer is unlikely to produce any more events.
{{event("pointerdown")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer enters the active buttons state.
{{event("pointerenter")}}{{domxref("PointerEvent")}}Pointer EventsPointing device is moved inside the hit-testing boundary.
{{event("pointerleave")}}{{domxref("PointerEvent")}}Pointer EventsPointing device is moved out of the hit-testing boundary.
{{event("pointerlockchange")}}{{domxref("Event")}}Pointer LockThe pointer was locked or released.
{{event("pointerlockerror")}}{{domxref("Event")}}Pointer LockIt was impossible to lock the pointer for technical reasons or because the permission was denied.
{{event("pointermove")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer changed coordinates.
{{event("pointerout")}}{{domxref("PointerEvent")}}Pointer EventsThe pointing device moved out of hit-testing boundary or leaves detectable hover range.
{{event("pointerover")}}{{domxref("PointerEvent")}}Pointer EventsThe pointing device is moved into the hit-testing boundary.
{{event("pointerup")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer leaves the active buttons state.
{{event("play")}}{{domxref("Event")}}HTML5 mediaPlayback has begun.
{{event("playing")}}{{domxref("Event")}}HTML5 mediaPlayback is ready to start after having been paused or delayed due to lack of data.
{{event("popstate")}}{{domxref("PopStateEvent")}}HTML5A session history entry is being navigated to (in certain cases).
{{event("progress")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestIn progress.
progress{{domxref("ProgressEvent")}}OfflineThe user agent is downloading resources listed by the manifest.
{{event("push")}}{{domxref("PushEvent")}}{{SpecName("Push API")}}A Service Worker has received a push message.
{{event("pushsubscriptionchange")}}{{domxref("PushEvent")}}{{SpecName("Push API")}}A PushSubscription has expired.
{{event("ratechange")}}{{domxref("Event")}}HTML5 mediaThe playback rate has changed.
{{event("readystatechange")}}{{domxref("Event")}}HTML5 and XMLHttpRequestThe readyState attribute of a document has changed.
{{event("repeatEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element is repeated.
{{event("reset")}}{{domxref("Event")}}DOM L2, HTML5A form is reset.
{{event("resize")}}{{domxref("UIEvent")}}DOM L3The document view has been resized.
{{event("resourcetimingbufferfull")}}{{domxref("Performance")}}Resource TimingThe browser's resource timing buffer is full.
{{event("result")}}{{domxref("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.
{{event("resume")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}A paused utterance is resumed.
{{event("scroll")}}{{domxref("UIEvent")}}DOM L3The document view or an element has been scrolled.
{{event("seeked")}}{{domxref("Event")}}HTML5 mediaA seek operation completed.
{{event("seeking")}}{{domxref("Event")}}HTML5 mediaA seek operation began.
{{event("select")}}{{domxref("UIEvent")}}DOM L3Some text is being selected.
{{event("selectstart")}}{{domxref("Event")}}{{ SpecName('Selection API')}}A selection just started.
{{event("selectionchange")}}{{domxref("Event")}}{{ SpecName('Selection API')}}The selection in the document has been changed.
{{event("show")}}{{domxref("MouseEvent")}}HTML5A contextmenu event was fired on/bubbled to an element that has a contextmenu attribute
{{event("soundend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has stopped being detected.
{{event("soundstart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has been detected.
{{event("speechend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Speech recognised by the speech recognition service has stopped being detected.
{{event("speechstart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Sound that is recognised by the speech recognition service as speech has been detected.
{{event("stalled")}}{{domxref("Event")}}HTML5 mediaThe user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
{{event("start_(SpeechRecognition)","start")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
{{event("start_(SpeechSynthesis)","start")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance has begun to be spoken.
{{event("storage")}}{{domxref("StorageEvent")}}Web StorageA storage area (localStorage or sessionStorage) has changed.
{{event("submit")}}{{domxref("Event")}}DOM L2, HTML5A form is submitted.
success{{domxref("Event")}}IndexedDBA request successfully completed.
{{event("suspend")}}{{domxref("Event")}}HTML5 mediaMedia data loading has been suspended.
{{event("SVGAbort")}}{{domxref("SVGEvent")}}SVGPage loading has been stopped before the SVG was loaded.
{{event("SVGError")}}{{domxref("SVGEvent")}}SVGAn error has occurred before the SVG was loaded.
{{event("SVGLoad")}}{{domxref("SVGEvent")}}SVGAn SVG document has been loaded and parsed.
{{event("SVGResize")}}{{domxref("SVGEvent")}}SVGAn SVG document is being resized.
{{event("SVGScroll")}}{{domxref("SVGEvent")}}SVGAn SVG document is being scrolled.
{{event("SVGUnload")}}{{domxref("SVGEvent")}}SVGAn SVG document has been removed from a window or frame.
{{event("SVGZoom")}}{{domxref("SVGZoomEvent")}}SVGAn SVG document is being zoomed.
{{event("timeout")}}{{domxref("ProgressEvent")}}XMLHttpRequest 
{{event("timeupdate")}}{{domxref("Event")}}HTML5 mediaThe time indicated by the currentTime attribute has been updated.
{{event("touchcancel")}}{{domxref("TouchEvent")}}Touch EventsA touch point has been disrupted in an implementation-specific manners (too many touch points for example).
{{event("touchend")}}{{domxref("TouchEvent")}}Touch EventsA touch point is removed from the touch surface.
{{event("touchenter")}}{{domxref("TouchEvent")}}Touch Events RemovedA touch point is moved onto the interactive area of an element.
{{event("touchleave")}}{{domxref("TouchEvent")}}Touch Events RemovedA touch point is moved off the interactive area of an element.
{{event("touchmove")}}{{domxref("TouchEvent")}}Touch EventsA touch point is moved along the touch surface.
{{event("touchstart")}}{{domxref("TouchEvent")}}Touch EventsA touch point is placed on the touch surface.
{{event("transitionend")}}{{domxref("TransitionEvent")}}CSS TransitionsA CSS transition has completed.
{{event("unload")}}{{domxref("UIEvent")}}DOM L3The document or a dependent resource is being unloaded.
{{event("updateready")}}{{domxref("Event")}}OfflineThe resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache.
upgradeneeded IndexedDBAn attempt was made to open a database with a version number higher than its current version. A versionchange transaction has been created.
{{event("userproximity")}}{{domxref("UserProximityEvent")}}{{SpecName("Proximity Events")}}Fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not).
{{event("voiceschanged")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the {{event("voiceschanged")}} event fires.)
versionchange IndexedDBA versionchange transaction completed.
{{event("visibilitychange")}}{{domxref("Event")}}Page visibilityThe content of a tab has become visible or has been hidden.
{{event("volumechange")}}{{domxref("Event")}}HTML5 mediaThe volume has changed.
{{event("waiting")}}{{domxref("Event")}}HTML5 mediaPlayback has stopped because of a temporary lack of data.
{{event("wheel")}}{{gecko_minversion_inline("17")}}{{domxref("WheelEvent")}}DOM L3A wheel button of a pointing device is rotated in any direction.
+ +

Non-standard events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("afterscriptexecute")}}{{domxref("Event")}}Mozilla SpecificA script has been executed.
{{event("beforescriptexecute")}}{{domxref("Event")}}Mozilla SpecificA script is about to be executed.
{{event("beforeinstallprompt")}}{{domxref("Event")}}Chrome specificA user is prompted to save a web site to a home screen on mobile.
{{event("cardstatechange")}} Firefox OS specificThe {{domxref("MozMobileConnection.cardState")}} property changes value.
{{event("change")}}{{domxref("DeviceStorageChangeEvent")}}Firefox OS specificThis event is triggered each time a file is created, modified or deleted on a given storage area.
{{event("connectionInfoUpdate")}} Firefox OS specificThe informations about the signal strength and the link speed have been updated.
{{event("cfstatechange")}} Firefox OS specificThe call forwarding state changes.
{{event("datachange")}} Firefox OS specificThe {{domxref("MozMobileConnection.data")}} object changes values.
{{event("dataerror")}} Firefox OS specificThe {{domxref("MozMobileConnection.data")}} object receive an error from the RIL.
{{event("DOMMouseScroll")}}{{deprecated_inline}} Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)
dragdrop {{deprecated_inline}}DragEventMozilla specificAn element is dropped (use {{event("drop")}} instead).
dragexit {{deprecated_inline}}DragEventMozilla specificA drag operation is being ended(use {{event("dragend")}} instead).
draggesture {{deprecated_inline}}DragEventMozilla specificThe user starts dragging an element or text selection (use {{event("dragstart")}} instead).
{{event("icccardlockerror")}} Firefox OS specificthe {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.
{{event("iccinfochange")}} Firefox OS specificThe {{domxref("MozMobileConnection.iccInfo")}} object changes.
{{event("localized")}} Mozilla SpecificThe page has been localized using data-l10n-* attributes.
{{event("mousewheel")}}{{deprecated_inline}} IE inventedThe wheel button of a pointing device is rotated.
{{event("MozAudioAvailable")}}{{domxref("Event")}}Mozilla specificThe audio buffer is full and the corresponding raw samples are available.
MozBeforeResize {{obsolete_inline}} Mozilla specificA window is about to be resized.
{{event("mozbrowseractivitydone")}} Firefox OS Browser API-specificSent when some activity has been completed (complete description TBD.)
{{event("mozbrowserasyncscroll")}} Firefox OS Browser API-specificSent when the scroll position within a browser {{HTMLElement("iframe")}} changes.
{{event("mozbrowseraudioplaybackchange")}} Firefox OS Browser API-specificSent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.
{{event("mozbrowsercaretstatechanged")}} Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.
{{event("mozbrowserclose")}} Firefox OS Browser API-specificSent when window.close() is called within a browser {{HTMLElement("iframe")}}.
{{event("mozbrowsercontextmenu")}} Firefox OS Browser API-specificSent when a browser {{HTMLElement("iframe")}} try to open a context menu.
{{event("mozbrowserdocumentfirstpaint")}} Firefox OS Browser API-specificSent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.
{{event("mozbrowsererror")}} Firefox OS Browser API-specificSent when an error occured while trying to load a content within a browser iframe
{{event("mozbrowserfindchange")}} Firefox OS Browser API-specificSent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see HTMLIFrameElement search methods.)
{{event("mozbrowserfirstpaint")}} Firefox OS Browser API-specificSent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from about:blank.)
{{event("mozbrowsericonchange")}} Firefox OS Browser API-specificSent when the favicon of a browser iframe changes.
{{event("mozbrowserlocationchange")}} Firefox OS Browser API-specificSent when an browser iframe's location changes.
{{event("mozbrowserloadend")}} Firefox OS Browser API-specificSent when the browser iframe has finished loading all its assets.
{{event("mozbrowserloadstart")}} Firefox OS Browser API-specificSent when the browser iframe starts to load a new page.
{{event("mozbrowsermanifestchange")}} Firefox OS Browser API-specificSent when a the path to the app manifest changes, in the case of a browser {{HTMLElement("iframe")}} with an open web app embedded in it.
{{event("mozbrowsermetachange")}} Firefox OS Browser API-specificSent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.
{{event("mozbrowseropensearch")}} Firefox OS Browser API-specificSent when a link to a search engine is found.
{{event("mozbrowseropentab")}} Firefox OS Browser API-specificSent when a new tab is opened within a browser {{HTMLElement("iframe")}} as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.)
{{event("mozbrowseropenwindow")}} Firefox OS Browser API-specificSent when {{domxref("window.open()")}} is called within a browser iframe.
{{event("mozbrowserresize")}} Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}}'s window size has changed.
{{event("mozbrowserscroll")}} Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}} content scrolls.
{{event("mozbrowserscrollareachanged")}} Firefox OS Browser API-specificSent when the available scrolling area  in the browser {{HTMLElement("iframe")}} changes. This can occur on resize and when the page size changes (while loading for example.)
{{event("mozbrowserscrollviewchange")}} Firefox OS Browser API-specificSent when asynchronous scrolling (i.e. APCZ) starts or stops.
{{event("mozbrowsersecuritychange")}} Firefox OS Browser API-specificSent when the SSL state changes within a browser iframe.
{{event("mozbrowserselectionstatechanged")}} Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{event("mozbrowsercaretstatechanged")}} instead.
{{event("mozbrowsershowmodalprompt")}} Firefox OS Browser API-specificSent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe
{{event("mozbrowsertitlechange")}} Firefox OS Browser API-specificSent when the document.title changes within a browser iframe.
{{event("mozbrowserusernameandpasswordrequired")}} Firefox OS Browser API-specificSent when an HTTP authentification is requested.
{{event("mozbrowservisibilitychange")}} Firefox OS Browser API-specificSent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{domxref("HTMLIFrameElement.setVisible","setVisible()")}}.
{{event("MozGamepadButtonDown")}} To be specifiedA gamepad button is pressed down.
{{event("MozGamepadButtonUp")}} To be specifiedA gamepad button is released.
{{event("MozMousePixelScroll")}} {{deprecated_inline}} Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)
{{event("MozOrientation")}} {{deprecated_inline}} Mozilla specificFresh data is available from an orientation sensor (see deviceorientation).
{{event("MozScrolledAreaChanged")}}{{domxref("UIEvent")}}Mozilla specificThe document view has been scrolled or resized.
{{event("moztimechange")}} Mozilla specificThe time of the device has been changed.
MozTouchDown {{deprecated_inline}} Mozilla specificA touch point is placed on the touch surface (use touchstart instead).
MozTouchMove {{deprecated_inline}} Mozilla specificA touch point is moved along the touch surface (use touchmove instead).
MozTouchUp {{deprecated_inline}} Mozilla specificA touch point is removed from the touch surface (use touchend instead).
{{event("alerting")}}{{domxref("CallEvent")}}To be specifiedThe correspondent is being alerted (his/her phone is ringing).
{{event("busy")}}{{domxref("CallEvent")}}To be specifiedThe line of the correspondent is busy.
{{event("callschanged")}}{{domxref("CallEvent")}}To be specifiedA call has been added or removed from the list of current calls.
onconnected {{event("connected")}}{{domxref("CallEvent")}}To be specifiedA call has been connected.
{{event("connecting")}}{{domxref("CallEvent")}}To be specifiedA call is about to connect.
{{event("delivered")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been successfully delivered.
{{event("dialing")}}{{domxref("CallEvent")}}To be specifiedThe number of a correspondent has been dialed.
{{event("disabled")}} Firefox OS specificWifi has been disabled on the device.
{{event("disconnected")}}{{domxref("CallEvent")}}To be specifiedA call has been disconnected.
{{event("disconnecting")}}{{domxref("CallEvent")}}To be specifiedA call is about to disconnect.
{{event("enabled")}} Firefox OS specificWifi has been enabled on the device.
{{event("error_(Telephony)","error")}}{{domxref("CallEvent")}}To be specifiedAn error occurred.
{{event("held")}}{{domxref("CallEvent")}}To be specifiedA call has been held.
{{event("holding")}}{{domxref("CallEvent")}}To be specifiedA call is about to be held.
{{event("incoming")}}{{domxref("CallEvent")}}To be specifiedA call is being received.
{{event("received")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been received.
{{event("resuming")}}{{domxref("CallEvent")}}To be specifiedA call is about to resume.
{{event("sent")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been sent.
{{event("statechange")}}{{domxref("CallEvent")}}To be specifiedThe state of a call has changed.
{{event("statuschange")}} Firefox OS specificThe status of the Wifi connection changed.
{{event("overflow")}}{{domxref("UIEvent")}}Mozilla specificAn element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible).
{{event("smartcard-insert")}} Mozilla specificA smartcard has been inserted.
{{event("smartcard-remove")}} Mozilla specificA smartcard has been removed.
{{event("stkcommand")}} Firefox OS specificThe STK Proactive Command is issued from ICC.
{{event("stksessionend")}} Firefox OS specificThe STK Session is terminated by ICC.
text Mozilla SpecificA generic composition event occurred.
{{event("underflow")}}{{domxref("UIEvent")}}Mozilla specificAn element is no longer overflowed by its content (only works for elements styled with overflow != visible).
uploadprogress {{deprecated_inline}}{{domxref("ProgressEvent")}}Mozilla SpecificUpload is in progress (see {{event("progress")}}).
+

{{event("ussdreceived")}}

+ 		 Firefox OS specificA new USSD message is received
{{event("voicechange")}} Firefox OS specificThe {{domxref("MozMobileConnection.voice")}} object changes values.
+ +

Mozilla-specific events

+ +
+

Note: those events are never exposed to web content and can only be used in chrome content context.

+
+ +

XUL events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("broadcast")}} XULAn observer noticed a change to the attributes of a watched broadcaster.
{{event("CheckboxStateChange")}} XULThe state of a checkbox has been changed either by a user action or by a script (useful for accessibility).
close XULThe close button of the window has been clicked.
{{event("command")}} XULAn element has been activated.
{{event("commandupdate")}} XULA command update occurred on a commandset element.
{{event("DOMMenuItemActive")}} XULA menu or menuitem has been hovered or highlighted.
{{event("DOMMenuItemInactive")}} XULA menu or menuitem is no longer hovered or highlighted.
{{event("popuphidden")}}PopupEventXULA menupopup, panel or tooltip has been hidden.
{{event("popuphiding")}}PopupEventXULA menupopup, panel or tooltip is about to be hidden.
{{event("popupshowing")}}PopupEventXULA menupopup, panel or tooltip is about to become visible.
{{event("popupshown")}}PopupEventXULA menupopup, panel or tooltip has become visible.
{{event("RadioStateChange")}} XULThe state of a radio has been changed either by a user action or by a script (useful for accessibility).
{{event("ValueChange")}} XULThe value of an element has changed (a progress bar for example, useful for accessibility).
+ +

Add-on-specific events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
MozSwipeGesture Addons specificA touch point is swiped across the touch surface
MozMagnifyGestureStart Addons specificTwo touch points start to move away from each other.
MozMagnifyGestureUpdate Addons specificTwo touch points move away from each other (after a MozMagnifyGestureStart).
MozMagnifyGesture Addons specificTwo touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).
MozRotateGestureStart Addons specificTwo touch points start to rotate around a point.
MozRotateGestureUpdate Addons specificTwo touch points rotate around a point (after a MozRotateGestureStart).
MozRotateGesture Addons specificTwo touch points rotate around a point (after a sequence of MozRotateGestureUpdate).
MozTapGesture Addons specificTwo touch points are tapped on the touch surface.
MozPressTapGesture Addons specificA "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).
MozEdgeUIGesture Addons specificA touch point is swiped across the touch surface to invoke the edge UI (Win8 only).
MozAfterPaint Addons specificContent has been repainted.
DOMPopupBlocked Addons specificA popup has been blocked
DOMWindowCreated Addons specificA window has been created.
DOMWindowClose Addons specificA window is about to be closed.
DOMTitleChanged Addons specifcThe title of a window has changed.
DOMLinkAdded Addons specifcA link has been added a document.
DOMLinkRemoved Addons specifcA link has been removed inside from a document.
DOMMetaAdded Addons specificA meta element has been added to a document.
DOMMetaRemoved Addons specificA meta element has been removed from a document.
DOMWillOpenModalDialog Addons specificA modal dialog is about to open.
DOMModalDialogClosed Addons specificA modal dialog has been closed.
DOMAutoComplete Addons specificThe content of an element has been auto-completed.
DOMFrameContentLoaded Addons specificThe frame has finished loading (but not its dependent resources).
AlertActive Addons specificA notification element is shown.
AlertClose Addons specificA notification element is closed.
fullscreen Addons specificBrowser fullscreen mode has been entered or left.
sizemodechange Addons specificWindow has entered/left fullscreen mode, or has been minimized/unminimized.
MozEnteredDomFullscreen Addons specificDOM fullscreen mode has been entered.
SSWindowClosing Addons specificThe session store will stop tracking this window.
SSTabClosing Addons specificThe session store will stop tracking this tab.
SSTabRestoring Addons specificA tab is about to be restored.
SSTabRestored Addons specificA tab has been restored.
SSWindowStateReady Addons specificA window state has switched to "ready".
SSWindowStateBusy Addons specificA window state has switched to "busy".
tabviewsearchenabled Addons specificThe search feature of Panorama has been activated
tabviewsearchdisabled Addons specificThe search feature of Panorama has been deactivated
tabviewframeinitialized Addons specificThe frame container of Panorama has been initialized
tabviewshown Addons specificThe Panorama tab has been shown
tabviewhidden Addons specificThe Panorama tab has been hidden
TabOpen Addons specificA tab has been opened.
TabClose Addons specificA tab has been closed.
TabSelect Addons specificA tab has been selected.
TabShow Addons specificA tab has been shown.
TabHide Addons specificA tab has been hidden.
TabPinned Addons specificA tab has been pinned.
TabUnpinned Addons specificA tab has been unpinned.
+ +

Developer tool-specific events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
CssRuleViewRefreshed devtools specificThe "Rules" view of the style inspector has been updated.
CssRuleViewChanged devtools specificThe "Rules" view of the style inspector has been changed.
CssRuleViewCSSLinkClicked devtools specificA link to a CSS file has been clicked in the "Rules" view of the style inspector.
+ +

Categories

+ +

Animation events

+ +

{{event("animationend")}}, {{event("animationiteration")}}, {{event("animationstart")}}, {{event("beginEvent")}}, {{event("endEvent")}}, {{event("repeatEvent")}}

+ +

Battery events

+ +

{{event("chargingchange")}} {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} {{event("levelchange")}}

+ +

Call events

+ +

{{event("alerting")}}, {{event("busy")}}, {{event("callschanged")}} {{event("cfstatechange")}}, {{event("connected")}}, {{event("connecting")}}, {{event("dialing")}}, {{event("disconnected")}}, {{event("disconnecting")}}, {{event("error_(Telephony)","error")}}, {{event("held")}}, {{event("holding")}}, {{event("incoming")}}, {{event("resuming")}}, {{event("statechange")}}, {{event("voicechange")}}

+ +

CSS events

+ +

CssRuleViewRefreshed, CssRuleViewChanged, CssRuleViewCSSLinkClicked, {{event("transitionend")}}

+ +

Database events

+ +

abort, blocked, complete, {{event("error")}} (link), success, upgradeneeded, versionchange

+ +

Document events

+ +

DOMLinkAdded, DOMLinkRemoved, DOMMetaAdded, DOMMetaRemoved, DOMWillOpenModalDialog, DOMModalDialogClosed, {{event("unload")}}

+ +

DOM mutation events

+ +

DOMAttributeNameChanged, DOMAttrModified, DOMCharacterDataModified, {{event("DOMContentLoaded")}}, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified

+ +

Drag events

+ +

{{event("drag")}}, dragdrop, {{event("dragend")}}, {{event("dragenter")}}, dragexit, draggesture, {{event("dragleave")}}, {{event("dragover")}}, {{event("dragstart")}}, {{event("drop")}}

+ +

Element events

+ +

{{event("invalid")}}, {{event("overflow")}}, {{event("underflow")}}, DOMAutoComplete, {{event("command")}}, {{event("commandupdate")}}

+ +

Focus events

+ +

{{event("blur")}}, {{event("change")}}, DOMFocusIn, DOMFocusOut, {{event("focus")}}, {{event("focusin")}}, {{event("focusout")}}

+ +

Form events

+ +

{{event("reset")}}, {{event("submit")}}

+ +

Frame events

+ +

{{event("mozbrowserclose")}}, {{event("mozbrowsercontextmenu")}}, {{event("mozbrowsererror")}}, {{event("mozbrowsericonchange")}}, {{event("mozbrowserlocationchange")}}, {{event("mozbrowserloadend")}}, {{event("mozbrowserloadstart")}}, {{event("mozbrowseropenwindow")}}, {{event("mozbrowsersecuritychange")}}, {{event("mozbrowsershowmodalprompt")}} (link), {{event("mozbrowsertitlechange")}}, DOMFrameContentLoaded

+ +

Input device events

+ +

{{event("click")}}, {{event("contextmenu")}}, {{event("DOMMouseScroll")}}, {{event("dblclick")}}, {{event("gamepadconnected")}}, {{event("gamepaddisconnected")}}, {{event("keydown")}}, {{event("keypress")}}, {{event("keyup")}}, {{event("MozGamepadButtonDown")}}, {{event("MozGamepadButtonUp")}}, {{event("mousedown")}}, {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mousemove")}}, {{event("mouseout")}}, {{event("mouseover")}}, {{event("mouseup")}}, {{event("mousewheel")}}, {{event("MozMousePixelScroll")}}, {{event("pointerlockchange")}}, {{event("pointerlockerror")}},{{event("wheel")}}

+ +

Media events

+ +

{{event("audioprocess")}}, {{event("canplay")}}, {{event("canplaythrough")}}, {{event("durationchange")}}, {{event("emptied")}}, {{event("ended")}}, {{event("ended_(Web_Audio)", "ended")}}, {{event("loadeddata")}}, {{event("loadedmetadata")}}, {{event("MozAudioAvailable")}}, {{event("pause")}}, {{event("play")}}, {{event("playing")}}, {{event("ratechange")}}, {{event("seeked")}}, {{event("seeking")}}, {{event("stalled")}}, {{event("suspend")}}, {{event("timeupdate")}}, {{event("volumechange")}}, {{event("waiting")}}, {{event("complete")}}

+ + + +

{{event("DOMMenuItemActive")}}, {{event("DOMMenuItemInactive")}}

+ +

Network events

+ +

{{event("datachange")}}, {{event("dataerror")}}, {{event("disabled")}}, {{event("enabled")}}, {{event("offline")}}, {{event("online")}}, {{event("statuschange")}}, {{event("connectionInfoUpdate")}},

+ +

Notification events

+ +

AlertActive, AlertClose

+ +

Pointer events

+ +

{{event("pointerover")}}, {{event("pointerenter")}}, {{event("pointerdown")}}, {{event("pointermove")}}, {{event("pointerup")}}, {{event("pointercancel")}}, {{event("pointerout")}}, {{event("pointerleave")}}, {{event("gotpointercapture")}}, {{event("lostpointercapture")}}

+ + + +

{{event("popuphidden")}}, {{event("popuphiding")}}, {{event("popupshowing")}}, {{event("popupshown")}}, DOMPopupBlocked

+ +

Printing events

+ +

{{event("afterprint")}}, {{event("beforeprint")}}

+ +

Progress events

+ +

abort, {{event("error")}}, load, {{event("loadend")}}, {{event("loadstart")}}, {{event("progress")}}, progress, {{event("timeout")}}, uploadprogress

+ +

Resource events

+ +

{{event("abort")}}, {{event("cached")}}, {{event("error")}}, {{event("load")}}

+ +

Script events

+ +

{{event("afterscriptexecute")}}, {{event("beforescriptexecute")}}

+ +

Sensor events

+ +

{{event("compassneedscalibration")}}, {{event("devicelight")}}, {{event("devicemotion")}}, {{event("deviceorientation")}}, {{event("deviceproximity")}}, {{event("MozOrientation")}}, {{event("orientationchange")}}, {{event("userproximity")}}

+ +

Session history events

+ +

{{event("pagehide")}}, {{event("pageshow")}}, {{event("popstate")}}

+ +

Smartcard events

+ +

{{event("icccardlockerror")}}, {{event("iccinfochange")}}, {{event("smartcard-insert")}}, {{event("smartcard-remove")}}, {{event("stkcommand")}}, {{event("stksessionend")}}, {{event("cardstatechange")}}

+ +

SMS and USSD events

+ +

{{event("delivered")}}, {{event("received")}}, {{event("sent")}}, {{event("ussdreceived")}}

+ +

Storage events

+ +

{{event("change")}} (see {{anch("Non-standard events")}}), {{event("storage")}}

+ +

SVG events

+ +

{{event("SVGAbort")}}, {{event("SVGError")}}, {{event("SVGLoad")}}, {{event("SVGResize")}}, {{event("SVGScroll")}}, {{event("SVGUnload")}}, {{event("SVGZoom")}}

+ +

Tab events

+ +

tabviewsearchenabled, tabviewsearchdisabled, tabviewframeinitialized, tabviewshown, tabviewhidden, TabOpen, TabClose, TabSelect, TabShow, TabHide, TabPinned, TabUnpinned, SSTabClosing, SSTabRestoring, SSTabRestored, {{event("visibilitychange")}}

+ +

Text events

+ +

{{event("compositionend")}}, {{event("compositionstart")}}, {{event("compositionupdate")}}, {{event("copy")}}, {{event("cut")}}, {{event("paste")}}, {{event("select")}}, text

+ +

Touch events

+ +

MozEdgeUIGesture, MozMagnifyGesture, MozMagnifyGestureStart, MozMagnifyGestureUpdate, MozPressTapGesture, MozRotateGesture, MozRotateGestureStart, MozRotateGestureUpdate, MozSwipeGesture, MozTapGesture, MozTouchDown, MozTouchMove, MozTouchUp, {{event("touchcancel")}}, {{event("touchend")}}, {{event("touchenter")}}, {{event("touchleave")}}, {{event("touchmove")}}, {{event("touchstart")}}

+ +

Update events

+ +

{{event("checking")}}, {{event("downloading")}}, {{event("error")}}, {{event("noupdate")}}, {{event("obsolete")}}, {{event("updateready")}}

+ +

Value change events

+ +

{{event("broadcast")}}, {{event("CheckboxStateChange")}}, {{event("hashchange")}}, {{event("input")}}, {{event("RadioStateChange")}}, {{event("readystatechange")}}, {{event("ValueChange")}}

+ +

View events

+ +

fullscreen, {{event("fullscreenchange")}}, {{event("fullscreenerror")}}, MozEnteredDomFullscreen, {{event("MozScrolledAreaChanged")}}, {{event("resize")}}, {{event("scroll")}}, sizemodechange

+ +

Websocket events

+ +

close, {{event("error")}}, message, open

+ +

Window events

+ +

DOMWindowCreated, DOMWindowClose, DOMTitleChanged, MozBeforeResize {{obsolete_inline}}, SSWindowClosing, SSWindowStateReady, SSWindowStateBusy, close

+ +

Uncategorized events

+ +

{{event("beforeunload")}}, {{event("localized")}}, message, message, message, MozAfterPaint, {{event("moztimechange")}}, open, {{event("show")}}

+ +

See also

+ + diff --git a/files/it/web/events/load/index.html b/files/it/web/events/load/index.html new file mode 100644 index 0000000000..2939f32c27 --- /dev/null +++ b/files/it/web/events/load/index.html @@ -0,0 +1,123 @@ +--- +title: load +slug: Web/Events/load +tags: + - CompatibilitàBrowser + - Evento +translation_of: Web/API/Window/load_event +--- +

L'evento load si attiva quando una risorsa e le sue risorse dipendenti hanno completato il caricamento.

+ +

Esempi

+ +

Window

+ +
<script>
+  window.addEventListener("load", function(event) {
+    console.log("Tutte le risorse hanno terminato il caricamento!");
+  });
+</script>
+ +

L'elemento script

+ +
<script>
+  var script = document.createElement("script");
+  script.addEventListener("load", function(event) {
+    console.log("Lo script ha terminato il caricamento e l'esecuzione");
+  });
+  script.src = "http://example.com/example.js";
+  script.async = true;
+  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
+</script>
+ +

Info generali

+ +
+
Specifica
+
DOM L3
+
Interfaccia
+
UIEvent
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Window, Document, Element
+
Azione predefinita
+
Nessuna.
+
+ +

Proprietà

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ProprietàTipoDescrizione
target {{readonlyInline}}{{domxref("EventTarget")}}Il target dell'evento (l'obiettivo più in alto nell'albero del DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Il tipo di evento.
bubbles {{readonlyInline}}{{domxref("Boolean")}}Se l'evento normalmente bolle o no.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Se l'evento è cancellabile o meno.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView", "document.defaultView")}} (window del documento)
detail {{readonlyInline}}long (float)0
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('UI Events', '#event-type-load', 'load')}}{{Spec2('UI Events')}} 
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}{{Spec2('HTML WHATWG')}}Questo collega alla sezione nei passaggi che vengono eseguiti alla fine del caricamento di un documento. gli eventi di "caricamento" vengono attivati anche a molti elementi. E nota che ci sono molti punti nelle specifiche che fanno riferimento a cose che possono "ritardare l'evento load".
+ +

Eventi correlati

+ + diff --git a/files/it/web/guide/ajax/index.html b/files/it/web/guide/ajax/index.html new file mode 100644 index 0000000000..5f8b87ee74 --- /dev/null +++ b/files/it/web/guide/ajax/index.html @@ -0,0 +1,57 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX + - Tutte_le_categorie +translation_of: Web/Guide/AJAX +--- +

+

+
AJAX:Iniziare
Una introduzione ad AJAX.
+

Asynchronous JavaScript and XML (AJAX) non è di per sè una tecnologia, ma è un termine che descrive un "nuovo" approccio all'utilizzo di diverse tecnologie esistenti, compresi: HTML o XHTML, CSS, JavaScript, DOM, XML, XSLT e l'oggetto XMLHttpRequest. Grazie all'utilizzo di queste tecnologie in combinazione con il modello AJAX, le applicazioni web possono eseguire aggiornamenti rapidi e incrementali dell'interfaccia utente senza ricaricare nel browser l'intera pagina. Questo rende l'applicazione più performante e più reattiva alle azioni dell'utente.
+Il W3C ha pubblicato una bozza di standard per l'oggetto XMLHttpRequest. +

+ + + + +
+

Documentazione

+
AJAX:Iniziare +
Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per cominciare. +
+
Compatibilità di AJAX +
Quali browser supportano AJAX? +
+
Ajax: A New Approach to Web Applications (EN) +
Jesse James Garrett, di adaptive path, ha scritto questa introduzione ad AJAX nel febbraio 2005. +
+
A Simpler Ajax Path (EN) +
"E' facile avvalersi dell'oggetto XMLHttpRequest per costruire un'applicazione web che si comporti come un'applicazione desktop utilizzando però strumenti come i web forms per ricevere input dagli utenti." +
+
Fixing the Back Button and Enabling Bookmarking for AJAX Apps (EN) +
Mike Stenhouse ha realizzato questo articolo che esamina nel dettaglio alcuni metodi che è possibile utilizzare per risolvere i problemi relativi al bottone "Indietro" e ai Bookmark nelle applicazioni AJAX. +
+
Ajax Mistakes (EN) +
Alex Bosworth ha scritto questo articolo che evidenzia alcuni errori comuni degli sviluppatori AJAX.
+		 +

Strumenti

+ +

Argomenti correlati

+ +
+

Interwiki Language Links +

{{ languages( { "ca": "ca/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX" } ) }} diff --git a/files/it/web/guide/ajax/iniziare/index.html b/files/it/web/guide/ajax/iniziare/index.html new file mode 100644 index 0000000000..f473f64d1e --- /dev/null +++ b/files/it/web/guide/ajax/iniziare/index.html @@ -0,0 +1,252 @@ +--- +title: Iniziare +slug: Web/Guide/AJAX/Iniziare +tags: + - AJAX + - Tutte_le_categorie +translation_of: Web/Guide/AJAX/Getting_Started +--- +

 

+ +

Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per iniziare.

+ +

Cos'è AJAX?

+ +

AJAX (Asynchronous JavaScript and XML) è un termine coniato recentemente per descrivere due utili funzionalità che sono presenti nei browser da anni, ma che sono state sottovalutate dalla maggioranza degli sviluppatori web fino a quando, di recente, alcune applicazioni come Gmail, Google suggest e Google Maps le hanno portate in auge.

+ +

Le funzionalità di cui stiamo parlando sono:

+ + + +

Passo 1 – Dì "per favore", o Come fare una richiesta HTTP

+ +

Per effettuare una richiesta HTTP al server utilizzando JavaScript, si utilizza un'istanza di una classe che fornisce detta funzionalità. Tale classe è stata introdotta originariamente in Internet Explorer come oggetto ActiveX e si chiamava XMLHTTP. Successivamente Mozilla, Safari e altri browser hanno implementato la classe XMLHttpRequest, che supporta gli stessi metodi e le stesse proprietà della classe di Microsoft.

+ +

Il risultato è che per creare un'istanza (oggetto) da tale classe che funzioni sui diversi browser, occorre scrivere un codice simile al seguente:

+ +
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    http_request = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+ +

(Per scopi illustrativi, il codice qui riportato è una versione leggermente semplificata del codice generalmente utilizzato per creare un'istanza XMLHTTP. Per un esempio più pratico, si veda il Passo 3 di questo articolo)

+ +

Certe versioni di alcuni browser della famiglia Mozilla, non si comportano correttamente nel caso in cui la risposta del server non contiene un'intestazione HTTP mime-type. Per ovviare a questo problema, è possibile utilizzare un metodo aggiuntive per sovrascrivere l'header inviato dal server, nel caso non sia presente o non sia impostato a text/xml.

+ +
http_request = new XMLHttpRequest();
+http_request.overrideMimeType('text/xml');
+
+ +

Dopodichè occorre decidere cosa fare con la risposta inviata dal server. Quindi bisogna dire all'oggetto XMLHttpRequest quale funzione JavaScript elaborerà il codice XML. Questo si fa impostando la proprietà onreadystatechange dell'oggetto con il nome della funzione JavaScript, in questo modo:

+ +

http_request.onreadystatechange = nomeFunzione;

+ +

Si noti che non ci sono parentesi dopo il nome della funzione e non viene passato alcun parametro, perchè si sta semplicemente assegnando un riferimento alla funzione, non la si sta ancora chiamando. Inoltre, invece di passare il nome di una funzione, si potrebbe utilizzare la tecnica JavaScript di definire funzioni "al volo" e di definire le azioni che elaboreranno la risposta XML, in questo modo:

+ +
http_request.onreadystatechange = function(){
+    // azioni da eseguire...
+};
+
+ +

Dopo aver dichiarato ciò che accadrà quando si riceverà la risposta dal server, occorre inviare la richiesta. Bisogna chiamare i metodi open() e send() della classe che esegue le richieste, in questo modo:

+ +
http_request.open('GET', 'http://www.esempio.org/qualsiasi.file', true);
+http_request.send(null);
+
+ + + +

Il parametro del metodo send() è costituito dai dati che si vogliono inviare al server se la richiesta è di tipo POST. I dati vengono passati sotto forma di querystring, così:

+ +

nome1=valore1&nome2=valore2&ecc=ecc

+ +

Si noti che se si desidera inviare i dati come POST, occorre modificare il tipo MIME della richiesta con la riga seguente:

+ +
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+ +

In caso contrario, il server ignorerà la richiesta.

+ +

Step 2 – "Via!" o Come gestire la risposta del server

+ +

Come si è detto, all'atto di inviare la richiesta, si è fornito il nome della funzione JavaScript che deve elaborare la risposta.

+ +

http_request.onreadystatechange = nomeFunzione;

+ +

Ma cosa dovrebbe fare questa funzione? Primo, la funzione deve controllare lo stato della richiesta. Se lo stato ha un valore di 4, significa che la risposta è stata ricevuta per intero e si può continuare l'elaborazione:

+ +

 

+ +
if (http_request.readyState == 4) {
+    // tutto a posto, la risposta è stata ricevuta
+} else {
+    // non sono ancora pronto
+}
+
+ +

Ecco la lista completa dei possibili valori di readyState:

+ + + +

(Fonte) (1)

+ +

Bisognerà poi controllare il codice di stato della risposta HTTP. Tutti i codici possibili sono elencati nel sito del W3C. Per i nostri scopi, ci interessa soltanto il codice 200 OK.

+ +
if (http_request.status == 200) {
+    // perfetto!
+} else {
+    // c'è stato un problema nella richiesta,
+    // per esempio un codice di errore 404 (Not Found)
+    // o 500 (Internal Server Error)
+}
+
+ +

Una volta controllati lo stato della richiesta e il codice di stato HTTP della risposta, sarà lo sviluppatore a decidere cosa desidera fare con i dati ricevuti dal server. Per accedere ad essi, vi sono due possibilità:

+ + + +

Passo 3 - "Tutti insieme ora!", Un semplice esempio

+ +

Vediamo ora tutti gli elementi esaminati finora combinati insieme. Il seguente JavaScript richiede un documento HTML (test.html), che contiene il testo "Sono un test.", e farà un alert() coi contenuti di questo file.

+ +
<script type="text/javascript" language="javascript">
+
+
+
+    function eseguiRichiesta(url) {
+
+        var http_request = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari,...
+            http_request = new XMLHttpRequest();
+            if (http_request.overrideMimeType) {
+                http_request.overrideMimeType('text/xml');
+                // Vedi note sotto
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                http_request = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!http_request) {
+            alert('Giving up :( Non riesco a creare una istanza XMLHTTP');
+            return false;
+        }
+        http_request.onreadystatechange = function() { alertContents(http_request); };
+        http_request.open('GET', url, true);
+        http_request.send(null);
+
+    }
+
+    function alertContents(http_request) {
+
+        if (http_request.readyState == 4) {
+            if (http_request.status == 200) {
+                alert(http_request.responseText);
+            } else {
+                alert('Si è verificato un problema con la richiesta');
+            }
+        }
+
+    }
+</script>
+<span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="eseguiRichiesta('test.html')">
+        Fai una richiesta
+</span>
+
+ +

In questo esempio:

+ + + +

Si può provare questo esempio qui e si può leggere il file "test.html" qui.

+ +

Nota: La riga di codice http_request.overrideMimeType('text/xml'); causa degli errori nella Console JavaScript di Firefox 1.5 o superiore nel caso che la pagina chiamata non sia costituita da XML ben formato (come in questo caso). Questo comportamento è corretto ed è documentato qui: https://bugzilla.mozilla.org/show_bug.cgi?id=311724 - l'articolo verrà rivisto per correggere questo errore.

+ +

Nota 2: se si invia una richiesta con una porzione di codice che restituisce XML e non un file XML statico, bisogna impostare alcune intestazioni nella risposta perchè la pagina funzioni anche su Internet Explorer. Se non si imposta l'intestazione Content-Type: application/xml, IE lancia un errore JavaScript 'Object Expected' appena si cerca di accedere a un elemento XML. Se non si imposta l'intestazione Cache-Control: no-cache, il browser registra la risposta nella cache e non rieseguirà più la richiesta, il che fa impazzire molti sviluppatori in fase di debugging.

+ +

Nota 3: se la variabile http_request è globale, se vi sono altre funzioni che chiamano makeRequest(), possono sovrasciversi a vicenda. Per evitare questo problema, occorre dichiarare questa variabile come locale e passarla alla funzione alertContent().

+ +

Nota 4: nel registrare la funzione callback per onreadystatechange non è possibile passare alcun argomento:

+ +
http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (richiesta simultanea)
+http_request.onreadystatechange = alertContents(http_request); //2 (non funziona)
+http_request.onreadystatechange = alertContents;  //3 (variabile globale)
+
+ +

Il metodo 1 permette di elaborare diverse richieste simultaneamente. Il metodo 2 non funziona. Il metodo 3 è da utilizzare se http_request è una variabile globale.

+ +

Passo 4 - "Gli X-Files", o Elaborare la risposta XML

+ +

Nell'esempio precedente, dopo che la risposta HTTP è stata ricevuta si è utilizzata la proprietà reponseText dell'oggetto richiesta, che conteneva i contenuti del file <tt>test.html</tt>. Proveremo ora a utilizzare la proprietà responseXML.

+ +

Prima di tutto, occorre creare un documento XML valido che verrà chiamato in seguito. Il documento (<tt>test.xml</tt>) contiene quanto segue:

+ +
<?xml version="1.0" ?>
+<root>
+    Sono un test.
+</root>
+
+ +

Nello script occorre cambiare soltanto la riga seguente:

+ +
...
+onclick="eseguiRichiesta('test.xml')">
+...
+
+ +

In alertContents(), bisogna poi sostituire la riga alert(http_request.responseText); con:

+ +
var xmldoc = http_request.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+ +

Questo codice prende l'oggetto XMLDocument fornito da responseXML e utilizza i metodi DOM per accedere ai dati contenuti nel documento XML. Si può vedere test.xml qui. Si può vedere in azione questa versione dello script qui.

+ +

Per ulteriori dettagli sui metodi DOM, si vedano i documenti sull'Implementazione DOM di Mozilla.

+ +
+

La bozza di standard del W3C indica i seguenti valori per la proprietà readystate:

+ + + +

Fonte

+ +

{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar" } ) }}

diff --git a/files/it/web/guide/api/index.html b/files/it/web/guide/api/index.html new file mode 100644 index 0000000000..3f571c0cb8 --- /dev/null +++ b/files/it/web/guide/api/index.html @@ -0,0 +1,26 @@ +--- +title: Guide to Web APIs +slug: Web/Guide/API +tags: + - API + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide/API +--- +

Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.

+ + +

Web APIs from A to Z

+ +

{{ListGroups}}

+ +

See also

+ + diff --git a/files/it/web/guide/css/index.html b/files/it/web/guide/css/index.html new file mode 100644 index 0000000000..20621b40b0 --- /dev/null +++ b/files/it/web/guide/css/index.html @@ -0,0 +1,23 @@ +--- +title: CSS developer guide +slug: Web/Guide/CSS +tags: + - CSS + - Guide + - Landing + - NeedsTranslation + - TopicStub +translation_of: Learn/CSS +--- +

{{draft}}

+

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or other markup languages such as SVG. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media. The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.

+

CSS is one of the core languages of the open Web and has a standardized W3C specification.

+

{{LandingPageListSubpages}}

+

Pages elsewhere

+

Here are other pages related to CSS that should be linked to from here.

+

See also

+ diff --git a/files/it/web/guide/graphics/index.html b/files/it/web/guide/graphics/index.html new file mode 100644 index 0000000000..7221d89ec7 --- /dev/null +++ b/files/it/web/guide/graphics/index.html @@ -0,0 +1,58 @@ +--- +title: Graphics on the Web +slug: Web/Guide/Graphics +tags: + - 2D + - 3D + - Canvas + - Grafica + - HTML5 + - SVG + - WebGL + - WebRTC +translation_of: Web/Guide/Graphics +--- +

I moderni Siti Web e Applicazioni, spesso necessitano di mostrare una grafica. Mostrare delle immagini statiche, può essere fatto facilmente usando l'elemento immagine {{HTMLElement("img")}} , Oppure settando lo sfondo di elementi HTML usando la proprietà dello sfondo css {{cssxref("background-image")}}. Spesso è possibile creare anche grafici "al volo", oppure manipolare immagini dopo averle fatte.Questi articoli forniscono infomazioni su come si può ottenere questo risultato

+ +
+
+

Grafiche 2D

+ +
+
Canvas
+
L'elemento {{HTMLElement("canvas")}} fornisce APIs per disegnare grafica 2D usando JavaScript.
+
SVG
+
La Grafica a Vettori Scalabile (SVG) consente di usare linee, curve, e altre forme geometriche per realizzare grafica. Evitando l'utilizzo di bitmaps, potete creare immagini che scalano in modo pulito ad ogni dimensione.
+
+ +

 

+ +

 

+ +

 

+ +

 

+ +

View All...

+
+ +
+

Grafiche 3D

+ +
+
WebGL
+
Una guida per come iniziare con WebGL, L' API di grafica 3D per il Web. Questa tecnologia consente un uso standard delle OpenGL.Ad esempio un contenuto Web
+
+ +

Video

+ +
+
Usare  l'audio e il video HTML5
+
Incorporare un video in un documento HTML e controllare la riproduzione.
+
WebRTC
+
L'acronimo RTC in WebRTC sta per Real-Time Communications, technology (Comunicazioni in Tempo Reali) che abilitano lo streaming audio/video e la condivisione di dati tra i browser e i clienti (peers).
+
+
+
+ +

 

diff --git a/files/it/web/guide/html/categorie_di_contenuto/index.html b/files/it/web/guide/html/categorie_di_contenuto/index.html new file mode 100644 index 0000000000..94eae32320 --- /dev/null +++ b/files/it/web/guide/html/categorie_di_contenuto/index.html @@ -0,0 +1,141 @@ +--- +title: Categorie di contenuto +slug: Web/Guide/HTML/Categorie_di_contenuto +translation_of: Web/Guide/HTML/Content_categories +--- +

Ciascun elemento HTML deve rispettare le regole che definiscono che tipo di contenuto può avere. Queste regole sono raggruppate in modelli di contenuto comuni a diversi elementi. Ogni elemento HTML appartiene a nessuno, uno, o diversi modelli di contenuto, ognuno dei quali possiede regole che devono essere seguite in un documento conforme HTML.

+ +

Vi sono tre tipi di categorie di contenuto:

+ + + +
Content_categories_venn.png
+ +

Categorie di contenuto principale

+ +

Contenuto di Metadati

+ +

Gli elementi appartenenti alla categoria dei metadati modificano la presentazione o il comportamento del resto del documento, impostano collegamenti ad altri documenti, o comunicano altre informazioni non in linea.

+ +

Gli elementi che appartengono a questa categoria sono {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} e {{HTMLElement("title")}}.

+ +

Contenuto di flusso

+ +

Gli elementi che appartengono alla catogoria dei contenuti di flusso tipicamente contengono testo o altri contenuti. Essi sono: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e Text.

+ +

Pochi altri elementi appartengono a questa categoria, ma solo in determinale condizioni:

+ + + +

Contenuto di sezione

+ +

Gli elementi che appartengono ai modelli di contenuti di sezione creano una sezione nell'attuale contorno che definisce gli'ambiti degli elementi  {{HTMLElement("header")}} , degli elementi {{HTMLElement("footer")}} , e dei contenuti di intestazione.

+ +

Elementi appartenenti a questa categoria sono {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}. 

+ +
+

Nota: non confondere questo modello di contenuto con la categoria  sezione radice , che isola il suo contenuto dal regolare contorno.

+
+ +

Contenuto di intestazione

+ +

Il contenuto di intestazione definisce il titolo della sezione, se contrassegnato da un esplicito elemento di contenuto di intestazione  o implicitamente definito da un contenuto di intestazione.

+ +

Elementi appartenenti a questa categoria sono {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.

+ +
+

Nota: Consideralo possibilmente come un contenuto di intestazione, l' {{HTMLElement("header")}} non è un contenuto di intestazione.

+
+ +

Contenuto di enunciazione

+ +

Il contenuto di enunciazione definisce il testo e la marcatura che essa contiene.Si appropria del contenuto di Enunciazione dei paragrafi.

+ +

Elementi appartenenti a questa categoria sono {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e il puro text (che non consiste soltanto nello spazio bianco dei caratteri).

+ +

Molte altri elementi appartengono da questa categoria,ma solo se vengono soddisfatte delle specifiche condizioni:

+ + + +

Contenuto integrato

+ +

Il contenuto integrato importa un'altra risorsa o inserisce contenuto da un'altro linguaggio di marcatura o un namespace nel documento.Elementi che appartengono a questa categoria includono: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("svg")}}, {{HTMLElement("video")}}.

+ +

Contenuto interattivo

+ +

Il contenuto interattivo include elementi che sono speficatamente progettati per l'interazione dell'utente. Elementi che provengono da questa categoria includono: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+ Alcuni elementi appartengono a questa categoria solo sotto  specifiche condizioni:

+ + + +

Contenuto modulo-associato

+ +

Il contento modulo-associato comprende elementi che ha un modulo beneficiario ,mostrato attraverso l'attributo form.Un beneficiario di un modulo  è o l'elemento contenente {{HTMLElement("form")}} o è l' elemento che ha id specificato nell'attributo form.

+ + + +

 Questa categoria contiene diverse altre sotto-categorie:

+ +
+
elencati
+
Elementi che sono elencati nel elementi.modulo ed il fieldset.Collezioni di elementi IDL. Contiene{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
l'abilità labelable
+
Elementi che possono essere associati con elementi {{HTMLElement("label")}}. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
Dati Inviabili tramite un form
+
Elementi che possono essere usati per costruire il modulo dati quando il modulo é stato inviato. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
reset dei dati di un form
+
Elementi che possono essere usati per portare il form al reset delle impostazioni originarie.Contiene {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
+ +

Modello di contenuto trasparente

+ +

Se un elemento ha un modello di contenuto trasparente,allora i suoi contenuti possono essere strutturati come quelli validi in  HTML5, perfino se l'elemento trasparente era stato rimosso e rimpiazzato da elemento figlio.

+ +

Per esempio, gli elementi {{HTMLElement("del")}} e {{HTMLELement("ins")}}sono trasparenti:

+ +
<p>Tratteniamo queste verità per essere<del><em>consacrate &amp; innegabili</em></del> <ins>chiare</ins>.</p>
+
+ +

Se quegli elementi verranno rimossi, questo frammento potrebbe essere ancora un valido HTML (anche se non in corretto italiano).

+ +
<p>Tratteniamo queste verità per essere<del><em>consacrate &amp; innegabili</em></del> <ins>chiare</ins>.</p>
+ +

Altri modelli di contenuto

+ +

Sezione radice.

diff --git a/files/it/web/guide/html/editable_content/index.html b/files/it/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..e878289a2c --- /dev/null +++ b/files/it/web/guide/html/editable_content/index.html @@ -0,0 +1,216 @@ +--- +title: Making content editable +slug: Web/Guide/HTML/Editable_content +translation_of: Web/Guide/HTML/Editable_content +--- +

Inprogress! In HTML, any element can be editable. By using some JavaScript event handlers, you can transform your web page into a full and fast rich text editor. This article provides some information about this functionality.

+ +

How does it work?

+ +

All you have to do is set the {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.

+ +

Here's a simple example which creates a {{HTMLElement("div")}} element whose contents the user can edit.

+ +
<div contenteditable="true">
+  This text can be edited by the user.
+</div>
+ +

Here's the above HTML in action:

+ +

{{ EmbedLiveSample('How_does_it_work') }}

+ +

Executing commands

+ +

When an HTML element has contenteditable set to true, the {{ domxref("document.execCommand()") }} method is made available. This lets you run commands to manipulate the contents of the editable region. Most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). When using contentEditable, calling execCommand() will affect the currently active editable element.

+ +

Differences in markup generation

+ +

Use of contenteditable across different browsers has been painful for a long time because of the differences in generated markup between browsers. For example, even something as simple as what happens when you press Enter/Return to create a new line of text inside an editable element was handled differently across the major browsers (Firefox inserted {{htmlelement("br")}} elements, IE/Opera used {{htmlelement("p")}}, Chrome/Safari used {{htmlelement("div")}}).

+ +

Fortunately, in modern browsers things are somewhat more consistent. As of Firefox 55, Firefox has been updated to wrap the separate lines in {{htmlelement("div")}} elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.

+ +

Try it out in the above example.

+ +
+

Note: Internet Explorer, which is no longer being developed, uses {{htmlelement("p")}} elements instead of <div>.

+
+ +

If you want to use a different paragraph separator, the above browsers all support {{domxref("document.execCommand")}}, which provides a DefaultParagraphSeparator command to allow you to change it. For example, to use {{htmlelement("p")}} elements:

+ +
document.execCommand("DefaultParagraphSeparator", false, "p");
+ +

Security

+ +

For security reasons, Firefox doesn't let JavaScript code use clipboard related features (copy, paste, etc.) by default. You can enable them by setting the preferences shown below using about:config:

+ +
user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+ +

Example: A simple but complete rich text editor

+ +
+
<!doctype html>
+<html>
+<head>
+<title>Rich Text Editor</title>
+<script type="text/javascript">
+var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchMode.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchMode.checked) { return true ; }
+  alert("Uncheck \"Show HTML\".");
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
+  oPrntWin.document.close();
+}
+</script>
+<style type="text/css">
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; }
+#textBox {
+  width: 540px;
+  height: 200px;
+  border: 1px #000000 solid;
+  padding: 12px;
+  overflow: scroll;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  min-width: 498px;
+  min-height: 200px;
+}
+#editMode label { cursor: pointer; }
+</style>
+</head>
+<body onload="initDoc();">
+<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
+<input type="hidden" name="myDoc">
+<div id="toolBar1">
+<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option selected>- formatting -</option>
+<option value="h1">Title 1 &lt;h1&gt;</option>
+<option value="h2">Title 2 &lt;h2&gt;</option>
+<option value="h3">Title 3 &lt;h3&gt;</option>
+<option value="h4">Title 4 &lt;h4&gt;</option>
+<option value="h5">Title 5 &lt;h5&gt;</option>
+<option value="h6">Subtitle &lt;h6&gt;</option>
+<option value="p">Paragraph &lt;p&gt;</option>
+<option value="pre">Preformatted &lt;pre&gt;</option>
+</select>
+<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- font -</option>
+<option>Arial</option>
+<option>Arial Black</option>
+<option>Courier New</option>
+<option>Times New Roman</option>
+</select>
+<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- size -</option>
+<option value="1">Very small</option>
+<option value="2">A bit small</option>
+<option value="3">Normal</option>
+<option value="4">Medium-large</option>
+<option value="5">Big</option>
+<option value="6">Very big</option>
+<option value="7">Maximum</option>
+</select>
+<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- color -</option>
+<option value="red">Red</option>
+<option value="blue">Blue</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- background -</option>
+<option value="red">Red</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+</div>
+<div id="toolBar2">
+<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" />
+<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
+<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" />
+<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" />
+<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==">
+<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
+<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
+<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
+<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
+<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
+<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
+<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" />
+<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" />
+<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" />
+<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" />
+<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" />
+<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" />
+<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" />
+<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" />
+<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" />
+</div>
+<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
+<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
+<p><input type="submit" value="Send" /></p>
+</form>
+</body>
+</html>
+
+
+ +
Note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
+ +

See also

+ + diff --git a/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html b/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html new file mode 100644 index 0000000000..0beccd9e00 --- /dev/null +++ b/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html @@ -0,0 +1,420 @@ +--- +title: Rich-Text Editing in Mozilla +slug: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +--- +

Introduzione

+ +

Mozilla 1.3 introduce un'implementazione della caratteristica designMode di Microsoft® Internet Explorer. In Mozilla 1.3, il supporto al rich-text editing supporta la caratteristica designMode che trasforma i documenti HTML in editor rich-text. Partendo da Firefox 3, Mozilla supporta anche l'attributo contentEditable di Internet Explorer che permette a qualsiasi elemento di diventare un elemento modificabile o non (la seconda caratteristica viene usata per prevenire cambiamenti ad un elemento che non deve essere modificato).

+ +

Impostare il Rich-Text Editing

+ +

Il Rich-text editing viene inizializzato tramite la proprietà designMode di un documento ad "On", come un documento all'interno di un iframe. Una volta che designMode viene impostato ad "On", il documento diventa un'area di rich-text editing e l'utente può digitare dentro questa come se fosse una textarea. The most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website.

+ +

Allo stesso modo, impostando contentEditable a "true" ti permette di rendere modificabili singoli elementi di un documento.

+ +

Eseguire i Comandi

+ +

Quando un documento HTML viene impostato come modificabile con designMode, l'oggetto document rilascia il metodo  execCommand, la quale permette di eseguire dei comandi per manipolare il contenuto dell'area modificabile. Molti comandi agiscono sulla selezione del testo nel documento (grassetto, corsivo, ecc), mentre altri inseriscono nuovi elementi (collegamenti) o agisco su un'intera riga (indentazione). Quando si usa contentEditable, il metodo execCommand coinvolgerà l'attuale elemento attivo modificabile.

+ +
execCommand(Stringa nomeComando, Booleano mostraUIPredefinita, Stringa valoreArgomento)
+
+ +

Argomenti

+ +
+
+
Stringa nomeComando
+
il nome del comando
+
+
+ +
+
+
Booleano mostraUIPredefinita
+
se l'interfaccia utente standard deve essere visualizzata. Questa caratteristica non è implementata in Mozilla.
+
+
+ +
+
+
Stringa valoreArgomento
+
alcuni comandi (come insertimage) richiedono un valore per un argomento extra (l'indirizzo dell'immagine). Passa un argomento oppure null, se l'argomento non è necessario.
+
+
+ +

Comandi

+ +
+
+
backColor
+
Cambia il colore di sfondo del documento. In modalità styleWithCss invece, questo agisce sul colore di sfondo del blocco che lo contiene. Richiede un valore esadecimale do un colore da passare come argomento. (Internet Explorer usa questo comando per impostare il colore di sfondo del testo.)
+
+
+ +
+
+
bold
+
Attiva o disattiva il grassetto sulla selezione corrente o alla posizione del cursore. (Internet Explorer usa il tag STRONG al posto di B.)
+
+
+ +
+
+
contentReadOnly
+
Rende il contenuto del documento modificabile o di sola lettura. Richiede una valore booleano true/false da passare come argomento. (Non è supportato da Internet Explorer.)
+
+
+ +
+
+
copy
+
Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
+
+
+ +
+
+
createLink
+
Crea un collegamento dalla selezione, solo se esiste la selezione. Richiede una stringa contenente l'indirizzo del collegamento da passare come argomento. L'indirizzo deve contenere almeno un unico carattere, che può essere uno spazio bianco. (Internet Explorer creerà un link con un valore null.)
+
+
+ +
+
+
cut
+
+ +
+
Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
+
+
+ +
+
+
decreaseFontSize
+
Aggiunge un tag SMALL attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)
+
+
+ +
+
+
delete
+
Cancella la selezione corrente.
+
+
+ +
+
+
fontName
+
Cambia il carattere alla selezione o alla posizione del cursore. Richiede una stringa, con il nome di un font ("Arial" per esempio) da passare come argomento.
+
+
+ +
+
+
fontSize
+
Cambia la dimensione del testo nella selezione o alla posizione del cursore. Richiede una dimensione HTML (1-7) da passare come argomento.
+
+
+ +
+
+
foreColor
+
Cambia il colore del testo alla selezione on alla posizione del cursore. Richiede una stringa con il valore esadecimale del colore da passare come argomento.
+
+
+ +
+
+
formatBlock
+
Aggiunge un tag di blocco-stile attorno alla selezione o alla posizione del cursore. Richiede una stringa con il nome del tag da passare come argomento. Praticamente possono essere usati tutti i blocchi di stile (es. "H1", "EM", "BUTTON", "TEXTAREA"). (Internet Explorer supporta soltanto i tags di intestazione H1 - H6, ADDRESS, e PRE, e devono essere racchiusi all'interno dei delimitatori < >, quindi l'argomento dovrà essere passato come "<H1>".)
+
+
+ +
+
+
heading
+
Aggiunge un'intestazione attorno la selezione o sulla riga in cui è posizionato il cursore. Richiede una stringa con il nome del tag da passare come argomento (es. "H1", "H6"). (Non supportato da Internet Explorer.)
+
+
+ +
+
+
hiliteColor
+
Cambia il colore di sfondo della selezione o della posizione del cursore. Richiede una stringa con il valore esadecimale del colore da passare come argomento. UseCSS deve essere attivata per usare questa funzione. (Non supportato da Internet Explorer.)
+
+
+ +
+
+
increaseFontSize
+
Aggiunge il tag BIG attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)
+
+
+ +
+
+
indent
+
Aumenta il rientro dell'elemento all'interno della selezione corrente o alla posizione del cursore.
+
+
+ +
+
+
insertHorizontalRule
+
Inserisce una horizontal rule alla posizione del cursore (elimina la selezione).
+
+
+ +
+
+
insertHTML
+
Inserisce una stringa HTML alla posizione del cursore (elimina la selezione). Richiede una stringa HTML valida da passare come argomento. (Non supportata da Internet Explorer.)
+
+
+ +
+
+
insertImage
+
Inserisce un'immagine alla posizione del cursore (elimina la selezione). Richiede una stringa contenente l'indirizzo dell'immagine da passare come argomento. L'indirizzo deve contenere almeno un unico carattere, che può essere uno spazio bianco. (Internet Explorer creerà un link con un valore null.)
+
+
+ +
+
+
insertOrderedList
+
Crea un elenco numerato all'interno della selezione corrente o alla posizione del cursore.
+
+
+ +
+
+
insertUnorderedList
+
Crea un elenco puntato all'interno della selezione corrente o alla posizione del cursore.
+
+
+ +
+
+
insertParagraph
+
Inserisce una paragrafo attorno alla selezione o alla riga corrente. (Internet Explorer inserisce un paragrafo alla posizione del cursore e cancella la selezione.)
+
+
+ +
+
+
italic
+
Attiva o disattiva il corsivo sulla selezione o alla posizione del cursore. (Internet Explorer usa il tag EM al posto di I.)
+
+
+ +
+
+
justifyCenter
+
Allinea al centro la selezione o la posizione del cursore.
+
+
+ +
+
+
justifyLeft
+
Allinea a sinistra la selezione o la posizione del cursore.
+
+
+ +
+
+
justifyRight
+
Allinea a destra la selezione o la posizione del cursore.
+
+
+ +
+
+
outdent
+
Diminuisce il rientro dell'elemento sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
paste
+
Incolla il contenuto degli appunti alla posizione del cursore (sostituisce la selezione corrente). I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
+
+
+ +
+
+
redo
+
Ripristina il comando precedentemente annullato.
+
+
+ +
+
+
removeFormat
+
Rimuove tutta la formattazione dalla selezione corrente.
+
+
+ +
+
+
selectAll
+
Seleziona tutto il contenuto dell'area modificabile.
+
+
+ +
+
+
strikeThrough
+
Attiva o disattiva il testo barrato sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
subscript
+
Attiva o disattiva subscript sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
superscript
+
Attiva o disattiva superscript sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
underline
+
Attiva o disattiva la sottolineatura sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
undo
+
Annulla l'ultimo comando eseguito.
+
+
+ +
+
+
unlink
+
Rimuove il collegamento dal collegamento selezionato.
+
+
+ +
+
+
useCSS {{ Deprecated_inline() }}
+
Attiva o disattiva l'uso di tags HTML tags o CSS per la generazione del markup. Richiede una valore booleano true/false come argomento. NOTA: Questo argomento è invertito (es. usa false per usare il CSS, true per usare l'HTML). (Non supportato da Internet Explorer.) Questo comando è diventato deprecato; in alternativa usa il comando styleWithCSS.
+
+
+ +
+
+
styleWithCSS
+
Sostituisce il comando useCSS; l'argomento, a differenza del comando useCSS, l'argomento lavora come ci si aspetta, es. passato true modifica/genera attributi style nel markup, false genera elementi di formattazione.
+
+
+ +

Differenze con Internet Explorer

+ +

Una delle maggiori differenze tra Mozilla e Internet Explorer che coinvolgono designMode è il codice generato nel documento modificabile: while Internet Explorer uses HTML tags (em, i, ecc), Mozilla 1.3 will generate by default spans with inline style rules. Il comando  useCSS può essere usato per attivare o disattivare la creazione di markup HTML o CSS.

+ +

Figure 1 : Generated HTML differences

+ +
Mozilla:
+<span style="font-weight: bold;">I love geckos.</span>
+<span style="font-weight: bold; font-style: italic;
+    text-decoration: underline;">Dinosaurs are big.</span>
+
+Internet Explorer:
+<STRONG>I love geckos.</STRONG>
+<STRONG><EM><U>Dinosaurs are big.</U></EM></STRONG>
+
+ +

Un'altra differenza tra Mozilla e IE è il modo in cui si accede all'oggetto document di un iframe, con la quale viene usato in congiunzione con designMode. Mozilla usa il modo standard fornito da W3C, IFrameElement.contentDocument, mentre IE richiede IFrameElement.document.

+ +

DevEdge fornisce una classe JavaScript, xbDesignMode, il cui scopo è quello di racchiudere le caratteristiche di designMode in una classe che nasconde le differenze tra IE e Mozilla.

+ +


+ Gestione degli Eventi Disabilitati

+ +

Una significante differenza per Mozilla è che una volta che viene impostato il documento a designMode, tutti gli eventi sul determinato documento vengono disabilitati. Tuttavia, disattivato il designMode (come ora è possibile in Mozilla 1.5) gli eventi diventeranno attivi di nuovo.

+ +

Maggiori informazioni possono essere trovato nella sezione Rich text editing dell'articolo Convertire le applicazioni da Internet Explorer a Mozilla.

+ +

Esempi

+ +

Nota: I files di esempio sono stati trasferiti su un'altro sito. In questo momento non sono disponibili. --fumble 18:13, 24 Apr 2005 (PDT)

+ +

Esempio 1

+ +

Il primo esempio è un documento HTML impostato con designMode a "On". In Mozilla 1.3, questo rende l'intero documento modificabile. Tuttavia, Internet Explorer, non permette a javascript di cambiare il designMode del documento corrente. Per farlo funzionare in Internet Explorer, l'attributo contentEditable del tag body necessita di essere impostato a "true".

+ +

Figura 2 : Primo esempio

+ +
HTML:
+<body contentEditable="true" onload="load()">
+
+JavaScript:
+function load(){
+  window.document.designMode = "On";
+}
+
+ +

Esempio 2

+ +

Il secondo esempio è una semplice pagina in rich text editing, dove il testo può essere trasformato in grassetto/corsivo/sottolineato, possono essere aggiunti nuovi collegamenti e si può cambiare il colore del testo. La pagina di esempio consiste in un iframe, la quale sarà l'area rich-text, nonché gli elementi che consento di effettuare modifiche base al testo come grassetto/corsivo/colore del testo.

+ +

Figura 3 : Impostazione del rich-text editing

+ +
HTML:
+<body onload="load()">
+
+JavaScript:
+function load(){
+  getIFrameDocument("editorWindow").designMode = "On";
+}
+
+function getIFrameDocument(aID){
+  // se esiste contentDocument, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    return document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    return document.frames[aID].document;
+  }
+}
+
+ +

L'esempio contiene una funzione doRichEditCommand che rende semplice l'esecuzione dei comandi nel documento dell'iframe e mantiene pulito il codice HTML. La funzione esegue il comando richiesto tramite execCommand() e dopodiché imposta il focus di nuovo al documento modificabile, come anche cliccando su di un pulsante imposterà il focus su pulsante stesso, la quale interromperà il flusso di modifica.

+ +

Figura 4 : Esecuzione dei comandi Rich Editing

+ +
HTML:
+<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>
+
+JavaScript:
+function doRichEditCommand(aName, aArg){
+  getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
+  document.getElementById('editorWindow').contentWindow.focus()
+}
+
+ +

Risorse

+ + diff --git a/files/it/web/guide/index.html b/files/it/web/guide/index.html new file mode 100644 index 0000000000..db55293bd5 --- /dev/null +++ b/files/it/web/guide/index.html @@ -0,0 +1,39 @@ +--- +title: Guida Web developer +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +

Questi articoli forniscono informazioni utili per l'utilizzo di specifiche tecnologie e API.

+ +
+
+ +
+
+ +

Guarda anche

+ + diff --git a/files/it/web/guide/woff/index.html b/files/it/web/guide/woff/index.html new file mode 100644 index 0000000000..c3fb596778 --- /dev/null +++ b/files/it/web/guide/woff/index.html @@ -0,0 +1,99 @@ +--- +title: Il Formato Open di Font per il Web (WOFF) +slug: Web/Guide/WOFF +translation_of: Web/Guide/WOFF +--- +

WOFF (Web Open Font Format, Formato Font per il Web Open) e un nuovo formato di font per il web sviluppato da Mozilla in collaborazione con Type Supply, LettError, e altre organizzazioni. Usa una versione compressa della stessa struttura sfnt basata su tabelle di TrueType, OpenType e Open Font Format, ma aggiunge alcuni metadati e strutture dati ad uso privato, compresi alcuni campi predefiniti che permettono di fornire informazioni di licenza se lo si desidera.

+ +

Usare WOFF comporta principalmente tre benefici:

+ +
    +
  1. I dati del font sono compressi, quindi i siti che usano WOFF usano meno banda e si caricheranno più in fretta rispetto a quelli che usano equivalenti non compressi come TrueType o OpenType.
    2. +
  2. Molti produttori di font che non intendono dare in licenza i propri font in formato TrueType o OpenType per l'uso nel web, daranno in licenza i font in formato WOFF. Questo migliora la disponibilità di font ai designer di siti web.
    3. +
  3. I produttori di browser (sia proprietari che liberi) apprezzano il formato WOFF, che ha quindi il potenziale per diventare un formato per i font realmente universale e interoperabile, a differenza degli attuali formati per i font.
    4. +
+ +

Usare WOFF

+ +

Puoi usare la proprietà CSS {{cssxref("@font-face")}} per utilizzare i font WOFF per il testo nei contenuti web. Funziona esattamente come i formati OpenType e TrueType, eccetto per il fatto che molto probabilmente renderà lo scaricamento molto più efficiente grazie alla compressione.

+ +

Strumenti per lavorare con i font WOFF

+ +

Sono disponibili Strumenti per lavorare con i font WOFF. sfnt2woff e woff2sfnt convertono da WOFF a OpenType e viceversa.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('WOFF1.0', '', '')}}{{Spec2('WOFF1.0')}}Specifica iniziale.
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base6.0{{CompatGeckoDesktop("1.9.1")}}9.011.105.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/html/attributi/index.html b/files/it/web/html/attributi/index.html new file mode 100644 index 0000000000..7bb21c96a2 --- /dev/null +++ b/files/it/web/html/attributi/index.html @@ -0,0 +1,590 @@ +--- +title: Attributi +slug: Web/HTML/Attributi +translation_of: Web/HTML/Attributes +--- +

Gli elementi in HTML hanno attributi; questi sono valori addizionali che configurano l'elemento o modificano in vari modi il suo comportamento.

+

Lista degli attributi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome dell'attributoElementi supportatiDescrizione
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista di tipi che il server accetta, normalmente un file di tipo type.
accept-charset{{ HTMLElement("form") }}Lista delle codifiche di caratteri supportate.
accesskeyAttributo globaleDefinisce una scorciatoia da tastiera per attivare o aggiungere il focus all'elemento.
action{{ HTMLElement("form") }}L' URI di un programma che processa le informazioni inviate per mezzo di un modulo.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Specifica l'allineamento orizzontale dell'elemento.
alt +

{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}

+ 		Testo alternativo in caso un immagine non possa essere visualizzata.
async{{ HTMLElement("script") }}Indica che lo script deve essere eseguito in modalità asincrona.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica che i controlli in questo modulo possono, di defaut, avere il loro valore completato automaticamente dal browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}L'elemento riceve il focus automaticamente dopo il caricamento della pagina.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}L'audio o il video devo partire appena possibile.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

Colore di sottofondo dell'elemento.

+

Nota: Questo è un attibuto ereditato. Utilizzare la proprietà {{ Cssxref("background-color") }} in sostituzione.

+
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

La larghezza del bordo.

+

Nota: Questo è un attributo ereditato. Utilizzare la proprietà  CSS {{ Cssxref("border") }} in sostituzione.

+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Contiene l'intervallo di tempo del media già bufferizzato.
challenge{{ HTMLElement("keygen") }}Una stringa che viene presentata con la chiave pubblica.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Dichiara la codifica di caratteri della pagina o dello script.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Indica che l'elemento deve essere conrollato al caricamento della pagina.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Contiene un URI che punta alla sorgente di quanto citato o modificato.
classAttributo globaleUsato spesso con i CSS per modellare elementi con proprietà comuni.
code{{ HTMLElement("applet") }}Specifica l'URL del file class della applet che deve essere caricato ed eseguito.
codebase{{ HTMLElement("applet") }}Questo attibuto fornisce l'URL assoluto o relativo della directory dove il file .class dell'applet  referenziata dall'attributo code è memorizzato.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

Questo attributo imposta il colore del testo utilizzando un nome colore o specificando il suo valore in formato esadecimale #RRGGBB.

+

Note: Questo è un attributo ereditato. Utilizzare la proprietà CSS {{ Cssxref("color") }} in sostituzione.

+
cols{{ HTMLElement("textarea") }}Definisce il numero delle colonne in un'area di testo.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}L'attributo colspan definisce il numero delle colonne nelle quali una cella dovrebbe espandersi.
content{{ HTMLElement("meta") }}Un valore associato con http-equiv o name a seconda del contesto.
contenteditableAttributo globaleIndica che il contenuto dell'elemento è editabile.
contextmenuAttributo globaleDefinisce l'ID di un elemento {{ HTMLElement("menu") }} che servirà come menù contestuale dell'elemento.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica che il browser deve visualizzare i controlli di playack per l'utente.
coords{{ HTMLElement("area") }}Una serie di valori che specificano le coordinate di un area selezionabile all'interno di una regione.
data{{ HTMLElement("object") }}Specifica l'URL della risorsa.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}Indica data e ora associate con l'elemento.
default{{ HTMLElement("track") }}Indica che la traccia deve essere abilitata a meno che le preferenze dell'utente indichino diversamente.
defer{{ HTMLElement("script") }}Indicano che lo script deve essere eseguito dopo che la pagina è stata analizzata.
dirAttributo globaleDefinisce la direzione del testo. I valori permessi sono ltr (Left-To-Right: da sinistra a destra) or rtl (Right-To-Left: da destra a sinistra)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica che l'utente non può interagire con l'elemento.
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indica che il collegamento ipertestuale è da utilizzare per scaricare una risorsa.
draggableAttributo globaleDefinisce l'elemeno come trascinabile.
dropzoneAttributo globaleIndica che l'elemento consente l'eliminazione dei contenuti da esso.
enctype{{ HTMLElement("form") }}Definisce il tipo di contenuto dei dati del form quando il method è POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Descrive elementi che appartengono a questo.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicano il form al quale l'elemento si riferisce.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}L'ID che gli elementi <th> applicano a quest'ultimi.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Note: In qualche caso, come per {{ HTMLElement("div") }}, questo attributo è ereditato, e quindi deve essere usata la proprietà CSS {{ Cssxref("height") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, l'altezza deve essere specificata con questo attributo.
hiddenGlobal attributeIndica la rilevanza di un elemento.
high{{ HTMLElement("meter") }}Indica il limite inferiore del range superiore
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }} L'URL di una risorsa collegata.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifica la lingua della risorsa collegata.
http-equiv{{ HTMLElement("meta") }} 
icon{{ HTMLElement("command") }}Spefifica una figura che rappresenta il comando.
idAttributo globaleSpesso utilizzato con CSS per applicare uno stile ad uno specifico elemento. Il valore di questo attributo deve essere unico.
ismap{{ HTMLElement("img") }}Indica che l'immagine è una parte della mappa immagine lato server.
itempropAttributo globale 
keytype{{ HTMLElement("keygen") }}Specifica il tipo della chiave da generata.
kind{{ HTMLElement("track") }}Specifica il tipo della traccia di testo.
label{{ HTMLElement("track") }}Specifica un titolo leggibile dall'utente della traccia di testo.
langAttributo globaleDefinisce la lingua usata nell'elemento.
language{{ HTMLElement("script") }}Definisce la lingua dello script usato nell'elemento.
list{{ HTMLElement("input") }}Identifica una lista di opzioni predefinite da suggerire all'utente.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indica che il media deve essere riprodotto dall'inizio quando terminato.
low{{ HTMLElement("meter") }}Indica il valore limite superiore del campo inferiore.
manifest{{ HTMLElement("html") }}Specifica l'URL del manifesto della cache del documento.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica il valore massimo consentito.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Definisce il numero massimo di caratteri consentiti nell'elemento.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Specifica un suggerimento del media per il quale è stata disegnata la risorsa.
method{{ HTMLElement("form") }}Definisce il metodo HTTP da usare alla sottomissione del form. Può essere GET (default) o POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica il valore minimo consentito.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica che possono essere inseriti valori multipi come input ad un tipo email o file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Nome dell'elemento. E' ad esempio utilizzato dal server per identificare i campi nel form suttomesso.
novalidate{{ HTMLElement("form") }}Questo attributo indica che il form non deve essere validato alla sottomissione.
open{{ HTMLElement("details") }}Indica se i dettagli verranno visualizzati al caricamento della pagina.
optimum{{ HTMLElement("meter") }}Indica il valore numerico ottimale.
pattern{{ HTMLElement("input") }}Definisce un'espressione regolare con la quale validare il valore dell'elemento.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Fornisce un suggerimento all'utente circa cosa può essere inserito nel campo.
poster{{ HTMLElement("video") }}Un URL che indica un fotogramma da mostrare finché l'utente esegue o cerca.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica se l'intera risorsa, parte di essa o niente deve essere precaricata.
pubdate{{ HTMLElement("time") }}Indica che queste data e ora sono dati dell'elemento progenitore più vicino {{ HTMLElement("article") }}.
radiogroup{{ HTMLElement("command") }} 
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica se l'elemento è editabile.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifica la relazione dell'oggetto obbiettivo con l'oggetto di collegamento.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica se questo elemento deve essere compilato o meno.
reversed{{ HTMLElement("ol") }}Indica se l'elenco deve essere visualizzato in ordine decrescente anzichè ascendente.
rows{{ HTMLElement("textarea") }}Definisce il numero di righe in area di testo.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Definisce il numero di righe sopra le quali si estende la cella della tabella.
sandbox{{ HTMLElement("iframe") }} 
spellcheckAttributo globaleIndica se il controllo ortografico è consentito per l'elemento.
scope{{ HTMLElement("th") }} 
scoped{{ HTMLElement("style") }} 
seamless{{ HTMLElement("iframe") }} 
selected{{ HTMLElement("option") }}Definisce un valore che sarà selezionato al caricamento della pagina.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Definisce la larghezza dell'elemento (in pixel). Se l'attributo type dell'elemento è text o password rappresenta il numero di caratteri.
sizes{{ HTMLElement("link") }} 
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }} 
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}L'URL del contenuto incorporabile.
srcdoc{{ HTMLElement("iframe") }} 
srclang{{ HTMLElement("track") }} 
start{{ HTMLElement("ol") }}Definisce il primo numero se diverso da 1.
step{{ HTMLElement("input") }} 
styleAttributo globaleDefinisce gli stili CSS che sovrasteranno gli stili precedentemente impostati.
summary{{ HTMLElement("table") }} 
tabindexAttributo globaleSovrascrive l'ordinamento della tabella impostato di default dal browser e segue quello specificato al posto suo.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} 
titleAttributo globaleTesto da visualizzare in un suggerimento quando si passa sopra all'elemento.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Definisce il tipo dell'elemento.
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Definisce un valore di default che verrà visualizzato nell'elemento al caricamento della pagina.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Nota: In qualche caso, come per {{ HTMLElement("div") }}, questo è un attributo ereditato, quindi deve essere utilizzata la proprietà CSS {{ Cssxref("width") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, la larghezza deve essere specificata con questo attributo.
wrap{{ HTMLElement("textarea") }}Indica se il testo deve essere circondato.
+

Attributi di contenuto contro attributi IDL

+

In HTML, molti attributi hanno due facce: l'attributo di contenuto e l'attributo IDL.

+

L'attributo del contenuto è quello che viene impostato nel contenuto (il codice HTML) e può essere impostato o ricavato tramite {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. L'attributo di contenuto è sempre una stringa, anche quando il valore aspettato dovrebbe essere un intero. Ad esempio, per impostare il maxlength di un elemento {{HTMLElement("input")}} a 42 usando l'attributo di contenuto, occorre chiamare setAttribute("maxlength", "42") su quell'elemento.

+

L'attributo IDL è conosciuto anche come proprietà JavaScript. Questi attributi possono essere letti o impostati utilizzando proprietà JavaScript come element.foo. L'attributo IDL utilizzerà sempre (ma potrebbe trasformare) l'attributo di contenuto sottostante per ritornare un valore quando viene richiesto e salverà qualcosa nell'attributo di contenuto quando viene impostato. In altre parole, l'attributo IDL riflette, essenzialmente, l'attributo di contenuto.

+

Il più delle volte, l'attributo IDL ritornerà i loro valori così come sono realmente utilizzati. Ad esempio, il type di default per gli elementi {{HTMLElement("input")}} è "text", se viene impostato come input.type="foobar", l'elemento <input> sarà di tipo testo (nell'apparenza e nel comportamento) ma il valore dell'attributo di contenuto "type" sarà "foobar". Tuttavia, l'attributo IDL type ritornerà la stringa "text".

+

Gli attributi IDL non sono sempre stringhe; ad esempio, input.maxlength è un numero (un long segnato). Quando viene utilizzato l'attributo IDL, viene letto o impostato il valore del tipo desiderato, quindi input.maxlength ritornerà sempre un numero e quando si imposta input.maxlength ,esso vuole un numero. Se viene passato un altro tipo, sarà automaticamente convertito in numero così come specificato dalle regole Javascript standard per la conversione di tipo.

+

L'attributo IDL può riflettere altri tipi come long senza segno, URL, valori booleani, etc. Sfortunatamente, non ci sono regole chiare e il modo con il quale si comportano gli attributi IDL in congiunzione con il loro contenuto corrispondente dipenda dall'attributo stesso. Il più delle volte, seguirà le norme stabilite nelle specifiche, ma a volte no. Le specifiche HTML tentano di renderlo il più possibile facile per gli sviluppatori, ma per varie ragioni (soprattutto storiche), alcuni attributi  si comportano stranamente (select.size, ad esempio) e occorre leggere le specifiche per comprendere esattamente il loro comportamento.

+

Vedi anche

+ +

{{ languages( { "fr": "fr/HTML/Attributs", "en": "en/HTML/Attributes", "ja": "ja/HTML/Attributes" } ) }}

diff --git a/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html b/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html new file mode 100644 index 0000000000..217e9191d7 --- /dev/null +++ b/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html @@ -0,0 +1,161 @@ +--- +title: Drawing graphics with canvas +slug: Web/HTML/Canvas/Drawing_graphics_with_canvas +translation_of: Web/API/Canvas_API/Tutorial +--- +
+

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

+
+

Introduction

+

With Firefox 1.5, Firefox includes a new HTML element for programmable graphics. <canvas> is based on the WHATWG canvas specification, which itself is based on Apple's <canvas> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.

+

<canvas> creates a fixed size drawing surface that exposes one or more rendering contexts. We'll focus on the 2D rendering context. For 3D graphics, you should use the WebGL rendering context.

+

The 2D Rendering Context

+

A Simple Example

+

To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency:

+
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "rgb(200,0,0)";
+  ctx.fillRect (10, 10, 55, 50);
+
+  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+  ctx.fillRect (30, 30, 55, 50);
+}
+
+ +

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

+

The draw function gets the canvas element, then obtains the 2d context. The ctx object can then be used to actually render to the canvas. The example simply fills two rectangles, by setting fillStyle to two different colors using CSS color specifications and calling fillRect. The second fillStyle uses rgba() to specify an alpha value along with the color.

+

The fillRect, strokeRect, and clearRect calls render a filled, outlined, or clear rectangle. To render more complex shapes, paths are used.

+

Using Paths

+

The beginPath function starts a new path, and moveTo, lineTo, arcTo, arc, and similar methods are used to add segments to the path. The path can be closed using closePath. Once a path is created, you can use fill or stroke to render the path to the canvas.

+
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right ->
+  ctx.lineTo(30, 30);
+  ctx.fill();
+}
+
+ +

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

+

Calling fill() or stroke() causes the current path to be used. To be filled or stroked again, the path must be recreated.

+

Graphics State

+

Attributes of the context such as fillStyle, strokeStyle, lineWidth, and lineJoin are part of the current graphics state. The context provides two methods, save() and restore(), that can be used to move the current state to and from the state stack.

+

A More Complicated Example

+

Here's a little more complicated example, that uses paths, state, and also introduces the current transformation matrix. The context methods translate(), scale(), and rotate() all transform the current matrix. All rendered points are first transformed by this matrix.

+
function drawBowtie(ctx, fillStyle) {
+
+  ctx.fillStyle = "rgba(200,200,200,0.3)";
+  ctx.fillRect(-30, -30, 60, 60);
+
+  ctx.fillStyle = fillStyle;
+  ctx.globalAlpha = 1.0;
+  ctx.beginPath();
+  ctx.moveTo(25, 25);
+  ctx.lineTo(-25, -25);
+  ctx.lineTo(25, -25);
+  ctx.lineTo(-25, 25);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function dot(ctx) {
+  ctx.save();
+  ctx.fillStyle = "black";
+  ctx.fillRect(-2, -2, 4, 4);
+  ctx.restore();
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // note that all other translates are relative to this one
+  ctx.translate(45, 45);
+
+  ctx.save();
+  //ctx.translate(0, 0); // unnecessary
+  drawBowtie(ctx, "red");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 0);
+  ctx.rotate(45 * Math.PI / 180);
+  drawBowtie(ctx, "green");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(0, 85);
+  ctx.rotate(135 * Math.PI / 180);
+  drawBowtie(ctx, "blue");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 85);
+  ctx.rotate(90 * Math.PI / 180);
+  drawBowtie(ctx, "yellow");
+  dot(ctx);
+  ctx.restore();
+}
+
+ +

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

+

This defines two methods, drawBowtie and dot, that are called 4 times. Before each call, translate() and rotate() are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. dot renders a small black square centered at (0, 0). That dot is moved around by the transformation matrix. drawBowtie renders a simple bowtie path using the passed-in fill style.

+

As matrix operations are cumulative, save() and restore() are used around each set of calls to restore the original canvas state. One thing to watch out for is that rotation always occurs around the current origin; thus a translate() rotate() translate() sequence will yield different results than a translate() translate() rotate() series of calls.

+

Compatibility With Apple <canvas>

+

For the most part, <canvas> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.

+

Required </canvas> tag

+

In the Apple Safari implementation, <canvas> is an element implemented in much the same way <img> is; it does not have an end tag. However, for <canvas> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a required end tag.

+

If fallback content is not needed, a simple <canvas id="foo" ...></canvas> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.

+

If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).

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

Additional Features

+

Rendering Web Content Into A Canvas

+
+ This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages. Read why.
+

Mozilla's canvas is extended with the drawWindow() method. This method draws a snapshot of the contents of a DOM window into the canvas. For example,

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

would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. By specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower).

+

It is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.

+

With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.

+

Ted Mielczarek's tab preview extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.

+
+ Note: Using canvas.drawWindow() while handling a document's onload event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the MozAfterPaint event to successfully draw HTML content into a canvas on page load.
+

See also

+ diff --git a/files/it/web/html/canvas/index.html b/files/it/web/html/canvas/index.html new file mode 100644 index 0000000000..dcded63973 --- /dev/null +++ b/files/it/web/html/canvas/index.html @@ -0,0 +1,73 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +translation_of: Web/API/Canvas_API +--- +

Aggiunto con HTML5, HTML {{ HTMLElement("canvas") }} è un elemento che può essere usato per disegnare elementi grafici tramite script (di solito JavaScript). Per esempio, può essere usato per disegnare grafici, creare composizioni fotografiche, creare animazioni e perfino realizzare elvaborazioni video in tempo reale.

+ +

Le applicazioni Mozilla supportano <canvas> a partire da Gecko 1.8 (cioè Firefox 1.5). L'elemento è stato originariamente introdotto da Apple per OS X Dashboard e Safari. Internet Explorer supporta <canvas> dalla versione 9; per versioni precedenti di IE, una pagina può aggiungere il supporto per <canvas> includendo lo script del progetto Explorer Canvas di Google. Anche Google Chrome e Opera 9 supportano <canvas>.

+ +

L'elemento <canvas> è utilizzato anche da WebGL per la grafica 3D con accellerazione hardware nelle pagine web.

+ + + + + + + + +
+

Documentazione

+ +
+
Specifiche
+
L'elemento <canvas> è parte delle specifiche 1.0 della WhatWG per le applicazioni  Web, anche conosciute come HTML5.
+
Esecitazione sui canvas
+
Un'esercitazione completa che copre sia l'utilizzo base  che le caratteristiche avanzate di <canvas>.
+
Frammenti di codice: Canvas
+
Qualche frammento di codice per gli sviluppatori di estensioni che coinvolge <canvas>.
+
Esempi di canvas
+
Alcune dimostraioni sui <canvas>.
+
Disegnare oggetti DOM in un canvas
+
Come disegnare contenuto DOM, come elementi HTML, in un canvas.
+
Un semplice raycaster
+
Una demo di animazione ray-tracing utilizzando il canvas.
+
Interfacce dei Canvas nel DOM
+
Interfacce dei Canvas nel DOM implementate in Gecko.
+
+ +

Vedi tutto...

+ 		+

Comunità

+ +

Guarda i forum di Mozilla...{{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}
+ Canvas-Developers Yahoo Group

+ +

Risorse

+ + + +

Librerie

+ +
    +
  • libCanvas è un potente e leggero framework per canvas
    • +
  • Processing.js implementzione del linguaggio di visualizzazione Processing
    • +
  • EaselJS è una libreria con un'API simile a Flash
    • +
  • PlotKit è una libreria per la creazione di grafici e diagrammi
    • +
  • Rekapi è un'API per le animazioni Canvas basata sui keyframe
    • +
  • PhiloGL è un framework WebGL per la visualizzazione di dati, programmazione creativa e lo sviluppo di giochi.
    • +
  • JavaScript InfoVis Toolkit crea visualizzazioni di dati interattive per il Web con Canvas 2D
    • +
  • Frame-Engine è un framework per lo sviluppo di applicazioni e giochi
    • +
+ + + + +
+ +
{{ HTML5ArticleTOC() }}
diff --git a/files/it/web/html/element/a/index.html b/files/it/web/html/element/a/index.html new file mode 100644 index 0000000000..c47883b767 --- /dev/null +++ b/files/it/web/html/element/a/index.html @@ -0,0 +1,457 @@ +--- +title: +slug: Web/HTML/Element/a +tags: + - Ancora + - Collegamento + - Elemento + - HTML + - Link + - Web +translation_of: Web/HTML/Element/a +--- +

Sommario

+ +

L' elemento HTML <a> (o l' elemento Ancora HTML) definisce un collegamento ipertestuale, il nome dell' obbiettivo di destinazione per un collegamento ipertestuale, o entrambi.

+ + + +

Attributi

+ +

Questo elemento include gli attributi globali.

+ +
+
{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}
+
Questi attributi definiscono la codifica dei caratteri della risorsa linkata. Il valore è una lista di caratteri delimitata da spazi- e/o virgole - fissa come definito in RFC 2045. Il valore di default è ISO-8859-1.
+
+
+

Nota: Questo attributo è obsoleto in HTML5 e non dovrebbe essere usato. Per ottenere un effetto simile, usare l'header HTTP Content-Type sulla risorsa linkata.

+
+
+
{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Per l' uso con le forme degli oggetti, questo attibuto usa una lista di numeri separata da virgole per definire le coordinate dell'oggetto nella pagina. Il valore di questo attributo dipende dal valore dell'attributo {{htmlattrxref("shape", "a")}}.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+

Valore dell'attributo {{htmlattrxref("shape", "a")}}

+ 		Formato delle coordinateSignificato
circle +

x,y,z 

+ 		+
    +
  • x e y indicano le coordinate (in pixel) del centro della circonferenza;
    • +
  • z indica la lunghezza del raggio.
    • +
+
rectx,y,w,h +
    +
  • x e y indicano le coordinate dell'angolo superiore sinistro del rettangolo;
    • +
  • w e h indicano rispettivamente la larghezza e l'altezza del rettangolo.
    • +
+
polygonx1,y1,x2,y2,... +
    +
  • Ogni coppia di coordinate x,y definisce un punto del poligono; due punti consecutivi (o l'ultimo e il primo) vengono uniti da una linea.
    • +
+
+
+
{{htmlattrdef("datafld")}} {{Non-standard_inline}}
+
Questo attributo specifica il nome della colonna di tale oggetto origine dati che fornisce i dati associati.
+
+
+

Nota:

+ + +
+
+
{{htmlattrdef("datasrc")}} {{Non-standard_inline}}
+
Questo attributo indica l'ID oggetto origine dei dati che fornisce i dati e che è legato a questo elemento.
+
+
+

Nota:

+ + +
+
+
{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}
+
Questo attributo, se presente, indica che l' autore intende che il collegamento ipertestuale debba essere usato per scaricare una risorsa. Se l' attributo ha un valore, il browser dovrebbe interpretarlo come il nome del file da salvare in un file system locale. Non ci sono restrizioni sui valori consentiti, ma dovresti considerare che la maggior parte dei file system hanno delle limitazioni per quanto riguarda quale punteggiatura è supportata nei nomi del file, ed i browser sono predisposti ad aggiustare il nome del file di conseguenza.
+
+
+

Nota:

+ +
    +
  • Può essere usato con URL blob: e data:, così da poter scaricare contenuti generati usando JavaScript (ad esempio un'immagine creata in un applicazione di disegno).
    • +
  • Se è presente l'header HTTP Content-Disposition e propone un diverso nome per il file, l'header ha la priorità su questo attributo.
    • +
  • Se l'header HTTP Content-Disposition ha valore inline, in Firefox l'header ha la precedenza, mentre in Chrome l'attributo download.
    • +
  • In Firefox 20 questo attributo è rispettato solo per link a risorse provenienti dalla stessa origine.
    • +
+
+
+
{{htmlattrdef("href")}}
+
Questo è l'unico attributo richiesto per ancore che definiscono un collegamento ipertestuale. Esso indica il link obbiettivo, sia esso un URL o un frammento di URL. Un frammento di URL è un nome (un {{htmlattrxref("id")}}) preceduto da un cancelletto (#), che specifica la posizione dell'obbiettivo nel documento corrente. Gli URL non sono limitati ai documenti web basati sul protocollo HTTP: possono essere usati con altri protocolli supportati dal browser, come file, ftp, e mailto.
+
+
+

Nota: Puoi usare il frammento apposito "top" per creare un collegamento per tornare in cima alla pagina; ad esempio <a href="#top">Torna all'inizio</a>. Questo comportamento è specificato in HTML5.

+
+
+
{{htmlattrdef("hreflang")}}
+
Questo attributo indica la lingua della risorsa linkata. È puramente informativo. I valori permessi sono determinati dallo standard BCP47 per l'HTML5 e dallo standard RFC1766 per l'HTML4. Usa questo attributo solo se è presente anche l' attributo {{htmlattrxref("href", "a")}}.
+
{{htmlattrdef("media")}} {{HTMLVersionInline(5)}}
+
Questo attributo specifica in quali dispositivi utilizzare il link. Il suo valore deve essere una media query. Questo attributo è utile principalmente quando vi è un collegamento ad un foglio di stile esterno che consente allo user agent di scegliere il più adatto per il dispositivo in uso.
+
+
+

Nota:

+ +
    +
  • In HTML 4 sono accettate solo descrizioni letterali (separate da uno spazio) del supporto, vale a dire media types and groups: print, screen, aural, braille, ... HTML 5 estende questo ad ogni tipo di media query, ossia un'estensione dei valori consentiti in HTML 4.
    • +
  • I browser che non supportano le Media Queries CSS3 potrebbero non riconoscere il collegamento adeguato; non dimenticare di impostare collegamenti alternativi, usando l'insieme ristretto di media queries definite in HTML 4.
    • +
+
+
+
{{htmlattrdef("methods")}} {{Non-standard_inline}}
+
Il valore di questo attributo fornisce informazioni sulle funzioni che possono essere eseguite su un oggetto. I valori generalmente sono dati dal protocollo HTTP quando viene utilizzato, ma potrebbe (per ragioni simili a quelle per l'attributo title) essere utile includere informazioni consultive in anticipo nel collegamento. Ad esempio, il browser potrebbe scegliere un rendering diverso di un collegamento in funzione dei metodi specificati, qualcosa che è ricercabile potrebbe avere un'icona diversa, o un link esterno potrebbe essere intrerpretato con l'indicazione di lasciare il sito corrente. Questo attributo non è ben compreso o supportato neanche dal browser che lo ha definito, Internet Explorer 4. Methods Property (MSDN)
+
{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Questo attributo è richiesto in un ancora che definisce una destinazione all'interno di una pagina. Il valore per il name è simile al valore per l' attributo id e deve essere un identificatore alfanumerico e univoco nel documento. Secondo la specifica specifiche HTML 4.01, l' id e il name possono entrambi essere applicati all'elemento <a>, finchè hanno lo stesso valore.
+
+
+

Nota: Questo attributo è obsoleto in HTML5, usare l' attributo globale id.

+
+
+
{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}
+
Se questo attributo è presente, viene mandata una notifica all'URL specificato quando l'utente segue il link.
+
{{htmlattrdef("rel")}}
+
Questo attributo specifica la relazione tra l'oggetto di destinazione e il collegamento stesso. Il suo valore è una lista di tipi di link separati da spazi. La relazione predefinita è void, ossia nessuna.
+
Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.
+
{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Questo attributo specifica un collegamento inverso, la relazione inversa dell' attributo rel. È utile per indicare l'origine un oggetto, ad esempio il suo autore.
+
+ +
+
{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Questo attributo è utilizzato per definire una regione selezionabile per un collegamento ipertestuale associata con una figura per creare una mappa immagine. I valori per l' attributo sono circle (cerchio), default (l'intera area a disposizione) polygon (poligono) e rect (rettangolo). Le coordinate della mappa sono definite dall'attributo {{htmlattrxref("coords", "a")}}.
+
{{htmlattrdef("target")}}
+
Questo attributo specifica dove deve essere visualizzata la risorsa linkata. In HTML4, questo è il nome, o una parola chiave, per una cornice (frame). In HTML5, è il nome, o parola chiave, di un contesto di navigazione (browsing context) (per esempio un'ettichetta, una finestra o un frame in linea). Le seguenti parole chiave hanno uno speciale significato: +
    +
  • _self: Carica il documento nello stesso frame. Questo è il valore predefinito.
    • +
  • _blank: Carica il documento in una nuova finestra.
    • +
  • _parent: Carica il documento nel frameset genitore del frame corrente. Se non c'è il genitore, questa opzione si comporta allo stesso modo di _self.
    • +
  • _top: Carica il documento dentro la finestra originale completa (la scheda del browser), cancellando gli altri frame. Se non c'è il genitore, questa opzione si comporta allo stesso modo di _self.
    • +
+ Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.
+
{{htmlattrdef("type")}}
+
Questo attributo specifica il tipo della risorsa linkata, sotto forma di tipo MIME. Solitamente è fornito solo come informazione secondaria, ma in futuro i browser potrebbero aggiungere un'icona che identifichi i tipi di file (ad esempio un piccolo altoparlante quando il tipo è audio/wav). Per una lista completa dei tipi MIME supportati, vedere http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. +
 
+ +
Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.
+
+
{{htmlattrdef("urn")}} {{Non-standard_inline}}
+
Questo attributo presumibilmente supportato da Microsoft riferisce un nome uniforme di risorsa (uniform resource name (URN)) con il collegamento. Mentre era basato su lavori standard anni addietro, il significato di URN non è più ben definito, quindi questo attributo è insignificante. urn Property (MSDN)
+
+ +

Esempi

+ +

Collegamento ad un file esterno

+ +
<a href="http://www.mozilla.com/">Link esterno</a>
+
+ +

Risultato

+ +

Link esterno

+ +

Creare un'immagine cliccabile

+ +

Questo link aprirà la pagina https://developer.mozilla.org/ in una nuova finestra, per via dell'attributo {{htmlattrxref("target", "a", "target=\"_blank\"")}}.

+ +
<a href="https://developer.mozilla.org/" target="_blank">
+  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN">
+</a>
+
+ +

Risultato

+ +

MDN

+ + + +

Spesso si creano collegamenti o pulsanti che aprono il programma di email dell'utente. Per questo si usano i link mailto.

+ +

Per altri dettagli riguardanti  lo schema URL mailto, come ad esempio includere l'oggetto, del testo o altro contenuto, vedere i link Email o lo standard RFC 6068.

+ +
<a href="mailto:nowhere@mozilla.org">Invia un'email a nowhere</a>
+ +

Risultato

+ +

Invia un'email a nowhere

+ +

Usare l'attributo download per scaricare un <canvas> come PNG.

+ +

Se si vuole permettere all'utente di scaricare un elemento {{HTMLElement("canvas")}} sotto forma di immagine, si può creare un link con l'attributo {{htmlattrxref("download", "a")}} e il contenuto del <canvas> come URL del file:

+ +
<!-- HTML -->
+<canvas id="my-canvas"></canvas>
+<a id="download-image" download="disegno.png">Scarica l'immagine</a>
+
+ +
// JavaScript
+var link = document.querySelector("#download-image");
+var canvas = document.querySelector("#my-canvas");
+link.addEventListener("click"; function () {
+  link.href = canvas.toDataURL();
+}, false);
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-a-element.html#the-a-element', '<a>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilità dei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{htmlattrxref("download","a")}}14{{CompatGeckoDesktop("20.0")}}{{CompatNo}}15{{CompatNo}}
{{htmlattrxref("ping", "a")}}{{CompatVersionUnknown}}Disabilitato di default{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{htmlattrxref("download","a")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("20.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
{{htmlattrxref("ping", "a")}} Disabilitato di default   
+
+ +

 

+ +

Nota riguardo a Gecko

+ + + +

Click e focus

+ +

Un link ottiene il focus quando vi si clicca sopra in vari browser (come comportamento predefinito).

+ +

Cliccando su un {{HTMLElement("a")}} gli si assegna il focus?

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browser DesktopWindows 8.1OS X 10.9
Firefox 30.0SìSì
Chrome ≥39 (Chromium bug 388666)SìSì
Safari 7.0.5N.a.Solo quando ha l'attributo {{htmlattrxref("tabindex")}}
Internet Explorer 11SìN.a.
Opera 12SìSì
+ +

Toccando un {{HTMLElement("a")}} gli si assegna il focus?

+ + + + + + + + + + + + + + + + + + + + + +
Browser MobiliiOS 7.1.2Android 4.4.4
Safari MobileSolo quando ha l'attributo {{htmlattrxref("tabindex")}}N.a.
Chrome 35???Solo quando ha l'attributo {{htmlattrxref("tabindex")}}
+ +

Note

+ +

Le seguenti sono chiavi di associazione riservate per due dei maggiori browser e non devono essere usate come valori di accesso: a, c, e, f, g, h, v, freccia sinistra e freccia destra.

+ +

L' HTML 3.2 definisce solo gli attributi name, href, rel, rev, e title.

+ +

L' attributo target non è definito nei browser che non supportano i frame, come Netscape 1. Inoltre, target non è consentito se si utilizza la variante rigorosa (strict) dell'XHTML, ma è limitata al frameset o alla forma "di transizione" (transitional).

+ +

Raccomandazioni JavaScript

+ +

Succede spesso che un tag {{HTMLElement("a")}} sia usato con l'evento onclick. Per evitare che la pagina venga ricaricata, l'attributo {{htmlattrxref("href", "a")}} viene spesso impostato a "#" o a "javascript:void(0)". Entrambi questi valori possono portare ad errori inaspettati quando si copiano e aprono link in una nuova scheda e/o finestra. Bisogna essere consapevoli di questo per ragioni di usabilità, e quando gli utenti usano il tag di ancoraggio, bisogna cercare di prevenire i comportamenti di default.

+ +

Vedi anche

+ + + +
{{HTMLRef}}
diff --git a/files/it/web/html/element/abbr/index.html b/files/it/web/html/element/abbr/index.html new file mode 100644 index 0000000000..5ab07d12b7 --- /dev/null +++ b/files/it/web/html/element/abbr/index.html @@ -0,0 +1,142 @@ +--- +title: +slug: Web/HTML/Element/abbr +translation_of: Web/HTML/Element/abbr +--- +

Sommario

+ +

L' elemento HTML <abbr> (o elemento HTML di abbreviazione) rappresenta un' abbreviazione e opzionalmente fornisce una descrizione completa. Se presente, l' attributo title deve contenere la descrizione completa e nient' altro.

+ +
+

Note d' uso: Quando presente, il numero grammaticale del testo presente nell' attributo title deve corrispondere a quello contentuto nell' elemento <abbr>. Questo è il caso di lingue con più di due numeri grammaticali (ad esempio, l' arabo non ha solo singolare e plurale, ma anche duale).

+
+ + + +

Attributi

+ +

Questo elemento include solo gli attributi globali.

+ +

Si usa l' attributo title per definire la descrizione completa dell' abbreviazione. Molti user agent lo presentano come un suggerimento.

+ +

Stile di default

+ +

Lo scopo di questo elemento è puramente per convenienza dell'autore e tutti i browser lo visualizzano in linea (display: inline) di default, sebbene lo stile di defaul vari da un browser all' altro:

+ + + +

Viene quindi fortemente raccomandato agli autori di siti web di on affidarsi allo stile di default. Ricorda che questo elemento non viene supportato da IE in tutte le versioni precedenti a IE7. Per queste versioni di IE che non permettono l'uso di stili per elementi sconosciuti, lo script seguente si rende necessario per ovviare a questo problema:

+ +
<!--[if lte IE 6]>
+  <script>
+    document.createElement("abbr");
+  </script>
+<![endif]-->
+ +

Esempio

+ +
<p>Tony Blair is the prime minister of the <abbr title="United Kingdom">UK</abbr></p>
+
+ +

Risultato

+ +

Image:Abbr.gif

+ +

Tony Blair is the prime minister of the UK

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-abbr-element.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibità dei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base2.0{{CompatGeckoDesktop(1.0)}}7.01.3{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + + +{{HTMLRef}} diff --git a/files/it/web/html/element/acronym/index.html b/files/it/web/html/element/acronym/index.html new file mode 100644 index 0000000000..57180f14e3 --- /dev/null +++ b/files/it/web/html/element/acronym/index.html @@ -0,0 +1,118 @@ +--- +title: +slug: Web/HTML/Element/acronym +translation_of: Web/HTML/Element/acronym +--- +
{{obsolete_header}}
+ +

Sommario

+ +

L'elemento HTML <acronym> permette all'autore di indicare che una sequenza di caratteri è un acronimo o un'abbreviazione.

+ +
+

Nota: Questo elemento è stato rimosso in HTML5. Gli sviluppatori dovrebbero usare l'elemento {{HTMLElement("abbr")}}.

+
+ +

Attributi

+ +

Questo elemento supporta solo gli attributi globali, comuni a tutti gli elementi.

+ +

Interfaccia DOM

+ +

Questo elemento implementa l'interfaccia {{domxref("HTMLElement")}}.

+ +
Nota: Fino a Geko 1.9.2, Firefox implementava l'interfaccia {{domxref("HTMLSpanElement")}}.
+ +

Esempio

+ +
<p>Il <acronym title="World Wide Web">WWW</acronym> è solo uno dei componenti di Internet.</p>
+
+ +

Aspetto predefinito

+ +

Dato che questo tag serve solo per la comodità dell'autore, il suo aspetto di default cambia in ogni browser:

+ +
    +
  • In alcuni browser, come Internet Explorer, questo elemento appare esattamente come uno {{HTMLElement("span")}}.
    • +
  • Opera, Firefox e alcuni altri browser aggiungono una linea di puntini sotto il contenuto dell'elemento.
    • +
  • Alcuni browser non solo aggiungono una lina di puntini, ma ne mostrano anche il contenuto in maiuscolo. Per evitare questo comportamento, si può usare la proprietà CSS {{cssxref("font-variant")}}: none.
    • +
+ +

Qundi è particolarmente consigliato agli sviluppatori di non affidarsi allo stile predefinito.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Supporto di base{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +

Vedi anche

+ +
    +
  • L'elemento HTML {{HTMLElement("abbr")}}.
    • +
+ +
{{HTMLRef}}
diff --git a/files/it/web/html/element/address/index.html b/files/it/web/html/element/address/index.html new file mode 100644 index 0000000000..efc68172a4 --- /dev/null +++ b/files/it/web/html/element/address/index.html @@ -0,0 +1,120 @@ +--- +title:
+slug: Web/HTML/Element/address +translation_of: Web/HTML/Element/address +--- +

Sommario

+

L'elemento HTML <address> (indirizzo) può essere usato dagli autori per fornire informazioni di contatto per il più vicino {{HTMLElement("article")}} oppure per il progenitore {{HTMLElement("body")}}; in quest'ultimo caso, viene applicato all'intero documento.

+
+

Note d'uso:

+
    +
  • Per rappresentare un indirizzo arbitrario, che non sia relativo alle informazioni di contatto, si usa l'elemento {{HTMLElement("p")}}  anzichè l'elemento <address>.
    • +
  • Questo elemento non deve contenere ulteriori informazioni oltre a quelle di contatto, come la data di pubblicazione (che appartiene all'elemento {{HTMLElement("time")}}).
    • +
  • Tipicamente un elemento <address> può essere eventualmente posto dentro l'elemento {{HTMLElement("footer")}} della sezione corrente.
    • +
+
+
    +
  • Aree tematiche Contenuti del flusso, contenuto tangibile.
    • +
  • Contenuto consentito Contenuti del flusso, ma senza elementi <address> nidificati, no contenuti di intestazione ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), no contenuti di sezione ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), e no negli elementi {{HTMLElement("header")}} o {{HTMLElement("footer")}}.
    • +
  • Omissione TagNessuno, sia il tag di apertura, sia quello di chiusura sono obbligatori.
    • +
  • Elementi padre consentiti Qualsiasi elemento che accetta contenuti del flusso.
    • +
  • Interfaccia DOM {{domxref("HTMLElement")}} Prima di Gecko 2.0 (Firefox 4), Gecko implementava questo elemento usanto l'interfaccia {{domxref("HTMLSpanElement")}}
    • +
+

Attributi

+

Questo elemento include solo attributi globali.

+

Esempio

+
  <address>
+    You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
+    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
+    You may also want to visit us:<br>
+    Mozilla Foundation<br>
+    1981 Landings Drive<br>
+    Building K<br>
+    Mountain View, CA 94043-0801<br>
+    USA
+  </address>
+
+

Il codice HTML sopra visualizzerà:

+

Image:HTML-address.png

+

Sebbene l'elemento indirizzo visualizzi il testo con gli stessi stili di default degli elementi {{HTMLElement("i")}} o {{HTMLElement("em")}}, esso risulta più appropriato da utilizzare quando si tratta di informazioni di contatto per come convoglia informazioni semantiche addizionali.

+

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-address-element.html#the-address-element', '<address>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}{{Spec2('HTML4.01')}} 
+

Compatilità dei Browser

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7")}}1.05.121.0
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.7")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+

Vedi anche

+
    +
  • Altri elementi relativi alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};
    • +
  • Sections and outlines of an HTML5 document.
    • +
+

{{HTMLRef}}

diff --git a/files/it/web/html/element/applet/index.html b/files/it/web/html/element/applet/index.html new file mode 100644 index 0000000000..aa16b21fa8 --- /dev/null +++ b/files/it/web/html/element/applet/index.html @@ -0,0 +1,120 @@ +--- +title: +slug: Web/HTML/Element/applet +translation_of: Web/HTML/Element/applet +--- +
{{obsolete_header}}
+ +

Sommario

+ +

L'elemento HTML <applet> serve a includere un'applet Java.

+ +
+

Nota: Questo elemento è stato rimosso in HTML5. Gli sviluppatori dovrebbero usare l'elemento più generico {{HTMLElement("object")}}.

+
+ +

Attributi

+ +
+
{{htmlattrdef("align")}}
+
Questo attributo specifica la posizione dell'applet nella pagina relativamente al contenuto intorno ad essa. La specifica HTML 4.01 definisce i valori bottom, left, middle, right e top; Microsoft e Netscape supportano anche i valori absbottom, absmiddle, baseline, center e texttop.
+
{{htmlattrdef("alt")}}
+
Questo attributo definisce un testo da mostrare nei browser che non supportano Java. Ricordare che anche il contenuto dell'elemento <applet> potrebbe essere mostrato come testo alternativo.
+
{{htmlattrdef("archive")}}
+
Questo attributo è un riferimento a una versione compressa dell'applet, che potrebbe aiutare a ridurre il tempo necessario al download.
+
{{htmlattrdef("code")}}
+
Questo attributo specifica l'URL del file principale dell'applet da eseguire. I file delle Applet devono avere l'estensione .class. L'URL specificato può essere relativo all'attributo codebase.
+
{{htmlattrdef("codebase")}}
+
Questo attributo l'URL (assoluto o relativo) della cartella che contiene i file .class specificati nell'attributo code.
+
{{htmlattrdef("datafld")}}
+
Questo attributo, supportato a partire dalla versione 4 di Internet Explorer, specifica il nome della colonna dell'oggetto di origine che fornisce i dati associati. Questo attributo potrebbe essere usato per specificare i vari elementi {{HTMLElement("param")}} passati all'applet Java.
+
{{htmlattrdef("datasrc")}}
+
Come datafld, questo attributo è usato per associare i dati in Internet Explorer 4. Indica l'id dell'oggetto di origine che fornisce i dati associati agli elementi {{HTMLElement("param")}} associati all'applet.
+
{{htmlattrdef("height")}}
+
Questo attributo specifica l'altezza dell'applet, in pixel.
+
{{htmlattrdef("hspace")}}
+
Questo attributo specifica quanto spazio, in pixel, lasciare ai lati dell'applet.
+
{{htmlattrdef("mayscript")}}
+
In Netscape, questo attributo permette l'accesso all'applet da parte degli scipt inclusi nella pagina.
+
{{htmlattrdef("name")}}
+
Questo attributo assegna un nome all'applet, cos' che possa essere identificata da altri script.
+
{{htmlattrdef("object")}}
+
Questo attributo specifica l'URL della rappresentazione serializzata dell'applet.
+
{{htmlattrdef("src")}}
+
Questo attributo, definito a partire dalla versione 4 di Internet Explorer, specifica l'URL di un file associato all'applet. Il suo significato e il suo utilizzo è poco chiaro e non è parte di nessuno standard HTML.
+
{{htmlattrdef("vspace")}}
+
+
Questo attributo specifica quanto spazio, in pixel, lasciare sopra e sotto l'applet.
+
+
{{htmlattrdef("width")}}
+
Questo attributo specifica la larghezza dell'applet, in pixel.
+
+ +

Esempio

+ +
<applet code="gioco.class" align="left" archive="gioco.zip" height="250" width="350">
+  <param name="difficoltà" value="facile">
+  <b>Per usare questo gioco è necessario Java.</b>
+</applet>
+
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Supporto di base{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Note

+ +
    +
  • La specifica del W3C scoraggia l'uso del tag <applet> in favore dell'elemento {{HTMLElement("object")}}.
    • +
  • Questo elemento è deprecato nella versione strict dell'HTML 4.01 e obsoleto in HTML 5.
    • +
+ +
{{HTMLRef}}
diff --git a/files/it/web/html/element/area/index.html b/files/it/web/html/element/area/index.html new file mode 100644 index 0000000000..04e90cebd6 --- /dev/null +++ b/files/it/web/html/element/area/index.html @@ -0,0 +1,191 @@ +--- +title: +slug: Web/HTML/Element/area +translation_of: Web/HTML/Element/area +--- +

Sommario

+ +

L'elemento HTML <area> definisce una regione accessibile su di un immagine, e opzionalmente viene associata con un collegamento ipertestuale. Questo elemento è usato solo con l'elemento {{HTMLElement("map")}}.

+ +
    +
  • Aree tematiche Contenuti di flusso, contenuto delle espressioni.
    • +
  • Contenuto consentito Vuoto; è un elemento nullo.
    • +
  • Omissione Tag Nessuna, sia il tag di apertura, sia quello di chiusura sono obbligatori.
    • +
  • Elementi padre consentiti Qualsiasi elemento che accetta contenuto delle espressioni. L'elemento <area> deve avere un antenato {{HTMLElement("map")}}, ma che non necessita essere un genitore diretto.
    • +
  • Interfaccia DOM {{domxref("HTMLAreaElement")}}
    • +
+ +

Attributi

+ +

Questo elemento include gli attributi globali.

+ +
+
{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Specifica un acceleratore per la navigazione da tastiera per l'elemento. Premendo ALT, o una chiave simile, e contemporaneamente uno specifico carattere, si seleziona il comportamento correlato con quella specifica sequenza digitata. Chi disegna la pagina deve evitare sequenze riservate al browser. Questo attributo è globale a partire dalle specifiche HTML5.
+
+ +
+
{{htmlattrdef("alt")}}
+
Una stringa di testo alternativa da visualizzare sui browser che non mostrano le immagini. Il testo dovrebbe essere tale da garantire all'utente lo stesso tipo di scelte che avrebbe visualizzando l'immagine senza il testo alternativo. In HTML4, questo attributo è necessario, ma potrebbe essere anche una stringa vuota (""). In HTML5, questo attributo è richiesto solo se presente l'attributo href.
+
+ +
+
{{htmlattrdef("coords")}}
+
Una serie di valori che specificano le coordinate di una regione selezionabile. Il numero ed il significato dei valori dipendono dal valore specificato per l'attributo shape. Per un rect o forma rettangolare, il valore di coords consiste in due coppie x,y: sinistra, su, destra e giù. Per un circle o forma circolare, i valori sono x,y,r dove x,y è la coppia di coordinate che specifica il centro del cerchio e r è il valore del raggio. Per un poly o forma poligonale, il valore è un insieme di coppie x,y per ogni punto nel poligono: x1,y1,x2,y2,x3,y3, ecc... In HTML4, i valori sono il numero di pixels o una percentuale, se il numero è seguito dal relativo simbolo (%); in HTML5, i valori sono il numero dei pixel CSS.
+
+ +
+
{{htmlattrdef("href")}}
+
L'obiettivo del collegamento ipertestuale dell'area. Il suo valore è un URL valido. In HTML4, sia questo che l'attibuto nohref devono essere presenti nell'elemento. In HTML5, questo attributo può essere omesso; se così fosse, l'elemento area non rappresenta un collegamento ipertestuale.
+
+ +
+
{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}
+
Indica la lingua della risorsa linkata. I valori consentiti sono determinati dal BCP47. Questo attributo si può utilizzare se contestualmente presente l'attributo href.
+
+ +
+
{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Definisce un nome per l'area selezionabile così da poterci eseguire uno script da parte dei vecchi browser.
+
+ +
+
{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}
+
Un suggerimento in merito al mezzo di comunicazione per il quale la risorsa è stata disegnata, ad esempio print (stampa) o screen. (schermo). Se omesso, di default viene settato su all (tutti). Utilizzare questo attributo solo se contestualmente presente href.
+
+ +
+
{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Indica che non esiste un collegamento ipertestuale in associazione all'area. O questo attributo o l'attributo href deve essere presente nell'elemento. +
+

Note d'uso: Questo attributo è obsoleto in HTML5, in quanto è sufficiente omettere l'attributo href.

+
+
+
+ +
+
{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}
+
Per le ancore che contengono l' attributo href, questo attributo specifica la relazione tra l' oggetto di destinazione e l' oggetto del collegamento. Il valore è una lista di valori di relazione separata da spazi. I valori e la loro semantica saranno registrati da qualche autorità che potrebbe avere senso per l' autore del documento. La relazione di default, se nessun altra è stata impostata, è void (vuoto/nullo). Usare questo attributo solo se presente l' attributo href.
+
{{htmlattrdef("shape")}}
+
La forma della regione selezionabile associata. Le specifiche per l'HTML 5 e l'HTML 4 definiscono i valori rect, che definisce una regione rettangolare; circle, che definisce una regione circolare; poly, che definisce un generico poligono; e default, che indica l'intera regione al di là della forma definita. Molti browser, in particolare Internet Explorer 4 e superiori, supportano circ, polygon, e rectangle come valori validi per shape; questi valori sono {{Non-standard_inline}}.
+
+ +
+
{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Un valore numerico che specifica la posizione nella tabulazione ordinata definita nel browser. Questo è un attributo globale in HTML5.
+
+ +
+
{{htmlattrdef("target")}}
+
Questo attributo specifica dove deve essere visualizzata la risorsa linkata. In HTML4, questo è il nome, o una parola chiave, per una cornice (frame). In HTML5, è il nome, o parola chiave, di un contesto di navigazione (browsing context )(per esempio, ettichetta, finestra o frame in linea). Le seguenti parole chiave hanno uno speciale significato: +
    +
  • _self: Carica la risposta nella medesima cornice HTML4 (o contesto di navigazione HTML5) come quella attuale. Questo valore è impostato di default se l' attributo non è specificato.
    • +
  • _blank: Carica la risposta in una nuova finestra senza nome nella finestra HTML4 o un nuovo contesto di navigazione HTML5.
    • +
  • _parent: Carica la risposta nel frameset genitore del frame corrente in HTML4 oppure il contesto di navigazione genitore del corrente in HTML5. Se non ci fosse il genitore, questa opzione si comporta allo stesso modo di _self.
    • +
  • _top: In HTML4: Carica la risposta dentro la finestra originale completa, cancellando gli altri frame. In HTML5: Carica la risposta nel primo livello del contesto di navigazione (cioè, il contesto di navigazione che è un antenato di quello corrente, e non ha padre). Se non ha padre, il comportamento di questa opzione coincide con _self.
    • +
+ Usa questo attributo solo se presente l' attributo href.
+
{{htmlattrdef("type")}}
+
Questo attributo specifica il tipo di supporto, sotto forma di un tipo MIME per la destinazione del collegamento. In generale, questo è fornito esclusivamente come informazione consultiva; tuttavia, in futuro un browser potrebbe aggiungere una picco icona per i tipi multimediali. Per esempio, un browser potrebbe aggiungere una piccola icona con un microfono queando il tipo è settato come audio/wav. Per una lista completa dei tipi MIME riconosciuti, consulta http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Usa questo attributo solo se presente l' attributo href.
+
+ +

Esempio

+ +
<map name="primary">
+  <area shape="circle" coords="200,250,25" href="another.htm" />
+  <area shape="default" nohref />
+</map>
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-area-element.html#the-area-element', '<area>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilità dei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Note

+ +
    +
  • Nelle specifiche HTML 3.2, 4.0, e 5, il tag di chiusura </area> è proibito.
    • +
  • Le specifiche XHTML 1.0 richiedono una barra finale: <area />.
    • +
  • Gli attributi id, class, e style hanno il medesimo significato attribuito nelle specifiche HTML 4, ma vengono definiti solo da Netscape e Microsoft.
    • +
  • I browser Netscape di livello 1 non interpretano l'attributo target quando riferito ad un frame.
    • +
  • HTML 3.2 definisce solo alt, coords, href, nohref, e shape.
    • +
+ +

{{HTMLRef}}

diff --git a/files/it/web/html/element/article/index.html b/files/it/web/html/element/article/index.html new file mode 100644 index 0000000000..cdf8b222dc --- /dev/null +++ b/files/it/web/html/element/article/index.html @@ -0,0 +1,119 @@ +--- +title:
+slug: Web/HTML/Element/article +translation_of: Web/HTML/Element/article +--- +

L'elemento HTML <article> rappresenta una composizione autocontenuta in un documento, una pagina, un'applicazione, o un sito, intesa per essere distribuita indipendentemente o riutilizzata, per esempio, nell'aggregazione. Esempi sono un articolo su un forum, un articolo di rivista o di giornale, un articolo su un blog, un commento inserito da un utente, un widget o un gadget interattivi, o qualsiasi altro contenuto indipendente. Ogni <article> dovrebbe essere identificato, generalmente, includendo un'intestazione (elementi h1-h6) come figlia dell'elemento <article>.

+ +
+

Note d'uso:

+ +
    +
  • Quando un elemento <article> è annidato, l'elemento più interno rappresenta un articolo collegato all'elemento più esterno. Per esempio, i commenti di un articolo su un blog possono essere elementi <article> annidati nell'elemento <article> che rappresenta il post sul blog.
    • +
  • Le informazioni sull'autore di un elemento <article> possono essere fornite attraverso l'elemento {{HTMLElement("address")}}, ma non si applicano agli elementi<article> annidati.
    • +
  • La data e l'ora di pubblicazione di un elemento <article> possono essere descritte usando l'attributo {{htmlattrxref("pubdate", "time")}} di un elemento {{HTMLElement("time")}}.
    • +
+
+ +
    +
  • Categorie di contenuti flow content, sectioning content, palpable content.
    • +
  • Contenuti consentitiflow content.
    • +
  • Omissione del tag {{no_tag_omission}}
    • +
  • Elementi genitore permessiQualsiasi elemento che accetti contenuto di flusso. Notare che un elemento <article> non deve essere un discendente di un elemento {{HTMLElement("address")}}.
    • +
  • Interfaccia DOM {{domxref("HTMLElement")}}
    • +
+ +

Attributi

+ +

Questo elemento include solamente gli attributi globali.

+ +

Esempio

+ +
<article>
+  <h4>Un articolo veramente fantastico</h4>
+  <p>Un sacco di testo fantastico.</p>
+</article>
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5 W3C')}} 
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base5{{CompatGeckoDesktop("2.0")}}9.011.104.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base2.2{{CompatGeckoMobile("2.0")}}9.011.05.0 (iOS 4.2)
+
+ +

Vedi anche

+ +
    +
  • Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
    • +
  • Sezioni e indici nei documenti HTML5.
    • +
+ +

{{ HTMLRef }}

diff --git a/files/it/web/html/element/aside/index.html b/files/it/web/html/element/aside/index.html new file mode 100644 index 0000000000..0aa21273e5 --- /dev/null +++ b/files/it/web/html/element/aside/index.html @@ -0,0 +1,134 @@ +--- +title: