From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/bn/_redirects.txt | 9 + files/bn/_wikihistory.json | 989 +++++++ files/bn/archive/apps/advanced_topics/index.html | 86 + files/bn/archive/apps/index.html | 8 + .../b2g_os/application_development/index.html | 16 + files/bn/archive/b2g_os/apps/index.html | 49 + .../writing_a_web_app_for_firefox_os/index.html | 44 + .../automated_testing/gaia-ui-tests/index.html | 73 + .../part_1_marionette_firefox_os_start/index.html | 101 + .../index.html | 78 + .../gaia-ui-tests/part_3_reusable_tests/index.html | 129 + .../index.html | 108 + .../part_5_introducing_a_test_runner/index.html | 187 ++ .../part_7_writing_your_own_tests/index.html | 46 + .../part_8_using_a_base_class/index.html | 98 + .../gaia-ui-tests/part_9_app_objects/index.html | 58 + .../bn/archive/b2g_os/automated_testing/index.html | 104 + .../marionette_for_interactive_python/index.html | 78 + .../b2g_os/automated_testing/reftests/index.html | 99 + .../setting_up_marionette/index.html | 49 + .../writing_gaia_unit_tests/index.html | 106 + .../b2g_os/automated_testing/xpcshell/index.html | 55 + files/bn/archive/b2g_os/building/index.html | 227 ++ .../index.html | 140 + .../firefox_os_build_overview/index.html | 107 + .../firefox_os_update_packages/index.html | 242 ++ .../building_and_installing_firefox_os/index.html | 70 + .../building_b2g_for_qemu_emulator/index.html | 37 + .../choosing_how_to_run_gaia_or_b2g/index.html | 57 + .../index.html | 106 + .../index.html | 63 + .../debugging/debugging_b2g_using_gdb/index.html | 83 + .../debugging_b2g_using_valgrind/index.html | 95 + .../b2g_os/debugging/debugging_ooms/index.html | 63 + .../b2g_os/debugging/developer_settings/index.html | 157 + .../firefox_os_crash_reporting/index.html | 115 + files/bn/archive/b2g_os/debugging/index.html | 84 + .../b2g_os/debugging/installing_adb/index.html | 98 + .../debugging/on-device_console_logging/index.html | 64 + .../archive/b2g_os/debugging/setting_up/index.html | 37 + .../b2g_os/debugging/taking_screenshots/index.html | 66 + .../testing_in_a_privileged_context/index.html | 67 + .../b2g_os/developer_preview_phone/index.html | 20 + .../customizing_the_b2g.sh_script/index.html | 44 + .../customizing_the_keyboard/index.html | 66 + .../filing_bugs_against_firefox_os/index.html | 135 + .../b2g_os/developing_firefox_os/index.html | 59 + .../localizing_firefox_os/index.html | 98 + .../modifying_hosts_file/index.html | 37 + .../developing_gaia/build_system_primer/index.html | 120 + .../customizing_build-time_apps/index.html | 89 + files/bn/archive/b2g_os/developing_gaia/index.html | 53 + .../making_gaia_code_changes/index.html | 68 + .../running_the_gaia_codebase/index.html | 43 + .../submitting_a_gaia_patch/index.html | 74 + .../testing_gaia_code_changes/index.html | 122 + .../index.html | 77 + .../firefox_os_build_prerequisites/index.html | 378 +++ files/bn/archive/b2g_os/firefox_os_faq/index.html | 27 + .../b2g_os/firefox_os_usage_tips/index.html | 28 + files/bn/archive/b2g_os/index.html | 171 ++ .../installing_on_a_mobile_device/index.html | 129 + files/bn/archive/b2g_os/introduction/index.html | 96 + files/bn/archive/b2g_os/pandaboard/index.html | 68 + .../alcatel_onetouch_firec_4020d/index.html | 49 + .../index.html | 92 + .../firefox_os_device_features/index.html | 73 + .../bn/archive/b2g_os/phone_guide/flame/index.html | 69 + .../geeksphone/geeksphone_faq/index.html | 219 ++ .../b2g_os/phone_guide/geeksphone/index.html | 171 ++ files/bn/archive/b2g_os/phone_guide/index.html | 8 + .../phone_guide/symphony_gofox_f15/index.html | 61 + .../archive/b2g_os/phone_guide/zte_open/index.html | 191 ++ .../b2g_os/platform/apps_architecture/index.html | 25 + .../b2g_os/platform/architecture/index.html | 673 +++++ .../platform/feature_support_chart/index.html | 156 + files/bn/archive/b2g_os/platform/gonk/index.html | 24 + files/bn/archive/b2g_os/platform/index.html | 88 + .../index.html | 61 + .../b2g_os/platform/settings_list/index.html | 724 +++++ .../gaia_apps/browser/index.html" | 107 + .../gaia_apps/index.html" | 78 + .../gaia_apps/settings/index.html" | 75 + .../gaia_apps/system/index.html" | 229 ++ .../gaia_apps/video/index.html" | 27 + .../gaia_apps/window_management/index.html" | 287 ++ .../index.html" | 61 + .../introduction_to_gaia/index.html" | 29 + .../lockscreen_architecture_(v1.5_)/index.html" | 38 + .../weinre_as_remote_debugger/index.html" | 72 + files/bn/archive/b2g_os/porting/index.html | 77 + .../preparing_for_your_first_b2g_build/index.html | 136 + files/bn/archive/b2g_os/quickstart/index.html | 49 + .../b2g_os/quickstart/your_first_app/index.html | 212 ++ .../index.html" | 55 + files/bn/archive/b2g_os/releases/1.0.1/index.html | 105 + files/bn/archive/b2g_os/releases/1.1/index.html | 94 + files/bn/archive/b2g_os/releases/1.3/index.html | 128 + files/bn/archive/b2g_os/releases/1.4/index.html | 79 + files/bn/archive/b2g_os/releases/2.0/index.html | 27 + files/bn/archive/b2g_os/releases/index.html | 22 + .../releases/\340\247\247.\340\247\250/index.html" | 469 +++ files/bn/archive/b2g_os/resources/index.html | 58 + files/bn/archive/b2g_os/samsung_nexus_s/index.html | 62 + .../security/application_security/index.html | 135 + .../debugging_and_security_testing/index.html | 85 + files/bn/archive/b2g_os/security/index.html | 53 + .../intercepting_traffic_using_a_proxy/index.html | 86 + files/bn/archive/b2g_os/simulator/index.html | 91 + .../simulator_vs_emulator_vs_device/index.html | 54 + files/bn/archive/b2g_os/treeherder/index.html | 50 + files/bn/archive/b2g_os/troubleshooting/index.html | 28 + .../b2g_os/using_the_app_manager/index.html | 279 ++ .../b2g_os/using_the_b2g_desktop_client/index.html | 167 ++ .../b2g_os/using_the_b2g_emulators/index.html | 81 + .../index.html" | 62 + files/bn/archive/css3/index.html | 576 ++++ files/bn/archive/index.html | 20 + files/bn/archive/mozilla/index.html | 10 + files/bn/archive/mozilla/marketplace/index.html | 104 + .../archive/mozilla/marketplace/options/index.html | 26 + .../marketplace/options/packaged_apps/index.html | 101 + .../marketplace/options/self_publishing/index.html | 144 + .../marketplace/publishing/submit/index.html | 10 + .../index.html" | 122 + .../mozilla/marketplace/submission/index.html | 9 + .../marketplace_review_criteria/index.html | 95 + .../submission/pre-submission_checklist/index.html | 34 + .../submission/rating_your_content/index.html | 117 + files/bn/archive/mozilla/xul/index.html | 84 + files/bn/archive/mozilla/xul/tutorial/index.html | 141 + .../index.html" | 54 + .../creating_a_skin_for_seamonkey_2.x/index.html | 13 + files/bn/dom/index.html | 90 + files/bn/glossary/api/index.html | 20 + files/bn/glossary/bandwidth/index.html | 12 + files/bn/glossary/dhtml/index.html | 16 + files/bn/glossary/index.html | 27 + files/bn/glossary/webrtc/index.html | 37 + files/bn/html/html5/index.html | 180 ++ .../bn/html/html5/introduction_to_html5/index.html | 29 + .../learn/css/howto/generated_content/index.html | 133 + files/bn/learn/css/howto/index.html | 88 + files/bn/learn/css/index.html | 67 + files/bn/learn/html/index.html | 50 + .../bn/learn/html/introduction_to_html/index.html | 73 + .../the_head_metadata_in_html/index.html | 286 ++ files/bn/learn/index.html | 99 + files/bn/learn/javascript/first_steps/index.html | 70 + .../index.html" | 421 +++ files/bn/learn/javascript/index.html | 55 + files/bn/learn/server-side/django/index.html | 64 + files/bn/learn/server-side/first_steps/index.html | 53 + .../first_steps/website_security/index.html | 180 ++ files/bn/learn/server-side/index.html | 59 + files/bn/localization/index.html | 65 + files/bn/mdn/community/index.html | 51 + files/bn/mdn/community/whats_happening/index.html | 28 + .../creating_and_editing_pages/index.html | 25 + files/bn/mdn/contribute/getting_started/index.html | 130 + .../convert_code_samples_to_be_live/index.html | 38 + .../howto/create_an_mdn_account/index.html | 29 + files/bn/mdn/contribute/howto/index.html | 13 + files/bn/mdn/contribute/index.html | 70 + files/bn/mdn/contribute/localize/index.html | 29 + .../index.html" | 52 + files/bn/mdn/guidelines/index.html | 13 + files/bn/mdn/guidelines/style_guide/index.html | 554 ++++ files/bn/mdn/index.html | 38 + files/bn/mdn/structures/index.html | 16 + files/bn/mdn/structures/macros/index.html | 48 + files/bn/mdn_at_ten/index.html | 36 + files/bn/mozilla/add-ons/amo/policy/index.html | 21 + files/bn/mozilla/add-ons/code_snippets/index.html | 194 ++ .../add-ons/code_snippets/toolbar/index.html | 59 + files/bn/mozilla/add-ons/index.html | 95 + .../index.html | 91 + files/bn/mozilla/add-ons/sdk/index.html | 102 + .../adding_a_button_to_the_toolbar/index.html | 64 + files/bn/mozilla/add-ons/sdk/tutorials/index.html | 175 ++ .../add-ons/sdk/tutorials/installation/index.html | 78 + .../add-ons/sdk/tutorials/logging/index.html | 38 + .../add-ons/sdk/tutorials/unit_testing/index.html | 114 + files/bn/mozilla/add-ons/webextensions/index.html | 91 + .../what_are_webextensions/index.html | 95 + .../your_first_webextension/index.html | 143 + .../index.html" | 60 + .../obsolete/index.html" | 9 + files/bn/mozilla/bugzilla/index.html | 54 + files/bn/mozilla/developer_guide/index.html | 89 + .../mozilla/developer_guide/source_code/index.html | 74 + files/bn/mozilla/firefox_for_android/index.html | 64 + files/bn/mozilla/gecko/index.html | 60 + files/bn/mozilla/index.html | 13 + files/bn/mozilla/localization/index.html | 17 + .../localization/l10n_style_guide/index.html | 115 + files/bn/mozilla/mobile/index.html | 26 + .../persona/browser_compatibility/index.html | 86 + files/bn/mozilla/persona/index.html | 176 ++ .../index.html" | 60 + files/bn/mozilla/projects/index.html | 15 + files/bn/mozilla/qa/index.html | 232 ++ .../bn/mozilla/qa/organizing_a_testday/index.html | 202 ++ .../qa/running_web_qa_automated_tests/index.html | 147 + files/bn/mozilla/tech/index.html | 15 + .../index.html" | 115 + .../index.html" | 59 + .../index.html" | 10 + files/bn/rhino/index.html | 16 + files/bn/tools/index.html | 187 ++ files/bn/tools/page_inspector/index.html | 280 ++ files/bn/tools/style_editor/index.html | 94 + files/bn/tools/webide/index.html | 283 ++ files/bn/tools/webide/troubleshooting/index.html | 81 + .../index.html" | 96 + files/bn/web/accessibility/index.html | 65 + files/bn/web/api/battery_status_api/index.html | 156 + files/bn/web/api/event/index.html | 216 ++ files/bn/web/api/event/preventdefault/index.html | 160 ++ files/bn/web/api/index.html | 15 + files/bn/web/api/indexeddb_api/index.html | 182 ++ files/bn/web/api/inputevent/index.html | 98 + files/bn/web/api/stylesheet/index.html | 72 + files/bn/web/css/css_animations/index.html | 136 + files/bn/web/css/css_transforms/index.html | 152 + files/bn/web/css/element()/index.html | 113 + files/bn/web/css/getting_started/color/index.html | 280 ++ .../css/getting_started/how_css_works/index.html | 126 + files/bn/web/css/getting_started/index.html | 27 + .../css/getting_started/readable_css/index.html | 132 + .../web/css/getting_started/text_styles/index.html | 109 + .../web/css/getting_started/why_use_css/index.html | 103 + .../\340\246\250\340\246\207/index.html" | 354 +++ .../index.html" | 301 ++ files/bn/web/css/index.html | 73 + files/bn/web/events/index.html | 3011 ++++++++++++++++++++ files/bn/web/guide/api/dom/index.html | 21 + files/bn/web/guide/api/index.html | 25 + files/bn/web/guide/api/webrtc/index.html | 39 + files/bn/web/guide/events/index.html | 37 + files/bn/web/guide/html/canvas_tutorial/index.html | 47 + .../bn/web/guide/html/content_editable/index.html | 44 + files/bn/web/guide/html/forms/index.html | 342 +++ files/bn/web/guide/index.html | 20 + files/bn/web/guide/performance/index.html | 9 + .../index.html" | 53 + files/bn/web/html/block-level_elements/index.html | 121 + files/bn/web/html/canvas/index.html | 73 + files/bn/web/html/canvas/tutorial/index.html | 42 + .../web/html/cors_settings_attributes/index.html | 130 + files/bn/web/html/element/a/index.html | 495 ++++ files/bn/web/html/element/article/index.html | 110 + files/bn/web/html/element/b/index.html | 159 ++ files/bn/web/html/element/blockquote/index.html | 155 + files/bn/web/html/element/index.html | 216 ++ files/bn/web/html/element/section/index.html | 129 + files/bn/web/html/element/summary/index.html | 144 + .../web/html/focus_management_in_html/index.html | 65 + .../html/global_attributes/accesskey/index.html | 146 + .../global_attributes/contenteditable/index.html | 103 + .../html/global_attributes/draggable/index.html | 101 + .../web/html/global_attributes/hidden/index.html | 105 + files/bn/web/html/global_attributes/index.html | 463 +++ .../web/html/global_attributes/itemprop/index.html | 19 + .../html/global_attributes/itemscope/index.html | 27 + .../web/html/global_attributes/tabindex/index.html | 111 + .../html/global_attributes/translate/index.html | 96 + files/bn/web/html/index.html | 80 + files/bn/web/http/index.html | 90 + files/bn/web/http/status/index.html | 202 ++ files/bn/web/index.html | 82 + .../a_re-introduction_to_javascript/index.html | 968 +++++++ files/bn/web/javascript/data_structures/index.html | 116 + .../javascript/guide/grammar_and_types/index.html | 635 +++++ files/bn/web/javascript/guide/index.html | 123 + files/bn/web/javascript/index.html | 130 + .../inheritance_and_the_prototype_chain/index.html | 177 ++ .../javascript/reference/global_objects/index.html | 177 ++ .../reference/global_objects/isfinite/index.html | 130 + .../reference/global_objects/number/index.html | 218 ++ .../global_objects/number/isfinite/index.html | 125 + files/bn/web/javascript/reference/index.html | 48 + .../web/javascript/reference/statements/index.html | 127 + files/bn/web/javascript/typed_arrays/index.html | 268 ++ .../index.html" | 102 + files/bn/web/reference/index.html | 46 + files/bn/web/svg/element/index.html | 169 ++ files/bn/web/svg/index.html | 93 + files/bn/web_development/index.html | 98 + .../index.html | 131 + files/bn/zones/index.html | 53 + 291 files changed, 35996 insertions(+) create mode 100644 files/bn/_redirects.txt create mode 100644 files/bn/_wikihistory.json create mode 100644 files/bn/archive/apps/advanced_topics/index.html create mode 100644 files/bn/archive/apps/index.html create mode 100644 files/bn/archive/b2g_os/application_development/index.html create mode 100644 files/bn/archive/b2g_os/apps/index.html create mode 100644 files/bn/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_1_marionette_firefox_os_start/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_2_marionette_firefox_os_interactions/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_3_reusable_tests/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_4_reusing_commands_firefox_os_setup/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_5_introducing_a_test_runner/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_7_writing_your_own_tests/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_8_using_a_base_class/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_9_app_objects/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/marionette_for_interactive_python/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/reftests/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/setting_up_marionette/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/writing_gaia_unit_tests/index.html create mode 100644 files/bn/archive/b2g_os/automated_testing/xpcshell/index.html create mode 100644 files/bn/archive/b2g_os/building/index.html create mode 100644 files/bn/archive/b2g_os/building_and_installing_firefox_os/building_firefox_os_for_flame_on_osx/index.html create mode 100644 files/bn/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_overview/index.html create mode 100644 files/bn/archive/b2g_os/building_and_installing_firefox_os/firefox_os_update_packages/index.html create mode 100644 files/bn/archive/b2g_os/building_and_installing_firefox_os/index.html create mode 100644 files/bn/archive/b2g_os/building_b2g_for_qemu_emulator/index.html create mode 100644 files/bn/archive/b2g_os/choosing_how_to_run_gaia_or_b2g/index.html create mode 100644 files/bn/archive/b2g_os/customization_with_the_.userconfig_file/index.html create mode 100644 files/bn/archive/b2g_os/debugging/connecting_a_firefox_os_device_to_the_desktop/index.html create mode 100644 files/bn/archive/b2g_os/debugging/debugging_b2g_using_gdb/index.html create mode 100644 files/bn/archive/b2g_os/debugging/debugging_b2g_using_valgrind/index.html create mode 100644 files/bn/archive/b2g_os/debugging/debugging_ooms/index.html create mode 100644 files/bn/archive/b2g_os/debugging/developer_settings/index.html create mode 100644 files/bn/archive/b2g_os/debugging/firefox_os_crash_reporting/index.html create mode 100644 files/bn/archive/b2g_os/debugging/index.html create mode 100644 files/bn/archive/b2g_os/debugging/installing_adb/index.html create mode 100644 files/bn/archive/b2g_os/debugging/on-device_console_logging/index.html create mode 100644 files/bn/archive/b2g_os/debugging/setting_up/index.html create mode 100644 files/bn/archive/b2g_os/debugging/taking_screenshots/index.html create mode 100644 files/bn/archive/b2g_os/debugging/testing_in_a_privileged_context/index.html create mode 100644 files/bn/archive/b2g_os/developer_preview_phone/index.html create mode 100644 files/bn/archive/b2g_os/developing_firefox_os/customizing_the_b2g.sh_script/index.html create mode 100644 files/bn/archive/b2g_os/developing_firefox_os/customizing_the_keyboard/index.html create mode 100644 files/bn/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html create mode 100644 files/bn/archive/b2g_os/developing_firefox_os/index.html create mode 100644 files/bn/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html create mode 100644 files/bn/archive/b2g_os/developing_firefox_os/modifying_hosts_file/index.html create mode 100644 files/bn/archive/b2g_os/developing_gaia/build_system_primer/index.html create mode 100644 files/bn/archive/b2g_os/developing_gaia/customizing_build-time_apps/index.html create mode 100644 files/bn/archive/b2g_os/developing_gaia/index.html create mode 100644 files/bn/archive/b2g_os/developing_gaia/making_gaia_code_changes/index.html create mode 100644 files/bn/archive/b2g_os/developing_gaia/running_the_gaia_codebase/index.html create mode 100644 files/bn/archive/b2g_os/developing_gaia/submitting_a_gaia_patch/index.html create mode 100644 files/bn/archive/b2g_os/developing_gaia/testing_gaia_code_changes/index.html create mode 100644 files/bn/archive/b2g_os/dual_boot_of_b2g_and_android_on_sgs2/index.html create mode 100644 files/bn/archive/b2g_os/firefox_os_build_prerequisites/index.html create mode 100644 files/bn/archive/b2g_os/firefox_os_faq/index.html create mode 100644 files/bn/archive/b2g_os/firefox_os_usage_tips/index.html create mode 100644 files/bn/archive/b2g_os/index.html create mode 100644 files/bn/archive/b2g_os/installing_on_a_mobile_device/index.html create mode 100644 files/bn/archive/b2g_os/introduction/index.html create mode 100644 files/bn/archive/b2g_os/pandaboard/index.html create mode 100644 files/bn/archive/b2g_os/phone_guide/alcatel_onetouch_firec_4020d/index.html create mode 100644 files/bn/archive/b2g_os/phone_guide/best_practices_open_reference_devices/index.html create mode 100644 files/bn/archive/b2g_os/phone_guide/firefox_os_device_features/index.html create mode 100644 files/bn/archive/b2g_os/phone_guide/flame/index.html create mode 100644 files/bn/archive/b2g_os/phone_guide/geeksphone/geeksphone_faq/index.html create mode 100644 files/bn/archive/b2g_os/phone_guide/geeksphone/index.html create mode 100644 files/bn/archive/b2g_os/phone_guide/index.html create mode 100644 files/bn/archive/b2g_os/phone_guide/symphony_gofox_f15/index.html create mode 100644 files/bn/archive/b2g_os/phone_guide/zte_open/index.html create mode 100644 files/bn/archive/b2g_os/platform/apps_architecture/index.html create mode 100644 files/bn/archive/b2g_os/platform/architecture/index.html create mode 100644 files/bn/archive/b2g_os/platform/feature_support_chart/index.html create mode 100644 files/bn/archive/b2g_os/platform/gonk/index.html create mode 100644 files/bn/archive/b2g_os/platform/index.html create mode 100644 files/bn/archive/b2g_os/platform/out_of_memory_management_on_firefox_os/index.html create mode 100644 files/bn/archive/b2g_os/platform/settings_list/index.html create mode 100644 "files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/browser/index.html" create mode 100644 "files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/index.html" create mode 100644 "files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/settings/index.html" create mode 100644 "files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/system/index.html" create mode 100644 "files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/video/index.html" create mode 100644 "files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/window_management/index.html" create mode 100644 "files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/index.html" create mode 100644 "files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/introduction_to_gaia/index.html" create mode 100644 "files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/lockscreen_architecture_(v1.5_)/index.html" create mode 100644 "files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/weinre_as_remote_debugger/index.html" create mode 100644 files/bn/archive/b2g_os/porting/index.html create mode 100644 files/bn/archive/b2g_os/preparing_for_your_first_b2g_build/index.html create mode 100644 files/bn/archive/b2g_os/quickstart/index.html create mode 100644 files/bn/archive/b2g_os/quickstart/your_first_app/index.html create mode 100644 "files/bn/archive/b2g_os/quickstart/\340\246\223\340\246\252\340\247\207\340\246\250_\340\246\223\340\246\257\340\246\274\340\247\207\340\246\254_\340\246\205\340\247\215\340\246\257\340\246\276\340\246\252_\340\246\252\340\246\260\340\246\277\340\246\232\340\246\277\340\246\244\340\246\277/index.html" create mode 100644 files/bn/archive/b2g_os/releases/1.0.1/index.html create mode 100644 files/bn/archive/b2g_os/releases/1.1/index.html create mode 100644 files/bn/archive/b2g_os/releases/1.3/index.html create mode 100644 files/bn/archive/b2g_os/releases/1.4/index.html create mode 100644 files/bn/archive/b2g_os/releases/2.0/index.html create mode 100644 files/bn/archive/b2g_os/releases/index.html create mode 100644 "files/bn/archive/b2g_os/releases/\340\247\247.\340\247\250/index.html" create mode 100644 files/bn/archive/b2g_os/resources/index.html create mode 100644 files/bn/archive/b2g_os/samsung_nexus_s/index.html create mode 100644 files/bn/archive/b2g_os/security/application_security/index.html create mode 100644 files/bn/archive/b2g_os/security/debugging_and_security_testing/index.html create mode 100644 files/bn/archive/b2g_os/security/index.html create mode 100644 files/bn/archive/b2g_os/security/intercepting_traffic_using_a_proxy/index.html create mode 100644 files/bn/archive/b2g_os/simulator/index.html create mode 100644 files/bn/archive/b2g_os/simulator_vs_emulator_vs_device/index.html create mode 100644 files/bn/archive/b2g_os/treeherder/index.html create mode 100644 files/bn/archive/b2g_os/troubleshooting/index.html create mode 100644 files/bn/archive/b2g_os/using_the_app_manager/index.html create mode 100644 files/bn/archive/b2g_os/using_the_b2g_desktop_client/index.html create mode 100644 files/bn/archive/b2g_os/using_the_b2g_emulators/index.html create mode 100644 "files/bn/archive/b2g_os/\340\246\253\340\246\276\340\246\257\340\246\274\340\246\276\340\246\260\340\246\253\340\246\225\340\247\215\340\246\270_\340\246\223\340\246\217\340\246\270_\340\246\270\340\246\277\340\246\256\340\247\201\340\246\262\340\247\207\340\246\237\340\246\260_\340\246\254\340\247\215\340\246\257\340\246\254\340\246\271\340\246\276\340\246\260_\340\246\225\340\246\260\340\246\276/index.html" create mode 100644 files/bn/archive/css3/index.html create mode 100644 files/bn/archive/index.html create mode 100644 files/bn/archive/mozilla/index.html create mode 100644 files/bn/archive/mozilla/marketplace/index.html create mode 100644 files/bn/archive/mozilla/marketplace/options/index.html create mode 100644 files/bn/archive/mozilla/marketplace/options/packaged_apps/index.html create mode 100644 files/bn/archive/mozilla/marketplace/options/self_publishing/index.html create mode 100644 files/bn/archive/mozilla/marketplace/publishing/submit/index.html create mode 100644 "files/bn/archive/mozilla/marketplace/publishing/submit/\340\246\223\340\246\255\340\246\276\340\246\260\340\246\255\340\246\277\340\246\211/index.html" create mode 100644 files/bn/archive/mozilla/marketplace/submission/index.html create mode 100644 files/bn/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html create mode 100644 files/bn/archive/mozilla/marketplace/submission/pre-submission_checklist/index.html create mode 100644 files/bn/archive/mozilla/marketplace/submission/rating_your_content/index.html create mode 100644 files/bn/archive/mozilla/xul/index.html create mode 100644 files/bn/archive/mozilla/xul/tutorial/index.html create mode 100644 "files/bn/archive/mozilla/xul/tutorial/\340\246\270\340\247\202\340\246\232\340\246\250\340\246\276/index.html" create mode 100644 files/bn/creating_a_skin_for_seamonkey_2.x/index.html create mode 100644 files/bn/dom/index.html create mode 100644 files/bn/glossary/api/index.html create mode 100644 files/bn/glossary/bandwidth/index.html create mode 100644 files/bn/glossary/dhtml/index.html create mode 100644 files/bn/glossary/index.html create mode 100644 files/bn/glossary/webrtc/index.html create mode 100644 files/bn/html/html5/index.html create mode 100644 files/bn/html/html5/introduction_to_html5/index.html create mode 100644 files/bn/learn/css/howto/generated_content/index.html create mode 100644 files/bn/learn/css/howto/index.html create mode 100644 files/bn/learn/css/index.html create mode 100644 files/bn/learn/html/index.html create mode 100644 files/bn/learn/html/introduction_to_html/index.html create mode 100644 files/bn/learn/html/introduction_to_html/the_head_metadata_in_html/index.html create mode 100644 files/bn/learn/index.html create mode 100644 files/bn/learn/javascript/first_steps/index.html create mode 100644 "files/bn/learn/javascript/first_steps/\340\246\234\340\246\276\340\246\255\340\246\276\340\246\270\340\247\215\340\246\225\340\247\215\340\246\260\340\246\277\340\246\252\340\247\215\340\246\237-\340\246\225\340\247\200/index.html" create mode 100644 files/bn/learn/javascript/index.html create mode 100644 files/bn/learn/server-side/django/index.html create mode 100644 files/bn/learn/server-side/first_steps/index.html create mode 100644 files/bn/learn/server-side/first_steps/website_security/index.html create mode 100644 files/bn/learn/server-side/index.html create mode 100644 files/bn/localization/index.html create mode 100644 files/bn/mdn/community/index.html create mode 100644 files/bn/mdn/community/whats_happening/index.html create mode 100644 files/bn/mdn/contribute/creating_and_editing_pages/index.html create mode 100644 files/bn/mdn/contribute/getting_started/index.html create mode 100644 files/bn/mdn/contribute/howto/convert_code_samples_to_be_live/index.html create mode 100644 files/bn/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/bn/mdn/contribute/howto/index.html create mode 100644 files/bn/mdn/contribute/index.html create mode 100644 files/bn/mdn/contribute/localize/index.html create mode 100644 "files/bn/mdn/contribute/localize/\340\246\252\340\247\207\340\246\207\340\246\234_\340\246\205\340\246\250\340\247\201\340\246\254\340\246\276\340\246\246/index.html" create mode 100644 files/bn/mdn/guidelines/index.html create mode 100644 files/bn/mdn/guidelines/style_guide/index.html create mode 100644 files/bn/mdn/index.html create mode 100644 files/bn/mdn/structures/index.html create mode 100644 files/bn/mdn/structures/macros/index.html create mode 100644 files/bn/mdn_at_ten/index.html create mode 100644 files/bn/mozilla/add-ons/amo/policy/index.html create mode 100644 files/bn/mozilla/add-ons/code_snippets/index.html create mode 100644 files/bn/mozilla/add-ons/code_snippets/toolbar/index.html create mode 100644 files/bn/mozilla/add-ons/index.html create mode 100644 files/bn/mozilla/add-ons/performance_best_practices_in_extensions/index.html create mode 100644 files/bn/mozilla/add-ons/sdk/index.html create mode 100644 files/bn/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html create mode 100644 files/bn/mozilla/add-ons/sdk/tutorials/index.html create mode 100644 files/bn/mozilla/add-ons/sdk/tutorials/installation/index.html create mode 100644 files/bn/mozilla/add-ons/sdk/tutorials/logging/index.html create mode 100644 files/bn/mozilla/add-ons/sdk/tutorials/unit_testing/index.html create mode 100644 files/bn/mozilla/add-ons/webextensions/index.html create mode 100644 files/bn/mozilla/add-ons/webextensions/what_are_webextensions/index.html create mode 100644 files/bn/mozilla/add-ons/webextensions/your_first_webextension/index.html create mode 100644 "files/bn/mozilla/add-ons/\340\246\245\340\246\277\340\246\256/index.html" create mode 100644 "files/bn/mozilla/add-ons/\340\246\245\340\246\277\340\246\256/obsolete/index.html" create mode 100644 files/bn/mozilla/bugzilla/index.html create mode 100644 files/bn/mozilla/developer_guide/index.html create mode 100644 files/bn/mozilla/developer_guide/source_code/index.html create mode 100644 files/bn/mozilla/firefox_for_android/index.html create mode 100644 files/bn/mozilla/gecko/index.html create mode 100644 files/bn/mozilla/index.html create mode 100644 files/bn/mozilla/localization/index.html create mode 100644 files/bn/mozilla/localization/l10n_style_guide/index.html create mode 100644 files/bn/mozilla/mobile/index.html create mode 100644 files/bn/mozilla/persona/browser_compatibility/index.html create mode 100644 files/bn/mozilla/persona/index.html create mode 100644 "files/bn/mozilla/persona/\340\246\206\340\246\250\340\247\215\340\246\244\340\246\260\340\247\215\340\246\234\340\246\276\340\246\244\340\246\277\340\246\225\340\246\276\340\246\257\340\246\274\340\246\250/index.html" create mode 100644 files/bn/mozilla/projects/index.html create mode 100644 files/bn/mozilla/qa/index.html create mode 100644 files/bn/mozilla/qa/organizing_a_testday/index.html create mode 100644 files/bn/mozilla/qa/running_web_qa_automated_tests/index.html create mode 100644 files/bn/mozilla/tech/index.html create mode 100644 "files/bn/mozilla/\340\246\241\340\247\207\340\246\255\340\246\262\340\246\252\340\246\276\340\246\260_\340\246\252\340\247\215\340\246\260\340\247\213\340\246\227\340\247\215\340\246\260\340\246\276\340\246\256/index.html" create mode 100644 "files/bn/mozilla/\340\246\253\340\246\276\340\246\257\340\246\274\340\246\276\340\246\260\340\246\253\340\246\225\340\247\215\340\246\270/index.html" create mode 100644 "files/bn/mozilla/\340\246\253\340\246\276\340\246\257\340\246\274\340\246\276\340\246\260\340\246\253\340\246\225\340\247\215\340\246\270/\340\246\260\340\246\277\340\246\262\340\246\277\340\246\234\340\246\270/index.html" create mode 100644 files/bn/rhino/index.html create mode 100644 files/bn/tools/index.html create mode 100644 files/bn/tools/page_inspector/index.html create mode 100644 files/bn/tools/style_editor/index.html create mode 100644 files/bn/tools/webide/index.html create mode 100644 files/bn/tools/webide/troubleshooting/index.html create mode 100644 "files/bn/tools/\340\246\244\340\247\215\340\246\260\340\246\277\340\246\256\340\246\276\340\246\244\340\247\215\340\246\260\340\246\277\340\246\225_\340\246\246\340\246\260\340\247\215\340\246\266\340\246\250/index.html" create mode 100644 files/bn/web/accessibility/index.html create mode 100644 files/bn/web/api/battery_status_api/index.html create mode 100644 files/bn/web/api/event/index.html create mode 100644 files/bn/web/api/event/preventdefault/index.html create mode 100644 files/bn/web/api/index.html create mode 100644 files/bn/web/api/indexeddb_api/index.html create mode 100644 files/bn/web/api/inputevent/index.html create mode 100644 files/bn/web/api/stylesheet/index.html create mode 100644 files/bn/web/css/css_animations/index.html create mode 100644 files/bn/web/css/css_transforms/index.html create mode 100644 files/bn/web/css/element()/index.html create mode 100644 files/bn/web/css/getting_started/color/index.html create mode 100644 files/bn/web/css/getting_started/how_css_works/index.html create mode 100644 files/bn/web/css/getting_started/index.html create mode 100644 files/bn/web/css/getting_started/readable_css/index.html create mode 100644 files/bn/web/css/getting_started/text_styles/index.html create mode 100644 files/bn/web/css/getting_started/why_use_css/index.html create mode 100644 "files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" create mode 100644 "files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" create mode 100644 files/bn/web/css/index.html create mode 100644 files/bn/web/events/index.html create mode 100644 files/bn/web/guide/api/dom/index.html create mode 100644 files/bn/web/guide/api/index.html create mode 100644 files/bn/web/guide/api/webrtc/index.html create mode 100644 files/bn/web/guide/events/index.html create mode 100644 files/bn/web/guide/html/canvas_tutorial/index.html create mode 100644 files/bn/web/guide/html/content_editable/index.html create mode 100644 files/bn/web/guide/html/forms/index.html create mode 100644 files/bn/web/guide/index.html create mode 100644 files/bn/web/guide/performance/index.html create mode 100644 "files/bn/web/guide/\340\246\227\340\247\215\340\246\260\340\246\276\340\246\253\340\246\277\340\246\225\340\247\215\340\246\270/index.html" create mode 100644 files/bn/web/html/block-level_elements/index.html create mode 100644 files/bn/web/html/canvas/index.html create mode 100644 files/bn/web/html/canvas/tutorial/index.html create mode 100644 files/bn/web/html/cors_settings_attributes/index.html create mode 100644 files/bn/web/html/element/a/index.html create mode 100644 files/bn/web/html/element/article/index.html create mode 100644 files/bn/web/html/element/b/index.html create mode 100644 files/bn/web/html/element/blockquote/index.html create mode 100644 files/bn/web/html/element/index.html create mode 100644 files/bn/web/html/element/section/index.html create mode 100644 files/bn/web/html/element/summary/index.html create mode 100644 files/bn/web/html/focus_management_in_html/index.html create mode 100644 files/bn/web/html/global_attributes/accesskey/index.html create mode 100644 files/bn/web/html/global_attributes/contenteditable/index.html create mode 100644 files/bn/web/html/global_attributes/draggable/index.html create mode 100644 files/bn/web/html/global_attributes/hidden/index.html create mode 100644 files/bn/web/html/global_attributes/index.html create mode 100644 files/bn/web/html/global_attributes/itemprop/index.html create mode 100644 files/bn/web/html/global_attributes/itemscope/index.html create mode 100644 files/bn/web/html/global_attributes/tabindex/index.html create mode 100644 files/bn/web/html/global_attributes/translate/index.html create mode 100644 files/bn/web/html/index.html create mode 100644 files/bn/web/http/index.html create mode 100644 files/bn/web/http/status/index.html create mode 100644 files/bn/web/index.html create mode 100644 files/bn/web/javascript/a_re-introduction_to_javascript/index.html create mode 100644 files/bn/web/javascript/data_structures/index.html create mode 100644 files/bn/web/javascript/guide/grammar_and_types/index.html create mode 100644 files/bn/web/javascript/guide/index.html create mode 100644 files/bn/web/javascript/index.html create mode 100644 files/bn/web/javascript/inheritance_and_the_prototype_chain/index.html create mode 100644 files/bn/web/javascript/reference/global_objects/index.html create mode 100644 files/bn/web/javascript/reference/global_objects/isfinite/index.html create mode 100644 files/bn/web/javascript/reference/global_objects/number/index.html create mode 100644 files/bn/web/javascript/reference/global_objects/number/isfinite/index.html create mode 100644 files/bn/web/javascript/reference/index.html create mode 100644 files/bn/web/javascript/reference/statements/index.html create mode 100644 files/bn/web/javascript/typed_arrays/index.html create mode 100644 "files/bn/web/javascript/\340\246\255\340\246\276\340\246\267\340\246\276\340\246\260_\340\246\260\340\246\277\340\246\270\340\247\213\340\246\260\340\247\215\340\246\270/index.html" create mode 100644 files/bn/web/reference/index.html create mode 100644 files/bn/web/svg/element/index.html create mode 100644 files/bn/web/svg/index.html create mode 100644 files/bn/web_development/index.html create mode 100644 files/bn/what_to_do_and_what_not_to_do_in_bugzilla/index.html create mode 100644 files/bn/zones/index.html (limited to 'files/bn') diff --git a/files/bn/_redirects.txt b/files/bn/_redirects.txt new file mode 100644 index 0000000000..d084981b8b --- /dev/null +++ b/files/bn/_redirects.txt @@ -0,0 +1,9 @@ +# FROM-URL TO-URL +/bn/docs/IndexedDB /bn/docs/Web/API/IndexedDB_API +/bn/docs/MDN/Contribute/Content /bn/docs/MDN/Guidelines +/bn/docs/MDN/Contribute/Content/Style_guide /bn/docs/MDN/Guidelines/Style_guide +/bn/docs/MDN/Contribute/Structures /bn/docs/MDN/Structures +/bn/docs/MDN/Contribute/Structures/Macros /bn/docs/MDN/Structures/Macros +/bn/docs/MDN/Getting_started /bn/docs/MDN/Contribute/Getting_started +/bn/docs/Web/CSS/element /bn/docs/Web/CSS/element() +/bn/docs/en /en-US/ diff --git a/files/bn/_wikihistory.json b/files/bn/_wikihistory.json new file mode 100644 index 0000000000..e58cddd2db --- /dev/null +++ b/files/bn/_wikihistory.json @@ -0,0 +1,989 @@ +{ + "DOM": { + "modified": "2019-03-23T23:25:08.675Z", + "contributors": [ + "badsha_eee", + "teoli" + ] + }, + "Glossary": { + "modified": "2020-10-07T11:06:43.575Z", + "contributors": [ + "peterbe", + "SphinxKnight", + "wbamberg", + "tuxboy", + "Jeremie" + ] + }, + "Glossary/API": { + "modified": "2019-03-23T22:37:26.215Z", + "contributors": [ + "tuxboy" + ] + }, + "Glossary/Bandwidth": { + "modified": "2019-03-23T22:37:28.297Z", + "contributors": [ + "tuxboy" + ] + }, + "Glossary/DHTML": { + "modified": "2019-03-23T22:58:37.799Z", + "contributors": [ + "smsnobin77" + ] + }, + "Glossary/WebRTC": { + "modified": "2019-03-23T22:37:31.573Z", + "contributors": [ + "tuxboy" + ] + }, + "HTML/HTML5": { + "modified": "2019-03-23T23:35:15.435Z", + "contributors": [ + "teoli", + "badsha_eee", + "ashickur_noor", + "tuxboy" + ] + }, + "HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-23T23:22:57.838Z", + "contributors": [ + "shafiul", + "Maliha81", + "jaggedzak" + ] + }, + "Learn": { + "modified": "2020-09-11T13:07:06.291Z", + "contributors": [ + "mdbiploballi81", + "mizanursajid", + "SphinxKnight", + "svarlamov", + "username-abdur", + "NaSabbir", + "Shubhobd", + "Bolaram", + "kscarfone" + ] + }, + "Learn/CSS": { + "modified": "2020-07-16T22:25:32.146Z", + "contributors": [ + "josh-wong" + ] + }, + "Learn/CSS/Howto": { + "modified": "2020-07-16T22:25:41.478Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/CSS/Howto/Generated_content": { + "modified": "2020-07-16T22:25:46.972Z", + "contributors": [ + "chrisdavidmills", + "rsarah", + "Saki336", + "MalihaDipty" + ] + }, + "Learn/HTML": { + "modified": "2020-07-16T22:22:14.837Z", + "contributors": [ + "Saiful000" + ] + }, + "Learn/HTML/Introduction_to_HTML": { + "modified": "2020-07-16T22:22:45.239Z", + "contributors": [ + "onurbasturk" + ] + }, + "Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML": { + "modified": "2020-08-25T20:15:51.087Z", + "contributors": [ + "duduindo", + "Helal92" + ] + }, + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:36.981Z", + "contributors": [ + "roman_sayed007" + ] + }, + "Learn/JavaScript/First_steps": { + "modified": "2020-07-16T22:29:48.439Z", + "contributors": [ + "beingtaki", + "SphinxKnight" + ] + }, + "Learn/JavaScript/First_steps/জাভাস্ক্রিপ্ট-কী": { + "modified": "2020-07-23T11:41:02.501Z", + "contributors": [ + "promisind" + ] + }, + "Learn/Server-side": { + "modified": "2020-07-16T22:35:55.391Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/Server-side/Django": { + "modified": "2020-11-21T09:20:44.374Z", + "contributors": [ + "libnum10", + "Tariqul2h2" + ] + }, + "Learn/Server-side/First_steps": { + "modified": "2020-07-16T22:36:07.321Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/Server-side/First_steps/Website_security": { + "modified": "2020-07-16T22:36:27.441Z", + "contributors": [ + "promisind" + ] + }, + "Localization": { + "modified": "2019-03-23T23:27:22.624Z", + "contributors": [ + "badsha_eee" + ] + }, + "MDN": { + "modified": "2020-02-19T18:52:16.503Z", + "contributors": [ + "jswisher", + "SphinxKnight", + "wbamberg", + "Jeremie", + "Bolaram", + "teoli" + ] + }, + "MDN/Community": { + "modified": "2019-09-04T05:42:20.308Z", + "contributors": [ + "Naahid", + "voiceofmoments", + "wbamberg", + "Shubhobd", + "teoli", + "badsha_eee" + ] + }, + "MDN/Community/Whats_happening": { + "modified": "2019-03-23T23:27:03.844Z", + "contributors": [ + "wbamberg", + "teoli", + "badsha_eee" + ] + }, + "MDN/Contribute": { + "modified": "2019-01-16T18:29:06.865Z", + "contributors": [ + "wbamberg", + "Bolaram", + "faria", + "teoli", + "Prome", + "Sheppy" + ] + }, + "MDN/Contribute/Creating_and_editing_pages": { + "modified": "2019-01-16T17:44:34.088Z", + "contributors": [ + "wbamberg", + "teoli", + "badsha_eee" + ] + }, + "MDN/Contribute/Getting_started": { + "modified": "2020-09-30T17:09:15.654Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Bolaram", + "badsha_eee", + "shafiul" + ] + }, + "MDN/Contribute/Howto": { + "modified": "2020-12-07T19:29:57.746Z", + "contributors": [ + "wbamberg", + "Sheppy" + ] + }, + "MDN/Contribute/Howto/Convert_code_samples_to_be_live": { + "modified": "2019-01-16T18:29:38.875Z", + "contributors": [ + "wbamberg", + "badsha_eee" + ] + }, + "MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-01-16T18:29:56.107Z", + "contributors": [ + "wbamberg", + "badsha_eee" + ] + }, + "MDN/Contribute/Localize": { + "modified": "2019-01-16T18:28:57.693Z", + "contributors": [ + "wbamberg", + "Sheppy" + ] + }, + "MDN/Contribute/Localize/পেইজ_অনুবাদ": { + "modified": "2019-03-23T23:19:22.412Z", + "contributors": [ + "wbamberg", + "surajitbasak109", + "Aftabuzzaman", + "Nahidul", + "Shawon", + "Ashraful", + "MahmudurRahmanRazu" + ] + }, + "MDN/Guidelines": { + "modified": "2020-09-30T15:28:12.396Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Sheppy" + ] + }, + "MDN/Guidelines/Style_guide": { + "modified": "2020-09-30T15:28:13.100Z", + "contributors": [ + "chrisdavidmills", + "jswisher", + "wbamberg", + "shamimsw" + ] + }, + "MDN/Structures": { + "modified": "2020-09-30T09:04:16.032Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "jswisher" + ] + }, + "MDN/Structures/Macros": { + "modified": "2020-09-30T09:04:16.202Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "jswisher" + ] + }, + "MDN_at_ten": { + "modified": "2019-03-23T22:50:40.078Z", + "contributors": [ + "Bolaram", + "badsha_eee" + ] + }, + "Mozilla": { + "modified": "2019-03-23T23:34:34.377Z", + "contributors": [ + "Bolaram", + "ethertank" + ] + }, + "Mozilla/Add-ons": { + "modified": "2019-09-09T13:12:22.427Z", + "contributors": [ + "SphinxKnight", + "ToufiqAminRumi", + "Bolaram", + "aialvi", + "SOFT", + "ershadul", + "wbamberg" + ] + }, + "Mozilla/Add-ons/WebExtensions": { + "modified": "2019-03-18T21:06:37.679Z", + "contributors": [ + "wbamberg" + ] + }, + "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": { + "modified": "2019-03-23T22:16:37.686Z", + "contributors": [ + "MotivatedbyGod" + ] + }, + "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": { + "modified": "2019-03-18T21:06:52.270Z", + "contributors": [ + "jQsafi" + ] + }, + "Mozilla/Developer_guide": { + "modified": "2019-07-18T03:00:16.114Z", + "contributors": [ + "SphinxKnight", + "Oaes", + "chrisdavidmills", + "nasirkhan", + "tuxboy" + ] + }, + "Mozilla/Developer_guide/Source_Code": { + "modified": "2019-03-23T23:20:22.566Z", + "contributors": [ + "chrisdavidmills", + "badsha_eee" + ] + }, + "Mozilla/ফায়ারফক্স": { + "modified": "2020-01-18T12:34:49.048Z", + "contributors": [ + "leela52452", + "SphinxKnight", + "wbamberg", + "jwhitlock", + "badsha_eee", + "Bolaram", + "ashickur_noor", + "Sudipto.chy" + ] + }, + "Mozilla/ফায়ারফক্স/রিলিজস": { + "modified": "2019-04-09T14:31:52.314Z", + "contributors": [ + "wbamberg", + "shafiul", + "Sudipto.chy" + ] + }, + "Tools": { + "modified": "2020-07-16T22:44:13.511Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "ashikCodecamper", + "Bolaram", + "jQsafi", + "badsha_eee", + "nasirkhan", + "adhikarichiranjibi", + "arifrhb", + "tuxboy" + ] + }, + "Tools/Page_Inspector": { + "modified": "2020-07-16T22:34:26.736Z", + "contributors": [ + "wbamberg", + "bassam", + "Prome" + ] + }, + "Tools/Style_Editor": { + "modified": "2020-07-16T22:34:59.634Z", + "contributors": [ + "wbamberg", + "hossainmosharraf", + "Bolaram", + "jsx", + "Fariha_Fiha", + "mimzi_fahia" + ] + }, + "Tools/ত্রিমাত্রিক_দর্শন": { + "modified": "2020-07-16T22:34:24.936Z", + "contributors": [ + "wbamberg", + "MUHAMMAD_KHAN" + ] + }, + "Web": { + "modified": "2019-01-16T17:29:41.603Z", + "contributors": [ + "Bolaram", + "tohin007", + "sap", + "DxMuhit", + "badsha_eee", + "towfiqueanam", + "bellayet", + "nasirkhan", + "tuxboy", + "Jan.Ruzicka" + ] + }, + "Web/API": { + "modified": "2019-03-18T20:48:16.500Z", + "contributors": [ + "duduindo", + "tuxboy", + "cse031sust02", + "khalid32", + "jswisher" + ] + }, + "Web/API/Battery_Status_API": { + "modified": "2019-03-23T22:13:35.833Z", + "contributors": [ + "itskawsar" + ] + }, + "Web/API/Event": { + "modified": "2020-10-15T22:30:24.560Z", + "contributors": [ + "Achilles1515" + ] + }, + "Web/API/Event/preventDefault": { + "modified": "2020-10-15T22:30:20.746Z", + "contributors": [ + "joydesigner24" + ] + }, + "Web/API/IndexedDB_API": { + "modified": "2020-01-13T04:47:42.155Z", + "contributors": [ + "chrisdavidmills", + "Bolaram", + "towfiqueanam" + ] + }, + "Web/API/InputEvent": { + "modified": "2019-03-18T21:09:05.849Z", + "contributors": [ + "fscholz", + "tuxboy" + ] + }, + "Web/API/StyleSheet": { + "modified": "2019-03-23T23:18:17.872Z", + "contributors": [ + "badsha_eee" + ] + }, + "Web/Accessibility": { + "modified": "2019-09-11T08:22:02.036Z", + "contributors": [ + "SphinxKnight", + "DxMuhit", + "badsha_eee" + ] + }, + "Web/CSS": { + "modified": "2019-09-11T03:33:34.664Z", + "contributors": [ + "SphinxKnight", + "arifulhasan", + "MarufSharia", + "DxMuhit", + "anistuhin", + "teoli", + "badsha_eee", + "Maliha81", + "sharminsultana977", + "tuxboy", + "haboqueferus" + ] + }, + "Web/CSS/CSS_Animations": { + "modified": "2019-03-23T22:43:46.842Z", + "contributors": [ + "teoli" + ] + }, + "Web/CSS/CSS_Transforms": { + "modified": "2019-03-18T21:15:59.884Z", + "contributors": [ + "Sebastianz", + "Prinz_Rana", + "teoli" + ] + }, + "Web/CSS/Getting_Started": { + "modified": "2019-03-23T23:31:51.964Z", + "contributors": [ + "teoli", + "tuxboy" + ] + }, + "Web/CSS/Getting_Started/Color": { + "modified": "2019-03-23T23:11:32.781Z", + "contributors": [ + "Saki336", + "Maliha81" + ] + }, + "Web/CSS/Getting_Started/How_CSS_works": { + "modified": "2019-03-23T23:21:45.414Z", + "contributors": [ + "Bolaram", + "mimzi_fahia", + "kamrunNaharRuma", + "teoli" + ] + }, + "Web/CSS/Getting_Started/Readable_CSS": { + "modified": "2019-03-23T23:10:14.661Z", + "contributors": [ + "teoli", + "amena-synthia" + ] + }, + "Web/CSS/Getting_Started/Text_styles": { + "modified": "2019-03-23T23:11:32.510Z", + "contributors": [ + "MalihaDipty" + ] + }, + "Web/CSS/Getting_Started/Why_use_CSS": { + "modified": "2019-03-23T23:21:57.361Z", + "contributors": [ + "Bolaram", + "teoli", + "mimzi_fahia" + ] + }, + "Web/CSS/Getting_Started/নই": { + "modified": "2019-03-23T23:10:32.206Z", + "contributors": [ + "rabeya" + ] + }, + "Web/CSS/Getting_Started/লে-আউট": { + "modified": "2019-03-23T23:11:30.667Z", + "contributors": [ + "Prome" + ] + }, + "Web/CSS/element()": { + "modified": "2020-11-10T11:02:42.501Z", + "contributors": [ + "chrisdavidmills", + "heea" + ] + }, + "Web/Events": { + "modified": "2019-04-30T14:14:57.706Z", + "contributors": [ + "wbamberg", + "chrisdavidmills" + ] + }, + "Web/Guide": { + "modified": "2019-03-23T23:29:31.562Z", + "contributors": [ + "tuxboy" + ] + }, + "Web/Guide/API": { + "modified": "2019-09-11T09:42:45.137Z", + "contributors": [ + "SphinxKnight", + "tuxboy", + "Sheppy" + ] + }, + "Web/Guide/API/DOM": { + "modified": "2019-01-16T18:05:53.775Z", + "contributors": [ + "shahvishald" + ] + }, + "Web/Guide/API/WebRTC": { + "modified": "2019-03-23T22:37:29.214Z", + "contributors": [ + "tuxboy" + ] + }, + "Web/Guide/Events": { + "modified": "2019-03-23T23:10:51.342Z", + "contributors": [ + "Jeremie" + ] + }, + "Web/Guide/HTML/Canvas_tutorial": { + "modified": "2019-03-23T23:22:41.275Z", + "contributors": [ + "mahmudtamim" + ] + }, + "Web/Guide/HTML/Content_Editable": { + "modified": "2019-03-23T23:22:35.093Z", + "contributors": [ + "sourav1" + ] + }, + "Web/Guide/HTML/Forms": { + "modified": "2020-07-16T22:20:53.344Z", + "contributors": [ + "kmsuzan" + ] + }, + "Web/Guide/Performance": { + "modified": "2019-03-23T23:20:59.790Z", + "contributors": [ + "shakil18" + ] + }, + "Web/Guide/গ্রাফিক্স": { + "modified": "2019-03-23T23:20:59.963Z", + "contributors": [ + "shakil18" + ] + }, + "Web/HTML": { + "modified": "2019-09-10T15:18:25.692Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "surajitbasak109", + "Bolaram", + "stephaniehobson", + "teoli", + "jaggedzak", + "badsha_eee", + "khalid32", + "mobarak.ali", + "nasirkhan", + "imondal007", + "mahir_chowdhury", + "ershadul" + ] + }, + "Web/HTML/Block-level_elements": { + "modified": "2019-03-23T22:42:54.998Z", + "contributors": [ + "ToufiqAminRumi" + ] + }, + "Web/HTML/CORS_settings_attributes": { + "modified": "2019-03-23T22:42:33.032Z", + "contributors": [ + "hmmonir" + ] + }, + "Web/HTML/Canvas": { + "modified": "2019-03-23T23:31:43.205Z", + "contributors": [ + "SphinxKnight", + "spsumon44", + "teoli", + "tuxboy" + ] + }, + "Web/HTML/Canvas/Tutorial": { + "modified": "2019-03-23T23:31:44.732Z", + "contributors": [ + "teoli", + "tuxboy" + ] + }, + "Web/HTML/Element": { + "modified": "2019-03-23T23:34:45.682Z", + "contributors": [ + "teoli", + "shafiul", + "moni", + "allergic" + ] + }, + "Web/HTML/Element/a": { + "modified": "2019-03-23T22:41:45.081Z", + "contributors": [ + "Bolaram" + ] + }, + "Web/HTML/Element/article": { + "modified": "2019-03-23T23:18:58.987Z", + "contributors": [ + "teoli", + "badsha_eee" + ] + }, + "Web/HTML/Element/b": { + "modified": "2019-03-23T22:42:07.195Z", + "contributors": [ + "hmmonir" + ] + }, + "Web/HTML/Element/blockquote": { + "modified": "2019-03-23T22:41:52.471Z", + "contributors": [ + "hmmonir" + ] + }, + "Web/HTML/Element/section": { + "modified": "2019-03-23T23:18:59.164Z", + "contributors": [ + "wbamberg", + "teoli", + "badsha_eee" + ] + }, + "Web/HTML/Element/summary": { + "modified": "2019-03-23T22:41:46.042Z", + "contributors": [ + "hmmonir" + ] + }, + "Web/HTML/Focus_management_in_HTML": { + "modified": "2019-03-23T22:41:57.848Z", + "contributors": [ + "ToufiqAminRumi" + ] + }, + "Web/HTML/Global_attributes": { + "modified": "2019-03-23T22:47:22.868Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/HTML/Global_attributes/accesskey": { + "modified": "2019-03-23T22:42:44.253Z", + "contributors": [ + "hmmonir" + ] + }, + "Web/HTML/Global_attributes/contenteditable": { + "modified": "2019-03-23T22:41:41.817Z", + "contributors": [ + "rubayatjamila" + ] + }, + "Web/HTML/Global_attributes/draggable": { + "modified": "2019-03-23T22:42:46.655Z", + "contributors": [ + "jswisher", + "Akashsec" + ] + }, + "Web/HTML/Global_attributes/hidden": { + "modified": "2019-03-23T22:42:27.791Z", + "contributors": [ + "hmmonir" + ] + }, + "Web/HTML/Global_attributes/itemprop": { + "modified": "2019-03-23T22:42:57.832Z", + "contributors": [ + "KawsarAhmed" + ] + }, + "Web/HTML/Global_attributes/itemscope": { + "modified": "2019-03-23T22:42:35.325Z", + "contributors": [ + "hmmonir" + ] + }, + "Web/HTML/Global_attributes/tabindex": { + "modified": "2019-03-23T22:41:47.412Z", + "contributors": [ + "ToufiqAminRumi" + ] + }, + "Web/HTML/Global_attributes/translate": { + "modified": "2019-03-23T22:42:39.382Z", + "contributors": [ + "hmmonir" + ] + }, + "Web/HTTP": { + "modified": "2020-09-11T13:11:42.013Z", + "contributors": [ + "SphinxKnight" + ] + }, + "Web/HTTP/Status": { + "modified": "2020-10-15T22:34:19.044Z", + "contributors": [ + "SphinxKnightt" + ] + }, + "Web/JavaScript": { + "modified": "2020-03-12T19:37:57.288Z", + "contributors": [ + "SphinxKnight", + "Naahid", + "pollmix", + "mobarak.ali", + "roman_sayed007", + "fscholz", + "teoli", + "badsha_eee", + "invisibl3_kngiht", + "shafiul", + "tuxboy", + "maktrix", + "mythrobin" + ] + }, + "Web/JavaScript/A_re-introduction_to_JavaScript": { + "modified": "2020-03-12T19:38:25.980Z", + "contributors": [ + "pollmix", + "fscholz", + "teoli", + "tuxboy", + "shafiul" + ] + }, + "Web/JavaScript/Data_structures": { + "modified": "2020-03-12T19:39:11.158Z", + "contributors": [ + "pollmix", + "fscholz", + "nhshojib", + "teoli", + "SOFT", + "shafiul" + ] + }, + "Web/JavaScript/Guide": { + "modified": "2020-03-12T19:38:30.752Z", + "contributors": [ + "jamal-pb95", + "fscholz", + "badsha_eee", + "teoli", + "shafiul", + "mobarak.ali", + "tuxboy" + ] + }, + "Web/JavaScript/Guide/Grammar_and_types": { + "modified": "2020-03-12T19:38:38.025Z", + "contributors": [ + "wbamberg", + "jamal-pb95", + "itskawsar", + "fscholz", + "teoli", + "mobarak.ali", + "shafiul" + ] + }, + "Web/JavaScript/Inheritance_and_the_prototype_chain": { + "modified": "2020-03-12T19:39:12.963Z", + "contributors": [ + "hasancp", + "fscholz", + "teoli", + "cse031sust02", + "shafiul", + "NOMAN123" + ] + }, + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:38:33.465Z", + "contributors": [ + "fscholz", + "teoli", + "invisibl3_kngiht", + "badsha_eee", + "shafiul", + "Norbert" + ] + }, + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-09-18T16:05:20.895Z", + "contributors": [ + "safikulmiya961", + "fscholz", + "teoli", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number": { + "modified": "2019-03-23T23:25:01.088Z", + "contributors": [ + "wbamberg", + "fscholz", + "teoli", + "rajat_agarwal" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { + "modified": "2019-03-23T23:25:14.032Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "teoli", + "tuxboy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/isFinite": { + "modified": "2020-03-12T19:38:39.553Z", + "contributors": [ + "fscholz", + "teoli", + "tuxboy" + ] + }, + "Web/JavaScript/Reference/statements": { + "modified": "2020-03-12T19:39:11.018Z", + "contributors": [ + "fscholz", + "teoli", + "badsha_eee" + ] + }, + "Web/JavaScript/Typed_arrays": { + "modified": "2020-11-21T03:17:19.356Z", + "contributors": [ + "mohammadshohagulislam" + ] + }, + "Web/JavaScript/ভাষার_রিসোর্স": { + "modified": "2020-03-12T19:39:11.262Z", + "contributors": [ + "fscholz", + "teoli", + "shafiul", + "arifrhb" + ] + }, + "Web/Reference": { + "modified": "2019-03-23T23:25:25.072Z", + "contributors": [ + "nasirkhan" + ] + }, + "Web/SVG": { + "modified": "2019-03-23T23:22:25.227Z", + "contributors": [ + "teoli" + ] + }, + "Web/SVG/Element": { + "modified": "2019-03-23T23:22:32.311Z", + "contributors": [ + "munny" + ] + }, + "Web_Development": { + "modified": "2019-03-23T23:31:46.369Z", + "contributors": [ + "tuxboy", + "ethertank" + ] + } +} \ No newline at end of file diff --git a/files/bn/archive/apps/advanced_topics/index.html b/files/bn/archive/apps/advanced_topics/index.html new file mode 100644 index 0000000000..ccad581c04 --- /dev/null +++ b/files/bn/archive/apps/advanced_topics/index.html @@ -0,0 +1,86 @@ +--- +title: এডভান্সড টপিকস +slug: Archive/Apps/Advanced_topics +tags: + - Apps + - B2G + - Firefox OS + - Mobile + - NeedsReview + - অ্যাপস + - ফায়ারফক্স ওএস + - বিটূজি + - মোবাইল +translation_of: Archive/Apps/Advanced_topics +--- +

এই নিবন্ধ গুলো তুলনামূলক জটিল মুক্ত ওয়েব অ্যাপ সম্পর্কে অতিরিক্ত তথ্য প্রদান করে।

+
+
+

অ্যাপ আর্কিটেকচার ডকুমেন্টেশন

+
+
+ ওয়েব অ্যাপ এর আর্কিটেকচার
+
+ মুক্ত ওয়েব অ্যাপ প্রজেক্টের ডিজাইন ও বাস্তবায়নের পেছনের আর্কিটেকচারের সংক্ষিপ্ত বর্ণনা।
+
+ প্লাটফর্ম-নির্ভর অ্যাপ ইন্সটলের বিস্তারিত
+
+ যেসব প্লাটফর্ম মুক্ত ওয়েব অ্যাপ সমর্থন করে, সেসব প্লাটফর্মে অ্যাপ ইন্সটল করার ক্ষেত্রে ভিন্নতা রয়েছে; এই নিবন্ধটি আপনাকে সেসব বুঝতে সাহায্য করবে।
+
+ অ্যানড্রয়েডের জন্য মুক্ত ওয়েব অ্যাপ
+
+ অ্যানড্রয়েড ডিভাইসে মুক্ত ওয়েব অ্যাপ ইন্সটল ও টেস্ট করা সম্পর্কিত তথ্য।
+
+ অ্যাপ রানটাইম রিলিজ নোট সমূহ
+
+ বিভিন্ন প্ল্যাটফর্মের জন্য ওয়েব অ্যাপ রানটাইমের রিলিজ নোট সমূহ।
+
+

অন্যান্য ডকুমেন্টেশন

+
+
+ স্টোর তৈরি করা
+
+ যদি আপনি মুক্ত ওয়েব অ্যাপ বিক্রয় ও বিতরণের জন্য নিজের স্টোর বানাতে চান, তাহলে যেসব তথ্য আপনার জন্য সহায়ক হবে, তা এখানে আছে।
+
+

সব দেখুন...

+
+
+
এ্যাপ ডেভেলপারদের জনয টূল
+ +

প্রযুক্তি রেফারেন্স ডকুমেন্টেশন

+
+ +
+
কমিউনিটি থেকে সাহায্য নেওয়া
+

আপনি যদি এখনও কিভাবে কোন কাজ করতে হবে - এ ব্যাপারে সন্দিহান হয়ে থাকেন, তবে এখনই আলোচনায় যোগ দিন আমাদের সঙ্গে!

+
    +
  • ওয়েব এ্যাপস ফোরাম: +
      +
    • ওপেন ওয়েব এ্যাপস আইআরসি চ্যানেলে আপনার প্রশ্ন জিজ্ঞাসা করুন: #openwebapps
      • +
    +
    • +
+

অনলাইন আচরণবিধি ভুলে গেলে চলবে না...

+
+
+

 

diff --git a/files/bn/archive/apps/index.html b/files/bn/archive/apps/index.html new file mode 100644 index 0000000000..deafb7afe7 --- /dev/null +++ b/files/bn/archive/apps/index.html @@ -0,0 +1,8 @@ +--- +title: Apps +slug: Archive/Apps +translation_of: Archive/Apps +--- +

In progess. This page includes archived content for Apps, including obsolete web app content, Firefox OS app-related content, etc.

+ +

{{SubpagesWithSummaries}}

diff --git a/files/bn/archive/b2g_os/application_development/index.html b/files/bn/archive/b2g_os/application_development/index.html new file mode 100644 index 0000000000..5a7258de90 --- /dev/null +++ b/files/bn/archive/b2g_os/application_development/index.html @@ -0,0 +1,16 @@ +--- +title: ফায়ারফক্স ওএস অ্যাপ্লিকেশন ডেভেলপমেন্ট +slug: Archive/B2G_OS/Application_development +tags: + - Apps + - NeedsReview + - ফায়ারফক্স ওএস +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS +--- +

ফায়ারফক্স ওএস অ্যাপস  Open Web apps এর চেয়ে অধিক কিছু নয়, যা ফায়ারফক্স ওএস অপারেটিং সিস্টেম চলমান ফোনে ইনস্টল করা একটি এইচটিএমএল অ্যাপ।এর মানে হল যে, আপনি সরাসরি ফ্রন্ট-এন্ড ডেভেলপমেন্ট এর জ্ঞান ব্যবহার করে ফায়ারফক্স অপারেটিং সিস্টেমের কোনো ফোনের জন্য অসাধারন অ্যাপ তৈরি করতে পারবেন।

+ +

অ্যাপ তৈরীর সাথে জড়িত আরো কৌশল সম্পর্কে জানতে আমাদের টিউটোরিয়াল দেখুন: Getting started with making apps. একটি নির্দিষ্ট অপারেটিং সিস্টেমের জন্য অ্যাপ্লিকেশন ডেভেলপ করার ক্ষেত্রে কিছু নির্দেশনা আছে। আপনি প্রাসঙ্গিক তথ্য পাবেন আমাদের কুইক গাইডে: Writing a Web app for Firefox OS.

+ +

একবার বেসিস বিষয়গুলোর সাথে পরিচিত হয়ে গেলে, আপনার সম্পূর্ণ App Development API Reference প্রয়োজন হবে এবং ফায়ারফক্স ওএস অ্যাপ্লিকেশন ডেভেলপমেন্ট সম্পর্কে বেসিক তথ্যের জন্য, Firefox Marketplace Developer Hub দেখুন ।

+ +
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:18.0) Gecko/18.0 Firefox/18.0.
diff --git a/files/bn/archive/b2g_os/apps/index.html b/files/bn/archive/b2g_os/apps/index.html new file mode 100644 index 0000000000..cc2f4914c6 --- /dev/null +++ b/files/bn/archive/b2g_os/apps/index.html @@ -0,0 +1,49 @@ +--- +title: ফায়ারফক্স ওএস এর জন্য এ্যাপ লেখা +slug: Archive/B2G_OS/Apps +tags: + - Apps + - B2G + - ফায়ারফক্স ওএস +translation_of: Web/Apps/Fundamentals +--- +

ফায়ারফক্স ওএস এর জন্য এ্যাপ্লিকেশনগুলো মূলত সাধারণ ওয়েব এ্যাপ; এগুলো সম্পূর্ণরুপে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের মত উন্মুক্ত ওয়েব প্রযুক্তির ওপর ভিত্তি করে তৈরি। আমাদের মূল ডকুমেন্টেশন আপনার জানার প্রায় সবকিছু জানাবে, তারপরেও এখানে কিছু ডকুমেন্ট আছে যা ফায়ারফক্স ওএস ডেভেলপ এবং টেস্ট করা সংক্রান্ত নির্দিষ্ট।

+
+
+

ডকুমেন্টেশন এবং টিউটোরিয়াল

+
+
+ ফায়ারফক্স ওএস এর জন্য ওয়েব এ্যাপ লেখা
+
+ আপনার প্রথম ফায়ারফক্স ওএস এ্যাপ্লিকেশন তৈরির টিউটোরিয়াল।
+
+ টিপস এবং কারিগরি
+
+ আমাদের ডেভেলপারদের সুপারিশকৃত একটি টিপসের সংগ্রহশালা (এবং সমস্যার সমাধান সহ)
+
+

View All...

+
+
+

কমিউনিটি থেকে সাহায্য

+

আপনি এ্যাপ-সংক্রান্ত সমস্যার পড়েছেন এবং ডকুমেন্টেশনে খুঁজে পাচ্ছেন না?

+
    +
  • এইচটিএমএল এবং সিএসএস এর জন্য লেআউট ফোরামে যোগাযোগ: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }} +
      +
    • মোজিলা আইআরসি চ্যানেলে আপনার প্রশ্ন জিজ্ঞাসা করুন: #openwebapps
      • +
    +
    • +
+

অনলাইন আচরণবিধি ভুলে যাবেন না যেন...

+

টুল

+ +

সবগুলো দেখুন...

+ + +
+
+

 

diff --git a/files/bn/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html b/files/bn/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html new file mode 100644 index 0000000000..16fa3b2693 --- /dev/null +++ b/files/bn/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html @@ -0,0 +1,44 @@ +--- +title: ফায়ারফক্স ওএসের জন্য ওয়েব অ্যাপ লেখা +slug: Archive/B2G_OS/Apps/Writing_a_web_app_for_Firefox_OS +translation_of: Web/Apps/Fundamentals/Quickstart +--- +

ফায়ারফক্স ওএসের অ্যাপ মূলত সাধারণ HTML, CSS এবং জাভাস্ক্রিপ্টে লেখা ওয়েব অ্যাপ ছাড়া আর কিছুই না। অন্যান্য ওয়েবসাইটের মত এগুলোও আপনি ওয়েবে পাবলিশ করবেন। আপনার ওয়েবসাইটকে মোবাইলে ইন্সটল করার উপযোগী করতে চাইলে আপনাকে শুধুমাত্র একটি ম্যানিফেস্ট যুক্ত করতে হবে এবং একটি "ইন্সটল" বাটন যুক্ত করে দিতে হবে (যা নিয়ে নিচে বিস্তারিত আলোচনা করা হয়েছে।)

+

শুরু করার জন্য নিচের আর্টিকেলগুলো দারুণ!

+ +

এছাড়াও চাইলে ওপেন ওয়েব অ্যাপের জগতে ঘুরে আসতে পারেন।

+

ওয়েব অ্যাপটি ইন্সটল করা

+

অ্যাপ এবং অ্যাপ ম্যানিফেস্ট ওয়েবে পাবলিশ করেই কাজ শেষ হয়ে যায়নি, গিকোকে তো জানাতে হবে যে আপনার ওয়েবসাইটটি আসলে একটি অ্যাপ এবং এর ম্যানিফেস্ট আছে! ইন্সটল করার সময় গিকো ম্যানিফেস্ট থেকে অ্যাপের যাবতীয় তথ্য জেনে নেয় এবং হোমস্ক্রিনসহ অন্যান্য জায়গার প্রয়োজনীয় কাজগুলো সেরে নেয়।

+

অ্যাপ ইন্সটল করার জন্য navigator.mozApps.install API টি কল করুন। আপনার সেলফ-হোস্টেড অ্যাপের জন্য নিচে উদাহরণস্বরুপ একটি ইন্সটল বাটনের কোড দেয়া হয়, যা আপনি আপনার অ্যাপে এম্বেড করে দিতে পারেন।

+
<button id="install">
+  Install this awesome app on your homescreen!
+</button>
+
+<script>
+(function(){
+  function install(ev) {
+    ev.preventDefault();
+    // define the manifest URL
+    var manifest_url = "http://my.webapp.com/manifest.webapp";
+    // install the app
+    var myapp = navigator.mozApps.install(manifest_url);
+    myapp.onsuccess = function(data) {
+      // App is installed, remove button
+      this.parentNode.removeChild(this);
+    };
+    myapp.onerror = function() {
+      // App wasn't installed, info is in
+      // installapp.error.name
+     };
+  };
+  // get a reference to the button and call install() on click
+  var button = document.getElementById('install');
+  button.addEventListener('click', install, false);
+})();
+</script>
+
+

উল্লেখ্য, ইন্সটল বাটনটি একটি অ্যাপ মার্কেটেও থাকতে পারে, যেমন ধরুণ ফায়ারফক্স মার্কেটপ্লেস, তারপরেও আপনার ওয়েবসাইটের মূল পাতায় একটি "ইন্সটল" বাটন থাকা ভালো।

+

এবার ফায়ারফক্স ওএসের ব্রাউজার অ্যাপের সাহায্যে আপনার সাইটে গিয়ে "ইন্সটল" বাটনে চাপ দিয়ে দেখুন!

diff --git a/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/index.html b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/index.html new file mode 100644 index 0000000000..7c5d8e5d6e --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/index.html @@ -0,0 +1,73 @@ +--- +title: Gaia UI Tests পরিচিতি +slug: Archive/B2G_OS/Automated_testing/gaia-ui-tests +tags: + - B2G + - Build documentation + - Firefox OS + - Gaia + - Guide + - Mobile + - NeedsTranslation + - Testing + - TopicStub + - gaia-ui-test + - gaiatest +translation_of: Archive/B2G_OS/Automated_testing/gaia-ui-tests +--- +

{{Next("Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_1_Marionette_Firefox_OS_start")}}

+ +
+

Gaia-ui-tests is Mozilla's test suite for running end-to-end UI test cases against Gaia, the UI of Firefox OS. All the tests are written in Python with some JavaScript used for interacting with Firefox OS's APIs. This set of tutorial articles explains how to set up the environment to write and run tests.

+
+ +

Gaia-ui-tests uses Gaiatest, a Python package based around Marionette. Gaiatest is designed to wrap HTML locators, Marionette calls and API calls together for interoperble communication and functionality. Marionette is based on the W3C standard developed for the Selenium WebDriver a programming interface for browser automation. If you have used WebDriver and page/app objects before then you will find using Marionette and gaiatest easy.

+ +

Getting started with Gaia UI tests

+ +

For those keen to get started with automated testing on Gaia/Firefox OS we have a tutorial series that will help you go from nothing to writing your own tests. Once you've completed this tutorial you'll have enough knowledge of testing, Firefox OS and Marionette to get started as a Mozilla tests contributor. It is highly recommended that you complete this tutorial if you wish to become a contributor.

+ +
+
Part 1: Getting started with Marionette and Firefox OS
+
This article covers installing the tools you need to get started with running tests, such as B2G Desktop, Python and Marionette.
+
Part 2: Basic interactions with Firefox OS using Marionette
+
An overview of the basic commands you will use to manipulate Firefox OS via Marionette.
+
Part 3: Upgrading our code into a reusable test
+
Moving on, in this article we will assemble some basic commands into a simple test inside a Python file so they can all be run as a single entity.
+
Part 4: Re-using commands to set up Firefox OS
+
Here we look at moving some of the commands into Python methods to promote code reuse.
+
Part 5: Introducing a test runner
+
A test runner is a central feature of any good test suite, allowing you to run multiple tests and report and aggregate results. In this article we will explore the basics of Python's unittest runner.
+
Part 6: Using tuples, and Marionette's By class
+
This time around we explain how to further reduce duplication of code, by storing repeated locators in tuples and simplifying the syntax with Marionette's By class.
+
Part 7: Writing your own tests
+
Now the basics and behind you, and it is time to start to writing your own tests! Here we give you some tool recommendations to make the work easier, and suggest some tests to try your hand at writing.
+
Part 8: Using a base class
+
In its current state, our test file contains all the test runner code. This is ok for now, but as soon as you start to run many test files it will mean a lot of duplication. Here we solve this problem by abstracting the test runner code into a separate Python class.
+
Part 9: Reducing duplication with app objects
+
As a final improvement to the code's maintainability, in this article we explore abstracting code that handles interaction with specific Firefox OS apps out into Python app objects.
+
+ +

Advanced topics

+ +

One you've got the basics of writing and running tests under your belt, you way want to move on to some more involved or advanced work, such as running the full gaia-ui-tests tests suite, or logging power draw as the result of a test.

+ +
+
Running the gaia-ui-tests
+
Guides to running the gaia-ui-tests suite against real Firefox OS devices and B2G Desktop in a variety of configurations.
+
Gathering Power Draw
+
How to use gaiatest to log power draw while a test is running.
+
+ +

See also

+ +

Gaia-ui-tests main repository

+ +

Questions/Comments/Concerns

+ +

This project is at a fairly early stage, and your feedback would be greatly appreciated:

+ + diff --git a/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_1_marionette_firefox_os_start/index.html b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_1_marionette_firefox_os_start/index.html new file mode 100644 index 0000000000..fa10ed1eab --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_1_marionette_firefox_os_start/index.html @@ -0,0 +1,101 @@ +--- +title: প্রথম অংশঃ ম্যারিওনেট এবং ফায়ারফক্স OS দিয়ে শুরু করা +slug: >- + Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_1_Marionette_Firefox_OS_start +tags: + - needs review +translation_of: >- + Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_1_Marionette_Firefox_OS_start +--- +

{{PreviousNext("Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests", "Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_2_Marionette_Firefox_OS_interactions")}}

+
+

এই টিউটোরিয়াল সিরিজটির উদ্দেশ্য হল ফাইয়ারফক্স OS ব্যবহৃত ম্যারিওনেটের জন্য লেখা ও রান সংক্রান্ত অটোনোমেটেড UI টেস্টের সাথে আপনাকে পরিচিত করা। ম্যারিওনেট Getko-ভিত্তিক প্ল্যাটফর্মে টেস্ট রান করানোর জন্য কমান্ড ইস্যু করে। 

+
+

এই টিউটোরিয়াল সিরিজটি আটোমেটেড টেস্টিং কনসেপ্টের মধ্যে দিয়ে এগোবে এবং আপনাকে ফায়ারফক্স OS (বিশেষ প্রয়োজনীয় B2G ডেক্সটপ টেস্টিং টুলসহ) এবং ম্যারিওনেটএর সাথে কাজ করতেও পরিচিত করে। মাঝে মাঝে আমরা চ্যালেঞ্জ আহবান করব আপনার সমস্যার সমাধান বের করতে আপনাকে অনুপ্রাণিত করার জন্য।

+
+

নোটঃ এই টিউটোরিয়লটি শুধুমাত্র মজিলা পণ্যের জন্য নির্দিষ্ট নয়; যেমনঃ আপনি যদি কোন HTML5 অ্যাপ ডেভলপ করতে থাকেন তবে কোন টেস্ট ফ্রেমওয়ার্কের জন্যও আপনি এই টিউটোরিয়ালটি ব্যবহার করতে পারেন।

+
+

এই টিউটোরিয়ালটির জন্য প্রয়োজনীয় সফটওয়্যার

+

টিউটোরিয়ালের সময় আমরা এই সফটওয়্যারগুলো ইন্সটল এবং ব্যবহার করবঃ

+ +

পাইথন এবং পিপ

+

লিনাক্সের মত কিছু অপারেটিং সিস্টেমে পাইথন প্রি-ইন্সটল করা থাকে। ইন্সটল করার আগে দেখে নিন, তা আগে থেকেই ইন্সটল করা আছে কিনা। কোন কমান্ড লাইন অথবা টার্মিনাল থেকে রান করানঃ

+
python --version
+

পাইথন 2.6.x অথবা 2.7.x এর যে কোন ভার্শনই এই টিউটোরিয়ালের জন্য চলবে। আপনার যদি পাইথন 2.7 ইন্সটল না করা থেকে থাকে তবে আপনি পাইথন রিলিজ সাইট এ আপনি ইন্সটলার পাবেন।

+

পিপ ব্যবহৃত হয় পাইথন টুলস ইন্সটল করার জন্য এবং ম্যারিনেট ইন্সটল করার জন্য আমাদের এটি দরকার হয়। আপনি নিরীক্ষা করে দেখতে পারেন আপনার টার্মিনাল বা কমান্ড লাইনে পিপ টাইপিনের মাধ্যমে ইন্সটল হয়েছে কিনা। পিপ ইন্সটল করার জন্য, পিপ ডকুমেন্টেশনের নির্দেশনা অনুসরণ করতে পারেন।
+  

+

B2G ডেক্সটপ

+

B2G ডেক্সটপ ক্লাইন্ট আপনাকে সুযোগ দেয় ডেক্সটপ অথবা ল্যাপটপ কম্পিউটারে Gaia — ফায়ারফক্স OS এর UI — এবং ফায়ারফক্স OS অ্যাপস রান করার করানোর। ডেক্সটপ ক্লাইন্টের বেশ কিছু সীমাব্ধতা আছে — ক্যামেরা, ব্যাটারি প্রভৃতির মত হার্ডওয়্যার ডিভাইসকে emulate করে না— কিন্তু এই টিউটোরিয়ালে আমাদের কাজের জন্য এটি যথাযথ হবে। এবার এটি ইন্সটল করে নেওয়া যাক।

+

ফায়ারফক্স নাইটলি সাইট থেকে সর্বশেষ B2G ডেক্সটপ ডাউনলোড করুন (একদম নিচে ডেক্সটপ Boot2Gecko দেখুন)। B2G ডেক্সটপ ডাউনলোড হয়ে গেলে, কনটেন্টগুলো আপনার কম্পিউটারে একটি ফোল্ডারে এক্সাক্ট করে রাখুন। ফায়ারফক্স OS সিমালটার স্টার্ট করার জন্য আপনার OS এর জন্য সঠিকভাবে b2g স্ক্রিপ্ট ফাইলটি রানঃ

+ +

এপ্লিকেশনটি একবার স্টার্ট-আপ হয়ে গেলে এরকম একটি উইন্ডো দেখতে পাওয়ার কথাঃ

+

A welcome screen for Firefox OS - says welcome in multiple languages

+

ফার্স্ট টাইম ইউজার স্টেপগুলো অনুসরণ করুন, যতক্ষণ না ফায়ারফক্স OS হোমস্ক্রিন পাওয়া যায়। মনে রাখুন, আপনি ফোনের হার্ডওয়্যার বাটন ইম্যুলেট করতে পারেন নিচের কীবোর্ড কমান্ড ব্যবহারের মাধ্যমে, যেটি বেশ উপকারী (যেমনঃ হোম প্রেস করে ফোনকে সচল করা )।

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

 

+ 		+

উইন্ডোজ/লিনাক্স কীবোর্ড

+ 		+

ম্যাক OS কীবোর্ড

+
+

হোম বাটন

+ 		+

Home

+ 		+

Fn+left arrow

+
+

পাওয়ার বাটন

+ 		+

End

+ 		+

Fn+right arrow

+
+

ভলিউম আপ/ডাউন

+ 		+

Page up/Page down

+ 		+

Fn+ up/down arrow

+
+

এই পর্যায়ে আপনি B2G ডেক্সটপ ওপেন রেখেই একপাশে রেখে পরবর্তী কাজ করতে পারেন। এবার আমরা ম্যারিনেট ইন্সটল করে কাজটি শেষ করব।

+

ম্যারিওনেট

+

দুইটি অংশ আছে ম্যারিওনেটে; ক্লাইন্ট — যেটি আপনার আপনার ল্য্যাপটপে অপারেট করে — এবং সার্ভার — যা ফায়ারফক্স OS সার্ভারের মধ্যে কাজ করে। তখন পাপেটরের মত ম্যারিওনেট সার্ভার সরাসরি ফায়ারফক্স OS কন্ট্রোল করতে পারে।

+

marionette architecture showing marionette server inside Firefox OS and marionette client on its own outside

+

আমরা যেহেতু ডেক্সটপ B2G ক্লাইন্ট ব্যবহার করছি, তাই ম্যারিওনেট সার্ভার প্রি-ইন্সটল করা আছে (আপনি যখন কোন রিয়েল ডিভাইসের জন্য ফায়ারফক্স OS এর ইঞ্জিরিয়ারিং-কনফিগারড বিল্ড ব্যবহার করছেন তখনও এটি প্রযোজ্য )। ফায়ারফক্স নিয়ন্ত্রণ করতে পারার আগে, আমাদের লোকাল কম্পিউটারে ম্যারিওনেট ক্লাইন্ট ইন্সটল করা দরকার। আপনার টার্মিনালে নিচের কমান্ডটি রান করইয়ে এটি করা হয়ঃ

+
pip install marionette_client
+

এখনকার জন্য এটুকুই। আমরা তৈরি এবং যাওয়ার জন্য প্রস্তুত !

+

 

diff --git a/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_2_marionette_firefox_os_interactions/index.html b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_2_marionette_firefox_os_interactions/index.html new file mode 100644 index 0000000000..376f6193a3 --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_2_marionette_firefox_os_interactions/index.html @@ -0,0 +1,78 @@ +--- +title: দ্বিতীয় অংশঃ Marionette ব্যবহার করে ফায়ারফক্স OS এর মৌলিক ব্যবহার +slug: >- + Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_2_Marionette_Firefox_OS_interactions +tags: + - needs review + - >- + tests Automation gaia-ui-tests marionette Firefox OS + B2G Gaia Python +translation_of: >- + Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_2_Marionette_Firefox_OS_interactions +--- +

{{PreviousNext("Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_1_Marionette_Firefox_OS_start", "Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_3_Reusable_tests")}}

+
+

আমাদের টিউটোরিয়ালের দ্বিতীয় অংশে আমরা কিছু সাধারণ ম্যারিওনেট কমান্ড দিয়ে শুরু করব যা দিয়ে রিমোটলি ফায়ারফক্স OS নিয়ন্ত্রণ করা যায়। এটি কোন টেস্টের সম্পূর্ণ লেখা ধারণ করে না তবে এটি আপনাকে বেসিক কোড ফিচার শেখায় যা টেস্ট লেখার সময় আপনার কাজে লাগবে। তৃতীয় অংশে, আমরা একটি প্রকৃত টেস্টের মাধ্যমে কোডটিকে আরো মার্জিত করার জন্য অগ্রসর হব।  

+
+

ফায়ারফক্স OS স্টার্ট আপ

+

এই টেস্টগুলো লেখার সময় আমাদের আগে থেকেই ফায়ারফক্স OS রান করিয়ে নির্দেশ গ্রহণের জন্য প্রস্তুত রাখা লাগবেঃ

+
    +
  1. B2G ডেক্সটপ স্টার্ট আপ করুন।
    2. +
  2. লক স্ক্রিন নিষ্ক্রয় করুনঃ সেটিং অ্যাপ > স্ক্রিন লক > আনচেক লক স্ক্রিন।
    3. +
  3.  স্ক্রিন টাইম আউট/ স্লিপ মোড নিষ্ক্রিয় করুন এভাবেঃ সেটিং অ্যাপ > ডিসপ্লে > স্ক্রিন টাইমআউট সেটিং নেভার এ দিয়ে।
    4. +
  4. উইন্ডোটি পাশে সরিয়ে রেখে আমাদের টেস্ট কমান্ডের জন্য অপেক্ষা করুন।
    5. +
+

ম্যারিওনেট ফায়ার আপ করা

+

এখন আমরা শুরু করব পাথন কনসোলঃ খুবই সাধারণভাবে একটি টার্মিনাল উইন্ডো ওপেন করে python কমান্ড ইস্যু করুন।

+

এখান থেকে আমরা ফায়ারফক্স OS এর ভিতরে ম্যারিওনেট সার্ভারে কমান্ড দেওয়া শুরু করতে পারি। নিচের বেশ কিছু কমান্ড ইস্যু করার পর আপনার ফায়ারফক্স OS এর প্রতিক্রিয়া দেখতে পাওয়ার কথা। আমাদের প্রয়োজনীয় কোড সংবলিত লাইব্রেরী ইমপোর্ট করতে ম্যারিওনেটে পাইথন কনসোলে নিচের কমান্ডটি প্রবেশ করানঃ

+
from marionette import Marionette
+

এখন নিচের লাইন দুইটি রান করান, যা  ক্লাইন্ট থেকে কমান্ড গ্রহণের জন্য ম্যারিওনেট সেশনকে ইনিশিয়েট করেঃউপরে যেরকম বলা হয়েছে আপনি যদি সেভাবে লক স্ক্রিন নিষ্ক্রিয় না করে থাকেন তবে আপনি প্রোগ্রামের মাধ্যমে তা করতে পারেন এই কমান্ডটি ব্যবহার করেঃ

+
marionette = Marionette()
+marionette.start_session()
+
marionette.execute_script('window.wrappedJSObject.lockScreen.unlock();')
+

ফায়ারফক্স OS এর মধ্যে বিভিন্ন ফ্রেম প্রবেশ করানো
+  

+

ফায়ারফক্স এ ওয়েব অ্যাপ বিভিন্ন ইনফ্রেমে কাজ করে। ভিন্ন ভিন্ন ইনফ্রেমে (কোন উইন্ডোর মত) ওয়েব অ্যাপ রান করলে তাদের পূর্ণ নিরাপত্তা নিশ্চিত হয় এবং একই সাথে যথাযথ ব্যবস্থাপনাও। অ্যাপ যেখানে রান করে সেটিকে আপনি একটি স্যান্ডবক্সের মত ভাবতে পারেন। শুধুমাত্র ম্যারিওনেটই কোন নির্দিষ্ট সময়ে একটি ফ্রেমে কাজ করতে পারে। আমরা যে ফ্র্রেম নিয়ে কাজ করতে যাচ্ছি তাতে সুইচ হওয়ার জন্য ম্যারিওনেট দরকারঃ

+

টপ ফ্রেমটিও হল সিস্টেম অ্যাপ। প্রত্যেকটি অ্যাপ এবং তাদের ফ্রেম হল সিস্টেম অ্যাপের আওতাভুক্ত। আমাদের নতুন ম্যারিওনেট সেশন সিস্টেম ফ্রেম স্টার্ট করতে সক্ষম কিন্তু টেস্ট স্টার্ট করার জন্য আমাদের তা খুঁজে হোমস্ক্রিনে সুইচ করার দরকার হবে।

+

ইনফ্রেম খোঁজার জন্য, আমাদের কোনভাবে এটি নির্দিষ্ট করা লাগবে। যেহেতু ম্যারিওনেট ওয়েব ড্রাইভার API ভিত্তিক, তাই এলিমেন্ট লোকেট করার জন্য এটি একই তথ্য ব্যবহার করে। তাই আমরা ওয়েব ড্রাইভারে ওয়েব এলিমেন্ট নির্দিষ্ট করার জন্য যে কোন তথ্য ব্যবহার করতে পারি। আরো তথ্য জানুন এলিমেন্ট লোকেশন স্ট্র্যাটিজিজ এ।

+

এ ক্ষেত্রে আমরা হোমস্ক্রিন ইনফ্রেম সিলেক্ট করার জন্য  CSS সিলেক্টর div.homescreen iframe ব্যবহার করব; find_element() ফাংশনটি এটিকে দ্বিতীয় আর্গুমেন্ট হিসাবে নেয়, প্রথম আর্গুমেন্টটি হল খোঁজ করার জন্য কোন সিলেকশন ম্যাকানিজম ব্যবহৃত হচ্ছে তা নির্ধারণ করা। তারপর আমরা এই ফলাফল কোন একটি ভ্যারিয়েবলে স্টোর করে রাখব এবং আর্গুমেন্ট হিসাবে তা দিয়ে switch_to_frame()ফাংশনটি রান করাব। নিচের দুইটি নির্দেশ এখন অনুসরণ করুনঃ

+
# Switch context to the homescreen iframe and tap on the Contacts app icon
+home_frame = marionette.find_element('css selector', 'div.homescreen iframe')
+marionette.switch_to_frame(home_frame)
+
+

নোটঃআরো পড়ার জন্য এবং সুইচিং ফ্রেম  সম্পর্কিত ডায়াগ্রাম জানার জন্য অনুগ্রহ করে পড়ুন iFrames দিয়ে কাজ করা।

+
+

অ্যাপ্লিকেশন ওপেন করা

+

ঠিক আছে। এখন আমরা হোমস্ক্রিন অ্যাপ এ আছি। tap() function এর সাথে আমরা find_element()ব্যবহার করে আইকন এবং ট্যাপকে নির্দিষ্ট করতে পারি।

+
contacts_icon = marionette.find_element('css selector', "#footer li[aria-label='Contacts']")
+contacts_icon.tap()
+

এই কাজগুলো সব ঠিক মত হয়ে থাকলে আপনার এখন কনটেন্টস অ্যাপ ওপেন দেখতে পাওয়ার কথা, কিন্তু কনটেন্ট অ্যাপ ফ্রেম নিয়ে কাজ করার জন্য আমাদের কনটেন্ট অ্যাপ ফ্রেম সুইচ করতে হবে, যেমনটি আমরা আগে হোমস্ক্রিনে করেছিলাম আগেঃ

+
# First, we need to switch context back to the System frame
+marionette.switch_to_frame()
+
+# Now, switch context to the contacts app frame
+contacts_frame = marionette.find_element('css selector', "iframe[data-url*='contacts']")
+marionette.switch_to_frame(contacts_frame)
+

ফ্রেমে সুইচ করলে তা রিটার্ন করবে True. যদি তা হয়, তাহলে তো খুবই ভাল। এর মানে হল আমরা কন্টেন্টস্ অ্যাপ এর ভেতরে আছি এবং এটি ব্যবহারের জন্য প্রস্তুত।

+

অ্যাপ ম্যানিপুলেট করা

+

পরবর্তী ধাপে আমরা একটি টিপিক্যাল টেস্ট টাস্ক পারফর্ম করব — নতুন অ্যাকাউন্ট তৈরি করা, তাতে নাম দেওয়া এবং সেভ করা। প্রথমে, আমরা অ্যাড কনটেন্ট বাটনটি ট্যাপ করবঃ

+
# Tap [+] to add a new Contact
+marionette.find_element('id', 'add-contact-button').taঞ্জঃএখনNow let’s add the contact's name using the next two commands (send_keys() is used to insert a value into an element):
+
+
marionette.find_element('id', 'givenName').send_keys('Foo')
+# Add the contact's surname
+marionette.find_element('id', 'familyName').send_keys('Bar')
+

এখন ডান বাটনটি ট্যাপ করুন কনটেন্ট সেভ করার জন্যঃ

+
marionette.find_element('id', 'save-button').tap()
+

এবার আপনার কনটেন্টস্ অ্যাপ এর মধ্যে একটি নতুন কনটেন্ট দেখতে পাওয়ার কথা। যদি তাই হয়, দারুণ!

+
+

নোটঃ যদি আপনি না দেখেন, কনটেন্ট অ্যাপ পুনস্থাপন করুন অথবা কিল করুন এবং ফায়ারফক্স OS নেভিগেট করে হোমস্ক্রিনে ফিরে যান এবং পুনরায় টাস্কটি রান করার চেষ্টা করুন।

+
+

আপনার ম্যারিওনেট সেশন বন্ধ করা

+

শেষ পর্যন্ত, আপনার নিচের নির্দেশ ইস্যু করার মাধ্যমে ম্যারিওনেট সেশন শেষ করার কথাঃ

+
marionette.delete_session()
+

বেশ ভালো কাজ হয়েছে, কিন্তু যখন আপনি টেস্ট রান করানোর সময় আপনি পাইথন কনসোলে টাইপ করতে পারবেন না। তৃতীয় অংশে, আমরা স্ক্রিপ্টটি পাইথন ফাইলে কম্পাইল করব যা আমরা প্রতিবার ব্যবহার করতে করতে পারব যখনই আমরা টেস্ট রান করাব। আমরা একটি অ্যাসারশনও যুক্ত করব যাতে আমরা বুঝতে পারি টেস্ট সফল নাকি বিফল হয়েছ।

+
+

নোটঃ ম্যারিওনেট লেখার সময়, আপনি নিশ্চয় খেয়াল করে থাকবেন আপনার সমাধান খুঁজে বের করার জন্য কোন অ্যাপের HTMLস্ট্রাকচার এর আওতায় প্রবেশ করা জরুরি। সপ্তম অংশঃ আপনার নিজের টেস্ট লেখা আপনার সাহায্যার্থে কিছু প্রয়োজনীয় রিসোর্স দেয়।

+
+

 

diff --git a/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_3_reusable_tests/index.html b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_3_reusable_tests/index.html new file mode 100644 index 0000000000..15b92598e6 --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_3_reusable_tests/index.html @@ -0,0 +1,129 @@ +--- +title: তৃতীয় অংশঃ আমাদের টেস্টকে পুনরায় ব্যবহারযোগ্য টেস্টে উন্নীত করা +slug: Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_3_Reusable_tests +tags: + - needs review +translation_of: Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_3_Reusable_tests +--- +

{{PreviousNext("Mozilla /Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_2_Marrionette_Firefox_OS_interactions", "Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_4_Reusing_commands_Firefox_OS_setup")}}

+ +
+
+
 
+
দ্বিতীয় অংশ থেকে আমরা দেখেছি যে, ম্যারিওনেট ক্লাইন্ট কমান্ড ব্যবহার করে খুব সহজেই ফায়ারফক্স OS নিয়ন্ত্রণ করতে পারি, কিন্তু পাইথন কনসোলে তা টাইপ করা অত্যন্ত ধৈর্য সাপেক্ষ ব্যাপার। টেস্ট অটোমেশনের প্রধান সুবিধা হল এটি নিজে থেকে রান হতে পারে। এই অংশে আমরা শিখব তা কীভাবে করতে হয়, আমরা আমাদের সব কোড কমান্ড একটি পাইথন ফাইলে রাখি যাতে সবগুলো একবারেই রান হয়ে যায়।
+
+
+ +

টেস্ট কেস পুনরায় আলোচনা

+ +

দ্বিতীয় অংশে আমরা একটি আদর্শ টেস্ট রান করার ধাপগুলো দেখেছি — কন্ট্যাক্ট অ্যাপ ওপেন করা এবং নতুন কোন কন্ট্যাক্ট অ্যাড করাঃ

+ +
    +
  1. ফায়ারফক্স OS আনলক করা (ঐচ্ছিক; দ্বিতীয় অংশে, আমরা লক স্ক্রিন নিষ্ক্রিয় করে দিয়েছিলাম, সেজন্য আমরা সেটি এই অংশের কোডে উল্লেখ করব না।)
    2. +
  2. কন্ট্যাক্ট অ্যাপে সুইচ করা
    3. +
  3. নতুন কন্ট্যাক্ট আইকন ট্যাপ অ্যাড করা
    4. +
  4. কন্ট্যাক্ট তালিকায় টাইপ করা
    5. +
  5. done ট্যাপকরা
    6. +
  6. অপেক্ষা করা এবং নিরীক্ষণ করা কন্ট্যাক্ট প্রস্তুত কিনা
    7. +
+ +

আমাদের টেস্ট পাইথন ফাইলে রাখা

+ +

আমরা যদি এই সমস্ত ধাপগুলো একটি পাইথন ফাইলে রাখি, তবে আমরা তা পুনরায় ব্যবহার করতে পারব এবং অনেক দ্রুত রান করাতে পারব। আপনার পছন্দ মত কোন convenient directory তে test_add_contact.py নামে একটি নতুন টেক্সট ফাইল তৈরি করুন।

+ +

এই ফাইলে, নিচের লিস্ট অনুসারে, দ্বিতীয় অংশে দেখানো কমান্ডগুলো প্রবেশ করান। আমরা পাইথন পর্যায়ের স্ট্রাকচার ব্যবহার করব, কারণ এটি ভাল চর্চা এবং এই টিউটোরিয়ালে পরবর্তীতে স্টেপে বিল্ড অনের জন্য  ভাল ভিত্তি তৈরি করে।

+ +
import time
+from marionette import Marionette
+
+class TestContacts:
+
+    def __init__(self):
+        self.test_add_contacts()
+
+    def test_add_contacts(self):
+        # Create the client for this session. Assuming you're using the default port on a Marionette instance running locally
+        self.marionette = Marionette()
+        self.marionette.start_session()
+
+        # Switch context to the homescreen iframe and tap on the contacts icon
+        time.sleep(2)
+        home_frame = self.marionette.find_element('css selector', 'div.homescreen iframe')
+        self.marionette.switch_to_frame(home_frame)
+        contacts_icon = self.marionette.find_element('css selector', "#footer li[aria-label='Contacts']")
+        contacts_icon.tap()
+
+        # Switch context back to the base frame
+        self.marionette.switch_to_frame()
+        time.sleep(2)
+
+        # Switch context to the contacts app
+        contacts_frame = self.marionette.find_element('css selector', "iframe[data-url*='contacts']")
+        self.marionette.switch_to_frame(contacts_frame)
+
+        # Tap [+] to add a new Contact
+        self.marionette.find_element('id', 'add-contact-button').tap()
+        time.sleep(2)
+
+        # Type name into the fields
+        self.marionette.find_element('id', 'givenName').send_keys('John')
+        self.marionette.find_element('id', 'familyName').send_keys('Doe')
+
+        # Tap done
+        self.marionette.find_element('id', 'save-button').tap()
+        time.sleep(2)
+
+        # Close the Marionette session now that the test is finished
+        self.marionette.delete_session()
+
+if __name__ == '__main__':
+    TestContacts()
+
+ +
+

নোটঃএকটি ব্যাপার আপনি খেয়াল করে থাকবেন যেটি আমরা দ্বিতীয় অংশে করি নাই তা হল পাইথন time.sleep()ফাংশন— এটি একটি নির্দিষ্ট সমযের জন্য স্ক্রিপ্টটি মন্থর করে দেয় (defined in seconds) পরবর্তী লাইনে অগ্রসর হওয়ার আগে। আমরা অটোমেটেড টেস্টে এই লাইনগুলো যুক্ত করেছি কারণ আমাদের ব্যবহারকারীকে বাটন ট্যাপ করা এবং আরও আঞ্জাঞ্জ ব্যাপারে ব্যাপারে সিমুলেট করা দরকার এবং ফায়ারফক্স OS এর resulting কাজ সম্পন্ন হওয়ার জন্য। আমরা যদি কোন দেরি না করেই এই স্ক্রিপ্টটি রান করে করাতাম তবে পাইথন তাৎক্ষণিকভাবে সবকিছু করে ফেলত এবং খুব সম্ভবত সেটি টেস্ট ফেল করার কারণ হত কারণ ফায়ারফক্স OS সেটি করতে সমর্থ নয়।

+
+ +

 

+ +

এখন আপনি ডিরেক্টরিতে নেভিগেট করে টেস্ট রান করতে পারেন। টেস্টটি আপনার টার্মিনালে সেভ হয়ে আছে এবং নিচের কমান্ডটি রান করছেঃ

+ +
python test_add_contact.py
+ +
+

নোটঃ পাইথন ইনডেন্টেশন রুল এর ব্যাপারে সতর্ক হন। কপি এবং পেস্ট করার পর কোড সঠিকভাবে রান করানোর জন্য আপনার সবকিছু সঠিকভাবে ইনডেন্ট করার প্রয়োজন হতে পারে। আপনি যদি এই সংক্রান্ত কোন ত্রুটি পেয়ে থাকেন তবে খেয়াল করে দেখুন সব ইনডেন্টেশন লেভেল ভিন্ন ভিন্ন ট্যাবে পৃথকীকৃত কিনা।

+
+ +
+

নোটঃ আপনি আরো খেয়াল করে থাকবেন যে, উপরের কোড ব্যবহার করে যে নাম যুক্ত করা হয়েছে তা হল "John Doe", দ্বিতীয় অংশে ব্যবহৃত নাম "Foo Bar" এর থেকে আলাদা। এটি করার কারণ হল কোড যাতে করে সফলভাবে রান করানো যায় এবং অন্য কন্ট্যাক্ট যুক্ত করা যায়। আপনি যদি একই নাম ব্যবহার করে অন্য একটি কন্ট্যাক্ট যুক্ত করতে চেষ্টা করেন তবে ফায়ারফক্স OS আপনাকে অনুরূপ কন্ট্যাক্টের ব্যাপারে সতর্ক করে দিবে। এক্ষেত্রে সব থেকে ভাল উপায় হল, ফায়ারফক্স OS ইন্টারফেসে টেস্টটি পুনরায় রান করানো এবং প্রতিবার রান করানোর পূর্বে আগেরটি মুছে ফেলা।

+
+ +

অ্যাসারশন যুক্ত করা

+ +

যে জিনিসটি আবারো আমরা আমাদের টেস্ট থেকে মিস করছি, যা অটোমেটেড টেস্টের জন্য যেটি দরকারি, তা হল অ্যাসারশন — ফায়ারফক্স OS কে আমরা যে পর্যায়ে নিয়ে যেতে চাচ্ছি, সেটি সফল ছিল কিনা তা পরিমাপের একটি তথ্য এটি। কিছু কোড যুক্ত করে আমরা দেখব নতুন কন্ট্যাক্টটি যুক্ত হয়েছে কিনা।
+  
+ # Close the Marionette session... লাইনের ঠিক আগে, এই কোডটি যুক্ত করুন, তবে তার আগে এটি নিশ্চিত করুন সেটি ওই ক্লাসের অন্য লাইনের সাথে একই লেভেলে ইনডেন্ট হয়েছে কিনাঃ

+ +
# Now let's find the contact item and get its text
+contact_name = self.marionette.find_element('css selector', 'li.contact-item:not([data-group$="ice"]) p').text
+assert contact_name == 'John Doe'
+
+
+ +

পুরানো কন্ট্যাক্টটি মুছে ফেলুন এবং নিচেরটিসহ টেস্টটি পুনরায় রান করানোর চেষ্টা করুনঃ

+ +
python test_add_contact.py
+ +

যদি এগুলো সব থিক্তহাক মত রান করে তাহলে ভাল, এখন আমাদের জন্য আছে ফাংশন টেস্ট!

+ +
+

নোটঃ অ্যাসারশনকে সাথে সাথেই ঠিকভাবে কাজ করতে দেখা যাবে না, কিন্তু টেস্ট রানার শুরু করার জন্য অ্যাসারশন খুবই গুরুত্বপূর্ণ যেমনটি বলা হয়েছে পঞ্চম অংশঃ টেস্ট রানারের সাথে পরিচিত হওয়া। ইউনিটেস্ট এর মত টেস্ট রানার অ্যাসারশন ব্যবহার করে দেখে টেস্ট সফলভাবে শেষ হয়েছে কিনা অতপর এই টেস্টের ফলাফল দিন (OK অথবা FAIL)

+
+ +

সময়ের উপর একটি নোট

+ +

অটোমেটেড টেস্ট রান করানোর সময় যে কাজটি বেশ কষ্টসাধ্য তা হল সময় নির্ধারণ। টেস্টটি যদি ফায়ারফক্স OS এর একটি টেস্ট সম্পন্ন হবার আগেই পরবর্তী ধাপে অগ্রসর হয় তবে খুব সম্ভবত আমরা ভুল পথে আগাচ্ছি।
+  
+ উপরে যেমনটি বলা হয়েছে, নমুনা কোডে আমরা এই সমস্যার সমাধানে time.sleep(x) কমান্ডটি যুক্ত করেছি। যাই হোক time.sleep(x) ব্যবহার করা খুব ভাল কথা না। হার্ডকোডেড সেট টাইম ব্যবহার করার ফলে এম্নটি হতে পারে আপনার টেস্ট যথেষ্ট সময় ধরে রান করছে না অথবা অনেক বেশি সময় ধরে রান করছে। সব থেকে খারাপ ব্যাপারটি হল latter; এটি ফলস নেগেটিভ কেস রেসাল্ট দেখাবে — যার মানে হল অ্যাপ যথার্থভাবে কার্যকর হলেও আশানুরূপ গতিতে কাজ না করে কিছুটা ধীরে কাজ করার পরিবর্তে সেটি টেস্ট ব্যর্থতা ফল দেখাবে।

+ +

পরবর্তী অংশে, আমরা আলাদা আলাদা পাইথন ফাংশনে টেস্টের বিশেষ কিছু অংশের উপর অগ্রসর হব এবং sleep() ফাংশনের পরিবর্তে উপযুক্ত ডাইনামিক ওয়েটস দিয়ে।

diff --git a/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_4_reusing_commands_firefox_os_setup/index.html b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_4_reusing_commands_firefox_os_setup/index.html new file mode 100644 index 0000000000..0260079d94 --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_4_reusing_commands_firefox_os_setup/index.html @@ -0,0 +1,108 @@ +--- +title: চতুর্থ অংশঃ ফায়ারফক্স সেট-আপ করার জন্য কমান্ডের পুনঃব্যবহার +slug: >- + Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_4_Reusing_commands_Firefox_OS_setup +tags: + - Automation + - B2G + - Firefox OS + - Gaia + - Marionette + - Python + - Testing + - gaia-ui-tests + - needs review +translation_of: >- + Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_4_Reusing_commands_Firefox_OS_setup +--- +

{{PreviousNext("Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_3_Reusable_tests", "Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_5_Introducing_a_test_runner")}}

+ +
+
+

দ্বিতীয় এবং তৃতীয় অংশে আমরা ওয়ার্কিং টেস্ট পেয়েছি, কিন্তু আমরা যদি টেস্ট রান করানোর আগে এটির স্টেট পুনসথাপন করতে চায় (যেমন ওপেন অ্যাপ কিল করা) তবে আমাদেরকে তা করতে হবে আবার নতুন করে করতে হবে। সেটা কিছুটা বিরক্তিকর, তাই এটিকে স্বনির্ভর করা দরকার! এই অংশে আমরা সেটিই করা দেখব এবং আরো দেখব আলাদা আলাদা পাইথন মেথডে কোডের বিট ব্রেক আউট করা, যা আমরা রিইউজ করতে পারি।

+
+
+ +

নিজে থেকে পুনঃস্থাপিত স্টেট

+ +

কোন টিপিক্যাল টেস্ট রানের আগে, আমাদের খুব সম্ভবত ফায়ারফক্স OS লক স্ক্রিন আনলক করে নেওয়া লাগবে এবং সব চলমান অ্যাপ কিল করতে হবে। এখন দেখা যাক এটি কীভাবে করা যায়।

+ +

লক স্ক্রিন আনলক করা

+ +

অন্য কোথাও যাওয়ার আগে, লক স্ক্রিন পুনরায় সক্রিয় করে নিনঃ সেটিং অ্যাপ > স্ক্রিন লক > লক স্ক্রিন , যদি আপনি তা না করে থাকেন।

+ +

নিচের পাইথন ম্যাথোডটি আপনার test_add_contact.py ফাইলে সংযুক্ত করুন, ক্লাসের ভেতরেঃ

+ +
def unlock_screen(self):
+    self.marionette.execute_script('window.wrappedJSObject.lockScreen.unlock();')
+ +

এখন, যখন কল করা হবে, এই ম্যাথোডটি ফায়ারফক্স OS আনলক করবে। এখন নিচের লাইনগুলো আমাদের কোডে self.marionette.start_session() লাইনটির ঠিক নিচে যুক্ত করে এটিকে কল করা যাকঃ

+ +
# Unlock the screen
+self.unlock_screen()
+ +

কোন ওপেন অ্যাপ কিল করা

+ +

এখন আমরা কোড রান করানোর সময় অন্য সব ওপেন কোড কিল করার জন্য আমাদের কোডে একটি ম্যাথোড যুক্ত করব। সেটা এমন দেখাবেঃ

+ +
    def kill_all(self):
+        self.marionette.switch_to_frame()
+        self.marionette.execute_async_script("""
+             // Kills all running apps, except the homescreen.
+             function killAll() {
+               let manager = window.wrappedJSObject.appWindowManager;
+
+               let apps = manager.getApps();
+               for (let id in apps) {
+                 let origin = apps[id].origin;
+                 if (origin.indexOf('homescreen') == -1) {
+                   manager.kill(origin);
+                 }
+               }
+             };
+             killAll();
+             // return true so execute_async_script knows the script is complete
+             marionetteScriptFinished(true);
+            """)
+ +

সর্বশেষ অংশে যুক্ত unlock_screen ম্যাথোডের ঠিক পরে এটি যুক্ত করুন।

+ +

তারপর, বাকি টেস্টের সাথে এটিকে রান করানোর জন্য নিচের ফাংশনটি যুক্ত করুন; self.unlock_screen() এর ঠিক পরে যুক্ত করুনঃ

+ +
# kill all open apps
+self.kill_all()
+ +

এখন পুনরায় টেস্ট রান করানোর চেষ্টা করার আগে, শেষবার টেস্ট রান করানোর পর কন্ট্যাক্ট অ্যাপ ওপেন রেখে লক স্ক্রিনে ফিরে যাওয়ার চেষ্টা করুন। স্ক্রিন আনলক থাকার কারণে, টেস্ট পুনরায় রান করানর আগে, ওপেন কন্ট্যাক্ট অ্যাপ নিজে থেকেই কিল হয়ে যাবে, তাই এটির অবস্থা আপনার টেস্ট করানর প্রক্রিয়া ব্যাহত করবে না। আপনার টেস্ট রানের সুদূর নির্ভরতার জন্য এটি গুরুত্বপূর্ণ।

+ +

রানটি বেশ কয়েকবার রান করিয়ে দেখুন সব কিছু ঠিকঠাক মত কাজ করছে কিনা এবং ফায়ারফক্স ঠিক মত রিসেট করে নিন।

+ +

ডাইনামিক ওয়েটস্

+ +

তৃতীয় অংশে আমরা ডাইনামিক ওয়েটস্ এর গুরুত্ব উল্লেখ করেছি। ঠিক ওয়েব ড্রাইভার/ সেলেনিয়াম2 এর মত ম্যারিওনেটেরও এমন নিজস্ব সিনট্যাক্স আছেঃ

+ +
from marionette_driver import Wait
+
+# Wait until element is displayed
+Wait(self.marionette).until(lambda m: m.find_element('id', 'element_id').is_displayed())
+ +

যতক্ষণ না পর্যন্ত নির্ধারিত এলিমেন্টটি ডিসপ্লে হবে তখন পর্যন্ত এই কোডটি অপেক্ষা করবে। এবার আমরা জানি সেক্ষেত্রে আমাদের কী করতে হবে। এবার আমাদের টেস্টে এই কোড কন্সট্রাক্ট ব্যবহার করে দেখা যাক।

+ +

প্রথমত, আপনার বর্তমান ইম্পোরট লাইনের ঠিক নিচে ওয়েট ইম্পোরটটি যুক্ত করুনঃ

+ +
from marionette_driver import Wait
+ +

এখন আমরা কন্ট্যাক্ট আইকনে ট্যাপ করার পর (  self.marionette.switch_to_frame()এর ঠিক পরে ) দ্বিতীয় time.sleep(2)ফাংশনটির পরিবর্তে Wait()ম্যাথোডটি লিখব। কন্ট্যাক্ট ফ্রেম ডিসপ্লে না হওয়া পর্যন্ত সেটি অপেক্ষা করবেঃ

+ +
Wait(self.marionette).until(lambda m: m.find_element('css selector', "iframe[data-url*='contacts']").is_displayed())
+ +

আমরা যখন কোন নতুন কন্ট্যান্ট অ্যাপ তৈরির জন্য + চিহ্নতে ট্যাপ করি, আমরা অ্যাড কন্টেন্ট এর জন্য অপেক্ষা করব যাতে ভিউটি সম্পূর্ণ সরে যায়।এবার আমরা যেটি ট্যাপ করব তা হল Done (সেভ) বাটন। তাই সেটি সঠিক স্থানে না আসা পর্যন্ত আমরা অপেক্ষা করব। তৃতীয় time.sleep(2)ফাংশনটির পরিবর্তে নিচেরটি লিখবঃ

+ +
Wait(self.marionette).until(lambda m: m.find_element('id', 'save-button').location['y']== 0)
+ +

এক্ষেত্রে আমরা Done বাটনটি স্ক্রিনের শীর্ষে দেখতে পাইয়া পর্যন্ত অপেক্ষা করব; প্রথমের দিকে এলিমেন্টটি স্ক্রিনের ভিন্ন ভিন্ন স্থানে দেখতে পাওয়া যাবে তবে চূড়ান্ত স্থায়ী অবস্থানের জন্য অপেক্ষা করাই শ্রেয়।

+ +

আমরা এলিমেন্টগুলোর *not* দৃশ্যমান হওয়ার জন্যও অপেক্ষা করতে পারি। Done ট্যাপ করার পর, not এর মত একই ধরণের Wait()ম্যাথোড ব্যবহার করে Done বাটনটি অদৃশ্য হওয়ার জন্য অপেক্ষা করব, বাকি কোড রান করানোর আগে। চতুর্থ এবং সর্বশেষ time.sleep(2)ফাংশনটির পরিবর্তে নিচেরটি লিখুনঃ

+ +
Wait(self.marionette).until(lambda m: not m.find_element('id', 'save-button').is_displayed())
+ +

আপনার টেস্ট যদি ঠিক মত রান করতে থাকে তাহলে তো দারুণ! আমরা আমাদের টেস্টকে আরো বেশি মডুলার এবং নির্ভরযোগ্য করে ফেলেছি। পঞ্চম অংশে আমরা টেস্ট রানার ব্যবহারের সাথে পরিচিত হব।

diff --git a/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_5_introducing_a_test_runner/index.html b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_5_introducing_a_test_runner/index.html new file mode 100644 index 0000000000..c321508f02 --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_5_introducing_a_test_runner/index.html @@ -0,0 +1,187 @@ +--- +title: পঞ্চম অংশঃ টেস্ট রানার পরিচিতি +slug: >- + Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_5_Introducing_a_test_runner +tags: + - Automation + - B2G + - Firefox OS + - Gaia + - Marionette + - Python + - gaia-ui-tests + - needs review + - tests +translation_of: >- + Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_5_Introducing_a_test_runner +--- +

{{PreviousNext("Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_4_Reusing_commands_Firefox_OS_setup", "Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_6_Marionette_By_class")}}

+ +
+

এ পর্যন্ত সবকিছু ঠিকঠাক মত চলছে, কিন্তু এখন পর্যন্ত আমরা শুধুমাত্র একটি টেস্ট নিয়ে কাজ করছি। বাস্তবে ওয়েব অ্যাপের বিশাল দুনিয়ায় শত শত হাজার হাজার টেস্ট কেস আছে এবং অবশ্যই আমরা প্রত্যেকটি আলাদা আলাদা করে রান করাতে যাব না। এই মুহূর্তে আমাদের টেস্ট খোঁজা এবং এক্সিকিউট করার জন্য প্রয়োজন টেস্ট রানার ব্যবহার করা এবং এই নিবন্ধে আমরা সেটিই দেখব।

+
+ +

টেস্ট রানার

+ +

টেস্ট রানার প্রকৃত টেস্টিং ফ্রেমওয়ার্কের জন্য বেশ ভালো সুযোগ দেয়। টেস্ট রানারের কাজ হল টেস্ট ডিজাইন করা, অ্যাট্রিবিউটের সাথে টেস্ট ট্যাগ করা (annotations) এবং রিপোরটিং ও অঞ্জাঞ্জ ফিচারের সুযোগ দেয়। বেশ কিছু সংখ্যক পাইথন টেস্ট রানার আছে কিন্তু এই ক্ষেত্রে আমরা পাইথনের নিজস্ব unittest ব্যবহার করব কারণ এটি সহজ , ফলপ্রসূ এবং পাইথন প্যাকেজের সাথেই পাওয়া যায়, আলাদা করে কিছু ইন্সটল করার প্রয়োজন হয় না।

+ +

সাধারণত আপনি আপনার টেস্ট ৩টি স্ট্যান্ডার্ড সেকশনের মধ্যে ব্রেক করে ফেলেন;  setUp(), টেস্ট এবং tearDown(), টেস্ট রানার সেট-আপের জন্য যথোপযুক্ত।
+  
+ setUp() এবং tearDown() ম্যাথোড প্রতি টেস্টের জন্য আলাদা করে অটোমেটিক্যালি রান করানো হয় এবং এতে আছেঃ

+ + + +

 আপনার আসল টেস্ট রান করানোর জন্য যেসব কোড দরকার তা হল সেট-আপের টেস্ট পার্টটি। এখন দেখা যাক কীভাবে আমরা দ্বিতীয় ও চতুর্থ অংশে করা বিল্ড আপে এটি প্রয়োগ করি।

+ +

টেস্ট রান করা_যুক্ত করা_contact.py unittest এর সাথে

+ +

unittest ব্যবহার করার জন্য প্রথমে আমাদের unittest ইম্পোরট করা দরকারঃ আপনার অন্যান্য ইম্পোরট লাইনের মধ্যে নিচেরটি যুক্ত করুনঃ

+ +
import unittest
+ +

এরপর আমাদের TestContacts ক্লাসের মধ্যে unittest পাস করে নিন এবং নিচের লাইনের মধ্যে আপনার class আপডেট করে নিনঃ

+ +
class TestContacts(unittest.TestCase):
+ +

এরপর আমরা নিচেরটি মুছে ফেলবঃ

+ +
    def __init__(self):
+        self.test_add_contacts()
+ +

টেস্টটিকে ইনিশিয়ালাইজ করলে তা unittest দ্বারা নিয়ন্ত্রিত হবে, তাই আমাদের এটি নিয়ন্ত্রণ করা লাগবে না। আপনার কোডের নিচে কোডের, নিচেরটি রিপ্লেস করেঃ

+ +
if __name__ == '__main__':
+    TestContacts()
+ +

এটি দিয়েঃ

+ +
if __name__ == '__main__':
+    unittest.main()
+ +

এবার আমরা তৈরি করব setUp(self) : TestContacts হল আমাদের ক্লাসের মধ্যে ব্যবহৃত ম্যাথড এবং নিচের ধাপগুলো এর ভেতরে রাখুনঃ

+ +
    +
  1. ম্যারিওনেট ইনিশিয়েট করে ম্যারিওনেট সেশন ওপেন করা
    2. +
  2. স্ক্রিন আনলক করুন
    3. +
  3. সব ওপেন অ্যাপ কিল করুন
    4. +
  4. কন্ট্যাক্ট অ্যাপ লোড করুন
    5. +
+ +

ম্যাথডটি দেখতে এমন হওয়া উচিতঃ

+ +
    def setUp(self):
+         # Create the client for this session. Assuming you're using the default port on a Marionette instance running locally
+        self.marionette = Marionette()
+        self.marionette.start_session()
+
+        # Unlock the screen
+        self.unlock_screen()
+
+        # kill all open apps
+        self.kill_all()
+
+        # Switch context to the homescreen iframe and tap on the contacts icon
+        time.sleep(2)
+        home_frame = self.marionette.find_element('css selector', 'div.homescreen iframe')
+        self.marionette.switch_to_frame(home_frame)
+ +

এখন tearDown(self): ম্যাথোড তৈরি করা। এই ক্ষেত্রে আমাদের Marionette সেশন সমাপ্ত করার জন্য কোড যুক্ত করা প্রয়োজন। ম্যাথোডটি এমন হওয়া উচিতঃ

+ +
    def tearDown(self):
+        # Close the Marionette session now that the test is finished
+        self.marionette.delete_session()
+
+ +

এখন ঠিক আগের মত করেই টেস্টটি রান করানোর চেষ্টা করুতি।আপনি খেয়াল করে থাকবেন যে এখন আপনি passes এবং failures এর জন্য রিপোর্ট পাচ্ছেন। unittest বা py.test এর মত টেস্ট রানার ব্যবহার করার সুবিধা এটি।

+ +
+

নোটঃ: যদি আপনি কোথাও আটকে গিয়ে থাকেন তবে আপনার সাহায্যার্থে প্রচুর unittest গাইড রয়েছে ইন্টারনেটে। আমাদের পরামর্শ http://selenium-python.readthedocs.org/en/latest/getting-started.html এবং http://assertselenium.com/2013/10/07/getting-started-with-python-webdriver/. এগুলো পাইথন এবং ওয়েবড্রাইভারের জন্য, কিন্তু এখন পর্যন্ত সেগুলো ব্যবহারযোগ্য নয়।

+
+ +

রেফারেন্স কোড

+ +

উদাহরণ হিসাবে, এই ধাপেও আমাদের ফাইনাল কোডটি নিচের মত দেখাবেঃ

+ +
import time
+from marionette import Marionette
+from marionette_driver import Wait
+import unittest
+
+
+class TestContacts(unittest.TestCase):
+
+    def unlock_screen(self):
+        self.marionette.execute_script('window.wrappedJSObject.lockScreen.unlock();')
+
+    def kill_all(self):
+        self.marionette.switch_to_frame()
+        self.marionette.execute_async_script("""
+             // Kills all running apps, except the homescreen.
+             function killAll() {
+               let manager = window.wrappedJSObject.AppWindowManager;
+
+               let apps = manager.getApps();
+               for (let id in apps) {
+                 let origin = apps[id].origin;
+                 if (origin.indexOf('homescreen') == -1) {
+                   manager.kill(origin);
+                 }
+               }
+             };
+             killAll();
+             // return true so execute_async_script knows the script is complete
+             marionetteScriptFinished(true);
+            """)
+
+    def setUp(self):
+         # Create the client for this session. Assuming you're using the default port on a Marionette instance running locally
+        self.marionette = Marionette()
+        self.marionette.start_session()
+
+        # Unlock the screen
+        self.unlock_screen()
+
+        # kill all open apps
+        self.kill_all()
+
+        # Switch context to the homescreen iframe and tap on the contacts icon
+        time.sleep(2)
+        home_frame = self.marionette.find_element('css selector', 'div.homescreen iframe')
+        self.marionette.switch_to_frame(home_frame)
+
+
+    def test_add_contacts(self):
+        contacts_icon = self.marionette.find_element('css selector', "#footer li[aria-label='Contacts']")
+        contacts_icon.tap()
+
+        # Switch context back to the base frame
+        self.marionette.switch_to_frame()
+        Wait(self.marionette).until(lambda m: m.find_element('css selector', "iframe[data-url*='contacts']").is_displayed())
+
+        # Switch context to the contacts app
+        contacts_frame = self.marionette.find_element('css selector', "iframe[data-url*='contacts']")
+        self.marionette.switch_to_frame(contacts_frame)
+
+        # Tap [+] to add a new Contact
+        self.marionette.find_element('id', 'add-contact-button').tap()
+        Wait(self.marionette).until(lambda m: m.find_element('id', 'save-button').location['y']== 0)
+
+        # Type name into the fields
+        self.marionette.find_element('id', 'givenName').send_keys('John')
+        self.marionette.find_element('id', 'familyName').send_keys('Doe')
+
+        # Tap done
+        self.marionette.find_element('id', 'save-button').tap()
+        Wait(self.marionette).until(lambda m: not m.find_element('id', 'save-button').is_displayed())
+
+    def tearDown(self):
+        # Close the Marionette session now that the test is finished
+        self.marionette.delete_session()
+
+if __name__ == '__main__':
+    unittest.main()
+
+
diff --git a/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_7_writing_your_own_tests/index.html b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_7_writing_your_own_tests/index.html new file mode 100644 index 0000000000..08ea77291c --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_7_writing_your_own_tests/index.html @@ -0,0 +1,46 @@ +--- +title: 'পার্ট ৭: আপনার নিজস্ব টেস্ট লিখার পদ্ধতি' +slug: Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_7_Writing_your_own_tests +tags: + - NeedsReview + - orvi +translation_of: Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_7_Writing_your_own_tests +--- +

{{PreviousNext("Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_6_Marionette_By_class", "Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_8_Using_a_base_class")}}

+
+

ফায়ারফক্স ওএস এর জন্য অটোমেটিক টেস্ট লিখতেএই পর্যন্ত আমরা আপনাকে যে পরিমাণ টুলস এবং তথ্য সরবরাহ করেছি তা আপনার নিজস্ব  সহায়তা করবে। এর পাশাপাশি আপ করার  এবং দ্রুত রানিং এর জন্য এইখানে যথেষ্ট পরিমাণ স্টেপ আছে  । এই পার্টে আমরা অনেক গভীরে যাব যেখানে আপনি অনেক রিসোর্স এবং আইডিয়া পাবেন এবং এর পর আপনি এইখানে থেকে নিজস্ব কাজে উৎসাহিত হবেন। এখন আমরা আরো সামনে অগ্রসর হব যাতে আপনি নিজের টেস্ট নিজে করতে পারেন  — এনজয়!

+
+

রিসোর্সসমূহঃ

+

নিচের রিসোর্সগুলো খুব কাজের হবে যদি আপনি আপনার নিজের ইউনিট টেস্ট বিল্ড করতে চান।

+ +

নতুন এবং মোডিফাই টেস্টের জন্য আইডিয়া

+

এই সেকশন শুরু করার জন্য আপনাকে কিছু আইডিয়া দিবে। 

+

 test_add_contact.py মোডিফাইং 

+

প্রথমে শুরু করা যাক আমরা যেগুলোর কাজ শুরু করেছি সেগুলোর মডিফাইয়িং দিয়েঃ

+
    +
  1. টেস্ট কন্টাক্ট তৈরীর সময় প্রতিবার ইউনিক নাম আছে কিনা দেখুন। 
    2. +
  2.  setUp() স্টেপে সব কন্টাক্ট ডিলিট করুন।
    3. +
  3. আনলক করার আগে স্ক্রীন চালু করুন।
    4. +
+

এখন আরেকটি টেস্ট মেথড এড করুন। এইটাকে আপনি যা খুশি বলতে পারেন যতক্ষণ এর শুরুতে test_  মেথড থাকে ।এই টেস্টটা নিচের মত কাজ করবে:

+
    +
  1. কন্টাক্ট ওপেন ।
    2. +
  2. প্রথম টেস্টে যে নাম নিওয়া হয়েছে  থেকে ভিন্ন নাম নিয়ে নতুন একটি কন্টাক্ট সৃষ্টি করুন।
    3. +
  3. এডিট মুডে গিয়ে কন্টাক্ট রি-এন্টার করুন।
    4. +
  4.  Company নাম যুক্ত করুন।
    5. +
  5.  Done ট্যাবে চাপ দিন।
    6. +
  6. দেখুন কোম্পানীর তালিকাভুক্ত হয়েছে।
    7. +
+

এখন আপনি যখন টেস্ট ফাইল চালু করবেন , তাহলে উভয় টেস্ট রান করা শুরু করবে। এখন আমরা টেস্ট অটোমেশনের শক্তি খুব কাছাকাছি থেকে লক্ষ্য করব— স্বয়ংক্রিয়ভাবে  একটি টেস্ট সিরিজ চালানো এবং এর ফলাফল রিপোর্ট করার ক্ষমতা!

+

টেস্টের নতুন কিছু আইডিয়া 

+ +

 

diff --git a/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_8_using_a_base_class/index.html b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_8_using_a_base_class/index.html new file mode 100644 index 0000000000..9450f9245b --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_8_using_a_base_class/index.html @@ -0,0 +1,98 @@ +--- +title: 'অংশ ৮: একটি বেস ক্লাস ব্যবহার করা' +slug: Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_8_Using_a_base_class +tags: + - B2G + - Gaia + - Marionette + - gaia-ui-tests + - tests + - অটোমেশন + - পাইথন + - ফায়ারফক্স ওএস +translation_of: Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_8_Using_a_base_class +--- +

{{PreviousNext("Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_7_Writing_your_own_tests", "Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_9_app_objects")}}

+ +
+

এখন একাধিক টেস্টের পর আপনি সম্ভবত আপনি আপনার অগ্রগতি সম্পর্কে বেশ ভাল অনুভব করছেন। তবে আরও কোড দক্ষতা উন্নত করার অন্যান্য উপায় আছে— আপনি হয়তো খেয়াল করছেন যে এ পর্যন্ত আপনাকে setUp()এবং একটি tearDown()মেথড প্রতিটি ফাইলে অন্তর্ভুক্ত করতে হয়েছে, যেগুলো বর্তমান কন্সট্রাক্টর দিয়ে পরিচালিত হচ্ছে  আমরা এই সিরিজে দেখেছি। আপনি কয়েক ডজন পরীক্ষা থেকে থাকে তাহলে সেই কোড অনুলিপি অনেক! এই নিবন্ধে আমরা দেখব কিভাবে setUp()/tearDown() কোড একটি TestBase ক্লাসে সকল টেস্টের জন্য রাখা যায়, যা তারপর প্রতিটি টেস্ট ফাইলের মধ্যে ইম্পোর্ট করা যাবে।

+
+ +

test_base.py

+ +

প্রথমত, একটি নতুন ফাইল তৈরি করুন test_base.py,  আপনার টেস্ট কেইস হিসেবে একিই ডিরেক্টরির মধ্যে।

+ +

পরবর্তীতে, আপনার প্রয়োজনীয় স্টেটমেন্ট যা সাধারণ সেট আপ এর সাথে সম্পর্কযুক্ত (unittest, Marionette and time) ফাইলটিতে সরিয়ে ফেলুন, একটি TestBase ক্লাস সহ যার মধ্যে setUp() and tearDown() মেথডগুলো, এবং সাহায্যকারি সাধারণ helper ফাংশনগুলো আছে (such as unlock_screen())। ফাইলটি কিছুটা এরকম দেখানো উচিত:

+ +
import time
+import unittest
+from marionette import Marionette
+
+
+class TestBase(unittest.TestCase):
+
+    def unlock_screen(self):
+        self.marionette.execute_script('window.wrappedJSObject.lockScreen.unlock();')
+
+    def kill_all(self):
+        self.marionette.switch_to_frame()
+        self.marionette.execute_async_script("""
+             // Kills all running apps, except the homescreen.
+             function killAll() {
+               let manager = window.wrappedJSObject.AppWindowManager;
+
+               let apps = manager.getApps();
+               for (let id in apps) {
+                 let origin = apps[id].origin;
+                 if (origin.indexOf('homescreen') == -1) {
+                   manager.kill(origin);
+                 }
+               }
+             };
+             killAll();
+             // return true so execute_async_script knows the script is complete
+             marionetteScriptFinished(true);
+            """)
+
+    def setUp(self):
+         # Create the client for this session. Assuming you're using the default port on a Marionette instance running locally
+        self.marionette = Marionette()
+        self.marionette.start_session()
+
+        # Unlock the screen
+        self.unlock_screen()
+
+        # kill all open apps
+        self.kill_all()
+
+        # Switch context to the homescreen iframe and tap on the contacts icon
+        time.sleep(2)
+        home_frame = self.marionette.find_element('css selector', 'div.homescreen iframe')
+        self.marionette.switch_to_frame(home_frame)
+
+
+    def tearDown(self):
+        # Close the Marionette session now that the test is finished
+        self.marionette.delete_session()
+
+ +

আপনার টেস্ট ফাইল আপডেট করা

+ +

আপনার test_base.py ফাইল তৈরি হওয়ার পর, আপনাকে আপনার টেস্ট ফাইলে  TestBase ইমপোর্ট করতে হবে, এবং টেস্ট ক্লাসগুলো  TestBase ক্লাস প্রসারিত করতে পরিবরতন করতে হবে:

+ +
import unittest
+from marionette import Wait
+from marionette import By
+from test_base import TestBase
+
+class TestContacts(TestBase):
+
+    def test(self):
+        # Tests in here
+
+if __name__ == '__main__':
+    unittest.main()
+ +

পুনরায় আপনার টেস্ট ফাইল চালানোর চেষ্টা করুন।

+ +

এটা এখন অনেক বেশি বোঝা না যেতে পারে কিন্তু যখন আপনার কয়েক ডজন অথবা শতাধিক টেস্ট থাকবে  এটি আসলেই অনেক কোড ডুপ্লিকেট হওয়ার সমস্যা যাতে না হয় সাহায্য করবে।

diff --git a/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_9_app_objects/index.html b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_9_app_objects/index.html new file mode 100644 index 0000000000..1a738f5ff7 --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/gaia-ui-tests/part_9_app_objects/index.html @@ -0,0 +1,58 @@ +--- +title: 'অংশ ৯: অ্যাপ্লিকেশন বস্তুর প্রতিলিপিকরণ কমাতে' +slug: Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_9_app_objects +translation_of: Archive/B2G_OS/Automated_testing/gaia-ui-tests/Part_9_app_objects +--- +

{{Previous("Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_8_Using_a_base_class")}}

+
+

স্বয়ংক্রিয় পরীক্ষায় অ্যাবস্ট্রাক্ট কোডে আমরা app বস্তুগুলো ঘন ঘন ব্যবহার করে থাকি। ইহা কোড এবং স্থান নির্ণয়কারীর প্রতিলিপি করা কমায়। যদি আমাদের কোন সাধারণ বিভাগের কোড পরিবর্তন প্রয়োজন হয় তাহলে আমরা তা শুধুমাত্র একটি app বস্তু পরিবর্তন করতে পারবো, ১০ অথবা ২০টি পরীক্ষণীয় ফাইলের পরিবর্তন না করে। এই রচনাটি কিভাবে app বস্তু ব্যবহার করতে হয় তার মৌলিক তথ্য জানায়।

+
+

অ্যাপ্লিকেশন বস্তু: শুরু হচ্ছে

+

app বস্তু হল একটি পাইথন ক্লাস যাতে পৃষ্ঠার উপর কার্যক্রম ঘটানোর নিয়ম এবং বৈশিষ্ট্যগুলো বিদ্যমান থাকে।  চলুন একটি তাত্বিক উদাহরণের মাধ্যমে দেখা যাক কিভাবে এগুলো ব্যবহৃত হয়ে থাকে।

+

homepage.py

+

এখানে একটি ফ্রেম রয়েছে সুডো-কোড সহ যা আমরা হোমপেজ অ্যাপ্লিকেশনের জন্য ব্যবহার করি।

+
class Homepage:
+        __init__(self, marionette):
+                # Marionette is passed in so that the object can use it
+                self.marionette = marionette
+
+        def switch_to_homepage_frame(self):
+                # Code for switching to System then to Homepage frame
+
+        def tap_contacts_icon(self):
+                # Code to tap the icon
+                # Switch to Contacts frame
+                # Now we return the Contacts app object as it has focus
+                from contacts import Contacts
+                return Contacts(self.marionette)
+

contacts.py

+

এবং এটা আমরা কন্টাক্ট অ্যাপ্লিকেশনের জন্য ব্যবহার করে থাকি, আবারও কিছু সুডো-কোড সহ দেয়া হল।

+
class Contacts:
+        _new_contact_button = (By.ID, ‘id’)
+
+        def tap_new_contact(self):
+                # Tap new contact icon
+                # Wait for event
+
+        def type_given_name(self, name_string):
+                # element.send_keys(name_string)
+

test_contacts.py

+

কিভাবে একটি পরীক্ষণীয় প্রসঙ্গ কাজ করে তা বুঝতে, এখানে একটি দ্রুত উদাহরণ রয়েছে যাতে Homepage শ্রেণীর ব্যবহার রয়েছে:

+
from homepage import Homepage
+
+def test_add_contact(self):
+        homepage = Homepage(self.marionette)
+        homepage.switch_to_homepage_frame()
+
+contacts = homepage.tap_contacts_icon()
+contacts.tap_new_contact()
+

আপনার পরীক্ষণগুলো হালনাগাদ হচ্ছে

+

এখান থেকে আমরা আপনাকে নতুন অ্যাপ্লিকেশন বস্তুর সিস্টেম ব্যবহার করতে আপনার সকল পরীক্ষণীয় ফাইলগুলো হালনাগাদ করতে চ্যালেন্জ প্রদান করতে চাই।

+

ইহা একটি কঠিন কাজ এবং আপনি যদি পাইথন শ্রেণী কাঠামোর সাথে পরিচিত না হন তাহলে আপনাকে সূত্র এবং কোডের উদাহরণের জন্য কিছু বইয়ের পরামর্শ দরকার।

+

যখন আপনি আদর্শভাবে শেষ করবেন তখন আপনার পরীক্ষণীয় ফাইলের মধ্যে একটি পরিস্কার বিচ্ছিন্নতা থাকবে:

+
    +
  1. TestBase এ setUp() এবং tearDown() নীতিগুলো বিদ্যমান থাকে
    2. +
  2. app বস্তুগুলো পৃষ্ঠার পারস্পরিক ক্রিয়া এবং স্থান নির্ণয়কারী ধারণ করে
    3. +
  3. আপনার পরীক্ষণীয় ফাইলগুলো শুধু পরীক্ষণীয় ধাপগুলো ধারণ করে।
    4. +
+

আপনার মঙ্গল কামনা করছি!

diff --git a/files/bn/archive/b2g_os/automated_testing/index.html b/files/bn/archive/b2g_os/automated_testing/index.html new file mode 100644 index 0000000000..5ac7d6096d --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/index.html @@ -0,0 +1,104 @@ +--- +title: ফায়ারফক্স OS এর স্বয়ংক্রিয় পরীক্ষা +slug: Archive/B2G_OS/Automated_testing +tags: + - Automated testing + - B2G + - QA + - Testing + - টেস্টিং + - পরীক্ষা +translation_of: Archive/B2G_OS/Automated_testing +--- +
+

ফায়ারফক্স OS এখনও উন্নয়নাধীন,এবং নতুন হার্ডওয়্যারের জন্য সমর্থন খুব দ্রুত-ই দেওয়া হবে। কিভাবে এটি পরীক্ষা করতে হয় তা জানা গুরুত্বপূর্ণ।এই পৃষ্ঠাটি কিছু নিবন্ধ প্রস্তাব করে যা চলমান বিভিন্ন পরীক্ষা, অটোমেশন, এবং ফলাফল রিপোর্ট এবং ট্র্যাকিং সহ ফায়ারফক্স OS বিভিন্ন দিক সম্পর্কে তথ্য প্রদান করে। 

+
+ +

শুরু করুন!

+ +

ফায়ারফক্স OS এর পরীক্ষা চালানো :  ডেভেলপারদের জন্য একটি  নির্দেশিকা

+ +
+
পরীক্ষা চালানো শুরু করার ওপর একটি ছোট, এবং ডেভেলপারদের-জন্য-লিখা গাইড। আপনি মজিলা এর টেস্ট এবং স্বয়ংক্রিয়তা সিস্টেম চালানো অভিজ্ঞ না হলে আপনার এখান থেকে শুরু করা উচিত। আপনি যদি অভিজ্ঞ হন, তাহলে সম্ভবত আপনার একটি ধারণা আছে যে আপনি কি টেস্ট, কিভাবে পরিচালনা করতে চান, এবং আপনি নীচের আরো নির্দিষ্ট,  বিস্তারিত গাইড এড়িয়ে যেতে পারেন।
+
+ +

গায়া পরীক্ষাসমূহ

+ +

এই নিবন্ধগুলোতে গায়া টেস্ট কওয়ার  প্রাথমিক পদ্ধতিগুলো বর্ণনা করেছে।

+ +
+
গায়া UI পরীক্ষা
+
গায়া UI এর পারস্পরিক ক্রিয়া (ইন্টারেকশন) এবং ফিচারগুলো পাইথনে টেস্ট করুন।
+
গায়া ইন্টিগ্রেশন পরীক্ষা
+
গায়ার জাভাস্ক্রিপ্ট-ইন্টিগ্রেশন টেস্ট করা, Marionette এর উপর ভিত্তি করে।
+
গায়া ইউনিট-টেস্ট
+
গায়া ইউনিট টেস্ট কোন UI ইন্টারঅ্যাকশন ছাড়া ; জাভাস্ক্রিপ্ট এ লেখা, Marionette ভিত্তিক নয়।
+
গায়া কার্যকারিতা (পার্ফর্মেন্স) পরীক্ষা
+
অভ্যন্তরীণ যন্ত্রানুষঙ্গের উপর ভিত্তি করে গায়া অ্যাপ্লিকেশনের কর্মক্ষমতা পরিমাপ করে। in-tree হচ্ছে এর টেস্টিং পদ্ধতি (হারনেস)।
+
+ +

B2G পরীক্ষাসমূহ

+ +

নিচের নির্দেশনাগুলো B2G এর বিভিন্ন কার্যকারিতা পরীক্ষা করার বিভিন্ন পদ্ধতি নিয়ে আলোচনা করে।

+ +
+
Mochitests
+
Gecko এর ফাংশনাল বা কার্যকারিতা এবং এপিআই পরীক্ষা  - HTML & JS ভিত্তিক।  কোন গায়া ইন্টারেকশন নেই।
+
Reftests
+
Gecko রেন্ডার ঠিকমত হচ্ছে কিনা তার পরীক্ষা।
+
WebAPI টেস্ট
+
Gecko JS-ভিত্তিক WebAPI পরীক্ষা। এগুলোর অনেকগুলোই এমুলেটরে করতে হয়।
+
xpcshell টেস্ট
+
Gecko XPCOM APIs এর হেডলেস পরীক্ষা।
+
B2GPerf
+
অভ্যন্তরীণ যন্ত্রানুষঙ্গের উপর ভিত্তি করে গায়া অ্যাপ্লিকেশন এর কর্মক্ষমতা পরিমাপ করে ।
+
Eideticker
+
ধারনকৃত ভিডিও এর উপর ভিত্তি করে ফায়ারফক্স ওএস এর জন্য কর্মক্ষমতা পরিমাপ করে।
+
Endurance tests
+
দীর্ঘ সময় ধরে এবং পুনঃপুনঃ চলতে পারে (repetitive) এমন পরীক্ষা যা মেমরি অপচয় এবং স্টেবিলিটি বা স্থায়িত্ব সমস্যা বের করতে ব্যবহৃত হয়।
+
MTBF টেস্ট
+
রিস্টার্ট করে না এমন গায়া-ui-টেস্ট এর ভিত্তি করে বানানো টেস্ট ফ্রেমওয়ার্ক। 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. (বর্তমানে তাইওয়ান এর QA টিম দ্বারা এটি নির্মিত হচ্ছে)
+
মেমরি টেস্ট - শীঘ্রই আসছে
+
মজিলা-সেন্ট্রাল এর কমিট দ্বারা পুনরাবৃত্তিমূলক পরীক্ষা চলে, https://areweslimyet.com/ এ রিপোর্ট করে, মেমরির ব্যবহার করতে সমস্যা খুঁজে বের করার জন্য নির্মিত।
+
+ +
+

সহায়তামূলক ডকুমেন্টেশন

+
+ +

এই বিভাগ সহায়তাকারী প্রযুক্তির কিছু লিঙ্ক প্রদান করে যা মজিলা এর পরীক্ষা সমর্থন করে, যার সম্পর্কে আপনি আরও তথ্য পেতে চাইতে পারেন।

+ +
+
Marionette
+
একটি রিমোট টেস্ট ড্রাইভার, সেলেনিয়াম WebDriver ভিত্তিক।
+
Marionette JavaScript tests
+
একটি node.js ভিত্তিক রানার Marionette এর জন্য।
+
Marionette Python tests
+
 একটি পাইথন রানার Marionette এর জন্য।
+
 
+
খেয়াল করুনঃ যদি আপনি কোন প্রোডাকশন বিল্ডে  Marionette চালাতে চান (গায়া ইন্ট্রিগেশন টেস্ট, গায়া ui টেস্ট ইত্যাদি চালানোর জন্য। ) আপনই Marionette কে এক্সটেনশন হিসেবে ইন্সটল করতে পারেন (বর্তমানে এটি শুধু ১.৩ বিল্ডগুলোর জন্যই প্রযোজ্য তবে আরও সাপোর্ট ভবিষ্যতে যোগ করা হবে।)
+
+ +

ক্রমাগত ইন্টিগ্রেশন এবং ফলাফল রিপোর্টিং

+ +

নিম্নলিখিত নিবন্ধগুলো ধারাবাহিক ইন্টিগ্রেশন সম্পন্ন, ফলাফল রিপোর্ট, সংরক্ষণ এবং এসব ফলাফলের বিশ্লেষণ করতে মজিলা'র পদ্ধতিগুলো নিয়ে আলোচনা করে।

+ +
+
TBPL
+
 TBPL ভিত্তিক টেস্ট এবং বিল্ড বোঝার জন্য।
+
Jenkins
+
জেনকিন্সের মাধ্যমে প্রকৃত ডিভাইসের উপর চালানো হয় যে টেস্ট।
+
Datazilla
+
Datazilla dashboard এ কোন কার্যকারিতা টেস্ট রিপোর্ট করা হচ্ছে তা বোঝে , এবং সেই টেস্টগুলো কি পদক্ষেপ নেয়।
+
Test execution chart
+
একটি চার্ট যা দেখায় কোন টেস্ট পরিচালনা করা হচ্ছে — কোন ডিভাইস নিয়ে এবং কোথায় — এবং কোন প্ল্যাটফর্ম প্রতিটি পরীক্ষার জন্য সমর্থিত।
+
+ +

ইউনিট টেস্টিং ফ্রেমওয়ার্কের ভিডিও

+ +
+ +
+
 
+
 
+
diff --git a/files/bn/archive/b2g_os/automated_testing/marionette_for_interactive_python/index.html b/files/bn/archive/b2g_os/automated_testing/marionette_for_interactive_python/index.html new file mode 100644 index 0000000000..b3082b1bf1 --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/marionette_for_interactive_python/index.html @@ -0,0 +1,78 @@ +--- +title: ইন্টারেক্টিভ পাইথন এর জন্য Marionette +slug: Archive/B2G_OS/Automated_testing/Marionette_for_interactive_Python +tags: + - গাইড + - ফায়ারফক্স ওএস +translation_of: Archive/B2G_OS/Automated_testing/Marionette_for_interactive_Python +--- +

এই টিউটোরিয়ালটি অনুমান করে আপনি set up Marionette for B2G সেট আপ করেছেন।

+ +

একটি টার্মিনাল খুলুন এবং ইন্টারেক্টিভ প্রম্পট পেতে পাইথন চালু করুন:

+ +

$ python

+ +

ইন্টারেক্টিভ প্রম্পট থেকে, ইন্টারেক্টিভ পদ্ধতিতে একটি Marionette সেশন ডাকার জন্য প্রয়োজনীয় কমান্ড পরিচালনা করুন:

+ +

>>> from marionette import Marionette
+ >>> marionette = Marionette('localhost', 2828)
+ >>> marionette.start_session()
+  u'session-b2g'

+ +

এখানে, আমরা দেখি যে সিস্টেমে একটি Marionette সেশন চলছে।

+ +

+ +

কমান্ড "marionette.execute_script()" জাভাস্ক্রিপ্ট কমান্ড এম্বেড করতে পারে, যা তারপর B2G এর Gecko প্ল্যাটফর্মে চালানো সম্ভব। এটি ব্যবহার করে, আপনি কোন DOM এলিমেন্ট এইচটিএমএল এলিমেন্ট অবজেক্ট এবং উপলব্ধ বৈশিষ্ট্য ও পদ্ধতি রিটার্ন করে দেখতে পারেন:

+ +

>>> marionette.execute_script("return navigator.battery;")
+ {u'onlevelchange': None, u'level': 0.91, u'dischargingTime': None, u'onchargingchange': None, u'ondischargingtimechange': None, u'onchargingtimechange': None, u'chargingTime': None, u'charging': True}
+ >>> marionette.execute_script("return navigator.battery.level;")
+ 0.91
+ >>> marionette.execute_script("return navigator.geolocation;")
+ {}
+ >>> marionette.execute_script("return navigator.mozSms;")
+ {u'onreceived': None, u'ondelivered': None, u'onsent': None}

+ +

+ +

আপনি এই টেকনিক ব্যবহার করে DOM ট্রি ট্রাভার্স করতে পারেন কোন অবজেক্ট,পদ্ধতি, এবং গুণাবলী পাওয়া যায় তা মূল্যায়নের জন্য।

+ +

ইন্টারেক্টিভ পদ্ধতিতে বেসিক টেলিফোনি টেস্টিং

+ +

আপনি marionette এর সঙ্গে ইন্টারেক্টিভ পদ্ধতিতে মৌলিক টেলিফোনি পরীক্ষা করতে পারবেন। নিম্নলিখিত উদাহরণে দুটি সচল ফোনের প্রয়োজন, প্রতিটির সিমকার্ডসহ।একটি আপনার Galaxy SII, যেটিতে B2G চলমান।

+ +

একটি ইন্টারেক্টিভ Marionette সেশন শুরু করুন এবং পোর্ট ফরওয়ার্ড করুন:

+ +

$ adb forward tcp:2828 tcp:2828
+ $ python
+ >>> from marionette import Marionette
+ >>> marionette = Marionette('localhost', 2828)
+ >>> marionette.start_session()
+ u'5-b2g

+ +

এখন, আপনার marionette এর সাথে দুটি সম্ভাব্য উপায় আছে।  একটি একটু বেশি পাইথনিক:

+ +

>>> marionette.set_context("chrome")
+ True
+ >>> marionette.execute_script("return navigator.mozTelephony;")
+ >>> num =
+ >>> marionette.execute_script("return navigator.mozTelephony.dial('%d');" % num)

+ +

অন্যথায়, এই পদ্ধতি, যা JS এর উপর বেশি নির্ভর করে ( marionette.execute_script() মধ্যে এমবেডেড) JS নাম্বার ভেরিয়েবলের চারপাশে উদ্ধৃতি চিহ্ন লক্ষ্য করুন:

+ +

>>> marionette.set_context("chrome")
+ True
+ >>> marionette.execute_script("""
+ ... var num = ""
+ ... return navigator.mozTelephony.dial(num);
+ ... """)
+ {}

+ +

আমরা প্রথম পদ্ধতি চেষ্টা করব:

+ +

+ +

এটি একটি ফোন কল চালু করে, যার আউটপুট $adb logcat এ মনিটর করা যাবে।

+ +

diff --git a/files/bn/archive/b2g_os/automated_testing/reftests/index.html b/files/bn/archive/b2g_os/automated_testing/reftests/index.html new file mode 100644 index 0000000000..63eddc3d0d --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/reftests/index.html @@ -0,0 +1,99 @@ +--- +title: Firefox OS reftests +slug: Archive/B2G_OS/Automated_testing/Reftests +translation_of: Archive/B2G_OS/Automated_testing/Reftests +--- +
+
 Reference tests (or reftests) are basically tests that compare two separate renderings of web app UI features (HTML elements, for example) to see if they are the same, or not. This article provides you with all ুই্জকগাইইআlves, read Creating reftest-based unit tests.
+
+

Prerequisites for running reftests

+

You can run reftests on B2G. These are mainly tested on the emulator, but should in theory run on devices as well. In this article $B2G_HOME refers to the cloned B2G repository. Below are the things you need to build or set up before you can try running B2G reftests.

+

Build B2G for the target you're testing

+

Regular B2G build instructions apply — no need for any special build options.

+

The B2G config that you will be using (what you pass to ./config.sh) will probably be emulator as that is what reftests are typically run on. Before building B2G for the emulator config, pay special attention to the Emulator build issues section in the Firefox OS build prerequisites page.

+

As usual, make sure adb is in your path and that it successfully connects to your running emulator or device. Try adb devices to make sure it is working ok.

+

Running reftests

+

Having satisfied the above prerequisites, you can then run reftests using one of the following sets of terminal commands.

+

For the emulator

+

Use mach:

+
cd $B2G_HOME
+​./mach reftest-remote
+

This will run all reftests. If you want to run a specific reftest, do the following:

+
cd $B2G_HOME
+./mach reftest-remote relative/path/from/B2G/to/reftest.list
+

For a real device

+

Running reftests on a device is not officially supported yet. One problem is that most devices don't support the minimum required resolution (800x1000) for many of the tests. But if you want to try anyway, you should be able to do so using the following steps:

+
cd $B2G_HOME/objdir-gecko
+make package-tests
+source _virtualenv/bin/activate
+cd dist/test-package-stage/reftest
+python runreftestb2g.py --b2gpath $B2G_HOME --xre-path /path/to/dir/containing/desktop/xpcshell --ignore-window-size relative/path/from/B2G/objdir-gecko/to/reftest.list
+

Running crashtests

+

To run crashtests, do the following:

+
cd $B2G_HOME
+​./mach crashtest-remote
+

This will run all crashtests. If you want to run a specific crashtest, do the following:

+
cd $B2G_HOME
+./mach reftest-remote relative/path/from/B2G/to/crashtests.list
+

Running jsreftests

+

JSReftests are not officially supported yet. See bug 972870 for progress updates on adding jsreftests to mach.

+

Running reftest with non-default options

+

You can optionally add --total-chunks and --this-chunks arguments as you would with regular desktop reftests. Use:

+
mach help reftest-remote
+

for a full list of supported arguments.

+

Running reftest with a downloaded emulator

+

If you've built B2G for another config (like otoro) and want to run the tests on an emulator, you can do so without building an emulator yourself. Just download the latest trunk arm emulator and do the following:

+
pip install marionette-client
+python runreftestb2g.py --emulator arm --b2gpath path/to/emulator --xre-path /path/to/dir/containing/desktop/xpcshell --ignore-window-size --emulator-res 800x1000 <path_to_reftest_manifest>
+

Running reftest with a downloaded emulator and downloaded tests.zip package

+

If you want to run reftests against a downloaded emulator and a downloaded tests.zip package, you should extract them both.

+

Then run the following commands:

+
cd $TESTS_ZIP_DIR/mozbase
+python setup_development.py
+cd $TESTS_ZIP_DIR/marionette
+python setup.py develop
+cd $TESTS_ZIP_DIR/reftest
+python runreftestb2g.py --emulator arm --b2gpath $EMULATOR_DIR --xre-path /path/to/dir/containing/desktop/xpcshell --ignore-window-size --emulator-res 800x1000 <path_to_reftest_manifest>
+
+

Note: For best results, you should perform the above steps using a Python virtualenv.

+
+

Troubleshooting

+

The following sections provide some answers to common problems encountered when trying to use reftests.

+

I can't build the emulator!

+

If you have trouble building B2G in the emulator config, check out the Emulator build issues section in the Firefox OS build prerequisites page.

+

Check that your B2G build/emulator works and that ADB can connect to it

+

First check that your B2G build runs normally. If this is an emulator build, then ./run-emulator.sh should work: it should start up the emulator and boot B2G inside it. If it doesn't, get the log from adb logcat and ask for help. If ADB fails to connect to the running emulator, make sure that you have no other (Android or B2G) devices connected, and try passing in the -e option to tell adb to focus on the emulator:

+
adb logcat -e
+

Once you have verified that your B2G build/emulator works normally and that ADB can connect to it, the next step is to verify that your xpcshell desktop executable runs normally. If you built B2G for a real device and ADB can't connect to it, check out Connecting a Firefox OS device to the desktop.

+
+

Note: None of the errors below should occur if you are using mach. If you have problems with mach, please file a bug under Testing/Reftest and CC :ahal

+
+

Check that you can run your desktop xpcshell executable

+

The python runreftestb2g.py command line above will try to run xpcshell on your desktop with the path specified by the --xre-path argument. Check that running xpcshell from the current directory with this relative path actually works.

+

For example, suppose that your command line contains:

+
--xre-path /hack/mozilla-central/objdir/dist/bin
+

Try running this from the same directory as you want to run python runreftestb2g.py from:

+
$ /hack/mozilla-central/objdir/dist/bin/xpcshell
+

This should land you in a special-looking shell like this:

+
js>
+

If this fails with an error message complaining about being unable to find or load certain shared libraries, like this

+
/hack/mozilla-central/objdir/dist/bin/xpcshell: error while loading shared libraries: libxul.so: cannot open shared object file: No such file or directory
+

then you need to set the right environment variable so that it looks for these libraries in the same directory. On Linux, you would set LD_LIBRARY_PATH to the same directory as you want to pass as --xre-path. For example, this should work:

+
LD_LIBRARY_PATH=/hack/mozilla-central/objdir/dist/bin /hack/mozilla-central/objdir/dist/bin/xpcshell
+

On Mac OSX, the environment variable to set is DYLD_LIBRARY_PATH.

+

Check that reftest can find httpd.js

+

If reftest still fails to run — returning early with an error — the next most likely cause of trouble is it failing to find certain files that it needs to load. The first file that it could fail to find is httpd.js. Typically, the reason why it would not find it is that you accidentally built xpcshell with --disable-tests. So, make sure that the path you pass to --xre-path does contain a httpd.js file under the components subdirectory.

+

This is good:

+
$ find /hack/mozilla-central/objdir/dist/bin/ -name httpd.js
+/hack/mozilla-central/objdir/dist/bin/components/httpd.js
+/hack/mozilla-central/objdir/dist/bin/modules/commonjs/sdk/test/httpd.js
+

This is bad (was caused by --disable-tests):

+
$ find /hack/mozilla-central/objdir/dist/bin/ -name httpd.js
+/hack/mozilla-central/objdir/dist/bin/modules/commonjs/sdk/test/httpd.js
+

Check that you didn't forget to make package-tests

+

Forgetting the make package-tests step described above would certainly explain why nothing works.

+

Check that you passed a correct relative path to the reftest.list

+

The final argumant in the command line running reftest is the relative/path/from/B2G/objdir-gecko/to/reftest.list. This must be a relative path from the B2G/objdir-gecko directory to a reftest.list file under it. So check that a reftest.list file is actually present there! If it isn't, compare your command line to the sample command line below, and/or check that you didn't forget to make package-tests as explained above.

+

Sample command line:

+
$ LD_LIBRARY_PATH=/hack/mozilla-central/objdir/dist/bin python runreftestb2g.py --b2gpath /hack/b2g/B2G/ --xre-path /hack/mozilla-central/objdir/dist/bin  --ignore-window-size --emulator arm --emulator-res 800x1000 tests/layout/reftests/css-gradients/reftest.list
+

Here, we are running only the css-gradients directory of reftests.

diff --git a/files/bn/archive/b2g_os/automated_testing/setting_up_marionette/index.html b/files/bn/archive/b2g_os/automated_testing/setting_up_marionette/index.html new file mode 100644 index 0000000000..4d678a3cd9 --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/setting_up_marionette/index.html @@ -0,0 +1,49 @@ +--- +title: ফায়ারফক্স ওএস এর জন্য Marionette সেট আপ +slug: Archive/B2G_OS/Automated_testing/Setting_up_Marionette +tags: + - Guide + - গাইড + - ফায়ারফক্স ওএস +translation_of: 'https://marionette-client.readthedocs.io/en/latest/' +--- +

Marionette ক্লায়েন্ট সেট আপ

+ +

The Marionette ক্লায়েন্ট একটি পাইথন প্যাকেজ যা দিয়ে আপনি Marionette টেস্ট চালাতে পারেন: পাইথন পরীক্ষা, এবং জাভাস্ক্রিপ্ট WebAPI টেস্ট উভয়ই। আপনি এটা ব্যবহার করার পূর্বে আপনার মেশিনে এই সেট আপ করতে হবে।

+ +

এটা করার জন্য, আপনার একটি Gecko ট্রি ক্লোন করা উচিত; হয় Gecko ট্রি ফায়ারফক্স ওএস এর ভিতরে ক্লোন, অথবা একটি স্ট্যান্ডঅ্যালোন Gecko ক্লোন (e.g., mozilla-central) কাজ করবে। উদাহরণস্বরূপ, মনে করুন প্রথমবারের মত আপনি Gecko ট্রি ক্লোন করছেন:

+ +

প্রথমে Mercurial ইনস্টল করুন, যদি এটা এখনো ইনস্টল না হয়ে থাকে। আপনার যদি Homebrew ইনস্টল করা থাকে, তাহলে আপনি ম্যাকে এভাবে করতে পারেন।অন্যান্য প্যাকেজ ম্যানেজার পৃথক হবে:

+ +

$ brew install mercurial

+ +

আপনার কাজের ডিরেক্টরি পরিবর্তন করুন (e.g. ~/code) এবং ক্লোনিং প্রক্রিয়া শুরু করতে এটি লিখুন:

+ +

$ hg clone http://hg.mozilla.org/mozilla-central/ $GECKO_DIR

+ +

... যেখানে $GECKO_DIR কোনো সঠিক ডিরেক্টরি নাম হতে পারে, e.g. mozilla-central. যা কিছু সময় নিতে পারে (প্রায় ১০ মিনিট এর মধ্যে একটি দ্রুত সংযোগ সহ).

+ +

একটি ফায়ারফক্স ওএস বিল্ড এনভায়রনমেন্ট সেট আপ কিভাবে করা যায় বিস্তারিত জানতে Building and installing Firefox OS দেখুন এবং কোডটি লিখুন।

+ +
$ cd $GECKO_DIR/testing/marionette/client
+
+$ python setup.py develop
+ +

আপনার একটি  virtualenv ব্যবহার করা আবশ্যক। দ্রুত virtualenv সেটআপ:

+ +

$ pip install virtualenv

+ +

$ virtualenv $MARIONETTE_ENV

+ +

আবার, $MARIONETTE_ENV কোনো সঠিক ডিরেক্টরি নাম হতে পারে। এখন আপনার উপরোক্ত ধাপগুলি চালাতে সক্ষম হওয়া উচিত কিন্তু নতুন ভার্চুয়াল পরিবেশে:

+ +
$ cd $GECKO_DIR/testing/marionette/client
+
+$ $MARIONETTE_ENV/bin/python setup.py develop
+ +

Marionette ইনস্টল করা হয়েছে কিনা যাচাই করতে:

+ +
$ $MARIONETTE_ENV/bin/python
+>>> from marionette import Marionette
+ +

Marionette সেট আপ করার পরে টেস্ট চালানোর সম্পর্কে আরো তথ্য জানতে  Running Marionette tests দেখুন। 

diff --git a/files/bn/archive/b2g_os/automated_testing/writing_gaia_unit_tests/index.html b/files/bn/archive/b2g_os/automated_testing/writing_gaia_unit_tests/index.html new file mode 100644 index 0000000000..a6f6d3a251 --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/writing_gaia_unit_tests/index.html @@ -0,0 +1,106 @@ +--- +title: Writing Gaia Unit Tests +slug: Archive/B2G_OS/Automated_testing/Writing_Gaia_Unit_Tests +tags: + - Firefox OS + - Gaia + - Guide + - NeedsReview + - Testing + - unit tests +translation_of: Archive/B2G_OS/Automated_testing/Writing_Gaia_Unit_Tests +--- +

লেখার ইউনিট পরীক্ষা

+

ইউনিট পরীক্ষার   চলমানকারী  mocha ব্যবহার করে  TDD interface । মোচা   মালিকানা অধিকারের দাবি করে না (কোনো   ok orঅথবা assert_equals নেই),সুতরাং আমরা  chai  ব্যবহার করি অধিকার দেয়ার জন্য।

+

 এটি বিশেষ ভাবে সুপারিশ করা হয়েছে যে আপনি   mocha  সাইটের মাধ্যমে পড়ুন , যেহেতু সকল পরীক্ষা সত্যিকারভাবে  মোচা পরীক্ষা ।আপনাকে শুরু করানোর জন্য  এখানে দলিল কে কেন্দ্রবিন্দুতে রাখা  হয়েছে,এবং  আমাদের বিশেষ সম্পুর্ণতা টেষ্ট এজেন্ট এবং গা য়া তে।

+

 এটা আরো  নোট করা গুরুত্বপূর্ণ যে আমরা বিশেষ ফাংশন যোগ করি  ( যেমন require() এবং requireApp()) লেখার পরীক্ষাকে সহজতর বানাতে।সকল পরীক্ষা সাহায্যকারী স্ক্রীপ্ট গুলো   /common/test তে সরাসরি পাওয়া যেতে পারে।

+

ফাইলের নাম করণ

+

পরীক্ষা গুলো সাধারণত  একের থেকে  এক। একটি হাতিয়ার  সরাসরি js/   তে থাকে,এবং একটি পরীক্ষা  সরাসরি test/   তে থাকে।

+

উদাহরণ

+ + + + + + + + + + + + + + + +
হাতিয়ারপরীক্ষা
apps/app/js/file.jsapps/app/test/unit/file_test.js
apps/app/js/nested/thing/file.jsapps/app/test/unit/nested/thing/file_test.js
+

হাতিয়ারের উদাহরণ (gist):

+
//apps/example/js/example.js
+var Example = (function(){
+  return {
+    math: function() {
+
+    },
+
+    complexMethod: function() {
+
+    },
+
+    asyncMethod: function(callback) {
+
+    }
+  }
+}());
+
+

পরীক্ষার উদাহরণ (gist):

+
//apps/example/test/unit/example_test.js
+requireApp('example/js/example.js');
+
+
+//suite/setup/test/done are standard mocha functionality.
+
+suite('Example', function() {
+  var subject;
+
+  //will be called before each "test" block.
+  setup(function() {
+    subject = Example();
+  });
+
+  //for a simple method
+  test('#math', function() {
+    var result = subject.math('1', '+', '1');
+    //assert functionality is provided by chai
+    assert.equal(result, 2, 'addition should work');
+  });
+
+  //there is full support for async tests using done
+  //when you set an argument to your test function it is
+  //assumed that the given test is async and will only
+  //complete once done is called.
+  test('#asyncMethod', function(done) {
+    subject.asyncMethod(function(err, value) {
+      done(function() {
+        assert.ok(value, 'sending message failed');
+      });
+    });
+  });
+
+  //when you have a method that will
+  //require complex setup/teardown logic
+  suite('#complexMethod', function() {
+    var result;
+    setup(function() {
+      //complex setup stuff
+      result = subject.complexMethod();
+    });
+
+    test('stuff works', function() {
+      assert.typeOf(result, 'string');
+      //it is good practice to add the third argument which is
+      //a description of why a test failed.
+      assert.equal(result, 'real value', 'should output real value');
+    });
+  });
+
+});
+
diff --git a/files/bn/archive/b2g_os/automated_testing/xpcshell/index.html b/files/bn/archive/b2g_os/automated_testing/xpcshell/index.html new file mode 100644 index 0000000000..65f64b2d4c --- /dev/null +++ b/files/bn/archive/b2g_os/automated_testing/xpcshell/index.html @@ -0,0 +1,55 @@ +--- +title: XPCShell +slug: Archive/B2G_OS/Automated_testing/XPCShell +tags: + - B2G + - Firefox OS + - Gaia + - Guide + - XPCOM + - XPCShell + - automated + - tests +translation_of: Archive/B2G_OS/Automated_testing/XPCShell +--- +
+

XPCShell tests are headless tests of Gecko XPCOM APIs. You can run XPCShell tests on B2G; in this article we will look at how to do so. Currently, these are mainly tested on the emulator, but should in theory run on devices as well.

+
+
+

নোটঃএই অনুচ্ছেদে  $B2G_HOME সুপারিশ করে থাকে  B2G রেস্পেরোটরি ক্লোন করে থাকে ।

+
+

Prerequisites

+ +

Running the tests

+

You can then run xpcshell tests using one of the following sets of terminal commands:

+

If you are using an emulator:

+
cd $B2G_HOME/objdir-gecko
+make package-tests
+cd dist/test-stage/xpcshell
+python runtestsb2g.py --b2gpath $B2G_HOME --adbpath $ADB_PATH --emulator arm --use-device-libs --manifest <path_to_xpcshell_manifest> --testing-modules-dir <path_to_testing_modules_dir> --busybox <path_to_busybox_binary>
+

If you are using a real device:

+
cd $B2G_HOME/objdir-gecko
+make package-tests
+cd dist/test-stage/xpcshell
+python runtestsb2g.py --b2gpath $B2G_HOME --adbpath $ADB_PATH --use-device-libs --manifest <path_to_xpcshell_manifest> --testing-modules-dir <path_to_testing_modules_dir>
+

You can optionally add --total-chunks and --this-chunks arguments as you would with regular desktop xpcshell tests. Use:

+
python runtestsb2g.py --help
+

for a full list of supported arguments.

+

Important: The manifest path you supply must be under the dist/test-stage/xpcshell directory. Don't use a path to the original source location of the manifest in the tree.

+

After you invoke runtestsb2g.py, the test runner will launch the emulator for you (if you're running the tests on an emulator) or reboot your device (if you're running the tests on a device), and start running the tests. Because the emulator is slow, and it is necessary to push a test profile to the emulator and restart B2G, the tests can take a few minutes to start. Before they start, you will just see a black or white screen. After they start, you should see the test log being dumped to the console.

+

When the tests are done, the emulator is shut down for you, or if you're using a device, the device is rebooted.

+

Installing busybox manually

+

When running xpcshell tests on devices there is no --busybox option, so setting up the test run can take a very long time. Fortunately you can still install it manually prior to running the tests. For an example of how to do this see https://github.com/mozilla/Negatus/blob/master/setup-tools.sh.

+

Running xpcshell tests with a downloaded emulator

+

If you've built B2G for another config (like otoro) and want to run the tests on an emulator, you can do so without building an emulator yourself.  Just download the latest trunk arm emulator, and use the same instructions as above, replacing the --b2gpath $B2G_HOME argument for runreftestb2g.py with --b2gpath /path/to/unpacked/emulator.

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

 

+

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

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/bn/archive/b2g_os/building_and_installing_firefox_os/building_firefox_os_for_flame_on_osx/index.html b/files/bn/archive/b2g_os/building_and_installing_firefox_os/building_firefox_os_for_flame_on_osx/index.html new file mode 100644 index 0000000000..3a93665d8a --- /dev/null +++ b/files/bn/archive/b2g_os/building_and_installing_firefox_os/building_firefox_os_for_flame_on_osx/index.html @@ -0,0 +1,140 @@ +--- +title: Building Firefox OS for flame on OSX +slug: >- + Archive/B2G_OS/Building_and_installing_Firefox_OS/Building_Firefox_OS_for_flame_on_OSX +tags: + - B2G + - Build documentation + - Firefox OS + - Flame + - Guide + - Mac + - OSX +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X +--- +
+ ইন্সটল করুন আগের দরকারি Requirements_for_OS_X এর গঠন।
+
+  
+
+ বিনুটিলস ইন্সটল করুন,ডিবাগ গঠনের মধ্যে objdump এর জন্য।
+
brew install binutils
+
+ একটি ডিস্ক ইমেগ তৈরি করুন Case-sensitive Journaled HFS+ফাইল সিস্টেমের সাথে এবং নিচের কমান্ড অনুসারে ব্যবহার গঠন দেখুন।
+
+  
+
+ 
hdiutil create -volname 'firefoxos' -type SPARSE -fs 'Case-sensitive Journaled HFS+' -size 40g ~/firefoxos.sparseimage
+open ~/firefoxos.sparseimage
+cd /Volumes/firefoxos/
+
+
+

B2G রেপোসিটোরি ক্লোন করুন

+

প্রথম ধাপ হল,আগে আপনি আপনার প্রথম গঠন শুরু করুন,B2G রেপোসিটোরি ক্লোন করতে ।ইহা সবকিছু সম্মুখীন হবেনা।এর পরিবর্তে ,ইহা B2G গঠন সিস্টেম এবং সেট আপ ইউটিলিটি সম্মুখীন করে থাকবেন।বেশির ভাগ আসল B2G কোড প্রধান মোজিলা Mercurial রেপোসিটরিতে ।

+

রেপোসিটরি ক্লোনে git ব্যবহার করুন:

+ 
git clone git://github.com/mozilla-b2g/B2G.git
+

ক্লোনিং করার পরে (যা কেবল একটি মিনিট নিয়ে থাকে একটি দ্রুত সংযোগের জন্য),cd হল B2G ডিরেক্টরিতেঃ

+ 
cd B2G
+
+

B2G কনফিগারিং করা ফ্লেমের জন্য

+

একদা আপনি কোর B2G গঠন সিস্টেম উদ্ধার করেছেন,আপনাকে এটি কনফিগার করা উচিত ডিভাইসের জন্য যতে আপনি ইন্সটল করারা প্ল্যান করেছেন ।কিছু সাপোর্টেড ডিভাইসের একটি লিস্ট পাওয়ার জন্য,আপনি config.sh ইউটিলিটি ব্যবহার করতে পারেন—B2G ডিরেক্টরির মধ্যে থেকে পরবর্তী কমান্ড করুনঃ

+
./config.sh flame
+
+ গুরুত্বপুর্নঃডাউনলোড ~১৫জিবি কোড সোর্সেস-প্রয়োজন ভাল ইন্টারনেট স্পিড।
+
+

B2G গঠন কনফিগারিং করুন একটি মোবাইল ডিভাইসের জন্য

+

সেই ক্ষেত্রে At this point, আপনার ডিভাইস সংযুক্ত করুন যদি এটি ইতিমধ্যে সংযুক্ত না থাকে; কনফিগার প্রসেস এর ইহার সুবিধা পাওয়ার প্রয়োজন পড়লে।

+ 
adb devices -l
+>List of devices attached 
+>f04840ed device
+

ডিভাইস সবসময় পাওয়া যাবে এবং সংযুক্ত থাকবেঃ

+ 
mkdir backup-flame
+cd backup-flame
+adb pull /system system
+adb pull /data data
+

OSX এর গঠনের সমস্যার উপরে কাজ করা

+

 OSX 10.9.4 Maveric এর উপরে পরীক্ষা চালানো

+

mkfs.vfat এর বিদ্যমান না থাকা

+

dosfstools-osx এর ছবির সাথে কাজ করার জন্য dosfstools এর পোর্টেড ভার্সন ইন্সটল করার প্রয়োজন ।

+ 
brew create https://github.com/sv99/dosfstools-osx.git
+

Dosfstools ফরমুলা ইডিট করুন

+ 
require "formula"
+
+class Dosfstools < Formula
+  homepage "https://github.com/sv99/dosfstools-osx"
+  url "https://github.com/sv99/dosfstools-osx.git"
+  sha1 ""
+
+  def install
+    system "make", "install"
+  end
+
+end
+
+

এবং ইন্সটল করুন ।

+ 
brew install dosfstools
+

বাগ ১০৩৯২২৩ এবং ১০২৭৬৮২ .userconfig তে কাজ করে

+
+ Bug 1039223 - ফ্লেম তৈরি করুন dt.img মিসিং এর কম্পলেইন করতে বিফল হলে
+
+
+ Bug 1027682 - [Flame][Build] Mac OS X 10.9 গঠন করতে বিফল হলে, elf.h ফাইল পাওয়া যায় না ।
+
+  
+
+ 
# .userconfig for flame build 14.08.2014
+# osx repo change
+# Bug 1039223 - Build for flame fails complaining of missing dt.img
+# https://bugzilla.mozilla.org/show_bug.cgi?id=1039223
+pushd device/qcom/common/dtbtool
+patch -N << EOF
+--- a/dtbtool/dtbtool.c
++++ b/dtbtool/dtbtool.c
+@@ -616,7 +616,7 @@ int main(int argc, char **argv)
+        extract "qcom,msm-id" parameter
+      */
+     while ((dp = readdir(dir)) != NULL) {
+-        if ((dp->d_type == DT_REG)) {
++        if ((dp->d_type == DT_REG||dp->d_type == DT_UNKNOWN)) {
+             flen = strlen(dp->d_name);
+             if ((flen > 4) &&
+                 (strncmp(&dp->d_name[flen-4], ".dtb", 4) == 0)) {
+EOF
+
+popd
+
+# Bug 1027682 - [Flame][Build] Failed to build on Mac OS X 10.9, elf.h file not found
+# https://bugzilla.mozilla.org/show_bug.cgi?id=1027682
+if [[ ! -e /usr/local/include/elf.h ]]; then
+  cp "${B2G_DIR}/external/elfutils/libelf/elf.h" /usr/local/include
+  echo "Bug 1027682: elf.h copied into /usr/local/include"
+fi
+
+# Disable First Time User experience
+export NOFTU=1
+echo "NOFTU = ${NOFTU}"
+
+# Enable gaia developer mode
+export DEVICE_DEBUG=1
+echo "DEVICE_DEBUG = ${DEVICE_DEBUG}"
+
+# Keeping both debug and non-debug objects
+#export GECKO_PATH=${B2G_DIR}/mozilla-inbound
+echo "GECKO_PATH = ${GECKO_PATH}"
+
+export B2G_DEBUG=1
+echo "B2G_DEBUG = ${B2G_DEBUG}"
+
+#export GECKO_OBJDIR=${GECKO_PATH}/objdir-gonk
+if [[ "${B2G_DEBUG}" != "0" ]]; then
+  export GECKO_OBJDIR=${GECKO_OBJDIR}-debug
+fi
+echo "GECKO_OBJDIR = ${GECKO_OBJDIR}"
+

First Build

+ 
./build.sh
+
+  
+
+
+
+

 

diff --git a/files/bn/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_overview/index.html b/files/bn/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_overview/index.html new file mode 100644 index 0000000000..0554aa7142 --- /dev/null +++ b/files/bn/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_overview/index.html @@ -0,0 +1,107 @@ +--- +title: ফায়ারফক্স ওএস বিল্ড প্রক্রিয়ার সংক্ষিপ্ত বিবরণ +slug: Archive/B2G_OS/Building_and_installing_Firefox_OS/Firefox_OS_build_overview +tags: + - ফায়ারফক্স ওএস +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary +--- +
+

ফায়ারফক্স ওএস বিল্ড এবং ইন্সটল করতে প্রচুর সময়, নেটওয়ার্ক ব্যান্ডউইথ এবং উচ্চক্ষমতাসম্পন্ন কম্পিউটারের প্রয়োজন হয়। দুঃখজনক হলেও সত্য যে, কাজ করার সময় কিছু না কিছু ভুল হওয়া স্বাভাবিক। এই পেজে পূর্ণ বিল্ড প্রক্রিয়ার লক্ষ্যসমূহকে নির্ধারণ করা হয়েছে এবং একই সঙ্গে প্রক্রিয়াটির বিভিন্ন ধাপ সম্পর্কে সংক্ষিপ্ত আলোচনা করা হয়েছে।

+
+
+

দ্রষ্টব্য: ফায়ারফক্স ওএস বিল্ড প্রক্রিয়াটিতে 'B2G' বা 'Boot2Gecko' এর নাম বারবার দেখা যাবে। 'Boot2Gecko' হল ফায়ারফক্স ওএস প্রজেক্টের আসল সাংকেতিক নাম।

+
+

বিল্ডের লক্ষ্য: চারটি 'ইমেজ' ফাইল

+

পুরো বিল্ড প্রক্রিয়াটির মূল লক্ষ্য হল চারটি ফাইল বিল্ড করা, যা ফায়ারফক্স ওএস ডিভাইসে স্থানান্তরযোগ্য।

+ + + + + + + + + + + + + + + + + + + +
boot.imgলিনাক্স কার্নেল এবং রুট ফাইল সিস্টেমের ইমেজ, রুট ফাইল সিস্টেমের ইমেজটি কিছু সাধারণ ইউনিক্স টুলস ব্যবহার করতে দেয়।
system.imgফায়ারফক্স ওএস প্রজেক্টের কেন্দ্রীয় অংশ, যাতে গংকের কিছু অংশ, গেকোর পোর্ট এবং b2g এক্সিকিউটেবলটি থাকে।
userdata.imgব্যবহারকারীর গেকো প্রোফাইল এবং ডিভাইসের জন্য গায়া ওয়েব অ্যাপ্লিকেশন।
recovery.imgএকটি লিনাক্স কার্নেল এবং রুট ফাইল সিস্টেম ইমেজ, যার সঙ্গে ইন্সটলজনিত সমস্যা ঠিক করার জন্য একটি সহজ টুল দেওয়া হয়েছে।
+ +

এই চারটি ইমেজ তৈরি হওয়ামাত্র তা ডিভাইসে স্থানান্তর করা যাবে।

+

Firefox OS is built on top of the base Android Open Source Project (AOSP). The AOSP tools adb and fastboot provide powerful ways to access and manipulate a device. Notably, the command adb reboot-bootloader can cause a connected device to reboot and pause at the early bootloader stage where the command fastboot flash $partition $image can be used to copy 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 script. 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 existing boot images 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 /some/path/to/boot.img.

+

The System Image

+

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

+ +
+

See the Firefox 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 User Data Image

+

The User Data Image (userdata.img) provides the Gaia applications loaded at runtime.

+

The User Data Image will be copied to the userdata partition on the device and the contents will be visible in the /data/ directory when the device filesystem is accessed at runtime. Notably the /data/b2g/ directory contains the Mozilla Gecko profile of the device user while the /data/local/webapps/ directory contains the actual web applications available to the user.

+

The Recovery Image

+

The Recovery Image (recovery.img) contains the same kernel and a similar ramdisk as are 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 Firefox 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 applciations 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 Firefox 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 Firefox 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 Firefox 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 Firefox  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/bn/archive/b2g_os/building_and_installing_firefox_os/firefox_os_update_packages/index.html b/files/bn/archive/b2g_os/building_and_installing_firefox_os/firefox_os_update_packages/index.html new file mode 100644 index 0000000000..b1723b4d20 --- /dev/null +++ b/files/bn/archive/b2g_os/building_and_installing_firefox_os/firefox_os_update_packages/index.html @@ -0,0 +1,242 @@ +--- +title: ফায়ারফক্স ওএস এর হালানাগাদ প্যাকেজসমূহ তৈরী এবং প্রয়োগ করা +slug: Archive/B2G_OS/Building_and_installing_Firefox_OS/Firefox_OS_update_packages +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages +--- +
+

যদি আপনি ফায়ারফক্স ওএস এর ব্যবহারকারীদেরকে তাঁদের ডিভাইসে থাকা সংকেতলিপিসমূহ অতি সহজেই হালনাগাদ করতে দিতে চান তো, তাঁদের জন্যে আপনাকে একটি হালনাগাদ প্যাকেজ তৈরী করে দিতে হবে। এই  প্রবন্ধটিতে বিভিন্ন ধরনের হালানাগাদ প্যাকেজের প্রাপ্তি এবং প্যাকেজ তৈরী, হালনাগাদসমূহ হোস্ট করা (এবং যে পদ্ধতিতে প্রাপ্ত হালনাগাদসমূহকে তালিকাভুক্ত করা হয়ে থাকে), এবং সেই হালনাগাদসমূহ প্রয়োগ করা এবং যাচাই করার বিষয়ে আলোচনা করা হয়েছে।

+
+

হালনাগাদসমূহ তৈরী এবং প্রয়োগ করা চার ধাপে বিভক্ত:

+
    +
  1. পুরোন সংস্করন(গুলো) থেকে হালনাগাদকৃত প্যাকেজগুলো নিয়ে নির্মানশালাতে নতুন একটি সংস্করন নির্মান করা
    2. +
  2. ব্যবহারকারীর ডাউনলোডের জন্য উপযুক্ত হালনাগাদ প্যাকেজটি খুঁজে নেয়া
    3. +
  3. হালনাগাদ ডাউনলোড করা
    4. +
  4. যন্ত্রে উপস্থিত নথিগুলোতে হালনাগাদটি প্রয়োগ করা
    5. +
+

এই ধাপগুলোর প্রতিটিই নিম্নে আলোচিত হয়েছে।

+

হালনাগাদের ধরণগুলি

+

দুই ধরনের হালনাগাদ সম্পর্কে জানতে হবে: এফওটিএ (ফার্মওয়্যার ওভার-দ্য-এয়ার) এবং গেকো/গায়া (ওভার-দ্য-এয়ার)। আসুন দেখি এঁদের মধ্যে পার্থক্যগুলো কোনখানে।

+

এফওটিএ হালনাগাদসমূদ

+

আমারা পুরো ফায়ারফক্স ওএস সিস্টেমটাই হালনাগাদ করতে পারি এফওটিএ হালনাগাদসমূহ এর মাধ্যমে, the technology behind which is shared with the Android project. The locations on the phone's hard drive that can be changed using FOTA updates include the system partition, kernel, modem baseband, recovery image used for updating, or any other file on the device.

+

Firefox OS does not depend on a particular FOTA client; the interface is abstracted through an API we call librecovery. However, we recommend using the GOTA recovery client (see below for more details), and the discussion here assumes FOTA is being used.

+

FOTA update packages mainly consist of a file called update.zip. This package consists of

+ +

This format and set of files are the same as those used in normal Android updates, except that Firefox OS additionally wraps the update.zip package in a mar wrapper (MAR stands for Mozilla ARchive). This mar wrapper allows an additional level of verification, which is explained below.

+

Gecko/Gaia OTA updates

+

Alteratively we can update just the Gecko and Gaia files on a Firefox OS device, through a mechanism we call Gecko/Gaia OTA updates. All of the Gecko and Gaia files — comprising the core Gecko runtime and the device's user interface — are in the /system/b2g directory on the device. This is the only directory that OTA updates can make changes to.

+

Gecko/Gaia OTA updates use the same technology that's used to update the Firefox desktop web browser. Much like the FOTA update.zip packages discussed above, OTA updates consist of a MAR file containing a set of binary diffs and new files needed to update the client to a newer software version.

+

The Gecko client verifies the integrity of MARs that it downloads, and MARs can be signed by multiple parties.

+

Why have two update technologies?

+

OTA updates are not as comprehensive as FOTA updates, but they are a lot more user friendly and easy to apply, and will often be fine for what you need to update:

+ +

Of course, if you need to update files outside Gecko/Gaia, you will have to go for the full FOTA package route.

+

Let's move on and examine the package building process.

+

Building update packages

+

Building updates is the process of generating the files needed to update Firefox OS clients from version X of the software to a newer version Y. The update package that's needed to update the client depends on what files have changed between version X and version Y.

+ +

To generate an incremental update package (for both FOTA and Gecko/Gaia OTA updates), our tools require full builds of both version X and version Y. Full build means that the package includes all the files that are needed to Flash a client. When we produce a full build for version X, we don't know which future versions we will be updating to from version + + X + . Because of that, we build both full FOTA packages and Gecko/Gaia packages for each version. This allows us to generate either a Gecko/Gaia OTA incremental update, or a FOTA incremental update if needed, between version X and all future versions.

+

At a high level, the process of building an update looks like this:

+
    +
  1. With software version X +
      +
    • Generate a complete Gecko/Gaia OTA MAR for the contents of /system/b2g.
      • +
    • Generate a complete FOTA update.zip and target files zip for the device partitions.
      • +
    +
    2. +
  2. With software version Y +
      +
    • Generate a complete Gecko/Gaia OTA MAR for the contents of /system/b2g.
      • +
    • Generate a complete FOTA update.zip and target files zip for the device partitions.
      • +
    +
    3. +
  3. If only files in /system/b2g have changed, generate an incremental Gecko/Gaia OTA update MAR from + + + version X to version Y.
    4. +
  4. Otherwise, generate an incremental FOTA update.zip from + + + version X to version Y. Wrap the incremental FOTA update.zip in a MAR for delivery to the B2G client.
    5. +
  5. Sign the packages as required by delivery agreements.
    6. +
+

The subsections below describe how to use B2G's tools to implement each of these steps.

+
+

Note: the steps below assume that you have already set up a b2g build environment at the location $b2g. The commands below reference the $b2g/build.sh helper script, but make can also be used.

+
+

Generating a complete Gecko/Gaia OTA update MAR

+

Invoke the gecko-update-full target to generate a complete update MAR from the last successful b2g build. To place the MAR at $b2g/objdir-gecko/dist/b2g-update/b2g-gecko-update.mar, use the following commands:

+
$ cd $b2g
+$ ./build.sh gecko-update-full
+$ cp objdir-gecko/dist/b2g-update/b2g-gecko-update.mar <destination>
+
+

Generating a complete FOTA update zip and target files zip

+

The default target in the b2g build system will generate a FOTA update.zip / target files zip when the kernel binary has been copied to the appropriate location under vendor/. This enables boot image, recovery image, and update.zip generation.

+ +

The following commands will carry out this step:

+
$ cd $b2g
+$ ./build.sh
+$ cp out/target/product/$DEVICE/obj/PACKAGING/target_files_intermediates/$DEVICE-target_files-$VARIANT.$USER.zip <destination>
+
+

The variable values in the commands listed above should be filled in as follows:

+ + + + + + + + + + + + + + + + + + + + + +
VariableMeaning
$DEVICEDevice name for the AOSP product
$VARIANTeng, user, or userdebug
$USERThe build username
+

Generating an incremental OTA update MAR

+

In this example, we're assuming that we're generating an update from software version X to version Y. The location of the full Gecko/Gaia OTA MAR built from software version X using the instructions above will be called $MAR_X below. This might be a path on a build server like /home/build/b2g/versions/X/update.mar. Similarly, the location of the full MAR built from version Y will be called $MAR_Y.

+

The tool build-gecko-mar.py will generate an incremental Gecko/Gaia OTA update MAR using $MAR_X and $MAR_Y. We'll call the destination of the generated file $GENERATED_INCREMENTAL_MAR_X_Y. Use the following commands for this step:

+
$ cd $b2g
+$ ./tools/update-tools/build-gecko-mar.py --from $MAR_X --to $MAR_Y $GENERATED_INCREMENTAL_MAR_X_Y
+
+

Generating an incremental FOTA update zip

+

In this example, we're assuming that we're generating an update from software version X to version Y. The location of the full FOTA target zip built from software version X using the instructions above will be called $TARGET_FILES_X below. This might be a path on a build server like /home/build/b2g/versions/X/target_files.zip. Similarly, the location of the full FOTA target zip built from version Y will be called $TARGET_FILES_Y.

+

The tool build/tools/releasetools/ota_from_target_files will generate an incremental FOTA update.zip using $TARGET_FILES_X and $TARGET_FILES_Y. We'll call the destination of this intermediate file $INTERMEDIATE_FOTA_UPDATE_FOTA_X_Y.

+

After this update.zip is generated, the last step is to wrap it in a MAR for delivery to the B2G client. The tool tools/update-tools/build-fota-mar.p does this step. We'll call the destination of this generated file $GENERATED_INCREMENTAL_FOTA_X_Y. Use the following commands to complete this step:

+
$ cd $b2g
+$ ./build/tools/releasetools/ota_from_target_files -v \
+    -i $TARGET_FILES_X \
+    -p out/host/$HOST_ARCH \
+    -k $FOTA_SIGNING_KEY \
+    $TARGET_FILES_Y \
+    $INTERMEDIATE_FOTA_UPDATE_FOTA_X_Y
+$ ./tools/update-tools/build-fota-mar.py $INTERMEDIATE_FOTA_UPDATE_FOTA_X_Y --output=$GENERATED_INCREMENTAL_FOTA_X_Y
+
+

The variable values in the commands listed above should be filled in as follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableMeaning
$TARGET_FILES_XThe FOTA target files zip for version X
$TARGET_FILES_YThe FOTA target files zip for version Y
$GENERATED_INCREMENTAL_FOTA_X_YThe destination incremental update zip wrapped in a MAR for delivery to clients
$HOST_ARCHThe host and arch combo (i.e. linux-x86 or darwin-x86)
$FOTA_SIGNING_KEYPath to the prefix for a private key and public cert for signing the update zip. $FOTA_SIGNING_ZIP.pk8 and $FOTA_SIGNING_ZIP.x509.pem should both exist on the file system
+

Hosting updates and polling for updates on the client side

+

Firefox OS clients poll for updates by fetching and parsing an update manifest: update.xml. Firefox OS clients are configured to poll for updates on specific servers — they query a specially-constructed path on the server. HTTPS is the recommended protocol that the client uses to query the server, however HTTP is also supported. The server and path polled by clients can be changed by shipping an update to existing clients that changes the polling code.

+

In the examples below, we'll assume that updates are hosted on the server updates.b2g.com.

+

The URL polled by the client commonly contains the following parameters:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ParameterExplanation
PRODUCT_MODELThe name of the device model. This is the ro.product.model value in the B2G property database.
CHANNELThe update "channel". This is useful for testing: servers can be configured to host, for example, "nightly", "beta", and "release" channels.
VERSIONThe client's software version. For example, "18.0.2".
BUILD_IDA unique ID such as a timestamp, configured for a particular build.
+

However, there are more values that can be used to construct the queried update URL.

+

The Firefox client uses the value of its configured update host and these values to construct a URL to poll at runtime. An example of such a URL is

+
https://updates.b2g.com/release/unagi1/18.0/20121203123456/update.xml
+

If the server returns a "404 Not Found" in response to the client's request, then there is no update available. If the server returns a "200" and a manifest file, then there may be an update available. The manifest describes the newly available build; that is, the build the client would update to. An example manifest is:

+
<?xml version="1.0"?>
+<updates>
+  <update type="major" appVersion="19.0" version="19.0" extensionVersion="19.0" buildID="20121210123456"
+          licenseURL="http://www.mozilla.com/test/sample-eula.html"
+          detailsURL="http://www.mozilla.com/test/sample-details.html">
+    <patch type="partial" URL="https://updates.b2g.com/release/unagi1/18.0/20121203123456/update.mar"
+           hashFunction="SHA512" hashValue="5111e033875752b7d9b32b4795152dea5ef954cb8a9d4a602dd19a923b464c43521287dcb5781faf3af76e6dc5e8a3dd9c13edea18c1f2c8f3bd89e17d103d6f"
+           size="41901319"/>
+  </update>
+</updates>
+
+

The fields in the manifest describe:

+ +
+

Note: The client device or the user may wish to decline an update.

+
+

Using the mechanisms described above, servers can host update packages to update any old client version to the newest version. Or they may host only a "linear update history" in which clients must upgrade through a single path.

+

The details of the interaction between build servers and the update host is currently beyond the scope of this document. It is highly dependent on the production environment.

+

Verifying and applying updates

+

After a Firefox OS client has successfully polled for an update, downloaded it, and verified the integrity of the downloaded update package, the final step is to apply the update.

+

The first step in applying an update is to verify the signatures embedded in the MAR packages. This is done by the Firefox OS client itself after checking the integrity of the downloaded package. The code used for this is the same for both FOTA and Gecko/Gaia OTA updates.

+

After signatures are verified, the process of applying an update diverges between Gecko/Gaia OTA updates and FOTA updates. Let's look at the differences between the two at this point.

+

Applying Gecko/Gaia OTA updates

+

The Firefox OS client applies these using the updater binary. This is part of the Gecko distribution and is the same code used to apply updates for desktop Firefox. As described above, the update is applied while the Firefox OS client continues to run normally. Users are able to make and receive calls, run apps, browse the web, etc. while updates are being applied.

+

The specific details of the updater binary are beyond the scope of this document, but it works approximately like so:

+ +

After the b2g process finishes restarting, the user is running the new version of the B2G client software.

+

Applying FOTA updates

+

The FOTA client applies these. The Gecko client "hands off" the update to be applied by calling into the librecovery API. What happens after this step is specific to each FOTA client.

+

In the implementation of librecovery used for the GOTA client, the downloaded update package is staged to be applied and special commands are enqueued for the recovery client. librecovery then reboots the device into recovery mode. The recovery client then runs the update script in the update.zip to update files and partitions as needed. The recovery client may need to reboot multiple times in order to update all files.

+

After the final reboot, the device will be running the new version of the Firefox OS client software.

diff --git a/files/bn/archive/b2g_os/building_and_installing_firefox_os/index.html b/files/bn/archive/b2g_os/building_and_installing_firefox_os/index.html new file mode 100644 index 0000000000..513b5d492a --- /dev/null +++ b/files/bn/archive/b2g_os/building_and_installing_firefox_os/index.html @@ -0,0 +1,70 @@ +--- +title: ফায়ারফক্স ওএস বিল্ড ও ইন্সটল করা +slug: Archive/B2G_OS/Building_and_installing_Firefox_OS +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS +--- +
+

যেহেতু ফায়ারফক্স ওএস এখনো ডেভেলপ হচ্ছে, এবং প্রকাশের দ্বারপ্রান্তে রয়েছে, তাই হালনাগাদ সংস্করণ পাওয়ার জন্য আপনার নিজেকেই বিল্ড করে ইন্সটল করে নিতে হবে। এই পাতায় তালিকাভুক্ত নিবন্ধগুলো আপনাকে ইমুলেটর বা কম্প্যাটিবল ডিভাইসে ফায়ারফক্স ওএস বিল্ড ও ইন্সটল করা অথবা ফায়ারফক্স ব্রাউজারে গায়া ইউজার ইন্টারফেস ইন্সটল করা সম্পর্কে নির্দেশনা দেবে।

+
+ + + + + + + +
+

ফায়ারফক্স ওএস সংগ্রহ ও বিল্ড করা

+
+
+ একনজরে ফায়ারফক্স ওএস বিল্ড
+
+ ফায়ারফক্স ওএস বিল্ড এবং ইন্সটল হতে উল্লেখযোগ্য পরিমান সময়, শক্তিশালী কম্পিউটার ও ইন্টারনেট আবশ্যক। ব্যবহারকারীদের উক্ত কাজে সহায়তা করার জন্য এই পাতায় বিল্ড প্রক্রিয়ার লক্ষ্য এবং ধাপ বর্ণনা করা হয়েছে।
+
+ ফায়ারফক্স ওএস বিল্ড করার পূর্বশত
+
+ প্রথমবারের মত ফায়ারফক্স ওএস বিল্ড ও ইন্সটল করার জন্য আপনার যা যা প্রয়োজন এবং যা যা করতে হবে।
+
+ আপনার প্রথম ফায়ারফক্স ওএস বিল্ডের জন্য প্রস্তুত হওয়া
+
+ ফায়ারফক্স ওএস বিল্ড করার পূর্বে অবশ্যই আপনাকে রেপোজিটরি ক্লোন করতে হবে এবং বিল্ডটি কনফিগার করতে হবে। এই নিবন্ধে সেই কাজগুলো বর্ণনা করা হয়েছে।
+
+ ফায়ারফক্স ওএস বিল্ড করা
+
+ যেভাবে ফায়ারফক্স ওএস বিল্ড করবেন, তা এখানে বর্ণনা করা হয়েছে।
+
+ ফায়ারফক্স ওএস পোর্ট করা
+
+ নতুন ডিভাইসে ফায়ারফক্স ওএস কিভাবে পোর্ট করবেন, তা এখানে বর্ণনা করা হয়েছে।
+
+

সবগুলো দেখুন...

+ 		+

ফায়ারফক্স ওএস এবং/অথবা গায়া ইন্সটল করা

+
+
+ যেভাবে গায়া অথবা ফায়ারফক্স ওএস চালাবেন
+
+ আপনি ফায়ারফক্সের সাথে গায়া ব্যবহার করতে পারেন অথবা একটি মোবাইল ডিভাইসে কিংবা একটি ডেস্কটপ-ভিত্তিক সিম্যুলেটরে। এই গাইডটি আপনাকে সঠিক পদ্ধতি বেছে নিতে সাহায্য করবে।
+
+ ফায়ারফক্সে গায়া ব্যবহার করা
+
+ একটি ডেস্কটপ ফায়ারফক্স ব্রাউজারে গায়া ব্যবহার করা।
+
+ ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট ব্যবহার করা
+
+ ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট চালানো ও ব্যবহার করার একটি গাইড; এটি একটি ডেস্কটপ অ্যাপ্লিকেশনের মধ্যে গায়ার পরিবেশ সিম্যুলেট করবে। ফায়ারফক্সে গায়া চালানোর থেকে এটি বেশি নিখুঁত; কিন্তু ইমুলেটরের মত এতটা নয়।
+
+ ফায়ারফক্স ওএস ইমুলেটর ব্যবহার করা
+
+ ফায়ারফক্স ওএস ইমুলেটর বিল্ড করার গাইড এবং কখন কোন ইমুলেটর ব্যবহার করতে হবে, তার নির্দেশিকা।
+
+ মোবাইল ডিভাইসে ফায়ারফক্স ওএস ইন্সটল করা
+
+ একটি আসল মোবাইল ডিভাইসে কি করে ফায়ারফক্স ওএস ইন্সটল করবেন, এখানে তা বর্ণনা করা হয়েছে।
+
+ স্যামসাং গ্যালাক্সি এস ২ তে ফায়ারফক্স ওএস এবং অ্যান্ড্রয়েড ডুয়েল বুট
+
+ যেভাবে স্যামসাং গ্যালাক্সি এস ২ তে কিভাবে ফায়ারফক্স ওএস এবং অ্যান্ড্রয়েডের ডুয়েল বুট সেটআপ করবেন, এখানে সে সম্পর্কে বর্ণনা করা হয়েছে।
+
+
+

 

diff --git a/files/bn/archive/b2g_os/building_b2g_for_qemu_emulator/index.html b/files/bn/archive/b2g_os/building_b2g_for_qemu_emulator/index.html new file mode 100644 index 0000000000..93bb615799 --- /dev/null +++ b/files/bn/archive/b2g_os/building_b2g_for_qemu_emulator/index.html @@ -0,0 +1,37 @@ +--- +title: Building B2G for QEMU Emulator +slug: Archive/B2G_OS/Building_B2G_for_QEMU_Emulator +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS +--- +

{{obsolete_header()}}

+ +

অনুচ্ছেদটি অবসুলেট।দেখুন  Building and installing Boot to Gecko, Firefox OS.
তৈরির জন্য সম্পুর্ন গাইড হিসেবে

+ +

এটা মনে করা হয়ে থাকে আপনার ইতিমধ্যে  setup your build environment and cloned the repositories আছে।

+ +

আপনার পরবর্তী স্টেপ হল build - and run - B2G on your emulator।রুট হিসেবে রান করবেন না।

+ +

$ cd B2G
+ $ make sync

+ +

+ +

QEMU এর জন্য কনফারমেশন তৈরি করুনঃ
+ $ make config-qemu

+ +

পরবর্তীতে,গঙ্কের ব্যাকেন্ড তৈরি করুন এবং ইহার সিস্টেমঃ
+ $ make gonk
+ $ make
+
+ নোটঃযদি  if ./emu.sh -আপনার ইমুলেটর  -প্রথমে রান না করে ,আপনাকে ইহা এক্সেকিউটেবল করতে হবেঃ
+ $ chmod +x emu.sh
+
+ অবশেষে,ইমুলেটরটি রান করুনঃ
+ $ ./emu.sh

+ +

নোটঃআপনার রেপসিটরস অথরা আপনার প্রথম তৈরি ক্লোনিং করার পরে ,আপনি তাদের  "clean" করতে পারেন-বি.দ্র তাদের স্টেটের কাছে রাখুন যাতে আধুনিক পুল নতুন ক্লোনের মত হয়ে থাকে ।

+ +

আপনার রেপ রুট থেকে এটি করুনঃ
+ $ make sync; git clean -xfd; git submodule foreach "git clean -xfd"
+ অন্যভাবে আপনি চেষ্টা করতে পারেন ;
+ $ make mrproper

diff --git a/files/bn/archive/b2g_os/choosing_how_to_run_gaia_or_b2g/index.html b/files/bn/archive/b2g_os/choosing_how_to_run_gaia_or_b2g/index.html new file mode 100644 index 0000000000..64d0878266 --- /dev/null +++ b/files/bn/archive/b2g_os/choosing_how_to_run_gaia_or_b2g/index.html @@ -0,0 +1,57 @@ +--- +title: কিভাবে গায়া অথবা B2G চালানো যায় তা বাছাইকরন +slug: Archive/B2G_OS/Choosing_how_to_run_Gaia_or_B2G +translation_of: Archive/B2G_OS/Choosing_how_to_run_Gaia_or_B2G +--- +

আপনার প্রয়োজনের উপর ভিত্তি করে, আপনি আপনার পছন্দমত উপায় খুজে নিতে পারেন যখন আপনারা ফায়ারফক্স ওএস অথবা গায়া ইউজার ইন্টারফেজ নিয়ে পরীক্ষা নিরীক্ষা করবেন । আপনি ইচ্ছা করলে নিচের উপায়গুলো থেকে যে কোন উপায় নির্বাচন করতে পারেন; প্রত্যেকটির অসুবিধা এবং সুবিধা আছে , এবং কিছুক্ষেত্রে এইগুলো বেশি  সহজ অনান্যগুলোর তুলনায় । 

+

ডেস্কটপে  B2G চালানোর ক্ষেত্রে

+

ফায়ারফক্স ওএস সিমুলেটর বানানো সম্ভব এবং গায়া চালানো যাবে । এই সফটওয়্যারটি যদিও ফায়ারফক্স ভিত্তিক তারপরও এটি  ডিভাইসে ফায়ারফক্স ওএস ব্যবহারের অনুভূতি দেয় । বর্তমানে মজিলা ডেভলাপাদের জন্য প্রদান করতেছে nightly builds of this application । যদি আপনি ফায়ারফক্স কোড-বেস অথবা সি++ প্রোজেক্টস সম্পর্কে ধারনা থাকে তাহলে আপনি নিজেই অ্যাপ্লিকেশন তৈরি করতে পারবেন ।

+

সুবিধা

+ +

অসুবিধা

+ +

 কেন B2G সিমুলেটর চালাবো

+

এটি মাঝপথে পরীক্ষা করার জন্য এবং উন্নয়ন এর ভাল উপায় । এটি একটি ভাল পদ্ধতি আপনার অ্যাপস অথবা কোড একটি ফ্ল্যাশ সারা ফোন এ কিভাবে চলে তা অনুভব করার যখনই কোন কিছু পরীক্ষা করা হবে ।

+
+ মন্তব্য : কোন আপ্লিকেশন বাজারে ছাড়ার পূর্বে  অবশ্যই সত্যিকারের যন্ত্রে পরীক্ষা করতে চাবেন !
+

বিভিন্ন ধরনের সিমুলেটর

+

বিভিন্ন ধরনের ফায়ারফক্স ওএস সিমুলেটর পাওয়া যায় :

+
+
+ Firefox OS Simulator add-on
+
+ এই সংযোজিত অংশটি প্রাথমিক পর্যায়ে আপনার অ্যাপসটি ফায়ারফক্স ওএস এ চলে কিনা তা পরীক্ষা করার জন্য প্রাথমিক পর্যায়ে এই সংযোজিত অংশটি ব্যাবহার করা হয় এবং বেশিরভাগ ক্ষেত্রে এটি আপনার সমস্যার সমাধানও খুজে বের করে । এটির ডেভলাপার টুলস সমর্থন করে এবং এটি পরিবেশের সাথে মিল রেখে অ্যাপসগুল পরীক্ষা করে ।
+
+ ডেভলাপার ডেস্কটপ বিল্ডস
+
+ এইসব সিমুলেটর বিল্ডস আসলে স্ট্যান্ড-এলোন অ্যাপলিকেশন যার প্রাথমিক উদ্দেশ্য হল কোর ফায়ারফক্স ওএস ডেভলাপারদেরকে টেকনিক্যাল ফিচারসগুল সনাক্ত করতে সাহায্য করা ।
+
+ স্থানীয়করন ডেস্কটপ বিল্ডস
+
+ স্থানীয়করন বিল্ডস প্রাথমিকভাবে সাহায্য করে স্থানীয়করন দলকে কাজ করতে এবং ফায়ারফক্স ওএস ও ফায়ারফক্স ওএস অ্যাপস এর স্থানীয়করনগুল পরীক্ষা করাতে ।
+
+

 B2G কে মোবাইল ডিভাইসে চালানোর ক্ষেত্রে

+

আপনার B2G অথবা গায়া ডেভলাপমেন্ট কাজ অথবা আপনার ওয়েব অ্যাপস পরীক্ষা করার সবচেয়ে ভাল উপায় হল মোবাইলে ডিভাইসে ফায়ারফক্স ওএস তৈরি করা এবং তা ইনস্টল করা । এটিও একটি অন্যতম ঝামেলাদায়ক পদ্ধতি ।

+

সুবিধা

+ +

অসুবিধা

+ +

 কেন B2G মোবাইল ডিভাইসে চালাবো

+

অবশ্যই এটিই সবচেয়ে সঠিক পদ্ধতি আপনার কোড অথবা ওয়েব প্রোজেক্টকে পরীক্ষা করার জন্যে যেটি B2G অথবা গায়াতে তৈরি । বাস্তবে মোবাইলে আপনার প্রোজেক্টটি দেখতে কেমন হবে এবং কেমন চলবে তা নিশ্চিত করে এবং সকল ডিভাইসে APIs সঠিকভাবে চালায় । আর আপনার উচিত সব সময় বাস্তব ডিভাইসে আপনার কোডটি পরীক্ষা করে নেয়া বাজারে ছাড়ার পূর্বে এবং আপনি যদি তা করতে অসফল হন তাহলে আপনি এমন কোন সমস্যায় পরতে পারেন যার অনুমান করাও যায় না ।

diff --git a/files/bn/archive/b2g_os/customization_with_the_.userconfig_file/index.html b/files/bn/archive/b2g_os/customization_with_the_.userconfig_file/index.html new file mode 100644 index 0000000000..899d6dcfc0 --- /dev/null +++ b/files/bn/archive/b2g_os/customization_with_the_.userconfig_file/index.html @@ -0,0 +1,106 @@ +--- +title: .userconfig ফাইলের মাধ্যমে কাস্টোমাইজ করা +slug: Archive/B2G_OS/Customization_with_the_.userconfig_file +tags: + - B2G + - Firefox OS + - build +translation_of: Archive/B2G_OS/Customization_with_the_.userconfig_file +--- +
+

আপনার B2G সোর্সের মধ্যে .userconfig ফাইলে কিছু bash কোড যুক্ত করে আপনি বিল্ড প্রক্রিয়ার নির্দিষ্ট কিছু বিষয় কাস্টোমাইজ করতে পারেন। কিভাবে আপনি এই পরিবর্তন করবেন এবং এই পরিবর্তনের ফলে কি কি অর্জন করবেন, সে সম্পর্কে এই নিবন্ধটিতে বিস্তারিত আলোচনা করা হয়েছে।

+
+

.userconfig ফাইল সোর্স কোড কন্ট্রোলের মধ্যে পরীক্ষা করা হয়না। তাই যখন আপনি আপনার সোর্স ট্রি আপডেট করবেন, তখন এটা ওভার রাইট হবেনা। এটা আপনার B2G ট্রি এর প্রধান ফোল্ডারের মধ্যে তৈরি করতে হবে; অর্থাৎ যে ফোল্ডারের মধ্যে flash.sh, build.sh, ইত্যাদি ফাইল রয়েছে। এটা আপনার কনফিগ এবং বিল্ডের কাজ করার আগে যোগ করতে হবে।

+

যদি .userconfig ফাইল থাকে, তবে তা load-config.sh স্ক্রিপ্টের মাধ্যমে লোড হয়। আর এই load-config.sh এর উৎস হচ্ছে এই স্ক্রিপ্ট সমূহঃ flash.sh, build.sh (setup.sh এর মাধ্যমে), run-gdb.sh, এবং run-emulator.sh। আপনার বিল্ডের জন্য গেকো কোথায় রয়েছে, তা নির্ধারণের জন্য run-*.sh স্ক্রিপ্ট সমূহ এটাকে ব্যবহার করে।

+
+

গুরুত্বপূর্ণঃ আপনার .userconfig ফাইল অবশ্যই আপনার হোম ফোল্ডারে না, বরং B2G সোর্সের প্রধান ফোল্ডারের মধ্যে থাকতে হবে!

+
+

গেকো সোর্স ট্রি পরিবর্তন করা

+

ডিফল্ট ভাবে, বিল্ড গেকোর ট্রি ব্যবহার করে, যেটা গিটহাবের একটি ট্রি থেকে ক্লোন করা। তবে কেউ কেউ mozilla-inbound, বা mozilla-central ব্যবহার করতে পছন্দ করে। এটা করার জন্য আপনার পছন্দ মত জায়গায় ক্লোন করুন এবং আপনার .userconfig ফাইলে একটি লাইন যুক্ত করুন, যেটা GECKO_PATH নির্দিষ্ট করে। যেমনঃ

+
export B2G_DIR=${B2G_DIR:-$(cd $(dirname $0); pwd)}
+echo "B2G_DIR = ${B2G_DIR}"
+
+export GECKO_PATH=${B2G_DIR}/mozilla-inbound
+echo "GECKO_PATH = ${GECKO_PATH}"
+
+
+

লক্ষ্য করুনঃ যদি আপনি ম্যাক ওএস এক্স এ একটি কাস্টম গেকোর বিপরীতে বিল্ডের কাজ করেন, তাহলে mozilla-central ফোল্ডারটি অবশ্যই একটি কেস সেনসিটিভ ফাইল সিস্টেমে থাকতে হবে; নতুবা GECKO_PATH ইগনোর করা হবে। বর্তমান ফাইল সিস্টেমটি কেস সেনসিটিভ কি না, তা পরীক্ষা করার জন্য একটি টার্মিনাল উইন্ডোতে নিচের কমান্ড টাইপ করতে পারেনঃ

+ 
echo -n This file system is case->tmp; echo -n in>>TMP; echo sensitive>>tmp; cat tmp
+

উপরের মত এভাবে B2G_DIR পাওয়ার কারনে কোন প্রকার হার্ড কোডেড পাথ ছাড়াই আপনার .userconfig কে কাজ করার সুবিধা প্রদান করে।

+
+

গায়া সেটিংস পরিবর্তন করা

+

মাঝে মাঝে আপনার গায়ার সেটিংস পরিবর্তন করার ইচ্ছা হতে পারে। যেমনঃ ব্যবহারকারীর বিল্ডে এডিবি সক্ষমতা প্রদান। আপনি যখন build/settings.py কল করেন, তখন গায়া Makefile --override build/custom-settings.json কমান্ড পাস করে; যাতে আমরা কিছু ব্যাশ লিখতে পারি যেটা, custom-settings.json ফাইলের মধ্যে{"devtools.debugger.remote-enabled": true} লিখবে। আমরা প্রয়োজন না হলে custom-settings.json এ পরিবর্তন করা এড়িয়ে চলবো। মানে আমরা লিখবো custom-settings.json.new এর মধ্যে এবং কন্টেন্ট গুলো custom-settings.json থেকে আলাদা হয়, তবে আমরা এটাকে রিপ্লেস করে দেব।

+
export GAIA_PATH=${GAIA_PATH:-$(cd gaia; pwd)}
+export CUSTOM_SETTINGS="${GAIA_PATH}/build/config/custom-settings.json"
+cat > "${CUSTOM_SETTINGS}.new" <<EOF
+{"devtools.debugger.remote-enabled": true}
+EOF
+if [[ -f ${CUSTOM_SETTINGS} ]] && cmp "${CUSTOM_SETTINGS}" "${CUSTOM_SETTINGS}.new" >& /dev/null; then
+  rm "${CUSTOM_SETTINGS}.new"
+else
+  mv "${CUSTOM_SETTINGS}.new" "${CUSTOM_SETTINGS}"
+fi
+
+

একটি build/config/custom-prefs.js ফাইল কনফিগার করার আরেকটি সহজ পদ্ধতি হচ্ছে গায়া ওয়ার্কিং ডিরেকটোরি অর্থাৎ gaia/build/config/custom-prefs.js যদি আপনি B2G ডিরেকটোরিতে থাকেন। গায়া বিল্ড সিস্টেম প্রাইমার, প্রেফারেন্স কাস্টোমাইজ করা দেখুন।

+
+

লক্ষ্য করুনঃ  বর্তমান বিল্ডটি এখনো এতটা চৌকস নয় যে GAIA_PATH এর উপর ভিত্তি করে বিভিন্ন ডিরেক্টরি খুঁজে দেখবে। GECKO_PATH behaves যেভাবে আচরন করে, এটা তার থেকে আলাদা। যদি আপনি আলাদা একটি গায়া ক্লোন ব্যবহার করতে চান, তাহলে আপনি সেই ডিরেক্টরি থেকে ম্যানুয়ালি make চালাতে পারেন।

+
+

ডিবাগ বিল্ড তৈরি করা

+

ডিবাগ বিল্ড তৈরি করার জন্য নিচের লাইনটি আপনার .userconfig ফাইলে লিখুনঃ

+
export B2G_DEBUG=1
+

বিল্ড প্রোফাইল করা

+

প্রোফাইলিং চালু করার জন্য (বিল্ট-ইন (SPS) প্লাটফর্ম প্রোফাইলারের সাথে সর্বোত্তম ফলাফলের জন্য) নিচের লাইন সমূহ আপনার .userconfig ফাইলে লিখুন এবং পুনরায় বিল্ড করুনঃ

+
export MOZ_PROFILING=1
+
+

B2G_NOOPT এর সাথে পেয়ার করবেন না। এর ফলাফল অর্থহীন হবে!

+
+

অপটিমাইজার নিষ্ক্রিয় করা

+

অপটিমাইজার নিষ্ক্রিয় করার জন্য (যেটা এমন বিল্ড তৈরি করবে, যা নিরীক্ষণ তুলনামূলক সহজ) আপনার .userconfig ফাইলে নিম্নোক্ত লাইন লিখুন এবং পুনরায় বিল্ড করুনঃ

+
export B2G_NOOPT=1
+

প্রথমবারের জন্য ইউজার এক্সপেরিয়েন্স নিষ্ক্রিয় করা

+

যদি আপনি অনেক বেশি বিল্ড এবং রিফ্ল্যাশ করেন, তাহলে প্রত্যেকবার "ফাস্ট টাইম ইউজার এক্সপেরিয়েন্স" এর মধ্যে দিয়ে যাওয়াটা বিরক্তিকর লাগতে পারে। নিচের লাইনটি আপনার .userconfig এ যোগ করে আপনি এটা বন্ধ করতে পারেনঃ

+
export NOFTU=1
+

গায়া ডেভেলপার মোড চালু করা

+

যদি আপনি গায়া অ্যাপ ডেভেলপ বা হ্যাক করার পরিকল্পনা করে থাকেন, তাহলে ডিভাইসের সাথে কাজ করা আরও সহজ করার জন্য আপনি স্বয়ংক্রিয়ভাবে প্রয়োজনীয় বিভিন্ন সেটিংস ও প্রেফারেন্স নির্দিষ্ট করতে পারবেন। যেমনঃ এটা স্বয়ংক্রিয়ভাবে রিমোট ডিবাগিং ফিচার সক্রিয় করবে এবং যখন একটি ইনকামিং ডিবাগিং কানেকশন চালু হবে তখন কোন প্রম্পট দেখাবে না।

+

আপনার দরকার শুধু নিচের এই লাইনটুকু আপনার .userconfig এ যোগ করাঃ

+
export DEVICE_DEBUG=1
+

ভালগ্রিন্ড সক্রিয় করা

+

আপনার অ্যাপলিকেশনের সাথে মেমোরি এবং থ্রেডিং সংক্রান্ত সমস্যা নিরীক্ষণের জন্য ভাল্গ্রিন্ড উপকারি। ভাল্গ্রিন্ড চালানো সংক্রান্ত আরও তথ্যের জন্য Debugging B2G using valgrind [en-US]দেখুন।

+

B2G এর অধীনে ভাল্গ্রিন্ড ব্যবহার করতে আপনার .userconfig এ নিচের লাইন যুক্ত করুনঃ

+
export B2G_VALGRIND=1
+

ডিফল্ট হোস্ট কম্পাইলার পরিবর্তন করা

+

সামসময়িক কিছু ডিস্ট্রিবিউশন, যেগুলো GCC 4.7 ডিফল্ট কম্পাইলার হিসেবে ব্যবহার করে, বিল্ড করার জন্য সেখানে আপনাকে পুরাতন একটি ভার্শন বলে দিতে হবে। এমনটা করার জন্য আপনার .userconfig এ যথাক্রমে বিকল্প C এবং C++ কম্পাইলার নির্দিষ্ট করতে CC এবং CXX ভ্যারিয়েবল দুইটি যোগ করুন। যেমনঃ উবুন্টু ১২.১০ এ GCC 4.6 কম্পাইলার সেট করার জন্য ব্যবহার করতে হবেঃ

+
export CC=gcc-4.6
+export CXX=g++-4.6
+
+

বা যদি এমন হয় যে, আপনি এমন একটি সংস্করণ ব্যবহার করছেন, যেটার মধ্যে এক্সিকিউটেবল ফাইল সমুহের সম্পূর্ণ পাথ দেয়া আছেঃ

+
export CC=/opt/gcc-4.6.4/bin/gcc
+export CXX=/opt/gcc-4.6.4/bin/g++
+
+

একটি কাস্টম গেকো অবজেক্ট ট্রি লোকেশন নির্দিষ্ট করা

+

একবার আপনি যখন গেকো সোর্স ট্রি সমূহ এবং অন্যান্য বিল্ড অপশন পরিবর্তন করা শুরু করে দেবেন, আপনি এটাও পরিবর্তন করতে চাইতে পারেন, যে আপনার অবজেক্ট গুলো কোথায় সংরক্ষন করা হবে (যেমনঃ আপনার সকল ডিবাগ অবজেক্ট আপনার নন-ডিবাগ অবজেক্ট থেকে আলাদা ট্রি-তে যাবে)। তাহলে আপনার এমনটি করা লাগতে পারেঃ

+
export GECKO_OBJDIR=${GECKO_PATH}/objdir-gonk-debug
+
+

${GECKO_PATH} ব্যবহার করাটা গেকো ট্রি গুলোর মধ্যে সুইচ করা সহজ করেছে (যেমনঃ central, beta, aurora ইত্যাদি)।

+

ডিবাগ এবং নন-ডিবাগ উভয় অবজেক্ট রাখা

+

প্রত্যেকবার পুনরায় বিল্ড করা ছাড়াই নিরীক্ষণ এবং রিলিজ বিল্ড সমূহের মধ্যে সামনে পেছনে সুইচ করার জন্য আপনি আপনার .userconfig ফাইল ব্যবহার করতে পারেন!

+
+
+
export B2G_DIR=${B2G_DIR:-$(cd $(dirname $0); pwd)}
+echo "B2G_DIR = ${B2G_DIR}"
+
+export GECKO_PATH=${B2G_DIR}/mozilla-inbound
+echo "GECKO_PATH = ${GECKO_PATH}"
+
+export B2G_DEBUG=1
+echo "B2G_DEBUG = ${B2G_DEBUG}"
+
+export GECKO_OBJDIR=${GECKO_PATH}/objdir-gonk
+if [[ "${B2G_DEBUG}" != "0" ]]; then
+  export GECKO_OBJDIR=${GECKO_OBJDIR}-debug
+fi
+if [[ "${GECKO_PATH/*mozilla-inbound*/mozilla-inbound}" == "mozilla-inbound" ]]; then
+  export GECKO_OBJDIR=${GECKO_OBJDIR}-m-i
+fi
+echo "GECKO_OBJDIR = ${GECKO_OBJDIR}"
+

echo কমান্ড সমূহ আপনাকে বর্তমান সেটিংস মনে করতে সাহায্য করে। ডিবাগ এবং রিলিজ বিল্ডের মধ্যে সুইচ করার জন্য ৭ নম্বর লাইনে B2G_DEBUG এর মান পরিবর্তন করে দিন।

diff --git a/files/bn/archive/b2g_os/debugging/connecting_a_firefox_os_device_to_the_desktop/index.html b/files/bn/archive/b2g_os/debugging/connecting_a_firefox_os_device_to_the_desktop/index.html new file mode 100644 index 0000000000..9fe4f44a17 --- /dev/null +++ b/files/bn/archive/b2g_os/debugging/connecting_a_firefox_os_device_to_the_desktop/index.html @@ -0,0 +1,63 @@ +--- +title: ডেক্সটপে ফায়ারফক্স OS ডিভাইস সংযুক্ত করা +slug: Archive/B2G_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop +tags: + - ADB + - Firefox OS + - ফায়ারফক্স ওএস +translation_of: Archive/B2G_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop +--- +
+

 কিভাবে একটি ফায়ারফক্স ওএস ডিভাইস ইউএসবি দ্বারা আপনার ডেস্কটপ-এ সংযুক্ত করা যায় তা নিয়ে এই গাইডে আলোচনা করা হয়েছে।

+
+ +
+

নোট: যদি আপনি শুধু একটি ফায়ারফক্স ওএস ডিভাইসে অ্যাপ্লিকেশনের ডিবাগিং করতে চান, এবং যদি ফায়ারফক্স ১.২+ ব্যবহার করেন, তাহলে অ্যাপ ম্যানেজার ব্যবহার করে দেখতে পারেন। বিস্তারিত জানতে অ্যাপ ম্যানেজারের ব্যবহার পড়ুন। যদি আপনার ফায়ারফক্স ওএস ভার্সন ১.২ এর চেয়ে কম হয়, তাহলে মানসম্মত রিমোট ডিবাগিং সম্পর্কে শিখতে ফায়ারফক্স ডেভেলপার টুলস ব্যবহার করে ফায়ারফক্স ওএস-এ ডিবাগিং পড়ুন।

+
+ +

ডিভাইস প্রস্তুত করা

+ +

আপনার ফায়ারফক্স ওএস ডিভাইসে (লেআউটটি দেখুন):

+ +
    +
  1. সেটিংস অ্যাপটি খুলুন, তারপর Device Information > More Information > Developer.
    2. +
  2. ডেভেলপার তালিকাতে, "রিমোট ডিবাগিং" চেক চিহ্ন দিন।
    3. +
+ +

ডেক্সটপ প্রস্তুত করা

+ +

ডেক্সটপে একটি ডিভাইস সংযুক্ত করার জন্য, আপনার অ্যানড্রয়েড ডিবাগ ব্রিজ (এডিবি) টি ইন্সটল থাকা লাগবে। লক্ষ্য করুন যে ফায়ারফক্স ওএস সিমুলেটর এড-ওন এর সাথেই adb দেওয়া আছে।

+ +

আপনার ডেক্সটপ প্রস্তুত করার নির্দেশনাবলী আপনার অপারেটিং সিস্টেমের ওপর নির্ভরশীল এবং অ্যানড্রয়েড ডেভেলপার সা্‌ইট এর "Setting up a Device for Development" অংশের ৩নং পয়েন্টে বিস্তারিত রয়েছে। আমরা নিম্নে কিছু অতিরিক্ত নির্দেশনাবলী দিয়েছি।

+ +

ম্যাক ওএস এক্স- এর জন্য বিশেষ নির্দেশনাবলী

+ +

যদি আপনি ম্যাক ওএস এক্স ব্যবহার করে থাকেন, তাহলে আপনি adt-bundle-mac-x86_64-20130522 নামের একটি প্যাকেজ ডাউনলোড করেছেন। উক্ত ফোল্ডারটি অ্যাপ্লিকেশনস ফোল্ডারের মধ্যে রাখুন, ফলে আপনি পাবেন /Applications/adt-bundle-mac-x86_64-20130522/ যার ভেতর দুইটি ফোল্ডার আছে: eclipse এবং sdk. তারপর আপনি আপনার ~/.bashrc ফাইলটি সম্পাদনা করে নিচের লাইন যোগ করে দিনঃ

+ +
export PATH="/Applications/adt-bundle-mac-x86_64-20130522/sdk/platform-tools:$PATH"
+ +

(আপনার শেল পরের বার শুরু সময় প্রস্তুত থাকবে)। এখন আপনি শেল এর কমান্ড-লাইন ইন্টারফেইসে টাইপ করতে পারবেন:

+ +
adb devices
+
+ +

এর ফলে আপনার কম্পিউটারের সাথে সংযুক্ত ডিভাইসগুলোর নাম দেখতে পারবেনঃ

+ +
List of devices attached
+AA:BB:A5:B5:AA:BB    device
+ +

লিনাক্স এর জন্য বিশেষ নির্দেশনাবলী

+ +

যদি আপনি লিনাক্স ব্যবহার করে থাকেন, তাহলে ফায়ারফক্স ওএস গিক্সফোন ডিভাইসগুলো ভেন্ডর আইডি হল 05c6, ফলে আপনার /etc/udev/rules.d/51-android.rules ফাইলে নিচের মত লাইন যুক্ত করুন:

+ +
SUBSYSTEM=="usb", ATTR{idVendor}=="05c6", MODE="0666", GROUP="plugdev"
+ +

উইন্ডোজ এর জন্য বিশেষ নির্দেশনাবলী

+ +

গিক্সফোন ওয়েবসাইট থেকে আপনি উইন্ডোজ ড্রাইভার ডাউনলোড করতে পারেন গিক্সফোনের জন্য।

+ +

ডিফল্ট উইন্ডোজ ৮ আপনাকে অস্বাক্ষরিত ড্রাইভার ইন্সটল করতে দিবে না। "কিভাবে অস্বাক্ষরিত ড্রাইভার উইন্ডাজ ৮- এ ইন্সটল করবেন" এই টিউটোরিয়ালটি দেখুন।

+ +

ঠিকভাবে প্রস্তুত করেছেন কিনা যাচাই করুন

+ +

আপনি এসব নির্দেশনাবলী অনুসরণ করে থাকলে, ডেক্সটপ এর সাথে ডিভাইসটি ইউএসবি ক্যাবলের মাধ্যমে যুক্ত করুন, কমান্ড প্রম্পট খুলুন এবং টাইপ করুন "adb devices" (নিশ্চিত করতে যে এডিবি আপনার path এ  রয়েছে)। আপনি দেখতে পাবেন আপনার ফায়ারফক্স ওএস ডিভাইস ওপরের কমান্ডের আউটপুটে তালিকাভুক্ত হয়েছে।

diff --git a/files/bn/archive/b2g_os/debugging/debugging_b2g_using_gdb/index.html b/files/bn/archive/b2g_os/debugging/debugging_b2g_using_gdb/index.html new file mode 100644 index 0000000000..754b2aa94f --- /dev/null +++ b/files/bn/archive/b2g_os/debugging/debugging_b2g_using_gdb/index.html @@ -0,0 +1,83 @@ +--- +title: Debugging B2G using gdb and related tools +slug: Archive/B2G_OS/Debugging/Debugging_B2G_using_gdb +translation_of: Archive/B2G_OS/Debugging/Debugging_B2G_using_gdb +--- +
+

gdb is a command line debugger that provides a number of useful options for debugging Firefox OS applications.  Other related tools are also available, such as b2g-ps, which is a wrapper around the standard ps tool that shows app names for each process running on an instance of B2G. The article shows how to perform some common Firefox OS debugging tasks with these tools.

+
+

Starting the debugger in single-process mode

+
+

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

+
+

To restart Firefox OS and run it under gdb control, simply use the run-gdb.sh script:

+
./run-gdb.sh
+
+
+

Note: If you want to debug on the emulator, be sure there are no phones attached; this may conflict with gdb's ability to connect to the emulator.

+
+

If Firefox OS is already running and you want to attach to it without restarting it, you can do so like this:

+
./run-gdb.sh attach
+
+

Debugging out-of-process tasks

+

Because of the threaded nature of Firefox OS, you often need to be able to debug tasks other than the main B2G task. To do this, the simplest way is to use the b2g-ps command to find out the PID of the process that you need to debug:

+
$ adb shell b2g-ps
+b2g              root      106   1     189828 56956 ffffffff 40101330 S /system/b2g/b2g
+Browser          app_0     4308  106   52688  16188 ffffffff 400db330 S /system/b2g/plugin-container
+
+

Here, Browser is the child process used as the "content process" for the browser application. So if you want to debug the content process, in this example, do:

+
$ ./run-gdb attach 4308
+

Sometimes, it is useful to be notified immediately of any child process creation. This can be achieved by starting run-gdb.sh with the MOZ_DEBUG_CHILD_PROCESS environment variable:

+
MOZ_DEBUG_CHILD_PROCESS=1 ./run-gdb.sh
+

Having done this, launching an OOP application on Firefox OS will output the PID of the plugin-container for the new task, and will sleep for 30 seconds, enough time for you to run the attach command we saw above:

+
$ ./run-gdb attach 4308
+

If you are trying to debug something that occurs during boot, you have to launch the debugger instance for the new application fairly quickly. Once the new debugger is launched, you should immediately press "c" to continue running the new task.

+

Support

+

What level of functionality to expect

+

The following debugging features at least should definitely work. If they don't, it's likely that a simple tweak to your setup will make them work:

+ +

The following debugging features are not supported. Don't try to use them.

+ +

Troubleshooting

+

Here are a few things to try first whenever GDB is not working as described above.

+

Ensure that your B2G clone is up-to-date

+

Always keep in mind to that to update your B2G clone you must run these two commands:

+
git pull
+./repo sync
+

Forgetting the git pull there is a typical reason why you'd end up with an old run-gdb.sh and not benefit from recent improvements.

+

Ensure that you are attaching to the right process

+

Attaching to the wrong process (e.g. main B2G process versus Browser process) would explain why your breakpoints don't get hit.

+

Ensure that symbols are correctly read

+
    +
  1. In gdb, use info shared to check that symbols are correctly read: + 
    (gdb) info shared
+From        To          Syms Read   Shared Object Library
+0xb0001000  0xb0006928  Yes         out/target/product/otoro/symbols/system/bin/linker
+0x40051100  0x4007ed74  Yes         /hack/b2g/B2G/out/target/product/otoro/symbols/system/lib/libc.so
+0x401ab934  0x401aba2c  Yes         /hack/b2g/B2G/out/target/product/otoro/symbols/system/lib/libstdc++.so
+...
    +
    2. +
  2. The Syms Read column should say Yes everywhere. Maybe on some android phone you would see Yes (*) for some system libraries or drivers; that would be OK. You should not see any No.
    3. +
  3. If you do see a No, that is your first problem and you must solve it before looking at anything else.
    4. +
  4. Look for any error messages in the terminal output just after you typed your run-gdb.sh command.
    5. +
  5. Also check in that terminal output that the GDB command is sane. In particular, its last command line argument should be the path to your b2g executable. Here is a sane example: + 
    prebuilt/linux-x86/toolchain/arm-linux-androideabi-4.4.x/bin/arm-linux-androideabi-gdb -x /tmp/b2g.gdbinit.bjacob /hack/b2g/B2G/objdir-gecko/dist/bin/b2g
    +
    6. +
  6. Check the value of these GDB variables: solib-search-path and solib-absolute-prefix: + 
    (gdb) show solib-search-path
+The search path for loading non-absolute shared library symbol files is /hack/b2g/B2G/objdir-gecko/dist/bin:out/target/product/otoro/symbols/system/lib:out/target/product/otoro/symbols/system/lib/hw:out/target/product/otoro/symbols/system/lib/egl:out/target/product/otoro/symbols/system/bin:out/target/product/otoro/system/lib:out/target/product/otoro/system/lib/egl:out/target/product/otoro/system/lib/hw:out/target/product/otoro/system/vendor/lib:out/target/product/otoro/system/vendor/lib/hw:out/target/product/otoro/system/vendor/lib/egl.
+(gdb) show solib-absolute-prefix
+The current system root is "out/target/product/otoro/symbols".
    +
    7. +
+
+

Note: If you need more help, try the #b2g IRC channel. If you think you found a bug, report it on the B2G issue tracker.

+
+

 

diff --git a/files/bn/archive/b2g_os/debugging/debugging_b2g_using_valgrind/index.html b/files/bn/archive/b2g_os/debugging/debugging_b2g_using_valgrind/index.html new file mode 100644 index 0000000000..d5f4a231c4 --- /dev/null +++ b/files/bn/archive/b2g_os/debugging/debugging_b2g_using_valgrind/index.html @@ -0,0 +1,95 @@ +--- +title: Debugging B2G using Valgrind +slug: Archive/B2G_OS/Debugging/Debugging_B2G_using_valgrind +tags: + - B2G + - Debugging + - Firefox OS + - Mobile + - valgrind +translation_of: Archive/B2G_OS/Debugging/Debugging_B2G_using_valgrind +--- +

S

+
+

ValgrindDSS মেমোরি সম্পর্কে জানার জন্য মেমোরি সুবিধা দিয়ে থাকে , যোগসুত্র/প্রক্রিয়া ,এবং অন্যান্য জিনিস এর সাথে সংযুক্ত যা একটি প্রোগ্রামের পারফরমেন্সের মধ্যে আছে।Firefox OS tree তে ইহা সংযুক্ত করে থাকে,এবং ফোনে যা চালানো যায় যা সঠিক সম্পদ এই অনুচ্ছেদ দেখায় কিভাবে ব্যবহার করতে হয় ইহা।

+
+

প্রয়োজনীয়তা

+

Firefox OS এর বিপক্ষে  Valgrind চালানোর আগে,এটা রিকমান্ডেড করা হয়ে থাকে যে Debugging Mozilla with ValgrindDSDDSDDSG এর সাথে ডেভেলপাররা তাদেরকে পরিচিত করে থাকে ।বেশির ভাগ তথ্য এটা বহন করে যা Firefox OS এর বিপক্ষে কাজ করায় সংযুক্ত, যা বেশির ভাগ গঠন এবং কমান্ড লাইন স্টেপ এর Firefox OS গঠনের দ্বারা এবং বাতিল স্ক্রীপ্ট দ্বারা পরিচালিত হয়ে থাকে।

+

Firefox OS বিপক্ষে  Valgrind একটি ফোনে চালাতে,একটি ফোন সাধারন জায়গার থেকে বেশে জায়গা সহ বেশি দরকার।Valgrind হল জায়গার ইন্টেন্সিভ,এবং সাধারনত কারন হয়ে থাকে Out Of Memory errors  এর যা ফোনে 1GB of RAM এর চেয়ে কমে হয়ে থাকে .লেখা অনুসারে(২০১৪-১২-০৪), Valgrind পরীক্ষা চালানো হয়ে থাকে Firefox OS এর Nexus 4 ফোনে 2GB of RAM এর সাথে চলার উপরে ,কিন্তু এটা হবে Geeksphone Keons এবং একই spec ফোনে ।দেখুন Phone and device data ারো বেশি ফোনের সম্পর্কের জানার জন্য।

+

Valgrind চালানো FxOS ফোনে

+

চলুন Valgrind চালানো প্রক্রিয়া দেখি।

+

Compiling

+

Firefox OS এর সাথে with valgrind এর সক্ষ্মতা তৈরি করতে, নিচের .userconfig file যোগ করুন।

+
export B2G_VALGRIND=1
+

Building debug (B2G_DEBUG) আরো রিকমান্ডেড।Building কোন অপ্টিমাইজেশন ছাড়া (B2G_NOOPT)  তৈরি করে জিনিস যা সাধারনত অব্যবহারযোগ্য ভাভে ধীরে চলে, এবং রিকমান্ডেড না বিশেষ কেস ছাড়া যেখাকে ইহাকে ভাবা হয়ে থাকে অপ্টিমাইজেশনে অন্ধকার ভুল রুপে।

+

Running

+
+

নোটঃRunning Valgrind  একটি Firefox OS ফোনে হয়ে থাকে ফোনের কন্টেক্সট এর উপরে,অপারেটিং সিস্টেমের উপরে নয়।এটা মনে করা হয়ে থাকে যে কোন প্লাটফর্ম যা ডেভেলপ ঘটিয়ে থাকে  adb এর যা সবসময় পাওয়া যায় এবংrun-valgrind.sh script to runবাতিল করে  valgrind ফোনে চালাতে ।

+
+

valgrindএর মধ্যে Firefox OS চালাতে,ব্যবহার করুন the run-valgrind.sh script from the B2G directory।স্ক্রিপ্ট নিচে দেয়াঃ

+
    +
  1. r/w হিসেবে ফোনের ফাইল সিস্টেম পুনআহোরন করুন ।
    2. +
  2. বর্তমান libxul.so ডিবাগ কপি করুন সম্পুর্ন চিহ্ন দিতে যা ফোনে আছে।যেহেতু শত শত MB দিয়ে ফাইলটা পরিপুর্ন,এই ধাপে বিভিন্ন সময় নেয়া হয়ে থাকে যা শেষ করতে প্রয়োজনীয়,এটা প্রতিটি নতুন তৈরির সময়ে প্রস্তুত করা হয়ে থাকে।valgrind চালাতে libxul এর কপি ধাপ ছাড়া,নির্দেশটা চালানঃ
    + 
    run-valgrind.sh nocopy
    +
    3. +
  3. ফোনটি পুন্রায় রিবুট করুন।
    4. +
  4. Kills the b2g প্রক্রিয়া চালান যা ফোনে শুরু হয়ে থাকে ।
    5. +
  5. ইহার নিজের b2g প্রক্রিয়া valgrind এর মধ্যে চালান।
    6. +
+

সকল valgrind output লেখ হবে টার্মিনালে stdout এ যা run-valgrind.sh script এর বের হওয়ার টার্মিনাল যা পড়া যায় অথবা ফাইলে উকি মারে।

+
+

নোটঃযেহেতু run-valgrind.sh script নিজের adb প্রক্রিয়ায় b2g process তে চলমান ,killing the script আরো kill b2g নষ্ট করবে এবং valgrind ফোনে নষ্ট হবে ।এটা প্রদর্শন করে যে ফোনটি চালানোর পরে রিবুটেড হয় একটি  valgrind সেসনের উপরে ,যেহেতু এটি যেকোন কিছু একটি অড স্টেট এ থেকে ত্যাগ করতে পারে।

+
+

Valgrind এর উপরে Firefox OS Desktop চালানো

+

valgrind চালানো Firefox OS Desktop এর কাজের বিপক্ষে যেহেতু এটা চালানো হয়ে থাকে একই পথে যা desktop Firefox এর বিপক্ষে কাজ করে থাকে।Debugging Mozilla with ValgrindDDS পেজে আলোচনা করুন আরও বেশি তথ্যের জন্য ।সকল পতাকার page for more information. All of the relevant build flags will need to be added to mozconfig যোগ করা উচিত,এবং সকল প্লাটফর্ম  and all platform-বিশেষ ইস্যু যা পেজে প্রয়োগ করা হয়ে থাকে ।specific issues in the page will apply.

+

নোট করুন যে Valgrind চালানো ডেস্কটপের উপরে যা OOP/process-per-tab mode এ যোগ করার জন্য নিচের প্রক্রিয়ায় child processes গুলো ট্রাক করে থাকে নিশ্চিত করার জন্যঃ

+
--trace-children=yes
+

Firefox OS Valgrind পরিচালনা করা এবং আপডেটিং করা

+

যখন প্যাচেস আপ্সট্রিম ব্যবহার করা হয়ে থাকে ,Valgrind forহল Firefox OS এর জন্য পরিচালিত যা একটি ফর্ক রেপসেটরিতে রাখা হয়ে থাকে উওন্নতি ঘটানোর জন্য যা সম্ভব হয়ে থাকে Firefox OS এর গঠনের ট্রি এবং ভার্সনের এর সাথে যোগাযোগের কারনে।

+

Valgrind Repos আপডেটিং

+
+

ওয়ার্নিংঃGIT এর সাথে অভিজ্ঞতাও দরকার। valgrind repos উন্নত করারা চেষ্টা করবেন না ,যদি আপনি জটিল Git operations চালানোতে দক্ষ না হোন।কোন আপডেট  github repoদর্পন হবে  git.mozilla.org এর যা পুল করা হবে ডেভেলপারদের ,HEAD of the manifests repo ব্যবহার দ্বারা ।যখন Valgrind ভাঙ্গা হবে তা কোন কিছুর উপর ভাংবেনা যা  Valgrind এর সক্ষমতা নেই(বি দ্র. tbpl), ইহা হবে অনেক বেশি বিরক্তকর ডেভেলপারস যারা এটি ব্যবহারের চেষ্টা করে।

+
+

প্রধান Firefox OS valgrind এবং VEX repos হল

+ +

প্রধান শাখা হল SVN ট্রাঙ্কের প্রিন্সিটিভ ভার্সনের শাখাএইসব প্রত্যেক রেপুস,যখন Firefox OS শাখা বহন করবে Firefox OS- এর বিশেষ প্রক্রিয়া ট্রাঙ্কের উপরে যা রিবেস করা।

+
+

নোটঃALWAYS UPDATE BOTH REPOS AT THE SAME TIME.যখন তারা দূটা পৃথক রেপস,VEX  হল সাধারনত  Valgrind এরএকটি সাবমডিউল এবং HEAD of valgrind সাধারনত  HEAD of VEX এর বিন্দু।.

+
+

git.mozilla.org ডোমেইনের প্রতিলিপি  B2G মেনিফেস্টে ব্যবহারের জন্যঃ

+ +
    +
  1. প্রধান রেপ হল sync এর সাথে valgrind SVN কে git svn এর সাথে রাখা।আপডেটেড রেপস কে পুল করতে ,valgrind কে ক্লোন করুন এবং vex repos নেয়া হয় github থেকে , তার পরে নিচেরটা রান করুনঃ
    + 
    git svn init -s [subversion repo url]
+
    +
    2. +
  2. SVN info পুল করুন যা  কয়েক ঘন্টা সময় নিবে,কিন্তু যখন এটা হয়ে যাবে আপনার ট্রি sync করবে প্রধান Valgrind SVN এর সাথে।
    3. +
  3. আরো আপডেট পুল করুন,নিচের নির্দেশের সেট ব্যবহার করেঃ
    + 
    git checkout master
+git svn fetch
+git svn rebase
+git push [github-remote-name] master
+git checkout fxos
+git rebase master
+
    +
    4. +
  4. একটি ভাল সুযোগ আছে যা বাধাকে দেখবে Firefox OS শাখার রিবেস ধাপে।যদি আপনার ইস্যু ভালভাবে কাজ না করে,লেখককে ইমেইল করেন যিনি বাধার  কমেন্ট করে।
    5. +
  5. রিবেসিং এর পরে একটি পুর্ন Firefox OS build রান করুন  B2G_VALGRIND flag এর সাথে নিশ্চিত করতে যা ইহা গঠন করে থাকে।সবচেয়ে গুরুত্বপুর্ন হল এর স্ক্রীপ্ট শাখা।
    6. +
  6. একদা আপনি রিবেস করে AND TESTED যা Firefox OS tree এর বিপক্ষে একটি গঠন ,আপনাকে Firefox OS শাখার প্রধান পরিবর্তনের জন্য ধাক্কা দিতে হবে।
    + 
    git push -f [github-remote-name] fxos
    +
    7. +
+

গঠন,ইন্সটল,এবং বাতিল করা স্ক্রিপ্ট

+

কিছু মাল্টিপল স্ক্রীপ্ট আছে যা Valgrind Firefox OS এর অংশের শাখা অথবা B2G রেপও যা একটি রেপো ফেস আপদেট করারজন্য দরকার।

+

অতিরিক্ত/valgrind/android.mk

+

এটি  Android গঠন সিস্টেমের স্ক্রীপ্ট।তখন থেকেই নয় বেশির ভাগ সময়, এটি সেটিই যেটাতে পরিবর্তনের প্রয়োজন পরে থাকে ,ফাইলের যোগ/সরানোর  কারনে Valgrind tree থেকে ।একটি -j1 গঠন ব্যবহার করুন যা টার্গেট তা গঠন করতে ব্যর্থ হলে তবে তা দেখতে,এবং যদি ইহা একটি ফাইল অথবা একটি অবিদ্যমান রেফারেন্সিং ফাইল হারিয়ে ফেলে ,ফাইল লিস্ট আপডেট করুন ।

+

অতিরিক্ত/valgrind/valgrind.mk

+

এটি বহন করে থাকে প্যাকেজের লিস্ট যা প্রয়োজন হয় গঠন করতে এবং যোগ করতে FxOS সিস্টেম ইমেজ,gonk-misc/b2g.mk দ্বারা রেফারেন্স করা।Valgrind নতুন প্যাকেজে যোগ করার জন্য কম পাওয়া যায় বলে এটি সাধারনত আপডেট করার দরকার পরেনা।কিন্তু যদি লাগে তবে এতে রাখুন।

+

run-valgrind.sh

+

Valgrind ফোনে চালানোর স্ক্রীপ্ট।যদি  Valgrind ফোনে চালানোর জন্য নতুন কমান্ড লাইন থাকে যা যুক্তি প্রদর্শন করে থাকে,তাদের এখানে রাখুন।এটা সেখানে যা আমরা কপি করি লাইব্রেরি ফোনে চিহ্নটি ডিবাগের সাথে থাকে,সুতরাং কোন এডজাস্টমেন্ট /পরিবর্তন প্রক্রিয়াটিতে হওইয়া উচিত ।

diff --git a/files/bn/archive/b2g_os/debugging/debugging_ooms/index.html b/files/bn/archive/b2g_os/debugging/debugging_ooms/index.html new file mode 100644 index 0000000000..ecb226f307 --- /dev/null +++ b/files/bn/archive/b2g_os/debugging/debugging_ooms/index.html @@ -0,0 +1,63 @@ +--- +title: Debugging out of memory errors on Firefox OS +slug: Archive/B2G_OS/Debugging/Debugging_OOMs +translation_of: Archive/B2G_OS/Debugging/Debugging_OOMs +--- +
+

Firefox OS/B2G runs on severely memory-constrained devices, and it's easy for apps to exhaust the memory available on the system.  When a process exhausts the memory available on the system, the kernel must kill some other processes in order to free up memory.  When the kernel chooses to kill the foreground process, this manifests as an apparent crash of the app you're using. 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.

+
+

Process priorities

+

B2G uses multiple processes when it runs on a phone — one "main process" and potentially many "child processes".  Every app runs in its own child process, with one exception: The browser app runs in the main process, while the tabs inside the browser app each run in their own child process. The process we kill when we run out of memory isn't necessarily the one that "caused" the out-of-memory condition.  B2G assigns priorities to each process based on how important it thinks the process is, and when the system runs out of memory, it kills process strictly in order of priority.

+

A process's priority is known as its oom_adj.  Smaller oom_adj values correspond to higher priority processes. Killing the main process kills all child processes and effectively reboots the phone, so we never want to kill the main process.  Therefore, the main process runs with oom_adj 0.

+

Most child processes run with oom_adj 2 while they're in the foreground.  Child processes in the background run with oom_adj between 3 and 6 (inclusive).  Exactly what oom_adj a child process while in the background gets depends on a number of factors, such as whether it's playing sound, whether it's the homescreen app, and so on.

+

Debugging an OOM crash

+

Suppose you have a reproducible crash that you suspect is caused by the phone running out of memory.  The following are steps you can take to understand more about what's going wrong.

+

Step 1: Verify that it's actually an OOM

+

First, we need to check whether the crash is actually due to the phone running out of memory.  To do this, run adb shell dmesg.  If the app is being killed due to OOM, you'll see something like the following response:

+
<4>[06-18 07:40:25.291] [2897: Notes+]send sigkill to 2897 (Notes+), adj 2, size 30625
+

This line indicates that the phone's low-memory killer killed the Notes+ app (process id 2897), which had oom_adj 2 when it was killed.  The size reported here is in pages, which are 4kb each.  So in this case, the Notes+ app was using 30625 * 4kb = 120mb of memory.

+

Digression: If it's not an OOM

+

If you don't see a line like this in the dmesg output, your crash is likely not an OOM.  The next step in debugging such a crash is usually to attach gdb to the crashing process and get a backtrace, which can be done like so:

+
$ cd path/to/B2G/checkout
+$ adb shell b2g-ps
+# Note pid of the app that you're going to crash
+$ ./run-gdb.sh attach <pid>
+(gdb) continue
+# crash the app
+(gdb) bt
+

When reporting the bug, attach this output, along with the output of adb logcat. If your crash is due to OOM, a gdb backtrace is probably not interesting, because an OOM crash is triggered by a signal sent from the kernel, not by bad code that the process executes.

+

Step 2: Collect memory reports

+

After you've verified that your crash is actually due to OOM, the next step is to collect a memory report from the phone before the app crashes.  A memory report will help us understand where memory is being used. This step is a bit tricky because once an app crashes, there's no way to collect a memory report from that process.  There's also no way to trigger a memory report when the kernel tries to kill a process — by then, it's too late.

+

To pull a memory report from the phone, first update your build tree so you get the latest version of the relevant tool.  repo sync is not sufficient; you must git fetch && git merge or git pull:

+
$ cd path/to/B2G/checkout
+$ git fetch origin
+$ git merge --ff-only origin
+

Now you can run the memory reporting tool like so:

+
$ tools/get_about_memory.py
+

Once you get a memory report you're happy with, you can zip up the directory (named about-memory-N) and attach it to the relevant bug. But again, this is only helpful if you run this command while the app you care about is alive and using a lot of memory.  We have a few options here.

+

Step 2, option 1: Get a different device

+

Often the easiest thing to do is to get a device with more RAM.  You know from step 1 above how much memory the process used when it crashed, so you can simply wait until the process is using about that much memory, and then take a memory report. The b2g-info tool shows you how much memory the different B2G processes are using.  You can run this tool in a loop by doing something like the following:

+
$ adb shell 'while true; do b2g-info; sleep 1; done'
+

If b2g-info isn't available on your device, you can use b2g-procrank instead.

+

Step 2, option 2: Fastest finger

+

If you don't have access to a device with more RAM, you can try to run get_about_memory.py just before the app crashes.  Again, you can run b2g-info in a loop (as shown in the previous section) to figure out when to run get_about_memory.py. Running a memory report freezes all of the processes on the phone for a few moments, so it's often not difficult to grab a memory report soon before a process OOMs itself.

+

Step 2, option 3: Use a smaller testcase

+

We often hit OOMs when doing something like "loading a file of at least size X in the app."

+

If the app crashes very quickly with a testcase of size X, you could try running a similar but smaller testcase (say, size X/2) and capturing a memory report after that succeeds.  The memory report generated this way often gives us good insights into the OOM crash that we ultimately care about.

+

Step 2, option 4: Run B2G on your desktop

+

If the worst comes to the worst, you can run B2G on your desktop, which probably has much more RAM than your FxOS phone.  This is tricky because B2G running on a desktop machine is a different in some key ways from B2G running on a phone.

+

In particular, B2G on desktop machines has multiprocess disabled by default.  It doesn't really work 100% correctly anywhere, but it works most accurately on Linux and Mac.  (Follow Bug 923961, Bug 914584, Bug 891882)  You can test on your desktop without multiprocess enabled, but in my experience a lot of our high memory usage issues are caused by our interprocess communication code, so that won't necessarily trigger the bug you're seeing.

+

It's also not as convenient to take memory reports from a B2G desktop process.  On Linux, you can send signal 34 to the main B2G process and it'll write memory-report-*.gz files out to /tmp.
+
+ One advantage to using B2G desktop builds is that you can use your favorite desktop debugging tools, such as Instruments on Mac OSX.  We've had a lot of success with this in the past. To collect a memory report using Instruments on OS X, choose "New -> Mac OS X -> Allocations". Start b2g-desktop and you should see multiple "plugin-container" processes in the activity monitor. You will need 2 Instruments activities: 1 to trace the allocations on the main b2g process and another to trace the allocations on the app you wish to analyze. Attach the instrument activities and execute your test case.

+

To analyze how much memory your app is using, analyze call trees. Check the "Invert Call Tree" tick, and sort by bytes used. This will show you which part of your app is using lots of memory. Below is a screenshot of a sample analysis of memory usage for an app:

+

Screen shot of instruments.
+
+ For more information on setting up B2G desktop builds, read our Hacking Gaia page.

+

Step 3: Analyze the memory report

+

When you run get_about_memory.py, it will open a memory report in Firefox.  This file contains information about the memory usage of all processes on the system. Reading these reports can be a bit overwhelming at first, but it's not so bad once you get the hang of it.  Note that you can hover over any leaf node to get a description of what that node describes. What you're looking for is something "unusually large" in the crashing process.  You can get an idea of what "unusually large" means by capturing a memory report of your app when it's not using a ton of memory and comparing that to the errant memory report.

+

Reading memory reports takes some practice, so feel free to ask for help.  The experts on this subject hang out in #memshrink on IRC.

+

Step 4: Rebuild with DMD, if necessary

+

One common line item to stick out in memory reports captured before apps crash is heap-unclassified.  heap-unclassified counts memory allocated by the process that isn't covered by any other memory reporter.  If you have high heap-unclassified, the memory report can't tell you anything else about what that memory belongs to. Our tool for digging into heap-unclassified is called DMD.  This works on B2G, but you must build B2G yourself in order for it to work because DMD requires local symbols that are only kept on the build machine.

+

To find out more information on running DMD and interpreting its output, read the Mozilla Wiki DMD page.
+  

diff --git a/files/bn/archive/b2g_os/debugging/developer_settings/index.html b/files/bn/archive/b2g_os/debugging/developer_settings/index.html new file mode 100644 index 0000000000..460f50ca45 --- /dev/null +++ b/files/bn/archive/b2g_os/debugging/developer_settings/index.html @@ -0,0 +1,157 @@ +--- +title: Developer settings for Firefox OS +slug: Archive/B2G_OS/Debugging/Developer_settings +translation_of: Archive/B2G_OS/Debugging/Developer_settings +--- +
+

Contained in the Firefox OS Settings app is the Developer panel. This panel offers a number of options that can make debugging your open web app on Firefox OS easier. This article covers the options available and how to make use of them.

+
+

The settings panel for developer options is intentionally buried deep to avoid having end users who have no need for these options inadvertently turning on options that make their device run more slowly or add strange visual effects to their displays. The panel looks something like this (the following is from a Geeksphone Keon running an April 2014 build of Firefox OS 2.0; yours may differ if you are running a different version):

+

+

The developer panel is reached as follows:

+ +

The following sections cover each of the options in the Developer panel, explaining what they do and why they're useful.

+

Developer Tools settings

+

Debugging via USB

+

The "Remote debugging" option enables support for remotely debugging your Firefox OS device. This also enables ADB command usage. In Firefox <1.4 there is only a single checkbox; in Firefox 1.4 there are three options available in a select box:

+ +

Developer HUD

+

In Firefox OS 1.4+, tapping this section brings you to the Developer HUD selection view.

+

+

There's a checkbox you can use to enable or disable the Developer HUD altogether (a section at the top of the Firefox OS UI for displaying developer information), and then five checkboxes to enable or disable:

+ +

Frames per second

+

Enabling this option reports three numbers in the top left of the Firefox OS display; the values reported are an average of recent results within a sliding window, meant to be "instantaneous" but fairly accurate. As such, all numbers are "guesses":

+ +

A screenshot of Firefox OS, showing three numbers in the top left hand corner that are measurements of app framerate.

+

Time to load

+

Firefox OS also has a tool that can help measure startup time, specifically the "first paint" time. The value shown by the tool — in the top right of the Firefox OS display — is the elapsed time between when the most recent application was launched, and an estimate of the first time that application painted its UI, in milliseconds. This number only approximates the real "first paint" time, and in particular underestimates it. However, lowering this number almost always correlates to improvements in real startup time, so it can be useful to quickly measure optimization ideas.

+

A screenshot of Firefox OS, showing a number in the top right hand corner that is a measurement of the current app startup time, in milliseconds.

+

App memory

+

Displays information on how much memory the app is using, and allows you to enable or disable the different items that use memory to show much each one is using in the current app. For example, the screen shot below only has App memory and JS objects checked, and the indicator on the bottom right is showing that the Settings app is using 414.77KB for JS objects.

+

+

Flash repainted area

+

In this mode, every time a region of the screen is painted by Gecko, Gecko blits a random translucent color over the painted region. Ideally, only parts of the screen that visually change between frames will "flash" with a new color. But sometimes more area than is needed is repainted, causing large areas to "flash". This symptom may indicate that application code is forcing too much of its scene to update. It may also indicate bugs in Gecko itself.

+

A screenshot of Firefox OS with a number of transparent overlays, showing the parts of the screen repainted with each new animation frame.

+

Graphics settings

+

Enable APZ for all content (was Async Pan/Zoom)

+

When enabled, the Async Pan/Zoom module allows panning and zooming to be performed on asynchronously, on another thread, with some noticeable differences to rendering behaviour. To find out more, read the MozillaWiki APZ article.

+

Tiling (was Layers: Enable tiles)

+

Introduced in Firefox OS 1.4, this feature enables the painting of content to the screen in smaller chunks ("tiles") rather than painting the whole screen at once. This is mainly useful for platform QA work involving reducing checkerboarding and finding regression windows.

+

Simple tiling (was Layers: Simple tiles)

+

This flips between the two different content painting implementations described in the section above.

+

Hardware composer (was Enable hardware compositing)

+

When enabled, this setting causes the device to use its Hardware Composer to composite visual elements (surfaces) to the screen.

+

Draw tile borders (was Layers: Draw tile borders)

+

This is very similar to the {{ anch("Draw layer borders") }} option, the difference being that it also draws the borders for individual tiles as well as the borders around layers.

+

Draw layer borders

+

When this setting is enabled, a brightly colored border is added around all the different layers painted to the display — great for diagnosing layout issues.

+

A screenshot from Firefox OS showing an opened select form with the draw layers borders option enabled, resulting in colored borders being drawn on all the different rendered layers.

+

Dump layers tree

+

This option causes a copy of the compositor's layer tree to be dumped to logcat on every frame composited to the screen; this is mainly useful for platform graphics performance work, rather than regular web development.

+

Cards View: Screenshots

+

When enabled, this specifies that app screenshots will be taken when the open apps are displayed in card view. If disabled, app icons are shown in the center of blank cards for the card view instead.

+

Window management settings

+

Software home button

+

Enabling this option creates a software home button that can provide the same functionality as the equivalent hardware button if it is not available. This is intended for future use on devices that are likely to not have hardware home buttons, like tablets.

+

Home gesture

+

Enabling this option allows you to swipe upwards towards the center from outside the screen to bring up the homescreen. Again, this can provide the same functionality as the equivalent hardware button if it is not available, and is intended for future use on devices that are likely to not have hardware home buttons, like tablets.

+

Edges gesture

+

Enabling this option allows you to swipe left and right from outside the screen towards the center, to navigate to the next and previous sheets (either web pages in the browser, or views inside another app.) This basically works like the browser navigator bar in Firefox.

+

Continuous transition

+

This setting allows you to decide whether app keyboards open immediately or continuously (with a  transition). Disabling such transition effects are useful on low end devices, when they cause performance to suffer.

+

App transition

+

Turn this on and then off again and you will disable all app closing/opening transitions: all apps will now just show immediately, without the smooth animation, and keyboards will also open/close without animation. Like "Continuous transition enabled", this is meant for improving performance on low end devices, but it has more of an effect.

+

App suspending

+

If enabled, this specifies that when an app is killed in the background, it will be kept in history and reopened when you open it from homescreen/card view. If disabled, such apps are not kept in history/card view.

+

Debug settings

+

Log slow animations

+

This tool tries to help developers understand why animations are not offloaded to the compositor to be run efficiently as possible. It reports "bugs" like trying to animate elements that are too large, or trying to animate CSS properties that can't be offloaded. The messages you'll get on the device will look like the following:

+
I/Gecko   ( 5644): Performance warning: Async animation disabled because frame size (1280, 410) is bigger than the viewport (360, 518) [div with id 'views']
+
+

Wi-Fi output in adb

+

Enabling this option adds information about Wi-Fi to the adb logs (error logs from the console can be accessed using adb logcat | grep "Error" in the Terminal.)

+

Bluetooth output in adb

+

Enabling this option adds information about Bluetooth to the adb logs (error logs from the console can be accessed using adb logcat | grep "Error" in the Terminal.)

+

Console enabled

+

When enabled, this option lets you use the Web Console in Firefox to remotely access the console output on the device; without this option enabled, the {{domxref("console.log()")}} function does nothing.

+

Gaia debug traces

+

Enabling this directly enables DEBUG traces in Gaia; see {{ bug("881672") }} for more details.

+
+

Note: Unfortunately, not every app supports this mechanism to print their debug log. Instead, they control a "DEBUG" flag in code directly, so enabling this flag does NOT ensure that you'll see all debug logs.

+
+

Show accessibility settings

+

This enables the accessibility settings menu, subsequently found at Settings > Accessibility. The options contained within are as follows:

+

Screen reader

+

Enabling this option turns on Firefox OS's screen reader. Currently at a very early stage, it changes the way the standard touch events work. For example, you can:

+ +

Speech volume

+

A slider that controls how loud the speech is delivered.

+

Speech rate

+

A slider that controls how fast the speech is delivered.

+

Launch first time use

+

The "Launch first time use" button runs the first-time startup program; this lets you go through the initial setup and tutorial process, and is useful when trying to debug that process, or if you want to re-configure your device from scratch.

+

Obsolete settings

+

This section lists settings that are no longer provided, or no longer exist in the same state, but might still be interesting if you are running an older version of Firefox OS.

+

Accessibility

+

In versions of Firefox earlier than newer 1.4 versions, this controls the accessibility settings, as explained in the {{ anch("Show_accessibility_settings") }} section above.

+

Grid

+

The "Grid" option, when enabled, causes the Firefox OS display to be overlaid with a grid pattern to help you gauge positioning and alignment of items. For example, below we see the Browser app running with the Grid option enabled:

+

+

The grid's heavier lines are 32 pixels apart, both horizontally and vertically.

+

Show frames per second

+

In Firefox OS versions older than newer 1.4, enabling this displays frames per second, as explained in the {{ anch("Frames_per_second") }} section above.

+

Show time to load

+

In Firefox OS versions older than newer 1.4, enabling this displays time to load information, as explained in the {{ anch("Time_to_load") }} section above.

+

Rocketbar enabled

+

In Firefox OS versions older than newer 1.4, this option enables the new Firefox Rocketbar on your device, which provides a useful new way to switch between apps, search, and more. When enabled, you'll find a search icon at the top left of the device, and the RocketBar can be brought up by swiping from the top left of the device towards the bottom left.

+
+

Note: In newer versions of Firefox OS, Rocketbar is enabled automatically and cannot be turned off.

+
+

Contacts debugging output in adb

+

Enabling this option adds debugging information about contacts to the adb logs (error logs from the console can be accessed using adb logcat | grep "Error" in the Terminal.)

+

Progressive paint (was Layers: Progressive paint)

+

This was introduced to help with debugging of the Async Panning/Zoom module (APZ) during its implementation. Now APZ implementation is complete, this option is deprecated, and will be removed from future versions (see {{ Bug("1003228") }}).

+

Displayport Heuristics

+ +

These options were introduced to help with debugging of the Async Panning/Zoom module (APZ) during its implementation, specifically to allow QA to experiment with different repainting heuristics to see which resulted in the least amount of checkboarding.. Now APZ implementation is complete, these options are deprecated, and will be removed from future versions (see {{ Bug("1003228") }}).

+

Keyboard layouts

+

In addition to the developer-specific options listed above, Firefox OS < 1.4's developer settings featured keyboard layout options. These let you toggle on and off the then-experimental Chinese input methods:

+

+

As of Firefox 1.4, these options have been removed. This is because the Chinese keyboard layout implementations (zhuyin and pinyin) have now been completed.

+
+

Note: For other keyboard layouts still under development, such as Japanese, we now have a build-time config to opt them in.

+
+

 

diff --git a/files/bn/archive/b2g_os/debugging/firefox_os_crash_reporting/index.html b/files/bn/archive/b2g_os/debugging/firefox_os_crash_reporting/index.html new file mode 100644 index 0000000000..ca91eea75e --- /dev/null +++ b/files/bn/archive/b2g_os/debugging/firefox_os_crash_reporting/index.html @@ -0,0 +1,115 @@ +--- +title: Firefox OS crash reporting +slug: Archive/B2G_OS/Debugging/Firefox_OS_crash_reporting +translation_of: Archive/B2G_OS/Debugging/Firefox_OS_crash_reporting +--- +
+

এই পেজটি বোঝায় কিভাবে  ফায়ারফক্স  ওস এ ক্রাশ রিপোর্টিং নিয়ন্ত্রণ করতে হয় , ক্রাশ রিপোর্ট বের করা এবং ক্রাশ ফোর্স করতে হয়  ।

+
+ +
+

নোট : বেশিরভাগ ফায়ারফক্স ডেস্কটপ অবদানকারীরা  " about:crashes to retrieve crash রিপোর্টস" (আরো জানতে ক্রাশ রিপোর্টিং পড়ুন ) ব্যবহারে অভ্যস্ত , কিন্তু  এটি ফায়ারফক্স ওস-এ  সাপর্টেড  নয়  ।

+
+ +

আপনি কোনকিছু করার আগে : 

+ +

নিচের সব নির্দেশনাগুলি  ধরে নিবে যে আপনি ইতিমধ্যে  নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করেছেন :

+ +
    +
  1. নিশ্চিন্ত করে রাখুন যে  আপনার ডিভাইস এ  রিমোট  ডীবাগিং চালু আছে এবং ADB  ইস্টাল করা আছে । এটি আপনার কম্পিউটার কে  আপনার ডিভাইস এর সাথে যোগাযোগ রাখতে দেয় 
    2. +
  2. ইউএসবি দ্বারা আপনার কম্পিউটার এর সাথে আপনার ডিভাইস কে সংযুক্ত করুন।
    3. +
  3. ডেস্কটপ ফায়ারফক্স এ ADB Helper Add-on ইনস্টল করুন কোনো দরকারী পোর্ট ফরওয়ার্ডিং হ্যান্ডেল করবার জন্যে  ।
    4. +
+ +

বিজিবাক্স  ইনস্টল করা

+ +

আপনাকে পরামর্শ দেয়া হচ্ছে আমাদের বিজিবাক্স  ইনস্টল করতে ইউটিলিটি  যেটি এডিবি-তে  কিছু  সাহায্যকারী কমান্ড যোগ করে ফায়ার ফক্স ওস টেস্ট ও ডিবাগ করতে সহায়তা করতে।

+ +

এটি ইনস্টল করার জন্যে আপনার ডিভাইসটি জাগ্রত আছে কিনা এ ব্যাপারে নিশ্চিত হয়ে  :
+  

+ +
    +
  1. বিজিবাক্স  ডাউনলোড করুন ।
    2. +
  2. টারবালটি সাছন্দমত জাগায় আনজিপ করুন  ।
    3. +
  3. cd into the resulting busybox-b2g directory
    4. +
  4.  ./install.sh - রান করুন ইনস্টল করার জন্যে।
    5. +
+ +

আপনি যাতে পিং এর মতো কমান্ডগুলি সরাসরি চালাতে পারেন , বিজিবাক্সের সমস্ত ইউটিলিটিগুলি /system/bin -এ সিমলিঙ্ক পায়। কিছু সাধারণ কমান্ডসমুহ নিচে দেয়া হল ঃ

+ +
adb shell ping 8.8.8.8   => পিং কমান্ড।
+
+adb shell ifconfig wlan0 => tx/rx বাইট চেক করার জন্যে।
+
+adb shell cat /proc/net/route    => ডিফাল্ট রুট চেক করার জন্যে।
+
+adb shell iptables -t nat -nvL   => প্যাকেটসমুহ এপ্লিকেশন থেকে আইপি লেয়ারে পাঠানো হয়েছে কিনা চেক করার জন্যে, 'Chain OUTPUT'চেক করার জন্যে  (policy ACCEPT 2 packets, 168 bytes)
+ +

ফায়ারফক্স ওএস চালিত কন যন্ত্রে ক্র্যাশ রিপোর্ট পাওয়া

+ +

We have created a Firefox OS app to allow us to retrieve crash reports — About Crashes — which works on version 1.2+.
+
+ To install it on your device, follow these steps:

+ +
    +
  1. About Crashes is a certified app, so you need to enable debugging of certified apps (see instructions for App Manager, and WebIDE.)
    2. +
  2. Download the About Crashes app zip file from the above link and extract it locally.
    3. +
  3. In Firefox desktop, open the App Manager or WebIDE (depending on which version of Firefox you are using) under Tools > Web Developer.
    4. +
  4. In either tool, add the About Crashes app as a packaged app (App Manager: click on the plus next to the Add Packaged App option, WebIDE: Open the left hand dropdown menu and select Add Packaged App...)
    5. +
  5. Connect your device to App Manager/WebIDE (App Manager: find it listed at the bottom of the UI, WebIDE: Find it under Select Runtime.)
    6. +
  6. Install and open the app on the device (App Manager: Press the app's Update button, WebIDE: press the "Play" button (Install and Run))
    7. +
  7. On the device, press the Update button inside About Crashes to see your most recent crashes.
    8. +
+ +

Getting crash ids from the command line

+ +

You can get a list of crash ids via the command line by entering the following command into your terminal:

+ +
adb shell ls -l /data/b2g/mozilla/Crash\ Reports/submitted/
+ +

If you have a long list of crashes and want them sorted by date, use this command instead:

+ +
adb shell busybox ls -ltr /data/b2g/mozilla/Crash\ Reports/submitted/
+ +

Getting/verifying the crash report

+ +

To verify a crash report:

+ +
    +
  1. Copy the filename without the extension.
    2. +
  2. Go to Mozilla Crash Reports.
    3. +
  3. Paste the filename without the extension in the upper right hand search box.
    4. +
+ +

This should display the crash report you have submitted.

+ +

How to Force a crash

+ +

To trigger a Firefox OS system crash, enter the following command in your terminal to find out the root process ID :

+ +
adb shell ps |grep b2g
+ +

You'll need to find the line that has root at the start of it, and /system/b2g/b2g at the end. It should something like this:

+ +
root 109 1 191120 66024 ffffffff 400fa330 S /system/b2g/b2g
+ +

The number at the start of the line is the kill process id you'll need to use to kill that process. Run the following command, with the id filled in where the placeholder is:

+ +
adb shell kill -11 [ENTER ID HERE]
+ +

Killing the root process will crash your device.

+ +

How to run GDB script for b2g

+ +
    +
  1. Start the gallery app on the phone, then run the following command in your terminal: + 
    adb shell b2g-ps
    +
    2. +
  2. Note down the pid of the gallery app, then run the following command: + 
    ./run-gdb.sh attach <pid>
    +
    3. +
  3. Cause the crash
    4. +
  4. Run this command: + 
    (gdb) bt
    +
    5. +
diff --git a/files/bn/archive/b2g_os/debugging/index.html b/files/bn/archive/b2g_os/debugging/index.html new file mode 100644 index 0000000000..abd8efd665 --- /dev/null +++ b/files/bn/archive/b2g_os/debugging/index.html @@ -0,0 +1,84 @@ +--- +title: ফায়ারফক্স ওএস এ ডিবাগ করা +slug: Archive/B2G_OS/Debugging +tags: + - B2G + - Debugging + - Firefox OS + - NeedsReview + - QA + - Testing + - কোয়ালিটি অ্যাসুরেন্স + - টেস্টিং + - ডিবাগিং + - ফায়ারফক্স ওএস + - বি২জি +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 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.
+
+ Quickstart guide to Gaia development
+
+ This guide provides a very quick easy guide to developing and debugging Gaia apps, including running Gaia inside desktop Firefox, and debugging Gaia with App Manager.
+
+ 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/bn/archive/b2g_os/debugging/installing_adb/index.html b/files/bn/archive/b2g_os/debugging/installing_adb/index.html new file mode 100644 index 0000000000..112f18b068 --- /dev/null +++ b/files/bn/archive/b2g_os/debugging/installing_adb/index.html @@ -0,0 +1,98 @@ +--- +title: ADB ইনস্টল এবং ব্যবহার +slug: Archive/B2G_OS/Debugging/Installing_ADB +tags: + - ADB + - B2G + - Installation + - ডিবাগিং + - ফায়ারফক্স ওএস + - মোবাইল +translation_of: Archive/B2G_OS/Debugging/Installing_ADB +--- +
+

ফায়ারফক্স ওএস এ ডেভেলপমেন্ট করার সময় বিভিন্ন কাজেই adb (অ্যান্ড্রয়েড ডিবাগ ব্রিজ) ইনস্টলেশন প্রয়োজন হয়। এই নিবন্ধটি ব্যাখ্যা করে কিভাবে তা করা হয়, এবং কিছু সাধারণ দরকারী এডিবি কমান্ড শেয়ার করে।

+
+ +

 এডিবি ইনস্টল

+ +

আপনি ম্যাক, লিনাক্স বা উইন্ডোজের জন্য, অ্যান্ড্রয়েড SDK প্যাকেজের অংশ হিসেবে এডিবি ডাউনলোড ও ইনস্টল করতে পারেন -  Get the Android SDK পেজ দেখুন।

+ +

নতুন লিনাক্স ডিস্ট্রিবিউশন এর রিপোসিটোরিতে ইতিমধ্যে এডিবি আছে। উবুন্টু 12.10 এবং পরবর্তী সংস্করণের জন্য, নিম্নলিখিত কমান্ড ব্যবহার করুন:

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

অথবা ফেডোরা 18/19 এর জন্য:

+ +
sudo yum install android-tools
+ +

আপনার ডিস্ট্রিবিউশন এর এডিবি এর জন্য প্যাকেজ না থাকলে (i.e. উবুন্টু 12.04 বা ফেডোরা 17), আপনাকে আপনার প্ল্যাটফর্মের জন্য Android SDK starter package ইনস্টল করতে হবে (আপনার এডিটি বান্ডল প্রয়োজন হবে, SDK টুল Only অপশন নয়)। তারপর তাদের প্যাকেজ ম্যানেজার চালনা করুন, $SDK_HOME/tools/android,এবং "Android SDK Platform-tools" ইনস্টল করতে GUI ব্যবহার করুন।

+ +

এডিবি ইনস্টল যেখানে খুঁজে বার করুন (সাধারণত usr/bin এ, সম্ভবত adt/platform-tools এর ভিতরে, আপনি এটি কিভাবে ইনস্টল করেছেন তার উপর নির্ভর করে)। আপনার ডিরেক্টরিতে এই PATH যুক্ত করতে ভুলবেন না। এই লাইন যোগ করে এটি করা যাবে

+ +
PATH=$SDK_HOME:$PATH
+ +

অ্যান্ড্রয়েড SDK এর এর অবস্থান সঙ্গে $SDK_HOME প্রতিস্থাপন করে, আপনার ~/.bashrc এ অথবা এর সমতুল্য।

+ +

সমস্যা সমাধান

+ +

আপনি যদি একটি 64 বিট ইনস্টল ব্যবহার করেন, এবং  'adb' চলমান থাকা অবস্থায় ফাইলটি থাকা সত্তেও আপনি যদি একটি "File not found" ভুল পান, আপনি 32 বিট কম্প্যাটিবিলিটি লাইব্রেরি ইনস্টল করতে হবে। APT সঙ্গে এটি করার জন্য:

+ +
sudo apt-get install ia32-libs
+ +

সাধারণ এডিবি কমান্ড

+ +

নিম্নলিখিত বিভাগে কিছু সাধারণ, দরকারী এডিবি কমান্ড ব্যাখ্যা করা হয়েছে।

+ +

B2g প্রক্রিয়া পুনরায় আরম্ভ করা

+ +

b2g একটি XULRunner অ্যাপ্লিকেশনের সমতুল্য যা একটি অ্যান্ড্রয়েড ভিত্তিক কার্নেল ফোনে চলমান। কখনও কখনও আপনি এটি পুনরায় আরম্ভ করতে চাইতে পারেন; অ্যাপ্লিকেশন এনভায়রনমেন্ট এই সমগ্র ডিভাইসটি পুনরায় বুট ছাড়া রিসেট করতে, এটি একটি উপায়। যখন আপনার ডিভাইস আপনার কম্পিউটারে সংযুক্ত থাকে তখন আপনি আপনার টার্মিনালে নিম্নলিখিত লিখে এটা করতে পারেন (অথবা ডিবাগার যখন চলমান):

+ +
adb shell killall b2g
+ +

ডিবাগিং এর জন্য পোর্ট ফরওয়ার্ডিং সক্রিয়করণ

+ +

সহজভাবে পোর্ট ফরওয়ার্ডিং সক্রিয় করার জন্য (উদাহরণস্বরূপ আপনি যদি একটি ফায়ারফক্স ওএস ডিভাইসে ডিবাগ Apps থেকে অ্যাপ্লিকেশন ম্যানেজার ব্যবহার করে থাকেন), আপনার টার্মিনালের মধ্যে নিম্নলিখিত কমান্ড লিখুন:

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

প্রত্যেক সময় যখন ফোন পুনরায় চালু হবে অথবা সংযুক্ত হওয়ার পর পুনরায় বিচ্ছিন্ন হবে, আপনাকে এই কাজ করতে হবে। প্রয়োজনে আপনি সকেট সংখ্যা পরিবর্তন করতে পারেন।

+ +

একটি লোকাল মেশিনে পোর্ট ফরওয়ার্ডিং

+ +

একটি স্থানীয় মেশিনে পোর্ট ফরওয়ার্ড করতে আপনাকে netcat and ssh binaries ডাউনলোড করতে হবে, এবং নিম্নলিখিত কমান্ড সঞ্চালন করুন:

+ +
# this is an awful hack but does in fact work...
+host$ adb forward tcp:7979 tcp:6969
+
+# make some named pipes so that we can make a bidirectional netcat
+phone$ mknod readback p
+host$ mknod readback p
+
+# this sets up a one time use connection to back to the host
+# listen on ports 6969 and 5959 and forward all the information between them
+phone$ ./netcat -l -p 6969 < readback | ./netcat -l -p 5959 > readback
+# connect to port 7979 (port 6969 on the device) and the local ssh server and forward all information between them
+host$ ./netcat localhost 7979 < readback | ./netcat localhost 22 > readback
+
+# now when we connect to port 5959 on the phone it will be like connecting to ssh server on the host
+
+# use the netcat reversal to set up an ssh connection back to the host and forward port 9999 on the device to 'localhost:8000' (this could be anything like 'google.com:80')
+phone$ ./ssh localhost -p 5959 -L 9999:localhost:8000
+ +

এই হোস্ট এর পোর্ট 8000 থেকে ডিভাইস পোর্ট 9999 ফরওয়ার্ড হবে।

+ +

অন্যথায় আপনি একটি ssh সার্ভার ব্যবহার করতে পারেন (dropbear এবং host_key) সরাসরি ডিভাইসে, নিম্নলিখিত কমান্ড ব্যবহার করে:

+ +
phone$ DROPBEAR_PASSWORD=root ./dropbear -p 9000 -F -v -a -r host_key ./dropbear
+host$ adb forward tcp:8888 tcp:9000
+# public key authentication has been hard coded to succeed (make sure you have a public key for ssh to use)
+host$ ssh -vvv root@localhost -p 8888 -R 9999:people.mozilla.org:80
+
+ +

অতিরিক্ত রিসোর্স:

+ + diff --git a/files/bn/archive/b2g_os/debugging/on-device_console_logging/index.html b/files/bn/archive/b2g_os/debugging/on-device_console_logging/index.html new file mode 100644 index 0000000000..e45b26d57b --- /dev/null +++ b/files/bn/archive/b2g_os/debugging/on-device_console_logging/index.html @@ -0,0 +1,64 @@ +--- +title: অন-ডিভাইস কনসোল লগইন +slug: Archive/B2G_OS/Debugging/On-device_console_logging +tags: + - NeedsReview +translation_of: Archive/B2G_OS/Debugging/On-device_console_logging +--- +
+

 আউটপুট এ লগইন করা এবং তা remote web console এর সাহায্যে দেখা ছাড়াও, আপনি ডিভাইস এর onboard file store এ কনসোল আউটপুট দ্বারা লগইন করতে পারবেন ,তারপরlogcat  ইউটিলিটি  এবং USB সংযোগ ব্যবহার করে আপনার computer থেকে লগ আহরণ করতে পারেন । কি ভাবে এই বৈশিষ্ট্য সঠিক ব্যবহার করবেন, কি ভাবে লগইন করবেন এবং কিভাবে লগ গুলো আহরণ করবেন তা এই article জুড়ে বলা হয়েছে।

+
+

কনসোল লগইন সক্রিয় করার পদ্ধতি

+

ফায়ারফক্স ওএস এর production এর সময়ে থেকে , কনসোল লগইন (যেমন {{domxref ("console.log ()")}}) ডিফল্ট রূপে বন্ধ করা থাকে। এটি সক্রিয় করতে , ডিভাইস এর Developer settings এ যান  এবং Console Enabled preference সক্রিয় করুণ।

+

লগইন

+

একবার লগইন সক্রিয় হয়ে গেলে , এটা ডেস্কটপের ফায়ারফক্স ওএস এ লগইন এর মতই কাজ করে । আপনি সহজে object to log text to the console এ {{domxref ("কনসোল")}} এই method ব্যবহার করতে পারেন । যেমন :

+
console.info("Starting up the foobar hardware!");
+var err = foobar.start();
+if (err) {
+  console.error("--Error %d starting up the foobar hardware!", err);
+}
+
+
+

Note: লগইন এর কোন  features আপনার জন্য খোলা তা  সম্পর্কে বিস্তারিত জানতে  {{domxref("console")}} দেখুন। 

+
+

logcat ব্যবহার

+

লগ আউটপুট ফায়ারফক্স ওএস ডিভাইসের মধ্যে সংরক্ষিত হওয়ার ফলে, এবং ডিভাইস এই লগ দেখার জন্য বর্তমানে কোন ইউসার ইন্টারফেস না থাকার কারনে , তা পর্যালোচনার জন্য  একটি computer  এ ওইগুলো আনতে হবে । আপনাকে adb থেকে logcat কমান্ড ব্যবহার করতে হবে, যা Android SDK এর একটি অংশ ( Installing ADB দেখেন)।

+

ভাগ্যক্রমে, একবার adb ইনস্টল ও USB দ্বারা আপনার ডিভাইস কম্পিউটারের সাথে সংযুক্ত করা হয়ে গেলে logcat ব্যবহার করা অনেক সহজ হয়ে যায়, আপনি এই ভাবে  টার্মিনাল থেকে এটি ব্যবহার করতে পারেন:

+
adb logcat
+

যার ফলাফল ডিভাইস এর লগ (/dev/log/system/ এ সংরক্ষিত)টার্মিনাল এ অউটপুট হিসাবে দেখতে পাওয়া , যেমনঃ 

+
I/Vold    (  107): Vold 2.1 (the revenge) firing up
+D/Vold    (  107): Volume sdcard state changing -1 (Initializing) -> 0 (No-Media)
+D/Vold    (  107): Volume emmc state changing -1 (Initializing) -> 0 (No-Media)
+D/Vold    (  107): Volume sdcard state changing 0 (No-Media) -> 2 (Pending)
+D/Vold    (  107): Volume sdcard state changing 2 (Pending) -> 1 (Idle-Unmounted)
+W/Vold    (  107): Duplicate state (1)
+W/Vold    (  107): Duplicate state (1)
+W/Vold    (  107): Duplicate state (1)
+W/Vold    (  107): Duplicate state (1)
+W/Vold    (  107): Duplicate state (1)
+W/Vold    (  107): Duplicate state (1)
+W/Vold    (  107): Duplicate state (1)
+W/Vold    (  107): Duplicate state (1)
+W/Vold    (  107): Duplicate state (1)
+W/Vold    (  107): Duplicate state (1)
+W/Vold    (  107): Duplicate state (1)
+W/Vold    (  107): Duplicate state (1)
+W/Vold    (  107): Duplicate state (1)
+D/Vold    (  107): Volume emmc state changing 0 (No-Media) -> 2 (Pending)
+D/Vold    (  107): Volume emmc state changing 2 (Pending) -> 1 (Idle-Unmounted)
+D/VoldCmdListener(  107): volume list
+D/VoldCmdListener(  107): volume mount sdcard
+I/Vold    (  107): /dev/block/vold/179:20 being considered for volume sdcard
+D/Vold    (  107): Volume sdcard state changing 1 (Idle-Unmounted) -> 3 (Checking)
+W/Vold    (  107): Skipping fs checks
+I/Vold    (  107): Device /dev/block/vold/179:20, target /mnt/sdcard mounted @ /mnt/secure/staging
+D/Vold    (  107): Volume sdcard state changing 3 (Checking) -> 4 (Mounted)
+D/VoldCmdListener(  107): volume mount emmc
+I/Vold    (  107): /dev/block/vold/179:33 being considered for volume emmc
+D/Vold    (  107): Volume emmc state changing 1 (Idle-Unmounted) -> 3 (Checking)
+W/Vold    (  107): Skipping fs checks
+I/Vold    (  107): Device /dev/block/vold/179:33, target /mnt/emmc mounted @ /mnt/secure/staging
+D/Vold    (  107): Volume emmc state changing 3 (Checking) -> 4 (Mounted)
+
+etc.
+
diff --git a/files/bn/archive/b2g_os/debugging/setting_up/index.html b/files/bn/archive/b2g_os/debugging/setting_up/index.html new file mode 100644 index 0000000000..17e33f0f63 --- /dev/null +++ b/files/bn/archive/b2g_os/debugging/setting_up/index.html @@ -0,0 +1,37 @@ +--- +title: Setting up to debug Firefox OS using Firefox developer tools +slug: Archive/B2G_OS/Debugging/Setting_up +translation_of: Archive/B2G_OS/Debugging/Setting_up +--- +
+

ফায়ারফক্স  ও এস সমর্থন করে দূরবর্তী একই ডিবাগিং চুক্তিপত্র যা ফায়ারফক্স মোবাইল অ্যানড্রয়েডের উপর  সমর্থন করে।এটার মানে তুমি ফায়ারক্স ডেভেলপমেন্ট টুলস ব্যবহার করতে পারো ফায়ারফক্স ডিভাইস অথবা এর থেকে  উন্নত এর উপর গাইয়া অ্যাপলিকেশন চালিয়ে ডিবাগ করতে তোমার ফায়ারফক্স ডিভাইসের উপর অথবা  তোমার ফায়ারফক্স ডিভাইস সিমুলেটরের উপর ডিবাগ করতে,তোমার দরকার ফায়ারফক্স ১৮ অথবা পরেরটি ; আরো ,কিছু সেটিংস আছে যা তোমার ডেক্সটপ ব্রাউজারের কনফিগারেশনের এবং তোমার ফায়ারফক্স ও এস ডিভাইসের অথবা সিমুলেটরের পরিবর্তনে দরকার পরে।

+
+
+

নোটঃ যদি  তুমি ফায়ারফক্স ওএস ডিভাইসের উপর  অ্যাপস ডিবাগ করতে চাও, এবং  তুমি ফায়ারফক্স   ১.২ চালাচ্ছ  তোমার সবচেয়ে ভালো  অপশন  এখনি   App Manager ব্যবহার করা ।

+
+

ফায়ারফক্স ডেক্সটপ

+

তোমাকে নিশ্চিত হতে হবে যে তোমার ফায়ারফক্স ১৮ আর গঠন আছে অথবা পরে হবে ত্রুটি বিচ্যুতি দূর করার যন্ত্র।যদি তোমার ফায়ারফক্সের এইমাত্রের কপি না থেকে ,ডাউনলোড কর সর্বশেষ  Nightly গঠন সকল সর্বশেষ বিষয়ের সুবিধা পেতে।

+

একদা তুমি তোমার কম্পিউটারে ফায়ারফক্সের একটি উপযুক্ত মাধ্যমের জন্য ছুটেছ, টাইপ কর, about:config ইউ আর এল বার এবং পরিবর্তন করো devtools.debugger.remote-enabled এর মানের  true তে।তারপরে তোমার ফায়ারফক্সের ত্রুতিবিচ্যুতি দূর করার ক্ষমতা পেতে পুনরায় শুরু করতে হবে।ফায়ারফক্স নতুন করে শুরু করার পরে,ওয়েব ডেভলপের মেনুর নয়ুন একটি অপ্শন হবে,উপাদান>সংযোগ ...

+

ডিবাগিং এর ক্ষমতা অর্জন

+

যখন  Firefox OS Simulatorব্যবহার করা হয়(অথবা  বি ২জি  ডেক্সটপ),ডিবাগিং সেট করা খুব সহজ । তোমাকে সামনের দিকে অগ্রসরের জন্য কোন স্থানের দরকার নেই যেমন তুমি কর যখন একটি  বাস্তব ডিভাইসের ডিবাগিং হয়।সাধারণভাবে তোমার ডিভাইসের Developer settings  খোলো এবং রিমুট ডিবাগিং এর   ক্ষমতা অর্জন করো।

+
+

 নোটঃ  ১০জানুয়ারী ,২০১৩  পর্যন্ত এতা ফায়ারফক্স   ও এস  ডিভাইসের  উপর কোনো কাজ করেনি।তারিখ অনুসারে,ফায়ারফক্স  ও এস ডিভাইস গঠন ডিবাগিং এ  অক্ষম হয়েছে।আনুষ্ঠানিকভাবে একটি  পথের তৈরি হবে তোমার নিজের গঠনের এটি  পুনরায় ক্ষমতা অর্জন  গঠন করতে,কিন্তু এটি এখন ও বিদ্যমান নয়।ঐটা ঘটার পরে  এই  দলিল  হালনাগাদ  হয়ে থাকবে।  আর ও যোগে ,প্রক্রিয়ার বাইরে বন্ধ করার  মূল্য  দেয়ার সমর্থন  সরিয়ে ফেলা হয়েছে।বর্তমানের জন্য ,ফায়ারফক্স ও এস সিমুলেটরে  তোমার দরকার  তোমার ডিবাগিং করা।

+
+

যদি একটি  বাস্তব ফায়ারফক্স ওএস ডিভাইস  ব্যবহার করা হয়, Developer settings   খোলো  এবং :

+

      .  রিমুট ডিবাগিং অন করা।

+

     . আউট অফ প্রসেস  সমর্থন বন্ধ করা, {{bug(797627)}} ঠিক না হওয়ার পর্যন্ত। তা না করলে ,কেবল নিয়মের স্ক্রিপ্টগুলো ডিবাগ হতে পারে।

+
+

  নোটঃযদি  তুমি  তোমার ডিভাইস ফ্ল্যাস কর , তোমার  এইসব  বাহ্যিক আকার পরিবর্তনের  আবার করা  দরকার পরবে।

+

  এখন তুমি  use the debugger  করতে প্রস্তুত  !

+
+

একটি ফায়ারফক্সের ও এস ডিভাইসের ফ্রেমের গঠনের জন্য সক্ষম

+

 

+

ফায়ারফক্স  ও এস গঠনের উৎপাদনে,লগিং এর ফ্রেম গঠন (উদাহরণ হিসেবে{{domxref("console.log()")}})  ভুলের  মাধ্যমে অক্ষম হয়েছে।. এটিকে সক্ষম করতে,তোমার ডিভাইসেরI Developer settings এর কাছে যাও এবং ফ্রেমের গঠন সক্ষমকে সক্ষম করে।

+

 

+

নোটঃ কিভাবে ফায়ারফক্স ও এস  এ লগিং গঠন  ব্যবহার করতে হয় সে  সমন্ধে  আরো জানার জন্যOn-device console logging পড়ো ।

+

আরো দেখো

+ diff --git a/files/bn/archive/b2g_os/debugging/taking_screenshots/index.html b/files/bn/archive/b2g_os/debugging/taking_screenshots/index.html new file mode 100644 index 0000000000..89d088e4de --- /dev/null +++ b/files/bn/archive/b2g_os/debugging/taking_screenshots/index.html @@ -0,0 +1,66 @@ +--- +title: স্ক্রীনশট নেয়া +slug: Archive/B2G_OS/Debugging/taking_screenshots +tags: + - Debugging + - Firefox OS + - NeedsReview + - Screenshots +translation_of: Archive/B2G_OS/Debugging/taking_screenshots +--- +
+

Taking screenshots of your application can be useful in many circumstances, for example showing your work to a client, or when publishing your app on the Marketplace. This article explains how to take screenshots on your Firefox OS phone.

+
+
+

টীকা: এন্ড্রয়েড ডেভেলপারগন এটা আগেই জেনে থাকবেন। ধাপ গুলো একই।

+
+

আপনার ফোন তৈরি

+
    +
  1. On your phone, go to the Developer Settings and check Remote Debugging & Console Enabled.
    2. +
  2. Make sure you phone has ADB installed and working.
    3. +
  3. Connect your phone to your computer via USB.
    4. +
+

 একটি স্ক্রীনশট নেয়া

+

You now have four choices: using the Terminal, using DDMS in Eclipse, using the dedicated button combination on the phone, or using the App Manager.

+

টার্মিনাল

+

Open a terminal window, then enter the follwing three commands:

+
    +
  1. Take the screenshot using the following command (you can change screenshot.png if you want to call it something else):
    + adb shell screencap -p /sdcard/screenshot.png
    2. +
  2. Pull the picture onto your computer:
    + adb pull /sdcard/screenshot.png
    3. +
  3. Remove the screenshot from your device:
    + adb shell rm /sdcard/screenshot.png
    4. +
+

Alternatively, you can use ffmpeg:

+
    +
  1. Make sure you have ffmpeg installed: +
      +
    1. On Mac, if you use MacPorts, you can do this with sudo port install ffmpeg. For homebrew, do brew install ffmpeg.
      2. +
    2. On Linux (Ubuntu/Debian), use sudo apt-get install ffmpeg.
      3. +
    +
    2. +
  2. cd into the B2G/gaia directory.
    3. +
  3. Use the make screenshot command to take a screenshot.
    4. +
  4. You now have a screenshot called screenshot.png.
    5. +
+

DDMS

+

Open Eclipse.

+
    +
  1. Open DDMS: Window > Open Perspective > Other > DDMS.
    2. +
  2. On the left side panel, in the Devices tab, click the Screen capture button.
    3. +
  3. A new window appears with several options; click on Save button to save your screenshot.
    4. +
+
+

Note: To learn more about DDMS, have a look at the DDMS documentation .

+
+

ফোনার বাটনের কম্বিনেশন

+
    +
  1. Simultaneously hold down the Home and Power buttons for a few seconds. This takes a screenshot, which is saved in your Gallery.
    2. +
  2. Copy the picture from your SDCard to your computer using whatever method suits you best.
    3. +
+

 এপ ম্যানেজার/সিমুলেটর

+
    +
  1. Go to the App Manager, connect to your phone, and navigate to the Device tab on the left.
    2. +
  2. Click on the Screenshot button above Installed Apps.
    3. +
diff --git a/files/bn/archive/b2g_os/debugging/testing_in_a_privileged_context/index.html b/files/bn/archive/b2g_os/debugging/testing_in_a_privileged_context/index.html new file mode 100644 index 0000000000..bb70d4aefa --- /dev/null +++ b/files/bn/archive/b2g_os/debugging/testing_in_a_privileged_context/index.html @@ -0,0 +1,67 @@ +--- +title: 'Testing in a privileged context: Shipping your own Gaia apps' +slug: Archive/B2G_OS/Debugging/Testing_in_a_privileged_context +tags: + - Apps + - B2G + - Firefox OS + - Security + - Testing +translation_of: Archive/B2G_OS/Debugging/Testing_in_a_privileged_context +--- +

{{Previous("Mozilla/Firefox_OS/Debugging/Intercepting_traffic_using_a_proxy")}}

+
+

যেহেতু আপনি দেখতে পারেন ,বাতিল জাভা স্ক্রীপ্ট আপনাকে   all the shiny WebAPIs  এর সম্পুর্ন সুবিধা দিবে না।এই অ্যাপের কারনে একটি বিশেষ অ্যাপি ব্যবহার করতে ,ইহা রিকুয়েস্ট করে থাকে ঐ অ্যাপির সুবিধা পাওয়ার জন্য  ইহার manifest তে।এই অনুচ্ছেদ আগে তাদের মার্কেটপ্লেসে জমা দেয়ার আগে আপনাকে অ্যাপ ব্যবহারের সুবিধা দিবে পরীক্ষা করার জন্য।

+
+

বর্তমানে চলমান অ্যাপস মেটাডাটা এবং মেনিফেস্ট বিভিন্নতার মাঝে রাখতে ,আপনি এর মত ব্যবহার করতে পারেনঃ

+
navigator.mozApps.getSelf().onsuccess = function(e) {
+  appself = e.result;
+}
+

বিভিন্ন অ্যাপের নিজের মধ্যে এই অ্যাপস মেটাডাটার সমুক্ষীন হন।

+

একটি একই নোটে,যদি আপনি ভিন্ন অ্যাপের অনুমতির জন্য দেখতে চান, টেস্ট অ্যাপে "Permissions" তে এক নজর দেখুন ,যা আসে আপনার b2g-desktop টেস্টিং গঠনের সাথে ;এটি সকল বর্তমানে ইন্সটল্ড অ্যাপের জন্য অনুমতি এনে দিবে।

+

কিছু বর্তমান ওয়েব অ্যাপি আছে যা সবসময় যেকোন অ্যাপে পাওয়া যায় না। এইসব অ্যাপি ব্যবহার করতে, আপনাকে আপনার একটি অ্যাপ ইন্সটল করতে হবে উচ্চ সুবিধার সাথে(এগুলো হল সার্টিফাইড অ্যাপ) ।এটা আপনি নিজে করুন ,আপনাকে একটি কাস্টম ভার্সন করতে হবে যা  top b2g layer এর,গায়া। প্রয়োজনীয় git টি কাজ করে এবং make পরিবেশ কাজ করে থাকে।দেখুন  Firefox OS build prerequisites আরো বেশি Firefox OS তে গঠন পরিবেশের জন্য।

+

আপনাকে এই ক্ষেত্রে Firefox OS প্রস্তুত করার প্রয়োজন পরেনা,কেবল গায়া।চলুন দেখি কিভাবে তারা কাজ করে থাকে ।

+

গায়া ডাউনলোডিং এবং গঠন

+

প্রথমে আপনাকে গায়া ডায়নলোড করতে হবে তারপরে আপনাকে ইহা গঠোন করতে হবে।ইটা একটী প্রোফাইল তৈরি করতে হবে যা আপনি b2g desktop এরসাথে লোড করতে পারেন।এগুলো নিচের নির্দেশ অনুযায়ী ব্যবহার করে প্রস্তুত করা যায়ঃ

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

ওয়ার্নিংঃগায়া গঠন করুন  প্রথমবারের জন্য যা XULRunner  ডাউনলোড করতে প্রয়োজন যা প্রায় ৫০০এম বি,সুতরাঙ্গিহা নেয় কিছু সময় এবং অনেক জায়গা ।

+
+

এটা আপনার জন্য একটি স্ট্যান্ডার্ড গায়া গঠন করবে ,সুতরাং এটা কাজ করার জন্য প্রস্তুত।

+

একটি কাস্টম অ্যাপ প্রস্তুত করা

+

যখন XULRunner ডাউনলোড করা হয়ে থাকে ,আমি সুপারিশ করেছিলাম reading the Gaia source code।আপনিও আপনার কাস্টম অ্যাপ প্রস্তুত পাবেন যখন ডাউনলোড প্রক্রিয়ায় উন্নতি হবে।

+

সকল অ্যাপ যা আসে গায়া (সেটিংস,কন্টাক্ট,ব্রাউজার,ইত্যাদি) থেকে সেগুলো অ্যাপ/ডিরেক্টরিতে জমা থাকে ।এটা মনে করা হয়ে থাকে যে আপনার উচ্চ সুবিধা যুক্ত অ্যাপও সেখানে যাবে । অনুচ্ছেদের এই সুবিধায় ,উদাহরন হিসেবে অ্যাপকে বলা হয়ে থাকে allperms যা গিথাবে সবসময় পাওয়া যাবে।

+

আপনার গায়া কোড ট্রিতে অ্যাপ/ডিরেক্টরিতে পরিবর্তন করুন এবং উদাহরন  অ্যাপটি এতে ক্লোন করুনঃ

+
cd apps
+git clone https://github.com/freddyb/allperms.git
+

একদা আপনার প্রথম গায়া গঠন তৈরি হয়ে গিয়েছিল xulrunner-sdk ডাউনলোড করা হয়ে থাকে ,আপনি এটাকে অ্যাপ/ডিরেক্টরিতে  allpermsএরসাথে গায়ার পুনরায় গঠন করতে পারেন।কিন্তু চিন্তা করবেন না,এই গঠন আরো দ্রুত হবে যেহেতু বেশির ভাগ জিনিস ইতিমধ্যে সম্পুর্ন হয়ে গেছে।এখন কেবল করবেনঃ

+
make
+

Load B2G desktop ব্যবহার করে নতুন প্রোফাইল

+
B2G Desktop  আসে দুটি নতুন এক্সেকিউবল নিয়েঃ b2g  এবংand b2g-bin:আমরা পরেরটি জানি,যেহেতু এটি বিশেষভাবে দেখানোর জন্য লাইন আর্গুমেন্ট।
+
+

নোটঃদেখুন Using the B2G desktop client , B2G Desktop অ্যাপলিকেশন নিয়ে আরো তথ্যের জন্য

+

b2g এক্সেকিউবল লোড করুন, the -profile অপ্সহন প্রদান করে গায়া প্রোফাইল পথ দিয়ে যা আপনি কেবল তৈরি করেছেন।

+
+

Linux

+
$ b2g-bin -profile /path/to/gaia/profile
+
+

Mac OS X

+

Mac OS X তে,শুরু করার নির্দেশ যা গায়া ডিরেক্টরি থেকে (মনে করা হয়ে থাকে আপনি ইন্সটল করবেন B2G স্ট্যান্ডার্ড অ্যাপলিকেশন ফোল্ডারে) নিচের মতঃ

+
$ /Applications/B2G.app/Contents/MacOS/b2g-bin -profile /path/to/gaia/profile
+
+

Windows

+

TBD

+

What to expect

+

মনে করা হয় যে এটা কাজ ছে ,আপনাকে lock screen দেখা উচিত:

+

+

 command-line options available হল কিছু দরকারি জিনিস যা ব্যবহার করা হয়ে থাকে B2G Desktop তে।

+
+

নোটঃএই প্রোফাইল শুরু হয়ে থাকে  default settings এর সাথে আবার । কোন কাস্টমাইজেশন আপনার আছে যাতে আপনার টেসটিং সেট আপ  আবারো হবে ;এটি আরো যোগ করবে  Marionette এর কনফিগারেশন এবং সার্টিফিকেট।

+
+

Done

+

আপনারYour allpermsঅ্যাপ এখন ইন্সটল করা উচিত এবং সকল সম্ভব অনুমতি নেয়া হয়ে থাকে।

+

এখন আপনাকে একমাত্র বারবার বলা হয়ে থাকে Marionette ধাপে  Debugging and security testing with Firefox OS  থেকে একটি টেস্টিং পরিবেশ এর জন্য যা WebAPIs এর সুবিধা হয়ে থাকে ।

+

{{Previous("Mozilla/Firefox_OS/Debugging/Intercepting_traffic_using_a_proxy")}}

diff --git a/files/bn/archive/b2g_os/developer_preview_phone/index.html b/files/bn/archive/b2g_os/developer_preview_phone/index.html new file mode 100644 index 0000000000..5bfa7591e2 --- /dev/null +++ b/files/bn/archive/b2g_os/developer_preview_phone/index.html @@ -0,0 +1,20 @@ +--- +title: একটি ডেভেলপার প্রিভিউ ফোনকে হালনাগাদ করা +slug: Archive/B2G_OS/Developer_preview_phone +translation_of: Archive/B2G_OS/Phone_guide +--- +
+

দ্রষ্টব্য: গিকসফোন সহ সকল ডেভেলপার প্রিভিউ ফোনকে হালনাগাদ করা এবং সাজানোর জন্য একটি নতুন এবং আরো বিস্তারিত গাইড রয়েছে । এর জন্য , আপনার ফায়ারফক্স ওএস ডেভেলপার প্রিভিউ ফোন / গিকসফোনকে হালনাগাদ করুন এবং সাজান  - এই নিবন্ধটি আপনার পড়া উচিত ।

+
+

আপনার যদি  গিকসফোনের  ডেভেলপার প্রিভিঊ ফোন থেকে থাকে এবং আপনি যদি আপনার ফোনের বিদ্যমান সংস্করণটিকে হালনাগাদ করতে চান , তাহলে নিচের নির্দেশনাগুলো অনুসরণ করুন ।এই নির্দেশনা গুলো শুধুমাত্র গিকসফোন কিওন এবং গিকসফোন পিক মডেলের জন্য কাজ করবে ।

+
    +
  1. আপনার অন্তত ৫০ ভাগ ব্যাটারি রয়েছে , এটি নিশ্চিত করুন ।এটা অত্যন্ত গুরুত্বপূর্ন , কেননা হালনাগাদ করার সময় যদি আপনার ফোন বন্ধ হয়ে যায় , এটিকে আপনার ফেরত দেওয়ার প্রয়োজন হতে পারে ।
    2. +
  2. ইউএসবির সাহায্যে ফোনটি যুক্ত না থাকা অবস্থায় , "সেটিংস" নির্বাচন করুন , এরপর "ডিভাইসের তথ্য" , এরপর "আরো তথ্য" , এরপর "ডেভেলোপার এবং এরপর রিমোট ডিবাগিং এ আলতো টোকা দিন ।
    3. +
  3. ইউএসবি ড্রাইভার ডাউনলোড করুন এবং এটিকে আনজিপ করুন ।এটিকে আপনি কোথায় ডাউনলোড করেছেন , তা মনে রাখুন কেননা পরে এটার প্রয়োজন হতে পারে ।
    4. +
  4. একটি ইউএসবি ক্যাবল ব্যবহারের মাধ্যমে এটিকে আপনার কম্পিউটারের সাথে যুক্ত করুন । আপনি যদি উইন্ডোজ ব্যবহারকারী হয়ে থাকেন , এটি হয়ত আপনাকে কিছু ড্রাইভার ইন্সটল করার জন্য বলতে পারে । উইন্ডোজ আপডেটের সাহায্যে যদি ড্রাইভার না পাওয়া যায় , তাহলে ৩ নং ধাপে আপনার আনজিপ করা ফোল্ডারটিকে ব্যবহার করতে পারেন।
    5. +
  5. আপনার ফোনের (কিওন অথবা পিক) জন্য সঠিক ইমেজ ফাইলটি ডাউনলোড করুন । গিকসফোনের ডাউনলোড পেইজএ সকল ধরণের ইমেজ রয়েছে
    6. +
  6. ইমেজ ফাইলটিকে একটি ফোল্ডারে আনজিপ করুন , ফোল্ডারে প্রবেশ করুন এবং স্ক্রিপ্টটিকে চালান। লিনাক্সের জন্য Flash.sh, উইন্ডজের জন্য Flash.bat এবং ম্যাকিনটসের জন্য flash_mac.sh (আপনার অ্যান্ড্রয়েড SDK প্রয়োজন হতে পারে) ।
    7. +
  7. ডিভাইসটির রিবুট হওয়া এবং এরপর প্রথম বারের সেটআপ না দেখানো পর্যন্ত অপেক্ষা করুন ।
    8. +
+


+ যদি আপনার কোন সমস্যা থাকে , তাহলে সাহায্য পাওয়ার জন্য আপনি  গিকসফোন ফোরামে  পোস্ট করতে পারেন । 

diff --git a/files/bn/archive/b2g_os/developing_firefox_os/customizing_the_b2g.sh_script/index.html b/files/bn/archive/b2g_os/developing_firefox_os/customizing_the_b2g.sh_script/index.html new file mode 100644 index 0000000000..f082a82fe5 --- /dev/null +++ b/files/bn/archive/b2g_os/developing_firefox_os/customizing_the_b2g.sh_script/index.html @@ -0,0 +1,44 @@ +--- +title: b2g.sh স্ক্রিপ্ট নিজের মত করে সাজানো +slug: Archive/B2G_OS/Developing_Firefox_OS/Customizing_the_b2g.sh_script +translation_of: Archive/B2G_OS/Developing_Firefox_OS/Customizing_the_b2g.sh_script +--- +
+

ফোনে, বি২জি অ্যাপ্লিকেশনটি (যা ফায়ারফক্স ওএস- এর এপিআইগুলোকে অন্যগুলোর ভিতর প্রদান করে) শুরু হয় /system/bin/b2g.sh স্ক্রিপ্টের মাধ্যমে। ফায়ারফক্স ওএস- এর ব্যবহার পরিবর্তন করার জন্য আপনি এই স্ক্রিপ্টটি নিজের মত করে সাজাতে পারবেন, এবং সেটা কিভাবে করবেন তা এই পরিচ্ছেদে বর্ণিত রয়েছে।

+
+

ইন্ভাইরোন্মেন্ট ভেরিয়েবেলগুলো স্থাপন করুন

+

যদি আপনি বি২জি চালানোর জন্য একটি ইন্ভাইরোন্মেন্ট ভেরিয়েবেল স্থাপন করতে চান, তাহলে আপনি নিম্নক্তগুলো অনুসরণ করতে পারেন:

+
adb shell stop b2g
+adb shell "export ENV_VAR=value && /system/bin/b2g.sh"
+
+

যদি আপনি একই ইন্ভাইরোমন্ট ভেরিয়েবেলগুলো সব সময় ব্যবহার করতে চান, তাহলে আপনি b2g.sh সম্পাদন করতে পারেন যা পরের শাখাতে বর্ণিত রয়েছে।

+

b2g.sh সম্পাদন

+

ডিবাগিং এর জন্য, আপনি চাইলে তথ্যের মধ্যে ঢোকার অথবা অন্যথা প্রভাবিত করতে কিভাবে b2g প্রোগ্রাম চলে তার জন্য ইন্ভাইরোন্মেন্ট ভেরিয়েবেলগুলো স্থাপন করতে পারেন। আপনি ইহা করতে পারেন b2g.sh স্ক্রিপ্ট সম্পাদনের মাধ্যমে। ফোনে ফাইলটি সম্পাদন করার জন্য সেখানে কোন টুলস নেই, অতএব আপনাকে প্রথমে ইহা আপনার কম্পিউটারে কপি করতে হবে।

+
    +
  1. ফোনটিকে আপনার কম্পিউটারের সাথে সংযুক্ত করুন, একটি টার্মিনাল উইন্ডো খুলুন, এবং স্ক্রিপ্ট সম্পাদন করতে অনুসারিত আদেশ নির্বাহ করুন: + 
    adb pull /system/bin/b2g.sh
    +
    2. +
  2. আপনার ইচ্ছানুযায়ী পরিবর্তন আনতে স্ক্রিপ্টটি সম্পাদন করুন। উদাহরণ সরূপ, ধরুন আপনি কিছু লগিং আউটপুট (যাতে একটি ডিবাগ বানানো দরকার হয়) দেখতে চাচ্ছেন, তারপর আপনি হয়তো কিছু যুক্ত করতে চাচ্ছেন যেমন: + 
    export NSPR_LOG_FILE=/data/local/tmp/mylog.txt
+export NSPR_LOG_MODULES=Layers:5
+
    +
    3. +
  3. আপনার হালনাগাদ b2g.sh স্ক্রিপ্টটি ফোনে সেভ করতে অনুসারিত আদেশগুলো চালান এবং পুনরায় b2g চালু করুন: + 
    adb shell stop b2g
+adb remount
+adb push b2g.sh /system/bin
+adb shell chmod 0755 /system/bin/b2g.sh
+adb shell start b2g
+
    +
    4. +
+
+

Note: /data/local/tmp হল ফাইলসিস্টেম এর শুধুই একমাত্র জায়গা যেখানে বিষয়বস্তু প্রক্রিয়াগুলো দ্বারা লেখাযোগ্য।

+
+

আরও দেখুন

+ +

 

diff --git a/files/bn/archive/b2g_os/developing_firefox_os/customizing_the_keyboard/index.html b/files/bn/archive/b2g_os/developing_firefox_os/customizing_the_keyboard/index.html new file mode 100644 index 0000000000..655da777e7 --- /dev/null +++ b/files/bn/archive/b2g_os/developing_firefox_os/customizing_the_keyboard/index.html @@ -0,0 +1,66 @@ +--- +title: ফায়ারফক্স ওএস অ্যাপ্লিকেশনের মধ্যে কীবোর্ড কাস্টমাইজ +slug: Archive/B2G_OS/Developing_Firefox_OS/Customizing_the_keyboard +translation_of: Archive/B2G_OS/Developing_Gaia/Customizing_the_keyboard +--- +
+

এই ডকুমেন্ট ব্যাখ্যা করে যে কাস্টম কীবোর্ড  কিভাবে তাদের লেআউট  নিজস্ব ভাষা/হস্তলিপির মাধ্যমে ফায়ারফক্স ওএস'র উপর ধারণ করে ।

+
+

গায়া কীবোর্ড অ্যাপ্লিকেশন এবং সিস্টেম স্থাপত্য-এর অবস্থা

+

দুটো গুরুত্বপুর্ন বৈশিষ্ট্য ফায়ারফক্স ওএস , যেটা অক্টোবর ২০১৩-তে বাস্তবায়িত করা হয়েছে।

+ +

একটি নতুন কীবোর্ড লেআউট-এর সাথে উপরে আসবে, আপনি একটি লেআউটে একটি করে গায়া ফাইল রাখতে পারবেন, কীবোর্ড অ্যাপ্লিকেশন বানানো হয় যা একটি কনফিগে ব্যবহার করে, বা আপনার নিজের কীবোর্ড অ্যাপ্লিকেশন-এর সাথে আসে যেটা ফোন-এ ইন্স্টল করে রাখতে পারেন।

+

কিভাবে একটি কীবোর্ড আপ্লিকাশন বানাতে হবে

+

আপনি একটি টেমপ্লেট হিসেবে গায়া-এর বিল্ট-ইন কীবোর্ড অ্যাপ্লিকেশন ব্যবহার করতে পারেন, বা এটা শাখাবিভক্ত করতে পারেন। প্রাথমিক ধারনা হচ্ছে:

+ +

এর পর,আপনি আপনার কিবোর্ড ইনস্টল করতে পারেন, এবং ব্যবহারকারী একটি ইনপুট ক্ষেত্রে নিবদ্ধ হয় যখনই এটা পর্দার নীচে অর্ধেক উপর দেখা যাবে। এ থেকে সমস্যাগুলি মোকাবিলা করা যেতে পারে:

+ +
+

টিবিডি:  নমুনা কোড এবং/অথবা একটি ছোট টেমপ্লেট অ্যাপ্লিকেশন দেয়।

+
+

কিভাবে গায়া কীবোর্ড আপ্লিকেশনে আপানার টেমপ্লেটে কাস্টম লেআউট যোগ করবেন

+

 কীবোর্ডে  অনেক বেশি  তথ্য-এর জন্য খুঁটিনাটী কনফিগার করে দেখুন । ভাষার উপরে আপনি একটি অভিধান যোগ করতে, বা একটি ইন্টারেক্টিভ আইএমই অন্তর্ভুক্ত করতে ( এশিয়ার ভাষার জন্য ) পারেন।

+

বানান যাচাই /শব্দ শুপারিশ করুন

+
+

টিবিডি

+
+

এশিয়ান আইএমই

+

পূর্ব এশিয়ান ভাষা (চীনের, জাপানী, আর কোরিয়ান) একটি মোটামুটি জটিল স্ক্রিপ্ট যা হাজার হাজার  চরিত্র সংশ্লিষ্ট  করে  ব্যবহার করা হয়েছে। যেহেতু এত ভাষা  তাই এর ব্যবহারের জন্য একটি হর্ডওয়্যার বা সফ্টওয়ার কীবোর্ড-এর উপরে এত হাজার হাজার চাবি রাখা সম্ভব নয়, এইটি ছোট  করার জন্য ব্যবহারকারি একটি ইন্ডেক্সিং প্রোগ্রাম-এ ইনপুট করেন , অথবা  আইএমই এর চিহ্ন রূপান্তরের সারিতে নির্বাচিত হয় ।
+
+ কিভাবে  চিহ্ন রূপান্তরিত করে  এবং"স্মার্ট" আইএমই পদ্ধতির উপর নির্ভর করে  নির্বাচিত হতে হবে  , বাস্তবায়ন নিজেই, এবং যা প্রায়ই  এনএলপি বিজ্ঞানের, সুযোগ এই নথির বাইরে ।  এটি একটি মোবাইল ডিভাইস যাতে মেমরি সংরক্ষণ করা হয়, উল্লেখ্য IndexedDB, এর  মধ্যে ডাটাবেস অংশ রাখা বাঞ্ছনীয় ।

+

আইএম গায়া কীবোর্ড  অ্যাপটি ইঞ্জিন ইন্টারফেস

+

আপনার কাছে অক্ষর রূপান্তরের জন্য সহজলভ্য একটি আইএমই লাইব্রেরি আছে । আপনার গায়া কীবোর্ড অ্যাপ্লিকেশন-এর মধ্যে নির্দিষ্ট ইন্টারফেস ব্যবহার  করে লেআউট আর আউটপুট চরিত্র থেকে চিহ্ন দরকার হতে পারে । চলতি এপিআই গিটহাব-এর ওপরে লিপিবধ্ধ করা হয় ।

+

আমরা বাস্তবায়ন গায়া-এর মধ্যে এই এপিআই  আরো বিশোধন করতে আমন্ত্রন করি ।

+

আপনার লেআউট-এর সঙ্গে আপনার আইএম ইঞ্জিনের কাজ করুন
+  

+

আপনার আইএম ইঞ্জিন আপনার কীবোর্ড লেআউটের সঙ্গে কাজ করার জন্য:

+
    +
  1. আগের সেকশনের বর্ণনা অনুযায়ী  layout.js একটি নতুন লেআউট  রাখুন ।
    2. +
  2. imEngine প্রপার্টির সঙ্গে আইএম ইঞ্জিন রেফারেন্স করে । আপনার লেআউট সক্রিয় করা হলে, কীবোর্ড অ্যাপটি কীবোর্ড / JS / IMEs / <imEngine> / <imEngine>.js এ অবস্থিত স্ক্রিপ্ট লোড শুরু হবে.
    3. +
  3. প্রাপ্ত স্ক্রিপ্ট গুলি লোড এবং init'd হলে কি / অক্ষর এর এপিআই  গুলি সেট আপ করুন পাঠিয়ে দিন ।
    4. +
  4. আপনি ব্যবহারকারীর ইনপুট প্রতিক্রিয়ায় যাহা চান না কেন , যখন ব্যবহারকারি কীবোর্ড-এর ওপরে যেকোনো চাবি টোকা মারলেন, এটা সাধারনত আইএম ইন্জিনে  পাঠানো যেতে পারে ।
    5. +
+

পরিচিত বাস্তবায়ন

+ +

আলোচনা এবং কিউএ

+

দয়া করে ডেব-গায়া মেইলিং লিষ্ট-এর কাছে বা আইআরসি.মজিলা.ওআরজি -এর ওপরে # গায়া চ্যানেলে আসেন। # মোজিলা- তাইওয়ান হচ্ছে এই বিষয়-এর জন্য সত্যিকার অর্থে চীনা ভাষার চ্যানেল।
+  

diff --git a/files/bn/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html b/files/bn/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html new file mode 100644 index 0000000000..6defe11aa1 --- /dev/null +++ b/files/bn/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html @@ -0,0 +1,135 @@ +--- +title: Firefox OS এর বাগ রিপোর্ট করা +slug: Archive/B2G_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS +tags: + - Bugs + - Bugzilla + - Firefox OS + - QA + - filing + - 'l10n:priority' + - test +translation_of: Archive/B2G_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS +--- +
+

এই নিবন্ধে গায়া, বিটুজি এবং Firefox OS প্রজেক্ট এর বাগ রিপোর্ট সম্পর্কে নির্দেশনা দেয়া হয়েছে।

+
+

বাগজিলা

+

As with most projects in Mozilla, we use Bugzilla for bug and issue status tracking. You can file bugs to bugzilla when you found bugs — we have a separate product for Firefox OS, which contains components for topics falling under Gaia, Gonk and Firefox OS Gecko. You should use this component to file bugs against Firefox OS, B2G, Gaia, etc.

+
+

Note: The Mozilla B2G QA Wiki page also has some useful resources on handling Firefox OS bugs; the most useful pages are Bugzilla Usage and Incoming bug triage for Firefox OS.

+
+

বাগ ফাইল করা

+

To file an effective bug, you can follow the instructions at Bug writing guidelines; you'll also find further details below.

+

আবশ্যিক এবং ঐচ্ছিক ফিল্ড

+

When filing a new bug, some fields are mandatory:

+ + + + + + + + + + + + + + + + + + + + + +
ফিল্ডবর্ণনা
ComponentChoose the category the bug should belong to. If you have no idea which category the issue should be, You can put it in "General".
SummaryGive a summary to briefly describe the bug.
DescriptionDescribe the situation clearly. A good bug should contain: STR (Steps to reproduce), Expected Result, Actual Result, and Version number. A version number can be either a Gaia/Gecko commit or a Build ID (available from pvt build servers or public versions).
+

The following fields are optional:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ফিল্ডবর্ণনা
AttachmentAny attachment that can help to analyse the bug. Videos, pictures, testcases or logs are good for analyzing.
Depends/BlockShow the dependency between bugs.
KeywordsKeywords for bugzilla. Specific groups will use it for tracking.
WhiteboardContains tags. Add any tag to it for tracking. You shouldn't remove others' tags without permission.
See AlsoSometimes, two issues are related and you can specify this here.
FlagsFlags for tracking status; the most used flag in Firefox OS bugs is blocking-b2g. If a bug is set as blocking-b2g, it means we should pay more attention to it as it threatens to block a release.
SecurityIf a bug is related to personal data security, loss of earnings, and other such issues, you should check the checkbox and it will only be visiable to involved employees.
+

To find more information on bugzilla fields, you can view the Bugzilla Fields page on Bugzilla.

+

সাধারণ কীওয়ার্ড

+

The following table provide information on common keywords you'll see used in Firefox OS bugs.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
কীওয়ার্ডবর্ণনা
metaIndicates that the bug is a status tracking bug. Mozilla uses this tag to tracking multiple bug or user story implementation statuses. Once marked like this, developers should not land patches on top of such bugs. Please be reminded that project managers and QA staff will use meta bugs for tracking.
qablockerUse this keyword for bugs that are blocking testing (manual or automated testing of a feature) and need to be fixed by the next Beta or RC milestone.
qawantedUse this keyword for bugs that need more info, require reproducing or testcasing, or are duplicates (but you can't find the original bug being duplicated). Required QA work progress is recorded in the whiteboard; you should remove this keyword when the required QA work has been completed.
regressionThis keyword means that the problem was fixed, but then it came back (regressed) and the bug in question is a new bug, filed to track the regression. It can also refer to problems outside those identified in pre-check in and smoke tests, which were found in current builds and that were known to be working in previous builds. Tracking these bugs helps us to identify areas that are fragile, prone to breakage and are good candidates for adding to smoke and pre-check in tests.
regressionwindow-wantedIndicates that the bug is a regression, and would strongly benefit from someone identifying the time period in which it happened, ideally to a specific check in.
steps-wantedHighlights a bug that would greatly benefit from someone identifying the steps to reproduce it.
verifymeMeans that this bug is ok to verify with the latest B2G build by someone other than the QA Contact indicated. The bug has specific machine configuration details indicated for verifying the fix. You should try to reproduce the failure, and, if you agree that the resolution of Fixed is correct, mark the Status as Verified.
+
+ You should always indicate the build/OS/platform(s) used to verify the bug in the bug comments, before you change the Status to Verified. If the bug is reported on all three platforms and you only have one platform to verify the fix on, go ahead and do so and note it in the bug, but do not mark the bug as Verified. All platforms must be checked before moving Status to Verified.
+
+ Finally, if other bugs have been marked as a duplicate of the bug you're verifying, be sure to check and mention those as well. Often developers mark related — but not identical — bugs as duplicates, and these can be overlooked if not checked.
+
+

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

+
+

 

diff --git a/files/bn/archive/b2g_os/developing_firefox_os/index.html b/files/bn/archive/b2g_os/developing_firefox_os/index.html new file mode 100644 index 0000000000..88ce873124 --- /dev/null +++ b/files/bn/archive/b2g_os/developing_firefox_os/index.html @@ -0,0 +1,59 @@ +--- +title: ফায়ারফক্স ওএস অ্যাপ ডেভেলপ করা +slug: Archive/B2G_OS/Developing_Firefox_OS +tags: + - Developing + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Developing_Firefox_OS +--- +

এই বিভাগটিতে রয়েছে বিভিন্ন ক্ষেত্রের ডকুমেন্টশন যার মধ্যে রয়েছে অ্যাপ বানানো অথবা লিখাকালীন সময় ফায়ারফক্স ওএস অভিজ্ঞতার পরিবর্তন/নিজের মতো করে সাজানো, এবং আরও রয়েছে আপনি কিভাবে  প্লাটফর্ম ডেভেলপের জন্য সাহায্য করতে পারবেন।

+

গায়া উন্নয়নে কুইকস্টার্ট গাইড

+

গায়া ফায়ারফক্স ওস'র সামনে শেষ পর্যন্ত  ওয়েব অ্যাপস হিসেবে  সাজানো হয়েছে। আপনি পর্দায় দেখতে পাবেন ফায়ারফক্স ওএস'র অপারেটিং সিস্টেমে সবকিছু  খোলা ওয়েব প্রযুক্তি হিসেবে ব্যবহার করে তৈরি করা হয়েছে ।  এইতি মূল পর্দায় রয়েছে এবং সমস্ত ডিফল্ট অ্যাপ্লিকেশনেও রয়েছে । গায়া পরিবর্তন শুরু করতে এই সহায়িকা একটি দ্রুত এবং সহজ গাইড  হিসেবে রয়েছে।

+
+
+ সিস্টেমের প্রথম পাঠ তৈরি করুন
+
+ +

এই আনুচ্ছেদটি  গায়া এর বিল্ড সিস্টেম কিভাবে কাজ করে তা ব্যাখ্যা করে,এতে ম্যাকফাইল সংযুক্ত রয়েছে,প্রক্রিয়া নির্মিত হচ্ছে, পরিবেশ পরিবর্তিত হচ্ছে এবং সম্ভ্যাব্য কাস্টমাইজেশনস ।

+

গাইয়া হ্যাকিং

+
+
+

এই অনুচ্ছেদটি গায়া'র সকল বিষয়বস্ত পরিমিত করতে সহায়তা করে ।

+

কাস্টমাইজেশনের সাথে দাখিল করুন

+
+
+ মার্কেট গাইড কাস্টমাইজেশন
+
+ + + + + + + +
  + + + + + + +
+

বাজার কাস্টমাইজেশনস আপনাকে build-টাইম কাস্টমাইজেশান নির্দেশ দেয় (উদাহরনস্বরূপ-এর, অ্যাপ্লিকেশন আপনার বানানোতে  অন্তর্ভুক্ত থাকা উচিত) যা আলাদা ডিরেক্টরিতে উল্লেখ করতে অনুমতি দেয় মূল গায়া রেপও বদলানো ব্যতীত । আপনি স্বতন্ত্র ডিরেক্টরিতে আপনার নিজের কাস্টমাইজেশনস অন্তর্ভুক্ত করতে পারেন  বা সে preexisting ডিরেক্টরি ব্যবহার করতে পারেন যা উৎস-এর সাথে থাকে। এই কাস্টমাইজেশনস  অপশন  বানানোর সাথে উল্লেখ করা হয়। এই অনুচ্ছেদে আমরা খুঁটিনাটির দিকে তাকাই যেখানে এই কাস্টমাইজেশনস  করা হয়েছে।

+

হোষ্ট ফাইল নতুনভাবে পরিবর্তন

+

একটি গাইড কি ফায়ারফক্স ওএস হোষ্টকে ফাইল বদলানো দ্বারা অর্জন করা হয় ।

+
+
+
+
+ যেভাবে নিজের মতো করে সাজানো যায় এবং ফায়ারফক্স ওএস দ্বারা পরিবর্তিত হয়। দাখিল করুন।
+
+ কীবোর্ডে নিজের মতো করে ফায়ারফক্স ওএস  অ্যাপ্লিকেশন সাজানt
+
+ এই গাইড দেখায় যে কিভবে আপনার ফায়ারফক্স ওএস অ্যাপ্লিকেশনে কীবোর্ড  থেকে নিজের মত করে সাজাবেন
+
+ লোকালাইজিন ফায়ারফক্স ওএস
+
+ A guide to localising the Firefox OS platform, making it available in your preferred languages.
+
diff --git a/files/bn/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html b/files/bn/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html new file mode 100644 index 0000000000..00eb52cec0 --- /dev/null +++ b/files/bn/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html @@ -0,0 +1,98 @@ +--- +title: ফায়ারফক্স ওএস স্থানীয়করণ +slug: Archive/B2G_OS/Developing_Firefox_OS/Localizing_Firefox_OS +translation_of: Archive/B2G_OS/Developing_Gaia/Localizing_B2G_OS +--- +
+

এই গাইডে, আমরা দেখাব  ফায়ারফক্স ওএস  স্থানীয়করণ করা কতটা সহজ,  বিশেষভাবে ইন্টারফেইস এবং আপ্পস । আমরা প্রথমে আপনার কম্পিউটার কিভাবে কাজ করা শুরু করবে তা দিয়ে শুরু করব,তারপর দেখাব কিভাবে গিয়া স্ট্রিং স্থানীয়করণ করা যায় , সবশেষে কিভাবে |১০ন টেস্টিং কাজ করবে ।

+
+

যা যা প্রয়োজন

+

গিয়াস সোর্স ফাইল পাওয়ার জন্য এবং আপনার কম্পিউটারে স্থানীয়করণ পরীক্ষা করার জন্য আপনাকে আগে নিশ্চিত হতে হবে যে আপনার কম্পিউটার এ নিম্নের প্রয়োজনীয় ভাষা গুলো ইন্সটল করা আছে ঃ

+
+
+ জি এন এউ  তৈরী
+
+ সোর্স কোড তৈ্রী করার জন্য এটা খুব ছোট সাহায্যকারী যন্র . এটা খুব জলদি সবার হাতে হাতে চলে আসবে যখন আপনি আপনার দেস্কটপ |১০n চালনোর উপযোগী হবে। ডাওনলোডিং এবং ইন্সটলিং ম্যাক খুব সোজা এবং  সরাসরি জি এন এউ এর ওয়েবসাইট থেকে করা যায় .যদি আপনি ম্যাক ওএসএক্স ব্যবহার কর তবে আপনাকে এক্সকোড এবং এক্সকোড এর কমান্ড লাইন যন্রপাতি এপস্ স্টর   ইন্সটল করতে হবে ।
+
+ গিট
+
+ গিট হল একটি ভারসন কন্ত্রল সিস্টেম যা উন্নত গিয়া সোর্স কোড জমা করে। সহজেই গিট ডাওনলোডিং এবং ইন্সটলিং করা যাবে সরাসরি তাদের ওয়েবসাইট থেকে ।
+
+ পাইথন
+
+ পাইথন একটি  প্রোগ্রামিং  ভাষা যা আপনাকে ফায়ারফোক্স ওস বিল্ডার|১০ন টেস্তিং বানাতে সাহায্য করবে । সহজেই গিট ডাওনলোডিং এবং ইন্সটলিং করা যাবে সরাসরি তাদের ওয়েবসাইট থেকে ।
+
+ মারকুরিয়াল (এছ জি)
+
+ মারকুরিয়াল (এছ জি) হল ভারসন কন্ত্রল সিস্টেম যা বাসা বাড়ির জন্য গিয়ার স্তাবল ভারসনে ব্যবহার করা হত এবং স্থানীয় ভান্ডারসরুপ । সহজেই মারকুরিয়াল (এছ জি) ডাওনলোডিং এবং ইন্সটলিং করা যাবে সরাসরি তাদের ওয়েবসাইট থেকে ।
+
+ স্থানীয়-পাথ‍‍ক্য
+
+ স্থানীয়-পাথ‍‍ক্য হল একটি পাইথন স্ক্রিপ্ত যা স্থানীয়কারকদেরকে সাহায্য করবে তাদের কাজ মুল্ল্যায়ন করতে এবং নতুন কিছু থেকে আলাদা করতে যা আগেই স্থানীয়করণ করা হয়েছে (একে ডিফ বলে )। সহজেই গিট ডাওনলোডিং এবং ইন্সটলিং করা যাবে সরাসরি তাদের ওয়েবসাইট থেকে । দয়া করে মনে রাখবেন যে এইটা শুধু মাত্র যদি আপনি গিয়া  স্থানীয়করন করেন এই কমান্ড লাইন বা টেক্সট ইডিটর এর মাধ্যমে । যদি আপনি Pootle, Transifex, or Pontoon ব্যবহার করেন, তবে আপনার এইটা দরকার হবে না ।
+
+

স্থানীয়করন তৈরী

+

যখন আপনার উপরের লিঙ্ক থেকে সফটওয়ার ডাওনলোডিং এবং ইন্সটলিং করা শেষ হবে,তখন আপনার সময় হবে ডেস্কটপে উৎস এবং স্থানীয়করনের স্ট্রিং নেওয়ার ।

+
    +
  1. আপনার কম্মান্ড লাইনে সাহায্যকারী স্থানে যেখানে আপনি আপনার গিয়া সোর্স জমা করে রাখতে পারবেন।
    2. +
  2. হগ ব্যবহার কালে, en-US repo দিয়ে ক্লোন করুন এই কমান্ডের মাধ্যমে  : + 
    hg clone https://hg.mozilla.org/gaia-l10n/en-US
    +
    3. +
  3. এখন স্থানীয় রেপকে ক্লোন করুন এই কমান্ড এর মাধ্যমে : + 
    hg clone https://hg.mozilla.org/gaia-l10n/your-locale-code
    +
    4. +
  4. সবশেষে, নিম্নের কমান্ডটি লিখুন এবং নতুন ডিফ তৈ্রী করুন যাতে আপনি  to create a diff of your locale's repo against the en-US repo: + 
    compare-dirs en-US your-locale-code
    +
    5. +
+

এখন আপনার একটি ডিফের তালিকা প্রস্তুত থাকা উচিত যা অনুবাদ করা হবে ! দয়া করে নোট করবেন যে যদি আপনি নতুন করে ফায়ারফক্স ওএস এর স্থানীয়করণ শুরু করেন তবে আপনাকে নতুন করে ডিফ খুলা লাগবে না কারন সব স্ট্রিংই নতুন এবং অনুবাদ করার উপযোগী ।

+

গিয়া স্ট্রিং এর অনুবাদকরণ

+

গিয়া স্ট্রিং এর অনুবাদকরন বিশালভাবে আপনার ব্যবহৃত যন্ত্রপাতির উপর নিরভরশীল । এই ধরনের কাজ অনুবাদের করা অন্ন্যান্য মজিলা পন্যের মতই একই । এই স্থানীয়করনের অনুবাদক্রিত পৃষ্ঠার দ্রুত পথপ্রদরশকটি একটি লিস্ট ধারন করে যাতে আসে সবপ্রকার মজিলা পন্য পাওয়া যায় যা দিয়ে অনুবাদ করা যায় এবং অনুবাদের টিউটরিয়ালও পাওয়া যায় । এই পৃষ্ঠাটি আপনার জন্য খুবি উপকারী হবে যদি আপনি |১০ন টেস্টং এর অংশ হন এবং সিধান্ত নেন যে আপনি কোন যন্ত্রটি ব্যবহার করবেন অনুবাদ করার জন্য আবার সঠিক টিউটরিয়ালটি নিতে যা আপনার টিম এখন ব্যবহার করবে ।

+

ফায়ারফক্স ওএস এর জন্য এল১০ন টেস্টিং

+

 ফায়ারফক্স ওএস ১০ন টেস্টিং এর জন্য প্রধানত দুই ধরনের মেথড আছে : ডেক্সটপ তৈরী এবং মোবাইল তৈ্রী । বরতমানে, ১০|ন টেস্টিং এর জন্য ডেক্সটপ মেথডটি সবচেয়ে বেশি ছড়ানো ।

+

ডেস্কটপ এ |১০ন টেস্টিং

+
    +
  1. ডাউনলোড করুন এবং ইন্সস্টল করুন বুট২গেকও র সবচেয়ে নতুন ভারসন এখান থেকে  http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g18/  এবং ডাউনলোডিং করার পর আপনার ডেস্কটপ ওপারেশন সিস্টেম কাজ করবে। তারপর আপনি খুজে নিন যে কোথায় localizer শব্দটি আসে । এর মানে হল এই বিল্ডটিতে এখন সবপ্রকার লোকাল এর তালিকা প্রযোয্য আছে  languages-all.json ।
    2. +
  2. ক্লোন হল গিয়ার সবচেয়ে নতুন ভারশন যেখান থেকে আপনি ডাউনলোড করতে পারবেন এবং নিম্নের কমান্ডটি কমান্ড লাইনে লিখতে পারবেন : git clone git://github.com/mozilla-b2g/gaia.git
    3. +
  3. যদি আপনার টিম এই প্রথমবারের মত ফায়ারফক্সের ওএস এর জন্য কাজ করে তবে আপনাকে আপনার এলাকাকে এনাব্যল করতে হবে । যদি না করে , তবে শুধু অপেক্ষা করুন যেখানে অন্যরা স্থানীয়করনে ব্যস্ত থাকবে । +
      +
    1. While in the command line, navigate inside your gaia clone and run this command to clone your locale's repo
      + : hg clone ssh://hg.mozilla.org/gaia-l10n/your-locale-code
      2. +
    2. এই ফাইলটি খুলুন  languages.json । ফাইলটি পাবেন  shared/resources ডিকশনারীতে যেটা আপনি মাত্র ক্লোন করলেন.
      3. +
    3. এখন আপনার স্থানীয় তথ্যগুলো "en-US" ফরমেটে লিখুন : "English (US)", এবং ফাইলটি সেইভ করুন ।
      4. +
    4. পরিশেষে , কমান্ডটি রান করুন : make multilocale এতি আপনার এলাকাকে এনাবেল করে দিবে ।
      5. +
    +
    4. +
  4. নিজের প্রফাইল জুড়ুন এই কমান্ড এর মাধ্যমে : DEBUG=1 make -C gaia profile
    5. +
  5. সরবশেষে , আপনি আপনার স্থানীয় প্রফাইলটি খুলুন এবং পরীক্ষা শুরু করুন এই কমান্ড এর মাধ্যমে : b2g/b2g -profile gaia/profile. যদি আপনি MAC OS X চালান তবে এই চমান্ড এর মাধ্যমে চালান   : /Applications/B2G.app/Contents/MacOS/b2g -profile gaia/profile
    6. +
  6. আপনার প্রোফাইলকে আপগ্রেড করতে গড়ে তুলতে , simply navigate to your Gaia repo clone এবং কমান্ডটি জুরুন : git pull
    7. +
+

মোবাইলে |১০ন টেস্টিং

+

+ + এই সেকসনে যেসব ডিভিসে ফায়ারফক্স ওএস সাপোর্ট করে  সবগুলোই স্থানীয়করনের জন্য উপযোগী হবে ।
+ +

+

খুজতে চান যে কখন |১০ন টেস্টিং হবে

+

মোবাইল অপারেশন সিস্টেম এর স্থানীয়করন পরীক্ষা এবং দেক্সটপ এ স্থানীয়করন পরীক্ষার অনেক মিল আছে । এখানে কিছু পথপ্রদরশক দাওয়া হল যা আপনাকে সব খুজে পেতে সাহায্য করবে যখন আপনি স্থানীয়করন করবেন ঃ

+
    +
  1. দেখে নিন যাতে আপনার অনুবাদটি সঠীক ভাবে UI টেক্সট এ বসে ।
    2. +
  2. ঠিক করুন যাতে টোন,স্টাইল এবং পরিভাষা পুরা পন্য তথ্যে একই থাকে ।
    3. +
  3. UI তে ইংরেজিতে অনুবাদ করা হয়নি এমন অংশ খুজে বের করুন এগুলো হয়ত গিয়ার ভিতরে হা্ড-কডেড করে করা আছে অথবা তারা হয়ত ইলিমেন্ট আইডি এরোর দারা আক্রান্ত ।
    4. +
  4. নিচশিত হয়ে নিন যে সময় এবং তারিখ আপনার এলাকা অনুযায়ী আসে কিনা ।
    5. +
+

নিরদিস্ট স্থানীয় বাগ খোজা

+

এখানে bugzilla র কিছু লিঙ্ক আসে যা আপনাকে বাগ এর কিছু উদাহরণ দেওয়া আছে যা ফোন ব্যবহার করা হয়েছিলো । এটা আপনাকে কিছু নিরদেশনা দিবে যে কিভাবে বাগ খুজে পেতে হয় এবং কিছু উদাহরণ দিবে যে কিভাবে তা পুরন করতে হয় ।

+ +

স্থানীয়করন বাগ পুরণ করার সাধারন নিয়ম :

+ +

যারা  Moztrap  ব্যবহার করেন তাদের জন্য মজিলা ওএস "স্থানীয়করণ" টেগস এর টেস্টিং এর কথা মাথায় রেখে এবং দেখতে যে আপনি পরীক্ষায় উত্তীরণ হন কি না এর আরও একটি ভাল উপায় আপনার ফায়ারফক্স ওএস স্থানীয়করণ পরীক্ষা ।

+

তারপর কি?

+

এখন আপনি স্থানীয়করনের জন্য প্রস্তুত  !  অতএব, আপনার প্রিয় |১০ন জন্ত্র খুলুন এবং শুরু করুন ! সবসময়ের মত, যদি আপনার কিছু জানার থাকে যা আপনি এই ডকুমেন্টে পান নি , তবে দয়া করে তা পাঠিয়ে দিন এই লিঙ্কে mozilla.dev.l10n newsgroup.

diff --git a/files/bn/archive/b2g_os/developing_firefox_os/modifying_hosts_file/index.html b/files/bn/archive/b2g_os/developing_firefox_os/modifying_hosts_file/index.html new file mode 100644 index 0000000000..3754e8be44 --- /dev/null +++ b/files/bn/archive/b2g_os/developing_firefox_os/modifying_hosts_file/index.html @@ -0,0 +1,37 @@ +--- +title: হোস্ট ফাইলস সংশোধনকরন +slug: Archive/B2G_OS/Developing_Firefox_OS/modifying_hosts_file +translation_of: Archive/B2G_OS/Developing_Firefox_OS/modifying_hosts_file +--- +
+

মাঝেমধ্যে আপনাকে আপনার মেশিনের কিছু হোস্ট ফাইলস ঠিক করা  লাগতে পারে যখন কোন কিছু আক্রমন করবে , কোন অবাঞ্চিত সংযোগ  ব্লক করতে , কোন নির্দিষ্ট আইপি ঠিকানায় সরাসরি যাওয়ার নির্দেশ করার জন্য ইত্যাদি । এই প্রবন্ধে কিভাবে ফায়ারফক্স ওএস ফোন এর হোস্ট ফাইলস সংশোধন করা যায় সে সম্পর্কে বলা হয়েছে । এটি আছে  /system/etc এর অধীনে ।

+
+

আপনার ফোনকে প্রস্তুত করা

+

এই ফোনের Developer settings panel  যান এবং চেক করেন :

+ +

এরপর আপনার ফোন কম্পিউটার এর সাথে সংযুক্ত করেন ।

+

এই পর্যায়ে অ্যান্ড্রয়েডে যেভাবে হোস্ট ফাইলস সংশোধন করা হয় সেইভাবে করা হয় । অ্যান্ড্রয়েড ডেভলাপাররা সহজেই এটি ধরতে পারবে ।

+

টার্মিনালের ধাপসমূহ

+
    +
  1. একটি টার্মিনাল উইন্ডস খুলতে হবে । /system অংশটি ডিভাইসে পুনরারোহণ করতে হবে যাতে করে পুনোরাই লেখার অনুমতি পায়
    + 
    adb remount
    +
    2. +
  2. হোস্ট ফাইলগুলো কম্পিউটারে নেন
    + 
    adb pull /system/etc/hosts /tmp
    +
    3. +
  3.   হোস্ট ফাইলস সংশোধন করতে হবে এখানে /tmp/hosts এবং সংরক্ষণ করতে হবে । যেমন -
    + 
    127.0.0.1         localhost
+ip.to.re.direct   hostName
    +
    4. +
  4. পরিবর্তিত হোস্ট ফাইলগুলো ডিভাইসে push করতে হবে
    + 
    adb push /tmp/hosts /system/etc/hosts
    +
    5. +
+

এখানেই শেষ ; আপনার  হোস্ট ফাইলসগুলো এখন আপডেটেড হয়ে যাওয়া উচিত ।

+
+

মন্তব্য : ADB সম্পর্কে আর জানতে চান ? এখানে  দেখতে পারেন  ADB documentation.

+
+

 

diff --git a/files/bn/archive/b2g_os/developing_gaia/build_system_primer/index.html b/files/bn/archive/b2g_os/developing_gaia/build_system_primer/index.html new file mode 100644 index 0000000000..aea7e5c97c --- /dev/null +++ b/files/bn/archive/b2g_os/developing_gaia/build_system_primer/index.html @@ -0,0 +1,120 @@ +--- +title: গায়া বিল্ড সিস্টেম প্রাইমার +slug: Archive/B2G_OS/Developing_Gaia/Build_System_Primer +tags: + - Build documentation + - Building + - Firefox OS + - Gaia + - Guide + - 'l10n:priority' +translation_of: Archive/B2G_OS/Developing_Gaia/Build_System_Primer +--- +
+

এই নিবন্ধে বর্ণনা করা হয়েছে যে, কিভাবে গায়ার বিল্ড সিস্টেম কাজ করে; যার মধ্যে আছে মেক ফাইল, বিল্ড প্রক্রিয়া, পারিপার্শ্বিক ভেরিয়েবল এবং শক্তিশালী কাস্টোমাইজেশন সম্পর্কে বিস্তারিত বর্ণনা।

+
+

Most of the meaningful work for the build steps are performed by the scripts that live inside the build/ subdirectory of Gaia, which are executed using make, node.js and XPCShell (also known as JS Shell), a runtime environment from XULRunner. The Gaia build system contains many helper tools to help install, test, localization, and package webapps onto a real device. It also allows developers to customize Gaia by for example changing default wallpaper, ringtones, apps and settings.

+
+

Note: XPCShell is similar to node.js but with the added capability to run some Mozilla-flavored javascript. It allows Gaia build scripts to run inside a Firefox extension.

+
+

মেক ফাইল

+

The Makefile consists of a bunch of goals. This section explains the most useful ones.

+

গায়া-ইনস্টল

+

This goal will push all the apps for Gaia to your device. If you want to only push a specific app, you can use the APP flag as follows:

+
APP=calendar make install-gaia
+

This directory must exist inside one of the Gaia apps directories (e.g., apps).

+

গায়া-রিসেট

+

This works the same as install-gaia but starts by purging and then sets up permission defaults after installing all of the apps. The apps will be in /data/local like in the engineering builds. This will also push test and debugging applications.

+
+

Be careful: Using the APP environment variable with reset-gaia appears to work, but it will put your phone in an unusable state (which is recoverable by running this goal again without the APP variable). So don't do that.

+
+

প্রডাকশন

+

Same as reset-gaia but source code will be optimized. This goal basically allows you to emulate user builds. This will also push the same set of apps that are installed in user builds.

+
+

Be careful: Using the APP environment variable with production appears to work, but it will put your phone in an unusable state (which is recoverable by running this goal again without the APP variable). So don't do that.

+
+

রেফারেন্স ওয়ার্কলোড

+

These goals push variously sized workloads to the device, helping us with debugging and fixing the performance and scalability issues we might have. These goals accept the APP environment variable, or an APPS environment variable that should contain the app names separated by a space, e.g.,

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

Note: For more information, read Hacking Gaia: Reference workloads.

+
+

পারিপার্শ্বিক ভেরিয়েবল

+

Some environment variables let you control some aspects of the build and installation on the device, for example:

+

GAIA_OPTIMIZE=1

+

This triggers an optimization pass on the JavaScript files. This is automatically set when running make production. This can be used for install-gaia or reset-gaia too.

+

PRODUCTION=1

+

This is basically an alias for make production.

+

DEBUG=1

+

This lets you generate a debug profile to use with Gaia unit tests or when developing your Firefox OS app in Firefox. You must delete the existing profile directory before trying to generate a new one.

+

DEVICE_DEBUG=1

+

This disables screen lock on the device.

+

GAIA_DEVICE_TYPE=phone

+

This variable lets you build specific device from different 'app.list'. All 'app.list' files are located under /build/config/$(GAIA_DEVICE_TYPE)/  folders.

+

GAIA_DEVICE_TYPE default value is phone.

+
+

Note: for more details and more options, consult our Hacking Gaia make options guide.

+
+

বিল্ড প্রক্রিয়া

+

Here is a sequence diagram for building gaia:

+

+

pre-app.js, app.js & post-app.js will be executed by Makefile and mostly build tasks have been done in xpcshell scripts, Makefile is used for detecting OS and downloading b2g-desktop and we plan to migrate more tasks from Makefile to xpcshell scripts.

+

you may have question for why we have pre-app, app and post-app, that just because we are moving dependencies from Makefile to xpcshell script, so we created pre-app.js and post-app.js on bug 1021051 for moving mostly dependencies to xpcshell scripts, and at the end, app.js, pre-app.js and post-app.js will be merged on bug 1053703.

+

we have three kinds of directory for gaia build system:

+
    +
  1. source directories: apps, dev_apps, shared directories
    2. +
  2. stage directory: build_stage
    3. +
  3. profile directories: profile, profile-debug or profile-test directories
    4. +
+

our goal is never generate files to source directories, unfortunately we still have some modules to generate files into source directories, but we plan to fix these issues. here is a table to show which modules generate files to source, stage or profile directories.

+

+

Here is the build process when make is executed in the gaia directory, rules will be executed in order:

+
    +
  1. b2g_sdk: b2g-desktop is used to run the xpcshell scripts in GAIA_DIR/build/.
    2. +
  2. svoperapps: Download apps and generate configuration files for apps installation per provider of mobile telephony and country
    3. +
  3. webapp-manifests: Generate webapps metadata for build process
    4. +
  4. keyboard-layouts: Generate the default keyboard layout config
    5. +
  5. settings.json (settings.js): This JavaScript generates the default settings for Firefox OS, which are read by Gaia.
    6. +
  6. webapp-shared: Pick files which are used in each app from shared directory to build_stage directory.
    7. +
  7. preferences: Generates default preferences for Firefox OS; it will generate the user.js file and put it onto the device, where it is read by Gecko. Note that the values might be changed with different environment variables such as DEBUG=1.
    8. +
  8. app.js: Makefiles in the app directory: These are executed if they exist. For each app, if there is no app Makefile the Gaia Makefile will copy the app directory to the build_stage, and execute [app-directory]/build/build.js if it exists. See {{ anch("Build script for apps") }} for more details.
    9. +
  9. test-agent-bootstrap & test-agent-config: setup test-agent includes two make rules, test-agent-config & test-agent-bootstrap-apps, which are used to setup test environments for each app.
    10. +
  10. webapp-optimize: This script contains various optimization procedures including JavaScript minification, concatenation of localization resource files into to JSON files, and generation of HTML files for the default language if necessary.
    11. +
  11. webapp-zip: This compresses each app to a separate zip file and puts them into the profile/ directory.
    12. +
  12. optimize-clean: optimize-clean cleans the HTML files for the default language.
    13. +
  13. contacts: Copies the preloaded contact file to your profile, if it exists in GAIA_DISTRIBUTION_DIR.
    14. +
  14. extensions: Copies the extensions in GAIA_DIR/tools/extensions to your profile directory; different configuration setups allow you to specify copying different extensions.
    15. +
  15. installed-extensions.json (additional-extensions.js): Finally, this script downloads certain additional extensions to your profile directory.
    16. +
+

অ্যাপের জন্য বিল্ড স্ক্রিপ্ট

+

By default, app build script [app directory]/build/build.js will be executed by app.js if it exists. if $APP/build/build.js does not exist, app.js will copy app into build_stage.

+

files in app directory should be copied into build_stage directory by app build script becuase app.js will not copy them if app build script exists. for example, calendar app has build/build.js and utils.copyToStage() should be called in build.js for calendar app.

+

build script for apps can require all build modules in $GAIA_DIR/build especially utils module which is a very useful module for building apps, you can use require('utils') to get the module.

+

+

প্রেফারেন্স কাস্টোমাইজ

+

If you find that you have a set of custom preferences you need to set each time you flash your device, you can create a file called custom-prefs.js inside the build/config directory and store them in there. This keeps them from being overwritten and out of source control.

+

Here are some useful preferences:

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

This file is read each time you generate a profile. The safest way to be sure that everything is generated is to delete your profile first:

+
rm -rf profile && make profile
+

Then you can safely use the install-gaia goal.

+

সচরাচর জিজ্ঞাসিত প্রশ্ন

+

একটি ফ্ল্যাশ করার পরও ডিভাইস কালো রয়ে যায়

+

This can sometimes happen if you flash the device while it is idle. To remedy this just restart B2G by using the following command from the command line:

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


+  

diff --git a/files/bn/archive/b2g_os/developing_gaia/customizing_build-time_apps/index.html b/files/bn/archive/b2g_os/developing_gaia/customizing_build-time_apps/index.html new file mode 100644 index 0000000000..93f1d64166 --- /dev/null +++ b/files/bn/archive/b2g_os/developing_gaia/customizing_build-time_apps/index.html @@ -0,0 +1,89 @@ +--- +title: Customizing build-time apps +slug: Archive/B2G_OS/Developing_Gaia/Customizing_build-time_apps +tags: + - Apps + - B2G + - Customization + - Firefox OS + - Gaia + - Guide + - NeedsReview + - 'l10n:priority' +translation_of: Archive/B2G_OS/Developing_Gaia/Customizing_build-time_apps +--- +
+

ডেভেলপার অথবা ডিভাইস ভেন্ডার হিসেবে,আপনাকে অ্যাপসটি কাস্টমাইজ করতে চাইবেন যা একটি Firefox OS  ডিভাইসের উপরে বিভিন্ন কারণে প্রথম বার কাজ করে।এই অনুচ্ছেদ এটা করার বিভিন্ন প্রক্রিয়ার উপরে আলোচনা করে।

+
+

গায়ার ভিতরে অ্যাপ লোকেশন

+

অ্যাপস Firefox OS এর উপর কাজ করে সেগুলো গায়া সোর্স ট্রী এর ভিতরে থাকে,দুটা লোকেশনের মাঝে একটিঃ

+ +

যদি আপনি আপনার  গায়া/B2G নির্মাণে এসব অ্যাপস বাদ দিতে /যোগ করতে চান,আপনি নিচে দেখানো বেশ কিছু পথে এটি করতে পারেন।

+

Brute force কাস্টমাইজেশন প্রক্রিয়া

+

 "brute force"প্রক্রিয়া হল সাধারনভাবে অ্যাপস মুছে ফেলা যা আপনি গঠনের সময় উপস্থিত রাখতে চান,গঠনের পু্বে।

+

এডিটিং কনফিগ লিস্টস

+

সবচেয়ে বিশুদ্ধ প্রক্রিয়া হল  apps-*.list ফাইল এডিট করাf (খুজেন বিভিন্ন নির্দেশনামুলক ডিভাইসে খুজেন  gaia/build/config/, যেমন phone/  এবং tablet/ এর ভিতরে) গঠনের সময় আপনি অ্যাপস এর পথ যোগ করে চান। উদাহরন হিসেবে, gaia/build/config/phone/apps-production.list দেখতে কিছুটা এর মতঃ

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

নোট করুন যে আপনি আরো সরাসরি ভাবে সকল অ্যাপস নির্দিষ্ট করতে পারেন,এর মতঃ

+
apps/*
+

প্রক্রিয়া পছন্দের জন্য যা apps-*.list ফাইল ব্যবহার করে যা সহজেপ্রাপ্ত  gaia/Makefile এর ভিতরে গঠনের সময় অ্যাপস নির্দিষ্ট করে,এবং এর মত কিছু দেখায়ঃ

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

প্রাথমিকভাবে , GAIA_APP_TARGET পরিবর্তন সেট হয় engineering তে এবং GAIA_DEVICE_TYPE পরিবর্তন সেট হয়  phone তে,সোর্স থেকে ডিফল্ট গায়া গঠনে  gaia/config/phone/app-engineering.list ব্যবহার করবে(যা সকল টেস্ট,ডেমোস,ইত্যাদি যোগ করে)

+

বিভিন্ন অ্যাপস লিস্টের ব্যবহার নির্দেশনা দিতে আপনি নির্দিষ্ট করেন বিভিন্ন অপশন যখন  make কমান্ড চলমান থাকে .  gaia/build/config/phone/apps-production.list গঠনের সাথে উদাহরণ হিসেবে,আপনি ব্যবহার করবেন

+
PRODUCTION=1 গঠন
+

যদি আপনি বিশেষভাবে  DEMO=1 গঠনের সাথে নির্দেশনা দেন তখন ইহা apps-demo.list.ব্যবহার করবে।আপনি বিশেষভাবে  DOGFOOD=1 গঠনের সাথে নির্দিষ্ট করেন,তখন ইহা apps-dogfood.list ব্যবহার করবে।

+

 GAIA_APP_CONFIG ইডিটিং দ্বারা  gaia/Makefile এ আপনি সম্পুর্ন ভাবে সিদ্ধান্ত নিতে পারেন এবং আপনার নিজের apps-*.list ফাইল প্রদান করেন ।

+

gaia/Android.mk বহন করে এইসব লাইন গুলোঃ

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

যখন আপনি গঠন করবেন,যদি VARIANT=user অথবা VARIANT=userdebug সেট হয় (এইগুলো  TARGET_BUILD_VARIANT এ পরিবর্তনে  প্রতিসৃত হয়ে থাকে), PRODUCTION=1 হল সয়ংক্রিয়ভাবে সেট যখন গায়া গঠন ।

+
+

নোটঃ খুজে বের করুন যা তৈরি করে অন্য অপশন যা আমাদের make options reference এ সহজে প্রাপ্ত।

+
+

বাজার কাস্টমাইজেশনের ব্যবহার

+

তৃতীয়,এবংসবচেয়ে পুনরায় বিশুদ্ধ(কিন্তু সবচেয়ে জটিল) উপায় হল কাস্টমাইজেশন ব্যবহার করা।এগুলো আপনাকে ব্যতিচারের সময় গঠনের কাস্টমাইজেশন প্রক্রিয়া নির্দেশ করে থাকে,গায়া কোর রিপু পরিবর্তন ছাড়া। আপনি আপনার নিজের দূরের নির্দেশনায় কাস্টমাইজেশন যোগ করতে পারেন,অথবা ব্যবহার করেন পুর্বে বিদ্যমান নির্দেশনা যা  সোর্স থেকে আসে।

+

উদাহরন হিসেবে,GAIA_DISTRIBUTION_DIR পরিবেশের পরিবর্তনের সাথে কাস্টমাইজেশনের স্থান নির্দেশ করা,এর মতঃ

+
GAIA_DISTRIBUTION_DIR=<DISTRIBUTION_PATH> make production
+

আরো বেশি কাস্টমাইজেশনের উদাহরনের প্রক্রিয়া বিভক্তিকরনের জন্য,দয়া করে  https://github.com/mozilla-b2g/gaia/tree/master/customization নির্দেশ করুন।

+

 ইহার নিজের আলাদা ভিতরের বিষয় হল কাস্টমাইজেশন।ইহা সম্পর্কে আর বেশি জানার জন্য,আমাদের Market Customizations guide পড়ূন।

+
+

নোটঃযদি তুমি তোমার গাইয়া বিল্ডের অংশ হিসেবে কাস্টম এক্সটারনাল অ্যাপ যোগ করতে চাও, তোমাকে একটি্ নির্দেষট পথে তাদের তৈরি করা প্রয়োজন,এবং তারপরে তাদের স্থাপন কর   gaia/dev-apps/ ফোল্ডারে। Building Prebundled web apps  পড়ো আমাদের  আরো খুজে বার করতে ।

+
+
+

গুরুত্বপুর্ণঃযদি তুমি  ভাগ করার জন্য একতি কাসট্ম তৈরি করে ডিভাইস ভেন্ডার হওI ,তোমাকে  তোমার ফোন/ট্যাব্লেট/ইত্যাদি তে ফায়ারফক্স মার্কেট প্ল্যাচ  যোগ করার আগে প্তোমাকে খুশি হতে হবে বিচারের মান দন্ডের প্রয়োজন।মোযিলার সাথে যোগাযোগ কর  আরো বিস্তারিত  জানতে।

+
+

 

diff --git a/files/bn/archive/b2g_os/developing_gaia/index.html b/files/bn/archive/b2g_os/developing_gaia/index.html new file mode 100644 index 0000000000..6128b9033c --- /dev/null +++ b/files/bn/archive/b2g_os/developing_gaia/index.html @@ -0,0 +1,53 @@ +--- +title: গায়া উন্নত করা +slug: Archive/B2G_OS/Developing_Gaia +tags: + - B2G + - Bugs + - Contributing + - Firefox OS + - Gaia + - Mozilla + - NeedsReview + - 'l10n:priority' +translation_of: Archive/B2G_OS/Developing_Gaia +--- +
+

গায়া হল ফায়ার ফক্স  OSএর ব্যবহারকারীদের ইন্টারফেস এবং ডিফল্ট অ্যাপসএর সাহায্যকারীঃ ইহা Lockscreen,homescreen,dialer ,অন্যান্য অ্যাপলিকেশন যোগ করে ।বিশেষভাবে,গায়া হল জটিল ওয়েব অ্যাপের সেট যা ফায়ারফক্স ও এস প্লাটফর্মের উপরে কাজ করে। এই অনুচ্ছেদের আপনার যা জানা দরকার  গায়া প্রজেক্টে সাহায্য করতে তা  প্রদর্শন করে।

+
+ +

এই গাইডে আমরা আপনাকে গায়া তে সাহায্য করার জন্য একটি উপকারী কর্মের দিকে নিয়ে যাবো-এবং এর দ্বারা আমরা গায়া কোড বেসে ফিচার যোগ করা  এবং বাগক্ষেত্রে গায়ার প্রজেক্টের বিপক্ষে কাজ করা মনে করি। অনুচ্ছেদের প্রথম সেটে এই ভাবে কাজ করতে পারে,অথবা আপনি এর সংযুক্ত দিক অবাদ দিতে পারেন ,যদি আপনার প্রয়োজন পরে এই প্রক্রিয়ার কোনো বিশেষ দিকে আপনাকে পুনরায় গঠন করতে।

+ +

এর পরে ,আমরা সংযুক্ত বিষয়ের উপরে  আমরা নির্দেশিকা উপাদান এবং তথ্য প্রদান করব।

+ +

+ +

 ভিত্তি

+ +
    +
  1. Running the Gaia codebase
    2. +
  2. Understanding the Gaia codebase
    3. +
  3. Making Gaia code changes
    4. +
  4. Testing Gaia code changes
    5. +
  5. Submitting a Gaia patch
    6. +
+ +

 গায়া নির্দেশিকা তৈরি করে

+ + + +

আরো দেখুন

+ + diff --git a/files/bn/archive/b2g_os/developing_gaia/making_gaia_code_changes/index.html b/files/bn/archive/b2g_os/developing_gaia/making_gaia_code_changes/index.html new file mode 100644 index 0000000000..f434768be7 --- /dev/null +++ b/files/bn/archive/b2g_os/developing_gaia/making_gaia_code_changes/index.html @@ -0,0 +1,68 @@ +--- +title: Making Gaia code changes +slug: Archive/B2G_OS/Developing_Gaia/Making_Gaia_code_changes +tags: + - B2G + - Contributing + - Firefox OS + - Gaia + - GitHub + - Guide + - code changes + - 'l10n:priority' +translation_of: Archive/B2G_OS/Developing_Gaia/Making_Gaia_code_changes +--- +
+

এখন আপনার গায়া আপনার Desktop এ চলে এবং আপনার কিভাবে  codebase  কাজ করে তাতে কিছু লেভেল বুঝতে হয়, আপনাকে প্রজেক্টে কাজ করার জন্য প্রস্তুত হতে হবে ,এই অনুচ্ছেদে কিভাবে কাজ করে এবং কোথায় আছে তা খুজে বের করেন।

+
+

Git এর সবচেয়ে ভাল অনুশীলন

+
    +
  1. যখন গায়াতে পরিবর্তন আনা হয় ,আপনাকে প্রথমে Grab করা উচিত  latest  master থেকে : + 
    cd path/to/gaia
+git checkout master
+git pull upstream master
    +
    2. +
  2. পরবর্তীতে ,আপনার নতুন অবস্থানের জন্য  একটি শাখা খুলতে হবে: + 
    git checkout -b my-code-fix
    +
    3. +
  3. অবশেষে,আপনার gaia/apps যান সরাসরি,এবং আপনার app files এ পরিবর্তন আনুন।
    4. +
+

 Simple code উদাহরণ পরিবর্তন করে

+

কোড পরিবর্তন দেখতেঃ

+

       ১। Gaia codebaseএ প্রয়োজনের জন্য পরিবর্তন আনুন,এবং পরিবর্তনটা সেভ কর

+

      ২।Firefox Mulet বন্ধ করুন,অথবা আপনার সিমুলেটর WebIDE এ চলে

+

      ৩।আপনার Gaia profile using make পুনরায় থাকে

+

৪।Firefox Mulet নতুন শুরু করুন,অথবা আপনার সিমুলেটর WebIDE এ কাজ করে

+

 চলুন lock screen আ কিছু পরিবর্তন আনতে রঙের কিছু পরিবর্তন ঘটাই  :

+

Gaia lockscreen showing the clock display in white text

+

১।ডেভেলপার টুলস এর ব্যবহারের পথ সহজ করে দেয় । Ctrl/right + click  Firefox Desktop এর ঘড়িতে ক্লিক করে থাকে এবং Inspect Element বাচাই করে  context menu থেকে।

+
    +
  1. আপনি  CSS ফাইলে এডিট করতে যা file to edit — gaia/apps/system/lockscreen/style/lockscreen.css  তে কাজ করে থাকে  —এবং তখন  CSS স্টাইলে ডান দিকে ডিস্পলে তে আপনার পরিবর্তন আনে যা আপনি চান ।
    2. +
  2. যখন আপনি খুশি চলে যান এবং ফাইলে নতুন পরিবর্তন আনুন সরাসরিভাবে।
    3. +
  3. পরবর্তিতে , আপনার পরিবর্তন দেখতে কিছু ধাপ পরিলক্ষিত করুন।
    4. +
+

Gaia lockscreen showing the clock display modified from white to red text

+

 Gaia Firefox Mulet প্রদানের লিমিটেশনঃ

+

,Desktop Firefox প্রদান করা, অয়াপ্স  গুলো বিশেষভাবে কাজ করে থাকে যদি কোন নতুন রিয়েল ফোনে কাজ করি ,কিন্তু আপনি এখানে আর সেখানে কিছু পরিবর্তন দেখতে পারবেন।

+ +

কিভাবে কাজ করার জন্য bugs খোজা হয়

+

 

+

 Firefox OS bugs খোজার সবচেয়ে ভাল পথ হল এটাকে  Josh Matthews' Bugs Ahoy app কন্সাল্টে কাজ করা হয়  — এই বাগের পুলগুলো সরাসরি Mozilla's Bugzilla থেকে এবং দেখানো হয় তাদের দেখানো হয় খুজতে এবং ব্রাউজ করতে সবচেয়ে সহজ উপায়।একদা আপনি একটি বাগ পেয়েছিলেন যা  তে আপনি একটি কাজ করতে চান,  Bugzilla page এ যান,  "assigned to"  ক্ষেত্রে নিজেকে প্রবেশ করান ,এবং কাজ শুরু করেন ,উপরের মত।

+

সাহায্যকারী হিন্টস

+ +

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

+

 আরো দেখুন

+ diff --git a/files/bn/archive/b2g_os/developing_gaia/running_the_gaia_codebase/index.html b/files/bn/archive/b2g_os/developing_gaia/running_the_gaia_codebase/index.html new file mode 100644 index 0000000000..88703f2b39 --- /dev/null +++ b/files/bn/archive/b2g_os/developing_gaia/running_the_gaia_codebase/index.html @@ -0,0 +1,43 @@ +--- +title: Running the Gaia codebase +slug: Archive/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase +tags: + - B2G + - Contributing + - Firefox + - Firefox OS + - Gaia + - 'l10n:priority' + - running firefox os locally +translation_of: Archive/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase +--- +
+

 Gaia codebase লোকালি কিভাবে কাজ করে তার উপরে এই অনুচ্ছেদটি বিস্তৃত বর্ণণা করা ,এবং যাতে টুলস গুলো সেট আপে সব সময় পাওয়া যায়।

+
+

শুরু করতে, আমাদের মনে রাখতে হবে যে আপনাকে Gecko অথবা  B2G গঠন করতে হবে না , Gaia তে কন্ট্রিবিঊট করতে .আপনাকে কেবল  Gaia source code ডাউনলোড করতে হবে এবং রান এবং এডিট করার সক্ষমতা থাকতে হবে ।
+
+ কিছু ভিন্ন পার্থক্য আছে Gaia রান করার জন্যঃ

+ +

আপনি পেতে পারেন তথ্য এটা চালানোর উপরে ভিন্ন ভিন্ন পথে আমাদের  Different ways to run Gaia পেজে ,এর সাথে দরকারি লিঙ্ক আরো তথ্যের জন্য । সাধারনত এটা সবচেয়ে জটিল অর্ডার( কিন্তু সবচেয়ে বাস্তব অভিজ্ঞতা প্রদান করে থাকে) সবচেয়ে সহজ (কিন্তু কম বাস্তব)।

+

এই অনুচ্ছেদে আমরা Firefox Mulet এর ভিতরে Gaia রানের উপরে প্রাধানয় দিব অথবা   WebIDE তে  — বেশির ভাগ পরিবর্তনের জন্য আপনাকে Gaia codebase তৈরি করতে হবে , এটা সবচেয়ে দ্রুত প্রক্রিয়ার মেকানিজম আপডেট পরীক্ষার জন্য ,কিন্তু অবশ্যি কিছু দিক আছে (যেমন টেস্টিং ডিভাইস অ্যাপি অথবা কথাবার্তা ফোনের হার্ডোয়্যার দিয়ে) যা একটি  রিয়াল ডিভাইস ।

+
+

নোটঃ  Gaia থেকে সাহায্য পেতে ,সবচেয়ে ভাল জায়গা  হল  #gaia IRC channel এ যাওয়া  (দেখা  Mozilla IRC  নতুন তথ্যের জন্য) and the dev-gaia mailing list.

+
+

Running আপনার নতুন নিজস্ব Gaia build

+
    +
  1. প্রথমে ,নতুন একটি ফর্ক তোইরি করি যা প্রধান Gaia repo on Github.
    2. +
  2. পরবর্তীতে ,ক্লোন আপনার ফর্ক লোকালিঃ
    + 
    git clone https://github.com/your-username/gaia.git
    +
    3. +
  3.  নতুন আপ্সট্রিমে যোগ করেনঃ
    + 
    cd gaia
+git remote add upstream https://github.com/mozilla-b2g/gaia
    +
    4. +
  4. এখন আপনাকে গায়া প্রোফাইল তৈরি করতে হবে। Running make  inside your repo folder তৈরি করে একটি প্রোফাইল profile তে সরাসরি,যা অপ্টিমাল ডিবাগিং এর জন্য সেট করা ।ইহা আন প্যাকেজড( হোস্টেদ ভারসন) এর গায়া অ্যাপস তৈরি করে যা লোকাল HTTPD ের মধ্যে দিয়ে কাজ করে থাকে যা  Firefox ডেক্সটপ এ বিস্তৃত হয়ে থাকে। যখন আপনার পরিবর্তন দরকের তখন আপনার  When you make a change you just need to refresh your browser window তে পরিবর্তন আনুন রেজাল্ট দেখতে (যা আপনি পরে দেখবেন),বরং প্রোফাইলটা গঠন করুন, রিপুশ করুন ডিভাইসে,ইত্যাদি।  CSS/JS/HTML হ্যাকিং এর জন্য এটা অনেক ভাল।
    5. +
  5. আপনার ডিবাগ প্রোফাইল দিয়ে, Mulet অথবা WebIDE এ এটি রান করান লিঙ্কড স্ট্রাকচার ব্যবহার করে ।
    6. +
diff --git a/files/bn/archive/b2g_os/developing_gaia/submitting_a_gaia_patch/index.html b/files/bn/archive/b2g_os/developing_gaia/submitting_a_gaia_patch/index.html new file mode 100644 index 0000000000..2cb3dd80fd --- /dev/null +++ b/files/bn/archive/b2g_os/developing_gaia/submitting_a_gaia_patch/index.html @@ -0,0 +1,74 @@ +--- +title: Submitting a Gaia patch +slug: Archive/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch +tags: + - B2G + - Bugzilla + - Firefox OS + - Gaia + - GitHub + - contribution + - 'l10n:priority' + - patch + - submitting +translation_of: Archive/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch +--- +
+

এখন থেকে আপনাকে একটি কোড পরিবর্তন তৈরি করতে হবে এবং ভেরিফাইড করা হয় ইহা যা গায়াকে ভাঙ্গেনা । পরবরতী স্টেপ হল সেন্টার রেপতে আপনার প্যাচ জমা দেয়া ,যা হল অনুচ্ছেদের উদ্দেশ্য ব্যাখা করা।

+
+

Patch submission

+

আপনার প্যাচ গায়াতে জমা দেয়ার জন্যএই স্টেপগুলো অনুসরন করুনঃ

+
    +
  1. প্রথমে,আপনি বাগযিলাতে একটি বাগ জমা দিন যা আপনি করেছেন,যদি একটি কোড পরিবর্তন দেখানোর জন্য তখনি বর্তমান থাকে।Firefox OS product অধীনে আপনাকে এটা জমা দিতে হবে এবং আপনার কোড কি কাজ করে তার উপরে একটি  সুন্দর বর্ননা দিন।
    2. +
  2. এখন এটা সময়  create a pull request এর প্যাচের জন্য।যদি আপনি আমাদের গাইড শুরু থেকে অনুসরন করেন,আপনাকে লোকাল ফর্কের গায়া রিপুতে পরিবর্তন আনতে হবে এবং একটি অসাধারন নামের শাখা। পরে  git add .আপনার পরিবর্তন ,তারপরে  git commit -m 'my commit message'.
    3. +
  3. 'my commit message'এর প্রয়োজন একটি বাগজিলার বাগ নাম্বার বহন করার জন্য এবং বাগের টাইলের জন্য,আরো যোগ করেন আরো তথ্য যা বর্ননা করা হয় প্যাচে ,এবং যে এটা ঘটায় । উদাহরন হিসেবে 
    + 
    Bug 9999999 - Fix that annoying bug R=johndoe
    +
    4. +
  4. গিতাবের উপরে আপনার গায়া ফর্ক পুশ করুন ,তারপরে একটি  PR তৈরি করুন কোডটি  দেয়ার অন্তর্ভুক্তির জন্য।
    5. +
  5. PR URL যোগ করুন বাগজিলার উপরে Bug হিসেবে সংযুক্তি ঘটাতে ( Add টি অনুসরন করুন একটি সংযুক্তির লিঙ্ক হিসেবে ,বাচাই করুন পেস্ট টেক্সট যদি এটা ফাইলের ইনপুট মোডে থাকে ,এবং  URL প্রবেশ করান PR এর সংযুক্তি হিসেবে ,এবং একটি ছোট বর্ননা দিন )
    6. +
  6. Bugzilla bugএর PR সংযুক্তিতে ,আপনার প্যাচের জন্য রিভিউয়ারকে বলুন ।আপনার উচিত review: ? flag যোগ করা সংযুক্তির সাথে ,তারপরে আপনার কোড ব্যবহারের মডিউলের মালিকদের যুক্ত করুন ( Module owners page দেখুন আরো বেশি জানার জন্য ।)
    7. +
  7. রিভিউয়ারের জন্য অপেক্ষা করুন দায়িত্ব অর্পন করার জন্য এবং আপনার প্যাচ রিভিউ করুন। এই সময়ে তারা আপনাকে কিছু প্রশ্ন করবে পরিবর্তন/ ফিক্সিং এর জন্য যা PR এ Github এর ভিতরে হয়ে থাকে ,এবং ,  Bugzilla তে তাদের  লিঙ্ক  করুন ।
    8. +
  8. রিভিউয়ারের কমেন্টগুলো মনে করুন,তারপরে আবারো একই PR এ আগের মত পরিবর্তন আনুন  review: ? flag এ পৌছে যান ।
    9. +
  9. একদা রিভিউয়ারের কমেন্ট করে এবং তারা আপনাকে r+ flag দিবে  (মানে এটা পুনরায় দেখা /অনুমোদন করে ),আপনার উচিত  squash all your commits into one (আরো পড়ুন {{ anch("Tips_on_Gaia_Rebasing") }} নিচের সেকশনে).
    10. +
  10. একটি checkin-needed কিওয়ার্ড যোগ করুন কিওয়ার্ড ক্ষেত্রে।এই ক্ষেত্রে আপনাকে দরকার কারো আসার জন্য অপেক্ষা করা এবং আপনার প্যাচটি  Gaia সোর্চে প্রবেশ করান।
    11. +
  11. শুভেচ্ছা !আপনার কোডটি এখন Firefox OS এর অংশ!
    12. +
+
+

নোটঃআমাদের প্রতিটি রিভিউয়ের রিকমান্ডেড স্টিকিং করতে হবে।

+
+
+

নোটঃ আরো প্যাচ সাবমিশনের নির্দেশ  contributing.md তে পাওয়া যায় ।

+
+

গায়া রিবেসিং এর উপরে টিপস

+

Theগায়া মাস্টার শাখা সর্বদা পরিবর্তন হতে থাকে (অনেক,অনেক সময় একটি দিনের )।প্যাচ  তৈরি করার পরে ২ ঘন্টা নেন ,আপনি সম্ভবত খুজে পাবেন যে মাস্টার শাখা আপনাকে পরিবর্তন করেছে ।
+
+ আপনার ওয়ার্কিং শাখা থেকে  (e.g. my-code-fix), আপনার প্রথম প্রয়াস হল রিবেস করা এটার মত নতুন কিছু খোজাঃ

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

যদি কোন বাধা না থাকে ,আপনি এটার মত চালাতে পারেনঃ

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

যদি আপনি বাধা খুজে বের করেন ,ডেভেলপার দায়িত্বপুর্নের সাথে বাধা পরিবর্তন করার জন্য কাজ করেন এবং পুনরায় উপরের প্রক্রিয়া ব্যাখা করার জন্য রিবেস তৈরি করেন ।

+

স্ট্যাটাস ট্রাকিং বনাম ইঞ্জিনিয়ারিং বাগ

+

মজিলার একটি বিশেষ নিয়ম আছে যাকে বলে  Sheriff. Sheriffs মার্জিং কোডের চার্জে থাকে এবং শাখার স্ট্যাটাস পরিচালনা করে থাকে ।যেহেতু  Firefox OS দলে আমাদের কম পরিমান সেরিফস স্কাউটিং আছে যারা বিফলতা পরীক্ষা করার জন্য ,ইহা কঠিন শেরিফের জন্য বের হওয়া সকল ত্রুটিপুর্ন প্যাচ বের করা জন্য ।

+

In Firefox OS therefore, we prefer to open a new bug for landing new patches to fix an issue, if we encounter failure while examining whether a patch works or not. This causes some trouble for tracking status in QA and project management teams.

+

তাছাড়া ,আমরা বাগ পৃথক করি স্ট্যাটাস ট্রাকিং বাগে এবং ইঞ্জিনিয়ারিং বাগে।

+ +
+

নোটঃযদি ইহা একটি ইউজার স্টরি বাগ হয়, প্রোজেক্ট ম্যানেজার ইউজার স্টোরি ফিল্ড ইউজার এক্সেপ্টেন্স ।

+
+

যদি আপনার স্ট্যাটাস ট্রাকিং বাগের উপরে কোন প্যাচ দুর্ঘটনা বশত হয়ে থাকে তবে তার রিকাভারি

+

যদি আপনি করে থাকেন তবে ভয় পাবেন না।যদি দুর্ঘটনা বশত করে থাকেন তবে আপনি পাবেন  review+,এবং এটি ট্রাঙ্কের উপরে ,অথবা কোন কিছু ফিক্সিং করার আগে রিপোর্ট  করুন যা আপনার দরকারঃ

+
    +
  1. Bugzilla UI এর কর্নারের নিচে "Clone this bug" তে চাপুন নতুন একটি বাগ তৈরি করার জন্য , এর ভিতরে অরজিনাল ক্লোনিং করুন।প্লিজ   দেখুন যে হোয়াইটবোর্ড,কিবোর্ড এবং STR/userস্টোরি কপি করা এবং নতুন বাগে পোস্ট  করা ।
    2. +
  2. পুরাতন বাগকে ব্লক করার জন্য নতুন বাগ সেট করুন । নতুন বাগ হবে নতুন স্ট্যাটাস ট্রাকিং বাগ।
    3. +
  3. নতুন প্রোজেক্ট ম্যানেজারকে ইনফো ফ্লাগ ব্যবহার করে জানাতে হবে যে বাগ ট্রাক পরিবর্তন হয়েছে আপনি আমাদের  wiki তে পেতে পারেন  find e-mail addresses for the different project managers on Firefox OS  ।
    4. +
  4. বিফল স্টেপ অথবা নতুন ক্রিটেরিয়া ব্যাখা করার জন্য নতুন একজন ইঞ্জিনিয়ার তৈরি করুন ।আরো ,স্ট্যাটাস ট্রাকিং বাগ ব্লক করার জন্য নতুন বাগ ব্যবহার করুন ।
    5. +
  5. নতুন বাগের জন্য একটি ফিক্স চেষ্টা করুন।  Happy hacking!!!
    6. +
+

Uplifting প্যাচেস পুরাতন শাখায়

+

আপনি বাগের বিভিন্ন ভার্সনে বিভিন্ন ট্যাগ দেখতে পারেন ।যদি  Firefox OS এর পুরাতন শাখায় প্যাচেস উঠাতে চান ,চেক করুন যে তার সম্পুর্ন ভাবে নিয়ম প্যাচ করে থাকে ,আমাদের এর উপরে আরো  বিস্তারির জানুন  B2G Landing page এর উপরে আরো  বিস্তারির জানুন

diff --git a/files/bn/archive/b2g_os/developing_gaia/testing_gaia_code_changes/index.html b/files/bn/archive/b2g_os/developing_gaia/testing_gaia_code_changes/index.html new file mode 100644 index 0000000000..53f95a471b --- /dev/null +++ b/files/bn/archive/b2g_os/developing_gaia/testing_gaia_code_changes/index.html @@ -0,0 +1,122 @@ +--- +title: Testing Gaia code changes +slug: Archive/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes +tags: + - B2G + - Contributing + - Firefox OS + - Gaia + - Guide + - Integration + - Testing + - UI + - 'l10n:priority' +translation_of: Archive/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes +--- +
+

যখন আপনি গায়া ডাটাবেসে নতুন কোন পরিবর্তন আনবেন তখন এবং এটি কাজ করবে , পরবর্তি স্টেপ হল টেস্টিং প্রক্রিয়া থেকে আপনার কাজ হল পরিবর্তন  — এবং গায়ার বাকি কিছুর সাথে কাজ করে থাকে  — প্রজেক্ট এর প্যাচ জমা দেয়ার পুর্বে  দেখে নেয় ।এই অনুচ্ছেদ তা ব্যাখা করে থাকে।

+
+

টেস্টিং প্রক্রিয়া সাধারন্ত গঠিত হয়ঃ

+ +

চলুন পরীক্ষা করি কিছু নতুন এলাকা এখন ।

+

Standard ডিবাগিং

+

যদি আপনি একজন অভিজ্ঞ ওয়েব ডেভেলপার হয়ে থাকেন তবে গায়া কোড আপনার কাছে একটি স্বাভাবিক প্রক্রিয়া আমরা ইতিমধ্যে কিভাবে run Gaia in your Desktop Firefox installation কাজ করে তা জানিয়েছি এবং make a basic change কিভাবে করে ।আরো জটিল ডাটাবেসের কারনে ,আপনাকে একটি Firefox ডিবাগিং টুলস  Desktop Firefox এ দেখতে হবে ।
+
+ নোটঃ Tools zone তে টুলস ব্যবহারের অনেক তথ্য পাওয়া যাবে ।

+

Automated tests

+

আপনাকে স্ট্যান্ডার্ড অটোমেটেড টেস্ট ঠিক করে যে একটি প্যাচ যা গায়া কোড  জমা দেয়ার আগে রান করাতে হয়ে থাকে ,নিশ্চিত করতে হবে যে আপনার কোড কোন ফোনের ফাংশনে জরুরী কাজে বাধা প্রদান করে না ।টেস্টগুলো আপনি রান করতে পারেনঃ

+ +

আমরা সাধারনত জিজ্ঞাসা করে থাকি যে আপনি টেস্ট রান করুন একটি প্যাচ জমা দেয়া শেখানো  হয়ে থাকে ; আপনি যদি নতুন কন্ট্রিবুটর হয়ে থাকেন তবে সেক্ষেত্রে আপনি ভবিষ্যতে একজন ভাল কন্ট্রিবিউটর হতে জিজ্ঞাসা করতে হবে । আপনাকে গায়া  রেপু আপডেটেড করতে হবে টেস্টটি রান করার আগে , এবং নিশ্চিত করুন যে আপনি একজন নতুন কন্ট্রিবিউটর হোয়ার আগে ।

+
+

নোটঃ আপনি আরো বেশি তথ্য  কিভাবে  Firefox OS Automated testing page এর উপরে কাজ করে তা  দেখুন ।

+
+
+

নোটঃ যদি সব সময় পাওয়া যায় তবে আপনাকে একটি অ্যাপ রান করা হয়ে থাকে একটি রিয়াল ডিভাইসের উপরে ( কিছু ফিচারস /হার্ডোয়্যার এমুলেটরেরের উপরে সাপোর্টেড নয়) অথবা B2G Desktop emulator অথবা  Firefox Nightly iযদি নয় ।

+
+

Unit tests

+

উনিট টেস্ট গুলো হল নিজস্ব কোডের বড় অ্যাপলিকেশনের জন্য —গায়ার ক্ষেত্রে ,নির্দিষ্ট অ্যাপ।গায়া ব্যবহার করেঃ

+ +

আপনি ডাউনলোড করতে নিচেরটা কমান্ড করতে পারেন , ইন্সটল এবং হোস্ট একটি উনিটেস্ট সার্ভার  (কিছুক্ষন এটি রান করুন ,সুতরাং একটি কাপ চা করতে যে সময় লাগে)ঃ

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

এটা একটি নতুন ওয়েব পেজ খুলে দিবে একটি নতুন উনিট টেস্টের সাথে ।রান করুনঃ

+ +

উইন্ডোটী খুলে দিয়ে ,আপনি ফুল টেস্ট রান করতে পারেন একটি নতুন টারমিনাল উইন্ডো থেকেঃ

+
make test-agent-test
+
+

নোটঃ এটা অনেক বিশাল সময় , যেহেতু অনেক টেস্ট আছে রান করার জন্য  (বিশেষ ভাবে একটি ঘন্টা অথবা আরো বেশি ), যেহেতু আপনাকে সম্ভবত টেস্টটি রান করানো জন্য অ্যাপটি মোটিভেটেড করতে হবে ।আপনাকে  APP=<app folder name> উপরে কমান্ড করতে হবে ,উদাহরন হিসেবে APP=settings.

+
+
+

নোটঃআপনাকে আরো পড়তে হবে   Gaia Unit Tests  আরো উনিট টেস্ট তথ্যের জন্য।

+
+

ইন্ট্রেগেশন টেস্ট

+

ইন্ট্রেগেশন টেস্টিং বিভিন্ন কোডের একত্রে একটি গ্রুপে কাজ করে থাকে তারা কিভাবে কাজ করে তা দেখার জন্য ,এবং লজিকাল নেক্সট স্টেপ উনিট টেস্টিং এর পরে ।গায়া  JavaScript এ লেখা হয়ে থাকে মেরিঅনেটের স্ক্রিপ্ট ইন্ত্রেগাশনের দ্বারা এবং একটি python-based সার্ভার ।এটা গেটকো এর সাথে যোগাযোগ করতে পারে সুতরাং ইহা সম্ভব ব্রাউজারে কন্ট্রলের জন্য এবং Firefox OS ডিভাইস,এবং তাদের প্রত্যেকের সাথে সংযুক্ত ।

+

আপনি ট্রিগারটি ইন্ট্রেগাশন টেস্টের জিন্য কমান্ড দিতে পারেনঃ

+
make test-integration
+
+

নোটঃ উনিট টেস্ট হিসেবে সকল ইন্টারোগেশন  টেস্ট রান কর যা ঐ সময়ে সময় গ্রহন করে থাকে ,সুতরাং আপনি প্রকাশ করতে পারেন  APP=<app ফোল্ডার  name>  এর উপরে  একটি টেস্ট সিঙ্গেলে  অ্যাপ।উদাহরন হিসেবে ,APP=calendar.

+
+
+

নোটঃ আরো বেশি ইনটেগ্রাশনের জন্য ,পড়ুন Gaia integration tests.

+
+

Performance tests

+

গায়া পারফরমেন্স ট্রিগার করবে B2G Desktop,কিছু সময়ে অ্যাপ উদ্বোধন করবে এবং ক্যাল্কুলেট করবে একটি গড় গড় লোড সময় । একটি রানিং টেস্ট করার জন্য ,পারফরমেন্স ফ্রেমোয়ার্ক মেমোরি ব্যবহারের সংগ্রহ করবে অ্যাপটি এবং সিস্টেম প্রসেস(b2g).

+

টেস্টটি রান করার জন্য আপনাকে প্রয়োজন B2G Desktop ইন্সটল্ড করা ,এবং কমাণ্ড গুলো দেখুন

+
make টেস্ট -পারফ
+
+

নোটঃ অন্যান্য টেস্ট টাইপ অনুসারে , আপনি  APP=<app folder name> একটি সিঙ্গেল অ্যাপ এ দেখাতে সম্ভব ।উদাহরন হিসেবেAPP=settings.

+
+

সম্পুর্ন গড় একটি  mozPerfDurationsAverageভ্যালু হিসেবে রিটার্ন দিবে,যেমনঃ

+
"mozPerfDurationsAverage": 225.5
+

গড় অ্যাপের লোড সময় হল মিলিসেকেন্ড ; অপ্টিমাল ব্যবহারের জন্য আপনাকে ১ সেকেন্ড সময় নিতে হবে । এই পারফমেন্স কিছু বিস্তারিত ব্যবহারের ভ্যালু আপনাকে ফেরত দিবেঃ

+
{
+  "app": {
+    "name": "Settings",
+    "uss": 16.6,
+    "pss": 19.5,
+    "rss": 32.9,
+    "vsize": 73.3
+  },
+  "system": {
+    "name": "b2g",
+    "uss": 50.1,
+    "pss": 53.2,
+    "rss": 67,
+    "vsize": 148.1
+  }
+},
+

টেস্ট পারফরের সবচেয়ে মুল নিয়ম হল "lower numbers are better"; উপরের সংখ্যাগুলো নিচের গুলোকে দেখায়ঃ

+ +

সাধারনত Generally vsize >= rss >= pss >= uss . vsize এবং rss প্রসেসরের অন্য প্রসেসরের ব্যবহারের সাথে কোন কিছু শেয়ারের প্রতিচ্ছবি দেয় না।সুতরাং দুটি সংখ্যা যা আপনি দেখতে চান তা হল  pss এবং uss.
+
+ uss হল ইউনিক প্রসেসের সম্পুর্ন মেমোরি । যদি সঠিক সময়ে মেমোরি টারমিনেটেড হয়ে থাকে তবে এটা মেমোরির পরিমান এটা বিবর্তনের চাবিকাঠি।
+
+ pss হল প্রসেসরেরলাইব্রেরি শেয়ারের প্রফেসনাল আকার। এটা মনে করায় যে প্রসেস যদি টারমিনেটেড হয় তবে এটা বাহির হবে না।

+
+

নোটঃআরো বেশি পারফরমেন্সের জন্য,পড়ুন Gaia performance tests.

+
+

UI tests

+

দেখুন   Gaia UI Tests Introduction.

diff --git a/files/bn/archive/b2g_os/dual_boot_of_b2g_and_android_on_sgs2/index.html b/files/bn/archive/b2g_os/dual_boot_of_b2g_and_android_on_sgs2/index.html new file mode 100644 index 0000000000..808072575b --- /dev/null +++ b/files/bn/archive/b2g_os/dual_boot_of_b2g_and_android_on_sgs2/index.html @@ -0,0 +1,77 @@ +--- +title: স্যামসাং গ্যালাক্সি এস ২ তে ফায়ারফক্স ওএস এবং অ্যান্ড্রয়েড ডুয়েল বুট +slug: Archive/B2G_OS/Dual_boot_of_B2G_and_Android_on_SGS2 +tags: + - Archive + - B2G + - Mobile +translation_of: Archive/B2G_OS/Building +--- +
+

Warning: This procedure doesn't really work anymore. It only works with Android 4 (Ice Cream Sandwich) and Siyah Kernel v 5.0.1. Later versions of either won't work. Consider this guide archived, and use it at your own risk.

+
+

If you want to test B2G from time to time but continue using Android as your main OS and you have a Samsung Galaxy S2, you can choose to install B2G in a separate partition (which is already present on the phone) and choose where to boot into when your device starts.

+

পূর্বশর্ত সমূহ

+

In order to dual boot Android and B2G, you have to meet these prerequisites:

+ +

একক অপারেশন সমূহ

+

There are several operations to do in order to get a working dual boot. The following ones need to be done the first time only.

+

In order to use heimdall without requiring root access, you should create a file called android.rules (the portion of the name before the .rules extension is arbitrary) and place it in /etc/udev/rules.d. The file should contain a line line the following:

+
SUBSYSTEM=="usb", ATTRS{idVendor}=="04e8", MODE="0666"
+

In order to activate this rule, you should restart udev:

+
sudo service udev restart
+

and then unplug and replug in the phone. The above rule will also allow adb to access the SGS2 without requiring root privlidges.

+

সিইয়াহ কার্নেল ফ্ল্যাশ করা

+

The Siyah kernel is mandatory for the dual boot, because it is this kernel that manages it. Once you have downloaded and decompressed the tar file, you'll be left with a file named zImage. In order to flash it on your phone you have to follow these steps:

+
    +
  1. Switch off your phone
    2. +
  2. Reboot in download mode (press together volume down + home + power buttons and then, when asked, volume up button)
    3. +
  3. Use heimdall to flash the kernel with the following command (your phone needs to be connected to your PC): + 
    heimdall flash --kernel /path/to/zImage
    +
    4. +
+

Once the kernel is flashed the phone will reboot.

+

B2G রম পরিবেশ প্রস্তুত করা

+

Once you've installed the Siyah kernel, it's time to use its functions to prepare the environment to install your B2G image in the secondary partition. Follow these steps:

+
    +
  1. Switch off your phone
    2. +
  2. Reboot in recovery mode (press together volume up + home + power buttons)
    3. +
  3. In the CWMR Touch interface, go to dual-boot options -> Wipe 2ndROM data/cache -> Yes - Wipe. This operation will take some time
    4. +
+

Once the operation is finished, select Go Back and then reboot system now to reboot your phone. If you check, inside the internal SD card of your phone you'll now have a .secondrom directory with inside two files named cache.img and data.img.

+

B2G আপডেট অপারেশন সমূহ

+

The following operations need to be done every time you build a new version of B2G.

+

In order to simplify command line instructions, it's advised to copy all needed files in a same folder of your choice. These are the files that need to be copied inside the folder:

+ +

Once you have all the files in one place, do the following:

+
    +
  1. Create a data.img file out of the sparse file userdata.img. You can do it with the following command: + 
    simg2img userdata.img data.img
    +
    2. +
  2. Put the data.img file on your phone's .secondrom folder. You can do this either by enabling file storage mode on your phone and connecting it to your PC or, if you have USB Debug active, you can use adb: + 
    adb push /path/to/data.img /sdcard/.secondrom/data.img
    +
    3. +
  3. Switch off your phone
    4. +
  4. Reboot in download mode (press together volume down + home + power buttons and then, when asked, volume up button)
    5. +
  5. Use heimdall to flash B2G firmware inside the second partition: + 
    heimdall flash --hidden system.img
    +
    6. +
+

Once the flash is finished, your phone will reboot and at boot time you can boot into your second rom (the B2G one) by pressing the home button during the bootloader countdown. If everything has gone right, once you've finished booting B2G you'll have a black screen on your phone. You now have to install Gaia.

+
+ Note: Depending on how you want to test B2G, you may not want to put a new data.img file on the phone every time you update B2G, as it will wipe all of your preferences, installed applications and in general pretty much everything you've done while using B2G.
+

বুট অপারেশন সমূহ

+

The following operations need to be done every time you boot inside B2G.

+

Unfortunately, there's no simple way to put Gaia inside the system.img B2G image, and it get lost when you switch off your phone, so you'll need to install Gaia again every time you boot inside B2G. To install Gaia, type the following on a console after you've booted your phone inside B2G (so you have a black screen) and have connected your phone to your PC:

+
cd B2G/gaia
+GAIA_DOMAIN=foo.org make install-gaia
+

After the upload of Gaia is completed, on your phone's screen the B2G interface will appear.

diff --git a/files/bn/archive/b2g_os/firefox_os_build_prerequisites/index.html b/files/bn/archive/b2g_os/firefox_os_build_prerequisites/index.html new file mode 100644 index 0000000000..0094471e9b --- /dev/null +++ b/files/bn/archive/b2g_os/firefox_os_build_prerequisites/index.html @@ -0,0 +1,378 @@ +--- +title: ফায়ারফক্স ওএস নির্মাণের জন্য প্রয়োজনীয় বিষয়বস্তু +slug: Archive/B2G_OS/Firefox_OS_build_prerequisites +translation_of: Archive/B2G_OS/B2G_OS_build_prerequisites +--- +

 ফায়ারফক্স ওএস বিল্ড কোড পাওয়ার আগে, আপনার একটি সঠিকভাবে কনফিগার বিল্ড সিস্টেম প্রয়োজন. আপনি বর্তমানে ৬৪ বিট লিনাক্স ডিস্ট্রিবিউশন এবং ওএস এক্স -এর উপর তা নির্মাণ করতে পারেন ।

+

Note: To build Firefox OS onto a phone, begin with your phone NOT connected to your computer. We'll tell you when to plug it in.

+

একটি সামঞ্জস্যপূর্ণ ডিভাইস / এমুলেটর

+

 আপনার একটি যন্ত্র বা এমুলেটর ব্যাবহার করা প্রয়োজন । যদিও আমরা কিছু ফোন এর সমর্থন করি, যাদের ভিন্নতা আছে । আমরা বর্তমানে সেই সকল ফোনএর সমর্থন দিয়ে থাকি যা অন্যদের থেকে বেশি ভাল ।

+
+

Note: Mozilla's B2G source code effectively is the reference implementation of B2G, but phone vendors are free to add patches or make changes. When you buy an Alcatel One Touch for example, it contains the vendor's version. This doesn't make a difference for the installed apps, but it can at the platform level. The Nexus 4 port is maintained directly by Mozilla; so it's a lot more likely to work with our version of Gecko out of the box than other tier 3 devices.

+
+

Tier 1

+

Tier 1 devices represent a primary target for development and will typically be the first to receive bug fixes and feature updates.

+
+
+ Keon
+
+ Keon is the Geeksphone Keon device, which was one of the initial developer phones. Note that builds for this device are provided by Geeksphone.
+
+ Inari
+
+ Inari is another testing device. Use this configuration to build for the ZTE Open device. Warning: newer builds of Firefox OS may have trouble booting on the ZTE Open's default boot partition.
+
+ Unagi
+
+ Unagi is a phone being used as a test and development platform as a low-to-midrange smartphone. Many core Firefox OS developers are working on Unagi.
+
+ Otoro
+
+ Otoro is a phone being used as a test and development platform as a low-to-midrange smartphone. Many core Firefox OS developers are working on Otoro.
+
+ Pandaboard
+
+ The Pandaboard is a development board based on the OMAP 4 architecture, used to do development work on mobile platforms.
+
+ Emulator (ARM and x86)
+
+ There are two emulators available: one emulates ARM code and the other runs everything in x86 code. Learn more about installing and using the emulators.
+
+ Note that you shouldn't use the x86 emulator — it is hard to install and not well supported.
+
+ Desktop
+
+ You can also build a desktop version of Firefox OS; this runs Gecko in a XULRunner application, and you then use the Gaia user experience inside it.
+
+

You can, of course, build the desktop client or one of the emulators without a phone.

+

Tier 2

+

Tier 2 devices are generally functional and many developers (especially app developers) are using them, so they tend to pick up changes secondarily.

+
+
+ Samsung Nexus S
+
+ The known working model numbers of Nexus S devices are GT-I9020A and GT-I9023. Others may work.
+
+ Samsung Nexus S 4G
+
+ The SPH-D720 is supported as a tier 2 device.
+
+

Tier 3

+

Firefox OS can be built for these devices, but they are not being actively worked on a regular basis by core developers. Their reliability and feature set may lag noticeably behind tier 1 and even tier 2 devices.

+
+
+ Samsung Galaxy S2
+
+ The only model that works is the i9100; no other variants are officially compatible. (i9100P might work, since the only change is a NFC chip added)
+
+ Samsung Galaxy Nexus
+
+ We are not currently aware of any variations that are not compatible.
+
+ Nexus 4
+
+ Some users on IRC have tested this successfully. May or may not require reflashing to Android 4.3 first if was running 4.4 (Android images available from Google)
+
+ Nexus 5
+
+ Some users on IRC have tested this successfully.
+
+ Tara
+
+ Tara is another testing device. Manifest of Tara is in master branch only. The script of getting Tara code is "BRANCH=master ./config.sh tara".
+
+
+ Important: Only devices running at least Android 4 (aka Ice Cream Sandwich) are supported. If your device is listed above but running an older version of Android, please update it before doing anything.
+
+

Note: Tier 2 and Tier 3 devices have a software home button instead of a hardware home button

+

All Tier 1 devices have a hardware Home button which returns the user to the home screen. Most current ICS based Android devices use onscreen touch buttons for navigation. We have a virtual home button for the devices without hardware home button now. If it's not automatically enabled, open the Settings app, go to the Developer settings, and then toggle on the Enable software home button preference.

+

In 1.4 there is also a developer option for "Home gesture enabled"; enabling that will remove the on-screen home button in favor of swiping up from the bottom of the screen.

+
+

Requirements for GNU/Linux

+

To build on Linux, you'll need:

+ +

This is more than the bare minimum, but sometimes building fails just because it's missing resources. A typical error in this case is "arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)".

+

You will also need the following tools installed:

+ +

Emulator build issues

+

If you are making an emulator build, 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 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.

+
+

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

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

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.

+

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. 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/bn/archive/b2g_os/firefox_os_faq/index.html b/files/bn/archive/b2g_os/firefox_os_faq/index.html new file mode 100644 index 0000000000..1fa84d2a1b --- /dev/null +++ b/files/bn/archive/b2g_os/firefox_os_faq/index.html @@ -0,0 +1,27 @@ +--- +title: ফায়ারফক্স OS FAQ (সাধারণ প্রশ্নোত্তর) +slug: Archive/B2G_OS/Firefox_OS_FAQ +tags: + - Firefox OS + - ফায়ারফক্স ওএস +translation_of: Archive/B2G_OS/Introduction +--- +
+
 
+
ফায়ারফক্স ওএস কি?
+
এটা সম্পূর্ণরূপে ওপেন ওয়েব স্ট্যান্ডার্ড ব্যবহার করে নির্মিত একটি নতুন মোবাইল অপারেটিং সিস্টেম। এটি ডিভাইসের সব কাজকর্ম কে (কল করা, মেসেজিং, ব্রাউজিং, ইত্যাদি) HTML5 এর অ্যাপ্লিকেশন হিসাবে ডেভেলপ করার সুবিধা দেয়, যা একটি ফোন এর অন্তর্নিহিত ক্ষমতা ব্যবহার করতে পারে।  এ সুবিধাগুলো'র ব্যবহার এতদিন শুধু অন্যান্য অপারেটিং সিস্টেমের নেটিভ অ্যাপের মধ্যেই সীমাবদ্ধ ছিল।
+
আমি কিভাবে একটি ডেভেলপার প্রিভিউ ফোন পেতে পারি?
+
আপনি Geeksphone ওয়েবসাইটে একটি কিনতে পারেন অথবা আপনি যদি একজন মজিলা রেপ হয়ে থাকেন তাহলে Keon ফোন পাওয়ার জন্য আবেদন করতে পারেন।
+
যদি আমি একটি ফোন কিনতে না চাই, তখনও কি আমি ফায়ারফক্স অপারেটিং সিস্টেমের জন্য একটি অ্যাপ্লিকেশন ডেভেলপ করতে পারব?
+
অবশ্যই! আপনি অ্যান্ড্রয়েড এ আপনার অ্যাপ্লিকেশন পরীক্ষা করতে পারবেন (ফায়ারফক্স মার্কেটপ্লেস ব্যবহার করে) অথবা আপনার ডেক্সটপ এ Firefox OS সিমুলেটর ব্যবহার করে।
+
ফাইনাল বা সম্পুর্ণ নির্মিত ফোনের সাথে এটি কিভাবে তুলনযোগ্য?
+
আমরা সাধারণ গ্রাহকদের বাজারে ফোন আনার জন্য বেশ কিছু সহযোগীদের সঙ্গে কাজ করছি। আমরা পরবর্তীতে ঐ ডিভাইস সম্পর্কে আরো তথ্য জানব।
+
আমি আমার নিজের ফোনে চালিয়ে দেখতে কোথায় ফায়ারফক্স ওএস ডাউনলোড করতে পারি?
+
 ফায়ারফক্স ওএস বিল্ড এবং ইন্সটল করা দেখুন।
+
আমি কিভাবে ফায়ারফক্স ওএস এ আমার অ্যাপ্লিকেশন পরীক্ষা করতে পারি?
+
অ্যান্ড্রয়েড এ অথবা ফায়ারফক্স ওএস সিমুলেটর ব্যবহার করে।
+
ডিভাইস API গুলির সম্পূর্ণ তালিকা কি? এগুলো স্ট্যান্ডার্ড বা প্রমিত করা হবে?
+
বিপুল সংখ্যক ডিভাইস API ফায়ারফক্স ওএস এর প্রাথমিক রূপায়ণে সমর্থিত হবে। একটি সম্পূর্ণ তালিকা পাওয়া যাবে এখানে https://wiki.mozilla.org/WebAPI#APIs। স্ট্যান্ডার্ড করার প্রক্রিয়া চলছে।
+
ডিভাইস APIগুলি কি সব প্লাটফর্ম এ ব্যবহারের জন্য প্রমিত হচ্ছে?
+
হ্যাঁ, API গুলি বেশ কিছু পার্টনার এবং সরবরাহকারীদের সঙ্গে কাজ করার ফলাফল এবং তাদের মধ্যে কিছু ইতিমধ্যেই অন্যান্য প্ল্যাটফর্মে কাজ করছে। প্রায় প্রত্যেক প্রযুক্তি কোম্পানি-ই তাদের দেওয়া হার্ডওয়ারে ওয়েব অ্যাপ সক্রিয় করতে গিয়ে সমস্যায় ভোগে। যত বেশি সম্ভব প্ল্যাটফর্মে যেন ওয়েব অ্যাপ ব্যবহারযোগ্য থাকে, সেই উদ্দেশ্যেই আমরা কাজ শুরু করেছি।
+
diff --git a/files/bn/archive/b2g_os/firefox_os_usage_tips/index.html b/files/bn/archive/b2g_os/firefox_os_usage_tips/index.html new file mode 100644 index 0000000000..e94966151e --- /dev/null +++ b/files/bn/archive/b2g_os/firefox_os_usage_tips/index.html @@ -0,0 +1,28 @@ +--- +title: ফায়ারফক্স ওএস ব্যবহারের টিপস +slug: Archive/B2G_OS/Firefox_OS_usage_tips +tags: + - Beginner + - Firefox OS + - Tips +translation_of: Archive/B2G_OS/Firefox_OS_usage_tips +--- +
+
+ যা করা হবে 
+
+ ফোনে থাকা সকল ডেভেলোপার সুবিধাসমুহ এবং এগুলো কীভাবে কাজ করে - তা বর্ননা করে ।(Settings > Device information > More information > Developer)
+
+ রিমোট ডিবাগিং
+
+ কীভাবে আপনার ফোনকে রিমোট ডিবাগিং এর জন্য সেট করবেন ।
+
+ আপনার ফোনকে আনলক করা
+
+ আপনার ফোনকে আনলক করার জন্য কিছু সাধারণ নির্দেশাবলী ।
+
+ স্ক্রীনশট নেয়া
+
+ কীভাবে আপনার ফায়ারফক্স ওএস ফোনে স্ক্রীনশট নিতে হয় ।
+
+

 

diff --git a/files/bn/archive/b2g_os/index.html b/files/bn/archive/b2g_os/index.html new file mode 100644 index 0000000000..fdf46e24c9 --- /dev/null +++ b/files/bn/archive/b2g_os/index.html @@ -0,0 +1,171 @@ +--- +title: ফায়ারফক্স OS +slug: Archive/B2G_OS +translation_of: Archive/B2G_OS +--- +
+

ফায়ারফক্স OS মজিলার ডেভেলপ করা, এবং লিনাক্স ও গেকো ইঞ্জিনে চলা একটি নতুন মোবাইল অপারেটিং সিস্টেম।

+
+ +
+

ফায়ারফক্স OS এর সোর্সকোড উন্মুক্ত এবং সে কারনে প্রোপ্রাইটরি প্রযুক্তি থেকেও মুক্ত। আমরা অ্যাপলিকেশন ডেভেলপারদের দারুন সব অ্যাপ তৈরি করার ক্ষমতা দিচ্ছি,  আর এটি ব্যবহারকারীদের সন্তুষ্ট করার জন্য যথেষ্ট পরিমান শক্তিশালি এবং সহজ।

+ +

ওয়েব ডেভেলপারদের বোঝার জন্য সবচেয়ে গুরুত্বপূর্ণ অংশ হচ্ছে, পুরো ইউজার ইন্টারফেসটি-ই একটি ওয়েব অ্যাপ যেটা অন্যান্য ওয়েব অ্যাপ চালু এবং প্রদর্শন করতে পারে। ইউজার ইন্টারফেসে কোন ধরনের পরিবর্তন করতে হলে বা ফায়ারফক্স ওএস এর জন্য অ্যাপ তৈরি করতে হলে আপনাকে সেটা করতে হবে HTML, CSS এবং JavaScript ব্যবহার করেই। তবে চিন্তার কোন কারন নেই! আপনি আমাদের API এর মাধ্যমে মোবাইল ডিভাইসের সকল হার্ডওয়্যার ও সেবা ব্যবহার করার সুবিধা পাবেন।

+ +

প্রোডাক্ট হিসেবে দেখতে চাইলে ফায়ারফক্স ওএস হচ্ছে বুট টু গেকো (B2G) এর উপরে মজিলা (ও আমাদের OEM প্রস্তুতকারকদের) করা ব্র্যান্ডিং এবং সমর্থিত সেবা যুক্ত করা একটি অপারেটিং সিস্টেম এর ইঞ্জিনিয়ারিং কোড নেম। বুট টু গেকো মজিলার ভেতরের কিছু ইঞ্জিনিয়ার এবং বাইরের মজিলা/উন্মুক্ত সোর্স পরিবারের সম্মিলিত প্রচেষ্টায় ডেভেলপ করা সম্ভব হয়েছে।

+
+ + + +
+

ফায়ারফক্স OS এর জন্য অ্যাপ তৈরি

+ +

ওপেন ওয়েব অ্যাপ এবং ফায়ারফক্স ওএস এ ইন্সটল যোগ্য অ্যাপ তৈরি করার জন্য আপনার সম্ভাব্য যতরকম তথ্য দরকার হবে, তা জানতে আমাদের অ্যাপ সেন্টারে যান!

+
+ +
+
+

প্লাটফর্ম গাইড

+ +

ফায়ারফক্স ওএস প্লাটফর্মের বিভিন্ন উপাদান কিভাবে একসাথে থাকে ও কাজ করে, তার বিস্তারিত নিয়ে প্লাটফর্ম ডেভেলপারদের জন্য একটি নির্দেশিকা।

+ + +
+ +
+

বিল্ড এবং ইন্সটল

+ +

ইমুলেটরে ফায়ারফক্স ওএস চালানো, উপযুক্ত ডিভাইস অথবা ডেস্কটপ সিমুলেটরে ফায়ারফক্স ওএস বিল্ড ও ইন্সটল করার বিস্তারিত নিয়ে একটি নির্দেশিকা।

+ + +
+ +
+

ডেভেলপার ফোন সমূহ

+ +

নির্দিষ্ট ডেভেলপার ফোন টুইক, হালনাগাদ, ঠিক করা এবং কেনা সংক্রান্ত তথ্য।

+ + +
+
+ +
+
+

অন্যান্য রিসোর্স

+ + +
+ +
+

অন্যান্য উপকারী পাতা

+ + +
+
+ +
+

দ্রষ্টব্যঃ ফায়ারফক্স ওএস ডকুমেন্টেশনের সম্পর্কিত চলতি কাজগুলোর হিসেব আমরা ফায়ারফক্স ওএস এর ডকুমেন্টেশনের অবস্থা পাতায় রাখছি। যদি আপনি আমাদের ফায়ারফক্স ওএস এর ডকুমেন্টেশনে অবদান রাখতে সহযোগিতা করতে চান, তাহলে কোন কাজটি করা প্রয়োজন জানতে এই পাতাটি দেখুন!

+
+ + + +
    +
  1. পরিচিতি
    2. +
  2. প্লাটফর্ম গাইড +
      +
    1. আর্কিটেকচার ওভারভিউ
      2. +
    2. অ্যাপস আর্কিটেকচার
      3. +
    3. গঙ্ক
      4. +
    4. গেকো
      5. +
    5. গাইয়া
      6. +
    6. নিরাপত্তা
      7. +
    7. ফিচার সমর্থন তালিকা
      8. +
    8. সেটিংস তালিকা
      9. +
    +
    3. +
  3. বিল্ড ও ইন্সটল +
      +
    1. ফায়ারফক্স ওএস বিল্ড ওভারভিউ
      2. +
    2. বিল্ড করার আবশ্যিক বিষয়াবলী
      3. +
    3. প্রথম বিল্ডের জন্য তৈরি হওয়া
      4. +
    4. ফায়ারফক্স OS বিল্ড করা
      5. +
    5. ফায়ারফক্স OS রূপান্তর করা
      6. +
    6. ফায়ারফক্স OS বা গাইয়া কিভাবে চলবে নির্বাচন করা
      7. +
    7. ফায়ারফক্স OS ডেস্কটপ ক্লায়েন্ট ব্যবহার করা
      8. +
    8. ফায়ারফক্স OS ইমুলেটর ব্যবহার
      9. +
    9. মোবাইল ডিভাইসে ফায়ারফক্স OS ইন্সটল
      10. +
    10. ফায়ারফক্স OS হালনাগাদ প্যাকেজ তৈরি ও প্রয়োগ
      11. +
    11. রানটাইম টুলস
      12. +
    +
    4. +
  4. ফায়ারফক্স ওএস উন্নয়ন +
      +
    1. গাইয়া উন্নয়নের সংক্ষিপ্ত নির্দেশনা
      2. +
    2. B2G উন্নয়নের সংক্ষিপ্ত নির্দেশনা
      3. +
    3. বিল্ড সিস্টেম প্রাইমার
      4. +
    4. ফায়ারফক্স OS বাগওয়ার্ক
      5. +
    5. গাইয়া হ্যাক করা
      6. +
    6. গাইয়া অ্যাপস নির্দেশনা
      7. +
    7. মার্কেট কাস্টমাইজেশন নির্দেশনা
      8. +
    8. হোস্ট ফাইল সম্পাদনা
      9. +
    9. .userconfig ফাইলের মাধ্যমে কাস্টমাইজ করা
      10. +
    10. ফায়ারফক্স ওএস অ্যাপ এর জন্য কিবোর্ড কাস্টমাইজ
      11. +
    11. b2g.sh স্ক্রিপ্ট কাস্টমাইজ
      12. +
    12. ফায়ারফক্স ওএস লোকালাইজ করা
      13. +
    +
    5. +
  5. ডেভেলপার ফোন গাইড +
      +
    1. ফোন এবং ডিভাইস বৈশিষ্ট্য
      2. +
    2. গিকসফোন
      3. +
    3. ZTE OPEN
      4. +
    4. ফ্লাম
      5. +
    5. সাধারন ডিভাইসের বৈশিষ্ট্য
      6. +
    6. সমস্যা সমাধান
      7. +
    7. ওপেন রেফারেন্স ডিভাইস সমূহের জন্য ভালো অভ্যাস
      8. +
    +
    6. +
  6. ফায়ারফক্স OS রিলিজ নোট সমূহ +
      +
    1. Firefox OS 1.3 for developers
      2. +
    2. Firefox OS 1.2 for developers
      3. +
    3. Firefox OS 1.1 for developers
      4. +
    4. Firefox OS 1.0.1 for developers
      5. +
    +
    7. +
  7. টেস্ট করা
    8. +
  8. ডিবাগ করা +
      +
    1. ফায়ারফক্স OS এর জন্য ডেভেলপার সেটিংস
      2. +
    2. ডেস্কটপে ফায়ারফক্স OS ডিভাইস যুক্ত করা
      3. +
    3. ফায়ারফক্স ডেভেলপার টুলস ব্যবহার করে ফায়ারফক্স OS ডিবাগের জন্য সেটআপ
      4. +
    4. ডিভাইসের কনসোল লগিং
      5. +
    5. ADB ইন্সটল ও ব্যবহার
      6. +
    6. স্ক্রীনশট নেয়া
      7. +
    7. ফায়ারফক্স OS অ্যাপ ম্যানেজার ব্যবহার
      8. +
    8. ফায়ারফক্স OS এ "মেমোরি শেষ" সম্পর্কিত সমস্যা সমাধান
      9. +
    9. gdb ব্যবহার করে B2G ডিবাগ
      10. +
    10. Valgrind ব্যবহার করে B2G ডিবাগ
      11. +
    +
    9. +
diff --git a/files/bn/archive/b2g_os/installing_on_a_mobile_device/index.html b/files/bn/archive/b2g_os/installing_on_a_mobile_device/index.html new file mode 100644 index 0000000000..1457038847 --- /dev/null +++ b/files/bn/archive/b2g_os/installing_on_a_mobile_device/index.html @@ -0,0 +1,129 @@ +--- +title: মোবাইল ডিভাইসে ফায়ারফক্স ওএস ইনস্টল +slug: Archive/B2G_OS/Installing_on_a_mobile_device +tags: + - B2G + - মোবাইল +translation_of: Archive/B2G_OS/Installing_on_a_mobile_device +--- +

আপনি যখন একবার supported mobile device এর জন্য Gecko বুট করে ফেলতে পারবেন তারপর আপনি firefox OS ইনস্টল করতে পারবেন । এই আর্টিকেলটি আপনাকে সাহায্য করবে কিভাবে তা করতে হবে।

+ +
Note: আপনি যখন প্রথমবারের মত আপনার ফোন ফ্ল্যাশ করতে যাবেন তখন অবশ্যই দেখবেন  আপনার ফোনে  Android 4 (Ice Cream Sandwich) ইনস্টল করা আছে কিনা । তা না হলে এই প্রসেসটি ঠিকমত কাজ করবে না । আপনি  যদি  একবার B2G ইনস্টল করতে পারেন  তাহলে এরপর  থেকে এটি সহজে এর উপরে গিয়ে আপডেট করতে পারেন ।
+ +

Installing ADB

+ +

On OSX

+ +

যদি আপনার সেটে OSX এ Homebrew থাকে:

+ +
brew install android-platform-tools
+ +

না থাকলে ডাউনলোড করুন Android Developer Tools এবং আপনার PATH টি বাইনারীতে সংযুক্তি করুন।

+ +

On Ubuntu

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

Flashing your phone

+ +

আপনার ফোনটি সম্পূর্ণরূপে Flash করতে টাইপ করুন:

+ +
./flash.sh
+
+ +

এইতো। এখন যে B2G টি আপনার ডিভাইসে পেয়েছেন সেটি স্বয়ংক্রিয়ভাবে ফ্ল্যাশ হবে। 

+ +

Configuring the udev rule for your device

+ +

লিনাক্সে যদি আপনি এই লেখাটি দেখতে পানঃ

+ +
< waiting for device >
+ +

তাহলে আপনাকে বুঝতে হবে আপনি এখনো fastboot  এরজন্য udev rule টি সংযুক্ত করেননি যা ADV এর জন্য এক হিসেবে একই নয়। আপনি এখন lsusb রানিং করে USB vendor ID টি পেতে পারেন । সাধারণত এটি গুগলেও আছেঃ18d1, এর পর /etc/udev/rules.d/51-android.rules

+ +

এই লাইনটি যুক্ত করলে আশা করা যায় আপনার ডিভাইসটি কাজ করার জন্য উপযুক্তঃ

+ +
SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"
+ +
Note 1: আপনি যদি লিনাক্সে libusb error "-3" এইটি দেখতে পান তাহলে আপনাকে ধরে নিতে হবে USB ডিভাইস ব্যবহার করার জন্য আপনাকে এটি রুট করতে হবে। sudo লিখে পুরো স্ক্রিপটি পুনরায় রান করান।
+ +
Note 2:যদি আপনি Unagi অথবা Geeksphone Keon phone ব্যবহার করে থাকেন  তাহলে  আপনার  এই  দুইটি লাইন দরকার- একটি হচ্ছে  original phone vendor's ID এবং অন্যটি গুগলের জন্য।
+ +

Special notes for Hamachi, Helix, and Leo devices

+ +

./flash.sh এই স্ক্রিপ্টটি শুধুমাত্র gecko এবং gaia ডিভাইসের জন্য কাজ করবে । কিন্তু আপনার সেট যদি হয় hamachi, helix or leo device এর তখন কি করবেন ? এই জন্য আমাদের সাজেশন আপনি OEM কে বেস বিল্ড(firmware পাবার জন্য) আর gonk layers ব্যবহার করে ফ্ল্যাশ করবেন।তারপর gecko এবং gaia ফ্ল্যাশ করতে পারেন। যপনি যদি ইমেজ ব্যবহার করে ফ্ল্যাশ করতে চান , তাহলে একটি ওভাররাইড ফাইল আছে যেখানে আপনি পাবেন ./flash.sh -f এইটি। এই ইমেজ ফাইলটি ব্যবহার করে আপনি সহজেই আপনার ডিভাইসটি ফ্ল্যাশ করতে পারেন। 

+ +

Special notes for the Samsung Galaxy S2

+ +

আপনার সেট যদি হয় Galaxy S2 এবং আপনি যদি heimdall 1.3.2 (the latest version;চেক করুন heimdall version)ব্যবহার করে থাকেন , তাহলে আপনি alarming error হিসেবে "FACTORYFS upload failed!"followed by "Heimdall flashing failed" and some additional information এই লেখাটি দেখতে পারেন। এটি আসলে সাকসেস কন্ডিশন এবং আপনি নিশ্চিন্তে এইটি ইগনোর করতে পারেন।  

+ +

আপনি যদি এইটি থেকে মুক্তি পেতে চান তাহলে source copy থেকে heimdall এর একটি কপি গ্র্যাপ করতে পারেন যা 1.3.1এ রিলিজ হয়েছে ("git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06")।তারপর README অনুসারে কম্পাইল করুন  এরপর ইনস্টল করুন । দেখবেন error গুলো চলে গিয়েছে । যদি ও এই জিনিসটা খুব একটা দরকারী নয় ।

+ +

Heimdall সকল সংস্করণ 100MB চেয়ে বড়  system.img ফ্ল্যাশ করতে সক্ষম নয়। তখন এই কাজটি করুনঃ

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

এইখান থেকে দেখুন আপনারটি কত বড় । যদি আপনারটি এর থেকেও বড় হয় ,IRC তে জিজ্ঞাসা করুন ।এছাড়া দুই পর্যায়ে তা করার উপায় আছে ।

+ +

Added step for the Samsung Galaxy S2

+ +

আপনি যদি Galaxy S2 ফ্ল্যাশ করে থাকেন তাহলে আপনাকে আরো কিছু কাজ করতে হবে।Gaia flash.sh script দ্বারা স্বয়ংক্রিয়ভাবে কখনো ফ্ল্যাশ হয় না । এই জন্য আপনাকে অতিরিক্ত এই কোডটি  লিখতে  হবেঃ

+ +
./flash.sh gaia
+
+ +

Flashing specific partitions to fastboot phones

+ +

আপনি fastboot phones গুলোতে পার্টিশন নির্দিষ্ট করে দিয়ে ও ফ্ল্যাশ করতে পারেন (Galaxy S2 ছাড়া যেকোন ফোনেই সম্ভব)।উদাহরণস্বরূপঃ

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

Updating specific modules

+ +

ফ্ল্যাশ করার সময় আপনি চাইলে যে কোন কিছু আপডেট করতে পারেন শুধুমাত্র তাদের নাম specific করে। উদাহরণস্বরূপঃ

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

যদি আপনি শুধু একটি এপ্লিকেশন আপডেট করতে চান তাহলে আপনি BUILD_APP_NAME এর environment variable ব্যবহার করতে পারেন।

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

যদি আপনার ফোনটি ডেভেলাপার ভার্সন না হয় তাহলে আপনি gaia ব্যবহার করে আপডেট করতে পাড়েন।

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

Next steps

+ +

এখন আশা করা যায় আপনার ফোন Gecko থেকে বুট চালু হবে! চালু হওয়ার পর চেকিং শুরু করুন। write some code, test, অথবা do some debugging!

+ +
Note: একটি সহায়ক টিপঃ যদি  আপনার বিল্ডকৃত  B2G শুরু  হবার পরে স্ক্রিণ লক থাকে এবং পাসওয়ার্ড চাই  তাহলে ডিফল্ট কোডটি হল ০০০০।
+ +

Troubleshooting

+ +

এইখানে আপনাদের জন্য কিছু টিপস দেওয়া হল যদি B2G ইনস্টল করার পর অথবা আপডেট করার পর আপনার ডিভাইসটি ঠিকমত কাজ না করে।

+ +

যদি UI না শুরু হয়

+ +

আপনি আপনার ফোন আপডেট করার পর যদি ইউজার ইন্টারফেস আরম্ভ না হয়, আপনি আউট অফ ডেট কনফিগারেশন  থেকে এটি পুনরায় সেট করতে পারেন।  কিভাবে সম্ভব নিচে তা দেখানো হল:

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

যদি আপনি ডেভেলপার থেকে প্রোডাকশন মোডে পরিবর্তন চান

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

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

+ +

এর মানে হল ফ্ল্যাশ করার পূর্বে আপনার ফোনকে রুট করা জরুরী। আপনি যদি b2gতে রুট করতে চান আপনাকে অবশ্যই রুট পার্টিশন করতে হবে। আর ইনস্টল করার জন্য আপনার ফোনকে অবশ্যই রুট করা থাকতে হবে।

+ + + + diff --git a/files/bn/archive/b2g_os/introduction/index.html b/files/bn/archive/b2g_os/introduction/index.html new file mode 100644 index 0000000000..1cf51aed9b --- /dev/null +++ b/files/bn/archive/b2g_os/introduction/index.html @@ -0,0 +1,96 @@ +--- +title: ফায়ারফক্স ওএস পরিচিতি +slug: Archive/B2G_OS/Introduction +tags: + - B2G + - Community + - Firefox OS + - Gaia + - Introduction +translation_of: Archive/B2G_OS/Introduction +--- +
+

মোবাইলে ওয়েব দিয়ে যা করা সম্ভব, তার সীমাকে ছাড়িয়ে যেতে এবং ব্যবহারকারীদের নতুন একটি অংশকে তাদের প্রথম স্মার্টফোন সহ অনলাইনে আসার সক্ষমতা দিতেই এসেছে ফায়ারফক্স ওএস। এটা লিনাক্সের উপর ভিত্তি করে, উন্মুক্ত ওয়েবের আদর্শ মান বজায় রেখে, মজিলার গেকো প্রযুক্তি ব্যবহার করে তৈরি করা ওপেন সোর্স মোবাইল অপারেটিং সিস্টেম। এক কথায় এটা মোবাইল প্ল্যাটফর্ম যে কি হতে পারে, তার পুনঃআবিষ্কার।

+ +

হার্ডওয়্যারের ক্ষমতা ব্যবহারের জন্য ওয়েব এপিআই এর ব্যবহার শুরু হওয়ার পর থেকে, ব্যবহারকারীদের সমৃদ্ধ ও রুচিসম্মত স্মার্টফোন এক্সপেরিয়েন্স উপস্থাপনের মাধ্যমে, মজিলা বিশ্বাস করে যে, ডেভেলপারগণের জন্য ওয়েব দারুণ সব সুযোগ নিয়ে আসবে। এতে করে তারা চমৎকার পণ্য নিয়ে নতুন সর্বসাধারণের কাছে পৌছাতে পারবে।

+
+ +

প্রত্যাশিত ব্যবহারকারী

+ +

এই ডকুমেন্টেশন সেট টি প্রধানত ওয়েব ডেভেলপার এবং প্লাটফর্ম ডেভেলপারদের উদ্দেশ্য করে তৈরি করা হয়েছে, যারা ফায়ারফক্স ওএস কিভাবে কাজ করে, এই প্রজেক্টে কিভাবে অবদান রাখতে হবে, এবং কিভাবে তারা সফটওয়্যারটির কাস্টম ভার্শন তৈরি করবে এবং ডিভাইস সমূহে ইন্সটল করবে ইত্যাদি জানতে আগ্রহী। যারা নিজেদের ওয়েব অ্যাপ তৈরি করতে ও বণ্টন করতে চায়, তাদের যাওয়ার জন্য অ্যাপ সেন্টার এবং মার্কেটপ্লেস জোন ভালো জায়গা।

+ +

ফায়ারফক্স ওএস এর প্রাথমিক ওয়াদা

+ +

ওয়েব/প্লাটফর্ম ডেভেলপারদের জন্য যে বিষয়টি বোঝা সবচেয়ে গুরুত্বপূর্ণ সেটি হচ্ছে, পুরো ইউজার ইন্টারফেসটি-ই একটি ওয়েব অ্যাপ, যা অন্যান্য ওয়েব অ্যাপ প্রদর্শন ও চালু করতে সক্ষম। ইউজার ইন্টারফেস এবং যেকোনো অ্যাপ্লিকেশনে করা পরিবর্তন এবং ফায়ারফক্স ওএস এ চালানোর জন্য যে অ্যাপ্লিকেশন-ই তৈরি করেন না কেন, তার মধ্যে আদর্শ ওয়েব প্রযুক্তি থাকবেই। কিন্তু মোবাইল ডিভাইসের হার্ডওয়্যার এবং সার্ভিস সমূহ ব্যবহারের সকল সুবিধা থাকবে।

+ +

একটি পন্যের দৃষ্টিকোণ থেকে ফায়ারফক্স ওএস হচ্ছে বুট টু গেকোর উপর মজিলার ব্র্যান্ডিং এবং সহায়তা সেবা। এটা অপারেটিং সিস্টেমের প্রকৌশলগত সাংকেতিক নাম। ফায়ারফক্স ওএস এর ইউজার ইন্টারফেসকে বলা হয় গায়া, এবং এর মধ্যে অপারেটিং সিস্টেমটির ডিফল্ট অ্যাপস এবং সিস্টেম ফাংশন অন্তর্ভুক্ত।

+ +

প্লাটফর্ম আর্কিটেকচার সম্পর্কে আরও বিস্তারিত জানতে আমাদের প্লাটফর্ম নির্দেশনা দেখুন।

+ +

বর্তমান এবং ভবিষ্যৎ পরিকল্পনা

+ +

যেহেতু ফায়ারফক্স ওএস এর ১.৩/১.৪ সংস্করণ স্থিতিশীল পর্যায়ে এসে পৌঁছেছে, তাই ২.০ সংস্করণটি বর্তমানে উন্নয়ন প্রক্রিয়াধীন। বাজারে বর্তমানে গ্রাহকদের জন্য এবং ডেভেলপারদের জন্য উভয় প্রকার ফোন-ই রয়েছে। আরও জানতে নিচের অংশ পড়ুনঃ

+ + + +

প্রকাশ চক্র

+ +

ফায়ারফক্স ওএস ১.২ থেকে এর রিলিজ সাইকেল, গেকো এবং ফায়ারফক্স ডেস্কটপ রিলিজ সাইকেল (৬ সপ্তাহ) এর সাথে যতটা সম্ভব কাছাকাছি রাখা হয়েছে। প্রতি তিন মাস অন্তর অন্তর একটি নতুন ফায়ারফক্স ওএস ভার্শন অবমুক্ত করা হয়। সুতরাং প্রতি দুইটি গেকো (ফায়ারফক্স ব্রাউজারের প্রাণ) রিলিজের জন্য একটি ফায়ারফক্স ওএস রিলিজ করা হবে।

+ +

উদাহরন স্বরূপ, গেকো ২৯ বাদ দিয়ে ৩০ ফায়ারফক্স ১.৪ এর সাথে বান্ডেল করা; এবং গেকো ৩১ বাদ রেখে ফায়ারফক্স ২.০ এর সাথে বান্ডেল করা হয়েছে।

+ +
+

নোটঃ ফায়ারফক্স ওএস এবং গেকো / ডেস্কটপ ফায়ারফক্স এর সাথে সংশ্লিষ্ট ভার্শন গুলো সম্পর্কে জানার জন্য আমাদের র‍্যাপিড রিলিজ ক্যালেন্ডার দেখুন, এবং আমাদের রিলিজ সমূহ কিভাবে ব্যবস্থাপনা করা হয় জানতে ফায়ারফক্স ওএস রিলিজ মাইলস্টোন সমূহ পড়ুন।

+
+ +

পরিবার

+ +

গিকো এবং গাইয়া এর বুট মজ়িলা এর প্রকৌশল দলের সাথে সাথে অনেক মজিলা /open source সম্প্রদায় থেকে বহিরাগত কন্ট্রিবিউটরদের মাধ্যমেও ডেভেলপ করা হয়।আপনি যদি ফায়ারফক্স ওএস অথবা গায়া ডেভেলপমেন্টের কোন দৃষ্টিভঙ্গি সম্পর্কে ওই সম্প্রদায়ে কথা বলতে চান ,তাহলে আমাদের মেইলিং লিস্ট এবং আই আর সি চ্যানেলগুলো শুরু করার একটি ভালো জায়গা , বিস্তারিত নিচের ইনফো বক্সে।

+ +

বাগ গুলো ফিক্স করতে আমাদের বাগজিলা সিসটেমটি ব্যবহার করুন এবং ফায়ারফক্স ওএস কম্পনেন্টস এর বাগ ফাইল করুন। আপনি যদি কোন কম্পনেন্ট এর বাগ ফাইল করবেন তাহলে বিনা দ্বিধায় জিজ্ঞাসা করুন।

+ +
+

Note: If you have a question or a point to raise about a specific part of the B2G/Gaia source code (for example, a specific Gaia app), you can find more specific contact details on our Firefox Modules page.

+
+ +

অপারেটিং সিস্টেম তৈরি

+ +

B2G অপারেটিং সিস্টেম মজিলার Gecko রেন্ডারিং ইঞ্জিনের উপর ভিত্তি করে বানানো এবং Gonk নামক একটি বিমূর্ত ইউজার-স্পেস হার্ডওয়্যার (HAL) ও লিনাক্স কার্নেলের উপরে অবস্থিত। The Gecko talked about here is basically the same Gecko used in Firefox for Android, or Windows, or Mac OS X, etc. Gonk is basically another porting target of Gecko.

+ +

To learn how to build and install Firefox OS, consult our guide to Building and installing Firefox OS. You can find the B2G source code on Github.

+ +

গায়ায় অবদান রাখা

+ +

To contribute to Gaia, you don't need much more than a solid knowledge of web development. To learn about getting Gaia up and running, consult our Quickstart guide to Gaia development.

+ +

There are a number of useful tools available to you for debugging Gaia and other web apps running on Firefox OS. To learn about these and much more, consult our guide to Hacking Gaia.

+ +

ফায়ারফক্স ওএস এর জন্য অ্যাপ ডেভেলপ করা

+ +

Firefox OS apps are built using standard web technologies — HTML, CSS, JavaScript, etc. — so if you are a web developer you will also have most of what you need. There are a few special JavaScript APIs to know about, which allow you to access device hardware and key features (for example camera, gyroscope, light sensor, contacts, system alarms and notifications...), but these are all well documented on our App Center and Web Platform pages.

+ +
+

Note: If you are a beginner to building open web/Firefox OS apps, or if you want a concise account of the differences between web apps and traditional web pages, the best place to start is our apps Quickstart guide.

+
+ +

ক্রস-ফায়ারফক্স ওএস সমর্থন

+ +

Note that when developing apps for Firefox OS, you need to bear in mind what platform versions will be available on the devices your customers will have (see our available phones table for a list.) Remember that it is not as simple to update phone platform software as it is desktop software — users tend to be at the mercy of the network providers. You therefore need to develop apps to support these versions. This issue should go away soon, as more consumer Firefox OS devices appear, equipped with newer versions of Firefox OS out of the box.

+ +
+

The current baseline platform we recommended developing for is Firefox 1.1.

+
+ +

Note: MDN's web platform reference pages include browser/platform support information, plus you can find support information for more App-specific technologies on our Apps API Reference.

+ +

As an example, multiline Flexbox doesn't work on Firefox OS versions below 1.3, so you may need to use a simpler layout method or provide a fallback for older versions.

+ + + + + + diff --git a/files/bn/archive/b2g_os/pandaboard/index.html b/files/bn/archive/b2g_os/pandaboard/index.html new file mode 100644 index 0000000000..562a9dead3 --- /dev/null +++ b/files/bn/archive/b2g_os/pandaboard/index.html @@ -0,0 +1,68 @@ +--- +title: পান্ডাবোর্ড +slug: Archive/B2G_OS/Pandaboard +tags: + - পান্ডাবোর্ড + - ফায়ারফক্স ওএস + - বি২জি +translation_of: Archive/B2G_OS/Pandaboard +--- +
+ এটি একটি PandaBoard এ ফায়ারফক্স অপারেটিং সিস্টেম সেট আপ এর গাইড । PandaBoard  হচ্ছে কম খরচে OMAP 4 ভিত্তিক উন্নয়ন বোর্ড যা মোবাইল অপারেটিং সিস্টেম উন্নয়ন করে ।
+
+  
+
+ এই নির্দেশাবলী ধরে নেয় আপনার একটি অন্তত 4 গিগাবাইট এর এসডি কার্ড আছে ।
+
+  
+

এসডি কার্ড ফরম্যাট 

+
+ এই guide এর অনুসারে এসডি কার্ডটি ফরম্যাট করুন ।
+
+  
+
+  
+
+

ইউএসবি যোগাযোগ

+
+
+  
+
+ পান্ডাবোর্ড  ইউএসবি যোগাযোগ সক্রিয় করার জন্য নিম্নলিখিত steps গুলি অনুসরণ করুন।  B2G এর জন্য, ফাইল মোড হিসাবে "0666" ব্যবহার করা আপনার জন্য নিরাপদ ।
+
+  
+
+ পরীক্ষা করুন পান্ডাবোর্ডটি কম্পিউটারে প্লাগিং করার পর ইউএসবি ব্যবহার এবং চালু করা যায় কিনা :
+
lsusb
+
+ আপনি যদি টেক্সাস ইনস্ট্রুমেন্ট থেকে কিছু দেখন, তাহলে আপনি পান্ডাবোর্ড খুঁজে পাবেন । যদি না পান তাহলে সব তারগুলো খুলতে হবে এবং শুধু পান্ডাবোর্ড টা ইউএসবি তে সংযোগ করতে হবে ।
+
+  
+

বিল্ডিং এবং ফ্ল্যাশিং

+
+ পান্ডাবোর্ড এর জন্য configuring করার পর , এখন  আমরা  Negatusএর দিকে যাব ।এটি একটি এজেন্ট যেটি ডিভাইসে চলে এবং  ডিবাগ /অটমোটও কে সাহায্য করে ।./build.sh চালু করার সাথে সাথেই স্বয়ংক্রিয়ভাবে Negatus তৈরি হবে ।কিন্তু আপনাকে  libnspr(apt-get install libnspr4-dev)ইনস্টল করতে হবে। ইমেজ building পর , সবচেয়ে কৌশলপূর্ণ অংশ হচ্ছে পান্ডাবোর্ড কে ফ্ল্যাশিং করা ।
+
+  
+
+ এখানে নির্দেশাবলী অনুসরণ করার চেষ্টা করুন  here, এই পর্যন্ত এবং প্রাথমিক সেটআপ এর পার্ট ৩ পর্যন্ত'. আপনি  প্রাথমিক সেটআপ এর অংশ ১ বাদ দিতে পারেন  যেটি বিল্ড ধাপেই হয়ে গেছে ।প্রাথমিক সেটআপ অংশ ৩ শেষ করার পর আবার এখানে ফিরে আসুন ।
+
+  
+

এখন আপনি সাধিনভাবে ./flash.sh কমান্ডটি চালু করতে পারেন , এবংআশা করি সবকিছু ভালভাবে চলবে । যদি flash.sh স্ক্রিপ্ট চেষ্টা করে ইউজার ডাটা পার্টিশনটি মুছে ফেলতে এবং লাইন গুলো অপসারণ করতে ।এটি instructions এ একটি জানা সমস্যা ।

+

ফ্ল্যাশিং শেষ হওয়ার পর আপনাকে পুনরায় বুট করার প্রয়োজন হতে পারে সব ইউএসবি এবং পাওয়ার কর্ড খুলে এবং আবার পরে লাগাতে হবে (প্রথমে পাওয়ার কর্ড প্লাগ করা উচিত)  

+

এখানে পরিচিত সমস্যাগুলো নিয়ে কাজ করা হয়েছে :

+

"OMAP4XXX জন্য অপেক্ষা করছে ..." ইউএসবিবুট ব্যবহার করার চেষ্টা করার সময়

+

যদি আপনি এই বার্তা দেখতে পান , তাহলে সব তারগুলো খুলে ফেলুন পান্ডাবোর্ড থেকে। শুধু পান্ডাবোর্ডটি ইউএসবি এর মাধ্যমে লাগান । পাওয়ার এ সংযোগ দিবেন না । এখন চেষ্টা করুন এবং চালু করুন ইউএসবিবুটকে সুডো হিসাবে।

+

ফাস্টবুট ত্রুটি ফ্ল্যাশিং এর সময় 

+

যদি আপনার ফাস্টবুট এ কমান্ড এ সমস্যা হয় তাহলে আমি সুডো এর সাথে সাফল্য পেয়েছি । (অর্থাৎ : সুডো <fastboot command...>)

+

এছাড়াও, যদি ফাস্টবুট মুডে আপনার পান্ডাবোর্ডতি পেতে সমস্যা হলে (অর্থাৎ : কোন ডিভাইসই লিস্ট এর অন্তর্ভুক্ত থাকবে না যদি আপনি ফাস্টবুট কল করি ),তাহলে আপনি করতে পারেন:

+
    +
  1. পান্ডাবোর্ড থেকে সবকিছু খুলে ফেলতে হবে ।
    2. +
  2. GPIO বোতামটিকে চেপে ধরে রাখি ।
    3. +
  3. বোতামটিকে চেপে ধরে রাখা অবস্থায় পাওয়ারএ সংযোগ দেই ।
    4. +
  4. নিরেট  আলোটির অবস্থা দেখি ,এবং যখন একবার আলোটি হালকা ফ্ল্যাশ শুরু করে তখন GPIO বোতামটিকে ছেড়ে দেই ।
    5. +
+

এটি  তাহলে আপনার পান্ডাবোর্ডকে  ফাস্টবুট মুডে নিয়ে যাবে ।

+

এডিবি এর সাথে সংযোগ করতে পারে না 

+

 যদি আপনি ডিভাইস কে lsusb এ দেখেন, কিন্তু এডিবি / ফাস্টবুট ডিভাইস এবং লাইটগুলো বন্ধ থাকে  তাহলে তখন পাওয়ার এর উৎস সরিয়ে নিতে হবে এবং আবার সংযোগ দিতে হবে ।আর যদি লাইট জালানো থাকে তাহলে আপনাকে আক্তু অপেক্ষা করতে হবে (সর্বোচ্চ ৩০ সেকেন্ড)এডিবি নিবন্ধিত করার জন্য ।

+

মাঝেমধ্যে ফ্ল্যাশিং সফল বলে দাবী করলেও , কিন্তু এটা সফল হইনি । পান্ডাবোর্ড রিফ্লাশের মাধ্যমে ( অর্থাত্: রান ./flash.sh) এবং আবার চেষ্টা করুন । আমি প্রথমে পাওয়ার সংযোগ করার এবং এরপর ইউএসবি তারটি সংযোগ দেয়ার পরামর্শ দিচ্ছি ।

+

যদি আপনি এডিবি ডিভাইস পেয়ে থাকেন "??????????? অনুমতি নেই", এমনকি রুট হিসাবে, "কনফিগার ইউএসবি অ্যাক্সেস" অংশটি এই site এ চেক করুন এবং udev সংক্রান্ত নিয়ম অনুযায়ী ঠিক বা সংযোগ করুন । পরিবর্তনের পর পুনরায় আরম্ভ করতে ভুলবেন না ।

diff --git a/files/bn/archive/b2g_os/phone_guide/alcatel_onetouch_firec_4020d/index.html b/files/bn/archive/b2g_os/phone_guide/alcatel_onetouch_firec_4020d/index.html new file mode 100644 index 0000000000..37a69b67e6 --- /dev/null +++ b/files/bn/archive/b2g_os/phone_guide/alcatel_onetouch_firec_4020d/index.html @@ -0,0 +1,49 @@ +--- +title: অ্যালকাটেল ওয়ানটাচ ফায়ার সি ৪০২০ডি +slug: Archive/B2G_OS/Phone_guide/Alcatel_Onetouch_FireC_4020D +translation_of: Archive/B2G_OS/Phone_guide/Alcatel_Onetouch_Fire_C_4020D +--- +
+
Intex Cloud FX image from official website
+ +
+

অ্যালকাটেল ওয়ানটাচ ফায়ার সি ৪০২০ডি একটি ক্রেতা নির্ভর স্মার্ট ফোন যা Tarako ফায়ারফক্স ওএস এর উপর ভিত্তি করে তৈরী করা হয়, এটি ভারতে মুক্তিপ্রাপ্ত। এটি আগস্ট,২০১৪ সালে অ্যালকাটেল দ্বারা ভারতে মুক্তি দেওয়া হয়েছিলো।

+ +

ডিভাইসটি সংগ্রহ

+ +

এটি Intex Cloud FX ই-কমার্স সাইটের মাধ্যমে ভারতে কিনতে পাওয়া যায়।

+ + + +

সহজলভ্য রঙ

+ +

ডিভাইসটি নীলাভ কালো রঙ, গাঢ় বেগুনী এবং গাঢ় চকলেট রঙে পাওয়া যাচ্ছে।

+ +

ফোন সফটওয়্যার আপডেট করার পদ্ধতি

+ +

ডিভাইসটির সিস্টেম ইমেজ লক করা আছে। যখন নেটওয়ার্ক অপারেটরের একটি OTA আপডেট রিলিজ হবে তখন আপনি সফ্টওয়্যার আপডেট করতে পারবেন। ডিভাইসটির সিস্টেম ইমেজ 'ফায়ারফক্স ওএস ১.৩টি' এর উপর ভিত্তি করে তৈরী।

+
+
+ +

হার্ডওয়্যার বিস্তারিত বিবরণ

+ + + +

আরও পড়ুন

+ + diff --git a/files/bn/archive/b2g_os/phone_guide/best_practices_open_reference_devices/index.html b/files/bn/archive/b2g_os/phone_guide/best_practices_open_reference_devices/index.html new file mode 100644 index 0000000000..c358d4d3b1 --- /dev/null +++ b/files/bn/archive/b2g_os/phone_guide/best_practices_open_reference_devices/index.html @@ -0,0 +1,92 @@ +--- +title: ওপেন রেফারেন্স ডিভাইসের জন্য সেরা পদ্ধতি +slug: Archive/B2G_OS/Phone_guide/Best_practices_open_reference_devices +tags: + - Best practices + - Device + - Phones + - ফায়ারফক্স ওএস + - রেফারেন্স ডিভাইস +translation_of: Archive/B2G_OS/Phone_guide/Best_practices_open_reference_devices +--- +
+

নিম্নলিখিত নিবন্ধ ভাল পদ্ধতি এর একটি সেট প্রদান করার লক্ষ্যে কাজ করে যা আমরা বিশ্বাস করি প্রচুর পাওয়া যায় এমন ওপেন রেফারেন্স ডিভাইসের জন্য প্রস্তাবিত হওয়া উচিত। সকল সাম্প্রতিক ফায়ারফক্স ওএস রেফারেন্স ডিভাইস এইসব পদ্ধতি অনুসরণ করে,আসন্ন  ফ্লেম সহ।

+
+ +
+
ডিভাইসের থাকা উচিত :
+ +
 
+
+ + + +

সহজলভ্য এবং ইনস্টলযোগ্য বিল্ডস

+ +

রেফারেন্স ডিভাইস মূলত গড় ডিভাইস গ্রাহকদের চেয়ে বেশী টেকনিক্যাল জ্ঞানের অধিকারী ডেভেলপার এবং অন্যান্য গ্রুপ এর দিকে উদ্দেশ্যমূলক। এমনকি, তাই আমাদের এই ডিভাইসের ব্যবহারকারীরা তারা ইচ্ছুক না হলে তাদের নিজেদের বিল্ড কম্পাইল করে আশা করা উচিত নয় —তাদের অনেক জন্য এটি একটি সম্পূর্ণ সময় নষ্টের বিষয়।

+ +

ওপেন রেফারেন্স ডিভাইসের অ্যাক্সেসকরা সহজ হয় এমন একটি রক্ষণাবেক্ষণ আনলক বিল্ড থাকা উচিত বর্তমান ও ভবিষ্যতের জন্য।এর মানে একাধিক স্তরের বিল্ড পাওয়া যায়,কমপক্ষে :

+ + + +

তাদের একটি ডেডিকেটেড ডাউনলোড পেজে সহজে পাওয়া উচিত, এবং নিয়মিত এবং প্রায়ই আপডেট করা উচিত। এছাড়াও ডিভাইসসমূহের তাদের জন্য OTA আপডেট সহজলভ্য করা উচিত।

+ +

OEMs এইসব বিল্ড প্রদানের জন্য রেস্পন্সিবল হওয়া উচিত যেহেতু শুধুমাত্র তারাই আইনত সব প্রয়োজনীয় বাইনারি, ইত্যাদি বিতরণ করতে পারেন।

+ +

এটি ফায়ারফক্স ব্রাউজারে একটি অনুরূপ মডেল অনুসরণ করতে পারে, যেখানে প্রতিটি রিলিজ, স্থায়ী এবং নাইটলি চ্যানেলগুলি পরবর্তী সংস্করণের সোর্স কোড ভিত্তিক।

+ +

পুরোপুরি আনলক করা অপারেটিং সিস্টেম

+ +

ডিভাইস অপারেটিং সিস্টেম প্ল্যাটফর্ম সম্পূর্ণ আনলক করা উচিত, যাতে করে অ্যাপ্লিকেশন এবং প্ল্যাটফর্ম ডেভেলপারদের কোনো পছন্দসই পরীক্ষা এবং উন্নয়ন কাজ সম্পাদনের জন্য তাদের ডিভাইসের উপর নিয়ন্ত্রণের প্রয়োজনীয় স্বাধীনতা থাকতে পারে। এর মধ্যে রয়েছে:

+ + + +

বিশ্বব্যাপী সহজলভ্যতা

+ +

আপনি আপনার রেফারেন্স ডিভাইসের একটি সার্বজনীন মান পেতে চান, তাহলে আপনাকে এটি  বিশ্বব্যাপী প্রাপ্তিসাধ্য করা উচিত।যদি এই ক্ষেত্রে না হয়, বিভিন্ন লোক্যাল এর ব্যক্তিদের বিভিন্ন ডিভাইস দিয়ে কাজ করতে হবে, যা ভিন্ন ব্যবহার আনতে পারে।

+ +

কনজিউমার ফোনের সমতূল্য ফিচার সমর্থন

+ +

একটি রেফারেন্স ডিভাইস তৈরির কোন মানে হয়না যার সাথে আপনাকে শেষ পর্যন্ত কনজিউমার ডিভাইস হিসাবে যে ফায়ারফক্স ওএস বিল্ড এবং ওপেন ওয়েবে apps দেয়া হবে সেটির প্রযুক্তি ও সংশ্লিষ্ট ফিচারের কোন সমর্থন নেই।

+ +

এর মধ্যে রয়েছে:

+ + + +

ব্যাটারী বদল করার সহজলভ্যতা

+ +

প্রতিস্থাপন ব্যাটারী প্রায়ই বিভিন্ন ডিভাইসের জন্য পাওয়া আসলেই কঠিন হতে পারে,এবং অন্যথায় উপযোগী ডিভাইসগুলি অনর্থক ব্যবহৃত হতে পারে।সুতরাং যতটা সম্ভব বদলি ব্যাটারী প্রাপ্তিসাধ্য রাখা একটি ভালো উদ্যোগ।

+ +

সহজেই ভাষা পছন্দ সক্রিয় করা

+ +

যেহেতু এই ডিভাইসটি বিশ্বব্যাপী ছড়িয়ে দেওয়া হবে, রিসোর্স এর একাউন্ট সহজলভ্যতা এবং সবচেয়ে জনপ্রিয় টার্গেট মার্কেট লোকেইলের কথা বিবেচনা করে,যতটা সম্ভব বিভিন্ন ভাষার জন্য লোকালাইজড বিল্ড তৈরী করা জরুরী।

+ +

এটার সবচেয়ে সহজ সমাধান হচ্ছে লোকালাইজড গায়া বিল্ডস অথবা ল্যাঙ্গুয়েজ প্যাক যেগুলো আলাদাভাবে ডিভাইসে ফ্লাশড হয়, এবং মোজিলা যতটা দ্রুত সম্ভব এর  নির্মাণ এবং ইনস্টলেশনের জন্য কাজ করছে।

diff --git a/files/bn/archive/b2g_os/phone_guide/firefox_os_device_features/index.html b/files/bn/archive/b2g_os/phone_guide/firefox_os_device_features/index.html new file mode 100644 index 0000000000..de67a36a13 --- /dev/null +++ b/files/bn/archive/b2g_os/phone_guide/firefox_os_device_features/index.html @@ -0,0 +1,73 @@ +--- +title: ফায়ারফক্স OS ডিভাইস ফিচার +slug: Archive/B2G_OS/Phone_guide/Firefox_OS_device_features +tags: + - Beginner + - Firefox OS +translation_of: Archive/B2G_OS/Phone_guide/Firefox_OS_device_features +--- +

বাটন এবং নিয়ন্ত্রণ

+

যে কোন সাধারণ ফায়ারফক্স OS ডিভাইসের খুব কম সংখ্যক বাহ্যিক হার্ডওয়ার বাটন থাকেঃ

+
+
+ হোম বাটন
+
+ সাধারণত এই বাটনটি স্ক্রিনের নিচে মাঝ বরাবর জায়গায় থাকে। এটিতে চাপ দিলে , আপনি অ্যাপ লঞ্চারে ফিরে আসবেন। এটিকে ধরে রাখলে কার্ড সুইচিং ভিউ চালু হবে ; ওই ভিউতে কোন অ্যাপে সুইপ করলে সেই অ্যাপটি বন্ধ হয়ে যাবে।
+
+ ভলিউম কন্ট্রোল রকার
+
+ বামদিকে ভলিউম রকারটি থাকে ; উপরের অর্ধেক অংশে চাপ দেয়ার মাধ্যমে অডিও ভলিউম বাড়ানো যায় এবং নিচের অর্ধেক অংশে চাপ দেয়ার মাধ্যমে অডিও ভলিউম কমানো যায়।
+
+ পাওয়ার বাটন
+
+ ডিভাইসের উপরের ডান কোণার অংশে পাওয়ার বাটনটি থাকে।
+
+

সর্বনিম্ন যে পরিমাণ হার্ডওয়ার প্রয়োজন

+

সর্বশেষ ARM ভিত্তিক মোবাইল ডিভাইস ফায়ারফক্স ওএস ধারণ করতে সক্ষম। এই অংশটি সর্বনিম্ন প্রয়োজনীয় হার্ডওয়্যারের চাহিদার সাথে সাথে সুপারিশকৃত হার্ডওয়্যারের পরিমাণ ও বলে দিবে।

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
উপাদানসর্বনিম্নসুপারিশকৃত
সিপিইউARMv6 +

Cortex A5 শ্রেণীর অথবা ARMv7a with NEON হলে ভালো

+
জিপিইউ— +

Adreno 200 শ্রেণীর অথবা এর থেকে অপেক্ষাকৃত

+

ভালো কিছু

+
সংযোগ—ওয়াই-ফাই
+ থ্রিজি
সেন্সর—Accelerometer
+ Proximity
+ Ambient light
+ A-GPS
+
+

নোটঃ ভালো অভিজ্ঞতার জন্য ,এমন কোন ডিভাইস নির্বাচন করা ভালো  যেখানে ইউনিফর্ম  কালার প্রোফাইলের ব্যবস্থা আছে ( যা গ্রাফিক্স ডিভাইস ড্রাইভারের সাহায্যে বাস্তবায়িত) এবং নীরবতা বা নিরবতাবন্ধ করার জন্য এবং মিডিয়া চালু বা বন্ধ করার জন্য হেডফোনের সাপোর্ট। আধুনিক স্মার্টফোনগুলোতে এই সুবিধাগুলো  সাধারনভাবেই থাকে।

+
+
+
+  
+
diff --git a/files/bn/archive/b2g_os/phone_guide/flame/index.html b/files/bn/archive/b2g_os/phone_guide/flame/index.html new file mode 100644 index 0000000000..f4dfb4a2c1 --- /dev/null +++ b/files/bn/archive/b2g_os/phone_guide/flame/index.html @@ -0,0 +1,69 @@ +--- +title: ফ্লেইম +slug: Archive/B2G_OS/Phone_guide/Flame +tags: + - B2G + - Flame + - ডেভেলপার ফোন + - ফায়ারফক্স ওএস + - রেফারেন্স ডিভাইস +translation_of: Archive/B2G_OS/Phone_guide/Flame +--- +
+

A picture of the Flame device, showing the Firefox OS homescreen containing several app icons.শীঘ্রই আসছে

+ +

ফ্লেইম ডেভেলপার রেফারেন্স ফোন ফায়ারফক্স ওএস ডিভাইসের রিলিজে একটি মাইলফলক। ফ্লেইম হার্ডওয়্যার একটি প্রতিনিধি স্পেক্স এর সেট প্রস্তাব করে — FWVGA প্রদর্শন এবং ডুয়াল কোর প্রসেসর সহ ( Phone and device specs দেখুন পূর্ণ স্পেক্স এর জন্য) —ডেভেলপারদের দারুণ কন্টেন্ট এবং অভিজ্ঞতা গড়ে তুলতে সাহায্য করার জন্য। একটি একক হার্ডওয়্যার প্ল্যাটফর্ম পরীক্ষাকারীদের জন্য ভাল,কারণ এটি টেস্ট করা সহজ করে এবং ডিভাইস মডেল নির্দিষ্ট বাগ ইত্যাদির চিন্তা ছাড়াই নির্দিষ্ট সফ্টওয়্যার বিষয়ে সমস্যার সমাধান করতে পারে।

+
+ +

যদি আপনার হাতে আপনার ফোন থাকে এবং আপনি এটি নিয়ে কাজ করতে চান, ডেভেলপ এবং অ্যাপ বিতরণ, অথবা ফায়ারফক্স প্ল্যাটফর্মে অবদান রাখতে চান, নিচের লিঙ্কগুলো থেকে আপনাকে কোথায় কিভাবে কি করতে হবে তার নির্দেশনা পাবেন:

+ + + +

যদি আপনি একটি ফোন কিনতে বা ব্যবহার সম্পর্কে আরো জানতে চান তাহলে, নীচে আপনি প্রয়োজন এর তথ্য খুঁজে পাবেন।

+ +

একটি ডিভাইস ক্রয় করা

+ +

আমাদের ডিভাইসের প্রস্তুতকারক পার্টনার প্রায় মার্কিন $ 170 খুচরো মূল্যে বিশ্বব্যাপী শিপিং সহ, যাতে Q2 এর শেষ অংশে 2014 সালে কেনার জন্য ডিভাইসটি পাওয়া যায় সেই ব্যবস্থা করছে। শীঘ্রই প্রি অর্ডার এর জন্য পাওয়া যাবে!

+ +

জরুরী ডাউনলোড মোড

+ +

আপনার ফোনে একটি নতুন বিল্ড ফ্ল্যাশিং ব্যর্থ হলে, আপনার ফোন প্রতিক্রিয়াবিহীন হয়ে যায়, এবং ফোন ব্রিক মোডে প্রবেশ করতে পারবে না, আপনি পুনরুদ্ধারের জন্য জরুরী ডাউনলোডের মোড ব্যবহার করতে পারেন।

+ +

একটি USB তার এবং জরুরী ডাউনলোড টুল জরুরী ডাউনলোড মোডে প্রবেশ করার প্রয়োজন হয়। (টুল ডাউনলোড শীঘ্রই আসছে।)

+ +

রিকভারি মোড

+ +

আপনি আপনার ফোন তথ্য মুছে ফেলা বা ম্যানুয়ালি ফার্মওয়্যার আপডেট করতে রিকভারি মোডে প্রবেশ করতে পারেন।এই মোডে প্রবেশ করার দুটি উপায় আছে:

+ + + +

যখন রিকভারি মোডে, ভলিউম up/down keys চাপুন সিলেকশন হাইলাইট সরাতে, এবং পাওয়ার Key চাপুন নির্বাচন করতে। নিশ্চিত করুন যে আপনি আপনার ফোন তথ্য (পরিচিতি, এসএমএস, ইত্যাদি) ডেটা ক্লিয়ারিং এর আগে ব্যাক আপ করা আছে, এবং আপডেট করার পূর্বে আপগ্রেডের প্যাকেজ ডাউনলোড করা আছে।

+ +

RAM-র সমন্বয়

+ +

আপনি RAM ক্ষমতা সমন্বয় করতে পারেন  যাতে কম মেমরি ফুটপ্রিন্ট নিয়ে ফায়ারফক্স ওএস ফোনে অ্যাপ্লিকেশান কিভাবে কাজ করে দেখতে পারেন।

+ +

এটি ফাস্টবুট মোডে প্রবেশের মধ্য দিয়ে সম্পন্ন হয় (প্রথমে ফাস্টবুট ইন্সটল করুন, যা ADB এর মত একই SDK প্যাকেজ এ পাওয়া যাবে) এবং লিখতে হবে:

+ +
fastboot oem mem [0|256-1024]
+ +

“0” মেমরি স্বয়ংক্রিয়ভাবে সনাক্ত হয় এবং “256-1024” হল মেগাবাইটের সংখ্যা। উদাহরণস্বরূপ, যদি আপনি ডিভাইস RAM ক্ষমতা  512M এ সেট করতে চান, fastboot oem mem 512 লিখুন।

+ +

এর পরে সেটিংস কার্যকর করার জন্য আপনার ডিভাইসটি পুনরায় বুট করার প্রয়োজন হবে।এটি ব্যবহার করা যায় :

+ +
fastboot reboot
+ +

বর্তমান মেমরি আকার ব্রিক মোড লিখে এবং টাইপ করে ফিরে আসতে পারে:

+ +
fastboot getvar mem
+
+ +
RAM ক্ষমতা
diff --git a/files/bn/archive/b2g_os/phone_guide/geeksphone/geeksphone_faq/index.html b/files/bn/archive/b2g_os/phone_guide/geeksphone/geeksphone_faq/index.html new file mode 100644 index 0000000000..e05fd57ea9 --- /dev/null +++ b/files/bn/archive/b2g_os/phone_guide/geeksphone/geeksphone_faq/index.html @@ -0,0 +1,219 @@ +--- +title: Geeksphone FAQ +slug: Archive/B2G_OS/Phone_guide/Geeksphone/Geeksphone_FAQ +tags: + - NeedsReview + - orvi +translation_of: Archive/B2G_OS/Phone_guide/Geeksphone/Geeksphone_FAQ +--- +
+

Geeksphones হচ্ছে Telefonica এবং মোজিলার সঙ্গে যুক্ত মাদ্রিদ ভিত্তিক Geeksphone দ্বারা উৎপাদিত ডেভেলাপার প্রিভিউ ডিভাইস ।  এই সেট একজন ডেভেলাপারকে   ফায়ারফক্স ওএসের একটা রিয়েল পরিবেশ দিবে যাতে মোবাইল নেটওয়ার্ক এবং  accelerometer আর ক্যামেরার মত সত্যিকারের হার্ডওয়ার থাকবে । যা Firefox OS Simulator দেওয়া হত না । এইখানে এই ব্যাপারে আপনার যে কোন প্রশ্নের উত্তর দেওয়া হবে ।   

+
+

 Pre-purchase questions

+

ক্রয় করার পূর্বে Geeksphone সম্পর্কিত আপনার সকল প্রশ্নের উত্তর।

+

 

+

কারা Geeksphones  এর প্রধান audience?

+

প্রাথমিক অবস্থায় মোজিলা ডেভেলাপাররাই Geeksphones এর মেইন অডিয়েন্স । এইটি মূলত টেস্টিং আর কিছু এক্সপেরিমেন্টাল কাজের জন্য বানানো হয়েছে । তাই এইটাকে ফিক্স ডিভাইস বলা চলে না ।

+

+

আমি কিভাবে Geeksphone ডিভাইস পেতে পারি ? আর এইটা কিনতে কত খরচ হতে পারে ? 

+

আপনি চাইলেই  Geeksphone online store এই সাইট থেকে সরাসরি কিনতে পারেন ।  মূল্যের তথ্য আপনি সাইটেই পাবেন ।তাছাড়া আপনার কাজের প্রচেষ্টার উপর নির্ভর করে  মোজিলাও আপনার জন্য ডিভাইসটি available করে দিবে।  

+

Geeksphones কি সম্পূর্ণরূপে unlocked ?

+

উত্তরঃ হ্যাঁ। 

+

Geeksphones এ কি যে কোন সিম কার্ড কাজ করে ? 

+

উত্তর হ্যাঁ। 

+

কোন দেশগুলোতে Geeksphones পাওয়া যাবে ? 

+

Geeksphone সব দেশে ship করা যাবে । তবে আপনাকে আপনার গন্তব্যস্থলের কাস্টমসের ক্লিয়ারেন্স মেনেজ করতে হবে তারপরে ও যদি কোন সমস্যা হয় আপনি আপনার লোকাল কাস্টমসর সাথে যোগাযোগ করতে পারেন । 

+

কি ধরণের Geeksphone device আমার কিনা উচিত ? 

+

বর্তমানে Geeksphone এক ধরনের সেলই বিক্রি করছে যা Revolution নামে পরিচিত। এই ফোন এন্ড্রয়েড বিশিষ্ট হলে ও একে সহজে FirefoxOS এ ট্রান্সফর্ম করা যাবে । 

+

Peak মোবাইলের KEON অপেক্ষা দ্রুত প্রসেসর,ভাল ক্যামেরা এবং high-DPI স্ক্রিন আছে ।তাই বেশিরভাগ ডেভেলাপার keon অপেক্ষা এই ডিভাইসেই বেশি স্বাচ্ছন্দ্যবোধ করে। তথাপি high-DPI ডিভাইসে সাপোর্ট নিয়ে এখনো কাজ করা হচ্ছে তাই এইখানে বিভিন্ন ধরণের visual glitches এবং বাগ থাকতে পারে। যদি আপনি এই সমস্যাটুকু মেনে নিতে পারেন তাহলে Peakই হতে পারে আপনার জন্য সঠিক ডিভাইস ।  এছাড়া ও এইটা আপনার জন্য ভাল ডিভাইস হতে পারে যদি আপনার আগ্রহ থাকে ফায়ারফক্স ওএসের ব্যাপারে বিশেষ করে high-DPI সমর্থিত কোন এপস বাস্তবায়নে  অথবা আপনি একজন এপ ডেভেলাপার হতে পারেন যদি আপনার লক্ষ্যে high-end ডিভাইস পাবার ইচ্ছে থাকে যা ভবিষ্যতে শিপ করা হবে ।  
+  

+

Technical specifications

+

Geeksphones এর ফিচার সম্পর্কে আরও জানতে  নীচে দেখুন ।

+

Revolution

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComponentDetails
CPUIntel 1.6ghz dual-core
TelephoneHSPA/WCDMA: 2100/1900/900/850 MHz
+ GSM/GPRS/EDGE: 850/900/1800/1900 MHz
Screen4.7" IPS LCD Multi-touch (960×540)
Camera8 mp /Flash LED, front 1.3mp
ROM capacity4 GB
RAM capacity1 GB
ConnectivityMicroSD
+ MicroUSB
+ WiFi 802.11 b/g/n
+ Bluetooth 3.0
+ GPS, AGPS
Sensors +

Light/proximity sensor
+ Accelerometer, compas

+
Battery2000 mAh
+

 

+

Keon

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComponentDetails
CPUQualcomm Snapdragon S1 7225AB (1GHz)
TelephoneUMTS 2100/1900/900 (3G HSPA)
+ GSM 850/900/1800/1900 (2G EDGE)
Screen3.5" HVGA Multi-touch (320x480 pixels)
Camera3 megapixels
ROM capacity4 GB
RAM capacity512 MB
ConnectivityMicroSD
+ MicroUSB
+ WiFi 802.11N
+ Bluetooth 2.1 EDR
+ FM Radio
+ GPS
SensorsAmbient light sensor
+ Proximity sensor
+ Accelerometer
Battery1580 mAh
+

Peak

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComponentDetails
CPUQualcomm Snapdragon S4 8225 (Dual-core 1.2Ghz)
TelephoneUMTS 2100/1900/900 (3G HSPA)
+ GSM 850/900/1800/1900 (2G EDGE)
Screen4.3" qHD IPS Multi-touch (960x540 pixels)
Camera8 megapixels (back)
+ 2 megapixels (front)
+ Flash
ROM capacity4 GB
RAM capacity512 MB
ConnectivityMicroSD
+ MicroUSB
+ WiFi 802.11N
+ Bluetooth 2.1 EDR
+ FM Radio
+ GPS
SensorsAmbient light sensor
+ Proximity sensor
+ Accelerometer
Battery1800 mAh
+

Geeksphones  এ Firefox OS 

+

এইখানে আপনি Geeksphone এ  কিভাবে ফায়ারফক্স ওএস বিল্ড করতে হয় এবং কিভাবে তা ব্যবহার ও আপডেট করতে হয় এই সম্পর্কিত  সকল প্রশ্নের উত্তর পাবেন ।

+

আমি কোথায় Geeksphones এর জন্য বিল্ড খুঁজে পাব?

+

আপনি Geeksphone ডিভাইসের জন্য সকল বিল্ড  Geeksphone website এর সাইটে খুঁজে পাবেন । 

+

আমি কোথায় বিল্ড  ম্যানিফেস্ট ফাইল পাব ?

+

সকল Geeksphone  এর জন্য ম্যানিফেস্ট ফাইল আপনি নীচের লিঙ্কে পেতে পারেন। http://www.geeksphone.com/manifests/.

+

আমি কিভাবে আমার Geeksphone এর বিল্ড ফ্ল্যাশ করব ?

+

Geeksphone আপনার ডিভাইস কিভাবে ফ্ল্যাশ  করবেন তা নিয়ে কিছু নির্দেশনা দিয়ে রেখেছে। আপনি চাইলে নীচের লিঙ্কটি দেখতে পারেন. 

+

 http://downloads.geeksphone.com/drivers/Manual_flash_geeksphone-eng.txt

+

Geeksphone লিনাক্স আর উইন্ডোজের জন্য ও প্রয়োজনীয় বাইনারি অন্তর্ভূক্ত করেছে। যদি আপনি ম্যাক ব্যবহারকারী  হন, তাহলে আপনাকে   Android SDK এ ইনস্টল করতে হবে । যদি আপনি উইন্ডোজ ব্যবহারকারী হন, আপনাকে USB ড্রাইভার ইনস্টল করতে হবে। 

+

আমি আমার Geeksphone এর জন্য কিভাবে সহযোগিতা পেতে পারি?

+

 hardware or build issues নিয়ে কোন প্রশ্ন থাকলে  ভিজিট করুন  Geeksphone forum. আপনি চাইলে ইমেইল করতে পারেন এইখানে  info@geeksphone.com অথবা  কল করুন  (+34) 915 51 62 91। 
+
+ যদি কোন  এপস বানাতে চান ফায়ারফক্স ওসের জন্য  তাহলে  MDN  এর Creating Apps for Firefox OS এর আর্টিকেলটি দেখুন । পাশাপাশি  ফ্যারফক্স মার্কেটপ্লেসের Developer Hub সাথে ও কথা  বলুন।    
+
+ যদি ফায়ারফক্স ওএস নিয়ে কোন প্রশ্ন থাকে তাহলে ভিজিট  SUMO.

+

See also

+ diff --git a/files/bn/archive/b2g_os/phone_guide/geeksphone/index.html b/files/bn/archive/b2g_os/phone_guide/geeksphone/index.html new file mode 100644 index 0000000000..a6dbc0a10d --- /dev/null +++ b/files/bn/archive/b2g_os/phone_guide/geeksphone/index.html @@ -0,0 +1,171 @@ +--- +title: Geeksphone +slug: Archive/B2G_OS/Phone_guide/Geeksphone +tags: + - Building + - Firefox OS + - Gaia + - Geeksphone + - Guide + - NeedsTranslation + - TopicStub + - tweaking +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.

+
+ +

আপনার গিকসফোনটি সর্বশেষ ইমেজ-এ আপডেট করুন 

+ +

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

+ +

আপনার ফোনটি ফ্লাশ করুন 

+ +

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

+ +

আপনার মোবাইল এবং কম্পিউটারটি সেটআপ করুন

+ +

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

লিনাক্স

+ +

To flash a Keon from Ubuntu 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 and ADB installed (try typing fastboot and adb in the command line if you are not sure).

+ +
    +
  1. Remove the USB cable and then remove the battery from the phone for 30 seconds.
    2. +
  2. Reinsert the battery and hold down the volume up and power buttons at the same time, for a few seconds, until the system recovery menu appears.
    3. +
  3. Reconnect the USB cable
    4. +
  4. Type in the command run adb reboot bootloader.
    5. +
  5. When the phone reboots and starts to show the Geeskphone logo, you are now in fastboot mode; 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:
    6. +
+ +
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.

+ +

আরও দেখুন

+ + diff --git a/files/bn/archive/b2g_os/phone_guide/index.html b/files/bn/archive/b2g_os/phone_guide/index.html new file mode 100644 index 0000000000..474dab7269 --- /dev/null +++ b/files/bn/archive/b2g_os/phone_guide/index.html @@ -0,0 +1,8 @@ +--- +title: ফায়ারফক্স OS ডেভেলপার ফোন গাইড +slug: Archive/B2G_OS/Phone_guide +tags: + - Firefox OS +translation_of: Archive/B2G_OS/Phone_guide +--- +

আপনি যদি মোজিলা থেকে ফায়ারফক্স OS চালিত একটি ডেভেলপার ফোন পেয়ে থাকেন অথবা কেউ যদি আপনার ডিভাইসে ফায়ারফক্স OS ইন্সটল করে দিয়ে থাকে, তবে এখানে আপনার ফোনে জন্য একটি সাধারণ কাজ করার নির্দেশনামূলক আর্টিকেল পাবেন। আমরা এই বিষয়ের ওপর কাজ করছি এবং সহজে উপস্থাপনের জন্য আপ্রাণ চেষ্টা চলছে, আশা করা হচ্ছে শীঘ্রই মোজিলা ডেভেলপার নেটওয়ার্কে এ সংক্রান্ত অনেকগুলো আর্টিকেল প্রকাশিত হবে। আপনি যদি ফায়ারফক্স ওএস বিল্ড/ফ্ল্যাশ করার প্রক্রিয়া নিয়ে জানতে ইচ্ছুক হন, তবে 'ফায়ারফক্স OS বিল্ড ও ইন্সটল করা' শীর্ষক আর্টিকেলটি দেখতে পারেন।

diff --git a/files/bn/archive/b2g_os/phone_guide/symphony_gofox_f15/index.html b/files/bn/archive/b2g_os/phone_guide/symphony_gofox_f15/index.html new file mode 100644 index 0000000000..a79a9bf0e2 --- /dev/null +++ b/files/bn/archive/b2g_os/phone_guide/symphony_gofox_f15/index.html @@ -0,0 +1,61 @@ +--- +title: Symphony GoFox F15 +slug: Archive/B2G_OS/Phone_guide/Symphony_GoFox_F15 +translation_of: Archive/B2G_OS/Phone_guide/Symphony_GoFox_F15 +--- +
+

Symphony GoFox F15 হচ্ছে একটি Firefox OS দ্বারা চালিত ফোন যা Symphony অফার করছে। এতে রয়েছে একক-কোর বিশিষ্ট ১ গিগাহার্টজ প্রসেসর (স্প্রেডট্রাম), ৫১২ মেগাবাইট র‍্যাম, একটি ৩.২ মেগাপিক্সেল পেছন ক্যামেরা এর সাথে রয়েছে একটি ০.৩ মেগাপিক্সেল সম্মুখ ক্যামেরা এবং ৩.৫ ইঞ্চি HVGA বিশিষ্ট পর্দা, এবং এতে Firefox OS 1.4 স্থাপিত হয়েছে। এই নিবন্ধে এটি সম্পর্কিত তথ্য রয়েছে, যাতে রয়েছে এটির হালনাগাদ করন এবং সমস্যা সমাধান সম্পর্কিত বিস্তারিত।

+
+

সিম্ফোনী এবং গ্রামীণফোন (টেলিনর) এর অংশীদারিত্বে বাংলাদেশে প্রকাশিত Symphony GoFox F15 ফোনটি ফায়ারফক্স ওএস ১.৪ চালিত গ্রাহক পর্যায়ে সর্বপ্রথম বাণিজ্যিক ডিভাইস, এই ডিভাইসটিতে ৩জি ভিডিও কলিং সক্ষমতা রয়েছে, যা এটিতে অন্য সব ফায়ারফক্স ডিভাইস থেকে আলাদা করেছে।

+

ফোনের ফিচারগুলো

+

Phone and device specs দেখুন।

+

সাধারন সমস্যা এবং সচরাচর জিজ্ঞাসিত প্রশ্ন

+

আমার GoFox F15 এ WowBox খুঁজে পাচ্ছিনা.

+
+
+ WowBox হচ্ছে গ্রামীণফোন (টেলিনর) এর একটি অ্যাপ এবং এজন্য এটি ব্যবহার করতে আপনার একটি জিপি সিম ব্যবহার করতে হবে। এর মানে হচ্ছে WowBox এর মত অসাধারন ফিচার উপভোগ করতে হলে আপনার GoFox F15 ডিভাইসে অবশ্যই একটি সক্রিয় জিপি সিম ব্যবহার করতে হবে।
+
+ আমি MDN এ অন্যান্য কিছু ফায়ারফক্স ওএস ডিভাইসে হার্ড রিসেট দেখেছি এবং আমার ডিভাইসটিও হার্ড রিসেট করতে চাই.
+
+ দুর্ভাগ্রক্রমে, GoFox F15 এর জন্য কোনো হার্ড রিসেট সুবিধা নেই। কিন্তু আপনি এখনও আপনার ডিভাইস রিসেট করতে পারবেন সেটিংস (SETTINGS) অপশন থেকে এবং এডিবি ব্যবহার করে লিনাক্স/ম্যাক থেকে ডিবাগ করতে পারবেন।
+
+ আমি আমার GoFox F15 এ স্ক্রিন রিডার চালু করেছি। এবং আমার টাচ্ আগের মত কাজ করছে না।
+
+ আপনি বিভিন্ন ভাবে এটাকে সাধারন করতে পারেন। একটি হচ্ছে ভলিউম চাবি ব্যবহার করে, আরেকটি হচ্ছে ম্যানুয়াল, অন্যটি হচ্ছে gesture ব্যবহার করে যেটা অন্ধ লোকেদের জন্য এবং এছাড়াও আপনি এডিবি দ্বারা ডিবাগিং করতে পারেন। উভয়ই নিছে বর্ণনা করা হল।
+
+

ভলিউম চাবি দ্বারা স্ক্রিন রিডার বন্ধ করুন

+

ভলিউম আপ প্রেস করুন, তারপর ডাউন প্রেস করুন, এভাবে তিনবার করুন (আপ, ডাউন, আপ, ডাউন, আপ, ডাউন)। স্ক্রিন রিডার আপনাকে এট পুনরায় করতে বলবে (ভলিউম আপ, ডাউন, আপ, ডাউন, আপ, ডাউন) এটি চালু করতে যদি এটি চালু না থাকে, অথবা বন্ধ করার জন্য এটি জিজ্ঞাসা করবে যদি এটি চালু থাকে। যদি আপনি বর্তমান অবস্থার কোনো পরিবর্তন করতে না চান তবে শুধু কিছু না করে এড়িয়ে যান।

+

ম্যানুয়ালি স্ক্রিন রিডার বন্ধ করুন

+

আপনাকে প্রথমে কিছু বেসিক জেস্টার পদ্ধতি জানতে হবে। এগুলোকে অন্ধ লোকেদের জন্য ব্যবহৃত জেস্টার নামে আখ্যা দেয়া হয়েছে।

+ +

+

For this you have to select the last object on your desired direction first. So, if you want to swipe left, you have to select the last and right most object. Select the left last for swiping right, bottom last for swiping upwards and top first for swiping downwards. Example screens are serially like these:

+

+

Screen Reader is specified only for the people who have shortage on their eye sight. So, using the gestures above blind people can easily use the smartphone. Manual procedure is the procedure blind people will use to turn it off. So, you should also follow these gestures while trying this procedure.

+

First, restart your device. Select any of the object on the lockscreen by Long Tap and then try to select the unlock button on right bottom of your screen by using Swipe Left. Then Double Tap anywhere on the screen and this will activate that button. So, you should be on the home screen having the phone unlocked.

+

    

+

Now, you have to use Two Fingers Swipe to flip he screen or scroll horizontally. But here you have to do the trick very much carefully to have the desired swipe. First, select the last app on the screen by using Long Tap or Swipe Left gestures. Use Two Fingers Swipe as described above. Now, you should be on the next screen. After that, select the SETTINGS app and enter using the same procedure of selection. Closely look at the placement of your fingers while Two Fingers Swipe.

+

+

Now, stop Screen Reader by selecting and entering serially like below.

+

     

+

 

+

Debugging on Linux / Mac

+

Open up a Terminal, and issue the following commands.

+
mkdir ~/.android
+echo "0x1782" > ~/.android/adb_usb.ini
+

Then restart adb server.

+
adb stop-server && adb start-server
+
+

Linux users need to add an extra udev rule by issuing the following command as root. (Not requierd by non-Linux users)

+
echo 'SUBSYSTEM=="usb", ATTRS{idVendor}=="1782", MODE="0666"' > /etc/udev/rules.d/51-android.rules
+ + diff --git a/files/bn/archive/b2g_os/phone_guide/zte_open/index.html b/files/bn/archive/b2g_os/phone_guide/zte_open/index.html new file mode 100644 index 0000000000..2970a11039 --- /dev/null +++ b/files/bn/archive/b2g_os/phone_guide/zte_open/index.html @@ -0,0 +1,191 @@ +--- +title: ফায়ারফক্স ওএস ZTE ওপেন +slug: Archive/B2G_OS/Phone_guide/ZTE_OPEN +translation_of: Archive/B2G_OS/Phone_guide/ZTE_OPEN +--- +
+

Mozilla is partnered with ZTE. This partnetship helped 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.

+
+
+

Note: The instructions are not valid for the ZTE Open C device. If you have a ZTE Open C device you should go to our ZTE Open C page instead.

+
+

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 button and power key 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: 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 choose “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” after the installation has completed. Your phone will then 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.

+
+
+

Note: There is a bug in ZTE's 1.2 build for the Open, whereby the notification tray won't pull down/open. This can be fixed by flashing the latest engineering version Firefox OS 1.2 to your phone. Make sure you have ADB installed and remote debugging turned on, then run the following commands in your terminal:
+
+ git clone -b v1.2 https://github.com/mozilla-b2g/gaia.git gaia_v1.2
+ cd gaia_v1.2
+ make reset-gaia

+
+

Firefox OS 1.3 and beyond

+

ZTE currently haven't released builds for Firefox OS 1.3 and beyond. To get these on your ZTE open you'll have to manually build and install a new Firefox OS/B2G build on it (start at the build prerequisite instructions, and treat the ZTE like it is an Inari device, for the purposes of configuration). You can recover your phone if necessary, using the procedure cited in the {{ anch("I bricked my phone") }} section.

+

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/bn/archive/b2g_os/platform/apps_architecture/index.html b/files/bn/archive/b2g_os/platform/apps_architecture/index.html new file mode 100644 index 0000000000..70c4d71825 --- /dev/null +++ b/files/bn/archive/b2g_os/platform/apps_architecture/index.html @@ -0,0 +1,25 @@ +--- +title: Firefox OS apps architecture +slug: Archive/B2G_OS/Platform/Apps_architecture +tags: + - NeedsReview| +translation_of: Archive/B2G_OS/Platform/Apps_architecture +--- +

আপনি যদি কোন অ্যাপ্লিকেশন ফায়ারফক্স ওএস এর জন্য তৈরি অথবা বিতরন করতে চান তাহলে আপনার অ্যাপ্লিকেশন এর অভ্যন্তরীণ কার্যকলাপগুলো কিভাবে শুরু এবং পরিচালনা হয় এগুলো না বুঝলে ও চলবে। এছাড়াও, এই তথ্য ফায়ারফক্স ওএস প্লাটফর্ম ডেভেলপার, পাশাপাশি নতুন নতুন হার্ডওয়্যার অপারেটিং সিস্টেম পোর্ট এর দলের জন্য উপযোগী হতে পারে।

+

অ্যাপ আরাম্ভ প্রক্রিয়া

+

যখন কোন ব্যবহারকারী একটি অ্যাপ্লিকেশন আরাম্ভ করতে নির্বাচন করেন, অথবা একটি অ্যাপ্লিকেশন অন্যথায় চালু করা প্রয়োজন হলে, হোম স্ক্রীন অ্যাপ গুলো {{domxref("App")}} API এর রেফারেন্স এ {{domxref("App.launch()")}} মেথড কে কল করে অ্যাপ টি চালু করার জন্য।

+

Gecko অনুরোধটি পায় এবং {{event("mozChromeEvent")}} কে অ্যাপ্লিকেশন এর বিস্তারিত সহ সিস্টেম অ্যাপ্লিকেশন এ পাঠায়। সিস্টেম অ্যাপ্লিকেশন একটি নতুন {{HTMLElement("iframe")}} কে DOM tree তে সন্নিবেশ করে একে পরিচালনা করে এবং অ্যাপটিকে নতুন  {{HTMLElement("iframe")}} এ পরিবেশন করে। ফ্রেমটি অ্যাপ এর হোম হিসেবে কাজ করে যতক্ষণ একে বন্ধ করা না হয়।

+

প্রত্যেক অ্যাপ এর একটি manifest থাকে যা অ্যাপ টিকে বর্ণনা করে এবং অ্যাপ্লিকেশন এর প্যাকেজের মধ্যে একটি নির্দিষ্ট ফাইল অনুক্রমে আছে.। বিস্তারিত জানতে এই অনুছেদ দেখুন App manifest.

+
+  
+

Gecko এর সাথে যোগাযোগ

+

 Gecko এবং Gaia's System অ্যাপ এর মধ্যে যোগাযোগ টা {{event("mozChromeEvent")}} এবং {{event("mozContentEvent")}} এর মাধ্যমে করা হয়। mozChromeEvents এ ক্রোম থেকে কন্টেন্ট এ সম্প্রচার করা হয় এবং mozContentEvents এ কন্টেন্ট থেকে ক্রোম এ সম্প্রচার করা হয়।এই যোগাযোগ বিশ্বস্ত UI তে নির্মাণ ও বন্ধ নিয়ন্ত্রণ ও বিজ্ঞপ্তি এবং একটি অ্যাপ্লিকেশন আরম্ভ করার জন্য সিস্টেম অ্যাপ্লিকেশন শুরু করতে বলা সহ অন্যান্য কাজের জন্য প্রয়োজনীয় ফাংশন উদ্বুদ্ধ করতে ব্যবহৃত হয়।

+

 

+
+

মন্তব্য : যদিও এটা সিস্টেম অ্যাপ্লিকেশন এবং এর জন্য অন্তর্নিহিত সমর্থন কোড নিয়ে  প্রাথমিকভাবে  কাজ করতে আগ্রহী কারো জন্য তাই এই সম্পর্কে ডকুমেন্টেশন উন্নতি প্রয়োজন। এখন, আপনি {{source("b2g/chrome/content/shell.js")}} থেকে এটা কিভাবে ব্যবহার করা হয়েছে এই সম্পর্কে তথ্য যোগার করতে পারেন।  

+
+

আরও আছে

+ diff --git a/files/bn/archive/b2g_os/platform/architecture/index.html b/files/bn/archive/b2g_os/platform/architecture/index.html new file mode 100644 index 0000000000..554048f90b --- /dev/null +++ b/files/bn/archive/b2g_os/platform/architecture/index.html @@ -0,0 +1,673 @@ +--- +title: Firefox OS architecture +slug: Archive/B2G_OS/Platform/Architecture +translation_of: Archive/B2G_OS/Architecture +--- +
+

This article is a high-level overview of the architecture of the Firefox OS platform, introducing key concepts and explaining how its components interact at a basic level.

+
+ +
+

Note: Keep in mind that Firefox OS is still a pre-release product. The architecture described here is not necessarily final and things are subject to change.

+
+ +

Firefox OS terminology

+ +

There are a few terms you should understand before reading further through our Firefox OS documentation.

+ +
+
B2G
+
Short for Boot to Gecko.
+
Boot to Gecko
+
The engineering codename for the Firefox OS operating system. You will often see this term used to refer to Firefox OS, since it was used for a long time before the project had an official name.
+
Firefox OS
+
Firefox OS is basically Mozilla's (and OEM partner's) branding and support services applied on top of Boot to Gecko, to create a final release product.
+
Gaia
+
The user interface of the Firefox OS platform. Anything drawn to the screen once Firefox OS is started up is a product of the Gaia layer. Gaia implements the lock screen, home screen, and all the standard applications you expect on a modern smartphone. Gaia is implemented entirely using HTML, CSS, and JavaScript. Its only interfaces to the underlying operating system are through open Web APIs, which are implemented by the Gecko layer. Third party applications can be installed alongside the Gaia layer.
+
Gecko
+
This is the Firefox OS application runtime; that is, the layer that provides all of the support for the trifecta of open standards: HTML, CSS, and JavaScript. It makes sure those APIs work well on every operating system Gecko supports. This means that Gecko includes, among other things, a networking stack, graphics stack, layout engine, a JavaScript virtual machine, and porting layers.
+
Gonk
+
Gonk is the lower level operating system of the Firefox OS platform, consisting of a Linux kernel (based on the Android Open Source Project (AOSP)) and userspace hardware abstraction layer (HAL). The kernel and several of the user space libraries are common open-source projects: Linux, libusb, bluez, and so forth. Some of the other parts of the HAL are shared with the AOSP: GPS, camera, and others. You could say that Gonk is a very simple Linux distribution. Gonk is a porting target of Gecko; that is, there's a port of Gecko to Gonk, just like there's a port of Gecko to OS X, Windows, and Android. Since the Firefox OS project has full control over Gonk, we can expose interfaces to Gecko that can't be exposed on other operating systems. For example, Gecko has direct access to the full telephony stack and display frame buffer on Gonk, but doesn't have this access on any other operating system.
+
Jank
+
This term, often used in the mobile apps space, refers to the effect of slow/inefficient code operations in an app, which block updating of the UI and cause it to become laggy or unresponsive. Our Gaia engineers use various optimization techniques to try to avoid this at all costs.
+
+ +

Architecture diagram

+ +

Firefox OS Architecture

+ +

Firefox OS bootup procedure

+ +

This section describes the process by which Firefox OS devices boot, what parts are involved, and where. As a quick reference, the general system bootup flow goes from bootloaders in the Kernel space, to init in the native code, to B2G and then Gecko in the user space, and then finally to the system app, window manager, then homescreen app inside Gecko. This is what all other apps are executed on top of.

+ +

+ +

The bootstrapping process

+ +

When a Firefox OS device is first turned on, execution begins in the primary bootloader. From there, the process of loading the main operating system proceeds in the typical way; a succession of increasingly higher-level bootloaders bootstrap the next loader in the chain. At the end of the process, execution is handed off to the Linux kernel.

+ +

There are a few points worth noting about the boot process:

+ + + +

The Linux kernel

+ +

The Linux kernel(s) used by Gonk is very similar to the upstream Linux from which it's derived (based on the Android Open Source Project). There are a few changes made by the AOSP that have not yet been upstreamed. In addition, vendors sometimes modify the kernel and upstream those changes on their own schedule. In general, though, the Linux kernel is close to stock.

+ +

The startup process for Linux is well-documented elsewhere on the Internet, so this article won't cover that.

+ +

The Linux Kernel will bring up devices and run essential processes. It will execute processes defined in init.rc and the successor init.b2g.rc to boot essential process such as b2g (FirefoxOS basic process, containing Gecko) and rild (telephony related process that might proprietary by different chipsets) — see below for more details. At the end of the process, a userspace init process is launched, as it is in most UNIX-like operating systems.

+ +

Once the init process is launched, the Linux kernel handles system calls from userspace, and interrupts and the like from hardware devices. Many hardware features are exposed to userspace through sysfs. For example, here's a code snippet that reads the battery state 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);
+}
+ +

More on the init process

+ +

The init process in Gonk handles mounting the required file systems and spawns system services. After that, it stays around to serve as a process manager. This is quite similar to init on other UNIX-like operating systems. It interprets scripts (that is, the init*.rc files) that consist of commands describing what should be done to start various services. The Firefox OS init.rc is typically the stock Android init.rc for that device patched to include the things required to kick-start Firefox OS, and varies from device to device.

+ +

One key task the init process handles is starting up the b2g process; this is the core of the Firefox OS operating system.

+ +

The code in init.rc that starts this up looks like this:

+ +
service b2g /system/bin/b2g.sh
+    class main
+    onrestart restart media
+ +
+

Note: Exactly how much init.rc differs from the Android version varies from device to device; sometimes, init.b2g.rc is simply appended, and sometimes the patches are more significant.

+
+ +

The userspace process architecture

+ +

Now it's useful to take a high-level look at how the various components of Firefox OS fit together and interact with one another. This diagram shows the primary userspace processes in Firefox OS.

+ +

Userspace diagram

+ +
+

Note: Keep in mind that since Firefox OS is under active development, this diagram is subject to change, and may not be entirely accurate.

+
+ +

The b2g process is the primary system process. It runs with high privileges; it has access to most hardware devices. b2g communicates with the modem, draws to the display framebuffer, and talks to GPS, cameras, and other hardware features. Internally, b2g runs the Gecko layer (implemented by libxul.so). See Gecko for details on how the Gecko layer works, and how b2g communicates with it.

+ +

b2g

+ +

The b2g process may, in turn, spawn a number of low-rights content processes. These processes are where web applications and other web content are loaded. These processes communicate with the main Gecko server process through IPDL, a message-passing system.

+ +

The b2g process runs libxul, which references b2g/app/b2g.js to get default preferences. From the preferences it will open the described HTML file b2g/chrome/content/shell.html, which is compiled within the omni.ja file. shell.html includes b2g/chrome/content/shell.js file, which triggers the Gaia system app.

+ +

rild

+ +

The rild process is the interface to the modem processor. rild is the daemon that implements the Radio Interface Layer (RIL). It's a proprietary piece of code that's implemented by the hardware vendor to talk to their modem hardware. rild makes it possible for client code to connect to a UNIX-domain socket to which it binds. It's started up by code like this in the init script:

+ +
service ril-daemon /system/bin/rild
+    socket rild stream 660 root radio
+ +

rilproxy

+ +

In Firefox OS, the rild client is the rilproxy process. This acts as a dumb forwarding proxy between rild and b2g. This proxy is needed as an implementation detail; suffice it to say, it is indeed necessary. The rilproxy code can be found on GitHub.

+ +

mediaserver

+ +

The mediaserver process controls audio and video playback. Gecko talks to it through an Android Remote Procedure Call (RPC) mechanism. Some of the media that Gecko can play (OGG Vorbis audio, OGG Theora video, and WebM video) are decoded by Gecko and sent directly to the mediaserver process. Other media files are decoded by libstagefright, which is capable of accessing proprietary codecs and hardware encoders.

+ +
+

Note: The mediaserver process is a "temporary" component of Firefox OS; it's there to aid in our initial development work, but is expected to go away eventually. This will most likely not happen until Firefox OS 2.0 at the earliest, however.

+
+ +

netd

+ +

The netd process is used to configure network interfaces.

+ +

wpa_supplicant

+ +

The wpa_supplicant process is the standard UNIX-style daemon that handles connectivity with WiFi access points.

+ +

dbus-daemon

+ +

The dbus-daemon implements D-Bus, a message bus system that Firefox OS uses for Bluetooth communication.

+ +

Gecko

+ +

Gecko, as previously mentioned, is the implementation of web standards (HTML, CSS, and JavaScript) that is used to implement everything the user sees on Firefox OS.

+ +
+

Note: To search the Gecko codebase, you could use http://dxr.mozilla.org. It’s more fancy and provides good reference features, but with limited repositories. Or you could try the traditional http://mxr.mozilla.org, which contains more Mozilla projects.

+
+ + + +

b2g/

+ +

The b2g folder contains mainly Firefox OS-related functions.

+ +
b2g/chrome/content
+ +

Contains Javascript files run above the system app.

+ +
b2g/chrome/content/shell.html
+ +

The entry point into Gaia — the HTML for the system app. shell.html pulls in settings.js and 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 contains system default setting parameters.

+ +
b2g/chrome/content/shell.js
+ +

shell.js is the first script to load in the Gaia system app.

+ +

shell.js imports all required modules, registers key listeners, defines sendCustomEvent and sendChromeEvent to communicate with Gaia, and provides webapp install helpers: indexedDB quota, RemoteDebugger, keyboard helper, and screenshot tool.

+ +

But the most important function of shell.js is to launch the Gaia system app, then hand over the overall systems related management work to the Gaia system app.

+ +
let systemAppFrame =
+  document.createElementNS('http://www.w3.org/1999/xhtml', 'html:iframe');
+    ...
+  container.appendChild(systemAppFrame);
+ +
b2g/app/b2g.js
+ +

This script contains predefined settings, like about:config in browser, and the same as Gaia's pref.js. These settings can be changed from the Settings app, and can be overwritten with Gaia’s user.js in the Gaia build script.

+ +

dom/{API}

+ +

New API implementations (post-b2g) will be located in dom/. Older APIs will be located in dom/base, for example Navigator.cpp.

+ +
dom/apps
+ +

.jsm will be loaded — .js API implementations such as webapp.js install, getSelf, etc.

+ +
dom/apps/PermissionsTable.jsm
+ +

All permissions are defined in PermissionsTable.jsm

+ +

dom/webidl

+ +

WebIDL is the language used to define web APIs. For supported attributes, read WebIDL_bindings.

+ +

hal/gonk

+ +

This directory contains files related to the gonk port layer.

+ +

Generated files

+ +
module/libpref/src/init/all.js
+ +

Contains all config files.

+ +
/system/b2g/ omni.ja and omni.js
+ +

Contains the pack of styles for resources in the device.

+ +

Processing input events

+ +

Most action inside Gecko is triggered by user actions. These actions are represented by input events (such as button presses, touches to a touch screen device, and so forth). These events enter Gecko through the Gonk implementation of nsIAppShell, a Gecko interface that is used to represent the primary entrance points for a Gecko application; that is, the input device driver calls methods on the nsAppShell object that represents the Gecko subsystem in order to send events to the user interface.

+ +

For example:

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

These events come from the standard Linux input_event system. Firefox OS uses a light abstraction layer over that; this provides some nice features like event filtering. You can see the code that creates input events in the EventHub::getEvents() method in widget/gonk/libui/EventHub.cpp.

+ +

Once the events are received by Gecko, they're dispatched into the DOM by 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);
+}
+
+ +

After that, the events are either consumed by Gecko itself or are dispatched to Web applications as DOM events for further processing.

+ +

Graphics

+ +

At the very lowest level, Gecko uses OpenGL ES 2.0 to draw to a GL context that wraps the hardware frame buffers. This is done in the Gonk implementation of nsWindow by code similar to this:

+ +
gNativeWindow = new android::FramebufferNativeWindow();
+sGLContext = GLContextProvider::CreateForWindow(this);
+ +

The FramebufferNativeWindow class is brought in directly from Android; see FramebufferNativeWindow.cpp. This uses the gralloc API to access the graphics driver in order to map buffers from the framebuffer device into memory.

+ +

Gecko uses its Layers system to composite drawn content to the screen. In summary, what happens is this:

+ +
    +
  1. Gecko draws separate regions of pages into memory buffers. Sometimes these buffers are in system memory; other times, they're textures mapped into Gecko's address space, which means that Gecko is drawing directly into video memory. This is typically done in the method BasicThebesLayer::PaintThebes().
    2. +
  2. Gecko then composites all of these textures to the screen using OpenGL commands. This composition occurs in ThebesLayerOGL::RenderTo().
    3. +
+ +

The details of how Gecko handles the rendering of web content is outside the scope of this document.

+ +

Hardware Abstraction Layer (HAL)

+ +

The Gecko hardware abstraction layer is one of the porting layers of Gecko. It handles low-level access to system interfaces across multiple platforms using a C++ API that's accessible to the higher levels of Gecko. These APIs are implemented on a per-platform basis inside the Gecko HAL itself. This hardware abstraction layer is not exposed directly to JavaScript code in Gecko.

+ +

How the HAL works

+ +

Let's consider the Vibration API as an example. The Gecko HAL for this API is defined in hal/Hal.h. In essence (simplifying the method signature for clarity's sake), you have this function:

+ +
void Vibrate(const nsTArray<uint32> &pattern);
+ +

This is the function called by Gecko code to turn on vibration of the device according to the specified pattern; a corresponding function exists to cancel any ongoing vibration. The Gonk implementation of this method is in hal/gonk/GonkHal.cpp:

+ +
void Vibrate(const nsTArray<uint32_t> &pattern) {
+  EnsureVibratorThreadInitialized();
+  sVibratorRunnable->Vibrate(pattern);
+}
+
+ +

This code sends the request to start vibrating the device to another thread, which is implemented in VibratorRunnable::Run(). This thread's main loop looks like this:

+ +
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() is the Gonk HAL API that turns on the vibrator motor. Internally, this method sends a message to the kernel driver by writing a value to a kernel object using sysfs.

+ +

Fallback HAL API implementations

+ +

The Gecko HAL APIs are supported across all platforms. When Gecko is built for a platform that doesn't expose an interface to vibration motors (such as a desktop computer), then a fallback implementation of the HAL API is used. For vibration, this is implemented in hal/fallback/FallbackVibration.cpp.

+ +
void Vibrate(const nsTArray<uint32_t> &pattern) {
+}
+ +

Sandbox implementations

+ +

Because most web content runs in content processes with low privileges, we can't assume those processes have the privileges needed to be able to (for example), turn on and off the vibration motor. In addition, we want to have a central location for handling potential race conditions. In the Gecko HAL, this is done through a "sandbox" implementation of the HAL. This sandbox implementation simply proxies requests made by content processes and forwards them to the "Gecko server" process. The proxy requests are sent using IPDL.

+ +

For vibration, this is handled by the Vibrate() function implemented 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()));
+}
+ +

This sends a message defined by the PHal interface, described by IPDL in hal/sandbox/PHal.ipdl. This method is described more or less as follows:

+ +
Vibrate(uint32_t[] pattern);
+ +

The receiver of this message is the HalParent::RecvVibrate() method in hal/sandbox/SandboxHal.cpp, which looks like this:

+ +
virtual bool RecvVibrate(const InfallibleTArray<unsigned int>& pattern,
+            const InfallibleTArray<uint64_t> &id,
+            PBrowserParent *browserParent) MOZ_OVERRIDE {
+
+  hal::Vibrate(pattern, newID);
+  return true;
+}
+ +

This omits some details that aren't relevant to this discussion; however, it shows how the message progresses from a content process through Gecko to Gonk, then to the Gonk HAL implementation of Vibrate(), and eventually to the Vibration driver.

+ +

DOM APIs

+ +

DOM interfaces are, in essence, how web content communicates with Gecko. There's more involved than that, and if you're interested in added details, you can read about the DOM. DOM interfaces are defined using IDL, which comprises both a foreign function interface (FFI) and object model (OM) between JavaScript and C++.

+ +

The vibration API is exposed to web content through an IDL interface, which is provided in nsIDOMNavigator.idl:

+ +
[implicit_jscontext] void mozVibrate(in jsval aPattern);
+ +

The jsval argument indicates that mozVibrate() (which is our vendor-prefixed implementation of this non-finalized vibration specification) accepts as input any JavaScript value. The IDL compiler, xpidl, generates a C++ interface that's then implemented by the Navigator class in Navigator.cpp.

+ +
NS_IMETHODIMP Navigator::MozVibrate(const jsval& aPattern, JSContext* cx) {
+  // ...
+  hal::Vibrate(pattern);
+  return NS_OK;
+}
+ +

There's a lot more code in this method than what you see here, but it's not important for the purposes of this discussion. The point is that the call to hal::Vibrate() transfers control from the DOM to the Gecko HAL. From there, we enter the HAL implementation discussed in the previous section and work our way down toward the driver. On top of that, the DOM implementation doesn't care at all what platform it's running on (Gonk, Windows, OS X, or anything else). It also doesn't care whether the code is running in a content process or in the Gecko server process. Those details are all left to lower levels of the system to deal with.

+ +

The vibration API is a very simple API, which makes it a good example. The SMS API is an example of a more complex API which uses its own "remoting" layer connecting content processes to the server.

+ +

Radio Interface Layer (RIL)

+ +

The RIL was mentioned in the section The userspace process architecture. This section will examine how the various pieces of this layer interact in a bit more detail.

+ +

The main components involved in the RIL are:

+ +
+
rild
+
The daemon that talks to the proprietary modem firmware.
+
rilproxy
+
The daemon that proxies messages between rild and Gecko (which is implemented in the b2g process). This overcomes the permission problem that arises when trying to talk to rild directly, since rild can only be communicated with from within the radio group.
+
b2g
+
This process, also known as the chrome process, implements Gecko. The portions of it that relate to the Radio Interface Layer are dom/system/gonk/ril_worker.js, which implements a worker thread that talks to rild through rilproxy and implements the radio state machine; and the nsIRadioInterfaceLayer interface, which is the main thread's XPCOM service that acts primarily as a message exchange between the ril_worker.js thread and various other Gecko components, including the Gecko content process.
+
Gecko's content process
+
Within Gecko's content process, the nsIRILContentHelper interface provides an XPCOM service that lets code implementing parts of the DOM, such as the Telephony and SMS APIs talk to the radio interface, which is in the chrome process.
+
+ +

Example: Communicating from rild to the DOM

+ +

Let's take a look at an example of how the lower level parts of the system communicate with DOM code. When the modem receives an incoming call, it notifies rild using a proprietary mechanism. rild then prepares a message for its client according to the "open" protocol, which is described in ril.h. In the case of an incoming call, a RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED message is generated and sent by rild to rilproxy.

+ +

rilproxy, implemented in rilproxy.c, receives this message in its main loop, which polls its connection to rild using code like this:

+ +
ret = read(rilproxy_rw, data, 1024);
+
+if(ret > 0) {
+  writeToSocket(rild_rw, data, ret);
+}
+ +

Once the message is received from rild, it's then forwarded along to Gecko on the socket that connects rilproxy to Gecko. Gecko receives the forwarded message on its IPC thread:

+ +
int ret = read(fd, mIncoming->Data, 1024);
+// ... handle errors ...
+mIncoming->mSize = ret;
+sConsumer->MessageReceived(mIncoming.forget());
+
+ +

The consumer of these messages is SystemWorkerManager, which repackages the messages and dispatches them to the ril_worker.js thread that implements the RIL state machine; this is done in the RILReceiver::MessageReceived() method:

+ +
virtual void MessageReceived(RilRawData *aMessage) {
+  nsRefPtr<DispatchRILEvent> dre(new DispatchRILEvent(aMessage));
+  mDispatcher->PostTask(dre);
+}
+ +

The task posted to that thread in turn calls the onRILMessage() function, which is implemented in JavaScript. This is done using the JavaScript API function JS_CallFunctionName():

+ +
return JS_CallFunctionName(aCx, obj, "onRILMessage", NS_ARRAY_LENGTH(argv),
+                           argv, argv);
+ +

onRILMessage() is implemented in dom/system/gonk/ril_worker.js, which processes the message bytes and chops them into parcels. Each complete parcel is then dispatched to individual handler methods as appropriate:

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

This code works by getting the request type from the object, making sure it's defined as a function in the JavaScript code, then calling the method. Since ril_worker.js implements each request type in a method given the same name as the request type, this is very simple.

+ +

In our example, RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED, the following handler is called:

+ +
RIL[UNSOLICITED_RESPONSE_CALL_STATE_CHANGED] = function UNSOLICITED_RESPONSE_CALL_STATE_CHANGED() {
+  this.getCurrentCalls();
+};
+ +

As you see in the code above, when notification is received that the call state has changed, the state machine simply fetches the current call state by calling the getCurrentCall() method:

+ +
getCurrentCalls: function getCurrentCalls() {
+  Buf.simpleRequest(REQUEST_GET_CURRENT_CALLS);
+}
+ +

This sends a request back to rild to request the state of all currently active calls. The request flows back along a similar path the RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED message followed, but in the opposite direction (that is, from ril_worker.js to SystemWorkerManager to Ril.cpp, then rilproxy and finally to the rild socket). rild then responds in kind, back along the same path, eventually arriving in ril_worker.js's handler for the REQUEST_GET_CURRENT_CALLS message. And thus bidirectional communication occurs.

+ +

The call state is then processed and compared to the previous state; if there's a change of state, ril_worker.js notifies the nsIRadioInterfaceLayer service on the main thread:

+ +
_handleChangedCallState: function _handleChangedCallState(changedCall) {
+  let message = {type: "callStateChange",
+                 call: changedCall};
+  this.sendDOMMessage(message);
+}
+ +

nsIRadioInterfaceLayer is implemented in dom/system/gonk/RadioInterfaceLayer.js; the message is received by its onmessage() method:

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

All this really does is dispatch the message to the content process using the Parent Process Message Manager (PPMM):

+ +
handleCallStateChange: function handleCallStateChange(call) {
+  [some internal state updating]
+  ppmm.sendAsyncMessage("RIL:CallStateChanged", call);
+}
+ +

In the content process, the message is received by receiveMessage() method in the nsIRILContentHelper service, from the 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;
+ +

This, in turn, calls the nsIRILTelephonyCallback.callStateChanged() methods on every registered telephony callback object. Every web application that accesses the window.navigator.mozTelephony API has registered one such callback object that dispatches events to the JavaScript code in the web application, either as a state change of an existing call object or a new incoming call event.

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

Applications can receive these events and update their user interface and so forth:

+ +
handleEvent: function fm_handleEvent(evt) {
+  switch (evt.call.state) {
+    case 'connected':
+      this.connected();
+      break;
+    case 'disconnected':
+      this.disconnected();
+      break;
+    default:
+      break;
+  }
+}
+ +

Take a look at the implementation of handleEvent() in the Dialer application as an extended example.

+ +

3G data

+ +

There is a RIL message that initiates a "data call" to the cellular service; this enables data transfer mode in the modem. This data call ends up creating and activating a Point-to-Point Protocol (PPP) interface device in the Linux kernel that can be configured using the usual interfaces.

+ +
+

Note: This section needs to be written.

+
+ + + +

This section lists DOM APIs that are related to RIL communications:

+ + + +

WiFi

+ +

The WiFi backend for Firefox OS simply uses wpa_supplicant to do most of the work. That means that the backend's primary job is to simply manage the supplicant, and to do some auxiliary tasks such as loading the WiFi driver and enabling or disabling the network interface. In essence, this means that the backend is a state machine, with the states following the state of the supplicant.

+ +
+

Note: Much of the interesting stuff that happens in WiFi depends deeply on possible state changes in the wpa_supplicant process.

+
+ +

The implementation of the WiFi component is broken up into two files:

+ +
+
dom/wifi/DOMWifiManager.js
+
Implements the API that's exposed to web content, as defined in nsIWifi.idl.
+
dom/wifi/WifiWorker.js
+
Implements the state machine and the code that drives the supplicant.
+
+ +

These two files communicate with one another using the message manager. The backend listens for messages requesting certain actions, such as "associate", and responds with a message when the requested action has been completed.

+ +

The DOM side listens for the response methods as well as several event messages that indicate state changes and information updates.

+ +
+

Note: Any synchromous DOM APIs are implemented by caching data on that side of the pipe. Synchronous messages are avoided whenever possible.

+
+ +

WifiWorker.js

+ +

This file implements the main logic behind the WiFi interface. It runs in the chrome process (in multi-process builds) and is instantiated by the SystemWorkerManager. The file is generally broken into two sections: a giant anonymous function and WifiWorker (and its prototype). The anonymous function ends up being the WifiManager by providing a local API, including notifications for events such as connection to the supplicant and scan results being available. In general, it contains little logic and lets its sole consumer control its actions while it simply responds with the requested information and controls the details of the connection with the supplicant.

+ +

The WifiWorker object sits between the WifiManager and the DOM. It reacts to events and forwards them to the DOM; in turn, it receives requests from the DOM and performs the appropriate actions on the supplicant. It also maintains state information about the supplicant and what it needs to do next.

+ +

DOMWifiManager.js

+ +

This implements the DOM API, transmitting messages back and forth between callers and the actual WiFi worker. There's very little logic involved.

+ +
+

Note: In order to avoid synchronous messages to the chrome process, the WiFi Manager does need to cache the state based on the received event.

+
+ +

There's a single synchronous message, which is sent at the time the DOM API is instantiated, in order to get the current state of the supplicant.

+ +

DHCP

+ +

DHCP and DNS are handled by dhcpcd, the standard Linux DHCP client. However, it's not able to react when the network connection is lost. Because of this, Firefox OS kills and restarts dhcpcd each time it connects to a given wireless network.

+ +

dhcpcd is also responsible for setting the default route; we call into the network manager to tell the kernel about DNS servers.

+ +

নেটওয়ার্ক ম্যানেজার

+ +

নেটওয়ার্ক ম্যানেজার 3G ডাটা এবং WiFi উপাদানের দ্বারা নেটওয়ার্কের দিক উন্মুক্ত করে থাকে।

+ +
+

নোটঃএটা লেখা দরকার

+
+ +

প্রোসেসেস এবং থ্রেড

+ +

ফায়ারফক্স ওএস POSIX থ্রেড ব্যবহার করে সকল প্রয়োজনীয় এপ্লিকেশন ব্যবহার করতে,এই থ্রেড একই সাথে প্রত্যেক প্রধান এপ্লিকেশনের অংশ এবং ওয়েব কর্মী ও সাহায্যকারী থ্রেডকে যুক্ত করে।সুন্দর ভ্যালু প্রোসেসকে প্রাধান্য দিয়ে থাকে এবং স্ট্যান্ডার্ড Linux kernel সিডুলারের উপরে ভিত্তি করা বহির্গমন থ্রেডকে।প্রোসেসের স্ট্যাটাসের উপরে ভিত্তি করে আমরা ওয়েব নির্ধারন করে থাকি যা একটি ভিন্ন সুন্দর লেভেল।আমরা পেয়েছি বর্তমানে ৭টি লেভেলঃ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Process priority levels
PriorityNiceUsed for
MASTER0প্রধান b2gপ্রোসেস
FOREGROUND_HIGH0ক্রিল্টিকাল এপ্লিকেশনcpu or highpriority wakelock ধরা,যা বর্তমানে ঘড়ির দ্বারা সংগ্রহীতএবং যোগাযোগ এপ্লিকেশন
FOREGROUND1ফো্রগ্রাউন্ডএপ্লিকেশন
FOREGROUND_KEYBOARD1কিবোর্ড এপ্লিকেশন
BACKGROUND_PERCEIVABLE7ব্যাকগ্রাউন্ড এপ্লিকেশন যা অডিও বাজায় অথবা cpu or highpriority wakelock ধরে রাখে এবং একটি সিস্টেম মেসেজ হ্যান্ডেলার রেজিস্টার্ড থাকে কমপক্ষে
BACKGROUND_HOMESCREEN18homescreen এপ্লিকেশন
BACKGROUND18ব্যাকগ্রাউন্ডের আন্য সকল এপ্লিকেশন
+ +

Some levels share the same nice values, that's because those levels currently differ in the way they're treated by the out of memory killer. All priorities can be adjusted at build time via preferences; the relevant entries can be found in the b2g/app/b2g.js file.

+ +
+

Note: for more information on the out-of-memory killer, and how Firefox OS manages low memory situations, read Out of memory management on Firefox OS.

+
+ +

Within a process the main thread inherits the nice value of the process whilst web worker threads are given a nice value that is one point higher than the main thread thus running at lower priority. This is done in order to prevent CPU-intensive workers from excessively slowing down the main thread. Processes priorities are changed whenever a major event happens such as an application is sent into the background or foreground, a new application is started up or an existing application grabs a CPU wakelock. Whenever a process priority is adjusted all its threads' priorities will also be adjusted accordingly.

+ +
+

Note: cgroups are not currently used for resource management as they've proven unreliable on certain devices and kernels.

+
+ +

 

diff --git a/files/bn/archive/b2g_os/platform/feature_support_chart/index.html b/files/bn/archive/b2g_os/platform/feature_support_chart/index.html new file mode 100644 index 0000000000..dce02ae83b --- /dev/null +++ b/files/bn/archive/b2g_os/platform/feature_support_chart/index.html @@ -0,0 +1,156 @@ +--- +title: ফিচার সমর্থনের চার্ট +slug: Archive/B2G_OS/Platform/Feature_support_chart +tags: + - B2G + - NeedsReview + - QA + - Testing +translation_of: Archive/B2G_OS/Platform/Feature_support_chart +--- +

ফায়ারফক্স অপারেটিং সিস্টেমের  বিভিন্ন বিল্ড আছে যা আপনি ডাউনলোড বা নিজের জন্য তৈরি করতে পারেন, এবং  প্রত্যেকটি যন্ত্রের বৈশিষ্ট্যগত পার্থক্য রয়েছে। নিচের চার্টটি আপনাকে বিভিন্ন বিল্ডের কি কাজ করে আর কি করেনা তা বুঝতে সাহায্য করবে।

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureDeviceEmulatorDesktop
ডায়ালারসবশুধুমাত্র ইউজার ইন্টারফেস, নেটওয়ার্ক নেইশুধুমাত্র ইউজার ইন্টারফেস, নেটওয়ার্ক নেই
পরিচিতিসবসবসব
এসএমএসসবশুধুমাত্র ইউজার ইন্টারফেস, নেটওয়ার্ক নেইশুধুমাত্র ইউজার ইন্টারফেস, নেটওয়ার্ক নেই
ক্যামেরাসবশুধুমাত্র ইউজার ইন্টারফেস, ক্যামেরা সাপোর্ট করে নাশুধুমাত্র ইউজার ইন্টারফেস, ডেস্কটপে ক্যামেরা সাপোর্ট বিষয়ে এই মুহূর্তে নিশ্চিত না
গ্যালারীসবসবসব
ভিডিওসবশুধুমাত্র ইউজার ইন্টারফেসসব
সঙ্গীতসব সব
এফএম রেডিওসবসবশুধুমাত্র ইউজার ইন্টারফেস
ইমেইলসবসবসব
ক্যালকুলেটরসবসবসব
ব্রাউজারসবসবসব
মার্কেটপ্লেসসবসবসব
ঘড়িসবসবসব
ক্যালেন্ডারসবসবসব
মূল স্ক্রীনসবসবসব
লক স্ক্রীনসবসবসব
কীবোর্ডসবসবসব
টাস্ক ম্যানেজারসবসবসব
প্রথম-ব্যাবহারসব??
নটিফিকেশনসবসবসব
স্ট্যাটাস বারসবকিছু নেটওয়ার্ক এর অবস্থা পরিক্ষা করা যায় নাকিছু নেটওয়ার্ক এর অবস্থা পরিক্ষা করা যায় না
সেটিংসসবসবসব
+

 

diff --git a/files/bn/archive/b2g_os/platform/gonk/index.html b/files/bn/archive/b2g_os/platform/gonk/index.html new file mode 100644 index 0000000000..3abeb36275 --- /dev/null +++ b/files/bn/archive/b2g_os/platform/gonk/index.html @@ -0,0 +1,24 @@ +--- +title: গোঙ্ক +slug: Archive/B2G_OS/Platform/Gonk +tags: + - NeedsReview +translation_of: Archive/B2G_OS/Platform/Gonk +--- +

{{draft()}}

+
+

গোঙ্ক হচ্ছে ফায়ারফক্স ওএস প্ল্যটফর্মের নিম্ন লেভেল এর অপারেটিং সিসটেম যা,  এন্ড্রয়েড মুক্ত উৎস প্রজেক্ট (এওএসপি)  এ লিন্যাক্স কার্নাল বেসড এবং ইউজারস্পেস হার্ডওয়ার অ্যাবস্ট্রাকশোন লেয়ার (এইচএএল). এই আর্টিকেলটি গোঙ্ক কি কি গঠন করে তা নির্দেশ করে; ফায়ারফক্স ওএস কাঠামো সম্পর্কে বিস্তারিত জানতে এবং গোঙ্ক কিভাবে এতে কাজ করে জানতে পড়ুন ফায়ারফক্স ওএস কাঠামো গাইড।

+
+

গোঙ্ক ওভারভিউ

+

গেকো সোর্সে  b2g/ নামক ফোল্ডার রয়েছে যা গোঙ্ক পোর্ট বহন করে যার কাজ হচ্ছে, ওয়েব এর জন্য মোবাইল এর হার্ডওয়্যর ক্যপাবিলিটি খুলে দেয়া। এটি একটি লিনাক্স কার্নেল, এইচএএল, এবং অন্য একটি ওইএম- নির্দিষ্ট লাইব্রেরীগুলো বহন করে। বিভিন্ন গোঙ্ক লাইব্রেরীগুলো একই মুক্ত-উৎস প্রজেক্টঃ libusb, bluez, এবং আরো অন্যান্য।  এইচএএল এর অন্য কিছু অংশ এন্ড্রয়িড প্রজেক্ট: জিপিএস, ক্যামেরা, এবং অন্যান্য কিছুর সাথে সম্পর্কযুক্ত।

+

গোঙ্ক হচ্ছে একটি পোর্টিং লেয়ার ডিভাইসঃ হার্ডওয়্যার এবং গেকো মধ্যে একটা এডাপটার। গোঙ্ক হচ্ছে একটি অপেক্ষাকৃত সহজ লিন্যাক্স ডিস্ট্রিবিউশন যাকে গেকো পোর্টিং লেয়ার এর সাথে জোটবদ্ধ গেকো পোর্ট বিবেচনা করা যায় — তাই গোঙ্ক হচ্ছে গেকোর একটি পোর্টিং টার্গেট, ঠিক তেমনই, যেমন গেকো ওএস এক্স, উইন্ডোজ় এবং অ্যান্ড্রয়েড এ গেকো এর পোর্ট রয়েছে।

+
+

নোট: বিভিন্ন মোবাইল ডিভাইসের ভিন্ন চিপসেট এবং অন্যান্য হার্ডওয়্যার স্পেক যেমন থাকতে পারে, ডিভাইসের তেমন ভিন্ন গোঙ্ক ডিস্ট্রিবিউশন থাকতে পারে।

+
+

যেহেতু ফায়ারফক্স ওএস প্রজ়েক্ট গোঙ্ক এর উপর পূর্ণ নিয়ন্রণ রাখে তাই আমরা গেকো তে ইন্টারফেজ উন্মুক্ত করতে পারি যা অন্য অপারেটিং সিস্টেমে উন্মুক্ত হবে না। উদাহরণস্বরূপ, পূর্ণ টেলিফোনি স্ট্যাক এবং গোঙ্ক এর ডিসপ্লে ফ্রেম বাফার এর উপর গেকোর সরাসরি কতৃত্ব রয়েছে।

+

গোঙ্ক সোর্স কোড

+

প্রধান গিটহাব- এ বি২জি রেপো নানা ধরনের ডিভাইস এর জন্য গোঙ্ক এর অফিশিয়াল সাপোর্ট বহন করে, তাই আপনি গোঙ্ক এর সংগ্রহস্থল হিসাবে এটিকে বিবেচনা করতে পারেন. সাপোর্টেড ডিভাইস গুলোর লিঙ্কঃ B2G/config.sh.

+

গোঙ্ক এর দৈনন্দিন বেশিরভাগ কাজ হল বিভিন্ন বোর্ডে সিস্টেমকে পোর্টিং করার মত। গেকো যেন ভিন্ন ভিন্ন ডিভাইস এ কাজ করতে পারে তা নিশ্চিত করুন।

+
+
+

 

diff --git a/files/bn/archive/b2g_os/platform/index.html b/files/bn/archive/b2g_os/platform/index.html new file mode 100644 index 0000000000..203ff46226 --- /dev/null +++ b/files/bn/archive/b2g_os/platform/index.html @@ -0,0 +1,88 @@ +--- +title: ফায়ারফক্স ওএস প্লাটফর্ম +slug: Archive/B2G_OS/Platform +translation_of: Archive/B2G_OS/Platform +--- +

ফায়ারফক্স ওএস প্লাটফর্মের অনেকগুলো কম্পোনেন্ট বা অংশ রয়েছে। যদিও ফায়ারফক্স ওএসে চলার উপযোগী এ্যাপ্লিকেশন তৈরি করতে আর্কিটেকচার জানার প্রয়োজন নেই, আপনি যদি প্লাটফর্মটি ডেভেলপ অথবা পোর্ট করার কাজ করে থাকেন কিংবা কেবল কৌতুহলীই হয়ে থাকেন, নিচের ডকুমেন্টেশন আপনার কাছে আকর্ষণীয় হতে পারে!

+ + + + + + + +
+

ফায়ারফক্স ওএস প্লাটফর্মের ডকুমেন্টেশন

+
+
+ ফায়ারফক্স ওএস পরিচিতি
+
+ ফায়ারফক্স ওএস কি এবং কিভাবে কাজ করে - এ সংক্রান্ত পরিচিতিমূলক তথ্য
+
+ ফায়ারফক্স ওএস বিল্ড এবং ইন্সটল করা
+
+ ফায়ারফক্স ওএস বিল্ড করে একটি কম্পাটিবল ডিভাইসে ইন্সটল করার গাইড। এই গাইডে ফায়ারফক্স ওএস সিম্যুলেটর বিল্ড এবং কম্পিউটারে ফায়ারফক্স ওএস চালানো আলোচনা করা হয়েছে।
+
+ Gaia (গায়া)
+
+ গায়া এর ডকুমেন্টেশন, যা ফায়ারফক্স ওএসের ইউজার ইন্টারফেস এ্যাপ্লিকেশন; এটি ফায়ারফক্স ওএসের সফটওয়্যার স্ট্যাকের ওপর একটি ওয়েব এ্যাপ্লিকেশন
+
+ Gonk (গংক)
+
+ গংক এর ডকুমেন্টেশন, গায়ার নিচে অপারেটিং সিস্টেম লেয়ার। এতে একটি লিনাক্স কার্নেল এবং একটি হার্ডওয়্যার এ্যাবস্ট্র্যাকশন লেয়ার রয়েছে গিকোর সঙ্গে যোগাযোগের জন্য।
+
+ Gecko (গিকো)
+
+ গিকো হল ফায়ারফক্স ওএসের রেন্ডারিং ইঞ্জিন যা ফায়ারফক্স, থান্ডারবার্ডের মত এ্যাপ্লিকেশনের মত ওপেন স্ট্যান্ডার্ড ভিত্তিক ইমপ্লিমেন্টেশন সাপোর্ট করে।
+
+ ফিচার সাপোর্ট চার্ট
+
+ বিভিন্ন ধরণের ফায়ারফক্স ওএস বিল্ডের ফিচারের একটি চার্ট।
+
+ ফায়ারফক্স ওএস আর্কিটেকচারের সার্বিক চিত্র
+
+ ফায়ারফক্স ওএসের আভ্যন্তরীণ গঠনের সার্বিক চিত্র; এটি মূলত প্লাটফর্ম ডেভেলপার এবং পোর্টিং কাজ করা মানুষদের জন্য।
+
+ ফায়ারফক্স ওএস এ্যাপ আর্কিটেকচার
+
+ ফায়ারফক্স ওএসের এ্যাপ্লিকেশন মডেলের সার্বিক চিত্র।
+
+ ফায়ারফক্স ওএস টেস্টিং
+
+ ফায়ারফক্স ওএস টেস্ট করার গাইড, স্বয়ংক্রিয় টেস্ট তৈরির তথ্যসহ।
+
+ ফায়ারফক্স ওএস পোর্ট করা
+
+ নতুন ডিভাইসে ফায়ারফক্স ওএস পোর্ট করা সংক্রান্ত তথ্য।
+
+  .userconfig ফাইলটি কাস্টমাইজ করা
+
+ .userconfig ফাইলটির মাধ্যমে বিল্ড এবং ফায়ারফক্স ওএসের এক্সিকিউশন কাস্টমাইজ করা।
+
+

সবগুলো দেখুন...

+ 		+

কমিউনিটি হতে সাহায্য

+

আপনি যদি ফায়ারফক্স ওএস নিয়ে কাজ করে থাকেন কিংবা এ্যাপ্লিকেশন ডেভেলপ করতে চান যা ফায়ারফক্স ওএস ডিভাইসে চলবে, আপনাকে সাহায্য করার জন্য কমিউনিটি রয়েছে!

+
    +
  • বুট-টু-গিকো প্রজেক্ট ফোরাম: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}
    • +
+
    +
  • মোজিলার আইআইসি চ্যানেলে আপনার প্রশ্ন জিজ্ঞাসা করুন: #b2g
    • +
+

নেটিকেট ভুলে গেলে চলবে না...

+
+ + +

তথ্যভান্ডার

+ +
+

 

diff --git a/files/bn/archive/b2g_os/platform/out_of_memory_management_on_firefox_os/index.html b/files/bn/archive/b2g_os/platform/out_of_memory_management_on_firefox_os/index.html new file mode 100644 index 0000000000..aac7a65ae3 --- /dev/null +++ b/files/bn/archive/b2g_os/platform/out_of_memory_management_on_firefox_os/index.html @@ -0,0 +1,61 @@ +--- +title: ফায়ারফক্স ওএস এ মেমোরি ব্যবস্থাপনা না হওয়া +slug: Archive/B2G_OS/Platform/Out_of_memory_management_on_Firefox_OS +tags: + - B2G + - Firefox OS + - Gaia + - LMK + - OOM + - Out of memory + - low memory killer + - low memory notifications + - oom_adj +translation_of: Archive/B2G_OS/Platform/Out_of_memory_management_on_Firefox_OS +--- +
+

Firefox OS runs on some severely memory-constrained devices, and it's easy for apps to exhaust the memory available on such systems.  When a process exhausts the memory available on the system, the kernel must kill some other processes in order to free up memory. This article describes how the low memory killer and low memory notifications work — the two systems on the device that control what processes are killed to keep the main system running when it has run out of memory.

+
+

FxOS operation involves multiple processes — one "main process" running basic system services and potentially many "child processes". In general every app runs in its own child process. Since in the FxOS environment applications are rarely closed by the user the system automatically manages their lifetime to make room for new apps or for existing apps requiring additional memory.

+

Two subsystems are used to manage this: the Low memory killer (LMK) and Low memory notifications.

+

লো মেমোরি কিলার

+

The LMK is a subsystem of the Android kernel that automatically kills processes to make room for memory requests. In order to choose which process is killed first for freeing up memory, each process is assigned a priority via the /proc/<pid>/oom_adj or /proc/<pid>/oom_score_adj files. A process's priority is known as its adjustment score, or oom_adj.  Smaller oom_adj values correspond to higher priority processes.

+

In general, the larger the adjustment score is, the more likely a process is to be killed. The LMK provides multiple levels, each corresponding to a certain amount of free memory and a minimum adjustment score. Whenever the amount of free memory in the system drops below a certain level, all processes with an adjustment score higher than the minimum specified for that level are eligible to be killed. The LMK will start killing these processes, larger ones first, and keep going until it has freed enough memory to go above the threshold again.

+
+

Note: The process killed when the device runs out of memory isn't necessarily the one that "caused" the out-of-memory condition.

+
+

প্রসেস অগ্রাধিকার

+

In Firefox OS apps are killed in the following priority order policy, which is enforced by giving each application a priority level and associating an OOM adjustment score to these levels (the current values are set in prefs):

+
    +
  1. The first apps to be killed will be the background apps, starting with the least recently used.
    2. +
  2. The homescreen application is killed next.
    3. +
  3. Background applications that are perceivable by the user are killed next (for example, a music player playing audio in the background or an app holding a high-priority or cpu wakelock and having a registered handler for system messages.)
    4. +
  4. If the keyboard application is running, it will be killed next.
    5. +
  5. Foreground applications will be killed next.
    6. +
  6. Finally, foreground applications that have requested high-priority or cpu wakelocks are the last to get killed.
    7. +
+
+

Note: Most child processes run with oom_adj 2 while they're in the foreground.  Child processes in the background run with oom_adj between 3 and 6 (inclusive).  Exactly what oom_adj a child process has while in the background depends on a number of factors, such as whether it's playing sound, whether it's the homescreen app, etc.

+
+

There's a couple of exceptions to these rules:

+ +

লো/অপর্যাপ্ত মেমোরি নির্দেশনা

+

The second mechanism we use to free memory is low memory notifications. The LMK provides a special threshold that, when crossed, can send notifications to the userspace that is running low on memory. Both the system application and regular user apps continuously wait for this condition and will react upon it by sending a memory-pressure event via the observer service. This event is visible only to C++ and chrome JS code and not directly by an application. Through the Gecko codebase we use this event to free as much memory as we can — normally by purging internal caches (images, DNS, sqlite, etc.), dropping assets that can be recreated (WebGL contexts for example) and running the garbage collector and cycle collector.
+
+ When encountering a low memory condition the first memory-pressure event that will be sent will have the low-memory payload. If after a predefined time (5s) we're still in a low memory condition another memory-pressure event will be fired, but this time with the low-memory-ongoing payload. This payload is used when we continue to experience low-memory conditions and we want to flush caches and do other cheap forms of memory minimization, but know that heavy handed approaches like a GC are unlikely to succeed.

+

এলএমকে এবং অপর্যাপ্ত মেমোরির নির্দেশনা যেভাবে একসাথে কাজ করে

+

Currently the low memory threshold is set above the LMK level for background applications but below the one for the homescreen. So the aggregated action of the LMK and low memory notifications is as follows when a deivce is running out of memory:

+
    +
  1. Kill background apps in least-recently-used order.
    2. +
  2. If we didn't free enough memory, send memory-pressure events to all remaining applications.
    3. +
  3. If the condition persists resend a memory-pressure event every 5 seconds, but mark them as ongoing so the GC/CC doesn't react to them.
    4. +
  4. Kill the homescreen.
    5. +
  5. Kill perceivable or high-priority background applications
    6. +
  6. Kill the keyboard app, if it is running.
    7. +
  7. Kill foreground applications.
    8. +
  8. Kill high priority foreground applications.
    9. +
  9. Kill the preallocated process.
    10. +
diff --git a/files/bn/archive/b2g_os/platform/settings_list/index.html b/files/bn/archive/b2g_os/platform/settings_list/index.html new file mode 100644 index 0000000000..499039d9c6 --- /dev/null +++ b/files/bn/archive/b2g_os/platform/settings_list/index.html @@ -0,0 +1,724 @@ +--- +title: ফায়ারফক্স ওএস সেটিংস তালিকা +slug: Archive/B2G_OS/Platform/Settings_list +tags: + - API + - B2G + - Firefox OS + - NeedsReview + - Reference + - Settings + - WebAPI +translation_of: Archive/B2G_OS/Platform/Settings_list +--- +

ফায়ারফক্স ওএস এর কিছু সেটিংস রয়েছে যার দ্বারা ডিভাইস ও এর পূর্ব-নির্ধারিত বৈশিষ্ট কনফিগার করা যায়। সেটিংস API ব্যাবহার করে চিহ্নিত এপস্‌ দ্বারা এসকল সেটিংস এ প্রবেশ করা যায়।

+
+

টীকা: বিভিন্ন ডিভাইসের ফিচার ও ফায়ারফক্স ওএস এর বিভিন্ন রিলিজের তারতম্যের কারনে, এই তালিকাটি পরিপূর্ণ ভাবে সকল ডিভাইসের ক্ষেত্রে সঠিক ভাবে নাও মিলতে পারে।

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
সেটিং নাম +
+
+ প্রকার
+
+ 		+
+
+ পূর্বনির্ধারিত মান
+
+
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
+

আরও দেখুন

+ diff --git "a/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/browser/index.html" "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/browser/index.html" new file mode 100644 index 0000000000..1bc819f326 --- /dev/null +++ "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/browser/index.html" @@ -0,0 +1,107 @@ +--- +title: Browser +slug: Archive/B2G_OS/Platform/গায়া/Gaia_apps/Browser +tags: + - Apps + - B2G + - Browser + - Firefox OS + - Gaia + - Guide +translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps/Browser +--- +
+

 Browser app (যা এখন সিস্টেমের অংশ)আমাদেযখন প্রয়োজন তখন ব্রাউজার দিয়ে থাকে ফাঙ্কশনালিটির মত-পেজ নেভিগেশন ,সার্চ এবং বুক্মার্ক্স।এই অনুচ্ছেদব্যাখা করে কিভাবে ব্রাউজার ফাঙ্কশনালিটি কাজ করে ,এবং কিভাবে এটি বিশাল সিস্টেমে উপযুক্ত।

+
+

যখন গায়া গেকোর উপরে কাজ করার জন্য গঠোন হয়ে থাকে,ইহা ইঞ্জিনিয়ারদের জন্য সম্ভব একটি Browserঅ্যাপ/সিস্টেম  Browser নিয়মিত ওয়েব পেজের নেভিগেশনের জন্য যা তখনের গেকোর উপরে ভিত্তি করে । এটি  mozBrowser API দ্বারা পরিচালিত।

+
+

নোটঃফায়ারফক্স ওএস  2.1 থেকে পরবর্তীতে,  Browserঅ্যাপ হল একটি  Systemঅ্যাপের অংশ। এটা মানে ওয়েব ব্রাউজিং ক্লিকিং  Browser iconদ্বারা   Browser অ্যাপ খুলে অথবা ইউনিভার্সাল সার্চ দ্বারা সুবিধা পেয়ে এবং নেভিগেশন সক্ষমতা উভয়ের দ্বারা কাজ হয়ে থাকে।অ্যাপ এবং ব্রাউজিং ট্যাবস একটি সাধারন অভিজ্ঞতায় এং বিদ্যমান টাস্ক ম্যানেজারের দ্বারা  একিভুত হয়ে থাকে এবং শিট দেখা যায়(কোনার ভজ্ঞিমার জন্য) Haida user experience এর অংশ হিসেবে।

+
+

সিস্টেম Browser (Browser Chrome)

+

যখন একটি Firefox OS ব্যবহারকারী একটি ওয়েব পেজকে বুক্মার্ক্স করে তখন এটা হোমস্ক্রীনে দখা যাবে,ওয়েব পেজটি তখনি  System Browser এ খুলে যাবে  Browser app এর পরিবর্তে।এহা টুল বারের একবারে নিচে থাকে সাধারন ব্যাক/ফরোয়ার্ড/রিফ্রেশ ফাঙ্কশনের।গায়াতে এহাকে বলা হয়ে থাকে Browser Chrome অথবা র‌্যাপার।আপনি এটা নিচের ছবির ডান পাশের দিকে দেখতে পারেন

+

A diagram showing that when a web page is opened in the system browser, it is given a toolbar.

+

যদি আপনি আপনার অয়েব পেজের ফিচার ব্যাক/ফরোয়ার্ড/রিফ্রেশ চেয়ে থাকেন,আপনাকে  Browser Chrome কে সক্ষম করতে অ্যাপস মেনিফেস্টকে অনুসরণ করতে হবে।.

+
declare { chrome: { navigation: true } }
+
+

নোটঃব্রাউজার ক্রোম টুল বার সর্বোচ্চ তালিকা কে প্রভাবিত করে থাকে,সুতরাং এটাকে আপনি বিবেচনায় আনতে পারেন ওয়েব পেজের উদ্বোধনের সময়।

+
+

The code flow

+

যখন Firefox OS এ একটি নতুন ওয়েব পেজ খুলা হয়ে থাকে,কল ফ্লোটি হল.

+
Gecko > WrapperFactory > Window Manager > AppWindow > BrowserFrame
+

 system/js/wrapper_factory থেকে প্রাপ্ত র‌্যাপার mozbrowseropenwindow  ইভেন্ট গ্রহন করবে একটী নতুন ওয়েব পেজের বুক্মার্কড এর জন্য।

+

 handleEvent শাখায় হ্যান্ডেলার চেক করবে ইভেন্টটি সিধান্ত নিতে যে ওয়েব পেজ একটি অ্যাপ অথবা ব্রাউজার ক্রোমে হিসেবে খোলা যায় কিনা।

+

অবশেষে , launchWrapper  কে করেস্পন্ডীঙ উইন্ডো হিসেবে শুরু করতে বলা হয়ে থাকে।

+

ইউনিভার্সাল সার্চ এবং নেভিগেশন

+

ন্তুন সার্চ এবং নেভিগেশন বার দেয়ে,ব্যবহারকারীরা নিজেদের প্রিয় জিনিস একটি URL টাইপ করে পেতে পারে,অথবা নতুন একটি অ্যাপ বের করতে পারে,ফায়ারফক্স   OS থেকে।সার্চ বার স্ক্রীনের সবচেয়ে উপরে থাকে,এবং ব্যবহারকারী এটা খোলার জন্য ট্যাপ অথবা পরিস্কার করতে পারে।

+

 ইহাকে Awesome Bar এরকম্বিনেশন হিসেবে ব্রাউজার থেকে চিন্তা করুন এবং  ব্রাউজার থেকে এবংহোমস্ক্রীন থেকে  adaptive app search  তে। কারণ Firefox OS ওয়েব অ্যাপস ব্যবহার করে থাকে,যখন আপনি আপনার ইচ্ছা অনুযায়ী পাবেন,যদিও এটি নতুন অ্যাপস,এটি খুলে সঠিক ভাবে।আপনার ন্তুন কিছু ইন্সটল করতে হবে না।কারণ এটি তখনি সব কিছু করে ফেলে।

+

Browser অ্যাপ

+

 Browser অ্যাপ হল একটি পরীক্ষিত ওয়েবঅ্যাপ যা একটি সাধারণ ওয়েব browser  অভিজ্ঞতা দেয়।প্রধান ফাঙ্কশন   apps/browser/js/browser.js তে পাওয়া যায়ঃ

+
var Browser = {
+  init: function browser_init() {
+    this.getAllElements();
+      ...
+    BrowserDB.init((function() {
+      ...
+    }
+  }
+};
+
+window.addEventListener('load', function browserOnLoad(evt) {
+  window.removeEventListener('load', browserOnLoad);
+  Browser.init();
+});
+

 Browser এর  init()ফাংকশনকে কল করবে যখন  DOM পরিপূর্ণ ।

+
getAllElements: function browser_getAllElements() {
+  var elementIDs = [
+    'toolbar—start', ... 'danger—dialog'];
+
+  // Loop and add element with camel style name to Modal Dialog attribute.
+  elementIDs.forEach(function createElementRef(name) {
+    this[this.toCamelCase(name)] = document.getElementById(name);
+  }, this);
+},
+

 getAllElements ফাংকশন ব্যবহার করা হয়ে থাকে সকল  camelCase উপাদান হ্যান্ডেল করতে,এর পরে  apps/browser/js/browser_db.js কে কল করা হয়ে থাকে,ডিফল্ট সার্চ ইঞ্জিন এবং বুক্মার্ক্স যোগ করে তৈরি করতে লাগে।

+

Bookmarks

+

ফায়ারফক্স ও এস থেকে 2.0 apps/bookmark ব্যবহার হয়ে থাকে বুক্মার্ক্স সেভ/কার্যক্রম সরাতে

+

সবচেয়ে মজার অংশ apps/bookmark/webapp.manifestহল দেখতে এর মতঃ

+
"activities": {
+  "save—bookmark": {
+    "filters": {
+      "type": "url",
+      "url": { "required":true, "pattern":"https?:.{1,16384}" }
+    },
+    "disposition": "inline",
+    "href": "/save.html",
+    "returnValue": true
+  },
+  "remove—bookmark": {
+    "filters": {
+      "type": "url",
+      "url": { "required":true, "pattern":"https?:.{1,16384}" }
+    },
+    "disposition": "inline",
+    "href": "/remove.html",
+    "returnValue": true
+  }
+},
+

উপরে যা দেখা হয়েছে,এক্টিভিটি  হ্যান্ডেল করা হয়ে থাকে html সেভ এবং and html রিমুভ দ্বারা. উভয় অপারেশন  apps/bookmark/js/activity_handler.jsতে ডিলেগেটেডঃ

+
var ActivityHandler = {
+  'save—bookmark': function ah_save(activity) {
+  },
+
+  'remove—bookmark': function ah_remove(activity) {
+  }
+};
+
+navigator.mozSetMessageHandler('activity', function onActivity(activity) {
+  var name = activity.source.name;
+  switch (name) {
+    case 'save—bookmark':
+    case 'remove—bookmark':
+      if (activity.source.data.type === 'url') {
+        ActivityHandler[name](activity);
+      }
+    ...
+  }
+}
+

যখন মেসেজ হ্যান্ডেলার লিসেনার navigator.mozSetMessageHandler('activity')  save-bookmark or remove-bookmark কার্যক্রম গ্রহন করে, ActivityHandler ফাঙ্কশন প্রতিনিধিত্ব কারী অপারেশনের জন্য ট্রিগার তুলে হ্যান্ডেল করতে।

diff --git "a/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/index.html" "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/index.html" new file mode 100644 index 0000000000..891d0f8fb0 --- /dev/null +++ "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/index.html" @@ -0,0 +1,78 @@ +--- +title: গায়া অ্যাপস +slug: Archive/B2G_OS/Platform/গায়া/Gaia_apps +translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps +--- +
+

গায়া হল ফায়ারফক্স ওএস এর সম্মুখ-পশ্চাৎ, যা সিস্টেম কতৃপক্ষ প্রায়োগিক কার্যকারিতা ধারণ করে এবং বিল্ট-ইন অ্যাপ্লিকেশন স্যুট ফায়ারফক্স ওএস ডিভাইসের সাথে চালান দিয়া থাকে। সকল গায়া সোর্স কোড- এমনি সিস্টেম, এবং কিবোর্ড আইএমইগুলো- সম্পূর্ণটি এইচটিএমএল৫ (এইচটিএমএল+সিএসএস+জাভাস্ক্রিপ্ট) এবং মুক্ত ওয়েব এপিআইগুলো দিয়ে বানানো হয়। কিভাবে প্রত্যেকটি অনুস্থাপিত অ্যাপ্লিকেশন গায়া পরিবারে উপস্থিত কাজ করে তার তথ্য এই ডকুমেন্টগুলোতে বিদ্যমান রয়েছে।

+
+

গায়া প্রায়োগিক কার্যকারিতা বিভাগগুলো

+

গায়ার ভিতর বিভিন্ন অ্যাপ্লিকেশনগুলো গ্রুপ ভিত্তিক নিম্নে শ্রেণীকরণ করা হল।

+
+

নোট: অনেক পৃষ্ঠা কিভাবে প্রত্যেকটি অ্যাপ্লিকেশন নিজ নিজ ভাবে কাজ করে তা ব্যাখ্যা করার সাথে যুক্ত যা গায়া গিটহাব রেপো এর ভিতর "আমাকে পড়ুন" পৃষ্ঠা নামে রয়েছে। এর কারণ অনেক অ্যাপ্লিকেশনগুলো দ্রুত উন্নয়ন চক্র- এর উপর হচ্ছে এবং যার ফলে বিষয় (মাঝে মাঝে দৈনিক) দ্রুত বদলাচ্ছে, সুতরা্ং এই পরিবর্তনগুলোর সাথে এমডিএন পৃষ্ঠাগুলোকে হালনাগাদ করার জন্য ক্ষুদ্র চেষ্টা বোধ করা হয়। ইঞ্জিনিয়ার দ্বারা পরিচালিত "আমাকে পড়ুন" পৃষ্ঠাগুলো হচ্ছে বর্তমানে তথ্যের সবচেয়ে বেশী নির্ভূল উৎস।

+
+

প্লাটফর্ম

+

সিস্টেম, সেটিংস, লকস্ক্রিন, স্ক্রিপ্ট তৈরি এবং ব্লু-টুথ অ্যাপ্লিকেশন সহকারে।

+

+

অ্যাপ্লিকেশনের প্লাটফর্ম: আরো ব্যাখ্যা

+
+
+ সিস্টেম
+
+

সিস্টেম অ্যাপ্লিকেশন হল ফায়ারফক্স ওএস বুটআপ কার্যপ্রণালী চলাকালীন গেকো দ্বারা লোডকৃত সর্বপ্রথম ওয়েব অ্যাপ্লিকেশন, এবং এটা অসংখ্যক দায়িত্ব সামাল দেয় যা সিস্টেম এর চলার জন্য সাধারনত দরকার হয়, এবং সেজন্য পৃথক ওয়েব অ্যাপ্লিকেশনের জন্য পরিসারিত নয়।

+
+
+ উইন্ডো ব্যবস্থাপনা
+
+

ফায়ারফক্স ওএসের উইন্ডো ব্যবস্থাপনা প্রয়োগিক কার্যকারিতা- অ্যাপ্লিকেশন জীবন চক্র এবং পারষ্পরিক ক্রিয়া, বিজ্ঞপ্তি, এ্যানিমেশন আরও অনেক কিছু সহকারে- যা সিস্টেম অ্যাপ্লিকেশনর একটি নির্দিষ্ট অংশ দ্বারা সামলানো হয়। এই রচনাটি ফায়ারফক্স ওএস উইন্ডো ব্যবস্থাপনা বিস্তারিতভাবে দেখায়।

+
+
+ সেটিংস
+
+ সেটিংস অ্যাপ্লিকেশন ফায়ারফক্স ওএস ব্যবহারকারীদেরকে ডিভাইস কনফিগারেশন সেটিং করার অনুমতি প্রদান করে, এবং আগমিত কার্যালাপগুলোকে (configure নামের সাথে ওয়েবের কার্যালাপগুলো) উত্তর প্রদান করে , যা অন্যান্য অ্যাপ্লিকেশনগুলোকে সেটিংস অ্যাপ্লিকেশনের ভেতর বিভিন্ন প্যানেলে যাওয়ার অনুমতি প্রদান করে প্রয়োজন হিসেবে কনফিগারেশন সামাল দিতে (উদাহরণ সরূপ, ওয়াই-ফাই সেটিং প্যানেল দেখানো যদি কোন ডাটা সংযোগ না থাকে।)
+
+

যোগাযোগ

+

ডায়েলার, কন্টাক্ট, এসএমএস অ্যাপ্লিকেশন এবং এফটিইউ অ্যাপ্লিকেশন সহকারে।

+

+

যোগাযোগের অ্যাপ্লিকেশন: আরো ব্যাখ্যা

+

টিবিডি

+

উৎপাদনশীলতা

+

ই-মেইল, ক্যালেন্ডার এবং ঘড়ি অ্যাপ্লিকেশন সহকারে।

+

+

উৎপাদনশীলতা অ্যাপ্লিকেশন: আরো ব্যাখ্যা

+
+
+ ক্যালেন্ডার
+
+ ফায়ারফক্স ওএস- এ বিল্ট-ইন ক্যালেন্ডার অ্যাপ্লিকেশন।
+
+ ঘড়ি
+
+ ফায়ারফক্স ওএসের অনুস্থাপিত ঘড়ি অ্যাপ্লিকেশন, যাতে যু্ক্ত রয়েছে অ্যালার্ম, টাইমার, স্টপওয়াচ প্রয়োগিক কার্যকারিতা।
+
+ ই-মেইল
+
+ গায়া ই-মেইল অ্যাপ্লিকেশন।
+
+

গণমাধ্যম

+

ক্যামেরা, গ্যালারি, সঙ্গীত এবং ভিডিও অ্যাপ্লিকেশন এবং আরও কিছু গণমাধ্যম সম্পর্কিত ফাংশন যেমন লক ডিআরএম এবং ওয়ালপেপার ফরওয়ার্ড করা সহকারে।

+

+

গণমাধ্যম অ্যাপ্লিকেশন: আরও ব্যাখ্যা

+
+
+ ভিডিও
+
+ ভিডিও হল একটি সাধারণ ভিডিও চালনা অ্যাপ্লিকেশন যা আপনার ফায়ারফক্স ডিভাইসের ম্যাস স্টোরেজ থেকে বর্তমানের ভিডিওগুলো চালিয়ে দেখাবে।
+
+ ক্যামেরা
+
+ ক্যামেরা ফায়ারফক্স ওএস ব্যবহারকারীদেরকে ছবি তুলতে এবং ভিডিও ধারণ করতে অনুমতি প্রদান করবে এবং ডিভাইস ক্যামেরা হতে ছবি ও ভিডিওর ব্যবস্থা করবে, এবং pick ধরনের অন্যান্য অ্যাপ্লিকেশনগুলো ওয়েবের কার্যকারিতাগুলো কে সাড়া দেয় যা ক্যামেরার প্রায়োগিক কার্যকারিতার মাধ্যমে গণমাধ্যম ধরতে চায়।
+
+

অন্যান্য গায়া বৈশিষ্ট্যগুলো

+

এসব কার্যকারিতার পাশাপাশি, সেখানে আরও অসংখ্য অন্যান্য বড় বড় বৈশিষ্ট্য রয়েছে যেমন ব্রাউজার, হোমস্ক্রিন, মার্কেট প্লেস, টেস্ট ফ্রেমওয়ার্ক, পিডিএফ প্রদর্শনকারী এবং অ্যাপ্লিকেশন ব্যবস্থাপক, যা গায়া- এর পাশাপাশি তৈরি হয়।

+
+
+ pdf.js
+
+ pdf.js হল এইচটিএমএল৫ ভিত্তিক পিডিএফ প্রদর্শনকারী, যা গায়ার ভিতর পিডিএফগুলো প্রদর্শন করতে ব্যবহৃত হয়। নোট করুন যে pdf.js জন্য কোডবেস পৃথক রেপোতে বজায় রাখা হয়, গায়ার বাইরে।
+
diff --git "a/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/settings/index.html" "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/settings/index.html" new file mode 100644 index 0000000000..82fecf5253 --- /dev/null +++ "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/settings/index.html" @@ -0,0 +1,75 @@ +--- +title: Settings +slug: Archive/B2G_OS/Platform/গায়া/Gaia_apps/Settings +translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps/Settings +--- +
+

অ্যাপ সেটিংস  অনুমোদন দেয় ব্যবহারকারীদের ডিভাইস সেটিংসের বাহ্যিক আকার দিতে এবং আর ও সাড়া  দেয় আগত কার্যক্রমে যা  অ্যাপ থেকে নির্দিষ্ট সেটিংস দর্শন  প্রদর্শন  করাতে অ্যাপ উন্নতকারীদের অনুমোদন দেয়।(বি দ্র ওয়াই ফাই সেটিংস প্যানেল দেখাও যদি ডাটা সংযোগ না পাওয়া যায়)।এই অনিচ্ছেদ ব্যাখা করে কিভাবে এটি কাজ করে।

+
+

মোয সেটিংস অ্যাপি এবং ডাটা বাইণ্ডিং

+

কৌশলগতভাবে বলতে ,সেটিংস অ্যাপ হল  UI যা ব্যবহারকারীদের   window.navigator.mozSettings API পরীক্ষণের সুবিধা প্রদান করে।

+

অ্যাপ সেটিংস  সয়ংক্রীয়ভাবে প্রধান সেটিংস অপারেশন যেমন ডাটা বাইন্ডিং ক্ষেত্র এবং মোয সেটিংস ভ্যালুস নিয়ন্ত্রন করে-সকল প্রধান অপারেশন যেমন টগলিং এ সেটিংস অথবা ইনপুট ভ্যালু পরিবর্তন ওমোয সেটিংস ভ্যালুসের পরিবর্তনে ও ফলাফল আনবে।

+

 window.navigator.mozSettings অ্যাপি গেক থেকে সেটিংস সুবিধা দেয়।ব্যবহিত এরকম কিছু দেখেঃ

+
navigator.mozSettings.createLock().set(values);
+

ডাটা সেটের জন্য।

+
+

নোটঃ আমাদের   createLock()ব্যবহার করা দরকার কোনো  mozSettings ভ্যালুর সেটিংস পড়া অথবা লেখার আগে  তা বন্ধ করতে।

+
+

ডাটা সরাতে,আমরা  গেট এবং সেট এ কলব্যাক ফাংশন নিচের ডাটার মত কিছু অপারেশন শুরু করতে ব্যবহার করতে পারিঃ

+
var reqTimerGoBack =
+window.navigator.mozSettings.createLock().get('icc.goBackTimeout');
+reqTimerGoBack.onsuccess = function icc_getTimerGoBackSuccess() {
+  goBackTimer.timeout = reqTimerGoBack.result['icc.goBackTimeout'];
+    ...
+};
+

ডাটা জমা থাকেএকটি instance.result  ডিক্টে।

+

ফায়ারফক্স  ২.0, একটি একক  mozSettingsযা তৎক্ষনাৎপুনরায় ব্যবহার করা যায়  js/modules/settings_cache.js এর মধ্য দিয়েঃ

+
var SettingsCache = require('modules/settings_cache');
+
+SettingsCache.getSettings(function(result){
+  var onlineSupportTitle = result['support.onlinesupport.title'];
+    ...
+});
+

 নেভিগেশন

+

 যখন ব্যবহা্রকারী অ্যাপ  সেটিংস ওপেন করে,তারা উপরের  পৃষ্ঠায় কিছু প্যানেলের তালিকা দেখে,   যেগুলো  স্বাধীন পৃষঠা হিসেবে কাজ করে। SettingsService.navigate (js/module/settings_service.js) ঐ সব  পৃষ্ঠার মধ্যে ন্যাভিগেশন নিয়ন্ত্রণ করে।

+

নোট: উত্তরাধীকার সূত্রেপ্রাপ্ত প্যানেলের জন্য ( যেগুলো নতুন রূপে  এখনো খোলা হয়নি),  সেটিংস। বর্তমান  প্যানেল সেটিংস সার্ভিসের পরিবর্তে  ব্যবহার হয়।  প্যানেল গুলোর  মধ্যে  নেভিগেশন থেকে নেভিগেশন করে।

+

  যেহেতু ফায়ারফক্স ওস ট্যাবলেট ডিভাইস এবং মোবাইল   সমর্থন করে, অ্যাপ সেটিংস দুটি ভিন্ন রকমের নেভিগেশন রূপ বাস্তবায়িত করেছেঃ

+ +

 যখন বলা হয়, SettingsService.navigate  কোন নেভিগেশন রূপ ব্যবহার করে তা নিচের  কোডের  মাধ্যমে নির্দেশ করেঃ

+
if (_isTabletAndLandscape()) {
+  PageTransitions.twoColumn(oldPanel, newPanel, callback);
+} else {
+  PageTransitions.oneColumn(oldPanel, newPanel, callback);
+}
+

প্যানেল

+

ফায়ারফক্স ও এস ২.0 সামনেরদিকে থেকে, প্রধান প্যানেল গঠন বর্ণনা করা হয়েছে js/modules/panel.js এ।এটা ৬ টি ধাপে জীবন চক্র বর্ণনা করেঃ

+ +

সকল নতুন সেটিংস প্যানেল গুলো উত্তরাধীকারসূত্রে  SettingsPanel থেকে প্রাপ্ত,যা Panel  এর কার্যক্রমকে বর্ধিত করে। কোডটি  js/modules/settings_panel.js  বহন করেছেঃ

+
onInit: function(panel, initOptions) {
+  ...
+
+  PanelUtils.activate(panel);
+},
+
+onBeforeShow: function(panel, beforeShowOptions) {
+  // Preset the panel every time when it is presented.
+  PanelUtils.preset(panel);
+  _addListeners(panel);
+  ...
+},
+

PanelUtils.activate — বর্ণিত  js/modules/panel_utils.jsএ-প্যানেলের মধ্যের সকল লিংকের সাথে সংযোগ স্থাপন করতে ব্যবহার করা হয়েছে এবং প্রতিনিধিত্বকারী প্রশিক্ষক  onInitধাপে সংযোগ করে,PanelUtils.preset ব্যবহার করা হয়েছে onBeforeShow ধাপে মূল্যবান সেটিংসের সাথে উপাদান গুলোকে পুনরায় স্থাপন করতে।

+

সকল নতুন সেটিংস প্যানেল গুলো বর্ণিত হয়েছে  js/panels অংশে।

+

এ এম ডি মডিউল এবং অনুকূল সময় গঠন

+

ফায়ারফক্স ওএস ২.0 সামনেরদিকে থেকে,সেটিংস অ্যাপ  AMD modules pattern ব্যবহার করে  প্রতিটি প্যানেলকে বাস্তবায়িত করতে।এ এম ডি পূর্ণকৃত হয়  Alemeda   এর মধ্য দিয়ে  (একটি সহজ  মাধ্যম RequireJS এর) এবং গঠিত/শুভসূচিত হয়  r.js (রিকুইয়ার যে এস  অপ্টিমাইজার)ব্যবহারের মাধ্যমে। সেটিংস অ্যাপ এর তখনো ও নথিপত্ত্রের উপর নির্ভরশীলতা ছিল (shared/js) যেগুলো এ এম ডি মডিউল নয়। ঐসবের জন্য এটা  shim  অপশন বর্ণিত settings/js/config/require.js এ ব্যবহার করে।

+

আরো দেখো

+

 Settings app has a build-in README  যা সেটিংসের অনেক  তথ্য পড়তে উপকারী(প্রধানত আরথার চেন এবং ফ্রেড লিনের দ্বারা লিখিত)।

diff --git "a/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/system/index.html" "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/system/index.html" new file mode 100644 index 0000000000..961f3dc1e4 --- /dev/null +++ "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/system/index.html" @@ -0,0 +1,229 @@ +--- +title: System +slug: Archive/B2G_OS/Platform/গায়া/Gaia_apps/System +translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps/System +--- +
+

The System app is the first web app loaded by Gecko during the Firefox OS bootup procedure, and it handles numerous responsibilities that are required generally for the running of the system, and are therefore not scoped per individual web app. This article explains in detail how System works.

+
+
+

Any application that can be written in JavaScript, will eventually be written in JavaScript. -- Atwood's Law

+
+
+

নোটঃ আপনি  source code for the System app গায়া গিতাব রেপুতে পেতে পারেন.

+
+

কিভাবে সিস্টেম অ্যাপ boots up

+

যখন গেটকো চেষ্টা করে সিস্টেম অ্যাপ শুরু করতে,ইহা সিস্টেম মেনিফেস্টোর ওয়েব অ্যাপ  নির্দেশনা দেয় এবং ধারন করে   System app,  System's manifest.webapp এবং index.html ফাইল নির্দেশনা launch_path প্যারামেটারেparameter (  launch_path
+ সবসময় /index.html  Gaia apps এর জন্য.) index.html লিঙ্কস সকল system-wide styles এবংJavaScript.একটি মোবাইল সিস্টেম পরিচালনা করতে  System app অনেক সম্পদ ধারন করে ।

+

বুটিং  প্রক্রিয়া শুরু হয়ে থাকে  bootstrap.js এ ,নিচের কোড সহঃ

+
window.addEventListener('load', function startup() {
+// define safelyLaunchFTU
+function safelyLaunchFTU() {
+  ...
+}
+
+if (Applications.ready) {
+  safelyLaunchFTU();
+} else {
+  ...
+}
+
+window.addEventListener('ftudone', function doneWithFTU() {
+  window.removeEventListener('ftudone', doneWithFTU);
+
+  var lock = window.navigator.mozSettings.createLock();
+  lock.set({
+    'gaia.system.checkForUpdates': true
+  });
+}
+
+  ...
+
+// With all important event handlers in place, we can now notify
+// Gecko that we're ready for certain system services to send us
+// messages (e.g. the radio).
+var evt = new CustomEvent('mozContentEvent',
+{ bubbles: true, cancelable: false,
+  detail: { type: 'system-message-listener-ready' } });
+  window.dispatchEvent(evt);
+}
+

The code works like so:

+
    +
  1. System is a real web app running in a browser engine, and needs all its dependent resources to be loaded — including images and styles. We therefore start everything off once the {{ domxref("window.onload") }} handler triggers.
    2. +
  2. First, we prepare to launch the First Time Use (FTU) experience and Homescreen with the safelyLaunchFTU() function. As its name implies, FTU is only shown when the user starts Firefox OS for the first time.
    3. +
  3. When the user presses DONE inside the FTU, the ftudone custom event is fired, and bootstrap.js listens for and handles this event.
    4. +
  4. Next, we use the {{domxref("Settings") }} API (navigator.mozSettings) to set the gaia.system.checkForUpdates setting to true, meaning that the system will check for updates.
    5. +
  5. Finally, we run the customed window.dispatchEvent,  via CustomEvent. This is a very important pattern used by Gaia for system notifications and communication with Gecko. In this case, the Gaia System app is notifying Gecko that it is ready to listen to and handle events.
    6. +
+

Instantiable modularization

+

The system itself is constantly evolving to achive better modularization and flexibility. From version 1.4 there’s an initiative underway to refactor the system module as instantiable object.

+

After all the above code has been run, the references to each system component in bootstrap.js will be in the following form:

+
window.telephonySettings = new TelephonySettings();
+window.telephonySettings.start();
+

The source code skeleton for TelephonySettings() would be:

+
(function(exports) {
+  'use strict';
+  function TelephonySettings() {
+    this.init_param = false;
+  }
+
+  TelephonySettings.prototype = {
+    // Initialzes all settings.
+    start: function() {
+      ...
+    },
+
+    // Clean all settings.
+    stop: function() {
+      ...
+    },
+
+    1st_method: function ts_1st_method() {
+      ...
+    },
+
+    2nd_method: function ts_2nd_method() {
+      ...
+    }
+  };
+
+  exports.TelephonySettings = TelephonySettings;
+
+}(window));
+

This pattern helps modularize each system component and makes them more testable.

+

Boot up and shut down animations

+

This section explains how the System app controls the bootup and shut down animations. init_logo_handler.js and sleep_menu.js handle the system boot up and shut down animations.

+

Boot up animations

+

The bootup animation action is not actually contained in the main bootup procedure, but is instead hooked by check EventListeners.

+

The boot up animation code in init_logo_handler.js looks like so:

+

To paint the logo or animation once Gecko is ready to paint something onto the screen, we run the appropriate system handler once the DOM is loaded, then hide the logo once a ftudone or ftuskip event is fired. The _appendCarrierPowerOn method, contained in init_logo_handler.js, shows how Gaia prepares to launch the animation or boot logo by listening to the DOMContentLoaded event. The logoLoader is defined in logo_loader.js.

+
var self = this;
+document.addEventListener('DOMContentLoaded', function() {
+  self.carrierLogo.appendChild(self.logoLoader.element);
+  self._setReady();
+});
+

Once the logo is prepared, the system calls the _setReady() method, which sets up a listener to listen for the special mozChromeEvent event  with a type of system-first-paint to denote that the system is ready to paint on to the screen.

+
var elem = this.logoLoader.element;
+  ...
+window.addEventListener('mozChromeEvent', function startVideo(e) {
+  if (e.detail.type == 'system-first-paint') {
+    window.removeEventListener('mozChromeEvent', startVideo);
+    if (elem &amp;&amp; elem.ended === false) {
+      elem.play();
+    }
+  }
+});
+

At this point the graphic element is now playing. Once a ftuopen or ftuskip event is fired, init_logo_handler.js invokes the default handleEvent() method that in turn triggers the animate() method to hide the animation with a fadeout transition effect.

+
init: function ilh_init(logoLoader) {
+  window.addEventListener('ftuopen', this);
+  window.addEventListener('ftuskip', this);
+    ...
+},
+
+handleEvent: function ilh_handleEvent() {
+  this.animate();
+},
+

Shut down animations

+

Once the system is ready, long pressing the power button fires a holdsleep event, as defined in hardware_button.js. This script handles all of "hardware button pressed" events, including power (sleep), home, volume up/down, and so on.

+
HardwareButtonsSleepState.prototype.enter = function() {
+  this.timer = setTimeout(function() {
+    / * When the user holds Sleep button more than HOLD_INTERVAL. */
+    this.hardwareButtons.publish('holdsleep');
+    this.hardwareButtons.setState('base');
+  }.bind(this), this.hardwareButtons.HOLD_INTERVAL);
+};
+

The shut down animation is handled by sleep_menu.js; this script listens for the holdsleep event and shows the menu dialog when it is fired.

+
init: function sm_init() {
+    ...
+  window.addEventListener('holdsleep', this.show.bind(this));
+    ...
+}
+

If user chooses to shut down the device via the restart or power off menu options, the startPowerOff() function is triggered, which in turn triggers the LogoLoader() function to handle displaying the shutdown animation.

+
handleEvent: function sm_handleEvent(evt) {
+  switch (evt.type) {
+    case 'click':
+      ...
+    this.handler(action);
+    break;
+    ...
+  }
+}
+
+handler: function sm_handler(action) {
+  switch (action) {
+    ...
+    case 'restart':
+      this.startPowerOff(true);
+      break;
+
+    case 'power':
+      this.startPowerOff(false);
+      break;
+    ...
+  }
+}
+

System functions

+

There are plenty of functions and responsibilities handled by the System app, some of which you might be surprised to find under its remit. The System app handles statusbar and utility tray management, SIM lock, update manager, homescreen launcher, webapp window management, and more. This section looks into some of the most important functions that it serves.

+

Statusbar and utility tray

+

The System status bar and dropdown menu (Gaia calls it the utility tray; Android uses the term notification bar) are handled by statusbar.js and utility_tray.js. Inside the app's index.html, the status bar items are defined inside <div id="statusbar" data-z-index-level="statusbar"> whereas the utility tray items reside within the following structure:

+
<div id="utility-tray" data-z-index-level="utility-tray">
+  <div id="notifications-container">
+    ...
+  </div>
+</div>
+

There are some special panels within the utility tray such as update Manager, emergency callback manager, storage watcher notification, media playback notification and controls, Bluetooth transfer
+ status, and keyboard input method (IME) switcher. The related handlers and styles are located in the js/ and style/ directories.

+

Special app launchers

+

The System app has three special launchers, which invoke separate web apps when required:

+ +

Lockscreen

+

The main entrypoint for the Lockscreen app is system/js/lockscreen.js. From this screen the user can swipe unlock, trigger the secure camera and control the music player.

+

Emergency dialer

+

The code for the emergency dialer is contained in the gaia/apps/system/emergency-call/ directory. It’s a simplified version of the Dialer app that allows the user can access from the {{ anch("SIM PIN unlock dialog") }} to dial emergency services such as police.

+

System-wide UI

+

The System app handles most of the system-wide UI, which mostly consists of dialogs such as the volume warning dialog, SIM PIN unlock dialog, cell broadcast
+ dialog, and UI elements affecting window behavior, such as the software home button.

+

z-index level

+

with the System app's index.html file, many components are bundled with data-z-index-level attribute, for example:

+
<div id="sleep-menu" data-z-index-level="sleep-menu">
+  ...
+</div>
+

The corresponding z-index-levels are defined inside system/style/zindex.css, for example:

+
#screen > [data-z-index-level="sleep-menu"] {
+  z-index: 65536;
+}
+
+...
+
+#screen > [data-z-index-level="app"] > .appWindow {
+  z-index: 3;
+}
+

The z-index settings are arranged according to the order the elements are displayed on screen — elements that need to appear higher in the visual hierarchy are given a higher number. This is how the System app handles the window management at a basic level.

+

The software home button

+

The software home button is an alternative home button, automatically enabled on devices without a hardware home button, e.g. Nexus 4. To control it's appearence Gecko provides a properietary media feature called -moz-physical-home-button, which can be used inside a media query to apply styles based on the presence of a hardware home button. The window manager allocates some screen space for the software home button if required.

+

In system/style/window.css (and many other system style files), you will see this:

+
@media not all and (-moz-physical-home-button) {
+  #screen:not(.software-button-disabled) > #windows > .appWindow {
+    bottom: 5rem;
+  }
+ }
+

Home gesture (slide up from bottom of the screen)

+

The home gesture is another hardware home button alternative; it can be enabled in developer settings, and the code that controls it is found in system/js/home_gesture.js. The gesture involves swiping from the bottom of the screen, and can be used to close apps, for example.

+

The gesture will be automatically enabled on Firefox OS tablet devices. The threshold defined in gaia/shared/js/screen_layout.js is used to detect whether the device is a tablet or not.

+

Volume warning dialog

+

The code that controls the volume warning dialog is found in system/js/sound_manager.js. The volume warning dialog will appear when all of the following conditions are satisfied:

+ +

SIM PIN unlock dialog

+

The code that controls the SIM PIN unlock dialog is in system/js/simcard_dialog.js — this dialog shows when the Passcode lock option is enabled, the lock screen is showing. The opening app also has to have telephony permissions contained in its manifest.webapp file (which the System app does).

+
+

Note: the SIM PIN unlock dialog is not shown while the phone is in Airplane mode.

+
+

 

diff --git "a/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/video/index.html" "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/video/index.html" new file mode 100644 index 0000000000..b3ef03e80e --- /dev/null +++ "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/video/index.html" @@ -0,0 +1,27 @@ +--- +title: গায়া ভিডিও অ্যাপ +slug: Archive/B2G_OS/Platform/গায়া/Gaia_apps/Video +tags: + - Apps + - Gaia + - Video + - অ্যাপ + - গায়া + - ভিডিও +translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps/Video +--- +
+

ভিডিও অ্যাপ হল একটি সাধারণ ভিডিও প্লেয়ার যার সাহায্যে আপনার ফায়ারফক্স ওএস ডিভাইসের স্টোরেজ মিডিয়াতে থাকা যেকোন ভিডিও আপনি চালাতে পারবেন ।

+
+

video app screenshot with single video shown called ha ha size 13mb, 4 minutes long, mp4

+

সাধারণ ব্যবহার

+

যখন আপনি ভিডিও অ্যাপটি চালু করবেন , তখন ডিফল্টভাবে আপনি একটি বার্তা পাবেন যা আপনাকে বলবে যে , প্রদর্শন করার মত কোন ভিডিও পাওয়া যাচ্ছে না এবং আপনাকে কিছু ভিডিও যোগ করতে হবে ।ক্যামেরা অ্যাপ ব্যবহার করে ভিডিও ধারণ করে অথবা ডিভাইসটির স্টোরেজকে আপনার কম্পিউটারে ড্রাইভ হিসেবে মাউন্ট করে এবং তারপর ফাইল কপি করেও এটা করা যেতে পারে। অ্যাপটির নিচের দিকে দুইটি বাটন আছে : বাম দিকের বোতামটি আরো ভিডিও ধারন করা অথবা ছবি তোলার জন্য আপনাকে ক্যামেরা অ্যাপে নিয়ে যাবে এবং ডান দিকের বোতামটি আপনাকে গ্যালারীতে নিয়ে যাবে যেখানে ভিডিও অথবা ছবি দেখতে পারবেন । 

+


+ কম্পিউটার ব্যবহার করে ফাইল কপি করার জন্য , “Enable USB Storage” সক্রিয় করা আছে কিনা , নিশ্চিত করুন (Settings > Media Storage > Enable USB Storage)। যদি “Videos” ডাইরেক্টরি এখনো থেকে না থাকে , তাহলে এই নামটি ব্যবহার করেই একটি তৈরি করে ফেলুন ।
+
+ ভিডিওসমূহ কোথায় সংরক্ষিত হবে তা আপনি ডিফল্ট মিডিয়া লোকেশনে “এসডি কার্ড” এবং "ইন্টারনাল" এর মধ্যে পরিবর্তনের মাধ্যমে পরিবর্তন করতে পারেন (inside Settings > Media Storage) । 

+
+

দ্রষ্টব্য : যদি ফায়ারফক্স ওএস এ ভিডিও দেখতে আপনার সমস্যা হয় , তাহলে আপনার দুইটি বিষয় সম্পর্কে সচেতন হওয়া উচিত । প্রথমে , ফায়ারফক্স ওএস এর কিছু সংস্করণে বড় আকারের ভিডিওসমুহকে উপেক্ষা করা হয় - যা ভবিষ্যতের সংস্করণে ঠিক হয়ে যাবে । দ্বিতীয়ত , ফায়ারফক্স ওএস প্রায় সকল সাধারণ ভিডিও ফরমেট প্রদর্শন করে , কিন্তু সব করে না । কোন কোন ফরমেট সমর্থন করে , তা জানতে যে সব মিডিয়া ফাইল সমর্থন করে এই নিবন্ধটি দেখতে পারেন ।

+
+

ভিডিও অ্যাপটির পরিবর্তন করা

+

TBD

diff --git "a/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/window_management/index.html" "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/window_management/index.html" new file mode 100644 index 0000000000..5f9fb1cb2a --- /dev/null +++ "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/gaia_apps/window_management/index.html" @@ -0,0 +1,287 @@ +--- +title: Window Management +slug: Archive/B2G_OS/Platform/গায়া/Gaia_apps/Window_Management +tags: + - Apps + - B2G + - Firefox OS + - NeedsReview + - Window Management + - system +translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps/Window_Management +--- +
+

 সাধারণ ভাবে,একটি  উইন্ডো  ম্যানেজার একটি আবেদনের অংশ  যে, স্থানের এবং ভৌগলিকভাবে  সাধারণ ক্ষেত্রে ব্যবহারকারীদের মধ্যে উইন্ডোর আবির্ভাব ঘটানো নিয়ন্ত্রণ করে।এই অনুচ্ছেদ দেখায় কিভাবে ফায়ারফক্স ওএস উইন্ডো ম্যানেজমেন্ট নিয়ন্ত্রণ  করে।

+
+

  ফায়ারফক্স  ওএস  এ , উইন্ডো  ম্যানেজমেন্ট  সিস্টেম  অ্যাপের  একটি অংশ ( সিস্টেম অ্যাপ পৃষঠার লিংক)  এবং দায়িত্বশীলঃ

+ +

 এসব বিষয়ে  বিস্তারিত যাওয়ার আগে,চলো দেখি কিভাবে গাইয়াতে  অ্যাপ  শুরু হয় ।

+

 কিভাবে গায়াতে অ্যাপ শুরু  হয়েছে

+

  একটি  অ্যাপ  ফায়ারফক্স os  এ শুরু হতে পারে,উদাহরণ  হিসেবে  অন্য  অ্যাপের  মধ্যে দিয়ে একটি সিস্টেমের তথ্য তৈরির  মাধ্যমে, অথবা হোমস্ক্রীনে আইকন এর সঙ্কেত দেয়ার  মাধ্যমে। 

+

+

 ইভেন্টটি  যা  গেটকো  ইজিনের  এবং সিস্টেম অ্যাপের দ্বারা  অ্যাপের   উদ্বোধনের পরিচালনা নিয়ন্ত্রণ  করে ,এবং নিচে আর ও  বিস্তারিত ভাবে ব্যাখা করেছে ।

+

 অ্যাপ  গঠন

+

 সকল  গায়া ওয়েব পেজ হল  packaged apps,যেগুলো গুরুত্বপূর্ণ ভাবে সকল আবেদন সম্পদের জিপ ফাইল  ধারণ করেঃHTML,CSS, JavaScript, images সুস্পষ্টতা ইত্যাদি। গায়াতে  প্রতি ওয়েবঅ্যাপ নিচের প্রধান গঠনের মাধ্যমে পরিচালনা হয়েছেঃ

+
+
+ 
apps/[app name]/
+ - js
+ - styles
+ - locales
+ - test
+ - index.html
+ - manifest.webapp
+
+
+
+

+

যখন হোম স্ক্রীনে থেকে গায়ার একটি অ্যাপ শুরু হয়েছে,গেটকো   manifest://[app name].gaiamobile.org:8080 এর একটি ইউ আর এল খোলার চেষ্টা করবে,  manifest.webapp ঐ স্থানে পারস্পারিক সম্পর্কের  সৃষ্টি করে,তারপরে  launch_path — যা index.html  এ সূচিপত্র এর সুস্পষ্টতা ব্যাখাকরে পরিচালনা করে সকল ওয়েব অ্যাপ গঠনের জন্য।  index.html ফাইলে সকল প্রয়োজনীয় স্টাইল এবংJavaScript  রাখা হবে।

+
+

নোটঃ একটি  অনাষ্ঠুনিক  আলাপচারিতা হিসেবে,গায়া অ্যাপের জন্য সাধারণত   [app name].js or main.js. হল প্রধান JavaScript এর ঢূকার  পথ

+
+

অ্যাপ  শুরুর ধারা

+

  ইভেন্টটি গেটকোর দ্বারা পাঠানো হয়।একবার গে্টকো প্রস্তুত হলে,  অ্যাপ windowFactory  system/js/app_window_factory.js  থেকে  গ্রহন করবে একটি webapps-launch  একটি অ্যাপের জন্য একটি ইভেন্ট,অথবা একটি   open-app ইভেন্ট  একটি ঝুলন্ত খবর সিস্টেম পরিচালনা করার জন্য।

+
window.addEventListener('applicationready', function appReady(e) {
+  window.removeEventListener('applicationready', appReady);
+  window.addEventListener('webapps-launch', self);
+  window.addEventListener('webapps-close', self);
+  window.addEventListener('open-app', self);
+});
+

ইভেন্ট শাখায় পরিচালনায় বিস্তারিত, this.launch(config) একটি অ্যাপ উইন্ডো   অথবা একটি কাজকর্ম শুরু করবে।একবার অ্যাপটি বন্ধ হলে, Appwindow  গ্রহন করবে একটি  webapps-close ইভেন্ট।

+

প্রধান প্রক্রিয়া  launch() নিয়মেঃ

+
var app = AppWindowManager.getApp(config.origin);
+if (app) {
+  app.reviveBrowser();
+} else if (config.origin !== homescreenLauncher.origin) {
+  new AppWindow(config);
+} else if (config.origin == homescreenLauncher.origin) {
+  homescreenLauncher.getHomescreen().ensure();
+}
+

 প্রথম কোডটি দেখে যদি অ্যাপ এর মান বিদ্যমান থাকে এবং চেষ্টা করে পুনরায় পরিচালনা করে এটি গেটকোতে নিতে। অন্য দিকে যদি এটি একটি সাধারণ অ্যাপ হয়,আমরা তৎক্ষনাৎ অ্যাপের জন্য  AppWindow তৈরি করি। অন্য বিশেষ ক্ষেত্র হল is the homescreenLauncher —এই ক্ষে্ত্রে আমরা প্রয়োজনীয় অপারেশন  করি।

+

অ্যাপ উইন্ডো

+

অ্যাপের মত ওয়েব পৃষ্ঠা তৈরি করতে ফায়ারফক্স ও এস একটি বিশেষ mozBrowser API  ব্যবহার করে।উইন্ডো ম্যানেজমেন্টের ভিত্তি হল মাত্র একটি  mozBrowser অ্যাপি র‌্যাপার ইনার আই ফ্রেম (উইনডো) পরিচালনা করতে। একটি  বিশেষ ধরণের আইফ্রেম moz-browser  তৈরি করা হয়েছে একটি আসল ব্রাউজার উইন্ডোর মত আইফ্রেম তৈরি করতে।

+

AppWindow তৈরি করে,বহন করে ,এবং পরিচালনা করে একটি mozBrowser আইফ্রেম। AppWindow পরিচালনা করবে সকল mozBrowser ইভেন্ট mozBrowser আইফ্রেম নিজ থেকে বাতিল হওয়া  এবং দেখায় নিযুক্ত ইউ এল ফিচার।

+

অ্যাপ জীবন চক্রের ম্যানেজমেন্ট

+

অ্যাপের সম্পুর্ন জীবন চক্র  নিচেঃ

+

         অ্যাপ  শুরু

+ +

অ্যাপের উদ্বোধন

+

 যখন  একজন  ব্যবহারকারী আইকন খুলে হোমস্ক্রীনের উপর,হোমস্ক্রীন  mozApps API ব্যবহার করে গেকো ইঞ্জিনকে প্রতিনিধিত্বকারী অ্যাপ খুলতে বিজ্ঞপ্তি দিতে।যখন গেকো প্রস্তুত ,এটি সিস্টেমঅ্যাপে উপযুক্ত ইভেন্ট পাঠায়।

+

 অ্যাপ ধ্বংস

+

  অ্যাপ নিচের বিষ্যের কারণে ধ্বংস হতে পারেঃ

+ +

কার্যকারী অ্যাপের জন্য ,সজীবতার কার্যক্রম বন্ধ হওয়ার পরে,ডি ও এম থেকে ধ্বংস্কারী অ্যাপের আইফ্রেম  সরিয়ে ফেলা হয়ে থাকে। অকার্যকারী অ্যাপের জন্য,তাদের ধ্বংস করার পরে তৎক্ষনাৎ আইফ্রেম সরিয়ে ফেলা হয়।

+

 অ্যাপ গুলো বিঘ্নিত হবে নিচের বিষ্যের কারণেঃ

+ +

পুনরায় অ্যাপ শুরু করা

+

অ্যাপগুলো পুনরায় নিচেরভাবে শুরু করতে হবেঃ

+ +

অ্যাপ কিভাবে  প্রতিদান দিয়ে থাকে

+

যখন আমরা একটি অ্যাপ শুরু করি, স্ক্রীনটি নিচের ব্লকের মাধ্যমে প্রতিদান দিয়ে থাকবে

+ +

+

অ্যাপের নকশা

+

 অ্যাপ ফ্রেমের প্রধান বহনকারী হল নিচেঃ

+
<iframe id="browser2" mozallowfullscreen="true" mozbrowser="true" remote="true"...
+... src="", data-url="" data-frame-type="window" data-frame-origin="...">
+</iframe>
+

 আইফ্রেম ধারণ করেঃ

+ +

অ্যাপ উইন্ডো রিসাইজিং

+

অ্যাপ উইন্ডো কিছু ঘটনার কারণে রিসাইজিং হয়ে থাকবেঃ

+ +

+

সারাংশে,উইন্ডো সাইজ আক্রান্ত হয়ে থাকেঃ

+ +

+

 অ্যাপ উইন্ডো ওরিয়েন্টেশন

+

 অ্যাপের   ওরিয়েন্টেশন  প্রতিটি আলাদা অ্যাপের থেকে নিয়ন্ত্রন করে যেতে পারে,অথবা সিস্টেমের দ্বারা বৈশ্বিকভাবে।তুমি অ্যাপে ওরিয়েন্টেশন সেট করতে পারো  manifest.webapp  নথিতে    orientation দ্বারা সঠিকভাবে,উদাহরণ হিসেবেঃ

+
"orientation": "default",
+

তুমি আরো সক্ষম ওরিয়েন্টেশন অ্যাপি  লক অথবা আন লক করতে ওরিয়েন্টেশনঃ

+
screen.mozLockOrientation([‘portrait-primary’]);
+
+screen.mozUnlockOrientation();
+

কিছু প্যারামিটারের মান আছে যা ব্যবহার করা যেতে পারে ওরিয়েন্টেশন কে বাধা দিতেঃ

+ +

  আরো বিস্তারিত পাওয়া যায়  Screen.lockOrientation  তে উল্লেখ, এবং তুমি  gaia/test_apps/uitest/js/API/orientation.js তে একটি উদাহরণ দেখতে পারো।

+

+

 অ্যাপ দর্শন

+

কেবল যখন স্ক্রীন বন্ধ হয়ে যায় সিস্টেম অ্যাপটি পিছনের দিকে যায় যখন সাধারন কিছু বিষয়ের উপর নির্ভর করে অ্যাপগুলো পিছনেরদিকে যায়ঃ

+ +
+

নোটঃপৃষ্ঠা  দর্শন আচ্ছাদিত থাকে  যখন  পূর্ববর্তী আইফ্রেম  অকার্যকরী  থাকে।

+
+

 অ্যাপগুলো সবসময় সুস্পষ্টভাবে থাকে যখনঃ

+ +

 অ্যাপ সবসময় পিছনেরদিকে  থাকেঃ

+ +

 উপরের নিয়মের কিছু ব্যতিক্রম আছেঃ

+ +

 অ্যাপ উইন্ডো অ্যানিমেশন এবং পরিবর্তনমূলক

+

গায়া উইন্ডো ম্যানেজার আরো অ্যাপ উইন্ডো অ্যানিমেশন প্রদান করে এবং একটি স্লিকের ব্যবহারকারী অভিজ্ঞতা তৈরি করার জন্য পরিবর্তন করে।

+

 অ্যাপ উইন্ডো অ্যানিমেশন এবং পরিবর্তন কিছু ধাপের মাধ্যমে পরিচালনা করা হয়ে থাকেঃ

+ +

যখন  setDisplayedApp() প্রক্রিয়া কল করা হয়, নিচের চিত্রের  দ্বারা  চিত্রের দ্বারা ব্যাখার মাধ্যমে অ্যাপটি শুরু করা হবে।

+

+

 ফায়ারফক্স ও এস অ্যানিমেশন ধারা পরিচালনা করতে কিছু বুদ্ধি নিমগ্ন আছেঃ

+ +

+

 সুনির্দিষ্ট UI অ্যাপ উইন্ডো

+

 কিছু ইউএল উপাদান আছে যেগুলো কেবল সুনির্দিষ্ট অ্যাপের সাথে সংযুক্ত,যেমন ক্রোমিয়াম ব্রাউজার, মোডাল ডায়ালগ,সূচিপত্রের মেন্যু,পপুস এবং বাতিল পৃষ্ঠাগুলো।

+

চলো এগুলোর কিছু আলোচনা করি।

+

 মোডাল ডায়ালগ

+

 ফায়ারফক্স ডেক্সটপে, যদি তুমি ব্রাউজার ডেভলপার কনসোল খোলো এবং নির্দেশ প্রবেষ করো যেমন alert(), confirm(),এবং  prompt(),তুমি একটি কেন্দ্রীয় ডায়ালগ স্ক্রীনের উপর পাবে যা সূচিকে বন্ধ করে।ফায়ারফক্স ওএস এর সমতুল্যতা হল মোডাল ডায়ালগ।
+
+

+

 প্রসংগ মেন্যু ডায়ালগ

+

 প্রসংগ মেন্যু(অথবা লম্বা চাপের মেন্যু) মোবাইল ডেভেলপারদের কাছে পরিচিত ধারণা।সাধারণ অ্যাপের নকশায়,প্রায়শই ব্যবহিত ক্রিয়া ব্যবহার কারীদের কাছে দেখানো উচিত যাতে তারা সহজে অ্যাপ নিয়ন্ত্রন করতে পারে।প্রসংগ মেন্যু ক্রিয়া বহনের একটি স্থান দেয় যা তৎক্ষনাৎ ইউ আই স্থাপন করতে পারে না কিন্তু এখন ও সহজে পাওয়া যায়। 
+
+

+

 

+

খাঁটি(https)ডায়ালগ

+

system/js/app_authentication_dialog.js  তে ব্যাখা করা।

+

 মান বাছাই,সময়,তারিখ ডায়ালগ

+

 system/js/value_selector/ তে ব্যাখা করা।

+

 অনুমতি ডায়ালগ

+

 system/js/permission_manager.js  তে এবং system/js/media_recording.js তে ব্যাখা ( ব্যবহার ট্রে প্যানেলের জন্য) 

+

 বিশেষ অ্যাপস

+

 কিছু অ্যাপের দরকার একটি বিশেষ  appWindow জিনিস যা তারা বহন করে এমন  কিছু ফাঙ্কশন  সংযোগ স্থাপনের জন্য।উদাহরন দেয়াঃ

+ +

 

+

Child উইন্ডো ম্যানেজমেন্ট

+

 Child অ্যাপ উইন্ডো প্রত্যক্ষ অথবা পরোক্ষ ভাবে খোলা হয়ে থাকে অন্যান্য অ্যাপ/পৃষ্ঠা দ্বারা।উদাহরণ গূলো হলঃ

+ +

 যখন একটি ক্ষুদ্র উইন্ডো সাধারনভাবে শেষ হয়,এর প্রধান উইন্ডো পুনরায় খোলা উচিত।কিছু ক্ষুদ্র উইন্ডো এর অংশ অন্য ক্ষুদ্র উইন্ডো তে থাকতে পারে। প্রসেস প্রায়ওরিটি ম্যানেজমেন্ট হল একটি প্রধান বিষয় প্রধান এবং ক্ষুদ্রের মধ্যে।

+

 আকর্ষণ উইন্ডো

+

 আকর্ষন উইন্ডো তোমার আকর্ষন পেতে ব্যবহার হয়ে থাকেঃ

+ +

 বর্তমানে ঐ সব আকর্ষন উইন্ডো ভুলে ব্যবহার করা হইয়ে থাকে জোর দেয়া(  প্রাথমিক  পরটড়াঈট )ওরিয়েন্টেশনশ্বাসী বিস

+

বিশ্বাসী UI

+

 

+

 পারসোনা এবং mozPay অ্যাপি ব্যবহার করে বিশ্বাসী UI।তারা ব্যবহার করে বিশেষ আকারঃ৮০%।হোমস্ক্রীন বিশেষ ভাবে দেখায় যখন বিশ্বাসী ইউ আই চলমান থাকে।
+
+

+

 ইতিহাস ম্যানেজমেন্ট

+

  এই অংশে  আমরা কিছু উপাদানের দিকে তাকাবো যা ফায়ারফক্স ও এস এর ইতিহাস ম্যানেজমেন্ট পরিচালনা করে।

+

 টাস্ক ম্যানেজার

+

 টাস্ক ম্যানেজার (কার্ড ভিউ )  লম্বা চাপের হোম বাটনের দ্বারা আগ্নেয়াস্ত্র হিসেবে ব্যবহার হতে পারে।এটি অ্যাপের ইতিহাস ডিভাইসে দেখাতে পারে,এবংএকটি  অ্যাপের কাযকর্ম ধৰংস করতে সক্ষম।

+

 ফায়ারফক্স ও এস ভার্সন  ২.০,  এখানে একটি অভিজ্ঞতা সম্পন্ন ফিচার আছে জাম্বল অ্যাপ বর্তমান রাখতে এবং দেখায় যে তারা এখন ও বিদ্যমান।

+

  ওয়েব কার্যক্রম অন্যত্র

+

  ইনলাইন এক্টিভীটিস একটি নতুন  উল্লেখ পৃষ্ঠার  আর সূচনা করেছে কার্যক্রমে ডাটা প্রদান করতে।
+
+  ঊইন্ডো এক্টীভীটী বিদ্যমান অ্যাপ পুনরায় ব্যবহার করবে ডাটা এক্টীভীটি গ্রহন করতে।

+

 শেষের ভঙ্গিমা (অভিজ্ঞতা সম্পন্ন)

+

 অভিজ্ঞতাসম্পন্ন ইদজ গেসচার ফিচার ফায়ারফক্স ওএস ২.০ + এর ডেভেলপার মুডে সহজপ্রাপ্ত,এবং ফিঙ্গার সুইপ ডান/বামে ব্যবহার করতে তোমাকে অনুমোদন দেয় অ্যাপ এবং ওয়েব পৃষ্ঠার মধ্যে নেভিগেট করতে ডিভাইসের শেষ থেকে ।

+

কিভাবে পরের অ্যাপ দেখতে পছন্দ করা যায়?

+ +

 কিভাবে আগের অ্যাপ পছন্দ করতে হয়?

+ +

স্ক্রীনশট ম্যানেজমেন্ট

+

টাস্ক ম্যানেজারের(কার্ড দেখা)  মাধ্যমে স্ক্রীন শট ব্যবহার করা হয়ে থাকে ইতিহাসে  অ্যাপ কি দেখায় তা দেখতে।একটি অ্যাপের স্ক্রীনশট নেয়া হয়ে থাকে যখন অ্যাপটির সজীবতা বন্ধ শেষ হয়েছে।

+

আরো দেখুন

+

From Browser to Browser

diff --git "a/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/index.html" "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/index.html" new file mode 100644 index 0000000000..251bd997e1 --- /dev/null +++ "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/index.html" @@ -0,0 +1,61 @@ +--- +title: গায়া +slug: Archive/B2G_OS/Platform/গায়া +tags: + - B2G + - Gaia + - Mobile + - NeedsReview +translation_of: Archive/B2G_OS/Platform/Gaia +--- +

গায়া Firefox OS এর একটি ব্যবহারকারী ইন্টারফেস লেভেল। ফায়ারফক্স ওএস চালু হবার পর স্ক্রিনের সব কিছুই গায়ার মাধ্যমে সম্পাদিত হয়, যার মধ্যে আছে lock screen, home screen, dialer, এবং অন্যান্য অ্যাপ্লিকেশন সমূহ। গায়া সম্পূর্নভাবে লেখা হয়েছে HTML, CSS, এবং JavaScript-এ। অপারেটিং সিস্টেম এবং হার্ডওয়্যারের সাথে গায়ার সংযোগ ঘটে শুধুমাত্র আদর্শ ওয়েব API সমূহের মাধ্যমে,  যা Gecko সম্পাদন করে।

+ +

এটির ডিজাইন এর ফলে গায়া ফায়ারফক্স ওএস ছাড়াও অন্যান্য অপারেটিং সিস্টেম এবং ওয়েব ব্রাউজার-এ চালাতে সক্ষম (যদিও নির্ভর করবে ব্রাউজার এর কার্যক্ষমতার ওপর)।

+ +

গায়ার পাশাপাশি ইন্সটলকৃত তৃতীয় পক্ষের অ্যাপ্লিকেশন সমূহ গায়ার মাধ্যমে চালু করা যাবে।

+ + + + + + + + +
+

গায়ার নথিপত্র

+ +
+
গায়া পরিচিতি
+
ফায়ারফক্স ওএস চালিত ডিভাইসের জন্য গায়া একটি ইউজার ইন্টারফেস অ্যাপলিকেশন; এটি ফায়ারফক্স ওএস এ চলা একটি ওয়েব অ্যাপ্লিকেশন। এই গাইডে গায়া কে আরো বিস্তারিত ভাবে বর্ননা করা হয়েছে।
+
গায়া অ্যাপ সমূহ
+
গায়া পরিবারের মধ্যে যেসব অ্যাপ ডিফল্ট ভাবে পাওয়া যায়, সেগুলোর ব্যবহার সম্পর্কিত টিপস এবং কিভাবে সেগুলো মডিফাই করবেন, তার সব তথ্য এখানে পাবেন।
+
গায়া হ্যাকিং গাইড
+
এই গাইডটিতে গায়া ইন্টারফেস হ্যাক এবং মডিফাই করার জন্য নির্দেশনা আছে।
+
গায়া বিল্ড সিস্টেম প্রাইমার
+
বিল্ডের জন্য আসল কাজের বেশিরভাগই করে থাকে build/ সাবডিরেক্টরির মধ্যে থাকা স্ক্রিপ্ট গুলো।
+
গায়া হ্যাকিং টিপস এবং সচরাচর জিজ্ঞাসিত প্রশ্ন
+
গায়া হ্যাক সংক্রান্ত সহায়ক বিভিন্ন টিপস ও সচরাচর জিজ্ঞাসিত প্রশ্নের তালিকা।
+
+ +

সব দেখুন...

+ 		+ + + + +

রিসোর্স সমূহ

+ + +
diff --git "a/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/introduction_to_gaia/index.html" "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/introduction_to_gaia/index.html" new file mode 100644 index 0000000000..16251af688 --- /dev/null +++ "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/introduction_to_gaia/index.html" @@ -0,0 +1,29 @@ +--- +title: গায়ার সাথে পরিচিতি +slug: Archive/B2G_OS/Platform/গায়া/Introduction_to_Gaia +tags: + - B2G + - Gaia + - অ্যাপ + - গায়া + - সেটিংস্‌ +translation_of: Archive/B2G_OS/Platform/Gaia/Introduction_to_Gaia +--- +
+

Gaia is the user interface for Boot to Gecko (B2G); it's a set of Web applications that runs locally on a B2G device, emulator, desktop build, or Firefox build. All you need to know in order to add apps or make changes to Gaia are Web technologies like JavaScript, HTML, and CSS.

+
+

গায়া স্ক্রিন লক

+

গায়া লক স্ক্রীনে নেটওয়ার্ক বার,  সময় ও তারিখ এবং একটি  স্লাইডবার আছে যা বাবহারকারির ফোন আনলক করে অথবা ছবি তোলার জন্য ক্যামেরা চালু করে। যদি বাবহারকারি পাসকোড সেট করেন তবে লক স্ক্রীন এ পাসকোড প্রবেশ করতে হবে।

+

+

উল্লেখ্য যে কোনো কোনো ডিভাইসে শুরু থেকেই পাসকোড দেয়া থাকে; এক্ষেত্রে আনলক করার জন্য "0000" পিন ব্যবহার করতে হবে।

+

গায়া ডিফল্ট ইন্টাফেস

+

গায়া ডিফল্ট ইন্টেরফেস, নিম্নে প্রদত্ত, অন্যান্য সব স্মার্টফোনের মতই।

+

+

এই ছবিটি স্পষ্টতই অপারেটিং সিস্টেমের প্রিরিলিসড ভারসন এর। উপরের স্টাটাস বারটি নেটওয়ার্ক (অথবা নেটওয়ার্ক ছাড়া ডিভাইসে "No SIM card" ) ও Wifi এর সিগন্যাল, ব্যাটারি লেভেল এবং বর্তমান সময় নির্দেশ করে।

+

ডিসপ্লের মাঝের অংশে বিভিন্ন অ্যাপ্লিকেশানের আইকন দেখা। আপনি চাইলে Gaia apps পেজ থেকে আরও অ্যাপ নামাইতে পারেন।

+

স্ক্রীনের নিচের দিকের ডকে সর্বোচ্চ ব্যবহৃত অ্যাপ্লিকেশানগুলো থাকবে। আপনি চাইলে মাঝের অ্যাপ থেকে ড্রাগ ড্রপ করতে পারবেন।

+

অারও দেখুন

+ diff --git "a/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/lockscreen_architecture_(v1.5_)/index.html" "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/lockscreen_architecture_(v1.5_)/index.html" new file mode 100644 index 0000000000..04eec8dd7c --- /dev/null +++ "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/lockscreen_architecture_(v1.5_)/index.html" @@ -0,0 +1,38 @@ +--- +title: LockScreen Architecture (v1.5+) +slug: Archive/B2G_OS/Platform/গায়া/LockScreen_Architecture_(v1.5_) +translation_of: Archive/B2G_OS/Platform/Gaia/LockScreen_Architecture_(v1.5_) +--- +

বর্তমান গায়াতে LockScreen হল একটি মনোলিথিক উপাদান,যা ইহার LOC সিস্টেম অ্যাপের অনুযায়ী দ্বিতীয় বৃহত্তর ফাইলে থাকে। এটি ইহা ফাংশন কারণবশত যোগ/মোডিফাই/সরিয়ে ফেলে এবং এমনকি স্টাইলের পরিবর্তন ঘটায় ।

+

শুধুমাত্র ওই কারণে স্লাইডিং ফাংশন সরিয়ে ফেলার জন্য যখন v1.3 লাইব্রেরি আদান প্রদান করা হয়,আমাদের এখনো  LockScreen down ভেঙ্গে ফেলা প্রয়োজন এটাকে আরো বেশি নমনীয় করার জন্য এবং নিজের অন্যজাতীয় উপাদান থেকে সরিয়ে ফেলার জন্য,ঘড়ি ও মিউজিক প্লেয়ারের মত।এইসব উপাদানের নির্দিষ্ট ইউনিট থাকা উচিত যা কেবলমাত্র তাদেরকে ম্যানেজ করতে পারে এবং LockScreen  এর সাথে কিছু পাবলিক ইন্টারফেসের সাথে যোগাযোগ করতে পারে,তার চেয়ে ও তাদের প্রয়োজন সরসসরিভাবে গ্রাব করতে পারে এবং তারা যে পথ ব্যবহার করে তার মত গ্লোবাল স্টাট পরিবর্তন করতে পারে।অন্য কথায়,তাদের উইদজেট থাকা উচিত,এবং LockScreen উইদজেট সিস্টেমের দ্বারা ম্যানেজ করতে পারে। সম্পুর্ণ প্রতিসৃত প্ল্যান এখন চলছে এবং  গায়া v1.5 এর অংশের সূচি,এবং এই অনুচ্ছেদ ব্যাকার উপরে ফোকাস করে থাকে যে স্থাপত্যবিদ্যা আমরা ব্যবহার করি,এবং কিভাবে একটি নতুন উইদজেট কার্যকরী হয়।

+

মেডিয়েটোর,ফ্যাক্টরি এবং রাউটার

+

নতুন LockScreen এ,আমাদের তিনটি বিভিন্ন উপাদান আছে উইদজেট এবং যোগাযোগ করতেঃ

+

মেডিয়েটরঃসম্পুর্ন LockScreen এর কো-অর্ডিনেটর,এবং ইহা হল কেবলমাত্র আরও তৎক্ষনাৎ প্রকাশক উপাদান যা থাকা উচিত।

+

ফ্যাক্টরিঃকেন্দ্রে নয়ুন উইদজেট প্রস্তুত করা এবং পরিস্কার পথ

+

রাউটারঃ বাইরের বিশ্বের সাথে যোগাযোগ করার জন্য তথ্য পাঠানো এবং গ্রহন করা

+

মেডিয়েটর

+

মেডিয়েটর উইদজেটের থেকে সকল আবেদন পরিচালনা করবে। এই নির্দিষ্ট আবেদন যোগ করা হলঃ

+ +

যখন মেডিয়েটর এইসব রিকুস্ট গ্রহন করে  থাকে,ইহা LockScreen এর ধাপ পরিবর্তন করতে পারে(লকিং/আনলকিং রিকুস্ট),এবং সকল উইডগেটের পরিবর্তঙ্কে নটিফাই করে থাকে।নটিফিকেশন রিকুস্ট /রেস্পন্স এর থেকে ভিন্ন পথ,এবং তারা অভজারভ প্যাটার্ন অনুসারে উইডগেট এর সাথে যোগাযোগের ডিজাইন করে থাকে।

+

 IO সাইড থেকে,মেডিয়েটর রাউটার থেকে মেসেজ উইডগেট এ ফরওয়ার্ড  করবে নটিফিকেশন হিসেবে,উইডগেট মেডিয়েটরের মাধ্যমে মেসেজ পোস্ট করতে পারে,যা রাউটারে ফরয়ার্ড হয়ে,এর পিছনে হল যেউইডগেট কেবল মাত্র মেডিয়েটরের সাথে যোগাযোগ করতে পারে,LockScreen এর সমন্ধে কিছু জানেনা ।

+

শুরুর দিকে,মেডিয়েটরই হল প্রথম ধাপ।ইহা তৎক্ষনাৎভাবে রাউটারে এবং ফ্যাক্ট্রিতে প্রস্তুত করতে পারে,এবং যাওয়ডগেটে ভুল বুটস্টেপ যা এখন মেডিয়েটরের ভিতরে থাকে,ভবিষ্যতে আমরা কাস্টমাইজেবল পথ তৈরি করব উইডগেটকে সেট করতে সম্পুর্ণ LockScreen কে  আগে বুটস্টেপ করতে ।

+

 উইডগেটস

+

উইডগেটস ফ্যাক্ট্রি দ্বারা তৎক্ষনাৎভাবে করা উচিত,যা মেডিয়েটর পাস হতে পারে প্যারামিটার হিসেবে উইডগেট কন্সট্রাক্টরে।ইন্সটালিজেশনের পরে ,উইডগেট নিজের মেডিয়েটরে রেজিস্টার হওয়া উচিত।

+

 কাস্টম উইডগেট এর সমন্ধে কিছু না করা উচিত,কারণ প্রধান উইডগেট এগুলো সাধারণ বিষয় অটোমেটিক্যালি  পরিচালনা করে। সুতরাং এসব কঠোরভাবে রিকমান্ড করা হয়ে থাকে যে ডেভেলপারস এর উচিত প্রধান ওয়িডগেত এর উপর ভিত্তি করে  উইডগেট প্রস্তুত করা ।

+

উইডগেট মেডিয়েটরের কাছে থেকে এবং রাউটারের কাছে থেকে মেসেজ গ্রহন করতে এবং রিকুস্ট পাঠাতে পারে(মেডিয়েটরের দ্বারা দেয়া),এটা কিছু মেসেজ বের করতে পারে,নিচের ডায়াগ্রাম এই সব যোগাযোগ দেখিয়ে থাকেঃ

+

+

এই ডায়াগ্রাম এভাবে ব্যাখাকরা যায়ঃ

+
    +
  1. উইডগেট বাহিরের বিশ্বে মেসেজ পোস্ট করতে পারে। এই মেসেজ মেডিয়েটরের দ্বারা রাউটারে দেয়া,সুতরাং উইডগেট রাউটার সম্নধে কিছু জানে না।
    2. +
  2. রাউটার কিছু মেসেজ ফরওয়ার্ড এবং গ্রহন করতে পারে মেডিয়টরে,যা আবার উইডগেটে ফরওয়ার্ড হতে পারে।কিছু বিশেষ ক্ষেত্রে এই মেসেজ উইডগেট এ ফরোয়ার্ড হয়না।
    3. +
  3. যখন  LockScreen এর ধাপ পরিবর্তন হয়,মেডিয়েটর সকল উইডগেটের পরিবর্তন ও দেখাবে ।এই পরিবর্তন গুলো কিছু উইডগেট রিকুস্ট থেকে আসে (যেমন Lock/Unlock)।
    4. +
  4. উইডগেট LockScreen কে আনলক করতে দরকার হতে পারে।এই রিকুস্ট গ্রহন করে থাকে,মেডিয়েটর সকল আন লকিং অডিয়েটরকে কোন অব্জেকশন আছে কিনা সে ব্যাপারে জিজ্ঞাসা করে থাকেযদি কোন অব্জেকশন না থাকে তবে ভুল পাসওয়ার্ড দেয়ার মত দেয়,LockScreen নিজে আনলক হয়ে থাকে।
    5. +
  5. কিছু উইডগেট নিরাপদ অ্যাপ গ্রহন করে,যেমন পাস্কো্র্ড প্যানেলে নিরাপদ ক্যামেরা।
    6. +
  6.  উইডগেট কিছু ওয়েব কাজকর্ম বাহির করার জন্য রিকুস্ট পাটাতে পারে।এই ক্ষেত্রে মেডিয়েটর প্রথমে আনলক হবে ।যদি লাভবান হয় তবে কাজ করবে।
    7. +
  7. কিছু উয়িডগেট এর কিছু ক্যানভাস লাগবে নিজেকে প্রকাশ করার জন্য।যখন রিকুস্ট গ্রহন করে তখন মেডিয়েতর উইডগেটের উপাদান প্রস্তুত করে থাকে।একটি ভবিষ্যৎ ফিচার হল প্রত্যেক উইডগেটকে নিজের ফ্রেমে বন্দি করা,যেন বর্তমান মেকানিজম থেকে উইডগেট বন্দি হতে পারে।
    8. +
diff --git "a/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/weinre_as_remote_debugger/index.html" "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/weinre_as_remote_debugger/index.html" new file mode 100644 index 0000000000..e7984b4f5c --- /dev/null +++ "b/files/bn/archive/b2g_os/platform/\340\246\227\340\246\276\340\246\257\340\246\274\340\246\276/weinre_as_remote_debugger/index.html" @@ -0,0 +1,72 @@ +--- +title: রিমোট ডিবাগার হিসেবে weinre +slug: Archive/B2G_OS/Platform/গায়া/Weinre_As_Remote_Debugger +tags: + - Didarul + - Firefox OS + - Guide + - NeedsReview +translation_of: Tools/Remote_Debugging +--- +

Weinre , Apache foundation এর একটি প্রকল্প যার পূর্ণ অর্থ দাঁড়ায় WEb INspector REmote.এটা তার নামের মতই অর্থ বহন করে-যা কিনা ফায়ারবাগ অথবা ওয়েব-ইন্সপেক্টর এর সাথেই থাকে কিন্তু একসাথে  তা ওয়েবপেইজ এর ডিবাগ ও রান করতে পারে। যদি আপনি কখনও এইধরনের ফায়ারফক্স টুলস অথবা ক্রম টুলস ব্যাবহার করে থাকেন তাহলে Weinre আপনার ব্যাবহারের দ্বিতীয় নির্বাচিত টুলস হওয়া উচিৎ।

+

 Weinre সেট করাঃ

+

যেহেতু weiner,Node.js এর উপরে রান করে তাই প্রথম পোর্ট কল হিসেবে Node.js. ইন্সটল করতে হবে। Node.js একটি বানডেল হিসেবে আসে এবং আমরা এখন এটাই ইন্সটল করতে ব্যাবহার করব। টার্মিনাল ওপেন করে নিম্নোক্ত কমান্ড লিখুনঃ

+

 npm -g install weinre

+
+

নোটঃ -g flag weiner কে global Node.js module হিসেবে ইন্সটল করে কমান্ডলাইন এর সুন্দর ব্যাবহার এর জন্য কিন্তু লিনাক্স আর ম্যাক  এ শুধু মাত্র তার মানে উপরের কমান্ডগুলো sudo কমান্ড হিসেবে ব্যাবহার করতে হবে ।

+

ইন্সটল কমপ্লিট হলে আমরা weiner ব্যাবহার করতে প্রস্তুত হব ।

+
+

Weinre স্টার্ট করাঃ 

+

weiner সার্ভার চালু করতে নিচের কমান্ডগুলো লিখুনঃ

+
$ weinre --boundHost 127.0.0.1 --httpPort 9090
+

এইখানে দুটি প্যারামিটার হোসট এবং পোর্ট সার্ভার কে নির্দেশ করে ।একবার সার্ভার স্টার্ট হওয়ার পর নিচের লাইনগুলো টার্মিনালে দেখাবেঃ

+
2013-01-28T10:42:40.498Z weinre: starting server at http://127.0.0.1:9090
+

ইহার সাথে ব্রাউজার ওপেন করেন (নোটঃWeinre এর UI আসলে ওয়েবকিট বেসড ব্রাউজার এর জন্য যা কিনা অন্য ব্রাউজার এ  কাজ করতে পারে,তাই ক্রম ইউজ করার পরামর্শ  দেওয়া হয় ) এবং http://127.0.0.1:9090. এ পয়েন্ট করুন। যখন পেইজ টি লোড হবে তখন ডিবাগ ক্লাইনট ইউসার ইন্টারফেস এ ক্লিক করুন । এই UI অপশন থেকে আপনারা কানেক্টেড ক্লাইনটস দেখতে পাবেন আসলে একটি যেটি কিনা ওয়েব ইন্সপেক্টর এর বর্তমান পর্যায়।আরও দেখতে পাবেন সার্ভার এর কিছু সাধারন properties এবং  আপনার টার্গেট।

+

Weinre টার্গেট সেট করাঃ 

+

Weiner এ টার্গেট গুলো হল আপনি জেই ওয়েবপেইজ অথবা এপ্লিকেশন ডিবাগ করত চান সেগুলো। এবং আপনার টার্গেটকে কানেক্ট করতে আপনার অ্যাপ এর ঈক্তি নির্দিষ্ট স্থানে একটি ওয়ান লাইনার অ্যাড করতে হবে ।উদাহরন স্বরূপঃ

+

আপনি যদি weiner  ইউস কর gaia তে ক্যালেন্ডার অ্যাপটি ডিবাগ করতে চান তাহলে আপনাকে প্রথমে যে কাজটি করতে হবে তা হলঃ

+

open giaia>apps>calender>index.html ওপেন করে clong body tag এর আগে নিম্নোক্ত লাইন লিখতে হবেঃ

+
<script src="http://127.0.0.1:9090/target/target-script-min.js#anonymous"></script>
+

সাধারনত আপনাকে এই কাজ গুলো করতে হবে আপনার টার্গেট সেট করার জন্য, কিন্তু ফায়ারফক্স ওএস এর জন্য আর একটি কাজ করতে হবে ।Gaia একধরনের Contact Security Policy ব্যাবহার করে এবং ওইটা অনুসারে স্ক্রিপ্ট কে নির্দেশ করা হয় যেন তা একবারের জন্যই same origin থেকে অ্যাপ লোড করতে পারে। তাই এখন যদি আমরা ক্যালেন্ডার লোড করতে চেষ্টা করি তাহলে উপরের স্ক্রিপ্টটি ব্লক হয়ে যাবে যতক্ষণ না আপনি কোন নির্দিষ্ট অরিজিন থেকে তা লোড না করবেন।

+

ইহা হতে পরিত্রানের জন্য আমাদের CSP টেম্পোরারিলি বন্ধ করতে হবে। এটা করার জন্য ওপেন করতে হবেঃ

+

 gaia -> build -> preferences.js এবং ২৪ নাম্বার লাইন এ নিচের লাইন যুক্ত করুনঃ

+
prefs.push(["security.csp.enable", false]);
+

Weinre এবং B2G Desktop দিয়ে ডিবাগিংঃ

+

আমাদের ডেস্কটপ ওপেন করার আগে Gaia প্রোফাইল তৈরি করতে  হবেঃ

+
DEBUG=1 make
+

যখন প্রোফাইল তৈরি হবে তখন B2G ডেস্কটপ ওপেন করুনঃ

+
+ 
/Applications/B2G.app/Contents/MacOS/b2g-bin -profile /Users/username/mozilla/projects/gaia/profile
+
+

যখন B2G ওপেন হবে তখন স্ক্রিন আনলক করে ক্যালেন্ডার অ্যাপ এ যেতে হবে। ক্যালেন্ডার অ্যাপ এর আইকন টি টেপ করে weiner debug client UI এ নজর রাখতে হবে । যখন অ্যাপ টি আপনাকে লঞ্চ করবে আপনি আপনার টার্গেট দেখতে পাবেন ।এরপর আমরা আমাদের কোড যাচাই শুরু করব তাই ইলিমেনট ট্যাব ওপেন করে html এবং CSS inspector ওপেন করুন।এরপর আপনি আপনার html ও CSS কোড গুলো এডিট করতে পারবেন ।আপনি চাইলে এখানে নতুনভাবে স্টাইল এড করতে পারেন element.stule block অথবা  amending existing rules এর দ্বারা । আপনি দেখবেন আপনি computed style এর জন্য অনুমতি পাবেন এবং তার সাথে সাথে কারেন্ট ইলিমেনট এর matrics পার্ট ও।

+

 

+

 Console দিয়ে কাজ করাঃ

+

আমাদের কাছে পরবর্তী ট্যাব এর নাম হল Console tab.এখানে আপনি সরাসরি জাভাস্ক্রিপ্ট এর কোড গুলো রান করতে পারেন আর চাইলে তা অ্যাপ এর পক্ষে বা বিরুদ্ধে রান করতে পারেন ।Console tab  কে প্রদর্শন করাতে হলে ডায়ালার এর কল লগ পোরশন  টার্গেট করতে হবে এবং ওখানকার রেকর্ড এর সাথে যোগাযোগ করতে হবে ।প্রথমে আপনাকে স্ক্রিপ্ট সোর্স কে ডায়ালার এ নিতে  হবে যা কিনা-

+

gaia > apps > communication > dailar>index.html

+

 

+

এটা এড করার পর প্রোফাইল তৈরি করে ডায়ালার লঞ্চ করতে হবে ।ডায়ালার ওপেন করে কল লগ আইকন এর উপর ক্লিক করতে হবে , বাম পাশে। এখন কল লগে কিছু ডামি ডাটা দিয়ে দেওয়া থাকে ।কিন্তু চলুন নিজেদের টা তৈরি করি।weiner এর Console tab এ ক্লিক করে নিম্নোক্ত লাইন গুলো লিখে এনটার চাপতে হবেঃ

+

RecentsDBManager.deleteAll();

+

আমাদের কোড গুলো কাজ করছে কিনা তা দেখতে হলে আমাদের কল লগ রিফ্রেশ করতে হবেঃ:

+
Recents.refresh();
+

এখন দেখা যাচ্ছে যে আমরা যা লিপিভুক্ত করলাম তা আমাদের স্টোরেজ এ IndexedDB তে এসেছে।

+

এবং তা কল লগ ভিউ তে দেখা যাচ্ছে ।আপনি যদি খেয়াল করেন তাহলে দেখে থাকবেন আর একটি অসাধারন ফিচার এড হয়েছে যার নাম অটো-কমপ্লিট যা আপনার ডেভেলপমেন্ট কে আরও গতি দান করবে।

+
// Dummy entry
+var recentCall = {
+    type: 'incoming-refused',
+    number: '555-6677',
+    date: new Date()
+};
+RecentsDBManager.add(recentCall);
+Recents.refresh();
+

এখন আপনারা দেখতে পাচ্ছেন যে স্টোরেজে এন্ট্রি লিপিবদ্ধ করা হয়েছে IndexedDB নাম দিয়ে এবং তা কল লগে ভিউ করা হয়েছে।এখানে খুব খেয়াল করে দেখলে দেখা যাবে যে এখানে একটি খুব উল্লেখযোগ্য অপশন চালু হয়েছে  অটো - কমপ্লিট নামের যা আপনার পরবর্তী ডেভেলপমেন্ট এর গতি বৃদ্ধি করবে।

+

 ডিভাইসে ডিবাগিং করাঃ 

+

উপরে কিভাবে weiner ও B2G ব্যাবহার করতে হয় তা আলোকপাত করা হয়েছে।কিন্তু weiner  ব্যাবহার করে কোড যাচাই আর ডিবাগ খোজার বিষয়টি একই শুধুমাত্র আপনার বেবরিত আই.পি এড্রেস ছাড়া ।যখন আপনি আপনার ডিভাইস এ ডিবাগ করতে যাবেন, আপনার প্রথমে আপনার হোসট কম্পিউটার এর আই.পি এড্রেস জানতে হবে।তখন আপনি weiner স্টার্ট করতে পারেন এই আই.পি কে bounhost হিসেবে, তাছাড়া  আপনার টার্গেট ডকুমেন্ট এর স্ক্রিপ্ট শহ এটা কে আই.পি হিসেবেও ব্যাবহার করতে পারবেন।

+

ম্যাক আর লিনাক্সে  এড্রেস টি পাবেন ifconfig ব্যাবহার করে আর উইন্ডোজ এ হল

+

ipconfig.

+

আপনি যখন নতুন IP পাবেন তখন চলমান weiner বন্ধ করে দিন আর নিচের কাজটি করুনঃ

+
weinre --boundHost 192.168.1.1 --httpPort 9090:
+

এরপর আপনার টার্গেট ডকুমেন্ট যুক্ত করুনঃ

+
<script src="http://192.168.1.1:9090/target/target-script-min.js#anonymous"></script>
+

আপনার Gaia প্রোফাইল বানান আর ডিভাইসে যুক্ত করুন নিম্নোক্ত পদ্ধতিতঃ:

+
make install-gaia
+

আপনার টার্গেট অ্যাপ্লিকেশন চালু করুন আর হয়ে গেল আপনার কাজ!

diff --git a/files/bn/archive/b2g_os/porting/index.html b/files/bn/archive/b2g_os/porting/index.html new file mode 100644 index 0000000000..3346dea153 --- /dev/null +++ b/files/bn/archive/b2g_os/porting/index.html @@ -0,0 +1,77 @@ +--- +title: বুট টু গিকো পোর্ট করা +slug: Archive/B2G_OS/Porting +tags: + - B2G + - Firefox OS + - Mobile +translation_of: Archive/B2G_OS/Porting_B2G_OS/basics +--- +

বুট টু গিকো (ফায়ারফক্স ওএস) একটি গিকো ভিত্তিক ইউজার ইন্টারফেসের নিচে এন্ড্রয়েড হতে তৈরি একটি কার্নেল ব্যবহার করে। এই আর্টিকেলে নতুন ডিভাইসে অপারেটিং সিস্টেমটি পোর্ট করার পদ্ধতির ওপর আলোকপাত করা হয়েছে।

+

এই গাইডটি ধরে নিচ্ছে আপনি এমন একটি নতুন ডিভাইসে পোর্ট করছেন যাতে ইতোমধ্যে এন্ড্রয়েড চলছে, আপনি যদি অন্য একটি ডিভাইসে পোর্ট করে থাকেন তবে পদ্ধতিটি আরেকটু বিস্তৃত হবে।

+

বিল্ড সিস্টেম সেটআপ করা

+

প্রথম ধাপ হল আপনার বিল্ড সিস্টেম কনফিগার করা; B2G build prerequisites এর গাইডটি অনুসরণ করতে পারেন।

+

B2G রেপোজিটরি ক্লোন করা

+

এর পরের ধাপ হল B2G রেপোজিটরী ক্লোন করা।

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

আপনার আসল এন্ড্রয়েড সিস্টেমের লোকাল ব্যাকআপ রাখা

+

পরবর্তীতে, এটি নিয়ে খেলাধুলা করার পূর্বে আপনাকে আপনার এন্ড্রয়েড ডিভাইসের ব্যাকআপ নেয়া উচিৎ। তাছাড়া কয়েকটি জিনিস বিল্ড এবং ইন্সটল প্রক্রিয়ায়ও লাগবে।

+
mkdir my_device_backup
+cd my_device_backup
+adb pull /system system
+

config.sh এ নতুন ডিভাইস যুক্ত করা

+

পরবর্তী ধাপ হল config.sh ফাইলে একটি নতুন ডিভাইস যুক্ত করা; আপনি বর্তমানগুলোকে টেমপ্লেট হিসেবে ব্যবহার করতে পারেন। এটি মূলত বিল্ডের জন্য সঠিক ফাইল সংগ্রহ করতে সাহায্য করবে।

+

নতুন ডিভাইসের জন্য ম্যানিফেস্ট তৈরি করা

+

এখন আপনাকে দরকার নতুন  মেনিফেস্ট ডিভাইস ফাইলের জন্য প্রয়োজনীয় রেপস ; এই মেনিফেস্ট ফাইল্কে বলা হয়ে থাকে default.xml।সুপারিশকৃত b2g-manifest ফাইল একটি টেম্পলেট গিথাব।প্রত্যেক ডিভাইসের নিজস্ব শাখা আছে;আপনি galaxy-s2 ব্যবহার করতে পারেন রেফারেন্স হিসেবে ।

+

নতুন ডিভাইসের জন্য কনফিগারেশন ট্রি তৈরি করা

+

নতুন ডিভাইসের জন্য নতুন কন ফিগারেশন তৈরি করুন।এটা ডিভাইসে device/<manufacturer>/<device_id>. তে থাকা উচিত।এটা আরো সংযুক্ত করবে যে ,কমপক্ষেঃ

+ +

এখানে যে প্রধান বিষয় টি পার্থক্য তৈরি করেছে তা হল একটি ডিভাইস থেকে অন্য ডিভাইসে নেয়া । বিশেষভাবে, BoardConfig.mk এবংextract-files.sh সুনির্দিষ্টভাবে পার্থক্য করা যায়।এই অংশের দরকার প্রচুর পরিমানে হ্যাকিং,টেস্টিং,এবং ডিবাগিং ফিগারটি সঠিকভাবে বের করে আনতে বাইনারি ব্লব।

+
+

নোটঃযদি আপনি একটি  বিদ্যমান  রেফারেন্স  CyanogenMod  এর জন্য ডিভাইস রাখেন,এই  তথ্য প্রক্রিয়া পোর্টিং করার জন্য গতি এনে দিবে।  XDA Forum হল আরেকটি ভাল জায়গা আলোচনা এবং সম্পদ চেক করার জন্য ।

+

পুনরায় গঠন boot.img

+
+

একদা হয়ে গেলে সব কিছু ,আপনাকে  boot image পুনরায় গঠন করতে হবে এটা সাধারনত  kernel এর নিজের প্রয়োজন পরে না ,কিন্তু init.rc তে পরিবর্তন আনতে তুলে আনা হয়ে থাকে।

+

init.rc তে পরিবর্তন

+

init.rc যা আপনি দেখছেন তা B2G দ্বারা প্রদান করা নয়;এর পরিবর্তে,আপনাকে ডিভাইস থেকে এটি নেয়া দরকার ।

+

প্রধান যে জিনিস আপনাকে মোডিফাই করা দরকারঃ

+

init.b2g.rc ইম্পোর্ট

+

init.b2g.rc ইম্পোর্টের পরবর্তী লাইন গুলো যোগ করুনঃ:

+
on early-init
+    start ueventd
+    import /init.b2g.rc
+

ফিক্স পারমিশন

+

files /system/b2g/b2g, /system/b2g/updater, /system/b2g/plugin-container ফাইলের অনুমতি ঠিক করুন; এটা করা উচিত হবে যখন লাইন গুলো ফাইল সিস্টেম এর লেখ/পড়া র ক্ষেত্রে লাইঙ্গুলো মাউন্টকরে থাকেঃ

+
chmod 0755 /system/b2g/b2g
+chmod 0755 /system/b2g/updater
+chmod 0755 /system/b2g/plugin-container
+

নতুন ডিভাইস init.rc ব্যবহারের পরিবর্তে init.rc মোডিফাইং এর মাধ্যমে বিল্ড সিস্টেম প্রদান করে থাকে ;যদি তাই হয়ে থাকে তবে মনে রাখতে হবে যে সেট করা হয়  TARGET_PROVIDES_INIT_RC in BoardConfig.mk.

+

Prebuilt kernel বনাম সোর্স থেকে the kernel গঠন

+

আপনি একটি প্রিবিল্ট kernel ব্যবহার করতে পারেন,অথবা আপনি সোর্স থেকে kernel গঠন করতে পারেন।সোর্স থেকে kernel গঠন করতে ,যোগ করুন AndroidKernel.mk এবং kernel যা ডিভাইস কনফিগারেশনে কনফিগ করে।

+

maguro হল পুরানো গঠন সিস্টেমের একটি উদাহরণ যা সোর্স থেকে kernel গঠন করে ।

+

flash.sh তে নতুন ডিভাইস যোগ করুন

+

flash.sh তে নতুন ডিভাইস যোগকরুন; নতুন ডিভাইস ফ্লাস ব্যবহার  করার জন্য কি দরকার হবে তা কিভাবে কি করতে হবে তা বিশেষ ভাবে জানা যায় ।

+

কনফিগার,গঠন,এবং ফ্ল্যাশ নতুন ডিভাইস

+

এখন আপনি গঠনের জন্য এবং নতুন ডিভাইসের ফ্ল্যাশিং এর জন্য চেষ্টা করুনঃ

+
ANDROIDFS_DIR=my_device_backup ./config.sh <device_id> default.xml
+./build.sh
+./flash.sh
+

টেস্ট এবং ডিবাগ

+

আমাদের কিছু বিস্তারিত যোগ করা দরকার এখানে;সত্যিকার অর্থে ,এটা সম্পুর্ন অনুচ্ছেদে কিছু সাহায্য করতে পারে।

+

FAQ

+

ফোর্থকামিং

+

আরো দেখুন

+ diff --git a/files/bn/archive/b2g_os/preparing_for_your_first_b2g_build/index.html b/files/bn/archive/b2g_os/preparing_for_your_first_b2g_build/index.html new file mode 100644 index 0000000000..6a003d56ca --- /dev/null +++ b/files/bn/archive/b2g_os/preparing_for_your_first_b2g_build/index.html @@ -0,0 +1,136 @@ +--- +title: আপনার প্রথম ফায়ারফক্স ওএস বিল্ডের জন্য প্রস্তুত হওয়া +slug: Archive/B2G_OS/Preparing_for_your_first_B2G_build +tags: + - B2G + - Build documentation + - Firefox OS +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.

+
+

B2G রিপোজিটোরি ক্লোন

+

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

আপনার ডিভাইসের জন্য B2G কনফিগার করা

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

+

মোবাইল ডিভাইসের জন্য B2G বিল্ড কনফিগার করা

+

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

+

একটি সিস্টেম ব্যাকাপ ব্যবহার করে একটি বিল্ড কনফিগার করা

+

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.

+

একটি ইমুলেটরের জন্য B2G বিল্ড কনফিগার করা

+

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

কাস্টম 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.

+

ব্রাঞ্চ তৈরি করা

+

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.

+

আপনার B2G নতুন মেশিনে কপি করা

+

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.

+

আপনার B2G আপডেট করা

+

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/bn/archive/b2g_os/quickstart/index.html b/files/bn/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..ebe1f7c220 --- /dev/null +++ b/files/bn/archive/b2g_os/quickstart/index.html @@ -0,0 +1,49 @@ +--- +title: Build +slug: Archive/B2G_OS/Quickstart +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +
+

Quickstart information on coding open web apps.

+
+
+
+ Introduction to open web apps
+
+ What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.
+
+ Your first app
+
+ This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.
+
+ Introduction to Firefox OS
+
+ An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.
+
+ Introduction to manifests
+
+ An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.
+
+ App development for web developers
+
+ If you're a web developer, how do open web apps differ from what you're used to? This article explains all.
+
+ App development for mobile developers
+
+ If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.
+
+ Developing app functionality
+
+ This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.
+
+ Payments
+
+ How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.
+
+ App tools
+
+ Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.
+
diff --git a/files/bn/archive/b2g_os/quickstart/your_first_app/index.html b/files/bn/archive/b2g_os/quickstart/your_first_app/index.html new file mode 100644 index 0000000000..12f1bdc260 --- /dev/null +++ b/files/bn/archive/b2g_os/quickstart/your_first_app/index.html @@ -0,0 +1,212 @@ +--- +title: আপনার প্রথম অ্যাপ +slug: Archive/B2G_OS/Quickstart/Your_first_app +tags: + - Apps + - Beginner + - Guide + - অ্যাপ + - গাইড + - নতুনদের জন্য +translation_of: Archive/B2G_OS/Quickstart/Your_first_app +--- +
+
+

ডেভেলপাররা এত দিন ধরে যা চেয়েছিলেনঃ শুধুমাত্র HTML, CSS আর জাভাস্ক্রিপ্ট দিয়ে অ্যাপ তৈরি করতে যা সব প্ল্যাটফর্মে চলবে - ওপেন ওয়েব অ্যাপ ঠিক তাই। এসব অ্যাপ ডিভাইসে ইন্সটল করা যায়। ফায়ারফক্স ওএস হচ্ছে প্রথম প্ল্যাটফর্ম ওপেন ওয়েব অ্যাপ এর জন্য! এই গাইড লেখা হয়েছে যাতে আপনি খুব অল্প সময়ের মধ্যেই অ্যাপ সম্পর্কে প্রাথমিক আইডিয়া নিয়ে ফাটাফাটি একটা অ্যাপ তৈরি করা শুরু করে দিতে পারেন!

+
+

গাইডটি ভালভাবে বুঝার জন্য আপনি দ্রুত অ্যাপ বানানোর টেম্পলেট ডাউনলোড করে নিতে পারেন। এর ভেতর কি আছে সেটা জানার জন্য অ্যাপ টেম্পলেট গাইডটি পড়ুন।

+

অ্যাপ স্ট্রাকচার

+

প্যাকেজড বনাম হোস্ট-করা অ্যাপ

+

দুই ধরণের ওপেন ওয়েব অ্যাপ আছেঃ প্যাকেজড আর হোস্ট-করা। প্যাকেজড অ্যাপ হচ্ছে zip ফাইল যার ভেতর অ্যাপ এর সব ফাইলঃ HTML, CSS, JavaScript, ছবি, মেনিফেস্ট, ইত্যাদি দিয়ে দেওয়া থাকে। আর হোস্ট-করা এপ গুলো কোন একটা ডোমেইন এ সার্ভারে হোস্ট করা থাকে, স্ট্যান্ডার্ড ওয়েবসাইট গুলোর মতই। উভয় ধরণের অ্যাপ এরই বৈধ মেনিফেস্ট ফাইল লাগে। ফায়ারফক্স মার্কেটপ্লেসে যদি অ্যাপ জমা দিতে চান, তাহলে হয় আপনাকে অ্যাপটি জিপ ফাইল হিসেবে আপলোড করতে হবে অথবা কোন সার্ভারে হোস্ট-করে তার লিঙ্ক দিতে হবে।

+
+

+
+

Treehouse এর সাথে যৌথ উদ্যোগে বানানো হয়েছেঃ Treehouse এর ব্যাপারে জানতে দেখুন!

+
+
+

এই গাইডের উদ্দেশ্য হল আপনার কম্পিউটারের localhost এড্রেসে একটি হোস্ট-করা অ্যাপ তৈরি করা। যখন আপনার মনে হবে আপনার অ্যাপ ফায়ারফক্স মার্কেটপ্লেসে জমা দেওয়ার জন্য রেডি, আপনার সিদ্ধান্ত নিতে হবে আপনি কি প্যাকেজড অ্যাপ হিসেবে দিবেন নাকি কোন সার্ভারে হোস্ট করে দেবেন।

+

অ্যাপ মেনিফেস্ট

+

প্রত্যেক ফায়ারফক্স অ্যাপ এর রুট ফোল্ডারে একটি manifest.webapp ফাইল থাকা লাগে। এই ফাইলের কাজ হল অ্যাপ সম্পর্কে গুরুত্বপূর্ণ তথ্য, যেমন ভার্সন, নাম, বর্ণনা, আইকন কোথায় আছে, লোকালাইজেশনের তথ্য, কোন কোন ডোমেইন থেকে অ্যাপটি ইন্সটল করা যাবে এবং আরো অনেক কিছু সরবরাহ করা। তবে শুধুমাত্র নাম আর বর্ণনাই হল আবশ্যকীয়, বাকিগুলো ঐচ্ছিক। অ্যাপ টেম্পলেটের সাথে আসা খুবই সহজ মেনিফেস্টটি নিচের মত দেখতেঃ

+ 
{
+  "version": "0.1",
+  "name": "Open Web App",
+  "description": "Your new awesome Open Web App",
+  "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": "Your Name",
+    "url": "http://yourawesomeapp.com"
+  },
+  "locales": {
+    "es": {
+      "description": "Su nueva aplicación impresionante Open Web",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    },
+    "it": {
+      "description": "La tua nuova fantastica Open Web App",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    }
+  },
+  "default_locale": "en"
+}
+
+

+
+

Treehouse এর সাথে যৌথভাবে বানানো হয়েছেঃ দেখুন!

+
+
+

 

+

এরকম প্রাথমিক একটা মেনিফেস্ট-ই দরকার অ্যাপ শুরু করার জন্য। মেনিফেস্ট নিয়ে আরো জানতে পড়ুন অ্যাপ মেনিফেস্ট।

+

অ্যাপ লে-আউট এবং ডিজাইন

+

বিভিন্ন ডিভাইসে আজকাল অনেক বেশি আর বিভিন্ন রকম রেজ্যুলেশনের ব্যবহার দেখা যায়। তাই রেস্পন্সিভ ডিজাইনের দিকেই সবাই আজকাল ঝুঁকে পড়ছেন। মোবাইল প্ল্যাটফর্ম যেমন ফায়ারফক্স ওএস যদি আপনার আসল টার্গেট হয়, এরপরেও মানুষজন অন্য ডিভাইস থেকেও আপনার অ্যাপ যাতে ব্যবহার করতে পারে, সেজন্য রেস্পন্সিভ ডিজাইন মেনে চলা উচিত। CSS media queries ব্যবহার করে নিচের CSS উদাহরণের মত করে বিভিন্ন ডিভাইসে আপনার অ্যাপ যাতে সুন্দরমত দেখায় তা নিশ্চিত করতে পারেনঃ

+ 
/* 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 */
+}
+

রেস্পন্সিভ ডিজাইন আর মোবাইলের অ্যাপ লেখার জন্য অনেক জাভাস্ক্রিপ্ট আর সিএসএস ফ্রেমওয়ার্ক আছে (Bootstrap, ইত্যাদি।) আপনার অ্যাপ আর ডেভেলপমেন্ট-স্টাইলের সাথে মিলে যায় এমন ফ্রেমওয়ার্কগুলোই ব্যবহার করুন।

+

ওয়েব API সমূহ

+

যেমন নতুন নতুন ডিভাইস বের হচ্ছে, জাভাস্ক্রিপ্ট API ও তার সাথে তাল মিলিয়েই তৈরি হচ্ছে। মজিলা WebAPI এর মাধ্যমে ডজন ডজন স্ট্যান্ডার্ড মোবাইল ফিচার জাভাস্ক্রিপ্ট API এর মাধ্যমে আমাদের হাতে এনে দিয়েছে। WebAPI পাতায় কোন কোন ডিভাইস সমর্থিত এবং তাদের স্ট্যাটাস দেখতে পাবেন। জাভাস্ক্রিপ্টের মাধ্যেম ডিভাইসে কোন একটা ফিচার আছে কিনা চেক করে নেওয়া উচিত, নিচের উদাহরণে দেখানো হয়েছে কিভাবে এটা করা যায়ঃ

+ 
// If this device supports the vibrate API...
+if('vibrate' in navigator) {
+    // ... vibrate for a second
+    navigator.vibrate(1000);
+}
+

ডিভাইসের ব্যাটারির অবস্থা'র ওপর নির্ভর করে কোন একটা <div> এর স্টাইল কিভাবে বদলানো যায়, নিচের উদাহরণে তা দেখানো হয়েছেঃ

+ 
// 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' : '';
+  }
+})();
+

ওপরের কোডেঃ যখন আপনি নিশ্চিত যে ব্যাটারি API সমর্থিত, আপনি chargingchange এবং levelchange ইভেন্টের জন্য লিসেনার যোগ করতে পারবেন HTML এলিমেন্টটির ডিসপ্লে পরিবর্তন করার জন্য। দ্রুত-শুরু করার টেম্পলেটে নিচের মত করে যোগ করে দেখুন তো কোড কাজ করে কিনা।

+

মাঝেমধ্যেই WebAPI পাতাটি পড়ুন যাতে বিভিন্ন ডিভাইসে বিভিন্ন API এর সমর্থন সম্পর্কে আপনি আপডেটেড থাকেন।

+

API ফাংশনালিটি ইন্সটল করা

+

আমাদের template এ, আমরা একটা install button যোগ করেছি যাতে ক্লিক করে আপনি আপনার আপ্লিকেশনটি ওয়েবপেজ হিসেবে দেখতে পারবেন। , আপ্লিকেশন হিসেবে সাইটটি FirefoxOS এ দিতে হলে Button টির মার্কাআপ তেমন কঠিন নয়।

+ 
<button id="install-btn">Install app</button>
+

 Install API ব্যাবহার করে এই বাটনের ফাংশনটি যোগ করা হয়েছে।  (দেখুন 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 existence 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 dependent 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 allows you to install installable web apps 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 you install the simulator, it is accessible from the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can 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 (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can 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/bn/archive/b2g_os/quickstart/\340\246\223\340\246\252\340\247\207\340\246\250_\340\246\223\340\246\257\340\246\274\340\247\207\340\246\254_\340\246\205\340\247\215\340\246\257\340\246\276\340\246\252_\340\246\252\340\246\260\340\246\277\340\246\232\340\246\277\340\246\244\340\246\277/index.html" "b/files/bn/archive/b2g_os/quickstart/\340\246\223\340\246\252\340\247\207\340\246\250_\340\246\223\340\246\257\340\246\274\340\247\207\340\246\254_\340\246\205\340\247\215\340\246\257\340\246\276\340\246\252_\340\246\252\340\246\260\340\246\277\340\246\232\340\246\277\340\246\244\340\246\277/index.html" new file mode 100644 index 0000000000..97d0b6bf84 --- /dev/null +++ "b/files/bn/archive/b2g_os/quickstart/\340\246\223\340\246\252\340\247\207\340\246\250_\340\246\223\340\246\257\340\246\274\340\247\207\340\246\254_\340\246\205\340\247\215\340\246\257\340\246\276\340\246\252_\340\246\252\340\246\260\340\246\277\340\246\232\340\246\277\340\246\244\340\246\277/index.html" @@ -0,0 +1,55 @@ +--- +title: ওপেন ওয়েব অ্যাপ পরিচিতি +slug: Archive/B2G_OS/Quickstart/ওপেন_ওয়েব_অ্যাপ_পরিচিতি +tags: + - Apps + - NeedsReview + - অ্যাপ +translation_of: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps +--- +

Multi devices

+
+

যারা ওপেন ওয়েব অ্যাপ সম্পর্কে জানতে আগ্রহী তাদের জন্য এই প্রবন্ধটি একটি ভাল প্রারম্ভিকা হিসেবে সাজানো হয়েছে। আপনি একজন ডেভেলপার অথবা একজন প্রজেক্ট ম্যানেজার অথবা অ্যাপ তৈরি ও সরবরাহের যেকোন অংশের সাথে আপনি জড়িত - যাই হোক না কেন এই আর্টিকেল আপনার জন্যই। এখানে আমরা আপনাকে ওপেন ওয়েব অ্যাপ সম্পর্কে অল্পস্বল্প জানাবো। এছাড়াও আপনি জানবেন কেন ওয়েব অ্যাপ - এর পেছনে আমাদের দর্শনটা কি!

+
+

মুক্ত (ওপেন) ওয়েব অ্যাপ এবং অন্যান্য স্ট্যান্ডার্ড ওয়েবসাইট অথবা ওয়েবপেজ এর মধ্যে তেমন কোন পার্থক্য নেই । স্ট্যান্ডার্ড, মুক্ত ওয়েব টেকনোলজি যেমন - এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট লিখেই এদের তৈরি করা হয়। ওয়েব ব্রাউজার দিয়েই আপনি অ্যাপগুলো ব্যবহার করবেন। ওয়েবপেজ এবং ওয়েব অ্যাপ এর মধ্যে মূল পার্থক্য হল ওয়েব অ্যাপ গুলোর ইন্সটল হওয়ার  এবং অফলাইনে কাজ করার ক্ষমতা রয়েছে। উন্নত API যেগুলো ডিভাইসের বিভিন্ন ফিচার যেমন ক্যামেরা, এড্রেস বুক এবং আরও অনেক কিছুর সাথে যোগাযোগ করতে পারে, ওয়েব অ্যাপ সেগুলো নিয়ে কাজ করতে পারে। আর চেষ্টা করা হয়েছে যেন যথাসম্ভব, মুক্ত প্রযুক্তি ব্যবহার করা যায়। যদি বিভিন্ন প্লাটফর্ম এ ওয়েব অ্যাপ সাপোর্ট করাতে যেয়ে প্রযুক্তিগত পার্থক্য পাওয়া যায়, তাহলে চেষ্টা করতে হবে যেন যত বেশি সম্ভব প্ল্যাটফর্মে এদের সাপোর্ট দেওয়া যায়। আপনি যে ফিচার চাচ্ছেন সেটি কোন একটি প্ল্যাটফর্মে আছে কিনা তা জেনে নেওয়া, বিভিন্ন প্ল্যাটফর্মের জন্য উপযুক্ত কোড ব্যবহার করা ইত্যাদির মাধ্যমে বিভিন্ন প্ল্যাটফর্মে যাতে আপনার এপ্লিকেশন চলতে পারে সেটি নিশ্চিত করতে পারবেন।

+

ওপেন ওয়েব অ্যাপের সুবিধাসমূহ 

+

আসুন ওপেন ওয়েব অ্যাপের সুবিধা সমূহ আরও একটু বিস্তারিত ভাবে দেখি:

+ +

নিচের ভিডিওতে দেখুন ওপেন ওয়েব অ্যাপ এর সুবিধা কী, আর ফায়ারফক্স ওএস প্ল্যাটফর্মে কিভাবে ডেভেলপ করা যায়ঃ

+

+

ওয়েব-ই প্ল্যাটফর্ম

+

যখন ওপেন ওয়েব অ্যাপ কোন প্ল্যাটফর্মে (যেমন ফায়ারফক্স ওএস) এ ইন্সটল করা হয়, তখন এটি শুধু একটি সাধারণ বুকমার্কের থেকেও বেশিকিছু। এটা সিস্টেমের-ই একটা অবিচ্ছেদ্য অংশ হয়ে যায়। ওপেন ওয়েব অ্যাপ এই বিশাল সুযোগ নিয়েই এসেছে। আমাদের এই সুযোগ হাতছাড়া করা উচিত নয়, তা নাহলে ওয়েব যেমন একসময় এলোমেলো অবস্থায় ছিল, সেযুগে ফেরত যেতে পারে। এটা পরিষ্কার যে ওপেন ওয়েব অ্যাপ (সংক্ষেপে OWA) একটি স্ট্যান্ডার্ড, আর ওয়েবের অংশ হিসেবেই আমরা দেখি। সফল হলে একসময় ওপেন ওয়েব অ্যাপ সব ব্রাউজারেই কাজ করবে, যেমনটা কাজ করবে সব অপারেটিং সিস্টেম আর ডিভাইসে।

+

মজিলা'তে আমরা দিনরাত কাজ করছি এই  অ্যাপ প্ল্যাটফর্ম তৈরি করতে - যেটা পুরোপুরিভাবে ওপেন ওয়েবের ওপর দাঁড়িয়ে আছে। একে "মজিলা প্ল্যাটফর্ম" বা "ফায়ারফক্স প্ল্যাটফর্ম" হিসেবে তৈরি করার আমাদের কোন উদ্দেশ্য নেই। এর প্ল্যাটফর্ম হচ্ছে ওয়েব। আমরা এক গাদা মুক্ত APIs তৈরি করছি আর এগুলো কার্যকরী করছি, যাতে পোর্টেবল অ্যাপ ওয়েবের ওপর ভিত্তি করে চলতে পারে হার্ডওয়ার প্রস্তুতকারকের ওপর নির্ভরশীল হওয়া ছাড়াই।  অন্যান্য গ্রুপ যেমন ফেসবুক আর গুগল ক্রম ও কাজ করছে ওয়েব-ভিত্তিক অ্যাপ প্লাটফর্মের ওপর। ফেসবুক অ্যাপ ফেসবুকের সাথে ভালভাবেই যুক্ত আর ক্রোম অ্যাপ ডিজাইন করা হয় এমনভাবে যাতে সেটা ক্রোম ওএস আর গুগল সার্ভারের ওপর নির্ভর করে চলে। তবে ওপেন ওয়েব অ্যাপ এর সাথে সবচেয়ে বেশি মিল আছে ক্রোম অ্যাপ এরই। আমরা গুগল ক্রোম টিমের সাথে মিলে কাজ করি অ্যাপ স্ট্যান্ডার্ডের উত্তরোত্তর উন্নতির জন্য আর আমাদের অনেক দর্শন-ও মিলে যায়। সব ওয়েব-ভিত্তিক অ্যাপ প্লয়াটফর্ম মিলে গিয়ে একটি প্ল্যাটফর্ম হয়ে যাওয়ার বেশ ভাল সম্ভাবনা আর সুযোগ রয়েছে, তাই আমরা সব ভেন্ডরদের আমন্ত্রণ জানাই সঠিক ওপেন ওয়েব অ্যাপ APIs গুলো তৈরি করতে আমাদের সাহায্য করার জন্য।

+

যদিও এখন ওপেন ওয়েব অ্যাপ ব্যবহার করতে আপনার অবশ্যই মজিলা ফায়ারফক্স ভিত্তিক কোন ইঞ্জিন ("ওয়েব রানটাইম") ব্যবহার করতে হবে, আমরা আশা করি ভবিষ্যতে আর এই বাধা থাকবে না। ওপেন ওয়েব অ্যাপ প্রজেক্টের অনেক অংশ নিয়ে এখনো কাজ চলছে তাই সব ব্রাউজারে একই সাথে এদের প্রয়োগ করা সম্বব নয়। তাই এর অনেক অংশ স্ট্যান্ডার্ড হয়ে গেছে সত্য, কিন্তু অনেক কিছুই আছে যা এখনো স্ট্যান্ডার্ড না। আশা করা যায়, সব ব্রাউজারেই ওপেন ওয়েব অ্যাপ স্ট্যান্ডার্ড হিসেবে পুরোপুরি সমর্থিত হবে।

+

সেজন্য, যখন আপনি ওপেন ওয়েব অ্যাপ নিয়ে MDN এর বিভিন্ন আর্টিকেল পড়ছেন, মনে রাখবেন বেশিরভাগ তথ্যই এখন ফায়ারফক্সের জন্য প্রযোজ্য হলেও আশা করা যায় ভবিষ্যতে আপনার ওপেন ওয়েব অ্যাপ সব ব্রাউজারেই সমর্থিত হবে।

+

ওয়েব স্ট্যান্ডার্ডসমূহ

+

ও. ডব্লিও. এ প্রযুক্তি শুধুমাত্র একটি টুকরো নয়, এটি একটি ক্লাবের মত যা বিভিন্ন প্রযুক্তিকে সংযোগ করে এবং তাদের কিছু খুবই নতুন। এই মুহূর্তে, parts of OWA are standardized (HTML5, CSS, JavaScript, IndexedDB, etc.). Other parts are not yet standardized and the Mozilla implementation is thus specific to Firefox or to some other Mozilla technology. কিন্তু মোজিলার মিশন হলো সবার সাথে শেয়ার করা এবং সবাইকে ক্ষমতাবান করা, এই পরিস্থিতি শুধুমাত্র সাময়িক। এই জন্যে ও. ডব্লিও. এ ডকুমেন্টে আমরা পরিষ্কারভাবে ও. ডব্লিও. এ অংশ চিহ্নিত করার চেষ্টা করব যা এখনো প্রমিত হয় নি।

+

দয়া করে নোট করুন যে কিছু ও. ডব্লিও. এ সংক্রান্ত প্রস্তাব এবং  potential standards যা মোজিলা দ্বারা ব্যবহার করা হয় না থাকতে পারে।

+

Intended eventual standards

+

So here are the parts not standardized yet across the different Web platforms and that still are Firefox-only for the moment:

+ +

মার্কেটপ্লেস

+

কিনুন একবার, চালান সবখানে

+

From the ground up Mozilla has been building an apps system that lets users buy an app once and run it on all of their HTML5 devices. Very soon Mozilla will launch the first Firefox OS phone but that will be just one device on which to run your apps. When you purchase an app through the Firefox Marketplace, the system installs a receipt on your device. The receipt is a JSON Web Token with metadata that links to the Marketplace’s public key and its verification service URL. When an app starts up it can verify the receipt but the receipt on the device is not tied to the Firefox Marketplace. The receipt is just a cryptographically verifiable proof of purchase. Anyone can sell open Web apps if they follow the receipt specs. When you buy an app, it is intended to be portable across any device that supports the Open Web Apps system.

+

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 the future the Open Web Apps system will support syncing your installed apps across devices. Since receipts are portable you could just sync them yourself if you wanted to. In case it’s not obvious, you can always run a free open Web app in any browser because it is no different than a website. It might, however, use new mobile specific web APIs which are not implemented on all platforms.

+

The video below provides a useful overview of the advantages of open marketplaces and an open web approach to app discovery:

+

+

WebPayment API

+

Commerce For Apps

+

Part of the success of mobile app platforms like iOS and Android is that they make it very easy to try out new business models through mobile payments. Those models are still evolving but commerce is no doubt something that, at the moment, is awkward on the desktop Web and more natural on mobile. Specifically, it’s very convenient to charge something to your phone bill when you’re already accessing it from your phone anyway. With the launch of Firefox OS, the apps ecosystem will support app purchases and in-app payments through the WebPayment API. Supporting commerce is crucial for the growth of an apps platform. The use of the proposed payment API is completely optional. Mozilla won’t prevent any app from using its own in-app payment system.

+
+  
+

 

diff --git a/files/bn/archive/b2g_os/releases/1.0.1/index.html b/files/bn/archive/b2g_os/releases/1.0.1/index.html new file mode 100644 index 0000000000..48c3ee265b --- /dev/null +++ b/files/bn/archive/b2g_os/releases/1.0.1/index.html @@ -0,0 +1,105 @@ +--- +title: Firefox OS 1.0.1 for developers +slug: Archive/B2G_OS/Releases/1.0.1 +tags: + - NeedsReview +translation_of: Archive/B2G_OS/Releases/1.0.1 +--- +

ডেভেলপারদের জন্য ফায়ারফক্স ওএস ১.০.১

+

ফায়ারফক্স ওএস ১.০.১ সর্বপ্রথম ২রা জুলাই ২০১৩ খ্রিঃ এর পার্টনারদের জন্য বের করা হয় এবং এটিই ছিল প্রথম ফায়ারফক্স ওএস। এর গেকো কম্পোনেন্ট হচ্ছে ফায়ারফক্স ১৮ (এখানে দেখুনঃ Firefox 18 for developers), যা ১৮ই জানুয়ারী ২০১৩ তারিখে উন্মুক্ত হয়েছিল। পূর্ববর্তী আপডেট গুলো দেখতে চাইলে Firefox ডেস্কটপ এর পূর্ববর্তী নোট গুলো পড়ুন, যা Firefox 17 for developers থেকে শুরু।

+
+

ফায়ারফক্স ওএস ১.০.১ ডকুমেন্ট এ সাহায্য করতে চান? B2G সম্পর্কিত bugs যেগুলো লেখা দরকার সেগুলো দেখুন।

+
+

 

+

এইচটিএমএল (HTML)

+

ফায়ারফক্স ওএস সম্পর্কিতঃ

+ +

সাধারন গেকোঃ

+ +

সিএসএস (CSS)

+

সাধারন গেকোঃ

+ +

জাভাস্ক্রিপ্ট (JavaScript)

+

ফায়ারফক্স ওএস সম্পর্কিতঃ

+ +

সাধারন গেকোঃ

+ +

ডিওএম/এপিআই (DOM/API)

+

ফায়ারফক্স ওএস সম্পর্কিতঃ

+ +

সাধারন গেকোঃ

+ +

নেটওয়ার্ক

+

সাধারন গেকোঃ

+ +

১.০.১ এর বিশেষ বৈশিষ্ট্যাবলিঃ

+ +

 আরো দেখুনঃ

+ diff --git a/files/bn/archive/b2g_os/releases/1.1/index.html b/files/bn/archive/b2g_os/releases/1.1/index.html new file mode 100644 index 0000000000..8514a82976 --- /dev/null +++ b/files/bn/archive/b2g_os/releases/1.1/index.html @@ -0,0 +1,94 @@ +--- +title: ডেভেলপারদের জন্য ফায়ারফক্স অপারেটিং সিস্টেম 1.1 +slug: Archive/B2G_OS/Releases/1.1 +tags: + - NeedsReview +translation_of: Archive/B2G_OS/Releases/1.1 +--- +

ফায়ারফক্স ওএস ১.১ হল ফায়ারফক্স ওএস এর পূর্ববর্তী সংস্করণ , যা অক্টোবর ২১ ,২০১৩ এ প্রথম প্রকাশের জন্য সহযোগীদের কাছে প্রস্তাব করা হয়। এর গেকো উপাদানসমূহ ফায়ারফক্স ১৮( ডেভেলোপারদের জন্য ফায়ারফক্স ১৮ দেখুন) এর উপর ভিত্তি করে করা হয়েছে যা ফায়ারফক্স ওএস ১.০১ এর মতই, কিন্তু এতে কিছু ফিক্স করা বাগ এবং অতিরিক্ত এপিআই সংযুক্ত করা হয়ছে।.

+
+

ফায়ারফক্স ওএস এর ডকুমেন্ট তৈরিতে সাহায্য করতে চান ? লেখা প্রয়োজন এমন B2G সম্পর্কিত বাগের তালিকা দেখুন এবং এখনি শুরু করুন !

+
+

এইচটিএমএল

+

ফায়ারফক্স ওএস ভিত্তিক:

+ +

সাধারণ Gecko:

+

JavaScript

+

ফায়ারফক্স ওএস ভিত্তিক:

+ +

DOM/API

+

ফায়ারফক্স ওএস ভিত্তিক:

+

Device Storage API: যখন cursor callback করা হয় তখন navigator.getDeviceStorage("sdcard").enumerate, this.done এটি অসংজ্ঞায়িত হয়। (দেখুন bug 902565). যা ফায়ারফক্স ১.২ তে ঠিক করা হয়েছে। চিহ্নিত ত্রুটি এর জন্য সম্ভাব্য সামঞ্জস্যতা নিরীক্ষণ / সমাধান নীচে আলোচনা করা হল

+ +

Firefox OS HD support

+

যেহুতু ফায়ারফক্স ওএস 1.1 থেকেই উচ্চ DPI ডিভাইসের জন্য HD সহযোগিতা প্রদান করা হচ্ছে তাই এর এইচডি সংস্করণ আছে। এটি শুধুমাত্র একটি বাহ্যিক পরিবর্তন, এমনভাবে করা হয়েছে ঠিক যেমনি ভাবে আপনি ভিন্ন ভিন্ন resolution এর ডিভাইসের সাথে মানিয়ে নিতে পারেন, এবং আপনি এই ক্ষেত্রে খুব বেশি পরিমানে platform ভিন্নতার সম্মুখীন হবেন না।

+

Fixed Firefox OS Issue s

+ +

Resolved crashes

+

Feature highlights for Firefox OS 1.1

+ +

আরো দেখুন

+ +

পূর্বের সংস্করণসমূহ

+

+ +

diff --git a/files/bn/archive/b2g_os/releases/1.3/index.html b/files/bn/archive/b2g_os/releases/1.3/index.html new file mode 100644 index 0000000000..3b72f0284c --- /dev/null +++ b/files/bn/archive/b2g_os/releases/1.3/index.html @@ -0,0 +1,128 @@ +--- +title: ফায়ারফক্স ওএস ১.৩ উন্নয়নকারীদের জন্য +slug: Archive/B2G_OS/Releases/1.3 +tags: + - NeedsReview +translation_of: Archive/B2G_OS/Releases/1.3 +--- +
+

ফায়ারফক্স ওএস ১.৩ বর্তমানে প্রকাশনা পূর্ববর্তী অবস্থায় আছে । এর Gecko উপাদানগুলো ফায়ারফক্স ২৮ ভিত্তিক (দেখুন Firefox 28 release notes for developers.)

+
+
+

আপনি কি ফায়ারফক্স ওএস ১ .৩ ডকুমেন্ট -এ সাহায্য করতে চান ? খুঁজে দেখুন list of B2G-related bugs that need to be written about এবং যোগদান করুন !

+
+

CSS

+

সাধারণ Gecko:

+ +

HTML

+

General Gecko:

+ +

JavaScript

+

General Gecko:

+

EcmaScript 6 (Harmony) implementation continues!

+ +

DOM/API

+

Firefox OS-specific:

+ +

General Gecko:

+ +

SVG

+

General Gecko:

+ +

Audio/Video

+ +

See also

+ +

Older versions

+

+ +

+

Share this article: http://mzl.la/1fVuFWR

diff --git a/files/bn/archive/b2g_os/releases/1.4/index.html b/files/bn/archive/b2g_os/releases/1.4/index.html new file mode 100644 index 0000000000..bef411e45e --- /dev/null +++ b/files/bn/archive/b2g_os/releases/1.4/index.html @@ -0,0 +1,79 @@ +--- +title: ডেভেলপারদের জন্য ফায়ারফক্স ওএস ১.৪ +slug: Archive/B2G_OS/Releases/1.4 +tags: + - B2G + - Firefox OS + - Release Notes +translation_of: Archive/B2G_OS/Releases/1.4 +--- +
+

ফায়ারফক্স ওএস ১.৪ বর্তমানে প্রকাশের অপেক্ষায় আছে। এর গেকো অংশটি ফায়ারফক্স ৩০ এর উপর নির্ভর করে তৈরি করা হয়েছে (ডেভেলপারদের জন্য ফায়ারফক্স ৩০ রিলিজ নোট সমূহ দেখুন)

+
+
+

ফায়ারফক্স ওএস ১.৪ এর জন্য ডকুমেন্টেশন তৈরিতে সহায়তা করতে চান ? B2G-সংশ্লিষ্ট যেসব বাগ রয়েছে এবং সেগুলো সম্পর্কে লেখা প্রয়োজন, তার তালিকা দেখুন এবং যুক্ত হউন!

+
+

সিএসএস

+

সাধারন গেকোঃ

+ +

জাভাস্ক্রিপ্ট

+

সাধারন গেকোঃ

+

EcmaScript 6.0 এর সমর্থন আরও বর্ধিত করা হয়েছেঃ

+ +

ইন্টারফেস/এপিআই/DOM

+

গেকো সাধারনঃ

+ +

SVG

+

Gecko general:

+ +

Audio/Video

+

Gecko general:

+ +

Manifest

+ +

See also

+ +

Older versions

+

+ +

+

diff --git a/files/bn/archive/b2g_os/releases/2.0/index.html b/files/bn/archive/b2g_os/releases/2.0/index.html new file mode 100644 index 0000000000..3bc7d5ed7f --- /dev/null +++ b/files/bn/archive/b2g_os/releases/2.0/index.html @@ -0,0 +1,27 @@ +--- +title: ডেভেলপারদের জন্য ফায়ারফক্স ওএস ২.০ +slug: Archive/B2G_OS/Releases/2.0 +tags: + - Developer +translation_of: Archive/B2G_OS/Releases/2.0 +--- +
+

ফায়ারফক্স ওএস ২.০ এখন প্রি- রিলিজ অবস্থায় আছে। এটির গেকো উপাদান ফায়ারফক্স ৩২ এর উপর ভিত্তি করে তৈরি হয়েছে। ( তাই ডেভেলোপারদের জন্য ফায়ারফক্স ৩২ এর রিলিজ নোট দেখুন)

+
+
+

ফায়ারফক্স ওএস ২.০ কে ডকুমেন্ট করতে সাহায্য করতে চান ? তাহলে B2G সম্পর্কিত বাগের তালিকা যাদের নিয়ে লেখা প্রয়োজন দেখুন এবং সাহায্য করা শুরু করে দিন!

+
+

ম্যানিফেস্ট

+ +

অন্যান্য উপাদান টিবিডি

+

আরো দেখুন

+ +

পূর্বের সংস্করণসমূহ

+

+ +

diff --git a/files/bn/archive/b2g_os/releases/index.html b/files/bn/archive/b2g_os/releases/index.html new file mode 100644 index 0000000000..9ea9103ddf --- /dev/null +++ b/files/bn/archive/b2g_os/releases/index.html @@ -0,0 +1,22 @@ +--- +title: ফায়ারফক্স ওএস উন্নয়নকারী প্রকাশনার গুরুত্বপূর্ণ তথ্য +slug: Archive/B2G_OS/Releases +tags: + - NeedsReview +translation_of: Archive/B2G_OS/Releases +--- +

ধাপে ধাপে ফায়ারফক্স ওএস প্রকাশনার গুরুত্বপূর্ণ তথ্য

+

এ অংশে আপনি পাবেন ফায়ারফক্স ওএস এর প্রতিটি গায়া এবং গেকোর নতুন প্রকাশনা সম্পর্কিত অনুচ্ছেদ , যা ব্যাখ্যা করবে প্রতিটি নতুন সংস্করণে কোন কোন বৈশিষ্ট্যগুলো সংযোজন করা হয়েছে এবং কোন কোন লুকোনো সমস্যাগুলো অপসারণ করা হয়েছে । এতে আরও রয়েছে একটি সংযুক্ত সারমর্ম ছক যা দেখাবে কোন কোন APIগুলো ফায়ারফক্স ওএস এর প্রতিটি নতুন সংস্করণ দ্বারা সমর্থিত ।

+
+ {{ListSubpages("",1,0,1)}}
+

অন্যান্য সহায়ক তথ্য

+
+
+ Firefox OS API support table
+
+ বিভিন্ন প্রাপ্তিসাধ্য APIগুলোর তালিকা এবং ফায়ারফক্স এর  কোন কোন সংস্করণগুলোতে এগুলোর জন্য সহায়ক রয়েছে ।
+
+ App permissions
+
+ হোষ্টকৃত, সুবিধাযুক্ত এবং সনদযুক্ত APIগুলোর তালিকার সাথে আছে আপনার ইনস্টলযোগ্য আপগুলোর সুস্পষ্টভাবে প্রকাশ করা প্রয়োজন এমন বিষয়গুলো যেমন সুস্পষ্ট আনুমতির জন্য নাম, অ্যাপের ধরণ আবশ্যক, বর্ণনা, প্রবেশাধিকার বৈশিষ্ট্য, এবং সার্বজনীন প্রবেশাধিকার ইত্যাদি নির্ধারণের জন্য আবশ্যক প্রবেশাধিকার সম্পর্কিত তথ্য ।
+
diff --git "a/files/bn/archive/b2g_os/releases/\340\247\247.\340\247\250/index.html" "b/files/bn/archive/b2g_os/releases/\340\247\247.\340\247\250/index.html" new file mode 100644 index 0000000000..ce9147b6eb --- /dev/null +++ "b/files/bn/archive/b2g_os/releases/\340\247\247.\340\247\250/index.html" @@ -0,0 +1,469 @@ +--- +title: ফায়ারফক্স ওস ১.২ উন্নয়নকারীর জনে্্য +slug: Archive/B2G_OS/Releases/১.২ +translation_of: Archive/B2G_OS/Releases/1.2 +--- +
+

Firefox OS 1.2 is at a pre-release stage right now. Its Gecko component is based on Firefox 26 (encompassing all Gecko additions between Firefox 19 and Firefox 26; see Firefox 26 release notes for developers for the latest.)

+
+ +
+

Want to help document Firefox OS 1.2? Check out the list of B2G-related bugs that need to be written about and pitch in!

+
+ +

Developer Tools

+ + + +

HTML

+ +

General Gecko:

+ + + +

CSS

+ +

General Gecko:

+ + + +

JavaScript

+ +

General Gecko:

+ +

EcmaScript 6 (Harmony) implementation continues!

+ + + +

Telephony-specific additions (mostly API-related)

+ + + +

DOM/API

+ +

Firefox OS-specific:

+ + + +
New WebGL 1 extensions supported in Firefox OS 1.2:
+ + + +
+
Note: availability of these extensions depends on device capabilities; not all extensions will be available on all devices.
+
+ +

General Gecko:

+ + + +

SVG

+ +

General Gecko:

+ + + +

MathML

+ +

General Gecko:

+ + + +

Network

+ +

General Gecko:

+ + + +

Worker

+ +

General Gecko:

+ + + +

Security

+ +

General Gecko:

+ + + +

XForms

+ +

General Gecko:

+ +

Support for XForms has been removed in Firefox 19.

+ +

See also

+ + + +

Older versions

+ +

+ +

+ +

+ +

Share this article: http://mzl.la/1av9ZRr

diff --git a/files/bn/archive/b2g_os/resources/index.html b/files/bn/archive/b2g_os/resources/index.html new file mode 100644 index 0000000000..e47594a66d --- /dev/null +++ b/files/bn/archive/b2g_os/resources/index.html @@ -0,0 +1,58 @@ +--- +title: Resources +slug: Archive/B2G_OS/Resources +translation_of: Archive/B2G_OS/Resources +--- +

অ্যাপ হ্যাকারদের জন্য রিসোর্সসমূহ যা আমাদের  বিভিন্ন ওয়ার্কসপের মাধ্যমে সৃষ্টি হয়েছে। 

+

ফায়ারফক্স ওএস সিমুলেটর

+

ফায়ারফক্স ওএস সিমুলেটর

+

https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator/
+ https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/

+

একটি অ্যাপ বানানো / ইন্সটল করা

+

ফায়ারফক্স ওএস বয়লারপ্লেট অ্যাপ (কাজ চলছে)

+

https://github.com/robnyman/Firefox-OS-Boilerplate-App
+ http://robnyman.github.com/Firefox-OS-Boilerplate-App/
+
+ (ইন্সটল বাটন , ওয়েব কার্যক্রম , ওয়েব এপিআই এর উদাহারন , ঐচ্ছিক অফলাইন সাপোর্ট সহ পরিস্কার বেসিক সংস্করণ)

+

প্যাকেজড অ্যাপ যুক্ত সংস্করণের কোড:

+

https://github.com/robnyman/Firefox-OS-Boilerplate-App/tree/packaged-app

+

FxOSStub (ইন্সটল বাটন আছে এমন অ্যাপের টেমপ্লেট/ ডিজাইন):

+

https://github.com/Jaxo/fxosstub
+
+     Recommended: host on your own server or through GitHub pages    
+     (http://pages.github.com/). Example at http://robnyman.github.com/Firefox-OS-Boilerplate-App/

+

Mortar:

+

https://hacks.mozilla.org/2013/01/writing-web-apps-quickly-with-mortar/

+

Design patterns:

+

https://marketplace.firefox.com/developers/docs/patterns

+

Firefox OS Design Guidelines:

+

https://t.co/I9VaxvBu
+
+ droid@screen: http://blog.ribomation.com/droid-at-screen/

+

WebAPIs

+

WebAPIs in version 1:

+

https://wiki.mozilla.org/WebAPI

+

Documentation and their status for APIs:

+

https://developer.mozilla.org/en-US/docs/WebAPI/Doc_status

+

Robert's slides on Web APIs

+

http://www.slideshare.net/robnyman/web-apis-apps-mozilla-london

+

Writing (good) Webapps:

+

http://jlongster.github.com/writing-webapps/

+

Firefox Marketplace & Developer Hub

+

File a bug on Marketplace!

+

https://bugzilla.mozilla.org/enter_bug.cgi?product=Marketplace&component=General

+

Developer Hub

+

https://marketplace.firefox.com/developers/

+

WebApps mailing list

+

https://lists.mozilla.org/listinfo/dev-webapps

+

Marketplace Development Server (expect bugs!)

+

http://marketplace-dev.allizom.org/

+

Reference apps (Chrono, Face Value, Roller):

+

https://marketplace.firefox.com/developers/docs/apps/chrono

+

WebPayments

+

https://wiki.mozilla.org/WebAPI/WebPayment
+ https://wiki.mozilla.org/WebAPI/WebPaymentProvider

+

Pitfalls and helpers for mobile Web apps

+

Rob's slides on Pitfalls and Helpers

+

http://www.slideshare.net/robhawkes/mobile-app-development-pitfalls-helpers
+  

diff --git a/files/bn/archive/b2g_os/samsung_nexus_s/index.html b/files/bn/archive/b2g_os/samsung_nexus_s/index.html new file mode 100644 index 0000000000..a3e69872bc --- /dev/null +++ b/files/bn/archive/b2g_os/samsung_nexus_s/index.html @@ -0,0 +1,62 @@ +--- +title: স্যামসাং নেক্সাস S +slug: Archive/B2G_OS/Samsung_Nexus_S +tags: + - B2G + - Firefox OS + - NexusS + - Samsung + - nexus_x + - ফায়ারফক্স ওএস +translation_of: Archive/B2G_OS/Phone_guide +--- +

নেক্সাস এস হল ফায়ারফক্স ওএস- এর জন্য "tier ২" প্লাটফর্ম। এই ডিভাইসটি আমাদের লক্ষ্য নয়, তবে একে এতে বিল্ড করা আমরা সমর্থন করি। এই ডিভাইসকে সমর্থন করার যেকোন প্রকার সাহায্যকে স্বাগতম।

+ +

সামঞ্জস্যপূর্ণতা

+ +

ফায়ারফক্স ওএস i9020, i9020A, i9023 এবং SHW-M200k ডিভাইসগুলোর সাথে কাজ করে বলে জানা আছে। এই ডিভাইসকে সমর্থন করার সকল জানা ইস্যুগুলো https://bugzilla.mozilla.org/show_bug.cgi?id=b2g-nexuss এখানে পাওয়া যায়।

+ +

ব্যবহারযোগ্যতা (v১.১ পর্যন্ত)

+ +

ফোনটি যেকোন প্রকার ব্লকিং ইস্যু ব্যতীত একটি দৈনিক ভিত্তির উপর ব্যবহার উপযোগী হওয়া উচিত। এখন পর্যন্ত, অনুসরণটি গেকো ১৮ (BRANCH=v1-train ./config.sh nexus-s) সিস্টেম তৈরি করার সময় সঠিকভাবে কাজ করে বলে আশা করা যায়:

+ + + +

ব্যবহারযোগ্যতা (মাস্টার, v১.৪/২.০ হতে)

+ +

বেশীরভাগ ফাংশনগুলোক কাজ করবে বলে আশা করা হয়। ভিডিও প্লেব্যাক এবং ভিডিও ধারণ কোন কারণে কাজ করছে না।

+ +

চলাকলীন বিষয়গুলো

+ +

ওয়াই-ফাই টেথারিং

+ +

ওয়াই-ফাই টেথারিং কাজ করে, কিন্তু দেখা যাচ্ছে যে নিষ্ক্রিয় করার পর কোন একভাবে এটি নষ্ট হয়ে যাচ্ছে। ওয়াই-ফাই কার্নেল ড্রাইভার আনলোড করে এবং পরে পুনরায় লোডের মাধ্যমে অথবা পুনরায় ডিভাইস চালু করার মাধ্যমে এই সমস্যা এড়ানো সম্ভব।

+ +
rmmod bcm4329 && insmod /system/modules/bcm4329.ko iface_name=wlan0
+ +

প্যাচ রেপো

+ +

মজিলা-কেন্দ্রীয় ভান্ডারের জন্য গেকো-১৮-লোকাল (এবং গেকো-১৮-লোকাল+এইচ ডি) শাখা ব্যবহার করুন, অন্যান্যদের জন্য মাস্টার-লোকাল ব্যবহার করুন।

+ + + +

অারও তথ্য

+ +

আপনি http://forum.xda-developers.com/showthread.php?t=1924367 এখানে নেক্সাস এস- এ ফায়ারফক্স ওএস সম্পর্কিত কোন থ্রেড খুঁজতে পারেন। এতে বেশ সাম্প্রতিক এবং কার্যকারী কাজ পাবেন।

diff --git a/files/bn/archive/b2g_os/security/application_security/index.html b/files/bn/archive/b2g_os/security/application_security/index.html new file mode 100644 index 0000000000..6bc0456f8b --- /dev/null +++ b/files/bn/archive/b2g_os/security/application_security/index.html @@ -0,0 +1,135 @@ +--- +title: অ্যাপ্লিকেশনের নিরাপত্তা +slug: Archive/B2G_OS/Security/Application_security +tags: + - Apps + - Firefox OS + - Guide + - Intermediate + - Mobile + - Security + - অ্যাপ + - গাইড + - নিরাপত্তা + - ফায়ারফক্স ওএস + - মোবাইল +translation_of: Archive/B2G_OS/Security/Application_security +--- +
+

এই আর্টিকেলে ফায়ারফক্স ওএস অ্যাপ্লিকেশনের নিরাপত্তা মডেল নিয়ে বিস্তারিত আলোচনা করা হয়েছে।

+
+

ওয়েব অ্যাপের নিরাপত্তা নিয়ন্ত্রণের জন্য ফায়ারফক্স ওএস প্রধানত যা করেঃ

+ +

অ্যাপের প্রকারভেদ (টাইপ)

+

ফায়ারফক্স ওএস এ তিন ধরণের ওয়েব অ্যাপ আছেঃ "web", "privileged" এবং "certified"। অ্যাপটি কোন প্রকারের সেটি তার মেনিফেস্ট ফাইলে বলে দিতে হয় এবং কোন প্রকারের তার ওপর ভিত্তি করেই অ্যাপটি কি কি অনুমতি পাবে তা নির্ধারণ করা হয়।

+ +
+

খেয়াল করুনঃ এই তিন ধরণের অ্যাপ সম্পর্কে আরও জানতে অ্যাপ মেনিফেস্ট পাতাটি দেখুন।

+
+

অ্যাপ সরবরাহ

+

ফায়ারফক্স ওএস ব্যবহারকারীদের ডিভাইসে আপনার অ্যাপ দুইভাবে পৌঁছে দিতে পারেনঃ কোন ওয়েবসাইটে রাখার মাধ্যমে (এদের হোস্টেড বলা হয়) অথবা অ্যাপের সব ফাইল একসাথে জিপ বা প্যাকেজ করে (এদের প্যাকেজড বলা হয়)। সাধারণ ওয়েব অ্যাপ এই দুটি পদ্ধতির যেকোনটি ব্যবহার করে সরবরাহ করা যাবে, কিন্তু সুবিধাভোগী আর প্রত্যয়িত অ্যাপ শুধুমাত্র প্যাকেজড হিসেবেই সরবরাহ করতে হবে।

+

হোস্ট করা অ্যাপ

+

হোস্ট করা অ্যাপ, ডেভেলপারের ওয়েব সাইটে হোস্ট বা আপলোড করা একটি অ্যাপ্লিকেশন বৃত্তান্ত বা মেনিফেস্ট  ফাইল ছাড়া আর কিছুই না। এই ফাইলে বলা থাকে অ্যাপের index ফাইল (বা ইন্সটল হবে কোথা থেকে) কোথায়। এছাড়া প্রায়ই মেনিফেস্ট ফাইলে অ্যাপটি'র appcache বৃতান্ত ফাইলেরও ঠিকানা দেওয়া থাকে, যা ব্যবহার করে অ্যাপটি যাতে অফলাইনেও চলে এবং দ্রুত চালু করা যায়, সেই সুবিধা দেওয়া যায়। তবে এটা ঐচ্ছিক।  নিরাপত্তার কথা ভাবলে হোস্ট করা অ্যাপ অন্য সব ওয়েবসাইটের মতই আচরণ করে। হোস্টেড অ্যাপ যখন কোন URL দেখায়, তখন URL টি ব্রাউজারে দেখলে যেসব সুবিধা পেতেন, অ্যাপ থেকেও হুবুহু একই সুবিধা পাবেন, বাড়তি কোন কিছুই যোগ বা বিয়োগ হয় না। তাই ওয়েবসাইটে এক পাতা থেকে অন্য পাতা বা রিসোর্সে (ছবি ইত্যাদি) যেভাবে লিঙ্ক করতেন, সাধারণ হোস্টেড ওয়েব অ্যাপেও হুবুহু একই ভাবে লিঙ্ক করতে হবে।

+

প্যাকেজড অ্যাপ

+

সেসব ওপেন-ওয়েব অ্যাপকে প্যাকেজড অ্যাপ  বলা হয় যাদের সব রিসোর্স  বা ফাইল/কোড (HTML, CSS, JavaScript, অ্যাপ মেনিফেস্ট এবং অন্যান্য ফাইল) একটি zip ফাইলে ব্যবহারকারীর কাছে পৌঁছে দেওয়া হয়, কোন ওয়েব সার্ভারে আপলোড করার পরিবর্তে। বিস্তারিত পাবেন প্যাকেজড অ্যাপ পাতায়।

+

অ্যাপ ইন্সটল করা

+

অ্যাপ জাভাস্ক্রিপ্ট API ব্যবহার করে অ্যাপ ইন্সটল করা হয়ঃ

+ +

কোন অ্যাপ যে আসলেই ওয়েব অ্যাপ হিসেবে ইন্সটল হতে চায় - এটা নিশ্চিত করাটা জরুরী। এজন্য যেকোন ওয়েবসাইট-ই যেন কোন একটা মেনিফেস্ট ফাইল হোস্ট করে আমাদের ফাকি দিতে না পারে সেজন্য মেনিফেস্ট ফাইলের বিশেষ ধরনের mime-type সহ পাঠাতে হবেঃ application/x-web-app-manifest+json। তবে যদি যে ওয়েবসাইট অ্যাপ ইন্সটল করাতে চায় তার অরিজিন আর অ্যাপের মেনিফেস্টের অরিজিন একই হয় তাহলে এই শর্ত শিথিলযোগ্য।

+

আপডেট করা

+

অ্যাপ আপডেট করা পাতায় জানতে পারবেন কিভাবে আপনার অ্যাপ আপডেট করানো সম্ভব।

+

অনুমতিসমূহ

+

সাধারণ ওয়েবসাইটের যেসব কাজ করার অনুমতি থাকে অ্যাপের বেলায় তার থেকে বেশি অনুমতি দেওয়া সম্ভব। তবে ডিফল্টভাবে সাধারণ ওয়েবসাইট এবং ওয়েব অ্যাপের একই লেভেলের অনুমতি থাকে। আরও বেশি মাত্রার অনুমতি পেতে চাইলে কোন অ্যাপকে সেইসব অনুমতির তালিকা মেনিফেস্ট ফাইলে বলে দিতে হবে।

+

মেনিফেস্টে ঘোষণা করা

+

প্রতিটি অতিরিক্ত কাজ করার অনুমতি মেনিফেস্ট ফাইলে বলে দিতে হবে, সাথে আপনার ব্যবহারকারীরা যাতে জানতে পারে কেন আপনার বিশেষ অনুমতিটি লাগছে, সেটাও ব্যাখ্যা করতে হবে। যেমন কোন অ্যাপ যদি navigator.geolocation API ব্যবহার করতে চায় তাহলে মেনিফেস্ট ফাইলে নিচের মত বলতে হবেঃ

+
"permissions": {
+  "geolocation":{
+    "description": "Required for autocompletion in the share screen",
+  }
+},
+
+

এর ফলে অ্যাপটি geolocation অনুমতি চাওয়ার জন্য প্রম্পট করবে, অন্যান্য ওয়েব পেইজের মতই।  অ্যাপ মেনিফেস্ট পাতায় বিস্তারিত দেখুন।

+
+

খেয়াল করুনঃ বর্তমানে ব্যবহারকারীর কাছে অনুমতির ব্যখ্যাটি দেখানো হয়না। bug 823385 দেখুন।

+
+

অনুমতি দেওয়া

+

যখন মেনিফেস্ট ফাইলে কোন অতিরিক্ত অনুমতি চাওয়া হয়, তখন অনুমতিটি allow অথবা prompt এই দুইটি'র কোন একটি হয়, কোন অনুমতি চাওয়া হচ্ছে তার ওপর নির্ভর করে। Allow ধরণের অনুমতিটি ব্যবহারকারীর কাছে অনুমোদন চায় না, মেনিফেস্টে থাকলেই অনুমতি পেয়ে যায়। আর prompt ধরণের অনুমতি গুলো প্রথবমার ব্যবহারকারীর কাছে দেখানো হবে, এবং ব্যবহারকারী অনুমোদন করলেই অনুমতিটি কার্যকর হবে। সাধারণত গোপনীয়তা জনিত বিশেষ অনুমতিগুলোর ব্যাপারেই ব্যবহারকারীর কাছে জানতে চাওয়া হয় সে অনুমতিটি অনুমোদন করছে কিনা, আর এটা শুধুমাত্র প্রথমবারে অনুমতিটি ব্যবহারের সময়ই জানতে চাওয়া হয়। যেমন, ডিভাইসের কন্টাক্ট লিস্ট ব্যবহার করতে চাইলে এটা আগে ব্যবহারকারীর কাছে জানতে চাওয়া হবে। কিন্তু যদি raw TCP কানেকশন তৈরি করতে চান তাহলে ধরে নেওয়া হয় এতে ব্যবহারকারীর কোন আপত্তি থাকবে না। ব্যবহারকারীর নিরাপত্তা নিশ্চিত করতে allow ধরণের অনুমতিগুলো মার্কেটপ্লেসে যাচাই করে দেখা হয়।

+

অনুমতি বাতিল করা

+

ব্যবহারকারীরা যেকোন সময় prompt ধরণের অনুমতিগুলোর ব্যাপারে তাদের মতবদল করতে পারেন এবং ফায়ারফক্স ওএস সেটিংস অ্যাপ ব্যবহার করে আপনার অ্যাপের, এসব অনুমতি বাতিল করতে পারেন । তবে Allow ধরনের অনুমতিগুলো ব্যবহারকারীরা পরিবর্তন করতে পারেন না।

+

ওয়েব অ্যাপ স্যান্ডবক্স

+

প্রতিটি অ্যাপের নিজস্ব তথ্য রাখা

+

প্রতিটি অ্যাপ নিজের আলাদা স্যান্ডবক্সে চলে, মানে এক অ্যাপের জমা করা কোন তথ্য-ই অন্য আরেকটি অ্যাপ দেখতে পারবে না। এর মধ্যে কুকি'র তথ্য, localStorage তথ্য, indexedDB তথ্য এবং সাইটের অনুমতি সবকিছুই পরে।

+

A diagram showing three Firefox OS apps all open is separate sandboxes, so none of them can affect each other.

+

এর মানে হল যদি কোন ব্যবহারকারী দুটি অ্যাপ "ক" এবং "খ" ইন্সটল করে তাহলে তাদের প্রত্যেকের নিজস্ব কুকি, ডিভাইসের তথ্য এবং অনুমতি থাকবে। যদি দুটি অ্যাপ এমন {{ htmlelement("iframe") }} খোলে যা একই অরিজিনে পয়েন্ট করা, তাহলেও ওপরের কথাটি প্রযোজ্য। যেমন, যদি ক এবং খ দুটি অ্যাপই এমন <iframe> খোলে যা "http://www.mozilla.org" এ পয়েন্ট করা, তাহলে দুটি অ্যাপই ওয়েবসাইটটি দেখাবে, তবে দুটি অ্যাপের কুকি এবং অন্যান্য তথ্য সম্পূর্ণ আলাদা আলাদা থাকবে।

+

এর মানে হল যদি ব্যবহারকারী "ক" অ্যাপে ফেসুবকে লগইন করেন, "খ" অ্যাপে এর কোন প্রভাবই থাকবে না। ফেসবুকে লগইন করার সময় ক অ্যাপ যেসব কুকি সংরক্ষণ করে, তা শুধুমাত্র ক অ্যাপ-ই দেখতে পাবে। তাই যদি এখন খ অ্যাপটি <iframe> ব্যবহার করে ফেসবুক খোলে তাহলে এটি ক অ্যাপের কুকিগুলো দেখতে পাবে না, তাই ব্যবহারকারী'র ফেসবুক অ্যাকাউন্ট দেখানোর বদলে খ অ্যাপটি ফেসুবকের লগইন পাতা দেখাবে।

+

অ্যাপগুলো একটি অন্যটিকে চালু করতে পারে না

+

এর মানে আইফ্রেম ব্যবহার করে একটি অ্যাপ অন্য একটি অ্যাপ দেখাতে পারবে না। যদি ক অ্যাপ <iframe> ব্যবহার করে খ অ্যাপের URL, src এর মাণ হিসেবে দিয়ে দেয়, আসলে <iframe> এ খ অ্যাপটি চালু হবে না। শুধুমাত্র ঐ URL এর ওয়েবসাইট-টি সাধারণভাবে দেখানো হবে। খ অ্যাপের কুকি ব্যবহার করতে পারবে না এবং এমনভাবে আচরণ করবে যেন খ অ্যাপটি ডিভাইসে ইন্সটল করাই হয়নি।

+

প্যাকেজড অ্যাপের (নিচে বিস্তারিত আছে) বেলায়ও ওপরের কথা সত্য। যদি ক অ্যাপ খ নামের একটি প্যাকেজড অ্যাপকে <iframe> ব্যবহার করে লোড করতে চায় (খ অ্যাপের app:// URL ব্যবহার করে), তাহলে এটি সরাসরি ব্যর্থ হবে। ৪০৪ নাকি অন্য কোন ত্রুটি দেখানো হবে তা এখনো ঠিক করা হয়নি, তবে ত্রুটি হিসেবে দেখানো হবে এটা নিশ্চিত। এবং খ অ্যাপটি ডিভাইসে থাকুক বা না থাকুক ক অ্যাপ কোনভাবেই খ অ্যাপকে লোড করতে পারবে না, তাই ক অ্যাপ জানতেও পারবে না ডিভাইসে খ অ্যাপটি ইন্সটল করা আছে কি নাই।

+

একই জিনিস ঘটবে যদি ক অ্যাপের top-level frame এ খ অ্যাপের URL লোড করতে চাওয়া হয়। আমরা জানি কোন ফ্রেমে কোন অ্যাপ চলছে, তাই ঐ ফ্রেমে অন্য কোন অ্যাপ দেখাতে চাইলে ওপরে যেভাবে বলা হয়েছে সেভাবে ত্রুটি দেখানো হবে।

+

উদ্দেশ্য

+

ওপরের পদ্ধতির সুবিধা অসুবিধা দুইটিই আছে। একটা অসুবিধা হল যদি ব্যবহারকারী একই ওয়েবসাইট ভিন্ন ভিন্ন অ্যাপের মাধ্যমে ব্যবহার করেন, তাহলে ঐ ওয়েবসাইটের জন্য প্রত্যেকটি অ্যাপে আলাদা আলাদা ভাবে লগইন করতে হবে। এছাড়া যদি কোন ওয়েবসাইট ডিভাইসে তথ্য জমা রাখতে চায়, তাহলে প্রত্যেকটি অ্যাপের জন্যই ঐ ওয়েবসাইটটি আলাদা আলাদা ভাবে একই তথ্য জমা করতে থাকবে। তাই কোন ওয়েবসাইট যদি অনেক তথ্য জমা করতে যায়, তাহলে সমস্যা হতে পারে।

+

তবে আসল সুবিধা হল ওপরের মডেলটি বেশ নির্ভরযোগ্য। এমনটা কিছুতেই হওয়া সম্ভব না যে বিভিন্ন অ্যাপ, অন্য কোন তৃতীয় ওয়েবসাইট ব্যবহার করতে গিয়ে সমস্যা তৈরি করবে যে এক অ্যাপের জন্য অন্য অ্যাপ কাজ করা থামিয়ে দেবে। এছাড়া কোন অ্যাপ আনইন্সটল করলে অন্য অ্যাপের তথ্য হারিয়ে যাওয়ারও সম্ভাবনা থাকবে না। অথবা আনইন্সটল করা অ্যাপের ওপর নির্ভরশীলতার জন্য অন্য কোন অ্যাপ কাজ করা থামিয়ে দেবে এই সম্ভাবনাও থাকবে না।

+

এছাড়া বিশাল একটা নিরাপত্তাজনিত সুবিধা আছে। যেমন ধরি AwesomeSocial নামের কোন অ্যাপ ব্যবহার করে কেউ ফেসবুকে লগইন করেছেন। তাহলে তার আর SketchGame নামের কোন অ্যাপ নিয়ে এই দুশ্চিন্তা করতে হবে না যে অ্যাপটি ফেসবুকের কোন বাগ বা সীমাবদ্ধতা'র সুযোগ নিয়ে ব্যবহারকারী'র তথ্য হাতিয়ে নিতে পারে।

+

এছাড়া গোপনীয়তাজনিত ভাল সুবিধা আছে। ব্যবহারকারী নিশ্চিতে PoliticalPartyPlus নামের কোন অ্যাপ ইন্সটল করতে পারবেন এই দুশ্চিন্তা ছাড়া যে MegaCorpEmployeeApp নামের কোন অ্যাপ জানতে পারবে যে ব্যবহারকারী প্রথম অ্যাপটি ইন্সটল করেছেন কি না অথবা প্রথম অ্যাপের কোন তথ্য দ্বিতীয় অ্যাপতে পেয়ে যাবে কি না।

+

স্যান্ডবক্সভিত্তিক নিরাপত্তা মডেল

+

ওয়েবসাইটসমূহের তথ্যের মতই প্রতিটি অ্যাপের নিরাপত্তা তথ্যও স্যান্ডবক্স করা হয়। যদি অ্যাপ "ক" http://maps.google.com সাইটের কোন পাতা লোড করে এবং পাতাটি geolocation সুবিধার অনুমতি চাওয়ার পর ব্যবহারকারী তার অনুমতি দিয়ে দেন, এবং বলে দেন যাতে এই অনুমতিটির ব্যাপারে আর জানতে না চাওয়া হয়। শুধু অ্যাপ ক - ই এই সাইটটিতে অনুমতি পেয়েছে। অন্য কোন অ্যাপ "খ" http://maps.google.com, সাইটে গেলে নতুন করে অনুমতি নেওয়ার প্রয়োজন পড়বে।

+

আর সাধারণ ব্রাউজারে ব্যবহারের মতই একই অ্যাপে, কোন বিশেষ API বিভিন্ন সাইটে (অরিজিনে) ব্যবহার করতে চাইলে প্রত্যেক সাইটের জন্যই নতুন করে অনুমতি নিতে হবে। যদি "ক" অ্যাপ আইফ্রেমের ভেতর http://maps.google.com, সাইট খুলে GeoLocation ব্যবহারের অনুমতি পায়, তাহলে একই ওয়াপ থেকেও http://docs.google.com সাইটে গেলে এবং geolocation ব্যবহার করতে চাইলে নতুন করে অনুমতি লাগবে।

+

ব্রাউজার API স্যান্ডবক্স

+

এছাড়াও যেসব অ্যাপ অনেক অনেক URL লোড করে, যেমন ব্রাউজারসমূহ, তাদের জন্য আমরা browserContent ফ্ল্যাগ রেখেছি। এই ফ্ল্যাগের সাহায্যে কোন অ্যাপ একটি নয়, বরং দুটি স্যান্ডবক্স ব্যবহার করেঃ একটি তার নিজের জন্য, অন্যটি সে যেসব "ওয়েব কন্টেন্ট" দেখায় তাদের জন্য। যেমনঃ

+

ধরা যাক MyBrowser অ্যাপটি https://mybrowser.com ডোমেইন থেকে লোড করা হয়েছে। এই ডোমেইন থেকে স্ক্রিপ্ট এবং অন্যান্য রিসোর্স ফাইল লোড করা হয়, এসব স্ক্রিপ্ট এবং রিসোর্স ডোমেইনটি'র নিজস্ব।

+

এখন, যদি এই অ্যাপের কোন পাতা <iframe mozbrowser> তৈরি করে, এই <iframe> এর জন্য নতুন স্যান্ডবক্স তৈরি এবং ব্যবহার করা হবে, যা কিনা অ্যাপটি'র নিজস্ব স্যান্ডবক্স থেকে ভিন্ন। যেমন, এই <iframe> টি যদি https://mybrowser.com লোড করে, তাহলে <iframe mozbrowser> এর জন্য ভিন্ন কুকি এবং অন্যান্য সবকিছু ব্যবহার করা হবে। একইভাবে, <iframe mozbrowser> এর ভেতরের কন্টেন্ট অ্যাপটি'র নিজস্ব নয়, বরং ভিন্ন IndexedDB এবং localStorage ডেটাবেইজ ব্যবহার করবে।

+

যেমন, MyBrowser অ্যাপ যদি Google Maps নিয়ে কাজ করতে চায় অঞ্চলভিত্তিক ব্রাউজিং উপভোগ করার জন্য তাহলেও ওপরের কথা প্রযোজ্য। যদি অ্যাপটি <iframe> এ http://maps.google.com লোড করে, এটি http://maps.google.com ওয়েবসাইটের জন্য কিছু কুকি লোড করবে। এরপর যদি ব্যবহারকারী <iframe mozbrowser> এর ভেতর http://maps.google.com এ যায়, তাহলে মূল অ্যাপের থেকে ভিন্ন কুকি এবং অনুমতি ব্যবহার করা হবে।

+

আরেকটি উদাহরণ যেখানে এটি উপকারী তা হল Yelp এর মত অ্যাপ। এধরণের অ্যাপে ব্যবহারকারী সরাসরি অ্যাপ থেকেই বিভিন্ন রেস্টুরেন্টের সাইটে যেতে পারেন। যদি <iframe mozbrowser> ব্যবহার করে রেস্টুরেন্টের সাইট লোড করা হয়, তাহলে মূল Yelp অ্যাপটি নিশ্চিন্ত থাকতে পারবে যে রেস্টুরেন্টের সাইটে কোন <iframe> দিয়ে যদি Yelp অ্যাপেই আবার পয়েন্ট করে দেয় (ধরি অ্যাপটি  http://yelp.com), তাহলে রেস্টুরেন্টের সাইটটি তার আইফ্রেমে Yelp কে সাধারণ ওয়েবসাইট হিসেবেই পাবে, অ্যাপ হিসেবে নয়। যেহেতু মূল Yelp অ্যাপ তার তথ্য, কুকি রেস্টুরেন্টের সাইটের সাথে শেয়ার করবে না, তাই মূল অ্যাপ নিশ্চিন্ত থাকতে পারবে যে অন্য কোন ওয়েবসাইট একে আক্রমণ করছে না।

+

অ্যাপ নিরাপত্তা - সারমর্ম

+

নিচের সারণীতে বিভিন্ন ধরণের ফায়ারফক্স ওএস অ্যাপ নিয়ে একটি সারমর্ম দেওয়া হয়েছে এবং তাদের ফরম্যাট, ইন্সটল করার পদ্ধতি, এবং হালনাগাদ করার পদ্ধতি লিপিবদ্ধ করা হয়েছে।

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ওয়েব অ্যাপের প্রকারভেদ
প্রকারসরবরাহ করাঅনুমতি মডেলইন্সটল করাআপডেট করা
ওয়েব (Web)হোস্ট করা অথবা প্যাকেজডঅপেক্ষাকৃত কম সংবেদনশীল অনুমতিগুলো, যেগুলো যাচাই করা হয়নি এমন ওয়েব কন্টেন্ট ব্যবহার করতে পারলেও ক্ষতি হবে না।যেকোন জায়গা থেকেঅ্যাপটি কোথা থেকে ইন্সটল করা হয়েছিল এবং কিভাবে সরবরাহ করা হয়েছিল তার ওপর ভিত্তি করে ব্যবহারকারী'র কাছে স্বচ্ছভাবেই আপডেট দেওয়া বা সরাসরি মার্কেটপ্লেসের মাধ্যমে আপডেট দেওয়া সম্ভব।
সুবিধাভোগী (Privileged)সাইন করা অবস্থায় প্যাকেজ এর মাধ্যমেপ্রিভিলিজড বা সুবিধাভোগী API সমূহ, যে কারণে অ্যাপ যাচাই এবং অথেনটিকেশন করা হয়।বিশ্বস্ত কোন মার্কেটপ্লেস থেকেবিশ্বস্ত কোন মার্কেটপ্লেস থেকে আপডেট করানো হয়। আপডেট ডাউনলোড এবং ইন্সটল করার আগে ব্যভারকারী'র অনুমোদন নেওয়া হয়।
প্রত্যয়িত (Certified)প্যাকেজডশক্তিশালী এবং অতি-সংবেদনশীল API সমূহ, যেগুলো তৃতীয় পক্ষের বানানো অ্যাপে অনুমিত হয় না।ডিভাইসে আগে থেকেই দেওয়া থাকে।সিস্টেম আপডেট করার সময় আপডেট করা যায়।
+
+

খেয়াল করুনঃ  ফায়ারফক্স ওএস এর ১.০ সংস্করণে ওয়েব অ্যাপ যেকোন ওয়েবসাইট মার্কেটপ্লেস থেকে ইন্সটল করা গেলেও সুবিধাভোগী অ্যাপ শুধুমাত্র মজিলা মার্কেটপ্লেস থেকেই ইন্সটল করা যাবে। কারণ এখন পর্যন্ত অন্যান্য বিশ্বস্ত মার্কেটপ্লেস থেকে ইন্সটল করার সুবিধা দেওয়া হয়নি।

+
+

 

diff --git a/files/bn/archive/b2g_os/security/debugging_and_security_testing/index.html b/files/bn/archive/b2g_os/security/debugging_and_security_testing/index.html new file mode 100644 index 0000000000..93c62d068f --- /dev/null +++ b/files/bn/archive/b2g_os/security/debugging_and_security_testing/index.html @@ -0,0 +1,85 @@ +--- +title: ফায়ারফক্স ওএস এ ডিবাগিং এবং নিরাপত্তা পরীক্ষা +slug: Archive/B2G_OS/Security/Debugging_and_security_testing +translation_of: Archive/B2G_OS/Debugging/Debugging_and_security_testing +--- +

{{Next("Mozilla/Firefox_OS/Security/Intercepting_traffic_using_a_proxy")}}

+
+

এই গাইডটির লক্ষ্য হল নিরাপত্তা পরীক্ষকগণদের প্রতি যারা ফায়ারফক্স ওএস পরীক্ষা শুরু করতে যাচ্ছে ; এইটি সাহায্য করবে সম্প্রদায়ের সদস্যদেরকে  অ্যাপ্লিকেশন নিরীক্ষা করতে এবং ফায়ারফক্স ওএস প্লাটফর্ম নিজেই সাহায্য করবে । যদি আপনি পূর্বে এটি না করে থাকেন তাহলে Firefox OS security overview পড়ার মাধ্যমে শুরু করে দিতে পারেন; তাহলে এটি পরিভাষা এবং আর্কিটেকচারের মধ্যে একটি মৌলিক ব্যাকগ্রাউন্ড প্রদান করবে ।

+
+

এই গাইডটিতে নিম্নলিখিত সাবসেকশনগুলি রয়েছে:

+
+
+ {{anch("Getting started")}}
+
+ এখানে কিভাবে ফায়ারফক্স ওএস ডেস্কটপ বিল্ড শুরু করবো এবং কিভাবে ফায়ারফক্স ওএস চলমান অ্যাপ্লিকেশনগুলি পরিদর্শন ও নিয়ন্ত্রণ করা যায় তাতে তার ব্যাখ্যা দেয়া হয়েছে ।
+
+ Intercepting Firefox OS traffic using a proxy
+
+ এটি পরিদর্শন করে কিভাবে প্রক্সি ব্যবহার করে নেটওয়ার্ক ট্রাফিক ব্যাহত করা যায় ।
+
+ Modifying Gaia
+
+ কিভাবে B2G ডেস্কটপ এর একটি কাস্টম প্রোফাইলের মাধ্যমে সেইসাথে কিভাবে আপনার নিজের তৈরী অ্যাপস নির্মাণ ও ইনস্টল করতে পারবেন তাও বলা হয়েছে ।
+
+

আমাদের পরীক্ষার সবকিচ্ছু B2G Desktop এর বিরুদ্ধে ঘটবে , আপনার ডেস্কটপ কম্পিউটারের জন্য একটি নেটিভ ফায়ারফক্স ওএস তৈরি হবে । আপনি  flavor of nightly build (Linux, Mac OS, Windows)ডাউনলোড করা শুরু করে দিন অন্য কিছু পড়ার আগে ।

+

কিভাবে শুরু করবেন

+

ধরে নিন আপনি  B2G ডেস্কটপ ডাউনলোড করে ফেলেছন উপরের নিয়ম অনুযায়ী , এখন আপনি তৈরি পরের ধাপের জন্য ।

+

লিনাক্স

+

B2G ডেস্কটপ সেট আপ করা , ফাইল নিষ্কাশন করা এবং b2g বাইনারি চালানোর মতই সোজা ।

+
tar xf b2g-something-something.tar.bz2
+cd b2g
+./b2g
+

ম্যাক

+

ডাউনলোড করা ডিস্ক ইমেজ ফাইলটি খুলবেন এবং  B2G অ্যাপ্লিকেশনটি আপনার  to your /Applications ডিরেক্টরিতে কপি করুন । এটি হয়ে যাবার পর আপনি B2G aplication আইকনটি ক্লিক করে B2G ডেস্কটপ আরম্ভ করতে পারেন ।অন্যথায় আপনি টার্মিনাল থেকে এটি আরম্ভ করতে পারেন নিচের নিয়ম অনুযায়ী:

+
/Applications/B2G.app/Contents/MacOS/b2g
+

উইন্ডোজ

+

ডাউনলোড করুন এবং একটি সুবিধাজনক অবস্থানে জিপ ফাইলটি নিষ্কর্ষ করুন। ডাবল ক্লিক করুন b2g.exe এর উপর B2G ডেস্কটপ শুরু করার জন্য ।

+
+

টীকা:লেখার সময়, উইন্ডোজ নেভিগেশন B2G ডেস্কটপ চলমান নামক একটি বিষয় আছে. আপনি এর পরিবর্তে  Firefox OS simulator ব্যবহার করে  দেখতে পারেন ।

+
+

টিপস 

+

আপনি এখন উদাহরণস্বরূপ ডেস্কটপ উইন্ডোতে চলমান ফায়ারফক্স ওএস খেলতে পারেন ।যান এবং খেলেন : ব্রাউজার খুলুন (নীচে ডানদিকের আইকন) এবং একটি ওয়েব পেজ দেখার জন্য, অথবা কয়েক অ্যাপ্লিকেশান খোলার চেষ্টা করুন । আপনি লক্ষ্য করবেন যে কিছু ডিভাইস নির্দিষ্ট কার্যকারিতা আছে — যেমন ডায়ালার, ক্যামেরা, রেডিও ইত্যাদি —সুস্পষ্ট কারণে কাজ করবে না ।

+

B2G ডেস্কটপ এর সঙ্গে নিজেকে স্বাচ্ছন্দ্য করে তুলুন  ; অবশ্যই পড়বেন Using the B2G desktop client যাতে করে আপনি এর কাজ শিখতে পারেন ।

+

এখন বাস্তব চুক্তি করার ক্ষেত্রে, আমরা জাভাস্ক্রিপ্ট ফায়ারফক্স ওএস ভিতর থেকে কল করতে চাই ।

+

ফায়ারফক্স অপারেটিং সিস্টেমের জন্য ডিবাগিং শেল প্রাপ্ত করার পদ্ধতি

+

Marionette  সেলেনিয়াম / WebDriver API-এর উপর ভিত্তি করে চলে,এবং  ডিবাগিং শেল জন্য ভিত্তি প্রদান করে যা ব্যবহার করে স্বয়ংক্রিয় ফায়ারফক্স ওএস পরীক্ষা করা হয় । প্রথমত, marionette client (পাইথন এ লেখা) সেট আপ করতে হবে এবং সেখানে দেওয়া ইনস্টলেশনের নির্দেশাবলী নির্দ্বিধায় অনুসরণ করতে হবে ।

+
+

টীকা:সাম্প্রতিক পরীক্ষা র মাধ্যমে দেখা গিয়েছে যে mozbase এর কিছু নির্দিষ্ট সংস্করণের সঙ্গে সমস্যা থাকতে পারে আপনার । শেষ পরিচিত-কর্মরত Mozbase হল  9ee2de কমিট ।

+
+
+
+
+ টীকা: যেহেতু আপনি নাইটলি বিল্ড ব্যবহার করছেন, আপনার  b2g প্রোফাইল এ (just like in the Firefox browser, all user settings are stored within a profile) ইতিমধ্যে  Marionette, লাইনের মাধ্যমে সক্রিয় হওয়া উচিত ছিল ।
+
+ user_pref("marionette.defaultPrefs.enabled", true); in gaia/profile/prefs.js. যদি না হয় তাহলে আপনি ভুল বিল্ড ব্যবহার করছেন  ।
+
+
+

এই মুহুর্তে, আপনি চিন্তা করতে পারেন পাইথন কনসোল স্পিনিং আপ করতে, marionette ক্লায়েন্ট লাইব্রেরী ইম্পোর্ট করা এবং ডিবাগিং সেশন তৈরি করা , কিন্তু আমরা অন্য কিছু করতে পারি: স্টিফান আরেন্টেজ একটি সহজ জাভাস্ক্রিপ্ট কনসোল তৈরি করেছেন যেটি marionette ক্লায়েন্ট লাইব্রেরীর উপরে রানকরে । সুতরাং, এর জন্য ডাউনলোড করা যাক fxos-repl.py ।

+

আমাদের উদাহরণস্বরূপ,আমরা দূরবর্তী ব্রাউজার অ্যাপ্লিকেশন নিয়ন্ত্রণ করবো ।আপনার মাউস দিয়ে ফায়ারফক্স ওএস হোম পর্দার নীচের অংশের ডানদিকে ব্রাউজার আইকনটি ক্লিক করে এটি আরম্ভ করুন । B2G বাইনারি কি ব্রাউজার অ্যাপ্লিকেশন দেখাচ্ছে ? ভাল । এই নির্দেশটি আপনাকে একটি URL এর লিস্ট দিবে যেখানে বিভিন্ন প্রতিনিধিত্বমূলক অ্যাপ্লিকেশান থাকবে এবং আপনাকে ডিবাগ শুরু করার অনুমতি দিবে ।

+
$ python fxos-repl.py list
+app://homescreen.gaiamobile.org/index.html#root
+app://browser.gaiamobile.org/index.html
+app://keyboard.gaiamobile.org/index.html
+

এখন আসুন ব্রাউজার অ্যাপ্লিকেশন সংযোগ দেয় এবং তা পরীক্ষা করি :

+
$ python fxos-reply.py connect app://browser.gaiamobile.org/index.html
+Connected to app://browser.gaiamobile.org/index.html
+

API টি{{domxref("document.querySelector()")}} ব্যবহার করে {{HTMLElement("menu")}} ট্যাগটি  আইডি toolbar-start সহ খুঁজে বের করতে হবে, এবং  এটির HTML টি দেখতে পারব  :

+
>>> document.querySelector("menu#toolbar-start").outerHTML
+<menu type="toolbar" id="toolbar-start">
+        <form id="url-bar" novalidate="">
+          <input id="ssl-indicator" value="" type="image">
+          <input id="url-input" placeholder="Enter search or address" data-l10n-id="enter-search-or-address" x-inputmode="verbatim" type="text">
+          <input style="background-image: url(&quot;style/images/go.png&quot;);" id="url-button" value="" type="image">
+        </form>
+        <span id="tabs-badge">1<span id="more-tabs">›</span></span>
+        <button id="awesomescreen-cancel-button"></button>
+        <div id="throbber"></div>
+      </menu>
+

এটি আপনার কাছে পরিচিত লাগছে? এটি আক্তি টুল বার যেটির মধ্যে অ্যাড্রেস বার এবং নতুন ট্যাব বার আছে ।

+

এখন শেলটি ব্যবহার করে  কিল্ক করে নতুন ট্যাব বোতাম এ যাওয়া যাক । এইটির আইডি হল  tabs-badge ।

+
>>> document.querySelector("#tabs-badge").click()
+

নতুন ট্যাব ইউআই এখন দেখাবে । অন্য কিছু চেষ্টা করা যাক :

+
>>> alert(location.href)
+

এখন খেলুন !

+

{{Next("Mozilla/Firefox_OS/Security/Intercepting_traffic_using_a_proxy")}}

diff --git a/files/bn/archive/b2g_os/security/index.html b/files/bn/archive/b2g_os/security/index.html new file mode 100644 index 0000000000..3e1070c193 --- /dev/null +++ b/files/bn/archive/b2g_os/security/index.html @@ -0,0 +1,53 @@ +--- +title: নিরাপত্তা +slug: Archive/B2G_OS/Security +translation_of: Archive/B2G_OS/Security +--- +

 নিম্নোল্লিখিত আর্টিকেলগুলোতে ফায়ারফক্স ওএসের নিরাপত্তা সংক্রান্ত বিষয়ে আলোচনা করা হয়েছে। এতে সার্বিক নিরাপত্তা সুবিধা, এ্যাপ্লিকেশন নিরাপত্তা এবং ইন্সটল প্রক্রিয়া নিরাপদ রাখার প্রক্রিয়াও আলোচিত হয়েছে।

+ + + + + + + +
+

ফায়ারফক্স ওএস ডকুমেন্টেশন

+
+
+ ফায়ারফক্স ওএস নিরাপত্তা মডেল
+
+ ফায়ারফক্স ওএসের নিরাপত্তা মডেলের সার্বিক চিত্র।
+
+ ফায়ারফক্স ওএসে এ্যাপ্লিকেশন নিরাপত্তা
+
+ ফায়ারফক্স ওএসের এ্যাপ্লিকেশনসমূহের নিরাপত্তার সার্বিক চিত্র।
+
+ নিরাপদভাবে এ্যাপ্লিকেশন ইন্সটল ও আপডেট করা
+
+ ফায়ারফক্স ওএসের নিরাপদভাবে এ্যাপ্লিকেশন ইন্সটল ও আপডেট করার পদ্ধতি।
+
+ ফায়ারফক্স ওএসে সফটওয়্যার পারমিশন
+
+ কোন ধরণের সফটওয়্যার কি কাজ করার অনুমতি রাখে - সে সংক্রান্ত গাইড
+
+

সবগুলো দেখুন...

+ 		+

কমিউনিটি থেকে সাহায্য

+

আপনি যদি ফায়ারফক্স ওএস নিয়ে কাজ করে থাকেন, কিংবা এ্যাপ্লিকেশন ডেভেলপ করে থাকেন যা ফায়ারফক্স ওএস ডিভাইসে চালাতে ইচ্ছুক, আপনাকে সাহায্য করার জন্য কমিউনিটির কিছু রিসোর্স আছে।

+
    +
  • বুট-টু-গিকো প্রজেক্ট ফোরাম: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}
    • +
+
    +
  • আপনার প্রশ্ন মোজিলার বুট-টু-গিকো আইআরসি চ্যানেলে করুন: #b2g
    • +
+

Don't forget about the netiquette...

+
+ + +
+


+ otta

diff --git a/files/bn/archive/b2g_os/security/intercepting_traffic_using_a_proxy/index.html b/files/bn/archive/b2g_os/security/intercepting_traffic_using_a_proxy/index.html new file mode 100644 index 0000000000..b8f7784890 --- /dev/null +++ b/files/bn/archive/b2g_os/security/intercepting_traffic_using_a_proxy/index.html @@ -0,0 +1,86 @@ +--- +title: প্রক্সি ব্যবহার করে ফায়ারফক্স ওএস ট্রাফিকে বাধাদান +slug: Archive/B2G_OS/Security/Intercepting_traffic_using_a_proxy +tags: + - NeedsReview +translation_of: Archive/B2G_OS/Debugging/Intercepting_traffic_using_a_proxy +--- +

{{PreviousNext("Mozilla/Firefox_OS/Security/Debugging_and_security_testing", "Mozilla/Firefox_OS/Apps/Testing_in_a_privileged_context")}}

+
+

ডিবাগিং এবং সিক্যুরিটি পরীক্ষা সম্পর্কিত নিবন্ধের এই অংশে আমরা দেখব, প্রক্সির SSL সার্টিফিকেট সাদাতালিকাভুক্ত করা সহ প্রক্সি ব্যাবহার করে ফায়ারফক্স ওএস ট্রাফিককে বাধাদান করা (B2G ডেস্কটপ ও ডিভাইসে), যাতে করে যে কেও ফায়ারফক্স ওএস এর মাধ্যমে HTTPS যোগাযোগে বাধাদান বা রি-এনক্রিপ্ট করতে পারে । আপনি যদি B2G ডেস্কটপ ব্যাবহার করে থাকেন, তাহলে এটি ইন্সটল করা ও ম্যারিওনেট জাভাস্ক্রিপ্ট ডিবাগিং শেল যুক্ত করার পদ্ধতি Debugging and security testing with Firefox OS –এ বর্ণিত আছে ।

+
+

এইচটিএমএল ও জাভাস্ক্রিপ্ট নির্মিত অ্যাপ নিয়ে কাজ করতে গেলে আপনি লক্ষ্য করবেন যে, তথ্য আদান-প্রদানের কাজে ব্যবহৃত API সহ অনেক আকর্ষণীয় কাজ সেখানে আছে । তার মানে, এই অ্যাপগুলো যে HTTP অনুরোধ সম্পাদন করে, সেগুলো লক্ষ্য করা বেশিরভাগ সময়ই গুরুত্বপূর্ণ ।

+

ZAP পরিচিতি

+

ZAP দিয়েই শুরু করা যাক । ZAP হল একটি বাধাদানকারী প্রক্সি, যা সহজে ডিবাগিংএর জন্য HTTPS ট্রাফিককে বাধা দেয় এবং পুনরায় এনক্রিপ্ট করে । এটি ডাউনলোডের জন্য ZAP homepage এর উপরের বড় নীল বাটনটি ক্লিক করুন । আপনি যদি আরেকটি প্রক্সি ব্যাবহার করতে চান (যেমন Burp Proxy), করতে পারেন ; কারণ পদ্ধতিটি দুইক্ষেত্রেই কাজ করবে ।

+

ZAP সার্টিফিকেট

+

এখন, আপনি যে প্রক্সিই ব্যাবহার করুন না কেন, এটির সার্টিফিকেটটি একটি ফাইলে এক্সপোর্ট করুন এভাবে owasp_zap_root_ca.cer (go in Tools > Options > Dynamic SSL Certificates > Save)। যখন ZAP প্রথম চালু হবে, এটি একটি একবছর মেয়াদী সার্টিফিকেট তৈরি করে । আপনি Dynamic SSL Certificates অংশ থেকেও নতুন একটি তৈরি করতে পারেন ।

+

 

+

লোকাল প্রক্সি

+

আপনি যদি B2G  ডেস্কটপ ব্যাবহারকারি হয়ে থাকেন, তাহলে ZAP যেন localhost অনুসরণ না করে আপনার নির্দিষ্ট বৈশিষ্ট্যের IP অ্যাড্রেস (ইথারনেট বা ওয়াই-ফাই) অনুসরণ করে, এটি আপনাকে নিশ্চিত করতে হবে । কারণ, B2G ডেস্কটপের localhost আপনার ডেস্কটপ কম্পিউটারটিকে নির্দেশ করে না, বরং B2G বাইনারির নিজস্ব কোন কিছুকে নির্দেশ করে । উদাহরণস্বরূপ, আমরা আমাদের IP হিসেবে 10.264.1.5 ব্যাবহার করব ।

+

আপনি যদি একটি প্রকৃত ডিভাইস নিয়ে কাজ করেন, তাহলে আপনার ফোন এবং কম্পিউটার যেন একই নেটওয়ার্কে/VLAN-এ যুক্ত থাকে এবং নিজেদের মধ্যে যোগাযোগ রাখতে পারে, সেটি নিশ্চিত করতে হবে (সন্দেহ হলে একটি ডিভাইসের IP অন্য ডিভাইস থেকে পিং করার চেষ্টা করতে পারেন) ।

+

 

+

সার্টিফিকেট ডেটাবেইজ তৈরি

+

সার্টিফিকেট গ্রহণ করার প্রক্রিয়াটি সেটিংসে সম্পন্ন হয়, যেগুলো প্রোফাইলে সংরক্ষিত থাকে । এখানে ফায়ারফক্স প্রোফাইলসের উপর একটি সংক্ষিপ্ত সূচনা দেয়া হল :

+
    +
  1. কমান্ড লাইনে –P অপশন ব্যাবহার করে ফায়ারফক্স প্রোফাইল ম্যানেজার চালু করুন এবং ফায়ারফক্স যেন কোন বর্তমান সেশন ব্যাবহার না করে, তা নিশ্চিত করুন(-no-remote): +
      +
    • +

      লিনাক্সে আপনাকে যা করতে হবে :

      + 
      firefox -P -no-remote
      +
      • +
    • +

      ·ম্যাক ওএস এক্সে :

      + 
      /Applications/Firefox.app/Contents/MacOS/firefox -P -no-remote
      +
      • +
    +
    2. +
  2. এবার “zapped.” নামে একটি প্রোফাইল তৈরি করুন । সার্টিফিকেট সেটিংসে যান - Edit > Preferences > Advanced > Encryption > View Certificates > Import। আপনার প্রক্সি দিয়ে তৈরিকৃত owasp_zap_root_ca.cer ফাইলটি সিলেক্ট করুন এবং ফায়ারফক্স যেন ওয়েবসাইট শনাক্তের কাজে এই CA কে ট্রাস্ট করে, সেই নির্দেশ দিন (এটি সত্যিকার অর্থেই শুধু এই প্রোফাইলের জন্য বৈধ) ।
    3. +
  3. ফায়ারফক্সের মাধ্যমে সার্টিফিকেট ডেটাবেইজ তৈরি হয়ে যাওয়ায় আমরা এই ডেটাবেইজটি এখন B2G প্রোফাইল তৈরির কাজে ব্যবহার করতে পারি । আপনার ফায়ারফক্স প্রোফাইল ডিরেক্টরির নামটি একটি দৈবচয়িত স্ট্রিং, যেটি zapped দিয়ে শেষ হয় । এর লোকেশন অপারেটিং সিস্টেমের উপর নির্ভর করে ; এটি কোথায় পাওয়া যায়, তার বিস্তারিত জানতে Runtime Directories এ যান ।
    4. +
  4. B2G ডেস্কটপের জন্য শুধুমাত্র প্রোফাইলের সার্টিফিকেট ডেটাবেইজ ফাইল cert8.db টি লাগবে । এটিকে B2G প্রোফাইল ডিরেক্টরি b2g/gaia/profile/ তে কপি করুন ।
    5. +
  5. ডিভাইসে, cert9.db ফাইলটি ডিভাইসের প্রোফাইল ডিরেক্টরিতে কপি করুন ।
    + 
    $ adb shell stop b2g
+$ adb push cert9.db /data/b2g/mozilla/*.default
    +
    6. +
+
+

দ্রষ্টব্য : এটি বর্তমান ফাইলকে প্রতিস্থাপিত করবে ।

+
+

 

+

B2G সেট আপ

+

পরবর্তী ধাপটি হল ZAPকে সকল নেটওয়ার্ক যোগাযোগের জন্য ডিফল্ট করে দেয়া । ফায়ারফক্স ওএস ইউজার ইন্টারফেসে সার্টিফিকেট সেটিংসের ন্যায় প্রক্সি সেটিংস এখনো অন্তর্ভুক্ত নয় ।

+

 

+

B2G ডেস্কটপে

+

এই কাস্টম সেটিংস আপনাকে প্রেফারেন্সেস ফাইলে অ্যাপেন্ড করতে হবে , b2g/gaia/profile/prefs.js:

+
user_pref("network.proxy.backup.ftp", "10.264.1.5");
+user_pref("network.proxy.backup.ftp_port", 8080);
+user_pref("network.proxy.backup.socks", "10.264.1.5");
+user_pref("network.proxy.backup.socks_port", 8080);
+user_pref("network.proxy.backup.ssl", "10.264.1.5");
+user_pref("network.proxy.backup.ssl_port", 8080);
+user_pref("network.proxy.ftp", "10.264.1.5");
+user_pref("network.proxy.ftp_port", 8080);
+user_pref("network.proxy.http", "10.264.1.5");
+user_pref("network.proxy.http_port", 8080);
+user_pref("network.proxy.no_proxies_on", "");
+user_pref("network.proxy.share_proxy_settings", true);
+user_pref("network.proxy.socks", "10.264.1.5");
+user_pref("network.proxy.socks_port", 8080);
+user_pref("network.proxy.ssl", "10.264.1.5");
+user_pref("network.proxy.ssl_port", 8080);
+user_pref("network.proxy.type", 1);
+
+
+

দ্রষ্টব্য : আমার আইপি অ্যাড্রেস 10.264.1.5 আপনারটি দিয়ে প্রতিস্থাপিত করতে ভুলবেন না, এবং আপনার প্রক্সি যদি 8080 পোর্টে কাজ না করে, আপনাকে এটি ফাইলেও পরিবর্তন করতে হবে ।

+
+

এখন আপনি প্রস্তুত ! B2G ডেস্কটপ পুনরায় চালু করুন এবং পরীক্ষামূলক ব্রাউজিং করুন । ZAP এ নেটওয়ার্ক ট্রাফিক দেখা যাবে ।

+

 

+

ডিভাইসে

+
+

এই পদ্ধতিগুলো ডিভাইসে আর কাজ নাও করতে পারে ।

+
+

আপনাকে /data/b2g/mozilla/*.default ফাইলটি নবায়ন করতে হবে:

+
$ adb pull /data/b2g/mozilla/*.default/prefs.js
+

ফাইলের শেষে, উপরের দ্বিতীয় অংশে উল্লেখিত কাস্টম সেটিংস যোগ করুন এবং B2G রিস্টার্ট দিন (B2G প্রক্রিয়া থেমে যাওয়ার কথা, যদি আপনি cert9.db পুশ করার নিয়ম অনুসরণ করতেন) :

+
$ adb push pref.js /data/b2g/mozilla/*.default
+$ adb shell start b2g
+

{{PreviousNext("Mozilla/Firefox_OS/Security/Debugging_and_security_testing", "Mozilla/Firefox_OS/Apps/Testing_in_a_privileged_context")}}

diff --git a/files/bn/archive/b2g_os/simulator/index.html b/files/bn/archive/b2g_os/simulator/index.html new file mode 100644 index 0000000000..28a2d4e053 --- /dev/null +++ b/files/bn/archive/b2g_os/simulator/index.html @@ -0,0 +1,91 @@ +--- +title: ফায়ারফক্স ওএস সিমুলেটর +slug: Archive/B2G_OS/Simulator +tags: + - Apps + - Firefox OS + - Tools + - 'l10n:priority' +translation_of: Archive/B2G_OS/Simulator +--- +
+

এই পাতাটিতে ফায়ারফক্স ওএস ১.২ বা তার পরের ভার্শন গুলোর ডেভেলপারদের জন্য ফায়ারফক্স ওএস সিমুলেটর এর বিস্তারিত বর্ণনা করা হয়েছে। যদি আপনি ফায়ারফক্স ওএস ১.১ এর জন্য অ্যাপ ডেভেলপ করতে চান, তাহলে ফায়ারফক্স ওএস ১.১ সিমুলেটর পাতাটি দেখুন।

+
+ +

ফায়ারফক্স ওএস সিমুলেটর হচ্ছে ফায়ারফক্স ওএস এর উচ্চতর স্তরের সংস্করণ, যেটা একটি ফায়ারফক্স ওএস ডিভাইস সিমুলেট করে, কিন্তু ডেস্কটপে চলে। এর অর্থ হচ্ছে, অনেক ক্ষেত্রে আপনাকে আপনার অ্যাপ টেস্ট বা ডিবাগ করার জন্য বাস্তব ডিভাইসের প্রয়োজন হবে না। এটি ফায়ারফক্স ডিভাইসের সমান একটি উইন্ডোতে চলে, যেটার মধ্যে ফায়ারফক্স ওএস ইউজার ইন্টারফেস এবং বিল্ট-ইন অ্যাপস আছে। আর এটি ফায়ারফক্স ওএস এর অনেক ডিভাইস এপিআই ও সিমুলেট করে।

+ +

সিমুলেটর টি একটি ফায়ারফক্স অ্যাড-অন হিসেবে প্যাকেজ করে বিতরণ করা হয়। একবার আপনি এটা ডাউনলোড করে ফায়ারফক্স ব্রাউজারে ইন্সটল করার পর, আপনি এটা চালাতে পারবেন, অ্যাপ ম্যানেজার ব্যবহার করে বিভিন্ন অ্যাপস ইন্সটল করতে পারবেন, ডেভেলপার টুলস যুক্ত করতে পারবেন।

+ +

ইন্সটলেশন

+ +

সিমুলেটর টি ইন্সটল করার জন্য নিচের বাটনটিতে ক্লিক করুন। এখানে আপনি একাধিক সংস্করণ পাবেন। সর্বোচ্চ সুবিধার জন্য সবগুলো ইন্সটল করতে পারেন।

+ +

ইন্সটল সিমুলেটর

+ +

সিমুলেটর চালু করতে অ্যাপ ম্যানেজার ডকুমেন্টেশন এর নির্দেশনা পড়ুন। একবার চালু হয়ে গেলে আপনি সত্যিকার ডিভাইসের মত এটিকে ব্যবহার করতে পারবেন।

+ +

সিমুলেটর ইউজার ইন্টারফেস

+ +

সিমুলেটর টি আলাদা উইন্ডো হিসেবে চালু হয়, আর এর আকার হয় ৩২০x৪৮০ পিক্সেল। টাচ ইভেন্ট সিমুলেট করার জন্য আপনি মাউস দিয়ে ক্লিক করতে পারেন। আর ড্র্যাগ ফিচারের জন্য মাউসের বাম বোতাম চেপে ধরে ড্র্যাগ করতে পারেন। তাই সাধারন ফোনের মত ডানে-বামে ড্র্যাগ করে বিল্ট-ইন অ্যাপ সহ আপনার ইন্সটল করা অ্যাপ গুলো দেখতে পাবেন।

+ +

+ +

সিমুলেটরের নিচের দিকে টুলবারের মধ্যে দুইটি বাটন আছেঃ

+ + + +

সিমুলেটরের সীমাবদ্ধতা

+ +

মনে রাখবেন, ফায়ারফক্স ওএস সিমুলেটর একটি নিখুঁত সিমুলেটর নয়।

+ +

হার্ডওয়্যার সীমাবদ্ধতা

+ +

স্ক্রিন সাইজ ছাড়া, সিমুলেটর হার্ডওয়্যারের সীমাবদ্ধতা যেমন ব্যবহার যোগ্য মেমরি অথবা CPU এর গতি প্রদর্শন করে না।

+ +

অডিও/ভিডিও কোডেক সমূহ

+ +

নিচে উল্লেখিত কোডেক গুলো হার্ডওয়্যার অ্যাক্সিলারেটেড ডিকোডিং এর উপর নির্ভর করে; তাই এগুলো এখন সমর্থন করা হচ্ছে নাঃ

+ + + +

এর মানে হচ্ছে, যেসব অডিও ও ভিডিও এসব কোডেকের উপর নির্ভর করে, সিমুলেটর ব্যবহার করে আপনি অ্যাপ এর মধ্যে থাকা সেসব অডিও/ভিডিও বা ইউটিউবের মত সাইট টেস্ট করতে পারবেন না।

+ +

অসমর্থিত API সমূহ

+ +

নির্দিষ্ট কিছু API যেগুলো ডিভাইসের হার্ডওয়্যার এর উপর নির্ভর করে, সেগুলোও সিমুলেটরে কাজ করবে না। কারণ সিমুলেটরে আপনি সেসব ডিভাইস পাচ্ছেন না। তবে আমরা প্রতিদিনই সিমুলেটরে কিছু না কিছু সমর্থন যুক্ত করছি, যেমনঃ জিওলোকেশন। আশা করছি ভবিষ্যতে আমরা আরও ফিচার যুক্ত করতে পারব। যাইহোক, এ মুহূর্তে নিচে উল্লেখিত API গুলো সমর্থিত নয়। এগুলো ব্যবহার করে সিমুলেটরে টেস্ট করলে ভুল ফলাফল পেতে পারেনঃ

+ + + +

সাহায্য পাওয়া

+ +

যদি আপনার কোন প্রশ্ন থাকে, তাহলে আমাদের dev-developer-tools মেইলিং লিস্ট এ মেইলের মাধ্যমে জিজ্ঞেস করার চেষ্টা কর্মরতে পারেন। অথবা irc.mozilla.org এর #devtools চ্যানেলেও প্রশ্ন করতে পারেন।

+ +

যেভাবে ভারবোস লগিং সক্রিয় করবেন

+ +

ওয়েব কনসোল এ আপনি আপনার অ্যাপ থেকে লগ করা মেসেজ গুলো দেখতে পাবেন। এগুলো আপনি অ্যাপ ম্যানেজার ব্যবহার করে আপনার অ্যাপ এর সাথে যুক্ত করতে পারবেন। যদি আপনি অ্যাপ চালু হওয়ার মুহূর্তের মেসেজগুলো ধরতে চান, অর্থাৎ কনসোল কানেক্ট হওয়া এবং কাজ শুরু করার ঠিক আগ মুহূর্তের মেসেজ গুলো পেতে চাইলে আপনি সিমুলেটরের মধ্যে ভারবোস লগিং চালু করতে পারেন।

+ +

about:config ভিজিট করে নতুন প্রেফারেন্স তৈরি করুন। সিমুলেটরের প্রত্যেক ভার্শনের জন্য preference name আলাদা হবেঃ

+ + + +

এটাকে স্ট্রিং ভ্যালু "all" এ সেট করুন, অ্যাড-অন ম্যানেজারে গিয়ে অ্যাড-অন টিকে ডিজঅ্যাবল করে আবার এনাবল করুন। এরপর থেকে সিমুলেটরের অতিরিক্ত অপারেশন সম্পর্কিত মেসেজ গুলো ব্রাউজারের কনসোলে দেখা যাবে।

diff --git a/files/bn/archive/b2g_os/simulator_vs_emulator_vs_device/index.html b/files/bn/archive/b2g_os/simulator_vs_emulator_vs_device/index.html new file mode 100644 index 0000000000..00006db58f --- /dev/null +++ b/files/bn/archive/b2g_os/simulator_vs_emulator_vs_device/index.html @@ -0,0 +1,54 @@ +--- +title: সিমুলেটর vs. ইমুলেটর vs. ডিভাইস +slug: Archive/B2G_OS/Simulator_vs_Emulator_vs_Device +tags: + - Beginner + - Firefox OS + - First Time in Firefox OS + - Testing +translation_of: Archive/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia +--- +

ফায়ারফক্স ওএসে কাজ করা কিংবা এর ডেভেলোপ করার জন্য ফায়ারফক্স ওএসের মত পরিবেশ পাওয়ার তিনটি উপায় আছে। এগুলো হলো ফায়ারফক্স ওএস সিমুলেটর ,ফায়ারফক্স ওএস ইমুলেটর এবং ফায়ারফক্স ওএস সমর্থন করে এমন ডিভাইসে ফায়ারফক্স ওএস।

+

ব্যবহারকারীরা সাধারণত ফায়ারফক্স ওএস শুধু  ডিভাইসের মাধ্যমেই পাবে কিন্তু  সিমুলেটর অথবা ইমুলেটরের মাধ্যমে ফায়ারফক্স ওএস ডেভেলোপ করতে আগ্রহীদের একটি বিকল্প সুযোগ তৈরি করে দেয়। এধরণের বেশিরভাগ ডেভেলাপারদের জন্য ইমুলেটর অথবা সিমুলেটরই যথেষ্ট হবে কিন্তু এর সাথে এটাও মনে রাখা প্রয়োজন যে আসল ডিভাইসে যেরকম আচরন পাওয়া যাবে তার তুলনায় সিমুলেটর অথবা ইমুলেটর থেকে হয়তো অসম্পূর্ণ বা ভিন্ন আচরন পাওয়া যাবে। তাই , নিচে এগুলোর বিবরন দেয়া আছে যার মাধ্যমে আপনি জেনে নিতে পারেন তিনটির মধ্য থেকে কোনটি আপনার জন্য ভাল। 

+

ফায়ারফক্স ওএস সিমুলেটর

+

ফায়ারফক্স ওএস সিমুলেটর হচ্ছে  ফায়ারফক্স ব্রাউজারের জন্য তৈরি  করা একটি অ্যাড-অন। এটি মূলত অ্যাপ ডেভেলাপারদের কাজ করার সুবিধার জন্য তৈরি হয়েছে। 

+

সুবিধাসমূহঃ

+ +

অসুবিধাসমূহঃ

+ +

ডেস্কটপ ফায়ারফক্স ক্লায়েন্ট

+

ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট আপনাকে গেকো নির্ভর পরিবেশে আসল ডিভাইসের মত করে গাইয়া এবং ওয়েব অ্যাপস চালাতে দেয়। এটি B2G ডেস্কটপ ক্লায়েন্ট  নামে ও পরিচিত। এটি ডিভাইস হার্ডওয়ারের মত না, তাই ডিভাইস এপিআই পরীক্ষা করার জন্য এটি পর্যাপ্ত নয় , এমনকি আসল ডিভাইসে পরীক্ষা করার মত বিষয়ের বিকল্পও এটি নয়। তারপরেও , এতে কনটাক্ট এবং সেটিংস এপিআই এর মত এমন কিছু এপিআই রয়েছে যা ফায়ারফক্সে ও পাওয়া যায় না। সেজন্য , যখন আপনি অ্যাপ ডেভেলাপমেন্ট করতবেন কিংবা গাইয়া ইউজার ইন্টারফেসে কাজ করবেন , তখন এটি আপনার জন্য অনেক সহায়ক হবে। 

+

ফায়ারফক্স ওএস ইমুলেটর

+

ফায়ারফক্স ওএস ইমুলেটর এমন একটি প্রোগ্রাম যা ফায়ারফক্স ওএস এর সোর্স কোড থেকে তৈরী হয়েছে এবং এটি ডেক্সটপ মেশিনে চলে। সাধারণত যে সব ডেভেলপারদের সিমুলেটরের চেয়েও বেশি পরিপূর্ন মানের ফায়রাফক্স ওএসের পরিবেশ প্রয়োজন হয়, তারা কাজ করার জন্য এটিকে নির্বাচন করবেন।  (সম্ভব হলে অপেরা মোবাইল ইমুলেটরটি দেখুন)

+

সুবিধাসমূহঃ

+ +

অসুবিধাসমূহঃ

+ +

কোন ডিভাইসে ফায়ারফক্স ওএস 

+

সাধারণত সে সব ডেভেলাপার  ফায়ারফক্স ওএস এর কোডের মূলে (গঙ্ক , গেকো) কাজ করছেন অথবা যে সব ডেভেলাপার  তাদের অ্যাপসগুলো রিয়েল ডিভাইসে পরীক্ষা করতে চান তাদের জন্য এটা সবচেয়ে ভালো উপায়।  

+

সুবিধাসমূহঃ

+ +

অসুবিধাসমূহঃ

+ diff --git a/files/bn/archive/b2g_os/treeherder/index.html b/files/bn/archive/b2g_os/treeherder/index.html new file mode 100644 index 0000000000..49a1f6725b --- /dev/null +++ b/files/bn/archive/b2g_os/treeherder/index.html @@ -0,0 +1,50 @@ +--- +title: Treeherder +slug: Archive/B2G_OS/Treeherder +tags: + - Automation + - Jenkins + - Treeherder + - tests +translation_of: Archive/B2G_OS/Automated_testing/Treeherder +--- +
+

Treeherder হল সেটাই যেখানে বিল্ড বোটে ধারাবাহিক কাজ করার জন্য টেস্ট রেসাল্ট রান করার টেস্ট রিপোর্ট দেয়া হয়ে থাকে। আমরা সকল চেষ্টা এবং ট্রাঙ্ক শাখা এর সাথে b2g-inbound,মোযিলা সেন্ট্রাল,এবং Firefox OSএর প্রকাশ পাওয়া শাখার বিপক্ষে টেস্ট বিল্ড করি এবং রান করি।এই অনুচ্ছেদ আমাদের একটী বিস্তারিত ব্যাখা দিবে ট্রিহারডার এর সম্পর্কে এবং উপকারী টারমেনোলজী প্রদান করবে।

+
+
+

নোটঃদেখুন Test Execution Chart টেস্ট কোথায় বেশি করে রান করে তা খুজে বের করার জন্য।

+
+

Gaia-Try: Git রিকুয়েস্ট পুল করে এবং Treeherder

+

mozilla-b2g এর গায়া রেস্পেটরির বিপক্ষে যখন একটি পুল রিকুয়েস্ট করে থাকে , Mozilla সেই শাখা তুলে নেয় এবং রান করে থাকে Gaia suite এর টেস্ট ইহার বিপক্ষে ।কিভাবে Travis কাজ করে তা খুব একই রকম এর সাথে।

+

 Try Server Hook  আপনার পুল্ল রিকুয়েস্টে একটি লিঙ্কের সাথে Treeherder জবে কমেন্ট করে থাকবে যা আপনার পুল্ রিকুয়েস্টের বিপক্ষে কাজ করে থাকে।এখান থেকে আপনি আপনার প্যাচের স্থায়িত্ব পুনরায় দেখতে পারেন এবং সীমা টানার জন্য এটা উপযোগী।

+

Firefox OS  গঠন Device এবংand DesktopB2G এর জন্য

+

প্রতিটি ক্ষেত্রে, Treeherder  উদ্যোগ নিবে কিছু ভিন্ন ডিভাইসের জন্য বিল্ড তৈরি করতে,Hamachi এবং Flameএবং আরো  desktopb2g বিল্ড যা linux64 এবং macos64 এর জন্য।

+

GIP Device টেস্ট করে Jenkins রিপোর্ট করতে

+

বিভিন্ন কারণে (বিশেষ করে টেস্ট রান টাইমে) ডিভাইস টেস্টটি Treeherder এর সাথে সঠিক ভাবে পরিষ্কার হতে পারেনা।এর পরিবর্তে,একটি বিদ্যমান  Jenkins কঞ্জিউম Treeherder এর বিল্ড এবং ডিভাইস টেস্ট রান করে থাকে,কিন্তু কম কম্পন এবং কম ট্রি গুলো  এর সাথে।এই ফলাফল এবং আর্টিফ্যাক্টস আউটপুট রিপোর্ট এর মত এবনহ লুকানো লগক্যাট পুনরায় রিপোর্টেড।আপনার  Treeherde এর "Show hidden jobs" বাটনে ক্লিক করুন রেসাল্ট দেখতে।

+

Treeherder Try jobs রান করা Gaia গঠন এর বিপক্ষে

+

গেটকো প্যাচ টেস্ট করার জন্য Firefox OS এর বিপক্ষে এবংগায়া আপনি  Try তে স্বাভাবিক ভাবে পুশ করতে পারেন কিন্তু ব্যবহার করেন সঠিক ট্রাইচুসার সিন্টেক্স যা  Firefox OS এবং গায়া টেস্ট রান করা নিশ্চিত করে থাকে।একটি বৃদ্ধিকারক উপকারী হল আপনি গেটকো এবং গায়া প্যাচ টেস্ট করতে পারেন pointing Try to your own Gaia fork এর দ্বারা একযোগে এহা ব্যবহার করে ।যদি আপনি সরাসরি এটা ব্যবহার করতে না চান ,আপনি  moz-git-tools ব্যবহার করতে পারেন।
+
+ যদি আপনি কখন  Try তে পুশ না করেন,আপনাকে প্রথমে  How to push to Try এর প্রধান ধারনা পড়তে হবে।
+
+ সকল ট্রাই জবস এর মত,এগুলোর দরকার লেভেল ১  commit access।যদি আপনি সকল টেস্ট B2G Desktop বিল্ড রান করতে চান আপনার কাস্টম গায়া ফর্কের সাথে,সঠিক ট্রাইচুসার সিন্টেক্স হবে নিচের মতঃ

+
try: -b o -p linux64_gecko,linux32_gecko,macosx64_gecko -u all -t none
+

Treeherder glossary

+

এই শখা কিছু সাধারন কাজ এবং সিন্টেক্স এর লিস্ট করে থাকে।

+

Builds এর ধরণ

+ +

টেস্টের ধরন

+ +

হ্যাকিং Treeherder এর উপরে

+

https://wiki.mozilla.org/Sheriffing/TBP  তে কিছু ডেভেলপমেন্ট নোট এবং সোর্স কোড আছে।

diff --git a/files/bn/archive/b2g_os/troubleshooting/index.html b/files/bn/archive/b2g_os/troubleshooting/index.html new file mode 100644 index 0000000000..0bac3fec18 --- /dev/null +++ b/files/bn/archive/b2g_os/troubleshooting/index.html @@ -0,0 +1,28 @@ +--- +title: Firefox OS সম্পর্কিত সমস্যার সমাধান +slug: Archive/B2G_OS/Troubleshooting +tags: + - B2G + - Firefox OS + - Mobile + - NeedsReview + - ফায়ারফক্স ওএস + - বি২জি + - মোবাইল +translation_of: Archive/B2G_OS/Troubleshooting +--- +
+

ফায়ারফক্স অপারেটিং সিস্টেম ব্যবহারের সময় আপনি যেসব সাধারন সমস্যার সম্মুখীন হতে পারেন, তার সমাধানের উপায় এই নিবন্ধটিতে বর্ণনা করা হয়েছে। আপনি চাইলে এখানে আরও তথ্য যোগ করতে পারেন।

+
+
+

লক্ষ্য করুনঃ আপনি আপনার ডিভাইসের জন্য udev সেটিংস কনফিগার করেছেন, এটা ধরে নিয়ে এই নির্দেশনা গুলো দেয়া হয়েছে।

+
+

নেটওয়ার্ক সংশ্লিষ্ট সমস্যা

+

যদি আপনার ওয়াই-ফাই নেটওয়ার্কে সংযুক্ত হতে সমস্যা হয়, তবে আপনি আপনার ডিভাইস থেকে ওয়াই-ফাই কনফিগারেশন ফাইলটি মুছে ফেলতে পারেন। এটা করার জন্য আপনাকে লিখতে হবেঃ

+
adb shell rm /data/misc/wifi/wpa_supplicant.conf
+adb reboot
+
+

ফোন ব্রিক হয়ে গেলে

+

যদি আপনি ফোনটি ব্রিক করে ফেলেন, যেমনঃ ভুল ইমেজ ফ্ল্যাশ করার চেষ্টা করছেন, বুটলোডার পুনরায় চালু করতে চেষ্টা করছেন ( আপনার ফোনের উপর নির্ভর করেঃ ফাস্টবুট বা হেইমডাল)। নির্দিষ্ট সিকোয়েন্সটি ফোনের উপর নির্ভর করে পরিবর্তিত হয়। ইউএসবি কেবল খুলে, ব্যাটারি খুলে আবার লাগিয়ে চেষ্টা করতে পারেন। ইউনাগি এবং ওটোরো এর জন্য পাওয়ার এবং ভলিউম বাড়ানোর বাটন একসাথে কয়েক সেকেন্ডের জন্য চেপে ধরে থাকুন, যতক্ষণ না স্প্ল্যাশ স্ক্রীন দেখা যাচ্ছে। ফাস্টবুট ডিভাইস (অথবা কিছু সামসাং ফোনের জন্য হেইমডাল) ব্যবহার করে নিশ্চিত হোন যে, আপনার ফোন এখন বুটলোডার মোডে আছে। যখন আপনি দেখতে পাবেন, যে আপনার ফোন ফাস্টবুট ডিভাইস ব্যবহার করছে, আপনি তখন ইউনাগি এর জন্য আপনার ইমেজ ফ্ল্যাশ করতে ./flash.sh ব্যবহার করতে পারেন।

+

লাল বাতি জ্বললে নিভলে (ওটোরো/ইউনাগি)

+

এর মানে হচ্ছে ফোন বুট করার জন্য যে পরিমান চার্জ থাকা প্রয়োজন, তা নেই। আপনি ফোনটিকে কিছু সময়ের জন্য (যতক্ষণ না লাল বাতি জ্বলা একেবারে থেমে যায়) চার্জে দিতে পারেন, অথবা ইউএসবি কেবল খোলার পর ব্যাটারি খুলে, তারপর আবার ইউএসবি কেবল লাগিয়ে ব্যাটারি লাগিয়ে দেখতে পারেন।

diff --git a/files/bn/archive/b2g_os/using_the_app_manager/index.html b/files/bn/archive/b2g_os/using_the_app_manager/index.html new file mode 100644 index 0000000000..42575c4c01 --- /dev/null +++ b/files/bn/archive/b2g_os/using_the_app_manager/index.html @@ -0,0 +1,279 @@ +--- +title: অ্যাপ ম্যানেজার ব্যবহার করা +slug: Archive/B2G_OS/Using_the_App_Manager +tags: + - App Manager + - Apps + - Debugging + - Firefox OS + - simulator + - অ্যাপ + - অ্যাপ ম্যানেজার + - ফায়ারফক্স ওএস + - সিমুলেটর +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +
+

অ্যাপ ম্যানেজার হল ফায়ারফক্সের ডেস্কটপ সংস্করণের জন্য একটি নতুন টুল, যা সরাসরি ব্রাউজার থেকেই আপনার ফায়ারফক্স ওএস ফোন কিংবা ফায়ারফক্স ওএস সিম্যুলেটরে HTML5 ওপেন ওয়েব অ্যাপ পরীক্ষা, ডেপ্লয় এবং ভুল বের করতে সাহায্য করবে অনেকগুলো সাহায্যকারী টুলসের মাধ্যমে।

+ +

এই অ্যাপ ম্যানেজারটি যেসব ডেভেলপার ১.২ বা পরের সংস্করণের জন্য অ্যাপ বানাতে চান তাদের জন্যই। আপনি যদি ১.১ সংস্করণের জন্য অ্যাপ বানাতে চান তাহলে ফায়ারফক্স ওএস ১.১ সিমুলেটর দেখুন।

+
+ +

{{EmbedYouTube("z1Bxg1UJVf0")}}

+ +

অ্যাপ ম্যানেজারটি যেসব অংশ থাকেঃ

+ + + +

দ্রুত সেটআপ করাঃ

+ +

এই বিভাগটি দ্রুত আপনাকে কাজ শুরু করার উপযোগী করে তোলার জন্য ডিজাইন করা হয়েছে। যদি আপনার বিস্তারিত তথ্যের প্রয়োজন হয়, তবে সরাসরি {{ anch("Device and system configuration") }} অংশে চলে যেতে পারেন। এবং {{ anch("Troubleshooting") }} অংশটিও দেখতে পারেন। এটি আপনাকে সম্ভাব্য সমস্যা সমাধানে সহায়তা করবে।

+ +
    +
  1. নিশ্চিত হয়ে নিন যে আপনার ফায়ারফক্স ডেস্কটপ ২৬ বা তার পরবর্তী সংস্করণ ইন্সটল করা আছে।
    2. +
  2. অ্যাপ ম্যানেজার চালু করুন (URL বারে about:app-manager লিখে এন্টার চাপতে হবে)
    3. +
  3. যদি আপনার বাস্তব ডিভাইস না থাকেঃ +
      +
    1. ফায়ারফক্স ওস সিমুলেটর ইন্সটল করুন।
      2. +
    2. অ্যাপ ম্যানেজারের নিচের টুলবারে Start Simulator লেখাটির উপর ক্লিক করুন। তারপর আপনার ইন্সটল করা সিমুলেটরের নামের উপর ক্লিক করুন।
      3. +
    +
    4. +
  4. যদি আপনার একটি বাস্তব ডিভাইস থাকেঃ +
      +
    1. নিশ্চিত করুন আপনার ডিভাইসে ফায়ারফক্স ওএস ১.২ বা তার পরবর্তী সংস্করণ ইন্সটল করা আছে।
      2. +
    2. উইন্ডোজ কম্পিউটারে আপনার ফোন নির্মাতার দেয়া ড্রাইভার গুলো ইন্সটল করে নিন।
      3. +
    3. আপনার ডিভাইসের সেটিংসে গিয়ে স্ক্রিনলক নিষ্ক্রিয় করে নিন (Settings > Screen Lock) এবং রিমোট ডিবাগিং চালু করে নিন (Settings > Device information > More information > Developer)
      4. +
    4. ফায়ারফক্স ডেস্কটপে ADB হেল্পার অ্যাড-অন ইন্সটল করে নিন।
      5. +
    5. ডিভাইসকে পিসির সাথে একটি USB কেবলের মাধ্যমে যুক্ত করুন।
      6. +
    6. অ্যাপ ম্যানেজারের নিচের টুলবারে আপনার ডিভাইসের নাম দেখতে পাবেন। ক্লিক করুন।
      7. +
    +
    5. +
  5. বটম বারটি "Connected to: xxx" দেখাবে।
    6. +
  6. Apps প্যানেলে ক্লিক করুন এবং একটি অ্যাপ (প্যাকেজ অথবা হোস্টেড) অ্যাড করুন।
    7. +
  7. Refresh বাটন আপনার অ্যাপ কে যাচাই করবে এবং সিমুলেটর/ডিভাইসে ইন্সটল করবে।
    8. +
  8. Debug বাটন চলতি অ্যাপটির সাথে ডেভেলপার টুলসকে যুক্ত করবে।
    9. +
  9. আপনার সমস্যা হলে {{ anch("Troubleshooting") }} বিভাগটি দেখতে পারেন।
    10. +
+ +

ডিভাইস এবং সিস্টেম কনফিগারেশন

+ +

অ্যাপ ম্যানেজার ব্যবহারের সময় সর্বপ্রথম যে কাজটি করতে হবে, তা হলঃ আপনার সিস্টেম এবং ফোন সঠিকভাবে সেটআপ করা হয়েছে। এই অংশটিতে সকল আবশ্যক ধাপের বর্ণনা করা হয়েছে।

+ +

ফায়ারফক্স ১.২+ আবশ্যক

+ +

নিশ্চিত হয়ে নিন, আপনার ডিভাইসে ফায়ারফক্স ওএস ১.২/বুট-টু-গেকো ১.২ বা তার পরবর্তী সংস্করণ রয়েছে। আপনি কোন সংস্করণ ব্যবহার করছেন জানতে Settings > Device Information > Software এ যান।

+ +

যদি আপনার উন্নত কোন সংস্করণ ইন্সটল করা না থাকে, তাহলে ফোনের উপর নির্ভর করে, হয় আপনাকে ফায়ারফক্স ১.২ এর একটি সহজলভ্য নাইটলি বিল্ড ইন্সটল করতে হবে; অথবা সোর্স কোড থেকে নিজে বিল্ড ও কনফিগার করে নিতে হবে।

+ +

বর্তমানে যেসব বিল্ড পাওয়া যাচ্ছেঃ

+ + + +

আপনার নিজস্ব ফায়ারফক্স ওস ১.২ ডিস্ট্রিবিউশন তৈরি করার জন্য ফায়ারফক্স ওএস বিল্ড এবং ইন্সটল এর নির্দেশনা গুলো পড়তে পারেন। তবে শুরুতে ফায়ারফক্স ওএস বিল্ডের পূর্বশর্ত সমূহ দেখে নেবেন।

+ +

রিমোট ডিবাগিং

+ +

এরপর, আপনাকে ফায়ারফক্স ওএস এ রিমোট ডিবাগিং চালু করতে হবে। এটি করার জন্য Settings > Device information > More information > Developer এ যান এবং Remote Debugging চেক বক্সে টিক দিন।

+ +

ADB বা ADB হেল্পার

+ +

ডিভাইস-কম্পিউটার সংযোগ এবং যোগাযোগের জন্য এই প্রক্রিয়াটি অ্যান্ড্রয়েড ডিবাগ ব্রিজ (এডিবি) ব্যবহার করে। এডিবি চালু করার জন্য দুইটি উপায় রয়েছেঃ

+ + + +
+

দ্রষ্টব্যঃ যদি আপনি এডিবি হেল্পার ইন্সটল করে থাকেন, তবে উপরের কমান্ড রান করতে হবেনা।

+
+ +

অ্যাপ ম্যানেজারে ডিভাইস যুক্ত করা

+ +

সকল কনফিগারেশনের কাজ শেষ হওয়ার পর, এখন সময় হয়েছে ডিভাইসকে কম্পিউটারের সাথে যুক্ত করার এবং অ্যাপ ম্যানেজার চালু করার।

+ +
    +
  1. ইউএসবি কেবলের মাধ্যমে ডিভাইসকে কম্পিউটারের সাথে যুক্ত করুন।
    2. +
  2. স্ক্রিন লক ডিজ্যাবল করে নিন। এজন্য Settings থেকে Screen Lock নির্বাচন করুন এবং Lock Screen নামের বক্স থেকে টিক চিহ্নটি তুলে দিন। এটা জরুরি একটি কাজ; কারন যখন স্ক্রিন লক হয়ে যায়, তখন ফোনের সাথে কম্পিউটারের সংযোগ বিচ্ছিন্ন হয়ে যায়। আর সংযোগ বিচ্ছিন্ন হয়ে গেলে ডিবাগিং করা যাবেনা।
    3. +
  3. অ্যাপ ম্যানেজার চালু করুন — ফায়ারফক্স ডেস্কটপে Tools মেনু থেকে Web Developer > App Manager অপশন নির্বাচন করুন। অথবা ইউআরএল বারে about:app-manager টাইপ করুন।
    4. +
  4. অ্যাপ ম্যানেজার ট্যাবের নিচে আপনি একটি "কানেকশন স্ট্যাটাস বার" দেখতে পাবেন (নিচের স্ক্রিনশট দেখুন)। "Connect to localhost:6000" বাটনে ক্লিক করে আপনি আপনার ডিভাইস যুক্ত করতে পারবেন।
    5. +
  5. যদি এটা সফল ভাবে কাজ করে, তাহলে আপনার ডিভাসে একটি প্রম্পট আসবেঃ "An incoming request to permit remote debugging connection was detected. Allow connection?"। OK বাটনে স্পর্শ করুন (কিছু কিছু ক্ষেত্রে প্রম্পট টি দেখার জন্য আপনাকে পাওয়ার বাটন চাপা লাগতে পারে)। কানেকশন স্ট্যাটাস বার আপডেট হবে এবং "Connected to B2G" প্রদর্শন করবে, আর সাথে একটি ডিসকানেক্ট বাটন থাকবে, যাতে আপনি সংযোগ বিচ্ছিন্ন করতে চাইলে করতে পারেন।
    6. +
+ +

+ +
+

খেয়াল করুনঃ কানেকশন স্ট্যাটাস বারে থাকা অন্যান্য বাটনগুলো আপনাকে অ্যাপ ম্যানেজারের সাথে সিমুলেটরকে সংযুক্ত করার সুবিধা দেয়। এগুলো আমরা পরবর্তীতে নিচে আলোচনা করবো, এবং যে পোর্টে আমাদের ফোনের সাথে যোগাযোগের কাজটি হয়, তা পরিবর্তন করা শিখবো। যদি আপনি পোর্ট পরিবর্তন করেন, তাহলে উক্ত পোর্টের জন্য পোর্ট ফরওয়ার্ডিংও চালু করতে হবে। পোর্ট ফরওয়ার্ডিং সংক্রান্ত তথ্য উপরের {{anch("Enable port forwarding")}} অংশে পাবেন।

+
+ +

একটি ফায়ারফক্স ওএস সিমুলেটর অ্যাড-অন ব্যবহার করা

+ +

অ্যাপ ম্যানেজারের সাথে ব্যবহার করার জন্য যদি আপনার কাছে বাস্তব কোন ডিভাইস না থাকে, তারপরও আপনি একটি ফায়ারফক্স ওএস সিমুলেটর ব্যবহার করে এটির স্বাদ গ্রহন করতে পারেন। শুরু করার জন্য, প্রথমে নিচের বাটনটি (একাধিক সংস্করণ পাওয়া যাবে; সর্বোচ্চ সুবিধার জন্য সবগুলো ইন্সটল করতে পারেন) ক্লিক করে সিমুলেটর টি ডাউনলোড করে ইন্সটল করে নিনঃ

+ +

সিমুলেটর ইন্সটল

+ +

একবার সিমুলেটর(গুলো) ইন্সটল করা হয়ে গেলে, আপনাকে অ্যাপ ম্যানেজার ট্যাবের নিচের দিকে থাকা কানেকশন স্ট্যাটাস বারে যেতে হবে, এবং "Start simulator" বাটনে ক্লিক করতে হবে। কমপক্ষে তিনটি বাটন দেখা যাবেঃ

+ + + +
+

খেয়াল করুনঃ যেহেতু ফায়ারফক্স ওএস ১.৫ সংস্করণের নাম বদলে ২.০ হয়ে গেছে, তাই ফায়ারফক্স ওএস ১.৫ সিমুলেটর সরিয়ে দেওয়া হয়েছে। কিন্তু আপনি যদি আগেভাগেই ১.৫ সিমুলেটর ইন্সটল করে রাখেন, তাহলে এটি স্বয়ংক্রিয়ভাবেই ২.০ তে আপডেট হয়ে যাবে না। তাই আপনাকে ১.৫ আনইন্সটল করে ২.০ ইন্সটল করতে হবে। তাহলে এর পর থেকে ২.০ স্বয়ংক্রিয়ভাবেই আপডেট হবে।

+
+ +
+

খেয়াল করুনঃ ফায়ারফক্স ওএস ১.২ সিমুলেটর সরিয়ে ফেলা হয়েছে, কারণ কোন ডিভাইসেরই ফায়ারফক্স ওএস এর এই সংস্করণে রিলিজ হওয়ার কোন সম্ভাবনা নাই। তাই এই সংস্করণের পেছনে সময় ব্যয় না করাই ভাল।

+
+ +

অ্যাপ ম্যানেজারে কাস্টম বিল্ড চালানো

+ +

খেয়াল করুন যে আপনই সিমুলেটরের সাহায্যে অ্যাপ ম্যানেজারে নিজের কাস্টম B2G ডেস্কটপ এবং Gaia/Gecko বিল্ড চালাতে পারবেন। নির্দেশনার জন্য কাস্টম Firefox OS/Gaia বিল্ড অ্যাপ ম্যানেজারে চালানো দেখুন।

+ +

অ্যাপস প্যানেল

+ +

এখন যেহেতু সবকিছু ঠিকঠাক কাজ করছে, এখন চলুন অ্যাপ ম্যানেজারের মধ্যে অ্যাপস প্যানেল থেকে শুরু করে যেসব সুবিধা রয়েছে, তা দেখে নেয়া যাক। এখান থেকে আপনি বর্তমান অ্যাপকে আপনার ডিভাইসে পাঠিয়ে পরীক্ষা করে দেখতে পারবেনঃ

+ + + +

আপনার অ্যাপ সম্পর্কিত তথ্য উইন্ডোর ডান পাশে - নিচের ছবির মত দেখাবেঃ

+ +

+ +

ম্যানিফেস্ট এডিটর

+ +

ফায়ারফক্স ২৮ এর পর থেকে অ্যাপস প্যানেলের মধ্যে একটি অ্যাপ ম্যানিফেস্ট এডিটর যোগ করা হয়েছেঃ

+ +

+ +

ডিবাগিং

+ +

"Update" এ ক্লিক করুন। এটা অ্যাপকে ডিভাইসে আপডেট (ইন্সটল) করবে। "debug" এ ক্লিক করলে অ্যাপ এর সাথে একটি টুলবক্স সংযুক্ত হবে। ফলে আপনি এর কোড সরাসরি পরীক্ষা করতে পারবেনঃ

+ +

+ +
+

টুলবক্সের মধ্যে খেলা করতে আপনার ভালোই লাগবে — DOM, CSS ইত্যাদি পরিবর্তনের চেষ্টা করুন। আপনি দেখতে পাবেন যে আপনার করা পরিবর্তনগুলো ডিভাইসে সাথে সাথেই দেখা যাচ্ছে। আর এই তাৎক্ষনিক পরিবর্তন গুলো ইন্সটল হওয়া অ্যাপের কোডে সংরক্ষন করা হবে। এরপরে যখনি আপনি ডিভাইসে উক্ত অ্যাপটি চালু করবেন, তখনি আপনার করা সর্বশেষ পরিবর্তন সহ দেখতে পাবেন।

+
+ +

ফায়ারফক্স ২৮ এর আগে টুল সমূহ আলাদা উইন্ডোতে চালু হত। ফায়ারফক্স ২৮ এরপর থেকে টুলসমূহ অ্যাপ ম্যানেজারের মধ্যে একটি আলাদা ট্যাবে চালু হয়। এই ট্যাবটি অ্যাপস অ্যান্ড ডিভাইস ট্যাবের পাশে থাকে। ট্যাবটিকে আপনার অ্যাপের আইকন দেয়া হয়, যাতে আপনি সহজে খুঁজে পেতে পারেনঃ

+ +

+ +

ত্রুটিসমূহ

+ +

যদি সফলভাবে একটি অ্যাপ যুক্ত করা না হয় - যেমন URL টি যদি ভুল হয়ে থাকে, অথবা আপনি যদি একটি প্যাকেজড অ্যাপ ফোল্ডার নির্বাচন করে থাকেন, তাহলে উক্ত অ্যাপের পেজে একটি এন্ট্রি যুক্ত করা হবে; কিন্তু তার মধ্যে ভুলের তথ্য থাকবে।

+ +

+ +

এই ভিউ থেকে আপনি একটি অ্যাপ অপসারণও করতে পারবেন। অ্যাপ অপসারণের জন্য উইন্ডোর বাম দিকে অ্যাপের নাম/বর্ণনা এর উপর মাউস পয়েন্টার নিয়ে "X" বাটনের উপর ক্লিক করতে হবে। কিন্তু এটা করলে ডিভাইস থেকে অ্যাপ অপসারণ হবেনা। ডিভাইস থেকে অ্যাপ অপসারণের জন্য আপনাকে ডিভাইস ব্যবহার করে ম্যানুয়ালি অপসারণ করতে হবে।

+ +

ডিভাইস প্যানেল

+ +

+ ডিভাইস + ট্যাব সংযুক্ত ডিভাইসের তথ্য প্রদর্শন করে। + + " + Installed Apps + + " + উইন্ডো থেকে, ডিভাইসে থাকা অ্যাপ সমূহ চালু করা ও নিরীক্ষন করা যাবে।

+ +

+ +
+

দ্রষ্টব্যঃ প্রত্যয়িত (সার্টিফায়েড) অ্যাপস ডিফল্ট ভাবে তালিকাভুক্ত থাকেনা। প্রত্যয়িত অ্যাপস কিভাবে ডিবাগ করবেন, তা দেখুন।

+
+ +

"Permissions" উইন্ডো বর্তমান ডিভাইসে থাকা বিভিন্ন ওয়েব এপিআই এর জন্য যেসব সুবিধা দেয়া প্রয়োজন, তা প্রদর্শন করেঃ

+ +

+ +

সবশেষে, "Screenshot" বাটন ক্লিক করে বর্তমান ডিভাইসের ডিসপ্লের স্ক্রিনশট নিতে পারেন। স্ক্রিনশট নেয়া হয়ে গেলে তা ফায়ারফক্সের নতুন ট্যাবে আসবে, এবং সেখান থেকে আপনি চাইলে সেটি সংরক্ষণ বা বাতিল করে দিতে পারেন।

+ +

প্রত্যয়িত (সার্টিফায়েড) অ্যাপ ডিবাগ করা

+ +

বর্তমানে যেসব ডিভাইসে ফায়ারফক্স ওএস ১.২ এর ডেভেলপমেন্ট বিল্ড চলছে, শুধুমাত্র সেগুলোই প্রত্যয়িত অ্যাপ ডিবাগ করতে সমর্থ। যদি আপনার একটি ডেভেলপমেন্ট বিল্ড থাকে, তাহলে আপনার প্রোফাইলে devtools.debugger.forbid-certified-apps প্রেফারেন্স false এ পরিবর্তনের মাধ্যমে আপনি প্রত্যয়িত অ্যাপ ডিবাগ সুবিধা চালু করে নিতে পারেন। এটা করার জন্য নিচের ধাপগুলো অনুসরণ করুনঃ

+ +
    +
  1. +

    আপনার ডিভাইসের ফাইল সিস্টেমে শেলের মাধ্যমে প্রবেশের জন্য কম্পিউটারের টার্মিনাল/কনসোলে নিচের কমান্ড গুলো লিখুনঃ

    + + 
    adb shell
    + +

    আপনার প্রম্পট পরিবর্তন হয়ে root@android প্রদর্শন করবে।

    +
    2. +
  2. +

    এরপর, নিচের কমান্ড দিয়ে B2G বন্ধ করুনঃ

    + + 
    stop b2g
    +
    3. +
  3. +

    নিচের ডিরেক্টরিতে প্রবেশ করুনঃ

    + + 
    cd /data/b2g/mozilla/*.default/
    +
    4. +
  4. +

    এখানে, prefs.js হালনাগাদ করার জন্য নিম্নোক্ত কমান্ড লিখুনঃ

    + + 
    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
    +
    5. +
  5. +

    হালনাগাদ শেষে নিচের কমান্ডের মাধ্যমে B2G পুনরায় চালু করুনঃ

    + + 
    start b2g
    +
    6. +
  6. +

    exit কমান্ড ব্যবহার করে অ্যান্ড্রয়েড ফাইল সিস্টেম থেকে বের হয়ে আসুন; এরপর আপনি আপনার সাধারন টার্মিনাল প্রম্পটে চলে আসবেন।

    +
    7. +
  7. +

    এরপর, পুনরায় অ্যাপ ম্যানেজার কানেক্ট করলে নিরীক্ষণের জন্য সনদপ্রাপ্ত অ্যাপ সমূহ দেখতে পাবেন।

    +
    8. +
+ +
+

লক্ষ্য করুনঃ যদি আপনি এই সুবিধাটি আপনার গায়া বিল্ডে যুক্ত করতে চান, তাহলে আপনি এই কমান্ডটি চালাতে পারেনঃ make DEVICE_DEBUG=1 reset-gaia.

+
+ +

সমস্যা সমাধান

+ +

যদি ডিভাইস খুঁজে না পায়ঃ

+ + + +

অ্যাপ ম্যানেজারের সাথে আপনার ডিভাইস কানেক্ট করতে পারছেন না বা সিমুলেটর চালু করতে পারছেন না ? আমাদের জানান বা বাগ ফাইল করুন

diff --git a/files/bn/archive/b2g_os/using_the_b2g_desktop_client/index.html b/files/bn/archive/b2g_os/using_the_b2g_desktop_client/index.html new file mode 100644 index 0000000000..2bcbcc9a52 --- /dev/null +++ b/files/bn/archive/b2g_os/using_the_b2g_desktop_client/index.html @@ -0,0 +1,167 @@ +--- +title: B2G ডেস্কটপ ক্লায়েন্ট ব্যবহারবিধি +slug: Archive/B2G_OS/Using_the_B2G_desktop_client +tags: + - NeedsReview +translation_of: Archive/B2G_OS/Building_the_B2G_OS_simulator +--- +
+

ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট (যা B2G ডেস্কটপ ক্লায়েন্ট নামেও পরিচিত)  আপনাকে গেকো ভিত্তিক বা মূল ডিভাইসের মত পরিবেশে গায়া এবং ওয়েব অ্যাপস রান করার সুযোগ দেয় । এটি ডিভাইস হার্ডওয়্যারকে এমুলেট করে না, তাই এটি ডিভাইস এপিআই পরীক্ষার জন্য যথাযথ নয় । তাছাড়া, এটি মূল হার্ডওয়্যারে পরীক্ষার বিকল্পও নয় । তবে, এতে কন্ট্যাক্টস এবং সেটিংস এপিআই এর মত কিছু এপিআই চালু আছে, যা ফায়ারফক্সে নেই । ফলে, এটা আপনার অ্যাপ্লিকেশন ডেভেলপমেন্ট অথবা গায়া ইউজার ইন্টারফেসে কাজ করার ক্ষেত্রে সহায়ক হবে । এই লেখাটিতে কীভাবে ফায়ারফক্স ওএস ডাউনলোড অথবা তৈরি করতে হয় ; একইসাথে কীভাবে ব্যবহার করতে হয়, তা দেখানো হবে ।

+
+
+

দ্রষ্টব্য: ফায়ারফক্স ওএস ডেস্কটপ  ক্লায়েন্ট ব্যবহারের সহজতম পন্থা হল ফায়ারফক্স ওএস সিমুলেটর ।  এর জন্য আপনাকে আলাদাভাবে ডেস্কটপ ক্লায়েন্ট তৈরি করা লাগবে না ।

+
+

সর্বশেষতম নির্মাণ ডাউনলোড

+

ফায়ারফক্স নাইটলিজ এর মতই ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট প্রতিদিনই সর্বশেষ সোর্স কোড থেকে স্বয়ংক্রিয়ভাবে তৈরি হয় । সর্বশেষটি পাবেন মজিলা এফটিপি সার্ভারে । আপনার অপারেটিং সিস্টেমের জন্য সর্বশেষ সংস্করণ ও উপযুক্ত আর্কাইভ নির্বাচন করতে ভুলবেন না । ফলে আপনি এটি আলাদাভাবে তৈরির ব্যপারটি উপেক্ষা করতে পারবেন । তাছাড়া, এতে আপনাকে গায়াও ডাউনলোড করতে হবে না ।

+

আপনি এখন সরাসরি ডেস্কটপ ক্লায়েন্ট রান করায় (Running the desktop client) চলে যেতে পারেন, যদি না আপনি এটি নিজ থেকে তৈরি করতে চান ।  কোডবেস-এ পরিবর্তন আনতে ও তা পরীক্ষা করতে চাইলে এটি দরকার ।

+

ডেস্কটপ ক্লায়েন্ট তৈরি

+

আপনাকে প্রথমেই একটি প্রমাণ মজিলা নির্মাণ পরিবেশ তৈরি করে নিতে হবে । কাজটি হয়ে গেলে আপনি প্রয়োজনমত কোড নিয়ে ও পরিবর্তন করে ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট তৈরি করতে পারবেন ।

+

প্রথমবার কোড ডাউনলোড

+

যে ডিরেক্টরিতে সোর্স কোডটি পাঠাতে চান, সেটিতে সকল গেকো সমৃদ্ধ mozilla-central রিপোজিটরি ক্লোন করুন :

+
 hg clone http://hg.mozilla.org/mozilla-central
+

একই কোড আপনি গিটহাব থেকেও নামাতে পারেন :

+

 

+
 git clone https://github.com/mozilla/gecko-dev
+
+

কোড নবায়ন

+

ক্রম-নির্মাণের ক্ষেত্রে আপনার সর্বশেষ পরিবর্তনগুলো আনা উচিত :

+
cd mozilla-central
+hg pull -u
+
+

অথবা,

+
cd gecko-dev
+git pull
+
+

mozconfig তৈরি

+

এরপর, ফায়ারফক্সের বদলে গেকো ক্লায়েন্টে বুট তৈরি করার সিস্টেম কনফিগার করতে mozilla-central ডিরেক্টরিতে mozconfig নামের একটি ফাইল তৈরি করুন । ফাইলটিতে যা থাকবে :

+
. "$topsrcdir/b2g/config/mozconfigs/common"
+
+mk_add_options MOZ_OBJDIR=../build
+mk_add_options MOZ_MAKE_FLAGS="-j9 -s"
+
+ac_add_options --enable-application=b2g
+ac_add_options --disable-libjpeg-turbo
+
+# This option is required if you want to be able to run Gaia's tests
+ac_add_options --enable-tests
+
+# turn on mozTelephony/mozSms interfaces
+# Only turn this line on if you actually have a dev phone
+# you want to forward to. If you get crashes at startup,
+# make sure this line is commented.
+#ac_add_options --enable-b2g-ril
+

B2G ডেস্কটপ ক্লায়েন্টে  Mochitests (হয় mochitest-b2g-desktop নাহলে mochitest-plain) অথবা গায়া ইউনিট টেস্টস রান করাতে আপনাকে ENABLE_MARIONETTE=1 যুক্ত করতে হবে ।

+

প্রস্তুতকরণ

+

এখন আপনি নিচের কমান্ডটি দিয়ে ডেস্কটপ ক্লায়েন্ট তৈরি করতে পারেন (এটিকে mozilla-central ডিরেক্টরি থেকে রান করান) :

+
./mach build
+
+

এই তৈরিকৃত ক্লায়েন্টটি ../build/dist ডিরেক্টরিতে থাকবে (এটি নির্ভর করবে mozconfig ফাইলের MOZ_OBJDIR তে আপনি যে মানটি উল্লেখ করেছেন, তার উপর) ।

+
+

দ্রষ্টব্য : কোন সমস্যা হলে প্রথমেই এখানে আপনার ডিপেন্ডেন্সিস পরীক্ষা করুন ।

+
+

গায়া ডাউনলোড

+

ডেস্কটপ ক্লায়েন্টটি স্বাভাবিকভাবেই একটি খালি স্ক্রিন দেখায় । কারণ এটি কোন ওয়েব অ্যাপটি স্বয়ংক্রিয়ভাবে ইন্সটল করা লাগবে, তা জানে না । এজন্য গায়া ডাউনলোড করতে হবে, যা ফায়ারফক্স ওএসের সাথে আসা সিস্টেম অ্যাপস ও ডিফল্ট অ্যাপসের সংগ্রহ ।

+

প্রথমবার গায়া ডাউনলোডের সময় সোর্সকোড রিপজিটরি-টি গিটহাবে ক্লোন করুন :

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

ইতিমধ্যে থাকা গায়া ক্লোনটি নবায়ন করতে আপনি গিটহাব থেকে সর্বশেষ পরিবর্তনগুলো আনতে পারেন :

+
cd gaia
+git pull
+
+

একটি custom-settings.json তৈরি

+

আপনি যদি জেনে থাকেন যে আপনি কি করছেন এবং বিভিন্ন config অপশান তৈরি করতে চান, তাহলে gaia/build/config/custom-settings.json ফাইলটি তৈরি করুন এবং সেখানে অপশানগুলো যুক্ত করুন । উদাহরণস্বরূপ :

+
{
+  "lockscreen.enabled": false,
+  "lockscreen.locked": false,
+  "devtools.debugger.remote-enabled": true
+}
+

উদাহরণটি লকস্ক্রিনটি বাইপাস করতে কাজ দেয়, যেটি অন্য কোনভাবে ডেস্কটপে বাইপাস করা অসম্ভব, কারণ এটি মাউস বা ট্র্যাকপ্যাড দ্বারা আনলক করা যায় না ।

+

একটি প্রোফাইল তৈরি

+

এখন আমাদের ডেস্কটপ ক্লায়েন্টটির জন্য গায়ার অ্যাপগুলো সেটআপ করা লাগবে । ঠিক যেভাবে গায়া অ্যাপগুলো ডিভাইসে ইন্সটল করার কথা, সেভাবে প্যাকেজ করা, একইসাথে অগ্রাধিকারপ্রাপ্ত সিস্টেম অ্যাপগুলোর জন্য অনুমতি সেটআপ করা এর অন্তর্ভুক্ত । একটি প্রোফাইল তৈরির মাধ্যমে আমরা কাজগুলো করি । নিচের কমান্ডটিই (ডাউনলোড করা gaia ডিরেক্টরিতে রান করান ) এর জন্য যথেষ্ট : 

+
DESKTOP_SHIMS=1 NOFTU=1 DEBUG=1 make
+
+

এটি gaia ডিরেক্টরির নিচে profile-debug নামে একটি ডিরেক্টরি তৈরি করবে । এই নতুন প্রোফাইলে B2G ঠিকমত রান করানোর জন্য প্রয়োজনীয় একটি কাস্টমাইজড এক্সটেনশন এবং অন্যান্য কনফিগারেশন ডিটেলস যুক্ত আছে ।

+

ডেস্কটপ ক্লায়েন্টটি রান করানো

+

একবার যদি আপনি ক্লায়েন্টটি তৈরি করে থাকেন (অথবা নাইটলি ডেস্কটপ অ্যাপলিকেশনটি ডাউনলোড এবং ইন্সটল করে থাকেন) এবং গায়া ডাউনলোড করে থাকেন, তাহলে আপনি ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট চালু করার জন্য তৈরি ।

+

লিনাক্সে রান করানো

+

এমবেডেড গায়া প্রোফাইল ব্যবহার করে ডেস্কটপ ক্লায়েন্টটি লিনাক্সে রান করানোর জন্য স্রেফ b2g এক্সিকিউটেবলটি রান করান । যদি আপনি একটি ভিন্ন গায়া প্রোফাইল উল্লেখ করতে চান (যেমন উপরেরটি ব্যতীত পৃথকভাবে ডাউনলোডকৃত গায়া), আপনাকে b2g র‍্যাপার প্রোগ্রামটি বাইপাস করতে হবে এবং b2g-bin বাইনারিটি রান করাতে হবে । বাইনারিটি আপনার ডাউনলোডকৃত আর্কাইভে অথবা, আপনার তৈরি করা ক্লায়েন্ট হলে ../build/dist/bin ডিরেক্টরিতে আছে ।

+
.../b2g-bin -profile gaia/profile-debug
+
+

আপনি বিরক্তিকর রেন্ডারিং সমস্যার সম্মুখীন হতে পারেন । এটি উপেক্ষা করতে নিচের লাইনটি আপনার gaia/profile/user.js ফাইলে যুক্ত করুন :

+
user_pref("layers.acceleration.disabled", true);
+
+

ম্যাকে রান করানো

+

আপনি যদি নাইটলি বিল্ড ডাউনলোড করে থাকেন, আপনি বরাবরের মতই ফাইন্ডার থেকে খুব সহজেই এটি চালু করতে পারেন । ম্যাকের সাথে যুক্ত প্রমাণ কন্সোল ইউটিলিটি প্রোগ্রাম রান করলেই যেকোন কন্সোল আউটপুট দৃশ্যমান হয় ।

+

যদি আপনি একটি ভিন্ন গায়া প্রোফাইল উল্লেখ করতে চান (যেমন উপরেরটি ব্যতীত পৃথকভাবে ডাউনলোডকৃত গায়া), আপনাকে b2g র‍্যাপার প্রোগ্রামটি বাইপাস করতে হবে এবং b2g-bin বাইনারিটি রান করাতে হবে । b2g-bin বাইনারিটির লোকেশনের কারণে এবং প্রোফাইল ডিরেক্টরি নির্দেশের সময় নিখুঁত পথনির্দেশের প্রয়োজনে কমান্ড লাইনটি একটু বেশি জটিল :

+
.../B2G.app/Contents/MacOS/b2g-bin -profile /full/path/to/gaia/profile-debug
+
+

উইন্ডোজে রান করানো

+

উইন্ডোজে নাইটলি বিল্ড রান করানো b2g.exe চালু করার মতই সহজ । আপনি চাইলে এক্সিকিউটেবল b2g-bin.exe রান করিয়ে এক্সিকিউশনটি কাস্টমাইজ করতে পারেন; এটি স্বয়ংক্রিয়ভাবে বান্ডেলকৃত গায়া ব্যবহারকারি র‍্যাপার প্রোগ্রামটি বাইপাস করে দেয় ।

+

কমান্ড লাইন বিকল্প

+

ডেস্কটপ ক্লায়েন্ট ব্যবহারের সময় পছন্দমত রানটাইম অভিজ্ঞতা পাল্টাতে আপনি কিছু কমান্ড লাইন বিকল্প ব্যবহার করতে পারেন । -help অপশান ব্যবহার করে আপনি একটি লিস্ট পেতে পারেন । নিচে তাদের মধ্যে আকর্ষণীয় কিছুর উল্লেখ আছে ।

+

স্ক্রিন সাইজ উল্লেখকরণ

+

আপনি --screen অপশান ব্যবহার করে যে ডিভাইসটি সিমুলেট করতে চান, তার স্ক্রিন সাইজ উল্লেখ করতে পারেন :

+
b2g --screen=<width>x<height>@<dpi>
+

এখানে <width>, <height>, এবং <dpi> মূলত নিজ নাম অনুযায়ী প্যারামিটার: এখানে ডিভাইস স্ক্রিনের দৈর্ঘ্য ও প্রস্থ হল পিক্সেল এককে এবং ডিভাইস রেজ্যুলেশন হল DPI এককে । কিছু বাস্তব উদাহরণ :

+
b2g --screen=320x480
+b2g --screen=320x480@160
+
+

বিকল্প হিসাবে কিছু ডিভাইসের নাম উল্লেখ করে আপনি তাদের স্ক্রিন সাইজ এবং রেজ্যুলেশন সিমুলেট করতে পারবেন :

+ +

জাভাস্ক্রিপ্ট কন্সোল খোলা

+

কমান্ড লাইন থেকে -jsconsole ব্যবহার করে আপনি B2G ক্লায়েন্ট চালু করার সময় জাভাস্ক্রিপ্ট কন্সোল খুলতে পারবেন । তৈরির পর স্রেফ নিচের কাজ করুন :

+
.../b2g -jsconsole -profile /path/to/your/profile
+

আপনি ম্যাকে নাইটলি বিল্ড ইন্সটল করে থাকলে নিচের কাজ করতে পারেন :

+
/Applications/B2G.app/Contents/MacOS/b2g-bin -jsconsole -profile /path/to/your/profile-debug
+
+

দ্রষ্টব্য : উৎপাদন নির্মাণের সময় আগে থেকেই কন্সোল লগিং (যেমন {{domxref("console.log()")}}) বন্ধ করা থাকে । এটি চালু করতে, ডেভেলপার সেটিংসে গিয়ে Console Enabled preference চালু করে দিন ।

+
+

B2G আরম্ভ হওয়ার সময় নির্দিষ্ট অ্যাপলিকেশন চালু করা

+

ডেস্কটপ ক্লায়েন্টে B2G  আরম্ভ হওয়ার সময় স্বয়ংক্রিয়ভাবে চালু হওয়ার জন্য আপনি একটি অ্যাপলিকেশন উল্লেখ করতে পারেন । বাকি সিস্টেম লোড হওয়ার সাথে সাথেই কাজটা হয়ে যাবে । এটি করতে, স্রেফ --runapp অপশনটি ব্যবহার করুন, যেটি চালু করার জন্য একটি অ্যাপলিকেশনের নামকে প্যারামিটার হিসেবে নেয় । উদাহরণস্বরূপ :

+
 .../b2g-bin -profile /path/to/your/gaia/profile-debug --runapp email
+
+

দ্রষ্টব্য : উল্লেখিত নামটিকে ছোট হাতের অক্ষরে পরিবর্তিত করে এবং সকল ড্যাশ ও স্পেস মুছে দিয়ে স্বাভাবিক করা হয় । এরপর এই স্বাভাবিককৃত নামটিকে প্রাপ্ত অ্যাপগুলোর manifestগুলোর সাথে তুলনা করা হয় । যেমন, ইমেইল অ্যাপটির বর্তমান নাম "E-mail", কিন্তু --runapp email কাজ করবে এই স্বাভাবিককরণের কারণে ।

+
+

আপনি যদি কোনো আর্গুমেন্ট ছাড়া অথবা একটি শূন্য আর্গুমেন্ট নিয়ে --runapp অপশানটি উল্লেখ করেন, b2g ক্লায়েন্ট আপনার টার্মিনালে একটি জানা অ্যাপলিকেশনের লিস্ট দেখাবে, সংক্ষিপ্ত ব্যবহারবিধিসহ ।

+
+

দ্রষ্টব্য : --runapp অপশনটি পার্শ্বপ্রতিক্রিয়া হিসেবে লকস্ক্রিন বন্ধ করে দেয় এবং পুনরায় চালু করে না । এটি ধরে নেয়া হয় যে, আপনি লকস্ক্রিন পরীক্ষার সময় একই প্রোফাইলে, এই কমান্ডটি ব্যবহার করবেন না, অথবা Settings > Screen Lock এ গিয়ে আপনি ম্যানুয়ালি এটিকে পুনরায় চালু করবেন । এটি যদি একটি সমস্যা হয়, নিঃসংকোচে এই আচরণ পরিবর্তনের জন্য একটি প্যাচ দান করুন ।

+
+

ব্যবহারের জন্য টিপস

+

এই ধাপটি B2G ডেস্কটপ ক্লায়েন্ট ব্যবহারে জন্য কিছু গুরুত্বপূর্ণ টিপস দিচ্ছে ।

+ +

ট্রাবলশ্যুটিং: B2G ডেস্কটপ চালুর সময় ফাঁকা স্ক্রিন

+

b2g -profile gaia/profile ব্যবহার করে b2g চালুর সময় "Cannot reach app://system.gaiamobile.org" এরর সহ একটি ফাঁকা স্ক্রিন দেখা যেতে পারে । এটি ঠিক করার জন্য কিছু জিনিস পরীক্ষা করে দেখতে পারেন :

+ +

পরবর্তী ধাপগুলো

+

এখন আপনার গেকো রান করানোর জন্য বুটের একটি ডেস্কটপ বিল্ড আছে, আপনি এখন এটিতে পরীক্ষা, উন্নয়ন এবং অন্যান্য কাজ করতে পারেন ।

+ diff --git a/files/bn/archive/b2g_os/using_the_b2g_emulators/index.html b/files/bn/archive/b2g_os/using_the_b2g_emulators/index.html new file mode 100644 index 0000000000..34cdc928f5 --- /dev/null +++ b/files/bn/archive/b2g_os/using_the_b2g_emulators/index.html @@ -0,0 +1,81 @@ +--- +title: B2G এমুলেটরের ব্যবহার +slug: Archive/B2G_OS/Using_the_B2G_emulators +tags: + - NeedsReview +translation_of: Archive/B2G_OS/Using_the_B2G_emulators +--- +
+

 এই নিবন্ধটি গেকো এমুলেটর থেকে বুট ব্যবহার করার সময় আপনার জানা উচিত কিছু কি জিনিষ একটি সংক্ষিপ্ত গাইড উপলব্ধ করা হয়।  এটি একটি সম্পূর্ণ ব্যবহারকারী ম্যানুয়াল হতে সারমর্ম না;পরিবর্তে, এটা শুধু আপনি যে আপনি আপনার নিজের উপর জানতে না পারে যে কয়েক দরকারী জিনিস বলে ।

+
+

এই সহায়িকার অনুমান, আপনি ইতিমধ্যে এক এমুলেটর তৈরি করেছেন ; যদি না করে থাকেন, তাহলে ঘুরে আসুন Building and installing Firefox OS থেকে !

+

B2G এমুলেটর সম্পর্কে

+

এখানে দুই ধরনের B2G এমুলেটর আছে।প্রথমত, config.sh যখন চলমান "এমুলেটর" জন্য কনফিগার দ্বারা নির্মিত, একটি এআরএম ডিভাইস এমুলেটর। যদিও x86 প্রসেসসরের তুলনায় এটি ধিরে চলে, তবে এটি আরো স্থিতিশীল এবং একটি আসল ডিভাইস যেভাবে কাজ করে এটি সেভাবে উপস্থাপন করতে পারে । config.sh এটি আপনাকে x86 ডিভাইসের পরিবর্তে "এমুলেটর x86" এ চলতে সাহায্য করবে।

+
+ Note:সাম্প্রতিক কয়েক মাসে অটোমেশন টিম স্থায়িত্ব বিষয় কারণে x86 এমুলেটর ব্যবহার করা বন্ধ করে দিয়েছে. এর কারনে এমুলেটর x86 এ এতি কায না অ করতে পারে । অন্যথায় আপনি এআরএম এমুলেটর ব্যবহার করুন.
+

একবার আপনি নির্বাচিত করলেন, কনফিগার করলেন এবং একটি এমুলেটর বানালেন, বাকিটা একটি ব্যবহারকারী দৃষ্টিকোণ থেকে একই ভাবে কাজ করতে থাকবে । আর তাই এই সহায়িকার বাকি টুকু ২টার জন্য এক।

+
+ Note: ম্যাক  OS X এ B2G এমুলেটরের জন্য Core 2 Duo প্রসেসর অথবা তার থেকে বেশি কিছু দরকার ; অর্থাৎ ,এমন একটা সিস্টেম যা Mac OS X 10.7 "Lion." এর সাথে সামঞ্জস্যপূর্ণ । আপনাকে আসলে Lion চলমান রাখার দরকার নেই ,এর সাথে সামঞ্জস্যপূর্ণ  থাকলেই হবে ।
+

এমুলেটর চালু করা

+

B2G এমুলেটর শুরু করার জন্য নিম্নলিখিত কমান্ডটি ব্যবহার করুন:

+
./run-emulator.sh
+
+

এটি আপনার জন্য সব এমুলেটর সূচনার কাজগুলো ব্যবস্থা করবে . যতক্ষণ পর্যন্ত এমুলেটর চালু না হয় এবং এটিতে গেকো বুট না হয় ততক্ষণ একটু ধৈর্য ধরুন। কয়েক মিনিট সময় লাগবে, তাই ধৈর্য ধরুন

+

যখন এমুলেটর কাজ করে না

+

কখনো কখনো এমুলেটর চালু হতে ব্যর্থ হয়। যন্ত্রনাগ্রস্থ প্রযুক্তির যুগে আপনাকে স্বাগতম ! এখানে সমস্যার সমাধানের জন্য কিছু টিপস আছে.

+

আপনি কি VM এ কাজ করার চেষ্টা করছেন  ?

+

VirtualBox এবং Parallels এর আগাম ঘটানো গ্রাফিক্স সাপোর্টের কিছু সমস্যা রয়েছে যার কারণে এমুলেটর বুট নিতে ব্যর্থ হতে পারে, এটা কিছুটা OpenGL ডিভাইস এর মতো। বুট নেওয়া শুরু করবে, বুট নিতে ব্যর্থ হবে এবং এইপ্রক্রিয়া চলতেই থাকবে অথবা এটি চালু হবে কিন্তু এমুলেটরে কিছুই দেখাবে না।দুর্ভাগ্যজনকবশতং এই সমস্যার কোনো সমাধান নেই (VirtualBox- এর জন্য একটি workaround আছে), আপনাকে VMWare Player (Freeware), Workstation or Fusion ব্যবহার করতে হবে  ।VirtualBox এর জন্য - হয় আপনি Guest Addonsইন্সটল না করেন নতুবা vboxvideo module অকেজো (disable) করে দিন ।

+

ADB server চলছে কিনা এটি নিশ্চিত করুন

+

এটি সচরাচরই হয় কারণ যে ADB server টি এমুলেটেড ডিভাইসটিকে নিয়ন্ত্রণ করছে হয় ওটি চলছে না অথবা স্বাভাবিকভাবে কাজ করতে পারছে না।

+
+

Note: =যদিআপনি B2G সিস্টেম দ্বারা নির্মিত ADB ব্যবহার করেন (যেটি সম্ভবত আপনি করছেন) এটি  $B2G/out/host/<platform>/bin bin এই নির্দেশিকাতে রয়েছে। ম্যাক-এর জন্য এটি $B2G/out/host/darwin-x86/bin,এই নির্দেশিকাতে রয়েছে (উদাহরণ)

+
+

ADB চলছে কিনা ওটা চেক করার করুন এভাবে

+
ps aux | grep adb
+
+

যদি এটা এখানে থাকে তবে সারভারটি kill করার জন্য নিচের কাজটি করুন, কারণ সম্ভবত এটি ঠিক ভাবে কাজ করছে না ।

+
adb kill-server
+
+

যদি এটা ওখানে না থাকে তাহলে নিচের কাজটি করুন

+
adb start-server
+
+

এখন আবার এমুলেটরটি চালু করার চেষ্টা করুন । যদি এটি এখনো কাজ না করে, তাহলে সাহায্যের জন্য #b2g, irc.mozilla.org তে দিয়ে দিন।

+

কনফিগারেশন সেটিংস মুছে ফেলা

+

কখনো কখনো এমুলেটরের অনেক পুরোনো অপ্রয়োজনীয় কনফিগারেশন সেটিংস কাজে অনেক ঝামেলা করতে পারে । নিচের জিনিসটি করে আপনি এর IndexedDB ডাটাবেস ডিলিট করে এই ঝামেলা থেকে মুক্তি পেতে পারেন ।

+
    +
  1. ADB server চলছে কিনা এটি নিশ্চিত করুন, যেটি  Make sure the adb server is running এ বর্ণনা করা হয়েছে।.
    2. +
  2. +

    এমুলেটর চালু করা

    +
    3. +
  3. হোষ্ট কম্পিউটারের টার্মিনালে, আপনার এমুলেটরের জন্য রুট কোডের ভিতরের নির্দেশিকাতে যান, তারপর লিখুন :  out/host/<platform>/bin/adb -e shell; ম্যাক-এর জন্য, এটি হবে   out/host/darwin-x86/bin/adb -e shell.
    4. +
  4. এখন আপনি ADB সেল-এ প্রবেশ করেছেন এবং আপনি আপনার এমুলেটেড ডিভাইসে সেল কমান্ড কার্যকর করতে পারবেন। B2G ডিভাইসটিকে বন্ধ করি :  stop b2g.
    5. +
  5. IndexedDB database কে ডিলিট করি : rm -rf /data/local/indexedDB.
    6. +
  6. এমুলেটেড ডিভাইসটিকে পুনরায় চালু করি : start b2g.
    7. +
+

এই ধাপে এসে আশা করা যায় যে, আপনিGAIA interface – এর শেষ ধাপে চলে এসেছেন এবং সব কিছু ঠিক আছে।

+

যদি এমন হয়, এমুলেটরটি চালু হলো কিন্তু "MOZILLA TECHNOLOGY" স্প্লাশ স্ক্রীন আসার আগে অথবা পরে স্ক্রীন কালো হয়ে গেলো

+

এমন হওয়ার কারণ হতে পারে মেশিনের ড্রাইভারের ত্রুটির জন্য যেটি এমুলেটরটি চালাচ্ছে । লিনাক্স- এরওপেনসোর্স “NOUVEAU”ড্রাইভারসএ এটিপর্যবেক্ষণকরাহয়েছে । এটার সহজ সমাধান হতে পারে মেশিনের ড্রাইভারস গুলো বদলে ফেলা। এই ক্ষেত্রে “NOUVEAU” ড্রাইভারের বিকল্প হিসেবে আরো অতিরিক্ত কিছু ড্রাইভার ইন্সটল করা যেতে পারে। অন বোর্ড গ্রাফিক্স চিপসেটের ক্ষেত্রে, ডিফল্ট লিনাক্স ওপেন সোর্স ড্রাইভার এমুলেটর এরর “'eglMakeCurrent failed”দেখাতে পারে যেটি “OpenGL” এর ২.০ ভার্সন সাপোর্ট করে যেটি  GPUএমুলেশনের জন্য দরকার । এর সমাধান হলো GPU কে ডিঅ্যাক্টিভেট করা । করার জন্য run-emulator.sh script লিখতেহবে (এটা কিছুটা ধীরে হবে) ।

+

এমুলেটর কনফিগার করার পদ্ধতি

+

এখানে অনেক অপশন আছে যার মাধ্যমে আপনি যেই ডিভাইসটিকে এমুলেট করতে চান তার মতো করে আপনি আপনার এমুলেটরটিকে খাপ খাইয়ে নিতে পারেন। এটা কিভাবে করবেন এই বিভাগ এই সম্পর্কে আপনাকে কিছু প্রাথমিক তথ্য প্রদান করবে।  আপনি আপনার এমুলেটর কনফিগারেশন অ্যাডজাস্ট করতে পারেন run-emulator.sh স্কিপ্টটি এডিট করে (অথবা, আদর্শিকভাবে, এটার অনুলিপি করে)। অল্প কিছু প্রয়োজনীয় জিনিস এখানে আলোচনা করা হয়েছে ;  অন্য বিষয়ে আরও বিস্তারিত জানার জন্য  look at the qemu site যেতে পারেন ।

+
+ Tip:সিমুলেটটের জন্য প্রত্যেকটি ডিভাইসের run-emulator.shএকএকটিকপিতৈরিকরুন । এটা আলাদা আলাদা কনফিগারেশনে চালু হওয়ার কাজটা সহ্জ করে দেয় ।
+

স্কিনস পরিবর্তন

+

প্রথমে এমুলেটর অটোম্যাটিক “HVGA” মোডে চালু হয় ; এটা অর্ধেক VGA ,অথবা ৩২০x ৪৮০ পিক্সেলের হয় । যখন এমুলেটরটি চালু হয় তখন তা –skin প্যারামিটারে বলা থাকে । আপনি run-emulator.sh স্কিপ্টটি এডিট করে বিভিন্ন ডিসপ্লে তে সুইচ করতে পারেন (অথবা, আদর্শিকভাবে, এটার অনুলিপি করে) .প্রভাইডেড স্কিন গুলো হলো :

+ +

এই স্কিনগুলো B2G/development/tools/emulator/skins ডাইরেক্টরিতে রয়েছে । স্কিন গুলো অনেক সিম্পল ; যদি আপনি এদের দিকে তাকান, তারা এক্তি ফোলডারে রয়েছে যা PNG ফাইলে পরিপূর্ণ এবং যা বিভিন্ন ইউজার ইন্টারফেস অবজেক্ট এবং একটি টেক্সট ফাইল যার নাম layout যা ইন্টারফেস এবং স্কিন আরিয়া লেআউট বর্ণনা করে . প্রয়োজন হলে কাস্টম স্কিনস তৈরি করুন যা মোটামুটি সহজ ।

+

 মেমরি Size পরিবর্তন

+

মেমোরি সাইজ কনফিগার করার জন্য আনার আর একটা অপশন দরকার  . ডিফল্ট 512 মেগাবাইট ; কিন্তু, যে ডিভাইস্টি আপনি ব্যবহার করছেন তার মেমোরি যদি বেশি অথবা কম হয়, তখন খাপ খায়িয়ে নেওয়ার জন্য সেটিংস পরিবর্তন করাটা জরুরি, যা নিশ্চিত করবে আপনি যে অ্যাপ টা রান করাবেন সেটি আপনার ডিভাইসের সাহে যায়। এটি করার জন্য, প্রয়োজন হলে -memory প্যারামিটারের মান মেগাবাইটে পরিবর্তন করে নিন . তাছাড়া ডিফল্ট ৫১২এমবি, ২৫৬এমবি এবং ১০২৪এমবি দিয়েওয়াপ্নি টেস্ট করতে পারেন। 

+

ডিভাইসের এমুলেটেড স্টোরেজ ক্ষমতা পরিবর্তনের জন্য ( লোকাল ডাঁটা জন্য স্টোরেজ স্পেস, যেমনটা একটি মোবাইল ফোনে ফ্ল্যাশ স্টোরেজ বা একটি কম্পিউটারে হার্ড ড্রাইভ), -partition-size প্যারামিটার বদল করুন। ডিফল্ট ৫১২এমবি, কিন্তু টেস্ট করার জন্য আপনি যেকোনো সাইজ বলে দিতে পারবেন।

+

নেটওয়ার্ক কানেকটিভিটি

+

যদি কোনো কারণে আপনি আপনার এমুলেটরটিকে ইন্টারনেট-এর না সংযুক্ত না করাতে পারেন তাহলে কমান্ডলাইন-এ নিচের কমান্ডটি প্রবেশ করান

+
adb shell setprop net.dns1 10.0.2.3
diff --git "a/files/bn/archive/b2g_os/\340\246\253\340\246\276\340\246\257\340\246\274\340\246\276\340\246\260\340\246\253\340\246\225\340\247\215\340\246\270_\340\246\223\340\246\217\340\246\270_\340\246\270\340\246\277\340\246\256\340\247\201\340\246\262\340\247\207\340\246\237\340\246\260_\340\246\254\340\247\215\340\246\257\340\246\254\340\246\271\340\246\276\340\246\260_\340\246\225\340\246\260\340\246\276/index.html" "b/files/bn/archive/b2g_os/\340\246\253\340\246\276\340\246\257\340\246\274\340\246\276\340\246\260\340\246\253\340\246\225\340\247\215\340\246\270_\340\246\223\340\246\217\340\246\270_\340\246\270\340\246\277\340\246\256\340\247\201\340\246\262\340\247\207\340\246\237\340\246\260_\340\246\254\340\247\215\340\246\257\340\246\254\340\246\271\340\246\276\340\246\260_\340\246\225\340\246\260\340\246\276/index.html" new file mode 100644 index 0000000000..d4b6547726 --- /dev/null +++ "b/files/bn/archive/b2g_os/\340\246\253\340\246\276\340\246\257\340\246\274\340\246\276\340\246\260\340\246\253\340\246\225\340\247\215\340\246\270_\340\246\223\340\246\217\340\246\270_\340\246\270\340\246\277\340\246\256\340\247\201\340\246\262\340\247\207\340\246\237\340\246\260_\340\246\254\340\247\215\340\246\257\340\246\254\340\246\271\340\246\276\340\246\260_\340\246\225\340\246\260\340\246\276/index.html" @@ -0,0 +1,62 @@ +--- +title: ফায়ারফক্স ওএস সিমুলেটর ব্যবহার করা +slug: Archive/B2G_OS/ফায়ারফক্স_ওএস_সিমুলেটর_ব্যবহার_করা +translation_of: Archive/B2G_OS/Simulator +--- +

ফায়ারফক্স ওএস সিম্যুলেটর হলো একটি ডেস্কটপে ব্যবহার উপযোগী একটি টুল যা আপনাকে দেবে একটি ফায়ারফক্স ওএস চালিত মুঠোফোনে আপনার অ্যাপটিকে পরীক্ষা করে দেখার অনুভূতি। ফায়ারফক্স মার্কেটপ্লেস এ জমা দানের পূর্বে অ্যাপগুলোকে যাচাই করে নেবার জন্য এটাই সবচাইতে সহজ ও উপযোগী পদ্ধতি। ফায়ারফক্স ওএস সিম্যুলেটরকে পূর্বে "r2d2b2g" নামে ডাকা হতো, কিন্তু ওটা বড্ড খটমটে শোনাত।

+

সিম্যুলেটরটিকে ডেস্কটপ ফায়ারফক্সের একটি অ্যাড-অন হিসেবে প্যাকেজ করা আছে। ফায়াফক্স ১৭ এবং  তার পরবর্তী ভার্সনগুলোর যে কোনটিতে আপনি এটা ব্যবহার করতে পারেন।

+

যদিওবা ফায়ারফক্স ওএস ডেস্কটপে চালাবার অন্যান্য ব্যবস্থা রয়েছে তবুও অ্যাপ ডেভেলপারদের জন্য এটাই সবচাইতে ভালো আর উপযোগী। যদি আপনি ফায়ারফক্স ওএস এর একজন কোর ওএস প্লাটফর্ম ডেভেলপার হয়ে থাকেন কিংবা অনুবাদক হিসেবে কাজ করেন তো আপনার চাহিদা আরও ভালোভাবে মেটাতে আরো বিভিন্ন টুল রয়েছে। সিম্যুলেটর এ্যাড-অনটিতে অন্তর্ভূক্ত রয়েছে টেস্ট এনভায়রনমেন্টে অ্যাপ যুক্ত করার ব্যবস্থা এবং এটিতে রিমোট ডিবাগিং, ওয়েব কনসোল এবং অন্যান্য ফিচারের সমর্থন রয়েছে। এটাতে আরো আছে একটি দৃশ্যমান হোম বাটন যা আপনি ক্লিক করতে পারেন এবং এটি ইউজার এজেন্ট স্ট্রিংকে ফায়ারফক্স ওএস ডিভাইসে ব্যবহৃত স্ট্রিংয়ের ন্যায় সেট করে। ফলে, একজন অ্যাপ ডেভেলপারকে প্রায় সব ধরণের স্বাচ্ছন্দ্যময় আর উপযোগী পরিবেশই তৈরী করে দেয়া হচ্ছে।

+

ফায়ারফক্স ওএস সিম্যুলেটর ইন্সটল করা

+
    +
  1. ফায়ারফক্স ব্রাউজার ব্যবহার করে, এই লিংকটিতে যান: https://addons.mozilla.org/addon/firefox-os-simulator/
    2. +
  2. Add to Firefox (ফায়ারফক্সে যুক্ত করুন) - তে ক্লিক করুন। এটা বেশ বড় আকারের ফাইল। ডাউনলোড করা শেষ হলে স্ক্রিনের নির্দেশনাগুলো অনুসরণ করুন।
    3. +
+
+

অ্যাড-অনটির আকার বেশ বড় হবার কারনে ইনস্টল করার সময় কিছু সময়ের জন্য ফায়ারফক্স থেমে যেতে পারে এবং আনরেসপন্সিভ স্ক্রিপ্ট (unresponsive script) উইন্ডো দেখাতে পারে। এটার কারন অবশ্য বাগ ৮১৪৫০৫. যদি এমনটা ঘটে তবে Continue (অবিরত থাকুন) বোতামটি চাপুন, এবং তাতে ফায়ারফক্স অ্যাড-অনটির ইনস্টল করতে থাকবে।

+
+

সিম্যুলেটর চালু করা

+
    +
  1. ফায়ারফক্স মেন্যু (Windows) কিংবা Tools (সরঞ্জামাদি) মেন্যু (ম্যাক, লিনাক্স), থেকে Web Developer (ওয়েব মানোন্নয়নকারী) তে যান এবং Firefox OS Simulator (ফায়ারফক্স ওএস সিম্যুলেটর) এ ক্লিক করুন। ড্যাশবোর্ডটি সামনে চলে আসবে। +

    Dashboard

    +
    2. +
  2. বন্ধ করা রয়েছে বোতামটিতে ক্লিক করুন। এটা চালু রয়েছে বোতামে পরিবর্তিত হবে এবং ফায়ারফক্স ওএস নিজস্ব উইন্ডো নিয়ে চালু হবে। প্রদর্শিত উইন্ডোটি পূর্বনির্ধারিত ৩২০x৪৮০ মাপে দেখা যাবে।
    +

    Simulator

    +

    সিম্যুলেটরটিকে বন্ধ করে দিতে ড্যাশবোর্ড থেকে Running (চালু রয়েছে) বোতামে চাপ দিন অথবা সিম্যুলেটর উইন্ডো বন্ধ করে দিন।

    +
    3. +
+
+

উল্লেখ্য: আপনি Developer Tools (মানোন্নয়নকারী সরঞ্জামাদি) থেকে কমান্ড লাইন ব্যবহার করে যথাক্রমে firefoxos start এবং firefoxos stop কমান্ড দিয়ে সিম্যুলেটরটিকে চালু এবং বন্ধ করতে পারবেন।

+
+

সিম্যুলেটরের অভ্যন্তরে পরিচালনা

+

সোয়াইপ মোশন অনুকরণ করতে চাইলে মাউস দিয়ে ক্লিক ও ড্র্যাগ করুন। মাউসের স্ক্রল হুইলটি এ্যাপকে উপরে নিচে ওঠানামা করাবে, যেমন Settings এ্যাপ। লং প্রেস (long press) সিম্যুলেট করার জন্য মাউসের বাটন চেপে ধরে রাখুন।

+

হোম স্ক্রিনে ফিরে যেতে চাইলে সিম্যুলেটরের নিচের হোম বাটনে চাপ দিন, অথবা আপনার কীবোর্ডের Home কী-তে চাপ দিন। যেসকল ম্যাক কীবোর্ডের Home কী নেই, সেখানে Fn + বাম এ্যারো ব্যবহার করা যেতে পারে।

+

কনসোল চেকবক্স

+

আপনার এ্যাপ নিয়ে কাজ করার সময় উদ্ভুত এরর বা ত্রুটিগুলো খুঁজে পাবার জন্য সিম্যুলেটর চালু করার পূর্বে Console চেকবক্সে ক্লিক করে নিন, এতে একটি এরর কনসোল (Error Console) চালু হয় উদ্ভুত এররসমূহ প্রদর্শন করবে।

+

সিমুলেটরে অন্তর্ভুক্ত ওয়েব এপিআই(Web API) সমূহ

+

মোজিলা নেটিভ প্লাটফর্মের সুযোগ সুবিধা ওপেন ওয়েব এ্যাপে প্রদান করার জন্য বিভিন্ন ওয়েব এপিআই (WebAPI) নিয়ে কাজ করছে। বর্তমান সিম্যুলেটরে সমর্থিত ওয়েব এপিআইসমূহ হল:

+ +

সিম্যুলেটরে একটি অ্যাপ ইনস্টল করা

+

সিম্যুলেটরে হোস্টেড এ্যাপ (Hosted App) ইন্সটল করতে চাইলে, URL বক্সে এ্যাপটির ম্যানিফেস্টের URL টি লিখুন এবং  Add Manifest বাটনে চাপ দিন। এর ফলে এ্যাপটি সিম্যুলেটরে ইন্সটল হবে। আপনার পরীক্ষা করার জন্য নিচে একটি পরীক্ষামূলক আবহাওয়া পূর্বাভাসের এ্যাপের ম্যানিফেস্টের লিংক দেওয়া হল।

+
http://jlongster.github.com/weatherme/manifest.webapp
+

এ্যাপের আইকনটি হোমস্ক্রিনগুলোর যেকোন একটিতে যুক্ত হবে।

+

You can also install a plain website in the same way. Just type the website's URL in the box and click Add URL, and an icon for the site will be added to a home screen. Autocompletion works if you have the website open in another tab.

+

To install a packaged app in the Simulator, click the Add Directory button, then select the mini-manifest of the app on your local filesystem.

+

To remove an app from the Simulator, click the Remove link for the app in the dashboard. You may have to restart the Simulator to see it gone.

+

একটি অ্যাপ আপডেট করা

+

If you are working on an app and need to update it in the Simulator, click the app's Update button in the dashboard. You will have to restart the Simulator. Hosted apps follow the usual rules for Website caching and working with appcache.

+

বাগ রিপোর্ট করা

+

মনে রাখবেন এই সিমুলেটরটি একেবারেই নতুন একটি টুল এবং বর্তমানে ডেভেলপমেন্ট পর্যায়ে রয়েছে। যদি আপনি এতে কোনরূপ ত্রুটি / বাগ দেখতে পেলে অনুগ্রহ করে আমাদেরকে জানিয়ে দিন।

+

অতিরিক্ত তথ্য

+

সিমুলেটরটি ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট  (যা বিটুজি(B2G)  ডেস্কটপ ক্লায়েন্টও বলা হয়),
+ ফায়ারফক্স ওএস এর একটি বিল্ড যা উইন্ডোজ,ম্যাক এবং লিনাক্সে চলে। ফায়ারফক্স ওএস সিমুলেটর
+ ফায়ারফক্স ওএস ডেস্কটপ এ অ্যাপ নিরীক্ষা করা সহজ করে দিয়েছে কারণ এটি পরিবেশ(environment)এ অ্যাপ যোগের বৈশিষ্ট্য অর্ন্তভুক্ত করেছে এবং অ্যাপ ডেভেলপারদের
+ দরকার অনুযায়ী এটিকে কনফিগার/বিস্তৃত করা সম্ভব।
+ যদিও সিমুলেটরটি ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট ব্যবহার করে করে ,বিটুজি(B2G) ডেস্কটপ
+ গায়া এবং বিটুজি(B2G) এর ক্ষেত্রে প্রযোজ্য ডকুমেন্টেশন সিমুলেটর এর ক্ষেত্রেও কিছু ক্ষেত্রে
+ প্রযোজ্য। এখানে সে সমস্ত ডক এর কিছু দেওয়া হল :

+

ফায়ারফক্স ওএস এর ডেস্কটপ ক্লায়েন্ট ব্যবহার করা

+

গায়া (Gaia) হ্যাক করা

diff --git a/files/bn/archive/css3/index.html b/files/bn/archive/css3/index.html new file mode 100644 index 0000000000..eaf80dc064 --- /dev/null +++ b/files/bn/archive/css3/index.html @@ -0,0 +1,576 @@ +--- +title: CSS3 +slug: Archive/CSS3 +tags: + - CSS + - CSS Reference + - NeedsTranslation + - সিএসএস +translation_of: Archive/CSS3 +--- +

CSS3  ক্যাস্কেডিং স্টাইল শীট ভাষার সর্বশেষ সংস্করণ, যা মূলত CSS2.1 এর ওপর কাজ করে, একে আরো উন্নত করে বানানো হয়েছে। এতে আছে অনেক প্রত্যাশিত, নতুন ফিচার, যেমনঃ বাঁকানো কর্নার (round corner), ছায়া (shadow), গ্র্যাডিয়েন্ট, transitions অথবা এনিমেশন। আরও আছে নতুন লে-আউট যেমন বহু-কলাম, ফ্লেক্সিবল বক্স বা গ্রিড লে-আউট। যেসব অংশ এখনো পরীক্ষামূলক, তাদের কোডের আগে ভেন্ডর এর প্রিফিক্স দেওয়া আছে। এসব পরীক্ষামূলক অংশগুলো ব্যবহার না করাই ভাল, আর করলেও অনেক সাবধানে করতে হবে। কারণ এদের সিনট্যাক্স আর ব্যবহারবিধি ভবিষ্যতে পরিবর্তিত হতে পারে।  

+ +

মডিউল সমূহ এবং মান নির্ধারণ প্রক্রিয়া

+ +

২০০২ এর আগস্ট থেকে ২০১১ এর জুন, অর্থাৎ প্রায় ৯ বছর লেগেছে সিএসএস ২ এর সুপারিশকৃত অবস্থায় আসতে। আনুষঙ্গিক কিছু বৈশিষ্ট্যের কারনেই এত বেশি সময় লেগেছে। ত্রুটিবিহীন বৈশিষ্ট্য গুলোর আদর্শিকিকরণ প্রক্রিয়া তরান্বিত করার জন্য W3C এর সিএসএস কর্মকর্তা দল বেইজিং ডকট্রিন নামক একটি সিদ্ধান্ত নেয় যে, সিএসএস-কে ছোট ছোট ভাগে ভাগ করা হবে, এবং ভাগ গুলোকে মডিউল বলা হবে। এই মডিউল গুলোর প্রত্যেকটি এখন এই ভাষার স্বাধীন অংশ এবং নিজস্ব গতিতে আদর্শিকিকরণের দিকে এগিয়ে যাচ্ছে। একদিকে যখন কিছু মডিউল W3C এর ইতোমধ্যে সুপারিশকৃত অবস্থায় রয়েছে, তখন আরেক দিকে কিছু মডিউল এখনো খসড়া পর্যায়েই রয়ে গেছে। আবার নতুন প্রয়োজন চিহ্নিত হলে নতুন মডিউলও যুক্ত হচ্ছে।

+ +

CSS Modules and Snapshots as defined since CSS3 আনুষ্ঠানিকভাবে সিএসএস এর কোন আদর্শ মান নেই। প্রত্যেকটা মডিউল স্বাধীনভাবে আদর্শিকিকরণ করা হচ্ছে, তাই আদর্শ সিএসএস এর মধ্যে পূর্ণাঙ্গ মডিউল গুলোর সংশোধিত এবং বর্ধিত সিএসএস২.১ রয়েছে। এখানে প্রত্যেকটির একই স্তরে হওয়াটা জরুরী নয়। সময়ের প্রত্যেকটি পর্যায়ে সিএসএস২.১ এবং পূর্ণাঙ্গ মডিউল সমূহের তালিকাসহ আদর্শ সিএসএস এর একটি চিত্র বর্ণনা করা যাবে।

+ +

W3 কনসোর্টিয়াম নির্দিষ্ট সময় পর পর এধরনের চিত্র প্রকাশ করে। যেমনঃ ২০০৭ বা ২০১০ এ করেছিল।

+ +

যদিও আজ লেভেল ৩ এর উপরের কোন মডিউল এখন আদর্শ নয়, তবে এটা ভবিষ্যতে পরিবর্তিত হবে। কিছু মডিউল, যেমনঃ সিলেক্টর ৪ বা সিএসএস বর্ডার সমূহ এবং ব্যাকগ্রাউন্ড লেভেল ৪ ইতোমধ্যে সম্পাদকের খসড়াতে চলে এসেছে। কিন্তু এগুলো এখনো প্রথম প্রকাশিত কার্যকর খসড়া অবস্থায় পৌছেনি।

+ +

সিএসএস মডিউল সমূহের অবস্থা

+ +

স্থিতিশীল মডিউল সমূহ

+ +

অল্প কিছু সিএসএস মডিউল ইতোমধ্যে স্থিতিশীল অবস্থায় আছে এবং CSSWG এর সুপারিশকৃত তিনটি পর্যায়ের একটিঃ Candidate Recommendation এ পৌছেছে। অর্থাৎ প্রস্তাবিত সুপারিশ বা ইতোমধ্যে সুপারিশ করা হয়েছে এমন অবস্থায় রয়েছে। এগুলো কোন প্রকার প্রেফিক্স ছাড়াই ব্যবহার করা যাবে। তবে অল্প কিছু বৈশিষ্ট্য বাদ পড়ে যেতে পারে।

+ +

এই মডিউল গুলো সিএসএস২.১ এর বৈশিষ্ট্য সমূহ সংশোধিত ও বর্ধিত করে, যা সিএসএস২.১ এর প্রাণ বলে বিবেচনা করা হয়। সবকিছু মিলিয়ে এগুলো-ই সিএসএস এর বর্তমান চিত্র।

+ + + + + + + + + + + +
{{ SpecName("CSS3 Colors", "", "") }}{{ Spec2("CSS3 Colors") }} since June 7th, 2011
+

এটি {{ cssxref("opacity") }} প্রপার্টি যুক্ত করে, এবং {{cssxref("<color>")}} মান তৈরি করার জন্য hsl(), hsla(), rgba() ও rgb()ফাংশন ব্যবহার করে। এটা currentColor কিওয়ার্ডকেও বৈধ রঙ হিসেবে ব্যবহারের সুযোগ দেয়।

+ +

transparent রঙও এখন একটি বাস্তব রঙ (আলফা চ্যানেলের সমর্থনের জন্য ধন্যবাদ) এবং এটি এখন rgba(0,0,0,1.0) এর বিকল্প।

+ +

এটা এখন সিস্টেম-কালার কিওয়ার্ড সমূহ, যা উৎপাদন কাজে ব্যবহার করা উচিত না, তা সমর্থন করে না।

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Selectors", "", "") }}{{ Spec2("CSS3 Selectors") }} since September 29th, 2011
+

Adds:

+ +
    +
  • Substring matching attribute selectors, E[attribute^="value"] , E[attribute$="value"] , E[attribute*="value"] .
    • +
  • New pseudo-classes: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.
    • +
  • Pseudo-elements are now characterized by two colons rather then one: :after becomes {{ cssxref("::after") }}, :before becomes {{ cssxref("::before") }}, :first-letter becomes {{ cssxref("::first-letter") }}, and :first-line becomes {{ cssxref("::first-line") }}.
    • +
  • The new general sibling combinator ( h1~pre ).
    • +
+
+ +

The next iteration of the Selectors specification is already in progress, though it still hasn't reached the First Public Working Draft stage.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Namespaces", "", "") }}{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011
+

Adds the support for the XML Namespaces by defining the notion of CSS qualified name , using the ' | ' syntax and adding the {{ cssxref("@namespace") }} CSS at-rule.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Media Queries", "", "") }}{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012
+

Extends the former media type ( print, screen, … ) to a full language allowing queries on the device media capabilities like only screen and (color) .

+ +

Media queries are not only used in CSS document but also in some attributes of HTML Elements, like the {{ htmlattrxref("media","link") }} attribute of the {{ HTMLElement("link") }} element.

+
+ +

The next iteration of this specification is in the work, allowing to tailor a Web site regarding the input methods available on the user agent, with new media features like hover or pointer. Detection of EcmaScript support, using the script media features is also proposed.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Style", "", "") }}{{ Spec2("CSS3 Style") }} since November 7th, 2013
Formally defines the syntax of the content of the HTML style global attribute.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Backgrounds", "", "") }}{{ Spec2("CSS3 Backgrounds") }}
+

Adds:

+ +
    +
  • Support, on backgrounds, for any type of {{cssxref("<image>")}}, and not only for uri() defined ones.
    • +
  • Support for multiple background images.
    • +
  • The {{ cssxref("background-repeat") }} space and round values, and for the 2-value syntax of this CSS property.
    • +
  • The {{ cssxref("background-attachment") }} local value.
    • +
  • The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }}, and {{ cssxref("background-clip") }} properties.
    • +
  • Support for curved border corners, with the CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }}, and {{ cssxref("border-bottom-right-radius") }} properties.
    • +
  • Support for the use of an {{cssxref("<image>")}} as the border with the CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} properties.
    • +
  • Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.
    + At risk : due to insufficient browser support, this feature is at risk to be postponed to the next iteration of this module.
    • +
  • Support for shadows of the element with the CSS {{ cssxref("box-shadow") }} property.
    + At risk : due to insufficient browser support, the animability of this feature is at risk, and may be postponed to the next iteration of this module .
    • +
+
+ +

The CSS4 iteration of the Backgrounds and Borders specification is already in progress, though it still hasn't reached the First Public Working Draft stage, it plans to add the ability to clip a border (with the CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, and {{ cssxref("border-clip-left") }} properties) or to control the shape of the border in a corner (using the CSS {{ cssxref("border-corner-shape") }} property).

+ + + + + + + + + + + +
{{ SpecName("CSS3 Multicol", "", "") }}{{ Spec2("CSS3 Multicol") }}
Adds support for easy multi-column layouts using the CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Speech", "", "") }}{{ Spec2("CSS3 Speech") }}
Defines the speech media type, an aural formatting model and numerous properties specific for speech-rendering user agents.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Images", "", "") }}{{ Spec2("CSS3 Images") }}
+

Defines the {{cssxref("<image>")}} data type.

+ +

Extends the url() syntax to support image slices using media fragments.

+ +

Adds:

+ +
    +
  • The dppx unit to the {{cssxref("<resolution>")}} data type.
    • +
  • The image() function as a more flexible alternative to url() to define an image from an url.
    + At risk : due to insufficient browser support, standardization of the image() function may be postponed to the next iteration of this module .
    • +
  • Support for linear-gradient(), repeating-linear-gradient(), radial-gradient() and repeating-radial-gradient().
    • +
  • The ability to define how a replaced element should fit in its element, using the CSS {{ cssxref("object-fit") }} property.
    + At risk : due to insufficient browser support, standardization of the {{ cssxref("object-fit") }} and property may be postponed to the next iteration of this module .
    • +
  • The ability to override the resolution and orientation of an external image using the CSS {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties.
    + At risk : due to insufficient browser support, standardization of the {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties may be postponed to the next iteration of this module .
    • +
+
+ +

The CSS Image Values and Replaced Content Level 4 which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Values", "", "") }}{{ Spec2("CSS3 Values") }}
+

Makes initial and inherit keywords usable on any CSS property.

+ +

Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.

+ +

Adds:

+ +
    +
  • Definition for new font-relative length units: rem and ch .
    • +
  • Definition for viewport-relative length units: vw, vh, vmax, and vmin .
    • +
  • Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the reference pixel .
    • +
  • Definition for {{ cssxref("<angle>") }}, {{cssxref("<time>")}}, {{cssxref("<frequency>")}}, {{cssxref("<resolution>")}}.
    • +
  • Normative value to the definition of {{cssxref("<color>")}}, {{cssxref("<image>")}}, and {{ cssxref("<position>") }}.
    • +
  • Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and toggle() functional notations.
    + At risk: due to insufficient browser support, standardization of the calc(), attr(), and toggle() functional notations may be postponed to the next iteration of this module.
    • +
+
+ +

Several types definition, like <ident> and <custom-ident>, have been deferred to CSS Values and Units Module Level 4.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Flexbox", "", "") }}{{ Spec2("CSS3 Flexbox") }}
Add a flexbox layout to the CSS {{ cssxref("display") }} property and several new CSS properties to control it: {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Conditional", "", "") }}{{ Spec2("CSS3 Conditional") }}
Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside {{ cssxref("@media") }} and the adding of a new CSS at-rule, {{ cssxref("@supports") }}, and a new DOM method {{domxref("CSS.supports()")}}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Text-decoration", "", "") }}{{ Spec2("CSS3 Text-decoration") }}
+

Extends:

+ +
    +
  • the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.
    • +
+ +

Adds:

+ +
    +
  • Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.
    • +
  • Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.
    • +
+ +

Precises:

+ +
    +
  • The paint order of the decorations.
    • +
+ +

At risk: due to insufficient browser support, standardization of the text-decoration-skip, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to the next iteration of this module.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Fonts", "", "") }}{{ Spec2("CSS3 Fonts") }}
+

Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.

+ +

Adds:

+ +
    +
  • Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.
    • +
  • The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.
    • +
  • The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.
    • +
  • The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.
    • +
  • The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.
    • +
  • The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-features-values") }} at-rule.
    • +
  • The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.
    • +
+
+ +

বিশোধন প্রক্রিয়াধীন মডিউল সমূহ

+ +

Specifications that are deemed to be in the refining phase are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Basic UI", "", "") }}{{ Spec2("CSS3 Basic UI") }}
+

Adds:

+ +
    +
  • The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.
    + At risk: due to insufficient browser support, standardization of the padding-box value may be postponed to the next iteration of this module .
    • +
  • Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.
    + At risk: due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to the next iteration of this module .
    • +
  • Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new icon value of the CSS {{ cssxref("content") }} property.
    + At risk: due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the icon value may be postponed to CSS4.
    • +
  • Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.
    • +
  • Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.
    • +
  • Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.
    + At risk: due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("<string>")}} values may be postponed to the next iteration of this module .
    • +
  • The ability to define the hotspot of a cursor as well as the new none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in, zoom-out, extending the {{ cssxref("cursor") }} property.
    • +
  • The ability to specify the sequential navigation order (that is the tabbing order ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.
    + At risk: due to insufficient browser support, standardization of the navigation properties may be postponed to the next iteration of this module .
    • +
  • The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.
    + At risk: due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to the next iteration of this module .
    • +
+
+ +

An early list of what could be in the next iteration of the CSS Basic User Interface Module is available.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Transitions", "", "") }}{{ Spec2("CSS3 Transitions") }}
Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Animations", "", "") }}{{ Spec2("CSS3 Animations") }}
Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Transforms", "", "") }}{{ Spec2("CSS3 Transforms") }}
+

Adds:

+ +
    +
  • the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: matrix(), translate(), translateX(), translateY(), scale(), scaleX(), scaleY(), rotate(), skewX(), and skewY().
    • +
  • the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: matrix 3d(), translate3d(), translateZ(),  scale3d(), scaleZ(), rotate3d(), rotateX() ,rotateY(), rotateZ(), and perspective().
    • +
+ +

Note: this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Fragmentation", "", "") }}{{ Spec2("CSS3 Fragmentation") }}
Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Text", "", "") }}{{ Spec2("CSS3 Text") }}
+

Extends:

+ +
    +
  • the CSS {{ cssxref("text-transform") }} property with the value full-width.
    • +
  • the CSS {{ cssxref("text-align") }} property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text.
    • +
  • the CSS {{ cssxref("text-align") }} property with a {{cssxref("<string>")}} value to align on that character. This is useful to align number on the decimal point.
    • +
  • the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.
    • +
+ +

Adds:

+ +
    +
  • Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.
    • +
  • Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.
    • +
  • Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.
    • +
  • Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.
    • +
+
+ +

A few features present in early CSS Text Level 3 draft have being postponed to the next iteration of this module .

+ + + + + + + + + + + +
{{ SpecName("CSS3 Variables", "", "") }}{{ Spec2("CSS3 Variables") }}
Defines a mechanism allowing to define variables in CSS.
+ +

সংশোধন প্রক্রিয়াধীন মডিউল সমূহ

+ +

Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntax are tested and often implemented.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Writing Modes", "", "") }}{{ Spec2("CSS3 Writing Modes") }}
Defines the writing modes of both horizontal and vertical scripts and precises how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.
+ +

গবেষণাধীন মডিউল সমূহ

+ + + + + + + + + + + +
{{ SpecName("CSS4 Images", "", "") }}{{ Spec2("CSS4 Images") }}
+

Extends:

+ +
    +
  • the image() functional notation to describe the directionality of the image (rtl or ltr), allowing for bidi-sensitive images.
    • +
  • the {{ cssxref("image-orientation") }} property by adding the keyword from-image, allowing to follow EXIF data stored into images to be considered.
    • +
+ +

Adds:

+ +
    +
  • the image-set() functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.
    • +
  • the element() functional notation allowing the use of part of the page as image.
    • +
  • the cross-fade() functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.
    • +
  • the conic-gradient() and repeating-conic-gradient() functional notation describing a new type of gradient.
    • +
  • the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Device", "", "") }}{{ Spec2("CSS3 Device") }}
Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Grid", "", "") }}{{ Spec2("CSS3 Grid") }}
+

Adds a new layout based on a grid.

+ +

Note: there are current experiment towards merging this specification with the CSS Template Layout .

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 GCPM", "", "") }}{{ Spec2("CSS3 GCPM") }}
Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Exclusions and Shapes", "", "") }}{{ Spec2("CSS3 Exclusions and Shapes") }}
Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Lists", "", "") }}{{ Spec2("CSS3 Lists") }}
Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Regions", "", "") }}{{ Spec2("CSS3 Regions") }}
Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.
+ +

 

diff --git a/files/bn/archive/index.html b/files/bn/archive/index.html new file mode 100644 index 0000000000..9cbd3c38b3 --- /dev/null +++ b/files/bn/archive/index.html @@ -0,0 +1,20 @@ +--- +title: Archive of obsolete content +slug: Archive +translation_of: Archive +--- +

(bn-BD translation)

+ +

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("/en-US/docs/Archive", 2, 0, 1)}}

diff --git a/files/bn/archive/mozilla/index.html b/files/bn/archive/mozilla/index.html new file mode 100644 index 0000000000..0acec76e6d --- /dev/null +++ b/files/bn/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/bn/archive/mozilla/marketplace/index.html b/files/bn/archive/mozilla/marketplace/index.html new file mode 100644 index 0000000000..04b24f0060 --- /dev/null +++ b/files/bn/archive/mozilla/marketplace/index.html @@ -0,0 +1,104 @@ +--- +title: ফায়ারফক্স মার্কেটপ্লেস +slug: Archive/Mozilla/Marketplace +tags: + - মার্কেটপ্লেস +translation_of: Archive/Mozilla/Marketplace +--- +
ফায়ারফক্স মার্কেটপ্লেস এইচটিএমএল৫ দ্বারা তৈরি ওয়েব অ্যাপলিকেশন এর জন্য একটি মুক্ত এবং অমালিকানাধীন অন-লাইন মার্কেটপ্লস।
+ +
+

ফায়ারফক্স মার্কেটপ্লেস ডেভলপারদের সক্ষম করেছে বৈশিষ্ট-সূচক ওয়েব টেকনোলজি, ভাষা এবং টুলস দ্বারা ক্রস-প্লাটফর্ম অপেন ওয়েব অ্যাপস তৈরি করতে। মজিলা এটার মর্মবস্তু মূল্যবোধ আনছে — মুক্ত নীতি, স্বাধীনতা, ব্যবহারকারীর বাছাই— অ্যাপস এর দুনিয়াতে।

+
+ +
+
+

আপনার অ্যাপস প্রকাশনা

+ +
+
ফায়ারফক্স মার্কেটপ্লেস-এ প্রকাশনা
+
ফায়ারফক্স মার্কেটপ্লেস এ একটি অ্যাপ প্রকাশ করতে ডকুমেন্ট বিশেষ।
+
অ্যাপ প্রকাশনা অপশন
+
একটি ওপেন ওয়েব অ্যাপ তৈরি করার পর, সমগ্র বিশ্বে প্রকাশনার জন্য ভিন্ন ভিন্ন অপশন উপস্থিত আছে। এই অনুচ্ছেদটি ব্যাখ্যা করে কি কি উপস্থিত আছে।
+
সাধারণ অ্যাপ প্রকাশনার বিষয়বলী
+
ওপেন ওয়েব অ্যাপ প্রকাশনার উপর সাধারণ তথ্য এবং প্রয়োজনীয় টিপস।
+
ফায়ারফক্স মার্কেটপ্লেস APIs
+
মজিলার ফায়ারফক্স মার্কেটপ্লেস APIs এর মূল রেফারেন্স গাইডের লিংক , যেখানে আপনি কনফিগার করতে পারবেন অ্যাপ পেমেন্ট একাউন্ট, স্বয়ংক্রিয় অ্যাপ জমা দিয়া এবং আরও অনেক কিছু।
+
+
+ +
+

অর্থ উপার্জন

+ +
+
আপনার অ্যাপস দিয়ে অর্থ উপার্জন
+
আপনি আপনার সর্বশেষ অ্যাপ এর কোডিং এর জন্য কঠোর কাজ করেছেন, কিন্তু কিভাবে আপনি কিছু ফিরতি পাবেন যখন ইহা প্রকাশিত হবে? এই সেকশন সে সকল তথ্য প্রদান করবে যা আপনার অ্যাপ এর পেমেন্ট বাস্তবায়ণে প্রয়োজন হবে, সেটা মার্কেটপ্লেস পেমেন্ট হোক অথবা ইন-অ্যাপ পেমেন্ট হোক।
+
+ +

অ্যাপস ডেভেলপারদের জন্য টুলস

+ + + +

আপনি এই সিমুলেটর ব্যবহার করে ফায়ারফক্স এপ্লিকেশন আপনার পিসিতে চালাতে পারবেন। এজন্য আপনাকে আলাধা কোন ডিভাইস লাগবে না। আপনি একটি এড-অন ডাউনলোড করেই সিমুলেটরটি চালাতে পারবেন।

+ + + +

আপনার নিজের মার্কেটপ্লেস তৈরিতে

+ +
+
একটি স্টোর তৈরি
+
আপনার অ্যাপটি বিতরণ করতে আপনাকে ফায়ারফক্স মার্কেটপ্লেস ব্যবহার করতে হবে না।
+
+
+
+ + + +
    +
  1. অ্যাপ জমা ও  পর্যালোচনা + +
      +
    1. পুন: জমার তালিকা।
      2. +
    2. ফায়ারফক্স মার্কেটপ্লেসে অ্যাপ জমা।
      3. +
    3. আপনার অ্যাপ এর রেটিং পেতে।
      4. +
    4. মার্কেটপ্লেস পর্যালোচনা নির্ণয়ক।
      5. +
    5. ফায়ারফক্স মার্কেটপ্লস FAQ
      6. +
    +
    2. +
  2. অ্যাপ প্রকাশনা +
      +
    1. নিজেই অ্যাপস প্রকাশনা করা।
      2. +
    2. প্যাকেজড অ্যাপস
      3. +
    3. একটি স্টোর তৈরি করা।
      4. +
    4. অ্যাপ এর জন্য একটি সাব-ডোমেইন যোগ করা।
      5. +
    5. অ্যাপস আপডেট করা।
      6. +
    6. মার্কেটপ্লেস স্ক্রিন-সট নির্ণয়ক।
      7. +
    7. গোপনীয়তার নীতি।
      8. +
    +
    3. +
  3. অর্থ উপার্জন +
      +
    1. আপনার অ্যাপ থেকে মুনাফা।
      2. +
    2. মার্কেটপ্লেস পেমেন্টস।
      3. +
    3. মার্কেটপ্লেস পেমেন্টস FAQ
      4. +
    4. পেমেন্টস।
      5. +
    5. অ্যাপ পেমেন্টস গাইড।
      6. +
    6. ইন-অ্যাপ পেমেন্টস।
      7. +
    7. রসিদের যথার্থতা প্রমাণ করতে।
      8. +
    8. অ্যাপ এর মূল্য তালিকা।
      9. +
    9. পেমেন্টস স্ট্যাটাস।
      10. +
    +
    4. +
  4. মার্কেটপ্লেস APIs +
      +
    1. মার্কেটপ্লেস ইউটিলিটি লাইব্রেরি।
      2. +
    2. জমা API
      3. +
    3. পেমেন্ট API
      4. +
    4. মার্কেটপ্লেস API
      5. +
    +
    5. +
diff --git a/files/bn/archive/mozilla/marketplace/options/index.html b/files/bn/archive/mozilla/marketplace/options/index.html new file mode 100644 index 0000000000..428ed88802 --- /dev/null +++ b/files/bn/archive/mozilla/marketplace/options/index.html @@ -0,0 +1,26 @@ +--- +title: Your publication options +slug: Archive/Mozilla/Marketplace/Options +tags: + - Beginner + - Firefox OS + - Landing + - Marketplace + - NeedsTranslation + - Open Web Apps + - Options + - 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/bn/archive/mozilla/marketplace/options/packaged_apps/index.html b/files/bn/archive/mozilla/marketplace/options/packaged_apps/index.html new file mode 100644 index 0000000000..017605333f --- /dev/null +++ b/files/bn/archive/mozilla/marketplace/options/packaged_apps/index.html @@ -0,0 +1,101 @@ +--- +title: প্যাকেজড অ্যাপ +slug: Archive/Mozilla/Marketplace/Options/Packaged_apps +tags: + - Apps + - Beginner + - Firefox OS + - Mobile + - অ্যাপস + - ফায়ারফক্স ওএস + - মার্কেটপ্লেস + - মোবাইল +translation_of: Archive/Mozilla/Marketplace/Options/Packaged_apps +--- +
+

সেসব ওপেন-ওয়েব অ্যাপকে প্যাকেজড অ্যাপ  বলা হয় যাদের সব রিসোর্স  বা ফাইল/কোড (HTML, CSS, JavaScript, অ্যাপ মেনিফেস্ট এবং অন্যান্য ফাইল) একটি zip ফাইলে ব্যবহারকারীর কাছে পৌঁছে দেওয়া হয়, কোন ওয়েব সার্ভারে আপলোড করার পরিবর্তে। এই আর্টিকেলে প্যাকেজড অ্যাপের সাথে আপনাকে পরিচিত করা হবে এবং ডেভেলপার হিসেবে আপনার প্যাকেজড অ্যাপ নিয়ে যা যা জানা দরকার, সব তথ্যই এই পাতায় রয়েছে।

+
+ +

প্যাকেজড অ্যাপ হল ওপেন ওয়েব অ্যাপকে কার্যকর করার জন্য অ্যাপ ম্যানিফেস্ট (যা মূল ডিরেক্টরীতে থাকে) ফাইল সহ প্রয়োজনীয় সব উপাদানের একটি জিপ ফাইল। অ্যাপ ম্যানিফেস্ট মূলত অ্যাপটির বর্ননা , যেই আইকনের মাধ্যমে ইন্সটলকৃত অ্যাপটিকে চেনা যাবে এবং এরকম সকল বিষয়ের ধারণা প্রদান করে।  তারপর , এই প্যাকেজটি অ্যাপকে ফায়ারফক্স ওএস ডিভাইস,  অ্যান্ড্রয়েড ডিভাইস এবং ডেস্কটপ এ ইন্সটল করার কাজে ব্যবহৃত হয়। একবার ইন্সটল হওয়ার পর , অ্যাপটি ডিভাইসে চলতে শুরু করে কিন্তু তারপরেও এটি ওয়েব সার্ভারের ডাটাবেজের মত ওয়েবে থাকা রিসোর্স ব্যবহার করতে পারে।

+ +

প্যাকেজড অ্যাপ সাধারনত তিন রকমের হয়: ওয়েব অ্যাপ , প্রিভিলেজড অ্যাপ এবং সার্টিফায়েড অ্যাপ।প্যাকেজড অ্যাপ যেকোন ওপেন ওয়েব অ্যাপকে সরবরাহ করার কাজে ব্যবহার করা গেলেও , প্রিভিলেজড এবং সার্টিফায়েড অ্যাপসমূহে প্রিভিলেজড (বা সুবিধাভোগী) এবং সার্টিফায়েড (বা প্রত্যয়িত) এপিআই এর ব্যবহার নিশ্চিত করার জন্য অ্যাপসমূহ ডিজিটালভাবে সাইন করা থাকে। প্রিভিলেজড অ্যাপসমূহ মার্কেটপ্লেসে রিভিও প্রক্রিয়ার সময় সাইনড হয় আর সার্টিফায়েড অ্যাপসমূহ ডিভাইস ম্যানুফ্যাকচার অথবা অপারেটরদের দ্বারা সাইন করা হয়। 

+ +

প্রিভিলেজড এবং সার্টিফায়েড এপিআই ব্যবহার করার ক্ষমতা ছাড়াও , প্যাকেজড অ্যাপসমূহ প্রথমবার চালু হওয়ার সময় খুব দ্রুত চালু হয় যেহেতু অ্যাপটির সকল উপাদান ইন্সটলেশনের পরে সেটের মধ্যেই রয়ে গেছে। এই সুবিধার কারণে ফায়ারফক্স ওএস ডিভাইস , অ্যান্ড্রয়েড ডিভাইস এবং ডেস্কটপ এ ওপেন ওয়েব অ্যাপকে বিতরণ করার জন্য প্যাকেজড অ্যাপের মাধ্যমে বিতরণ করার ব্যাপারে সুপারিশ করা হয়। 

+ +
+

দ্রষ্টব্য : বর্তমানে ফায়ারফক্স মার্কেটপ্লেস শুধু ওয়েব এবং প্রিভিলেজড প্যাকেজড অ্যাপসমূহকেই সমর্থন করে। আর বিশেষ করে , ফায়ারফক্স মার্কেটপ্লেস ফায়ারফক্স ওএসের জন্য পেইড অ্যাপস এবং ফায়ারফক্স ওএস , ফায়ারফক্সের অ্যান্ড্রয়েড ও ডেস্কটপ সংস্করণের জন্য বিনামুল্যের প্যাকেজড অ্যাপসমূহকে সমর্থন করেI সকল প্লাটফর্মে যাতে পেইড অ্যাপস সহায়তা পাওয়া যায় , সেজন্য উন্নয়নের কাজ চলছে।

+
+ +

প্যাকেজড অ্যাপসের প্রকারভেদ

+ +

মূলত তিন ধরণের প্যাকেজড অ্যাপ রয়েছে: ওয়েব অ্যাপ , প্রিভিলেজড অ্যাপ এবং সার্টিফায়েড অ্যাপ। প্রত্যেক ধরণের প্যাকেজড অ্যাপই ফায়ারফক্স ওএসের মধ্যে বাস্তবায়িত অ্যাপ সিকিউরিটি মডেলের কোন না কোন একটি অংশের অনুরুপ। এই বিভাগটি প্রত্যকটি অ্যাপ সম্পর্কে আরো বিস্তারিত ধারণা দিবে । 

+ +

ওয়েব অ্যাপ

+ +

ওয়েব অ্যাপ হল সেই ধরণের অ্যাপ যেটি প্রিভিলেজড অথবা সার্টিফায়েড এপিআই ব্যবহার করে না। যখন মার্কেটপ্লেসে জমা দেয়া হয় , তখন অ্যাপটির প্যাকেজ সাইনকৃত অবস্থায় থাকে কিন্তু প্রিভিলেজড অথবা সার্টিফায়েড এপিআই এর জন্য যে বিশেষ অথেনটিকেশন প্রক্রিয়া ব্যবহৃত হয় তার ব্যবহার হয় না। প্রিভিলেজড এবং সার্টিফায়েড অ্যাপের জন্য প্রযোজ্য কন্টেন্ট নিরাপত্তা পলিসি (CSPs) এই ধরণের অ্যাপের জন্য প্রযোজ্য না।

+ +

এই ধরণের প্যাকেজ অ্যাপ এর জন্য manifest.webapp ফাইলের মধ্যে থাকা type অংশের প্রয়োজন পরে না, কেননা টাইপ(ওয়েব) এর জন্য থাকা ডিফল্ট ভ্যালু হল ওয়েব অ্যাপ।

+ +

ওয়েব অ্যাপস নিজে নিজে প্রচার করা হতে পারে অথবা ফায়ারফক্স মার্কেটপ্লেসের মাধ্যমে বিতরণযোগ্য হতে পারে। হোস্টেড অ্যাপ পদ্ধতির মাধ্যমেও ওয়েব অ্যাপস প্রকাশ করা যায়।

+ +

সুবিধাভোগী (প্রিভিলেজড) অ্যাপ

+ +

সুবিধাভোগী অ্যাপ হল সেই ধরণের অ্যাপ যেটি প্রিভিলেজড এপিআই ব্যবহার করে এবং এই ধরণের অ্যাপ আই ওএস এবং অ্যান্ড্রয়েডের মত প্লাটফর্মের অ্যাপের সমমানের অ্যাপ হিসেবে বিবেচিত হতে পারে। যখন সুবিধাভোগী অ্যাপস ফায়ারফক্স মার্কেটপ্লেসে জমা দেয়া হয়, তখন এক বিশেষ প্রক্রিয়ায় এটিকে গ্রহণ করা হয়। এই প্রক্রিয়া অ্যাপটির ব্যবহারকারীকে নিশ্চিন্ত করে যে , এই অ্যাপটি নিরাপত্তা , গোপনীয়তা এবং ধারনক্ষমতার ব্যাপারে খুব যত্নের সাথে পরীক্ষা করে দেখা হয়েছে। 

+ +

কোন অ্যাপ সুবিধাভোগী অ্যাপ কিনা তা বোঝাতে , অ্যাপটির manifest.webapp ফাইলের type অংশটুকু যুক্ত করুন এবং এটিকে privileged হিসেবে সেট করুন। আপনার অ্যাপের যতগুলো প্রিভিলেজড এপিআই ব্যবহার করা লাগতে পারে , তার প্রত্যেকটির কথা অ্যাপটির ম্যানিফেস্ট ফাইলের permissions অংশে যুক্ত করতে হবে ।

+ +

ফায়ারফক্স ওএস এবং অ্যান্ড্রয়েড ও ডেস্কটপের জন্য কাজ করা ওয়েব রানটাইম প্রিভিলেজড অ্যাপসের জন্য এই সিএসপি টি প্রয়োগ করে :

+ +
"default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"
+ +

সুবিধাভোগী অ্যাপসমূহ শুধু ফায়ারফক্স মার্কেটপ্লেসের মাধ্যমেই বিতরণযোগ্য হতে পারে।

+ +

প্রত্যয়িত (সার্টিফায়েড) অ্যাপ

+ +
+

প্রত্যয়িত অ্যাপ সাধারণত তৃতীয় পক্ষের ডেভেলপারদের কাছে পাওয়া যাবে না এবং এই ধরণের অ্যাপ ফায়ারফক্স মার্কেটপ্লেসের মাধ্যমেও বিতরন করা হয় না। এপিআই কে সার্টিফাই করার পেছনে দীর্ঘমেয়াদি যে উদ্দেশ্য রয়েছে , তা হল এই প্রক্রিয়া আরো কঠিন করে তোলা যাতে করে তারা প্রিভিলেজড এপিআই হিসেবেও ব্যবহার হতে পারে। আপনি যদি কোন বিশেষ এপিআইকে সহজলভ্য হিসেবে দেখতে আগ্রহী থাকেন , তাহলে  dev-webapps মেইলিং লিস্টে আপনার মতামত প্রদান করুন।

+
+ +

প্রত্যয়িত অ্যাপ হল মূলত সেই ধরণের অ্যাপ যেই অ্যাপ প্রত্যয়িত (সার্টিফায়েড) এপিআই ব্যবহার করে এবং সার্টিফায়েড এপিআই হল সেই এপিআই যা ডিফল্ট ডায়ালার বা ডিভাইসের মধ্যে থাকা সিস্টেম সেটিংস অ্যাপ বা এই ধরণের গুরুত্তপূর্ন সিস্টেম ফাংশনকে ব্যবহার করতে দেয়। সুবিধাভোগী অ্যাপের সাথে যদি আমরা তুলনা করি, প্রত্যয়িত অ্যাপের মধ্যে থাকা সব এপিআই এর অনুমতি ব্যবহারকারীর অনুমতি প্রদানের পুর্বেই দেয়া থাকে। কেননা কোন ডিভাইসের জন্য একটি প্রত্যয়িত অ্যাপকে OEM বা প্রস্তুতকারীর মাধ্যমে অনুমতি পেতে হয়।

+ +

কোন অ্যাপ প্রত্যয়িত অ্যাপ কিনা তা বোঝাতে , অ্যাপটির manifest.webapp ফাইলের type অংশটুকু যুক্ত করুন এবং এটিকে certified হিসেবে সেট করুন। আপনার অ্যাপের যতগুলো প্রিভিলেজড এবং সার্টিফায়েড এপিআই ব্যবহার করা লাগতে পারে , তার প্রত্যেকটির কথা অ্যাপটির ম্যানিফেস্ট ফাইলের permissions অংশে যুক্ত করতে হবে।

+ +

ফায়ারফক্স ওএস সার্টিফায়েড অ্যাপসের জন্য নিম্নের সিএসপি ব্যবহার করে :

+ +
"default-src *; script-src 'self'; object-src 'none'; style-src 'self'"
+ +

এটি মূলত সুবিধাভোগী অ্যাপসের তুলনায় প্রত্যয়িত অ্যাপসের উপর ইনলাইন সিএসপির ব্যাপারে কঠোর নিয়ম-নীতি আরোপের ফল। আপনি যদি এটি করার কারণ সম্পর্কে জানতে চান , তাহলে ডিফল্ট সিএসপি পলিসি এবং ৭৬৮০২৯ নং বাগ দেখুন।

+ +

প্রত্যয়িত অ্যাপসমূহ OEM এবং অপারেটরদের মাধ্যমে আগে থেকেই ডিভাইসে যুক্ত থাকে।

+ +

প্যাকেজড অ্যাপস পরীক্ষা করা

+ +

ফায়ারফক্স ওএস সিমুলেটর অথবা কোন একটি ডিভাইসে পরীক্ষা করার জন্য প্যাকেজড অ্যাপ ইন্সটল করতে চাইলে , অ্যাপ ম্যানেজার ব্যবহার করা নিবন্ধটি দেখুন। অথবা , আপনি চাইলে নিজে নিজেই অ্যাপ প্রকাশ করুন নিবন্ধের পদ্ধতি অনুসরণ করে যে কোন ওয়েব সার্ভার থেকে এটিকে একটি ডিভাইসে ইন্সটল করতে পারেন। মনে রাখবেন , যখন আপনি নিজে নিজে অ্যাপ পাবলিশ করবেন প্যাকেজড ওয়েব অ্যাপ শুধু তখনই ইন্সটল করা যাবে।

+ +

প্যাকেজড অ্যাপস পাবলিশ করা

+ +

প্যাকেজড অ্যাপস পাবলিশ করার জন্য আপনার কাছে দুটি উপায় আছে : ফায়ারফক্স মার্কেটপ্লেসে পাবলিশ করা অথবা নিজে নিজে পাবলিশ করা।

+ +

ফায়ারফক্স মার্কেটপ্লেসে পাবলিশ করা

+ +

ফায়ারফক্স মার্কেটপ্লেসে প্যাকেজড অ্যাপ জমা দেয়ার পদ্ধতি অ্যাপ পাবলিশ করা বিভাগে বর্ননা করা আছে।

+ +

যখন আপনি আপনার প্যাকেজড অ্যাপটি জমা দিবেন , এটার জিপ ফাইল মার্কেটপ্লেসের সার্ভারে জমা থাকে এবং আপনার প্যাকেজড অ্যাপের জিপ ফাইলের মধ্যে থাকা অ্যাপ মেনিফেস্টের উপর ভিত্তি করে মার্কেটপ্লেসটি mini-manifest নামের নতুন একটি মেনিফেস্ট তৈরি করবে। যখন একজন ব্যাবহারকারী আপনার অ্যাপটি ইন্সটল করবে, অ্যাপটি ইন্সটলের জন্য মিনি-মেনিফেস্টটি Apps.installPackage() ফাংশনে চলে যাবে। ইন্সটলেশন এবং হালনাগাদ প্রক্রিয়ার জন্য মিনি-মেনিফেস্টটি থেকে যাবে কিন্তু যখন আপনার অ্যাপ যখন চলবে , তখন এটি কাজ করবে না।

+ +

নিজে নিজেই পাবলিশ করা 

+ +

প্যাকেজড ওয়েব অ্যাপসমূহকে ফায়ারফক্স মার্কেটপ্লেসের বাইরে , নিজের ওয়েব সার্ভারেও পাবলিশ করা সম্ভব ।বিস্তারিত তথ্য  নিজে নিজে অ্যাপস পাবলিশ করা নিবন্ধে দেয়া আছে।

+ +

প্যাকেজড অ্যাপসমূহ হালনাগাদ করা

+ +

অ্যাপসমূহকে হালনাগাদ করার ব্যাপারে আরো তথ্য পেতে , অ্যাপসমূহ হালনাগাদ করা নিবন্ধটি দেখুন।

+ +

আরো তথ্যসমূহ

+ + + +

 

diff --git a/files/bn/archive/mozilla/marketplace/options/self_publishing/index.html b/files/bn/archive/mozilla/marketplace/options/self_publishing/index.html new file mode 100644 index 0000000000..21ab453a35 --- /dev/null +++ b/files/bn/archive/mozilla/marketplace/options/self_publishing/index.html @@ -0,0 +1,144 @@ +--- +title: Publishing apps yourself +slug: Archive/Mozilla/Marketplace/Options/Self_publishing +translation_of: Archive/Mozilla/Marketplace/Options/Self_publishing +--- +
+

এমন অনেক পরিস্থিতি আসতে পারে যখন আপনি আপনার অ্যাপ ফায়ারফক্স মার্কেটপ্লেসের মাধ্যমে প্রকাশ করতে নাও চাইতে পারেন।উদাহরণস্বরুপ, আপনি আপনার সংগঠনের সদস্যদের জন্য অ্যাপ তৈরি করতে পারেন,বেটা টেস্ট চালাতে পারেন অথবা নিজের ইচ্ছেমত কিছু করতে পারেন।এই পাতায় আপনি ফায়ারফক্স মার্কেটপ্লেসের বাইরে নিজস্ব ব্যবস্থাপনায় কীভাবে অ্যপ প্রকাশ করবেন তার বিস্তারিত তথ্য পাবেন

+
+

Open Web Apps are installed into Firefox OS, devices running Firefox for Android and desktops running Firefox for Desktop using {{ domxref("Apps.install") }} or {{ domxref("Apps.installPackage") }}. In both cases, these APIs work by sending the URL of the manifest describing the app to be installed. So the basic requirements for publishing an app yourself are:

+
    +
  1. একটি সার্ভার,যেখানে অ্যাপের মেনিফেস্ট ফাইল থাকবে
    2. +
  2. একটি সার্ভার, যেখানে অ্যাপ (হোস্টেড অ্যাপের ক্ষেত্রে) অথবা অ্যাপের প্যাকেজ জিপ ফাইল থাকবে
    3. +
  3. একটি ওয়েবসাইটে কিছু কোড থাকবে ,যা কল করা যাবে{{ domxref("Apps.install") }}  অথবা {{ domxref("Apps.installPackage") }} করা যাবে (যখন যেটা সর্বোত্তম হয়)
    4. +
+

সীমাবদ্ধতা

+

ওপেন ওয়েবে আপনার নিজস্ব ব্যবস্থায় অ্যাপ প্রকাশের আগে আপনার নিম্নোক্ত সীমাবদ্ধতাগুলো সম্পর্কে সচেতন হওয়া প্রয়োজন

+ +

নিজস্ব ব্যবস্থায় প্রকাশিত প্যাকেজ অ্যাপ

+

You can self-publish a Packaged App by hosting its ZIP on a server, along with a mini-manifest. The mini-manifest must be in the same directory as the ZIP and is used to identify the app to the install process. You then create a script to invoke {{ domxref("Apps.installPackage") }} passing it details of the mini-manifest. Let's look at how to do this in detail:

+
    +
  1. +

    Zip up your app's contents and give it the name package.zip. This file should contain all the app's resource files, including the (main) manifest.

    +
    +

    Caution: Take care when zipping the content you wish to appear in the Packaged App and don't include the directory they are contained in. If you zip up the parent directory, the manifest will end up in the wrong place, and the Packaged App will be invalid.

    +
    +
    2. +
  2. Create a file called manifest.webapp and add the content shown below. This file is known as the mini-manifest, because it's a slightly cut-down version of the manifest file that's included in your Packaged App's ZIP file. It's used by {{ domxref("Apps.installPackage") }} to undertake the installation of your app. For more detailed information on the content, please see Mini-manifest fields below. + 
    {
+    "name": "My sample app",
+    "package_path" : "http://my-server.com/my-app-directory/my-app.zip",
+    "version": "1",
+    "developer": {
+        "name": "A. Developer",
+        "url": "http://my-server.com"
+    }
+}
    +
    3. +
  3. Create the script that will install your app. Here we're using a simple HTML file named index.html , but you can add the script to a button or use any appropriate method to invoke it on your website. The JavaScript on this page calls the Packaged App installer API ({{ domxref("Apps.installPackage") }}) and includes callbacks that provide notification of whether the installation was successful or failed. + 
    <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. Setup the files on your server or website by copying package.zip, package.manifest, and index.html into your chosen directory (my-app-directory in this example).
    5. +
  5. Now you can install the app using a compatible device (such as a Firefox OS phone). Simply open the index.html file (in this example its path is http://my-server.com/my-app-directory/index.html)  and you'll get a prompt asking you to confirm that you want to install the app. Proceed with the installation, and once it's complete your Web page's script will provide an indication of installation success or failure.
    6. +
+
+

Tip: You can host a Packaged App locally and test it on a device. The Web server and the device must be on the same network, and the server must be able to serve requests from the local network. You just need to include the absolute path in the mini-manifest's package_path, in the same way as the absolute path is included normally (see below). Remember to include the port information if you are using a non-standard port, for example http://10.10.12.1:8080/package.zip.

+
+

Mini-manifest fields

+

If you publish your apps in Firefox Marketplace you don't have to worry about creating a mini-manifest, as Firefox Marketplace generates it for you. It does this using the information provided in your app's manifest, the file you included in the app's ZIP. You can find details on the content of this 'main' manifest in App manifest.

+

For a self-published app you need to create your own mini-manifest. The best way to do this is to make a copy of your 'main' manifest and update it as needed. Using a copy will help with the first requirement of a mini-manifest, that the name, version, developer and locales fields must be the same in both (main and mini) manifests. You then have some additional content to add, fields that are unique to the mini-manifest: package_path, release_notes and size.

+
+
+ package_path (required)
+
+ The absolute path (full URL, such as  http://my-server.com/my-app-directory/manifest.webapp) of the location where the app's zip file is stored.
+
+ release_notes (optional)
+
+ Information about this release of the app. On Firefox Marketplace this information is provided as part of the submission process.
+
+
+
+ size (optional)
+
+ The size of the app's zip file in bytes. This information is used by {{ domxref("Apps.installPackage") }} to provide a progress indicator during installation.
+
+

Here is an example:

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

The other fields in this example are:

+
+
+ name (required)
+
+ The app's name. Maximum length is 128 characters.
+
+ version (optional)
+
+ The version of the app.
+
+ developer  (optional)
+
+ Information about the developer, contains the name and url fields. The developer info needs to match between the mini-manifest and the main manifest file in the ZIP.
+
+ locales (optional)
+
+ Localization information. Keys should be in xx-YY format.
+
+ icons (optional)
+
+ Icons for use by the app.
+
+

For more detailed information on the content of manifest files, see App manifest.

+

Self-publishing Hosted Apps

+

Compared to Packaged Apps, self-publication of a Hosted App is more straightforward, if you create its content in the same way as you would for Firefox Marketplace publication. This basically means creating the manifest file for your app. You then need to add the code to invoke {{ domxref("Apps.install") }}. This code is essentially the same as that you would use for a Packaged App, shown above, the only difference being that you can make relative reference to the location of the manifest file if you wish.

+

আরো দেখুন

+ diff --git a/files/bn/archive/mozilla/marketplace/publishing/submit/index.html b/files/bn/archive/mozilla/marketplace/publishing/submit/index.html new file mode 100644 index 0000000000..a6e3468169 --- /dev/null +++ b/files/bn/archive/mozilla/marketplace/publishing/submit/index.html @@ -0,0 +1,10 @@ +--- +title: Submit +slug: Archive/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/bn/archive/mozilla/marketplace/publishing/submit/\340\246\223\340\246\255\340\246\276\340\246\260\340\246\255\340\246\277\340\246\211/index.html" "b/files/bn/archive/mozilla/marketplace/publishing/submit/\340\246\223\340\246\255\340\246\276\340\246\260\340\246\255\340\246\277\340\246\211/index.html" new file mode 100644 index 0000000000..3fecc7f35d --- /dev/null +++ "b/files/bn/archive/mozilla/marketplace/publishing/submit/\340\246\223\340\246\255\340\246\276\340\246\260\340\246\255\340\246\277\340\246\211/index.html" @@ -0,0 +1,122 @@ +--- +title: ওভারভিউ +slug: Archive/Mozilla/Marketplace/Publishing/Submit/ওভারভিউ +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Overview +--- +
+

ফায়ারফক্স মার্কেটপ্লেসে আপনার অ্যাপ উপলব্ধ করতে চাইলে ,আপনাকে  মার্কেটপ্লেসে প্রতিটি অ্যাপ সাবমিট করতে হবে এবং পাবলিশ করার আগে  পর্যালোচনা করা হয়। ফায়ারফক্স মার্কেটপ্লেসে যেভাবে অ্যাপ সাবমিট করতে হয় এই পেজে তার একটা বর্ণনা আছে। পরবর্তী পেজগুলো প্রতিটি ধাপের অতিরিক্ত বিস্তারিত আলোচনা করে।

+
+ +
+

প্রক্রিয়ার প্রতিটি ধাপের অধিক বিবরণের জন্য, Step Heading এর লিঙ্ক অনুসরন করুন অথবা প্রথম ধাপ থেকে সুরু করুন। A diagrammatic representation of the steps is offered at the bottom of this page.

+
+ +

You can also follow the submission process in this video: http://vid.ly/8k2n4w

+ +

The process

+ +

So you want to submit your app to Firefox Marketplace, let's get started:

+ +
+
Step 1 - Sign in to your Developer account
+
+ +
+
Step 2 - Load your app
+
On the Submit an app page: +
    +
  • Select whether the app is free or paid.
    • +
  • Select the platforms the app will be available on.
    • +
  • Select whether the app is hosted or packaged then: +
      +
    • For a hosted app, provide the link to its manifest file.
      • +
    • For a packaged app, upload the package.zip file, and once it has been validated, identify the minimum API requirements.
      • +
    +
    • +
  • Click Continue.
    • +
+
+
Step 3 - Enter your app's details
+
+

On the Edit App Details page:

+ +
    +
  • Modify the app URL if you wish.
    • +
  • Modify the description (provided in the manifest) if you wish.
    • +
  • Select one or two categories.
    • +
  • Provide a Privacy Policy.
    • +
  • Defined a home page and support website if you have them.
    • +
  • Provide a support email address.
    • +
  • Indicate whether the app requires Flash support.
    • +
  • Add at least one screenshot or video.
    • +
  • Provide additional comments for the app reviewer (such as sign in details if the app requires them) - note you'll only be able to modify these notes by submitting a new version of the app.
    • +
  • Select whether the app will be published as soon as approved - note you'll only be able to modify this setting by submitting a new version of the app.
    • +
  • Click Continue.
    • +
+
+
Step 4 - See details of the next steps
+
On the Next Steps page click Continue.
+
Step 5 - Obtain a content rating
+
On the Content Ratings page: +
    +
  • to obtain a new rating click Create an IARC Ratings Certificate and on the IARC Web site, complete the ratings questionnaire.
    • +
  • to enter a rating you've already obtained provide its Submission ID and Security Code.
    • +
+
+
Step 6 - Update availability and payment details
+
Step 6a - If the app is free (and doesn't include in-app purchases):
+
On the left hand menu, click Compatibility. Change the countries the app will be available in if you wish.
+
Step 6b - If the app is paid (or free, but includes in app payments):
+
On the left hand menu, click Compatibility & Payments +
    +
  • Setup your payment provider accounts, such as Bango and Boku.
    • +
  • Set the price, identify whether the app includes in-app products and select the countries the app will be available in.
    • +
  • If the app is being offered as a premium upgrade to a free app, identify the free app.
    • +
+
+
Step 6c - If the app includes in-app products:
+
+
    +
  • On the left hand menu click In-App Payments and obtain your API key and secret. (Note that you'll have to submit an update to your app once the API key and secret have been added to it, for more details see In-app payments.)
    • +
  • If you're using fxPay, on the left hand menu click In-App Products and define each of your in-app products.
    • +
+
+
Step 7 - Setup team member (optional)
+
On the left hand menu, click Team Members and add any additional team member if you wish.
+
Step 8 - View the listing (optional)
+
On the left hand menu, click View Listing and view your app's Marketplace listing if you wish.
+
Step 9 - Edit other localization listings (optional)
+
On the left hand menu click Edit Listing and modify the app URL, description, and categories for any of the app's localizations or add details for any other locale supported by Firefox Marketplace.
+
+ +

Your app is now in the review queue. You can monitor its progress through the review process by clicking Status and Version on the left hand menu. Remember that if your app makes use of in-app payments you will need to code in the API Key and submit an update before the app can be published.

+ +

Flow chart

+ +

Flow chart showing the app submission process

+ +

What next?

+ +

Having completed your app submission your might want to:

+ + diff --git a/files/bn/archive/mozilla/marketplace/submission/index.html b/files/bn/archive/mozilla/marketplace/submission/index.html new file mode 100644 index 0000000000..2ac47dd745 --- /dev/null +++ b/files/bn/archive/mozilla/marketplace/submission/index.html @@ -0,0 +1,9 @@ +--- +title: Submission +slug: Archive/Mozilla/Marketplace/Submission +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Submission +--- +

Marketplace submission

diff --git a/files/bn/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html b/files/bn/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html new file mode 100644 index 0000000000..b3e24dab4d --- /dev/null +++ b/files/bn/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html @@ -0,0 +1,95 @@ +--- +title: মার্কেটপ্লেসে অ্যাপ্লিকেশন অনুমোদনের নিয়ম +slug: Archive/Mozilla/Marketplace/Submission/Marketplace_review_criteria +tags: + - App Reviewers + - Apps + - B2G + - Firefox OS + - Marketplace + - Mobile + - Review + - Security + - অনুমোদন + - অ্যাপ + - এপ্লিকেশন রিভিউ + - নিরাপত্তা + - ফায়ারফক্স ওএস + - মার্কেটপ্লেস + - মোবাইল +translation_of: Archive/Mozilla/Marketplace/Publishing/Marketplace_review_criteria +--- +
+

ফায়ারফক্স মার্কেটপ্লেস ব্যবহার করে কোন অ্যাপ্লিকেশন বিতরণ করার জন্য যা আপনার জানা দরকার তা'র সবই এই আর্টিকেলে রয়েছে। অ্যাপ্লিকেশন ডেভেলপার এবং ব্যবহারকারী - সবার কথা মাথায় রেখেই এই নিয়মগুলো তৈরি করা হয়েছে। ডেভেলপারদের তাদের ব্যবসা'র সুবিধার্তে নীতিগত, ধারাবাহিক এবং সহজ নীতিমালা পছন্দ করেন। আর ব্যবহারকারীরা নিরাপদ অ্যাপ্লিকেশন, যা তাদের ডিভাইসে ঠিকমত চলবে এবং যেরকম হওয়ার কথা সেরকমভাবেই অ্যাপ্লিকেশনটি কাজ করবে এই নিশ্চয়তা চান। নিচের নিতিমালা এই দুই পক্ষের সুবিধা'র কথা মাথায় রেখেই তৈরি করা হয়েছে।

+
+

অ্যাপ্লিকেশন অনুমোদন বলতে মজিলা বুঝাতে চায়, তা নিচে দেওয়া হলঃ

+ +

নিরাপত্তা

+

অ্যাপ এর নিরাপত্তা নিয়ে বিস্তারিত পাবেন এখানেঃ https://wiki.mozilla.org/Apps/Security

+ +

ব্যক্তিগত গোপনীয়তা

+ +

অ্যাপ এর কণ্টেন্ট/বিষয়বস্তু

+ +

বিষয়বস্তু নীতিমালা

+

ফায়ারফক্স মার্কেটপ্লেসে যেসব বিষয়বস্তু অনুমোদিত নয় তার তালিকা নিচে দেওয়া হয়েছে। এই তালিকায় শুধু উদাহরণ রয়েছে, পুরোপুরি নির্দিষ্ট করে দেওয়া হয়নি এবং পরিবর্তিত হতে পারে। এই নীতিমালা ভঙ্গ করে এমন অ্যাপ মজিলা দেখার সাথে সাথেই ফায়ারফক্স মার্কেটপ্লেস থেকে সরিয়ে দিতে পারে।

+ +

অ্যাপ এর আচরণ

+ +

অ্যাপ এর ব্যবহারযোগ্যতা

+ +

বাতিল হওয়ার কারণ

+

যদিও আমরা কখনোই এটা করতে চাইনা, তারপরেও আমরা নিরাপত্তা, গোপনীয়তা, অথবা বিষয়বস্তু নিয়ে নীতিমালা ভঙ্গ করে বা অথবা সিস্টেম/নেটোয়ার্কের দক্ষতা মারাত্মকভাবে ক্ষতিগ্রস্ত করে এমন অ্যাপ সরিয়ে দেওয়ার ("ব্লকলিস্ট") অধিকার সংরক্ষণ করি। কোন অ্যাপ সরিয়ে দেওয়ার আগে ডেভেলপারকে ঘটনাটি জানানো হবে। কোন প্রমাণ না থাকলে আমরা ধরে নেই ডেভেলপারের কোন অসৎ উদ্দেশ্য ছিল না এবং অ্যাপ অনুমোদক দলের কাছ থেকে পূর্ণ সহায়তা করা হয় যাতে কি হচ্ছে তা ডেভেলপার জানতে পারে এবং সমস্যা সমাধানে সাহায্য করতে পারে। নির্দিষ্ট করে বলে গেলে, নিচের কিছু উদাহরণে অ্যাপ সরিয়ে দেওয়া হতে পারেঃ

+ diff --git a/files/bn/archive/mozilla/marketplace/submission/pre-submission_checklist/index.html b/files/bn/archive/mozilla/marketplace/submission/pre-submission_checklist/index.html new file mode 100644 index 0000000000..bd42e403c3 --- /dev/null +++ b/files/bn/archive/mozilla/marketplace/submission/pre-submission_checklist/index.html @@ -0,0 +1,34 @@ +--- +title: Firefox Marketplace pre-submission checklist +slug: Archive/Mozilla/Marketplace/Submission/Pre-submission_checklist +translation_of: >- + Archive/Mozilla/Marketplace/Publishing/Policies_and_Guidelines/Testing_and_troubleshooting +--- +

আপনার পরীক্ষার পরিবেশ সেট করুন

+

ফায়ারফক্স ওএস

+

ফায়ারফক্স ওএস সিমুলেটর একটি ডেক্সটপ কম্পিউটারে ইন্সটল করুন এবং আপনার অ্যাপ্লিকেশন সিমুলেটরে ইন্সটল করার জন্য সিমুলেটরের কন্ট্রল প্যানেল ব্যবহার করুন।

+

এ্যানড্রয়েড

+

এ্যানড্রয়েডের জন্য অরোরা ইন্সটল করুন। আপনার যদি এ্যানড্রয়েড ডিভাইস না থেকে থাকে, আপনি এ্যানড্রয়েড ইমুলেটর ব্যবহার করতে পারেন।

+

[কিভাবে অ্যাপ্লিকেশন ইন্সটল করবেন?]

+

ডেক্সটপ

+

ডেক্সটপ এর জন্য অরোরা ইন্সটল করুন।

+

[কিভাবে অ্যাপ্লিকেশন ইন্সটল করবেন?]

+

পরীক্ষাকরণ

+

এমনকি যদিও মুক্ত ওয়েব অ্যাপ্লিকেশনগুলো ওয়েব পেইজগুলোর প্রযুক্তি এবং বিতরণ পদ্ধতিই ব্যবহার করে, অ্যাপ্লিকেশন ব্যবহারকারীর অভিঙ্গতাটা বেশ ভিন্ন যেহেতু অ্যাপ্লিকেশনে ব্রাউজার ক্রোম যেমন ইউআরএল বার অথবা পূর্ববর্তী বাটন এবং ফায়ারফক্স ওএস ডিভাইসে এ্যানড্রয়েড এর মত হার্ডওয়্যার পূর্ববর্তী বাটন নেই। এই ধাপগুলো আপনার অ্যাপ্লিকেশনকে অনেক ভালো ব্যবহারকারী অভিঙ্গতা দেয়ার নিশ্চয়তার জন্য আপনাকে সাহায্য করবে।

+
    +
  1. অ্যাপ্লিকেশন ইন্সটল করুন। নিশ্চিত হন স্ক্রিনের উপরে আইকন দেখাচ্ছে এবং অ্যাপ্লিকেশনের নাম কেটে যায়নি।
    2. +
  2. অ্যাপ্লিকেশন চালু করুন। নিশ্চিত হন স্ক্রিনের মাপ এবং পারিপার্শ্বিক যথাযথ সনাক্ত আছে।
    3. +
  3. নিশ্চত হন ব্যবহারকারী তাৎক্ষনিক আপনার অ্যাপ্লিকেশনটি দেখতে পায়, আপনার প্রথম পৃষ্ঠা না। মনে রাখবেন, ব্যবহারকারী যারা আপনার অ্যাপ্লিকেশনটি ইন্সটল করছে তারা ফায়ারফক্স মার্কেটপ্লেস থেকে অ্যাপ্লিকেশনের বৈশিষ্ট সম্পর্কে জানে। তাদেরকে অন্য পৃষ্ঠার মাধ্যমে অ্যাপ্লিকেশনের বৈশিষ্ঠ সম্পর্কে জানার জন্য পুনরায় কোন মাধ্যম দ্বারা তথ্য পাঠানোর দরকার নেই। অ্যাপ্লিকেশন শুরু অথবা লগ ইন পেজের মাধ্যমে ব্যবহারকারীকে আরম্ভ করতে দেয়াই হচ্ছে আদর্শবান অভিজ্ঞতা।
    4. +
  4. আপনার অ্যাপ্লিকেশনের প্রধান বৈশিষ্ঠ সমূহ দ্বারা অ্যাপ্লিকেশন শুরু করুন। নেভিগেশোনাল ডেড এনডস এবং কনটেন্ট স্কেলিং এর ইস্যুগুলো বিশেষভাবে দেখুন।
    5. +
  5. নিশ্চিত হন যেসব লিংকগুলো আপনার অ্যাপ্লিকেশনের অভিজ্ঞতার বাইরের বিষয়বস্তু, যেমন- অন্য পৃষ্ঠার সাথে লিংক করা অথবা টুইটার, সে ক্ষেত্রে নতুন একটি উইনডো অথবা ফ্রেম চালু করা যেন ব্যবহারকারী একটি পন্থা পায় পূর্বের অ্যাপ্লিকেশনে ফিরে যাওয়ার।
    6. +
  6. ডেক্সটপ ব্রাউজারের ক্ষেত্র, প্রতিক্রয়াশীল (রেসপনসিভ) ডিজাইন মুড ব্যবহার করুন যেন অ্যাপ্লিকেশনটি সকল প্রকার মাপের স্ক্রিনে চলে। আমরা ৩২০x৪৮০ অথবা ১২৬০x৮০০ রেজুলেশনে চেক করার জন্য প্রস্তাব দিয়ে থাকি।
    7. +
+

সম্যসা সমাধান করা

+

[সম্যসা সমাধান করার উপায়, ডিবাগিং, সাহায্যের জন্য কোথায় যাবেন]

+

জমা দেয়া

+
    +
  1. যদি ইহা একটি প্যাকেজড অ্যাপ্লিকেশন হয়, নিশ্চত হন ইহা রুট এর মধ্যে তালিকা ফাইল সহ জিপ করা আছে।
    2. +
  2. তালিকা প্রিভিউ চেক করুন। নিশ্চত হন আইকন এবং স্ক্রিন শটগুলোর লডিং ঠিক আছে, ডেভলপারের নাম আপনার চাওয়া অনুযায়ী প্রকাশিত হচ্ছে এবং বর্ণনাতে অদ্ভুত অথবা উদ্ভট বর্ণমালা নেই।
    3. +
  3. কিছু সময় একটি সম্পূর্ণ বর্ণনা বানাতে ব্যয় করুন। একটি সুন্দর বর্ণনা অ্যাপ্লিকেশনের কি কর্ম তার এক অথবা দুই সংক্ষিপ্তসার বর্ণনা দ্বারা শুরু হয়, তারপর নির্দিষ্ট বৈশিষ্ট্য এবং সুবিধা সহ একটি তালিকা।
    4. +
  4. যদি আপনার অ্যাপ্লিকেশনে একটি অ্যাকাউন্টের দরকার হয়, তাহলে দয়া করে লগইন তথ্য দিবেন যেন মার্কেটপ্লেস স্টাফ পরীক্ষামূলক ব্যবহার করতে পারে।
    5. +
diff --git a/files/bn/archive/mozilla/marketplace/submission/rating_your_content/index.html b/files/bn/archive/mozilla/marketplace/submission/rating_your_content/index.html new file mode 100644 index 0000000000..dddcfeb374 --- /dev/null +++ b/files/bn/archive/mozilla/marketplace/submission/rating_your_content/index.html @@ -0,0 +1,117 @@ +--- +title: Obtaining a Rating for Your App +slug: Archive/Mozilla/Marketplace/Submission/Rating_Your_Content +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Rating_Your_Content +--- +
+

মজিলা ইন্টারন্যাশনাল এইজ রেটিং জোট (আইএআরসি) এর সাথে পার্টনার হয়ে বয়স সম্পর্কিত বিষয়বস্তুর রেটিং সকল প্রকার অ্যাপলিকেশন সহ যুক্ত করেছে। কারণ মজিলা ব্যবহারকারীদের খেয়াল রাখে এবং বিশ্বাস করে যে ব্যবহারকারীদের নির্বাচনের সুযোগ থাকা উচিত কোন বিষয়বস্তু তাদের জন্য সঠিক, ১৫ই এপ্রিল, ২০১৪ থেকে ফায়ারফক্স মার্কেটপ্লেস এ সকল অ্যাপ্লিকেশন এর জন্য আইএআরসি রেটিং থাকার দরকার হবে। যদিও আমরা আমাদের সকল অ্যাপ্লিকেশন ভালোবাসি, আমাদের এই উদ্যোগের প্রতিজ্ঞা হল কোন অ্যাপ্লিকেশন অথবা গেম যেটার রেটিং থাকবে না তা মার্কেটপ্লেস থেকে শেষ সময়সীমা ১৫ই এপ্রিল, ২০১৪ এর পর সরিয়ে ফেলা হবে। আইএআরসি আপনাকে একটি ফ্রি টুল দিবে আপনার রেটিং তৈরির জন্য।

+
+ +

আইএআরসি রেটিং টুল সম্পর্কে

+ +

আইএআরসি, আন্তর্জাতিক রেটিং বোর্ড-এর মধ্যে একটি সহযোগিতামূলক প্রচেষ্টা, পৃথিবীব্যাপী বিষয়বস্তুর রেটিং বরাদ্দ করতে একটি সমাধান হিসেবে একটি রেটিং টুল এর সূচনা করলো, ডিজিটালভাবে বিতরণ করলো অ্যাপ্লিকেশন এবং গেম। একটি সাধারণ ফরম পূরণের মাধ্যমে, আপনি সাথে সাথে সকল প্রকার রেটিং বোর্ড এর জন্য রেটিং এর খেতাব পেয়ে যাবেন। এটি শুধু ব্যবহারকারীকে বিষয়বস্তু সম্পর্কে জানতে সাহায্য করে না,  কিন্তু উপরন্তু নাটকীয়ভাবে মূল্য হ্রাস করে এবং ঝামেলা সংযুক্ত বিশ্বব্যাপী বিষয়বস্তু আলাদাভাবে রেটিং করে।

+ +

ইন্টারন্যাশনাল রেটিং সিস্টেম সমর্থিত

+ +

Using a single rating wizard, content ratings are generated for multiple rating systems, countries and regions.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Rating SystemCountries Supported
Classificação Indicativa Brazil
ESRBCanada, Mexico, United States
PEGIAustria, Denmark, Hungary, Latvia, Norway, Slovenia, Belgium, Estonia, Iceland, Lithuania, Poland, Spain, Bulgaria, Finland, Ireland, Luxembourg, Portugal, Sweden, Cyprus, France, Israel, Malta, Romania, Switzerland, Czech Republic, Greece, Italy, Netherlands, Slovak Republic, United Kingdom
USKGermany
GenericUsed for all other countries
+ +

What’s in a Content Rating?

+ +

The rating system provides users with three types of information:

+ + + +

The rating process is free to developers, takes only a few minutes, and is integrated with the Firefox Marketplace submission process and developer dashboard.  Before an app can be reviewed, it must have a rating. Users see the rating of an app appropriate for their region on the app details page, and may find out more information should they choose to know more.

+ +

Obtaining a Content Rating for Your App

+ +

IARC has provided a free game-rating tool that is simple and for most apps, takes less than five minutes. In this section we'll review the process.

+ +
+

Note: We unfortunately cannot accept rating certificates from other systems; if your app already has a rating from another system you'll still need to go through the IARC certificate process.

+
+ +
    +
  1. Log into the Firefox Marketplace developer site; the rating tool may only be accessed when you are logged in as a developer.
    2. +
  2. +

    Access the IARC Rating tool during the submission process:

    + +

    Demonstrates where in the app submission flow where ratings can be entered.

    + +

    or from the Dev Dashboard:

    + +

    +
    3. +
  3. +

    Start the rating process:

    + +

    + +

    or enter your information for an existing rating:

    + +

    +
    4. +
  4. +

    Fill out the short questionnaire:

    + +

    +
    5. +
  5. +

    Add additional information about your app:

    + +

    +
    6. +
  6. +

    Preview and confirm your rating information:

    + +

    +
    7. +
  7. +

    Return to the developer dashboard and you should see your rating information. You are ready to go!

    +
    8. +
+ +
+

Note: You will receive an email with your rating certificate and security code.  Please keep a copy for your records.

+
+ +

More information

+ +

If you have questions about the rating process, how to answer the questionnaire, or if you think your rating is incorrect, please email the IARC team at dev-questions@globalratings.com.  Additional information is also available on the global ratings website.

+ +

If you have any other questions, you can get in touch with Mozilla's app review team at mozilla.appreview.

diff --git a/files/bn/archive/mozilla/xul/index.html b/files/bn/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..b6db5f2a5a --- /dev/null +++ b/files/bn/archive/mozilla/xul/index.html @@ -0,0 +1,84 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +tags: + - NeedsTranslation + - TopicStub + - XUL +translation_of: Archive/Mozilla/XUL +--- +
XUL Tutorial
+A guided tutorial that will help you get started with XUL, originally from XULPlanet.
+ +
+

XUL (XML User Interface Language) is Mozilla's XML-based language for building user interfaces of applications like Firefox. The term XUL is sometimes used to refer to the whole Mozilla platform (e.g. XUL applications are applications using XUL and other components of the platform).

+ +

XUL Controls lists some of the common controls provided by XUL.

+
+ + + + + + + + +
+

Documentation

+ +
+
XUL Tutorial
+
A guided tutorial that will help you get started with XUL, originally from XULPlanet.
+
XUL Reference
+
XUL elements, attributes, properties, methods, and event handlers.
+
XUL Controls
+
A quick list of all of the available XUL controls.
+
The Joy of XUL
+
Describes the key features and components of XUL.
+
Menus and Popups Guide
+
A guide on using menus and popup panels.
+
Template Guide
+
A detailed guide on XUL templates, which is a means of generating content from a datasource.
+
Drag and Drop
+
How to perform drag and drop operations.
+
+ +
+
XUL Periodic Table
+
This collection of XUL demos used to be available as a web page, but can no longer be viewed in Firefox since support for Remote XUL was disabled.  There is a XULRunner application containing the XUL Periodic Table which can be opened with Gecko based browsers. You can get it here. See: XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications for instructions on running XULRunner apps in Firefox.
+
Changes to XUL
+
New XUL features and changes to existing features are included in the Firefox developer release notes.
+
+ +

View All...

+ 		+

Community

+ + + +

Tools

+ + + +

View All...

+ + + + +
+ +

 

diff --git a/files/bn/archive/mozilla/xul/tutorial/index.html b/files/bn/archive/mozilla/xul/tutorial/index.html new file mode 100644 index 0000000000..1b35a58a5e --- /dev/null +++ b/files/bn/archive/mozilla/xul/tutorial/index.html @@ -0,0 +1,141 @@ +--- +title: XUL Tutorial +slug: Archive/Mozilla/XUL/Tutorial +tags: + - NeedsTranslation + - TopicStub + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial +--- +

This tutorial describes XUL, the XML User-interface Language. This language was created for the Mozilla application and is used to describe its user interface.

+

Introduction

+ +

Simple Elements

+ +

The Box Model

+ +

More Layout Elements

+ +

Toolbars and Menus

+ +

Events and Scripts

+ +

Document Object Model

+ +

Trees

+ +

RDF and Templates

+ +

Skins and Locales

+ +

Bindings

+ +

Specialized Window Types

+ +

Installation

+ +
+

This XUL tutorial was originally created by Neil Deakin. He has graciously given us permission to use it as part of the MDN.

+
+
+

Original Document Information

+ +
+

 

diff --git "a/files/bn/archive/mozilla/xul/tutorial/\340\246\270\340\247\202\340\246\232\340\246\250\340\246\276/index.html" "b/files/bn/archive/mozilla/xul/tutorial/\340\246\270\340\247\202\340\246\232\340\246\250\340\246\276/index.html" new file mode 100644 index 0000000000..a028ebcc50 --- /dev/null +++ "b/files/bn/archive/mozilla/xul/tutorial/\340\246\270\340\247\202\340\246\232\340\246\250\340\246\276/index.html" @@ -0,0 +1,54 @@ +--- +title: সূচনা +slug: Archive/Mozilla/XUL/Tutorial/সূচনা +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction +--- +

{{ Next("XUL_Tutorial/XUL_Structure") }}

+

এই টিউটোরিয়ালটি XUL (এক্সএমএল ইউজার ইন্টারফেস ভাষা) শেখার একটি গাইড। XUL একটি ক্রস প্ল্যাটফর্ম ভাষা যার সাহায্যে অ্যাপ্লিকেশন ইউজার ইন্টারফেস ব্যখ্যা করা যায়।

+

This tutorial will demonstrate creating a simple find file user interface, much like that provided by the Macintosh's Sherlock or the find file dialog in Windows. Note that only the user interface will be created, with only limited functionality. The actual finding of files will not be implemented. A blue line will appear to the left of a paragraph where the find file dialog is being modified. You can follow along by looking for these sections.

+

What is XUL and why was it created?

+

XUL (pronounced "zool" and rhyming with "cool") was created to make development of the Mozilla browser easier and faster. It is an XML language so all features available to XML are also available to XUL.

+

Most applications need to be developed using features of a specific platform making building cross-platform software time-consuming and costly. A number of cross-platform solutions have been developed in the past. Java, for example, has portability as a main selling point. XUL is one such language designed specifically for building portable user interfaces. It takes a long time to build an application even for only one platform. The time required to compile and debug can be lengthy. With XUL, an interface can be implemented and modified quickly and easily.

+

XUL has all the advantages of other XML languages. For example XHTML or other XML languages such as MathML or SVG can be inserted within it. Also, text displayed with XUL is easily localizable, which means that it can be translated into other languages with little effort.

+

What kinds of user interfaces can be made with XUL?

+

XUL provides the ability to create most elements found in modern graphical interfaces. Some elements that can be created are:

+ +

The displayed content can be created from the contents of a XUL file or with data from a datasource. In Mozilla, such datasources include a user's mailbox, their bookmarks and search results. The contents of menus, trees and other elements can be populated with this data, or with your own data supplied in an RDF file.

+

There are several ways you can use XUL:

+
+
+ Firefox extension
+
+ An extension adds functionality to the browser itself, often in the form of extra toolbars, context menus, or customizations to the browser's user interface. This is done using a feature of XUL called an overlay, which allows the UI provided from one source, in this case, the Firefox browser, to be merged together with the UI from the extension. Extensions may also be applied to other Mozilla based products such as Thunderbird.
+
+ Standalone XULRunner application
+
+ XULRunner is a packaged version of the Mozilla platform which allows you to create standalone XUL applications. A browser isn't required to run these applications, as they have their own executable file.
+
+ XUL package
+
+ In between the other two are applications which are created in the same way as an extension, but they act like a separate application in a separate window. This is used when you don't want to have the larger size of a complete XULRunner application, but don't mind requiring a Mozilla browser to be installed to be able to run the application.
+
+ Remote XUL application
+
+ You could also just place XUL code on a web server and open it in Firefox, as you would any other web page, however this is discouraged and was disabled in Firefox 8.  It is still possible to enable this for selected sites to let legacy apps to continue working, but for new remote applications you should use HTML to create your user interface instead; most of the features you used to have to use XUL for are available in HTML5.
+
+

The first three types all require an installation to be performed on the user's machine. However, these types of applications do not have security restrictions placed on them, so they may access local files and read and write preferences, for example. For extensions, the XUL files and associated scripts and images used by an application would be packaged into a single file and downloaded and installed by the user. Mozilla applications such as Firefox provide an extension manager which allows packages to be installed without having to write a lot of complex code.

+

What do I need to know to use this tutorial?

+

You should have an understanding of HTML and at least a basic understanding of XML and CSS. Here are some guidelines to keep in mind:

+ +

XUL is supported in Mozilla and browsers that are also based upon on the Gecko engine, such as Netscape 6 or later and Mozilla Firefox. Due to various changes in XUL syntax over time, you will want to get the latest version for the examples to work properly. Most examples should work in Mozilla 1.0 or later. XUL is fairly similar in Firefox and to other browsers, although it has some specific differences such as support for customizable toolbars.

+

This tutorial attempts to cover much of XUL's functionality, however, not all features are discussed. Once you are familiar with XUL, you can use the XUL Reference to find out about other features supported by specific elements.

+

{{ Next("XUL_Tutorial/XUL_Structure") }}

+

{{ languages( { "de": "de/XUL_Tutorial/Einfuehrung", "es": "es/Tutorial_de_XUL/Introducci\u00f3n", "fr": "fr/Tutoriel_XUL/Introduction", "ja": "ja/XUL_Tutorial/Introduction", "ko": "ko/XUL_Tutorial/Introduction", "pl": "pl/Kurs_XUL/Wprowadzenie", "zh-cn": "cn/XUL_\u6559\u7a0b/\u5f15\u8a00", "ru": "ru/\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e_\u043f\u043e_XUL/\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435" } ) }}

diff --git a/files/bn/creating_a_skin_for_seamonkey_2.x/index.html b/files/bn/creating_a_skin_for_seamonkey_2.x/index.html new file mode 100644 index 0000000000..596809d4ba --- /dev/null +++ b/files/bn/creating_a_skin_for_seamonkey_2.x/index.html @@ -0,0 +1,13 @@ +--- +title: Creating a Skin for SeaMonkey 2.x +slug: Creating_a_Skin_for_SeaMonkey_2.x +tags: + - NeedsReview +translation_of: Archive/Mozilla/Creating_a_Skin_for_SeaMonkey_2.x +--- +

সূচনা

+

আপনি SeaMonkey 2 এর জন্য একটি থিম তৈরি করতে যাচ্ছেন , জানতে চান কিভাবে? আশা করি  নিচের ম্যানুয়ালটি আপনাকে সাহায্য করতে সক্ষম হবে ।

+

অভ্যন্তরস্ত

+ diff --git a/files/bn/dom/index.html b/files/bn/dom/index.html new file mode 100644 index 0000000000..5412ec81b0 --- /dev/null +++ b/files/bn/dom/index.html @@ -0,0 +1,90 @@ +--- +title: ডকুমেন্ট অবজেক্ট মডেল (DOM) +slug: DOM +tags: + - DOM + - NeedsTranslation + - References + - TopicStub +translation_of: Web/API/Document_Object_Model +--- +
+
+ W3C DOM এর ১ম কোর লেভেল ব্যবহার করা
+ W3C DOM এর হাতেখড়ি।
+
+
+

ডকুমেন্ট অবজেক্ট মডেল (Document Object Model) বা সংক্ষেপে DOM হচ্ছে HTML এবং XML ডকুমেন্ট ম্যানিপুলেট করার জন্য একটি অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টারফেস বা API । এটা ডকুমেন্ট এর একটি গাঠনিক উপস্থাপনা প্রদান করে, আর আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করে এর ভেতরে থাকা কন্টেন্ট এবং দৃশ্যমান উপাদানগুলোকে সংশোধন করার সুবিধা প্রদান করে।

+
+
+
+

DOM সম্পর্কে ডকুমেন্টেশন

+
+
+ DOM রেফারেন্স
+
+ ডকুমেন্ট অবজেক্ট মডেল এর রেফারেন্স।
+
+ ডকুমেন্ট অবজেক্ট মডেল সম্পর্কে
+
+ DOM সম্পর্কে সংক্ষিপ্ত বর্ণনা।
+
+ DOM এবং জাভাস্ক্রিপ্ট
+
+ DOM কি ? জাভাস্ক্রিপ্ট কি ? কিভাবে আমি এই দুটোকে একসাথে আমার ওয়েব পেজে ব্যবহার করব ? এখানে পাবেন এমন সব প্রশ্নের উত্তর।
+
+ ডায়নামিক স্টাইলিং তথ্য ব্যবহার করা
+
+ DOM এর মাদ্ধমে কিভাবে তথ্য সংগ্রহ করা যায় এবং স্টাইলিং ম্যানিপুলেট করা যায়।
+
+ DOM ইভেন্ট রেফারেন্স
+
+ DOM ইভেন্ট সমূহের অর্থসহ তালিকা।
+
+ History API: ব্রাউজারের ইতিহাস ম্যানিপুলেট করা
+
+ HTML5-এ চালু হওয়া DOM এর বর্ণনা করে {{ domxref("window.history") }} অবজেক্ট, ব্রাউজারের ইতিহাস ডায়নামিক্যালি পরিবর্তন করার সুবিধা প্রদান করে।
+
+ ফাইল API: ওয়েব অ্যাপ্লিকেশন থেকে ফাইল ব্যবহার করা
+
+ HTML5-এ প্রবর্তিত লোকাল ফাইল নির্বাচন করার এবং পড়ার ক্ষমতা বর্ণনা।
+
+ Page এর Visibility API ব্যবহার করা
+
+ এখানে বর্ণনা করা হয়েছে, কিভাবে একটি ওয়েব পেজ সনাক্ত করতে হবে এবং উক্ত ওয়েব পেজ থেকে প্রাপ্ত তথ্য ব্যবহার করতে হবে; সেটা ব্যাকগ্রাউন্ডে ব্যবহৃত হোক বা ফোরগ্রাউন্ডে।
+
+ Fullscreen API: ফুলস্ক্রিন মোড ব্যবহার করা
+
+ এতে বর্ণনা করা হয়েছে, কিভাবে একটি পেজকে ব্রাউজারের কোন এলিমেন্ট ছাড়া সমগ্র স্ক্রিন জুড়ে দেখার জন্য তৈরি করতে হবে।
+
+ এলিমেন্টের মাত্রা নির্ণয়
+
+ আপনার প্রয়োজন অনুযায়ী সঠিক ভাবে এলিমেন্টের মাত্রা নির্ধারণের কৌশল এখানে বর্ণনা করা হয়েছে।
+
+ Dynamically modifying XUL-based user interface
+
+ The basics of manipulating the XUL UI with DOM methods.
+
+

View All...

+
+
+

Getting help from the community

+

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

+
    +
  • Consult the dedicated Mozilla forum: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}
    • +
+

Tools easing working with the DOM

+ +

View All...

+ + +
+
+

 

diff --git a/files/bn/glossary/api/index.html b/files/bn/glossary/api/index.html new file mode 100644 index 0000000000..ff54fdcb57 --- /dev/null +++ b/files/bn/glossary/api/index.html @@ -0,0 +1,20 @@ +--- +title: এপিআই (API) +slug: Glossary/API +translation_of: Glossary/API +--- +

একাধিক সফটওয়্যার কম্পোনেন্ট এর মধ্যে যোগাযোগের সুবিধা এবং এ সংক্রান্ত নিয়মগুলিকে API (Application Programming Interface) বলা হয়ে থাকে। ওয়েব ডেভেলপমেন্টের ক্ষেত্রে, API বলতে সাধারণত ওয়েবের কন্টেন্টের সঙ্গে যোগাযোগ / কাজ (ইন্টারঅ্যাক্ট) করার জন্য একগুচ্ছ {{glossary("method","methods")}}, {{Glossary("property","properties")}}, ইভেন্ট, এবং {{Glossary("URL","URLs")}} কে বুঝানো হয়।

+ +

আরও জানুন

+ +

সাধারণ জ্ঞান

+ + + +

কারিগরি রেফারেন্স

+ + diff --git a/files/bn/glossary/bandwidth/index.html b/files/bn/glossary/bandwidth/index.html new file mode 100644 index 0000000000..d2cf7aa028 --- /dev/null +++ b/files/bn/glossary/bandwidth/index.html @@ -0,0 +1,12 @@ +--- +title: ব্যান্ডউইথ (Bandwidth) +slug: Glossary/Bandwidth +translation_of: Glossary/Bandwidth +--- +

নির্দিষ্টি সময়ে একটি ডাটা কানেকশন (সংযোগ) এর মধ্য দিয়ে যে পরিমাণ তথ্য যাওয়া-আসা (পরিবাহিত) করতে পারে, তাই পরিমাপই হল ব্যান্ডউইথ। এটি সাধারণত bits-per-second (bps), megabits-per-second (Mbps) or gigabits-per-second (Gbps) এককে মাপা হয়ে থাকে।

+ +

আরও জানুন

+ + diff --git a/files/bn/glossary/dhtml/index.html b/files/bn/glossary/dhtml/index.html new file mode 100644 index 0000000000..fb0da00644 --- /dev/null +++ b/files/bn/glossary/dhtml/index.html @@ -0,0 +1,16 @@ +--- +title: DHTML +slug: Glossary/DHTML +tags: + - ওয়েব +translation_of: Glossary/DHTML +--- +

DHTML (dynamic {{glossary("HTML")}}) মানে ইন্টারেক্টিভ ওয়েব পেজ এর পিছনের কোডকে বুঝায় যার  {{Glossary("Adobe Flash","Flash")}} অথবা {{Glossary("Java")}} প্লাগিন প্রয়োজন হয় না. DHTML সমষ্টিগতবাবে {{Glossary("HTML")}}, {{Glossary("CSS")}}, the {{Glossary("DOM")}} এবং {{Glossary("JavaScript")}} এর সমন্বয়ে গঠিত ।

+ +

আরো জানুন

+ +

সাধারণ জ্ঞান

+ + diff --git a/files/bn/glossary/index.html b/files/bn/glossary/index.html new file mode 100644 index 0000000000..8745ebc4ef --- /dev/null +++ b/files/bn/glossary/index.html @@ -0,0 +1,27 @@ +--- +title: Glossary +slug: Glossary +tags: + - Beginner + - Glossary + - Index + - Landing + - NeedsTranslation + - TopicStub +translation_of: Glossary +--- +
{{LearnBox({"title":"নতুন একটি শব্দ শিখুন:"})}}
+ +

ওয়েবে যেসকল প্রযুক্তি ব্যবহার করা হয়, তার কোড বা ডকুমেন্টেশনে সাধারণত উদ্ভট টেকনিক্যাল শব্দ কিংবা সংক্ষিপ্ত শব্দ দেখা যায়। এই শব্দকোষের শব্দগুলোর সাহায্যে আপনি সহজেই ওয়েবের এই প্রযুক্তিগুলোকে বুঝতে ও ব্যবহার করতে পারবেন।

+ +

{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}

+ +

শব্দকোষে অবদান রাখুন

+ +

এই শব্দকোষের কাজ, আসলে, শেষ হবে না কখনোই! আপনি নতুন শব্দ যোগ করে কিংবা বর্তমানগুলিকে পরিবর্তন করে অবদান রাখতে পারেন। শুরু করার সবচেয়ে সোজা উপায় হল নিচের বাটনে ক্লিক করা, কিংবা নিচের কয়েকটি শব্দ বেছে নিয়ে কাজ করা!

+ +

শব্দকোষে নতুন শব্দ যুক্ত করুন

+ +

{{GlossaryList({"terms":["Abstraction","ARIA","ARPA", "Arpanet","Asynchronous","BiDi","Blink","Block","Call stack","CardDAV","CDN","Certified","Class","CMS","Constant","Constructor","Content type","Closure","CORS","CRUD","CSRF","Contextual form", "Control flow","Character","Crawler","DNS","Doctype","Domain name","DTD","Dynamic typing","ECMA","Encapsulation","Entity","Exception","FTP","GIT","GPL","Host","Hypertext","I18N","IANA","ICANN","Identifier","IDE","IDL","IETF","IIFE","Immutable","Internationalization","IndexedDB","Inheritance","Instance","Internet","IP address","IPv4","IRC","ISO","ISP","Java","Keyword","Ligature", "Locale","Localization","LGPL","ltr","MathML","Method","Microsoft Internet Explorer","MIME type","Mobile First","Mozilla Firefox","Namespace","Netscape Navigator","NAT","Native","Null","OOP","OpenGL","Opera Browser","Operand","Operator","OWASP","P2P","Parameter","Parser","PDF","Polymorphism","Presto","Privileged","property","Protocol","Prototype","Pseudo-class","Pseudo-element","RDF","Recursion","Reflow","Rendering engine","Responsive design","REST","RSS","RTF","rtl","Scope","CSS Selector","Server","Signature","SOAP","Specification","SQL","SSL","Stacking context","State machine","Statement","STUN","SVN","Synchronous","Tag","TLS","Trident","TURN","Type","UDP","UTF-8", "Value","Variable","VoIP","WAI","WebIDL","Wrapper","XForm","XPath","XQuery"], "filter":"notdefined", "css":"multiColumnList"})}}

+ +

আপনি যদি এই শব্দকোষের ব্যাপারে আরও জানতে চান, এই শব্দকোষ ডকুমেন্টেশন স্ট্যাটাস পেজটি দেখতে পারেন!

diff --git a/files/bn/glossary/webrtc/index.html b/files/bn/glossary/webrtc/index.html new file mode 100644 index 0000000000..6e0a0a4e47 --- /dev/null +++ b/files/bn/glossary/webrtc/index.html @@ -0,0 +1,37 @@ +--- +title: WebRTC +slug: Glossary/WebRTC +tags: + - ওয়েব + - ওয়েব আরটিসি + - পি-টু-পি + - ভিওআইপি +translation_of: Glossary/WebRTC +--- +

WebRTC (Web Real-Time Communication) হল ভিডিও চ্যাট, ভয়েস কল এবং পিয়ার-টু-পিয়ার ফাইল শেয়ারিং ওয়েব অ্যাপের জন্য একটি {{Glossary("API")}}।

+ +

WebRTC এর মূলত ৩টি অংশ রয়েছে:

+ +
+
getUserMedia
+
ডিভাইসের ক্যামেরা ও মাইক্রোফোনে {{Glossary("Browser", "browser")}} ব্যবহারে সহযোগিতা করা।
+
RTCPeerConnection
+
ভিডিও চ্যাট বা ভয়েস কল কনফিগার করা।
+
RTCDataChannels
+
ব্রাউজারের মধ্যে একটি {{Glossary("P2P", "peer-to-peer")}} ডাটা যাওয়া আসার পথ তৈরি করা
+
+ +

আরও জানুন

+ +

সাধারণ জ্ঞান

+ + + +

কারিগরি জ্ঞান

+ + diff --git a/files/bn/html/html5/index.html b/files/bn/html/html5/index.html new file mode 100644 index 0000000000..bc45480642 --- /dev/null +++ b/files/bn/html/html5/index.html @@ -0,0 +1,180 @@ +--- +title: HTML5 +slug: HTML/HTML5 +tags: + - Guide + - HTML + - HTML5 + - NeedsReview + - Overview + - Web + - Web Development +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML বলতে যা বুঝায় HTML5  তার সর্বাধুনিক বিবর্তন। বিষয়টি দুইটি ভিন্ন ধারনা কে প্রতিনিধিত্ব করে :

+ +
+ +
+ +

সকল উন্মুক্ত ওয়েব ডেভলপারদের ব্যবহার উপযোগী করা সাজানো হয়েছে। এই পৃষ্ঠায় অসংখ্যা HTML5 প্রযুক্তির তথ্য সমৃদ্ধ পৃষ্ঠার লিংক দেওয়া আছে। কার্যকরিতার উপর ভিত্তি করে এগুলোকে বিভিন্ন দলে বিভক্ত করা হয়েছে।

+ + + +
+
+

সিম্যানটিকস

+ +
+
HTML5 এর সেকশন এবং আউটলাইন
+
HTML5 এর নতুন আউটলাই এবং সেকশন উপাদানের এক ঝলক: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} এবং {{HTMLElement("hgroup")}}.
+
HTML5 অডিও এবং ভিডিও'র ব্যবহার
+
{{HTMLElement("audio")}} এবং {{HTMLElement("video")}} উপাদান এম্বেড থাকা এবং নতুন মাল্টিমিডিয়ার ব্যবহার নিশ্চিত করা।
+
HTML5 এর ফর্ম
+
এক নজরে HTML5 এ ওয়েব ফর্মের উন্নয়নগুলো দেখে নেই: কন্সট্রেইন্ট ভ্যালিডেশন এপিআই, কিছু নতুন এট্রিবিউট, {{HTMLElement("input")}} এট্রিবিউটের জন্য নতুন নতুন ভ্যালু {{htmlattrxref("type", "input")}} এবং {{HTMLElement("output")}} নামক নতুন এলিমেনট।
+
নতুন সিমানটিকস এলিমেন্ট
+
সেকশন, মিডিয়া এবং ফর্ম এলিমেন্টের পাশাপারশি আরো নতুন নতুন এলিমেন্ট এসেছে, যেমন
+
{{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, অথবা{{HTMLElement("meter")}}, যা HTML5 এলিমেন্টের পরিমান বৃদ্ধি করে দিচ্ছে।
+
{{HTMLElement("iframe")}} এর আরো উন্নয়ন
+
‌{{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe")}} এট্রিবিউটের ব্যবহার করে, ডেভলপারগন নিরাপত্তার মান কে আরো যথাযথ করতে পারছেন এবং  {{HTMLElement("iframe")}} এর চাহিদা মতন রেন্ডারিং করতে পারছেন।
+
MathML
+
গাণিতিক ফর্মুলার সরাসরি ব্যবহার নিশ্চিত করেছে।
+
HTML5 এর পরিচিতি
+
আপনি HTML5 এর মাধ্যমে কোন ওয়েব ডিজাইন করলে অথবা কোন ওয়েব এপ্লিকেশন তৈরি করতে চাইলে কিভাবে শুরু করবেন তা এই নিবন্ধে বলা আছে।
+
HTML5-সমর্থিত পার্সার
+
এটি একটি পার্সার, যা HTML ডকুমেন্টের বাইটকে ডকুমেন্ট অবজেক্ট মডেলে (DOM) রূপান্তর করে। এটাকে এখন বর্ধিত করা হয়েছে এবং  এখন আরো ভালভাবে সকল ক্ষেত্রে কাজ করার উপযুক্ত করা হয়েছে। এমন কি ভুল মার্কআপ পাওয়ার পরও যাতে ঠিকঠাক কাজ করতে পারে, তেমন ক্ষমতা দেয়া হয়েছে । এতে করে HTML5 সমর্থিত ব্রাউজার গুলোর মদ্ধে আন্তঃ পরিচালন ক্ষমতা ও অনুমানের দক্ষতা বৃদ্ধি পেয়েছে।
+
+ +

কানেক্টিভিটি

+ +
+
ওয়েব সকেট
+
ওয়েব পেজ এবং সার্ভারের মধ্যে, HTML নয় এমন তথ্য আদান-প্রদানের জন্য, একটি স্থায়ী সংযোগ তৈরি করার সুবিধা দেয়।
+
সার্ভার-প্রেরিত ইভেন্ট‌
+
আগে সার্ভার গুলো শুধু গ্রাহকের অনুরোধের ভিত্তিতে তথ্য পাঠাতে পারত। কিন্তু এই নতুন সংযোজনটি বারবার অনুরোধের ঝামেলা ছাড়াই সরাসরি গ্রাহকের কাছে ইভেন্ট প্রেরণের অনুমতি দেয়।
+
WebRTC
+
RTC মানে Real Time Communication বা তাৎক্ষণিক যোগাযোগ। এটি ব্রাউজারের মাদ্ধমে অন্যদের সাথে চ্যাট বা ভিডিও কনফারেন্সিং এর সুবিধা দেয়। আর এই প্রযুক্তি ব্যবহারের ফলে কোন প্রকার আলাদা সফটওয়্যার বা প্লাগিনেরও প্রয়োজন হয়না।
+
+ +

অফলাইন এবং স্টোরেজ

+ +
+
অফলাইন রিসোর্স: এপ্লিকেশন ক্যাশ
+
ফায়ারফক্স সম্পূর্ণ ভাবে HTML5 অফলাইন রিসোর্স সমর্থন করে। বাকি সবারও একই ধরনের অফলাইন রিসোর্স সমর্থন আছে।
+
অনলাইন এবং অফলাইন ইভেন্ট
+
ফায়ারফক্স ৩ WHATWG অনলাইন এবং অফলাইন ইভেন্ট সমর্থন করে, যা একটি এপ্লিকেশন এবং এক্সটেনশন কে সচল ইন্টারনেট সংযোগ আছে কিনা তা পরীক্ষা করার সুযোগ দেয়, সাথে সাথে সংযোগ কি উঠা নামা করছে কিনা তাও পরীক্ষা করে।
+
WHATWG ক্লায়েন্ট সাইড সেসন এবং স্থায়ী স্টোরেজ (এককথায় DOM স্টোরেজ)
+
ক্লায়েন্ট সাইড সেসন এবং স্থায়ী স্টোরেজ ওয়েব এপ্লিকেশন কে ক্লায়েন্ট সাইডে তথ্য সংরক্ষণে সুবিধা দেয়।
+
IndexedDB
+
ইহা একটি ওয়েব মান যা একটি উল্লেখযোগ্য পরিমান সাজানো তথ্য ব্রাজারে সংরক্ষণকে বুঝায় এবং ইন্ডেক্স ব্যবহার করে উচ্চ ক্ষমতায় তথ্য অনুসন্ধানের সুবিধা দেয়।
+
ওয়েব এপ্লিকেশন থেকে ফাইলের ব্যবহার
+
নতুন HTML5 ফাইল এপিআই গিকোতে যুক্ত হয়েছে, যা ব্যবহারকারী দ্বারা নির্বাচিত স্থানীয় ফাইল ব্যবহার করাকে সম্ভব করেছে। এরমধ্যে রয়েছে {{HTMLElement("input")}} ও multiple অ্যাট্রিবিউট ব্যবহার করে একাধিক ধরণের file নির্বাচন সমর্থন। এরমধ্যে FileReaderও আছে।
+
+ +

মাল্টিমিডিয়া

+ +
+
HTML5 অডিও ও ভিডিও ব্যবহার করা
+
{{HTMLElement("audio")}} এবং {{HTMLElement("video")}} এর সাহায্যে মাল্টিমিডিয়া কন্টেন্ট ওয়েবপেজে যুক্ত করার এবং ম্যানিপুলেট করার সুবিধা দেয়।
+
WebRTC
+
RTC অর্থ রিয়েল টাইম কমিউনিকেশন, যা ব্রাউজারেই অতিরিক্ত প্লাগ-ইনের সাহায্য ছাড়া অন্যান্য মানুষের সাথে যোগাযোগ করা এবং সরাসরি ভিডিও-কনফারেন্সিং নিয়ন্ত্রণ করা সম্ভব করে।
+
ক্যামেরা API ব্যবহার করা
+
কম্পিউটারের ক্যামেরা থেকে ছবি ব্যবহার, পরিবর্তন এবং সংরক্ষণের সুবিধা প্রদান করে।
+
ট্র্যাক এবং WebVTT
+
{{HTMLElement("track")}} সাবটাইটেল এবং চ্যাপ্টারের সুবিধা প্রদান করে। WebVTT একটি টেক্সট ট্র্যাক ফরম্যাট।
+
+ +

ত্রিমাত্রিক গ্রাফিক্স এবং ইফেক্ট

+ +
+
ক্যানভাস টিউটোরিয়াল
+
নতুন HTML {{HTMLElement("canvas")}} এলিমেন্ট এবং গ্রাফিক্স ও অন্যান্য অবজেক্ট আঁকা সম্পর্কে জানুন
+
<canvas> এলিমেন্টের জন্য HTML টেক্সট API
+
{{HTMLElement("canvas")}} এখন HTML5 টেক্সট API সমর্থন করে।
+
WebGL
+
WebGL (ওয়েব জি, এল) OpenGL ES 2.0 এর কাছাকাছি একটি API এর সাহায্যে ওয়েবে {{HTMLElement("canvas")}} এলিমেন্টে ত্রিমাত্রিক গ্রাফিক্স নিয়ে আসে। 
+
SVG
+
সরাসরি HTML এ যুক্ত করার উপযোগী ভেক্টর ইমেজের জন্য XML-ভিত্তিক ফাইল ফরম্যাট।
+
 
+
+
+ +
+

কার্যকারিতা এবং ইন্ট্রিগ্রেশন

+ +
+
Web Workers (ওয়েব ওয়ার্কার)
+
জাভাস্ক্রিপ্টকে ব্যাকগ্রাউন্ড থ্রেডের প্রতিনিধিত্ব ও মূল্যায়ন করার সুবিধা প্রদান করে। এরফলে ইন্টার‍্যাক্টিভ ইভেন্টগুলো ধীর গতির হয়না।
+
XMLHttpRequest লেভেল 2
+
সময় এবং ব্যবহারকারীর কার্যক্রমের উপর নির্ভর করে বিক্ষিপ্তভাবে একটি পাতার কিছু অংশ নিয়ে আসে। আর এই প্রক্রিয়ায় আনার ফলে কন্টেন্ট গুলো ডায়নামিক হওয়ার সুযোগ পায়। এটাই Ajax এর পেছনের প্রযুক্তি।
+
JIT-কম্পাইল করা জাভাস্ক্রিপ্ট ইঞ্জিন
+
নতুন প্রজন্মের জাভাস্ক্রিপ্ট ইঞ্জিন পূর্বের চেয়ে অনেক শক্তিশালী যার ফলে অধিক পারফরম্যান্স নিশ্চিত করে।
+
হিস্টোরি API
+
এটি ব্রাউজারের হিস্টোরি ম্যানিপুলেট করার সুযোগ দেয়, যেসকল ওয়েবপেজ ইন্টারএ্যাক্টিভভাবে তথ্য লোড করে, তাদের জন্য এটি বিশেষভাবে উপযোগী।
+
contentEditable attribute: আপনার ওয়েবসাইটকে উইকিতে রুপান্তর করুন!
+
HTML5 contentEditable এ্যাট্রিবিউটটি স্ট্যান্ডার্ডের অন্তর্ভুক করেছে। এই নতুন ফিচারটি সম্পর্কে জানুন।
+
ড্র্যাগ-এন্ড-ড্রপ
+
The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.
+
HTML এ ফোকাস ব্যবস্থাপনা
+
নতুন HTML5 activeElement এবং hasFocus এট্রিবিউটগুলো এখন সমর্থিত!
+
ওয়েব-ভিত্তিক প্রোটোকল হ্যান্ডেলার
+
আপনে এখন প্রটোকল হ্যান্ডেলার হিসেবে ওয়েব এ্যাপ্লিকেশন রেজিস্টার করতে পারবেন navigator.registerProtocolHandler() মেথডের সাহায্যে।
+
requestAnimationFrame
+
সর্বোত্তম পারফরম্যান্সের জন্য এ্যানিমেশন নিয়ন্ত্রণের সুবিধা প্রদান করে।
+
ফুলস্ক্রিন API
+
ব্রাউজারের ইন্টারফেস প্রদর্শন ব্যতিত আপনার ওয়েব পেজ বা এ্যাপ্লিকেশনকেই সম্পূর্ণ স্ক্রিনে প্রদর্শন নিয়ন্ত্রণ করে।
+
পয়েন্টার লক API
+
সবসময় কোন কন্টেন্ট এর পয়েন্টার লক করে রাখে, তাই গেমস অথবা একই ধরনের কোন এপ্লিকেশনের ক্ষেত্রে পয়েন্টার উইন্ডো সীমায় পৌছে গেলেও তা ফোকাস হারায় না।
+
অনলাইন এবং অফলাইন ইভেন্ট
+
অফলাইনে চলবে এমন একটি ভালো মানের এপ্লিকেশন তৈরী করতে হলে, আপনাকে জানতে হবে আপনার এপ্লিকেশন কখন অফলাইনে আছে। আপনার এপ্লিকেশন কখন অনলাইনে আসতে পারে তাও আপনাকে জাতে হবে।
+
+ +

যন্ত্রের ব্যবহার

+ +
+
ক্যামেরা API এর ব্যবহার
+
কম্পিউটারের ক্যামেরা থেকে ছবি ব্যবহার এবং সংরক্ষণ করে।
+
টাচ ইভেন্ট
+
টাচ স্ক্রিন চাপলে ব্যবহারকারী কর্তৃক তৈরী করা ইভেন্ট অনুযায়ি কাজ করবে।
+
জিওলোকেশনের ব্যবহার
+
জিওলোকেশন ব্যবহার করে ব্রাউজার কে ব্যবহারকারীর বর্তমান অবস্থান নির্দিষ্ট করতে দেয়।
+
ডিভাইসের স্থিতি সনাক্ত করা
+
এটা ডিভাইসের স্থিতি অর্থাৎ ডিভাইসটি উল্লম্ব ভাবে আছে, নাকি আনুভূমিক ভাবে আছে (আরও সহজ করে বলতে গেলে ডিভাইসটি সোজা করে ধরা হয়েছে না কাত করে ধরা হয়েছে) তা সনাক্ত করে ব্রাউজারকে মাপ পরিবর্তনে সহায়তা করে। এটা ইনপুট ডিভাইস হিসেবেও ব্যবহার করা যায়। যেমনঃ অবস্থান বা নড়াচড়াকে গেমের নিয়ন্ত্রণ হিসেবে ব্যবহার করা বা পেজের লেআউটে পরিবর্তন ইত্যাদি।
+
পয়েন্টার লক API
+
কন্টেন্টের সাথে পয়েন্টারকে লক করে রাখতে দেয়, যাতে করে পয়েন্টার পর্দার শেষ প্রান্তে পৌছালেও গেম এবং সদৃশ অ্যাপ গুলো আকর্ষণ না হারায়।
+
+ +

সাজসজ্জা

+ +

সিএসএসকে আরও জটিল নিয়মে এলিমেন্ট গুলোকে স্টাইল করার জন্য বর্ধিত করা হয়েছে। যদিও এটা এখন মনোলিথিক বৈশিষ্ট্যের মধ্যে নেই এবং আলাদা মডিউল গুলোও ৩য় স্তরে নেই, তারপরও এটাকে প্রায়ই সিএসএস৩ বলা হয়। এর মডিউল গুলোর মধ্যে কিছু ১ম স্তরে আছে, আবার কিছু ৪র্থ স্তরে আছে।

+ +
+
নতুন ব্যাকগ্রাউন্ড স্টাইলিং বৈশিষ্ট্য সমূহ
+
এখন {{cssxref("box-shadow")}} ব্যবহার করে একটি বক্সের নিচে ছায়া এবং একাধিক ব্যাকগ্রাউন্ড প্রয়োগ করা যাবে।
+
আরও রুচিসম্মত বর্ডার সমূহ
+
এখন {{cssxref("border-image")}} ব্যবহার করে শুধু বর্ডার স্টাইলই করা যাবে না, এর সাথে সংশ্লিষ্ট অন্যান্য লং-হ্যান্ড প্রপার্টিও ব্যবহার করা যাবে। কিন্তু গোলাকার বর্ডার শুধু {{cssxref("border-radius")}} ব্যবহার করেই প্রয়োগ করা যাবে।
+
স্টাইল অ্যানিমেট করা
+
সিএসএস ট্রানজিশন ব্যবহার করে দুইটি ভিন্ন অবস্থার মধ্যে অ্যানিমেট করা যাবে অথবা সিএসএস অ্যানিমেশন ব্যবহার করে কোন ইভেন্ট ট্রিগার না করেই বিভিন্ন অংশ অ্যানিমেট করা যাবে। আর এসব অ্যানিমেশনের সময়, ধরন, গতি-প্রকৃতি সবই আপনি নিয়ন্ত্রণ করতে পারবেন।
+
টাইপোগ্রাফি উন্নয়ন
+
ভালো টাইপোগ্রাফি ব্যবহার করার জন্য ডিজাইনারদের এখন আরও বেশি নিয়ন্ত্রণ দেয়া হয়েছে। তারা এখন {{cssxref("text-overflow")}} এবং হাইফেনেশন নিয়ন্ত্রণ করতে পারেন। ছায়া যুক্ত করতে পারেন অথবা অনেক সূক্ষ্মভাবে অলঙ্করণ করতে পারেন। নিজের ইচ্ছামত ফন্ট ডাউনলোড করে প্রয়োগ করা যাবে। এজন্য ধন্যবাদ দিতে হয় {{cssxref("@font-face")}} নিয়মটিকে।
+
নতুন প্রেজেন্টেশন লেআউট সমূহ
+
ডিজাইনের নমনীয়তা বৃদ্ধি করার জন্য নতুন দুইটি লেআউট যুক্ত করা হয়েছেঃ একটি হচ্ছে CSS multi-column layout, এবং অপরটি CSS flexible box layout।
+
+
+
+ +

 

diff --git a/files/bn/html/html5/introduction_to_html5/index.html b/files/bn/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..bb65db9a7f --- /dev/null +++ b/files/bn/html/html5/introduction_to_html5/index.html @@ -0,0 +1,29 @@ +--- +title: HTML5 এ হাতেখড়ি +slug: HTML/HTML5/Introduction_to_HTML5 +tags: + - Guide + - HTML + - HTML5 + - NeedsContent + - Web + - গাইড +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

HTML এর পঞ্চম ও সর্বশেষ সংস্করণ HTML5। এর নতুন কিছু ফিচার রয়েছে যেমন শুধু রিচ মিডিয়াই সমর্থন করা, ওয়েব এপ্লিকেশন তৈরি করা এখন আরও সহজ। এসব ওয়েব এপ্লিকেশন ব্যবহারকীর সাথে ইন্টার-এক্ট করতে পারে, ব্যবহারকারীর কম্পিউটারের ডেটা নিয়ে কাজ করতে পারে, সার্ভারের সাথে যোগাযোগ করতে পারে আগের থেকে অনেক কার্যকরভাবে।

+

HTML5 এখনও ডেভেলপ হচ্ছে, সে কারণে এখনো এর নির্দেশিকায় টুকটাক পরিবর্তন চলছে। এখনো সব ব্রাউজারে সব ফিচার চলে না। যাইহোক, গেকো এবং তার এক্সটেনশন, ফায়ারফক্স খুব ভালভাবেই HTML5 সমর্থন করে, এবং এর আরও ফিচার সমর্থনের কাজ চলছে। গেকো ১.৮.১ সংস্করণ থেকে HTML5 এর ফিচার সমর্থন করা শুরু করেছে। গেকো বর্তমানে HTML5 এর কি কি ফিচার সমর্থন করে তা HTML5 এর মুল পেজে জানতে পারেন। অন্যান্য ব্রাউজারে HTML5 সাপোর্ট করে কি না, তা বিস্তারিত জানতে CanIUse ওয়েবসাইটে যেতে পারেন।

+

যেভাবে বলবেন আপনার ডকুমেন্টে HTML5 মার্ক-আপ আছে

+

HTML5 এর জন্য ডকটাইপ খুবই সাধারন। আপনার HTML কন্টেন্ট যে HTML5 ব্যাবহার করছে তা বলার জন্য ডকুমেন্টের শুরুতে নিচের কোড লিখুনঃ

+
<!DOCTYPE html>
+
+

যেসব ব্রাউজার এখনো HTML5 সমর্থন করে না, তারাও এই কোড দেখলে স্ট্যান্ডার্ড মোডে চলে যাবে, যার অর্থ হল তারা HTML এর আগের সমর্থিত কোডগুলো ঠিকমতই দেখাবে এবং শুধুমাত্র যেসব HTML5 এলিমেন্ট তারা সমর্থন করে না সেগুলোই দেখাবে না।

+

নতুন এই ডকটাইপ আগের ডক্টাইপগুলো থেকে অনেক ছোট, যে কারণে এটা সহজেই মনে রাখা যায়। তাছাড়া ছোট হওয়ার জন্য কম বাইট ডাউনলোড হয় ব্যবহারকারীর মেশিনে।

+

<meta charset> লিখে ক্যারেক্টার-সেট ডিক্লেয়ার করুন

+

সাধারণতঃ পেইজের শুরুতেই এটি কোন ক্যারেক্টার-সেট ব্যবহার করছে তা বলে দিতে হয়। HTML এর আগের সংস্করণে জটিল {{HTMLElement("meta")}} ট্যাগ দিয়ে এটি করা লাগত, কিন্তু এখন যা খুবই সহজঃ

+
<meta charset="UTF-8">
+

{{HTMLElement("head") }} এর পরেই উপরের কোড লিখুন, যেহেতু কিছু ব্রাউজার HTML ডকুমেন্ট পার্স করা নতুন করে শুরু করে, যদি আপনার ডিক্লেয়ার করা ক্যারেক্টার-সেট ব্রাউজার যেটা ধরে নিয়েছিল সেটার থেকে আলাদা হয়। এছাড়া, আপনি যদি UTF-8 ব্যবহার না করেন তাহলে আপনাকে UTF-8 ব্যবহার করতে নির্দেশনা দেওয়া হচ্ছে, কারণ এটি অনেক স্ক্রিপ্টেই ক্যারেক্টার ব্যবহার করা অনেক সহজ করে দেয়।

+

খেয়াল করুনঃ HTML5 নির্দেশনা দিয়েছে যে বৈধ ক্যারেক্টার-সেট অবশ্যই ASCII সমর্থিত হতে হবে আর কমপক্ষে ৮ বিট ব্যবহার করে এমন হতে হবে। নিরাপত্তা বাড়াতে আর কিছু এটাক (আক্রমণ!) ঠেকানোর জন্যই এই ব্যবস্থা।

+

নতুন HTML5 পার্সার

+

HTML5 পার্সিং নিয়মকানুন, (যা কিনা HTML কোডের অর্থ বের করে) HTML5 এ নিখুঁতভাবে বলা হয়েছে। HTML5 আসার আগে শুধুমাত্র বৈধ মার্ক-আপ কী সেটাই বলা থাকত, যেকারণে যখনই মার্ক-আপে কোন ভুল পাওয়া যেত (প্রায় সব ওয়েবসাইটেই কিছু না কিছু ভুল থাকে) একেক ব্রাউজার একেকভাবে আচরণ করত। কিন্তু এখন HTML5 এ যেহেতু মার্ক-আপে ভুল থাকলে কি করতে হবে সেটাও বলা হয়েছে, সব HTML5-সমর্থিত ব্রাউজার ভুল কোড পেলেও একইরকম আচরণ করবে।

+

এর ফলে ওয়েব ডেভেলপারদের এখন সুখের সময়। যদিও সব আধুনিক ব্রাউজার-ই HTML5-সমর্থিত, কিছু পুরনো ব্রাউজার পাওয়া যায় যারা কিনা HTML5 পার্সিং নিয়ম মেনে চলে না। এইসব HTML5-অসমর্থিত ব্রাউজার এখনো মানুষজন ব্যবহার করে। ডেভেলপারদের কে ভুল না করে, মার্ক-আপ লিখতে উৎসাহিত করা হয়, কারণ ভুলবিহীন কোড সহজেই বুঝা যায় আর পরেও কোড করতে সুবিধা হয়। আর বড় কথা হল, কোডে ভুল থাকলে পুরনো একেক ব্রাউজারে একেক আচরণ দেখা যাবে - কারণ পুরনো ব্রাউজারগুলো HTML5 পার্সিং নিয়ম মেনে চলে না।

+

টেনশন করার কোন দরকার-ই নেই, আপনার ওয়েবসাইটের কোন কিছু পরিবর্তন করা লাগবে না - ওয়েব ব্রাউজারের ডেভেলপার-রাই এসব নিয়ে মাথা ঘামাচ্ছে!

diff --git a/files/bn/learn/css/howto/generated_content/index.html b/files/bn/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..90cef28d3b --- /dev/null +++ b/files/bn/learn/css/howto/generated_content/index.html @@ -0,0 +1,133 @@ +--- +title: বিষয়বস্তু +slug: Learn/CSS/Howto/Generated_content +tags: + - Basic + - Beginner + - CSS + - CSS Backgraound + - 'CSS:Getting_Started' + - Guide + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Howto/Generated_content +--- +

{{ CSSTutorialTOC() }}

+

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}এটি CSS Getting Started টিউটোরিয়ালের ৯ম বিভাগ; এখানে বর্ণনা করা হয়েছে কিভাবে আপনি CSS ব্যাবহার করে একটি ডকুমেন্টে বিষয়বস্তু যোগ করবেন। আপনি টেক্সট কন্টেন্ট এবং ইমেজ যোগ করার জন্য আপনার স্টাইলশীট পরিবর্তন করুন।

+

তথ্য: বিষয়বস্তু

+

CSS এর গুরুত্বপূর্ণ বৈশিষ্ট হল এটি একটি ডকুমেন্টের বিষয়বস্তু থেকে ডকুমেন্টের স্টাইলকে আলাদা করতে সাহায্য করে। এখনো সেখানে এমন কিছু অবস্থা আছে যেখানে এটা বুঝায় যে স্টাইলশিট এর অংশ হিসেবে কিছু নির্দিষ্ট বিষয়বস্তু ঠিক করতে হয়, ডকুমেন্ট এর অংশ হিসেবে নয়।

+

একটি স্টাইলশীটে নির্দিষ্ট বিষয়বস্তু টেক্সট বা ইমেজ গঠিত হতে পারে।যখন আপনি আপনার স্টাইলশীট বিষয়বস্তু উল্লেখ করেন তখন বিষয়বস্তুকে ঘনিষ্ঠভাবে ডুকুমেন্টের কাঠামো সাথে সংযুক্ত করা হয়।

+
+
+ আরো বিস্তারিত
+

একটি স্টাইলশীট কন্টেন্ট উল্লেখ করতে জটিলতার সৃষ্টি হতে পারে। উদাহরণস্বরূপ, আপনি হয়ত স্টাইলশীটে আপনার ডকুমেন্টে থাকা বিভিন্ন ভাষা শেয়ার করেছেন। যদি স্টাইলশিট এর অংশ অনুবাদ করতে হয়, এর মানে হল যে আপনাকে অবশ্যই স্টাইলশিট এর সে অংশগুলো আলাদা আলাদা ফাইল এ রাখতে হবে এবং আপনার ডকুমেন্ট এর সঠিক ভাষা সংস্করণের সাথে তাদের সংযুক্ত করার ব্যবস্থা করতে হবে।

+

এই জটিলতাগুলো হয় না যদি আপনি চিহ্ন অথবা ছবি বা ইমেজ সমৃদ্ধ বিষয়বস্তু নির্দিষ্ট করেন যেটি সকল ভাষা এবং সংস্কৃতিতে প্রয়োগ করা যায়।

+

একটি স্টাইলশীট নির্দিষ্ট বিষয়বস্তু DOM এর অংশ নয়।

+
+

টেক্সট কন্টেন্ট

+
+
+ একটি উপাদান আগে বা পরে আপনি CSS টেক্সট কন্টেন্ট সন্নিবেশ করতে পারেন। কিভাবে আপনি কন্টেন্টি  {{ cssxref("::before") }} অথবা {{ cssxref("::after") }} যোগ করবেন তার একটি নির্দিষ্ট নিয়ম selector এ দেয়া আছে। টেক্সট কন্টেন্ট নির্দিষ্ট মান {{ cssxref("content") }} প্রোপার্টির সাথে উল্লেখ করুন।
+
+
+
+ উদাহরণ
+

এই নিয়মে টেক্সট এ যোগ করুণ Reference : before every element with the class ref:

+ 
.ref:before {
+  font-weight: bold;
+  color: navy;
+  content: "Reference: ";
+}
+
+
+
+
+ আরো বিস্তারিত
+

একটি স্টাইলশিট এর অক্ষরের সেট ডিফল্ট রুপে UTF-8 থাকে, কিন্তু এটা সংযুক্ত করে নির্দিষ্ট করা যায় অথবা স্টাইলশিট এটা নিজে অথবা আরও বিভিন্ন উপায়ে। আরও বিস্তারিত জানার জন্য দেখুন 4.4 CSS style sheet representation CSS নির্দিষ্টকরণ।

+

আলাদা অক্ষরগুলোও escape প্রক্রিয়ায় নির্দিষ্ট করা যায় যেটি backslash ব্যবহার করে escape অক্ষর বা চিহ্ন হিসেবে। উদাহরণস্বরূপ, \265B হচ্ছে দাবার black queen ♛ এর প্রতীক। আরও বিস্তারিত জানার জন্য দেখুন,  Referring to characters not represented in a character encoding এবং Characters and case CSS নির্দিষ্টকরণে ।

+
+

ইমেজ বা ছবি বিষয়বস্তু

+

একটি উপাদানের আগে বা পরে ছবি সংযুক্ত করার জন্য, আপনি ছবিটির URL  এই{{ cssxref("content") }} প্রপার্টি এর মানের মাঝে বসাবেন।

+
+

উদাহরণ
+ এই নিয়মটি প্রতিটি link এর পরে একটি space দেয় এবং একটি icon যোগ করে  যেটিতে class glossary আছে:

+ 
a.glossary:after {content: " " url("../images/glossary-icon.gif");}
+
+
+

কোন উপাদানের background এ ছবি বা ইমেজ সংযুক্ত করার জন্য, কোন একটি ছবি বা ইমেজ এর URL {{ cssxref("background") }} প্রপার্টি এর মানের মাঝে নির্দিষ্ট করুন।এটি একটি shorthand প্রপার্টি যেটি background color, ছবি, কিভাবে ছবি এবং অন্যান্য বিস্তারিত নির্দিষ্টকরণে সহায়তা করে।

+
+
+ উদাহরণ
+

এই নিয়মটি একটি নির্দিষ্ট উপাদানের background সেট করে, URL ব্যবহার করে image file উল্লেখ করে।

+

selector কোন উপাদানের id উল্লেখ করে। no-repeat মানটি image কে একবার দেখাতে সাহায্য করে :

+ 
#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+
+
+
+
+ আরও বিস্তারিত
+

আলাদা আলাদা প্রপার্টিজ affecting backgrounds এবং অন্যান্য options যখন আপনি background ইমেজ গুলো ঠিক করেন সেইসব তথ্য এর জন্য, দেখুন{ cssxref("background") }} রেফেরেন্স পৃষ্ঠা।

+
+

Action: Adding a background ইমেজ

+

এ ইমেজ টি একটি সাদা বর্গ যেখানে এর নিচে একটি নীল লাইনে আছে :

+ + + + + + +
Image:Blue-rule.png
+
    +
  1. ইমেজ ফাইল টি Download করুন CSS file এর মত একই পদ্ধতিতে। (উদাহরণস্বরূপ, ডান পাশের বাটন এ ক্লিক করুন context মেনুটির জন্য, তারপর Save Image As টি তে ক্লিক করুন এবং এই টিউটোরিয়াল এর জন্য যে পদ্ধতি টি ব্যবাহার করছেন সেটি উল্লেখ করুন।)
    2. +
  2. আপনার CSS ফাইলটি সম্পাদন করুন এবং এই নিয়মটি body তে যোগ করুন , সম্পূর্ণ পৃষ্ঠার জন্য ব্যাকগ্রাউন্ড image যোগ করুন ।
    + 
    background: url("Blue-rule.png");
+
    +

    repeat মান টি ডিফল্ট, তাই একে কিছু করতে হবে না। ইমেজ বা ছবিটি বা অনূভুমিকপভাবে বা উলম্বভাবে পুনরাবৃত্তি হয় , যেটা রেখাযুক্ত লেখা কাগজের মত দেখায় :

    +
    +

    Image:Blue-rule-ground.png

    +
    +
    +

    Cascading Style Sheets

    +
    +
    +

    Cascading Style Sheets

    +
    +
    +
    +
    3. +
+
+
+ চ্যালেঞ্জ
+

এই ইমেজ টি ডাউনলোড করুন:

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

আপনার স্টাইলশিট এ একটি নিয়ম যোগ করুন যাতে করে এটি প্রতিটি লাইনের প্রথমে ইমেজ বা ছবি প্রদর্শন করে :

+
+

Image:Blue-rule-ground.png

+
+
+ image:Yellow-pin.png Cascading Style Sheets
+
+ image:Yellow-pin.png Cascading Style Sheets
+
+
+
+
+ Possible solution
+

Add this rule to your stylesheet:

+ 
p:before{
+  content: url("yellow-pin.png");
+}
+
+

 

+ Hide solution
+ See a solution for the challenge.
+

পরবর্তীতে কি আছে?

+

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}একটি সাধারণ প্রক্রিয়া  stylesheets কিভাবে লিস্টে বিভিন্ন আইটেম মার্ক করার জন্য বিষয়বস্তু যোগ করে। পরবর্তী বিভাগ বর্ণনা করবে কিভাবে specify style for list elements।

diff --git a/files/bn/learn/css/howto/index.html b/files/bn/learn/css/howto/index.html new file mode 100644 index 0000000000..d862a4cb53 --- /dev/null +++ b/files/bn/learn/css/howto/index.html @@ -0,0 +1,88 @@ +--- +title: Use CSS to solve common problems +slug: Learn/CSS/Howto +translation_of: Learn/CSS/Howto +--- +
Translation in progress
+ +
{{LearnSidebar}}
+ +

The following links provide solutions to common problems you can solve with CSS.

+ +

Common use cases

+ +
+
+

Basics

+ + + +

CSS and text

+ + +
+ +
+

Boxes and layouts

+ + +
+
+ +

Uncommon and advanced techniques

+ +

CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.

+ +

General

+ + + +

Advanced effects

+ + + +

Layout

+ + + +

See also

+ +

CSS FAQ — A variety of topics: from debugging to selector usage.

diff --git a/files/bn/learn/css/index.html b/files/bn/learn/css/index.html new file mode 100644 index 0000000000..7714bdbd67 --- /dev/null +++ b/files/bn/learn/css/index.html @@ -0,0 +1,67 @@ +--- +title: Learn to style HTML using CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - Debugging + - Landing + - NeedsContent + - NeedsTranslation + - Style + - Topic + - TopicStub + - length + - specificity +translation_of: Learn/CSS +--- +
{{LearnSidebar}}
+ +

Cascading Stylesheets — or {{glossary("CSS")}} — is the first technology you should start learning after {{glossary("HTML")}}. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

+ +

Learning pathway

+ +

You should learn the basics of HTML before attempting any CSS. We recommend that you work through our Introduction to HTML module first. In that module, you will learn about:

+ + + +

Once you understand the fundamentals of HTML, we recommend that you learn HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can't really learn CSS without knowing HTML.

+ +

Before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up as detailed in Installing basic software and understand how to create and manage files, as detailed in Dealing with files — both of which are parts of our Getting started with the web complete beginner's module.

+ +

It is recommended that you work through Getting started with the web before proceeding with this topic. However, doing so isn't absolutely necessary as much of what is covered in the CSS basics article is also covered in our Introduction to CSS module, albeit in a lot more detail.

+ +

Modules

+ +

This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.

+ +
+
Introduction to CSS
+
This module gets you started with the basics of how CSS works, including using selectors and properties; writing CSS rules; applying CSS to HTML; specifying length, color, and other units in CSS; controlling cascade and inheritance; understanding box model basics; and debugging CSS.
+
Styling text
+
Here, we look at text-styling fundamentals, including setting font, boldness, and italics; line and letter spacing; and 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.
+
Styling boxes
+
Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module, we recap the box model, then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images, and fancy features such as drop shadows and filters on boxes.
+
CSS layout
+
At this point, we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now, it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.
+
Responsive design (TBD)
+
With so many different types of devices able to browse the web these days, responsive web design (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD; explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution; and explore the technologies available for serving different videos and images depending on such features.
+
+ +

Solving common CSS problems

+ +

Use CSS to solve common problems provides links to sections of content explaining how to use CSS to solve very common problems when creating a web page.

+ +

From the beginning, you'll primarily apply colors to HTML elements and their backgrounds; change the size, shape, and position of elements; and add and define borders on elements. But there's not much you can't do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't actually know how to do it yet!

+ +

See also

+ +
+
CSS on MDN
+
The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.
+
diff --git a/files/bn/learn/html/index.html b/files/bn/learn/html/index.html new file mode 100644 index 0000000000..bcfa885427 --- /dev/null +++ b/files/bn/learn/html/index.html @@ -0,0 +1,50 @@ +--- +title: HTML +slug: Learn/HTML +translation_of: Learn/HTML +--- +
{{LearnSidebar}}
+ +

To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.

+ +

Learning pathway

+ +

Ideally you should start your learning journey by learning HTML. Start by reading Introduction to HTML. You may then move on to learning about more advanced topics such as:

+ + + +

Before starting this topic, you should have at least basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in Installing basic software, and understand how to create and manage files, as detailed in Dealing with files — both are parts of our Getting started with the web complete beginner's module.

+ +

It is recommended that you work through Getting started with the web before attempting this topic, however it isn't absolutely necessary; much of what is covered in the HTML basics article is also covered in our Introduction to HTML module, albeit in a lot more detail.

+ +

Modules

+ +

This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.

+ +
+
Introduction to HTML
+
This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.
+
Multimedia and embedding
+
This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
+
HTML Tables
+
Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.
+
HTML Forms
+
Forms are a very important part of the Web — these provide much of the functionality you need for interacting with web sites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.
+
+ +

Solving common HTML problems

+ +

Use HTML to solve common problems provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.

+ +

See also

+ +
+
+
HTML (HyperText Markup Language) on MDN.
+
The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.
+
+
diff --git a/files/bn/learn/html/introduction_to_html/index.html b/files/bn/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..42fc47f662 --- /dev/null +++ b/files/bn/learn/html/introduction_to_html/index.html @@ -0,0 +1,73 @@ +--- +title: Introduction to 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}}
+ +

At its heart, {{glossary("HTML")}} is a fairly simple language made up of {{Glossary("Element","elements")}}, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.

+ +

Prerequisites

+ +

Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in Installing basic software), and understand how to create and manage files (as detailed in Dealing with files). Both are parts of our Getting started with the web complete beginner's module.

+ +
+

Note: If you are working on a computer/tablet/other devices that doesn't let you create your own files, you can try out (most of) the code examples in an online coding program such as JSBin or Glitch.

+
+ +

Guides

+ +

This module contains the following articles, which will take you through all the basic theory of HTML and provide ample opportunity for you to test out some skills.

+ +
+
Getting started with HTML
+
Covers the absolute basics of HTML, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. We also show how a typical HTML page is structured and how an HTML element is structured, and explain other important basic language features. Along the way, we'll play with some HTML to get you interested!
+
What’s in the head? Metadata in HTML
+
The {{Glossary("Head","head")}} of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page {{htmlelement("title")}}, links to {{glossary("CSS")}} (if you want to style your HTML content with CSS), links to custom favicons, and metadata (data about the HTML, such as who wrote it, and important keywords that describe the document).
+
HTML text fundamentals
+
One of HTML's main jobs is to give text meaning (also known as {{Glossary("Semantics","semantics")}}), so that the browser knows how to display it correctly. This article looks at how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.
+
Creating hyperlinks
+
Hyperlinks are really important — they are what makes the web a web. This article shows the syntax required to make a link and discusses best practices for links.
+
Advanced text formatting
+
There are many other elements in HTML for formatting text that we didn't get to in the HTML text fundamentals article. The elements here are less well-known, but still useful to know about. In this article, you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.
+
Document and website structure
+
As well as defining individual parts of your page (such as "a paragraph" or "an image"), HTML is also used to define areas of your website (such as "the header," "the navigation menu," or "the main content column.") This article looks into how to plan a basic website structure and how to write the HTML to represent this structure.
+
Debugging HTML
+
Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help.
+
+ +

Assessments

+ +

The following assessments will test your understanding of the HTML basics covered in the guides above.

+ +
+
Marking up a letter
+
We all learn to write a letter sooner or later; it is also a useful example to test out text formatting skills. In this assessment, you'll be given a letter to mark up.
+
Structuring a page of content
+
This assessment tests your ability to use HTML to structure a simple page of content, containing a header, a footer, a navigation menu, main content, and a sidebar.
+
+ +

See also

+ +
+
Web literacy basics 1
+
An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the Introduction to HTML module. Learners get familiar with reading, writing, and participating on the web in this six-part module. Discover the foundations of the web through production and collaboration.
+
+ +
+

Feedback

+ +

Help us improve our guides and tutorials like this one by taking our survey here.

+
diff --git a/files/bn/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/bn/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..dce5a1f342 --- /dev/null +++ b/files/bn/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,286 @@ +--- +title: What’s in the head? Metadata in HTML +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{পূর্ববর্তীমেনেক্সট ("শিখুন / এইচটিএমএল / ভূমিকা_ টুটোঅ্যাপ / গেটিং_স্টার্ট" "" শিখুন / এইচটিএমএল / পরিচিতি_ টুআউটএইচএমএল / এইচটিএমএল_পাঠন_ফান্ডমেন্টস ")," শিখুন / এইচটিএমএল / ভূমিকা_to_HTML ")}
+ +

এইচটিএমএল ডকুমেন্টের {। শব্দকোষ ("প্রধান", "মাথা")} এমন অংশ যা পৃষ্ঠাটি লোড হওয়ার পরে ওয়েব ব্রাউজারে প্রদর্শিত হয় না। এটিতে {t htmlelement ("শিরোনাম")} page পৃষ্ঠা, {{গ্লসারি ("CSS")) links (আপনি যদি CSS এর সাথে আপনার HTML বিষয়বস্তু স্টাইল করতে পছন্দ করেন), কাস্টম ফেভিকনগুলির লিঙ্ক এবং অন্যান্য সম্পর্কিত তথ্য রয়েছে মেটাডেটা (এইচটিএমএল সম্পর্কিত ডেটা, যেমন লেখক, এবং গুরুত্বপূর্ণ কীওয়ার্ড যা দস্তাবেজ বর্ণনা করে mark) আপনাকে নিবন্ধের সাথে কাজ করার জন্য একটি ভাল ভিত্তি দেওয়ার জন্য এই নিবন্ধে আমরা উপরের এবং আরও অনেকগুলি কভার করব।

+ + + + + + + + + + + + +
পূর্বশর্ত:এইচটিএমএল দিয়ে শুরু করার ক্ষেত্রে কভার হিসাবে বেসিক এইচটিএমএল পরিচিতি ।
উদ্দেশ্য:এইচটিএমএল হেড, তার উদ্দেশ্য, এটিতে থাকা সবচেয়ে গুরুত্বপূর্ণ আইটেমগুলি এবং এটি HTML ডকুমেন্টে কী প্রভাব ফেলতে পারে তা সম্পর্কে জানতে।
+ +

এইচটিএমএল প্রধান কি?

+ +

আসুন আমরা আগের প্রবন্ধে কভার করা সাধারণ HTML নথিটি আবার ঘুরে দেখি :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

এইচটিএমএল হেড হ'ল t t এইচটিএম্লেলেটমেন্ট ("মাথা")}} উপাদানটির বিষয়বস্তু - {t এইচটিএমলেলেট ("বডি")}} উপাদান (যা ব্রাউজারে লোড করার সময় পৃষ্ঠায় প্রদর্শিত হয়) এর বিপরীতে, মাথার সামগ্রীটি পৃষ্ঠায় প্রদর্শিত হয় না। পরিবর্তে, দস্তাবেজের বিষয়ে প্রধানের কাজটি ss। শব্দকোষ ("মেটাডাটা", "মেটাডেটা") contain contain থাকা। উপরের উদাহরণে, মাথাটি বেশ ছোট:

+ +
<head>
+  <meta charset="utf-8">
+  <title>My test page</title>
+</head>
+ +

বড় পৃষ্ঠাগুলিতে তবে মাথা বেশ পূর্ণ হতে পারে। আপনার পছন্দের কয়েকটি ওয়েবসাইটে যাওয়ার চেষ্টা করুন এবং বিকাশকারী সরঞ্জামগুলি তাদের মাথার সামগ্রীগুলি পরীক্ষা করতে ব্যবহার করুন । এখানে আমাদের উদ্দেশ্যটি আপনাকে যে কীভাবে সম্ভবত মাথার মধ্যে রাখা যেতে পারে সেগুলি কীভাবে ব্যবহার করবেন তা আপনাকে দেখানো নয়, বরং আপনাকে কীভাবে প্রধান উপাদানগুলিকে মাথার মধ্যে অন্তর্ভুক্ত করতে চাইবেন এবং কীভাবে আপনাকে কিছুটা পরিচয় দিতে হবে তা কীভাবে ব্যবহার করবেন তা শেখানো। চল শুরু করি.

+ +

একটি শিরোনাম যুক্ত করা হচ্ছে

+ +

আমরা ইতিমধ্যে ক্রিয়াকলাপে {t htmlelement ("শিরোনাম")}} উপাদানটি দেখেছি - এটি নথিতে একটি শিরোনাম যুক্ত করতে ব্যবহার করা যেতে পারে। তবে এটি আপনার শরীরের সামগ্রীতে শীর্ষ স্তরের শিরোনাম যুক্ত করতে ব্যবহৃত which t htmlelement ("h1")}} উপাদানটির সাথে বিভ্রান্ত হতে পারে - এটি কখনও কখনও পৃষ্ঠা শিরোনাম হিসাবেও উল্লেখ করা হয়। তবে এগুলি আলাদা জিনিস!

+ + + +

সক্রিয় শেখা: একটি সাধারণ উদাহরণ পরিদর্শন করা

+ +
    +
  1. এই সক্রিয় শেখার শুরু করতে, আমরা চাই আপনি আমাদের গিটহাব রেপোতে গিয়ে আমাদের শিরোনাম-উদাহরণ । Html পৃষ্ঠাটির একটি অনুলিপি ডাউনলোড করুন । এটি করার জন্য, হয় + +
      +
    1. পৃষ্ঠার বাইরে কোডটি অনুলিপি করুন এবং আপনার কোড সম্পাদকে একটি নতুন পাঠ্য ফাইলে আটকান, তারপরে এটি কোনও বোধগম্য জায়গায় সংরক্ষণ করুন।
      2. +
    2. গিটহাব পৃষ্ঠায় "কাঁচা" বোতাম টিপুন, যার ফলে কাঁচা কোড প্রদর্শিত হবে (সম্ভবত একটি নতুন ব্রাউজার ট্যাবে)। এরপরে, আপনার ব্রাউজারের  ফাইল> পৃষ্ঠা হিসাবে সংরক্ষণ করুন ... মেনু চয়ন করুন এবং ফাইলটি সংরক্ষণ করার জন্য একটি বুদ্ধিমান জায়গা চয়ন করুন।
      3. +
    +
    2. +
  2. এখন আপনার ব্রাউজারে ফাইলটি খুলুন। আপনার এইরকম কিছু দেখতে পাওয়া উচিত: +

    <শিরোনাম> উপাদানটিতে শিরোনামযুক্ত একটি সাধারণ ওয়েব পৃষ্ঠা এবং <h1> উপাদানটিকে <h1> সেট করা আছে।এটি এখন সম্পূর্ণ স্পষ্ট হওয়া উচিত যেখানে <h1>সামগ্রীটি প্রদর্শিত হবে এবং যেখানে <title>সামগ্রী প্রদর্শিত হবে!

    +
    3. +
  3. আপনার কোড সম্পাদকে কোডগুলি খোলার চেষ্টা করা উচিত, এই উপাদানগুলির বিষয়বস্তু সম্পাদনা করে, তারপরে আপনার ব্রাউজারে পৃষ্ঠাটি রিফ্রেশ করুন। এটা দিয়ে কিছু মজা আছে।
    4. +
+ +

<title>উপাদান বিষয়বস্তু অন্যান্য উপায়ে ব্যবহার করা হয়। উদাহরণস্বরূপ, আপনি যদি পৃষ্ঠাটি বুকমার্ক করার চেষ্টা করেন ( বুকমার্কস> এই পৃষ্ঠাটি বুকমার্ক করুন বা ফায়ারফক্সের URL বারে তারকা আইকন), আপনি <title>প্রস্তাবিত বুকমার্কের নাম হিসাবে ভরাট সামগ্রী দেখতে পাবেন ।

+ +

ফায়ারফক্সে একটি ওয়েবপেজ বুকমার্ক করা হচ্ছে; বুকমার্কের নামটি <শিরোনাম> উপাদানটির সামগ্রীতে স্বয়ংক্রিয়ভাবে পূর্ণ হয়ে গেছে filled

+ +

<title>বিষয়বস্তু এছাড়াও, অনুসন্ধান ফলাফল ব্যবহার করা হয় যেমন আপনি নীচের দেখতে পাবেন।

+ +

মেটাডেটা: <মেটা> উপাদান

+ +

মেটাডেটা এমন ডেটা যা ডেটা বর্ণনা করে এবং এইচটিএমএল একটি নথিতে মেটাডেটা যুক্ত করার একটি "অফিসিয়াল" উপায় রয়েছে - {{htmlelement ("meta")}। উপাদান। অবশ্যই, আমরা এই নিবন্ধটিতে অন্যান্য জিনিসগুলির কথা বলছি তাও মেটাডেটা হিসাবে বিবেচনা করা যেতে পারে। বিভিন্ন ধরণের <meta>উপাদান রয়েছে যা আপনার পৃষ্ঠার <হেড> এ অন্তর্ভুক্ত করা যেতে পারে তবে আমরা এ পর্যায়ে সেগুলি ব্যাখ্যা করার চেষ্টা করব না, কারণ এটি কেবল খুব বিভ্রান্ত হবে। পরিবর্তে, আমরা আপনাকে কিছু ধারণা দেবো যা আপনি সাধারণত দেখতে পারেন, কেবল আপনাকে ধারণা দেওয়ার জন্য।

+ +

আপনার নথির অক্ষর এনকোডিং নির্দিষ্ট করা

+ +

আমরা উপরের উদাহরণে দেখেছি, এই লাইনটি অন্তর্ভুক্ত ছিল:

+ +
<meta charset="utf-8">
+ +

এই উপাদানটি কেবল নথির অক্ষর এনকোডিং নির্দিষ্ট করে - নথিটি ব্যবহারের জন্য অনুমোদিত এমন অক্ষর সেট। utf-8একটি সর্বজনীন চরিত্র সেট যা কোনও মানব ভাষা থেকে যে কোনও চরিত্রকে অন্তর্ভুক্ত করে। এর অর্থ হ'ল আপনার ওয়েব পৃষ্ঠাটি যে কোনও ভাষা প্রদর্শিত হ্যান্ডেল করতে সক্ষম হবে; সুতরাং আপনার তৈরি প্রতিটি ওয়েব পৃষ্ঠায় এটি সেট করা ভাল ধারণা! উদাহরণস্বরূপ, আপনার পৃষ্ঠাটি ইংলিশ এবং জাপানিদের ঠিক জরিমানা করতে পারে:

+ +

ইংরেজি এবং জাপানি অক্ষর সমন্বিত একটি ওয়েব পৃষ্ঠা, সর্বজনীন বা utf-8 এ অক্ষর এনকোডিং রয়েছে with উভয় ভাষা সূক্ষ্ম প্রদর্শন করে,আপনি যদি নিজের চরিত্রের এনকোডিং সেট করেন ISO-8859-1, উদাহরণস্বরূপ (লাতিন বর্ণমালার জন্য বর্ণচিহ্ন সেট করা), আপনার পৃষ্ঠার রেন্ডারিং সমস্ত গোলমেলে প্রদর্শিত হতে পারে:

+ +

ইংরাজী এবং জাপানি অক্ষর সমন্বিত একটি ওয়েব পৃষ্ঠাতে লাতিনে অক্ষর এনকোডিং রয়েছে। জাপানি চরিত্রগুলি সঠিকভাবে প্রদর্শিত হয় না

+ +
+

দ্রষ্টব্য : কিছু ব্রাউজার (যেমন ক্রোম) স্বয়ংক্রিয়ভাবে ভুল এনকোডিংগুলি ঠিক করে দেয়, তাই আপনি কোন ব্রাউজারটি ব্যবহার করেন তার উপর নির্ভর করে আপনি যেভাবেই এই সমস্যাটি দেখতে পাবেন না। utf-8অন্য ব্রাউজারগুলিতে কোনও সম্ভাব্য সমস্যা এড়াতে আপনার পাতায় এখনও কোনও এনকোডিং সেট করা উচিত ।

+
+ +

সক্রিয় শেখা: চরিত্রের এনকোডিংয়ের পরীক্ষা

+ +

এটি চেষ্টা করার জন্য, পূর্ববর্তী বিভাগে <title>( শিরোনাম-উদাহরণ html পৃষ্ঠা ) আপনি প্রাপ্ত সাধারণ এইচটিএমএল টেমপ্লেটটি আবার ঘুরে দেখুন , মেটা চরসেট মানটিতে পরিবর্তন করার চেষ্টা ISO-8859-1করুন এবং আপনার পৃষ্ঠায় জাপানিদের যুক্ত করুন। এটি আমরা ব্যবহার করা কোড:

+ +
<p> জাপানি উদাহরণ: ভাত গরম। ? </ P>
+ +

একজন লেখক এবং বিবরণ যুক্ত করা হচ্ছে

+ +

অনেক <meta>উপাদান অন্তর্ভুক্ত nameএবং contentবৈশিষ্ট্য:

+ + + +

আপনার পৃষ্ঠায় অন্তর্ভুক্ত করতে দরকারী এমন দুটি মেটা উপাদান পৃষ্ঠার লেখককে সংজ্ঞায়িত করে এবং পৃষ্ঠার একটি সংক্ষিপ্ত বিবরণ সরবরাহ করে। আসুন একটি উদাহরণ তাকান:

+ +
<মেটা নাম = "লেখক" সামগ্রী = "ক্রিস মিলস">
+<মেটা নাম = "বিবরণ" সামগ্রী = "এমডিএন ওয়েব ডক্স লার্নিং এরিয়া সরবরাহ করার লক্ষ্য
+ওয়েবে তাদের জানতে প্রয়োজনীয় সমস্ত কিছুর সাথে ওয়েবে শুরু করুন
+ওয়েব সাইট এবং অ্যাপ্লিকেশন বিকাশ করে শুরু হয়েছে "">
+ +

কোনও লেখককে নির্দিষ্ট করে দেওয়া বিভিন্ন উপকারে: এই পৃষ্ঠাটি কে লিখেছেন তা বুঝতে সক্ষম হওয়া কার্যকর, যদি বিষয়বস্তু সম্পর্কে আপনার কোনও প্রশ্ন থাকে এবং আপনি তাদের সাথে যোগাযোগ করতে চান। কিছু কন্টেন্ট ম্যানেজমেন্ট সিস্টেমে পৃষ্ঠা লেখকের তথ্য স্বয়ংক্রিয়ভাবে আহরণের এবং এ জাতীয় উদ্দেশ্যে এটি উপলব্ধ করার সুবিধা রয়েছে facilities

+ +

আপনার পৃষ্ঠার সামগ্রীর সাথে সম্পর্কিত কীওয়ার্ড সহ একটি বিবরণ উল্লেখ করা দরকারী কারণ এটি আপনার পৃষ্ঠায় অনুসন্ধান ইঞ্জিনগুলিতে সম্পাদিত প্রাসঙ্গিক অনুসন্ধানগুলিতে উচ্চতর প্রদর্শিত হওয়ার সম্ভাবনা রয়েছে (এই জাতীয় ক্রিয়াকলাপটিকে অনুসন্ধান ইঞ্জিন অপ্টিমাইজেশন বা "এসইও" বলা হয়) )}}।)

+ +

সক্রিয় শিক্ষণ: অনুসন্ধান ইঞ্জিনগুলিতে বর্ণনার ব্যবহার

+ +

বর্ণনাটি অনুসন্ধান ইঞ্জিনের ফলাফল পৃষ্ঠাগুলিতেও ব্যবহৃত হয়। এটি এক্সপ্লোর করার জন্য অনুশীলনের মধ্য দিয়ে যাওয়া যাক

+ +
    +
  1. মজিলা বিকাশকারী নেটওয়ার্কের প্রথম পৃষ্ঠায় যান ।
    2. +
  2. পৃষ্ঠার উত্স দেখুন (পৃষ্ঠায় ডান / Ctrl+ ক্লিক করুন, প্রসঙ্গ মেনু থেকে পৃষ্ঠা উত্স দেখুন চয়ন করুন )
    3. +
  3. বর্ণনা মেটা ট্যাগ সন্ধান করুন। এটি এর মতো কিছু দেখবে (যদিও এটি সময়ের সাথে সাথে এটি পরিবর্তিত হতে পারে): + 
    <মেটা নাম = "বিবরণ" সামগ্রী = "এমডিএন ওয়েব ডক্স সাইট 
+  ওপেন ওয়েব প্রযুক্তি সম্পর্কিত তথ্য সরবরাহ করে 
+  এইচটিএমএল, সিএসএস এবং উভয় ওয়েব সাইট এবং এর জন্য এপিআই সহ 
+  প্রগতিশীল ওয়েব অ্যাপ্লিকেশন "">
    +
    4. +
  4. এখন আপনার পছন্দসই সার্চ ইঞ্জিনে "MDN ওয়েব ডক্স" অনুসন্ধান করুন (আমরা গুগল ব্যবহার করেছি)) আপনি অনুসন্ধানের ফলাফলটিতে ব্যবহৃত বিবরণ <meta>এবং <title>উপাদান সামগ্রীটি লক্ষ্য করবেন - অবশ্যই তা মূল্যবান! +

    "মজিলা বিকাশকারী নেটওয়ার্ক" এর জন্য ইয়াহু অনুসন্ধানের ফলাফল

    +
    5. +
+ +
+

দ্রষ্টব্য : গুগলে আপনি মূল হোমপেজ লিঙ্কের নীচে তালিকাভুক্ত MDN ওয়েব ডক্সের কিছু প্রাসঙ্গিক উপ পৃষ্ঠা দেখতে পাবেন - এগুলিকে সাইটলিঙ্কস বলা হয় এবং গুগলের ওয়েবমাস্টার সরঞ্জামগুলিতে কনফিগার করা যায় - গুগল অনুসন্ধান ইঞ্জিনে আপনার সাইটের অনুসন্ধানের ফলাফলকে আরও উন্নত করার একটি উপায়।

+
+ +
+

দ্রষ্টব্য : অনেকগুলি <meta>বৈশিষ্ট্য আর ব্যবহার করা হয় না। উদাহরণস্বরূপ, কীওয়ার্ড <meta>এলিমেন্ট ( <meta name="keywords" content="fill, in, your, keywords, here">) - যা বিভিন্ন অনুসন্ধানের পদগুলির জন্য সেই পৃষ্ঠার প্রাসঙ্গিকতা নির্ধারণের জন্য অনুসন্ধান ইঞ্জিনগুলির জন্য কীওয়ার্ড সরবরাহ করার কথা ছিল - অনুসন্ধান ইঞ্জিনগুলি দ্বারা উপেক্ষা করা হয়, কারণ স্প্যামাররা কেবলমাত্র শত শত কীওয়ার্ড সহ কীওয়ার্ডের তালিকাটি পূরণ করছিল, বাইসিং ফলাফলগুলি ।

+
+ +

অন্যান্য ধরণের মেটাডেটা

+ +

আপনি যখন ওয়েবে ঘুরে দেখেন, আপনি অন্যান্য ধরণের মেটাডেটাও দেখতে পাবেন। ওয়েবসাইটগুলিতে আপনি দেখতে পাবেন এমন অনেকগুলি বৈশিষ্ট্য হ'ল মালিকানাধর্মী সৃজন, নির্দিষ্ট সাইটগুলি (যেমন সোশ্যাল নেটওয়ার্কিং সাইটগুলি) তারা ব্যবহার করতে পারেন এমন নির্দিষ্ট তথ্য সরবরাহ করার জন্য ডিজাইন করা।

+ +

উদাহরণস্বরূপ, ওপেন গ্রাফ ডেটা এমন একটি মেটাডেটা প্রোটোকল যা ফেসবুক ওয়েবসাইটগুলির জন্য আরও সমৃদ্ধ মেটাডেটা সরবরাহ করার জন্য আবিষ্কার করেছিল। MDN ওয়েব ডক্স সোর্সকোডে আপনি এটি পাবেন:

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

এর একটি প্রভাব হ'ল আপনি যখন ফেসবুকে MDN ওয়েব ডক্সের সাথে লিঙ্ক করেন, লিঙ্কটি একটি চিত্র এবং বর্ণনার সাথে উপস্থিত হয়: ব্যবহারকারীদের জন্য আরও সমৃদ্ধ অভিজ্ঞতা।

+ +

ফেসবুকে প্রদর্শিত হিসাবে এমডিএন হোমপেজ থেকে গ্রাফ প্রোটোকল ডেটা খুলুন, একটি চিত্র, শিরোনাম এবং বিবরণ দেখায়।

+ +

টুইটারের নিজস্ব টুইটার কার্ড নামে নিজস্ব মালিকানাধীন মেটাডেটাও রয়েছে, যা সাইটের ইউআরএল টুইটার ডটকমে প্রদর্শিত হলে একই প্রভাব ফেলে। উদাহরণ স্বরূপ:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

আপনার সাইটে কাস্টম আইকন যুক্ত করা হচ্ছে

+ +

আপনার সাইটের নকশাটিকে আরও সমৃদ্ধ করতে, আপনি আপনার মেটাডেটাতে কাস্টম আইকনগুলিতে উল্লেখ যুক্ত করতে পারেন এবং এগুলি নির্দিষ্ট প্রসঙ্গে প্রদর্শিত হবে। এর মধ্যে সর্বাধিক ব্যবহৃত হ'ল ফেভিকন (ব্রাউজারগুলিতে "ফেভারিট" বা "বুকমার্কস" তালিকায় এর ব্যবহারের উল্লেখ করে "ফেভারিট আইকন" এর জন্য সংক্ষিপ্ত)।

+ +

নম্র ফ্যাভিকন প্রায় বহু বছর ধরে রয়েছে। এটি এই ধরণের প্রথম আইকন: একাধিক জায়গায় ব্যবহৃত 16 পিক্সেল বর্গ আইকন। আপনি প্রতিটি ব্রাউজার পাতায় থাকা ব্রাউজার ট্যাবে এবং বুকমার্ক প্যানেলে বুকমার্কযুক্ত পৃষ্ঠাগুলির পাশে ফ্যাভিকনগুলি (ব্রাউজারের উপর নির্ভর করে) দেখতে পাবেন।

+ +

আপনার পৃষ্ঠায় একটি ফেভিকন যুক্ত করা যেতে পারে:

+ +
    +
  1. সাইটের সূচক পাতা, সংরক্ষিত হিসাবে একই ডিরেক্টরির মধ্যে সংরক্ষণ .icoবিন্যাস (অধিকাংশ ব্রাউজারের মতো আরো সাধারণ বিন্যাসে ফ্যাবিকনগুলি সমর্থন করবে .gifবা .png, কিন্তু ICO ফরম্যাটে ব্যবহার করে এটি পর্যন্ত ফিরে ইন্টারনেট এক্সপ্লোরার 6. যেমন হিসাবে কাজ করে তা নিশ্চিত হবে)
    2. +
  2. এটি উল্লেখ করার জন্য আপনার এইচটিএমএল এর M {এইচটিএমলেমেন্ট ("প্রধান")}} ব্লকটিতে নিম্নলিখিত লাইনটি যুক্ত করা: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

এখানে একটি বুকমার্ক প্যানেলে ফ্যাভিকনের উদাহরণ রয়েছে:

+ +

ফায়ারফক্স বুকমার্কস প্যানেল, পাশে একটি ফ্যাভিকন সহ একটি বুকমার্কড উদাহরণ দেখায়।

+ +

এই দিনগুলিতেও বিবেচনার জন্য প্রচুর অন্যান্য আইকন ধরণের রয়েছে। উদাহরণস্বরূপ, আপনি এটি MDN ওয়েব ডক্স হোমপেজের উত্স কোডে পাবেন:

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

প্রতিটি আইকন কীসের জন্য ব্যবহৃত হয় তা মন্তব্যগুলিতে ব্যাখ্যা করা হয় - ওয়েবসাইটগুলি যখন কোনও আইপ্যাডের হোম স্ক্রিনে সংরক্ষণ করা হয় তখন এই উপাদানগুলি ব্যবহার করার জন্য একটি দুর্দান্ত উচ্চ রেজোলিউশন আইকন সরবরাহ করার মতো জিনিসগুলিকে আবরণ দেয়।

+ +

এই মুহূর্তে আইকন এই ধরণের বাস্তবায়িত সম্পর্কে খুব বেশি চিন্তা করবেন না - এটি একটি মোটামুটি উন্নত বৈশিষ্ট্য, এবং আপনি কোর্সের মাধ্যমে অগ্রগতি সম্পর্কে এই জ্ঞান আশা করা হবে না। এখানে মূল উদ্দেশ্য হ'ল অন্যান্য ওয়েবসাইটগুলির উত্স কোড ব্রাউজ করার সময় আপনি যদি সেগুলি জুড়ে আসেন তবে এই জাতীয় জিনিসগুলি কী তা আপনাকে জানানো।

+ +
+

দ্রষ্টব্য: আপনার সাইটটি এর সুরক্ষা বাড়ানোর জন্য যদি কোনও বিষয়বস্তু সুরক্ষা নীতি (সিএসপি) ব্যবহার করে, তবে নীতিটি ফেভিকনে প্রযোজ্য। যদি আপনার ফেভিকনটি লোড না হওয়ার সমস্যা হয়, তবে যাচাই করুন যে {{HTTPHeader ("বিষয়বস্তু-সুরক্ষা-নীতি")}। শিরোনামের img-srcনির্দেশিকা এতে অ্যাক্সেস রোধ করছে না।

+
+ +

এইচটিএমএলে সিএসএস এবং জাভাস্ক্রিপ্ট প্রয়োগ করা হচ্ছে

+ +

আপনি আধুনিক দিনে যে সমস্ত ওয়েবসাইট ব্যবহার করবেন সেগুলি সম্পর্কে {গ্লসারি ("সিএসএস")} emplo তাদের দুর্দান্ত দেখানোর জন্য এবং ভিডিও প্লেয়ারের মতো ইন্টারেক্টিভ কার্যকারিতা পাওয়ার জন্য {{গ্লসারি ("জাভাস্ক্রিপ্ট") y emplo নিযুক্ত করবে , মানচিত্র, গেমস এবং আরও অনেক কিছু। এগুলি যথাক্রমে page t htmlelement ("লিঙ্ক")}} উপাদান এবং {{htmlelement ("স্ক্রিপ্ট")}} উপাদান ব্যবহার করে কোনও ওয়েব পৃষ্ঠায় সাধারণত প্রয়োগ করা হয়।

+ + + +

সক্রিয় শিক্ষা: একটি পৃষ্ঠায় সিএসএস এবং জাভাস্ক্রিপ্ট প্রয়োগ করা

+ +
    +
  1. এই সক্রিয় শেখা শুরু করার জন্য, আমাদের একটি কপি দখল মেটা-example.html , script.js এবং style.css ফাইল, এবং একই ডিরেক্টরির মধ্যে আপনার কম্পিউটারে সংরক্ষণ করুন। এগুলি সঠিক নাম এবং ফাইল এক্সটেনশনের সাহায্যে সংরক্ষিত হয়েছে তা নিশ্চিত করুন।
    2. +
  2. আপনার ব্রাউজার এবং আপনার পাঠ্য সম্পাদক উভয়ই HTML ফাইল খুলুন।
    3. +
  3. উপরের বর্ণিত তথ্য অনুসরণ করে আপনার HTML এ t t htmlelement ("লিঙ্ক")}} এবং {{htmlelement ("স্ক্রিপ্ট")}} উপাদান যুক্ত করুন, যাতে আপনার সিএসএস এবং জাভাস্ক্রিপ্ট আপনার HTML এ প্রয়োগ হয়।
    4. +
+ +

যদি সঠিকভাবে সম্পন্ন করা হয়, আপনি যখন আপনার এইচটিএমএল সংরক্ষণ করেন এবং আপনার ব্রাউজারটি রিফ্রেশ করেন তখন আপনাকে দেখতে পারা উচিত যে জিনিসগুলি পরিবর্তিত হয়েছে:

+ +

সিএসএস এবং জাভাস্ক্রিপ্ট সহ কোনও পৃষ্ঠা দেখানো উদাহরণ এটিতে প্রয়োগ করা হয়েছে। সিএসএস পৃষ্ঠাটিকে সবুজ করে তুলেছে, যেখানে জাভাস্ক্রিপ্ট পৃষ্ঠায় একটি গতিশীল তালিকা যুক্ত করেছে।

+ + + +
+

দ্রষ্টব্য : আপনি যদি এই অনুশীলনে আটকে যান এবং সিএসএস / জেএস প্রয়োগ করতে না পারেন তবে আমাদের সিএসএস এবং জেএসএইচটিএমএল উদাহরণ পৃষ্ঠাটি পরীক্ষা করে দেখুন।

+
+ +

নথির প্রাথমিক ভাষা সেট করা হচ্ছে

+ +

শেষ অবধি, এটি উল্লেখ করার মতো যে আপনি নিজের পৃষ্ঠার ভাষা সেট করতে (এবং সত্যই হওয়া উচিত)। খোলার এইচটিএমএল ট্যাগে ল্যাং বৈশিষ্ট্য যুক্ত করে এটি করা যেতে পারে ( মেটা-উদাহরণ html তে দেখানো হয়েছে এবং নীচে দেখানো হয়েছে))

+ +
<html lang = "en-US">
+ +

এটি বিভিন্ন উপায়ে কার্যকর। আপনার এইচটিএমএল ডকুমেন্টটি অনুসন্ধানের ইঞ্জিনগুলির দ্বারা আরও কার্যকরভাবে ইনডেক্স করা হবে যদি এটির ভাষা সেট করা থাকে (উদাহরণস্বরূপ ভাষা-নির্দিষ্ট ফলাফলগুলিতে এটি সঠিকভাবে উপস্থিত হতে দেয়), এবং স্ক্রিন পাঠক ব্যবহার করে ভিজ্যুয়াল অক্ষমতাযুক্ত ব্যক্তিদের জন্য এটি দরকারী (উদাহরণস্বরূপ, শব্দটি "ছয়" ফরাসি এবং ইংরেজি উভয় ক্ষেত্রেই বিদ্যমান, তবে এটি আলাদাভাবে উচ্চারণ করা হয়))

+ +

আপনি আলাদা আলাদা ভাষা হিসাবে স্বীকৃতি পেতে আপনার দস্তাবেজের সাব-বিভাগগুলিও সেট করতে পারেন। উদাহরণস্বরূপ, আমরা আমাদের জাপানি ভাষার বিভাগটি জাপানি হিসাবে স্বীকৃতি হিসাবে সেট করতে পারি:

+ +
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
+ +

এই কোডগুলি আইএসও 639-1 স্ট্যান্ডার্ড দ্বারা সংজ্ঞায়িত করা হয়েছে । আপনি এইচটিএমএল এবং এক্সএমএলে ভাষা ট্যাগগুলিতে তাদের সম্পর্কে আরও জানতে পারেন ।

+ +

সারসংক্ষেপ

+ +

এটি এইচটিএমএল হেডের আমাদের কুইকফায়ার সফরের সমাপ্তি চিহ্নিত করে - আপনি এখানে আরও অনেক কিছু করতে পারেন তবে একটি বিস্তৃত ভ্রমণ এই পর্যায়ে বিরক্তিকর এবং বিভ্রান্তিকর হবে এবং আমরা আপনাকে সর্বাধিক সাধারণ বিষয় সম্পর্কে ধারণা দিতে চাইছিলাম আপনি আপাতত সেখানে খুঁজে পাবেন! পরবর্তী নিবন্ধে আমরা এইচটিএমএল পাঠ্যের মূল বিষয়গুলি খুঁজছি।

+ +

{{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/bn/learn/index.html b/files/bn/learn/index.html new file mode 100644 index 0000000000..d97b02594f --- /dev/null +++ b/files/bn/learn/index.html @@ -0,0 +1,99 @@ +--- +title: Web কে শিখুনwww +slug: Learn +tags: + - Beginner + - Index + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn +--- +
+

আপনি কি আপনার নিজের ওয়েবসাইট বা ওয়েব এ্যাপ বানাতে চান ? আপনি একেবারে সঠিক জায়গায়তেই এসেছেন।

+
+ +

ওয়েব ডিজাইন এবং ডেভলোপমেন্ট শিখতে বেশ কিছু জানতে হয়, তবে এটি তেমন চিন্তার বিষয় নয়। এখানে আমরা আপনার সহযোগীতায় আছি , যেখানে আপনি শুধু কিছু কোড বেছে নিবেন আর দেখবেন ধীরে ধীরে আপনি একজন দক্ষ্য পেশাদারী ডেভলোপার এর পরিনত হয়ে যাবেন ।

+ +

কোথায় থেকে শুরু করতে চান?

+ +

আপনি যেখানেই যেতে চান আমরা আপনার সাথে সেখানেই নিয়ে যাব । কোন বিবরনটি আপনার কাছে বেশি সুবিধা জনক ?

+ + + +
+

Note: In the future we're planning to publish more learning pathways, for example for experienced coders learning specific advanced techniques, native developers who are new to the Web, or people who want to learn design techniques.

+
+ +

{{LearnBox({"title":"Quick learning: Vocabulary"})}}

+ +

অন্যান্য জনের সাথে শিখুন

+ +

 যদি আপনার কিছু জানার থাকে or are still wondering where to go, Mozilla is a global community of Web enthusiasts, including mentors and teachers who are glad to help you. Get in touch with them through WebMaker:

+ + + +

Sharing knowledge

+ +

This whole Learning Area is built by our contributors. We need you in our team whether you are a beginner, a teacher, or a skilled web developer. If you're interested, take a look at how you can help, and we encourage you to chat with us on our mailing lists or IRC channel. :)

+ +
+
EXLskills 
+
মেন্টরশিপ এবং প্রকল্প ভিত্তিক শেখার সঙ্গে, প্রযুক্তি দক্ষতা দক্ষতা জন্য বিনামূল্যে এবং খোলা কোর্স
+
+ + + +
    +
  1. Getting started with the web
    2. +
  2. Learn the web +
      +
    1. Web Literacy Map
      2. +
    2. Web mechanics
      3. +
    3. Infrastructure
      4. +
    4. Coding & Scripting
      5. +
    5. Design & Accessibility
      6. +
    6. Writing & planning
      7. +
    +
    3. +
  3. Learn technologies +
      +
    1. HTML
      2. +
    2. CSS
      3. +
    3. JavaScript
      4. +
    4. Python
      5. +
    +
    4. +
  4. Learning tutorials +
      +
    1. How to build a web site?
      2. +
    2. Information security basics
      3. +
    +
    5. +
  5. Learning resources
    6. +
  6. Getting help +
      +
    1. FAQ
      2. +
    2. Glossary
      3. +
    3. Ask your questions
      4. +
    4. Meet teachers and mentors
      5. +
    +
    7. +
  7. How to contribute
    8. +
diff --git a/files/bn/learn/javascript/first_steps/index.html b/files/bn/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..ad6df0a101 --- /dev/null +++ b/files/bn/learn/javascript/first_steps/index.html @@ -0,0 +1,70 @@ +--- +title: জাভাস্ক্রিপ্ট প্রথম ধাপ +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}}
+ +

আমাদের প্রথম জাভাস্ক্রিপ্ট মডিউলে আমরা কিছু ভৌত প্রশ্নের উত্তর দিব, যেমন "জাভাস্ক্রিপ্ট কি?" , "এটা  কেমন দেখতে?" , "এটা কি করতে পারে?" । আপনাকে আপনার প্রথম জাভাস্ক্রিপ্ট লেখার বাস্তব অভিজ্ঞতার মধ্য দিয়ে নিয়ে যাওয়ার আগে আমরা এগুলো শিখবো। তারপর আমরা কিছু  কি বিল্ডিং ব্লক নিয়ে বিশদে আলোচনা করবো, যেমন ভ্যারিয়েবল, স্ট্রিং, নাম্বার এবং array ।

+ +

পূর্বশর্ত 

+ +

এই মডিউল শুরু করার পূর্বে আপনার জাভাস্ক্রিপ্ট এর উপর কোনো পূর্ব অভিজ্ঞতা থাকা আবশ্যক নয়, কিন্তু আপনার HTML ও CSS এর সাথে পরিচিতি থাকতে হবে। আপনাকে জাভাস্ক্রিপ্ট শুরু করার পূর্বে নিম্নের মডিউলগুলোর মধ্য দিয়ে কাজ শুরু করার পরামর্শ দেওয়া হচ্ছে। 

+ + + +
+

বিঃদ্রঃ : আপনি যদি এমন একটি কম্পিউটার/ট্যাবলেট কিংবা অন্যান্য ডিভাইসে কাজ করেন যেখানে আপনার নিজের কোনো ফাইল তৈরী করা সম্ভব নয়, সেক্ষেত্রে আপনার তৈরী করা কোডগুলো নিয়ে গবেষণা করতে পারেন অনলাইন কোডিং প্রোগ্রামগুলোতে যেমন JSBin অথবা Thimble। 

+
+ +

গাইড

+ +
+
জাভাস্ক্রিপ্ট কি?
+
নবীন শিক্ষার্থীদের জন্য আয়োজিত MDN এর জাভাস্ক্রিপ্ট কোর্সে আপনাকে স্বাগতম। এই প্রথম আর্টিকেলে আমরা জাভাস্ক্রিপ্টকে উঁচু স্তর থেকে দেখবো। আমরা উত্তর দেব "এটা কি?" , এবং "এটা কি করছে?" এবং নিশ্চিত করবো যে আপনি জাভাস্ক্রিপ্ট এর উদ্দেশ্য নিয়ে সাচ্ছন্দবোধ করছেন। 
+
জাভাস্ক্রিপ্ট এর প্রথম ঝলক
+
এখন আপনি জাভাস্ক্রিপ্ট সম্পর্কে কিছু তত্ত্ব শিখেছেন এবং আপনি জানেন আপনি এটা দিয়ে কি করতে পারবেন। আমরা আপনাকে একটি সংক্ষিপ্ত কোর্সে সম্পূর্ণ প্রাকটিকাল টিউটোরিয়াল এর মাধ্যমে জাভাস্ক্রিপ্টের ভৌত বৈশিষ্টগুলো শেখাবো। এখানে ধাপে ধাপে আপনি "Guess the number" নামের একটি সাধারণ গেম তৈরী করবেন।  
+
কি সমস্যা হলো? জাভাস্ক্রিপ্ট মেরামত
+
পূর্বের আর্টিকেলে যখন আপনি "Guess the number" গেমটি তৈরী করেছিলেন তখন নিশ্চয়ই খেয়াল করেছিলেন যে এটা কাজ করছিলো না। ভয় পাওয়ার দরকার নেই - এই আর্টিকেল সেই উদ্দেশ্য নিয়ে লেখা হয়েছে কিছু সাধারণ টিপস সহকারে যাতে আপনি সহজে জাভাস্ক্রিপ্ট প্রোগ্রামের সমস্যা নির্ণয় করতে পারেন ও তার সমাধান করতে পারেন। 
+
আপনার দরকারি তথ্য Storing (সংরক্ষণ) করা — Variables (চলক)
+
পূর্বের গুটিকতক আর্টিকেল পড়ার পরে আপনার এখন জানা উচিত জাভাস্ক্রিপ্ট কি, এটা আপনার জন্য কি করতে পারে, অন্যান্য ওয়েব টেকনোলজির পাশাপাশি আপনি এটাকে কিভাবে ব্যবহার করতে পারেন, এবং এটার মূল বৈশিষ্ট উঁচু স্তর থেকে দেখতে কেমন লাগে। এই আর্টিকেলে আমরা একেবারে মৌলিক বিষয় দেখবো যেটা হলো জাভাস্ক্রিপ্টের প্রথম মৌলিক বিল্ডিং ব্লক - Variables (চলক)। 
+
জাভাস্ক্রিপ্ট এর মৌলিক গণিত — numbers and operators
+
এই মুহূর্তে আমরা আলোচনা করবো জাভাস্ক্রিপ্টের গণিত নিয়ে - আমরা কিভাবে অপারেটর একত্র করতে পারি কিভাবে নাম্বারকে আমাদের আদেশ পালন করার জন্য পরিচালনা করতে পারি। 
+
টেক্সট সামলানো — strings in JavaScript
+
পরবর্তীতে আমরা আমাদের মনোযোগ ঘোরাবো স্ট্রিং এর দিকে - টেক্সট এর টুকরাকে প্রোগ্রামিংয়ের ভাষায় এটাই বলা হয়ে থাকে। এই আর্টিকেলে আমরা সেই সবকিছু দেখবো যেটা জাভাস্ক্রিপ্ট শেখার সময় স্ট্রিং সম্পর্কে আপনার জানা থাকার দরকার, যেমন স্ট্রিং তৈরী, স্ট্রিং থেকে কোটেশন এর মুক্তি এবং তাদেরকে একত্র করা। 
+
সুবিধাজনক স্ট্রিং মেথড
+
এখন আমরা দেখলাম স্ট্রিং এর একেবারে মৌলিক বিষয়গুলো, এখন একটু গতি বাড়িয়ে চিন্তা করে দেখা যাক বিল্ট-ইন মেথড ব্যবহার করে স্ট্রিং এর উপর কি ধরণের লাভজনক অপারেশন করা যেতে পারে, যেমন একটি স্ট্রিং এর দৈর্ঘ্য পরিমাপ করা, স্ট্রিং একত্র ও পৃথক করা, স্ট্রিং এর একটি অক্ষর অন্যটির জন্য বাদ দেওয়া, এবং আরো অনেক কিছু।  
+
Arrays
+
এই মডিউলের সর্বশেষ আর্টিকেলে আমরা দেখবো Array - একটিমাত্র চলকের মধ্যে একটি ডাটার তালিকা সংরক্ষণ করার সহজ উপায়। এখানে আমরা দেখবো কেন এটি সুবিধাজনক, তারপর দেখবো কিভাবে একটি Array তৈরী করতে হয়, Array পুনরুদ্ধার, সংযোজন এবং Array এর তালিকা থেকে আইটেম বিয়োজন, এবং এর পাশাপাশি আরো অনেক কিছু। 
+
+ +

মূল্যায়ন

+ +

নিচের কাজটি থেকে মূল্যায়ন করা হবে আপনি উপরের জাভাস্ক্রিপ্ট কোর্সের গাইড অনুসরণ করে কি শিখেছেন। 

+ +
+
মজাদার গল্প উৎপাদক
+
এই মূল্যায়নে আপনাকে একটি কাজ দেওয়া হবে, মডিউলগুলো থেকে কিছু শিখে আপনাকে একটি মজাদার App বানাতে হবে যেটা মজাদার গল্প তৈরী করে। শুভেচ্ছা রইলো !
+
diff --git "a/files/bn/learn/javascript/first_steps/\340\246\234\340\246\276\340\246\255\340\246\276\340\246\270\340\247\215\340\246\225\340\247\215\340\246\260\340\246\277\340\246\252\340\247\215\340\246\237-\340\246\225\340\247\200/index.html" "b/files/bn/learn/javascript/first_steps/\340\246\234\340\246\276\340\246\255\340\246\276\340\246\270\340\247\215\340\246\225\340\247\215\340\246\260\340\246\277\340\246\252\340\247\215\340\246\237-\340\246\225\340\247\200/index.html" new file mode 100644 index 0000000000..f42a4814cc --- /dev/null +++ "b/files/bn/learn/javascript/first_steps/\340\246\234\340\246\276\340\246\255\340\246\276\340\246\270\340\247\215\340\246\225\340\247\215\340\246\260\340\246\277\340\246\252\340\247\215\340\246\237-\340\246\225\340\247\200/index.html" @@ -0,0 +1,421 @@ +--- +title: জাভাস্ক্রিপ্ট কী? +slug: Learn/JavaScript/First_steps/জাভাস্ক্রিপ্ট-কী +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
+ +

মোজিলা ডেভেলপার নেটওয়ার্ক এর প্রাথমিক জাভাস্ক্রিপ্ট এর কোর্সে স্বাগতাম! এই লেখায় আমরা জাভাস্ক্রিপ্টকে গভীরভাবে জানব, কিছু প্রশ্ন নিয়ে আলোচনা করব যেমন "জাভাস্ক্রিপ্ট কী" এবং "জাভাস্ক্রিপ্ট দিয়ে কী করা যায়?", সেই সাথে সহজভাবে কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করতে সেটাও শিখব।

+ + + + + + + + + + + + +
আগে থেকে যা জানতে হবেকম্পিউটার 
উদ্দেশ্য:জাভাস্ক্রিপ্ট এর সাথে পরিচিতি,
+ +

জাভস্ক্রিপ্ট এর পূর্ণাঙ্গ সংজ্ঞা

+ +

জাভাস্ক্রিপ্ট মূলত একটি scripting ভাষা বা programming ভাষা। জাভাস্ক্রিপ্ট ব্যবহার করে ওয়েবসাইটে জটিল বৈশিষ্ট্য যুক্ত করা যায় যেমন নির্দিষ্ট সময় অনু্যায়ী কনটেন্ট পরিবর্তন করা, মানচিত্র যোগ করা ওয়েবসাইটে  2D/3D animation যুক্ত করা ইত্যাদি। নিচের ওয়েব প্রযুক্তি রূপক যে কেক আছে সেটার তৃতীয় স্তর হচ্ছে জাভাস্ক্রিপ্ট। 

+ +

+ + + +

তিনটা পর্যায় একটি আরেকটির উপর সুন্দরভাবে তৈরি। উদাহরণস্বরূপ নিচের টেক্সটটিকে দেখা যাক। HTML ব্যবহার করে আমরা লেখাটিকে মার্ক আপ করবঃ  

+ +
<p>Player 1: Chris</p>
+ +

+ +

তারপর লেখাটিকে সুন্দর করার জন্য আমরা কিছু CSS যোগ করবঃ

+ +
p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor: pointer;
+}
+ +

+ +

এবং সবশেষে আমরা জাভাস্ক্রিপ্ট ব্যবহার করে কনটেন্ট যুক্ত করবঃ 

+ +
const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+
+ +

{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}

+ +

কী ঘটছে তা দেখার জন্য লেখাটির সর্বশেষ সংস্করনে ক্লিক করে দেখুন (উল্লেখ্য আপনি এই ডেমোটা GitHub এও পাবেন — সোর্স কোড দেখুন, অথবা  সরাসরি চালিয়ে দেখুন )!

+ +

জাভাস্ক্রিপ্ট আরো অনেক কিছু করতে পারে - বিস্তারিত জেনে নেওয়া যাক। 

+ +

জাভাস্ক্রিপ্ট প্রকৃতভাবে কী কী করতে পারে? 

+ +

মূল client-side জাভাস্ক্রিপ্ট সাধারণ কিছু প্রোগ্রামিং বৈশিষ্ট্য নিয়ে তৈরি যা দিয়ে আপনি নিচের 

+ + + +

What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called Application Programming Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code.

+ +

APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf.

+ +

They generally fall into two categories.

+ +

+ +

Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:

+ + + +
+

Note: Many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a modern browser like Firefox, Chrome, Edge or Opera to run your code in. You will need to consider cross browser testing in more detail when you get closer to delivering production code (i.e. real code that real customers will use).

+
+ +

Third party APIs are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:

+ + + +
+

Note: These APIs are advanced, and we'll not be covering any of these in this module. You can find out much more about these in our Client-side web APIs module.

+
+ +

There's a lot more available, too! However, don't get over excited just yet. You won't be able to build the next Facebook, Google Maps, or Instagram after studying JavaScript for 24 hours — there are a lot of basics to cover first. And that's why you're here — let's move on!

+ +

What is JavaScript doing on your page?

+ +

Here we'll actually start looking at some code, and while doing so, explore what actually happens when you run some JavaScript in your page.

+ +

Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our How CSS works article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).

+ +

+ +

A very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). Note that the code in your web documents is generally loaded and executed in the order it appears on the page. If the JavaScript loads and tries to run before the HTML and CSS it is affecting has been loaded, errors can occur. You will learn ways around this later in the article, in the Script loading strategies section.

+ +

Browser security

+ +

Each browser tab has its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.

+ +
+

Note: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.

+
+ +

JavaScript running order

+ +

When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:

+ +
const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+ +

Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the updateName() code block (lines 5–8) is run. The updateName() code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.

+ +

If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console — TypeError: para is undefined. This means that the para object does not exist yet, so we can't add an event listener to it.

+ +
+

Note: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.

+
+ +

Interpreted versus compiled code

+ +

You might hear the terms interpreted and compiled in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that.

+ +

Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into machine code that is then run by the computer. The program is executed from a binary format, which was generated from the original program source code.

+ +

JavaScript is a lightweight interpreted programming language. The web browser receives the JavaScript code in its original text form and runs the script from that. From a technical standpoint, most modern JavaScript interpreters actually use a technique called just-in-time compiling to improve performance; the JavaScript source code gets compiled into a faster, binary format while the script is being used, so that it can be run as quickly as possible. However, JavaScript is still considered an interpreted language, since the compilation is handled at run time, rather than ahead of time.

+ +

There are advantages to both types of language, but we won't discuss them right now.

+ +

Server-side versus client-side code

+ +

You might also hear the terms server-side and client-side code, especially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this module we are explicitly talking about client-side JavaScript.

+ +

Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, ASP.NET and... JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find out more about server-side JavaScript in our Dynamic Websites – Server-side programming topic.

+ +

Dynamic versus static code

+ +

The word dynamic is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.

+ +

A web page with no dynamically updating content is referred to as static — it just shows the same content all the time.

+ +

How do you add JavaScript to your page?

+ +

JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.

+ +

Internal JavaScript

+ +
    +
  1. First of all, make a local copy of our example file apply-javascript.html. Save it in a directory somewhere sensible.
    2. +
  2. Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.
    3. +
  3. Next, go to your text editor and add the following in your head — just before your closing </head> tag: + 
    <script>
+
+  // JavaScript goes here
+
+</script>
    +
    4. +
  4. Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line: + 
    document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'You clicked the button!';
+    document.body.appendChild(para);
+  }
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i < buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});
    +
    5. +
  5. Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.
    6. +
+ +
+

Note: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a .html file? Did you add your {{htmlelement("script")}} element just before the </head> tag? Did you enter the JavaScript exactly as shown? JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.

+
+ +
+

Note: You can see this version on GitHub as apply-javascript-internal.html (see it live too).

+
+ +

External JavaScript

+ +

This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.

+ +
    +
  1. First, create a new file in the same directory as your sample HTML file. Call it script.js — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.
    2. +
  2. Replace your current {{htmlelement("script")}} element with the following: + 
    <script src="script.js" defer></script>
    +
    3. +
  3. Inside script.js, add the following script: + 
    function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
    +
    4. +
  4. Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code and making it reusable across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script dumped in it.
    5. +
+ +
+

Note: You can see this version on GitHub as apply-javascript-external.html and script.js (see it live too).

+
+ +

Inline JavaScript handlers

+ +

Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:

+ +
+
function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+ +
<button onclick="createParagraph()">Click me!</button>
+
+ +

You can try this version of our demo below.

+ +

{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}

+ +

This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline onclick handler to make the function run when the button is pressed.

+ +

Please don't do this, however. It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the onclick="createParagraph()" attribute on every button you want the JavaScript to apply to.

+ +

Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:

+ +
const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

This might be a bit longer than the onclick attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed. The JavaScript does not need to be changed.

+ +
+

Note: Try editing your version of apply-javascript.html and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?

+
+ +

Script loading strategies

+ +

There are a number of issues involved with getting scripts to load at the right time. Nothing is as simple as it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you are using JavaScript to manipulate elements on the page (or more accurately, the Document Object Model), your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.

+ +

In the above code examples, in the internal and external examples the JavaScript is loaded and run in the head of the document, before the HTML body is parsed. This could cause an error, so we've used some constructs to get around it.

+ +

In the internal example, you can see this structure around the code:

+ +
document.addEventListener("DOMContentLoaded", function() {
+  ...
+});
+ +

This is an event listener, which listens for the browser's "DOMContentLoaded" event, which signifies that the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that event is fired, therefore the error is avoided (you'll learn about events later in the course).

+ +

In the external example, we use a more modern JavaScript feature to solve the problem, the defer attribute, which tells the browser to continue downloading the HTML content once the <script> tag element has been reached.

+ +
<script src="script.js" defer></script>
+ +

In this case both the script and the HTML will load simultaneously and the code will work.

+ +
+

Note: In the external case, we did not need to use the DOMContentLoaded event because the defer attribute solved the problem for us. We didn't use the defer solution for the internal JavaScript example because defer only works for external scripts.

+
+ +

An old-fashioned solution to this problem used to be to put your script element right at the bottom of the body (e.g. just before the </body> tag), so that it would load after all the HTML has been parsed. The problem with this solution is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down your site.

+ +

async and defer

+ +

There are actually two modern features we can use to bypass the problem of the blocking script — async and defer (which we saw above). Let's look at the difference between these two.

+ +

Scripts loaded using the async attribute (see below) will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. It is best to use async when the scripts in the page run independently from each other and depend on no other script on the page.

+ +

For example, if you have the following script elements:

+ +
<script async src="js/vendor/jquery.js"></script>
+
+<script async src="js/script2.js"></script>
+
+<script async src="js/script3.js"></script>
+ +

You can't rely on the order the scripts will load in. jquery.js may load before or after script2.js and script3.js and if this is the case, any functions in those scripts depending on jquery will produce an error because jquery will not be defined at the time the script runs.

+ +

async should be used when you have a bunch of background scripts to load in, and you just want to get them in place asap. For example, maybe you have some game data files to load, which will be needed when the game actually begins, but for now you just want to get on with showing the game intro, titles, and lobby, without them being blocked by script loading.

+ +

Scripts loaded using the defer attribute (see below) will run in the order they appear in the page and execute them as soon as the script and content are downloaded:

+ +
<script defer src="js/vendor/jquery.js"></script>
+
+<script defer src="js/script2.js"></script>
+
+<script defer src="js/script3.js"></script>
+ +

All the scripts with the defer attribute will load in the order they appear on the page. So in the second example, we can be sure that jquery.js will load before script2.js and script3.js and that script2.js will load before script3.js. They won't run until the page content has all loaded, which is useful if your scripts depend on the DOM being in place (e.g. they modify one of more elements on the page).

+ +

To summarize:

+ + + +

Comments

+ +

As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after six months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:

+ + + +

So for example, we could annotate our last demo's JavaScript with comments like so:

+ +
// Function: creates a new paragraph and appends it to the bottom of the HTML body.
+
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Get references to all the buttons on the page in an array format.
+  2. Loop through all the buttons and add a click event listener to each one.
+
+  When any button is pressed, the createParagraph() function will be run.
+*/
+
+const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +
+

Note: In general more comments are usually better than less, but you should be careful if you find yourself adding lots of comments to explain what variables are (your variable names perhaps should be more intuitive), or to explain very simple operations (maybe your code is overcomplicated).

+
+ +

Summary

+ +

So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript and what kind of things you can do with it. Along the way, you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.

+ +

JavaScript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. In the next article, we will plunge straight into the practical, getting you to jump straight in and build your own JavaScript examples.

+ + + +

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/bn/learn/javascript/index.html b/files/bn/learn/javascript/index.html new file mode 100644 index 0000000000..c74e72a302 --- /dev/null +++ b/files/bn/learn/javascript/index.html @@ -0,0 +1,55 @@ +--- +title: JavaScript +slug: Learn/JavaScript +translation_of: Learn/JavaScript +--- +
{{LearnSidebar}}
+ +

{{Glossary("JavaScript")}}  হচ্ছে একটি প্রোগ্রামিং ভাষা যা আপনাকে ওয়েব পৃষ্ঠাগুলিতে জটিল জিনিসগুলি বাস্তবায়ন করতে দেয়। প্রতিবার একটি ওয়েব পৃষ্ঠা কেবল সেখানে একিরকম থাকে এবং আপনার জন্য স্ট্যাটিক তথ্য প্রদর্শন করে - সময়মত লেখার  আপডেটগুলি, বা মিথষ্ক্রিয় মানচিত্র, বা অ্যানিমেটেড 2 ডি / 3 ডি গ্রাফিক্স বা স্ক্রোলিং ভিডিও জুকবক্সগুলি ইত্যাদি প্রদর্শন করে - এবং  সম্ভবত আপনি জড়িত জাভাস্ক্রিপ্ট বিট করতে পারেন।

+ +

Learning pathway

+ +

JavaScript শেখা একটু বেশী কঠিন  এর অনুষঙ্গী অন্যান্য ভাষা থেকে, যেমন  HTML এবং CSS। তোমার প্রতি আক্তি কঠিন উপদেশহবে, JavaScript শিখার আগে কমসেকম এর  অনুষঙ্গী দুইটি টেকনলজি এর সাথে একটু পরিচিত হন অন্যদের পাশাপাশি এবং নিম্নলিখিত মডিউল মাধ্যমে কাজ করে শুরু করুন:

+ + + +

Having previous experience with other programming languages might also help.

+ +

After getting familiar with the basics of JavaScript, you should be in a position to learn about more advanced topics, for example:

+ + + +

Modules

+ +

This topic contains the following modules, in a suggested order for working through them.

+ +
+
JavaScript first steps
+
In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.
+
JavaScript building blocks
+
In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.
+
Introducing JavaScript objects
+
In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.
+
Client-side web APIs
+
When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. 
+
+ +

Solving common JavaScript problems

+ +

Use JavaScript to solve common problems provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.

+ +

See also

+ +
+
JavaScript on MDN
+
The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.
+
Coding math
+
An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by Keith Peters.
+
diff --git a/files/bn/learn/server-side/django/index.html b/files/bn/learn/server-side/django/index.html new file mode 100644 index 0000000000..8452a4f9d7 --- /dev/null +++ b/files/bn/learn/server-side/django/index.html @@ -0,0 +1,64 @@ +--- +title: Django Web Framework (Python) +slug: Learn/Server-side/Django +tags: + - Beginner CodingScripting django Intro Learn Python Server-side programming +translation_of: Learn/Server-side/Django +--- +
{{LearnSidebar}}
+ +
জ্যাঙ্গ সম্পুর্ন বৈশিষ্ট্যযুক্ত জনপ্রিয় server-side web framework যা Python এ লিখিত। এই মডিউল আপনাকে দেখাবে জ্যাঙ্গ কেন সবচেয়ে জনপ্রিয় web server frameworks, কিভাবে এনভাইরনমেন্ট সেটআপ করতে হবে এবং দেখাবে কিভাবে আপনি আপনার নিজস্ব ওয়েব আপ্লিকেশন তৈরি করবেন।
+ +

পূর্বশর্ত 

+ +

এই মডিউল শুরু করার পুর্বে আপনার জ্যাঙ্গ সম্পর্কে কোন জ্ঞানের প্রয়োজন নেই। মুলত যেটা জানতেই হবে তা হচ্ছে, server-side web programming কি, web programming এবং web frameworks সম্পর্কে বিস্তারিত জানেতে আমাদের এই অংশটি দেখুন যেইখানে মুলত প্রথম থেকে শুরু হয়েছে, Server-side website programming first steps.

+ +

আপনাকে অবশ্যই কিঞ্চিত অর্থাৎ প্রোগ্রামিং এর কিছু সাধারন ধারনা রাখতে হবে এবং Python কেই আমরা রিকমেন্ড করি, যদিও মুল বিষয় খুব বেশি জরুরী না।

+ +
+

মনেরাখুন: পাইথন সবচেয়ে সহজ প্রোগ্রামিং ল্যাঙ্গুয়েজ যা কিনা যেকোনো অনভিজ্ঞ লোকের পক্ষেই পড়া এবং বোঝা সহজ।  বলে রাখি, আপনি যদি এই মডিউলটি আরও ভালভাবে বুঝতে চান তবে আপনাকে সাহায্য করার জন্য ইন্টারনেটে প্রচুর বিনামূল্যে বই এবং টিউটোরিয়াল উপলব্ধ রয়েছে (নতুন প্রোগ্রামাররা python.org উইকিতে Python for Non Programmers পৃষ্ঠাগুলি চাইলে দেখতে পারেন)।

+
+ +

নির্দেশনাঃ 

+ +
+
Django introduction
+
এই আর্টিকেলটির প্রথমেই আমরা এই প্রশ্নের জবাব দিবো যে, "জ্যাঙ্গ কি?" এবং কি কারনে এই ওয়েব ফ্রেমওয়ার্কটি বিশেষ করে তোলে তার একটি সংক্ষিপ্ত বিবরণ আপনাকে দিবো। আমরা মুলত প্রধান বৈশিষ্ট্যগুলির বর্ননা করব এবং কিছু উন্নত কার্যকারিতা সহ যেহেতু আমাদের হাতে পর্যাপ্ত সময় নেই সবকিছু বিশদ ভাবে ব্যাখ্যা করার। এটি সেট আপ করার আগে এবং জ্যাঙ্গ নিয়ে মাঠে নামার আগে এটি কী করতে পারে তার একটি ধারণা দেওয়ার জন্য আমরা আপনাকে জ্যাঙ্গো অ্যাপ্লিকেশনের কয়েকটি মূল বিল্ডিং ব্লক প্রদর্শন করব।
+
Setting up a Django development environment
+
+

এখন যেহেতু আপনি জানলেন যে জাঙ্গো কীসের জন্য, এখন আমরা আপনাকে উইন্ডোজ, লিনাক্স (উবুন্টু), এবং macOS-এ - (আপনি যে কমন অপারেটিং সিস্টেম ব্যবহার করছেন) জ্যাঙ্গো ডেভেলপমেন্ট এনভাইরনমেন্ট কীভাবে সেটআপ এবং টেস্ট করতে হবে তা দেখিয়ে দেব। একটি জ্যাঙ্গো অ্যাপ্লিকেশনগুলির ডেভেলপমেন্ট শুরু করার জন্য যা প্রয়োজন এই নিবন্ধটি আপনাকে মুলত সেগুলই দিবে যা আপনাকে দেওয়া উচিত।

+
+
Django Tutorial: The Local Library website
+
প্রথম আর্টিকেল এ আপনি আমাদের প্রাক্টিকাল টিউটোরিয়াল সিরিজ আপনাকে দেখাবে আপনি কি শিক্ষা গ্রহন করতে যাচ্ছেন এবং মুলত আপনি লকাল লাইব্রেরি সম্পর্কেই সাধারন নির্দেশনা পাবেন -- উদাহরণ সরূপ, আমরা একটি ওয়েবসাইট নিয়ে কাজ করব এবং তাকে বিকশিত করব।
+
Django Tutorial Part 2: Creating a skeleton website
+
এই অধ্যায়ে আপনি একটি ওয়েবসাইট প্রোজেক্ট এর স্কেলেটন তৈরি করা দেখানো হবে যেখানে আপনি site-specific settings, urls, models, views, and templates সম্পর্কে জানতে পারবেন।
+
Django Tutorial Part 3: Using models
+
এই নিবন্ধটি দেখায় যে কীভাবে LocalLibrary ওয়েবসাইটের মডেলগুলি সংজ্ঞায়িত করতে হয় - মডেলগুলি আমাদের অ্যাপ্লিকেশনটির ডেটা সংরক্ষণ করতে চাই এমন ডেটা স্ট্রাকচারকে উপস্থাপন করে এবং জ্যাঙ্গোকে আমাদের জন্য একটি ডাটাবেসে ডেটা সংরক্ষণ করার অনুমতি দেয় (এবং পরে এটি সংশোধন করে)। একটি মডেল কী তা ব্যাখ্যা করা হয়েছে, এটা কিভাবে ডিক্লিয়ার করা হয়েছে এবং কিছু মেইন ফিল্ড টাইপ্স। কিভাবে আপনি মডেল ডেটা অ্যাক্সেস করতে পারবেন এমন কয়েকটি প্রধান উপায় সংক্ষেপে দেখানো হয়েছে।
+
Django Tutorial Part 4: Django admin site
+
এখন আমরা LocalLibrary ওয়েবসাইটের জন্য মডেল তৈরি করেছি, আমরা কিছু "real" বইয়ের ডেটা যুক্ত করতে জাঙ্গো অ্যাডমিন সাইটটি ব্যবহার করব। প্রথমে আমরা আপনাকে অ্যাডমিন সাইটের সাথে কীভাবে মডেলগুলি নিবন্ধভুক্ত করব তা দেখাব, তারপরে আমরা আপনাকে লগইন করতে এবং কিছু ডেটা তৈরি করার উপায় দেখাব। শেষে আমরা কয়েকটি উপায় প্রদর্শন করি যার মাধ্যমে আপনি Admin সাইটের উপস্থাপনাটি আরও উন্নত করতে পারেন।
+
Django Tutorial Part 5: Creating our home page
+
আমরা এখন আমাদের প্রথম পূর্ণ পৃষ্ঠাটি প্রদর্শন করার জন্য code যুক্ত করতে প্রস্তুত - LocalLibrary একটি হোম পৃষ্ঠা যা প্রতিটি মডেলের ধরণের আমাদের কাছে কত রেকর্ড রয়েছে তা দেখায় এবং আমাদের অন্যান্য পৃষ্ঠাগুলিতে সাইডবারের নেভিগেশন লিঙ্ক সরবরাহ করে। যেভাবে আমরা basic URL maps এবং ভিউ লিখতে, ডাটাবেস থেকে রেকর্ড পেতে এবং টেমপ্লেট ব্যবহার করে ব্যবহারিক অভিজ্ঞতা অর্জন করব।
+
Django Tutorial Part 6: Generic list and detail views
+
এই টিউটোরিয়ালটি বই এবং লেখকদের তালিকা এবং বিশদ পৃষ্ঠা যুক্ত করে আমাদের LocalLibrary  ওয়েবসাইটকে প্রসারিত করে। এখানে আমরা জেনেরিক class-based views সম্পর্কে শিখব, এবং তারা ব্যবহারের সাধারণ ক্ষেত্রে আপনার কোড লিখতে হবে এমন কোডের পরিমাণ কীভাবে হ্রাস করতে পারে তা দেখাব। আমরা বেসিক প্যাটার্নের matching পারফর্ম করব এবং তা দেখিয়ে আরও বিশদ বিবরণে url হ্যান্ডলিংয়ে যাব। 
+
Django Tutorial Part 7: Sessions framework
+
এই টিউটোরিয়ালটি home page এ একটি সেশন-ভিত্তিক ভিজিট-কাউন্টার যুক্ত করে, আমাদের LocalLibrary  ওয়েবসাইটকে প্রসারিত করে। এটি তুলনামূলকভাবে সহজ উদাহরণ, তবে এটি দেখায় যে আপনি কীভাবে আপনার নিজের সাইটগুলিতে বেনাম ব্যবহারকারীদের জন্য অবাধ চলাচল নিশ্চিত করার জন্য সেশন ফ্রেমওয়ার্কটি ব্যবহার করতে পারেন।.
+
Django Tutorial Part 8: User authentication and permissions
+
এই টিউটোরিয়ালে আমরা আপনাকে কীভাবে ব্যবহারকারীদের নিজের অ্যাকাউন্টে আপনার সাইটে লগইন করতে দেওয়া হবে এবং কীভাবে তারা কী করতে পারে তা নিয়ন্ত্রণ করতে হবে এবং লগ ইন করা হয়েছে কি না এবং তাদের অনুমতিগুলির ভিত্তিতে তা কীভাবে দেখানো হবে তা আমরা আপনাকে দেখাব। এই ব্যাখ্যার অংশ হিসাবে, আমরা LocalLibrary ওয়েবসাইট প্রসারিত করব, লগইন এবং লগ-আউট pages এবং বই যে ধার করা হয়েছে দেখার জন্য user- ও staff-specific pages নির্দিষ্ট পৃষ্ঠাগুলি যোগ করব।
+
Django Tutorial Part 9: Working with forms
+
এই টিউটোরিয়ালে আমরা আপনাকে জ্যাঙ্গ তে  HTML Forms এর সাথে কীভাবে কাজ করব এবং বিশেষত মডেল উদাহরণগুলি তৈরি করতে, আপডেট করতে এবং মুছতে ফর্মগুলি লেখার সহজ উপায়টি দেখাব। এই ব্যাখ্যার অংশ হিসাবে, আমরা LocalLibrary ওয়েবসাইট প্রসারিত করব, যাতে গ্রন্থাগারিকরা আমাদের নিজস্ব ফর্মগুলি (অ্যাডমিন অ্যাপ্লিকেশন ব্যবহার না করে) ব্যবহার করে লেখকদের বই পুনর্নবীকরণ(renew) করতে এবং তৈরি করতে, আপডেট করতে এবং মুছতে পারেন।
+
Django Tutorial Part 10: Testing a Django web application
+
ওয়েবসাইটগুলি বড় হওয়ার সাথে সাথে এগুলি ম্যানুয়ালি পরীক্ষা করা আরও শক্ত হয়ে ওঠে- পরীক্ষার জন্য মনেহতে পারে আরও অনেক কিছুই নেই, তবে components এর মধ্যে interaction আরও জটিল হয়ে উঠার সাথে সাথে, একটি ছোট্ট পরিবর্তন, পরিবর্তনের সাথে অন্যান্য area এর প্রভাবটি যাচাই করতে আরও অনেক অতিরিক্ত পরীক্ষার প্রয়োজন হতে পারে। এই সমস্যাগুলি সহজ করার একটি উপায় হ'ল স্বয়ংক্রিয় পরীক্ষাগুলি লিখুন যা আপনি প্রতিবার পরিবর্তন করার সময় সহজেই এবং নির্ভরযোগ্যতার সাথে চালানো যেতে পারে। এই টিউটোরিয়ালটি দেখায় যে কীভাবে জাঙ্গোর পরীক্ষার কাঠামোটি ব্যবহার করে আপনার ওয়েবসাইটের unit testing স্বয়ংক্রিয় করবেন।
+
Django Tutorial Part 11: Deploying Django to production
+
এখন আপনি একটি দুর্দান্ত লোকাল লাইব্রেরি ওয়েবসাইট তৈরি করেছেন (এবং পরীক্ষা করেছেন), আপনি এটিকে একটি পাবলিক ওয়েব সার্ভারে ইনস্টল করতে চাইছেন যাতে এটিতে লাইব্রেরি স্টাফ এবং সদস্যরা ইন্টারনেটে অ্যাক্সেস করতে পারে। এই আর্টিকেলটিতে আলোচনা করা হয়েছে, আপনাকে আপনার ওয়েবসাইট স্থাপন করতে কীভাবে একটি হোস্ট সন্ধান করতে হবে এবং আপনার সাইটকে প্রডাকশনের জন্য প্রস্তুত করার জন্য আপনাকে কী করতে হবে।
+
Django web application security
+
ব্যবহারকারীর ডেটা রক্ষা করা যে কোনও ওয়েবসাইট ডিজাইনের একটি অপরিহার্য অংশ। আমরা এর আগে Web security প্রবন্ধে আরও কয়েকটি সাধারণ সুরক্ষা হুমকির ব্যাখ্যা দিয়েছিলাম - এই নিবন্ধটিতে জ্যাঙ্গোর বিল্ট-ইন সুরক্ষাগুলি কীভাবে এই জাতীয় হুমকিগুলি পরিচালনা করে তার একটি ব্যাবহারিক প্রয়োগ প্রদর্শন করা হয়েছে।
+
+ +

Assessments

+ +

এই মূল্যায়নটি জ্যাঙ্গো ব্যবহার করে কীভাবে একটি ওয়েবসাইট তৈরি করবেন সে সম্পর্কে আপনার বোধগম্যতার পরীক্ষা করবে, যা উপরের তালিকাভুক্ত গাইডগুলিতে বর্ণিত ছিলো।

+ +
+
DIY Django mini blog
+
এই মূল্যায়নটিতে আপনি আপনার নিজের ব্লগ তৈরি করতে এই মডিউলটি থেকে শিখেছেন এমন কিছু জ্ঞান ব্যবহার করবেন।
+
diff --git a/files/bn/learn/server-side/first_steps/index.html b/files/bn/learn/server-side/first_steps/index.html new file mode 100644 index 0000000000..1b2c9597a9 --- /dev/null +++ b/files/bn/learn/server-side/first_steps/index.html @@ -0,0 +1,53 @@ +--- +title: Server-side website programming first steps +slug: Learn/Server-side/First_steps +tags: + - Beginner + - CodingScripting + - Guide + - Intro + - Landing + - Learn + - NeedsTranslation + - Server-side programming + - TopicStub +translation_of: Learn/Server-side/First_steps +--- +
{{LearnSidebar}}
+ +

In this module we answer a few fundamental questions about server-side programming — "What is it?", "How does it differ from client-side programming?", and "Why is it so useful?". We then provide an overview of some of the most popular server-side web frameworks, along with guidance on how to select the most suitable framework for creating your first site. Finally, we provide a high-level introductory article about web server security.

+ +

Prerequisites

+ +

Before starting this module, you don't need to have any knowledge of server-side website programming, or indeed any other type of programming. 

+ +

However, you do 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. 

+ +

Guides

+ +
+
Introduction to the server side
+
Welcome to the MDN beginner's server-side programming course! In this first article, we look at server-side programming from a high level, answering questions such as "What is it?", "How does it differ from client-side programming?", and "Why it is so useful?". After reading this article, you'll understand the additional power available to websites through server-side coding.
+
Client-Server overview
+
Now that you know the purpose and potential benefits of server-side programming, we're going to examine in detail what happens when a server receives a "dynamic request" from a browser. As most websites' server-side code handles requests and responses in a similar way, this will help you understand what you need to do when writing your own code.
+
Server-side web frameworks
+
The last article showed you what a server-side web application needs to do in order to respond to requests from a web browser. Now we show how web frameworks can simplify these tasks, and help you choose the right framework for your first server-side web application.
+
Website security
+
Website security requires vigilance in all aspects of website design and usage. This introductory article won't make you a website security guru, but it will help you understand the first important steps you can take to protect your web application against the most common threats.
+
+ +
+

Note: This topic deals with server-side frameworks, and how to use them to create websites. If you are looking for information on client-side JavaScript frameworks, consult our Understanding client-side JavaScript frameworks module.

+
+ +

Assessments

+ +

This "first steps" module doesn't have any assessment because we haven't yet shown you any code. We do hope that at this point you have a good understanding of what sorts of functionality you can deliver using server-side programming, and that you have made a decision about what server-side web framework you will use to create your first website.

diff --git a/files/bn/learn/server-side/first_steps/website_security/index.html b/files/bn/learn/server-side/first_steps/website_security/index.html new file mode 100644 index 0000000000..dcc862f5fc --- /dev/null +++ b/files/bn/learn/server-side/first_steps/website_security/index.html @@ -0,0 +1,180 @@ +--- +title: নিরাপদ ওয়েবসাইট +slug: Learn/Server-side/First_steps/Website_security +translation_of: Learn/Server-side/First_steps/Website_security +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
+ +

ওয়েবসাইট ডিজাইন ও ব্যবহারের সবক্ষেত্রেই এখন নিরাপত্তার প্রয়োজন হয়। এই লেখাটি আপনাকে ওয়েবসাইট নিরাপত্তার গুরু বানিয়ে ফেলবে তবে এটি আপনাকে কীভাবে নিরাপত্তা সংক্রান্ত ঝুঁকি আসতে পারে এবং সবচেয়ে সাধারণ কিছু ঝুঁকি থেকে রক্ষা করার জন্য কী কী প্রতিরোধমূলক পদক্ষেপ নেওয়া যায় সেসব সম্পর্কে প্রাথমিক ধারণা পাবেন।

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

যা জানা থাকা আবশ্যক

+ 		+

কম্পিউটারের সম্পর্কে মৌলিক জ্ঞান

+
+

উদ্দেশ্য:

+ 		ওয়েব এপ্লিকেশনের নিরাপত্তা সংক্রান্ত সবচেয়ে সাধারণ ঝুঁকিগুলোকে সম্পর্কে জানা এবং ওয়েবসাইট হ্যাক হওয়ার ঝুঁকি কমানোর জন্য কী কী করা যায় সে সম্পর্কে ধারণা লাভ
+ +

ওয়েবসাইটের নিরাপত্তা কী?

+ +

ইন্টারনেট একটি ঝুঁকিপূর্ণ স্থান। আমরা হরহামেশাই ওয়েবসাইটকে খুঁজে না পাওয়া অথবা হ্যাক হয়েছে এরকম তথ্য প্রকাশ করা কথা শুনতে পাই।

+ +

The purpose of website security is to prevent these (or any) sorts of attacks. The more formal definition of website security is the act/practice of protecting websites from unauthorized access, use, modification, destruction, or disruption.

+ +

Effective website security requires design effort across the whole of the website: in your web application, the configuration of the web server, your policies for creating and renewing passwords, and the client-side code. While all that sounds very ominous, the good news is that if you're using a server-side web framework, it will almost certainly enable "by default" robust and well-thought-out defense mechanisms against a number of the more common attacks. Other attacks can be mitigated through your web server configuration, for example by enabling HTTPS. Finally, there are publically available vulnerability scanner tools that can help you find out if you've made any obvious mistakes.

+ +

The rest of this article gives you more details about a few common threats and some of the simple steps you can take to protect your site.

+ +
+

Note: This is an introductory topic, designed to help you start thinking about website security, but it is not exhaustive.

+
+ +

Website security threats

+ +

This section lists just a few of the most common website threats and how they are mitigated. As you read, note how threats are most successful when the web application either trusts, or is not paranoid enough about the data coming from the browser.

+ +

Cross-Site Scripting (XSS)

+ +

XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts through the website into the browsers of other users. Because the injected code comes to the browser from the site, the code is trusted and can do things like send the user's site authorization cookie to the attacker. When the attacker has the cookie, they can log into a site as though they were the user and do anything the user can, such as access their credit card details, see contact details, or change passwords.

+ +
+

Note: XSS vulnerabilities have been historically more common than any other type of security threat.

+
+ +

The XSS vulnerabilities are divided into reflected and persistent, based on how the site returns the injected scripts to a browser.

+ + + +

While the data from POST or GET requests is the most common source of XSS vulnerabilities, any data from the browser is potentially vulnerable, such as cookie data rendered by the browser, or user files that are uploaded and displayed.

+ +

The best defense against XSS vulnerabilities is to remove or disable any markup that can potentially contain instructions to run the code. For HTML this includes elements, such as <script>, <object>, <embed>, and <link>.

+ +
+

The process of modifying user data so that it can't be used to run scripts or otherwise affect the execution of server code is known as input sanitization. Many web frameworks automatically sanitize user input from HTML forms by default.

+
+ +

SQL injection

+ +

SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. A successful injection attack might spoof identities, create new identities with administration rights, access all data on the server, or destroy/modify the data to make it unusable.

+ +
+

SQL injection types include Error-based SQL injection, SQL injection based on boolean errors, and Time-based SQL injection.

+
+ +

This vulnerability is present if user input that is passed to an underlying SQL statement can change the meaning of the statement. For example, the following code is intended to list all users with a particular name (userName) that has been supplied from an HTML form:

+ +
statement = "SELECT * FROM users WHERE name = '" + userName + "';"
+ +

If the user specifies a real name, the statement will work as intended. However, a malicious user could completely change the behavior of this SQL statement to the new statement in the following example, by simply specifying the text in bold for the userName.

+ +
SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
+
+ +

The modified statement creates a valid SQL statement that deletes the users table and selects all data from the userinfo table (which reveals the information of every user). This works because the first part of the injected text (a';) completes the original statement.

+ +

To avoid this sort of attack, you must ensure that any user data that is passed to an SQL query cannot change the nature of the query. One way to do this is to escape all the characters in the user input that have a special meaning in SQL.

+ +
+

Note: The SQL statement treats the ' character as the beginning and end of a string literal. By putting a backslash in front of this character (\'), we escape the symbol, and tell SQL to instead treat it as a character (just a part of the string).

+
+ +

In the following statement, we escape the ' character. The SQL will now interpret the name as the whole string in bold (which is a very odd name indeed, but not harmful).

+ +
SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t';
+
+
+ +

Web frameworks will often take care of the character escaping for you. Django, for example, ensures that any user-data passed to querysets (model queries) is escaped.

+ +
+

Note: This section draws heavily on the information in Wikipedia here.

+
+ +

Cross-Site Request Forgery (CSRF)

+ +

CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent.

+ +

This type of attack is best explained by example. John is a malicious user who knows that a particular site allows logged-in users to send money to a specified account using an HTTP POST request that includes the account name and an amount of money. John constructs a form that includes his bank details and an amount of money as hidden fields, and emails it to other site users (with the Submit button disguised as a link to a "get rich quick" site).

+ +

If a user clicks the submit button, an HTTP POST request will be sent to the server containing the transaction details and any client-side cookies that the browser associated with the site (adding associated site cookies to requests is normal browser behavior). The server will check the cookies, and use them to determine whether or not the user is logged in and has permission to make the transaction.

+ +

The result is that any user who clicks the Submit button while they are logged in to the trading site will make the transaction. John gets rich.

+ +
+

Note: The trick here is that John doesn't need to have access to the user's cookies (or access credentials). The browser of the user stores this information and automatically includes it in all requests to the associated server.

+
+ +

One way to prevent this type of attack is for the server to require that POST requests include a user-specific site-generated secret. The secret would be supplied by the server when sending the web form used to make transfers. This approach prevents John from creating his own form, because he would have to know the secret that the server is providing for the user. Even if he found out the secret and created a form for a particular user, he would no longer be able to use that same form to attack every user.

+ +

Web frameworks often include such CSRF prevention mechanisms.

+ +

Other threats

+ +

Other common attacks/vulnerabilities include:

+ + + +

For a comprehensive listing of website security threats see Category: Web security exploits (Wikipedia) and Category: Attack (Open Web Application Security Project).

+ +

A few key messages

+ +

Almost all of the security exploits in the previous sections are successful when the web application trusts data from the browser. Whatever else you do to improve the security of your website, you should sanitize all user-originating data before it is displayed in the browser, used in SQL queries, or passed to an operating system or file system call.

+ +
+

Important: The single most important lesson you can learn about website security is to never trust data from the browser. This includes, but is not limited to data in URL parameters of GET requests, POST requests, HTTP headers and cookies, and user-uploaded files. Always check and sanitize all incoming data. Always assume the worst.

+
+ +

A number of other concrete steps you can take are:

+ + + +

Web frameworks can help mitigate many of the more common vulnerabilities.

+ +

Summary

+ +

This article has explained the concept of web security and some of the more common threats against which your website should attempt to protect. Most importantly, you should understand that a web application cannot trust any data from the web browser. All user data should be sanitized before it is displayed, or used in SQL queries and file system calls.

+ +

With this article, you've come to the end of this module, covering your first steps in server-side website programming. We hope you've enjoyed learning these fundamental concepts, and you're now ready to select a Web Framework and start programming.

+ +

{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

+ +

In this module

+ + diff --git a/files/bn/learn/server-side/index.html b/files/bn/learn/server-side/index.html new file mode 100644 index 0000000000..8fcc639d2c --- /dev/null +++ b/files/bn/learn/server-side/index.html @@ -0,0 +1,59 @@ +--- +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 general 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 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 different static pages would be extremely 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, such as 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 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.

+ +

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 technology-agnostic information about server-side website programming such as "what is it?", "how does it differ from client-side programming?", and "why is it useful?". This module also outlines some of the more popular server-side web frameworks and gives guidance on how to select the best one for your site. Lastly, an introduction to web server security is provided.
+
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.
+
+ +

See also

+ +
+
Node server without framework
+
This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.
+
diff --git a/files/bn/localization/index.html b/files/bn/localization/index.html new file mode 100644 index 0000000000..c88e548079 --- /dev/null +++ b/files/bn/localization/index.html @@ -0,0 +1,65 @@ +--- +title: স্থানীয়করণ +slug: Localization +tags: + - অনুবাদ + - স্থানীয়করণ +translation_of: Glossary/Localization +--- +

স্থানীয়করণ (L10n) হচ্ছে এমন একটি প্রক্রিয়া, যা দ্বারা একটি সফটওয়্যারের ইউজার ইন্টারফেস একটি ভাষা থেকে অন্য ভাষায় রুপান্তর করা হয়। এবং সেই দেশের সংস্কৃতির সাথে সামঞ্জস্যপূর্ণ ও অধিবাসীদের ব্যবহার উপযোগী করা হয়। যাদের প্রযুক্তির প্রতি ও প্রযুক্তির স্থানীয়করণের প্রতি আগ্রহ রয়েছে, এসব রিসোর্স তাঁদের সকলের জন্য উন্মুক্ত। এগুলো ডেভেলপার ও অন্যান্য অবদানকারীর জন্য।

+ + + + + + + +
+

সহায়ক প্রবন্ধ সমুহ

+
+
+ স্থানীয়করণের হাতে-খড়ি
+
+ স্থানীয়করণে আগ্রহী স্বেচ্ছাসেবকগণের জন্য সর্ব প্রথম পাঠ্য।
+
+ XUL টিউটোরিয়ালঃ স্থানীয়করণ
+
+ XUL অ্যাপ্লিকেশন স্থানীয়করণের জন্য XUL টিউটোরিয়াল
+
+ স্থানীয়করণ যোগ্য কোড লেখা
+
+ প্রোগ্রামারদের স্থানীয়করণ যোগ্য সফটওয়্যার তৈরি করার জন্য সর্বোত্তম কার্যকৌশল এবং নির্দেশনা।
+
+ Help file স্থানিয়করন
+
+ এসব ফাইল আরও সহজে স্থানীয়করণ করার জন্য - HTML থেকে কন্টেন্ট কিভাবে আলাদা করব।
+
+ বক্সের আকার
+
+ নির্দিষ্ট স্থানীয়করণের জন্য কিভাবে উইন্ডোর আকার সমন্বয় করবো।
+
+ এক্সটেনশনের বর্ণনা স্থানীয়করণ
+
+ একটি এক্সটেনশনের বর্ণনা স্থানীয়করণের জন্য (extension window এর মধ্যে, extension এর নামের নিচে যে লাইনটি দেখায়) আপনার install.rdf ফাইলের মধ্যে থাকা তথ্যকে পুনরায় লিখতে হবে। এর এজন্য আপনাকে একটি বিশেষ Preference Key ব্যবহার করতে হবে। এই প্রবন্ধটিতে install.rdf ফাইল মডিফাই বা override করার বিস্তারিত নির্দেশনা আছে।
+
+ স্থানীয়করণের ক্ষেত্রে সচরাচর জিজ্ঞাসিত প্রশ্ন সমূহ
+
+ স্থানীয়করণের কাজ করার সময় যতরকম প্রস্ন সচরাচর করা হয়, তার উত্তর এখানে দেয়া রয়েছে।
+
+

সব দেখুন...

+ 		+

সাহায্যকারী দল

+
    +
  • মজিলার ফোরাম সমূহ দেখুন...
    • +
+

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

+ + + +
+

 

diff --git a/files/bn/mdn/community/index.html b/files/bn/mdn/community/index.html new file mode 100644 index 0000000000..f4c21fcec5 --- /dev/null +++ b/files/bn/mdn/community/index.html @@ -0,0 +1,51 @@ +--- +title: যোগ দিন আমাদের দলে +slug: MDN/Community +translation_of: MDN/Community +--- +
{{MDNSidebar}}
+ +

MDN শুধু একটি উইকি নয়: এটি ডেভেলপারদের একটি কমিউনিটি, যারা উন্মুক্ত ওয়েব প্রযুক্তি ব্যবহারকারী অন্যান্য ডেভেলপারদের জন্য MDN কে অসাধারন রিসোর্স হিসেবে গড়ে তোলার জন্য কাজ করছে। "আসল কাজ" হয় MDN সাইটে, আর "কমিউনিটির কাজ" হয় আলোচনা ও চ্যাট এর মাধ্যমে।

+ +

আমরা খুশি হব, যদি আপনি MDN এ অবদান রাখেন; তবে আমরা আরও বেশি খুশি হব, যদি আপনি আমাদের কমিউনিটিতে অংশগ্রহণ করেন। নিচের এই তিনটি সহজ ধাপ অনুসরণ করে আপনি আমাদের সাথে যুক্ত হতে পারেন।

+ +
    +
  1. একটি MDN অ্যাকাউন্ট তৈরি  করুন।
    2. +
  2.  কথোপকথনে যোগ দিন।
    3. +
  3. চলমান ঘটনার উপর নজর রাখুন।
    4. +
+ +

মোজিলার ডেভেলপার সম্পদায় কিভাবে কাজ করে

+ +

নিছের আর্টিকেলগুলি MDN সম্প্রদায় সম্পর্কে আরো বেশী বর্ণনা করা হয়েছে।

+ +

নেটওয়ার্কে অ্যাকাউন্ট তৈরি করা

+ +

{{page("/bn-BD/docs/Project:MDN/অবদান/শুরু", "একটি অ্যাকাউন্ট তৈরি করা") }}

+ +

dev-mdc আলোচনায় সাবস্ক্রাইব

+ +

MDN এর কনটেন্ট এর কাজ নিয়ে আলোচনা করার জন্য মেইলিং লিস্ট হচ্ছে  dev-mdc@lists.mozilla.org। বিভিন্ন উপায়ে আপনি আমাদের কথোপকথন পড়তে পারেন। আর আপনি যদি প্রশাসকের অনুমতির অপেক্ষা না করেই আপনার বার্তা পাঠাতে চান, তাহলে আপনাকে অবশ্যই মেইলিং লিস্টে অন্তর্ভুক্ত হতে হবে। এখানে আরও কিছু ভিন্ন পদ্ধতি আছে, যার মাধ্যমে আপনি মেইলিং লিস্টে অন্তর্ভুক্ত হতে পারেনঃ{{DiscussionList("dev-mdc", "mozilla.dev.mdc")}}

+ +

কেন "dev-mdc"? আগে এটা "Mozilla Developer Center" বা MDC হিসেবে পরিচিত ছিল। তাই সেই আগের নাম অনুযায়ী মেইলিং লিস্টটি dev-mdc হয়েছে। একটি dev-mdn মেইলিং লিস্টও রয়েছে। Kuma প্ল্যাটফর্ম, যেটা দিয়ে MDN চলে, সেটা ডেভেলপ করার জন্য ডেভেলপাররা এখানে আলোচনা করে। আপনাকে এখানেও যুক্ত হওয়ার জন্য স্বাগত জানানো হচ্ছে। কিন্তু আপনার যদি শুধু MDN এর কনটেন্ট এর প্রতি আগ্রহ থাকে, তবে এখানে যুক্ত হওয়ার প্রয়োজন নেই।

+ +

ইন্টারনেট রিলে চ্যাট বা IRC তে যোগদান

+ +

মোজিলা প্রজেক্টের অন্যান্য অংশের মতো MDN কমিউনিটি ব্যবহারকারীরা অনলাইন চ্যাট করার জন্য IRC ব্যবহার করে। irc.mozilla.org এর মধ্যে নিচের IRC চানেল গুলো MDN সংশ্লিষ্টঃ

+ + + +

খুব সম্ভবত এই চ্যানেল গুলো উত্তর আমেরিকায় রবিবার বাদে অন্য সব দিন চালু থাকে।

+ +

যদি আপনি আগে কখনো IRC ব্যবহার নাকরে থাকেন, তবে IRC সম্পর্কে জানুন। ChatZilla হচ্ছে IRC ক্লায়েন্ট যা একটি ফায়ারফক্স অ্যাড-অন হিসেবে তৈরি করা হয়েছে।

+ +

পরবর্তী ধাপ

+ + diff --git a/files/bn/mdn/community/whats_happening/index.html b/files/bn/mdn/community/whats_happening/index.html new file mode 100644 index 0000000000..a703e0481b --- /dev/null +++ b/files/bn/mdn/community/whats_happening/index.html @@ -0,0 +1,28 @@ +--- +title: চলমান ঘটনাবলি সম্পর্কে জানুন +slug: MDN/Community/Whats_happening +translation_of: MDN/Community/Whats_happening +--- +
{{MDNSidebar}}

MDN তৈরি হয়েছে মোজিলার Websites and Developer Engagement কমিউনিটির দ্বারা। নিচে কিছু রাস্তা বলে দেয়া আছে যার মাধ্যমে আমরা কি করছি, সে সম্পর্কে তথ্য ভাগাভাগি করি।

+

ব্লগ

+
+
+ Mozilla Hacks
+
+ ওয়েব, মোজিলা টেকনোলজি এবং ফিচার সম্পর্কে বিস্তারিত খবর এখানে পাওয়া যাবে। 
+
+ ডেভেলপারদের সংযুক্ত করা
+
+ শীঘ্রই আসছে! কমিউনিটির মধ্যে তৎপরতা এবং আলোচনার প্রসার করতে খুব শীঘ্রই এটি চালু করা হবে। এর মাধ্যমে ডেভেলপারদের সংঘবদ্ধ ও সংযুক্ত রাখা যাবে।
+
+

সামাজিক যোগাযোগ

+ +

MDN কমিউনিটি সভা

+

কমিউনিটির সভা প্রতি দুই সপ্তাহ অন্তর বুধবারে, মার্কিন প্রশান্ত মহাসাগরীয় সময় ১০:০০ টায় (UTC-0800 অক্টোবর-মার্চ, UTC-0700 মার্চ-অক্টোবর), #devmo IRC চানেলে অনুষ্ঠিত হয়। আগের সভা গুলোর আলোচ্য সূচি দেখার জন্য MDN community meetings এর উইকি পাতা দেখতে পারেন।

+

MDN Events ক্যালেন্ডারে MDN কমিউনিটির সভা, ডক এর সংকলন এবং MDN সংশ্লিষ্ট অন্যান্য অনুষ্ঠান সম্পর্কিত তথ্য থাকে।

diff --git a/files/bn/mdn/contribute/creating_and_editing_pages/index.html b/files/bn/mdn/contribute/creating_and_editing_pages/index.html new file mode 100644 index 0000000000..4a07a890ac --- /dev/null +++ b/files/bn/mdn/contribute/creating_and_editing_pages/index.html @@ -0,0 +1,25 @@ +--- +title: পাতা তৈরি ও সম্পাদনা +slug: MDN/Contribute/Creating_and_editing_pages +tags: + - NeedsReview +translation_of: MDN/Contribute/Howto/Create_and_edit_pages +--- +
{{MDNSidebar}}

মোজিলা ডেভেলপার নেটওয়ার্ক এর মৌলিক দুটি কাজ যা প্রায় সব অবদানকারী করে থাকে, তা হচ্ছে বর্তমান পৃষ্ঠাগুলো সম্পাদনা/সমৃদ্ধ করা এবং নতুন পৃষ্ঠা তৈরি করা। এই নিবন্ধটি সম্পাদনা ও নতুন পৃষ্ঠা তৈরি করার একেবারে মৌলিক কিছু কৌশল নিয়ে লেখা।

+

বর্তমান পৃষ্ঠাগুলো সমৃদ্ধকরণ

+

সম্পাদনা ও সমৃদ্ধ করা সহজ। পাতার উপরে শিরোনামের ডান পাশে থাকা নীল "Edit" বাটনে ক্লিক করলেই সম্পাদনার পাতা চলে আসবে। সম্পাদনার পাতাটিতে আপনি বিভিন্ন রকমের ফরম্যাটিং অপশন পাবেন। সেই অপশন গুলো ব্যবহার করে আপনি পাতায় থাকা সরাসরি তথ্য যোগ করা ও মোছার কাজ করতে পারবেন। অনুচ্ছেদ যুক্ত করা, লেখা মোছা, শিরোনাম যুক্ত করা সহ লেখা ও সম্পাদনা সংশ্লিষ্ট আরও মৌলিক কিছু ফাংশন এই পৃষ্ঠায় পাবেন।

+

পরিবর্তন নিরীক্ষণ

+

আপনার করা পরিবর্তন সমূহ দেখতে কেমন লাগবে, তা বোঝার জন্য পৃষ্ঠার উপরে ডান পাশে নীল রঙের "Preview changes" বাটনটি ক্লিক করুন। এরপর একটি নতুন/আলাদা ট্যাবে নিরীক্ষণ পৃষ্ঠা আসবে, যেখানে আপনার করা পরিবর্তন গুলো সহ পৃষ্ঠাটি (যে পৃষ্ঠাটি সম্পাদনা করছেন) দেখতে কেমন হবে, তা দেখতে পাবেন। যতবার আপনি এই বাটন চাপবেন, ততবারই এটি আপনার প্রিভিউ পৃষ্ঠা সর্বশেষ পরিবর্তন সহ পুনরায় লোড করবে। তবে মনে রাখবেন, প্রিভিউ পৃষ্ঠা আপনার পরিবর্তন গুলোকে আপাতত হিসেবে দেখাবে; সংরক্ষণ করবে না। তাই কখনো প্রিভিউ পাতা থেকে সেভ না করে বের হবেন না। প্রিভিউ পাতা বা এডিট পাতা থেকে চলে যাওয়ার আগে অবশ্যই সর্বশেষ পরিবর্তন সংরক্ষনের জন্য Save Changes চাপতে হবে।

+

পরিমার্জন/সংশোধন মন্তব্য

+

সংরক্ষণপূর্ব নিরীক্ষণ বা Preview দেখার পর আপনি আপনার করা পরিবর্তনগুলো সংরক্ষণ করবেন। সংরক্ষণ করার আগে পেজের নিচে থাকা মন্তব্যের জায়গায় আপনি কেন সম্পাদনা করেছেন, তা লিখুন। আপনার মন্তব্য থেকে অন্যান্য অবদানকারীরা আপনার সম্পাদনা সম্পর্কে সহজে ধারনা পাবে। মনেকরুন, আপনি হয়তো নতুন কোনো অনুচ্ছেদ যুক্ত করেছেন, বা কোন প্রবন্ধের ভাবকে আরও সহজে বোঝার জন্য কয়েকটি শব্দ পরিবর্তন করেছেন, অথবা অপ্রয়োজনীয় কিছু তথ্য মুছে দিয়েছেন। এরকম পরিবর্তন কেন করা প্রয়োজন, এ সম্পর্কে আপনি অবশ্যই মন্তব্য করবেন।

+

ট্যাগ

+

একটি পৃষ্ঠার কনটেন্ট সহজে বুঝতে ও খুঁজে পেতে ট্যাগ ব্যবহার করা হয়। আপনি চাইলে ট্যাগ যুক্ত বা অপসারণ করতে পারেন। আর এই ট্যাগ যুক্ত বা অপসারনের প্রক্রিয়াটিও যেহেতু সংশোধনের পর্যায়ে পড়ে, তাই এই কাজের সময়েও মন্তব্য করে আপনার কাজের নিরপেক্ষতা ও প্রয়োজনীয়তার স্বপক্ষে যুক্তি দেখাবেন।

+

মতামত প্রয়োজন?

+

যদি আপনি চান যে একজন দক্ষ বা অভিজ্ঞ অবদানকারী আপনার করা সম্পাদনা-সংশোধন দেখুক এবং মতামত জানান, তাহলে আপনি একটি টেকনিক্যাল (কোড, এপিআই অথবা প্রযুক্তি সম্বন্ধে) রিভিউ-এর জন্য আবেদন করতে পারেন। অথবা একটি সম্পাদকীয় রিভিউ (প্রবন্ধ, ব্যাকরণ এবং কনটেন্ট) অথবা একটি টেম্পলেট রিভিউ (কুমাস্ক্রিপ্ট কোডের জন্য) এর জন্যও আবেদন করতে পারেন। তবে এজন্য আপনাকে উক্ত পাতাটি সংরক্ষনের পূর্বে বক্সটি টিক দিয়ে রাখতে হবে।

+

ফাইল সংযুক্তি

+

যদি আপনি কোন ফাইল সংযুক্ত করতে চান, বা আপনার নিবন্ধটি সহজে বোঝার জন্য কোন ছবি সংযুক্ত করতে চান, তাহলে সেটা পৃষ্ঠার একদম শেষের দিকে করতে পারেন।

+

সংরক্ষণ, বাতিল অথবা সম্পাদনা চালিয়ে যাওয়া

+

যখন আপনার সম্পাদনা শেষ হয়ে যাবে এবং আপনি আপনার প্রিভিউ দেখে সন্তুষ্ট হবেন, তখন আপনি আপনার কাজ এবং মন্তব্য পেজের উপরে থাকা সবুজ "Save changes" লেখা বোতাম চেপে সংরক্ষণ করতে পারেন। কিন্তু পরক্ষনে যদি আবার আপনার মনে হয় যে কাজটা ঠিক হয়নি, তাহলে আপনি পেজের উপরে থাকা লাল রঙের "Discard changes" লেখা বোতাম চেপে আগের করা কাজগুলো বাতিল করতে পারেন।

+

নতুন পৃষ্ঠা তৈরি করা

+

নতুন সাব পেজ বোতাম; লিঙ্ক ফলো করা; পেজ নকল করা।

+

পেজ টাইপ নিবন্ধের লিঙ্ক।

diff --git a/files/bn/mdn/contribute/getting_started/index.html b/files/bn/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..3eed1c3242 --- /dev/null +++ b/files/bn/mdn/contribute/getting_started/index.html @@ -0,0 +1,130 @@ +--- +title: মজিলা ডেভেলপার নেটওয়ার্কের সাথে পরিচিত হওয়া +slug: MDN/Contribute/Getting_started +tags: + - Documentation + - Getting Started + - Guide + - MDN + - MDN Project + - MDN পরিবারে যুক্ত হউন + - New Contributors + - গাইড + - ডকুমেন্টেশন + - নতুন অবদানকারী + - পরিচিতি +translation_of: MDN/Contribute/Getting_started +--- +
{{MDNSidebar}}

মজিলা ডেভেলপার নেটওয়ার্ক কি ?

+ +

আমরা একটি মুক্ত ডেভেলপার পরিবার, যারা ওয়েব এর উত্তরোত্তর উন্নতির জন্য রিসোর্স তৈরি করছি। আমরা ব্র্যান্ড, ব্রাউজার অথবা প্ল্যাটফর্মে সীমাবদ্ধ নই। আমরা সকল ব্র্যান্ড, ব্রাউজার এবং প্ল্যাটফর্মের জন্য কাজ করি। আমাদের এখানে যে কেউ অবদান রাখতে পারে। এবং আপনাদের অবদান আমাদের আরও শক্তিশালী হতে সহায়তা করে। আমরা একসাথে ওয়েবে সৃষ্টিশীলতা আনা এবং বৃহৎ স্বার্থে কাজ চালিয়ে যেতে পারি। আপনাদেরকে সাথে নিয়েই আমরা যাত্রা শুরু করেছি, এবং থাকব।

+ +

MDN (ডকুমেন্ট, ডেমো, এবং সাইট) ডেভেলপারদের একটি মুক্ত পরিবারের মাধ্যমে তৈরি করা হয়েছে। অনুগ্রহ করে আমাদের সাথে যুক্ত হোন!

+ +

 যুক্ত হবার ৩ টি সহজ ধাপ

+ +

১ম ধাপঃ অ্যাকাউন্ট তৈরি

+ +

মজিলা ডেভেলপার নেটওয়ার্ক (সংক্ষেপে MDN) এ আপনার অবদান শুরু করার জন্য আপনাকে অ্যাকাউন্ট তৈরি করতে হবে। অ্যাকাউন্ট কিভাবে তৈরি করবেন, এ বিষয়ে জানার জন্য কিভাবে অ্যাকাউন্ট তৈরি করতে হয় এই পাতাটি দেখুন।

+ +

২য় ধাপঃ কাজ নির্বাচন করা

+ +

এখন যেহেতু আপনি লগ-ইন করে ফেলেছেন, নিচে উল্লেখিত তালিকায় বিভিন্ন ধরনের কাজের বিবরণ পড়ুন এবং সিদ্ধান্ত নিন যে কোনটি আপনার কাছে বেশি আকর্ষণীয় মনে হয়। আপনি আপনার অবদান রাখা শুরু করতে যেকোনো কাজ নির্বাচন করতে পারেন।

+ +

৩য় ধাপঃ কাজ করা

+ +

একবার যখন আপনি নির্ধারণ করে ফেলবেন যে, আপনি কি ধরনের কাজ করতে চান, তারপর একটি নির্দিষ্ট পাতা, কোডের উদাহরন ইত্যাদি কাজ করার জন্য বেছে নিন এবং করে ফেলুন!

+ +

এটা একদম নিখুঁতভাবে করার জন্য চিন্তা করার প্রয়োজন নেই; অন্যান্য MDN অবদানকারীরা আপনার করা ভুলগুলো শোধরানোর জন্য এখানে রয়েছে। যদি আপনি "আসলেই" কিছু করার আগে গবেষণা করতে চান, তাহলে আপনি Sandbox পাতাটি সম্পাদনা করতে পারেন। চলার পথে স্বভাবতই আপনার মনে বিভিন্ন প্রশ্নের উদয় হবে। আপনার সব প্রশ্নের উত্তর পাওয়ার জন্য এমডিএন দলে যোগদান পাতাটি দেখতে পারেন। এখানে আমাদের মেইলিং লিস্ট এবং চ্যাট চ্যানেলের তথ্য রয়েছে।

+ +

যখন আপনার কাজ শেষ হয়ে যাবে, নির্দ্বিধায় আরেকটি কাজ নির্বাচন করে কাজ করুন, অথবা নিচে MDN এ আরও যা যা করতে পারেন অংশটি দেখুন।

+ +

সম্ভাব্য কাজের ধরন

+ +

আপনার দক্ষতা এবং আগ্রহের উপর নির্ভর করে আপনি বিভিন্ন উপায়ে MDN এ অবদান রাখতে পারেন। এমনকি কিছু কাজ কঠিন হতে পারে, কিন্তু আমাদের অনেক সহজ/সাধারণ কাজ রয়েছে। এরমধ্যে অনেকগুলো করতে মাত্র পাঁচ মিনিট (এর থেকেও কম!) সময় লাগে। কাজ এবং তার সারসংক্ষেপের সাথে আপনি প্রত্যেক ধরনের কাজের জন্য আনুমানিক কতটা সময় লাগতে পারে, তা খুঁজে পাবেন।

+ +

অপশন ১: আমি শব্দ পছন্দ করি

+ +

আপনি আমাদের বর্তমান ডকুমেন্ট সমূহ পর্যালোচনা, সম্পাদনা বা সঠিক ট্যাগ বসাতে সাহায্য করতে পারেন।

+ + + +
লক্ষ্য করুনঃ যদি আপনি নিবন্ধ পর্যালোচনা অথবা নতুন নিবন্ধ লেখার কাজ করেন, তবে আমরা আপনাকে স্টাইল গাইড পর্যালোচনার জন্য অনুরোধ করবো। এতে করে আপনার নিবন্ধ গুলো দৃঢ় হবে।
+ +

অপশন ২: আমি কোড পছন্দ করি

+ +

আমাদের আরও অনেক কোড স্যাম্পল প্রয়োজন! আপনি চাইলে আমাদের সাইটের প্ল্যাটফর্ম, Kuma ডেভেলপ করতেও সাহায্য করতে পারেন!

+ + + +

অপশন ৩: আমি শব্দ এবং কোড উভয়ই পছন্দ করি

+ +

আমাদের এমন কিছু কাজ রয়েছে, যাতে প্রযুক্তি ও ভাষাগত উভয় দক্ষতারই প্রয়োজন হয়। যেমনঃ নতুন একটি নিবন্ধ লেখা, প্রযুক্তিগত নির্ভুলতা যাচাইয়ের জন্য পর্যালোচনা অথবা ডকুমেন্ট অভিযোজিত করা।

+ + + +

অপশন ৪: আমি আমার ভাষায় MDN চাই

+ +

MDN এ করা সমস্ত লোকালাইজেশন এবং অনুবাদের কাজ আমাদের দুর্দান্ত স্বেচ্ছাসেবক পরিবার করে থাকে।

+ + + +

অপশন ৫: আমি কিছু ভুল তথ্য পেয়েছি, কিন্তু আমি জানিনা এটা কিভাবে সমাধান করতে হবে

+ +

ডকুমেন্টেশন বাগ ফাইল করে আপনি সমস্যার কথা জানাতে পারেন। (৫ মিনিট)

+ +

এই ফিল্ডের মান গুলো ব্যবহার করুনঃ

+ + + + + + + + + + + + + + + + + + + + + + + + +
Bugzilla fieldValue
productDeveloper Documentation
component[প্রাসঙ্গিক একটি জায়গা নির্বাচন করুন, অথবা আপনি যদি নিশ্চিত না হন বা সঠিকটি খুঁজে না পান, তাহলে "General" নির্বাচন করুন]
URLযেই পেজে আপনি সমস্যাটির সম্মুখীন হয়েছেন।
Descriptionসমস্যাটি সম্পর্কে আপনি যতটা জানেন তা লিখতে পারেন। অথবা সমস্যাটি বিস্তারিত বর্ণনা করতে পারেন এবং কোথায় এ সম্পর্কে বিস্তারিত তথ্য পাওয়া যাবে ইত্যাদি লিখতে পারেন। এর মধ্যে বিভিন্ন মানুষকেও অন্তর্ভুক্ত করতে পারেন ("talk to so-and-so") এবং বিভিন্ন ওয়েব লিঙ্কও দিতে পারেন।
+ +

MDN এ আপনি আরও যা যা করতে পারেন

+ + diff --git a/files/bn/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/bn/mdn/contribute/howto/convert_code_samples_to_be_live/index.html new file mode 100644 index 0000000000..7403c4553d --- /dev/null +++ b/files/bn/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -0,0 +1,38 @@ +--- +title: কোডের উদাহরন গুলোকে যেভাবে "জীবন্ত" করা যাবে +slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live +tags: + - Guide +translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live +--- +
{{MDNSidebar}}

MDN এর একটি "live sample" ব্যবস্থা আছে, যেখানে একটি পাতা প্রদর্শনের জন্য সরাসরি কোডের উদাহরণটিকেই ব্যবহার করা হয়। তবে এখনো এমন কিছু নিবন্ধ রয়েছে, যেগুলোতে শুধু কোড দেখানো হয়েছে, কিন্তু সেগুলো ব্যবহার করা হয়নি। এগুলো ব্যবহারোপযোগী করতে রুপান্তর করা প্রয়োজন।

+ + + + + + + + + + + + + + + +
এটা কোথায় করতে হবে?যেসব নিবন্ধে NeedsLiveSample ট্যাগ রয়েছে।
এই কাজটি করার জন্য আমার কি জানা প্রয়োজন? +
    +
  • কোডের উদাহরনের উপর নির্ভর করে HTML, CSS এবং/অথবা JavaScript এর জ্ঞান থাকতে হবে।
    • +
  • নিবন্ধের মধ্যে KumaScript ম্যাক্রো সমূহ ব্যবহারের সক্ষমতা।
    • +
+
কাজটি করার জন্য কি কি ধাপ অনুসরণ করতে হবে ? +

কিভাবে লাইভ স্যাম্পল তৈরি করতে হবে সহ, লাইভ স্যাম্পল সিস্টেম সম্পর্কে সম্পূর্ণ ধারনা পেতে লাইভ স্যাম্পল সিস্টেম ব্যবহার করা নিবন্ধটি দেখুন।

+
    +
  1. NeedsLiveSample পাতায় তালিকাভুক্ত নিবন্ধ গুলো থেকে যেকোনো একটি নিবন্ধ নির্বাচন করুন, যেটাতে কাজ করতে আপনি স্বচ্ছন্দ বোধ করবেন।
    2. +
  2. কোডের উদাহরণটিকে "live" হওয়ার জন্য রুপান্তর করুন।
    3. +
  3. উদাহরণটির আউটপুট দেখানোর জন্য পূর্বে যে কোড বা ইমেজ ব্যবহার করা হয়েছিল, তা অপসারণ করুন।
    4. +
+

 

+
+

 

diff --git a/files/bn/mdn/contribute/howto/create_an_mdn_account/index.html b/files/bn/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..7bc9d904ae --- /dev/null +++ b/files/bn/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,29 @@ +--- +title: যেভাবে MDN এ অ্যাকাউন্ট তৈরি করবো +slug: MDN/Contribute/Howto/Create_an_MDN_account +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}

এভাবে আমরা MDN এ একটি অ্যাকাউন্ট তৈরি করবোঃ

+
    +
  1. পাতার উপরে থাকা Sign in with Persona বাটনে ক্লিক করুন। একটি পারসোনা লগইনের উইন্ডো চালু হবে।
    2. +
  2. নতুন অ্যাকাউন্ট এর জন্য যে ইমেইল ঠিকানা ব্যবহার করতে চান, সেটি লিখুন এবং next এ ক্লিক করুন।
    3. +
  3. এরপরে যেটা হবে, তা নির্ভর করে যে, আপনি এর আগে এই ইমেইল ঠিকানাটি পারসোনায় ব্যবহার করেছেন, কি না। +
      +
    • যদি এর আগে ব্যবহার করে থাকেন, তবে পারসোনা উইন্ডোটি  আপনার পাসওয়ার্ড চাইবে। পাসওয়ার্ড দিন এবং done ক্লিক করুন।
      • +
    • যদি এর আগে কখনো পারসোনা ব্যবহার না করে থাকেন, তবে আপনাকে পাসওয়ার্ড নির্বাচন করতে বলবে। +
        +
      1. দুইবার পাসওয়ার্ড দিন এবং done ক্লিক করুন।
        2. +
      2. আপনার ইমেইল চেক করুন এবং দেখুন যে, no-reply@persona.org থেকে কোন মেইল এসেছে কি না; যদি ইনবক্সে না পান, তবে spam বক্সে দেখুন।
        3. +
      3.  মেসেজে থাকা নিবন্ধন লিঙ্কে ক্লিক করুন। আপনার পারসোনা অ্যাকাউন্ট তৈরি।
        4. +
      4. এবার আপনি যে ট্যাব বা উইন্ডো থেকে MDN এ প্রবেশ (signing in) করতে গিয়েছিলেন, সেখানে ফিরে যান।
        5. +
      +
      • +
    +
    4. +
  4. একবার যখন আপনি পারসোনায় অনুমোদিত হয়ে যাবেন, তখন MDN এর জন্য একটি নতুন ব্যবহারকারী পাতা (Profile page) পাবেন।
    5. +
  5. আপনার প্রোফাইলের জন্য একটি নাম (user name) নির্বাচন করুন এবং Create new profile ক্লিক করুন।
    6. +
+
+

বিশেষ দ্রষ্টব্য: নতুন ইউজার নামের মধ্যে কোন স্পেস বা @ থাকতে পারবে না। মনে রাখবেন, আপনি যেসব কাজ করেছেন, তা চিহ্নিত করতে আপনার ইউজারনেম সার্বজনীন ভাবে প্রদর্শন করা হবে।

+
+

 

diff --git a/files/bn/mdn/contribute/howto/index.html b/files/bn/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..650f2b8f59 --- /dev/null +++ b/files/bn/mdn/contribute/howto/index.html @@ -0,0 +1,13 @@ +--- +title: How-to guides +slug: MDN/Contribute/Howto +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Howto +--- +
{{MDNSidebar}}

These articles provide step-by-step guides to accomplishing specific goals when contributing to MDN.

+

{{LandingPageListSubpages}}

diff --git a/files/bn/mdn/contribute/index.html b/files/bn/mdn/contribute/index.html new file mode 100644 index 0000000000..7da2ed6c9b --- /dev/null +++ b/files/bn/mdn/contribute/index.html @@ -0,0 +1,70 @@ +--- +title: MDN এ অবদান রাখা +slug: MDN/Contribute +tags: + - Documentation + - Guide + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute +--- +
{{MDNSidebar}}

স্বাগতম! এই পেইজ দেখার মাধ্যমে MDN এর অবদানকারী হওয়ার পথে আপনি আপনার প্রথম পদক্ষেপ নিলেন। স্টাইল গাইড, আমাদের এডিটর এবং টুলস ব্যবহার করার গাইড এবং আরও অনেক কিছু সহ MDN এ অবদান রাখার সকল ক্ষেত্র সম্পর্কে এই গাইড এ লেখা আছে।

+ +
+
+

অবদানকারীদের জন্য গাইড

+ +
+
 শুরু করা
+
মজিলাতে আপনার প্রথম অবদান রাখতে ও সেট আপ হতে সাহায্যকারী একটি কুইক স্টার্ট গাইড এটি।
+
কনটেন্ট এবং স্টাইল গাইড
+
     MDN এর কনটেন্ট এবং স্টাইল গাইড লেখার স্টাইল, পেইজ লে-আউট এবং কনটেন্ট এর স্টাইল সম্পর্কে বিশদ তথ্য দেয়, যাতে করে আপনি যেই কনটেন্টটি লিখবেন তা MDN এর অন্যান্য কনটেন্ট এর সাথে খাপ খেয়ে যায়।
+
 
+
 এডিটর গাইড
+
MDN এর এডিটর ব্যবহার করার জন্য একটি পূর্ণাঙ্গ গাইড।   
+
Terminology and conventions
+
Our terminology and conventions guide provides information you can use to ensure that you use the correct terminology to describe things.
+
Working with the MDN community
+
A guide to working with our community, finding help, and connecting with the people with the answers to the questions that arise while you contribute to MDN.
+
Frequently asked questions
+
Tips and answers to the most common questions about contributing to MDN.
+
+ +
+
Contributing to Kuma
+
A guide to contributing to the Kuma project. Kuma is the platform that powers the MDN Web site.
+
+
+ +
+

How to...

+ +

Our how-to guides provide step-by-step instructions to help you accomplish specific tasks when contributing to MDN.

+ +
+
How to document a CSS property
+
A guide to writing documentation of CSS properties. All CSS property documents should match the style and layout described in this article.
+
How to document an HTML element
+
This guide to documenting HTML elements will ensure that the documents you write match others on MDN.
+
How to properly tag pages
+
This guide to tagging pages provides information about our standards for tagging, including lists of tags that have standard meanings on MDN. Following this guide will ensure that your content is properly categorized, more easily searchable, and that our search filtering mechanism works properly with your articles.
+
How to interpret specifications
+
This guide will help you to properly interpret standard Web specifications; being able to read these can be an art form, and knowing how to do it will help you produce better documentation.
+
+ +

Localization

+ +
+
Localization guided tour
+
This guided tour will teach you how to localize content on MDN.
+
Localization guide
+
This guide provides details about the localization process for MDN content.
+
Localization projects
+
Find the localization project for your language—or, if there isn't one, learn how to start a new one!
+
+
+
+ +

 

diff --git a/files/bn/mdn/contribute/localize/index.html b/files/bn/mdn/contribute/localize/index.html new file mode 100644 index 0000000000..ed2a2577cd --- /dev/null +++ b/files/bn/mdn/contribute/localize/index.html @@ -0,0 +1,29 @@ +--- +title: Localizing MDN +slug: MDN/Contribute/Localize +tags: + - Documentation + - Localization + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Localize +--- +
{{MDNSidebar}}

MDN is used by people all over the world as a reference and guide to Web technologies, as well as to the internals of Firefox itself. Our localization communities are a key part of the Mozilla project; their work in translating and localizing our documentation helps people around the world develop for the open Web. If you'd like to learn more about our localization teams, join one of the teams, or even start a new localization, this is the place to begin.

+

{{LandingPageListSubpages}}

+

Localization tools

+

There are several useful tools that you'll use during localization work:

+
+
+ Verbatim
+
+ Used for translation of strings across multiple Mozilla projects, including the MDN user interface (as well as the Firefox user interface).
+
+ Transvision
+
+ A utility provided by Mozilla France, which lets you search for occurrences of an English string, finding all the various translations into a target locale that are used throughout Mozilla code. Useful for finding the preferred translations for words or phrases.
+
+

See also

+ diff --git "a/files/bn/mdn/contribute/localize/\340\246\252\340\247\207\340\246\207\340\246\234_\340\246\205\340\246\250\340\247\201\340\246\254\340\246\276\340\246\246/index.html" "b/files/bn/mdn/contribute/localize/\340\246\252\340\247\207\340\246\207\340\246\234_\340\246\205\340\246\250\340\247\201\340\246\254\340\246\276\340\246\246/index.html" new file mode 100644 index 0000000000..8e357fb0bc --- /dev/null +++ "b/files/bn/mdn/contribute/localize/\340\246\252\340\247\207\340\246\207\340\246\234_\340\246\205\340\246\250\340\247\201\340\246\254\340\246\276\340\246\246/index.html" @@ -0,0 +1,52 @@ +--- +title: MDN এর পাতার অনুবাদ +slug: MDN/Contribute/Localize/পেইজ_অনুবাদ +tags: + - Localization + - MDN + - NeedsContent + - বাংলা + - বাংলাদেশ +translation_of: MDN/Contribute/Localize/Translating_pages +--- +
{{MDNSidebar}}

MDN-এ কিভাবে অনুবাদ করতে হয় এবং বিভিন্ন বিষয় ভালো ভাবে উপস্থাপন পদ্ধতি উভয় সম্পর্কেই এই নিবন্ধনটি  প্রথমিক ধারণা প্রদান করবে  ।

+ +

একটি নতুন পাতার অনুবাদ শুরু করা 

+ +

যখন আপনি একটি ওয়েব পেজের সাথে পরিচিত হন,  আপনি সেটিকে নিজের ভাষায় অনুবাদ করার জন্য নিচের ধাপগুলো অনুসরণ করুনঃ 

+ +
    +
  1. ভাষার মেনুটি খোলার জন্য উপরে ডান দিকে ভাষার আইকনটিতে ({{FontAwesomeIcon("icon-language")}}) চাপ দিন (ক্লিক করুন) এবং এরপর, Add a Translation এ ক্লিক করুন। বাছাই করা ভাষার ওয়েব পেজটি তখন লোড হবে। 
    2. +
  2. যে ভাষাতে অনুবাদ করতে চান সে ভাষাতে ক্লিক করুন। অনুবাদযোগ্য ভাষা বাম পাশে মূল ভাষা তে প্রদর্শিত হবে ।
    3. +
  3. অনুবাদ বর্ননার অধীনে, আপনি ভুমিকা এবং ঐচ্ছিকভাবে স্লাগ কে আপনার কাংখিত ভাষাতে অনুবাদ করতে পারেন। স্ল্যাগ হচ্ছে একটা পাতার URL এর সর্বশেষ অংশ (উদাহরন স্বরুপঃ এই লেখার "Translating Pages" )। কিছু ভাষা সম্প্রদায় স্ল্যাগ কে অনুবাদ  না করে স্ল্যাগ কে ইংরেজ়ীতে রেখে দেয়। সাধারন অনুশীলনকে স্থির করার জন্য অনান্য লেখার সাথে  আপনার ভাষায় তূলনা করুন।আপনার কাজ শেষ হয়ে গেল Translate Content এ আরও room তৈরীর জন্য Translate Description এর পরবর্তীতে অবস্থিত বিয়োগ চিহ্নে ক্লিক করুন।
    4. +
  4. Translate Content এর অধীনে পাতার মূল অংশ অনুবাদ করুন।
    5. +
  5.  কমপক্ষে পাতার একটি ট্যাগ পুরন করুন।
    6. +
  6. আপনার কাজ শেষ হয়ে গেলে  পরিবর্তন সংরক্ষণ করুন এ ক্লিক করুন।
    7. +
+ +
নোট: অনুবাদকৃত লেখার ইউজার ইন্টেরফেস উপাদানসমুহ শুরুতে ইংরেজীতে প্রদর্শিত হয়।পরবর্তী পরিদর্শনে একটা নির্দিষ্ট লেখা কে অনুবাদ করার জন্য UI যথার্থ  ভাষা তে প্রদর্শিত হয় যদি  ঐ ভাষা MDN এর লোকালাইজেশনে পাওয়া যায়। Verbatim এর সাহায্যে  MDN  ইউজার ইন্টেরফেস লোকালাইজ করা যায়।কিভাবে এই টুল ব্যবহার করবেন তার  বিস্তারিত  Localizing with Verbatim এ দেখুন।
+ +

অনুবাদকৃত পাতার সম্পাদনা

+ + + +

যদি অনুবাদের পর অনুবাদকৃত নিবন্ধনটির ইংরেজী সংস্করণে পরিবর্তন হয়, ঐ ক্ষেত্রে ইংরেজী সংস্করণে যে অংশটুকু পরিবর্তন হয়েছে সেখানে Translating Article view সোর্স লেভেলে দেখাবে "diff" । এতে করে নিবন্ধনটির কোন অংশে নতুন অনুবাদ দরকার সেটি সহজেই বোঝা যায় ।

+ +

ট্যাগ অনুবাদ

+ +

একটি পাতায় অন্তত একটি ট্যগ থাকা উচিত । হোক না সেটি অনুবাদ ।

+ +

কিছু ট্যাগ অনুসন্ধান ফলাফল ফিল্টার বা কমানোর জন্য ব্যবহার করা হয় । অথবা যারা বিষয়টি নিয়ে কাজ করছেন তাদের যোগাযোগ, মতামত বা কথোপকথন এর মাধ্যম হিসাবে ব্যবহার এর জন্য । এসব অনুবাদ না করাটাই উচিত হবে । এসব ট্যাগ সম্পর্কে জানতে পড়ুন tagging standards. দলীয় বিষয় গুলোতে আপনি অনুবাদকৃত ট্যাগ যোগ করতে পারেন যদি সেটি standards tags এর মধ্যে না থাকে  ।

+ +

নতুন অনুবাদকদের জন্য পরামর্শ

+ +

যদি আপনি MDN এর অনুবাদে নতুন হন, এখানে কিছু পরামর্শ দেওয়া হলঃ

+ + diff --git a/files/bn/mdn/guidelines/index.html b/files/bn/mdn/guidelines/index.html new file mode 100644 index 0000000000..11412724a1 --- /dev/null +++ b/files/bn/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/bn/mdn/guidelines/style_guide/index.html b/files/bn/mdn/guidelines/style_guide/index.html new file mode 100644 index 0000000000..64597c50fa --- /dev/null +++ b/files/bn/mdn/guidelines/style_guide/index.html @@ -0,0 +1,554 @@ +--- +title: MDN style guide +slug: MDN/Guidelines/Style_guide +tags: + - JavaScript + - MDN + - Project +translation_of: MDN/Guidelines/Writing_style_guide +--- +
{{MDNSidebar}}
+ +

In an effort to display documentation in an organized, standardized and easy-to-read manner, the Mozilla Developer Network style guide describes how text should be organized, spelled, formatted, and so on. These are guidelines rather than strict rules. We are more interested in content than formatting, so don't feel obligated to learn the style guide before contributing. Do not be upset or surprised, however, if an industrious volunteer later edits your work to conform to this guide.

+ +

If you're looking for specifics of how a given type of page should be structured, see the MDN page layout guide.

+ +

The language aspects of this guide apply primarily to English-language documentation. Other languages may have (and are welcome to create) their own style guides. These should be published as subpages of the localization team's page.

+ +

For style standards that apply to content written for sites other than MDN, refer to the One Mozilla style guide.

+ +

Basics

+ +

Page titles

+ +

Page titles are used in search results and also used to structure the page hierarchy in the breadcrumb list at the top of the page. The page title (which is displayed at the top of the page and in the search results) can be different from the page "slug," which is the portion of the page's URL following "<locale>/docs/".

+ +

Title and heading capitalization

+ +

Page titles and section headings should use sentence-style capitalization (only capitalize the first word and proper nouns) rather than headline-style capitalization:

+ + + +

We have many older pages that were written before this style rule was established. Feel free to update them as needed if you like. We're gradually getting to them.

+ +

Choosing titles and slugs

+ +

Page slugs should be kept short; when creating a new level of hierarchy, the new level's component in the slug should generally just be a word or two.

+ +

Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.

+ +

Creating new subtrees

+ +

When you need to add a number of articles about a topic or topic area, you will typically do so by creating a landing page, then adding subpages for each of the individual articles. The landing page should open with a paragraph or two describing the topic or technology, then provide a list of the subpages with descriptions of each page. You can automate the insertion of pages into the list using a number of macros we've created.

+ +

For example, consider the JavaScript guide, which is structured like this:

+ + + +

Try to avoid putting your article at the top of the hierarchy, which slows the site down and makes search and site navigation less effective.

+ +

Sections, paragraphs, and newlines

+ +

Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels. H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers you should consider breaking up the article into several smaller articles with a landing page, linking them together using the {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}} macros.

+ +

The enter (or return) key on your keyboard starts a new paragraph. To insert a newline without a space, hold down the shift key while pressing enter.

+ +

Text formatting and styles

+ +

Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.

+ +
Note: The "Note" style is used to call out important notes, like this one.
+ +
Warning: Similarly, the "Warning" style creates warning boxes like this.
+ +

Unless specifically instructed to do so, do not use the HTML style attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.

+ +

Code sample style and formatting

+ +

Tabs and line breaks

+ +

Use two spaces per tab in all code samples. Code should be indented cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:

+ +
if (condition) {
+  /* handle the condition */
+} else {
+  /* handle the "else" case */
+}
+
+ +

Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:

+ +
if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION
+       || class.YET_ANOTHER_CONDITION ) {
+  /* something */
+}
+
+var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"]
+                           .createInstance(Components.interfaces.nsIToolkitProfileService);
+
+ +

Inline code formatting

+ +

Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the frenchText() function".

+ +

Method names should be followed by a pair of parentheses: doSomethingUseful(). This helps to differentiate methods from other code terms.

+ +

Syntax highlighting

+ +

Screenshot of the "syntax highlighting" menu.Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Click the "pre" button in the toolbar to create the preformatted content box in which you'll then write your code. Then, with the text entry cursor inside the code box, select the appropriate language from the language list button to the right of the "pre" button, as seen in the screenshot to the right. The following example shows text with JavaScript formatting:

+ +
+
for (var i = 0, j = 9; i <= 9; i++, j--)
+  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
+
+ +

If no appropriate transformation is available, use the pre tag without specifying a language ("No Highlight" in the language menu).

+ +
x = 42;
+ +

Styling HTML element references

+ +

There are various specific rules to follow when writing about HTML elements, in order to consistently describe the various components of elements, and to ensure that they're properly linked to detailed documentation.

+ +
+
Element names
+
Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, enclose the name in angle brackets and use "Code (inline)" style (e.g., <title>).
+
Attribute names
+
Use bold face.
+
Attribute definitions
+
Use the {{TemplateLink("htmlattrdef")}} macro (e.g., \{{htmlattrdef("type")}}) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., \{{htmlattrxref("attr","element")}}) to reference attribute definitions.
+
Attribute values
+
Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. E.g.: When the type attribute of an <input> element is set to email or tel ...
+
Labeling attributes
+
Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.
+
+ +

Latin abbreviations

+ +

In notes and parentheses

+ + + +

In running text

+ + + +

Meanings and English equivalents of Latin abbreviations

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AbbrevLatinEnglish
cf.confercompare
e.g.exempli gratiafor example
et al.et aliiand others
etc.et ceteraand so forth, and so on
i.e.id estthat is, in other words
N.B.nota benenote well
P.S.post scriptumpostscript
+ +
+

Note: Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that you use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.

+
+ +

Acronyms and abbreviations

+ +

Capitalization and periods

+ +

Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".

+ + + +

Expansion

+ +

On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or glossary entry describing the technology.

+ + + +

Plurals of acronyms and abbreviations

+ +

For plurals of acronyms or abbreviations, add s. Don't use an apostrophe. Ever. Please.

+ + + +

Capitalization

+ +

Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".

+ +

Contractions

+ +

Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!

+ +

Pluralization

+ +

Use English-style plurals, not the Latin- or Greek-influenced forms.

+ + + +

Hyphenation

+ +

Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.

+ + + +

Gender-neutral language

+ +

It is a good idea to use gender-neutral language in any kind of writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So for example, if you are talking about the actions of a specific man, usage of he/his would be fine, but if the subject is a person of either gender, he/his isn't really appropriate.
+
+ Let's take the following example:

+ +
+

A confirmation dialog appears, asking the user if he allows the web page to make use of his web cam.

+
+ +
+

A confirmation dialog appears, asking the user if she allows the web page to make use of her web cam.

+
+ +

Both versions in this case are gender-specific. This could be fixed by using gender-neutral pronouns:

+ +
+

A confirmation dialog appears, asking the user if they allow the web page to make use of their web cam.

+
+ +
+

Note: MDN allows the use of this very common but not technically correct syntax, in order to make up for the lack of a neutral gender in English. The use of the third-person plural as a neutral gender pronoun (that is, using "they," them", "their," and "theirs") is accepted practice, commonly known as "singular 'they.'"

+
+ +

You can use both genders:

+ +
+

A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.

+
+ +

making the users plural:

+ +
+

A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.

+
+ +

The best solution, of course, is to just rewriting to eliminate the pronouns completely:

+ +
+

A confirmation dialog appears, requesting the user's permission for web cam access.

+
+ +
+

A confirmation dialog box appears, which asks the user for permission to use the web cam.

+
+ +

The last way of dealing with the problem is arguably better, as it is not only grammatically more correct but removes some of the complexity associated with dealing with genders across different languages that may have wildly varying gender rules. This can make translation easier, both for readers reading English, then translating it into their own language as they read, and for localizers translating articles into their own language.

+ +

Numbers and numerals

+ +

Dates

+ +

For dates (not including dates in code samples) use the format "January 1, 1990".

+ + + +

Alternately, you can use the YYYY/MM/DD format.

+ + + +

Decades

+ +

For decades, use the format "1990s". Don't use an apostrophe.

+ + + +

Plurals of numerals

+ +

For plurals of numerals add "s". Don't use an apostrophe.

+ + + +

Commas

+ +

In running text, use commas only in five-digit and larger numbers.

+ + + +

Punctuation

+ +

Serial comma

+ +

Use the serial comma. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.

+ + + +
+

Note: This is in contrast to the One Mozilla style guide, which specifies that the serial comma is not to be used. MDN is an exception to this rule.

+
+ +

Spelling

+ +

For words with variant spellings, always use the first entry at Answers.com. Do not use variant spellings.

+ + + +

Terminology

+ +

Obsolete vs. deprecated

+ +

It's important to be clear on the difference between the terms obsolete and deprecated.

+ +
+
Obsolete:
+
On MDN, the term obsolete marks an API or technology that is not only no longer recommended, but also no longer implemented in the browser. For Mozilla-specific technologies, the API is no longer implemented in Mozilla code; for Web standard technology, the API or feature is no longer supported by current, commonly-used browsers.
+
Deprecated:
+
On MDN, the term deprecated marks an API or technology that is no longer recommended, but is still implemented and may still work. These technologies will in theory eventually become obsolete and be removed, so you should stop using them. For Mozilla-specific technologies, the API is still supported in Mozilla code; for Web standard technology, the API or feature has been removed or replaced in a recent version of the defining standard.
+
+ +

HTML elements

+ +

Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style. Also, at least the first time you reference a given element in a section should use the {{TemplateLink("HTMLElement")}} macro, to create a link to the documentation for the element (unless you're writing within that element's reference document page).

+ + + +

User interface actions

+ +

In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.

+ + + +

Voice

+ +

While the active voice is generally preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.

+ +

Wiki markup and usage

+ + + +

To automatically create a link to a Bugzilla bug, use this template:

+ +
\{{Bug(322603)}}
+
+ +

This results in:

+ +

{{Bug(322603)}}

+ +

For WebKit bugs, you can use this template:

+ +
\{{Webkitbug("322603")}}
+
+ +

This results in:

+ +

{{Webkitbug("322603")}}

+ +

Page tags

+ +

Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our How to properly tag pages guide.

+ +

The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:

+ +

Screenshot of the UX for adding and removing tags on MDN

+ +

To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.

+ +

To remove a tag, simply click the little "X" icon in the tag.

+ +

Tagging pages that need work

+ +

In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.

+ +

Tagging obsolete pages

+ +

Use the following tags for pages that are not current:

+ + + +

SEO summary

+ +

The SEO summary is a very short summary of the page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.

+ +

By default, the first pagragraph of the page is used as the SEO summary. However you can override this behavior by marking a section with the "SEO summary" style in the WYSIWYG editor.

+ +

Landing pages

+ +

Landing pages are pages at the root of a topic area of the site, such as the main CSS or HTML pages. They have a standard format that consists of three areas:

+ +
    +
  1. A brief (typically one paragraph) overview of what the technology is and what it's used for. See {{anch("Writing a landing page overview")}} for tips.
    2. +
  2. A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.
    3. +
  3. An optional "Browser compatibility" section at the bottom of the page.
    4. +
+ +

Creating a page link list

+ +

The link list section of an MDN landing page consists of two columns. These are created using the following HTML:

+ +
<div class="row topicpage-table">
+  <div class="section">
+    ... left column contents ...
+  </div>
+  <div class="section">
+    ... right column contents ...
+  </div>
+</div>
+ +

The left-hand column should be a list of articles, with an <h2> header at the top of the left column explaining that it's a list of articles about the topic (for example "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <dl> list of articles, with each article's link in a <dt> block and a brief one-or-two sentence summary of the article in the corresponding <dd> block.

+ +

The right-hand column should contain one or more of the following sections, in order:

+ +
+
Getting help from the community
+
This should provide information on Matrix chat rooms and mailing lists available about the topic. The heading should use the class "Community".
+
Tools
+
A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".
+
Related topics
+
A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".
+
+ +

<<<finish this once we finalize the landing page standards>>>

+ +

Using, inserting images

+ +

It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:

+ +
    +
  1. Attach the desired image file to the article (at the bottom of every article in edit mode)
    2. +
  2. Create an image in the WYSIWYG editor
    3. +
  3. In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image
    4. +
  4. Press OK.
    5. +
+ +

Other References

+ +

Preferred style guides

+ +

If you have questions about usage and style not covered here, we recommend referring to the Economist style guide or, failing that, the Chicago Manual of Style.

+ +

Preferred dictionary

+ +

For questions of spelling, please refer to Answers.com. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use honor rather than honour).

+ +

We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the MDC mailing list or project lead so we know what should be added.

+ +

MDN-specific

+ + + +

Language, grammar, spelling

+ +

If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.

+ + diff --git a/files/bn/mdn/index.html b/files/bn/mdn/index.html new file mode 100644 index 0000000000..27ba761d4b --- /dev/null +++ b/files/bn/mdn/index.html @@ -0,0 +1,38 @@ +--- +title: MDN প্রজেক্ট +slug: MDN +tags: + - Landing + - MDN Meta + - 'l10n:priority' +translation_of: MDN +--- +
{{MDNSidebar}}
+ +

MDN Web Docs is a wiki on which we document the open Web, Mozilla technologies, and other developer topics. Anyone is welcome to add and edit content. You don't need to be a programmer or know a lot about technology; there are many different tasks that need to be performed, from the simple (proof-reading and correcting typos) to the complex (writing API documentation).

+ +
+

The mission of MDN Web Docs is to provide developers with the information they need to easily build projects on the web platform. We invite you to help!

+
+ +

We need your help! It's easy. Don't worry about asking for permission or about making mistakes. On the other hand, please get to know the MDN community; we're here to help you! The documentation below should get you started, but don't hesitate to join the discussion in the MDN Web Docs chat room.

+ + + +

See also

+ + diff --git a/files/bn/mdn/structures/index.html b/files/bn/mdn/structures/index.html new file mode 100644 index 0000000000..b8df701dac --- /dev/null +++ b/files/bn/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/bn/mdn/structures/macros/index.html b/files/bn/mdn/structures/macros/index.html new file mode 100644 index 0000000000..6240e47a6b --- /dev/null +++ b/files/bn/mdn/structures/macros/index.html @@ -0,0 +1,48 @@ +--- +title: Macros +slug: MDN/Structures/Macros +tags: + - Guide + - Kuma + - KumaScript + - MDN Meta + - NeedsTranslation + - Structures + - TopicStub +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 Commonly-used 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/bn/mdn_at_ten/index.html b/files/bn/mdn_at_ten/index.html new file mode 100644 index 0000000000..1006f031c3 --- /dev/null +++ b/files/bn/mdn_at_ten/index.html @@ -0,0 +1,36 @@ +--- +title: মজিলা ডেভেলপার নেটওয়ার্কের ১০ বছরে পদার্পণ । +slug: MDN_at_ten +translation_of: MDN_at_ten +--- +
আপনার ওয়েব ডকুমেন্টেশনের ১০ বছরপূর্তি উদযাপন করুন।
+ +
+
+

MDN এর ইতিহাস

+ +

২০০৫ এর শুরুর দিকে কিছু আদর্শবাদী মানুষ সকল ওয়েব ডেভেলপারদের জন্য নতুন, উন্মুক্ত এবং কমিউনিটির দ্বারা তৈরি অনলাইন রিসোর্স তৈরির কাজ শুরু করেন। তাদের অসাধারন কিন্তু Their brilliant but offbeat idea grew into today’s Mozilla Developer Network—the premier resource for all open Web technologies. Ten years later, our global community is bigger than ever, and together we’re still creating documentation, sample code and learning resources for all open Web technologies, including CSS, HTML, JavaScript and everything else that makes the open Web as powerful as it is.

+ +

Learn more about the history

+ +

MDN এ অবদান রাখুন 

+ +

For ten years, the MDN community has been documenting the open Web. From fixing simple typos to writing entire suites of an entirely new API, everyone has something to offer and no contribution is too large or too small. We have over 90,000 pages of content that have been written or translated by members of our outstanding community of Mozillians. You can become one of them.

+ +

Learn more about contributing

+
+ +
+
+
যখন আমি  'কেমন করে' এর পরিবর্তে 'কেন' এটা জানতে চাই   তখন MDN হল উপযুক্ত স্থান 
+— Christian Heilmann
+
+
+ + + +
    +
  1. MDN at 10
    2. +
  2. The history of MDN
    3. +
  3. Contributing to MDN
    4. +
diff --git a/files/bn/mozilla/add-ons/amo/policy/index.html b/files/bn/mozilla/add-ons/amo/policy/index.html new file mode 100644 index 0000000000..5fffee1dc8 --- /dev/null +++ b/files/bn/mozilla/add-ons/amo/policy/index.html @@ -0,0 +1,21 @@ +--- +title: AMO Policies +slug: Mozilla/Add-ons/AMO/Policy +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/AMO/Policy +--- +

{{AddonSidebar}}

+ +

Mozilla is committed to ensuring a great add-ons experience for our users and developers. Please review the policies below before submitting your add-on.

+ +
+
Developer Agreement
+
Effective January 5, 2016
Review Process
+
Add-ons extend the core capabilities of Firefox, allowing users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own. For these reasons, Mozilla requires all add-ons to comply with the following set of policies on acceptable practices. The below is not intended to serve as legal advice, nor is it intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.
Featured Add-ons
+
How up-and-coming add-ons become featured and what's involved in the process.
Contacting us + +

How to get in touch with us regarding these policies or your add-on.

+ +
diff --git a/files/bn/mozilla/add-ons/code_snippets/index.html b/files/bn/mozilla/add-ons/code_snippets/index.html new file mode 100644 index 0000000000..f104d2257b --- /dev/null +++ b/files/bn/mozilla/add-ons/code_snippets/index.html @@ -0,0 +1,194 @@ +--- +title: Code snippets +slug: Mozilla/Add-ons/Code_snippets +tags: + - Add-ons + - Code snippets + - Extensions + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons/Code_snippets +--- +

এটা বিভিন্ন মোজিলা অ্যাপলিকেশনের এক্সটেনশন ডেভেলপারদের জন্য দরকারি কিছু কোড স্নিপেট (ছোট ছোট কোডের নমুনা) এর তালিকা। এরমদ্ধে অনেক গুলো নমুনা স্বয়ং মোজিলার কোডে তো ব্যবহার হয়-ই আবার XULRunner অ্যাপ্লিকেশনের মধ্যেও ব্যবহার করা যায়।

+

কিভাবে প্রাথমিক কাজগুলো করতে হয়, এই নমুনাগুলো সেটা বর্ণনা করে।

+

সাধারন বিষয়বস্তু

+
+
+ Examples and demos from MDN articles
+
+ A collection of examples and demos from articles.
+
+ Windows code
+
+ Opening and manipulating windows
+
+ Toolbar
+
+ Toolbar related code
+
+ Sidebar
+
+ Sidebar related code
+
+ Forms
+
+ Forms related code
+
+ XML
+
+ Code used to parse, write, manipulate, etc. XML
+
+ File I/O
+
+ Code used to read, write and process files
+
+ Drag & Drop
+
+ Code used to setup and handle drag and drop events
+
+ Dialogs
+
+ Code used to display and process dialog boxes
+
+ Alerts and Notifications
+
+ Modal and non-modal ways to notify users
+
+ Preferences
+
+ Code used to read, write, and modify preferences
+
+ JS XPCOM
+
+ Code used to define and call XPCOM components in JavaScript
+
+ Running applications
+
+ Code used to run other applications
+
+ <canvas> related
+
+ WHAT WG Canvas-related code
+
+ Signing a XPI
+
+ How to sign an XPI with PKI
+
+ Threads
+
+ Performing background operations and delaying execution while background operations complete
+
+ Miscellaneous
+
+ Miscellaneous useful code fragments
+
+ HTML to DOM
+
+ Using a hidden browser element to parse HTML to a window's DOM
+
+

জাভাস্ক্রিপ্ট লাইব্রেরি সমূহ

+

Here are some JavaScript libraries that may come in handy.

+
+
+ StringView
+
+ A library that implements a StringView view for JavaScript typed arrays. This lets you access data in typed arrays using C-like string functions.
+
+

ব্রাউজার-ওরিয়েন্টেড কোড

+
+
+ Tabbed browser code (Firefox/SeaMonkey)
+
+ Basic operations, such as page loading, with the tabbed browser, which is the heart of Mozilla's browser applications
+
+ Cookies
+
+ Reading, writing, modifying, and removing cookies
+
+ Page Loading
+
+ Code used to load pages, reload pages, and listen for page loads
+
+ Interaction between privileged and non-privileged code
+
+ How to communicate from extensions to websites and vice-versa.
+
+ Downloading Files
+
+ Code to download files, images, and to monitor download progress
+
+ Password Manager
+
+ Code used to read and write passwords to/from the integrated password manager
+
+ Bookmarks
+
+ Code used to read and write bookmarks
+
+ JavaScript Debugger Service
+
+ Code used to interact with the JavaScript Debugger Service
+
+

এসভিজি

+
+
+ General
+
+ General information and utilities
+
+ SVG Animation
+
+ Animate SVG using JavaScript and SMIL
+
+ SVG Interacting with Script
+
+ Using JavaScript and DOM events to create interactive SVG
+
+ Embedding SVG in HTML and XUL
+
+ Using SVG to enhance HTML or XUL based markup
+
+

XUL উইজেট সমূহ

+
+
+ HTML in XUL for Rich Tooltips
+
+ Dynamically embed HTML into a XUL element to attain markup in a tooltip
+
+ Label and description
+
+ Special uses and line breaking examples
+
+ Tree
+
+ Setup and manipulation of trees using XUL and JS
+
+ Scrollbar
+
+ Changing style of scrollbars. Applies to scrollbars in browser and iframe as well.
+
+ Autocomplete
+
+ Code used to enable form autocomplete in a browser
+
+ Boxes
+
+ Tips and tricks when using boxes as containers
+
+ Tabbox
+
+ Removing and manipulating tabs in a tabbox
+
+

উইন্ডোজ নির্দিষ্ট

+
+
+ Finding Window Handles (HWND) (Firefox)
+
+ How to use Windows API calls to find various kinds of Mozilla window handles. Window handles can be used for IPC and Accessibility purposes.
+
+ Using the Windows Registry with XPCOM
+
+ How to read, write, modify, delete, enumerate, and watch registry keys and values.
+
+ +

The content at MozillaZine Example Code is slowly being moved here, but you can still find useful examples there for now.

diff --git a/files/bn/mozilla/add-ons/code_snippets/toolbar/index.html b/files/bn/mozilla/add-ons/code_snippets/toolbar/index.html new file mode 100644 index 0000000000..ce7679b8ca --- /dev/null +++ b/files/bn/mozilla/add-ons/code_snippets/toolbar/index.html @@ -0,0 +1,59 @@ +--- +title: টুলবার +slug: Mozilla/Add-ons/Code_snippets/Toolbar +tags: + - NeedsReview +translation_of: Archive/Add-ons/Code_snippets/Toolbar +--- +

টুলবার বাটন সংযোজন

+

এখানে দুইটি টিউটোরিয়াল রয়েছে :

+

একটি টিউটোরিয়াল এর জন্য একটি বিশেষ পদক্ষেপ রয়েছে: কাষ্টম টুলবার বাটন একটি টিউটোরিয়াল বর্ণনা করার জন্য ইতোমধ্যে আপনার উন্নয়ন বুনিয়াদি একটি টুলবার বাটন যুক্ত করা প্রয়োজন: টুলবার বাটন তৈরি করা

+

বাটন যুক্ত করার পদ্ধতি :

+

আপনি যখন আপনার এক্সটেনশন স্থাপন এবং একটি টুলবার বাটন অভেরলেইং দ্বারা যুক্ত করা হয়, এটি ডিফল্ট অবস্থায় পাওয়া যায় না । ব্যবহারকারীকে বাটনটি টুলবারে টেনে আনতে হয়। নিম্নলিখিত কোড টুলবারে আপনার বাটন স্থাপন করবে। This should only be done on the first run of your add-on after installation so that if the user decides to remove your button, it doesn't show up again every time they start the application.

+

নোট

+ +
/**
+ * Installs the toolbar button with the given ID into the given
+ * toolbar, if it is not already present in the document.
+ *
+ * @param {string} toolbarId The ID of the toolbar to install to.
+ * @param {string} id The ID of the button to install.
+ * @param {string} afterId The ID of the element to insert after. @optional
+ */
+function installButton(toolbarId, id, afterId) {
+    if (!document.getElementById(id)) {
+        var toolbar = document.getElementById(toolbarId);
+
+        // If no afterId is given, then append the item to the toolbar
+        var before = null;
+        if (afterId) {
+            let elem = document.getElementById(afterId);
+            if (elem && elem.parentNode == toolbar)
+                before = elem.nextElementSibling;
+        }
+
+        toolbar.insertItem(id, before);
+        toolbar.setAttribute("currentset", toolbar.currentSet);
+        document.persist(toolbar.id, "currentset");
+
+        if (toolbarId == "addon-bar")
+            toolbar.collapsed = false;
+    }
+}
+
+if (firstRun) {
+    installButton("nav-bar", "my-extension-navbar-button");
+    // The "addon-bar" is available since Firefox 4
+    installButton("addon-bar", "my-extension-addon-bar-button");
+}
+
+

আরো দেখুন

+ diff --git a/files/bn/mozilla/add-ons/index.html b/files/bn/mozilla/add-ons/index.html new file mode 100644 index 0000000000..1d0f1b6661 --- /dev/null +++ b/files/bn/mozilla/add-ons/index.html @@ -0,0 +1,95 @@ +--- +title: অ্যাড-অনস +slug: Mozilla/Add-ons +tags: + - Add-ons + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons +--- +
মোজিলা অ্যাপ্লিকেশান গুলোর পরিবর্তন এবং পরিবর্ধন 
+ +

অ্যাড-অন, গেকো ভিত্তিক অ্যাপ্লিকেশান যেমন: ফায়ারফক্স, সীমাঙ্কী এবং থান্ডারবার্ড এ নতুন কার্যকারিতা যোগ করে। মূলত দুই ধরণের অ্যাড-অন আছে: এক্সটেনশন, অ্যাপ্লিকেশানে নতুন ধরণের ফিচার যুক্ত করে, আর থিম অ্যাপ্লিকেশানের ইউজার ইন্টারফেস পরিবর্তন করে। 

+ +

এক্সটেনশন এবং থিম উভয়ের জন্যই মোজিলা addons.mozilla.org তে একটি রিপোজিটরি পরিচালনা করে যা এএমও  নামে পরিচিত। আপনি যখন এএমও তে অ্যাড-অন জমা দেন , তখন সেগুলোকে পর্যালোচনা করা হয় তারপর সেগুলো পর্যালোচনাতে উত্তীর্ণ হলে ব্যাবহারকারির কাছে পৌঁছে।আপনাকে এএমও তে অ্যাড-অন জমা দিতে হবেনা, কিন্তু আপনি যদি দেন, তাহলে ব্যাবহারকারিরা আত্মবিশ্বাসী হতে পারেন যে, সেগুলো রিভিও (পর্যালোচনা) করা হয়েছে । এবং আপনি দরকারি অ্যাড-অন এর উৎস হিসেবে এএমও এর দৃশ্যমানতা এর সুবিধা নিতে পারেন। 

+ +

যেসকল অ্যাপ্লিকেশান অ্যাড-অন কে হোস্ট করে অ্যাড-অন তাদের আচরণকে প্রবলভাবে প্রভাবিত করতে পারে। আমরা এক ঝাঁক দিকনির্দেশনা তৈরি করেছি যাতে ব্যাবরহারকারিদের ভাল অভিজ্ঞতা দিতে পারি । সকল ধরণের অ্যাড-অনের জন্যই এই দিকনির্দেশনা প্রযোজ্য, তা addons.mozilla.org  তে হোস্ট করা হোক বা অন্য কোথাও হোস্ট করা হোক।

+ +
+

এক্সটেনশন 

+ +

এক্সটেনশন ফায়ারফক্স এবং থান্ডার-বার্ড এর মত মোজিলা অ্যাপ্লিকেশান গুলোতে নতুন কার্যকারিতা যোগ করে। এরা ব্রাউজারে নতুন ফিচার যুক্ত করতে পারে, যেমন: বিভিন্ন উপায়ে ট্যাবগুলোকে পরিচালনা করা। এবং তারা বিশেষ বিশেষ ওয়েবসাইটের ব্যাবহারযোগ্যতা অথবা নিরাপত্তা বাড়াতে ওয়েব কনটেন্টের পরিবর্তন করতে সক্ষম। 

+ +

এক্সটেনশন তৈরি করতে আপনি তিনটি ভিন্ন ভিন্ন কৌশল ব্যাবহার করতে পারেন: অ্যাড-অন এসডিকে ভিত্তিক এক্সটেনশন, ম্যানুয়ালী বুটস্ত্র্যাপড রিস্টার্ট বিহীন এক্সটেনশন এবং ওভারলে এক্সটেনশন।  

+ + + +

আপনি যদি পারেন তবে, অ্যাড-অন এসডিকে  ব্যাবহার করা সমীচীন হবে, যা রি স্টার্ট বিহীন মেকানিজম ব্যাবহার করে কিন্তু নির্দিষ্ট কিছু কাজকে সহজ করে এবং তারপর নিজেকে পরিষ্কার করে। যদি অ্যাড-অন এসডিকে আপনার প্রয়োজনের তুলনায় পর্যাপ্ত না হয় তবে, এর পরিবর্তে ম্যানুয়াল রি স্টার্ট বিহীন এক্সটেনশন ইমপ্লিমেন্ট করতে পারেন। বর্তমানে অধিকাংশ ক্ষেত্রে ওভারলে এক্সটেনশন অপ্রচলিত , যদিও এখনো এগুলোর প্রাচুর্য রয়েছে। 

+ +

কোন কৌশল অবলম্বন করবেন এ সম্পর্কে আরও জানতে পড়ুন তাদের তুলনা। 

+ +
+
+

ভাল চর্চা 

+ +
+
আপনি যেভাবেই এক্সটেনশন ডেভেলপ করুন না কেন, আপনাকে কিছু দিক নির্দেশ মেনে চলতে হবে, যাতে ব্যাবহারকারিরা একটা ভাল অভিজ্ঞতা পান। 
+
পারফরমেন্স 
+
নিশ্চিত করা যে আপনার এক্সটেনশন দ্রুত, প্রতিক্রিয়াশীল এবং মেমরি এফিসিয়েন্ট। 
+
নিরাপত্তা 
+
নিশ্চিত করা যে আপনার এক্সটেনশন ইউজারকে ক্ষতিকারক ওয়েবসাইটে  প্রবেশ করাবে না। 
+
ভদ্রতা 
+
নিশ্চিত করা যে আপনার এক্সটেনশন অপর এক্সটেনশনের সাথে ভালো ভাবে কাজ করতে পারে কিনা। 
+
+
+ +
+

নির্দিষ্ট-অ্যাপ্লিকেশান

+ +

অধিকাংশ ডকুমেন্টেশান ধরে নেয় যে আপনি ফায়ারফক্স ডেক্সটপের জন্য অ্যাড-অন ডেভেলপ করছেন। আপনি যদি গেকো ভিত্তিক অন্য অ্যাপ্লিকেশান এর জন্য ডেভেলপ করতে চান, তাহলে আপনাকে তাদের মধ্যে মুখ্য পার্থক্য গুলো জানতে হবে। 

+ +
+
থান্ডারবার্ড 
+
থান্ডার বার্ড মেইল ক্লায়েন্ট এর জন্য এক্সটেনশন ডেভেলপ করা।  
+
ফায়ারফক্স এন্ড্রয়েড
+
ফায়ারফক্স এন্ড্রয়েডের জন্য এক্সটেনশন ডেভেলপ করা। 
+
সীমাঙ্কী
+
সীমাঙ্কী সফটওয়্যার সুইটের জন্য এক্সটেনশন ডেভেলপ করা। 
+
+
+
+ +
+

থিম 

+ +

থিম হল অ্যাড-অন যারা অ্যাপ্লিকেশানের ইউজার ইন্টারফেস পরিবর্তন করে। দুই ধরণের থিম আছে: লাইটওয়েট এবং সম্পূর্ণ থিম। 

+ +
+
+

লাইটওয়েট থিম গুলো সম্পূর্ণ থিমের চেয়ে সহজে ইমপ্লিমেন্ট করা যায়, কিন্তু খুব সীমিত পরিবর্তন প্রদান করে।    

+
+ +
+

সম্পূর্ণ থিম দ্বারা অ্যাপ্লিকেশান ইউআই তে গভীর পরিবর্তন আনা যায়। সম্পূর্ণ থিমের ডকুমেন্টেশান গুলো অনেক পুরনো, কিন্তু সম্ভাব্য আপডেটের জন্য এখানে লিঙ্ক দেয়া হবে।  

+
+
+ +
+

অন্যান্য ধরণের অ্যাড-অন

+ +

সার্চইঞ্জিন প্লাগইন হল সরল এবং খুব নির্দিষ্ট ধরণের অ্যাড-অন: তারা ব্রাউজারের সার্চবারে নতুন সার্চইঞ্জিন যুক্ত করে । 

+ +

যেসকল কন্টেন্টকে অ্যাপ্লিকেশান স্বাভাবিক ভাবে সাপোর্ট করেনা তাদের বোঝার জন্য প্লাগইনের সাহায্য দরকার হয়। আমরা এসকল প্লাগ ইনের গভীরতা বাড়াতে কাজ করছি, কেননা এদের স্থায়িত্ব, পারফরমেন্স এবং নিরাপত্তার সমস্যাপূর্ণ ইতিহাস রয়েছে।

+ +

{{AddonSidebar}}

+ + + + diff --git a/files/bn/mozilla/add-ons/performance_best_practices_in_extensions/index.html b/files/bn/mozilla/add-ons/performance_best_practices_in_extensions/index.html new file mode 100644 index 0000000000..f9cd7b926e --- /dev/null +++ b/files/bn/mozilla/add-ons/performance_best_practices_in_extensions/index.html @@ -0,0 +1,91 @@ +--- +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 +--- +

 ফায়ারফক্সের একটি সব চেয়ে বড় সুবিধা হল 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.

+

This has an advantage over XPCOM modules, which are always loaded when your extension starts up.

+

Of course, for extremely simple extensions it may not make sense to modularize your code.

+

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.

+

Use JavaScript Modules

+

JavaScript modules are just like any other JavaScript, with the exception that they are singletons and Firefox can cache the compiled code for faster use the next time the browser is started. Any time your add-on loads JavaScript from an {{ HTMLElement("script") }} element you should consider using a JavaScript Module instead. For more on how JavaScript modules work, see the Using JavaScript Code Modules page.

+

Avoid Writing Slow CSS

+ +

Avoid DOM mutation event listeners

+

Adding DOM mutation listeners to a document disables most DOM modification optimizations and profoundly degrades the performance of further DOM modifications to that document. Moreover, removing the listeners does not reverse the damage. For these reasons, the following events should be avoided wherever possible: DOMAttrModified, DOMAttributeNameChanged, DOMCharacterDataModified, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified

+

For more on these events and their deprecation, see Mutation events. Use Mutation Observers instead if possible.

+

Lazily load services

+

The XPCOMUtils JavaScript module provides two methods for lazily loading things:

+ +

As of Firefox 4.0, many common services are already cached for you in Services.jsm.

+

Reduce file I/O

+

TODO: Give examples below, link to code, bugs, docs.

+ +

Use the right compression level for JAR and XPI files

+

Reading data from compressed archives costs time. The higher the compression level of the archive, the higher also the performance cost of reading the data from it. So any JAR files in your extension should always be packed with compression level 0 (no compression) for better performance. It may seem counter-intuitive, but doing this will increase the JAR file size and actually decrease the XPI file size as it allows for compression between files inside the JAR to be done when compressing the XPI (essentially a poor-man's solid archive effect).

+

If your extension doesn't specify em:unpack then its XPI file will not be unpacked in Firefox 4 and used directly instead. This makes choosing a low compression level preferable; we recommend using compression level 1. It will increase the download size only a small amount, even compared to maximum compression.

+

Use asynchronous I/O

+

This cannot be stressed enough: never do synchronous I/O on the GUI thread.

+ +

Unnecessary onreadystatechange in XHR

+

addEventListener(load/error) and/or xhr.onload/.onerror are usually sufficient for most uses and will only be called once, contrary to onreadystatechange. When using XHR in websites people tend to use onreadystatechange (for compatiblity reasons). Often it is enough to just load the resource or handle errors. load/error event listener are far less often called than onreadystatechange, i.e. only once, and you don't need to check readyState or figure out if it is an error or not. Only use onreadystatechange if you want to process the response while it is still arriving.

+

Removing Event Listeners

+

Remove event listener if they are not needed any more. It is better to actually remove event listener instead of just having some flag to check if the listener is active which is checked every time when an event is propagated. Abandon schemes like: function onMouseOver(evt) { if (is_active) { /* doSomeThing */ } } Also, remove "fire-once" listeners again:

+
 function init() {
+   var largeArray;
+   addEventListener('load', function onLoad() {
+        removeEventListener('load', onLoad, true);
+        largeArray.forEach();
+ }, true);
+
+

Else a lot of closure stuff might be still referenced (largeArray in this example). And the listener will sit idle in some internal table.

+

Populate menus as needed

+

Populate "context" menus (page, tabs, tools) as needed and keep computation to a minimum (UI responsiveness). There is no need to populate the context menu every time something changes. It is enough to populate it once the user actually needs it. Add a listener to the "popupshowing" event and compute there.

+

Avoid mouse movement events

+

Avoid mouse movement events (enter/over/exit) or at least keep computation to a minimum. Mouse movement events, especially the mouseover event, usually happen at high frequency. Best would be to only store the new information and compute "stuff" once the user actually requests it (e.g. in a popupshowing event). Also don't forget to remove the event listeners when no longer needed (see above).

+

Avoid polling

+

Use {{ interface("nsIObserverService") }} functionality instead. Everybody is free to post "custom" notifications via {{ interface("nsIObserverService") }}, but few extensions actually use this. However, a lot of other services also provide observer functionality, such as nsIPrefBranch2.

+

aPNG/aGIF inappropriate in a lot of cases

+

Animations require a lot of time to set up, as a lot of images are decoded (the frames). Animated images may have their cached representations evicted quite often, causing the frames of your animated images to be reloaded lots of times, not just once. {{ interface("nsITree") }} / {{ XULElem("tree") }} seems to be extra special in this regard, as it doesn't seem to cache animations at all under certain circumstances.

+

base64/md5/sha1 implementations

+

Do not ship your own base64/md5/sha1 implementations. Regarding base64 there are the built-in atob/btoa functions that do the job just well and are available in overlay script as well as in in JavaScript modules and components. Hashes can be computed using {{ interface("nsICryptoHash") }}, which accepts either a string or an {{ interface("nsIInputStream") }}.

+

Image sprites

+

You may combine multiple images into one (sprites). See {{ cssxref("-moz-image-region") }}. Most XUL widgets that are used to display some image (incl. {{ XULElem("button") }} and {{ XULElem("toolbarbutton") }}) allow to use {{ cssxref("list-style-image") }}. Avoid the imagesrc/src attributes to define images where possible.

+

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/bn/mozilla/add-ons/sdk/index.html b/files/bn/mozilla/add-ons/sdk/index.html new file mode 100644 index 0000000000..c5dcaf17b9 --- /dev/null +++ b/files/bn/mozilla/add-ons/sdk/index.html @@ -0,0 +1,102 @@ +--- +title: এডঅন(Add-on) সফটওয়্যার সম্পাদনা বক্স (SDK) +slug: Mozilla/Add-ons/SDK +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons/Add-on_SDK +--- +

এই এডঅন সফটওয়্যার সম্পাদনা বক্স (SDK) ব্যবহার করে আপনিও ফায়ারফক্সের জন্য এডঅন তৈরী করতে পারবেন, তবে আপনার জানা থাকতে হবেঃ জাভাস্ক্রিপ্ট, এইচটিএমএল, সিএসএস। এই সফটওয়্যার সম্পাদনা বক্স (SDK) এর সাথে আছে জাভাস্ক্রিপ্ট এপিআই (API) , যেটা আপনি এডঅন তৈরী, এডঅন টেস্টিং, এডঅন চালু করা ও এডঅন প্যাকেজ করার কাজে ব্যবহার করতে পারবেন।

+
+

পাঠদান

+
+
+
+
+ শুরু করুন
+
+ কিভাবে সফটওয়্যার সম্পাদনা বক্স (SDK)  ইন্সটল করবেন এবং সিএফএক্স  দিয়ে এডঅন সম্পাদনা, টেস্টিং ও প্যাকেজিং করবেন।
+
+ Interact with the browser
+
+ Open web pages, listen for pages loading, and list open pages.
+
+ Development techniques
+
+ Learn about common development techniques, such as unit testing, logging, creating reusable modules, localization, and mobile development.
+
+
+
+
+
+ Create user interface components
+
+ Create user interface components such as toolbar buttons, context menus, menu items, and dialogs.
+
+ Modify web pages
+
+ Modify pages matching a URL pattern or dynamically modify a particular tab.
+
+ Putting it together
+
+ Walkthrough of the Annotator example add-on.
+
+
+
+
+

Guides

+
+
+
+
+ Contributor's guide
+
+ Learn how to start contributing to the SDK, and about the most important idioms used in the SDK code, such as modules, classes and inheritance, private properties, and content processes.
+
+ SDK infrastructure
+
+ Aspects of the SDK's underlying technology: modules, the Program ID, and the rules defining Firefox compatibility.
+
+ Content scripts
+
+ A detailed guide to working with content scripts.
+
+
+
+
+
+ SDK idioms
+
+ The SDK's event framework and the distinction between add-on scripts and content scripts.
+
+ XUL migration
+
+ A guide to porting XUL add-ons to the SDK. This guide includes a comparison of the two toolsets and a working example of porting a XUL add-on.
+
+
+
+
+

Reference

+
+
+
+
+ High-Level APIs
+
+ Reference documentation for the high-level SDK APIs.
+
+ Tools reference
+
+ Reference documentation for the cfx tool used to develop, test, and package add-ons, the console global used for logging, and the package.json file.
+
+
+
+
+
+ Low-Level APIs
+
+ Reference documentation for the low-level SDK APIs.
+
+
+
+

 

diff --git a/files/bn/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html b/files/bn/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html new file mode 100644 index 0000000000..0a33490189 --- /dev/null +++ b/files/bn/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html @@ -0,0 +1,64 @@ +--- +title: Adding a Button to the Toolbar +slug: Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Adding_a_Button_to_the_Toolbar +--- +
+

এই  টিউটরিআল বুঝতে হলে আপনাকে প্রথমে এস ডি কে ইন্সটল করতে হবে এবং সি এফ এক্স এর প্রাথমিক  জিনিস গুলা শিখতে হবে ।

+

এই টিউটোরিয়াল  এক্সশন বাটন  এ পি আই ব্যাবহার করে, যে শুধু মাত্র ফায়ার ফক্স ২৯ বা এর পরের ভারশন গুলোতে কাজ করে ।

+

 

+
+

কোন বাটন টুলবারের সাথে  সংযুক্ত করতে হলে  এক্সন বাটন বা টগল বাটন মডিউলগুলো ব্যাবহার করুন ।

+

একটি নতুন ডিরেক্টরি তৈরি করুন, তার ভেতরে ডুকুন এবং সিএফএক্স ইনিট চালান ।

+

তার পর নিচের আইকন তিনটি "ডাটা" ডিরেক্টরিতে সেভ করুন ।

+ + + + + + + + + + + + + + + +
icon-16.png
icon-32.png
icon-64.png
+

Then open the file called "main.js" in the "lib" directory and add the following code to it:

+
var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://www.mozilla.org/");
+}
+

Now run the add-on with cfx run. The button is added to the toolbar at the top of the browser window:

+

You can't set the initial location for the button, but the user can move it using the browser's customization feature. The id attribute is mandatory, and is used to remember the position of the button, so you should not change it in subsequent versions of the add-on.

+

Clicking the button loads https://www.mozilla.org/ into a new tab.

+

Specifying the icon

+

The icon property may specify a single icon or a collection of icons in different sizes, as in the example above. If you specify a collection of icons in different sizes the browser will automatically choose the best fit for the screen resolution and the place in the browser UI that hosts the button. Read more about specifying multiple icons.

+

The icon file must be packaged with your add-on: it may not refer to a remote file.

+

You can change the icon at any time by setting the button's icon property. You can change the icon, and the other state attributes, either globally, for a specific window, or for a specific tab. Read more about updating state.

+

Attaching a panel

+

If you need to attach a panel to a button, use the toggle button API. This is just like the action button API except it adds a boolean checked property which is toggled whenever the button is checked. To attach the panel, pass the button to the panel's show() method. For more details on this, see the toggle button's documentation.

+

Displaying richer content

+

To create more complex user interface content than is possible with just a button, use the toolbar API. With the toolbar API you get a complete horizontal strip of user interface real estate. You can add buttons to the toolbar and also frames, that can host HTML, CSS, and JavaScript.

+

Learning more

+ diff --git a/files/bn/mozilla/add-ons/sdk/tutorials/index.html b/files/bn/mozilla/add-ons/sdk/tutorials/index.html new file mode 100644 index 0000000000..25c953da9e --- /dev/null +++ b/files/bn/mozilla/add-ons/sdk/tutorials/index.html @@ -0,0 +1,175 @@ +--- +title: Tutorials +slug: Mozilla/Add-ons/SDK/Tutorials +tags: + - টিউটোরিয়াল +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials +--- +

এই পেজ এর তালিকাগুলো নিজ হাতে গড়া অনুচ্ছেদ, কেমনে SDK ব্যবহার করে নির্দিষ্ট কাজসমূহ অর্জন করা যায় এ সম্পর্কে।

+
+

শুরু করা

+
+
+
+
+  স্থাপন করা 
+
+ ডাউনলোড, স্থাপন,এবং SDK চালু করা Windows, OS X এবং Linux এ।
+
+
+
+ সমস্যাসমাধান
+
+ কিছু pointers ব্যবহার করা হয় গতানুগতিক সমস্যাসমূহ সমাধান করার জন্য এবং আরও সাহায্য পাওয়ার জন্য।
+
+
+
+
+
+ শুরু করা
+
+ SDK এর সাথে একটি simple add-ones তৈরি করুন।
+
+
+
+
+

ইউজার ইন্টারফেস তৈরি

+
+
+
+
+ একটি  toolbar button যুক্ত করুন
+
+       একটি বোতাম যুক্ত করুন Firefox Add-on toolbar এ। 
+
+ একটি menu item যুক্ত করুন Firefox এ
+
+ Firefox main menus এ items যুক্ত করুন।
+
+
+
+
+
+ পপআপ প্রদর্শন
+
+ পপআাপ dialog প্রদর্শন করা HTML এবং Javascript এর সাথে।
+
+ একটি context menu item যুক্ত করা
+
+        Firefox's context menu এ items যুক্ত করুন।
+
+
+
+
+

ব্রাউজার দিয়ে যোগাযোগ

+
+
+

  একটি web page খোলা   

+

         একটি web page খুলুন একটি নতুন browser tab e অথবা window তে tabs module ব্যবহার করে,এবং ইহার বিষয়বস্তুকে প্রবেশাধিকার দেয়া।

+
+
+  
+
+  
+
+ পৃষ্ঠা লোড শুনুন
+
+ Tabs module ব্যবহার করা অবহিত করার জন্য যখন নতুন web page load হবে, এবং তাদের বিষয়বস্তুকে প্রবেশাধিকার দেয়া হবে।
+
+
+
+
+
+ open tab এর তালিকা পাওয়া
+
+ বর্তমানে খোলা tabs গুলোর মাধ্যমে বারবার,এবং তাদের content access tab module ব্যবহার করুন।
+
+
+
+
+

ওয়েব পেজ পরিবর্তন

+
+
+
+
+ URL এর উপর ভিত্তি করে ওয়েব পেজ পরিবর্তন করা
+
+ URL এর উপর ভিত্তি করে web pages এর জন্য filters তৈরি করাঃযার URL টি ফিল্টার সাথে মিলে একটি ওয়েব পাতা লোড হয়, যখনই এটি একটি নির্দিষ্ট স্ক্রিপ্ট চালায়।
+
+
+
+
+
+ সচল ওয়েব পেজ চালানো
+
+ বর্তমান সক্রিয় ওয়েব পেজ এর মধ্যে পরিবর্তনশীল একটি  স্ক্রিপ্ট লোড করুন।
+
+
+
+
+

উন্নয়ন কৌশল

+
+
+
+
+ লগিং
+
+
+ ডায়গনিস্টিক উদ্দেশ্যে কনসোল থেকে বার্তা লগ ইন
+
+
+ পূর্ণব্যবহারযোগ্য মডিউল নির্মাণ
+
+ আলাদা modules এ আপনার add-on গঠন করুন যাতে এটি উন্নয়ন,ত্রুটি সরানো,এবং রক্ষণাবেক্ষণ করা সহজ হয়।পূর্ণব্যবহারযোগ্য packages তৈরি করুন যেটা আপনার modules এ ধারণ করবে,সুতরাং অন্যান্য add-on developers রাও তাদের ব্যবহার করতে পারবে।
+
+ ইউনিট টেস্টিং
+
+ SDK's test framework ব্যবহার করে writting and running unit tests করুন।
+
+ ক্রোম কর্তৃপক্ষ
+
+ components object এ access পাবেন,আপনার add-on load হওয়ার জন্য সক্রিয় করুন এবং কোন xpcom object ব্যবহার করুন।
+
+ event targets তৈরি করা
+
+ আপনি তাদের নিজস্ব ইভেন্ট থেকে নির্গত নির্ধারণ বস্তু সক্রিয় করুন।
+
+
+
+
+
+ লোড এবং লোড না করার জন্য শুনুন
+
+ যখন আপনার add-on firefox এ load বা unload হবে তখন এর বিজ্ঞপ্তি জানুন এবং আর্গুমেন্ট পাস করান add-on এ command line হতে।
+
+ Third-party modules ব্যবহার করা
+
+ ইনস্টল করুন এবং অতিরিক্ত মডিউল ব্যবহার করুন যা SDK এর সাথে Ship করে না।
+
+ স্থানীয়করণ
+
+ অনুবাদ কোড লেখা।
+
+ মোবাইল উন্নয়ন
+
+ Firefox Mobile এর জন্য android এর উপর add-ons উন্নয়ন করুন।
+
+ Add-on ডিবাগার
+
+ আপনার অ্যাড অন এর জাভাস্ক্রিপ্ট ডিবাগ করুন।
+
+
+
+
+

একসঙ্গে নির্বাণ

+
+
+
+
+ ভাষ্যকার add-on
+
+ একটি অপেক্ষাকৃত জটিল add-on এ walkthrough করা।
+
+
+
+

 

diff --git a/files/bn/mozilla/add-ons/sdk/tutorials/installation/index.html b/files/bn/mozilla/add-ons/sdk/tutorials/installation/index.html new file mode 100644 index 0000000000..496e6df0c2 --- /dev/null +++ b/files/bn/mozilla/add-ons/sdk/tutorials/installation/index.html @@ -0,0 +1,78 @@ +--- +title: Installation +slug: Mozilla/Add-ons/SDK/Tutorials/Installation +tags: + - ইন্সটলেশন + - স্থাপন করা +translation_of: Mozilla/Add-ons/SDK/Tools/jpm#Installation +--- +

পূর্বশর্ত

+

Add-on SDK-র মাধ্যমে উন্নয়ন করতে চাইলে আপনের লাগবেঃ

+ +

Git Sources থেকে Extention Building করা AMO এর জন্য

+

শুধুমাত্র addon-sdk sources এর সর্বশেষ git release tag ব্যবহার করা যেতে পারে যদি AMO তে উপস্থাপন করা হয়।

+

The git archive command প্রয়োজন হয়  git clone working directory এর কিছু git attribute placeholders বিশ্লেষণ করার জন্য।

+
1 git checkout 1.16
+2
+3 git archive 1.16 python-lib/cuddlefish/_version.py | tar -xvf -
+
+

FreeBSD/ OS X / Linux এ স্থাপন করা

+

যে স্থানটি আপনি নির্বাচন করেছেন সে স্থানের File Contents Extract করুন, এবং  shell/command prompt এর মাধ্যমে SDK এর root directory navigate করুন। উদাহরণস্বরূপঃ

+
1 tar -xf addon-sdk.tar.gz
+2 cd addon-sdk
+
+

যদি আপনি Bash user হন তবে চালু করুন (অধিকাংশ মানুষ)

+
source bin/activate
+
+

এবং আপনি যদি non-Bash user হন ,আপনার চালু করা উচিতঃ

+
bash bin/activate
+
+

আপনার কমান্ড প্রম্পট এখন SDK এর মূল ডিরেক্টরির নাম ধারণকারী একটি নতুন উপসর্গ থাকতে হবে

+
(addon-sdk)~/mozilla/addon-sdk >
+
+

Homebrew ব্যবহার করে Mac Install করা

+

যদি আপনি Mac user হন তবে SDK install করতে আপনি Homebrew ব্যবহার করতে পারেন, নিম্নোক্ত নির্দেশ ব্যবহার করেঃ

+
brew install mozilla-addon-sdk
+

একবার সফলতার সাথে এটি সম্পূর্ণ হলে, আপনি cfx program আপনার command line এ ব্যবহার করতে পারেন যে কোন সময় । আপনার bin/activate চালু করার প্রয়োজন নেই।

+

Windows এ install করা

+

যে স্থানটি আপনি নির্বাচন করেছেন সে স্থানের File Contents Extract করুন, এবং shell/command prompt এর মাধ্যমে SDK এর root directory navigate করুন। উদাহরণস্বরূপঃ

+
7z.exe x addon-sdk.zip
+cd addon-sdk
+
+

তারপর চালু করুনঃ

+
bin\activate
+
+

আপনার কমান্ড প্রম্পট এখন SDK এর এর রুট ডিরেক্টরি সম্পূর্ণ পাথ ধারণকারী একটি নতুন উপসর্গ থাকতে হবে :

+
(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk>
+
+

 সক্রিয় করা

+

সক্রিয় কমান্ড কিছু environment variables set করে যেটা SDK এর জন্য প্রয়োজন। এটি শুধুমাত্র variables set করে current command prompt এর জন্য। যদি আপনি নতুন command prompt চালু করেন,SDK নতুন prompt এ সক্রিয় হতে পারবে না যতক্ষণ না পর্যন্ত আপনি activate type না করেন।

+

এটা মানে হল আপনার SDK এর অনেক কপি আপনার disk এর বিভিন্ন স্থানে থাকতে পারে এবং তাদের মধ্যে switch থাকতে পারে, অথবা এমনকি তাদের উভয়ে একই সময়ে বিভিন্ন কমান্ড লিখতে সক্রিয় থাকে।

+

সক্রিয়করণ স্থায়ী করা

+

এই variables গুলো আপনার পরিমণ্ডলে set করলে আপনার সকল  নতুন prompt তাদের নির্ণয় করে ফেলবে, আপনি সক্রিয়করণকে স্থায়ী করতে পারবেন। তারপর আপনি একটি নতুন কমান্ড প্রম্পট খুলুন প্রত্যেক সময় সক্রিয় টাইপ করার প্রয়োজন হবে না।

+

কারন নতুন মুক্তিপ্রাপ্ত SDK এর সাথে সঠিক variables set পরিবর্তন হতে পারে,activation scripts পড়া উচিত কোন variables set করা প্রয়োজন তা ঠিক করার জন্য।  সক্রিয়করণ ব্যবহার করে বিভিন্ন Scripts এবং sets করে বিভিন্ন variables bash environment এর জন্য (Linux and OS X) এবং Windows environments এর জন্য।

+

Windows

+

Windows এ, bin\activate uses activate.bat, এবং আপনি command line ব্যবহার করে  setx tool or the Control Panel সক্রিয়করণ স্থায়ী করতে পাড়েন।

+

Linux / OS X

+

Linux and OS X এ, source bin/activate  activate bash script ব্যবহার করে, এবং আপনি সক্রিয়করণ স্থায়ী করতে পারবেন ~/.bashrc (on Linux) or ~/.bashprofile (on OS X) ব্যবহার করে।

+

এটির পরিবর্তে আপনার directory তে আপনি cfx program এ সাংকেতিক চিহ্ন তৈরি করতে পারেনঃ

+

 

+
ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx
+
+

SDK install করার করার জন্য যদি আপনি Homebrew ব্যবহার করেন,environment variables আপনার জন্য স্থায়ীভাবে স্থাপন হয়ে থাকবে।

+

বৈধতা পরীক্ষা

+

আপনার shell prompt এর মাধ্যমে চালু করেনঃ

+
cfx
+
+

এটির নির্গমন এমন হতে হবে যে এটির প্রথম লাইন দেখতে এটির মত,অনেক লাইন তথ্য অনুসরণ করেঃ

+
Usage: cfx [options] [command]
+
+

এটি হয় cfx command-line program। এটি আপনার Add-on SDK এর প্রাথমিক interface। Firefox চালাতে আপনি এটি ব্যবহার করেন এবং আপনার add-on পরীক্ষা করেন, আপনার add-on package করুন বিতরণ করার জন্য, দলিল পরিদর্শন করুন এবং unit tests চালু করুন

+

সমস্যাসমূহ ?

+

Troubleshooting page এ চেষ্টা করুন।

+

পরবর্তী পদক্ষেপ

+

পরবর্তীতে Getting Started With cfx tutorial দেখুন,সেখানে ব্যাখ্যা করা আছে যে কেমন করে cfx tool ব্যবহার করে add-ons তৈরি করা যায়।

diff --git a/files/bn/mozilla/add-ons/sdk/tutorials/logging/index.html b/files/bn/mozilla/add-ons/sdk/tutorials/logging/index.html new file mode 100644 index 0000000000..3e67bdd732 --- /dev/null +++ b/files/bn/mozilla/add-ons/sdk/tutorials/logging/index.html @@ -0,0 +1,38 @@ +--- +title: লগিং +slug: Mozilla/Add-ons/SDK/Tutorials/Logging +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Logging +--- +
+ To follow this tutorial you'll need to have installed the SDK and learned the basics of cfx.
+

 ডম কনসোল অবজেক্ট  জাভাস্ক্রিপ্ট ডিবাগ করার জন্য ব্যবহৃত হয়। কারণ ডম অবজেক্ট গুলো মেইন অ্যাড-অন কোডে পাওয়া যায় না । SDK এর নিজেস্ব গ্লোবাল কনসোল অবজেক্ট আছে যার অধিকাংশ মেথড ডম কনসোল এর মত , যার মধ্যে আছে লগ এরর, ওয়ার্নিং অথবা ইনফরমেশনাল ম্যাসেজ। কনসোল এ এক্সেস করার জন্য আপনার কোন কিছুর প্রয়োজন()নেই। এটি automatically আপনার জন্য দেয়া আছে ।

+

The console.log() method prints an informational message:

+
console.log("Hello World");
+
+

Try it out:

+ +

Firefox will start, and the following line will appear in the command window you used to execute cfx run:

+
info: Hello World!
+
+

console in Content Scripts

+

You can use the console in content scripts as well as in your main add-on code. The following add-on logs the HTML content of every tab the user loads, by calling console.log() inside a content script:

+
require("sdk/tabs").on("ready", function(tab) {
+  tab.attach({
+    contentScript: "console.log(document.body.innerHTML);"
+  });
+});
+
+

console Output

+

If you are running your add-on from the command line (for example, executing cfx run or cfx test) then the console's messages appear in the command shell you used.

+

If you've installed the add-on in Firefox then the messages appear in Firefox's Browser Console.

+

But note that by default, calls to console.log() will not result in any output in the Error Console for any installed add-ons: this includes add-ons installed using the Add-on Builder or using tools like the Extension Auto-installer.

+

See "Logging Levels" in the console reference documentation for more information on this.

+

Disabling strict mode

+

By default, cfx enables JavaScript strict mode, which will cause a lot of JavaScript warnings to be logged to the console. If this makes it harder to interpret logging output, you can disable strict mode by opening the file at python-lib/cuddlefish/prefs.py  and setting "javascript.options.strict" to False.

+

Learning More

+

For the complete console API, see its API reference.

diff --git a/files/bn/mozilla/add-ons/sdk/tutorials/unit_testing/index.html b/files/bn/mozilla/add-ons/sdk/tutorials/unit_testing/index.html new file mode 100644 index 0000000000..1f7ad87c4d --- /dev/null +++ b/files/bn/mozilla/add-ons/sdk/tutorials/unit_testing/index.html @@ -0,0 +1,114 @@ +--- +title: ইউনিট টেস্টিং +slug: Mozilla/Add-ons/SDK/Tutorials/Unit_testing +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Unit_testing +--- +
+

এই tutorial আপনার থাকতে দরকার হবে অনুসরন করতে installed the SDK, জ্ঞানী basics of cfx, আর অনুসরন করা tutorial writing reusable modules.

+
+
+

যদি আপনি ব্যবহার করতেন jpm cfx বদলে, cfx থেকে স্থানান্তর করতে গাইড দেখে, in particular সেকশান loading modules from test code.

+
+

sdk দেয় একটি কাঠামো সাহায্য করতে বানায় আর আপনার কোড-এর জন্য অংশ পরীক্ষা দৌড়ায়. এটা হাতেকলমে দেখাতে কাজ করে আমরা একটি সাদাসিধে-এর জন্য কিছু অংশ পরীক্ষা লিখব Base64 মডিউল সঙ্কেতাক্ষরে লিখতে.

+

একটি  সাদাসিধে  base64  মডিউল

+

একটি ওয়েব পাতায়, আপনি base64 সম্পাদন করতে পারেন ( -rrb- আর atob -lrb- ) কাজ ব্যব‌হার সঙ্কেতাক্ষরে লিখতে আর btoa ব্যবহার করা সন্কেত উদঘাটন করতে।দুর্ভাগ্যক্রমে এই কাজ ব্যব‌হার জানালা জিনিষে সংযুক্ত করা হয়: যেহেতু এই জিনিষ না উপস্থিত আপনার প্রধান add-on কোডে, atob ( -rrb- আর btoa -lrb- ) নেই উপস্থিত either। তাই আমরা একটি base64 মডিউল বানাবো প্ল্যাটফর্ম থেকে এই কাজ ব্যব‌হার অনাবৃত করতে।

+

শুরুতে, একটি নতুন ডিরেক্টরি বানাতে, এটায় পথ খোঁজতে, আর cfx init দৌড়াতে। Now create a new file in "lib" called "base64.js", and give it the following contents:এখন `` libে '' `` "base64.js" ডাকা একটি নতুন ফাইল বানান।

+
const { atob, btoa } = require("chrome").Cu.import("resource://gre/modules/Services.jsm", {});
+
+exports.atob = a => atob(a);
+exports.btoa = b => btoa(b); 
+

এই কোড দুটো কাজ ব্যব‌হার, যা মাত্র প্ল্যাটফর্ম-এর btoa ডাকে রপ্তানি করে() and atob() functions. ব্যবহারে মডিউল দেখাতে, সম্পাদন করতে "main.js"দাখিল করুন যেহেতু  এটি অনুসরন করে:

+
var base64 = require("./base64");
+
+var button = require("sdk/ui/button/action").ActionButton({
+  id: "base64",
+  label: "base64",
+  icon: "./icon-16.png",
+  onClick: function() {
+    encoded = base64.btoa("hello");
+    console.log(encoded);
+    decoded = base64.atob(encoded);
+    console.log(decoded);
+  }
+});
+

আপনার add-ons `` ডাটা '' ডিরেক্টরিতে বাঁচাতে  উপরন্তু দৃষ্টান্ত  একটি প্রতিমা উল্লেখ করে `` icon-16 দাখিল করে থাকতে হবে। । আপনি এই প্রতিমা ডাউনলোড করতে পারতেন: .

+

এখন "main.js" আমদানি base64 মডিউল আর ডাক এটার দুটো exported কাজ ব্যব‌হার।

+ + + + + + +
যদি আমরা add-on দৌড়াতাম আর বাটন ক্লিক করি, আমরা অনুসরন করা লগ করা আউটপুট দেখা উচিত
+

:

+
info: aGVsbG8=
+info: hello
+
+

পরীক্ষা করে  base64  মডিউল

+

navigate এ্যাডঅন-এর-এর test directory আর delete test-main.js ফাইল. এটার জায়গায় বানান একটি ফাইল যা ডাকা হলো test-base64.js অনুসরন করা অভ্যন্তরস্থ বস্তু-এর সাথে:

+
var base64 = require("./base64");
+
+exports["test atob"] = function(assert) {
+      assert.ok(base64.atob("aGVsbG8=") == "hello", "atob works");
+}
+
+exports["test btoa"] = function(assert) {
+  assert.ok(base64.btoa("hello") == "aGVsbG8=", "btoa works");
+}
+
+exports["test empty string"] = function(assert) {
+  assert.throws(function() {
+                  base64.atob();
+                },
+                "empty string check works");
+}
+
+require("sdk/test").run(exports); 
+

এটা দাখিল করে: রপ্তানি করে তিন কাজ ব্যব‌হার, যার each একটি একাকী যুক্তি পেতে আশা করে যা হচ্ছে একটি assert জিনিষ. assert যোগান দেয়া হয় test/assert module আর বাস্তবায়িত করেCommonJS Unit Testing specification.

+ +

এই মুহূর্তে আপনার add-on ought এই মত দেখতে:

+
  /base64
+      package.json
+      README.md
+      /doc
+          main.md
+      /lib
+          main.js
+          base64.js
+      /test
+          test-base64.js
+
+

এখন cfx নির্বাহ করুন-- এ্যাডঅন-এর মূল ডিরেক্টরি থেকে verbose পরীক্ষা করুন। আপনি এখন এর মত কিছু দেখা পাবেন:

+
Running tests on Firefox 13.0/Gecko 13.0 ({ec8030f7-c20a-464f-9b0e-13a3a9e97384}) under darwin/x86.
+info: executing 'test-base64.test atob'
+info: pass: atob works
+info: executing 'test-base64.test btoa'
+info: pass: btoa works
+info: executing 'test-base64.test empty string'
+info: pass: empty string check works
+
+3 of 3 tests passed.
+Total time: 5.172589 seconds
+Program terminated successfully.
+
+ + + + + + +
কি ঘটে এখানে হচ্ছে সে cfx পরীক্ষা
+

যোজক চিহ্ন নোট করুন "test" module নামে। cfx testwill অন্তর্ভুক্ত করে একটি মডিউল যা ডাকা হলো "test-myCode.js", কিন্তু, অভিলাষ মডিউল ছাঁটাই করে যা ডাকা হলো "test_myCode.js" or "testMyCode.js".

+ +

স্পষ্টত, আপনার-- verbose অপশন পাশ করতে cfx যদি আপনি চাইতেন না হবে না; এত মাত্র করতে আউটপুট আরো সহজ পড়তে বানায়।

diff --git a/files/bn/mozilla/add-ons/webextensions/index.html b/files/bn/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..8a47f12413 --- /dev/null +++ b/files/bn/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,91 @@ +--- +title: WebExtensions +slug: Mozilla/Add-ons/WebExtensions +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/WebExtensions +--- +
{{AddonSidebar}}
+ +
+

WebExtensions are currently in an experimental alpha state. From Firefox 46, you can publish WebExtensions to Firefox users, just like any other add-on. We're aiming for a first stable release in Firefox 48.

+
+ +

WebExtensions are a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the extension API supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or Microsoft Edge with just a few changes. The API is also fully compatible with multiprocess Firefox.

+ +

We're also intending to extend the APIs to support the needs of add-on developers, so if you have ideas, we'd love to hear them. You can reach us on the dev-addons mailing list or #webextensions on IRC.

+ +
+
+

Getting started

+ + + +

How to

+ + + +

Concepts

+ + + +

Porting

+ + + +

Firefox workflow

+ + +
+ +
+

Reference

+ + + +

JavaScript APIs

+ +
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}
+ +

Manifest keys

+ +
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}
+
+
diff --git a/files/bn/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/bn/mozilla/add-ons/webextensions/what_are_webextensions/index.html new file mode 100644 index 0000000000..f92dc2ad28 --- /dev/null +++ b/files/bn/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,95 @@ +--- +title: What are WebExtensions? +slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +

এই পাতা গেকো ভিত্তিক অ্যাপ্লিকেশনের জন্য উন্নয়নশীল এক্সটেনশন পদ্ধতির যা ব্যবহার ডকুমেন্টেশন লিঙ্ক উপস্থিত রয়েছে
+
+
+  XUL প্রতিস্থাপক ইন্টারফেস করুন </ li> নির্দিষ্ট করার
+  <লি> যেমন <a href="/en-US/docs/XUL/tabbrowser"> <code> বিশেষ সুবিধাভোগী কোড উপলব্ধ API গুলি, tabbrowser </ code> </a> এবং <একটি href = "/ en-US / ডক্স / মজিলা / JavaScript_code_modules "> জাভাস্ক্রিপ্ট মডিউল </a>, অ্যাপ্লিকেশন এবং কন্টেন্ট সঙ্গে যোগাযোগ করার জন্য. </ li>
+ </ Li>
+
+ <P> ঢাকা ফায়ারফক্স 4, এবং গেকো 2 ইঞ্জিন এটি ক্ষমতা, এই এক্সটেনশন বিকাশ করার একমাত্র উপায় ছিল এর আগে. এই পদ্ধতি মূলত <a href="/en-US/docs/Extensions/Bootstrapped_extensions"> রিস্টার্টবিহীন এক্সটেনশন </a>, এবং <a দ্বারা বাতিল হয়েছে href="/en-US/Add-ons/SDK"> অ্যাড-অন এসডিকে </a>, যা তাদের উপর নির্মিত হয়. সুবিধাভোগী জাভাস্ক্রিপ্ট এপিআই এখানে বর্ণনা এখনও অ্যাড টার্ন এই নতুন ধরনের ব্যবহার করা যেতে পারে. '</ p>
+
+ <H2 & id = "XUL_School"> XUL স্কুল </ h2>
+
+ <পি> <a href="/en-US/Add-ons/Overlay_Extensions/XUL_School"> XUL স্কুল </a> একটি ব্যাপক অ্যাড অন উন্নয়ন টিউটোরিয়াল, কিন্তু বেশিরভাগই অন্যান্য গেকো ভিত্তিক প্রযোজ্য ফায়ারফক্স এক্সটেনশন উন্নয়ন উপর মনোযোগ নিবদ্ধ করে অ্যাপ্লিকেশন. '</ p>
+
+ <H2 & id = "More_resources"> আরো সম্পদ করুন </ h2>
+
+ <Div class = "কলাম-ধারক">
+ <Div class = "কলাম অর্ধ">
+ <DL>
+  <Dt> <a href="/en-US/Mozilla/Add-ons/Setting_up_extension_development_environment"> আপনার পরিবেশ </a> </ DT> সেট আপ
+  <DD> এক্সটেনশন উন্নয়নের জন্য আবেদন সেট আপ হচ্ছে. </ DD>
+  <Dt> <a href="/en-US/docs/XUL"> XUL </a> </ DT>
+  <DD> টিউটোরিয়াল এবং ইউজার ইন্টারফেস XUL ​​এক্সটেনশন. </ DD> দ্বারা ব্যবহৃত ভাষা জন্য রেফারেন্স
+  <Dt> <a href="/en-US/Mozilla/Add-ons/Code_snippets"> কোড স্নিপেট </a> </ DT>
+  <DD> জিনিষ আপনি করতে চাইবেন. </ DD> অনেক জন্য নমুনা কোড
+  <Dt> <a href="/en-US/Mozilla/Add-ons/Installing_extensions"> এক্সটেনশন </a> </ DT> ইনস্টল
+  <DD> অ্যাপ্লিকেশনের তালিকা ইনস্টল এক্সটেনশান ফাইল অনুলিপি দ্বারা একটি এক্সটেনশন ইনস্টল করার জন্য কিভাবে. </ DD>
+  <Dt> <a href="/en-US/Add-ons/Overlay_extensions/Firefox_addons_developer_guide"> ফায়ারফক্স অ্যাড-অন ডেভেলপার নির্দেশিকা </a> </ DT>
+  <DD> ওভারলে এক্সটেনশন. </ DD> উন্নয়নশীল একটি নির্দেশিকা
+ </ DL>
+ </ Div>
+
+ <Div class = "কলাম অর্ধ">
+ <DL>
+  <Dt> <a href="/en-US/docs/Mozilla/JavaScript_code_modules"> জাভাস্ক্রিপ্ট কোড মডিউল </a> </ DT>
+  <DD> জাভাস্ক্রিপ্ট মডিউল এক্সটেনশন ডেভেলপার. </ DD> উপলব্ধ
+  <Dt> <a href="/en-US/Mozilla/Add-ons/Inline_Options"> এক্সটেনশন পছন্দগুলি </a> </ DT>
+  <DD> কিভাবে আপনার এক্সটেনশন পছন্দগুলি যে অ্যাড-অন ম্যানেজার প্রদর্শিত হবে তা নির্দিষ্ট করার. </ DD>
+  <Dt> <a href="/en-US/Mozilla/Add-ons/Extension_Packaging"> এক্সটেনশন প্যাকেজিং </a> </ DT>
+  <DD> কিভাবে এক্সটেনশন প্যাকেজ এবং ইনস্টল করা হয়. </ DD>
+  <Dt> <a href="/en-US/Mozilla/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System"> বাইনারি ফায়ারফক্স এক্সটেনশন </a> </ DT>
+  <DD> ফায়ারফক্সের জন্য বাইনারি এক্সটেনশন তৈরি. </ DD>
+ </ DL>
+ </ Div>
+ </ Div>
+
+ <পি> & nbsp; </ p>

diff --git a/files/bn/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/bn/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..c705ed4493 --- /dev/null +++ b/files/bn/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -0,0 +1,143 @@ +--- +title: আপনার প্রথম WebExtension +slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +

{{AddonSidebar}}

+ +

এই অনুচ্ছেদে ফায়ারফক্সের WebExtension তৈরীর আদ্যপন্ত জানব। এই অ্যাড-অন "mozilla.org" অথবা এর সাবডোমেন থেকে আসা সমস্ত পেজে লাল বর্ডার যোগ করবে।

+ +

এই উদাহরণের সোর্স কোড GitHub-এ দেওয়া আছেঃ

+ +

https://github.com/mdn/webextensions-examples/tree/master/borderify.

+ +

প্রথমে দরকার হবে ফায়ারফক্স ৪৫ অথবা তার পরবর্তী ভার্সন।

+ +

WebExtension লিখা

+ +

নতুন একটি ডিরেক্টরী তৈরী করে সেখানে প্রবেশ করুনঃ

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

এখন "borderify" ডিরেক্টরীর ভেতরে "manifest.json" নামে নতুন একটি ফাইল তৈরী করুন। তাতে নিম্নলিখিত কোড লিখুনঃ

+ +
{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Adds a solid red border to all webpages matching mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ + + +

কিছু ফায়ারফক্স ভার্সনে একটি অতিরক্ত applications key manifest.json-এ যোগ করা লাগতে পারে।

+ +
"applications": {
+  "gecko": {
+    "id": "borderify@example.com",
+    "strict_min_version": "42.0",
+    "strict_max_version": "50.*",
+    "update_url": "https://example.com/updates.json"
+  }
+}
+ +

সবচেয়ে মজার key হচ্ছ content_scripts. এটা ফায়ারফক্সকে সেই সব ওয়েব পেজে স্ক্রীপট লোড করতে বলবে যাদের URL-এ একটি নির্দিষ্ট প্যাটার্ন আছে।এক্ষেত্রে আমরা ফায়ারফক্সকে "mozilla.org" বা এর সাবডোমেনের সমস্ত HTTP অথবা HTTPS পেজে "borderify.js" নামে স্ক্রীপট লোড করতে বলছি।

+ + + +

icons/border-48.png

+ +

The add-on should have an icon. This will be shown next to the add-on's listing in the Add-ons Manager. Our manifest.json promised that we would have an icon at "icons/border-48.png".

+ +

Create the "icons" directory directly under the "borderify" directory. Save an icon there named "border-48.png".  You could use the one from our example, which is taken from the Google Material Design iconset, and is used under the terms of the Creative Commons Attribution-ShareAlike license.

+ +

If you choose to supply your own icon, It should be 48x48 pixels. You could also supply a 96x96 pixel icon, for high-resolution displays, and if you do this it will be specified as the 96 property of the icons object in manifest.json:

+ +
"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}
+ +

Alternatively, you could supply an SVG file here, and it will be scaled correctly.

+ + + +

borderify.js

+ +

Finally, create a file called "borderify.js" directly under the "borderify" directory. Give it this content:

+ +
document.body.style.border = "5px solid red";
+ +

This script will be loaded into the pages that match the pattern given in the content_scripts manifest.json key. The script has direct access to the document, just like scripts loaded by the page itself.

+ + + +

Testing it out

+ +

First, double check that you have the right files in the right places:

+ +
borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json
+ +

Open "about:debugging" in Firefox, click "Load Temporary Add-on" and select any file in your add-on's directory:

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

The add-on will now be installed, and will stay until you restart Firefox.

+ +

Now try visiting a page under "mozilla.org", and you should see the red border round the page:

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +

Try experimenting a bit. Edit the content script to change the color of the border, or do something else to the page content. Save the content script, then reload the add-on's files by clicking the "Reload" button in about:debugging. You can see the changes right away:

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

Packaging and publishing

+ +

For other people to use your add-on, you need to package it and submit it to Mozilla for signing. To learn more about that, see "Publishing your WebExtension".

+ +

What's next?

+ +

Now you've got an idea of the process of developing a WebExtension for Firefox, try:

+ + diff --git "a/files/bn/mozilla/add-ons/\340\246\245\340\246\277\340\246\256/index.html" "b/files/bn/mozilla/add-ons/\340\246\245\340\246\277\340\246\256/index.html" new file mode 100644 index 0000000000..30bd842c22 --- /dev/null +++ "b/files/bn/mozilla/add-ons/\340\246\245\340\246\277\340\246\256/index.html" @@ -0,0 +1,60 @@ +--- +title: থিম +slug: Mozilla/Add-ons/থিম +tags: + - NeedsReview +translation_of: Mozilla/Add-ons/Themes +--- +

থিমস বিভিন্ন মোজিলা অ্যাপ্লিকেশনের জন্য স্কিনস। তারা আপনার ইউজার ইন্টারফেস এর লুক এবং অনুভুতিতে পরিবর্তন এবং আপনার কার্যকলাপকে এটি ব্যক্তিগতকৃত করতে অনুমতি দেয়।  একটি থিম সহজভাবে UI এর রং পরিবর্তন করতে পারে অথবা এটি তার লুক এর প্রতিটি স্থানের পরিবর্তন করতে পারে। এখানে থিম ডকুমেন্টেশন তারিখ সীমার বাইরে, কিন্তু আমরা শীঘ্রই এটি আপডেট করার জন্য কিছু সাহায্য পেতে প্রত্যাশা করছি।

+
+
+

নথিপত্র

+
+
+ Building a Theme
+
+ ফায়ারফক্স এর একটি সহজ থিম নির্মাণের জন্য একটি টিউটোরিয়াল।
+
+ Common Theme Issues and Their Solutions
+
+ যখন AMO সম্পাদকরা থিম এবং কিভাবে তাদের ঠিক করতে হবে এটা নিয়ে পর্যালোচনা করেন তখন প্রচলিত বিষয় দেখা যায়।
+
+ Lightweight themes
+
+ ফায়ারফক্সের জন্য লাইটওয়েট থিম নির্মাণের প্রণালী।
+
+ Creating a Skin for SeaMonkey 2
+
+ সীমাংকি 2 জন্য নতুন থিম তৈরির জন্য একটি উপস্থাপনা।
+
+ Making Sure Your Theme Works with RTL Locales
+
+ আপনার থিম হিব্রু, আরবি, ফার্সি ও উর্দু লোকেইলের সাথে সঠিক হবে কাজ করবে এটা নিশ্চিত করুন।
+
+ Theme Packaging
+
+ ফায়ারফক্স এবং থান্ডারবার্ড জন্য থিম প্যাকেজ করুন।
+
+ Yet Another Theme Tutorial
+
+ মোজিলা থিম নির্মাণ এর জন্য আরেকটি টিউটোরিয়াল।
+
+ Obsolete docs
+
+ এই ডক্স খুব পুরানো এবং আপডেট করা হবে না কখনও কিন্তু থিম ডকুমেন্টেশন আপডেট সবার জন্য দরকারী উৎস উপাদান তাই তাদের জন্য রাখা হয়েছে।
+
+
+
+

Getting help

+ +

Tools

+ +
+
+

 

diff --git "a/files/bn/mozilla/add-ons/\340\246\245\340\246\277\340\246\256/obsolete/index.html" "b/files/bn/mozilla/add-ons/\340\246\245\340\246\277\340\246\256/obsolete/index.html" new file mode 100644 index 0000000000..43f20d34b5 --- /dev/null +++ "b/files/bn/mozilla/add-ons/\340\246\245\340\246\277\340\246\256/obsolete/index.html" @@ -0,0 +1,9 @@ +--- +title: Obsolete +slug: Mozilla/Add-ons/থিম/Obsolete +tags: + - needsRevision +translation_of: Mozilla/Add-ons/Themes/Obsolete +--- +

এই পৃষ্ঠাটি কিছু থিম সংগ্রহ করে যেগুলো আমরা মনে করি কখনই হালনাগাদ করা হবে না , কিন্তু আমরা এই সময়ের জন্য এগুলো কে শক্তিশালী উৎস হিসেবে রেখে দিচ্ছি পরবর্তীতে ব্যবহার করার জন্য ।

+

{{ ListSubPages ("/en-US/Add-ons/Themes/Obsolete", 5) }}

diff --git a/files/bn/mozilla/bugzilla/index.html b/files/bn/mozilla/bugzilla/index.html new file mode 100644 index 0000000000..c5328abd84 --- /dev/null +++ b/files/bn/mozilla/bugzilla/index.html @@ -0,0 +1,54 @@ +--- +title: Bugzilla (বাগজিলা) +slug: Mozilla/Bugzilla +tags: + - Bugzilla + - Developing Mozilla + - 'Developing_Mozilla:Tools' + - QA + - Tools +translation_of: Mozilla/Bugzilla +--- +

bugzilla.mozilla.org (প্রায়ই সংক্ষেপে b.m.o ব্যবহার করা হয়) হল Mozilla.org-এর বাগ ট্যাকিং পদ্ধতি, এটি একটি ডাটাবেজ যেখানে ফায়ারফক্স, থান্তারবার্ড, সিমাংকি, ক্যামিনো এবং mozilla.org এর অন্যান্য প্রকল্পের বাগ এবং নতুন বৈশিষ্টের অনুরোধ সংরক্ষন করা হয়।

+ +
+
+

B.m.o. ডকুমেন্টেশন

+ +
+
বাগজিলায় কোন কাজগুলো করা যাবে এবং কোনগুলো করা যাবে না
+
বাগজিলা ব্যবহারের বিভিন্ন টিপস্‌ এবং যে কাজগুলো এড়িয়ে চলতে হবে তার একটি তালিকা। 
+
বাগজিলা শিষ্টাচার
+
আদব কায়দার তালিকা, b.m.o.-তে আপনি নিজেকে কিভাবে পরিচালিত করবেন, আপনার আচরণ এবং সৌজন্যতা কিভাবে কোন একটি সমস্যার দ্রুত সমাধান পেতে সহায়তা করবে সেটি বিস্তারিতভবে বর্ণনা করা হয়েছে এখানে।
+
কিভাবে জানবেন একটি বাগ আগেই রিপোর্ট করা হয়েছে কিনা
+
নতুন কোন একটি বাগ রিপোর্ট করার আগে জেনে নেয়া ভালো (বাধ্যতামূলক নয়) যে আগেই অন্য কেউ এটি বিষয়ে রিপোর্ট করেছেন কিনা। এটি গাইডে বিষয়টি বিস্তারিত বর্ণনা করা হয়েছে।
+
মান নিয়ন্ত্রণ
+
মোজিলার মান নিয়ন্ত্রণের ডকুমেন্টেশন।
+
বাগ লেখার গাইডলাইন
+
ডেভলপার দল যেন বাগের বর্ণনা পড়ে সহজেই সেটির বিস্তারিত বুঝতে পারে, এমন বর্ণনা লেখার পদ্ধতি সম্পর্কে বিস্তারিত উল্লেখ রয়েছে এই ডকুমেন্টেশনে।
+
কিভাবে একটি প্যাচ সাবমিট করবেন
+
আপনি যদি একটি বাগ সমাধান করেন, অথবা নতুন কোনো বৈশিষ্ট সংযোজন করেন তবে আপনার এই প্যাচটি মূল সোর্স-ট্রিতে যুক্ত করতে হবে। সংযোজনের পর এটি মোজিলার ঐ প্রকল্পের সাথে সকলের ব্যবহার উপযোগী হিসাবে পাওয়া যাবে। এই গাইড থেকে আপনি এই কাজটি কার ধাপগুলো সম্পর্কে জানতে পারবেন।
+
+ +

সবগুলো দেখুন...

+
+ +
+

অন্যান্য ডকুমেন্টসমূহ

+ +
    +
  • An Introduction to Bugzilla
    • +
  • Bugzilla for humans
    • +
  • Bugzilla QuickSearch help page. QuickSearch, বাগজিলায় দ্রুত, সহজে এবং কার্যকর উপায়ে অনুসন্ধানের একটি পদ্ধতি।
    • +
  • Testopia - টেস্টকেস ব্যবস্থাপনার এক্সটেনশন
    • +
  • bugzilla.org - প্রকল্পের ওয়েবসাইট
    • +
  • {{ interwiki('wikipedia', 'Bugzilla', 'wikipedia:Bugzilla') }} - বাগজিলার সাধারণ বর্ণনা (শুধুমাত্র মোজিলা প্রকল্প কেন্দ্রিক বর্ণনা নয়)
    • +
+ +

টুলসমূহ

+ +
    +
  • Bugzilla Todos, রিভিউ, ফ্ল্যাগ রিকোয়েস্ট, চেকইন করা হয়নি এমন প্যাচসমূহ, কাজ সম্পন্ন হয়নি এমন অনুরোধ সমূহ এবং বাগসমূহের তালিকা সংরক্ষন করে।
    • +
+
+
diff --git a/files/bn/mozilla/developer_guide/index.html b/files/bn/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..dea414934f --- /dev/null +++ b/files/bn/mozilla/developer_guide/index.html @@ -0,0 +1,89 @@ +--- +title: ডেভেলপার গাইড +slug: Mozilla/Developer_guide +translation_of: Mozilla/Developer_guide +--- +

আপনি পুরনো বা নতুন হোন না কেন, মোজিলা প্রযুক্তিতে ডেভেলপমেন্ট করার সময় এই পৃষ্ঠার আর্টিকেলগুলো আপনাকে সাহায্য করবে।

+ + + + + + + + +
+

ডকুমেন্টেশন টপিক

+ +
+
যেভাবে শুরু করবেন
+
মোজিলার সঙ্গে যুক্ত হবার জন্য নতুনদের একটি ধারাবাহিক গাইড।
+
+ +
+
মোজিলা সোর্স কোড নিয়ে কাজ করা
+
মোজিলা কোডের সম্পর্কে কিছু সংক্ষিপ্ত কথা, কি করে কোড পাবেন এবং কোডিং স্টাইলের গাইড।
+
বিল্ড করার নির্দেশনা
+
যেভাবে ফায়ারফক্স, থান্ডারবার্ড, সি-মানকি এবং অন্যান্য মোজিলা অ্যাপ্লিকেশন বিল্ড করবেন।
+
ডেভেলপমেন্ট প্রক্রিয়া সারসংক্ষেপ
+
সম্পূর্ণ মোজিলা ডেভেলপমেন্ট প্রক্রিয়ার সারসংক্ষেপ।
+
একাধিক প্রোফাইল নিয়ে কাজ করা
+
যখন ফায়ারফক্সের রিলিজের আগের ভার্সনগুলো নিয়ে কাজ করবেন, তখন একাধিক ফায়ারফক্স প্রোফাইল রাখা অনেক উপকারী। যেমন, প্রতিটা চ্যানেলের জন্য একটি অথবা বিভিন্ন ধরণের টেস্টিংয়ের জন্য।
+
স্বয়ংক্রিয় টেস্টিং
+
যেভাবে মোজিলার স্বয়ংক্রিয় বা অটোমেটেড টেস্টগুলো চালাবেন এবং যেভাবে নতুন টেস্ট লিখবেন।
+
যেভাবে প্যাচ পাঠাবেন
+
আপনার প্যাচ লেখার পর আপনার করণীয় ট্রিতে চেক-ইন করানো। এই আর্টিকেলে রিভিউ প্রক্রিয়ার বিস্তারিত এবং আপনার প্যাচের অনুমোদিত হওয়া সংক্রান্ত বিস্তারিত আলোচনা করা হয়েছে।
+
ডকুমেন্টেশন আপডেট করা
+
যেভাবে নিশ্চিত করবেন আপনার ডেভেলপ করার সাথে সাথে ডকুমেন্টেশনও আপ-টু-ডেট থাকছে।
+
মোজিলা মডিউল এবং মডিউল "মালিকানা"
+
এই আর্টিকেলে মোজিলার মডিউল, মডিউল স্বত্বাধিকারী (owner) এর ভূমিকা এবং যেভাবে স্বত্বাধিকারী (owner) রা নির্বাচিত হন।
+
কোড স্নিপেট
+
অনেকগুলো প্রয়োজনীয় কোড স্নিপেটের সংগ্রহ, আপনার কাজ অনেক সহজ করে দেবে।
+
মোজিলা ডেভেলপমেন্ট সংক্রান্ত কৌশল
+
মোজিলা প্রজেক্টে কাজ করার সময় যেভাবে আপনার সময়ে সদ্ব্যাবহার করবেন।
+
ডিবাগ করা
+
মোজিলা কোড ডিবাগ করার কিছু গুরুতপূর্ণ টিপস এবং গাইড।
+
পারফরম্যান্স
+
আপনার কোডের পারফরম্যান্স নিশ্চিত করার জন্য কিছু গাইড ও সাহায্যকারী টুলস।
+
মোজিলা প্লাটফর্ম
+
মোজিলা প্লাটফর্ম সংক্রান্ত যাবতীয় বিষয়বস্তু।
+
navigator অবজেক্টে API যোগ করা {{ gecko_minversion_inline("9.0") }}
+
যেভাবে {{ domxref("window.navigator") }} এ অতিরিক্ত API যুক্ত করবেন।
+
ইন্টারফেস কম্পাটিবিলিটি
+
মোজিলার স্ক্রিপ্টেবল এবং বাইনারি API পরিবর্তন করার গাইডলাইন।
+
ফায়ারফক্স কাস্টমাইজ করা
+
ফায়ারফক্সের কাস্টমাইজড ভার্সন তৈরি করা সংক্রান্ত তথ্য।
+
ভার্চুয়াল ARM লিনাক্স এনভায়রনমেন্ট
+
ARM এর টেস্ট করার জন্য যেভাবে একটি লিনাক্সচালিত ARM এমুলেটর সেটআপ করবেন। মোবাইল ডেভেলপারদের জন্য গুরুত্বপূর্ণ।
+
পুরনো বিল্ড করার টিপস
+
পুরনো কোডবেজ বিল্ড করার জন্য কিছু গুরুত্বপূর্ণ টিপস - বর্তমান কোডবেজের জন্য প্রযোজ্য নয়।
+
+ 		+

টুল

+ +
+
Bugzilla (বাগজিলা)
+
Bugzilla ডাটাবেজের সাহায্যে মোজিলা প্রজেক্টগুলোর সমস্যা ট্র্যাক করা হয়।
+
MXR
+
ওয়েবে মোজিলা সোর্স কোড রেপোজিটরী ব্রাউজ এবং সার্চ করুন।
+
Bonsai (বনসাই)
+
Bonsai টুলটির সাহায্যে আপনি বের করতে পারবেন কে কোন কাজের জন্য কোন কোড পরিবর্তন করেছেন।
+
Mercurial
+
মোজিলার সোর্স কোড ব্যবস্থাপনার জন্য ডিস্ট্রিবিউটেড ভার্সন কন্ট্রোল সিস্টেম।
+
Tinderbox
+
Tinderbox ট্রি এর অবস্থা প্রদর্শন করে (ঠিকভাবে বিল্ড হোক বা না হোক)। চেক-ইন বা চেক-আউট করার আগে নিশ্চিত হয়ে নিন আপনি ওয়ার্কিং ট্রির সঙ্গে কাজ করছেন কিনা।
+
ক্র্যাশ ট্র্যাক করা
+
Socorro এবং Talkback ক্র্যাশ রিপোর্টিং সিস্টেম সম্পর্কে বিস্তারিত।
+
পারফরম্যান্স ট্র্যাক করা
+
মোজিলা প্রজেক্টগুলোর পারফরম্যান্স সংক্রান্ত তথ্য দেখুন।
+
Callgraph (কল গ্রাফ)
+
কলগ্রাফ তৈরির মাধ্যমে মোজিলা কোডের স্ট্যাটিক অ্যানালাইসিস করার জন্য একটি টুল।
+
ডেভেলপার ফোরাম
+
মোজিলা ডেভেলপমেন্ট সংক্রান্ত সমস্যা নিয়ে কথা বলার জন্য একটি টপিক-ভিত্তিক তালিকা।
+
মোজিলা প্লাটফর্ম ডেভেলপমেন্ট চিট শিট
+
প্লাটফর্ম ডেভেলপারদের জন্য তৈরি ব্রায়ান বন্ডির তৈরি সচরাচর প্রয়োজনীয় তথ্যের রেফারেন্স।
+
+
+ +


+  

diff --git a/files/bn/mozilla/developer_guide/source_code/index.html b/files/bn/mozilla/developer_guide/source_code/index.html new file mode 100644 index 0000000000..e781f0db36 --- /dev/null +++ b/files/bn/mozilla/developer_guide/source_code/index.html @@ -0,0 +1,74 @@ +--- +title: মজিলা সোর্স কোড নিয়ে কাজ করা +slug: Mozilla/Developer_guide/Source_Code +tags: + - Developing Mozilla + - ডেভেলপিং মজিলা + - মজিলা উন্নয়ন +translation_of: Mozilla/Developer_guide/Source_Code +--- +

নিচের প্রবন্ধ গুলো আপনাকে মজিলার সোর্স কোড সম্পর্কে বিস্তারিত জানতে ও বুঝতে সাহায্য করবে এবং কিভাবে আপনার প্রস্তাবকৃত পরিবর্তন মূল কোডের সাথে যুক্ত করবেন, সে সম্পর্কে বিস্তারিত ধারনা দেবে।

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

ডকুমেন্টেশন টপিক সমূহ

+
+
+
+ মারকিউরিয়াল রিপজিটরি থেকে কোড সংগ্রহ
+
+ যদি আপনি মজিলা প্রকল্পে অবদান রাখার জন্য মনস্থির করে থাকেন, তাহলে আমাদের ভার্শন কন্ট্রোল রিপোজিটরি থেকে কোড দেখতে পারেন। কিভাবে দেখবেন তা জানতে এখানে দেখুন।
+
+ HTTP অথবা FTP ব্যবহার করে কোড ডাউনলোড করা
+
+ আপনি যদি নির্দিষ্ট একটি মজিলা পণ্যের নির্দিষ্ট ভার্শনের কোড ডাউনলোড করতে চান, তাহলে এই নিবন্ধটি আপনার জন্য সহায়ক হতে পারে।
+
+ অনলাইনে মজিলার সোর্স কোড দেখা এবং অনুসন্ধান
+
+ শিখুন কিভাবে MXR ব্যবহার করতে হয়, সোর্স কোডের জন্য মজিলার অনলাইন সার্চ এবং ব্রাউজিং টুল ব্যবহার করতে হয়। এটা কোড ডাউনলোডের জন্য সঠিক উপায় নয়। কিন্তু কোড অনুসন্ধান করার জন্য এটা অসাধারণ!
+
+ মজিলা সোর্স কোডের ভেতরে চলাচল করা
+
+ মজিলার সোর্স ট্রি তে থাকা বিভিন্ন ফোল্ডার সম্পর্কে বিস্তারিত তথ্য এবং আপনার কাঙ্ক্ষিত জিনিস কিভাবে খুঁজে পাবেন, তা এখানে বর্ণনা করা হয়েছে।
+
+ নতুনদের জন্য বাগ
+
+ যদি আপনি প্রকল্পে নতুন হয়ে থাকেন, এবং কোন কাজ করতে চান, তাহলে এখানে দেখতে পারেন।
+
+ 		+
+
+ মজিলা কোডিং স্টাইল গাইড
+
+ কিভাবে আপনি আপনার সোর্স কোড সাজাবেন, তা কোড স্টাইল গাইডের মদ্ধে বর্ণনা করা হয়েছে। পর্যালোচকদের কাছে উপহাসের পাত্র না হতে চাইলে এটি আপনার অবশ্যই পড়া উচিত।
+
+ ইন্টারফেস ডেভেলপমেন্ট গাইড
+
+  কিভাবে XPCOM ইন্টারফেস তৈরি করবেন ও আপডেট করবেন, সে সম্পর্কিত নির্দেশনা ও ডকুমেন্টেশন এখানে পাওয়া যাবে।
+
+ সার্ভারে ব্যবহার করা
+
+ মজিলার পণ্য গুলো অন্তত তিনটি প্লাটফর্মে তৈরি করা হয়েছে। যদি আপনার সেগুলোতে ব্যবহারের সুযোগ না থাকে, তাহলে আপনি আপনার প্যাচ টেস্ট করার জন্য সার্ভার ব্যবহার করতে পারেন; এবং নিশ্চিত করতে পারেন যে প্যাচগুলো ঠিকঠাক কাজ করছে।
+
+ প্যাচ তৈরি করা
+
+ যখন আপনি মজিলা কোডে কোন পরিবর্তন করে ফেলবেন, তার পরবর্তী ধাপ হচ্ছে (সঠিক ভাবে কাজ করছে এটা নিশ্চিত করার পর) একটি প্যাচ তৈরি করে তা পর্যালোচনার জন্য জমা দেয়া। মারকিউরিয়াল এর জন্য এই নিবন্ধটি পুরোপুরি আপডেট করা প্রয়োজন।
+
+ সোর্স কোডে কমিট করার অনুমতি পাওয়া
+
+ অল্প, গর্বিত, কমিটারদের সাথে যোগ দিতে প্রস্তুত ? মজিলার কোডে কিভাবে চেক-ইন এর ক্ষমতা পাবেন, তা এখান থেকে জানতে পারবেন।
+
+ CVS থেকে মজিলার পুরাতন কোড সংগ্রহ
+
+ মজিলার নতুন ও পুরাতন ভার্শন সহ NSS, NSPR ইত্যাদি একটি কনকারেন্ট ভার্শন সিস্টেমে রাখা হয়। এই নিবন্ধে সেসব সম্পর্কে বিস্তারিত জানতে পারবেন।
+
+
+

{{ languages( { "de": "de/Entwicklerhandbuch/Quelltexte", "ja": "ja/Developer_Guide/Source_Code", "pt": "pt/Developer_Guide/Codigo_Fonte" } ) }}

diff --git a/files/bn/mozilla/firefox_for_android/index.html b/files/bn/mozilla/firefox_for_android/index.html new file mode 100644 index 0000000000..8803f5943f --- /dev/null +++ b/files/bn/mozilla/firefox_for_android/index.html @@ -0,0 +1,64 @@ +--- +title: এন্ড্রয়েডের জন্য ফায়ারফক্স +slug: Mozilla/Firefox_for_Android +translation_of: Mozilla/Firefox_for_Android +--- +

প্রতিদিন আরও এবং আরও মানুষের জন্য মোবাইল ডিভাইস হয়ে উঠছে ইন্টারনেটে প্রবেশ করার প্রাথমিক কিংবা একমাত্র পথ! এন্ড্রয়েডের জন্য ফায়ারফক্স (যার কোডনাম Fennec) একটি মুক্ত, পরিবর্তনের উপযুক্ত, আদর্শমান-ভিত্তিক ব্রাউজার - ঠিক যেমনটি ডেস্কটপ ফায়ারফক্স।

+ +

এন্ড্রয়েডের জন্য ফায়ারফক্স, XUL এর বদলে এন্ড্রয়েডের নেটিভ উইজেট ব্যবহার করে নিজের ইউজার ইন্টারফেস তৈরি করে: এর ফলে পারফরম্যান্সে অনেক উন্নতি সাধিত হয়, বিশেষ করে চালু হবার সময় এবং মেমরি ব্যবহার।

+ +

এন্ড্রয়েডের জন্য ফায়ারফক্সে অবদান রাখুন

+ +

প্রজেক্টের উইকি পেজ হল এন্ড্রয়েডের জন্য ফায়ারফক্সের তথ্যের শুরুর অংশ।

+ +

এন্ড্রয়েডের জন্য ফায়ারফক্স তৈরি ও উন্নত করতে আপনি আমাদের সাহায্য করতে পারেন:

+ + + +

মোবাইল ওয়েবের জন্য ডেভেলপ করুন

+ +

We've started putting together a guide to designing web sites for mobile devices.

+ +

With Firefox for Android, you've got access a number of APIs that expose the underlying capabilities of the device, closing the gap between the Web and native applications:

+ + + +

To test your web site on Firefox for Android, you can install it on an Android device or run it on your desktop using the Android Emulator.

+ +

মোবাইল এড-অন তৈরি করুন

+ +

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.

+ +

দ্রুত পরিদর্শন

+ + + +

এন্ড্রয়েডের জন্য ফায়ারফক্স সংক্রান্ত সাহায্য

+ +

Documentation and tutorials for using and troubleshooting Firefox for Android are available on the Mozilla Support website.

diff --git a/files/bn/mozilla/gecko/index.html b/files/bn/mozilla/gecko/index.html new file mode 100644 index 0000000000..6c5f756faa --- /dev/null +++ b/files/bn/mozilla/gecko/index.html @@ -0,0 +1,60 @@ +--- +title: Gecko( গেকো ) +slug: Mozilla/Gecko +tags: + - Gecko + - Mozilla + - NeedsReview +translation_of: Mozilla/Gecko +--- +

 Gecko হচ্ছে মজিলা প্রকল্পের তৈরি একটি লেআউট ইঞ্জিন। এর আসল নাম ছিল NGLayout। Gecko এর কাজ হচ্ছে ওয়েব কন্টেন্ট পড়া, যেমনঃ HTML, CSS, XUL, JavaScript এবং স্ক্রীনে রেন্ডার করা বা প্রিন্ট করা। XUL-based অ্যাপ্লিকেশনের মধ্যে ইউজার ইন্টারফেস রেন্ডার করার জন্যও গেকো ব্যবহার করা হয় ।

+ +

অনেক অ্যাপ্লিকেশনে গেকো ব্যবহার করা হয়। কিছু ব্রাউজার যেমনঃ ফায়ারফক্স, সিমাঙ্কি, ইত্যাদিতে ব্যবহার করা হয়। (পরিপূর্ণ তালিকার জন্য  উইকিপিডিয়ায় গেকো'র নিবন্ধটি দেখতে পারেন।) যে সব পণ্য গেকোর একই ভার্সন ব্যবহার করে, তারা একই আদর্শ মান মেনে চলে।

+ + + + + + + + +
+

ডকুমেন্টেশন

+ +
+
Gecko FAQ
+
Gecko সম্পর্কে সচরাচর জিজ্ঞাসিত প্রশ্ন।
+
Gecko DOM reference
+
DOM থেকে রেফারেন্স।
+
Gecko event reference
+
Gecko এবং Mozilla applications এর মধ্যে ব্যবহৃত ইভেন্ট গুলোর রেফারেন্স; DOM events এর ওয়েব স্ট্যান্ডার্ড এর জন্য দেখুন DOM event reference.
+
Gecko versions and application version
+
Gecko এর ভার্সন এবং তাদের ব্যবহারিত এপ্লিকেশনগুলো
+
Introduction to Layout in Mozilla
+
লেআউটের Tech Talk .
+
Embedding Mozilla
+
Gecko কে আপনার নিজস্ব এপ্লিকেশন হিসেবে ব্যবহার এর জন্য।
+
Character sets supported by Gecko
+
 Gecko এর সমর্থনে character sets.
+
HTML parser threading
+
 The HTML parser এর multithreading এর বর্ননা
+
{{interwiki('wikimo', 'Gecko:Home_Page', 'Gecko Home Page on MozillaWiki')}}
+
  Active developers এর জন্য হোম. Roadmaps এবং আরো  রিসোর্স।
+
+ +

সবগুলো দেখুন...

+ 		+

কমিউনিটি

+ +
    +
  • মজিলা ফোরাম দেখুন... {{DiscussionList("dev-tech-layout", "mozilla.dev.tech.layout")}}
    • +
+ + + +
+
ওয়েবের আদর্শ মানদণ্ড, XUL, মজিলাকে প্রকাশ, মজিলা উন্নয়ন
+
+
+ +

 

diff --git a/files/bn/mozilla/index.html b/files/bn/mozilla/index.html new file mode 100644 index 0000000000..205568bf1d --- /dev/null +++ b/files/bn/mozilla/index.html @@ -0,0 +1,13 @@ +--- +title: মজিলা +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/bn/mozilla/localization/index.html b/files/bn/mozilla/localization/index.html new file mode 100644 index 0000000000..73cded6c42 --- /dev/null +++ b/files/bn/mozilla/localization/index.html @@ -0,0 +1,17 @@ +--- +title: Localization at Mozilla +slug: Mozilla/Localization +translation_of: Mozilla/Localization +--- +

In progress. Localization (L10n) is the process of translating software user interfaces from one language to another and adapting it to suit a foreign culture. These resources are for anyone with an interest in the technical aspects involved in localization. They are for developers and all contributors.

+ +

See also

+ +
+
Localizing MDN
+
This resource covers localization of the documentation here on MDN.
+
App localization
+
This set of documents applies more specifically to localizing apps, including Firefox OS apps.
+
L10n
+
Reference docs for the L10n API that Mozilla uses to localise Firefox OS.
+
diff --git a/files/bn/mozilla/localization/l10n_style_guide/index.html b/files/bn/mozilla/localization/l10n_style_guide/index.html new file mode 100644 index 0000000000..f586ff2a60 --- /dev/null +++ b/files/bn/mozilla/localization/l10n_style_guide/index.html @@ -0,0 +1,115 @@ +--- +title: Mozilla L10n স্টাইল গাইড +slug: Mozilla/Localization/L10n_Style_Guide +translation_of: Mozilla/Localization/L10n_Style_Guide +--- +

{{draft}}

+ +

অর্থ ভিত্তিক অনুবাদ

+ +
When it comes to translation, meaning is everything. We encourage you to consider the source text's meaning and find its most closely linked equal in your own language. Avoid literal translation at all costs. Finding meaning-based equivalents between languages can be difficult. To help concentrate your thoughts, ask yourself questions like:
+ + + +

ব্যবহার

+ +
    The target audience and their relationship with the Mozilla product determines a translation's usage. A determined translation usage is often maintained throughout a product localization, and even across various products within a single category.
+ + + +

Brevity

+ +
    Space is limited in product user interfaces. There may be specific space limitations for each string. Pay close attention to where the string is being used within the product you are localizing. When selecting an accurate translation, keep in mind that your translation should be brief while still maintaining the original meaning.
+ +
 
+ +

অনুবাদযোগ্য বনাম অনুবাদের জন্যে নহে

+ +
+
        Access Keys
+
+ +
+
            Access keys allow a computer to immediately jump to a particular part in a web page by combining keystrokes. They can be adapted to suit your language by selecting a single character to be used in the combined keystroke. Access keys have their own lines within .dtd and .properties files and are identified by being named ".accesskey" in the line.
+
+ +
+
        Variables
+
+ +
+
            Variables should never be translated. You can recognize a variable within a string by its beginning with a specific character (e.g., $, #, %, etc.) followed by a combination of words without spacing. For example, $BrandShortName and %S are variables.  You can move a variable around within a string, if the translation of the string requires it.
+
+ +
+
        Brands and Products
+
+ +
+
            Brand and product names should never be translated, nor transliterated into a non-Latin based script.
+
+ +
+
        Copyright/Trademark
+
+ +
+
            Copyrights and trademarks should never be translated.
+
+ +
+
        Code
+
+ +
+
            Lines of code do not require translation. You will recognize a line of code by its use of angled and curly brackets. Anything contained within these brackets should not be translated. For example, {moz:domain}+{searchTerms} or <a target='_' href='https://developer.mozilla.org/docs/Tools/Debugger#Remote_Debugging'> should not be translated.  However, if there is a localized equivalent content, change the URL to point to the target language site/page.
+
+ +
+
        Blank/Empty Strings
+
+ +
+
            Blank or empty strings are pieces of constructed UI that are available for localized text that needs to trail UI elements. This is a common need for RTL languages. The localization comments for these strings will describe the reason for the empty string and what localizers should do with it.
+
+ +
+
        Trailing Whitespace
+
+ +
+
            Trailing whitespace often indicates a break between two strings that will be brought together at runtime. Generally speaking this is a poor development practice, however, there are exceptions that permit developers to generate strings this way. When translating strings with trailing whitespaces before or after a string's text, seek to identify the corresponding string to learn how to appropriately translate the content. If you are unsure where the corresponding string is, ask around in the mozilla.dev.l10n newsgroup or file a bug in the appropriate product.           
+
Keyboard shortcuts
+
Lorem ipsum https://developer.mozilla.org/en-US/docs/XUL_Accesskey_FAQ_and_Policies
+
+ +

Terminology

+ +

        Translating difficult concepts

+ +
            Translating terms representing difficult concepts is a tricky task. Here are some ideas to help you translate terms that do not have equivalents in your language:
+ +
    +
  1. Understand the meaning of the term in English.
    2. +
  2. Understand the function of the feature.
    3. +
  3. Consider similar ideas for those functions in your culture.
    4. +
  4. Associate a culturally specific image with the meaning and function of the term.
    5. +
+ +
 
+ +

        Consistency across products & modules

+ +
            Consistency in terminology use is supremely important as you translate terms and sentences that have the same meaning and application throughout the product. Once you have decided on a term for a given function (for example, the term "tab"), register it in a glossary for future use in other areas of the product.
+ +
 
+ +
Next: Mozilla content in your language
diff --git a/files/bn/mozilla/mobile/index.html b/files/bn/mozilla/mobile/index.html new file mode 100644 index 0000000000..1768909f32 --- /dev/null +++ b/files/bn/mozilla/mobile/index.html @@ -0,0 +1,26 @@ +--- +title: মোবাইল +slug: Mozilla/Mobile +tags: + - HTML + - HTTP + - JavaScript + - Mobile + - Mozilla + - NeedsReview + - এইচটিএমএল + - এইচটিটিপি + - জাভাস্ক্রিপ্ট + - মজিলা + - মোবাইল +translation_of: Mozilla/Mobile +--- +

ফায়ারফক্স ওএস

+

ফায়ারফক্স ও এস হচ্ছে একটি ওপেন সোর্স অপারেটিং সিস্টেম যেটা লিনাক্স এবং মজিলার Gecko ইঞ্জিন ব্যবহার করে একটি ইউজার ইন্টারফেস চালানোর জন্য এবং সকল অ্যাপলিকিশন লেখা হয় সম্পূর্ণভাবে  HTML, CSS and JavaScript দিয়ে।

+

কিভাবে ফায়ারফক্স ওএস ইন্সটল করতে হয় এবং এর জন্য অ্যাপ তৈরি করতে হয় এই বিষয়ে পড়ুন।

+

অ্যান্ড্রয়েড এর জন্য ফায়ারফক্স

+

অ্যান্ড্রয়েড এর জন্য ফায়ারফক্স হচ্ছে মজিলার মোবাইল ওয়েব ব্রাউজার যা অ্যান্ড্রয়েড মোবাইল এর জন্য। এর জন্য সাম্প্রতিকভাবে অ্যান্ড্রয়েড এর নেটিভ UI তে ব্যবহার পুনর্লিখিত হয়েছে. যার ফলে এটি আরও দ্রুততর, লিনিয়ার এবং আরো প্রতিক্রিয়াশীল হয়ে উঠেছে। এটা আরও শক্তিশালী API গুলি ব্যবহার করে  ডিভাইস ক্ষমতা অ্যাক্সেস করার জন্য যেমন ক্যামেরা এবং টেলিফোনি স্ট্যাক এর জন্য সমর্থন করে।

+

অ্যান্ড্রয়েড এর জন্য ফায়ারফক্স তৈরি করতে কিভাবে সাহায্য করতে হবে, কিভাবে ডিভাইস API গুলি ব্যবহার করতে হবে এবং মোবাইল এড-অন কিভাবে তৈরি করতে হবে এই বিষয়ে পড়ুন।

+

মোবাইল ওয়েব ডেভেলপমেন্ট

+

মোবাইল ডিভাইস ডেস্কটপ বা ল্যাপটপ কম্পিউটার থেকে খুব আলাদা হার্ডওয়্যার বৈশিষ্ট্য থাকে, এবং তাদের সঙ্গে কাজ করার জন্য ব্যবহার করা API গুলি  অনেক প্রমিত হচ্ছে প্রক্রিয়ার মধ্যে রয়ে গেছে।

+

কিভাবে মোবাইল এর মধ্যে দেখতে ভাল লাগে আমন ওয়েবসাইট ডেভেলপ করা যায় এবং তারা যেগুলো নতুন সম্ভাবনার সুযোগ দেয় সেগুলো গ্রহন করা বিষয়ে পড়ুন। আপনার ওয়েব সাইটে বিভিন্ন ব্রাউজার ভাল কাজ করে এটা কীভাবে নিশ্চিত  করবেন সেটা শিখুন।

diff --git a/files/bn/mozilla/persona/browser_compatibility/index.html b/files/bn/mozilla/persona/browser_compatibility/index.html new file mode 100644 index 0000000000..fdc6a4f521 --- /dev/null +++ b/files/bn/mozilla/persona/browser_compatibility/index.html @@ -0,0 +1,86 @@ +--- +title: যে ব্রাউজার গুলোকে সাপোর্ট করে +slug: Mozilla/Persona/Browser_compatibility +translation_of: Archive/Mozilla/Persona/Browser_compatibility +--- +

যে ব্রাউজার গুলোকে সাপোর্ট করে

+

পারসোনা তৈরি করে টেস্ট করা হয়েছে এবং তা নিচের ব্রাউজার গুলোকে সাপোর্ট করে। পারসোনা ব্যবহার এর জন্য কোন এডস্-অন এর প্রয়োজন নেই, এজন্য পারসোনার অন্যতম প্লাটফর্ম জাভাস্ক্রিপ্ট লাইব্রেরিকে ধন্যবাদ।

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ডেক্সটপ ব্রাউজার
ইন্টারনেট এক্সপ্লোরার৮.০*, ৯.০†, ১০.০** ( নিচের কম্প্যাটিবিলিটি মোড দেখুন)
ফায়ারফক্সCurrent Stable, Beta, Aurora, Nightly, and Extended Support Releases
+ Previous Stable Release
ক্রোমLatest Stable Release
সাফারিLatest Stable Release
অপেরাLatest Stable Release‡
আইওএস ব্রাউজার
মোবাইল সাফারিiOS 5.x — 6.x
অ্যানড্রইড ব্রাউজার
ডিফল্ট ব্রাউজার2.2 — 4.x
ফায়ারফক্সCurrent Stable, Beta, Aurora, and Nightly Releases
+ Previous Stable Release
ক্রোমLatest Stable Release
+

*: For Windows XP. †: For Windows Vista and Windows 7. **Windows 8.  ‡: As time allows

+

যে ব্রাউজার গুলোকে সাপোর্ট করেনা

+ +

ইন্টারনেট এক্সপ্লোরার "কম্প্যাটিবিলিটি মোড"

+

From version 8.0 onwards Internet Explorer supports a feature called Compatibility Mode, in which the browser may be instructed to emulate a pre-8.0 version when rendering a page. This feature may be controlled in three different ways

+
    +
  1. as a local setting in the browser
    2. +
  2. based on the presence and value of the DOCTYPE declaration in the page
    3. +
  3. as an instruction sent from the site, using the "X-UA-Compatible" header either as an HTTP header or as a <meta> tag in the page. This method overrides the other two.
    4. +
+

Because versions of Internet Explorer earlier than 8.0 are not supported by Persona, any version of Internet Explorer which is configured to emulate a pre-8.0 version will also not function with Persona. This is typically for one of the following reasons:

+ +

For more information, see "Understanding Compatibility Modes in Internet Explorer 8" and "IE8 and IE9 Complications".

+

অন্যান্য ব্রাউজার গুলো

+

Despite not being explicitly supported, any browser that includes both {{ domxref("window.postMessage()") }} and {{ domxref("Storage", "localStorage") }} should work. These APIs have been available in all major browsers since March 2010.

+

যেসব তথ্য জানা প্রয়োজন

+ diff --git a/files/bn/mozilla/persona/index.html b/files/bn/mozilla/persona/index.html new file mode 100644 index 0000000000..e73bea0e20 --- /dev/null +++ b/files/bn/mozilla/persona/index.html @@ -0,0 +1,176 @@ +--- +title: পারসোনা +slug: Mozilla/Persona +tags: + - NeedsReview +translation_of: Archive/Mozilla/Persona +--- +
সহজ, গোপনীয়তা-সংবেদনশীল একক সাইন ইন:  আপনার ব্যবহারকারীরা তাদের ইমেইল ঠিকানা দিয়ে আপনার ওয়েবসাইটে সাইন ইন করতে পারবে, এবং আপনি পাসওয়ার্ড ব্যাবস্থাপনা থেকে মুক্ত হবেন।
+ +
+

মজিলা পারসোনা ওয়েবের জন্য একটি ক্রস-ব্রাউজার লগইন পদ্ধতি যা ব্যবহার এবং স্থাপন করা সহজ। এটি সব প্রধান ব্রাউজারে কাজ করে এবং আপনি আজই শুরু করতে পারেন।

+ + +

কেন আপনি আপনার ওয়েবসাইটে পারসোনা ব্যবহার করবেন ?

+ +
    +
  1. পারসোনা পুরোপুরি সাইট-নির্দিষ্ট পাসওয়ার্ড পরিহার করে, এবং পাসওয়ার্ড তৈরি, পরিচালনা ও নিরাপদভাবে সংরক্ষণ বোঝা থেকে ব্যবহারকারী এবং ওয়েবসাইটকে মুক্ত করে।
    2. +
  2. পারসোনা ব্যাবহার করা সহজ। একাউন্ট তৈরির ঝামেলা কে বাদ দিয়ে, একজন পারসোনা ব্যাবহারকারী Voost এর মত নতুন সাইটে মাত্র দুই ক্লিকে একাউন্ট খুলতে পারে।
    3. +
  3. পারসোনা বাস্তবায়ন করা সহজ। ডেভেলপারগণ এক সন্ধ্যায় একটি সাইটে পারসোনা যোগ করতে পারেন।
    4. +
  4. লক-ইন এর কোন ব্যাপার নেই। ডেভেলপারগণ তাদের ব্যবহারকারীর একটি ভেরিফিকেশন করা ইমেইল ঠিকানা পান, এবং ব্যবহারকারী পারসোনাতে যে কোন ইমেইল ঠিকানা ব্যবহার করতে পারেন।
    5. +
+ +

Plus, Persona is only going to get better: it's built on an open, decentralized protocol that's designed to allow direct integration into browsers and native support by email providers. Sites that implement Persona today will automatically experience those improvements, without having to change any code.

+
+ +
+
+

আপনার সাইটে পারসোনা ব্যাবহার

+ + +
+

শুরু হোক

+ +
+
পারসোনাই কেন?
+
বিশেষ কিছু বিষয়ে পারসোনার সাথে অন্যদের তুলনা পরিচয় এবং পরিচয় প্রমাণ ব্যবস্থা।
+
দ্রুত সেটআপ
+
এখানে দেখবেন কীভাবে আপনি আপনার ওয়েবসাইট এ পারসোনা যোগ করবেন
+
+ +

API প্রসঙ্গে

+ +
+
The navigator.id API
+
ব্রাউজারের API.
+
সত্যতা যাচাই API প্রসঙ্গে
+
দুরথেকে যাচাই করা API.
+
+
+ +
+

গাইড

+ +
+
নিরাপত্তাজনিত বিবেচ্য বিষয়
+
অভ্যাস এবং কৌশল বিস্তৃতি আপনার পারসোনা'র  নিরাপদ নিশ্চিত করে।
+
ব্রাউজারের সামঞ্জস্যতা
+
সঠিকভাবে জানুন আপনার ব্রাউজার পারসোনা সমর্থন করে কিনা।
+
Internationalization
+
Learn how Persona handles different languages.
+
The implementor's guide
+
Tips from sites that have added support for Persona.
+
+
+ +
+

রিসোর্স

+ +
+
Libraries and plugins
+
Find a drop-in library for your favorite programming language, web framework, blog, or content management system.
+
The Persona cookbook
+
Example source code for Persona sites. Includes snippets in C# (MVC3), PHP, Node.JS, and more.
+
User interface guidelines
+
How to present Persona sign-in to your users.
+
+
+
+ +
+

পরিচয় দাতা হওয়া 

+ +

আপনি যদি কোনো ই-মেইল সেবাদাতা হন অথবা অন্য কোনো পরিচয় প্রদাতা  হন তবে নিচের লিংকগুলি দেখুন পার্সনা পরিচয়্দাতা হবার প্রসঙ্গে :

+ +
+
+
+
IdP Overview
+
A high level view of Persona Identity Providers.
+
+
+ +
+
+
Implementing an IdP
+
A detailed guide to the technical details of becoming an IdP.
+
+
+ +
+
+
.well-known/browserid
+
An overview of the .well-known/browserid file, which IdPs use to advertise support for the protocol.
+
+
+
+ +
+

পারসোনা প্রজেক্ট

+ +
+
+
+
গ্লোসারি
+
BrowserID and Persona terminology defined.
+
স.জি.প্র.
+
Answers to common questions.
+
 প্রটোকলের বিবরণ
+
A mid-level technical overview of the underlying BrowserID protocol.
+
+
+ +
+
+
ক্রিপ্টো
+
A look at the cryptographic concepts behind Persona and BrowserID.
+
স্পেক
+
Deep technical details live here.
+
+
+ +
+
+
পারসোনা ওয়েবসাইট
+
To get Persona going, we're hosting three services at https://login.persona.org: a fallback Identity Provider, an implementation of the {{domxref("navigator.id")}} APIs, and a verification service.
+
পারসোনা সোর্স কোড
+
The code for Persona is on GitHub. Pull requests welcome!
+
+
+
+ + + +
    +
  1. Using Persona on a website + +
      +
    1. Why should you use Persona?
      2. +
    2. Get started
      3. +
    3. Tips for implementing Persona
      4. +
    4. Security considerations
      5. +
    5. Browser compatibility
      6. +
    6. Internationalization
      7. +
    7. The navigator.id API
      8. +
    8. The remote verification API
      9. +
    9. Libraries and plugins
      10. +
    10. User interface guidelines
      11. +
    +
    2. +
  2. Becoming an Identity Provider +
      +
    1. IdP Overview
      2. +
    2. Implementing an IdP
      3. +
    3. .well-known-browserid format
      4. +
    +
    3. +
  3. The Persona project +
      +
    1. Glossary
      2. +
    2. FAQ
      3. +
    3. Persona hosted services
      4. +
    4. Protocol overview
      5. +
    5. Cryptography
      6. +
    +
    4. +
diff --git "a/files/bn/mozilla/persona/\340\246\206\340\246\250\340\247\215\340\246\244\340\246\260\340\247\215\340\246\234\340\246\276\340\246\244\340\246\277\340\246\225\340\246\276\340\246\257\340\246\274\340\246\250/index.html" "b/files/bn/mozilla/persona/\340\246\206\340\246\250\340\247\215\340\246\244\340\246\260\340\247\215\340\246\234\340\246\276\340\246\244\340\246\277\340\246\225\340\246\276\340\246\257\340\246\274\340\246\250/index.html" new file mode 100644 index 0000000000..773d93a737 --- /dev/null +++ "b/files/bn/mozilla/persona/\340\246\206\340\246\250\340\247\215\340\246\244\340\246\260\340\247\215\340\246\234\340\246\276\340\246\244\340\246\277\340\246\225\340\246\276\340\246\257\340\246\274\340\246\250/index.html" @@ -0,0 +1,60 @@ +--- +title: আন্তর্জাতিকায়ন +slug: Mozilla/Persona/আন্তর্জাতিকায়ন +translation_of: Archive/Mozilla/Persona/Internationalization +--- +

পারসোনাতে স্থানিয়করন কি

+ +

ভবিষ্যতে ব্যাবহারকারিদের পারসোনার মাধ্যমে বিভিন্ন সাইটে সাইন-ইনের ইন্টারফেস সরাসরি ব্রাউজারের অন্তর্গত থাকবে, এবং এইভাবেই ব্রাউজারের মাধ্যমে সাইটগুলোও স্থানীয়করন হয়ে যাবে। যেসব ব্রাউজারে পারসোনা অন্তর্গত থাকবে না, সেসব ব্রাউজারে login.persona.org এই লিঙ্কটি চলে আসবে। এই উক্তিগুলো অনুবাদ করেছে কমিউনিটি স্বেচ্ছাসেবকদের একটি দল, এবং ৪৫ এর বেশি স্থানীয় বর্তমান এখানে কর্মরত আছেন।

+ +

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.

+ +

আপনি যেভাবে সাহায্য করতে পারেন

+ +

পারসোনা নতুন অনুবাদে স্বেচ্ছাসেবকদের সাহায্য করতে Mozilla Verbatim ব্যবহার করে। যদি আপনি সাহায্য করতে চান তাহলে getting started with Verbatim পড়ুন এবং Verbatim এ  "BrowserID" project দেখুন।

+ +

 

diff --git a/files/bn/mozilla/projects/index.html b/files/bn/mozilla/projects/index.html new file mode 100644 index 0000000000..d7e62c6882 --- /dev/null +++ b/files/bn/mozilla/projects/index.html @@ -0,0 +1,15 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Landing + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +

Here you'll find links to documentation about various Mozilla projects; these are often parts of Firefox or other products, but may also be used in other projects as well.

+ +

{{ LandingPageListSubpages() }}

diff --git a/files/bn/mozilla/qa/index.html b/files/bn/mozilla/qa/index.html new file mode 100644 index 0000000000..5c51e735a3 --- /dev/null +++ b/files/bn/mozilla/qa/index.html @@ -0,0 +1,232 @@ +--- +title: 'QA: মোজিলায় মান নিশ্চিতকরণ' +slug: Mozilla/QA +tags: + - Bugzilla + - NeedsTranslation + - QA + - Testing +translation_of: Mozilla/QA +--- +

মজিলা কোয়ালিটি অ্যাসুরেন্স (QA) টিম মজিলার তৈরি করা সফটওয়্যার এর মান নিশ্চিতকরণ এর কাজ করে থাকে এবং বিভিন্ন ধরনের সফটওয়্যার সময়মত রিলিজের জন্য গুরুত্বপূর্ণ ভূমিকা পালন করে। মজিলার প্রত্যেকটি প্রজেক্টের ভিতরে, আমরা নতুন ফিচার পরীক্ষা করার জন্য কাজ করি, বিভিন্ন প্রকার ত্রুটি খুঁজে বের করি, এবং তা সমাধান করার জন্য রিপোর্ট করি, বিভিন্ন ধরনের টূল বিল্ড করি এবং তা রক্ষণাবেক্ষণ করি, তথ্য সংগ্রহ এবং পর্যালোচনা করি, এবং উন্মুক্ত ওয়েবকে সমর্থনকারী, আন্তর্জাতিক মান সম্পন্ন পন্যের রিলিজে সহায়তা প্রদান করি।

+ +

QA টিমে যোগ দিয়ে ফায়ারফক্স টেস্ট করার এবং প্রত্যেকটি রিলিজ যথেষ্ট মান সম্পন্ন করার জন্য এখানে আপনি সহায়ক নিবন্ধ ও টুলস পাবেন।

+ +

শুরু করা

+ + + +

বাগ/ত্রুটি

+ +
+
+

বাগ রিপোর্ট করা

+ +
+
বাগজিলা
+
সকল মজিলা প্রোজেক্ট বাগ ট্র্যাক করার জন্য বাগজিলা ব্যবহার করে। বাগ রিপোর্ট ও ট্রায়াজ করতে বাগজিলায় একটি নতুন অ্যাকাউন্ট তৈরী করতে হবে।
+
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.
+
একটি বাগের জীবন চক্র
+
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.
+
+
+
+ +
+

Test cases

+ +
+
+
+
Test Case Writing Primer
+
How to write proper test cases
+
+
+ +
+
+
MozTrap
+
Mozilla QA's test cases reside in MozTrap, an in-house tool. You will need a Persona ID in order to login and execute test cases. Learn how to work with MozTrap Documentation.
+
+
+
+ +
+

Test automation

+ +
+
+
+
Automated testing at Mozilla
+
Documentation about creating and using automated tests for Mozilla code.
+
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.
+
+
+ +
+
+
Robocop
+
Robocop is the automated testing system used for Firefox for Android. Learn its code style guidelines
+
Mozmill
+
Get started with Mozmill
+
+
+
+
+ +
+

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

View all documents tagged QA

+ +

View all documents tagged QA:Tools

diff --git a/files/bn/mozilla/qa/organizing_a_testday/index.html b/files/bn/mozilla/qa/organizing_a_testday/index.html new file mode 100644 index 0000000000..d1cbff80a5 --- /dev/null +++ b/files/bn/mozilla/qa/organizing_a_testday/index.html @@ -0,0 +1,202 @@ +--- +title: একটি Testday আয়োজন +slug: Mozilla/QA/Organizing_a_Testday +translation_of: Mozilla/QA/Organizing_a_Testday +--- +

Please remember that the following is only a rough guideline. The more effort you put into preparing your testday, the more likely it is to be successful. Give yourself, and the community, ample time to prepare for the event. Above all else, experiment and have fun with your test day.

+ +

Planning Your Event

+ +
The following should be done no later than one week before your event:
+ +
 
+ +
    +
  1. Once you have a topic in mind, pick a day to schedule your event — check the calendar on QMO for availaility
    2. +
  2. Create a test plan to define success criteria, declare a designated spot for signups for mentors, set a schedule (e.g, past event test-plan)
    3. +
  3. Publicize and post the event on QMO (if need be, ask QA staff in IRC for assistance) — a valuable post must contain a request for mentorship sign-up and links to available documentation (e.g, see past event notice)
    4. +
  4. Broadcast your event — Follow our suggested communication list below to help broadcast and publicize the event
    5. +
  5. Enlist mentors to help facilitate and educate throughout the event — gather contact information to ensure that they're able to attend  during the event
    6. +
+ +

The Day Of

+ +
    +
  1. Make sure the IRC channel topic is updated to point people to your test plan
    2. +
  2. Be proactive in greeting people and removing barriers for them to contribute - ask questions and engage with people who join the channel
    3. +
  3. Recommend sign-up to dev-quality and mozillians to attendees for future event notice
    4. +
  4. Provide a feedback survey to participants, clone or copy this example document
    5. +
+ +

After the Event

+ +
    +
  1. Provide a followup post in your communication channels thanking those who attended
    2. +
  2. Plan a future event
    3. +
+ +

Tips for Success

+ +
The following is a list of tips which will hopefully make your event more successful.
+ +
 
+ + + +

Communication Channels

+ +

The following is a list of the various communication channels we should use to advertise. Choose as many or as few as you see fit.

+ +
Mailing Lists
+ + + +
Social Networks
+ + + +
Forums
+ + + +
Meeting Pages
+ + + +
Other Websites
+ + + +
+

Moderators

+ +

The following are some tips for moderators to make the testday a success.

+ + + +

Contributors

+ +

The following are some tips for contributors to make the testday a success.

+ + + +
+

Original document information

+ + +
+ +
+

QMO Event Page

+ +

The week before a testday we need to create a QMO event page.

+ + + +

This is an example of an excellent QMO Event page. Before posting make sure you:

+ + + +

QMO Blog Post

+ +

The day before the testday, simply create a post which reminds people that a testday is happening tomorrow.

+ + + +

This is a good example of a QMO Event Reminder. Your post should be syndicated to Planet within 30 minutes to an hour.

+ +

QMO Results Post

+ +

The day after a testday, create another post which highlights the results.

+ + + +

This is a good example of a QMO Results Post. Your post should be syndicated to Planet within 30 minutes to an hour.  

+ +
+

Original document information

+ + +
+ +

 

diff --git a/files/bn/mozilla/qa/running_web_qa_automated_tests/index.html b/files/bn/mozilla/qa/running_web_qa_automated_tests/index.html new file mode 100644 index 0000000000..41d0223852 --- /dev/null +++ b/files/bn/mozilla/qa/running_web_qa_automated_tests/index.html @@ -0,0 +1,147 @@ +--- +title: Web QA স্বয়ংক্রিয় পরীক্ষা চালানো +slug: Mozilla/QA/Running_Web_QA_automated_tests +translation_of: Mozilla/QA/Running_Web_QA_automated_tests +--- +
+

আপনি  Web QA পরীক্ষা চালাতে চান , কিন্তু জানেন না কোথা থেকে শুরু করতে হবে ? This doc will help you get up and running a set of tests locally.

+ +

We have a separate project for each web site that we test, so the first step is to choose a project. You can look at the list of our automation projects, or you could simply use the Addon-Tests project to start. Once you’ve decided which project you’d like to work on, follow this guide to run the existing tests.

+ +

You should join us on IRC at http://irc.mozilla.org, #mozwebqa and #qa. You can say hello there, and get help if you get stuck on these instructions.

+ +

All of our projects use Selenium/WebDriver and a fairly similar set of software requirements. However some projects may have specific requirements. If the any of these steps does not work as expected you may want to check out the README file in the project’s root to see if there’s anything special needed.

+ +

All of the following commands are performed from a terminal window (Linux/Mac) or shell (Windows).

+ +

Step 1: Install required software

+ +

In order to run and work on our tests you need both Git and Python installed. You will also needpip, which is a package manager for Python.

+ +

Excellent instructions for installing Git on all platforms can be found at Github.

+ +

Python can be downloaded from here. Select the appropriate version for your platform and run the installer, we recommend the highest version 2 package that is available.

+ +

You can verify that Python has been successfully installed by running the following command:

+ +
python --version
+ +

Windows only:
+ After installing Python, install SetupTools from here. Once that is done you’ll need to add the Python folder (e.g., C:\Python26) and the Python scripts folder (e.g., C:\Python26\Scripts) into your path via System Variables: System Properties->Environment Variables->System Variables-> Path.

+ +

Linux only:
+ If you are running on Ubuntu/Debian, after installing Python, install SetupTools via

+ +
sudo apt-get install python-setuptools
+ +

After Python is successfully installed, install pip by running the following command:

+ +
easy_install pip
+ +

You now have all of the software required to run Web QA tests!

+ +

Step 2: Clone the project

+ +

If you want to make any changes to tests, or add your own tests, you’ll need to fork the repository (repo) first, to obtain your own copy. To do this simply visit the repo page for one of the automation projects, and click the fork button which you’ll find near the upper right-hand corner of the page:
+ Screen Shot 2013-10-18 at 11.26.33 AM

+ +

You can then clone the repo (which means to create a working copy of all the code locally) to your machine. Switch to the folder on your machine in which you’d like to store the project, and issue the following command:

+ +
git clone --recursive git@github.com:[your username]/[project].git
+ +

For example:

+ +
git clone --recursive git@github.com:bobsilverberg/Addon-Tests.git
+ +

Pro tip: You can find the url to use to clone the project via the project’s Github page. Look for this area on the right-hand side of the page, and click on the little clipboard icon to copy the url to your clipboard:
+ Screen Shot 2013-10-18 at 11.29.15 AM If you don’t already have an SSH key set up to work with github, try clicking “https”, then copy the url for the repo to use in your git clone command.

+ +

Step 3: Install required Python packages

+ +

Each project has its own requirements.txt which lists Python packages needed for running the tests.
+ Install them using:

+ +
pip install -Ur requirements.txt
+ +

[Optional/Intermediate level]
+ While most of us have had some experience using virtual machines, virtualenv is something else entirely. It’s used to keep libraries that you install from clashing and messing up your local environment. After installing virtualenv, installing virtualenvwrapper will give you some nice commands to use with virtualenv.

+ +

For a more detailed discussion of virtualenv and virtualenvwrapper, check out our quickstart guide and also this blog post.

+ +

Step 4: Create a credentials file

+ +

Most of our projects include tests that need to log in to the web site. In order to do this we store the credentials for the site in a file called credentials.yaml. You can find a sample credentials.yaml file in the root of the project. In order to run tests that need to log in, you will need to update this file with some valid credentials. First you’ll need a username and password for the site in question, which you can generally obtain by registering for the site, then you can add that information to the credentials file on your machine.

+ +

If you do not see a sample credentials.yaml file in the root of the project then you can skip this step!

+ +

Pro tip: If you do not want Git to think that your credentials.yaml file has changed from the one in the project repo, create a new copy of the file in a different location and then point to it from the command line. For example, you can create a file in your home folder called “amo_credentials.yaml” and then point to that.

+ +

Step 5: Choose an execution environment

+ +

Most of the web sites we test have multiple environments, so before running the tests you need to choose where you want them to run. In general, a project will have one or more of the following environments available:

+ + + +

Pro tip: There is a file in the root of each project, called “mozwebqa.cfg” that contains some defaults for running the tests. It usually specifies a default environment for the tests using the “baseurl” setting. For example, mozwebqa.cfg in the addon-tests project contains the line:

+ +
baseurl = https://addons-dev.allizom.org
+ +

Step 6: Run the tests!

+ +

Once you have all the above in place, you are ready to start running some tests locally. Let’s give it a try: open a console and make sure you’re in the project’s directory.

+ +

To run all the tests:

+ +
py.test --driver=firefox
+ +

To run all the tests with a credentials file:

+ +
py.test --driver=firefox --credentials=/path/to/credentials.yaml
+ +

To run all of the tests in one file:

+ +
py.test --driver=firefox tests/test_file.py
+ +

To run one test in a file:

+ +
py.test --driver=firefox tests/test_file.py -k name_of_test_to_run
+ +

To run tests on an environment other than the default, specify the “–baseurl” option:

+ +
py.test --driver=firefox --baseurl=https://addons.allizom.org
+ +

If you are running tests on the development or staging environments and was to run tests that change data (hint: you ususally do), you will need to also specify the “–destructive” command line option. For example:

+ +
py.test --driver=firefox --baseurl=https://addons.allizom.org --destructive
+ +

The pytest-mozwebqa plugin has advanced command line options for reporting and using browsers. To see the options available, try running:

+ +
py.test --help
+ +

Also see the documentation on the plugin’s project page.

+ +

[Optional/Intermediate level]
+ A Selenium Grid can be used to run and Webdriver tests across many different browsers. The Web QA team also has a project which holds a Selenium Grid configuration for Windows and Mac OS.

+ +

Follow our quick start guide to get Selenium Grid up and running.

+ +

Now you’re ready to contribute!

+ +

If you’d like to learn more, the next post in this series is on Automated Tests: Analyzing Results.

+ +

Step 7: Get the Badge!

+ +

Once you have completed the steps above, you are eligible for the new Web QA badge! You can see the badge here:

+ +

https://badges.mozilla.org/en-US/badges/badge/Running–Web-QA-Automation

+ +

Log in using Persona to nominate yourself, or someone else who has Web QA tests up and running. Make sure to include your GitHub username or email in your profile. Congratulations!

+ +
 
+
+ +

 

diff --git a/files/bn/mozilla/tech/index.html b/files/bn/mozilla/tech/index.html new file mode 100644 index 0000000000..60c11a8f2b --- /dev/null +++ b/files/bn/mozilla/tech/index.html @@ -0,0 +1,15 @@ +--- +title: মজিলা প্রযুক্তি +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/bn/mozilla/\340\246\241\340\247\207\340\246\255\340\246\262\340\246\252\340\246\276\340\246\260_\340\246\252\340\247\215\340\246\260\340\247\213\340\246\227\340\247\215\340\246\260\340\246\276\340\246\256/index.html" "b/files/bn/mozilla/\340\246\241\340\247\207\340\246\255\340\246\262\340\246\252\340\246\276\340\246\260_\340\246\252\340\247\215\340\246\260\340\247\213\340\246\227\340\247\215\340\246\260\340\246\276\340\246\256/index.html" new file mode 100644 index 0000000000..2e9754cc3f --- /dev/null +++ "b/files/bn/mozilla/\340\246\241\340\247\207\340\246\255\340\246\262\340\246\252\340\246\276\340\246\260_\340\246\252\340\247\215\340\246\260\340\247\213\340\246\227\340\247\215\340\246\260\340\246\276\340\246\256/index.html" @@ -0,0 +1,115 @@ +--- +title: মজিলা ডেভলপার প্রোগ্রাম +slug: Mozilla/ডেভলপার_প্রোগ্রাম +translation_of: Mozilla/Connect +--- +
+

Enable, inspire and collaborate to make the Web the primary platform used to create experiences across all connected devices.

+
+ + +
+
+
+
+

ডেভলপার প্রোগ্রামে

+ +

যোগ দিন!

+ +

সাইন আপ করুন ডেভলপার প্রোগ্রামের জন্য! এতে আপনি মেম্বারশীপ ছাড়াও আমাদের নিউজলেটারে সাবস্ক্রাইব করার সুযোগ পাবেন এবং বিভিন্ন সময়ে আমাদের প্রকাশিত বিভিন্ন ফিচারে প্রবেশ করতে পারবেন।

+ +

 

+ যোগ দিন বা লগ ইন করুন 
+
+ +
+
+

হ্যাকস্ ব্লগ

+ +

মুক্ত ওয়েব ডেভলপকারীদের জন্য সাহায্যের একটি মূল উৎস এটি। মজিলা হ্যাকস্ ব্লগ বিভিন্ন খবরাখবর এবং ওয়েব টেকনোলজি ও ব্রাউজার ফিচারের সর্বশেষ আলোচনা offer করে।

+ +

 

+ +

 

+ +

এখনই পড়ুন

+
+
+ +
+
+

 

+ +

সাহায্য Q&A

+ +

Stack Overflowতে ওয়েব এবং বিভিন্ন ওয়েব অ্যাপ সম্পর্কিত আলোচনায় অংশ নিন। এখানে আপনি অন্যান্য ওয়েব ডেভলপারদের সাথেও মত বিনিময় করতে পারেন।

+ +
{{anch("ডেভলপার ডিসকাশনসমূহ ", " Q&A নিচে খুজুঁন")}}
+ +
 স্ট্যাক ওভারফ্লোতে মজিলা প্রস্ন ও উত্তর 
+ +
 
+
+
+
+ +
+

মজিলা ডেভলপার প্রোগ্রাম কী?

+ +

 

+ +

মজিলায় আমরা ডেভলপারে বিশ্বাস করি। মানসম্মত সেবা এবং সাধারণ মানুষের জন্য বিভিন্ন অ্যাপ তৈরির মাধ্যমে তারা ভবিষ্যৎ তৈরি করছে। মুক্ত এবং মানসম্মত ওয়েব টেকনোলজি ব্যবহারের সুযোগ করে দিয়ে তাদের তাতে সাহায্য করাই আমাদের লক্ষ্য। ডেভলপারদের সাহায্য করতে পেরে এবং দীর্ঘমেয়াদী সম্পর্ক ও বিভিন্ন চ্যানেল স্থাপনের মাধ্যমে আমরা তৈরি করতে পেরেছি মজিলা ডেভলপার প্রোগ্রাম (MDP)।

+ +

প্রাথমিকভাবে, আপনার নির্দিষ্ট কোন টেকনিক্যাল ইস্যু সমাধানে ও বিভিন্ন চ্যালেঞ্জ মোকাবেলায় স্ট্যাক ওভারফ্লোতে Q&Aর মাধ্যমে আমরা সাহায্য করে থাকি। ওয়েব সিনে ওয়েব অ্যাপ ও আরো অনেক কিছু নিয়ে সর্বশেষ ঘটনা সম্পর্কে আপনাকে অবগত রাখতে আমাদের একটি নিউজলেটারও আছে।

+ +

মজিলা ডেভলপার প্রোগ্রামকে ব্যাপক বিস্তৃতি দানের লক্ষ্যে আমাদের প্রচুর ধারণা এবং পরিকল্পনা আছে। আমরা চাই আপনিও এতে অংশ নিন আর আমরা সবাই মিলে এটি করি!তো, স্ট্যাক ওভারফ্লোর ট্যাগগুলো অনুসরণ করুন, হ্যাকস্ ব্লগে সাবস্ক্রাইব করুন, এবং সাইন আপ করুন!

+
+ +
+
+

স্ট্যাক ওভারফ্লোতে Q&A  সকল  প্রস্ন ও উত্তর দেখুন...

+ +

ডেভলপ করার সময় বিভিন্ন চ্যালেঞ্জ এবং ইস্যু আলোচনার জন্য বিশেষ করে ফায়ারফক্স OS এবং মোবাইল ফোনে মুক্ত ওয়েবের জন্য আমাদের আছে Q&A। স্ট্যাক ওভাকফ্লোর এই URL http://stackoverflow.com/r/mozillaএ আপনি পর্যাপ্ত সাহায্য পাবেন।

+ + +
স্ট্যাক ফরম
+ +

সর্বশেষ প্রস্ন ও উত্তর বিষয়বস্তু

+
+ +
 
+
+ +

Developers at a Firefox OS workshop in Madrid.

+ +
+
+

মজিলা কোথায়?

+ +

আমাদের ইভেন্ট পেইজে বিস্তারিত দেখুন...

+ +

একটি ইভেন্টে আপনার উদ্দেশ্যে যেসব মজিলা রিপ্রেসেন্টেটিভরা কথা বলেন তাদের একটি তালিকা আছে এখানে। তাদের সাথে কথা বলে নিশ্ঢিত হন!

+
+ +
+

অন্য রিসোর্স

+ + +
+
+
+ +

 

diff --git "a/files/bn/mozilla/\340\246\253\340\246\276\340\246\257\340\246\274\340\246\276\340\246\260\340\246\253\340\246\225\340\247\215\340\246\270/index.html" "b/files/bn/mozilla/\340\246\253\340\246\276\340\246\257\340\246\274\340\246\276\340\246\260\340\246\253\340\246\225\340\247\215\340\246\270/index.html" new file mode 100644 index 0000000000..de6c68bbec --- /dev/null +++ "b/files/bn/mozilla/\340\246\253\340\246\276\340\246\257\340\246\274\340\246\276\340\246\260\340\246\253\340\246\225\340\247\215\340\246\270/index.html" @@ -0,0 +1,59 @@ +--- +title: ফায়ারফক্স +slug: Mozilla/ফায়ারফক্স +tags: + - ফায়ারফক্স +translation_of: Mozilla/Firefox +--- +
{{FirefoxSidebar}}
+ +

ফায়ারফক্স হচ্ছে মোজিলা'র  বহুল পরিচিত ওয়েব ব্রাউজার এপ্লিকেশন, যা উইন্ডোজ, ম্যাক OS এক্স, এবং লিনাক্স এর মতো বিভিন্ন প্ল্যাটফরম, এছাড়াও এনড্রোয়েড মোবাইল এ ও রয়েছে । যার সাথে রয়েছে সর্বাধুনিক ওয়েব প্রযুক্তি এবং শক্তিশালী ডেভেলপার টুল । ওয়েব ডেভলপার এবং সাধারণ ব্যবহারকারীদের জন্য ফায়ারফক্স হচ্ছে একটি উৎকৃষ্ট ব্রাউজার।

+ +

ফায়ারফক্স একটি ওপেন সোর্স প্রোজেক্ট,  কোড এর অনেক কিছুই আমাদের স্বেচ্ছাসেবক সংগঠন এর মাধ্যমে  তৈরি। এখানে আপনি ফায়ারফক্স প্রোজেক্ট এ কিভাবে সাহায্য করতে হয় তা শিখতে পারবেন, কিন্তু আপনি ফায়ারফক্স ডেভলপার টুল ব্যাবহার করে ফায়ারফক্স অ্যাড-অন তৈরির ডকুমেন্টেশন লিঙ্ক  খুজে পাবেন।

+ +
+

কিভাবে ফায়ারফক্স OS এ অ্যাড-অন তৈরি করতে হয় শিখুন, কিভাবে ফায়ারফক্স ডেভলপ এবং তৈরি করা যায়, এবং কিভাবে ফায়ারফক্স এর অভ্যন্তরীণ সাবপ্রজেক্ট গুলো কাজ করে তা জানুন।

+
+ + + +

ফায়ারফক্স চ্যানেল

+ +

ফায়ারফক্স চারটি চ্যানেলেপাওয়া যায়।

+ +

ফায়ারফক্স নাইটলি

+ +

প্রতি রাতেমজিলা-সেন্ট্রাল থেকে ফায়ারফক্স নাইটলি বিল্ড করি। এই বিল্ড গুলো ফায়ারফক্স ডেভেলপারদের জন্য অথবা যারা সক্রিয় ডেভেলপমেন্ট এর মধ্যে থাকা সর্বশেষ আকর্ষণীয় ফিচার ব্যবহার করতে চায়।

+ +

ফায়ারফক্স নাইটলি ডাউনলোড

+ +

ফায়ারফক্স ডেভেলপার এডিশন

+ +

ফায়ারফক্সের এই সংস্করণ ডেভেলপারদের জন্য বিশেষভাবে তৈরি করা হয়েছে। প্রতি ৬ সপ্তাহ পর পর ফায়ারফক্স নাইটলিতে থাকা মোটামুটি স্ট্যাবল ফিচার ডেভেলপার এডিশনে যুক্ত করে রিলিজ দেয়া হয়। এছাড়াও শুধু ডেভেলপারদের প্রয়োজন হবে, এমন কিছু অতিরিক্ত ফিচারও আমরা এতে যুক্ত করে থাকি।

+ +

ফায়ারফক্স ডেভেলপার এডিশন সম্পর্কে আরও জানুন

+ +

ফায়ারফক্স ডেভেলপার সংস্করণ ডাউনলোড

+ +

ফায়ারফক্স বেটা

+ +

ফায়ারফক্স ডেভেলপার এডিশনে ছয় সপ্তাহ থাকার পর, যেসব ফিচার মোটামুটি স্ট্যাবল, আমরা তা নিয়ে ফায়ারফক্স বেটার একটি নতুন সংস্করণ তৈরি করি। ফায়ারফক্স বেটা মজিলার ভলান্টিয়ারদের টেস্ট করার জন্য রিলিজ দেয়া হয় এবং এরপর ফায়ারফক্সের পুর্নাঙ্গ সংস্করণে অন্তরভুক্ত করার জন্য তৈরি করা হয়।

+ +

ফায়ারফক্স বেটা ডাউনলোড

+ +

ফায়ারফক্স

+ +

প্রায় দেড় মাস বেটা সংস্করণে থাকার পর, আমরা এখন নতুন ফিচার হাজার কোটি মানুষের কাছে ফায়ারফক্সের নতুন সংস্করণ পৌঁছে দিতে প্রস্তুত।

+ +

ফায়ারফক্স ডাউনলোড

diff --git "a/files/bn/mozilla/\340\246\253\340\246\276\340\246\257\340\246\274\340\246\276\340\246\260\340\246\253\340\246\225\340\247\215\340\246\270/\340\246\260\340\246\277\340\246\262\340\246\277\340\246\234\340\246\270/index.html" "b/files/bn/mozilla/\340\246\253\340\246\276\340\246\257\340\246\274\340\246\276\340\246\260\340\246\253\340\246\225\340\247\215\340\246\270/\340\246\260\340\246\277\340\246\262\340\246\277\340\246\234\340\246\270/index.html" new file mode 100644 index 0000000000..9027523416 --- /dev/null +++ "b/files/bn/mozilla/\340\246\253\340\246\276\340\246\257\340\246\274\340\246\276\340\246\260\340\246\253\340\246\225\340\247\215\340\246\270/\340\246\260\340\246\277\340\246\262\340\246\277\340\246\234\340\246\270/index.html" @@ -0,0 +1,10 @@ +--- +title: ফায়ারফক্স ডেভেলপার রিলিজ নোট্‌স +slug: Mozilla/ফায়ারফক্স/রিলিজস +tags: + - NeedsReview +translation_of: Mozilla/Firefox/Releases +--- +
{{FirefoxSidebar}}

"ফায়ারফক্স এক্স ডেভেলপারস" দেরকে ফায়ারফক্স এর প্রতিটি রিলিজ এর প্রতিবেদন এর লিঙ্ক দিচ্ছে এই পেজ। ফায়ারফক্স এর প্রতিটি ভার্শন এর সাথে কি কি ফিচার যোগ এবং ভুলগুলো মুছে ফেলা হয়েছে তা এই নোটস এর মাধ্যমে আপনি দেখতে পারবেন।

+ +
{{ListSubpages("",1,0,1)}}
diff --git a/files/bn/rhino/index.html b/files/bn/rhino/index.html new file mode 100644 index 0000000000..f9d51d9660 --- /dev/null +++ b/files/bn/rhino/index.html @@ -0,0 +1,16 @@ +--- +title: Rhino +slug: Rhino +tags: + - NeedsReview +translation_of: Mozilla/Projects/Rhino +--- +

Image:rhino.jpg

+

Rhino হল জাভায় সম্পূর্ণরূপে লিখিত জাভাস্ক্রিপ্ট এর একটি ওপেন-সোর্স বাস্তবায়ন। ব্যবহারকারীদের স্ক্রিপ্টিং করার জন্য সাধারণত জাভা অ্যাপ্লিকেশনের মধ্যে এমবেড করা হয়। ইহা আবশ্যক জাভা স্ক্রিপ্টিং ইঞ্জিন হিসেবে J2SE ৬ এ এমবেডেড করা হয়।

+

Rhino ডাউনলোড

+

সোর্স এবং বাইনারী কিভাবে পাবেন

+

Rhino ডকুমেন্টেশন

+

স্কিপ্ট লেখক এবং এমবেডেডকারীদের জন্য Rhino এর তথ্য.

+

Rhino সাহায্য

+

কিছু রিসোর্স যদি আপনি আটকে যান।

+

{{ languages( { "ja": "ja/Rhino" } ) }}

diff --git a/files/bn/tools/index.html b/files/bn/tools/index.html new file mode 100644 index 0000000000..de2b9c61ff --- /dev/null +++ b/files/bn/tools/index.html @@ -0,0 +1,187 @@ +--- +title: ফায়ারফক্স ডেভেলপার টুল +slug: Tools +tags: + - NeedsReview +translation_of: Tools +--- +
{{ToolsSidebar}}
+ +
ডেস্কটপ এবং মোবাইলে HTML, CSS এবং জাভাস্ক্রিপ্ট পরীক্ষা, সম্পাদন এবং ডিবাগ করুন
+ +
ফায়ারফক্স অরোরা ইন্সটল করুন + +

অরোরাতে নতুন কি আছে?

+ +

অরোরা হচ্ছে ফায়ারফক্সের প্রিভিউ বিল্ড, যেখানে আপনি যেকোনো নতুন ফিচার সর্বসাধারণের জন্য উন্মুক্ত করার আগেই ব্যবহারের সুযোগ পাবেন। বর্তমান অরোরাতে ডেভেলপার টুলসে নিচের আপডেট সমূহ রয়েছে:

+ + +
+ +
আপনার আইডিয়া শেয়ার করুন + +

আপনার আইডিয়া শেয়ার করুন

+ +

ডেভেলপার টুলসে নতুন ফিচারের জন্য অনুরোধ করুন অথবা অন্যান্য ডেভেলপারের আবেদন করা আইডিয়ার জন্য ভোট করুন।

+
+ +

+ +
+
+

তৈরি করা

+ +

ওয়েবসাইট এবং ওয়েব অ্যাপ এর জন্য অথরিং টুলস।

+ +
+
স্ক্র্যাচপ্যাড
+
ফায়ারফক্স এর ভেতরে একটি টেক্সট এডিটর দেয়া আছে যা আপনাকে জাভাস্ক্রিপ্ট লিখতে এবং এক্সিকিউট করতে দেয়।
+
স্টাইল এডিটর
+
বর্তমান পেজ এর CSS স্টাইল দেখুন এবং এডিট করুন।
+
শেডার এডিটর
+
WebGL এর ব্যবহার করা ফ্র্যাগমেন্ট শেডার সহ সবকিছু দেখুন এবং সম্পাদনা করুন
+
ওয়েব অডিও এডিটর
+
একটি অডিও কনটেক্সটে অডিও নোডের গ্রাফ পরীক্ষা করুন এবং তাদের প্যারামিটার পরিবর্তন করুন।
+
+
+ +
+

এক্সপ্লোর ও ডিবাগ করুন 

+ +

Examine, explore, and debug websites and web apps.

+ +
+
Web Console
+
See messages logged a web page, and interact with the page using JavaScript.
+
পেজ ইন্সপেক্টর
+
এইচটিএমএল , সিএসএস দেখতে  এবং সম্পাদন করতে সহায়তা করে
+
JavaScript Debugger
+
Stop, step through, examine and modify the JavaScript running in a page.
+
Network Monitor
+
See the network requests made when a page is loaded.
+
Storage Inspector
+
Inspect cookies, local storage, indexedDB and session storage present in a page.
+
Developer Toolbar
+
A command-line interface for the developer tools.
+
3D View
+
3D visualization of the page.
+
Eyedropper
+
Select a color from the page.
+
Working with iframes
+
How to target a particular iframe.
+
+
+
+ +
+
+
+

মোবাইল

+ +

মোবাইল ডেভেলপ করার টুলস সমূহ.

+ +
+
অ্যাপ ম্যানেজার
+
ফায়ারফক্স ওএস অ্যাপ ডিজাইন এবং ডেভেলপ।
+
WebIDE
+
অ্যাাপ ম্যানেজারের প্রতিস্তাপক যা ফায়ারফক্স ৩৩ ভার্সন থেকে শুরু হয়েছে।
+
Firefox OS Simulator
+
Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.
+
Responsive Design View
+
See how your website or app will look on different screen sizes without changing the size of your browser window.
+
Debugging on Firefox for Android
+
Connect the developer tools to Firefox for Android.
+
+
+ +
+

Performance

+ +

Diagnose and fix performance problems.

+ +
+
Performance tool
+
Revamped JS profiler and frame rate timeline.
+
+ +
+
JavaScript Profiler
+
Figure out where your JavaScript code is spending its time.
+
Paint Flashing Tool
+
Highlights the parts of the page that are repainted in response to events.
+
Reflow Event Logging
+
See reflow events in the web console.
+
Network Performance
+
See how long the parts of your site take to load.
+
+
+
+ +
+
+
+

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 add-ons, and run JavaScript code in the browser's scope.
+
Browser Toolbox
+
Attach the Developer Tools to the browser itself.
+
+
+ +
+

Extending the devtools

+ +

The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.

+ +
+
Remote Debugging Protocol
+
The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
+
Source Editor
+
A code editor built into Firefox that can be embedded in your add-on.
+
The Debugger Interface
+
An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.
+
Web Console custom output
+
How to extend and customize the output of the Web Console and the Browser Console.
+
+
+
+ +
+

More resources

+ +

This section lists resources which aren't maintained by Mozilla's developer tools team, but which are widely used by web developers. We've included a few Firefox add-ons in this list, but for the complete list see the “Web Development” category on addons.mozilla.org.

+ +
+
+
+
Firebug
+
A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.
+
DOM Inspector
+
Inspect, browse, and edit the DOM of web pages or XUL windows.
+
Web Developer
+
Adds a menu and a toolbar to the browser with various web developer tools.
+
+
+ +
+
+
Webmaker Tools
+
A set of tools developed by Mozilla, aimed at people getting started with Web development.
+
W3C Validators
+
The W3C website hosts a number of tools to check the validity of your website, including its HTML and CSS.
+
JSHint
+
JavaScript code analysis tool.
+
+
+
diff --git a/files/bn/tools/page_inspector/index.html b/files/bn/tools/page_inspector/index.html new file mode 100644 index 0000000000..b434eaea59 --- /dev/null +++ b/files/bn/tools/page_inspector/index.html @@ -0,0 +1,280 @@ +--- +title: পেজ ইন্সপেক্টর +slug: Tools/Page_Inspector +translation_of: Tools/Page_Inspector +--- +
{{ToolsSidebar}}

যে কোন পেজের গঠন ও লেআউট পরীক্ষা বা সংস্কারের জন্য ইন্সপেক্টর ব্যবহার করুন। 

+ +

ইন্সপেক্টর ওপেন করা

+ +

ইন্সপেক্টর ওপেন করার বেশ কিছু উপায় আছেঃ

+ + + +

ইন্সপক্টর এক্টিভেট করার সাথে সাথে ব্রাউজার উইন্ডোর উপরে Toolbox দেখা যাবে।

+ +

আপনি যদি 'ইন্সপেক্টর এলিমেন্ট' এ ক্লিক করে ইন্সপেক্টর invoke করে থাকেন তাহলে এলিমেন্ট এরই মধ্যে সিলেক্ট হয়ে থাকবে এবং ইন্সপেক্টরটি নিম্নবণিতভাবে কাজ করবে যেভাবে এটি 'সিলেক্টিং এলিমেন্টস্' এ কাজ করে।

+ +

যদি তা না হয়ে থাকে তাহলে আপনি যখন আপনার মাউস পেজটিতে ঘুরাবেন তখন মাউসের নিচের এলিমেন্ট dotted বডার দিয়ে হাইলাইট হয়ে যাবে এবং একটি অ্যানোটেশন এটির HTML ট্যাগ ডিসপ্লে করবে। একই সাথে, এর HTML ডেফিনেশনও ইন্সপেক্টরের বাঁ দিকের pane কন্টেক্সটে ডিসপ্লে হয়ে যাবে।

+ +

+ +

এলিমেন্টের উপর ক্লিক করলে তা সিলেক্ট হয়ঃ আপনি একটি এলিমেন্ট সিলেক্ট করে থাকলে ইন্সপেক্টরটি নিচের মত দেখাবে ও কাজ করবে সেভাবে যেভাবে তা নিচের "সিলেক্টিং এলিমেন্টস্" এ কাজ কড়ে।

+ +

এলিমেন্ট সিলেক্ট করা

+ +

যখন একটি এলিমেন্ট সিলেক্ট করা হয় তখন তার মার্কআপ ইন্সপেক্টরের বাঁ দিকে HTML paneএ হায়লাইট হয়ে যায় এবং ইন্সপেক্টরের ডান CSS pane এর স্টাইল ইনফরমেশন শো করেঃ

+ +

এভাবেই এলিমেন্ট সিলেকশনের বিভিন্ন কাজ উল্লেখযোগ্যভাবে পরিবর্তিত হ্য ফায়ারফক্স 29এ।

+ +

ফায়ারফক্স 29 এর আগে

+ +

আপনি যখন একবার কোন পেজে একটি এলিমেন্টে ক্লিক করে এটি সিলেক্ট করেন তখনই ইন্সপেক্টর'স ডিসপ্লে সেই এলিমেন্টে লক হয়ে যায়। সেজন্য আপনি অন্য কোন ইন্সপেক্টর না চালু করেই মাউস ঘোরাতে পারেন।

+ +

এলিমেন্টের জন্য নির্ধারিত annotationটির ডানদিকে ও বাঁদিকে একটি করে বাটন থাকে। বাঁ দিকের বাটনটি আপনাকে নতুন এলিমেন্ট সিলেক্ট করার সুযোগ দিয়ে পুরনো এলিমেন্ট আনলক করে। ডানদিকের বাটনটি এলিমেন্টটির জন্য একটি পপআপ মেনু ডিসপ্লে করে।

+ +

+ +

ফায়ারফক্স 29 ও তার পর

+ +

ফায়ারফক্স 29 থেকে পেজের কোন এলিমেন্টের সিলেক্ট করলে এর চারদিকের ডট দেওয়া বর্ডার এবং এর জন্য নির্ধারিত অনোটেশন দেখানো হয় না। এমনকি  এলিমেন্ট সিলেক্ট করার সাথে সাথে ইন্সপেক্টরগুলোও লক হয়ে যায় না। আপনি যখন মারকাপ পেন এর চারদিকে মাউসটি মুভ করেন তখন কোরেস্পন্ডিঙ এলিমেন্টের চারদিকে ডট দেওয়া বর্ডার দেখা জায়।অয়েব পেজের কোন ভিনণ এলিমেন্ট সিলেক্ট করার জন্য "Select element" বাটনটি ক্লিক করুন, যা এখন Toolbox toolbar দেখা যায়ঃ

+ +

{{EmbedYouTube("zBYEg40ByCM")}}

+ +

এলিমেন্ট পপআপমেনু

+ +
+

ফায়ারফক্স 29 থেকে পরবর্তীতে ওয়েব পেজের অটোনেশন আর দেখা জায় না। তাই শুধুমাত্র HTML পেন এ কনট্যাক্স-ক্লিকিন এর মাধ্যমে পপআপ মেনু ওপেন করতে পারেন

+
+ +

পপআপ মেনু ব্যবহার করে আপনি যে কোন নির্দিষ্ট ক্ষেত্রে বেশ কিছু সাধারণ কাজ করতে পাড়েন। আপনি দুইভাবে মেনুটি এক্টিভেট করতে পারেনঃ

+ + + +

+ + + +

+ +

মেনুটি আপনাকে যা যা করতে সুযোগ দেয়ঃ

+ + + +

ডাটা URL হিসাবে ইমেজ কপি করা

+ +
+

ডাটা URL হিসাবে কপি করা ফায়ারফক্স 29এ নতুন।

+
+ +

ফায়ারফক্স 29 থেকে পরবর্তীতে, যদি currently selected এলিমেন্টটি কোন ইমেজ হয় তাহলে পপআপ মেনুতে একটি অপশন থাকে ডাটা ইউ আর এল হিসাবে ক্লিপবোর্ডে ইমেজ কপি করার জন্যঃ

+ +

+ +

HTML এডিট করা

+ +
+

HTML এডিট করা শুধুমাত্র ফায়ারফক্স 27 এই সহজলভ্য।

+
+ +

কোন এলিমেন্টের আউটারHTML এডিট করার জন্য এলিমেন্টের পপআপ মেনু এক্টিভেট করে সিলেক্ট করুন "Edit As HTML"। আপনি HTML paneএ একটি টেক্সট-বক্স দেখবেনঃ

+ +

আপনি যে কোন HTML এখানে সংযোগ করতে পারবেনঃ এলিমেন্টের ট্যাগ পরিবর্তন করা, existing এলিমেন্ট পরিবর্তন করা আথবা নতুন কোন এলিমেন্ট সংযোগ করা। বক্সের বাইরে ক্লিক করার সাথে সাথে আপনার করা পরিবর্তনগুলো পেজটিতে অ্যাপ্লাই হয়ে যাবে।

+ +

HTML পেন

+ +

HTML পেন আপনাকে পেজটির HTML একটি গাছের আকারে দেখায় এটির শাখাগুলো collapsible. নির্ধারিত এলিমেন্টগুলোর শুরুর এবং শেষের ট্যাগগুলো ধূসর পটভূমিতে হাইলাইট করা হয়।

+ +

আপনি এই পেনে সরাসরি এডিট করতে পারেন - বিভিন্ন ট্যাগ, অ্যাট্রিবিউটস এবং কন্টেন্টসঃ আপনি যেই এলিমেন্ট এডিট করতে চান তা পরিবর্তন করুন এবং পরিবর্তনগুলো সাথে সাথে দেখতে Enter ক্লিক করুন।

+ +

কোন এলিমেন্টে কন্টেক্স-কিল্ক করলে তা ডিসপ্লে করে একটি পপআপ মেনু সেই এলিমেন্টে কাজ করার জন্য।

+ +

HTML পেন টুলবার

+ +

এই পেইন টির উপরে একটি ডেডিকেটেড টুলবার তিনটি অংশে ভাগ হয়ে আছেঃ

+ +
+

ফায়ারফক্স 29 থেকে পরবর্তীতে "Select element" বাটনটি Toolbox এ মুভ করা হয়েছে।

+
+ + + +

CSS পেন

+ +

CSS পেন কারেন্টলি সিলেক্টেড এলিমেন্টে ব্যবহৃত স্টাইলের তথ্য প্রদর্শন করে। চারটি ভিন্ন ভিন্ন ভিউ আছে এখানেঃ "রুলস্", "কম্পিউটেড", "ফন্টস" এবং "বক্স মডেল"। পেনের সর্ব উপরের টুলবারটি ব্যবহার করে আপনি তাদের মধ্যে সুইচ করতে পারেনঃ

+ +

+ +

রুলস্ ভিউ

+ +

নির্ধারিত এলিমেন্টে ব্যবহৃত সব রুলস তালিকাবদ্ধ রাখে এই ভিউটি, বিশেষায়িত এর হ্রাসক্রম ভিত্তিতেঃ

+ +

+ +

রুলস ভিউ সিউডো-এলিমেন্টস এবং ব্যবহৃত রুলস তালিকাবদ্ধ করে।

+ +

রুল ডিসপ্লে

+ +

এটি একটি স্টাইলশীটে প্রত্যেকটি রুল ডিসপ্লে করে, সেক্টর এর একটি লিস্টসহ property:value; ডিকলারেশনের লিস্ট ও থাকে।

+ +

যেসব রুল অন্য রুলের বিপক্ষে যায় সেগুলো কেটে দেওয়া হয়েছে। কোন নির্দেশনার উপরে মাউস রাখলে এটির নিচে একটি চেকবক্স দেখা যাবেঃকোন রুল চালু বা বন্ধ করতে আপনি এটি ব্যবহার করতে পারেন।

+ +

CSS ফাইলের লিঙ্ক

+ +

প্রতিটি রুলের উপরে ডান দিকে ফাইলনেম সোর্স এবং লাইন নাম্বার লিঙ্ক হিসাবে দেখানো হয়ঃ ক্লিক করলে স্টাইল এডিটর থেকে এটি ওপেন হয়ে যাবে।

+ +

ফায়ারফক্স 29 থেকে পরবর্তীতে ইন্সপেক্টর CSS সোর্স ম্যাপ বোঝে। এর মানে হল আপনি যদি CSS প্রিপ্রসেসর ব্যবহার করেন যার সোর্স ম্যাপ সাপোর্ট আছে এবং তা আপনি স্টাইল এডিটর সেটিং এ সক্রিয় করেছেন তাহলে লিঙ্কটি আপনাকে প্রকৃত সোরসে নিয়ে যাবে, জেনারেটেড CSS নয়ঃ

+ +

+ +

CSS সোর্স ম্যাপ সাপোর্ট সম্পর্কে আরো জানুন স্টাইল এডিটর ডকুমেন্টেশন এ।

+ +

রঙ নমুনা

+ +
+

ফায়ারফক্স 27 থেকে পরবর্তীতে, আপনি কালার ভেল্যুর পরে দৃশ্যমান একটি রঙ নমুনা দেখতে পাবেনঃ

+
+ +

+ +

কালার পিকার

+ +
+

ফায়ারফক্স 28 থেকে পরবর্তীতে, আপনি রঙ নমুনাতে (color sample) ক্লিক করলে রঙ পরিবর্তন করার জন্য একটি কালার পিকার দেখতে পাবেনঃ

+
+ +

+ +

পটভূমি-দৃশ্য পূর্ব পরিদর্শন

+ +
+

ফায়ারফক্স 27 থেকে পরবর্তীতে, রুলের উপর মাউস ঘোরালে আপনি ব্যাকগ্রাউন্ড-ইমেজ বা পটভূমি-দৃশ্য  নামে বিভিন্ন ইমেজের বিশেষ ব্যবহৃত একটি প্রিভিউ দেখতে পাবেনঃ

+
+ +

+ +

ভিজুয়ালাইজেশন পরিবর্তন

+ +
+

ফায়ারফক্স 29এ এটি নতুন।

+
+ +

ফায়ারফক্স 29 থেকে পরবর্তী ক্ষেত্রে আপনি রুলস রিভিউতে কোন ট্রান্সফরম প্রপার্টিতে হোভার করলে,আপনি একটি টুলটিপ পাবেন যা আপনাকে দেখাবে এটি যা যা পরিবর্তন করে।

+ +

+ +

এডিট করার নিয়মাবলী

+ +

আপনি যদি কোন দিক্লারেশ্নে ক্লিক করেন তবে আপনি তার বৈশিষ্ট্যাবলী বা মান সংস্কার করতে পারবেন এবং সাথে সাথেই তা দেখতে পাবেন। একটি রুলে নতুন ডিকলারেশন যুক্ত করার জন্য ক্লিক করুন রুলের সর্বশেষ লাইনটিতে (শেষ বন্ধনী দিয়ে অধিকৃত লাইনটি)। সংস্কার করার সময় যদি আপনি অপ্রচলিত মান বা কোন অজানা বৈশিষ্টের নাম প্রবেশ করান, তবে ডিকলারেশনের নিচে একটি হলুদ সতর্ক সংকেত দেখা যাবে।

+ +

আপনার করা যে কোন পরিবর্তনই ক্ষণস্থায়ীঃ পেজটি পুনরায় লোড করলে প্রকৃত স্টাইল রিস্টোর হয়ে যাবে।

+ +

Tip: You can use the arrow keys to increase/decrease numeric rules while editing. Up arrow will turn "1px" to 2px, and Shift+up/down will increment by 10. Alt+up/down change values by 0.1, and shift+Page up/down will add or subtract 100 from the value.

+ +

কম্পিউটেড ভিউ

+ +

This view organizes the style of the element by property. It lists all CSS properties which have been applied to this element in alphabetical order: it shows the calculated value that each CSS property has for for the selected element:

+ +

+ +

Clicking the arrow next to the property name shows the rule that set this value, along with a link to the source filename and line number:

+ +

By default, it only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box.

+ +

Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties: to find the rule responsible for setting the font to "Lucida Grande", type that in the search box.

+ +

ফন্টস্ ভিউ

+ +

সিলেক্টেড এলিমেন্ট অনুযায়ী প্রয়োজনীয় সব ফন্ট দেখায় এটি। মনে রাখবেন, আপনি আপনার সিস্টেমে যে ফন্ট ব্যবহার করেন তাও দেখায় এটি, css এ যে ফন্ট নির্ধারণ করা আছে, তার থেকে এটি আলাদা হতে পারেঃ

+ +

+ +

ফন্ট ভিউতে টেক্সট ভিউ হল "Abc" ডিফল্ট অনুসারে কিন্তু আসলে এটি একটি টেক্সট এরিয়া যা পড়্যোজন মত পরিবর্তন করা যেতে পারে।

+ +

বক্স মডেল ভিউ

+ +

নির্দিষ্ট এই এলিমেন্টে অ্যাপ্লাই করলে এটি বক্স মডেল এর একটি গ্রাফিকাল representation দেখায়ঃ

+ +

+ + + +

+ +

 ওয়েব কনসোল এর সাহায্যে পেজ ইন্সপেক্টর ব্যবহার করা

+ +

ওয়েব কনসোলকে আপনি পেজ ইন্সপেক্টর হিসাবেও ব্যবহার করতে পারেন। এমনকি আপনি একটি বোনাস ফিচার ও পIবেন! আপনি যদি পেজ ইন্সপেক্টরে কোন এলিমেন্ট সিলেক্ট করে থাকেন তবে তাও variable $0. ব্যবহার করে ওয়েব কনসোলের জাভাস্ক্রিপ্টে পাঠানো যাবে।
+  

+ +

+ +

ডেভলপার API

+ +

ফায়ারফক্স এডঅনস্ এই কন্টেক্স chrome://browser/content/devtools/inspector/inspector.xul থেকে নিচের বিভিন্ন অবযেক্টে প্রবেশ করতে পারেঃ

+ +

উইন্ডো.ইন্সপেক্টর

+ +

ইন্সপেক্টর-পেনেল.js এ আলোচিত। বিভিন্ন এট্রিবিউটস্ এবং ফানশনঃ

+ + + +

Bindable events using on:

+ +

মার্কআপ লোডেড

+ +

বামদিকের পেনেল রিফ্রেশ করার পর যখন পেজ পরিবর্তন কার হয় তখন এর প্রয়োজন হয়।

+ +

ready

+ +

প্রথম মার্কআপ লোডে দরকার হয়।

+ +

সিউডোক্লাস

+ +

Called after toggle of a pseudoclass.

+ +

লে-আউট পরিবর্তন

+ +

"paint and resize এর মত কম গুরুত্বপূর্ণ পরিবর্তন ইভেন্ট।"

+ +

কীবোর্ড শর্টকাটস

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}

+ +

গ্লোবাল শর্ট-কাটস

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

+ +

{{ languages( { "ja": "ja/Tools/Page_Inspector"} ) }}

diff --git a/files/bn/tools/style_editor/index.html b/files/bn/tools/style_editor/index.html new file mode 100644 index 0000000000..54509b86ca --- /dev/null +++ b/files/bn/tools/style_editor/index.html @@ -0,0 +1,94 @@ +--- +title: স্টাইল এডিটর +slug: Tools/Style_Editor +translation_of: Tools/Style_Editor +--- +
{{ToolsSidebar}}

স্টাইল সীট এডিটর আপনাকে সক্ষম করবে ঃ

+ + + +

IFrame

+ +

স্টাইল এডিটর খুলতে হলে  "Web developer" মেনু থেকে "Style Editor" বাছাই করতে হবে( যা Mac এর "Tools" মেনু এর সাবমেনু)।স্টাইল এডিটর সক্রিয় হউয়ার সাথে সাথে ,Toolbox ব্রাউজার এর পাদদেশ দৃশ্যমান হবে:

+ +

+ +

স্টাইল এডিটর প্রধান দুই ভাগ এ বিভক্ত : বামপাশ এর স্টাইল সীট প্যান , এবং ডানপাশ এর এডিটর।

+ +

স্টাইল সীট প্যান

+ +

বামপাশ এর স্টাইল সীট, বর্তমান ডকুমেন্ট এর ব্যবহৃত স্টাইলসীট এর তালিকা দিবে।সীট এর নাম এর বামপাশ দেওয়া  eyeball আইকন এ ক্লিক করার মাধ্যমে আপনি দ্রুত গিভেন সীট ব্যবহার এর  অন এবং অফ  এ toggle করতে পারবেন।লিস্ট এ থাকা প্রত্যেক সীট এর কোণার নীচের অংশের ডানদিকে অবস্থিত সেভ বাটন এ ক্লিক করে আপনি আপনার স্টাইল সীট এর যেকোনো পরিবর্তন আপনার লোকাল কম্পিউটার এ সেভ করতে পারবেন।

+ +

এডিটর প্যান

+ +

ডানপাশ এর অংশ টি হচ্ছে এডিটর প্যান। এখানে আপনার জন্য নির্বাচিত কয়েকটি স্টাইল সীট এর সোর্স পড়তে এবং এডিট করতে দেওয়া আছে । পেজ এর যেকোনো পরিবর্তন এটিতে অবিলম্বে কাজ করবে। এটি পরীক্ষা করতে,পরিবর্তন করতে এবং সংশোধন করতে সহজ করে তোলে। আপনি যখন আপনার পরিবর্তন নিয়ে সন্তুষ্ট হবেন, তখন স্টাইল সীট প্যান এর এন্ট্রিতে যে সেভ বাটন আছে তাতে ক্লিক করে একটি কপি লোকাল হিসেবে সেভ করতে পারবেন।   

+ +

এডিটর আপনার  CSS কে সহজ ভাবে পরার জন্য লাইন সংখ্যা এবং syntax hightiliting দিয়ে থাকে।এতে  কয়েকটি  keyboard shortcuts ও সাপোর্ট করে।

+ +

 স্টাইল এডিটর অরিজিনাল টি কে পরিবর্তন না করে,সক্রিয় ভাবে de-minimize করে।এটি খুব অনুকুলে সহজ ভাবে পেজে কাজ করতে সাহায্য করে।

+ +

অটোকমপ্লিট

+ +

অটোকমপ্লিট  ফায়ারফক্স ২৯ এ নতুন

+ +

ফায়ারফক্স ২৯ হতে,স্টাইল এডিটর অটোকমপ্লিট সমর্থন করে।টাইপ শুরু করলে ইহা সাজেশন প্রস্তাব করে।

+ +

আপনি এটি Style Editor settings এ বন্দধ করে দিতে পারবেন

+ +

স্টাইলসীট তৈরি করা এবং আমদানি করা

+ +

টুলবার এর নিউ বাটন এ ক্লিক করে আপনি নতুন স্টাইল সীট তৈরি করতে পারবেন।এরপর আপনি নতুন এডিটর এ  CSS দেয়ার মাধ্যমে শুরু করতে পারেন এবং নতুন স্টাইল যা ব্যবহার করেছেন তা দেখতে পারবেন অন্যান্য সীট এর মত সরাসরি।

+ +

আপনি ডিস্ক থেকে স্টাইল সীট লোড করতে পারবেন এবং ইম্পোর্ট বাটন এ ক্লিক করে পেজ এ ব্যবহার করতে পারবেন।

+ +

সোর্স ম্যাপ সাপোর্ট

+ +
+

CSS সোর্স ম্যাপ সাপোর্ট ফায়ারফক্স ২৯ এ নতুন বৈশিষ্ট্

+
+ +

{{EmbedYouTube("zu2eZbYtEUQ")}}

+ +

প্রি প্রসেসর যেমন  Sass, Less, অথবা Stylus ব্যবহার করে ওয়েব ডেভেলপাররা প্রায়ই CSS ফাইল তৈরী করে।এই টুল আরও গরীয়ান এবং অভিবাক্তপূর্ণ শব্দবিন্যাস থেকে CSS ফাইল  তৈরী করতে সাহায্য করে। আপনি যদি এটি করেন তাহলে দেখতে পাবেন যে,তৈরীক্রিত CSS দেখতে পাওয়া এবং এডিট করা তেমন সুবিধা জনক না,কারন যে কোড আপনি ধারন করছেন তা প্রি প্রসেসর শব্দবিন্যাস,আপনার তৈরীক্রিত নয়। তাই আপনাকে তৈরীক্রিত CSS এডিট করতে হবে তারসাথে এটি পুনরাই অরিজিনাল সোর্স এ মানুয়াল্-ই কাজ করাতে হবে।

+ +

সোর্স ম্যাপ টুল গুলো আপনাকে তৈরীক্রিত CSS থেকে অরিজিনাল শব্দবিন্যাস  এ ফিরিয়ে আনতে সাহায্য করে,যাতে তাদের দেখা যায় এবং অরিজিনাল শব্দবিন্যাস এর ফাইল গুলো কে আপনি এডিট করতে পারেন।ফায়ারফক্স ২৯ স্টাইল এডিটর CSS সোর্স ম্যাপ ধরতে পারে।

+ +

এটার মানে এই যে,ধরুন আপনি  Sass দিলেন তাহলে স্টাইল এডিটর আপনাকে  Sass ফাইল দেখাবে এবং এডিট করতে দিবে,তাদের তৈরী CSS নয় :

+ +

+ +

এইটা কাজ করানোর জন্য আপনার উচিত :

+ + + +

অরিজিনাল সোর্স গুলো দেখা

+ +

এখন আপনি যদি  Style Editor settings এর "Show original sources" টি দেখেন, Rules view  এর CSS রুল গুলো এর পরবর্তী লিংক স্টাইল সীট এর অরিজিনাল সোর্স এ নিয়ে যাবে।

+ +

এডিট অরিজিনাল সোর্স

+ +

আপনি স্টাইল এডিটর এর অরিজিনাল সোর্স গুলো এডিট করতে পারবেন এবং যা ব্যবহার করা হয়েছে তা ঠিক তখনি সরাসরি দেখা যাবে।এটা কে কাজ করানোর জন্য আরও দুটি স্টেপ আছে।

+ +

প্রথমে,আপনার প্রসেসর টিকে এমন ভাবে তৈরী করুন যাতে তা অরিজিনাল সোর্স কে দেখতে পারে এবং নিজস্ব ভাবে CSS তৈরী করে সোর্স পরিবর্তন করার সাথে সাথে। Sass এ আপনি --watch অপশন টি দেওয়ার মাধ্যমে কাজ টি করতে পাড়েন:

+ +

sass index.scss:index.css --sourcemap --watch

+ +

পরবর্তী তে,ফাইল এর পাশে "Save" বাটন এ ক্লিক করে স্টাইল এডিটর থেকে অরিজিনাল সোর্স সেভ করতে হবে, এবং অরিজিনাল ফাইল এ সেভ করতে হবে।

+ +

এখন আপনি যখন স্টাইল এডিটর এর সোর্স ফাইল পরিবর্তন করবেন,CSS একাই তৈরী হবে এবংপরিবর্তন টি আপনি তখন-ই দেখতে পারবেন।

+ +

কীবোর্ড শর্টকাট

+ +

সোর্স এডিটর শর্টকাট

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

diff --git a/files/bn/tools/webide/index.html b/files/bn/tools/webide/index.html new file mode 100644 index 0000000000..0bad22e164 --- /dev/null +++ b/files/bn/tools/webide/index.html @@ -0,0 +1,283 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/WebIDE +--- +
{{ToolsSidebar}}
+

The WebIDE is available from Firefox 34 onwards.

+ +

You can also enable it in Firefox 33, by changing a preference: Visit about:config, find the preference called devtools.webide.enabled and set it to true.

+
+ +
+

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 Firefox OS apps, including a tree view of all the files in your app with the ability to edit and save them, and two app templates to help you get started.

+
+ +

With the WebIDE, you first set up one or more runtimes. A runtime is an environment in which you'll run and debug the app. A runtime could be a Firefox OS device connected to the desktop over USB, or it could be a Firefox OS Simulator installed on the desktop itself.

+ +

Next, you create an app, or open an existing app. If you're creating a new app you start with a template that includes the directory structure and the minimum boilerplate you need to get started, or a more complete template that shows how to use a privileged API. The WebIDE shows your app's files in a tree, and you can edit and save them using a built-in source editor. Of course, you don't have to use the built-in editor: you can develop your app entirely outside the WebIDE, and only use it for debugging.

+ +

Finally, you can install the app in one of the runtimes and run it. You can then open the usual suite of developer tools - the Inspector, Console, JavaScript Debugger and so on - to examine and modify the running app.

+ +

System requirements

+ +

To develop and debug apps using the WebIDE, all you need is Firefox version 33 or later. To test on a real Firefox OS device, you need a device running Firefox OS 1.2 or later, and a USB cable.

+ +

You can only use the WebIDE if you're targeting Firefox OS 1.2 or later.

+ +

Opening the WebIDE

+ +

In the Web Developer menu, click on the WebIDE entry and the WebIDE opens. You can also use the keybinding Shift-F8:The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.

+ +

The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.

+ +

Setting up runtimes

+ +

Under the "Select Runtime" dropdown, runtimes are grouped into three types:

+ + + +

The first time you click the dropdown, you might not see any runtimes here:

+ +

The rest of this section describes how you can add some runtimes.

+ +

Connecting a Firefox OS device

+ +

Before you can connect a Firefox OS device, there's some setup you have to go through:

+ + + +
+

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.

+ +

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

+ +

With a custom 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, the 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 the 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.
+
+ 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.

+ +

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

+ +

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

+ +

The 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

+ +

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

+ +

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.

+ +

Debugging certified apps (including main process)

+ +

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, to debug certified apps on a real device:

+ + + +

To enable certified app debugging, connect to the runtime, and then, in the menu, go to Runtime > Runtime Info. From here, if you see "DevTools restricted privileges: yes", that means certified apps can't be debugged. The path then differs depending on what you are debugging against:

+ + + +

Now (or after a restart of the B2G desktop client) in the WebIDE you should see all the certified 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 the WebIDE, see the Troubleshooting page.

+ +

 

+ +

 

diff --git a/files/bn/tools/webide/troubleshooting/index.html b/files/bn/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..34b019da6d --- /dev/null +++ b/files/bn/tools/webide/troubleshooting/index.html @@ -0,0 +1,81 @@ +--- +title: WebIDE ট্রাবলশুটিং +slug: Tools/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +
{{ToolsSidebar}}

একটি Firefox OS ডিভাইসের সাথে সংযুক্ত হওয়া

+ +

যদি এমন হয় যে, আপনি একটি Firefox OS ডিভাইস WebIDE এর সাথে সংযুক্ত করার চেষ্টা করছেন, কিন্তু সেটি দেখাচ্ছে না, তাহলে এখানে কিছু উপায় বলা আছে, যা আপনি চেষ্টা করতে পারেন:

+ + + +

ইচ্ছামত ডিবাগ করা (প্রত্যায়িত অ্যাপ, বিল্ট-ইন অ্যাপ, ডিভাইসে ইতোমধ্যে ইনস্টল করা অ্যাপ)

+ +

যদি এমন হয় যে আপনি প্রত্যায়িত অ্যাপ, বিল্ট-ইন অ্যাপ বা একটি বাস্তব ডিভাইসে ইতোমধ্যে ইনস্টল করা অ্যাপ ডিবাগ করতে পারছেন না, তাহলে হয়ত আপনি WebIDE এর নিয়ন্ত্রিত ক্ষমতার নিরাপত্তা নিয়মের ভেতর রয়েছেন। আরও জানতে ইচ্ছেমত ডিবাগ করা (প্রত্যায়িত অ্যাপ, মূল প্রক্রিয়া ইত্যাদি সহ) দেখুন।

+ +

অন্যান্য ব্রাউজারে সংযোগ স্থাপন (ক্রোম, সাফারি)

+ +

অন্যান্য ব্রাউজার যেমন- ক্রোম, সাফারি এর সাথে WebIDE সংযোগ স্থাপনের জন্য Valence (formerly Firefox Tools Adapter) ব্যবহার করে।

+ +

যদি আপনার উপরে উল্লেখিত ব্রাউজারে সংযোগ স্থাপনে সমস্যা হয়, তাহলে Valence page এর সেটাপের ধাপগুলো এবং অন্যান্য নোট সমূহ অনুসরণ করুন।

+ +

প্রজেক্ট লিস্ট লোড করা সম্ভব হচ্ছে না

+ +

যদি আপনি ফায়ারফক্সের একটি সংস্করণে WebIDE চালু করেন, এবং তারপর একটি পুরাতন সংস্করণে একই প্রোফাইল দিয়ে ব্যবহার করেন, তাহলে আপনি "Unable to load project list" বা "প্রজেক্ট লিস্ট লোড করা সম্ভব হচ্ছে না" এমন ইরর মেসেজ দেখতে পাবেন।

+ +

WebIDE যে স্টোরেজ সিস্টেম ব্যবহার করে (IndexedDB) সেটা নতুন ফায়ারফক্স সংস্করণের জন্য স্থানান্তর বা পুনরায় কাঠামো তৈরির প্রয়োজন হলে এমনটি হতে পারে। The project list then becomes effectively inaccessible to older versions of Firefox.

+ +

No data has been lost, but you will need to keep using the newest version of Firefox that was used with your profile to get the project list back.

+ +

If really want to use the older version of Firefox, you can attempt to delete just the project list in the following way, but this is unsupported and could result in the further problems or additional data loss:

+ +
    +
  1. Close Firefox
    2. +
  2. Find your Firefox profile directory
    3. +
  3. Find the storage folder inside the profile directory
    4. +
  4. Under some part of this file tree, there should be files and/or directories that start with 4268914080AsptpcPerjo (a hashed name of the database)
    5. +
  5. Remove any such files and directories
    6. +
  6. Start Firefox and WebIDE again
    7. +
+ +

Enable logging

+ +

You can also enable verbose logging to gather diagnostics:

+ +
    +
  1. Open about:config, and add a new preference called extensions.adbhelper@mozilla.org.sdk.console.logLevel, with the string value all, and set extensions.adbhelper@mozilla.org.debug to true.
    2. +
  2. In the Add-ons Manager, disable and then re-enable the ADB Helper add-on.
    3. +
  3. Open the Browser Console and you'll now see console messages prefixed with adb. If the messages don't mean anything to you, ask for help.
    4. +
+ +

Get help

+ +

Go to the #devtools room on IRC and we will try to help.

diff --git "a/files/bn/tools/\340\246\244\340\247\215\340\246\260\340\246\277\340\246\256\340\246\276\340\246\244\340\247\215\340\246\260\340\246\277\340\246\225_\340\246\246\340\246\260\340\247\215\340\246\266\340\246\250/index.html" "b/files/bn/tools/\340\246\244\340\247\215\340\246\260\340\246\277\340\246\256\340\246\276\340\246\244\340\247\215\340\246\260\340\246\277\340\246\225_\340\246\246\340\246\260\340\247\215\340\246\266\340\246\250/index.html" new file mode 100644 index 0000000000..e1dfb87617 --- /dev/null +++ "b/files/bn/tools/\340\246\244\340\247\215\340\246\260\340\246\277\340\246\256\340\246\276\340\246\244\340\247\215\340\246\260\340\246\277\340\246\225_\340\246\246\340\246\260\340\247\215\340\246\266\340\246\250/index.html" @@ -0,0 +1,96 @@ +--- +title: ত্রিমাত্রিক দর্শন +slug: Tools/ত্রিমাত্রিক_দর্শন +translation_of: Tools/3D_View +--- +
{{ToolsSidebar}}

{{ fx_minversion_header("11") }}

+ +

যখন আপনি ত্রিমাত্রিক(3D) দর্শন বোতাম চাপ দিবেন, পাতাটি ত্রিমাত্রিক দর্শন প্রক্রিয়ায় যাবে; এই প্রক্রিয়ায় আপনি দেখতে পাবেন আপনার পাতা ত্রিমাত্রিক(3D) দৃশ্যে উপস্থাপন করে HTML-এর চারকোনা ঘর যা ক্রমবর্ধমান "লম্বা" হয়, যেটি আপনার পৃষ্ঠাকে বাইরের দিকে ঠেলে দিচ্ছে। এই দৃশ্যে দেখা যায় আপনার বিষয়বস্তুগুলো আরও সহজে ঘরের আকৃতিতে প্রকাশ পায়।

+ +

+ +

চেপে রেখে এবং টেনে ধরে, বিভিন্ন কোণ থেকে দেখার জন্য আপনি আপনার পৃষ্ঠার DOM(Document Object Model) অনুক্রমের ত্রিমাত্রিক বর্ণনাটি ঘোরাতে পারেন এবং পুনরায় দ্যুতিময় করতে পারেন, এর কাঠামো ভালোমতো পরীক্ষার জন্য। পর্দার আড়ালে থাকা উপাদানসমূহ দৃশ্যমান হবে, যার ফলে আপনি দেখতে পাবেন কোথায় উপাদানগুলোর সম্পর্ক স্থাপিত হয় দৃশ্যমান উপাদান এর সাথে। আপনি উপাদানে চেপে HTML সূচি অথবা Style সূচি থেকে তাদের HTML দেখতে পারেন। বিপরীতভাবে, আপনি breadcrumb bar(এক প্রকার পরিভ্রমণ দণ্ড) এর উপাদানগুলোতে চেপে কোন কোন উপাদান ত্রিমাত্রিক দৃশ্যে থাকবে তা নির্বাচন করতে পারবেন।

+ +

If you do not see the 3D button in the page inspector, it is possible that your graphics driver needs to be updated. See the blocklisted drivers page for more information.

+ +

Controlling the 3D view

+ +

There are keyboard shortcuts and mouse controls available for the 3D view.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunctionKeyboardMouse
Zoom in/out+ / -Scroll wheel up/down
Rotate left/righta / dMouse left/right
Rotate up/downw / sMouse up/down
Pan left/right← / →Mouse left/right
Pan up/down↑ / ↓Mouse up/down
Reset zoom level0Resets the zoom level to the default
Focus on selected nodefMakes sure the currently selected node is visible {{ fx_minversion_inline("13.0") }}
Reset viewrResets zoom, rotation, and panning to the default {{ fx_minversion_inline("12.0") }}
Hide current nodexMakes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured {{ fx_minversion_inline("12.0") }}
+ +

Use cases for the 3D view

+ +

There are a variety of ways the 3D view is useful:

+ + + +

See also

+ + + +

{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}

diff --git a/files/bn/web/accessibility/index.html b/files/bn/web/accessibility/index.html new file mode 100644 index 0000000000..3ec2777da5 --- /dev/null +++ b/files/bn/web/accessibility/index.html @@ -0,0 +1,65 @@ +--- +title: ব্যবহারযোগ্যতা +slug: Web/Accessibility +tags: + - Accessibility + - Advanced + - Landing + - Web Development +translation_of: Web/Accessibility +--- +

ভিতরে অনেক মানুষ as সম্ভব হিসেবে সক্ষম করা ওয়েব ব্যবহার করতে বুঝায় সাইট, যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয়. ভিতরে অনেক মানুষ as সম্ভব হিসেবে সক্ষম করা ওয়েব ব্যবহার করতে বুঝায় সাইট, যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয়.

+ +

"accessibility সবচেয়ে বেশী ঘন ঘন সুযোগসুবিধা বা নাগরিক সুবিধা বর্ণনা করতে বিকলত্ব-এর, as এর 'সাথে মানুষকে সাহায্য করতে অভ্যস্ত আছে'. This can extend to Braille signage, wheelchair ramps, audio signals at pedestrian crossings, walkway contours, website design, and so on." Wikipedia entry for Accessibility

+ + + +

"ওয়েব মৌলিকভাবে সব মানুষ-এর জন্য কাজ করতে ডিজাইন করা হয়, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." W3C - Accessibility

+ +
+
+

ডকুমেন্টেশন

+ +
+
ওয়েব ডেভেলপমেন্ট
+
+
+ +
+ + + + + + + + +
রচনার একটি সংগ্রহ প্রবেশযোগ্যতার দুনিয়ায় ওয়েব ‌উন্নয়ন ইস্যু তুলে ধরতে মনোনীত করল।
+
+
+
ARIA
+
রচনার একটি সংগ্রহ শিখতে যেভাবে aria আপনার html ডকুমেন্ট আরও সহজগম্য বানাতে ব্যবহার করতে।
+
Assistive technology (AT) development
+
রচনার at ডেভেলাপার-এর জন্য উদ্দেশ্য করা একটি সংগ্রহ
+
+ +

View all articles about Accessibility...

+
+ +
+

ওয়েব ডেভেলপারদের জন্য টুল সমূহ

+ + + +

View All...

+ +

অন্যান্য উপকারী সাইট

+ + +
+
diff --git a/files/bn/web/api/battery_status_api/index.html b/files/bn/web/api/battery_status_api/index.html new file mode 100644 index 0000000000..b75994d356 --- /dev/null +++ b/files/bn/web/api/battery_status_api/index.html @@ -0,0 +1,156 @@ +--- +title: Battery Status API +slug: Web/API/Battery_Status_API +translation_of: Web/API/Battery_Status_API +--- +
{{DefaultAPISidebar("ব্যাটারি API")}}
+ +

ব্যাটারি অবস্থা API টি, প্রায়ই ব্যাটারি API হিসাবে বলা হয়, সিস্টেমের ব্যাটারি চার্জ লেভেল সম্পর্কে তথ্য সরবরাহ করে এবং যখন ব্যাটারি লেভেল বা করার অবস্থা পরিবর্তন করা হয় তখন প্রেরিত ইভেন্টগুলি দ্বারা আপনাকে সূচিত করে। ব্যাটারির চার্জ কম থাকলে এটি আপনার অ্যাপের সম্পদ ব্যবহারকে সামঞ্জস্য করে ব্যাটারী নিষ্কাশন কমাতে  বা ডেটা ক্ষতি প্রতিরোধ করার জন্য ব্যাটারি শেষ হত্তয়ার আগে পরিবর্তন সংরক্ষণ করতে  ব্যবহার করা যেতে পারে।

+ +

ব্যাটারি অবস্থা API ব্যাটারি প্রতিশ্রুতি ফিরিয়ে আনার একটি {{domxref("navigator.getBattery()")}} মেথড/পদ্ধতিতে {{domxref("window.navigator")}}- কে প্রসারিত করে, যা একটি {{domxref("BatteryManager")}} অবজেক্টে সমাধান করা হয় যা আপনাকে ব্যাটারি অবস্থা নিরীক্ষণ করার জন্য কিছু নতুন ইভেন্টগুলি পরিচালনা করতে পারে.

+ +

উদাহরণ

+ +

এই উদাহরণে, আমরা চার্জিং অবস্থা (আমরা প্লাগ ইন এবং চার্জিং কিনা তাও) এর ব্যাটারি স্তর এবং সময় পরিবর্তনের উভয় পরিবর্তনগুলির জন্য দেখতে পাই। এটি {{event("chargingchange")}}, {{event("levelchange")}}, {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} ইভেন্টগুলি শোনার মাধ্যমে সম্পন্ন করা হয়।

+ +
navigator.getBattery().then(function(battery) {
+  function updateAllBatteryInfo(){
+    updateChargeInfo();
+    updateLevelInfo();
+    updateChargingInfo();
+    updateDischargingInfo();
+  }
+  updateAllBatteryInfo();
+
+  battery.addEventListener('chargingchange', function(){
+    updateChargeInfo();
+  });
+  function updateChargeInfo(){
+    console.log("Battery charging? "
+                + (battery.charging ? "Yes" : "No"));
+  }
+
+  battery.addEventListener('levelchange', function(){
+    updateLevelInfo();
+  });
+  function updateLevelInfo(){
+    console.log("Battery level: "
+                + battery.level * 100 + "%");
+  }
+
+  battery.addEventListener('chargingtimechange', function(){
+    updateChargingInfo();
+  });
+  function updateChargingInfo(){
+    console.log("Battery charging time: "
+                 + battery.chargingTime + " seconds");
+  }
+
+  battery.addEventListener('dischargingtimechange', function(){
+    updateDischargingInfo();
+  });
+  function updateDischargingInfo(){
+    console.log("Battery discharging time: "
+                 + battery.dischargingTime + " seconds");
+  }
+
+});
+
+ +

আরো দেখুন the example in the specification.

+ +

সবিস্তার বিবরণী

+ + + + + + + + + + + + + + + + +
সবিস্তার বিবরণীঅবস্থামন্তব্য
{{SpecName("Battery API")}}{{Spec2("Battery API")}}প্রাথমিক সংজ্ঞা
+ +

উপযুক্তত ব্রাউজার

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
বৈশিষ্ট্যসূচকChromeFirefox (Gecko)Internet ExplorerOperaSafari
মৌলিক সমর্থন{{CompatChrome(39.0)}}{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16")}}[1]
+ {{CompatGeckoDesktop("43")}}[3]
+ {{CompatGeckoDesktop("52")}}[4]		{{CompatNo}}25{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
বৈশিষ্ট্যসূচকAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
মৌলিক সমর্থন{{CompatNo}}{{CompatChrome(40.0)}} +

{{CompatGeckoMobile("10")}} {{property_prefix("moz")}}
+ {{CompatGeckoMobile("16")}}[1]
+ {{CompatGeckoMobile("43")}}[3]
+ {{CompatGeckoMobile("52")}}[3]

+ 		{{CompatNo}}25[2]{{CompatNo}}{{CompatChrome(42.0)}}[2]
+
+ +

[1] Disabled by default in Firefox 10.0, but can be enabled setting the preference dom.battery.enabled to true. Starting with Firefox 11.0, mozBattery is enabled by default. The ব্যাটারি API is currently supported on Android, Windows, and Linux with UPower installed. Support for MacOS is available starting with Gecko 18.0 {{geckoRelease("18.0")}}. Firefox also provides support for the deprecated {{domxref("navigator.battery")}}.

+ +

[2] Values for {{domxref("BatteryManager.chargingTime")}} and {{domxref("BatteryManager.dischargingTime")}} are always equal to Infinity.

+ +

[3] The new promise-based syntax for {{domxref("Navigator.getBattery()")}} is supported from Firefox 43 onwards.

+ +

[4] From Firefox 52 onwards, the ব্যাটারি অবস্থা API is only available in chrome/privileged code.

+ +

আরো দেখুন

+ + diff --git a/files/bn/web/api/event/index.html b/files/bn/web/api/event/index.html new file mode 100644 index 0000000000..3f71223347 --- /dev/null +++ b/files/bn/web/api/event/index.html @@ -0,0 +1,216 @@ +--- +title: Event +slug: Web/API/Event +tags: + - API + - Constructor + - DOM + - Event + - Interface + - NeedsTranslation + - Reference + - TopicStub + - UI + - listener +translation_of: Web/API/Event +--- +

{{APIRef("DOM")}}

+ +

The Event interface represents an event which takes place in the DOM.

+ +

An event can be triggered by the user action e.g. clicking the mouse button or tapping keyboard, or generated by APIs to represent the progress of an asynchronous task. It can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent().

+ +

There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.

+ +

Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. Event-handlers are usually connected (or "attached") to various HTML elements (such as <button>, <div>, <span>, etc.) using EventTarget.addEventListener(), and this generally replaces using the old HTML event handler attributes. Further, when properly added, such handlers can also be disconnected if needed using removeEventListener().

+ +
+

Note: One element can have several such handlers, even for the exact same event—particularly if separate, independent code modules attach them, each for its own independent purposes. (For example, a webpage with an advertising-module and statistics-module both monitoring video-watching.)

+
+ +

When there are many nested elements, each with its own handler(s), event processing can become very complicated—especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such events depends on the Event bubbling and capture settings of each handler triggered.

+ +

Interfaces based on Event

+ +

Below is a list of interfaces which are based on the main Event interface, with links to their respective documentation in the MDN API reference.

+ +

Note that all event interfaces have names which end in "Event".

+ +
+ +
+ +

Constructor

+ +
+
{{domxref("Event.Event", "Event()")}}
+
Creates an Event object, returning it to the caller.
+
+ +

Properties

+ +
+
{{domxref("Event.bubbles")}} {{readonlyinline}}
+
A boolean indicating whether or not the event bubbles up through the DOM.
+
{{domxref("Event.cancelBubble")}}
+
A historical alias to {{domxref("Event.stopPropagation()")}}. Setting its value to true before returning from an event handler prevents propagation of the event.
+
{{domxref("Event.cancelable")}} {{readonlyinline}}
+
A boolean indicating whether the event is cancelable.
+
{{domxref("Event.composed")}} {{ReadOnlyInline}}
+
A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
+
{{domxref("Event.currentTarget")}} {{readonlyinline}}
+
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It's possible this has been changed along the way through retargeting.
+
{{domxref("Event.deepPath")}} {{non-standard_inline}}
+
An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.
+
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
+
Indicates whether or not the call to {{domxref("event.preventDefault()")}} canceled the event.
+
{{domxref("Event.eventPhase")}} {{readonlyinline}}
+
Indicates which phase of the event flow is being processed.
+
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
The explicit original target of the event (Mozilla-specific.)
+
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
The original target of the event, before any retargetings. (Mozilla-specific.)
+
{{domxref("Event.returnValue")}}
+
A historical property introduced by Internet Explorer and eventually adopted into the DOM specification in order to ensure existing sites continue to work. Ideally, you should try to use {{domxref("Event.preventDefault()")}} and {{domxref("Event.defaultPrevented")}} instead, but you can use returnValue if you choose to do so.
+
{{domxref("Event.srcElement")}} {{non-standard_inline}}
+
A non-standard alias (from old versions of Microsoft Internet Explorer) for {{domxref("Event.target")}}. Some other browsers are starting to support it for web compatibility purposes.
+
{{domxref("Event.target")}} {{readonlyinline}}
+
A reference to the target to which the event was originally dispatched.
+
{{domxref("Event.timeStamp")}} {{readonlyinline}}
+
The time at which the event was created (in milliseconds). By specification, this value is time since epoch—but in reality, browsers' definitions vary. In addition, work is underway to change this to be a {{domxref("DOMHighResTimeStamp")}} instead.
+
{{domxref("Event.type")}} {{readonlyinline}}
+
The name of the event. Case-insensitive.
+
{{domxref("Event.isTrusted")}} {{readonlyinline}}
+
Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, like {{domxref("Event.initEvent")}}).
+
+ +

Obsolete properties

+ +
+
{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}
+
Obsolete; use {{domxref("Event.composed", "composed")}} instead. (A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM.)
+
+ +

Methods

+ +
+
{{domxref("Event.createEvent()")}} {{deprecated_inline}}
+
+

Creates a new event, which must then be initialized by calling its initEvent() method.

+
+
{{domxref("Event.composedPath()")}}
+
Returns the event’s path (objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its {{domxref("ShadowRoot.mode")}} closed.
+
+ +
+
{{domxref("Event.initEvent()")}} {{deprecated_inline}}
+
Initializes the value of an Event created. If the event has already been dispatched, this method does nothing.
+
{{domxref("Event.preventDefault()")}}
+
Cancels the event (if it is cancelable).
+
{{domxref("Event.stopImmediatePropagation()")}}
+
For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
+
{{domxref("Event.stopPropagation()")}}
+
Stops the propagation of events further along in the DOM.
+
+ +

Obsolete methods

+ +
+
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
+
Non-standard; use {{domxref("Event.defaultPrevented")}} instead. (Returns the value of {{domxref("Event.defaultPrevented")}}.)
+
{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Obsolete; use {{domxref("event.stopPropagation")}} instead. (Prevents the event from bubbling.)
+
{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Obsolete; use {{domxref("event.stopPropagation")}} instead.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.Event")}}

+ +

See also

+ + diff --git a/files/bn/web/api/event/preventdefault/index.html b/files/bn/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..9c14bd2e12 --- /dev/null +++ b/files/bn/web/api/event/preventdefault/index.html @@ -0,0 +1,160 @@ +--- +title: Event.preventDefault() +slug: Web/API/Event/preventDefault +tags: + - b +translation_of: Web/API/Event/preventDefault +--- +
{{apiref("DOM")}}
+ +

The {{domxref("Event")}} interface's preventDefault() method tells the {{Glossary("user agent")}} that if the event does not get explicitly handled, its default action should not be taken as it normally would be. The event continues to propagate as usual, unless one of its event listeners calls {{domxref("Event.stopPropagation", "stopPropagation()")}} or {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}, either of which terminates propagation at once.

+ +

As noted below, calling preventDefault() for a non-cancelable event, such as one dispatched via {{domxref("EventTarget.dispatchEvent()")}}, without specifying cancelable: true has no effect.

+ +

Syntax

+ +
event.preventDefault();
+
+ +

Examples

+ +

Blocking default click handling

+ +

Toggling a checkbox is the default action of clicking on a checkbox. This example demonstrates how to prevent that from happening:

+ +

JavaScript

+ +
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
+         document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
+         event.preventDefault();
+}, false);
+ +

HTML

+ +
<p>Please click on the checkbox control.</p>
+
+<form>
+  <label for="id-checkbox">Checkbox:</label>
+  <input type="checkbox" id="id-checkbox"/>
+</form>
+
+<div id="output-box"></div>
+ +

Result

+ +

{{EmbedLiveSample("Blocking_default_click_handling")}}

+ +

Stopping keystrokes from reaching an edit field

+ +

The following example demonstrates how invalid text input can be stopped from reaching the input field with preventDefault(). Nowadays, you should usually use native HTML form validation instead.

+ +

HTML

+ +

Here's the form:

+ +
<div class="container">
+  <p>Please enter your name using lowercase letters only.</p>
+
+  <form>
+    <input type="text" id="my-textbox">
+  </form>
+</div>
+ +

CSS

+ +

We use a little bit of CSS for the warning box we'll draw when the user presses an invalid key:

+ +
.warning {
+  border: 2px solid #f39389;
+  border-radius: 2px;
+  padding: 10px;
+  position: absolute;
+  background-color: #fbd8d4;
+  color: #3b3c40;
+}
+ +

JavaScript

+ +

And here's the JavaScript code that does the job. First, listen for {{domxref("Element/keypress_event", "keypress")}} events:

+ +
var myTextbox = document.getElementById('my-textbox');
+myTextbox.addEventListener('keypress', checkName, false);
+
+ +

The checkName() function, which looks at the pressed key and decides whether to allow it:

+ +
function checkName(evt) {
+  var charCode = evt.charCode;
+  if (charCode != 0) {
+    if (charCode < 97 || charCode > 122) {
+      evt.preventDefault();
+      displayWarning(
+        "Please use lowercase letters only."
+        + "\n" + "charCode: " + charCode + "\n"
+      );
+    }
+  }
+}
+
+ +

The displayWarning() function presents a notification of a problem. It's not an elegant function but does the job for the purposes of this example:

+ +
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 {
+    // insert warningBox after myTextbox
+    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
+  }
+
+  warningTimeout = window.setTimeout(function() {
+      warningBox.parentNode.removeChild(warningBox);
+      warningTimeout = -1;
+    }, 2000);
+}
+ +

Result

+ +

{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}

+ +

Notes

+ +

Calling preventDefault() during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur.

+ +

You can use {{domxref("Event.cancelable")}} to check if the event is cancelable. Calling preventDefault() for a non-cancelable event has no effect.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}{{ Spec2('DOM2 Events') }}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Event.preventDefault")}}

diff --git a/files/bn/web/api/index.html b/files/bn/web/api/index.html new file mode 100644 index 0000000000..3ecae6505c --- /dev/null +++ b/files/bn/web/api/index.html @@ -0,0 +1,15 @@ +--- +title: ওয়েব API ইন্টারফেস +slug: Web/API +tags: + - API + - Landing + - Reference + - Référence(2) + - TopicStub + - Web +translation_of: Web/API +--- +

আপনি যখন জাভাস্ক্রিট ব্যাবহার করে ওয়েব এর জ্ন্য কোড করবেন, আপনার জ্ন্য অনেকগুলি উপোযগী API আছে। নিম্নে সবগুলো interface এর লিংক দেওয়া হল।

+ +
{{APIListAlpha}}
diff --git a/files/bn/web/api/indexeddb_api/index.html b/files/bn/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..099bec9668 --- /dev/null +++ b/files/bn/web/api/indexeddb_api/index.html @@ -0,0 +1,182 @@ +--- +title: ইনডেক্সডডিবি +slug: Web/API/IndexedDB_API +tags: + - NeedsReview + - ইনডেক্সডডিবি + - এপিআই + - ডাটাবেজ + - রেফারেন্স +translation_of: Web/API/IndexedDB_API +--- +
+

 ইনডেক্সডডিবি (IndexedDB) ক্লায়েন্ট-সাইড স্টোরেজ এর জন্য একটি এপিআই যা গুরুত্বপূর্ণ পরিমান গাঠনিক ডাটা জমা রাখে এবং যা ইনডেক্স এর সাহায্যে উক্ত ডাটার উপর উচ্চ কর্মক্ষমতাসম্পন্ন  অনুসন্ধান চালাতে পারে।যেখানে ডোম স্টোরেজ  উপকারী ক্ষুদ্র পরিমান ডাটা জমা রাখার জন্য, এটি কম উপকারী বড় আকারের গাঠনিক ডাটা জমা করার জন্য, সেক্ষেত্রে ইনডেক্সডডিবি(indexedDB) একটি সমাধান প্রদান করে।

+
+ +

এই পেজটি এপিআই অবজেক্টসমূহের টেকনিক্যাল বিবরণগুলোর  প্রবেশপথ হিসেবে কাজ করে। যদি আপনার প্রাথমিক বই এর দরকার হয় তবে আপনার  ইনডেক্সডডিবির প্রাথমিক ধারণা  দেখা উচিত। আরও বিস্তারিতের জন্য দেখুন  ইনডেক্সডডিবির ব্যবহার ।

+ +

ইনডেক্সডডিবি(IndexedDB)  সিনক্রোনাস এবং এসিনক্রোনাস এক্সেস এর জন্য পৃথক এপিআই প্রদান করে। সিনক্রোনাস এপিআই কেবল ওয়েব ওয়ার্কার   এর ভিতরে ব্যবহারের জন্য কিন্তু এটি এখনও কোন ব্রাউজারে বাস্তবায়ন করা হয়নি। এসিনক্রোনাস এপিআই ওয়েবওয়ার্কার এর ভিতরে ও বাইরে উভয় জায়গাতে কাজ করে,কিন্তু ফায়ারফক্সে এখনও বাস্তবায়ন হয়নি।

+ +

এসিনক্রোনাস এপিআই

+ +

এসিনক্রোনাস এপিআই মেথড কলিং থ্রেডকে ব্লক না করে তা রিটার্ন করে। একটি  ডাটাবেজ এ এসিনক্রোনাস প্রবেশাধিকার নেওয়ার জন্য ,একটি   window অবজেক্টের   indexedDB এট্রিবিউট এর  open() কল করুন। এই মেথড একটি  {{domxref("IDBRequest")}} অবজেক্ট রিটার্ন করে ;এসিনক্রোনাস অপারেশনগুলো  এপ্লিকেশন এর সাথে যোগাযোগ করে {{domxref("IDBRequest")}} অবজেক্টগুলোর ইভেন্ট চালুর মাধ্যমে।

+ +
+

নোট:   indexedDB অবজেক্ট পুরাতন ব্রাউজার ভার্সনগুলোতে পূর্বনির্ধারিত (property mozIndexedDB  Gecko < 16 এ , webkitIndexedDB  Chrome এ, এবং  msIndexedDB  IE 10 ে).

+
+ +

এসিনক্রোনাস ইনডেক্সডডিবি (IndexedDB) এপিআই এর ইন্টারফেসগুলো নিচের ন্যায়:

+ +
+
{{domxref("IDBFactory")}}
+
ডাটাবেজে প্রবেশাধিকার প্রদান করে। গ্লোবাল অবজেক্ট  indexedDB এই ইন্টারফেসটি বাস্তবায়ন করছে এবং এই এপিআই এর জন্য এটি প্রবেশমুখ।
+
{{domxref("IDBCursor")}}
+
অবজেক্ট স্টোরসমূহ এবং ইনডেক্সসমূহের উপর বারবার ইটারেট করে।
+
{{domxref("IDBCursorWithValue")}}
+
অবজেক্ট স্টোরসমূহ এবং ইনডেক্সসমূহ বারবার ইটারেট করে এবং কার্সর এর বর্তমান মান রিটার্ন করে।
+
{{domxref("IDBDatabase")}}
+
ডাটাবেজের একটি সংযোগ বুঝায়। এটি একমাত্র রাস্তা যা দিয়ে ডাটাবেজে লেনদেন সম্ভব।
+
{{domxref("IDBEnvironment")}}
+
একটি ক্লায়েন্ট-সাইড ডাটাবেজে প্রবেশাধিকার প্রদান করে। এটি {{ domxref("window") }} এবং{{ domxref("worker") }} অবজেক্টসমূহদ্বারা বাস্তবায়িত হচ্ছে।
+
{{domxref("IDBIndex")}}
+
একটি ইনডেক্স এর মেটাডাটাতে প্রবেশাধিকার প্রদান করে।
+
{{domxref("IDBKeyRange")}}
+
কীসমূহের একটি সীমা সংজ্ঞায়িত করে।
+
{{domxref("IDBObjectStore")}}
+
একটি অবজেক্ট স্টোরকে প্রতিনিধিত্ব করে।
+
{{domxref("IDBOpenDBRequest")}}
+
একটি ডাটাবেজ খোলার অনুরোধকে প্রতিনিধিত্ব করে।
+
{{domxref("IDBRequest")}}
+
ডাটাবেজ এবং ডাটাবেজ অবজেক্টসমূহে এসিনক্রোনাস অনুরোধগুলোর ফলাফলে প্রবেশাধিকার প্রদান করে। এটি হল যেটি আপনি এসিনক্রোনাস মেথডকে কল করার ফলে পান।
+
{{domxref("IDBTransaction")}}
+
একটি ডাটাবেজ ট্রানসেকশনকে প্রতিনিধিত্ব করে। আপনি একটি ডাটাবেজে ট্রানসেকশন তৈরী করেন,স্কোপটি বলে দিলে(যেমন কোন অবজেক্ট স্টোরগুলোতে আপনি প্রবেশাধিকার চাচ্ছেন) এবং কি ধরণের প্রবেশাধিকার চাচ্ছেন( কেবলমাত্র পাঠ নাকি লেখাসহ)।
+
+ + + +

স্পেসিফেকেশন এর একটি প্রাথমিক ভার্সনে এই মুছে ফেলা ইন্টারফেসগুলো সংজ্ঞায়িত ছিল। কিন্তু এগুলো এখনো নথিবদ্ধ করে রাখা হয়েছে যাতে আপনার পূর্বে লেখা কোন কোড পরিবর্তনের প্রয়োজন হয়।

+ +
+
{{domxref("IDBVersionChangeRequest")}}
+
একটি ডাটাবেজের ভার্সন পরিবর্তনের অনুরোধকে প্রতিনিধিত্ব কওরে। ডাটাবেজের ভার্সন পরিবর্তনের উপায় সম্প্রতি বদলানো হয়েছে ({{domxref("IDBFactory.open")}} কে কল করে এবং {{domxref("IDBDatabase.setVersion")}}কে কল না করে), এবং {{domxref("IDBOpenDBRequest")}} ইন্টারফেসটি এখন মুছে ফেলা {{domxref("IDBVersionChangeRequest")}} এর কাজ করতে পারে।
+
{{domxref("IDBDatabaseException")}}  {{ obsolete_inline() }}
+
ডাটাবেজ অপারেশন এর সময় প্রাপ্ত এক্সসেপশন শর্তগুলোকে প্রতিনিধিত্ব করে।
+
+ + + +
+

নোট:  এই  এপিআই এর একটি সিনক্রোনাস ভার্সন   আছে,যা  কোন ব্রাউজার এখনও বাস্তবায়িত হয়নি। এটি  কোন ব্রাউজারে এখনও বাস্তবায়িত হয় নি। এটি  ওয়েব ওয়ার্কার  এর সাথে ব্যবহারের জন্য তৈরী।

+
+ +

 স্টোরেজ সীমা

+ +

একক ডাটাবেজ এর আইটেম সাইজ এর কোন সীমা নেই। কিন্তু ইনডেক্সডডিবি (IndexedDB) ডাটাবেজ সাইজ এর একটি সীমা থাকতে পারে। এই সীমা(এবং কিভাবে ইউজার ইন্টারফেস তা ব্যবহার করবে) তা এক ব্রাউজার ও অন্য ব্রাউজার এ ভিন্ন হতে পারে।

+ + + +

উদাহারণ

+ + + +

ব্রাউজার সামঞ্জস্যতা

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
বৈশিষ্ট্যক্রোমফায়ারফক্স(গেকো )ইন্টারনেট  এক্সপ্লোরারওপেরা +

সাফারি

+ +

(ওয়েবকিট)

+
এসিনক্রোনাস এপিআই +

১১.0 {{ property_prefix("webkit") }}
+ 24

+ 		{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		১০১৭{{ CompatNo() }}
সিনক্রোনাস এপিআই
+ (ওয়েব ওয়ার্কার এর সাথে ব্যবহৃত)		{{ CompatNo() }}{{ CompatNo() }}
+ See {{ bug(701634) }}		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
বৈশিষ্ট্যএন্ড্রয়েডফায়ারফক্স মোবাইল (গেকো) +

আই-ই

+ +

ফোন

+ 		ওপেরা মোবাইলসাফারি মোবাইল
এসিনক্রোনাস  এপিআই৪.৪{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		১০১৭{{ CompatNo() }}
+
+ +
+

নোট :কিছু ব্রাউজার এখনও ইনডেক্সডডিবি সাপোর্ট না করলেও ওয়েব সিকুয়েল (webSQL)সাপোর্ট করে,  যেমন সাফারি/ওয়েবকিট ডেস্কটপ ও আইওএস। এই সমস্যার একটি সমাধান হচ্ছে  ইনডেক্সডডিবি পলিফিল বা শিম  ব্যবহার করা যা অসর্মথিত ব্রাউজার এর ক্ষেত্রে ওয়েবসিকুয়েল এ  ফল ব্যাক করে।

+
+ +

আরও দেখুন

+ + diff --git a/files/bn/web/api/inputevent/index.html b/files/bn/web/api/inputevent/index.html new file mode 100644 index 0000000000..3b31b83955 --- /dev/null +++ b/files/bn/web/api/inputevent/index.html @@ -0,0 +1,98 @@ +--- +title: InputEvent +slug: Web/API/InputEvent +translation_of: Web/API/InputEvent +--- +

{{APIRef}}

+ +

InputEvent ইন্টারফেসটি সম্পাদনযোগ্য কন্টেন্টে কোন পরিবর্তন হলে, সে পরিবর্তন সম্পর্কে জানায়।

+ +

প্রোপার্টি

+ +

InputEvent ইন্টারফেসটির কোন প্রোপার্টি নেই।

+ +

মেথড

+ +

InputEvent ইন্টারফেসটির কোন মেথড নেই।

+ +

ইভেন্ট

+ +
+
{{domxref("InputEvent.data")}} {{readOnlyInline}}
+
লেখা বর্ণগুলি নিয়ে একটু {{domxref("DOMString")}} রিটার্ন করে। এই স্ট্রিংটি খালি হতে পারে, যদি পরিবর্তনের ফলে নতুন বর্ণ লেখা না হয়। (যেমন বর্ণ মুছার সময়)
+
{{domxref("InputEvent.isComposing")}} {{readOnlyInline}}
+
compositionstart এর আগে এবং compositionend এর পরে একটু বুলিয়ান ভ্যালু নিয়ে ইভেন্ট ফায়ার করে।
+
+ +

ব্রাউজার সমর্থন

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ফিচারক্রোমফায়ারফক্স (গেকো)ইন্টারনেট এক্সপ্লোরারঅপেরাসাফারি (ওয়েবকিট)
data{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
isComposing{{ CompatNo() }}{{ CompatGeckoDesktop("31.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ফিচারঅ্যান্ড্রয়েডফায়ারফক্স মোবাইল (গেকো)ইন্টারনেট এক্সপ্লোরার ফোনঅপেরা মোবাইলসাফারি মোবাইল
data{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
isComposing{{ CompatNo() }}{{ CompatGeckoMobile("31.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

আরও দেখুন

+ + diff --git a/files/bn/web/api/stylesheet/index.html b/files/bn/web/api/stylesheet/index.html new file mode 100644 index 0000000000..83286f4960 --- /dev/null +++ b/files/bn/web/api/stylesheet/index.html @@ -0,0 +1,72 @@ +--- +title: স্টাইলশীট +slug: Web/API/StyleSheet +tags: + - API + - CSS + - CSSOM + - DOM + - DOM Reference + - NeedsReview + - Reference + - WebAPI +translation_of: Web/API/StyleSheet +--- +
+ {{APIRef}}
+

একটি অবজেক্ট, যেটি একক স্টাইল শীট তথা StyleSheet ইন্টারফেস বর্ণনা করে। সিএসএস স্টাইল শীট সমূহ আরও বিশেষ ধরণের {{domxref("CSSStyleSheet")}} ইন্টারফেস বাস্তবায়ন করবে।

+

প্রপার্টি সমূহ

+
+
+ {{domxref("StyleSheet.disabled")}}
+
+ এটি একটি {{domxref("Boolean")}} মান, যেটা বর্ণনা করবে যে বর্তমান স্টাইলশীট টি প্রয়োগ করা হয়েছে কি না।
+
+ {{domxref("StyleSheet.href")}} {{readonlyInline}}
+
+ এটি একটি {{domxref("DOMString")}} প্রদান করে, যেটার মধ্যে স্টাইলশীটের অবস্থান লেখা থাকবে।
+
+ {{domxref("StyleSheet.media")}} {{readonlyInline}}
+
+ এটি একটি {{domxref("MediaList")}} দেয়, যার মধ্যে স্টাইল তথ্যের কাঙ্ক্ষিত লক্ষ্যের মাধ্যম বর্ণনা করা থাকে।
+
+ {{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}
+
+ এটা একটি {{domxref("Node")}} প্রদান করে, যা বর্তমান ডকুমেন্টের সাথে এই স্টাইলশীটকে যুক্ত করে।
+
+ {{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}
+
+ বর্তমানটির সাথে এটি আরও একটি {{domxref("StyleSheet")}} দেয় (যদি থাকে); যদি কোন স্টাইলশীট না থাকে, তাহলে null প্রদান করে।
+
+ {{domxref("StyleSheet.title")}} {{readonlyInline}}
+
+ বর্তমান স্টাইলশীটের শিরোনামের জন্য এটা {{domxref("DOMString")}} প্রদান করে।
+
+ {{domxref("StyleSheet.type")}}{{readonlyInline}}
+
+ বর্তমান স্টাইলশীটের ভাষা উপস্থাপন করার জন্য এটা {{domxref("DOMString")}} প্রদান করে।
+
+

বৈশিষ্ট্য

+ + + + + + + + + + + + + + + + + + +
বৈশিষ্ট্যঅবস্থামন্তব্য
{{ SpecName('CSSOM', '#stylesheet', 'StyleSheet') }}{{ Spec2('CSSOM') }}{{ SpecName('DOM2 Style') }} এরপর থেকে কোন পরিবর্তন হয়নি।
{{ SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet') }}{{ Spec2('DOM2 Style') }}প্রাথমিক সংজ্ঞা।
+

আরও দেখুন

+ diff --git a/files/bn/web/css/css_animations/index.html b/files/bn/web/css/css_animations/index.html new file mode 100644 index 0000000000..7c953b2359 --- /dev/null +++ b/files/bn/web/css/css_animations/index.html @@ -0,0 +1,136 @@ +--- +title: CSS Animations +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS Animations + - Experimental + - Overview + - Reference +translation_of: Web/CSS/CSS_Animations +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Animations is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

CSS At-rules

+ +
+ +
+ +

Guides

+ +
+
Detecting CSS animation support
+
Describes a technique for detecting if the browser supports CSS animations.
+
Using CSS animations
+
Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations') }}{{ Spec2('CSS3 Animations') }}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ 43.0		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012{{property_prefix("-o")}}
+ 12.10[2]		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1 {{property_prefix("-webkit")}} [1]
+ 4.0 {{property_prefix("-webkit")}}		{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.

+ +

[2] See the release notes to Opera 12.50.

+ +

See also

+ + + +

 

diff --git a/files/bn/web/css/css_transforms/index.html b/files/bn/web/css/css_transforms/index.html new file mode 100644 index 0000000000..142b07aed1 --- /dev/null +++ b/files/bn/web/css/css_transforms/index.html @@ -0,0 +1,152 @@ +--- +title: CSS Transforms +slug: Web/CSS/CSS_Transforms +tags: + - CSS + - CSS Reference + - Experimental + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Transforms +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

Guides

+ +
+
Using CSS transforms
+
Step-by-step tutorial about how to transform elements styled with CSS.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support +

{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ 36

+ 		{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16.0")}}[2]		9.0{{property_prefix("-ms")}}[3]
+ 10.0		10.5{{property_prefix("-o")}}
+ 12.10
+ 15.0{{property_prefix("-webkit")}}
+ 23		3.1{{property_prefix("-webkit")}}
3D Support12.0{{property_prefix("-webkit")}}
+ 36		10.0{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10.015.0{{property_prefix("-webkit")}}
+ 23		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}[4]{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ 11.0{{property_prefix("-webkit")}}[5]		11.5{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
3D Support{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}22{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

[1] Gecko 14.0 removed the experimental support for skew(), but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.

+ +

[2] Before Firefox 16, the translation values of matrix() and matrix3d() could be {{cssxref("<length>")}}, in addition to the standard {{cssxref("<number>")}}.

+ +

[3] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

+ +

Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as -ms-transform:rotate(10deg) translateZ(0); will prevent the entire property from being applied.

+ +

[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.

+ +

[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} prefixed variant as an alias for the default one.

+ +

 

diff --git a/files/bn/web/css/element()/index.html b/files/bn/web/css/element()/index.html new file mode 100644 index 0000000000..4308a2ea5b --- /dev/null +++ b/files/bn/web/css/element()/index.html @@ -0,0 +1,113 @@ +--- +title: element +slug: Web/CSS/element() +translation_of: Web/CSS/element() +--- +
+ {{CSSRef}}{{SeeCompatTable}}
+

সারাংশ

+

CSS  ফাংশন এলিমে‍‌‌‍ন্টটি একটি{ {xref_cssimage}}  এর মান কে সংজ্ঞায়িত করে  যা একটি  arbitrary HTML  এলিমেন্ট থেকে উৎপন্ন হয়।এই ছবিটি জীবন্ত,  অর্থাৎ যদি HTML উপাদান পরিবর্তন করা হয় ,তবে ফলপ্রসূ মান ব্যবহারিত সিএসএস বৈশিষ্ট্যগুলো স্বয়ংক্রিয়ভাবে আধুনিকায়িত হয়ে যাবে ।

+

এটি ব্যবহার এর জন্য একটি বিশেষ দৃশ্য হবে HTML এ ছবি রেনডার করা'{{HTMLELEMENT("canvas")}} , তারপর এটিকে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করবে ।

+

গেকো ব্রাউজার এ আপনি নন- স্ট্যান্ডর্ডটি ব্যবহার করতে পারেন ।  {{domxref("document.mozSetImageElement()")}} এই পদ্ধতিটি একটি দেয়া সিএসএস ব্যাকগ্রাউন্ড এর ব্যাকগ্রাউন্ড হিসেবে ব্যবহৃত হওয়া এলিমেন্ট এর পরিবর্তন করে।

+

পদবিন্যাস

+
element( id )
+

যেখানে,

+
+
+ id
+
+ একটি এলিমেন্ট এর ID কে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করতে ,বিশেষ করে এলিমেন্ট এর উপর HTML attribute #id ব্যবহার  করা হয়।
+
+

উদাহরন

+

এই উদাহরনগুলো viewed live এ দেখা যাবে builds of Firefox এ যা -moz-element() সহায়তা করে।

+

কিছু বাস্তব উদাহরন

+

এই উদাহরনটি একটি লুকানো {{HTMLElement("div")}} কে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করে।ব্যাকগ্রাউন্ড এলিমেন্টটি একটি নতি ব্যবহার করে কিন্তু সেই সাথে টেক্সট ও অন্তর্ভুক্ত করে যা ব্যাকগ্রাউন্ড এর অংশ হিসেবে রেনডার করা হয়।

+
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
+  <p>This box uses the element with the #myBackground1 ID as its background!</p>
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
+  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
+  </div>
+</div>
+

 {{HTMLElement("div")}} এলিমেন্টের সাথে  ID "myBackground1" কনটেন্ট এর  ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করা হয় যেখানে "This box uses the element with the #myBackground1 ID as its background!" এই অনুছেদটি অন্তর্ভুক্ত করা হয়।

+

example1.png

+

আরও কিছু অদ্ভুত উদাহরন

+

এই উদাহরনটি একটি লুকানো {{HTMLElement("button")}} এলিমেন্ট কে পুনরাবৃওি নমুনায় ব্যাকগ্রাউনড হিসেবে ব্যবহার করে।এটি প্রমান করে যে আপনি ব্যাকগ্রাউন্ড হিসেবে arbitrary এলিমেন্ট ব্যবহার করতে পারেন কিন্তু ভাল নকশা অনুশীলনে ততটা প্রয়োজনীয় নয়।

+
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <button id="myBackground2" type="button">Evil button!</button>
+</div>
+
+

example2.png

+

নির্দিষ্টকরন

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
CSS Image Values and Replaced Content Level 4{{Spec2('CSS4 Images')}}Actually now deferred to CSS4.
+

ব্রাউজার সুসঙ্গত

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support4.0 (2.0) [*] {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support4.0 (2.0) [*] {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+

[*] ব্যবহৃত {{cssxref("background")}} এবং {{cssxref("background-image")}} সিএসএস বৈশিষ্ট্গুলোর জন্য সিমাবদ্ধ।

+

আরও দেখুন

+ diff --git a/files/bn/web/css/getting_started/color/index.html b/files/bn/web/css/getting_started/color/index.html new file mode 100644 index 0000000000..fd6c5a64e4 --- /dev/null +++ b/files/bn/web/css/getting_started/color/index.html @@ -0,0 +1,280 @@ +--- +title: রং +slug: Web/CSS/Getting_Started/Color +tags: + - CSS + - Example + - Guide + - NeedsReview +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +

{{ CSSTutorialTOC() }}

+

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles")}}এটা হচ্ছে  যেভাবে শুরু করবেন CSS   টিউটোরিয়ালের ৮ম বিভাগ; এটা ব্যাখ্যা করবে কিভাবে আপনি CSS এ রং উল্লেখ করবেন. আপনি আপনার নমুনা স্টাইলশিট এ পরিচিত হবেন background রং এর সাথে।

+

তথ্য: রং (color)

+

এই টিউটোরিয়ালে এখন পর্যন্ত ,আপনি ব্যবহার করেছেন একটি নির্দিষ্ট সংখ্যক রং এর নাম . CSS 2 সর্বোপরি ১৭ টি রং এর নাম বহন করে। কিছু নাম হয় তো সেগুলো, যেগুলো আপনি আশা করেন না।

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

 

+
+
+ বিস্তারিত
+

আপনার  browser হয়ত আরও অনেক রং এর নাম বহন করতে পারে, যেমনঃ

+ + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+

এই প্রসারিত তালিকার আরও বিস্তারিত জানার জন্য দেখুন: SVG color keywords  CSS 3 এর রং এর মডিউল এ। সতর্ক থাকুন ওই সব রং এর নাম ব্যবহারে যেগুলো আপনার পাঠকের browsers এ হয়ত বহন করে না।

+
+

একটি বৃহৎ palette এর জন্য, যে রং গুলো আপনি চান সেগুলোর লাল (red), সবুজ(green) এবং নীল( blue) উপাদানগুলো উল্লেখ করুন হ্যাশট্যাগ (#) দিয়ে এবং ৩টি হেক্সাডেসিমাল(hexadecimal) সংখ্যা যাদের শ্রেণী 0 - 9 , a – f.  a – f অক্ষরগুলো দিয়ে 10 – 15 এর মান বুঝায়:

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

সম্পূর্ণ palette এর জন্য, প্রতিটি উপাদানের ক্ষেত্রে উল্লেখ করুন দুইটি হেক্সাডেসিমাল সংখ্য:

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

আপনি সচারচর এই ৬ সংখ্যার হেক্সাডেসিমাল কোড গুলো আপনার গ্রাফিক্স প্রোগ্রাম অথবা অন্য কোন টুলস থেকে পেতে পারেন।

+
+
+ উদাহরণ
+
+ সামান্য প্র্যাকটিস করে, আপনি তিন সংখ্যার রং গুলো আপনার বেশিরভাগ কাজের জন্য সুবিন্যস্ত করতে পারবেনঃ
+
+  
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
শুরু লাল এর সাথে: #f00
একে হাল্কা করার জন্য, কিছু সবুজ এবং নীল যোগ করুনঃ #f77
একে আরও কমলা করার জন্য, সামান্য একটু এক্সট্রা সবুজ যোগ করুনঃ #fa7
আরও ডার্ক করার জন্য, এর সব উপাদান মুছে ফেলুন: #c74
এর সম্পৃক্তি দূর করার জন্য, এর উপাদান গুলো কে আরও সমান করুনঃ #c98
আপনি যদি একদম সমান করেন তাহলে আপনি পাবেন ধুুসরঃ #ccc
+

একটি মোমের মত শেডের জন্য যেমন বর্ণহীন নীলঃ

+ + + + + + + + + + + + + +
শুরু একদম শুভ্র সাদা থেকে: #fff
অন্যান্য উপাদানগুলো সামান্য কমান: #eef
+
+
+
+ আরও বিস্তারিত
+

আপনি আরও উল্লেখ করতে পারেন একতি রং এর ডেসিমাল RGB মানগনগুলো যাদের শ্রেণী 0 – 25 অথবা percentages.

+

উদাহরণস্বরূপ ,মেরুন (dark red):

+ 
rgb(128, 0, 0)
+

কিভাবে রং উল্লেখ করা যায় তার আরও বিস্তারিত জানার জন্য দেখুনঃ রং CSS সুনির্দিষ্টকরণে এ। ম্যাচিং সিস্টেম রং যেমন মেনু এবং ThreeDFace, দেখুন: CSS2 System Colors CSS সুনির্দিষ্টকরণে এ।

+
+

 

+

আপনি ইতিমধ্যে {{ cssxref("color") }} প্রপার্টি text এ ব্যবহার করেছেন ।

+

আপনি চাইলে আরও ব্যবহার করতে পারেন {{ cssxref("background-color") }} প্রপার্টি টি যাতে করে আপনি উপাদানগুলোর ব্যাকগ্রাউন্ড পরিবর্তন করতে পারেন।

+

ব্যাকগ্রাউন্ড টি আপনি সেট করতে পারেন স্বচ্ছ ভাবে যাতে করে আপনি স্পষ্টভাবে যে কোন রং মুছে ফেলতে পারেন, মূল উপাদানের ব্যাকগ্রাউন্ড প্রকাশ করে।

+
+
+ উদাহরণ
+

এই টিউটোরিয়ালে উদাহরণ বাক্সগুলোতে বর্ণহীন হলুদ ব্যাকগ্রাউন্ড ব্যবহার করা হয়েছে:

+ 
background-color: #fffff4;
+
+

আরও বিস্তারিত বাক্সগুলো এই বর্ণহীন ধূসর ব্যবহার করেছেঃ

+ 
background-color: #f4f4f4;
+
+
+

 

+

কাজ: কালার কোড এর ব্যবহার

+
    +
  1. আপনার CSS ফাইল সম্পাদন করুন।
    2. +
  2. এখানে মোটা করে যেগুলো দেখানো হয়েছে সেগুলো পরিবর্তন করুন, যাতে করে আপনি আদি অক্ষরগুলো কে একটি বর্ণহীন নীল রং দিতে পারেন। ( যে বিন্যাসগুলো এবং মন্তব্যগুলো আপনার ফাইলে দেখানো হয়েছে সেগুলো সম্ভবত দেখানো ফাইলগুলো হতে ভিন্ন।এই বিন্যাস এবং উক্তিগুলো আপনার মত করে সেভ করে রাখুন।)
    + 
    /*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* paragraphs */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* initial letters */
+strong {
+  color: red;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;}
+
    +
    3. +
  3. ফাইলটি সেভ করুন এবং আপনার ব্রাউজার টিকে রিফ্রেশ করুন যাতে করে আপনি ফলাফলটি দেখতে পারেন।
    4. +
+ + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ + + + + + +
+

প্রতিদন্দিতাঃ
+ আপনার CSS ফাইলে ,সব গুলো কালারের নাম পরিবর্তন করে 3 ডিজিট এর কালার কোড এ পরিবর্তন করুন ফলাফলে কোন প্রভাব না ফেলে।

+

(এটা হয়ত একদম সঠিক ভাবে হবে না, কিন্তু আপনি কাছাকাছি যেতে পারবেন। একদম সঠিক ভাবে করার জন্য আপনার প্রয়োজন 6 ডিজিট এর কোডসমূহ, এবং প্রয়োজন CSS সুনির্দিষ্টকরন দেখা অথবা ব্যবহার করুন একটি গ্রাফিক্স টুল যাতে করে কালার গুলো মিল করাতে পারেন।)

+

                                                                                 প্রতিদ্বন্দ্বিতার জন্য সমাধান দেখুন।

+
+

এরপর কি?

+


+ {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}আপনার নমুনা ডকুমেন্ট এবং আপনার নমুনা stylesheet এর থেকে সম্পূর্ণভাবে আলাদা। এর পরে পরবর্তী বিভাগ  ব্যাখ্যা করবে কেমন করে আপনি এই সম্পূর্ণ আলাদা জিনিস থেকে ভিন্ন কিছু তৈরি করবেন।
+  

diff --git a/files/bn/web/css/getting_started/how_css_works/index.html b/files/bn/web/css/getting_started/how_css_works/index.html new file mode 100644 index 0000000000..652802841f --- /dev/null +++ b/files/bn/web/css/getting_started/how_css_works/index.html @@ -0,0 +1,126 @@ +--- +title: কিভাবে CSS কাজ করে +slug: Web/CSS/Getting_Started/How_CSS_works +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - NeedsReview + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}} এটিCSS Getting Started টিউটোরিয়াল এর তৃতীয় অধ্যায়; এটা আপনার ব্রাউজারে CSS কিভাবে কাজ করে ব্যাখ্যা করে। আপনার নমুনা ডকুমেন্ট বিশ্লেষণ করেন,তার স্টাইল এর বিবরণ প্রকাশের মধ্য দিয়ে।

+ +

তথ্য: CSS কিভাবে কাজ করে

+ +

যখন একটি ব্রাউজার একটি ডকুমেন্ট প্রদর্শন করে, এটি অবশ্যই ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল তথ্য এর সমন্বয় ঘটায়।এটি ডকুমেন্ট টি কে দুই ধাপে প্রসেস করে থাকেঃ

+ +
    +
  1. ব্রাউজার টি মার্ক আপ লেঙ্গুয়েজ এবং সিএসেস একটি কাঠামোতে পরিবর্তন করে যেটির নাম DOM (ডকুমেন্ট অবজেক্ট মডেল). The DOM কম্পিউটার এর মেমরি তে ডকুমেন্ট কে উপস্থাপন করে.এটি ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল এর সমন্বয় ঘটায়।
    2. +
  2. ব্রাউজার টি DOM এর কন্টেন্ট গুলো কে তুলে ধরে।
    3. +
+ +

একটি মার্ক আপ ল্যাঙ্গুয়েজ elementsব্যাবহার করে ডকুমেন্ট এর গঠন ব্যাখ্যা দেয়ার জন্য। ট্যাগ ব্যাবহার করে আপনি একটি elementকে মার্ক করতে পারেন, এর মধ্যে আছে স্ট্রিং যেটা শুরু হয় '<' দিয়ে এবং শেষ হয় '<' দিয়ে। বেশির ভাগ এলিমেন্ট এর জোড়া ট্যাগ আছে।একটি স্টার্ট ট্যাগ আর এন্ড ট্যাগ। স্টার্ট এর ক্ষেত্রে, elementএর নাম, '< >' এর ভিতরে ।এন্ড ট্যাগ এর ক্ষেত্রে element এর নাম এর আগে ,'<' এর পরে '/' বসাতে হবে।

+ +

মার্ক আপ ল্যাঙ্গুয়েজ এর উপর ভিত্তি করে, কিছু element এর শুধু মাত্র স্টার্ট ট্যাগ অথবা শুধুমাত্র সিঙ্গেল ট্যাগ থাকবে যেখানে '/' নাম এর পরে আসে।

+ +

একটি element একটি পাত্র হতে পারে , স্টার্ট ট্যাগ এবং এন্ড ট্যাগ এর মাঝে অন্যান্য উপকরন নিএ।

+ +

একটি DOM এর গাছ এর মত কাঠামো থাকে. মার্ক আপ ল্যাঙ্গুয়েজ এ প্রতিটি element and টেক্সট এর রান একটি  node হিসেবে কাজ করে এই গাছ কাঠামোতে. DOM nodes গুলো পাত্র নয়। বরং, এগুলোকে শিশু node এর অভিভাবক ধরা যায়।

+ +
+
উদাহরনঃ
+আপনার সেম্পল উদাহরনে, <p> ট্যাগ এবং এর অ্যান্ড ট্যাগ </p> একটি পাত্র তৈরি করে + +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

বাস্তব উদাহরণঃ

+ +

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

+ +

DOM এ corresponding P node টি কে অভিভাবক ধরা হয় .এর শিশু node গুলো  হল স্ট্রং nodes and টেক্সট nodes. স্ট্রং nodes গুলো নিজেরাই হল অভিভাবক, text nodes গুলোকে নিয়ে নিজেদের শিশু node হিসেবে ।

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

 DOM বোঝা আপনাকে সাহায্য করবে ডিজাইন করতে, debug করতে and আপনার CSS রক্ষণাবেক্ষণ করতে কারন  DOM হল যেখানে আপনার CSS ডকুমেন্ট এর content মিলিত হয়.

+ +

কার্যকরণ: একটি DOM বিশ্লেষণ

+ +

DOM Inspector ব্যাবহার

+ +

একটি DOM বিশ্লেষণ করতে হলে, আপনার প্রয়জনহবে স্পেশাল সফটওয়্যার এর.এখানে আপনি ব্যাবহার করবেন মোজিলার  DOM Inspector (DOMi) add-on , একটি DOM বিশ্লেষণ এর জন্য। এই কাজ টি করার জন্য আপনাকে add-on টি ইন্সটল করতে হবে।

+ +
    +
  1. মোজিলা ব্রাউজার টি ব্যাবহার করুন আপনার স্যাম্পল HTML ডকুমেন্ট টি ওপেন করবার জন্য.
    2. +
  2. আপনার ব্রাউজার এর মেনু বার থেকে , বাছাই করুন Tools > DOM Inspector, অথবা এভাবে Tools > Web Development > DOM Inspector. +
    +
    আরও
    + +

    যদি আপনার মোজিলা ব্রাউজার এ DOMi না থাকে, তাহলে এটি ব্যাবহার করতে পারেন install it from the Add-ons site এবং ব্রাউজার রি-স্টার্ট করতে হবে। তারপর ফিরে যাবেন টিউটোরিয়াল এ।

    + +

    যদি আপনি DOMi ইন্সটল করতে না চান ( অথবা আপনি নন- মোজিলা ব্রাউজার ব্যাবহার করেন), আপনি ব্যাবহার করতে পারেন Web X-Ray Goggles, যেভাবে বিবরন দেয়া আছে পরবর্তী সেকশন এ। অথবা আপনি সেকশন টি বাদ রেখে পরবর্তী পেজ এ চলে যেতে পারেন. সেকশন টি বাদ দিয়ে গেলে টিউটোরিয়াল এর বাকি অংশে কোন প্রভাব ফেলবে না।

    +
    +
    3. +
  3. DOMi এ, আপনার ডকুমেন্ট এর  nodes গুলোকে বিস্তৃত করুন arrows এ ক্লিক করার মাধ্যমে। +

    দ্রষ্টব্য:  আপনার HTML ফাইল এ স্পেসিং করলে হয়ত DOMi কিছু শুন্য text nodes দেখাতে পারে,যেগুলো আপনি উপেক্ষা করতে পারেন।

    + +

    রেসাল্ট এর অংশ হয়ত এরূপ দেখাবে যা নিরভর করছে আপনি কোন nodes গুলোকে বিস্তৃত করেছেন:

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

    যখন আপনি একটি node সিলেক্ট করবেন, আপনিDOMi's এর ডান-হাত প্যান টি ব্যাবহার করতে পারেন আরও কিছু খুজে বের করার জন্য. উদাহরন সরূপ , আপনি যখন একটি text node সিলেক্ট করবেন, DOMi আপনাকে ডান-হাত  প্যান এ টেক্সট টি দেখাবে.

    + +

    যখন আপনি একটি element node সিলেক্ট করবেন, DOMi সেটি বিশ্লেষণ করবে এবং ডান হাত প্যান এ অনেক তথ্য সরবরাহ করবে।স্টাইল তথ্য হল বিতরন করা তথ্য এর ই একটি অংশ।

    +
    4. +
+ +
+
চেলেঞ্জঃ
+DOMi তে, স্ট্রং  node এ ক্লিক করুন।
+ +

DOMi এর ডান হাত প্যান টি ব্যাবহার করুন খুজে বের করার জন্য কোথায় node এর রঙ লাল রাখা হয়েছে এবং কোথায় এটিকে সাধারন টেক্সট এর তুলনায় গাঢ় দেখান হয়েছে।

+ +
+
Possible solution
+ +

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

+Hide solution
+See a solution for the challenge.
+ +

 Web X-Ray Goggles এর বেবহারঃ

+ +

Web X-Ray Goggles ,  DOM Inspector এর তুলনায় কম তথ্য সরবরাহ  করে কিন্তু এটি ব্যাবহার করা ও ইন্সটল করা সহজ।

+ +
    +
  1. Web X-Ray Goggles এর জন্য হোম পেজ এ যান।
    2. +
  2. পেজের bookmarklet এর লিংক টি কে টেনে ব্রাউজার টুলবার এ আনুন।
    3. +
  3. আপনার স্যাম্পল  HTML ডকুমেন্ট টি খুলুন।
    4. +
  4. Web X-Ray Goggles কে এক্টিভেট করুন টুলবার এর  bookmarklet এ ক্লিক করার মাধ্যমে।
    5. +
  5. আপনার কার্সর এর পয়েন্টআর টিকে, ডকুমেন্ট এর এলেমেন্ট দেখার জন্য ডকুমেন্ট এর উপর ঘোরান।
    6. +
+ +

পরবর্তীতে কি আছে?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}যদি আপনি চ্যালেঞ্জ টি গ্রহন করে থাকেন,আপনি দেখতে পেয়েছেন যে একাধিক জায়গা থেকে স্টাইল তথ্য যোগাযোগ স্থাপন করে একটি এলেমেন্ট  এর জন্য একটি ফাইনাল স্টাইল তৈরি করতে।next page এই সব যোগাযোগ স্থাপনের বেপারে আরও বিবরন দিবে।

diff --git a/files/bn/web/css/getting_started/index.html b/files/bn/web/css/getting_started/index.html new file mode 100644 index 0000000000..7b53c8c554 --- /dev/null +++ b/files/bn/web/css/getting_started/index.html @@ -0,0 +1,27 @@ +--- +title: যেভাবে শুরু করবেন (CSS টিউটোরিয়াল) +slug: Web/CSS/Getting_Started +translation_of: Learn/CSS/First_steps +--- +

সম্পূর্ণ নতুনদের জন্য লেখা এই CSS টিউটোরিয়াল আপনাকে Cascading Style Sheets (ক্যাসকেডিং স্টাইল শিট বা CSS) এর সঙ্গে পরিচয় করিয়ে দেবে। এই গাইডটি ভাষাটির খুবই সাধারণ ফিচারগুলো সাথে উদাহরণসহ আপনাকে পরিচয় করিয়ে দেবে, যা আপনি নিজের ব্রাউজারে ঘরে বসেই চালিয়ে দেখতে পারবেন। এর ফলে আধুনিক ব্রাউজারগুলোতে CSS এর সাধারণ বিষয়গুলো আপনি সহজেই বুঝতে পারবেন।

+

CSS এ নতুন, এমন পাঠকদের জন্যই এই টিউটোরিয়াল লেখা হয়েছে, যদি আপনার CSS এর কিছু অতি সাধারণ বিষয় জানাশোনা তারপরেও আপনি এটি ব্যবহার করতে পারবেন। আপনি যদি CSS এ অভিজ্ঞ হয়ে থাকেন, তবে এই টিউটোরিয়ালটি আপনার বিশেষ একটা উপকার করতে পারবে না, CSS এর মূল পৃষ্ঠায় আরও এ্যাডভান্সড বিষয়ের তালিকা রয়েছে।

+ +

শুরু করার পূর্বে আপনার কি করা প্রয়োজন?

+

এই টিউটোরিয়ালটি ভালোভাবে অনুসরণ করতে চাইলে আপনার প্রয়োজন একটি টেক্সট এডিটর এবং একটি আধুনিক ব্রাউজার। কি করে এগুলো ব্যবহার করতে হয় - এ সংক্রান্ত বেসিক জানাশোনা থাকা ভালো।

+

আপনি যদি ফাইল নিয়ে ঘাঁটাঘাঁটি না করতে চান, তবে আপনি পুরো টিউটোরিয়ালটি শুধু পড়ে যেতে পারেন, এবং ছবিগুলোর দিকে চোখ বুলিয়ে যেতে পারেন, কিন্তু এ পদ্ধতিটি খুব একটা কার্যকর বা ভালো পদ্ধতি নয় বলে আমরা মনে করি।

+

উল্লেখ্য: CSS এর সাহায্যে রং নিয়ে কাজ করা যায়, তাই এই টিউটোরিয়ালের কিছু অংশ রংয়ের ওপর নির্ভরশীল। আপনি এই অংশগুলো সহজেই কাজে লাগাতে পারবেন যদি আপনার একটি রঙিন মনিটর বা ডিসপ্লের পাশাপাশি স্বাভাবিক রং দেখায় কোন শারীরিক সমস্যা না থাকে।

+

যেভাবে টিউটোরিয়ালটি ব্যবহার করবেন

+

এই টিউটোরিয়ালটি ব্যবহারের জন্য প্রতিটা পৃষ্ঠা ভালোভাবে এবং ধারাবাহিকভাবে পড়ুন। যদি আপনি একটি পৃষ্ঠা বাদ দিয়ে ফেলেন, তাহলে পরবর্তী পৃষ্ঠাগুলো বোঝা আপনার জন্য অনেকটা কঠিন হতে পারে।

+

সিএসএস কিভাবে কাজ করে বোঝার জন্য প্রতিটি পৃষ্ঠার "তথ্যাবলী" অংশটি ভালো করে পড়ুন। "হাতে-কলমে" অংশগুলো পড়ে আপনার নিজের কম্পিউটারে CSS ব্যবহারের চেষ্টা করে দেখুন।

+

আপনি কতটুকু বুঝতে পেরেছেন, তা যাচাই করতে প্রতিটি পৃষ্ঠার শেষে থাকা "চ্যালেঞ্জ" গ্রহণ করুন। চ্যালেঞ্জের সমাধান কিন্তু চ্যানলেঞ্জের নিচেই লিংকের মাধ্যমে দেওয়া আছে, তাই ওগুলো খুব বেশি প্রয়োজন হলে না দেখাই ভালো! নিজে নিজে অবশ্যই চেষ্টা করতে হবে এবং যদি ব্যর্থ হন বারবার, তবে সামান্য একটু উঁকি মেরে দেখা দোষের কিছু না!

+

CSS আরও গভীরভাবে বুঝতে চাইলে "অতিরিক্ত তথ্য" লেখা বাক্সগুলোর তথ্য পড়ুন। লিংকগুলোর সাহায্যে CSS সংক্রান্ত আরও অনেক রেফারেন্স তথ্য খুঁজে বের করতে পারবেন।

+

টিউটোরিয়াল ২য় পর্ব

+

এই টিউটোরিয়ালের দ্বিতীয় পর্বে অন্যান্য ওয়েব ও মোজিলা প্রযুক্তির সাথে CSS ব্যবহারের কথা আলোচনা করা হয়েছে।

+
    +
  1. JavaScript (জাভাস্ক্রিপ্ট)
    2. +
  2. SVG গ্রাফিক্স
    3. +
  3. XML ডাটা
    4. +
  4. XBL বাইন্ডিং
    5. +
  5. XUL ইউজার ইন্টারফেস
    6. +
diff --git a/files/bn/web/css/getting_started/readable_css/index.html b/files/bn/web/css/getting_started/readable_css/index.html new file mode 100644 index 0000000000..07801c10fa --- /dev/null +++ b/files/bn/web/css/getting_started/readable_css/index.html @@ -0,0 +1,132 @@ +--- +title: Readable CSS +slug: Web/CSS/Getting_Started/Readable_CSS +tags: + - NeedsReview +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +

{{ CSSTutorialTOC() }}

+

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}This is the 6th section of the CSS Getting Started tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.

+

তথ্য: পাঠযোগ্য CSS

+

আপনি এগুলো আরো পাঠযোগ্য করার জন্য আপনার স্টাইলশীট  এ সাদা স্থান এবং মন্তব্য যুক্ত করতে পারেন।  You can also group selectors together? যখন একই স্টাইল নিয়ম বিভিন্ন ভাবে নির্বাচিত উপাদানের উপর প্রয়োগ করা যায় ।

+

সাদা স্থান

+

হোয়াইট স্পেস মানে প্রকৃত স্পেস, ট্যাব ও নতুন লাইন . আপনি আপনার স্টাইলশীট আরো পাঠযোগ্য করতে সাদা স্থান যোগ করতে পারেন।

+

পৃষ্ঠা বিন্যাস এবং গঠন context এর মধ্যে সাদা স্থান হচ্ছে পৃষ্ঠার অচিহ্নিত অংশ : কলাম এবং টাইপ লাইনের মধ্যে  মার্জিন, gutters, এবং স্থান।

+

 আপনার নমুনা সিএসএস ফাইল বর্তমানে এক নিয়ম প্রতি লাইনে এবং প্রায় সর্বনিম্ন সাদা স্থান  আছে। একটি জটিল স্টাইলশীটে এই বিন্যাস পড়া কঠিন হয়ে দাড়াবে এবং স্টাইলশীট বজায় রাখাও কঠিন হবে ।

+

আপনার নির্বাচিত বিন্যাস সাধারণত একটি ব্যক্তিগত পছন্দ, কিন্তু আপনার স্টাইলশীট যদি ভাগ প্রকল্পের অংশ হয়, তাহলে ঐসব প্রকল্পের তাদের নিজস্ব নিয়মাবলী থাকতে পারে।
+  

+
+
+ উদাহরণ
+
+ কিছু মানুষ যেমন কম্প্যাক্ট বিন্যাস আমরা  ব্যবহার করছি , শুধুমাত্র একটি লাইন বিভাজন যখন এটা খুব দীর্ঘ হয়ে যায় :
+
+ 
.carrot {color: orange; text-decoration: underline; font-style: italic;}
+
+

কিছু মানুষ প্রতি লাইনে একটি মান পছন্দ করে :

+ 
.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+
+

কিছু মানুষ  indention ব্যবহার করে যেমন- দুই স্পেস, চার স্পেস  অথবা একটি ট্যাব  হচ্ছে সাধারণ:

+ 
.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+
+

 কিছু মানুষ সবকিছু  ঊর্ধ্বাভাবে  লাইনে লিখতে পছন্দ করে (কিন্তু এর মত একটি বিন্যাস বজায় রাখা কঠিন):

+ 
.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+
+

কিছু মানুষ পাঠযোগ্যতা উন্নত করার লক্ষে্য  মিশ্র হোয়াইটস্পেস ব্যবহার করে।

+ 
.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+
+
+

কিছু মানুষ বিন্যাসের জন্য ট্যাব ব্যবহার করেন । কিছু মানুষ শুধুমাত্র ফাঁকা স্থান ব্যবহার করেন।

+

মন্তব্য

+

CSS এর মধ্যে মন্তব্য শুরু হয় /* এবং শেষ হয় */ দিয়ে ।

+

আপনি আপনার স্টাইলশীট এ প্রকৃত মন্তব্য করতে মন্তব্য ব্যবহার করতে পারেন, এবং এছাড়াও  সাময়িকভাবে উদ্দেশ্যে পরীক্ষার জন্য একটা অংশ মন্তব্য করতে  পারেন ।

+

স্টাইলশীট  মন্তব্য অংশ আউট  করার জন্য, সে অংশ একটি একটি মন্তব্যে লিখুন যাতে ব্রাউজার এটি উপেক্ষা করে। আপনি সতর্ক থাকুন যেখানে মন্তব্য  শুরু এবং শেষ। বাকি স্টাইলশীট এ সঠিক স্যনটেক্স থাকতে হবে।

+
+
+ উদাহরণ
+ 
/* প্রথম অনুচ্ছেদে প্রাথমিক অক্ষর C এর জন্য শৈলী  */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+

দলবদ্ধ নির্বাচক

+

যখন অনেক উপাদানের একই শৈলী থাকে, আপনি নির্বাচক একটি গ্রুপ উল্লেখ করে কমা দিয়ে তাদের পৃথক করতে পারেন। ঘোষণা সমস্ত নির্বাচিত উপাদানের ক্ষেত্রে প্রযোজ্য।

+

অন্যত্র আপনার স্টাইলশীট আপনি আবার পৃথকভাবে একই নির্বাচক নির্দিষ্ট করতে পারেন, তাদের ব্যক্তিগত শৈলী নিয়ম প্রযোজ্য।

+
+
+ উদাহরণ
+

এই নিয়ম  {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, এবং {{ HTMLElement("h3") }} উপাদান একই রং তৈরি করে।

+

 শুধুমাত্র এক জায়গায় রঙ উল্লেখ করা সুবিধাজনক, যদি না এটি পরিবর্তন করা হয়।

+ 
/* color for headings */
+h1, h2, h3 {color: navy;}
+
+
+

প্রক্রিয়া: মন্তব্য যোগ এবং বিন্যাস উন্নতি

+
    +
  1. আপনার CSS ফাইল সম্পাদনা করুন, এবং এটি এই নিয়ম আছে কিনা তা নিশ্চিত করুন (in any order): + 
    strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+
    +
    2. +
  2. এটি আরো পাঠযোগ্য করুন সাজানোর দ্বারা এমন একটি উপায়ে যেন এটি আপনি যৌক্তিক খুঁজে  পান , এবং হোয়াইটস্পেস এবং মন্তব্য যুক্ত করে যাই হোক না কেন  যে উপায়  আপনি সেরা মনে করেন।
    3. +
  3. আপনার ব্রাউজারে প্রদর্শন ফাইল সংরক্ষণ করুন এবং রিফ্রেশ করুন,নিশ্চিত করুন যে স্টাইলশীট যেভাবে কাজ করে আপনার পরিবর্তন তাকে প্রভাবিত না করেঃ  + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    4. +
+
+
+ চ্যালেঞ্জ
+

আপনার স্টাইলশীট অংশের আউট মন্তব্য, অন্য কিছু পরিবর্তন ছাড়া, আপনার নথির খুব প্রথম অক্ষর লাল করা,

+ + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+

(এই কাজ করতে একাধিক উপায় আছে ।)

+
+
+ Possible solution
+ One way to do this is to put comment delimiters around the rule for .carrot: + 
/*.carrot {
+  color: orange;
+}*/
+ Hide solution
+ See a solution for the challenge.
+

What next?

+

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to specify the appearance of text in your document.

diff --git a/files/bn/web/css/getting_started/text_styles/index.html b/files/bn/web/css/getting_started/text_styles/index.html new file mode 100644 index 0000000000..2906e46215 --- /dev/null +++ b/files/bn/web/css/getting_started/text_styles/index.html @@ -0,0 +1,109 @@ +--- +title: টেক্সট স্টাইল +slug: Web/CSS/Getting_Started/Text_styles +tags: + - Beginer + - CSS + - 'CSS:Getting_Started' + - Guide + - NeedsLiveSample + - Web +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +

{{ CSSTutorialTOC() }}

+

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}এটি হচ্ছে CSS Getting Started এর ৭ম টীউটোরিয়াল, এখানে টক্সট স্টাইল এর অনেক উদাহরণ দেয়া আছে। একাহে বর্ণনা করা হয়েছে কিভাবে আপনি আপনার নমুনা stylesheet এ বিভিন্ন ফন্ট ব্যাবহার করবেন।

+

তথ্য: টেক্সট স্টাইল

+

সিএসএস স্টাইলিং লেখার জন্য বিভিন্ন  ধরণ আছে।

+

এখানে {{ cssxref("font") }}আপনি আপনার লেখার বিভিন্ন দিক উল্লেখ করতে পারবেন,—যেমন:

+ +
+ 
উদাহরণ
+p {font: italic 75%/125% "Comic Sans MS", cursive;}
+
+

এই নিয়মে বিভিন্ন ফন্টের ধরণ দেয়া আছে, প্রতিটি অনুচ্ছেদ এর লেখা হবে ইতালিক ফরমে।

+

প্রতিটি অনুচ্ছেদ এর মূল উপাদান আকার  ফন্ট সাইজ তিন চতুর্থাংশ সেট করা হয়েছে, লাইন উচ্চতা ১২৫% সেট করা হয়েছে। (স্বাভাবিক তুলনায় একটু বেশি ব্যবধানযুক্ত)।

+

Comic Sans MS এ,কিছু ফন্ট আকার সেট করা থাকে কিন্তু যদি তা গ্রহণ যোগ্য না হয় তবে ব্রাউজার ডিফল্ট কারসিভ (hand-written) আকার ব্যাবহার করতে পারবে।

+

এই নিয়মে বোল্ড এবং ছোট হাতের অক্ষরের পার্শ্ব প্রতিক্রিয়া আছে:(setting them to normal):

+
+

ফন্টের আকার

+

আপনি ভবিষৎ বানী করতে পারবেনা আপনার ডকুমেন্টি কোন ধরনের পাঠক পাবে। সুতরাং আপনি একটি উল্লেখযোগ্য ফন্টের আকার দিতে পারেন, সব থেকে ভাল হয় যদি আপনি পছন্দ অনুযায়ী একটি ফন্টের তালিকা দেন।

+

একটি ডিফল্ট আকার  দিয়ে লিস্টটি শেষ করুনঃ serif, sans-serif, cursive, fantasy or monospace.

+

ডকুমেন্ট এ যদি কিছু ফন্ট আকার সমর্থন না করে তবে ব্রাউজার এ আপনি ফন্ট আকার প্রতিস্থাপন করতে পারেন। ডকুমেন্ট এ সমর্থন করে না এমন বিশেষ অক্ষর থাকতে পারে। যদি ব্রাউজার ঐই অক্ষরের কোন ফন্ট আকার খুজে পায় তবে আপনি সেটি ব্যাবহার করতে পারেন।

+

তার নিজস্ব ফন্ট আকার উল্লেখ করার {{ cssxref("font-family") }}এটি ব্যাবহার করুণ।

+

ফন্টের মাপ

+

ব্রাউজার ব্যাবহারকারি পৃষ্ঠাটি পড়ার সময় ডিফল্ট ফন্টরে মার অথবা লেখার আকার পরিবর্তন করতে পারেন,তাই সবথেকে ভাল যদি আপনি একটি আপেক্ষিক মাপ ব্যাবহার করতে পারেন।

+

আপনি ফন্টের ভাল মাপের জন্য কিছু বিল্ট ইন মান ব্যবহার করতে পারেন,যেম্ন-বড়,ছোট এবং মাঝারি। আপনি চাইলে ওই মান গুলো ব্যবহার করতে পারেন যেগুলো মূল উপাদানের ফন্টের আকারের সাথে সম্পর্কিত, যেমন ছোট বড় , ১৫০% অথবা ১.৫ em।একটি "em" হচ্ছে "m" অক্ষরের সমান প্রস্থের(মূল উপাদানের ফন্টের আকারের জন্য); এইভাবে ১.৫em হচ্ছে মূল উপাদানের এক এবং অর্ধ আকার।

+

প্রয়োজনে আপনি একটি নিদ্রিষ্ট আকার , যেমন: 14px (14 pixels) ডিসপ্লে ডিভাইস  এর জন্য অথবা 14pt (14 points) প্রিন্টারের জন্য নির্ধারণ করতে পারেন। এটা তাদের পরিবর্তন করার অনুমতি দেয় না, কারণ এইটা impaired ব্যাবহারকারিদের জন্য অ্যাক্সেসযোগ্য হয় না। আরো  ভাল কৌশল ডকুমেন্টের উপরের স্তরের এবং মাঝারিতে একটি বিল্ট-ইন মান সেট করা হয়,এবং তারপর তার সমস্ত descendent উপাদানের জন্য আপেক্ষিক মাপ সেট করা হয়।

+

তার নিজস্ব একটি ফন্ট সাইজ উল্লেখ করার জন্য {{ cssxref("font-size") }}ব্যাবহার করুন।

+

লাইনের উচ্চতা

+

লাইনের উচ্চতা ২টা লাইনের মধ্যকার স্পেস উল্লেখ করে। আপনার ডকুমেন্টে দীর্ঘ লাইনের অনুচ্ছেদ থাক্লে,বিশেষ করে ফন্টের রাকার যদি ছোট হয় তবে পড়ার সুবিধারতে স্বাভাবিকের থেকে একটু বড় স্পেস দিন।

+

তার নিজস্ব একটি লাইন উচ্চতা উল্লেখ করার জন্য{{ cssxref("line-height") }} ব্যাবহার করুণ।

+

সজ্জা

+

{{ cssxref("text-decoration") }} ব্যাবহার করে আপনি আন্দার-লাইন অথবা অনন্য ডেকোরেশন করতে পারেন। আপনি স্পষ্টভাবে ডেকোরেশন অপসরণ করতেও এটি ব্যাবহার করতে পারেন।

+

অন্যান্য বৈশিষ্ট্য

+

Italic জন্য ব্যাবহার করুন {{ cssxref("font-style") }}: italic;
+ Bold জন্য ব্যাবহার করুন {{ cssxref("font-weight") }}: bold;
+ Small capitals জন্য ব্যাবহার করুন {{ cssxref("font-variant") }}: small-caps;

+

পৃথকভাবে এই গুলো বন্ধ করার জন্য, আপনি স্বাভাবিক মান সুনির্দিষ্টভাবে উল্লেখ করুন।

+
+
+ আরো বিস্তারিত
+

আপনি অন্য কোন উপায়েও বিভিন্ন টেক্সট স্টাইল নির্দিষ্ট করতে পারেন।

+

উদাহরণস্বরূপ, এখানে উল্লিখিত অন্য কিছু মান আছে যা আপনি ব্যবহার করতে পারেন।

+

একটি জটিল স্টাইলশীট,shorthand font property এড়িয়ে চলে কারণ তার কিছু পার্শ্ব প্রতিক্রিয়া আছে (resetting other individual properties)।

+

আরো তথ্যের জন্য Fonts in the CSS Specification দেখতে পারেন। টেক্সট ডেকোরেশন এর আরো তথ্যের জন্য দেখুন Text।

+

আপনি ব্যবহারকারীদের সিস্টেমে ইনস্টল আকারেরউপর নির্ভর করতে না ছাইলে, আপনি ব্যবহার করতে পারেন{{ cssxref("@font-face") }}এটি একটি অনলাইন ফন্ট উল্লেখ করে। যদিও এই নিয়ম সমর্থন করে ব্যাবহারকারিদের এমন একটি ব্রাউজার থাকা প্রয়োজন।

+
+

কর্ম: উল্লেখ ফন্ট

+

একটি সহজ ডকুমেন্ট এর জন্য {{ HTMLElement("body") }} তে আপনি ফন্ট এবং ডকুমেন্ট এর বাকি সেটিংস সেট করতে পারেন।

+
    +
  1. আপনার সিএসএস ফাইল সম্পাদনা করুন.
    2. +
  2. ডকুমেন্ট জুড়ে ফন্ট পরিবর্তন করতে নিম্নলিখিত নিয়ম যোগ করুন. সিএসএস ফাইল উপরে এটি একটি লজিক্যাল জায়গা, কিন্তু আপনি যখন এখানে রাখবেন সেখানেও তার একই প্রভাব পরবে: + 
    body {font: 16px "Comic Sans MS", cursive;}
+
    +
    3. +
  3. একটি মন্তব্য যোগ করুন যেটি নিয়ম ব্যাখ্যা করে এবং একটি স্পেস দিন যাতে করে আপনার পছন্দের বিন্যাসের সাথে এটি মিলে যায়।
    4. +
  4. ফাইল সংরক্ষণ করুন এবং ফলাফল দেখতে আপনার ব্রাউজার রিফ্রেশ করুন। যদি আপনার  Comic Sans MS এ থাকা আকার অথবা হাতে লেখা  itlic আকার সমর্থন না করে ,তবে আপনার ব্রাউজার অন্নক্স কোন আকার পছন্দ করতে পারেঃ
    + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    5. +
  5. ব্রাউজার মেনুবার, View > Text Size > Increase (or View > Zoom > Zoom In) পছন্দ করতে পারে। আপনি স্টাইল টি 16 পিক্সেল উল্লেখ যদিও, ডকুমেন্ট পড়া একটি ব্যবহারকারী মাপ পরিবর্তন করতে পারেন।
    6. +
+
+ Challenge +

Without changing anything else, make all six initial letters twice the size in the browser's default serif font:

+ + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+
+
+ Possible solution
+

Add the following style declaration to the strong rule:

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

 

+ Hide solution
+ See a solution for the challenge.
+

পরবর্তী ?

+

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}আপনার নমুনা ডকুমেন্ট ইতিমধ্যে বিভিন্ন নামে রং ব্যবহার করতে সক্ষম. The next section দেয়া আছে রং এর তালিকা এবং কিভাবে আপনি রং প্রয়োগ করবেন।

diff --git a/files/bn/web/css/getting_started/why_use_css/index.html b/files/bn/web/css/getting_started/why_use_css/index.html new file mode 100644 index 0000000000..2fb9df45a8 --- /dev/null +++ b/files/bn/web/css/getting_started/why_use_css/index.html @@ -0,0 +1,103 @@ +--- +title: কেন CSS ব্যবহার করবেন ? +slug: Web/CSS/Getting_Started/Why_use_CSS +tags: + - NeedsReview +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/bn-BD/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}এটি  CSS Getting Started টিউটোরিয়ালের দ্বিতীয় অধ্যায় এবং ব্যাখ্যা করে কেন ডকুমেন্ট CSS ব্যবহার করে। আপনি CSS ব্যবহার করেন আপনার নমুনা ডকুমেন্ট একটি স্টাইলশীট যুক্ত করতে।

+ +

তথ্য:  CSS কেন ব্যবহার করব ?

+ +

CSS একটি ডকুমেন্টের তথ্য সামগ্রী সেটি কিভাবে প্রদর্শিত হবে তার বিবরণ থেকে পৃথক রাখতে সাহায্য করে। ডকুমেন্ট কিভাবে প্রদর্শিত হবে তার বিবরণ স্টাইল হিসাবে পরিচিত। আপনি কন্টেন্ট থেকে স্টাইল আলাদা রাখুন যাতে আপনি পারেন :

+ + + +
+
উদাহরণ
+ +

আপনার ওয়েব সাইটের হাজার হাজার পৃষ্ঠা থাকতে পারে যারা অনুরূপ। CSS এর ব্যবহার করে,আপনি একটি সাধারণ ফাইলের মধ্যে তথ্য সংরক্ষণ করুন যা সকল পৃষ্ঠা শেয়ার করে।

+ +

যখন একজন ব্যবহারকারী একটি ওয়েব পেইজ প্রদর্শন করে,ব্যবহারকারীর ব্রাউজার পৃষ্ঠার কন্টেন্টের পাশাপাশি স্টাইলের তথ্য লোড করে।

+ +

যখন একজন ব্যবহারকারী একটি ওয়েব পেজ প্রিন্ট করে, আপনি বিভিন্ন স্টাইলের তথ্য প্রদান করেন যা মুদ্রিত পৃষ্ঠা পড়তে সহজ করে তোলে।

+
+ +

HTML দিয়ে সাধারণত আপনি ডকুমেন্টের তথ্য সামগ্রী বর্ণনা করেন মার্কআপ ভাষা ব্যবহার করে,তার স্টাইল নয়।আপনি CSS ব্যবহার  করেন এর স্টাইল নির্দিষ্ট করতে,এর বিষয়বস্তু নয় ।(পরবর্তীতে এই টিউটোরিয়ালে, আপনি এই ব্যবস্থার কিছু ব্যতিক্রম দেখতে পাবেন।)

+ +
+
আরো তথ্য
+ +

এছাড়াও HTML এর মত একটি মার্কআপ ভাষা স্টাইল নির্দিষ্ট করতে কিছু উপায় প্রদান করে।

+ +

উদাহরণস্বরূপ, HTML এ আপনি টেক্সট গাঢ় করতে একটি <b> ট্যাগ ব্যবহার করতে পারেন, এবং আপনি তার <body> ট্যাগে একটি পৃষ্ঠার ব্যাকগ্রাউন্ড রং নির্ধারণ করতে পারবেন।

+ +

আপনি যখন CSS ব্যবহার করেন,আপনি সাধারণত মার্কআপ ভাষার এই বৈশিষ্ট্যগুলি ব্যবহার এড়িয়ে যান যাতে করে আপনার সকল ডকুমেন্ট এর স্টাইল সংক্রান্ত তথ্য এক জায়গায় হয়।

+
+ +

অ্যাকশন: একটি স্টাইলশীট তৈরি

+ +
    +
  1. পূর্বের মত একই ডিরেক্টরির মধ্যে আরেকটি টেক্সট ফাইল তৈরি করুন। এই ফাইলটি আপনার স্টাইলশীট হবে. এটির নাম দিন : style1.css
    2. +
  2. আপনার CSS ফাইলের মধ্যে, এই এক লাইন কপি এবং পেস্ট করুন, তারপর ফাইলটি সংরক্ষণ করুন: + 
    strong {color: red;}
+
    +
    3. +
+ +

আপনার ডকুমেন্টের সাথে স্টাইলশীট যুক্তকরণ

+ +
    +
  1. আপনার ডকুমেন্ট এর সাথে আপনার স্টাইলশীট সংযুক্ত করতে,আপনার HTML ফাইল সম্পাদনা করুন। এখানে হাইলাইট করা লাইনটি যোগ করুন: + + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    2. +
  2. ফাইলটি সংরক্ষণ করুন এবং আপনার ব্রাউজারের ডিসপ্লে রিফ্রেশ করুন। স্টাইলশীটটি প্রথম অক্ষরগুলোকে লাল করে তোলে, এভাবে: + + + + + + +
    Cascading Style Sheets
    +
    3. +
+ +
+
চ্যালেঞ্জ
+ +

লাল ছাড়াও, CSS কিছু অন্যান্য রং এর নাম প্রদান করে।

+ +

রেফারেন্স না দেখে, আরো পাঁচটি  রঙের নাম খুঁজে বের করুন যা আপনার স্টাইলশীট এ কাজ করে।

+ +
+
Possible solution
+ +

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

+Hide solution
+See a solution for the challenge.
+ +

পরবর্তীতে  কি?

+ +

{{nextPage("/bn-BD/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}এখন আপনার একটি পৃথক স্টাইলশীট এর সাথে যুক্ত একটি নমুনা ডকুমেন্ট আছে, আপনি প্রস্তুত জানতে learn more কিভাবে আপনার ব্রাউজার তাদের সমন্বয় করে যখন এটি ডকুমেন্ট প্রদর্শন করে।

diff --git "a/files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" "b/files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" new file mode 100644 index 0000000000..54e48ada6a --- /dev/null +++ "b/files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" @@ -0,0 +1,354 @@ +--- +title: নির্বাচক সমুহ +slug: Web/CSS/Getting_Started/নই +tags: + - Beginner + - CSS + - CSS Selector + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks/Selectors +--- +

{{ CSSTutorialTOC() }}

+

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}এটি CSS Getting Started টিউটোরিয়াল এর ৫ম অংশ; এটি ব্যাখ্যা করে আপনি কিভাবে স্টাইল সমুহ নির্বাচিতভাবে প্রয়োগ করবেন, এবং কিভাবে বিভিন্ন প্রকার নির্বাচক সমুহ বিভিন্ন প্রাধান্য পায়। আপনি আপনার নমুনা নিবন্ধে কিছু এট্রিবিউট যোগ করতে পারেন, এবং আপনি সেসব এট্রিবিউটগুলো আপনার নমুনা স্টাইলশীটে ব্যবহার করতে পারেন ।

+

তথ্যঃ নির্বাচকসমুহ

+

সি এস এস ভাষা ব্যাখ্যা করার জন্য সি এস এস এর নিজস্ব পারিভাষিক শব্দ আছে। এই টিউটোরিয়াল এর পূর্বে, আপনি একটি লাইন তৈরি করুন যেমনঃ

+
strong {
+  color: red;
+}
+
+

সি এস এস পারিভাষিক শব্দে, এই সমগ্র লাইন হল নিয়ম। এই নিয়ম শুরু হ্য় strong দিয়ে, যেটা একটা নির্বাচক। এটা নির্বাচন করে কোন উপাদানগুলো DOM-এ আছে কোন নিয়ম প্রয়োগ করা আছে ।

+

আরো বিস্তারিত

+

বাকা বন্ধনীর ভেতরের অংশে প্রকাশিত হয়।

+
+

মূলশব্দ color হল একটি বৈশিষ্ট্য এবং red হল একটি মান।

+

একই প্রকাশিত অংশে বৈশিষ্ট্যের জোড়া মানের পর সেমিকোলন দিয়ে অন্য বৈশিষ্ট্যের জোড়া মান থেকে আলাদা করা হয়।

+

এই টিউটোরিয়াল এ নির্বাচক যেমন strong উল্লেখ করা হয় ট্যাগ নির্বাচক হিসেবে। সি এস এস সুনির্দিষ্টভাবে এটিকে টাইপ নির্বাচক হিসেবে উল্লেখ করে।

+
+

নির্বাচকসমুহ যেগুলো আপনি সি এস এস নিয়মে ব্যবহার করতে পারেন এই টিউটোরিয়ালের পাতা সেগুলো সম্পর্কে আরো বেশি ব্যাখ্যা করে।

+

ট্যাগ নামের সাথে আপনি এট্রিবিউট এর মান নির্বাচকসমুহে ব্যবহার করতে পারেন।এটি আপনার নিয়মকে আরো সুনির্দিষ্ট করতে অনুমোদন করে।

+

সি এস এস এর দুইটি এট্রিবিউট এর বিশেষ অবস্থা আছে। তারা হল class এবং id.

+

নির্বচকসমুহের ক্লাস

+

class এট্রিবিউট একটি উপাদানকে নামকৃত ক্লাস এ বরাদ্দ করার জন্য ব্যবহার করা হয়। আপনি আপনার ক্লাস এর জন্য কোন নাম পছন্দ করবেন এটা আপনার উপর। একটা নিবন্ধে বিভিন্ন উপাদান একই নামের হতে পারে।

+

আপনার স্টাইলশীটে, ক্লাস নামের পূর্বে আপনি যখন একটি নির্বাচকে ব্যবহার করবেন তখন দাড়ি লিখুন(period) ।

+

নির্বাচকসমুহের আইডি

+

id এট্রিবিউট একটি উপাদানকে একটি আইডিতে বরাদ্দ করার জন্য ব্যবহৃত হয়। আপনি আইডিটার জন্যে কি নাম পছন্দ করবেন এটি আপনার উপর। নিবন্ধটিতে আইডি নাম অবশ্যই একটি এবং অনন্য হতে হবে।

+

আপনার স্টাইলশীটে, আপনি যখন নির্বাচকে ব্যবহার করবেন আইডির পূর্বে একটি নাম্বার সাইন(hash) লিখুন।

+
+
+ উদাহরণ
+ এই এইচ টি এম এল ট্যাগের একটি class এট্রিবিউট এবং একটি id এট্রিবিউট আছেঃ
+ 
<p class="key" id="principal">
+
+

নিবন্ধে আইডি মান, মূল, অবশ্যই এক এবং অনন্য হতে হবে, কিন্তু অন্য ট্যাগসমুহে একই ক্লাস নাম, মূল থাকতে পারে।

+

একটি সি এস এস স্টাইলশীটে, এই নিয়ম সকল উপাদানকে একই ক্লাস key green এর অন্তর্ভূক্ত করেছে। (তারা সবাই {{ HTMLElement("p") }} এর উপাদান নাও হতে পারে)

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

এই নিয়ম একটি উপাদানকে id principal বোল্ড করে :

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

যদি একটির বেশি নিয়ম একটি উপাদান এ প্রয়োগ করা হয় এবং একই বৈশিষ্ট্য উল্লেখ করা হয়, তাহলে সি এস এস নিয়মের উপর প্রাধান্য দেয় যেটা আরো বেশি সুনির্দষ্ট নির্বাচক। একটি আইডি নির্বাচক ক্লাস নির্বাচক এর চেয়ে আরো সুনির্দিষ্ট, যেটা পর্যায়ক্রমে একটি ট্যাগ নির্বাচক এর চেয়ে আরো বেশি সুনির্র্দিষ্ট।

+
+
+ আরো বিস্তারিত
+

আপনি নির্বাচকসমুহকে একত্রিত করতে পারেন, নির্বাচককে আরো বেশি সুনির্দিষ্ট করার জন্যে।

+

উদাহরণ স্বরুপ, নির্বাচক .key ক্লাস নাম key যুক্ত সকল উপাদানকে নির্বাচন করে। নির্বাচক p.key ক্লাস নাম key যুক্ত উপাদানকে শুধুমাত্র {{ HTMLElement("p") }} নির্বাচন করে ।

+

আপনি দুইটি বিশেষ এট্রিবিউট class এবং id দ্বারা নিয়ন্ত্রিত নন। আপনি অন্য এট্রিবিউট সুনির্দিষ্ট করতে পারেন স্কয়ার বন্ধনী ব্যবহার করে। যেমন, নির্বাচক [type='button']button মানের একটি type এট্রিবিউট দ্বারা সকল উপাদানকে নির্বাচিত করে ।

+
+

যদি স্টাইলশীটে নিয়মগুলো পরস্পর বিরোধী হ্য় এবং তারা সমানভাবে সুনির্দিষ্ট হয়, তাহলে তারা সি এস এস নিয়মকে প্রাধান্য দেয় যেটা স্টাইলশীটে পরের দিকে আছে।

+

যখন পরস্পর বিরোধী নিয়মের কারণে আপনার সমস্যা হবে, আরো সুনির্দিষ্ট কোন নিয়মের দ্বারা এটি সমাধান করার চেষ্টা করুন, তাহলে সেটাই প্রাধান্য পাবে। যদি আপনি সেটা করতে না পারেন, চেষ্টা করুন স্টাইলশীটের শেষের দিকের কোন নিয়মের কাছাকাছি যেতে তাহলে সেটিই প্রাধান্য পাবে।

+

নকল ক্লাসের নির্বাচকসমূহ

+

একটি pseudo-class সি এস এস এর মূলশব্দ নির্বাচকের সাথে যুক্ত যেটা উপাদানের বিশেষ অবস্থা নির্বাচনের জন্য সুনির্দিষ্ট করে। উদাহরণ সরূপ, {{ Cssxref(":hover") }} একটা স্টাইল প্রয়োগ করা যাবে যখন কোন ব্যবহারকারী নির্বাচকের দ্বারা সুনির্দিষ্ট করে দেয়া উপাদানের উপর চলাচল করবে।

+

নকল ক্লাসসমুহ, নকল উপাদানগুলোর সাথে, আপনাকে একটি উপাদানের উপর শুধু স্টাইল প্রয়োগ করতে দেয়না, সেই সাথে বহিরাগত কারণের সাথে সংযোগ করে যেমন নেভিগেটরের ইতিহাস ({{ cssxref(":visited") }}, উদাহরণ স্বরূপ), এটার উপাদানের অবস্থা (যেমন {{ cssxref(":checked") }} কিছু উপাদানের গঠনের উপর), অথবা মাউসের অবস্থান (যেমন {{ cssxref(":hover") }} যেটা আপনাকে জানাবে মাউসটি উপাদানের উপর আছে নাকি নাই). একটি সম্পূর্ণ নির্বাচক সমুহের তালিকা, CSS3 Selectors working spec এখানে যান।

+
+
+ Syntax
+ 
selector:pseudo-class {
+  property: value;
+}
+
+
+

নকল ক্লাসসমুহের তালিকা

+ +

তথ্যঃ সম্পর্কের ভিত্তিতে নির্বাচক সমুহ

+

উপাদান সমুহের মধ্যে পারস্পরিক সম্পর্কের ভিত্তিতে উপাদান সমুহ নির্বাচন করার জন্য সি এস এস এর কিছু উপায় আছে। নির্বাচক সমুহকে আরো বেশি সুনির্দিষ্ট করার জন্যে আপনি এগুলো ব্যবহার করতে পারেন।

+ + + + + + + + + + + + + + + + + + + + + + + + +
+ সম্পর্কের ভিত্তিতে পরিচিত নির্বাচকসমুহ
নির্বাচকনির্বাচিতসমুহ
A EAny E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)
A > EAny E element that is a child of an A element
E:first-childAny E element that is the first child of its parent
B + EAny E element that is the next sibling of a B element (that is: the next child of the same parent)
+

আপনি জটিল সম্পর্কগুলোকে প্রকাশ করার জন্যে এগুলো একত্রিত করতে পারেন।

+

আপনি * (asterisk) এই চিহ্নটি ব্যবহার করতে পারেন "যেকোনো উপাদান" বুঝানোর জন্যে।

+
+
+ উদাহরণ
+

একটি এইচ টি এম এল টেবিলের একটি id এট্রিবিউট, কিন্তু এটির সারি এবং ছোট অংশগুলোর আলাদা আলাদা সনাক্তকারী থাকে নাঃ

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

এই নিয়মগুলা সকল সারির প্রথম অংশকে বোল্ড করে, এবং দ্বিতীয় অংশকে মনোস্থানিক করে। তারা শুধু একটি সুনির্দিষ্ট টেবিলকে প্রভাবিত করেঃ

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

ফলাফল এরূপ দেখায়ঃ

+ + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+
+
+ আরো বিস্তারিত
+

প্রচলিত উপায়ে, আপনি যদি একটি নির্বাচককে আরো সুনির্দিষ্ট করেন, তখন আপনি এটার প্রাধান্য বৃদ্ধি করতে পারবেন।

+

আপনি যদি পদ্ধতিগুলো ব্যবহার করেন, আপনার নিবন্ধে অনেকগুলো ট্যাগ-এর class অথবা id এট্রিবিউটগুলোকে আপনি সুনির্দিষ্ট করার প্রয়োজন পরিহার করতে পারবেন। তা ব্যতীত, সি এস এস কাজ করবে না।

+

অনেক বড় নকশার ক্ষেত্রে যেখানে গতি গুরুত্বপূর্ণ, আপনি আপনার স্টাইলশীটকে আরো নিপুণ করতে পারবেন জটিল নিয়মসমুহকে পরিহার করে যেটা উপাদান সমুহের মধ্যে পারস্পরিক সম্পর্কের উপর নির্ভর করে।

+

টেবিল সম্পর্কে আরো বেশি উদাহরণ এর জন্যে, সি এস এস রেফারেন্স পাতায় Tables দেখুন।

+
+

কাজঃ ক্লাস এবং আইডি নির্বাচক সমুহের ব্যবহার

+

১। আপনার এইচ টি এম এল ফাইলটি সম্পাদনা করুন, কপি এবং পেস্ট করার মাধ্যমে।

+

২। তারপর প্রথম কপিতে আইডি এবং ক্লাস এট্রিবিউট ব্যবহার করুন এবং একটি আইডি এট্রিবিউট দ্বিতীয় কপিতে দিন যেমন নিচে দেখানো হয়েছে। বিকল্পরূপে, আবার সমগ্র ফাইলকে কপি এবং পেস্ট করুনঃ

+
    +
  1. + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p id="first">
+      <strong class="carrot">C</strong>ascading
+      <strong class="spinach">S</strong>tyle
+      <strong class="spinach">S</strong>heets
+    </p>
+    <p id="second">
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    2. +
  2. এখন আপনি আপনার সি এস এস ফাইলটি সম্পাদনা করুন। সমগ্র বিষয় পুনঃস্থাপন করুনঃ
    + 
    strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+
    +
    3. +
  3. ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ
    + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    + লাইনের ক্রম কোন প্রভাব ফেলে না এটি দেখানোর জন্য আপনি আপনার সি এস এস ফাইলে লাইনগুলো পুনরায় সাজানোর চেষ্টা করতে পারেন।
    +
    +

    ক্লাস নির্বাচকসমুহ .carrot এবং .spinach ট্যাগ নির্বাচক strong এর উপরে প্রাধান্য পায়।

    +

    আইডি নির্বাচক #first ক্লাস এবং ট্যাগ নির্বাচকের উপরে প্রাধান্য পায়।

    +
    4. +
+
+
+ প্রতিদ্বন্দ্বিতাসমুহ
+
    +
  1. আপনার এইচ টি এম এল ফাইল পরিবর্তন করা ছাড়া, আপনার সি এস এস ফাইলে একটি একক নিয়ম যোগ করুন যেটা সকল প্রথম অক্ষরকে একই রং এর করে রাখে যেমন এখন তারা আছে, কিন্তু দ্বিতীয় বর্ণনায় অন্য সকল টেক্সটকে নীল করে।
    + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    2. +
  2. আপনি যে নিয়মটি এইমাত্র যোগ করেছেন তা এখন পরিবর্তন করে (অন্য কিছু পরিবর্তন না করে), প্রথম বর্ণনাকে নীল করার জন্যেঃ
    + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    3. +
+
+
+ Possible solution
+
    +
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: + 
    #second { color: blue; }
+
    + A more specific selector, p#second also works.
    2. +
  2. Change the selector of the new rule to be a tag selector using p: + 
    p { color: blue; }
+
    +
    3. +
+ Hide solution
+ See a solution for the challenge.
+

কাজঃ নকল ক্লাসের নির্বাচকসমুহের ব্যবহার

+
    +
  1. নিচের মত একটি এইচ টি এম এল ফাইল তৈরি করুনঃ
    2. +
  2. + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
+  </body>
+</html>
+
    +
    3. +
  3. এখন আপনার সি এস এস ফাইল সম্পাদনা করুন। সমগ্র বিষয়গুলো পুনঃস্থাপন করুনঃ
    + 
    a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+
    +
    4. +
  4. ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ (আপনার মাউসটি নিচের লিংকের উপর রাখুন প্রভাব দেখার জন্য): + + + + + + +
    Go to our Home page  
    +
    5. +
+

কাজঃ সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহের ব্যবহার

+

সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহ দ্বারা আপনি জটিল ক্যাসকেড এলগরিদম তৈরি করতে  পারবেন।এটি ব্যবহার করার জন্য একটি সাধারণ কৌশল , উদাহরণ স্বরূপ, in order to create pure-CSS dropdown menus তৈরি করার জন্য (এটি শুধুমাত্র সি এস এস, JavaScript ব্যতিরেকে). এই কৌশল এর সারাংশ হল নিম্নে বর্ণিত নিয়মের মত একটি নিয়ম তৈরি করাঃ

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

প্রয়োগ করার জন্য একটি এইচ টি এম এল গঠন নিম্নে দেয়া হলঃ

+
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menu</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Submenu</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Submenu</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+

আপনার সম্পূর্ণ CSS-based dropdown menu example দেখুন একটি সম্ভব সংকেতের জন্য।

+

পরবর্তীতে কি?

+

আপনার নমুনা স্টাইলশীট এখন এবং জটিল দেখাতে শুরু করেছে। পরবর্তী অংশ সি এস এসকে easier to read করার উপায় বর্ণনা করে {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

diff --git "a/files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" "b/files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" new file mode 100644 index 0000000000..40292c7e7e --- /dev/null +++ "b/files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" @@ -0,0 +1,301 @@ +--- +title: Layout +slug: Web/CSS/Getting_Started/লে-আউট +tags: + - CSS + - CSS Float + - CSS Text Align + - CSS Unit + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsLiveSample + - NeedsUpdate + - Web + - needs review +translation_of: Learn/CSS/CSS_layout +--- +

{{ CSSTutorialTOC() }}

+

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}} CSS শুরু করার ১২তম অধ্যায় এটি;  আপনার ডকুমেন্টের লে-আউট কীভাবে adjust করা যায় তা রয়েছে এখানে। আপনার নমুনা ডকুমেন্টের লে-আউট আপনি পরিবর্তন করতে পারেন।

+

তথ্যঃ লে-আউট

+

বিভিন্ন দৃশ্যমান প্রভাব বিশেষায়িত করার জন্য আপনি CSS ব্যবহার করতে পারেন যা আপনার ডকুমেন্টের লে-আউট পরিবর্তন করে। লে-আউট বিশেষায়িত করার কিছু পদ্ধতি বেশ অগ্রসর এবং সেগুলো এই বেসিক টিউটোরিয়ালের ঊর্ধ্বে।

+

আপনি যখন একাধিক ব্রাউজারে প্রায় একইরকম দৃশ্যমান লে-আউট ডিজাইন করেন, তবে তা আপনার স্টাইলশীট ব্রাউজারের ডিফল্ট স্টাইলশীট এবং লে-আউট ইঞ্জিনের সাথে যেভাবে interact করে তা বেশ জটিল হতে পারে। এটিও একটি অগ্রসরমান বিষয়, এই বেসিক টিউটোরিয়ালের ঊর্ধ্বে।

+

এই পেজে আপনার চেষ্টা করে দেখার জন্য কিছু সহজ কৌশল বর্ণনা করা আছে।

+

ডকুমেন্ট স্ট্রাকচার

+

আপনি যদি আপনার ডকুমেন্টের লে-আউট নিয়ন্ত্রণ করতে চান তবে আপনাকে এর স্ট্রাকচার পরিবর্তন করতে হতে পারে।

+

আপনার ডকুমেন্টের মার্কআপ ল্যাংগুয়েজের খুব সম্ভবত স্ট্রাকচার তৈরি করার জন্য general-purpose ট্যাগ আছে। যেমন ধরুনঃ HTMLএ আপনি স্ট্রাকচার তৈরির জন্য {{ HTMLElement("div") }} এলিমেন্ট ব্যবহার করতে পারেন।

+
+
+ উদাহরণ
+

নমুনা ডকুমেন্টে, দ্বিতীয় শিরোনামের আওতায় সংখ্যায়িত প্যারাগ্রাফে নিজস্ব কোন কন্টেইনার নেই।

+

আপনার স্টাইলশীট প্যারাগ্রাফগুলোর চারদিকে বর্ডার টানতে পারে না, কারণ এই সেক্টরটি বিশেষায়িত করার জন্য কোন এলিমেন্ট নাই।

+

স্ট্রাকচারের এই সমস্যা সমাধানের জন্য, আপনি প্যারাগ্রাফের চারদিকে একটি {{ HTMLElement("div") }} ট্যাগ যোগ করতে পারেন। এই ট্যাগটি ,তাই এটি নির্দিষ্ট করা যেতে পারে একটি id অ্যাট্রিবিউট দিয়েঃ

+ 
<h3>Numbered paragraphs</h3>
+<div id="numbered">
+  <p>Lorem ipsum</p>
+  <p>Dolor sit</p>
+  <p>Amet consectetuer</p>
+  <p>Magna aliquam</p>
+  <p>Autem veleum</p>
+</div>
+
+

এখন আপনার স্টাইলশীট দুটি লিস্টের চারদিকে বর্ডার দেওয়ার জন্য একটি রুল ব্যবহার করতে পারেঃ

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

এরকম দেখতে পাওয়ার কথাঃ

+ + + + + + +
+

(A) The oceans

+
+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+
+

সাইজ ইউনিট

+

এত দূর পর্যন্ত এই টিউটোরিয়ালে আপনি pixel (px)এ সাইজ নির্ধারণ করেছেন। কম্পিউটার স্ক্রিনের মত কিছু কিছু ডিসপ্লে ডিভাইসের ক্ষেত্রের জন্য এটি যথাযথ। কিন্তু ব্যবহারকারী যখন ফন্ট সাইজ পরিবর্তন করে তখন আপনার লে-আউটে সমস্যা দেখা দিতে পারে।

+

অধিকাংশ ক্ষেত্রেই শতকরা হিসাবে অথবা ems (em)এ সাইজ নির্দিষ্ট করে দেওয়াই ভাল। em হল nominally চলমান ফন্টের (একটি m এর প্রসস্ততা) সাইজ। ব্যবহারকারী যখন ফন্ট সাইজ পরিবর্তন করেন, আপনার লে-আউট নিজে পরিবর্তন থেকেই হয়ে যায়।

+
+
+ উদাহরণ
+

এই টেক্সটের বামদিকের বর্ডারের সাইজ পিক্সেলে নির্ধারিত।

+

ডানদিকের বর্ডারের সাইজ ems দিয়ে নির্ধারিত।

+

আপনার ব্রাউজারে, ফন্ট পরিবর্তন করে দেখতে পারেন কীভাবে ডানদিকের বর্ডার adjusts হয় কিন্তু বাঁদিকের বর্ডার হয় নাঃ

+ + + + + + +
+
+ আমার আকার পুনঃনিরধারণ করুন
+
+
+
+
+ বিস্তারিত
+

অন্যান্য ডিভাইসের ক্ষেত্রে, অন্যান্য দৈর্ঘ্য একক প্রযোজ্য।

+

এই টিউটোরিয়ালের পরবর্তী পেজে এ সংক্রান্ত আরো তথ্য আছে।

+

মান ও একক সংক্রান্ত বিস্তারিত জানার জন্য, CSS Specificationএ আপনি  see Values ব্যবহার করতে পারেন।

+
+

টেক্সট লে-আউট

+

কোন এলিমেন্টের একাধিক কন্টেন্ট কীভাবে এক লাইনে নিয়ে আসা যায় তা দুইটি প্রপার্টি দিয়ে নির্ধারিত হয়। সাধারণ লে-আউট adjustment এর জন্য আপনি সেগুলো ব্যবহার করতে পারেনঃ

+
+
+ {{ cssxref("text-align") }}
+
+ কন্টেন্ট এক লাইনে নিয়ে আসা। এই ভেল্যুগুলোর যেকোনটি ব্যবহার করেঃ left, right, center, justify
+
+ {{ cssxref("text-indent") }}
+
+ আপনার নির্ধারিত পরিমাণ অনুসারে কন্টেন্ট ইনডেন্ট করেঃ
+
+

শুধুমাত্র লেখাতেই না কোন এলিমেন্টের লেখা সদৃশ যেকোন কনটেন্টে এই প্রপার্টিগুলো প্রয়োগ করা যেতে পারে। খেয়াল রাখবেন, এগুলো এলিমেন্টের children দিয়ে inherited, তাই অবান্তর ফলাফল এড়াতে  আপনাকে খুব সম্ভবত childrenএ সেগুলো বন্ধ করে নেওয়ার প্রয়োজন হতে পারে।

+
+
+ উদাহরণ
+

শিরোনাম মাঝে আনতেঃ

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

ফলাফলঃ

+ + + + + + +
+

(A) The oceans

+
+

যে কোন HTML ডকুমেন্টে, শিরোনামের নিচে আপনি যে কনটেন্ট দেখেন তা গঠনগত ভাবে শিরোনামের আওতাধীন নয়। তাই আপনি যখন এরক্ম কোন শিরোনামকে এক লাইনে নিয়ে আসেন, তখন শিরোনামের নিচের ট্যাগগুলো ওই স্টাইলের অন্তর্ভুক্ত হয় না।

+
+

Floats

+

{{ cssxref("float") }} প্রপার্টি কোন এলিমেন্টকে ডানে-বামে সরায়। এলিমেন্টের অবস্থান ও আকার নির্ধারণের জন্য এটি একটি সহজ উপায়।

+

ডকুমেন্ট কনটেন্টের বাকি অংশ সাধারণত floated এলিমেন্টের চারদিকেই থাকে। অন্যান্য এলিমেন্টগুলোতে {{ cssxref("clear") }} প্রপার্টি ব্যবহার করে আপনি তাদের ফ্লট এর বাইরে থাকা নিয়ন্ত্রণ করতে পারেন।

+
+
+ উদাহরণ
+

আপনার নমুনা ডকুমেন্টে, লিস্ট উইন্ডোতে ছড়িয়ে থাতে পারে। সেগুলোকে বাঁদিকে সরিয়ে আপনি তা রোধ করতে পারেন।

+

শিরোনামগুলোকে সঠিক স্থানে রাখার জন্য, আপনাকে অবশ্যই এটি নির্দিষ্ট করে দিতে হবে যেন সেগুলো ফ্লট মুক্ত থাকেঃ

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

এমন দেখতে পাওয়ার কথাঃ

+ + + + + + +
+

(A) The oceans

+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+

(বক্সের ডানদিকে সামান্য padding দরকার, সেখানে বর্ডার লেখার খুবই কাছে হয়ে গিয়েছে।)

+

অবস্থান নির্ধারণ

+

চারটি উপায়ে আপনি কোন এলিমেন্টের অবস্থান নির্ধারণ করতে পারেন {{ cssxref("position") }} প্রপার্টি এবং নিচের যেকোন একটি ভেল্যু নির্দিষ্ট করে।

+

এগুলো এডভান্সড প্রপার্টি। সহজভাবেও এগুলো ব্যবহার করা যায় — সেজন্যই এই বেসিক টিউটোরিয়ালে এ সম্পর্কে বলা হয়েছে। তবে কমপ্লেক্স লে-আউটের জন্য এগুলো ব্যবহার করা কিছুটা জটিল হতে পারে।

+
+
+ relative
+
+ এলিমেন্টের স্বাভাবিক অবস্থানের আপেক্ষিক পরিবর্তন করা হয়। Use this to shift an element by a specified amount. You can sometimes use the element's margin to achieve the same effect.
+
+ fixed
+
+ এক্ষেত্রে এলিমেন্টের অবস্থান নির্দিষ্ট। এলিমেন্টের অবস্থান ডকুমেন্ট উইন্ডো অনুযায়ী নির্ধারণ করুন। বাকি ডেকুমেন্ট স্ক্রল করলেও এ ক্ষেত্রে এলিমেন্টটি স্থির থাকবে।
+
+ absolute
+
+ parent এলিমেন্টের তুলনায় এলিমেন্টের অবস্থান স্থির থাকবে। শুধুমাত্র একটি parent যার নিজের অবস্থান relative, fixed অথবা absolute দিয়ে নির্ধারিত সেটি কাজ করবে। position: relative নির্দিষ্ট করে আপনি যেকোন parent এলিমেন্টকেই এর জন্য প্রস্তুত করে নিতে পারেন; এর জন্য কোন শিফট ব্যবহার না করেই।
+
+ static
+
+ ডিফল্ট। অবস্থান নির্ধারণ করা সম্পূর্ণ বন্ধ করার প্রয়োজন হলে এই ভেল্যুটি ব্যবহার করুন।
+
+

position প্রপার্টির এই ভেল্যুগুলোর সাথে সাথে (static ব্যতীত), আরো কিছু প্রপার্টি নির্দিষ্ট করুনঃ top, right, bottom, left, width, height। আপনি কোথায় আপনার এলিমেন্টটি দেখতে পেতে চান তা এগুলো নির্দেশ করে এবং এর সাথে সাথে আকারও।

+
+
+ উদাহরণ
+

দুইটি এলিমেন্ট একে অপরের উপর অবস্থাআন দেওয়ার জন্য, আপনার ডকুমেন্টের ভেতরে দুইটি এলিমেন্টসহ একটি  parent কন্টেইনার তৈরি করুনঃ

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

আপনার স্টাইলশীটে, parents এর অবস্থান relative করুন। এখানে কোন প্রকৃত শিফট নির্ধারণের কোন প্রয়োজন নেই। children এর অবস্থান absolute নির্ধারণ করুনঃ

+ 
#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+}
+
+#forward, #back {
+  position: absolute;
+  margin:0px; /* no margin around the elements */
+  top: 0px; /* distance from top */
+  left: 0px; /* distance from left */
+}
+
+#forward {
+  color: blue;
+}
+
+#back {
+  color: red;
+}
+
+

ফলাফলে ফরওয়ার্ড শ্ল্যাশের উপরে ব্যাকশ্ল্যাশ দিয়ে এমনটি দেখতে পাওয়ার কথাঃ

+
+

/

+

\

+
+ + + + + + +
 
+
+
+
+ আরো বিস্তারিত
+

অবস্থান নির্ধারণের পুরো বিষয়টির উপর CSS Specificationএ দুইটি জটিল অধ্যায় আছেঃ  Visual formatting model এবং Visual formatting model details.

+

আপনি যদি একাধিক ব্রাউজারে কার্যকর কোন স্টাইলশীট ডিজাইন করতে থাকেন, তবে আপনারও তা অ্যাকাউন্ট ডিফারেন্সে নেওয়ার দরকার হতে পারে, যেভাবে ব্রাউজার স্ট্যান্ডার্ডের সাথে interpret করে এবং খুব সম্ভবত নির্দিষ্ট কিছু ব্রাউজারের বিশেষ কিছু ভার্সনে বাগ করতে পারে।

+
+

Action: লে-আউট নির্ধারণ

+
    +
  1. আপনার নমুনা ডকুমেন্ট পরিবর্তন করুন, doc2.html এবং স্টাইলশীট, style2.css, এই অংশে উপরের উদাহরণ ডকুমেন্ট স্ট্রাকচার এবং ফ্লটস।
    2. +
  2. ফ্লটস উদাহরণে, আপনার padding যুক্ত করুন ডানদিকের বর্ডার থেকে টেক্সট 0.5 em দূরে সরানোর জন্য।
    3. +
+
+
+ চ্যালেঞ্জ
+

আপনার নমুনা ডকুমেন্ট পরিবর্তন করুন, doc2.html, শেষ করার আগ দিয়ে এই ট্যাগটি যুক্ত করে, </body> ট্যাগের ঠিক আগে।

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

এই টিউটোরিয়ালে আপনি যদি ইমেজ ফাইলটি আগে থেকে ডাউনলোড না করে থাকেন, তবে এখন সেটি ডাউনলোড করে নিন এবং নমুনা ফাইলের মত একই ডিরেক্টরিতে এটি রাখুনঃ

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

আপনার ডকুমেন্টের কোথায় ইমেজটি দেখা যেতে ঠিক করে নিন। এবার আপনার ব্রাউজার রিফ্রেশ করুন আপনার কাজ সঠিক হয়েছে কিনা তা দেখার জন্য।

+

আপনার স্টাইলশীটে একটি রুল যুক্ত করুন যা আপনার ডকুমেন্টে উপরের দিকে ডানে ইমেজটি রাখে।

+

আপ্নার ব্রাউজার রিফ্রেশ করে উইন্ডোটি ছোট করুন। যখন আপনি আপনার ডকুমেন্ট স্ক্রল করেন তখন দেখুন ইমেজটি উপরের দিকে ডানে থাকে কিনাঃ

+
+
+

(A) The oceans

+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+

 

+
+ Yellow map pin
+
+
+
+

 এই চ্যালেঞ্জটির একটি সমাধান দেখুন।

+

এর পরে?

+

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }} এইমাত্র আপনি এই বেসিক CSS টিউটোরিয়ালের সব টপিক প্রায় শেষ করে ফেলেছেন। পরবর্তী পেজটি CSS রুলের আরো অ্যাডভান্সড সিলেক্টর বর্ণনা করে এবং আরো কিছু নির্দিষ্ট উপায় যা দিয়ে আপনি টেবিল স্টাইল করতে পারেন।

diff --git a/files/bn/web/css/index.html b/files/bn/web/css/index.html new file mode 100644 index 0000000000..f26dd6aaa0 --- /dev/null +++ b/files/bn/web/css/index.html @@ -0,0 +1,73 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Landing + - Layout + - NeedsReview + - Reference +translation_of: Web/CSS +--- +

Cascading Style Sheets,  CSS, মূলত  stylesheet সংক্রান্ত ভাষা  যা একটি HTML or XML দিয়ে (অনেক ধরনের XML ভাষা সহ যেমন  SVG অথবা XHTML) লেখা নথির উপস্থাপনায় বাবহারিত হয়ে থাকে । CSS গঠনকৃত উপাদান গুলো পর্দায় , কাগজে, বক্তব্য বা অন্য কোন মাধ্যমে  কিভাবে উপস্থাপিত হবে তা ব্যাখ্যা করে থাকে।

+ +

CSS মুক্ত ওয়েবের একটি কেন্দ্রীয় ভাষা এবং এর প্রমিত  W3C specification  আছে। ধাপে ধাপে বিকশিত হবার কারণে, CSS1 বর্তমানে অপ্রচলিত , CSS2.1 একটি পরামর্শ স্বরূপ হয়ে গিয়েছে এবং CSS3, এখন ছোট ছোট মডিউলে বিভক্ত, যা প্রমিত রূপ লাভের দিকে অগ্রসর হচ্ছে।

+ +
+ + +
+
+

ডকুমেন্টেশন এবং টিউটোরিয়াল

+ +
+
সিএসএস এর মৌলিক ধারনা
+
এখানে সিনট্যাক্স ও ভাষার ধরন এবং স্পেসিফিসিটি, ইনহেরিট্যান্স, বক্স মডেল, মার্জিন কলাপসিং, স্ট্যাকিং, ব্লক ফরম্যাটিং এর ধারনা, বা প্রাথমিক, কম্পিউটকৃত, ব্যবহারকৃত ও আসল মানের সাথে পরিচিত করা হয়েছে। সিএসএস শর্টহ্যান্ড প্রপার্টি সমূহও এখানে বর্ণনা করা হয়েছে।
+
সিএসএস ডেভেলপার গাইড
+
আপনার কন্টেন্টকে আরও আকর্ষণীয় করে দেখানোর জন্য যেসব সিএসএস কৌশল সমূহ আপনার অবশ্যই শেখা দরকার, এখানে সেগুলো বর্ণনা করা হয়েছে।
+
সাধারন সিএসএস জিজ্ঞাসা
+
সিএসএস নিয়ে সাধারণত জিজ্ঞাসিত প্রশ্ন ও তার উত্তর এই নিবন্ধে দেয়া হয়েছে।
+
+ +

সিএসএস এর জন্য টুল সমূহ

+ +
    +
  • W3C এর সিএসএস ভ্যালিডেশন সেবা পরীক্ষা করে দেখে যে যেই সিএসএস টি দেয়া হয়েছে, সেটি ঠিকঠাক আছে কি না বা সিএসএস এর মধ্যে কোন ভুল আছে কি না। এটি একটি অমূল্য ডিবাগিং টুল।
    • +
  • ফায়ারফক্সের ফায়ারবাগ এক্সটেনশন, ডেভেলপারদের কাছে একটি জনপ্রিয় এক্সটেনশন বা টুল। এটি ব্যবহার করে আপনি একটি পাতার এইচটিএমএল, সিএসএস ও জাভাস্ক্রিপ্ট ব্রাউজারের মধ্যেই অনেক সহজে সম্পাদনা করতে পারবেন।
    • +
  • ফায়ারফক্সের ওয়েব ডেভেলপার এক্সটেনশনও লাইভ সাইট সম্পাদনা করার সুবিধা দেয়। এটা সিম্পল কিন্তু ফায়ারবাগের চেয়ে একটু কম সুবিধা দেয়।
    • +
  • ফায়ারফক্সের এডিট সিএসএস এক্সটেনশন সাইডবারে সিএসএস এডিট করার সুবিধা প্রদান করে।
    • +
+
+ +
+ + +
    +
  • সিএসএস টেক্সট-ডেকোরেশন লেভেল ৩ Candidate Recommandation অবস্থায় পৌছেছে। এর অর্থ হচ্ছে text-decoration-* ও text-emphasis-* প্রপার্টি দুটো খুব দ্রুত ব্যবহারোপযোগী হবে। আমাদের অনেক পরিচিত {{cssxref("text-shadow")}}ও এখানে বর্ণনা করা হয়েছে। (১লা আগস্ট, ২০১৩)
    • +
  • গেকো এখন {{cssxref("background-origin")}}: local সমর্থন করে। ফায়ারফক্স ২৫ এর পর থেকে (নাইটলিতে ইতোমধ্যে চলে এসেছে) এটা ব্যবহারযোগ্য হবে। (২৫ জুলাই, ২০১৩)
    • +
  • পয়েন্টার ইভেন্ট সমূহ Candidate Recommandation অবস্থায় পৌছেছে। তার মানে touch-action ও খুব দ্রুত ব্যবহারোপযোগী হবে। বর্তমানে এটা শুধু ইন্টারনেট এক্সপ্লোরার ১০ এ যুক্ত করা হয়েছে। তবে এটা ব্যবহার করার জন্য -ms- প্রেফিক্স ব্যবহার করতে হবে। (৬ মে, ২০১৩)
    • +
  • গেকোর flexible boxes সমর্থন সাম্প্রতিক একটি বৈশিষ্ট্যের সাথে সামঞ্জস্য স্পষ্ট করার জন্য অনুমোদিত হয়েছেঃ ফায়ারফক্স ২৩ থেকে {{cssxref("::before")}} ও {{cssxref("::after")}} ফ্লেক্সের উপকরণ হবে, এবং {{cssxref("order")}} ও {{cssxref("align-self")}} ব্যবহার করে পুনর্বিন্যাস করা যাবে। (৩ মে, ২০১৩)
    • +
+ + + + +
+
+
diff --git a/files/bn/web/events/index.html b/files/bn/web/events/index.html new file mode 100644 index 0000000000..a3abc9b056 --- /dev/null +++ b/files/bn/web/events/index.html @@ -0,0 +1,3011 @@ +--- +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.

+ +

Most Common Categories

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Resource Events
Event NameFired When
{{event("cached")}}The resources listed in the manifest have been downloaded, and the application is now cached.
{{event("error")}}A resource failed to load.
{{event("abort")}}The loading of a resource has been aborted.
{{event("load")}}A resource and its dependent resources have finished loading.
{{event("beforeunload")}}The window, the document and its resources are about to be unloaded.
{{event("unload")}}The document or a dependent resource is being unloaded.
+ + + + + + + + + + + + + + + + + + + +
Network Events
Event NameFired When
{{event("online")}}The browser has gained access to the network.
{{event("offline")}}The browser has lost access to the network.
+ + + + + + + + + + + + + + + + + + + +
Focus Events
Event NameFired When
{{event("focus")}}An element has received focus (does not bubble).
{{event("blur")}}An element has lost focus (does not bubble).
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Websocket Events
Event NameFired When
openA WebSocket connection has been established.
messageA message is received through a WebSocket.
{{event("error")}}A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).
closeA WebSocket connection has been closed.
+ + + + + + + + + + + + + + + + + + + + + + + +
Session History Events
Event NameFired When
{{event("pagehide")}}A session history entry is being traversed from.
{{event("pageshow")}}A session history entry is being traversed to.
{{event("popstate")}}A session history entry is being navigated to (in certain cases).
+ + + + + + + + + + + + + + + + + + + + + + + +
CSS Animation Events
Event NameFired When
{{event("animationstart")}}A CSS animation has started.
{{event("animationend")}}A CSS animation has completed.
{{event("animationiteration")}}A CSS animation is repeated.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSS Transition Events
Event NameFired When
{{event("transitionstart")}}A CSS transition has actually started (fired after any delay).
{{event("transitioncancel")}}A CSS transition has been cancelled.
{{event("transitionend")}}A CSS transition has completed.
{{event("transitionrun")}}A CSS transition has began running (fired before any delay starts).
+ + + + + + + + + + + + + + + + + + + +
Form Events
Event NameFired When
{{event("reset")}}The reset button is pressed
{{event("submit")}}The submit button is pressed
+ + + + + + + + + + + + + + + + + + + +
Printing Events
Event NameFired When
{{event("beforeprint")}}The print dialog is opened
{{event("afterprint")}}The print dialog is closed
+ + + + + + + + + + + + + + + + + + + + + + + +
Text Composition Events
Event NameFired When
{{event("compositionstart")}}The 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")}}A character is added to a passage of text being composed.
{{event("compositionend")}}The composition of a passage of text has been completed or canceled.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
View Events
Event NameFired When
{{event("fullscreenchange")}}An element was turned to fullscreen mode or back to normal mode.
{{event("fullscreenerror")}}It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
{{event("resize")}}The document view has been resized.
{{event("scroll")}}The document view or an element has been scrolled.
+ + + + + + + + + + + + + + + + + + + + + + + +
Clipboard Events
Event NameFired When
{{event("cut")}}The selection has been cut and copied to the clipboard
{{event("copy")}}The selection has been copied to the clipboard
{{event("paste")}}The item from the clipboard has been pasted
+ + + + + + + + + + + + + + + + + + + + + +
Keyboard Events
Event NameFired When
{{event("keydown")}}ANY key is pressed
{{event("keypress")}}ANY key except Shift, Fn, CapsLock is in pressed position. (Fired continously.)
{{event("keyup")}}ANY key is released
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mouse Events
Event NameFired When
{{event("mouseenter")}}A pointing device is moved onto the element that has the listener attached.
{{event("mouseover")}}A pointing device is moved onto the element that has the listener attached or onto one of its children.
{{event("mousemove")}}A pointing device is moved over an element. (Fired continously as the mouse moves.)
{{event("mousedown")}}A pointing device button is pressed on an element.
{{event("mouseup")}}A pointing device button is released over an element.
{{event("auxclick")}}A pointing device button (ANY non-primary button) has been pressed and released on an element.
{{event("click")}}A pointing device button (ANY button; soon to be primary button only) has been pressed and released on an element.
{{event("dblclick")}}A pointing device button is clicked twice on an element.
{{event("contextmenu")}}The right button of the mouse is clicked (before the context menu is displayed).
{{event("wheel")}}A wheel button of a pointing device is rotated in any direction.
{{event("mouseleave")}}A pointing device is moved off the element that has the listener attached.
{{event("mouseout")}}A pointing device is moved off the element that has the listener attached or off one of its children.
{{event("select")}}Some text is being selected.
{{event("pointerlockchange")}}The pointer was locked or released.
{{event("pointerlockerror")}}It was impossible to lock the pointer for technical reasons or because the permission was denied.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Drag & Drop Events
Event NameFired When
{{event("dragstart")}}The user starts dragging an element or text selection.
{{event("drag")}}An element or text selection is being dragged (Fired continuously every 350ms).
{{event("dragend")}}A drag operation is being ended (by releasing a mouse button or hitting the escape key).
{{event("dragenter")}}A dragged element or text selection enters a valid drop target.
{{event("dragover")}}An element or text selection is being dragged over a valid drop target. (Fired continuously every 350ms.)
{{event("dragleave")}}A dragged element or text selection leaves a valid drop target.
{{event("drop")}}An element is dropped on a valid drop target.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Media Events
Event NameFired When
{{event("durationchange")}}The duration attribute has been updated.
{{event("loadedmetadata")}}The metadata has been loaded.
{{event("loadeddata")}}The first frame of the media has finished loading.
{{event("canplay")}}The browser 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")}}The browser estimates it can play the media up to its end without stopping for content buffering.
{{event("ended")}}Playback has stopped because the end of the media was reached.
{{event("emptied")}}The 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("stalled")}}The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
{{event("suspend")}}Media data loading has been suspended.
{{event("play")}}Playback has begun.
{{event("playing")}}Playback is ready to start after having been paused or delayed due to lack of data.
{{event("pause")}}Playback has been paused.
{{event("waiting")}}Playback has stopped because of a temporary lack of data.
{{event("seeking")}}A seek operation began.
{{event("seeked")}}A seek operation completed.
{{event("ratechange")}}The playback rate has changed.
{{event("timeupdate")}}The time indicated by the currentTime attribute has been updated.
{{event("volumechange")}}The volume has changed.
{{event("complete")}}The rendering of an {{domxref("OfflineAudioContext")}} is terminated.
{{event("audioprocess")}}The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Progress Events
Event NameFired When
{{event("loadstart")}}Progress has begun.
{{event("progress")}}In progress.
{{event("error")}}Progression has failed.
{{event("timeout")}}Progression is terminated due to preset time expiring.
abortProgression has been terminated (not due to an error).
loadProgression has been successful.
{{event("loadend")}}Progress has stopped (after "error", "abort" or "load" have been dispatched).
+ +

Storage events

+ +

{{event("change")}} (see {{anch("Non-standard events")}})
+ {{event("storage")}}

+ +

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

+ +

Uncategorized events

+ +

{{event("invalid")}}
+ {{event("localized")}}
+ message
+ message
+ message
+ open
+ {{event("show")}}

+ +

Less common and non-standard events

+ +

"cancelable" Fetch events

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Event nameFired when
{{event("abort_(cancellable_fetch)", "abort")}}A fetch request is aborted, i.e. using {{domxref("FetchController.abort()")}}.
{{event("requestprogress")}}The HTTP request part of a fetch request makes progress.
{{event("responseprogress")}}The response part of a fetch request makes progress, i.e. more of the response is downloaded.
{{event("statechange_(cancellable_fetch)", "statechange")}}The {{domxref("FetchObserver.state", "state")}} of a fetch request changes.
+ +

WebVR events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event nameFired when
{{event("vrdisplayconnect")}}when a compatible {{domxref("VRDisplay")}} is connected to the computer.
{{event("vrdisplaydisconnect")}}When a compatible {{domxref("VRDisplay")}} is disconnected from the computer.
{{event("vrdisplayactivate")}}When a VR display is able to be presented to, for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
{{event("vrdisplaydeactivate")}}When a {{domxref("VRDisplay")}} can no longer be presented to, for example if an HMD has gone into standby or sleep mode due to a period of inactivity.
{{event("vrdisplayblur")}}when presentation to a {{domxref("VRDisplay")}} has been paused for some reason by the browser, OS, or VR hardware — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.
{{event("vrdisplayfocus")}}When presentation to a {{domxref("VRDisplay")}} has resumed after being blurred.
{{event("vrdisplaypresentchange")}}The presenting state of a {{domxref("VRDisplay")}} changes — i.e. goes from presenting to not presenting, or vice versa.
+ +

SVG events

+ +

{{event("SVGAbort")}}
+ {{event("SVGError")}}
+ {{event("SVGLoad")}}
+ {{event("SVGResize")}}
+ {{event("SVGScroll")}}
+ {{event("SVGUnload")}}
+ {{event("SVGZoom")}}

+ +

Database events

+ +

abort
+ blocked
+ complete
+ {{event("error")}} (link)
+ success
+ upgradeneeded
+ versionchange

+ +

Notification events

+ +

AlertActive
+ AlertClose

+ +

CSS events

+ +

CssRuleViewRefreshed
+ CssRuleViewChanged
+ CssRuleViewCSSLinkClicked
+ {{event("transitionend")}}

+ +

Script events

+ +

{{event("afterscriptexecute")}}
+ {{event("beforescriptexecute")}}

+ + + +

{{event("DOMMenuItemActive")}}
+ {{event("DOMMenuItemInactive")}}

+ +

Window events

+ +

DOMWindowCreated
+ DOMTitleChanged
+ DOMWindowClose
+ SSWindowClosing
+ SSWindowStateReady
+ SSWindowStateBusy
+ close

+ +

Document events

+ +

DOMLinkAdded
+ DOMLinkRemoved
+ DOMMetaAdded
+ DOMMetaRemoved
+ DOMWillOpenModalDialog
+ DOMModalDialogClosed

+ + + +

{{event("popuphidden")}}
+ {{event("popuphiding")}}
+ {{event("popupshowing")}}
+ {{event("popupshown")}}
+ DOMPopupBlocked

+ +

Tab events

+ +

TabOpen
+ TabClose
+ TabSelect
+ TabShow
+ TabHide
+ TabPinned
+ TabUnpinned
+ SSTabClosing
+ SSTabRestoring
+ SSTabRestored
+ {{event("visibilitychange")}}

+ +

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

+ +

Sensor events

+ +

{{event("compassneedscalibration")}}
+ {{event("devicelight")}}
+ {{event("devicemotion")}}
+ {{event("deviceorientation")}}
+ {{event("deviceproximity")}}
+ {{event("MozOrientation")}}
+ {{event("orientationchange")}}
+ {{event("userproximity")}}

+ +

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

+ +

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

+ +

DOM mutation events

+ +

DOMAttributeNameChanged
+ DOMAttrModified
+ DOMCharacterDataModified
+ {{event("DOMContentLoaded")}}
+ DOMElementNameChanged
+ DOMNodeInserted
+ DOMNodeInsertedIntoDocument
+ DOMNodeRemoved
+ DOMNodeRemovedFromDocument
+ DOMSubtreeModified

+ +

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

+ +

Pointer events

+ +

{{event("pointerover")}}
+ {{event("pointerenter")}}
+ {{event("pointerdown")}}
+ {{event("pointermove")}}
+ {{event("pointerup")}}
+ {{event("pointercancel")}}
+ {{event("pointerout")}}
+ {{event("pointerleave")}}
+ {{event("gotpointercapture")}}
+ {{event("lostpointercapture")}}

+ +

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("appinstalled")}}{{domxref("Event")}}Web App ManifestA web application is successfully installed as a progressive web app.
{{event("audioprocess")}}{{domxref("AudioProcessingEvent")}}{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.
{{event("audioend")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has finished capturing audio for speech recognition.
{{event("audiostart")}} {{experimental_inline}}{{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 The window, the document and its resources are about to be unloaded.
{{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")}} {{experimental_inline}}{{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 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 IndexedDBA transaction successfully completed.
{{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("devicechange")}}{{domxref("Event")}}{{SpecName("Media Capture")}}A media device such as a camera, microphone, or speaker is connected or removed from the system.
{{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")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has disconnected.
{{event("end_(SpeechSynthesis)","end")}} {{experimental_inline}}{{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")}}Playback has stopped because the end of the media was reached.
{{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")}} {{experimental_inline}}{{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")}}{{gecko_minversion_inline("9")}}{{domxref("Event")}}Full ScreenAn element was turned to fullscreen mode or back to normal mode.
{{event("fullscreenerror")}}{{gecko_minversion_inline("9")}}{{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")}} {{experimental_inline}}{{domxref("Event")}}{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}The user's preferred languages have changed.
{{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")}} {{experimental_inline}}{{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("messageerror")}}{{domxref("MessageEvent")}}{{domxref("MessagePort")}}, Web Workers, Broadcast Channel, {{domxref("Window")}}A message error is raised when a message is received by an object.
{{event("message_(ServiceWorker)","message")}} {{experimental_inline}}{{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")}} {{experimental_inline}}{{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")}} {{experimental_inline}}{{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")}} {{experimental_inline}}{{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")}} {{experimental_inline}}{{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")}} {{experimental_inline}}{{domxref("Event")}}{{ SpecName('Selection API')}}A selection just started.
{{event("selectionchange")}} {{experimental_inline}}{{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")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has stopped being detected.
{{event("soundstart")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has been detected.
{{event("speechend")}} {{experimental_inline}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Speech recognised by the speech recognition service has stopped being detected.
{{event("speechstart")}} {{experimental_inline}}{{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")}} {{experimental_inline}}{{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("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")}} {{experimental_inline}}{{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("touchenter")}}{{domxref("TouchEvent")}}Touch Events Removed 
{{event("touchleave")}}{{domxref("TouchEvent")}}Touch Events Removed 
{{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".
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.
+ +

See also

+ + diff --git a/files/bn/web/guide/api/dom/index.html b/files/bn/web/guide/api/dom/index.html new file mode 100644 index 0000000000..d5171efe4e --- /dev/null +++ b/files/bn/web/guide/api/dom/index.html @@ -0,0 +1,21 @@ +--- +title: DOM developer guide +slug: Web/Guide/API/DOM +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +--- +

{{draft}}

+

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

+

All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.

+

The DOM is most often used in conjunction with JavaScript. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for any language.

+

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

+

Why is the DOM important?

+

"Dynamic HTML" (DHTML) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the W3C FAQ).

+

As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers. The user interface of Mozilla (also Firefox and Thunderbird) is built using XUL, using the DOM to manipulate its own UI.

+

More about the DOM

+

{{LandingPageListSubpages}}

diff --git a/files/bn/web/guide/api/index.html b/files/bn/web/guide/api/index.html new file mode 100644 index 0000000000..743350c37b --- /dev/null +++ b/files/bn/web/guide/api/index.html @@ -0,0 +1,25 @@ +--- +title: Guide to Web APIs +slug: Web/Guide/API +tags: + - API + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide/API +--- +

এখানে আপনি ওয়েব ডেভেলপমেন্ট আর্কিটেকচার যেসকল এপিআই এর ভিত্তিপ্রস্তরের উপর দাঁড়িয়ে আছে, তার সম্পর্কে ধারণা পেতে কিছু আর্টিকেলের লিংক এখানে পাবেন।

+

Web APIs from A to Z

+ +

{{ListGroups}}

+ +

See also

+ + diff --git a/files/bn/web/guide/api/webrtc/index.html b/files/bn/web/guide/api/webrtc/index.html new file mode 100644 index 0000000000..c4dbedf65c --- /dev/null +++ b/files/bn/web/guide/api/webrtc/index.html @@ -0,0 +1,39 @@ +--- +title: ওয়েব আরটিসি (WebRTC) +slug: Web/Guide/API/WebRTC +tags: + - এপিআই + - ওয়েব আরটিসি + - পরিচিতি + - ল্যান্ডিং +translation_of: Web/API/WebRTC_API +--- +

WebRTC (যেখানে RTC এর পূর্ণরুপ Real-Time Communications) হল একটি প্রযুক্তি যা একাধিক ব্রাউজারের মধ্যে ব্রাউজার-ব্রাউজার অডিও/ভিডিও স্ট্রিমিং কিংবা ডাটা শেয়ারিং সুবিধা প্রদান করে থাকে। WebRTC এর সাহায্যে কোনরূপ প্লাগ-ইন বা এক্সটেনশন ব্যবহার ছাড়াই স্ট্যান্ডার্ড ওয়েব এপিআই এর সাহায্যে টেলিকনফারেন্সিং কিংবা ডাটা শেয়ারিং সম্ভব।

+ +

WebRTC এর অংশগুলোকে জাভাস্ক্রিপ্ট এপিআই এর সাহায্য ব্যবহার করা যায়: Network Stream API একটি অডিও/ভিডিও স্ট্রিম নির্দেশ করে, PeerConnection API এর সাহায্য দুই বা ততোধিক ব্রাউজারের মধ্যে সংযোগ স্থাপন করা যায়, এবং DataChannel API এর সাহায্য অডিও/ভিডিও ব্যতীত অন্যান্য ধরণের ডাটা আদানপ্রদান করা যায় - যা গেমিং, চ্যাট কিংবা ফাইল ট্রান্সফারের জন্য অসাধারণ!

+ +
+

উল্লেখ্য: এই ডকুমেন্টেশন নতুন যায়গায় চলে যাচ্ছে।

+
+ +

গাইড

+ +
+
WebRTC এর সাহায্যে পিয়ার-টু-পিয়ার যোগাযোগ
+
ওয়েবআরটিসি এপিআই এর সাহায্যে পিয়ার টু পিয়ার যোগাযোগ করা।
+
WebRTC এর আর্কিটেকচার পরিচিতি
+
WebRTC এর অনেকগুলো আলাদা আলাদা অংশ রয়েছে যা নবাগতদের জন্য প্রচণ্ড বিভ্রান্তকর। এই আর্টিকেলে এইসকল অংশগুলোর পরিচয় দিয়ে, তারা কিভাবে একত্রে কাজ করে - সে সম্পর্কে ধারণা দেওয়া হয়েছে।
+
WebRTC এর সাধারণ বিষয়াবলী
+
Now you understand the WebRTC architecture, you can move on to this article, which takes you through the creation of a basic cross-browser RTC App.
+
+ +

রেফারেন্স

+ +
+
Navigator.getUserMedia
+
মিডিয়া (ভিডিও/অডিও) ক্যাপচার করার এপিআই।
+
RTCPeerConnection
+
দুইটি পিয়ারের মধ্যে ডাটা স্ট্রিমিং করার ইন্টারফেস।
+
RTCDataChannel
+
পিয়ার কানেকশনের মধ্যে দিয়ে ডাটা (মিডিয়া নয় এমন) পাঠানোর ইন্টারফেস।
+
diff --git a/files/bn/web/guide/events/index.html b/files/bn/web/guide/events/index.html new file mode 100644 index 0000000000..02a20ce36e --- /dev/null +++ b/files/bn/web/guide/events/index.html @@ -0,0 +1,37 @@ +--- +title: Event developer guide +slug: Web/Guide/Events +tags: + - DOM + - Event + - Guide + - NeedsTranslation + - NeedsUpdate + - TopicStub + - events +translation_of: Web/Guide/Events +--- +

{{draft()}}

+

Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.

+

The overview page provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.

+

The custom events page describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.

+

The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.

+

The device on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the page on orientation coordinate systems and the page on the use of 3D transforms. That is different, but similar, to the change in device vertical orientation. 

+

The window in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.

+

The process loading of a web page might trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.

+

The user interaction with the web page contents might trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction driven events include:

+ +

The modification of the web page in structure or content might trigger some events, as is explained in the mutation events page, but the use of these events has been deprecated in favour of the lighter Mutation Observer approach.

+

The media streams embedded in the HTML documents might trigger some events, as explained in the media events page.

+

The network requests made by a web page might trigger some events.

+

There are many other sources of events defined by web browsers for which pages are not yet available in this guide.

+
+

Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.

+
+

Docs

+

{{LandingPageListSubpages}}

diff --git a/files/bn/web/guide/html/canvas_tutorial/index.html b/files/bn/web/guide/html/canvas_tutorial/index.html new file mode 100644 index 0000000000..2118fa3c97 --- /dev/null +++ b/files/bn/web/guide/html/canvas_tutorial/index.html @@ -0,0 +1,47 @@ +--- +title: ক্যানভাস টিউটোরিয়াল +slug: Web/Guide/HTML/Canvas_tutorial +tags: + - NeedsReview +translation_of: Web/API/Canvas_API/Tutorial +--- +

+

<canvas> হচ্ছে একটি HTML element যেটা স্ক্রিপ্টিং (সাধারণত JavaScript ) ব্যবহার করে  গ্রাফিক্স আঁকার জন্য ব্যবহার করা হয় । উদাহরণস্বরূপ  গ্রাফ আঁকতে, ছবি কম্পোজিশন অথবা সাধারন ( তবে বেশি সাধারন নয় ) অ্যানিমেশন তৈরি করতে এটি ব্যবহার করা হয় । ডানপাশের ছবিতে <canvas> প্রয়োগ করে কিছু উদাহরণ দেওয়া হয়েছে যা আমরা পরে এর টিউটোরিয়াল এ দেখবো।

+

<canvas> সর্বপ্রথম Apple এর Mac OS X ড্যাশবোর্ড এ ব্যবহার করার জন্য প্রকাশিত হয় এবং পরে Safari এবং  Google Chrome এ প্রয়োগ করা হয়. Gecko 1.8- ভিত্তিক browsers, যেমন Firefox 1.5 ও এই element কে সমর্থন করে. এই <canvas> element হচ্ছে  WhatWG Web applications 1.0 এর একটি অংশ যা HTML5 নামেও পরিচিত।

+

এই টিউটোরিয়াল কিভাবে <canvas> element ব্যবহার করে প্রাথমিক ভাবে 2D গ্রাফিক্স তৈরি করা যায় তা বর্ণনা করে । আপনি canvas ব্যবহার করে কি করতে পারবেন এই উদাহরণগুলো তার সুস্পষ্ট ধারণা দেয় এবং code কে snippets করে আপনার নিজের কাঙ্ক্ষিত বিষয়কে তৈরি করতে শুরু করে ।

+

শুরু করার পূর্বে

+

<canvas> element ব্যবহার করা কঠিন কিছু নয় তবে আপনার HTML এবং  JavaScript সম্পর্কে প্রাথমিক ধারণা থাকতে হবে । কিছু পুরাতন browsers এ  <canvas> element সমর্থন করে না, কিন্তু সম্প্রতি সকল প্রধান browsers গুলো তে সমর্থন করে ।  canvas এর default সাইজ হচ্ছে 300px * 150px (width * height). কিন্তু custom size গুলো CSS এর height এবং width property ব্যবহার করে উল্লেখ করা যায় । canvas এ গ্রাফিক্স আঁকতে গেলে আমরা javascript context object ব্যবহার করি , যা গ্রাফিক্সটিকে অনেক উন্নতমানের করে তুলে ।

+

এই টিউটোরিয়াল এ যা আছে

+ +

আরও দেখুন

+ +

A note to contributors

+

Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.

+
+ {{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}
diff --git a/files/bn/web/guide/html/content_editable/index.html b/files/bn/web/guide/html/content_editable/index.html new file mode 100644 index 0000000000..0e8770f603 --- /dev/null +++ b/files/bn/web/guide/html/content_editable/index.html @@ -0,0 +1,44 @@ +--- +title: Content Editable +slug: Web/Guide/HTML/Content_Editable +tags: + - NeedsReview +translation_of: Web/Guide/HTML/Editable_content +--- +

HTML5 এ যেকোনো অংশ পরিবর্তনীয়। কিছু জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার ব্যবহার করে আপনি একটি ওয়েব পেজ একটি সম্পূর্ণ এবং দ্রুত rich-text editor এ রুপান্তর করতে পারবেন । এই অনুচ্ছেদ আপনাকে এর কার্যকারিতা সম্পর্কে কিছু তথ্য প্রদান করবে।

+

সামঞ্জস্যতা

+

পরিবর্তনীয় বিষয়গুলো সম্পূর্ণভাবে বর্তমান ব্রাউজার গুলোর সাথে সামঞ্জস্যপূর্ণ।

+ +

এখন পর্যন্ত অপেরা মিনি তে সমর্থিত নয়।

+

এটা কিভাবে কাজ করে ?

+

contenteditable এট্রিবিউট  টি আপনার HTML উপাদান এ true সেট করুন। এটা প্রায় সকল HTML উপাদান এ ব্যবহার করা যায়।

+

উদাহরণ

+

একটি সহজ উদাহরণ

+
<!DOCTYPE html>
+<html>
+  <body>
+    <div contenteditable="true">
+      This text can be edited by the user.
+    </div>
+  </body>
+</html>
+

আপনি এখানে লোকালস্টোরেজ ব্যবহার করে জাভাস্ক্রিপ্ট ইন্টিগ্রেশন এর একটি কার্যকর উদাহরন দেখতে পারেন। এই উৎস-এর সাথে

+

আরও দেখুন

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

কিভাবে এই বিষয় এর সাথে কাজ করবেন  (old IE style API) এবং এখানে

+
+ {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}
diff --git a/files/bn/web/guide/html/forms/index.html b/files/bn/web/guide/html/forms/index.html new file mode 100644 index 0000000000..2e0e03ea83 --- /dev/null +++ b/files/bn/web/guide/html/forms/index.html @@ -0,0 +1,342 @@ +--- +title: HTML forms guide +slug: Web/Guide/HTML/Forms +tags: + - NeedsReview +translation_of: Learn/Forms +--- +

এই সহায়িকা হচ্ছে একটি সামগ্রিক নির্দেশিকা যা আপনাকে মাষ্টার HTML form তৈরি করতে সাহায্য করবে । HTML from ব্যবহারকারীদের সাথে আলাপচারিতার জন্য খুব শক্তিশালী হাতিয়ার হয় না । এই সহায়িকার মধ্যে, HTML from হতে  আমরা কাস্টম উইজেট করার পরিচালনার তথ্য থেকে কাঠামো থেকে স্টাইলিং করার। তুমি এই শক্তিশালি অফার  শিখতে এবং উপভোগে পারবে।

+

বর্ন মালা

+
    +
  1. আমার প্রথম   HTML form
    2. +
  2. HTML form কি ভাবে গঠন  করতে হয় 
    3. +
  3. নেটিভ    form  উইজেট
    4. +
  4. CSS সাথে HTML forms +
      +
    1. HTML forms এর উন্নতি
      2. +
    2.  HTML forms উন্নতির ধরন
      3. +
    3.  উইজেট এর টেবিল হতে Property শামাযশ্যতা
      4. +
    +
    5. +
  5. তথ্য হতে  পাঠাতে এবং চেষ্টা করতে
    6. +
  6.  তথ্য হতে বৈধতা
    7. +
  7.  উইজেট হতে কিভাবে coustom তৈরি করতে হয়
    8. +
  8.  JavaScript কি ভাবে নিক্ষেপ করতে হয় +
      +
    1. ডাটা অবজেকট কিভাবে ব্যাবহার  করতে হয়
      2. +
    +
    9. +
  9. HTML  হতে ব্রাউজারে
    10. +
+

HTML Documentation

+

HTML Elements

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementRelated DOM interfaceDescription
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}The button element represents a clickable button.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}The datalist element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other forms elements.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}The fieldset is used to group several form elements within a form.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}The form element represents a section of document that contains interactive element that enable a user to submit information to a web server.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}The  input element is used to create interactive controls for forms.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}The keygen element exists to facilitate generation of key material, and submission of the public key as part of an HTML form
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}The label element represents a caption for an item in a user interface
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}The legend element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}The meter element  represents either a scalar value within a known range or a fractional value.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}the optgroup element creates a group of options within a {{ HTMLElement("select") }} element.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}the HTML option element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}The output element represents the result of a calculation.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}The progress element is used to view the completion progress of a task.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}The select element represents a control that presents a menu of options.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}The textarea element represents a multi-line plain-text editing control.
+
+

Note: All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.

+
+

HTML Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attribute NameElementsDescription
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}List of types the server accepts, typically a file type.
accept-charset{{ HTMLElement("form") }}List of supported charsets.
action{{ HTMLElement("form") }}The URI of a program that processes the information submitted via the form.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}The element should be automatically focused after the page loaded.
challenge{{ HTMLElement("keygen") }}A challenge string that is submitted along with the public key.
checked{{ HTMLElement("input") }}Indicates whether the element should be checked on page load.
cols{{ HTMLElement("textarea") }}Defines the number of columns in a textarea.
data{{ HTMLElement("object") }}Specifies the URL of the resource.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether the user can interact with the element.
enctype{{ HTMLElement("form") }}Defines the content type of the form date when the method is POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describes elements which belongs to this one.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates the form that is the owner of the element.
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indicates the maximum value allowed.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Defines the maximum number of characters allowed in the element.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indicates the minimum value allowed.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Name of the element. For example used by the server to identify the fields in form submits.
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src{{ HTMLElement("input") }}The URL of the embeddable content.
step{{ HTMLElement("input") }} 
target{{ HTMLElement("form") }} 
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defines the type of the element.
usemap{{ HTMLElement("input") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defines a default value which will be displayed in the element on page load.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped.
+

Normative reference

+ diff --git a/files/bn/web/guide/index.html b/files/bn/web/guide/index.html new file mode 100644 index 0000000000..e2979917bc --- /dev/null +++ b/files/bn/web/guide/index.html @@ -0,0 +1,20 @@ +--- +title: ওয়েব ডেভেলপার গাইড +slug: Web/Guide +translation_of: Web/Guide +--- +

এই আর্টিকেলগুলো আপনাকে নির্দিষ্ট কিছু প্রযুক্তি এবং এপিআই ব্যবহার সংক্রান্ত তথ্য দেবে।

+
+

সাবধান: আমাদের কন্টেন্টগুলো ঠিকমত সাজানোর আগ পর্যন্ত পেজটির অবস্থা বেশ অগোছালো থাকতে পারে। দুঃখিত!

+
+

{{LandingPageListSubpages}}

+
+
+ জাভাস্ক্রিপ্ট
+
+ ওয়েবে অ্যাপ্লিকেশন লেখার জন্য শক্তিশালী প্রোগ্রামিং ল্যাঙ্গুয়েজটি হল জাভাস্ক্রিপ্ট।
+
+

আরও দেখুন

+ diff --git a/files/bn/web/guide/performance/index.html b/files/bn/web/guide/performance/index.html new file mode 100644 index 0000000000..e8280ffae1 --- /dev/null +++ b/files/bn/web/guide/performance/index.html @@ -0,0 +1,9 @@ +--- +title: অপটিমাইজেশন অ্যান্ড পারফরমেন্স +slug: Web/Guide/Performance +tags: + - NeedsReview +translation_of: Web/Guide/Performance +--- +

আধুনিক ওয়েব অ্যাপ্লিকেশন এবং সাইট নির্মাণ করার সময়, আপনার কনটেন্ট সঠিক ভাবে কাজ করা অত্যন্ত জরুরি। যেন, তা দ্রুত এবং দক্ষতার সঙ্গে কাজ করতে পারে। এটি শক্তিশালী ডেস্কটপ সিস্টেম ব্যবহারকারীদের পাশাপাশি কম ক্ষমতা সম্পন্ন ডিভাইসের জন্যও কার্যকরভাবে কাজ করে থাকে।

+

{{LandingPageListSubpages}}

diff --git "a/files/bn/web/guide/\340\246\227\340\247\215\340\246\260\340\246\276\340\246\253\340\246\277\340\246\225\340\247\215\340\246\270/index.html" "b/files/bn/web/guide/\340\246\227\340\247\215\340\246\260\340\246\276\340\246\253\340\246\277\340\246\225\340\247\215\340\246\270/index.html" new file mode 100644 index 0000000000..fdf50fc2b7 --- /dev/null +++ "b/files/bn/web/guide/\340\246\227\340\247\215\340\246\260\340\246\276\340\246\253\340\246\277\340\246\225\340\247\215\340\246\270/index.html" @@ -0,0 +1,53 @@ +--- +title: গ্রাফিক্স অন দি ওয়েব +slug: Web/Guide/গ্রাফিক্স +tags: + - NeedsReview +translation_of: Web/Guide/Graphics +--- +

আধুনিক ওয়েব সাইট এবং অ্যাপ্লিকেশনে প্রায়ই গ্রাফিক্স উপস্থাপন প্রয়োজন পরে। {{HTMLElement("img")}} উপাদান ব্যবহার করে সহজেই স্ট্যাটিক ইমেজ প্রদর্শিত করা যায়, অথবা {{cssxref("background-image")}} প্রোপার্টি ব্যবহার করে এইচটিএমএল উপাদানের পটভূমি নির্ধারণ করা যায়।

+

আপনি প্রায়ই অন-দা-ফ্লাই  গ্রাফিক্স নির্মাণ করতে চান, অথবা ঘটনার পরে ছবি প্রদর্শন করতে চান। এই নিবন্ধনটি আপনাকে সাহায্য করবে কিভাবে আপনি তা সম্পন্ন করতে পারেন।

+
+
+

2D গ্রাফিক্স

+
+
+ Canvas(ক্যানভাস)
+
+ এই {{HTMLElement("canvas")}}উপাদানটি APIs প্রদান করে যেন জাভাস্ক্রিপ্ট ব্যাবহার করে 2D গ্রাফিক্স তৈরি করা যায়।
+
+ SVG(এস ভি জি)
+ স্কেলেবল ভেক্টর গ্রাফিক্স (SVG) লাইনস, কারভস, এবং অন্যান্য জ্যামিতিক আকার প্রদান করে। bitmaps ব্যাবহার করা এড়িয়ে চলার মাধ্যমে, আপনি যেকোনো আকারের ছবি পরিছন্নভাবে তৈরি করতে পারেন।
+
+

সম্পূর্ণ দেখুন্‌...

+
+
+

3D গ্রাফিক্স

+
+
+ WebGL(ওয়েব জি এল)
+
+
+
+ WebGL শুরু করার একটি নির্দেশিকা, ওয়েবের জন্য 3D গ্রাফিক্স API. এই প্রযুক্তি আপনাকে ওয়েবের মধ্যে স্ট্যান্ডার্ড OpenGL ES ব্যাবহার করতে দেয়।
+
+
+
+

ভিডিও

+
+
+ HTML5 (অডিও এবং ভিডিও ব্যাবহার)
+
+
+
+ একটি HTML নথিতে ভিডিও এম্বেড এবং প্লেব্যাক নিয়ন্ত্রণ।
+
+
+
+ WebRTC(ওয়েব আর টি সি)
+
+  WebRTC(ওয়েব আর টি সি) এর RTC (আর টি সি) বলতে Real-Time Communications (রিয়েল টাইম কমিউনিকেশন) কে বুঝায়, এই প্রযুক্তি অডিও / ভিডিও স্ট্রিমিং এবং ব্রাউজার ক্লায়েন্টস (মিত্রগণ) মধ্যে তথ্য ভাগ করতে সক্ষম।
+
+
+
+

 

diff --git a/files/bn/web/html/block-level_elements/index.html b/files/bn/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..e67042ed0e --- /dev/null +++ b/files/bn/web/html/block-level_elements/index.html @@ -0,0 +1,121 @@ +--- +title: Block-level elements +slug: Web/HTML/Block-level_elements +translation_of: Web/HTML/Block-level_elements +--- +

এইচটিএমএল (হাইপার টেক্সট মারকআপ ল্যাঙ্গুয়েজ) এর এলিমেন্টগুলো সাধানত "ব্লক-লেভেল" এলিমেন্ট অথবা "ইনলাইন" এলিমেন্ত । একটি ব্লক-লেভেল এলিমেন্ট তার প্যারেন্ট এলিমেন্তটর{কন্তাইনার} সমস্ত জায়গা দখল করে , সেজন্য একটি "ব্লক" বানানো হয় ।এগুলো বুজানোর জন্য এই প্রবন্ধটি সাহায্য করবে।

+ +

ব্রাউজারস এলিমেন্টর আগে এবং পরে এক নিওলাইনের সাথে ব্লক-লেভেল এলেমেন্টকেদেখায়।. নিচের উদাহরন ব্লক-লেভেল এলেমেন্টর প্রভাবের ব্যবহারিক প্রমান দেয়। 

+ +

ব্লক-লেভেল এলিমেন্টস 

+ +

এইচটিএমএল

+ +
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
+ +

সিএসএস

+ +
p { background-color: #8ABB55; }
+
+ +

{{ EmbedLiveSample('Block-level_Example') }}

+ +

ব্যবহারবিধি

+ + + +

ব্লক-লেভেল বনাম. ইনলাইন

+ +

ব্লক-লেভেল এলিমেন্টস এবং ইনলাইনের মধ্যে দুইটি বিশেষ পার্থক্য আসে।:

+ +
+
ফরম্যাটিং
+
বাই ডিফল্ট,ব্লক-লেভেল এলিমেন্টসনতুন লাইনেই শুরু করে, কিন্ত ইনলাইন এলিমেন্টস একটি লাইনের যেকোনো জায়গা থেকে শুরু করতে পারে।
+
কনটেন্ট মডেল
+
সাধারণত, ব্লক-লেভেল এলিমেন্টস ইনলাইন এলিমেন্টস এবং বাকি ব্লক-লেভেল এলিমেন্টসকে ধরে রাখে। স্বভাবত গঠনগত স্বাতন্ত্র হল ঐ ধারনা যা ব্লক-লেভেল এলিমেন্টস ইনলাইন এলিমেন্টস থেকেও "বড়" কাঠামো তৈরি করে। 
+
+ +

ব্লক-লেভেলের স্বাতন্ত্র বনাম.ইনলাইন এলিমেন্টস এইচটিএমএলের সবিস্তার বিবরণীকে ৮.০১ পর্যন্ত ব্যবহার করা হয়। এইচটিএমএল৫ এ,এই বিনারি স্বাতন্ত্রকে আরো জটিল কন্টটেন্ট ক্যাটেগরিস সেটে প্রতিস্থাপন করা হয়।এইচটিএমএল৫ এ "ব্লক-লেভেল" ক্যাটেগরিটি মোটামোটিভাবে  ফ্লও কনটেন্ট  ক্যাটাগরিতে সারা দেয়, যখন "ইনলাইন" ফ্রাসিং কনটেন্ট  এ সারা দেয়, কিন্তু কোন বাড়তি ক্যাটাগরি নেই।

+ +

এলিমেন্টস

+ +

নিচে এইচটিএমএলব্লক-লেভেল এলিমেন্টসের সম্পূর্ণ তালিকা দেওয়া হল (যদিও "ব্লক-লেভেল" ব্যাখ্যা করা হইনই ঐএলিমেন্টের যা এইচটিএমএল৫ এ নতুন)।

+ +
+
+
{{ HTMLElement("address") }}
+
Contact information.
+
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
+
Article content.
+
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
+
Aside content.
+
{{ HTMLElement("blockquote") }}
+
Long ("block") quotation.
+
{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}
+
Drawing canvas.
+
{{ HTMLElement("dd") }}
+
Definition description.
+
{{ HTMLElement("div") }}
+
Document division.
+
{{ HTMLElement("dl") }}
+
Definition list.
+
{{ HTMLElement("fieldset") }}
+
Field set label.
+
+ +
+
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
+
Figure caption.
+
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
+
Groups media content with a caption (see {{ HTMLElement("figcaption") }}).
+
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
+
Section or page footer.
+
{{ HTMLElement("form") }}
+
Input form.
+
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
+
Heading levels 1-6.
+
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
+
Section or page header.
+
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
+
Groups header information.
+
{{ HTMLElement("hr") }}
+
Horizontal rule (dividing line).
+
{{ HTMLElement("li") }}
+
List item.
+
{{ HTMLElement("main") }}
+
Contains the central content unique to this document.
+
{{ HTMLElement("nav") }}
+
Contains navigation links.
+
+ +
+
{{ HTMLElement("noscript") }}
+
Content to use if scripting is not supported or turned off.
+
{{ HTMLElement("ol") }}
+
Ordered list.
+
{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}
+
Form output.
+
{{ HTMLElement("p") }}
+
Paragraph.
+
{{ HTMLElement("pre") }}
+
Preformatted text.
+
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
+
Section of a web page.
+
{{ HTMLElement("table") }}
+
Table.
+
{{ HTMLElement("tfoot") }}
+
Table footer.
+
{{ HTMLElement("ul") }}
+
Unordered list.
+
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
+
Video player.
+
+
+ +

আরো দেখুন

+ + diff --git a/files/bn/web/html/canvas/index.html b/files/bn/web/html/canvas/index.html new file mode 100644 index 0000000000..b64f663d74 --- /dev/null +++ b/files/bn/web/html/canvas/index.html @@ -0,0 +1,73 @@ +--- +title: ক্যানভাস +slug: Web/HTML/Canvas +translation_of: Web/API/Canvas_API +--- +

 HTML5 এ যুক্ত HTML {{HTMLElement("canvas")}} এলিমেন্টটি ব্যবহার করে স্ক্রিপ্টিংয়ের (সাধারণত জাভাস্ক্রিপ্ট) সাহায্যে গ্রাফিক্স আঁকা যায়। উদাহরণস্বরুপ, এটি গ্রাফিক্স আঁকা, ছবির কম্পোজিশন তৈরি করা, অ্যানিমেশন তৈরি করা অথবা এমনি রিয়েল-টাইম ভিডিও রেন্ডারিং অথবা প্রসেসিংয়ের কাজেও ব্যবহার করা যায়।

+

<canvas> এর জন্য মোজিলা অ্যাপ্লিকেশনসমূহ সাপোর্ট পাওয়া শুরু করেছে গিকো ১.৮ (বা ফায়ারফক্স ১.৫) থেকে। মূলত এ্যাপল তাদের ড্যাশবোর্ড এবং সাফারির জন্য এলিমেন্টটি প্রকাশ করে। ইন্টারনেট এক্সপ্লোরার ৯ ভার্সন থেকে <canvas> সাপোর্ট করে; ইন্টারনেট এক্সপ্লোরারের পুরনো সংস্করণের জন্য গুগলের Explorer Canvas প্রজেক্টের একটি স্ক্রিপ্ট যুক্ত করে কার্যকরভাবে <canvas> এর সাপোর্ট যোগ করা যায়। গুগল ক্রোম এবং অপেরা ৯ <canvas> ক্যানভাস সাপোর্ট করে।

+

<canvas> টি দিয়ে WebGL এর সাহায্যে হার্ডওয়্যার-এক্সেলারেশনের মাধ্যমে ওয়েব পেজে ত্রিমাত্রিক (3D) গ্রাফিক্স দেখানো সম্ভব।

+
+
+

ডকুমেন্টেশন

+
+
+ স্পেসিফিকেশন
+
+ <canvas> এলিমেট হল WhatWG ওয়েব অ্যাপ্লিকেশনস ১.০ স্পেসিফিকেশন বা HTML5 এর অংশ।
+
+ ক্যানভাস টিউটোরিয়াল
+
+  <canvas> এর সাধারণ ব্যবহার এবং এর অ্যাডভান্সড ফিচারের ওপর একটি বিস্তারিত টিউটোরিয়াল।
+
+ কোড স্নিপেট: ক্যানভাস
+
+ <canvas> সংক্রান্ত এক্সটেনশন ডেভেলপার সংশ্লিষ্ট কোড স্নিপেট।
+
+ ক্যানভাস উদাহরণ
+
+ কিছু <canvas> ডেমো।
+
+ ক্যানভাসে DOM অবজেক্ট আঁকা
+
+ যেভাবে HTML এলিমেন্টের ন্যায় DOM কন্টেন্ট একটি ক্যানভাসে আঁকবেন।
+
+ একটি সাধারণ raycaster
+
+ ক্যানভাসের সাহায্যে ray-tracing এনিমেশনের ডেমো।
+
+ ক্যানভাস DOM ইন্টারফেস
+
+ গিকোতে ক্যানভাস DOM ইন্টারফেস সমূহ।
+
+

সব দেখুন...

+
+
+

কমিউনিটি

+ +

তথ্যভান্ডার

+ +

লাইব্রেরি

+
    +
  • libCanvas একটি হালকা ও শক্তিশালী ক্যানভাস ফ্রেমওয়ার্ক
    • +
  • Processing.js হল প্রসেসিং ভিজ্যুয়ালাইজেশন ল্যাঙ্গুয়েজের পোর্ট
    • +
  • EaselJS হল একটি ফ্ল্যাশের মত API সমৃদ্ধ লাইব্রেরি
    • +
  • PlotKit হল একটি চার্ট ও গ্রাফ তৈরির লাইব্রেরি
    • +
  • Rekapi হল ক্যানভাসের জন্য অ্যানিমেশনের কি-ফ্রেম করার API।
    • +
  • PhiloGL হল ডাটা ভিজ্যুয়ালাইজেশন, সৃজনশীল কোডিং ও গেম ডেভেলপমেন্টের জন্য একটি WebGL ফ্রেমওয়ার্ক।
    • +
  • JavaScript InfoVis Toolkit ওয়েবের জন্য ইন্টারএ্যাক্টিভ 2D ক্যানভাস ডাটা ভিজ্যুয়ালাইজেশন তৈরি করে।
    • +
  • Frame-Engine হল অ্যাপ্লিকেশন ও গেম ডেভেলপ করার একটি ফ্রেমওয়ার্ক।
    • +
+ + +
+
+
+ {{HTML5ArticleTOC()}}
diff --git a/files/bn/web/html/canvas/tutorial/index.html b/files/bn/web/html/canvas/tutorial/index.html new file mode 100644 index 0000000000..8ac4e04195 --- /dev/null +++ b/files/bn/web/html/canvas/tutorial/index.html @@ -0,0 +1,42 @@ +--- +title: ক্যানভাস টিউটোরিয়াল +slug: Web/HTML/Canvas/Tutorial +translation_of: Web/API/Canvas_API/Tutorial +--- +

<canvas> হল একটি HTML এলিমেন্ট, যা দ্বারা স্ক্রিপ্টিংয়ের (সাধারণত জাভাস্ক্রিপ্ট) সাহায্যে গ্রাফিক্স আঁকা যায়। এটি অবশ্য গ্রাফিক্স আঁকা, ছবি কম্পোজিশন তৈরি করা এবং সাধারণ (এবং অসাধারণ) এনিমেশন তৈরির কাজ করতে পারে।

+

<canvas> এর জন্য মোজিলা অ্যাপ্লিকেশনসমূহ সাপোর্ট পাওয়া শুরু করেছে গিকো ১.৮ (বা ফায়ারফক্স ১.৫) থেকে। মূলত এ্যাপল তাদের ড্যাশবোর্ড এবং সাফারির জন্য এলিমেন্টটি প্রকাশ করে। <canvas> এলিমেন্টটি WhatWG Web applications 1.0 স্পেসিফিকেশনের একটি অংশ, যা HTML5 নামেও পরিচিত।

+

এই টিউটোরিয়ালে আপনার HTML পেজে <canvas> এলিমেন্ট ব্যবহারের প্রক্রিয়া আলোচনা করা হয়েছে। উদাহরণগুলো থেকে আপনি <canvas> দিয়ে কি করতে পারেন, তা আন্দাজ করতে পারেন এবং আপনার নিজের ইমপ্লিমেন্টেশন তৈরিতে সাহায্য করতে পারে।

+

শুরু করার পূর্বে

+

<canvas> ব্যবহার করা খুব কঠিন - তা নয়। কিন্তু, আপনার অবশ্যই HTML এবং জাভাস্ক্রিপ্ট এর সাধারণ ধারণা থাকতে হবে।

+

<canvas> টি অনেক পুরনো ব্রাউজার সাপোর্ট করে না কিন্তু, ফায়ারফক্স ১.৫ ও পরবর্তী ভার্সন, অপেরা ৯ ও পরবর্তী, এবং সাফারি, গুগল ক্রোমের নতুন ভার্সন ও ইন্টারনেট এক্সপ্লোরার ৯ হতে কাজ করে।

+

এই টিউটোরিয়ালে আছে

+ +

আরও দেখুন

+ +
+ {{ Next("Canvas_tutorial/Basic_usage") }}
diff --git a/files/bn/web/html/cors_settings_attributes/index.html b/files/bn/web/html/cors_settings_attributes/index.html new file mode 100644 index 0000000000..4888d9d63c --- /dev/null +++ b/files/bn/web/html/cors_settings_attributes/index.html @@ -0,0 +1,130 @@ +--- +title: সি ও আর এস বৈশিষ্ট্যাবলী সেটিংস +slug: Web/HTML/CORS_settings_attributes +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Attributes/crossorigin +--- +

 

+ +
+
HTML5 এর মধ্যে, যেমন {{HTMLElement ("গান")}} অথবা হিসাবে সি ও আর এস জন্য সমর্থন প্রদান যা কিছু HTML উপাদান, {{HTMLElement ("ভিডিও")}}, আপনি কনফিগার করতে দেয়, যা একটি crossorigin অ্যাট্রিবিউট (crossOrigin সম্পত্তি), আছে সি ও আর এস উপাদান এর সংগৃহীত তথ্য জন্য অনুরোধ. এই বৈশিষ্ট্যাবলী গণিত, এবং নিম্নলিখিত সম্ভব মান আছে:
+
+ + + + + + + + + + + + + + + + +
KeywordDescription
anonymousCORS requests for this element will not have the credentials flag set.
use-credentialsCORS requests for this element will have the credentials flag set; this means the request will provide credentials.
+ +

 

+ +

ডিফল্ট (অ্যাট্রিবিউট উল্লেখ না করা হলে, যে হয়) দ্বারা, কর্ড সব সময়ে ব্যবহার করা হয় না। "বেনামী" শব্দ  সি ও আর এস স্পেসিফিকেশন পরিভাষা বিভাগে বর্ণিত হিসাবে কুকিজ, ক্লায়েন্ট প্রান্তের SSL সার্টিফিকেট বা HTTP প্রমাণীকরণের মাধ্যমে ব্যবহারকারী শংসাপত্র কোন বেচা কেনা নেই এবং হবে।
+ একটি অবৈধ শব্দ এবং একটি খালি স্ট্রিং বেনামী শব্দ হিসেবে পরিচালিত হবে।

+ +

 বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}} 
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{ CompatGeckoDesktop("8.0") }}11{{ CompatNo() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoDesktop("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoMobile("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 আরো দেখুন

+ + diff --git a/files/bn/web/html/element/a/index.html b/files/bn/web/html/element/a/index.html new file mode 100644 index 0000000000..1f37ace290 --- /dev/null +++ b/files/bn/web/html/element/a/index.html @@ -0,0 +1,495 @@ +--- +title: +slug: Web/HTML/Element/a +translation_of: Web/HTML/Element/a +--- +

The HTML Anchor Element (<a>) defines a hyperlink to a location on the same page or any other page on the Web. It can also be used (in an obsolete way) to create an anchor point—a destination for hyperlinks within the content of a page, so that links aren't limited to connecting simply to the top of a page.

+ +
<a href="https://developer.mozilla.org">MDN</a>
+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, interactive content, palpable content.
Permitted contentTransparent, containing either flow content or phrasing content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts phrasing content, or any element that accepts flow content.
DOM interface{{domxref("HTMLAnchorElement")}}
+ +

আট্ট্রিবিউট 

+ +

This element includes the global attributes.

+ +
+
{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}
+
This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource so that when the user clicks on the link they will be prompted to save it as a local file. If the attribute has a value, the value will be used as the pre-filled file name in the Save prompt that opens when the user clicks on the link (the user can change the name before actually saving the file of course). There are no restrictions on allowed values (though / and \ will be converted to underscores, preventing specific path hints), but you should consider that most file systems have limitations with regard to what punctuation is supported in file names, and browsers are likely to adjust file names accordingly. +
+

Note:

+ +
    +
  • Can be used with blob: URLs and data: URLs, to make it easy for users to download content that is generated programmatically using JavaScript (e.g. a picture created using an online drawing Web app).
    • +
  • If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.
    • +
  • If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute.
    • +
  • This attribute is only honored for links to resources with the same-origin.
    • +
+
+
+
{{htmlattrdef("href")}}
+
This was the single required attribute for anchors defining a hypertext source link, but is no longer required in HTML5. Omitting this attribute creates a placeholder link. The href attribute indicates the link target, either a URL or a URL fragment. A URL fragment is a name preceded by a hash mark (#), which specifies an internal target location (an ID) within the current document. URLs are not restricted to Web (HTTP)-based documents. URLs might use any protocol supported by the browser. For example, file, ftp, and mailto work in most user agents. +
+

Note: You can use the special fragment "top" to create a link back to the top of the page; for example <a href="#top">Return to top</a>. This behavior is specified by HTML5.

+
+
+
{{htmlattrdef("hreflang")}}
+
This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by BCP47 for HTML5 and by RFC1766 for HTML4. Use this attribute only if the {{htmlattrxref("href", "a")}} attribute is present.
+
{{htmlattrdef("media")}} {{HTMLVersionInline(5)}}
+
This attribute specifies the media which the linked resource applies to. Its value must be a media query. This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on. +
+

Usage note:

+ +
    +
  • In HTML 4, only simple white-space-separated list of media description literals, i.e. media types and groups, where defined and allowed as values for this attribute, like print, screen, aural, braille, ... HTML 5 extended this to any kind of media queries, which are a superset of the allowed values of HTML 4.
    • +
  • Browsers not supporting the CSS3 Media Queries won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.
    • +
+
+
+
{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}
+
The 'ping' attribute, if present, sends the URLs of the resources a notification/ping if the user follows the hyperlink.
+
{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+
A string indicating which referrer to use when fetching the resource: +
    +
  • "no-referrer" meaning that the Referer: header will not be sent.
    • +
  • "no-referrer-when-downgrade" meaning that no Referer: header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.
    • +
  • "origin" meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
    • +
  • "origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path. 
    • +
  • "unsafe-url" meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.
    • +
+
+
{{htmlattrdef("rel")}}
+
For anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of link types values. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the href attribute is present.
+
{{htmlattrdef("target")}}
+
This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings: +
    +
  • _self: Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
    • +
  • _blank: Load the response into a new unnamed HTML4 window or HTML5 browsing context.
    • +
  • _parent: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • +
  • _top: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
    • +
+ Use this attribute only if the href attribute is present.
+
{{htmlattrdef("type")}}
+
This attribute specifies the media type in the form of a {{Glossary("MIME type")}} for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Use this attribute only if the href attribute is present.
+
+ +

Obsolete

+ +
+
{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}
+
This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in RFC 2045. The default value is ISO-8859-1. +
+

Usage note: This attribute is obsolete in HTML5 and should not be used by authors. To achieve its effect, use the HTTP Content-Type header on the linked resource.

+
+
+
{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
For use with object shapes, this attribute uses a comma-separated list of numbers to define the coordinates of the object on the page.
+
{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute is required in an anchor defining a target location within a page. A value for name is similar to a value for the id core attribute and should be an alphanumeric identifier unique to the document. Under the HTML 4.01 specification, id and name both can be used with the <a> element as long as they have identical values. +
+

Usage note: This attribute is obsolete in HTML5, use global attribute id instead.

+
+
+
{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute specifies a reverse link, the inverse relationship of the rel attribute. It is useful for indicating where an object came from, such as the author of a document.
+
{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute is used to define a selectable region for hypertext source links associated with a figure to create an image map. The values for the attribute are circle, default, polygon, and rect. The format of the coords attribute depends on the value of shape. For circle, the value is x,y,r where x and y are the pixel coordinates for the center of the circle and r is the radius value in pixels. For rect, the coords attribute should be x,y,w,h. The x,y values define the upper-left-hand corner of the rectangle, while w and h define the width and height respectively. A value of polygon for shape requires x1,y1,x2,y2,... values for coords. Each of the x,y pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value default for shape requires that the entire enclosed area, typically an image, be used. +
Note: It is advisable to use the usemap attribute for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the shape attribute.
+
+
+ +

মানসম্মত নয়

+ +
+
{{htmlattrdef("datafld")}} {{Non-standard_inline}}
+
This attribute specifies the column name from that data source object that supplies the bound data. +
+

Usage note: This attribute is non-standard and should not be used by authors. To achieve its effect, use scripting and a mechanism such as XMLHttpRequest to populate the page dynamically

+
+ + + + + + + + + + + + + + + + + + + + + +
SupportGeckoPrestoWebKitTrident
Not implementedNot implementedNot implementedIE4, IE5, IE6, IE7 (Removed in IE8)
Normative documentMicrosoft's Data Binding: dataFld Property (MSDN)
+
+
{{htmlattrdef("datasrc")}} {{Non-standard_inline}}
+
This attribute indicates the ID of the data source object that supplies the data that is bound to this element. +
+

Usage note: This attribute is non-standard and should not be used by authors. To achieve its effect, use scripting and a mechanism such as XMLHttpRequest to populate the page dynamically.

+
+ + + + + + + + + + + + + + + + + + + + + +
SupportGeckoPrestoWebKitTrident
Not implementedNot implementedNot implementedIE4, IE5, IE6, IE7 (Removed in IE8)
Normative documentMicrosoft's Data Binding: dataSrc Property (MSDN)
+
+
{{htmlattrdef("methods")}} {{Non-standard_inline}}
+
The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the title attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. Methods Property (MSDN)
+
+ +
+
{{htmlattrdef("urn")}} {{Non-standard_inline}}
+
This supposedly Microsoft-supported attribute relates a uniform resource name (URN) with the link. While it is based on standards work years back, the meaning of URNs is still not well defined, so this attribute is meaningless. urn Property (MSDN)
+
+ +

উদাহরণ 

+ +

বহিঃ ঠিকানায় সংযোগ 

+ +
<!-- anchor linking to external file -->
+<a href="http://www.mozilla.com/">
+External Link
+</a>
+
+ +

Result

+ +

External Link

+ +

Creating a clickable image

+ +

This small example use an image to link to the MDN home page. The home page will open in a new browsing context, that is a new page or a new tab.

+ +
<a href="https://developer.mozilla.org/en-US/" target="_blank">
+  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo" />
+</a>
+
+ +

Result

+ +
+

{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}

+
+ + + +

It's common to create buttons or links that will open in the user's email program to allow them to send a new message. This is done by using a mailto link. Here's a simple example:

+ +
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
+ +

This results in a link that looks like this: Send email to nowhere.

+ +

For additional details about the mailto URL scheme, such as how to include the subject, body, or other predetermined content, see Email links or {{RFC(6068)}}.

+ +

Using the download attribute to save a canvas as a PNG

+ +

If you want to allow a user to download an HTML Canvas as an image you can create a link with a download attribute and the canvas data as a file URL:

+ +
var link = document.createElement('a');
+link.innerHTML = 'download image';
+
+link.addEventListener('click', function(ev) {
+    link.href = canvas.toDataURL();
+    link.download = "mypainting.png";
+}, false);
+
+document.body.appendChild(link);
+ +

You can see this in action http://jsfiddle.net/codepo8/V6ufG/2/

+ +

স্পেসিফিকেশন

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Added the referrer attribute.
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}{{Spec2('HTML4.01')}} 
+ +

ব্রাউসার কম্পিটিয়েবিলিটি

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
download{{CompatChrome("14")}}{{CompatGeckoDesktop("20.0")}}Edge 13{{CompatOpera("15")}}{{CompatNo}}
ping{{CompatVersionUnknown}}{{CompatNo}} [2]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
referrerpolicy{{CompatChrome(46.0)}} [3] {{CompatGeckoDesktop("45")}} [4]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
download{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("20.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
ping{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
referrerpolicy{{CompatNo}}{{CompatChrome(46.0)}} [3]{{CompatGeckoMobile("45.0")}} [4]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(46.0)}} [3]
+
+ +

[1] Starting from Gecko 41 {{geckoRelease("41.0")}}, {{HTMLElement("a")}} without href attribute is no more classified as interactive content. Clicking it inside {{HTMLElement("label")}} will activate labelled content ({{bug(1167816)}}).

+ +

[2] Disabled by default

+ +

[3] Implemented behind a flag.

+ +

[4] From Firefox 42 to Firefox 44, the attribute was called referrer.

+ +

ক্লিক করুন ও ফোকাস করুন 

+ +

Whether clicking on an {{HTMLElement("a")}} causes it to (by default) become focused varies by browser and OS.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Does clicking on an {{HTMLElement("a")}} give it the focus?
Desktop BrowsersWindows 8.1OS X 10.9
Firefox 30.0YesYes
Chrome ≥39
+ (Chromium bug 388666)		YesYes
Safari 7.0.5N/AOnly when it has a tabindex
Internet Explorer 11YesN/A
Presto (Opera 12)YesYes
+ + + + + + + + + + + + + + + + + + + + +
Does tapping on an {{HTMLElement("a")}} give it the focus?
Mobile BrowsersiOS 7.1.2Android 4.4.4
Safari MobileOnly when it has a tabindexN/A
Chrome 35???Only when it has a tabindex
+ +

পাদটীকা

+ +

The following are reserved browser key bindings for the two major browsers and should not be used as values to accesskey: a, c, e, f, g, h, v, left arrow, and right arrow.

+ +

HTML 3.2 defines only name, href, rel, rev, and title.

+ +

The target attribute is not defined in browsers that do not support frames, such as Netscape 1 generation browsers. Furthermore, target is not allowed under strict variants of XHTML but is limited to frameset or transitional forms.

+ +

জাভাস্ক্রিপ্ট রিকোমেন্ডিশন 

+ +

It is often the case that an anchor tag is used with the onclick event. In order to prevent the page from refreshing, href is often set to either "#" or "javascript:void(0)". Both of these values can lead to some unexpected errors when copying links and opening links in a new tab and/or window. Be aware of this for usability reasons, and when users do use anchor tags and you prevent default behavior.

+ +

আরও দেখুন 

+ + + +
{{HTMLRef}}
diff --git a/files/bn/web/html/element/article/index.html b/files/bn/web/html/element/article/index.html new file mode 100644 index 0000000000..66d0db941b --- /dev/null +++ b/files/bn/web/html/element/article/index.html @@ -0,0 +1,110 @@ +--- +title:
+slug: Web/HTML/Element/article +tags: + - Element + - HTML + - HTML sections + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/article +--- +

HTML <article> এলিমেন্ট ডকুমেন্ট, পেজ, অ্যাপ বা সাইটে একটি স্বয়ংসম্পূর্ণ প্রবন্ধ উপস্থাপন করে। এই প্রবন্ধটি স্বাধীনভাবে বিতরণযোগ্য বা পুনর্ব্যবহারযোগ্য, যেমনঃ syndication। এটা একটা ফোরাম পোস্ট হতে পারে, একটি ম্যাগাজিন বা পত্রিকার নিবন্ধ হতে পারে, একটি ব্লগ পোস্ট হতে পারে, মন্তব্য হতে পারে, একটি ইন্টারেক্টিভ উইজেট বা গ্যাজেট হতে পারে অথবা কন্টেন্ট এর একটি স্বাধীন উপকরণ হতে পারে।

+
+

ব্যবহার নির্দেশিকাঃ

+
    +
  • যখন একটি <article> এলিমেন্ট নেস্ট করা হয়, তখন ভেতরে থাকা এলিমেন্টটি একটি নিবন্ধ উপস্থাপন করে, যা বাইরের এলিমেন্টের সাথে সম্পর্কযুক্ত। উদাহরণ স্বরূপ, একটি ব্লগ পোস্টের কমেন্ট সমূহ <article> এলিমেন্টের মধ্যে নেস্ট করা <article> এলিমেন্ট হতে পারে, যেগুলো ব্লগ পোস্টটির সাথে সম্পর্কিত।
    • +
  • <article> এলিমেন্টের লেখকের তথ্য {{HTMLElement("address")}} এলিমেন্টের মাধ্যমে দেয়া যায়, কিন্তু আমরা আগেই জেনেছি যে, <article> এর মধ্যে <address> এলিমেন্ট নেস্ট করা যাবেনা।
    • +
  • <article> এলিমেন্টের প্রকাশের তারিখ এবং সময় {{HTMLElement("time")}} এলিমেন্টের {{htmlattrxref("pubdate", "time")}} অ্যাট্রিবিউট ব্যবহার করে লেখা যাবে।
    • +
+
+ +

অ্যাট্রিবিউট সমূহ

+

এই এলিমেন্টের মধ্যে শুধু গ্লোবাল অ্যাট্রিবিউট সমূহ ব্যবহার করা যাবে।

+

উদাহরণ

+
<article>
+  <h4>A really awesome article</h4>
+  <p>Lots of awesome text.</p>
+</article>
+
+

Specifications

+ + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5 W3C')}} 
+

ব্রাউজার কম্প্যাটিবিলিটি

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
ফিচারক্রোমফায়ারফক্স (গেকো)ইন্টারনেট এক্সপ্লোরারঅপেরাসাফারি
মৌলিক সমর্থন৫{{CompatGeckoDesktop("2.0")}}৯.০১১.১০৪.১
+
+
+ + + + + + + + + + + + + + + + + + + +
ফিচারঅ্যান্ড্রয়েডফায়ারফক্স মোবাইল (গেকো)ইন্টারনেট এক্সপ্লোরার মোবাইলঅপেরা মোবাইলসাফারি মোবাইল
মৌলিক সমর্থন২.২{{CompatGeckoMobile("2.0")}}৯.০১১.০৫.০ (iOS ৪.২)
+
+

আরও দেখুন

+ +

{{ HTMLRef }}

diff --git a/files/bn/web/html/element/b/index.html b/files/bn/web/html/element/b/index.html new file mode 100644 index 0000000000..47bd3812f8 --- /dev/null +++ b/files/bn/web/html/element/b/index.html @@ -0,0 +1,159 @@ +--- +title: সামারি +slug: Web/HTML/Element/b +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Element/b +--- +

 সংক্ষিপ্ত

+ +

 

+ +
+
এইচ টি এম এল <বি> এলিমেন্ট কোন বিশেষ গুরুত্ব বা প্রাসঙ্গিকতা conveying ছাড়াই স্বাভাবিক টেক্সট থেকে শৈলীগত বিভিন্ন লেখার একটা স্প্যান প্রতিনিধিত্ব করে। এটা সাধারণত একটি সারসংক্ষেপ মধ্যে কীওয়ার্ড, পণ্যের নাম একটি পর্যালোচনা, বা যার সাধারণত উপস্থাপনা boldfaced হবে। টেক্সট অন্য ঘটনাকাল জন্য ব্যবহার করা হয়। তার ব্যবহারের আরেকটি উদাহরণ হল একটি প্রবন্ধের প্রতিটি অনুচ্ছেদের নেতৃত্ব বাক্য চিহ্নিত করা হয়।
+
+ +
+

Usage notes:

+ +
    +
  • Do not confuse the <b> element with the {{HTMLElement("strong")}}, {{HTMLElement("em")}}, or {{HTMLElement("mark")}} elements. The {{HTMLElement("strong")}} element represents text of certain importance, {{HTMLElement("em")}} puts some emphasis on the text and the {{HTMLElement("mark")}} element represents text of certain relevance. The <b> element doesn't convey such special semantic information; use it only when no others fit.
    • +
  • Similarly, do not mark titles and headings using the <b> element. For this purpose, use the {{HTMLElement("h1")}} to {{HTMLElement("h6")}} tags. Further, stylesheets can change the default style of these elements, with the result that they are not necessarily displayed in bold.
    • +
  • It is a good practice to use the class attribute on the <b> in order to convey additional semantic information (for example <b class="lead"> for the first sentence in a paragraph). This eases the development of several stylings of a web document, without the need to change its HTML code.
    • +
  • Historically, the <b> element was meant to make text boldface. Styling information has been deprecated since HTML4, so the meaning of the <b> element has been changed.
    • +
  • If there is no semantic purpose on using the <b> element, using css property font-weight with bold value would be a better choice for making text bold.
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, palpable content.
Permitted contentPhrasing content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts phrasing content.
DOM interface{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
+ +

 আরোপ করা

+ +

এই উপাদান শুধুমাত্র গ্লোবাল গুণাবলীতে রয়েছে।

+ +

 উদাহরণ

+ +
<p>
+  This article describes several <b>text-level</b> elements. It explains their usage in an <b>HTML</b> document.
+</p>
+Keywords are displayed with the default style of the <b> element, likely in bold.
+
+ +

 ফল

+ +

 

+ +

এই নিবন্ধটি কয়েকটি টেক্সট-স্তরের উপাদান বর্ণ।এটি একটি এইচ টি এম এল নথিতে তাদের ব্যবহার ব্যাখ্যা।
+
+ মূলশব্দ গাঢ় সম্ভবত <বি> উপাদান, এর ডিফল্ট শৈলী সঙ্গে প্রদর্শিত হয়।

+ +

 বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-b-element', '<b>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '<b>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}{{Spec2('HTML4.01')}} 
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 আরো দেখুন

+ + + +
{{HTMLRef}}
diff --git a/files/bn/web/html/element/blockquote/index.html b/files/bn/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..2de7e9d5b1 --- /dev/null +++ b/files/bn/web/html/element/blockquote/index.html @@ -0,0 +1,155 @@ +--- +title:
+slug: Web/HTML/Element/blockquote +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Element/blockquote +--- +

 সংক্ষিপ্ত

+ +

 এইচ টি এম এল <blockquote> এলিমেন্ট (বা এইচ টি এম এল ব্লক উদ্ধৃতি এলিমেন্ট) ঘিরা টেক্সট বর্ধিত উদ্ধৃতি যে ইঙ্গিত দেয়।সাধারণত, এই (এটি পরিবর্তন করার জন্যে নোট দেখুন) খাঁজ দ্বারা দৃশ্যত অনুষ্ঠিত হয়।উৎস একটি টেক্সট উপস্থাপনা {{HTMLElement ("cite")}} উপাদান ব্যবহার দেওয়া যেতে পারে, যখন উদ্ধৃতি উৎস জন্য একটি URL, অ্যাট্রিবিউট cite ব্যবহার দেওয়া হতে পারে।

+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, sectioning root, palpable content.
Permitted contentFlow content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts flow content.
DOM interface{{domxref("HTMLQuoteElement")}}
+ +

 

+ +

আরোপ করা
+
+ এই উপাদান গ্লোবাল গুণাবলী রয়েছে।

+ +
+
{{htmlattrdef("cite")}}
+
 উদ্ধৃত তথ্যের জন্য একটি উৎস নথি বা বার্তা মনোনীত যে একটি URL। এই বৈশিষ্ট্য কনটেক্সট বা উক্তির রেফারেন্স ব্যাখ্যা তথ্য নির্দেশ করার  উদ্দেশ্যে করা হচ্ছে।
+
+ +

 উদাহরণ

+ +
<blockquote cite="http://developer.mozilla.org">
+  <p>This is a quotation taken from the Mozilla Developer Center.</p>
+</blockquote>
+
+ +

 এইচ টি এম এল কোডের আউটপুট উপরে:

+ +
+

This is a quotation taken from the Mozilla Developer Center.

+
+ +

বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '<blockquote>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}{{Spec2('HTML4.01')}} 
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 নোট

+ +

 

+ +

<Blockquote> ইন্ডেন্ট সি এস এস কোড ব্যবহার {{cssxref ("মার্জিন")}} সম্পত্তি পরিবর্তন করতে।
+
+ স্বল্প কোট {{HTMLElement ("Q")}} উপাদান ব্যবহার করার জন্য।

+ +

 

+ +

আরো দেখুন
+
+      ইনলাইন উদ্ধৃতি জন্য {{HTMLElement ("Q")}} উপাদান।
+      উৎস উদ্ধৃতির জন্য {{HTMLElement} ("cite")} উপাদান।
+
+ {{}} HTMLRef

diff --git a/files/bn/web/html/element/index.html b/files/bn/web/html/element/index.html new file mode 100644 index 0000000000..746ff13018 --- /dev/null +++ b/files/bn/web/html/element/index.html @@ -0,0 +1,216 @@ +--- +title: HTML এলিমেন্ট রেফারেন্স +slug: Web/HTML/Element +tags: + - HTML + - 'HTML:Element Reference' + - NeedsReview + - TopicStub + - Web + - ওয়েব + - রেফারেন্স +translation_of: Web/HTML/Element +--- +

যেসব HTML এলিমেন্ট, HTML5 অথবা এর আগের কোন সংস্করণে ছিল, তাদের প্রত্যেককে এই পাতায় লিস্ট করা হয়েছে। যখন কোন এলিমেন্ট কে এঙ্গেল ব্র্যাকেটের ভেতর লেখা হয়, তখন তাদেরকে HTML ট্যাগ বলে, যেমনঃ <elementname>। কীভাবে একটা HTML পেইজ/ডকুমেন্ট তৈরি করা হবে, আর এই পেইজের কোন অংশে কি ধরণের কন্টেন্ট বসানো হবে তা নির্ধারিত হয় এইসব HTML এলিমেন্ট দিয়েই।

+

এই পাতায় সব স্ট্যান্ডার্ড HTML ট্যাগকে লিস্ট করা হয়েছে। নতুন HTML5 ট্যাগ আর পুরনো ট্যাগ (স্ট্যান্ডার্ড না এমন ট্যাগ আর বাতিল হয়ে যাওয়া ট্যাগও রয়েছে) সবগুলোকেই লিস্ট করা হয়েছে এখানে। যেসব এলিমেন্ট HTML5 এ নতুন এসেছে তাদেরকে প্রায়ই নতুন HTML5 এলিমেন্ট বলা হয়, যদিও আগের স্ট্যান্ডার্ড এলিমেন্টগুলোও HTML5 এ কাজ করে।

+

In an HTML document, an element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash: </elementname>. Some elements don't need to be closed, such as image elements. These are known as void elements. HTML documents contain a tree of these elements. Each is named to represent what it does. For example, the <title> element represents the title of the document. Below is an alphabetical list of the HTML Elements.

+
+ A +
    +
  • {{ HTMLElement("a") }}
    • +
  • {{ HTMLElement("abbr") }}
    • +
  • {{ HTMLElement("acronym") }}
    • +
  • {{ HTMLElement("address") }}
    • +
  • {{ HTMLElement("applet") }}
    • +
  • {{ HTMLElement("area") }}
    • +
  • {{ HTMLElement("article") }}
    • +
  • {{ HTMLElement("aside") }}
    • +
  • {{ HTMLElement("audio") }}
    • +
+ B +
    +
  • {{ HTMLElement("b") }}
    • +
  • {{ HTMLElement("base") }}
    • +
  • {{ HTMLElement("basefont") }}
    • +
  • {{ HTMLElement("bdi") }}
    • +
  • {{ HTMLElement("bdo") }}
    • +
  • {{ HTMLElement("bgsound") }}
    • +
  • {{ HTMLElement("big") }}
    • +
  • {{ HTMLElement("blink") }}
    • +
  • {{ HTMLElement("blockquote") }}
    • +
  • {{ HTMLElement("body") }}
    • +
  • {{ HTMLElement("br") }}
    • +
  • {{ HTMLElement("button") }}
    • +
+ C +
    +
  • {{ HTMLElement("canvas") }}
    • +
  • {{ HTMLElement("caption") }}
    • +
  • {{ HTMLElement("center") }}
    • +
  • {{ HTMLElement("cite") }}
    • +
  • {{ HTMLElement("code") }}
    • +
  • {{ HTMLElement("col") }}
    • +
  • {{ HTMLElement("colgroup") }}
    • +
  • {{ HTMLElement("command") }}
    • +
+ D +
    +
  • {{ HTMLElement("data") }}
    • +
  • {{ HTMLElement("datalist") }}
    • +
  • {{ HTMLElement("dd") }}
    • +
  • {{ HTMLElement("del") }}
    • +
  • {{ HTMLElement("details") }}
    • +
  • {{ HTMLElement("dfn") }}
    • +
  • {{ HTMLElement("dir") }}
    • +
  • {{ HTMLElement("div") }}
    • +
  • {{ HTMLElement("dl") }}
    • +
  • {{ HTMLElement("dt") }}
    • +
+ E +
    +
  • {{ HTMLElement("em") }}
    • +
  • {{ HTMLElement("embed") }}
    • +
+ F +
    +
  • {{ HTMLElement("fieldset") }}
    • +
  • {{ HTMLElement("figcaption") }}
    • +
  • {{ HTMLElement("figure") }}
    • +
  • {{ HTMLElement("font") }}
    • +
  • {{ HTMLElement("footer") }}
    • +
  • {{ HTMLElement("form") }}
    • +
  • {{ HTMLElement("frame") }}
    • +
  • {{ HTMLElement("frameset") }}
    • +
+ G H +
    +
  • {{ HTMLElement("h1") }}
    • +
  • {{ HTMLElement("h2") }}
    • +
  • {{ HTMLElement("h3") }}
    • +
  • {{ HTMLElement("h4") }}
    • +
  • {{ HTMLElement("h5") }}
    • +
  • {{ HTMLElement("h6") }}
    • +
  • {{ HTMLElement("head") }}
    • +
  • {{ HTMLElement("header") }}
    • +
  • {{ HTMLElement("hgroup") }}
    • +
  • {{ HTMLElement("hr") }}
    • +
  • {{ HTMLElement("html") }}
    • +
+ I +
    +
  • {{ HTMLElement("i") }}
    • +
  • {{ HTMLElement("iframe") }}
    • +
  • {{ HTMLElement("img") }}
    • +
  • {{ HTMLElement("input") }}
    • +
  • {{ HTMLElement("ins") }}
    • +
  • {{ HTMLElement("isindex") }}
    • +
+ J K +
    +
  • {{ HTMLElement("kbd") }}
    • +
  • {{ HTMLElement("keygen") }}
    • +
+ L +
    +
  • {{ HTMLElement("label") }}
    • +
  • {{ HTMLElement("legend") }}
    • +
  • {{ HTMLElement("li") }}
    • +
  • {{ HTMLElement("link") }}
    • +
  • {{ HTMLElement("listing") }}
    • +
+ M +
    +
  • {{HTMLElement("main")}}
    • +
  • {{ HTMLElement("map") }}
    • +
  • {{ HTMLElement("mark") }}
    • +
  • {{ HTMLElement("marquee") }}
    • +
  • {{ HTMLElement("menu") }}
    • +
  • {{ HTMLElement("meta") }}
    • +
  • {{ HTMLElement("meter") }}
    • +
+ N +
    +
  • {{ HTMLElement("nav") }}
    • +
  • {{ HTMLElement("nobr") }}
    • +
  • {{ HTMLElement("noframes") }}
    • +
  • {{ HTMLElement("noscript") }}
    • +
+ O +
    +
  • {{ HTMLElement("object") }}
    • +
  • {{ HTMLElement("ol") }}
    • +
  • {{ HTMLElement("optgroup") }}
    • +
  • {{ HTMLElement("option") }}
    • +
  • {{ HTMLElement("output") }}
    • +
+ P +
    +
  • {{ HTMLElement("p") }}
    • +
  • {{ HTMLElement("param") }}
    • +
  • {{ HTMLElement("plaintext") }}
    • +
  • {{ HTMLElement("pre") }}
    • +
  • {{ HTMLElement("progress") }}
    • +
+ Q +
    +
  • {{ HTMLElement("q") }}
    • +
+ R +
    +
  • {{ HTMLElement("rp") }}
    • +
  • {{ HTMLElement("rt") }}
    • +
  • {{ HTMLElement("ruby") }}
    • +
+ S +
    +
  • {{ HTMLElement("s") }}
    • +
  • {{ HTMLElement("samp") }}
    • +
  • {{ HTMLElement("script") }}
    • +
  • {{ HTMLElement("section") }}
    • +
  • {{ HTMLElement("select") }}
    • +
  • {{ HTMLElement("small") }}
    • +
  • {{ HTMLElement("source") }}
    • +
  • {{ HTMLElement("spacer") }}
    • +
  • {{ HTMLElement("span") }}
    • +
  • {{ HTMLElement("strike") }}
    • +
  • {{ HTMLElement("strong") }}
    • +
  • {{ HTMLElement("style") }}
    • +
  • {{ HTMLElement("sub") }}
    • +
  • {{ HTMLElement("summary") }}
    • +
  • {{ HTMLElement("sup") }}
    • +
+ T +
    +
  • {{ HTMLElement("table") }}
    • +
  • {{ HTMLElement("tbody") }}
    • +
  • {{ HTMLElement("td") }}
    • +
  • {{ HTMLElement("textarea") }}
    • +
  • {{ HTMLElement("tfoot") }}
    • +
  • {{ HTMLElement("th") }}
    • +
  • {{ HTMLElement("thead") }}
    • +
  • {{ HTMLElement("time") }}
    • +
  • {{ HTMLElement("title") }}
    • +
  • {{ HTMLElement("tr") }}
    • +
  • {{ HTMLElement("track") }}
    • +
  • {{ HTMLElement("tt") }}
    • +
+ U +
    +
  • {{ HTMLElement("u") }}
    • +
  • {{ HTMLElement("ul") }}
    • +
+ V +
    +
  • {{ HTMLElement("var") }}
    • +
  • {{ HTMLElement("video") }}
    • +
+ W +
    +
  • {{ HTMLElement("wbr") }}
    • +
+ X Y Z +
    +
  • {{ HTMLElement("xmp") }}
    • +
+
+

The symbol This element has been added in HTML5 indicates that the element has been added in HTML5. Note that other elements listed here may have been modified or extended by the HTML5 specification. Dimmed elements are non-standard, obsolete, or deprecated; they must not be used in new Web sites, and should gradually be removed from existing ones.

diff --git a/files/bn/web/html/element/section/index.html b/files/bn/web/html/element/section/index.html new file mode 100644 index 0000000000..17eecffcd7 --- /dev/null +++ b/files/bn/web/html/element/section/index.html @@ -0,0 +1,129 @@ +--- +title:
+slug: Web/HTML/Element/section +tags: + - Element + - HTML + - HTML sections + - HTML5 + - Reference + - Référence(2) + - Web + - Élément(2) +translation_of: Web/HTML/Element/section +--- +

সারাংশ

+ +

HTML সেকশন এলিমেন্ট (<section>) একটি ডকুমেন্ট এর কিছু অংশকে নির্দিষ্ট করে। যেমনঃ শিরোনাম সহ কিছু কন্টেন্ট।

+ +
+

ব্যবহার নির্দেশিকাঃ

+ +
    +
  • যদি একটি {{HTMLElement("section")}} এর কন্টেন্ট আলাদাভাবে চিহ্নিত করার প্রয়োজন হয়, তাহলে {{HTMLElement("article")}} এলিমেন্ট ব্যবহার করতে পারেন।
    • +
  • সাধারন কন্টেইনার হিসেবে {{HTMLElement("section")}} এলিমেন্ট ব্যবহার করবেন না; সাধারন কন্টেইনার হিসেবে ব্যবহার করার জন্য{{HTMLElement("div")}} এলিমেন্ট রয়েছে। সহজ কথায়, সেকশন শুধু একটি ডকুমেন্ট এর আউটলাইন তৈরিতে ব্যবহার করা যাবে।
    • +
+
+ + + +

অ্যাট্রিবিউট সমূহ

+ +

এই এলিমেন্টের মধ্যে শুধু গ্লোবাল অ্যাট্রিবিউট সমূহ ব্যবহার করা যাবে।

+ +

উদাহরণ

+ +
<section>
+  <h1>Heading</h1>
+  <p>Bunch of awesome content</p>
+</section>
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComments
{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}{{Spec2('HTML5 W3C')}} 
+ +

ব্রাউজার কম্প্যাটিবিলিটি

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ফিচারক্রোমফায়ারফক্স (গেকো)ইন্টারনেট এক্সপ্লোরারঅপেরাসাফারি
মৌলিক সমর্থন৫{{CompatGeckoDesktop("2.0")}}৯.০১১.১০৪.১
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ফিচারঅ্যান্ড্রয়েডফায়ারফক্স মোবাইল (গেকো)ইন্টারনেট এক্সপ্লোরার মোবাইলঅপেরা মোবাইলসাফারি মোবাইল
মৌলিক সমর্থন২.২{{CompatGeckoMobile("2.0")}}৯.০১১.০৫.০ (iOS ৪.২)
+
+ +

আরও দেখুন

+ +
    +
  • Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};
    • +
  • Sections and outlines of an HTML5 document.
    • +
+ +
{{HTMLRef}}
diff --git a/files/bn/web/html/element/summary/index.html b/files/bn/web/html/element/summary/index.html new file mode 100644 index 0000000000..224f34c553 --- /dev/null +++ b/files/bn/web/html/element/summary/index.html @@ -0,0 +1,144 @@ +--- +title: +slug: Web/HTML/Element/summary +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Element/summary +--- +

{{SeeCompatTable}}

+ +

 

+ +

সংক্ষিপ্ত
+
+ এইচ টি এম এল সারসংক্ষেপ উপাদান (<সারসংক্ষেপ>) একটি {{HTMLElement ("বিবরণ")}} উপাদান বিষয়বস্তুর জন্য একটি সারসংক্ষেপ, ক্যাপশন, অথবা লেজেন্ড হিসেবে ব্যবহার করা হয়।
+ উল্লেখ্য: <সারসংক্ষেপ> উপাদান বাদ দেওয়া হয়, তাহলে শিরোনাম "বিবরণ" ব্যবহার করা হবে।

+ +

 ব্যবহারের প্রেক্ষাপট

+ + + + + + + + + + + + + + + + + + + + +
Permitted contentPhrasing content or one element of Heading content
Tag omissionNone, both the start tag and the end tag are mandatory.
Permitted parent elementThe {{ HTMLElement("details") }} element.
Normative documentHTML5, section 4.11.2
+ +

 আরোপ করা

+ +

 এই উপাদান শুধুমাত্র গ্লোবাল গুণাবলী রয়েছে।

+ +

 

+ +

ডি ও এম  ইন্টারফেস
+
+ এই উপাদান {{domxref ("HTMLElement")}} ইন্টারফেস এবং কার্যকরী।

+ +

 

+ +

উদাহরণ
+
+  

+ +

সঙ্কলন, পরের লাইন লিঙ্ক থেকে বিবরণ পেতে

+ +
 
+ +

 <সারসংক্ষেপ> উপর উদাহরণ জন্য {{HTMLElement ("বিবরণ")}} পাতাটি দেখুন।

+ +

 বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}{{Spec2('HTML5.1')}} 
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support12{{ CompatNo}}[1]{{CompatNo}}{{CompatNo}}6
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.0{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{ CompatNo}}
+
+ +

[1] Gecko doesn't currently implement this. See {{bug(591737)}}.

+ +

 আরো দেখুন

+ +
    +
  • {{ HTMLElement("details") }}
    • +
+ +
{{HTMLRef}}
diff --git a/files/bn/web/html/focus_management_in_html/index.html b/files/bn/web/html/focus_management_in_html/index.html new file mode 100644 index 0000000000..f468a3570b --- /dev/null +++ b/files/bn/web/html/focus_management_in_html/index.html @@ -0,0 +1,65 @@ +--- +title: Focus management in HTML +slug: Web/HTML/Focus_management_in_HTML +translation_of: Web/API/Document/hasFocus +--- +

এইচটিএমএল৫ এর ওয়ার্কিং ড্রাফট, একটিভআলিমেন্ত ডোম অ্যাট্রিবিউট এবং হেজফোকাস() ডোম মেথড প্রোগ্রামারকে ইউজার এর কারনে পেজ এর ইন্টারআক্তিভিটিতে আরও ভালো নিয়ন্ত্রণ করার ক্ষমতা দেয়। উদাহরণস্বরূপ, দুইটিকে পরিসংখ্যান এর সাধারণ উদ্দেশে ব্যাবহার করা যায়, একটি পেজ এর কিছু লিংকের ক্লিক সংখ্যা বের করা,একটি এলিমেন্তের উপর ফোকাসের সময় বের করা, এবং আরও অনেক।অতিরিক্ত, আজাক্স টেকনোলজির সাহায্যে, সার্ভারের রিকুস্তের সংখ্যা কমানো যায় যা ইউজার এবং পেজ এর লেআউট এর উপর নির্ভর করে।

+ +

ব্রাউজার কম্পাতিবিলিটি

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("1.9.2")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[১] গিককো ৮.০ তে শুরু {{geckoRelease("8.0")}},ফায়ারফক্স এখন একটি ফোকাস রিং আঁকে যেকোনো এলিমেন্ত এর উপর যখন তার তাবিনেক্স ভেলু ০ থেকে বড়, শুধু একটি সীমিত সাবসেট আইটেমস এর পরিবর্তে। এই নিয়মের কিছু বাতিক্রম আছেঃ  {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("iframe")}}, {{HTMLElement("frame")}}, {{HTMLElement("body")}}, and {{HTMLElement("html")}}.

+ +

আরও দেখুন

+ +
    +
  • {{domxref("document.activeElement")}}
    • +
  • {{domxref("document.hasFocus")}}
    • +
diff --git a/files/bn/web/html/global_attributes/accesskey/index.html b/files/bn/web/html/global_attributes/accesskey/index.html new file mode 100644 index 0000000000..9ed0660b2c --- /dev/null +++ b/files/bn/web/html/global_attributes/accesskey/index.html @@ -0,0 +1,146 @@ +--- +title: অ্যাক্সেস কী +slug: Web/HTML/Global_attributes/accesskey +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Global_attributes/accesskey +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

 

+ +
+
 অ্যাক্সেস কী গ্লোবাল অ্যাট্রিবিউট বর্তমান উপাদান জন্য একটি কীবোর্ড শর্টকাট জেনারেট করার জন্য একটি ইঙ্গিত প্রদান করে। এই বৈশিষ্ট্য অক্ষরের একটি স্থান বিচ্ছিন্ন তালিকা-র (এক একক ইউনিকোড কোড পয়েন্ট) নিয়ে গঠিত। ব্রাউজার কম্পিউটার কিবোর্ড লেআউট যে বিদ্যমান প্রথমটি ব্যবহার।
+
+ অ্যাক্সেস কী সক্রিয় অপারেশন ব্রাউজার এবং তার প্ল্যাটফর্ম উপর নির্ভর করে।
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 WindowsLinuxMac
FirefoxAlt + Shift + keyOn Firefox 14 or newer, Control + Alt + key
+ On Firefox 13 or older, Control + key
Internet ExplorerAlt + keyN/A
Google ChromeAlt + keyControl + Alt + key
SafariAlt + keyN/AControl + Alt + key
OperaShift + Esc opens a contents list which are accessible by accesskey, then, can choose an item by pressing key
+ +

 ফায়ারফক্স ব্যবহারকারীর পছন্দ প্রয়োজন মডিফায়ার কী কাস্টমাইজ করতে পারেন মনে রাখবেন।

+ +

বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML4.01')}}, several characters can be set as the accesskey. Also, it can be set on any element.
{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}{{Spec2('HTML4.01')}}Only supported on {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 আরো দেখুন

+ +

সকল গ্লোবাল গুণাবলী

+ +
    +
diff --git a/files/bn/web/html/global_attributes/contenteditable/index.html b/files/bn/web/html/global_attributes/contenteditable/index.html new file mode 100644 index 0000000000..083dd6493d --- /dev/null +++ b/files/bn/web/html/global_attributes/contenteditable/index.html @@ -0,0 +1,103 @@ +--- +title: contenteditable +slug: Web/HTML/Global_attributes/contenteditable +translation_of: Web/HTML/Global_attributes/contenteditable +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

কন্টেন্টেদিতেবল গ্লোবাল আত্রিবিয়ট একটি এনাম্বেরাতেট আত্রিবিয়ুট যা নির্দেশিত করে যে যদি এলিমেন্ত ইউজার দ্বারা এডিটিং করা যায়।তাহলে,ব্রাউজার এডিটিং এর জন্য তার ওয়িদগেট পরিবর্তন করবে। আত্রিবিয়ুটি নিম্নের যেকোনো একটি ভেলুকে নিতে হবেঃ

+ +
    +
  • সত্য অথবা আম্পতি স্ট্রিং ,যা নির্দেশিত করে যে এলিমেন্তটি অবশ্যই এডিটেবল;
    • +
  • মিথ্যা,যা নির্দেশিত করে যে এলিমেন্তটি এডিটেবল নয়।
    • +
+ +

যদি এই আত্রিবিয়ুট সেট না হয়,ইহার দিফোলট ভেলু ইহার প্যারেন্ট এলিমেন্ত থেকে নেয়া হবে।

+ +

এই আত্রিবিয়ুট একটি এনাম্বেরাতেট এবং বুলিয়ান নয়। ইহার মানে যে সত্য, মিথ্যা অথবা আম্পটি স্ট্রিং  ভেলুর স্পষ্ট ব্যবহার কার্যভার এবং এর মত শর্টহ্যান্ড <label contenteditable>Example Label</label> অনুমোদিত নয়।সঠিক ব্যবহার হল <label contenteditable="true">Example Label</label>।

+ +

স্পেসিফিকেশনস

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

ব্রাউজার কম্প্যাটিবিলিটি

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

আরও দেখুন

+ + diff --git a/files/bn/web/html/global_attributes/draggable/index.html b/files/bn/web/html/global_attributes/draggable/index.html new file mode 100644 index 0000000000..47aee89b01 --- /dev/null +++ b/files/bn/web/html/global_attributes/draggable/index.html @@ -0,0 +1,101 @@ +--- +title: ড্রাগেবল +slug: Web/HTML/Global_attributes/draggable +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Global_attributes/draggable +--- +

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

+ +

টেনে আনার যোগ্য গ্লোবাল অ্যাট্রিবিউট উপাদান টেনে নিয়ে যাবে যে কিনা তার ইঙ্গিত একটি গণিত অ্যাট্রিবিউট ব্যবহার করে {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. এটা নিম্নলিখিত মান থাকতে পারে;

+ +
    +
  • সঠিক,এটি নি্দেশ করে যে উপাদানটি টানা হতে পারে
    • +
  • ভুল,এটি নি্দেশ করে যে উপাদানটি টানা হতে পারে না
    • +
+ +

যদি এই আরোপন সেট না হয়, তবে প্রাথমিক মান আপনা-আপনি হয়, আচরণ যার অর্থ ব্রাউজার দ্বারা ডিফল্টরূপে সংজ্ঞায়িত এক হওয়া উচিত।

+ +

এই বৈশিষ্ট্যটি গণিত তবে একটি বুলিয়ান  না। এই মান সত্য বা মিথ্যা হোক এর স্পষ্ট ব্যবহার বাধ্যতামূলক, যে মানে এবং <ট্যাগ টেনে আনার যোগ্য> উদাহরণ ট্যাগ </ ট্যাগ> মত একটি সংক্ষিপ্ত লেখার অনুমতি দেওয়া হয় না। সঠিক ব্যবহারটি হলো <ট্যাগ টেনে আনার যোগ্য = "সত্য"> উদাহরণ ট্যাগ </ ট্যাগ> ।

+ +

ডিফল্টরূপে, শুধুমাত্র টেক্সট, ছবি, লিংক নির্বাচন করা হলে টেনে নেওয়া যাবে।সকল উপাদান এর জন্য, পর্বটি {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} অবশ্যই  টেনে নেওয়া এবং ছেঁড়ে দেওয়ার কাজ এর জন্য সেট করতে হবে, যেমন দেখানো হলো কম্প্রেহেনসিভ উদাহারন.

+ +

স্পেসিফিকেশন

+ + + + + + + + + + + + + + + + + + + +
স্পেসিফিকেশনঅবস্থামন্তব্য
{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML WHATWG')}}বর্তমান স্ন্যাপশট হতে পরিবর্তন নেই, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML5.1')}}প্রাথমিক সংজ্ঞা এর স্ন্যাপশট {{SpecName('HTML WHATWG')}},
+ +

ব্রাউজার কম্পিবিলিটি

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
বৈশিষ্ট্যক্রোমফায়ারফক্স (গেছকো)ইন্টারনেট এক্সপ্লোরারঅপেরাসাফারি
প্রাথমিক সহায়তা{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
বৈশিষ্ট্যএন্ড্রোয়েডএন্ড্রয়েডের জন্য ক্রোমফায়ারফক্স মোবাইল (গেছকো)আই ই মোবাইলঅপেরা মোবাইলসাফারি মোবাইল
প্রাথমিক সহায়তা{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

আরও দেখুন

+ + diff --git a/files/bn/web/html/global_attributes/hidden/index.html b/files/bn/web/html/global_attributes/hidden/index.html new file mode 100644 index 0000000000..eb0e626582 --- /dev/null +++ b/files/bn/web/html/global_attributes/hidden/index.html @@ -0,0 +1,105 @@ +--- +title: গোপন +slug: Web/HTML/Global_attributes/hidden +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Global_attributes/hidden +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

 লুকানো গ্লোবাল অ্যাট্রিবিউট উপাদান এখনো নয়, অথবা আর, প্রাসঙ্গিক তা নির্দেশ করে ।একটি বুলিয়ান বৈশিষ্ট্য হল. উদাহরণস্বরূপ, এটি লগইন প্রক্রিয়া সম্পন্ন না হওয়া পর্যন্ত ব্যবহার করা যাবে না যে পৃষ্ঠার উপাদান আড়াল করতে ব্যবহার করা যেতে পারে। ব্রাউজার যেমন উপাদান রেন্ডার করা হবে না।

+ +

 

+ +

এই বৈশিষ্ট্য বৈধভাবে দেখানো যেতে পারে যে কন্টেন্ট আড়াল করতে ব্যবহার করা উচিত নয়। এই একটি স্টাইলিং সিদ্ধান্ত এবং তাদের একটি পুরোপুরি সঠিক পাতা নেতৃত্ব চাই দেখাচ্ছে অন্য শৈলী হিসাবে উদাহরণস্বরূপ, এটি একটি ট্যাবযুক্ত ইন্টারফেস ট্যাব প্যানেল লুকান ব্যবহার করা উচিত নয়।
+
+ গোপন উপাদান অ লুকানো উপাদান এবং যে স্ক্রিপ্ট উপাদান এখনও নির্বাহ করতে পারেন এবং ফর্ম উপাদান এখনও জমা দিতে পারেন, যার মানে সক্রিয় এখনও একটি গোপন উপাদান উত্তরপুরুষ যে উপাদান থেকে সংযুক্ত করা উচিত নয়।

+ +
+

Note: Changing the value of the CSS {{cssxref("display")}} property on an element with the hidden attribute overrides the behavior. For instance, an element styled display: flex will be displayed on screen regardless of the hidden attribute being present.

+
+ +

 বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}{{Spec2('HTML WHATWG')}}Defines the suggested default rendering of the hidden attribute using CSS
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, initial definition
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2") }}11{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("2") }}11{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

 আরো দেখুন

+ +
    +
  •  সকল গ্লোবাল গুণাবলী।
    • +
diff --git a/files/bn/web/html/global_attributes/index.html b/files/bn/web/html/global_attributes/index.html new file mode 100644 index 0000000000..593c0dc6ed --- /dev/null +++ b/files/bn/web/html/global_attributes/index.html @@ -0,0 +1,463 @@ +--- +title: Global attributes +slug: Web/HTML/Global_attributes +tags: + - Attribute + - HTML + - NeedsBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/HTML/Global_attributes +--- +
{{HTMLSidebar("Global_attributes")}}
+ +
+

Global attributes are attributes common to all HTML elements; they can be used on all elements, though the attributes may have no effect on some elements.

+
+ +

Global attributes may be specified on all HTML elements, even those not specified in the standard. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <foo hidden>...<foo>, even though <foo> is not a valid HTML element.

+ +

In addition to the basic HTML global attributes, the following global attributes also exist:

+ +
    +
  • xml:lang and xml:base — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.
    • +
  • The multiple aria-* attributes, used for improving accessibility.
    • +
  • The event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
    • +
+ +

Description

+ +
+
accesskey
+
Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.
+
class
+
Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method {{domxref("Document.getElementsByClassName()")}}.
+
contenteditable
+
Is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values: +
    +
  • true or the empty string, which indicates that the element must be editable;
    • +
  • false, which indicates that the element must not be editable.
    • +
+
+
contextmenu
+
Is the id of an {{HTMLElement("menu")}} to use as the contextual menu for this element.
+
data-*
+
Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} property gives access to them.
+
dir
+
Is an enumerated attribute indicating the directionality of the element's text. It can have the following values: +
    +
  • ltr, which means left to right and is to be used for languages that are written from the left to the right (like English);
    • +
  • rtl, which means right to left and is to be used for languages that are written from the right to the left (like Arabic);
    • +
  • auto, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element.
    • +
+
+
draggable {{experimental_inline}}
+
Is an enumerated attribute indicating whether the element can be dragged, using the Drag and Drop API. It can have the following values: +
    +
  • true, which indicates that the element may be dragged
    • +
  • false, which indicates that the element may not be dragged.
    • +
+
+
dropzone {{experimental_inline}}
+
Is an enumerated attribute indicating what types of content can be dropped on an element, using the Drag and Drop API. It can have the following values: +
    +
  • copy, which indicates that dropping will create a copy of the element that was dragged
    • +
  • move, which indicates that the element that was dragged will be moved to this new location.
    • +
  • link, will create a link to the dragged data.
    • +
+
+
hidden
+
Is a Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.
+
id
+
Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
+
itemid {{experimental_inline}}
+
itemprop {{experimental_inline}}
+
itemref {{experimental_inline}}
+
itemscope {{experimental_inline}}
+
itemtype {{experimental_inline}}
+
These attributes are related to the WHATWG HTML Microdata feature.
+
lang
+
Participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defines in the Tags for Identifying Languages (BCP47) IETF document. xml:lang has priority over it.
+
spellcheck {{experimental_inline}}
+
Is an enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: +
    +
  • true, which indicates that the element should be, if possible, checked for spelling errors;
    • +
  • false, which indicates that the element should not be checked for spelling errors.
    • +
+
+
style
+
Contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{ HTMLElement("style") }} element have mainly the purpose of allowing for quick styling, for example for testing purposes.
+
tabindex
+
Is an integer attribute indicates if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values: +
    +
  • a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
    • +
  • 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
    • +
  • a positive value which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document).
    • +
+
+
title
+
Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.
+
translate
+
Is an enumerated attribute that is used to specify whether an element's attribute values and the values of its {{domxref("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values: +
    +
  • empty string and "yes", which indicates that the element will be translated.
    • +
  • "no", which indicates that the element will not be translated.
    • +
+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML WHATWG')}}From latest snapshot, {{SpecName('HTML5.1')}}, itemid, itemprop, itemref, itemscope, and itemtype have been added.
{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, spellcheck, draggable, and dropzone have been added.
{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the dir, lang, style, id, class, tabindex, accesskey, and title are now true global attributes.
+ xml:lang which was initially part of XHTML, is now also part of HTML.
+ hidden, data-*, contextmenu, contenteditable, and translate have been added.
{{SpecName('HTML4.01')}}{{Spec2('HTML4.01')}}There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.
+ class and style are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ dir is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
+ id is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ lang is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
+ tabindex is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+ accesskey is only supported on {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}.
+ title is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
accesskey{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
class{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contenteditable{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contextmenu{{CompatNo}}{{CompatGeckoDesktop(9)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
data-*{{CompatVersionUnknown}}{{CompatGeckoDesktop("6")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
dir{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
draggable{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
dropzone{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hidden{{CompatVersionUnknown}}{{CompatGeckoDesktop("2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
id{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
itemid, itemprop, itemref, itemscope, itemtype{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
lang{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
spellcheck{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
style{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
tabindex{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
title{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
accesskey{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
class{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contenteditable{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
contextmenu{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
data-*{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("6")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
dir{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
draggable{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
dropzone{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hidden{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
id{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
itemid, itemprop, itemref, itemscope, itemtype{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
lang{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
spellcheck{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
style{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
tabindex{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
title{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ +
    +
  • {{domxref("Element")}} and {{domxref("GlobalEventHandlers")}} interfaces that allow to query most global attributes.
    • +
diff --git a/files/bn/web/html/global_attributes/itemprop/index.html b/files/bn/web/html/global_attributes/itemprop/index.html new file mode 100644 index 0000000000..2ce2ce86eb --- /dev/null +++ b/files/bn/web/html/global_attributes/itemprop/index.html @@ -0,0 +1,19 @@ +--- +title: আইটেমপ্রোপ +slug: Web/HTML/Global_attributes/itemprop +translation_of: Web/HTML/Global_attributes/itemprop +--- +

আমরা যেমন অভিনেতা, পরিচালক, মূল্যায়ন হিসাবে বৈশিষ্ট্য মত, পাশ ইমেজ বা তথ্য সম্পর্কে সার্চ ইঞ্জিন থেকে আরো তথ্য ট্যাগ যে কোন ধরণের দিতে পারেন। একটি আইটেম এর বৈশিষ্ট্য লেবেলে আইটেমপ্রোপ অ্যাট্রিবিউট ব্যবহার। উদাহরণস্বরূপ, একটি সিনেমা পরিচালককে চিহ্নিত করা যাক,পরিচালক এর নাম অন্তর্নিহিত উপাদান করার আইটেমপ্রোপ = "পরিচালক" যোগ করুন।

+ +

এখানে একটি সহজ উদাহরনঃ

+ +
<div itemscope itemtype ="http://schema.org/Movie">
+  <h1 itemprop="name">Avatar</h1>
+  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
+  <span itemprop="genre">Science fiction</span>
+  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
+</div>
+ +

 

+ +

             সংশ্লিষ্ট বৈশিষ্ট্যাবলী পড়ুন উপর আরও  তথ্যের জন্য https://schema.org/docs/gs.html

diff --git a/files/bn/web/html/global_attributes/itemscope/index.html b/files/bn/web/html/global_attributes/itemscope/index.html new file mode 100644 index 0000000000..93725b7249 --- /dev/null +++ b/files/bn/web/html/global_attributes/itemscope/index.html @@ -0,0 +1,27 @@ +--- +title: স্কিমা মাইক্রোডাটা আইটেমস্কপ +slug: Web/HTML/Global_attributes/itemscope +tags: + - এইচটিএমএল +translation_of: Web/HTML/Global_attributes/itemscope +--- +

 এই বৈশিষ্ট্য স্ট্রাকচার্ড ডেটা প্রচার করে।স্কিমা মাইক্রোডাটা  আইটেমস্কুপ ব্যবহার করে আপনি সংশ্লিষ্ট bloe অন্তর্ভুক্ত এইচ টি এম এল একটি নির্দিষ্ট আইটেম সম্পর্কে যে নির্দিষ্ট করতে পারেন।
+
+ কিন্তু এটা একটি আইটেম এটা একটি আইটেম কি ধরনের উল্লেখ না আলোচনা হচ্ছে সেখানে যে উল্লেখ করার উপযোগী নয়। আমরা আইটেমস্কুপ দ্বারা আইটেমস্কুপ অনুসরণ অ্যাট্রিবিউট ব্যবহার আইটেমটি ধরণ উল্লেখ করা যাবে।
+
+ এখানে উদাহরণ হলঃ

+ +

 

+ +
<div itemscope itemtype="http://schema.org/Movie">
+  <h1>Avatar</h1>
+  <span>Director: James Cameron (born August 16, 1954)</span>
+  <span>Science fiction</span>
+  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
+</div>
+ +

এই আইটেমস্কুপ দ্বারা <p> ... </ p> নির্দিষ্ট ধরণ সম্পর্কে ভিতর আমরা এইচ টি এম এল উল্লেখ করা হয়, এবং আমরা অ্যাট্রিবিউট আইটেম টাইপের সঙ্গে কনটেন্ট এর ধরণ উল্লেখ করা হয়।
+
+ আইটেম টাইপ সম্পর্কে আরো বৈশিষ্ট্যাবলী পাওয়া যাবে  http://schema.org/Thing

+ +

 

diff --git a/files/bn/web/html/global_attributes/tabindex/index.html b/files/bn/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..efcf144936 --- /dev/null +++ b/files/bn/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,111 @@ +--- +title: tabindex +slug: Web/HTML/Global_attributes/tabindex +translation_of: Web/HTML/Global_attributes/tabindex +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

Note: The maximum value for tabIndex should not exceed 32767 per W3C section 17.11.1

+ +

ট্যাবইনডেক্স গোব্যাল আত্রিবিওট একটি পূর্ণসংখ্যা যা নির্দেশিত করে যে,যদি এলিমেন্তটি ফোকাসকে ইনপুতে নিতে পারে (ইহা ফোকাসিত),যদি ইহা সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশন অংশগ্রহন করে, এবং যেকোন অবস্তায়. ইহা সহাস্র ভেলু নিতে পারেঃ

+ +
    +
  • একটি  নেগাতিভ ভেলু মানে  হল এলিমেন্তটি অবশ্যই ফোকাসিত,কিন্তু সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আশা যাবে না;
    • +
  • 0 মানে হল এলিমেন্তটি ফোকাসিত করা যায় এবং সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আসা যায়,কিন্ত ইহার রিলেতিভ অর্ডার প্লাটফর্ম দ্বারা সংজ্ঞায়িত;
    • +
  • একটি পসিতিভ ভেলু যার মানে হল ফোকাসিত করা যায় এবং সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আসা যায়,কিন্ত ইহার রিলেতিভ অর্ডার প্লাটফর্ম দ্বারা সংজ্ঞায়িত; সেকএন্তিয়াল ট্যাবইনডেক্সের বড়দিত ভেলুকে অনুসরণ করে।যদি অনেক এলিমেন্তস একই ট্যাবইনডেক্স নিজদের মধ্যে ভাগ করে,তাদের রিলেতিভ অর্ডার তাদের রিলেতিভ পসিসনকে অনুসরন করে)।
    • +
+ +

একটি এলিমেন্তের সাথে 0 ভেলু, একটি অকার্যকর ভেলু, অথবা কোন ট্যাবইনডেক্স ভেলু সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশন অর্ডারের পসিতিভ ট্যাবইনডেক্স এর এলিমেন্তের পরে বসবে না।

+ +

তুমি এই প্রবন্ধটি পরযাচলনা করতে পারো ফোকাস মানেজমেন্তের ব্যাপক ব্যাখ্যা দেখার জন্য।

+ +

স্পেসিফিকেসনস

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+ +

ব্রাউজার কম্প্যাটিবিলিটি

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

আরও দেখুন

+ + diff --git a/files/bn/web/html/global_attributes/translate/index.html b/files/bn/web/html/global_attributes/translate/index.html new file mode 100644 index 0000000000..f95149af69 --- /dev/null +++ b/files/bn/web/html/global_attributes/translate/index.html @@ -0,0 +1,96 @@ +--- +title: অনুবাদ করা +slug: Web/HTML/Global_attributes/translate +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Global_attributes/translate +--- +

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

+ +

 অনুবাদ গ্লোবাল অ্যাট্রিবিউট একটি উপাদান এর অ্যাট্রিবিউট মান এবং তার টেক্সট নোড শিশুদের মান পৃষ্ঠা অনূদিত হয় বা অপরিবর্তিত তাদের ছেড়ে কিনা যখন অনুবাদ করা হয় কিনা তা উল্লেখ করতে ব্যবহৃত হয় যে একটি গণিত বৈশিষ্ট্য হল।এটা নিম্নলিখিত মান থাকতে পারে:

+ +
    +
  •  পাতা অনূদিত হয় যখন উপাদান অনুবাদ করা উচিত যা নির্দেশ করে যে খালি স্ট্রিং এবং "হ্যাঁ",।
    • +
  •  কোন", উপাদান অনুবাদ করা উচিত নয় যে, যা নির্দেশ করে।
    • +
+ +

 বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, initial definition
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo }}{{ CompatNo }}{{CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

 আরো দেখুন

+ +
    +
  • সকল গ্লোবাল গুণাবলী।
    • +
  • এই বৈশিষ্ট্য প্রতিফলিত করে {{domxref ("HTMLElement.translate")}} সম্পত্তি।
    • +
diff --git a/files/bn/web/html/index.html b/files/bn/web/html/index.html new file mode 100644 index 0000000000..b06315e384 --- /dev/null +++ b/files/bn/web/html/index.html @@ -0,0 +1,80 @@ +--- +title: HTML( হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ ) +slug: Web/HTML +tags: + - HTML + - HTML5 + - Landing + - Web +translation_of: Web/HTML +--- +
{{HTMLSidebar}}
+ +

HTML (HyperText Markup Language) হল ওয়েব নির্মানের মূল উপাদান। এটি ওয়েবপেজের বিষয়বস্তুগুলিকে বর্ণনা এবং সংজ্ঞায়িত করে। সাধারণভাবে HTML ছাড়া অন্যান্য প্রযুক্তি একটি ওয়েবপেজের চেহারা / উপস্থাপনা (CSS) অথবা কার্যকারিতা (Javascript) বর্ণনার জন্য ব্যবহার করা হয়। আপনার ব্রাউজারে প্রদর্শিত সবকিছুই মূলত HTML দিয়ে গঠিত হয়। আরও সঠিকভাবে বলা যায় যে, HTML হল এমন একটি ভাষা যা একটি ওয়েব ডকুমেন্টের গঠন, নক্সা, বিষয়বস্তুর অবস্থান, অভ্যন্তরীণ তথ্য ইত্যাদি নিয়ন্ত্রণ করে।

+ +

"হাইপার টেক্সট" বলতে একটি লিঙ্ক বোঝায় যেটা একটি ওয়েব পেজের সঙ্গে আরেকটি ওয়েবপজের সংযোগ স্থাপন করে, হয় একটি একক ওয়েবসাইট মধ্যে বা বিভিন্ন ওয়েবসাইটের মধ্যে। লিঙ্ক গুলি ওয়েবের সবচেয়ে অপরিহার্য অংশ। ইন্টারনেটে বিষয়বস্তু আপলোড এবং তা অন্যান্য ব্যক্তিদের দ্বারা নির্মিত পৃষ্ঠাগুলিতে সংযুক্ত করে আপনি ওয়ার্ল্ড ওয়াইড ওয়েবের একজন সক্রিয় অংশগ্রহণকারী হয়ে যেতে পারেন।

+ +

একটি ওয়েব ব্রাউজারের মধ্যে লেখা, ছবি, এবং অন্যান্য বিষয়বস্তু প্রদর্শনের জন্য এইচটিএমএল "মার্কআপ" ব্যবহার করে। HTML এর মার্কাপগুলি বিশেষ কতগুলি উপাদান দিয়ে অন্তর্ভুক্ত যেমন {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, এবং অনেক কিছু।

+ +

নিচের প্রবন্ধগুলি আপনাকে HTML শিখতে আরও সাহায্য করবে।

+ +
+
    +
  • HTML প্রসঙ্গ + +

    আমাদের বিস্তীর্ণ HTML reference অধ্যায়ে HTML এর সকল এলিমেন্ট ও অ্যাট্রিবিউট এর বিস্তারিত তথ্য জানতে পারবেন।

    +
    • +
  • HTML ডেভেলপার নির্দেশিকা +

    HTML ব্যবহার সম্পর্কিত নিবন্ধ, পরিপূর্ণ উদাহরণ সহ টিউটোরিয়াল ইত্যাদি দেখতে আমাদের HTML ডেভেলপার গাইড দেখুন।

    +
    • +
  • HTML পরিচিতি +

    ওয়েব ডেভেলপমেন্ট এর ক্ষেত্রে আপনি যদি নতুন হয়ে থাকেন, তাহলে HTML কি এবং কিভাবে এটা ব্যবহার করতে হবে ইত্যাদি জানার জন্য আমাদের পরিচিতি নিবন্ধটি অবশ্যই পড়বেন।

    +
    • +
+ +
+
+

রেফারেন্স সমূহ

+ +

{{SubpagesWithSummaries}}

+ +

সব দেখুন...

+
+ +
+

গাইড এবং টিউটোরিয়াল সমূহ

+ +
+
এইচটিএমএল ডেভেলপার গাইড
+
এমডিএন এর কিছু নিবন্ধ, যাতে কিছু নির্দিষ্ট কৌশল বর্ণনা করা হয়েছে যেগুলো আপনি HTML দিয়ে ওয়েব কন্টেন্ট তৈরি করার সময় ব্যবহার করতে পারেন। এখানে কিছু টিউটোরিয়ালও আছে যেগুলো আপনার কাজে লাগবে।
+
+
+
+
+ +
+
HTML উপাদানসমূহের নির্দেশিকা
+
সকল HTML উপাদানের একটি তালিকা দেখুন।
+
HTML প্রসঙ্গ
+
এইচটিএমএল এলিমেন্ট নিয়ে গঠিত, যার প্রত্যেকটি কতগুলি আট্রিবিউট দ্বারা পরিবর্তিত হতে পারে. HTML documents গুলি পরস্পরের সঙ্গে অন্যান্য লিঙ্কের মাধ্যমে সংযুক্ত থাকে। 
+
Inline উপাদানসমূহ
+
এইচটিএমএল এলিমেন্ট সাধারণত "ইনলাইন" উপাদান বা "ব্লক-স্তরের" উপাদান। একটি ইনলাইন উপাদান শুধুমাত্র ট্যাগের ভিতরের স্থান অধিকার করে থাকে। 
+
Block-level উপাদানসমূহ
+
এইচটিএমএল এলিমেন্ট সাধারণত "ব্লক-স্তরের" উপাদান বা "ইনলাইন" উপাদান। একটি ব্লক স্তরের উপাদান তার  প্যারেন্ট এলিমেন্টের (container) সমস্ত জায়গা জুরে অবস্থান করে, যার ফলে একটি "ব্লক" তৈরি হয়।
+
CORS সক্রিয় ছবি
+
The crossorigin attribute, in combination with an appropriate CORS header, allows images defined by the {{HTMLElement("img")}} element to be loaded from foreign origins and used in a {{HTMLElement("canvas")}} element as if they were being loaded from the current origin.
+
CORS বৈশিষ্ট্যাবলী সেটিংস
+
Some HTML elements that provide support for CORS, such as {{HTMLElement("img")}} or {{HTMLElement("video")}}, have a crossorigin attribute (crossOrigin property), which lets you configure the CORS requests for the element's fetched data.
+
HTML এ ফোকাস ব্যবস্থাপনা
+
The activeElement DOM attribute and the hasFocus() DOM method help you track and control a user's interactions with elements on a webpage.
+
সার্বজনীন attributes
+
Global attributes may be specified on all HTML elements, even those not specified in the standard. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.
+
HTML attribute নির্দেশিকা
+
Elements in HTML have attributes. These are additional values that configure the elements or adjust their behavior in various ways.
+
লিংকের ধরন
+
In HTML, various link types can be used to establish and define the relationship between two documents. Link types include <a>, <area>, and <link>.
+
এইচটিএমএল অডিও এবং ভিডিও উপাদান দ্বারা সমর্থিত Media বিন্যাস
+
The <audio> and <video> elements allow you to play audio and video media. These elements provide a browser-native alternative to similar capabilities found in Adobe Flash and other plug-ins.
+
Using the application cache
+
Application caching lets web-based applications run offline. You can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.
+
diff --git a/files/bn/web/http/index.html b/files/bn/web/http/index.html new file mode 100644 index 0000000000..6e893c3ced --- /dev/null +++ b/files/bn/web/http/index.html @@ -0,0 +1,90 @@ +--- +title: HTTP +slug: Web/HTTP +tags: + - HTTP + - Hypertext + - NeedsTranslation + - Reference + - TCP/IP + - TopicStub + - Web + - Web Development + - 'l10n:priority' +translation_of: Web/HTTP +--- +
{{HTTPSidebar}}
+ +

Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a stateless protocol, meaning that the server does not keep any data (state) between two requests. Though often based on a TCP/IP layer, it can be used on any reliable transport layer, that is, a protocol that doesn't lose messages silently like UDP does. RUDP — the reliable update of UDP — is a suitable alternative.

+ +
+
+

Tutorials

+ +

Learn how to use HTTP with guides and tutorials.

+ +
+
Overview of HTTP
+
The basic features of the client-server protocol: what it can do and its intended uses.
+
HTTP Cache
+
Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.
+
HTTP Cookies
+
How cookies work is defined by RFC 6265. When serving an HTTP request, a server can send a Set-Cookie HTTP header with the response. The client then returns the cookie's value with every request to the same server in the form of a Cookie request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.
+
Cross-Origin Resource Sharing (CORS)
+
Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. For instance, an HTML page from Domain A (http://domaina.example/) makes a request for an image on Domain B (http://domainb.foo/image.jpg) via the img element. Web pages today very commonly load cross-site resources, including CSS stylesheets, images, scripts, and other resources. CORS allows web developers to control how their site reacts to cross-site requests.
+
+ +
+
Evolution of HTTP
+
A brief description of the changes between the early versions of HTTP, to the modern HTTP/2, the emergent HTTP/3 and beyond.
+
Mozilla web security guidelines
+
A collection of tips to help operational teams with creating secure web applications.
+
+ +
+
HTTP Messages
+
Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.
+
A typical HTTP session
+
Shows and explains the flow of a usual HTTP session.
+
Connection management in HTTP/1.x
+
Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.
+
+
+ +
+

Reference

+ +

Browse through detailed HTTP reference documentation.

+ +
+
HTTP Headers
+
HTTP message headers are used to describe a resource, or the behavior of the server or the client. Custom proprietary headers can be added using the X- prefix; others in an IANA registry, whose original content was defined in RFC 4229. IANA also maintains a registry of proposed new HTTP message headers.
+
HTTP Request Methods
+
The different operations that can be done with HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, and also less common requests like {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, or {{HTTPMethod("TRACE")}}.
+
HTTP Status Response Codes
+
HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.
+
+ +
+
CSP directives
+
The {{HTTPHeader("Content-Security-Policy")}} response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.
+
+ +

Tools & resources

+ +

Helpful tools and resources for understanding and debugging HTTP.

+ +
+
Firefox Developer Tools
+
Network monitor
+
Mozilla Observatory
+
+

A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.

+
+
RedBot
+
Tools to check your cache-related headers
+
How Browsers Work
+
A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.
+
+
+
diff --git a/files/bn/web/http/status/index.html b/files/bn/web/http/status/index.html new file mode 100644 index 0000000000..b39296ce25 --- /dev/null +++ b/files/bn/web/http/status/index.html @@ -0,0 +1,202 @@ +--- +title: HTTP response status codes +slug: Web/HTTP/Status +tags: + - HTTP + - Landing + - NeedsTranslation + - Overview + - Reference + - Status code + - TopicStub + - Web +translation_of: Web/HTTP/Status +--- +
{{HTTPSidebar}}
+ +

HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes:

+ +
    +
  1. Informational responses (100–199),
    2. +
  2. Successful responses (200–299),
    3. +
  3. Redirects (300–399),
    4. +
  4. Client errors (400–499),
    5. +
  5. and Server errors (500–599).
    6. +
+ +

The below status codes are defined by section 10 of RFC 2616. You can find an updated specification in RFC 7231.

+ +
+

If you receive a response that is not in this list, it is a non-standard response, possibly custom to the server's software.

+
+ +

Information responses

+ +
+
{{HTTPStatus(100, "100 Continue")}}
+
This interim response indicates that everything so far is OK and that the client should continue the request, or ignore the response if the request is already finished.
+
{{HTTPStatus(101, "101 Switching Protocol")}}
+
This code is sent in response to an {{HTTPHeader("Upgrade")}} request header from the client, and indicates the protocol the server is switching to.
+
{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})
+
This code indicates that the server has received and is processing the request, but no response is available yet.
+
{{HTTPStatus(103, "103 Early Hints")}}
+
This status code is primarily intended to be used with the {{HTTPHeader("Link")}} header, letting the user agent start preloading resources while the server prepares a response.
+
+ +

Successful responses

+ +
+
{{HTTPStatus(200, "200 OK")}}
+
The request has succeeded. The meaning of the success depends on the HTTP method: +
    +
  • GET: The resource has been fetched and is transmitted in the message body.
    • +
  • HEAD: The entity headers are in the message body.
    • +
  • PUT or POST: The resource describing the result of the action is transmitted in the message body.
    • +
  • TRACE: The message body contains the request message as received by the server
    • +
+
+
{{HTTPStatus(201, "201 Created")}}
+
The request has succeeded and a new resource has been created as a result. This is typically the response sent after POST requests, or some PUT requests.
+
{{HTTPStatus(202, "202 Accepted")}}
+
The request has been received but not yet acted upon. It is noncommittal, since there is no way in HTTP to later send an asynchronous response indicating the outcome of the request. It is intended for cases where another process or server handles the request, or for batch processing.
+
{{HTTPStatus(203, "203 Non-Authoritative Information")}}
+
This response code means the returned meta-information is not exactly the same as is available from the origin server, but is collected from a local or a third-party copy. This is mostly used for mirrors or backups of another resource. Except for that specific case, the "200 OK" response is preferred to this status.
+
{{HTTPStatus(204, "204 No Content")}}
+
There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.
+
{{HTTPStatus(205, "205 Reset Content")}}
+
Tells the user-agent to reset the document which sent this request.
+
{{HTTPStatus(206, "206 Partial Content")}}
+
This response code is used when the {{HTTPHeader("Range")}} header is sent from the client to request only part of a resource.
+
{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})
+
Conveys information about multiple resources, for situations where multiple status codes might be appropriate.
+
{{HTTPStatus(208, "208 Already Reported")}} ({{Glossary("WebDAV")}})
+
Used inside a <dav:propstat> response element to avoid repeatedly enumerating the internal members of multiple bindings to the same collection.
+
{{HTTPStatus(226, "226 IM Used")}} (HTTP Delta encoding)
+
The server has fulfilled a GET request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.
+
+ +

Redirection messages

+ +
+
{{HTTPStatus(300, "300 Multiple Choice")}}
+
The request has more than one possible response. The user-agent or user should choose one of them. (There is no standardized way of choosing one of the responses, but HTML links to the possibilities are recommended so the user can pick.)
+
{{HTTPStatus(301, "301 Moved Permanently")}}
+
The URL of the requested resource has been changed permanently. The new URL is given in the response.
+
{{HTTPStatus(302, "302 Found")}}
+
This response code means that the URI of requested resource has been changed temporarily. Further changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.
+
{{HTTPStatus(303, "303 See Other")}}
+
The server sent this response to direct the client to get the requested resource at another URI with a GET request.
+
{{HTTPStatus(304, "304 Not Modified")}}
+
This is used for caching purposes. It tells the client that the response has not been modified, so the client can continue to use the same cached version of the response.
+
305 Use Proxy {{deprecated_inline}}
+
Defined in a previous version of the HTTP specification to indicate that a requested response must be accessed by a proxy. It has been deprecated due to security concerns regarding in-band configuration of a proxy.
+
306 unused
+
This response code is no longer used; it is just reserved. It was used in a previous version of the HTTP/1.1 specification.
+
{{HTTPStatus(307, "307 Temporary Redirect")}}
+
The server sends this response to direct the client to get the requested resource at another URI with same method that was used in the prior request. This has the same semantics as the 302 Found HTTP response code, with the exception that the user agent must not change the HTTP method used: If a POST was used in the first request, a POST must be used in the second request.
+
{{HTTPStatus(308, "308 Permanent Redirect")}}
+
This means that the resource is now permanently located at another URI, specified by the Location: HTTP Response header. This has the same semantics as the 301 Moved Permanently HTTP response code, with the exception that the user agent must not change the HTTP method used: If a POST was used in the first request, a POST must be used in the second request.
+
+ +

Client error responses

+ +
+
{{HTTPStatus(400, "400 Bad Request")}}
+
The server could not understand the request due to invalid syntax.
+
{{HTTPStatus(401, "401 Unauthorized")}}
+
Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.
+
{{HTTPStatus(402, "402 Payment Required")}} {{experimental_inline}}
+
This response code is reserved for future use. The initial aim for creating this code was using it for digital payment systems, however this status code is used very rarely and no standard convention exists.
+
{{HTTPStatus(403, "403 Forbidden")}}
+
The client does not have access rights to the content; that is, it is unauthorized, so the server is refusing to give the requested resource. Unlike 401, the client's identity is known to the server.
+
{{HTTPStatus(404, "404 Not Found")}}
+
The server can not find the requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client. This response code is probably the most famous one due to its frequent occurrence on the web.
+
{{HTTPStatus(405, "405 Method Not Allowed")}}
+
The request method is known by the server but has been disabled and cannot be used. For example, an API may forbid DELETE-ing a resource. The two mandatory methods, GET and HEAD, must never be disabled and should not return this error code.
+
{{HTTPStatus(406, "406 Not Acceptable")}}
+
This response is sent when the web server, after performing server-driven content negotiation, doesn't find any content that conforms to the criteria given by the user agent.
+
{{HTTPStatus(407, "407 Proxy Authentication Required")}}
+
This is similar to 401 but authentication is needed to be done by a proxy.
+
{{HTTPStatus(408, "408 Request Timeout")}}
+
This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.
+
{{HTTPStatus(409, "409 Conflict")}}
+
This response is sent when a request conflicts with the current state of the server.
+
{{HTTPStatus(410, "410 Gone")}}
+
This response is sent when the requested content has been permanently deleted from server, with no forwarding address. Clients are expected to remove their caches and links to the resource. The HTTP specification intends this status code to be used for "limited-time, promotional services". APIs should not feel compelled to indicate resources that have been deleted with this status code.
+
{{HTTPStatus(411, "411 Length Required")}}
+
Server rejected the request because the Content-Length header field is not defined and the server requires it.
+
{{HTTPStatus(412, "412 Precondition Failed")}}
+
The client has indicated preconditions in its headers which the server does not meet.
+
{{HTTPStatus(413, "413 Payload Too Large")}}
+
Request entity is larger than limits defined by server; the server might close the connection or return an Retry-After header field.
+
{{HTTPStatus(414, "414 URI Too Long")}}
+
The URI requested by the client is longer than the server is willing to interpret.
+
{{HTTPStatus(415, "415 Unsupported Media Type")}}
+
The media format of the requested data is not supported by the server, so the server is rejecting the request.
+
{{HTTPStatus(416, "416 Range Not Satisfiable")}}
+
The range specified by the Range header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.
+
{{HTTPStatus(417, "417 Expectation Failed")}}
+
This response code means the expectation indicated by the Expect request header field can't be met by the server.
+
{{HTTPStatus(418, "418 I'm a teapot")}}
+
The server refuses the attempt to brew coffee with a teapot.
+
{{HTTPStatus(421, "421 Misdirected Request")}}
+
The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.
+
{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})
+
The request was well-formed but was unable to be followed due to semantic errors.
+
{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})
+
The resource that is being accessed is locked.
+
{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})
+
The request failed due to failure of a previous request.
+
{{HTTPStatus(425, "425 Too Early")}}
+
Indicates that the server is unwilling to risk processing a request that might be replayed.
+
{{HTTPStatus(426, "426 Upgrade Required")}}
+
The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).
+
{{HTTPStatus(428, "428 Precondition Required")}}
+
The origin server requires the request to be conditional. This response is intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.
+
{{HTTPStatus(429, "429 Too Many Requests")}}
+
The user has sent too many requests in a given amount of time ("rate limiting").
+
{{HTTPStatus(431, "431 Request Header Fields Too Large")}}
+
The server is unwilling to process the request because its header fields are too large. The request may be resubmitted after reducing the size of the request header fields.
+
{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}
+
The user-agent requested a resource that cannot legally be provided, such as a web page censored by a government.
+
+ +

Server error responses

+ +
+
{{HTTPStatus(500, "500 Internal Server Error")}}
+
The server has encountered a situation it doesn't know how to handle.
+
{{HTTPStatus(501, "501 Not Implemented")}}
+
The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are GET and HEAD.
+
{{HTTPStatus(502, "502 Bad Gateway")}}
+
This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.
+
{{HTTPStatus(503, "503 Service Unavailable")}}
+
The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the Retry-After: HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.
+
{{HTTPStatus(504, "504 Gateway Timeout")}}
+
This error response is given when the server is acting as a gateway and cannot get a response in time.
+
{{HTTPStatus(505, "505 HTTP Version Not Supported")}}
+
The HTTP version used in the request is not supported by the server.
+
{{HTTPStatus(506, "506 Variant Also Negotiates")}}
+
The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.
+
{{HTTPStatus(507, "507 Insufficient Storage")}} ({{Glossary("WebDAV")}})
+
The method could not be performed on the resource because the server is unable to store the representation needed to successfully complete the request.
+
{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})
+
The server detected an infinite loop while processing the request.
+
{{HTTPStatus(510, "510 Not Extended")}}
+
Further extensions to the request are required for the server to fulfil it.
+
{{HTTPStatus(511, "511 Network Authentication Required")}}
+
The 511 status code indicates that the client needs to authenticate to gain network access.
+
+ +

Browser compatibility

+ + + +

{{Compat("http.status")}}

+ +

See also

+ + diff --git a/files/bn/web/index.html b/files/bn/web/index.html new file mode 100644 index 0000000000..bccddbc99a --- /dev/null +++ b/files/bn/web/index.html @@ -0,0 +1,82 @@ +--- +title: ডেভেলপারদের জন্য ওয়েব প্রযুক্তি +slug: Web +tags: + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web +--- +

উন্মুক্ত বা ওপেন ওয়েব ডেভেলপারদের অসাধারণ সকল সুযোগ-সুবিধা প্রদান করছে। এইসকল প্রযুক্তির সম্পূর্ণ সুবিধা আদায় করে নিতে হলে আপনাকে অবশ্যই এদের সম্পর্কে জানতে হবে। নিচে বিভিন্ন ওয়েব প্রযুক্তি সম্পর্কে আমাদের লেখা আর্টিকেলগুলোর লিংক পাওয়া যাবে । 

+ +
+
+

ওয়েব প্রযুক্তি

+ +

প্রারম্ভিক

+ +
+
HTML
+
হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ হল ওয়েব পেজের মূল ভাষা, যার মাধ্যমে ওয়েব কন্টেন্টের বর্ণনা এবং নির্ধারণ করা হয়।
+
CSS
+
ক্যাসকেডিং স্টাইল শিট ওয়েব কন্টেন্টের ডিজাইন তৈরীতে ব্যবহার করা হয় । 
+
+ +

স্ক্রিপ্টিং

+ +
+
JavaScript
+
JavaScript হল একটা প্রোগ্রামিং ল্যাঙ্গুয়েজ যেটা ব্রাউজার এর মধ্যে চলে ,যেটা অত্যাধুনিক ইউজার ইন্টারঅ্যাক্টিভ ওয়েবসাইট ও অ্যাপ্লিকেশান তৈরি তে ব্যাবহৃত হয়।
+
Web APIs
+
Reference material for each of the individual APIs that comprise the Web's powerful scriptability, including the DOM and all of the related APIs and interfaces you can use to build Web content and apps. +
    +
  • Web API interface reference - সব ইন্টারফেস, alphabetically আয়োজন করা।
    • +
  • WebAPI page যন্ত্র প্রবেশগম্যতা apis আর অন্য apis উপকারি এ্যাপ্লিকেশন-এর জন্য সাজায়
    • +
+
+
+ +

গ্রাফিক্স

+ +
+
SVG
+
আকার পরিবর্তনযোগ্য ভেক্টর গ্রাফিক্স, আপনি তাদের তারা টানা করছি, যা এ নির্বিশেষে আকার সহজে আকার পরিবর্তন করার অনুমতি দেয় ,যাতে ভেক্টর এবং আকার সেট হিসাবে ইমেজ বর্ণনা দেওয়া.
+
WebGL
+
WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML {{HTMLElement("canvas")}} elements
+
+ +

অন্যান্য

+ +
+
MathML
+
গাণিতিক markup ভাষা এটা সম্ভব জটিল গাণিতিক সমীকরণ আর বাক্যপ্রকরণ প্রদর্শন করতে বানায়।
+
+
+ +
+

ধরণ অনুযায়ী ডকুমেন্টেশন

+ +
+
 ওয়েব উন্নতিকারক নির্দেশিকা
+
ওয়েব ডেভেলাপার গাইড উপকারি how-to অভ্যন্তরস্থ বস্তু আপনি ওয়েব প্রযুক্তি আসলে ব্যবহার করেন করতে যা আপনি চান বা করতে দরকার হতে সাহায্য করতে দেয়।
+
ওয়েব উন্নতিকারকদের জন্য TUTORIALS
+
tutorials-এর আপনাকে নিতে একটি লিষ্ট apis, প্রযুক্তি, বা চওড়া বিষয় এলাকা শেখা মধ্য দিয়ে ধাপে ধাপে।
+
References
+
এই পাতা mdn-এর ওপরে সব বরাত তথ্যে সংযোগ প্রস্তাব করবে, কিন্তু এখনকার জন্য প্রযুক্তি-এর ব্যবহার একটা বাঁদিকের সেকশানে সংযোগ করবে
+
+ +

অন্যান্য টপিক

+ +
+
Developing Web applications
+
ওয়েব এ্যাপ্লিকেশন ডেভেলাপার-এর জন্য documentation; ওয়েব অ্যাপ্লিকেশন হচ্ছে সত্য write-once, deploy যেকোথাও এ্যাপস মোবাইল, ডেস্কটপ, আর ফায়ারফক্স os জন্য।
+
Accessibility
+
ওয়েব ‌উন্নয়নে accessibility সক্ষম করা যেহেতু অনেক মানুষ as সম্ভব ওয়েব সাইট ব্যবহার করতে, এমনকি যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয় বুঝায়। এখানে আমরা সন্তুষ্ট হতে সহজগম্য তৈরী করতে তথ্য দেই।
+
+
+
+ +

সব দেখুন...

+ +

 

diff --git a/files/bn/web/javascript/a_re-introduction_to_javascript/index.html b/files/bn/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..b8d2499b2a --- /dev/null +++ b/files/bn/web/javascript/a_re-introduction_to_javascript/index.html @@ -0,0 +1,968 @@ +--- +title: নতুন করে শিখি জাভাস্ক্রিপ্ট (জাভাস্ক্রিপ্ট টিউটোরিয়াল) +slug: Web/JavaScript/A_re-introduction_to_JavaScript +tags: + - জাভা স্ক্রিপ্ট + - জাভাস্ক্রিপ্ট + - জাভাস্ক্রিপ্ট টিউটোরিয়াল +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +
{{jsSidebar}}
+ +

ভূমিকা

+ +

জাভাস্ক্রিপ্ট নিয়ে কেন নতুন করে ভূমিকা দেওয়ার দরকার পরল? কারণ দুনিয়ায় সবচেয়ে ভুল বোঝা প্রোগ্রামিং ভাষা হিসেবে জাভাস্ক্রিপ্টের ব্যাপক খ্যাতি (!) আছে। আমাদের অনেকেই সি/জাভা/পিএইচপি বা অন্য কোন ভাষায় কোডে মোটামোটি ভালভাবে শিখে ফেলার পরে জাভাস্ক্রিপ্ট শিখতে গিয়ে দেখি বাহ, এটা তো সি/জাভা'র মতই! তারপর ভালমত না শিখেই কাজ করতে যাই জাভাস্ক্রিপ্টে... প্রত্যাশা মত ফলাফল আসে না আর এরপর গলা খুলে জাভাস্ক্রিপ্টের গালমন্দ করি। অথচ জাভাস্ক্রিপ্ট অনেক শক্তিশালী - যেটা অনেক সময় ভাষাটির সহজ-সরল চেহারা দেখে বুঝে ওঠা হয় না। ২০০৫ এ আমরা দেখেছি অনেক নামী-দামী জাভাস্ক্রিপ্ট এপ্লিকেশন বাজারে এসেছে - কাজেই জাভাস্ক্রিপ্টে গভীর জ্ঞান রাখা যে যেকোন ডেভেলপারের জন্য আবশ্যকীয় সেটা না বললেও চলবে!

+ +

ভাষাটির ইতিহাস দিয়ে শুরু করা যাক। ১৯৯৫ সালে নেটস্কেপের প্রকৌশলী Brendan Eich জাভাস্ক্রিপ্ট তৈরি করেন, যেটা মুক্তি পায় ১৯৯৬ সালের শুরুর দিকে নেটস্কেপ ২ (ব্রাউজার) এর সাথে। এর নাম দেয়া হয়েছিল LiveScript, কিন্তু মার্কেটিং কৌশলের গ্যাড়াকলে পড়ে দুর্ভাগ্যজনত এর নাম জাভাস্ক্রিপ্ট হয়ে যায়, সান মাইক্রোসিস্টেম এর জাভা ল্যাংগুয়েজের জনপ্রিয়তাকে পুঁজি করার জন্য। জাভা আর জাভাস্ক্রিপ্টের মাঝে তেমন কোন মিল না থাকা সত্ত্বেও সেই থেকে তাই জাভাস্ক্রিপ্ট নামটা নিয়ে বিভ্রান্তি থেকে গেছে।

+ +

মাইক্রোসফট এই প্রোগ্রামিং ভাষার সাথে প্রায় মিলে যায় এরকম একটি ল্যাংগুয়েজ JScript নাম দিয়ে প্রায় ৩ মাস পর ইন্টারনেট এক্সপ্লোরারের সাথে বাজারে নিয়ে আসে। এদিকে নেটস্কেপ Ecma International (স্ট্যান্ডার্ড নির্ধারণ করে এরকম একটি ইউরোপীয়ান সংস্থা) এর কাছে ল্যাংগুয়েজটি উপস্থাপন করে - যার ফলাফল ১৯৯৭ সালে ECMAScript এর প্রথম সংস্করণ হিসেবে বাজারে আসে। ১৯৯৯ সালে এই স্ট্যান্ডার্ডটি আরো উন্নত হয় ECMAScript সংস্করণ ৩ হিসেবে - আর সেই থেকে ভাষাটির তেমন কোন বড় পরিবর্তন হয়নি। চতুর্থ সংস্করণটি ভেস্তে যায়, ভাষাটির জটিলতা নিয়ে মতবিরোধের ফলাফল হিসেবে। তবে এই চতুর্থ সংস্করণের অনেক অংশবিশেষ কে ভিত্তি হিসেবে ধরে ২০০৯ সালে নতুন ECMAScript এর পঞ্চম সংস্করণ প্রকাশ করা হয় এবং এর ৬ষ্ঠ মূখ্য সংস্করণ বের হয় ২০১৫ সালের জুনে। 

+ +

Specification মোটামোটি অপরিবর্তিত থাকাটা আসলে ডেভেলপারদের জন্য খুশির খবর, কারণ অনেকেই এর মাঝে ভাষাটির সাথে খাপ খাইয়ে নিতে পেরেছেন। আমি বিশেষভাবে, ৩য় সংস্করণের বিশেষ বিশেষ অংশ নিয়ে আলোচনা করব এখন, আর সবার পরিচিত নাম জাভাস্ক্রিপ্ট ব্যাবহার করব।

+ +

অন্য সব প্রোগ্রামিং ভাষার সাথে জাভাস্ক্রিপ্টের বড় অমিল হল - এতে কোন ইনপুট/আউটপুটের বালাই নেই। একটা হোস্ট এনভায়রনমেন্টে চলবে ধরে নিয়েই জাভাস্ক্রিপ্ট ডিজাইন করা হয়েছে - সবচেয়ে পরিচিত হোস্ট এনভায়রনমেন্ট হচ্ছে ব্রাউজার। হোস্ট এনভায়রনমেন্টের দায়িত্ব হচ্ছে জাভাস্ক্রিপ্ট কীভাবে বাইরের জগতের সাথে ডেটা আদান প্রদান বা যোগাযোগ করবে সেটার আয়োজন করা। ব্রাউজার ছাড়াও Adobe Acrobat, Photoshop, Yahoo!'র Widget engine এমনকি সার্ভারে-চলে এরকম পরিবেশেও জাভাস্ক্রিপ্ট ইন্টারপ্রেটারের ব্যবহার দেখা যায়।

+ +

হালকা পাতলা ধারণা

+ +

জাভাস্ক্রিপ্ট একটি ওবজেক্ট-ওরিয়েন্টেড, ডায়নামিক প্রোগ্রামিং ভাষা। এতে আছে ডেটা টাইপ, অপারেটর, গুরুত্বপূর্ণ কিছু অবজেক্ট (যেগুলো সব সময় আপনি ব্যবহার করতে পারবেন) আর ফাংশন বা মেথড। জাভা আর সি প্রোগ্রামিং ভাষা থেকে বেশ কিছু সিন্ট্যাক্স ধার করে নেওয়ায় যারা এসব ভাষায় পারদর্শী তাদের জন্য সুখবর আরকি! তবে অন্য অনেক ভাষার সাথে জাভাস্ক্রিপ্ট এর একটা বড় পার্থক্য হল এতে কোন ক্লাস (class) নেই, বরং "প্রটোটাইপ" নামের নতুন এক ধারণা কে কাজে লাগিয়ে ক্লাস এর কাজ কর্ম করা হয়ে থাকে। আরো একটা বড় পার্থক্য হল জাভাস্ক্রিপ্ট এ যেকোন "ফাংশন" আসলে একেককটি অবজেক্ট! ফাংশনে আপনি কোড রাখতে পারবেন, আরো পারবেন অবজেক্টের মত কোডের এক জায়গা থেকে আরেক জায়গায় পাস (pass) করাতে।

+ +

চলুন শুরু করি যেকোন ভাষার মৌলিক উপাদান নিয়ে: type মানে কী কী রকমের ডেটা থাকতে পারে। জাভাস্ক্রিপ্টে যেসব টাইপ আছে সেগুলো হলঃ

+ + + +

... আরও আছে বিশেষ দু'টি টাইপ - "Undefined" আর "Null". আর আছে Arrays, যেটি আসলে অবজেক্টের-ই একটি বিশেষ ধরণ। আছে তারিখ নিয়ে কাজকারবারের জন্যে Dates, আছে Regular Expressions - এগুলোও অবজেক্ট। আর আগেই তো বলা হয়েছে জাভাস্ক্রিপ্টে ফাংশন-ও আসলে অবজেক্ট। টাইপ হচ্ছে তাই:

+ +
    +
  • সংখ্যা (Number)
    • +
  • স্ট্রিং (String)
    • +
  • বুলিয়ান
    • +
  • অবজেক্ট +
      +
    • ফাংশন
      • +
    • Array
      • +
    • Date
      • +
    • RegExp
      • +
    +
    • +
  • Null (নাল)
    • +
  • Undefined (অসংজ্ঞায়িত)
    • +
+ +

ওহ আর বলতে প্রায় ভুলেই গিয়েছিলাম, ত্রুটি ধরার জন্যে কিছু Error টাইপও আছে।

+ +

সংখ্যা বা Numbers

+ +

সংখ্যা টাইপ জাভাস্ক্রিপ্ট এ "double-precision 64-bit format IEEE 754 values", নির্দেশনা অনুসরণ করে। ফলস্বরূপ কিছু বিশেষ ঘটনা ঘটতে পারে। জাভাস্ক্রিপ্টে কোন "Integer" ধরণের টাইপ নাই, তাই অংক কষার সময় মাঝে মাঝে একটু সচেতন থাকবেন C অথবা জাভা ডেভেলপাররা। যেমন ধরুনঃ

+ +
0.1 + 0.2 == 0.30000000000000004
+
+ +

বাস্তবে integer গুলোকে ৩২-বিট ইন্টেজার ধরে নিয়ে কাজ করে জাভাস্ক্রিপ্ট (আর সংরকষণ ও একই ভাবে কিছু ব্রাউজারে করা হয়ে থাকে)। Bit-wise অপারেশন করার সময় এটা মাথায় রাখতে হবে। বিস্তারিত দেখতে পারেন জাভাস্ক্রিপ্টের পূর্ণাঙ্গ Number রেফারেন্স এ।

+ +

অংক কষার জন্য স্ট্যান্ডার্ড সব অপারেটর জাভাস্ক্রিপ্টে আছে, যোগ বিয়োগ, ভাগশেষ (modulus) ইত্যাদি নিয়ে কাজ করা যায়। বলতে ভুলে গেছি Math নামে একটি গ্লোবাল অবজেক্ট আছে গণিত নিয়ে বিশদভাবে কাজকারবার করার জন্যেঃ

+ +
Math.sin(3.5);
+var d = Math.PI * r * r;
+
+ +

বিল্ট-ইন parseInt() ফাংশন ব্যবহার করে কোন string কে integer এ রূপান্তর করতে পারবেন। আর ফাংশনের দ্বিতীয় প্যারামিটার হিসেবে রূপান্তরের ভিত্তি (base) দিতে পারবেন, যদিও এই দ্বিতীয় প্যারামিটার টা ঐচ্ছিক এটা অবশ্যই দেওয়া উচিতঃ

+ +
> parseInt("123", 10)
+123
+> parseInt("010", 10)
+10
+
+ +

২য় প্যারামিটারে base না পাঠালে অপ্রত্যাশিত ফলাফল আসতে পারেঃ

+ +
> parseInt("010")
+8
+
+ +

এমন ফল এসেছে কারণ শুরুতে 0 দেখে parseInt ফাংশনটা ধরে নিয়েছে ১ম প্যারামিটারে পাঠানো সংখ্যাটা অকটাল ভিত্তিতে আছে।

+ +

বাইনারী সংখ্যাকে দশমিক ভিত্তিতে নিয়ে আসা একদম সোজাঃ

+ +
> parseInt("11", 2)
+3
+
+ +

একইভাবে parseFloat() নামেও বিল্ট-ইন ফাংশন আছে যেটা দিয়ে ভগ্নাংশ (floating point number) এ রূপান্তর (parse) করা যায়। তবে parseInt() এর সাথে এর একট অমিল - এটা সবসময় দশমিক ভিত্তিতে আছে ধরে নিয়ে কাজকর্ম করে।

+ +

"+" অপারেটর ব্যবহার করেও কোন মান কে সংখ্যায় রূপান্তর করা যায়। এখানে "+" ইউনারী অপারেটর হিসেবে কাজ করেঃ

+ +
> + "42"
+42
+
+ +

তবে আপনি যদি সংখ্যা নয়, এমন কোন String কে পার্স করতে যান তাহলে বিশেষ এক ধরণের মান ফাংশনের return ভ্যালু হিসেবে পাওয়া যায় -  NaN ("Not a Number" এর সংক্ষিপ্ত রূপ):

+ +
> parseInt("hello", 10)
+NaN
+
+ +

গাণিতিক কোন অপারেটর এর কোন এক NaN পাশে থাকলেই ফলাফাল হিসেবে NaN পাওয়া যাবেঃ

+ +
> NaN + 5
+NaN
+
+ +

বিল্ট-ইন isNaN() ফাংশন ব্যবহার করে বের করতে পারবেন কোন কিছু NaN কিনাঃ

+ +
> isNaN(NaN)
+true
+
+ +

জাভাস্ক্রিপ্টে অসীম মান নিয়ে কাজ করার জন্য আছে বিশেষ মান Infinity এবং -Infinity:

+ +
> 1 / 0
+Infinity
+> -1 / 0
+-Infinity
+
+ +

কোন মান Infinity, -Infinity অথবা NaN কিনা টেস্ট করতে পারবনে বিল্ট-ইন isFinite() ফাংশন দিয়েঃ

+ +
> isFinite(1/0)
+false
+> isFinite(-Infinity)
+false
+> isFinite(NaN)
+false
+
+ +
খেয়াল করুনঃ parseInt() আর parseFloat() ফাংশন দুইটি আপনার দেয়া প্যারামিটারকে ততক্ষণ পার্স করতে থাকবে যতক্ষণ না এটি প্যারামিটারে এমন কোন অক্ষর (character) পাচ্ছে যেটা কিনা অবৈধ (মানে যে ভিত্তিতে বা base থেকে রূপান্তর করা হচ্ছে সেই ভিত্তিতে এই অক্ষরটি থাকতে পারে না)। ফাংশনদুটি এই প্রথম অবৈধ অক্ষর এর আগ পর্যন্ত পার্স করে রিটার্ন করবে। তবে, "+" অপারেটর টি অন্যরকম, প্যারামিটারে কোন অবৈধ ক্যারেকটার থাকলে এটা সোজাসাপটা NaN রিটার্ন করে। ব্যাপারটা ভাল মত বুঝার জন্যে "10.2abc" এটাকে দুইটা ফাংশন দিয়ে পার্স করার কোড লিখে দেখুন!
+ +

স্ট্রিং

+ +

জাভাস্ক্রিপ্টে স্ট্রিং হল অন্য সব ভাষার মত পরপর অনেকগুলো ক্যারেকটার (character) - আরো ভালো মত বলতে গেলে ইউনিকোড ক্যারেক্টার। প্রতিটা ক্যারেকটারকে ১৬-বিট নাম্বার দিয়ে প্রকাশ করা যায়। তাই যাদের এপ্লিকেশনে বিভিন্ন ভাষাভাষী দেশের জন্যে সাপোর্ট দেয়া লাগবে তারা তালিয়া বাজাতে পারেন!

+ +

আপনার যদি কখনো একটা মাত্র ক্যারেকটার ব্যবহার করার প্রয়োজন পরে, তাহলে ১ লেংথ (length) এর স্ট্রিং ব্যবহার করুন যেহেতু ক্যারেকটার বলে কোন টাইপ জাভাস্ক্রিপ্টে নাই।

+ +

আগেই বলেছি জাভাস্ক্রিপ্টে সব স্ট্রিং ই একেক্টা অব্জেক্ট। কয়টা ক্যারেকটার আছে স্ট্রিং এ জানতে হলে length প্রোপার্টি (অবজেক্ট এর ফাংশন) ব্যবহার করুন।

+ +
> "hello".length
+5
+
+ +

এই প্রথম আমরা কোন অব্জেক্ট ব্যবহারের কোড দেখলাম! স্ট্রিং অবজেক্ট এর আরো অনেক ফাংশন ও কিন্তু আছেঃ

+ +
> "hello".charAt(0)
+h
+> "hello, world".replace("hello", "goodbye")
+goodbye, world
+> "hello".toUpperCase()
+HELLO
+
+ +

অন্যান্য টাইপ

+ +

জাভাস্ক্রিপ্টের একটা অনন্য বৈশিষ্ট্য হল এটা null আর undefined এ দুটি জিনিস এক না। Null হচ্ছে 'অবজেক্ট' টাইপের এক ধরণের অবজেক্ট যেটা কোডার স্বেচ্ছায় কোন ভ্যারিয়েবলে এসাইন (asign) করেছেন। আর undefined হল 'undefined' টাইপের একটা অবজেক্ট - কোন ভ্যারিয়েবল যদি কোন ভ্যালু দিয়ে ইনিশিয়ালাইজ (initialize) করা না হয় (সোজা বাংলায় ভ্যারিয়েবল ডিক্লেয়ার করার সময় বা পরে যদি তাতে "=" চিহ্ন দিয়ে কোন মান এ্যাসাইন না করা হয়) তাহলে সেটা undefined অবস্থায় থাকে। ভ্যারিয়েবল নিয়ে আমরা পরে আলোচনা করব। জাভাস্ক্রিপ্টে ভ্যারিয়েবলে কোন ভ্যালু না দিয়েই ভ্যারিয়েবলটি তৈরি করা যায় - তখন তার ভ্যালু হিসেবে থাকে এই 'undefined'।

+ +

জাভাস্ক্রিপ্টে বুলিয়ান বলে একটা টাইপ আছে, যার মান হতে পারে শুধুমাত্র true অথবা false (এই দুইটাই কি-ওয়ার্ড)। নিচের নিয়ম অনুযায়ী যেকোন ভ্যালু কে বুলিয়ানে কনভার্ট করা যায়ঃ

+ +
    +
  1. false, 0, শূন্য স্ট্রিং (""), NaN, null, এবং undefined এগুলাকে বুলিয়ানে কনভার্ট করলে false পাওয়া যাবে।
    2. +
  2. অন্য যেকোন টাইপের ভ্যলু বুলিয়ানে কনভার্ট করলে true পাওয়া যায়।
    3. +
+ +

Boolean() ফাংশন ব্যবহার করে আপনি এই কনভার্সন করেই ছাড়তে পারেনঃ

+ +
> Boolean("")
+false
+> Boolean(234)
+true
+
+ +

কিন্তু আমাদের এভাবে explicitly কনভার্ট করতে হবে না, কারণ জাভাস্ক্রিপ্ট যখন কোথাও বুলিয়ান প্রত্যাশা করে কিন্তু অন্য কোন টাইপ পায়, তখন সে চুপিচুপি এই কনভার্ট টি করে নেয়।

+ +

অন্য ভাষার মত বুলিয়ান অপারেটর যেমন && (লজ্যিকাল AND), , || (লজ্যিকাল or), আর ! (লজ্যিকাল not) আছে।

+ +

ভ্যারিয়েবল (চলক?!)

+ +

var কী-ওয়ার্ড ব্যবহার করে নতুন কোন ভ্যারিয়েবল তৈরি করুনঃ

+ +
var a;
+var name = "simon";
+
+ +

আগেই বলেছি, ভ্যারিয়েবলে কোন ভ্যালু এসাইন না করলে সেটা undefined টাইপ হয়ে বসে থাকে।

+ +

গুরুত্বপূর্ণঃ অন্যান্য প্রোগ্রামিং ভাষার সাথে বড় একটা পার্থক্য হল জাভাস্ক্রিপ্ট কোডে ব্লক লেভেলে ভ্যারিয়েবলের স্কোপ বলে কিছু নেই। ভ্যারিয়েবল টা যেই ফাংশনে আছে, পুরা ফাংশনে এই ভ্যারিয়েবলের একটাই স্কোপ থাকে। তাই যদি কোন if বা লুপের মধ্যে কোন ভ্যারিয়েবল তৈরি করেন তাহলে পুরা ফাংশনেই সেটার স্কোপ থাকবে।

+ +

অপারেটর

+ +

জাভাস্ক্রিপ্টের নিউমেরিক (numeric) অপারেটরগুলো হল +, -, *, / আর % - মানে কিনা ভাগশেষ বের করার অপারেটর।  = ব্যবহার করে ভ্যারিয়েবলে ভ্যালু দেয়া হয়। জটিল এসাইনমেন্ট অপারেটরও আছে যেমন += আর -=। এই জটিল অপারেটরগুলোকে ভেঙ্গে এইভাবে কল্পনা করতে পারেনঃ x = x অপারেটর y.

+ +
x += 5
+x = x + 5
+
+ +

ভ্যারিয়েবলের ভ্যালু এক বাড়াতে বা কমাতে যথাক্রমে ++ আর -- অপারেটর ব্যবহার করতে পারেন। সি/জাভার মত এগুলোর প্রিফিক্স/পোস্টফিক্স দুটো ফর্ম-ই আছে।

+ +

আর আমরা তো আগেই জেনেছি + অপারেটর দিয়ে স্ট্রিং জোড়া লাগানো যায় (concatenation)

+ +
> "hello" + " world"
+hello world
+
+ +

আপনি যদি স্ট্রিং কে অন্য কোন সংখ্যা (বা অন্য কোন মান) এর সাথে যোগ করতে যান তাহলে সবকিছু প্রথমে স্ট্রিং এ কনভার্ট করে নেওয়া হয়ঃ

+ +
> "3" + 4 + 5
+345
+> 3 + 4 + "5"
+75
+
+ +

কোন মানকে স্ট্রিং এ কনভার্ট করার তাই আরেকটা চোরাই বুদ্ধি হচ্ছে ঐ মানের সাথে শূন্য স্ট্রিং ("")যোগ করা।

+ +

তুলনা (Compare) করার জন্যে জাভাস্ক্রিপ্টের কাছে আছে <, >, <= আর >= অপারেটর। এগুলো সংখ্যা আর স্ট্রিং দুইটার বেলাতেই কাজ করে। তবে == অপারেটর ব্যবহার করে দুইটা মান সমান কিনা সেটা চেক করাটা একটু অপ্রত্যাশিত হতে পারে, কারণ == অপারেটরের দুই পাশে দুই ধরণের টাইপের ভ্যালু দিলে জাভাস্ক্রিপ্ট প্রয়োজন মত কনভার্ট করে নেয়ঃ

+ +
> "dog" == "dog"
+true
+> 1 == true
+true
+
+ +

জাভাস্ক্রিপ্টের এই মাতব্বরী বন্ধ করতে চাইলে === অপারেটর ব্যবহার করুনঃ

+ +
> 1 === true
+false
+> true === true
+true
+
+ +

আপনি হয়ত ভাবছেন != আর !== অপারেটেরের কথা - হ্যা এগুলো তো আছেই।

+ +

জাভাস্ক্রিপ্ট দিয়ে বিট-লেভেলে (bitwise) অপারেশন ও করতে পারবেন।

+ +

কন্ট্রোল স্ট্রাকচার

+ +

C বা জাভাতে ব্যবহার করে আসা if অথবা else জাভাস্ক্রিপ্টেও একইভাবে ব্যবহার করা যাবেঃ

+ +
var name = "kittens";
+if (name == "puppies") {
+  name += "!";
+} else if (name == "kittens") {
+  name += "!!";
+} else {
+  name = "!" + name;
+}
+name == "kittens!!"
+
+ +

জাভাস্ক্রিপ্টে while আর do-while লুপ আছে, হুবুহু সি-জাভার মত। যদি চান যে লুপটি অন্ততঃ একবার চালাতেই হবে তাহলে do-while ব্যবহার করুন।

+ +
while (true) {
+  // an infinite loop!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input))
+
+ +

সি-জাভার মত for লুপ ব্যবহার করে এক লাইনেই লুপ কন্ট্রোল করতে পারেনঃ

+ +
for (var i = 0; i < 5; i++) {
+  // Will execute 5 times
+}
+
+ +

শর্ট-কাটে লজিক প্রয়োগ করতে পারেন && আর || অপারেটরের একটি অন্যরকম ব্যবহার করে। অপারেটর গুলোর ২য় অপারেন্ড কার্যকর (execute) হবে কিনা নির্ভর করে ১ম অপারেন্ডের ওপরঃ

+ +
var name = o && o.getName();
+
+ +

অথবা ডিফল্ট মান বসানোর জন্যঃ

+ +
var name = otherName || "default";
+
+ +

কন্ডিশনাল এক্সপ্রেশনের জন্য সি-জাভার মত টার্নারী অপারেটর (যেগুলোর অপারেন্ড ৩টি) ব্যবহার করতে পারেনঃ

+ +
var allowed = (age > 18) ? "yes" : "no";
+
+ +

একাধিক ব্রাঞ্চের কন্ট্রোল লজিকের জন্যে switch ব্যবহার করতে পারেন। জাভাস্ক্রিপ্টের switch-case স্ট্রিং এর জন্যে কাজ করেঃ

+ +
switch(action) {
+    case 'draw':
+        drawit();
+        break;
+    case 'eat':
+        eatit();
+        break;
+    default:
+        donothing();
+}
+
+ +

break না ব্যবহার করলে পরের case এও আপনার কোডের কন্ট্রোল চলে যাবে - এরকম কোডিং সাধারণতঃ করা হয়না। তাই আপনি যদি break ব্যবহার না করেন তাহলে কমেন্টে লিখে রাখুন যাতে কনফিউশন তৈরি না হয়।

+ +
switch(a) {
+    case 1: // fallthrough
+    case 2:
+        eatit();
+        break;
+    default:
+        donothing();
+}
+
+ +

default ক্লজটি ঐচ্ছিক। আরেকটি মজার দিক হল switch আর case দু'জায়গাতেই আপনি এক্সপ্রেশন লিখতে পারেন। তুলনা করা হয় === অপারেটর ব্যবহার করেঃ

+ +
switch(1 + 3) {
+    case 2 + 2:
+        yay();
+        break;
+    default:
+        neverhappens();
+}
+
+ +

অবজেক্ট

+ +

জাভাস্ক্রিপ্টে অবজেক্ট হচ্ছে এক কথায় name-value pair। নিচে যেগুলো পয়েন্ট করা হয়ছে সেগুলোর সাথে কোন পার্থক্য নেইঃ

+ +
    +
  • Python এর dictionary
    • +
  • Perl আর ruby'র hash
    • +
  • C/C++ এর hashtable
    • +
  • জাভা'র HashMap
    • +
  • PHP'র associative array
    • +
+ +

এই ডেটা-স্ট্রাকচারটা এত বেশি ব্যবহৃত হয় যে এটা সম্পর্কে নতুন করে বলার সুযোগ কম। যেহেতু জাভাস্ক্রিপ্টে সবকিছুই অবজেক্ট এটা আশা করা স্বাভাবিক যে জাভাস্ক্রিপ্ট প্রোগ্রামে অনেক বেশি হ্যাশটেবিল লুক-আপ হবে... আমরা বেঁচে গেছি কারণ অনেক দ্রুত এই লুক-আপ করা যায়!

+ +

জাভাস্ক্রিপ্ট অবজেক্টের "name" হিসেবে স্ট্রিং ব্যবহার করতে হবে, আর "value" অংশে যা মন চায় ব্যবহার করতে পারবেন। তার মানে ভ্যালু হিসেবে অন্য অবজেক্ট ও রাখতে পারেন। এভাবে যত জটিল চান সেরকম অবজেক্ট-ই তৈরি করতে পারবেন।

+ +

একটা শূণ্য অবজেক্ট ২ভাবে তৈরি করতে পারেনঃ

+ +
var obj = new Object();
+
+ +

আরঃ

+ +
var obj = {};
+
+ +

ওপরের দুইটা উপায় সমার্থক। নিচের পদ্ধটি-তিকে বলা হয় অবজেক্ট লিটারেল, আর এটি JSON সিন্ট্যাক্সের ও একটি অংশ। তাই নিচের পদ্ধটি-তি যত বেশি ব্যবহার করা যায় ভাল!

+ +

অবজেক্ট তৈরি হয়ে যাওয়ার পর এর প্রোপার্টি (সম্পদ?!) দুইভাবে এক্সেস করতে পারবেনঃ

+ +
obj.name = "Simon";
+var name = obj.name;
+
+ +

এবং...

+ +
obj["name"] = "Simon";
+var name = obj["name"];
+
+ +

দুইটা পদ্ধতি-ই সমার্থক, তবে ২য় পদ্ধটিতে দেখুন, অবজেক্টের name স্ট্রিং হিসেবে দেওয়া হচ্ছে, মানে এই নামটি আমরা ভ্যারিয়েবলে রেখে রানটাইমে দিতে পারি! অবশ্য এই পদ্ধটিতি ব্যবহার করলে কিছু জাভাস্ক্রিপ্ট ইঞ্জিন আর মিনিফায়ার (কোড সংক্ষিপ্ত করে যেসব টুলস) কোড অপ্টিমাইজ করতে পারে না। আবার এই পদ্ধতি ব্যবহার করে সংরক্ষিত name সমূহ গেট-সেট করতে পারেনঃ

+ +
obj.for = "Simon"; // Syntax error, because 'for' is a reserved word
+obj["for"] = "Simon"; // works fine
+
+ +

আগেই দেখানো অবজেক্ট লিটেরাল সিন্ট্যাক্স ব্যবহার করে পুরো অবজেক্ট গোড়াতেই ইনিশিয়ালাইজ করে নিতে পারেনঃ

+ +
var obj = {
+    name: "Carrot",
+    "for": "Max",
+    details: {
+        color: "orange",
+        size: 12
+    }
+}
+
+ +

অবজেক্টের এট্রিবিউট এক্সেস একের-পর-এক (চেইন) করতে পারেনঃ

+ +
> obj.details.color
+orange
+> obj["details"]["size"]
+12
+
+ +

Array

+ +

জাভাস্ক্রিপ্টের Array আসলে বিশেষ ধরণের অবজেক্ট - রেগুলার অবজেক্টের মতই array কাজ করে বেশিরভাগ সময়ে ( numeric প্রোপার্টি, মানে ০,১,২,... ইন্ডেক্সে থাকা প্রোপার্টি শুধুমাত্র [] সিন্ট্যাক্স দিয়েই এক্সেস করা যাবে)। সব array'র 'length" ম্যাজিক প্রোপার্টি আছে, যার মান হচ্ছেঃ (ওই array'র সর্বোচ্চ ইন্ডেক্স + ১)

+ +

প্রাগৈতিহাসিক(!) নিয়মে array ব্যবহার-পদ্ধতিঃ

+ +
> var a = new Array();
+> a[0] = "dog";
+> a[1] = "cat";
+> a[2] = "hen";
+> a.length
+3
+
+ +

তবে স্মার্ট এপ্রোচ হচ্ছে array লিটেরাল ব্যবহার করাঃ

+ +
> var a = ["dog", "cat", "hen"];
+> a.length
+3
+
+ +

সাবধানঃ লিটের‍্যাল ব্যবহার করে সবশেষের প্রোপার্টির পর কমা রেখে দিলে ব্রাউজার-ভেদে বিভিন্ন অবস্থা তৈরি হতে পারে - তাই সর্বশেষ array element এর পর কমা রেখে দেওয়া চলবে না।

+ +

খেয়াল করুনঃ array.length মানেই যে array তে কয়টা প্রোপার্টি আছে তা কিন্তু সবসময় ঠিক না। নিচের কোড দেখুনঃ

+ +
> var a = ["dog", "cat", "hen"];
+> a[100] = "fox";
+> a.length
+101
+
+ +

আবারো বলছিঃ length প্রোপার্টি হচ্ছে: (সবথেকে বড় ইন্ডেক্স + ১)

+ +

আপনি যদি এমন কোন প্রোপার্টি নিয়ে কাজ করতে চান যেটির ইন্ডেক্স ভুল, তাহলে 'undefined' পাবেন মান হিসেবে।

+ +
> typeof a[90]
+undefined
+
+ +

ওপরে যা বলা হল তা মাথায় রেখে নিচের কোড দিয়ে array এর সব এলিমেন্ট নিয়ে কাজ করতে পারবেন (iteration):

+ +
for (var i = 0; i < a.length; i++) {
+    // Do something with a[i]
+}
+
+ +

তবে ওপরের কোডিং টা অত ভাল হল না, কারণ বারবার array.length প্রোপার্টি'র মান খুঁজতে হচ্ছে। নিচের কোড টা বেশি ভাল (কার্যকরী):

+ +
for (var i = 0, len = a.length; i < len; i++) {
+    // Do something with a[i]
+}
+
+ +

আর নিচেরটা হচ্ছে বস-লেভেলের কোডিং ;-)

+ +
for (var i = 0, item; item = a[i++];) {
+    // Do something with item
+}
+
+ +

খেয়াল করুনঃ লুপের দুই সেমিকোলনের মাঝের অংশ ভ্যারিয়েবল এসাইনমেন্ট আর false কিনা টেস্টিং দুই-ই করা হচ্ছে। এই লুপ ব্রেক করবে প্রথম "falsy" এলিমেন্ট (যেমন 'undefined') পাওয়া মাত্রই।

+ +

কাজেই, যদি array'র কোন এলিমেন্ট "falsy" হওয়ার সম্ভাবনা থাকে, তাহলে ওপরের তথাকতিত "বস-লেভেল" কোডিং ব্যবহার করা যাবে না। যেমন, কোন array এলিমেন্ট এর মান false হিসেবে গণ্য হলেই (যেমন শূণ্য স্ট্রিং) পরের ভ্যালিড এলিমেন্ট ও কিন্তু আর এক্সেস করা যাবে না। আপনি যদি নিশিচ থাকেন যে array তে কোন "falsy" এলিমেন্ট নেই (যেমন অবজেক্টের array অথবা DOM নোড ইত্যাদি) তাহলেই ওপরের পদ্ধতি ব্যবহার করুন।

+ +

for...in লুপ ব্যবহার করেও array এলিমেন্টগুলোতে iterate করতে পারবেন। কেউ যদি Array.prototype (পরে আলোচনা করেছি) ব্যবহার করে নতুন নতুন প্রোপার্টি যোগ করেন এরে তে, তাহলে সেগুলোও এই লুপ দিয়ে iterate করা যাবে:

+ +
for (var i in a) {
+  // Do something with a[i]
+}
+
+ +

Array তে নতুন এলিমেন্ট যোগ করার সবচাইতে নিরাপদ পদ্ধতিঃ

+ +
a[a.length] = item;                 // same as a.push(item);
+
+ +

যেহেতু a.length সবসময় এরে এর সর্বোচ্চ ইন্ডেক্স + ১ কাজেই আপনি নিশ্চিত থাকতে পারেন যে আপনি ফাকা স্থানেই নতুন এলিমেন্ট বসাচ্ছেন।

+ +

Array'র সাথে অনেক ফাংশন প্যাকেট করে দেওয়া হয়েছেঃ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method nameDescription
a.toString() 
a.toLocaleString() 
a.concat(item[, itemN])প্রদত্ত আইটেম (এলিমেন্ট) গুলো সহ নতুন একটি Array রিটার্ন করে।
a.join(sep) 
a.pop()শেষ এলিমেন্ট-টিকে এরে থেকে মুছে দিয়ে রিটার্ন করে।
a.push(item[, itemN])এরে'র শেষে এক/একাধিক আইটেম যোগ করে
a.reverse() 
a.shift() 
a.slice(start, end)একটি সাব-এরে রিটার্ন করে
a.sort([cmpfn])তুলনা করার জন্য একটি ফাংশন প্যারামিটারে দিতে পারেন (ঐচ্ছিক)
a.splice(start, delcount[, itemN])এরে'র আইটেমগুলো মুছে দিয়ে/রিপ্লেস করতে পারবেন।
a.unshift([item])এরে'র শুরুতে আইটেম কে যোগ করে।
+ +

ফাংশন

+ +

জাভাস্ক্রিপ্ট ভালোমত শিখতে হলে অবজেক্টের পাশাপাশি ফাংশন সম্পর্কেও ভাল ধারণা থাকা দরকার। নিচে খুবই নিরীহ-দর্শন একটা ফাংশন দেখা যাচ্ছেঃ

+ +
function add(x, y) {
+    var total = x + y;
+    return total;
+}
+
+ +

ফাংশনের বেসিক জানার জন্যে এইটুকুই যথেষ্ট। ফাংশনে এক/একাধিক প্যারামিটার/আর্গুমেন্ট পাঠাতে পারেন। ফাংশনের বডিতে যত খুশি স্টেটমেন্ট লিখুন, নিজের ইচ্ছামত "লোকাল" ভ্যারিয়েবল তৈরি করুন। ফাংশনের যেকোন জায়গায় return স্টেটমেন্ট ব্যবহার করতে পারেন - এই স্টেটমেন্টের পরের কোন স্টেটমেন্ট আর কার্যকর হবে না মানে ফাংশন থেকে তখন-ই প্রোগ্রাম বের হয়ে যাবে। return এর পর যেই ভ্যালু দিবেন ফাংশনটি তার caller কে সেই ভ্যালুটি রিটার্ন করবে। return এর পর কোন ভ্যালু না দিলে (অথবা আদৌ কোন রিটার্ন স্টেটমেন্ট ব্যবহার না করলে) জাভাস্ক্রিপ্ট undefined কে রিটার্ন ভ্যালু হিসেবে পাঠিয়ে থাকে।

+ +

আপনি যদি ফাংশন কল করার সময় কোন প্যারামিটারের ভ্যালু না পাঠান, তাহলে 'undefined' ঐ প্যারামিটারের ভ্যালু হিসেবে চলে যাবে ফাংশনের কাছেঃ

+ +
> add()
+NaN // You can't perform addition on undefined
+
+ +

অন্য প্রোগ্রামিং ভাষার সাথে একটুখানি অমিলঃ আপনি চাইলে ফাংশন যতগুলো প্যারামিটার নিয়ে কাজ করে, তার থেকে বেশি প্যারামিটারও পাঠাতে পারেন!

+ +
> add(2, 3, 4)
+5 // added the first two; 4 was ignored
+
+ +

একটু হাস্যকর মনে হলেও, ফাংশনের নিজস্ব arguments নামের একটা array এর মত ভ্যারিয়েবল আছে - এর এলিমেন্ট হিসেবে ফাংশনে যতগুলো ভ্যালু প্যারামিটার হিসেবে পাঠানো হয়েছে সবগুলোই থাকে। আসুন add ফাংশনটিকে এমনভাবে লিখি যাতে যত খুশি প্যারামিটার পাঠানো হোক না কেন সবগুলোই যোগ করা যায়ঃ

+ +

কিছুটা "আজাইরা" ধাঁচের মনে হলেও জাভাস্ক্রিপ্টে ফাংশগুলোর মধ্যে arguments নামের একটি ভ্যারিয়েবল আছে, যাতে ফাংশনটিতে পাস করা সকল ভ্যালু থাকে! আসুন ফাংশনটিকে এমনভাবে পরিবর্তন করি যেন তা ইচ্ছেমত আর্গুমেন্ট নিতে পারে!

+ +
function add() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum;
+}
+
+> add(2, 3, 4, 5)
+14
+
+ +

এবার গড় বের করার একটি ফাংশন (ফাংশন নাম্বার ১) লিখে ফেলিঃ

+ +
function avg() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+> avg(2, 3, 4, 5)
+3.5
+
+ +

এটা কাজের ফাংশন সন্দেহ নাই, তবে নতুন একটা ঝামেলা তৈরি করলঃ avg() ফাংশন কমা-দিয়ে-আলাদা-করা এক গাদা আর্গুমেন্ট নেয় - কিন্তু আপনি যদি আর্গুমেন্ট হিসেবে শুধু একটি array পাঠাতে চান? তাহলে avg() ফাংশনটা এভাবে (ফাংশন নাম্বার ২) লেখা যেতে পারেঃ

+ +
function avgArray(arr) {
+    var sum = 0;
+    for (var i = 0, j = arr.length; i < j; i++) {
+        sum += arr[i];
+    }
+    return sum / arr.length;
+}
+> avgArray([2, 3, 4, 5])
+3.5
+
+ +

কিন্তু নতুন করে না লিখে আগের ১-নাম্বার ফাংশনটা-ই ব্যবহার করতে পারলে ভাল হত! এক কাজের জন্য কয়টা ফাংশন লিখব, আর কি কাজ কর্ম নাই নাকি? সৌভাগ্যবশতঃ, জাভাস্ক্রিপ্ট দিয়ে যেকোন ফাংশনের apply() মেথড কল করে (যেহেতু ফাংশন-ও এক ধরণের অবজেক্ট, তাই ফাংশনের-ও মেথড/প্রোপার্টি ইত্যাদি থাকতে পারে!) আর্গুমেন্ট হিসেবে যেকোন array পাঠাতে পারেনঃ

+ +
> avg.apply(null, [2, 3, 4, 5])
+3.5
+
+ +

এই apply() মেথডের ২য় প্যারামিটারের ভ্যালুটাই ফাংশনের arguments হিসেবে ব্যবহৃত হবে। প্রথম আর্গুমেন্টের কাজ কি সেটা পরে বলব। আর হ্যা, এখন তো বুঝতে পারলেন যে ফাংশন-ও জাভাস্ক্রিপ্টে আসলে অবজেক্ট! (প্রমাণিত)

+ +

জাভাস্ক্রিপ্টে বেওয়ারিশ (anonymous!) ফাংশন তৈরি করতে পারবেনঃ

+ +
var avg = function() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+
+ +

ওপরের "বেওয়ারিশ" ফাংশন আর function avg() এর মাঝে কোন পার্থক্য নাই, অন্ততঃ সিমান্ট্যাকালি। কিন্তু এই anonymous ফাংশন অনেক পাওয়ারফুল - কারণ এভাবে আপনি কোডের যেকোন জায়গায় ফাংশন তৈরি করে নিতে পারেন  - যেখানে হয়ত আগে সাদামাটা এক্সপ্রেশন দেওয়া লাগত। যেমন, একটা ট্রিক দেখুনঃ আমরা জানি জাভাস্ক্রিপ্টে "ব্লক" লেভেলে ভ্যারিয়েবলের নতুন কোন স্কোপ নাই, কিন্তু ফাংশন লেভেলে ভ্যারিয়েবলের স্কোপ আছে। এখন যদি আমরা কোন ফাংশনের ভেতর C ল্যাংগুয়েজের মত ব্লক লেভেলে কোন ভ্যারিয়েবলের স্কোপ চাই, তাহলে চট করে একটা বেওয়ারিশ ফাংশন লিখে ফেলতে পারিঃ

+ +
var a = 1;
+var b = 2;
+(function() {
+  var b = 3; // b ভ্যারিয়েবলের নতুন স্কোপ তৈরি করলাম!
+  a += b;
+})();
+a; // 4
+b; // 2 - b এর মান আগেরটাই আছে।
+
+ +

জাভাস্ক্রিপ্টে ফাংশন রিকারসিভলি (কোন ফাংশনের ভেতর নিজেকেই আবার কল করা) কল করতে পারবেন। Tree - সদৃশ ডেটা স্ট্রাকচার নিয়ে কাজ করতে এটা উপকারী। যেমন, DOM নিয়ে কাজ করার সময় কাজে লাগে।

+ +
function countChars(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += countChars(child);
+    }
+    return count;
+}
+
+ +

অবশ্য এভাবে কাজ করতে গিয়ে anonymous ফাংশন কল করতে গেলে ঝামেলা হবেঃ এনোনিমাস ফাংশনকে রিকার্সিভ কল কিভাবে করবেন? ওদের তো নাম-ই নাই! এই ঝামেলা দূর করতে এসে গেল "named anonymous ফাংশন":

+ +
var charsInBody = (function counter(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += counter(child);
+    }
+    return count;
+})(document.body);
+
+ +

এভাবে এনোনিমাস ফাংশনকে দেওয়া নাম শুধুমাত্র ঐ ফাংশনের ভেতরেই কাজ করবে। এভাবে যেমন জাভাস্ক্রিপ্ট ইঞ্জিন অপ্টিমাইজ ভাবে কাজ করতে পারে, সেরকম আপনার কোডও সহজবোধ্য হয়।

+ +

মনের মত অবজেক্ট

+ +
খেয়াল করুন: জাভাস্ক্রিপ্ট দিয়ে অবজেক্ট-ওরিয়েন্ট প্রোগ্রামিং করতে চাইলে আরো বিস্তারিত আলোচনা দেখুন এখানেঃ জাভাস্ক্রিপ্টে অবজেক্ট-ওরিয়েন্টেডের হাতেখড়ি
+ +

এই প্যারার টাইটেল নিয়ে একটু মজা করলাম... হেহে। ইংরেজিতে টাইটেল ছিল "Custom Objects" :-P

+ +

ক্ল্যাসিক অবজেক্ট অরিয়েন্টেড প্রোগ্রামিং মানেই class নামের কী-ওয়ার্ড... জাভাস্ক্রিপ্ট একটু অন্যরকম। আমরা সাধারণত অবজেক্ট কে ডেটা আর সেইসব ডেটার ওপর কাজ করার জন্য মেথড এর একটা কালেকশনকেই বুঝি। জাভাস্ক্রিপ্টে কোন class স্টেটমেন্ট নাই, জাভাস্ক্রিপ্ট prototype-ভিত্তিক প্রোগ্রামিং ভাষা, তাই সবার এই ব্যাপারটা একটু শিখে নেওয়ার দরকার আছে। জাভাস্ক্রিপ্টে আসলে ফাংশন-ই ক্লাস হিসেবে কাজ করে। আসুন একটা person অবজেক্ট চিন্তা করি... যাতে firstname আর lastname দু'টি প্রোপার্টি আছে। এখন, কোন ব্যাক্তির নাম প্রিন্ট করার ২টা পদ্ধতি চিন্তা করিঃ একটা হল আগে firstname প্রিন্ট করব, পরে lastname। আর অন্য পদ্ধতিটা উল্টা, আগে lastname প্রিন্ট করবঃ

+ +
function makePerson(first, last) {
+    return {
+        first: first,
+        last: last
+    }
+}
+function personFullName(person) {
+    return person.first + ' ' + person.last;
+}
+function personFullNameReversed(person) {
+    return person.last + ', ' + person.first
+}
+> s = makePerson("Simon", "Willison");
+> personFullName(s)
+Simon Willison
+> personFullNameReversed(s)
+Willison, Simon
+
+ +

কিন্তু... ওপরের আজব কোড দেখে যেকারর-ই মেজাজ খারাপ হওয়ার  কথা। এভাবে কোড করতে থাকলে শেষপর্যন্ত আপনার স্ক্রিপ্টের global স্কোপেই হাজার হাজার ফাংশন পয়দা হয়ে বসে থাকবে। আমরা চাই অবজেক্টের সদস্য মেথডগুলো শুধু ওই অবজেক্টের স্কোপেই থাকুক। যেহেতু ফাংশন == অবজেক্ট, আমরা নিমেষেই সুন্দর কোডিং করে ফেলতে পারিঃ

+ +
function makePerson(first, last) {
+    return {
+        first: first,
+        last: last,
+        fullName: function() {
+            return this.first + ' ' + this.last;
+        },
+        fullNameReversed: function() {
+            return this.last + ', ' + this.first;
+        }
+    }
+}
+> s = makePerson("Simon", "Willison")
+> s.fullName()
+Simon Willison
+> s.fullNameReversed()
+Willison, Simon
+
+ +

ওপরের কোডে দেখুন আমরা প্রথমবারের মত 'this' কীওয়ার্ড ব্যবহার করলাম। কোন ফাংশনের ভেতর যখন this ব্যবহার করা হয় তখন সেটি ঐ ফাংশনটি'র অবজেক্ট কে রেফার (refer)  করে থাকে, যদি কিনা আপনি ডট (.) অথবা ব্রাকেট ব্যবহার করে মেথডটিকে কল করে থাকেন। কিন্তু অন্য কোন ভাবে কল করলে this আসলে global অবজেক্ট কে রেফার করে। এই ব্যাপারটা ঠিকমত না বুঝতে পারলে ভুল করার সম্ভাবনা থাকে। উদাহরণ দেখুনঃ

+ +
> s = makePerson("Simon", "Willison")
+> var fullName = s.fullName;
+> fullName()
+undefined undefined
+
+ +

যখন আমরা fullName() কল করলাম (s.fullname() না) , 'this' আসলে global অবজেক্ট কে রেফার করে। এই গ্লোবাল অবজেক্ট এর যেহেতু first অথবা last নামের কোন প্রোপার্টি নাই, তাই undefined পাওয়া যাচ্ছে।

+ +

নতুনদের জন্য এই বিষয়টা একটু ভ্রান্তিকর মনে হতে পারে... যাই হোক! এই this কী-ওয়ার্ড ব্যবহার করে আমরা makePerson কে আরেকটু ভাল চেহারা দিতে পারিঃ

+ +
function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = function() {
+        return this.first + ' ' + this.last;
+    }
+    this.fullNameReversed = function() {
+        return this.last + ', ' + this.first;
+    }
+}
+var s = new Person("Simon", "Willison");
+
+ +

দেখুন, নতুন কী-ওয়ার্ড 'new' এর ব্যবহার - এই new এর সাথে this এর সম্পর্ক খুবই শক্ত-পোক্ত! কোন ফাংশন কল করার আগে new ব্যবহার করলে যা হয়ঃ একটি নতুন অবজেক্ট তৈরি হয়, এরপর ফাংশনটিকে কল করা হয় যেন this নতুন তৈরি করা অবজেক্ট টিকে রেফার করে থাকে। যেসব ফাংশন কে new কী-ওয়ার্ড দিয়ে কল করা উচিত তাদের নাম সাধারণতঃ বড় হাতের অক্ষরে লেখা হয় প্রথম হরফটি - যাতে ডেভেলপার সহজেই বুঝতে পারে যে ফাংশনটি new কী-ওয়ার্ড দিয়ে কল করতে হবে ।

+ +

দেখতে সুন্দর লাগলেও আসলে এখনো একটা ঝামেলা রয়ে গেছে, যত বার আমরা new ব্যবহার করে makePerson এর অবজেক্ট তৈরি করব, প্রতিটা অবজেক্টের জন্য fullName() আর fullNameRevesed() ফাংশনদুটি'র নতুন কপি তৈরি হবে! কিন্তু আসলে তো উচিত শুধু ক্লাসের সদস্য ভ্যারিয়েবল গুলোর অবজেক্ট-প্রতি কপি তৈরি হওয়া, ফাংশন এর কপি তৈরি করাটা অপ্রয়োজনীয়। প্রতিটা অবজেক্টের জন্য এভাবে মেম্বার ফাংশন তৈরি না করে আসলে প্রচলিত অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিং এর ধারণা অনুযায়ী কোন ক্লাসের সকল অবজেক্ট বা ইন্সট্যান্সের উচিত ক্লাসের সদস্য ফাংশন শেয়ার করা।

+ +
function personFullName() {
+    return this.first + ' ' + this.last;
+}
+function personFullNameReversed() {
+    return this.last + ', ' + this.first;
+}
+function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = personFullName;
+    this.fullNameReversed = personFullNameReversed;
+}
+
+ +

এখন প্রতিটা অবজেক্টের জন্য ফাংশন গুলোর নতুন কপি তৈরি না করে ফাংশনগুলো একবার-ই তৈরি করে শেয়ার করা নেওয়া হল। কিন্তু আসলে এর থেকেও ভালভাবে কোড করা সম্ভবঃ

+ +
function Person(first, last) {
+    this.first = first;
+    this.last = last;
+}
+Person.prototype.fullName = function() {
+    return this.first + ' ' + this.last;
+}
+Person.prototype.fullNameReversed = function() {
+    return this.last + ', ' + this.first;
+}
+
+ +

Person.prototype এমন একটি অবজেক্ট যা Person ফাংশনের সব ইন্সট্যান্স বা অবজেক্ট শেয়ার করে। এভাবে "prototype chain" নামের বিশেষ ধরণের লুক-আপ চেইন তৈরি হয়ঃ যখন আপনি Person এর এমন কোন প্রোপার্টি এক্সেস করতে চান যেটা এখনো সেট করা হয়নি, জাভাস্ক্রিপ্ট Person.prototype এ খুজে দেখবে (লুক-আপ) সেখানে এই প্রোপার্টি টি সেট করা আছে কিনা। সহজ বাংলায়, Person.prototype এ আমরা যে সকল প্রোপার্টি (ফাংশন বা ডেটা) সেট করব সেটা Person এর সকল ইন্সট্যান্স/অবজেক্ট এক্সেস করতে পারবে।

+ +
+

অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিং করার জন্য নতুন রা চোখ বন্ধ করে ওপরে দেখানো প্রটোটাইপ পদ্ধতি ব্যবহার করতে পারেন। ভাল-মন্দ এতগুলো উদাহরণ শুধুমাত্র কন্সেপ্ট পরিষ্কার করার জন্যই দেখানো হল - তবে গুলিয়ে ফেললে ভয় পাওয়ার কিছু নাই।

+
+ +

এই প্রটোটাইপ আসলে অনেক পাওয়ারফুল টুল। জাভাস্ক্রিপ্ট আপনাকে যেকোন কিছুর প্রটোটাইপ যেকোন সময় পরিবর্তন করার সুযোগ দেয়। যার মানে, রানটাইমেই আপনি অবজেক্টে নতুন নতুন মেথড যোগ করতে পারেন! এটাও সি/জাভার সাথে অন্যতম পার্থক্য প্রটোটাইপ-ভিত্তিক ল্যাংগুয়েজ যেমন জাভাস্ক্রিপ্ট এর।

+ +
> s = new Person("Simon", "Willison");
+> s.firstNameCaps();
+TypeError on line 1: s.firstNameCaps is not a function
+> Person.prototype.firstNameCaps = function() {
+    return this.first.toUpperCase()
+}
+> s.firstNameCaps()
+SIMON
+
+ +

মজা দেখুনঃ বিল্ট-ইন অবজেক্টের প্রটোটাইপ ও এভাবে পরিবর্তন করা সম্ভব! আসুন আমরা বিল্ট ইন String এ নতুন একটা মেথড যোগ করি স্ট্রিং উল্টে দেওয়ার জন্যঃ

+ +
> var s = "Simon";
+> s.reversed()
+TypeError on line 1: s.reversed is not a function
+> String.prototype.reversed = function() {
+    var r = "";
+    for (var i = this.length - 1; i >= 0; i--) {
+        r += this[i];
+    }
+    return r;
+}
+> s.reversed()
+nomiS
+
+ +

এই নতুন মেথড স্ট্রিং লিট্যারেল এও কাজ করবেঃ

+ +
> "This can now be reversed".reversed()
+desrever eb won nac sihT
+
+ +

আগে যেমনটা বলেছিলাম, prototype হচ্ছে একটা বিশেষ চেইনের অংশ। এই চেইনের গোড়ায় আছে Object.prototype, যার একটা মেথড হল toString() - এই মেথড টা কল হয় যখন আপনি কোন একটা অবজেক্ট কে স্ট্রিং হিসেবে পেতে চাচ্ছেন (জাভা'র toString() এর মতন)। ডিবাগিং করার জন্য এটা উপকারী হবেঃ

+ +
> var s = new Person("Simon", "Willison");
+> s
+[object Object]
+> Person.prototype.toString = function() {
+    return '<Person: ' + this.fullName() + '>';
+}
+> s
+<Person: Simon Willison>
+
+ +

মনে আছে আমরা avg.apply() এর প্রথম প্যারামিটারে null পাঠিয়েছিলাম? এই apply() এর প্রথম প্যারামিটারে যেই অবজেক্ট পাঠাবেন, this সেটাকে রেফার করবে। আমরা new এর একটা সহজ-সরল ইমপ্লেমেন্টেশন করতে পারিঃ

+ +
function trivialNew(constructor) {
+    var o = {}; // Create an object
+    constructor.apply(o, arguments);
+    return o;
+}
+
+ +

অবশ্য এটা পুরোপুরি new হিসেবে ব্যবহার করা যাবে না কারণ প্রটোটাইপ চেইন তৈরি করা হয়নি। এরকম কোড সচরাচর দেখা যায়না, তবে চাইলে যে করতে পারবেন সেটা দেখানো হল আরকি।

+ +

call নামের apply() এর মতই একটা ফাংশন আছে। পার্থক্য হল, array এর বদলে এটি বিশদ-ভাবে (কমা সেপারেটেড) আর্গুমেন্ট নিয়ে থাকেঃ

+ +
function lastNameCaps() {
+    return this.last.toUpperCase();
+}
+var s = new Person("Simon", "Willison");
+lastNameCaps.call(s);
+// Is the same as:
+s.lastNameCaps = lastNameCaps;
+s.lastNameCaps();
+
+ +

ফাংশনের ভেতরে ফাংশন (Inner functions)

+ +

জাভাস্ক্রিপ্টে ফাংশনের ভেতরে ফাংশন লেখা যায় এটা আমরা আগে makePerson() উদাহরণে দেখেছি। একটা গুরুত্বপূর্ণ ব্যাপার খেয়াল রাখতে হবে যে জাভাস্ক্রিপ্টে এই Inner ফাংশন তার প্যারেন্ট ফাংশনের স্কোপ এক্সেস করতে পারেঃ

+ +
function betterExampleNeeded() {
+    var a = 1;
+    function oneMoreThanA() {
+        return a + 1;
+    }
+    return oneMoreThanA();
+}
+
+ +

তাই কোড বুঝার আওতায় রাখা আর মেইন্টেইন করা সহজ জাভাস্ক্রিপ্টেঃ যদি কোন ফাংশন (ফাংশন নাম্বার-১) এমন কয়েকটা ফাংশনের ওপর নির্ভর করে যেই ফাংশনগুলা অন্য কোথাও কাজে লাগে না, তাহলে আমরা সেই ফাংশনগুলোকে এই ১-নাম্বার ফাংশনের ইনার (inner) ফাংশন হিসেবে রেখে দিতে পারি। এতে করে, global স্কোপের আওতায় থাকা ফাংশনের সংখ্যা কমবে - এটা সবসময় ভাল অভ্যাস হিসেবে বিবেচনা করা হয়।

+ +

এমন করে আসলে এক গাদা গ্লোবাল ভ্যারিয়েবল তৈরি করে গ্লোবাল স্কোপ নষ্ট করে ফেলার অভ্যাস থেকেও বেচে যাওয়া যায়। গ্লোবাল স্কোপে সুযোগ মত ভ্যারিয়েবল তৈরি করে ফাংশনে ডেটা শেয়ার করার প্রবণতা খুবই লক্ষ্যণীয়  - কিন্তু এভাবে কোড করলে একটা সময় পর আর কোড মেইন্টেইন করা যায় না। জাভাস্ক্রিপ্টের inner ফাংশন ব্যবহার করে আমরা যেসব ফাংশন কোন গ্লোবাল ভ্যারিয়েবল শেয়ার করতে চায়, তাদের একটা প্যারেন্ট ফাংশনের inner ফাংশন হিসেবে ঢুকিয়ে দিতে পারি। এভাবে যেখানে প্রয়োজন, সম্পর্কিত ফাংশনগুলোকে couple করে ফেললেও গ্লোবাল স্কোপে ভ্যারিয়েবলের সংখ্যা কমে যাবে। এই অভ্যাস সতর্কতার সাথেই করা উচিত, যদিও এরকম কোড করার সুযোগ থাকাটা খুবই উপকারী।

+ +

 ক্লোজার (Closures)

+ +

ক্লোজার জাভাস্ক্রিপ্টের অফার করা সেরা এবস্ট্রাকশন (abstractions) গুলোর একটি - অবশ্য ঠিকভাবে না বুঝলে কনফিউজিং হতে পারে। এটা আসলে কী?

+ +
function makeAdder(a) {
+    return function(b) {
+        return a + b;
+    }
+}
+x = makeAdder(5);
+y = makeAdder(20);
+x(6)
+?
+y(7)
+?
+
+ +

makeAdder নাম দেখেই বুঝা যাচ্ছে এটা নতুন নতুন adder ফাংশন তৈরি করে! এই নতুন ফাংশনগুলো কে যখন কিনা আবার কল করা হবে কোন আর্গুমেন্ট দিয়ে, makeAdder ফাংশনে দেয়া আর্গুমেন্টটির সাথে এই নতুন আর্গুমেন্ট কে যোগ করবে।

+ +

এখানে যা হচ্ছে অনেকটাই Inner ফাংশনের সাথে মিলে যায়ঃ একটা ফাংশনকে অন্য কোন ফাংশনের মধ্যে তৈরি করা হয়ছে - ভেতরের ফাংশনটি বাইরের (প্যারেন্ট) ফাংশনের সব ভ্যারিয়েবল এক্সেস করতে পারে। একমাত্র পার্থক্য হচ্ছে বাইরের (outer) ফাংশনটি কিন্তু রিটার্ন করে গিয়েছে, তাই কমন-সেন্স থেকে মনেহতে পারে যে এর লোকাল ভ্যারিয়েবল গুলো আর নেই। কিন্তু আসলে, এগুলো এখনো বহাল তবিয়তেই আছে - না থাকলে adder ফাংশনগুলো তো কাজ করত না! আরো লক্ষ্যণীয় যে makeAdder এর লোকাল ভ্যারিয়েবলের দু'টি আলাদা, ভিন্ন "কপি" দেখা যাচ্ছে - যার একটিতে a ভ্যারিয়েবলের মানে 5 আর অন্যটিতে এই মান 20। তাই, ওপরের ফাংশন কল  দু'টির ফলাফল হবে নিম্নরূপঃ

+ +
x(6) // returns 11
+y(7) // returns 27
+
+ +

পর্দার আড়ালেঃ যখন জাভাস্ক্রিপ্ট কোন ফাংশন execute করে, ঐ ফাংশনের লোকাল ভ্যারিয়েবল গুলো রাখার জন্যে একটি 'স্কোপ' অবজেক্ট তৈরি করা হয়। এই স্কোপ ভ্যারিয়েবল ইনিশিয়ালাইজ করা হয় ফাংশনে প্যারামিটার হিসেবে যেসব ভ্যারিয়েবল পাঠানো হয়েছিল সেগুলো দ্বারা। এটা গ্লোবাল অবজেক্টের মতই যেখানে সব গ্লোবাল ভ্যারিয়েবল আর ফাংশনগুলো থাকে, কিন্তু দু'টি পার্থক্য সহ। প্রথমতঃ প্রতিবার একটি ফাংশন execute হওয়া শুরু করে একটি নতুন স্কোপ অবজেক্ট তৈরি হয়ে যায়। গ্লোবাল স্কোপ অবজেক্টের সাথে দ্বিতীয় পার্থক্যটি হল, গ্লোবাল স্কোপের প্রোপার্টি সরাসরি এক্সেস করা যায় (যেমন ব্রাউজারের ক্ষেত্রে এই গ্লোবাল অবজেক্ট টি হল window), কিন্তু ফাংশনের স্কোপের ক্ষেত্রে এটি সম্ভব নয়। উদাহরণস্বরূপ বলা যায়, ফাংশনের স্কোপ অবজেক্টের প্রোপার্টিকে iterate করে এক্সেস করা সম্ভব নয়।

+ +

তাই যখন makeAdder কল করা হয়েছিল, একটা স্কোপ অবজেট তৈরি হয়ে গেছে। এই স্কোপ অবজেক্টের একটাই প্রোপার্টিঃ a ভ্যারিয়েবল যেটি কিনা এই ফাংশনের একমাত্র প্যারামিটার। makeAdder তারপর নতুন একটা ফাংশন তৈরি করে রিটার্ন করে। এই মুহূর্তে জাভাস্ক্রিপ্টের গারবেজ কালেকটর (কোন ভ্যারিয়েবল গুলোর আর প্রয়োজন নাই সেগুলো খুজে বের করে এরা যে মেমরি দখল করে রেখেছিল তা অন্য নতুন ভ্যারিয়েবলের জন্য ফ্রি করে দেওয়া'র পদ্ধতি) এর makeAdder এর স্কোপ অবজেট গায়েব করে ফেলার কথা, কিন্তু makeAdder যে ফাংশনটি তৈরি করে রিটার্ন করল তার মাঝে makeAdder এর স্কোপ অবজেক্টের একটা রেফারেন্স থেকে যায়। যে কারণে, যতক্ষণ makeAdder এর রিটার্ন করা ফাংশনের কোন না কোন রেফারেন্স কোডে অবশিষ্ট থাকছে (সহজভাবে যতক্ষণ এটি ব্যবহৃত হচ্ছে), ততক্ষণ makeAdder এর স্কোপ অবজেক্ট-টিও অক্ষত থাকবে।

+ +

স্কোপ অবজেক্টেরা প্রোটোটাইপ চেইনে মত স্কোপ চেইন মেইনটেইন করে।

+ +

ক্লোজার হচ্ছে একট ফাংশন আর এই ফাংশনকে যেই ফাংশন তৈরি করেছিল তার স্কোপ অবজেক্টের একটা সমন্বয় (combination)।

+ +

ক্লোজার আপনাকে স্টেট মনে রাখার একটা সুবিধা দেয় - যে কারণে অবজেক্টের বদলে ক্লোজার ব্যবহার করা যেতে পারে।

+ +

মেমরি অপচয় (Memory leaks)

+ +

ক্লোজার ব্যবহারের একটি দুর্ভাগ্যজনক পার্শ্বপ্রতিক্রিয়া হল এটি ইন্টার্নেট এক্সপ্লোরারে মেমরি অপচয় করে। জাভাস্ক্রিপ্টে গার্বেজ কালেকশন পদ্ধতি ব্যবহার করা হয় অবজেক্টের দখল করা মেমরি ফ্রি করার জন্যে। অবজেক্ট যখন তৈরি হয় তখন তাদের মেমরি দেওয়া (allocate) করা হয় - যখন ঐ অবজেক্টের আর কোন রেফারেন্স কোডে অবশিষ্ট থাকে না তখন সেই মেমরি ফ্রি করে দেওয়া হয়। হোস্ট যেসব অবজেক্ট সরবরাহ করে সেগুলো হ্যান্ডেল সেই হোস্ট নিজেই করে।

+ +

ব্রাউজার হোস্টগুলোর বিশাল পরিমাণে অবজেক্ট ম্যানেজ করা লাগে - যেই HTML পাতাটি দেখানো হচ্ছে - তার জন্যে DOM এর অবজেক্ট গুলো। এই অবজেক্টগুলো ম্যানেজ আর রিকভারি করার দায়িত্ব ব্রাউজারের।

+ +

এই কাজের জন্যে ইন্টারনেট এক্সপ্লোরার (IE) তার নিজের গার্বেজ কালেকশন পদ্ধতি ব্যবহার করে, জাভাস্ক্রিপ্টের পদ্ধতি থেকে যেটি আলাদা। এই দুই এর মাঝে ইন্টারেকশনের জন্যে মেমরি অপচয় হতে পারে।

+ +

IE তে মেমরি অপচয় হবে যখনি কোন জাভাস্ক্রিপ্ট অবজেক্ট আর নেটিভ অবজেক্টের মাঝে সার্কুলার (circular) রেফারেন্স তৈরি হবে। নিচের কোড দেখুনঃ

+ +
function leakMemory() {
+    var el = document.getElementById('el');
+    var o = { 'el': el };
+    el.o = o;
+}
+
+ +

ওপরের কোডে যে সার্কুলার রেফারেন্স তৈরি হল তার জন্যে IE, el আর o অবজেক্টের দখল করা মেমরি ফ্রি করবে না যতক্ষণ না ব্রাউজার পুরোপুরি রিস্টার্ট করা হচ্ছে। ফলাফল মেমরি অপচয়...

+ +

ওপরের কেইসটি প্রোগ্রামারের চোখ এড়িয়ে যেতে পারে, কারণ এই মেমরি অপচয় অনেক্ষণ-ধরে-চলছে এরকম বড়সর এপ্লিকেশনের ক্ষেত্রেই প্রভাব ফেলে। কোন এপ্লিকেশন জটিল ডেটা স্ট্রাকচার ব্যবহার করে বা লুপের মধ্যে মমরি অপচয় করলেও সেটা চোখে পড়বে।

+ +

সার্কুলার রেফারেন্স ওপরের কোডের মত এত সহজে চোখে নাও পড়তে পারে। অনেক সময় মেমরি নষ্ট করা ডেটা স্ট্রাকচারে অনেক লেভেলের রেফারেন্সের পরে সার্কুলার রেফারেন্স তৈরি হতে পারে - তখন আর চট করে সার্কুলার রেফারেন্স ধরা যাবে না।

+ +

ক্লোজার ব্যবহার করলে অনিচ্ছাকৃত মেমরি অপচয় হতে পারে। নিচের কোড টা দেখুনঃ

+ +
function addHandler() {
+    var el = document.getElementById('el');
+    el.onclick = function() {
+        this.style.backgroundColor = 'red';
+    }
+}
+
+ +

ওপরের কোডে HTML এলিমেন্ট টিকে লাল  রং করা হবে যখন কেউ এর উপরে ক্লিক করবে। একই সাথে মেমরি লীক ও হতে থাকবে। কেন? কারণ এনোনিমাস inner ফাংশনটি'র ক্লোজারে el এর একটা রেফারেন্স অনিচ্ছাকৃতভাবে থেকে যাবে। এর ফলে একটা জাভাস্ক্রিপ্ট অবজেক্ট (ফাংশনটি) আর একটা নেটিভ অবজেক্ট (el) এর মাঝে সার্কুলার রেফারেন্স তৈরি হল।

+ +

এই সমস্যা সমাধানের কয়েকটা উপায় আছে। সবথেকে সহজটি হল আদৌ কোন el ভ্যারিয়েবল ব্যবহার না করাঃ

+ +
function addHandler(){
+    document.getElementById('el').onclick = function(){
+        this.style.backgroundColor = 'red';
+    }
+}
+
+ +

আরেকটা মজার উপায় হল এক ক্লোজার এর সার্কুলার রেফারেন্স অন্য আরেকটি ক্লোজার দিয়ে নষ্ট করাঃ

+ +
function addHandler() {
+    var clickHandler = function() {
+        this.style.backgroundColor = 'red';
+    };
+    (function() {
+        var el = document.getElementById('el');
+        el.onclick = clickHandler;
+    })();
+}
+
+ +

Inner ফাংশনটি সরাসরি execute হয়, এর ভেতরের সবকিছু clickHandler এর তৈরি করা ক্লোজার থেকে আড়াল করে।

+ +

ক্লোজার থেকে দূরে থাকার আরেকটি ভাল বুদ্ধি হল window.onunload ইভেন্টে সার্কুলার রেফারেন্স দূর করা। অনেক ইভেন্ট লাইব্রেরী এই পদ্ধতি ব্যবহার করে। কিন্তু এরকম করলে আবার ফারায়ফক্স ১.5 এর bfcache কাজ করবে না, তাই ফায়ারফক্সে unload লিসেনার রেজিস্টার করা উচিত হবে না (যদি এমন হয় যে ব্যবহার না করে উপায় নাই তাহলে অবশ্য ভিন্ন কথা)।

+ +
+

মূল ডকুমেন্টের খবরাখবর...

+ +
    +
  • লেখকঃ Simon Willison
    • +
  • শেষ সম্পাদনাঃ মার্চ ৭, ২০০৬
    • +
  • কপিরাইটঃ © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.
    • +
  • আরো তথ্যঃ এই টিউটোরিয়াল নিয়ে আরো তথ্যের জন্য (আর মূল আলোচনার স্লাইডের লিংক পেতে) দেখুন Simon's Etech weblog post.
    • +
+
+ +

 

+ +

অনুবাদ সংক্রান্ত তথ্যঃ টেকনিকাল তথ্য অপরিবর্তিত রেখে ভাবানুবাদের পাশাপাশি সামান্য পরিমার্জনা করা হয়েছে।

diff --git a/files/bn/web/javascript/data_structures/index.html b/files/bn/web/javascript/data_structures/index.html new file mode 100644 index 0000000000..ab05a49d7a --- /dev/null +++ b/files/bn/web/javascript/data_structures/index.html @@ -0,0 +1,116 @@ +--- +title: জাভাস্ক্রিপ্টে ডেটা স্ট্রাকচার +slug: Web/JavaScript/Data_structures +tags: + - JavaScript +translation_of: Web/JavaScript/Data_structures +--- +
{{jsSidebar("More")}}
+ +

সব প্রোগ্রামিং ল্যাংগুয়েজের নিজস্ব ডেটা স্ট্রাকচার থাকে (যা ব্যবহার করে আপনি আপনার ডেটা বা তথ্য প্রোগ্রামে রাখতে পারেন) - তবে একেক প্রোগ্রামিং ভাষায় একেক রকম ডেটা স্ট্রাকচার দেখা যায়। এই আর্টিকেলে জাভাস্ক্রিপ্টের নিজস্ব ডেটা স্ট্রাকচার আর সেগুলোর বিভিন্ন প্রোপার্টি (বৈশিষ্ট্য) নিয়ে আলোচনা করা হয়েছে। এই নিজস্ব ডেটা স্ট্রাকচার গুলো ব্যবহার করে অন্যান্য ডেটা স্ট্রাকচার বানানো যাবে। যেখানে সম্ভব অন্য ভাষার সাথে পার্থক্য ও দেখানো হয়েছে।

+ +

ডাইনামিক টাইপিং 

+ +

JavaScript একটি loosely typed বা dynamic ভাষা। যার মানে হচ্ছে আমাদের আগে থেকে কোন variable এর type বলে দিতে বা ঠিক করে দিতে হবে না। কোন প্রোগ্রাম চলাকালে অটোমেটিক এর type ঠিক হয়ে যায়। যার মানে দাঁড়ায়, আমরা একই নামের বিভিন্ন type এর variable তৈরি করতে পারি!! 

+ +
var foo = 42;    // foo is now a Number
+var foo = 'bar'; // foo is now a String
+var foo = true;  // foo is now a Boolean
+ +

ডেটা টাইপ 

+ +

ECMAScript স্ট্যান্ডার্ড অনুযায়ী ৭ ধরণের ডেটা স্ট্রাকচার আছেঃ

+ +

 

+ +
    +
  • প্রথম ৬টি হল মৌলিক বা {{Glossary("Primitive", "primitives")}}: +
      +
    • বুলিয়ান {{Glossary("Boolean")}}
      • +
    • নাল {{Glossary("Null")}}
      • +
    • অসংগায়িত {{Glossary("Undefined")}}
      • +
    • সংখ্যা {{Glossary("Number")}}
      • +
    • স্ট্রিং {{Glossary("String")}}
      • +
    • সিম্বল {{Glossary("Symbol")}} (new in ECMAScript 6)
      • +
    +
    • +
  • এবং অবজেক্ট  {{Glossary("Object")}}
    • +
+ +

নিচের আলোচনায় আমরা দেখব কিভাবে এগুলো ব্যবহার করে ডেটা রাখা যায় আর কীভাবে এগুলোর সাহায্যে আরও উন্নতমানের ডেটা স্ট্রাকচার তৈরি করা যায়।

+ +

মৌলিক/বেসিক মানসমূহ

+ +

অবজেক্ট ছাড়া বাকি সব টাইপের ডেটার মান তৈরি করার পর আর পরিবর্তন করা যায় না। বিশেষকরে, স্ট্রিং (যেখানে C ভাষায় স্ট্রিং এর মান পরিবর্তন করা যায়)। এই টাইপের ডেটাকে আমরা মৌলিক (primitive) টাইপের বলে থাকি। নিচে {{ anch("Strings") }} নিয়ে আলোচনায় এই বিষয়ে বিস্তারিত রয়েছে।

+ +

বুলিয়ান, নাল এবং অসংজ্ঞায়িত

+ +

শুধুমাত্র চারটি ধ্রুবক (কন্সট্যান্ট) দিয়েই এই ডেটাটাইপ গুলো প্রকাশ করা সম্ভবঃ বুলিয়ান প্রকাশ করার জন্য  true, false, নাল প্রকাশের জন্য null, আর অসংজ্ঞায়িত প্রকাশের জন্য undefined। যেহেতু এগুলো কন্সট্যান্ট, এগুলো উঁচুমানের ডেটা রাখতে পারে না।

+ +

সংখ্যা

+ +

ECMAScript স্ট্যান্ডার্ড অনুযায়ী সংখ্যা প্রকাশ করার জন্য একটি মাত্র নাম্বার-টাইপ আছেঃ "double-precision 64-bit binary format IEEE 754 value"। অন্যান্য প্রোগ্রামিং ভাষার মত Integer (পূর্ণ সংখ্যা) প্রকাশ করার জন্য আলাদা কোন টাইপ নেই! ভগ্নাংশ রাখার পাশাপাশি জাভাস্ক্রিপ্টের এই একমাত্র নাম্বার টাইপ দিয়ে +Infinity, -Infinity, এবং NaN (not-a-number) এই বিশেষ প্রতীক গুলোও প্রকাশ করা যায়।

+ +

যদিও একটি সংখ্যা সাধারণত শুধুমাত্র এর মানই প্রকাশ করে, জাভাস্ক্রিপ্টের কিছু বাইনারী অপারেটর আছে, যেগুলো দিয়ে বিট মাস্কিং পদ্ধতিতে একটি মাত্র সংখ্যা থেকেই অনেকগুলো বুলিয়ান মান প্রকাশ করা সম্ভব। তবে এরকম ব্যবহার নিরুৎসাহিত করা হয়, কারণ জাভাস্ক্রিপ্টে অন্য পদ্ধতিতে বুলিয়ান মান রাখা যায় (যেমন বুলিয়ান মানের array ব্যবহার করে অথবা অবজেক্টে প্রত্যেকটা বুলিয়ান মানের জন্য একটা করে প্রোপার্টি ব্যবহার করে)। বিট মাসস্কিং ব্যবহার করলে কোড দুর্বোধ্য হয়, পরে এই কোড নিয়ে আর কাজ করাও যায় না। ক্ষেত্র বিশেষে বিট মাসস্কিং ব্যবহার না করে কোন উপায় থাকে না, যেমন স্টোরেজ সীমাবদ্ধতা থাকলে অথবা নেটওয়ার্ক দিয়ে প্রত্যেক্টা বিট পাঠানোর সময়। তবে যখনই পারা যায়, বিট মাসস্কিং শেষ সম্বল হিসেব রেখে দিয়ে দেখতে হবে অন্য কোন উপায়ে কোডটা করে ফেলা যায় কিনা!

+ +

স্ট্রিং

+ +

স্ট্রিং হচ্ছে "বাক্য" বা একসাথে অনেকগুলো অক্ষর।  C ভাষার সাথে জাভাস্ক্রিপ্টের পার্থক্য হচ্ছে জাভাস্ক্রিপ্টের স্ট্রিং তৈরি করার পর পরিবর্তন করা যায় না। তবে একটি স্ট্রিং এর ওপর কোন অপারেশন প্রয়োগ করে নতুন অন্য স্ট্রিং তৈরি করা যায়। যেমনঃ

+ +
    +
  • মূল স্ট্রিং এর যেকোন অংশ থেকে যেকোন সংখ্যক অক্ষর নিয়ে সাব-স্ট্রিং তৈরি করা যায়। অথবা সরাসরি এই ফাংশন ব্যবহার করে সাবস্ট্রিং তৈরি করা যায়ঃ String.substr()।
    • +
  • যোগ করার অপারেটর (+) ব্যবহার করে দুইটা স্ট্রিং একের পর এক বসিয়ে নতুন আরেকটা স্ট্রিং তৈরি করা যায়। একই কাজ হয় String.concat() ফাংশন ব্যবহার করে।
    • +
+ +

আপনার কোডের সব ডেটা স্ট্রিং দিয়ে প্রকাশ করবেন না!

+ +

জটিল রকমের ডেটাকে স্ট্রিং দিয়ে প্রকাশ করার প্রবণতা খুবই লক্ষ্য করা যায়। কারণ, কিছু সুবিধা পাওয়া যায় প্রায় সবকিছু স্ট্রিং দিয়ে প্রকাশ করতে গেলেঃ

+ +
    +
  • স্ট্রিং এর পর স্ট্রিং বসিয়ে অনেক জটিল ডেটা তৈরি করা যায়।
    • +
  • স্ট্রিং ডেটাকে ডিবাগ করা খুব সহজ।
    • +
  • অনেক API তেই স্ট্রিং খুব পরিচিত একটা মুখ। এসব API এর মধ্যে উদাহরণ হিসেবে input fields, local storage মান, {{ domxref("XMLHttpRequest") }} responses  যখন responseText ব্যবহার করা হচ্ছে, ইত্যাদি।) তাই মনে হতে পারে সব ডেটাই তো স্ট্রিং দিয়ে প্রকাশ করা যাচ্ছে!
    • +
+ +

এটা সত্য যে প্রায় সব ডেটা স্ট্রাকচার কেই স্ট্রিং দিয়ে প্রকাশ করা সম্ভব, কিন্তু এটা ভাল আইডিয়া না। যেমন, আলাদা করার জন্য কিছু একটা ব্যবহার করে কেউ স্ট্রিং দিয়ে লিস্ট তৈরি করার চেষ্টা করতে পারে (যেখানে array বেশি উপযুক্ত হত)। এখন আলাদা করার জন্য যেই অক্ষরটা ব্যবহার করা হয়েছে, সেটিই যদি লিস্টের সদস্য হিসেবে হাজির হয় তাহলে সমস্যা দেখা দিবে। কোন এসকেপ অক্ষর ব্যবহার করা যেতে পারে হয়ত, কিন্তু এত কাহিনী কীর্তি করার তো দরকার নেই কারণ লিস্ট রাখার জন্য নিবেদিত ডেটা স্ট্রাকচার ই আছে, যেটা ব্যবহার না করে স্ট্রিং ব্যবহার করলে অপ্রয়োজনীয় বোঝা বহন করতে হবে।

+ +

তাই শুধুমাত্র টেক্সট-জাতীয় ডেটা রাখার জন্যই স্ট্রিং ব্যবহার করা উচিত। জটিল ডেটা রাখার জন্য স্ট্রিংটিকে পার্স করে উপযুক্ত ডেটা স্ট্রেকচার ব্যবহার করতে হবে।

+ +

অবজেক্ট

+ +

জাভাস্ক্রিপ্টে, অবজেক্টকে আমরা অনেকগুলো ডেটা রাখার জন্য একটা প্যাকেট হিসেবে চিন্তা করতে পারি। অবজেক্ট লিটেরেল সিনট্যাক্স ব্যবহার করে আমরা অবজেক্টের অল্প কিছু প্রোপার্টির মান দিয়ে দিতে পারি। তবে পরে যেকোন সময় যেকোন প্রোপার্টি ঐ অবজেক্টে যোগ বা বিয়োগ করা যাবে। যেকোন টাইপের ডেটা আমরা প্রোপার্টি হিসেবে রাখতে পারি অবজেক্টের, অন্য অবজেক্টের ডেটাও। এভাবে, জটিল ডেটা স্ট্রাকচার তৈরি করা সম্ভব।

+ +

"সাধারণ"  অবজেক্ট, আর ফাংশন

+ +

জাভাস্ক্রিপ্টে অবজেক্ট হচ্ছে key-value ম্যাপিং। মানে অবজেক্টের কোন একটা স্ট্রিং key এর মান হিসেবে যেকোন ডেটা টাইপের value রাখা যাবে। তাই অবজেক্ট কে হ্যাশ-ম্যাপের বিকল্প হিসেবে ব্যবহার করা যায়। তবে, নন-স্ট্যান্ডার্ড __proto__ pseudo প্রোপার্টি সাবধানে ব্যবহার করতে হবে। যেখানে প্রযোজ্য, সেখানে __proto__ এর ভুল মান বসালে অবজেক্টের নিজস্ব প্রোটোটাইপ (ধরণ) বদলে যাবে। যেসব ক্ষেত্রে আমরা জানি না কোন স্ট্রিং এর উৎস কী (যেমন কোন ইনপুট ফিল্ড) সেসব ক্ষেত্রে সাবধান থাকতে হবেঃ অন্যরা এই সমস্যায় ভুগেছে। এসব ক্ষেত্রে কোন StringMap abstraction ব্যবহার করা যেতে পারে।

+ +

ফাংশনও অবজেক্ট, জাভাস্ক্রিপ্টে। পার্থক্য হল, ফাংশন কে কল করা যায়।

+ +

Arrays

+ +

Arrays ও অবজেক্ট, জাভাস্ক্রিপ্টে। তবে এখানে, প্রোপার্টি গুলোর key হচ্ছে পূর্ণ সংখ্যা আর বিশেষ 'length' প্রোপার্টি রয়েছে এদের। আরও কাহিনী হল, এরেগুলো ইনহেরিট হয় Array.prototype  থেকে - যার ফলে বেশ কিছু দরকারি ফাংশন পাওয়া যায় এরে অবজেক্ট গুলো থেকে। যেমন, indexOf ফাংশন ব্যবহার করে array তে কোন একটা মান (সদস্য) আছে কিনা জানা যায় আবার push ফাংশন ব্যবহার করে এরে এর শেষে কোন সদস্য যোগ করা যায়। লিস্ট কিংবা সেট হিসেবে ব্যবহার করার জন্য তাই এরে হচ্ছে সবচেয়ে উপযুক্ত ডেটা-স্ট্রাকচার।

+ +

তারিখ

+ +

তারিখ প্রকাশ করার জন্য সবচেয়ে উপযুক্ত হবে নিজস্ব Date ইউটিলিটি ব্যবহার করা। 

+ +

WeakMaps, ম্যাপ, সেট

+ +

স্ট্যান্ডার্ড নয়। আশা করা যায় ECMAScript 6. ভার্সনে স্ট্যান্ডার্ড হবে।

+ +

এসব ডেটা স্ট্রাকচার কোন অবজেক্টের রেফারেন্স কে key হিসেবে নিতে পারে। সেট দিয়ে একসারি (set) অব্জেট প্রকাশ করা হয়, আবার WeakMaps আর ম্যাপ দিয়ে কোন অবজেক্ট কে ভ্যালু হিসেবে রাখা হয়। ম্যাপ আর উইকম্যাপ এর মাঝে পার্থক্য হচ্ছেঃ ম্যাপে অবজেক্ট key, enumerate করা যায়। আর উইকম্যাপে গার্বেজ-কালেকশন বেশি ভালভাবে কাজ করে।

+ +

শুধুমাত্র ECMAScript 5 ব্যবহার করেই ম্যাপ ও সেট ইমপ্লিমেন্ট করা সম্ভব। কিন্তু যেহেতু অবজেক্ট compare (যেমন, কোনটা কার থেকে ছোট সেই তুলনা করতে গেলে) করা সম্ভব না, লুক-আপ পারফরমেন্স linear হয়ে যাবে এতে। এর থেকে নেটিভ ইমপ্লেমেন্টেশন ভাল হবে কারণ তাহলে লুক-আপ পারফরমেন্স লগারিদমিক থেকে কন্সটান্ট পর্যন্ত হতে পারবে।

+ +

সাধারণভাবে, DOM নোডে ডেটা bind করার জন্য যে কেউ সরাসরিভাবে অবজেক্টে প্রোপার্টি হিসেবে দিয়ে দিতে পারে, অথবা data-* attribute গুলো ব্যবহার করতে পারে। এর সমস্যা হল একই context এ চলছে এরকম যেকোন স্ক্রিপ্ট এই ডেটা ব্যবহার করতে পারবে। ম্যাপ আর উইকম্যাপ দিয়ে ডেটা কোন অব্জেক্টের সাথে সহজেই প্রাইভেট ভাবে bind করা যায়।

+ +

TypedArrays

+ +

স্ট্যান্ডার্ড নয়। আশা করা যায় ECMAScript 6. ভার্সনে স্ট্যান্ডার্ড হবে।

+ +

আরও দেখুন

+ + diff --git a/files/bn/web/javascript/guide/grammar_and_types/index.html b/files/bn/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..b5dbd8bda4 --- /dev/null +++ b/files/bn/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,635 @@ +--- +title: 'ভ্যালু, ভ্যারিয়েবল, এবং লিটারেল' +slug: Web/JavaScript/Guide/Grammar_and_types +tags: + - জাভাস্ক্রিপ্ট +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

+ +

এই চ্যাপ্টারের আলোচ্য বিষয় হল ভ্যালু যা জাভাস্ক্রিপ্ট চেনে এবং জাভাস্ক্রিপ্ট এক্সপ্রেশন গঠনের মূল কাঠামো: ভেরিয়েবল, কনস্টান্ট, এবং লিটারেল সম্পর্কে বর্ণনা করে।

+ +

Values(মান)

+ +

জাভাস্ক্রিপ্ট নিচে উল্লেখিত পাঁচ ধরণের প্রাথমিক টাইপের ভ্যালুগুলো চেনে:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 
টাইপভ্যালু টাইপের উদাহরন / ব্যাখ্যা
সংখ্যা/Number42, 3.14159
বুলিয়ান/Booleantrue / false
স্ট্রিং/String"Howdy"
nullnull বা "শুন্য" ভ্যালু নির্দেশ করার জন্য এই কী-ওয়ার্ড টি ব্যবহার করা হয়। এছাড়া নাল একপ্রকার প্রিমিটিভ ভ্যালু। যেহেতু জাভাস্ক্রিপ্ট ইংরেজী হরফের কেইস-সংবেদনশীল(case-sensitive), null তাই Null, NULL অথবা এগুলোর সমমানের সবগুলো-ই ভিন্ন।
undefinedundefined হল top-level প্রোপার্টি যার ভ্যালু হচ্ছে এটা বা'অসংজ্ঞায়িত' হিসেবে চিহ্নিত করার জন্য । এটাএকটি প্রিমিটিভ ভ্যালু। 
+ +

 

+ +

এই গুটিকয়েক টাইপের ভ্যালু অথবা ডেটা টাইপ ব্যবহার করেই আসলে যেকোন কাজের কোড লিখে ফেলা সম্ভব। Integer আর ভগ্নাংশ  (floating value) রাখার জন্য পৃথক ডেটা-টাইপ নাই। একইভাবে, তারিখ রাখার জন্যে কোন আলাদা ডেটা-টাইপ নাই, অবশ্য আপনি চাইলে Date অবজেক্ট আর এর বিভিন্ন কাজের মেথড ব্যবহার করতে পারেন।

+ +

Objects আর functions হচ্ছে ভাষাটির অন্যতম গুরুত্বপূর্ণ উপাদান। ফাংশন অন্যান্য প্রোগ্রামিং ভাষার মতই - কোন একটি বিশেষ কাজ করার জন্য লেখা হয় ফাংশন। আর অবজেক্টে থাকে নাম-ভ্যালু যুগল! (key-value pairs) - নাম ব্যবহার করে ভ্যালুতে কি রাখা আছে জানতে পারবেন।

+ +

ডেটা-টাইপের রূপান্তর/কনভার্সন

+ +

জাভাস্ক্রিপ্ট ডায়নামিক-টাইপ (dynamically typed) ভাষা, মানে কোন ভ্যারিয়েবলের টাইপ কি সেটা বলে দিতে হয়না, জাভাস্ক্রিপ্ট নিজেই রান-টাইমে বের করবে। এই টাইপ পরিবর্তন ও করা যায় রান-টাইমে। স্ক্রিপ্ট চলার সময় প্রয়োজনমত ভ্যারিয়েবলের টাইপ ও কনভার্ট করে নেওয়া হয়। ধরে নেই, আপনি নিচের মত করে ভ্যারিয়েবল ডিক্লেয়ার করেছেনঃ

+ +
+
var answer = 42;
+
+
+ +

পরে কোন এক সময় আপনি একই ভ্যারিয়েবলে স্ট্রিং মান বসালেনঃ

+ +
+
answer = "Thanks for all the fish...";
+
+
+ +

জাভাস্ক্রিপ্ট ডায়নামিক-টাইপ বলেই এই লাইনে কোন ভুল হয়নি। কোডের ভাষা জাভা/সি হলে এই লাইনেই ভুল হত।

+ +

যদি কোন এক্সপ্রেশনে সংখ্যা আর স্ট্রিং মান এর মাঝে '+' ওপারেটের ব্যবহার করেন, তাহলে সংখ্যা-ভ্যালু গুলো স্ট্রিং এ কনভার্ট হয়ে যাবে। যেমনঃ

+ +
x = "The answer is " + 42 // "The answer is 42"
+y = 42 + " is the answer" // "42 is the answer"
+
+ +

তবে '+' ব্যাতীত অন্য অপারেটরের ক্ষেত্রে কিন্তু সংখ্যাকে স্ট্রিং এ কনভার্ট করা হয় না! যেমনঃ

+ +
"37" - 7 // 30
+"37" + 7 // "377"
+
+
+ +

আসলে জাভাস্ক্রিপ্টে '+' সাইন দিয়ে যেমন নিউমেরিক সংখ্যার যোগ এর কাজ করা হয়। ঠিক তেমনি স্ট্রিং এর ক্ষেত্রে দুইটা স্ট্রিং কে জোড়া দেয়ার কাজ করে থাকে। যাকে ইংরেজিতে concatenation বলা হয়। এই কাজটা concat() নামক ফাংশন ব্যবহার করেও করা হয়ে থাকে।

+ +

স্ট্রিং থেকে সংখ্যা

+ +

স্ট্রিং কে সংখ্যায় কনভার্ট করতে পারবেন নিচের মেথডগুলো ব্যবহার করেঃ

+ +

parseInt() আর parseFloat()

+ +

দেখুনঃ parseInt() আর parseFloat() পাতায়।

+ +

parseInt শুধুমাত্র integer রিটার্ন করে, তাই দশমিক সংখ্যা নিয়ে কাজকারবারেই এর ব্যবহার সীমিত। এছাড়া, একটি ভাল অভ্যাস হল এই ফাংশনে ২য় প্যারামিটারে কনভার্সনের ভিত্তি (base) পাঠিয়ে দেওয়া।

+ +

'+' অপারেটর

+ +

স্ট্রিং কে সংখ্যায় কনভার্ট করার আরেকটা বুদ্ধি হল '+' অপারেটর ব্যবহার করাঃ

+ +
"1.1" + "1.1" = "1.11.1"
+(+"1.1") + (+"1.1") = 2.2   // শুধুমাত্র বোঝার সুবিধার জন্যে বন্ধনী ব্যবহার করা হয়েছে।
+ +

ভ্যারিয়েবল

+ +

আপনার এপ্লিকেশনে ব্যবহার করার জন্য যেকোন ভ্যালু, মেমরী তে সংরক্ষণ করে রাখতে ভ্যারিয়েবল ব্যবহার করুন। ভ্যারিয়েবল হিসেবে আমরা যে নামগুলো দিতে পারব তাদের identifiers বলা হয়। এগুলো দেওয়ার কিছু নিয়ম আছেঃ

+ +

জাভাস্ক্রিপ্টে identifiers অবশ্যই কোন বর্ণ (letter), আন্ডারস্কোর (_) অথবা ডলার চিহ্ন ($) দিয়ে শুরু করতে হবে; পরবর্তী অক্ষরে সংখ্যা (0-9) ব্যবহার করা যাবে। জাভাস্ক্রিপ্টে হরফের case (ইংরেজীতে বড় হাতের বা ছোট হাতের হরফ) গুরুত্বপূর্ণ - ইংরেজী "A" থেকে শুরু করে "Z" পর্যন্ত বর্ণগুলো বড় হাতের, আর "a" থেকে শুরু করে "z" পর্যন্ত বর্ণগুলো ছোট হাতের।

+ +

জাভাস্ক্রিপ্ট ১.৫ বা এর ওপরের ভার্সনগুলোতে আপনি ISO 8859-1 বা ইউনিকোড অক্ষর যেমন অ/আ/ক/খ ব্যবহার করতে পারবেনঃ

+ +
var ফল = "কলা";
+alert(ফল);
+ +

ভ্যারিয়েবলের নাম হিসেবে বাংলা অক্ষর ব্যবহার করছি! এছাড়াও \uXXXX {{anch("Unicode escape sequences")}} ক্যারেকটার হিসেবে আইডেন্টিফায়ারে ব্যবহার করা যাবে।

+ +

বৈধ ভ্যারিয়েবলের নামের কিছু উদাহরণঃ Number_hits, temp99, এবং _name।

+ +

ভ্যারিয়েবল তৈরি করা

+ +

দু'টি উপায়ে ভ্যারিয়েবল তৈরি (declare) করা যায়ঃ

+ +
    +
  • var কী-ওয়ার্ড ব্যবহার করে। যেমনঃ var x = 42। লোকাল আর গ্লোবাল দুই ধরণের ভ্যারিয়েবল-ই এই কীওয়ার্ড দিয়ে তৈরি করা যায়।
    • +
  • সরাসরি ভ্যালু এসাইন করে দিয়ে। যেমনঃ x = 42। এটি করলে global ভ্যারিয়েবল তৈরি হবে আর strict লেভেলের ওয়ার্নিং তৈরি হবে। তাই এই পদ্ধতি ব্যবহার করা অনুচিত।
    • +
+ +

ভ্যারিয়েবলের মান কী?

+ +

var স্টেটমেন্ট ব্যবহার করে কোন ভ্যালু দিয়ে ইনিশিয়ালাইজ না করলে তার মান হিসেবে থাকবে undefined।

+ +

তৈরি করা হয়নি (undeclared) এমন কোন ভ্যারিয়েবল নিয়ে কাজ করতে গেলে ReferenceError এক্সেপশন পাবেনঃ

+ +
var a;
+console.log("The value of a is " + a); // logs "The value of a is undefined"
+console.log("The value of b is " + b); // throws ReferenceError exception
+
+ +

কোন ভ্যারিয়েবলে ভ্যালু দেওয়া হয়েছে কিনা জানতে তাই undefined ব্যবহার করুন। নিচের কোডে input ভ্যারিয়েবলে কোন ভ্যালু দেই নি, তাই if স্টেটমেন্টে true পাওয়া যাচ্ছেঃ

+ +
var input;
+if(input === undefined){
+  doThis();
+} else {
+  doThat();
+}
+
+ +

The following is related to "Variables" section as potential values in assignment.

+ +

বুলিয়ান কন্টেক্সট এ ব্যবহার করলে অবশ্য undefined, false হিসেবে আচরণ করে। যেমনঃ নিচের কোডে myFunction ফাংশনটি একজিকিউট হবে কারণ myArray এলিমেন্ট টি তৈরি করা হয় নি।

+ +
var myArray = new Array();
+if (!myArray[0]) myFunction();
+
+ +

তবে numeric কন্টেক্সটে ব্যবহৃত হলে undefined কনভার্ট হবে NaN এঃ

+ +
var a;
+a + 2 = NaN
+ +

যখন কোন নাল ভ্যারিয়েবল ব্যবহারের চেষ্টা করেন, তখন বুলিয়ান কন্টেক্সটে false আর numeric কন্টেক্সটে 0 হিসেবে এর মান নির্ণিত হয়ঃ

+ +
var n = null;
+console.log(n * 32); // logs 0
+
+ +

ভ্যারিয়েবলের স্থায়িত্ব/স্কোপ (scope)

+ +

যখন একটা ভ্যারিয়েবল কে কোন ফাংশনের বাইরে তৈরি করেন তখন তাকে global ভ্যারিয়েবল বলি, কারণ ডকুমেন্টের যেকোন জায়গায় ঐ ভ্যারিয়েবল টা ব্যবহার করা যাবে। অপরদিকে, কোন ফাংশনের ভিতর যদি ভ্যারিয়েবলটি তৈরি করেন, তাহলে সেটি local ভ্যারিয়েবল, কারণ ঐ ফাংশনের বাইরে ঐ ভ্যারিয়েবলের কোন অস্তিত্ব নাই।

+ +

জাভাস্ক্রিপ্টে ব্লক স্টেটেমেন্টের আলাদা কোন স্কোপ নেই; বরং একটা ফাংশনে যতগুলো ব্লক-ই থাকুক না কেন সবগুলো একই স্কোপে - ঐ ফাংশনের স্কোপে থাকে। যেমন নিচের কোড 5 লগ করবে (জাভাস্ক্রিপ্ট কনসোলে 5 লিখবে) কারণ x ভ্যারিয়েবলের স্কোপ if ব্লকের বাইরেও আছে।

+ +
if (true) {
+  var x = 5;
+}
+console.log(x);
+
+ +

অন্য প্রোগ্রামিং ভাষার সাথে জাভাস্ক্রিপ্টের অমিল এখানেই। আরেকটা অপ্রত্যাশিত ব্যাপার হলঃ পরে তৈরি করা হয়েছে এমন ভ্যারিয়েবল আগে ব্যবহার করতে পারবেন অনায়াসে। কারণ ধরে নেওয়া হয় যে ভ্যারিয়েবল গুলো ফাংশনের শুরুতেই টুকে নেওয়া হয়েছে। তবে যাই হোক, যদি কোন ভ্যালু দিয়ে ভ্যারিয়েবল initialize  না করেন তাহলে এর মান undefined পাবেন ।

+ +
/**
+ * Example 1
+ */
+console.log(x === undefined); // logs "true"
+var x = 3;
+
+
+/**
+ * Example 2
+ */
+// will return a value of undefined
+var myvar = "my value";
+
+(function() {
+  console.log(myvar); // undefined
+  var myvar = "local value";
+})();
+
+ +

২ নাম্বার উদাহরণ টি খুব সাবধানে দেখুন! ২ নম্বর উদাহরণটি এভাবে কাজ করবেঃ

+ +
var myvar = "my value";
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = "local value";
+})();
+ +

যেমনটা বলেছিলাম, সব var স্টেটমেন্টগুলো যেন ফাংশনের শুরুতেই তৈরি করা হয়েছে। এভাবে কোড করলে ভুল হওয়ার সম্ভাবনা কমে যায় আর সহজেই বুঝতে পারা যায় কী হচ্ছে!

+ +

গ্লোবাল ভ্যারিয়েবল

+ +

গ্লোবাল ভ্যারিয়েবল হচ্ছে আসলে একটা global object এর প্রোপার্টি! ওয়েবপেইজে গ্লোবাল অবজেক্ট টা হচ্ছে window, তাই আপনি window.variable সিন্ট্যাক্স ব্যবহার করেও গ্লোবাল ভ্যারিয়েবল এক্সেস করতে পারবেন।

+ +

need links to pages discussing scope chains and the global objectফলস্বরূপ, ব্রাউজারের এক উইন্ডো তে তৈরি করা  গ্লোবাল ভ্যারিয়েবল কে ব্রাউজারের অন্য উইন্ডোতে বা ফ্রেম থেকে এক্সেস করা যাবে উইন্ডো বা ফ্রেমটির name ব্যবহার করে। যেমন, কোন একটা FRAMESET ডকুমেন্টে তৈরি করা phoneNumber ভ্যারিয়েবলকে এর কোন বাচ্চা ফ্রেম (child frame) থেকে parent.phoneNumber ব্যবহার করে এক্সেস করতে পারবেন।

+ +

কন্সট্যান্ট

+ +

শুধু পড়া যাবে, মান পরিবর্তন করা যাব্বে না এমন ভ্যারিয়েবল তৈরি করতে পারেন const কী-ওয়ার্ড দিয়ে। এর আইডেন্টিফায়ার এর সিন্ট্যাক্স ভ্যারিয়েবলের আইডেন্টিফায়ার এর মতইঃ অবশ্যি অক্ষর, আন্ডারস্কোর অথবা $ চিহ্ন দিয়ে শুরু হতে হবে আর এরপর অক্ষর, সংখ্যা বা আন্ডারস্কোর থাকতে পারবে।

+ +
const prefix = '212';
+
+ +

শুরুতেই মান নির্ধারণ করে দেওয়ার পর কন্সট্যান্ট এর মান পরিবর্তন করা যায় না বা নতুন করে একই নামে কন্সট্যান্ট তৈরি করা যায় না।

+ +

কন্সট্যান্ট এর স্কোপ ভ্যারিয়েবলের মতই। তবে const কী-ওয়ার্ড টা অবশ্যই লিখতে হবে, না হলে জাভাস্ক্রিপ্ট কীভাবে ধরবে আপনি ভ্যারিয়েবল নাকি কন্সট্যান্ট কোনটা তৈরি করতে চাচ্ছেন! কীওয়ার্ড টা ব্যবহার না করলে তাই একে ভ্যারিয়েবল হিসেবেই গণ্য করা হবে।

+ +

একই স্কোপের ভেতর কোণ ফাংশন অথবা ভ্যারিয়েবলের নামে কন্সট্যান্ট তৈরি করা যায় না। যেমনঃ

+ +
// নিচের কোডে ভুল আছে
+function f() {};
+const f = 5;
+
+// নিচেরটাও ভুল!
+function f() {
+  const g = 5;
+  var g;
+
+  //statements
+}
+
+ +

লিট্যারেল

+ +

লিটারেল কে জাভাস্ক্রিপ্টে ভ্যালু হিসেবে ব্যবহার করা যায়। এগুলো যেভাবে দেখানো হয়, সেভাবেই লিখতে হবে - এগুলো ভ্যারিয়েবল না। যেভাবে দেখানো হচ্ছে সেভাবেই কোডে লিখতে হবে বলেই এদের নাম লিটারেল (literal)! এই অংশে নিচের লিট্যারেল গুলো নিয়ে আলোচনা করেছিঃ

+ +
    +
  • {{anch("Array লিটারেল")}}
    • +
  • {{anch("বুলিয়ান লিটারেল")}}
    • +
  • {{anch("ভগ্নাংশের লিটারেল")}}
    • +
  • {{anch("Integers")}}
    • +
  • {{anch("Object literals")}}
    • +
  • {{anch("String literals")}}
    • +
+ +

Array লিটারেল

+ +

Array লিটারেল হচ্ছে শূণ্য বা এর থেকে বেশি সংখ্যক "এক্সপ্রেশনের" একটা লিস্ট - এই সব এক্সপ্রেশনের প্রত্যেকেই হচ্ছে array টির একেকটি সদস্য - এই লিস্টের সামনে আর পরে তৃতীয় বন্ধনী ([]) ব্যবহার করতে হবে। যখন আপনি array লিটারেল ব্যবহার করে array তৈরি করবেন, তখন এই লিস্টের ভ্যালুগুলোকে array টির সদস্য হিসেবে বিবেচনা করে arrayটি ইনিশিয়ালাইজ করা হয়। আর যতগুলো সদস্য দিলাম, array এর length তত।

+ +

নিচের উদাহরণে ৩ সদস্য বিশিষ্ট তদন্ত কমিটি থুক্কু coffees নামের array তৈরি করা হয়েছে - array টির length ও তাই তিনঃ

+ +
var coffees = ["French Roast", "Colombian", "Kona"];
+
+ +

খেয়াল করুনঃ array লিটারেল হচ্ছে বিশেষ ধরণের অবজেক্ট ইনিশিয়ালাইজার। দেখুন কিভাবে অবজেক্ট ইনিশিয়ালাইজার ব্যবহার করা যায়।

+ +

যদি টপ-লেভেল কোডে (মানে ফাংশনের বাইরের কোডে) array তৈরি করা হয়, যেই এক্সপ্রেশনে array লিটারেলটি আছে - সেই এক্সপ্রেশনটি যতবার execute করা হবে ততবার-ই array টি ইন্টারপ্রেট (নতুন করে তৈরি) করা হবে। এছাড়া কোন ফাংশনের ভেতর array লিটারেল ব্যবহার করলে যতবার ফাংশনটি কল করবেন ততবার লিটারেলটি তৈরি করা হবে।

+ +

Array লিটারেল Array অবজেক্ট-ও বটে। পড়ুন বিস্তারিত।

+ +

Array লিটারেলে বাড়তি কমা'র ব্যবহার

+ +

Array লিটারেলে যে সব সদস্য দিতেই হবে এমন কথা নাই - যদি কোন row তে পরপর দুইটা কমা ব্যবহার করেন তাহলে কমা দুটোর মাঝের সদস্যটি undefined হিসেবে থাকে। নিচের উদাহরণে fish array তৈরি করা হয়েছে এভাবেঃ

+ +
var fish = ["Lion", , "Angel"];
+
+ +

এই array তে দুটো সদস্যের মান আছে আর একটির ভ্যালু নাই। (fish[0] হচ্ছে "Lion", fish[1] হচ্ছে undefined, আর fish[2] হচ্ছে "Angel")।

+ +

সদস্যের লিস্টের শেষে যদি কমা দিয়ে রাখেন সেটি অগ্রাহ্য করা হবে। নিচের উদাহরণে array এর length তিন। myList[3] বলে কোন সদস্য নেই। শেষের এই অতরিক্ত কমা ছাড়া বাকি সব কমা-ই নতুন সদস্য নির্দেশ করে। (খেয়াল করুনঃ পুরোনো ব্রাউজারে শেষের অতিরিক্ত কমা ত্রুটি তৈরি করতে পারে তাই লিস্টের শেষে বাড়তি কমা না দেওয়াই ভাল।)

+ +
var myList = ['home', , 'school', ];
+
+ +

নিচের উদাহরণে array এর length চার।  myList[0] আর myList[2] অসংজ্ঞায়িত।

+ +
var myList = [ , 'home', , 'school'];
+
+ +

নিচের উদাহরণে array এর length চার।  myList[1] আর myList[3] অসংজ্ঞায়িত। শুধুমাত্র শেষের কমা অগ্রাহ্য করা হয়েছেঃ

+ +
var myList = ['home', , 'school', , ];
+
+ +

অতিরিক্ত কমা'র ব্যবহারে ফলাফল কী আসে সেটা ঠিকমত বুঝতে পারাটা গুরুত্বপূর্ণ। নিজে কোড লেখার সময় array'র যে সদস্যগুলোর মান দিতে চান না, সরাসরি undefined মান বসিয়ে দিলে আপনার কোড সহজেই বুঝা যাবে আর ভবিষ্যতে কাজ করাও সহজ হবে।

+ +

বুলিয়ান লিটারেল

+ +

বুলিয়ান টাইপের দু'ধরণের লিটারেল আছেঃ true আর false।

+ +

প্রিমিটিভ (যেগুলো অবজেক্ট না) true আর false বুলিয়ান ভ্যালু কে Boolean অবজেক্টের true আর false ভ্যালুর সাথে গুলিয়ে ফেলবেন না - এটি প্রিমিটিভ ভ্যালুগুলোর wrapper হিসেবেই কাজ করে। আরো তথ্যের জন্য বুলিয়ান অবজেক্ট নিয়ে পড়ুন।

+ +

Integers

+ +

Integers (পূর্ণ সংখ্যা) কে ১০ (দশমিক), ১৬ (হেক্সাডেসিমাল) বা ৮(অক্টাল) এর ভিত্তিতে (base) প্রকাশ করা যায়।

+ +
    +
  • দশমিক পূর্ণ সংখ্যার লিটারেল হচ্ছে এক বা একাধিক সংখ্যার ক্রম যার শুরুতে শূণ্য থাকতে পারবে না।
    • +
  • শুরুতে শূণ্য সহ এক বা একাধিক সংখ্যার ক্রম ব্যবহার করলে সেটি অক্টাল বলে গণ্য হয়। অক্টাল ভিত্তিতে শুধুমাত্র ০-৭ এই কয়টি ডিজিট ব্যবহার করা যায়।
    • +
  • শুরুতে 0x (অথবা 0X) সহ এক বা একাধিক সংখ্যার ক্রম ব্যবহার করলে সেটি হেক্সাডেসিমাল বলে গণ্য হয়। এই ভিত্তিতে 0-9 এই কয়টি ডিজিট ছাড়াও a-f বা A - F এই অক্ষরগুলো ব্যবহার করা যায়।
    • +
+ +

অক্টাল লিটেরেল ব্যবহার নিরুতসাহিত আর ECMA-262 ৩য় সংস্করণে বাদ দিয়ে দেওয়া হয়েছে। অবশ্য পুরনো কোড যাতে চলতে পারে সেহেতু জাভাস্ক্রিপ্ট ১.৫ এ এখনো অক্টাল সমর্থন করে।

+ +

Integer লিটেরেলের কিছু ব্যবহারঃ

+ +
0, 117 and -345 (দশমিক, base 10)
+015, 0001 and -077 (অক্টাল, base 8)
+0x1123, 0x00111 and -0xF1A7 (হেক্সাডেসিমাল, "hex" or base 16)
+
+ +

ভগ্নাংশের লিটারেল

+ +

ভগ্নাংশে নিচের বিষয়গুলো থাকেঃ

+ +
    +
  • চিহ্ন (sign) সহ/ছাড়া দশমিক ভিত্তির পূর্ণ সংখ্যা (শুরুতে ''+'' অথবা ''- '' চিহ্ন থাকতে পারে)
    • +
  • একটা দশমিক ফোটা ("."),
    • +
  • দশমিক ফোটার পরের অংশ (যেটা কিনা ১০-ভিত্তির পূর্ণ সংখ্যা),
    • +
  • এক্সপোনেন্ট (exponent)
    • +
+ +

Exponent অংশ "e" অথবা "E" দিয়ে শুরু হয় আর এর পর থাকে ১০-ভিত্তির পূর্ণসংখ্যা, যেটার শুরুতে আবার + অথবা - চিহ্ন থাকতে পারে নাও পারে। একটা ভগ্নাংশ লিটেরেলে কমপক্ষে একটি ডিজিট (সংখ্যা) এবং হয় দশমিক ফোটা অথবা "e" (অথবা "E") থাকতে হবে।

+ +

ভগ্নাংশ লিটেরেলের কিছু উদাহরণ হলঃ 3.1415, -3.1E12, .1e12, আর 2E-12।

+ +

পরিষ্কার করে বলতে গেলে, সিন্ট্যাক্স হচ্ছেঃ

+ +
[digits][.digits][(E|e)[(+|-)]digits]
+
+ +

যেমনঃ

+ +
3.14
+2345.789
+.3333333333333333333
+
+ +

অবজেক্ট লিটেরেল

+ +

দ্বিতীয় বন্ধনীর ({}) ভেতর শূণ্য/এক/একাধিক নাম-ভ্যালু যুগল (name-value pairs) লিখে অবজেক্ট লিটেরেল তৈরি করা যায়। তবে কোন স্টেটমেন্টের শুরুতেই অবজেক্ট লিটেরেল ব্যবহার করা যায় না। এমনটা করলে ত্রুটি তৈরি হবে অথবা আপনি যেমনটা আশা করছিলেন সেরকম ফল পাবেন না - কারণ শুরুতেই { দেখে জাভাস্ক্রিপ্ট মনে করতে পারে আপনি ব্লক শুরু করছেন।

+ +

নিচের উদাহরণে অবজেক্ট লিটেরেল দেখানো হয়েছে। car অবজেক্টের প্রথম সদস্য myCar নামের একটি প্রোপার্টি; দ্বিতীয় সদস্য getCar একটি ফাংশন (CarTypes("Honda")); ইনভোক করে, আর তৃতীয় সদস্য special ইতোমধ্যে তৈরি করা একটা ভ্যারিয়েবল ব্যবহার করে (Sales)।

+ +
var Sales = "Toyota";
+
+function CarTypes(name) {
+  return (name == "Honda") ?
+    name :
+    "Sorry, we don't sell " + name + "." ;
+}
+
+var car = { myCar: "Saturn", getCar: CarTypes("Honda"), special: Sales };
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota
+
+ +

এছাড়াও, কোন প্রোপার্টির নাম হিসেবে সংখ্যা কিংবা স্ট্রিং লিটেরেল ব্যবহার করতে পারেন অথবা এক অবজেক্টের ভেতর আরেকটিকে নেস্ট করতে পারেন। নিচের উদাহরণে দেখুনঃ

+ +
var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+
+ +

দয়া করে খেয়াল করুনঃ

+ +
var foo = {a: "alpha", 2: "two"};
+console.log(foo.a);    // alpha
+console.log(foo[2]);   // two
+//console.log(foo.2);  // Error: missing ) after argument list
+//console.log(foo[a]); // Error: a is not defined
+console.log(foo["a"]); // alpha
+console.log(foo["2"]); // two
+
+ +

স্ট্রিং লিটেরেল

+ +

স্ট্রিং লিটেরেল তৈরি হয় শূণ্য বা এর থেকে বেশি ক্যারেকটার ডবল-কোটেশন (") বা উদ্ধৃতি চিহ্ন বা single quotation (') চিহ্ন এর মধ্যে রাখলে। তবে double বা single যেই উদ্ধৃতি চিহ্ন-ই ব্যবহার করুন না কেন স্ট্রিং লিটেরেলের শুরুতে আর শেষে একই প্রকারের চিহ্ন ব্যবহার করতে হবে। নিচে কিছু স্ট্রিং লিটেরেলের উদাহরণ দেখুনঃ

+ +
    +
  • "foo"
    • +
  • 'bar'
    • +
  • "1234"
    • +
  • "one line \n another line"
    • +
  • "John's cat"
    • +
+ +

স্ট্রিং লিটেরেলে আপনি স্ট্রিং অবজেক্টের যেকোন ফাংশন কল করতে পারবেন - জাভাস্ক্রিপ্ট স্বয়ংক্রিয়ভাবে স্ট্রিং লিটেরেল কে অস্থায়ী অবজেক্টে কনভার্ট করে, এরপর মেথডটি কল করে, তারপর অস্থায়ী অবজেক্টটি ফেলে দেয়। আপনি String.length প্রোপার্টি ব্যবহার করতে পারেন স্ট্রিং লিটেরেলের ওপরঃ

+ +
"John's cat".length
+
+ +

স্ট্রিং অবজেক্ট ব্যবহারেরে বিশেষ কোন কারণ না থাকলে আপনার উচিত হবে স্ট্রিং লিটেরেল-ই ব্যবহার করা। বিস্তারিত দেখুনঃ String Object ।

+ +

স্ট্রিং এ বিশেষ অক্ষর ব্যবহার

+ +

গতানুগতিক অক্ষরের পাশাপাশি বিশেহ অক্ষ্র ও স্ট্রিং এ ব্যবহার করতে পারবেন, যেমনটা দেখানো হয়েছে উদাহরণেঃ

+ +
"one line \n another line"
+
+ +

নিচের টেবিলে জাভাস্ক্রিপ্টের বিশেষ অক্ষরগুলো যেগুলো স্ট্রিং এ ব্যবহার করতে পারবেন সেগুলো দেখানো হয়েছেঃ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
টেবিল ২.১ জাভাস্ক্রিপ্টের বিশেষ অক্ষর
অক্ষরঅর্থ
\bBackspace
\fForm feed
\nনতুন লাইন
\rCarriage return
\tTab
\vVertical tab
\'ঊর্ধকমা or single quote
\"Double quote
\\Backslash character (\).
\XXXLatin-1 এনকোডিং সহ অক্ষরটি 0 এবং 377 এর মধ্যে তিনটি অক্টাল সংখ্যা দ্বারা XXX নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, \251 হল কপিরাইট প্রতীকের অকটাল ক্রম।
\xXXLatin-1 এনকোডিং সহ অক্ষরটি 00 এবং FF এর মধ্যকার সংখ্যাগুলি দ্বারা XXX নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, \xA9 হল কপিরাইট প্রতীকের হেক্সাডেসিমেল ক্রম।
\uXXXXইউনিকোড অক্ষর চারটি হেক্সাডেসিমেল সংখ্যা দ্বারা XXXX নির্দিষ্ট করা হয়। উদাহরণস্বরূপ, \u00A9 হল কপিরাইট প্রতীকের ইউনিকোড ক্রম। {{anch("Unicode escape sequences")}} এ দেখুন.
+ +

অক্ষর এস্কেপ (escape) করা

+ +

যেই অক্ষরগুলো টেবিল ২.১ এ দেখানো হয়নি সেগুলোর সামনের ব্যাক-স্ল্যাশ অগ্রাহ্য করা হয়। কিন্তু এই ব্যবহার নিরুতসাহিত করা হয় এবং করাও উচিত নয়।

+ +

স্ট্রিং এর মধ্যে উদ্ধৃতি চিহ্ন দিতে পারেন এটির সামনে ব্যাক-স্ল্যাশ ব্যবহার করে। এটি-ই এসকেপ করা (উদ্ধৃতি চিহ্ন কে) হিসেবে পরিচিত। যেমনঃ

+ +
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
+console.log(quote);
+
+ +

এর ফলাফল হবে এমনঃ

+ +
He read "The Cremation of Sam McGee" by R.W. Service.
+
+ +

অবশ্য স্ট্রিং এ ব্যাক-স্ল্যাশ ব্যবহার করতে একেও এসকেপ করতে হবে! যেমন, স্ট্রিং এ c:\temp মান ব্যবহার করতে চাইলেঃ

+ +
var home = "c:\\temp";
+
+ +

লাইন-বিরতি এসকেপ করতে পারেন সেগুলোর আগে ব্যাক-স্ল্যাশ ব্যবহার করে। ব্যাক-স্ল্যাশ আর লাইন-বিরতি (কীবোর্ডের এন্টার চেপে লাইন বিরতি দেওয়া যায়) দুটোই স্ট্রিং এর মান থেকে সরিয়ে নেওয়া হবেঃ

+ +
var str = "this string \
+is broken \
+across multiple\
+lines."
+console.log(str);   // this string is broken across multiplelines.
+
+ +

যদিও জাভাস্ক্রিপ্টে "heredoc" সিন্ট্যাক্স  নেই, আপনি কাছাকাছি কিছু একটা পেতে পারেন লাইন-বিরতি এসকেপ ব্যবহার করে আর এসকেপ করা লাইনব্রেক প্রতি লাইনের শেষে দিয়েঃ

+ +
var poem =
+"Roses are red,\n\
+Violets are blue.\n\
+I'm schizophrenic,\n\
+And so am I."
+
+ +

ইউনিকোড

+ +

ইউনিকোড হচ্ছে বিশ্বব্যাপী স্বীকৃত ক্যারেকটার-কোডিং স্ট্যান্ডার্ড, কোন ভাষা (যেমনঃ বাংলা) লেখার জন্য ব্যবহৃত হয়। আমেরিকা, ইউরোপ, মধ্যপ্রাচ্য, আফ্রিকা, ভারত, এশিয়া, প্যাসিফিকা সব অঞ্চলের ভাষার-ই সাপোর্ট আছে ইউনিকোডে। শুধু তাই নয় ঐতিহাসিক পাণ্ডুলিপি আর টেকনিক্যাল সিম্বল দেওয়ার ও ব্যবস্থা আছে। পৃথিবীর বিভিন্ন ভাষায় লেখালেখির আদান-প্রদান, প্রসেস করা, উপ্সথাপন করা সবকিছুই ইউনিকোড দিয়ে করা যায় (যেমনটা আপনারা এখন এই লেখাটা বাংলায় পড়তে পারছেন ইউনিকোড এর জন্য-ই!)। এছাড়া সাধারণ গাণিতিক আর টেকনিকাল চিহ্ন-ও দেওয়া যায়। বহুভাষায় কম্পিউটিং করার যে আন্তর্জাতিক সমস্যা ছিল, ইউনিকোড তার সমাধান করেছে। অবশ্য নতুন কিছু ভাষা বা প্রাগৈতিহাসিক পাণ্ডুলিপির জন্য সাপোর্ট নাও পেতে পারেন।

+ +

সব এনকোডিং এর জন্যে-ই ইউনিকোড বর্ণমালা ব্যবহার করা যায়। ASCII (American Standard Code for Information Interchange) বর্ণমালার ওপর ভিত্তি করে ইউনিকোড মডেল করা হয়েছে। প্রত্যেকটি হরফের জন্য এটি একটি সংখ্যা আর নাম ব্যবহার করে। এই সংখ্যাটি'র বিট রিপ্রেজেন্টেশন ও ক্যারেক্টার এনকোডিং এ বলা থাকে। ১৬-বিটের সংখ্যাটি হেক্সাডেসিমালে প্রকাশ করা হয়, আর এর সামনে থাকে U অক্ষরটি। যেমন, U+0041 দিয়ে A বুঝানো হয়। আর এই অক্ষরটির অনন্য নাম হল LATIN CAPITAL LETTER A।

+ +

জাভাস্ক্রিপ্টের ১.৩ এর আগের ভার্সনে ইউনিকোড সাপোর্ট নেই।

+ +

ASCII এবং ISO এর সাথে ইউনিকোড কম্প্যাটিবিলিটি

+ +

ইউনিকোড আন্তর্জাতিক স্ট্যান্ডার্ড ISO/IEC 10646-1; 1993 দ্বারা সম্পূর্ণভাবে সমর্থিত, যেটা কিনা ISO 10646 এর অংশ।

+ +

বেশকিছু ইউনিকোড স্ট্যান্ডার্ড (UTF-8, UTF-16 এবং ISO UCS-2 সহ) ব্যবহার করা হয় ইউনিকোড কে বিট হিসেবে দেখানোর জন্য। (মানে ব্যবহারিক প্রয়োগের জন্য!)

+ +

ইউনিকোডের UTF-8 এনকোডিং ASCII বর্ণমালার সাথে সমর্থিত আর অনেক প্রোগ্রামেই একে ব্যবহার করা হয়। প্রথম ১২৮ টি ইউনিকোড অক্ষর দিয়ে ASCII অক্ষরগুলোকে প্রকাশ করা হয়, আর এগুলোর বাইট-মান ও একই (ASCII তে যেই মান ছিল) রাখা হয়েছে। U+0020 থেকে শুরু করে U+007E পর্যন্ত ইউনিকোড অক্ষরগুলো 0x20 থেকে  0x7E পর্যন্ত ASCII অক্ষরগুলোকে নির্দেশ করে। ASCII এর সাথে পার্থক্য হল ASCII ল্যাটিন বর্ণমালা সমর্থন করে (আর ৭ বিটের ক্যারেক্টার সেট দিয়ে তৈরি), যেখানে UTF-8 ১ থেকে ৪ টি অক্টেট ("অক্টেট" মানে হল ৮ বিট, বা ১ বাইট) দিয়ে প্রতিটি অক্ষর নির্দেশ করে। তাই, কয়েক মিলিয়ন অক্ষর UTF-8 দিয়ে দেখানো সম্ভব। আরো একটি বিকল্প এনকোডিং স্ট্যান্ডার্ড হল UTF-16 যেখানে প্রতিটি অক্ষর এর জন্য ২টি করে অক্টেট ব্যবহার করা হয়। এসকেপ সিকোয়েন্স ব্যবহার করে UTF-16 দিয়ে ইউনিকোড রেঞ্জে যত অক্ষর আছে সবগুলো দেখানো যায়, ৪টি অক্টেট ব্যবহার করে। ISO UCS-2 (Universal Character Set) দু'টি অক্টেট ব্যবহার করে।

+ +

UTF-8/ইউনিকোডের জন্য জাভাস্ক্রিপ্ট আর নেভিগেটরের সাপোর্ট থাকার ফলাফল স্বরূপ আপনি ল্যাটিন নয়-এমন, আন্তর্জাতিক আর এলাকাভিত্তিক, আপনার নিজের ভাষার বর্ণমালা ব্যবহার করতে পারছেন, আরো পারছেন বিশেষ সব টেকনিকাল হরফ ব্যবহার করতে। বহুভাষায় ভাব প্রকাশ সমর্থন করার জন্য ইউনিকোড একটি স্ট্যান্ডার্ড পদ্ধতি। যেহেতু ইউনিকোডের UTF-8 এনকোডিং ASCII সমর্থন করে, প্রোগ্রামগুলো ASCII বর্ণমালাও ব্যবহার করতে পারে ইউনিকোডের পাশাপাশি, আর ASCII নয় এমন বর্ণমালা (যেমন, বাংলা!) ও ব্যবহার করতে পারেন জাভাস্ক্রিপ্টের কমেন্টে, স্ট্রিং লিটেরেলে, ভ্যারিয়েবলের আইডেন্টিফায়ারে, রেগুলার এক্সপ্রেশনে।

+ +

ইউনিকোড এসকেপ সিকোয়েন্স

+ +

আপনি স্ট্রিং লিটেরেল, রেগুলার এক্সপ্রেশন আর ভ্যারিয়েবলের আইডেন্টিফায়ারে ইউনিকোড এসকেপ সিকোয়েন্স ব্যবহার করতে পারেন। এসকেপ সিকোয়েন্সে ৬টি ASCII অক্ষর থাকেঃ \u আর ৪-ডিজিটের হেক্সাডেসিমেল সংখ্যা। যেমনঃ \u00A9 দিয়ে কপিরাইট চিহ্নটিকে প্রকাশ করা হয়। আর বুঝতেই পারছেন, প্রতিটি এসকেপ সিকোয়েন্স দিয়ে ১টি মাত্র অক্ষর প্রকাশ করা হয়।

+ +

নিচের কোডে দেখিয়েছি কিভাবে কপিরাইট চিহ্ন আর "Netscape Communications" স্ট্রিংটি তৈরি করা হয়েছেঃ

+ +
var x = "\u00A9 Netscape Communications";
+ +

নিচের সারণিতে প্রায়-ই ব্যবহার করা হয় এমন কিছু বিশেষ অক্ষর আর তাদের ইউনিকোড ভ্যালু দেওয়া হলঃ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
সারণী ২.২ বিশেষ অক্ষরের ইউনিকোড মান
প্রকৃতিইউনিকোড মাননামফর্ম্যাট
White space values\u0009Tab<TAB>
\u000BVertical Tab<VT>
\u000CForm Feed<FF>
\u0020Space<SP>
Line terminator values\u000ALine Feed<LF>
\u000DCarriage Return<CR>
Additional Unicode escape sequence values\u0008Backspace<BS>
\u0009Horizontal Tab<HT>
\u0022Double Quote"
\u0027Single Quote'
\u005CBackslash\
+ +

জাভাস্ক্রিপ্টে ব্যবহৃত এসকেপ সিকোয়েন্স আর জাভাতে এর ব্যবহারের মাঝে পার্থক্য আছে। জাভাস্ক্রিপ্টে কখনোই এস্কেপ সিকোয়েন্স কে বিশেষ কোন অক্ষর হিসেবে ধরা হয় না প্রথমে। যেমন, কোন স্ট্রিং এর ভেতর লাইন-শেষ-করার-জন্য কোন এসকেপ সিকোয়েন্স ব্যবহার করলে সেটি লাইন বিরতি দেয় না, যতক্ষণ না ফাংশন একে ব্যবহার করছে। জাভাস্ক্রিপ্ট কমেন্টে ব্যবহার করা যেকোন এসকেপ সিকোয়েন্স উপেক্ষা করে। যদি কোন এসকেপ সিকোয়েন্স এক-লাইনের কমেন্টে ব্যবহার করা হয়, জাভা একে ইউনিকোড অক্ষর হিসেবে নেয়। স্ট্রিং লিটেরেলের ক্ষেত্রে জাভা কম্পাইলার প্রথমেই এসকেপ সিকোয়েন্সকে ইন্টারপ্রেট করে। যেমন, লাইন-বিরতি এস্কেপ অক্ষর (যেমন \u000A) যদি জাভায় ব্যবহার করেন, স্ট্রিং লিটেরেল টি ঐখানেই শেষ হয়ে যাবে। ফলস্বরূপ ত্রুটি তৈরি হবে কারণ জাভার স্ট্রিং লিটেরেলে লাইন-বিরতি চিহ্ন ব্যবহার করা যায় না। লাইন ফিড দেওয়ার জন্য জাভাতে আপনাকে \n ব্যবহার করতে হবে। জাভাস্ক্রিপ্টে এই \n এর কাজ এসকেপ সিকোয়েন্স দিয়েই করতে পারবেন।

+ +

জাভাস্ক্রিপ্ট ফাইলে ইউনিকোড অক্ষর

+ +

Gecko এর পুরোনো ভার্সন ধরে নিত XUL যেই জাভাস্ক্রিপ্ট ফাইল লোড করে, সেগুলো ল্যাটিন-১ ক্যারেক্টার এনকোডিং এ আছে।  Gecko ১.৮ আর পরের ভার্সনগুলোতে ফাইলটা যেই এনকোডিং এ থাকবে, সেই এনকোডিং ই ব্যবহার করা হয়। XUL জাভাস্ক্রিপ্টে আন্তর্জাতিক অক্ষর দেখুন আরো তথ্যের জন্য।

+ +

ইউনিকোড ব্যবহার করে অক্ষর দেখানো

+ +

বিভিন্ন ভাষার অক্ষর কিংবা টেকনিকাল চিহ্ন দেখানোর জন্য ইউনিকোড ব্যবহার করুন। অক্ষরগুলো ঠিকমত দেখানোর জন্য ক্লায়েন্ট (যেমন মজিলা ফায়ারফক্স বা নেটস্কেপ) এর ইউনিকোড সমর্থন করা প্রয়োজন। এছাড়াও, ক্লায়েন্টের কাছে উপযুক্ত ইউনিকোড ফন্ট থাকাটাও দরকার, আর ক্লায়েন্ট যেই প্ল্যাটফর্মে আছে সেখানেও ইউনিকোড সমর্থন করতে হবে। প্রায়ই দেখা যায় ইউনিকোড ফন্ট যেটি ব্যবহার করা হয়েছে সেটি সব ইউনিকোড অক্ষর দেখায় না। কিছু প্ল্যাটফর্ম, যেমন উইন্ডোজ ৯৫ এ ইউনিকোডের আংশিক সমর্থন রয়েছে।

+ +

ASCII নয় এমন অক্ষর ইনপুট নেওয়ার জন্য ক্লায়েন্টকে ইউনিকোড হিসেবে ইনপুট নিতে হবে। শুধুমাত্র স্ট্যান্ডার্ড কীবোর্ড ব্যবহার করেই ইউনিকোড-সমর্থিত অতিরিক্ত অক্ষরগুলো ইনপুট নেওয়া সম্ভব নয়। মাঝে মাঝে, ইউনিকোড ইনপুট নেওয়ার একমাত্র উপায় হয়ে দাড়ায় ইউনিকোড এসকেপ সিকোয়েন্স ব্যবহার করে।

+ +

ইউনিকোড নিয়ে আরো তথ্যের জন্য দেখুন Unicode হোমপেইজ আর ইউনিকোড স্ট্যান্ডার্ড, ২.০ সংস্করণ, প্রকাশকঃ Addison-Wesley, 1996।

+ +

তথ্যাদি

+ + diff --git a/files/bn/web/javascript/guide/index.html b/files/bn/web/javascript/guide/index.html new file mode 100644 index 0000000000..856da74c7a --- /dev/null +++ b/files/bn/web/javascript/guide/index.html @@ -0,0 +1,123 @@ +--- +title: জাভাস্ক্রিপ্ট গাইড +slug: Web/JavaScript/Guide +tags: + - JavaScript + - গাইড + - চ্যাপ্টার + - জাভাস্ক্রিপ্ট + - ভুমিকা +translation_of: Web/JavaScript/Guide +--- +
{{jsSidebar("জাভাস্ক্রিপ্ট গাইড")}}
+ +

এই জাভাস্ক্রিপ্ট গাইডটি আপনাকে দেখাবে যে কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করতে হয় এবং এই ল্যাঙ্গুয়েজ টি সম্পর্কে একটি ওভারভিউ প্রদান করবে। আপনি যদি আরও বেশি জানতে আগ্রহী হয়ে থাকেন, তাহলে দয়া করে জাভাস্ক্রিপ্ট রেফেরেন্স লিঙ্কটিতে প্রবেশ করুন।

+ + + + + + + + + +

{{Next("Web/JavaScript/Guide/Introduction")}}

diff --git a/files/bn/web/javascript/index.html b/files/bn/web/javascript/index.html new file mode 100644 index 0000000000..11f2a43a50 --- /dev/null +++ b/files/bn/web/javascript/index.html @@ -0,0 +1,130 @@ +--- +title: জাভাস্ক্রিপ্ট +slug: Web/JavaScript +tags: + - জাভা স্ক্রিপ্ট + - জাভাস্ক্রিপ্ট +translation_of: Web/JavaScript +--- +
{{JsSidebar}}
+ +

JavaScript (সংক্ষেপে JS) একটি lightweight ইন্টারপ্রেটেড বা যথাসময়ে কম্পাইল করা প্রোগ্রামিং ভাষা যাতে রয়েছে {{Glossary("First-class Function", "first-class functions")}}। যদিও এটি ওয়েব পেজের স্ক্রিপ্টিং ভাষা হিসেবে বেশি পরিচিত, এছাড়া ব্রাউজার ছাড়াও অন্যান্য জায়গায় ব্যবহার করা হয়, যেমন node.js and Apache CouchDB. JavaScript হল {{Glossary("Prototype-based programming", "prototype-based")}}, multi-paradigm, dynamic scripting language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. JavaScript সম্পর্কে আরো পড়ুন.

+ +

সাইটের এই সেকশনটি JavaScript ভাষার জন্য নিবেদিত, এবং ওয়েব পেইজ অথবা হোস্ট এনভাইরনমেন্টের সাথে সম্পৃক্ত নয়। {{Glossary("API","APIs")}} সম্পর্কে জানতে Web APIs এবং DOM দেখুন।

+ +

JavaScript  স্ট্যান্ডার্ড এর নাম ECMAScript। ২০১২ সাল পর্যন্ত পাওয়া তথ্য অনুযায়ী সব নতুন ব্রাউজার ECMAScript 5.1 সমর্থন করে। পুরোনো ব্রাউজারগুলো অন্তত ECMAScript 3 সমর্থন করে। ২০১৫ সালের ১৭ জুন ECMA International তার ষষ্ঠ প্রধান সংস্করণ প্রকাশ করে, আনুষ্ঠানিক ভাবে যা ECMAScript 2015 নামে অভিহিত, এবং সাধারন ভাবে এটি ECMAScript 6 বা ES6 নামে পরিচিত। তখন থেকেই বাৎসরিক প্রকাশ চক্র অনুযায়ী ECMAScript -এর মান প্রকাশিত হচ্ছে। এই ডকুমেন্টেশনটি সর্বশেষ খসড়া সংস্করণ, যা ECMAScript 2018 কে বোঝায়।

+ +

 JavaScript এর সাথে  Java programming language কে গুলিয়ে ফেলবেন না। "Java" এবং "JavaScript" উভয় প্রোগ্রামিং ভাষাই Oracle কোম্পানির ট্রেডমার্ক বা ট্রেডমার্ক হিসেবে নিবন্ধিত যুক্তরাষ্ট্র এবং অন্যান্য দেশে। যাইহোক, এই দুই প্রোগ্রামিং ভাষার বাক্য গঠন প্রণালী (syntax), শব্দার্থবিদ্যা(semantics), এবং ব্যবহার একেবারেই আলাদা।

+ +
+
+

টিউটোরিয়াল

+ +

জাভাস্ক্রিপ্ট দিয়ে কিভাবে প্রোগ্রাম করা হয় সেটা শিখুন টিউটোরিয়াল এবং নির্দেশিকার মাধ্যমে।

+ +

যারা একেবারেই নতুন

+ +

আপনি যদি জাভাস্ক্রিপ্ট শিখতে চান কিন্তু আপনার জাভাস্ক্রিপ্ট বা অন্য কোন প্রোগ্রামিং সম্পকে কোন পূর্ব অভিজ্ঞতা নেই তাহলে আমাদের জাভাস্ক্রিপ্ট শিক্ষাক্ষেত্রের দিকে এগিয়ে যান। নিম্নে সম্পূর্ণ মডিউলগুলো রয়েছে।

+ +

জাভাস্ক্রিপ্টের প্রথম ধাপ

+ +

জাভাস্ক্রিপ্ট এর বৈশিষ্ট “ভেরিয়েবল, স্ট্রিং, নাম্বারস, এবং এরেইস” এগুলোর আলোচনার সাথে  কিছু মৌলিক প্রশ্নের উত্তর দিন যেমন “জাভাস্ক্রিপ্ট কি?”, “ এটা দেখতে কেমন?”, এবং “এটা কি করে?”

+ +

জাভাস্ক্রিপ্ট নির্মান অংশ

+ +

জাভাস্ক্রিপ্ট এর মৌলিক বৈশিষ্ট এর সাথে সাধারণভাবে সম্মুক্ষীন হওয়া বিভিন্ন ধরনের কোড ব্লকের দিকে আমাদের দৃষ্টি আকর্ষন করা যেমন conditional statements, loops, functions, এবং events. 

+ +

জাভাস্ক্রিপ্ট অবজেক্ট এর পরিচিতি 

+ +

 জাভাস্ক্রিপ্ট এর অবজেক্ট ওরিন্টেড প্রকৃতিটা বুঝা গুরুত্বপূর্ণ  যদি আপনি ভাষার জ্ঞান নিয়ে সামনে এগিয়ে যেতে চান   এবং  আধিক কার্যকর কোড লিখতে চান, এখানে আমাদের দেয়া মডিউল আপনাকে সহযোগিতা করবে।

+ +

জাভাস্ক্রিপ্ট নির্দেশনা

+ +
+
জাভাস্কিপ্ট নির্দেশনা
+
জাভাস্ক্রিপ্ট ভাষা এর একটি বিস্তারিত নির্দেশনার উদ্দেশ্য যাদের জাভাস্ক্রিপ্ট বা অন্য কোনো প্রোগ্রামিং ভাষা সম্পর্কে পূর্বপর্তী অভিজ্ঞতা আছে ।
+
+ +

মধ্যবর্তী

+ +
+
ক্লায়েন্ট সাইড ওয়েব APIs
+
+ +

ওয়েব সাইট বা এপ্লিকেশনগুলির জন্য ক্লায়েন্ট সাইড জাভাস্ক্রিপ্ট লেখার সময় API গুলি ব্যবহার শুরু করার আগে খুব বেশী দুরে যাবেন না--ব্রাউজার ও ওপারের্টং সিস্টেম চলন্ত অবস্থায় ইন্টারফেইসগুলি বিভিন্ন দিক সুচারু রূপে পরিচালনা করার জন্য বা এমনকি অন্য ওয়েব সাইট বা সেবাগুলি থেকে আসা ডাটা। এই মডিউলে আমরা এপিআই কি ? এবং কিভাবে খুবই প্রচলিত কিছু এপিআই  আপনার ডেভেলপমেন্টের কাজে ব্যবহার করতে হয় সেই সম্পর্কে জানবো।

+ +
+
+
+
জাভাস্ক্রিপ্ট এর  পুনঃউপস্থাপন
+
যারা মনে করে , তারা জাভাস্ক্রিপ্ট সম্পর্কে জানে, তাদের জন্য একটি সংক্ষিপ্ত বিবরণ।
+
+ +
+
জাভাস্ক্রিপ্ট এর ডাটার গঠনশৈলী
+
জাভাস্ক্রিপ্ট এর ডাটার গঠনশৈলী সম্পর্কে সংক্ষিপ্ত বিবরন।
+
সমতুল্যতা এবং অভিন্নতা 
+
+ +

জাভাস্ক্রিপ্ট তিন ধরনের মান সরবরাহ করে- তুলনার ক্ষেত্রে: কঠোর সমতার ক্ষেত্রে === এবং শিথিল সমতার ক্ষেত্রে == ।

+ +
+
 Closures
+
closure হচ্ছে একটি ফাংশন এবং lexical environment এর সমাহার যেটি পূর্বেই ঘোষনা করা হয়েছে।
+
+ +

এডভান্স

+ +
+
ইনহেরিটেন্স এবং প্রোটোটাইপ চেইন
+
ব্যাপকভাবে ভুল বুঝা বুঝি এবং অবহেলা করা হচ্ছে প্রোটোটাইপ ইনহেরিটেন্স ব্যাখ্য ।
+
কঠোর মুড
+
কঠোর মুড( Strict mode ) এর সঙ্গা হচ্ছে  যে আপনি এটি আরম্ভ করার পূর্বে কোনো ভেরিয়েবল ব্যবহার করতে পারবেন না। এটা ECMAScript 5 একটি সীমাবদ্ধতা, দ্রুত কর্মক্ষমতা এবং সহজ ডিবাগিংএর জন্য। 
+
জাভাস্ক্রিপ্টের অ্যারে টাইপ
+
জাভাস্ক্রিপ্টের অ্যারে নতুন বাইনারি তথ্য অ্যাক্সেসের জন্য একটি প্রক্রিয়া প্রদান  করে।
+
মেমরি ম্যানেজমেন্ট
+
মেমরীর জীবনচক্র এবং জাভাস্ক্রিপ্টের মধ্যেকার আবর্জনা সংগ্রহ।
+
+
+
+ + + +
+

Reference

+ +

ব্রাউজ করুন.সম্পূর্ণ  জেএস- রেফারেন্স ডকুমেন্টেশন ।

+ +
+
Standard objects
+
Get to know standard built-in objects Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String, Map, Set, WeakMap, WeakSet, and others.
+
Expressions & operators
+
Learn more about the behavior of JavaScript's operators instanceof, typeof, new, this, and more.
+
Statements & declarations
+
Learn how do-while, for-in, for-of, try-catch, let, var, const, if-else, switch, and more JavaScript statements and keywords work.
+
Functions
+
Learn how to work with JS functions to develop your applications.
+
+ +

Tools & resources

+ +

Helpful tools while writing and debugging your JavaScript code.

+ +
+
Firefox Developer Tools
+
Scratchpad, Web Console, JavaScript Profiler, Debugger, and more.
+
Firebug
+
Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
+
JavaScript Shells
+
A JavaScript shell allows you to quickly test snippets of JavaScript code.
+
TogetherJS
+
+

Collaboration made easy.

+
+
Stack Overflow
+
Stack Overflow questions tagged with "JavaScript".
+
JavaScript versions and release notes
+
Browse JavaScript's feature history and implementation status.
+
+
+
diff --git a/files/bn/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/bn/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..0db75f2c69 --- /dev/null +++ b/files/bn/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -0,0 +1,177 @@ +--- +title: ইনহেরিটেন্স এবং প্রোটোটাইপ-চেইন +slug: Web/JavaScript/Inheritance_and_the_prototype_chain +tags: + - Guide + - Inheritence + - JavaScript + - NeedsContent + - OOP + - অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং + - ইনহেরিটেন্স + - গাইড + - জাভাস্ক্রিপ্ট +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +
{{jsSidebar("Advanced")}}
+ +

যেসব ডেভেলপার আগে ক্লাস-ভিত্তিক প্রোগ্রামিং ল্যাংগুয়েজে (যেমন সি++ বা জাভা) কোড করছেন, তারা জাভাস্ক্রিপ্টে কোড করতে গিয়ে একটু বিভ্রান্ত হবেন, কেননা জাভাস্ক্রিপ্ট একটি ডায়নামিক ল্যাংগুয়েজ আর এতে কোন class ইমপ্লিমেন্টেশন নেই ( যদিও class নামে একটি কীওয়ার্ড জাভাস্ক্রিপ্ট সংরক্ষণ করে রেখেছে - তাই এই নামে কোন ভ্যারিয়েবল তৈরি করতে পারবেন না )।

+ +

জাভাস্ক্রিপ্টে ইনহেরিটেন্স বিষয়ক একটি মাত্র কন্সট্রাক্ট আছেঃ অবজেক্ট। সব অবজেক্ট এরই আরেকটা অবজেক্ট এর সাথে অভ্যন্তরীণ লিঙ্ক থাকে যাকে তার প্রটোটাইপ বলে। আবার এই প্রোটাটাইপ অবজেক্টের ও নিজস্ব একটি প্রটোটাইপ থাকে। এভাবে চলতেই থাকে, যতক্ষণ না আমরা null হিসেবে কোন অবজেক্টের প্রটোটাইপ পাই। null এর কোন প্রটোটাইপ থাকে না, তাই যখন null পাব তখন বুঝতে হবে প্রটোটাইপ চেইনের শেষপ্রান্তে এসে গেছি।

+ +

প্রটোটাইপ মডেল কে অনেকে জাভাস্ক্রিপ্টের দুর্বলতা বললেও আসলে প্রটোটাইপ-ভিত্তিক ইনহেরিটেন্স মডেল সি++/জাভা ভিত্তিক ক্লাসিকাল মডেলের থেকে অনেক শক্তিশালী। যেমন, প্রটোটাইপ মডেল কে ভিত্তি করে আমরা সহজেই ক্ল্যাসিকাল মডেল তৈরি করতে পারি, কিন্তু ক্লাসিকাল মডেলের ওপর ভিত্তি করে চাইলেই প্রটোটাইপ ভিত্তিক মডেল তৈরি করা সম্ভব না।

+ +

প্রটোটাইপ-চেইন ভিত্তিক ইনহেরিটেন্স

+ +

প্রোপার্টি ইনহেরিট করা

+ +

জাভাস্ক্রিপ্টে অবজেক্ট কে আমরা বিভিন্ন প্রোপার্টির "ব্যাগ" (থলে) হিসেবে কল্পনা করতে পারিঃ এই ব্যাগে যেকোন সময় যেকোন প্রোপার্টি ঢুকানো যায়, ব্যাগ থেকে ফেলেও দেওয়া যায় (যে কারণে আমরা জাভাস্ক্রিপ্টকে ডায়নামিক বলি) । প্রতিটা অবজেক্টের সাথে একটা বিশেষ অবজেক্টের লিংক থাকে, এই বিশেষ অবজেক্ট টাকে আমরা মূল অবজেক্টটার প্রটোটাইপ বলি। আমরা যখন কোন অবজেক্টের কোন প্রোপার্টি কে ব্যবহার করতে চাই, তখন যা ঘটেঃ

+ +
// ধরে নেই, আমার o নামের একটা অবজেক্ট আছে যেটার প্রোটোটাইপ চেইন এমনঃ
+// {a:1, b:2} ---> {b:3, c:4} ---> null
+// মানে হল, o অবজেক্ট হচ্ছে {a:1, b:2}, যেটার প্রোটোটাইপ হচ্ছে {b:3, c:4} ইনহেরিটেন্স হিসেবে চিন্তা করলে,
+// {a:1, b:2} অবজেক্ট টা {b:3, c:4} অবজেক্ট থেকে ইনহেরিট করা হয়েছে। {b:3, c:4} এর কোন প্রোটোটাইপ নাই, যেকারণে null দেখানো হয়েছে।
+// 'a' আর 'b' এই দুইটা কেবল o অবজেক্টের নিজস্ব প্রোপার্টি।
+
+// এই উদাহরণে, someObject.[[Prototype]] দিয়ে আমরা someObject অবজেক্টের প্রোটোটাইপ বুঝিয়েছি।
+// এইটা শুধুই উদাহরণের জন্য (ECMAScript স্ট্যান্ডার্ড অনুযায়ী) আর আসল কোডে এরকম কিছু লেখা যাবে না!
+
+console.log(o.a); // 1
+// o অবজেক্টের কি 'a' নামে কোন প্রোপার্টী আছে? হ্যাঁ, আর এর মান হল 1
+
+console.log(o.b); // 2
+// o অবজেক্টের কি 'b' নামে কোন প্রোপার্টী আছে? হ্যাঁ, আর এর মান হল 2
+// o অবজেক্টের প্রোটোটাইপেরও কিন্তু 'b' প্রোপার্টী ছিল, কিন্তু এটি দেখা যাবে না। একে বলে "property shadowing"
+
+console.log(o.c); // 4
+// o অবজেক্টের কি 'c' নামে কোন প্রোপার্টী আছে? নাই, তাহলে এর প্রোটোটাইপে দেখতে হবে এই নামে প্রোপার্টি আছে কিনা।
+// o.[[Prototype]] এ কি 'c' প্রোপার্টি আছে? ? হ্যাঁ, আর এর মান হল 4
+
+console.log(o.d); // undefined
+// o অবজেক্টের কি 'd' নামে কোন প্রোপার্টী আছে? নাই, তাহলে এর প্রোটোটাইপে দেখতে হবে এই নামে প্রোপার্টি আছে কিনা।
+// o.[[Prototype]] অবজেক্টের কি 'd' নামে কোন প্রোপার্টী আছে? নাই, তাহলে এর প্রোটোটাইপে দেখতে হবে এই নামে প্রোপার্টি আছে কিনা।
+// o.[[Prototype]].[[Prototype]] এ null পেয়েছি, তারমানে আর খোজার কিছু নাই। undefined রিটার্ন করতে হবে।
+
+ +

কোন অবজেক্টের প্রোপার্টি সেট করে দিলে সেটা সেই অবজেক্টের নিজস্ব প্রোপার্টি হিসেবে কাজ করে। একমাত্র ব্যতিক্রম হলঃ getter অথবা setter দিয়ে যখন ইনহেরিটেড প্রোপার্টি নিয়ে কাজ করা হয়।

+ +

"মেথড" ইনহেরিট করা

+ +

ক্লাস-ভিত্তিক প্রোগ্রামিং ভাষাতে যেভাবে "মেথড" বা ফাংশন এর ধারণা প্রচলিত আছে, জাভাস্ক্রিপ্টে মেথডের ধারণা টা ঠিক সেভাবে নয়। জাভাস্ক্রিপ্টে, যেকোন ফাংশন সাধারণ প্রোপার্টির মতই অবজেক্টে যোগ করা যায়। ইনহেরিট করা ফাংশন অবজেক্টের বাদবাকি প্রোপার্টির মতই স্বাভাবিকভাবে কাজ করবে। উপরের উদাহরণে দেখানো property shadowing এখানেও কাজ করবে (এক্ষেত্রে একে বলা হবে method overriding বা ফাংশন ওভাররাইডিং)

+ +

যখন ইনহেরিট-হওয়া কোন ফাংশন একজিকিউট হয়, তখন this এর মান হিসেবে ইনহেরিট-হওয়া অবজেক্ট টা থাকে, প্রোটোটাইপ অবজেক্ট টা না যেখানে ফাংশনটা নিজস্ব প্রোপার্টি হিসেবে দেওয়া হয়েছিল।

+ +
var o = {
+  a: 2,
+  m: function(b){
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// এখানে o.m কল করার সময়, 'this' পয়েন্ট করে আছে o কে।
+
+var p = Object.create(o);
+// p অবজেক্ট টা o থেকে ইনহেরিট করা হয়েছে
+
+p.a = 12; // 'a' নামে p অবজেক্টে নিজস্ব প্রোপার্টি তৈরি হল
+console.log(p.m()); // 13
+// এখানে p.m কল করার সময়, 'this' পয়েন্ট করে আছে p কে।
+// তাই যখন o অবজেক্টের m ফাংশনটা p ইনহেরিট করল, 'this.a' এর মানে দাঁড়ালো p.a, 'a' নামের p এর নিজস্ব প্রোপার্টি।
+
+ +

অবজেক্ট তৈরি করার বিভিন্ন উপায় এবং ফলাফল হিসেবে প্রোটোটাইপ চেইন

+ +

সিন্ট্যাক্স কন্সট্রাক্টস ব্যবহার করে অবজেক্ট তৈরি করা

+ +
var o = {a: 1};
+
+// নতুন তৈরি করা o অবজেক্টের প্রটোটাইপ হচ্ছে Object.prototype
+// o এর 'hasOwnProperty' নামের কোন নিজস্ব প্রোপার্টি নেই।
+// hasOwnProperty হচ্ছে Object.prototype এর একটি নিজস্ব প্রোপার্টি। তাই o, Object.prototype থেকে hasOwnProperty ইনহেরিট করেছে।
+// Object.prototype এর প্রোটোটাইপ হচ্ছে null
+// o ---> Object.prototype ---> null
+
+var a = ["yo", "whadup", "?"];
+
+// Arrays inherit from Array.prototype (which has methods like indexOf, forEach, etc.)
+// The prototype chain looks like:
+// a ---> Array.prototype ---> Object.prototype ---> null
+
+function f(){
+  return 2;
+}
+
+// Functions inherit from Function.prototype (which has methods like call, bind, etc.)
+// f ---> Function.prototype ---> Object.prototype ---> null
+
+ +

কন্সট্রাক্টর এর সাহায্যে

+ +

জাভাস্ক্রিপ্টে "কন্সট্রাক্টর", "শুধুই" সাধারণ যেকোন ফাংশন যাকে কিনা new অপারেটর দিয়ে কল করা হয়।

+ +
function Graph() {
+  this.vertexes = [];
+  this.edges = [];
+}
+
+Graph.prototype = {
+  addVertex: function(v){
+    this.vertexes.push(v);
+  }
+};
+
+var g = new Graph();
+// g is an object with own properties 'vertexes' and 'edges'.
+// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed.
+
+ +

Object.create দিয়ে

+ +

ECMAScript 5 নতুন একটি মেথড নিয়ে এসেছেঃ Object.create। এই মেথড কল করলে নতুন একটি অবজেক্ট তৈরি হয় যার প্রোটোটাইপ হল মেথডটির প্রথম প্যারামিটারঃ

+ +
var a = {a: 1};
+// a ---> Object.prototype ---> null
+
+var b = Object.create(a);
+// b ---> a ---> Object.prototype ---> null
+console.log(b.a); // 1 (inherited)
+
+var c = Object.create(b);
+// c ---> b ---> a ---> Object.prototype ---> null
+
+var d = Object.create(null);
+// d ---> null
+console.log(d.hasOwnProperty); // undefined, because d doesn't inherit from Object.prototype
+
+ +
+

পারদর্শীতা

+ +

কোন অবজেক্টে কোন প্রোপার্টি আছে কিনা সেটা জানার জন্য, অবজেক্টের পুরো প্রটোটাইপ-চেইন খুঁজে দেখতে হয়। কোডের পার্ফরমেন্সে এটা ভালই বাজে প্রভাব ফেলে। যেসব কোডের পারফরমেন্স খুব ভাল হওয়া দরকার, সেখানে এই ইস্যু প্রভাব ফেলতে পারে। অবজেক্টে কোন প্রোপার্টি খুঁজে না পেলে পুরো প্রোটোটাইপ চেইনের কোথাও প্রোপার্টি টা আছে কিনা খুঁজা হয়।

+ +

এছাড়াও, অবজেক্টের প্রোপার্টি গুলো ঘুরে দেখার সময় (iterate করার সময়) প্রোটোটাইপ-চেইনের প্রত্যেকটা প্রোপার্টি খুঁজে দেখা (enumerate করা) হবে।

+ +

অবজেক্টে কোন প্রোপার্টি শুধুমাত্র নিজস্ব প্রোপার্টি হিসেবে আছে কিনা (প্রোটোটাইপ চেইনের অন্য কোথাও নয়) hasOwnProperty মেথড ব্যবহার উচিত। সব অবজেক্ট এই মেথডটাকে Object.prototype থেকে ইনহেরিট করে।

+ +

জাভাস্ক্রিপ্টে hasOwnProperty-ই একমাত্র ফাংশন যা প্রোপার্টি নিয়ে কাজ করে এবং পুরো প্রোটোটাইপ চেইন ঘুরে (traverse) না।

+ + +
খেয়াল করুনঃ কোন প্রোপার্টি undefined কিনা এই চেক করাই যথেষ্ট নয়।  হতে পারে প্রোপার্টি টি বহাল তবিয়তেই আছে, কেবল এর মান undefined দেওয়া হয়েছে।
+ +
+

বদ অভ্যাসঃ নেটিভ প্রোটোটাইপ এক্সটেন্ড করা

+ +

একটা বাজে ব্যাপার প্রায়ই করা হয় তা হল Object.prototype অথবা অন্য কোন বিল্ট-ইন প্রটোটাইপ এক্সটেন্ড করা।

+ +

এই পদ্ধতিকে বলা হয় monkey patching যা encapsulation এর সর্বনাশ ছাড়া আর কিছুই নয়। Prototype.js এর মত কিছু জনপ্রিয় ফ্রেমওয়ার্কে এর ব্যবহার দেখা গেলেও, স্ট্যান্ডার্ড-নয়, এমন ফিচার দিয়ে বিল্ট-ইন টাইপগুলোর বোঝা বাড়ানোর কোন মানে হয় না।

+ +

বিল্ট-ইন টাইপ এক্সটেন্ড করার একমাত্র যৌক্তিক কারণ হতে পারে জাভাস্ক্রিপ্টের নতুন ফিচার গুলো পুরনো ইঞ্জিনে দেওয়া; যেমন Array.forEach, ইত্যাদি।

+
+ +
+

পরিশেষে

+ +

প্রটোটাইপ ইনহেরিটেন্স মডেল এর ভিত্তি করে জটিল জটিল কোড লেখার আগে একে ভালভাবে বুঝা উচিত। এছাড়াও, পারফরমেন্স জনিত সমস্যা থেকে দূরে থাকার জন্য লম্বা প্রটোটাইপ চেইন পরিহার করতে হবে আর যেখানে সম্ভব প্রটোটাইপ চেইন ভেঙ্গে ছোট করতে হবে। সবশেষে, জাভাস্ক্রিপ্টের নতুন ফিচার যাতে সব ইঞ্জিনেই চলে, শুধুমাত্র সেক্ষেত্রে নেটিভ প্রোটোটাইপ এক্সটেন্ড করা যাবে, এছাড়া এর ব্যবহার সর্বক্ষেত্রে নিরুৎসাহিত করা হয়।

+
+
diff --git a/files/bn/web/javascript/reference/global_objects/index.html b/files/bn/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..91433921eb --- /dev/null +++ b/files/bn/web/javascript/reference/global_objects/index.html @@ -0,0 +1,177 @@ +--- +title: Global Objects +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects +--- +
{{jsSidebar("Objects")}}
+ +

This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties.

+ +
+

The term "global objects" (or standard built-in objects) here is not to be confused with the global object. Here, global objects refer to objects in the global scope (but only if ECMAScript 5 strict mode is not used; in that case it returns undefined). The global object itself can be accessed using the {{jsxref("Operators/this", "this")}} operator in the global scope. In fact, the global scope consists of the properties of the global object, including inherited properties, if any.

+ +

Other objects in the global scope are either created by the user script or provided by the host application. The host objects available in browser contexts are documented in the API reference. For more information about the distinction between the DOM and core JavaScript, see JavaScript technologies overview.

+ +

Standard objects (by category)

+ +

Value properties

+ +

These global properties return a simple value; they have no properties or methods.

+ +
    +
  • {{jsxref("Infinity")}}
    • +
  • {{jsxref("NaN")}}
    • +
  • {{jsxref("undefined")}}
    • +
  • {{jsxref("null")}} literal
    • +
+ +

Function properties

+ +

These global functions—functions which are called globally rather than on an object—directly return their results to the caller.

+ +
    +
  • {{jsxref("Global_Objects/eval", "eval()")}}
    • +
  • {{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
    • +
  • {{jsxref("Global_Objects/isFinite", "isFinite()")}}
    • +
  • {{jsxref("Global_Objects/isNaN", "isNaN()")}}
    • +
  • {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
    • +
  • {{jsxref("Global_Objects/parseInt", "parseInt()")}}
    • +
  • {{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
    • +
  • {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
    • +
  • {{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
    • +
  • {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
    • +
  • {{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
    • +
  • {{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
    • +
+ +

Fundamental objects

+ +

These are the fundamental, basic objects upon which all other objects are based. This includes objects that represent general objects, functions, and errors.

+ +
    +
  • {{jsxref("Object")}}
    • +
  • {{jsxref("Function")}}
    • +
  • {{jsxref("Boolean")}}
    • +
  • {{jsxref("Symbol")}} {{experimental_inline}}
    • +
  • {{jsxref("Error")}}
    • +
  • {{jsxref("EvalError")}}
    • +
  • {{jsxref("InternalError")}}
    • +
  • {{jsxref("RangeError")}}
    • +
  • {{jsxref("ReferenceError")}}
    • +
  • {{jsxref("SyntaxError")}}
    • +
  • {{jsxref("TypeError")}}
    • +
  • {{jsxref("URIError")}}
    • +
+ +

Numbers and dates

+ +

These are the base objects representing numbers, dates, and mathematical calculations.

+ +
    +
  • {{jsxref("Number")}}
    • +
  • {{jsxref("Math")}}
    • +
  • {{jsxref("Date")}}
    • +
+ +

Text processing

+ +

These objects represent strings and support manipulating them.

+ +
    +
  • {{jsxref("String")}}
    • +
  • {{jsxref("RegExp")}}
    • +
+ +

Indexed collections

+ +

These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.

+ +
    +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("Int8Array")}}
    • +
  • {{jsxref("Uint8Array")}}
    • +
  • {{jsxref("Uint8ClampedArray")}}
    • +
  • {{jsxref("Int16Array")}}
    • +
  • {{jsxref("Uint16Array")}}
    • +
  • {{jsxref("Int32Array")}}
    • +
  • {{jsxref("Uint32Array")}}
    • +
  • {{jsxref("Float32Array")}}
    • +
  • {{jsxref("Float64Array")}}
    • +
+ +

Keyed collections

+ +

These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.

+ +
    +
  • {{jsxref("Map")}} {{experimental_inline}}
    • +
  • {{jsxref("Set")}} {{experimental_inline}}
    • +
  • {{jsxref("WeakMap")}} {{experimental_inline}}
    • +
  • {{jsxref("WeakSet")}} {{experimental_inline}}
    • +
+ +

Vector collections

+ +

{{Glossary("SIMD")}} vector data types are objects where data is arranged into lanes.

+ +
    +
  • {{jsxref("SIMD")}} {{experimental_inline}}
    • +
  • {{jsxref("float32x4", "SIMD.float32x4")}} {{experimental_inline}}
    • +
  • {{jsxref("float64x2", "SIMD.float64x2")}} {{experimental_inline}}
    • +
  • {{jsxref("int8x16", "SIMD.int8x16")}} {{experimental_inline}}
    • +
  • {{jsxref("int16x8", "SIMD.int16x8")}} {{experimental_inline}}
    • +
  • {{jsxref("int32x4", "SIMD.int32x4")}} {{experimental_inline}}
    • +
+ +

Structured data

+ +

These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).

+ +
    +
  • {{jsxref("ArrayBuffer")}}
    • +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("JSON")}}
    • +
+ +

Control abstraction objects

+ +
    +
  • {{jsxref("Promise")}} {{experimental_inline}}
    • +
  • {{jsxref("Generator")}} {{experimental_inline}}
    • +
  • {{jsxref("GeneratorFunction")}} {{experimental_inline}}
    • +
+ +

Reflection

+ +
    +
  • {{jsxref("Reflect")}} {{experimental_inline}}
    • +
  • {{jsxref("Proxy")}} {{experimental_inline}}
    • +
+ +

Internationalization

+ +

Additions to the ECMAScript core for language-sensitive functionalities.

+ +
    +
  • {{jsxref("Intl")}}
    • +
  • {{jsxref("Global_Objects/Collator", "Intl.Collator")}}
    • +
  • {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}
    • +
  • {{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}
    • +
+ +

Non-standard objects

+ +
    +
  • {{jsxref("Iterator")}} {{non-standard_inline}}
    • +
  • {{jsxref("ParallelArray")}} {{non-standard_inline}}
    • +
  • {{jsxref("StopIteration")}} {{non-standard_inline}}
    • +
+ +

Other

+ + +
diff --git a/files/bn/web/javascript/reference/global_objects/isfinite/index.html b/files/bn/web/javascript/reference/global_objects/isfinite/index.html new file mode 100644 index 0000000000..0ff5ef06bc --- /dev/null +++ b/files/bn/web/javascript/reference/global_objects/isfinite/index.html @@ -0,0 +1,130 @@ +--- +title: isFinite +slug: Web/JavaScript/Reference/Global_Objects/isFinite +translation_of: Web/JavaScript/Reference/Global_Objects/isFinite +--- +
+
+
{{jsSidebar("Objects")}}
+
+
+ +

সারসংক্ষেপ

+ +

একটি আর্গুমেন্টকে যাচাই করে বলে এটি সসীম সংখ্যা কিনা।

+ +

সিনট্যাক্স

+ +

isFinite(number)

+ +

প্যারামিটার

+ +
+
number
+
যে সংখ্যাটিকে যাচাই করতে হবে।
+
+ +

বিবরণ

+ +

isFinite একটি টপ লেভেল ফাংশন এবং কোন অবজেক্টের সঙ্গে সংশ্লিষ্ট নয়।

+ +

এই ফাংশনটির সাহায্যে আপনি জানতে পারবেন কোন সংখ্যা সসীম সংখ্যা কিনা। isFinite এর আর্গুমেন্টে আসা সংখ্যাটিকে পরীক্ষা করে দেখে। আর্গুমেন্টটি NaN, ধনাত্বক অসীম অথবা ঋণাত্মক অসীম হলে এই মেথডটি false রিটার্ন করে; নয়তো true রিটার্ন করে।

+ +

উদাহরণ

+ +

উদাহরণ: isFinite ব্যবহার করা

+ +

আপনি আপনার ক্লায়েন্টের ইনপুট নিয়ে পরীক্ষা করে দেখতে পারেন তা সসীম সংখ্যা কিনা।

+ +
if (isFinite(ClientInput)) {
+   /* take specific steps */
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
ECMAScript 2nd Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}{{Spec2('ES6')}} 
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

See also

+ +
    +
  • {{jsxref("Number.isFinite()")}}
    • +
  • {{jsxref("Number.NaN()")}}
    • +
  • {{jsxref("Number.POSITIVE_INFINITY")}}
    • +
  • {{jsxref("Number.NEGATIVE_INFINITY")}}
    • +
diff --git a/files/bn/web/javascript/reference/global_objects/number/index.html b/files/bn/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..a4740d7dab --- /dev/null +++ b/files/bn/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,218 @@ +--- +title: Number +slug: Web/JavaScript/Reference/Global_Objects/Number +tags: + - JavaScript + - JavaScript Reference + - Number + - Reference + - Référence(2) +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +
{{JSRef}}
+ +

The Number JavaScript object is a wrapper object allowing you to work with numerical values. A Number object is created using the Number() constructor.

+ +

Constructor

+ +
new Number(value);
+ +

Parameters

+ +
+
value
+
The numeric value of the object being created.
+
+ +

Description

+ +

The primary uses for the Number object are:

+ +
    +
  • If the argument cannot be converted into a number, it returns {{jsxref("Global_Objects/NaN", "NaN")}}.
    • +
  • In a non-constructor context (i.e., without the {{jsxref("Operators/new", "new")}} operator), Number can be used to perform a type conversion.
    • +
+ +

Properties

+ +
+
{{jsxref("Number.EPSILON")}} {{experimental_inline}}
+
The smallest interval between two representable numbers.
+
{{jsxref("Number.MAX_SAFE_INTEGER")}} {{experimental_inline}}
+
The maximum safe integer in JavaScript (253 - 1).
+
{{jsxref("Number.MAX_VALUE")}}
+
The largest positive representable number.
+
{{jsxref("Number.MIN_SAFE_INTEGER")}} {{experimental_inline}}
+
The minimum safe integer in JavaScript (-(253 - 1)).
+
{{jsxref("Number.MIN_VALUE")}}
+
The smallest positive representable number - that is, the positive number closest to zero (without actually being zero).
+
{{jsxref("Number.NaN")}}
+
Special "not a number" value.
+
{{jsxref("Number.NEGATIVE_INFINITY")}}
+
Special value representing negative infinity; returned on overflow.
+
{{jsxref("Number.POSITIVE_INFINITY")}}
+
Special value representing infinity; returned on overflow.
+
{{jsxref("Number.prototype")}}
+
Allows the addition of properties to a Number object.
+
+ +
{{jsOverrides("Function", "properties", "MAX_VALUE", "MIN_VALUE", "NaN", "NEGATIVE_INFINITY", "POSITIVE_INFINITY", "protoype")}}
+ +

Methods

+ +
+
{{jsxref("Number.isNaN()")}} {{experimental_inline}}
+
Determine whether the passed value is NaN.
+
{{jsxref("Number.isFinite()")}} {{experimental_inline}}
+
Determine whether the passed value is a finite number.
+
{{jsxref("Number.isInteger()")}} {{experimental_inline}}
+
Determine whether the passed value is an integer.
+
{{jsxref("Number.isSafeInteger()")}} {{experimental_inline}}
+
Determine whether the passed value is a safe integer (number between -(253 - 1) and 253 - 1).
+
{{jsxref("Number.toInteger()")}} {{obsolete_inline}}
+
Used to evaluate the passed value and convert it to an integer (or {{jsxref("Global_Objects/Infinity", "Infinity")}}), but has been removed.
+
{{jsxref("Number.parseFloat()")}} {{experimental_inline}}
+
The value is the same as {{jsxref("Global_Objects/parseFloat", "parseFloat")}} of the global object.
+
{{jsxref("Number.parseInt()")}} {{experimental_inline}}
+
The value is the same as {{jsxref("Global_Objects/parseInt", "parseInt")}} of the global object.
+
+ +
{{jsOverrides("Function", "Methods", "isNaN")}}
+ +

Number instances

+ +

All Number instances inherit from {{jsxref("Number.prototype")}}. The prototype object of the Number constructor can be modified to affect all Number instances.

+ +

Methods

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype', 'Methods')}}
+ +

Examples

+ +

Example: Using the Number object to assign values to numeric variables

+ +

The following example uses the Number object's properties to assign values to several numeric variables:

+ +
var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+
+ +

Example: Integer range for Number

+ +

The following example shows minimum and maximum integer values that can be represented as Number object (for details, refer to EcmaScript standard, chapter 8.5 The Number Type):

+ +
var biggestInt = 9007199254740992;
+var smallestInt = -9007199254740992;
+
+ +

When parsing data that has been serialized to JSON, integer values falling out of this range can be expected to become corrupted when JSON parser coerces them to Number type. Using {{jsxref("Global_Objects/String", "String")}} instead is a possible workaround.

+ +

Example: Using Number to convert a Date object

+ +

The following example converts the {{jsxref("Global_Objects/Date", "Date")}} object to a numerical value using Number as a function:

+ +
var d = new Date('December 17, 1995 03:24:00');
+print(Number(d));
+
+ +

This displays "819199440000".

+ +

Example: Convert numeric strings to numbers

+ +
Number("123")     // 123
+Number("")        // 0
+Number("0x11")    // 17
+Number("0b11")    // 3
+Number("0o11")    // 9
+Number("foo")     // NaN
+Number("100a")    // NaN
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number-objects', 'Number')}}{{Spec2('ES6')}}New methods and properties added: ({{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}}, {{jsxref("Number.parseInt", "parseInt")}})
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ +
    +
  • {{jsxref("Global_Objects/NaN", "NaN")}}
    • +
  • The {{jsxref("Global_Objects/Math", "Math")}} global object
    • +
diff --git a/files/bn/web/javascript/reference/global_objects/number/isfinite/index.html b/files/bn/web/javascript/reference/global_objects/number/isfinite/index.html new file mode 100644 index 0000000000..0ad18815ef --- /dev/null +++ b/files/bn/web/javascript/reference/global_objects/number/isfinite/index.html @@ -0,0 +1,125 @@ +--- +title: Number.isFinite +slug: Web/JavaScript/Reference/Global_Objects/Number/isFinite +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite +--- +
+
{{JSRef}}
+
+ +

সারসংক্ষেপ

+ +

পাস করা ভ্যালু সসীম কিনা তা জানায়। গ্লোবাল isFinite এর উন্নততর সংস্করণ।

+ +

সিনট্যাক্স

+ +
Number.isFinite(testValue);
+ +

প্যারামিটার

+ +
+
testValue
+
সে সংখ্যা পরীক্ষা করে বলা হবে সসীম কিনা।
+
+ +

বিবরণ

+ +

গ্লোবাল isFinite ফাংশনটির সঙ্গে তুলনা করে বলা যায়, এই মেথডটি জোর পূর্বক প্যারামিটারকে সংখ্যার রুপান্তর করে না। কেবলমাত্র যে সকল নাম্বার টাইপের আর্গুমেন্ট সসীম সংখ্যা হবে, তাদের জন্যই মেথডটি true রিটার্ন করবে।

+ +

উদাহরণ

+ +
Number.isFinite(Infinity);  // false
+Number.isFinite(NaN);       // false
+Number.isFinite(-Infinity); // false
+
+// all other numbers true
+Number.isFinite(0);
+Number.isFinite(2e64);
+
+// everything else is false
+Number.isFinite("0");       // false, would've been true with global isFinite
+
+ +

Polyfill

+ +
Number.isFinite = Number.isFinite || function(value) {
+    return typeof value === "number" && isFinite(value);
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
+

{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}

+ 		{{Spec2('ES6')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("19")}}{{CompatGeckoDesktop("16")}}{{CompatNo}}{{CompatOpera("15")}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("16")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ +
    +
  • The {{jsxref("Global_Objects/Number", "Number")}} object it belongs to.
    • +
diff --git a/files/bn/web/javascript/reference/index.html b/files/bn/web/javascript/reference/index.html new file mode 100644 index 0000000000..e749b0831e --- /dev/null +++ b/files/bn/web/javascript/reference/index.html @@ -0,0 +1,48 @@ +--- +title: জাভাস্ক্রিপ্ট রেফারেন্স +slug: Web/JavaScript/Reference +tags: + - JavaScript +translation_of: Web/JavaScript/Reference +--- +
{{JsSidebar}}
+ +

This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more about this reference.

+ +

Global Objects

+ +

This chapter documents all the JavaScript standard built-in objects, along with their methods and properties.

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard objects (by category)')}}
+ +

Statements

+ +

This chapter documents all the JavaScript statements and declarations.

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}
+ +

Expressions and operators

+ +

This chapter documents all the JavaScript expressions and operators.

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}
+ +

Functions

+ +

This chapter documents how to work with JavaScript functions to develop your applications.

+ + + +

Additional reference pages

+ + diff --git a/files/bn/web/javascript/reference/statements/index.html b/files/bn/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..cfda7a107f --- /dev/null +++ b/files/bn/web/javascript/reference/statements/index.html @@ -0,0 +1,127 @@ +--- +title: জাভাস্ক্রিপ্ট স্টেটমেন্ট সমুহ +slug: Web/JavaScript/Reference/statements +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Statements +--- +
{{jsSidebar("Statements")}}
+ +

জাভাস্ক্রিপ্ট স্টেটমেন্ট এর মধ্যে কিওয়ার্ড থাকে, যা যথাযথ সিনট্যাক্স এর সাথে ব্যবহার করা হয়। একটি একক স্টেটমেন্ট এর মধ্যে একাধিক লাইন থাকতে পারে। সেমিকোলন দিয়ে আলাদা করা হলে একাধিক স্টেটমেন্ট এক লাইনেই লেখা সম্ভব। এক্ষেত্রে একটি কিওয়ার্ড হবে না, কিওয়ার্ড এর একটি গ্রুপ হবে।

+ +

Statements and declarations by category

+ +

For an alphabetical listing see the sidebar on the left.

+ +

Control flow

+ +
+
{{jsxref("Statements/block", "Block")}}
+
A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.
+
{{jsxref("Statements/break", "break")}}
+
Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.
+
{{jsxref("Statements/continue", "continue")}}
+
Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.
+
{{jsxref("Statements/Empty", "Empty")}}
+
An empty statement is used to provide no statement, although the JavaScript syntax would expect one.
+
{{jsxref("Statements/if...else", "if...else")}}
+
Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.
+
{{jsxref("Statements/switch", "switch")}}
+
Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.
+
{{jsxref("Statements/throw", "throw")}}
+
Throws a user-defined exception.
+
{{jsxref("Statements/try...catch", "try...catch")}}
+
Marks a block of statements to try, and specifies a response, should an exception be thrown.
+
+ +

Declarations

+ +
+
{{jsxref("Statements/var", "var")}}
+
Declares a variable, optionally initializing it to a value.
+
{{experimental_inline}} {{jsxref("Statements/let", "let")}}
+
Declares a block scope local variable, optionally initializing it to a value.
+
{{experimental_inline}} {{jsxref("Statements/const", "const")}}
+
Declares a read-only named constant.
+
+ +

Functions and classes

+ +
+
{{jsxref("Statements/function", "function")}}
+
Declares a function with the specified parameters.
+
{{experimental_inline}} {{jsxref("Statements/function*", "function*")}}
+
Generators functions enable writing iterators more easily.
+
{{jsxref("Statements/return", "return")}}
+
Specifies the value to be returned by a function.
+
{{experimental_inline}} {{jsxref("Statements/class", "class")}}
+
Declares a class.
+
+ +

Iterations

+ +
+
{{jsxref("Statements/do...while", "do...while")}}
+
Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.
+
{{jsxref("Statements/for", "for")}}
+
Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.
+
{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}
+
Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.
+
{{jsxref("Statements/for...in", "for...in")}}
+
Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.
+
{{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}
+
Iterates over iterable objects (including arrays, array-like objects, iterators and generators), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
+
{{jsxref("Statements/while", "while")}}
+
Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.
+
+ +

Others

+ +
+
{{jsxref("Statements/debugger", "debugger")}}
+
Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.
+
{{experimental_inline}} {{jsxref("Statements/export", "export")}}
+
Used to export functions to make them available for imports in external modules, another scripts.
+
{{experimental_inline}} {{jsxref("Statements/import", "import")}}
+
Used to import functions exported from an external module, another script.
+
{{jsxref("Statements/label", "label")}}
+
Provides a statement with an identifier that you can refer to using a break or continue statement.
+
+ +
+
{{deprecated_inline}} {{jsxref("Statements/with", "with")}}
+
Extends the scope chain for a statement.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-12', 'Statements')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}{{Spec2('ES6')}}New: function*, let, for...of, yield, class
+ +

See also

+ + diff --git a/files/bn/web/javascript/typed_arrays/index.html b/files/bn/web/javascript/typed_arrays/index.html new file mode 100644 index 0000000000..8bcdf2a39d --- /dev/null +++ b/files/bn/web/javascript/typed_arrays/index.html @@ -0,0 +1,268 @@ +--- +title: JavaScript typed arrays +slug: Web/JavaScript/Typed_arrays +translation_of: Web/JavaScript/Typed_arrays +--- +
Swa{{JsSidebar("Advanced")}}
+ +

JavaScript typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers. As you may already know, {{jsxref("Array")}} objects grow and shrink dynamically and can have any JavaScript value. JavaScript engines perform optimizations so that these arrays are fast.

+ +

However, as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using WebSockets, and so forth, it has become clear that there are times when it would be helpful for JavaScript code to be able to quickly and easily manipulate raw binary data. This is where typed arrays come in. Each entry in a JavaScript typed array is a raw binary value in one of a number of supported formats, from 8-bit integers to 64-bit floating-point numbers.

+ +

However, typed arrays are not to be confused with normal arrays, as calling {{jsxref("Array.isArray()")}} on a typed array returns false. Moreover, not all methods available for normal arrays are supported by typed arrays (e.g. push and pop).

+ +

Buffers and views: typed array architecture

+ +

To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into buffers and views. A buffer (implemented by the {{jsxref("ArrayBuffer")}} object) is an object representing a chunk of data; it has no format to speak of and offers no mechanism for accessing its contents. In order to access the memory contained in a buffer, you need to use a view. A view provides a context — that is, a data type, starting offset, and the number of elements — that turns the data into a typed array.

+ +

Typed arrays in an ArrayBuffer

+ +

ArrayBuffer

+ +

The {{jsxref("ArrayBuffer")}} is a data type that is used to represent a generic, fixed-length binary data buffer. You can't directly manipulate the contents of an ArrayBuffer; instead, you create a typed array view or a {{jsxref("DataView")}} which represents the buffer in a specific format, and use that to read and write the contents of the buffer.

+ +

Typed array views

+ +

Typed array views have self-descriptive names and provide views for all the usual numeric types like Int8, Uint32, Float64 and so forth. There is one special typed array view, the Uint8ClampedArray. It clamps the values between 0 and 255. This is useful for Canvas data processing, for example.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeValue RangeSize in bytesDescriptionWeb IDL typeEquivalent C type
{{jsxref("Int8Array")}}-128 to 12718-bit two's complement signed integerbyteint8_t
{{jsxref("Uint8Array")}}0 to 25518-bit unsigned integeroctetuint8_t
{{jsxref("Uint8ClampedArray")}}0 to 25518-bit unsigned integer (clamped)octetuint8_t
{{jsxref("Int16Array")}}-32768 to 32767216-bit two's complement signed integershortint16_t
{{jsxref("Uint16Array")}}0 to 65535216-bit unsigned integerunsigned shortuint16_t
{{jsxref("Int32Array")}}-2147483648 to 2147483647432-bit two's complement signed integerlongint32_t
{{jsxref("Uint32Array")}}0 to 4294967295432-bit unsigned integerunsigned longuint32_t
{{jsxref("Float32Array")}}1.2×10-38 to 3.4×1038432-bit IEEE floating point number (7 significant digits e.g., 1.123456)unrestricted floatfloat
{{jsxref("Float64Array")}}5.0×10-324 to 1.8×10308864-bit IEEE floating point number (16 significant digits e.g., 1.123...15)unrestricted doubledouble
{{jsxref("BigInt64Array")}}-263 to 263-1864-bit two's complement signed integerbigintint64_t (signed long long)
{{jsxref("BigUint64Array")}}0 to 264-1864-bit unsigned integerbigintuint64_t (unsigned long long)
+ +

DataView

+ +

The {{jsxref("DataView")}} is a low-level interface that provides a getter/setter API to read and write arbitrary data to the buffer. This is useful when dealing with different types of data, for example. Typed array views are in the native byte-order (see Endianness) of your platform. With a DataView you are able to control the byte-order. It is big-endian by default and can be set to little-endian in the getter/setter methods.

+ +

Web APIs using typed arrays

+ +

These are some examples of APIs that make use of typed arrays; there are others, and more are being added all the time.

+ +
+
FileReader.prototype.readAsArrayBuffer()
+
The FileReader.prototype.readAsArrayBuffer() method starts reading the contents of the specified Blob or File.
+
XMLHttpRequest.prototype.send()
+
XMLHttpRequest instances' send() method now supports typed arrays and {{jsxref("ArrayBuffer")}} objects as argument.
+
ImageData.data
+
Is a {{jsxref("Uint8ClampedArray")}} representing a one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 inclusive.
+
+ +

Examples

+ +

Using views with buffers

+ +

First of all, we will need to create a buffer, here with a fixed length of 16-bytes:

+ +
let buffer = new ArrayBuffer(16);
+
+ +

At this point, we have a chunk of memory whose bytes are all pre-initialized to 0. There's not a lot we can do with it, though. We can confirm that it is indeed 16 bytes long, and that's about it:

+ +
if (buffer.byteLength === 16) {
+  console.log("Yes, it's 16 bytes.");
+} else {
+  console.log("Oh no, it's the wrong size!");
+}
+
+ +

Before we can really work with this buffer, we need to create a view. Let's create a view that treats the data in the buffer as an array of 32-bit signed integers:

+ +
let int32View = new Int32Array(buffer);
+
+ +

Now we can access the fields in the array just like a normal array:

+ +
for (let i = 0; i < int32View.length; i++) {
+  int32View[i] = i * 2;
+}
+
+ +

This fills out the 4 entries in the array (4 entries at 4 bytes each makes 16 total bytes) with the values 0, 2, 4, and 6.

+ +

Multiple views on the same data

+ +

Things start to get really interesting when you consider that you can create multiple views onto the same data. For example, given the code above, we can continue like this:

+ +
let int16View = new Int16Array(buffer);
+
+for (let i = 0; i < int16View.length; i++) {
+  console.log('Entry ' + i + ': ' + int16View[i]);
+}
+
+ +

Here we create a 16-bit integer view that shares the same buffer as the existing 32-bit view and we output all the values in the buffer as 16-bit integers. Now we get the output 0, 0, 2, 0, 4, 0, 6, 0.

+ +

You can go a step farther, though. Consider this:

+ +
int16View[0] = 32;
+console.log('Entry 0 in the 32-bit array is now ' + int32View[0]);
+
+ +

The output from this is "Entry 0 in the 32-bit array is now 32".

+ +

In other words, the two arrays are indeed simply viewed on the same data buffer, treating it as different formats. You can do this with any view types.

+ +

Working with complex data structures

+ +

By combining a single buffer with multiple views of different types, starting at different offsets into the buffer, you can interact with data objects containing multiple data types. This lets you, for example, interact with complex data structures from WebGL, data files, or C structures you need to use while using js-ctypes.

+ +

Consider this C structure:

+ +
struct someStruct {
+  unsigned long id;
+  char username[16];
+  float amountDue;
+};
+ +

You can access a buffer containing data in this format like this:

+ +
let buffer = new ArrayBuffer(24);
+
+// ... read the data into the buffer ...
+
+let idView = new Uint32Array(buffer, 0, 1);
+let usernameView = new Uint8Array(buffer, 4, 16);
+let amountDueView = new Float32Array(buffer, 20, 1);
+ +

Then you can access, for example, the amount due with amountDueView[0].

+ +
Note: The data structure alignment in a C structure is platform-dependent. Take precautions and considerations for these padding differences.
+ +

Conversion to normal arrays

+ +

After processing a typed array, it is sometimes useful to convert it back to a normal array in order to benefit from the {{jsxref("Array")}} prototype. This can be done using {{jsxref("Array.from()")}}, or using the following code where Array.from() is unsupported.

+ +
let typedArray = new Uint8Array([1, 2, 3, 4]),
+    normalArray = Array.prototype.slice.call(typedArray);
+normalArray.length === 4;
+normalArray.constructor === Array;
+
+ +

Specifications

+ + + + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.Int8Array")}}

+ +

See also

+ + diff --git "a/files/bn/web/javascript/\340\246\255\340\246\276\340\246\267\340\246\276\340\246\260_\340\246\260\340\246\277\340\246\270\340\247\213\340\246\260\340\247\215\340\246\270/index.html" "b/files/bn/web/javascript/\340\246\255\340\246\276\340\246\267\340\246\276\340\246\260_\340\246\260\340\246\277\340\246\270\340\247\213\340\246\260\340\247\215\340\246\270/index.html" new file mode 100644 index 0000000000..c539ad7321 --- /dev/null +++ "b/files/bn/web/javascript/\340\246\255\340\246\276\340\246\267\340\246\276\340\246\260_\340\246\260\340\246\277\340\246\270\340\247\213\340\246\260\340\247\215\340\246\270/index.html" @@ -0,0 +1,102 @@ +--- +title: জাভাস্কিপ্ট ভাষার রিসোর্স +slug: Web/JavaScript/ভাষার_রিসোর্স +tags: + - JavaScript + - JavaScript Language Resource + - জাভাস্ক্রিপ্ট +translation_of: Web/JavaScript/Language_Resources +--- +
{{JsSidebar}}
+ +

ECMAScript হচ্ছে এক প্রকার স্ক্রিপ্টিং ভাষা যার ওপর ভিত্তি করে জাভাস্ক্রিপ্ট তৈরি। আন্তর্জাতিক ECMA সংস্থা ECMA স্ক্রিপ্ট এর জন্য ECMA-262 এবং ECMA-402 এই দুইটি মান নির্ধারণ করে দিয়েছে। নিচের ECMAScript স্টান্ডার্ডগুলো অনুমোদিত হয়েছে:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
নামলিঙ্কতারিখবর্ননা
ECMA-262 সংস্করণ ৫.১PDF, HTMLজুন ২০১১ +

ECMAScript ৫.১, জাভাস্ক্রিপ্ট নির্দেশনার সর্বশেষ প্রকাশিত সংস্করণ
+ এই সংস্করণ সম্পূর্ণরূপে আন্তর্জাতিক আইএসও/আইইসি ১৬২৬২:২০১১ এর তৃতীয় সংস্করণ সমর্থিত। এতে ES5 Errata সংশোধন অন্তর্ভূক্ত করা হয়েছে, নতুন কোন বৈশিষ্ট্য অন্তর্ভুক্ত করা হয়নি।

+
CMA-402PDF, HTMLডিসেম্বর ২০১২ECMAScript আন্তর্জাতিকায়ন API
ECMA-357 সংস্করণ ২PDFডিসেম্বর ২০০৫এক্সএমএল (E4X) এর জন্য ECMAScript.
অপ্রচলিত সংস্করণ
ECMA-262PDFজুন ১৯৯৭ECMAScript এর আদি সংস্করণ।
ECMA-262 সংস্করণ ২PDFআগস্ট ১৯৯৮ +

ECMAScript স্ট্যান্ডার্ড এর দ্বিতীয় সংস্করণ; এছাড়াও আইএসও স্ট্যান্ডার্ড ১৬২৬২।

+
ECMA-262 সংস্করণ ৩PDFডিসেম্বর ১৯৯৯ECMAScript প্রমিত তৃতীয় সংস্করণ; জাভাস্ক্রিপ্ট এর ১.৫ এর অনুরূপ।
+ আরো দেখুন errata
ECMA-262 সংস্করণ ৫PDFডিসেম্বর ২০০৯ECMAScript ৫
+ আরো দেখুন ES5 errata এবং ECMAScript ৫ মোজিলা সমর্থন
ECMA-357PDFজুন ২০০৪এক্সএমএল (E4X) এর জন্য ECMAScript
+ আরো দেখুন E4X errata
+ +

ECMAScript এর ইতিহাস সম্পর্কে আরও তথ্যের জন্য উইকিপিডিয়া ECMAScript এন্ট্রি দেখুন।

+ +

ECMAScript ভাষার স্পেসিফিকেশন এর পরবর্তী সংস্করণ, কোড-নাম "হারমনি" এর কাজ এ আপনি অংশগ্রহণ বা শুধু ট্র্যাক করতে পারেন, এবং পাবলিক উইকির মাধ্যমে ECMAScript আন্তর্জাতিকায়ন এপিআই স্পেসিফিকেশন এবং ecmascript.org হতে es-discuss মেইলিং তালিকায় অংশগ্রহণ করতে পারেন।

+ +

বাস্তবায়ন

+ +
    +
  • SpiderMonkey - ফায়ারফক্স এ ব্যবহৃত জাভাস্ক্রিপ্ট ইঞ্জিন;
    • +
  • Rhino - জাভায় লেখা জাভাস্ক্রিপ্ট ইঞ্জিন;
    • +
  • Tamarin - (অ্যাডোবি ® ফ্ল্যাশ ® প্লেয়ার এ ব্যবহৃত) ActionScript ভার্চুয়াল মেশিন;
    • +
  • অন্যান্য বাস্তবায়ন (উইকিপিডিয়া)
    • +
+ +

আরো দেখুন

+ + diff --git a/files/bn/web/reference/index.html b/files/bn/web/reference/index.html new file mode 100644 index 0000000000..6aa3c80ebb --- /dev/null +++ b/files/bn/web/reference/index.html @@ -0,0 +1,46 @@ +--- +title: ওয়েব প্রযুক্তি রেফারেন্স +slug: Web/Reference +tags: + - Landing + - Reference + - Web +translation_of: Web/Reference +--- +

মুক্ত ওয়েব তৈরী হয়েছে বেশ কিছু প্রযুক্তির উপর ভিত্তি করে। নিচে এই সকল প্রযুক্তির নাম এবং বিস্তারিত তথ্য সম্বলিত লিংক দেয়া হল।

+
+
+

মূল ওয়েব প্রযুক্তি

+
+
+ API
+
+ ওয়েব এপিআই এর সাথে সম্পর্কিত সকল ধরনের ইন্টারফেস সম্পর্কিত তথ্যের রেফারেন্স পাওয়া যাবে এখানে। DOM এবং এর সম্পর্কিত সকল এপিআই, এবং ওয়েব কন্টেন্ট এবং অ্যাপ তৈরীর কাজে লাগবে এমন এপিআই গুলো বর্ণক্রম অনুযায়ী সাজানো হয়েছে।
+
+ Web APIs
+
+ A list of the individual APIs and technology suites that make up the overall Web API.
+
+ HTML
+
+ হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ হল ওয়েব পেজের মূল ভাষা, যার মাধ্যমে ওয়েব কন্টেন্টের বর্ণনা এবং নির্ধারণ করা হয়।
+
+ CSS
+
+ ক্যাসকেডিং স্টাইল শিট ওয়েব কন্টেন্টের ডিজাইন তৈরীতে ব্যবহার করা হয়।
+
+ SVG
+
+ স্কেলেবল ভেক্টর গ্রাফিক্স ব্যবহার করে ছবিগুলো বিভিন্ন ভেক্টর এবং অন্যান্য আকার হিসাবে সংরক্ষন করা হয়। এর ফলে ছবির আকার পরিবর্তন করা হলেও ছবির মানের কোনো পরিবর্তন করা হয় না।
+
+ MathML
+
+ ম্যাথ মার্কআপ ল্যাঙ্গুয়েজ ব্যবহার করে জটিল গাণিতিক সূত্র লেখা যায়।
+
+
+
+

অন্যান্য প্রযুক্ত

+

শিঘ্রই যুক্ত করা হবে।

+
+
+

 

diff --git a/files/bn/web/svg/element/index.html b/files/bn/web/svg/element/index.html new file mode 100644 index 0000000000..2d574515bf --- /dev/null +++ b/files/bn/web/svg/element/index.html @@ -0,0 +1,169 @@ +--- +title: SVG element reference +slug: Web/SVG/Element +translation_of: Web/SVG/Element +--- +

« SVG / SVG Attribute reference »

+

SVG এর উপাদানসমূহ

+
+ A +
    +
  • {{SVGElement("a")}}
    • +
  • {{SVGElement("altGlyph")}}
    • +
  • {{SVGElement("altGlyphDef")}}
    • +
  • {{SVGElement("altGlyphItem")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("animateColor")}}
    • +
  • {{SVGElement("animateMotion")}}
    • +
  • {{SVGElement("animateTransform")}}
    • +
+ B C +
    +
  • {{SVGElement("circle")}}
    • +
  • {{SVGElement("clipPath")}}
    • +
  • {{SVGElement("color-profile")}}
    • +
  • {{SVGElement("cursor")}}
    • +
+ D +
    +
  • {{SVGElement("defs")}}
    • +
  • {{SVGElement("desc")}}
    • +
+ E +
    +
  • {{SVGElement("ellipse")}}
    • +
+ F +
    +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feDistantLight")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feFuncA")}}
    • +
  • {{SVGElement("feFuncB")}}
    • +
  • {{SVGElement("feFuncG")}}
    • +
  • {{SVGElement("feFuncR")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMergeNode")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("fePointLight")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feSpotLight")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("font")}}
    • +
  • {{SVGElement("font-face")}}
    • +
  • {{SVGElement("font-face-format")}}
    • +
  • {{SVGElement("font-face-name")}}
    • +
  • {{SVGElement("font-face-src")}}
    • +
  • {{SVGElement("font-face-uri")}}
    • +
  • {{SVGElement("foreignObject")}}
    • +
+ G +
    +
  • {{SVGElement("g")}}
    • +
  • {{SVGElement("glyph")}}
    • +
  • {{SVGElement("glyphRef")}}
    • +
+ H +
    +
  • {{SVGElement("hkern")}}
    • +
+ I +
    +
  • {{SVGElement("image")}}
    • +
+ J K L +
    +
  • {{SVGElement("line")}}
    • +
  • {{SVGElement("linearGradient")}}
    • +
+ M +
    +
  • {{SVGElement("marker")}}
    • +
  • {{SVGElement("mask")}}
    • +
  • {{SVGElement("metadata")}}
    • +
  • {{SVGElement("missing-glyph")}}
    • +
  • {{SVGElement("mpath")}}
    • +
+ N O P +
    +
  • {{SVGElement("path")}}
    • +
  • {{SVGElement("pattern")}}
    • +
  • {{SVGElement("polygon")}}
    • +
  • {{SVGElement("polyline")}}
    • +
+ Q R +
    +
  • {{SVGElement("radialGradient")}}
    • +
  • {{SVGElement("rect")}}
    • +
+ S +
    +
  • {{SVGElement("script")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("stop")}}
    • +
  • {{SVGElement("style")}}
    • +
  • {{SVGElement("svg")}}
    • +
  • {{SVGElement("switch")}}
    • +
  • {{SVGElement("symbol")}}
    • +
+ T +
    +
  • {{SVGElement("text")}}
    • +
  • {{SVGElement("textPath")}}
    • +
  • {{SVGElement("title")}}
    • +
  • {{SVGElement("tref")}}
    • +
  • {{SVGElement("tspan")}}
    • +
+ U +
    +
  • {{SVGElement("use")}}
    • +
+ V — Z +
    +
  • {{SVGElement("view")}}
    • +
  • {{SVGElement("vkern")}}
    • +
+
+

বিভাগসমুহ

+

Animation এর উপাদানসমূহ

+

 

+

{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}

+

প্রাথমিক আকারসমূহ

+

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+

উপাদানসমূহের ধারক

+

 

+

{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}

+

বর্ণনামূলক উপাদানসমূহ

+

{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}

+

Filter এর প্রাচীন উপাদানসমূহ

+

{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}

+

Font এর উপাদানসমূহ

+

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}

+

Gradient এর উপাদানসমূহ

+

{{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}

+

Graphics এর উপাদানসমূহ

+

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}

+

Light source এর উপাদানসমূহ

+

{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}

+

 

+

Shape এর উপাদানসমূহ

+

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+

কাঠামোগত উপাদানসমূহ

+

{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}

+

Text content এর উপাদানসমূহ

+

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+

Text content child এর উপাদানসমূহ

+

{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}} এর উপাদানসমুহ

+

Uncategorized এর উপাদানসমূহ

+

{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}

diff --git a/files/bn/web/svg/index.html b/files/bn/web/svg/index.html new file mode 100644 index 0000000000..491cb1d099 --- /dev/null +++ b/files/bn/web/svg/index.html @@ -0,0 +1,93 @@ +--- +title: SVG +slug: Web/SVG +tags: + - NeedsTranslation + - References + - SVG + - TopicStub +translation_of: Web/SVG +--- +
+ Getting Started
+ This tutorial will help get you started using SVG.
+

Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what XHTML is to text.

+

SVG is similar in scope to Adobe's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a W3C recommendation (i.e., a standard) and that it is XML-based as opposed to a closed binary format. It is explicitly designed to work with other W3C standards such as CSS, DOM and SMIL.

+
+
+

Documentation

+
+
+ SVG element reference
+
+ Get details about each SVG element.
+
+ SVG attribute reference
+
+ Get details about each SVG attribute.
+
+ SVG DOM interface reference
+
+ Get details about the whole SVG DOM API.
+
+ Enhance HTML content
+
+ SVG works together with HTML, CSS and JavaScript. Use SVG to enhance a regular HTML page or web application.
+
+ SVG in Mozilla
+
+ Notes and information on how SVG is implemented in Mozilla. + +
+
+

View All...

+

Community

+
    +
  • View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}
    • +
+

Tools

+ +
+
+ + +

Animation and interactions

+

Like HTML, SVG has a document model (DOM), events and is accessible from JavaScript. This allows developers to create rich animations and interactive images.

+ +

Mapping, charting, games & 3D experiments

+

While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.

+ +
+
+

 

diff --git a/files/bn/web_development/index.html b/files/bn/web_development/index.html new file mode 100644 index 0000000000..20390cc417 --- /dev/null +++ b/files/bn/web_development/index.html @@ -0,0 +1,98 @@ +--- +title: Web Development +slug: Web_Development +tags: + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide +--- +

ওয়েব ডেভেলপমেন্ট বলতে একটি ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশন তৈরির প্রতিটি দিককে বোঝানো হয়।

+

Learn how to create anything from a simple web site to complex, highly interactive web sites featuring the latest Web technologies by perusing the articles you'll find here.

+ + + + + + + +
+

ডকুমেন্টেশনের বিষয়

+

প্রযুক্তি

+
+
+ Introduction to Web development
+
+ A guide to learning how to develop for the Web.
+
+ HTML
+
+ HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.
+
+ CSS
+
+ Cascading Style Sheets make it possible to do advanced layout and page design on the Web.
+
+ JavaScript
+
+ JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.
+
+ DOM
+
+ The Document Object Model is an API for HTML and XML documents, providing a structural representation of the document that you can modify in order to alter its visual presentation.
+
+ AJAX
+
+ Asynchronous JavaScript and XML isn't so much a technology as a combination of technologies; using JavaScript and other modern web technologies together to create dynamic web applications.
+
+ XHTML
+
+ Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.
+
+ SVG
+
+ Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.
+
+

কলা-কৌশল

+
+
+ Web standards
+
+ Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.
+
+ Responsive Web design
+
+ Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.
+
+ Writing forward-compatible websites
+
+ Best practices for creating websites that do not break when browsers are updated.
+
+ Mobile Web development
+
+ Developing sites for be viewed on mobile devices involves some unique approaches that may not be familiar to those accustomed to developing for desktop browsers.
+
+ Mozilla Web developer FAQ
+
+ Frequently asked questions from Web developers. With answers!
+
+

View All...

+ 		+

কমিউনিটি

+ +

টুল

+ +

View All...

+
+

 

diff --git a/files/bn/what_to_do_and_what_not_to_do_in_bugzilla/index.html b/files/bn/what_to_do_and_what_not_to_do_in_bugzilla/index.html new file mode 100644 index 0000000000..5b1d9ba3f8 --- /dev/null +++ b/files/bn/what_to_do_and_what_not_to_do_in_bugzilla/index.html @@ -0,0 +1,131 @@ +--- +title: বাগজিলায় কি করা যাবে এবং কি করা যাবে না +slug: What_to_do_and_what_not_to_do_in_Bugzilla +tags: + - Bugzilla + - QA + - বাগজিলা +translation_of: Mozilla/Bugzilla/What_to_do_and_what_not_to_do_in_Bugzilla +--- +
+

এই নিবন্ধে বাগজিলায় (bugzilla.mozilla.org) অধিকার/সুবিধা থেকে শুরু করে বাগ চিহ্নিত করা ও সমাধান করার সকল ধাপে করণীয় ও করা উচিত নয়, সেসব বিষয় বিস্তারিত বর্ণনা করা হয়েছে।

+
+

বাগজিলায় অধিকার পাওয়া/বাড়ানো

+

যদি আপনি বাগজিলায় সুবিধা বা অধিকার পেতে চান, (যেমনটি নিচে বর্ণনা করা হয়েছে) তাহলে এই পাতাটি দেখতে পারেন। এর মদ্ধে প্রয়োজনীয় বিষয় ও যোগাযোগের জন্য ই-মেইলের তালিকা রয়েছে।

+

যদি আপনি দ্রুত canconfirm অথবা editbugs অধিকার পেতে চান, বিশেষতঃ বাগ টেস্ট করার জন্য অথবা বাগ ডে'তে অংশগ্রহণ করার জন্য, তাহলে আপনি irc তে lizzard কে বলতে পারেন, অথবা মেইল করতে পারেন lhenry@mozilla.com. ইমেইলে আপনার Bugzilla activity page এর লিঙ্ক দিয়ে দেবেন। canconfirm সুবিধা পাওয়ার আগে, আপনি বাগ টেস্ট করতে পারেন এবং মন্তব্য করতে পারেন। এভাবেও আপনি একটি বাগ সমাধানে সাহায্য করতে পারেন। editbugs এর ক্ষেত্রেও একই কথা প্রযোজ্যঃ আপনি ওই বাগে যা যুক্ত করতে বাঁ সম্পাদনা করতে চান, সেটা মন্তব্যের মাদ্ধমে বলতে পারেন। এতে করে আপনি আপনার যোগ্যতা প্রমাণ করতে পারবেন, এবং দ্রুত editbugs এর অধিকার পাবেন।

+

Canconfirm অধিকার

+

The canconfirm privilege allows you to confirm bugs and also to start your bug reports in the confirmed state (NEW). It also governs which bug entry form you are presented with first (either the guided or advanced forms).

+

অননুমোদিত বাগ অনুমোদন করা

+ +

নতুন বাগ রিপোর্ট করা

+

You should report a bug in the NEW state after going through the triaging process as described in the two above-mentioned guides.

+

You should look at all the open bugs you've reported (see the "My Bugs" link at the bottom of every Bugzilla page) at least every two months and test whether they still exist.

+

Editbugs অধিকার

+

The more powerful editbugs privilege gives you the privileges of canconfirm and also the ability to edit most aspects of a bug. Therefore, don't abuse your privileges.

+

বাগ সমাধান

+

Some general rules:

+
    +
  • When you resolve a bug, CC yourself so that you are informed when new facts come up.
    • +
  • The conditions for not resolving a bug always overrule the conditions for resolving a bug.
    • +
  • When in doubt about resolving a bug, leave it alone!
    • +
+

নকল হিসেবে বাগ চিহ্নিত করা

+

See this guide for screening DUPLICATE bugs. In general newer bugs should be marked as DUPLICATEs of older bugs, except when the newer bug contains more information (bug description clearer, patch already attached, lots of people already CC'ed, etc.).

+

WORKSFORME হিসেবে বাগ চিহ্নিত করা

+

You can resolve a bug as WORKSFORME (WFM) if it can't be reproduced on the reported hardware/OS.

+

You should not resolve a bug as WFM if:

+
    +
  • the bug reporter uses a different hardware/operating system (e.g. bug appears on Linux and you can't reproduce it on Windows).
    • +
  • the bug has been reproduced by some people but can't be reproduced by other people.
    • +
+

In general you can resolve a bug as WFM if:

+
    +
  • three or more people with a similar/the same setup can't reproduce the bug and the bug is only seen by the bug reporter. In this case you shouldn't just mark it WFM instantly, but ask the reporter for more details first. When marking it WFM you should tell the bug reporter that he should reopen the bug if he can still see it with a recent build.
    • +
  • the build the bug is reported against is more than one stable release old and the bug can't be reproduced with a current build.
    • +
  • the bug reporter has not responded to questions for one month and the bug can't be reproduced with a current build.
    • +
  • the bug reporter reports that he can no longer see the bug and no other people report that they are still seeing the bug.
    • +
+

অসম্পূর্ণ বাগ চিহ্নিত করা

+

The problem is vaguely described with no steps to reproduce, or is a support request. The reporter should be directed to the product's support page for help diagnosing the issue. If there are only a few comments in the bug, it may be reopened only if the original reporter provides more info, or confirms someone else's steps to reproduce. If the bug is long, when enough info is provided a new bug should be filed and the original bug marked as a duplicate of it.

+

বাতিল বাগ চিহ্নিত করা

+

You should resolve a bug as INVALID if the issue described in the bug is clearly not a Mozilla bug or if the issue is intended behavior. The exceptions are bugs in other software which we have to work around and bugs that involve certain core Gecko modules. Bugs covered by this exception should not be INVALIDated by anyone other than the module owner or module peer; for bugs involving modules like Layout or Content, attach a test case to the bug and then CC one of the owners or peers. Reports of problems with specific websites that result from bad coding practices already determined to be “tech evangelism” cases by the module owner or peer, or problems that result from the use of proprietary technology, should be be moved to the Tech Evangelism product rather than being resolved as INVALID.

+

সমাধানকৃত বাগ চিহ্নিত করা

+

Resolve a bug as FIXED if the bug has been fixed by a checkin into the Mozilla Mercurial code repository. Bugs which can no longer be reproduced should be marked WORKSFORME instead of FIXED if they can't be linked to a single checkin.

+

সমাধানের অযোগ্য বাগ চিহ্নিত করা

+

Bugs should not be marked WONTFIX by the normal bug triager. The decision to mark a bug WONTFIX is reserved for module owners or module peers.

+

বাগ যাচাই করা

+

Only RESOLVED bugs can be verified. To verify a bug, you will need to be the bug reporter, assignee, qa_contact, or in the 'editbugs' permission group. You should verify a bug if it has been proven that the resolution of the bug was correct. When verifying a bug, you should remember the following:

+
    +
  • Verifying DUPLICATEs is the easiest task, so start with that. Note that in general it's impossible to verify a DUPLICATE until the original has been resolved.
    • +
  • Verifying WONTFIX or INVALID bugs is relatively easy if a developer or a trusted QA person has WONTFIXed or INVALIDated them. Bugs that were INVALIDated or WONTFIXed by someone else must be verified by a module owner or module peer or someone who has been explicitly told by a module owner or module peer that they are able to do so for that module.
    • +
  • Before verifying FIXED bugs, make sure that you can verify them on every hardware/OS they were reported on. If that's impossible, try to cooperate with multiple people to verify the bug.
    • +
  • There are no clear rules for verifying WORKSFORME. In general you should make sure that the bug has been resolved for a few months and no complaints about the resolution have come up.
    • +
+
+

Note: Because of how duplicate detection works in Bugzilla, you should try not to verify bugs immediately after they're marked fixed; instead, let a little time pass first. This isn't mandatory, but can help prevent accidental filing of duplicates of a bug that's already been fixed.

+
+

বাগের তথ্যের ফিল্ডে পরিবর্তন করা

+

সারাংশ

+

You should change the summary if the current one is unclear or does not correctly describe the issue covered by the bug. You should not change the summary in order to morph the bug to describe a different issue. In this case the bug should be resolved and another bug should be opened.

+

অপারেটিং সিস্টেম/হার্ডওয়্যার

+

Make sure that the OS or Hardware fields correctly display the systems that are affected. If a bug is Windows-only, change the field to the oldest affected operating system. If the bug is present on Linux and Windows, change the fields to Hardware = PC and OS = ALL. If another hardware platform like Mac or DEC is also affected, change Hardware to ALL.

+

প্রবলতা

+

This field describes the impact of a bug.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
blockerBlocks development and/or testing work
criticalcrashes, loss of data, severe memory leak
majormajor loss of function
normalregular issue, some loss of functionality under specific circumstances
minorminor loss of function, or other problem where easy workaround is present
trivialcosmetic problem like misspelled words or misaligned text
enhancementRequest for enhancement
+

The blocker severity should be used very seldomly, because only a fraction of the hundreds of thousands bugs really block the development of mozilla and these are normally fixed very quickly. As a result, bugs which are UNCONFIRMED for more than a few days do not qualify for the blocker severity. The exceptions to this rule are platform-specific or compiler-specific bugs. Basically, anything that prevents builds from building, running, or being used for dogfood (able to use Bugzilla, Tinderbox, LXR, etc.) is a blocker.

+

Bug reports about crashes, hangs, data-loss, or severe security exploits (e.g. remote execution of arbitrary code) get the critical severity.

+

অগ্রাধিকার/অভীষ্ট মাইলস্টোন

+

As stated in the Bugzilla Etiquette, you must not change the Target Milestone and Priority fields. These fields are reserved for the developers. This also applies to bugs with Target Milestones in the past.

+

বাগ স্থানান্তর

+

If a bug belongs to a different Product or Component it should be reassigned. When performing bug reassignments, keep the following things in mind:

+
    +
  • Always remember to check the Reassign to default owner and QA Contact radio button under the comment textbox.
    • +
  • Mozilla applications like the Application Suite, Thunderbird, or Firefox share most of their program code and all of the backend code including things like network connectivity (FTP, HTTP, IMAP) and HTML rendering. Make sure that you also test Thunderbird or Firefox bugs with the Application Suite and move the bug to one of the core products, if the bug also exists in the Application Suite.
    • +
  • If you don't know where a bug belongs, don't touch it! For example, don't move bugs into the JS engine Component unless you really know they are JS engine bugs, and don't leave bugs in the JS engine Component if you know that the malfunction being described is a DOM problem.
    • +
+

বাগ ফ্ল্যাগ সমূহ

+

Mozilla drivers use flags to identify bugs blocking a release. You may only use the blocking? flag to nominate bugs for blocking status. The use of the blocking- flag and the blocking+ flag is prohibited. Continued abuse will result in revocation of your Bugzilla privileges.

+

বড় ধরনের পরিবর্তন

+

Mass changes (changes to more than one bug simultaneously) are discouraged. Don't do it!

+
+

আসল ডকুমেন্টের তথ্য

+
    +
  • Author(s): Simon Paquet
    • +
  • Other Contributors: Andreas Kunz, Boris Zbarsky, Christian Biesinger, Daniel Wang, Fantasai, Ian Hickson, James Graham, and Michael Lefevre
    • +
+
+

{{ languages( { "ja": "ja/What_to_do_and_what_not_to_do_in_Bugzilla" } ) }}

diff --git a/files/bn/zones/index.html b/files/bn/zones/index.html new file mode 100644 index 0000000000..f3ecff1596 --- /dev/null +++ b/files/bn/zones/index.html @@ -0,0 +1,53 @@ +--- +title: MDN অঞ্চল +slug: Zones +translation_of: Zones +--- +

MDN zones provide you one-stop access to information about specific topic areas or products. Here's a list of all the zones available to you.

+ +
+
+

ওয়েব ও অ্যাপস উন্নতিকরন

+ +
+
App Center
+
Learn how to create open Web apps—rich experiences that run across multiple devices and form factors—using the same Web standards and open technologies you already know.
+
Learning Area
+
This zone is all about articles to help newcomers to Web development get started in this exciting new world.
+
Developer tools
+
Learn how to use the Firefox developer tools to debug, test, and optimize your Web apps and sites.
+
Firefox Marketplace
+
An open, non-proprietary online marketplace for Web applications built using HTML, CSS, and JavaScript. Submit apps to the Firefox Marketplace or use the code to build your own marketplace.
+
Game development
+
Learn how to develop games for the Web, how to port existing games to Web technologies, and how to turn your games into Web apps.
+
+
+ +
+

পণ্য এবং প্রকল্প সমূহ

+ +
+
Emscripten
+
An LLVM to JavaScript compiler; this lets you compile, for example, C++ code into JavaScript code which can be run in any Web browser.
+
L20n
+
A JavaScript localization framework for unleashing your natural language's power with simple code.
+
The MDN project
+
The Mozilla Developer Network (this site) relies on its community of readers and contributors to grow and improve. You can learn here how to help use, contribute to, and build the code behind MDN!
+
Persona
+
A new simple, privacy-sensitive single-sign in system developed by Mozilla which lets users log into your Web site using their email address, freeing you from password management.
+
+ +

মজিলা প্রযুক্তি

+ +
+
Add-ons
+
Learn how to build and install extensions, themes, and plug-ins for Mozilla-based software, including the popular Firefox Web browser.
+
Firefox
+
Learn all about Firefox, from how to build and revise it to how to build add-ons specifically for it.
+
Firefox OS
+
A new mobile operating system developed by Mozilla which lets users install and run open Web applications created using HTML, CSS, and JavaScript.
+
+
+
+ +

 

-- cgit v1.2.3-54-g00ecf