diff options
Diffstat (limited to 'files/bn')
291 files changed, 35996 insertions, 0 deletions
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 +--- +<p>এই নিবন্ধ গুলো তুলনামূলক জটিল মুক্ত ওয়েব অ্যাপ সম্পর্কে অতিরিক্ত তথ্য প্রদান করে।</p> +<div class="row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Architecture" name="Architecture">অ্যাপ আর্কিটেকচার ডকুমেন্টেশন</h2> + <dl> + <dt> + <a href="/bn-BD/docs/Web/Apps/Architecture">ওয়েব অ্যাপ এর আর্কিটেকচার</a></dt> + <dd> + মুক্ত ওয়েব অ্যাপ প্রজেক্টের ডিজাইন ও বাস্তবায়নের পেছনের আর্কিটেকচারের সংক্ষিপ্ত বর্ণনা।</dd> + <dt> + <a href="/bn-BD/docs/Web/Apps/Platform-specific_details">প্লাটফর্ম-নির্ভর অ্যাপ ইন্সটলের বিস্তারিত</a></dt> + <dd> + যেসব প্লাটফর্ম মুক্ত ওয়েব অ্যাপ সমর্থন করে, সেসব প্লাটফর্মে অ্যাপ ইন্সটল করার ক্ষেত্রে ভিন্নতা রয়েছে; এই নিবন্ধটি আপনাকে সেসব বুঝতে সাহায্য করবে।</dd> + <dt> + <a href="/bn-BD/docs/Web/Apps/Apps_for_Android">অ্যানড্রয়েডের জন্য মুক্ত ওয়েব অ্যাপ</a></dt> + <dd> + অ্যানড্রয়েড ডিভাইসে মুক্ত ওয়েব অ্যাপ ইন্সটল ও টেস্ট করা সম্পর্কিত তথ্য।</dd> + <dt> + <a href="/bn-BD/docs/Web/Apps/Release_notes">অ্যাপ রানটাইম রিলিজ নোট সমূহ</a></dt> + <dd> + বিভিন্ন প্ল্যাটফর্মের জন্য ওয়েব অ্যাপ রানটাইমের রিলিজ নোট সমূহ।</dd> + </dl> + <h2 class="Documentation" id="Other" name="Other">অন্যান্য ডকুমেন্টেশন</h2> + <dl> + <dt> + <a href="/bn-BD/docs/Web/Apps/Creating_a_store">স্টোর তৈরি করা</a></dt> + <dd> + যদি আপনি মুক্ত ওয়েব অ্যাপ বিক্রয় ও বিতরণের জন্য নিজের স্টোর বানাতে চান, তাহলে যেসব তথ্য আপনার জন্য সহায়ক হবে, তা এখানে আছে।</dd> + </dl> + <p><span class="alllinks"><a href="/bn-BD/docs/tag/Marketplace">সব দেখুন...</a></span></p> + </div> + <div class="section"> + <h5 class="Tools" id="Tools" name="Tools">এ্যাপ ডেভেলপারদের জনয টূল</h5> +<ul> + <li><a href="https://marketplace.firefox.com/developers/">ফায়ারফক্স ওএস মার্কেটপ্লেস ডেভেলপার হাব</a></li> + <li><a href="/bn-BD/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">ফায়ারফক্স ওএস সিম্যুলেটর</a></li> + <li><a href="/bn-BD/docs/Apps/App_developer_tools">এ্যাপ ডেভেলপার টুলস</a></li> +</ul> +<h2 class="Documentation" id="Documentation" name="Documentation">প্রযুক্তি রেফারেন্স ডকুমেন্টেশন</h2> +<div class="twocolumns"> + <ul> + <li><a href="/bn-BD/docs/CSS" title="CSS">CSS (সিএসএস)</a></li> + <li><a href="/bn-BD/docs/DOM" title="DOM">DOM (ডম)</a></li> + <li><a href="/bn-BD/docs/HTML" title="HTML">HTML (এইচটিএমএল)</a></li> + <li><a href="/bn-BD/docs/JavaScript" title="JavaScript">JavaScript (জাভাস্ক্রিপ্ট)</a></li> + <li><a href="/bn-BD/docs/WebAPI" title="WebAPI">WebAPI (ওয়েব এপিআই)</a></li> + <li><a href="/bn-BD/docs/WebGL" title="WebGL">WebGL (ওয়েব জিএল)</a></li> + <li><a href="/bn-BD/docs/SVG" title="SVG">SVG (এসভিজি)</a></li> + <li><a href="https://www.mozilla.org/bn-BD/apps/">ওপেন ওয়েব এ্যাপ পরিদর্শন</a></li> + <li><a href="https://wiki.mozilla.org/Apps">এ্যাপস প্রজেক্ট উইকি পেজ</a></li> + </ul> +</div> +<h5 class="Community" id="Community" name="Community">কমিউনিটি থেকে সাহায্য নেওয়া</h5> +<p>আপনি যদি এখনও কিভাবে কোন কাজ করতে হবে - এ ব্যাপারে সন্দিহান হয়ে থাকেন, তবে এখনই আলোচনায় যোগ দিন আমাদের সঙ্গে!</p> +<ul> + <li>ওয়েব এ্যাপস ফোরাম: <ul> + <li><a href="https://lists.mozilla.org/listinfo/dev-webapps">Mailing list</a></li> + + + <li><a href="http://groups.google.com/group/mozilla.dev.webapps">Newsgroup</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.webapps/feeds">RSS feed</a></li> +</ul> + <ul> + <li>ওপেন ওয়েব এ্যাপস আইআরসি চ্যানেলে আপনার প্রশ্ন জিজ্ঞাসা করুন: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li> + </ul> + </li> +</ul> +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" rel="external"><em>অনলাইন আচরণবিধি</em> ভুলে গেলে চলবে না...</a></span></p> + </div> +</div> +<p> </p> 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 +--- +<p class="summary">In progess. This page includes archived content for Apps, including obsolete web app content, Firefox OS app-related content, etc.</p> + +<p>{{SubpagesWithSummaries}}</p> 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 +--- +<p><strong><span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স ওএস</span> <span class="hps">অ্যাপস</span></span> </strong> <a href="/en-US/docs/Web/Apps">Open Web apps</a> এর চেয়ে অধিক কিছু নয়, যা <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স ওএস</span> <span class="hps">অপারেটিং সিস্টেম</span> <span class="hps">চলমান</span><span class="hps"> ফোনে</span> <span class="hps">ইনস্টল করা একটি এইচটিএমএল অ্যাপ।<span id="result_box" lang="bn"><span class="hps">এর মানে হল যে, আপনি <span id="result_box" lang="bn"><span class="hps">সরাসরি </span></span>ফ্রন্ট-এন্ড ডেভেলপমেন্ট এর <span id="result_box" lang="bn"><span class="hps">জ্ঞান </span></span></span></span></span></span><span id="result_box" lang="bn"><span class="hps">ব্যবহার করে <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স </span></span></span></span> অপারেটিং সিস্টেমের কোনো ফোনের জন্য অসাধারন <span id="result_box" lang="bn"><span class="hps">অ্যাপ <span id="result_box" lang="bn"><span class="hps">তৈরি করতে পারবেন</span></span></span></span>।</p> + +<p><span id="result_box" lang="bn"><span class="hps">অ্যাপ <span id="result_box" lang="bn"><span class="hps">তৈরীর সাথে জড়িত আরো <span id="result_box" lang="bn"><span class="hps">কৌশল সম্পর্কে জানতে আমাদের <span id="result_box" lang="bn"><span class="hps">টিউটোরিয়াল দেখুন</span></span></span></span></span></span></span></span>: <a href="/en-US/docs/Web/Apps/Getting_Started">Getting started with making apps</a>. <span id="result_box" lang="bn"><span class="hps">একটি নির্দিষ্ট</span> <span class="hps">অপারেটিং সিস্টেমের জন্য</span><span class="hps"> অ্যাপ্লিকেশন <span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">ডেভেলপ </span></span></span></span></span></span>করার ক্ষেত্রে কিছু নির্দেশনা আছে। আপনি <span class="short_text" id="result_box" lang="bn"><span class="hps">প্রাসঙ্গিক তথ্য</span> <span class="hps">পাবেন আমাদের কুইক <span class="short_text" id="result_box" lang="bn"><span class="hps">গাইডে</span></span></span></span>: <a href="/en-US/docs/Mozilla/Firefox_OS/Apps/Writing_a_web_app_for_Firefox_OS">Writing a Web app for Firefox OS</a>.</p> + +<p>একবার বেসিস বিষয়গুলোর সাথে পরিচিত হয়ে গেলে, আপনার <span id="result_box" lang="bn"><span class="hps">সম্পূর্ণ</span></span> <a href="/en-US/docs/Web/Apps/Reference">App Development API Reference</a> প্রয়োজন হবে এবং <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স ওএস</span> <span class="alt-edited hps">অ্যাপ্লিকেশন ডেভেলপমেন্ট</span> <span class="hps">সম্পর্কে বেসিক <span id="result_box" lang="bn"><span class="hps">তথ্যের জন্য,</span></span></span></span> <a href="https://marketplace.firefox.com/developers/">Firefox Marketplace Developer Hub</a> <span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">দেখুন ।</span></span></span></span></p> + +<div class="note"><strong>Note:</strong> Firefox OS currently identifies using the same UA string as Firefox for Android, except without the <code>Android;</code> clause. For example: <code>Mozilla/5.0 (Mobile; rv:18.0) Gecko/18.0 Firefox/18.0</code>.</div> 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 +--- +<p>ফায়ারফক্স ওএস এর জন্য এ্যাপ্লিকেশনগুলো মূলত সাধারণ ওয়েব এ্যাপ; এগুলো সম্পূর্ণরুপে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের মত উন্মুক্ত ওয়েব প্রযুক্তির ওপর ভিত্তি করে তৈরি। আমাদের মূল ডকুমেন্টেশন আপনার জানার প্রায় সবকিছু জানাবে, তারপরেও এখানে কিছু ডকুমেন্ট আছে যা ফায়ারফক্স ওএস ডেভেলপ এবং টেস্ট করা সংক্রান্ত নির্দিষ্ট।</p> +<div class="row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Documentation" name="Documentation">ডকুমেন্টেশন এবং টিউটোরিয়াল</h2> + <dl> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Apps/Writing_a_web_app_for_Firefox_OS">ফায়ারফক্স ওএস এর জন্য ওয়েব এ্যাপ লেখা</a></dt> + <dd> + আপনার প্রথম ফায়ারফক্স ওএস এ্যাপ্লিকেশন তৈরির টিউটোরিয়াল।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Apps/Tips_and_techniques">টিপস এবং কারিগরি</a></dt> + <dd> + আমাদের ডেভেলপারদের সুপারিশকৃত একটি টিপসের সংগ্রহশালা (এবং সমস্যার সমাধান সহ)</dd> + </dl> + <p><span class="alllinks"><a href="/bn-BD/docs/tag/Apps">View All...</a></span></p> + </div> + <div class="section"> + <h2 class="Community" id="Community" name="Community">কমিউনিটি থেকে সাহায্য</h2> + <p>আপনি এ্যাপ-সংক্রান্ত সমস্যার পড়েছেন এবং ডকুমেন্টেশনে খুঁজে পাচ্ছেন না?</p> + <ul> + <li>এইচটিএমএল এবং সিএসএস এর জন্য লেআউট ফোরামে যোগাযোগ: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }} + <ul> + <li>মোজিলা আইআরসি চ্যানেলে আপনার প্রশ্ন জিজ্ঞাসা করুন: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li> + </ul> + </li> + </ul> + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html">অনলাইন আচরণবিধি ভুলে যাবেন না যেন...</a></span></p> + <h2 class="Tools" id="Tools" name="Tools">টুল</h2> + <ul> + <li><span class="external">ফায়ারফক্স <a href="/bn-BD/docs/Tools/Debugger">ডিবাগার</a> দিয়ে ফায়ারফক্স ওএস রিমোট ডিবাগিং করা যায়।</span></li> + <li><span class="external">অন্যান্য <a href="/bn-BD/docs/Tools">ডেভেলপার টুলস</a></span></li> + </ul> + <p><span class="alllinks"><a href="/bn-BD/docs/tag/Tools">সবগুলো দেখুন...</a></span></p> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">সম্পর্কিত টপিক</h2> + <ul> + <li><a href="/bn-BD/docs/Apps">এ্যাপস</a></li> + </ul> + </div> +</div> +<p> </p> 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 +--- +<p>ফায়ারফক্স ওএসের অ্যাপ মূলত সাধারণ HTML, CSS এবং জাভাস্ক্রিপ্টে লেখা ওয়েব অ্যাপ ছাড়া আর কিছুই না। অন্যান্য ওয়েবসাইটের মত এগুলোও আপনি ওয়েবে পাবলিশ করবেন। আপনার ওয়েবসাইটকে মোবাইলে ইন্সটল করার উপযোগী করতে চাইলে আপনাকে শুধুমাত্র একটি ম্যানিফেস্ট যুক্ত করতে হবে এবং একটি "ইন্সটল" বাটন যুক্ত করে দিতে হবে (যা নিয়ে নিচে বিস্তারিত আলোচনা করা হয়েছে।)</p> +<p>শুরু করার জন্য নিচের আর্টিকেলগুলো দারুণ!</p> +<ul> + <li><a href="/bn-BD/docs/Apps/Getting_Started">অ্যাপ বানানো শুরু করা</a></li> + <li><a href="/bn-BD/docs/Apps/Manifest">অ্যাপ ম্যানিফেস্টt</a></li> +</ul> +<p>এছাড়াও চাইলে <a href="/bn-BD/docs/Apps">ওপেন ওয়েব অ্যাপের জগতে</a> ঘুরে আসতে পারেন।</p> +<h2 id="ওয়েব_অ্যাপটি_ইন্সটল_করা">ওয়েব অ্যাপটি ইন্সটল করা</h2> +<p>অ্যাপ এবং অ্যাপ ম্যানিফেস্ট ওয়েবে পাবলিশ করেই কাজ শেষ হয়ে যায়নি, গিকোকে তো জানাতে হবে যে আপনার ওয়েবসাইটটি আসলে একটি অ্যাপ এবং এর ম্যানিফেস্ট আছে! ইন্সটল করার সময় গিকো ম্যানিফেস্ট থেকে অ্যাপের যাবতীয় তথ্য জেনে নেয় এবং হোমস্ক্রিনসহ অন্যান্য জায়গার প্রয়োজনীয় কাজগুলো সেরে নেয়।</p> +<p>অ্যাপ ইন্সটল করার জন্য <a href="/bn-BD/docs/DOM/Apps.install"><code>navigator.mozApps.install</code> API</a> টি কল করুন। আপনার সেলফ-হোস্টেড অ্যাপের জন্য নিচে উদাহরণস্বরুপ একটি ইন্সটল বাটনের কোড দেয়া হয়, যা আপনি আপনার অ্যাপে এম্বেড করে দিতে পারেন।</p> +<pre class="brush: html"><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> +</pre> +<p>উল্লেখ্য, ইন্সটল বাটনটি একটি অ্যাপ মার্কেটেও থাকতে পারে, যেমন ধরুণ <a href="/en-US/docs/Apps/Submitting_an_app">ফায়ারফক্স মার্কেটপ্লেস</a>, তারপরেও আপনার ওয়েবসাইটের মূল পাতায় একটি "ইন্সটল" বাটন থাকা ভালো।</p> +<p>এবার ফায়ারফক্স ওএসের ব্রাউজার অ্যাপের সাহায্যে আপনার সাইটে গিয়ে "ইন্সটল" বাটনে চাপ দিয়ে দেখুন!</p> 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 +--- +<p>{{Next("Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_1_Marionette_Firefox_OS_start")}}</p> + +<div class="summary"> +<p>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.</p> +</div> + +<p>Gaia-ui-tests uses <strong>Gaiatest</strong>, a Python package based around <a href="https://developer.mozilla.org/en-US/docs/Marionette" title="https://developer.mozilla.org/en-US/docs/Marionette">Marionette</a>. 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 <a href="http://docs.seleniumhq.org/projects/webdriver/" title="http://docs.seleniumhq.org/projects/webdriver/">Selenium WebDriver</a> 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.</p> + +<h2 id="Getting_started_with_Gaia_UI_tests">Getting started with Gaia UI tests</h2> + +<p>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 <strong>highly</strong> recommended that you complete this tutorial if you wish to become a contributor.</p> + +<dl> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_1_Marionette_Firefox_OS_start">Part 1: Getting started with Marionette and Firefox OS</a></dt> + <dd>This article covers installing the tools you need to get started with running tests, such as B2G Desktop, Python and Marionette.</dd> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_2_Marionette_Firefox_OS_interactions">Part 2: Basic interactions with Firefox OS using Marionette</a></dt> + <dd>An overview of the basic commands you will use to manipulate Firefox OS via Marionette.</dd> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_3_Reusable_tests">Part 3: Upgrading our code into a reusable test</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_4_Reusing_commands_Firefox_OS_setup">Part 4: Re-using commands to set up Firefox OS</a></dt> + <dd>Here we look at moving some of the commands into Python methods to promote code reuse.</dd> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_5_Introducing_a_test_runner">Part 5: Introducing a test runner</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_6_Marionette_By_class">Part 6: Using tuples, and Marionette's By class</a></dt> + <dd>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 <code>By</code> class.</dd> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_7_Writing_your_own_tests">Part 7: Writing your own tests</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_8_Using_a_base_class">Part 8: Using a base class</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_9_app_objects">Part 9: Reducing duplication with app objects</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Advanced_topics">Advanced topics</h2> + +<p>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.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Gaia_UI_Tests_Run_Tests" title="Gaia UI Tests Run Tests">Running the gaia-ui-tests</a></dt> + <dd>Guides to running the gaia-ui-tests suite against real Firefox OS devices and <a href="/en-US/Firefox_OS/Using_the_B2G_desktop_client">B2G Desktop</a> in a variety of configurations.</dd> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Gathering_power_draw_data_using_gaiatest">Gathering Power Draw</a></dt> + <dd>How to use gaiatest to log power draw while a test is running.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<p><a href="https://github.com/mozilla-b2g/gaia/tree/master/tests/python/gaia-ui-tests">Gaia-ui-tests main repository</a></p> + +<h2 id="QuestionsCommentsConcerns"><span class="mw-headline" id="Questions.2FComments.2FConcerns">Questions/Comments/Concerns </span></h2> + +<p>This project is at a fairly early stage, and your feedback would be greatly appreciated:</p> + +<ul> + <li>Send mails to the <a href="http://mailto:_gaia-ui-automation@mozilla.org">gaia-ui-automation@mozilla.org</a> list.</li> + <li>Alternatively, find us on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> at channels #ateam, #mozwebqa, and #moztpeqa.</li> +</ul> 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 +--- +<p>{{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")}}</p> +<div class="summary"> + <p><span class="seoSummary">এই টিউটোরিয়াল সিরিজটির উদ্দেশ্য হল ফাইয়ারফক্স OS ব্যবহৃত ম্যারিওনেটের জন্য লেখা ও রান সংক্রান্ত অটোনোমেটেড UI টেস্টের সাথে আপনাকে পরিচিত করা। ম্যারিওনেট Getko-ভিত্তিক প্ল্যাটফর্মে টেস্ট রান করানোর জন্য কমান্ড ইস্যু করে। </span></p> +</div> +<p>এই টিউটোরিয়াল সিরিজটি আটোমেটেড টেস্টিং কনসেপ্টের মধ্যে দিয়ে এগোবে এবং আপনাকে ফায়ারফক্স OS (বিশেষ প্রয়োজনীয় <a href="/en-US/Firefox_OS/Using_the_B2G_desktop_client">B2G ডেক্সটপ</a> টেস্টিং টুলসহ) এবং ম্যারিওনেটএর সাথে কাজ করতেও পরিচিত করে। মাঝে মাঝে আমরা চ্যালেঞ্জ আহবান করব আপনার সমস্যার সমাধান বের করতে আপনাকে অনুপ্রাণিত করার জন্য।</p> +<div class="note"> + <p>নোটঃ এই টিউটোরিয়লটি শুধুমাত্র মজিলা পণ্যের জন্য নির্দিষ্ট নয়; যেমনঃ আপনি যদি কোন HTML5 অ্যাপ ডেভলপ করতে থাকেন তবে কোন টেস্ট ফ্রেমওয়ার্কের জন্যও আপনি এই টিউটোরিয়ালটি ব্যবহার করতে পারেন।</p> +</div> +<h2 id="এই_টিউটোরিয়ালটির_জন্য_প্রয়োজনীয়_সফটওয়্যার">এই টিউটোরিয়ালটির জন্য প্রয়োজনীয় সফটওয়্যার</h2> +<p>টিউটোরিয়ালের সময় আমরা এই সফটওয়্যারগুলো ইন্সটল এবং ব্যবহার করবঃ</p> +<ul> + <li>পাইথন 2.7</li> + <li>পিপ ইন্সটলার</li> + <li>কোড লেখার জন্য টেক্সট এডিটর অথবা IDE</li> + <li>Boot2Gecko ডেক্সটপ ক্লাইন্ট (ফায়ারফক্স OS)</li> + <li>ম্যারিওনেট ক্লাইন্ট(OSএর জন্য ওয়েব ড্রাইভার )</li> +</ul> +<h2 id="পাইথন_এবং_পিপ">পাইথন এবং পিপ</h2> +<p>লিনাক্সের মত কিছু অপারেটিং সিস্টেমে পাইথন প্রি-ইন্সটল করা থাকে। ইন্সটল করার আগে দেখে নিন, তা আগে থেকেই ইন্সটল করা আছে কিনা। কোন কমান্ড লাইন অথবা টার্মিনাল থেকে রান করানঃ</p> +<pre class="brush: bash">python --version</pre> +<p>পাইথন 2.6.x অথবা 2.7.x এর যে কোন ভার্শনই এই টিউটোরিয়ালের জন্য চলবে। আপনার যদি পাইথন 2.7 ইন্সটল না করা থেকে থাকে তবে আপনি <a href="https://www.python.org/download/releases/2.7.6/">পাইথন রিলিজ সাইট</a> এ আপনি ইন্সটলার পাবেন।</p> +<p>পিপ ব্যবহৃত হয় পাইথন টুলস ইন্সটল করার জন্য এবং ম্যারিনেট ইন্সটল করার জন্য আমাদের এটি দরকার হয়। আপনি নিরীক্ষা করে দেখতে পারেন আপনার টার্মিনাল বা কমান্ড লাইনে পিপ টাইপিনের মাধ্যমে ইন্সটল হয়েছে কিনা। পিপ ইন্সটল করার জন্য, <a href="http://pip.readthedocs.org/en/latest/installing.html">পিপ ডকুমেন্টেশনের</a> নির্দেশনা অনুসরণ করতে পারেন।<br> + </p> +<h2 id="B2G_ডেক্সটপ">B2G ডেক্সটপ</h2> +<p>B2G ডেক্সটপ ক্লাইন্ট আপনাকে সুযোগ দেয় ডেক্সটপ অথবা ল্যাপটপ কম্পিউটারে Gaia — ফায়ারফক্স OS এর UI — এবং ফায়ারফক্স OS অ্যাপস রান করার করানোর। ডেক্সটপ ক্লাইন্টের বেশ কিছু সীমাব্ধতা আছে — ক্যামেরা, ব্যাটারি প্রভৃতির মত হার্ডওয়্যার ডিভাইসকে emulate করে না— কিন্তু এই টিউটোরিয়ালে আমাদের কাজের জন্য এটি যথাযথ হবে। এবার এটি ইন্সটল করে নেওয়া যাক।</p> +<p><a href="http://nightly.mozilla.org/">ফায়ারফক্স নাইটলি সাইট</a> থেকে সর্বশেষ B2G ডেক্সটপ ডাউনলোড করুন (একদম নিচে ডেক্সটপ Boot2Gecko দেখুন)। B2G ডেক্সটপ ডাউনলোড হয়ে গেলে, কনটেন্টগুলো আপনার কম্পিউটারে একটি ফোল্ডারে এক্সাক্ট করে রাখুন। ফায়ারফক্স OS সিমালটার স্টার্ট করার জন্য আপনার OS এর জন্য সঠিকভাবে<strong> b2g</strong> স্ক্রিপ্ট ফাইলটি রানঃ</p> +<ul> + <li><strong>লিনাক্সঃ </strong>যেখানে আপনি ফোল্ডারটি এক্সট্রাক্ট করে রেখেছেন সেটি নেভিগেট করুন এবং রান করানঃ<code>./b2g.sh</code>.</li> + <li><strong>ম্যাকঃ</strong> আপনার অ্যাপ্লিকেশন ফোল্ডারে B2G.appটি ড্র্র্যাগ এবং ড্রপ করুন এবং সেখান থেকে এটি রান করান।</li> + <li><strong>উইন্ডোজঃ</strong> আপনি যে ডিরেক্টরিতে b2g.exe এক্সট্রাক্ট করেছেন, সেখান থেকে zip টি রান করান।</li> +</ul> +<p>এপ্লিকেশনটি একবার স্টার্ট-আপ হয়ে গেলে এরকম একটি উইন্ডো দেখতে পাওয়ার কথাঃ</p> +<p><img alt="A welcome screen for Firefox OS - says welcome in multiple languages" src="https://mdn.mozillademos.org/files/7207/b2g-start-screen.png" style="width: 322px; height: 509px; display: block; margin: 0px auto;"></p> +<p>ফার্স্ট টাইম ইউজার স্টেপগুলো অনুসরণ করুন, যতক্ষণ না ফায়ারফক্স OS হোমস্ক্রিন পাওয়া যায়। মনে রাখুন, আপনি ফোনের হার্ডওয়্যার বাটন ইম্যুলেট করতে পারেন নিচের কীবোর্ড কমান্ড ব্যবহারের মাধ্যমে, যেটি বেশ উপকারী (যেমনঃ হোম প্রেস করে ফোনকে সচল করা )।</p> +<table class="standard-table"> + <thead> + <tr> + <th scope="row"> + <p> </p> + </th> + <th scope="col"> + <p>উইন্ডোজ/লিনাক্স কীবোর্ড</p> + </th> + <th scope="col"> + <p>ম্যাক OS কীবোর্ড</p> + </th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"> + <p>হোম বাটন</p> + </th> + <td> + <p>Home</p> + </td> + <td> + <p>Fn+left arrow</p> + </td> + </tr> + <tr style="height: 0px;"> + <th scope="row"> + <p>পাওয়ার বাটন</p> + </th> + <td> + <p>End</p> + </td> + <td> + <p>Fn+right arrow</p> + </td> + </tr> + <tr> + <th scope="row"> + <p>ভলিউম আপ/ডাউন</p> + </th> + <td> + <p>Page up/Page down</p> + </td> + <td> + <p>Fn+ up/down arrow</p> + </td> + </tr> + </tbody> +</table> +<p>এই পর্যায়ে আপনি B2G ডেক্সটপ ওপেন রেখেই একপাশে রেখে পরবর্তী কাজ করতে পারেন। এবার আমরা ম্যারিনেট ইন্সটল করে কাজটি শেষ করব।</p> +<h2 id="ম্যারিওনেট">ম্যারিওনেট</h2> +<p>দুইটি অংশ আছে ম্যারিওনেটে; ক্লাইন্ট — যেটি আপনার আপনার ল্য্যাপটপে অপারেট করে — এবং সার্ভার — যা ফায়ারফক্স OS সার্ভারের মধ্যে কাজ করে। তখন পাপেটরের মত ম্যারিওনেট সার্ভার সরাসরি ফায়ারফক্স OS কন্ট্রোল করতে পারে।</p> +<p><img alt="marionette architecture showing marionette server inside Firefox OS and marionette client on its own outside" src="https://mdn.mozillademos.org/files/7223/marionette-basic-diagram.png" style="width: 352px; height: 186px; display: block; margin: 0px auto;"></p> +<p>আমরা যেহেতু ডেক্সটপ B2G ক্লাইন্ট ব্যবহার করছি, তাই ম্যারিওনেট সার্ভার প্রি-ইন্সটল করা আছে (আপনি যখন কোন রিয়েল ডিভাইসের জন্য ফায়ারফক্স OS এর ইঞ্জিরিয়ারিং-কনফিগারড বিল্ড ব্যবহার করছেন তখনও এটি প্রযোজ্য )। ফায়ারফক্স নিয়ন্ত্রণ করতে পারার আগে, আমাদের লোকাল কম্পিউটারে ম্যারিওনেট ক্লাইন্ট ইন্সটল করা দরকার। আপনার টার্মিনালে নিচের কমান্ডটি রান করইয়ে এটি করা হয়ঃ</p> +<pre class="brush: bash">pip install marionette_client</pre> +<p>এখনকার জন্য এটুকুই। আমরা তৈরি এবং যাওয়ার জন্য প্রস্তুত !</p> +<p> </p> 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 +--- +<p>{{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")}}</p> +<div class="summary"> + <p><span class="seoSummary">আমাদের টিউটোরিয়ালের দ্বিতীয় অংশে আমরা কিছু সাধারণ ম্যারিওনেট কমান্ড দিয়ে শুরু করব যা দিয়ে রিমোটলি ফায়ারফক্স OS নিয়ন্ত্রণ করা যায়। এটি কোন টেস্টের সম্পূর্ণ লেখা ধারণ করে না তবে এটি আপনাকে বেসিক কোড ফিচার শেখায় যা টেস্ট লেখার সময় আপনার কাজে লাগবে। তৃতীয় অংশে, আমরা একটি প্রকৃত টেস্টের মাধ্যমে কোডটিকে আরো মার্জিত করার জন্য অগ্রসর হব। </span></p> +</div> +<h2 id="ফায়ারফক্স_OS_স্টার্ট_আপ">ফায়ারফক্স OS স্টার্ট আপ</h2> +<p>এই টেস্টগুলো লেখার সময় আমাদের আগে থেকেই ফায়ারফক্স OS রান করিয়ে নির্দেশ গ্রহণের জন্য প্রস্তুত রাখা লাগবেঃ</p> +<ol> + <li>B2G ডেক্সটপ স্টার্ট আপ করুন।</li> + <li>লক স্ক্রিন নিষ্ক্রয় করুনঃ <em>সেটিং অ্যাপ > স্ক্রিন লক > আনচেক লক স্ক্রিন।</em></li> + <li> স্ক্রিন টাইম আউট/ স্লিপ মোড নিষ্ক্রিয় করুন এভাবেঃ <em>সেটিং অ্যাপ > ডিসপ্লে > স্ক্রিন টাইমআউট </em>সেটিং <em>নেভার</em> এ দিয়ে।</li> + <li>উইন্ডোটি পাশে সরিয়ে রেখে আমাদের টেস্ট কমান্ডের জন্য অপেক্ষা করুন।</li> +</ol> +<h2 id="ম্যারিওনেট_ফায়ার_আপ_করা">ম্যারিওনেট ফায়ার আপ করা</h2> +<p>এখন আমরা শুরু করব পাথন কনসোলঃ খুবই সাধারণভাবে একটি টার্মিনাল উইন্ডো ওপেন করে <code>python</code> কমান্ড ইস্যু করুন।</p> +<p>এখান থেকে আমরা ফায়ারফক্স OS এর ভিতরে ম্যারিওনেট সার্ভারে কমান্ড দেওয়া শুরু করতে পারি। নিচের বেশ কিছু কমান্ড ইস্যু করার পর আপনার ফায়ারফক্স OS এর প্রতিক্রিয়া দেখতে পাওয়ার কথা। আমাদের প্রয়োজনীয় কোড সংবলিত লাইব্রেরী ইমপোর্ট করতে ম্যারিওনেটে পাইথন কনসোলে নিচের কমান্ডটি প্রবেশ করানঃ</p> +<pre class="brush: bash">from marionette import Marionette</pre> +<p>এখন নিচের লাইন দুইটি রান করান, যা ক্লাইন্ট থেকে কমান্ড গ্রহণের জন্য ম্যারিওনেট সেশনকে ইনিশিয়েট করেঃউপরে যেরকম বলা হয়েছে আপনি যদি সেভাবে লক স্ক্রিন নিষ্ক্রিয় না করে থাকেন তবে আপনি প্রোগ্রামের মাধ্যমে তা করতে পারেন এই কমান্ডটি ব্যবহার করেঃ</p> +<pre class="brush: bash">marionette = Marionette() +marionette.start_session()</pre> +<pre class="brush: bash">marionette.execute_script('window.wrappedJSObject.lockScreen.unlock();')</pre> +<h2 id="ফায়ারফক্স_OS_এর_মধ্যে_বিভিন্ন_ফ্রেম_প্রবেশ_করানো">ফায়ারফক্স OS এর মধ্যে বিভিন্ন ফ্রেম প্রবেশ করানো<br> + </h2> +<p>ফায়ারফক্স এ ওয়েব অ্যাপ বিভিন্ন ইনফ্রেমে কাজ করে। ভিন্ন ভিন্ন ইনফ্রেমে (কোন উইন্ডোর মত) ওয়েব অ্যাপ রান করলে তাদের পূর্ণ নিরাপত্তা নিশ্চিত হয় এবং একই সাথে যথাযথ ব্যবস্থাপনাও। অ্যাপ যেখানে রান করে সেটিকে আপনি একটি স্যান্ডবক্সের মত ভাবতে পারেন। শুধুমাত্র ম্যারিওনেটই কোন নির্দিষ্ট সময়ে একটি ফ্রেমে কাজ করতে পারে। আমরা যে ফ্র্রেম নিয়ে কাজ করতে যাচ্ছি তাতে সুইচ হওয়ার জন্য ম্যারিওনেট দরকারঃ</p> +<p>টপ ফ্রেমটিও হল সিস্টেম অ্যাপ। প্রত্যেকটি অ্যাপ এবং তাদের ফ্রেম হল সিস্টেম অ্যাপের আওতাভুক্ত। আমাদের নতুন ম্যারিওনেট সেশন সিস্টেম ফ্রেম স্টার্ট করতে সক্ষম কিন্তু টেস্ট স্টার্ট করার জন্য আমাদের তা খুঁজে হোমস্ক্রিনে সুইচ করার দরকার হবে।</p> +<p>ইনফ্রেম খোঁজার জন্য, আমাদের কোনভাবে এটি নির্দিষ্ট করা লাগবে। যেহেতু ম্যারিওনেট ওয়েব ড্রাইভার API ভিত্তিক, তাই এলিমেন্ট লোকেট করার জন্য এটি একই তথ্য ব্যবহার করে। তাই আমরা ওয়েব ড্রাইভারে ওয়েব এলিমেন্ট নির্দিষ্ট করার জন্য যে কোন তথ্য ব্যবহার করতে পারি। আরো তথ্য জানুন<a href="http://www.w3.org/TR/webdriver/#element-location-strategies"> এলিমেন্ট লোকেশন স্ট্র্যাটিজিজ</a> এ।</p> +<p>এ ক্ষেত্রে আমরা হোমস্ক্রিন ইনফ্রেম সিলেক্ট করার জন্য CSS সিলেক্টর <code>div.homescreen iframe</code> ব্যবহার করব;<code> find_element()</code> ফাংশনটি এটিকে দ্বিতীয় আর্গুমেন্ট হিসাবে নেয়, প্রথম আর্গুমেন্টটি হল খোঁজ করার জন্য কোন সিলেকশন ম্যাকানিজম ব্যবহৃত হচ্ছে তা নির্ধারণ করা। তারপর আমরা এই ফলাফল কোন একটি ভ্যারিয়েবলে স্টোর করে রাখব এবং আর্গুমেন্ট হিসাবে তা দিয়ে <code>switch_to_frame()ফাংশনটি রান করাব</code>। নিচের দুইটি নির্দেশ এখন অনুসরণ করুনঃ</p> +<pre class="brush: bash"># 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)</pre> +<div class="note"> + <p><strong>নো</strong><strong>টঃ</strong>আরো পড়ার জন্য এবং সুইচিং ফ্রেম সম্পর্কিত ডায়াগ্রাম জানার জন্য অনুগ্রহ করে পড়ুন<a href="https://blog.mozilla.org/webqa/2013/02/13/part-2-ui-testing-on-firefox-os-working-with-iframes/"> iFrames দিয়ে কাজ করা</a>।</p> +</div> +<h2 id="অ্যাপ্লিকেশন_ওপেন_করা">অ্যাপ্লিকেশন ওপেন করা</h2> +<p>ঠিক আছে। এখন আমরা হোমস্ক্রিন অ্যাপ এ আছি। <code>tap()</code> function এর সাথে আমরা <code>find_element()ব্যবহার করে </code>আইকন এবং ট্যাপকে নির্দিষ্ট করতে পারি।</p> +<pre class="brush: bash">contacts_icon = marionette.find_element('css selector', "#footer li[aria-label='Contacts']") +contacts_icon.tap()</pre> +<p>এই কাজগুলো সব ঠিক মত হয়ে থাকলে আপনার এখন কনটেন্টস অ্যাপ ওপেন দেখতে পাওয়ার কথা, কিন্তু কনটেন্ট অ্যাপ ফ্রেম নিয়ে কাজ করার জন্য আমাদের কনটেন্ট অ্যাপ ফ্রেম সুইচ করতে হবে, যেমনটি আমরা আগে হোমস্ক্রিনে করেছিলাম আগেঃ</p> +<pre class="brush: bash"># 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)</pre> +<p>ফ্রেমে সুইচ করলে তা রিটার্ন করবে <code>True</code>. যদি তা হয়, তাহলে তো খুবই ভাল। এর মানে হল আমরা কন্টেন্টস্ অ্যাপ এর ভেতরে আছি এবং এটি ব্যবহারের জন্য প্রস্তুত।</p> +<h2 id="অ্যাপ_ম্যানিপুলেট_করা">অ্যাপ ম্যানিপুলেট করা</h2> +<p>পরবর্তী ধাপে আমরা একটি টিপিক্যাল টেস্ট টাস্ক পারফর্ম করব — নতুন অ্যাকাউন্ট তৈরি করা, তাতে নাম দেওয়া এবং সেভ করা। প্রথমে, আমরা অ্যাড কনটেন্ট বাটনটি ট্যাপ করবঃ</p> +<pre class="brush: bash"># 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 (<code>send_keys()</code> is used to insert a value into an element): +</pre> +<pre class="brush: bash">marionette.find_element('id', 'givenName').send_keys('Foo') +# Add the contact's surname +marionette.find_element('id', 'familyName').send_keys('Bar')</pre> +<p>এখন <em>ডান</em> বাটনটি ট্যাপ করুন কনটেন্ট সেভ করার জন্যঃ</p> +<pre class="brush: bash"><code class="language-html">marionette.find_element('id', 'save-button').tap()</code></pre> +<p>এবার আপনার কনটেন্টস্ অ্যাপ এর মধ্যে একটি নতুন কনটেন্ট দেখতে পাওয়ার কথা। যদি তাই হয়, দারুণ!</p> +<div class="note"> + <p><strong>নোটঃ</strong> যদি আপনি না দেখেন, কনটেন্ট অ্যাপ পুনস্থাপন করুন অথবা কিল করুন এবং ফায়ারফক্স OS নেভিগেট করে হোমস্ক্রিনে ফিরে যান এবং পুনরায় টাস্কটি রান করার চেষ্টা করুন।</p> +</div> +<h2 id="আপনার_ম্যারিওনেট_সেশন_বন্ধ_করা">আপনার ম্যারিওনেট সেশন বন্ধ করা</h2> +<p>শেষ পর্যন্ত, আপনার নিচের নির্দেশ ইস্যু করার মাধ্যমে ম্যারিওনেট সেশন শেষ করার কথাঃ</p> +<pre class="brush: bash">marionette.delete_session()</pre> +<p>বেশ ভালো কাজ হয়েছে, কিন্তু যখন আপনি টেস্ট রান করানোর সময় আপনি পাইথন কনসোলে টাইপ করতে পারবেন না। তৃতীয় অংশে, আমরা স্ক্রিপ্টটি পাইথন ফাইলে কম্পাইল করব যা আমরা প্রতিবার ব্যবহার করতে করতে পারব যখনই আমরা টেস্ট রান করাব। আমরা একটি অ্যাসারশনও যুক্ত করব যাতে আমরা বুঝতে পারি টেস্ট সফল নাকি বিফল হয়েছ।</p> +<div class="note"> + <p><strong>নোটঃ</strong> ম্যারিওনেট লেখার সময়, আপনি নিশ্চয় খেয়াল করে থাকবেন আপনার সমাধান খুঁজে বের করার জন্য কোন অ্যাপের HTMLস্ট্রাকচার এর আওতায় প্রবেশ করা জরুরি। <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_7_Writing_your_own_tests#Resources">সপ্তম অংশঃ আপনার নিজের টেস্ট লেখা</a> আপনার সাহায্যার্থে কিছু প্রয়োজনীয় রিসোর্স দেয়।</p> +</div> +<p> </p> 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 +--- +<p>{{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")}}</p> + +<div class="summary"> +<dl> + <dt> </dt> + <dt><span class="seoSummary">দ্বিতীয় অংশ থেকে আমরা দেখেছি যে, ম্যারিওনেট ক্লাইন্ট কমান্ড ব্যবহার করে খুব সহজেই ফায়ারফক্স OS নিয়ন্ত্রণ করতে পারি, কিন্তু পাইথন কনসোলে তা টাইপ করা অত্যন্ত ধৈর্য সাপেক্ষ ব্যাপার। টেস্ট অটোমেশনের প্রধান সুবিধা হল এটি নিজে থেকে রান হতে পারে। এই অংশে আমরা শিখব তা কীভাবে করতে হয়, আমরা আমাদের সব কোড কমান্ড একটি পাইথন ফাইলে রাখি যাতে সবগুলো একবারেই রান হয়ে যায়।</span></dt> +</dl> +</div> + +<h2 id="টেস্ট_কেস_পুনরায়_আলোচনা">টেস্ট কেস পুনরায় আলোচনা</h2> + +<p>দ্বিতীয় অংশে আমরা একটি আদর্শ টেস্ট রান করার ধাপগুলো দেখেছি — কন্ট্যাক্ট অ্যাপ ওপেন করা এবং নতুন কোন কন্ট্যাক্ট অ্যাড করাঃ</p> + +<ol> + <li>ফায়ারফক্স OS আনলক করা (ঐচ্ছিক; দ্বিতীয় অংশে, আমরা লক স্ক্রিন নিষ্ক্রিয় করে দিয়েছিলাম, সেজন্য আমরা সেটি এই অংশের কোডে উল্লেখ করব না।)</li> + <li>কন্ট্যাক্ট অ্যাপে সুইচ করা</li> + <li>নতুন কন্ট্যাক্ট আইকন ট্যাপ অ্যাড করা</li> + <li>কন্ট্যাক্ট তালিকায় টাইপ করা</li> + <li>done ট্যাপকরা</li> + <li>অপেক্ষা করা এবং নিরীক্ষণ করা কন্ট্যাক্ট প্রস্তুত কিনা</li> +</ol> + +<h2 id="আমাদের_টেস্ট_পাইথন_ফাইলে_রাখা">আমাদের টেস্ট পাইথন ফাইলে রাখা</h2> + +<p>আমরা যদি এই সমস্ত ধাপগুলো একটি পাইথন ফাইলে রাখি, তবে আমরা তা পুনরায় ব্যবহার করতে পারব এবং অনেক দ্রুত রান করাতে পারব। <code>আপনার পছন্দ মত কোন</code> convenient directory তে<code> test_add_contact.py নামে </code>একটি নতুন টেক্সট ফাইল তৈরি করুন।</p> + +<p>এই ফাইলে, নিচের লিস্ট অনুসারে, দ্বিতীয় অংশে দেখানো কমান্ডগুলো প্রবেশ করান। আমরা পাইথন পর্যায়ের স্ট্রাকচার ব্যবহার করব, কারণ এটি ভাল চর্চা এবং এই টিউটোরিয়ালে পরবর্তীতে স্টেপে বিল্ড অনের জন্য ভাল ভিত্তি তৈরি করে।</p> + +<pre class="brush: python">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() +</pre> + +<div class="note"> +<p><strong>নোটঃ</strong>একটি ব্যাপার আপনি খেয়াল করে থাকবেন যেটি আমরা দ্বিতীয় অংশে করি নাই তা হল পাইথন <code>time.sleep()ফাংশন</code>— এটি একটি নির্দিষ্ট সমযের জন্য স্ক্রিপ্টটি মন্থর করে দেয় (defined in seconds) পরবর্তী লাইনে অগ্রসর হওয়ার আগে। আমরা অটোমেটেড টেস্টে এই লাইনগুলো যুক্ত করেছি কারণ আমাদের ব্যবহারকারীকে বাটন ট্যাপ করা এবং আরও আঞ্জাঞ্জ ব্যাপারে ব্যাপারে সিমুলেট করা দরকার এবং ফায়ারফক্স OS এর resulting কাজ সম্পন্ন হওয়ার জন্য। আমরা যদি কোন দেরি না করেই এই স্ক্রিপ্টটি রান করে করাতাম তবে পাইথন তাৎক্ষণিকভাবে সবকিছু করে ফেলত এবং খুব সম্ভবত সেটি টেস্ট ফেল করার কারণ হত কারণ ফায়ারফক্স OS সেটি করতে সমর্থ নয়।</p> +</div> + +<p> </p> + +<p>এখন আপনি ডিরেক্টরিতে নেভিগেট করে টেস্ট রান করতে পারেন। টেস্টটি আপনার টার্মিনালে সেভ হয়ে আছে এবং নিচের কমান্ডটি রান করছেঃ</p> + +<pre class="brush: bash">python test_add_contact.py</pre> + +<div class="note"> +<p><strong>নোটঃ</strong> পাইথন ইনডেন্টেশন রুল এর ব্যাপারে সতর্ক হন। কপি এবং পেস্ট করার পর কোড সঠিকভাবে রান করানোর জন্য আপনার সবকিছু সঠিকভাবে ইনডেন্ট করার প্রয়োজন হতে পারে। আপনি যদি এই সংক্রান্ত কোন ত্রুটি পেয়ে থাকেন তবে খেয়াল করে দেখুন সব ইনডেন্টেশন লেভেল ভিন্ন ভিন্ন ট্যাবে পৃথকীকৃত কিনা।</p> +</div> + +<div class="note"> +<p><strong>নোটঃ</strong> আপনি আরো খেয়াল করে থাকবেন যে, উপরের কোড ব্যবহার করে যে নাম যুক্ত করা হয়েছে তা হল "John Doe", দ্বিতীয় অংশে ব্যবহৃত নাম "Foo Bar" এর থেকে আলাদা। এটি করার কারণ হল কোড যাতে করে সফলভাবে রান করানো যায় এবং অন্য কন্ট্যাক্ট যুক্ত করা যায়। আপনি যদি একই নাম ব্যবহার করে অন্য একটি কন্ট্যাক্ট যুক্ত করতে চেষ্টা করেন তবে ফায়ারফক্স OS আপনাকে অনুরূপ কন্ট্যাক্টের ব্যাপারে সতর্ক করে দিবে। এক্ষেত্রে সব থেকে ভাল উপায় হল, ফায়ারফক্স OS ইন্টারফেসে টেস্টটি পুনরায় রান করানো এবং প্রতিবার রান করানোর পূর্বে আগেরটি মুছে ফেলা।</p> +</div> + +<h2 id="অ্যাসারশন_যুক্ত_করা">অ্যাসারশন যুক্ত করা</h2> + +<p>যে জিনিসটি আবারো আমরা আমাদের টেস্ট থেকে মিস করছি, যা অটোমেটেড টেস্টের জন্য যেটি দরকারি, তা হল অ্যাসারশন — ফায়ারফক্স OS কে আমরা যে পর্যায়ে নিয়ে যেতে চাচ্ছি, সেটি সফল ছিল কিনা তা পরিমাপের একটি তথ্য এটি। কিছু কোড যুক্ত করে আমরা দেখব নতুন কন্ট্যাক্টটি যুক্ত হয়েছে কিনা।<br> + <br> + <code># Close the Marionette session...</code> লাইনের ঠিক আগে, এই কোডটি যুক্ত করুন, তবে তার আগে এটি নিশ্চিত করুন সেটি ওই ক্লাসের অন্য লাইনের সাথে একই লেভেলে ইনডেন্ট হয়েছে কিনাঃ</p> + +<pre class="brush: python"># 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' + +</pre> + +<p>পুরানো কন্ট্যাক্টটি মুছে ফেলুন এবং নিচেরটিসহ টেস্টটি পুনরায় রান করানোর চেষ্টা করুনঃ</p> + +<pre class="brush: bash">python test_add_contact.py</pre> + +<p>যদি এগুলো সব থিক্তহাক মত রান করে তাহলে ভাল, এখন আমাদের জন্য আছে ফাংশন টেস্ট!</p> + +<div class="note"> +<p><strong>নোটঃ</strong> অ্যাসারশনকে সাথে সাথেই ঠিকভাবে কাজ করতে দেখা যাবে না, কিন্তু টেস্ট রানার শুরু করার জন্য অ্যাসারশন খুবই গুরুত্বপূর্ণ যেমনটি বলা হয়েছে <a href="/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_5_Introducing_a_test_runner">পঞ্চম অংশঃ টেস্ট রানারের সাথে পরিচিত হওয়া</a>। ইউনিটেস্ট এর মত টেস্ট রানার অ্যাসারশন ব্যবহার করে দেখে টেস্ট সফলভাবে শেষ হয়েছে কিনা অতপর এই টেস্টের ফলাফল দিন (OK অথবা FAIL)</p> +</div> + +<h2 id="সময়ের_উপর_একটি_নোট">সময়ের উপর একটি নোট</h2> + +<p>অটোমেটেড টেস্ট রান করানোর সময় যে কাজটি বেশ কষ্টসাধ্য তা হল সময় নির্ধারণ। টেস্টটি যদি ফায়ারফক্স OS এর একটি টেস্ট সম্পন্ন হবার আগেই পরবর্তী ধাপে অগ্রসর হয় তবে খুব সম্ভবত আমরা ভুল পথে আগাচ্ছি।<br> + <br> + উপরে যেমনটি বলা হয়েছে, নমুনা কোডে আমরা <code>এই সমস্যার সমাধানে time.sleep(x)</code> কমান্ডটি যুক্ত করেছি। যাই হোক <code>time.sleep(x)</code> ব্যবহার করা খুব ভাল কথা না। হার্ডকোডেড সেট টাইম ব্যবহার করার ফলে এম্নটি হতে পারে আপনার টেস্ট যথেষ্ট সময় ধরে রান করছে না অথবা অনেক বেশি সময় ধরে রান করছে। সব থেকে খারাপ ব্যাপারটি হল latter; এটি ফলস নেগেটিভ কেস রেসাল্ট দেখাবে — যার মানে হল অ্যাপ যথার্থভাবে কার্যকর হলেও আশানুরূপ গতিতে কাজ না করে কিছুটা ধীরে কাজ করার পরিবর্তে সেটি টেস্ট ব্যর্থতা ফল দেখাবে।</p> + +<p>পরবর্তী অংশে, আমরা আলাদা আলাদা পাইথন ফাংশনে টেস্টের বিশেষ কিছু অংশের উপর অগ্রসর হব এবং<code> sleep()</code> ফাংশনের পরিবর্তে উপযুক্ত ডাইনামিক ওয়েটস দিয়ে।</p> 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 +--- +<p>{{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")}}</p> + +<div class="summary"> +<div class="summary"> +<p><span class="seoSummary">দ্বিতীয় এবং তৃতীয় অংশে আমরা ওয়ার্কিং টেস্ট পেয়েছি, কিন্তু আমরা যদি টেস্ট রান করানোর আগে এটির স্টেট পুনসথাপন করতে চায় (যেমন ওপেন অ্যাপ কিল করা) তবে আমাদেরকে তা করতে হবে আবার নতুন করে করতে হবে। সেটা কিছুটা বিরক্তিকর, তাই এটিকে স্বনির্ভর করা দরকার! এই অংশে আমরা সেটিই করা দেখব এবং আরো দেখব আলাদা আলাদা পাইথন মেথডে কোডের বিট ব্রেক আউট করা, যা আমরা রিইউজ করতে পারি।</span></p> +</div> +</div> + +<h2 id="নিজে_থেকে_পুনঃস্থাপিত_স্টেট">নিজে থেকে পুনঃস্থাপিত স্টেট</h2> + +<p>কোন টিপিক্যাল টেস্ট রানের আগে, আমাদের খুব সম্ভবত ফায়ারফক্স OS লক স্ক্রিন আনলক করে নেওয়া লাগবে এবং সব চলমান অ্যাপ কিল করতে হবে। এখন দেখা যাক এটি কীভাবে করা যায়।</p> + +<h3 id="লক_স্ক্রিন_আনলক_করা">লক স্ক্রিন আনলক করা</h3> + +<p>অন্য কোথাও যাওয়ার আগে, লক স্ক্রিন পুনরায় সক্রিয় করে নিনঃ <em>সেটিং অ্যাপ > স্ক্রিন লক > লক স্ক্রিন </em>, যদি আপনি তা না করে থাকেন।</p> + +<p>নিচের পাইথন ম্যাথোডটি আপনার <code>test_add_contact.py</code> ফাইলে সংযুক্ত করুন, ক্লাসের ভেতরেঃ</p> + +<pre class="brush: python">def unlock_screen(self): + self.marionette.execute_script('window.wrappedJSObject.lockScreen.unlock();')</pre> + +<p>এখন, যখন কল করা হবে, এই ম্যাথোডটি ফায়ারফক্স OS আনলক করবে। এখন নিচের লাইনগুলো আমাদের কোডে <code>self.marionette.start_session()</code> লাইনটির ঠিক নিচে যুক্ত করে এটিকে কল করা যাকঃ</p> + +<pre class="brush: python"># Unlock the screen +self.unlock_screen()</pre> + +<h3 id="কোন_ওপেন_অ্যাপ_কিল_করা">কোন ওপেন অ্যাপ কিল করা</h3> + +<p>এখন আমরা কোড রান করানোর সময় অন্য সব ওপেন কোড কিল করার জন্য আমাদের কোডে একটি ম্যাথোড যুক্ত করব। সেটা এমন দেখাবেঃ</p> + +<pre class="brush: python"> 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); + """)</pre> + +<p><code>সর্বশেষ অংশে যুক্ত unlock_screen</code> ম্যাথোডের ঠিক পরে এটি যুক্ত করুন।</p> + +<p>তারপর, বাকি টেস্টের সাথে এটিকে রান করানোর জন্য নিচের ফাংশনটি যুক্ত করুন; <code>self.unlock_screen()</code> এর ঠিক পরে যুক্ত করুনঃ</p> + +<pre class="brush: python"># kill all open apps +self.kill_all()</pre> + +<p>এখন পুনরায় টেস্ট রান করানোর চেষ্টা করার আগে, শেষবার টেস্ট রান করানোর পর কন্ট্যাক্ট অ্যাপ ওপেন রেখে লক স্ক্রিনে ফিরে যাওয়ার চেষ্টা করুন। স্ক্রিন আনলক থাকার কারণে, টেস্ট পুনরায় রান করানর আগে, ওপেন কন্ট্যাক্ট অ্যাপ নিজে থেকেই কিল হয়ে যাবে, তাই এটির অবস্থা আপনার টেস্ট করানর প্রক্রিয়া ব্যাহত করবে না। আপনার টেস্ট রানের সুদূর নির্ভরতার জন্য এটি গুরুত্বপূর্ণ।</p> + +<p>রানটি বেশ কয়েকবার রান করিয়ে দেখুন সব কিছু ঠিকঠাক মত কাজ করছে কিনা এবং ফায়ারফক্স ঠিক মত রিসেট করে নিন।</p> + +<h2 id="ডাইনামিক_ওয়েটস্">ডাইনামিক ওয়েটস্</h2> + +<p>তৃতীয় অংশে আমরা ডাইনামিক ওয়েটস্ এর গুরুত্ব উল্লেখ করেছি। ঠিক ওয়েব ড্রাইভার/ সেলেনিয়াম2 এর মত ম্যারিওনেটেরও এমন নিজস্ব সিনট্যাক্স আছেঃ</p> + +<pre class="brush: python">from marionette_driver import Wait + +# Wait until element is displayed +Wait(self.marionette).until(lambda m: m.find_element('id', 'element_id').is_displayed())</pre> + +<p>যতক্ষণ না পর্যন্ত নির্ধারিত এলিমেন্টটি ডিসপ্লে হবে তখন পর্যন্ত এই কোডটি অপেক্ষা করবে। এবার আমরা জানি সেক্ষেত্রে আমাদের কী করতে হবে। এবার আমাদের টেস্টে এই কোড কন্সট্রাক্ট ব্যবহার করে দেখা যাক।</p> + +<p>প্রথমত, আপনার বর্তমান ইম্পোরট লাইনের ঠিক নিচে ওয়েট ইম্পোরটটি যুক্ত করুনঃ</p> + +<pre class="brush: python">from marionette_driver import Wait</pre> + +<p>এখন আমরা কন্ট্যাক্ট আইকনে ট্যাপ করার পর ( <code>self.marionette.switch_to_frame()</code>এর ঠিক পরে ) দ্বিতীয় <code>time.sleep(2)ফাংশনটির পরিবর্তে</code> <code>Wait()</code>ম্যাথোডটি লিখব। কন্ট্যাক্ট ফ্রেম ডিসপ্লে না হওয়া পর্যন্ত সেটি অপেক্ষা করবেঃ</p> + +<pre class="brush: python">Wait(self.marionette).until(lambda m: m.find_element('css selector', "iframe[data-url*='contacts']").is_displayed())</pre> + +<p>আমরা যখন কোন নতুন কন্ট্যান্ট অ্যাপ তৈরির জন্য + চিহ্নতে ট্যাপ করি, আমরা <em>অ্যাড কন্টেন্ট </em>এর জন্য অপেক্ষা করব যাতে ভিউটি সম্পূর্ণ সরে যায়।এবার আমরা যেটি ট্যাপ করব তা হল <em>Done</em> (সেভ) বাটন। তাই সেটি সঠিক স্থানে না আসা পর্যন্ত আমরা অপেক্ষা করব। তৃতীয় <code>time.sleep(2)ফাংশনটি</code>র পরিবর্তে নিচেরটি লিখবঃ</p> + +<pre class="brush: python">Wait(self.marionette).until(lambda m: m.find_element('id', 'save-button').location['y']== 0)</pre> + +<p>এক্ষেত্রে আমরা <em>Done</em> বাটনটি স্ক্রিনের শীর্ষে দেখতে পাইয়া পর্যন্ত অপেক্ষা করব; প্রথমের দিকে এলিমেন্টটি স্ক্রিনের ভিন্ন ভিন্ন স্থানে দেখতে পাওয়া যাবে তবে চূড়ান্ত স্থায়ী অবস্থানের জন্য অপেক্ষা করাই শ্রেয়।</p> + +<p>আমরা এলিমেন্টগুলোর *not* দৃশ্যমান হওয়ার জন্যও অপেক্ষা করতে পারি। <em>Done</em> ট্যাপ করার পর, not এর মত একই ধরণের <code>Wait()ম্যাথোড ব্যবহার করে </code><em>Done</em> বাটনটি অদৃশ্য হওয়ার জন্য অপেক্ষা করব, বাকি কোড রান করানোর আগে। চতুর্থ এবং সর্বশেষ <code>time.sleep(2)</code>ফাংশনটির পরিবর্তে নিচেরটি লিখুনঃ</p> + +<pre class="brush: python">Wait(self.marionette).until(lambda m: not m.find_element('id', 'save-button').is_displayed())</pre> + +<p>আপনার টেস্ট যদি ঠিক মত রান করতে থাকে তাহলে তো দারুণ! আমরা আমাদের টেস্টকে আরো বেশি মডুলার এবং নির্ভরযোগ্য করে ফেলেছি। পঞ্চম অংশে আমরা টেস্ট রানার ব্যবহারের সাথে পরিচিত হব।</p> 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 +--- +<p>{{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")}}</p> + +<div class="summary"> +<p><span class="seoSummary">এ পর্যন্ত সবকিছু ঠিকঠাক মত চলছে, কিন্তু এখন পর্যন্ত আমরা শুধুমাত্র একটি টেস্ট নিয়ে কাজ করছি। বাস্তবে ওয়েব অ্যাপের বিশাল দুনিয়ায় শত শত হাজার হাজার টেস্ট কেস আছে এবং অবশ্যই আমরা প্রত্যেকটি আলাদা আলাদা করে রান করাতে যাব না। এই মুহূর্তে আমাদের টেস্ট খোঁজা এবং এক্সিকিউট করার জন্য প্রয়োজন টেস্ট রানার ব্যবহার করা এবং এই নিবন্ধে আমরা সেটিই দেখব।</span></p> +</div> + +<h2 id="টেস্ট_রানার">টেস্ট রানার</h2> + +<p>টেস্ট রানার প্রকৃত টেস্টিং ফ্রেমওয়ার্কের জন্য বেশ ভালো সুযোগ দেয়। টেস্ট রানারের কাজ হল টেস্ট ডিজাইন করা, অ্যাট্রিবিউটের সাথে টেস্ট ট্যাগ করা (annotations) এবং রিপোরটিং ও অঞ্জাঞ্জ ফিচারের সুযোগ দেয়। বেশ কিছু সংখ্যক পাইথন টেস্ট রানার আছে কিন্তু এই ক্ষেত্রে আমরা পাইথনের নিজস্ব <strong>unittest</strong> ব্যবহার করব কারণ এটি সহজ , ফলপ্রসূ এবং পাইথন প্যাকেজের সাথেই পাওয়া যায়, আলাদা করে কিছু ইন্সটল করার প্রয়োজন হয় না।</p> + +<p>সাধারণত আপনি আপনার টেস্ট ৩টি স্ট্যান্ডার্ড সেকশনের মধ্যে ব্রেক করে ফেলেন; <code>setUp()</code>, টেস্ট এবং <code>tearDown()</code>, টেস্ট রানার সেট-আপের জন্য যথোপযুক্ত।<br> + <br> + <code>setUp()</code> এবং <code>tearDown()</code> ম্যাথোড প্রতি টেস্টের জন্য আলাদা করে অটোমেটিক্যালি রান করানো হয় এবং এতে আছেঃ</p> + +<ul> + <li>টেস্ট রান করানোর আগেই সেট-আপ করতে হবে, যেমন স্ক্রিন আনলক করা এবং ওপেন অ্যাপ কিল করা।</li> + <li>টেস্ট রান করানোর পর শীতলীকরণ ধাপগুলো অনুসরণ করতে হবে, যেমন Marionette সেশন সমাপ্ত করা।</li> +</ul> + +<p> আপনার আসল টেস্ট রান করানোর জন্য যেসব কোড দরকার তা হল সেট-আপের টেস্ট পার্টটি। এখন দেখা যাক কীভাবে আমরা দ্বিতীয় ও চতুর্থ অংশে করা বিল্ড আপে এটি প্রয়োগ করি।</p> + +<h2 id="টেস্ট_রান_করা_যুক্ত_করা_contact.py_unittest_এর_সাথে">টেস্ট রান করা_যুক্ত করা_contact.py unittest এর সাথে</h2> + +<p>unittest ব্যবহার করার জন্য প্রথমে আমাদের unittest ইম্পোরট করা দরকারঃ আপনার অন্যান্য ইম্পোরট লাইনের মধ্যে নিচেরটি যুক্ত করুনঃ</p> + +<pre class="brush: python">import unittest</pre> + +<p>এরপর আমাদের <code>TestContacts</code> ক্লাসের মধ্যে unittest পাস করে নিন এবং নিচের লাইনের মধ্যে আপনার <code>class</code> আপডেট করে নিনঃ</p> + +<pre class="brush: python">class TestContacts(unittest.TestCase):</pre> + +<p>এরপর আমরা নিচেরটি মুছে ফেলবঃ</p> + +<pre class="brush: python"> def __init__(self): + self.test_add_contacts()</pre> + +<p>টেস্টটিকে ইনিশিয়ালাইজ করলে তা unittest দ্বারা নিয়ন্ত্রিত হবে, তাই আমাদের এটি নিয়ন্ত্রণ করা লাগবে না। আপনার কোডের নিচে কোডের, নিচেরটি রিপ্লেস করেঃ</p> + +<pre class="brush: python">if __name__ == '__main__': + TestContacts()</pre> + +<p>এটি দিয়েঃ</p> + +<pre class="brush: python">if __name__ == '__main__': + unittest.main()</pre> + +<p>এবার আমরা তৈরি করব <code>setUp(self)</code> : <code>TestContacts</code> হল আমাদের ক্লাসের মধ্যে ব্যবহৃত ম্যাথড এবং নিচের ধাপগুলো এর ভেতরে রাখুনঃ</p> + +<ol> + <li>ম্যারিওনেট ইনিশিয়েট করে ম্যারিওনেট সেশন ওপেন করা</li> + <li>স্ক্রিন আনলক করুন</li> + <li>সব ওপেন অ্যাপ কিল করুন</li> + <li>কন্ট্যাক্ট অ্যাপ লোড করুন</li> +</ol> + +<p>ম্যাথডটি দেখতে এমন হওয়া উচিতঃ</p> + +<pre class="brush: python"> 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)</pre> + +<p>এখন <code>tearDown(self):</code> ম্যাথোড তৈরি করা। এই ক্ষেত্রে আমাদের Marionette সেশন সমাপ্ত করার জন্য কোড যুক্ত করা প্রয়োজন। ম্যাথোডটি এমন হওয়া উচিতঃ</p> + +<pre class="brush: python"> def tearDown(self): + # Close the Marionette session now that the test is finished + self.marionette.delete_session() +</pre> + +<p>এখন ঠিক আগের মত করেই টেস্টটি রান করানোর চেষ্টা করুতি।আপনি খেয়াল করে থাকবেন যে এখন আপনি passes এবং failures এর জন্য রিপোর্ট পাচ্ছেন। unittest বা py.test এর মত টেস্ট রানার ব্যবহার করার সুবিধা এটি।</p> + +<div class="note"> +<p><strong>নোটঃ</strong>: যদি আপনি কোথাও আটকে গিয়ে থাকেন তবে আপনার সাহায্যার্থে প্রচুর unittest গাইড রয়েছে ইন্টারনেটে। আমাদের পরামর্শ <a href="http://selenium-python.readthedocs.org/en/latest/getting-started.html">http://selenium-python.readthedocs.org/en/latest/getting-started.html</a> এবং <a href="http://assertselenium.com/2013/10/07/getting-started-with-python-webdriver/">http://assertselenium.com/2013/10/07/getting-started-with-python-webdriver/</a>. এগুলো পাইথন এবং ওয়েবড্রাইভারের জন্য, কিন্তু এখন পর্যন্ত সেগুলো ব্যবহারযোগ্য নয়।</p> +</div> + +<h2 id="রেফারেন্স_কোড">রেফারেন্স কোড</h2> + +<p>উদাহরণ হিসাবে, এই ধাপেও আমাদের ফাইনাল কোডটি নিচের মত দেখাবেঃ</p> + +<pre class="brush: python">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() + +</pre> 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 +--- +<p>{{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")}}</p> +<div class="summary"> + <p><span class="seoSummary"><span style="line-height: 1.5;">ফায়ারফক্স ওএস এর জন্য অটোমেটিক টেস্ট লিখতে</span>এই পর্যন্ত আমরা আপনাকে যে পরিমাণ টুলস এবং তথ্য সরবরাহ করেছি তা আপনার নিজস্ব সহায়তা করবে। এর পাশাপাশি আপ করার এবং দ্রুত রানিং এর জন্য এইখানে যথেষ্ট পরিমাণ স্টেপ আছে । এই পার্টে আমরা অনেক গভীরে যাব যেখানে আপনি অনেক রিসোর্স এবং আইডিয়া পাবেন এবং এর পর আপনি এইখানে থেকে নিজস্ব কাজে উৎসাহিত হবেন। এখন আমরা আরো সামনে অগ্রসর হব যাতে আপনি নিজের টেস্ট নিজে করতে পারেন — এনজয়!</span></p> +</div> +<h2 id="রিসোর্সসমূহঃ">রিসোর্সসমূহঃ</h2> +<p>নিচের রিসোর্সগুলো খুব কাজের হবে যদি আপনি আপনার নিজের ইউনিট টেস্ট বিল্ড করতে চান।</p> +<ul> + <li><a href="/en-US/Firefox_OS/Using_the_App_Manager">Firefox OS App Manager</a> ডিভাইসের অথবা সিমুলেটরের গাইয়া ডিরেক্টরী ডিবাগিং এর জন্য একটি গ্রেট টুল । আপনার লিখিত কোডগুলোকে যাচাই করে লোকেট করা এবং কিভাবে কোডগুলো কাজ করবে তা নির্দেশ করার জন্য এইটা একটা ভাল উপায়। </li> + <li>লিমিটেড কিন্তু ওভারহেড মেকানিজমের জন্য , আপনি কনসোলে এইচটিএমএল এর সোর্স ডাম্প করতে পারেন <code>print self.marionette.page_source</code> কমান্ড দিয়ে ।</li> + <li>অন্যথায় রো এইচটিএমএল মেটেরিয়ালের জন্য দেখুন <a href="https://github.com/mozilla-b2g/gaia/tree/master/apps">Gaia Git repo</a>.</li> + <li>Marionette কমান্ড সম্পর্কে আরো জানতে পড়ুন <a href="https://marionette_client.readthedocs.org/en/latest/">Marionette docs</a>।</li> +</ul> +<h2 id="নতুন_এবং_মোডিফাই_টেস্টের_জন্য_আইডিয়া">নতুন এবং মোডিফাই টেস্টের জন্য আইডিয়া</h2> +<p>এই সেকশন শুরু করার জন্য আপনাকে কিছু আইডিয়া দিবে। </p> +<p><span style="font-size: 1.7142857142857142rem; letter-spacing: -0.5px; line-height: 24px;"> test_add_contact.py মোডিফাইং </span></p> +<p>প্রথমে শুরু করা যাক আমরা যেগুলোর কাজ শুরু করেছি সেগুলোর মডিফাইয়িং দিয়েঃ</p> +<ol> + <li>টেস্ট কন্টাক্ট তৈরীর সময় প্রতিবার ইউনিক নাম আছে কিনা দেখুন। </li> + <li> <code>setUp()</code> স্টেপে সব কন্টাক্ট ডিলিট করুন।</li> + <li>আনলক করার আগে স্ক্রীন চালু করুন।</li> +</ol> +<p>এখন আরেকটি টেস্ট মেথড এড করুন। এইটাকে আপনি যা খুশি বলতে পারেন যতক্ষণ এর শুরুতে <code>test_</code> মেথড থাকে ।এই টেস্টটা নিচের মত কাজ করবে:</p> +<ol> + <li>কন্টাক্ট ওপেন ।</li> + <li>প্রথম টেস্টে যে নাম নিওয়া হয়েছে থেকে ভিন্ন নাম নিয়ে নতুন একটি কন্টাক্ট সৃষ্টি করুন।</li> + <li>এডিট মুডে গিয়ে কন্টাক্ট রি-এন্টার করুন।</li> + <li> <em>Company </em>নাম যুক্ত করুন।</li> + <li> <em>Done </em>ট্যাবে চাপ দিন।</li> + <li>দেখুন কোম্পানীর তালিকাভুক্ত হয়েছে।</li> +</ol> +<p>এখন আপনি যখন টেস্ট ফাইল চালু করবেন , তাহলে উভয় টেস্ট রান করা শুরু করবে। এখন আমরা টেস্ট অটোমেশনের শক্তি খুব কাছাকাছি থেকে লক্ষ্য করব— স্বয়ংক্রিয়ভাবে একটি টেস্ট সিরিজ চালানো এবং এর ফলাফল রিপোর্ট করার ক্ষমতা!</p> +<h3 id="টেস্টের_নতুন_কিছু_আইডিয়া">টেস্টের নতুন কিছু আইডিয়া </h3> +<ul> + <li>নতুন কন্টাক্ট তৈরি করুন, কন্টাক্টটি সম্পাদনা করুন এবং নাম পরিবর্তন করুন। পরিবর্তিত নামটি স্ক্রীনে দেখা যাওয়া উচিত।</li> + <li>কন্টাক্ট তৈরি করুন এবং ফেভারিট হিসেবে যুক্ত করতে এটিকে 'star' দিয়ে মার্ক করুন। তাহলে প্রধান স্ক্রীণে এইটা * (starred) ক্যাটাগরির নিচে তালিকাভুক্ত হবে। </li> + <li>ফোন নাম্বারের সাহায্যে একটি কন্টাক্ট তৈরী করুন। কন্টাক্ট রেকর্ড ওপেন করার পর "Message" আইকনে ক্লিক করুন। এখন , ম্যাসেজ অ্যাপটি চালু হয়ে যাওয়া উচিত যেটির প্রাপক অংশে আপনার কন্টাক্টি দেখাবে। </li> +</ul> +<p> </p> 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 +--- +<p>{{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")}}</p> + +<div class="summary"> +<p><span class="seoSummary"><span id="result_box" lang="bn"><span class="hps">এখন <span id="result_box" lang="bn"><span class="hps">একাধিক</span> </span></span></span>টেস্টের পর <span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">সম্ভবত আপনি</span> <span class="hps">আপনার অগ্রগতি</span> <span class="hps">সম্পর্কে</span> <span class="hps">বেশ ভাল</span> <span class="alt-edited hps">অনুভব করছে</span></span>ন। <span class="short_text" id="result_box" lang="bn"><span class="hps">তবে</span> <span class="hps">আরও</span> <span class="hps">কোড</span> <span class="hps">দক্ষতা</span> <span class="alt-edited hps">উন্নত করার</span> <span class="alt-edited hps">অন্যান্য</span> <span class="hps">উপায় আছে</span></span>— আপনি হয়তো <span id="result_box" lang="bn"><span class="hps">খেয়াল করছেন যে </span></span><span id="result_box" lang="bn"><span class="hps">এ পর্যন্ত আপনাকে</span></span> <code>setUp()</code>এবং একটি <code>tearDown()</code><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">মেথড <span class="short_text" id="result_box" lang="bn"><span class="hps">প্রতিটি</span> <span class="hps">ফাইলে <span class="short_text" id="result_box" lang="bn"><span class="hps">অন্তর্ভুক্ত</span> <span class="hps">করতে হয়েছে</span></span></span></span></span></span>, যেগুলো <span id="result_box" lang="bn"><span class="hps">বর্তমান কন্সট্রাক্টর দিয়ে পরিচালিত হচ্ছে</span></span> <span id="result_box" lang="bn"><span class="hps">আমরা এই</span> <span class="alt-edited hps">সিরিজে দেখেছি</span></span>। <span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">কয়েক</span> <span class="hps">ডজন</span> <span class="hps">পরীক্ষা</span> <span class="hps">থেকে থাকে</span> <span class="hps">তাহলে</span> <span class="alt-edited hps">সেই</span> <span class="hps">কোড</span> <span class="hps">অনুলিপি</span> <span class="hps">অনেক</span></span>! <span class="short_text" id="result_box" lang="bn"><span class="hps">এই নিবন্ধে</span></span> আমরা দেখব কিভাবে <code>setUp()</code>/<code>tearDown()</code> কোড একটি <code>TestBase</code> ক্লাসে সকল টেস্টের জন্য রাখা যায়, <span id="result_box" lang="bn"><span class="hps">যা তারপর</span> <span class="hps">প্রতিটি</span> <span class="hps">টেস্ট</span> <span class="hps">ফাইলের</span> <span class="hps">মধ্যে ইম্পোর্ট</span> <span class="hps">করা যাবে।</span></span></span></p> +</div> + +<h2 id="test_base.py">test_base.py</h2> + +<p><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">প্রথমত</span></span>, একটি নতুন ফাইল তৈরি করুন <code>test_base.py</code>, <span id="result_box" lang="bn"> </span>আপনার টেস্ট কেইস হিসেবে একিই ডিরেক্টরির মধ্যে।</p> + +<p>পরবর্তীতে, আপনার প্রয়োজনীয় স্টেটমেন্ট যা সাধারণ সেট আপ এর সাথে সম্পর্কযুক্ত (<code>unittest</code>, <code>Marionette</code> and <code>time</code>) ফাইলটিতে সরিয়ে ফেলুন, একটি <code>TestBase</code> ক্লাস সহ যার মধ্যে <code>setUp()</code> and <code>tearDown()</code> মেথডগুলো, এবং সাহায্যকারি সাধারণ helper ফাংশনগুলো আছে (such as <code>unlock_screen()</code>)। ফাইলটি কিছুটা এরকম দেখানো উচিত:</p> + +<pre class="brush: python">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() +</pre> + +<h2 id="আপনার_টেস্ট_ফাইল_আপডেট_করা">আপনার টেস্ট ফাইল <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">আপডেট করা</span></span></h2> + +<p>আপনার <code>test_base.py</code> ফাইল তৈরি হওয়ার পর, আপনাকে আপনার টেস্ট ফাইলে <code>TestBase</code> ইমপোর্ট করতে হবে, এবং টেস্ট ক্লাসগুলো <code>TestBase</code> ক্লাস প্রসারিত করতে পরিবরতন করতে হবে:</p> + +<pre class="brush: python">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()</pre> + +<p><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">পুনরায়</span> <span class="hps">আপনার টেস্ট</span> <span class="hps">ফাইল</span> <span class="hps">চালানোর</span> <span class="hps">চেষ্টা করুন</span></span>।</p> + +<p><span id="result_box" lang="bn"><span class="hps">এটা এখন অনেক</span></span> বেশি বোঝা না যেতে পারে কিন্তু যখন আপনার কয়েক ডজন অথবা শতাধিক টেস্ট থাকবে এটি আসলেই অনেক কোড ডুপ্লিকেট হওয়ার সমস্যা যাতে না হয় সাহায্য করবে।</p> 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 +--- +<p>{{Previous("Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Part_8_Using_a_base_class")}}</p> +<div class="summary"> + <p><span class="seoSummary">স্বয়ংক্রিয় পরীক্ষায় অ্যাবস্ট্রাক্ট কোডে আমরা <code>app বস্তুগুলো ঘন ঘন ব্যবহার করে থাকি।</code> ইহা কোড এবং স্থান নির্ণয়কারীর প্রতিলিপি করা কমায়। যদি আমাদের কোন সাধারণ বিভাগের কোড পরিবর্তন প্রয়োজন হয় তাহলে আমরা তা শুধুমাত্র একটি<code> app</code> বস্তু পরিবর্তন করতে পারবো, ১০ অথবা ২০টি পরীক্ষণীয় ফাইলের পরিবর্তন না করে। এই রচনাটি কিভাবে <code>app</code> বস্তু ব্যবহার করতে হয় তার মৌলিক তথ্য জানায়।</span></p> +</div> +<h2 id="অ্যাপ্লিকেশন_বস্তু_শুরু_হচ্ছে">অ্যাপ্লিকেশন বস্তু: শুরু হচ্ছে</h2> +<p><code>app</code> বস্তু হল একটি পাইথন ক্লাস যাতে পৃষ্ঠার উপর কার্যক্রম ঘটানোর নিয়ম এবং বৈশিষ্ট্যগুলো বিদ্যমান থাকে। চলুন একটি তাত্বিক উদাহরণের মাধ্যমে দেখা যাক কিভাবে এগুলো ব্যবহৃত হয়ে থাকে।</p> +<h3 id="homepage.py">homepage.py</h3> +<p>এখানে একটি ফ্রেম রয়েছে সুডো-কোড সহ যা আমরা হোমপেজ অ্যাপ্লিকেশনের জন্য ব্যবহার করি।</p> +<pre class="brush: python">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)</pre> +<h3 id="contacts.py">contacts.py</h3> +<p>এবং এটা আমরা কন্টাক্ট অ্যাপ্লিকেশনের জন্য ব্যবহার করে থাকি, আবারও কিছু সুডো-কোড সহ দেয়া হল।</p> +<pre class="brush: python">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)</pre> +<h3 id="test_contacts.py"><strong>test_contacts.py</strong></h3> +<p>কিভাবে একটি পরীক্ষণীয় প্রসঙ্গ কাজ করে তা বুঝতে, এখানে একটি দ্রুত উদাহরণ রয়েছে যাতে <code>Homepage</code> শ্রেণীর ব্যবহার রয়েছে:</p> +<pre class="brush: python">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()</pre> +<h2 id="আপনার_পরীক্ষণগুলো_হালনাগাদ_হচ্ছে">আপনার পরীক্ষণগুলো হালনাগাদ হচ্ছে</h2> +<p>এখান থেকে আমরা আপনাকে নতুন অ্যাপ্লিকেশন বস্তুর সিস্টেম ব্যবহার করতে আপনার সকল পরীক্ষণীয় ফাইলগুলো হালনাগাদ করতে চ্যালেন্জ প্রদান করতে চাই।</p> +<p>ইহা একটি কঠিন কাজ এবং আপনি যদি পাইথন শ্রেণী কাঠামোর সাথে পরিচিত না হন তাহলে আপনাকে সূত্র এবং কোডের উদাহরণের জন্য কিছু বইয়ের পরামর্শ দরকার।</p> +<p>যখন আপনি আদর্শভাবে শেষ করবেন তখন আপনার পরীক্ষণীয় ফাইলের মধ্যে একটি পরিস্কার বিচ্ছিন্নতা থাকবে:</p> +<ol> + <li><code>TestBase</code> এ <code>setUp()</code> এবং <code>tearDown()</code> নীতিগুলো বিদ্যমান থাকে</li> + <li><code>app</code> বস্তুগুলো পৃষ্ঠার পারস্পরিক ক্রিয়া এবং স্থান নির্ণয়কারী ধারণ করে</li> + <li>আপনার পরীক্ষণীয় ফাইলগুলো শুধু পরীক্ষণীয় ধাপগুলো ধারণ করে।</li> +</ol> +<p>আপনার মঙ্গল কামনা করছি!</p> 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 +--- +<div class="summary"> +<p><span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> OS <span class="hps"><span id="result_box" lang="bn"><span class="hps">এখনও <span id="result_box" lang="bn"><span class="alt-edited hps">উন্নয়নাধীন,<span id="result_box" lang="bn"><span class="hps">এবং নতুন</span> <span class="hps">হার্ডওয়্যারের</span> <span class="hps">জন্য সমর্থন</span> <span class="hps">খুব দ্রুত-ই দেওয়া হবে। </span><span><span id="result_box" lang="bn"><span class="hps">কিভাবে <span id="result_box" lang="bn"><span class="alt-edited hps">এটি</span> <span class="hps">পরীক্ষা করতে </span></span></span></span></span></span></span></span></span></span></span></span>হয় তা জানা <span id="result_box" lang="bn"><span class="hps">গুরুত্বপূর্ণ।</span></span><span id="result_box" lang="bn"><span class="alt-edited hps">এই পৃষ্ঠাটি কিছু নিবন্ধ প্রস্তাব করে <span id="result_box" lang="bn"><span class="alt-edited hps">যা <span id="result_box" lang="bn"><span class="hps">চলমান <span id="result_box" lang="bn"><span class="hps">বিভিন্ন</span> <span class="hps">পরীক্ষা,</span> <span class="hps">অটোমেশন</span><span>, এবং <span id="result_box" lang="bn"><span class="hps">ফলাফল <span id="result_box" lang="bn"><span class="hps">রিপোর্ট এবং</span> <span class="hps">ট্র্যাকিং সহ <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> OS <span class="hps">বিভিন্ন দিক</span> <span class="hps">সম্পর্কে তথ্য</span> <span class="hps">প্রদান করে।</span></span></span></span></span></span></span></span></span></span></span></span> </span></span><span class="seoSummary"> </span></p> +</div> + +<h2 id="শুরু_করুন!">শুরু করুন!</h2> + +<h2 id="ফায়ারফক্স_OS_এর_পরীক্ষা_চালানো_ডেভেলপারদের_জন্য_একটি_নির্দেশিকা"><a href="/bn-BD/Firefox_OS/Running_Tests_on_Firefox_OS_for_Developers" style="font-size: 14px; line-height: 1.5;">ফায়ারফক্স OS এর পরীক্ষা চালানো : ডেভেলপারদের জন্য একটি <span id="result_box" lang="bn"><span class="hps">নির্দেশিকা</span></span></a></h2> + +<dl> + <dd><span id="result_box" lang="bn"><span class="hps">পরীক্ষা</span> <span class="alt-edited hps">চালানো <span id="result_box" lang="bn"><span class="alt-edited hps">শুরু </span></span></span></span>করার ওপর একটি ছোট, এবং ডেভেলপারদের-জন্য-লিখা গাইড।<span id="result_box" lang="bn"><span class="hps"> আপনি</span> <span class="hps">মজিলা</span> <span class="hps">এর</span> <span class="alt-edited hps">টেস্ট এবং</span> <span class="hps">স্বয়ংক্রিয়তা</span> <span class="alt-edited hps">সিস্টেম</span> <span class="alt-edited hps">চালানো</span> <span class="hps">অভিজ্ঞ</span> <span class="hps">না হলে </span></span>আপনার এখান থেকে শুরু করা উচিত। আপনি যদি অভিজ্ঞ হন, তাহলে সম্ভবত আপনার <span id="result_box" lang="bn"><span class="hps">একটি ধারণা</span> <span class="hps">আছে যে আপনি কি টেস্ট, কিভাবে পরিচালনা করতে চান, <span id="result_box" lang="bn"><span>এবং আপনি</span> <span class="hps">নীচের</span> <span class="hps">আরো নির্দিষ্ট, </span> <span class="hps">বিস্তারিত</span> <span class="hps">গাইড</span> <span class="hps">এড়িয়ে</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps">যেতে </span></span>পারেন।</span></span></span></span></dd> +</dl> + +<h2 id="গায়া_পরীক্ষাসমূহ"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">গায়া</span> <span class="hps">পরীক্ষা</span></span>সমূহ</h2> + +<p><span><span class="null">এই নিবন্ধগুলোতে গায়া টেস্ট কওয়ার প্রাথমিক </span></span>পদ্ধতিগুলো বর্ণনা করেছে।</p> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/gaia-ui-tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/gaia-ui-tests"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">গায়া</span> <span class="alt-edited hps">UI</span> <span class="hps">পরীক্ষা</span></span></a></dt> + <dd><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps">গায়া</span> <span class="atn hps">UI এর <span id="result_box" lang="bn"><span class="alt-edited">পারস্পরিক ক্রিয়া</span> (ইন্টারেকশন) <span class="hps">এবং</span> <span class="alt-edited hps">ফিচারগুলো পাইথনে টেস্ট করুন।</span></span></span></span></span></span></dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Gaia_integration_tests"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">গায়া</span> <span class="hps">ইন্টিগ্রেশন</span> <span class="hps">পরীক্ষা</span></span></a></dt> + <dd>গায়ার <span id="result_box" lang="bn"><span class="hps">জাভাস্ক্রিপ্ট</span>-<span class="hps">ইন্টিগ্রেশন টেস্ট করা</span></span>, Marionette এর উপর ভিত্তি করে।</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Gaia_unit_tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">গায়া</span> <span id="result_box" lang="bn"><span class="alt-edited hps">ইউনিট</span></span>-<span class="hps">টেস্ট</span></span></a></dt> + <dd><span id="result_box" lang="bn"><span class="alt-edited hps">গায়া</span> <span class="alt-edited hps">ইউনিট</span> টেস্ট</span> কোন UI <span id="result_box" lang="bn"><span class="alt-edited">ইন্টারঅ্যাকশন ছাড়া </span></span>; <span id="result_box" lang="bn"><span class="hps">জাভাস্ক্রিপ্ট</span> এ <span class="hps">লেখা</span><span>,</span> <span class="alt-edited hps">Marionette</span> <span class="hps">ভিত্তিক</span> <span class="alt-edited hps">নয়</span></span>।</dd> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/Gaia_performance_tests"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">গায়া</span> <span class="alt-edited hps">কার্যকারিতা</span> (পার্ফর্মেন্স) <span class="hps">পরীক্ষা</span></span></a></dt> + <dd><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span class="hps">অভ্যন্তরীণ</span> <span class="hps">যন্ত্রানুষঙ্গের</span> <span class="hps">উপর ভিত্তি </span></span></span></span>করে গায়া</span> <span class="hps">অ্যাপ্লিকেশনের</span> <span class="alt-edited hps">কর্মক্ষমতা পরিমাপ করে</span></span>। in-tree হচ্ছে এর টেস্টিং পদ্ধতি (হারনেস)।</dd> +</dl> + +<h2 id="B2G_পরীক্ষাসমূহ">B2G <span class="short_text" id="result_box" lang="bn"><span class="hps">পরীক্ষা</span></span>সমূহ</h2> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">নিচের</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">নির্দেশনাগুলো <span class="short_text" id="result_box" lang="bn"><span class="hps">B2G</span> এর বিভিন্ন <span class="hps">কার্যকারিতা</span> <span class="hps">পরীক্ষা করার বিভিন্ন পদ্ধতি নিয়ে </span></span> আলোচনা</span></span> করে<span class="short_text" id="result_box" lang="bn"><span class="hps">। </span></span></p> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Mochitests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Mochitests">Mochitests</a></dt> + <dd>Gecko এর ফাংশনাল বা কার্যকারিতা<span id="result_box" lang="bn"> <span class="hps">এবং</span> <span class="hps">এপিআই</span> <span class="hps">পরীক্ষা </span></span>- HTML & JS <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">ভিত্তিক</span></span>। <span class="short_text" id="result_box" lang="bn"><span class="hps">কোন</span> <span class="alt-edited hps">গায়া</span> ইন্টারেকশন<span class="alt-edited hps"> নেই।</span></span></dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Reftests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Reftests">Reftests</a></dt> + <dd>Gecko <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">রেন্ডার ঠিকমত হচ্ছে কিনা তার পরীক্ষা<span class="short_text" id="result_box" lang="bn"><span class="hps">।</span></span></span></span></dd> + <dt><a href="/en-US/docs/Marionette/Marionette_JavaScript_Tests" title="/en-US/docs/Marionette/Marionette_JavaScript_Tests">WebAPI টেস্ট</a></dt> + <dd>Gecko JS-<span class="short_text" id="result_box" lang="bn"><span class="hps">ভিত্তিক</span> <span class="hps">WebAPI</span> <span class="hps">পরীক্ষা</span></span>। <span id="result_box" lang="bn"><span class="alt-edited hps">এগুলোর অনেকগুলোই এমুলেটরে করতে হয়। </span></span></dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/XPCShell" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/XPCShell">xpcshell টেস্ট</a></dt> + <dd>Gecko XPCOM APIs এর <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">হেডলেস</span> <span class="hps">পরীক্ষা।</span></span></dd> + <dt><a href="https://github.com/mozilla/b2gperf" title="https://github.com/mozilla/b2gperf">B2GPerf</a></dt> + <dd><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span class="hps">অভ্যন্তরীণ</span> <span class="hps">যন্ত্রানুষঙ্গের</span> <span class="alt-edited hps">উপর ভিত্তি করে </span></span>গায়া</span> <span class="hps">অ্যাপ্লিকেশন</span> এর <span class="alt-edited hps">কর্মক্ষমতা পরিমাপ করে </span></span>।</dd> + <dt><a href="https://wiki.mozilla.org/Project_Eideticker" title="https://github.com/mozilla/eideticker">Eideticker</a></dt> + <dd><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">ধারনকৃত</span></span> <span id="result_box" lang="bn"><span class="hps">ভিডিও এর উপর ভিত্তি করে </span></span>ফায়ারফক্স</span> <span class="hps">ওএস</span> </span>এর জন্য <span id="result_box" lang="bn"><span class="hps">কর্মক্ষমতা</span> <span class="hps">পরিমাপ করে</span></span><span id="result_box" lang="bn"><span class="hps">।</span></span></dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/endurance_tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/endurance_tests">Endurance tests</a></dt> + <dd><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span class="alt-edited hps">দীর্ঘ সময় ধরে এবং পুনঃপুনঃ চলতে পারে (repetitive) এমন <span id="result_box" lang="bn"><span class="hps">পরীক্ষা</span></span></span></span></span></span><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps"> যা <span id="result_box" lang="bn"><span class="hps">মেমরি</span> <span class="alt-edited hps">অপচয়</span> <span class="hps">এবং স্টেবিলিটি বা স্থায়িত্ব</span> <span class="hps">সমস্যা</span> <span class="alt-edited hps">বের করতে ব্যবহৃত হয়।</span></span></span></span></span></span></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/MTBF_tests">MTBF টেস্ট</a></dt> + <dd>রিস্টার্ট করে না এমন গায়া-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 টিম দ্বারা এটি নির্মিত হচ্ছে)</dd> + <dt><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">মেমরি</span> <span class="alt-edited hps">টেস্ট</span> <span class="hps">-</span> <span class="hps">শীঘ্রই আসছে</span></span></dt> + <dd><span id="result_box" lang="bn"><span class="alt-edited hps">মজিলা</span><span class="atn">-</span><span>সেন্ট্রাল এর <span id="result_box" lang="bn"><span class="hps">কমিট <span id="result_box" lang="bn"><span class="alt-edited hps">দ্বারা <span id="result_box" lang="bn"><span class="hps">পুনরাবৃত্তিমূলক</span> <span class="hps">পরীক্ষা চলে,</span></span></span></span></span></span></span></span> <a href="https://areweslimyet.com/" title="https://areweslimyet.com/">https://areweslimyet.com/</a> এ <span id="result_box" lang="bn"><span class="hps">রিপোর্ট করে</span></span>, <span id="result_box" lang="bn"><span class="hps">মেমরির ব্যবহার</span> <span class="alt-edited hps">করতে সমস্যা</span> <span class="alt-edited hps">খুঁজে বের</span> <span class="alt-edited hps">করার জন্য <span id="result_box" lang="bn"><span class="alt-edited hps">নির্মিত।</span></span></span></span></dd> +</dl> + +<div class="almost_half_cell" id="gt-res-content"> +<h2 dir="ltr" id="সহায়তামূলক_ডকুমেন্টেশন" style="zoom: 1;"><span class="short_text" id="result_box" lang="bn"><span class="hps">সহায়তামূলক</span> <span class="hps"><span class="short_text" id="result_box" lang="bn"><span class="hps">ডকুমেন্টেশন</span></span></span></span></h2> +</div> + +<p><span id="result_box" lang="bn"><span class="hps">এই বিভাগ <span id="result_box" lang="bn"><span class="alt-edited hps">সহায়তাকারী</span> <span class="hps">প্রযুক্তির</span> <span class="hps">কিছু</span> <span class="hps">লিঙ্ক</span> <span class="hps">প্রদান করে</span></span></span></span> <span id="result_box" lang="bn"><span class="alt-edited hps">যা <span id="result_box" lang="bn"><span class="hps">মজিলা</span> <span class="hps">এর</span> <span class="hps">পরীক্ষা</span></span></span></span> <span id="result_box" lang="bn"><span class="hps">সমর্থন করে, <span id="result_box" lang="bn"><span class="alt-edited hps">যার <span id="result_box" lang="bn"><span class="alt-edited hps">সম্পর্কে আপনি</span> <span class="hps">আরও তথ্য পেতে</span> <span class="hps">চাইতে পারেন।</span></span></span></span></span></span></p> + +<dl> + <dt><a href="/en-US/docs/Marionette" title="/en-US/docs/Marionette">Marionette</a></dt> + <dd><span id="result_box" lang="bn"><span class="hps">একটি</span> <span class="alt-edited hps">রিমোট</span> <span class="alt-edited hps">টেস্ট</span> <span class="hps">ড্রাইভার, <span id="result_box" lang="bn"><span class="hps">সেলেনিয়াম</span> <span class="hps">WebDriver </span></span></span></span>ভিত্তিক।</dd> + <dt><a href="/en-US/docs/Marionette/Marionette_JavaScript_Tools" title="/en-US/docs/Marionette/Marionette_JavaScript_Tools">Marionette JavaScript tests</a></dt> + <dd><span class="short_text" id="result_box" lang="bn"><span class="hps">একটি</span> <span class="hps">node.js</span> <span class="hps">ভিত্তিক</span> <span class="hps">রানার <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">Marionette</span> <span class="alt-edited hps">এর জন্য।</span></span></span></span></dd> + <dt><a href="/en-US/docs/Marionette/Python_Marionette" title="/en-US/docs/Marionette/Python_Marionette">Marionette Python tests</a></dt> + <dd> <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">একটি</span> <span class="hps">পাইথন</span> <span class="hps">রানার </span></span>Marionette <span class="short_text" id="result_box" lang="bn"><span class="hps"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">এর জন্য।</span></span></span></span></dd> + <dt> </dt> + <dt>খেয়াল করুনঃ যদি আপনি কোন প্রোডাকশন বিল্ডে Marionette চালাতে চান (গায়া ইন্ট্রিগেশন টেস্ট, গায়া ui টেস্ট ইত্যাদি চালানোর জন্য। ) আপনই <a href="https://github.com/mozilla-b2g/marionette-extension">Marionette কে এক্সটেনশন হিসেবে ইন্সটল করতে পারেন</a> (বর্তমানে এটি শুধু ১.৩ বিল্ডগুলোর জন্যই প্রযোজ্য তবে আরও সাপোর্ট ভবিষ্যতে যোগ করা হবে।)</dt> +</dl> + +<h2 id="ক্রমাগত_ইন্টিগ্রেশন_এবং_ফলাফল_রিপোর্টিং"><span class="short_text" id="result_box" lang="bn"><span class="hps">ক্রমাগত</span> <span class="hps">ইন্টিগ্রেশন</span> <span class="alt-edited hps">এবং ফলাফল</span> <span class="hps">রিপোর্টিং</span></span></h2> + +<p><span id="result_box" lang="bn"><span class="hps">নিম্নলিখিত</span> <span class="hps">নিবন্ধ</span>গুলো <span class="alt-edited hps">ধারাবাহিক</span> <span class="hps">ইন্টিগ্রেশন সম্পন্ন, ফলাফল রিপোর্ট, সংরক্ষণ এবং এসব ফলাফলের বিশ্লেষণ করতে মজিলা'র পদ্ধতিগুলো নিয়ে আলোচনা করে।</span></span></p> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/TBPL">TBPL</a></dt> + <dd> TBPL ভিত্তিক টেস্ট এবং বিল্ড বোঝার জন্য।</dd> + <dt><a href="https://wiki.mozilla.org/QA/Execution/Web_Testing/Automation/Jenkins">Jenkins</a></dt> + <dd><span id="result_box" lang="bn"><span class="alt-edited hps">জেনকিন্সের</span> <span class="hps">মাধ্যমে</span> <span class="hps">প্রকৃত</span> <span class="alt-edited hps">ডিভাইসের উপর চালানো</span> <span class="alt-edited hps">হয় যে</span> <span class="alt-edited hps">টেস্ট</span></span>।</dd> + <dt><a href="https://wiki.mozilla.org/B2G/Datazilla" title="https://wiki.mozilla.org/B2G/Datazilla">Datazilla</a></dt> + <dd><a href="https://datazilla.mozilla.org/b2g/" title="https://datazilla.mozilla.org/b2g/">Datazilla dashboard</a> এ কোন <span id="result_box" lang="bn"><span class="alt-edited hps">কার্যকারিতা</span> <span class="alt-edited hps">টেস্ট <span id="result_box" lang="bn"><span class="alt-edited hps">রিপোর্ট করা হচ্ছে তা বোঝে</span></span></span></span> , এবং <span id="result_box" lang="bn"><span class="alt-edited hps">সেই</span> <span class="alt-edited hps">টেস্টগুলো কি <span id="result_box" lang="bn"><span class="alt-edited hps">পদক্ষেপ নেয়।</span></span></span></span></dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Test_Execution_Chart" title="/en-US/docs/Mozilla/Firefox_OS/Testing/Test_Execution_Chart">Test execution chart</a></dt> + <dd><span id="result_box" lang="bn"><span class="hps">একটি</span> <span class="hps">চার্ট যা দেখায় কোন টেস্ট পরিচালনা করা হচ্ছে</span></span> — কোন <span id="result_box" lang="bn"><span class="hps">ডিভাইস নিয়ে এবং কোথায়</span></span> — এবং কোন <span id="result_box" lang="bn"><span class="alt-edited hps">প্ল্যাটফর্ম</span> <span class="hps">প্রতিটি পরীক্ষার</span> <span class="hps">জন্য</span> <span class="hps">সমর্থিত।</span></span></dd> +</dl> + +<h2 class="Community" id="Community" name="Community"><span class="short_text" id="result_box" lang="bn"><span class="hps">ইউনিট</span> <span class="hps">টেস্টিং</span> <span class="alt-edited hps">ফ্রেমওয়ার্কের</span> <span class="hps">ভিডিও</span></span></h2> + +<div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/LxnRIm0wLLo?rel=0&html5=1"></iframe></div></div> + +<dl> + <dt> </dt> + <dd> </dd> +</dl> 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 +--- +<p><span id="result_box" lang="bn"><span class="hps">এই টিউটোরিয়ালটি <span id="result_box" lang="bn"><span class="hps">অনুমান </span></span></span></span>করে আপনি <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Setting_up_Marionette" title="https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko/Setting_Up_Marionette_for_B2G">set up Marionette for B2G</a> সেট আপ করেছেন।</p> + +<p><span id="result_box" lang="bn"><span class="hps">একটি টার্মিনাল</span> <span class="hps">খুলুন এবং</span> <span class="hps">ইন্টারেক্টিভ</span> <span class="hps">প্রম্পট</span> <span class="hps">পেতে</span> <span class="hps">পাইথন</span> <span class="alt-edited hps">চালু করুন</span></span>:</p> + +<p><code>$ python</code></p> + +<p><span id="result_box" lang="bn"><span class="hps">ইন্টারেক্টিভ</span> <span class="hps">প্রম্পট</span> <span class="hps">থেকে</span></span>, <span id="result_box" lang="bn"><span class="alt-edited hps">ইন্টারেক্টিভ পদ্ধতিতে</span> <span class="hps">একটি</span></span> Marionette <span id="result_box" lang="bn"><span class="alt-edited hps">সেশন</span> <span class="hps">ডাকা</span>র জন্য <span class="hps">প্রয়োজনীয়</span> <span class="hps">কমান্ড পরিচালনা করুন</span></span>:</p> + +<p><span style="font-family: courier new,courier,monospace;">>>> from marionette import Marionette<br> + >>> marionette = Marionette('localhost', 2828)<br> + >>> marionette.start_session()<br> + u'session-b2g'</span></p> + +<p>এখানে, আমরা দেখি যে <span id="result_box" lang="bn"><span class="alt-edited hps">সিস্টেমে একটি</span></span> Marionette সেশন চলছে।</p> + +<p><a class="external" href="http://4.bp.blogspot.com/-wdjTWI_UrH0/Tys1t-VWTMI/AAAAAAAAANM/Hb3pLdPOoMc/s640/Starting+Marionette+Session+Interactively.tiff"><img alt="" class="default" src="http://4.bp.blogspot.com/-wdjTWI_UrH0/Tys1t-VWTMI/AAAAAAAAANM/Hb3pLdPOoMc/s640/Starting+Marionette+Session+Interactively.tiff"></a></p> + +<p><span id="result_box" lang="bn"><span class="hps">কমান্ড</span></span> "<code>marionette.execute_script()</code>" <span id="result_box" lang="bn"><span class="hps">জাভাস্ক্রিপ্ট</span> <span class="hps">কমান্ড</span> <span class="hps">এম্বেড করতে পারে</span></span>, যা তারপর <span class="short_text" id="result_box" lang="bn"><span class="hps">B2G</span> <span class="hps">এর</span> <span class="hps">Gecko</span> <span class="hps">প্ল্যাটফর্মে</span> <span class="alt-edited hps">চালানো সম্ভব</span></span>। <span id="result_box" lang="bn"><span class="alt-edited hps">এটি</span> <span class="hps">ব্যবহার করে</span></span>, <span id="result_box" lang="bn"><span class="hps">আপনি</span> কোন <span class="hps">DOM</span> <span class="alt-edited hps">এলিমেন্ট</span> <span class="hps">এইচটিএমএল</span> <span class="hps">এলিমেন্ট</span> <span class="alt-edited hps">অবজেক্ট এবং</span> <span class="hps">উপলব্ধ</span> <span class="hps">বৈশিষ্ট্য</span> <span class="hps">ও</span> <span class="hps">পদ্ধতি</span> <span class="alt-edited hps">রিটার্ন</span> করে <span class="hps">দেখতে পারেন</span></span>:</p> + +<p><span style="font-family: courier new,courier,monospace;">>>> marionette.execute_script("return navigator.battery;")<br> + {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}<br> + >>> marionette.execute_script("return navigator.battery.level;")<br> + 0.91<br> + >>> marionette.execute_script("return navigator.geolocation;")<br> + {}<br> + >>> marionette.execute_script("return navigator.mozSms;")<br> + {u'onreceived': None, u'ondelivered': None, u'onsent': None}</span></p> + +<p><a class="external" href="http://2.bp.blogspot.com/-WaSbVYa85K0/Tys2-IJC3ZI/AAAAAAAAANU/s7wvpanwmNY/s640/Getting+DOMHTMLelements.tiff"><img alt="" class="default" src="http://2.bp.blogspot.com/-WaSbVYa85K0/Tys2-IJC3ZI/AAAAAAAAANU/s7wvpanwmNY/s640/Getting+DOMHTMLelements.tiff"></a></p> + +<p>আপনি এই <span id="result_box" lang="bn"><span class="hps">টেকনিক</span> <span class="hps">ব্যবহার করে</span></span> DOM ট্রি ট্রাভার্স করতে পারেন কোন <span id="result_box" lang="bn"><span class="alt-edited hps">অবজেক্ট,<span id="result_box" lang="bn"><span class="hps">পদ্ধতি</span><span>, এবং</span> <span class="hps">গুণাবলী</span> <span class="hps">পাওয়া যায় তা <span id="result_box" lang="bn"><span class="hps">মূল্যায়নের জন্য</span></span></span></span></span></span>।</p> + +<h2 id="ইন্টারেক্টিভ_পদ্ধতিতে_বেসিক_টেলিফোনি_টেস্টিং"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">ইন্টারেক্টিভ পদ্ধতিতে</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">বেসিক</span> <span class="hps">টেলিফোনি</span> <span class="short_text" id="result_box" lang="bn"><span class="hps">টেস্টিং</span></span></span></h2> + +<p>আপনি marionette এর <span id="result_box" lang="bn"><span class="hps">সঙ্গে</span> <span class="alt-edited hps">ইন্টারেক্টিভ পদ্ধতিতে</span> <span class="hps">মৌলিক</span> <span class="hps">টেলিফোনি</span> <span class="hps">পরীক্ষা করতে পারবেন</span></span>। <span id="result_box" lang="bn"><span class="hps">নিম্নলিখিত উদাহরণে</span> <span class="hps">দুটি</span> সচল ফোনের প্রয়োজন, প্রতিটির সিমকার্ডসহ।</span>একটি আপনার Galaxy SII, যেটিতে B2G চলমান।</p> + +<p><span id="result_box" lang="bn"><span class="hps">একটি ইন্টারেক্টিভ</span> <span class="alt-edited hps">Marionette</span> <span class="alt-edited hps">সেশন</span> <span class="hps">শুরু করুন এবং</span> <span class="hps">পোর্ট</span> <span class="hps">ফরওয়ার্ড করুন</span></span>:</p> + +<p><code>$ adb forward tcp:2828 tcp:2828<br> + $ python<br> + >>> from marionette import Marionette<br> + >>> marionette = Marionette('localhost', 2828)<br> + >>> marionette.start_session()<br> + u'5-b2g</code></p> + +<p>এখন, আপনার marionette এর <span class="short_text" id="result_box" lang="bn"><span class="hps">সাথে</span> <span class="hps">দুটি</span> <span class="hps">সম্ভাব্য</span> <span class="alt-edited hps">উপায়</span> <span class="hps">আছে</span></span>। <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">একটি</span> <span class="hps">একটু বেশি পাইথনিক</span></span>:</p> + +<p><code>>>> marionette.set_context("chrome")<br> + True<br> + >>> marionette.execute_script("return navigator.mozTelephony;")<br> + >>> num =<br> + >>> marionette.execute_script("return navigator.mozTelephony.dial('%d');" % num)</code></p> + +<p><span id="result_box" lang="bn"><span class="hps">অন্যথায়</span></span>, <span id="result_box" lang="bn"><span class="hps">এই</span> <span class="alt-edited hps">পদ্ধতি</span></span>, যা JS এর উপর বেশি <span id="result_box" lang="bn"><span class="hps">নির্ভর করে </span></span>( <code>marionette.execute_script()</code> <span id="result_box" lang="bn"><span class="hps">মধ্যে</span> <span class="hps">এমবেডেড</span></span>) <span id="result_box" lang="bn"><span class="alt-edited hps">JS</span> <span class="alt-edited hps">নাম্বার</span> <span class="alt-edited hps">ভেরিয়েবলের</span> <span class="hps">চারপাশে</span> <span class="alt-edited hps">উদ্ধৃতি চিহ্ন</span> <span class="hps">লক্ষ্য করুন</span></span>:</p> + +<p><code>>>> marionette.set_context("chrome")<br> + True<br> + >>> marionette.execute_script("""<br> + ... var num = ""<br> + ... return navigator.mozTelephony.dial(num);<br> + ... """)<br> + {} </code></p> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">আমরা প্রথম</span> <span class="alt-edited hps">পদ্ধতি</span> <span class="hps">চেষ্টা করব</span></span>:</p> + +<p><a class="external" href="http://3.bp.blogspot.com/-cAsP3Beif4g/Tyxr92r6baI/AAAAAAAAANk/GiMlZsXfFYc/s640/Marionette_interactive_telephony.tiff"><img alt="" class="default" src="http://3.bp.blogspot.com/-cAsP3Beif4g/Tyxr92r6baI/AAAAAAAAANk/GiMlZsXfFYc/s640/Marionette_interactive_telephony.tiff"></a></p> + +<p><span id="result_box" lang="bn"><span class="hps">এটি একটি</span> <span class="hps">ফোন কল চালু করে</span></span>, যার <span id="result_box" lang="bn"><span class="alt-edited hps">আউটপুট</span></span> <code>$adb logcat</code> এ <span id="result_box" lang="bn"><span class="hps">মনিটর করা</span> <span class="hps">যাবে।</span></span></p> + +<p><a class="external" href="http://4.bp.blogspot.com/-Np12ZkqpRfM/Tyxs3zAf0EI/AAAAAAAAANs/xhr58eU_s00/s640/ADB+LOGCAT+interactive+telephony.tiff"><img alt="" class="default" src="http://4.bp.blogspot.com/-Np12ZkqpRfM/Tyxs3zAf0EI/AAAAAAAAANs/xhr58eU_s00/s640/ADB+LOGCAT+interactive+telephony.tiff"></a></p> 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 +--- +<div class="summary"> + <h5 id="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."><span class="seoSummary"> 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 <a href="/en-US/docs/Creating_reftest-based_unit_tests">Creating reftest-based unit tests</a>.</span></h5> +</div> +<h2 id="Prerequisites_for_running_reftests">Prerequisites for running reftests</h2> +<p>You can run <a href="/en-US/docs/Creating_reftest-based_unit_tests" title="/en-US/docs/Creating_reftest-based_unit_tests">reftests</a> on B2G. These are mainly tested on the emulator, but should in theory run on devices as well. In this article <code>$B2G_HOME</code> refers to the cloned B2G repository. Below are the things you need to build or set up before you can try running B2G reftests.</p> +<h3 id="Build_B2G_for_the_target_you're_testing">Build B2G for the target you're testing</h3> +<p><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko">Regular B2G build instructions apply</a> — no need for any special build options.</p> +<p>The B2G config that you will be using (what you pass to <code>./config.sh</code>) will probably be <code>emulator</code> as that is what reftests are typically run on. Before building B2G for the <code>emulator</code> config, pay special attention to the <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Emulator_build_issues" title="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Emulator_build_issues">Emulator build issues</a> section in the <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a> page.</p> +<p>As usual, make sure <code>adb</code> is in your path and that it successfully connects to your running emulator or device. Try <code>adb devices</code> to make sure it is working ok.</p> +<h2 id="Running_reftests">Running reftests</h2> +<p>Having satisfied the above prerequisites, you can then run reftests using one of the following sets of terminal commands.</p> +<h3 id="For_the_emulator">For the emulator</h3> +<p>Use mach:</p> +<pre>cd $B2G_HOME +./mach reftest-remote</pre> +<p>This will run all reftests. If you want to run a specific reftest, do the following:</p> +<pre>cd $B2G_HOME +./mach reftest-remote relative/path/from/B2G/to/reftest.list</pre> +<h3 id="For_a_real_device"><strong>For a real device</strong></h3> +<p>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:</p> +<pre class="brush: bash">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 <code>relative/path/from/B2G/objdir-gecko/to/reftest.list</code></pre> +<h2 id="Running_crashtests">Running crashtests</h2> +<p>To run crashtests, do the following:</p> +<pre>cd $B2G_HOME +./mach crashtest-remote</pre> +<p>This will run all crashtests. If you want to run a specific crashtest, do the following:</p> +<pre>cd $B2G_HOME +./mach reftest-remote relative/path/from/B2G/to/crashtests.list</pre> +<h2 id="Running_jsreftests">Running jsreftests</h2> +<p>JSReftests are not officially supported yet. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=972870">bug 972870</a> for progress updates on adding jsreftests to mach.</p> +<h2 id="Running_reftest_with_non-default_options">Running reftest with non-default options</h2> +<p>You can optionally add <code>--total-chunks</code> and <code>--this-chunks</code> arguments as you would with regular desktop reftests. Use:</p> +<pre class="brush: bash">mach help reftest-remote</pre> +<p>for a full list of supported arguments.</p> +<h2 id="Running_reftest_with_a_downloaded_emulator">Running reftest with a downloaded emulator</h2> +<p>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:</p> +<pre class="brush: bash">pip install marionette-client +python runreftestb2g.py --emulator arm --b2gpath path/to/emulator --xre-path /path/to/dir/containing/desktop/xpcshell --ignore-window-size <code>--emulator-res 800x1000 <path_to_reftest_manifest></code></pre> +<h2 id="Running_reftest_with_a_downloaded_emulator_and_downloaded_tests.zip_package">Running reftest with a downloaded emulator and downloaded tests.zip package</h2> +<p>If you want to run reftests against a downloaded emulator and a downloaded <code>tests.zip</code> package, you should extract them both.</p> +<p>Then run the following commands:</p> +<pre class="brush: bash">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></pre> +<div class="note"> + <p><strong>Note</strong>: For best results, you should perform the above steps using a <a href="/en-US/docs/Python/Virtualenv" title="/en-US/docs/Python/Virtualenv">Python virtualenv</a>.</p> +</div> +<h2 id="Troubleshooting">Troubleshooting</h2> +<p>The following sections provide some answers to common problems encountered when trying to use reftests.</p> +<h3 id="I_can't_build_the_emulator!">I can't build the emulator!</h3> +<p>If you have trouble building B2G in the <code>emulator</code> config, check out the <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Emulator_build_issues" title="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Emulator_build_issues">Emulator build issues</a> section in the <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a> page.</p> +<h3 id="Check_that_your_B2G_buildemulator_works_and_that_ADB_can_connect_to_it">Check that your B2G build/emulator works and that ADB can connect to it</h3> +<p>First check that your B2G build runs normally. If this is an emulator build, then <code>./run-emulator.sh</code> should work: it should start up the emulator and boot B2G inside it. If it doesn't, get the log from <code>adb logcat</code> 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 <code>-e</code> option to tell adb to focus on the emulator:</p> +<pre class="brush: bash">adb logcat -e</pre> +<p>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 <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">Connecting a Firefox OS device to the desktop</a>.</p> +<div class="note"> + <p><strong>Note</strong>: 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</p> +</div> +<h3 id="Check_that_you_can_run_your_desktop_xpcshell_executable">Check that you can run your desktop xpcshell executable</h3> +<p>The <code>python runreftestb2g.py</code> command line above will try to run xpcshell on your desktop with the path specified by the <code>--xre-path</code> argument. Check that running xpcshell from the current directory with this relative path actually works.</p> +<p>For example, suppose that your command line contains:</p> +<pre class="brush: bash">--xre-path /hack/mozilla-central/objdir/dist/bin</pre> +<p>Try running this from the same directory as you want to run <code>python runreftestb2g.py</code> from<code>:</code></p> +<pre><code class="brush: bash">$ /hack/mozilla-central/objdir/dist/bin/xpcshell</code></pre> +<p>This should land you in a special-looking shell like this:</p> +<pre class="brush: bash">js></pre> +<p>If this fails with an error message complaining about being unable to find or load certain shared libraries, like this</p> +<pre class="brush: bash">/hack/mozilla-central/objdir/dist/bin/xpcshell: error while loading shared libraries: libxul.so: cannot open shared object file: No such file or directory</pre> +<p>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 <code>LD_LIBRARY_PATH</code> to the same directory as you want to pass as <code>--xre-path</code>. For example, this should work:</p> +<pre class="brush: bash">LD_LIBRARY_PATH=<code>/hack/mozilla-central/objdir/dist/bin <code>/hack/mozilla-central/objdir/dist/bin/xpcshell</code></code></pre> +<p>On Mac OSX, the environment variable to set is <code>DYLD_LIBRARY_PATH</code>.</p> +<h3 id="Check_that_reftest_can_find_httpd.js">Check that reftest can find httpd.js</h3> +<p>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 <code>httpd.js</code>. Typically, the reason why it would not find it is that you accidentally built xpcshell with <code>--disable-tests</code>. So, make sure that the path you pass to <code>--xre-path</code> does contain a <code>httpd.js</code> file under the <code>components</code> subdirectory.</p> +<p>This is good:</p> +<pre class="brush: bash">$ 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</pre> +<p>This is bad (was caused by <code>--disable-tests</code>):</p> +<pre class="brush: bash">$ find /hack/mozilla-central/objdir/dist/bin/ -name httpd.js +/hack/mozilla-central/objdir/dist/bin/modules/commonjs/sdk/test/httpd.js</pre> +<h3 id="Check_that_you_didn't_forget_to_make_package-tests">Check that you didn't forget to make package-tests</h3> +<p>Forgetting the <code>make package-tests</code> step described above would certainly explain why nothing works.</p> +<h3 id="Check_that_you_passed_a_correct_relative_path_to_the_reftest.list">Check that you passed a correct relative path to the reftest.list</h3> +<p>The final argumant in the command line running reftest is the <code>relative/path/from/B2G/objdir-gecko/to/reftest.list</code>. This must be a relative path from the <code>B2G/objdir-gecko</code> directory to a <code>reftest.list</code> file under it. So check that a <code>reftest.list </code>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 <code>package-tests</code> as explained above.</p> +<p>Sample command line:</p> +<pre class="brush: bash">$ 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</pre> +<p>Here, we are running only the <code>css-gradients</code> directory of reftests.</p> 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/' +--- +<h2 id="Marionette_ক্লায়েন্ট_সেট_আপ">Marionette <span class="short_text" id="result_box" lang="bn"><span class="hps">ক্লায়েন্ট</span> <span class="alt-edited hps">সেট আপ</span></span></h2> + +<p>The Marionette <span id="result_box" lang="bn"><span class="hps">ক্লায়েন্ট</span></span> <span id="result_box" lang="bn"><span class="hps">একটি</span> <span class="hps">পাইথন</span> <span class="hps">প্যাকেজ</span></span> <span id="result_box" lang="bn"><span class="hps">যা দিয়ে</span></span> <span id="result_box" lang="bn"><span class="alt-edited hps">আপনি</span> <span class="alt-edited hps">Marionette</span> <span class="hps">টেস্ট</span> <span class="hps">চালাতে পারেন</span></span>: <span id="result_box" lang="bn"><span class="hps">পাইথন</span> <span class="hps">পরীক্ষা, এবং</span> <span class="hps">জাভাস্ক্রিপ্ট</span> <span class="hps">WebAPI</span> <span class="alt-edited hps">টেস্ট</span> <span class="hps">উভয়ই</span></span>। <span id="result_box" lang="bn"><span class="hps">আপনি এটা</span> <span class="hps">ব্যবহার করার পূর্বে</span> <span class="hps">আপনার মেশিনে</span> <span class="hps">এই</span> <span class="hps">সেট আপ</span> <span class="hps">করতে হবে।</span></span></p> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">এটা করার জন্য,</span> <span class="hps">আপনার একটি</span> <span class="hps">Gecko</span> <span class="alt-edited hps">ট্রি</span> <span class="alt-edited hps">ক্লোন করা</span> <span class="hps">উচিত</span></span>; <span id="result_box" lang="bn"><span class="hps">হয়</span></span> Gecko <span id="result_box" lang="bn"><span class="alt-edited hps">ট্রি <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস এর ভিতরে <span id="result_box" lang="bn"><span class="alt-edited hps">ক্লোন</span></span></span></span></span></span>, অথবা <span id="result_box" lang="bn"><span>একটি</span> <span class="alt-edited hps">স্ট্যান্ডঅ্যালোন</span> <span class="hps">Gecko</span> <span class="alt-edited hps">ক্লোন </span></span>(e.g., <a href="http://hg.mozilla.org/mozilla-central/" title="http://hg.mozilla.org/mozilla-central/">mozilla-central</a>) কাজ করবে। <span id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ, <span id="result_box" lang="bn"><span class="alt-edited hps">মনে করুন প্রথমবারের মত আপনি <span id="result_box" lang="bn"><span class="hps">Gecko</span> <span class="alt-edited hps">ট্রি</span> <span class="alt-edited hps">ক্লোন করছেন</span></span></span></span></span></span>:</p> + +<p><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">প্রথমে</span> </span>Mercurial <span class="short_text" id="result_box" lang="bn"><span class="hps">ইনস্টল করুন</span></span>, যদি <span class="short_text" id="result_box" lang="bn"><span class="hps">এটা</span> <span class="hps">এখনো</span> <span class="hps">ইনস্টল</span> <span class="hps">না হয়ে থাকে</span></span>। আপনার যদি Homebrew <span id="result_box" lang="bn"><span class="hps">ইনস্টল করা থাকে, তাহলে আপনি ম্যাকে এভাবে করতে পারেন।</span></span><span class="short_text" id="result_box" lang="bn"><span class="hps">অন্যান্য</span> <span class="hps">প্যাকেজ</span> <span class="hps">ম্যানেজার</span> <span class="hps">পৃথক হবে</span></span>:</p> + +<p><code>$ brew install mercurial</code></p> + +<p><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">আপনার কাজের</span> <span class="alt-edited hps">ডিরেক্টরি</span> <span class="hps">পরিবর্তন করুন</span></span> (e.g. ~/code) <span class="short_text" id="result_box" lang="bn"><span class="hps">এবং</span> <span class="hps">ক্লোনিং</span> <span class="alt-edited hps">প্রক্রিয়া</span> <span class="alt-edited hps">শুরু করতে</span> <span class="alt-edited hps">এটি</span> <span class="alt-edited hps">লিখুন</span></span>:</p> + +<p><code>$ hg clone http://hg.mozilla.org/mozilla-central/ $GECKO_DIR</code></p> + +<p>... <span class="short_text" id="result_box" lang="bn"><span class="hps">যেখানে</span></span> $GECKO_DIR <span class="short_text" id="result_box" lang="bn"><span class="hps">কোনো</span> <span class="alt-edited hps">সঠিক</span> <span class="hps">ডিরেক্টরি</span> <span class="hps">নাম</span> <span class="hps">হতে পারে</span></span>, e.g. <code>mozilla-central</code>. যা কিছু সময় নিতে পারে (<span id="result_box" lang="bn"><span class="hps">প্রায় ১০</span> <span class="hps">মিনিট এর মধ্যে <span id="result_box" lang="bn"><span>একটি দ্রুত</span> <span class="alt-edited hps">সংযোগ সহ</span></span></span></span>).</p> + +<p><span id="result_box" lang="bn"><span class="hps">একটি</span> <span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="hps">বিল্ড</span> <span class="alt-edited hps">এনভায়রনমেন্ট</span> <span class="hps">সেট আপ কিভাবে করা যায় <span id="result_box" lang="bn"><span class="hps">বিস্তারিত জানতে</span></span> </span></span><a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a> দেখুন এবং কোডটি লিখুন।</p> + +<pre>$ cd $GECKO_DIR/testing/marionette/client + +$ python setup.py develop</pre> + +<p><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">আপনার</span> <span class="hps">একটি</span></span> <a href="/en-US/docs/Python/Virtualenv" title="/en-US/docs/Python/Virtualenv">virtualenv</a> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্যবহার</span> <span class="hps">করা আবশ্যক</span></span>। <span class="short_text" id="result_box" lang="bn"><span class="hps">দ্রুত</span></span> virtualenv সেট<span class="short_text" id="result_box" lang="bn"><span class="hps">আপ</span></span>:</p> + +<p><code>$ pip install virtualenv</code></p> + +<p><code>$ virtualenv $MARIONETTE_ENV</code></p> + +<p>আবার, <code>$MARIONETTE_ENV</code> <span class="short_text" id="result_box" lang="bn"><span class="hps">কোনো</span> <span class="alt-edited hps">সঠিক</span> <span class="hps">ডিরেক্টরি</span> <span class="hps">নাম</span> <span class="hps">হতে পারে</span></span>। <span id="result_box" lang="bn"><span class="alt-edited hps">এখন আপনার <span id="result_box" lang="bn"><span class="hps">উপরোক্ত <span id="result_box" lang="bn"><span class="alt-edited hps">ধাপগুলি</span> <span class="hps">চালাতে</span> <span class="hps">সক্ষম হওয়া উচিত <span id="result_box" lang="bn"><span class="hps">কিন্তু নতুন</span> <span class="hps">ভার্চুয়াল</span> <span class="hps">পরিবেশে</span></span></span></span></span></span></span></span>:</p> + +<pre>$ cd $GECKO_DIR/testing/marionette/client + +$ $MARIONETTE_ENV/bin/python setup.py develop</pre> + +<p><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">Marionette</span> <span class="hps">ইনস্টল করা হয়েছে</span> <span class="hps">কিনা <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">যাচাই করতে</span></span></span></span>:</p> + +<pre>$ $MARIONETTE_ENV/bin/python +>>> from marionette import Marionette</pre> + +<p><span id="result_box" lang="bn"><span class="alt-edited hps">Marionette</span> <span class="hps">সেট আপ করার পরে</span> <span class="alt-edited hps">টেস্ট</span> <span class="hps">চালানোর</span> <span class="hps">সম্পর্কে আরো তথ্য জানতে </span></span> <a href="/en-US/docs/Marionette/Running_Tests" title="/en-US/docs/Marionette/Running_Tests">Running Marionette tests</a> দেখুন। </p> 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 +--- +<h2 id="লেখার_ইউনিট_পরীক্ষা">লেখার ইউনিট পরীক্ষা</h2> +<p>ইউনিট পরীক্ষার চলমানকারী <a class="external" href="http://visionmedia.github.com/mocha/" title="http://visionmedia.github.com/mocha/">mocha</a> ব্যবহার করে <a class="external" href="http://visionmedia.github.com/mocha/index.html#tdd-interface" title="http://visionmedia.github.com/mocha/index.html#tdd-interface">TDD interface</a> । মোচা মালিকানা অধিকারের দাবি করে না (কোনো <code>ok</code> orঅথবা <code>assert_equals নেই</code>),সুতরাং আমরা <a class="external" href="http://chaijs.com/api/assert/" title="http://chaijs.com/code/assert.html">chai</a> ব্যবহার করি অধিকার দেয়ার জন্য।</p> +<p> এটি বিশেষ ভাবে সুপারিশ করা হয়েছে যে আপনি <a class="external" href="http://visionmedia.github.com/mocha/" title="http://visionmedia.github.com/mocha/">mocha</a> সাইটের মাধ্যমে পড়ুন , যেহেতু সকল পরীক্ষা সত্যিকারভাবে মোচা পরীক্ষা ।আপনাকে শুরু করানোর জন্য এখানে দলিল কে কেন্দ্রবিন্দুতে রাখা হয়েছে,এবং আমাদের বিশেষ সম্পুর্ণতা টেষ্ট এজেন্ট এবং গা য়া তে।</p> +<p> এটা আরো নোট করা গুরুত্বপূর্ণ যে আমরা বিশেষ ফাংশন যোগ করি ( যেমন <code>require()</code> এবং <code>requireApp()</code>) লেখার পরীক্ষাকে সহজতর বানাতে।সকল পরীক্ষা সাহায্যকারী স্ক্রীপ্ট গুলো <code><a class="link-https" href="https://github.com/mozilla-b2g/gaia/tree/master/dev_apps/test-agent/common/test" title="https://github.com/mozilla-b2g/gaia/tree/master/dev_apps/test-agent/common/test">/common/test</a></code> তে সরাসরি পাওয়া যেতে পারে।</p> +<h2 id="ফাইলের_নাম_করণ"><strong>ফাইলের নাম করণ</strong></h2> +<h4 id="পরীক্ষা_গুলো_সাধারণত_একের_থেকে_এক।_একটি_হাতিয়ার_সরাসরি_js_তে_থাকেএবং_একটি_পরীক্ষা_সরাসরি_test_তে_থাকে।"><strong>পরীক্ষা গুলো সাধারণত</strong> একের থেকে এক। একটি হাতিয়ার সরাসরি <code>js/</code> তে থাকে,এবং একটি পরীক্ষা সরাসরি <code>test/</code> তে থাকে।</h4> +<h3 id="উদাহরণ">উদাহরণ</h3> +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">হাতিয়ার</td> + <td class="header">পরীক্ষা</td> + </tr> + <tr> + <td>apps/app/js/file.js</td> + <td>apps/app/test/unit/file_test.js</td> + </tr> + <tr> + <td>apps/app/js/nested/thing/file.js</td> + <td>apps/app/test/unit/nested/thing/file_test.js</td> + </tr> + </tbody> +</table> +<h3 id="হাতিয়ারের_উদাহরণ_(gist)"><strong>হাতিয়ারের উদাহরণ (<a class="link-https" href="https://gist.github.com/2703499" title="https://gist.github.com/2703499">gist</a>):</strong></h3> +<pre class="brush: js">//apps/example/js/example.js +var Example = (function(){ + return { + math: function() { + + }, + + complexMethod: function() { + + }, + + asyncMethod: function(callback) { + + } + } +}()); +</pre> +<h3 id="পরীক্ষার_উদাহরণ_(gist)"><strong>পরীক্ষার উদাহরণ (<a class="link-https" href="https://gist.github.com/2703499" title="https://gist.github.com/2703499">gist</a>):</strong></h3> +<pre class="brush: js">//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'); + }); + }); + +}); +</pre> 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 +--- +<div class="summary"> + <p><span class="seoSummary"><a href="/en-US/docs/Writing_xpcshell-based_unit_tests" title="/en-US/docs/Writing_xpcshell-based_unit_tests">XPCShell tests</a> 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. </span></p> +</div> +<div class="note"> + <p><strong>নোটঃএই অনুচ্ছেদে </strong><code>$B2G_HOME</code> সুপারিশ করে থাকে B2G রেস্পেরোটরি ক্লোন করে থাকে ।</p> +</div> +<h2 id="Prerequisites">Prerequisites</h2> +<ul> + <li>You need to build B2G for the target you're testing (see: <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS" title="/en-US/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>).</li> + <li>You need to install some Python packages, either in a virtualenv or otherwise: + <pre>cd $GECKO_DIR/testing/mozbase +python setup_development.py +cd $GECKO_DIR/testing/marionette/client +python setup.py develop +</pre> + </li> + <li>Either make sure <code>adb</code> is on your path or specify it with <code>--adbpath</code> (on Linux it is found at <code>$B2G_HOME/out/host/linux-x86/bin/adb</code><em>.</em>)</li> + <li>Have a local copy of <a href="http://busybox.net/downloads/binaries/latest/busybox-armv6l">Busybox</a> (this isn't strictly necessary but greatly reduces the setup time required.)</li> +</ul> +<h2 id="Running_the_tests">Running the tests</h2> +<p>You can then run xpcshell tests using one of the following sets of terminal commands:</p> +<p>If you are using an emulator:</p> +<pre>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 <<a href="https://developer.mozilla.org/en-US/docs/Mozilla/QA/Writing_xpcshell-based_unit_tests#Adding_your_tests_to_the_xpcshell_manifest">path_to_xpcshell_manifest</a>> --testing-modules-dir <path_to_testing_modules_dir> --busybox <path_to_busybox_binary></pre> +<p>If you are using a real device:</p> +<pre>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 <<a href="https://developer.mozilla.org/en-US/docs/Mozilla/QA/Writing_xpcshell-based_unit_tests#Adding_your_tests_to_the_xpcshell_manifest">path_to_xpcshell_manifest</a>> --testing-modules-dir <path_to_testing_modules_dir></pre> +<p>You can optionally add <code>--total-chunks</code> and <code>--this-chunks</code> arguments as you would with regular desktop xpcshell tests. Use:</p> +<pre>python runtestsb2g.py --help</pre> +<p>for a full list of supported arguments.</p> +<p><strong>Important:</strong> The manifest path you supply must be under the <code>dist/test-stage/xpcshell</code> directory. Don't use a path to the original source location of the manifest in the tree.</p> +<p>After you invoke <code>runtestsb2g.py</code>, 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.</p> +<p>When the tests are done, the emulator is shut down for you, or if you're using a device, the device is rebooted.</p> +<h3 id="Installing_busybox_manually">Installing busybox manually</h3> +<p>When running xpcshell tests on devices there is no <code>--busybox</code> 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 <a href="https://github.com/mozilla/Negatus/blob/master/setup-tools.sh" title="https://github.com/mozilla/Negatus/blob/master/setup-tools.sh">https://github.com/mozilla/Negatus/blob/master/setup-tools.sh</a>.</p> +<h2 id="Running_xpcshell_tests_with_a_downloaded_emulator">Running xpcshell tests with a downloaded emulator</h2> +<p>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 <code>--b2gpath $B2G_HOME</code> argument for <code>runreftestb2g.py</code> with <code>--b2gpath /path/to/unpacked/emulator</code>.</p> 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 +--- +<div> + + <p> </p> + <p> you've <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">set up your build system</a> and performed your <a href="/en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build">initial pull and configure</a> of the code, you can build Boot to Gecko. This guide explains how.</p> +</div> +<h2 id="Updating_your_code">Updating your code</h2> +<p>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:</p> +<pre>git pull +./repo sync -d +</pre> +<p>You can update a specific make target's repository by specifying its name:</p> +<pre>./repo sync gaia +</pre> +<p>The repo command has other options available that might be interesting; <code>repo help</code> will give you a lot of information.</p> +<h2 id="Building">Building</h2> +<div class="note"> + <p><strong>Note:</strong> Before building, you may want to set up a <code>.userconfig</code> file to customize the build. See <a href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a> for details.</p> +</div> +<p>To build Boot to Gecko, simply use the <code>build.sh</code> tool:</p> +<pre>cd B2G +./build.sh +</pre> +<p>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.</p> +<h3 id="Building_specific_modules">Building specific modules</h3> +<p>If you want to build just a particular module, such as Gecko, you can specify it by name:</p> +<pre>./build.sh gecko +</pre> +<p>In order to refresh only one application, you can build only <code>gaia</code> module by using the <code>BUILD_APP_NAME</code> environment variable:</p> +<pre>BUILD_APP_NAME=calendar ./build.sh gaia</pre> +<p>To get a list of the modules you can build, you can do:</p> +<pre>./build.sh modules +</pre> +<h3 id="Setting_the_number_of_processor_cores_to_use">Setting the number of processor cores to use</h3> +<p>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 <code>-j</code> parameter when running <code>build.sh</code>. 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!</p> +<p>For example, to build using just two parallel tasks:</p> +<pre>./build.sh -j2 +</pre> +<p>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:</p> +<pre>./build.sh -j1 +</pre> +<h3 id="Building_multilocale">Building multilocale</h3> +<p>To create a multilocale build, do the following:</p> +<h4 id="Gaia">Gaia</h4> +<ol> + <li>Determine which Gaia languages file to use. We're currently using <a href="http://hg.mozilla.org/integration/gaia-nightly/file/e2eed5263e77/shared/resources/languages-dev.json"><code>locales/languages_dev.json</code></a> and <a href="http://hg.mozilla.org/integration/gaia-nightly/file/e2eed5263e77/shared/resources/languages-all.json"><code>locales/languages_all.json</code></a> as our Gaia languages files.</li> + <li>Clone the appropriate locales from <a href="http://hg.mozilla.org/gaia-l10n">http://hg.mozilla.org/gaia-l10n</a> into a directory; we use <code>gaia-l10n/</code>. You could use the locales/ directory . You'll need to clone a repo for each locale listed in the languages file.</li> + <li>In your environment, set <code>LOCALE_BASEDIR</code> to the absolute path of the directory in step 2. Set <code>LOCALES_FILE</code> to the absolute path of the file in step 1.</li> + <li>Also, you can set a GAIA_DEFAULT_LOCALE if you want to set a default locale.</li> +</ol> +<pre style="font-size: 12px;">cd gaia/locales/ +hg clone https://hg.mozilla.org/releases/gaia-l10n/v1_2/es</pre> +<div> + Set your environment variables:</div> +<div> + </div> +<pre>export LOCALE_BASEDIR=$PWD/locales +export LOCALES_FILE=$PWD/locales/languages_dev.json +export GAIA_DEFAULT_LOCALE=es +</pre> +<p>And the <code>languages-dev.json</code> could be replaced by your own <code>languages-own.json</code> path, which could formed like this. <span style="line-height: 1.5;">You would need to add an entry per each repo cloned in your locales directory.</span><span style="line-height: 1.5;">:</span></p> +<pre>{ + "en-US" : "English (US)", + "es" : "Español" +} +</pre> +<div> + <p>Since bug 884752 landed (November 2013), to add keyboard layouts (if available in Gaia), you can use parameter GAIA_KEYBOARD_LAYOUTS. </p> + <p>Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=884752</p> + <p>Layouts: https://github.com/mozilla-b2g/gaia/tree/v1.2/keyboard/layouts</p> + <p>For example, to add Spanish and Italian keyboard layout, run the previous command adding</p> + <pre> GAIA_KEYBOARD_LAYOUTS=en,es,it</pre> + <p><span style="line-height: 1.5;">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:</span></p> + <pre> make clean && make production LOCALES_FILE=locales/languages-own.json</pre> + <h4 id="Gecko">Gecko</h4> + <ol> + <li>Determine which Gecko languages file to use. We're currently using <a href="http://hg.mozilla.org/releases/mozilla-b2g18/file/default/b2g/locales/all-locales">b2g/locales/all-locales</a> as our Gecko languages file.</li> + <li>Clone the appropriate locales into a directory; this can be <code>gecko-l10n/</code> . + <ul> + <li>For mozilla-central, use <a href="http://hg.mozilla.org/l10n-central/">http://hg.mozilla.org/l10n-central/</a></li> + <li>For mozilla-aurora, use <a href="http://hg.mozilla.org/releases/l10n/mozilla-aurora/">http://hg.mozilla.org/releases/l10n/mozilla-aurora/</a></li> + <li>For mozilla-beta or mozilla-b2g18 or mozilla-b2g26_v1_2, use <a href="http://hg.mozilla.org/releases/l10n/mozilla-beta/">http://hg.mozilla.org/releases/l10n/mozilla-beta/</a></li> + </ul> + </li> + <li>Clone <a href="http://hg.mozilla.org/build/compare-locales">compare-locales</a>.</li> + <li> + <p>In your environment, set <code>L10NBASEDIR</code> to the absolute path of the directory in step 2. Set <code>MOZ_CHROME_MULTILOCALE</code> to a string of space-delimited locales from step 1.</p> + <p>Add the <code>compare-locales/scripts</code> dir to your <code>PATH</code>, and <code>compare-locales/lib</code> to your <code>PYTHONPATH</code>.</p> + For instance, + <pre>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" +</pre> + <p>Once you have the above set up, you can run build.sh.</p> + <p>You can <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=818560#c9/">use .userconfig</a> as well:</p> + <pre>## 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" + </pre> + </li> + </ol> + <div class="note"> + <p>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)</p> + </div> + <p>These instructions may change as we smooth things out.</p> + <h2 id="Known_errors">Known errors</h2> + <h3 id="Build_failed!">"Build failed!"</h3> + <p><span id="cke_bm_81S" style="display: none;"> </span>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.</p> + <div class="note"> + <p><strong>Note that configuring and building B2G for Keon DOESN'T WORK on Mac</strong>. You'll need to use Linux to build for this device.<span id="cke_bm_81E" style="display: none;"> </span></p> + </div> + <h3 id="Mountain_Lion-specific_build_errors">Mountain Lion-specific build errors</h3> + <div> + <p>1. If you are building on OS X 10.8 "Mountain Lion" (Xcode 4.4.1 or later) and encounter the following error:</p> + <pre style="font-size: 14px;">external/qemu/android/skin/trackball.c:130:25: error: 'M_PI' undeclared (first use in this function)</pre> + Edit the file: <code style="font-size: 14px;">B2G/external/qemu/Makefile.android</code> and add in line 78:<br> + <pre style="font-size: 14px;">MY_CFLAGS += -DM_PI=3.14159265358979323846264338327950288 #/* B2G_fix: not finding M_PI constant */ +</pre> + </div> + <div> + 2. If you are on Mountain Lion and you receive an error during ./build.sh like:</div> + <div> + <pre>/System/Library/Frameworks/IOKit.framework/Headers/usb/USB.h:797:9: error: too many #pragma options align=reset</pre> + <p>Replace all instances of '#pragma options align=reset' with '#pragma pack()' inside /System/Library/Frameworks/IOKit.framework/Headers/usb/USB.h</p> + </div> + <h3 id="Undefined_symbols__sqlite3_androidopt_handle_pragma_and__sqlite3_androidopt_open">Undefined symbols "_sqlite3_androidopt_handle_pragma" and "_sqlite3_androidopt_open"</h3> + <p>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 <a href="https://groups.google.com/forum/#!msg/android-building/yAfPyUqCsiQ/7zvICk4GWjYJ">https://groups.google.com/forum/#!msg/android-building/yAfPyUqCsiQ/7zvICk4GWjYJ</a> to the external/sqlite/dist/Android.mk file.</p> + <h3 id="KeyedVector.h19331_error_indexOfKey_was_not_declared_in_this_scope">KeyedVector.h:193:31: error: indexOfKey was not declared in this scope</h3> + <p>This error appears when your gcc version is too recent. Install gcc/g++/g++-multilib 4.6.x versions. See <a href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customizing with the .userconfig file</a> for more information.</p> + <div class="note"> + <p><strong>Community Note:</strong> 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.</p> + </div> + <h3 id="arm-linux-androideabi-g_Internal_error_Killed_program_cc1plus">arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)</h3> + <p>If you see this message, it most likely means that free memory is lacking. Ensure there is enough free memory before running <code>./build.sh</code>. It should run fine if your system has 4GB of RAM.</p> + <h3 id="...is_referenced_by_DSO_error">"...is referenced by DSO" error</h3> + <p>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.</p> + <p>You can get this with some versions in binutils. If you run Debian Stable, you can use the <em>gold</em> linker by installing the package <code>binutils-gold</code>. Note that the <em>gold</em> linker is already installed by <code>binutils</code>, but it's not used by default; <code>binutils-gold</code> does just that.</p> + <h3 id="If_you_get_build_errors_while_the_build_system_is_running_tests">If you get build errors while the build system is running tests</h3> + <p>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:</p> + <pre>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</pre> + <p>In this situation, try deleting the <code>gaia/xulrunner-sdk</code> directory and re-pulling the code:</p> + <pre>rm -r gaia/xulrunner-sdk +</pre> + <p>This deletes the downloaded, precompiled copy of <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> that the build system retrieves automatically; on your next build, a new copy of XULRunner will be automatically retrieved.</p> + <h3 id="Cannot_fetch_platformlibcore">Cannot fetch platform/libcore</h3> + <p>If you tried to configure your B2G build for Nexus S (<code>./config.sh nexus-s</code>) 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:</p> + <pre class="brush: bash">git clone https://github.com/mozilla-b2g/b2g-manifest.git</pre> + <p>Edit the <code>nexus-s.xml</code> file in this repo, replacing the linaro git entry with a reference to the aosp entry, which should read like so:</p> + <pre class="brush: xml"><default revision="refs/tags/android-4.0.4_r1.2" + remote="aosp" + sync-j="4" /></pre> + <p>Commit these changes (<code>git commit -a</code>) and then change the <code>config.sh</code> 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:</p> + <pre class="brush: bash">GITREPO=${GITREPO:-"file:///home/path/to/my/b2g-manifest"}</pre> + <h3 id="clang_errors_when_building_with_Xcode_5_on_Mac">clang errors when building with Xcode 5 on Mac</h3> + <p>If you are building on Mac OS X 10.8 with Xcode 5, you will likely see errors like the following:</p> + <pre class="brush: bash">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</pre> + <p>This is because Xcode 5 changes the g++ compiler in <code>/usr/bin</code>, 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 <code>build/core/combo/HOST_darwin-x86.mk:</code></p> + <pre class="brush: bash">HOST_CXX := g++</pre> + <p>to</p> + <pre class="brush: bash">HOST_CXX := g++-4.6 +ifeq (,$(wildcard /usr/local/bin/g++-4.6)) + HOST_CXX := g++ +endif</pre> + <p>Next, you'll want to uninstall gcc, using brew (this assumes you've run the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Run_Firefox_OS_Mac_Bootstrap">Mac OS bootstrap script</a> — if not, you'll need to complete that step before continuing):</p> + <pre class="brush: bash">brew uninstall gcc-4.6</pre> + <p>Now reinstall gcc with multilib and c++ support:</p> + <pre class="brush: bash">brew install --enable-cxx https://gist.github.com/artlogic/6988658/raw/aeb9d1ea098274ad3f3fe2637b9df7f308a8a120/gcc-4.6.rb</pre> + <p>Make sure /usr/local/bin is on your PATH. You can do this temporarily by typing the following into the command prompt:</p> + <pre class="brush: bash">export PATH=/usr/local/bin:$PATH</pre> + <p>You can make the above change permanent by adding it to the <code>.bash_profile</code> file in your home directory.</p> + <p>After you've set your PATH, make sure you can run both of the following commands:</p> + <pre class="brush: bash">gcc-4.6 -v + +g++-4.6 -v</pre> + <p>If either of these commands fail, you may need to relink your gcc using brew with the following command:</p> + <pre class="brush: bash">brew link --overwrite gcc-4.6</pre> + <p>It's also possible that <code>/usr/bin/c++</code> is not pointing at clang++ as it should be with Xcode 5 installed. You can determine if it is by typing the following:</p> + <pre class="brush: bash">ls -l /usr/bin/c++</pre> + <p>It should return something that looks like this:</p> + <pre class="brush: bash">lrwxr-xr-x 1 root admin 7 Sep 19 11:40 /usr/bin/c++ -> clang++ +</pre> + <p>If c++ is pointing at something other than clang++, update it with the following commands:</p> + <pre class="brush: bash">sudo rm /usr/bin/c++ + +sudo ln -s /usr/bin/clang++ /usr/bin/c++</pre> + <h2 id="Next_steps">Next steps</h2> + <p>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:</p> + <ul> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="Mozilla/Firefox_OS/Using_the_B2G_emulators">Using the B2G emulators</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Using the B2G desktop client</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Installing_on_a_mobile_device" title="Mozilla/Firefox_OS/Installing_on_a_mobile_device">Installing Boot to Gecko on a mobile device</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Pandaboard" title="Mozilla/Firefox_OS/Pandaboard">Installing Boot to Gecko on a pandaboard</a></li> + </ul> +</div> +<h3 id="Submitting_bugs_on_B2GFirefox_OSGaia">Submitting bugs on B2G/Firefox OS/Gaia</h3> +<p>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 <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox%20OS">file the bug on Bugzilla</a>, under the "Firefox OS" project, but you should include version specifics:</p> +<ol> + <li>To start with, tell us the major version number, e.g. <em>1.4.0.0-prerelease</em>. This can be found on the device under <em>Settings > Device Information</em>.</li> + <li>You can provide more specific version identifiers by returning the current hashes from the gaia and gecko repositories. This can be done like so: + <pre class="brush: bash">#!/bin/bash +(cd gaia; echo "gaia $(git rev-parse HEAD)") +(cd gecko; echo "gecko $(git rev-parse HEAD)")</pre> + </li> +</ol> 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 +--- +<div> + ইন্সটল করুন আগের দরকারি <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Requirements_for_OS_X">Requirements_for_OS_X</a> এর গঠন।</div> +<div> + </div> +<div> + বিনুটিলস ইন্সটল করুন,ডিবাগ গঠনের মধ্যে objdump এর জন্য।</div> +<pre>brew install binutils</pre> +<div> + <span style="line-height: 1.5;">একটি ডিস্ক ইমেগ তৈরি করুন Case-sensitive Journaled HFS+ফাইল সিস্টেমের সাথে এবং নিচের কমান্ড অনুসারে ব্যবহার গঠন দেখুন।</span></div> +<div> + </div> +<div> + <pre>hdiutil create -volname 'firefoxos' -type SPARSE -fs 'Case-sensitive Journaled HFS+' -size 40g ~/firefoxos.sparseimage +<span style="line-height: 1.5;">open ~/firefoxos.sparseimage</span> +cd /Volumes/firefoxos/</pre> +</div> +<div> + <h3 id="B2G_রেপোসিটোরি_ক্লোন_করুন" style="line-height: 30px;">B2G রেপোসিটোরি ক্লোন করুন</h3> + <p>প্রথম ধাপ হল,আগে আপনি আপনার প্রথম গঠন শুরু করুন,B2G রেপোসিটোরি ক্লোন করতে ।ইহা সবকিছু সম্মুখীন হবেনা।এর পরিবর্তে ,ইহা B2G গঠন সিস্টেম এবং সেট আপ ইউটিলিটি সম্মুখীন করে থাকবেন।বেশির ভাগ আসল B2G কোড প্রধান মোজিলা <a class="vt-p" href="/en-US/docs/Mercurial" title="Mercurial">Mercurial</a> রেপোসিটরিতে ।</p> + <p>রেপোসিটরি ক্লোনে git ব্যবহার করুন:</p> + <pre style="font-size: 14px;">git clone git://github.com/mozilla-b2g/B2G.git</pre> + <p>ক্লোনিং করার পরে (যা কেবল একটি মিনিট নিয়ে থাকে একটি দ্রুত সংযোগের জন্য),<code>cd</code> হল B2G ডিরেক্টরিতেঃ</p> + <pre style="font-size: 14px;">cd B2G</pre> +</div> +<h3 id="B2G_কনফিগারিং_করা_ফ্লেমের_জন্য" style="line-height: 30px;">B2G কনফিগারিং করা ফ্লেমের জন্য</h3> +<p>একদা আপনি কোর B2G গঠন সিস্টেম উদ্ধার করেছেন,আপনাকে এটি কনফিগার করা উচিত ডিভাইসের জন্য যতে আপনি ইন্সটল করারা প্ল্যান করেছেন ।কিছু সাপোর্টেড ডিভাইসের একটি লিস্ট পাওয়ার জন্য,আপনি <code>config.sh</code> ইউটিলিটি ব্যবহার করতে পারেন—B2G ডিরেক্টরির মধ্যে থেকে পরবর্তী কমান্ড করুনঃ</p> +<pre style="font-size: 14px;">./config.sh flame</pre> +<div class="warning" style="font-size: 14px;"> + <strong>গুরুত্বপুর্নঃডাউনলোড</strong> ~১৫জিবি কোড সোর্সেস-প্রয়োজন ভাল ইন্টারনেট স্পিড।</div> +<div class="syntaxbox" lang="ruby" style=""> + <h3 id="B2G_গঠন_কনফিগারিং_করুন_একটি_মোবাইল_ডিভাইসের_জন্য" style="line-height: 24px;">B2G গঠন কনফিগারিং করুন একটি মোবাইল ডিভাইসের জন্য</h3> + <p>সেই ক্ষেত্রে At this point, আপনার ডিভাইস সংযুক্ত করুন যদি এটি ইতিমধ্যে সংযুক্ত না থাকে; কনফিগার প্রসেস এর ইহার সুবিধা পাওয়ার প্রয়োজন পড়লে।</p> + <pre>adb devices -l +><span style="font-size: 1rem;">List of devices attached </span> +<span style="line-height: 1.5;">>f04840ed</span><span class="Apple-tab-span" style="line-height: 1.5;"> </span><span style="line-height: 1.5;">device</span></pre> + <p><span style="line-height: 1.5;">ডিভাইস সবসময় পাওয়া যাবে এবং সংযুক্ত থাকবেঃ</span></p> + <pre>mkdir backup-flame +cd backup-flame +adb pull /system system +adb pull /data data</pre> + <h3 id="OSX_এর_গঠনের_সমস্যার_উপরে_কাজ_করা"><span style="font-size: 1.714285714285714rem; letter-spacing: -0.5px; line-height: 24px;">OSX এর গঠনের সমস্যার উপরে </span>কাজ করা</h3> + <p><span style="line-height: 1.5;"> OSX 10.9.4 Maveric এর উপরে পরীক্ষা চালানো </span></p> + <h3 id="mkfs.vfat_এর_বিদ্যমান_না_থাকা">mkfs.vfat এর বিদ্যমান না থাকা</h3> + <p><a href="https://github.com/sv99/dosfstools-osx">dosfstools-osx</a> এর ছবির সাথে কাজ করার জন্য dosfstools এর পোর্টেড ভার্সন ইন্সটল করার প্রয়োজন ।</p> + <pre>brew create https://github.com/sv99/dosfstools-osx.git</pre> + <p>Dosfstools ফরমুলা ইডিট করুন</p> + <pre class="brush: js"><span class="nb">require</span> <span class="s2">"formula"</span> + +<span class="k">class</span> <span class="nc">Dosfstools</span> <span class="o"><</span> <span class="no">Formula</span> + <span class="n">homepage</span> <span class="s2">"https://github.com/sv99/dosfstools-osx"</span> + <span class="n">url</span> <span class="s2">"https://github.com/sv99/dosfstools-osx.git"</span> + <span class="n">sha1</span> <span class="s2">""</span> + + <span class="k">def</span> <span class="nf">install</span> + <span class="nb">system</span> <span class="s2">"make"</span><span class="p">,</span> <span class="s2">"install"</span> + <span class="k">end</span> + +<span class="k">end</span> +</pre> + <p>এবং ইন্সটল করুন ।</p> + <pre>brew install dosfstools</pre> + <h4 id="বাগ_১০৩৯২২৩_এবং_১০২৭৬৮২_.userconfig_তে_কাজ_করে">বাগ ১০৩৯২২৩ এবং ১০২৭৬৮২ .userconfig তে কাজ করে</h4> + <div> + <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1039223" style="line-height: 1.5;">Bug 1039223</a><span style="line-height: 1.5;"> - ফ্লেম তৈরি করুন dt.img</span> মিসিং এর কম্পলেইন করতে বিফল হলে</div> + <div> + <div> + <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1027682">Bug 1027682</a> - [Flame][Build] Mac OS X 10.9 গঠন করতে বিফল হলে, elf.h ফাইল পাওয়া যায় না ।</div> + <div> + </div> + <div> + <pre># .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}"</pre> + <h3 id="First_Build">First Build</h3> + <pre>./build.sh</pre> + <div> + </div> + </div> + </div> +</div> +<p> </p> 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 +--- +<div class="summary"> + <p>ফায়ারফক্স ওএস বিল্ড এবং ইন্সটল করতে প্রচুর সময়, নেটওয়ার্ক ব্যান্ডউইথ এবং উচ্চক্ষমতাসম্পন্ন কম্পিউটারের প্রয়োজন হয়। দুঃখজনক হলেও সত্য যে, কাজ করার সময় কিছু না কিছু ভুল হওয়া স্বাভাবিক। এই পেজে পূর্ণ বিল্ড প্রক্রিয়ার লক্ষ্যসমূহকে নির্ধারণ করা হয়েছে এবং একই সঙ্গে প্রক্রিয়াটির বিভিন্ন ধাপ সম্পর্কে সংক্ষিপ্ত আলোচনা করা হয়েছে।</p> +</div> +<div class="note"> + <p><span style="font-weight: bold;">দ্রষ্টব্য:</span> ফায়ারফক্স ওএস বিল্ড প্রক্রিয়াটিতে 'B2G' বা 'Boot2Gecko' এর নাম বারবার দেখা যাবে। 'Boot2Gecko' হল ফায়ারফক্স ওএস প্রজেক্টের আসল সাংকেতিক নাম।</p> +</div> +<h2 id="বিল্ডের_লক্ষ্য_চারটি_'ইমেজ'_ফাইল">বিল্ডের লক্ষ্য: চারটি 'ইমেজ' ফাইল</h2> +<p>পুরো বিল্ড প্রক্রিয়াটির মূল লক্ষ্য হল চারটি ফাইল বিল্ড করা, যা ফায়ারফক্স ওএস ডিভাইসে স্থানান্তরযোগ্য।</p> +<table style="width: 90%; vertical-align: top; margin: 4px auto;"> + <tbody> + <tr> + <td><b>boot.img</b></td> + <td>লিনাক্স কার্নেল এবং রুট ফাইল সিস্টেমের ইমেজ, রুট ফাইল সিস্টেমের ইমেজটি কিছু সাধারণ ইউনিক্স টুলস ব্যবহার করতে দেয়।</td> + </tr> + <tr> + <td><b>system.img</b></td> + <td>ফায়ারফক্স ওএস প্রজেক্টের কেন্দ্রীয় অংশ, যাতে গংকের কিছু অংশ, গেকোর পোর্ট এবং b2g এক্সিকিউটেবলটি থাকে।</td> + </tr> + <tr> + <td><b>userdata.img</b></td> + <td>ব্যবহারকারীর গেকো প্রোফাইল এবং ডিভাইসের জন্য গায়া ওয়েব অ্যাপ্লিকেশন।</td> + </tr> + <tr> + <td><b>recovery.img</b></td> + <td>একটি লিনাক্স কার্নেল এবং রুট ফাইল সিস্টেম ইমেজ, যার সঙ্গে ইন্সটলজনিত সমস্যা ঠিক করার জন্য একটি সহজ টুল দেওয়া হয়েছে।</td> + </tr> + </tbody> +</table> + +<p>এই চারটি ইমেজ তৈরি হওয়ামাত্র তা ডিভাইসে স্থানান্তর করা যাবে।</p> +<p>Firefox OS is built on top of the base Android Open Source Project (AOSP). The AOSP tools <code>adb</code> and <code>fastboot</code> provide powerful ways to access and manipulate a device. Notably, the command <code>adb reboot-bootloader</code> can cause a connected device to reboot and pause at the early bootloader stage where the command <code>fastboot flash $partition $image</code> can be used to copy an image onto the device.</p> +<h3 id="The_Boot_Image">The Boot Image</h3> +<p>The Boot Image (<code>boot.img</code>) 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 <code>adb shell</code>.</p> +<p>The Boot Image also establishes the permissions of the root user in the <code>default.prop</code> file in the root directory.</p> +<p>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 <a href="http://k.japko.eu/alcatel-otf-hackers-guide-1.html">Alcatel One Touch Fire Hacking (Mini) Guide</a> page.</p> +<p>Boot Images can be tested before being installed by 'sideloading' them; the device can be started and paused in the bootloader and then <code>fastboot</code> can be used to boot from the Boot Image without installing it using the command <code>fastboot boot /some/path/to/boot.img</code>.</p> +<h3 id="The_System_Image">The System Image</h3> +<p>The System Image (<code>system.img</code>) provides the core of Firefox OS:</p> +<ul> + <li><strong>Gonk</strong>: the low-level components of the operating system</li> + <li><strong>Gecko</strong>: the port of the Firefox HTML display and JavaScript engine</li> + <li><strong>B2G</strong>: the core runtime process of the operating system.</li> +</ul> +<div class="note"> + <p>See <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform">the Firefox OS platform</a> guide for more information about the platform architecture.</p> +</div> +<p>The System Image will be copied to the <code>system</code> partition on the device and will be visible in the <code>/system/</code> directory when the device filesystem is accessed at runtime.</p> +<div class="note"> + <p><strong>Note</strong>: 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.</p> +</div> +<h3 id="The_User_Data_Image">The User Data Image</h3> +<p>The User Data Image (<code>userdata.img</code>) provides the Gaia applications loaded at runtime.</p> +<p>The User Data Image will be copied to the <code>userdata</code> partition on the device and the contents will be visible in the <code>/data/</code> directory when the device filesystem is accessed at runtime. Notably the <code>/data/b2g/</code> directory contains the Mozilla Gecko <em>profile</em> of the device user while the <code>/data/local/webapps/</code> directory contains the actual web applications available to the user.</p> +<h3 id="The_Recovery_Image">The Recovery Image</h3> +<p>The Recovery Image (<code>recovery.img</code>) 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.</p> +<p>The Recovery Image will be copied to the <code>recovery</code> partition on the device, which is not mounted onto the filesystem at regular runtime.</p> +<h2 id="The_Build_Process_setup_configure_build_install">The Build Process: setup, configure, build, install</h2> +<p>The overall process of building and installing Firefox OS involves four steps:</p> +<table style="width: 90%; vertical-align: top; margin: 4px auto;"> + <tbody> + <tr> + <td><b>Setup</b></td> + <td>Obtain copies of all the programs used by the build process, such as the right compilers and libraries.</td> + </tr> + <tr> + <td><b>Configure</b></td> + <td>Download the source code that will be built and create the <code>.configure</code> file that defines environmental variables specifying the paths and other values used in the build.</td> + </tr> + <tr> + <td><b>Build</b></td> + <td>Build the Gecko profile of the user and the Gaia web applciations for the device.</td> + </tr> + <tr> + <td><b>Install</b></td> + <td>Install the files on a device.</td> + </tr> + </tbody> +</table> + +<p> </p> +<h3 id="Setup">Setup</h3> +<p>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.</p> +<p>This step can be done by hand or using a script. Details are discussed in the <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites" title="Firefox OS build prerequisites">Firefox OS build prerequisites</a> page.</p> +<div class="note"> + <p><strong>Note</strong>: On UNIX and UNIX-like machines, the presence of the required software can be checked using the unix command <code>which</code> with the name of the required program as a parameter.</p> +</div> +<h3 id="Configuration">Configuration</h3> +<p>The actual build process starts with obtaining a copy of the Firefox OS (or B2G) software, usually by creating a Git clone of the <code>B2G</code> project. The build configuration will both obtain copies of all the source code which is to be built and create the <code>.config</code> file that specifies variables for the build.</p> +<p>This is run with the <code>config.sh</code> script. Details are discussed in the <a href="/en-US/Firefox_OS/Preparing_for_your_first_B2G_build" title="Preparing for your first B2G build">Preparing for your first B2G build</a> page.</p> +<p>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 <a href="/en-US/Firefox_OS/Phones">found here</a>.</p> +<p>The configure step will also use the Android Open Source Project <code>repo</code> tool to download (or update) a copy of all the code used in the build. These copies will be stored in the <code>.repo/projects</code> directory. Due to this activity, the configure step can take a long time and will download a lot of data.</p> +<h3 id="Build">Build</h3> +<p>The build step will actually compile all of the source code and produce the output images.</p> +<p>This is run with the <code>build.sh</code> script. Details are discussed in the <a href="/en-US/Firefox_OS/Building" title="Building">Building Firefox OS</a> page.</p> +<p>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.</p> +<p>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 <code>gecko</code> parameter. Similarly, Gaia can be built on its own using the <code>gaia</code> parameter. These parts can then be installed separately onto the device as explained next.</p> +<p>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 <code>./build.sh out/platform/$target/system.img</code>, where the <code>$target</code> parameter is the same as given in the Configuration step.</p> +<h3 id="Install">Install</h3> +<p>The install step will place the newly compiled code onto a device. This is run with the <code>flash.sh</code> script.</p> +<p>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 <code>./flash.sh gaia</code>.</p> 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 +--- +<div class="summary"> + <p>যদি আপনি ফায়ারফক্স ওএস এর ব্যবহারকারীদেরকে তাঁদের ডিভাইসে থাকা সংকেতলিপিসমূহ অতি সহজেই হালনাগাদ করতে দিতে চান তো, তাঁদের জন্যে আপনাকে একটি হালনাগাদ প্যাকেজ তৈরী করে দিতে হবে। এই প্রবন্ধটিতে বিভিন্ন ধরনের হালানাগাদ প্যাকেজের প্রাপ্তি এবং প্যাকেজ তৈরী, হালনাগাদসমূহ হোস্ট করা (এবং যে পদ্ধতিতে প্রাপ্ত হালনাগাদসমূহকে তালিকাভুক্ত করা হয়ে থাকে), এবং সেই হালনাগাদসমূহ প্রয়োগ করা এবং যাচাই করার বিষয়ে আলোচনা করা হয়েছে।</p> +</div> +<p>হালনাগাদসমূহ তৈরী এবং প্রয়োগ করা চার ধাপে বিভক্ত:</p> +<ol> + <li>পুরোন সংস্করন(গুলো) থেকে হালনাগাদকৃত প্যাকেজগুলো নিয়ে নির্মানশালাতে নতুন একটি সংস্করন নির্মান করা</li> + <li>ব্যবহারকারীর ডাউনলোডের জন্য উপযুক্ত হালনাগাদ প্যাকেজটি খুঁজে নেয়া</li> + <li>হালনাগাদ ডাউনলোড করা</li> + <li>যন্ত্রে উপস্থিত নথিগুলোতে হালনাগাদটি প্রয়োগ করা</li> +</ol> +<p>এই ধাপগুলোর প্রতিটিই নিম্নে আলোচিত হয়েছে।</p> +<h2 id="হালনাগাদের_ধরণগুলি"><span class="mw-headline" id="Types_of_updates">হালনাগাদের ধরণগুলি</span></h2> +<p>দুই ধরনের হালনাগাদ সম্পর্কে জানতে হবে: এফওটিএ (ফার্মওয়্যার ওভার-দ্য-এয়ার) এবং গেকো/গায়া (ওভার-দ্য-এয়ার)। আসুন দেখি এঁদের মধ্যে পার্থক্যগুলো কোনখানে।</p> +<h3 id="এফওটিএ_হালনাগাদসমূদ"><span class="mw-headline" id="FOTA_updates">এফওটিএ হালনাগাদসমূদ</span></h3> +<p><span class="mw-headline">আমারা পুরো ফায়ারফক্স ওএস সিস্টেমটাই হালনাগাদ করতে পারি <b>এফওটিএ হালনাগাদসমূহ</b> এর মাধ্যমে, 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.</span></p> +<p>Firefox OS does not depend on a particular FOTA client; the interface is abstracted through an API we call <a class="externallink" href="http://git.mozilla.org/?p=b2g/librecovery.git;a=blob;f=librecovery.h;h=a6e13374f9bffcf947a39d6f3348290d67113321;hb=HEAD" rel="nofollow" title="http://git.mozilla.org/?p=b2g/librecovery.git;a=blob;f=librecovery.h;h=a6e13374f9bffcf947a39d6f3348290d67113321;hb=HEAD">librecovery</a>. However, we recommend using the GOTA recovery client (see below for more details), and the discussion here assumes FOTA is being used.</p> +<p>FOTA update packages mainly consist of a file called <code>update.zip</code>. This package consists of</p> +<ul> + <li>A set of binary diffs and new files required to update the client to the newer software version</li> + <li>An "update script" that controls how the diffs and new files are loaded onto the client</li> + <li>An internal signature used to verify the update package</li> +</ul> +<p>This format and set of files are the same as those used in normal Android updates, except that Firefox OS additionally wraps the <code>update.zip</code> package in a <code>mar</code> wrapper (MAR stands for <strong>Mozilla ARchive</strong>). This <code>mar</code> wrapper allows an additional level of verification, which is explained below.</p> +<h3 id="GeckoGaia_OTA_updates"><span class="mw-headline" id="Gecko.2FGaia_OTA_updates">Gecko/Gaia OTA updates</span></h3> +<p><span class="mw-headline">Alteratively we can updat</span>e <em>just</em> t<span class="mw-headline">he Gecko and Gaia files on a Firefox OS device, through a mechanism we call <b>Gecko/Gaia OTA updates</b>. All of the Gecko and Gaia files — comprising the core Gecko runtime and the device's user interface — are in the <code>/system/b2g</code> directory on the device.</span> This is the only directory that OTA updates can make changes to.</p> +<p>Gecko/Gaia OTA updates use the same technology that's used to update the Firefox desktop web browser. Much like the FOTA <code>update.zip</code> 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.</p> +<p>The Gecko client verifies the integrity of <code>MARs</code> that it downloads, and <code>MARs</code> can be signed by multiple parties.</p> +<h3 id="Why_have_two_update_technologies"><span class="mw-headline" id="Why_have_two_update_technologies.3F">Why have two update technologies?</span></h3> +<p>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:</p> +<ul> + <li>Gecko/Gaia OTA updates can be applied "in the background", while Firefox OS continues to run normally. This provides a much better user experience because users don't need to reboot their phone and wait while an update is applied. Instead, the update is applied while the user continues to use the phone, and when the update is finished the user only needs to agree to restart the main <code>b2g</code> process. This takes a matter of seconds, instead of the minutes that are usually required to apply FOTA updates.</li> + <li>Gecko/Gaia OTA update packages can sometimes be smaller than FOTA update packages, though not always; they should never be larger. This means that users can sometimes have less data to download.</li> +</ul> +<p>Of course, if you need to update files outside Gecko/Gaia, you will have to go for the full FOTA package route.</p> +<p>Let's move on and examine the package building process.</p> +<h2 id="Building_update_packages"><span class="mw-headline" id="Building_updates_for_multiple_software_versions">Building update packages</span></h2> +<p>Building updates is the process of generating the files needed to update Firefox OS clients from <em>version X</em> of the software to a newer <em>version Y</em>. The update package that's needed to update the client depends on what files have changed between <em>version X</em> and <em>version Y</em>.</p> +<ul> + <li>If <b>only</b> files in <code>/system/b2g</code> have changed, we will generate a Gecko/Gaia OTA update</li> + <li>If any file in a location outside of <code>/system/b2g</code> changed, we will generate a FOTA update</li> +</ul> +<p>To generate an incremental update package (for both FOTA and Gecko/Gaia OTA updates), our tools require full builds of both <em>version X</em> and <em>version Y</em>. <strong>Full build</strong> means that the package includes all the files that are needed to Flash a client. When we produce a full build for <em>version X</em>, we don't know which future versions we will be updating to from version + <i> + X</i> + . 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 <em>version X </em>and all future versions.</p> +<p>At a high level, the process of building an update looks like this:</p> +<ol> + <li>With software <em>version X</em> + <ul> + <li>Generate a complete Gecko/Gaia OTA <code>MAR</code> for the contents of <code>/system/b2g</code>.</li> + <li>Generate a complete FOTA <code>update.zip</code> and target files zip for the device partitions.</li> + </ul> + </li> + <li>With software <em>version Y</em> + <ul> + <li>Generate a complete Gecko/Gaia OTA <code>MAR</code> for the contents of <code>/system/b2g</code>.</li> + <li>Generate a complete FOTA <code>update.zip</code> and target files zip for the device partitions.</li> + </ul> + </li> + <li>If only files in <code>/system/b2g</code> have changed, generate an incremental Gecko/Gaia OTA update <code>MAR</code> from + <i> + </i> + <em>version X</em> to <em>version Y</em>.</li> + <li>Otherwise, generate an incremental FOTA <code>update.zip</code> from + <i> + </i> + <em>version X </em>to <em>version Y</em>. Wrap the incremental FOTA <code>update.zip</code> in a <code>MAR</code> for delivery to the B2G client.</li> + <li>Sign the packages as required by delivery agreements.</li> +</ol> +<p>The subsections below describe how to use B2G's tools to implement each of these steps.</p> +<div class="note"> + <p><strong>Note</strong>: the steps below assume that you have already set up a b2g build environment at the location <code>$b2g</code>. The commands below reference the <code>$b2g/build.sh</code> helper script, but <code>make</code> can also be used.</p> +</div> +<h3 id="Generating_a_complete_GeckoGaia_OTA_update_MAR"><span class="mw-headline" id="Generating_a_complete_Gecko.2FGaia_OTA_update_MAR">Generating a complete Gecko/Gaia OTA update MAR</span></h3> +<p>Invoke the <code>gecko-update-full</code> target to generate a complete update <code>MAR</code> from the last successful <code>b2g</code> build. To place the MAR at <code>$b2g/objdir-gecko/dist/b2g-update/b2g-gecko-update.mar</code>, use the following commands:</p> +<pre class="brush: bash">$ cd $b2g +$ ./build.sh gecko-update-full +$ cp objdir-gecko/dist/b2g-update/b2g-gecko-update.mar <destination> +</pre> +<h3 id="Generating_a_complete_FOTA_update_zip_and_target_files_zip_2"><span class="mw-headline" id="Generating_a_complete_FOTA_update_zip_and_target_files_zip">Generating a complete FOTA update zip and target files zip</span></h3> +<p>The default target in the <code>b2g</code> build system will generate a FOTA <code>update.zip</code> / target files zip when the kernel binary has been copied to the appropriate location under <code>vendor/</code>. This enables boot image, recovery image, and update.zip generation.</p> +<ul> + <li>The complete FOTA <code>update.zip</code> is generated in the location <code>out/target/product/$DEVICE/$DEVICE-ota-$VARIANT.$USER.zip</code></li> + <li>The target files zip is generated to the location <code>out/target/product/$DEVICE/obj/PACKAGING/target_files_intermediates/$DEVICE-target_files-$VARIANT.$USER.zip</code></li> +</ul> +<p>The following commands will carry out this step:</p> +<pre class="brush: bash">$ cd $b2g +$ ./build.sh +$ cp out/target/product/$DEVICE/obj/PACKAGING/target_files_intermediates/$DEVICE-target_files-$VARIANT.$USER.zip <destination> +</pre> +<p>The variable values in the commands listed above should be filled in as follows:</p> +<table> + <thead> + <tr> + <th scope="col">Variable</th> + <th scope="col">Meaning</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>$DEVICE</code></td> + <td>Device name for the AOSP product</td> + </tr> + <tr> + <td><code>$VARIANT</code></td> + <td><code>eng</code>, <code>user</code>, or <code>userdebug</code></td> + </tr> + <tr> + <td><code>$USER</code></td> + <td>The build username</td> + </tr> + </tbody> +</table> +<h3 id="Generating_an_incremental_OTA_update_MAR_2"><span class="mw-headline" id="Generating_an_incremental_OTA_update_MAR">Generating an incremental OTA update MAR</span></h3> +<p>In this example, we're assuming that we're generating an update from software <em>version X</em> to <em>version Y</em>. The location of the full Gecko/Gaia OTA <code>MAR</code> built from software <em>version X</em> using the instructions above will be called <code>$MAR_X</code> below. This might be a path on a build server like <code>/home/build/b2g/versions/X/update.mar</code>. Similarly, the location of the full <code>MAR</code> built from <em>version Y</em> will be called <code>$MAR_Y</code>.</p> +<p>The tool <code>build-gecko-mar.py</code> will generate an incremental Gecko/Gaia OTA update MAR using <code>$MAR_X</code> and <code>$MAR_Y</code>. We'll call the destination of the generated file <code>$GENERATED_INCREMENTAL_MAR_X_Y</code>. Use the following commands for this step:</p> +<pre class="brush: bash">$ cd $b2g +$ ./tools/update-tools/build-gecko-mar.py --from $MAR_X --to $MAR_Y $GENERATED_INCREMENTAL_MAR_X_Y +</pre> +<h3 id="Generating_an_incremental_FOTA_update_zip_2"><span class="mw-headline" id="Generating_an_incremental_FOTA_update_zip">Generating an incremental FOTA update zip</span></h3> +<p>In this example, we're assuming that we're generating an update from software <em>version X</em> to <em>version Y</em>. The location of the full FOTA target zip built from software <em>version X </em>using the instructions above will be called <code>$TARGET_FILES_X</code> below. This might be a path on a build server like <code>/home/build/b2g/versions/X/target_files.zip</code>. Similarly, the location of the full FOTA target zip built from <em>version Y </em>will be called <code>$TARGET_FILES_Y</code>.</p> +<p>The tool <code>build/tools/releasetools/ota_from_target_files</code> will generate an incremental FOTA update.zip using <code>$TARGET_FILES_X</code> and <code>$TARGET_FILES_Y</code>. We'll call the destination of this intermediate file <code>$INTERMEDIATE_FOTA_UPDATE_FOTA_X_Y</code>.</p> +<p>After this <code>update.zip</code> is generated, the last step is to wrap it in a <code>MAR</code> for delivery to the B2G client. The tool <code>tools/update-tools/build-fota-mar.p</code> does this step. We'll call the destination of this generated file <code>$GENERATED_INCREMENTAL_FOTA_X_Y</code>. Use the following commands to complete this step:</p> +<pre class="brush: bash">$ 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 +</pre> +<p>The variable values in the commands listed above should be filled in as follows:</p> +<table> + <thead> + <tr> + <th scope="col">Variable</th> + <th scope="col">Meaning</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>$TARGET_FILES_X</code></td> + <td>The FOTA target files zip for <em>version X</em></td> + </tr> + <tr> + <td><code>$TARGET_FILES_Y</code></td> + <td>The FOTA target files zip for <em>version Y</em></td> + </tr> + <tr> + <td><code>$GENERATED_INCREMENTAL_FOTA_X_Y</code></td> + <td>The destination incremental update zip wrapped in a <code>MAR</code> for delivery to clients</td> + </tr> + <tr> + <td><code>$HOST_ARCH</code></td> + <td>The host and arch combo (i.e. <code>linux-x86</code> or <code>darwin-x86</code>)</td> + </tr> + <tr> + <td><code>$FOTA_SIGNING_KEY</code></td> + <td>Path to the prefix for a private key and public cert for signing the update zip. <code>$FOTA_SIGNING_ZIP.pk8</code> and <code>$FOTA_SIGNING_ZIP.x509.pem</code> should both exist on the file system</td> + </tr> + </tbody> +</table> +<h2 id="Hosting_updates_and_polling_for_updates_on_the_client_side"><span class="mw-headline" id="Hosting_updates_.28respectively.2C_polling_for_updates_on_the_client_side.29">Hosting updates and polling for updates on the client side</span></h2> +<p>Firefox OS clients poll for updates by fetching and parsing an <b>update manifest</b>: <code>update.xml</code>. 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.</p> +<p>In the examples below, we'll assume that updates are hosted on the server <code>updates.b2g.com</code>.</p> +<p>The URL polled by the client commonly contains the following parameters:</p> +<table> + <thead> + <tr> + <th scope="col">Parameter</th> + <th scope="col">Explanation</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>PRODUCT_MODEL</code></td> + <td>The name of the device model. This is the <code>ro.product.model</code> value in the B2G property database.</td> + </tr> + <tr> + <td><code>CHANNEL</code></td> + <td>The update "channel". This is useful for testing: servers can be configured to host, for example, "nightly", "beta", and "release" channels.</td> + </tr> + <tr> + <td><code>VERSION</code></td> + <td>The client's software version. For example, "18.0.2".</td> + </tr> + <tr> + <td><code>BUILD_ID</code></td> + <td>A unique ID such as a timestamp, configured for a particular build.</td> + </tr> + </tbody> +</table> +<p>However, there are more values that can be used to construct the queried update URL.</p> +<p>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</p> +<pre class="brush: xml">https://updates.b2g.com/release/unagi1/18.0/20121203123456/update.xml</pre> +<p>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 <strong>client would update to</strong>. An example manifest is:</p> +<pre class="brush: xml"><?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> +</pre> +<p>The fields in the manifest describe:</p> +<ul> + <li>metadata used to show a user interface on the client</li> + <li>metadata about the newly-available version</li> + <li>the location of the update package</li> + <li>metadata used to verify the download of the update package</li> +</ul> +<div class="note"> + <p><strong>Note</strong>: The client device or the user may wish to decline an update.</p> +</div> +<p>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.</p> +<p>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.</p> +<h2 id="Verifying_and_applying_updates_2"><span class="mw-headline" id="Verifying_and_applying_updates">Verifying and applying updates</span></h2> +<p>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.</p> +<p>The first step in applying an update is to verify the signatures embedded in the <code>MAR</code> 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.</p> +<p>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.</p> +<h3 id="Applying_GeckoGaia_OTA_updates"><span class="mw-headline" id="Applying_Gecko.2FGaia_OTA_updates">Applying Gecko/Gaia OTA updates</span></h3> +<p>The Firefox OS client applies these using the <code>updater</code> 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.</p> +<p>The specific details of the <code>updater</code> binary are beyond the scope of this document, but it works approximately like so:</p> +<ul> + <li>Making a copy of the <code>/system/b2g</code> files.</li> + <li>Applying binary patches, removing old files, and adding new ones as specified by the <code>MAR</code> file.</li> + <li>Restarting the main <code>b2g</code> process so that it uses the new files.</li> +</ul> +<p>After the <code>b2g</code> process finishes restarting, the user is running the new version of the B2G client software.</p> +<h3 id="Applying_FOTA_updates_2"><span class="mw-headline" id="Applying_FOTA_updates">Applying FOTA updates</span></h3> +<p>The FOTA client applies these. The Gecko client "hands off" the update to be applied by calling into the <a class="externallink" href="http://git.mozilla.org/?p=b2g/librecovery.git;a=blob;f=librecovery.h;h=a6e13374f9bffcf947a39d6f3348290d67113321;hb=HEAD" rel="nofollow" title="http://git.mozilla.org/?p=b2g/librecovery.git;a=blob;f=librecovery.h;h=a6e13374f9bffcf947a39d6f3348290d67113321;hb=HEAD">librecovery</a> API. What happens after this step is specific to each FOTA client.</p> +<p>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 <code>update.zip</code> to update files and partitions as needed. The recovery client may need to reboot multiple times in order to update all files.</p> +<p>After the final reboot, the device will be running the new version of the Firefox OS client software.</p> 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 +--- +<div class="summary"> + <p>যেহেতু ফায়ারফক্স ওএস এখনো ডেভেলপ হচ্ছে, এবং প্রকাশের দ্বারপ্রান্তে রয়েছে, তাই হালনাগাদ সংস্করণ পাওয়ার জন্য আপনার নিজেকেই বিল্ড করে ইন্সটল করে নিতে হবে। এই পাতায় তালিকাভুক্ত নিবন্ধগুলো আপনাকে ইমুলেটর বা কম্প্যাটিবল ডিভাইসে ফায়ারফক্স ওএস বিল্ড ও ইন্সটল করা অথবা ফায়ারফক্স ব্রাউজারে <a href="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Gaia/Introduction_to_Gaia">গায়া </a>ইউজার ইন্টারফেস ইন্সটল করা সম্পর্কে নির্দেশনা দেবে।</p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="ফায়ারফক্স_ওএস_সংগ্রহ_ও_বিল্ড_করা">ফায়ারফক্স ওএস সংগ্রহ ও বিল্ড করা</h2> + <dl> + <dt> + <a href="/bn-BD/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_build_overview">একনজরে ফায়ারফক্স ওএস বিল্ড</a></dt> + <dd> + ফায়ারফক্স ওএস বিল্ড এবং ইন্সটল হতে উল্লেখযোগ্য পরিমান সময়, শক্তিশালী কম্পিউটার ও ইন্টারনেট আবশ্যক। ব্যবহারকারীদের উক্ত কাজে সহায়তা করার জন্য এই পাতায় বিল্ড প্রক্রিয়ার লক্ষ্য এবং ধাপ বর্ণনা করা হয়েছে।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="Mozilla/Firefox_OS/Firefox OS build prerequisites">ফায়ারফক্স ওএস বিল্ড করার পূর্বশত</a></dt> + <dd> + প্রথমবারের মত ফায়ারফক্স ওএস বিল্ড ও ইন্সটল করার জন্য আপনার যা যা প্রয়োজন এবং যা যা করতে হবে।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="Mozilla/Firefox_OS/Preparing for your first B2G build">আপনার প্রথম ফায়ারফক্স ওএস বিল্ডের জন্য প্রস্তুত হওয়া</a></dt> + <dd> + ফায়ারফক্স ওএস বিল্ড করার পূর্বে অবশ্যই আপনাকে রেপোজিটরি ক্লোন করতে হবে এবং বিল্ডটি কনফিগার করতে হবে। এই নিবন্ধে সেই কাজগুলো বর্ণনা করা হয়েছে।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Building" title="Mozilla/Firefox_OS/Building">ফায়ারফক্স ওএস বিল্ড করা</a></dt> + <dd> + যেভাবে ফায়ারফক্স ওএস বিল্ড করবেন, তা এখানে বর্ণনা করা হয়েছে।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Porting" title="/bn-BD/docs/Mozilla/Firefox_OS/Porting">ফায়ারফক্স ওএস পোর্ট করা</a></dt> + <dd> + নতুন ডিভাইসে ফায়ারফক্স ওএস কিভাবে পোর্ট করবেন, তা এখানে বর্ণনা করা হয়েছে।</dd> + </dl> + <p><span class="alllinks"><a href="/bn-BD/docs/tag/B2G" title="tag/B2G">সবগুলো দেখুন...</a></span></p> + </td> + <td> + <h2 class="Community" id="ফায়ারফক্স_ওএস_এবংঅথবা_গায়া_ইন্সটল_করা">ফায়ারফক্স ওএস এবং/অথবা গায়া ইন্সটল করা</h2> + <dl> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Choosing_how_to_run_Gaia_or_B2G" title="Mozilla/Firefox_OS/Choosing how to run Gaia or B2G">যেভাবে গায়া অথবা ফায়ারফক্স ওএস চালাবেন</a></dt> + <dd> + আপনি ফায়ারফক্সের সাথে গায়া ব্যবহার করতে পারেন অথবা একটি মোবাইল ডিভাইসে কিংবা একটি ডেস্কটপ-ভিত্তিক সিম্যুলেটরে। এই গাইডটি আপনাকে সঠিক পদ্ধতি বেছে নিতে সাহায্য করবে।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Using_Gaia_in_Firefox" title="Mozilla/Firefox_OS/Using Gaia in Firefox">ফায়ারফক্সে গায়া ব্যবহার করা</a></dt> + <dd> + একটি ডেস্কটপ ফায়ারফক্স ব্রাউজারে গায়া ব্যবহার করা।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="Mozilla/Firefox_OS/Using the B2G desktop client">ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট ব্যবহার করা</a></dt> + <dd> + ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট চালানো ও ব্যবহার করার একটি গাইড; এটি একটি ডেস্কটপ অ্যাপ্লিকেশনের মধ্যে গায়ার পরিবেশ সিম্যুলেট করবে। ফায়ারফক্সে গায়া চালানোর থেকে এটি বেশি নিখুঁত; কিন্তু ইমুলেটরের মত এতটা নয়।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="Mozilla/Firefox_OS/Using the B2G emulators">ফায়ারফক্স ওএস ইমুলেটর ব্যবহার করা</a></dt> + <dd> + ফায়ারফক্স ওএস ইমুলেটর বিল্ড করার গাইড এবং কখন কোন ইমুলেটর ব্যবহার করতে হবে, তার নির্দেশিকা।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Installing_on_a_mobile_device" title="Mozilla/Firefox_OS/Installing on a mobile device">মোবাইল ডিভাইসে ফায়ারফক্স ওএস ইন্সটল করা</a></dt> + <dd> + একটি আসল মোবাইল ডিভাইসে কি করে ফায়ারফক্স ওএস ইন্সটল করবেন, এখানে তা বর্ণনা করা হয়েছে।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Dual_boot_of_B2G_and_Android_on_SGS2" title="Mozilla/Firefox_OS/Dual boot of B2G and Android on SGS2">স্যামসাং গ্যালাক্সি এস ২ তে ফায়ারফক্স ওএস এবং অ্যান্ড্রয়েড ডুয়েল বুট</a></dt> + <dd> + যেভাবে স্যামসাং গ্যালাক্সি এস ২ তে কিভাবে ফায়ারফক্স ওএস এবং অ্যান্ড্রয়েডের ডুয়েল বুট সেটআপ করবেন, এখানে সে সম্পর্কে বর্ণনা করা হয়েছে।</dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p> </p> 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 +--- +<p>{{obsolete_header()}}</p> + +<p></p><div class="warning">অনুচ্ছেদটি অবসুলেট।দেখুন <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko" title="/en-US/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko">Building and installing Boot to Gecko</a>, Firefox OS.</div> তৈরির জন্য সম্পুর্ন গাইড হিসেবে<p></p> + +<p>এটা মনে করা হয়ে থাকে আপনার ইতিমধ্যে <a href="/en/Mozilla/Boot_to_Gecko/Setting_Up_Boot_to_Gecko_Build_Environment" title="https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko/Setting_Up_Boot_to_Gecko_Build_Environment">setup your build environment and cloned the repositories</a> আছে।</p> + +<p>আপনার পরবর্তী স্টেপ <strong>হল build - and run - B2G on your emulator</strong>।রুট হিসেবে রান করবেন না।</p> + +<p><span style="font-family: inherit;"><span style='font-family: "Courier New",Courier,monospace;'>$ cd B2G</span></span><br> + <span style="font-family: inherit;"><span style='font-family: "Courier New",Courier,monospace;'>$ make sync</span></span></p> + +<p><a class="external" href="http://3.bp.blogspot.com/-5o6HoCR0xE0/Tydf8jj-UPI/AAAAAAAAAMk/EfcvWBaWv-w/s320/Make+Sync.tiff"><img alt="" class="default" src="http://3.bp.blogspot.com/-5o6HoCR0xE0/Tydf8jj-UPI/AAAAAAAAAMk/EfcvWBaWv-w/s320/Make+Sync.tiff"></a></p> + +<p>QEMU এর জন্য কনফারমেশন তৈরি করুনঃ<br> + <code>$ make config-qemu</code></p> + +<p>পরবর্তীতে,গঙ্কের ব্যাকেন্ড তৈরি করুন এবং ইহার সিস্টেমঃ<br> + <code>$ make gonk<br> + $ make</code><br> + <br> + নোটঃযদি if ./emu.sh -আপনার ইমুলেটর -প্রথমে রান না করে ,আপনাকে ইহা এক্সেকিউটেবল করতে হবেঃ<br> + <code>$ chmod +x emu.sh</code><br> + <br> + অবশেষে,ইমুলেটরটি রান করুনঃ<br> + <code>$ ./emu.sh</code></p> + +<p>নোটঃআপনার রেপসিটরস অথরা আপনার প্রথম তৈরি ক্লোনিং করার পরে ,আপনি তাদের "clean" করতে পারেন-বি.দ্র তাদের স্টেটের কাছে রাখুন যাতে আধুনিক পুল নতুন ক্লোনের মত হয়ে থাকে ।</p> + +<p>আপনার রেপ রুট থেকে এটি করুনঃ<br> + <span style='font-family: "Courier New",Courier,monospace;'>$ make sync; git clean -xfd; git submodule foreach "git clean -xfd"</span><br> + অন্যভাবে আপনি চেষ্টা করতে পারেন ;<br> + <span style='font-family: "Courier New",Courier,monospace;'><span style="font-family: inherit;"><span style='font-family: "Courier New",Courier,monospace;'>$ make mrproper</span></span></span></p> 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 +--- +<p>আপনার প্রয়োজনের উপর ভিত্তি করে, আপনি আপনার পছন্দমত উপায় খুজে নিতে পারেন যখন আপনারা ফায়ারফক্স ওএস অথবা গায়া <span class="short_text" id="result_box" lang="bn"><span class="hps">ইউজার ইন্টারফেজ</span></span> নিয়ে পরীক্ষা নিরীক্ষা করবেন । আপনি ইচ্ছা করলে নিচের উপায়গুলো থেকে যে কোন উপায় নির্বাচন করতে পারেন; প্রত্যেকটির অসুবিধা এবং সুবিধা আছে , এবং কিছুক্ষেত্রে এইগুলো বেশি সহজ অনান্যগুলোর তুলনায় । </p> +<h2 id="ডেস্কটপে_B2G_চালানোর_ক্ষেত্রে">ডেস্কটপে B2G চালানোর ক্ষেত্রে</h2> +<p>ফায়ারফক্স ওএস সিমুলেটর বানানো সম্ভব এবং গায়া চালানো যাবে । এই সফটওয়্যারটি যদিও ফায়ারফক্স ভিত্তিক তারপরও এটি ডিভাইসে ফায়ারফক্স ওএস ব্যবহারের অনুভূতি দেয় । বর্তমানে মজিলা ডেভলাপাদের জন্য প্রদান করতেছে <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking">nightly builds of this application</a> । যদি আপনি ফায়ারফক্স কোড-বেস অথবা সি++ প্রোজেক্টস সম্পর্কে ধারনা থাকে তাহলে আপনি নিজেই অ্যাপ্লিকেশন তৈরি করতে পারবেন ।</p> +<h3 id="সুবিধা">সুবিধা</h3> +<ul> + <li>সিমুলেটর মোবাইল এর স্ক্রিন এর মত ভিউ পোর্ট তৈরি করে</li> + <li>বেশিরভাগ ক্ষেত্রে এটির মাধ্যমে সত্যিকারের মোবাইল ডেভাইসের অভিগতা পেয়ে থাকবেন </li> + <li>আরও (কিন্তু সব নয়) APIs ডিভাইস পাওয়া যায় ।</li> +</ul> +<h3 id="অসুবিধা">অসুবিধা</h3> +<ul> + <li>আপনার আসলে একটি সি/সি++ তৈরি সিস্টেম থাকতে হবে ।</li> + <li> আপনার নিজেকেই তৈরি করতে হবে Gecko এবং সিমুলেটরটি ।</li> + <li>ফায়ারফক্স ডেভলাপার সরঞ্জামগুল পাওয়া যায় না ।</li> +</ul> +<h3 id="কেন_B2G_সিমুলেটর_চালাবো"> কেন B2G সিমুলেটর চালাবো</h3> +<p>এটি মাঝপথে পরীক্ষা করার জন্য এবং উন্নয়ন এর ভাল উপায় । এটি একটি ভাল পদ্ধতি আপনার অ্যাপস অথবা কোড একটি ফ্ল্যাশ সারা ফোন এ কিভাবে চলে তা অনুভব করার যখনই কোন কিছু পরীক্ষা করা হবে ।</p> +<div class="note"> + <strong>মন্তব্য :</strong> কোন আপ্লিকেশন বাজারে ছাড়ার পূর্বে অবশ্যই সত্যিকারের যন্ত্রে পরীক্ষা করতে চাবেন !</div> +<h3 class="note" id="বিভিন্ন_ধরনের_সিমুলেটর">বিভিন্ন ধরনের সিমুলেটর</h3> +<p>বিভিন্ন ধরনের ফায়ারফক্স ওএস সিমুলেটর পাওয়া যায় :</p> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_Simulator" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_Simulator">Firefox OS Simulator add-on</a></dt> + <dd> + এই সংযোজিত অংশটি প্রাথমিক পর্যায়ে আপনার অ্যাপসটি ফায়ারফক্স ওএস এ চলে কিনা তা পরীক্ষা করার জন্য প্রাথমিক পর্যায়ে এই সংযোজিত অংশটি ব্যাবহার করা হয় এবং বেশিরভাগ ক্ষেত্রে এটি আপনার সমস্যার সমাধানও খুজে বের করে । এটির ডেভলাপার টুলস সমর্থন করে এবং এটি পরিবেশের সাথে মিল রেখে অ্যাপসগুল পরীক্ষা করে ।</dd> + <dt> + ডেভলাপার ডেস্কটপ বিল্ডস</dt> + <dd> + এইসব সিমুলেটর বিল্ডস আসলে স্ট্যান্ড-এলোন অ্যাপলিকেশন যার প্রাথমিক উদ্দেশ্য হল কোর ফায়ারফক্স ওএস ডেভলাপারদেরকে টেকনিক্যাল ফিচারসগুল সনাক্ত করতে সাহায্য করা ।</dd> + <dt> + স্থানীয়করন ডেস্কটপ বিল্ডস</dt> + <dd> + স্থানীয়করন বিল্ডস প্রাথমিকভাবে সাহায্য করে স্থানীয়করন দলকে কাজ করতে এবং ফায়ারফক্স ওএস ও ফায়ারফক্স ওএস অ্যাপস এর স্থানীয়করনগুল পরীক্ষা করাতে ।</dd> +</dl> +<h2 id="B2G_কে_মোবাইল_ডিভাইসে_চালানোর_ক্ষেত্রে"> B2G কে মোবাইল ডিভাইসে চালানোর ক্ষেত্রে</h2> +<p>আপনার B2G অথবা গায়া ডেভলাপমেন্ট কাজ অথবা আপনার ওয়েব অ্যাপস পরীক্ষা করার সবচেয়ে ভাল উপায় হল মোবাইলে ডিভাইসে ফায়ারফক্স ওএস তৈরি করা এবং তা ইনস্টল করা । এটিও একটি অন্যতম ঝামেলাদায়ক পদ্ধতি ।</p> +<h3 id="সুবিধা_2">সুবিধা</h3> +<ul> + <li>আপনি সম্পূর্ণ মোবাইল ডিভাইসের অনুভব পাবেন ।</li> + <li>সকল ডিভাইসের APIs পাওয়া যায় ।</li> + <li>আপনার কোড এর কর্মক্ষমতা আপনি বাস্তব ডিভাইসে দেখতে পারবেন ।</li> +</ul> +<h3 id="অসুবিধা_2">অসুবিধা</h3> +<ul> + <li>আপনার আসলে একটি সি/সি++ তৈরি সিস্টেম থাকতে হবে ।</li> + <li> আপনার নিজেকেই তৈরি করতে হবে Gecko এবং সিমুলেটরটি ।</li> + <li>আপনার এমন একটি মোবাইল ডিভাইসে লাগবে যেটাতে B2G অপারেটিং সিস্টেম ইনস্টল করা যাবে ।</li> + <li>আপনার ডিভাইসে বর্তমানে যে অপারেটিং সিস্টেম আছে তা মুছে দিয়ে, ডিভাইসটিতে B2G ফ্ল্যাশ করতে হবে ।</li> +</ul> +<h3 id="কেন_B2G_মোবাইল_ডিভাইসে_চালাবো"> কেন B2G মোবাইল ডিভাইসে চালাবো</h3> +<p>অবশ্যই এটিই সবচেয়ে সঠিক পদ্ধতি আপনার কোড অথবা ওয়েব প্রোজেক্টকে পরীক্ষা করার জন্যে যেটি B2G অথবা গায়াতে তৈরি । বাস্তবে মোবাইলে আপনার প্রোজেক্টটি দেখতে কেমন হবে এবং কেমন চলবে তা নিশ্চিত করে এবং সকল ডিভাইসে APIs সঠিকভাবে চালায় । আর আপনার উচিত সব সময় বাস্তব ডিভাইসে আপনার কোডটি পরীক্ষা করে নেয়া বাজারে ছাড়ার পূর্বে এবং আপনি যদি তা করতে অসফল হন তাহলে আপনি এমন কোন সমস্যায় পরতে পারেন যার অনুমান করাও যায় না ।</p> 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 +--- +<div class="summary"> + <p>আপনার B2G সোর্সের মধ্যে <code>.userconfig</code> ফাইলে কিছু bash কোড যুক্ত করে আপনি বিল্ড প্রক্রিয়ার নির্দিষ্ট কিছু বিষয় কাস্টোমাইজ করতে পারেন। কিভাবে আপনি এই পরিবর্তন করবেন এবং এই পরিবর্তনের ফলে কি কি অর্জন করবেন, সে সম্পর্কে এই নিবন্ধটিতে বিস্তারিত আলোচনা করা হয়েছে।</p> +</div> +<p><code>.userconfig</code> ফাইল সোর্স কোড কন্ট্রোলের মধ্যে পরীক্ষা করা হয়না। তাই যখন আপনি আপনার সোর্স ট্রি আপডেট করবেন, তখন এটা ওভার রাইট হবেনা। এটা আপনার B2G ট্রি এর প্রধান ফোল্ডারের মধ্যে তৈরি করতে হবে; অর্থাৎ যে ফোল্ডারের মধ্যে <code>flash.sh</code>, <code>build.sh</code>, ইত্যাদি ফাইল রয়েছে। এটা আপনার কনফিগ এবং বিল্ডের কাজ করার আগে যোগ করতে হবে।</p> +<p>যদি <code>.userconfig</code> ফাইল থাকে, তবে তা <code>load-config.sh</code> স্ক্রিপ্টের মাধ্যমে লোড হয়। আর এই load-config.sh এর উৎস হচ্ছে এই স্ক্রিপ্ট সমূহঃ <code>flash.sh</code>, <code>build.sh</code> (<code>setup.sh</code> এর মাধ্যমে), <code>run-gdb.sh</code>, এবং <code>run-emulator.sh</code>। আপনার বিল্ডের জন্য গেকো কোথায় রয়েছে, তা নির্ধারণের জন্য <code>run-<em>*</em>.sh</code> স্ক্রিপ্ট সমূহ এটাকে ব্যবহার করে।</p> +<div class="warning"> + <p><strong>গুরুত্বপূর্ণঃ</strong> আপনার .userconfig ফাইল অবশ্যই আপনার হোম ফোল্ডারে না, বরং B2G সোর্সের প্রধান ফোল্ডারের মধ্যে থাকতে হবে!</p> +</div> +<h2 id="গেকো_সোর্স_ট্রি_পরিবর্তন_করা">গেকো সোর্স ট্রি পরিবর্তন করা</h2> +<p>ডিফল্ট ভাবে, বিল্ড গেকোর ট্রি ব্যবহার করে, যেটা গিটহাবের একটি ট্রি থেকে ক্লোন করা। তবে কেউ কেউ <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Source_Code/Mercurial#mozilla-inbound_%28used_for_landing_your_patches%29" title="https://developer.mozilla.org/en-US/docs/Developer_Guide/Source_Code/Mercurial#mozilla-inbound_%28used_for_landing_your_patches%29">mozilla-inbound</a>, বা <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Source_Code/Mercurial#mozilla-central_%28main_development_tree%29" title="https://developer.mozilla.org/en-US/docs/Developer_Guide/Source_Code/Mercurial#mozilla-central_%28main_development_tree%29">mozilla-central</a> ব্যবহার করতে পছন্দ করে। এটা করার জন্য আপনার পছন্দ মত জায়গায় ক্লোন করুন এবং আপনার <code>.userconfig</code> ফাইলে একটি লাইন যুক্ত করুন, যেটা <code>GECKO_PATH</code> নির্দিষ্ট করে। যেমনঃ</p> +<pre>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}" +</pre> +<div class="note"> + <p><strong>লক্ষ্য করুনঃ</strong> যদি আপনি ম্যাক ওএস এক্স এ একটি কাস্টম গেকোর বিপরীতে বিল্ডের কাজ করেন, তাহলে <code>mozilla-central</code> ফোল্ডারটি অবশ্যই একটি কেস সেনসিটিভ ফাইল সিস্টেমে থাকতে হবে; নতুবা <code>GECKO_PATH</code> ইগনোর করা হবে। বর্তমান ফাইল সিস্টেমটি কেস সেনসিটিভ কি না, তা পরীক্ষা করার জন্য একটি টার্মিনাল উইন্ডোতে নিচের কমান্ড টাইপ করতে পারেনঃ</p> + <pre>echo -n This file system is case->tmp; echo -n in>>TMP; echo sensitive>>tmp; cat tmp</pre> + <p>উপরের মত এভাবে <code>B2G_DIR</code> পাওয়ার কারনে কোন প্রকার হার্ড কোডেড পাথ ছাড়াই আপনার <code>.userconfig</code> কে কাজ করার সুবিধা প্রদান করে।</p> +</div> +<h2 id="গায়া_সেটিংস_পরিবর্তন_করা">গায়া সেটিংস পরিবর্তন করা</h2> +<p>মাঝে মাঝে আপনার গায়ার সেটিংস পরিবর্তন করার ইচ্ছা হতে পারে। যেমনঃ ব্যবহারকারীর বিল্ডে এডিবি সক্ষমতা প্রদান। আপনি যখন <code>build/settings.py</code> কল করেন, তখন গায়া Makefile <code>--override build/custom-settings.json</code> কমান্ড পাস করে; যাতে আমরা কিছু ব্যাশ লিখতে পারি যেটা, <code>custom-settings.json</code> ফাইলের মধ্যে<code>{"devtools.debugger.remote-enabled": true}</code> লিখবে। আমরা প্রয়োজন না হলে <code>custom-settings.json</code> এ পরিবর্তন করা এড়িয়ে চলবো। মানে আমরা লিখবো <code>custom-settings.json.new</code> এর মধ্যে এবং কন্টেন্ট গুলো <code>custom-settings.json</code> থেকে আলাদা হয়, তবে আমরা এটাকে রিপ্লেস করে দেব।</p> +<pre>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 +</pre> +<p>একটি <code>build/config/custom-prefs.js</code> ফাইল কনফিগার করার আরেকটি সহজ পদ্ধতি হচ্ছে গায়া ওয়ার্কিং ডিরেকটোরি অর্থাৎ <code>gaia/build/config/custom-prefs.js</code> যদি আপনি B2G ডিরেকটোরিতে থাকেন। <a href="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Gaia/Build_System_Primer#Customizing_the_preferences">গায়া বিল্ড সিস্টেম প্রাইমার, প্রেফারেন্স কাস্টোমাইজ করা</a> দেখুন।</p> +<div class="note"> + <p><strong><strong>লক্ষ্য করুনঃ</strong></strong> বর্তমান বিল্ডটি এখনো এতটা চৌকস নয় যে <code>GAIA_PATH</code> এর উপর ভিত্তি করে বিভিন্ন ডিরেক্টরি খুঁজে দেখবে। <code>GECKO_PATH</code> behaves যেভাবে আচরন করে, এটা তার থেকে আলাদা। যদি আপনি আলাদা একটি গায়া ক্লোন ব্যবহার করতে চান, তাহলে আপনি সেই ডিরেক্টরি থেকে <a href="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Gaia/Build_System_Primer">ম্যানুয়ালি make চালাতে</a> পারেন।</p> +</div> +<h2 id="ডিবাগ_বিল্ড_তৈরি_করা">ডিবাগ বিল্ড তৈরি করা</h2> +<p>ডিবাগ বিল্ড তৈরি করার জন্য নিচের লাইনটি আপনার <code>.userconfig</code> ফাইলে লিখুনঃ</p> +<pre>export B2G_DEBUG=1</pre> +<h2 id="বিল্ড_প্রোফাইল_করা">বিল্ড প্রোফাইল করা</h2> +<p>প্রোফাইলিং চালু করার জন্য (বিল্ট-ইন (SPS) প্লাটফর্ম প্রোফাইলারের সাথে সর্বোত্তম ফলাফলের জন্য) নিচের লাইন সমূহ আপনার <code>.userconfig</code> ফাইলে লিখুন এবং পুনরায় বিল্ড করুনঃ</p> +<pre>export MOZ_PROFILING=1</pre> +<div class="warning"> + <p>B2G_NOOPT এর সাথে পেয়ার করবেন না। এর ফলাফল অর্থহীন হবে!</p> +</div> +<h2 id="অপটিমাইজার_নিষ্ক্রিয়_করা">অপটিমাইজার নিষ্ক্রিয় করা</h2> +<p>অপটিমাইজার নিষ্ক্রিয় করার জন্য (যেটা এমন বিল্ড তৈরি করবে, যা নিরীক্ষণ তুলনামূলক সহজ) আপনার<code> .userconfig</code> ফাইলে নিম্নোক্ত লাইন লিখুন এবং পুনরায় বিল্ড করুনঃ</p> +<pre>export B2G_NOOPT=1</pre> +<h2 id="প্রথমবারের_জন্য_ইউজার_এক্সপেরিয়েন্স_নিষ্ক্রিয়_করা">প্রথমবারের জন্য ইউজার এক্সপেরিয়েন্স নিষ্ক্রিয় করা</h2> +<p>যদি আপনি অনেক বেশি বিল্ড এবং রিফ্ল্যাশ করেন, তাহলে প্রত্যেকবার "ফাস্ট টাইম ইউজার এক্সপেরিয়েন্স" এর মধ্যে দিয়ে যাওয়াটা বিরক্তিকর লাগতে পারে। নিচের লাইনটি আপনার .userconfig এ যোগ করে আপনি এটা বন্ধ করতে পারেনঃ</p> +<pre>export NOFTU=1</pre> +<h2 id="গায়া_ডেভেলপার_মোড_চালু_করা">গায়া ডেভেলপার মোড চালু করা</h2> +<p>যদি আপনি গায়া অ্যাপ ডেভেলপ বা হ্যাক করার পরিকল্পনা করে থাকেন, তাহলে ডিভাইসের সাথে কাজ করা আরও সহজ করার জন্য আপনি স্বয়ংক্রিয়ভাবে প্রয়োজনীয় বিভিন্ন সেটিংস ও প্রেফারেন্স নির্দিষ্ট করতে পারবেন। যেমনঃ এটা স্বয়ংক্রিয়ভাবে রিমোট ডিবাগিং ফিচার সক্রিয় করবে এবং যখন একটি ইনকামিং ডিবাগিং কানেকশন চালু হবে তখন কোন প্রম্পট দেখাবে না।</p> +<p>আপনার দরকার শুধু নিচের এই লাইনটুকু আপনার .userconfig এ যোগ করাঃ</p> +<pre>export DEVICE_DEBUG=1</pre> +<h2 id="ভালগ্রিন্ড_সক্রিয়_করা">ভালগ্রিন্ড সক্রিয় করা</h2> +<p>আপনার অ্যাপলিকেশনের সাথে মেমোরি এবং থ্রেডিং সংক্রান্ত সমস্যা নিরীক্ষণের জন্য ভাল্গ্রিন্ড উপকারি। ভাল্গ্রিন্ড চালানো সংক্রান্ত আরও তথ্যের জন্য <a href="/en-US/Firefox_OS/Debugging/Debugging_B2G_using_valgrind">Debugging B2G using valgrind [en-US]</a>দেখুন।</p> +<p>B2G এর অধীনে ভাল্গ্রিন্ড ব্যবহার করতে আপনার .userconfig এ নিচের লাইন যুক্ত করুনঃ</p> +<pre>export B2G_VALGRIND=1</pre> +<h2 id="ডিফল্ট_হোস্ট_কম্পাইলার_পরিবর্তন_করা">ডিফল্ট হোস্ট কম্পাইলার পরিবর্তন করা</h2> +<p>সামসময়িক কিছু ডিস্ট্রিবিউশন, যেগুলো GCC 4.7 ডিফল্ট কম্পাইলার হিসেবে ব্যবহার করে, বিল্ড করার জন্য সেখানে আপনাকে পুরাতন একটি ভার্শন বলে দিতে হবে। এমনটা করার জন্য আপনার <code>.userconfig</code> এ যথাক্রমে বিকল্প C এবং C++ কম্পাইলার নির্দিষ্ট করতে <code>CC</code> এবং <code>CXX</code> ভ্যারিয়েবল দুইটি যোগ করুন। যেমনঃ উবুন্টু ১২.১০ এ GCC 4.6 কম্পাইলার সেট করার জন্য ব্যবহার করতে হবেঃ</p> +<pre>export CC=gcc-4.6 +export CXX=g++-4.6 +</pre> +<p>বা যদি এমন হয় যে, আপনি এমন একটি সংস্করণ ব্যবহার করছেন, যেটার মধ্যে এক্সিকিউটেবল ফাইল সমুহের সম্পূর্ণ পাথ দেয়া আছেঃ</p> +<pre>export CC=/opt/gcc-4.6.4/bin/gcc +export CXX=/opt/gcc-4.6.4/bin/g++ +</pre> +<h2 id="একটি_কাস্টম_গেকো_অবজেক্ট_ট্রি_লোকেশন_নির্দিষ্ট_করা">একটি কাস্টম গেকো অবজেক্ট ট্রি লোকেশন নির্দিষ্ট করা</h2> +<p>একবার আপনি যখন গেকো সোর্স ট্রি সমূহ এবং অন্যান্য বিল্ড অপশন পরিবর্তন করা শুরু করে দেবেন, আপনি এটাও পরিবর্তন করতে চাইতে পারেন, যে আপনার অবজেক্ট গুলো কোথায় সংরক্ষন করা হবে (যেমনঃ আপনার সকল ডিবাগ অবজেক্ট আপনার নন-ডিবাগ অবজেক্ট থেকে আলাদা ট্রি-তে যাবে)। তাহলে আপনার এমনটি করা লাগতে পারেঃ</p> +<pre>export GECKO_OBJDIR=${GECKO_PATH}/objdir-gonk-debug +</pre> +<p><code>${GECKO_PATH}</code> ব্যবহার করাটা গেকো ট্রি গুলোর মধ্যে সুইচ করা সহজ করেছে (যেমনঃ central, beta, aurora ইত্যাদি)।</p> +<h2 id="ডিবাগ_এবং_নন-ডিবাগ_উভয়_অবজেক্ট_রাখা">ডিবাগ এবং নন-ডিবাগ উভয় অবজেক্ট রাখা</h2> +<p>প্রত্যেকবার পুনরায় বিল্ড করা ছাড়াই নিরীক্ষণ এবং রিলিজ বিল্ড সমূহের মধ্যে সামনে পেছনে সুইচ করার জন্য আপনি আপনার <code>.userconfig</code> ফাইল ব্যবহার করতে পারেন!</p> +<dl> +</dl> +<pre class="brush:bash;">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}"</pre> +<p><code>echo</code> কমান্ড সমূহ আপনাকে বর্তমান সেটিংস মনে করতে সাহায্য করে। ডিবাগ এবং রিলিজ বিল্ডের মধ্যে সুইচ করার জন্য ৭ নম্বর লাইনে <code>B2G_DEBUG</code> এর মান পরিবর্তন করে দিন।</p> 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 +--- +<div class="summary"> +<p><span class="seoSummary"> কিভাবে একটি ফায়ারফক্স ওএস ডিভাইস ইউএসবি দ্বারা আপনার ডেস্কটপ-এ সংযুক্ত করা যায় তা নিয়ে এই গাইডে আলোচনা করা হয়েছে।</span></p> +</div> + +<div class="note"> +<p><strong>নোট: </strong>যদি আপনি শুধু একটি ফায়ারফক্স ওএস ডিভাইসে অ্যাপ্লিকেশনের ডিবাগিং করতে চান, এবং যদি ফায়ারফক্স ১.২+ ব্যবহার করেন, তাহলে অ্যাপ ম্যানেজার ব্যবহার করে দেখতে পারেন। বিস্তারিত জানতে<a href="/en-US/Firefox_OS/Using_the_App_Manager"> অ্যাপ ম্যানেজারের ব্যবহার পড়ুন</a>। যদি আপনার ফায়ারফক্স ওএস ভার্সন ১.২ এর চেয়ে কম হয়, তাহলে মানসম্মত রিমোট ডিবাগিং সম্পর্কে শিখতে <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up">ফায়ারফক্স ডেভেলপার টুলস ব্যবহার করে ফায়ারফক্স ওএস-এ ডিবাগিং</a> পড়ুন।</p> +</div> + +<h2 id="ডিভাইস_প্রস্তুত_করা">ডিভাইস প্রস্তুত করা</h2> + +<p>আপনার ফায়ারফক্স ওএস ডিভাইসে (<a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings#The_Developer_panel">লেআউটটি দেখুন</a>):</p> + +<ol> + <li>সেটিংস অ্যাপটি খুলুন, তারপর <code>Device Information</code> > <code>More Information</code> > <code>Developer</code>.</li> + <li>ডেভেলপার তালিকাতে, "রিমোট ডিবাগিং" চেক চিহ্ন দিন।</li> +</ol> + +<h2 id="ডেক্সটপ_প্রস্তুত_করা">ডেক্সটপ প্রস্তুত করা</h2> + +<p>ডেক্সটপে একটি ডিভাইস সংযুক্ত করার জন্য, আপনার <a class="external" href="http://developer.android.com/tools/help/adb.html" title="http://developer.android.com/tools/help/adb.html">অ্যানড্রয়েড ডিবাগ ব্রিজ (এডিবি)</a> টি ইন্সটল থাকা লাগবে। লক্ষ্য করুন যে <a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="/en-US/docs/Tools/Firefox_OS_Simulator">ফায়ারফক্স ওএস সিমুলেটর</a> এড-ওন এর সাথেই adb দেওয়া আছে।</p> + +<p>আপনার ডেক্সটপ প্রস্তুত করার নির্দেশনাবলী আপনার অপারেটিং সিস্টেমের ওপর নির্ভরশীল এবং অ্যানড্রয়েড ডেভেলপার সা্ইট এর <a class="external" href="https://developer.android.com/tools/device.html" title="https://developer.android.com/tools/device.html">"</a><a class="external external-icon" href="https://developer.android.com/tools/device.html" title="https://developer.android.com/tools/device.html">Setting up a Device for Development</a><a class="external" href="https://developer.android.com/tools/device.html" title="https://developer.android.com/tools/device.html">"</a> অংশের ৩নং পয়েন্টে বিস্তারিত রয়েছে। আমরা নিম্নে কিছু অতিরিক্ত নির্দেশনাবলী দিয়েছি।</p> + +<h3 id="ম্যাক_ওএস_এক্স-_এর_জন্য_বিশেষ_নির্দেশনাবলী">ম্যাক ওএস এক্স- এর জন্য বিশেষ নির্দেশনাবলী</h3> + +<p>যদি আপনি ম্যাক ওএস এক্স ব্যবহার করে থাকেন, তাহলে আপনি <code>adt-bundle-mac-x86_64-20130522</code> নামের একটি প্যাকেজ ডাউনলোড করেছেন। উক্ত ফোল্ডারটি অ্যাপ্লিকেশনস ফোল্ডারের মধ্যে রাখুন, ফলে আপনি পাবেন <code>/Applications/adt-bundle-mac-x86_64-20130522/</code> যার ভেতর দুইটি ফোল্ডার আছে: <code>eclipse</code> এবং <code>sdk</code>. তারপর আপনি আপনার <code>~/.bashrc</code> ফাইলটি সম্পাদনা করে নিচের লাইন যোগ করে দিনঃ</p> + +<pre>export PATH="/Applications/adt-bundle-mac-x86_64-20130522/sdk/platform-tools:$PATH"</pre> + +<p>(আপনার শেল পরের বার শুরু সময় প্রস্তুত থাকবে)। এখন আপনি শেল এর কমান্ড-লাইন ইন্টারফেইসে টাইপ করতে পারবেন:</p> + +<pre>adb devices +</pre> + +<p>এর ফলে আপনার কম্পিউটারের সাথে সংযুক্ত ডিভাইসগুলোর নাম দেখতে পারবেনঃ</p> + +<pre>List of devices attached +AA:BB:A5:B5:AA:BB device</pre> + +<h3 id="লিনাক্স_এর_জন্য_বিশেষ_নির্দেশনাবলী">লিনাক্স এর জন্য বিশেষ নির্দেশনাবলী</h3> + +<p>যদি আপনি লিনাক্স ব্যবহার করে থাকেন, তাহলে ফায়ারফক্স ওএস গিক্সফোন ডিভাইসগুলো ভেন্ডর আইডি হল <code>05c6</code>, ফলে আপনার <code>/etc/udev/rules.d/51-android.rules</code> ফাইলে নিচের মত লাইন যুক্ত করুন:</p> + +<pre class="bash" style="font-family: monospace;"><span style="color: #007800;">SUBSYSTEM</span>=="usb", ATTR<strong style="color: #7a0874; font-weight: bold;">{</strong>idVendor<strong style="color: #7a0874; font-weight: bold;">}</strong>=="05c6", <span style="color: #007800;">MODE</span>="0666", <span style="color: #007800;">GROUP</span>="plugdev"</pre> + +<h3 id="উইন্ডোজ_এর_জন্য_বিশেষ_নির্দেশনাবলী">উইন্ডোজ এর জন্য বিশেষ নির্দেশনাবলী</h3> + +<p><a href="http://www.geeksphone.com/downloads/fos/fos_usb_driver.zip" title="http://www.geeksphone.com/downloads/fos/fos_usb_driver.zip">গিক্সফোন ওয়েবসাইট</a> থেকে আপনি উইন্ডোজ ড্রাইভার ডাউনলোড করতে পারেন গিক্সফোনের জন্য।</p> + +<p>ডিফল্ট উইন্ডোজ ৮ আপনাকে অস্বাক্ষরিত ড্রাইভার ইন্সটল করতে দিবে না। <a href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"কিভাবে অস্বাক্ষরিত ড্রাইভার উইন্ডাজ ৮- এ ইন্সটল করবেন"</a> এই টিউটোরিয়ালটি দেখুন।</p> + +<h2 id="ঠিকভাবে_প্রস্তুত_করেছেন_কিনা_যাচাই_করুন">ঠিকভাবে প্রস্তুত করেছেন কিনা যাচাই করুন</h2> + +<p>আপনি এসব নির্দেশনাবলী অনুসরণ করে থাকলে, ডেক্সটপ এর সাথে ডিভাইসটি ইউএসবি ক্যাবলের মাধ্যমে যুক্ত করুন, কমান্ড প্রম্পট খুলুন এবং টাইপ করুন "<code>adb devices</code>" (নিশ্চিত করতে যে এডিবি আপনার path এ রয়েছে)। আপনি দেখতে পাবেন আপনার ফায়ারফক্স ওএস ডিভাইস ওপরের কমান্ডের আউটপুটে তালিকাভুক্ত হয়েছে।</p> 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 +--- +<div class="summary"> + <p><strong><code>gdb</code></strong> 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 <strong><code>b2g-ps</code></strong>, 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.</p> +</div> +<h2 id="Starting_the_debugger_in_single-process_mode">Starting the debugger in single-process mode</h2> +<div class="note"> + <p><strong>Note:</strong> Before running the debugger, you may want to set up a <code>.userconfig</code> file to customize things. See <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file" title="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a> for details.</p> +</div> +<p>To restart Firefox OS and run it under gdb control, simply use the <code>run-gdb.sh</code> script:</p> +<pre>./run-gdb.sh +</pre> +<div class="note"> + <p><strong>Note:</strong> 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.</p> +</div> +<p>If Firefox OS is already running and you want to attach to it without restarting it, you can do so like this:</p> +<pre>./run-gdb.sh attach +</pre> +<h2 id="Debugging_out-of-process_tasks">Debugging out-of-process tasks</h2> +<p>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 <code>b2g-ps</code> command to find out the PID of the process that you need to debug:</p> +<pre>$ 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 +</pre> +<p>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:</p> +<pre>$ ./run-gdb attach 4308</pre> +<p>Sometimes, it is useful to be notified immediately of any child process creation. This can be achieved by starting <code>run-gdb.sh</code> with the <code>MOZ_DEBUG_CHILD_PROCESS</code> environment variable:</p> +<pre>MOZ_DEBUG_CHILD_PROCESS=1 ./run-gdb.sh</pre> +<p>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:</p> +<pre>$ ./run-gdb attach 4308</pre> +<p>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.</p> +<h2 id="Support">Support</h2> +<h3 id="What_level_of_functionality_to_expect">What level of functionality to expect</h3> +<p>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:</p> +<ul> + <li>Symbols for all libraries (except perhaps certain drivers on certain Android phones)</li> + <li>Backtraces with full debug info (except for optimized-away argument values)</li> + <li>Breakpoints: you should be able to break on a symbol, or on a file:line, or on an address. All should work.</li> + <li>Single-stepping ('s' and 'n' should both work)</li> +</ul> +<p>The following debugging features are <strong>not</strong> supported. Don't try to use them.</p> +<ul> + <li>Watchpoints.</li> +</ul> +<h3 id="Troubleshooting">Troubleshooting</h3> +<p>Here are a few things to try first whenever GDB is not working as described above.</p> +<h4 id="Ensure_that_your_B2G_clone_is_up-to-date">Ensure that your B2G clone is up-to-date</h4> +<p>Always keep in mind to that to update your B2G clone you must run these <strong>two</strong> commands:</p> +<pre>git pull +./repo sync</pre> +<p>Forgetting the <code>git pull</code> there is a typical reason why you'd end up with an old <code>run-gdb.sh</code> and not benefit from recent improvements.</p> +<h4 id="Ensure_that_you_are_attaching_to_the_right_process">Ensure that you are attaching to the right process</h4> +<p>Attaching to the wrong process (e.g. main B2G process versus Browser process) would explain why your breakpoints don't get hit.</p> +<h4 id="Ensure_that_symbols_are_correctly_read">Ensure that symbols are correctly read</h4> +<ol> + <li>In <code>gdb</code>, use <code>info shared</code> to check that symbols are correctly read: + <pre>(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 +...</pre> + </li> + <li>The <code>Syms Read</code> column should say <code>Yes</code> everywhere. Maybe on some android phone you would see <code>Yes (*)</code> for some system libraries or drivers; that would be OK. You should not see any <code>No.</code></li> + <li>If you do see a <code>No</code>, that is your first problem and you must solve it before looking at anything else.</li> + <li>Look for any error messages in the terminal output just after you typed your <code>run-gdb.sh</code> command.</li> + <li>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: + <pre>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</pre> + </li> + <li>Check the value of these GDB variables: <code>solib-search-path</code> and <code>solib-absolute-prefix:</code> + <pre>(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".</pre> + </li> +</ol> +<div class="note"> + <p><strong>Note</strong>: If you need more help, try the #b2g IRC channel. If you think you found a bug, report it on the <a href="https://github.com/mozilla-b2g/B2G/issues" title="https://github.com/mozilla-b2g/B2G/issues">B2G issue tracker</a>.</p> +</div> +<p> </p> 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 +--- +<p><span style="position: fixed ! important; top: 0px ! important; left: 0px ! important; font-size: xx-small ! important; line-height: 130% ! important; border-color: black ! important; border-width: 1px ! important; border-style: solid ! important; padding: 0px 2px ! important; background-color: rgb(214, 227, 254) ! important; display: none;">S</span></p> +<div class="summary"> + <p><a href="http://valgrind.org">Valgrind<span style="font-family: arial,sans-serif; font-size: xx-small ! important; line-height: 130% ! important; border-width: 1px ! important; border-style: solid ! important; padding: 0px 2px ! important; margin-left: 2px; max-width: 20px; overflow: visible ! important; float: none ! important; display: none;">DSS</span></a> মেমোরি সম্পর্কে জানার জন্য মেমোরি সুবিধা দিয়ে থাকে , যোগসুত্র/প্রক্রিয়া ,এবং অন্যান্য জিনিস এর সাথে সংযুক্ত যা একটি প্রোগ্রামের পারফরমেন্সের মধ্যে আছে।Firefox OS tree তে ইহা সংযুক্ত করে থাকে,এবং ফোনে যা চালানো যায় যা সঠিক সম্পদ এই অনুচ্ছেদ দেখায় কিভাবে ব্যবহার করতে হয় ইহা।</p> +</div> +<h2 id="প্রয়োজনীয়তা">প্রয়োজনীয়তা</h2> +<p>Firefox OS এর বিপক্ষে Valgrind চালানোর আগে,এটা রিকমান্ডেড করা হয়ে থাকে যে <a href="/en-US/docs/Debugging_Mozilla_with_Valgrind">Debugging Mozilla with Valgrind<span style="font-family: arial,sans-serif; font-size: xx-small ! important; line-height: 130% ! important; border-width: 1px ! important; border-style: solid ! important; padding: 0px 2px ! important; margin-left: 2px; max-width: 20px; overflow: visible ! important; float: none ! important; display: none;">DSD</span><span style="font-family: arial,sans-serif; font-size: xx-small ! important; line-height: 130% ! important; border-width: 1px ! important; border-style: solid ! important; padding: 0px 2px ! important; margin-left: 2px; max-width: 20px; overflow: visible ! important; float: none ! important; display: none;">DSD</span><span style="font-family: arial,sans-serif; font-size: xx-small ! important; line-height: 130% ! important; border-width: 1px ! important; border-style: solid ! important; padding: 0px 2px ! important; margin-left: 2px; max-width: 20px; overflow: visible ! important; float: none ! important; display: none;">DSG</span></a> এর সাথে ডেভেলপাররা তাদেরকে পরিচিত করে থাকে ।বেশির ভাগ তথ্য এটা বহন করে যা Firefox OS এর বিপক্ষে কাজ করায় সংযুক্ত, যা বেশির ভাগ গঠন এবং কমান্ড লাইন স্টেপ এর Firefox OS গঠনের দ্বারা এবং বাতিল স্ক্রীপ্ট দ্বারা পরিচালিত হয়ে থাকে।</p> +<p>Firefox OS বিপক্ষে Valgrind একটি ফোনে চালাতে,একটি ফোন সাধারন জায়গার থেকে বেশে জায়গা সহ বেশি দরকার।Valgrind হল জায়গার ইন্টেন্সিভ,এবং সাধারনত কারন হয়ে থাকে Out Of Memory errors এর যা ফোনে 1GB of RAM এর চেয়ে কমে হয়ে থাকে .লেখা অনুসারে(২০১৪-১২-০৪), Valgrind পরীক্ষা চালানো হয়ে থাকে Firefox OS এর Nexus 4 ফোনে 2GB of RAM এর সাথে চলার উপরে ,কিন্তু এটা হবে Geeksphone Keons এবং একই spec ফোনে ।দেখুন <a href="/en-US/Firefox_OS/Phones">Phone and device data</a> ারো বেশি ফোনের সম্পর্কের জানার জন্য।</p> +<h2 id="Valgrind_চালানো_FxOS_ফোনে">Valgrind চালানো FxOS ফোনে</h2> +<p>চলুন Valgrind চালানো প্রক্রিয়া দেখি।</p> +<h3 id="Compiling">Compiling</h3> +<p>Firefox OS এর সাথে with valgrind এর সক্ষ্মতা তৈরি করতে, নিচের <a href="/en-US/Firefox_OS/Customization_with_the_.userconfig_file"><code>.userconfig</code> file</a> যোগ করুন।</p> +<pre>export B2G_VALGRIND=1 </pre> +<p>Building debug (<code>B2G_DEBUG</code>) আরো রিকমান্ডেড।Building কোন অপ্টিমাইজেশন ছাড়া (<code>B2G_NOOPT</code>) তৈরি করে জিনিস যা সাধারনত অব্যবহারযোগ্য ভাভে ধীরে চলে, এবং রিকমান্ডেড না বিশেষ কেস ছাড়া যেখাকে ইহাকে ভাবা হয়ে থাকে অপ্টিমাইজেশনে অন্ধকার ভুল রুপে।</p> +<h3 id="Running">Running</h3> +<div class="note"> + <p>নোটঃRunning Valgrind একটি Firefox OS ফোনে হয়ে থাকে ফোনের কন্টেক্সট এর উপরে,অপারেটিং সিস্টেমের উপরে নয়।এটা মনে করা হয়ে থাকে যে কোন প্লাটফর্ম যা ডেভেলপ ঘটিয়ে থাকে <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">adb</a> এর যা সবসময় পাওয়া যায় এবং<code>run-valgrind.sh</code> script to runবাতিল করে valgrind ফোনে চালাতে ।</p> +</div> +<p>valgrindএর মধ্যে Firefox OS চালাতে,ব্যবহার করুন <a href="https://github.com/mozilla-b2g/B2G/blob/master/run-valgrind.sh">the <code>run-valgrind.sh</code> script from the B2G directory</a>।স্ক্রিপ্ট নিচে দেয়াঃ</p> +<ol> + <li>r/w হিসেবে ফোনের ফাইল সিস্টেম পুনআহোরন করুন ।</li> + <li>বর্তমান <code>libxul.so</code> ডিবাগ কপি করুন সম্পুর্ন চিহ্ন দিতে যা ফোনে আছে।যেহেতু শত শত MB দিয়ে ফাইলটা পরিপুর্ন,এই ধাপে বিভিন্ন সময় নেয়া হয়ে থাকে যা শেষ করতে প্রয়োজনীয়,এটা প্রতিটি নতুন তৈরির সময়ে প্রস্তুত করা হয়ে থাকে।valgrind চালাতে <code>libxul</code> এর কপি ধাপ ছাড়া,নির্দেশটা চালানঃ<br> + <pre class="brush: bash">run-valgrind.sh nocopy</pre> + </li> + <li>ফোনটি পুন্রায় রিবুট করুন।</li> + <li>Kills the b2g প্রক্রিয়া চালান যা ফোনে শুরু হয়ে থাকে ।</li> + <li>ইহার নিজের b2g প্রক্রিয়া valgrind এর মধ্যে চালান।</li> +</ol> +<p>সকল valgrind output লেখ হবে টার্মিনালে <code>stdout</code> এ যা <code>run-valgrind.sh</code> script এর বের হওয়ার টার্মিনাল যা পড়া যায় অথবা ফাইলে উকি মারে।</p> +<div class="note"> + <p><strong>নোটঃ<code>যেহেতু </code></strong><code>run-valgrind.sh</code> script নিজের adb প্রক্রিয়ায় b2g process তে চলমান ,killing the script আরো kill b2g নষ্ট করবে এবং valgrind ফোনে নষ্ট হবে ।এটা প্রদর্শন করে যে ফোনটি চালানোর পরে রিবুটেড হয় একটি valgrind সেসনের উপরে ,যেহেতু এটি যেকোন কিছু একটি অড স্টেট এ থেকে ত্যাগ করতে পারে।</p> +</div> +<h2 id="Valgrind_এর_উপরে_Firefox_OS_Desktop_চালানো">Valgrind এর উপরে Firefox OS Desktop চালানো</h2> +<p>valgrind চালানো Firefox OS Desktop এর কাজের বিপক্ষে যেহেতু এটা চালানো হয়ে থাকে একই পথে যা desktop Firefox এর বিপক্ষে কাজ করে থাকে।<a href="/en-US/docs/Debugging_Mozilla_with_Valgrind">Debugging Mozilla with Valgrind<span style="font-family: arial,sans-serif; font-size: xx-small ! important; line-height: 130% ! important; border-width: 1px ! important; border-style: solid ! important; padding: 0px 2px ! important; margin-left: 2px; max-width: 20px; overflow: visible ! important; float: none ! important; display: none;">DDS</span></a> পেজে আলোচনা করুন আরও বেশি তথ্যের জন্য ।সকল পতাকার page for more information. All of the relevant build flags will need to be added to <code>mozconfig যোগ করা উচিত</code>,এবং সকল প্লাটফর্ম and all platform-বিশেষ ইস্যু যা পেজে প্রয়োগ করা হয়ে থাকে ।specific issues in the page will apply.</p> +<p>নোট করুন যে Valgrind চালানো ডেস্কটপের উপরে যা OOP/process-per-tab mode এ যোগ করার জন্য নিচের প্রক্রিয়ায় child processes গুলো ট্রাক করে থাকে নিশ্চিত করার জন্যঃ</p> +<pre class="brush: bash">--trace-children=yes</pre> +<h2 id="Firefox_OS_Valgrind_পরিচালনা_করা_এবং_আপডেটিং_করা">Firefox OS Valgrind পরিচালনা করা এবং আপডেটিং করা</h2> +<p>যখন প্যাচেস আপ্সট্রিম ব্যবহার করা হয়ে থাকে ,Valgrind forহল Firefox OS এর জন্য পরিচালিত যা একটি ফর্ক রেপসেটরিতে রাখা হয়ে থাকে উওন্নতি ঘটানোর জন্য যা সম্ভব হয়ে থাকে Firefox OS এর গঠনের ট্রি এবং ভার্সনের এর সাথে যোগাযোগের কারনে।</p> +<h3 id="Valgrind_Repos_আপডেটিং">Valgrind Repos আপডেটিং</h3> +<div class="warning"> + <p><strong>ওয়ার্নিংঃ</strong>GIT এর সাথে অভিজ্ঞতাও দরকার। valgrind repos উন্নত করারা চেষ্টা করবেন না ,যদি আপনি জটিল Git operations চালানোতে দক্ষ না হোন।কোন আপডেট github repoদর্পন হবে <code>git.mozilla.org এর যা পুল করা হবে ডেভেলপারদের </code>,HEAD of the manifests repo ব্যবহার দ্বারা ।যখন Valgrind ভাঙ্গা হবে তা কোন কিছুর উপর ভাংবেনা যা Valgrind এর সক্ষমতা নেই(বি দ্র. tbpl), ইহা হবে অনেক বেশি বিরক্তকর ডেভেলপারস যারা এটি ব্যবহারের চেষ্টা করে।</p> +</div> +<p>প্রধান Firefox OS valgrind এবং VEX repos হল</p> +<ul> + <li><a href="http://github.com/mozilla-b2g/valgrind">http://github.com/mozilla-b2g/valgrind</a></li> + <li><a href="http://github.com/mozilla-b2g/vex">http://github.com/mozilla-b2g/vex</a></li> +</ul> +<p>প্রধান শাখা হল SVN ট্রাঙ্কের প্রিন্সিটিভ ভার্সনের শাখাএইসব প্রত্যেক রেপুস,যখন Firefox OS শাখা বহন করবে Firefox OS- এর বিশেষ প্রক্রিয়া ট্রাঙ্কের উপরে যা রিবেস করা।</p> +<div class="note"> + <p><strong>নোটঃALWAYS</strong> <strong>UPDATE BOTH REPOS AT THE SAME TIME</strong>.যখন তারা দূটা পৃথক রেপস,VEX হল সাধারনত Valgrind এরএকটি সাবমডিউল এবং HEAD of valgrind সাধারনত HEAD of VEX এর বিন্দু।.</p> +</div> +<p><code>git.mozilla.org</code> ডোমেইনের প্রতিলিপি B2G মেনিফেস্টে ব্যবহারের জন্যঃ</p> +<ul> + <li><a href="http://git.mozilla.org/?p=b2g/valgrind.git;a=summary">http://git.mozilla.org/?p=b2g/valgrind.git;a=summary</a></li> + <li><a href="http://git.mozilla.org/?p=b2g/valgrind.git;a=summary">http://git.mozilla.org/?p=b2g/vex.git;a=summary</a></li> +</ul> +<ol> + <li>প্রধান রেপ হল sync এর সাথে valgrind SVN কে git svn এর সাথে রাখা।আপডেটেড রেপস কে পুল করতে ,valgrind কে ক্লোন করুন এবং vex repos নেয়া হয় github থেকে , তার পরে নিচেরটা রান করুনঃ<br> + <pre class="brush: bash">git svn init -s [subversion repo url] +</pre> + </li> + <li>SVN info পুল করুন যা কয়েক ঘন্টা সময় নিবে,কিন্তু যখন এটা হয়ে যাবে আপনার ট্রি sync করবে প্রধান Valgrind SVN এর সাথে।</li> + <li>আরো আপডেট পুল করুন,নিচের নির্দেশের সেট ব্যবহার করেঃ<br> + <pre class="brush: bash">git checkout master +git svn fetch +git svn rebase +git push [github-remote-name] master +git checkout fxos +git rebase master +</pre> + </li> + <li>একটি ভাল সুযোগ আছে যা বাধাকে দেখবে Firefox OS শাখার রিবেস ধাপে।যদি আপনার ইস্যু ভালভাবে কাজ না করে,লেখককে ইমেইল করেন যিনি বাধার কমেন্ট করে।</li> + <li>রিবেসিং এর পরে একটি পুর্ন Firefox OS build রান করুন <code>B2G_VALGRIND</code> flag এর সাথে নিশ্চিত করতে যা ইহা গঠন করে থাকে।সবচেয়ে গুরুত্বপুর্ন হল এর স্ক্রীপ্ট শাখা।</li> + <li>একদা আপনি রিবেস করে AND TESTED যা Firefox OS tree এর বিপক্ষে একটি গঠন ,আপনাকে Firefox OS শাখার প্রধান পরিবর্তনের জন্য ধাক্কা দিতে হবে।<br> + <pre>git push -f [github-remote-name] fxos</pre> + </li> +</ol> +<h3 id="গঠনইন্সটলএবং_বাতিল_করা_স্ক্রিপ্ট">গঠন,ইন্সটল,এবং বাতিল করা স্ক্রিপ্ট</h3> +<p>কিছু মাল্টিপল স্ক্রীপ্ট আছে যা Valgrind Firefox OS এর অংশের শাখা অথবা B2G রেপও যা একটি রেপো ফেস আপদেট করারজন্য দরকার।</p> +<h4 id="অতিরিক্তvalgrindandroid.mk">অতিরিক্ত/valgrind/android.mk</h4> +<p>এটি Android গঠন সিস্টেমের স্ক্রীপ্ট।তখন থেকেই নয় বেশির ভাগ সময়, এটি সেটিই যেটাতে পরিবর্তনের প্রয়োজন পরে থাকে ,ফাইলের যোগ/সরানোর কারনে Valgrind tree থেকে ।একটি <code>-j1</code> গঠন ব্যবহার করুন যা টার্গেট তা গঠন করতে ব্যর্থ হলে তবে তা দেখতে,এবং যদি ইহা একটি ফাইল অথবা একটি অবিদ্যমান রেফারেন্সিং ফাইল হারিয়ে ফেলে ,ফাইল লিস্ট আপডেট করুন ।</p> +<h4 id="অতিরিক্তvalgrindvalgrind.mk">অতিরিক্ত/valgrind/valgrind.mk</h4> +<p>এটি বহন করে থাকে প্যাকেজের লিস্ট যা প্রয়োজন হয় গঠন করতে এবং যোগ করতে FxOS সিস্টেম ইমেজ,<code>gonk-misc/b2g.mk দ্বারা রেফারেন্স করা।</code>Valgrind নতুন প্যাকেজে যোগ করার জন্য কম পাওয়া যায় বলে এটি সাধারনত আপডেট করার দরকার পরেনা।কিন্তু যদি লাগে তবে এতে রাখুন।</p> +<h4 id="run-valgrind.sh">run-valgrind.sh</h4> +<p>Valgrind ফোনে চালানোর স্ক্রীপ্ট।যদি Valgrind ফোনে চালানোর জন্য নতুন কমান্ড লাইন থাকে যা যুক্তি প্রদর্শন করে থাকে,তাদের এখানে রাখুন।এটা সেখানে যা আমরা কপি করি লাইব্রেরি ফোনে চিহ্নটি ডিবাগের সাথে থাকে,সুতরাং কোন এডজাস্টমেন্ট /পরিবর্তন প্রক্রিয়াটিতে হওইয়া উচিত ।</p> 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 +--- +<div class="summary"> + <p>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.</p> +</div> +<h2 id="Process_priorities">Process priorities</h2> +<p>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.</p> +<p>A process's priority is known as its <code>oom_adj</code>. Smaller <code>oom_adj</code> 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 <code>oom_adj 0</code>.</p> +<p>Most child processes run with <code>oom_adj 2</code> while they're in the foreground. Child processes in the background run with <code>oom_adj</code> between <code>3</code> and <code>6</code> (inclusive). Exactly what <code>oom_adj</code> 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.</p> +<h2 id="Debugging_an_OOM_crash">Debugging an OOM crash</h2> +<p>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.</p> +<h3 id="Step_1_Verify_that_it's_actually_an_OOM">Step 1: Verify that it's actually an OOM</h3> +<p>First, we need to check whether the crash is actually due to the phone running out of memory. To do this, run <code>adb shell dmesg</code>. If the app is being killed due to OOM, you'll see something like the following response:</p> +<pre class="brush: bash"><4>[06-18 07:40:25.291] [2897: Notes+]send sigkill to 2897 (Notes+), adj 2, size 30625</pre> +<p>This line indicates that the phone's low-memory killer killed the Notes+ app (process id 2897), which had <code>oom_adj 2</code> 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.</p> +<h4 id="Digression_If_it's_not_an_OOM">Digression: If it's not an OOM</h4> +<p>If you don't see a line like this in the <code>dmesg</code> output, your crash is likely not an OOM. The next step in debugging such a crash is usually to attach <code>gdb</code> to the crashing process and get a backtrace, which can be done like so:</p> +<pre class="brush: bash">$ 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</pre> +<p>When reporting the bug, attach this output, along with the output of <code>adb logcat</code>. If your crash is due to OOM, a <code>gdb</code> 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.</p> +<h3 id="Step_2_Collect_memory_reports">Step 2: Collect memory reports</h3> +<p>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.</p> +<p>To pull a memory report from the phone, first update your build tree so you get the latest version of the relevant tool. <code>repo sync</code> is not sufficient; you must <code>git fetch && git merge</code> or <code>git pull</code>:</p> +<pre class="brush: bash">$ cd path/to/B2G/checkout +$ git fetch origin +$ git merge --ff-only origin</pre> +<p>Now you can run the memory reporting tool like so:</p> +<pre class="brush: bash">$ tools/get_about_memory.py</pre> +<p>Once you get a memory report you're happy with, you can zip up the directory (named <code>about-memory-N</code>) 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.</p> +<h4 id="Step_2_option_1_Get_a_different_device">Step 2, option 1: Get a different device</h4> +<p>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 <code>b2g-info</code> 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:</p> +<pre class="brush: bash">$ adb shell 'while true; do b2g-info; sleep 1; done'</pre> +<p>If <code>b2g-info</code> isn't available on your device, you can use <code>b2g-procrank</code> instead.</p> +<h4 id="Step_2_option_2_Fastest_finger">Step 2, option 2: Fastest finger</h4> +<p>If you don't have access to a device with more RAM, you can try to run <code>get_about_memory.py</code> just before the app crashes. Again, you can run <code>b2g-info</code> in a loop (as shown in the previous section) to figure out when to run <code>get_about_memory.py</code>. 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.</p> +<h4 id="Step_2_option_3_Use_a_smaller_testcase">Step 2, option 3: Use a smaller testcase</h4> +<p>We often hit OOMs when doing something like "loading a file of at least size X in the app."</p> +<p>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.</p> +<h4 id="Step_2_option_4_Run_B2G_on_your_desktop">Step 2, option 4: Run B2G on your desktop</h4> +<p>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.</p> +<p>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 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=923961">Bug 923961</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=914584">Bug 914584</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=891882">Bug 891882</a>) 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.</p> +<p>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 <code>memory-report-*.gz</code> files out to <code>/tmp</code>.<br> + <br> + 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.</p> +<p>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:</p> +<p><img alt="Screen shot of instruments." src="https://mdn.mozillademos.org/files/6439/instrumentsScreenShot.png" style="width: 800px; height: 492px;"><br> + <br> + For more information on setting up B2G desktop builds, read our <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking">Hacking Gaia</a> page.</p> +<h3 id="Step_3_Analyze_the_memory_report">Step 3: Analyze the memory report</h3> +<p>When you run <code>get_about_memory.py</code>, 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.</p> +<p>Reading memory reports takes some practice, so feel free to ask for help. The experts on this subject hang out in #memshrink on IRC.</p> +<h3 id="Step_4_Rebuild_with_DMD_if_necessary">Step 4: Rebuild with DMD, if necessary</h3> +<p>One common line item to stick out in memory reports captured before apps crash is <code>heap-unclassified</code>. <code>heap-unclassified</code> counts memory allocated by the process that isn't covered by any other memory reporter. If you have high <code>heap-unclassified</code>, the memory report can't tell you anything else about what that memory belongs to. Our tool for digging into <code>heap-unclassified</code> is called DMD. This works on B2G, but you must <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">build B2G</a> yourself in order for it to work because DMD requires local symbols that are only kept on the build machine.</p> +<p>To find out more information on running DMD and interpreting its output, read the <a href="https://wiki.mozilla.org/Performance/MemShrink/DMD">Mozilla Wiki DMD page</a>.<br> + </p> 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 +--- +<div class="summary"> + <p><span class="seoSummary">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.</span> This article covers the options available and how to make use of them.</p> +</div> +<p>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):</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7801/developermenu-short.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p> +<p>The developer panel is reached as follows:</p> +<ul> + <li>In Firefox OS <1.4, you open the developer panel via <em>Settings > Device information > More Information > Developer</em>.</li> + <li>In Firefox 1.4+, you have to enable the developer panel via <em>Settings > Device information > More Information > Check the Developer Menu checkbox</em>. Once you've done this, you can then access the developer panel via <em>Settings > Developer</em>.</li> +</ul> +<p>The following sections cover each of the options in the Developer panel, explaining what they do and why they're useful.</p> +<h2 id="Developer_Tools_settings">Developer Tools settings</h2> +<h3 id="Debugging_via_USB">Debugging via USB</h3> +<p>The "Remote debugging" option enables support for <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">remotely debugging</a> your Firefox OS device. This also enables <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> command usage.<strong> </strong>In Firefox <1.4 there is only a single checkbox; in Firefox 1.4 there are three options available in a select box:</p> +<ul> + <li>Disabled: remote debugging is turned off (the default.)</li> + <li>ADB only: Allows access to the device by ADB.</li> + <li>ADB and Devtools: Allows access to the device by ADB and Firefox Devtools such as the <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>.</li> +</ul> +<h3 id="Developer_HUD">Developer HUD</h3> +<p>In Firefox OS 1.4+, tapping this section brings you to the Developer HUD selection view.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7803/developerhud-new.png" style="width: 320px; height: 480px; margin: 0px auto; display: block;"></p> +<p>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:</p> +<ul> + <li><strong>Log changes in adb</strong>: Enables logging of device changes to adb logcat.</li> + <li><strong>Warnings</strong>: Displays console warnings.</li> + <li><strong>Errors</strong>: Displays console errors.</li> + <li><strong>Security issues</strong>: Displays potential security issues.</li> + <li><strong>Reflows</strong>: Displays reflows as they occur.</li> + <li><strong><a href="/en-US/Firefox_OS/Platform/Architecture#Jank">Jank</a>/Jank threshold</strong>: Notify the phone user about occurrences of unacceptably high jank, the threshold for which can be customised.</li> + <li><strong>Frames per second</strong>: Displays frames per second, as explained in the {{ anch("Frames_per_second") }} section below.</li> + <li><strong>Time to load</strong>: Displays time to load information, as explained in the {{ anch("Time_to_load") }} section below.</li> + <li><strong>App memory</strong>: Displays information on how much memory the app is using, and allows you to enable or disable the different memory usage factors. See {{ anch("App_memory") }} below for more details.</li> +</ul> +<h4 id="Frames_per_second">Frames per second</h4> +<p>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":</p> +<ul> + <li>The left number is the <strong>composition rate</strong>: the estimated number of times per second Firefox OS is drawing frames to the hardware framebuffer. This is an estimate of the user-perceived framerate, and only an estimate. For example, the counter may report 60 compositions per second even if the screen is not changing. In that case the user-perceived framerate would be 0. However, when used with this caveat in mind and corroborated with other measurements, the monitor can be a useful and simple tool.</li> + <li>The middle number is the <strong>layer transaction rate</strong>, the estimated number of times per second processes are repainting and notifying the compositor. This number is mostly useful for Gecko platform engineers, but it should be less than or equal to the composition rate number on the left.</li> + <li>The right hand number is a measure of the number of pixels drawn as a percentage of the screen size. A number of 273 means the screen was painted 2.73 times. Ideally this number should be as close to 100 as possible.</li> +</ul> +<p><img alt="A screenshot of Firefox OS, showing three numbers in the top left hand corner that are measurements of app framerate." src="https://mdn.mozillademos.org/files/6889/framerate-fxos.jpg" style="width: 357px; height: 640px; display: block; margin: 0px auto;"></p> +<h4 id="Time_to_load">Time to load</h4> +<p>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.</p> +<p><img alt="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." src="https://mdn.mozillademos.org/files/6891/startup-time-fxos.jpg" style="width: 378px; height: 640px; display: block; margin: 0px auto;"></p> +<h4 id="App_memory">App memory</h4> +<p>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 <em>App memory</em> and <em>JS objects</em> checked, and the indicator on the bottom right is showing that the Settings app is using 414.77KB for JS objects.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7731/memory-usage.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p> +<h3 id="Flash_repainted_area">Flash repainted area</h3> +<p>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.</p> +<p><img alt="A screenshot of Firefox OS with a number of transparent overlays, showing the parts of the screen repainted with each new animation frame." src="https://mdn.mozillademos.org/files/6893/paint-update-fxos.jpg" style="width: 378px; height: 640px; display: block; margin: 0px auto;"></p> +<h2 id="Graphics_settings">Graphics settings</h2> +<h3 id="Enable_APZ_for_all_content_(was_Async_PanZoom)">Enable APZ for all content (was Async Pan/Zoom)</h3> +<p>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 <a href="https://wiki.mozilla.org/Platform/GFX/APZ">MozillaWiki APZ</a> article.</p> +<h3 id="Tiling_(was_Layers_Enable_tiles)">Tiling (was Layers: Enable tiles)</h3> +<p>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.</p> +<h3 id="Simple_tiling_(was_Layers_Simple_tiles)">Simple tiling (was Layers: Simple tiles)</h3> +<p>This flips between the two different content painting implementations described in the section above.</p> +<h3 id="Hardware_composer_(was_Enable_hardware_compositing)">Hardware composer (was Enable hardware compositing)</h3> +<p>When enabled, this setting causes the device to use its <a href="https://source.android.com/devices/graphics.html#hwc">Hardware Composer</a> to composite visual elements (surfaces) to the screen.</p> +<h3 id="Draw_tile_borders_(was_Layers_Draw_tile_borders)">Draw tile borders (was Layers: Draw tile borders)</h3> +<p>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.</p> +<h3 id="Draw_layer_borders">Draw layer borders</h3> +<p>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.</p> +<p><img alt="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." src="https://mdn.mozillademos.org/files/6897/paint-layers-borders.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p> +<h3 id="Dump_layers_tree">Dump layers tree</h3> +<p>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.</p> +<h3 id="Cards_View_Screenshots">Cards View: Screenshots</h3> +<p>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.</p> +<h2 id="Window_management_settings">Window management settings</h2> +<h3 id="Software_home_button">Software home button</h3> +<p>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.</p> +<h3 id="Home_gesture">Home gesture</h3> +<p>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.</p> +<h3 id="Edges_gesture">Edges gesture</h3> +<p>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.</p> +<h3 id="Continuous_transition">Continuous transition</h3> +<p>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.</p> +<h3 id="App_transition">App transition</h3> +<p>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.</p> +<h3 id="App_suspending">App suspending</h3> +<p>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.</p> +<h2 id="Debug_settings">Debug settings</h2> +<h3 id="Log_slow_animations">Log slow animations</h3> +<p>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:</p> +<pre>I/Gecko ( 5644): Performance warning: Async animation disabled because frame size (1280, 410) is bigger than the viewport (360, 518) [div with id 'views'] +</pre> +<h3 id="Wi-Fi_output_in_adb">Wi-Fi output in adb</h3> +<p>Enabling this option adds information about Wi-Fi to the adb logs (error logs from the console can be accessed using <code>adb logcat | grep "Error"</code> in the Terminal.)</p> +<h3 id="Bluetooth_output_in_adb">Bluetooth output in adb</h3> +<p>Enabling this option adds information about Bluetooth to the adb logs (error logs from the console can be accessed using <code>adb logcat | grep "Error"</code> in the Terminal.)</p> +<h3 id="Console_enabled">Console enabled</h3> +<p>When enabled, this option lets you use the <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Using_the_Remote_Web_Console" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Using_the_Remote_Web_Console">Web Console</a> in Firefox to remotely access the console output on the device; without this option enabled, the {{domxref("console.log()")}} function does nothing.</p> +<h3 id="Gaia_debug_traces">Gaia debug traces</h3> +<p>Enabling this directly enables DEBUG traces in Gaia; see {{ bug("881672") }} for more details.</p> +<div class="note"> + <p><strong>Note</strong>: 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.</p> +</div> +<h3 id="Show_accessibility_settings">Show accessibility settings</h3> +<p>This enables the accessibility settings menu, subsequently found at <em>Settings > Accessibility</em>. The options contained within are as follows:</p> +<h4 id="Screen_reader">Screen reader</h4> +<p>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:</p> +<ul> + <li>Long press somewhere to focus that app (or whatever) and be alerted as to what it is, then double click to select it.</li> + <li>Swipe from top to bottom to do a "tab" equivalent, moving sequentially through apps and being alerted to each one's name.</li> + <li>Swipe from bottom to top to do "shift tab", moving sequentially backwards through apps and being alerted to each one's name.</li> +</ul> +<h4 id="Speech_volume">Speech volume</h4> +<p>A slider that controls how loud the speech is delivered.</p> +<h4 id="Speech_rate">Speech rate</h4> +<p>A slider that controls how fast the speech is delivered.</p> +<h3 id="Launch_first_time_use">Launch first time use</h3> +<p>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.</p> +<h2 id="Obsolete_settings">Obsolete settings</h2> +<p>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.</p> +<h3 id="Accessibility">Accessibility</h3> +<p>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.</p> +<h3 id="Grid">Grid</h3> +<p>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:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5071/Grid.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p> +<p>The grid's heavier lines are 32 pixels apart, both horizontally and vertically.</p> +<h3 id="Show_frames_per_second">Show frames per second</h3> +<p>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.</p> +<h3 id="Show_time_to_load">Show time to load</h3> +<p>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.</p> +<h3 id="Rocketbar_enabled">Rocketbar enabled</h3> +<p>In Firefox OS versions older than newer 1.4, this option enables the new <a href="https://groups.google.com/forum/#!topic/mozilla.dev.gaia/Nlfbrq1KMP0">Firefox Rocketbar</a> 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.</p> +<div class="note"> + <p><strong>Note</strong>: In newer versions of Firefox OS, Rocketbar is enabled automatically and cannot be turned off.</p> +</div> +<h3 id="Contacts_debugging_output_in_adb">Contacts debugging output in adb</h3> +<p>Enabling this option adds debugging information about contacts to the adb logs (error logs from the console can be accessed using <code>adb logcat | grep "Error"</code> in the Terminal.)</p> +<h3 id="Progressive_paint_(was_Layers_Progressive_paint)">Progressive paint (was Layers: Progressive paint)</h3> +<p>This was introduced to help with debugging of the <a href="https://wiki.mozilla.org/Platform/GFX/APZ">Async Panning/Zoom module</a> (APZ) during its implementation. Now APZ implementation is complete, this option is deprecated, and will be removed from future versions (see {{ Bug("1003228") }}).</p> +<h3 id="Displayport_Heuristics">Displayport Heuristics</h3> +<ul> + <li>Default</li> + <li>Center displayport</li> + <li>Assume perfect paints</li> + <li>Taller displayport</li> + <li>Faster paints</li> + <li>No checkerboarding</li> +</ul> +<p>These options were introduced to help with debugging of the <a href="https://wiki.mozilla.org/Platform/GFX/APZ">Async Panning/Zoom module</a> (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") }}).</p> +<h2 id="Keyboard_layouts">Keyboard layouts</h2> +<p>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:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5079/InputMethods.png"></p> +<p>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.</p> +<div class="note"> + <p><strong>Note</strong>: For other keyboard layouts still under development, such as Japanese, we now have a build-time config to opt them in.</p> +</div> +<p> </p> 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 +--- +<div class="summary"> +<p>এই পেজটি বোঝায় কিভাবে ফায়ারফক্স ওস এ ক্রাশ রিপোর্টিং নিয়ন্ত্রণ করতে হয় , ক্রাশ রিপোর্ট বের করা এবং ক্রাশ ফোর্স করতে হয় <span style="color: rgb(80, 80, 80); font-family: solaimanlipi,arial; line-height: 22px;">।</span></p> +</div> + +<div class="note"> +<p>নোট : বেশিরভাগ ফায়ারফক্স ডেস্কটপ অবদানকারীরা " about:crashes to retrieve crash রিপোর্টস" (আরো জানতে <a href="/en-US/docs/Crash_reporting">ক্রাশ রিপোর্টিং</a> পড়ুন ) ব্যবহারে অভ্যস্ত , কিন্তু এটি ফায়ারফক্স ওস-এ সাপর্টেড নয় <span style="color: rgb(80, 80, 80); font-family: solaimanlipi,arial; line-height: 22px;">।</span></p> +</div> + +<h2 id="আপনি_কোনকিছু_করার_আগে">আপনি কোনকিছু করার আগে : </h2> + +<p>নিচের সব নির্দেশনাগুলি ধরে নিবে যে আপনি ইতিমধ্যে নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করেছেন :</p> + +<ol> + <li>নিশ্চিন্ত করে রাখুন যে আপনার ডিভাইস এ <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Debugging_via_USB">রিমোট ডীবাগিং</a> চালু আছে এবং <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> ইস্টাল করা আছে <span style="color: rgb(80, 80, 80); font-family: solaimanlipi,arial; line-height: 22px;">।</span> এটি আপনার কম্পিউটার কে আপনার ডিভাইস এর সাথে যোগাযোগ রাখতে দেয় </li> + <li>ইউএসবি দ্বারা আপনার কম্পিউটার এর সাথে আপনার ডিভাইস কে সংযুক্ত করুন<span style="color: rgb(80, 80, 80); font-family: solaimanlipi,arial; line-height: 22px;">।</span></li> + <li>ডেস্কটপ ফায়ারফক্স এ <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="text-decoration: underline;">ADB Helper Add-on</a> ইনস্টল করুন কোনো দরকারী পোর্ট ফরওয়ার্ডিং হ্যান্ডেল করবার জন্যে <span style="color: rgb(80, 80, 80); font-family: solaimanlipi,arial; line-height: 22px;"> ।</span></li> +</ol> + +<h3 id="বিজিবাক্স_ইনস্টল_করা">বিজিবাক্স ইনস্টল করা</h3> + +<p>আপনাকে পরামর্শ দেয়া হচ্ছে আমাদের বিজিবাক্স ইনস্টল করতে ইউটিলিটি যেটি এডিবি-তে কিছু সাহায্যকারী কমান্ড যোগ করে ফায়ার ফক্স ওস টেস্ট ও ডিবাগ করতে সহায়তা করতে<span style="color: rgb(80, 80, 80); font-family: solaimanlipi,arial; line-height: 22px;">।</span></p> + +<p>এটি ইনস্টল করার জন্যে আপনার ডিভাইসটি জাগ্রত আছে কিনা এ ব্যাপারে নিশ্চিত হয়ে :<br> + </p> + +<ol> + <li><a href="https://wiki.mozilla.org/images/3/32/Busybox-b2g.tar.gz">বিজিবাক্স ডাউনলোড করুন</a> <span style="color: rgb(80, 80, 80); font-family: solaimanlipi,arial; line-height: 22px;">।</span></li> + <li>টারবালটি সাছন্দমত জাগায় আনজিপ করুন <span style="color: rgb(80, 80, 80); font-family: solaimanlipi,arial; line-height: 22px;">।</span></li> + <li>cd into the resulting busybox-b2g directory</li> + <li> ./install.sh - রান করুন ইনস্টল করার জন্যে<span style="color: rgb(80, 80, 80); font-family: solaimanlipi,arial; line-height: 22px;">।</span></li> +</ol> + +<p>আপনি যাতে পিং এর মতো কমান্ডগুলি সরাসরি চালাতে পারেন , বিজিবাক্সের সমস্ত ইউটিলিটিগুলি /system/bin -এ সিমলিঙ্ক পায়। কিছু সাধারণ কমান্ডসমুহ নিচে দেয়া হল ঃ</p> + +<pre class="brush: bash">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)</pre> + +<h2 id="ফায়ারফক্স_ওএস_চালিত_কন_যন্ত্রে_ক্র্যাশ_রিপোর্ট_পাওয়া">ফায়ারফক্স ওএস চালিত কন যন্ত্রে ক্র্যাশ রিপোর্ট পাওয়া</h2> + +<p>We have created a Firefox OS app to allow us to retrieve crash reports — <a href="http://jds2501.github.io/webapi-permissions-tests/about-crashes.zip">About Crashes</a> — which works on version 1.2+.<br> + <br> + To install it on your device, follow these steps:</p> + +<ol> + <li>About Crashes is a certified app, so you need to enable debugging of certified apps (see instructions for <a href="/en-US/Firefox_OS/Using_the_App_Manager#Debugging_Certified_Apps_2">App Manager</a>, and <a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">WebIDE</a>.)</li> + <li>Download the About Crashes app zip file from the above link and extract it locally.</li> + <li>In Firefox desktop, open the <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a> or <a href="/en-US/docs/Tools/WebIDE">WebIDE</a> (depending on which version of Firefox you are using) under Tools > Web Developer.</li> + <li>In either tool, add the About Crashes app as a packaged app (App Manager: click on the plus next to the <em>Add Packaged App</em> option, WebIDE: Open the left hand dropdown menu and select <em>Add Packaged App...</em>)</li> + <li>Connect your device to App Manager/WebIDE (App Manager: find it listed at the bottom of the UI, WebIDE: Find it under <em>Select Runtime</em>.)</li> + <li>Install and open the app on the device (App Manager: Press the app's <em>Update</em> button, WebIDE: press the "Play" button (<em>Install and Run</em>))</li> + <li>On the device, press the <em>Update</em> button inside About Crashes to see your most recent crashes.</li> +</ol> + +<h2 id="Getting_crash_ids_from_the_command_line">Getting crash ids from the command line</h2> + +<p>You can get a list of crash ids via the command line by entering the following command into your terminal:</p> + +<pre class="brush: bash">adb shell ls -l /data/b2g/mozilla/Crash\ Reports/submitted/</pre> + +<p>If you have a long list of crashes and want them sorted by date, use this command instead:</p> + +<pre class="brush: bash">adb shell busybox ls -ltr /data/b2g/mozilla/Crash\ Reports/submitted/</pre> + +<h2 id="Gettingverifying_the_crash_report">Getting/verifying the crash report</h2> + +<p>To verify a crash report:</p> + +<ol> + <li>Copy the filename without the extension.</li> + <li>Go to <a href="http://crash-stats.mozilla.org">Mozilla Crash Reports</a>.</li> + <li>Paste the filename without the extension in the upper right hand search box.</li> +</ol> + +<p>This should display the crash report you have submitted.</p> + +<h2 id="How_to_Force_a_crash">How to Force a crash</h2> + +<p>To trigger a Firefox OS system crash, enter the following command in your terminal to find out the root process ID :</p> + +<pre class="brush: bash">adb shell ps |grep b2g</pre> + +<p>You'll need to find the line that has <code>root</code> at the start of it, and <code>/system/b2g/b2g</code> at the end. It should something like this:</p> + +<pre class="brush: bash">root 109 1 191120 66024 ffffffff 400fa330 S /system/b2g/b2g</pre> + +<p>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:</p> + +<pre class="brush: bash">adb shell kill -11 [ENTER ID HERE]</pre> + +<p>Killing the root process will crash your device.</p> + +<h3 id="How_to_run_GDB_script_for_b2g">How to run GDB script for b2g</h3> + +<ol> + <li>Start the gallery app on the phone, then run the following command in your terminal: + <pre class="brush: bash">adb shell b2g-ps</pre> + </li> + <li>Note down the pid of the gallery app, then run the following command: + <pre class="brush: bash">./run-gdb.sh attach <pid></pre> + </li> + <li>Cause the crash</li> + <li>Run this command: + <pre class="brush: bash">(gdb) bt</pre> + </li> +</ol> 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 +--- +<div class="summary"> + <p><span class="seoSummary">There are two main types of debugging you'll want to with Firefox OS: debugging apps, and debugging other aspects of the system.</span> This section of the site provides articles covering the different tools at your disposal to debug your Firefox OS code.</p> +</div> +<h2 id="Debugging_apps">Debugging apps</h2> +<p>When debugging your web apps, the best tool at your disposal is Mozilla's powerful <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>, 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 <a href="https://developer.mozilla.org/en-US/docs/Tools" title="en-US/docs/Tools">developer tools</a>. This should be your first choice, especially for app/Gaia debugging.</p> +<dl> + <dt> + <a href="/en-US/Firefox_OS/Using_the_App_Manager">Using the App Manager</a></dt> + <dd> + 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.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_OOMs">Debugging out of memory errors on Firefox OS</a></dt> + <dd> + 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.</dd> +</dl> +<h2 id="Debugging_GaiaB2G">Debugging Gaia/B2G</h2> +<p>If you want to debug code from the Gaia apps suite or B2G itself, the following tools will be of use to you.</p> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_using_the_desktop_B2G_client" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_using_the_desktop_B2G_client">Debugging using the desktop B2G client</a></dt> + <dd> + You can use the dedicated B2G desktop application (and associated tools) to debug multiple aspects of B2G and Gaia.</dd> + <dt> + <a href="/en-US/Firefox_OS/Hacking_Firefox_OS/Quickstart_guide_to_Gaia_development">Quickstart guide to Gaia development</a></dt> + <dd> + 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.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb">Debugging B2G using gdb</a></dt> + <dd> + 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.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_valgrind" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb">Debugging B2G using Valgrind</a></dt> + <dd> + 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.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Debugging/HTTP_logging#Firefox_OS_phones" title="/en-US/docs/Mozilla/Debugging/HTTP_logging#Firefox_OS_phones">Getting NSPR logs in B2G</a></dt> + <dd> + You can use NSPR logs to record HTTP and other networking.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Debugging/Debugging_OpenGL" title="/en-US/docs/Mozilla/Debugging/Debugging_OpenGL">Debugging OpenGL</a></dt> + <dd> + How to debug OpenGL code on Firefox OS.</dd> +</dl> +<h2 id="General_setup_and_information"><strong>General setup and information</strong></h2> +<p>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.</p> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings">Developer settings for Firefox OS</a></dt> + <dd> + 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.</dd> + <dt> + <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing and using ADB</a></dt> + <dd> + Many aspects of Firefox OS development require installation of <code>adb</code>, the Android Debug Bridge. This article explains how to do that, and shares some common useful ADB commands.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a></dt> + <dd> + How to log to console on a Firefox OS device, and how to access the resulting logs for review on your computer.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_Firefox_OS_apps_in_desktop_Firefox">Connecting a Firefox OS device to the desktop</a></dt> + <dd> + 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.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up">Setting up to debug Firefox OS code</a></dt> + <dd> + 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.</dd> +</dl> 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 +--- +<div class="summary"> +<p><span class="seoSummary"><span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> এ ডেভেলপমেন্ট করার সময় বিভিন্ন কাজেই <code><span class="hps">adb</span></code> <span class="hps">(<span class="seoSummary"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span>অ্যান্ড্রয়েড</span> <span class="hps">ডিবাগ</span> <span class="alt-edited hps">ব্রিজ</span></span></span></span></span></span></span>) ইনস্টলেশন <span id="result_box" lang="bn"><span class="alt-edited hps">প্রয়োজন হয়</span></span></span></span>। <span id="result_box" lang="bn"><span class="hps">এই নিবন্ধটি <span id="result_box" lang="bn"><span class="hps">ব্যাখ্যা করে কিভাবে তা করা হয়, এবং <span id="result_box" lang="bn"><span class="hps">কিছু সাধারণ</span> <span class="hps">দরকারী</span> <span class="hps">এডিবি</span> <span class="hps">কমান্ড <span id="result_box" lang="bn"><span>শেয়ার করে।</span></span></span></span></span></span></span></span></span></p> +</div> + +<h2 id="এডিবি_ইনস্টল"> এডিবি <span class="short_text" id="result_box" lang="bn"><span class="hps">ইনস্টল</span></span></h2> + +<p><span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">ম্যাক,</span> <span class="hps">লিনাক্স</span> <span class="hps">বা</span> <span class="hps">উইন্ডোজের জন্য</span><span>,</span> <span class="hps">অ্যান্ড্রয়েড SDK</span> <span class="hps">প্যাকেজের অংশ</span> <span class="hps">হিসেবে</span> <span class="hps">এডিবি</span> <span class="hps">ডাউনলোড ও</span> <span class="hps">ইনস্টল করতে পারেন </span></span>- <a href="http://developer.android.com/sdk/index.html">Get the Android SDK</a> পেজ দেখুন।</p> + +<p><span id="result_box" lang="bn"><span class="alt-edited hps">নতুন</span> <span class="hps">লিনাক্স</span> <span class="hps">ডিস্ট্রিবিউশন </span></span>এর <span id="result_box" lang="bn"><span class="alt-edited hps">রিপোসিটোরিতে <span id="result_box" lang="bn"><span class="hps">ইতিমধ্যে</span> <span class="hps">এডিবি আছে।</span></span></span></span><span id="result_box" lang="bn"><span class="hps"> উবুন্টু</span> <span class="hps">12.10</span> <span class="hps">এবং পরবর্তী সংস্করণের জন্য</span><span>, নিম্নলিখিত</span> <span class="hps">কমান্ড ব্যবহার করুন:</span></span></p> + +<pre>sudo apt-get install android-tools-adb</pre> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">অথবা</span> <span class="hps">ফেডোরা</span> <span class="atn hps">18</span><span>/19</span> <span class="alt-edited hps">এর জন্য</span></span>:</p> + +<pre>sudo yum install android-tools</pre> + +<p><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">ডিস্ট্রিবিউশন </span></span>এর <span id="result_box" lang="bn"><span class="hps">এডিবি</span> <span class="alt-edited hps">এর জন্য</span> <span class="hps">প্যাকেজ</span> <span class="alt-edited hps">না থাকলে </span></span>(i.e. <span class="short_text" id="result_box" lang="bn"><span class="hps">উবুন্টু</span> <span class="hps">12.04</span> <span class="hps">বা</span> <span class="hps">ফেডোরা</span> <span class="hps">17</span></span>), <span id="result_box" lang="bn"><span class="alt-edited hps">আপনাকে আপনার</span> <span class="hps">প্ল্যাটফর্মের জন্য</span></span> <a class="external" href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK starter package</a> <span id="result_box" lang="bn"><span class="hps">ইনস্টল</span> <span class="hps">করতে হবে</span></span> (আপনার <em><span id="result_box" lang="bn"><span class="hps">এডিটি</span> <span class="alt-edited hps">বান্ডল</span></span> </em>প্রয়োজন হবে, <em>SDK <span id="result_box" lang="bn"><span class="alt-edited hps">টুল</span></span> Only</em> অপশন নয়)। <span class="short_text" id="result_box" lang="bn"><span class="hps">তারপর</span> <span class="hps">তাদের</span> <span class="hps">প্যাকেজ</span> <span class="hps">ম্যানেজার</span> <span class="hps">চালনা করুন</span></span>, <code>$SDK_HOME/tools/android</code>,এবং "Android SDK Platform-tools" <span id="result_box" lang="bn"><span class="hps">ইনস্টল করতে</span> <span class="alt-edited hps">GUI</span> <span class="alt-edited hps">ব্যবহার করুন।</span></span></p> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">এডিবি</span> <span class="hps">ইনস্টল</span> <span class="hps">যেখানে</span> <span class="alt-edited hps">খুঁজে বার করুন</span></span> (<span id="result_box" lang="bn"><span class="hps">সাধারণত</span></span> <code>usr/bin এ</code>, <span id="result_box" lang="bn"><span class="hps">সম্ভবত</span></span> <code>adt/platform-tools</code> এর <span id="result_box" lang="bn"><span class="hps">ভিতরে</span></span>, <span id="result_box" lang="bn"><span>আপনি এটি</span> কিভাবে <span class="hps">ইনস্টল</span> </span>করেছেন তার উপর <span id="result_box" lang="bn"><span class="hps">নির্ভর করে</span></span>)। আপনার <span id="result_box" lang="bn"><span class="alt-edited hps">ডিরেক্টরিতে এই</span></span> <code>PATH</code> <span id="result_box" lang="bn"><span class="alt-edited hps">যুক্ত</span> <span class="hps">করতে ভুলবেন না।</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">এই</span> <span class="hps">লাইন</span> <span class="hps">যোগ করে</span> <span class="hps">এটি করা যাবে</span></span></p> + +<pre>PATH=$SDK_HOME:$PATH</pre> + +<p><span id="result_box" lang="bn"><span class="alt-edited">অ্যান্ড্রয়েড</span> <span class="alt-edited hps">SDK এর</span> <span class="hps">এর</span> <span class="hps">অবস্থান সঙ্গে</span></span> <code>$SDK_HOME</code> <span id="result_box" lang="bn"><span class="hps">প্রতিস্থাপন করে</span></span>, আপনার <code><code>~/.bashrc এ অথবা</code></code> এর <span id="result_box" lang="bn"><span class="hps">সমতুল্য</span></span>।</p> + +<h2 id="সমস্যা_সমাধান"><span class="short_text" id="result_box" lang="bn"><span class="hps">সমস্যা সমাধান</span></span></h2> + +<p><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">আপনি যদি একটি</span> <span class="hps">64 বিট</span> <span class="hps">ইনস্টল</span> <span class="hps">ব্যবহার করেন</span></span>, এবং 'adb' চলমান থাকা অবস্থায় <span id="result_box" lang="bn"><span class="hps">ফাইলটি থাকা সত্তেও আপনি যদি একটি "File not found" <span id="result_box" lang="bn"><span class="hps">ভুল পান</span></span></span></span>, <span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">32 বিট</span> <span class="alt-edited hps">কম্প্যাটিবিলিটি</span> <span class="hps">লাইব্রেরি</span> <span class="hps">ইনস্টল</span> <span class="hps">করতে হবে।</span></span> <span id="result_box" lang="bn"><span class="hps">APT</span> <span class="hps">সঙ্গে</span> <span class="hps">এটি করার জন্য</span><span>:</span></span></p> + +<pre>sudo apt-get install ia32-libs</pre> + +<h2 id="সাধারণ_এডিবি_কমান্ড"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">সাধারণ</span> <span class="hps">এডিবি</span> <span class="hps">কমান্ড</span></span></h2> + +<p><span id="result_box" lang="bn"><span class="hps">নিম্নলিখিত</span> <span class="hps">বিভাগে</span> <span class="hps">কিছু</span> <span class="hps">সাধারণ, দরকারী</span> <span class="hps">এডিবি</span> <span class="hps">কমান্ড</span> <span class="alt-edited hps">ব্যাখ্যা করা </span></span>হয়েছে।</p> + +<h2 id="B2g_প্রক্রিয়া_পুনরায়_আরম্ভ_করা"><span class="short_text" id="result_box" lang="bn"><span class="hps">B2g</span> <span class="hps">প্রক্রিয়া</span> <span class="alt-edited hps">পুনরায় আরম্ভ করা</span></span></h2> + +<p>b2g <span id="result_box" lang="bn"><span class="hps">একটি</span></span> <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> <span id="result_box" lang="bn"><span class="alt-edited hps">অ্যাপ্লিকেশনের</span> <span class="hps">সমতুল্য </span></span>যা <span id="result_box" lang="bn"><span class="hps">একটি অ্যান্ড্রয়েড</span> <span class="hps">ভিত্তিক</span> <span class="hps">কার্নেল <span id="result_box" lang="bn"><span class="hps">ফোনে</span> <span class="hps">চলমান।</span></span></span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">কখনও কখনও আপনি</span> <span class="hps">এটি</span> <span class="hps">পুনরায় আরম্ভ</span> <span class="alt-edited hps">করতে চাইতে পারেন</span></span>; <span id="result_box" lang="bn"><span class="alt-edited hps">অ্যাপ্লিকেশন</span> <span class="alt-edited hps">এনভায়রনমেন্ট</span> <span id="result_box" lang="bn"><span class="hps">এই সমগ্র</span> <span class="hps">ডিভাইসটি</span> <span class="hps">পুনরায় বুট</span> <span class="hps">ছাড়া </span></span><span class="alt-edited hps">রিসেট করতে</span>, এটি একটি উপায়। <span id="result_box" lang="bn"><span class="hps">যখন <span id="result_box" lang="bn"><span class="hps">আপনার ডিভাইস</span> <span class="hps">আপনার কম্পিউটারে</span> <span class="alt-edited hps">সংযুক্ত থাকে তখন <span id="result_box" lang="bn"><span class="hps">আপনি আপনার</span> <span class="hps">টার্মিনালে</span> <span class="hps">নিম্নলিখিত</span> <span class="hps">লিখে</span> <span class="hps">এটা করতে পারেন</span></span></span></span></span></span></span> (<span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">অথবা</span> <span class="hps">ডিবাগার</span> <span class="hps">যখন চলমান</span></span>):</p> + +<pre>adb shell killall b2g</pre> + +<h2 id="ডিবাগিং_এর_জন্য_পোর্ট_ফরওয়ার্ডিং_সক্রিয়করণ"><span class="short_text" id="result_box" lang="bn"><span class="hps">ডিবাগিং</span> <span class="alt-edited hps">এর জন্য <span class="short_text" id="result_box" lang="bn"><span class="hps">পোর্ট</span> <span class="hps">ফরওয়ার্ডিং <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">সক্রিয়করণ</span></span></span></span></span></span></h2> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">সহজভাবে</span> <span class="hps">পোর্ট</span> <span class="hps">ফরওয়ার্ডিং</span> <span class="hps">সক্রিয় করার জন্য </span></span>(<span id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ <span id="result_box" lang="bn"><span class="alt-edited hps">আপনি যদি একটি</span> <span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="hps">ডিভাইসে</span> <span class="hps">ডিবাগ</span> <span class="hps">Apps থেকে</span> <span class="hps">অ্যাপ্লিকেশন</span> <span class="hps">ম্যানেজার</span> <span class="hps">ব্যবহার করে থাকেন</span></span></span></span>), <span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার টার্মিনালের</span> <span class="hps">মধ্যে</span> <span class="hps">নিম্নলিখিত কমান্ড</span> <span class="hps">লিখুন</span></span>:</p> + +<pre class="language-html">adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> + +<p><span id="result_box" lang="bn"><span class="hps">প্রত্যেক সময় </span></span>যখন <span id="result_box" lang="bn"><span class="hps">ফোন পুনরায় চালু হবে অথবা সংযুক্ত হওয়ার</span></span> পর পুনরায় <span id="result_box" lang="bn"><span class="alt-edited hps">বিচ্ছিন্ন হবে, আপনাকে এই <span id="result_box" lang="bn"><span class="hps">কাজ</span> <span class="hps">করতে হবে।</span></span></span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">প্রয়োজনে</span> <span class="hps">আপনি</span> <span class="hps">সকেট</span> <span class="hps">সংখ্যা</span> <span class="hps">পরিবর্তন করতে পারেন।</span></span></p> + +<h2 id="একটি_লোকাল_মেশিনে_পোর্ট_ফরওয়ার্ডিং"><span class="short_text" id="result_box" lang="bn"><span class="hps">একটি </span>লোকাল <span class="hps">মেশিনে</span> <span class="hps">পোর্ট</span> <span class="hps">ফরওয়ার্ডিং</span></span></h2> + +<p><span id="result_box" lang="bn"><span class="hps">একটি স্থানীয়</span> <span class="hps">মেশিনে</span> <span class="hps">পোর্ট</span> <span class="hps">ফরওয়ার্ড</span> <span class="hps">করতে আপনাকে</span></span> <a href="http://people.mozilla.org/~jmuizelaar/forward/">netcat and ssh binaries</a> <span id="result_box" lang="bn"><span class="hps">ডাউনলোড</span> <span class="hps">করতে হবে</span></span>, <span class="short_text" id="result_box" lang="bn"><span class="hps">এবং নিম্নলিখিত</span> <span class="hps">কমান্ড</span> <span class="hps">সঞ্চালন করুন</span></span>:</p> + +<pre class="brush: bash"># 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</pre> + +<p><span id="result_box" lang="bn"><span class="hps">এই</span> <span class="hps">হোস্ট</span> <span class="hps">এর</span> <span class="hps">পোর্ট</span> <span class="hps">8000</span> <span class="hps">থেকে</span> <span class="hps">ডিভাইস</span> <span class="hps">পোর্ট</span> <span class="hps">9999</span> <span class="hps">ফরওয়ার্ড</span> <span class="hps">হবে</span></span>।</p> + +<p><span id="result_box" lang="bn"><span class="hps">অন্যথায় আপনি</span></span> একটি ssh <span id="result_box" lang="bn"><span class="alt-edited hps">সার্ভার</span> <span class="hps">ব্যবহার করতে পারেন</span></span> (<a href="http://people.mozilla.org/~jmuizelaar/forward/dropbear">dropbear</a> এবং <a href="http://people.mozilla.org/~jmuizelaar/forward/host_key">host_key</a>) <span id="result_box" lang="bn"><span class="hps">সরাসরি ডিভাইসে</span></span>, <span id="result_box" lang="bn"><span class="hps">নিম্নলিখিত</span> <span class="hps">কমান্ড</span> <span class="hps">ব্যবহার করে</span></span>:</p> + +<pre class="brush: bash">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 +</pre> + +<p><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">অতিরিক্ত</span> <span class="alt-edited hps">রিসোর্স</span></span>:</p> + +<ul> + <li><a href="http://k.japko.eu/android-dropbear.html">Instructions for building dropbear</a></li> + <li><a href="http://people.mozilla.org/~jmuizelaar/forward/dropbear-b2g.patch">dropbear patch</a> <span id="result_box" lang="bn"><span class="hps">অনুপস্থিত</span> <span class="alt-edited hps">এনভায়রনমেন্ট</span> <span class="hps">ভেরিয়েবল</span> <span class="hps">থেকে</span> <span class="hps">ক্র্যাশ <span id="result_box" lang="bn"><span class="alt-edited hps">নিষ্ক্রিয় করতে</span></span></span></span> এবং <span class="short_text" id="result_box" lang="bn"><span class="hps">হার্ড</span> <span class="hps">কোড</span> <span class="alt-edited hps">অনুমোদনের</span> <span class="alt-edited hps">সফলতা।</span></span></li> +</ul> 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 +--- +<div class="summary"> + <p><span class="seoSummary"> আউটপুট এ লগইন করা এবং তা <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Using_the_Remote_Web_Console" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Using_the_Remote_Web_Console">remote web console</a> এর সাহায্যে দেখা ছাড়াও, আপনি ডিভাইস এর onboard file store এ কনসোল আউটপুট দ্বারা লগইন করতে পারবেন ,তারপর</span><a href="http://developer.android.com/tools/help/logcat.html" style="font-size: 14px; line-height: 1.5; text-decoration: underline;" title="http://developer.android.com/tools/help/logcat.html"><code style="font-size: 13.63636302947998px;">logcat</code></a><span style="font-size: 14px; line-height: 1.5;"> </span><span style="font-size: 14px; line-height: 1.5;">ইউটিলিটি এবং </span><span style="font-size: 14px; line-height: 1.5;">USB সংযোগ ব্যবহার করে আপনার computer থেকে লগ </span><span style="font-size: 14px; line-height: 1.5;">আহরণ</span><span style="font-size: 14px; line-height: 1.5;"> করতে পারেন ।</span><span style="font-size: 14px; line-height: 1.5;"> কি ভাবে </span><span style="font-size: 14px; line-height: 1.5;">এই বৈশিষ্ট্য সঠিক </span>ব্যবহার<span style="font-size: 14px; line-height: 1.5;"> করবেন, কি ভাবে লগইন করবেন এবং কিভাবে লগ গুলো </span><span style="font-size: 14px; line-height: 1.5;">আহরণ করবেন তা এই </span><span style="font-size: 14px; line-height: 1.5;">article জুড়ে বলা হয়েছে।</span></p> +</div> +<h2 id="কনসোল_লগইন_সক্রিয়_করার_পদ্ধতি">কনসোল লগইন সক্রিয় করার পদ্ধতি</h2> +<p>ফায়ারফক্স ওএস এর production এর সময়ে থেকে , কনসোল লগইন (যেমন {{domxref ("console.log ()")}}) ডিফল্ট রূপে বন্ধ করা থাকে। এটি সক্রিয় করতে , ডিভাইস এর <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a> এ যান এবং <em>Console Enabled</em> preference সক্রিয় করুণ।</p> +<h2 id="লগইন">লগইন</h2> +<p>একবার লগইন সক্রিয় হয়ে গেলে , এটা ডেস্কটপের ফায়ারফক্স ওএস এ লগইন এর মতই কাজ করে । আপনি সহজে object to log text to the console এ {{domxref ("কনসোল")}} এই method ব্যবহার করতে পারেন । যেমন <span style="font-size: 14px; line-height: 1.5;">:</span></p> +<pre class="brush: js">console.info("Starting up the foobar hardware!"); +var err = foobar.start(); +if (err) { + console.error("--Error %d starting up the foobar hardware!", err); +} +</pre> +<div class="note"> + <p><b>Note: </b>লগইন এর কোন features আপনার জন্য খোলা তা সম্পর্কে বিস্তারিত জানতে {{domxref("console")}} দেখুন। </p> +</div> +<h2 id="logcat_ব্যবহার">logcat ব্যবহার</h2> +<p>লগ আউটপুট ফায়ারফক্স ওএস ডিভাইসের মধ্যে সংরক্ষিত হওয়ার ফলে, এবং ডিভাইস এই লগ দেখার জন্য বর্তমানে কোন ইউসার ইন্টারফেস না থাকার কারনে , তা পর্যালোচনার জন্য একটি computer এ ওইগুলো আনতে হবে । আপনাকে adb থেকে logcat কমান্ড ব্যবহার করতে হবে, যা Android SDK এর একটি অংশ ( <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing ADB</a> দেখেন)।</p> +<p>ভাগ্যক্রমে, একবার adb ইনস্টল ও USB দ্বারা আপনার ডিভাইস কম্পিউটারের সাথে সংযুক্ত করা হয়ে গেলে logcat ব্যবহার করা অনেক সহজ হয়ে যায়, আপনি এই ভাবে টার্মিনাল থেকে এটি ব্যবহার করতে পারেন:</p> +<pre class="brush: bash">adb logcat</pre> +<p>যার ফলাফল ডিভাইস এর লগ <span style="font-size: 14px; line-height: 1.5;">(</span><code style="font-size: 13.63636302947998px;">/dev/log/system/ এ সংরক্ষিত)</code><span style="font-size: 14px; line-height: 1.5;">টার্মিনাল এ অউটপুট হিসাবে দেখতে পাওয়া </span><span style="font-size: 14px; line-height: 1.5;">, যেমনঃ </span></p> +<pre class="brush: bash">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. +</pre> 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 +--- +<div class="summary"> + <p>ফায়ারফক্স ও এস সমর্থন করে দূরবর্তী একই ডিবাগিং চুক্তিপত্র যা ফায়ারফক্স মোবাইল অ্যানড্রয়েডের উপর সমর্থন করে।এটার মানে তুমি ফায়ারক্স ডেভেলপমেন্ট টুলস ব্যবহার করতে পারো ফায়ারফক্স ডিভাইস অথবা এর থেকে উন্নত এর উপর গাইয়া অ্যাপলিকেশন চালিয়ে ডিবাগ করতে তোমার ফায়ারফক্স ডিভাইসের উপর অথবা তোমার ফায়ারফক্স ডিভাইস সিমুলেটরের উপর ডিবাগ করতে,তোমার দরকার ফায়ারফক্স ১৮ অথবা পরেরটি ; আরো ,কিছু সেটিংস আছে যা তোমার ডেক্সটপ ব্রাউজারের কনফিগারেশনের এবং তোমার ফায়ারফক্স ও এস ডিভাইসের অথবা সিমুলেটরের পরিবর্তনে দরকার পরে।</p> +</div> +<div class="note"> + <p><strong>নোটঃ যদি তুমি ফায়ারফক্স ওএস ডিভাইসের উপর অ্যাপস ডিবাগ করতে চাও, এবং তুমি ফায়ারফক্স </strong> ১.২ চালাচ্ছ তোমার সবচেয়ে ভালো অপশন এখনি <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a> ব্যবহার করা ।</p> +</div> +<h2 id="ফায়ারফক্স_ডেক্সটপ">ফায়ারফক্স ডেক্সটপ</h2> +<p>তোমাকে নিশ্চিত হতে হবে যে তোমার ফায়ারফক্স ১৮ আর গঠন আছে অথবা পরে হবে ত্রুটি বিচ্যুতি দূর করার যন্ত্র।যদি তোমার ফায়ারফক্সের এইমাত্রের কপি না থেকে ,ডাউনলোড কর সর্বশেষ <a href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">Nightly</a> গঠন সকল সর্বশেষ বিষয়ের সুবিধা পেতে।</p> +<p>একদা তুমি তোমার কম্পিউটারে ফায়ারফক্সের একটি উপযুক্ত মাধ্যমের জন্য ছুটেছ, টাইপ কর, <code>about:config</code> ইউ আর এল বার এবং পরিবর্তন করো <code>devtools.debugger.remote-enabled</code> এর মানের <code>true তে।তারপরে তোমার ফায়ারফক্সের ত্রুতিবিচ্যুতি দূর করার ক্ষমতা পেতে পুনরায় শুরু করতে হবে।ফায়ারফক্স নতুন করে শুরু করার পরে</code>,ওয়েব ডেভলপের মেনুর নয়ুন একটি অপ্শন হবে,উপাদান>সংযোগ <em>.</em>..</p> +<h2 id="ডিবাগিং_এর_ক্ষমতা_অর্জন">ডিবাগিং এর ক্ষমতা অর্জন</h2> +<p>যখন <a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="Tools/Firefox OS Simulator">Firefox OS Simulator</a>ব্যবহার করা হয়(অথবা বি ২জি ডেক্সটপ),ডিবাগিং সেট করা খুব সহজ । তোমাকে সামনের দিকে অগ্রসরের জন্য কোন স্থানের দরকার নেই যেমন তুমি কর যখন একটি বাস্তব ডিভাইসের ডিবাগিং হয়।সাধারণভাবে তোমার ডিভাইসের <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a> খোলো এবং রিমুট ডিবাগিং এর ক্ষমতা অর্জন করো।</p> +<div class="warning"> + <p> নোটঃ ১০জানুয়ারী ,২০১৩ পর্যন্ত এতা ফায়ারফক্স ও এস ডিভাইসের উপর কোনো কাজ করেনি।তারিখ অনুসারে,ফায়ারফক্স ও এস ডিভাইস গঠন ডিবাগিং এ অক্ষম হয়েছে।আনুষ্ঠানিকভাবে একটি পথের তৈরি হবে তোমার নিজের গঠনের এটি পুনরায় ক্ষমতা অর্জন গঠন করতে,কিন্তু এটি এখন ও বিদ্যমান নয়।ঐটা ঘটার পরে এই দলিল হালনাগাদ হয়ে থাকবে। আর ও যোগে ,প্রক্রিয়ার বাইরে বন্ধ করার মূল্য দেয়ার সমর্থন সরিয়ে ফেলা হয়েছে।বর্তমানের জন্য ,ফায়ারফক্স ও এস সিমুলেটরে তোমার দরকার তোমার ডিবাগিং করা।</p> +</div> +<p>যদি একটি বাস্তব ফায়ারফক্স ওএস ডিভাইস ব্যবহার করা হয়, <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a> খোলো এবং :</p> +<p> . রিমুট ডিবাগিং অন করা।</p> +<p> . আউট অফ প্রসেস সমর্থন বন্ধ করা, {{bug(797627)}} ঠিক না হওয়ার পর্যন্ত। তা না করলে ,কেবল নিয়মের স্ক্রিপ্টগুলো ডিবাগ হতে পারে।</p> +<div class="note"> + <p><strong> নোটঃযদি তুমি তোমার ডিভাইস ফ্ল্যাস কর , তোমার এইসব বাহ্যিক আকার পরিবর্তনের আবার করা দরকার পরবে।</strong></p> + <p> এখন তুমি <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">use the debugger</a> করতে প্রস্তুত !</p> +</div> +<h2 id="একটি_ফায়ারফক্সের_ও_এস_ডিভাইসের_ফ্রেমের_গঠনের_জন্য_সক্ষম">একটি ফায়ারফক্সের ও এস ডিভাইসের ফ্রেমের গঠনের জন্য সক্ষম</h2> +<p> </p> +<h2 id="ফায়ারফক্স_ও_এস_গঠনের_উৎপাদনেলগিং_এর_ফ্রেম_গঠন_(উদাহরণ_হিসেবেdomxref(console.log()))_ভুলের_মাধ্যমে_অক্ষম_হয়েছে।._এটিকে_সক্ষম_করতেতোমার_ডিভাইসেরI_Developer_settings_এর_কাছে_যাও_এবং_ফ্রেমের_গঠন_সক্ষমকে_সক্ষম_করে।">ফায়ারফক্স ও এস গঠনের উৎপাদনে,লগিং এর ফ্রেম গঠন (উদাহরণ হিসেবে{{domxref("console.log()")}}) ভুলের মাধ্যমে অক্ষম হয়েছে।. এটিকে সক্ষম করতে,তোমার ডিভাইসেরI <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a> এর কাছে যাও এবং ফ্রেমের গঠন সক্ষমকে সক্ষম করে।</h2> +<p> </p> +<p>নোটঃ কিভাবে ফায়ারফক্স ও এস এ লগিং গঠন ব্যবহার করতে হয় সে সমন্ধে আরো জানার জন্য<a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> পড়ো ।</p> +<h2 id="আরো_দেখো">আরো দেখো</h2> +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging">Debugging on Firefox OS</a></li> + <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">Debugger</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings">Developer settings on Firefox OS</a></li> +</ul> 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 +--- +<div class="summary"> + <p><span class="seoSummary">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.</span></p> +</div> +<div class="note"> + <p><strong>টীকা</strong>: এন্ড্রয়েড ডেভেলপারগন এটা আগেই জেনে থাকবেন। ধাপ গুলো একই।</p> +</div> +<h2 id="আপনার_ফোন_তৈরি">আপনার ফোন তৈরি</h2> +<ol> + <li>On your phone, go to the <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer Settings</a> and check <em>Remote Debugging</em> & <em>Console Enabled</em>.</li> + <li>Make sure you phone has <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB installed</a> and working.</li> + <li>Connect your phone to your computer via USB.</li> +</ol> +<h2 id="একটি_স্ক্রীনশট_নেয়া"> একটি স্ক্রীনশট নেয়া</h2> +<p>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.</p> +<h3 id="টার্মিনাল">টার্মিনাল</h3> +<p>Open a terminal window, then enter the follwing three commands:</p> +<ol> + <li>Take the screenshot using the following command (you can change <code>screenshot.png</code> if you want to call it something else):<br> + <code>adb shell screencap -p /sdcard/screenshot.png</code></li> + <li>Pull the picture onto your computer:<br> + <code>adb pull /sdcard/screenshot.png</code></li> + <li>Remove the screenshot from your device:<br> + <code>adb shell rm /sdcard/screenshot.png</code></li> +</ol> +<p>Alternatively, you can use ffmpeg:</p> +<ol> + <li>Make sure you have ffmpeg installed: + <ol> + <li>On Mac, if you use MacPorts, you can do this with <code>sudo port install ffmpeg</code>. For homebrew, do <code>brew install ffmpeg</code>.</li> + <li>On Linux (Ubuntu/Debian), use <code>sudo apt-get install ffmpeg</code>.</li> + </ol> + </li> + <li><code>cd</code> into the <code>B2G/gaia</code> directory.</li> + <li>Use the <code>make screenshot</code> command to take a screenshot.</li> + <li>You now have a screenshot called <code>screenshot.png</code>.</li> +</ol> +<h3 id="DDMS">DDMS</h3> +<p>Open Eclipse.</p> +<ol> + <li>Open DDMS: <em>Window > Open Perspective > Other > DDMS</em>.</li> + <li>On the left side panel, in the <em>Devices</em> tab, click the <em>Screen capture</em> button.</li> + <li>A new window appears with several options; click on <em>Save</em> button to save your screenshot.</li> +</ol> +<div class="note"> + <p><strong>Note</strong>: To learn more about DDMS, have a look at the <a href="http://developer.android.com/tools/debugging/ddms.html" title="DDMS documentation">DDMS documentation</a> .</p> +</div> +<h3 id="ফোনার_বাটনের_কম্বিনেশন">ফোনার বাটনের কম্বিনেশন</h3> +<ol> + <li>Simultaneously hold down the <em>Home</em> and <em>Power</em> buttons for a few seconds. This takes a screenshot, which is saved in your Gallery.</li> + <li>Copy the picture from your SDCard to your computer using whatever method suits you best.</li> +</ol> +<h3 id="এপ_ম্যানেজারসিমুলেটর"> এপ ম্যানেজার/সিমুলেটর</h3> +<ol> + <li>Go to the <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>, connect to your phone, and navigate to the <strong>Device</strong> tab on the left.</li> + <li>Click on the <strong>Screenshot</strong> button above <em>Installed Apps</em>.</li> +</ol> 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 +--- +<p>{{Previous("Mozilla/Firefox_OS/Debugging/Intercepting_traffic_using_a_proxy")}}</p> +<div class="summary"> + <p id="Testing_in_a_Privileged_Context.3A_Shipping_your_own_Gaia_Apps">যেহেতু আপনি দেখতে পারেন ,বাতিল জাভা স্ক্রীপ্ট আপনাকে <a href="https://developer.mozilla.org/en-US/docs/WebAPI">all the shiny WebAPIs </a>এর সম্পুর্ন সুবিধা দিবে না।এই অ্যাপের কারনে একটি বিশেষ অ্যাপি ব্যবহার করতে ,ইহা রিকুয়েস্ট করে থাকে ঐ অ্যাপির সুবিধা পাওয়ার জন্য ইহার <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest">manifest</a> তে।এই অনুচ্ছেদ আগে তাদের মার্কেটপ্লেসে জমা দেয়ার আগে আপনাকে অ্যাপ ব্যবহারের সুবিধা দিবে পরীক্ষা করার জন্য।</p> +</div> +<p>বর্তমানে চলমান অ্যাপস মেটাডাটা এবং মেনিফেস্ট বিভিন্নতার মাঝে রাখতে ,আপনি এর মত ব্যবহার করতে পারেনঃ</p> +<pre class="brush: js">navigator.mozApps.getSelf().onsuccess = function(e) { + appself = e.result; +}</pre> +<p>বিভিন্ন অ্যাপের নিজের মধ্যে এই অ্যাপস মেটাডাটার সমুক্ষীন হন।</p> +<p>একটি একই নোটে,যদি আপনি ভিন্ন অ্যাপের অনুমতির জন্য দেখতে চান, টেস্ট অ্যাপে "Permissions" তে এক নজর দেখুন ,যা আসে আপনার b2g-desktop টেস্টিং গঠনের সাথে ;এটি সকল বর্তমানে ইন্সটল্ড অ্যাপের জন্য অনুমতি এনে দিবে।</p> +<p>কিছু বর্তমান ওয়েব অ্যাপি আছে যা সবসময় যেকোন অ্যাপে পাওয়া যায় না। এইসব অ্যাপি ব্যবহার করতে, আপনাকে আপনার একটি অ্যাপ ইন্সটল করতে হবে উচ্চ সুবিধার সাথে(এগুলো হল সার্টিফাইড অ্যাপ) ।এটা আপনি নিজে করুন ,আপনাকে একটি কাস্টম ভার্সন করতে হবে যা top b2g layer এর,গায়া। প্রয়োজনীয় <code>git</code> টি কাজ করে এবং<code> make</code> পরিবেশ কাজ করে থাকে।দেখুন <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a> আরো বেশি Firefox OS তে গঠন পরিবেশের জন্য।</p> +<p>আপনাকে এই ক্ষেত্রে Firefox OS প্রস্তুত করার প্রয়োজন পরেনা,কেবল গায়া।চলুন দেখি কিভাবে তারা কাজ করে থাকে ।</p> +<h2 id="গায়া_ডাউনলোডিং_এবং_গঠন"><strong>গায়া ডাউনলোডিং এবং গঠন</strong></h2> +<p>প্রথমে আপনাকে গায়া ডায়নলোড করতে হবে তারপরে আপনাকে ইহা গঠোন করতে হবে।ইটা একটী প্রোফাইল তৈরি করতে হবে যা আপনি b2g desktop এরসাথে লোড করতে পারেন।এগুলো নিচের নির্দেশ অনুযায়ী ব্যবহার করে প্রস্তুত করা যায়ঃ</p> +<pre class="brush: bash">$ git clone https://github.com/mozilla-b2g/gaia +$ cd gaia +$ make +</pre> +<div class="warning"> + <p><strong>ওয়ার্নিংঃগায়া গঠন করুন </strong>প্রথমবারের জন্য যা <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> ডাউনলোড করতে প্রয়োজন যা প্রায় ৫০০এম বি,সুতরাঙ্গিহা নেয় কিছু সময় এবং অনেক জায়গা ।</p> +</div> +<p>এটা আপনার জন্য একটি স্ট্যান্ডার্ড গায়া গঠন করবে ,সুতরাং এটা কাজ করার জন্য প্রস্তুত।</p> +<h3 id="একটি_কাস্টম_অ্যাপ_প্রস্তুত_করা"><strong>একটি কাস্টম অ্যাপ প্রস্তুত করা</strong></h3> +<p>যখন XULRunner ডাউনলোড করা হয়ে থাকে ,আমি সুপারিশ করেছিলাম <a href="https://github.com/mozilla-b2g/gaia">reading the Gaia source code</a>।আপনিও আপনার কাস্টম অ্যাপ প্রস্তুত পাবেন যখন ডাউনলোড প্রক্রিয়ায় উন্নতি হবে।</p> +<p>সকল অ্যাপ যা আসে গায়া (সেটিংস,কন্টাক্ট,ব্রাউজার,ইত্যাদি) থেকে সেগুলো অ্যাপ/ডিরেক্টরিতে জমা থাকে ।এটা মনে করা হয়ে থাকে যে আপনার উচ্চ সুবিধা যুক্ত অ্যাপও সেখানে যাবে । অনুচ্ছেদের এই সুবিধায় ,উদাহরন হিসেবে অ্যাপকে বলা হয়ে থাকে <a href="https://github.com/freddyb/allperms"><em>allperms</em></a> যা গিথাবে সবসময় পাওয়া যাবে।</p> +<p>আপনার গায়া কোড ট্রিতে অ্যাপ/ডিরেক্টরিতে পরিবর্তন করুন এবং উদাহরন অ্যাপটি এতে ক্লোন করুনঃ</p> +<pre>cd apps +git clone <span class="nolink">https://github.com/freddyb/allperms.git</span></pre> +<p>একদা আপনার প্রথম গায়া গঠন তৈরি হয়ে গিয়েছিল <code>xulrunner-sdk</code> ডাউনলোড করা হয়ে থাকে ,আপনি এটাকে অ্যাপ/ডিরেক্টরিতে <code>allpermsএরসাথে গায়ার পুনরায় গঠন করতে পারেন।কিন্তু চিন্তা করবেন না,এই গঠন আরো দ্রুত হবে যেহেতু বেশির ভাগ জিনিস ইতিমধ্যে সম্পুর্ন হয়ে গেছে।এখন কেবল করবেনঃ</code></p> +<pre>make</pre> +<h2 id="Load_B2G_desktop_ব্যবহার_করে_নতুন_প্রোফাইল"><span class="mw-headline">Load B2G desktop ব্যবহার করে নতুন প্রোফাইল</span></h2> +<h5 id="B2G_Desktop_আসে_দুটি_নতুন_এক্সেকিউবল_নিয়েঃ_b2g_এবংand_b2g-binআমরা_পরেরটি_জানিযেহেতু_এটি_বিশেষভাবে_দেখানোর_জন্য_লাইন_আর্গুমেন্ট।"><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">B2G Desktop</a> আসে দুটি নতুন এক্সেকিউবল নিয়েঃ <code>b2g</code> এবংand <code>b2g-bin</code>:আমরা পরেরটি জানি,যেহেতু এটি বিশেষভাবে দেখানোর জন্য লাইন আর্গুমেন্ট।</h5> +<div class="note"> + <p><strong>নোটঃদেখুন </strong><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Using the B2G desktop client</a> , B2G Desktop অ্যাপলিকেশন নিয়ে আরো তথ্যের জন্য</p> + <p><code>b2g</code> এক্সেকিউবল লোড করুন, the <code>-profile</code> অপ্সহন প্রদান করে গায়া প্রোফাইল পথ দিয়ে যা আপনি কেবল তৈরি করেছেন।</p> +</div> +<h3 id="Linux">Linux</h3> +<pre class="brush: bash">$ b2g-bin -profile /path/to/gaia/profile +</pre> +<h3 id="Mac_OS_X">Mac OS X</h3> +<p>Mac OS X তে,শুরু করার নির্দেশ যা গায়া ডিরেক্টরি থেকে (মনে করা হয়ে থাকে আপনি ইন্সটল করবেন B2G স্ট্যান্ডার্ড অ্যাপলিকেশন ফোল্ডারে) নিচের মতঃ</p> +<pre class="brush: bash">$ /Applications/B2G.app/Contents/MacOS/b2g-bin -profile /path/to/gaia/profile +</pre> +<h3 id="Windows">Windows</h3> +<p>TBD</p> +<h3 id="What_to_expect">What to expect</h3> +<p>মনে করা হয় যে এটা কাজ ছে ,আপনাকে lock screen দেখা উচিত:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5059/lockscreen.png" style="width: 320px; height: 480px;"></p> +<p> <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client#Command_line_options" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client#Command_line_options">command-line options available</a> হল কিছু দরকারি জিনিস যা ব্যবহার করা হয়ে থাকে B2G Desktop তে।</p> +<div class="note"> + <p><strong>নোটঃএই প্রোফাইল শুরু হয়ে থাকে </strong><strong>default settings</strong> এর সাথে আবার । কোন কাস্টমাইজেশন আপনার আছে যাতে আপনার টেসটিং সেট আপ আবারো হবে ;এটি আরো যোগ করবে <a href="/en-US/docs/Marionette" title="/en-US/docs/Marionette">Marionette</a> এর কনফিগারেশন এবং সার্টিফিকেট।</p> +</div> +<h2 id="Done">Done</h2> +<p>আপনারYour <code>allperms</code>অ্যাপ এখন ইন্সটল করা উচিত এবং সকল সম্ভব অনুমতি নেয়া হয়ে থাকে।</p> +<p>এখন আপনাকে একমাত্র বারবার বলা হয়ে থাকে Marionette ধাপে <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging_and_Security_Testing_with_Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS/Debugging_and_Security_Testing_with_Firefox_OS">Debugging and security testing with Firefox OS</a> থেকে একটি টেস্টিং পরিবেশ এর জন্য যা WebAPIs এর সুবিধা হয়ে থাকে ।</p> +<p>{{Previous("Mozilla/Firefox_OS/Debugging/Intercepting_traffic_using_a_proxy")}}</p> 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 +--- +<div class="note"> + <p><b>দ্রষ্টব্য</b>: গিকসফোন সহ সকল ডেভেলপার প্রিভিউ ফোনকে হালনাগাদ করা এবং সাজানোর জন্য একটি নতুন এবং আরো বিস্তারিত গাইড রয়েছে । এর জন্য , <a href="/bn-BD/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">আপনার ফায়ারফক্স ওএস ডেভেলপার প্রিভিউ ফোন / গিকসফোনকে হালনাগাদ করুন এবং সাজান </a> - এই নিবন্ধটি আপনার পড়া উচিত ।</p> +</div> +<p>আপনার যদি <a href="http://www.geeksphone.com/" style="line-height: 1.5;" title="http://www.geeksphone.com/"> গিকসফোনের </a><span style="line-height: 1.5;"> ডেভেলপার প্রিভিঊ ফোন থেকে থাকে এবং আপনি যদি আপনার ফোনের বিদ্যমান সংস্করণটিকে হালনাগাদ করতে চান , তাহলে নিচের নির্দেশনাগুলো অনুসরণ করুন ।এই নির্দেশনা গুলো শুধুমাত্র গিকসফোন কিওন</span><span style="line-height: 1.5;"> এবং গিকসফোন পিক মডেলের জন্য কাজ করবে ।</span></p> +<ol> + <li>আপনার অন্তত ৫০ ভাগ ব্যাটারি রয়েছে , এটি নিশ্চিত করুন ।এটা অত্যন্ত গুরুত্বপূর্ন , কেননা হালনাগাদ করার সময় যদি আপনার ফোন বন্ধ হয়ে যায় , এটিকে আপনার ফেরত দেওয়ার প্রয়োজন হতে পারে ।</li> + <li>ইউএসবির সাহায্যে ফোনটি যুক্ত না থাকা অবস্থায় , "সেটিংস" নির্বাচন করুন , এরপর "ডিভাইসের তথ্য" , এরপর "আরো তথ্য" , এরপর "ডেভেলোপার এবং এরপর <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings#The_Developer_panel" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings#The_Developer_panel">রিমোট ডিবাগিং</a> এ আলতো টোকা দিন ।</li> + <li><a href="http://downloads.geeksphone.com/drivers/usb_driver.zip" title="http://downloads.geeksphone.com/drivers/usb_driver.zip">ইউএসবি ড্রাইভার</a> ডাউনলোড করুন এবং এটিকে আনজিপ করুন ।এটিকে আপনি কোথায় ডাউনলোড করেছেন , তা মনে রাখুন কেননা পরে এটার প্রয়োজন হতে পারে ।</li> + <li>একটি ইউএসবি ক্যাবল ব্যবহারের মাধ্যমে এটিকে আপনার কম্পিউটারের সাথে যুক্ত করুন । আপনি যদি উইন্ডোজ ব্যবহারকারী হয়ে থাকেন , এটি হয়ত আপনাকে কিছু ড্রাইভার ইন্সটল করার জন্য বলতে পারে । উইন্ডোজ আপডেটের সাহায্যে যদি ড্রাইভার না পাওয়া যায় , তাহলে ৩ নং ধাপে আপনার আনজিপ করা ফোল্ডারটিকে ব্যবহার করতে পারেন।</li> + <li>আপনার ফোনের (কিওন অথবা পিক) জন্য সঠিক ইমেজ ফাইলটি ডাউনলোড করুন । গিকসফোনের <a href="http://downloads.geeksphone.com/" title="http://downloads.geeksphone.com/">ডাউনলোড পেইজ</a>এ সকল ধরণের ইমেজ রয়েছে</li> + <li>ইমেজ ফাইলটিকে একটি ফোল্ডারে আনজিপ করুন , ফোল্ডারে প্রবেশ করুন এবং স্ক্রিপ্টটিকে চালান। লিনাক্সের জন্য Flash.sh, উইন্ডজের জন্য Flash.bat এবং ম্যাকিনটসের জন্য flash_mac.sh (আপনার <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">অ্যান্ড্রয়েড SDK</a> প্রয়োজন হতে পারে) ।</li> + <li>ডিভাইসটির রিবুট হওয়া এবং এরপর প্রথম বারের সেটআপ না দেখানো পর্যন্ত অপেক্ষা করুন ।</li> +</ol> +<p><br> + যদি আপনার কোন সমস্যা থাকে , তাহলে সাহায্য পাওয়ার জন্য আপনি <a href="http://forum.geeksphone.com/" title="http://forum.geeksphone.com/"> গিকসফোন ফোরামে </a> পোস্ট করতে পারেন । </p> 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 +--- +<div class="summary"> + <p>ফোনে, <code><a href="/en-US/docs/Mozilla/Firefox_OS/Architecture#The_userspace_process_architecture" title="/en-US/docs/Mozilla/Firefox_OS/Architecture#The_userspace_process_architecture">বি২জি</a></code> অ্যাপ্লিকেশনটি (যা ফায়ারফক্স ওএস- এর এপিআইগুলোকে অন্যগুলোর ভিতর প্রদান করে) শুরু হয় <code>/system/bin/b2g.sh</code> স্ক্রিপ্টের মাধ্যমে। ফায়ারফক্স ওএস- এর ব্যবহার পরিবর্তন করার জন্য আপনি এই স্ক্রিপ্টটি নিজের মত করে সাজাতে পারবেন, এবং সেটা কিভাবে করবেন তা এই পরিচ্ছেদে বর্ণিত রয়েছে।</p> +</div> +<h2 id="ইন্ভাইরোন্মেন্ট_ভেরিয়েবেলগুলো_স্থাপন_করুন">ইন্ভাইরোন্মেন্ট ভেরিয়েবেলগুলো স্থাপন করুন</h2> +<p>যদি আপনি বি২জি চালানোর জন্য একটি ইন্ভাইরোন্মেন্ট ভেরিয়েবেল স্থাপন করতে চান, তাহলে আপনি নিম্নক্তগুলো অনুসরণ করতে পারেন:</p> +<pre class="brush: bash">adb shell stop b2g +adb shell "export ENV_VAR=value && /system/bin/b2g.sh" +</pre> +<p>যদি আপনি একই ইন্ভাইরোমন্ট ভেরিয়েবেলগুলো সব সময় ব্যবহার করতে চান, তাহলে আপনি <code>b2g.sh সম্পাদন করতে পারেন যা পরের শাখাতে বর্ণিত রয়েছে।</code></p> +<h2 id="b2g.sh_সম্পাদন">b2g.sh সম্পাদন</h2> +<p>ডিবাগিং এর জন্য, আপনি চাইলে তথ্যের মধ্যে ঢোকার অথবা অন্যথা প্রভাবিত করতে কিভাবে <code>b2g</code> প্রোগ্রাম চলে তার জন্য ইন্ভাইরোন্মেন্ট ভেরিয়েবেলগুলো স্থাপন করতে পারেন। আপনি ইহা করতে পারেন <code>b2g.sh</code> স্ক্রিপ্ট সম্পাদনের মাধ্যমে। ফোনে ফাইলটি সম্পাদন করার জন্য সেখানে কোন টুলস নেই, অতএব আপনাকে প্রথমে ইহা আপনার কম্পিউটারে কপি করতে হবে।</p> +<ol> + <li>ফোনটিকে আপনার কম্পিউটারের সাথে সংযুক্ত করুন, একটি টার্মিনাল উইন্ডো খুলুন, এবং স্ক্রিপ্ট সম্পাদন করতে অনুসারিত আদেশ নির্বাহ করুন: + <pre>adb pull /system/bin/b2g.sh</pre> + </li> + <li>আপনার ইচ্ছানুযায়ী পরিবর্তন আনতে স্ক্রিপ্টটি সম্পাদন করুন। উদাহরণ সরূপ, ধরুন আপনি কিছু লগিং আউটপুট (যাতে একটি ডিবাগ বানানো দরকার হয়) দেখতে চাচ্ছেন, তারপর আপনি হয়তো কিছু যুক্ত করতে চাচ্ছেন যেমন: + <pre>export NSPR_LOG_FILE=/data/local/tmp/mylog.txt +export NSPR_LOG_MODULES=Layers:5 +</pre> + </li> + <li>আপনার হালনাগাদ <code>b2g.sh</code> স্ক্রিপ্টটি ফোনে সেভ করতে অনুসারিত আদেশগুলো চালান এবং পুনরায় <code>b2g</code> চালু করুন: + <pre>adb shell stop b2g +adb remount +adb push b2g.sh /system/bin +adb shell chmod 0755 /system/bin/b2g.sh +adb shell start b2g +</pre> + </li> +</ol> +<div class="note"> + <p><strong>Note:</strong> <code>/data/local/tmp</code> হল ফাইলসিস্টেম এর শুধুই একমাত্র জায়গা যেখানে বিষয়বস্তু প্রক্রিয়াগুলো দ্বারা লেখাযোগ্য।</p> +</div> +<h2 id="আরও_দেখুন">আরও দেখুন</h2> +<ul> + <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko" title="/en-US/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko">ফায়ারফক্স ওএস তৈরি এবং সংস্থাপন করা</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Architecture" title="/en-US/docs/Mozilla/Firefox_OS/Architecture">ফায়ারফক্স ওএস- এর স্থাপত্য সারসংক্ষেপ</a></li> + <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko" title="/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko">ফায়ারফক্স ওএস- এ ডিবাগিং</a></li> +</ul> +<p> </p> 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 +--- +<div class="summary"> + <p><strong>এই ডকুমেন্ট ব্যাখ্যা করে যে কাস্টম কীবোর্ড কিভাবে তাদের লেআউট নিজস্ব ভাষা/হস্তলিপির মাধ্যমে ফায়ারফক্স ওএস'</strong><strong>র উপর ধারণ করে ।</strong></p> +</div> +<h2 id="গায়া_কীবোর্ড_অ্যাপ্লিকেশন_এবং_সিস্টেম_স্থাপত্য-এর_অবস্থা">গায়া কীবোর্ড অ্যাপ্লিকেশন এবং সিস্টেম স্থাপত্য-এর অবস্থা</h2> +<p>দুটো গুরুত্বপুর্ন বৈশিষ্ট্য ফায়ারফক্স ওএস , যেটা অক্টোবর ২০১৩-তে বাস্তবায়িত করা হয়েছে।</p> +<ul> + <li>একটি পতাকা বানায় যা কীবোর্ড/ স্পিলছেক অভিধান অন্তর্ভুক্ত করে ভিতরে ডিফল্টে ভাবে গায়া কীবোর্ড অ্যাপ ( দেখ{{ bug (884752)}} ) বানায় ।</li> + <li>একটি ওএস-লেভেল তুলে ধরে যা ব্যবহারকারিকে অনুমতি দেয় যে ফায়ারফক্স বাজার থেকে তৃতীয় পক্ষ কীবোর্ড অ্যাপ্লিকেশনের মাধ্যমে ইন্স্টল করতে পারবে । (দেখ {{bug(816869)}})। এটা হবে শুরু হবে ফায়ারফক্স ওএস ১.৪ থেকে</li> +</ul> +<p>একটি নতুন কীবোর্ড লেআউট-এর সাথে উপরে আসবে, আপনি একটি লেআউটে একটি করে গায়া ফাইল রাখতে পারবেন, কীবোর্ড অ্যাপ্লিকেশন বানানো হয় যা একটি কনফিগে ব্যবহার করে, বা আপনার নিজের কীবোর্ড অ্যাপ্লিকেশন-এর সাথে আসে যেটা ফোন-এ ইন্স্টল করে রাখতে পারেন।</p> +<h2 id="কিভাবে_একটি_কীবোর্ড_আপ্লিকাশন_বানাতে_হবে">কিভাবে একটি কীবোর্ড আপ্লিকাশন বানাতে হবে</h2> +<p><span style="font-size: 16px;">আপনি একটি টেমপ্লেট হিসেবে গায়া-এর বিল্ট-ইন কীবোর্ড অ্যাপ্লিকেশন ব্যবহার করতে পারেন, বা এটা শাখাবিভক্ত করতে পারেন। প্রাথমিক ধারনা হচ্ছে:</span></p> +<ul> + <li> + <p>প্রধান ফাইলে, ভূমিকা সম্পত্তিতে ইনপুট হিসেবে আপনার অ্যাপ্লিকেশন ঘোষনা করবে।</p> + </li> + <li> + <p>নিশ্চিত করুন যে আপনি নির্দিষ্ট ইনপুট করার অনুমতি পেয়েছেন ।</p> + </li> +</ul> +<p>এর পর,আপনি আপনার কিবোর্ড ইনস্টল করতে পারেন, এবং ব্যবহারকারী একটি ইনপুট ক্ষেত্রে নিবদ্ধ হয় যখনই এটা পর্দার নীচে অর্ধেক উপর দেখা যাবে। এ থেকে সমস্যাগুলি মোকাবিলা করা যেতে পারে:</p> +<ul> + <li>পুরাতন ,<span style="font-size: 16px;">ক্লাসিক উইন্ডো</span>.রিচাইস <span style="font-size: 16px;">ব্যবহার করতে করতে হবে ।</span></li> + <li><span style="font-size: 16px;">নতুন, চকচকে ন্যাভিগেটর ব্যবহার করতে হবে এপিআই ইনপুট-এ রূপান্তরিত করতে হতে</span>; <span style="font-size: 16px;">খুঁটিনাটী-এর জন্য মোজিলা</span> <a href="https://wiki.mozilla.org/WebAPI/KeboardIME"><span style="font-size: 16px;">wiki keyboardime api পাতা</span></a> দেখতে হবে ।</li> +</ul> +<div class="note"> + <p>টিবিডি: নমুনা কোড এবং/অথবা একটি ছোট টেমপ্লেট অ্যাপ্লিকেশন দেয়।</p> +</div> +<h2 id="কিভাবে_গায়া_কীবোর্ড_আপ্লিকেশনে_আপানার_টেমপ্লেটে_কাস্টম_লেআউট_যোগ_করবেন">কিভাবে গায়া কীবোর্ড আপ্লিকেশনে আপানার টেমপ্লেটে কাস্টম লেআউট যোগ করবেন</h2> +<p><a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/keyboard/CONFIGURE"> কীবোর্ডে অনেক বেশি তথ্য-এর জন্য খুঁটিনাটী কনফিগার করে দেখুন</a> । ভাষার উপরে আপনি একটি অভিধান যোগ করতে, বা একটি ইন্টারেক্টিভ আইএমই অন্তর্ভুক্ত করতে ( এশিয়ার ভাষার জন্য ) পারেন।</p> +<h3 id="বানান_যাচাই_শব্দ_শুপারিশ_করুন">বানান যাচাই /শব্দ শুপারিশ করুন</h3> +<div class="note"> + <p>টিবিডি</p> +</div> +<h3 id="এশিয়ান_আইএমই">এশিয়ান আইএমই</h3> +<p>পূর্ব এশিয়ান ভাষা (<a href="https://en.wikipedia.org/wiki/CJK">চীনের, জাপানী, আর কোরিয়ান</a>) একটি মোটামুটি জটিল স্ক্রিপ্ট যা হাজার হাজার চরিত্র সংশ্লিষ্ট করে ব্যবহার করা হয়েছে। যেহেতু এত ভাষা তাই এর ব্যবহারের জন্য একটি হর্ডওয়্যার বা সফ্টওয়ার কীবোর্ড-এর উপরে এত হাজার হাজার চাবি রাখা সম্ভব নয়, এইটি ছোট করার জন্য ব্যবহারকারি একটি ইন্ডেক্সিং প্রোগ্রাম-এ <a href="https://en.wikipedia.org/wiki/Input_method">ইনপুট</a> করেন , অথবা আইএমই এর চিহ্ন রূপান্তরের সারিতে নির্বাচিত হয় ।<br> + <br> + কিভাবে চিহ্ন রূপান্তরিত করে এবং"স্মার্ট" আইএমই পদ্ধতির উপর নির্ভর করে নির্বাচিত হতে হবে , বাস্তবায়ন নিজেই, এবং যা প্রায়ই<a href="https://en.wikipedia.org/wiki/Natural_language_processing"> এনএলপি বিজ্ঞানের</a>, সুযোগ এই নথির বাইরে । এটি একটি মোবাইল ডিভাইস যাতে মেমরি সংরক্ষণ করা হয়, উল্লেখ্য <a href="/en-US/docs/IndexedDB">IndexedDB</a>, এর মধ্যে ডাটাবেস অংশ রাখা বাঞ্ছনীয় ।</p> +<h4 id="আইএম_গায়া_কীবোর্ড_অ্যাপটি_ইঞ্জিন_ইন্টারফেস">আইএম গায়া কীবোর্ড অ্যাপটি ইঞ্জিন ইন্টারফেস</h4> +<p>আপনার কাছে অক্ষর রূপান্তরের জন্য সহজলভ্য একটি আইএমই লাইব্রেরি আছে । আপনার গায়া কীবোর্ড অ্যাপ্লিকেশন-এর মধ্যে নির্দিষ্ট ইন্টারফেস ব্যবহার করে লেআউট আর আউটপুট চরিত্র থেকে চিহ্ন দরকার হতে পারে । <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/keyboard/js/keyboard.js#L32-L115"><span style="font-size: 16px;">চলতি এপিআই গিটহাব-এর ওপরে লিপিবধ্ধ করা হয় ।</span></a></p> +<p>আমরা বাস্তবায়ন গায়া-এর মধ্যে এই এপিআই আরো বিশোধন করতে আমন্ত্রন করি ।</p> +<h4 id="আপনার_লেআউট-এর_সঙ্গে_আপনার_আইএম_ইঞ্জিনের_কাজ_করুন">আপনার লেআউট-এর সঙ্গে আপনার আইএম ইঞ্জিনের কাজ করুন<br> + </h4> +<p><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">আইএম</span> <span class="hps">ইঞ্জিন</span> <span class="hps">আপনার</span> <span class="hps">কীবোর্ড লেআউটের</span> <span class="hps">সঙ্গে কাজ</span> <span class="hps">করার জন্য</span><span>:</span></span></p> +<ol> + <li>আগের সেকশনের বর্ণনা অনুযায়ী layout.js একটি নতুন লেআউট রাখুন ।</li> + <li><code>imEngine </code>প্রপার্টির সঙ্গে আইএম ইঞ্জিন রেফারেন্স করে । আপনার লেআউট সক্রিয় করা হলে, কীবোর্ড অ্যাপটি কীবোর্ড / JS / IMEs / <imEngine> / <imEngine>.js এ অবস্থিত স্ক্রিপ্ট লোড শুরু হবে.</li> + <li>প্রাপ্ত স্ক্রিপ্ট গুলি লোড এবং <code>init</code>'d হলে কি / অক্ষর এর এপিআই গুলি সেট আপ করুন পাঠিয়ে দিন ।</li> + <li>আপনি ব্যবহারকারীর ইনপুট প্রতিক্রিয়ায় যাহা চান না কেন , যখন ব্যবহারকারি কীবোর্ড-এর ওপরে যেকোনো চাবি টোকা মারলেন, এটা সাধারনত আইএম ইন্জিনে পাঠানো যেতে পারে ।</li> +</ol> +<h4 id="পরিচিত_বাস্তবায়ন">পরিচিত বাস্তবায়ন</h4> +<ul> + <li><a href="https://github.com/timdream/jszhuyin">JSZhuyin</a> হচ্ছে গায়া কীবোর্ড এশিয়ান আইএম ইন্জিন-এর প্রথম বাস্তবায়ন, সনাতন চীনের একত্রীভূত করা zhuyin আইএম -এর জন্য।</li> + <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/keyboard/js/imes/jskanji">JSKanji</a> এটা হচ্ছে একটি আদিরূপ আইএম ইন্জিন যা লেখা হয়েছে জাপানীদের জন্য।</li> + <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/keyboard/js/imes/jspinyin">JSPinyin</a> এটা সহজ করা হয়েছে চীনার লেখার জন্য আর পিনিয়িন চিহ্ন দ্বারা টেপিং এর কাজ করছে।</li> + <li><span style="font-size: 16px;">একটি প্রদর্শন হিসেবে</span>, <a href="http://chewing.csie.net/">Chewing</a>, <span style="font-size: 16px;">সনাতন চীনার জন্য একটি সি/সি++ ওপেন সোর্স zhuyin আইএম,</span> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=845685"><span style="font-size: 16px;">emscripten-এর সাথে cross</span>-compiled</a> <span style="font-size: 16px;">হলো আর গায়া কীবোর্ড-এর সাথে সংযোগ করা হলো।</span></li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=835261">JSHangul</a> <span style="font-size: 16px;">এটা হচ্ছে কোরিয়ান-এর জন্য একটি আদিরূপ আইএম ইন্জিন, এবং বর্তমানে উন্নয়ন হচ্ছে</span> ।</li> +</ul> +<h2 id="আলোচনা_এবং_কিউএ">আলোচনা এবং কিউএ</h2> +<p><span style="font-size: 16px;">দয়া করে </span><a href="https://lists.mozilla.org/listinfo/dev-gaia">ডেব-গায়া</a> <span style="font-size: 16px;">মেইলিং লিষ্ট-এর কাছে বা আইআরসি.মজিলা.ওআরজি -এর ওপরে # গায়া চ্যানেলে আসেন। # <span style="font-size: 16px;">মোজিলা</span>- তাইওয়ান হচ্ছে এই বিষয়-এর জন্য সত্যিকার অর্থে চীনা ভাষার চ্যানেল।</span><br> + </p> 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 +--- +<div class="summary"> + <p><span class="seoSummary">এই নিবন্ধে গায়া, বিটুজি এবং Firefox OS প্রজেক্ট এর বাগ রিপোর্ট সম্পর্কে নির্দেশনা দেয়া হয়েছে।</span></p> +</div> +<h2 id="বাগজিলা">বাগজিলা</h2> +<p>As with most projects in Mozilla, we use <a href="/en-US/docs/Mozilla/Bugzilla">Bugzilla</a> for bug and issue status tracking. You can file bugs to <a href="https://bugzilla.mozilla.org/">bugzilla</a> when you found bugs — we have a <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox%20OS">separate product for Firefox OS</a>, which contains components for topics falling under <a href="/en-US/Firefox_OS/Platform/Gaia">Gaia</a>, <a href="/en-US/Firefox_OS/Platform/Gonk">Gonk</a> and Firefox OS <a href="/en-US/docs/Mozilla/Gecko">Gecko</a>. You should use this component to file bugs against Firefox OS, B2G, Gaia, etc.</p> +<div class="note"> + <p><strong>Note</strong>: The Mozilla <a href="https://wiki.mozilla.org/B2G/QA">B2G QA Wiki</a> page also has some useful resources on handling Firefox OS bugs; the most useful pages are <a href="https://wiki.mozilla.org/B2G/QA/Bugzilla">Bugzilla Usage</a> and <a href="https://wiki.mozilla.org/Bugmasters/Projects/FirefoxOS">Incoming bug triage for Firefox OS</a>.</p> +</div> +<h3 id="বাগ_ফাইল_করা">বাগ ফাইল করা</h3> +<p>To file an effective bug, you can follow the instructions at <a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines">Bug writing guidelines</a>; you'll also find further details below.</p> +<h3 id="আবশ্যিক_এবং_ঐচ্ছিক_ফিল্ড">আবশ্যিক এবং ঐচ্ছিক ফিল্ড</h3> +<p>When filing a new bug, some fields are mandatory:</p> +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><strong>ফিল্ড</strong></th> + <th scope="col"><strong>বর্ণনা</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>Component</td> + <td>Choose the category the bug should belong to. If you have no idea which category the issue should be, You can put it in "General".</td> + </tr> + <tr> + <td>Summary</td> + <td>Give a summary to briefly describe the bug.</td> + </tr> + <tr> + <td>Description</td> + <td>Describe 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).</td> + </tr> + </tbody> +</table> +<p>The following fields are optional:</p> +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><strong>ফিল্ড</strong></th> + <th scope="col"><strong>বর্ণনা</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>Attachment</td> + <td>Any attachment that can help to analyse the bug. Videos, pictures, testcases or logs are good for analyzing.</td> + </tr> + <tr> + <td>Depends/Block</td> + <td>Show the dependency between bugs.</td> + </tr> + <tr> + <td>Keywords</td> + <td>Keywords for bugzilla. Specific groups will use it for tracking.</td> + </tr> + <tr> + <td>Whiteboard</td> + <td>Contains tags. Add any tag to it for tracking. You shouldn't remove others' tags without permission.</td> + </tr> + <tr> + <td>See Also</td> + <td>Sometimes, two issues are related and you can specify this here.</td> + </tr> + <tr> + <td>Flags</td> + <td>Flags 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.</td> + </tr> + <tr> + <td>Security</td> + <td>If 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.</td> + </tr> + </tbody> +</table> +<p>To find more information on bugzilla fields, you can view the <a href="https://bugzilla.mozilla.org/page.cgi?id=fields.html">Bugzilla Fields</a> page on Bugzilla.</p> +<h3 id="সাধারণ_কীওয়ার্ড">সাধারণ কীওয়ার্ড</h3> +<p>The following table provide information on common keywords you'll see used in Firefox OS bugs.</p> +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><strong>কীওয়ার্ড</strong></th> + <th scope="col"><strong>বর্ণনা</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>meta</td> + <td>Indicates 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.</td> + </tr> + <tr> + <td>qablocker</td> + <td>Use 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.</td> + </tr> + <tr> + <td>qawanted</td> + <td>Use 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.</td> + </tr> + <tr> + <td>regression</td> + <td>This 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.</td> + </tr> + <tr> + <td>regressionwindow-wanted</td> + <td>Indicates 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.</td> + </tr> + <tr> + <td>steps-wanted</td> + <td>Highlights a bug that would greatly benefit from someone identifying the steps to reproduce it.</td> + </tr> + <tr> + <td>verifyme</td> + <td>Means 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 <em>Fixed</em> is correct, mark the <em>Status</em> as <em>Verified</em>.<br> + <br> + You should always indicate the build/OS/platform(s) used to verify the bug in the bug comments, before you change the <em>Status</em> to <em>Verified</em>. 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 <em>Verified</em>. All platforms must be checked before moving <em>Status</em> to <em>Verified</em>.<br> + <br> + 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.</td> + </tr> + </tbody> +</table> +<div class="note"> + <p><strong>নোট</strong>: For more information on handling bugs during Gaia development, read <a href="/en-US/Firefox_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a>.</p> +</div> +<p> </p> 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 +--- +<p><strong>এই বিভাগটিতে রয়েছে বিভিন্ন ক্ষেত্রের ডকুমেন্টশন যার মধ্যে রয়েছে অ্যাপ বানানো অথবা লিখাকালীন সময় ফায়ারফক্স ওএস অভিজ্ঞতার পরিবর্তন/নিজের মতো করে সাজানো, এবং আরও রয়েছে আপনি কিভাবে প্লাটফর্ম ডেভেলপের জন্য সাহায্য করতে পারবেন।</strong></p> +<p><strong>গায়া উন্নয়নে কুইকস্টার্ট গাইড</strong></p> +<p>গায়া ফায়ারফক্স ওস'র সামনে শেষ পর্যন্ত ওয়েব অ্যাপস হিসেবে সাজানো হয়েছে। আপনি পর্দায় দেখতে পাবেন ফায়ারফক্স ওএস'র অপারেটিং সিস্টেমে সবকিছু খোলা ওয়েব প্রযুক্তি হিসেবে ব্যবহার করে তৈরি করা হয়েছে । এইতি মূল পর্দায় রয়েছে এবং সমস্ত ডিফল্ট অ্যাপ্লিকেশনেও রয়েছে । গায়া পরিবর্তন শুরু করতে এই সহায়িকা একটি দ্রুত এবং সহজ গাইড হিসেবে রয়েছে।</p> +<dl> + <dt> + <a href="/en-US/Firefox_OS/Platform/Gaia/Build_System_Primer">সিস্টেমের</a> প্রথম পাঠ তৈরি করুন</dt> + <dd> + + <p style="margin-left: 40px;">এই আনুচ্ছেদটি গায়া এর বিল্ড সিস্টেম কিভাবে কাজ করে তা ব্যাখ্যা করে,এতে ম্যাকফাইল সংযুক্ত রয়েছে,<span class="gt-baf-back gt-baf-hl">প্রক্রিয়া </span>নির্মিত হচ্ছে, পরিবেশ পরিবর্তিত হচ্ছে এবং <span style="font-size: 16px;">সম্ভ্যাব্য <span style="font-size: 16px;">কাস্টমাইজেশনস </span></span>।</p> + <p style="margin-left: 40px;"><strong>গাইয়া হ্যাকিং</strong></p> + </dd> +</dl> +<p style="margin-left: 40px;">এই অনুচ্ছেদটি গায়া'র সকল বিষয়বস্ত পরিমিত করতে সহায়তা করে ।</p> +<h2 id="কাস্টমাইজেশনের_সাথে_দাখিল_করুন"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file"><span style="font-size: 16px;">কাস্টমাইজেশনের সাথে দাখিল করুন</span> </a></h2> +<dl> + <dt> + <span style="font-size: 16px;">মার্কেট গাইড কাস্টমাইজেশন</span></dt> + <dd> + <table> + <tbody> + <tr> + <td> </td> + <td> + <table> + <tbody> + <tr> + <td> + <p>বাজার <span style="font-size: 16px;">কাস্টমাইজেশনস </span>আপনাকে build-টাইম কাস্টমাইজেশান নির্দেশ দেয় (উদাহরনস্বরূপ-এর, অ্যাপ্লিকেশন আপনার বানানোতে অন্তর্ভুক্ত থাকা উচিত) যা আলাদা ডিরেক্টরিতে উল্লেখ করতে অনুমতি দেয় মূল গায়া রেপও বদলানো ব্যতীত । আপনি স্বতন্ত্র ডিরেক্টরিতে আপনার নিজের <span style="font-size: 16px;">কাস্টমাইজেশনস </span>অন্তর্ভুক্ত করতে পারেন বা সে preexisting ডিরেক্টরি ব্যবহার করতে পারেন যা উৎস-এর সাথে থাকে। এই <span style="font-size: 16px;">কাস্টমাইজেশনস </span>অপশন বানানোর সাথে উল্লেখ করা হয়। এই অনুচ্ছেদে আমরা খুঁটিনাটির দিকে তাকাই যেখানে এই <span style="font-size: 16px;">কাস্টমাইজেশনস </span>করা হয়েছে।</p> + <p><span style="font-size: 16px;">হোষ্ট ফাইল নতুনভাবে</span> পরিবর্তন</p> + <p>একটি গাইড কি ফায়ারফক্স ওএস হোষ্টকে ফাইল বদলানো দ্বারা অর্জন করা হয় ।</p> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </dd> + <dd> + যেভাবে নিজের মতো করে সাজানো যায় এবং ফায়ারফক্স ওএস দ্বারা পরিবর্তিত হয়। দাখিল করুন।</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS/Customizing_the_keyboard">কীবোর্ডে নিজের মতো করে ফায়ারফক্স ওএস অ্যাপ্লিকেশন সাজানt</a></dt> + <dd> + এই গাইড দেখায় যে কিভবে আপনার ফায়ারফক্স ওএস অ্যাপ্লিকেশনে কীবোর্ড থেকে নিজের মত করে সাজাবেন</dd> + <dt> + <a href="/en-US/docs/Firefox_OS/Hacking_Firefox_OS/Localizing_Firefox_OS" title="/en-US/docs/Firefox_OS/Hacking_Firefox_OS/Localizing_Firefox_OS">লোকালাইজিন ফায়ারফক্স ওএস </a></dt> + <dd> + A guide to localising the Firefox OS platform, making it available in your preferred languages.</dd> +</dl> 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 +--- +<div class="summary"> + <p><span class="seoSummary">এই গাইডে, আমরা দেখাব ফায়ারফক্স ওএস স্থানীয়করণ করা কতটা সহজ, বিশেষভাবে ইন্টারফেইস এবং আপ্পস । আমরা প্রথমে আপনার কম্পিউটার কিভাবে কাজ করা শুরু করবে তা দিয়ে শুরু করব,তারপর দেখাব কিভাবে গিয়া স্ট্রিং স্থানীয়করণ করা যায় , সবশেষে কিভাবে |১০ন টেস্টিং কাজ করবে । </span></p> +</div> +<h2 id="যা_যা_প্রয়োজন">যা যা প্রয়োজন</h2> +<p>গিয়াস সোর্স ফাইল পাওয়ার জন্য এবং আপনার কম্পিউটারে স্থানীয়করণ পরীক্ষা করার জন্য আপনাকে আগে নিশ্চিত হতে হবে যে আপনার কম্পিউটার এ নিম্নের প্রয়োজনীয় ভাষা গুলো ইন্সটল করা আছে ঃ</p> +<dl> + <dt> + জি এন এউ তৈরী</dt> + <dd> + সোর্স কোড তৈ্রী করার জন্য এটা খুব ছোট সাহায্যকারী যন্র . এটা খুব জলদি সবার হাতে হাতে চলে আসবে যখন আপনি আপনার দেস্কটপ |১০n চালনোর উপযোগী হবে। ডাওনলোডিং এবং ইন্সটলিং ম্যাক খুব সোজা এবং <a href="http://www.gnu.org/software/make/">সরাসরি জি এন এউ এর ওয়েবসাইট</a> থেকে করা যায় .যদি আপনি ম্যাক ওএসএক্স ব্যবহার কর তবে আপনাকে এক্সকোড এবং এক্সকোড এর কমান্ড লাইন যন্রপাতি <a href="https://itunes.apple.com/us/app/xcode/id497799835?mt=12">এপস্ স্টর</a> ইন্সটল করতে হবে ।</dd> + <dt> + গিট</dt> + <dd> + গিট হল একটি ভারসন কন্ত্রল সিস্টেম যা উন্নত গিয়া সোর্স কোড জমা করে। সহজেই গিট ডাওনলোডিং এবং ইন্সটলিং করা যাবে <a href="http://git-scm.com/">সরাসরি তাদের ওয়েবসাইট থেকে</a> ।</dd> + <dt> + পাইথন</dt> + <dd> + পাইথন একটি প্রোগ্রামিং ভাষা যা আপনাকে ফায়ারফোক্স ওস বিল্ডার|১০ন টেস্তিং বানাতে সাহায্য করবে । সহজেই গিট ডাওনলোডিং এবং ইন্সটলিং করা যাবে <a href="https://www.python.org/getit/">সরাসরি তাদের ওয়েবসাইট থেকে</a> ।</dd> + <dt> + মারকুরিয়াল (এছ জি)</dt> + <dd> + মারকুরিয়াল (এছ জি) হল ভারসন কন্ত্রল সিস্টেম যা বাসা বাড়ির জন্য গিয়ার স্তাবল ভারসনে ব্যবহার করা হত এবং স্থানীয় ভান্ডারসরুপ । সহজেই মারকুরিয়াল (এছ জি) ডাওনলোডিং এবং ইন্সটলিং করা যাবে <a href="http://mercurial.selenic.com/downloads/">সরাসরি তাদের ওয়েবসাইট থেকে</a> ।</dd> + <dt> + স্থানীয়-পাথক্য</dt> + <dd> + স্থানীয়-পাথক্য হল একটি পাইথন স্ক্রিপ্ত যা স্থানীয়কারকদেরকে সাহায্য করবে তাদের কাজ মুল্ল্যায়ন করতে এবং নতুন কিছু থেকে আলাদা করতে যা আগেই স্থানীয়করণ করা হয়েছে (একে ডিফ বলে )। সহজেই গিট ডাওনলোডিং এবং ইন্সটলিং করা যাবে <a href="https://developer.mozilla.org/en-US/docs/Compare-locales">সরাসরি তাদের ওয়েবসাইট থেকে</a> । দয়া করে মনে রাখবেন যে এইটা শুধু মাত্র যদি আপনি গিয়া স্থানীয়করন করেন এই কমান্ড লাইন বা টেক্সট ইডিটর এর মাধ্যমে । যদি আপনি Pootle, Transifex, or Pontoon ব্যবহার করেন, তবে আপনার এইটা দরকার হবে না ।</dd> +</dl> +<h2 id="স্থানীয়করন_তৈরী">স্থানীয়করন তৈরী</h2> +<p>যখন আপনার উপরের লিঙ্ক থেকে সফটওয়ার ডাওনলোডিং এবং ইন্সটলিং করা শেষ হবে,তখন আপনার সময় হবে ডেস্কটপে উৎস এবং স্থানীয়করনের স্ট্রিং নেওয়ার ।</p> +<ol> + <li>আপনার কম্মান্ড লাইনে সাহায্যকারী স্থানে যেখানে আপনি আপনার গিয়া সোর্স জমা করে রাখতে পারবেন।</li> + <li>হগ ব্যবহার কালে, en-US repo দিয়ে ক্লোন করুন এই কমান্ডের মাধ্যমে : + <pre>hg clone https://hg.mozilla.org/gaia-l10n/en-US</pre> + </li> + <li>এখন স্থানীয় রেপকে ক্লোন করুন এই কমান্ড এর মাধ্যমে : + <pre>hg clone https://hg.mozilla.org/gaia-l10n/your-locale-code</pre> + </li> + <li>সবশেষে, নিম্নের কমান্ডটি লিখুন এবং নতুন ডিফ তৈ্রী করুন যাতে আপনি to create a diff of your locale's repo against the en-US repo: + <pre>compare-dirs en-US your-locale-code</pre> + </li> +</ol> +<p>এখন আপনার একটি ডিফের তালিকা প্রস্তুত থাকা উচিত যা অনুবাদ করা হবে ! দয়া করে নোট করবেন যে যদি আপনি নতুন করে ফায়ারফক্স ওএস এর স্থানীয়করণ শুরু করেন তবে আপনাকে নতুন করে ডিফ খুলা লাগবে না কারন সব স্ট্রিংই নতুন এবং অনুবাদ করার উপযোগী ।</p> +<h2 id="গিয়া_স্ট্রিং_এর_অনুবাদকরণ">গিয়া স্ট্রিং এর অনুবাদকরণ</h2> +<p>গিয়া স্ট্রিং এর অনুবাদকরন বিশালভাবে আপনার ব্যবহৃত যন্ত্রপাতির উপর নিরভরশীল । এই ধরনের কাজ অনুবাদের করা অন্ন্যান্য মজিলা পন্যের মতই একই । এই <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Quick_start_guide/Translation_phase">স্থানীয়করনের অনুবাদক্রিত পৃষ্ঠার দ্রুত পথপ্রদরশকটি</a> একটি লিস্ট ধারন করে যাতে আসে সবপ্রকার মজিলা পন্য পাওয়া যায় যা দিয়ে অনুবাদ করা যায় এবং অনুবাদের টিউটরিয়ালও পাওয়া যায় । এই পৃষ্ঠাটি আপনার জন্য খুবি উপকারী হবে যদি আপনি |১০ন টেস্টং এর অংশ হন এবং সিধান্ত নেন যে আপনি কোন যন্ত্রটি ব্যবহার করবেন অনুবাদ করার জন্য আবার সঠিক টিউটরিয়ালটি নিতে যা আপনার টিম এখন ব্যবহার করবে ।</p> +<h2 id="ফায়ারফক্স_ওএস_এর_জন্য_এল১০ন_টেস্টিং">ফায়ারফক্স ওএস এর জন্য এল১০ন টেস্টিং</h2> +<p> ফায়ারফক্স ওএস ১০ন টেস্টিং এর জন্য প্রধানত দুই ধরনের মেথড আছে : ডেক্সটপ তৈরী এবং মোবাইল তৈ্রী । বরতমানে, ১০|ন টেস্টিং এর জন্য ডেক্সটপ মেথডটি সবচেয়ে বেশি ছড়ানো ।</p> +<h4 id="ডেস্কটপ_এ_১০ন_টেস্টিং">ডেস্কটপ এ |১০ন টেস্টিং</h4> +<ol> + <li>ডাউনলোড করুন এবং ইন্সস্টল করুন বুট২গেকও র সবচেয়ে নতুন ভারসন এখান থেকে <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g18/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g18/"><code>http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g18/</code></a> এবং ডাউনলোডিং করার পর আপনার ডেস্কটপ ওপারেশন সিস্টেম কাজ করবে। তারপর আপনি খুজে নিন যে কোথায় <em>localizer</em> শব্দটি আসে । এর মানে হল এই বিল্ডটিতে এখন সবপ্রকার লোকাল এর তালিকা প্রযোয্য আছে <a href="https://github.com/mozilla-b2g/gaia/blob/master/locales/languages_all.json" title="https://github.com/mozilla-b2g/gaia/blob/master/locales/languages_all.json"><code>languages-all.json</code></a> ।</li> + <li>ক্লোন হল গিয়ার সবচেয়ে নতুন ভারশন যেখান থেকে আপনি ডাউনলোড করতে পারবেন এবং নিম্নের কমান্ডটি কমান্ড লাইনে লিখতে পারবেন : <code>git clone git://github.com/mozilla-b2g/gaia.git</code></li> + <li>যদি আপনার টিম এই প্রথমবারের মত ফায়ারফক্সের ওএস এর জন্য কাজ করে তবে আপনাকে আপনার এলাকাকে এনাব্যল করতে হবে । যদি না করে , তবে শুধু অপেক্ষা করুন যেখানে অন্যরা স্থানীয়করনে ব্যস্ত থাকবে । + <ol> + <li>While in the command line, navigate inside your gaia clone and run this command to clone your locale's repo<br> + : <code>hg clone ssh://hg.mozilla.org/gaia-l10n/your-locale-code</code></li> + <li>এই ফাইলটি খুলুন <code>languages.json</code> । ফাইলটি পাবেন <code>shared/resources</code> ডিকশনারীতে যেটা আপনি মাত্র ক্লোন করলেন.</li> + <li>এখন আপনার স্থানীয় তথ্যগুলো "en-US" ফরমেটে লিখুন : "English (US)", এবং ফাইলটি সেইভ করুন ।</li> + <li>পরিশেষে , কমান্ডটি রান করুন : <code>make multilocale</code> এতি আপনার এলাকাকে এনাবেল করে দিবে ।</li> + </ol> + </li> + <li>নিজের প্রফাইল জুড়ুন এই কমান্ড এর মাধ্যমে : <code>DEBUG=1 make -C gaia profile</code></li> + <li>সরবশেষে , আপনি আপনার স্থানীয় প্রফাইলটি খুলুন এবং পরীক্ষা শুরু করুন এই কমান্ড এর মাধ্যমে : <code>b2g/b2g -profile gaia/profile</code>. যদি আপনি MAC OS X চালান তবে এই চমান্ড এর মাধ্যমে চালান : <code>/Applications/B2G.app/Contents/MacOS/b2g -profile gaia/profile</code></li> + <li>আপনার প্রোফাইলকে আপগ্রেড করতে গড়ে তুলতে , simply navigate to your Gaia repo clone এবং কমান্ডটি জুরুন : <code>git pull</code></li> +</ol> +<h4 id="মোবাইলে_১০ন_টেস্টিং">মোবাইলে |১০ন টেস্টিং</h4> +<p> + <i> + এই সেকসনে যেসব ডিভিসে ফায়ারফক্স ওএস সাপোর্ট করে সবগুলোই স্থানীয়করনের জন্য উপযোগী হবে ।<br> + </i> +</p> +<h4 id="খুজতে_চান_যে_কখন_১০ন_টেস্টিং_হবে">খুজতে চান যে কখন |১০ন টেস্টিং হবে</h4> +<p>মোবাইল অপারেশন সিস্টেম এর স্থানীয়করন পরীক্ষা এবং দেক্সটপ এ স্থানীয়করন পরীক্ষার অনেক মিল আছে । এখানে কিছু পথপ্রদরশক দাওয়া হল যা আপনাকে সব খুজে পেতে সাহায্য করবে যখন আপনি স্থানীয়করন করবেন ঃ</p> +<ol> + <li>দেখে নিন যাতে আপনার অনুবাদটি সঠীক ভাবে UI টেক্সট এ বসে ।</li> + <li>ঠিক করুন যাতে টোন,স্টাইল এবং পরিভাষা পুরা পন্য তথ্যে একই থাকে ।</li> + <li>UI তে ইংরেজিতে অনুবাদ করা হয়নি এমন অংশ খুজে বের করুন এগুলো হয়ত গিয়ার ভিতরে হা্ড-কডেড করে করা আছে অথবা তারা হয়ত ইলিমেন্ট আইডি এরোর দারা আক্রান্ত ।</li> + <li>নিচশিত হয়ে নিন যে সময় এবং তারিখ আপনার এলাকা অনুযায়ী আসে কিনা ।</li> +</ol> +<h2 id="নিরদিস্ট_স্থানীয়_বাগ_খোজা">নিরদিস্ট স্থানীয় বাগ খোজা</h2> +<p>এখানে bugzilla র কিছু লিঙ্ক আসে যা আপনাকে বাগ এর কিছু উদাহরণ দেওয়া আছে যা ফোন ব্যবহার করা হয়েছিলো । এটা আপনাকে কিছু নিরদেশনা দিবে যে কিভাবে বাগ খুজে পেতে হয় এবং কিছু উদাহরণ দিবে যে কিভাবে তা পুরন করতে হয় ।</p> +<ul> + <li><a class="moz-txt-link-freetext" href="http://bit.ly/100bcsC">http://bit.ly/100bcsC</a> - এইগুলো |১০ন B2G এর সাধারণ তালিকা</li> + <li><a class="moz-txt-link-freetext" href="https://bugzilla.mozilla.org/show_bug.cgi?id=846060">https://bugzilla.mozilla.org/show_bug.cgi?id=846060</a></li> + <li><a class="moz-txt-link-freetext" href="https://bugzilla.mozilla.org/show_bug.cgi?id=852739">https://bugzilla.mozilla.org/show_bug.cgi?id=852739</a></li> +</ul> +<p>স্থানীয়করন বাগ পুরণ করার সাধারন নিয়ম :</p> +<ul> + <li>বাগটি যদি ভাষায় নিরদিষ্ট করা থাকে তবে মজিলার স্থানীয়করন (অন্যান্য পন্যের নিচে) লিখুন এবং সিসি স্থানীয়কারক । কখনি আপনার বাগকে সঠীকভাবে পতাকাব্রিত করতে ভুলবেন না ।</li> + <li>যদি ভাষা নিরদিষ্ট করা না থাকে তবে ফায়ারফক্স ওএস পন্নের নিচে পুরন করুন এবং সিসি স্থানীয়কারক । কখনি আপনার বাগকে সঠীকভাবে পতাকাব্রিত করতে ভুলবেন না ।</li> + <li>যদি আপনি সন্দেহে ভুগেন তবে তবে ফায়ারফক্স ওএস পন্নের নিচে পুরন করুন এবং সিসি স্থানীয়কারক । কখনি আপনার বাগকে সঠীকভাবে পতাকাব্রিত করতে ভুলবেন না ।</li> +</ul> +<p>যারা <a href="http://moztrap.mozilla.org/" title="http://moztrap.mozilla.org/">Moztrap</a> ব্যবহার করেন তাদের জন্য মজিলা ওএস "স্থানীয়করণ" টেগস এর টেস্টিং এর কথা মাথায় রেখে এবং দেখতে যে আপনি পরীক্ষায় উত্তীরণ হন কি না এর আরও একটি ভাল উপায় আপনার ফায়ারফক্স ওএস স্থানীয়করণ পরীক্ষা ।</p> +<h2 id="তারপর_কি">তারপর কি?</h2> +<p>এখন আপনি স্থানীয়করনের জন্য প্রস্তুত ! অতএব, আপনার প্রিয় |১০ন জন্ত্র খুলুন এবং শুরু করুন ! সবসময়ের মত, যদি আপনার কিছু জানার থাকে যা আপনি এই ডকুমেন্টে পান নি , তবে দয়া করে তা পাঠিয়ে দিন এই লিঙ্কে <a href="http://www.mozilla.org/about/forums/#dev-l10n" title="http://mailto:_dev-l10n@lists.mozilla.org">mozilla.dev.l10n newsgroup</a>.</p> 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 +--- +<div class="summary"> + <p>মাঝেমধ্যে আপনাকে আপনার মেশিনের কিছু হোস্ট ফাইলস ঠিক করা লাগতে পারে যখন কোন কিছু আক্রমন করবে , কোন অবাঞ্চিত সংযোগ ব্লক করতে , কোন নির্দিষ্ট আইপি ঠিকানায় সরাসরি যাওয়ার নির্দেশ করার জন্য ইত্যাদি । এই প্রবন্ধে কিভাবে ফায়ারফক্স ওএস ফোন এর হোস্ট ফাইলস সংশোধন করা যায় সে সম্পর্কে বলা হয়েছে । এটি আছে /system/etc এর অধীনে ।</p> +</div> +<h2 id="আপনার_ফোনকে_প্রস্তুত_করা">আপনার ফোনকে প্রস্তুত করা</h2> +<p>এই ফোনের <a href="/en-US/Firefox_OS/Debugging/Developer_settings#The_Developer_panel">Developer settings panel</a> যান এবং চেক করেন :</p> +<ul> + <li>"রিমোট ডিবাগিং" ( ফায়ারফক্স ওএস ১.৪ এবং এর উপরের ফোনে , "ADB এবং ডেভ টুলস" নির্বাচন করতে হবে নির্বাচন মেনু থেকে )</li> + <li>"কনসল এনাবেল্ড"</li> +</ul> +<p>এরপর আপনার ফোন কম্পিউটার এর সাথে সংযুক্ত করেন ।</p> +<p>এই পর্যায়ে অ্যান্ড্রয়েডে যেভাবে হোস্ট ফাইলস সংশোধন করা হয় সেইভাবে করা হয় । অ্যান্ড্রয়েড ডেভলাপাররা সহজেই এটি ধরতে পারবে ।</p> +<h2 id="টার্মিনালের_ধাপসমূহ">টার্মিনালের ধাপসমূহ</h2> +<ol> + <li>একটি টার্মিনাল উইন্ডস খুলতে হবে । /system অংশটি ডিভাইসে পুনরারোহণ করতে হবে যাতে করে পুনোরাই লেখার অনুমতি পায়<br> + <pre class="brush: bash">adb remount</pre> + </li> + <li>হোস্ট ফাইলগুলো কম্পিউটারে নেন<br> + <pre class="brush: bash">adb pull /system/etc/hosts /tmp</pre> + </li> + <li> হোস্ট ফাইলস সংশোধন করতে হবে এখানে /tmp/hosts এবং সংরক্ষণ করতে হবে । যেমন -<br> + <pre class="brush: bash">127.0.0.1 localhost +ip.to.re.direct hostName</pre> + </li> + <li>পরিবর্তিত হোস্ট ফাইলগুলো ডিভাইসে push করতে হবে<br> + <pre class="brush: bash">adb push /tmp/hosts /system/etc/hosts</pre> + </li> +</ol> +<p>এখানেই শেষ ; আপনার হোস্ট ফাইলসগুলো এখন আপডেটেড হয়ে যাওয়া উচিত ।</p> +<div class="note"> + <p><strong>মন্তব্য</strong> : ADB সম্পর্কে আর জানতে চান ? এখানে দেখতে পারেন <a href="http://developer.android.com/tools/help/adb.html" title="http://developer.android.com/tools/help/adb.html">ADB documentation</a>.</p> +</div> +<p> </p> 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 +--- +<div class="summary"> + <p><span class="seoSummary">এই নিবন্ধে বর্ণনা করা হয়েছে যে, কিভাবে গায়ার বিল্ড সিস্টেম কাজ করে; যার মধ্যে আছে মেক ফাইল, বিল্ড প্রক্রিয়া, পারিপার্শ্বিক ভেরিয়েবল এবং শক্তিশালী কাস্টোমাইজেশন সম্পর্কে বিস্তারিত বর্ণনা।</span></p> +</div> +<p>Most of the meaningful work for the build steps are performed by the scripts that live inside the <code>build/</code> subdirectory of Gaia, which are executed using make, node.js and <a href="https://developer.mozilla.org/en-US/docs/XPConnect/xpcshell" title="https://developer.mozilla.org/en-US/docs/XPConnect/xpcshell">XPCShell</a> (also known as JS Shell), a runtime environment from <a href="/en-US/docs/Mozilla/Projects/XULRunner">XULRunner</a>. 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.</p> +<div class="note"> + <p><strong>Note</strong>: 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.</p> +</div> +<h2 id="মেক_ফাইল">মেক ফাইল</h2> +<p>The Makefile consists of a bunch of goals. This section explains the most useful ones.</p> +<h3 id="গায়া-ইনস্টল">গায়া-ইনস্টল</h3> +<p>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 <code>APP</code> flag as follows:</p> +<pre class="brush: bash">APP=calendar make install-gaia</pre> +<p>This directory must exist inside one of the Gaia apps directories (e.g., <code>apps</code>).</p> +<h3 id="গায়া-রিসেট">গায়া-রিসেট</h3> +<p>This works the same as <code>install-gaia</code> but starts by purging and then sets up permission defaults after installing all of the apps. The apps will be in <code>/data/local</code> like in the engineering builds. This will also push test and debugging applications.</p> +<div class="warning"> + <p><strong>Be careful</strong>: Using the <code>APP</code> environment variable with <code>reset-gaia</code> appears to work, but it will put your phone in an unusable state (which is recoverable by running this goal again without the <code>APP</code> variable). So don't do that.</p> +</div> +<h3 id="প্রডাকশন">প্রডাকশন</h3> +<p>Same as <code>reset-gaia </code>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.</p> +<div class="warning"> + <p><strong>Be careful</strong>: Using the <code>APP</code> environment variable with <code>production</code> appears to work, but it will put your phone in an unusable state (which is recoverable by running this goal again without the <code>APP</code> variable). So don't do that.</p> +</div> +<h3 id="রেফারেন্স_ওয়ার্কলোড">রেফারেন্স ওয়ার্কলোড</h3> +<p>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.,</p> +<pre class="brush: bash">APP=sms make reference-workload-light +APPS="sms communications/contacts" make reference-workload-heavy +</pre> +<div class="note"> + <p><strong>Note</strong>: For more information, read <a href="/en-US/Firefox_OS/Platform/Gaia/Hacking#Reference_Workloads">Hacking Gaia: Reference workloads</a>.</p> +</div> +<h2 id="পারিপার্শ্বিক_ভেরিয়েবল">পারিপার্শ্বিক ভেরিয়েবল</h2> +<p>Some environment variables let you control some aspects of the build and installation on the device, for example:</p> +<h4 id="GAIA_OPTIMIZE1">GAIA_OPTIMIZE=1</h4> +<p>This triggers an optimization pass on the JavaScript files. This is automatically set when running <code>make production</code>. This can be used for <code>install-gaia</code> or <code>reset-gaia</code> too.</p> +<h4 id="PRODUCTION1">PRODUCTION=1</h4> +<p>This is basically an alias for <code>make production</code>.</p> +<h4 id="DEBUG1">DEBUG=1</h4> +<p>This lets you generate a debug profile to use with Gaia <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">unit tests</a> or when developing your Firefox OS app in Firefox. You must delete the existing profile directory before trying to generate a new one.</p> +<h4 id="DEVICE_DEBUG1">DEVICE_DEBUG=1</h4> +<p>This disables screen lock on the device.</p> +<h4 id="GAIA_DEVICE_TYPEphone">GAIA_DEVICE_TYPE=phone</h4> +<p>This variable lets you build specific device from different 'app.list'. All 'app.list' files are located under /build/config/$(GAIA_DEVICE_TYPE)/ folders.</p> +<p>GAIA_DEVICE_TYPE default value is <strong>phone</strong>.</p> +<div class="note"> + <p><strong>Note</strong>: for more details and more options, consult our <a href="/en-US/Firefox_OS/Platform/Gaia/Hacking#Make_options">Hacking Gaia make options</a> guide.</p> +</div> +<h2 id="বিল্ড_প্রক্রিয়া">বিল্ড প্রক্রিয়া</h2> +<p>Here is a sequence diagram for building gaia:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/8635/gaia-build-system-seq-diagram.png" style="width: 2222px; height: 1497px;"></p> +<p>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.</p> +<p>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 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1021051">bug 1021051</a> for moving mostly dependencies to xpcshell scripts, and at the end, app.js, pre-app.js and post-app.js will be merged on <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1053703">bug 1053703</a>.</p> +<p>we have three kinds of directory for gaia build system:</p> +<ol> + <li>source directories: apps, dev_apps, shared directories</li> + <li>stage directory: build_stage</li> + <li>profile directories: profile, profile-debug or profile-test directories</li> +</ol> +<p>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.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/8653/file-accessing.png" style="width: 1136px; height: 1250px;"></p> +<p>Here is the build process when <code>make</code> is executed in the gaia directory, rules will be executed in order:</p> +<ol> + <li><strong>b2g_sdk</strong>: b2g-desktop is used to run the xpcshell scripts in <code>GAIA_DIR/build/</code>.</li> + <li><strong>svoperapps</strong>: Download apps and generate configuration files for apps installation per provider of mobile telephony and country</li> + <li><strong>webapp-manifests</strong>: Generate webapps metadata for build process</li> + <li><strong>keyboard-layouts</strong>: Generate the default keyboard layout config</li> + <li><strong>settings.json (settings.js)</strong>: This JavaScript generates the default settings for Firefox OS, which are read by Gaia.</li> + <li><strong>webapp-shared</strong>: Pick files which are used in each app from shared directory to build_stage directory.</li> + <li><strong>preferences</strong>: Generates default preferences for Firefox OS; it will generate the <code>user.js</code> 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 <code>DEBUG=1</code>.</li> + <li><strong>app.js</strong>: Makefiles in the <code>app</code> 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 <code>build_stage</code>, and execute <code>[app-directory]/build/build.js</code> if it exists. See {{ anch("Build script for apps") }} for more details.</li> + <li><strong>test-agent-bootstrap & test-agent-config</strong>: setup test-agent includes two make rules, <code>test-agent-config</code> & <code>test-agent-bootstrap-apps</code>, which are used to setup test environments for each app.</li> + <li><strong>webapp-optimize</strong>: 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.</li> + <li><strong>webapp-zip</strong>: This compresses each app to a separate zip file and puts them into the <code>profile/</code> directory.</li> + <li><strong>optimize-clean</strong>: <code>optimize-clean</code> cleans the HTML files for the default language.</li> + <li><strong>contacts</strong>: Copies the preloaded contact file to your profile, if it exists in <code>GAIA_DISTRIBUTION_DIR</code>.</li> + <li><strong>extensions</strong>: Copies the extensions in <code>GAIA_DIR/tools/extensions</code> to your profile directory; different configuration setups allow you to specify copying different extensions.</li> + <li><strong>installed-extensions.json (additional-extensions.js)</strong>: Finally, this script downloads certain additional extensions to your profile directory.</li> +</ol> +<h2 id="অ্যাপের_জন্য_বিল্ড_স্ক্রিপ্ট">অ্যাপের জন্য বিল্ড স্ক্রিপ্ট</h2> +<p>By default, app build script <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">[app directory]/build/build.js</span><span style="line-height: 1.5;"> will be executed by app.js </span><span style="line-height: 1.5;">if it exists. if $APP/build/build.js does not exist, app.js will copy app into build_stage.</span></p> +<p>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 <a href="https://github.com/mozilla-b2g/gaia/blob/a0fa29db8e9e15afe3b1787bf494caa86a033f10/apps/calendar/build/build.js#L8">utils.copyToStage() should be called</a> in build.js for calendar app.</p> +<p>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.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/8651/flow-diagram.png" style="width: 1004px; height: 952px;"></p> +<h2 id="প্রেফারেন্স_কাস্টোমাইজ">প্রেফারেন্স কাস্টোমাইজ</h2> +<p>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 <code>custom-prefs.js</code> inside the <code>build/config</code> directory and store them in there. This keeps them from being overwritten and out of source control.</p> +<p>Here are some useful preferences:</p> +<pre class="brush: js">// 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); +</pre> +<p>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:</p> +<pre class="brush: bash">rm -rf profile && make profile</pre> +<p>Then you can safely use the <code>install-gaia</code> goal.</p> +<h2 id="সচরাচর_জিজ্ঞাসিত_প্রশ্ন">সচরাচর জিজ্ঞাসিত প্রশ্ন</h2> +<h3 id="একটি_ফ্ল্যাশ_করার_পরও_ডিভাইস_কালো_রয়ে_যায়">একটি ফ্ল্যাশ করার পরও ডিভাইস কালো রয়ে যায়</h3> +<p>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:</p> +<pre class="brush: bash">adb shell stop b2g && adb shell start b2g</pre> +<p><br> + </p> 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 +--- +<div class="summary"> + <p><span class="seoSummary">ডেভেলপার অথবা ডিভাইস ভেন্ডার হিসেবে,আপনাকে অ্যাপসটি কাস্টমাইজ করতে চাইবেন যা একটি Firefox OS ডিভাইসের উপরে বিভিন্ন কারণে প্রথম বার কাজ করে।এই অনুচ্ছেদ এটা করার বিভিন্ন প্রক্রিয়ার উপরে আলোচনা করে।</span></p> +</div> +<h2 id="গায়ার_ভিতরে_অ্যাপ_লোকেশন">গায়ার ভিতরে অ্যাপ লোকেশন</h2> +<p>অ্যাপস Firefox OS এর উপর কাজ করে সেগুলো গায়া সোর্স ট্রী এর ভিতরে থাকে,দুটা লোকেশনের মাঝে একটিঃ</p> +<ul> + <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/apps">gaia/apps/</a>:এটা সেখানে যেখানে ডিফল্ট সিস্টেম অ্যাপস পাওয়া যায়,যেমন দিন পঞ্জিকা,ই-মেইল,সেটিংস ইত্যাদি।</li> + <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/dev_apps">gaia/dev-apps</a>:এটা সেখানে যেখানে অন্য অ্যাপস পাওয়া যায়,যেমন ঐগুলো কাস্টমাইজেশন প্রক্রিয়ায় যোগ হয়।</li> +</ul> +<p>যদি আপনি আপনার গায়া/B2G নির্মাণে এসব অ্যাপস বাদ দিতে /যোগ করতে চান,আপনি নিচে দেখানো বেশ কিছু পথে এটি করতে পারেন।</p> +<h2 id="Brute_force_কাস্টমাইজেশন_প্রক্রিয়া">Brute force কাস্টমাইজেশন প্রক্রিয়া</h2> +<p> "brute force"প্রক্রিয়া হল সাধারনভাবে অ্যাপস মুছে ফেলা যা আপনি গঠনের সময় উপস্থিত রাখতে চান,গঠনের পু্বে।</p> +<h2 id="এডিটিং_কনফিগ_লিস্টস">এডিটিং কনফিগ লিস্টস</h2> +<p>সবচেয়ে বিশুদ্ধ প্রক্রিয়া হল <code>apps-*.list</code> ফাইল এডিট করাf (খুজেন বিভিন্ন নির্দেশনামুলক ডিভাইসে খুজেন <a href="https://github.com/mozilla-b2g/gaia/tree/master/build/config">gaia/build/config/</a>, যেমন <code>phone/</code> এবং <code>tablet/ এর ভিতরে</code>) গঠনের সময় আপনি অ্যাপস এর পথ যোগ করে চান। উদাহরন হিসেবে, <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-production.list">gaia/build/config/phone/apps-production.list</a> দেখতে কিছুটা এর মতঃ</p> +<pre class="brush: bash">apps/bluetooth +apps/bookmark +apps/browser +apps/calendar +apps/callscreen +etc.</pre> +<p>নোট করুন যে আপনি আরো সরাসরি ভাবে সকল অ্যাপস নির্দিষ্ট করতে পারেন,এর মতঃ</p> +<pre class="brush: bash">apps/*</pre> +<p>প্রক্রিয়া পছন্দের জন্য যা <code>apps-*.list</code> ফাইল ব্যবহার করে যা সহজেপ্রাপ্ত <a href="https://github.com/mozilla-b2g/gaia/blob/master/Makefile">gaia/Makefile</a> এর ভিতরে গঠনের সময় অ্যাপস নির্দিষ্ট করে,এবং এর মত কিছু দেখায়ঃ</p> +<pre class="brush: cpp"><span class="nv">GAIA_DEVICE_TYPE</span><span class="o">?=</span>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</pre> +<p>প্রাথমিকভাবে , <code>GAIA_APP_TARGET</code> পরিবর্তন সেট হয় <code>engineering</code> তে এবং <code><span class="nv">GAIA_DEVICE_TYPE</span></code> পরিবর্তন সেট হয় <code>phone তে</code>,সোর্স থেকে ডিফল্ট গায়া গঠনে <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-engineering.list">gaia/config/phone/app-engineering.list</a> ব্যবহার করবে(যা সকল টেস্ট,ডেমোস,ইত্যাদি যোগ করে)</p> +<p>বিভিন্ন অ্যাপস লিস্টের ব্যবহার নির্দেশনা দিতে আপনি নির্দিষ্ট করেন বিভিন্ন অপশন যখন <code>make</code> কমান্ড চলমান থাকে . <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-production.list">gaia/build/config/phone/apps-production.list</a> গঠনের সাথে উদাহরণ হিসেবে,আপনি ব্যবহার করবেন</p> +<pre class="brush: bash">PRODUCTION=1 গঠন</pre> +<p>যদি আপনি বিশেষভাবে <code>DEMO=1</code> গঠনের সাথে নির্দেশনা দেন তখন ইহা <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-demo.list">apps-demo.list</a>.ব্যবহার করবে।আপনি বিশেষভাবে <code>DOGFOOD=1</code> গঠনের সাথে নির্দিষ্ট করেন,তখন ইহা <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-dogfood.list">apps-dogfood.list</a> ব্যবহার করবে।</p> +<p> <code>GAIA_APP_CONFIG</code> ইডিটিং দ্বারা <a href="https://github.com/mozilla-b2g/gaia/blob/master/Makefile">gaia/Makefile</a> এ আপনি সম্পুর্ন ভাবে সিদ্ধান্ত নিতে পারেন এবং আপনার নিজের <code>apps-*.list</code> ফাইল প্রদান করেন ।</p> +<p><a href="https://github.com/mozilla-b2g/gaia/blob/master/Android.mk#L24-L28">gaia/Android.mk</a> বহন করে এইসব লাইন গুলোঃ</p> +<pre class="brush: cpp">ifneq ($(filter user userdebug, $(TARGET_BUILD_VARIANT)),) +GAIA_MAKE_FLAGS += PRODUCTION=1 +B2G_SYSTEM_APPS := 1 +endif</pre> +<p>যখন আপনি গঠন করবেন,যদি <code>VARIANT=user</code> অথবা <code>VARIANT=userdebug</code> সেট হয় (এইগুলো <code>TARGET_BUILD_VARIANT</code> এ পরিবর্তনে প্রতিসৃত হয়ে থাকে), <code>PRODUCTION=1</code> হল সয়ংক্রিয়ভাবে সেট যখন গায়া গঠন ।</p> +<div class="note"> + <p><strong>নোটঃ খুজে বের করুন যা তৈরি করে অন্য অপশন যা </strong>আমাদের <a href="/en-US/Firefox_OS/Developing_Gaia/make_options_reference">make options reference</a> এ সহজে প্রাপ্ত।</p> +</div> +<h2 id="বাজার_কাস্টমাইজেশনের_ব্যবহার">বাজার কাস্টমাইজেশনের ব্যবহার</h2> +<p>তৃতীয়,এবংসবচেয়ে পুনরায় বিশুদ্ধ(কিন্তু সবচেয়ে জটিল) উপায় হল কাস্টমাইজেশন ব্যবহার করা।এগুলো আপনাকে ব্যতিচারের সময় গঠনের কাস্টমাইজেশন প্রক্রিয়া নির্দেশ করে থাকে,গায়া কোর রিপু পরিবর্তন ছাড়া। আপনি আপনার নিজের দূরের নির্দেশনায় কাস্টমাইজেশন যোগ করতে পারেন,অথবা ব্যবহার করেন পুর্বে বিদ্যমান নির্দেশনা যা সোর্স থেকে আসে।</p> +<p>উদাহরন হিসেবে,<code>GAIA_DISTRIBUTION_DIR</code> পরিবেশের পরিবর্তনের সাথে কাস্টমাইজেশনের স্থান নির্দেশ করা,এর মতঃ</p> +<pre class="brush: bash"><code class="language-html">GAIA_DISTRIBUTION_DIR=<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DISTRIBUTION_PATH</span><span class="token punctuation">></span></span> make production</code></pre> +<p>আরো বেশি কাস্টমাইজেশনের উদাহরনের প্রক্রিয়া বিভক্তিকরনের জন্য,দয়া করে <a href="https://github.com/mozilla-b2g/gaia/tree/master/customization">https://github.com/mozilla-b2g/gaia/tree/master/customization</a> নির্দেশ করুন।</p> +<p> ইহার নিজের আলাদা ভিতরের বিষয় হল কাস্টমাইজেশন।ইহা সম্পর্কে আর বেশি জানার জন্য,আমাদের <a href="/en-US/Firefox_OS/Developing_Firefox_OS/Market_customizations_guide">Market Customizations guide</a> পড়ূন।</p> +<div class="note"> + <p><strong>নোটঃযদি তুমি তোমার গাইয়া বিল্ডের অংশ হিসেবে কাস্টম এক্সটারনাল অ্যাপ যোগ করতে চাও, তোমাকে একটি্ নির্দেষট পথে তাদের তৈরি করা প্রয়োজন,এবং তারপরে তাদের স্থাপন কর </strong> <code>gaia/dev-apps/</code> ফোল্ডারে। <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developing_Firefox_OS/Market_customizations_guide#Building_Prebundled_web_apps">Building Prebundled web apps</a> পড়ো আমাদের আরো খুজে বার করতে ।</p> +</div> +<div class="warning"> + <p><strong>গুরুত্বপুর্ণঃযদি তুমি ভাগ করার জন্য একতি কাসট্ম তৈরি করে ডিভাইস ভেন্ডার হওI ,তোমাকে তোমার ফোন/ট্যাব্লেট/ইত্যাদি তে ফায়ারফক্স মার্কেট প্ল্যাচ যোগ করার আগে প্তোমাকে খুশি হতে হবে বিচারের মান দন্ডের প্রয়োজন।মোযিলার সাথে যোগাযোগ কর আরো বিস্তারিত জানতে। </strong></p> +</div> +<p> </p> 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 +--- +<div class="summary"> +<p><span class="seoSummary">গায়া হল ফায়ার ফক্স OSএর ব্যবহারকারীদের ইন্টারফেস এবং ডিফল্ট অ্যাপসএর সাহায্যকারীঃ ইহা Lockscreen,homescreen,dialer ,অন্যান্য অ্যাপলিকেশন যোগ করে ।বিশেষভাবে,গায়া হল জটিল ওয়েব অ্যাপের সেট যা ফায়ারফক্স ও এস প্লাটফর্মের উপরে কাজ করে। এই অনুচ্ছেদের আপনার যা জানা দরকার গায়া প্রজেক্টে সাহায্য করতে তা প্রদর্শন করে।</span></p> +</div> + +<p>এই গাইডে আমরা আপনাকে গায়া তে সাহায্য করার জন্য একটি উপকারী কর্মের দিকে নিয়ে যাবো-এবং এর দ্বারা আমরা গায়া কোড বেসে ফিচার যোগ করা এবং বাগক্ষেত্রে গায়ার প্রজেক্টের বিপক্ষে কাজ করা মনে করি। অনুচ্ছেদের প্রথম সেটে এই ভাবে কাজ করতে পারে,অথবা আপনি এর সংযুক্ত দিক অবাদ দিতে পারেন ,যদি আপনার প্রয়োজন পরে এই প্রক্রিয়ার কোনো বিশেষ দিকে আপনাকে পুনরায় গঠন করতে।</p> + +<p>এর পরে ,আমরা সংযুক্ত বিষয়ের উপরে আমরা নির্দেশিকা উপাদান এবং তথ্য প্রদান করব।</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7951/gaia-2.0-screen.png" style="float: right; height: 533px; padding: 0px 0px 30px 30px; width: 320px;"></p> + +<h2 id="ভিত্তি"> ভিত্তি</h2> + +<ol> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Test_Gaia_code_changes">Testing Gaia code changes</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li> +</ol> + +<h2 id="গায়া_নির্দেশিকা_তৈরি_করে"> গায়া নির্দেশিকা তৈরি করে</h2> + +<ul> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Build_System_Primer">Gaia build system primer</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Customizing_build-time_apps">Customizing build-time apps</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/make_options_reference">Make options reference</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li> +</ul> + +<h2 id="আরো_দেখুন">আরো দেখুন</h2> + +<ul> + <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS">Filing bugs against Firefox OS</a></li> + <li><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps">Gaia apps guide</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Market_customizations_guide">Market customizations guide</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Customizing_the_keyboard">Customizing the keyboard in Firefox OS apps</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Localizing_Firefox_OS">Localizing Firefox OS</a></li> +</ul> 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 +--- +<div class="summary"> + <p><span class="seoSummary">এখন আপনার গায়া আপনার Desktop এ চলে এবং আপনার কিভাবে codebase কাজ করে তাতে কিছু লেভেল বুঝতে হয়, আপনাকে প্রজেক্টে কাজ করার জন্য প্রস্তুত হতে হবে ,এই অনুচ্ছেদে কিভাবে কাজ করে এবং কোথায় আছে তা খুজে বের করেন।</span></p> +</div> +<h2 id="Git_এর_সবচেয়ে_ভাল_অনুশীলন">Git এর সবচেয়ে ভাল অনুশীলন</h2> +<ol> + <li>যখন গায়াতে পরিবর্তন আনা হয় ,আপনাকে প্রথমে Grab করা উচিত latest master থেকে : + <pre class="brush: bash">cd path/to/gaia +git checkout master +git pull upstream master</pre> + </li> + <li>পরবর্তীতে ,আপনার নতুন অবস্থানের জন্য একটি শাখা খুলতে হবে: + <pre class="brush: bash">git checkout -b my-code-fix</pre> + </li> + <li>অবশেষে,আপনার <code>gaia/apps যান সরাসরি,এবং আপনার</code> app files এ পরিবর্তন আনুন।</li> +</ol> +<h2 id="Simple_code_উদাহরণ_পরিবর্তন_করে"> Simple code উদাহরণ পরিবর্তন করে</h2> +<p>কোড পরিবর্তন দেখতেঃ</p> +<p> ১। Gaia codebaseএ প্রয়োজনের জন্য পরিবর্তন আনুন,এবং পরিবর্তনটা সেভ কর</p> +<p> ২।Firefox Mulet বন্ধ করুন,অথবা আপনার সিমুলেটর WebIDE এ চলে</p> +<p> ৩।আপনার Gaia profile using <code>make পুন<em>রায় থাকে</em></code></p> +<p><code><em>৪।</em></code>Firefox Mulet নতুন শুরু করুন,অথবা আপনার সিমুলেটর WebIDE এ কাজ করে</p> +<p> চলুন lock screen আ কিছু পরিবর্তন আনতে রঙের কিছু পরিবর্তন ঘটাই :</p> +<p><img alt="Gaia lockscreen showing the clock display in white text" src="https://mdn.mozillademos.org/files/7929/gaia-lockscreen-clock.png" style="width: 369px; height: 623px; margin: 0px auto; display: block;"></p> +<p>১।ডেভেলপার টুলস এর ব্যবহারের পথ সহজ করে দেয় । Ctrl/right + click Firefox Desktop এর ঘড়িতে ক্লিক করে থাকে এবং <em>Inspect Element</em> বাচাই করে context menu থেকে।</p> +<ol> + <li>আপনি CSS ফাইলে এডিট করতে যা file to edit — <code>gaia/apps/system/lockscreen/style/lockscreen.css</code> তে কাজ করে থাকে —এবং তখন CSS স্টাইলে ডান দিকে ডিস্পলে তে আপনার পরিবর্তন আনে যা আপনি চান ।</li> + <li>যখন আপনি খুশি চলে যান এবং ফাইলে নতুন পরিবর্তন আনুন সরাসরিভাবে।</li> + <li>পরবর্তিতে , আপনার পরিবর্তন দেখতে কিছু ধাপ পরিলক্ষিত করুন।</li> +</ol> +<p><img alt="Gaia lockscreen showing the clock display modified from white to red text" src="https://mdn.mozillademos.org/files/7931/gaia-lockscreen-clock-modified.png" style="width: 366px; height: 622px; margin: 0px auto; display: block;"></p> +<p> Gaia Firefox Mulet প্রদানের লিমিটেশনঃ</p> +<p>,Desktop Firefox প্রদান করা, অয়াপ্স গুলো বিশেষভাবে কাজ করে থাকে যদি কোন নতুন রিয়েল ফোনে কাজ করি ,কিন্তু আপনি এখানে আর সেখানে কিছু পরিবর্তন দেখতে পারবেন।</p> +<ul> + <li>সকল ডিভাইস না APIs কে সাপোর্ট করা হয় Firefox ডেক্সটপে; <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/preferences.js">preferences.js</a> এ আপনি একটি নতুন লিস্টে করতে পারেন।</li> +</ul> +<h2 id="কিভাবে_কাজ_করার_জন্য_bugs_খোজা_হয়">কিভাবে কাজ করার জন্য bugs খোজা হয়</h2> +<h2 id="sect1"> </h2> +<p> Firefox OS bugs খোজার সবচেয়ে ভাল পথ হল এটাকে <a href="http://www.joshmatthews.net/bugsahoy/?b2g=1">Josh Matthews' Bugs Ahoy app</a> কন্সাল্টে কাজ করা হয় — এই বাগের পুলগুলো সরাসরি Mozilla's Bugzilla থেকে এবং দেখানো হয় তাদের দেখানো হয় খুজতে এবং ব্রাউজ করতে সবচেয়ে সহজ উপায়।একদা আপনি একটি বাগ পেয়েছিলেন যা তে আপনি একটি কাজ করতে চান, Bugzilla page এ যান, "assigned to" ক্ষেত্রে নিজেকে প্রবেশ করান ,এবং কাজ শুরু করেন ,উপরের মত।</p> +<h3 id="সাহায্যকারী_হিন্টস">সাহায্যকারী হিন্টস</h3> +<ul> + <li>যখন আপনি মেন্টর বাগ এ কাজ করবেন, Gaia core দল আপনার উন্নতি মনিটর করবেন এবং the code and progress এর সাহায্যে সাহায্য প্রদান করবে . যদি আপনি Firefox OS এর উন্নতি প্রক্রিয়ার নতুন শুরুকারী হন,যা সাহায়্যকারী হয় এমন কিছুতে সাইন করুন।এগুলো Firefox OS Bugzilla পেজে "Mentors" ক্ষেত্রে প্রবেশের দ্বারা চিহ্নিত হয়।Bugs Ahoy লিস্ট করে মেন্টর বাগ ।</li> + <li>যদি আপনি একজিন নতুন Bugzilla ব্যবহার কারী হন,আপনি বাগে কাজ করা হিসেবে নিজেকে প্রমান করতে পারবেন না।যদি আপনি না পারেন , মেন্টর কে জিজ্ঞাসা করেন বাগে দায়িত্ব অর্পন করার জন্য ,অথবা অন্য জায়গায় বাগ কমেন্টের জন্য ।</li> + <li>আপনার অভিজ্ঞতা হওয়ার পরে আপনাকে বাগে কাজ করার জন্য অনুমতি দেয়ার জন্য বলা হয়ে থাকবে ।</li> + <li> <code>[good first bug] খোজার জন্য আরেকটি ভাল সাদাবোর্ড প্রবেশ করানো হয়,যদি আপনি একটি নতুন প্রদানকারী হন এবং কিছু সাধারন করতে চান,আপনি ভাল বাগ ব্যবহারকারী হিসেবে লিস্টে আসতে পারেন </code> <a href="http://www.joshmatthews.net/bugsahoy/?b2g=1&simple=1">http://www.joshmatthews.net/bugsahoy/?b2g=1&simple=1</a> ব্যবহারে ।</li> + <li>আপনি যে প্রযেক্ট দিতে চান তার জন্য আপনাকে প্রজেক্ট খুজতে হবে।উদাহরন হিসেবে অনুসারীরা আপনাকে Gaia Clock app bug search দিবে:</li> +</ul> +<p><a href="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=10497922">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</a></p> +<h2 id="আরো_দেখুন"> আরো দেখুন</h2> +<ul> + <li><a href="https://mozilla.app.box.com/s/wzgsb3lkqglv0dnfdgzs">Gaia powerpoints for visual/interaction specifications</a></li> + <li><a href="https://etherpad.mozilla.org/gaia-meeting-notes">Weekly Gaia meeting Etherpad</a></li> + <li><a href="https://datazilla.mozilla.org/">Datazilla</a>: Mozilla's পারফরমেন্স পরীক্ষা ব্যবহার<br> + </li> +</ul> 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 +--- +<div class="summary"> + <p><span class="seoSummary"> Gaia codebase লোকালি কিভাবে কাজ করে তার উপরে এই অনুচ্ছেদটি বিস্তৃত বর্ণণা করা ,এবং যাতে টুলস গুলো সেট আপে সব সময় পাওয়া যায়। </span></p> +</div> +<p>শুরু করতে, আমাদের মনে রাখতে হবে যে আপনাকে Gecko অথবা B2G গঠন করতে হবে না , Gaia তে কন্ট্রিবিঊট করতে .আপনাকে কেবল Gaia source code ডাউনলোড করতে হবে এবং রান এবং এডিট করার সক্ষমতা থাকতে হবে ।<br> + <br> + কিছু ভিন্ন পার্থক্য আছে Gaia রান করার জন্যঃ</p> +<ul> + <li>একটি আপডেটেড Gaia গঠনের সাথে আপনার ফোন ফ্লাশ করুন।</li> + <li>আপনার Gaia B2G Desktop build এর ভিতরে উদ্বোধন করুন ।</li> + <li>আপনার Gaia WebIDE এর ভিতরে রান করুন।</li> + <li> উদ্বোধন করুন Firefox Mulet tool এর ভিতরে Gaia রান করার জন্য Desktop এ ।</li> +</ul> +<p>আপনি পেতে পারেন তথ্য এটা চালানোর উপরে ভিন্ন ভিন্ন পথে আমাদের <a href="/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a> পেজে ,এর সাথে দরকারি লিঙ্ক আরো তথ্যের জন্য । সাধারনত এটা সবচেয়ে জটিল অর্ডার( কিন্তু সবচেয়ে বাস্তব অভিজ্ঞতা প্রদান করে থাকে) সবচেয়ে সহজ (কিন্তু কম বাস্তব)।</p> +<p>এই অনুচ্ছেদে আমরা Firefox Mulet এর ভিতরে Gaia রানের উপরে প্রাধানয় দিব অথবা WebIDE তে — বেশির ভাগ পরিবর্তনের জন্য আপনাকে Gaia codebase তৈরি করতে হবে , এটা সবচেয়ে দ্রুত প্রক্রিয়ার মেকানিজম আপডেট পরীক্ষার জন্য ,কিন্তু অবশ্যি কিছু দিক আছে (যেমন টেস্টিং ডিভাইস অ্যাপি অথবা কথাবার্তা ফোনের হার্ডোয়্যার দিয়ে) যা একটি রিয়াল ডিভাইস ।</p> +<div class="note"> + <p><strong>নোটঃ</strong> Gaia থেকে সাহায্য পেতে ,সবচেয়ে ভাল জায়গা হল #gaia IRC channel এ যাওয়া (দেখা <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> নতুন তথ্যের জন্য) and the <a href="https://lists.mozilla.org/listinfo/dev-gaia">dev-gaia mailing list</a>.</p> +</div> +<h2 id="Running_আপনার_নতুন_নিজস্ব_Gaia_build">Running আপনার নতুন নিজস্ব Gaia build</h2> +<ol> + <li>প্রথমে ,নতুন একটি ফর্ক তোইরি করি যা প্রধান <a href="https://github.com/mozilla-b2g/gaia">Gaia repo on Github</a>.</li> + <li>পরবর্তীতে ,ক্লোন আপনার ফর্ক লোকালিঃ<br> + <pre class="brush: bash">git clone https://github.com/your-username/gaia.git</pre> + </li> + <li> নতুন আপ্সট্রিমে যোগ করেনঃ<br> + <pre class="brush: bash">cd gaia +git remote add upstream https://github.com/mozilla-b2g/gaia</pre> + </li> + <li>এখন আপনাকে গায়া প্রোফাইল তৈরি করতে হবে। Running <code>make</code> inside your repo folder তৈরি করে একটি প্রোফাইল <code>profile</code> তে সরাসরি,যা অপ্টিমাল ডিবাগিং এর জন্য সেট করা ।ইহা আন প্যাকেজড( হোস্টেদ ভারসন) এর গায়া অ্যাপস তৈরি করে যা লোকাল HTTPD ের মধ্যে দিয়ে কাজ করে থাকে যা Firefox ডেক্সটপ এ বিস্তৃত হয়ে থাকে। যখন আপনার পরিবর্তন দরকের তখন আপনার When you make a change you just need to refresh your browser window তে পরিবর্তন আনুন রেজাল্ট দেখতে (যা আপনি পরে দেখবেন),বরং প্রোফাইলটা গঠন করুন, রিপুশ করুন ডিভাইসে,ইত্যাদি। CSS/JS/HTML হ্যাকিং এর জন্য এটা অনেক ভাল।</li> + <li>আপনার ডিবাগ প্রোফাইল দিয়ে, <a href="/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia#Using_Gaia_in_Firefox_Mulet">Mulet</a> অথবা <a href="/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia#Using_Gaia_inside_WebIDE_with_a_Firefox_OS_Simulator">WebIDE</a> এ এটি রান করান লিঙ্কড স্ট্রাকচার ব্যবহার করে ।</li> +</ol> 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 +--- +<div class="summary"> + <p><span class="seoSummary">এখন থেকে আপনাকে একটি কোড পরিবর্তন তৈরি করতে হবে এবং ভেরিফাইড করা হয় ইহা যা গায়াকে ভাঙ্গেনা । পরবরতী স্টেপ হল সেন্টার রেপতে আপনার প্যাচ জমা দেয়া ,যা হল অনুচ্ছেদের উদ্দেশ্য ব্যাখা করা। </span></p> +</div> +<h2 id="Patch_submission">Patch submission</h2> +<p>আপনার প্যাচ গায়াতে জমা দেয়ার জন্যএই স্টেপগুলো অনুসরন করুনঃ</p> +<ol> + <li>প্রথমে,আপনি বাগযিলাতে একটি বাগ জমা দিন যা আপনি করেছেন,যদি একটি কোড পরিবর্তন দেখানোর জন্য তখনি বর্তমান থাকে।<a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox%20OS">Firefox OS product</a> অধীনে আপনাকে এটা জমা দিতে হবে এবং আপনার কোড কি কাজ করে তার উপরে একটি সুন্দর বর্ননা দিন।</li> + <li>এখন এটা সময় <a href="https://help.github.com/articles/creating-a-pull-request">create a pull request</a> এর প্যাচের জন্য।যদি আপনি আমাদের গাইড শুরু থেকে অনুসরন করেন,আপনাকে লোকাল ফর্কের গায়া রিপুতে পরিবর্তন আনতে হবে এবং একটি অসাধারন নামের শাখা। পরে <code>git add .</code>আপনার পরিবর্তন ,তারপরে <code>git commit -m 'my commit message'</code>.</li> + <li><code>'my commit message'</code>এর প্রয়োজন একটি বাগজিলার বাগ নাম্বার বহন করার জন্য এবং বাগের টাইলের জন্য,আরো যোগ করেন আরো তথ্য যা বর্ননা করা হয় প্যাচে ,এবং যে এটা ঘটায় । উদাহরন হিসেবে <br> + <pre class="brush: bash">Bug 9999999 - Fix that annoying bug R=johndoe</pre> + </li> + <li>গিতাবের উপরে আপনার গায়া ফর্ক পুশ করুন ,তারপরে একটি PR তৈরি করুন কোডটি দেয়ার অন্তর্ভুক্তির জন্য।</li> + <li>PR URL যোগ করুন বাগজিলার উপরে Bug হিসেবে সংযুক্তি ঘটাতে ( <em>Add টি অনুসরন করুন একটি সংযুক্তির লিঙ্ক হিসেবে ,বাচাই করুন পেস্ট টেক্সট যদি এটা ফাইলের ইনপুট মোডে থাকে ,এবং </em> URL প্রবেশ করান PR এর সংযুক্তি হিসেবে ,এবং একটি ছোট বর্ননা দিন )</li> + <li>Bugzilla bugএর PR সংযুক্তিতে ,আপনার প্যাচের জন্য রিভিউয়ারকে বলুন ।আপনার উচিত <code>review: ?</code> flag যোগ করা সংযুক্তির সাথে ,তারপরে আপনার কোড ব্যবহারের মডিউলের মালিকদের যুক্ত করুন ( <a href="https://wiki.mozilla.org/Modules/FirefoxOS">Module owners page</a> দেখুন আরো বেশি জানার জন্য ।)</li> + <li>রিভিউয়ারের জন্য অপেক্ষা করুন দায়িত্ব অর্পন করার জন্য এবং আপনার প্যাচ রিভিউ করুন। এই সময়ে তারা আপনাকে কিছু প্রশ্ন করবে পরিবর্তন/ ফিক্সিং এর জন্য যা PR এ Github এর ভিতরে হয়ে থাকে ,এবং , Bugzilla তে তাদের লিঙ্ক করুন ।</li> + <li>রিভিউয়ারের কমেন্টগুলো মনে করুন,তারপরে আবারো একই PR এ আগের মত পরিবর্তন আনুন <code>review: ?</code> flag এ পৌছে যান ।</li> + <li>একদা রিভিউয়ারের কমেন্ট করে এবং তারা আপনাকে <code>r+</code> flag দিবে (মানে এটা পুনরায় দেখা /অনুমোদন করে ),আপনার উচিত <a href="https://github.com/ginatrapani/todo.txt-android/wiki/Squash-All-Commits-Related-to-a-Single-Issue-into-a-Single-Commit">squash all your commits into</a> <a href="https://asciinema.org/a/11269">one</a> (আরো পড়ুন {{ anch("Tips_on_Gaia_Rebasing") }} নিচের সেকশনে).</li> + <li>একটি <code>checkin-needed</code> কিওয়ার্ড যোগ করুন কিওয়ার্ড ক্ষেত্রে।এই ক্ষেত্রে আপনাকে দরকার কারো আসার জন্য অপেক্ষা করা এবং আপনার প্যাচটি Gaia সোর্চে প্রবেশ করান।</li> + <li>শুভেচ্ছা !আপনার কোডটি এখন Firefox OS এর অংশ!</li> +</ol> +<div class="note"> + <p><strong>নোটঃআমাদের প্রতিটি রিভিউয়ের রিকমান্ডেড স্টিকিং করতে হবে। </strong></p> +</div> +<div class="note"> + <p><strong>নোটঃ আরো প্যাচ সাবমিশনের নির্দেশ </strong> <a href="https://github.com/mozilla-b2g/gaia/blob/master/CONTRIBUTING.md">contributing.md</a> তে পাওয়া যায় ।</p> +</div> +<h2 id="গায়া_রিবেসিং_এর_উপরে_টিপস">গায়া রিবেসিং এর উপরে টিপস</h2> +<p>Theগায়া মাস্টার শাখা সর্বদা পরিবর্তন হতে থাকে (অনেক,অনেক সময় একটি দিনের )।প্যাচ তৈরি করার পরে ২ ঘন্টা নেন ,আপনি সম্ভবত খুজে পাবেন যে মাস্টার শাখা আপনাকে পরিবর্তন করেছে ।<br> + <br> + আপনার ওয়ার্কিং শাখা থেকে (e.g. <code>my-code-fix</code>), আপনার প্রথম প্রয়াস হল রিবেস করা এটার মত নতুন কিছু খোজাঃ</p> +<pre class="brush: bash">git checkout -b my-code-fix-r1 +git pull --rebase upstream master</pre> +<p>যদি কোন বাধা না থাকে ,আপনি এটার মত চালাতে পারেনঃ</p> +<pre class="brush: bash">git checkout my-code-fix +git pull --rebase upstream master +git branch -D my-code-fix-r1</pre> +<p>যদি আপনি বাধা খুজে বের করেন ,ডেভেলপার দায়িত্বপুর্নের সাথে বাধা পরিবর্তন করার জন্য কাজ করেন এবং পুনরায় উপরের প্রক্রিয়া ব্যাখা করার জন্য রিবেস তৈরি করেন ।</p> +<h2 id="স্ট্যাটাস_ট্রাকিং_বনাম_ইঞ্জিনিয়ারিং_বাগ">স্ট্যাটাস ট্রাকিং বনাম ইঞ্জিনিয়ারিং বাগ</h2> +<p>মজিলার একটি বিশেষ নিয়ম আছে যাকে বলে <a href="/en-US/docs/Developer_Guide/Committing_Rules_and_Responsibilities">Sheriff</a>. Sheriffs মার্জিং কোডের চার্জে থাকে এবং শাখার স্ট্যাটাস পরিচালনা করে থাকে ।যেহেতু Firefox OS দলে আমাদের কম পরিমান সেরিফস স্কাউটিং আছে যারা বিফলতা পরীক্ষা করার জন্য ,ইহা কঠিন শেরিফের জন্য বের হওয়া সকল ত্রুটিপুর্ন প্যাচ বের করা জন্য ।</p> +<p>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.</p> +<p>তাছাড়া ,আমরা বাগ পৃথক করি স্ট্যাটাস ট্রাকিং বাগে এবং ইঞ্জিনিয়ারিং বাগে।</p> +<ul> + <li>একটি "meta" কিবোর্ড দিয়ে স্ট্যাটাস ট্রাকিং বাগ চিহ্নিত করা উচিত ।একটি স্ট্যাটাস রিওপেন্ড হতে পারে যদি এটি ক্রাইটেরিয়ার স্বীকার করা না মিলে থাকে অথবা বিফল হয়ে থাকে নতুন ভাবে প্রস্তুত করার সময়ে ।</li> + <li>একজন ইঞ্জিনিয়ারিং বাগ রিপেন্ড করে যে যদি ইহা কেবলমাত্র অটোমেশন টেস্টিং অথবা প্যাচ সম্পুর্নভাবে কোন কাজ করেনা ।যদি একটি প্যাচ পারসিঅ্যালি ইঞ্জিনিয়ারিং বাগ কাজ করে থাকে তবে আপনাকে উচিত বাগটি ক্লোন করা এবং ব্যবহার করা উচি<strong>ত</strong> "see also" ফিল্ড রেফারেন্স দিতে অরিজিনাল বাগের এবং বিফল ক্ষেত্র ব্যাখা করতে।</li> +</ul> +<div class="note"> + <p><strong>নোটঃযদি ইহা একটি ইউজার স্টরি বাগ হয়, প্রোজেক্ট ম্যানেজার ইউজার স্টোরি ফিল্ড ইউজার এক্সেপ্টেন্স । </strong></p> +</div> +<h3 id="যদি_আপনার_স্ট্যাটাস_ট্রাকিং_বাগের_উপরে_কোন_প্যাচ_দুর্ঘটনা_বশত_হয়ে_থাকে_তবে_তার_রিকাভারি">যদি আপনার স্ট্যাটাস ট্রাকিং বাগের উপরে কোন প্যাচ দুর্ঘটনা বশত হয়ে থাকে তবে তার রিকাভারি</h3> +<p>যদি আপনি করে থাকেন তবে ভয় পাবেন না।যদি দুর্ঘটনা বশত করে থাকেন তবে আপনি পাবেন review+,এবং এটি ট্রাঙ্কের উপরে ,অথবা কোন কিছু ফিক্সিং করার আগে রিপোর্ট করুন যা আপনার দরকারঃ</p> +<ol> + <li>Bugzilla UI এর কর্নারের নিচে "Clone this bug" তে চাপুন নতুন একটি বাগ তৈরি করার জন্য , এর ভিতরে অরজিনাল ক্লোনিং করুন।প্লিজ দেখুন যে হোয়াইটবোর্ড,কিবোর্ড এবং STR/userস্টোরি কপি করা এবং নতুন বাগে পোস্ট করা ।</li> + <li>পুরাতন বাগকে ব্লক করার জন্য নতুন বাগ সেট করুন । নতুন বাগ হবে নতুন স্ট্যাটাস ট্রাকিং বাগ।</li> + <li>নতুন প্রোজেক্ট ম্যানেজারকে ইনফো ফ্লাগ ব্যবহার করে জানাতে হবে যে বাগ ট্রাক পরিবর্তন হয়েছে আপনি আমাদের wiki তে পেতে পারেন <a href="https://wiki.mozilla.org/FirefoxOS/Teams">find e-mail addresses for the different project managers on Firefox OS</a> ।</li> + <li>বিফল স্টেপ অথবা নতুন ক্রিটেরিয়া ব্যাখা করার জন্য নতুন একজন ইঞ্জিনিয়ার তৈরি করুন ।আরো ,স্ট্যাটাস ট্রাকিং বাগ ব্লক করার জন্য নতুন বাগ ব্যবহার করুন ।</li> + <li>নতুন বাগের জন্য একটি ফিক্স চেষ্টা করুন। Happy hacking!!!</li> +</ol> +<h2 id="Uplifting_প্যাচেস_পুরাতন_শাখায়">Uplifting প্যাচেস পুরাতন শাখায়</h2> +<p>আপনি বাগের বিভিন্ন ভার্সনে বিভিন্ন ট্যাগ দেখতে পারেন ।যদি Firefox OS এর পুরাতন শাখায় প্যাচেস উঠাতে চান ,চেক করুন যে তার সম্পুর্ন ভাবে নিয়ম প্যাচ করে থাকে ,আমাদের এর উপরে আরো বিস্তারির জানুন <a href="https://wiki.mozilla.org/Release_Management/B2G_Landing">B2G Landing page</a> এর উপরে আরো বিস্তারির জানুন</p> 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 +--- +<div class="summary"> + <p><span class="seoSummary">যখন আপনি গায়া ডাটাবেসে নতুন কোন পরিবর্তন আনবেন তখন এবং এটি কাজ করবে , পরবর্তি স্টেপ হল টেস্টিং প্রক্রিয়া থেকে আপনার কাজ হল পরিবর্তন — এবং গায়ার বাকি কিছুর সাথে কাজ করে থাকে — প্রজেক্ট এর প্যাচ জমা দেয়ার পুর্বে দেখে নেয় ।এই অনুচ্ছেদ তা ব্যাখা করে থাকে। </span></p> +</div> +<p>টেস্টিং প্রক্রিয়া সাধারন্ত গঠিত হয়ঃ</p> +<ul> + <li>সট্যান্ডার্ড ডিবাগিং প্রক্রিয়া</li> + <li> automated tests চালানো</li> +</ul> +<p>চলুন পরীক্ষা করি কিছু নতুন এলাকা এখন ।</p> +<h2 id="Standard_ডিবাগিং">Standard ডিবাগিং</h2> +<p>যদি আপনি একজন অভিজ্ঞ ওয়েব ডেভেলপার হয়ে থাকেন তবে গায়া কোড আপনার কাছে একটি স্বাভাবিক প্রক্রিয়া আমরা ইতিমধ্যে কিভাবে <a href="/en-US/Firefox_OS/Developing_Gaia/Running_the_Gaia_codebase#Running_Gaia_in_Desktop_Firefox">run Gaia in your Desktop Firefox installation</a> কাজ করে তা জানিয়েছি এবং <a href="/en-US/Firefox_OS/Developing_Gaia/Making_Gaia_code_changes#Simple_code_change_example">make a basic change</a> কিভাবে করে ।আরো জটিল ডাটাবেসের কারনে ,আপনাকে একটি Firefox ডিবাগিং টুলস Desktop Firefox এ দেখতে হবে ।<br> + <br> + <strong>নোটঃ</strong> <a href="/en-US/docs/Tools">Tools zone</a> তে টুলস ব্যবহারের অনেক তথ্য পাওয়া যাবে ।</p> +<h2 id="Automated_tests">Automated tests</h2> +<p>আপনাকে স্ট্যান্ডার্ড অটোমেটেড টেস্ট ঠিক করে যে একটি প্যাচ যা গায়া কোড জমা দেয়ার আগে রান করাতে হয়ে থাকে ,নিশ্চিত করতে হবে যে আপনার কোড কোন ফোনের ফাংশনে জরুরী কাজে বাধা প্রদান করে না ।টেস্টগুলো আপনি রান করতে পারেনঃ</p> +<ul> + <li>unit tests</li> + <li>integration tests</li> + <li>performance tests</li> + <li>UI tests</li> +</ul> +<p>আমরা সাধারনত জিজ্ঞাসা করে থাকি যে আপনি টেস্ট রান করুন একটি প্যাচ জমা দেয়া শেখানো হয়ে থাকে ; আপনি যদি নতুন কন্ট্রিবুটর হয়ে থাকেন তবে সেক্ষেত্রে আপনি ভবিষ্যতে একজন ভাল কন্ট্রিবিউটর হতে জিজ্ঞাসা করতে হবে । আপনাকে গায়া রেপু আপডেটেড করতে হবে টেস্টটি রান করার আগে , এবং নিশ্চিত করুন যে আপনি একজন নতুন কন্ট্রিবিউটর হোয়ার আগে ।</p> +<div class="note"> + <p><strong>নোটঃ আপনি আরো বেশি তথ্য কিভাবে </strong> <a href="/en-US/Firefox_OS/Platform/Automated_testing">Firefox OS Automated testing page</a> এর উপরে কাজ করে তা দেখুন ।</p> +</div> +<div class="note"> + <p><strong>নোটঃ যদি সব সময় পাওয়া যায় তবে আপনাকে একটি অ্যাপ রান করা হয়ে থাকে একটি রিয়াল ডিভাইসের উপরে ( কিছু ফিচারস /হার্ডোয়্যার এমুলেটরেরের উপরে সাপোর্টেড নয়) </strong>অথবা B2G Desktop emulator অথবা Firefox Nightly iযদি নয় ।</p> +</div> +<h3 id="Unit_tests">Unit tests</h3> +<p>উনিট টেস্ট গুলো হল নিজস্ব কোডের বড় অ্যাপলিকেশনের জন্য —গায়ার ক্ষেত্রে ,নির্দিষ্ট অ্যাপ।গায়া ব্যবহার করেঃ</p> +<ul> + <li><a href="http://visionmedia.github.io/mocha/">mocha</a> ফ্রেম ওয়ার্কের জন্য</li> + <li><a href="http://chaijs.com/api/assert/">chai</a> এসেট লাইব্রেরি হিসেবে</li> + <li><a href="http://sinonjs.org/">sinon.js</a> মক এবং স্টাব লাইব্রেরির জন্য</li> + <li><a href="http://blanketjs.org/">blanket.js</a> টেস্ট কাভারেজের টুল</li> +</ul> +<p>আপনি ডাউনলোড করতে নিচেরটা কমান্ড করতে পারেন , ইন্সটল এবং হোস্ট একটি উনিটেস্ট সার্ভার (কিছুক্ষন এটি রান করুন ,সুতরাং একটি কাপ চা করতে যে সময় লাগে)ঃ</p> +<pre class="brush: bash">DEBUG=1 make +export FIREFOX=/Applications/FirefoxNightly.app/Contents/MacOS/firefox +bin/gaia-test</pre> +<p>এটা একটি নতুন ওয়েব পেজ খুলে দিবে একটি নতুন উনিট টেস্টের সাথে ।রান করুনঃ</p> +<ul> + <li> পেজের টেস্টটি রান করুন লিস্ট থেকে (একটি এস্টারিস্ক তাদের পাশে থাকে )</li> + <li> "Execute" বাটনে চাপুন ।</li> + <li>রেজাল্ট দেখতে পেজের প্রথমে স্ক্রল করুন ।</li> +</ul> +<p>উইন্ডোটী খুলে দিয়ে ,আপনি ফুল টেস্ট রান করতে পারেন একটি নতুন টারমিনাল উইন্ডো থেকেঃ</p> +<pre class="brush: bash">make test-agent-test</pre> +<div class="note"> + <p><strong>নোটঃ এটা অনেক বিশাল সময় , যেহেতু অনেক টেস্ট আছে রান করার জন্য </strong> (বিশেষ ভাবে একটি ঘন্টা অথবা আরো বেশি ), যেহেতু আপনাকে সম্ভবত টেস্টটি রান করানো জন্য অ্যাপটি মোটিভেটেড করতে হবে ।আপনাকে <code>APP=<app folder name></code> উপরে কমান্ড করতে হবে ,উদাহরন হিসেবে <code>APP=settings</code>.</p> +</div> +<div class="note"> + <p><strong>নোটঃআপনাকে আরো পড়তে হবে </strong> <a href="/en-US/Firefox_OS/Platform/Automated_testing/Gaia_unit_tests">Gaia Unit Tests</a> আরো উনিট টেস্ট তথ্যের জন্য।</p> +</div> +<h3 id="ইন্ট্রেগেশন_টেস্ট">ইন্ট্রেগেশন টেস্ট</h3> +<p>ইন্ট্রেগেশন টেস্টিং বিভিন্ন কোডের একত্রে একটি গ্রুপে কাজ করে থাকে তারা কিভাবে কাজ করে তা দেখার জন্য ,এবং লজিকাল নেক্সট স্টেপ উনিট টেস্টিং এর পরে ।গায়া JavaScript এ লেখা হয়ে থাকে মেরিঅনেটের স্ক্রিপ্ট ইন্ত্রেগাশনের দ্বারা এবং একটি python-based সার্ভার ।এটা গেটকো এর সাথে যোগাযোগ করতে পারে সুতরাং ইহা সম্ভব ব্রাউজারে কন্ট্রলের জন্য এবং Firefox OS ডিভাইস,এবং তাদের প্রত্যেকের সাথে সংযুক্ত ।</p> +<p>আপনি ট্রিগারটি ইন্ট্রেগাশন টেস্টের জিন্য কমান্ড দিতে পারেনঃ</p> +<pre class="brush: bash">make test-integration</pre> +<div class="note"> + <p><strong>নোটঃ উনিট টেস্ট হিসেবে সকল ইন্টারোগেশন টেস্ট রান কর যা ঐ সময়ে সময় গ্রহন করে থাকে ,সুতরাং আপনি প্রকাশ করতে পারেন </strong> <code>APP=<app ফোল্ডার name></code> এর উপরে একটি টেস্ট সিঙ্গেলে অ্যাপ।উদাহরন হিসেবে ,<code>APP=calendar</code>.</p> +</div> +<div class="note"> + <p><strong>নোটঃ আরো বেশি ইনটেগ্রাশনের জন্য ,পড়ুন </strong><a href="/en-US/Firefox_OS/Platform/Automated_testing/Gaia_integration_tests">Gaia integration tests</a>.</p> +</div> +<h3 id="Performance_tests">Performance tests</h3> +<p>গায়া পারফরমেন্স ট্রিগার করবে B2G Desktop,কিছু সময়ে অ্যাপ উদ্বোধন করবে এবং ক্যাল্কুলেট করবে একটি গড় গড় লোড সময় । একটি রানিং টেস্ট করার জন্য ,পারফরমেন্স ফ্রেমোয়ার্ক মেমোরি ব্যবহারের সংগ্রহ করবে অ্যাপটি এবং সিস্টেম প্রসেস(<code>b2g</code>).</p> +<p>টেস্টটি রান করার জন্য আপনাকে প্রয়োজন B2G Desktop ইন্সটল্ড করা ,এবং কমাণ্ড গুলো দেখুন</p> +<pre class="brush: bash">make টেস্ট -পারফ</pre> +<div class="note"> + <p><strong>নোটঃ অন্যান্য টেস্ট টাইপ অনুসারে , আপনি </strong> <code>APP=<app folder name></code> একটি সিঙ্গেল অ্যাপ এ দেখাতে সম্ভব ।উদাহরন হিসেবে<code>APP=settings</code>.</p> +</div> +<p>সম্পুর্ন গড় একটি <code>mozPerfDurationsAverage</code>ভ্যালু হিসেবে রিটার্ন দিবে,যেমনঃ</p> +<pre class="brush: json">"mozPerfDurationsAverage": 225.5</pre> +<p>গড় অ্যাপের লোড সময় হল মিলিসেকেন্ড ; অপ্টিমাল ব্যবহারের জন্য আপনাকে ১ সেকেন্ড সময় নিতে হবে । এই পারফমেন্স কিছু বিস্তারিত ব্যবহারের ভ্যালু আপনাকে ফেরত দিবেঃ</p> +<pre class="brush: json">{ + "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 + } +},</pre> +<p>টেস্ট পারফরের সবচেয়ে মুল নিয়ম হল "lower numbers are better"; উপরের সংখ্যাগুলো নিচের গুলোকে দেখায়ঃ</p> +<ul> + <li><code>uss</code>: unique set size</li> + <li><code>pss</code>: proportional set size</li> + <li><code>rss</code>: resident set size</li> + <li><code>vsize</code>: virtual set size</li> +</ul> +<p>সাধারনত Generally <code>vsize</code> >= <code>rss</code> >= <code>pss</code> >= <code>uss</code> . <code>vsize</code> এবং <code>rss প্রসেসরের অন্য প্রসেসরের ব্যবহারের সাথে কোন কিছু শেয়ারের প্রতিচ্ছবি দেয় না।</code>সুতরাং দুটি সংখ্যা যা আপনি দেখতে চান তা হল <code>pss</code> এবং <code>uss</code>.<br> + <br> + <code>uss হল ইউনিক প্রসেসের সম্পুর্ন মেমোরি । যদি সঠিক সময়ে মেমোরি টারমিনেটেড হয়ে থাকে তবে এটা মেমোরির পরিমান এটা বিবর্তনের চাবিকাঠি।</code><br> + <br> + <code>pss</code> হল প্রসেসরেরলাইব্রেরি শেয়ারের প্রফেসনাল আকার। এটা মনে করায় যে প্রসেস যদি টারমিনেটেড হয় তবে এটা বাহির হবে না।</p> +<div class="note"> + <p><strong>নোটঃআরো বেশি পারফরমেন্সের জন্য,পড়ুন </strong><a href="/en-US/Firefox_OS/Platform/Automated_testing/Gaia_performance_tests">Gaia performance tests</a>.</p> +</div> +<h3 id="UI_tests">UI tests</h3> +<p>দেখুন <a href="/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests">Gaia UI Tests Introduction</a>.</p> 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 +--- +<div class="blockIndicator warning"> + <p><strong>Warning:</strong> 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.</p> +</div> +<p>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.</p> +<h2 id="পূর্বশর্ত_সমূহ">পূর্বশর্ত সমূহ</h2> +<p>In order to dual boot Android and B2G, you have to meet these prerequisites:</p> +<ul> + <li>You have to have built B2G for the Galaxy S2</li> + <li>You have to download the <a href="http://d-h.st/AEZ" title="http://d-h.st/users/siyah/s2">Siyah kernel</a> v. 5.0.1 for the Galaxy S2</li> + <li>You need the tool simg2img, that you get automatically if you build B2G following the guide on MDN</li> + <li>You need the heimdall tool, best if version 1.3.1 as you may encounter problems with version 1.3.2</li> +</ul> +<h2 id="একক_অপারেশন_সমূহ">একক অপারেশন সমূহ</h2> +<p>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.</p> +<p>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:</p> +<pre>SUBSYSTEM=="usb", ATTRS{idVendor}=="04e8", MODE="0666"</pre> +<p>In order to activate this rule, you should restart udev:</p> +<pre>sudo service udev restart</pre> +<p>and then unplug and replug in the phone. The above rule will also allow adb to access the SGS2 without requiring root privlidges.</p> +<h3 id="সিইয়াহ_কার্নেল_ফ্ল্যাশ_করা">সিইয়াহ কার্নেল ফ্ল্যাশ করা</h3> +<p>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:</p> +<ol> + <li>Switch off your phone</li> + <li>Reboot in download mode (press together volume down + home + power buttons and then, when asked, volume up button)</li> + <li>Use heimdall to flash the kernel with the following command (your phone needs to be connected to your PC): + <pre>heimdall flash --kernel /path/to/zImage</pre> + </li> +</ol> +<p>Once the kernel is flashed the phone will reboot.</p> +<h3 id="B2G_রম_পরিবেশ_প্রস্তুত_করা">B2G রম পরিবেশ প্রস্তুত করা</h3> +<p>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:</p> +<ol> + <li>Switch off your phone</li> + <li>Reboot in recovery mode (press together volume up + home + power buttons)</li> + <li>In the CWMR Touch interface, go to dual-boot options -> Wipe 2ndROM data/cache -> Yes - Wipe. This operation will take some time</li> +</ol> +<p>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.</p> +<h2 id="B2G_আপডেট_অপারেশন_সমূহ">B2G আপডেট অপারেশন সমূহ</h2> +<p>The following operations need to be done every time you build a new version of B2G.</p> +<p>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:</p> +<ul> + <li>simg2img, found in B2G/out/target/product/galaxys2/system/bin/</li> + <li>system.img, found in B2G/out/target/product/galaxys2/</li> + <li>userdata.img, found in B2G/out/target/product/galaxys2/</li> +</ul> +<p>Once you have all the files in one place, do the following:</p> +<ol> + <li>Create a data.img file out of the sparse file userdata.img. You can do it with the following command: + <pre>simg2img userdata.img data.img</pre> + </li> + <li>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: + <pre>adb push /path/to/data.img /sdcard/.secondrom/data.img</pre> + </li> + <li>Switch off your phone</li> + <li>Reboot in download mode (press together volume down + home + power buttons and then, when asked, volume up button)</li> + <li>Use heimdall to flash B2G firmware inside the second partition: + <pre>heimdall flash --hidden system.img</pre> + </li> +</ol> +<p>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.</p> +<div class="note"> + <strong>Note:</strong> 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.</div> +<h2 id="বুট_অপারেশন_সমূহ">বুট অপারেশন সমূহ</h2> +<p>The following operations need to be done every time you boot inside B2G.</p> +<p>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:</p> +<pre>cd B2G/gaia +GAIA_DOMAIN=foo.org make install-gaia</pre> +<p>After the upload of Gaia is completed, on your phone's screen the B2G interface will appear.</p> 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 +--- +<p> ফায়ারফক্স ওএস বিল্ড কোড পাওয়ার আগে, আপনার একটি সঠিকভাবে কনফিগার <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions" title="https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions">বিল্ড সিস্টেম </a> প্রয়োজন. আপনি বর্তমানে ৬৪ বিট লিনাক্স ডিস্ট্রিবিউশন এবং ওএস এক্স -এর উপর তা নির্মাণ করতে পারেন ।</p> +<p><strong>Note</strong>: 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.</p> +<h2 id="একটি_সামঞ্জস্যপূর্ণ_ডিভাইস_এমুলেটর"><span class="short_text" id="result_box" lang="bn"><span class="hps">একটি সামঞ্জস্যপূর্ণ</span> <span class="hps">ডিভাইস /</span> <span class="hps">এমুলেটর</span></span></h2> +<p> আপনার একটি যন্ত্র বা এমুলেটর ব্যাবহার করা প্রয়োজন । যদিও আমরা কিছু ফোন এর সমর্থন করি, যাদের ভিন্নতা আছে । আমরা বর্তমানে সেই সকল ফোনএর সমর্থন দিয়ে থাকি যা অন্যদের থেকে বেশি ভাল ।</p> +<div class="note"> + <p><strong>Note</strong>: Mozilla's <a href="https://github.com/mozilla-b2g/B2G">B2G source code</a> 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.</p> +</div> +<h3 id="Tier_1">Tier 1</h3> +<p>Tier 1 devices represent a primary target for development and will typically be the first to receive bug fixes and feature updates.</p> +<dl> + <dt> + Keon</dt> + <dd> + Keon is the <a href="http://www.geeksphone.com/" title="http://www.geeksphone.com/">Geeksphone</a> Keon device, which was one of the initial developer phones. Note that builds for this device are provided by Geeksphone.</dd> + <dt> + Inari</dt> + <dd> + Inari is another testing device. Use this configuration to build for the ZTE Open device. <strong>Warning:</strong> newer builds of Firefox OS may have trouble booting on the ZTE Open's default boot partition.</dd> + <dt> + Unagi</dt> + <dd> + 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.</dd> + <dt> + Otoro</dt> + <dd> + 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.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Pandaboard" title="/en-US/docs/Mozilla/Firefox_OS/Pandaboard">Pandaboard</a></dt> + <dd> + The Pandaboard is a development board based on the OMAP 4 architecture, used to do development work on mobile platforms.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators">Emulator (ARM and x86)</a></dt> + <dd> + There are two emulators available: one emulates ARM code and the other runs everything in x86 code. <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators">Learn more about installing and using the emulators</a>.</dd> + <dd> + <strong>Note that you shouldn't use the x86 emulator — it is hard to install and not well supported.</strong></dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Desktop</a></dt> + <dd> + You can also build a desktop version of Firefox OS; this runs <a href="/en-US/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a> in a <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> application, and you then use the <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Introduction_to_Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Introduction_to_Gaia">Gaia</a> user experience inside it.</dd> +</dl> +<p>You can, of course, build the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">desktop client</a> or one of the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators">emulators</a> without a phone.</p> +<h3 id="Tier_2">Tier 2</h3> +<p><span id="answer_long1" style="display: block;">Tier 2 devices are generally functional and many developers (especially app developers) are using them, so they tend to pick up changes secondarily.</span></p> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Samsung_Nexus_S" title="/en-US/docs/Mozilla/Firefox_OS/Samsung_Nexus_S"><span class="link-https">Samsung Nexus S</span></a></dt> + <dd> + The known working model numbers of Nexus S devices are GT-I9020A and GT-I9023. Others may work.</dd> + <dt> + Samsung Nexus S 4G</dt> + <dd> + The SPH-D720 is supported as a tier 2 device.</dd> +</dl> +<h3 id="Tier_3">Tier 3</h3> +<p><span id="answer_long1" style="display: block;">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.</span></p> +<dl> + <dt> + Samsung Galaxy S2</dt> + <dd> + 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)</dd> + <dt> + Samsung Galaxy Nexus</dt> + <dd> + We are not currently aware of any variations that are not compatible.</dd> + <dt> + Nexus 4</dt> + <dd> + 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 <a href="https://developers.google.com/android/nexus/images#occamjwr66y">images available from Google</a>)</dd> + <dt> + Nexus 5</dt> + <dd> + Some users on IRC have tested this successfully.</dd> + <dt> + Tara</dt> + <dd> + 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".</dd> +</dl> +<div class="warning"> + <strong>Important</strong>: Only devices running at least <strong>Android 4</strong> (aka <strong>Ice Cream Sandwich</strong>) are supported. If your device is listed above but running an older version of Android, please update it before doing anything.</div> +<div class="note"> + <p><strong>Note</strong>: Tier 2 and Tier 3 devices have a software home button instead of a hardware home button</p> + <p>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, <span style="line-height: 1.5em; font-size: 14px;">open the Settings app, go to the <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a>, and then toggle on the <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Enable_software_home_button">Enable software home button</a> preference.</span></p> + <p><span style="line-height: 1.5em; font-size: 14px;">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.</span></p> +</div> +<h2 id="Requirements_for_GNULinux">Requirements for GNU/Linux</h2> +<p>To build on Linux, you'll need:</p> +<ul> + <li>A <strong>64 bit GNU/Linux</strong> distribution (Ubuntu 12.04 recommended).</li> + <li>At least <strong>4 GB</strong> of RAM.</li> + <li>At least <strong>30 GB</strong> of available hard disk space.</li> +</ul> +<p>This is more than the bare minimum, but sometimes building fails just because it's missing resources. A typical error in this case is "<span style="line-height: 1.5;"><strong>arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)</strong>".</span></p> +<p>You will also need the following tools installed:</p> +<ul> + <li><strong>autoconf 2.13</strong></li> + <li><strong>bison</strong></li> + <li><strong>bzip2</strong></li> + <li><strong>ccache</strong></li> + <li><strong>curl</strong></li> + <li><strong>flex</strong></li> + <li><strong>gawk</strong></li> + <li><strong>git</strong></li> + <li><strong>gcc / g++ / g++-multilib</strong></li> + <li><strong>make</strong></li> + <li><strong>OpenGL shared libraries</strong></li> + <li><strong>patch</strong></li> + <li><strong>X11 headers</strong></li> + <li><strong>32-bit ncurses</strong></li> + <li><strong>32-bit zlib</strong></li> +</ul> +<h3 id="Emulator_build_issues"><strong>Emulator build issues</strong></h3> +<p>If you are making an <strong>emulator</strong> build, you need to pay attention to these issues:</p> +<div class="note"> + <p><strong>First, note that you shouldn't use the x86 emulator — it is hard to install and not well supported.</strong></p> +</div> +<p>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 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=897727" title="https://bugzilla.mozilla.org/show_bug.cgi?id=897727">bug 897727</a>.</p> +<p>There are two ways that you can solve this problem:</p> +<h4 id="Solution_1_have_both_32bit_and_64bit_OpenGL_libs_installed_with_the_right_symlinks">Solution #1: have both 32bit and 64bit OpenGL libs installed, with the right symlinks</h4> +<p>If your linux distro has multilib packages for OpenGL libraries, you can attempt installing them. You might then have to manually create some symlinks.</p> +<p>For example, here is the situation on Ubuntu 12.04 LTS x86-64. On this distribution, the <code>libgl1-mesa-dev</code> package cannot be installed simultaneously in x86-64 and i386 versions, but you can have the following combination of packages simultaneously installed:</p> +<pre class="bz_comment_text" id="comment_text_12">sudo apt-get install libgl1-mesa-dev libglapi-mesa:i386 libgl1-mesa-glx:i386</pre> +<p>After having run this command, you will still have to manually create some symlinks for the emulator build to succeed:</p> +<pre class="note">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</pre> +<h4 id="Solution_2_just_patch_the_emulator_so_it_only_builds_64bit">Solution #2: just patch the emulator so it only builds 64bit</h4> +<p>Just apply <a href="https://bug897727.bugzilla.mozilla.org/attachment.cgi?id=786280" title="https://bug897727.bugzilla.mozilla.org/attachment.cgi?id=786280">this patch</a> 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.</p> +<h3 id="64_bit_requirement_installation">64 bit requirement installation</h3> +<p>This section lists the commands you need to run in different Linux distributions to install all the requirements for building Firefox OS.</p> +<h4 id="Ubuntu_12.04_Linux_Mint_13_Debian_6">Ubuntu 12.04 / Linux Mint 13 / Debian 6</h4> +<p>Run the following command in Terminal:</p> +<pre>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</pre> +<p>If you'll build for Nexus 5, run the following command in Terminal:</p> +<pre>sudo apt-get install libxml2-utils </pre> +<p>And see the above comments about emulator build issues!</p> +<h4 id="Ubuntu_12.10">Ubuntu 12.10</h4> +<p>Run the following command in Terminal:</p> +<pre>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</pre> +<p>In addition to the emulator build issues discussed above, the compiler will default to <code>gcc-4.7</code>, which will fail to build with an error along the following lines:</p> +<p>"<code>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"</code></p> +<p>To fix this, you will need to specify GCC 4.6 as the default host compiler after having retrieved the B2G sources: Read <a href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler">Changing the default host compiler</a> to find out how to do it.</p> +<p class="note">In a fresh Ubuntu 12.10 install, you'll get an error about unmet dependencies for ia32-libs. The following commands fix it:</p> +<pre>sudo dpkg --add-architecture i386 +sudo apt-get update +sudo apt-get install ia32-libs</pre> +<h4 id="Ubuntu_13.04">Ubuntu 13.04</h4> +<p>Run the following command in Terminal:</p> +<pre>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</pre> +<p>In addition to the emulator build issues discussed above, the compiler will default to <code>gcc-4.7</code>, which will fail to build with an error along the following lines:</p> +<p>"<code>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"</code></p> +<p>To fix this, you will need to specify GCC 4.6 as the default host compiler after having retrieved the B2G sources: Read <a href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler">Changing the default host compiler</a> to find out how to do it.</p> +<h4 id="Ubuntu_13.10">Ubuntu 13.10</h4> +<p>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:<br> + </p> +<pre>sudo dpkg --add-architecture i386 +sudo apt-get update</pre> +<p>Once you've completed that, then you can install the necessary packages:</p> +<pre style="font-family: 'Open Sans', sans-serif; line-height: 21px;">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" </pre> +<h4 id="Fedora_17181920"><br> + Fedora 17/18/19/20</h4> +<p>Run the following command in Terminal:</p> +<pre class="note">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</pre> +<p>In addition to the above you will need GCC 4.6.x in order to compile the project:</p> +<ul> + <li><a href="http://people.mozilla.org/~gsvelto/gcc-4.6.4-fc18.tar.xz">Pre-compiled GCC 4.6.x for Fedora 17/18</a></li> + <li><a href="http://people.mozilla.org/~gsvelto/gcc-4.6.4-fc19.tar.xz">Pre-compiled GCC 4.6.x for Fedora 19/20</a></li> +</ul> +<p>Download the right version for your Fedora installation, then install it to <code>/opt,</code> with the following command on Fedora 17/18:</p> +<pre class="note">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 +</pre> +<p>And with the following command for Fedora 19/20:</p> +<pre class="note">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 +</pre> +<p>You will need to specify GCC 4.6.x as the default host compiler after having retrieved the B2G sources: Read <a href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler">Changing the default host compiler</a> to find out how to do it.</p> +<p>If build fails with the compiler complaining about not finding libmpc.so.2, install the package compat-libmpc</p> +<h4 id="Arch_Linux"><strong>Arch Linux</strong></h4> +<p>Run the following command in Terminal:</p> +<pre class="note">sudo <span style=""><span style="">pacman -S --needed </span></span><span style=""><span style="">alsa-lib </span></span><span style=""><span style="">autoconf2.13</span></span><span style=""><span style=""> bison</span></span><span style=""><span style=""> ccache</span></span><span style=""><span style=""> </span></span><span style=""><span style="">curl firefox </span></span><span style=""><span style="">flex </span></span><span style=""><span style="">gcc-multilib </span></span><span style=""><span style="">git </span></span><span style=""><span style="">gperf </span></span><span style=""><span style="">libnotify </span></span><span style=""><span style="">libxt </span></span><span style=""><span style="">libx11 mesa multilib-devel </span></span><span style=""><span style="">wget wireless_tools </span></span><span style=""><span style="">yasm</span></span><span style=""><span style=""> zip </span></span><span style=""><span style="">lib32-mesa </span></span>lib32-mesa-libgl <span style=""><span style="">lib32-ncurses lib32-readline</span></span><span style=""><span style=""> </span></span><span style=""><span style="">lib32-zlib</span></span></pre> +<p>To install the lib32-* packages you need to have the multilib repository enabled.</p> +<p>B2G <a href="https://developer.mozilla.org/en-US/Firefox_OS/Building#KeyedVector.h.3A193.3A31.3A_error.3A_indexOfKey_was_not_declared_in_this_scope">can only be compiled with gcc4.6.4</a>, and because Arch Linux always has bleeding edge software you will need to install <a href="https://aur.archlinux.org/packages/gcc46-multilib">gcc46-multilib from AUR</a>. Note that you will have to edit the PKGBUILD and add <code>staticlibs</code> to the <code>options</code> array, or gcc will be unable to compile B2G and give you a <code>cannot find -lgcc</code> error when compiling. You will also need to add the following to your <code>.userconfig</code> file:</p> +<pre class="language-html">export CC=gcc-4.6.4 +export CXX=g++-4.6.4</pre> +<p>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 <code>virtualenv</code>/<code>virtualenvwrapper</code>:</p> +<pre><span style=""><span style="">sudo pacman -S python-virtualenvwrapper +</span></span>source /usr/bin/virtualenvwrapper.sh +mkvirtualenv -p `which python2` firefoxos +workon firefoxos +</pre> +<p>Android will complain that you need make 3.81 or make 3.82 instead of 4.0. You can download <a href="https://aur.archlinux.org/packages/make-3.81/">make 3.81 from AUR</a>. 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.</p> +<pre>mkdir -p ~/bin +ln -s `which make-3.81` ~/bin/make +export PATH=~/bin:$PATH +</pre> +<p>Android also needs the Java6 SDK and Arch only has Java7. Unfortunately the aur build is broken, but you can still download the <a href="http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-javase6-419409.html#jdk-6u45-oth-JPR">Java 6 SDK</a> and install it manually. You will then need to put it in your path.</p> +<pre>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 + +</pre> +<h4 id="Gentoo_Linux"><strong>Gentoo Linux</strong></h4> +<h5 id="Installing_ccache">Installing ccache</h5> +<p>You will need to install <strong><a href="http://www.gentoo.org/doc/en/handbook/handbook-x86.xml?part=2&chap=3#doc_chap3">ccache</a></strong>, a tool for caching partial builds.</p> +<pre><span style=""><span style=""># emerge -av ccache</span></span> +</pre> +<p>Because ccache is known to frequently cause support issues, Gentoo encourages you to use it <em>explicitly</em> and <em>sparingly</em>.</p> +<p>To enable the required use of ccache, on <em>the subsequent step</em> of this guide where the <code>./build.sh</code> script is called, Gentoo users should instead run the command with an explicitly extended path, ie.</p> +<pre><span style=""><span style=""><strong>PATH=/usr/lib64/ccache/bin:$PATH</strong> ./build.sh</span></span> +</pre> +<h5 id="Generating_Partition_Images">Generating Partition Images</h5> +<p>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 <strong><em>fastboot</em></strong> utility)</p> +<p>The filesystem image format used in this case is YAFFS2 (Yet Another Filesystem 2). Gentoo has support for the very latest (ie. git HEAD) <code>yaffs2-utils</code> 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.)</p> +<pre># emerge --autounmask-write yaffs2-utils; etc-update; emerge -av yaffs2-utils</pre> +<p>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:</p> +<pre>mkyaffs2image system/ system.img</pre> +<h2 id="Requirements_for_Mac_OS_X">Requirements for Mac OS X</h2> +<p>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.</p> +<div class="note"> + <p><strong>Note: Configuring and Building B2G for Keon WON'T WORK on a Mac</strong>. You'll need to use Linux to build B2G for this device.</p> +</div> +<h3 id="Install_XCode_Command_Line_Utilities"><strong>Install XCode Command Line Utilities</strong></h3> +<p>You need to install Xcode's Command Line Utilities. You can download <em>just</em> the Command Line Utilities from <a href="https://developer.apple.com/downloads/" title="https://developer.apple.com/downloads/">Apple's developer downloads page</a> for your particular version of OS X, however if you would like the entire Xcode suite of applications, you can <a class="external" href="http://itunes.apple.com/us/app/xcode/id497799835?mt=12" style="line-height: 1.572;" title="http://itunes.apple.com/us/app/xcode/id497799835?mt=12">install Xcode</a><span style="line-height: 1.572;"> through the Mac App Store. </span></p> +<p>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.</p> +<p><img alt="Screenshot of Xcode Downloads Command Line Tools" src="/files/4557/xcode_downloads_command_line_tools.png" style="width: 750px; height: 528px;"></p> +<div class="note"> + <strong>Note:</strong> 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.</div> +<h3 id="Run_Firefox_OS_Mac_Bootstrap">Run Firefox OS Mac Bootstrap</h3> +<p>Next, open a terminal and run the following command:</p> +<pre class="brush: bash">curl -fsSL https://raw.github.com/mozilla-b2g/B2G/master/scripts/bootstrap-mac.sh | bash</pre> +<p>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:</p> +<ul> + <li><code>git</code></li> + <li><code>gpg</code></li> + <li><code>ccache</code></li> + <li><code>yasm</code></li> + <li><code>autoconf-213</code></li> + <li><code>gcc-4.6</code></li> + <li><code>homebrew</code></li> +</ul> +<h4 id="Xcode_wrangling">Xcode wrangling</h4> +<p>If you have already upgraded to Xcode 4.4+ and get the message that Xcode is outdated, check the Xcode path with:</p> +<pre>xcode-select -print-path</pre> +<p>If it still points to <code>/Developer</code> you can update the path with:</p> +<pre>sudo xcode-select -switch /Applications/Xcode.app</pre> +<h4 id="Making_the_Mac_OS_X_10.6_SDK_available">Making the Mac OS X 10.6 SDK available</h4> +<p>You also need to have the Mac OS X 10.6 SDK available. The SDK needs to be available at</p> +<pre>/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/</pre> +<p>If it cannot be found there you will need to extract and copy it from Xcode 4.3. To do this:</p> +<ol> + <li>Download the XCode 4.3 .dmg file from the <a class="external" href="https://developer.apple.com/downloads/index.action">Apple Developer</a> portal (you'll need an <a href="https://developer.apple.com/register/index.action" title="https://developer.apple.com/register/index.action">Apple Developer account</a>).</li> + <li>Download the utility <a href="http://www.charlessoft.com/" title="http://www.charlessoft.com/">Pacifist</a> 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 <em>Ctrl + click</em> on the MacOSX10.6.sdk directory and Extract it to a suitable location.</li> + <li>Add a symlink from the 10.6 SDK location to the <code>/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/</code> directory. For example, if you put the 10.6 SDK on your desktop, the comment would be</li> +</ol> +<pre>ln -s /Users/<em><yourusername></em>/Desktop/MacOSX10.6.sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/</pre> +<h3 id="Be_aware_of_Mac_file_system_case_sensitivity">Be aware of Mac file system case sensitivity</h3> +<p>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 <code>xt_CONNMARK.h</code> and <code>xt_connmark.h</code>. This results in a number of files appearing to be modified in <code>/kernel</code> after a fresh <code>./config.sh</code>.</p> +<p>In many cases you can run the build just fine; for some platforms, however, you may encounter the following error:</p> +<pre><span class="quote">ERROR: You have uncommited changes in kernel +You may force overwriting these changes +with |source build/envsetup.sh force| + +ERROR: Patching of kernel/ failed.</span></pre> +<p><span class="quote">Please see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867259" title="https://bugzilla.mozilla.org/show_bug.cgi?id=867259">bug 867259</a></span> for more discussion and possible fixes for this problem.</p> +<p>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:</p> +<pre>hdiutil create -volname 'firefoxos' -type SPARSE -fs 'Case-sensitive Journaled HFS+' -size 40g ~/firefoxos.sparseimage</pre> +<p>Mount the drive with:</p> +<pre>open ~/firefoxos.sparseimage</pre> +<p>Change into the mounted drive with:</p> +<pre>cd /Volumes/firefoxos/</pre> +<p>You can then check out the code and compile from this location without worrying about case-sensitivity problems.</p> +<h3 id="Mountain_Lion_homebrew_gotcha">Mountain Lion homebrew gotcha</h3> +<div> + <div> + If you are on Mountain Lion and you receive an error during the installation of the dependencies via homebrew, such as:</div> +</div> +<div> + <pre>clang: error: unable to execute command: Segmentation fault: 11</pre> + ... try reinstalling the dependency manually adding the <code>--use-gcc</code> flag, for example: + <pre>brew install mpfr --use-gcc</pre> +</div> +<h3 id="Follow_Samsung_Galaxy_S2_extra_steps">Follow Samsung Galaxy S2 extra steps</h3> +<p>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 <strong>not</strong> done for you by the bootstrap script!</p> +<div class="note"> + <strong>Note:</strong> If you have installed the <a class="external" href="http://www.samsung.com/us/kies/" title="http://www.samsung.com/us/kies/">Samsung Kies</a> 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 <strong>will not work</strong> 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 <code>~/Library/Application Support/.FUS</code>, and leaves a reference to a utility there in your user startup items list. You will want to remove these manually.</div> +<h3 class="note" id="Fix_libmpc_dependency_if_broken">Fix libmpc dependency if broken</h3> +<p><code>gcc 4.6</code> was built with <code>libmpc 0.9</code>; if you then use homebrew to update packages, libmpc gets updated to version 1.0, but homebrew doesn't rebuild <code>gcc 4.6</code> after the library version changes. So you need to create a symlink to make things work again, like this:</p> +<pre>cd /usr/local/lib/ +ln -s libmpc.3.dylib libmpc.2.dylib</pre> +<h3 id="Optional_Install_HAX">Optional: Install HAX</h3> +<p>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 <a class="external" href="http://software.intel.com/en-us/articles/intel-hardware-accelerated-execution-manager/" title="http://software.intel.com/en-us/articles/intel-hardware-accelerated-execution-manager/">download and install</a> it. It's not required, but it can improve emulation performance and stability. </p> +<p>Before you install HAX you will need to install the <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK</a>.</p> +<h2 class="note" id="Install_adb">Install adb</h2> +<p>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 <code>adb</code>, the Android Debug Bridge. Our <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing ADB</a> article explains how to get <code>adb</code> installed.</p> +<h2 class="note" id="Install_heimdall">Install heimdall</h2> +<p>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 <strong>not</strong> needed for any other device. For other devices, we build and use the fastboot utility instead.</p> +<div class="note"> + <strong>Note:</strong> Again, it's important to note that this is <strong>only required for installing Firefox OS on the Samsung Galaxy S2</strong>.</div> +<p>There are two ways to install heimdall:</p> +<ul> + <li>You can <a class="link-https" href="https://github.com/Benjamin-Dobell/Heimdall" title="https://github.com/Benjamin-Dobell/Heimdall">download the code</a> GitHub and build it yourself.</li> + <li>Use a package manager to install it. + <ul> + <li>On Linux: <code>sudo apt-get install libusb-1.0-0 libusb-1.0-0-dev</code></li> + <li>On Mac, you can <a class="link-https" href="https://github.com/downloads/Benjamin-Dobell/Heimdall/heimdall-suite-1.3.2-mac.dmg" title="https://github.com/downloads/Benjamin-Dobell/Heimdall/heimdall-suite-1.3.2-mac.dmg">download an installer package</a> and use that.</li> + </ul> + </li> +</ul> +<h2 id="Configure_ccache">Configure ccache</h2> +<p>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:</p> +<pre><code>$ ccache --max-size 3GB</code></pre> +<h2 id="For_Linux_configure_the_udev_rule_for_your_phone">For Linux: configure the udev rule for your phone</h2> +<div class="note"> + <p><strong>Note</strong>: This section is specific to Linux; Mac OS X has the necessary device permissions set up already.</p> +</div> +<p>Next, you need to confingure the udev rule for your phone,</p> +<p>You can get the USB vendor ID by running <code>lsusb</code> with your phone plugged in, but typically it's Google <code>18d1,</code> Samsung <code>04e8</code>, ZTE <code>19d2</code>, Geeksphone/Qualcomm <code>05c6</code>. Add this line in your <code>/etc/udev/rules.d/android.rules</code> file (replacing <code>XXXX</code> with the ID for your device):</p> +<pre>SUBSYSTEM=="usb", ATTR{idVendor}=="XXXX", MODE="0666", GROUP="plugdev"</pre> +<p>Take ZTE for example, the content in android.rules will be</p> +<pre style="font-size: 14px;">SUBSYSTEM=="usb", ATTR{idVendor}=="19d2", MODE="0666", GROUP="plugdev"</pre> +<div class="note"> + <p><span style="line-height: 1.572;">If the file doesn't exist, create it. The <code>rules.d</code> directory is usually read only by default, so you may have to use <code>chmod</code> to make the directory writeable, or the file, or both.</span></p> +</div> +<p><span style="line-height: 1.572;">Once you've saved the file, and closed it, make the file readable:</span></p> +<pre>sudo chmod a+r /etc/udev/rules.d/android.rules +</pre> +<p>Now that the udev rules have been updated, restart the udev daemon. For ubuntu:</p> +<pre>sudo service udev restart</pre> +<p>Finally, unplug and the USB cable but don't replug it in because we need to enable remote debugging on the phone first.</p> +<h2 id="Enable_remote_debugging">Enable remote debugging</h2> +<p>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 <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Remote_debugging">Remote Debugging</a> in <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a> (this was called Developer mode on older versions.) Once the option is checked, remote debugging is enabled, and you are ready to go.</p> +<p>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 <code>adb devices</code> command. If everything has worked ok, you should see an output similar to this (the following is for a Geeksphone Keon):</p> +<pre style="font-size: 14px;">$ adb devices +List of devices attached +full_keon device</pre> +<p>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.</p> +<h2 id="Backup_the_phone_system_partition">Backup the phone system partition</h2> +<div class="note"> + <p><strong>Note</strong>: 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.</p> +</div> +<p>It is recommended that you back up the entire Android system partition on your phone.</p> +<p>You can use this copy of the binary blobs for Android in case you later delete your B2G tree. To do this, run:</p> +<pre>adb pull /system <backup target dir>/system +</pre> +<p> Depending on the phone, you may also need to pull the <code>/data</code> and/or <code>/vendor</code> directories:</p> +<pre>adb pull /data <backup target dir>/data +adb pull /vendor <backup target dir>/vendor +</pre> +<p>If the pull commands fail with an "insufficient permission" message, try the following:</p> +<ul> + <li>stop and restart the adb server, or if that fails,</li> + <li>double-check that you have granted root permissions to the <code>adb</code> tool within your custom ROM (e.g. under CyanogenMod, change <em>Settings > System > Developer Options > Root Access</em> to <em>Apps and ADB</em> or <em>ADB only</em>).</li> + <li>Verify that you have set up the udev rule correctly (see {{ anch("For Linux: configure the udev rule for your phone") }}.</li> +</ul> +<h2 id="On_to_the_next_step">On to the next step</h2> +<p>At this point, you should be ready to <a href="/en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build">fetch the Firefox OS code</a>!</p> 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 +--- +<dl> + <dt> </dt> + <dt><span class="short_text" id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="hps">কি?</span></span></dt> + <dd><span id="result_box" lang="bn"><span class="hps">এটা <span id="result_box" lang="bn"><span class="hps">সম্পূর্ণরূপে</span> <span id="result_box" lang="bn"><span class="hps">ওপেন</span> <span class="hps">ওয়েব</span> <span class="hps">স্ট্যান্ডার্ড</span> <span class="alt-edited hps">ব্যবহার করে <span id="result_box" lang="bn"><span class="hps">নির্মিত</span> <span class="hps">একটি নতুন</span> <span class="hps">মোবাইল</span> <span class="hps">অপারেটিং</span> <span class="hps">সিস্টেম।</span></span></span></span></span></span></span> <span id="result_box" lang="bn"><span class="hps">এটি <span id="result_box" lang="bn"><span class="alt-edited hps">ডিভাইসের সব কাজকর্ম কে</span><span class="hps"><span id="result_box" lang="bn"><span class="hps"> <span id="result_box" lang="bn"><span class="atn hps">(কল করা</span><span>,</span> <span class="hps">মেসেজিং,</span> <span class="hps">ব্রাউজিং</span><span>, ইত্যাদি)<span id="result_box" lang="bn"> <span class="hps">HTML5 এর</span> <span class="hps">অ্যাপ্লিকেশন হিসাবে ডেভেলপ করার সুবিধা দেয়, যা <span id="result_box" lang="bn"><span class="hps">একটি</span> <span class="hps">ফোন এর</span> <span class="hps">অন্তর্নিহিত</span> <span class="hps">ক্ষমতা</span> <span class="alt-edited hps">ব্যবহার করতে পারে। এ সুবিধাগুলো'র ব্যবহার এতদিন শুধু অন্যান্য অপারেটিং সিস্টেমের নেটিভ অ্যাপের মধ্যেই সীমাবদ্ধ ছিল।</span></span></span></span></span></span></span></span></span></span></span></span></dd> + <dt><span class="short_text" id="result_box" lang="bn"><span class="hps">আমি কিভাবে</span> <span class="hps">একটি ডেভেলপার</span> <span class="hps">প্রিভিউ</span> <span class="hps">ফোন</span> <span class="hps">পেতে পারি?</span></span></dt> + <dd>আপনি <a href="http://www.geeksphone.com/">Geeksphone</a> <span id="result_box" lang="bn"><span class="hps">ওয়েবসাইটে</span> <span class="alt-edited hps">একটি</span> <span class="hps">কিনতে পারেন</span> </span>অথবা আপনি যদি একজন মজিলা রেপ হয়ে থাকেন তাহলে <a href="https://wiki.mozilla.org/ReMo/SOPs/Keon_Request" title="https://wiki.mozilla.org/ReMo/SOPs/Keon_Request">Keon ফোন পাওয়ার জন্য আবেদন করতে পারেন</a>।</dd> + <dt>যদি আমি একটি ফোন কিনতে না চাই, <span id="result_box" lang="bn"><span class="alt-edited hps">তখনও </span></span>কি আমি <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">অপারেটিং সিস্টেমের জন্য</span> <span class="hps">একটি অ্যাপ্লিকেশন ডেভেলপ করতে পারব?</span></span></dt> + <dd><span id="result_box" lang="bn"><span class="alt-edited hps">অবশ্যই</span><span>!</span> <span class="hps">আপনি</span> <span class="alt-edited hps">অ্যান্ড্রয়েড</span> এ <span class="hps">আপনার অ্যাপ্লিকেশন</span> <span id="result_box" lang="bn"><span class="hps">পরীক্ষা করতে পারবেন</span></span> </span>(<a href="https://hacks.mozilla.org/2012/10/firefox-marketplace-aurora/">ফায়ারফক্স মার্কেটপ্লেস ব্যবহার করে</a>) অথবা আপনার <span id="result_box" lang="bn"><span class="hps">ডেক্সটপ এ</span></span> <a href="/bn-BD/docs/Tools/Firefox_OS_Simulator">Firefox OS সিমুলেটর</a> ব্যবহার করে।</dd> + <dt><span class="short_text" id="result_box" lang="bn"><span class="hps">ফাইনাল বা সম্পুর্ণ নির্মিত ফোনের সাথে এটি কিভাবে তুলনযোগ্য</span></span>?</dt> + <dd><span id="result_box" lang="bn"><span class="hps">আমরা</span> <span class="hps">সাধারণ</span> গ্রাহকদের <span class="alt-edited hps">বাজারে</span> <span class="hps">ফোন</span> <span class="hps">আনার জন্য</span> <span class="hps">বেশ কিছু</span> <span class="hps">সহযোগীদের</span> <span class="hps">সঙ্গে</span> <span class="hps">কাজ করছি।</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">আমরা</span> <span class="alt-edited hps">পরবর্তীতে</span> <span class="hps">ঐ</span> <span class="hps">ডিভাইস</span> <span class="alt-edited hps">সম্পর্কে আরো তথ্য জানব।</span></span></dd> + <dt><span id="result_box" lang="bn"><span class="hps">আমি আমার নিজের</span> <span class="hps">ফোনে</span> <span class="alt-edited hps">চালিয়ে দেখতে <span id="result_box" lang="bn"><span class="hps">কোথায় <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="hps">ডাউনলোড করতে পারি</span></span></span></span></span></span>?</dt> + <dd> <a href="/bn-BD/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">ফায়ারফক্স ওএস বিল্ড এবং ইন্সটল করা</a> দেখুন।</dd> + <dt><span id="result_box" lang="bn"><span class="hps">আমি কিভাবে</span> <span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="alt-edited hps">এ</span> <span class="hps">আমার অ্যাপ্লিকেশন</span> <span class="hps">পরীক্ষা করতে পারি</span></span>?</dt> + <dd><span id="result_box" lang="bn"><span class="alt-edited hps">অ্যান্ড্রয়েড</span> <span class="alt-edited hps">এ</span> <span class="alt-edited hps">অথবা</span> <span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="alt-edited hps">সিমুলেটর</span> <span class="hps">ব্যবহার করে।</span></span></dd> + <dt><span class="short_text" id="result_box" lang="bn"><span class="hps">ডিভাইস</span> <span class="hps">API গুলির</span> <span class="hps">সম্পূর্ণ তালিকা</span> <span class="hps">কি?</span></span> <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">এগুলো স্ট্যান্ডার্ড বা প্রমিত করা হবে</span></span>?</dt> + <dd><span id="result_box" lang="bn"><span class="alt-edited hps">বিপুল সংখ্যক <span id="result_box" lang="bn"><span class="hps">ডিভাইস</span> <span class="hps">API <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> এর <span class="hps">প্রাথমিক</span> <span class="alt-edited hps">রূপায়ণে</span> <span class="hps">সমর্থিত হবে</span></span></span></span></span></span>। <span id="result_box" lang="bn"><span class="hps">একটি সম্পূর্ণ</span> <span class="alt-edited hps">তালিকা পাওয়া যাবে এখানে</span></span><a href="https://wiki.mozilla.org/WebAPI#APIs"> https://wiki.mozilla.org/WebAPI#APIs</a>। <a href="https://hacks.mozilla.org/2012/01/mozilla-joins-the-w3c-dap-webapi-progress/">স্ট্যান্ডার্ড করার প্রক্রিয়া চলছে</a>।</dd> + <dt><span id="result_box" lang="bn"><span class="hps">ডিভাইস</span> <span class="hps">APIগুলি</span> কি সব প্লাটফর্ম <span class="hps">এ ব্যবহারের জন্য</span> <span class="hps">প্রমিত</span> <span class="hps">হচ্ছে</span></span>?</dt> + <dd><span id="result_box" lang="bn"><span class="hps">হ্যাঁ,</span> <span class="hps">API গুলি</span> <span class="alt-edited hps">বেশ কিছু</span> <span class="alt-edited hps">পার্টনার এবং</span> <span class="alt-edited hps">সরবরাহকারীদের <span id="result_box" lang="bn"><span class="alt-edited hps">সঙ্গে কাজ করার</span> <span class="hps">ফলাফল</span></span></span></span> <span id="result_box" lang="bn"><span class="hps">এবং তাদের মধ্যে</span> <span class="hps">কিছু</span> <span class="hps">ইতিমধ্যেই</span> <span class="alt-edited hps">অন্যান্য প্ল্যাটফর্মে কাজ করছে।</span></span> <span id="result_box" lang="bn"><span class="hps">প্রায় প্রত্যেক</span> <span class="hps">প্রযুক্তি</span> <span class="alt-edited hps">কোম্পানি-ই তাদের দেওয়া হার্ডওয়ারে ওয়েব অ্যাপ সক্রিয় করতে গিয়ে সমস্যায় ভোগে। </span></span>যত বেশি সম্ভব প্ল্যাটফর্মে যেন ওয়েব অ্যাপ ব্যবহারযোগ্য থাকে, সেই উদ্দেশ্যেই আমরা কাজ শুরু করেছি।</dd> +</dl> 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 +--- +<dl> + <dt> + যা করা হবে </dt> + <dd> + ফোনে থাকা সকল ডেভেলোপার সুবিধাসমুহ এবং এগুলো কীভাবে কাজ করে - তা বর্ননা করে ।(Settings > Device information > More information > Developer)</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging" title="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS/Remote_debugging">রিমোট ডিবাগিং</a></dt> + <dd> + কীভাবে আপনার ফোনকে রিমোট ডিবাগিং এর জন্য সেট করবেন ।</dd> + <dt> + <a href="https://developer.mozilla.org/en-US/Firefox_OS/Firefox_OS_usage_tips/Unlocking_your_phone">আপনার ফোনকে আনলক করা</a></dt> + <dd> + আপনার ফোনকে আনলক করার জন্য কিছু সাধারণ নির্দেশাবলী ।</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/taking_screenshots" title="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks/taking_screenshots">স্ক্রীনশট নেয়া</a></dt> + <dd> + কীভাবে আপনার ফায়ারফক্স ওএস ফোনে স্ক্রীনশট নিতে হয় ।</dd> +</dl> +<p> </p> 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 +--- +<div class="summary"> +<p><span class="seoSummary">ফায়ারফক্স OS মজিলার ডেভেলপ করা, এবং লিনাক্স ও গেকো ইঞ্জিনে চলা একটি নতুন মোবাইল অপারেটিং সিস্টেম।</span></p> +</div> + +<div class="column-container zone-callout"> +<p><strong>ফায়ারফক্স OS</strong> এর সোর্সকোড উন্মুক্ত এবং সে কারনে প্রোপ্রাইটরি প্রযুক্তি থেকেও মুক্ত। আমরা অ্যাপলিকেশন ডেভেলপারদের দারুন সব অ্যাপ তৈরি করার ক্ষমতা দিচ্ছি, আর এটি ব্যবহারকারীদের সন্তুষ্ট করার জন্য যথেষ্ট পরিমান শক্তিশালি এবং সহজ।</p> + +<p>ওয়েব ডেভেলপারদের বোঝার জন্য সবচেয়ে গুরুত্বপূর্ণ অংশ হচ্ছে, <strong>পুরো ইউজার ইন্টারফেসটি-ই একটি ওয়েব অ্যাপ</strong> যেটা অন্যান্য ওয়েব অ্যাপ চালু এবং প্রদর্শন করতে পারে। ইউজার ইন্টারফেসে কোন ধরনের পরিবর্তন করতে হলে বা ফায়ারফক্স ওএস এর জন্য অ্যাপ তৈরি করতে হলে আপনাকে সেটা করতে হবে HTML, CSS এবং JavaScript ব্যবহার করেই। তবে চিন্তার কোন কারন নেই! আপনি আমাদের API এর মাধ্যমে মোবাইল ডিভাইসের সকল হার্ডওয়্যার ও সেবা ব্যবহার করার সুবিধা পাবেন।</p> + +<p>প্রোডাক্ট হিসেবে দেখতে চাইলে ফায়ারফক্স ওএস হচ্ছে <strong>বুট টু গেকো (B2G)</strong> এর উপরে মজিলা (ও আমাদের OEM প্রস্তুতকারকদের) করা ব্র্যান্ডিং এবং সমর্থিত সেবা যুক্ত করা একটি অপারেটিং সিস্টেম এর ইঞ্জিনিয়ারিং কোড নেম। বুট টু গেকো মজিলার ভেতরের কিছু ইঞ্জিনিয়ার এবং বাইরের মজিলা/উন্মুক্ত সোর্স পরিবারের সম্মিলিত প্রচেষ্টায় ডেভেলপ করা সম্ভব হয়েছে।</p> +</div> + + + +<section class="outer-apps-box" id="sect1"> +<h2 id="ফায়ারফক্স_OS_এর_জন্য_অ্যাপ_তৈরি"><a href="/bn-BD/Apps">ফায়ারফক্স OS এর জন্য অ্যাপ তৈরি</a></h2> + +<p>ওপেন ওয়েব অ্যাপ এবং ফায়ারফক্স ওএস এ ইন্সটল যোগ্য অ্যাপ তৈরি করার জন্য আপনার সম্ভাব্য যতরকম তথ্য দরকার হবে, তা জানতে আমাদের অ্যাপ সেন্টারে যান!</p> +</section> + +<div class="column-container"> +<div class="column-third"> +<h2 id="প্লাটফর্ম_গাইড"><a href="/bn-BD/docs/Mozilla/Firefox_OS/Platform">প্লাটফর্ম গাইড</a></h2> + +<p>ফায়ারফক্স ওএস প্লাটফর্মের বিভিন্ন উপাদান কিভাবে একসাথে থাকে ও কাজ করে, তার বিস্তারিত নিয়ে প্লাটফর্ম ডেভেলপারদের জন্য একটি নির্দেশিকা।</p> + +<ul> + <li><a href="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Gaia" title="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Gaia">গাইয়া</a></li> + <li><a href="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Gonk" title="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Gonk">গঙ্ক</a></li> + <li><a href="/bn-BD/docs/Mozilla/Gecko" title="/bn-BD/docs/Mozilla/Gecko">গেকো</a></li> +</ul> +</div> + +<div class="column-third"> +<h2 id="বিল্ড_এবং_ইন্সটল"><a href="/bn-BD/docs/Mozilla/Firefox_OS/Build_and_install">বিল্ড এবং ইন্সটল</a></h2> + +<p>ইমুলেটরে ফায়ারফক্স ওএস চালানো, উপযুক্ত ডিভাইস অথবা ডেস্কটপ সিমুলেটরে ফায়ারফক্স ওএস বিল্ড ও ইন্সটল করার বিস্তারিত নিয়ে একটি নির্দেশিকা।</p> + +<ul> + <li><a href="/bn-BD/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="Mozilla/Firefox_OS/Firefox OS build prerequisites">ফায়ারফক্স ওএস বিল্ড করার অত্যাবশ্যকীয় বিষয়াবলী</a></li> + <li><a href="/bn-BD/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="Mozilla/Firefox_OS/Preparing for your first B2G build">প্রথম বিল্ডের জন্য তৈরি হওয়া</a></li> + <li><a href="/bn-BD/docs/Mozilla/Firefox_OS/Building" title="Mozilla/Firefox_OS/Building">ফায়ারফক্স ওএস বিল্ড</a></li> +</ul> +</div> + +<div class="column-third"> +<h2 id="ডেভেলপার_ফোন_সমূহ"><a href="/bn-BD/docs/Mozilla/Firefox_OS/Developer_phone_guide">ডেভেলপার ফোন সমূহ</a></h2> + +<p>নির্দিষ্ট ডেভেলপার ফোন টুইক, হালনাগাদ, ঠিক করা এবং কেনা সংক্রান্ত তথ্য।</p> + +<ul> + <li><a href="/bn-BD/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">গিকস ফোন</a></li> + <li><a href="/bn-BD/docs/Mozilla/Firefox_OS/Troubleshooting">সমস্যা সমাধান</a></li> + <li><a href="/bn-BD/Firefox_OS/Developer_phone_guide/Phone_specs">ফোন এবং ডিভাইসের বৈশিষ্ট্য তালিকা</a></li> +</ul> +</div> +</div> + +<div class="column-container equalColumnHeights"> +<div class="zone-callout"> +<h2 id="অন্যান্য_রিসোর্স"><strong>অন্যান্য রিসোর্স</strong></h2> + +<ul> + <li><a href="https://twitter.com/soapdog">আন্ড্রে আল্ভস গার্জিয়া</a>র লেখা <a href="https://leanpub.com/quickguidefirefoxosdevelopment">Quick Guide For Firefox OS App Development</a> বিনামূল্যে PDF, ePUB এবং MOBI ফরম্যাটে ডাউনলোড করা যাবে। আজই দেখুন।</li> + <li>বব থুলফ্রাম আমাজনে <a href="http://www.amazon.com/dp/B00IZUYIGO"><span id="btAsinTitle">Beginning Firefox OS HTML5 Game Programming</span></a> প্রকাশ করেছেন। ফায়ারফক্স ওএস এর জন্য গেম ডেভেলপে আগ্রহী হলে তার <a href="http://firefoxosgaming.blogspot.co.uk/">Firefox OS gaming blog</a> টিও দেখতে পারেন।</li> +</ul> +</div> + +<div class="zone-callout"> +<h2 id="অন্যান্য_উপকারী_পাতা"><strong>অন্যান্য উপকারী পাতা</strong></h2> + +<ul> + <li><a href="http://www.mozilla.org/bn-BD/styleguide/products/firefox-os/">ফায়ারফক্স ওএস স্টাইল গাইড</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">সচরাচর জিজ্ঞাসিত প্রশ্ন নিয়ে মজিলার উইকি</a></li> + <li><a href="/bn-BD/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/bn-BD/docs/Mozilla/Firefox_OS/Feature_support_chart">ফিচার সমর্থন তালিকা</a></li> + <li><a href="/bn-BD/docs/Mozilla/Firefox_OS/Geeksphone_FAQ" title="/bn-BD/docs/Mozilla/Firefox_OS/Geeksphone_FAQ">গিকস ফোনের সচরাচর জিজ্ঞাসিত প্রশ্ন</a></li> +</ul> +</div> +</div> + +<div class="note"> +<p><strong>দ্রষ্টব্যঃ</strong> ফায়ারফক্স ওএস ডকুমেন্টেশনের সম্পর্কিত চলতি কাজগুলোর হিসেব আমরা <a href="/bn-BD/docs/MDN/Doc_status/Firefox_OS">ফায়ারফক্স ওএস এর ডকুমেন্টেশনের অবস্থা</a> পাতায় রাখছি। যদি আপনি আমাদের ফায়ারফক্স ওএস এর ডকুমেন্টেশনে অবদান রাখতে সহযোগিতা করতে চান, তাহলে কোন কাজটি করা প্রয়োজন জানতে এই পাতাটি দেখুন!</p> +</div> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="/bn-BD/Firefox_OS/Introduction">পরিচিতি</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Platform" title="Documentation about the Firefox OS platform, including Gonk, Gaia, and everything in between.">প্লাটফর্ম গাইড</a> + <ol> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Platform/Architecture" title="An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.">আর্কিটেকচার ওভারভিউ</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Platform/Apps_architecture" title="An overview of the application model on Firefox OS.">অ্যাপস আর্কিটেকচার</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Platform/Gonk" title="Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates.">গঙ্ক</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Gecko" title="Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.">গেকো</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Platform/Gaia" title="Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.">গাইয়া</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Security" title="Documentation about security in Firefox OS">নিরাপত্তা</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Platform/Feature_support_chart" title="A chart of which features are available in which types of Firefox OS builds.">ফিচার সমর্থন তালিকা</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Platform/Settings_list" title="A list of common setting names that can be used with the settings API">সেটিংস তালিকা</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Building_and_installing_Firefox_OS" title="This includes documentation for building and installing the platform onto devices, as well as building the simulator and emulators.">বিল্ড ও ইন্সটল</a> + <ol> + <li><a href="/bn-BD/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_build_overview">ফায়ারফক্স ওএস বিল্ড ওভারভিউ</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Firefox_OS_build_prerequisites" title="Steps to take before you build Firefox OS for the first time.">বিল্ড করার আবশ্যিক বিষয়াবলী</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Preparing_for_your_first_B2G_build" title="Before you can build Firefox OS, you need to clone the repository and configure your build.">প্রথম বিল্ডের জন্য তৈরি হওয়া</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Building" title="How to build Firefox OS.">ফায়ারফক্স OS বিল্ড করা</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Porting" title="Information about how to port Firefox OS to new devices.">ফায়ারফক্স OS রূপান্তর করা</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Choosing_how_to_run_Gaia_or_B2G" title="Using Gaia within Firefox, running Firefox OS on a mobile device, or in a desktop-based simulator. Which is best?">ফায়ারফক্স OS বা গাইয়া কিভাবে চলবে নির্বাচন করা</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Using_the_B2G_desktop_client" title="Simulating the Gaia environment in a desktop application - more accurate than running Gaia in Firefox but not as accurate as the emulators.">ফায়ারফক্স OS ডেস্কটপ ক্লায়েন্ট ব্যবহার করা</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Using_the_B2G_emulators" title="A guide to building and using the Firefox OS emulators, and when to use which emulator.">ফায়ারফক্স OS ইমুলেটর ব্যবহার</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Installing_on_a_mobile_device" title="How to install Firefox OS on a real mobile device.">মোবাইল ডিভাইসে ফায়ারফক্স OS ইন্সটল</a></li> + <li><a href="/bn-BD/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_update_packages">ফায়ারফক্স OS হালনাগাদ প্যাকেজ তৈরি ও প্রয়োগ</a></li> + <li><a href="/bn-BD/Firefox_OS/Runtime_tools">রানটাইম টুলস</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Developing_Firefox_OS" title="Hack the OS, customize your builds, get things the way you think they should be!">ফায়ারফক্স ওএস উন্নয়ন</a> + <ol> + <li><a href="/bn-BD/Firefox_OS/Developing_Firefox_OS/Quickstart_guide_to_Gaia_development">গাইয়া উন্নয়নের সংক্ষিপ্ত নির্দেশনা</a></li> + <li><a href="/bn-BD/Firefox_OS/Developing_Firefox_OS/Quickstart_guide_to_B2G_development">B2G উন্নয়নের সংক্ষিপ্ত নির্দেশনা</a></li> + <li><a href="/bn-BD/Firefox_OS/Platform/Gaia/Build_System_Primer">বিল্ড সিস্টেম প্রাইমার</a></li> + <li><a href="/bn-BD/Firefox_OS/Developing_Firefox_OS/Firefox_OS_bugwork">ফায়ারফক্স OS বাগওয়ার্ক</a></li> + <li><a href="/bn-BD/Firefox_OS/Platform/Gaia/Hacking">গাইয়া হ্যাক করা</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Platform/Gaia/Gaia_apps">গাইয়া অ্যাপস নির্দেশনা</a></li> + <li><a href="/bn-BD/Firefox_OS/Developing_Firefox_OS/Market_customizations_guide">মার্কেট কাস্টমাইজেশন নির্দেশনা</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Developing_Firefox_OS/modifying_hosts_file" title="A guide to what can be achieved by modifying the Firefox OS hosts file.">হোস্ট ফাইল সম্পাদনা</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Customization_with_the_.userconfig_file" title="How to customize the build and execution of Firefox OS by changing the .userconfig file.">.userconfig ফাইলের মাধ্যমে কাস্টমাইজ করা</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Developing_Firefox_OS/Customizing_the_keyboard">ফায়ারফক্স ওএস অ্যাপ এর জন্য কিবোর্ড কাস্টমাইজ</a></li> + <li><a href="/bn-BD/Firefox_OS/Developing_Firefox_OS/Customizing_the_b2g.sh_script">b2g.sh স্ক্রিপ্ট কাস্টমাইজ</a></li> + <li><a href="/bn-BD/Firefox_OS/Developing_Firefox_OS/Localizing_Firefox_OS">ফায়ারফক্স ওএস লোকালাইজ করা</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Developer_phone_guide" title="A developer's guide to the Firefox OS developer phones available.">ডেভেলপার ফোন গাইড</a> + <ol> + <li><a href="/bn-BD/Firefox_OS/Developer_phone_guide/Phone_specs">ফোন এবং ডিভাইস বৈশিষ্ট্য</a></li> + <li><a href="/bn-BD/Firefox_OS/Developer_phone_guide/Geeksphone">গিকসফোন</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Developer_phone_guide/ZTE_OPEN">ZTE OPEN</a></li> + <li><a href="/bn-BD/Firefox_OS/Developer_phone_guide/Flame">ফ্লাম</a></li> + <li><a href="/bn-BD/Firefox_OS/Developer_phone_guide/Firefox_OS_device_features">সাধারন ডিভাইসের বৈশিষ্ট্য</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Troubleshooting" title="A guide to resolving common problems with Firefox OS.">সমস্যা সমাধান</a></li> + <li><a href="/bn-BD/Firefox_OS/Developer_phone_guide/Best_practices_open_reference_devices">ওপেন রেফারেন্স ডিভাইস সমূহের জন্য ভালো অভ্যাস</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Releases" title="This section of the site contains release notes, explaining what new features and changes of significance to developers have landed in each new release of Gaia and Gecko on Firefox OS.">ফায়ারফক্স OS রিলিজ নোট সমূহ</a> + <ol> + <li><a href="/bn-BD/Firefox_OS/Releases/1.3">Firefox OS 1.3 for developers</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Releases/1.2">Firefox OS 1.2 for developers</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Releases/1.1">Firefox OS 1.1 for developers</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Releases/1.0.1">Firefox OS 1.0.1 for developers</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Platform/Automated_testing">টেস্ট করা</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Debugging" title="A guide to debugging both your mobile apps and Firefox OS itself.">ডিবাগ করা</a> + <ol> + <li><a href="/bn-BD/Firefox_OS/Debugging/Developer_settings">ফায়ারফক্স OS এর জন্য ডেভেলপার সেটিংস</a></li> + <li><a href="/bn-BD/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">ডেস্কটপে ফায়ারফক্স OS ডিভাইস যুক্ত করা</a></li> + <li><a href="/bn-BD/Firefox_OS/Debugging/Setting_up">ফায়ারফক্স ডেভেলপার টুলস ব্যবহার করে ফায়ারফক্স OS ডিবাগের জন্য সেটআপ</a></li> + <li><a href="/bn-BD/Firefox_OS/Debugging/On-device_console_logging">ডিভাইসের কনসোল লগিং</a></li> + <li><a href="/bn-BD/Firefox_OS/Debugging/Installing_ADB">ADB ইন্সটল ও ব্যবহার</a></li> + <li><a href="/bn-BD/Firefox_OS/Firefox_OS_usage_tips/taking_screenshots">স্ক্রীনশট নেয়া</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/Firefox_OS/Using_the_App_Manager" title="A tool that allows you to install open web apps from your computer to a device capable of installing them (such as Firefox OS) - and debug any running app.">ফায়ারফক্স OS অ্যাপ ম্যানেজার ব্যবহার</a></li> + <li><a href="/bn-BD/Firefox_OS/Debugging/Debugging_OOMs">ফায়ারফক্স OS এ "মেমোরি শেষ" সম্পর্কিত সমস্যা সমাধান</a></li> + <li><a href="/bn-BD/Firefox_OS/Debugging/Debugging_B2G_using_gdb">gdb ব্যবহার করে B2G ডিবাগ</a></li> + <li><a href="/bn-BD/Firefox_OS/Debugging/Debugging_B2G_using_valgrind">Valgrind ব্যবহার করে B2G ডিবাগ</a></li> + </ol> + </li> +</ol> 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 +--- +<p><span style="line-height: 1.5;">আপনি যখন একবার </span><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Have_a_compatible_device_or_use_an_emulator" style="line-height: 1.5;">supported mobile device</a><span style="line-height: 1.5;"> এর জন্য Gecko বুট করে ফেলতে পারবেন তারপর আপনি firefox OS ইনস্টল করতে পারবেন । এই আর্টিকেলটি আপনাকে সাহায্য করবে কিভাবে তা করতে হবে।</span></p> + +<div class="note"><strong>Note:</strong> আপনি যখন প্রথমবারের মত আপনার ফোন ফ্ল্যাশ করতে যাবেন তখন অবশ্যই দেখবেন আপনার ফোনে <span style="line-height: 1.5;">Android 4 (Ice Cream Sandwich) ইনস্টল করা আছে কিনা । তা না হলে এই প্রসেসটি ঠিকমত কাজ করবে না । আপনি যদি একবার B2G ইনস্টল করতে পারেন তাহলে এরপর থেকে এটি সহজে এর উপরে গিয়ে আপডেট করতে পারেন ।</span></div> + +<h2 id="Installing_ADB">Installing ADB</h2> + +<p><strong>On OSX</strong></p> + +<p>যদি আপনার সেটে OSX এ Homebrew থাকে:</p> + +<pre>brew install android-platform-tools</pre> + +<p>না থাকলে ডাউনলোড করুন Android Developer Tools এবং আপনার PATH টি বাইনারীতে সংযুক্তি করুন।</p> + +<p><strong>On Ubuntu</strong></p> + +<pre>sudo apt-get install android-tools-adb</pre> + +<h2 id="Flashing_your_phone">Flashing your phone</h2> + +<p>আপনার ফোনটি সম্পূর্ণরূপে Flash করতে টাইপ করুন:</p> + +<pre>./flash.sh +</pre> + +<p>এইতো। এখন যে B2G টি আপনার ডিভাইসে পেয়েছেন সেটি স্বয়ংক্রিয়ভাবে ফ্ল্যাশ হবে। </p> + +<p><span style="font-size: 24px; letter-spacing: -0.5px; line-height: 24px;">Configuring the udev rule for your device</span></p> + +<p>লিনাক্সে যদি আপনি এই লেখাটি দেখতে পানঃ</p> + +<pre>< waiting for device ></pre> + +<p>তাহলে আপনাকে বুঝতে হবে আপনি এখনো fastboot এরজন্য udev rule টি সংযুক্ত করেননি যা ADV এর জন্য এক হিসেবে একই নয়। আপনি এখন <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">lsusb রানিং করে </span><span style="line-height: 1.5;">USB vendor ID টি পেতে পারেন । সাধারণত এটি গুগলেও আছেঃ18d1, এর পর </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">/etc/udev/rules.d/51-android.rules</span></p> + +<p>এই লাইনটি যুক্ত করলে আশা করা যায় আপনার ডিভাইসটি কাজ করার জন্য উপযুক্তঃ</p> + +<pre>SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"</pre> + +<div class="note"><strong>Note 1: </strong><em>আপনি যদি লিনাক্সে<strong> </strong><code style="font-size: 14px;">libusb</code><span style="line-height: 1.5;"> error "-3" এইটি দেখতে পান তাহলে আপনাকে ধরে নিতে হবে USB ডিভাইস ব্যবহার করার জন্য আপনাকে এটি রুট করতে হবে। </span></em><code style="font-size: 14px;">sudo </code><em><span style="line-height: 1.5;">লিখে পুরো স্ক্রিপটি পুনরায় রান করান।</span></em></div> + +<div class="note"><strong>Note 2</strong>:যদি আপনি <span style="line-height: 1.5;">Unagi অথবা Geeksphone Keon phone ব্যবহার করে থাকেন তাহলে আপনার এই দুইটি লাইন দরকার- একটি হচ্ছে </span><span style="line-height: 1.5;">original phone vendor's ID এবং অন্যটি গুগলের জন্য।</span></div> + +<h3 id="Special_notes_for_Hamachi_Helix_and_Leo_devices">Special notes for Hamachi, Helix, and Leo devices</h3> + +<p><span style="line-height: 1.5;">./flash.sh এই স্ক্রিপ্টটি শুধুমাত্র gecko এবং gaia ডিভাইসের জন্য কাজ করবে । কিন্তু আপনার সেট যদি হয় hamachi, helix or leo device এর তখন কি করবেন ? এই জন্য আমাদের সাজেশন আপনি OEM কে বেস বিল্ড(firmware পাবার জন্য) আর gonk layers ব্যবহার করে ফ্ল্যাশ করবেন।তারপর gecko এবং gaia ফ্ল্যাশ করতে পারেন। যপনি যদি ইমেজ ব্যবহার করে ফ্ল্যাশ করতে চান , তাহলে একটি ওভাররাইড ফাইল আছে যেখানে আপনি পাবেন ./flash.sh -f এইটি। এই ইমেজ ফাইলটি ব্যবহার করে আপনি সহজেই আপনার ডিভাইসটি ফ্ল্যাশ করতে পারেন। </span></p> + +<h3 id="Special_notes_for_the_Samsung_Galaxy_S2">Special notes for the Samsung Galaxy S2</h3> + +<p><span style="line-height: 1.5;">আপনার সেট যদি হয় Galaxy S2 এবং আপনি যদি heimdall 1.3.2 (the latest version;চেক করুন </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">heimdall version)ব্যবহার করে থাকেন , তাহলে আপনি </span><span style="line-height: 1.5;">alarming</span><span style="line-height: 1.5;"> error হিসেবে "FACTORYFS upload failed!"</span><span style="line-height: 1.5;">followed by "Heimdall flashing failed" and some additional information এই লেখাটি দেখতে পারেন। এটি আসলে সাকসেস কন্ডিশন এবং আপনি নিশ্চিন্তে এইটি ইগনোর করতে পারেন। </span></p> + +<p><span style="line-height: 1.5;">আপনি যদি এইটি থেকে মুক্তি পেতে চান তাহলে </span><a class="link-https" href="https://github.com/Benjamin-Dobell/Heimdall" style="line-height: 1.5;" title="https://github.com/Benjamin-Dobell/Heimdall">source copy</a><span style="line-height: 1.5;"> থেকে heimdall এর একটি কপি গ্র্যাপ করতে পারেন যা 1.3.1এ রিলিজ হয়েছে</span><span style="line-height: 1.5;"> ("</span><code style="font-size: 14px;">git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06</code><span style="line-height: 1.5;">")।তারপর </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">README অনুসারে কম্পাইল করুন এরপর ইনস্টল করুন । দেখবেন error গুলো চলে গিয়েছে । যদি ও এই জিনিসটা খুব একটা দরকারী নয় ।</span></p> + +<p><span style="line-height: 1.5;">Heimdall সকল সংস্করণ 100MB চেয়ে বড় system.img ফ্ল্যাশ করতে সক্ষম নয়। তখন এই কাজটি করুনঃ</span></p> + +<pre>ls -l ./out/target/product/galaxys2/system.img +</pre> + +<p><span style="line-height: 1.5;">এইখান থেকে দেখুন আপনারটি কত বড় । যদি আপনারটি এর থেকেও বড় হয় ,IRC তে জিজ্ঞাসা করুন ।এছাড়া দুই পর্যায়ে তা করার উপায় আছে ।</span></p> + +<h2 id="Added_step_for_the_Samsung_Galaxy_S2">Added step for the Samsung Galaxy S2</h2> + +<p><span style="line-height: 1.5;">আপনি যদি Galaxy S2 ফ্ল্যাশ করে থাকেন তাহলে আপনাকে আরো কিছু কাজ করতে হবে।Gaia </span><code style="font-size: 14px;">flash.sh</code><span style="line-height: 1.5;"> script দ্বারা স্বয়ংক্রিয়ভাবে কখনো ফ্ল্যাশ হয় না । এই জন্য আপনাকে অতিরিক্ত এই কোডটি লিখতে হবেঃ</span></p> + +<pre>./flash.sh gaia +</pre> + +<h2 id="Flashing_specific_partitions_to_fastboot_phones">Flashing specific partitions to fastboot phones</h2> + +<p><span style="line-height: 1.5;">আপনি fastboot phones গুলোতে পার্টিশন নির্দিষ্ট করে দিয়ে ও ফ্ল্যাশ করতে পারেন (Galaxy S2 ছাড়া যেকোন ফোনেই সম্ভব)।উদাহরণস্বরূপঃ</span></p> + +<pre>./flash.sh system +./flash.sh boot +./flash.sh user +</pre> + +<h2 id="Updating_specific_modules">Updating specific modules</h2> + +<p><span style="line-height: 1.5;">ফ্ল্যাশ করার সময় আপনি চাইলে যে কোন কিছু আপডেট করতে পারেন শুধুমাত্র তাদের নাম specific করে। উদাহরণস্বরূপঃ</span></p> + +<pre>./flash.sh gaia +./flash.sh gecko</pre> + +<p>যদি আপনি শুধু একটি এপ্লিকেশন আপডেট করতে চান তাহলে আপনি BUILD_APP_NAME এর environment variable ব্যবহার করতে পারেন।</p> + +<pre>BUILD_APP_NAME=calendar ./flash.sh gaia</pre> + +<p><span style="line-height: 1.5;">যদি আপনার ফোনটি ডেভেলাপার ভার্সন না হয় তাহলে আপনি gaia ব্যবহার করে আপডেট করতে পাড়েন।</span></p> + +<pre>VARIANT=user ./flash.sh gaia</pre> + +<h2 id="Next_steps">Next steps</h2> + +<p>এখন আশা করা যায় আপনার ফোন Gecko থেকে বুট চালু হবে! চালু হওয়ার পর চেকিং শুরু করুন। <a href="/en-US/docs/Mozilla/Firefox_OS/Application_development" title="en-US/docs/Mozilla/Firefox_OS/Application_development">write some code</a>, <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing" title="en-US/docs/Mozilla/Firefox_OS/Platform/Testing">test</a>, অথবা <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="en-US/docs/Mozilla/Firefox_OS/Debugging">do some debugging</a>!</p> + +<div class="note"><strong>Note:</strong> একটি সহায়ক টিপঃ যদি আপনার বিল্ডকৃত B2G শুরু হবার পরে স্ক্রিণ লক থাকে এবং পাসওয়ার্ড চাই তাহলে ডিফল্ট কোডটি হল ০০০০।</div> + +<h2 class="note" id="Troubleshooting">Troubleshooting</h2> + +<p>এইখানে আপনাদের জন্য কিছু টিপস দেওয়া হল যদি B2G ইনস্টল করার পর অথবা আপডেট করার পর আপনার ডিভাইসটি ঠিকমত কাজ না করে।</p> + +<p><span style="font-size: 24px; letter-spacing: -0.5px; line-height: 24px;">যদি UI না শুরু হয় </span></p> + +<p><span style="line-height: 1.5;">আপনি আপনার ফোন আপডেট করার পর যদি ইউজার ইন্টারফেস আরম্ভ না হয়, আপনি আউট অফ ডেট কনফিগারেশন থেকে এটি পুনরায় সেট করতে পারেন। কিভাবে সম্ভব নিচে তা দেখানো হল:</span></p> + +<pre>cd gaia +make reset-gaia +</pre> + +<h3 class="note" id="যদি_আপনি_ডেভেলপার_থেকে_প্রোডাকশন_মোডে_পরিবর্তন_চান">যদি <span class="short_text" id="result_box" lang="bn"><span class="hps">আপনি </span> <span class="hps">ডেভেলপার থেকে</span> প্রোডাকশন মোডে <span class="hps">পরিবর্তন</span> <span class="hps">চান</span></span></h3> + +<pre>cd gaia +make reset-gaia PRODUCTION=1</pre> + +<h3 class="note" id="image_is_too_large_error_message_on_.flash.sh_execution">"image is too large" error message on ./flash.sh execution</h3> + +<p>এর মানে হল ফ্ল্যাশ করার পূর্বে আপনার ফোনকে রুট করা জরুরী। আপনি যদি b2gতে রুট করতে চান আপনাকে অবশ্যই রুট পার্টিশন করতে হবে। আর ইনস্টল করার জন্য আপনার ফোনকে অবশ্যই রুট করা থাকতে হবে।</p> + +<div id="__if72ru4sdfsdfrkjahiuyi_once" style="display: none;"> </div> + +<div id="__hggasdgjhsagd_once" style="display: none;"> </div> 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 +--- +<div class="summary"> +<p>মোবাইলে ওয়েব দিয়ে যা করা সম্ভব, তার সীমাকে ছাড়িয়ে যেতে এবং ব্যবহারকারীদের নতুন একটি অংশকে তাদের প্রথম স্মার্টফোন সহ অনলাইনে আসার সক্ষমতা দিতেই এসেছে ফায়ারফক্স ওএস। এটা লিনাক্সের উপর ভিত্তি করে, উন্মুক্ত ওয়েবের আদর্শ মান বজায় রেখে, মজিলার গেকো প্রযুক্তি ব্যবহার করে তৈরি করা ওপেন সোর্স মোবাইল অপারেটিং সিস্টেম। এক কথায় এটা মোবাইল প্ল্যাটফর্ম যে কি হতে পারে, তার পুনঃআবিষ্কার।</p> + +<p>হার্ডওয়্যারের ক্ষমতা ব্যবহারের জন্য ওয়েব এপিআই এর ব্যবহার শুরু হওয়ার পর থেকে, ব্যবহারকারীদের সমৃদ্ধ ও রুচিসম্মত স্মার্টফোন এক্সপেরিয়েন্স উপস্থাপনের মাধ্যমে, মজিলা বিশ্বাস করে যে, ডেভেলপারগণের জন্য ওয়েব দারুণ সব সুযোগ নিয়ে আসবে। এতে করে তারা চমৎকার পণ্য নিয়ে নতুন সর্বসাধারণের কাছে পৌছাতে পারবে।</p> +</div> + +<h2 id="প্রত্যাশিত_ব্যবহারকারী">প্রত্যাশিত ব্যবহারকারী</h2> + +<p>এই ডকুমেন্টেশন সেট টি প্রধানত ওয়েব ডেভেলপার এবং প্লাটফর্ম ডেভেলপারদের উদ্দেশ্য করে তৈরি করা হয়েছে, যারা ফায়ারফক্স ওএস কিভাবে কাজ করে, এই প্রজেক্টে কিভাবে অবদান রাখতে হবে, এবং কিভাবে তারা সফটওয়্যারটির কাস্টম ভার্শন তৈরি করবে এবং ডিভাইস সমূহে ইন্সটল করবে ইত্যাদি জানতে আগ্রহী। যারা নিজেদের ওয়েব অ্যাপ তৈরি করতে ও বণ্টন করতে চায়, তাদের যাওয়ার জন্য <a href="/en-US/Apps">অ্যাপ সেন্টার</a> এবং <a href="/en-US/Marketplace">মার্কেটপ্লেস জোন</a> ভালো জায়গা।</p> + +<h2 id="ফায়ারফক্স_ওএস_এর_প্রাথমিক_ওয়াদা">ফায়ারফক্স ওএস এর প্রাথমিক ওয়াদা</h2> + +<p>ওয়েব/প্লাটফর্ম ডেভেলপারদের জন্য যে বিষয়টি বোঝা সবচেয়ে গুরুত্বপূর্ণ সেটি হচ্ছে, পুরো ইউজার ইন্টারফেসটি-ই একটি ওয়েব অ্যাপ, যা অন্যান্য ওয়েব অ্যাপ প্রদর্শন ও চালু করতে সক্ষম। ইউজার ইন্টারফেস এবং যেকোনো অ্যাপ্লিকেশনে করা পরিবর্তন এবং ফায়ারফক্স ওএস এ চালানোর জন্য যে অ্যাপ্লিকেশন-ই তৈরি করেন না কেন, তার মধ্যে আদর্শ ওয়েব প্রযুক্তি থাকবেই। কিন্তু মোবাইল ডিভাইসের হার্ডওয়্যার এবং সার্ভিস সমূহ ব্যবহারের সকল সুবিধা থাকবে।</p> + +<p>একটি পন্যের দৃষ্টিকোণ থেকে ফায়ারফক্স ওএস হচ্ছে বুট টু গেকোর উপর মজিলার ব্র্যান্ডিং এবং সহায়তা সেবা। এটা অপারেটিং সিস্টেমের প্রকৌশলগত সাংকেতিক নাম। ফায়ারফক্স ওএস এর ইউজার ইন্টারফেসকে বলা হয় গায়া, এবং এর মধ্যে অপারেটিং সিস্টেমটির ডিফল্ট অ্যাপস এবং সিস্টেম ফাংশন অন্তর্ভুক্ত।</p> + +<p>প্লাটফর্ম আর্কিটেকচার সম্পর্কে আরও বিস্তারিত জানতে আমাদের <a href="/bn-BD/Firefox_OS/Platform">প্লাটফর্ম নির্দেশনা</a> দেখুন।</p> + +<h2 id="বর্তমান_এবং_ভবিষ্যৎ_পরিকল্পনা">বর্তমান এবং ভবিষ্যৎ পরিকল্পনা</h2> + +<p>যেহেতু ফায়ারফক্স ওএস এর ১.৩/১.৪ সংস্করণ স্থিতিশীল পর্যায়ে এসে পৌঁছেছে, তাই ২.০ সংস্করণটি বর্তমানে উন্নয়ন প্রক্রিয়াধীন। বাজারে বর্তমানে গ্রাহকদের জন্য এবং ডেভেলপারদের জন্য উভয় প্রকার ফোন-ই রয়েছে। আরও জানতে নিচের অংশ পড়ুনঃ</p> + +<ul> + <li>ফায়ারফক্স ওএস <a href="/en-US/Firefox_OS/Releases">ডেভেলপার রিলিজ নোট সমূহঃ</a> প্রত্যেকটি রিলিজে নতুন যেসব বিষয় সমর্থন করা হচ্ছে।</li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide">ফোন গাইডঃ</a> যেসব ফোন পাওয়া যাচ্ছে।/li></li> + <li><a href="https://wiki.mozilla.org/B2G/Roadmap">বিটুজি রোডম্যাপঃ</a> ফায়ারফক্স ওএস কখন কোনদিকে যাচ্ছে।</li> +</ul> + +<h3 id="প্রকাশ_চক্র">প্রকাশ চক্র</h3> + +<p>ফায়ারফক্স ওএস ১.২ থেকে এর রিলিজ সাইকেল, গেকো এবং ফায়ারফক্স ডেস্কটপ রিলিজ সাইকেল (৬ সপ্তাহ) এর সাথে যতটা সম্ভব কাছাকাছি রাখা হয়েছে। প্রতি তিন মাস অন্তর অন্তর একটি নতুন ফায়ারফক্স ওএস ভার্শন অবমুক্ত করা হয়। সুতরাং প্রতি দুইটি গেকো (ফায়ারফক্স ব্রাউজারের প্রাণ) রিলিজের জন্য একটি ফায়ারফক্স ওএস রিলিজ করা হবে।</p> + +<p>উদাহরন স্বরূপ, গেকো ২৯ বাদ দিয়ে ৩০ ফায়ারফক্স ১.৪ এর সাথে বান্ডেল করা; এবং গেকো ৩১ বাদ রেখে ফায়ারফক্স ২.০ এর সাথে বান্ডেল করা হয়েছে।</p> + +<div class="note"> +<p><strong>নোটঃ</strong> ফায়ারফক্স ওএস এবং গেকো / ডেস্কটপ ফায়ারফক্স এর সাথে সংশ্লিষ্ট ভার্শন গুলো সম্পর্কে জানার জন্য আমাদের <a href="https://wiki.mozilla.org/RapidRelease/Calendar">র্যাপিড রিলিজ ক্যালেন্ডার</a> দেখুন, এবং আমাদের রিলিজ সমূহ কিভাবে ব্যবস্থাপনা করা হয় জানতে <a href="https://wiki.mozilla.org/Release_Management/FirefoxOS/Release_Milestones">ফায়ারফক্স ওএস রিলিজ মাইলস্টোন সমূহ</a> পড়ুন।</p> +</div> + +<h2 id="পরিবার">পরিবার</h2> + +<p>গিকো এবং গাইয়া এর বুট মজ়িলা এর প্রকৌশল দলের সাথে সাথে অনেক মজিলা /open source সম্প্রদায় থেকে বহিরাগত কন্ট্রিবিউটরদের মাধ্যমেও ডেভেলপ করা হয়।আপনি যদি ফায়ারফক্স ওএস অথবা গায়া ডেভেলপমেন্টের কোন দৃষ্টিভঙ্গি সম্পর্কে ওই সম্প্রদায়ে কথা বলতে চান ,তাহলে আমাদের মেইলিং লিস্ট এবং আই আর সি চ্যানেলগুলো শুরু করার একটি ভালো জায়গা , বিস্তারিত নিচের ইনফো বক্সে।</p> + +<p>বাগ গুলো ফিক্স করতে আমাদের বাগজিলা সিসটেমটি ব্যবহার করুন এবং <a href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Firefox%20OS">ফায়ারফক্স ওএস কম্পনেন্টস</a> এর বাগ ফাইল করুন। আপনি যদি কোন কম্পনেন্ট এর বাগ ফাইল করবেন তাহলে বিনা দ্বিধায় জিজ্ঞাসা করুন।</p> + +<div class="note"> +<p><strong>Note</strong>: 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 <a href="https://wiki.mozilla.org/Modules/FirefoxOS">Firefox Modules page</a>.</p> +</div> + +<h2 id="অপারেটিং_সিস্টেম_তৈরি">অপারেটিং সিস্টেম তৈরি</h2> + +<p><span id="result_box" lang="bn"><span class="hps">B2G</span> <span class="hps">অপারেটিং সিস্টেম</span> <span class="hps">মজিলার</span><span> </span></span><a href="/en-US/docs/Mozilla/Gecko">Gecko</a> <span id="result_box" lang="bn"><span class="hps">রেন্ডারিং ইঞ্জিনের</span> <span class="hps">উপর ভিত্তি করে</span></span> বানানো এবং <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk">Gonk </a><span id="result_box" lang="bn"><span class="hps">নামক একটি</span> <span class="hps">বিমূর্ত</span> </span><span lang="bn"><span class="hps">ইউজার-স্পেস হার্ডওয়্যার (HAL) ও লিনাক্স</span> <span class="hps">কার্নেলের উপরে অবস্থিত</span><span>। </span></span>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.</p> + +<p>To learn how to build and install Firefox OS, consult our guide to <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>. You can find the <a href="https://github.com/mozilla-b2g/B2G">B2G source code on Github</a>.</p> + +<h2 id="গায়ায়_অবদান_রাখা">গায়ায় অবদান রাখা</h2> + +<p>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 <a href="/en-US/Firefox_OS/Hacking_Firefox_OS/Quickstart_guide_to_Gaia_development">Quickstart guide to Gaia development</a>.</p> + +<p>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 <a href="/en-US/Firefox_OS/Platform/Gaia/Hacking">Hacking Gaia</a>.</p> + +<h2 id="ফায়ারফক্স_ওএস_এর_জন্য_অ্যাপ_ডেভেলপ_করা">ফায়ারফক্স ওএস এর জন্য অ্যাপ ডেভেলপ করা</h2> + +<p>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 <a href="/en-US/Apps">App Center</a> and <a href="/en-US/docs/Web">Web Platform</a> pages.</p> + +<div class="note"> +<p><strong>Note</strong>: 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 <a href="/en-US/Apps/Quickstart">apps Quickstart guide</a>.</p> +</div> + +<h3 id="ক্রস-ফায়ারফক্স_ওএস_সমর্থন">ক্রস-ফায়ারফক্স ওএস সমর্থন</h3> + +<p>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 <a href="/en-US/Firefox_OS/Developer_phone_guide/Phone_specs#Firefox_OS_phones_available">available phones table</a> 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.</p> + +<div class="warning"> +<p>The current baseline platform we recommended developing for is <a href="/en-US/Firefox_OS/Releases/1.1">Firefox 1.1</a>.</p> +</div> + +<p><strong>Note</strong>: MDN's <a href="/en-US/docs/Web">web platform reference pages</a> include browser/platform support information, plus you can find support information for more App-specific technologies on our <a href="/en-US/Apps/Reference">Apps API Reference</a>.</p> + +<p>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.</p> + + + +<div id="__if72ru4sdfsdfrkjahiuyi_once" style="display: none;"></div> + +<div id="__hggasdgjhsagd_once" style="display: none;"></div> 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 +--- +<div> + এটি একটি <a href="http://pandaboard.org/" title="http://pandaboard.org/">PandaBoard</a> এ ফায়ারফক্স অপারেটিং সিস্টেম সেট আপ এর গাইড । PandaBoard হচ্ছে কম খরচে OMAP 4 ভিত্তিক উন্নয়ন বোর্ড যা মোবাইল অপারেটিং সিস্টেম উন্নয়ন করে ।</div> +<div> + </div> +<div> + এই নির্দেশাবলী ধরে নেয় আপনার একটি অন্তত 4 গিগাবাইট এর এসডি কার্ড আছে ।</div> +<div> + </div> +<h2 id="এসডি_কার্ড_ফরম্যাট">এসডি কার্ড ফরম্যাট </h2> +<div> + <span style="line-height: 1.5;">এই </span><a href="http://omappedia.org/wiki/Minimal-FS_SD_Configuration" style="line-height: 1.5;" title="http://omappedia.org/wiki/Minimal-FS_SD_Configuration">guide</a><span style="line-height: 1.5;"> এর অনুসারে এসডি কার্ডটি ফরম্যাট করুন ।</span></div> +<div> + </div> +<div> + </div> +<div> + <h2 id="ইউএসবি_যোগাযোগ" style="line-height: 30px;">ইউএসবি যোগাযোগ</h2> +</div> +<div> + </div> +<div> + পান্ডাবোর্ড ইউএসবি যোগাযোগ সক্রিয় করার জন্য নিম্নলিখিত <a href="http://source.android.com/source/initializing.html#configuring-usb-access" title="http://source.android.com/source/initializing.html">steps</a> গুলি অনুসরণ করুন। B2G এর জন্য, ফাইল মোড হিসাবে "0666" ব্যবহার করা আপনার জন্য নিরাপদ ।</div> +<div> + </div> +<div> + পরীক্ষা করুন পান্ডাবোর্ডটি কম্পিউটারে প্লাগিং করার পর ইউএসবি ব্যবহার এবং চালু করা যায় কিনা :</div> +<pre>lsusb</pre> +<div> + আপনি যদি টেক্সাস ইনস্ট্রুমেন্ট থেকে কিছু দেখন, তাহলে আপনি পান্ডাবোর্ড খুঁজে পাবেন । যদি না পান তাহলে সব তারগুলো খুলতে হবে এবং শুধু পান্ডাবোর্ড টা ইউএসবি তে সংযোগ করতে হবে ।</div> +<div> + </div> +<h2 id="বিল্ডিং_এবং_ফ্ল্যাশিং">বিল্ডিং এবং ফ্ল্যাশিং</h2> +<div> + পান্ডাবোর্ড এর জন্য <a href="https://developer-new.mozilla.org/en/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build" title="https://developer-new.mozilla.org/en/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build">configuring</a> করার পর , এখন আমরা <a href="https://github.com/mozilla/Negatus" title="https://github.com/mozilla/Negatus">Negatus</a>এর দিকে যাব ।এটি একটি এজেন্ট যেটি ডিভাইসে চলে এবং ডিবাগ /অটমোটও কে সাহায্য করে ।./build.sh চালু করার সাথে সাথেই স্বয়ংক্রিয়ভাবে Negatus তৈরি হবে ।কিন্তু আপনাকে libnspr(apt-get install libnspr4-dev)ইনস্টল করতে হবে। ইমেজ <a href="https://developer-new.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko" title="https://developer-new.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko">building</a> পর , সবচেয়ে কৌশলপূর্ণ অংশ হচ্ছে পান্ডাবোর্ড কে ফ্ল্যাশিং করা ।</div> +<div> + </div> +<div> + এখানে নির্দেশাবলী অনুসরণ করার চেষ্টা করুন <a href="https://github.com/mozilla-b2g/android-device-panda" title="https://github.com/mozilla-b2g/android-device-panda">here</a>, এই পর্যন্ত এবং প্রাথমিক সেটআপ এর পার্ট ৩ পর্যন্ত'. আপনি প্রাথমিক সেটআপ এর অংশ ১ বাদ দিতে পারেন যেটি বিল্ড ধাপেই হয়ে গেছে ।প্রাথমিক সেটআপ অংশ ৩ শেষ করার পর আবার এখানে ফিরে আসুন ।</div> +<div> + </div> +<p><code><font face="Open Sans, sans-serif">এখন আপনি সাধিনভাবে </font>./flash.sh</code> কমান্ডটি চালু করতে পারেন , এবংআশা করি সবকিছু ভালভাবে চলবে । যদি <code>flash.sh</code> স্ক্রিপ্ট চেষ্টা করে ইউজার ডাটা পার্টিশনটি মুছে ফেলতে এবং লাইন গুলো অপসারণ করতে ।এটি <a href="https://github.com/mozilla-b2g/android-device-panda" title="https://github.com/mozilla-b2g/android-device-panda">instructions</a> এ একটি জানা সমস্যা ।</p> +<p>ফ্ল্যাশিং শেষ হওয়ার পর আপনাকে পুনরায় বুট করার প্রয়োজন হতে পারে সব ইউএসবি এবং পাওয়ার কর্ড খুলে এবং আবার পরে লাগাতে হবে (প্রথমে পাওয়ার কর্ড প্লাগ করা উচিত) </p> +<p>এখানে পরিচিত সমস্যাগুলো নিয়ে কাজ করা হয়েছে :</p> +<h3 id="OMAP4XXX_জন্য_অপেক্ষা_করছে_..._ইউএসবিবুট_ব্যবহার_করার_চেষ্টা_করার_সময়">"OMAP4XXX জন্য অপেক্ষা করছে ..." ইউএসবিবুট ব্যবহার করার চেষ্টা করার সময়</h3> +<p>যদি আপনি এই বার্তা দেখতে পান , তাহলে সব তারগুলো খুলে ফেলুন পান্ডাবোর্ড থেকে। শুধু পান্ডাবোর্ডটি ইউএসবি এর মাধ্যমে লাগান । পাওয়ার এ সংযোগ দিবেন না । এখন চেষ্টা করুন এবং চালু করুন ইউএসবিবুটকে <code style="font-style: normal; line-height: 1.5;">সুডো হিসাবে।</code></p> +<h3 id="ফাস্টবুট_ত্রুটি_ফ্ল্যাশিং_এর_সময়">ফাস্টবুট ত্রুটি ফ্ল্যাশিং এর সময় </h3> +<p>যদি আপনার ফাস্টবুট এ কমান্ড এ সমস্যা হয় তাহলে আমি সুডো এর সাথে সাফল্য পেয়েছি । (অর্থাৎ : <code>সুডো <fastboot command...></code>)</p> +<p>এছাড়াও, যদি ফাস্টবুট মুডে আপনার পান্ডাবোর্ডতি পেতে সমস্যা হলে (অর্থাৎ : কোন ডিভাইসই লিস্ট এর অন্তর্ভুক্ত থাকবে না যদি আপনি ফাস্টবুট কল করি ),তাহলে আপনি করতে পারেন:</p> +<ol> + <li>পান্ডাবোর্ড থেকে সবকিছু খুলে ফেলতে হবে ।</li> + <li>GPIO বোতামটিকে চেপে ধরে রাখি ।</li> + <li>বোতামটিকে চেপে ধরে রাখা অবস্থায় পাওয়ারএ সংযোগ দেই ।</li> + <li>নিরেট আলোটির অবস্থা দেখি ,এবং যখন একবার আলোটি হালকা ফ্ল্যাশ শুরু করে তখন GPIO বোতামটিকে ছেড়ে দেই ।</li> +</ol> +<p>এটি তাহলে আপনার পান্ডাবোর্ডকে ফাস্টবুট মুডে নিয়ে যাবে ।</p> +<h3 id="এডিবি_এর_সাথে_সংযোগ_করতে_পারে_না">এডিবি এর সাথে সংযোগ করতে পারে না </h3> +<p> যদি আপনি ডিভাইস কে lsusb এ দেখেন, কিন্তু এডিবি / ফাস্টবুট ডিভাইস এবং লাইটগুলো বন্ধ থাকে তাহলে তখন পাওয়ার এর উৎস সরিয়ে নিতে হবে এবং আবার সংযোগ দিতে হবে ।আর যদি লাইট জালানো থাকে তাহলে আপনাকে আক্তু অপেক্ষা করতে হবে (সর্বোচ্চ ৩০ সেকেন্ড)এডিবি নিবন্ধিত করার জন্য ।</p> +<p>মাঝেমধ্যে ফ্ল্যাশিং সফল বলে দাবী করলেও , কিন্তু এটা সফল হইনি । পান্ডাবোর্ড রিফ্লাশের মাধ্যমে ( অর্থাত্: রান ./flash.sh) এবং আবার চেষ্টা করুন । আমি প্রথমে পাওয়ার সংযোগ করার এবং এরপর ইউএসবি তারটি সংযোগ দেয়ার পরামর্শ দিচ্ছি ।</p> +<p>যদি আপনি এডিবি ডিভাইস পেয়ে থাকেন "??????????? অনুমতি নেই", এমনকি রুট হিসাবে, "কনফিগার ইউএসবি অ্যাক্সেস" অংশটি এই <a href="http://source.android.com/source/initializing.html" style="line-height: 1.5;" title="http://source.android.com/source/initializing.html">site</a><span style="line-height: 1.5;"> এ চেক করুন এবং </span><span style="line-height: 1.5;">udev সংক্রান্ত নিয়ম অনুযায়ী ঠিক বা সংযোগ করুন ।</span><span style="line-height: 1.5;"> পরিবর্তনের পর</span><span style="line-height: 1.5;"> পুনরায় আরম্ভ করতে ভুলবেন না ।</span></p> 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 +--- +<div class="column-container"> +<div class="column-half"><img alt="Intex Cloud FX image from official website" src="https://mdn.mozillademos.org/files/10093/fire-c-2g-02.png" style="display: block; height: 454px; margin: 0px auto; width: 252px;"></div> + +<div class="column-half"> +<p>অ্যালকাটেল ওয়ানটাচ ফায়ার সি ৪০২০ডি একটি ক্রেতা নির্ভর স্মার্ট ফোন যা <span id="result_box" lang="bn"><span class="hps">Tarako</span> <span class="hps">ফায়ারফক্স ওএস</span> <span class="hps">এর উপর ভিত্তি করে</span> তৈরী <span class="hps">করা হয়</span></span>, এটি ভারতে মুক্তিপ্রাপ্ত। এটি আগস্ট,২০১৪ সালে অ্যালকাটেল দ্বারা ভারতে মুক্তি দেওয়া হয়েছিলো।</p> + +<h2 id="ডিভাইসটি_সংগ্রহ">ডিভাইসটি সংগ্রহ</h2> + +<p>এটি Intex Cloud FX ই-কমার্স সাইটের মাধ্যমে ভারতে কিনতে পাওয়া যায়।</p> + +<ul> + <li><a href="http://www.flipkart.com/alcatel-onetouch-firec-4020d/p/itme3m7xuaatuwwb?pid=MOBDYS6NFPNRJUKF&ref=aa7b01a4-0479-4661-a1e8-19033b513612&srno=b_10">ফ্লিপকার্ট </a>(ফুরিয়ে গেছে)</li> +</ul> + +<h2 id="সহজলভ্য_রঙ">সহজলভ্য রঙ</h2> + +<p>ডিভাইসটি <span id="result_box" lang="bn"><span class="hps">নীলাভ</span> <span class="hps">কালো রঙ</span><span>, গাঢ়</span> <span class="hps">বেগুনী</span> <span class="hps">এবং গাঢ় চকলেট</span> রঙে <span class="hps">পাওয়া যাচ্ছে।</span></span></p> + +<h2 id="ফোন_সফটওয়্যার_আপডেট_করার_পদ্ধতি">ফোন সফটওয়্যার আপডেট করার পদ্ধতি</h2> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">ডিভাইসটির</span> <span class="hps">সিস্টেম ইমেজ</span> <span class="hps">লক করা আছে</span></span>। যখন <span id="result_box" lang="bn"><span class="hps">নেটওয়ার্ক অপারেটরের</span> <span class="hps">একটি OTA আপডেট</span> <span class="hps">রিলিজ</span> হবে<span class="hps"> তখন আপনি</span><span class="hps"> সফ্টওয়্যার</span> <span class="hps">আপডেট করতে পারবেন</span></span>। <span id="result_box" lang="bn"><span class="hps">ডিভাইসটির</span> <span class="hps">সিস্টেম ইমেজ</span> <span class="hps">'ফায়ারফক্স ওএস</span> <span class="hps">১.৩টি' এর</span> <span class="hps">উপর ভিত্তি করে</span></span> তৈরী।</p> +</div> +</div> + +<h2 id="হার্ডওয়্যার_বিস্তারিত_বিবরণ">হার্ডওয়্যার বিস্তারিত বিবরণ</h2> + +<ul> + <li><strong>সিপিইউঃ</strong> ১গিগাহার্টজ</li> + <li><strong>ক্যামেরাঃ </strong>১.৩<strong> </strong>মেগাপিক্সেল (পিছনে)</li> + <li><strong>ব্যাটারীঃ</strong> ১০০০ এমএএইচ</li> + <li><strong>ডিসপ্লেঃ</strong> ৩.৫"এইচভিজিএ</li> + <li><strong>রেজুলেশনঃ</strong> <span id="lblSpec">৩২০</span><span>x৪৮০</span></li> + <li><strong>অভ্যন্তরীণ মেমরিঃ</strong> ২৫৬এমবি রম, ১২৮এমবি র্যাম</li> + <li><strong>বহিঃস্থ মেমরিঃ</strong> মাইক্রোএসডি (সর্বোচ্চ ৩২জিবি পর্যন্ত)</li> + <li><strong>আয়তনঃ</strong> <span>১১২.২ x ৬২ x ১১.৯৫ মি.মি</span></li> + <li><strong>ওজনঃ</strong> প্রায়.৯৩ গ্রাম (ব্যাটারী সহ)</li> +</ul> + +<h2 id="আরও_পড়ুন">আরও পড়ুন</h2> + +<ul> + <li><a href="http://www.alcatelonetouch.com/in/products/smartphones/fire_c_2g.html#.VNUS5DVyhWU">অফিশিয়াল অ্যালকাটেল ওয়ানটাচ ফায়ার সি ২জি তথ্যাবলী</a></li> + <li><a href="http://www.spicesmartphones.com/index.php?route=information/userguide/download&prod_id=249">ব্যবহারকারী নির্দেশিকা</a></li> +</ul> 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 +--- +<div class="summary"> +<p><span class="seoSummary"><span id="result_box" lang="bn"><span class="hps">নিম্নলিখিত</span> <span class="hps">নিবন্ধ <span id="result_box" lang="bn"><span class="hps">ভাল পদ্ধতি</span> এর <span class="hps">একটি সেট</span> <span class="hps">প্রদান</span> <span class="hps">করার লক্ষ্যে কাজ করে</span></span></span></span> <span id="result_box" lang="bn"><span class="alt-edited hps">যা</span></span> আমরা <span id="result_box" lang="bn"><span class="hps">বিশ্বাস করি <span id="result_box" lang="bn"><span class="alt-edited hps">প্রচুর পাওয়া যায়</span> <span class="alt-edited hps">এমন ওপেন</span> <span class="hps">রেফারেন্স</span> <span class="hps">ডিভাইসের</span> <span class="alt-edited hps">জন্য প্রস্তাবিত <span id="result_box" lang="bn"><span class="alt-edited hps">হওয়া উচিত।</span></span></span></span></span></span> সকল <span id="result_box" lang="bn"><span class="hps">সাম্প্রতিক</span> <span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="hps">রেফারেন্স</span> <span class="alt-edited hps">ডিভাইস <span id="result_box" lang="bn"><span class="hps">এইসব</span> <span class="alt-edited hps">পদ্ধতি</span> <span class="alt-edited hps">অনুসরণ করে</span></span></span></span>,<span class="short_text" id="result_box" lang="bn"><span class="hps">আসন্ন</span> ফ্লেম সহ।</span></span></p> +</div> + +<div class="almost_half_cell" id="gt-res-content"> +<div dir="ltr" style="zoom: 1;"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">ডিভাইসের</span> <span class="hps">থাকা উচিত </span><span>:</span></span></div> + +<div dir="ltr" style="zoom: 1;"> </div> +</div> + +<ul> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">সহজলভ্য এবং <span class="short_text" id="result_box" lang="bn"><span class="hps">ইনস্টলযোগ্য <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">বিল্ড</span></span></span></span></span></span></li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">সম্পূর্ণরূপে</span> <span class="alt-edited hps">আনলক করা</span> <span class="hps">অপারেটিং</span> <span class="hps">সিস্টেম</span></span></li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">বিশ্বব্যাপী</span> <span class="alt-edited hps">সহজলভ্যতা</span></span></li> + <li><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">কনজিউমার</span> <span class="alt-edited hps">ফোনের</span> <span class="hps">সমতূল্য </span></span>ফিচার <span class="short_text" id="result_box" lang="bn"><span class="hps">সমর্থন</span></span></li> + <li> + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">প্রতিস্থাপন করার</span> <span class="alt-edited hps">ব্যাটারীর</span> <span class="hps">সহজলভ্যতা</span></span></div> + </div> + </li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">সহজেই <span class="short_text" id="result_box" lang="bn"><span class="hps">ভাষা</span> <span class="hps">পছন্দ <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">সক্রিয় করা</span></span></span></span></span></span></li> +</ul> + +<h2 id="সহজলভ্য_এবং_ইনস্টলযোগ্য_বিল্ডস"><span class="short_text" id="result_box" lang="bn"><span class="hps">সহজলভ্য এবং <span class="short_text" id="result_box" lang="bn"><span class="hps">ইনস্টলযোগ্য <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">বিল্ডস</span></span></span></span></span></span></h2> + +<p><span id="result_box" lang="bn"><span class="hps">রেফারেন্স</span> <span class="hps">ডিভাইস</span> <span class="hps">মূলত <span id="result_box" lang="bn"><span class="hps">গড়</span> <span class="hps">ডিভাইস</span> <span class="alt-edited hps">গ্রাহকদের</span> <span class="hps">চেয়ে <span id="result_box" lang="bn"><span class="hps">বেশী <span id="result_box" lang="bn"><span class="alt-edited hps">টেকনিক্যাল জ্ঞানের অধিকারী <span id="result_box" lang="bn"><span class="hps">ডেভেলপার এবং</span> <span class="hps">অন্যান্য</span> <span class="hps">গ্রুপ এর দিকে <span id="result_box" lang="bn"><span class="alt-edited">উদ্দেশ্যমূলক।</span></span></span></span></span></span></span></span></span></span></span></span> <span id="result_box" lang="bn"><span class="hps">এমনকি, তাই <span id="result_box" lang="bn"><span class="alt-edited hps">আমাদের <span id="result_box" lang="bn"><span class="hps">এই ডিভাইসের</span> <span class="alt-edited hps">ব্যবহারকারীরা</span> <span class="hps">তারা <span id="result_box" lang="bn"><span class="hps">ইচ্ছুক না</span> <span class="hps">হলে </span></span><span id="result_box" lang="bn"><span class="hps">তাদের নিজেদের</span> <span class="alt-edited hps">বিল্ড <span id="result_box" lang="bn"><span class="alt-edited hps">কম্পাইল করে</span> <span class="hps">আশা</span> <span class="hps">করা উচিত নয়</span></span></span></span></span></span></span></span></span></span> —<span class="short_text" id="result_box" lang="bn"><span class="hps">তাদের অনেক</span> <span class="hps">জন্য</span> </span>এটি একটি <span class="short_text" id="result_box" lang="bn"><span class="hps">সম্পূর্ণ</span> <span class="alt-edited hps">সময় নষ্টের বিষয়।</span></span></p> + +<p><span id="result_box" lang="bn"><span class="hps">ওপেন</span> <span class="hps">রেফারেন্স</span> <span class="alt-edited hps">ডিভাইসের <span id="result_box" lang="bn"><span class="hps">অ্যাক্সেস<span id="result_box" lang="bn"><span class="hps">করা সহজ</span> <span class="hps">হয় এমন <span id="result_box" lang="bn"><span class="hps">একটি</span> <span class="hps">রক্ষণাবেক্ষণ <span id="result_box" lang="bn"><span class="alt-edited hps">আনলক <span id="result_box" lang="bn"><span class="alt-edited hps">বিল্ড</span> <span class="hps">থাকা উচিত <span id="result_box" lang="bn"><span class="hps">বর্তমান</span> <span class="hps">ও</span> <span class="hps">ভবিষ্যতের জন্য।এর মানে <span class="short_text" id="result_box" lang="bn"><span class="hps">একাধিক</span> <span class="alt-edited hps">স্তরের <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">বিল্ড <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">পাওয়া যায়,<span class="short_text" id="result_box" lang="bn"><span class="hps">কমপক্ষে</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> :</p> + +<ul> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">রিলিজ</span> <span class="hps">/</span> <span class="hps">বর্তমান</span></span></li> + <li><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">স্থায়ী</span> <span class="hps">/</span> <span class="hps">বেটা</span></span></li> + <li><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">নাইট</span></span>লি</li> +</ul> + +<p>তাদের <span id="result_box" lang="bn"><span class="hps">একটি ডেডিকেটেড</span> <span class="hps">ডাউনলোড</span> <span class="hps">পেজে</span> <span class="hps">সহজে পাওয়া উচিত<span id="result_box" lang="bn"><span>, এবং</span> <span class="hps">নিয়মিত</span> <span class="hps">এবং প্রায়ই</span> <span class="hps">আপডেট</span> <span class="hps">করা উচিত।</span></span></span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">এছাড়াও</span></span> <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">ডিভাইসসমূহের <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">তাদের জন্য <span class="short_text" id="result_box" lang="bn"><span class="hps">OTA</span> <span class="hps">আপডেট সহজলভ্য করা উচিত।</span></span></span></span></span></span></p> + +<p><span id="result_box" lang="bn"><span class="hps">OEMs</span> <span class="hps">এইসব <span id="result_box" lang="bn"><span class="alt-edited hps">বিল্ড <span id="result_box" lang="bn"><span class="hps">প্রদানের</span> <span class="hps">জন্য </span></span></span></span></span></span>রেস্পন্সিবল হওয়া উচিত যেহেতু <span id="result_box" lang="bn"><span class="alt-edited hps">শুধুমাত্র</span> <span class="alt-edited hps">তারাই <span id="result_box" lang="bn"><span class="hps">আইনত</span> <span class="hps">সব</span> <span class="hps">প্রয়োজনীয়</span> <span class="hps">বাইনারি<span id="result_box" lang="bn"><span>, ইত্যাদি <span id="result_box" lang="bn"><span class="hps">বিতরণ করতে পারেন।</span></span></span></span></span></span></span></span></p> + +<p><span id="result_box" lang="bn"><span class="hps">এটি</span> <span class="hps">ফায়ারফক্স</span> <span class="hps">ব্রাউজারে</span> <span class="hps">একটি অনুরূপ</span> <span class="hps">মডেল</span> <span class="hps">অনুসরণ</span> <span id="result_box" lang="bn"><span class="alt-edited hps">করতে পারে</span></span></span>, <span class="short_text" id="result_box" lang="bn"><span class="hps">যেখানে প্রতিটি <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">রিলিজ</span></span></span></span>, <span id="result_box" lang="bn"><span class="alt-edited hps">স্থায়ী এবং নাইটলি <span id="result_box" lang="bn"><span class="alt-edited hps">চ্যানেলগুলি <span id="result_box" lang="bn"><span class="hps">পরবর্তী</span> <span class="hps">সংস্করণের</span> <span id="result_box" lang="bn"><span class="hps">সোর্স কোড ভিত্তিক।</span></span></span></span></span></span></span></p> + +<h2 id="পুরোপুরি_আনলক_করা_অপারেটিং_সিস্টেম"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">পুরোপুরি</span> <span class="alt-edited hps">আনলক করা</span> <span class="hps">অপারেটিং</span> <span class="hps">সিস্টেম</span></span></h2> + +<p><span id="result_box" lang="bn"><span class="hps">ডিভাইস</span> <span class="hps">অপারেটিং</span> <span class="hps">সিস্টেম</span> <span class="hps">প্ল্যাটফর্ম</span> <span class="hps">সম্পূর্ণ</span> <span class="hps">আনলক করা</span> <span class="hps">উচিত</span></span>, <span id="result_box" lang="bn"><span class="alt-edited hps">যাতে</span> <span class="alt-edited hps">করে</span> <span class="hps">অ্যাপ্লিকেশন</span> <span class="hps">এবং</span> <span class="hps">প্ল্যাটফর্ম</span> <span class="hps">ডেভেলপারদের</span> <span class="hps">কোনো</span> <span class="hps">পছন্দসই</span> <span class="hps">পরীক্ষা এবং</span> <span class="hps">উন্নয়ন</span> <span class="hps">কাজ</span> <span class="hps">সম্পাদনের জন্য</span> <span class="hps">তাদের</span> <span class="hps">ডিভাইসের</span> <span class="hps">উপর</span> <span class="hps">নিয়ন্ত্রণের</span> <span class="hps">প্রয়োজনীয়</span> <span class="hps">স্বাধীনতা</span> <span class="hps">থাকতে পারে।</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">এর মধ্যে রয়েছে</span></span>:</p> + +<ul> + <li><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">আনলক করা</span> <span class="hps">সিম</span></span></li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">আনলক </span></span>Bootloader</li> + <li>রুট <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">অ্যাক্সেস</span></span></li> +</ul> + +<h2 id="বিশ্বব্যাপী_সহজলভ্যতা"><span class="short_text" id="result_box" lang="bn"><span class="hps">বিশ্বব্যাপী</span> <span class="alt-edited hps">সহজলভ্যতা</span></span></h2> + +<p><span id="result_box" lang="bn"><span class="hps">আপনি আপনার</span> <span class="hps">রেফারেন্স</span> <span class="hps">ডিভাইসের</span> <span class="hps">একটি সার্বজনীন</span> <span class="hps">মান</span> <span class="hps">পেতে চান</span></span>, <span id="result_box" lang="bn"><span class="alt-edited hps">তাহলে <span id="result_box" lang="bn"><span class="hps">আপনাকে </span></span>এটি</span> <span class="hps">বিশ্বব্যাপী</span> <span class="hps">প্রাপ্তিসাধ্য</span> <span class="alt-edited hps">করা উচিত।</span></span><span class="short_text" id="result_box" lang="bn"><span class="hps">যদি এই ক্ষেত্রে</span> <span class="alt-edited hps">না হয়</span></span>, <span id="result_box" lang="bn"><span class="hps">বিভিন্ন</span> <span class="alt-edited hps">লোক্যাল</span> এর <span class="hps">ব্যক্তিদের</span> <span class="alt-edited hps">বিভিন্ন ডিভাইস</span> <span class="alt-edited hps">দিয়ে</span> <span class="hps">কাজ</span> <span class="hps">করতে হবে</span></span>, যা <span class="short_text" id="result_box" lang="bn"><span class="hps">ভিন্ন</span> <span class="alt-edited hps">ব্যবহার </span></span>আনতে পারে।</p> + +<h2 id="কনজিউমার_ফোনের_সমতূল্য_ফিচার_সমর্থন">কনজিউমার ফোনের সমতূল্য ফিচার সমর্থন</h2> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">একটি রেফারেন্স</span> <span class="hps">ডিভাইস</span> <span class="hps">তৈরির কোন মানে হয়না </span></span>যার সাথে <span id="result_box" lang="bn"><span class="alt-edited hps">আপনাকে <span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span class="hps">শেষ পর্যন্ত </span></span>কনজিউমার</span> <span class="hps">ডিভাইস</span> <span class="hps">হিসাবে যে <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="alt-edited hps">বিল্ড</span> <span class="alt-edited hps">এবং ওপেন</span> <span class="hps">ওয়েবে</span> <span class="hps">apps দেয়া হবে</span></span></span></span></span></span> সেটির <span id="result_box" lang="bn"><span class="hps">প্রযুক্তি ও</span> <span class="hps">সংশ্লিষ্ট ফিচারের কোন <span id="result_box" lang="bn"><span class="hps">সমর্থন</span> নেই।</span></span></span></p> + +<p><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">এর মধ্যে রয়েছে</span></span>:</p> + +<ul> + <li>AGPS/<span class="short_text" id="result_box" lang="bn"><span class="hps">অন্যান্য</span> <span class="alt-edited hps">সংশ্লিষ্ট</span> <span class="alt-edited hps">geolocation</span> <span class="hps">হার্ডওয়্যার</span></span></li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">ফোন</span> <span class="hps">কম্পাস</span></span>/<span id="result_box" lang="bn"><span class="hps">জাইরোস্কোপ</span></span>/<span class="short_text" id="result_box" lang="bn"><span class="hps">অ্যাকসিলরোমিটার</span></span></li> + <li>ইমেজ এবং ভিডিও ক্ষমতা সম্পন্ন ফোন ক্যামেরা (গুলি)</li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">কম্পন</span> <span class="hps">হার্ডওয়্যার</span></span></li> + <li>SDCard <span class="short_text" id="result_box" lang="bn"><span class="hps">স্টোরেজ</span></span></li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">ফোন</span></span> ringer</li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">উপযুক্ত</span> <span class="alt-edited hps">হার্ডওয়্যার বাটন</span></span></li> + <li>3G<span class="short_text" id="result_box" lang="bn"> <span class="hps">বা ভাল</span> <span class="hps">সংযোগ</span></span></li> +</ul> + +<h2 id="ব্যাটারী_বদল_করার_সহজলভ্যতা"><span class="short_text" id="result_box" lang="bn"><span class="hps">ব্যাটারী</span> <span class="hps">বদল করার সহজলভ্যতা</span></span></h2> + +<p><span id="result_box" lang="bn"><span class="hps">প্রতিস্থাপন</span> <span class="hps">ব্যাটারী</span> <span class="hps">প্রায়ই</span> <span class="hps">বিভিন্ন ডিভাইসের</span> <span class="hps">জন্য</span> <span class="hps">পাওয়া</span> <span class="alt-edited hps">আসলেই</span> <span class="hps">কঠিন হতে পারে</span></span>,<span id="result_box" lang="bn"><span class="hps">এবং অন্যথায়</span> <span class="hps">উপযোগী</span> <span class="alt-edited hps">ডিভাইসগুলি</span> <span class="alt-edited hps">অনর্থক <span id="result_box" lang="bn"><span class="hps">ব্যবহৃত <span id="result_box" lang="bn"><span class="hps">হতে পারে।<span id="result_box" lang="bn"><span class="hps">সুতরাং</span> <span class="alt-edited hps">যতটা সম্ভব</span> <span class="alt-edited hps">বদলি</span> <span class="hps">ব্যাটারী <span id="result_box" lang="bn"><span class="hps">প্রাপ্তিসাধ্য রাখা একটি ভালো <span id="result_box" lang="bn"><span class="hps">উদ্যোগ</span></span></span></span></span></span></span></span></span></span></span></span>।</p> + +<h2 id="সহজেই_ভাষা_পছন্দ_সক্রিয়_করা"><span class="short_text" id="result_box" lang="bn"><span class="hps">সহজেই</span> <span class="hps">ভাষা</span> <span class="hps">পছন্দ</span> <span class="alt-edited hps">সক্রিয় করা</span></span></h2> + +<p><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">যেহেতু<span class="short_text" id="result_box" lang="bn"><span class="hps"> এই</span> <span class="hps">ডিভাইসটি</span> <span class="hps">বিশ্বব্যাপী</span> <span class="alt-edited hps">ছড়িয়ে দেওয়া হবে</span></span></span></span>, <span id="result_box" lang="bn"><span class="alt-edited hps">রিসোর্স</span></span> এর <span id="result_box" lang="bn"><span class="hps">একাউন্ট</span> <span class="alt-edited hps">সহজলভ্যতা <span id="result_box" lang="bn"><span class="hps">এবং</span> <span class="hps">সবচেয়ে জনপ্রিয়</span> <span class="hps">টার্গেট মার্কেট</span> <span class="hps">লোকেইলের কথা বিবেচনা করে,<span id="result_box" lang="bn"><span class="hps">যতটা সম্ভব</span> বিভিন্ন <span class="hps">ভাষার জন্য</span> </span></span></span></span></span>লোকালাইজড বিল্ড <span id="result_box" lang="bn"><span class="hps">তৈরী</span> <span class="hps">করা</span> <span class="hps">জরুরী।</span></span></p> + +<p>এটার সবচেয়ে সহজ সমাধান হচ্ছে লোকালাইজড গায়া বিল্ডস অথবা ল্যাঙ্গুয়েজ প্যাক যেগুলো <span id="result_box" lang="bn"><span class="hps">আলাদাভাবে</span> <span class="hps">ডিভাইসে ফ্লাশড হয়</span></span>, <span id="result_box" lang="bn"><span class="hps">এবং</span> <span class="hps">মোজিলা</span></span> <span id="result_box" lang="bn"><span class="hps">যতটা দ্রুত সম্ভব এর </span></span> <span id="result_box" lang="bn"><span class="alt-edited hps">নির্মাণ এবং <span id="result_box" lang="bn"><span class="hps">ইনস্টলেশনের</span> <span class="hps">জন্য </span></span></span></span>কাজ করছে।</p> 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 +--- +<h2 id="বাটন_এবং_নিয়ন্ত্রণ">বাটন এবং নিয়ন্ত্রণ</h2> +<p>যে কোন সাধারণ ফায়ারফক্স OS ডিভাইসের খুব কম সংখ্যক বাহ্যিক হার্ডওয়ার বাটন থাকেঃ</p> +<dl> + <dt> + হোম বাটন</dt> + <dd> + সাধারণত এই বাটনটি স্ক্রিনের নিচে মাঝ বরাবর জায়গায় থাকে। এটিতে চাপ দিলে , আপনি অ্যাপ লঞ্চারে ফিরে আসবেন। এটিকে ধরে রাখলে কার্ড সুইচিং ভিউ চালু হবে ; ওই ভিউতে কোন অ্যাপে সুইপ করলে সেই অ্যাপটি বন্ধ হয়ে যাবে।</dd> + <dt> + ভলিউম কন্ট্রোল রকার</dt> + <dd> + বামদিকে ভলিউম রকারটি থাকে ; উপরের অর্ধেক অংশে চাপ দেয়ার মাধ্যমে অডিও ভলিউম বাড়ানো যায় এবং নিচের অর্ধেক অংশে চাপ দেয়ার মাধ্যমে অডিও ভলিউম কমানো যায়।</dd> + <dt> + পাওয়ার বাটন</dt> + <dd> + ডিভাইসের উপরের ডান কোণার অংশে পাওয়ার বাটনটি থাকে।</dd> +</dl> +<h2 id="সর্বনিম্ন_যে_পরিমাণ_হার্ডওয়ার_প্রয়োজন">সর্বনিম্ন যে পরিমাণ হার্ডওয়ার <span style="font-size: 2.142857142857143rem;">প্রয়োজন</span></h2> +<p>সর্বশেষ ARM ভিত্তিক মোবাইল ডিভাইস ফায়ারফক্স ওএস ধারণ করতে সক্ষম। এই অংশটি সর্বনিম্ন প্রয়োজনীয় হার্ডওয়্যারের চাহিদার সাথে সাথে সুপারিশকৃত হার্ডওয়্যারের পরিমাণ ও বলে দিবে।</p> +<table> + <thead> + <tr> + <th scope="col">উপাদান</th> + <th scope="col">সর্বনিম্ন</th> + <th scope="col">সুপারিশকৃত</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">সিপিইউ</th> + <td>ARMv6</td> + <td> + <p>Cortex A5 শ্রেণীর অথবা<span style="line-height: 1.5;"> ARMv7a with NEON হলে ভালো</span></p> + </td> + </tr> + <tr> + <th scope="row">জিপিইউ</th> + <td>—</td> + <td> + <p>Adreno 200 শ্রেণীর অথবা এর থেকে অপেক্ষাকৃত</p> + <p>ভালো কিছু</p> + </td> + </tr> + <tr> + <th scope="row">সংযোগ</th> + <td>—</td> + <td>ওয়াই-ফাই<br> + থ্রিজি</td> + </tr> + <tr> + <th scope="row">সেন্সর</th> + <td>—</td> + <td>Accelerometer<br> + Proximity<br> + Ambient light<br> + A-GPS</td> + </tr> + </tbody> +</table> +<div class="note"> + <p><strong>নোটঃ</strong> ভালো অভিজ্ঞতার জন্য ,এমন কোন ডিভাইস নির্বাচন করা ভালো যেখানে ইউনিফর্ম কালার প্রোফাইলের ব্যবস্থা আছে ( যা গ্রাফিক্স ডিভাইস ড্রাইভারের সাহায্যে বাস্তবায়িত) এবং নীরবতা বা নিরবতাবন্ধ করার জন্য এবং মিডিয়া চালু বা বন্ধ করার জন্য হেডফোনের সাপোর্ট। আধুনিক স্মার্টফোনগুলোতে এই সুবিধাগুলো সাধারনভাবেই থাকে।</p> +</div> +<dl> + <dt> + </dt> +</dl> 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 +--- +<div> +<h3 id="শীঘ্রই_আসছে"><img alt="A picture of the Flame device, showing the Firefox OS homescreen containing several app icons." src="https://mdn.mozillademos.org/files/7697/Firefox-OS-Flame-Reference-Device-small.png" style="float: left; margin-bottom: 20px; margin-right: 50px;"><span class="short_text" id="result_box" lang="bn"><span class="hps">শীঘ্রই আসছে</span></span></h3> + +<p><span class="seoSummary">ফ্লেইম <span id="result_box" lang="bn"><span class="hps">ডেভেলপার</span> <span class="hps">রেফারেন্স</span> <span class="hps">ফোন</span> <span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="hps">ডিভাইসের</span> <span class="hps">রিলিজে</span> <span class="hps">একটি</span> <span class="hps">মাইলফলক</span></span>। ফ্লেইম <span id="result_box" lang="bn"><span class="hps">হার্ডওয়্যার একটি <span id="result_box" lang="bn"><span class="hps">প্রতিনিধি স্পেক্স এর সেট প্রস্তাব করে</span></span></span></span> — <span id="result_box" lang="bn"><span class="hps">FWVGA</span> <span class="hps">প্রদর্শন এবং</span> <span class="hps">ডুয়াল কোর প্রসেসর</span> <span class="hps">সহ</span></span> ( <a href="/en-US/Firefox_OS/Developer_phone_guide/Phone_specs">Phone and device specs</a> দেখুন <span id="result_box" lang="bn"><span class="hps">পূর্ণ স্পেক্স এর জন্য</span></span>) —<span class="short_text" id="result_box" lang="bn"><span class="hps">ডেভেলপারদের</span> <span class="alt-edited hps">দারুণ</span> <span class="hps">কন্টেন্ট এবং</span> <span class="hps">অভিজ্ঞতা</span> <span class="alt-edited hps">গড়ে তুলতে সাহায্য করার জন্য</span></span>। <span id="result_box" lang="bn"><span class="hps">একটি</span> <span class="hps">একক</span> <span class="hps">হার্ডওয়্যার</span> <span class="hps">প্ল্যাটফর্ম <span id="result_box" lang="bn"><span class="alt-edited hps">পরীক্ষাকারীদের</span> <span class="hps">জন্য ভাল</span></span></span></span>,কারণ এটি টেস্ট করা সহজ করে এবং <span id="result_box" lang="bn"><span class="hps">ডিভাইস</span> <span class="hps">মডেল নির্দিষ্ট</span> <span class="hps">বাগ <span id="result_box" lang="bn"><span class="alt-edited hps">ইত্যাদির চিন্তা ছাড়াই <span id="result_box" lang="bn"><span class="hps">নির্দিষ্ট</span> <span class="hps">সফ্টওয়্যার</span> <span class="alt-edited hps">বিষয়ে <span id="result_box" lang="bn"><span class="alt-edited hps">সমস্যার সমাধান করতে পারে।</span></span></span></span></span></span></span></span></span></p> +</div> + +<p>যদি আপনার হাতে আপনার ফোন থাকে এবং আপনি এটি নিয়ে কাজ করতে চান, ডেভেলপ এবং <span id="result_box" lang="bn"><span class="alt-edited hps">অ্যাপ</span></span> <span id="result_box" lang="bn"><span class="hps">বিতরণ</span></span>, অথবা <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="alt-edited hps">প্ল্যাটফর্মে</span> <span class="hps">অবদান রাখতে চান</span></span>, <span class="short_text" id="result_box" lang="bn"><span class="hps">নিচের</span> <span class="hps">লিঙ্কগুলো থেকে আপনাকে কোথায় কিভাবে কি করতে হবে তার <span id="result_box" lang="bn"><span class="alt-edited hps">নির্দেশনা পাবেন</span></span></span></span>:</p> + +<ul> + <li><a href="/en-US/Firefox_OS">Firefox OS zone</a>: <span id="result_box" lang="bn"><span class="hps">আপনার নিজস্ব</span> <span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> বিল্ড <span class="hps">তৈরি</span> <span class="hps">এবং</span> <span class="hps">B2G</span> <span class="hps">এবং</span> <span class="alt-edited hps">গায়া</span> <span class="hps">প্রকল্পে</span> <span class="alt-edited hps">অবদান রাখার</span> <span class="hps">জন্য</span></span>।</li> + <li><a href="/en-US/Apps">App Center zone</a>: <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="alt-edited hps">এর সাথে সামঞ্জস্যপূর্ণ</span> <span class="alt-edited hps">ওপেন</span> <span class="hps">ওয়েব</span> <span class="hps">অ্যাপস</span> <span class="hps">নির্মাণের</span> <span class="hps">জন্য</span></span>।</li> + <li><a href="/en-US/Marketplace">Marketplace zone</a>: <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">অ্যাপস</span> <span class="hps">প্রকাশ</span> <span class="hps">ও</span> <span class="hps">বিতরণ</span> <span class="hps">তথ্যের জন্য।</span></span></li> + <li><a href="https://marketplace.firefox.com/">Firefox Marketplace</a>: <span id="result_box" lang="bn"><span class="hps">নতুন</span> <span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="alt-edited hps">অ্যাপস</span> <span class="hps">খুঁজতে এবং</span> <span class="hps">প্রকাশ করার</span> <span class="hps">সবচেয়ে ভালো</span> <span class="hps">উৎস।</span></span></li> +</ul> + +<p style=""><span id="result_box" lang="bn"><span class="alt-edited hps">যদি আপনি একটি ফোন</span> <span class="hps">কিনতে</span> <span class="hps">বা</span> <span class="hps">ব্যবহার সম্পর্কে</span> <span class="hps">আরো জানতে</span> <span class="alt-edited hps">চান তাহলে</span></span>, <span id="result_box" lang="bn"><span class="hps">নীচে </span></span>আপনি <span id="result_box" lang="bn"><span class="hps">প্রয়োজন</span></span> এর <span id="result_box" lang="bn"><span class="hps">তথ্য</span> <span class="hps">খুঁজে পাবেন।</span></span></p> + +<h2 id="একটি_ডিভাইস_ক্রয়_করা"><span class="short_text" id="result_box" lang="bn"><span class="hps">একটি ডিভাইস</span> <span class="alt-edited hps">ক্রয় করা</span></span></h2> + +<p><span id="result_box" lang="bn"><span class="hps">আমাদের</span> <span class="alt-edited hps">ডিভাইসের প্রস্তুতকারক</span> <span class="alt-edited hps">পার্টনার <span id="result_box" lang="bn"><span class="hps">প্রায়</span> <span class="hps">মার্কিন $</span> <span class="hps">170 <span id="result_box" lang="bn"><span class="hps">খুচরো <span id="result_box" lang="bn"><span class="alt-edited hps">মূল্যে</span></span></span></span></span></span></span></span> <span id="result_box" lang="bn"><span>বিশ্বব্যাপী</span> <span class="alt-edited hps">শিপিং</span> <span class="alt-edited hps">সহ, যাতে <span id="result_box" lang="bn"><span class="hps">Q2 এর</span> <span class="hps">শেষ অংশে</span> <span class="hps">2014 সালে</span> <span class="hps">কেনার জন্য</span> <span class="hps">ডিভাইসটি </span></span></span></span><span id="result_box" lang="bn"><span class="alt-edited hps">পাওয়া যায়</span> <span class="hps">সেই <span id="result_box" lang="bn"><span class="hps">ব্যবস্থা </span></span>করছে।</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">শীঘ্রই</span> <span class="alt-edited hps">প্রি</span> <span class="alt-edited hps">অর্ডার</span> এর <span class="alt-edited hps">জন্য পাওয়া যাবে!</span></span></p> + +<h2 id="জরুরী_ডাউনলোড_মোড"><span class="short_text" id="result_box" lang="bn"><span class="hps">জরুরী</span> <span class="alt-edited hps">ডাউনলোড</span> <span class="hps">মোড</span></span></h2> + +<p><span id="result_box" lang="bn"><span class="hps">আপনার ফোনে</span> <span class="hps">একটি নতুন</span> <span class="hps">বিল্ড</span> <span class="alt-edited hps">ফ্ল্যাশিং <span id="result_box" lang="bn"><span class="hps">ব্যর্থ</span> <span class="hps">হলে</span></span></span></span>, <span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার ফোন</span> <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">প্রতিক্রিয়াবিহীন</span> <span class="alt-edited hps">হয়ে যায়</span></span></span>, <span class="short_text" id="result_box" lang="bn"><span class="hps">এবং ফোন</span> <span class="hps">ব্রিক</span> <span class="hps">মোডে প্রবেশ</span> <span class="alt-edited hps">করতে পারবে না</span></span>, <span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">পুনরুদ্ধারের জন্য</span> <span class="hps">জরুরী</span> <span class="hps">ডাউনলোডের</span> <span class="hps">মোড</span> <span class="hps">ব্যবহার করতে পারেন</span></span>।</p> + +<p><span id="result_box" lang="bn"><span class="hps">একটি</span> <span class="hps">USB তার</span> <span class="hps">এবং</span> <span class="hps">জরুরী</span> <span class="hps">ডাউনলোড</span> <span class="hps">টুল</span> <span class="hps">জরুরী</span> <span class="hps">ডাউনলোড</span> <span class="hps">মোডে প্রবেশ</span> <span class="hps">করার</span> <span class="hps">প্রয়োজন হয়</span></span>। (<span class="short_text" id="result_box" lang="bn"><span class="hps">টুল</span> <span class="alt-edited hps">ডাউনলোড</span> <span class="hps">শীঘ্রই আসছে।</span></span>)</p> + +<h2 id="রিকভারি_মোড"><span class="short_text" id="result_box" lang="bn"><span class="hps">রিকভারি</span> <span class="hps">মোড</span></span></h2> + +<p><span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">আপনার ফোন</span> <span class="hps">তথ্য</span> <span class="hps">মুছে ফেলা</span> <span class="hps">বা</span> <span class="alt-edited hps">ম্যানুয়ালি</span> <span class="hps">ফার্মওয়্যার</span> <span class="alt-edited hps">আপডেট করতে</span> <span class="alt-edited hps">রিকভারি</span> <span class="hps">মোডে</span> <span class="hps">প্রবেশ করতে পারেন।</span></span><span class="short_text" id="result_box" lang="bn"><span class="hps">এই মোডে</span> <span class="hps">প্রবেশ করার</span> <span class="hps">দুটি উপায় আছে</span></span>:</p> + +<ul> + <li>যদি <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> <span class="short_text" id="result_box" lang="bn"><span class="hps">টুলস পাওয়া যায়</span></span>, ফোনের <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Remote_debugging">Developer settings</a> এ <span class="short_text" id="result_box" lang="bn"><span class="hps">রিমোট</span> <span class="hps">ডিবাগিং চালু আছে কিনা <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">নিশ্চিত করুন</span></span></span></span>, <span id="result_box" lang="bn"><span class="hps">USB-এর মাধ্যমে</span> <span class="hps">আপনার কম্পিউটার</span> <span class="hps">থেকে আপনার ফোনে</span> <span class="alt-edited hps">সংযোগ স্থাপন</span></span> করুন এবং <span class="short_text" id="result_box" lang="bn"><span class="hps">কমান্ড</span> <span class="hps">লাইনে</span> </span> <code>adb reboot recovery</code> লিখুন।</li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার ফোন যদি বন্ধ থাকে</span></span>, <span class="short_text" id="result_box" lang="bn"><span class="hps">একসাথে</span> <span class="hps">ভলিউম</span></span> Up + Power <span class="short_text" id="result_box" lang="bn"><span class="hps">বাটন চাপুন।</span></span></li> +</ul> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">যখন</span> <span class="hps">রিকভারি</span> <span class="hps">মোডে</span></span>, <span class="short_text" id="result_box" lang="bn"><span class="hps">ভলিউম</span></span> up/down keys চাপুন <span id="result_box" lang="bn"><span class="alt-edited hps">সিলেকশন</span> <span class="hps">হাইলাইট সরাতে</span></span>, এবং <span id="result_box" lang="bn"><span class="hps">পাওয়ার</span> <span class="alt-edited hps">Key চাপুন <span id="result_box" lang="bn"><span class="hps">নির্বাচন করতে</span></span></span></span>। <span id="result_box" lang="bn"><span class="hps">নিশ্চিত করুন যে আপনি</span> <span class="hps">আপনার ফোন</span> <span class="hps">তথ্য</span> <span class="atn hps">(</span><span class="alt-edited">পরিচিতি</span><span>, এসএমএস</span><span>, ইত্যাদি)</span> <span class="hps">ডেটা</span> <span class="alt-edited hps">ক্লিয়ারিং</span> <span class="hps">এর আগে</span> <span class="alt-edited hps">ব্যাক আপ করা</span> <span class="hps">আছে</span></span>, এবং <span id="result_box" lang="bn"><span class="hps">আপডেট করার পূর্বে <span id="result_box" lang="bn"><span class="alt-edited hps">আপগ্রেডের</span> <span class="hps">প্যাকেজ <span id="result_box" lang="bn"><span class="hps">ডাউনলোড করা আছে।</span></span></span></span></span></span></p> + +<h2 id="RAM-র_সমন্বয়"><span class="short_text" id="result_box" lang="bn"><span class="hps">RAM-র</span> <span class="hps">সমন্বয়</span></span></h2> + +<p><span id="result_box" lang="bn"><span class="hps">আপনি</span></span> <span id="result_box" lang="bn"><span class="alt-edited hps">RAM</span> <span class="hps">ক্ষমতা </span></span><span id="result_box" lang="bn"><span class="alt-edited hps">সমন্বয় করতে পারেন </span></span><span style="display: none;"> </span>যাতে কম মেমরি ফুটপ্রিন্ট নিয়ে <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="hps">ফোনে </span></span><span id="result_box" lang="bn"><span class="hps">অ্যাপ্লিকেশান</span></span> কিভাবে কাজ করে দেখতে পারেন।</p> + +<p>এটি ফাস্টবুট মোডে <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">প্রবেশের</span> <span class="hps">মধ্য দিয়ে সম্পন্ন হয়</span></span> (প্রথমে ফাস্টবুট ইন্সটল করুন, যা <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> এর মত একই SDK <span class="short_text" id="result_box" lang="bn"><span class="hps">প্যাকে</span></span>জ এ পাওয়া যাবে) এবং লিখতে হবে:</p> + +<pre class="brush: bash">fastboot oem mem [0|256-1024]</pre> + +<p>“0” মেমরি <span class="short_text" id="result_box" lang="bn"><span class="hps">স্বয়ংক্রিয়ভাবে</span> <span class="hps">সনাক্ত হয়</span></span> এবং “256-1024” হল <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">মেগাবাইটের</span> <span class="hps">সংখ্যা</span></span>। <span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ</span></span>, যদি আপনি ডিভাইস RAM <span id="result_box" lang="bn"><span class="hps">ক্ষমতা</span></span> 512M এ সেট করতে চান, <code>fastboot oem mem 512</code> লিখুন।</p> + +<p><span id="result_box" lang="bn"><span class="hps">এর পরে</span> <span class="hps">সেটিংস</span> <span class="hps">কার্যকর</span> <span class="hps">করার</span> <span class="hps">জন্য আপনার</span> <span class="hps">ডিভাইসটি পুনরায় বুট</span> <span class="hps">করার প্রয়োজন হবে।</span></span><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">এটি</span> <span class="hps">ব্যবহার করা যায় :</span></span></p> + +<pre class="brush: bash">fastboot reboot</pre> + +<p><span id="result_box" lang="bn"><span class="hps">বর্তমান</span> <span class="hps">মেমরি</span> <span class="hps">আকার</span> <span class="hps">ব্রিক</span> <span class="hps">মোড</span> <span class="hps">লিখে</span> <span class="hps">এবং</span> <span class="hps">টাইপ করে</span> <span class="hps">ফিরে</span> <span class="hps">আসতে পারে</span></span>:</p> + +<pre class="brush: bash">fastboot getvar mem +</pre> + +<div id="cke_pastebin" style="position: absolute; top: 1615.83px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"><span id="result_box" lang="bn"><span class="alt-edited hps">RAM</span> <span class="hps">ক্ষমতা</span></span></div> 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 +--- +<div class="summary"> + <p><span class="seoSummary"><span style="line-height: 1.5;">Geeksphones হচ্ছে Telefonica এবং মোজিলার সঙ্গে যুক্ত মাদ্রিদ ভিত্তিক Geeksphone দ্বারা উৎপাদিত ডেভেলাপার প্রিভিউ ডিভাইস । এই সেট একজন ডেভেলাপারকে ফায়ারফক্স ওএসের একটা রিয়েল পরিবেশ দিবে যাতে মোবাইল নেটওয়ার্ক এবং accelerometer আর ক্যামেরার মত সত্যিকারের হার্ডওয়ার থাকবে । যা </span></span><a href="https://hacks.mozilla.org/2013/03/firefox-os-simulator-previewing-version-3-0/" style="line-height: 1.5;">Firefox OS Simulator</a> দেওয়া হত না । এইখানে এই ব্যাপারে আপনার যে কোন প্রশ্নের উত্তর দেওয়া হবে । <span style="line-height: 1.5;"> </span></p> +</div> +<p><span style="font-weight: bold; background-color: rgb(244, 247, 248);"> </span><span style="font-size: 30px; font-weight: bold; letter-spacing: -1px; line-height: 30px;">Pre-purchase questions</span></p> +<h4 id="ক্রয়_করার_পূর্বে_Geeksphone_সম্পর্কিত_আপনার_সকল_প্রশ্নের_উত্তর।"><span style="line-height: 1.5;">ক্রয় করার পূর্বে Geeksphone সম্পর্কিত আপনার সকল প্রশ্নের উত্তর।</span></h4> +<h3 id="sect1"> </h3> +<h3 id="কারা_Geeksphones_এর_প্রধান_audience">কারা Geeksphones এর প্রধান audience?</h3> +<p>প্রাথমিক অবস্থায় মোজিলা ডেভেলাপাররাই Geeksphones এর মেইন অডিয়েন্স । এইটি মূলত টেস্টিং আর কিছু এক্সপেরিমেন্টাল কাজের জন্য বানানো হয়েছে । তাই এইটাকে ফিক্স ডিভাইস বলা চলে না ।</p> +<h3 id="sect2"><span id="cke_bm_71C" style="display: none;"> </span></h3> +<p><span style="font-size: 1.7142857142857142rem; letter-spacing: -0.5px; line-height: 24px;">আমি কিভাবে Geeksphone ডিভাইস পেতে পারি ? আর এইটা কিনতে কত খরচ হতে পারে ? </span></p> +<p><span style="letter-spacing: -0.5px; line-height: 1.5;">আপনি চাইলেই </span><span style="letter-spacing: -0.5px; line-height: 1.5;"> </span><a href="http://shop.geeksphone.com/" style="letter-spacing: -0.5px; line-height: 1.5;" title="http://shop.geeksphone.com">Geeksphone online store</a><span style="font-size: 1.7142857142857142rem; letter-spacing: -0.5px; line-height: 24px;"> </span><span style="letter-spacing: -0.5px; line-height: 1.5;">এই সাইট থেকে সরাসরি কিনতে পারেন ।</span><span style="font-size: 1.7142857142857142rem; letter-spacing: -0.5px; line-height: 24px;"> </span><span style="letter-spacing: -0.5px; line-height: 1.5;"> মূল্যের তথ্য আপনি সাইটেই পাবেন ।তাছাড়া আপনার কাজের প্রচেষ্টার উপর নির্ভর করে মোজিলাও আপনার জন্য ডিভাইসটি available করে দিবে। </span></p> +<p><span style="font-size: 1.7142857142857142rem; letter-spacing: -0.5px; line-height: 24px;">Geeksphones কি সম্পূর্ণরূপে unlocked ?</span></p> +<p>উত্তরঃ হ্যাঁ। </p> +<h3 id="Geeksphones_এ_কি_যে_কোন_সিম_কার্ড_কাজ_করে">Geeksphones এ কি যে কোন সিম কার্ড কাজ করে ? </h3> +<p>উত্তর হ্যাঁ। </p> +<h3 id="কোন_দেশগুলোতে_Geeksphones_পাওয়া_যাবে">কোন দেশগুলোতে Geeksphones পাওয়া যাবে ? </h3> +<p>Geeksphone সব দেশে ship করা যাবে । তবে আপনাকে আপনার গন্তব্যস্থলের কাস্টমসের ক্লিয়ারেন্স মেনেজ করতে হবে তারপরে ও যদি কোন সমস্যা হয় আপনি আপনার লোকাল কাস্টমসর সাথে যোগাযোগ করতে পারেন । </p> +<h3 id="কি_ধরণের_Geeksphone_device_আমার_কিনা_উচিত">কি ধরণের Geeksphone device আমার কিনা উচিত ? </h3> +<p><span style="line-height: 1.5;">বর্তমানে Geeksphone এক ধরনের সেলই বিক্রি করছে যা Revolution নামে পরিচিত। এই ফোন এন্ড্রয়েড বিশিষ্ট হলে ও একে সহজে FirefoxOS এ ট্রান্সফর্ম করা যাবে । </span></p> +<p>Peak মোবাইলের KEON অপেক্ষা দ্রুত প্রসেসর,ভাল ক্যামেরা এবং high-DPI স্ক্রিন আছে ।তাই বেশিরভাগ ডেভেলাপার keon অপেক্ষা এই ডিভাইসেই বেশি স্বাচ্ছন্দ্যবোধ করে। তথাপি high-DPI ডিভাইসে সাপোর্ট নিয়ে এখনো কাজ করা হচ্ছে তাই এইখানে বিভিন্ন ধরণের visual glitches এবং বাগ থাকতে পারে। যদি আপনি এই সমস্যাটুকু মেনে নিতে পারেন তাহলে Peakই হতে পারে আপনার জন্য সঠিক ডিভাইস । এছাড়া ও এইটা আপনার জন্য ভাল ডিভাইস হতে পারে যদি আপনার আগ্রহ থাকে ফায়ারফক্স ওএসের ব্যাপারে বিশেষ করে high-DPI সমর্থিত কোন এপস বাস্তবায়নে অথবা আপনি একজন এপ ডেভেলাপার হতে পারেন যদি আপনার লক্ষ্যে high-end ডিভাইস পাবার ইচ্ছে থাকে যা ভবিষ্যতে শিপ করা হবে । <br> + </p> +<p><span style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Technical specifications</span></p> +<p><span style="line-height: 1.5;">Geeksphones এর ফিচার সম্পর্কে আরও জানতে নীচে দেখুন ।</span></p> +<h3 id="Revolution">Revolution</h3> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Component</th> + <th scope="col">Details</th> + </tr> + </thead> + <tbody> + <tr> + <td>CPU</td> + <td>Intel 1.6ghz dual-core</td> + </tr> + <tr> + <td>Telephone</td> + <td>HSPA/WCDMA: 2100/1900/900/850 MHz<br> + GSM/GPRS/EDGE: 850/900/1800/1900 MHz</td> + </tr> + <tr> + <td>Screen</td> + <td>4.7" IPS LCD Multi-touch (960×540)</td> + </tr> + <tr> + <td>Camera</td> + <td>8 mp /Flash LED, front 1.3mp</td> + </tr> + <tr> + <td>ROM capacity</td> + <td>4 GB</td> + </tr> + <tr> + <td>RAM capacity</td> + <td>1 GB</td> + </tr> + <tr> + <td>Connectivity</td> + <td>MicroSD<br> + MicroUSB<br> + WiFi 802.11 b/g/n<br> + Bluetooth 3.0<br> + GPS, AGPS</td> + </tr> + <tr> + <td>Sensors</td> + <td> + <p>Light/proximity sensor<br> + Accelerometer, compas</p> + </td> + </tr> + <tr> + <td>Battery</td> + <td>2000 mAh</td> + </tr> + </tbody> +</table> +<h3 id="sect3"> </h3> +<h3 id="Keon">Keon</h3> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Component</th> + <th scope="col">Details</th> + </tr> + </thead> + <tbody> + <tr> + <td>CPU</td> + <td>Qualcomm Snapdragon S1 7225AB (1GHz)</td> + </tr> + <tr> + <td>Telephone</td> + <td>UMTS 2100/1900/900 (3G HSPA)<br> + GSM 850/900/1800/1900 (2G EDGE)</td> + </tr> + <tr> + <td>Screen</td> + <td>3.5" HVGA Multi-touch (320x480 pixels)</td> + </tr> + <tr> + <td>Camera</td> + <td>3 megapixels</td> + </tr> + <tr> + <td>ROM capacity</td> + <td>4 GB</td> + </tr> + <tr> + <td>RAM capacity</td> + <td>512 MB</td> + </tr> + <tr> + <td>Connectivity</td> + <td>MicroSD<br> + MicroUSB<br> + WiFi 802.11N<br> + Bluetooth 2.1 EDR<br> + FM Radio<br> + GPS</td> + </tr> + <tr> + <td>Sensors</td> + <td>Ambient light sensor<br> + Proximity sensor<br> + Accelerometer</td> + </tr> + <tr> + <td>Battery</td> + <td>1580 mAh</td> + </tr> + </tbody> +</table> +<h3 id="Peak">Peak</h3> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Component</th> + <th scope="col">Details</th> + </tr> + <tr> + <td>CPU</td> + <td>Qualcomm Snapdragon S4 8225 (Dual-core 1.2Ghz)</td> + </tr> + <tr> + <td>Telephone</td> + <td>UMTS 2100/1900/900 (3G HSPA)<br> + GSM 850/900/1800/1900 (2G EDGE)</td> + </tr> + <tr> + <td>Screen</td> + <td>4.3" qHD IPS Multi-touch (<span class="st">960x540</span> pixels)</td> + </tr> + <tr> + <td>Camera</td> + <td>8 megapixels (back)<br> + 2 megapixels (front)<br> + Flash</td> + </tr> + <tr> + <td>ROM capacity</td> + <td>4 GB</td> + </tr> + <tr> + <td>RAM capacity</td> + <td>512 MB</td> + </tr> + <tr> + <td>Connectivity</td> + <td>MicroSD<br> + MicroUSB<br> + WiFi 802.11N<br> + Bluetooth 2.1 EDR<br> + FM Radio<br> + GPS</td> + </tr> + <tr> + <td>Sensors</td> + <td>Ambient light sensor<br> + Proximity sensor<br> + Accelerometer</td> + </tr> + <tr> + <td>Battery</td> + <td>1800 mAh</td> + </tr> + </tbody> +</table> +<h2 id="Geeksphones_এ_Firefox_OS">Geeksphones এ Firefox OS </h2> +<p><span style="line-height: 1.5;">এইখানে আপনি Geeksphone এ কিভাবে ফায়ারফক্স ওএস বিল্ড করতে হয় এবং কিভাবে তা ব্যবহার ও আপডেট করতে হয় এই সম্পর্কিত সকল প্রশ্নের উত্তর পাবেন ।</span></p> +<h3 id="আমি_কোথায়_Geeksphones_এর_জন্য_বিল্ড_খুঁজে_পাব">আমি কোথায় Geeksphones এর জন্য বিল্ড খুঁজে পাব?</h3> +<p><span style="line-height: 1.5;">আপনি Geeksphone ডিভাইসের জন্য সকল বিল্ড </span><span style="line-height: 1.5;"> </span><a href="http://downloads.geeksphone.com/" style="line-height: 1.5;" title="http://downloads.geeksphone.com/">Geeksphone website</a><span style="line-height: 1.5;"> এর সাইটে খুঁজে পাবেন । </span></p> +<h3 id="আমি_কোথায়_বিল্ড_ম্যানিফেস্ট_ফাইল_পাব">আমি কোথায় বিল্ড ম্যানিফেস্ট ফাইল পাব ?</h3> +<p>সকল Geeksphone এর জন্য ম্যানিফেস্ট ফাইল আপনি নীচের লিঙ্কে পেতে পারেন। <a href="http://www.geeksphone.com/manifests/" title="http://www.geeksphone.com/manifests/">http://www.geeksphone.com/manifests/</a>.</p> +<h3 id="আমি_কিভাবে_আমার_Geeksphone_এর_বিল্ড_ফ্ল্যাশ_করব">আমি কিভাবে আমার Geeksphone এর বিল্ড ফ্ল্যাশ করব ?</h3> +<p>Geeksphone আপনার ডিভাইস কিভাবে ফ্ল্যাশ করবেন তা নিয়ে কিছু নির্দেশনা দিয়ে রেখেছে। আপনি চাইলে নীচের লিঙ্কটি দেখতে পারেন. </p> +<p> http://downloads.geeksphone.com/drivers/Manual_flash_geeksphone-eng.txt</p> +<p>Geeksphone লিনাক্স আর উইন্ডোজের জন্য ও প্রয়োজনীয় বাইনারি অন্তর্ভূক্ত করেছে। যদি আপনি ম্যাক ব্যবহারকারী হন, তাহলে আপনাকে <span style="line-height: 1.5;"> </span><a href="http://developer.android.com/sdk/installing/index.html" style="line-height: 1.5;" title="http://developer.android.com/sdk/installing/index.html">Android SDK</a> এ ইনস্টল করতে হবে । যদি আপনি উইন্ডোজ ব্যবহারকারী হন, আপনাকে USB ড্রাইভার ইনস্টল করতে হবে। </p> +<p><span style="font-size: 1.7142857142857142rem; letter-spacing: -0.5px; line-height: 24px;">আমি আমার Geeksphone এর জন্য কিভাবে সহযোগিতা পেতে পারি?</span></p> +<p> <strong>hardware or build issues নিয়ে কোন প্রশ্ন থাকলে </strong> ভিজিট করুন <a href="http://forum.geeksphone.com/" title="http://forum.geeksphone.com/">Geeksphone forum</a>. আপনি চাইলে ইমেইল করতে পারেন এইখানে <a href="http://mailto:info@geeksphone.com" title="http://mailto:info@geeksphone.com">info@geeksphone.com</a> অথবা কল করুন (+34) 915 51 62 91। <br> + <br> + যদি কোন এপস বানাতে চান ফায়ারফক্স ওসের জন্য তাহলে MDN এর <a href="/en-US/docs/Mozilla/Firefox_OS/Apps" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Apps">Creating Apps for Firefox OS</a> এর আর্টিকেলটি দেখুন । পাশাপাশি ফ্যারফক্স মার্কেটপ্লেসের <a href="https://marketplace.firefox.com/developers/" title="https://marketplace.firefox.com/developers/">Developer Hub</a> সাথে ও কথা বলুন। <br> + <br> + যদি ফায়ারফক্স ওএস নিয়ে কোন প্রশ্ন থাকে তাহলে ভিজিট <a href="https://support.mozilla.org/en-US/products/firefox-os" title="https://support.mozilla.org/en-US/products/firefox-os">SUMO</a>.</p> +<p><span style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">See also</span></p> +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a></li> + <li><a href="/en-US/docs/Web/Apps" title="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks">App Center</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Introduction" title="/en-US/docs/Mozilla/Firefox_OS/Introduction">Introduction to Firefox OS</a></li> +</ul> 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 +--- +<div class="summary"> +<p><span class="seoSummary">Developer Preview editions of the Firefox OS phone are now becoming widely available to the community, mainly through <a href="http://www.geeksphone.com/">Geeksphone</a>. 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.</span></p> +</div> + +<div class="note"> +<p><strong>Note</strong>: that these instructions are for the older Keon and Peak, not necessarily the latest Geeksphone Revolution phone.</p> +</div> + +<h2 id="আপনার_গিকসফোনটি_সর্বশেষ_ইমেজ-এ_আপডেট_করুন">আপনার গিকসফোনটি সর্বশেষ ইমেজ-এ আপডেট করুন </h2> + +<p>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.</p> + +<p><img alt="The screen for checking updates on the Firefox OS settings app" src="https://mdn.mozillademos.org/files/6051/checkupate.png" style="display: block; height: 478px; margin: 0px auto; width: 318px;"></p> + +<h2 id="আপনার_ফোনটি_ফ্লাশ_করুন">আপনার ফোনটি ফ্লাশ করুন </h2> + +<p>The team at Geeksphone is also now providing the latest stable and nightly builds as self contained downloads for flashing your phone.</p> + +<h3 id="আপনার_মোবাইল_এবং_কম্পিউটারটি_সেটআপ_করুন">আপনার মোবাইল এবং কম্পিউটারটি সেটআপ করুন</h3> + +<p><span style="line-height: 1.572;">Before trying to flash your phone make sure you have set it up as described in the section “Setting Up the Geeksphone Device” in </span><a href="https://hacks.mozilla.org/2013/05/pushing-firefox-os-apps-to-the-geeksphone/" style="line-height: 1.572;">Pushing Firefox OS Apps to the Geeksphone</a><span style="line-height: 1.572;">. 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.</span></p> + +<div class="note"> +<p><strong>Note:</strong> It is particularly important that Windows computers be set up with the right USB drivers.</p> +</div> + +<p>The builds are located at the <a href="http://downloads.geeksphone.com/">Geeksphone download site</a>. On this site you will be presented with options for selecting your device and what type of build you want to use.</p> + +<p><img alt="Two phone images side by side, the Geeksphone Keon and Peak, with different software download options below each one." src="https://mdn.mozillademos.org/files/6055/geeksphone-download.png" style="display: block; height: 486px; margin: 0px auto; width: 530px;"></p> + +<p>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 <code>Device information -> More information -> Developer</code> tab. Also do not attempt to flash the phone if the power level is below 50%.</p> + +<p><img alt="Enabling remote debugging on the Firefox OS Settings app" src="https://mdn.mozillademos.org/files/6049/remote-debugging.png" style="display: block; height: 480px; margin: 0px auto; width: 320px;"></p> + +<h3 id="Windows">Windows</h3> + +<div class="note"> +<p><strong>Note:</strong> You might need to install USB drivers on Windows. For instructions, see <span style="line-height: 1.572;">the section “Setting Up the Geeksphone Device” in </span><a href="https://hacks.mozilla.org/2013/05/pushing-firefox-os-apps-to-the-geeksphone/" style="line-height: 1.572;">Pushing Firefox OS Apps to the Geeksphone</a><span style="line-height: 1.572;">.</span></p> +</div> + +<p>Open a Command Prompt (<code>start -> type cmd in search -> enter</code> on Windows 7, <code>Windows key + X -> select Command Prompt</code> on Windows 8) and cd to the directory containing the extracted files. Run:</p> + +<pre class="brush: bash" lang="bash">flash.bat +</pre> + +<h3 id="Mac_OS">Mac OS</h3> + +<p>Open a Terminal (<code>Cmd + space -> type terminal -> enter</code>) window and cd to the directory containing the extracted files. Run:</p> + +<pre class="brush: bash" lang="bash">./flash_mac.sh +</pre> + +<h3 id="লিনাক্স">লিনাক্স</h3> + +<p>To flash a Keon from Ubuntu add the following rules to /etc/udev/rules.d/51-android.rules</p> + +<div>SUBSYSTEM=="usb", ATTR{idVendor}=="05c6", ATTR{idProduct}=="8013", MODE="0666"</div> + +<div>SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", ATTR{idProduct}=="d00d", MODE="0666"</div> + +<div> </div> + +<p>Open a Terminal (control-alt-t on Ubuntu) window and cd to the directory containing the extracted files. Run:</p> + +<pre class="brush: bash" lang="bash">./flash.sh +</pre> + +<p>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 <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">Backup the phone system partition</a>.</p> + +<h2 id="If_you_have_an_'unagi'_or_developer_preview_phone_that_is_not_a_Geeksphone">If you have an 'unagi' or developer preview phone that is not a Geeksphone</h2> + +<p>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.</p> + +<p>You will need to install <strong>adb</strong> and <strong>fastboot</strong>. These utilities can be found in the Android Developer Toolkit.</p> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Tweaking_Gaia">Tweaking Gaia</h2> + +<p>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.</p> + +<p>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 <a href="https://help.github.com/articles/set-up-git">setup guide</a>. Finally make sure your phone is set up for remote debugging as described in the previous section.</p> + +<p>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:</p> + +<pre class="brush: bash" lang="bash">git clone git://github.com/mozilla-b2g/gaia.git gaia +cd gaia +</pre> + +<p>This will clone the current Gaia code to your system.</p> + +<div class="warning"> +<p>If you plan on submitting changes back to the Gaia source, be sure to fork the source before cloning as described in <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking">Hacking Gaia</a>.</p> +</div> + +<p>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:</p> + +<pre class="brush: bash" lang="bash">git checkout -b v1.0.1 origin/v1.0.1 +</pre> + +<p>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:</p> + +<pre class="brush: bash">adb remount</pre> + +<p>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:</p> + +<pre class="brush: bash" lang="bash">B2G_SYSTEM_APPS=1 make install-gaia +</pre> + +<p>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:</p> + +<pre class="brush: bash" lang="bash">APP=calendar B2G_SYSTEM_APPS=1 make install-gaia +</pre> + +<p>If you have issues while making the changes, you can reset the phone to default values using either of the following commands:</p> + +<pre class="brush: bash" lang="bash">make production +make reset-gaia +</pre> + +<div class="note"> +<p><strong>Note</strong>: 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 <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">Backup the phone system partition</a>.</p> +</div> + +<h2 id="Ok_I_bricked_my_phone">"Ok, I bricked my phone"</h2> + +<p>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 <code>fastboot</code> and <code>adb</code> in the command line if you are not sure).</p> + +<ol> + <li>Remove the USB cable and then remove the battery from the phone for 30 seconds.</li> + <li>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.</li> + <li>Reconnect the USB cable</li> + <li>Type in the command run adb reboot bootloader.</li> + <li>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:</li> +</ol> + +<pre class="brush: bash" lang="bash">fastboot flash recovery recovery.img +fastboot flash boot boot.img +fastboot flash userdata userdata.img +fastboot flash system system.img +fastboot reboot +</pre> + +<p>This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.</p> + +<h2 id="Go_play!">Go play!</h2> + +<p>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.</p> + +<h2 id="আরও_দেখুন">আরও দেখুন</h2> + +<ul> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Geeksphone/Geeksphone_FAQ">Geeksphone FAQ</a></li> + <li><a href="/en-US/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></li> +</ul> 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 +--- +<p>আপনি যদি মোজিলা থেকে ফায়ারফক্স OS চালিত একটি ডেভেলপার ফোন পেয়ে থাকেন অথবা কেউ যদি আপনার ডিভাইসে ফায়ারফক্স OS ইন্সটল করে দিয়ে থাকে, তবে এখানে আপনার ফোনে জন্য একটি<a href="https://wiki.mozilla.org/B2G/DeveloperPhone" class="link-https" title="https://wiki.mozilla.org/B2G/DeveloperPhone"> সাধারণ কাজ করার নির্দেশনামূলক আর্টিকেল</a> পাবেন। আমরা এই বিষয়ের ওপর কাজ করছি এবং সহজে উপস্থাপনের জন্য আপ্রাণ চেষ্টা চলছে, আশা করা হচ্ছে শীঘ্রই মোজিলা ডেভেলপার নেটওয়ার্কে এ সংক্রান্ত অনেকগুলো আর্টিকেল প্রকাশিত হবে। আপনি যদি ফায়ারফক্স ওএস বিল্ড/ফ্ল্যাশ করার প্রক্রিয়া নিয়ে জানতে ইচ্ছুক হন, তবে <a href="/bn-BD/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="/bn-BD/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">'ফায়ারফক্স OS বিল্ড ও ইন্সটল করা'</a> শীর্ষক আর্টিকেলটি দেখতে পারেন।</p> 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 +--- +<div class="summary"> + <p><span class="seoSummary">Symphony GoFox F15 হচ্ছে একটি Firefox OS দ্বারা চালিত ফোন যা Symphony অফার করছে। এতে রয়েছে একক-কোর বিশিষ্ট ১ গিগাহার্টজ প্রসেসর (স্প্রেডট্রাম), ৫১২ মেগাবাইট র্যাম, একটি ৩.২ মেগাপিক্সেল পেছন ক্যামেরা এর সাথে রয়েছে একটি ০.৩ মেগাপিক্সেল সম্মুখ ক্যামেরা এবং ৩.৫ ইঞ্চি HVGA বিশিষ্ট পর্দা, এবং এতে Firefox OS 1.4 স্থাপিত হয়েছে। এই নিবন্ধে এটি সম্পর্কিত তথ্য রয়েছে, যাতে রয়েছে এটির হালনাগাদ করন এবং সমস্যা সমাধান সম্পর্কিত বিস্তারিত।</span></p> +</div> +<p>সিম্ফোনী এবং গ্রামীণফোন (টেলিনর) এর অংশীদারিত্বে বাংলাদেশে প্রকাশিত Symphony GoFox F15 ফোনটি ফায়ারফক্স ওএস ১.৪ চালিত গ্রাহক পর্যায়ে সর্বপ্রথম বাণিজ্যিক ডিভাইস, এই ডিভাইসটিতে ৩জি ভিডিও কলিং সক্ষমতা রয়েছে, যা এটিতে অন্য সব ফায়ারফক্স ডিভাইস থেকে আলাদা করেছে।</p> +<h2 id="ফোনের_ফিচারগুলো">ফোনের ফিচারগুলো</h2> +<p><a href="/en-US/Firefox_OS/Developer_phone_guide/Phone_specs">Phone and device specs</a> দেখুন।</p> +<h2 id="সাধারন_সমস্যা_এবং_সচরাচর_জিজ্ঞাসিত_প্রশ্ন">সাধারন সমস্যা এবং সচরাচর জিজ্ঞাসিত প্রশ্ন</h2> +<h2 id="আমার_GoFox_F15_এ_WowBox_খুঁজে_পাচ্ছিনা."><span style="font-size: 14px; line-height: 1.5;">আমার GoFox F15 এ WowBox খুঁজে পাচ্ছিনা.</span></h2> +<dl> + <dd> + WowBox হচ্ছে গ্রামীণফোন (টেলিনর) এর একটি অ্যাপ এবং এজন্য এটি ব্যবহার করতে আপনার একটি জিপি সিম ব্যবহার করতে হবে। এর মানে হচ্ছে WowBox এর মত অসাধারন ফিচার উপভোগ করতে হলে আপনার GoFox F15 ডিভাইসে অবশ্যই একটি সক্রিয় জিপি সিম ব্যবহার করতে হবে।</dd> + <dt> + আমি MDN এ অন্যান্য কিছু ফায়ারফক্স ওএস ডিভাইসে হার্ড রিসেট দেখেছি এবং আমার ডিভাইসটিও হার্ড রিসেট করতে চাই.</dt> + <dd> + দুর্ভাগ্রক্রমে, GoFox F15 এর জন্য কোনো হার্ড রিসেট সুবিধা নেই। কিন্তু আপনি এখনও আপনার ডিভাইস রিসেট করতে পারবেন সেটিংস (SETTINGS) অপশন থেকে এবং এডিবি ব্যবহার করে লিনাক্স/ম্যাক থেকে ডিবাগ করতে পারবেন।</dd> + <dt> + আমি আমার GoFox F15 এ স্ক্রিন রিডার চালু করেছি। এবং আমার টাচ্ আগের মত কাজ করছে না।</dt> + <dd> + আপনি বিভিন্ন ভাবে এটাকে সাধারন করতে পারেন। একটি হচ্ছে ভলিউম চাবি ব্যবহার করে, আরেকটি হচ্ছে ম্যানুয়াল, অন্যটি হচ্ছে gesture ব্যবহার করে যেটা অন্ধ লোকেদের জন্য এবং এছাড়াও আপনি এডিবি দ্বারা ডিবাগিং করতে পারেন। উভয়ই নিছে বর্ণনা করা হল।</dd> +</dl> +<h2 id="ভলিউম_চাবি_দ্বারা_স্ক্রিন_রিডার_বন্ধ_করুন">ভলিউম চাবি দ্বারা স্ক্রিন রিডার বন্ধ করুন</h2> +<p>ভলিউম আপ প্রেস করুন, তারপর ডাউন প্রেস করুন, এভাবে তিনবার করুন (আপ, ডাউন, আপ, ডাউন, আপ, ডাউন)। স্ক্রিন রিডার আপনাকে এট পুনরায় করতে বলবে (ভলিউম আপ, ডাউন, আপ, ডাউন, আপ, ডাউন) এটি চালু করতে যদি এটি চালু না থাকে, অথবা বন্ধ করার জন্য এটি জিজ্ঞাসা করবে যদি এটি চালু থাকে। যদি আপনি বর্তমান অবস্থার কোনো পরিবর্তন করতে না চান তবে শুধু কিছু না করে এড়িয়ে যান।</p> +<h2 id="ম্যানুয়ালি_স্ক্রিন_রিডার_বন্ধ_করুন">ম্যানুয়ালি স্ক্রিন রিডার বন্ধ করুন</h2> +<p>আপনাকে প্রথমে কিছু বেসিক জেস্টার পদ্ধতি জানতে হবে। এগুলোকে অন্ধ লোকেদের জন্য ব্যবহৃত জেস্টার নামে আখ্যা দেয়া হয়েছে।</p> +<ul> + <li><strong>Long Tap</strong> : To select any app or object on the content view area, use Long Tap. Long Tap means, tapping for a while till the object gets selected.</li> + <li><strong>Double Tap</strong> : To activate or enter into the selected option, app or object use Double Tap.</li> + <li><strong>Swipe Left</strong> : To change the position of the current selection from right to left use Swipe Left.</li> + <li><strong>Swipe Right</strong> : To change the position of the current selection from left to right use Swipe Right.</li> + <li><strong>Two Fingers Swipe</strong> : To swipe use Two Fingers Swipe. The direction will be your desired direction. This is used to scroll any direction or flip the horizontal screen. You have to do it very carefully by must keeping a finger on the current selected object and the other finger should be at anywhere else but in <span>parallel</span> to the first finger. Have a clear look at the video below:</li> +</ul> +<p><img alt="" src="https://mdn.mozillademos.org/files/8779/swipe.gif"></p> +<p>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:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/8781/mozbd1.jpg"></p> +<p>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.</p> +<p>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.</p> +<p> <img alt="" src="https://mdn.mozillademos.org/files/8785/mozbd2.jpg"></p> +<p>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.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/8787/mozbd3.jpg"></p> +<p>Now, stop Screen Reader by selecting and entering serially like below.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/8789/mozbd4.jpg"> </p> +<p> </p> +<h2 id="Debugging_on_Linux_Mac">Debugging on Linux / Mac</h2> +<p>Open up a Terminal, and issue the following commands.</p> +<pre>mkdir ~/.android +<span class="_5yl5"><span class="null">echo "0x1782" > ~/.android/adb_usb.ini</span></span></pre> +<p>Then restart adb server.</p> +<pre>adb stop-server && adb start-server +</pre> +<p>Linux users need to add an extra udev rule by issuing the following command as root. (Not requierd by non-Linux users)</p> +<pre>echo 'SUBSYSTEM=="usb", ATTRS{idVendor}=="1782", MODE="0666"' > /etc/udev/rules.d/51-android.rules</pre> +<h2 id="Related_Links">Related Links</h2> +<ul> + <li><a href="/en-US/Firefox_OS/Debugging/Developer_settings#Screen_reader">Screen Reader</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a></li> +</ul> 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 +--- +<div class="summary"> + <p>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.</p> +</div> +<div class="note"> + <p><strong>Note</strong>: The instructions are <strong>not</strong> valid for the ZTE Open C device. If you have a ZTE Open C device you should go to our <a href="/en-US/Firefox_OS/Developer_phone_guide/ZTE_OPEN_C">ZTE Open C</a> page instead.</p> +</div> +<h2 id="Purchasing_a_device">Purchasing a device</h2> +<p>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.</p> +<ul> + <li><a href="http://stores.ebay.com/ztemobileuk">Buy from UK eBay store</a></li> + <li><a href="http://stores.ebay.com/ztemobileus">Buy from US eBay store</a></li> + <li><a href="http://www.ebay.com/itm/331031989534">Buy from Hong Kong page</a></li> +</ul> +<h2 id="Upgrading_Firefox_OS">Upgrading Firefox OS</h2> +<p>This section provides instructions for upgrading Firefox OS on your ZTE OPEN device.</p> +<h3 id="General">General</h3> +<p>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 <a href="http://developer.android.com/sdk/index.html" title="Android Developer Tookit">Android Developer Toolkit</a> on your desktop machine. It is not necessary to install the entire toolkit. adb and fastboot are found in the <code>/platform-tools/</code> folder.</p> +<p>Next, you need to go to your phone and <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Remote_debugging">enable remote debugging</a>.</p> +<h3 id="Firefox_OS_1.1">Firefox OS 1.1</h3> +<p>On 10th December 2013: ZTE released a Firefox OS 1.1 upgrade for the ZTE OPEN. <strong>This now has fastboot enabled</strong>, which was caused the problems with the previous published builds.</p> +<p>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 (<a href="http://www.ztedevices.com/support/smart_phone/b5a2981a-1714-4ac7-89e1-630e93e220f8.html">OPEN (American Standard)</a> or <a href="http://www.ztedevices.com/support/smart_phone/cba40ed6-d3ab-44c0-bdee-3a15803dc187.html">OPEN (European Standard)</a>) and unzip it to get a PDF of instructions plus a firmware ZIP.</p> +<div class="note"> + <p><strong>Note</strong>: User data will be wiped by the SD package installation. You should <a href="https://developer.mozilla.org/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">backup your data</a> before starting.</p> +</div> +<p>Now follow these steps:</p> +<ol> + <li>Power off your phone, remove the battery to access the microSD card and extract the card from its holder.</li> + <li>Connect the microSD card to your desktop machine.</li> + <li>Move <strong>US_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip</strong> or <strong>EU_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip</strong> (depending on the version you downloaded) to the root directory of your microSD card. Do NOT unzip the file.</li> + <li>Disconnect the microSD card from your desktop computer and return it to your phone.</li> + <li>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.)</li> + <li>Use the volume up/down key to move from one item to the other in the menu, and choose “<strong>apply update from external storage</strong>.”</li> + <li>Press the power key to confirm the selection. You’ll see a new screen listing the files you have on the microSD card.</li> + <li>Again use volume up/down key to select the firmware: either <strong>US_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip</strong> or <strong>EU_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip</strong> (depending on the version you downloaded), and press the power key to confirm.</li> +</ol> +<p>If everything went well, you’ll see a sequence of status messages, culminating with one that says, <em>“<strong>Install from sdcard complete</strong>.”</em>. 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.</p> +<h3 id="Firefox_OS_1.2">Firefox OS 1.2</h3> +<p>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.</p> +<p>With 1.1 installed as described above, open a terminal and check that the connection is made with the following command:</p> +<pre class="brush: bash">adb devices -l +</pre> +<p>You should see your device as something like, "roamer2 device usb:2-1.2", in response.</p> +<p>Download the appropriate version of the build from the Dropbox account ZTE has set up: <a href="https://www.dropbox.com/sh/rnj3rja7gd54s98/32KXfFmedN/P752D04_DEV_US_20131212_v1.2.7z" title="Firefox OS 1.2 build for ZTE Open US">US version</a> or <a href="https://www.dropbox.com/sh/rnj3rja7gd54s98/_twgXEkMFH/P752D04_DEV_EU_20131212_v1.2.7z" title="Firefox OS 1.2 build for ZTE Open UK">UK version</a>. For Windows users, you can also <a href="https://www.dropbox.com/sh/rnj3rja7gd54s98/6ZoJwmlRjn/Installation%20Instruction.docx" title="Special upgrade instructions for Windows users">download special instructions</a>, and <a href="https://www.dropbox.com/sh/rnj3rja7gd54s98/-fyi2XHFPG/upgrade_tool" title="Upgrade tool">an upgrade tool</a> to help you to install the new version easily. The steps below however will work on <strong>all operating systems</strong> – Linux, OS X, and Windows – without relying on the special tool.</p> +<p>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 (<a href="https://developer.mozilla.org/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">backup</a>) first. Then navigate to the folder where the files are. Still in the console, type this command:</p> +<pre class="brush: bash">adb reboot bootloader</pre> +<p>While the phone is rebooting, execute the following command. (Fastboot only works inside a reboot):</p> +<pre class="brush: bash">sudo fastboot devices +</pre> +<p>If you see, "< waiting for device >", hit Ctrl-C and retry the command until you see something like, "ROAMER2 fastboot", in response.</p> +<p>Then, quickly execute the following commands while it is still rebooting:</p> +<pre class="brush: bash">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</pre> +<p>(The reboot completed before I was done entering all the commands as I was distracted. I simply restarted from the, "adb reboot bootloader".)</p> +<p>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.</p> +<div class="note"> + <p><strong>Note</strong>: <a href="https://hacks.mozilla.org/2014/01/upgrading-your-zte-open-to-firefox-1-1-or-1-2-fastboot-enabled/">Upgrading your ZTE Open to Firefox 1.1 or 1.2 (fastboot enabled)</a> by <span class="url">Frédéric Harper</span> also provides a useful breakdown of the install process.</p> +</div> +<div class="note"> + <p><strong>Note</strong>: 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 <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB installed</a> and <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Debugging_via_USB">remote debugging</a> turned on, then run the following commands in your terminal:<br> + <br> + <code>git clone -b v1.2 <a href="https://github.com/mozilla-b2g/gaia.git" rel="nofollow">https://github.com/mozilla-b2g/gaia.git</a> gaia_v1.2<br> + cd gaia_v1.2<br> + make reset-gaia</code></p> +</div> +<h3 id="Firefox_OS_1.3_and_beyond">Firefox OS 1.3 and beyond</h3> +<p>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 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">build and install a new Firefox OS/B2G</a> build on it (start at the <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">build prerequisite</a> 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.</p> +<h2 id="Phone_features">Phone features</h2> +<ul> + <li>CPU Qualcomm MSM7225A 1.0Ghz</li> + <li>UMTS 850/1900 or UMTS900/2100</li> + <li>GSM 850/900/1800/1900 (2G EDGE)</li> + <li>Screen 3.5" HVGA</li> + <li>Camera 2 MP (back)</li> + <li>256 MB (RAM)</li> + <li>MicroSD (support up to 32GB)</li> + <li>Battery 1200 mAh</li> + <li>Wifi b, g, n, Bluetooth 2.1 EDR</li> + <li>Light & Prox. Sensor, G-Sensor</li> + <li>Radio FM, GPS</li> + <li>MicroUSB</li> +</ul> +<div class="note"> + <p><strong>Note</strong>: 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.)</p> +</div> +<h2 id="Wireless_carriers">Wireless carriers</h2> +<div class="warning"> + <p>Pricing information is for reference only and may not be accurate. Visit the associated link for official information.</p> +</div> +<h3 id="US_carriers">US carriers</h3> +<h4 id="ATT">AT&T</h4> +<ul> + <li><a href="http://www.att.com/shop/wireless.html">Website</a></li> + <li>Nationwide coverage for 2G EDGE and 3G</li> +</ul> +<h5 id="Sampling_of_prepaid_ATT_plans">Sampling of prepaid AT&T plans</h5> +<p><a href="http://www.att.com/shop/wireless/gophone.html">Prepaid GoPhone®</a>, Smartphone Plans</p> +<ul> + <li>$25/month, $5/50MB 3G data</li> + <li>$60/month with 2GB data, $10/GB additional 3G data</li> +</ul> +<h4 id="Aio">Aio</h4> +<ul> + <li><a href="http://www.aiowireless.com/home.html">Website</a></li> + <li>{{ anch("AT&T") }}'s own MVNO</li> +</ul> +<h5 id="Sampling_of_prepaid_Aio_plans">Sampling of prepaid Aio plans</h5> +<ul> + <li>Aio Smart - $55/month with 2GB 3G data, $10/GB additional 3G data</li> + <li>Aio Pro - $70/month with 7GB 3G data, $10/GB additional 3G data</li> +</ul> +<h4 id="Good2GO">Good2GO</h4> +<ul> + <li><a href="https://us.good2gomobile.com/">Website</a></li> + <li>{{ anch("AT&T") }} MVNO</li> +</ul> +<h5 id="Sampling_of_prepaid_Good2GO_plans">Sampling of prepaid Good2GO plans</h5> +<ul> + <li>$50/month with 1GB 3G data, $20/GB additional 3G data</li> +</ul> +<h4 id="Other_anch(ATT)_MVNOs">Other {{ anch("AT&T") }} MVNOs</h4> +<p>These carriers do not offer additional 3G data.</p> +<ul> + <li><a href="http://goredpocket.com/">RedPocket</a></li> + <li><a href="http://www.net10wireless.com/">Net10</a></li> + <li><a href="http://www.straighttalk.com/">Straight Talk</a></li> + <li><a href="https://www.airvoicewireless.com/">Airvoice</a></li> +</ul> +<h4 id="T-Mobile">T-Mobile</h4> +<ul> + <li><a href="http://www.t-mobile.com/">Website</a></li> + <li>Nationwide coverage for 2G EDGE, limited metropolitan coverage for 3G</li> +</ul> +<h3 id="Canadian_carriers">Canadian carriers</h3> +<p>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.</p> +<p>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.</p> +<h2 id="Memory_card">Memory card</h2> +<h3 id="File_system">File system</h3> +<p>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.</p> +<h2 id="Device_revisions">Device revisions</h2> +<h3 id="Revision_01">Revision 01</h3> +<p>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:</p> +<ul> + <li><a href="http://www.ztedevices.com/support/smart_phone/b5a2981a-1714-4ac7-89e1-630e93e220f8.html">Phones purchased at ZTE eBay US/Hong Kong store</a></li> + <li><a href="http://www.ztedevices.com/support/smart_phone/cba40ed6-d3ab-44c0-bdee-3a15803dc187.html">Phones purchased at ZTE eBay UK store</a></li> +</ul> +<p>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.</p> +<p>Related Support Forum Questions:</p> +<ul> + <li><a href="https://support.mozilla.org/en-US/questions/971252">ZTE Open update crashes</a></li> + <li><a href="https://support.mozilla.org/en-US/questions/967817">Why is my ZTE Open unable to update Firefox OS?</a></li> + <li><a href="https://support.mozilla.org/en-US/questions/976414?page=3">How can I unbrick ZTE Open with adb debug Disabled?</a></li> +</ul> +<h3 id="Revision_02">Revision 02</h3> +<p>Phones produced on or after 09/27/2013 are fastboot enabled by default. <strong>This includes the Hong Kong phones.</strong></p> +<div class="note"> + <p><strong>Note</strong>: If you are unsure of your phone's revision, check it in <strong>Settings > Device Information > Software</strong>. If it is older than the following version numbers, you will need to update your phone using the above SD packages to enable fastboot.</p> + <ul> + <li>Phones from UK store：OPEN_EU_DEV_FFOS_V1.0.0B02</li> + <li>Phones from US store：OPEN_US_DEV_FFOS_V1.0.0B02 <em>(Some phones may display this version incorrectly, see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916098#c39">bug 916098</a>.)</em></li> + </ul> +</div> +<h2 id="Device_support">Device support</h2> +<p>Once your phone has {{ anch("Device revisions","fastboot enabled") }}, you will then be able to <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">build and install new Firefox OS/B2G</a> builds on it (start at the <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">build prerequisite</a> 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.</p> +<p>If you encounter errors about setting the system time while flashing a custom build, you may need to download a <a href="http://sl.edujose.org/2013/10/adapted-boot-image-for-use-with-b2g.html">modified boot image</a>.</p> +<h3 id="I_bricked_my_phone">I bricked my phone</h3> +<p>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.</p> +<p>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):</p> +<pre class="brush: bash" lang="bash">fastboot flash recovery recovery.img +fastboot flash boot boot.img +fastboot flash userdata userdata.img +fastboot flash system system.img +fastboot reboot +</pre> +<p>This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.</p> +<h3 id="Headphones_not_working">Headphones not working?</h3> +<p>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") }}.</p> +<h3 id="Other_support_notes">Other support notes</h3> +<p>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.</p> +<p>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.</p> +<h2 id="See_also">See also</h2> +<p><a href="https://marketplace.firefox.com/developers/dev_phone">Official Dev Phone page on Firefox Marketplace</a></p> +<p><a href="http://www.movistar.co/documentos/manualesProductos/ZTE_Mozilla_Open_P752-Manual_de_Usuario.pdf">Draft User Manual [en-US]</a> - PDF</p> 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 +--- +<p>আপনি যদি কোন অ্যাপ্লিকেশন ফায়ারফক্স ওএস এর জন্য তৈরি অথবা বিতরন করতে চান তাহলে আপনার অ্যাপ্লিকেশন এর অভ্যন্তরীণ কার্যকলাপগুলো কিভাবে শুরু এবং পরিচালনা হয় এগুলো না বুঝলে ও চলবে। এছাড়াও, এই তথ্য ফায়ারফক্স ওএস প্লাটফর্ম ডেভেলপার, পাশাপাশি নতুন নতুন হার্ডওয়্যার অপারেটিং সিস্টেম পোর্ট এর দলের জন্য উপযোগী হতে পারে।</p> +<h2 id="অ্যাপ_আরাম্ভ_প্রক্রিয়া">অ্যাপ আরাম্ভ প্রক্রিয়া</h2> +<p>যখন কোন ব্যবহারকারী একটি অ্যাপ্লিকেশন আরাম্ভ করতে নির্বাচন করেন, অথবা একটি অ্যাপ্লিকেশন অন্যথায় চালু করা প্রয়োজন হলে, হোম স্ক্রীন অ্যাপ গুলো {{domxref("App")}} API এর রেফারেন্স এ {{domxref("App.launch()")}} মেথড কে কল করে অ্যাপ টি চালু করার জন্য।</p> +<p>Gecko অনুরোধটি পায় এবং {{event("mozChromeEvent")}} কে অ্যাপ্লিকেশন এর বিস্তারিত সহ সিস্টেম অ্যাপ্লিকেশন এ পাঠায়। সিস্টেম অ্যাপ্লিকেশন একটি নতুন {{HTMLElement("iframe")}} কে DOM tree তে সন্নিবেশ করে একে পরিচালনা করে এবং অ্যাপটিকে নতুন {{HTMLElement("iframe")}} এ পরিবেশন করে। ফ্রেমটি অ্যাপ এর হোম হিসেবে কাজ করে যতক্ষণ একে বন্ধ করা না হয়।</p> +<p>প্রত্যেক অ্যাপ এর একটি manifest থাকে যা অ্যাপ টিকে বর্ণনা করে এবং অ্যাপ্লিকেশন এর প্যাকেজের মধ্যে একটি নির্দিষ্ট ফাইল অনুক্রমে আছে.। বিস্তারিত জানতে এই<span style="line-height: 1.5;"> অনুছেদ দেখুন </span><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/App_Manifest" style="line-height: 1.5; text-decoration: underline;">App manifest</a>.</p> +<div> + </div> +<h2 id="Gecko_এর_সাথে_যোগাযোগ">Gecko এর সাথে যোগাযোগ</h2> +<p> Gecko এবং Gaia's System অ্যাপ এর মধ্যে যোগাযোগ টা {{event("mozChromeEvent")}} এবং {{event("mozContentEvent")}} এর মাধ্যমে করা হয়। mozChromeEvents এ ক্রোম থেকে কন্টেন্ট এ সম্প্রচার করা হয় এবং mozContentEvents এ কন্টেন্ট থেকে ক্রোম এ সম্প্রচার করা হয়।এই যোগাযোগ বিশ্বস্ত UI তে নির্মাণ ও বন্ধ নিয়ন্ত্রণ ও বিজ্ঞপ্তি এবং একটি অ্যাপ্লিকেশন আরম্ভ করার জন্য সিস্টেম অ্যাপ্লিকেশন শুরু করতে বলা সহ অন্যান্য কাজের জন্য প্রয়োজনীয় ফাংশন উদ্বুদ্ধ করতে ব্যবহৃত হয়।</p> +<p> </p> +<div class="note"> + <p><strong style="line-height: 1.5em;">মন্তব্য</strong><span style="line-height: 1.5em;"> : যদিও </span>এটা সিস্টেম অ্যাপ্লিকেশন এবং এর জন্য অন্তর্নিহিত সমর্থন কোড নিয়ে প্রাথমিকভাবে কাজ করতে আগ্রহী কারো জন্য তাই এই সম্পর্কে ডকুমেন্টেশন উন্নতি প্রয়োজন। এখন, আপনি <span style="line-height: 1.5em;">{{source("b2g/chrome/content/shell.js")}} থেকে এটা কিভাবে ব্যবহার করা হয়েছে এই সম্পর্কে তথ্য যোগার করতে পারেন।</span><span style="line-height: 1.5em;"> </span></p> +</div> +<h2 id="আরও_আছে">আরও আছে</h2> +<ul> + <li><a href="/en-US/docs/Web/Apps">Apps</a></li> + <li>{{domxref("App")}}</li> +</ul> 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 +--- +<div class="summary"> +<p><span class="seoSummary">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.</span></p> +</div> + +<div class="note"> +<p><strong>Note:</strong> 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.</p> +</div> + +<h2 id="Firefox_OS_terminology">Firefox OS terminology</h2> + +<p>There are a few terms you should understand before reading further through our Firefox OS documentation.</p> + +<dl> + <dt>B2G</dt> + <dd>Short for Boot to Gecko.</dd> + <dt>Boot to Gecko</dt> + <dd>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.</dd> + <dt>Firefox OS</dt> + <dd>Firefox OS is basically Mozilla's (and OEM partner's) branding and support services applied on top of <strong>Boot to Gecko</strong>, to create a final release product.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Gaia">Gaia</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Gecko" title="/en-US/docs/Accessibility/AT-APIs/Gecko">Gecko</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Gonk" title="/en-US/docs/Mozilla/Firefox_OS/Gonk">Gonk</a></dt> + <dd>Gonk is the lower level operating system of the Firefox OS platform, consisting of a Linux kernel (based on the <a href="http://source.android.com/">Android Open Source Project</a> (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 <strong>porting target</strong> 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.</dd> + <dt><a name="Jank">Jank</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Architecture_diagram">Architecture diagram</h2> + +<p><img alt="Firefox OS Architecture" src="/files/4605/FirefoxOS.png" style="display: block; height: 915px; margin: 0px auto; width: 754px;"></p> + +<h2 id="Firefox_OS_bootup_procedure">Firefox OS bootup procedure</h2> + +<p>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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7491/bootup.png" style="display: block; height: 1979px; margin: 0px auto; width: 2112px;"></p> + +<h3 id="The_bootstrapping_process">The bootstrapping process</h3> + +<p>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.</p> + +<p>There are a few points worth noting about the boot process:</p> + +<ul> + <li>The bootloaders usually display the first splash screen seen by the user during device startup; this is typically a vendor logo.</li> + <li>The bootloaders implement flashing an image to the device. Different devices use different protocols; most phones use the <a href="http://android-dls.com/wiki/index.php?title=Fastboot" title="http://android-dls.com/wiki/index.php?title=Fastboot">fastboot protocol</a>, but the Samsung Galaxy S II uses the odin protocol.</li> + <li>By the end of the bootstrapping process, the modem image is usually loaded and running on the modem processor. How this happens is highly device-specific and may be proprietary.</li> +</ul> + +<h3 id="The_Linux_kernel">The Linux kernel</h3> + +<p>The Linux kernel(s) used by Gonk is very similar to the upstream Linux from which it's derived (based on the <a href="http://source.android.com/" title="http://source.android.com/">Android Open Source Project</a>). 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.</p> + +<p>The <a href="http://en.wikipedia.org/wiki/Linux_startup_process" title="http://en.wikipedia.org/wiki/Linux_startup_process">startup process for Linux</a> is well-documented elsewhere on the Internet, so this article won't cover that.</p> + +<p>The Linux Kernel will bring up devices and run essential processes. It will execute processes defined in <code>init.rc</code> and the successor <a href="https://github.com/mozilla-b2g/gonk-misc/blob/master/init.b2g.rc">init.b2g.rc</a> to boot essential process such as <code>b2g</code> (FirefoxOS basic process, containing Gecko) and <code>rild</code> (telephony related process that might proprietary by different chipsets) — see below for more details. At the end of the process, a userspace <code>init</code> process is launched, as it is in most UNIX-like operating systems.</p> + +<p>Once the <code>init</code> 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 <a href="http://en.wikipedia.org/wiki/Sysfs" title="http://en.wikipedia.org/wiki/Sysfs"><code>sysfs</code></a>. For example, here's a <a href="https://github.com/cgjones/mozilla-central/blob/master/hal/gonk/GonkHal.cpp#L277" title="https://github.com/cgjones/mozilla-central/blob/master/hal/gonk/GonkHal.cpp#L277">code snippet</a> that reads the battery state in Gecko:</p> + +<pre class="brush:cpp;">FILE *capacityFile = fopen("/sys/class/power_supply/battery/capacity", "r"); +double capacity = dom::battery::kDefaultLevel * 100; +if (capacityFile) { + fscanf(capacityFile, "%lf", &capacity); + fclose(capacityFile); +}</pre> + +<h3 id="More_on_the_init_process">More on the init process</h3> + +<p>The <code>init</code> 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 <code>init*.rc</code> files) that consist of commands describing what should be done to start various services. The Firefox OS <code>init.rc</code> is typically the stock Android <code>init.rc</code> for that device patched to include the things required to kick-start Firefox OS, and varies from device to device.</p> + +<p>One key task the <code>init</code> process handles is starting up the <code>b2g</code> process; this is the core of the Firefox OS operating system.</p> + +<p>The code in <code>init.rc</code> that starts this up looks like this:</p> + +<pre>service b2g /system/bin/b2g.sh + class main + onrestart restart media</pre> + +<div class="note"> +<p><strong>Note:</strong> Exactly how much <code>init.rc</code> differs from the Android version varies from device to device; sometimes, <code>init.b2g.rc</code> is simply appended, and sometimes the patches are more significant.</p> +</div> + +<h2 id="The_userspace_process_architecture">The userspace process architecture</h2> + +<p>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.</p> + +<p><a href="/files/3849/B2G userspace architecture.svg"><img alt="Userspace diagram" src="/files/3849/B2G%20userspace%20architecture.svg" style="float: right; height: 491px; position: relative; width: 520px;"></a></p> + +<div class="note"> +<p><strong>Note:</strong> Keep in mind that since Firefox OS is under active development, this diagram is subject to change, and may not be entirely accurate.</p> +</div> + +<p>The <code>b2g</code> process is the primary system process. It runs with high privileges; it has access to most hardware devices. <code>b2g</code> communicates with the modem, draws to the display framebuffer, and talks to GPS, cameras, and other hardware features. Internally, <code>b2g</code> runs the Gecko layer (implemented by <code>libxul.so</code>). See <a href="#Gecko">Gecko</a> for details on how the Gecko layer works, and how <code>b2g</code> communicates with it.</p> + +<h3 id="b2g">b2g</h3> + +<p>The <code>b2g</code> process may, in turn, spawn a number of low-rights <strong>content processes</strong>. These processes are where web applications and other web content are loaded. These processes communicate with the main Gecko server process through <a href="/en-US/docs/IPDL" title="/en-US/docs/IPDL">IPDL</a>, a message-passing system.</p> + +<p>The <code>b2g</code> process runs libxul, which references <code>b2g/app/b2g.js</code> to get default preferences. From the preferences it will open the described HTML file <code>b2g/chrome/content/shell.html</code>, which is compiled within the <code>omni.ja</code> file. <code>shell.html</code> includes <code>b2g/chrome/content/shell.js</code> file, which triggers the Gaia <code>system</code> app.</p> + +<h3 id="rild">rild</h3> + +<p>The <code>rild</code> process is the interface to the modem processor. <code>rild</code> is the daemon that implements the <strong>Radio Interface Layer</strong> (RIL). It's a proprietary piece of code that's implemented by the hardware vendor to talk to their modem hardware. <code>rild</code> 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 <code>init</code> script:</p> + +<pre>service ril-daemon /system/bin/rild + socket rild stream 660 root radio</pre> + +<h3 id="rilproxy">rilproxy</h3> + +<p>In Firefox OS, the <code>rild</code> client is the <code>rilproxy</code> process. This acts as a dumb forwarding proxy between <code>rild</code> and <code>b2g</code>. This proxy is needed as an implementation detail; suffice it to say, it is indeed necessary. The <a href="https://github.com/mozilla-b2g/rilproxy" title="https://github.com/mozilla-b2g/rilproxy"><code>rilproxy</code> code can be found on GitHub</a>.</p> + +<h3 id="mediaserver">mediaserver</h3> + +<p>The <a href="https://github.com/android/platform_frameworks_base/tree/ics-mr0-release/media/libmediaplayerservice" title="https://github.com/android/platform_frameworks_base/tree/ics-mr0-release/media/libmediaplayerservice"><code>mediaserver</code> process</a> 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 <a href="http://www.webmproject.org/about/" title="http://www.webmproject.org/about/">WebM</a> video) are decoded by Gecko and sent directly to the <code>mediaserver</code> process. Other media files are decoded by <code>libstagefright</code>, which is capable of accessing proprietary codecs and hardware encoders.</p> + +<div class="note"> +<p><strong>Note:</strong> The <code>mediaserver</code> 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.</p> +</div> + +<h3 id="netd">netd</h3> + +<p>The <code>netd</code> process is used to configure network interfaces.</p> + +<h3 id="wpa_supplicant">wpa_supplicant</h3> + +<p>The <code>wpa_supplicant</code> process is the standard UNIX-style daemon that handles connectivity with WiFi access points.</p> + +<h3 id="dbus-daemon">dbus-daemon</h3> + +<p>The dbus-daemon implements <a href="http://www.freedesktop.org/wiki/Software/dbus" title="http://www.freedesktop.org/wiki/Software/dbus">D-Bus</a>, a message bus system that Firefox OS uses for Bluetooth communication.</p> + +<h2 id="Gecko">Gecko</h2> + +<p><a href="/en-US/docs/Gecko" title="/en-US/docs/Gecko">Gecko</a>, as previously mentioned, is the implementation of web standards (<a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, and <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a>) that is used to implement everything the user sees on Firefox OS.</p> + +<div class="note"> +<p><strong>Note</strong>: To search the Gecko codebase, you could use <a href="http://dxr.mozilla.org">http://dxr.mozilla.org</a>. It’s more fancy and provides good reference features, but with limited repositories. Or you could try the traditional <a href="http://mxr.mozilla.org">http://mxr.mozilla.org</a>, which contains more Mozilla projects.</p> +</div> + +<h3 id="Gecko_files_related_to_Firefox_OS">Gecko files related to Firefox OS</h3> + +<h4 id="b2g_2">b2g/</h4> + +<p>The b2g folder contains mainly Firefox OS-related functions.</p> + +<h5 id="b2gchromecontent">b2g/chrome/content</h5> + +<p>Contains Javascript files run above the system app.</p> + +<h5 id="b2gchromecontentshell.html">b2g/chrome/content/shell.html</h5> + +<p>The entry point into Gaia — the HTML for the system app. <code>shell.html</code> pulls in <code>settings.js</code> and <code>shell.js</code>:</p> + +<pre class="brush: html"><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></pre> + +<p><code>settings.js</code> contains system default setting parameters.</p> + +<h5 id="b2gchromecontentshell.js">b2g/chrome/content/shell.js</h5> + +<p><code>shell.js</code> is the first script to load in the Gaia <code>system</code> app.</p> + +<p><code>shell.js</code> imports all required modules, registers key listeners, defines <code>sendCustomEvent</code> and <code>sendChromeEvent</code> to communicate with Gaia, and provides webapp install helpers: indexedDB quota, RemoteDebugger, keyboard helper, and screenshot tool.</p> + +<p>But the most important function of <code>shell.js</code> is to launch the Gaia <code>system</code> app, then hand over the overall systems related management work to the Gaia <code>system</code> app.</p> + +<pre class="brush: js">let systemAppFrame = + document.createElementNS('http://www.w3.org/1999/xhtml', 'html:iframe'); + ... + container.appendChild(systemAppFrame);</pre> + +<h5 id="b2gappb2g.js">b2g/app/b2g.js</h5> + +<p>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.</p> + +<h4 id="domAPI">dom/{API}</h4> + +<p>New API implementations (post-b2g) will be located in <code>dom/</code>. Older APIs will be located in <code>dom/base</code>, for example <code>Navigator.cpp</code>.</p> + +<h5 id="domapps">dom/apps</h5> + +<p><code>.jsm</code> will be loaded — <code>.js</code> API implementations such as <code>webapp.js</code> install, <code>getSelf</code>, etc.</p> + +<h5 id="domappsPermissionsTable.jsm">dom/apps/PermissionsTable.jsm</h5> + +<p>All permissions are defined in <a href="http://mxr.mozilla.org/mozilla-central/source/dom/apps/PermissionsTable.jsm">PermissionsTable.jsm</a></p> + +<h4 id="domwebidl">dom/webidl</h4> + +<p>WebIDL is the language used to define web APIs. For supported attributes, read <a href="https://developer.mozilla.org/en-US/docs/Mozilla/WebIDL_bindings">WebIDL_bindings</a>.</p> + +<h4 id="halgonk">hal/gonk</h4> + +<p>This directory contains files related to the gonk port layer.</p> + +<h4 id="Generated_files">Generated files</h4> + +<h5 id="modulelibprefsrcinitall.js">module/libpref/src/init/all.js</h5> + +<p>Contains all config files.</p> + +<h5 id="systemb2g_omni.ja_and_omni.js">/system/b2g/ omni.ja and omni.js</h5> + +<p>Contains the pack of styles for resources in the device.</p> + +<h3 id="Processing_input_events">Processing input events</h3> + +<p>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 <a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/nsAppShell.cpp" rel="custom">Gonk implementation</a> of <code><a href="/bn-BD/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAppShell" title="">nsIAppShell</a></code>, 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 <code>nsAppShell</code> object that represents the Gecko subsystem in order to send events to the user interface.</p> + +<p>For example:</p> + +<pre class="brush:cpp;">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(); +}</pre> + +<p>These events come from the standard Linux <code>input_event</code> system. Firefox OS uses a <a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/libui/InputReader.cpp" rel="custom">light abstraction layer</a> over that; this provides some nice features like event filtering. You can see the code that creates input events in the <code>EventHub::getEvents()</code> method in <a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/libui/EventHub.cpp" rel="custom">widget/gonk/libui/EventHub.cpp</a>.</p> + +<p>Once the events are received by Gecko, they're dispatched into the DOM by <code><a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/nsAppShell.cpp" rel="custom">nsAppShell</a></code>:</p> + +<pre class="brush:cpp;">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); +} +</pre> + +<p>After that, the events are either consumed by Gecko itself or are dispatched to Web applications as <a href="/en-US/docs/DOM_Client_Object_Cross-Reference/DOM_Events" title="/en-US/docs/DOM_Client_Object_Cross-Reference/DOM_Events">DOM events</a> for further processing.</p> + +<h3 id="Graphics">Graphics</h3> + +<p>At the very lowest level, Gecko uses <a href="http://www.khronos.org/opengles/2_X/" title="http://www.khronos.org/opengles/2_X/">OpenGL ES 2.0</a> to draw to a GL context that wraps the hardware frame buffers. This is done in the Gonk implementation of <code><a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/nsWindow.cpp" rel="custom">nsWindow</a></code> by code similar to this:</p> + +<pre class="brush:cpp;">gNativeWindow = new android::FramebufferNativeWindow(); +sGLContext = GLContextProvider::CreateForWindow(this);</pre> + +<p>The <code>FramebufferNativeWindow</code> class is brought in directly from Android; see <a href="https://github.com/android/platform_frameworks_base/blob/ics-mr1-release/libs/ui/FramebufferNativeWindow.cpp" title="https://github.com/android/platform_frameworks_base/blob/ics-mr1-release/libs/ui/FramebufferNativeWindow.cpp"><code>FramebufferNativeWindow.cpp</code></a>. This uses the <strong>gralloc</strong> API to access the graphics driver in order to map buffers from the framebuffer device into memory.</p> + +<p>Gecko uses its <a href="/en-US/docs/Gecko/Layers" title="/en-US/docs/Gecko/Layers">Layers</a> system to composite drawn content to the screen. In summary, what happens is this:</p> + +<ol> + <li>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 <a href="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#83" title="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#201"><code>BasicThebesLayer::PaintThebes()</code></a>.</li> + <li>Gecko then composites all of these textures to the screen using OpenGL commands. This composition occurs in <a href="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/opengl/ThebesLayerOGL.cpp#124" title="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#201"><code>ThebesLayerOGL::RenderTo()</code></a>.</li> +</ol> + +<p>The details of how Gecko handles the rendering of web content is outside the scope of this document.</p> + +<h3 id="Hardware_Abstraction_Layer_(HAL)">Hardware Abstraction Layer (HAL)</h3> + +<p>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.</p> + +<h4 id="How_the_HAL_works">How the HAL works</h4> + +<p>Let's consider the <a href="/bn-BD/docs/Web/API/Window/navigator/vibrate" title="The documentation about this has not yet been written; please consider contributing!"><code>Vibration</code></a> API as an example. The Gecko HAL for this API is defined in <a href="https://dxr.mozilla.org/mozilla-central/source/hal/Hal.h" rel="custom">hal/Hal.h</a>. In essence (simplifying the method signature for clarity's sake), you have this function:</p> + +<pre>void Vibrate(const nsTArray<uint32> &pattern);</pre> + +<p>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 <a href="https://dxr.mozilla.org/mozilla-central/source/hal/gonk/GonkHal.cpp" rel="custom">hal/gonk/GonkHal.cpp</a>:</p> + +<pre class="brush:cpp;">void Vibrate(const nsTArray<uint32_t> &pattern) { + EnsureVibratorThreadInitialized(); + sVibratorRunnable->Vibrate(pattern); +} +</pre> + +<p>This code sends the request to start vibrating the device to another thread, which is implemented in <code>VibratorRunnable::Run()</code>. This thread's main loop looks like this:</p> + +<pre class="brush:cpp;">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(); + } +} +</pre> + +<p><code>vibrator_on()</code> 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 <code>sysfs</code>.</p> + +<h4 id="Fallback_HAL_API_implementations">Fallback HAL API implementations</h4> + +<p>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 <a href="https://dxr.mozilla.org/mozilla-central/source/hal/fallback/FallbackVibration.cpp" rel="custom">hal/fallback/FallbackVibration.cpp</a>.</p> + +<pre class="brush:cpp;">void Vibrate(const nsTArray<uint32_t> &pattern) { +}</pre> + +<h4 id="Sandbox_implementations">Sandbox implementations</h4> + +<p>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.</p> + +<p>For vibration, this is handled by the <code>Vibrate()</code> function implemented in <a href="https://dxr.mozilla.org/mozilla-central/source/hal/sandbox/SandboxHal.cpp" rel="custom">hal/sandbox/SandboxHal.cpp</a>:</p> + +<pre class="brush: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())); +}</pre> + +<p>This sends a message defined by the <code>PHal</code> interface, described by IPDL in <a href="https://dxr.mozilla.org/mozilla-central/source/hal/sandbox/PHal.ipdl" rel="custom">hal/sandbox/PHal.ipdl</a>. This method is described more or less as follows:</p> + +<pre>Vibrate(uint32_t[] pattern);</pre> + +<p>The receiver of this message is the <code>HalParent::RecvVibrate()</code> method in <a href="https://dxr.mozilla.org/mozilla-central/source/hal/sandbox/SandboxHal.cpp" rel="custom">hal/sandbox/SandboxHal.cpp</a>, which looks like this:</p> + +<pre class="brush:cpp;">virtual bool RecvVibrate(const InfallibleTArray<unsigned int>& pattern, + const InfallibleTArray<uint64_t> &id, + PBrowserParent *browserParent) MOZ_OVERRIDE { + + hal::Vibrate(pattern, newID); + return true; +}</pre> + +<p>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 <code>Vibrate()</code>, and eventually to the Vibration driver.</p> + +<h3 id="DOM_APIs">DOM APIs</h3> + +<p><strong>DOM interfaces</strong> 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 <a href="/en-US/docs/DOM/About_the_Document_Object_Model" title="/en-US/docs/DOM/About_the_Document_Object_Model">about the DOM</a>. DOM interfaces are defined using <a href="/en-US/docs/XPIDL" title="/en-US/docs/XPIDL">IDL</a>, which comprises both a foreign function interface (FFI) and object model (OM) between JavaScript and C++.</p> + +<p>The vibration API is exposed to web content through an IDL interface, which is provided in <code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/interfaces/base/nsIDOMNavigator.idl" rel="custom">nsIDOMNavigator.idl</a>:</code></p> + +<pre>[implicit_jscontext] void mozVibrate(in jsval aPattern);</pre> + +<p>The <a href="/en-US/docs/SpiderMonkey/JSAPI_Reference/Jsval" title="/en-US/docs/SpiderMonkey/JSAPI_Reference/JSVAL_IS_OBJECT"><code>jsval</code></a> argument indicates that <code>mozVibrate()</code> (which is our vendor-prefixed implementation of this non-finalized vibration specification) accepts as input any JavaScript value. The IDL compiler, <a href="/en-US/docs/XPIDL/xpidl" title="/en-US/docs/XPIDL/xpidl"><code>xpidl</code></a>, generates a C++ interface that's then implemented by the <code>Navigator</code> class in <code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/base/Navigator.cpp" rel="custom">Navigator.cpp</a></code>.</p> + +<pre class="brush:cpp;">NS_IMETHODIMP Navigator::MozVibrate(const jsval& aPattern, JSContext* cx) { + // ... + hal::Vibrate(pattern); + return NS_OK; +}</pre> + +<p>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 <code>hal::Vibrate()</code> 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.</p> + +<p>The vibration API is a very simple API, which makes it a good example. The <a href="/en-US/docs/API/WebSMS" title="/en-US/docs/API/WebSMS">SMS API</a> is an example of a more complex API which uses its own "remoting" layer connecting content processes to the server.</p> + +<h2 id="Radio_Interface_Layer_(RIL)">Radio Interface Layer (RIL)</h2> + +<p>The RIL was mentioned in the section <a href="#The_userspace_process_architecture">The userspace process architecture</a>. This section will examine how the various pieces of this layer interact in a bit more detail.</p> + +<p>The main components involved in the RIL are:</p> + +<dl> + <dt><code>rild</code></dt> + <dd>The daemon that talks to the proprietary modem firmware.</dd> + <dt><code>rilproxy</code></dt> + <dd>The daemon that proxies messages between <code>rild</code> and Gecko (which is implemented in the <code>b2g</code> process). This overcomes the permission problem that arises when trying to talk to <code>rild</code> directly, since <code>rild</code> can only be communicated with from within the <code>radio</code> group.</dd> + <dt><code>b2g</code></dt> + <dd>This process, also known as the <strong>chrome process</strong>, implements Gecko. The portions of it that relate to the Radio Interface Layer are <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_worker.js" rel="custom">dom/system/gonk/ril_worker.js</a>, which implements a worker thread that talks to <code>rild</code> through <code>rilproxy</code> and implements the radio state machine; and the <code><a href="/bn-BD/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRadioInterfaceLayer" title="">nsIRadioInterfaceLayer</a></code> interface, which is the main thread's <a href="/en-US/docs/XPCOM" title="/en-US/docs/XPCOM">XPCOM</a> service that acts primarily as a message exchange between the <code>ril_worker.js</code> thread and various other Gecko components, including the Gecko content process.</dd> + <dt>Gecko's content process</dt> + <dd>Within Gecko's content process, the <code><a href="/bn-BD/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRILContentHelper" title="">nsIRILContentHelper</a></code> interface provides an XPCOM service that lets code implementing parts of the DOM, such as the <a href="/en-US/docs/API/WebTelephony" title="/en-US/docs/API/WebTelephony">Telephony</a> and <a href="/en-US/docs/API/WebSMS" title="/en-US/docs/API/WebSMS">SMS</a> APIs talk to the radio interface, which is in the chrome process.</dd> +</dl> + +<h3 id="Example_Communicating_from_rild_to_the_DOM">Example: Communicating from rild to the DOM</h3> + +<p>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 <code>rild</code> using a proprietary mechanism. <code>rild</code> then prepares a message for its client according to the "open" protocol, which is described in <a href="https://github.com/mozilla-b2g/android-hardware-ril/blob/master/include/telephony/ril.h" title="https://github.com/mozilla-b2g/android-hardware-ril/blob/master/include/telephony/ril.h"><code>ril.h</code></a>. In the case of an incoming call, a <code>RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED</code> message is generated and sent by <code>rild</code> to <code>rilproxy</code>.</p> + +<p><code>rilproxy</code>, implemented in <a href="https://github.com/mozilla-b2g/rilproxy/blob/master/src/rilproxy.c" title="https://github.com/mozilla-b2g/rilproxy/blob/master/src/rilproxy.c"><code>rilproxy.c</code></a>, receives this message in its main loop, which polls its connection to <code>rild</code> using code like this:</p> + +<pre class="brush:cpp;">ret = read(rilproxy_rw, data, 1024); + +if(ret > 0) { + writeToSocket(rild_rw, data, ret); +}</pre> + +<p>Once the message is received from <code>rild</code>, it's then forwarded along to Gecko on the socket that connects <code>rilproxy</code> to Gecko. Gecko receives the forwarded message on its <a href="https://dxr.mozilla.org/mozilla-central/source/ipc/ril/Ril.cpp" rel="custom">IPC thread</a>:</p> + +<pre class="brush:cpp;">int ret = read(fd, mIncoming->Data, 1024); +// ... handle errors ... +mIncoming->mSize = ret; +sConsumer->MessageReceived(mIncoming.forget()); +</pre> + +<p>The consumer of these messages is <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/SystemWorkerManager.cpp" rel="custom">SystemWorkerManager</a>, which repackages the messages and dispatches them to the <code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_worker.js" rel="custom">ril_worker.js</a></code> thread that implements the RIL state machine; this is done in the <code>RILReceiver::MessageReceived()</code> method:</p> + +<pre class="brush:cpp;">virtual void MessageReceived(RilRawData *aMessage) { + nsRefPtr<DispatchRILEvent> dre(new DispatchRILEvent(aMessage)); + mDispatcher->PostTask(dre); +}</pre> + +<p>The task posted to that thread in turn calls the <code>onRILMessage()</code> function, which is implemented in JavaScript. This is done using the JavaScript API function <code><a href="/en-US/docs/SpiderMonkey/JSAPI_Reference/JS_CallFunctionName" title="/en-US/docs/SpiderMonkey/JSAPI_Reference/JS_CallFunctionName">JS_CallFunctionName</a>()</code>:</p> + +<pre>return JS_CallFunctionName(aCx, obj, "onRILMessage", NS_ARRAY_LENGTH(argv), + argv, argv);</pre> + +<p><code>onRILMessage()</code> is implemented in <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_worker.js" rel="custom">dom/system/gonk/ril_worker.js</a>, which processes the message bytes and chops them into parcels. Each complete parcel is then dispatched to individual handler methods as appropriate:</p> + +<pre class="brush:js;">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); + } +} +</pre> + +<p>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.</p> + +<p>In our example, <code>RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED</code>, the following handler is called:</p> + +<pre class="brush:js;">RIL[UNSOLICITED_RESPONSE_CALL_STATE_CHANGED] = function UNSOLICITED_RESPONSE_CALL_STATE_CHANGED() { + this.getCurrentCalls(); +};</pre> + +<p>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 <code>getCurrentCall()</code> method:</p> + +<pre class="brush:js;">getCurrentCalls: function getCurrentCalls() { + Buf.simpleRequest(REQUEST_GET_CURRENT_CALLS); +}</pre> + +<p>This sends a request back to <code>rild</code> to request the state of all currently active calls. The request flows back along a similar path the <code>RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED</code> message followed, but in the opposite direction (that is, from <code>ril_worker.js</code> to <code>SystemWorkerManager</code> to <code>Ril.cpp</code>, then <code>rilproxy</code> and finally to the <code>rild</code> socket). <code>rild</code> then responds in kind, back along the same path, eventually arriving in <code>ril_worker.js</code>'s handler for the <code>REQUEST_GET_CURRENT_CALLS</code> message. And thus bidirectional communication occurs.</p> + +<p>The call state is then processed and compared to the previous state; if there's a change of state, ril_worker.js notifies the <code><a href="/bn-BD/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRadioInterfaceLayer" title="">nsIRadioInterfaceLayer</a></code> service on the main thread:</p> + +<pre class="brush:js;">_handleChangedCallState: function _handleChangedCallState(changedCall) { + let message = {type: "callStateChange", + call: changedCall}; + this.sendDOMMessage(message); +}</pre> + +<p><code><a href="/bn-BD/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRadioInterfaceLayer" title="">nsIRadioInterfaceLayer</a></code> is implemented in <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/RadioInterfaceLayer.js" rel="custom">dom/system/gonk/RadioInterfaceLayer.js</a>; the message is received by its <code>onmessage()</code> method:</p> + +<pre class="brush:js;"> 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; + ... +</pre> + +<p>All this really does is dispatch the message to the content process using the Parent Process Message Manager (PPMM):</p> + +<pre class="brush:js;">handleCallStateChange: function handleCallStateChange(call) { + [some internal state updating] + ppmm.sendAsyncMessage("RIL:CallStateChanged", call); +}</pre> + +<p>In the content process, the message is received by <code>receiveMessage()</code> method in the <code><a href="/bn-BD/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRILContentHelper" title="">nsIRILContentHelper</a></code> service, from the Child Process Message Manager (CPMM):</p> + +<pre class="brush:js;">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;</pre> + +<p>This, in turn, calls the <code><a href="https://developer.mozilla.org/bn-BD/docs/XPCOM_Interface_Reference/nsIRILTelephonyCallback#callStateChanged()">nsIRILTelephonyCallback.callStateChanged()</a></code> methods on every registered telephony callback object. Every web application that accesses the <a href="/bn-BD/docs/Web/API/Window/navigator/mozTelephony" title="The documentation about this has not yet been written; please consider contributing!"><code>window.navigator.mozTelephony</code></a> 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 <code>incoming</code> call event.</p> + +<pre class="brush:cpp;">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; +}</pre> + +<p>Applications can receive these events and update their user interface and so forth:</p> + +<pre class="brush:js;">handleEvent: function fm_handleEvent(evt) { + switch (evt.call.state) { + case 'connected': + this.connected(); + break; + case 'disconnected': + this.disconnected(); + break; + default: + break; + } +}</pre> + +<p>Take a look at the implementation of <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/dialer/js/dialer.js" title="https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/dialer/js/dialer.js"><code>handleEvent()</code> in the Dialer application</a> as an extended example.</p> + +<h3 id="3G_data">3G data</h3> + +<p>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 <a href="https://bn.wikipedia.org/wiki/Point-to-Point Protocol" title="Point-to-Point Protocol">Point-to-Point Protocol</a> (PPP) interface device in the Linux kernel that can be configured using the usual interfaces.</p> + +<div class="note"> +<p><strong>Note:</strong> This section needs to be written.</p> +</div> + +<h3 id="Related_DOM_APIs">Related DOM APIs</h3> + +<p>This section lists DOM APIs that are related to RIL communications:</p> + +<ul> + <li><a href="/en-US/docs/API/WebTelephony/Introduction_to_WebTelephony" title="/en-US/docs/API/WebTelephony/Introduction_to_WebTelephony">Telephony API</a></li> + <li><a href="/en-US/docs/API/WebSMS/Introduction_to_WebSMS" title="/en-US/docs/API/WebSMS/Introduction_to_WebSMS">SMS API</a></li> + <li>Mobile Connection API</li> +</ul> + +<h2 id="WiFi">WiFi</h2> + +<p>The WiFi backend for Firefox OS simply uses <code>wpa_supplicant</code> 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.</p> + +<div class="note"> +<p><strong>Note:</strong> Much of the interesting stuff that happens in WiFi depends deeply on possible state changes in the <code>wpa_supplicant</code> process.</p> +</div> + +<p>The implementation of the WiFi component is broken up into two files:</p> + +<dl> + <dt><a href="https://dxr.mozilla.org/mozilla-central/source/dom/wifi/DOMWifiManager.js" rel="custom">dom/wifi/DOMWifiManager.js</a></dt> + <dd>Implements the API that's exposed to web content, as defined in <code><a href="/bn-BD/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWifi.idl" title="">nsIWifi.idl</a></code>.</dd> + <dt><a href="https://dxr.mozilla.org/mozilla-central/source/dom/wifi/WifiWorker.js" rel="custom">dom/wifi/WifiWorker.js</a></dt> + <dd>Implements the state machine and the code that drives the supplicant.</dd> +</dl> + +<p>These two files communicate with one another using the <a href="/en-US/docs/The_message_manager" title="/en-US/docs/The_message_manager">message manager</a>. The backend listens for messages requesting certain actions, such as "associate", and responds with a message when the requested action has been completed.</p> + +<p>The DOM side listens for the response methods as well as several event messages that indicate state changes and information updates.</p> + +<div class="note"> +<p><strong>Note:</strong> Any synchromous DOM APIs are implemented by caching data on that side of the pipe. Synchronous messages are avoided whenever possible.</p> +</div> + +<h3 id="WifiWorker.js">WifiWorker.js</h3> + +<p>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 <code>WifiWorker</code> (and its prototype). The anonymous function ends up being the <code>WifiManager</code> 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.</p> + +<p>The <code>WifiWorker</code> object sits between the <code>WifiManager</code> 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.</p> + +<h3 id="DOMWifiManager.js">DOMWifiManager.js</h3> + +<p>This implements the DOM API, transmitting messages back and forth between callers and the actual WiFi worker. There's very little logic involved.</p> + +<div class="note"> +<p><strong>Note:</strong> In order to avoid synchronous messages to the chrome process, the WiFi Manager does need to cache the state based on the received event.</p> +</div> + +<p>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.</p> + +<h3 id="DHCP">DHCP</h3> + +<p>DHCP and DNS are handled by <code>dhcpcd</code>, 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 <code>dhcpcd</code> each time it connects to a given wireless network.</p> + +<p><code>dhcpcd</code> is also responsible for setting the default route; we call into the network manager to tell the kernel about DNS servers.</p> + +<h2 id="নেটওয়ার্ক_ম্যানেজার">নেটওয়ার্ক ম্যানেজার</h2> + +<p>নেটওয়ার্ক ম্যানেজার 3G ডাটা এবং WiFi উপাদানের দ্বারা নেটওয়ার্কের দিক উন্মুক্ত করে থাকে।</p> + +<div class="note"> +<p><strong>নোটঃএটা লেখা দরকার</strong></p> +</div> + +<h2 id="প্রোসেসেস_এবং_থ্রেড">প্রোসেসেস এবং থ্রেড</h2> + +<p>ফায়ারফক্স ওএস POSIX থ্রেড ব্যবহার করে সকল প্রয়োজনীয় এপ্লিকেশন ব্যবহার করতে,এই থ্রেড একই সাথে প্রত্যেক প্রধান এপ্লিকেশনের অংশ এবং ওয়েব কর্মী ও সাহায্যকারী থ্রেডকে যুক্ত করে।সুন্দর ভ্যালু প্রোসেসকে প্রাধান্য দিয়ে থাকে এবং স্ট্যান্ডার্ড Linux kernel সিডুলারের উপরে ভিত্তি করা বহির্গমন থ্রেডকে।প্রোসেসের স্ট্যাটাসের উপরে ভিত্তি করে আমরা ওয়েব নির্ধারন করে থাকি যা একটি ভিন্ন সুন্দর লেভেল।আমরা পেয়েছি বর্তমানে ৭টি লেভেলঃ</p> + +<table class="standard-table"> + <caption>Process priority levels</caption> + <thead> + <tr> + <th scope="col">Priority</th> + <th scope="col">Nice</th> + <th scope="col">Used for</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>MASTER</code></td> + <td>0</td> + <td>প্রধান b2gপ্রোসেস</td> + </tr> + <tr> + <td><code>FOREGROUND_HIGH</code></td> + <td>0</td> + <td>ক্রিল্টিকাল এপ্লিকেশন<code>cpu</code> or <code>highpriority</code> wakelock ধরা,যা বর্তমানে ঘড়ির দ্বারা সংগ্রহীতএবং যোগাযোগ এপ্লিকেশন</td> + </tr> + <tr> + </tr> + <tr> + <td><code>FOREGROUND</code></td> + <td>1</td> + <td>ফো্রগ্রাউন্ডএপ্লিকেশন</td> + </tr> + <tr> + <td><code>FOREGROUND_KEYBOARD</code></td> + <td>1</td> + <td>কিবোর্ড এপ্লিকেশন</td> + </tr> + <tr> + <td><code>BACKGROUND_PERCEIVABLE</code></td> + <td>7</td> + <td>ব্যাকগ্রাউন্ড এপ্লিকেশন যা অডিও বাজায় অথবা <code>cpu</code> or <code>highpriority</code> wakelock ধরে রাখে এবং একটি সিস্টেম মেসেজ হ্যান্ডেলার রেজিস্টার্ড থাকে কমপক্ষে</td> + </tr> + <tr> + <td><code>BACKGROUND_HOMESCREEN</code></td> + <td>18</td> + <td>homescreen এপ্লিকেশন</td> + </tr> + <tr> + <td><code>BACKGROUND</code></td> + <td>18</td> + <td>ব্যাকগ্রাউন্ডের আন্য সকল এপ্লিকেশন</td> + </tr> + </tbody> +</table> + +<p>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 <a href="http://hg.mozilla.org/mozilla-central/file/54e8c6492dc4/b2g/app/b2g.js#l610"><code>b2g/app/b2g.js</code></a> file.</p> + +<div class="note"> +<p><strong>Note</strong>: for more information on the out-of-memory killer, and how Firefox OS manages low memory situations, read <a href="/en-US/Firefox_OS/Platform/Out_of_memory_management_on_Firefox_OS">Out of memory management on Firefox OS</a>.</p> +</div> + +<p>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.</p> + +<div class="note"> +<p><strong>Note:</strong> cgroups are not currently used for resource management as they've proven unreliable on certain devices and kernels.</p> +</div> + +<p> </p> 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 +--- +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">অপারেটিং সিস্টেমের </span> <span class="short_text" id="result_box" lang="bn"><span class="hps">বিভিন্ন বিল্ড আছে</span></span> যা আপনি ডাউনলোড বা নিজের জন্য তৈরি করতে পারেন</span>, এবং প্রত্যেকটি যন্ত্রের <span class="short_text" id="result_box" lang="bn"><span class="hps">বৈশিষ্ট্যগত </span></span>পার্থক্য রয়েছে। নিচের চার্টটি আপনাকে বিভিন্ন বিল্ডের কি কাজ করে আর কি করেনা তা বুঝতে সাহায্য করবে।</p> +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Feature</th> + <th scope="col">Device</th> + <th scope="col">Emulator</th> + <th scope="col">Desktop</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">ডায়ালার</th> + <td>সব</td> + <td>শুধুমাত্র ইউজার ইন্টারফেস, নেটওয়ার্ক নেই</td> + <td>শুধুমাত্র ইউজার ইন্টারফেস, নেটওয়ার্ক নেই</td> + </tr> + <tr> + <th scope="row">পরিচিতি</th> + <td>সব</td> + <td>সব</td> + <td>সব</td> + </tr> + <tr> + <th scope="row">এসএমএস</th> + <td>সব</td> + <td>শুধুমাত্র ইউজার ইন্টারফেস, নেটওয়ার্ক নেই</td> + <td>শুধুমাত্র ইউজার ইন্টারফেস, নেটওয়ার্ক নেই</td> + </tr> + <tr> + <th scope="row">ক্যামেরা</th> + <td>সব</td> + <td>শুধুমাত্র ইউজার ইন্টারফেস, ক্যামেরা সাপোর্ট করে না</td> + <td>শুধুমাত্র ইউজার ইন্টারফেস, ডেস্কটপে ক্যামেরা সাপোর্ট বিষয়ে এই মুহূর্তে নিশ্চিত না</td> + </tr> + <tr> + <th scope="row">গ্যালারী</th> + <td>সব</td> + <td>সব</td> + <td>সব</td> + </tr> + <tr> + <th scope="row">ভিডিও</th> + <td>সব</td> + <td>শুধুমাত্র ইউজার ইন্টারফেস</td> + <td>সব</td> + </tr> + <tr> + <th scope="row">সঙ্গীত</th> + <td>সব</td> + <td> </td> + <td>সব</td> + </tr> + <tr> + <th scope="row">এফএম রেডিও</th> + <td>সব</td> + <td>সব</td> + <td>শুধুমাত্র ইউজার ইন্টারফেস</td> + </tr> + <tr> + <th scope="row">ইমেইল</th> + <td>সব</td> + <td>সব</td> + <td>সব</td> + </tr> + <tr> + <th scope="row">ক্যালকুলেটর</th> + <td>সব</td> + <td>সব</td> + <td>সব</td> + </tr> + <tr> + <th scope="row">ব্রাউজার</th> + <td>সব</td> + <td>সব</td> + <td>সব</td> + </tr> + <tr> + <th scope="row">মার্কেটপ্লেস</th> + <td>সব</td> + <td>সব</td> + <td>সব</td> + </tr> + <tr> + <th scope="row">ঘড়ি</th> + <td>সব</td> + <td>সব</td> + <td>সব</td> + </tr> + <tr> + <th scope="row">ক্যালেন্ডার</th> + <td>সব</td> + <td>সব</td> + <td>সব</td> + </tr> + <tr> + <th scope="row">মূল স্ক্রীন</th> + <td>সব</td> + <td>সব</td> + <td>সব</td> + </tr> + <tr> + <th scope="row">লক স্ক্রীন</th> + <td>সব</td> + <td>সব</td> + <td>সব</td> + </tr> + <tr> + <th scope="row">কীবোর্ড</th> + <td>সব</td> + <td>সব</td> + <td>সব</td> + </tr> + <tr> + <th scope="row">টাস্ক ম্যানেজার</th> + <td>সব</td> + <td>সব</td> + <td>সব</td> + </tr> + <tr> + <th scope="row">প্রথম-ব্যাবহার</th> + <td>সব</td> + <td>?</td> + <td>?</td> + </tr> + <tr> + <th scope="row">নটিফিকেশন</th> + <td>সব</td> + <td>সব</td> + <td>সব</td> + </tr> + <tr> + <th scope="row">স্ট্যাটাস বার</th> + <td>সব</td> + <td>কিছু নেটওয়ার্ক এর অবস্থা পরিক্ষা করা যায় না</td> + <td>কিছু নেটওয়ার্ক এর অবস্থা পরিক্ষা করা যায় না</td> + </tr> + <tr> + <th scope="row">সেটিংস</th> + <td>সব</td> + <td>সব</td> + <td>সব</td> + </tr> + </tbody> +</table> +<p> </p> 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 +--- +<p>{{draft()}}</p> +<div class="summary"> + <p>গোঙ্ক হচ্ছে <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">ফায়ারফক্স ওএস</a> প্ল্যটফর্মের নিম্ন লেভেল এর অপারেটিং সিসটেম যা, <a class="external" href="http://source.android.com/">এন্ড্রয়েড মুক্ত উৎস প্রজেক্ট</a> (এওএসপি) এ লিন্যাক্স কার্নাল বেসড এবং ইউজারস্পেস হার্ডওয়ার অ্যাবস্ট্রাকশোন লেয়ার (এইচএএল). এই আর্টিকেলটি গোঙ্ক কি কি গঠন করে তা নির্দেশ করে; ফায়ারফক্স ওএস কাঠামো সম্পর্কে বিস্তারিত জানতে এবং গোঙ্ক কিভাবে এতে কাজ করে জানতে পড়ুন <a href="/en-US/Firefox_OS/Platform/Architecture">ফায়ারফক্স ওএস কাঠামো</a> গাইড।</p> +</div> +<h2 id="গোঙ্ক_ওভারভিউ">গোঙ্ক ওভারভিউ</h2> +<p>গেকো সোর্সে <code>b2g/</code> নামক ফোল্ডার রয়েছে যা গোঙ্ক পোর্ট বহন করে যার কাজ হচ্ছে, ওয়েব এর জন্য মোবাইল এর হার্ডওয়্যর ক্যপাবিলিটি খুলে দেয়া। এটি একটি লিনাক্স কার্নেল, এইচএএল, এবং অন্য একটি ওইএম- নির্দিষ্ট লাইব্রেরীগুলো বহন করে। বিভিন্ন গোঙ্ক লাইব্রেরীগুলো একই মুক্ত-উৎস প্রজেক্টঃ libusb, bluez, এবং আরো অন্যান্য। এইচএএল এর অন্য কিছু অংশ এন্ড্রয়িড প্রজেক্ট: জিপিএস, ক্যামেরা, এবং অন্যান্য কিছুর সাথে সম্পর্কযুক্ত।</p> +<p>গোঙ্ক হচ্ছে একটি পোর্টিং লেয়ার ডিভাইসঃ হার্ডওয়্যার এবং গেকো মধ্যে একটা এডাপটার। গোঙ্ক হচ্ছে একটি অপেক্ষাকৃত সহজ লিন্যাক্স ডিস্ট্রিবিউশন যাকে গেকো পোর্টিং লেয়ার এর সাথে জোটবদ্ধ গেকো পোর্ট বিবেচনা করা যায় — তাই গোঙ্ক হচ্ছে গেকোর একটি <strong>পোর্টিং টার্গেট</strong><b>, </b>ঠিক তেমনই, যেমন গেকো ওএস এক্স, উইন্ডোজ় এবং অ্যান্ড্রয়েড এ <a href="/en-US/docs/Gecko" title="/en-US/docs/Gecko">গেকো</a> এর পোর্ট রয়েছে।</p> +<div class="note"> + <p><strong>নোট</strong>: বিভিন্ন মোবাইল ডিভাইসের ভিন্ন চিপসেট এবং অন্যান্য হার্ডওয়্যার স্পেক যেমন থাকতে পারে, ডিভাইসের তেমন ভিন্ন গোঙ্ক ডিস্ট্রিবিউশন থাকতে পারে।</p> +</div> +<p>যেহেতু ফায়ারফক্স ওএস প্রজ়েক্ট গোঙ্ক এর উপর পূর্ণ নিয়ন্রণ রাখে তাই আমরা গেকো তে ইন্টারফেজ উন্মুক্ত করতে পারি যা অন্য অপারেটিং সিস্টেমে উন্মুক্ত হবে না। উদাহরণস্বরূপ, পূর্ণ টেলিফোনি স্ট্যাক এবং গোঙ্ক এর ডিসপ্লে ফ্রেম বাফার এর উপর গেকোর সরাসরি কতৃত্ব রয়েছে।</p> +<h2 id="গোঙ্ক_সোর্স_কোড"><strong>গোঙ্ক সোর্স কোড</strong></h2> +<p>প্রধান <a href="https://github.com/mozilla-b2g/B2G">গিটহাব- এ বি২জি রেপো</a> নানা ধরনের ডিভাইস এর জন্য গোঙ্ক এর অফিশিয়াল সাপোর্ট বহন করে, তাই আপনি গোঙ্ক এর সংগ্রহস্থল হিসাবে এটিকে বিবেচনা করতে পারেন. সাপোর্টেড ডিভাইস গুলোর লিঙ্কঃ <code>B2G/config.sh</code>.</p> +<p>গোঙ্ক এর দৈনন্দিন বেশিরভাগ কাজ হল বিভিন্ন বোর্ডে সিস্টেমকে পোর্টিং করার মত। গেকো যেন ভিন্ন ভিন্ন ডিভাইস এ কাজ করতে পারে তা নিশ্চিত করুন।</p> +<dl> +</dl> +<p> </p> 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 +--- +<p>ফায়ারফক্স ওএস প্লাটফর্মের অনেকগুলো কম্পোনেন্ট বা অংশ রয়েছে। যদিও ফায়ারফক্স ওএসে চলার উপযোগী এ্যাপ্লিকেশন তৈরি করতে আর্কিটেকচার জানার প্রয়োজন নেই, আপনি যদি প্লাটফর্মটি ডেভেলপ অথবা পোর্ট করার কাজ করে থাকেন কিংবা কেবল কৌতুহলীই হয়ে থাকেন, নিচের ডকুমেন্টেশন আপনার কাছে আকর্ষণীয় হতে পারে!</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">ফায়ারফক্স ওএস প্লাটফর্মের ডকুমেন্টেশন</h2> + <dl> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Introduction" title="bn-BD/docs/Mozilla/Firefox_OS/Introduction">ফায়ারফক্স ওএস পরিচিতি</a></dt> + <dd> + ফায়ারফক্স ওএস কি এবং কিভাবে কাজ করে - এ সংক্রান্ত পরিচিতিমূলক তথ্য</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="bn-BD/docs/Mozilla/Firefox_OS/Building and installing Boot to Gecko">ফায়ারফক্স ওএস বিল্ড এবং ইন্সটল করা</a></dt> + <dd> + ফায়ারফক্স ওএস বিল্ড করে একটি কম্পাটিবল ডিভাইসে ইন্সটল করার গাইড। এই গাইডে ফায়ারফক্স ওএস সিম্যুলেটর বিল্ড এবং কম্পিউটারে ফায়ারফক্স ওএস চালানো আলোচনা করা হয়েছে।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Gaia" title="/bn-BD/docs/Mozilla/Gaia">Gaia (গায়া)</a></dt> + <dd> + গায়া এর ডকুমেন্টেশন, যা ফায়ারফক্স ওএসের ইউজার ইন্টারফেস এ্যাপ্লিকেশন; এটি ফায়ারফক্স ওএসের সফটওয়্যার স্ট্যাকের ওপর একটি ওয়েব এ্যাপ্লিকেশন</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Gonk" title="/bn-BD/docs/Mozilla/Firefox_OS/Gonk">Gonk (গংক)</a></dt> + <dd> + গংক এর ডকুমেন্টেশন, গায়ার নিচে অপারেটিং সিস্টেম লেয়ার। এতে একটি লিনাক্স কার্নেল এবং একটি হার্ডওয়্যার এ্যাবস্ট্র্যাকশন লেয়ার রয়েছে গিকোর সঙ্গে যোগাযোগের জন্য।</dd> + <dt> + <a href="/bn-BD/docs/Gecko" title="/bn-BD/docs/Gecko">Gecko (গিকো)</a></dt> + <dd> + গিকো হল ফায়ারফক্স ওএসের রেন্ডারিং ইঞ্জিন যা ফায়ারফক্স, থান্ডারবার্ডের মত এ্যাপ্লিকেশনের মত ওপেন স্ট্যান্ডার্ড ভিত্তিক ইমপ্লিমেন্টেশন সাপোর্ট করে।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart" title="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart">ফিচার সাপোর্ট চার্ট</a></dt> + <dd> + বিভিন্ন ধরণের ফায়ারফক্স ওএস বিল্ডের ফিচারের একটি চার্ট।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Architecture" title="/bn-BD/docs/Mozilla/Firefox_OS/Architecture">ফায়ারফক্স ওএস আর্কিটেকচারের সার্বিক চিত্র</a></dt> + <dd> + ফায়ারফক্স ওএসের আভ্যন্তরীণ গঠনের সার্বিক চিত্র; এটি মূলত প্লাটফর্ম ডেভেলপার এবং পোর্টিং কাজ করা মানুষদের জন্য।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Apps_architecture" title="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Apps_architecture">ফায়ারফক্স ওএস এ্যাপ আর্কিটেকচার</a></dt> + <dd> + ফায়ারফক্স ওএসের এ্যাপ্লিকেশন মডেলের সার্বিক চিত্র।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Testing_Firefox_OS" title="bn-BD/docs/Mozilla/Firefox_OS/Testing Boot to Gecko">ফায়ারফক্স ওএস টেস্টিং</a></dt> + <dd> + ফায়ারফক্স ওএস টেস্ট করার গাইড, স্বয়ংক্রিয় টেস্ট তৈরির তথ্যসহ।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Porting" title="/bn-BD/docs/Mozilla/Firefox_OS/Porting">ফায়ারফক্স ওএস পোর্ট করা</a></dt> + <dd> + নতুন ডিভাইসে ফায়ারফক্স ওএস পোর্ট করা সংক্রান্ত তথ্য।</dd> + <dt> + <a href="https://developer.mozilla.org/bn-BD/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="https://developer.mozilla.org/bn-BD/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file"> .userconfig ফাইলটি কাস্টমাইজ করা</a></dt> + <dd> + <code>.userconfig</code> ফাইলটির মাধ্যমে বিল্ড এবং ফায়ারফক্স ওএসের এক্সিকিউশন কাস্টমাইজ করা।</dd> + </dl> + <p><span class="alllinks"><a href="/bn-BD/docs/tag/B2G" title="/bn-BD/docs/tag/B2G">সবগুলো দেখুন...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">কমিউনিটি হতে সাহায্য</h2> + <p>আপনি যদি ফায়ারফক্স ওএস নিয়ে কাজ করে থাকেন কিংবা এ্যাপ্লিকেশন ডেভেলপ করতে চান যা ফায়ারফক্স ওএস ডিভাইসে চলবে, আপনাকে সাহায্য করার জন্য কমিউনিটি রয়েছে!</p> + <ul> + <li>বুট-টু-গিকো প্রজেক্ট ফোরাম: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}</li> + </ul> + <ul> + <li>মোজিলার আইআইসি চ্যানেলে আপনার প্রশ্ন জিজ্ঞাসা করুন: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li> + </ul> + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">নেটিকেট ভুলে গেলে চলবে না...</a></span></p> + <br> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">সম্পর্কিত টপিক</h2> + <ul> + <li><a href="/bn-BD/docs/Mobile" title="bn-BD/docs/Mobile">মোবাইল</a></li> + <li><a href="/bn-BD/docs/HTML" title="bn-BD/docs/HTML">HTML (এইচটিএমএল)</a></li> + <li><a href="/bn-BD/docs/CSS" title="bn-BD/docs/CSS">CSS (সিএসএস)</a></li> + <li><a href="/bn-BD/docs/JavaScript" title="bn-BD/docs/JavaScript">JavaScript (জাভাস্ক্রিপ্ট)</a></li> + </ul> + <h2 class="Tools" id="তথ্যভান্ডার">তথ্যভান্ডার</h2> + <ul> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/Schedule_Roadmap" title="https://wiki.mozilla.org/B2G/Schedule_Roadmap">Roadmap</a></li> + <li><a href="/bn-BD/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/bn-BD/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> 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 +--- +<div class="summary"> + <p><span class="seoSummary">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.</span></p> +</div> +<p>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.</p> +<p>Two subsystems are used to manage this: the <strong>Low memory killer (LMK)</strong> and <strong>Low memory notifications</strong>.</p> +<h2 id="লো_মেমোরি_কিলার">লো মেমোরি কিলার</h2> +<p><a href="https://android.googlesource.com/kernel/common.git/+/edd540ea92954f896bfb7ee0ebf5dfdde6e6cb41/drivers/staging/android/lowmemorykiller.txt">The LMK</a> 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 <a href="https://www.kernel.org/doc/Documentation/filesystems/proc.txt">/proc/<pid>/oom_adj or /proc/<pid>/oom_score_adj files</a>. A process's priority is known as its adjustment score, or <code>oom_adj</code>. Smaller <code>oom_adj</code> values correspond to higher priority processes.</p> +<p>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.</p> +<div class="note"> + <p><strong>Note</strong>: The process killed when the device runs out of memory isn't necessarily the one that "caused" the out-of-memory condition.</p> +</div> +<h3 id="প্রসেস_অগ্রাধিকার">প্রসেস অগ্রাধিকার</h3> +<p>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 (<a href="http://hg.mozilla.org/mozilla-central/file/545c35907eff/b2g/app/b2g.js#l661">the current values are set in prefs</a>):</p> +<ol> + <li>The first apps to be killed will be the background apps, starting with the least recently used.</li> + <li>The homescreen application is killed next.</li> + <li>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 <code>high-priority</code> or <code>cpu</code> wakelock and having a registered handler for system messages.)</li> + <li>If the keyboard application is running, it will be killed next.</li> + <li>Foreground applications will be killed next.</li> + <li>Finally, foreground applications that have requested <code>high-priority</code> or <code>cpu</code> wakelocks are the last to get killed.</li> +</ol> +<div class="note"> + <p><strong>Note</strong>: Most child processes run with <code>oom_adj 2</code> while they're in the foreground. Child processes in the background run with <code>oom_adj</code> between <code>3</code> and <code>6</code> (inclusive). Exactly what <code>oom_adj</code> 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.</p> +</div> +<p>There's a couple of exceptions to these rules:</p> +<ul> + <li>The main process is never killed by the LMK as doing so would kill all child processes and restart the operating system. The main process runs with <code>oom_adj 0</code>.</li> + <li>We keep a process around to speed up the startup of new applications called the <strong>preallocated process</strong>. This process is usually always kept alive because it consumes very little memory and significantly speeds up application startup. The only case under which it can be killed is if there's not enough memory available for the main process to keep running after having killed all other processes.</li> +</ul> +<h2 id="লোঅপর্যাপ্ত_মেমোরি_নির্দেশনা">লো/অপর্যাপ্ত মেমোরি নির্দেশনা</h2> +<p>The second mechanism we use to free memory is low memory notifications. The LMK provides a <a href="https://www.codeaurora.org/cgit/quic/la//kernel/msm/commit/?id=b3f986cba580b14438b77b42070ebbc77b69d4c4">special threshold</a> 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 <code>memory-pressure</code> 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.<br> + <br> + When encountering a low memory condition the first <code>memory-pressure</code> event that will be sent will have the <code>low-memory</code> payload. If after a predefined time (5s) we're still in a low memory condition another <code>memory-pressure </code>event will be fired, but this time with the <code>low-memory-ongoing</code> 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.</p> +<h2 id="এলএমকে_এবং_অপর্যাপ্ত_মেমোরির_নির্দেশনা_যেভাবে_একসাথে_কাজ_করে">এলএমকে এবং অপর্যাপ্ত মেমোরির নির্দেশনা যেভাবে একসাথে কাজ করে</h2> +<p>Currently the <a href="http://hg.mozilla.org/mozilla-central/file/545c35907eff/b2g/app/b2g.js#l722">low memory threshold is set above the LMK level for background applications but below the one for the homescreen</a>. So the aggregated action of the LMK and low memory notifications is as follows when a deivce is running out of memory:</p> +<ol> + <li>Kill background apps in least-recently-used order.</li> + <li>If we didn't free enough memory, send <code>memory-pressure</code> events to all remaining applications.</li> + <li>If the condition persists resend a <code>memory-pressure</code> event every 5 seconds, but mark them as ongoing so the GC/CC doesn't react to them.</li> + <li>Kill the homescreen.</li> + <li>Kill perceivable or high-priority background applications</li> + <li>Kill the keyboard app, if it is running.</li> + <li>Kill foreground applications.</li> + <li>Kill high priority foreground applications.</li> + <li>Kill the preallocated process.</li> +</ol> 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 +--- +<p>ফায়ারফক্স ওএস এর কিছু সেটিংস রয়েছে যার দ্বারা ডিভাইস ও এর পূর্ব-নির্ধারিত বৈশিষ্ট কনফিগার করা যায়। <a href="/bn-BD/docs/WebAPI/Settings" title="/en-US/docs/WebAPI/Settings">সেটিংস API</a> ব্যাবহার করে চিহ্নিত এপস্ দ্বারা এসকল সেটিংস এ প্রবেশ করা যায়।</p> +<div class="note"> + <p><strong>টীকা:</strong> বিভিন্ন ডিভাইসের ফিচার ও ফায়ারফক্স ওএস এর বিভিন্ন রিলিজের তারতম্যের কারনে, এই তালিকাটি পরিপূর্ণ ভাবে সকল ডিভাইসের ক্ষেত্রে সঠিক ভাবে নাও মিলতে পারে।</p> +</div> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">সেটিং নাম</th> + <th scope="col"> + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"> + <span class="short_text" id="result_box" lang="bn"><span class="hps">প্রকার</span></span></div> + </div> + </th> + <th scope="col"> + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"> + <span class="short_text" id="result_box" lang="bn"><span class="hps alt-edited">পূর্বনির্ধারিত</span> <span class="hps">মান</span></span></div> + </div> + </th> + </tr> + </thead> + <tbody> + <tr> + <td><code>accessibility.invert</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>accessibility.screenreader</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>alarm.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>app.reportCrashes</code></td> + <td>String</td> + <td><code>ask</code></td> + </tr> + <tr> + <td><code>app.update.interval</code></td> + <td>Number</td> + <td>86400</td> + </tr> + <tr> + <td><code>audio.volume.alarm</code></td> + <td>Number</td> + <td>15</td> + </tr> + <tr> + <td><code>audio.volume.bt_sco</code></td> + <td>Number</td> + <td>15</td> + </tr> + <tr> + <td><code>audio.volume.dtmf</code></td> + <td>Number</td> + <td>15</td> + </tr> + <tr> + <td><code>audio.volume.content</code></td> + <td>Number</td> + <td>15</td> + </tr> + <tr> + <td><code>audio.volume.notification</code></td> + <td>Number</td> + <td>15</td> + </tr> + <tr> + <td><code>audio.volume.tts</code></td> + <td>Number</td> + <td>15</td> + </tr> + <tr> + <td><code>audio.volume.telephony</code></td> + <td>Number</td> + <td>5</td> + </tr> + <tr> + <td><code>bluetooth.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>bluetooth.debugging.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>camera.shutter.enabled</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>clear.remote-windows.data</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>debug.grid.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>debug.oop.disabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>debug.fps.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>debug.ttl.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>debug.log-animations.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>debug.paint-flashing.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>debug.peformancedata.shared</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>deviceinfo.firmware_revision</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>deviceinfo.hardware</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>deviceinfo.os</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>deviceinfo.platform_build_id</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>deviceinfo.platform_version</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>deviceinfo.software</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>deviceinfo.update_channel</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>gaia.system.checkForUpdates</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>general.useragent.updates.enabled</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>geolocation.enabled</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>keyboard.layouts.english</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>keyboard.layouts.dvorak</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>keyboard.layouts.otherlatins</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>keyboard.layouts.cyrillic</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>keyboard.layouts.arabic</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>keyboard.layouts.hebrew</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>keyboard.layouts.zhuyin</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>keyboard.layouts.pinyin</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>keyboard.layouts.greek</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>keyboard.layouts.japanese</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>keyboard.layouts.polish</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>keyboard.layouts.portuguese</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>keyboard.layouts.spanish</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>keyboard.vibration</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>keyboard.clicksound</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>keyboard.autocorrect</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>keyboard.wordsuggestion</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>keyboard.current</code></td> + <td>String</td> + <td><code>en</code></td> + </tr> + <tr> + <td><code>language.current</code></td> + <td>String</td> + <td><code>en-US</code></td> + </tr> + <tr> + <td><code>lockscreen.passcode-lock.code</code></td> + <td>String</td> + <td><code>0000</code></td> + </tr> + <tr> + <td><code>lockscreen.passcode-lock.timeout</code></td> + <td>Number</td> + <td>0</td> + </tr> + <tr> + <td><code>lockscreen.passcode-lock.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>lockscreen.notifications-preview.enabled</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>lockscreen.enabled</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>lockscreen.locked</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>lockscreen.unlock-sound.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>mail.sent-sound.enabled</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>message.sent-sound.enabled</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>operatorvariant.mcc</code></td> + <td>String</td> + <td><code>0</code></td> + </tr> + <tr> + <td><code>operatorvariant.mnc</code></td> + <td>String</td> + <td><code>0</code></td> + </tr> + <tr> + <td><code>ril.iccInfo.mbdn</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.sms.strict7BitEncoding.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>ril.cellbroadcast.searchlist</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>debug.console.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>phone.ring.keypad</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>powersave.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>powersave.threshold</code></td> + <td>Number</td> + <td>0</td> + </tr> + <tr> + <td><code>privacy.donottrackheader.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>ril.callwaiting.enabled</code></td> + <td> </td> + <td> </td> + </tr> + <tr> + <td><code>ril.cf.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>ril.data.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>ril.data.apn</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.data.carrier</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.data.defaultServiceId</code></td> + <td>Number</td> + <td>0</td> + </tr> + <tr> + <td><code>ril.data.passwd</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.data.httpProxyHost</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.data.httpProxyPort</code></td> + <td>Number</td> + <td>0</td> + </tr> + <tr> + <td><code>ril.data.mmsc</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.data.mmsproxy</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.data.mmsport</code></td> + <td>Number</td> + <td>0</td> + </tr> + <tr> + <td><code>ril.data.roaming_enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>ril.data.user</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.mms.apn</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.mms.carrier</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.mms.httpProxyHost</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.mms.httpProxyPort</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.mms.mmsc</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.mms.mmsport</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.mms.mmsproxy</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.mms.passwd</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.mms.user</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.radio.preferredNetworkType</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.radio.disabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>ril.supl.apn</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.supl.carrier</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.supl.httpProxyHost</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.supl.httpProxyPort</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.supl.passwd</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.supl.user</code></td> + <td>String</td> + <td> </td> + </tr> + <tr> + <td><code>ril.sms.strict7BitEncoding.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>ril.sms.</code>defaultServiceId</td> + <td>Number</td> + <td>0</td> + </tr> + <tr> + <td><code>ril.telephony.</code>defaultServiceId</td> + <td>Number</td> + <td>0</td> + </tr> + <tr> + <td><code>ring.enabled</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>screen.automatic-brightness</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>screen.brightness</code></td> + <td>Number</td> + <td>1</td> + </tr> + <tr> + <td><code>screen.timeout</code></td> + <td>Number</td> + <td>60</td> + </tr> + <tr> + <td><code>tethering.usb.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>tethering.usb.ip</code></td> + <td>String</td> + <td><code>192.168.0.1</code></td> + </tr> + <tr> + <td><code>tethering.usb.prefix</code></td> + <td>String</td> + <td><code>24</code></td> + </tr> + <tr> + <td><code>tethering.usb.dhcpserver.startip</code></td> + <td>String</td> + <td><code>192.168.0.10</code></td> + </tr> + <tr> + <td><code>tethering.usb.dhcpserver.endip</code></td> + <td>String</td> + <td><code>192.168.0.30</code></td> + </tr> + <tr> + <td><code>tethering.wifi.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>tethering.wifi.ip</code></td> + <td>String</td> + <td><code>192.168.1.1</code></td> + </tr> + <tr> + <td><code>tethering.wifi.prefix</code></td> + <td>String</td> + <td><code>24</code></td> + </tr> + <tr> + <td><code>tethering.wifi.dhcpserver.startip</code></td> + <td>String</td> + <td><code>192.168.1.10</code></td> + </tr> + <tr> + <td><code>tethering.wifi.dhcpserver.endip</code></td> + <td>String</td> + <td><code>192.168.1.30</code></td> + </tr> + <tr> + <td><code>tethering.wifi.ssid</code></td> + <td>String</td> + <td><code>FirefoxHotspot</code></td> + </tr> + <tr> + <td><code>tethering.wifi.security.type</code></td> + <td>String</td> + <td><code>open</code></td> + </tr> + <tr> + <td><code>tethering.wifi.security.password</code></td> + <td>String</td> + <td><code>1234567890</code></td> + </tr> + <tr> + <td><code>tethering.wifi.connectedClients</code></td> + <td>Number</td> + <td>0</td> + </tr> + <tr> + <td><code>tethering.usb.connectedClients</code></td> + <td>Number</td> + <td>0</td> + </tr> + <tr> + <td><code>time.nitz.automatic-update.enabled</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>time.timezone</code></td> + <td> </td> + <td> </td> + </tr> + <tr> + <td><code>ums.enabled</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>ums.mode</code></td> + <td>Number</td> + <td>0</td> + </tr> + <tr> + <td><code>vibration.enabled</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>wifi.enabled</code></td> + <td>Boolean</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>wifi.screen_off_timeout</code></td> + <td>Number</td> + <td>600000</td> + </tr> + <tr> + <td><code>wifi.disabled_by_wakelock</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>wifi.notification</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>wifi.connect_via_settings</code></td> + <td>Boolean</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>icc.displayTextTimeout</code></td> + <td>Number</td> + <td>40000</td> + </tr> + <tr> + <td><code>icc.inputTextTimeout</code></td> + <td>Number</td> + <td>40000</td> + </tr> + </tbody> +</table> +<h2 id="আরও_দেখুন">আরও দেখুন</h2> +<ul> + <li><a href="/bn-BD/docs/WebAPI/Settings" title="/en-US/docs/WebAPI/Settings">সেটিংস API</a></li> + <li>{{domxref("সেটিংস ম্যানেজার")}}</li> + <li>{{domxref("window.navigator.mozSettings", "navigator.mozSettings")}}</li> +</ul> diff --git a/files/bn/archive/b2g_os/platform/গায়া/gaia_apps/browser/index.html b/files/bn/archive/b2g_os/platform/গায়া/gaia_apps/browser/index.html new file mode 100644 index 0000000000..1bc819f326 --- /dev/null +++ b/files/bn/archive/b2g_os/platform/গায়া/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 +--- +<div class="summary"> + <p><span class="seoSummary"> <a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/browser">Browser app</a> (যা এখন সিস্টেমের অংশ)আমাদেযখন প্রয়োজন তখন ব্রাউজার দিয়ে থাকে ফাঙ্কশনালিটির মত-পেজ নেভিগেশন ,সার্চ এবং বুক্মার্ক্স।এই অনুচ্ছেদব্যাখা করে কিভাবে ব্রাউজার ফাঙ্কশনালিটি কাজ করে ,এবং কিভাবে এটি বিশাল সিস্টেমে উপযুক্ত।</span></p> +</div> +<p>যখন গায়া গেকোর উপরে কাজ করার জন্য গঠোন হয়ে থাকে,ইহা ইঞ্জিনিয়ারদের জন্য সম্ভব একটি Browserঅ্যাপ/সিস্টেম Browser নিয়মিত ওয়েব পেজের নেভিগেশনের জন্য যা তখনের গেকোর উপরে ভিত্তি করে । এটি <a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Browser_API">mozBrowser API</a> দ্বারা পরিচালিত।</p> +<div class="note"> + <p><strong>নোটঃফায়ারফক্স ওএস</strong> 2.1 থেকে পরবর্তীতে, Browserঅ্যাপ হল একটি Systemঅ্যাপের অংশ। এটা মানে ওয়েব ব্রাউজিং ক্লিকিং Browser iconদ্বারা Browser অ্যাপ খুলে অথবা ইউনিভার্সাল সার্চ দ্বারা সুবিধা পেয়ে এবং নেভিগেশন সক্ষমতা উভয়ের দ্বারা কাজ হয়ে থাকে।অ্যাপ এবং ব্রাউজিং ট্যাবস একটি সাধারন অভিজ্ঞতায় এং বিদ্যমান টাস্ক ম্যানেজারের দ্বারা একিভুত হয়ে থাকে এবং শিট দেখা যায়(কোনার ভজ্ঞিমার জন্য) <a href="https://wiki.mozilla.org/FirefoxOS/Haida">Haida user experience</a> এর অংশ হিসেবে।</p> +</div> +<h2 id="সিস্টেম_Browser_(Browser_Chrome)">সিস্টেম Browser (Browser Chrome)</h2> +<p>যখন একটি Firefox OS ব্যবহারকারী একটি ওয়েব পেজকে বুক্মার্ক্স করে তখন এটা হোমস্ক্রীনে দখা যাবে,ওয়েব পেজটি তখনি System Browser এ খুলে যাবে Browser app এর পরিবর্তে।এহা টুল বারের একবারে নিচে থাকে সাধারন ব্যাক/ফরোয়ার্ড/রিফ্রেশ ফাঙ্কশনের।গায়াতে এহাকে বলা হয়ে থাকে Browser Chrome অথবা র্যাপার।আপনি এটা নিচের ছবির ডান পাশের দিকে দেখতে পারেন</p> +<p><img alt="A diagram showing that when a web page is opened in the system browser, it is given a toolbar." src="https://mdn.mozillademos.org/files/7869/browser-app.png" style="width: 738px; height: 500px; display: block; margin: 0px auto;"></p> +<p>যদি আপনি আপনার অয়েব পেজের ফিচার ব্যাক/ফরোয়ার্ড/রিফ্রেশ চেয়ে থাকেন,আপনাকে Browser Chrome কে সক্ষম করতে অ্যাপস মেনিফেস্টকে অনুসরণ করতে হবে।.</p> +<pre class="brush: json">declare { chrome: { navigation: true } }</pre> +<div class="note"> + <p><strong>নোটঃব্রাউজার ক্রোম টুল বার সর্বোচ্চ তালিকা কে প্রভাবিত করে থাকে,সুতরাং এটাকে আপনি বিবেচনায় আনতে পারেন ওয়েব পেজের উদ্বোধনের সময়।</strong></p> +</div> +<h3 id="The_code_flow">The code flow</h3> +<p>যখন Firefox OS এ একটি নতুন ওয়েব পেজ খুলা হয়ে থাকে,কল ফ্লোটি হল.</p> +<pre>Gecko > WrapperFactory > Window Manager > AppWindow > BrowserFrame</pre> +<p> <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/wrapper_factory.js">system/js/wrapper_factory</a> থেকে প্রাপ্ত র্যাপার <code>mozbrowseropenwindow</code> ইভেন্ট গ্রহন করবে একটী নতুন ওয়েব পেজের বুক্মার্কড এর জন্য।</p> +<p> <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/wrapper_factory.js#L15">handleEvent</a> শাখায় হ্যান্ডেলার চেক করবে ইভেন্টটি সিধান্ত নিতে যে ওয়েব পেজ একটি অ্যাপ অথবা ব্রাউজার ক্রোমে হিসেবে খোলা যায় কিনা।</p> +<p>অবশেষে , <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/wrapper_factory.js#L115">launchWrapper</a> কে করেস্পন্ডীঙ উইন্ডো হিসেবে শুরু করতে বলা হয়ে থাকে।</p> +<h2 id="ইউনিভার্সাল_সার্চ_এবং_নেভিগেশন">ইউনিভার্সাল সার্চ এবং নেভিগেশন</h2> +<p>ন্তুন সার্চ এবং নেভিগেশন বার দেয়ে,ব্যবহারকারীরা নিজেদের প্রিয় জিনিস একটি URL টাইপ করে পেতে পারে,অথবা নতুন একটি অ্যাপ বের করতে পারে,ফায়ারফক্স OS থেকে।সার্চ বার স্ক্রীনের সবচেয়ে উপরে থাকে,এবং ব্যবহারকারী এটা খোলার জন্য ট্যাপ অথবা পরিস্কার করতে পারে।</p> +<p> ইহাকে <a href="https://support.mozilla.org/en-US/kb/awesome-bar-find-your-bookmarks-history-and-tabs">Awesome Bar</a> এরকম্বিনেশন হিসেবে ব্রাউজার থেকে চিন্তা করুন এবং ব্রাউজার থেকে এবংহোমস্ক্রীন থেকে <a href="https://support.mozilla.org/en-US/kb/use-adaptive-search-discover-personalized-apps">adaptive app search</a> তে। কারণ Firefox OS ওয়েব অ্যাপস ব্যবহার করে থাকে,যখন আপনি আপনার ইচ্ছা অনুযায়ী পাবেন,যদিও এটি নতুন অ্যাপস,এটি খুলে সঠিক ভাবে।আপনার ন্তুন কিছু ইন্সটল করতে হবে না।কারণ এটি তখনি সব কিছু করে ফেলে।</p> +<h2 id="Browser_অ্যাপ">Browser অ্যাপ</h2> +<p> Browser অ্যাপ হল একটি পরীক্ষিত ওয়েবঅ্যাপ যা একটি সাধারণ ওয়েব browser অভিজ্ঞতা দেয়।প্রধান ফাঙ্কশন <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/browser/js/browser.js">apps/browser/js/browser.js</a> তে পাওয়া যায়ঃ</p> +<pre class="brush: js">var Browser = { + init: function browser_init() { + this.getAllElements(); + ... + BrowserDB.init((function() { + ... + } + } +}; + +window.addEventListener('load', function browserOnLoad(evt) { + window.removeEventListener('load', browserOnLoad); + Browser.init(); +});</pre> +<p> Browser এর <code>init()</code>ফাংকশনকে কল করবে যখন DOM পরিপূর্ণ ।</p> +<pre class="brush: js">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); +},</pre> +<p> <code>getAllElements</code> ফাংকশন ব্যবহার করা হয়ে থাকে সকল camelCase উপাদান হ্যান্ডেল করতে,এর পরে <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/browser/js/browser_db.js">apps/browser/js/browser_db.js</a> কে কল করা হয়ে থাকে,ডিফল্ট সার্চ ইঞ্জিন এবং বুক্মার্ক্স যোগ করে তৈরি করতে লাগে।</p> +<h2 id="Bookmarks">Bookmarks</h2> +<p>ফায়ারফক্স ও এস থেকে 2.0 <a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/bookmark">apps/bookmark</a> ব্যবহার হয়ে থাকে বুক্মার্ক্স সেভ/কার্যক্রম সরাতে</p> +<p>সবচেয়ে মজার অংশ <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/bookmark/manifest.webapp">apps/bookmark/webapp.manifest</a>হল দেখতে এর মতঃ</p> +<pre class="brush: json">"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 + } +},</pre> +<p>উপরে যা দেখা হয়েছে,এক্টিভিটি হ্যান্ডেল করা হয়ে থাকে html সেভ এবং and html রিমুভ দ্বারা. উভয় অপারেশন <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/bookmark/js/activity_handler.js">apps/bookmark/js/activity_handler.js</a>তে ডিলেগেটেডঃ</p> +<pre class="brush: 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); + } + ... + } +}</pre> +<p>যখন মেসেজ হ্যান্ডেলার লিসেনার <code>navigator.mozSetMessageHandler('activity')</code> save-bookmark or remove-bookmark কার্যক্রম গ্রহন করে, <code>ActivityHandler</code> ফাঙ্কশন প্রতিনিধিত্ব কারী অপারেশনের জন্য ট্রিগার তুলে হ্যান্ডেল করতে।</p> diff --git a/files/bn/archive/b2g_os/platform/গায়া/gaia_apps/index.html b/files/bn/archive/b2g_os/platform/গায়া/gaia_apps/index.html new file mode 100644 index 0000000000..891d0f8fb0 --- /dev/null +++ b/files/bn/archive/b2g_os/platform/গায়া/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 +--- +<div class="summary"> + <p><span class="seoSummary">গায়া হল ফায়ারফক্স ওএস এর সম্মুখ-পশ্চাৎ, যা সিস্টেম কতৃপক্ষ প্রায়োগিক কার্যকারিতা ধারণ করে এবং বিল্ট-ইন অ্যাপ্লিকেশন স্যুট ফায়ারফক্স ওএস ডিভাইসের সাথে চালান দিয়া থাকে। সকল গায়া সোর্স কোড- এমনি সিস্টেম, এবং কিবোর্ড আইএমইগুলো- সম্পূর্ণটি এইচটিএমএল৫ (এইচটিএমএল+সিএসএস+জাভাস্ক্রিপ্ট) এবং মুক্ত ওয়েব এপিআইগুলো দিয়ে বানানো হয়। কিভাবে প্রত্যেকটি অনুস্থাপিত অ্যাপ্লিকেশন গায়া পরিবারে উপস্থিত কাজ করে তার তথ্য এই ডকুমেন্টগুলোতে বিদ্যমান রয়েছে।</span></p> +</div> +<h2 id="গায়া_প্রায়োগিক_কার্যকারিতা_বিভাগগুলো">গায়া প্রায়োগিক কার্যকারিতা বিভাগগুলো</h2> +<p>গায়ার ভিতর বিভিন্ন অ্যাপ্লিকেশনগুলো গ্রুপ ভিত্তিক নিম্নে শ্রেণীকরণ করা হল।</p> +<div class="note"> + <p><strong>নোট:</strong> অনেক পৃষ্ঠা কিভাবে প্রত্যেকটি অ্যাপ্লিকেশন নিজ নিজ ভাবে কাজ করে তা ব্যাখ্যা করার সাথে যুক্ত যা <a href="https://github.com/mozilla-b2g/gaia/">গায়া গিটহাব রেপো</a> এর ভিতর "আমাকে পড়ুন" পৃষ্ঠা নামে রয়েছে। এর কারণ অনেক অ্যাপ্লিকেশনগুলো দ্রুত উন্নয়ন চক্র- এর উপর হচ্ছে এবং যার ফলে বিষয় (মাঝে মাঝে দৈনিক) দ্রুত বদলাচ্ছে, সুতরা্ং এই পরিবর্তনগুলোর সাথে এমডিএন পৃষ্ঠাগুলোকে হালনাগাদ করার জন্য ক্ষুদ্র চেষ্টা বোধ করা হয়। ইঞ্জিনিয়ার দ্বারা পরিচালিত "আমাকে পড়ুন" পৃষ্ঠাগুলো হচ্ছে বর্তমানে তথ্যের সবচেয়ে বেশী নির্ভূল উৎস।</p> +</div> +<h3 id="প্লাটফর্ম">প্লাটফর্ম</h3> +<p>সিস্টেম, সেটিংস, লকস্ক্রিন, স্ক্রিপ্ট তৈরি এবং ব্লু-টুথ অ্যাপ্লিকেশন সহকারে।</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7503/platform_team.png" style="width: 355px; height: 269px; margin: 0px auto; display: block;"></p> +<h4 id="অ্যাপ্লিকেশনের_প্লাটফর্ম_আরো_ব্যাখ্যা">অ্যাপ্লিকেশনের প্লাটফর্ম: আরো ব্যাখ্যা</h4> +<dl> + <dt> + <a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/System">সিস্টেম</a></dt> + <dd> + <p>সিস্টেম অ্যাপ্লিকেশন হল <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Architecture#Firefox_OS_bootup_procedure">ফায়ারফক্স ওএস বুটআপ কার্যপ্রণালী</a> চলাকালীন গেকো দ্বারা লোডকৃত সর্বপ্রথম ওয়েব অ্যাপ্লিকেশন, এবং এটা অসংখ্যক দায়িত্ব সামাল দেয় যা সিস্টেম এর চলার জন্য সাধারনত দরকার হয়, এবং সেজন্য পৃথক ওয়েব অ্যাপ্লিকেশনের জন্য পরিসারিত নয়।</p> + </dd> + <dt> + <a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/Window_Management">উইন্ডো ব্যবস্থাপনা</a></dt> + <dd> + <p>ফায়ারফক্স ওএসের উইন্ডো ব্যবস্থাপনা প্রয়োগিক কার্যকারিতা- অ্যাপ্লিকেশন জীবন চক্র এবং পারষ্পরিক ক্রিয়া, বিজ্ঞপ্তি, এ্যানিমেশন আরও অনেক কিছু সহকারে- যা সিস্টেম অ্যাপ্লিকেশনর একটি নির্দিষ্ট অংশ দ্বারা সামলানো হয়। এই রচনাটি ফায়ারফক্স ওএস উইন্ডো ব্যবস্থাপনা বিস্তারিতভাবে দেখায়।</p> + </dd> + <dt> + <a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/Settings">সেটিংস</a></dt> + <dd> + সেটিংস অ্যাপ্লিকেশন ফায়ারফক্স ওএস ব্যবহারকারীদেরকে ডিভাইস কনফিগারেশন সেটিং করার অনুমতি প্রদান করে, এবং আগমিত কার্যালাপগুলোকে (<code>configure নামের সাথে </code><a href="/en-US/docs/WebAPI/Web_Activities">ওয়েবের কার্যালাপগুলো</a>) উত্তর প্রদান করে , যা অন্যান্য অ্যাপ্লিকেশনগুলোকে সেটিংস অ্যাপ্লিকেশনের ভেতর বিভিন্ন প্যানেলে যাওয়ার অনুমতি প্রদান করে প্রয়োজন হিসেবে কনফিগারেশন সামাল দিতে (উদাহরণ সরূপ, ওয়াই-ফাই সেটিং প্যানেল দেখানো যদি কোন ডাটা সংযোগ না থাকে।)</dd> +</dl> +<h3 id="যোগাযোগ">যোগাযোগ</h3> +<p>ডায়েলার, কন্টাক্ট, এসএমএস অ্যাপ্লিকেশন এবং এফটিইউ অ্যাপ্লিকেশন সহকারে।</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7499/comms_team.png" style="width: 317px; height: 246px; margin: 0px auto; display: block;"></p> +<h4 id="যোগাযোগের_অ্যাপ্লিকেশন_আরো_ব্যাখ্যা">যোগাযোগের অ্যাপ্লিকেশন: আরো ব্যাখ্যা</h4> +<p>টিবিডি</p> +<h3 id="উৎপাদনশীলতা">উৎপাদনশীলতা</h3> +<p>ই-মেইল, ক্যালেন্ডার এবং ঘড়ি অ্যাপ্লিকেশন সহকারে।</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7505/productivity_team.png" style="width: 303px; height: 178px; margin: 0px auto; display: block;"></p> +<h4 id="উৎপাদনশীলতা_অ্যাপ্লিকেশন_আরো_ব্যাখ্যা">উৎপাদনশীলতা অ্যাপ্লিকেশন: আরো ব্যাখ্যা</h4> +<dl> + <dt> + <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/calendar/README.md">ক্যালেন্ডার</a></dt> + <dd> + ফায়ারফক্স ওএস- এ বিল্ট-ইন ক্যালেন্ডার অ্যাপ্লিকেশন।</dd> + <dt> + <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/clock/README.md">ঘড়ি</a></dt> + <dd> + ফায়ারফক্স ওএসের অনুস্থাপিত ঘড়ি অ্যাপ্লিকেশন, যাতে যু্ক্ত রয়েছে অ্যালার্ম, টাইমার, স্টপওয়াচ প্রয়োগিক কার্যকারিতা।</dd> + <dt> + <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/email/README.md">ই-মেইল</a></dt> + <dd> + গায়া ই-মেইল অ্যাপ্লিকেশন।</dd> +</dl> +<h3 id="গণমাধ্যম">গণমাধ্যম</h3> +<p>ক্যামেরা, গ্যালারি, সঙ্গীত এবং ভিডিও অ্যাপ্লিকেশন এবং আরও কিছু গণমাধ্যম সম্পর্কিত ফাংশন যেমন লক ডিআরএম এবং ওয়ালপেপার ফরওয়ার্ড করা সহকারে।</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7501/media_team.png" style="width: 386px; height: 250px; margin: 0px auto; display: block;"></p> +<h4 id="গণমাধ্যম_অ্যাপ্লিকেশন_আরও_ব্যাখ্যা">গণমাধ্যম অ্যাপ্লিকেশন: আরও ব্যাখ্যা</h4> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Gaia_apps/Video">ভিডিও</a></dt> + <dd> + ভিডিও হল একটি সাধারণ ভিডিও চালনা অ্যাপ্লিকেশন যা আপনার ফায়ারফক্স ডিভাইসের ম্যাস স্টোরেজ থেকে বর্তমানের ভিডিওগুলো চালিয়ে দেখাবে।</dd> + <dt> + <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/camera/README.md">ক্যামেরা</a></dt> + <dd> + ক্যামেরা ফায়ারফক্স ওএস ব্যবহারকারীদেরকে ছবি তুলতে এবং ভিডিও ধারণ করতে অনুমতি প্রদান করবে এবং ডিভাইস ক্যামেরা হতে ছবি ও ভিডিওর ব্যবস্থা করবে, এবং <code>pick</code> ধরনের অন্যান্য অ্যাপ্লিকেশনগুলো <a href="/en-US/docs/WebAPI/Web_Activities">ওয়েবের কার্যকারিতাগুলো</a> কে সাড়া দেয় যা ক্যামেরার প্রায়োগিক কার্যকারিতার মাধ্যমে গণমাধ্যম ধরতে চায়।</dd> +</dl> +<h3 id="অন্যান্য_গায়া_বৈশিষ্ট্যগুলো">অন্যান্য গায়া বৈশিষ্ট্যগুলো</h3> +<p>এসব কার্যকারিতার পাশাপাশি, সেখানে আরও অসংখ্য অন্যান্য বড় বড় বৈশিষ্ট্য রয়েছে যেমন ব্রাউজার, হোমস্ক্রিন, মার্কেট প্লেস, টেস্ট ফ্রেমওয়ার্ক, পিডিএফ প্রদর্শনকারী এবং অ্যাপ্লিকেশন ব্যবস্থাপক, যা গায়া- এর পাশাপাশি তৈরি হয়।</p> +<dl> + <dt> + <a href="https://github.com/mozilla/pdf.js/blob/master/README.md">pdf.js</a></dt> + <dd> + pdf.js হল এইচটিএমএল৫ ভিত্তিক পিডিএফ প্রদর্শনকারী, যা গায়ার ভিতর পিডিএফগুলো প্রদর্শন করতে ব্যবহৃত হয়। নোট করুন যে pdf.js জন্য কোডবেস পৃথক রেপোতে বজায় রাখা হয়, গায়ার বাইরে।</dd> +</dl> diff --git a/files/bn/archive/b2g_os/platform/গায়া/gaia_apps/settings/index.html b/files/bn/archive/b2g_os/platform/গায়া/gaia_apps/settings/index.html new file mode 100644 index 0000000000..82fecf5253 --- /dev/null +++ b/files/bn/archive/b2g_os/platform/গায়া/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 +--- +<div class="summary"> + <p><span class="seoSummary">অ্যাপ সেটিংস অনুমোদন দেয় ব্যবহারকারীদের ডিভাইস সেটিংসের বাহ্যিক আকার দিতে এবং আর ও সাড়া দেয় আগত কার্যক্রমে যা অ্যাপ থেকে নির্দিষ্ট সেটিংস দর্শন প্রদর্শন করাতে অ্যাপ উন্নতকারীদের অনুমোদন দেয়।(বি দ্র ওয়াই ফাই সেটিংস প্যানেল দেখাও যদি ডাটা সংযোগ না পাওয়া যায়)।এই অনিচ্ছেদ ব্যাখা করে কিভাবে এটি কাজ করে।</span></p> +</div> +<h2 id="মোয_সেটিংস_অ্যাপি_এবং_ডাটা_বাইণ্ডিং">মোয সেটিংস অ্যাপি এবং ডাটা বাইণ্ডিং</h2> +<p>কৌশলগতভাবে বলতে ,সেটিংস অ্যাপ হল UI যা ব্যবহারকারীদের <a href="/en-US/docs/Web/API/Navigator.mozSettings">window.navigator.mozSettings API</a> পরীক্ষণের সুবিধা প্রদান করে।</p> +<p>অ্যাপ সেটিংস সয়ংক্রীয়ভাবে প্রধান সেটিংস অপারেশন যেমন ডাটা বাইন্ডিং ক্ষেত্র এবং মোয সেটিংস ভ্যালুস নিয়ন্ত্রন করে-সকল প্রধান অপারেশন যেমন টগলিং এ সেটিংস অথবা ইনপুট ভ্যালু পরিবর্তন ওমোয সেটিংস ভ্যালুসের পরিবর্তনে ও ফলাফল আনবে।</p> +<p> <code>window.navigator.mozSettings</code> অ্যাপি গেক থেকে সেটিংস সুবিধা দেয়।ব্যবহিত এরকম কিছু দেখেঃ</p> +<pre class="brush: js">navigator.mozSettings.createLock().set(values);</pre> +<p>ডাটা সেটের জন্য।</p> +<div class="note"> + <p><strong>নোটঃ আমাদের </strong> <code>createLock()ব্যবহার করা দরকার কোনো</code> <code>mozSettings</code> ভ্যালুর সেটিংস পড়া অথবা লেখার আগে তা বন্ধ করতে।</p> +</div> +<p>ডাটা সরাতে,আমরা গেট এবং সেট এ কলব্যাক ফাংশন নিচের ডাটার মত কিছু অপারেশন শুরু করতে ব্যবহার করতে পারিঃ</p> +<pre class="brush: js">var reqTimerGoBack = +window.navigator.mozSettings.createLock().get('icc.goBackTimeout'); +reqTimerGoBack.onsuccess = function icc_getTimerGoBackSuccess() { + goBackTimer.timeout = reqTimerGoBack.result['icc.goBackTimeout']; + ... +};</pre> +<p>ডাটা জমা থাকেএকটি <code>instance.result</code> ডিক্টে।</p> +<p>ফায়ারফক্স ২.0, একটি একক <code>mozSettings</code>যা তৎক্ষনাৎপুনরায় ব্যবহার করা যায় <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/settings_cache.js">js/modules/settings_cache.js</a> এর মধ্য দিয়েঃ</p> +<pre class="brush: js">var SettingsCache = require('modules/settings_cache'); + +SettingsCache.getSettings(function(result){ + var onlineSupportTitle = result['support.onlinesupport.title']; + ... +});</pre> +<h2 id="নেভিগেশন"> নেভিগেশন</h2> +<p> যখন ব্যবহা্রকারী অ্যাপ সেটিংস ওপেন করে,তারা উপরের পৃষ্ঠায় কিছু প্যানেলের তালিকা দেখে, যেগুলো স্বাধীন পৃষঠা হিসেবে কাজ করে। <code>SettingsService.navigate</code> (<a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/settings_service.js">js/module/settings_service.js</a>) ঐ সব পৃষ্ঠার মধ্যে ন্যাভিগেশন নিয়ন্ত্রণ করে।</p> +<p><strong>নোট</strong>: উত্তরাধীকার সূত্রেপ্রাপ্ত প্যানেলের জন্য ( যেগুলো নতুন রূপে এখনো খোলা হয়নি), সেটিংস। বর্তমান প্যানেল সেটিংস সার্ভিসের পরিবর্তে ব্যবহার হয়। প্যানেল গুলোর মধ্যে নেভিগেশন থেকে নেভিগেশন করে।</p> +<p> যেহেতু ফায়ারফক্স ওস ট্যাবলেট ডিভাইস এবং মোবাইল সমর্থন করে, অ্যাপ সেটিংস দুটি ভিন্ন রকমের নেভিগেশন রূপ বাস্তবায়িত করেছেঃ</p> +<ul> + <li> প্রথম কলাম(মোবাইলের জন্য)</li> + <li>দ্বিতীয় কলাম(ট্যা্বলেটের জন্য)</li> +</ul> +<p> যখন বলা হয়, <code>SettingsService.navigate</code> কোন নেভিগেশন রূপ ব্যবহার করে তা নিচের কোডের মাধ্যমে নির্দেশ করেঃ</p> +<pre class="brush: js">if (_isTabletAndLandscape()) { + PageTransitions.twoColumn(oldPanel, newPanel, callback); +} else { + PageTransitions.oneColumn(oldPanel, newPanel, callback); +}</pre> +<h2 id="প্যানেল">প্যানেল</h2> +<p>ফায়ারফক্স ও এস ২.0 সামনেরদিকে থেকে, প্রধান প্যানেল গঠন বর্ণনা করা হয়েছে <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/panel.js">js/modules/panel.js</a> এ।এটা ৬ টি ধাপে জীবন চক্র বর্ণনা করেঃ</p> +<ul> + <li><code>init</code></li> + <li><code>beforeShow</code></li> + <li><code>show</code></li> + <li><code>hide</code></li> + <li><code>beforeHide</code></li> + <li><code>uninit</code></li> +</ul> +<p>সকল নতুন সেটিংস প্যানেল গুলো উত্তরাধীকারসূত্রে <code>SettingsPanel</code> থেকে প্রাপ্ত,যা <code>Panel</code> এর কার্যক্রমকে বর্ধিত করে। কোডটি <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/settings_panel.js">js/modules/settings_panel.js</a> বহন করেছেঃ</p> +<pre class="brush: 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); + ... +},</pre> +<p><code>PanelUtils.activate</code> — বর্ণিত <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/modules/panel_utils.js">js/modules/panel_utils.js</a>এ-প্যানেলের মধ্যের সকল লিংকের সাথে সংযোগ স্থাপন করতে ব্যবহার করা হয়েছে এবং প্রতিনিধিত্বকারী প্রশিক্ষক <code>onInit</code>ধাপে সংযোগ করে,<code>PanelUtils.preset ব্যবহার করা হয়েছে</code> <code>onBeforeShow</code> ধাপে মূল্যবান সেটিংসের সাথে উপাদান গুলোকে পুনরায় স্থাপন করতে।</p> +<p>সকল নতুন সেটিংস প্যানেল গুলো বর্ণিত হয়েছে <a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/settings/js/panels">js/panels</a> অংশে।</p> +<h2 id="এ_এম_ডি_মডিউল_এবং_অনুকূল_সময়_গঠন">এ এম ডি মডিউল এবং অনুকূল সময় গঠন</h2> +<p>ফায়ারফক্স ওএস ২.0 সামনেরদিকে থেকে,সেটিংস অ্যাপ <a href="http://en.wikipedia.org/wiki/Asynchronous_module_definition">AMD modules pattern</a> ব্যবহার করে প্রতিটি প্যানেলকে বাস্তবায়িত করতে।এ এম ডি পূর্ণকৃত হয় <a href="https://github.com/requirejs/alameda">Alemeda</a> এর মধ্য দিয়ে (একটি সহজ মাধ্যম <a href="http://requirejs.org/">RequireJS </a>এর) এবং গঠিত/শুভসূচিত হয় <code>r.js</code> (রিকুইয়ার যে এস অপ্টিমাইজার)ব্যবহারের মাধ্যমে। সেটিংস অ্যাপ এর তখনো ও নথিপত্ত্রের উপর নির্ভরশীলতা ছিল (<a href="https://github.com/mozilla-b2g/gaia/tree/master/shared/js">shared/js</a>) যেগুলো এ এম ডি মডিউল নয়। ঐসবের জন্য এটা <code>shim</code> অপশন বর্ণিত <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/config/require.js">settings/js/config/require.js</a> এ ব্যবহার করে।</p> +<h2 id="আরো_দেখো">আরো দেখো</h2> +<p> <a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/settings">Settings app has a build-in README</a> যা সেটিংসের অনেক তথ্য পড়তে উপকারী(প্রধানত আরথার চেন এবং ফ্রেড লিনের দ্বারা লিখিত)।</p> diff --git a/files/bn/archive/b2g_os/platform/গায়া/gaia_apps/system/index.html b/files/bn/archive/b2g_os/platform/গায়া/gaia_apps/system/index.html new file mode 100644 index 0000000000..961f3dc1e4 --- /dev/null +++ b/files/bn/archive/b2g_os/platform/গায়া/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 +--- +<div class="summary"> + <p><span class="seoSummary">The System app is the first web app loaded by Gecko during the <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Architecture#Firefox_OS_bootup_procedure">Firefox OS bootup procedure</a>, 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.</span></p> +</div> +<blockquote> + <p>Any application that can be written in JavaScript, will eventually be written in JavaScript. -- Atwood's Law</p> +</blockquote> +<div class="note"> + <p><strong>নোটঃ আপনি </strong> <a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/system">source code for the System app</a> গায়া গিতাব রেপুতে পেতে পারেন.</p> +</div> +<h2 id="কিভাবে_সিস্টেম_অ্যাপ_boots_up">কিভাবে সিস্টেম অ্যাপ boots up</h2> +<p>যখন গেটকো চেষ্টা করে সিস্টেম অ্যাপ শুরু করতে,ইহা সিস্টেম মেনিফেস্টোর ওয়েব অ্যাপ নির্দেশনা দেয় এবং ধারন করে System app, System's manifest.webapp এবং index.html ফাইল নির্দেশনা <code>launch_path</code> প্যারামেটারেparameter ( <code>launch_path</code><br> + সবসময় /index.html Gaia apps এর জন্য.) <code>index.html</code> লিঙ্কস সকল system-wide styles এবংJavaScript.একটি মোবাইল সিস্টেম পরিচালনা করতে System app অনেক সম্পদ ধারন করে ।</p> +<p>বুটিং প্রক্রিয়া শুরু হয়ে থাকে <code>bootstrap.js এ </code>,নিচের কোড সহঃ</p> +<pre class="brush: 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); +}</pre> +<p>The code works like so:</p> +<ol> + <li>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.</li> + <li>First, we prepare to launch the First Time Use (FTU) experience and Homescreen with the <code>safelyLaunchFTU() </code>function. As its name implies, FTU is only shown when the user starts Firefox OS for the first time.</li> + <li>When the user presses DONE inside the FTU, the <code>ftudone</code> custom event is fired, and <code>bootstrap.js</code> listens for and handles this event.</li> + <li>Next, we use the {{domxref("Settings") }} API (<code>navigator.mozSettings</code>) to set the <code>gaia.system.checkForUpdates</code> setting to <code>true</code>, meaning that the system will check for updates.</li> + <li>Finally, we run the customed <code>window.dispatchEvent</code>, via <code>CustomEvent</code>. 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.</li> +</ol> +<h2 id="Instantiable_modularization">Instantiable modularization</h2> +<p>The system itself is constantly evolving to achive better modularization and flexibility. From version 1.4 there’s an initiative underway to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=912952">refactor the system module as instantiable object</a>.</p> +<p>After all the above code has been run, the references to each system component in <code>bootstrap.js</code> will be in the following form:</p> +<pre class="brush: js">window.telephonySettings = new TelephonySettings(); +window.telephonySettings.start();</pre> +<p>The source code skeleton for <code>TelephonySettings()</code> would be:</p> +<pre class="brush: js">(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));</pre> +<p>This pattern helps modularize each system component and makes them more testable.</p> +<h2 id="Boot_up_and_shut_down_animations">Boot up and shut down animations</h2> +<p>This section explains how the System app controls the bootup and shut down animations. <code>init_logo_handler.js</code> and <code>sleep_menu.js</code> handle the system boot up and shut down animations.</p> +<h3 id="Boot_up_animations">Boot up animations</h3> +<p>The bootup animation action is not actually contained in the main bootup procedure, but is instead hooked by check <code>EventListeners</code>.</p> +<p>The boot up animation code in <code>init_logo_handler.js</code> looks like so:</p> +<p>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 <code>ftudone</code> or <code>ftuskip</code> event is fired. The <code>_appendCarrierPowerOn</code> method, contained in <code>init_logo_handler.js</code>, shows how Gaia prepares to launch the animation or boot logo by listening to the <code>DOMContentLoaded</code> event. The <code>logoLoader</code> is defined in <code>logo_loader.js</code>.</p> +<pre class="brush: js">var self = this; +document.addEventListener('DOMContentLoaded', function() { + self.carrierLogo.appendChild(self.logoLoader.element); + self._setReady(); +});</pre> +<p>Once the logo is prepared, the system calls the <code>_setReady()</code> method, which sets up a listener to listen for the special <code>mozChromeEvent</code> event with a type of <code>system-first-paint</code> to denote that the system is ready to paint on to the screen.</p> +<pre class="brush: js">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(); + } + } +});</pre> +<p>At this point the graphic element is now playing. Once a <code>ftuopen</code> or <code>ftuskip</code> event is fired, <code>init_logo_handler.js</code> invokes the default <code>handleEvent()</code> method that in turn triggers the <code>animate()</code> method to hide the animation with a fadeout transition effect.</p> +<pre class="brush: js">init: function ilh_init(logoLoader) { + window.addEventListener('ftuopen', this); + window.addEventListener('ftuskip', this); + ... +}, + +handleEvent: function ilh_handleEvent() { + this.animate(); +},</pre> +<h3 id="Shut_down_animations">Shut down animations</h3> +<p>Once the system is ready, long pressing the power button fires a <code>holdsleep</code> event, as defined in <code>hardware_button.js</code>. This script handles all of "hardware button pressed" events, including power (sleep), home, volume up/down, and so on.</p> +<pre class="brush: js">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); +};</pre> +<p>The shut down animation is handled by <code>sleep_menu.js</code>; this script listens for the <code>holdsleep</code> event and shows the menu dialog when it is fired.</p> +<pre class="brush: js">init: function sm_init() { + ... + window.addEventListener('holdsleep', this.show.bind(this)); + ... +}</pre> +<p>If user chooses to shut down the device via the restart or power off menu options, the <code>startPowerOff()</code> function is triggered, which in turn triggers the <code>LogoLoader()</code> function to handle displaying the shutdown animation.</p> +<pre class="brush: js">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; + ... + } +}</pre> +<h2 id="System_functions">System functions</h2> +<p>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.</p> +<h3 id="Statusbar_and_utility_tray">Statusbar and utility tray</h3> +<p>The System status bar and dropdown menu (Gaia calls it the <em>utility tray</em>; Android uses the term<em> notification bar</em>) are handled by <code>statusbar.js</code> and <code>utility_tray.js</code>. Inside the app's <code>index.html</code>, the status bar items are defined inside <code><div id="statusbar" data-z-index-level="statusbar"></code> whereas the utility tray items reside within the following structure:</p> +<pre class="brush: html"><div id="utility-tray" data-z-index-level="utility-tray"> + <div id="notifications-container"> + ... + </div> +</div></pre> +<p>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<br> + status, and keyboard input method (IME) switcher. The related handlers and styles are located in the <code>js</code>/ and <code>style/</code> directories.</p> +<h3 id="Special_app_launchers">Special app launchers</h3> +<p>The System app has three special launchers, which invoke separate web apps when required:</p> +<ul> + <li>The homescreen launcher: Runs the Homescreen app, which displays the homescreen when the user presses the <em>Home</em> button, or if a webapp crashes or is exited in some other way.</li> + <li>The lockscreen launcher: Runs the Lockscreen app, which displays the lockscreen every time a user turns on the screen.</li> + <li>The FTU launcher: Runs the FTU experience app. This is unique because every user will see the FTU experience the first time they run a new FirefoxOS device (or return their device to factory settings). In addition, the FTU webapp doesn't allow the user to use their Home button to escape out of the app.</li> +</ul> +<h3 id="Lockscreen">Lockscreen</h3> +<p>The main entrypoint for the Lockscreen app is <code>system/js/lockscreen.js</code>. From this screen the user can swipe unlock, trigger the secure camera and control the music player.</p> +<h3 id="Emergency_dialer">Emergency dialer</h3> +<p>The code for the emergency dialer is contained in the <code>gaia/apps/system/emergency-call/</code> 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.</p> +<h2 id="System-wide_UI">System-wide UI</h2> +<p>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<br> + dialog, and UI elements affecting window behavior, such as the software home button.</p> +<h3 id="z-index_level">z-index level</h3> +<p>with the System app's <code>index.html</code> file, many components are bundled with <code>data-z-index-level</code> attribute, for example:</p> +<pre class="brush: html"><div id="sleep-menu" data-z-index-level="sleep-menu"> + ... +</div></pre> +<p>The corresponding z-index-levels are defined inside <code>system/style/zindex.css</code>, for example:</p> +<pre class="brush: css">#screen > [data-z-index-level="sleep-menu"] { + z-index: 65536; +} + +... + +#screen > [data-z-index-level="app"] > .appWindow { + z-index: 3; +}</pre> +<p>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.</p> +<h3 id="The_software_home_button">The software home button</h3> +<p>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 <code>-moz-physical-home-button</code>, 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.</p> +<p>In <code>system/style/window.css</code> (and many other system style files), you will see this:</p> +<pre class="brush: css">@media not all and (-moz-physical-home-button) { + #screen:not(.software-button-disabled) > #windows > .appWindow { + bottom: 5rem; + } + }</pre> +<h3 id="Home_gesture_(slide_up_from_bottom_of_the_screen)">Home gesture (slide up from bottom of the screen)</h3> +<p>The home gesture is another hardware home button alternative; it can be enabled in <a href="/en-US/Firefox_OS/Debugging/Developer_settings">developer settings</a>, and the code that controls it is found in <code>system/js/home_gesture.js</code>. The gesture involves swiping from the bottom of the screen, and can be used to close apps, for example.</p> +<p>The gesture will be automatically enabled on Firefox OS tablet devices. The threshold defined in <code>gaia/shared/js/screen_layout.js</code> is used to detect whether the device is a tablet or not.</p> +<h3 id="Volume_warning_dialog">Volume warning dialog</h3> +<p>The code that controls the volume warning dialog is found in <code>system/js/sound_manager.js</code>. The volume warning dialog will appear when all of the following conditions are satisfied:</p> +<ul> + <li>The earphones are plugged in.</li> + <li>A volume threshold of 85dB is exceeded.</li> + <li>Content channel audio is playing.</li> +</ul> +<h3 id="SIM_PIN_unlock_dialog">SIM PIN unlock dialog</h3> +<p>The code that controls the SIM PIN unlock dialog is in <code>system/js/simcard_dialog.js</code> — 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 <code>manifest.webapp</code> file (which the System app does).</p> +<div class="note"> + <p><strong>Note</strong>: the SIM PIN unlock dialog is not shown while the phone is in Airplane mode.</p> +</div> +<p> </p> diff --git a/files/bn/archive/b2g_os/platform/গায়া/gaia_apps/video/index.html b/files/bn/archive/b2g_os/platform/গায়া/gaia_apps/video/index.html new file mode 100644 index 0000000000..b3ef03e80e --- /dev/null +++ b/files/bn/archive/b2g_os/platform/গায়া/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 +--- +<div class="summary"> + <p>ভিডিও অ্যাপ হল একটি সাধারণ ভিডিও প্লেয়ার যার সাহায্যে আপনার ফায়ারফক্স ওএস ডিভাইসের স্টোরেজ মিডিয়াতে থাকা যেকোন ভিডিও আপনি চালাতে পারবেন ।</p> +</div> +<p><img alt="video app screenshot with single video shown called ha ha size 13mb, 4 minutes long, mp4" src="https://mdn.mozillademos.org/files/6415/video-app.png" style="width: 320px; height: 480px; float: left; padding: 0 10px 10px 0;"></p> +<h2 id="সাধারণ_ব্যবহার">সাধারণ ব্যবহার</h2> +<p>যখন আপনি ভিডিও অ্যাপটি চালু করবেন , তখন ডিফল্টভাবে আপনি একটি বার্তা পাবেন যা আপনাকে বলবে যে , প্রদর্শন করার মত কোন ভিডিও পাওয়া যাচ্ছে না এবং আপনাকে কিছু ভিডিও যোগ করতে হবে ।ক্যামেরা অ্যাপ ব্যবহার করে ভিডিও ধারণ করে অথবা ডিভাইসটির স্টোরেজকে আপনার কম্পিউটারে ড্রাইভ হিসেবে মাউন্ট করে এবং তারপর ফাইল কপি করেও এটা করা যেতে পারে। অ্যাপটির নিচের দিকে দুইটি বাটন আছে : বাম দিকের বোতামটি আরো ভিডিও ধারন করা অথবা ছবি তোলার জন্য আপনাকে <span style="line-height: 1.5;">ক্যামেরা অ্যাপে নিয়ে যাবে এবং ডান দিকের বোতামটি আপনাকে গ্যালারীতে নিয়ে যাবে যেখানে ভিডিও অথবা ছবি দেখতে পারবেন । </span></p> +<p><br> + কম্পিউটার ব্যবহার করে ফাইল কপি করার জন্য , “Enable USB Storage” সক্রিয় করা আছে কিনা , নিশ্চিত করুন (Settings > Media Storage > Enable USB Storage)। যদি “Videos” ডাইরেক্টরি এখনো থেকে না থাকে , তাহলে এই নামটি ব্যবহার করেই একটি তৈরি করে ফেলুন ।<br> + <br> + ভিডিওসমূহ কোথায় সংরক্ষিত হবে তা আপনি ডিফল্ট মিডিয়া লোকেশনে “এসডি কার্ড” এবং "ইন্টারনাল" এর মধ্যে পরিবর্তনের মাধ্যমে পরিবর্তন করতে পারেন (inside Settings > Media Storage) । </p> +<div class="note"> + <p>দ্রষ্টব্য : যদি ফায়ারফক্স ওএস এ ভিডিও দেখতে আপনার সমস্যা হয় , তাহলে আপনার দুইটি বিষয় সম্পর্কে সচেতন হওয়া উচিত । প্রথমে , ফায়ারফক্স ওএস এর কিছু সংস্করণে বড় আকারের ভিডিওসমুহকে উপেক্ষা করা হয় - যা ভবিষ্যতের সংস্করণে ঠিক হয়ে যাবে । দ্বিতীয়ত , ফায়ারফক্স ওএস প্রায় সকল সাধারণ ভিডিও ফরমেট প্রদর্শন করে , কিন্তু সব করে না । কোন কোন ফরমেট সমর্থন করে , তা জানতে <a href="/bn-BD/docs/HTML/Supported_media_formats#Browser_compatibility">যে সব মিডিয়া ফাইল সমর্থন করে</a> এই নিবন্ধটি দেখতে পারেন ।</p> +</div> +<h2 id="ভিডিও_অ্যাপটির_পরিবর্তন_করা">ভিডিও অ্যাপটির পরিবর্তন করা</h2> +<p>TBD</p> diff --git a/files/bn/archive/b2g_os/platform/গায়া/gaia_apps/window_management/index.html b/files/bn/archive/b2g_os/platform/গায়া/gaia_apps/window_management/index.html new file mode 100644 index 0000000000..5f9fb1cb2a --- /dev/null +++ b/files/bn/archive/b2g_os/platform/গায়া/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 +--- +<div class="summary"> + <p><span class="seoSummary"> সাধারণ ভাবে,একটি উইন্ডো ম্যানেজার একটি আবেদনের অংশ যে, স্থানের এবং ভৌগলিকভাবে সাধারণ ক্ষেত্রে ব্যবহারকারীদের মধ্যে উইন্ডোর আবির্ভাব ঘটানো নিয়ন্ত্রণ করে।এই অনুচ্ছেদ দেখায় কিভাবে ফায়ারফক্স ওএস উইন্ডো ম্যানেজমেন্ট নিয়ন্ত্রণ করে।</span></p> +</div> +<p> ফায়ারফক্স ওএস এ , উইন্ডো ম্যানেজমেন্ট সিস্টেম অ্যাপের একটি অংশ ( সিস্টেম অ্যাপ পৃষঠার লিংক) এবং দায়িত্বশীলঃ</p> +<ul> + <li>অ্যাপ জীবনচক্র এবং মিথস্ক্রিয়া অ্যাপের মধ্যে</li> + <li> নকশা,জানানো,উদ্বোধন,দর্শন এবং সজীবতা/পরিবর্তন ইউ এল এর উপাদান সমূহ।</li> + <li> সিস্টেম ওয়াইড ইউ এল লজিক যেমন ওয়েবের কাজকর্ম,অ্যাপের বিজ্ঞাপন, এবং টাস্ক ম্যানেজার।</li> + <li>অ্যাপ এস্পেচিফিক ইউ এল ফিচার যেমন পপুস, রচনার কোনো অংশের বিষয়সমূহ ,বাতিল পৃষ্ঠা।</li> +</ul> +<p> এসব বিষয়ে বিস্তারিত যাওয়ার আগে,চলো দেখি কিভাবে গাইয়াতে অ্যাপ শুরু হয় ।</p> +<h2 id="কিভাবে_গায়াতে_অ্যাপ_শুরু_হয়েছে"> কিভাবে গায়াতে অ্যাপ শুরু হয়েছে</h2> +<h4 id="একটি_অ্যাপ_ফায়ারফক্স_os_এ_শুরু_হতে_পারেউদাহরণ_হিসেবে_অন্য_অ্যাপের_মধ্যে_দিয়ে_একটি_সিস্টেমের_তথ্য_তৈরির_মাধ্যমে_অথবা_হোমস্ক্রীনে_আইকন_এর_সঙ্কেত_দেয়ার_মাধ্যমে।"> একটি অ্যাপ ফায়ারফক্স os এ শুরু হতে পারে,উদাহরণ হিসেবে অন্য অ্যাপের মধ্যে দিয়ে একটি সিস্টেমের তথ্য তৈরির মাধ্যমে, অথবা হোমস্ক্রীনে আইকন এর সঙ্কেত দেয়ার মাধ্যমে। </h4> +<p><img alt="" src="https://mdn.mozillademos.org/files/7709/app-launch-flow.png" style="width: 728px; height: 414px; display: block; margin: 0px auto;"></p> +<p> ইভেন্টটি যা গেটকো ইজিনের এবং সিস্টেম অ্যাপের দ্বারা অ্যাপের উদ্বোধনের পরিচালনা নিয়ন্ত্রণ করে ,এবং নিচে আর ও বিস্তারিত ভাবে ব্যাখা করেছে ।</p> +<h3 id="অ্যাপ_গঠন"> অ্যাপ গঠন</h3> +<p> সকল গায়া ওয়েব পেজ হল <a href="/en-US/Marketplace/Publishing/Packaged_apps">packaged apps</a>,যেগুলো গুরুত্বপূর্ণ ভাবে সকল আবেদন সম্পদের জিপ ফাইল ধারণ করেঃHTML,CSS, JavaScript, images সুস্পষ্টতা ইত্যাদি। গায়াতে প্রতি ওয়েবঅ্যাপ নিচের প্রধান গঠনের মাধ্যমে পরিচালনা হয়েছেঃ</p> +<div class="code-block"> + <div class="highlight"> + <pre><code class="brush: bash">apps</code><code class="o">/</code><code class="p">[</code><code class="n">app</code> <code class="n">name</code><code class="p">]</code><code class="o">/</code> + <code class="o">-</code> <code class="n">js</code> + <code class="o">-</code> <code class="n">styles</code> + <code class="o">-</code> <code class="n">locales</code> + <code class="o">-</code> <code class="n">test</code> + <code class="o">-</code> <code class="n">index</code><code class="p">.</code><code class="n">html</code> + <code class="o">-</code> <code class="n">manifest</code><code class="p">.</code><code class="n">webapp</code> +</pre> + </div> +</div> +<p><img alt="" src="https://mdn.mozillademos.org/files/7497/app_load_process.png" style="width: 2262px; height: 1979px; margin: 0px auto; display: block;"></p> +<p>যখন হোম স্ক্রীনে থেকে গায়ার একটি অ্যাপ শুরু হয়েছে,গেটকো <code>manifest://[app name].gaiamobile.org:8080 এর একটি ইউ আর এল খোলার চেষ্টা করবে</code>, <code>manifest.webapp</code> ঐ স্থানে পারস্পারিক সম্পর্কের সৃষ্টি করে,তারপরে <code>launch_path</code> — যা <code>index.html</code> এ সূচিপত্র এর সুস্পষ্টতা ব্যাখাকরে পরিচালনা করে সকল ওয়েব অ্যাপ গঠনের জন্য। <code>index.html ফাইলে সকল প্রয়োজনীয় স্টাইল এবং</code>JavaScript<code> রাখা হবে।</code></p> +<div class="note"> + <p><strong>নোটঃ </strong>একটি অনাষ্ঠুনিক আলাপচারিতা হিসেবে,গায়া অ্যাপের জন্য সাধারণত <code>[app name].js</code> or <code>main.js</code>. হল প্রধান JavaScript এর ঢূকার পথ</p> +</div> +<h3 id="অ্যাপ_শুরুর_ধারা">অ্যাপ শুরুর ধারা</h3> +<p> ইভেন্টটি গেটকোর দ্বারা পাঠানো হয়।একবার গে্টকো প্রস্তুত হলে, অ্যাপ <code>windowFactory</code> <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/app_window_factory.js">system/js/app_window_factory.js</a> থেকে গ্রহন করবে একটি <code>webapps-launch</code> একটি অ্যাপের জন্য একটি ইভেন্ট,অথবা একটি <code>open-app </code>ইভেন্ট একটি ঝুলন্ত খবর সিস্টেম পরিচালনা করার জন্য।</p> +<pre class="brush: js">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); +});</pre> +<p><span style="background-color: #ffff00;">ইভেন্ট শাখায় পরিচালনায় বিস্তারিত, </span><code><span style="background-color: #ffff00;">this.launch(config)</span></code><span style="background-color: #ffff00;"> একটি অ্যাপ উইন্ডো অথবা একটি কাজকর্ম শুরু করবে।একবার অ্যাপটি বন্ধ হলে, </span><code><span style="background-color: #ffff00;">Appwindow</span></code><span style="background-color: #ffff00;"> গ্রহন করবে একটি </span><code><span style="background-color: #ffff00;">webapps-close</span></code><span style="background-color: #ffff00;"> ইভেন্ট।</span></p> +<p>প্রধান প্রক্রিয়া <code>launch()</code> নিয়মেঃ</p> +<pre class="brush: js">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(); +}</pre> +<p> প্রথম কোডটি দেখে যদি অ্যাপ এর মান বিদ্যমান থাকে এবং চেষ্টা করে পুনরায় পরিচালনা করে এটি গেটকোতে নিতে। অন্য দিকে যদি এটি একটি সাধারণ অ্যাপ হয়,আমরা তৎক্ষনাৎ অ্যাপের জন্য <code>AppWindow</code> তৈরি করি। অন্য বিশেষ ক্ষেত্র হল is the <code>homescreenLauncher</code> —এই ক্ষে্ত্রে আমরা প্রয়োজনীয় অপারেশন করি।</p> +<h3 id="অ্যাপ_উইন্ডো">অ্যাপ উইন্ডো</h3> +<p>অ্যাপের মত ওয়েব পৃষ্ঠা তৈরি করতে ফায়ারফক্স ও এস একটি বিশেষ <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Browser">mozBrowser API</a> ব্যবহার করে।উইন্ডো ম্যানেজমেন্টের ভিত্তি হল মাত্র একটি <code>mozBrowser</code> অ্যাপি র্যাপার ইনার আই ফ্রেম (উইনডো) পরিচালনা করতে। একটি বিশেষ ধরণের আইফ্রেম <code>moz-browser</code> তৈরি করা হয়েছে একটি আসল ব্রাউজার উইন্ডোর মত আইফ্রেম তৈরি করতে।</p> +<p><code>AppWindow</code> তৈরি করে,বহন করে ,এবং পরিচালনা করে একটি <code>mozBrowser</code> আইফ্রেম। <code>AppWindow পরিচালনা করবে সকল</code> <code>mozBrowser</code> ইভেন্ট <code>mozBrowser</code> আইফ্রেম নিজ থেকে বাতিল হওয়া এবং দেখায় নিযুক্ত ইউ এল ফিচার।</p> +<h2 id="অ্যাপ_জীবন_চক্রের_ম্যানেজমেন্ট">অ্যাপ জীবন চক্রের ম্যানেজমেন্ট</h2> +<p>অ্যাপের সম্পুর্ন জীবন চক্র নিচেঃ</p> +<p> অ্যাপ শুরু</p> +<ul> + <li>সিস্টেম ডি ও এম ট্রী তে আই ফ্রেম পরিশেষে যোগ করা</li> + <li>শুরু করা অ্যাপ এর সজীবতার উদ্বোধন</li> + <li>অ্যাপ খোলা</li> + <li>অ্যাপের সজ়ীবতা বন্ধ করা</li> + <li>অ্যাপ বন্ধ</li> + <li>ডি ও এম ট্রী থেকে আইফ্রেম সরানো</li> + <li>অ্যাপ স্থাপন</li> +</ul> +<h3 id="অ্যাপের_উদ্বোধন">অ্যাপের উদ্বোধন</h3> +<p> যখন একজন ব্যবহারকারী আইকন খুলে হোমস্ক্রীনের উপর,হোমস্ক্রীন <a href="/en-US/docs/Web/API/Navigator.mozApps">mozApps API</a> ব্যবহার করে গেকো ইঞ্জিনকে প্রতিনিধিত্বকারী অ্যাপ খুলতে বিজ্ঞপ্তি দিতে।যখন গেকো প্রস্তুত ,এটি সিস্টেমঅ্যাপে উপযুক্ত ইভেন্ট পাঠায়।</p> +<h3 id="অ্যাপ_ধ্বংস"> অ্যাপ ধ্বংস</h3> +<p> অ্যাপ নিচের বিষ্যের কারণে ধ্বংস হতে পারেঃ</p> +<ul> + <li> একটি অ্যাপ বিধস্ত হয়</li> + <li> <a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Debugging_OOMs#Process_priorities">OOM killer</a> ধ্বংস করে এটি</li> + <li> টাস্ক ম্যানেজারের মাধ্যমে অ্যাপটি বন্ধ হয়</li> + <li><code>window.close()</code> বাতিল হয়েছে</li> +</ul> +<p>কার্যকারী অ্যাপের জন্য ,সজীবতার কার্যক্রম বন্ধ হওয়ার পরে,ডি ও এম থেকে ধ্বংস্কারী অ্যাপের আইফ্রেম সরিয়ে ফেলা হয়ে থাকে। অকার্যকারী অ্যাপের জন্য,তাদের ধ্বংস করার পরে তৎক্ষনাৎ আইফ্রেম সরিয়ে ফেলা হয়।</p> +<p> অ্যাপ গুলো বিঘ্নিত হবে নিচের বিষ্যের কারণেঃ</p> +<ul> + <li>ওয়েব কার্যক্রমের জন্যঃযখন কার্যকারী কলার খুলা হয়ে থাকে</li> + <li>পপুসঃযখন উইন্ডো ওপেন কলার খোলা হয়ে থাকে</li> + <li>অ্যাপঃকিছুই করেনা</li> +</ul> +<h3 id="পুনরায়_অ্যাপ_শুরু_করা">পুনরায় অ্যাপ শুরু করা</h3> +<p>অ্যাপগুলো পুনরায় নিচেরভাবে শুরু করতে হবেঃ</p> +<ul> + <li> হোমস্ক্রীন অ্যাপঃযখন হোম বোতাম চাপ দেয়া হয়ে থাকে</li> + <li> জোম্বী অ্যাপ পুনরায় ব্যবহারের উপযোগী করা হয়ে থাকে একই ইউ আর এল দিয়ে যদি টাস্ক ম্যানেজার থেকে এটি খুলে অথবা কিনারের অংগভঙ্গি থেকে সরিয়ে ফেলা হয়।(অভিজ্ঞতাসম্পুর্ন ফিচার)</li> +</ul> +<h2 id="অ্যাপ_কিভাবে_প্রতিদান_দিয়ে_থাকে">অ্যাপ কিভাবে প্রতিদান দিয়ে থাকে</h2> +<p>যখন আমরা একটি অ্যাপ শুরু করি, স্ক্রীনটি নিচের ব্লকের মাধ্যমে প্রতিদান দিয়ে থাকবে</p> +<ul> + <li> সিস্টেম হেডার</li> + <li>অ্যাপ আইফ্রেম</li> + <li>নিচের র্যাপার বার(যদি ক্রোমিতাম ব্রাউজার মোডে)</li> +</ul> +<p><img alt="" src="https://mdn.mozillademos.org/files/7711/app-window-layout.png" style="width: 393px; height: 348px; display: block; margin: 0px auto;"></p> +<h3 id="অ্যাপের_নকশা">অ্যাপের নকশা</h3> +<p> অ্যাপ ফ্রেমের প্রধান বহনকারী হল নিচেঃ</p> +<pre class="brush: html"><iframe id="browser2" mozallowfullscreen="true" mozbrowser="true" remote="true"... +... src="", data-url="" data-frame-type="window" data-frame-origin="..."> +</iframe></pre> +<p> আইফ্রেম ধারণ করেঃ</p> +<ul> + <li>শুরুর পথ (<code>data-url</code>, <code>data-frame-origin</code>)</li> + <li>মোব ব্রাউজার আইফ্রেম আরোপকরা (<code>mozallowfullscreen="true"</code>, <code>mozbrowser="true"</code>)</li> + <li>ধারণকারী,উপরে শোয়া, অ্যাপের বিশেষ ইউ এল</li> +</ul> +<h3 id="অ্যাপ_উইন্ডো_রিসাইজিং">অ্যাপ উইন্ডো রিসাইজিং</h3> +<p>অ্যাপ উইন্ডো কিছু ঘটনার কারণে রিসাইজিং হয়ে থাকবেঃ</p> +<ul> + <li> সিস্টেম অ্যাপ উদ্বোধনের পরিবর্তনের আগ পর্যন্ত পুনরায় গঠন হবে না।</li> + <li>সাধারণ অ্যাপের জন্য,পুনরায় গঠন ঘটে যখনঃ + <ul> + <li> সিস্টেম অ্যাপ পুনরায় গঠন করে</li> + <li>কীবোর্ড প্রানবন্ততা খোলা/বন্ধ শেষ করে</li> + <li> স্টাটাস বার পরিবর্তন করে</li> + <li><code>window.resizedBy()</code> or <code>window. পুনরায় গঠন করা resizeTo()</code>তে বলা হয়েথাকে is called</li> + <li>সফট ওয়ার হোম বোতাম টগল করা হয়ে থাকে</li> + </ul> + </li> +</ul> +<p><img alt="" src="https://mdn.mozillademos.org/files/7713/app-area.png" style="width: 715px; height: 305px; margin: 0px auto; display: block;"></p> +<p>সারাংশে,উইন্ডো সাইজ আক্রান্ত হয়ে থাকেঃ</p> +<ul> + <li> উদ্বোধন ধাপ</li> + <li>কীবোর্ড ধাপ</li> + <li> আকর্ষন স্ক্রীন ধাপ(কল,খবর,ইত্যাদি)</li> + <li>ক্রমিয়ামের তরলতার ধাপে</li> + <li>সম্পুর্ণ স্ক্রীন ধাপ <code>manifest.fullscreen</code> / <code>parentWindow</code></li> + <li>সফট ওয়ার হোম বোতাম ধাপ দ্বারা</li> +</ul> +<p><img alt="" src="https://mdn.mozillademos.org/files/7715/app-area2.png" style="width: 687px; height: 330px; margin: 0px auto; display: block;"></p> +<h3 id="অ্যাপ_উইন্ডো_ওরিয়েন্টেশন"> অ্যাপ উইন্ডো ওরিয়েন্টেশন</h3> +<p> অ্যাপের ওরিয়েন্টেশন প্রতিটি আলাদা অ্যাপের থেকে নিয়ন্ত্রন করে যেতে পারে,অথবা সিস্টেমের দ্বারা বৈশ্বিকভাবে।তুমি অ্যাপে ওরিয়েন্টেশন সেট করতে পারো <code>manifest.webapp</code> নথিতে <code>orientation</code> দ্বারা সঠিকভাবে,উদাহরণ হিসেবেঃ</p> +<pre class="brush: json">"orientation": "default",</pre> +<p>তুমি আরো সক্ষম ওরিয়েন্টেশন অ্যাপি লক অথবা আন লক করতে ওরিয়েন্টেশনঃ</p> +<pre class="brush: js">screen.mozLockOrientation([‘portrait-primary’]); + +screen.mozUnlockOrientation();</pre> +<p>কিছু প্যারামিটারের মান আছে যা ব্যবহার করা যেতে পারে ওরিয়েন্টেশন কে বাধা দিতেঃ</p> +<ul> + <li><code>default</code>: সিস্টেম বাধাগ্রস্ত ওরিয়েন্টেশন</li> + <li><code>portrait</code>: স্ক্রীনের ছবিতে প্রতিদান দিতে বাধা প্রদান করা</li> + <li><code>landscape</code>: সমতলে স্ক্রীনে প্রতিদান দিতে বাধা দেয়া</li> +</ul> +<p> আরো বিস্তারিত পাওয়া যায় <a href="/en-US/docs/Web/API/Screen.lockOrientation">Screen.lockOrientation</a> তে উল্লেখ, এবং তুমি <a href="https://github.com/mozilla-b2g/gaia/blob/master/test_apps/uitest/js/API/orientation.js">gaia/test_apps/uitest/js/API/orientation.js</a> তে একটি উদাহরণ দেখতে পারো।</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7717/app-orientation.png" style="width: 745px; height: 530px; margin: 0px auto; display: block;"></p> +<h3 id="অ্যাপ_দর্শন"> অ্যাপ দর্শন</h3> +<p>কেবল যখন স্ক্রীন বন্ধ হয়ে যায় সিস্টেম অ্যাপটি পিছনের দিকে যায় যখন সাধারন কিছু বিষয়ের উপর নির্ভর করে অ্যাপগুলো পিছনেরদিকে যায়ঃ</p> +<ul> + <li>শ্রবণ প্রতিযোগিতা</li> + <li> নীতি প্রক্রিয়া</li> + <li>প্রতিদান দেয়া</li> +</ul> +<div class="note"> + <p><strong>নোটঃপৃষ্ঠা দর্শন আচ্ছাদিত থাকে যখন পূর্ববর্তী আইফ্রেম অকার্যকরী থাকে।</strong></p> +</div> +<p> অ্যাপগুলো সবসময় সুস্পষ্টভাবে থাকে যখনঃ</p> +<ul> + <li> অ্যানিমেশন শুরু খোলে</li> + <li> অ্যানিমেশন শেষ হওয়া সরিয়ে ফেলে</li> + <li> লক স্ক্রীন কে আনলক করা হয়ে থাকে</li> +</ul> +<p> অ্যাপ সবসময় পিছনেরদিকে থাকেঃ</p> +<ul> + <li> যখন বন্ধ হওয়া অ্যানিমেশন শেষ করে</li> + <li> ৩ সেকেন্ড পরে কলস্ক্রীন দৃশ্যমান হয়</li> + <li> যখন স্ক্রীনটি বন্ধ</li> +</ul> +<p> উপরের নিয়মের কিছু ব্যতিক্রম আছেঃ</p> +<ul> + <li> সাধারণ চ্যানেলে অডিও বাজানোর সাথে কার্যকরী অ্যাপ</li> + <li>ওয়েব কার্যক্রমে অ্যাপ কলিং</li> + <li>অ্যাপগুলো খোলা <code>window.open('', '', 'dialog')</code></li> +</ul> +<h3 id="অ্যাপ_উইন্ডো_অ্যানিমেশন_এবং_পরিবর্তনমূলক"> অ্যাপ উইন্ডো অ্যানিমেশন এবং পরিবর্তনমূলক</h3> +<p>গায়া উইন্ডো ম্যানেজার আরো অ্যাপ উইন্ডো অ্যানিমেশন প্রদান করে এবং একটি স্লিকের ব্যবহারকারী অভিজ্ঞতা তৈরি করার জন্য পরিবর্তন করে।</p> +<p> অ্যাপ উইন্ডো অ্যানিমেশন এবং পরিবর্তন কিছু ধাপের মাধ্যমে পরিচালনা করা হয়ে থাকেঃ</p> +<ul> + <li><code>displayedApp</code> — বর্তমান অ্যাপ</li> + <li><code>runningApps</code> / <code>numRunningApps</code> — চলমান অ্যাপের সেট</li> + <li><code>openFrame</code> / <code>closeFrame</code> —খোলা/বন্ধ অ্যানিমেশনের জন্য পরিবর্তনমূলক ফ্রেম</li> +</ul> +<p>যখন <code>setDisplayedApp()</code> প্রক্রিয়া কল করা হয়, নিচের চিত্রের দ্বারা চিত্রের দ্বারা ব্যাখার মাধ্যমে অ্যাপটি শুরু করা হবে।</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7719/app-animations-state-manchine.png" style="width: 704px; height: 358px; display: block; margin: 0px auto;"></p> +<p> ফায়ারফক্স ও এস অ্যানিমেশন ধারা পরিচালনা করতে কিছু বুদ্ধি নিমগ্ন আছেঃ</p> +<ul> + <li> একটি অ্যাপ খোলার আগে,আমাদের পিছনের ধাপে থেকে এর পুনরূদ্ধার নিশ্চিত করা প্রয়োজন।আমরা সাধারণত ১ x ১ স্ক্রীনশট নিই বল প্রয়োগ করে পুনরায় আঁকতে।</li> + <li> অ্যাপটি খোলার জন্য প্রস্তুত হওয়ার পরে, আমরা পরবর্তী অ্যাপের উদ্বোধন অ্যানিমেশনের নৈপূন্যতা প্রদর্শন করি এবং একই সময়ে বর্তমান অ্যাপের বন্ধ অ্যানিমেশন ।</li> + <li> আমরা কোড চালাই অ্যাপ খোলা এবং বন্ধ উভয় সময়ে স্ক্রীন উদ্বোধনের লক/আনলক করতে।</li> + <li> কেবল যদি একটি অ্যাপ একবার পুনর্গঠন হয়ে গেলে উদ্বোধনে আমরা অ্যাপটির নৈপূণ্যতা দেখাই।অন্যদিকে,আমরা পুনরায় গঠন ধাপ বাদ দিয়ে যাই।</li> + <li> আমরা পৃষ্ঠা দর্শন পরিবর্তন করতে পারি আবারএকটি ১ x ১ স্ক্রীনশট নেয়ার মাধ্যমে (উপরে দেখো)</li> +</ul> +<p><img alt="" src="https://mdn.mozillademos.org/files/7721/app-switching-flow.png" style="width: 530px; height: 258px; display: block; margin: 0px auto;"></p> +<h2 id="সুনির্দিষ্ট_UI_অ্যাপ_উইন্ডো"> সুনির্দিষ্ট UI অ্যাপ উইন্ডো</h2> +<p> কিছু ইউএল উপাদান আছে যেগুলো কেবল সুনির্দিষ্ট অ্যাপের সাথে সংযুক্ত,যেমন ক্রোমিয়াম ব্রাউজার, মোডাল ডায়ালগ,সূচিপত্রের মেন্যু,পপুস এবং বাতিল পৃষ্ঠাগুলো।</p> +<p>চলো এগুলোর কিছু আলোচনা করি।</p> +<h3 id="মোডাল_ডায়ালগ"> মোডাল ডায়ালগ</h3> +<p> ফায়ারফক্স ডেক্সটপে, যদি তুমি ব্রাউজার ডেভলপার কনসোল খোলো এবং নির্দেশ প্রবেষ করো যেমন <code>alert()</code>, <code>confirm()</code>,এবং <code>prompt()</code>,তুমি একটি কেন্দ্রীয় ডায়ালগ স্ক্রীনের উপর পাবে যা সূচিকে বন্ধ করে।ফায়ারফক্স ওএস এর সমতুল্যতা হল মোডাল ডায়ালগ।<br> + <br> + <img alt="" src="https://mdn.mozillademos.org/files/7723/modal-dialogs.png" style="width: 715px; height: 357px; margin: 0px auto; display: block;"></p> +<h3 id="প্রসংগ_মেন্যু_ডায়ালগ"> প্রসংগ মেন্যু ডায়ালগ</h3> +<p> প্রসংগ মেন্যু(অথবা লম্বা চাপের মেন্যু) মোবাইল ডেভেলপারদের কাছে পরিচিত ধারণা।সাধারণ অ্যাপের নকশায়,প্রায়শই ব্যবহিত ক্রিয়া ব্যবহার কারীদের কাছে দেখানো উচিত যাতে তারা সহজে অ্যাপ নিয়ন্ত্রন করতে পারে।প্রসংগ মেন্যু ক্রিয়া বহনের একটি স্থান দেয় যা তৎক্ষনাৎ ইউ আই স্থাপন করতে পারে না কিন্তু এখন ও সহজে পাওয়া যায়। <br> + <br> + <img alt="" src="https://mdn.mozillademos.org/files/7725/context-menu-dialogs.png" style="width: 722px; height: 360px; display: block; margin: 0px auto;"></p> +<p> </p> +<h2 id="খাঁটি(https)ডায়ালগ">খাঁটি(https)ডায়ালগ</h2> +<p><a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/app_authentication_dialog.js">system/js/app_authentication_dialog.js</a> তে ব্যাখা করা।</p> +<h3 id="মান_বাছাইসময়তারিখ_ডায়ালগ"> মান বাছাই,সময়,তারিখ ডায়ালগ</h3> +<p> <a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/system/js/value_selector">system/js/value_selector/</a> তে ব্যাখা করা।</p> +<h3 id="অনুমতি_ডায়ালগ"> অনুমতি ডায়ালগ</h3> +<p> <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/permission_manager.js">system/js/permission_manager.js</a> তে এবং <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/media_recording.js">system/js/media_recording.js</a> তে ব্যাখা ( ব্যবহার ট্রে প্যানেলের জন্য) </p> +<h2 id="বিশেষ_অ্যাপস"> বিশেষ অ্যাপস</h2> +<p> কিছু অ্যাপের দরকার একটি বিশেষ <code>appWindow জিনিস যা তারা বহন করে এমন কিছু ফাঙ্কশন</code> সংযোগ স্থাপনের জন্য।উদাহরন দেয়াঃ</p> +<ul> + <li> হোমস্ক্রীন</li> + <li> এফ টি ইউ</li> + <li> কীবোর্ড</li> + <li> খরচ নিয়ন্ত্রণ</li> + <li> নিরাপদ ক্যামেরা</li> + <li> লক্স্ক্রীন</li> +</ul> +<h3 id="sect1"> </h3> +<h2 id="Child_উইন্ডো_ম্যানেজমেন্ট">Child উইন্ডো ম্যানেজমেন্ট</h2> +<p> Child অ্যাপ উইন্ডো প্রত্যক্ষ অথবা পরোক্ষ ভাবে খোলা হয়ে থাকে অন্যান্য অ্যাপ/পৃষ্ঠা দ্বারা।উদাহরণ গূলো হলঃ</p> +<ul> + <li>আকর্ষন উইন্ডো</li> + <li> পপুপ উইন্ডো</li> + <li>কার্যকরী উইন্ডো</li> + <li> বিশ্বাসী ইউ আই/বিশ্বাসী উইন্ডো</li> +</ul> +<p> যখন একটি ক্ষুদ্র উইন্ডো সাধারনভাবে শেষ হয়,এর প্রধান উইন্ডো পুনরায় খোলা উচিত।কিছু ক্ষুদ্র উইন্ডো এর অংশ অন্য ক্ষুদ্র উইন্ডো তে থাকতে পারে। প্রসেস প্রায়ওরিটি ম্যানেজমেন্ট হল একটি প্রধান বিষয় প্রধান এবং ক্ষুদ্রের মধ্যে।</p> +<h2 id="আকর্ষণ_উইন্ডো"> আকর্ষণ উইন্ডো</h2> +<p> আকর্ষন উইন্ডো তোমার আকর্ষন পেতে ব্যবহার হয়ে থাকেঃ</p> +<ul> + <li> কলস্ক্রীন-ডায়ালার</li> + <li> আলার্ম স্ক্রীন-ঘড়ি</li> + <li> অনুমতি নিশ্চিত</li> +</ul> +<p> বর্তমানে ঐ সব আকর্ষন উইন্ডো ভুলে ব্যবহার করা হইয়ে থাকে জোর দেয়া( প্রাথমিক পরটড়াঈট )ওরিয়েন্টেশনশ্বাসী বিস</p> +<h2 id="বিশ্বাসী_UI">বিশ্বাসী UI</h2> +<h2 id="sect2"> </h2> +<p> পারসোনা এবং mozPay অ্যাপি ব্যবহার করে বিশ্বাসী UI।তারা ব্যবহার করে বিশেষ আকারঃ৮০%।হোমস্ক্রীন বিশেষ ভাবে দেখায় যখন বিশ্বাসী ইউ আই চলমান থাকে।<br> + <br> + <img alt="" src="https://mdn.mozillademos.org/files/7727/trusted-ui.png" style="width: 737px; height: 516px; display: block; margin: 0px auto;"></p> +<h2 id="ইতিহাস_ম্যানেজমেন্ট"> ইতিহাস ম্যানেজমেন্ট</h2> +<p> এই অংশে আমরা কিছু উপাদানের দিকে তাকাবো যা ফায়ারফক্স ও এস এর ইতিহাস ম্যানেজমেন্ট পরিচালনা করে।</p> +<h3 id="টাস্ক_ম্যানেজার"> টাস্ক ম্যানেজার</h3> +<p> টাস্ক ম্যানেজার (কার্ড ভিউ ) লম্বা চাপের হোম বাটনের দ্বারা আগ্নেয়াস্ত্র হিসেবে ব্যবহার হতে পারে।এটি অ্যাপের ইতিহাস ডিভাইসে দেখাতে পারে,এবংএকটি অ্যাপের কাযকর্ম ধৰংস করতে সক্ষম।</p> +<p> ফায়ারফক্স ও এস ভার্সন ২.০, এখানে একটি অভিজ্ঞতা সম্পন্ন ফিচার আছে জাম্বল অ্যাপ বর্তমান রাখতে এবং দেখায় যে তারা এখন ও বিদ্যমান।</p> +<h3 id="ওয়েব_কার্যক্রম_অন্যত্র"> ওয়েব কার্যক্রম অন্যত্র</h3> +<p> ইনলাইন এক্টিভীটিস একটি নতুন উল্লেখ পৃষ্ঠার আর সূচনা করেছে কার্যক্রমে ডাটা প্রদান করতে।<br> + <br> + ঊইন্ডো এক্টীভীটী বিদ্যমান অ্যাপ পুনরায় ব্যবহার করবে ডাটা এক্টীভীটি গ্রহন করতে।</p> +<h3 id="শেষের_ভঙ্গিমা_(অভিজ্ঞতা_সম্পন্ন)"> শেষের ভঙ্গিমা (অভিজ্ঞতা সম্পন্ন)</h3> +<p> অভিজ্ঞতাসম্পন্ন ইদজ গেসচার ফিচার ফায়ারফক্স ওএস ২.০ + এর ডেভেলপার মুডে সহজপ্রাপ্ত,এবং ফিঙ্গার সুইপ ডান/বামে ব্যবহার করতে তোমাকে অনুমোদন দেয় অ্যাপ এবং ওয়েব পৃষ্ঠার মধ্যে নেভিগেট করতে ডিভাইসের শেষ থেকে ।</p> +<h4 id="কিভাবে_পরের_অ্যাপ_দেখতে_পছন্দ_করা_যায়">কিভাবে পরের অ্যাপ দেখতে পছন্দ করা যায়?</h4> +<ul> + <li>একটীভীটী অ্যাপের ক্ষুদ্র উইন্ডো</li> + <li> শুরুর সময় নতুন</li> + <li> পরবর্তী অ্যাপ স্টাক এর প্রধান উইন্ডো খুজে বের কর</li> +</ul> +<h4 id="কিভাবে_আগের_অ্যাপ_পছন্দ_করতে_হয়"> কিভাবে আগের অ্যাপ পছন্দ করতে হয়?</h4> +<ul> + <li> কার্যকরী অ্যাপের প্রধান উইন্ডো</li> + <li>শুরুর সময় পুরানো</li> + <li>আগের অ্যাপ স্টাকের আসল উইন্ডো খুজে বের করা</li> +</ul> +<h3 id="স্ক্রীনশট_ম্যানেজমেন্ট">স্ক্রীনশট ম্যানেজমেন্ট</h3> +<h4 id="টাস্ক_ম্যানেজারের(কার্ড_দেখা)_মাধ্যমে_স্ক্রীন_শট_ব্যবহার_করা_হয়ে_থাকে_ইতিহাসে_অ্যাপ_কি_দেখায়_তা_দেখতে।একটি_অ্যাপের_স্ক্রীনশট_নেয়া_হয়ে_থাকে_যখন_অ্যাপটির_সজীবতা_বন্ধ_শেষ_হয়েছে।">টাস্ক ম্যানেজারের(কার্ড দেখা) মাধ্যমে স্ক্রীন শট ব্যবহার করা হয়ে থাকে ইতিহাসে অ্যাপ কি দেখায় তা দেখতে।একটি অ্যাপের স্ক্রীনশট নেয়া হয়ে থাকে যখন অ্যাপটির সজীবতা বন্ধ শেষ হয়েছে।</h4> +<h2 id="আরো_দেখুন">আরো দেখুন</h2> +<p><a href="http://alivedise.github.io/blog/2013/02/23/from-browser-to-browser/">From Browser to Browser</a></p> 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..251bd997e1 --- /dev/null +++ b/files/bn/archive/b2g_os/platform/গায়া/index.html @@ -0,0 +1,61 @@ +--- +title: গায়া +slug: Archive/B2G_OS/Platform/গায়া +tags: + - B2G + - Gaia + - Mobile + - NeedsReview +translation_of: Archive/B2G_OS/Platform/Gaia +--- +<p>গায়া <a href="/bn-BD/docs/Mozilla/%E0%A6%AB%E0%A6%BE%E0%A7%9F%E0%A6%BE%E0%A6%B0%E0%A6%AB%E0%A6%95%E0%A7%8D%E0%A6%B8" title="Mozilla/Firefox_OS">Firefox OS</a> এর একটি ব্যবহারকারী ইন্টারফেস লেভেল। ফায়ারফক্স ওএস চালু হবার পর স্ক্রিনের সব কিছুই গায়ার মাধ্যমে সম্পাদিত হয়, যার মধ্যে আছে lock screen, home screen, dialer, এবং অন্যান্য অ্যাপ্লিকেশন সমূহ। গায়া সম্পূর্নভাবে লেখা হয়েছে <a href="/bn-BD/docs/HTML" title="HTML">HTML</a>, <a href="/bn-BD/docs/CSS" title="CSS">CSS</a>, এবং <a href="/bn-BD/docs/JavaScript" title="JavaScript">JavaScript</a>-এ। অপারেটিং সিস্টেম এবং হার্ডওয়্যারের সাথে গায়ার সংযোগ ঘটে শুধুমাত্র আদর্শ ওয়েব API সমূহের মাধ্যমে, যা <a href="/bn-BD/docs/Gecko" title="Gecko">Gecko</a> সম্পাদন করে।</p> + +<p>এটির ডিজাইন এর ফলে গায়া ফায়ারফক্স ওএস ছাড়াও অন্যান্য অপারেটিং সিস্টেম এবং ওয়েব ব্রাউজার-এ চালাতে সক্ষম (যদিও নির্ভর করবে ব্রাউজার এর কার্যক্ষমতার ওপর)।</p> + +<p>গায়ার পাশাপাশি ইন্সটলকৃত তৃতীয় পক্ষের অ্যাপ্লিকেশন সমূহ গায়ার মাধ্যমে চালু করা যাবে।</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">গায়ার নথিপত্র</h2> + + <dl> + <dt><a href="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Gaia/Introduction_to_Gaia" title="Mozilla/Boot_to_Gecko/Introduction to Gaia">গায়া পরিচিতি</a></dt> + <dd>ফায়ারফক্স ওএস চালিত ডিভাইসের জন্য গায়া একটি ইউজার ইন্টারফেস অ্যাপলিকেশন; এটি ফায়ারফক্স ওএস এ চলা একটি ওয়েব অ্যাপ্লিকেশন। এই গাইডে গায়া কে আরো বিস্তারিত ভাবে বর্ননা করা হয়েছে।</dd> + <dt><a href="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Gaia/Gaia_apps">গায়া অ্যাপ সমূহ</a></dt> + <dd>গায়া পরিবারের মধ্যে যেসব অ্যাপ ডিফল্ট ভাবে পাওয়া যায়, সেগুলোর ব্যবহার সম্পর্কিত টিপস এবং কিভাবে সেগুলো মডিফাই করবেন, তার সব তথ্য এখানে পাবেন।</dd> + <dt><a href="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking" title="Mozilla/Boot_to_Gecko/Gaia hacking guide">গায়া হ্যাকিং গাইড</a></dt> + <dd>এই গাইডটিতে গায়া ইন্টারফেস হ্যাক এবং মডিফাই করার জন্য নির্দেশনা আছে।</dd> + <dt><a href="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Gaia/Build_System_Primer" title="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Gaia/Build_System_Primer">গায়া বিল্ড সিস্টেম প্রাইমার</a></dt> + <dd>বিল্ডের জন্য আসল কাজের বেশিরভাগই করে থাকে build/ সাবডিরেক্টরির মধ্যে থাকা স্ক্রিপ্ট গুলো।</dd> + <dt><a href="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking_Tips_And_FAQ" title="/bn-BD/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking_Tips_And_FAQ">গায়া হ্যাকিং টিপস এবং সচরাচর জিজ্ঞাসিত প্রশ্ন</a></dt> + <dd>গায়া হ্যাক সংক্রান্ত সহায়ক বিভিন্ন টিপস ও সচরাচর জিজ্ঞাসিত প্রশ্নের তালিকা।</dd> + </dl> + + <p><span class="alllinks"><a href="/bn-BD/docs/tag/Gaia" title="tag/B2G">সব দেখুন...</a></span></p> + </td> + <td> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">সংশ্লিষ্ট নথি </h2> + + <ul> + <li><a href="/bn-BD/docs/Mobile" title="Mobile">মোবাইল</a></li> + <li><a href="/bn-BD/docs/Web" title="/bn-BD/docs/Web">ডেভেলপারদের জন্য ওয়েব প্রযুক্তি</a> + <ul> + <li><a href="/bn-BD/docs/HTML" title="HTML">HTML</a></li> + <li><a href="/bn-BD/docs/CSS" title="CSS">CSS</a></li> + <li><a href="/bn-BD/docs/JavaScript" title="JavaScript">JavaScript</a></li> + </ul> + </li> + <li><a href="/bn-BD/docs/WebAPI" title="/bn-BD/docs/WebAPI">WebAPI</a></li> + </ul> + + <h2 class="Tools" id="Resources" name="Resources">রিসোর্স সমূহ</h2> + + <ul> + <li><a href="/bn-BD/docs/Mozilla/Firefox_OS/Architecture" title="Mozilla/Firefox_OS/Architecture">ফায়ারফক্স ওএস আর্কিটেকচার এর সারসংক্ষেপ</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/bn/archive/b2g_os/platform/গায়া/introduction_to_gaia/index.html b/files/bn/archive/b2g_os/platform/গায়া/introduction_to_gaia/index.html new file mode 100644 index 0000000000..16251af688 --- /dev/null +++ b/files/bn/archive/b2g_os/platform/গায়া/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 +--- +<div class="summary"> + <p>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 <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/HTML" title="en/HTML">HTML</a>, and <a href="/en/CSS" title="en/CSS">CSS</a>.</p> +</div> +<h2 id="গায়া_স্ক্রিন_লক">গায়া স্ক্রিন লক</h2> +<p>গায়া লক স্ক্রীনে নেটওয়ার্ক বার, সময় ও তারিখ এবং একটি স্লাইডবার আছে যা বাবহারকারির ফোন আনলক করে অথবা ছবি তোলার জন্য ক্যামেরা চালু করে। যদি বাবহারকারি পাসকোড সেট করেন তবে লক স্ক্রীন এ পাসকোড প্রবেশ করতে হবে।</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7611/gaia-lockscreen.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p> +<p>উল্লেখ্য যে কোনো কোনো ডিভাইসে শুরু থেকেই পাসকোড দেয়া থাকে; এক্ষেত্রে আনলক করার জন্য "0000" পিন ব্যবহার করতে হবে।</p> +<h2 id="গায়া_ডিফল্ট_ইন্টাফেস">গায়া ডিফল্ট ইন্টাফেস</h2> +<p>গায়া ডিফল্ট ইন্টেরফেস, নিম্নে প্রদত্ত, অন্যান্য সব স্মার্টফোনের মতই।</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7613/device-2013-01-24-163623.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p> +<p>এই ছবিটি স্পষ্টতই অপারেটিং সিস্টেমের প্রিরিলিসড ভারসন এর। উপরের স্টাটাস বারটি নেটওয়ার্ক (অথবা নেটওয়ার্ক ছাড়া ডিভাইসে "No SIM card" ) ও Wifi এর সিগন্যাল, ব্যাটারি লেভেল এবং বর্তমান সময় নির্দেশ করে।</p> +<p>ডিসপ্লের মাঝের অংশে বিভিন্ন অ্যাপ্লিকেশানের আইকন দেখা। আপনি চাইলে <a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps">Gaia apps</a> পেজ থেকে আরও অ্যাপ নামাইতে পারেন।</p> +<p>স্ক্রীনের নিচের দিকের ডকে সর্বোচ্চ ব্যবহৃত অ্যাপ্লিকেশানগুলো থাকবে। আপনি চাইলে মাঝের অ্যাপ থেকে ড্রাগ ড্রপ করতে পারবেন।</p> +<h2 id="অারও_দেখুন" style="">অারও দেখুন</h2> +<ul> + <li><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps">Gaia apps</a>: এই পেজে সকল অ্যাপ সম্পর্কে অধিকতর তথ্য দেয়। যেমনঃ অ্যাপ কিভাবে ব্যবহার করবেন, কিভাবে পরিবর্তন করবেন ইত্যাদি।</li> + <li><a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a>: ডেভেলপার সেটিংস্ এর একটি বাখ্যা যা আপনি গায়া সেটিংস্ অ্যাপ থেকে সক্রিয় করা যায়।</li> +</ul> diff --git a/files/bn/archive/b2g_os/platform/গায়া/lockscreen_architecture_(v1.5_)/index.html b/files/bn/archive/b2g_os/platform/গায়া/lockscreen_architecture_(v1.5_)/index.html new file mode 100644 index 0000000000..04eec8dd7c --- /dev/null +++ b/files/bn/archive/b2g_os/platform/গায়া/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_) +--- +<p>বর্তমান গায়াতে LockScreen হল একটি মনোলিথিক উপাদান,যা ইহার LOC সিস্টেম অ্যাপের অনুযায়ী দ্বিতীয় বৃহত্তর ফাইলে থাকে। এটি ইহা ফাংশন কারণবশত যোগ/মোডিফাই/সরিয়ে ফেলে এবং এমনকি স্টাইলের পরিবর্তন ঘটায় ।</p> +<p>শুধুমাত্র ওই কারণে স্লাইডিং ফাংশন সরিয়ে ফেলার জন্য যখন v1.3 লাইব্রেরি আদান প্রদান করা হয়,আমাদের এখনো LockScreen down ভেঙ্গে ফেলা প্রয়োজন এটাকে আরো বেশি নমনীয় করার জন্য এবং নিজের অন্যজাতীয় উপাদান থেকে সরিয়ে ফেলার জন্য,ঘড়ি ও মিউজিক প্লেয়ারের মত।এইসব উপাদানের নির্দিষ্ট ইউনিট থাকা উচিত যা কেবলমাত্র তাদেরকে ম্যানেজ করতে পারে এবং LockScreen এর সাথে কিছু পাবলিক ইন্টারফেসের সাথে যোগাযোগ করতে পারে,তার চেয়ে ও তাদের প্রয়োজন সরসসরিভাবে গ্রাব করতে পারে এবং তারা যে পথ ব্যবহার করে তার মত গ্লোবাল স্টাট পরিবর্তন করতে পারে।অন্য কথায়,তাদের উইদজেট থাকা উচিত,এবং LockScreen উইদজেট সিস্টেমের দ্বারা ম্যানেজ করতে পারে। <span style="line-height: 1.5;">সম্পুর্ণ প্রতিসৃত প্ল্যান এখন চলছে এবং গায়া v1.5 এর অংশের সূচি,এবং এই অনুচ্ছেদ ব্যাকার উপরে ফোকাস করে থাকে যে স্থাপত্যবিদ্যা আমরা ব্যবহার করি,এবং কিভাবে একটি নতুন উইদজেট কার্যকরী হয়।</span></p> +<h2 id="মেডিয়েটোরফ্যাক্টরি_এবং_রাউটার">মেডিয়েটোর,ফ্যাক্টরি এবং রাউটার</h2> +<p>নতুন LockScreen এ,আমাদের তিনটি বিভিন্ন উপাদান আছে উইদজেট এবং যোগাযোগ করতেঃ</p> +<p>মেডিয়েটরঃসম্পুর্ন LockScreen এর কো-অর্ডিনেটর,এবং ইহা হল কেবলমাত্র আরও তৎক্ষনাৎ প্রকাশক উপাদান যা থাকা উচিত।</p> +<p><span style="line-height: 1.5;">ফ্যাক্টরিঃকেন্দ্রে নয়ুন উইদজেট প্রস্তুত করা এবং পরিস্কার পথ</span></p> +<p><span style="line-height: 1.5;">রাউটারঃ বাইরের বিশ্বের সাথে যোগাযোগ করার জন্য তথ্য পাঠানো এবং গ্রহন করা</span></p> +<h3 id="মেডিয়েটর">মেডিয়েটর</h3> +<p>মেডিয়েটর উইদজেটের থেকে সকল আবেদন পরিচালনা করবে। এই নির্দিষ্ট আবেদন যোগ করা হলঃ</p> +<ul> + <li>Unlock: widget এর আনলক করা প্রয়োজন;যদি অনলকিং এর কনো অবযেকশন না থাকে(দেখ আনলকিং অডিটর), LockScreen আনলক হতে হবে ।</li> + <li>Lock: widget লক করা প্রয়োজন;যাই হোক না কেনো,যেহেতু widgetsআমরা স্ক্রীন লক না করা পর্যন্ত কাজ করবে না,এই আবেদন অপকারী হতে পারে।</li> + <li>Canvas: widget এর প্রয়োজন একটি DOM উপাদান ইহার নিজেকে আকার জন্য;কিছু widgets আবেদন বাতিল করার জন্য প্রয়োজন নাও হতে পারে।</li> + <li>Invoke: widget এর অন্য widget গ্রহন করা প্রয়োজন,অথবা অ্যাপকে নিরাপদ করা ,অথবা ওয়েবের কাজকর্ম।</li> +</ul> +<p>যখন মেডিয়েটর এইসব রিকুস্ট গ্রহন করে থাকে,ইহা LockScreen এর ধাপ পরিবর্তন করতে পারে(লকিং/আনলকিং রিকুস্ট),এবং সকল উইডগেটের পরিবর্তঙ্কে নটিফাই করে থাকে।নটিফিকেশন রিকুস্ট /রেস্পন্স এর থেকে ভিন্ন পথ,এবং তারা অভজারভ প্যাটার্ন অনুসারে উইডগেট এর সাথে যোগাযোগের ডিজাইন করে থাকে।</p> +<p> IO সাইড থেকে,মেডিয়েটর রাউটার থেকে মেসেজ উইডগেট এ ফরওয়ার্ড করবে নটিফিকেশন হিসেবে,উইডগেট মেডিয়েটরের মাধ্যমে মেসেজ পোস্ট করতে পারে,যা রাউটারে ফরয়ার্ড হয়ে,এর পিছনে হল যেউইডগেট কেবল মাত্র মেডিয়েটরের সাথে যোগাযোগ করতে পারে,LockScreen এর সমন্ধে কিছু জানেনা ।</p> +<p>শুরুর দিকে,মেডিয়েটরই হল প্রথম ধাপ।ইহা তৎক্ষনাৎভাবে রাউটারে এবং ফ্যাক্ট্রিতে প্রস্তুত করতে পারে,এবং যাওয়ডগেটে ভুল বুটস্টেপ যা এখন মেডিয়েটরের ভিতরে থাকে,ভবিষ্যতে আমরা কাস্টমাইজেবল পথ তৈরি করব উইডগেটকে সেট করতে সম্পুর্ণ LockScreen কে আগে বুটস্টেপ করতে ।</p> +<h2 id="উইডগেটস"> উইডগেটস</h2> +<p>উইডগেটস ফ্যাক্ট্রি দ্বারা তৎক্ষনাৎভাবে করা উচিত,যা মেডিয়েটর পাস হতে পারে প্যারামিটার হিসেবে উইডগেট কন্সট্রাক্টরে।ইন্সটালিজেশনের পরে ,উইডগেট নিজের মেডিয়েটরে রেজিস্টার হওয়া উচিত।</p> +<p> কাস্টম উইডগেট এর সমন্ধে কিছু না করা উচিত,কারণ প্রধান উইডগেট এগুলো সাধারণ বিষয় অটোমেটিক্যালি পরিচালনা করে। সুতরাং এসব কঠোরভাবে রিকমান্ড করা হয়ে থাকে যে ডেভেলপারস এর উচিত প্রধান ওয়িডগেত এর উপর ভিত্তি করে উইডগেট প্রস্তুত করা ।</p> +<p>উইডগেট মেডিয়েটরের কাছে থেকে এবং রাউটারের কাছে থেকে মেসেজ গ্রহন করতে এবং রিকুস্ট পাঠাতে পারে(মেডিয়েটরের দ্বারা দেয়া),এটা কিছু মেসেজ বের করতে পারে,নিচের ডায়াগ্রাম এই সব যোগাযোগ দেখিয়ে থাকেঃ</p> +<p><a href="https://mdn.mozillademos.org/files/7431/LockScreen%20widget%20interactions.png"><img alt="" src="https://mdn.mozillademos.org/files/7431/LockScreen%20widget%20interactions.png" style="line-height: 1.5; width: 890px; height: 400px;"></a></p> +<p>এই ডায়াগ্রাম এভাবে ব্যাখাকরা যায়ঃ</p> +<ol> + <li>উইডগেট বাহিরের বিশ্বে মেসেজ পোস্ট করতে পারে। এই মেসেজ মেডিয়েটরের দ্বারা রাউটারে দেয়া,সুতরাং উইডগেট রাউটার সম্নধে কিছু জানে না।</li> + <li>রাউটার কিছু মেসেজ ফরওয়ার্ড এবং গ্রহন করতে পারে মেডিয়টরে,যা আবার উইডগেটে ফরওয়ার্ড হতে পারে।কিছু বিশেষ ক্ষেত্রে এই মেসেজ উইডগেট এ ফরোয়ার্ড হয়না।</li> + <li>যখন LockScreen এর ধাপ পরিবর্তন হয়,মেডিয়েটর সকল উইডগেটের পরিবর্তন ও দেখাবে ।এই পরিবর্তন গুলো কিছু উইডগেট রিকুস্ট থেকে আসে (যেমন Lock/Unlock)।</li> + <li>উইডগেট LockScreen কে আনলক করতে দরকার হতে পারে।এই রিকুস্ট গ্রহন করে থাকে,মেডিয়েটর সকল আন লকিং অডিয়েটরকে কোন অব্জেকশন আছে কিনা সে ব্যাপারে জিজ্ঞাসা করে থাকেযদি কোন অব্জেকশন না থাকে তবে ভুল পাসওয়ার্ড দেয়ার মত দেয়,LockScreen নিজে আনলক হয়ে থাকে।</li> + <li>কিছু উইডগেট নিরাপদ অ্যাপ গ্রহন করে,যেমন পাস্কো্র্ড প্যানেলে নিরাপদ ক্যামেরা।</li> + <li> উইডগেট কিছু ওয়েব কাজকর্ম বাহির করার জন্য রিকুস্ট পাটাতে পারে।এই ক্ষেত্রে মেডিয়েটর প্রথমে আনলক হবে ।যদি লাভবান হয় তবে কাজ করবে।</li> + <li>কিছু উয়িডগেট এর কিছু ক্যানভাস লাগবে নিজেকে প্রকাশ করার জন্য।যখন রিকুস্ট গ্রহন করে তখন মেডিয়েতর উইডগেটের উপাদান প্রস্তুত করে থাকে।একটি ভবিষ্যৎ ফিচার হল প্রত্যেক উইডগেটকে নিজের ফ্রেমে বন্দি করা,যেন বর্তমান মেকানিজম থেকে উইডগেট বন্দি হতে পারে।</li> +</ol> diff --git a/files/bn/archive/b2g_os/platform/গায়া/weinre_as_remote_debugger/index.html b/files/bn/archive/b2g_os/platform/গায়া/weinre_as_remote_debugger/index.html new file mode 100644 index 0000000000..e7984b4f5c --- /dev/null +++ b/files/bn/archive/b2g_os/platform/গায়া/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 +--- +<p>Weinre , Apache foundation এর একটি প্রকল্প যার পূর্ণ অর্থ দাঁড়ায় WEb INspector REmote.এটা তার নামের মতই অর্থ বহন করে-যা কিনা ফায়ারবাগ অথবা ওয়েব-ইন্সপেক্টর এর সাথেই থাকে কিন্তু একসাথে তা ওয়েবপেইজ এর ডিবাগ ও রান করতে পারে। যদি আপনি কখনও এইধরনের ফায়ারফক্স টুলস অথবা ক্রম টুলস ব্যাবহার করে থাকেন তাহলে Weinre আপনার ব্যাবহারের দ্বিতীয় নির্বাচিত টুলস হওয়া উচিৎ।</p> +<p><span style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;"> Weinre সেট করাঃ</span></p> +<p>যেহেতু weiner,Node.js এর উপরে রান করে তাই প্রথম পোর্ট কল হিসেবে <a href="http://nodejs.org/" style="line-height: 1.5;">Node.js</a><span style="line-height: 1.5;">. ইন্সটল করতে হবে।</span><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">Node.js একটি বানডেল হিসেবে আসে এবং আমরা এখন এটাই ইন্সটল করতে ব্যাবহার করব। টার্মিনাল ওপেন করে নিম্নোক্ত কমান্ড লিখুনঃ</span></p> +<p><span style="font-family: 'Courier New', 'Andale Mono', monospace; font-size: 1rem; line-height: 19px; background-color: rgb(246, 246, 242);"> </span><span style="font-size: 1rem; font-family: 'Courier New', 'Andale Mono', monospace; line-height: 19px; background-color: rgb(246, 246, 242);">npm </span><span style="font-size: 1rem; font-family: 'Courier New', 'Andale Mono', monospace; line-height: 19px; color: rgb(102, 0, 51);">-g</span><span style="font-size: 1rem; font-family: 'Courier New', 'Andale Mono', monospace; line-height: 19px; background-color: rgb(246, 246, 242);"> </span><span style="font-size: 1rem; font-family: 'Courier New', 'Andale Mono', monospace; line-height: 19px; color: rgb(194, 12, 185); font-weight: bold;">install</span><span style="font-size: 1rem; font-family: 'Courier New', 'Andale Mono', monospace; line-height: 19px; background-color: rgb(246, 246, 242);"> weinre</span></p> +<blockquote> + <p>নোটঃ <code style="font-style: normal; line-height: 1.5;">-g</code><span style="line-height: 1.5;"> flag weiner কে </span><a href="https://npmjs.org/doc/global.html" style="line-height: 1.5;">global Node.js module</a> হিসেবে ইন্সটল করে কমান্ডলাইন এর সুন্দর ব্যাবহার এর জন্য কিন্তু লিনাক্স আর ম্যাক এ শুধু মাত্র তার মানে উপরের কমান্ডগুলো sudo কমান্ড হিসেবে ব্যাবহার করতে হবে ।</p> + <p>ইন্সটল কমপ্লিট হলে আমরা weiner ব্যাবহার করতে প্রস্তুত হব ।</p> +</blockquote> +<h2 id="Weinre_স্টার্ট_করাঃ">Weinre স্টার্ট করাঃ </h2> +<p>weiner সার্ভার চালু করতে নিচের কমান্ডগুলো লিখুনঃ</p> +<pre class="bash" style="font-family: monospace;">$ weinre <span style="color: #660033;">--boundHost</span> 127.0.0.1 <span style="color: #660033;">--httpPort</span> <span style="color: #000000;">9090</span></pre> +<p><span style="color: #000000;">এইখানে দুটি প্যারামিটার হোসট এবং পোর্ট সার্ভার কে নির্দেশ করে ।একবার সার্ভার স্টার্ট হওয়ার পর নিচের লাইনগুলো টার্মিনালে দেখাবেঃ</span></p> +<pre class="bash" style="font-family: monospace;"><span style="color: #000000;">2013</span>-01-28T10:<span style="color: #000000;">42</span>:40.498Z weinre: starting server at http:<span style="color: #000000; font-weight: bold;">//</span>127.0.0.1:<span style="color: #000000;">9090</span></pre> +<p>ইহার সাথে ব্রাউজার ওপেন করেন (নোটঃ<em>Weinre এর UI আসলে ওয়েবকিট বেসড ব্রাউজার এর জন্য যা কিনা অন্য ব্রাউজার এ কাজ করতে পারে,তাই ক্রম ইউজ করার পরামর্শ দেওয়া হয় ) এবং </em><a href="http://127.0.0.1:9090/" style="line-height: 1.5;">http://127.0.0.1:9090</a><span style="line-height: 1.5;">. এ পয়েন্ট করুন। যখন পেইজ টি লোড হবে তখন ডিবাগ ক্লাইনট ইউসার ইন্টারফেস এ ক্লিক করুন । এই UI অপশন থেকে আপনারা কানেক্টেড ক্লাইনটস দেখতে পাবেন আসলে একটি যেটি কিনা ওয়েব ইন্সপেক্টর এর বর্তমান পর্যায়।আরও দেখতে পাবেন সার্ভার এর কিছু সাধারন </span><span style="line-height: 1.5;">properties এবং আপনার টার্গেট।</span></p> +<p><span style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Weinre টার্গেট সেট করাঃ </span></p> +<p>Weiner এ টার্গেট গুলো হল আপনি জেই ওয়েবপেইজ অথবা এপ্লিকেশন ডিবাগ করত চান সেগুলো। এবং আপনার টার্গেটকে কানেক্ট করতে আপনার অ্যাপ এর ঈক্তি নির্দিষ্ট স্থানে একটি ওয়ান লাইনার অ্যাড করতে হবে ।উদাহরন স্বরূপঃ</p> +<p>আপনি যদি weiner ইউস কর gaia তে ক্যালেন্ডার অ্যাপটি ডিবাগ করতে চান তাহলে আপনাকে প্রথমে যে কাজটি করতে হবে তা হলঃ</p> +<p>open giaia>apps>calender>index.html ওপেন করে clong body tag এর আগে নিম্নোক্ত লাইন লিখতে হবেঃ</p> +<pre class="xml" style="font-family: monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><script</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"http://127.0.0.1:9090/target/target-script-min.js#anonymous"</span><span style="color: #000000; font-weight: bold;">></span><span style="color: #000000; font-weight: bold;"></script<span style="color: #000000; font-weight: bold;">></span></span></span></pre> +<p>সাধারনত আপনাকে এই কাজ গুলো করতে হবে আপনার টার্গেট সেট করার জন্য, কিন্তু ফায়ারফক্স ওএস এর জন্য আর একটি কাজ করতে হবে ।Gaia একধরনের Contact Security Policy ব্যাবহার করে এবং ওইটা অনুসারে স্ক্রিপ্ট কে নির্দেশ করা হয় যেন তা একবারের জন্যই same origin থেকে অ্যাপ লোড করতে পারে। তাই এখন যদি আমরা ক্যালেন্ডার লোড করতে চেষ্টা করি তাহলে উপরের স্ক্রিপ্টটি ব্লক হয়ে যাবে যতক্ষণ না আপনি কোন নির্দিষ্ট অরিজিন থেকে তা লোড না করবেন।</p> +<p><span style="line-height: 1.5;">ইহা হতে পরিত্রানের জন্য আমাদের CSP টেম্পোরারিলি বন্ধ করতে হবে। এটা করার জন্য ওপেন করতে হবেঃ</span></p> +<p><span style="line-height: 1.5;"> gaia -> build -> preferences.js এবং ২৪ নাম্বার লাইন এ নিচের লাইন যুক্ত করুনঃ</span></p> +<pre class="javascript" style="font-family: monospace;">prefs.<span style="color: #660066;">push</span><span style="color: #009900;">(</span><span style="color: #009900;">[</span><span style="color: #3366CC;">"security.csp.enable"</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">]</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre> +<h2 id="Weinre_এবং_B2G_Desktop_দিয়ে_ডিবাগিংঃ">Weinre এবং B2G Desktop দিয়ে ডিবাগিংঃ</h2> +<p>আমাদের ডেস্কটপ ওপেন করার আগে Gaia প্রোফাইল তৈরি করতে হবেঃ</p> +<pre class="bash" style="font-family: monospace;"><span style="color: #007800;">DEBUG</span>=<span style="color: #000000;">1</span> <span style="color: #c20cb9; font-weight: bold;">make</span></pre> +<p>যখন প্রোফাইল তৈরি হবে তখন B2G ডেস্কটপ ওপেন করুনঃ</p> +<div class="wp_syntax"> + <pre class="bash" style="font-family: monospace;"><span style="color: #000000; font-weight: bold;">/</span>Applications<span style="color: #000000; font-weight: bold;">/</span>B2G.app<span style="color: #000000; font-weight: bold;">/</span>Contents<span style="color: #000000; font-weight: bold;">/</span>MacOS<span style="color: #000000; font-weight: bold;">/</span>b2g-bin <span style="color: #660033;">-profile</span> <span style="color: #000000; font-weight: bold;">/</span>Users<span style="color: #000000; font-weight: bold;">/</span>username<span style="color: #000000; font-weight: bold;">/</span>mozilla<span style="color: #000000; font-weight: bold;">/</span>projects<span style="color: #000000; font-weight: bold;">/</span>gaia<span style="color: #000000; font-weight: bold;">/</span>profile</pre> +</div> +<p>যখন B2G ওপেন হবে তখন স্ক্রিন আনলক করে ক্যালেন্ডার অ্যাপ এ যেতে হবে। ক্যালেন্ডার অ্যাপ এর আইকন টি টেপ করে weiner debug client UI এ নজর রাখতে হবে । যখন অ্যাপ টি আপনাকে লঞ্চ করবে আপনি আপনার টার্গেট দেখতে পাবেন ।এরপর আমরা আমাদের কোড যাচাই শুরু করব তাই ইলিমেনট ট্যাব ওপেন করে html এবং CSS inspector ওপেন করুন।এরপর আপনি আপনার html ও CSS কোড গুলো এডিট করতে পারবেন ।আপনি চাইলে এখানে নতুনভাবে স্টাইল এড করতে পারেন element.stule block অথবা amending existing rules এর দ্বারা । আপনি দেখবেন আপনি computed style এর জন্য অনুমতি পাবেন এবং তার সাথে সাথে কারেন্ট ইলিমেনট এর matrics পার্ট ও।</p> +<p> </p> +<h2 id="Console_দিয়ে_কাজ_করাঃ"> Console দিয়ে কাজ করাঃ</h2> +<p>আমাদের কাছে পরবর্তী ট্যাব এর নাম হল Console tab.এখানে আপনি সরাসরি জাভাস্ক্রিপ্ট এর কোড গুলো রান করতে পারেন আর চাইলে তা অ্যাপ এর পক্ষে বা বিরুদ্ধে রান করতে পারেন ।Console tab কে প্রদর্শন করাতে হলে ডায়ালার এর কল লগ পোরশন টার্গেট করতে হবে এবং ওখানকার রেকর্ড এর সাথে যোগাযোগ করতে হবে ।প্রথমে আপনাকে স্ক্রিপ্ট সোর্স কে ডায়ালার এ নিতে হবে যা কিনা-</p> +<p>gaia > apps > communication > dailar>index.html</p> +<p> </p> +<p><span style="line-height: 1.5;">এটা এড করার পর প্রোফাইল তৈরি করে ডায়ালার লঞ্চ করতে হবে ।</span><span style="line-height: 1.5;">ডায়ালার ওপেন করে কল লগ আইকন এর উপর ক্লিক করতে হবে , বাম পাশে। এখন কল লগে কিছু ডামি ডাটা দিয়ে দেওয়া থাকে ।কিন্তু চলুন নিজেদের টা তৈরি করি।weiner এর Console tab এ ক্লিক করে নিম্নোক্ত লাইন গুলো লিখে এনটার চাপতে হবেঃ</span></p> +<p><span style="font-family: 'Courier New', 'Andale Mono', monospace; font-size: 1rem; line-height: 19px; background-color: rgb(246, 246, 242);">RecentsDBManager.</span><span style="font-family: 'Courier New', 'Andale Mono', monospace; font-size: 1rem; line-height: 19px; color: rgb(102, 0, 102);">deleteAll</span><span style="font-family: 'Courier New', 'Andale Mono', monospace; font-size: 1rem; line-height: 19px; color: rgb(0, 153, 0);">(</span><span style="font-family: 'Courier New', 'Andale Mono', monospace; font-size: 1rem; line-height: 19px; color: rgb(0, 153, 0);">)</span><span style="font-family: 'Courier New', 'Andale Mono', monospace; font-size: 1rem; line-height: 19px; color: rgb(51, 153, 51);">;</span></p> +<p>আমাদের কোড গুলো কাজ করছে কিনা তা দেখতে হলে আমাদের কল লগ রিফ্রেশ করতে হবেঃ:</p> +<pre class="javascript" style="font-family: monospace;">Recents.<span style="color: #660066;">refresh</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre> +<p>এখন দেখা যাচ্ছে যে আমরা যা লিপিভুক্ত করলাম তা আমাদের স্টোরেজ এ <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB" style="line-height: 1.5;">IndexedDB</a> তে এসেছে।</p> +<p>এবং তা কল লগ ভিউ তে দেখা যাচ্ছে ।আপনি যদি খেয়াল করেন তাহলে দেখে থাকবেন আর একটি অসাধারন ফিচার এড হয়েছে যার নাম অটো-কমপ্লিট যা আপনার ডেভেলপমেন্ট কে আরও গতি দান করবে।</p> +<pre class="javascript" style="font-family: monospace;"><span style="color: #006600; font-style: italic;">// Dummy entry</span> +<span style="color: #000066; font-weight: bold;">var</span> recentCall <span style="color: #339933;">=</span> <span style="color: #009900;">{</span> + type<span style="color: #339933;">:</span> <span style="color: #3366CC;">'incoming-refused'</span><span style="color: #339933;">,</span> + number<span style="color: #339933;">:</span> <span style="color: #3366CC;">'555-6677'</span><span style="color: #339933;">,</span> + date<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">new</span> <span style="">Date</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> +<span style="color: #009900;">}</span><span style="color: #339933;">;</span> +RecentsDBManager.<span style="color: #660066;">add</span><span style="color: #009900;">(</span>recentCall<span style="color: #009900;">)</span><span style="color: #339933;">;</span> +Recents.<span style="color: #660066;">refresh</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre> +<p>এখন আপনারা দেখতে পাচ্ছেন যে স্টোরেজে এন্ট্রি লিপিবদ্ধ করা হয়েছে <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB" style="line-height: 1.5;">IndexedDB</a> নাম দিয়ে এবং তা কল লগে ভিউ করা হয়েছে।এখানে খুব খেয়াল করে দেখলে দেখা যাবে যে এখানে একটি খুব উল্লেখযোগ্য অপশন চালু হয়েছে অটো - কমপ্লিট নামের যা আপনার পরবর্তী ডেভেলপমেন্ট এর গতি বৃদ্ধি করবে।</p> +<h2 id="ডিভাইসে_ডিবাগিং_করাঃ"> ডিভাইসে ডিবাগিং করাঃ </h2> +<p>উপরে কিভাবে weiner ও B2G ব্যাবহার করতে হয় তা আলোকপাত করা হয়েছে।কিন্তু weiner ব্যাবহার করে কোড যাচাই আর ডিবাগ খোজার বিষয়টি একই শুধুমাত্র আপনার বেবরিত আই.পি এড্রেস ছাড়া ।যখন আপনি আপনার ডিভাইস এ ডিবাগ করতে যাবেন, আপনার প্রথমে আপনার হোসট কম্পিউটার এর আই.পি এড্রেস জানতে হবে।তখন আপনি weiner স্টার্ট করতে পারেন এই আই.পি কে bounhost হিসেবে, তাছাড়া আপনার টার্গেট ডকুমেন্ট এর স্ক্রিপ্ট শহ এটা কে আই.পি হিসেবেও ব্যাবহার করতে পারবেন।</p> +<p><span style="line-height: 1.5;">ম্যাক আর লিনাক্সে এড্রেস টি পাবেন </span><code style="font-style: normal; line-height: 1.5;">ifconfig</code><span style="line-height: 1.5;"> ব্যাবহার করে আর উইন্ডোজ এ হল</span></p> +<p><code style="font-style: normal; line-height: 1.5;">ipconfig</code><span style="line-height: 1.5;">.</span></p> +<p>আপনি যখন নতুন IP পাবেন তখন চলমান weiner বন্ধ করে দিন আর নিচের কাজটি করুনঃ</p> +<pre class="bash" style="font-family: monospace;">weinre <span style="color: #660033;">--boundHost</span> 192.168.1.1 <span style="color: #660033;">--httpPort</span> <span style="color: #000000;">9090</span><span style="font-family: 'Open Sans', sans-serif; line-height: 1.5; background-color: rgb(255, 255, 255);">:</span></pre> +<p><span style="font-family: 'Open Sans', sans-serif; line-height: 1.5; background-color: rgb(255, 255, 255);">এরপর আপনার টার্গেট ডকুমেন্ট যুক্ত করুনঃ</span></p> +<pre class="bash" style="font-family: monospace;"><span style="color: #000000; font-weight: bold;"><</span>script <span style="color: #007800;">src</span>=<span style="color: #ff0000;">"http://192.168.1.1:9090/target/target-script-min.js#anonymous"</span><span style="color: #000000; font-weight: bold;">></</span>script<span style="color: #000000; font-weight: bold;">></span></pre> +<p>আপনার Gaia প্রোফাইল বানান আর ডিভাইসে যুক্ত করুন নিম্নোক্ত পদ্ধতিতঃ:</p> +<pre class="bash" style="font-family: monospace;"><span style="color: #c20cb9; font-weight: bold;">make</span> install-gaia</pre> +<p>আপনার টার্গেট অ্যাপ্লিকেশন চালু করুন আর হয়ে গেল আপনার কাজ!</p> 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 +--- +<p>বুট টু গিকো (ফায়ারফক্স ওএস) একটি <a href="/en-US/docs/Gecko" title="Gecko">গিকো</a> ভিত্তিক ইউজার ইন্টারফেসের নিচে <a href="http://www.android.com/" title="http://www.android.com/">এন্ড্রয়েড</a> হতে তৈরি একটি কার্নেল ব্যবহার করে। এই আর্টিকেলে নতুন ডিভাইসে অপারেটিং সিস্টেমটি পোর্ট করার পদ্ধতির ওপর আলোকপাত করা হয়েছে।</p> +<p>এই গাইডটি ধরে নিচ্ছে আপনি এমন একটি নতুন ডিভাইসে পোর্ট করছেন যাতে ইতোমধ্যে এন্ড্রয়েড চলছে, আপনি যদি অন্য একটি ডিভাইসে পোর্ট করে থাকেন তবে পদ্ধতিটি আরেকটু বিস্তৃত হবে।</p> +<h2 id="বিল্ড_সিস্টেম_সেটআপ_করা">বিল্ড সিস্টেম সেটআপ করা</h2> +<p>প্রথম ধাপ হল আপনার বিল্ড সিস্টেম কনফিগার করা; <a href="/en-US/docs/Mozilla/Boot_to_Gecko/B2G_build_prerequisites" title="Mozilla/Boot_to_Gecko/B2G_build_prerequisites">B2G build prerequisites</a> এর গাইডটি অনুসরণ করতে পারেন।</p> +<h2 id="B2G_রেপোজিটরি_ক্লোন_করা">B2G রেপোজিটরি ক্লোন করা</h2> +<p>এর পরের ধাপ হল B2G রেপোজিটরী ক্লোন করা।</p> +<pre>git clone https://github.com/mozilla-b2g/B2G.git</pre> +<h2 id="আপনার_আসল_এন্ড্রয়েড_সিস্টেমের_লোকাল_ব্যাকআপ_রাখা">আপনার আসল এন্ড্রয়েড সিস্টেমের লোকাল ব্যাকআপ রাখা</h2> +<p>পরবর্তীতে, এটি নিয়ে খেলাধুলা করার পূর্বে আপনাকে আপনার এন্ড্রয়েড ডিভাইসের ব্যাকআপ নেয়া উচিৎ। তাছাড়া কয়েকটি জিনিস বিল্ড এবং ইন্সটল প্রক্রিয়ায়ও লাগবে।</p> +<pre>mkdir my_device_backup +cd my_device_backup +adb pull /system system</pre> +<h2 id="config.sh_এ_নতুন_ডিভাইস_যুক্ত_করা">config.sh এ নতুন ডিভাইস যুক্ত করা</h2> +<p>পরবর্তী ধাপ হল <a href="https://github.com/mozilla-b2g/B2G/blob/master/config.sh" title="https://github.com/mozilla-b2g/B2G/blob/master/config.sh"><code>config.sh</code></a> ফাইলে একটি নতুন ডিভাইস যুক্ত করা; আপনি বর্তমানগুলোকে টেমপ্লেট হিসেবে ব্যবহার করতে পারেন। এটি মূলত বিল্ডের জন্য সঠিক ফাইল সংগ্রহ করতে সাহায্য করবে।</p> +<h2 id="নতুন_ডিভাইসের_জন্য_ম্যানিফেস্ট_তৈরি_করা">নতুন ডিভাইসের জন্য ম্যানিফেস্ট তৈরি করা</h2> +<p>এখন আপনাকে দরকার নতুন মেনিফেস্ট ডিভাইস ফাইলের জন্য প্রয়োজনীয় রেপস ; এই মেনিফেস্ট ফাইল্কে বলা হয়ে থাকে default.xml।সুপারিশকৃত <a href="https://github.com/mozilla-b2g/b2g-manifest" title="https://github.com/mozilla-b2g/b2g-manifest"><code>b2g-manifest</code></a> ফাইল একটি টেম্পলেট গিথাব।প্রত্যেক ডিভাইসের নিজস্ব শাখা আছে;আপনি <a href="https://github.com/mozilla-b2g/b2g-manifest/tree/galaxy-s2" title="https://github.com/mozilla-b2g/b2g-manifest/tree/galaxy-s2"><code>galaxy-s2</code></a> ব্যবহার করতে পারেন রেফারেন্স হিসেবে ।</p> +<h2 id="নতুন_ডিভাইসের_জন্য_কনফিগারেশন_ট্রি_তৈরি_করা">নতুন ডিভাইসের জন্য কনফিগারেশন ট্রি তৈরি করা</h2> +<p>নতুন ডিভাইসের জন্য নতুন কন ফিগারেশন তৈরি করুন।এটা ডিভাইসে <code>device/<em><manufacturer></em>/<em><device_id></em></code>. তে থাকা উচিত।এটা আরো সংযুক্ত করবে যে ,কমপক্ষেঃ</p> +<ul> + <li><code>AndroidBoard.mk</code></li> + <li><code>AndroidProducts.mk</code></li> + <li><code>BoardConfig.mk</code></li> + <li><code>extract-files.sh</code></li> + <li><code>full_<device_id>.mk</code></li> + <li>idc files for touchscreen</li> + <li>init files (<code>init.rc</code>, <code>init.<target>.rc</code>, <code>uevent.rc</code>, ...)</li> +</ul> +<p>এখানে যে প্রধান বিষয় টি পার্থক্য তৈরি করেছে তা হল একটি ডিভাইস থেকে অন্য ডিভাইসে নেয়া । বিশেষভাবে, BoardConfig.mk এবংextract-files.sh সুনির্দিষ্টভাবে পার্থক্য করা যায়।এই অংশের দরকার প্রচুর পরিমানে হ্যাকিং,টেস্টিং,এবং ডিবাগিং ফিগারটি সঠিকভাবে বের করে আনতে বাইনারি ব্লব।</p> +<div class="note"> + <p><strong>নোটঃযদি আপনি একটি বিদ্যমান রেফারেন্স </strong> <a href="http://www.cyanogenmod.com/" title="http://www.cyanogenmod.com/">CyanogenMod</a> এর জন্য ডিভাইস রাখেন,এই তথ্য প্রক্রিয়া পোর্টিং করার জন্য গতি এনে দিবে। <a href="http://forum.xda-developers.com/" title="http://forum.xda-developers.com/">XDA Forum</a> হল আরেকটি ভাল জায়গা আলোচনা এবং সম্পদ চেক করার জন্য ।</p> + <h2 id="পুনরায়_গঠন_boot.img">পুনরায় গঠন boot.img</h2> +</div> +<p>একদা হয়ে গেলে সব কিছু ,আপনাকে boot image পুনরায় গঠন করতে হবে এটা সাধারনত kernel এর নিজের প্রয়োজন পরে না ,কিন্তু <code>init.rc তে পরিবর্তন আনতে তুলে আনা হয়ে থাকে।</code></p> +<h3 id="init.rc_তে_পরিবর্তন">init.rc তে পরিবর্তন</h3> +<p>init.rc যা আপনি দেখছেন তা B2G দ্বারা প্রদান করা নয়;এর পরিবর্তে,আপনাকে ডিভাইস থেকে এটি নেয়া দরকার ।</p> +<p>প্রধান যে জিনিস আপনাকে মোডিফাই করা দরকারঃ</p> +<h4 id="init.b2g.rc_ইম্পোর্ট">init.b2g.rc ইম্পোর্ট</h4> +<p><code>init.b2g.rc ইম্পোর্টের পরবর্তী লাইন গুলো যোগ করুনঃ</code>:</p> +<pre>on early-init + start ueventd + import /init.b2g.rc</pre> +<h4 id="ফিক্স_পারমিশন">ফিক্স পারমিশন</h4> +<p>files <code>/system/b2g/b2g</code>, <code>/system/b2g/updater</code>, <code>/system/b2g/plugin-container ফাইলের অনুমতি ঠিক করুন</code>; এটা করা উচিত হবে যখন লাইন গুলো ফাইল সিস্টেম এর লেখ/পড়া র ক্ষেত্রে লাইঙ্গুলো মাউন্টকরে থাকেঃ</p> +<pre>chmod 0755 /system/b2g/b2g +chmod 0755 /system/b2g/updater +chmod 0755 /system/b2g/plugin-container</pre> +<p>নতুন ডিভাইস <code>init.rc</code> ব্যবহারের পরিবর্তে <code>init.rc</code> মোডিফাইং এর মাধ্যমে বিল্ড সিস্টেম প্রদান করে থাকে ;যদি তাই হয়ে থাকে তবে মনে রাখতে হবে যে সেট করা হয় <code>TARGET_PROVIDES_INIT_RC</code> in <code>BoardConfig.mk</code>.</p> +<h3 id="Prebuilt_kernel_বনাম_সোর্স_থেকে_the_kernel_গঠন">Prebuilt kernel বনাম সোর্স থেকে the kernel গঠন</h3> +<p>আপনি একটি প্রিবিল্ট kernel ব্যবহার করতে পারেন,অথবা আপনি সোর্স থেকে kernel গঠন করতে পারেন।সোর্স থেকে kernel গঠন করতে ,যোগ করুন AndroidKernel.mk এবং kernel যা ডিভাইস কনফিগারেশনে কনফিগ করে।</p> +<p><a href="https://github.com/andreasgal/B2G/tree/master/glue/gonk/device/toro/maguro" title="https://github.com/andreasgal/B2G/tree/master/glue/gonk/device/toro/maguro">maguro</a> হল পুরানো গঠন সিস্টেমের একটি উদাহরণ যা সোর্স থেকে kernel গঠন করে ।</p> +<h2 id="flash.sh_তে_নতুন_ডিভাইস_যোগ_করুন">flash.sh তে নতুন ডিভাইস যোগ করুন</h2> +<p><code>flash.sh</code> তে নতুন ডিভাইস যোগকরুন; নতুন ডিভাইস ফ্লাস ব্যবহার করার জন্য কি দরকার হবে তা কিভাবে কি করতে হবে তা বিশেষ ভাবে জানা যায় ।</p> +<h2 id="কনফিগারগঠনএবং_ফ্ল্যাশ_নতুন_ডিভাইস">কনফিগার,গঠন,এবং ফ্ল্যাশ নতুন ডিভাইস</h2> +<p>এখন আপনি গঠনের জন্য এবং নতুন ডিভাইসের ফ্ল্যাশিং এর জন্য চেষ্টা করুনঃ</p> +<pre>ANDROIDFS_DIR=my_device_backup ./config.sh <device_id> default.xml +./build.sh +./flash.sh</pre> +<h2 id="টেস্ট_এবং_ডিবাগ">টেস্ট এবং ডিবাগ</h2> +<p>আমাদের কিছু বিস্তারিত যোগ করা দরকার এখানে;সত্যিকার অর্থে ,এটা সম্পুর্ন অনুচ্ছেদে কিছু সাহায্য করতে পারে।</p> +<h2 id="FAQ">FAQ</h2> +<p>ফোর্থকামিং</p> +<h2 id="আরো_দেখুন">আরো দেখুন</h2> +<ul> + <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko" title="Mozilla/Boot_to_Gecko">Boot to Gecko</a></li> + <li><a href="https://github.com/mozilla-b2g/B2G" title="https://github.com/mozilla-b2g/B2G">B2G source code on Github</a></li> + <li><a href="http://www.android.com/" title="http://www.android.com/">Android web site</a></li> + <li><a href="https://autonome.wordpress.com/2013/01/15/firefox-os-devices-and-dark-matter/" title="https://autonome.wordpress.com/2013/01/15/firefox-os-devices-and-dark-matter/">A list of existing projects on Dietrich Ayala's blog</a> Firefox OS একই ডিভাইসে পোর্ট করতে</li> +</ul> 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 +--- +<div class="summary"> + <p>Before you can build B2G, you need to clone the repository and configure your build tree. This article explains how to do that. </p> +</div> +<p>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 <a class="vt-p" href="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator" title="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS simulator</a>, begin familiarizing yourself with <a class="vt-p" href="/en-US/docs/Apps" title="/en-US/docs/Apps">Documentation for app developers</a> including Designing and Building an App, or familiarize yourself with the information on upcoming steps.</p> +<div class="note"> + <p>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.</p> +</div> +<h2 id="B2G_রিপোজিটোরি_ক্লোন">B2G রিপোজিটোরি ক্লোন</h2> +<p>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 <a class="vt-p" href="/en-US/docs/Mercurial" title="Mercurial">Mercurial</a> repository.</p> +<p>To clone the repository, use git:</p> +<pre>git clone git://github.com/mozilla-b2g/B2G.git</pre> +<p>After cloning (which should only take a minute with a fast connection), <code>cd</code> into the B2G directory:</p> +<pre>cd B2G +</pre> +<h2 id="আপনার_ডিভাইসের_জন্য_B2G_কনফিগার_করা">আপনার ডিভাইসের জন্য B2G কনফিগার করা</h2> +<div class="warning"> + <strong>Important</strong>: Remember that only devices running <strong>Android 4.0.4</strong> (<strong>Ice Cream Sandwich</strong>)<strong>, 4.3 (Jelly Bean) and 4.4 (KitKat)</strong> 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.</div> +<div class="warning"> + <strong>Important</strong>: 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 <a class="vt-p" href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler">Changing the default host compiler</a> to find out how to do it.</div> +<div class="note"> + <strong>Note:</strong> <strong>please read all the instructions below</strong> before running any of the build process commands, to make sure you are doing the right thing for you!</div> +<p>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 <code>config.sh</code> utility — run the following command from within the B2G directory:</p> +<pre>./config.sh +</pre> +<p>This will display a list of the supported devices, like so:</p> +<pre>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 +</pre> +<p>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!</p> +<div class="note"> + <strong>Note:</strong> You can find the device name of your phone on the <a href="/en-US/Firefox_OS/Phones">Firefox OS Phones</a> page.</div> +<div class="note"> + <strong>Note: Configuring and building B2G for Keon on a Mac DOESN'T WORK</strong>. You'll need to use Linux when building for this device.</div> +<div class="note"> + <strong>Note</strong>: If for any reason you want to build against a specific version of Gecko, see <a href="#Building_against_a_custom_Gecko">Building against a custom Gecko</a> 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 <a href="#Building_a_branch">Building a branch</a>. Note: the default branch varies by device and is <strong>not necessarily trunk</strong>.</div> +<p>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.</p> +<h3 id="মোবাইল_ডিভাইসের_জন্য_B2G_বিল্ড_কনফিগার_করা">মোবাইল ডিভাইসের জন্য B2G বিল্ড কনফিগার করা</h3> +<p>At this point, connect your device if it is not already connected; the configure process will need to access it.</p> +<p>If your device was listed in the results shown above, you can start the configure process by running <code>config.sh</code> again, this time specifying your device's name. For example, to build for the Samsung Google Nexus S, you would type:</p> +<pre>./config.sh nexus-s +</pre> +<div class="note"> + <strong>Note:</strong> If you get an error message like <code>fatal: manifest 'nexus-s.xml' not available</code>, chances are that you simply have to specify the branch you want to use. See <a href="#Building_a_branch">Building a branch</a> for details.</div> +<div class="note"> + <strong>Note</strong>: If the config step fails with an error message like <code>error: manifest required for this command -- please run init</code>, then changes are that the manifest file for the repo (located at <code>B2G/.repo/manifest.xml</code>) wasn't created successfully. You should try running <code>config.sh</code> again. If you are doing this for a new device you could add it to <code>config.sh</code> and then hand it your local manifest file like so:<br> + <code>./config.sh <device> -m path/to/manifest.</code></div> +<p>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.</p> +<h3 id="একটি_সিস্টেম_ব্যাকাপ_ব্যবহার_করে_একটি_বিল্ড_কনফিগার_করা">একটি সিস্টেম ব্যাকাপ ব্যবহার করে একটি বিল্ড কনফিগার করা</h3> +<p>If your phone no longer has Android on it, and your B2G tree doesn't have the binary blobs in it, but you wisely <a class="vt-p" href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition" title="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">made a backup of the <code>/system</code> partition</a>, you can perform the build on the system backup like this:</p> +<pre>ANDROIDFS_DIR=<absolute path to parent dir of system dir> ./config.sh <target> +</pre> +<p>The build system will default to looking in someplace like <code>backup-inari/system</code> (depending on the device configuration); if you place the files in the expected place you won't need to specify the directory.</p> +<p>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 <code>/system</code> partition per the above directions — this will give you the right files.</p> +<h3 id="একটি_ইমুলেটরের_জন্য_B2G_বিল্ড_কনফিগার_করা">একটি ইমুলেটরের জন্য B2G বিল্ড কনফিগার করা</h3> +<p>If you want to build an emulator rather than on a real phone, you can specify <code>emulator</code> to get the ARM device emulator, or <code>emulator-x86</code> 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.</p> +<p>So, to build the ARM emulator, you would use the following command:</p> +<pre>./config.sh emulator +</pre> +<p>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.</p> +<p>By this point you should be ready to <a class="vt-p" href="/en-US/docs/Mozilla/Firefox_OS/Building" title="Mozilla/Firefox_OS/Building">start the build</a>, unless you need any of the more advanced information detailed below.</p> +<p>Beware that building for the emulator may fail on 64-bit Linux.</p> +<div class="note"> + <strong>Note:</strong> 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 <a class="vt-p" href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Requirements_for_Mac_OS_X" title="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Requirements_for_Mac_OS_X">Requirements for Mac OS X</a> for further information.</div> +<h2 id="কাস্টম_Geckoর_বিপরীতে_বিল্ড_করা">কাস্টম Gecko'র বিপরীতে বিল্ড করা</h2> +<p>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 <code>.userconfig</code>. For example, if you want to build against mozilla-central:</p> +<pre>export GECKO_PATH=/path/to/mozilla-central +export GECKO_OBJDIR=/path/to/mozilla-central/objdir-gonk +</pre> +<div class="note"> + <p><strong>Note</strong>: if building against a custom Gecko in Mac OS X, the mozilla-central directory must be in a case sensitive file system.<br> + </p> +</div> +<p id="Building_a_branch">Note that you can do this either before you pull the repository (i.e. before the <code>config.sh</code> 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.</p> +<p>For more information, read <a class="vt-p" href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file#Changing_the_Gecko_source_tree" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file#Changing_the_Gecko_source_tree">Changing the Gecko source tree</a>.</p> +<h2 id="ব্রাঞ্চ_তৈরি_করা">ব্রাঞ্চ তৈরি করা</h2> +<p>If you want to build for a branch other than the default branch (<strong>note: the default branch may not be "master"!</strong>), you will need to prefix your call to config.sh with a branch name, like this:</p> +<pre>BRANCH=branch-name ./config.sh <device></pre> +<p>The branch names are pretty logical, and largely follow the names of the products/versions, so <code>v1-train</code>, <code>v1.0.0</code>, <code>v1.0.1</code>, <code>v1.1</code>, <code>v1.1.0hd</code>, <code>v1.2, v1.3, v1.4</code> and so on into the future. As an example, to build B2G Firefox 1.2, for the Arm emulator, you'd enter</p> +<pre>BRANCH=v1.2 ./config.sh emulator</pre> +<p>If you have run config.sh already, you can see the names of the branches, by going to <code>B2G/.repo/manifests</code> and doing "<code>git branch -a</code>" (this isn't populated unti then.) <strong>The branch name is given as the final token on the line, e.g. "<code>v1-train</code>" or "<code>master</code>"</strong>:</p> +<pre> remotes/origin/master + remotes/origin/v1-train + remotes/origin/v1.0.0 + remotes/origin/v1.0.1</pre> +<p>See <a class="vt-p" href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a> for additional customizations you can do.</p> +<h2 id="আপনার_B2G_নতুন_মেশিনে_কপি_করা">আপনার B2G নতুন মেশিনে কপি করা</h2> +<p>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:</p> +<pre>rsync -a <em>source</em>/ <em>dest</em>/ +</pre> +<p>Where <code>source</code> is the full path (including the trailing slash) of the source tree, and <code>dest</code> is where you want to put it (the trailing slash is also important!).</p> +<div class="note"> + <strong>Note:</strong> If you copy the files from a computer with another platform ensure to run '<em>./build.sh clean'</em> before you start the build process. If you don't do this you might encounter compilation issues.</div> +<p>If you do this, you can skip all of the rest of this article and move right on to <a class="vt-p" href="/en-US/docs/Mozilla/Firefox_OS/Building" title="Mozilla/Firefox_OS/Building">building</a>.</p> +<h2 id="আপনার_B2G_আপডেট_করা">আপনার B2G আপডেট করা</h2> +<p>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:</p> +<pre>git fetch origin +git checkout origin/master</pre> +<p>You can check that these worked correctly by running:</p> +<pre>git show HEAD</pre> +<p>and checking that the commit shown matches the latest commit shown at: <a class="vt-p" href="https://github.com/mozilla-b2g/B2G/commits/master" title="https://github.com/mozilla-b2g/B2G/commits/master">https://github.com/mozilla-b2g/B2G/commits/master</a></p> 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 +--- +<div class="summary"> + <p>Quickstart information on coding open web apps.</p> +</div> +<dl> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></dt> + <dd> + 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.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></dt> + <dd> + This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduction to Firefox OS</a></dt> + <dd> + An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_manifests">Introduction to manifests</a></dt> + <dd> + An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_Web_developers">App development for web developers</a></dt> + <dd> + If you're a web developer, how do open web apps differ from what you're used to? This article explains all.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_mobile_developers">App development for mobile developers</a></dt> + <dd> + 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.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></dt> + <dd> + This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Payments">Payments</a></dt> + <dd> + How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/App_tools">App tools</a></dt> + <dd> + Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.</dd> +</dl> 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 +--- +<article class="brush: js"> + <div class="summary"> + <p>ডেভেলপাররা এত দিন ধরে যা চেয়েছিলেনঃ শুধুমাত্র HTML, CSS আর জাভাস্ক্রিপ্ট দিয়ে অ্যাপ তৈরি করতে যা সব প্ল্যাটফর্মে চলবে - ওপেন ওয়েব অ্যাপ ঠিক তাই। এসব অ্যাপ ডিভাইসে ইন্সটল করা যায়। ফায়ারফক্স ওএস হচ্ছে প্রথম প্ল্যাটফর্ম ওপেন ওয়েব অ্যাপ এর জন্য! এই গাইড লেখা হয়েছে যাতে আপনি খুব অল্প সময়ের মধ্যেই অ্যাপ সম্পর্কে প্রাথমিক আইডিয়া নিয়ে ফাটাফাটি একটা অ্যাপ তৈরি করা শুরু করে দিতে পারেন!</p> + </div> + <p>গাইডটি ভালভাবে বুঝার জন্য আপনি <a href="https://github.com/chrisdavidmills/mdn-app-template">দ্রুত অ্যাপ বানানোর টেম্পলেট</a> ডাউনলোড করে নিতে পারেন। এর ভেতর কি আছে সেটা জানার জন্য <a href="/bn-BD/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#.E0.A6.85.E0.A7.8D.E0.A6.AF.E0.A6.BE.E0.A6.AA_.E0.A6.9F.E0.A7.87.E0.A6.AE.E0.A7.8D.E0.A6.AA.E0.A6.B2.E0.A7.87.E0.A6.9F">অ্যাপ টেম্পলেট</a> গাইডটি পড়ুন।</p> + <h2 id="অ্যাপ_স্ট্রাকচার">অ্যাপ স্ট্রাকচার</h2> + <h3 id="প্যাকেজড_বনাম_হোস্ট-করা_অ্যাপ">প্যাকেজড বনাম হোস্ট-করা অ্যাপ</h3> + <p>দুই ধরণের ওপেন ওয়েব অ্যাপ আছেঃ প্যাকেজড আর হোস্ট-করা। প্যাকেজড অ্যাপ হচ্ছে <code>zip</code> ফাইল যার ভেতর অ্যাপ এর সব ফাইলঃ HTML, CSS, JavaScript, ছবি, মেনিফেস্ট, ইত্যাদি দিয়ে দেওয়া থাকে। আর হোস্ট-করা এপ গুলো কোন একটা ডোমেইন এ সার্ভারে হোস্ট করা থাকে, স্ট্যান্ডার্ড ওয়েবসাইট গুলোর মতই। উভয় ধরণের অ্যাপ এরই বৈধ মেনিফেস্ট ফাইল লাগে। ফায়ারফক্স মার্কেটপ্লেসে যদি অ্যাপ জমা দিতে চান, তাহলে হয় আপনাকে অ্যাপটি জিপ ফাইল হিসেবে আপলোড করতে হবে অথবা কোন সার্ভারে হোস্ট-করে তার লিঙ্ক দিতে হবে।</p> + <div style="width: 480px; margin: 0 auto;"> + <p><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/Q7x-B13y33Q/?feature=player_detailpage" width="480"></iframe></p> + <div class="video-caption"> + <p>Treehouse এর সাথে যৌথ উদ্যোগে বানানো হয়েছেঃ <a class="button" href="http://teamtreehouse.com/?cid=1154">Treehouse এর ব্যাপারে জানতে দেখুন!</a></p> + </div> + </div> + <p>এই গাইডের উদ্দেশ্য হল আপনার কম্পিউটারের <code>localhost</code> এড্রেসে একটি হোস্ট-করা অ্যাপ তৈরি করা। যখন আপনার মনে হবে আপনার অ্যাপ ফায়ারফক্স মার্কেটপ্লেসে জমা দেওয়ার জন্য রেডি, আপনার সিদ্ধান্ত নিতে হবে আপনি কি প্যাকেজড অ্যাপ হিসেবে দিবেন নাকি কোন সার্ভারে হোস্ট করে দেবেন।</p> + <h3 id="অ্যাপ_মেনিফেস্ট">অ্যাপ মেনিফেস্ট</h3> + <p>প্রত্যেক ফায়ারফক্স অ্যাপ এর রুট ফোল্ডারে একটি <a href="/bn-BD/docs/Web/Apps/Manifest"><code>manifest.webapp</code></a> ফাইল থাকা লাগে। এই ফাইলের কাজ হল অ্যাপ সম্পর্কে গুরুত্বপূর্ণ তথ্য, যেমন ভার্সন, নাম, বর্ণনা, আইকন কোথায় আছে, লোকালাইজেশনের তথ্য, কোন কোন ডোমেইন থেকে অ্যাপটি ইন্সটল করা যাবে এবং আরো অনেক কিছু সরবরাহ করা। তবে শুধুমাত্র নাম আর বর্ণনাই হল আবশ্যকীয়, বাকিগুলো ঐচ্ছিক। অ্যাপ টেম্পলেটের সাথে আসা খুবই সহজ মেনিফেস্টটি নিচের মত দেখতেঃ</p> + <pre class="brush: js">{ + "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" +}</pre> + <div style="width: 480px; margin: 0 auto;"> + <p><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/dgAUgHQOm8M#t/?feature=player_detailpage" width="480"></iframe></p> + <div class="video-caption"> + <p>Treehouse এর সাথে যৌথভাবে বানানো হয়েছেঃ <a class="button" href="http://teamtreehouse.com/?cid=1154">দেখুন!</a></p> + </div> + </div> + <p> </p> + <p>এরকম প্রাথমিক একটা মেনিফেস্ট-ই দরকার অ্যাপ শুরু করার জন্য। মেনিফেস্ট নিয়ে আরো জানতে পড়ুন <a href="/bn-BD/docs/Web/Apps/Manifest">অ্যাপ মেনিফেস্ট</a>।</p> + <h2 id="অ্যাপ_লে-আউট_এবং_ডিজাইন">অ্যাপ লে-আউট এবং ডিজাইন</h2> + <p>বিভিন্ন ডিভাইসে আজকাল অনেক বেশি আর বিভিন্ন রকম রেজ্যুলেশনের ব্যবহার দেখা যায়। তাই রেস্পন্সিভ ডিজাইনের দিকেই সবাই আজকাল ঝুঁকে পড়ছেন। মোবাইল প্ল্যাটফর্ম যেমন ফায়ারফক্স ওএস যদি আপনার আসল টার্গেট হয়, এরপরেও মানুষজন অন্য ডিভাইস থেকেও আপনার অ্যাপ যাতে ব্যবহার করতে পারে, সেজন্য রেস্পন্সিভ ডিজাইন মেনে চলা উচিত। <a href="//developer.mozilla.org/docs/CSS/Media_queries">CSS media queries</a> ব্যবহার করে নিচের CSS উদাহরণের মত করে বিভিন্ন ডিভাইসে আপনার অ্যাপ যাতে সুন্দরমত দেখায় তা নিশ্চিত করতে পারেনঃ</p> + <pre class="brush: 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 */ +}</pre> + <p>রেস্পন্সিভ ডিজাইন আর মোবাইলের অ্যাপ লেখার জন্য অনেক জাভাস্ক্রিপ্ট আর সিএসএস ফ্রেমওয়ার্ক আছে (<a href="http://twitter.github.com/bootstrap">Bootstrap</a>, ইত্যাদি।) আপনার অ্যাপ আর ডেভেলপমেন্ট-স্টাইলের সাথে মিলে যায় এমন ফ্রেমওয়ার্কগুলোই ব্যবহার করুন।</p> + <h2 id="ওয়েব_API_সমূহ">ওয়েব API সমূহ</h2> + <p>যেমন নতুন নতুন ডিভাইস বের হচ্ছে, জাভাস্ক্রিপ্ট API ও তার সাথে তাল মিলিয়েই তৈরি হচ্ছে। মজিলা <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> এর মাধ্যমে ডজন ডজন স্ট্যান্ডার্ড মোবাইল ফিচার জাভাস্ক্রিপ্ট API এর মাধ্যমে আমাদের হাতে এনে দিয়েছে। <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> পাতায় কোন কোন ডিভাইস সমর্থিত এবং তাদের স্ট্যাটাস দেখতে পাবেন। জাভাস্ক্রিপ্টের মাধ্যেম ডিভাইসে কোন একটা ফিচার আছে কিনা চেক করে নেওয়া উচিত, নিচের উদাহরণে দেখানো হয়েছে কিভাবে এটা করা যায়ঃ</p> + <pre class="brush: js">// If this device supports the vibrate API... +if('vibrate' in navigator) { + // ... vibrate for a second + navigator.vibrate(1000); +}</pre> + <p>ডিভাইসের ব্যাটারির অবস্থা'র ওপর নির্ভর করে কোন একটা <code><div></code> এর স্টাইল কিভাবে বদলানো যায়, নিচের উদাহরণে তা দেখানো হয়েছেঃ</p> + <pre class="brush: java">// 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' : ''; + } +})();</pre> + <p>ওপরের কোডেঃ যখন আপনি নিশ্চিত যে <a href="/bn-BD/docs/DOM/window.navigator.battery">ব্যাটারি API</a> সমর্থিত, আপনি <code>chargingchange</code> এবং <code>levelchange</code> ইভেন্টের জন্য লিসেনার যোগ করতে পারবেন HTML এলিমেন্টটির ডিসপ্লে পরিবর্তন করার জন্য। দ্রুত-শুরু করার টেম্পলেটে নিচের মত করে যোগ করে দেখুন তো কোড কাজ করে কিনা।</p> + <p>মাঝেমধ্যেই <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> পাতাটি পড়ুন যাতে বিভিন্ন ডিভাইসে বিভিন্ন API এর সমর্থন সম্পর্কে আপনি আপডেটেড থাকেন।</p> + <h3 id="API_ফাংশনালিটি_ইন্সটল_করা">API ফাংশনালিটি ইন্সটল করা</h3> + <p>আমাদের template এ, আমরা একটা install button যোগ করেছি যাতে ক্লিক করে আপনি আপনার আপ্লিকেশনটি ওয়েবপেজ হিসেবে দেখতে পারবেন। , আপ্লিকেশন হিসেবে সাইটটি FirefoxOS এ দিতে হলে Button টির মার্কাআপ তেমন কঠিন নয়।</p> + <pre class="brush: html"><button id="install-btn">Install app</button></pre> + <p> Install API ব্যাবহার করে এই বাটনের ফাংশনটি যোগ করা হয়েছে। (দেখুন install.js):</p> + <pre class="brush: 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); + }; +}; +</pre> + <p>Let's run through briefly what is going on:</p> + <ol> + <li>We get a reference to the install button and store it in the variable <code>button</code>.</li> + <li>We use <code>navigator.mozApps.checkInstalled</code> to check whether the app defined by the manifest at <code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp</code> is already installed on the device. This test is stored in the variable <code>installCheck</code>.</li> + <li>When the test is successfully carried out, its success event is fired, therefore <code>installCheck.onsuccess = function() { ... }</code> is run.</li> + <li>We then test for the existence of <code>installCheck.result</code> using an <code>if</code> 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.</li> + <li>If the app isn't installed, we add a click event listener to the button, so the <code>install()</code> function is run when the button is clicked.</li> + <li>When the button is clicked and the <code>install()</code> function is run, we store the manifest file location in a variable called <code>manifest_url</code>, and then install the app using <code>navigator.mozApps.install(manifest_url)</code>, storing a reference to that installation in the <code>installLocFind</code> 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.</li> + </ol> + <p>You may want to verify the <a href="/en-US/docs/Web/Apps/JavaScript_API">implementation state of the API</a> when first coming to Installable web apps.</p> + <div class="note"> + <p>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 <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">FAQs about apps manifests</a> for more information on origins.</p> + </div> + <h2 id="WebRT_APIs_(Permissions-based_APIs)">WebRT APIs (Permissions-based APIs)</h2> + <p>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 <code>manifest.webapp</code> file like so:</p> + <pre class="brush: js">// New key in the manifest: "permissions" +// Request access to any number of APIs +// Here we request permissions to the systemXHR API +"permissions": { + "systemXHR": {} +}</pre> + <p>The three levels of permission are as follows:</p> + <ul> + <li>Normal — APIs that don't need any kind of special access permissions.</li> + <li>Privileged — APIs available to developers to use in their applications, as long as they set access permissions in the app manifest files, and distribute them through a trusted source.</li> + <li>Certified — APIs that control critical functions on a device, such as the call dialer and messaging services. These are generally not available for third party developers to use.</li> + </ul> + <p>For more information on app permission levels, read <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps">Types of packaged apps</a>. You can find out more information about what APIs require permissions, and what permissions are required, at <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a>.</p> + <div class="note"> + <p>It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.</p> + </div> + <h2 id="Tools_Testing">Tools & Testing</h2> + <p>Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps.</p> + <h3 id="Firefox_OS_Simulator">Firefox OS Simulator</h3> + <p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> 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.</p> + <h3 id="App_Manager">App Manager</h3> + <p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. 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.</p> + <h3 id="Unit_Testing">Unit Testing</h3> + <p>Unit tests are extremely valuable when testing on different devices and builds. jQuery's <a href="http://qunitjs.com">QUnit</a> is a popular client-side testing utility, but you can use any set of testing tools you'd like.</p> + <h3 id="Installing_Firefox_OS_on_a_Device">Installing Firefox OS on a Device</h3> + <p>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 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform">MDN</a>.</p> + <p>Dedicated Firefox OS developer preview devices are also available: read our <a href="https://marketplace.firefox.com/developers/dev_phone">Developer preview phone page</a> for more information.</p> + <h2 id="App_Submission_and_Distribution">App Submission and Distribution</h2> + <p>Once your app is complete, you can host it yourself like a standard web site or app (read <a href="/en-US/docs/Web/Apps/Publishing/Self-publishing_Apps">Self-publishing apps</a> for more information), or it can be <a href="https://marketplace.firefox.com/developers/submit/app/manifest">submitted</a> to the <a href="https://marketplace.firefox.com">Firefox Marketplace</a>. 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.</p> + <h3 id="More_Marketplace_Listing_Information">More Marketplace & Listing Information</h3> + <ol> + <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an App to the Firefox OS Marketplace </a></li> + <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Marketplace Review Criteria </a></li> + <li><a href="http://s.vid.ly/embeded.html?link=8k2n4w&autoplay=false">App Submission Video Walkthrough </a></li> + </ol> +</article> 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..97d0b6bf84 --- /dev/null +++ b/files/bn/archive/b2g_os/quickstart/ওপেন_ওয়েব_অ্যাপ_পরিচিতি/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 +--- +<p><img alt="Multi devices" src="https://developer.mozilla.org/files/4523/multidevices.png" style="width: 640px; height: 225px;"></p> +<div class="summary"> + <p>যারা ওপেন ওয়েব অ্যাপ সম্পর্কে জানতে আগ্রহী তাদের জন্য এই প্রবন্ধটি একটি ভাল প্রারম্ভিকা হিসেবে সাজানো হয়েছে। আপনি একজন ডেভেলপার অথবা একজন প্রজেক্ট ম্যানেজার অথবা অ্যাপ তৈরি ও সরবরাহের যেকোন অংশের সাথে আপনি জড়িত - যাই হোক না কেন এই আর্টিকেল আপনার জন্যই। এখানে আমরা আপনাকে ওপেন ওয়েব অ্যাপ সম্পর্কে অল্পস্বল্প জানাবো। এছাড়াও আপনি জানবেন কেন ওয়েব অ্যাপ - এর পেছনে আমাদের দর্শনটা কি!</p> +</div> +<p>মুক্ত (ওপেন) <em>ওয়েব অ্যাপ</em> এবং অন্যান্য স্ট্যান্ডার্ড ওয়েবসাইট অথবা ওয়েবপেজ এর মধ্যে তেমন কোন পার্থক্য নেই । স্ট্যান্ডার্ড, <em>মুক্ত</em> ওয়েব টেকনোলজি যেমন - এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট লিখেই এদের তৈরি করা হয়। ওয়েব ব্রাউজার দিয়েই আপনি অ্যাপগুলো ব্যবহার করবেন। ওয়েবপেজ এবং ওয়েব অ্যাপ এর মধ্যে মূল পার্থক্য হল ওয়েব অ্যাপ গুলোর ইন্সটল হওয়ার এবং অফলাইনে কাজ করার ক্ষমতা রয়েছে। উন্নত API যেগুলো ডিভাইসের বিভিন্ন ফিচার যেমন ক্যামেরা, এড্রেস বুক এবং আরও অনেক কিছুর সাথে যোগাযোগ করতে পারে, ওয়েব অ্যাপ সেগুলো নিয়ে কাজ করতে পারে। আর চেষ্টা করা হয়েছে যেন যথাসম্ভব, মুক্ত প্রযুক্তি ব্যবহার করা যায়। যদি বিভিন্ন প্লাটফর্ম এ ওয়েব অ্যাপ সাপোর্ট করাতে যেয়ে প্রযুক্তিগত পার্থক্য পাওয়া যায়, তাহলে চেষ্টা করতে হবে যেন যত বেশি সম্ভব প্ল্যাটফর্মে এদের সাপোর্ট দেওয়া যায়। আপনি যে ফিচার চাচ্ছেন সেটি কোন একটি প্ল্যাটফর্মে আছে কিনা তা জেনে নেওয়া, বিভিন্ন প্ল্যাটফর্মের জন্য উপযুক্ত কোড ব্যবহার করা ইত্যাদির মাধ্যমে বিভিন্ন প্ল্যাটফর্মে যাতে আপনার এপ্লিকেশন চলতে পারে সেটি নিশ্চিত করতে পারবেন।</p> +<h2 id="ওপেন_ওয়েব_অ্যাপের_সুবিধাসমূহ" style="line-height: 30px;">ওপেন ওয়েব অ্যাপের সুবিধাসমূহ </h2> +<p>আসুন ওপেন ওয়েব অ্যাপের সুবিধা সমূহ আরও একটু বিস্তারিত ভাবে দেখি:</p> +<ul> + <li><strong>লোকাল ইন্সটলেশন এবং অফলাইন স্টোরেজ</strong>: মুক্ত ওয়েব এপ্লিকেশনগুলোকে ডিভাইসে ইন্সটল করা যায়। এরা APIs যেমন <a href="/bn-BD/docs/Web/Guide/DOM/Storage" title="/en-US/docs/Web/Guide/DOM/Storage">লোকাল স্টোরেজ</a> এবং <a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> ব্যবহার করে ডিভাইসেই তথ্য সংরক্ষণ করে রাখতে পারে। এছাড়াও, মুক্ত ওয়্যাপ প্রযুক্তি অল্পস্বল্প জায়গা নেয়, আপনার ডিভাইসের নেটিভ এপ্লিকেশনের সাথে তুলনা করলে এদেরকে আরো আরামে, স্বয়ংক্রিয়ভাবেই আপডেট করা যায়, পুরোপুরি নতুন একটা প্যাকেজ ইন্সটল করা লাগে না এদের আপডেট করার জন্য। (তবে প্যাকেজড ওয়াপ আপডেট করতে গেলে পুরোটাই ডাউনলোড করতে হয়)। এসব অ্যাপ ব্যবহার করতে সবসময় ইন্টারনেটে যুক্ত হয়ে থাকা লাগে না, তাই নেটোয়ার্কে সমস্যা থাকলেও অ্যাপগুলো ভালভাবেই কাজ করে।</li> + <li><strong>হার্ডওয়ার ব্যবহারঃ</strong> ওপেন ওয়েব অ্যাপ এর সাথে মেটাডেটা ব্যবহার করে এপ্লিকেশনকে হার্ডওয়ারের সাথে যোগাযোগ করে এমন APIs ব্যবহার করার অনুমতি দিতে পারেন। এই সুবিধা গতানুগতিক ওয়েব প্ল্যাটফর্মে ছিল না।</li> + <li><strong>বাঁধা ভেঙ্গে দিনঃ</strong> মোবাইল প্ল্যাটফর্মে এতদিন আমরা দেখেছি একেক কোম্পানি নিজেদের মত করে প্রযুক্তি দিত আমাদের, এক ডিভাইসের জন্য লেখা অ্যাপ অন্য ডিভাইসে চলত না। অনেক স্মার্টফোন প্রস্তুতকারক এপ্লিকেশন কেনার জন্য ক্রেডিট কার্ড চেয়ে থাকে, তাই এসব প্ল্যাটফর্মে খরচেরও একটা ব্যাপার থাকে। ওপেন ওয়েব অ্যাপ এসব বাঁধা ভেঙ্গে দিয়ে অনেক স্বস্তা, আর প্রায় সব ডিভাইসেই যাতে আপনার এপ্লিকেশন চলে, সেই সুবিধা করে দেয়। বিশেষ করে ফায়ারফক্স ওএস ডিভাইসের কথা বলতেই হয় যেখানে আসলে হাল্কা-পাতলা একটা লিনাক্স কার্নেলের ওপরে ফায়ারফক্স ছাড়া আর কিছুই চলছে না! এসব ডিভাইসের জন্য ওপেন ওয়েব অ্যাপ বিশেষভাবে উপযোগী, ওয়েব হচ্ছে এমন একটা প্ল্যাটফর্ম যা সব ডিভাইসেই সমর্থিত। এছাড়া আপনি যদি আপনার লেখা এপ্লিকেশন বিক্রি করতে চান বা গ্রাহকের মোবাইল বিলের মাধ্যমে বিল নিতে চান, ফায়ারফক্স ওএস সহজেই এগুলো করা যায়।</li> + <li><strong>ওপেন ওয়েব অ্যাপ স্টোরঃ</strong> আগের পয়েন্টের আলোচনার সূত্র ধরেঃ আপনার অ্যাপ চাইলে প্রতিষ্ঠিত মার্কেট-প্লেসে (যেমন <a href="https://marketplace.firefox.com/">ফায়ারফক্স মার্কেটপ্লেস</a>) অথবা অন্য যেকোন জায়গায় রাখতে পারেন (হোস্ট করতে পারেন)। আপনি - ডেভেলপার যাতে সহজে অ্যাপ তৈরি থেকে শুরু করে বিতরণ, ক্রেতার সাথে সম্পর্ক সবকিছুই যাতে নিয়ন্ত্রণ করতে পারেন এটাই মজিলা'র উদ্দেশ্য। আর ওয়েবের অন্যান্য জিনিসের মতই সহজে আপনার অ্যাপ খোঁজা (সার্চ) করা যাবে।</li> +</ul> +<p>নিচের ভিডিওতে দেখুন ওপেন ওয়েব অ্যাপ এর সুবিধা কী, আর ফায়ারফক্স ওএস প্ল্যাটফর্মে কিভাবে ডেভেলপ করা যায়ঃ</p> +<p style="text-align: center;"><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/RJJkFshnnVc/?feature=player_detailpage" width="480"></iframe></p> +<h2 id="ওয়েব-ই_প্ল্যাটফর্ম" style="line-height: 30px;">ওয়েব-ই প্ল্যাটফর্ম</h2> +<p>যখন ওপেন ওয়েব অ্যাপ কোন প্ল্যাটফর্মে (যেমন ফায়ারফক্স ওএস) এ ইন্সটল করা হয়, তখন এটি শুধু একটি সাধারণ বুকমার্কের থেকেও বেশিকিছু। এটা সিস্টেমের-ই একটা অবিচ্ছেদ্য অংশ হয়ে যায়। ওপেন ওয়েব অ্যাপ এই বিশাল সুযোগ নিয়েই এসেছে। আমাদের এই সুযোগ হাতছাড়া করা উচিত নয়, তা নাহলে ওয়েব যেমন একসময় এলোমেলো অবস্থায় ছিল, সেযুগে ফেরত যেতে পারে। এটা পরিষ্কার যে ওপেন ওয়েব অ্যাপ (সংক্ষেপে OWA) একটি স্ট্যান্ডার্ড, আর ওয়েবের অংশ হিসেবেই আমরা দেখি। সফল হলে একসময় ওপেন ওয়েব অ্যাপ সব ব্রাউজারেই কাজ করবে, যেমনটা কাজ করবে সব অপারেটিং সিস্টেম আর ডিভাইসে।</p> +<p>মজিলা'তে আমরা দিনরাত কাজ করছি এই অ্যাপ প্ল্যাটফর্ম তৈরি করতে - যেটা পুরোপুরিভাবে ওপেন ওয়েবের ওপর দাঁড়িয়ে আছে। একে "মজিলা প্ল্যাটফর্ম" বা "ফায়ারফক্স প্ল্যাটফর্ম" হিসেবে তৈরি করার আমাদের কোন উদ্দেশ্য নেই। <strong>এর প্ল্যাটফর্ম হচ্ছে ওয়েব।</strong> আমরা এক গাদা মুক্ত APIs তৈরি করছি আর এগুলো কার্যকরী করছি, যাতে পোর্টেবল অ্যাপ ওয়েবের ওপর ভিত্তি করে চলতে পারে হার্ডওয়ার <a href="http://en.wikipedia.org/wiki/Vendor_lock-in">প্রস্তুতকারকের ওপর নির্ভরশীল হওয়া</a> ছাড়াই। অন্যান্য গ্রুপ যেমন ফেসবুক আর গুগল ক্রম ও কাজ করছে ওয়েব-ভিত্তিক অ্যাপ প্লাটফর্মের ওপর। <a href="https://developers.facebook.com/docs/guides/canvas/">ফেসবুক অ্যাপ</a> ফেসবুকের সাথে ভালভাবেই যুক্ত আর <a href="http://www.google.com/intl/en/chrome/webstore/apps.html">ক্রোম অ্যাপ</a> ডিজাইন করা হয় এমনভাবে যাতে সেটা ক্রোম ওএস আর গুগল সার্ভারের ওপর নির্ভর করে চলে। তবে ওপেন ওয়েব অ্যাপ এর সাথে সবচেয়ে বেশি মিল আছে ক্রোম অ্যাপ এরই। আমরা গুগল ক্রোম টিমের সাথে মিলে কাজ করি অ্যাপ স্ট্যান্ডার্ডের উত্তরোত্তর উন্নতির জন্য আর আমাদের অনেক দর্শন-ও মিলে যায়। সব ওয়েব-ভিত্তিক অ্যাপ প্লয়াটফর্ম মিলে গিয়ে একটি প্ল্যাটফর্ম হয়ে যাওয়ার বেশ ভাল সম্ভাবনা আর সুযোগ রয়েছে, তাই আমরা সব ভেন্ডরদের আমন্ত্রণ জানাই সঠিক ওপেন ওয়েব অ্যাপ APIs গুলো তৈরি করতে আমাদের সাহায্য করার জন্য।</p> +<p>যদিও এখন ওপেন ওয়েব অ্যাপ ব্যবহার করতে আপনার অবশ্যই মজিলা ফায়ারফক্স ভিত্তিক কোন ইঞ্জিন ("ওয়েব রানটাইম") ব্যবহার করতে হবে, আমরা আশা করি ভবিষ্যতে আর এই বাধা থাকবে না। ওপেন ওয়েব অ্যাপ প্রজেক্টের অনেক অংশ নিয়ে এখনো কাজ চলছে তাই সব ব্রাউজারে একই সাথে এদের প্রয়োগ করা সম্বব নয়। তাই এর অনেক অংশ স্ট্যান্ডার্ড হয়ে গেছে সত্য, কিন্তু অনেক কিছুই আছে যা এখনো স্ট্যান্ডার্ড না। আশা করা যায়, সব ব্রাউজারেই ওপেন ওয়েব অ্যাপ স্ট্যান্ডার্ড হিসেবে পুরোপুরি সমর্থিত হবে।</p> +<p>সেজন্য, যখন আপনি ওপেন ওয়েব অ্যাপ নিয়ে MDN এর বিভিন্ন আর্টিকেল পড়ছেন, মনে রাখবেন বেশিরভাগ তথ্যই এখন ফায়ারফক্সের জন্য প্রযোজ্য হলেও আশা করা যায় ভবিষ্যতে আপনার ওপেন ওয়েব অ্যাপ সব ব্রাউজারেই সমর্থিত হবে।</p> +<h2 id="ওয়েব_স্ট্যান্ডার্ডসমূহ" style="line-height: 30px;">ওয়েব স্ট্যান্ডার্ডসমূহ</h2> +<p>ও. ডব্লিও. এ প্রযুক্তি শুধুমাত্র একটি টুকরো নয়, এটি একটি ক্লাবের মত যা বিভিন্ন প্রযুক্তিকে সংযোগ করে এবং তাদের কিছু খুবই নতুন। এই মুহূর্তে, 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. কিন্তু মোজিলার মিশন হলো সবার সাথে শেয়ার করা এবং সবাইকে ক্ষমতাবান করা, এই পরিস্থিতি শুধুমাত্র সাময়িক। এই জন্যে ও. ডব্লিও. এ ডকুমেন্টে আমরা পরিষ্কারভাবে ও. ডব্লিও. এ অংশ চিহ্নিত করার চেষ্টা করব যা এখনো প্রমিত হয় নি।</p> +<p>দয়া করে নোট করুন যে কিছু ও. ডব্লিও. এ সংক্রান্ত প্রস্তাব এবং potential standards যা মোজিলা দ্বারা ব্যবহার করা হয় না থাকতে পারে।</p> +<h3 id="Intended_eventual_standards" style="line-height: 24px; letter-spacing: normal;">Intended eventual standards</h3> +<p>So here are the parts not standardized yet across the different Web platforms and that still are Firefox-only for the moment:</p> +<ul> + <li><a href="/en-US/docs/Web/Apps/Manifest">OWA manifest</a> একটি অ্যাপ্লিকেশন সংজ্ঞায়িত করার জন্য</li> + <li><a href="/en-US/docs/Web/Apps/JavaScript_API">The Complete OWA API</a> অ্যাপ্লিকেশন এর কাজ করার জন্য</li> + <li><a href="https://wiki.mozilla.org/WebAPI">Web APIs</a> ফোন, ভূঅবস্থান ইত্যাদি জিনিস অ্যাক্সেস করতে। স্ট্যাটাস রিপোর্ট এর জন্য <a href="http://arewemobileyet.com/">arewemobileyet.com</a> দেখুন।</li> + <li><a href="/en-US/docs/Mozilla/Persona">Identity (Persona)</a> ব্যবহারকারীর তথ্যের সাথে কাজ করার জন্য।</li> + <li><a href="https://wiki.mozilla.org/WebAPI/WebPayment">WebPayment API</a> কোনো মার্কেটপ্লেস থেকে ক্রয় এবং ইন-অ্যাপ্লিকেশন পেমেন্ট সহজতর করার জন্য।</li> + <li><a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">OWA Receipts</a> যেকোনো ডিভাইসে পেইড অ্যাপস যাচাই এবং যেকোনো মার্কেটপ্লেস থেকে Apps বিক্রি করার জন্য।</li> +</ul> +<h3 id="মার্কেটপ্লেস" style="line-height: 24px; letter-spacing: normal;">মার্কেটপ্লেস</h3> +<h4 id="কিনুন_একবার_চালান_সবখানে" style="line-height: 18px; letter-spacing: normal;">কিনুন একবার, চালান সবখানে</h4> +<p>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 <a href="http://bits.blogs.nytimes.com/2012/09/07/a-firefox-smartphone-for-the-poor/">launch the first Firefox OS phone</a> but that will be just one device on which to run your apps. When you purchase an app through the <a href="https://marketplace.firefox.com/">Firefox Marketplace</a>, the system installs a receipt on your device. The <a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">receipt</a> 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 <em>is not tied</em> 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. <strong>When you buy an app, it is intended to be portable across any device that supports the Open Web Apps system.</strong></p> +<p>Mozilla is building the infrastructure needed to run Open Web Apps on any HTML5 device. <a href="http://www.mozilla.org/en-US/firefox/mobile/features/">Firefox for Android</a> will let you install and run apps (you can try it today on the <a href="http://nightly.mozilla.org/">nightly</a> 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 <a href="http://nightly.mozilla.org/">nightly</a> 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 <a href="https://persona.org/include.js">shim</a> for ideas on how to support the apps platform on a non-Firefox browser.</p> +<p>In the future the Open Web Apps system will support <a href="http://docs.services.mozilla.com/aitc/">syncing your installed apps</a> 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 <a href="https://wiki.mozilla.org/WebAPI/">mobile specific web APIs</a> which are not implemented on all platforms.</p> +<p>The video below provides a useful overview of the advantages of open marketplaces and an open web approach to app discovery:</p> +<p style="text-align: center;"><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/QCH_ncCrZfE/?feature=player_detailpage" width="480"></iframe></p> +<h3 id="WebPayment_API" style="line-height: 24px; letter-spacing: normal;">WebPayment API</h3> +<h4 id="Commerce_For_Apps" style="line-height: 18px; letter-spacing: normal;">Commerce For Apps</h4> +<p>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 <a href="https://wiki.mozilla.org/WebAPI/WebPayment">WebPayment API</a>. Supporting commerce is crucial for the growth of an apps platform. <strong>The use of the proposed payment API is completely <em>optional</em></strong>. Mozilla won’t prevent any app from using its own in-app payment system.</p> +<div> + </div> +<p> </p> 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 +--- +<h2 id="ডেভেলপারদের_জন্য_ফায়ারফক্স_ওএস_১.০.১"><strong>ডেভেলপারদের জন্য ফায়ারফক্স ওএস ১.০.১</strong></h2> +<p>ফায়ারফক্স ওএস ১.০.১ সর্বপ্রথম ২রা জুলাই ২০১৩ খ্রিঃ এর পার্টনারদের জন্য বের করা হয় এবং এটিই ছিল প্রথম ফায়ারফক্স ওএস। এর গেকো কম্পোনেন্ট হচ্ছে ফায়ারফক্স ১৮ (এখানে দেখুনঃ <a href="/en-US/docs/Mozilla/Firefox/Releases/18">Firefox 18 for developers</a>), যা ১৮ই জানুয়ারী ২০১৩ তারিখে উন্মুক্ত হয়েছিল। পূর্ববর্তী আপডেট গুলো দেখতে চাইলে Firefox ডেস্কটপ এর পূর্ববর্তী নোট গুলো পড়ুন, যা <a href="/en-US/docs/Mozilla/Firefox/Releases/17">Firefox 17 for developers</a> থেকে শুরু।</p> +<div class="note"> + <p><em>ফায়ারফক্স ওএস ১.০.১ ডকুমেন্ট এ সাহায্য করতে চান? <a href="http://beta.elchi3.de/doctracker/#list=fx&version=b2g">B2G সম্পর্কিত bugs যেগুলো লেখা দরকার</a> </em>সেগুলো দেখুন।</p> +</div> +<p> </p> +<h2 id="এইচটিএমএল_(HTML)">এইচটিএমএল (HTML)</h2> +<p>ফায়ারফক্স ওএস সম্পর্কিতঃ</p> +<ul> + <li><code><input type="file"></code> মেমরী ব্যবহার সংক্রান্ত কারণে বাতিলকৃত ({{ Bug("832923") }}).</li> +</ul> +<p>সাধারন গেকোঃ</p> +<ul> + <li>{{htmlattrxref("reversed","ol")}} এর বিশেষত্ব গুলো {{HTMLElement("ol")}} এখন সাপোর্ট করে ({{bug("601912")}}).</li> + <li> {{htmlattrxref("crossorigin","link")}} এর বিশেষত্ব গুলো {{HTMLElement("link")}} এখন সাপোর্ট করে ({{bug("786564")}}).</li> + <li> {{htmlattrxref("allowfullscreen", "iframe")}} এর বিশেষত্ব গুলো {{HTMLElement("iframe")}} বাস্তবায়ীত হয়েছে এবং এর পূর্ববর্তী {{htmlattrxref("mozallowfullscreen", "iframe")}} গুলো আনঅনুমোদিত করা হয়েছে।</li> +</ul> +<h2 id="সিএসএস_(CSS)">সিএসএস (CSS)</h2> +<p>সাধারন গেকোঃ</p> +<ul> + <li> {{cssxref("min-width")}} এবং {{cssxref("min-height")}} <code>auto</code> কী-ওয়ার্ড কে <em>initial value </em>( ফ্লেক্স আইটেম এর উপর এর কর্তিত্ব আছে কেননা এটি আইটেম এর জন্য পূর্ববর্তী ইনিসিয়াল ভ্যালু কে ০ (শুণ্য) করে দেয় ) হিসেবে ব্যবহার করে। ({{bug("763689")}})</li> + <li>ক্যস্কেডটি আপডেট করা হয়েছেঃ এখন author <code>!important</code> rules override <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS animations</a>. ({{bug("783714")}})</li> + <li>{{cssxref("background")}} এই শর্ট হ্যান্ড প্রপার্টিটি এখন CSS3 {{cssxref("background-size")}} কে, প্রপার্টির ভেতরের স্পিসিফাইড হিসেবে চিহ্নিত করে ({{bug("570326")}})</li> + <li>CSS Flexbox Module এর জন্য ইনিসিয়াল সাপোর্ট ল্যান্ড করা হয়েছে। Iএটি ডিফল্ট ভাবে নিষ্ক্রিয় তবে সেটিংস থেকে ইনেবল করা যাবে। <code>layout.css.flexbox.enabled</code> to true. ({{bug('666041')}})</li> +</ul> +<h2 id="জাভাস্ক্রিপ্ট_(JavaScript)">জাভাস্ক্রিপ্ট (JavaScript)</h2> +<p>ফায়ারফক্স ওএস সম্পর্কিতঃ</p> +<ul> + <li>সনাক্তকরণের সময় <code><video></code> বিভিন্ন ফরম্যট এর জন্য সাপোর্ট support for different formats, <code>HTMLMediaElement.prototype.canPlayType</code> h.264 video এর জন্যন ভুল করে <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">true</span> রিপোর্ট করে। যেখানে, h.264 সত্যিকার ভাবে সাপোর্টই করে না।</li> +</ul> +<p>সাধারন গেকোঃ</p> +<ul> + <li>Harmony's (ECMAScript 6) <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Proxy">Direct Proxies</a> ল্যন্ড করা হয়েছে ({{bug("703537")}}). সতর্কতাঃ এর বাস্তবায়ন এক জোড়া পরিচিত বাগ, মিসিং ফিচার এবং স্পেক এর বর্তমান অবস্থার মিসআল্যাইনমেন্ট বহন করে। প্রোডাকশন কোডের জন্য এর উপর নির্ভর করবেন না।</li> + <li>ECMAScript 6 <code>contains()</code> মেথডটি এখন স্ট্রিং এ বাস্তবায়নকৃত। দূঃভাগ্যবশত এটি Mootools 1.2, এর সাথে কম্পাটিবল নয় যা স্ট্রিং এর <code>contains()</code> থেকে ভিন্ন কিছু আশা করে কিন্তু তা নিশ্চিত করে না । Mootools এর নতুন ভার্সন গুলোতে এই সমস্যাটি সমাধান করা আছে, সাইটগুলোর উচিত তাদের Mootools ভার্সনগুলোকে ১.২ এর থেকে নতুনতরতে আপগ্রেড করা।</li> +</ul> +<h2 id="ডিওএমএপিআই_(DOMAPI)">ডিওএম/এপিআই (DOM/API)</h2> +<p>ফায়ারফক্স ওএস সম্পর্কিতঃ</p> +<ul> + <li><span id="summary_alias_container"><span id="short_desc_nonedit_display">ডিভাইস স্টোরেজ এপিআইঃ যখন কার্সরটিকে এখান থেকে কলব্যাক করা হয়, <code>navigator.getDeviceStorage("sdcard").enumerate</code>, <code><span id="summary_alias_container"><span id="short_desc_nonedit_display">this.done</span></span></code> যা পূর্বনির্ধারিত নয় (see {{ bug("902565") }}). এটি Firefox 1.2 তে ফিক্সড। রেফেরেন্সেড বাগটি সম্ভাব্য কম্পাটিবিলিটি চেক সঙ্ক্রান্ত বিষয় নির্দেশ করে।</span></span></li> + <li><a href="/en-US/docs/WebAPI/WebTelephony" rel="external">Telephony API landed</a></li> + <li><a href="/en-US/docs/WebAPI/Contacts" rel="external">Contacts API landed</a></li> + <li><a href="/en-US/docs/WebAPI/Settings" rel="external">Settings API landed</a></li> + <li><a href="/en-US/docs/Using_geolocation" rel="external">Geolocation API landed</a></li> + <li><a href="/en-US/docs/WebAPI/Web_Activities" rel="external">Web Activities landed</a></li> + <li><a href="/en-US/docs/WebAPI/TCP_Socket" rel="external">TCP Socket landed</a></li> + <li><a href="/en-US/docs/WebAPI/Using_Light_Events" rel="external">Sensor API landed</a></li> + <li><a href="/en-US/docs/WebAPI/Permissions" rel="external">Permissions and Security Model landed</a></li> +</ul> +<p>সাধারন গেকোঃ</p> +<ul> + <li><code>navigator.mozPay</code> টি ল্যান্ড করা হয়েছে। ({{bug("767818")}}).</li> + <li><code>window.devicePixelRatio টি ল্যান্ড করা হয়েছে। </code>({{bug("564815")}}).</li> + <li>MacOS X backend for <code>window.navigator.battery</code> বাস্তবায়ীত হয়েছে। ({{bug("696045")}}).</li> + <li>{{domxref("BlobBuilder", "MozBlobBuilder")}} মুছে দেয়া হয়েছে। <code style="font-size: 14px;">Blob</code> object ({{bug("744907")}}) তৈরী করার জন্য ডেভেলপারদের {{domxref("Blob")}} কন্সট্রাক্টর ব্যবহার করা উচিত।</li> + <li> {{event("visibilitychange")}} ইভেন্ট এবং <a href="/en-US/docs/DOM/Using_the_Page_Visibility_API" title="DOM/Using_the_Page_Visibility_API">Page Visibility API</a> আনপ্রিফিক্সড করা হয়েছে।({{bug("812086")}}).</li> + <li>{{domxref("TextDecoder")}} এবং {{domxref("TextEncoder")}} যুক্ত করা হয়েছে।মনে রাখবেন, Firefox 19 ({{bug("764234")}}) এ এইসবের স্পেক এবং বাস্তবায়ন পরিবর্তন করা হয়েছে।</li> + <li><code>HTMLMediaElement</code><code>.src</code> টি দুইটি প্রোপার্টিতে ভাগ করা হয়েছেঃ স্ট্যান্ডার্ড <code>src</code> প্রপার্টি, যা {{domxref("DOMString")}} এর সাথে সম্পর্কিত এবং প্রিফিক্সড <code>mozSrcObject</code> প্রপার্টি, যা <a href="/en-US/docs/WebRTC/MediaStream_API" title="WebRTC/MediaStream_API">media streams</a> ({{bug("792665")}}) এর সাথে সম্পর্কিত।</li> + <li><a href="/en-US/docs/DOM/Using_web_workers#Passing_data_by_transferring_.C2.A0ownership_%28transferable_objects%29" title="DOM/Using_web_workers#Passing_data_by_transferring_.C2.A0ownership_%28transferable_objects%29">transferable objects</a> এর সাপোর্ট গুলো।</li> + <li>{{domxref("Screen.lockOrientation()")}} মেথডটি argument ({{bug("784549")}}) হিসেবে এখন একটি <code>Array</code> of {{domxref("DOMString")}} কে সাপর্ট করে।</li> +</ul> +<h2 id="নেটওয়ার্ক">নেটওয়ার্ক</h2> +<p>সাধারন গেকোঃ</p> +<ul> + <li>কোয়ালিটি ফ্যক্টরগুলো ("q-values") এখন HTTP <code>Accept-Language</code> header ({{bug("672448")}}) তে ২ ডিজিট এ সীমাবদ্ধ।</li> + <li> <code>ALLOW-FROM</code> syntax of the <a href="/en-US/docs/The_X-FRAME-OPTIONS_response_header" title="The_X-FRAME-OPTIONS_response_header"><code>X-FRAME-OPTIONS</code></a> এখন HTTP রেস্পন্স হেডার সাপোর্ট করে। ({{bug("690168")}}).</li> +</ul> +<h2 id="১.০.১_এর_বিশেষ_বৈশিষ্ট্যাবলিঃ">১.০.১ এর বিশেষ বৈশিষ্ট্যাবলিঃ</h2> +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/WebSMS">SMS</a></li> + <li>৩জি/ডেটা</li> + <li>ওয়াইফাই</li> + <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/WebSMS">Open Web Apps</a></li> + <li>ভয়েসমেইল</li> + <li>MozApp সাপোর্ট</li> + <li style="padding-bottom: 0px;"><a href="https://developer.mozilla.org/en-US/Persona" rel="external">Persona / ID</a></li> + <li>ক্যারিয়ার বিলিং</li> + <li>ব্লু টুথ</li> + <li>নেটওয়ার্ক ম্যনেজার</li> + <li style="padding-bottom: 0px;"><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Device_Storage_API" rel="external">USB device storage</a></li> + <li>মাল্টি-প্রসেস সাপোর্ট</li> + <li>Async প্যান/জুম</li> + <li>সিম টুলকিট</li> + <li>মাল্টি-এপিএন সাপোর্ট</li> + <li>ফুল স্ক্রীন</li> + <li>ওয়াইফাই</li> + <li>সফটওয়্যার আপডেটস</li> + <li>সেল ব্রডকাস্ট</li> + <li>নোটিফিকেশন সেটিংস</li> + <li>ইউআই ট্রান্সিশন/এ্যনিমেশন</li> + <li>লোকালাইজেশন সাপোর্ট</li> + <li>ফার্স্ট রান এক্সপিরিয়েন্স</li> + <li>কল ওয়েটিং</li> + <li>কল ফরওয়ার্ডিং</li> +</ul> +<h2 id="আরো_দেখুনঃ"> আরো দেখুনঃ</h2> +<ul> + <li style="padding-bottom: 0px;"><a href="http://www.mozilla.org/en-US/firefox/os/notes/1.0.1/" title="http://www.mozilla.org/en-US/firefox/os/notes/1.0.1/">Firefox OS 1.0.1 Notes</a></li> +</ul> 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 +--- +<p>ফায়ারফক্স ওএস ১.১ হল ফায়ারফক্স ওএস এর পূর্ববর্তী সংস্করণ , যা অক্টোবর ২১ ,২০১৩ এ প্রথম প্রকাশের জন্য সহযোগীদের কাছে প্রস্তাব করা হয়। এর গেকো উপাদানসমূহ ফায়ারফক্স ১৮(<span style="line-height: 1.5;"> </span><a href="/en-US/docs/Mozilla/Firefox/Releases/18" style="line-height: 1.5; text-decoration: underline;" title="/en-US/docs/Mozilla/Firefox/Releases/24">ডেভেলোপারদের জন্য ফায়ারফক্স ১৮</a> দেখুন<span style="line-height: 1.5;">) এর উপর ভিত্তি করে করা হয়েছে যা </span><span style="line-height: 1.5;"> </span><a href="/en-US/Firefox_OS/Releases/1.0.1" style="line-height: 1.5; text-decoration: underline;">ফায়ারফক্স ওএস ১.০১</a><span style="line-height: 1.5;"> এর মতই, কিন্তু</span><span style="line-height: 1.5;"> এতে কিছু ফিক্স করা বাগ এবং অতিরিক্ত </span><span style="line-height: 1.5;">এপিআই সংযুক্ত করা হয়ছে।</span><span style="line-height: 1.5;">.</span></p> +<div class="note"> + <p>ফায়ারফক্স ওএস এর ডকুমেন্ট তৈরিতে সাহায্য করতে চান ? <a href="http://beta.elchi3.de/doctracker/#list=fx&version=b2g" style="line-height: 1.5em; text-decoration: underline;" title="http://beta.elchi3.de/doctracker/#list=fx&version=b2g">লেখা প্রয়োজন এমন B2G সম্পর্কিত বাগের তালিকা দেখুন</a><span style="line-height: 1.5em;"> এবং এখনি শুরু করুন !</span></p> +</div> +<h2 id="এইচটিএমএল">এইচটিএমএল</h2> +<p>ফায়ারফক্স ওএস ভিত্তিক:</p> +<ul> + <li><code><input type="file"></code> enabled (বিস্তারিত জানতে <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=832923" title="FIXED: Implement <input type='file'> on B2G">bug 832923</a> দেখুন ) ।</li> +</ul> +<p>সাধারণ Gecko:</p> +<h2 id="JavaScript">JavaScript</h2> +<p>ফায়ারফক্স ওএস ভিত্তিক:</p> +<ul> + <li>বিভিন্ন ফরম্যাটের জন্য <video> সমর্থন সনাক্ত করা হলে , <code>HTMLMediaElement.prototype.canPlayType </code>সঠিকভাবে রিপোর্ট করবে h.264 video এর জন্য <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">false।</span></li> +</ul> +<h2 id="DOMAPI">DOM/API</h2> +<p>ফায়ারফক্স ওএস ভিত্তিক:</p> +<p><span id="summary_alias_container"><span id="short_desc_nonedit_display">Device Storage API: যখন cursor callback করা হয় তখন <code>navigator.getDeviceStorage("sdcard").enumerate</code>, <code><span id="summary_alias_container"><span id="short_desc_nonedit_display">this.done</span></span></code> এটি অসংজ্ঞায়িত হয়। (দেখুন <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=902565" title='this.done in cursor callback of naviagtor.getDeviceStorage("sdcard").enumerate is undefined'>bug 902565</a>). যা ফায়ারফক্স ১.২ তে ঠিক করা হয়েছে। চিহ্নিত ত্রুটি এর জন্য সম্ভাব্য সামঞ্জস্যতা নিরীক্ষণ / সমাধান নীচে আলোচনা করা হল</span></span></p> +<ul> + <li>SMS, MMS and MobileMessage-relrelated APIs গুলো সম্পন্ন হয়েছে + <ul> + <li><a href="/bn-BD/docs/Web/API/Window/navigator/mozMobileMessage" title="The documentation about this has not yet been written; please consider contributing!"><code>window.navigator.mozMobileMessage</code></a></li> + <li><a href="/bn-BD/docs/Web/API/Window/navigator/mozSms" title="The documentation about this has not yet been written; please consider contributing!"><code>window.navigator.mozSms</code></a></li> + <li><a href="/bn-BD/docs/Web/API/MozMmsEvent" title="The documentation about this has not yet been written; please consider contributing!"><code>MozMmsEvent</code></a></li> + <li><a href="/bn-BD/docs/Web/API/MozMmsMessage" title="The documentation about this has not yet been written; please consider contributing!"><code>MozMmsMessage</code></a></li> + <li><a href="/bn-BD/docs/Web/API/MozMobileMessageManager" title="The documentation about this has not yet been written; please consider contributing!"><code>MozMobileMessageManager</code></a></li> + <li><a href="/bn-BD/docs/Web/API/MozMobileMessageThread" title="The documentation about this has not yet been written; please consider contributing!"><code>MozMobileMessageThread</code></a></li> + <li><a href="/bn-BD/docs/Web/API/MozSmsEvent" title="The documentation about this has not yet been written; please consider contributing!"><code>MozSmsEvent</code></a></li> + <li><a href="/bn-BD/docs/Web/API/MozSmsFilter" title="The documentation about this has not yet been written; please consider contributing!"><code>MozSmsFilter</code></a></li> + <li><a href="/bn-BD/docs/Web/API/MozSmsManager" title="The documentation about this has not yet been written; please consider contributing!"><code>MozSmsManager</code></a></li> + <li><a href="/bn-BD/docs/Web/API/MozSmsMessage" title="The documentation about this has not yet been written; please consider contributing!"><code>MozSmsMessage</code></a></li> + <li><a href="/bn-BD/docs/Web/API/MozSmsSegmentInfo" title="The documentation about this has not yet been written; please consider contributing!"><code>MozSmsSegmentInfo</code></a></li> + <li>nsIMobileMessageCallback (Gecko Internal API)</li> + <li>nsIMobileMessageCursorCallback (Gecko Internal API)</li> + <li>nsIMobileMessageService (Gecko Internal API)</li> + <li>nsIMobileMessageDatabaseService (Gecko Internal API)</li> + <li>nsIMmsService (Gecko Internal API)</li> + <li> + <div> + nsISmsService (Gecko Internal API</div> + </li> + </ul> + </li> + <li><a href="/en-US/docs/WebAPI/Simple_Push">Simple Push</a> (Push Notifications API) সম্পন্ন হয়েছে</li> + <li><a href="http://help.vodafone.co.nz/app/answers/detail/a_id/3230">WAP Push</a> সম্পন্ন হয়েছে</li> +</ul> +<h2 id="Firefox_OS_HD_support">Firefox OS HD support</h2> +<p><span id="result_box" lang="bn"><span class="hps">যেহুতু ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="hps">1.1 </span>থেকেই <span class="hps">উচ্চ</span> <span class="hps">DPI</span> <span class="hps">ডিভাইসের জন্য</span> <span class="hps">HD সহযোগিতা</span> <span class="hps">প্রদান</span> <span class="hps">করা হচ্ছে তাই এর</span> <span class="hps">এইচডি</span> <span class="hps">সংস্করণ আছে। এটি শুধুমাত্র একটি বাহ্যিক পরিবর্তন, এমনভাবে করা হয়েছে ঠিক যেমনি ভাবে আপনি ভিন্ন ভিন্ন resolution এর ডিভাইসের সাথে মানিয়ে নিতে পারেন, এবং আপনি এই ক্ষেত্রে খুব বেশি পরিমানে platform</span></span> ভিন্নতার সম্মুখীন হবেন না।</p> +<h2 id="Fixed_Firefox_OS_Issue_s">Fixed Firefox OS Issue s</h2> +<ul> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=817972">817972</a>: [Bluetooth][File-Transfer] একাধিক ফাইল হস্তান্তর সমর্থন করে।</li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=834672">834672</a>: AppProtocolHandler.js কখনো throw করা উচিত নয়।.</li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=839500">839500</a>: Gaia‘s identity.js browser process চালু করে যেটি foreground এ প্রলম্বিত হয়। তাই, আপনি যদি marketplace app চালু করেন, তখন প্রাপ্য app memory এর প্রায় ১০% ক্ষয় হতে থাকে যতক্ষন পর্যন্ত না আপনি ফোন পুনরায় চালু করেন।</li> + <li><span style="line-height: 1.5;">Persona logins এর জন্য রয়েছে Memory fix।</span></li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=834773">834773</a>:</li> + <li> pick activity ব্যবহার করে এবং গ্যালারি এর জন্য একটি ছবি নিশ্চিত করে — app gets hung with no perceived perf for 5–10 seconds</li> +</ul> +<p><a href="http://mzl.la/1bqXGXS">Resolved crashes</a></p> +<h2 id="Feature_highlights_for_Firefox_OS_1.1">Feature highlights for Firefox OS 1.1</h2> +<ul> + <li>মাল্টিমিডিয়া মেসেজিং (এমএমএস) সমর্থন বার্তা অ্যাপ্লিকেশন যোগ করা হয়েছে যাতে আপনি একই সময়ে একাধিক মানুষকে ছবি, ভিডিও, এবং পরিচিতি অডিও, বা একটি পাঠ্য বার্তা পাঠাতে পারেন।</li> + <li>ব্রাউজার থেকে বর্তমানে সংরক্ষিত ছবি, ভিডিও, এবং অডিও সমর্থন করে ।</li> + <li>ইমেইল একাউন্ট পরিচিতি এখন জিমেইল এবং উইন্ডোজ লাইভ মেইল (আউটলুক) থেকে আমদানি করা যেতে পারে।</li> + <li>ইমেইল ইমেজ, অডিও এবং ভিডিও সংযুক্তি ডাউনলোড বাস্তবায়িত হয়েছে।</li> + <li>বর্তমানে সংযুক্তি এবং গ্যালারিতে ইমেজ পাঠানো সমর্থন করে ।</li> + <li>ইমেল ড্রাফট প্রয়োগ করা হয়েছে ।</li> + <li>ডায়ালার এবং contacts উন্নত করা হয়েছে, যেমন সহজে বিদ্যমান ডায়াল নাম্বার খুঁজে সংযুক্ত করা এবং ডায়ালার পরামর্শে একটি dialed নম্বর যোগ করা হয় যাতে সহজে contacts খুঁজে পাওয়া যায়।</li> + <li>সেল ব্রডকাস্ট সাবস্ক্রাইব ব্যবহারকারীদের জরুরী বার্তার যুগপত হস্তান্তরের জন্য বাস্তবায়িত।</li> + <li>অ্যাপ্লিকেশন প্রকাশের সময় এবং স্ক্রলিংএ ভালই উন্নতি হয়েছে।</li> + <li>সঙ্গীত অনুসন্ধান অ্যালবাম বা গান শিরোনাম অনুসারে সঙ্গীত খোঁজা হয় । </li> + <li>ফায়ারফক্স ওএস এ যেমন ক্যালেন্ডার বৈশিষ্ট্য উপলব্ধ করা হয়: + <ul> + <li>বিস্তারিত বিষয়সমূহের পৃথকিকরন এবং views কে সম্পাদনা করে।</li> + <li>এলার্ম শব্দের notification নির্বাচন করা ।</li> + <li>নির্দিষ্ট তারিখ / সময়ে ডাইরেক্ট ইভেন্ট সৃষ্টি.</li> + </ul> + </li> +</ul> +<h2 id="আরো_দেখুন">আরো দেখুন</h2> +<ul> + <li><a href="http://www.mozilla.org/en-US/firefox/os/notes/1.1/" title="http://www.mozilla.org/en-US/firefox/os/notes/1.1/">ফায়ারফক্স ওএস ১.১</a></li> +</ul> +<h2 id="পূর্বের_সংস্করণসমূহ">পূর্বের সংস্করণসমূহ</h2> +<p></p><div class="multiColumnList"> +<ul> +<li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.0.1">Firefox OS 1.0.1 for developers</a></li></ul> +</div><p></p> 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 +--- +<div class="summary"> + <p><strong>ফায়ারফক্স ওএস ১.</strong>৩ বর্তমানে প্রকাশনা পূর্ববর্তী অবস্থায় আছে । এর Gecko উপাদানগুলো ফায়ারফক্স ২৮ ভিত্তিক (দেখুন <a href="/en-US/docs/Mozilla/Firefox/Releases/28" title="/en-US/docs/Mozilla/Firefox/Releases/28">Firefox 28 release notes for developers</a>.)</p> +</div> +<div class="note"> + <p>আপনি কি ফায়ারফক্স ওএস <em>১ .৩</em> <span class="author-g-ujcippz122z8yoxngglj">ডকুমেন্ট -এ</span> সাহায্য করতে চান ? খুঁজে দেখুন <a href="http://beta.elchi3.de/doctracker/#list=fx&version=b2g" title="http://beta.elchi3.de/doctracker/#list=fx&version=b2g">list of B2G-related bugs that need to be written about</a> এবং যোগদান করুন !</p> +</div> +<h2 id="CSS">CSS</h2> +<p>সাধারণ Gecko:</p> +<ul> + <li>বহু সারিযুক্ত <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">flexbox</a> এর জন্য সহায়ক সংযুক্ত করা হয়েছে (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=939901" title="FIXED: Support multi-line flexbox in layout">bug 939901</a>).</li> + <li><span id="summary_alias_container"><span id="short_desc_nonedit_display">হস্তলিখিত পূর্ব এশিয়ান <a href="/en-US/docs/Web/CSS/list-style-type">counter styles</a></span></span> সংযোজিত হয়েছে (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=934072" title="FIXED: Implement longhand East Asian counter styles in CSS3">bug 934072</a>).</li> + <li><span id="summary_alias_container"><span id="short_desc_nonedit_display"><a href="/bn-BD/docs/Web/CSS/background-blend-mode" title="The documentation about this has not yet been written; please consider contributing!"><code>background-blend-mode</code></a> বৈশিষ্টের জন্য সহায়ক সংযুক্ত করা হয়েছে</span></span> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=841601" title="FIXED: Add support for background-blend-mode">bug 841601</a>).</li> + <li><a href="/bn-BD/docs/Web/CSS/font-variant-ligatures" title="The documentation about this has not yet been written; please consider contributing!"><code>font-variant-ligatures</code></a>-এ <code>none মানটি </code>সংযুক্ত করা হয়েছে (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=913264" title="FIXED: add 'none' value to font-variant-ligatures">bug 913264</a>).</li> + <li>Support for the <a href="/bn-BD/docs/Web/CSS/:hover" title="The documentation about this has not yet been written; please consider contributing!"><code>:hover</code></a> user action pseudo-class on pseudo-elements has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=922669" title="FIXED: Implement support for the :hover user action pseudo-class on pseudo-elements">bug 922669</a>).</li> + <li>The <code>-moz-grab</code> and <code>-moz-grabbing</code> keywords on the CSS <a href="/bn-BD/docs/Web/CSS/cursor" title="The documentation about this has not yet been written; please consider contributing!"><code>cursor</code></a> property have been unprefixed to <code>grab</code> and <code>grabbing</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=880672" title="FIXED: Unprefix -moz-grab and -moz-grabbing">bug 880672</a>).</li> + <li>Support for the <code>-moz-hsla()</code> and <code>-moz-rgba()</code> functional notations has been dropped. Only the unprefixed versions, <code>hsla()</code> and <code>rgba()</code> are supported from now on (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=893319" title="FIXED: remove -moz-rgba() and -moz-hsla()">bug 893319</a>).</li> + <li>The "<code>true</code>" value for <a href="/bn-BD/docs/Web/CSS/text-align" title="The documentation about this has not yet been written; please consider contributing!"><code>text-align</code></a> has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=929991" title="FIXED: Implement 'true' alignment for text-align">bug 929991</a>).</li> + <li>Experimental support of <code>position:sticky</code> is now active by default on non-release builds (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=902992" title="FIXED: enable position:sticky in non-release builds (e.g. Nightly and Aurora)">bug 902992</a>). For releases builds, the <code>layout.css.sticky.enabled</code> preference still needs to be set to <code>true.</code></li> + <li>The <a href="/bn-BD/docs/Web/CSS/all" title="The documentation about this has not yet been written; please consider contributing!"><code>all</code></a> shorthand property has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=920633" title="FIXED: Add getAllKeys to IDBObjectStore">bug 920633</a>).</li> + <li>The <a href="/bn-BD/docs/Web/CSS/unset" title="The documentation about this has not yet been written; please consider contributing!"><code>unset</code></a> global value has been added; it allows to reset any CSS property (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=921731" title='FIXED: implement the "unset" value from CSS Cascading and Inheritance Level 3'>bug 921731</a>).</li> + <li>Curly brackets are no longer allowed in HTML <code>style</code> attributes: doing <code><div style="{ display: none }"></code> was working in quirk mode, but won't anymore <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=915053" title="FIXED: remove quirk allowing {} around style attribute">bug 915053</a>.</li> + <li>The <a href="/bn-BD/docs/Web/CSS/overflow" title="The documentation about this has not yet been written; please consider contributing!"><code>overflow</code></a> property now works on <a href="/bn-BD/docs/Web/HTML/Element/fieldset" title="The documentation about this has not yet been written; please consider contributing!"><code><fieldset></code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=261037" title="FIXED: overflow property not implemented on fieldset">bug 261037</a>).</li> +</ul> +<h2 id="HTML">HTML</h2> +<p>General Gecko:</p> +<ul> + <li>The web components <a href="http://w3c.github.io/webcomponents/spec/shadow/#the-content-element"><code><content></code></a> element has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=854736" title="FIXED: Implement web components content element.">bug 854736</a>).</li> + <li><a href="/en-US/docs/HTML/WebVTT">WebVTT</a> has been switched on by default (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887978" title="FIXED: Turn WebVTT on by default on trunk.">bug 887978</a>).</li> + <li><code><input type=color></code> has been implemented.</li> + <li>The <code>allow-popups</code> directive is now supported with the <code><a href="/bn-BD/docs/Web/HTML/Element/iframe#attr-sandbox">sandbox</a></code> attribute of the <a href="/bn-BD/docs/Web/HTML/Element/iframe" title="The documentation about this has not yet been written; please consider contributing!"><code><iframe></code></a> element (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=766282" title="FIXED: implement allow-popups directive for iframe sandbox">bug 766282</a>).</li> + <li>Blending of HTML elements using the <a href="/bn-BD/docs/Web/CSS/mix-blend-mode" title="The documentation about this has not yet been written; please consider contributing!"><code>mix-blend-mode</code></a> property has been implemented. The <code>layout.css.mix-blend-mode.enabled</code> preference must be set to <code>true</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=902525" title="FIXED: Implement support for blending of SVG and HTML elements">bug 902525</a>).</li> +</ul> +<h2 id="JavaScript">JavaScript</h2> +<p>General Gecko:</p> +<p><a href="/en-US/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla" title="/en-US/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla">EcmaScript 6</a> (Harmony) implementation continues!</p> +<ul> + <li>New <code>Array</code> methods have been implemented: <a href="/bn-BD/docs/Web/JavaScript/Reference/Global_Objects/Array/entries" title="The documentation about this has not yet been written; please consider contributing!"><code>Array.prototype.entries()</code></a> and <a href="/bn-BD/docs/Web/JavaScript/Reference/Global_Objects/Array/keys" title="The documentation about this has not yet been written; please consider contributing!"><code>Array.prototype.keys()</code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=894658" title="FIXED: Implement ES6 Array.prototype.{keys, entries}">bug 894658</a>).</li> + <li>The Harmony <a href="http://wiki.ecmascript.org/doku.php?id=harmony:spread" title="http://wiki.ecmascript.org/doku.php?id=harmony:spread">spread operator</a> is now supported in Function calls (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=762363" title="FIXED: implement the spread operator in calls">bug 762363</a>).</li> + <li>The mathematical function <a href="/bn-BD/docs/Web/JavaScript/Reference/Global_Objects/Math/hypot" title="The documentation about this has not yet been written; please consider contributing!"><code>Math.hypot()</code></a> has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=896264" title="FIXED: Math.hypot returns NaN when only one argument is passed">bug 896264</a>).</li> + <li>The <code>yield*</code> operator is now implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=666396" title="FIXED: implement yield* operator">bug 666396</a>).</li> + <li>The <code>MapIterator</code>, <code>SetIterator</code> and <code>ArrayIterator</code> objects now match the specification (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=881226" title="FIXED: Change {Array, Map, Set} iterator methods to mach the latest spec">bug 881226</a>).</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for..of</a> loops now expect the ES6 standard <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterator protocol</a> moving away from SpiderMonkey old iterator protocol using <code>StopIteration</code>.</li> + <li><a href="/bn-BD/docs/Web/JavaScript/Reference/Global_Objects/String/match" title="The documentation about this has not yet been written; please consider contributing!"><code>String.match</code></a> and <a href="/bn-BD/docs/Web/JavaScript/Reference/Global_Objects/String/replace" title="The documentation about this has not yet been written; please consider contributing!"><code>String.replace</code></a> now reset <a href="/bn-BD/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex" title="The documentation about this has not yet been written; please consider contributing!"><code>RegExp.lastIndex</code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=501739" title="FIXED: String match and replace methods do not update global regexp lastIndex per ES3&5">bug 501739</a>).</li> +</ul> +<h2 id="DOMAPI">DOM/API</h2> +<p>Firefox OS-specific:</p> +<ul> + <li>Multi-SIM support landed in Firefox OS (Dual-SIM-Dual-Standby or <a href="https://wiki.mozilla.org/FirefoxOS/DSDS">DSDS</a>). <a href="/en-US/docs/Web/API/Navigator.mozMobileConnection"><code>navigator.mozMobileConnection</code></a> becomes an array of <a href="/en-US/docs/Web/API/MozMobileConnection">MozMobileConnection</a> instances, i.e. <code>navigator.mozMobileConnections</code>. The privileged subset of this API can be used to detect MCC (country) and MNC (carrier), like in <a href="https://gist.github.com/digitarald/7829694">this snippet</a>.</li> + <li><a href="/en-US/docs/WebAPI/Contacts">Contacts API</a> now uses WebIDL (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=850430" title="FIXED: Contacts API: Use WebIDL">bug 850430</a>), with associated changes: + <ul> + <li>Date properties now handled consistently across the Contacts code.</li> + <li><span id="summary_alias_container"><span id="short_desc_nonedit_display"><code>mozContacts.remove</code> now accepts a contact ID for removal.</span></span></li> + </ul> + </li> + <li>The <a href="https://wiki.mozilla.org/WebAPI/DataStore">DataStore API</a> has been enabled by default in B2G for certified apps only (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=967414" title="FIXED: [Datastore] navigator.getDataStores is undefined">bug 967414</a>), and its permissions have been tweaked <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=871445" title="FIXED: DataStore API">bug 871445</a>.</li> + <li><span id="summary_alias_container"><span id="short_desc_nonedit_display">The WebIccManager API, which allows support for multiple sim cards</span></span>, has had updates: + <ul> + <li><code>iccChangeEvent</code> has been added using using event generator (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814637" title="FIXED: WebIccManager API: support multiple sim cards">bug 814637</a>)</li> + </ul> + </li> + <li>NFC has had updates: + <ul> + <li><code>onpeerready</code> and <code>onpeerlost</code> callbacks added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=933136" title="FIXED: [Gecko] NFC onpeerready, onpeerlost callbacks">bug 933136</a>).</li> + <li>New interface added — <code>checkP2PRegistration</code> — plus the 'ChromeOnly' interfaces <code>eventListenerWasAdded</code> and <code>eventListenerWasRemoved</code>, to support basic PeerToPeer use cases.</li> + <li>New interfaces added to MozNfcManager DOM <code>notifyUserAcceptedP2P</code> and <code>notifySendFileStatus</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=959437" title="FIXED: Refactor NfcManager APIs and implementation details to support sendFile , notifyUserAcceptedP2P and other privileged Nfc operations">bug 959437</a>).</li> + <li><code>sendFile</code> interface added to MozNFCPeer (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=933093" title="FIXED: [Gecko] Add Handover DOM API to NFC">bug 933093</a>).</li> + </ul> + </li> + <li>The SpeakerManager API has been implemented, to allow usage such as FM Radio outputting to phone speakers (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=854753" title="FIXED: [B2G][Audio] Implement SpeakerManager API">bug 854753</a>).</li> + <li><code>Notification.get()</code> added to <a href="/en-US/docs/Web/API/notification">Notification API</a> to provide a way to get current notification objects (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=899574" title="FIXED: Notification API follow-up: provide a way to get current Notification objects">bug 899574</a>).</li> +</ul> +<p>General Gecko:</p> +<ul> + <li>The <a href="/bn-BD/docs/Web/API/Navigator/onLine" title="The documentation about this has not yet been written; please consider contributing!"><code>navigator.onLine</code></a> and <a href="/bn-BD/docs/Web/API/Console" title="The documentation about this has not yet been written; please consider contributing!"><code>console</code></a> objects have been implemented in Web Workers (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=925437" title="FIXED: Implement WorkerNavigator.onLine">bug 925437</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=620935" title="FIXED: Make console object available in Web Workers">bug 620935</a>).</li> + <li>The web components <a href="http://w3c.github.io/webcomponents/spec/shadow/#shadowroot-object">ShadowRoot stylesheet behaviour</a> has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=929885" title="FIXED: Implement web components ShadowRoot style sheet behavior.">bug 929885</a>).</li> + <li>JavaScript <a href="https://dvcs.w3.org/hg/pointerevents/raw-file/tip/pointerEvents.html">Pointer Events</a> have been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=822898" title="Implement pointer events">bug 822898</a>).</li> + <li>The <code>vtt.js</code> WebVTT JavaScript parser has been added into Gecko (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=895091" title="FIXED: [webvtt] Integrate vtt.js into Gecko">bug 895091</a>). On a related note, TextTrack now dispatches TrackEvents (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=893309" title="FIXED: [webvtt] Change events dispatched by TextTrack to be TrackEvents">bug 893309</a>).</li> + <li><code>getUserMedia</code> now has the ability to share a tab/screen/window as a video stream (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=742832" title="FIXED: Add support for tab sharing for getUserMedia">bug 742832</a>).</li> + <li>Shared workers are implemented (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=643325" title="FIXED: Review Web Workers draft and implement SharedWorkers">bug 643325</a>), but disabled by default in Gecko 28 (set the <code>dom.workers.sharedWorkers.enabled</code> to <code>true</code> to enable.) They are enabled by default in Gecko 29 (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=924089" title="FIXED: Enable SharedWorker by default">bug 924089</a>).</li> + <li><span id="summary_alias_container"><span id="short_desc_nonedit_display">WebIDL <code>enum</code> added for for <code>AudioChannel</code> in <code>HTMLMediaElement</code></span></span> (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=925594" title="FIXED: WebIDL enum for AudioChannel in HTMLMediaElement">bug 925594</a>.)</li> + <li><span id="summary_alias_container"><span id="short_desc_nonedit_display"><code>HTMLVideoElement.canPlayType('video/webm')</code> now reports <code>maybe</code>.</span></span> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=884275" title="FIXED: canPlayType('video/webm') should report 'maybe' instead of 'probably'">bug 884275</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/DocumentFragment/getElementById" title="The documentation about this has not yet been written; please consider contributing!"><code>DocumentFragment.getElementById()</code></a> method has been implemented. E.g. <code>document.createDocumentFragment().getElementById()</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=933193" title="FIXED: add getElementById on DocumentFragment">bug 933193</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/KeyboardEvent/repeat" title="The documentation about this has not yet been written; please consider contributing!"><code>KeyboardEvent.repeat</code></a> attribute has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=600117" title="FIXED: Implement DOM3 KeyboardEvent.repeat">bug 600117</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/File" title="The documentation about this has not yet been written; please consider contributing!"><code>File</code></a> constructor, e.g. <code>new File(["foo"], "foo.txt")</code> has been implemented. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=819900" title="FIXED: Please add a File constructor">bug 819900</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/NavigatorPlugins/plugins" title="The documentation about this has not yet been written; please consider contributing!"><code>navigator.plugins</code></a> is no more enumerable, for privacy reasons (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=757726" title="disallow enumeration of navigator.plugins">bug 757726</a>).</li> + <li>The two attributes <a href="/bn-BD/docs/Web/API/Window/screenX" title="The documentation about this has not yet been written; please consider contributing!"><code>Window.screenX</code></a> and <a href="/bn-BD/docs/Web/API/Window/screenY" title="The documentation about this has not yet been written; please consider contributing!"><code>Window.screenY</code></a> now return CSS pixels (and no more device pixels) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=943668" title="FIXED: window.screenX and .screenY return device pixels instead of CSS pixels">bug 943668</a>).</li> + <li>The two methods <a href="/bn-BD/docs/Web/API/CanvasRenderingContext2D/drawSystemFocusRing" title="The documentation about this has not yet been written; please consider contributing!"><code>CanvasRenderingContext2D.drawSystemFocusRing()</code></a> and <a href="/bn-BD/docs/Web/API/CanvasRenderingContext2D/drawCustomFocusRing" title="The documentation about this has not yet been written; please consider contributing!"><code>CanvasRenderingContext2D.drawCustomFocusRing()</code></a> have been implemented. The preference <code>canvas.focusring.enabled</code> must be set to <code>true</code> to activate both (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=540456" title="FIXED: Support HTML5 canvas draw{Custom,System}FocusRing()">bug 540456</a>).</li> + <li>The following attributes have been added to <a href="/bn-BD/docs/Web/API/NavigatorID" title="The documentation about this has not yet been written; please consider contributing!"><code>NavigatorID</code></a>: <a href="/bn-BD/docs/Web/API/NavigatorID/appCodeName" title="The documentation about this has not yet been written; please consider contributing!"><code>appCodeName</code></a> and <a href="/bn-BD/docs/Web/API/NavigatorID/product" title="The documentation about this has not yet been written; please consider contributing!"><code>product</code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=925847" title="FIXED: WorkerNavigator does not implement all of NavigatorID">bug 925847</a>).</li> + <li>Support for the two <code>setRange()</code> methods on the <a href="/bn-BD/docs/Web/API/HTMLInputElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLInputElement</code></a> interface has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=850364" title="FIXED: Implement setRangeText(DOMString) in HTMLInputElement">bug 850364</a>).</li> + <li>Support for the two <code>setRange()</code> methods on the <a href="/bn-BD/docs/Web/API/HTMLTextAreaElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLTextAreaElement</code></a> interface has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918940" title="FIXED: Implement setRangeText(DOMString) for HTMLTextAreaElement">bug 918940</a>).</li> + <li>The method <code>getAllKeys()</code> and <code>openKeyCursor()</code> have been added to <a href="/bn-BD/docs/Web/API/IDBObjectStore" title="The documentation about this has not yet been written; please consider contributing!"><code>IDBObjectStore</code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=920633" title="FIXED: Add getAllKeys to IDBObjectStore">bug 920633</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=920800" title="FIXED: Add openKeyCursor to IDBObjectStore">bug 920800</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/HTMLFormControlsCollection" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLFormControlsCollection</code></a> interface has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=913920" title="FIXED: Implement HTMLFormControlsCollection">bug 913920</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/CanvasRenderingContext2D" title="The documentation about this has not yet been written; please consider contributing!"><code>CanvasRenderingContext2D</code></a> interface supports now the two methods <code>getLineDash()</code> and <code>setLineDash()</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=768067" title="FIXED: Implement canvasRenderingContext2D.get/setLineDash">bug 768067</a>).</li> + <li>The <code>typeMustMatch</code> attribute has been implemented on the <a href="/bn-BD/docs/Web/API/HTMLObjectElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLObjectElement</code></a> interface (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=827160" title="FIXED: Implement HTMLObjectElement.typeMustMatch">bug 827160</a>).</li> + <li>The <code>copyFromChannel()</code> and <code>copyToChannel()</code> methods have been added to <a href="/bn-BD/docs/Web/API/AudioBuffer" title="The documentation about this has not yet been written; please consider contributing!"><code>AudioBuffer</code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=915524" title="FIXED: Implement AudioBuffer.copyFromChannel/copyToChannel">bug 915524</a>).</li> + <li><code>Event.isTrusted()</code> is now unforgeable (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=637248" title="FIXED: Make Event.isTrusted Unforgeable">bug 637248</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/Navigator/vibrate" title="The documentation about this has not yet been written; please consider contributing!"><code>Navigator.vibrate()</code></a> method has been adapted to match the final specification: It now returns <code>false</code> when the list is too long or has too large entries, instead of throwing (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=884935" title="FIXED: Align navigator.vibrate with the spec">bug 884935</a>).</li> + <li>As part of the ongoing effort to standardize global objects, the non-standard stylesheet change event interfaces, including <code>StyleRuleChangeEvent</code>, <code>StyleSheetApplicableStateChangeEvent</code> and <code>StyleSheetChangeEvent</code>, are no longer available from Web content. The <code>CSSGroupRuleRuleList</code> interface, the implementation detail of <a href="/bn-BD/docs/Web/API/CSSRuleList" title="The documentation about this has not yet been written; please consider contributing!"><code>CSSRuleList</code></a>, has also been removed (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=872934" title="FIXED: convert style sheet change event interfaces to Web IDL and stick [NoInterfaceObject] on them">bug 872934</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916871" title="FIXED: Remove classinfo bits for CSSGroupRuleRuleList">bug 916871</a>).</li> + <li><code>atob</code> now ignores whitespaces (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=711180" title="FIXED: atob should ignore whitespace">bug 711180</a>).</li> + <li><a href="/en-US/docs/Web/WebGL">WebGL</a>: <code>MOZ_</code> prefixed extension strings are deprecated. Support for them will be removed in the future. Use unprefixed extension string only. To get draft extensions, set the <code>webgl.enable-draft-extensions</code> preferences (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=924176" title="FIXED: Warn on prefixed WebGL extensions usage (deprecated)">bug 924176</a>).</li> +</ul> +<h2 id="SVG">SVG</h2> +<p>General Gecko:</p> +<ul> + <li>Blending of SVG elements using the <a href="/bn-BD/docs/Web/CSS/mix-blend-mode" title="The documentation about this has not yet been written; please consider contributing!"><code>mix-blend-mode</code></a> property has been implemented. The <code>layout.css.mix-blend-mode.enabled</code> preference must be set to <code>true</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=902525" title="FIXED: Implement support for blending of SVG and HTML elements">bug 902525</a>).</li> +</ul> +<h2 id="AudioVideo">Audio/Video</h2> +<ul> + <li><span id="summary_alias_container"><span id="short_desc_nonedit_display">Opus in WebM</span></span> is now supported (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887978" title="FIXED: Turn WebVTT on by default on trunk.">bug 887978</a>).</li> + <li><span id="summary_alias_container"><span id="short_desc_nonedit_display">The VP9 video decoder</span></span> is now supported (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=833023" title="FIXED: Implement VP9 video decoder in Firefox">bug 833023</a>).</li> +</ul> +<h2 id="See_also">See also</h2> +<ul> + <li>Firefox OS 1.3 Notes (will be linked to once they are published.)</li> +</ul> +<h2 id="Older_versions">Older versions</h2> +<p></p><div class="multiColumnList"> +<ul> +<li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.2">Firefox OS 1.2 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.1">Firefox OS 1.1 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.0.1">Firefox OS 1.0.1 for developers</a></li></ul> +</div><p></p> +<p>Share this article: <a href="http://mzl.la/1fVuFWR">http://mzl.la/1fVuFWR</a></p> 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 +--- +<div class="summary"> + <p><strong>ফায়ারফক্স ওএস ১.৪</strong> বর্তমানে প্রকাশের অপেক্ষায় আছে। এর গেকো অংশটি ফায়ারফক্স ৩০ এর উপর নির্ভর করে তৈরি করা হয়েছে (<a href="/en-US/docs/Mozilla/Firefox/Releases/30" title="/en-US/docs/Mozilla/Firefox/Releases/28">ডেভেলপারদের জন্য ফায়ারফক্স ৩০ রিলিজ নোট সমূহ</a> দেখুন)</p> +</div> +<div class="note"> + <p>ফায়ারফক্স ওএস ১.৪ এর জন্য ডকুমেন্টেশন তৈরিতে সহায়তা করতে চান ? <a href="http://beta.elchi3.de/doctracker/#list=fx&version=b2g" title="http://beta.elchi3.de/doctracker/#list=fx&version=b2g">B2G-সংশ্লিষ্ট যেসব বাগ রয়েছে এবং সেগুলো সম্পর্কে লেখা প্রয়োজন</a>, তার তালিকা দেখুন এবং যুক্ত হউন!</p> +</div> +<h2 id="সিএসএস">সিএসএস</h2> +<p>সাধারন গেকোঃ</p> +<ul> + <li><a href="/bn-BD/docs/Web/CSS/background-blend-mode" title="The documentation about this has not yet been written; please consider contributing!"><code>background-blend-mode</code></a> প্রপার্টি টি ডিফল্ট ভাবে সক্রিয় করা হয়েছে (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=970600" title="FIXED: Enable background-blend-mode by default">bug 970600</a>)।</li> + <li>শুধুমাত্র UA স্টাইলশিটে ব্যবহারের জন্য আদর্শ মানের বাইরে থাকা <a href="/bn-BD/docs/Web/CSS/overflow-clip-box" title="The documentation about this has not yet been written; please consider contributing!"><code>overflow-clip-box</code></a> প্রোপার্টি ব্যবহার করা হয়েছে (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=966992" title="FIXED: Implement overflow-clip-box: content-box">bug 966992</a>)।</li> + <li><a href="/bn-BD/docs/Web/CSS/line-height" title="On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element."><code>line-height</code></a> প্রোপার্টি এখন এক লাইনের টেক্সট ইনপুট সমূহে কাজ করে। (<code><input type=text|password|email|search|tel|url|unknown></code> types) যদিও এটা টেক্সটকে 1.0 এর নিচের লাইন হাইটে সঙ্কুচিত করতে পারেনা (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=349259" title="FIXED: CSS Property 'line-height' has no effects on input text fields">bug 349259</a>)।</li> + <li><a href="/bn-BD/docs/Web/CSS/line-height" title="On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element."><code>line-height</code></a> প্রোপার্টি এখন কোন প্রকার বিধি-নিষেধ ছাড়াই <code>type=button</code> এ কাজ করে(<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451" title='FIXED: Allow use of line-height for &amp;lt;input type="reset|button|submit">'>bug 697451</a>)।</li> +</ul> +<h2 id="জাভাস্ক্রিপ্ট">জাভাস্ক্রিপ্ট</h2> +<p>সাধারন গেকোঃ</p> +<p>EcmaScript 6.0 এর সমর্থন আরও বর্ধিত করা হয়েছেঃ</p> +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_comprehensions">অ্যারে কম্প্রিহেনশন সমূহকে</a> নতুন সিমানটিক্স অনুসরন করার জন্য গ্রহন করা হয়েছে (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=979865" title="FIXED: Implement ES6 array and generator comprehensions">bug 979865</a>): + <ul> + <li>তারা প্রতি <a href="/bn-BD/docs/Web/JavaScript/Reference/for" title="The documentation about this has not yet been written; please consider contributing!"><code>for</code></a> নোডে একটি করে স্কোপ তৈরি করে।</li> + <li>অ্যাসাইনমেন্ট এক্সপ্রেশনের বদলে তারা <a href="/bn-BD/docs/Web/JavaScript/Reference/for" title="The documentation about this has not yet been written; please consider contributing!"><code>for</code></a> শুরু হয়।</li> + <li>ওয়েব মোড কোডে এরা বৈধ এবং <a href="/bn-BD/docs/Web/JavaScript/Reference/let" title="The documentation about this has not yet been written; please consider contributing!"><code>let</code></a> আইডেন্টিফায়ার কে অগ্রাহ্য করে।</li> + <li>তারা ডিস্ট্রাকচারিং সমর্থন করছে না।</li> + <li>তাদের একাধিক <em>comprehensionIf</em> উপাদান থাকতে পারে।</li> + <li>তারা শুধু <a href="/bn-BD/docs/Web/JavaScript/Reference/for…of" title="The documentation about this has not yet been written; please consider contributing!"><code>for…of</code></a> পুনরাবৃত্তির কাজ করে, <a href="/bn-BD/docs/Web/JavaScript/Reference/for…in" title="The documentation about this has not yet been written; please consider contributing!"><code>for…in</code></a> না।</li> + <li>তাদের সবসময় প্যারেন্থেসিস ( < > ) এর প্রয়োজন হয়।</li> + <li>এরা হচ্ছে EcmaScript 6.0 সিমানটিক্স এর পর্যায়ের। পুরাতন গুলোর পর্যায়ের নয়।</li> + </ul> + </li> + <li>টাইপড অ্যারে সমূহ এখন আরও পরিবর্ধন যোগ্য এবং নতুন নাম ওয়ালা প্রোপার্টি সমর্থন করে(<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=695438" title="FIXED: TypedArrays don't support new named properties">bug 695438</a>)।</li> +</ul> +<h2 id="ইন্টারফেসএপিআইDOM">ইন্টারফেস/এপিআই/DOM</h2> +<p>গেকো সাধারনঃ</p> +<ul> + <li><a href="/bn-BD/docs/Web/API/Navigator/sendBeacon" title="The documentation about this has not yet been written; please consider contributing!"><code>Navigator.sendBeacon</code></a> যুক্ত করা হয়েছে। এতে করে টেলিমেট্রি সংগ্রহ আরও সহজ হয়েছে (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=936340" title="FIXED: Implement navigator.sendBeacon">bug 936340</a>)</li> + <li>Added a <code>relList</code> property returning a <a href="/bn-BD/docs/Web/API/DOMTokenList" title="The documentation about this has not yet been written; please consider contributing!"><code>DOMTokenList</code></a> to <a href="/bn-BD/docs/Web/API/HTMLLinkElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLLinkElement</code></a>, <a href="/bn-BD/docs/Web/API/HTMLAreaElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLAreaElement</code></a> এবং <a href="/bn-BD/docs/Web/API/HTMLAnchorElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLAnchorElement</code></a> এ <a href="/bn-BD/docs/Web/API/DOMTokenList" title="The documentation about this has not yet been written; please consider contributing!"><code>DOMTokenList</code></a> প্রদান করার জন্য একটি <code>relList</code> প্রোপার্টি যুক্ত করা হয়েছে (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=968637" title="FIXED: add the DOMTokenList relList to HTMLLinkElement, HTMLAreaElement and HTMLAnchorElement">bug 968637</a>)</li> + <li>সাম্প্রতিক বৈশিষ্ট্য অনুযায়ী <a href="/bn-BD/docs/Web/API/OscillatorNode/start" title="The documentation about this has not yet been written; please consider contributing!"><code>OscillatorNode.start</code></a> এবং <a href="/bn-BD/docs/Web/API/OscillatorNode/stop" title="The documentation about this has not yet been written; please consider contributing!"><code>OscillatorNode.stop</code></a> এর প্রথম আর্গুমেন্ট এখন ঐচ্ছিক এবং ডিফল্ট ভাবে ০ থাকে (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=982541" title="FIXED: Update OscillatorNode.{start, stop} to have the first argument optional and default to zero">bug 982541</a>)। The method <a href="/bn-BD/docs/Web/API/Navigator/requestWakeLock" title="The documentation about this has not yet been written; please consider contributing!"><code>Navigator.requestWakeLock()</code></a> and the non-standard <a href="/bn-BD/docs/Web/API/MozWakeLock" title="The documentation about this has not yet been written; please consider contributing!"><code>MozWakeLock</code></a> are no longer available from the Web on Desktop (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=963366" title="FIXED: Hide navigator.requestWakeLock and MozWakeLock from the web except on Firefox OS">bug 963366</a>).</li> + <li>The <code>DOM_VK_ENTER</code> constant has been removed from <a href="/bn-BD/docs/Web/API/KeyboardEvent" title="The documentation about this has not yet been written; please consider contributing!"><code>KeyboardEvent</code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=969247" title="FIXED: Get rid of related code of NS_VK_ENTER and nsIDOMKeyEvent::DOM_VK_ENTER">bug 969247</a>).</li> + <li>Web components' <a href="/bn-BD/docs/Web/API/Document/register" title="The documentation about this has not yet been written; please consider contributing!"><code>Document.register</code></a> has been adapted to follow the behavior described in the latest version of the specification (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=856140" title="FIXED: Update document.register to adhere to the latest Custom Element spec">bug 856140</a>).</li> + <li>Basic support for Hit regions on canvas has been added: the methods <a href="/bn-BD/docs/Web/API/CanvasRenderingContext2D/addHitRegion" title="The documentation about this has not yet been written; please consider contributing!"><code>CanvasRenderingContext2D.addHitRegion()</code></a> and <a href="/bn-BD/docs/Web/API/CanvasRenderingContext2D/removeHitRegion" title="The documentation about this has not yet been written; please consider contributing!"><code>CanvasRenderingContext2D.removeHitRegion()</code></a> have been added. These are disabled by default; to activate them set the preference <code>canvas.hitregions.enabled</code> to <code>true</code>. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=966591" title="FIXED: Add basic support for Hit regions in Canvas">bug 966591</a>)</li> + <li>The non-standard, and deprecated since Firefox 15, <a href="/bn-BD/docs/Web/API/Blob/mozSlice" title="The documentation about this has not yet been written; please consider contributing!"><code>Blob.mozSlice</code></a> is no longer supported (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=961804" title="FIXED: Drop support for Blob.mozSlice">bug 961804</a>).</li> + <li>The non-standard <a href="/bn-BD/docs/Web/API/ArchiveReader" title="The documentation about this has not yet been written; please consider contributing!"><code>ArchiveReader</code></a> and <a href="/bn-BD/docs/Web/API/ArchiveRequest" title="The documentation about this has not yet been written; please consider contributing!"><code>ArchiveRequest</code></a> are no longer exposed to the Web (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=968883" title="FIXED: ArchiveReader and ArchiveRequest should not be exposed interfaces">bug 968883</a>).</li> + <li>Constructors cannot be called as functions anymore. They need to be preceded by the keyword <code>new</code>. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916644" title="FIXED: Disallow calling WebIDL constructors as functions on the web">bug 916644</a>)</li> + <li>Added support for a new value (<code>alpha</code>) for the second, optional, parameter of the <a href="/bn-BD/docs/Web/API/Canvas/getContext" title="The documentation about this has not yet been written; please consider contributing!"><code>Canvas.getContext()</code></a> method allowing to define if alpha blending must be stored or not for this context. When not, the per-pixel alpha value in this store is always <code>1.0</code>. This allows the back-end to implement a fast-track. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=982480" title="FIXED: Add support for the alpha option to the canvas context options">bug 982480</a>)</li> +</ul> +<h2 id="SVG">SVG</h2> +<p>Gecko general:</p> +<ul> + <li><a href="/bn-BD/docs/Web/SVG/Element/feDropShadow" title="The documentation about this has not yet been written; please consider contributing!"><code><feDropShadow></code></a>, and its interface <a href="/bn-BD/docs/Web/API/SVGFEDropShadowElement" title="The documentation about this has not yet been written; please consider contributing!"><code>SVGFEDropShadowElement</code></a>, from the Filter Effects Module are now supported (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=964200" title="FIXED: Implement Filter Effects Module feDropShadow filter">bug 964200</a>).</li> +</ul> +<h2 id="AudioVideo">Audio/Video</h2> +<p>Gecko general:</p> +<ul> + <li>On Linux, Gstreamer 1.0 is now supported (instead of 0.10) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=806917" title="FIXED: support GStreamer 1.0">bug 806917</a>).</li> +</ul> +<h2 id="Manifest">Manifest</h2> +<ul> + <li>The <a href="/en-US/Apps/Build/Manifest#precompile">precompile</a> manifest field is now supported, which specifies that asm.js code contained within the app should be compiled at install time, install of during first run.</li> +</ul> +<h2 id="See_also">See also</h2> +<ul> + <li>Firefox OS 1.4 Notes (will be linked to once they are published.)</li> +</ul> +<h2 id="Older_versions">Older versions</h2> +<p></p><div class="multiColumnList"> +<ul> +<li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.3">Firefox OS 1.3 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.2">Firefox OS 1.2 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.1">Firefox OS 1.1 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.0.1">Firefox OS 1.0.1 for developers</a></li></ul> +</div><p></p> +<p> </p> 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 +--- +<div class="summary"> + <p><strong>ফায়ারফক্স ওএস ২.০ এখন প্রি- রিলিজ অবস্থায় আছে। এটির গেকো উপাদান ফায়ারফক্স ৩২ এর উপর ভিত্তি করে তৈরি হয়েছে।</strong> ( তাই <a href="/en-US/docs/Mozilla/Firefox/Releases/32" title="/en-US/docs/Mozilla/Firefox/Releases/28">ডেভেলোপারদের জন্য ফায়ারফক্স ৩২ এর রিলিজ নোট </a>দেখুন)</p> +</div> +<div class="note"> + <p>ফায়ারফক্স ওএস ২.০ কে ডকুমেন্ট করতে সাহায্য করতে চান ? তাহলে <a href="http://beta.elchi3.de/doctracker/#list=fx&version=b2g" title="http://beta.elchi3.de/doctracker/#list=fx&version=b2g">B2G সম্পর্কিত বাগের তালিকা যাদের নিয়ে লেখা প্রয়োজন</a> দেখুন এবং সাহায্য করা শুরু করে দিন!</p> +</div> +<h2 id="ম্যানিফেস্ট">ম্যানিফেস্ট</h2> +<ul> + <li>এখন <a href="/en-US/Apps/Build/Manifest#precompile">প্রি-কম্পাইল</a> ম্যানিফেস্ট অংশটি সমর্থন করে। এটি অ্যাপের মধ্যে থাকা asm.js কোডটি যাতে অ্যাপ প্রথমবার চলার সময় , অর্থাৎ ইন্সটলের সময় যাতে কম্পাইল করা হয় , সেটি ম্যানিফেস্টের এই অংশে বলে দেয়া হয়। </li> +</ul> +<h2 id="অন্যান্য_উপাদান_টিবিডি">অন্যান্য উপাদান টিবিডি</h2> +<h2 id="আরো_দেখুন">আরো দেখুন</h2> +<ul> + <li>ফায়ারফক্স ওএস ২.০ নোট (এখনো প্রকাশিত হয় নি , হওয়ার সাথে সাথেই এখানে যুক্ত হয়ে যাবে।)</li> +</ul> +<h2 id="পূর্বের_সংস্করণসমূহ">পূর্বের সংস্করণসমূহ</h2> +<p></p><div class="multiColumnList"> +<ul> +<li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/2.0">Firefox OS 2.0 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.4">Firefox OS 1.4 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.3">Firefox OS 1.3 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.2">Firefox OS 1.2 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.1">Firefox OS 1.1 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.0.1">Firefox OS 1.0.1 for developers</a></li></ul> +</div><p></p> 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 +--- +<h2 id="ধাপে_ধাপে_ফায়ারফক্স_ওএস_প্রকাশনার_গুরুত্বপূর্ণ_তথ্য">ধাপে ধাপে ফায়ারফক্স ওএস প্রকাশনার গুরুত্বপূর্ণ তথ্য</h2> +<p>এ অংশে আপনি পাবেন ফায়ারফক্স ওএস এর প্রতিটি গায়া এবং গেকোর নতুন প্রকাশনা সম্পর্কিত অনুচ্ছেদ , যা ব্যাখ্যা করবে প্রতিটি নতুন সংস্করণে কোন কোন বৈশিষ্ট্যগুলো সংযোজন করা হয়েছে এবং কোন কোন লুকোনো সমস্যাগুলো অপসারণ করা হয়েছে । এতে আরও রয়েছে একটি সংযুক্ত সারমর্ম ছক যা দেখাবে কোন কোন APIগুলো ফায়ারফক্স ওএস এর প্রতিটি নতুন সংস্করণ দ্বারা সমর্থিত ।</p> +<div class="multiColumnList"> + {{ListSubpages("",1,0,1)}}</div> +<h2 id="অন্যান্য_সহায়ক_তথ্য">অন্যান্য সহায়ক তথ্য</h2> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/API_support_table">Firefox OS API support table</a></dt> + <dd> + বিভিন্ন প্রাপ্তিসাধ্য APIগুলোর তালিকা এবং ফায়ারফক্স এর কোন কোন সংস্করণগুলোতে এগুলোর জন্য সহায়ক রয়েছে ।</dd> + <dt> + <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a></dt> + <dd> + হোষ্টকৃত, সুবিধাযুক্ত এবং সনদযুক্ত APIগুলোর তালিকার সাথে আছে আপনার ইনস্টলযোগ্য আপগুলোর সুস্পষ্টভাবে প্রকাশ করা প্রয়োজন এমন বিষয়গুলো যেমন সুস্পষ্ট আনুমতির জন্য নাম, অ্যাপের ধরণ আবশ্যক, বর্ণনা, প্রবেশাধিকার বৈশিষ্ট্য, এবং সার্বজনীন প্রবেশাধিকার ইত্যাদি নির্ধারণের জন্য আবশ্যক প্রবেশাধিকার সম্পর্কিত তথ্য ।</dd> +</dl> 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..ce9147b6eb --- /dev/null +++ b/files/bn/archive/b2g_os/releases/১.২/index.html @@ -0,0 +1,469 @@ +--- +title: ফায়ারফক্স ওস ১.২ উন্নয়নকারীর জনে্্য +slug: Archive/B2G_OS/Releases/১.২ +translation_of: Archive/B2G_OS/Releases/1.2 +--- +<div class="summary"> +<p>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 <a href="/en-US/docs/Mozilla/Firefox/Releases/26">Firefox 26 release notes for developers</a> for the latest.)</p> +</div> + +<div class="note"> +<p>Want to help document Firefox OS 1.2? Check out the <a href="http://beta.elchi3.de/doctracker/#list=fx&version=b2g" title="http://beta.elchi3.de/doctracker/#list=fx&version=b2g">list of B2G-related bugs that need to be written about</a> and pitch in!</p> +</div> + +<h2 id="Developer_Tools">Developer Tools</h2> + +<ul> + <li>Firefox OS versions 1.2 and above are compatible with the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">Firefox App Manager</a>.</li> +</ul> + +<h2 id="HTML">HTML</h2> + +<p>General Gecko:</p> + +<ul> + <li>The <code><a href="/bn-BD/docs/Web/HTML/Element/iframe#attr-srcdoc">srcdoc</a></code> attribute of <a href="/bn-BD/docs/Web/HTML/Element/iframe" title="The documentation about this has not yet been written; please consider contributing!"><code><iframe></code></a>, allowing the inline specification of the content of an <a href="/bn-BD/docs/Web/HTML/Element/iframe" title="The documentation about this has not yet been written; please consider contributing!"><code><iframe></code></a>, is now supported (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=802895" title="FIXED: implement <iframe srcdoc=''> to allow document content in iframe to be specified inline">bug 802895</a>).</li> + <li>When used with a <code>"image/jpeg"</code> type, the method <code>HTMLCanvasElement.toBlob</code> now accepts a third attribute defining the quality of the image (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=891884" title="FIXED: toBlob should support the quality parameter as toDataURL does">bug 891884</a>).</li> + <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track" title="The track element is used as a child of the media elements—<audio> and <video>—and does not represent anything on its own. It lets you specify timed text tracks (or time-based data)."><code><track></code></a> element has been implemented behind the <code>media.webvtt.enabled</code> property (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=833385" title="FIXED: [webvtt] Implement Track element and TextTrack* DOM classes">bug 833385</a>).</li> + <li>The <a href="/bn-BD/docs/Web/HTML/Element/blink" title="The documentation about this has not yet been written; please consider contributing!"><code><blink></code></a> element support is now completely dropped. The <code><blink></code> tag now implements the <a href="/bn-BD/docs/Web/API/HTMLUnknownElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLUnknownElement</code></a> interface (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=857820" title="FIXED: Drop only blink effect from text-decoration: blink; and completely remove <blink> element">bug 857820</a>).</li> + <li>The <code>range</code> state of the <a href="/bn-BD/docs/Web/HTML/Element/input" title="HTML <input> ইলিমেন্টটি ওয়েব-ভিত্তিক ফর্মের জন্য ইন্টারএ্যাক্টিভ কন্ট্রোল তৈরি করতে ব্যবহৃত হয়।"><code><input></code></a> element (<code><input type="range"></code>) has been switched on by default (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=841950" title="FIXED: Flip the pref to enable <input type=range> for release builds">bug 841950</a>).</li> + <li>The HTML5 <a href="/bn-BD/docs/Web/HTML/Element/data" title="The documentation about this has not yet been written; please consider contributing!"><code><data></code></a> element has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=839371" title="FIXED: Implement HTML5 <data> element">bug 839371</a>).</li> + <li>The HTML5 <a href="/bn-BD/docs/Web/HTML/Element/time" title="The documentation about this has not yet been written; please consider contributing!"><code><time></code></a> element has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=629801" title="FIXED: Implement HTML5 <time> element">bug 629801</a>).</li> + <li>The <code>range</code> state of the <a href="/bn-BD/docs/Web/HTML/Element/input" title="HTML <input> ইলিমেন্টটি ওয়েব-ভিত্তিক ফর্মের জন্য ইন্টারএ্যাক্টিভ কন্ট্রোল তৈরি করতে ব্যবহৃত হয়।"><code><input></code></a> element (<code><input type="range"></code>) has been implemented, behind the preference <code>dom.experimental_forms_range</code>, only enabled by default on Nightly and Aurora channel (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=841948" title="FIXED: Flip the pref to enable <input type=range> on Nightly and Aurora">bug 841948</a>).</li> + <li>The support for the <a href="/bn-BD/docs/Web/HTML/Element/template" title="The documentation about this has not yet been written; please consider contributing!"><code><template></code></a> element, part of the Web component specification has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=818976" title="FIXED: Implement web components template.">bug 818976</a>).</li> + <li>The <code><a href="/bn-BD/docs/Web/HTML/Element/style#attr-scoped">scoped</a></code> attribute has been added to the <a href="/bn-BD/docs/Web/HTML/Element/style" title="The documentation about this has not yet been written; please consider contributing!"><code><style></code></a> element. It allows to include styles that are isolated from the rest of the document. Such styles can be selected using the <a href="/bn-BD/docs/Web/CSS/:scope" title="The documentation about this has not yet been written; please consider contributing!"><code>:scope</code></a> CSS pseudo-element introduced in Firefox 20. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=508725" title="FIXED: Implement HTML 5 scoped attribute on STYLE tag">bug 508725</a>).</li> + <li>The new HTML <a href="/bn-BD/docs/Web/HTML/Element/main" title="The documentation about this has not yet been written; please consider contributing!"><code><main></code></a> element has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=820508" title="FIXED: Add support for <main> element">bug 820508</a>).</li> + <li>Support for the <code><a href="/bn-BD/docs/Web/HTML/Element/a#attr-download">download</a></code> attribute on the <a href="/bn-BD/docs/Web/HTML/Element/a" title="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."><code><a></code></a> and <a href="/bn-BD/docs/Web/HTML/Element/area" title="The documentation about this has not yet been written; please consider contributing!"><code><area></code></a> element has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=676619" title="FIXED: Implement proposed download attribute">bug 676619</a>).</li> + <li>The value <code>auto </code>for the <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global_attributes">global attribute</a> <a href="/en-US/docs/HTML/Global_attributes#attr-dir" title="HTML/Global_attributes"><code>dir</code></a> has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=548206" title="FIXED: Implement the auto value for the HTML dir attribute">bug 548206</a>).</li> +</ul> + +<h2 id="CSS">CSS</h2> + +<p>General Gecko:</p> + +<ul> + <li>@font-feature-values rule support (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=549861" title="FIXED: implement parsing of font feature properties">bug 549861</a>)</li> + <li>StyleRule{Added,Removed,Changed}, StyleSheetApplicableStateChange, StyleSheetChange events (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=839103" title="FIXED: Provide notifications for style sheet added and removed to chrome JS">bug 839103</a>)</li> + <li>The <a href="/bn-BD/docs/Web/CSS/text-decoration-line" title="The documentation about this has not yet been written; please consider contributing!"><code>text-decoration-line</code></a> property, still prefixed, now considers <code>'blink'</code> as a valid value, though it doesn't blink the content at all (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=812995" title="FIXED: add 'blink' to -moz-text-decoration-line and drop -moz-text-blink">bug 812995</a>).</li> + <li>The non-standard<code> </code><a href="/bn-BD/docs/Web/CSS/-moz-text-blink" title="The documentation about this has not yet been written; please consider contributing!"><code>-moz-text-blink</code></a> property has been removed (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=812995" title="FIXED: add 'blink' to -moz-text-decoration-line and drop -moz-text-blink">bug 812995</a>).</li> + <li>Support for the <a href="/bn-BD/docs/Web/CSS/image-orientation" title="The documentation about this has not yet been written; please consider contributing!"><code>image-orientation</code></a> property, in its CSS Images & Values Level 4 version, that is with the <code>from-image</code> keyword and EXIF support, has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825771" title="FIXED: [css3-images] implement 'image-orientation' property">bug 825771</a>).</li> + <li>Support for <code>position: sticky</code> can be enabled by pref <code>layout.css.sticky.enabled</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=886646" title="FIXED: implement position:sticky">bug 886646</a>).</li> + <li>The support for the keyword <code>local</code> as a value of the <a href="/bn-BD/docs/Web/CSS/background-attachment" title="The documentation about this has not yet been written; please consider contributing!"><code>background-attachment</code></a> CSS property has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=483446" title="FIXED: CSS3 background-attachment: local support">bug 483446</a>).</li> + <li>Support of a non-standard Mozilla-only media query to determine the operating system version has been added: <code><a href="/en-US/docs/Web/Guide/CSS/Media_queries#-moz-os-version" title="/en-US/docs/Web/Guide/CSS/Media_queries#-moz-os-version">-moz-os-version</a></code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=810399" title="FIXED: Add a CSS Media Query for Windows 8 Desktop theme">bug 810399</a>). The property is currently only implemented on Windows.</li> + <li>The <a href="/bn-BD/docs/Web/CSS/-moz-osx-font-smoothing" title="The documentation about this has not yet been written; please consider contributing!"><code>-moz-osx-font-smoothing</code></a> CSS property has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=857142" title="FIXED: Add CSS property for author control over antialiasing on Mac OS X, for cases where fonts appear too heavy">bug 857142</a>)</li> + <li>The two values <code>-moz-zoom-in</code> and <code>-moz-zoom-out</code> of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor" title=""><code>cursor</code></a> property have been unprefixed to <code>zoom-in</code> and <code>zoom-out</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=772153" title="FIXED: unprefix CSS cursor: -moz-zoom-in | -moz-zoom-out">bug 772153</a>)).</li> + <li>The blink effect for <code><a href="/en-US/docs/CSS/text-decoration" title="/en-US/docs/CSS/text-decoration">text-decoration</a>: blink;</code> has no more effect, but is still a valid value (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=857820" title="FIXED: Drop only blink effect from text-decoration: blink; and completely remove <blink> element">bug 857820</a>).</li> + <li>In-flow <a href="/bn-BD/docs/Web/CSS/::after" title="The documentation about this has not yet been written; please consider contributing!"><code>::after</code></a> and <a href="/bn-BD/docs/Web/CSS/::before" title="The documentation about this has not yet been written; please consider contributing!"><code>::before</code></a> pseudo-elements are now flex items (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867454" title="FIXED: Support ::before, ::after as flex items">bug 867454</a>).</li> + <li>Following a spec change, the initial value for <a href="/bn-BD/docs/Web/CSS/min-width" title="The documentation about this has not yet been written; please consider contributing!"><code>min-width</code></a> and <a href="/bn-BD/docs/Web/CSS/min-height" title="The documentation about this has not yet been written; please consider contributing!"><code>min-height</code></a> has been changed back to <code>0</code>, even on flex items (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=848539" title="FIXED: Remove support for "min-width: auto" and "min-height: auto", since they're being dropped from flexbox spec">bug 848539</a>).</li> + <li>Support for CSS Conditionals (<a href="/bn-BD/docs/Web/CSS/@supports" title="The documentation about this has not yet been written; please consider contributing!"><code>@supports</code></a> and <a href="/bn-BD/docs/Web/API/CSS/supports" title="The documentation about this has not yet been written; please consider contributing!"><code>CSS.supports</code></a>) has been enabled by default (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=855455" title="FIXED: enable @supports rule in all builds">bug 855455</a>).</li> + <li>Support for <a href="/bn-BD/docs/Web/CSS/background-clip" title="The documentation about this has not yet been written; please consider contributing!"><code>background-clip</code></a> and <a href="/bn-BD/docs/Web/CSS/background-origin" title="The documentation about this has not yet been written; please consider contributing!"><code>background-origin</code></a> properties in the <a href="/bn-BD/docs/Web/CSS/background" title="The documentation about this has not yet been written; please consider contributing!"><code>background</code></a> shorthand has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=570896" title="FIXED: add support for different background-origin and background-clip in background shorthand (css3-background)">bug 570896</a>).</li> + <li>The <code>none</code> value of <a href="/bn-BD/docs/Web/CSS/user-select" title="The documentation about this has not yet been written; please consider contributing!"><code>-moz-user-select</code></a> has now the same behavior than the <code>-moz-none</code> value, aligning Gecko on WebKit (Chrome, Safari), Presto (Opera) and Trident (Internet Explorer) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=816298" title='FIXED: Change "-moz-user-select:none" to behave like WebKit, IE, and Opera (and "-moz-user-select:-moz-none")'>bug 816298</a>).</li> + <li>On XHTML content, the <code>auto</code> value of <a href="/bn-BD/docs/Web/CSS/hyphens" title="The documentation about this has not yet been written; please consider contributing!"><code>-moz-hyphens</code></a> incorrectly applied hyphenation rules when the language was not explicitly declared. This is fixed by (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=702121" title="FIXED: Incorrect hyphenation patterns used by CSS moz-hyphens in XHTML content (en-US patterns used, regardless of lang declaration)">bug 702121</a>).</li> + <li>An <code>auto</code> value has been added to the CSS <a href="/bn-BD/docs/Web/CSS/-moz-orient" title="The documentation about this has not yet been written; please consider contributing!"><code>-moz-orient</code></a> property. The <code>auto</code> value is equivalent to <code>horizontal</code> when applied to <a href="/bn-BD/docs/Web/HTML/Element/meter" title="The documentation about this has not yet been written; please consider contributing!"><code><meter></code></a> and <a href="/bn-BD/docs/Web/HTML/Element/progress" title="The documentation about this has not yet been written; please consider contributing!"><code><progress></code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=835883" title="FIXED: Give the -moz-orient property an 'auto' value, and make that its initial value">bug 835883</a>).</li> + <li>The media query <a href="/en-US/docs/Web/Guide/CSS/Media_queries#-moz-windows-glass" title="/en-US/docs/Web/Guide/CSS/Media_queries#-moz-windows-glass"><code>-moz-windows-glass</code></a> has been added on Windows 7 and earlier Windows system (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=816803" title="FIXED: Need a way to detect existence of Aero Glass via CSS">bug 816803</a>).</li> + <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">CSS Flexbox</a> has been unprefixed, and is now enabled by default (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=841876" title="FIXED: Re-enable flexbox pref (by default) in release builds">bug 841876</a>).</li> + <li>The <code>mask-type</code> property from the <a href="https://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html" title="https://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html">CSS Masking specification</a> has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=793617" title="FIXED: implement mask-type property from CSS Masking">bug 793617</a>).</li> + <li>Experimental support for the <a href="/bn-BD/docs/Web/CSS/:scope" title="The documentation about this has not yet been written; please consider contributing!"><code>:scope</code></a> pseudo-class has been added. Enabled by default in Aurora and Nightly, it can be enabled in release and beta version by setting the <code>layout.css.scope-pseudo.enabled</code> about:config preference to <code>true</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=648722" title="FIXED: Add support for :scope as :-moz-scope">bug 648722</a>).</li> + <li>Support for the viewport-relative <a href="/bn-BD/docs/Web/CSS/length" title="The documentation about this has not yet been written; please consider contributing!"><code><length></code></a> units, <code>vh</code>, <code>vw</code>, <code>vmin</code>, and <code>vmax</code>, has landed (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=503720" title="FIXED: Implement vw/vh/vmin/vmax (viewport sizes) from CSS 3 Values and Units">bug 503720</a>).</li> + <li>The <code>-moz-initial</code> value has been unprefixed (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=806068" title="FIXED: Unprefix -moz-initial">bug 806068</a>). <code>-moz-initial</code> will be kept for a while as an alias; however, authors are strongly encouraged to switch over to <code>initial</code>.</li> + <li>The CSS <a href="/bn-BD/docs/Web/CSS/text-transform" title="The documentation about this has not yet been written; please consider contributing!"><code>text-transform</code></a> property now supports the <code>full-width</code> keyword, which allows a more seamless inclusion of Latin characters in text using ideographic fixed-width characters, like Chinese or Japanese (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=774560" title="FIXED: Implement text-transform: full-width">bug 774560</a>).</li> + <li>The CSS <a href="/bn-BD/docs/Web/CSS/page-break-inside" title="The documentation about this has not yet been written; please consider contributing!"><code>page-break-inside</code></a> has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012" title="FIXED: Implement page-break-inside: avoid">bug 685012</a>).</li> + <li>The CSS <a href="/bn-BD/docs/Web/CSS/calc" title="The documentation about this has not yet been written; please consider contributing!"><code>calc()</code></a> function can now be used on <code><color-stop></code> (on <a href="/bn-BD/docs/Web/CSS/gradient" title="The documentation about this has not yet been written; please consider contributing!"><code><gradient></code></a>).</li> + <li>The CSS <a href="/bn-BD/docs/Web/CSS/@page" title="The documentation about this has not yet been written; please consider contributing!"><code>@page</code></a> at-rule is now supported (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=115199" title="FIXED: @page in CSS2 not implemented">bug 115199</a>). Note that the pseudo-classes <a href="/bn-BD/docs/Web/CSS/:first" title="The documentation about this has not yet been written; please consider contributing!"><code>:first</code></a>, <a href="/bn-BD/docs/Web/CSS/:right" title="The documentation about this has not yet been written; please consider contributing!"><code>:right</code></a>, and <a href="/bn-BD/docs/Web/CSS/:left" title="The documentation about this has not yet been written; please consider contributing!"><code>:left</code></a> are not yet implemented.</li> + <li>The <a href="/bn-BD/docs/Web/CSS/:-moz-placeholder" title="The documentation about this has not yet been written; please consider contributing!"><code>:-moz-placeholder</code></a> pseudo-class is replaced by the <a href="/bn-BD/docs/Web/CSS/::-moz-placeholder" title="The documentation about this has not yet been written; please consider contributing!"><code>::-moz-placeholder</code></a> pseudo-<em>element</em> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=737786" title="FIXED: Switch from :-moz-placeholder to ::-moz-placeholder (pseudo-class to pseudo-element)">bug 737786</a>).</li> +</ul> + +<h2 id="JavaScript">JavaScript</h2> + +<p>General Gecko:</p> + +<p><a href="/en-US/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla" title="/en-US/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla">EcmaScript 6</a> (Harmony) implementation continues!</p> + +<ul> + <li>New mathematical methods have been implemented on <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a>: <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Math/fround" title="/en-US/docs/JavaScript/Reference/Global_Objects/Math/fround"><code>Math.fround()</code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=900125" title="FIXED: Float32: add Math.fround to the interpreter">bug 900125</a>).</li> + <li>The method <code>Array.of()</code> is now implemented on <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=866849" title="FIXED: Implement ES6 Array.of">bug 866849</a>).</li> + <li>The methods <a href="/bn-BD/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt" title="The documentation about this has not yet been written; please consider contributing!"><code>Number.parseInt()</code></a> and <a href="/bn-BD/docs/Web/JavaScript/Reference/Global_Objects/Number/parseFloat" title="The documentation about this has not yet been written; please consider contributing!"><code>Number.parseFloat()</code></a> have been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=886949" title="FIXED: Add Number.parseInt and Number.parseFloat">bug 886949</a>)</li> + <li>The methods <code>Map.prototype.forEach()</code> and <code>Set.prototype.forEach()</code> are now implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=866847" title="FIXED: Implement Map#forEach and Set#forEach">bug 866847</a>)</li> + <li>New mathematical methods have been implemented on <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a>: <code>Math.log10()</code>, <code>Math.log2()</code>, <code>Math.log1p()</code>, <code>Math.expm1()</code>, <code>Math.cosh()</code>, <code>Math.sinh()</code>, <code>Math.tanh()</code>, <code>Math.acosh()</code>, <code>Math.asinh()</code>, <code>Math.atanh()</code>, <code>Math.trunc()</code>, <code>Math.sign()</code> and <code>Math.cbrt()</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=717379" title="FIXED: Implement the new ES6 math functions">bug 717379</a>).</li> + <li>Support for binary and octal integer literals has been added: <code>0b10101010</code>, <code>0B1010</code>, <code>0o777</code>, <code>0O237</code> are now valid (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=894026" title="FIXED: Implement BinaryIntegerLiteral and OctalIntegerLiteral">bug 894026</a>).</li> + <li>The machine epsilon constant, that is <font>the smallest representible number that added to 1 will not be 1,</font> is now available as <a href="/bn-BD/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON" title="The documentation about this has not yet been written; please consider contributing!"><code>Number.EPSILON</code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=885798" title="FIXED: Add new ES6 Number constants: EPSILON, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER">bug 885798</a>).</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/arrow_functions" title="/en-US/docs/Web/JavaScript/Reference/arrow_functions">Arrow functions</a> are no longer automatically in strict mode unless explicitly requested with <code>"use strict"</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=852762" title="FIXED: Arrow functions are not automatically strict after all">bug 852762</a>)).</li> + <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat"><code>String.prototype.repeat</code></a> JS method has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=815431" title="FIXED: implement String.prototype.repeat">bug 815431</a>).</li> + <li>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty</code></a> method can now be used to redefine the <code>length</code> property of an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> object.</li> + <li>The option to disable JavaScript, including the options to allow moving windows/replace context menu, have been removed. You may still disable JavaScript by double clicking the "javascript.enabled" option in about:config.</li> + <li><a href="http://asmjs.org/spec/latest/" title="http://asmjs.org/spec/latest/">Asm.js </a>optimizations are enabled, making it possible to compile C/C++ applications to a subset of Javascript for better performance.</li> + <li>ES6 <a href="/en-US/docs/JavaScript/Reference/arrow_functions" title="/en-US/docs/JavaScript/Reference/arrow_functions">Arrow Function</a> syntax has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=846406" title="FIXED: Implement arrow functions">bug 846406</a>).</li> + <li>The new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a> function has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=839979" title="FIXED: Implement Object.is">bug 839979</a>).</li> + <li><a href="/en-US/docs/E4X" title="E4X">E4X</a>, an ancient JavaScript extension, has been removed. Implemented only in Gecko, it never got significant traction (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=788293" title="FIXED: Remove E4X from SpiderMonkey">bug 788293</a>).</li> + <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt" title="">parseInt</a> no longer treats strings with leading "0" as octal (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786135" title='FIXED: Make parseInt("042") === 42, now that other engines are moving that way'>bug 786135</a>).</li> + <li>Support for the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap" title="JavaScript/Reference/Global_Objects/WeakMap">Weakmap</a>.prototype.clear()</code> method, recently added to the Harmony (EcmaScript 6) draft proposal has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814562" title="FIXED: Implement clear() on WeakMaps">bug 814562</a>).</li> + <li>Support for the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Math/imul" title="JavaScript/Reference/Global_Objects/Math/imul"><code>Math.imul()</code></a> method, a C-style 32-bit multiplication function. Though proposed for Harmony (EcmaScript 6) it has not yet accepted and still is non-standard (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=808148" title="FIXED: prototype Math.imul">bug 808148</a>).</li> + <li>Web apps using draggable text with Kinetic 3.x are working, even when using the Cairo canvas backend (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=835064" title="Firefox 18 won't drag text on some installations.">bug 835064</a>).</li> + <li>The <a href="/en-US/docs/JavaScript/Reference/Statements/for_each...in" title="JavaScript/Reference/Statements/for_each...in"><code>for each…in</code></a> statement has been deprecated and should not be used. Consider using the new <a href="/en-US/docs/JavaScript/Reference/Statements/for...of" title="JavaScript/Reference/Statements/for...of"><code>for…of</code></a> statement (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=804834" title='FIXED: Hide "for each" from content'>bug 804834</a>).</li> + <li>Support for the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a>.prototype.keys</code>, <code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></code>.prototype.values</code>, and <code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></code>.prototype.entries</code> has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=817368" title="FIXED: Map.prototype.{keys,values,entries}">bug 817368</a>).</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Map" title="JavaScript/Reference/Global_Objects/Map">Map</a></code> and <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Set" title="JavaScript/Reference/Global_Objects/Set">Set</a></code> objects have changed from having a <code>size()</code> method to a <code>size</code> property (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=807001" title="FIXED: Map.prototype.size and Set.prototype.size should be accessor properties">bug 807001</a>).</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Map" title="JavaScript/Reference/Global_Objects/Map">Map</a></code> and <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Set" title="JavaScript/Reference/Global_Objects/Set">Set</a></code> objects also have a clear() method now. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=805003" title="FIXED: Implement Map.prototype.clear and Set.prototype.clear methods">bug 805003</a>).</li> +</ul> + +<h2 id="Telephony-specific_additions_(mostly_API-related)">Telephony-specific additions (mostly API-related)</h2> + +<ul> + <li>Fuzzy matcher API for phone numbers (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=883923" title="FIXED: Provide a Fuzzy Matcher API for phone numbers">bug 883923</a>)</li> + <li>CDMA + <ul> + <li>Registration info (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=882984" title="FIXED: [B2G] [CDMA] Update nsIDOMMozMobileCellInfo to also report base station id, base station latitude, base station longitude, system id, network id">bug 882984</a>) + <ul> + <li>(<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=882984" title="FIXED: [B2G] [CDMA] Update nsIDOMMozMobileCellInfo to also report base station id, base station latitude, base station longitude, system id, network id">bug 882984</a>)</li> + <li>multiple new CDMA specific attributes in <code>MozMobileCellInfo</code></li> + <li>dom/network/interfaces/nsIDOMMobileConnection.idl</li> + </ul> + </li> + <li>Emergency callback mode support (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887690" title="FIXED: B2G RIL: Support emergency callback mode">bug 887690</a>) + <ul> + <li>new method <code>exitEmergencyCbMode</code> and new event <code>emergencycbmodechange</code> in <code>MozMobileConnection</code></li> + <li>dom/network/interfaces/nsIDOMMozEmergencyCbModeEvent.idl</li> + </ul> + </li> + <li>OTASP (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=882983" title="FIXED: B2G RIL: Support for CDMA OTASP - expose ota status">bug 882983</a>) + <ul> + <li>new event <code>otastatuschange</code> in <code>MozMobileConnection</code></li> + <li>dom/network/interfaces/nsIDOMMozOtaStatusEvent.idl</li> + </ul> + </li> + <li>MDN/MIN (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=869778" title="FIXED: [B2G][CDMA]Get the CDMA subscription information.">bug 869778</a>) + <ul> + <li>new interface <code>MozGsmIccInfo</code> & <code>MozCdmaIccInfo</code></li> + <li>new attribute <code>iccType</code> in <code>MozIccInfo</code></li> + <li>dom/icc/interfaces/nsIDOMIccInfo.idl</li> + </ul> + </li> + <li>Preferred voice mode (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=869769" title="FIXED: [B2G][CDMA] Set and Query the preferred voice mode in CDMA">bug 869769</a>) + <ul> + <li>new methods <code>setVoicePrivacyMode</code> and <code>getVoicePrivacyMode</code> in <code>MozMobileConnection</code></li> + <li>dom/network/interfaces/nsIDOMMobileConnection.idl</li> + </ul> + </li> + <li>Roaming preference (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=869768" title="FIXED: [B2G][CDMA] Set and Query the roaming preference in CDMA">bug 869768</a>) + <ul> + <li>new methods <code>setRoamingPreference</code> and <code>getRoamingPreference</code> in <code>MozMobileConnection</code></li> + <li>dom/network/interfaces/nsIDOMMobileConnection.idl</li> + </ul> + </li> + <li>Call Waiting (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=822210" title="FIXED: B2G CDMA: support call waiting">bug 822210</a>) + <ul> + <li>new attribute <code>secondNumber</code> in <code>TelephonyCall</code></li> + <li>dom/webidl/TelephonyCall.webidl</li> + </ul> + </li> + </ul> + </li> + <li>Support Change Call Barring Password (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=905479" title="FIXED: B2G RIL: Support Change Call Barring Password">bug 905479</a>) + <ul> + <li>new method <code>changeCallBarringPassword</code> in <code>MozMobileConnection</code></li> + <li>dom/network/interfaces/nsIDOMMobileConnection.idl</li> + </ul> + </li> + <li>Move ICC functions out from <code>MobileConnection</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=875721" title="FIXED: B2G RIL: Move iccInfo related attribute/event from mozMobileConnection to mozIccManager">bug 875721</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=874744" title="FIXED: B2G RIL: Move card state related attribute/event from mozMobileConnection to mozIccManager">bug 874744</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=860585" title="FIXED: B2G RIL: Move cardLock related API from mozMobileConnection to mozIccManager">bug 860585</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=859220" title="FIXED: B2G RIL: Separate MozIccManager from MozMobileConnection">bug 859220</a>) + <ul> + <li><code>MozIccInfo</code> + <ul> + <li><code>navigator.mozIccManager.iccInfo</code></li> + <li>new interface</li> + <li>dom/icc/interfaces/nsIDOMIccInfo.idl</li> + </ul> + </li> + <li><code>MozIccManager</code> + <ul> + <li><code>navigator.mozIccManager</code></li> + <li>new attributes, methods, and events</li> + <li>dom/icc/interfaces/nsIDOMIccManager.idl</li> + </ul> + </li> + <li><code>MozMobileConnection</code> + <ul> + <li><code>navigator.mozMobileConnection</code></li> + <li>numerous attributes, methods and events removed</li> + <li>dom/network/interfaces/nsIDOMMobileConnection.idl</li> + </ul> + </li> + <li><code>nsIDOMMozMobileICCInfo</code> + <ul> + <li><code>navigator.mozMobileConnection.iccInfo</code></li> + <li>interface removed</li> + </ul> + </li> + </ul> + </li> + <li>ICC card lock improvements + <ul> + <li>Rename <code>ICCCardLockErrorEvent</code> to <code>IccCardLockErrorEvent</code> + <ul> + <li>dom/webidl/IccCardLockErrorEvent.webidl</li> + </ul> + </li> + <li>Retry count (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=886239" title="FIXED: B2G RIL: Remove retryCount from MobileConnection">bug 886239</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=875710" title="FIXED: B2G RIL: Get PIN/PUK remaining retry count">bug 875710</a>) + <ul> + <li>attribute <code>retryCount</code> removed from <code>MozMobileConnection</code></li> + <li>new method <code>getCardLockRetryCount</code> in <code>MozIccManager</code></li> + <li>dom/network/interfaces/nsIDOMMobileConnection.idl</li> + <li>dom/icc/interfaces/nsIDOMIccManager.idl</li> + </ul> + </li> + </ul> + </li> + <li>Import/export SIM Contacts (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=847741" title="FIXED: B2G RIL: Move mozContact.getSimContacts to IccManager">bug 847741</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=847820" title="FIXED: B2G RIL: Support exporting contacts to SIM card in IccManager">bug 847820</a>) + <ul> + <li>new methods <code>readContacts</code>, <code>updateContact</code> in <code>MozIccManager</code></li> + <li>dom/icc/interfaces/nsIDOMIccManager.idl</li> + </ul> + </li> + <li>ICC Secure Elements (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=840780" title="FIXED: (webicc) WebICC - Secure Elements">bug 840780</a>) + <ul> + <li>new methods <code>iccOpenChannel</code>, <code>iccExchangeAPDU</code>, <code>iccCloseChannel</code> in <code>MozIccManager</code></li> + <li>dom/icc/interfaces/nsIDOMIccManager.idl</li> + </ul> + </li> + <li>STK improvements + <ul> + <li>'duration' for Display Text, Setup Call commands (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=831630" title="FIXED: B2G STK: Add 'duration' property for DISPLAY_TEXT and SET_UP_CALL">bug 831630</a>) + <ul> + <li>new attribute <code>duration</code> in both <code>MozStkTextMessage</code> and <code>MozStkSetUpCall</code></li> + <li>dom/icc/interfaces/SimToolKit.idl</li> + </ul> + </li> + <li>support "Language Selection Event" (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=831627" title='FIXED: B2G STK: Support "Language Selection Event" Envelope command.'>bug 831627</a>) + <ul> + <li>new dictionary <code>MozStkLanguageSelectionEvent</code></li> + <li>dom/icc/interfaces/SimToolKit.idl</li> + </ul> + </li> + <li>support "Idle Screen Available Event" (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=831628" title='FIXED: B2G STK: Support "Idle Screen Available Event" Envelope command'>bug 831628</a>) + <ul> + <li>new dictionary <code>MozStkGeneralEvent</code></li> + <li>dom/icc/interfaces/SimToolKit.idl</li> + </ul> + </li> + </ul> + </li> + <li>MobileMessage + <ul> + <li>Turn <code>getSegmentInfoForText</code> into an async call (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=903403" title="FIXED: [sms][mms] Make getSegmentInfoForText() Asynchronous to Improve Typing Performance">bug 903403</a>) + <ul> + <li>dom/mobilemessage/interfaces/nsIDOMMobileMessageManager.idl</li> + </ul> + </li> + <li>Remove navigator.mozSms (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=891235" title="FIXED: WebSMS: remove navigator.mozSms">bug 891235</a>)</li> + </ul> + </li> + <li>Telephony + <ul> + <li>support "Conference Call" (certified only) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=772765" title="FIXED: B2G telephony: support conference calls">bug 772765</a>) + <ul> + <li><code>navigator.mozTelephony.conferenceGroup</code></li> + <li>new interface</li> + </ul> + </li> + </ul> + </li> +</ul> + +<h2 id="DOMAPI">DOM/API</h2> + +<p>Firefox OS-specific:</p> + +<ul> + <li><span id="summary_alias_container"><span id="short_desc_nonedit_display">Device Storage API: When getting a cursor callback from <code>navigator.getDeviceStorage("sdcard").enumerate</code>, <code><span id="summary_alias_container"><span id="short_desc_nonedit_display">this.done</span></span></code> was undefined in Firefox <1.2 (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=902565" title='this.done in cursor callback of naviagtor.getDeviceStorage("sdcard").enumerate is undefined'>bug 902565</a>). This is now fixed. The referenced bug discusses possible compatibility checks/workarounds for this issue. </span></span></li> + <li>The <a href="/bn-BD/docs/Web/API/RTCPeerConnection" title="The documentation about this has not yet been written; please consider contributing!"><code>RTCPeerConnection</code></a> Interface from WebRTC is implemented, but currently disabled by default in B2G, as it is not yet functional on Firefox OS devices (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=942343" title="FIXED: Pref off media.peerconnection.enabled on Firefox OS">bug 942343</a>.)</li> + <li><a href="/bn-BD/docs/Web/API/Notification" title="The documentation about this has not yet been written; please consider contributing!"><code>Web notifications</code></a> are supported in Firefox 1.2, therefore the <code>Notification</code> object should be used in preference to the old deprecated <a href="/bn-BD/docs/Web/API/Window/navigator/mozNotification" title="The documentation about this has not yet been written; please consider contributing!"><code>mozNotification</code></a> object (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=899574" title="FIXED: Notification API follow-up: provide a way to get current Notification objects">bug 899574</a> .)</li> + <li><a href="/bn-BD/docs/Web/API/Window/navigator/mozInputMethod" title="The documentation about this has not yet been written; please consider contributing!"><code>mozInputMethod</code></a> has been added to allow for people to write 3rd party keyboards. See the test application in gaia/test_apps for a reference implementation.</li> + <li>The Media Recording API has been implemented (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=803414" title="FIXED: Media Recording - Web API & Implementation">bug 803414</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=889720" title="FIXED: Media Recording - implement Pause/Resume DOM API">bug 889720</a>)</li> + <li>KeyboardEvent.repeat now supported (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=600117" title="FIXED: Implement DOM3 KeyboardEvent.repeat">bug 600117</a>)</li> + <li>3rd party keyboards now supported (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=816869" title="FIXED: [Meta] Enable third-party keyboards">bug 816869</a>)</li> +</ul> + +<div id="magicdomid15">New WebGL 1 extensions supported in Firefox OS 1.2:</div> + +<ul> + <li><a href="http://www.khronos.org/registry/webgl/extensions/OES_element_index_uint/">OES_element_index_uint</a></li> + <li><a href="http://www.khronos.org/registry/webgl/extensions/OES_texture_float_linear/">OES_texture_float_linear</a></li> + <li><a href="http://www.khronos.org/registry/webgl/extensions/OES_vertex_array_object/">OES_vertex_array_object</a></li> + <li><a href="http://www.khronos.org/registry/webgl/extensions/WEBGL_draw_buffers/">WEBGL_draw_buffers</a></li> + <li id="magicdomid26"><a href="http://www.khronos.org/registry/webgl/extensions/ANGLE_instanced_arrays/">ANGLE_instanced_arrays</a></li> +</ul> + +<div class="note"> +<div><strong>Note</strong>: availability of these extensions depends on device capabilities; not all extensions will be available on all devices.</div> +</div> + +<p>General Gecko:</p> + +<ul> + <li>A <code>.default</code> attribute has now been added to the DeviceStorage API (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=874213" title="FIXED: DeviceStorage: Add a .default attribute to the device storage object.">bug 874213</a>)</li> + <li>The TCP Socket API has landed (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=797561" title="FIXED: Expose a server tcp socket API to web applications">bug 797561</a>)</li> + <li>Make the last argument (doctype) to <a href="/bn-BD/docs/Web/API/DOMImplementation/createDocument" title="The documentation about this has not yet been written; please consider contributing!"><code>DOMImplementation.createDocument</code></a> optional (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=909859" title="FIXED: Make the doctype argument of createDocument optional">bug 909859</a>).</li> + <li>Implement the new <a href="/bn-BD/docs/Web/API/Element/classList" title="The documentation about this has not yet been written; please consider contributing!"><code>element.classList</code></a> specification which permits adding/removing several classes with one call (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014" title="FIXED: implement the new classList specification which permits adding/removing several classes with one call">bug 814014</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/URL/URL" title="The documentation about this has not yet been written; please consider contributing!"><code>URL()</code></a> constructor have been implemented on the <a href="/bn-BD/docs/Web/API/URL" title="The documentation about this has not yet been written; please consider contributing!"><code>URL</code></a> interface (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887364" title="FIXED: Implement URL API">bug 887364</a>).</li> + <li>The properties <a href="/bn-BD/docs/Web/API/URLUtils/origin" title="The documentation about this has not yet been written; please consider contributing!"><code>URLUtils.origin</code></a>, <a href="/bn-BD/docs/Web/API/URLUtils/password" title="The documentation about this has not yet been written; please consider contributing!"><code>URLUtils.password</code></a>, and <a href="/bn-BD/docs/Web/API/URLUtils/username" title="The documentation about this has not yet been written; please consider contributing!"><code>URLUtils.username</code></a> are now available to all interfaces implementing <a href="/bn-BD/docs/Web/API/URLUtils" title="The documentation about this has not yet been written; please consider contributing!"><code>URLUtils</code></a>: <a href="/bn-BD/docs/Web/API/URL" title="The documentation about this has not yet been written; please consider contributing!"><code>URL</code></a>, <a href="/bn-BD/docs/Web/API/Location" title="The documentation about this has not yet been written; please consider contributing!"><code>Location</code></a>, <a href="/bn-BD/docs/Web/API/HTMLAnchorElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLAnchorElement</code></a>, and <a href="/bn-BD/docs/Web/API/HTMLAreaElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLAreaElement</code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887364" title="FIXED: Implement URL API">bug 887364</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/URL" title="The documentation about this has not yet been written; please consider contributing!"><code>URL</code></a> interface is now accessible from Web Workers (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887364" title="FIXED: Implement URL API">bug 887364</a>).</li> + <li>IndexedDB can now be used as a "optimistic" storage area so it doesn't require any prompts and data is stored in a pool with LRU eviction policy, in short temporary storage (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=785884" title="FIXED: Implement support for temporary storage (aka shared pool)">bug 785884</a>).</li> + <li>Path of the persistent storage has been changed from <profile>/indexedDB to <profile>/storage/persistent (on b2g from /data/local/indexedDB to /data/local/storage/persistent).</li> + <li>The <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> is now supported. An incomplete implementation was previously available behind a preference (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=779297" title="FIXED: Implement and ship Web Audio">bug 779297</a>).</li> + <li>Some IME related keys on Windows are supported by <code>KeyboardEvent.key</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=865565" title="FIXED: D3E KeyboardEvent.key values of IME related keys should be considered with keyboard layout locale">bug 865565</a>), see <a href="/en-US/docs/Web/API/KeyboardEvent#keyname_table_win" title="/en-US/docs/Web/API/KeyboardEvent#keyname_table_win">the key name table</a> for the detail.</li> + <li>Firefox for Metro now dispatches key events in the same way as the desktop version (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=843236" title="FIXED: Defect - Send the correct DOM keycodes in keyboard events from metro widget for US and non-US keyboards">bug 843236</a>).</li> + <li><code>keypress</code> event is no longer dispatched if <code>preventDefault()</code> of preceding <code>keydown</code> event is called (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=501496" title="FIXED: preventDefault on keydown does not cancel following keypress">bug 501496</a>), see <a href="/en-US/docs/Web/Reference/Events/keydown#preventDefault()_of_keydown_event" title="/en-US/docs/Web/Reference/Events/keydown#preventDefault()_of_keydown_event">the document of <code>keydown</code> event</a> for the detail.</li> + <li>Renamed the <code>Future</code> interface to <code>Promise</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=884279" title="FIXED: renaming future to promise">bug 884279</a>).</li> + <li>The <code>srcDoc</code> property on the <a href="/bn-BD/docs/Web/API/HTMLIFrameElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLIFrameElement</code></a> interface, allowing the inline specification of the content of an <a href="/bn-BD/docs/Web/HTML/Element/iframe" title="The documentation about this has not yet been written; please consider contributing!"><code><iframe></code></a>, is now supported (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=802895" title="FIXED: implement <iframe srcdoc=''> to allow document content in iframe to be specified inline">bug 802895</a>).</li> + <li>The <code>createTBody()</code> method on the <a href="/bn-BD/docs/Web/API/HTMLTableElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLTableElement</code></a> interface, allowing to get its <a href="/bn-BD/docs/Web/HTML/Element/tbody" title="The documentation about this has not yet been written; please consider contributing!"><code><tbody></code></a>, is now supported (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=813034" title="FIXED: Implement table.createTBody">bug 813034</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/Range/collapse" title="The documentation about this has not yet been written; please consider contributing!"><code>Range.collapse()</code></a> method <code>toStart</code> parameter is now optional and default to <code>false</code>, like defined in the spec (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=891340" title="FIXED: Make Range.collapse optional and default to false">bug 891340</a>).</li> + <li>Support of <a href="/bn-BD/docs/Web/API/ParentNode" title="The documentation about this has not yet been written; please consider contributing!"><code>ParentNode</code></a> interface on <a href="/bn-BD/docs/Web/API/Document" title="The documentation about this has not yet been written; please consider contributing!"><code>Document</code></a> and <a href="/bn-BD/docs/Web/API/DocumentFragment" title="The documentation about this has not yet been written; please consider contributing!"><code>DocumentFragment</code></a> has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=895974" title="FIXED: document.firstElementChild is not defined">bug 895974</a>).</li> + <li>The <code>previousElementSibling</code> and <code>nextElementSibling</code> have been moved to <a href="/bn-BD/docs/Web/API/ChildNode" title="The documentation about this has not yet been written; please consider contributing!"><code>ChildNode</code></a> allowing them to be called not only on a <a href="/bn-BD/docs/Web/API/Element" title="The documentation about this has not yet been written; please consider contributing!"><code>Element</code></a> object but also on a <a href="/bn-BD/docs/Web/API/CharacterData" title="The documentation about this has not yet been written; please consider contributing!"><code>CharacterData</code></a> or <a href="/bn-BD/docs/Web/API/DocumentType" title="The documentation about this has not yet been written; please consider contributing!"><code>DocumentType</code></a> object (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=895974" title="FIXED: document.firstElementChild is not defined">bug 895974</a>).</li> + <li>The <code>navigator.geolocation</code> property has been updated to match the spec. It never returns <code>null</code>. When the preference <code>geo.enabled</code> is set to <code>false</code>, it now returns <code>undefined</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=884921" title="FIXED: Align navigator.geolocation with spec">bug 884921</a>).</li> + <li>The <code>videoPlaybackQuality</code> attribute on the <a href="/bn-BD/docs/Web/API/HTMLVideoElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLVideoElement</code></a> interface has been changed to the <code>getVideoPlaybackQuality</code> method. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=889205" title="FIXED: Make HTMLVideoElement.videoPlaybackQuality a method">bug 889205</a>)</li> + <li>Support for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range.Range" title="The Range() constructor returns a newly created Range object whose start and end is the global Document object."><code>Range()</code></a> constructor has been added (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=868999" title="FIXED: Range should be constructable">bug 868999</a>).</li> + <li>Support for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Text.Text" title="The Text() constructor returns a newly created Text object with the optional DOMString given in parameter as its textual content."><code>Text()</code></a> constructor has been added (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=869000" title="FIXED: Text should be constructable">bug 869000</a>).</li> + <li>Support for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Comment.Comment" title="The Comment() constructor returns a newly created Comment object with the optional DOMString given in parameter as its textual content."><code>Comment()</code></a> constructor has been added (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=869006" title="FIXED: Comment should be constructable">bug 869006</a>).</li> + <li>Support for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment.DocumentFragment" title="The DocumentFragment() constructor returns an empty newly created DocumentFragment object ."><code>DocumentFragment()</code></a> constructor has been added (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=869002" title="FIXED: DocumentFragment should be constructable">bug 869002</a>).</li> + <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent" title="The FocusEvent interface represents focus-related events like focus, blur, focusin, or focusout."><code>FocusEvent</code></a> interface has been implemented (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=855741" title="FIXED: FocusEvent interface is missing">bug 855741</a>).</li> + <li>Support for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ChildNode.remove" title="The ChildNode.remove method removes the object from the tree it belongs to."><code>ChildNode.remove()</code></a> method has been added (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=856629" title="FIXED: Implement ChildNode.remove()">bug 856629</a>).</li> + <li>The interfaces related to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track" title="The track element is used as a child of the media elements—<audio> and <video>—and does not represent anything on its own. It lets you specify timed text tracks (or time-based data)."><code><track></code></a> element, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement" title="The HTMLTrackElement interface provides access to the properties of <track> elements, as well as methods to manipulate them."><code>HTMLTrackElement</code></a>, <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/TextTrack" title="The documentation about this has not yet been written; please consider contributing!"><code>TextTrack</code></a>, <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue" title="The documentation about this has not yet been written; please consider contributing!"><code>TextTrackCue</code></a>, <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList" title="The documentation about this has not yet been written; please consider contributing!"><code>TextTrackList</code></a>, and <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCueList" title="The documentation about this has not yet been written; please consider contributing!"><code>TextTrackCueList</code></a> have been implemented behind the <code>media.webvtt.enabled</code> property, defaulting to <code>false</code> (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=833385" title="FIXED: [webvtt] Implement Track element and TextTrack* DOM classes">bug 833385</a>).</li> + <li>The <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad" title="The documentation about this has not yet been written; please consider contributing!"><code>Gamepad</code></a> interface, and <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getGamepads" title="The documentation about this has not yet been written; please consider contributing!"><code>Navigator.getGamepads</code></a> have been implemented behind the <code>dom.gamepad.enabled</code> property, defaulting to <code>false</code> (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=690935" title="FIXED: Implement navigator.getGamepads() method">bug 690935</a>).</li> + <li>On desktop Firefox only, <code>HTMLCanvasElement.getContext()</code> can now take the <code>webgl</code> value, in addition to <code>experimental-webgl</code> (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=870232" title='FIXED: Implement getContext("webgl") for Desktop FF'>bug 870232</a>).</li> + <li>The non-standard method <code>mozLoadFrom()</code> of <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement" title="The HTMLMediaElement interface has special properties and methods (beyond the properties and methods available for all children of HTMLElement), that are common to all media-related objects."><code>HTMLMediaElement</code></a> has been removed (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=877135" title="FIXED: Remove mozLoadFrom">bug 877135</a>).</li> + <li>D3E <a href="/en-US/docs/DOM/KeyboardEvent#Key_names_and_Char_values" title="/en-US/docs/DOM/KeyboardEvent#Key_names_and_Char_values"><code>KeyboardEvent.key</code></a> is now supported, but only for non-printable keys (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=842927" title="FIXED: Implement DOM3 KeyboardEvent.key only for non-printable key, first">bug 842927</a>).</li> + <li>The <code>title</code> attribute of <a href="/bn-BD/docs/Web/API/DOMImplementation/createHTMLDocument" title="The documentation about this has not yet been written; please consider contributing!"><code>DOMImplementation.createHTMLDocument</code></a> is now optional as per updated DOM specification.</li> + <li>The ability to add a sidebar panel (<code>window.sidebar.addPanel</code>) has been dropped (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=691647" title="FIXED: clean up nsISidebar (remove window.sidebar.addPanel/addPersistentPanel)">bug 691647</a>).</li> + <li>The unprefixed <a href="/bn-BD/docs/Web/API/Window/requestAnimationFrame" title="The documentation about this has not yet been written; please consider contributing!"><code>Window.requestAnimationFrame</code></a> and <a href="/bn-BD/docs/Web/API/Window/cancelAnimationFrame" title="The documentation about this has not yet been written; please consider contributing!"><code>Window.cancelAnimationFrame</code></a> methods has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=704063" title="FIXED: Add unprefixed requestAnimationFrame">bug 704063</a>).</li> + <li>The callback for <a href="/bn-BD/docs/Web/API/Window/requestAnimationFrame" title="The documentation about this has not yet been written; please consider contributing!"><code>Window.requestAnimationFrame</code></a> now receives a <a href="/bn-BD/docs/Web/API/DOMHighResTimeStamp" title="The documentation about this has not yet been written; please consider contributing!"><code>DOMHighResTimeStamp</code></a> as argument instead of the less precise <a href="/bn-BD/docs/Web/API/DOMTimeStamp" title="The documentation about this has not yet been written; please consider contributing!"><code>DOMTimeStamp</code></a> used in the unprefixed version (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=753453" title="FIXED: requestAnimationFrame callback should return DOMHighResTimeStamp">bug 753453</a>).</li> + <li>The text argument for <a href="/bn-BD/docs/Web/API/Window/alert" title="The documentation about this has not yet been written; please consider contributing!"><code>window.alert</code></a> and <a href="/bn-BD/docs/Web/API/Window/confirm" title="The documentation about this has not yet been written; please consider contributing!"><code>window.confirm</code></a> is now optional (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=861605" title="FIXED: Make the arguments to Window.alert, Window.confirm optional">bug 861605</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/HTMLMediaElement/initialTime" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLMediaElement.initialTime</code></a> property, removed from the spec, is no more supported (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=742537" title="FIXED: Remove HTMLMediaElement.initialTime">bug 742537</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/AnimationEvent/AnimationEvent" title="The documentation about this has not yet been written; please consider contributing!"><code>AnimationEvent()</code></a> constructor has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=848293" title="FIXED: Update AnimationEvent to be compatible with the spec">bug 848293</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/AnimationEvent/pseudoElement" title="The documentation about this has not yet been written; please consider contributing!"><code>AnimationEvent.pseudoElement</code></a> property has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=848293" title="FIXED: Update AnimationEvent to be compatible with the spec">bug 848293</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/TransitionEvent/TransitionEvent" title="The documentation about this has not yet been written; please consider contributing!"><code>TransitionEvent()</code></a> constructor has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=848291" title="FIXED: Update TransitionEvent to be compatible with the spec">bug 848291</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/TransitionEvent/pseudoElement" title="The documentation about this has not yet been written; please consider contributing!"><code>TransitionEvent.pseudoElement</code></a> property has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=848291" title="FIXED: Update TransitionEvent to be compatible with the spec">bug 848291</a>).</li> + <li>The non-standard <a href="/bn-BD/docs/Web/API/TransitionEvent/initTransitionEvent" title="The documentation about this has not yet been written; please consider contributing!"><code>TransitionEvent.initTransitionEvent()</code></a> and <a href="/bn-BD/docs/Web/API/AnimationEvent/initAnimationEvent" title="The documentation about this has not yet been written; please consider contributing!"><code>AnimationEvent.initAnimationEvent()</code></a> have been removed (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=868751" title='FIXED: Remove support for document.createEvent("AnimationEvent"), document.createEvent("TransitionEvent"), AnimationEvent.initAnimationEvent, and TransitionEvent.initTransitionEvent'>bug 868751</a>).</li> + <li>Support for the <code>multipart</code> property on <code>XMLHttpRequest</code> and <code>multipart/x-mixed-replace</code> responses in <code>XMLHttpRequest</code> has been removed. This was a Gecko-only feature that was never standardized. <a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a> or inspecting <code>responseText</code> from progress events can be used instead.</li> + <li>Support for <a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Web Notifications</a> has been landed (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=782211" title="FIXED: Implement notification API spec">bug 782211</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/FormData" title="The documentation about this has not yet been written; please consider contributing!"><code>FormData</code></a> <code>append</code> method now accepts a third optional <code>filename</code> parameter (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=690659" title="FIXED: filename parameter in the FormData.append method">bug 690659</a>).</li> + <li><a href="/bn-BD/docs/Web/API/Node/isSupported" title="The documentation about this has not yet been written; please consider contributing!"><code>Node.isSupported</code></a> has been removed (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=801562" title="FIXED: Remove Node.isSupported">bug 801562</a>).</li> + <li><a href="/bn-BD/docs/Web/API/Node/setUserData" title="The documentation about this has not yet been written; please consider contributing!"><code>Node.setUserData</code></a> and <a href="/bn-BD/docs/Web/API/Node/getUserData" title="The documentation about this has not yet been written; please consider contributing!"><code>Node.getUserData</code></a> has been removed for web content and are deprecated for chrome content (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=842372" title="FIXED: Make getUserData and setUserData ChromeOnly">bug 842372</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/Element/attributes" title="The documentation about this has not yet been written; please consider contributing!"><code>Element.attributes</code></a> property has been moved there from <a href="/bn-BD/docs/Web/API/Node" title="The documentation about this has not yet been written; please consider contributing!"><code>Node</code></a> as required by the spec (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=844134" title="FIXED: attributes should be defined on Element and not Node">bug 844134</a>).</li> + <li>The Mac OS X backend for <a href="/bn-BD/docs/Web/API/DeviceLightEvent" title="The documentation about this has not yet been written; please consider contributing!"><code>Ambient Light Events</code></a> has been implemented.</li> + <li>Elements in the HTML namespace with local names <a href="/bn-BD/docs/Web/HTML/Element/bgsound" title="The HTML Background Sound Element () is an Internet Explorer element associating a background sound with a page."><code><bgsound></code></a>, <a href="/bn-BD/docs/Web/HTML/Element/multicol" title="The documentation about this has not yet been written; please consider contributing!"><code><multicol></code></a>, and <a href="/bn-BD/docs/Web/HTML/Element/image" title="The documentation about this has not yet been written; please consider contributing!"><code><image></code></a> no longer implement the <a href="/bn-BD/docs/Web/API/HTMLSpanElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLSpanElement</code></a> interface. <a href="/bn-BD/docs/Web/HTML/Element/bgsound" title="The HTML Background Sound Element () is an Internet Explorer element associating a background sound with a page."><code><bgsound></code></a> and <a href="/bn-BD/docs/Web/HTML/Element/bgsound" title="The HTML Background Sound Element () is an Internet Explorer element associating a background sound with a page."><code><bgsound></code></a> implement <a href="/bn-BD/docs/Web/API/HTMLUnknownElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLUnknownElement</code></a> and <a href="/bn-BD/docs/Web/HTML/Element/image" title="The documentation about this has not yet been written; please consider contributing!"><code><image></code></a> implements <a href="/bn-BD/docs/Web/API/HTMLElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLElement</code></a>.</li> + <li>The <a href="/bn-BD/docs/Web/API/NodeIterator/detach" title="The documentation about this has not yet been written; please consider contributing!"><code>NodeIterator.detach</code></a> method has been changed to do nothing (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=823549" title="FIXED: Make NodeIterator.detach() a no-op">bug 823549</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/BlobEvent" title="The documentation about this has not yet been written; please consider contributing!"><code>BlobEvent</code></a> interface has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=834165" title="FIXED: Implement BlobEvent">bug 834165</a>).</li> + <li>The properties <code>HTMLMediaElement.crossorigin</code> and <code>HTMLInputElement.inputmode</code> has been removed to match the spec in <a href="/bn-BD/docs/Web/API/HTMLMediaElement/crossOrigin" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLMediaElement.crossOrigin</code></a> and <code>HTMLInputElement.inputMode</code>, respectively (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=847370" title="FIXED: HTMLMediaElement - crossOrigin vs crossorigin">bug 847370</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=850346" title="FIXED: inputmode vs inputMode for nsHTMLInputElement">bug 850346</a>).</li> + <li>WebRTC: the Media Stream API and Peer Connection API are now supported by default.</li> + <li>Web Components: the <a href="/bn-BD/docs/Web/API/Document/register" title="The documentation about this has not yet been written; please consider contributing!"><code>Document.register</code></a> method has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=783129" title="FIXED: Implement the document.register interface method">bug 783129</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/ProgressEvent/initProgressEvent" title="The documentation about this has not yet been written; please consider contributing!"><code>ProgressEvent.initProgressEvent()</code></a> constructor method has been removed. Uses the standard constructor, <a href="/bn-BD/docs/Web/API/ProgressEvent/ProgressEvent" title="The documentation about this has not yet been written; please consider contributing!"><code>ProgressEvent()</code></a> to construc and initialize <a href="/bn-BD/docs/Web/API/ProgressEvent" title="The documentation about this has not yet been written; please consider contributing!"><code>ProgressEvent</code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=843489" title='FIXED: [Progress Events] Remove support for ProgressEvent.initProgressEvent() and Document.createEvent("ProgressEvent")'>bug 843489</a>).</li> + <li>Manipulated data associated with a <code><a href="/bn-BD/docs/Web/Reference/Events/cut" title="/bn-BD/docs/Web/Reference/Events/cut">cut</a></code>, <code><a href="/bn-BD/docs/Web/Reference/Events/copy" title="/bn-BD/docs/Web/Reference/Events/copy">copy</a></code>, or <code><a href="/bn-BD/docs/Web/Reference/Events/paste" title="/bn-BD/docs/Web/Reference/Events/paste">paste</a></code> event can now be accessed via the <a href="/bn-BD/docs/Web/API/ClipboardEvent/clipboardData" title="The documentation about this has not yet been written; please consider contributing!"><code>ClipboardEvent.clipboardData</code></a> property (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=407983" title="FIXED: Add support clipboardData object for the onpaste, oncopy, oncut events">bug 407983</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/HTMLTimeElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLTimeElement</code></a> interface has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=629801" title="FIXED: Implement HTML5 <time> element">bug 629801</a>).</li> + <li>When a <a href="/bn-BD/docs/Web/API/Worker" title="The documentation about this has not yet been written; please consider contributing!"><code>Worker</code></a> constructor is passed an invalid URL, it now throws <a href="/bn-BD/docs/Web/API/DOMException" title="The documentation about this has not yet been written; please consider contributing!"><code>DOMException</code></a> of type <code>SECURITY_ERR</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=587251" title="FIXED: new Worker(badURL) should throw a SECURITY_ERR">bug 587251</a>).</li> + <li>The <code>origin</code> property has been added to the <a href="/bn-BD/docs/Web/API/Window/location" title="The documentation about this has not yet been written; please consider contributing!"><code>window.location</code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=828261" title="FIXED: Implement `window.location.origin`.">bug 828261</a>).</li> + <li>The <code>valueAsDate</code> and <code>valueAsNumber</code> methods have been added for <code><input type="time"></code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781570" title="FIXED: implement valueAsNumber and valueAsDate for input <input type=time>">bug 781570</a>).</li> + <li>The <code>min</code> and <code>max</code> attributes now apply to <code><input type="time"></code> too (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781572" title="FIXED: implement the min and max attribute for <input type=time>">bug 781572</a>).</li> + <li>Some new keyCodes for volume control are supported (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=674739" title="FIXED: Implement DOM3 KeyboardEvent types for audio">bug 674739</a>).</li> + <li>Some new keyCodes for ancient keyboard layout such as AS/400 are now supported on Windows and Linux (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=833719" title="FIXED: Some function keys are not working since Firefox Version 15">bug 833719</a>).</li> + <li>Various keyCode values for OEM sepecific keys on Windows are now supported again (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=833719" title="FIXED: Some function keys are not working since Firefox Version 15">bug 833719</a>).</li> + <li>The function <a href="/en-US/docs/DOM/window.crypto.getRandomValues" title="DOM/window.crypto.getRandomValues"><code>window.crypto.getRandomValues</code></a> has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=440046" title="FIXED: expose secure PRNG in the DOM (window.crypto.getRandomValues)">bug 440046</a>).</li> + <li>The methods <a href="/bn-BD/docs/Web/API/NodeIterator/expandEntityReferences" title="The documentation about this has not yet been written; please consider contributing!"><code>NodeIterator.expandEntityReferences()</code></a> and <a href="/bn-BD/docs/Web/API/TreeWalker/expandEntityReferences" title="The documentation about this has not yet been written; please consider contributing!"><code>TreeWalker.expandEntityReferences()</code></a>, no more in the latest DOM spec, has been removed (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=672190" title="FIXED: consider removing expandEntityReferences from NodeIterator and TreeWalker">bug 672190</a>).</li> + <li>CSSOM: the method <a href="/bn-BD/docs/Web/API/CSSKeyframesRule" title="The documentation about this has not yet been written; please consider contributing!"><code>CSSKeyframesRule</code></a><code>.insertRule</code> has been removed to <a href="/bn-BD/docs/Web/API/CSSKeyframesRule" title="The documentation about this has not yet been written; please consider contributing!"><code>CSSKeyframesRule</code></a><code>.appendRule</code> to match a spec change (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=841896" title="FIXED: CSSKeyframesRule should have a `appendRule` method, not `insertRule`">bug 841896</a>).</li> + <li>CSSOM If the given parameter given to <a href="/bn-BD/docs/Web/API/CSSStyleSheet/insertRule" title="The documentation about this has not yet been written; please consider contributing!"><code>CSSStyleSheet.insertRule</code></a> contains more than one rule, a <a href="/bn-BD/docs/Web/API/DOMException" title="The documentation about this has not yet been written; please consider contributing!"><code>DOMException</code></a> with a <code>SYNTAX_ERR</code> is now thrown (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=765599" title="FIXED: CSSStyleSheet.insertRule should throw when there are more than one rule">bug 765599</a>).</li> + <li>Until now, when the same headers were repeatedly set with <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#setRequestHeader" title="/en-US/docs/Web/API/XMLHttpRequest#setRequestHeader"><code>XMLHttpRequest.setRequestHeader</code></a>, the last-specified value was used. This behavior has been changed to comply with the spec, so those values will be properly combined (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=819051" title="FIXED: XMLHttpRequest.setRequestHeader() overwrites instead of combines values for the same header.">bug 819051</a>).</li> + <li><a href="/bn-BD/docs/Web/API/HTMLMediaElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLMediaElement</code></a> supports now <code>playbackRate</code> (both read and write), with pitch correction. Pitch correction can be controlled using the property <code>mozPreservesPitch</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=495040" title="FIXED: Implement playbackRate and related bits">bug 495040</a>).</li> + <li>CSSOM: Support for the new <a href="/bn-BD/docs/Web/API/CSSGroupingRule" title="The documentation about this has not yet been written; please consider contributing!"><code>CSSGroupingRule</code></a> and <a href="/bn-BD/docs/Web/API/CSSConditionRule" title="The documentation about this has not yet been written; please consider contributing!"><code>CSSConditionRule</code></a> has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814907" title="FIXED: implement CSSGroupingRule and CSSConditionRule">bug 814907</a>).</li> + <li>CSSOM: On <a href="/bn-BD/docs/Web/API/CSSRule" title="The documentation about this has not yet been written; please consider contributing!"><code>CSSRule</code></a> the constant CSSRule.MOZ_KEYFRAME_RULE and CSSRule.MOZ_KEYFRAMES_RULE have been unprefixed to CSSRule.KEYFRAME_RULE and CSSRule.KEYFRAMES_RULE. The prefixed version are temporarily kept for helping Web author to transition their code <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=816431" title="FIXED: unprefix CSSRule.MOZ_KEYFRAME{,S}_RULE constants">bug 816431</a>).</li> + <li>CSSOM: It is now possible to set the value of <code>conditionText</code> for <a href="/bn-BD/docs/Web/API/CSSMediaRule" title="The documentation about this has not yet been written; please consider contributing!"><code>CSSMediaRule</code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=815021" title="FIXED: implement CSSMediaRule.conditionText assignment">bug 815021</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/DOMParser" title="The documentation about this has not yet been written; please consider contributing!"><code>DOMParser</code></a> <code>parseFromStream</code> and <code>parseFromBuffer</code> methods are no longer available from web content (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=816410" title="FIXED: Convert XMLSerializer and DOMParser to WebIDL bindings">bug 816410</a>).</li> + <li>The <code><a href="/en-US/docs/XMLSerializer">XMLSerializer</a></code> <code>serializeToStream</code> method is no longer available from web content (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=816410" title="FIXED: Convert XMLSerializer and DOMParser to WebIDL bindings">bug 816410</a>).</li> + <li><a href="/bn-BD/docs/Web/API/TextDecoder" title="The documentation about this has not yet been written; please consider contributing!"><code>TextDecoder</code></a> and <a href="/bn-BD/docs/Web/API/TextEncoder" title="The documentation about this has not yet been written; please consider contributing!"><code>TextEncoder</code></a> interfaces have been updated to match the latest spec (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=801487" title="FIXED: Update StringEncoding API per the latest spec and fix some bugs">bug 801487</a>) and are now available in Workers (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=795542" title="FIXED: Implement StringEncoding API in Workers">bug 795542</a>).</li> + <li>Support for the <code>CSS.supports()</code> method has been added, behind the <code><code>layout.css.supports-rule.enabled</code></code> pref (off by default) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=779917" title="FIXED: Implement CSS.supports()">bug 779917</a>).</li> + <li>Support for UndoManager has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=617532" title='FIXED: implement the HTML5 "undo history" feature (UndoManager interface)'>bug 617532</a>).</li> + <li>The CSSOM <a href="/bn-BD/docs/Web/API/Document/caretPositionFromPoint" title="The documentation about this has not yet been written; please consider contributing!"><code>document.caretPositionFromPoint</code></a> method, which returns a <a href="/bn-BD/docs/Web/API/CaretPosition" title="The documentation about this has not yet been written; please consider contributing!"><code>CaretPosition</code></a> has been implemented.</li> + <li>The index argument of the <a href="/bn-BD/docs/Web/API/TableRow/insertCell" title="The documentation about this has not yet been written; please consider contributing!"><code>tableRow.insertCell</code></a> and <a href="/bn-BD/docs/Web/API/Table/insertRow" title="The documentation about this has not yet been written; please consider contributing!"><code>table.insertRow</code></a> methods has been made optional as per HTML specification.</li> + <li><a href="/bn-BD/docs/Web/API/Navigator/getUserMedia" title="The documentation about this has not yet been written; please consider contributing!"><code>Navigator.getUserMedia</code></a>, still prefixed as <code>Navigator.mozGetUserMedia</code> is now activated by default.</li> + <li>The third, optional, <code>transfer</code> argument of <a href="/bn-BD/docs/Web/API/Window/postMessage" title="The documentation about this has not yet been written; please consider contributing!"><code>Window.postMessage</code></a> is now supported. It allows to transfer a sequence of <a href="/bn-BD/docs/Web/API/Transferable" title="The documentation about this has not yet been written; please consider contributing!"><code>Transferable</code></a> objects to the destination (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=822094" title="FIXED: Implement transfer parameter of window.postMessage">bug 822094</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/Element/getElementsByTagName" title="The documentation about this has not yet been written; please consider contributing!"><code>element.getElementsByTagName</code></a> method will now return <code>HTMLCollection</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=799464" title="FIXED: Make Element.getElementsBy* return HTMLCollection">bug 799464</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/File" title="The documentation about this has not yet been written; please consider contributing!"><code>File</code></a> <code>mozLastModifiedDate</code> property has been implemented. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=793955" title="FIXED: [DeviceStorage] files returned by DeviceStorage.get() don't always have lastModifiedDate">bug 793955</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/File" title="The documentation about this has not yet been written; please consider contributing!"><code>File</code></a> <code>lastModifiedDate</code> property returns the current date, when the date of the last modification is unknown. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=793459" title="FIXED: Update File.lastModifiedDate to latest spec">bug 793459</a>.</li> + <li>The <a href="/bn-BD/docs/Web/API/CanvasRenderingContext2D" title="The documentation about this has not yet been written; please consider contributing!"><code>CanvasRenderingContext2D</code></a> <code>isPointInStroke</code> method has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=803124" title="FIXED: Implement isPointInStroke">bug 803124</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/HTMLCanvasElement" title="The documentation about this has not yet been written; please consider contributing!"><code>HTMLCanvasElement</code></a> <code>toBlob</code> method has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=648610" title="FIXED: Implement <canvas>.toBlob">bug 648610</a>).</li> + <li>The <a href="/bn-BD/docs/Web/API/Node/isSupported" title="The documentation about this has not yet been written; please consider contributing!"><code>Node.isSupported</code></a> and the <a href="/bn-BD/docs/Web/API/Document/implementation" title="The documentation about this has not yet been written; please consider contributing!"><code>document.implementation.hasFeature()</code></a> methods have been changed to always return <code>true</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=801425" title="FIXED: Make hasFeature() and isSupported() always return true">bug 801425</a>).</li> + <li>When calling <code>document.createElement(null)</code>, <code>null</code> will now be stringified and works like <code>document.createElement("null")</code>.</li> +</ul> + +<h2 id="SVG">SVG</h2> + +<p>General Gecko:</p> + +<ul> + <li>Inconsistent renderings of <code><a href="/bn-BD/docs/Web/MathML/Element/mmultiscripts" title="<mmultiscripts>"><mmultiscripts></a></code>, <code><a href="/bn-BD/docs/Web/MathML/Element/msub" title="<msub>"><msub></a></code>, <code><a href="/bn-BD/docs/Web/MathML/Element/msup" title="<msup>"><msup></a></code> and <code><a href="/bn-BD/docs/Web/MathML/Element/msubsup" title="<msubsup>"><msubsup></a></code> have been unified and the error handling of these elements has been improved (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=827713" title="FIXED: Inconsistent rendering of mub / mup / msubsup / mmultiscripts">bug 827713</a>).</li> + <li>The <a href="/en-US/docs/Web/SVG/Attribute/paint-order" title="/en-US/docs/Web/SVG/Attribute/paint-order">paint-order</a> attribute has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=828805" title="FIXED: implement paint-order property from SVG 2">bug 828805</a>).</li> + <li>The implementation of the <code>contentScriptType</code> and <code>contentStyleType</code> properties has been removed from <a href="https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement" title="/en-US/docs/Web/API/SVGSVGElement"><code>SVGSVGElement</code></a> along with the removal from SVG2 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=819731" title="FIXED: remove contentStyleType and contentScriptType from SVGSVGElement">bug 819731</a>).</li> +</ul> + +<h2 id="MathML">MathML</h2> + +<p>General Gecko:</p> + +<ul> + <li>The <code>dir</code> attribute for controlling directionality of formulas on e.g. <code><a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/math" title="<math>"><math></a></code> or <code><a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mrow" title="<mrow>"><mrow></a></code> elements is now equivalent to using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/direction" title=""><code>direction</code></a> CSS property.</li> + <li>The equal sign ("=") is now <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mo#attr-stretchy">stretchable</a>.</li> + <li>The "<code>updiagonalarrow</code>" value for the <code>notation</code> attribute on <code><a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/menclose" title="<menclose>"><menclose></a></code> elements has been added.</li> + <li>Negative widths for the <code><a href="/bn-BD/docs/Web/MathML/Element/mspace" title="<mspace>"><mspace></a></code> element has been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=717546" title="FIXED: Implement mspace with negative width">bug 717546</a>).</li> + <li>The <code><a href="/bn-BD/docs/Web/MathML/Element/semantics" title="<semantics>"><semantics></a></code> element now determines the visible child as described in the MathML3 specification.</li> + <li>To help MathML authors debugging "invalid-markup" errors in their documents, MathML parsing errors (such as having too many / too few child elements) and warnings about deprecated attributes or wrong attribute values are now reported to the <a href="/en-US/docs/Error_Console" title="Error_Console">Error Console</a>.</li> + <li>The <code>scriptminsize</code> attribute now accepts unitless values and percent values. They are interpreted as multiples of the default value ("<code>8pt</code>").</li> + <li>Unitless values are now also allowed for the <code>mathsize</code> and <code>fontsize</code> attributes; they multiply the default value.</li> +</ul> + +<h2 id="Network">Network</h2> + +<p>General Gecko:</p> + +<ul> + <li>We continue to update our CSP implementation to match the CSP 1.0 spec, which reached Candidate Recommendation: + <ul> + <li>Support for the spec-compliant <code>Content-Security-Policy</code> HTTP header (in addition to the experimental <code>X-Content-Security-Policy</code>) has been added (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=783049" title="FIXED: CSP : use existing/old parser for X-Content-Security-Policy header, new/CSP 1.0 spec compliant parser for Content-Security-Policy header">bug 783049</a>). <strong>Note</strong>: the patch for this new header landed in Firefox 21, it is disabled on builds (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=842657" title="FIXED: Flip the pref to enable the CSP 1.0 parser for Firefox">bug 842657</a>).</li> + </ul> + </li> +</ul> + +<h2 id="Worker">Worker</h2> + +<p>General Gecko:</p> + +<ul> + <li>The functions <a href="/bn-BD/docs/Web/API/Window/URL/createObjectURL" title="The documentation about this has not yet been written; please consider contributing!"><code>URL.createObjectURL</code></a> and <a href="/bn-BD/docs/Web/API/Window/URL/revokeObjectURL" title="The documentation about this has not yet been written; please consider contributing!"><code>URL.revokeObjectURL</code></a> are now included in the set of <a href="/en-US/docs/DOM/Worker/Functions_available_to_workers" title="DOM/Worker/Functions_available_to_workers">functions available to workers</a>.</li> +</ul> + +<h2 id="Security">Security</h2> + +<p>General Gecko:</p> + +<ul> + <li>Mixed content blocking. Firefox will no longer load non-secure (http) resources on secure (https) pages (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=834836" title="FIXED: Turn on pref to block mixed active content">bug 834836</a>).</li> + <li>The standard syntax of <a href="/en-US/docs/Security/CSP" title="/en-US/docs/Security/CSP">CSP</a> 1.0 policies are now implemented and enforced by default.</li> +</ul> + +<h2 id="XForms">XForms</h2> + +<p>General Gecko:</p> + +<p>Support for <a href="/en-US/docs/XForms" title="XForms">XForms</a> has been <a href="http://www.philipp-wagner.com/blog/2011/07/the-future-of-mozilla-xforms/" title="http://www.philipp-wagner.com/blog/2011/07/the-future-of-mozilla-xforms/"><strong>removed</strong></a> in Firefox 19.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://www.mozilla.org/en-US/firefox/os/notes/1.2/" title="http://www.mozilla.org/en-US/firefox/os/notes/1.2/">Firefox OS 1.2 Notes</a></li> +</ul> + +<h2 id="Older_versions">Older versions</h2> + +<p></p><div class="multiColumnList"> +<ul> +<li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.1">Firefox OS 1.1 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.0.1">Firefox OS 1.0.1 for developers</a></li></ul> +</div><p></p> + +<p> </p> + +<p>Share this article: <a href="http://mzl.la/1av9ZRr">http://mzl.la/1av9ZRr</a></p> 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 +--- +<p id="Resources_for_App_hackers.2C_as_generated_from_our_workshops"><em>অ্যাপ হ্যাকারদের জন্য রিসোর্সসমূহ যা আমাদের বিভিন্ন ওয়ার্কসপের মাধ্যমে সৃষ্টি হয়েছে। </em></p> +<h3 id="ফায়ারফক্স_ওএস_সিমুলেটর">ফায়ারফক্স ওএস সিমুলেটর</h3> +<h4 id="ফায়ারফক্স_ওএস_সিমুলেটর_2">ফায়ারফক্স ওএস সিমুলেটর</h4> +<p><a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator/" title="https://github.com/robnyman/Firefox-OS-Boilerplate-App">https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator/</a><br> + <a href="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/" title="http://robnyman.github.com/Firefox-OS-Boilerplate-App/">https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/</a></p> +<h3 id="একটি_অ্যাপ_বানানো_ইন্সটল_করা">একটি অ্যাপ বানানো / ইন্সটল করা</h3> +<h4 id="ফায়ারফক্স_ওএস_বয়লারপ্লেট_অ্যাপ_(কাজ_চলছে)">ফায়ারফক্স ওএস বয়লারপ্লেট অ্যাপ (কাজ চলছে)</h4> +<p><a href="https://github.com/robnyman/Firefox-OS-Boilerplate-App" title="https://github.com/robnyman/Firefox-OS-Boilerplate-App">https://github.com/robnyman/Firefox-OS-Boilerplate-App</a><br> + <a href="http://robnyman.github.com/Firefox-OS-Boilerplate-App/" title="http://robnyman.github.com/Firefox-OS-Boilerplate-App/">http://robnyman.github.com/Firefox-OS-Boilerplate-App/</a><br> + <br> + (ইন্সটল বাটন , ওয়েব কার্যক্রম , ওয়েব এপিআই এর উদাহারন , ঐচ্ছিক অফলাইন সাপোর্ট সহ পরিস্কার বেসিক সংস্করণ)</p> +<h4 id="প্যাকেজড_অ্যাপ_যুক্ত_সংস্করণের_কোড">প্যাকেজড অ্যাপ যুক্ত সংস্করণের কোড:</h4> +<p><a href="https://github.com/robnyman/Firefox-OS-Boilerplate-App/tree/packaged-app" title="https://github.com/robnyman/Firefox-OS-Boilerplate-App/tree/packaged-app">https://github.com/robnyman/Firefox-OS-Boilerplate-App/tree/packaged-app</a></p> +<h4 id="FxOSStub_(ইন্সটল_বাটন_আছে_এমন_অ্যাপের_টেমপ্লেট_ডিজাইন)">FxOSStub (ইন্সটল বাটন আছে এমন অ্যাপের টেমপ্লেট/ ডিজাইন):</h4> +<p><a href="https://github.com/Jaxo/fxosstub" title="https://github.com/Jaxo/fxosstub">https://github.com/Jaxo/fxosstub</a><br> + <br> + Recommended: host on your own server or through GitHub pages <br> + (<a href="http://pages.github.com/" title="http://pages.github.com/">http://pages.github.com/</a>). Example at <a href="http://robnyman.github.com/Firefox-OS-Boilerplate-App/" title="http://robnyman.github.com/Firefox-OS-Boilerplate-App/">http://robnyman.github.com/Firefox-OS-Boilerplate-App/</a></p> +<h4 id="Mortar">Mortar:</h4> +<p><a href="https://hacks.mozilla.org/2013/01/writing-web-apps-quickly-with-mortar/" title="https://hacks.mozilla.org/2013/01/writing-web-apps-quickly-with-mortar/">https://hacks.mozilla.org/2013/01/writing-web-apps-quickly-with-mortar/</a></p> +<h4 id="Design_patterns">Design patterns:</h4> +<p><a href="https://marketplace.firefox.com/developers/docs/patterns" title="https://marketplace.firefox.com/developers/docs/patterns">https://marketplace.firefox.com/developers/docs/patterns</a></p> +<h4 id="Firefox_OS_Design_Guidelines">Firefox OS Design Guidelines:</h4> +<p><a href="https://t.co/I9VaxvBu" title="https://t.co/I9VaxvBu">https://t.co/I9VaxvBu</a><br> + <br> + droid@screen: <a href="http://blog.ribomation.com/droid-at-screen/" title="http://blog.ribomation.com/droid-at-screen/">http://blog.ribomation.com/droid-at-screen/</a></p> +<h3 id="WebAPIs">WebAPIs</h3> +<h4 id="WebAPIs_in_version_1">WebAPIs in version 1:</h4> +<p><a href="https://wiki.mozilla.org/WebAPI" title="https://wiki.mozilla.org/WebAPI">https://wiki.mozilla.org/WebAPI</a></p> +<h4 id="Documentation_and_their_status_for_APIs">Documentation and their status for APIs:</h4> +<p><a href="/en-US/docs/WebAPI/Doc_status" title="/en-US/docs/WebAPI/Doc_status">https://developer.mozilla.org/en-US/docs/WebAPI/Doc_status</a></p> +<h4 id="Robert's_slides_on_Web_APIs">Robert's slides on Web APIs</h4> +<p><a href="http://www.slideshare.net/robnyman/web-apis-apps-mozilla-london" title="http://www.slideshare.net/robnyman/web-apis-apps-mozilla-london">http://www.slideshare.net/robnyman/web-apis-apps-mozilla-london</a></p> +<h4 id="Writing_(good)_Webapps">Writing (good) Webapps:</h4> +<p><a href="http://jlongster.github.com/writing-webapps/" title="http://jlongster.github.com/writing-webapps/">http://jlongster.github.com/writing-webapps/</a></p> +<h3 id="Firefox_Marketplace_Developer_Hub">Firefox Marketplace & Developer Hub</h3> +<h4 id="File_a_bug_on_Marketplace!">File a bug on Marketplace!</h4> +<p><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Marketplace&component=General" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Marketplace&component=General">https://bugzilla.mozilla.org/enter_bug.cgi?product=Marketplace&component=General</a></p> +<h4 id="Developer_Hub">Developer Hub</h4> +<p><a href="https://marketplace.firefox.com/developers/" title="https://marketplace.firefox.com/developers/">https://marketplace.firefox.com/developers/</a></p> +<h4 id="WebApps_mailing_list">WebApps mailing list</h4> +<p><a href="https://lists.mozilla.org/listinfo/dev-webapps" title="https://lists.mozilla.org/listinfo/dev-webapps">https://lists.mozilla.org/listinfo/dev-webapps</a></p> +<h4 id="Marketplace_Development_Server_(expect_bugs!)">Marketplace Development Server (expect bugs!)</h4> +<p><a href="http://marketplace-dev.allizom.org/" title="http://marketplace-dev.allizom.org/">http://marketplace-dev.allizom.org/</a></p> +<h4 id="Reference_apps_(Chrono_Face_Value_Roller)">Reference apps (Chrono, Face Value, Roller):</h4> +<p><a href="https://marketplace.firefox.com/developers/docs/apps/chrono" title="https://marketplace.firefox.com/developers/docs/apps/chrono">https://marketplace.firefox.com/developers/docs/apps/chrono</a></p> +<h3 id="WebPayments">WebPayments</h3> +<p><a href="https://wiki.mozilla.org/WebAPI/WebPayment" title="https://wiki.mozilla.org/WebAPI/WebPayment">https://wiki.mozilla.org/WebAPI/WebPayment</a><br> + <a href="https://wiki.mozilla.org/WebAPI/WebPaymentProvider" title="https://wiki.mozilla.org/WebAPI/WebPaymentProvider">https://wiki.mozilla.org/WebAPI/WebPaymentProvider</a></p> +<h3 id="Pitfalls_and_helpers_for_mobile_Web_apps">Pitfalls and helpers for mobile Web apps</h3> +<h4 id="Rob's_slides_on_Pitfalls_and_Helpers">Rob's slides on Pitfalls and Helpers</h4> +<p><a href="http://www.slideshare.net/robhawkes/mobile-app-development-pitfalls-helpers" title="http://www.slideshare.net/robhawkes/mobile-app-development-pitfalls-helpers">http://www.slideshare.net/robhawkes/mobile-app-development-pitfalls-helpers</a><br> + </p> 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 +--- +<p><a href="http://en.wikipedia.org/wiki/Nexus_S" title="http://en.wikipedia.org/wiki/Nexus_S">নেক্সাস এস</a> হল ফায়ারফক্স ওএস- এর জন্য "tier ২" প্লাটফর্ম। এই ডিভাইসটি আমাদের লক্ষ্য নয়, তবে একে এতে বিল্ড করা আমরা সমর্থন করি। এই ডিভাইসকে সমর্থন করার যেকোন প্রকার সাহায্যকে স্বাগতম।</p> + +<h2 id="সামঞ্জস্যপূর্ণতা">সামঞ্জস্যপূর্ণতা</h2> + +<p>ফায়ারফক্স ওএস i9020, i9020A, i9023 এবং SHW-M200k ডিভাইসগুলোর সাথে কাজ করে বলে জানা আছে। এই ডিভাইসকে সমর্থন করার সকল জানা ইস্যুগুলো <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=b2g-nexuss">https://bugzilla.mozilla.org/show_bug.cgi?id=b2g-nexuss</a> এখানে পাওয়া যায়।</p> + +<h2 id="ব্যবহারযোগ্যতা_(v১.১_পর্যন্ত)">ব্যবহারযোগ্যতা (v১.১ পর্যন্ত)</h2> + +<p>ফোনটি যেকোন প্রকার ব্লকিং ইস্যু ব্যতীত একটি দৈনিক ভিত্তির উপর ব্যবহার উপযোগী হওয়া উচিত। এখন পর্যন্ত, অনুসরণটি গেকো ১৮ (BRANCH=v1-train ./config.sh nexus-s) সিস্টেম তৈরি করার সময় সঠিকভাবে কাজ করে বলে আশা করা যায়:</p> + +<ul> + <li>ফোন কল করা/গ্রহণ করা।</li> + <li>এমএমআই/ইউএসএসডি কোড কাজ করানো (যেমন *#০৬# আইএমইআই এর জন্য, *#২১# কল ফরওয়ার্ডিং স্ট্যাটাস এর জন্য)</li> + <li>এসএমএস এবং এমএমএস পাঠানো/গ্রহণ করা</li> + <li>ছবি তোলা (এই পৃষ্ঠার শেষে গায়া রেপোতে ৫মেগা পিক্সেলের ছবি তোলা নিয়ে নির্দিষ্ট প্যাচ রয়েছে)</li> + <li>৪৮০পিক্সেল এর ভিডিও ধারণ (এই পৃষ্ঠার শেষে গায়া রেপো তে ভিডিও ধারণ সম্পর্কে নির্দিষ্ট প্যাচ রয়েছে)</li> + <li>এইচএসডিপিএ এবং ওয়াই-ফাই ব্যবহার (ইএপি সহকারেও কাজ করে, হস্ত-লিখিত ডব্লিউপিএ প্রার্থনাকারীর বহিরাকৃতি প্রয়োজন)</li> + <li>ব্লু-টুথ</li> + <li>জিওলোকেশন</li> + <li>হার্ডওয়ার-ত্বরান্বিত ভিডিও প্লেব্যাক (কিছু প্যাচ সহকারে, উল্লেখিত বাগগুলো দেখুন)</li> + <li>ইউএসবি ম্যাস স্টোরেজ</li> + <li>ইউএসবি টেথারিং</li> + <li>ওয়াই ফাই টেথারিং (নিম্নে দেখুন)</li> +</ul> + +<h2 id="ব্যবহারযোগ্যতা_(মাস্টার_v১.৪২.০_হতে)">ব্যবহারযোগ্যতা (মাস্টার, v১.৪/২.০ হতে)</h2> + +<p>বেশীরভাগ ফাংশনগুলোক কাজ করবে বলে আশা করা হয়। ভিডিও প্লেব্যাক এবং ভিডিও ধারণ কোন কারণে কাজ করছে না।</p> + +<h2 id="চলাকলীন_বিষয়গুলো">চলাকলীন বিষয়গুলো</h2> + +<h3 id="ওয়াই-ফাই_টেথারিং">ওয়াই-ফাই টেথারিং</h3> + +<p>ওয়াই-ফাই টেথারিং কাজ করে, কিন্তু দেখা যাচ্ছে যে নিষ্ক্রিয় করার পর কোন একভাবে এটি নষ্ট হয়ে যাচ্ছে। ওয়াই-ফাই কার্নেল ড্রাইভার আনলোড করে এবং পরে পুনরায় লোডের মাধ্যমে অথবা পুনরায় ডিভাইস চালু করার মাধ্যমে এই সমস্যা এড়ানো সম্ভব।</p> + +<pre>rmmod bcm4329 && insmod /system/modules/bcm4329.ko iface_name=wlan0</pre> + +<h2 id="প্যাচ_রেপো">প্যাচ রেপো</h2> + +<p>মজিলা-কেন্দ্রীয় ভান্ডারের জন্য গেকো-১৮-লোকাল (এবং গেকো-১৮-লোকাল+এইচ ডি) শাখা ব্যবহার করুন, অন্যান্যদের জন্য মাস্টার-লোকাল ব্যবহার করুন।</p> + +<ul> + <li><a href="https://github.com/lissyx/mozilla-central" title="https://github.com/lissyx/mozilla-central">https://github.com/lissyx/mozilla-central</a></li> + <li><a href="https://github.com/lissyx/gaia" title="https://github.com/lissyx/gaia">https://github.com/lissyx/gaia</a></li> + <li><a href="https://github.com/lissyx/android-device-crespo" title="https://github.com/lissyx/android-device-crespo">https://github.com/lissyx/android-device-crespo</a></li> +</ul> + +<h2 id="অারও_তথ্য">অারও তথ্য</h2> + +<p>আপনি <a href="http://forum.xda-developers.com/showthread.php?t=1924367&page=13" title="http://forum.xda-developers.com/showthread.php?t=1924367&page=13">http://forum.xda-developers.com/showthread.php?t=1924367</a> এখানে নেক্সাস এস- এ ফায়ারফক্স ওএস সম্পর্কিত কোন থ্রেড খুঁজতে পারেন। এতে বেশ সাম্প্রতিক এবং কার্যকারী কাজ পাবেন।</p> 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 +--- +<div class="summary"> + <p>এই আর্টিকেলে ফায়ারফক্স ওএস অ্যাপ্লিকেশনের নিরাপত্তা মডেল নিয়ে বিস্তারিত আলোচনা করা হয়েছে।</p> +</div> +<p>ওয়েব অ্যাপের নিরাপত্তা নিয়ন্ত্রণের জন্য ফায়ারফক্স ওএস প্রধানত যা করেঃ</p> +<ul> + <li>ব্রাউজারে গিয়ে কোন ওয়েব পেইজ ব্রাউজ করে দেখা ওয়েব ওয়াপ নয়! বরং এদের সরাসরিভাবে ইন্সটল করতে হবে আর ব্যবহার করার জন্য চালু করতে হবে। ব্যবহারের আগে এদের সরাসরি ইন্সটল করতে হবে। ব্যবহারকারী'র নিরাপত্তা নিশ্চিত করার জন্য ওএস এর নিরাপত্তা মডেল অ্যাপ আপডেট এবং মুছে ফেলা নিয়ন্ত্রণ করে।</li> + <li>নতুন নতুন ওয়েব এপিআই ব্যবহার করতে চাইলে সকল অ্যাপ কে আগে থেকেই ঘোষণা করতে হবে, অ্যাপ ইন্সটল করার সময়ই ব্যবহারকারী দেখতে পারবেন তার অ্যাপ কি কি অনুমতি চাইছে। আর যেসব অ্যাপ গুরুত্বপূর্ণ APIগুলো ব্যবহার করতে চায় তাদের বিশেষ কিছু প্রয়োজনীয়তা পূরণ করতে হবে, এবং মার্কেটপ্লেসে জমা দেওয়ার পর সেগুলো রিভিউ এবং সাইন করা বাধ্যতামূলক।</li> + <li>ওয়েব অ্যাপগুলোকে "স্যান্ডবক্স" করা হয় মানে তারা শুধু নিজেদের রিসোর্স (কুকি, অফলাইন স্টোরেজ IndexedDB ডেটাবেইজ এবং অন্যান্য) ই ব্যবহার করতে পারবে। যদি দুটি আলাদা অ্যাপও একই URL লোড করতে চায় তাহলেও URL টি, দুটি আলাদা অ্যাপ এর জন্য ভিন্ন (একই অরিজিন বা উৎসের নয়) বলে বিবেচিত হবে, যেহেতু url টি দুটি পৃথক অ্যাপ থেকে লোড করা হচ্ছে।</li> +</ul> +<h3 id="অ্যাপের_প্রকারভেদ_(টাইপ)">অ্যাপের প্রকারভেদ (টাইপ)</h3> +<p>ফায়ারফক্স ওএস এ তিন ধরণের ওয়েব অ্যাপ আছেঃ "<strong>web</strong>", "<strong>privileged</strong>" এবং "<strong>certified</strong>"। অ্যাপটি কোন প্রকারের সেটি তার <a href="/bn-BD/docs/Apps/Manifest" title="/en-US/docs/Apps/Manifest">মেনিফেস্ট ফাইলে</a> বলে দিতে হয় এবং কোন প্রকারের তার ওপর ভিত্তি করেই অ্যাপটি কি কি অনুমতি পাবে তা নির্ধারণ করা হয়।</p> +<ul> + <li><strong>ওয়েব অ্যাপঃ </strong>বেশিরভাগ অ্যাপই (যেগুলো তৃতীয় পক্ষ তৈরি করে) "web" অ্যাপ। এই টাইপটি হচ্ছে ডিফল্ট। এই টাইপের অ্যাপ হলে সাধারণ ওয়েবে যা যা অনুমতি থাকে, সেগুলো ছাড়া বিশেষ কোন অনুমতি পাবে না। কোন যাচাই ছাড়াই যেকোন ওয়েবসাইট থেকে ইন্সটল করা যাবে। অ্যাপটি জিপ করে <a href="/bn-BD/docs/Web/Apps/Packaged_apps" title="/en-US/docs/Web/Apps/Packaged_apps">প্যাকেজ</a> করেও দিতে পারবেন কিন্তু এর ফলে সাধারণ অনুমতিগুলো ছাড়া বাড়তি কোন অনুমতি পাওয়া যাবে না।</li> + <li><strong>প্রিভিলিজড বা সুবিধাভোগী অ্যাপঃ</strong> এসব অ্যাপের বাড়তি অনেক কিছু করার অনুমতি থাকে, তাই এসব <em>সুবিধাভোগী</em> অ্যাপগুলো নিয়ন্ত্রণ করার জন্য মার্কেটপ্লেস থেকে সাইন করা থাকতে হবে।</li> + <li><strong>সারটিফায়েড বা প্রত্যয়িত অ্যাপঃ </strong>এসব প্রত্যয়িত অ্যাপ এখন শুধুমাত্র আগে থেকেই ডিভাইসে OEM এর ইচ্ছামত ইন্সটল করে দেওয়া যাবে, ব্যবহারকারী নিজের ইচ্ছায় ইন্সটল করতে পারবেন না নিজের নিরাপত্তার খাতিরেই।</li> +</ul> +<div class="note"> + <p><strong>খেয়াল করুনঃ</strong> এই তিন ধরণের অ্যাপ সম্পর্কে আরও জানতে <a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">অ্যাপ মেনিফেস্ট</a> পাতাটি দেখুন।</p> +</div> +<h3 id="অ্যাপ_সরবরাহ">অ্যাপ সরবরাহ</h3> +<p>ফায়ারফক্স ওএস ব্যবহারকারীদের ডিভাইসে আপনার অ্যাপ দুইভাবে পৌঁছে দিতে পারেনঃ কোন ওয়েবসাইটে রাখার মাধ্যমে (এদের <em>হোস্টেড</em> বলা হয়) অথবা অ্যাপের সব ফাইল একসাথে জিপ বা প্যাকেজ করে (এদের <em>প্যাকেজড</em> বলা হয়)। সাধারণ ওয়েব অ্যাপ এই দুটি পদ্ধতির যেকোনটি ব্যবহার করে সরবরাহ করা যাবে, কিন্তু সুবিধাভোগী আর প্রত্যয়িত অ্যাপ শুধুমাত্র প্যাকেজড হিসেবেই সরবরাহ করতে হবে।</p> +<h4 id="হোস্ট_করা_অ্যাপ"><span class="mw-headline" id="Hosted_apps">হোস্ট করা অ্যাপ </span></h4> +<p>হোস্ট করা অ্যাপ, ডেভেলপারের ওয়েব সাইটে হোস্ট বা আপলোড করা একটি <a class="external text" href="/bn-BD/docs/Apps/Manifest" rel="nofollow">অ্যাপ্লিকেশন বৃত্তান্ত বা মেনিফেস্ট </a> ফাইল ছাড়া আর কিছুই না। এই ফাইলে বলা থাকে অ্যাপের index ফাইল (বা ইন্সটল হবে কোথা থেকে) কোথায়। এছাড়া প্রায়ই মেনিফেস্ট ফাইলে অ্যাপটি'র appcache বৃতান্ত ফাইলেরও ঠিকানা দেওয়া থাকে, যা ব্যবহার করে অ্যাপটি যাতে অফলাইনেও চলে এবং দ্রুত চালু করা যায়, সেই সুবিধা দেওয়া যায়। তবে এটা ঐচ্ছিক। নিরাপত্তার কথা ভাবলে হোস্ট করা অ্যাপ অন্য সব ওয়েবসাইটের মতই আচরণ করে। হোস্টেড অ্যাপ যখন কোন URL দেখায়, তখন URL টি ব্রাউজারে দেখলে যেসব সুবিধা পেতেন, অ্যাপ থেকেও হুবুহু একই সুবিধা পাবেন, বাড়তি কোন কিছুই যোগ বা বিয়োগ হয় না। তাই ওয়েবসাইটে এক পাতা থেকে অন্য পাতা বা রিসোর্সে (ছবি ইত্যাদি) যেভাবে লিঙ্ক করতেন, সাধারণ হোস্টেড ওয়েব অ্যাপেও হুবুহু একই ভাবে লিঙ্ক করতে হবে।</p> +<h4 id="প্যাকেজড_অ্যাপ"><span class="mw-headline" id="Packaged_apps">প্যাকেজড অ্যাপ</span></h4> +<p>সেসব ওপেন-ওয়েব অ্যাপকে<strong> প্যাকেজড অ্যাপ</strong> বলা হয় যাদের সব রিসোর্স বা ফাইল/কোড (HTML, CSS, JavaScript, অ্যাপ মেনিফেস্ট এবং অন্যান্য ফাইল) একটি zip ফাইলে ব্যবহারকারীর কাছে পৌঁছে দেওয়া হয়, কোন ওয়েব সার্ভারে আপলোড করার পরিবর্তে। বিস্তারিত পাবেন<a href="/bn-BD/docs/Apps/Packaged_apps" title="Apps/Packaged_apps"> প্যাকেজড অ্যাপ</a> পাতায়।</p> +<h3 id="অ্যাপ_ইন্সটল_করা"><strong>অ্যাপ ইন্সটল করা</strong></h3> +<p><a href="/bn-BD/docs/JavaScript_API" title="/en-US/docs/JavaScript_API">অ্যাপ জাভাস্ক্রিপ্ট API</a> ব্যবহার করে অ্যাপ ইন্সটল করা হয়ঃ</p> +<ul> + <li>হোস্ট করা অ্যাপঃ <code>navigator.mozApps.<a href="/en-US/docs/Web/API/Apps.install" title="/en-US/docs/Web/API/Apps.install">install</a>(manifestURL)</code> ফাংশনটি কল করে হোস্টেড অ্যাপ ইন্সটল করা হয়, যেখানে manifestURL অ্যাপের ঠিকানা বলে দেওয়া URL। বিস্তারিত জানার জন্য <a href="/bn-BD/docs/DOM/Apps.install">অ্যাপ ইন্সটল করা দেখুন।</a></li> + <li>প্যাকেজড অ্যাপঃ <code>navigator.mozApps.<a href="/en-US/docs/Web/API/Apps.installPackage" title="/en-US/docs/Web/API/Apps.installPackage">installPackage</a>(packageURL)</code>ফাংশন কল করে অ্যাপ ইন্সটল করা হয়। প্যাকেজড অ্যাপের বেলায়, প্যাকেজের ভেতরেই প্রধান মেনিফেস্ট ফাইলটি দেওয়া থাকে, সাইন করা অবস্থায়। এছাড়া দ্বিতীয় আরেকটি "ছোট্ট মেনিফেস্ট" ফাইল থাকে, ইন্সটল প্রক্রিয়া শুরু করার জন্য। আরও তথ্যের জন্য <a href="/en-US/docs/DOM/Apps.installPackage">প্যাকেজড অ্যাপ ইন্সটল করা</a> এবং <a href="/en-US/docs/Apps/Packaged_apps" title="Apps/Packaged_apps">প্যাকেজড অ্যাপ</a> দেখুন।</li> +</ul> +<p>কোন অ্যাপ যে আসলেই ওয়েব অ্যাপ হিসেবে ইন্সটল হতে চায় - এটা নিশ্চিত করাটা জরুরী। এজন্য যেকোন ওয়েবসাইট-ই যেন কোন একটা মেনিফেস্ট ফাইল হোস্ট করে আমাদের ফাকি দিতে না পারে সেজন্য মেনিফেস্ট ফাইলের বিশেষ ধরনের mime-type সহ পাঠাতে হবেঃ <code>application/x-web-app-manifest+json</code>। তবে যদি যে ওয়েবসাইট অ্যাপ ইন্সটল করাতে চায় তার অরিজিন আর অ্যাপের মেনিফেস্টের অরিজিন একই হয় তাহলে এই শর্ত শিথিলযোগ্য।</p> +<h3 id="আপডেট_করা"><span class="mw-headline" id="Updates">আপডেট করা</span></h3> +<p><a href="/en-US/docs/Apps/Updating_apps" title="Apps/Updating_apps">অ্যাপ আপডেট করা</a> পাতায় জানতে পারবেন কিভাবে আপনার অ্যাপ আপডেট করানো সম্ভব।</p> +<h2 id="অনুমতিসমূহ">অনুমতিসমূহ</h2> +<p>সাধারণ ওয়েবসাইটের যেসব কাজ করার অনুমতি থাকে অ্যাপের বেলায় তার থেকে বেশি অনুমতি দেওয়া সম্ভব। তবে ডিফল্টভাবে সাধারণ ওয়েবসাইট এবং ওয়েব অ্যাপের একই লেভেলের অনুমতি থাকে। আরও বেশি মাত্রার অনুমতি পেতে চাইলে কোন অ্যাপকে সেইসব অনুমতির তালিকা মেনিফেস্ট ফাইলে বলে দিতে হবে।</p> +<h3 id="মেনিফেস্টে_ঘোষণা_করা">মেনিফেস্টে ঘোষণা করা</h3> +<p>প্রতিটি অতিরিক্ত কাজ করার অনুমতি মেনিফেস্ট ফাইলে বলে দিতে হবে, সাথে আপনার ব্যবহারকারীরা যাতে জানতে পারে কেন আপনার বিশেষ অনুমতিটি লাগছে, সেটাও ব্যাখ্যা করতে হবে। যেমন কোন অ্যাপ যদি <a href="/en-US/docs/Web/API/window.navigator.geolocation" title="/en-US/docs/Web/API/window.navigator.geolocation">navigator.geolocation</a> API ব্যবহার করতে চায় তাহলে মেনিফেস্ট ফাইলে নিচের মত বলতে হবেঃ</p> +<pre class="brush: html">"permissions": { + "geolocation":{ +<code class="language-js"><span class="token string"> "description"</span><span class="token punctuation">:</span> <span class="token string">"Required for autocompletion in the share screen"</span><span class="token punctuation">,</span></code> + } +}, +</pre> +<p>এর ফলে অ্যাপটি geolocation অনুমতি চাওয়ার জন্য প্রম্পট করবে, অন্যান্য ওয়েব পেইজের মতই। <a href="/en-US/docs/Apps/Manifest" title="Apps/Manifest">অ্যাপ মেনিফেস্ট</a> পাতায় বিস্তারিত দেখুন।</p> +<div class="note"> + <p><strong>খেয়াল করুনঃ</strong> বর্তমানে ব্যবহারকারীর কাছে অনুমতির ব্যখ্যাটি দেখানো হয়না। <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=823385" title="https://bugzilla.mozilla.org/show_bug.cgi?id=823385">bug 823385</a> দেখুন।</p> +</div> +<h3 id="অনুমতি_দেওয়া">অনুমতি দেওয়া</h3> +<p>যখন মেনিফেস্ট ফাইলে কোন অতিরিক্ত অনুমতি চাওয়া হয়, তখন অনুমতিটি <em>allow</em> অথবা <em>prompt</em> এই দুইটি'র কোন একটি হয়, কোন অনুমতি চাওয়া হচ্ছে তার ওপর নির্ভর করে। Allow ধরণের অনুমতিটি ব্যবহারকারীর কাছে অনুমোদন চায় না, মেনিফেস্টে থাকলেই অনুমতি পেয়ে যায়। আর prompt ধরণের অনুমতি গুলো প্রথবমার ব্যবহারকারীর কাছে দেখানো হবে, এবং ব্যবহারকারী অনুমোদন করলেই অনুমতিটি কার্যকর হবে। সাধারণত গোপনীয়তা জনিত বিশেষ অনুমতিগুলোর ব্যাপারেই ব্যবহারকারীর কাছে জানতে চাওয়া হয় সে অনুমতিটি অনুমোদন করছে কিনা, আর এটা শুধুমাত্র প্রথমবারে অনুমতিটি ব্যবহারের সময়ই জানতে চাওয়া হয়। যেমন, ডিভাইসের কন্টাক্ট লিস্ট ব্যবহার করতে চাইলে এটা আগে ব্যবহারকারীর কাছে জানতে চাওয়া হবে। কিন্তু যদি raw TCP কানেকশন তৈরি করতে চান তাহলে ধরে নেওয়া হয় এতে ব্যবহারকারীর কোন আপত্তি থাকবে না। ব্যবহারকারীর নিরাপত্তা নিশ্চিত করতে allow ধরণের অনুমতিগুলো মার্কেটপ্লেসে যাচাই করে দেখা হয়।</p> +<h3 id="অনুমতি_বাতিল_করা">অনুমতি বাতিল করা</h3> +<p>ব্যবহারকারীরা যেকোন সময় prompt ধরণের অনুমতিগুলোর ব্যাপারে তাদের মতবদল করতে পারেন এবং ফায়ারফক্স ওএস সেটিংস অ্যাপ ব্যবহার করে আপনার অ্যাপের, এসব অনুমতি বাতিল করতে পারেন । তবে Allow ধরনের অনুমতিগুলো ব্যবহারকারীরা পরিবর্তন করতে পারেন না।</p> +<h2 id="ওয়েব_অ্যাপ_স্যান্ডবক্স">ওয়েব অ্যাপ স্যান্ডবক্স</h2> +<h3 id="প্রতিটি_অ্যাপের_নিজস্ব_তথ্য_রাখা"><span class="mw-headline" id="Data_stored_per_app">প্রতিটি অ্যাপের নিজস্ব তথ্য রাখা </span></h3> +<p>প্রতিটি অ্যাপ নিজের আলাদা স্যান্ডবক্সে চলে, মানে এক অ্যাপের জমা করা কোন তথ্য-ই অন্য আরেকটি অ্যাপ দেখতে পারবে না। এর মধ্যে কুকি'র তথ্য, localStorage তথ্য, indexedDB তথ্য এবং সাইটের অনুমতি সবকিছুই পরে।</p> +<p><img alt="A diagram showing three Firefox OS apps all open is separate sandboxes, so none of them can affect each other." src="https://mdn.mozillademos.org/files/7091/sandbox.png" style="width: 1040px; height: 437px; display: block; margin: 0px auto;"></p> +<p>এর মানে হল যদি কোন ব্যবহারকারী দুটি অ্যাপ "ক" এবং "খ" ইন্সটল করে তাহলে তাদের প্রত্যেকের নিজস্ব কুকি, ডিভাইসের তথ্য এবং অনুমতি থাকবে। যদি দুটি অ্যাপ এমন {{ htmlelement("iframe") }} খোলে যা একই অরিজিনে পয়েন্ট করা, তাহলেও ওপরের কথাটি প্রযোজ্য। যেমন, যদি ক এবং খ দুটি অ্যাপই এমন <code><iframe></code> খোলে যা "<a class="external free" href="http://www.mozilla.org" rel="nofollow">http://www.mozilla.org</a>" এ পয়েন্ট করা, তাহলে দুটি অ্যাপই ওয়েবসাইটটি দেখাবে, তবে দুটি অ্যাপের কুকি এবং অন্যান্য তথ্য সম্পূর্ণ আলাদা আলাদা থাকবে।</p> +<p>এর মানে হল যদি ব্যবহারকারী "ক" অ্যাপে ফেসুবকে লগইন করেন, "খ" অ্যাপে এর কোন প্রভাবই থাকবে না। ফেসবুকে লগইন করার সময় ক অ্যাপ যেসব কুকি সংরক্ষণ করে, তা শুধুমাত্র ক অ্যাপ-ই দেখতে পাবে। তাই যদি এখন খ অ্যাপটি <code><iframe></code> ব্যবহার করে ফেসবুক খোলে তাহলে এটি ক অ্যাপের কুকিগুলো দেখতে পাবে না, তাই ব্যবহারকারী'র ফেসবুক অ্যাকাউন্ট দেখানোর বদলে খ অ্যাপটি ফেসুবকের লগইন পাতা দেখাবে।</p> +<h3 id="অ্যাপগুলো_একটি_অন্যটিকে_চালু_করতে_পারে_না"><span class="mw-headline" id="Apps_can.27t_open_each_other">অ্যাপগুলো একটি অন্যটিকে চালু করতে পারে না</span></h3> +<p>এর মানে আইফ্রেম ব্যবহার করে একটি অ্যাপ অন্য একটি অ্যাপ দেখাতে পারবে না। যদি ক অ্যাপ <code><iframe></code> ব্যবহার করে খ অ্যাপের URL, <code>src</code> এর মাণ হিসেবে দিয়ে দেয়, আসলে <code><iframe></code> এ খ অ্যাপটি চালু হবে না। শুধুমাত্র ঐ URL এর ওয়েবসাইট-টি সাধারণভাবে দেখানো হবে। খ অ্যাপের কুকি ব্যবহার করতে পারবে না এবং এমনভাবে আচরণ করবে যেন খ অ্যাপটি ডিভাইসে ইন্সটল করাই হয়নি।</p> +<p>প্যাকেজড অ্যাপের (নিচে বিস্তারিত আছে) বেলায়ও ওপরের কথা সত্য। যদি ক অ্যাপ খ নামের একটি প্যাকেজড অ্যাপকে <code><iframe></code> ব্যবহার করে লোড করতে চায় (খ অ্যাপের <code>app://</code> URL ব্যবহার করে), তাহলে এটি সরাসরি ব্যর্থ হবে। ৪০৪ নাকি অন্য কোন ত্রুটি দেখানো হবে তা এখনো ঠিক করা হয়নি, তবে ত্রুটি হিসেবে দেখানো হবে এটা নিশ্চিত। এবং খ অ্যাপটি ডিভাইসে থাকুক বা না থাকুক ক অ্যাপ কোনভাবেই খ অ্যাপকে লোড করতে পারবে না, তাই ক অ্যাপ জানতেও পারবে না ডিভাইসে খ অ্যাপটি ইন্সটল করা আছে কি নাই।</p> +<p>একই জিনিস ঘটবে যদি ক অ্যাপের top-level frame এ খ অ্যাপের URL লোড করতে চাওয়া হয়। আমরা জানি কোন ফ্রেমে কোন অ্যাপ চলছে, তাই ঐ ফ্রেমে অন্য কোন অ্যাপ দেখাতে চাইলে ওপরে যেভাবে বলা হয়েছে সেভাবে ত্রুটি দেখানো হবে।</p> +<h3 id="উদ্দেশ্য"><span class="mw-headline" id="Motivation">উদ্দেশ্য</span></h3> +<p>ওপরের পদ্ধতির সুবিধা অসুবিধা দুইটিই আছে। একটা অসুবিধা হল যদি ব্যবহারকারী একই ওয়েবসাইট ভিন্ন ভিন্ন অ্যাপের মাধ্যমে ব্যবহার করেন, তাহলে ঐ ওয়েবসাইটের জন্য প্রত্যেকটি অ্যাপে আলাদা আলাদা ভাবে লগইন করতে হবে। এছাড়া যদি কোন ওয়েবসাইট ডিভাইসে তথ্য জমা রাখতে চায়, তাহলে প্রত্যেকটি অ্যাপের জন্যই ঐ ওয়েবসাইটটি আলাদা আলাদা ভাবে একই তথ্য জমা করতে থাকবে। তাই কোন ওয়েবসাইট যদি অনেক তথ্য জমা করতে যায়, তাহলে সমস্যা হতে পারে।</p> +<p>তবে আসল সুবিধা হল ওপরের মডেলটি বেশ নির্ভরযোগ্য। এমনটা কিছুতেই হওয়া সম্ভব না যে বিভিন্ন অ্যাপ, অন্য কোন তৃতীয় ওয়েবসাইট ব্যবহার করতে গিয়ে সমস্যা তৈরি করবে যে এক অ্যাপের জন্য অন্য অ্যাপ কাজ করা থামিয়ে দেবে। এছাড়া কোন অ্যাপ আনইন্সটল করলে অন্য অ্যাপের তথ্য হারিয়ে যাওয়ারও সম্ভাবনা থাকবে না। অথবা আনইন্সটল করা অ্যাপের ওপর নির্ভরশীলতার জন্য অন্য কোন অ্যাপ কাজ করা থামিয়ে দেবে এই সম্ভাবনাও থাকবে না।</p> +<p>এছাড়া বিশাল একটা নিরাপত্তাজনিত সুবিধা আছে। যেমন ধরি AwesomeSocial নামের কোন অ্যাপ ব্যবহার করে কেউ ফেসবুকে লগইন করেছেন। তাহলে তার আর SketchGame নামের কোন অ্যাপ নিয়ে এই দুশ্চিন্তা করতে হবে না যে অ্যাপটি ফেসবুকের কোন বাগ বা সীমাবদ্ধতা'র সুযোগ নিয়ে ব্যবহারকারী'র তথ্য হাতিয়ে নিতে পারে।</p> +<p>এছাড়া গোপনীয়তাজনিত ভাল সুবিধা আছে। ব্যবহারকারী নিশ্চিতে PoliticalPartyPlus নামের কোন অ্যাপ ইন্সটল করতে পারবেন এই দুশ্চিন্তা ছাড়া যে MegaCorpEmployeeApp নামের কোন অ্যাপ জানতে পারবে যে ব্যবহারকারী প্রথম অ্যাপটি ইন্সটল করেছেন কি না অথবা প্রথম অ্যাপের কোন তথ্য দ্বিতীয় অ্যাপতে পেয়ে যাবে কি না।</p> +<h3 id="স্যান্ডবক্সভিত্তিক_নিরাপত্তা_মডেল"><span class="mw-headline" id="Sandboxed_Permissions">স্যান্ডবক্সভিত্তিক নিরাপত্তা মডেল</span></h3> +<p>ওয়েবসাইটসমূহের তথ্যের মতই প্রতিটি অ্যাপের নিরাপত্তা তথ্যও স্যান্ডবক্স করা হয়। যদি অ্যাপ "ক" <a class="external free" href="http://maps.google.com" rel="nofollow">http://maps.google.com</a> সাইটের কোন পাতা লোড করে এবং পাতাটি geolocation সুবিধার অনুমতি চাওয়ার পর ব্যবহারকারী তার অনুমতি দিয়ে দেন, এবং বলে দেন যাতে এই অনুমতিটির ব্যাপারে আর জানতে না চাওয়া হয়। শুধু অ্যাপ ক - ই এই সাইটটিতে অনুমতি পেয়েছে। অন্য কোন অ্যাপ "খ" <a class="external free" href="http://maps.google.com" rel="nofollow">http://maps.google.com</a>, সাইটে গেলে নতুন করে অনুমতি নেওয়ার প্রয়োজন পড়বে।</p> +<p>আর সাধারণ ব্রাউজারে ব্যবহারের মতই একই অ্যাপে, কোন বিশেষ API বিভিন্ন সাইটে (অরিজিনে) ব্যবহার করতে চাইলে প্রত্যেক সাইটের জন্যই নতুন করে অনুমতি নিতে হবে। যদি "ক" অ্যাপ আইফ্রেমের ভেতর <a class="external free" href="http://maps.google.com" rel="nofollow">http://maps.google.com</a>, সাইট খুলে GeoLocation ব্যবহারের অনুমতি পায়, তাহলে একই ওয়াপ থেকেও <a href="http://docs.google.com"><span class="external free">http://docs.google.com</span></a> সাইটে গেলে এবং geolocation ব্যবহার করতে চাইলে নতুন করে অনুমতি লাগবে।</p> +<h3 id="ব্রাউজার_API_স্যান্ডবক্স">ব্রাউজার API স্যান্ডবক্স</h3> +<p>এছাড়াও যেসব অ্যাপ অনেক অনেক URL লোড করে, যেমন ব্রাউজারসমূহ, তাদের জন্য আমরা <em>browserContent ফ্ল্যাগ </em>রেখেছি। এই ফ্ল্যাগের সাহায্যে কোন অ্যাপ একটি নয়, বরং দুটি স্যান্ডবক্স ব্যবহার করেঃ একটি তার নিজের জন্য, অন্যটি সে যেসব "ওয়েব কন্টেন্ট" দেখায় তাদের জন্য। যেমনঃ</p> +<p>ধরা যাক MyBrowser অ্যাপটি <a class="external free" href="https://mybrowser.com" rel="nofollow">https://mybrowser.com</a> ডোমেইন থেকে লোড করা হয়েছে। এই ডোমেইন থেকে স্ক্রিপ্ট এবং অন্যান্য রিসোর্স ফাইল লোড করা হয়, এসব স্ক্রিপ্ট এবং রিসোর্স ডোমেইনটি'র <em>নিজস্ব</em>।</p> +<p>এখন, যদি এই অ্যাপের কোন পাতা <code><iframe mozbrowser></code> তৈরি করে, এই <code><iframe></code> এর জন্য নতুন স্যান্ডবক্স তৈরি এবং ব্যবহার করা হবে, যা কিনা অ্যাপটি'র নিজস্ব স্যান্ডবক্স থেকে ভিন্ন। যেমন, এই <code><iframe></code> টি যদি <a class="external free" href="https://mybrowser.com" rel="nofollow">https://mybrowser.com</a> লোড করে, তাহলে <code><iframe mozbrowser> </code>এর জন্য ভিন্ন কুকি এবং অন্যান্য সবকিছু ব্যবহার করা হবে। একইভাবে, <code><iframe mozbrowser></code> এর ভেতরের কন্টেন্ট অ্যাপটি'র নিজস্ব নয়, বরং ভিন্ন IndexedDB এবং localStorage ডেটাবেইজ ব্যবহার করবে।</p> +<p>যেমন, MyBrowser অ্যাপ যদি Google Maps নিয়ে কাজ করতে চায় অঞ্চলভিত্তিক ব্রাউজিং উপভোগ করার জন্য তাহলেও ওপরের কথা প্রযোজ্য। যদি অ্যাপটি <code><iframe></code> এ <a class="external free" href="http://maps.google.com" rel="nofollow">http://maps.google.com</a> লোড করে, এটি <a class="external free" href="http://maps.google.com" rel="nofollow">http://maps.google.com</a> ওয়েবসাইটের জন্য কিছু কুকি লোড করবে। এরপর যদি ব্যবহারকারী <code><iframe mozbrowser></code> এর ভেতর <a class="external free" href="http://maps.google.com" rel="nofollow">http://maps.google.com</a> এ যায়, তাহলে মূল অ্যাপের থেকে ভিন্ন কুকি এবং অনুমতি ব্যবহার করা হবে।</p> +<p>আরেকটি উদাহরণ যেখানে এটি উপকারী তা হল Yelp এর মত অ্যাপ। এধরণের অ্যাপে ব্যবহারকারী সরাসরি অ্যাপ থেকেই বিভিন্ন রেস্টুরেন্টের সাইটে যেতে পারেন। যদি <code><iframe mozbrowser></code> ব্যবহার করে রেস্টুরেন্টের সাইট লোড করা হয়, তাহলে মূল Yelp অ্যাপটি নিশ্চিন্ত থাকতে পারবে যে রেস্টুরেন্টের সাইটে কোন <code><iframe></code> দিয়ে যদি Yelp অ্যাপেই আবার পয়েন্ট করে দেয় (ধরি অ্যাপটি <a class="external free" href="http://yelp.com" rel="nofollow">http://yelp.com</a>), তাহলে রেস্টুরেন্টের সাইটটি তার আইফ্রেমে Yelp কে সাধারণ ওয়েবসাইট হিসেবেই পাবে, অ্যাপ হিসেবে নয়। যেহেতু মূল Yelp অ্যাপ তার তথ্য, কুকি রেস্টুরেন্টের সাইটের সাথে শেয়ার করবে না, তাই মূল অ্যাপ নিশ্চিন্ত থাকতে পারবে যে অন্য কোন ওয়েবসাইট একে আক্রমণ করছে না।</p> +<h2 id="অ্যাপ_নিরাপত্তা_-_সারমর্ম">অ্যাপ নিরাপত্তা - সারমর্ম</h2> +<p>নিচের সারণীতে বিভিন্ন ধরণের ফায়ারফক্স ওএস অ্যাপ নিয়ে একটি সারমর্ম দেওয়া হয়েছে এবং তাদের ফরম্যাট, ইন্সটল করার পদ্ধতি, এবং হালনাগাদ করার পদ্ধতি লিপিবদ্ধ করা হয়েছে।</p> +<table> + <caption> + ওয়েব অ্যাপের প্রকারভেদ</caption> + <thead> + <tr> + <th scope="col">প্রকার</th> + <th scope="col">সরবরাহ করা</th> + <th scope="col">অনুমতি মডেল</th> + <th scope="col">ইন্সটল করা</th> + <th scope="col">আপডেট করা</th> + </tr> + </thead> + <tbody> + <tr> + <td>ওয়েব (Web)</td> + <td>হোস্ট করা অথবা প্যাকেজড</td> + <td>অপেক্ষাকৃত কম সংবেদনশীল অনুমতিগুলো, যেগুলো যাচাই করা হয়নি এমন ওয়েব কন্টেন্ট ব্যবহার করতে পারলেও ক্ষতি হবে না।</td> + <td>যেকোন জায়গা থেকে</td> + <td>অ্যাপটি কোথা থেকে ইন্সটল করা হয়েছিল এবং কিভাবে সরবরাহ করা হয়েছিল তার ওপর ভিত্তি করে ব্যবহারকারী'র কাছে স্বচ্ছভাবেই আপডেট দেওয়া বা সরাসরি মার্কেটপ্লেসের মাধ্যমে আপডেট দেওয়া সম্ভব।</td> + </tr> + <tr> + <td>সুবিধাভোগী (Privileged)</td> + <td>সাইন করা অবস্থায় প্যাকেজ এর মাধ্যমে</td> + <td>প্রিভিলিজড বা সুবিধাভোগী API সমূহ, যে কারণে অ্যাপ যাচাই এবং অথেনটিকেশন করা হয়।</td> + <td>বিশ্বস্ত কোন মার্কেটপ্লেস থেকে</td> + <td>বিশ্বস্ত কোন মার্কেটপ্লেস থেকে আপডেট করানো হয়। আপডেট ডাউনলোড এবং ইন্সটল করার আগে ব্যভারকারী'র অনুমোদন নেওয়া হয়।</td> + </tr> + <tr> + <td>প্রত্যয়িত (Certified)</td> + <td>প্যাকেজড</td> + <td>শক্তিশালী এবং অতি-সংবেদনশীল API সমূহ, যেগুলো তৃতীয় পক্ষের বানানো অ্যাপে অনুমিত হয় না।</td> + <td>ডিভাইসে আগে থেকেই দেওয়া থাকে।</td> + <td>সিস্টেম আপডেট করার সময় আপডেট করা যায়।</td> + </tr> + </tbody> +</table> +<div class="note"> + <p><strong>খেয়াল করুনঃ </strong>ফায়ারফক্স ওএস এর ১.০ সংস্করণে ওয়েব অ্যাপ যেকোন ওয়েবসাইট মার্কেটপ্লেস থেকে ইন্সটল করা গেলেও সুবিধাভোগী অ্যাপ শুধুমাত্র মজিলা মার্কেটপ্লেস থেকেই ইন্সটল করা যাবে। কারণ এখন পর্যন্ত অন্যান্য বিশ্বস্ত মার্কেটপ্লেস থেকে ইন্সটল করার সুবিধা দেওয়া হয়নি।</p> +</div> +<p> </p> 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 +--- +<p>{{Next("Mozilla/Firefox_OS/Security/Intercepting_traffic_using_a_proxy")}}</p> +<div class="summary"> + <p>এই গাইডটির লক্ষ্য হল <span id="result_box" lang="bn"><span class="hps">নিরাপত্তা</span> <span class="hps">পরীক্ষকগণদের প্রতি যারা ফায়ারফক্স ওএস পরীক্ষা শুরু করতে যাচ্ছে</span></span> ; এইটি সাহায্য করবে <span id="result_box" lang="bn"><span class="hps">সম্প্রদায়ের সদস্যদেরকে</span></span> <span id="result_box" lang="bn"> <span class="hps">অ্যাপ্লিকেশন নিরীক্ষা করতে এবং</span> <span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="hps">প্লাটফর্ম <span id="result_box" lang="bn"><span class="hps">নিজেই</span> <span class="hps">সাহায্য করবে</span></span> ।</span></span> যদি আপনি পূর্বে এটি না করে থাকেন তাহলে <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Security_model" title="/en-US/docs/Mozilla/Firefox_OS/Security/Security_model">Firefox OS security overview </a>পড়ার মাধ্যমে শুরু করে দিতে পারেন; তাহলে এটি <span id="result_box" lang="bn"><span class="hps">পরিভাষা</span> <span class="hps">এবং</span> <span class="hps">আর্কিটেকচারের</span> <span class="hps">মধ্যে</span> <span class="hps">একটি মৌলিক</span> <span class="hps">ব্যাকগ্রাউন্ড</span> <span class="hps">প্রদান করবে ।</span></span></p> +</div> +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">এই গাইডটিতে</span> <span class="hps">নিম্নলিখিত</span> <span class="hps">সাবসেকশনগুলি</span> <span class="hps">রয়েছে:</span></span></p> +<dl> + <dt> + {{anch("Getting started")}}</dt> + <dd> + <span class="short_text" id="result_box" lang="bn"><span class="hps">এখানে কিভাবে ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="hps">ডেস্কটপ</span> <span class="hps">বিল্ড শুরু করবো এবং <span id="result_box" lang="bn"><span>কিভাবে</span> <span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="hps">চলমান</span> <span class="hps">অ্যাপ্লিকেশনগুলি</span> <span class="hps">পরিদর্শন</span> <span class="hps">ও নিয়ন্ত্রণ</span> <span class="hps">করা যায় </span></span></span></span>তাতে তার ব্যাখ্যা দেয়া হয়েছে ।</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Intercepting_traffic_using_a_proxy" title="/en-US/docs/Mozilla/Firefox_OS/Security/Intercepting_traffic_using_a_proxy">Intercepting Firefox OS traffic using a proxy</a></dt> + <dd> + <span id="result_box" lang="bn"><span class="hps">এটি</span> <span class="hps">পরিদর্শন করে কিভাবে <span id="result_box" lang="bn"><span class="hps">প্রক্সি</span> <span class="hps">ব্যবহার করে <span id="result_box" lang="bn"><span class="hps">নেটওয়ার্ক ট্রাফিক</span> <span class="hps">ব্যাহত করা যায় ।</span></span></span></span></span></span></dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Apps/Testing_in_a_privileged_context" title="/en-US/docs/Mozilla/Firefox_OS/Apps/Testing_in_a_privileged_context">Modifying Gaia</a></dt> + <dd> + <span id="result_box" lang="bn"><span class="hps">কিভাবে</span> <span class="hps">B2G</span> <span class="hps">ডেস্কটপ এর একটি কাস্টম প্রোফাইল</span><span>ের </span><span class="hps">মাধ্যমে </span></span><span id="result_box" lang="bn"><span>সেইসাথে</span> <span class="hps">কিভাবে আপনার নিজের</span> <span class="hps">তৈরী</span> <span class="hps">অ্যাপস</span> <span class="hps">নির্মাণ ও</span> <span class="hps">ইনস্টল </span></span> করতে পারবেন তাও বলা হয়েছে ।</dd> +</dl> +<p>আমাদের পরীক্ষার সবকিচ্ছু <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">B2G Desktop</a> এর বিরুদ্ধে ঘটবে , <span id="result_box" lang="bn"><span class="hps">আপনার ডেস্কটপ</span> <span class="hps">কম্পিউটারের</span> <span class="hps">জন্য</span> <span class="hps">একটি নেটিভ</span> <span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="hps">তৈরি হবে</span></span> । আপনি <a href="ftp://ftp.mozilla.org/pub/b2g/nightly/latest-mozilla-central/">flavor of nightly build (Linux, Mac OS, Windows)</a><span class="short_text" id="result_box" lang="bn"><span class="hps">ডাউনলোড করা শুরু করে দিন </span></span>অন্য কিছু পড়ার আগে ।</p> +<h2 id="কিভাবে_শুরু_করবেন">কিভাবে শুরু করবেন</h2> +<p>ধরে নিন আপনি <span class="short_text" id="result_box" lang="bn"><span class="hps">B2G</span> <span class="hps">ডেস্কটপ</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">ডাউনলোড করে</span></span> ফেলেছন উপরের নিয়ম অনুযায়ী , এখন আপনি তৈরি পরের ধাপের জন্য ।</p> +<h3 id="লিনাক্স"><span class="short_text" id="result_box" lang="bn"><span class="hps">লিনাক্স</span></span></h3> +<p><span id="result_box" lang="bn"><span class="hps">B2G</span> <span class="hps">ডেস্কটপ</span> <span class="hps">সেট আপ</span> করা , <span class="short_text" id="result_box" lang="bn"><span class="hps">ফাইল </span></span>নিষ্কাশন করা</span> এবং <span class="short_text" id="result_box" lang="bn"><span class="hps">b2g</span> <span class="hps">বাইনারি চালানোর মতই সোজা ।</span></span></p> +<pre>tar xf b2g-something-something.tar.bz2 +cd b2g +./b2g</pre> +<h3 id="ম্যাক">ম্যাক</h3> +<p><span id="result_box" lang="bn"><span class="hps">ডাউনলোড করা </span></span><span class="short_text" id="result_box" lang="bn"><span class="hps">ডিস্ক</span> <span class="hps">ইমেজ ফাইল</span>টি খুলবেন এবং </span> B2G <span id="result_box" lang="bn"><span class="hps">অ্যাপ্লিকেশনটি আপনার </span></span> to your <code>/Applications</code> <span id="result_box" lang="bn"><span class="hps">ডিরেক্টরিতে</span></span> কপি করুন । এটি হয়ে যাবার পর আপনি <span id="result_box" lang="bn"><span class="hps">B2G</span> <span class="hps">aplication</span> <span class="hps">আইকনটি ক্লিক করে</span> <span class="hps">B2G</span> <span class="hps">ডেস্কটপ</span> <span class="hps">আরম্ভ করতে পারেন ।</span></span><span id="result_box" lang="bn"><span class="hps">অন্যথায় আপনি</span> <span class="hps">টার্মিনাল</span> <span class="hps">থেকে</span> <span class="hps">এটি আরম্ভ</span> <span class="hps">করতে পারেন নিচের নিয়ম অনুযায়ী: </span></span></p> +<pre>/Applications/B2G.app/Contents/MacOS/b2g</pre> +<h3 id="উইন্ডোজ">উইন্ডোজ</h3> +<p><span id="result_box" lang="bn"><span class="hps">ডাউনলোড করুন এবং</span> <span class="hps">একটি সুবিধাজনক</span> <span class="hps">অবস্থানে</span> <span class="hps">জিপ ফাইল</span>টি <span class="short_text" id="result_box" lang="bn"><span class="hps">নিষ্কর্ষ করুন। <span id="result_box" lang="bn"><span class="hps">ডাবল</span> <span class="hps">ক্লিক করুন</span></span></span></span> </span><code>b2g.exe এর উপর </code><span id="result_box" lang="bn"><span class="hps">B2G</span> <span class="hps">ডেস্কটপ</span> <span class="hps">শুরু করার জন্য ।</span></span></p> +<div class="note"> + <p>টীকা:<span id="result_box" lang="bn"><span class="hps">লেখার সময়</span><span>, উইন্ডোজ</span> <span class="hps">নেভিগেশন</span> <span class="hps">B2G</span> <span class="hps">ডেস্কটপ</span> <span class="hps">চলমান</span> নামক <span class="hps">একটি বিষয় আছে</span><span>.</span> <span class="hps">আপনি</span> এর <span class="hps">পরিবর্তে</span> <span class="hps"><a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS simulator</a></span> ব্যবহার <span class="hps">করে দেখতে পারেন</span><span> ।</span></span></p> +</div> +<h3 id="টিপস"><span class="short_text" id="result_box" lang="bn"><span class="hps">টিপস</span> <span class="hps"> </span></span></h3> +<p><span id="result_box" lang="bn"><span class="hps">আপনি এখন</span> <span id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ</span> <span id="result_box" lang="bn"><span class="hps">ডেস্কটপ</span> <span class="hps">উইন্ডোতে <span id="result_box" lang="bn"><span class="hps">চলমান</span> <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস খেলতে পারেন ।</span></span></span></span></span></span></span><span class="short_text" id="result_box" lang="bn"><span class="hps">যান এবং খেলেন</span></span> : <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">খুলুন</span></span> (<span class="short_text" id="result_box" lang="bn"><span class="hps">নীচে ডানদিকে</span>র <span class="hps">আইকন</span></span>) এবং <span id="result_box" lang="bn"><span class="hps">একটি</span> <span class="hps">ওয়েব পেজ</span> <span class="hps">দেখার জন্য</span><span>, অথবা</span> <span class="hps">কয়েক</span> <span class="hps">অ্যাপ্লিকেশান</span> <span class="hps">খোলার</span> <span class="hps">চেষ্টা করুন ।</span></span> <span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">লক্ষ্য করবেন</span> <span class="hps">যে</span> <span class="hps">কিছু</span> <span class="hps">ডিভাইস নির্দিষ্ট</span> <span class="hps">কার্যকারিতা আছে </span></span>— <span class="short_text" id="result_box" lang="bn"><span class="hps">যেমন</span> <span class="hps">ডায়ালার</span><span>, ক্যামেরা</span><span>, রেডিও</span> <span class="hps">ইত্যাদি</span></span> —<span class="short_text" id="result_box" lang="bn"><span class="hps">সুস্পষ্ট কারণে</span> <span class="hps">কাজ করবে না ।</span></span></p> +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">B2G</span> <span class="hps">ডেস্কটপ</span> এর <span class="hps">সঙ্গে <span class="short_text" id="result_box" lang="bn"><span class="hps">নিজেকে</span> <span class="hps alt-edited">স্বাচ্ছন্দ্য</span> <span class="hps">করে তুলুন</span></span> </span></span>; অবশ্যই পড়বেন <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Using the B2G desktop client</a> যাতে করে আপনি এর কাজ শিখতে পারেন ।</p> +<p><span id="result_box" lang="bn"><span class="hps">এখন</span> <span class="hps">বাস্তব চুক্তি</span> <span class="hps">করার</span> <span class="hps">ক্ষেত্রে</span><span>,</span> <span class="hps">আমরা</span> <span class="hps">জাভাস্ক্রিপ্ট</span> <span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="hps">ভিতর থেকে</span> <span class="hps">কল</span> <span class="hps">করতে চাই ।</span></span></p> +<h2 id="ফায়ারফক্স_অপারেটিং_সিস্টেমের_জন্য_ডিবাগিং_শেল_প্রাপ্ত_করার_পদ্ধতি"><span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">অপারেটিং সিস্টেমের জন্য</span> <span class="hps">ডিবাগিং</span> <span class="hps">শেল</span> <span class="hps">প্রাপ্ত করার পদ্ধতি</span></span></h2> +<p><a href="/en-US/docs/Marionette" title="/en-US/docs/Marionette">Marionette </a> <span id="result_box" lang="bn"><span class="hps">সেলেনিয়াম</span> <span class="hps">/</span> <span class="hps">WebDriver</span> <span class="hps atn">API-</span><span>এর উপর ভিত্তি করে চলে</span></span>,এবং <span id="result_box" lang="bn"><span class="hps">ডিবাগিং</span> <span class="hps">শেল</span> <span class="hps">জন্য ভিত্তি</span> <span class="hps">প্রদান করে যা <span id="result_box" lang="bn"><span class="hps">ব্যবহার</span></span> করে</span></span><span id="result_box" lang="bn"><span class="hps"> স্বয়ংক্রিয় <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> <span class="hps">পরীক্ষা করা হয় ।</span></span></span></span><span id="result_box" lang="bn"><span class="hps"> প্রথমত,</span></span> <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Setting_up_Marionette?redirectlocale=en-US&redirectslug=Mozilla/Firefox_OS/Setting_Up_Marionette_for_B2G#Setting_up_the_Marionette_client">marionette client</a> (<span id="result_box" lang="bn"><span>পাইথন</span> এ <span class="hps">লেখা</span></span>) সেট আপ করতে হবে এবং <span id="result_box" lang="bn"><span class="hps">সেখানে</span> <span class="hps">দেওয়া</span> <span class="hps">ইনস্টলেশনের নির্দেশাবলী নির্দ্বিধায় অনুসরণ</span><span> করতে হবে ।</span></span></p> +<div class="note"> + <p><strong>টীকা:</strong><span id="result_box" lang="bn"><span class="hps">সাম্প্রতিক</span> <span class="hps">পরীক্ষা</span> র মাধ্যমে দেখা গিয়েছে যে <span id="result_box" lang="bn"><span class="hps">mozbase এর কিছু <span id="result_box" lang="bn"><span class="hps">নির্দিষ্ট</span> <span class="hps">সংস্করণের সঙ্গে</span> <span class="hps">সমস্যা থাকতে পারে</span></span></span></span></span> আপনার । <span id="result_box" lang="bn"><span class="hps">শেষ</span> <span class="hps">পরিচিত</span><span class="atn">-</span><span>কর্মরত <span id="result_box" lang="bn"><span class="hps">Mozbase হল </span></span></span></span><span class="short_text" id="result_box" lang="bn"><span class="hps">9ee2de</span> <span class="hps">কমিট</span></span> ।</p> +</div> +<div class="note"> + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"> + <span id="result_box" lang="bn"><span class="hps">টীকা</span><span>:</span> <span class="hps">যেহেতু আপনি নাইটলি বিল্ড ব্যবহার করছেন</span><span>,</span> <span class="hps">আপনার</span></span> b2g প্রোফাইল এ (just like in the Firefox browser, all user settings are stored within a profile) <span id="result_box" lang="bn"><span class="hps">ইতিমধ্যে</span></span> Marionette, <span id="result_box" lang="bn"><span class="hps">লাইনের মাধ্যমে</span> <span class="hps">সক্রিয়</span> <span class="hps">হওয়া উচিত ছিল ।</span></span></div> + <div dir="ltr" style="zoom: 1;"> + <code>user_pref("marionette.defaultPrefs.enabled", true);</code> in <code>gaia/profile/<code>prefs.js</code></code>. যদি না হয় তাহলে আপনি ভুল বিল্ড <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্যবহার করছেন</span></span> ।</div> + </div> +</div> +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">এই মুহুর্তে</span></span>, <span class="short_text" id="result_box" lang="bn"><span class="hps">আপনি চিন্তা করতে পারেন</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">পাইথন</span> <span class="hps">কনসোল</span> স্পিনিং আপ করতে</span>,<span class="short_text" id="result_box" lang="bn"><span> marionette ক্লায়েন্ট</span> <span class="hps">লাইব্রেরী</span> <span class="hps">ইম্পোর্ট</span></span> করা এবং ডিবাগিং সেশন তৈরি করা , কিন্তু আমরা অন্য কিছু করতে পারি: <span id="result_box" lang="bn"><span class="hps">স্টিফান</span> <span class="hps">আরেন্টেজ</span> <span class="hps">একটি সহজ</span> <span class="hps">জাভাস্ক্রিপ্ট</span> <span class="hps">কনসোল</span> <span class="hps">তৈরি করেছেন</span></span> যেটি marionette <span class="short_text" id="result_box" lang="bn"><span>ক্লায়েন্ট</span> <span class="hps">লাইব্রেরীর</span> <span class="hps">উপরে</span> <span class="hps">রানকরে ।</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">সুতরাং,</span> <span class="hps">এর</span> <span class="hps">জন্য ডাউনলোড</span> <span class="hps">করা যাক</span></span> <a href="https://raw.github.com/st3fan/fxos-repl/master/fxos-repl.py">fxos-repl.py</a> ।</p> +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">আমাদের</span> <span class="hps">উদাহরণস্বরূপ</span></span>,<span id="result_box" lang="bn"><span class="hps">আমরা</span> <span class="hps">দূরবর্তী</span> <span class="hps">ব্রাউজার</span> <span class="hps">অ্যাপ্লিকেশন</span> <span class="hps">নিয়ন্ত্রণ করবো ।</span></span><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">মাউস দিয়ে</span> <span class="hps">ফায়ারফক্স</span> <span class="hps">ওএস</span> হোম পর্দা<span class="hps">র</span> <span class="hps">নীচের অংশের ডানদিকে</span> <span class="hps">ব্রাউজার</span> <span class="hps">আইকনটি ক্লিক করে</span> <span class="hps">এটি</span> <span class="hps">আরম্ভ করুন</span></span> । <span class="short_text" id="result_box" lang="bn"><span class="hps">B2G</span> <span class="hps">বাইনারি কি <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">অ্যাপ্লিকেশন</span> <span class="hps">দেখাচ্ছে ?</span></span></span></span> <span id="result_box" lang="bn"><span class="hps">ভাল</span> । <span class="hps">এই নির্দেশটি আপনাকে একটি</span> <span class="hps">URL</span> <span class="hps">এর লিস্ট দিবে যেখানে বিভিন্ন প্রতিনিধিত্বমূলক অ্যাপ্লিকেশান থাকবে</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">এবং আপনাকে ডিবাগ শুরু করার অনুমতি দিবে</span><span> ।</span></span></p> +<pre class="brush: bash">$ <strong>python fxos-repl.py list</strong> +app://homescreen.gaiamobile.org/index.html#root +app://browser.gaiamobile.org/index.html +app://keyboard.gaiamobile.org/index.html</pre> +<p><span id="result_box" lang="bn"><span class="hps">এখন আসুন</span> <span class="hps">ব্রাউজার</span> <span class="hps">অ্যাপ্লিকেশন</span> <span class="hps">সংযোগ</span> <span class="hps">দেয়</span> <span class="hps">এবং তা</span> <span class="hps">পরীক্ষা করি </span><span>:</span></span></p> +<pre class="brush: bash">$ <strong>python fxos-reply.py connect app://browser.gaiamobile.org/index.html</strong> +Connected to app://browser.gaiamobile.org/index.html</pre> +<p>API টি{{domxref("document.querySelector()")}} ব্যবহার করে {{HTMLElement("menu")}} ট্যাগটি আইডি <code>toolbar-start সহ খুঁজে বের করতে হবে</code>, এবং এটির HTML টি দেখতে পারব :</p> +<pre class="brush: bash">>>> <strong>document.querySelector("menu#toolbar-start").outerHTML</strong> +<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></pre> +<p>এটি আপনার কাছে পরিচিত লাগছে? এটি আক্তি টুল বার যেটির মধ্যে অ্যাড্রেস বার এবং নতুন ট্যাব বার আছে ।</p> +<p>এখন শেলটি ব্যবহার করে কিল্ক করে নতুন ট্যাব বোতাম এ যাওয়া যাক । এইটির আইডি হল <code>tabs-badge</code> ।</p> +<pre class="brush: bash">>>> <strong>document.querySelector("#tabs-badge").click()</strong></pre> +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">নতুন</span> <span class="hps">ট্যাব</span> <span class="hps">ইউআই</span> <span class="hps">এখন</span> <span class="hps">দেখাবে ।</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">অন্য কিছু</span> <span class="hps">চেষ্টা করা যাক </span></span>:</p> +<pre class="brush: bash">>>> <strong>alert(location.href)</strong></pre> +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">এখন</span> <span class="hps">খেলুন !</span></span></p> +<p>{{Next("Mozilla/Firefox_OS/Security/Intercepting_traffic_using_a_proxy")}}</p> 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 +--- +<p> নিম্নোল্লিখিত আর্টিকেলগুলোতে ফায়ারফক্স ওএসের নিরাপত্তা সংক্রান্ত বিষয়ে আলোচনা করা হয়েছে। এতে সার্বিক নিরাপত্তা সুবিধা, এ্যাপ্লিকেশন নিরাপত্তা এবং ইন্সটল প্রক্রিয়া নিরাপদ রাখার প্রক্রিয়াও আলোচিত হয়েছে।</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">ফায়ারফক্স ওএস ডকুমেন্টেশন</h2> + <dl> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Security/Security_model" title="/bn-BD/docs/Mozilla/Firefox_OS/Security/Security_model">ফায়ারফক্স ওএস নিরাপত্তা মডেল</a></dt> + <dd> + ফায়ারফক্স ওএসের নিরাপত্তা মডেলের সার্বিক চিত্র।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Security/Application_security" title="/bn-BD/docs/Mozilla/Firefox_OS/Security/Application_security">ফায়ারফক্স ওএসে এ্যাপ্লিকেশন নিরাপত্তা</a></dt> + <dd> + ফায়ারফক্স ওএসের এ্যাপ্লিকেশনসমূহের নিরাপত্তার সার্বিক চিত্র।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Security/Installing_and_updating_applications" title="/bn-BD/docs/Mozilla/Firefox_OS/Security/Installing_and_updating_applications">নিরাপদভাবে এ্যাপ্লিকেশন ইন্সটল ও আপডেট করা</a></dt> + <dd> + ফায়ারফক্স ওএসের নিরাপদভাবে এ্যাপ্লিকেশন ইন্সটল ও আপডেট করার পদ্ধতি।</dd> + <dt> + <a href="/bn-BD/docs/Mozilla/Firefox_OS/Security/Software_permissions" title="/bn-BD/docs/Mozilla/Firefox_OS/Security/Software_permissions">ফায়ারফক্স ওএসে সফটওয়্যার পারমিশন</a></dt> + <dd> + কোন ধরণের সফটওয়্যার কি কাজ করার অনুমতি রাখে - সে সংক্রান্ত গাইড</dd> + </dl> + <p><span class="alllinks"><a href="/bn-BD/docs/tag/B2G" title="/bn-BD/docs/tag/B2G">সবগুলো দেখুন...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">কমিউনিটি থেকে সাহায্য</h2> + <p>আপনি যদি ফায়ারফক্স ওএস নিয়ে কাজ করে থাকেন, কিংবা এ্যাপ্লিকেশন ডেভেলপ করে থাকেন যা ফায়ারফক্স ওএস ডিভাইসে চালাতে ইচ্ছুক, আপনাকে সাহায্য করার জন্য কমিউনিটির কিছু রিসোর্স আছে।</p> + <ul> + <li>বুট-টু-গিকো প্রজেক্ট ফোরাম: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}</li> + </ul> + <ul> + <li>আপনার প্রশ্ন মোজিলার বুট-টু-গিকো আইআরসি চ্যানেলে করুন: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li> + </ul> + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + <br> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">সম্পর্কিত বিষয়বস্তু</h2> + <ul> + <li><a href="/bn-BD/docs/Mobile" title="bn-BD/docs/Mobile">মোবাইল</a></li> + <li><a href="/bn-BD/docs/Security" title="/bn-BD/docs/Security">নিরাপত্তা</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p><br> + otta</p> 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 +--- +<p>{{PreviousNext("Mozilla/Firefox_OS/Security/Debugging_and_security_testing", "Mozilla/Firefox_OS/Apps/Testing_in_a_privileged_context")}}</p> +<div class="summary"> + <p><span class="seoSummary"><span style="line-height: 1.5;">ডিবাগিং এবং সিক্যুরিটি পরীক্ষা সম্পর্কিত নিবন্ধের এই অংশে আমরা দেখব, প্রক্সির SSL সার্টিফিকেট সাদাতালিকাভুক্ত করা সহ প্রক্সি ব্যাবহার করে ফায়ারফক্স ওএস ট্রাফিককে বাধাদান করা (B2G ডেস্কটপ ও ডিভাইসে), যাতে করে যে কেও ফায়ারফক্স ওএস এর মাধ্যমে HTTPS যোগাযোগে বাধাদান বা রি-এনক্রিপ্ট করতে পারে । আপনি যদি B2G ডেস্কটপ ব্যাবহার করে থাকেন, তাহলে এটি ইন্সটল করা ও ম্যারিওনেট জাভাস্ক্রিপ্ট ডিবাগিং শেল যুক্ত করার পদ্ধতি</span></span> <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Debugging_and_security_testing" title="/en-US/docs/Mozilla/Firefox_OS/Security/Debugging_and_security_testing">Debugging and security testing with Firefox OS</a> <span style="line-height: 1.5;">–এ বর্ণিত আছে ।</span></p> +</div> +<p><span style="line-height: 1.5;">এইচটিএমএল ও জাভাস্ক্রিপ্ট নির্মিত অ্যাপ নিয়ে কাজ করতে গেলে আপনি লক্ষ্য করবেন যে, তথ্য আদান-প্রদানের কাজে ব্যবহৃত API সহ অনেক আকর্ষণীয় কাজ সেখানে আছে । তার মানে, এই অ্যাপগুলো যে HTTP অনুরোধ সম্পাদন করে, সেগুলো লক্ষ্য করা বেশিরভাগ সময়ই গুরুত্বপূর্ণ ।</span></p> +<h2 id="ZAP_পরিচিতি">ZAP <strong>পরিচিতি</strong></h2> +<p>ZAP দিয়েই শুরু করা যাক । ZAP হল একটি বাধাদানকারী প্রক্সি, যা সহজে ডিবাগিংএর জন্য HTTPS ট্রাফিককে বাধা দেয় এবং পুনরায় এনক্রিপ্ট করে । এটি ডাউনলোডের জন্য <a href="https://www.owasp.org/index.php/ZAP" style="line-height: 1.5;" title="https://www.owasp.org/index.php/ZAP">ZAP homepage</a> <span style="line-height: 1.5;">এর উপরের বড় নীল বাটনটি ক্লিক করুন । আপনি যদি আরেকটি প্রক্সি ব্যাবহার করতে চান (যেমন </span><a href="http://portswigger.net/burp/proxy.html" style="line-height: 1.5;" title="http://portswigger.net/burp/proxy.html">Burp Proxy</a><span style="line-height: 1.5;">), করতে পারেন ; কারণ পদ্ধতিটি দুইক্ষেত্রেই কাজ করবে ।</span></p> +<h4 id="ZAP_সার্টিফিকেট"><span style="font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.5;">ZAP সার্টিফিকেট</span></h4> +<p><span style="line-height: 1.5;">এখন, আপনি যে প্রক্সিই ব্যাবহার করুন না কেন, এটির সার্টিফিকেটটি একটি ফাইলে এক্সপোর্ট করুন এভাবে</span> <code>owasp_zap_root_ca.cer (go in <em>Tools > Options > Dynamic SSL Certificates > Save</em>)।</code> যখন ZAP প্রথম চালু হবে, এটি একটি একবছর মেয়াদী সার্টিফিকেট তৈরি করে । আপনি Dynamic SSL Certificates অংশ থেকেও নতুন একটি তৈরি করতে পারেন ।</p> +<h4 id="sect1"> </h4> +<p>লোকাল প্রক্সি</p> +<p><span style="line-height: 1.5;">আপনি যদি B2G ডেস্কটপ ব্যাবহারকারি হয়ে থাকেন, তাহলে ZAP যেন localhost অনুসরণ না করে আপনার নির্দিষ্ট বৈশিষ্ট্যের IP অ্যাড্রেস (ইথারনেট বা ওয়াই-ফাই) অনুসরণ করে, এটি আপনাকে নিশ্চিত করতে হবে । কারণ, B2G ডেস্কটপের </span><span style="font-family: 'Courier New', 'Andale Mono', monospace;">localhost</span><span style="line-height: 1.5;"> আপনার ডেস্কটপ কম্পিউটারটিকে নির্দেশ করে না, বরং B2G বাইনারির নিজস্ব কোন কিছুকে নির্দেশ করে । উদাহরণস্বরূপ, আমরা আমাদের IP হিসেবে </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">10.264.1.5</span><span style="line-height: 1.5;"> ব্যাবহার করব ।</span></p> +<p><span style="line-height: 1.5;">আপনি যদি একটি প্রকৃত ডিভাইস নিয়ে কাজ করেন, তাহলে আপনার ফোন এবং কম্পিউটার যেন একই নেটওয়ার্কে/VLAN-এ যুক্ত থাকে এবং নিজেদের মধ্যে যোগাযোগ রাখতে পারে, সেটি নিশ্চিত করতে হবে (সন্দেহ হলে একটি ডিভাইসের IP অন্য ডিভাইস থেকে পিং করার চেষ্টা করতে পারেন) ।</span></p> +<h2 id="sect2"> </h2> +<p>সার্টিফিকেট ডেটাবেইজ তৈরি</p> +<p>সার্টিফিকেট গ্রহণ করার প্রক্রিয়াটি সেটিংসে সম্পন্ন হয়, যেগুলো প্রোফাইলে সংরক্ষিত থাকে । এখানে ফায়ারফক্স প্রোফাইলসের উপর একটি সংক্ষিপ্ত সূচনা দেয়া হল :</p> +<ol start="1" style="list-style-type: decimal; margin-left: 40px;"> + <li>কমান্ড লাইনে –P অপশন ব্যাবহার করে ফায়ারফক্স প্রোফাইল ম্যানেজার চালু করুন এবং ফায়ারফক্স যেন কোন বর্তমান সেশন ব্যাবহার না করে, তা নিশ্চিত করুন(<code>-no-remote</code>): + <ul style="margin-left: 40px;"> + <li> + <p>লিনাক্সে আপনাকে যা করতে হবে :</p> + <pre class="brush: bash">firefox -P -no-remote</pre> + </li> + <li> + <p>·ম্যাক ওএস এক্সে :</p> + <pre class="brush: bash">/Applications/Firefox.app/Contents/MacOS/firefox -P -no-remote</pre> + </li> + </ul> + </li> + <li>এবার “zapped.” নামে একটি প্রোফাইল তৈরি করুন । সার্টিফিকেট সেটিংসে যান - <em>Edit > Preferences > Advanced > Encryption > View Certificates > Import</em>। আপনার প্রক্সি দিয়ে তৈরিকৃত <span style="font-family: 'Courier New', 'Andale Mono', monospace;">owasp_zap_root_ca.cer</span> ফাইলটি সিলেক্ট করুন এবং ফায়ারফক্স যেন ওয়েবসাইট শনাক্তের কাজে এই CA কে ট্রাস্ট করে, সেই নির্দেশ দিন (এটি সত্যিকার অর্থেই শুধু এই প্রোফাইলের জন্য বৈধ) ।</li> + <li>ফায়ারফক্সের মাধ্যমে সার্টিফিকেট ডেটাবেইজ তৈরি হয়ে যাওয়ায় আমরা এই ডেটাবেইজটি এখন B2G প্রোফাইল তৈরির কাজে ব্যবহার করতে পারি । আপনার ফায়ারফক্স প্রোফাইল ডিরেক্টরির নামটি একটি দৈবচয়িত স্ট্রিং, যেটি <em>zapped </em>দিয়ে শেষ হয় । এর লোকেশন অপারেটিং সিস্টেমের উপর নির্ভর করে ; এটি কোথায় পাওয়া যায়, তার বিস্তারিত জানতে <a href="/en-US/docs/Runtime_Directories" title="/en-US/docs/Runtime_Directories">Runtime Directories</a> এ যান ।</li> + <li><code><strong>B2G ডেস্কটপের</strong> জন্য শুধুমাত্র প্রোফাইলের সার্টিফিকেট ডেটাবেইজ ফাইল cert8.db টি লাগবে । এটিকে B2G প্রোফাইল ডিরেক্টরি b2g/gaia/profile/ তে কপি করুন ।</code></li> + <li><strong>ডিভাইসে</strong>, <span style="font-family: 'Courier New', 'Andale Mono', monospace;">cert9.db</span> ফাইলটি ডিভাইসের প্রোফাইল ডিরেক্টরিতে কপি করুন ।<br> + <pre>$ adb shell stop b2g +$ adb push cert9.db /data/b2g/mozilla/*.default</pre> + </li> +</ol> +<div class="note"> + <p>দ্রষ্টব্য : এটি বর্তমান ফাইলকে প্রতিস্থাপিত করবে ।</p> +</div> +<h2 id="sect3"> </h2> +<p>B2G সেট আপ</p> +<p>পরবর্তী ধাপটি হল ZAPকে সকল নেটওয়ার্ক যোগাযোগের জন্য ডিফল্ট করে দেয়া । ফায়ারফক্স ওএস ইউজার ইন্টারফেসে সার্টিফিকেট সেটিংসের ন্যায় প্রক্সি সেটিংস এখনো অন্তর্ভুক্ত নয় ।</p> +<h3 id="sect4"> </h3> +<p>B2G ডেস্কটপে</p> +<p>এই কাস্টম সেটিংস আপনাকে প্রেফারেন্সেস ফাইলে অ্যাপেন্ড করতে হবে , <code>b2g/gaia/profile/prefs.js</code>:</p> +<pre><code class="brush: bash">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);</code> +</pre> +<div class="note"> + <p>দ্রষ্টব্য : আমার আইপি অ্যাড্রেস 10.264.1.5 আপনারটি দিয়ে প্রতিস্থাপিত করতে ভুলবেন না, এবং আপনার প্রক্সি যদি 8080 পোর্টে কাজ না করে, আপনাকে এটি ফাইলেও পরিবর্তন করতে হবে ।</p> +</div> +<p>এখন আপনি প্রস্তুত ! B2G ডেস্কটপ পুনরায় চালু করুন এবং পরীক্ষামূলক ব্রাউজিং করুন । ZAP এ নেটওয়ার্ক ট্রাফিক দেখা যাবে ।</p> +<h3 id="sect5"> </h3> +<p>ডিভাইসে</p> +<div class="warning"> + <p>এই পদ্ধতিগুলো ডিভাইসে আর কাজ নাও করতে পারে ।</p> +</div> +<p><span style="line-height: 1.5;">আপনাকে</span> /data/b2g/mozilla/*.default ফাইলটি নবায়ন করতে হবে:</p> +<pre>$ adb pull /data/b2g/mozilla/*.default/prefs.js</pre> +<p>ফাইলের শেষে, উপরের দ্বিতীয় অংশে উল্লেখিত কাস্টম সেটিংস যোগ করুন এবং B2G রিস্টার্ট দিন (B2G প্রক্রিয়া থেমে যাওয়ার কথা, যদি আপনি cert9.db পুশ করার নিয়ম অনুসরণ করতেন) :</p> +<pre>$ adb push pref.js /data/b2g/mozilla/*.default +$ adb shell start b2g</pre> +<p>{{PreviousNext("Mozilla/Firefox_OS/Security/Debugging_and_security_testing", "Mozilla/Firefox_OS/Apps/Testing_in_a_privileged_context")}}</p> 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 +--- +<div class="note"> +<p>এই পাতাটিতে ফায়ারফক্স ওএস ১.২ বা তার পরের ভার্শন গুলোর ডেভেলপারদের জন্য ফায়ারফক্স ওএস সিমুলেটর এর বিস্তারিত বর্ণনা করা হয়েছে। যদি আপনি ফায়ারফক্স ওএস ১.১ এর জন্য অ্যাপ ডেভেলপ করতে চান, তাহলে <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator">ফায়ারফক্স ওএস ১.১ সিমুলেটর</a> পাতাটি দেখুন।</p> +</div> + +<p><span style="line-height: 1.5;">ফায়ারফক্স ওএস সিমুলেটর হচ্ছে ফায়ারফক্স ওএস এর উচ্চতর স্তরের সংস্করণ, যেটা একটি ফায়ারফক্স ওএস ডিভাইস সিমুলেট করে, কিন্তু ডেস্কটপে চলে। এর অর্থ হচ্ছে, অনেক ক্ষেত্রে আপনাকে আপনার অ্যাপ টেস্ট বা ডিবাগ করার জন্য বাস্তব ডিভাইসের প্রয়োজন হবে না।</span><span style="line-height: 1.5;"> এটি ফায়ারফক্স ডিভাইসের সমান একটি উইন্ডোতে চলে, যেটার মধ্যে ফায়ারফক্স ওএস ইউজার ইন্টারফেস এবং বিল্ট-ইন অ্যাপস আছে। আর এটি ফায়ারফক্স ওএস এর অনেক ডিভাইস এপিআই ও সিমুলেট করে।</span></p> + +<p><span style="line-height: 1.5;">সিমুলেটর টি একটি ফায়ারফক্স অ্যাড-অন হিসেবে প্যাকেজ করে বিতরণ করা হয়। একবার আপনি এটা ডাউনলোড করে ফায়ারফক্স ব্রাউজারে ইন্সটল করার পর, আপনি এটা চালাতে পারবেন, <a href="/en-US/Firefox_OS/Using_the_App_Manager" style="line-height: 1.5;">অ্যাপ ম্যানেজার</a> ব্যবহার করে বিভিন্ন অ্যাপস ইন্সটল করতে পারবেন, ডেভেলপার টুলস যুক্ত করতে পারবেন।</span></p> + +<h2 id="ইন্সটলেশন"><span style="line-height: 1.5;">ইন্সটলেশন</span></h2> + +<p><span style="line-height: 1.5;">সিমুলেটর টি ইন্সটল করার জন্য নিচের বাটনটিতে ক্লিক করুন। এখানে আপনি একাধিক সংস্করণ পাবেন। সর্বোচ্চ সুবিধার জন্য সবগুলো ইন্সটল করতে পারেন।</span></p> + +<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; color: white; text-align: center; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; display: inline-block; background-color: rgb(129, 188, 46); white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(0, 0, 0, 0.298039) 0px -1px 0px 0px inset;">ইন্সটল সিমুলেটর</a></p> + +<p>সিমুলেটর চালু করতে <a href="/en-US/Firefox_OS/Using_the_App_Manager#Using_a_Firefox_OS_Simulator_Add-on" style="font-size: 14px; font-weight: normal; line-height: 1.5;">অ্যাপ ম্যানেজার ডকুমেন্টেশন এর নির্দেশনা</a> পড়ুন। একবার চালু হয়ে গেলে আপনি সত্যিকার ডিভাইসের মত এটিকে ব্যবহার করতে পারবেন।</p> + +<h2 id="সিমুলেটর_ইউজার_ইন্টারফেস" style="line-height: 30px;">সিমুলেটর ইউজার ইন্টারফেস</h2> + +<p><span style="line-height: 22.00800132751465px;">সিমুলেটর টি আলাদা উইন্ডো হিসেবে চালু হয়, আর এর আকার হয় ৩২০x৪৮০ পিক্সেল। টাচ ইভেন্ট সিমুলেট করার জন্য আপনি মাউস দিয়ে ক্লিক করতে পারেন। আর ড্র্যাগ ফিচারের জন্য মাউসের বাম বোতাম চেপে ধরে ড্র্যাগ করতে পারেন। তাই সাধারন ফোনের মত ডানে-বামে ড্র্যাগ করে বিল্ট-ইন অ্যাপ সহ আপনার ইন্সটল করা অ্যাপ গুলো দেখতে পাবেন।</span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7173/simulator-1.2.png" style="width: 810px; height: 623px; display: block; margin: 0px auto;"></p> + +<p>সিমুলেটরের নিচের দিকে টুলবারের মধ্যে দুইটি বাটন আছেঃ</p> + +<ul> + <li>বাম পাশের বাটন টি আপনাকে হোম স্ক্রিনে নিয়ে যাবে, অথবা এটা চেপে ধরলে সিমুলেটর টি বন্ধ হয়ে যাবে।</li> + <li>ডান পাশের বাটন টি সিমুলেটরের ডিসপ্লের ধরন (পোর্ট্রেট এবং ল্যান্ডস্কেপ) পরিবর্তন এর সুবিধা দেয়। এই বাটন টি চাপলে <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="/en-US/docs/WebAPI/Detecting_device_orientation">orientationchange</a> ইভেন্ট চালু হবে।</li> +</ul> + +<h2 id="সিমুলেটরের_সীমাবদ্ধতা">সিমুলেটরের সীমাবদ্ধতা</h2> + +<p>মনে রাখবেন, ফায়ারফক্স ওএস সিমুলেটর একটি নিখুঁত সিমুলেটর নয়।</p> + +<h3 id="হার্ডওয়্যার_সীমাবদ্ধতা">হার্ডওয়্যার সীমাবদ্ধতা</h3> + +<p>স্ক্রিন সাইজ ছাড়া, সিমুলেটর হার্ডওয়্যারের সীমাবদ্ধতা যেমন ব্যবহার যোগ্য মেমরি অথবা CPU এর গতি প্রদর্শন করে না।</p> + +<h3 id="অডিওভিডিও_কোডেক_সমূহ">অডিও/ভিডিও কোডেক সমূহ</h3> + +<p>নিচে উল্লেখিত কোডেক গুলো হার্ডওয়্যার অ্যাক্সিলারেটেড ডিকোডিং এর উপর নির্ভর করে; তাই এগুলো এখন সমর্থন করা হচ্ছে নাঃ</p> + +<ul> + <li>MP3</li> + <li>AAC</li> + <li>H.264 (MP4)</li> + <li>WebM</li> +</ul> + +<p>এর মানে হচ্ছে, যেসব অডিও ও ভিডিও এসব কোডেকের উপর নির্ভর করে, সিমুলেটর ব্যবহার করে আপনি অ্যাপ এর মধ্যে থাকা সেসব অডিও/ভিডিও বা ইউটিউবের মত সাইট টেস্ট করতে পারবেন না।</p> + +<h3 id="অসমর্থিত_API_সমূহ"><a name="Unsupported-APIs">অসমর্থিত API সমূহ</a></h3> + +<p>নির্দিষ্ট কিছু API যেগুলো ডিভাইসের হার্ডওয়্যার এর উপর নির্ভর করে, সেগুলোও সিমুলেটরে কাজ করবে না। কারণ সিমুলেটরে আপনি সেসব ডিভাইস পাচ্ছেন না। তবে আমরা প্রতিদিনই সিমুলেটরে কিছু না কিছু সমর্থন যুক্ত করছি, যেমনঃ জিওলোকেশন। আশা করছি ভবিষ্যতে আমরা আরও ফিচার যুক্ত করতে পারব। যাইহোক, এ মুহূর্তে নিচে উল্লেখিত API গুলো সমর্থিত নয়। এগুলো ব্যবহার করে সিমুলেটরে টেস্ট করলে ভুল ফলাফল পেতে পারেনঃ</p> + +<ul> + <li><a href="/en-US/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li> + <li><a href="/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li> + <li><a href="/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li> + <li><a href="/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li> + <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li> + <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li> + <li><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">navigator.onLine and offline events</a></li> + <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li> +</ul> + +<h2 id="সাহায্য_পাওয়া"><a name="Simulator-help"></a>সাহায্য পাওয়া</h2> + +<p><span style="line-height: 1.5;">যদি আপনার কোন প্রশ্ন থাকে, তাহলে আমাদের </span><a href="https://lists.mozilla.org/listinfo/dev-developer-tools" style="line-height: 1.5;">dev-developer-tools মেইলিং লিস্ট</a><span style="line-height: 1.5;"> এ মেইলের মাধ্যমে জিজ্ঞেস করার চেষ্টা কর্মরতে পারেন। অথবা <a href="irc://irc.mozilla.org/#devtools" style="line-height: 1.5;">irc.mozilla.org</a> এর </span><a href="irc://irc.mozilla.org/#devtools" style="line-height: 1.5;">#devtools</a> চ্যানেলেও প্রশ্ন করতে পারেন।</p> + +<h3 id="যেভাবে_ভারবোস_লগিং_সক্রিয়_করবেন"><a name="Simulator-verbose-logging"></a>যেভাবে ভারবোস লগিং সক্রিয় করবেন</h3> + +<p><a href="/en-US/docs/Tools/Web_Console">ওয়েব কনসোল</a> এ আপনি আপনার অ্যাপ থেকে লগ করা মেসেজ গুলো দেখতে পাবেন। এগুলো আপনি <a href="/en-US/Firefox_OS/Using_the_App_Manager#Debugging">অ্যাপ ম্যানেজার</a> ব্যবহার করে আপনার অ্যাপ এর সাথে যুক্ত করতে পারবেন। যদি আপনি অ্যাপ চালু হওয়ার মুহূর্তের মেসেজগুলো ধরতে চান, অর্থাৎ কনসোল কানেক্ট হওয়া এবং কাজ শুরু করার ঠিক আগ মুহূর্তের মেসেজ গুলো পেতে চাইলে আপনি সিমুলেটরের মধ্যে ভারবোস লগিং চালু করতে পারেন।</p> + +<p>about:config ভিজিট করে নতুন প্রেফারেন্স তৈরি করুন। সিমুলেটরের প্রত্যেক ভার্শনের জন্য preference name আলাদা হবেঃ</p> + +<ul> + <li>ফায়ারফক্স ওএস ১.৩ এর জন্য extensions.fxos_1_3_simulator@mozilla.org.sdk.console.logLevel</li> + <li>ফায়ারফক্স ওএস ১.২ এর জন্য extensions.fxos_1_2_simulator@mozilla.org.sdk.console.logLevel</li> +</ul> + +<p>এটাকে স্ট্রিং ভ্যালু "all" এ সেট করুন, অ্যাড-অন ম্যানেজারে গিয়ে অ্যাড-অন টিকে ডিজঅ্যাবল করে আবার এনাবল করুন। এরপর থেকে সিমুলেটরের অতিরিক্ত অপারেশন সম্পর্কিত মেসেজ গুলো <a href="/en-US/docs/Tools/Browser_Console">ব্রাউজারের কনসোলে</a> দেখা যাবে।</p> 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 +--- +<p>ফায়ারফক্স ওএসে কাজ করা কিংবা এর ডেভেলোপ করার জন্য ফায়ারফক্স ওএসের মত পরিবেশ পাওয়ার তিনটি উপায় আছে। এগুলো হলো ফায়ারফক্স ওএস সিমুলেটর ,ফায়ারফক্স ওএস ইমুলেটর এবং ফায়ারফক্স ওএস সমর্থন করে এমন ডিভাইসে ফায়ারফক্স ওএস।</p> +<p>ব্যবহারকারীরা সাধারণত ফায়ারফক্স ওএস শুধু ডিভাইসের মাধ্যমেই পাবে কিন্তু সিমুলেটর অথবা ইমুলেটরের মাধ্যমে ফায়ারফক্স ওএস ডেভেলোপ করতে আগ্রহীদের একটি বিকল্প সুযোগ তৈরি করে দেয়। এধরণের বেশিরভাগ ডেভেলাপারদের জন্য ইমুলেটর অথবা সিমুলেটরই যথেষ্ট হবে কিন্তু এর সাথে এটাও মনে রাখা প্রয়োজন যে আসল ডিভাইসে যেরকম আচরন পাওয়া যাবে তার তুলনায় সিমুলেটর অথবা ইমুলেটর থেকে হয়তো <span style="line-height: 1.5;">অসম্পূর্ণ বা ভিন্ন আচরন পাওয়া যাবে। তাই , নিচে এগুলোর বিবরন দেয়া আছে যার মাধ্যমে আপনি জেনে নিতে পারেন তিনটির মধ্য থেকে কোনটি আপনার জন্য ভাল। </span></p> +<h2 id="ফায়ারফক্স_ওএস_সিমুলেটর">ফায়ারফক্স ওএস সিমুলেটর</h2> +<p>ফায়ারফক্স ওএস সিমুলেটর হচ্ছে ফায়ারফক্স ব্রাউজারের জন্য তৈরি করা একটি অ্যাড-অন। এটি মূলত অ্যাপ ডেভেলাপারদের কাজ করার সুবিধার জন্য তৈরি হয়েছে। </p> +<h3 id="সুবিধাসমূহঃ">সুবিধাসমূহঃ</h3> +<ul> + <li>তিনটি অপশনের মধ্যে এটিকেই এখন পর্যন্ত সব থেকে সহজে এবং দ্রুততম সময়ে সেট আপ করা যায়। </li> +</ul> +<h3 id="অসুবিধাসমূহঃ">অসুবিধাসমূহঃ</h3> +<ul> + <li>তিনটি অপশনের মধ্যে সবচেয়ে কম সম্পূর্ণ হওয়া উপাদান।</li> + <li>সিমুলেটর সমর্থন করে না এমন উপাদান হলো (খুব তাড়াতাড়ি যুক্ত হবে)।</li> +</ul> +<h2 id="ডেস্কটপ_ফায়ারফক্স_ক্লায়েন্ট">ডেস্কটপ ফায়ারফক্স ক্লায়েন্ট</h2> +<p><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট</a> আপনাকে গেকো নির্ভর পরিবেশে আসল ডিভাইসের মত করে গাইয়া এবং ওয়েব অ্যাপস চালাতে দেয়। এটি <em>B2G ডেস্কটপ ক্লায়েন্ট </em> নামে ও পরিচিত। এটি ডিভাইস হার্ডওয়ারের মত না, তাই ডিভাইস এপিআই পরীক্ষা করার জন্য এটি পর্যাপ্ত নয় , এমনকি আসল ডিভাইসে পরীক্ষা করার মত বিষয়ের বিকল্পও এটি নয়। তারপরেও , এতে কনটাক্ট এবং সেটিংস এপিআই এর মত এমন কিছু এপিআই রয়েছে যা ফায়ারফক্সে ও পাওয়া যায় না। সেজন্য , যখন আপনি অ্যাপ ডেভেলাপমেন্ট করতবেন কিংবা গাইয়া ইউজার ইন্টারফেসে কাজ করবেন , তখন এটি আপনার জন্য অনেক সহায়ক হবে। </p> +<p><span style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">ফায়ারফক্স ওএস ইমুলেটর</span></p> +<p>ফায়ারফক্স ওএস ইমুলেটর এমন একটি প্রোগ্রাম যা ফায়ারফক্স ওএস এর সোর্স কোড থেকে তৈরী হয়েছে এবং এটি ডেক্সটপ মেশিনে চলে। সাধারণত যে সব ডেভেলপারদের সিমুলেটরের চেয়েও বেশি পরিপূর্ন মানের ফায়রাফক্স ওএসের পরিবেশ প্রয়োজন হয়, তারা কাজ করার জন্য এটিকে নির্বাচন করবেন। (সম্ভব হলে অপেরা মোবাইল ইমুলেটরটি দেখুন<span style="line-height: 1.5;">)</span></p> +<h3 id="সুবিধাসমূহঃ_2">সুবিধাসমূহঃ</h3> +<ul> + <li>এইটি অনেকটা সত্যিকারের ডিভাইসের মত। </li> + <li>রিমোট ডিবাগিং এর মাধ্যমে যেকোন কাজে ব্যবহার করা যায় ,পরীক্ষা করা যায়।</li> + <li>পরীক্ষা করার কাজে সেলেনিয়ামের মাধ্যমে প্রবেশ করা যাবে ।</li> + <li>পূর্বনির্ধারিত প্রোফাইলের সাহায্যে কনফিগার করা যায় (যেমন স্ক্রীন সাইজ,যোগ্যতা ইত্যাদি)</li> + <li>এটি সিমুলেটরের চেয়েও বেশি কিছু সুবিধা দিতে পারে (খুব তাড়াতাড়ি যুক্ত হবে)। </li> +</ul> +<h3 id="অসুবিধাসমূহঃ_2">অসুবিধাসমূহঃ</h3> +<ul> + <li>ফায়ারফক্স ওএস এর মত পরিবেশ তৈরি করা এবং এর সোর্স তৈরি করা - দুইটি কাজই অনেক রিসোর্স এবং সময় সাপেক্ষ এবং কাজ করার সময় এবং মাঝে মাঝেই এর অনেক সমস্যার সমাধান করা লাগে। দেখা দেয় তাছাড়া প্রসেসের বিভিন্ন পর্যায়ে এর ট্রাবলশুটিং করার প্রয়োজন পড়ে। (তবে এটি যদি ইতোমধ্যেই তৈরি হয়ে থাকে এবং অপেরা মোবাইল ইমুলেটরের মত ডাউনলোড বাইনারী হয়ে থাকে, তবে তা ভিন্ন কথা)</li> + <li>ডিভাইসের পার্থক্যের তালিকা (খুব তাড়াতাড়ি যুক্ত হবে)।</li> +</ul> +<h2 id="কোন_ডিভাইসে_ফায়ারফক্স_ওএস">কোন <span style="font-size: 2.142857142857143rem;">ডিভাইসে</span><span style="font-size: 2.142857142857143rem;"> ফায়ারফক্স ওএস </span></h2> +<p>সাধারণত সে সব ডেভেলাপার ফায়ারফক্স ওএস এর কোডের মূলে (গঙ্ক , গেকো) কাজ করছেন অথবা যে সব ডেভেলাপার তাদের অ্যাপসগুলো রিয়েল ডিভাইসে পরীক্ষা করতে চান তাদের জন্য এটা সবচেয়ে ভালো উপায়। </p> +<h3 id="সুবিধাসমূহঃ_3">সুবিধাসমূহঃ</h3> +<ul> + <li>সব ধরণের এপিআই এইখানে পাওয়া যাবে - এইটি মূলত এটির আসল বিষয়।</li> + <li>সিমুলেটরের চেয়েও বেশি সুবিধা এখানে আছে (খুব তাড়াতাড়ি যুক্ত হবে)।</li> +</ul> +<h3 id="অসুবিধাসমূহঃ_3">অসুবিধাসমূহঃ</h3> +<ul> + <li>এটা তৈরি করতে অনেক সময় ও রিসোর্স প্রয়োজন এবং প্রায় সময়ই ের বিভিন্ন সমস্যার সমাধান করার প্রয়োজন হয়।</li> + <li>তিনটি অপশনের মধ্যে এটি প্রয়োগ করতেই সবচেয়ে বেশি বাধার মুখোমুখি হতে হয় কেননা এটি করতে হলে ডেভেলোপারের একটি ডিভাইস থাকতে হবে যা তারা স্বেচ্ছায় ফ্ল্যাশ করতে রাজি থাকবেন। </li> + <li>আসল ডিভাইস এর ডিবাগিং সিমুলেটর বা ইমুলেটর এ ডিবাগিং এর তুলনায় কঠিন হতে পারে , যা মূলত কি ধরনের সমস্যা তার উপর নির্ভর করে। </li> + <li>আরো (খুব তাড়াতাড়ি যুক্ত হবে)।</li> +</ul> 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 +--- +<div class="summary"> + <p><a href="https://treeherder.mozilla.org/" title="https://treeherder.mozilla.org/">Treeherder</a> হল সেটাই যেখানে বিল্ড বোটে ধারাবাহিক কাজ করার জন্য টেস্ট রেসাল্ট রান করার টেস্ট রিপোর্ট দেয়া হয়ে থাকে। আমরা সকল চেষ্টা এবং ট্রাঙ্ক শাখা এর সাথে b2g-inbound,মোযিলা সেন্ট্রাল,এবং Firefox OSএর প্রকাশ পাওয়া শাখার বিপক্ষে টেস্ট বিল্ড করি এবং রান করি।এই অনুচ্ছেদ আমাদের একটী বিস্তারিত ব্যাখা দিবে ট্রিহারডার এর সম্পর্কে এবং উপকারী টারমেনোলজী প্রদান করবে।</p> +</div> +<div class="note"> + <p><strong>নোটঃদেখুন </strong><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Test_Execution_Chart" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Test_Execution_Chart">Test Execution Chart</a> টেস্ট কোথায় বেশি করে রান করে তা খুজে বের করার জন্য।</p> +</div> +<h2 id="Gaia-Try_Git_রিকুয়েস্ট_পুল_করে_এবং_Treeherder">Gaia-Try: Git রিকুয়েস্ট পুল করে এবং Treeherder</h2> +<p>mozilla-b2g এর গায়া রেস্পেটরির বিপক্ষে যখন একটি পুল রিকুয়েস্ট করে থাকে , Mozilla সেই শাখা তুলে নেয় এবং রান করে থাকে Gaia suite এর টেস্ট ইহার বিপক্ষে ।কিভাবে Travis কাজ করে তা খুব একই রকম এর সাথে।</p> +<p> <a href="https://github.com/try-server-hook">Try Server Hook</a> আপনার পুল্ল রিকুয়েস্টে একটি লিঙ্কের সাথে Treeherder জবে কমেন্ট করে থাকবে যা আপনার পুল্ রিকুয়েস্টের বিপক্ষে কাজ করে থাকে।এখান থেকে আপনি আপনার প্যাচের স্থায়িত্ব পুনরায় দেখতে পারেন এবং সীমা টানার জন্য এটা উপযোগী।</p> +<h2 id="Firefox_OS_গঠন_Device_এবংand_DesktopB2G_এর_জন্য">Firefox OS গঠন Device এবংand DesktopB2G এর জন্য</h2> +<p>প্রতিটি ক্ষেত্রে, Treeherder উদ্যোগ নিবে কিছু ভিন্ন ডিভাইসের জন্য বিল্ড তৈরি করতে,Hamachi এবং Flameএবং আরো desktopb2g বিল্ড যা linux64 এবং macos64 এর জন্য।</p> +<h2 id="GIP_Device_টেস্ট_করে_Jenkins_রিপোর্ট_করতে">GIP Device টেস্ট করে Jenkins রিপোর্ট করতে</h2> +<p>বিভিন্ন কারণে (বিশেষ করে টেস্ট রান টাইমে) ডিভাইস টেস্টটি Treeherder এর সাথে সঠিক ভাবে পরিষ্কার হতে পারেনা।এর পরিবর্তে,একটি বিদ্যমান Jenkins কঞ্জিউম Treeherder এর বিল্ড এবং ডিভাইস টেস্ট রান করে থাকে,কিন্তু কম কম্পন এবং কম ট্রি গুলো এর সাথে।এই ফলাফল এবং আর্টিফ্যাক্টস আউটপুট রিপোর্ট এর মত এবনহ লুকানো লগক্যাট পুনরায় রিপোর্টেড।আপনার Treeherde এর "Show hidden jobs" বাটনে ক্লিক করুন রেসাল্ট দেখতে।</p> +<h2 id="Treeherder_Try_jobs_রান_করা_Gaia_গঠন_এর_বিপক্ষে">Treeherder Try jobs রান করা Gaia গঠন এর বিপক্ষে</h2> +<p>গেটকো প্যাচ টেস্ট করার জন্য Firefox OS এর বিপক্ষে এবংগায়া আপনি Try তে স্বাভাবিক ভাবে পুশ করতে পারেন কিন্তু ব্যবহার করেন সঠিক ট্রাইচুসার সিন্টেক্স যা Firefox OS এবং গায়া টেস্ট রান করা নিশ্চিত করে থাকে।একটি বৃদ্ধিকারক উপকারী হল আপনি গেটকো এবং গায়া প্যাচ টেস্ট করতে পারেন <a href="https://wiki.mozilla.org/ReleaseEngineering/TryServer#Using_a_custom_Gaia">pointing Try to your own Gaia fork </a>এর দ্বারা একযোগে এহা ব্যবহার করে ।যদি আপনি সরাসরি এটা ব্যবহার করতে না চান ,আপনি <a href="https://github.com/mozilla/moz-git-tools">moz-git-tools</a> ব্যবহার করতে পারেন।<br> + <br> + যদি আপনি কখন Try তে পুশ না করেন,আপনাকে প্রথমে <a href="https://wiki.mozilla.org/ReleaseEngineering/TryServer#How_to_push_to_try">How to push to Try</a> এর প্রধান ধারনা পড়তে হবে।<br> + <br> + সকল ট্রাই জবস এর মত,এগুলোর দরকার লেভেল ১ <a href="http://www.mozilla.org/hacking/commit-access-policy/">commit access</a>।যদি আপনি সকল টেস্ট B2G Desktop বিল্ড রান করতে চান আপনার কাস্টম গায়া ফর্কের সাথে,সঠিক ট্রাইচুসার সিন্টেক্স হবে নিচের মতঃ</p> +<pre>try: -b o -p linux64_gecko,linux32_gecko,macosx64_gecko -u all -t none</pre> +<h2 id="Treeherder_glossary">Treeherder glossary</h2> +<p>এই শখা কিছু সাধারন কাজ এবং সিন্টেক্স এর লিস্ট করে থাকে।</p> +<h3 id="Builds_এর_ধরণ">Builds এর ধরণ</h3> +<ul> + <li><strong><span class="os b2g-linux32">"B2G Desktop</span> <platform>" rows: </strong>এটা সুপারিশ করে থাকে b2g desktop বিল্ডে।</li> + <li><strong><span class="os b2g-device-image">"B2G Device Image" row</span></strong>: এগুলো গঠন করা হয়ে থাকে b2g এর ছবি এর জন্য ,ডিভাইস(যেমন ফ্ল্যাম)এবং ইমুলেটর।</li> +</ul> +<h3 id="টেস্টের_ধরন">টেস্টের ধরন</h3> +<ul> + <li><strong>Gu</strong>: এগুলো হল <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">Gaia unit tests</a></li> + <li><strong>Gij</strong>: এগুলো হল <a href="/en-US/docs/Trash/Gaia_integration_tests">Gaia integration tests</a> যা লেখা হয়ে থাকে JavaScript তে.</li> + <li><strong>Gip</strong>: এগুলো হল <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/gaia-ui-tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/gaia-ui-tests">Gaia UI tests</a> যা লেখা হয়ে থাকে Python তে।</li> + <li><b>M</b>: এগুলো হল <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Mochitests" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Mochitests">Mochitests</a>. এগুলর সাথে কিছু নাম্বার সংযুক্ত আছে যাতে তারা চাঙ্কে টেস্ট দেখা যায় ।</li> + <li><b>R, J and C</b>: এগুলো হল <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Reftests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Reftests">Reftests</a>, JSreftests, এবং Crashtests। এগুলোর নাম্বার চাঙ্কের সাথে সংযুক্ত আছে।</li> + <li><b>X</b>:এগুলো হল <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/XPCShell" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/XPCShell">XPCShell</a> টেস্ট।</li> + <li><b>Mn</b>: এগুলো হল <a href="https://developer.mozilla.org/en/Marionette" title="https://developer.mozilla.org/en/Marionette">Marionette</a> এর উনিট টেস্ট (Marionette framework নিজেই টেস্ট করে থাকে)।</li> + <li><strong>Mnw</strong>:Marionette এর উনিট এবংWebAPI টেস্টের এর মধ্যে এগুলো।</li> +</ul> +<h2 id="হ্যাকিং_Treeherder_এর_উপরে">হ্যাকিং Treeherder এর উপরে</h2> +<p><a href="https://wiki.mozilla.org/Sheriffing/TBPL">https://wiki.mozilla.org/Sheriffing/TBP</a> তে কিছু ডেভেলপমেন্ট নোট এবং সোর্স কোড আছে।</p> 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 +--- +<div class="summary"> + <p>ফায়ারফক্স অপারেটিং সিস্টেম ব্যবহারের সময় আপনি যেসব সাধারন সমস্যার সম্মুখীন হতে পারেন, তার সমাধানের উপায় এই নিবন্ধটিতে বর্ণনা করা হয়েছে। আপনি চাইলে এখানে আরও তথ্য যোগ করতে পারেন।</p> +</div> +<div class="note"> + <p><strong>লক্ষ্য করুনঃ</strong> আপনি আপনার ডিভাইসের জন্য <a href="/bn-BD/docs/Mozilla/Firefox_OS/Installing_on_a_mobile_device#Configuring_the_udev_rule_for_your_device" title="en-US/docs/Mozilla/Firefox_OS/Installing_on_a_mobile_device#Configuring_the_udev_rule_for_your_device">udev সেটিংস কনফিগার</a> করেছেন, এটা ধরে নিয়ে এই নির্দেশনা গুলো দেয়া হয়েছে।</p> +</div> +<h2 id="নেটওয়ার্ক_সংশ্লিষ্ট_সমস্যা">নেটওয়ার্ক সংশ্লিষ্ট সমস্যা</h2> +<p>যদি আপনার ওয়াই-ফাই নেটওয়ার্কে সংযুক্ত হতে সমস্যা হয়, তবে আপনি আপনার ডিভাইস থেকে ওয়াই-ফাই কনফিগারেশন ফাইলটি মুছে ফেলতে পারেন। এটা করার জন্য আপনাকে লিখতে হবেঃ</p> +<pre>adb shell rm /data/misc/wifi/wpa_supplicant.conf +adb reboot +</pre> +<h2 id="ফোন_ব্রিক_হয়ে_গেলে">ফোন ব্রিক হয়ে গেলে</h2> +<p>যদি আপনি ফোনটি ব্রিক করে ফেলেন, যেমনঃ ভুল ইমেজ ফ্ল্যাশ করার চেষ্টা করছেন, বুটলোডার পুনরায় চালু করতে চেষ্টা করছেন ( আপনার ফোনের উপর নির্ভর করেঃ ফাস্টবুট বা হেইমডাল)। নির্দিষ্ট সিকোয়েন্সটি ফোনের উপর নির্ভর করে পরিবর্তিত হয়। ইউএসবি কেবল খুলে, ব্যাটারি খুলে আবার লাগিয়ে চেষ্টা করতে পারেন। ইউনাগি এবং ওটোরো এর জন্য পাওয়ার এবং ভলিউম বাড়ানোর বাটন একসাথে কয়েক সেকেন্ডের জন্য চেপে ধরে থাকুন, যতক্ষণ না স্প্ল্যাশ স্ক্রীন দেখা যাচ্ছে। ফাস্টবুট ডিভাইস (অথবা কিছু সামসাং ফোনের জন্য হেইমডাল) ব্যবহার করে নিশ্চিত হোন যে, আপনার ফোন এখন বুটলোডার মোডে আছে। যখন আপনি দেখতে পাবেন, যে আপনার ফোন ফাস্টবুট ডিভাইস ব্যবহার করছে, আপনি তখন ইউনাগি এর জন্য আপনার ইমেজ ফ্ল্যাশ করতে <code>./flash.sh ব্যবহার করতে পারেন।</code></p> +<h2 id="লাল_বাতি_জ্বললে_নিভলে_(ওটোরোইউনাগি)">লাল বাতি জ্বললে নিভলে (ওটোরো/ইউনাগি)</h2> +<p>এর মানে হচ্ছে ফোন বুট করার জন্য যে পরিমান চার্জ থাকা প্রয়োজন, তা নেই। আপনি ফোনটিকে কিছু সময়ের জন্য (যতক্ষণ না লাল বাতি জ্বলা একেবারে থেমে যায়) চার্জে দিতে পারেন, অথবা ইউএসবি কেবল খোলার পর ব্যাটারি খুলে, তারপর আবার ইউএসবি কেবল লাগিয়ে ব্যাটারি লাগিয়ে দেখতে পারেন।</p> 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 +--- +<div class="summary"> +<p>অ্যাপ ম্যানেজার হল ফায়ারফক্সের ডেস্কটপ সংস্করণের জন্য একটি নতুন টুল, যা সরাসরি ব্রাউজার থেকেই আপনার ফায়ারফক্স ওএস ফোন কিংবা ফায়ারফক্স ওএস সিম্যুলেটরে HTML5 ওপেন ওয়েব অ্যাপ পরীক্ষা, ডেপ্লয় এবং ভুল বের করতে সাহায্য করবে <span style="line-height: 1.5;">অনেকগুলো সাহায্যকারী টুলসের মাধ্যমে</span><span style="line-height: 1.5;">।</span></p> + +<p><span style="line-height: 1.5;">এই অ্যাপ ম্যানেজারটি যেসব ডেভেলপার ১.২ বা পরের সংস্করণের জন্য অ্যাপ বানাতে চান তাদের জন্যই। আপনি যদি ১.১ সংস্করণের জন্য অ্যাপ বানাতে চান তাহলে <a href="/bn-BD/docs/Tools/Firefox_OS_1.1_Simulator">ফায়ারফক্স ওএস ১.১ সিমুলেটর</a> দেখুন।</span></p> +</div> + +<p style="text-align: center;">{{EmbedYouTube("z1Bxg1UJVf0")}}</p> + +<p>অ্যাপ ম্যানেজারটি যেসব অংশ থাকেঃ</p> + +<ul> + <li>একটি <a href="#Apps_panel"><em>অ্যাপস প্যানেল</em></a>, যা লোকাল অ্যাপ (যে সকল অ্যাপের সোর্সকোড আপনার কম্পিউটারে আছে) এবং বাইরে হোস্ট করা অ্যাপকে প্যাকেজ করে আপনার ডিভাইস কিংবা সিম্যুলেটরে ইন্সটল করতে সাহায্য করে এবং বিভিন্ন টুলের সাহায্য ভুল সংশোধন বা ডিবাগ করতে সাহায্য করে।</li> + <li>একটি <a href="#Device_panel"><em>ডিভাইস প্যানেল</em></a>, যা কম্পিউটারের সঙ্গে সংযুক্ত ফায়ারফক্স ওএস ডিভাইস সংক্রান্ত বিবিধ তথ্যাদি, ফায়ারফক্স ওএস সংস্করণ, ডিভাইসটির বিভিন্ন ডিভাইস API ব্যবহারের জন্য বিবিধ পার্মিশন বা অনুমতি এবং ইন্সটল করা অ্যাপের তালিকা ইত্যাদি প্রদর্শন করে।</li> + <li><a href="/en-US/docs/Tools_Toolbox"><em>টুলবক্স</em></a>, যা একটি ডেভেলপার টুলের সংকলন (ওয়েব কনসোল, ইন্সপেক্টর, ডিবাগার ইত্যাদি) যেগুলো অ্যাপস প্যানেলের মাধ্যমে ডিভাইস বা সিম্যুলেটরে চালু কোন অ্যাপের সঙ্গে সংযুক্ত হয়ে বিবিধ রকমের ডিবাগিং সংক্রান্ত কাজ করতে সাহায্য করে।</li> +</ul> + +<h2 id="দ্রুত_সেটআপ_করাঃ"><a name="Configuring_device">দ্রুত সেটআপ করাঃ</a></h2> + +<p>এই বিভাগটি দ্রুত আপনাকে কাজ শুরু করার উপযোগী করে তোলার জন্য ডিজাইন করা হয়েছে। যদি আপনার বিস্তারিত তথ্যের প্রয়োজন হয়, তবে সরাসরি {{ anch("Device and system configuration") }} অংশে চলে যেতে পারেন। এবং {{ anch("Troubleshooting") }} অংশটিও দেখতে পারেন। এটি আপনাকে সম্ভাব্য সমস্যা সমাধানে সহায়তা করবে।</p> + +<ol> + <li>নিশ্চিত হয়ে নিন যে আপনার ফায়ারফক্স ডেস্কটপ ২৬ বা তার পরবর্তী সংস্করণ ইন্সটল করা আছে।</li> + <li>অ্যাপ ম্যানেজার চালু করুন (URL বারে <code>about:app-manager</code> লিখে এন্টার চাপতে হবে)</li> + <li>যদি আপনার বাস্তব ডিভাইস না থাকেঃ + <ol> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">ফায়ারফক্স ওস সিমুলেটর ইন্সটল করুন।</a></li> + <li>অ্যাপ ম্যানেজারের নিচের টুলবারে <em>Start Simulator</em> লেখাটির উপর ক্লিক করুন। তারপর আপনার ইন্সটল করা সিমুলেটরের নামের উপর ক্লিক করুন।</li> + </ol> + </li> + <li>যদি আপনার একটি বাস্তব ডিভাইস থাকেঃ + <ol> + <li>নিশ্চিত করুন আপনার ডিভাইসে ফায়ারফক্স ওএস ১.২ বা তার পরবর্তী সংস্করণ ইন্সটল করা আছে।</li> + <li>উইন্ডোজ কম্পিউটারে আপনার ফোন নির্মাতার দেয়া ড্রাইভার গুলো ইন্সটল করে নিন।</li> + <li>আপনার ডিভাইসের সেটিংসে গিয়ে স্ক্রিনলক নিষ্ক্রিয় করে নিন (<code>Settings > <code>Screen Lock</code></code>) এবং রিমোট ডিবাগিং চালু করে নিন (<code>Settings > Device information > More information > Developer</code>)</li> + <li>ফায়ারফক্স ডেস্কটপে <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">ADB হেল্পার</a> অ্যাড-অন ইন্সটল করে নিন।</li> + <li>ডিভাইসকে পিসির সাথে একটি USB কেবলের মাধ্যমে যুক্ত করুন।</li> + <li>অ্যাপ ম্যানেজারের নিচের টুলবারে আপনার ডিভাইসের নাম দেখতে পাবেন। ক্লিক করুন।</li> + </ol> + </li> + <li>বটম বারটি "Connected to: xxx" দেখাবে।</li> + <li><em>Apps</em> প্যানেলে ক্লিক করুন এবং একটি অ্যাপ (প্যাকেজ অথবা হোস্টেড) অ্যাড করুন।</li> + <li><em>Refresh</em> বাটন আপনার অ্যাপ কে যাচাই করবে এবং সিমুলেটর/ডিভাইসে ইন্সটল করবে।</li> + <li><em>Debug</em> বাটন চলতি অ্যাপটির সাথে ডেভেলপার টুলসকে যুক্ত করবে।</li> + <li><strong>আপনার সমস্যা হলে {{ anch("Troubleshooting") }} বিভাগটি দেখতে পারেন।</strong></li> +</ol> + +<h2 id="ডিভাইস_এবং_সিস্টেম_কনফিগারেশন">ডিভাইস এবং সিস্টেম কনফিগারেশন</h2> + +<p>অ্যাপ ম্যানেজার ব্যবহারের সময় সর্বপ্রথম যে কাজটি করতে হবে, তা হলঃ আপনার সিস্টেম এবং ফোন সঠিকভাবে সেটআপ করা হয়েছে। এই অংশটিতে সকল আবশ্যক ধাপের বর্ণনা করা হয়েছে।</p> + +<h3 id="ফায়ারফক্স_১.২_আবশ্যক">ফায়ারফক্স ১.২+ আবশ্যক</h3> + +<p>নিশ্চিত হয়ে নিন, আপনার ডিভাইসে ফায়ারফক্স ওএস ১.২/বুট-টু-গেকো ১.২ বা তার পরবর্তী সংস্করণ রয়েছে। আপনি কোন সংস্করণ ব্যবহার করছেন জানতে <code>Settings > Device Information > Software এ যান।</code></p> + +<p>যদি আপনার উন্নত কোন সংস্করণ ইন্সটল করা না থাকে, তাহলে ফোনের উপর নির্ভর করে, হয় আপনাকে ফায়ারফক্স ১.২ এর একটি সহজলভ্য নাইটলি বিল্ড ইন্সটল করতে হবে; অথবা সোর্স কোড থেকে নিজে বিল্ড ও কনফিগার করে নিতে হবে।</p> + +<p>বর্তমানে যেসব বিল্ড পাওয়া যাচ্ছেঃ</p> + +<ul> + <li><a href="http://downloads.geeksphone.com/">গিকসফোন কিওন/পিক বিল্ড সমূহ</a> (এগুলো ব্যবহার সম্পর্কে বিশদ জানতে <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">ফায়ারফক্স ওএস ডেভেলপার প্রিভিউ ফোন/গিকস ফোন হালনাগাদ এবং টুইক করা</a> পড়ুন)</li> + <li>আরও তথ্য আসবে ভবিষ্যতে।</li> +</ul> + +<p>আপনার নিজস্ব ফায়ারফক্স ওস ১.২ ডিস্ট্রিবিউশন তৈরি করার জন্য <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">ফায়ারফক্স ওএস বিল্ড এবং ইন্সটল</a> এর নির্দেশনা গুলো পড়তে পারেন। তবে শুরুতে <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">ফায়ারফক্স ওএস বিল্ডের পূর্বশর্ত সমূহ</a> দেখে নেবেন।</p> + +<h3 id="রিমোট_ডিবাগিং">রিমোট ডিবাগিং</h3> + +<p>এরপর, আপনাকে ফায়ারফক্স ওএস এ রিমোট ডিবাগিং চালু করতে হবে। এটি করার জন্য <code>Settings > Device information > More information > Developer</code> এ যান এবং Remote Debugging চেক বক্সে টিক দিন।</p> + +<h3 id="Adb_Helper_Add-on" name="Adb_Helper_Add-on">ADB বা ADB হেল্পার</h3> + +<p>ডিভাইস-কম্পিউটার সংযোগ এবং যোগাযোগের জন্য এই প্রক্রিয়াটি অ্যান্ড্রয়েড ডিবাগ ব্রিজ (এডিবি) ব্যবহার করে। এডিবি চালু করার জন্য দুইটি উপায় রয়েছেঃ</p> + +<ul> + <li> + <p>ফায়ারফক্সকে এডিবি নিয়ন্ত্রন করতে দেয়া (প্রস্তাবিত)। <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Iএডিবি হেল্পার অ্যাড-অন ইন্সটল করুন</a>, এটা প্রক্রিয়াটিকে সহজ করে। এটা ইন্সটল করা থাকলে এডিবি ইন্সটল করার কোন প্রয়োজন নেই এবং <code>adb forward</code> কমান্ডও টাইপ করার প্রয়োজন নেই। অ্যাড-অন টি সব কিছু নিয়ন্ত্রন করবে।</p> + <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;" title="https://addons.mozilla.org">ADB হেল্পার অ্যাড-অন ডাউনলোড</a></li> + <li>ম্যানুয়ালি এডিবি ব্যবহার করা। এটা আপনার কম্পিউটারে ইন্সটল করতে হবে। ডাউনলোড করে <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">এডিবি ইন্সটল</a> এ যেভাবে বর্ণনা করা হয়েছে, সেভাবে <code>adb</code> ইন্সটল করে নিন। আপনার টার্মিনালে নিচের কমান্ড লিখে পোর্ট ফরওয়ার্ডিং চালু করে নিতে হবেঃ + <pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> + উল্লেখ্য যে প্রতিবার আপনি আপনার ফোন রিস্টার্ট করবেন বা প্লাগ খুলে আবার লাগাবেন, ততবার আপনাকে উপরের কাজটি করতে হবে।</li> +</ul> + +<div class="note"> +<p><strong>দ্রষ্টব্যঃ </strong>যদি আপনি এডিবি হেল্পার ইন্সটল করে থাকেন, তবে উপরের কমান্ড রান করতে হবেনা।</p> +</div> + +<h2 id="অ্যাপ_ম্যানেজারে_ডিভাইস_যুক্ত_করা">অ্যাপ ম্যানেজারে ডিভাইস যুক্ত করা</h2> + +<p>সকল কনফিগারেশনের কাজ শেষ হওয়ার পর, এখন সময় হয়েছে ডিভাইসকে কম্পিউটারের সাথে যুক্ত করার এবং অ্যাপ ম্যানেজার চালু করার।</p> + +<ol> + <li>ইউএসবি কেবলের মাধ্যমে ডিভাইসকে কম্পিউটারের সাথে যুক্ত করুন।</li> + <li>স্ক্রিন লক ডিজ্যাবল করে নিন। এজন্য <code>Settings থেকে Screen Lock</code> নির্বাচন করুন এবং <code>Lock Screen</code> নামের বক্স থেকে টিক চিহ্নটি তুলে দিন। এটা জরুরি একটি কাজ; কারন যখন স্ক্রিন লক হয়ে যায়, তখন ফোনের সাথে কম্পিউটারের সংযোগ বিচ্ছিন্ন হয়ে যায়। আর সংযোগ বিচ্ছিন্ন হয়ে গেলে ডিবাগিং করা যাবেনা।</li> + <li>অ্যাপ ম্যানেজার চালু করুন — ফায়ারফক্স ডেস্কটপে <code>Tools মেনু থেকে Web Developer > App Manager</code> অপশন নির্বাচন করুন। অথবা ইউআরএল বারে <code>about:app-manager</code> টাইপ করুন।</li> + <li>অ্যাপ ম্যানেজার ট্যাবের নিচে আপনি একটি "কানেকশন স্ট্যাটাস বার" দেখতে পাবেন (নিচের স্ক্রিনশট দেখুন)। "Connect to localhost:6000" বাটনে ক্লিক করে আপনি আপনার ডিভাইস যুক্ত করতে পারবেন।</li> + <li>যদি এটা সফল ভাবে কাজ করে, তাহলে আপনার ডিভাসে একটি প্রম্পট আসবেঃ "An incoming request to permit remote debugging connection was detected. Allow connection?"। OK বাটনে স্পর্শ করুন (কিছু কিছু ক্ষেত্রে প্রম্পট টি দেখার জন্য আপনাকে পাওয়ার বাটন চাপা লাগতে পারে)। কানেকশন স্ট্যাটাস বার আপডেট হবে এবং "Connected to B2G" প্রদর্শন করবে, আর সাথে একটি ডিসকানেক্ট বাটন থাকবে, যাতে আপনি সংযোগ বিচ্ছিন্ন করতে চাইলে করতে পারেন।</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6263/connection-status.png" style="width: 600px; height: 30px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p>খেয়াল করুনঃ কানেকশন স্ট্যাটাস বারে থাকা অন্যান্য বাটনগুলো আপনাকে অ্যাপ ম্যানেজারের সাথে সিমুলেটরকে সংযুক্ত করার সুবিধা দেয়। এগুলো আমরা পরবর্তীতে নিচে আলোচনা করবো, এবং যে পোর্টে আমাদের ফোনের সাথে যোগাযোগের কাজটি হয়, তা পরিবর্তন করা শিখবো। যদি আপনি পোর্ট পরিবর্তন করেন, তাহলে উক্ত পোর্টের জন্য পোর্ট ফরওয়ার্ডিংও চালু করতে হবে। পোর্ট ফরওয়ার্ডিং সংক্রান্ত তথ্য উপরের {{anch("Enable port forwarding")}} অংশে পাবেন।</p> +</div> + +<h2 id="একটি_ফায়ারফক্স_ওএস_সিমুলেটর_অ্যাড-অন_ব্যবহার_করা"><a name="Simulator">একটি ফায়ারফক্স ওএস সিমুলেটর অ্যাড-অন ব্যবহার করা</a></h2> + +<p>অ্যাপ ম্যানেজারের সাথে ব্যবহার করার জন্য যদি আপনার কাছে বাস্তব কোন ডিভাইস না থাকে, তারপরও আপনি একটি <a href="/en-US/docs/Tools/Firefox_OS_Simulator">ফায়ারফক্স ওএস সিমুলেটর</a> ব্যবহার করে এটির স্বাদ গ্রহন করতে পারেন। শুরু করার জন্য, প্রথমে নিচের বাটনটি (একাধিক সংস্করণ পাওয়া যাবে; সর্বোচ্চ সুবিধার জন্য সবগুলো ইন্সটল করতে পারেন) ক্লিক করে সিমুলেটর টি ডাউনলোড করে ইন্সটল করে নিনঃ</p> + +<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">সিমুলেটর ইন্সটল</a></p> + +<p>একবার সিমুলেটর(গুলো) ইন্সটল করা হয়ে গেলে, আপনাকে অ্যাপ ম্যানেজার ট্যাবের নিচের দিকে থাকা কানেকশন স্ট্যাটাস বারে যেতে হবে, এবং "Start simulator" বাটনে ক্লিক করতে হবে। কমপক্ষে তিনটি বাটন দেখা যাবেঃ</p> + +<ul> + <li>"Firefox OS 1.3", "Firefox OS 1.2" ... ইত্যাদি। (বা এরকম অন্যকিছু): একেবারে বামের দিকে থাকা বাটনগুলোতে সিমুলেটরের সংস্করণ গুলোর নাম থাকবে। সিমুলেটর চালু করার জন্য যেকোনো একটি বাটনে ক্লিক করুন।</li> + <li>"Add": মাঝখানের বাটন এই নিবন্ধের সিমুলেটর ইন্সটল সম্পর্কিত লিঙ্ক সমূহে নিয়ে আসবে। এতে করে আপনি আরও সিমুলেটর (ফায়ারফক্স ওএস ১.৩, ফায়ারফক্স ওএস ১.৪ ইত্যাদি) ইন্সটল করতে পারবেন।</li> + <li>"Cancel": ডান পাশের বাটনটি সংযোগ বাতিল করে।</li> +</ul> + +<div class="note"> +<p><strong>খেয়াল করুনঃ</strong> যেহেতু ফায়ারফক্স ওএস ১.৫ সংস্করণের নাম বদলে ২.০ হয়ে গেছে, তাই ফায়ারফক্স ওএস ১.৫ সিমুলেটর সরিয়ে দেওয়া হয়েছে। কিন্তু আপনি যদি আগেভাগেই ১.৫ সিমুলেটর ইন্সটল করে রাখেন, তাহলে এটি স্বয়ংক্রিয়ভাবেই ২.০ তে আপডেট হয়ে যাবে না। তাই আপনাকে ১.৫ আনইন্সটল করে ২.০ ইন্সটল করতে হবে। তাহলে এর পর থেকে ২.০ স্বয়ংক্রিয়ভাবেই আপডেট হবে।</p> +</div> + +<div class="note"> +<p><strong>খেয়াল করুনঃ</strong> ফায়ারফক্স ওএস ১.২ সিমুলেটর সরিয়ে ফেলা হয়েছে, কারণ কোন ডিভাইসেরই ফায়ারফক্স ওএস এর এই সংস্করণে রিলিজ হওয়ার কোন সম্ভাবনা নাই। তাই এই সংস্করণের পেছনে সময় ব্যয় না করাই ভাল।</p> +</div> + +<h2 id="অ্যাপ_ম্যানেজারে_কাস্টম_বিল্ড_চালানো">অ্যাপ ম্যানেজারে কাস্টম বিল্ড চালানো</h2> + +<p>খেয়াল করুন যে আপনই সিমুলেটরের সাহায্যে অ্যাপ ম্যানেজারে নিজের কাস্টম B2G ডেস্কটপ এবং Gaia/Gecko বিল্ড চালাতে পারবেন। নির্দেশনার জন্য <a href="https://developer.mozilla.org/en-US/Firefox_OS/Running_custom_builds_in_the_App_Manager">কাস্টম Firefox OS/Gaia বিল্ড অ্যাপ ম্যানেজারে চালানো</a> দেখুন।</p> + +<h2 id="অ্যাপস_প্যানেল"><a name="Apps_panel">অ্যাপস প্যানেল</a></h2> + +<p>এখন যেহেতু সবকিছু ঠিকঠাক কাজ করছে, এখন চলুন অ্যাপ ম্যানেজারের মধ্যে অ্যাপস প্যানেল থেকে শুরু করে যেসব সুবিধা রয়েছে, তা দেখে নেয়া যাক। এখান থেকে আপনি বর্তমান অ্যাপকে আপনার ডিভাইসে পাঠিয়ে পরীক্ষা করে দেখতে পারবেনঃ</p> + +<ul> + <li>একটি লোকাল অ্যাপ ইন্সটল করার জন্য "Add Packaged App" লেবেলের পাশে থাকা যোগ চিহ্নটিতে ক্লিক করুন, এবং এরফলে আসা ফাইল ব্রাউজারের মাধ্যমে আপনার অ্যাপ যে ফোল্ডারের মধ্যে আছে, সেটি নির্বাচন করুন।</li> + <li>বাইরে হোস্ট করা একটি অ্যাপ ইন্সটল করার জন্য "Add Hosted App" বক্সের ভেতরে থাকা টেক্সট ফিল্ডে অ্যাপ এর ম্যানিফেস্ট ফাইলের সঠিক লিঙ্ক দিন এবং যোগ চিহ্ন ওয়ালা বাটনটি ক্লিক করুন।</li> +</ul> + +<p>আপনার অ্যাপ সম্পর্কিত তথ্য উইন্ডোর ডান পাশে - নিচের ছবির মত দেখাবেঃ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6261/apps-panel.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<h3 id="ম্যানিফেস্ট_এডিটর">ম্যানিফেস্ট এডিটর</h3> + +<p>ফায়ারফক্স ২৮ এর পর থেকে অ্যাপস প্যানেলের মধ্যে একটি অ্যাপ ম্যানিফেস্ট এডিটর যোগ করা হয়েছেঃ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6613/apps-panel-fx-28.png" style="width: 600px; display: block; margin: 0px auto;"></p> + +<h3 id="ডিবাগিং">ডিবাগিং</h3> + +<p><em>"Update"</em> এ ক্লিক করুন। এটা অ্যাপকে ডিভাইসে আপডেট (ইন্সটল) করবে। <em>"debug"</em> এ ক্লিক করলে অ্যাপ এর সাথে একটি টুলবক্স সংযুক্ত হবে। ফলে আপনি এর কোড সরাসরি পরীক্ষা করতে পারবেনঃ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6265/debug.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p>টুলবক্সের মধ্যে খেলা করতে আপনার ভালোই লাগবে — DOM, CSS ইত্যাদি পরিবর্তনের চেষ্টা করুন। আপনি দেখতে পাবেন যে আপনার করা পরিবর্তনগুলো ডিভাইসে সাথে সাথেই দেখা যাচ্ছে। আর এই তাৎক্ষনিক পরিবর্তন গুলো ইন্সটল হওয়া অ্যাপের কোডে সংরক্ষন করা হবে। এরপরে যখনি আপনি ডিভাইসে উক্ত অ্যাপটি চালু করবেন, তখনি আপনার করা সর্বশেষ পরিবর্তন সহ দেখতে পাবেন।</p> +</div> + +<p>ফায়ারফক্স ২৮ এর আগে টুল সমূহ আলাদা উইন্ডোতে চালু হত। ফায়ারফক্স ২৮ এরপর থেকে টুলসমূহ অ্যাপ ম্যানেজারের মধ্যে একটি আলাদা ট্যাবে চালু হয়। এই ট্যাবটি অ্যাপস অ্যান্ড ডিভাইস ট্যাবের পাশে থাকে। ট্যাবটিকে আপনার অ্যাপের আইকন দেয়া হয়, যাতে আপনি সহজে খুঁজে পেতে পারেনঃ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6615/toolbox-fx-28.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<h3 id="ত্রুটিসমূহ">ত্রুটিসমূহ</h3> + +<p>যদি সফলভাবে একটি অ্যাপ যুক্ত করা না হয় - যেমন URL টি যদি ভুল হয়ে থাকে, অথবা আপনি যদি একটি প্যাকেজড অ্যাপ ফোল্ডার নির্বাচন করে থাকেন, তাহলে উক্ত অ্যাপের পেজে একটি এন্ট্রি যুক্ত করা হবে; কিন্তু তার মধ্যে ভুলের তথ্য থাকবে।</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6259/apps-error.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<p>এই ভিউ থেকে আপনি একটি অ্যাপ অপসারণও করতে পারবেন। অ্যাপ অপসারণের জন্য উইন্ডোর বাম দিকে অ্যাপের নাম/বর্ণনা এর উপর মাউস পয়েন্টার নিয়ে "X" বাটনের উপর ক্লিক করতে হবে। কিন্তু এটা করলে ডিভাইস থেকে অ্যাপ অপসারণ হবেনা। ডিভাইস থেকে অ্যাপ অপসারণের জন্য আপনাকে ডিভাইস ব্যবহার করে ম্যানুয়ালি অপসারণ করতে হবে।</p> + +<h2 id="ডিভাইস_প্যানেল"><a name="Device_panel">ডিভাইস প্যানেল</a></h2> + +<p> + <i>ডিভাইস</i> + ট্যাব সংযুক্ত ডিভাইসের তথ্য প্রদর্শন করে। + + <i>"</i> + Installed Apps + + <i>"</i> + উইন্ডো থেকে, ডিভাইসে থাকা অ্যাপ সমূহ চালু করা ও নিরীক্ষন করা যাবে।</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6267/device-tab.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p>দ্রষ্টব্যঃ প্রত্যয়িত (সার্টিফায়েড) অ্যাপস ডিফল্ট ভাবে তালিকাভুক্ত থাকেনা। <a href="/bn-BD/Firefox_OS/Using_the_App_Manager#Debugging_Certified_Apps">প্রত্যয়িত অ্যাপস কিভাবে ডিবাগ করবেন, তা দেখুন</a>।</p> +</div> + +<p><a name="permissions"></a>"Permissions" উইন্ডো বর্তমান ডিভাইসে থাকা বিভিন্ন <a href="/bn-BD/docs/WebAPI">ওয়েব এপিআই</a> এর জন্য যেসব সুবিধা দেয়া প্রয়োজন, তা প্রদর্শন করেঃ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6269/permissions.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<p>সবশেষে, "Screenshot" বাটন ক্লিক করে বর্তমান ডিভাইসের ডিসপ্লের স্ক্রিনশট নিতে পারেন। স্ক্রিনশট নেয়া হয়ে গেলে তা ফায়ারফক্সের নতুন ট্যাবে আসবে, এবং সেখান থেকে আপনি চাইলে সেটি সংরক্ষণ বা বাতিল করে দিতে পারেন।</p> + +<h2 id="প্রত্যয়িত_(সার্টিফায়েড)_অ্যাপ_ডিবাগ_করা"><a name="Debugging_Certified_Apps">প্রত্যয়িত (সার্টিফায়েড) অ্যাপ ডিবাগ করা</a></h2> + +<p>বর্তমানে যেসব ডিভাইসে ফায়ারফক্স ওএস ১.২ এর ডেভেলপমেন্ট বিল্ড চলছে, শুধুমাত্র সেগুলোই প্রত্যয়িত অ্যাপ ডিবাগ করতে সমর্থ। যদি আপনার একটি ডেভেলপমেন্ট বিল্ড থাকে, তাহলে আপনার প্রোফাইলে <code>devtools.debugger.forbid-certified-apps</code> প্রেফারেন্স <code>false</code> এ পরিবর্তনের মাধ্যমে আপনি প্রত্যয়িত অ্যাপ ডিবাগ সুবিধা চালু করে নিতে পারেন। এটা করার জন্য নিচের ধাপগুলো অনুসরণ করুনঃ</p> + +<ol> + <li> + <p>আপনার ডিভাইসের ফাইল সিস্টেমে শেলের মাধ্যমে প্রবেশের জন্য কম্পিউটারের টার্মিনাল/কনসোলে নিচের কমান্ড গুলো লিখুনঃ</p> + + <pre class="brush: bash">adb shell</pre> + + <p>আপনার প্রম্পট পরিবর্তন হয়ে <code>root@android</code> প্রদর্শন করবে।</p> + </li> + <li> + <p>এরপর, নিচের কমান্ড দিয়ে B2G বন্ধ করুনঃ</p> + + <pre class="brush: bash">stop b2g</pre> + </li> + <li> + <p>নিচের ডিরেক্টরিতে প্রবেশ করুনঃ</p> + + <pre>cd /data/b2g/mozilla/*.default/</pre> + </li> + <li> + <p>এখানে, prefs.js হালনাগাদ করার জন্য নিম্নোক্ত কমান্ড লিখুনঃ</p> + + <pre class="brush: js">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js</pre> + </li> + <li> + <p>হালনাগাদ শেষে নিচের কমান্ডের মাধ্যমে B2G পুনরায় চালু করুনঃ</p> + + <pre class="brush: bash">start b2g</pre> + </li> + <li> + <p><code>exit</code> কমান্ড ব্যবহার করে অ্যান্ড্রয়েড ফাইল সিস্টেম থেকে বের হয়ে আসুন; এরপর আপনি আপনার সাধারন টার্মিনাল প্রম্পটে চলে আসবেন।</p> + </li> + <li> + <p>এরপর, পুনরায় অ্যাপ ম্যানেজার কানেক্ট করলে নিরীক্ষণের জন্য সনদপ্রাপ্ত অ্যাপ সমূহ দেখতে পাবেন।</p> + </li> +</ol> + +<div class="note"> +<p>লক্ষ্য করুনঃ যদি আপনি এই সুবিধাটি আপনার গায়া বিল্ডে যুক্ত করতে চান, তাহলে আপনি এই কমান্ডটি চালাতে পারেনঃ <code>make DEVICE_DEBUG=1 reset-gaia</code>.</p> +</div> + +<h2 id="সমস্যা_সমাধান"><a name="Troubleshooting">সমস্যা সমাধান</a></h2> + +<p id="My_device_is_not_recognized">যদি ডিভাইস খুঁজে না পায়ঃ</p> + +<ul> + <li><a href="/bn-BD/Firefox_OS/Using_the_App_Manager#Configuring_device">ডিভাইস ও সিস্টেম কনফিগারেশন</a> অংশটি ভাল করে পড়ুন এবং নিশ্চিত হউন যে সকল ধাপ অনুসরন করা হয়েছে।</li> + <li>আপনার ডিভাইসে কি কমপক্ষে ফায়ারফক্স ওএস ১.২ চলছে ?</li> + <li>সকল অ্যাপ দেখতে পাচ্ছেন না ? আপনার কি <a href="/bn-BD/Firefox_OS/Using_the_App_Manager#Debugging_Certified_Apps">প্রত্যয়িত অ্যাপ ডিবাগ</a> চালু করা প্রয়োজন ?</li> + <li>আপনি কি আপনার ফোনের সেটিংসে "রিমোট ডিবাগিং" চালু করেছেন ?</li> + <li>যদি আপনি <a href="/bn-BD/Firefox_OS/Using_the_App_Manager#Adb_Helper_Add-on">এডিবি হেল্পার অ্যাড-অন</a> ব্যবহার না করেনঃ + <ul> + <li>আপনি কি সফলভাবে <code>adb forward</code> কমান্ড চালিয়েছিলেন ?</li> + </ul> + </li> + <li>যদি আপনি <a href="/bn-BD/Firefox_OS/Using_the_App_Manager#Adb_Helper_Add-on">এডিবি হেল্পার অ্যাড-অন</a> ব্যবহার না করেন, এবং আপনার ডিভাইস নিচের টুলবারে তালিকাভুক্ত হয়নিঃ + <ul> + <li>যদি আপনি লিনাক্স ব্যবহারকারী হন, তাহলে সঠিকভাবে <a href="http://developer.android.com/tools/device.html#setting-up">udev সেটাপ করা হয়েছে কি না, তা নিশ্চিত করুন</a>।</li> + <li>যদি আপনি উইন্ডোজ ব্যবহারকারী হন, তাহল <a href="http://developer.android.com/tools/device.html#setting-up">প্রযোজ্য ড্রাইভার সমূহ</a> সঠিকভাবে ইন্সটল করা হয়েছে কি না, তা নিশ্চিত করুন।</li> + </ul> + </li> + <li>লিনাক্সে নামের বদলে <b>"???????"</b> দেখতে পান? তাহলে আপনার অনুমতি সংক্রান্ত সমস্যা রয়েছে। এক্ষেত্রে নিশ্চিত করুন সঠিকভাবে <a href="http://developer.android.com/tools/device.html#setting-up">udev সেটাপ করা হয়েছে</a>।</li> + <li>আপনার ফোনের স্ক্রিন আনলক করা হয়েছে ?</li> +</ul> + +<p>অ্যাপ ম্যানেজারের সাথে আপনার ডিভাইস কানেক্ট করতে পারছেন না বা সিমুলেটর চালু করতে পারছেন না ? <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">আমাদের জানান </a>বা <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&attach_text=&blocked=&bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_blocking_b2g=---&cf_crash_signature=&cf_status_b2g18=---&cf_status_b2g_1_1_hd=---&cf_status_b2g_1_2=---&cf_status_firefox24=---&cf_status_firefox25=---&cf_status_firefox26=---&cf_status_firefox27=---&cf_status_firefox_esr17=---&cf_status_firefox_esr24=---&cf_tracking_b2g18=---&cf_tracking_firefox24=---&cf_tracking_firefox25=---&cf_tracking_firefox26=---&cf_tracking_firefox27=---&cf_tracking_firefox_esr17=---&cf_tracking_firefox_esr24=---&cf_tracking_firefox_relnote=---&cf_tracking_relnote_b2g=---&comment=&component=Developer%20Tools%3A%20App%20Manager&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-203=X&flag_type-37=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-720=X&flag_type-721=X&flag_type-737=X&flag_type-748=X&flag_type-781=X&flag_type-787=X&flag_type-791=X&flag_type-799=X&flag_type-800=X&flag_type-802=X&flag_type-803=X&flag_type-809=X&flag_type-825=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Firefox&qa_contact=developer.tools%40firefox.bugs&rep_platform=x86&requestee_type-203=&requestee_type-41=&requestee_type-5=&requestee_type-607=&requestee_type-748=&requestee_type-781=&requestee_type-787=&requestee_type-791=&requestee_type-800=&short_desc=&status_whiteboard=&target_milestone=---&version=Trunk"> বাগ ফাইল করুন</a></p> 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 +--- +<div class="summary"> + <p>ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট (যা B2G ডেস্কটপ ক্লায়েন্ট নামেও পরিচিত) আপনাকে গেকো ভিত্তিক বা মূল ডিভাইসের মত পরিবেশে গায়া এবং ওয়েব অ্যাপস রান করার সুযোগ দেয় । এটি ডিভাইস হার্ডওয়্যারকে এমুলেট করে না, তাই এটি ডিভাইস এপিআই পরীক্ষার জন্য যথাযথ নয় । তাছাড়া, এটি মূল হার্ডওয়্যারে পরীক্ষার বিকল্পও নয় । তবে, এতে <a href="/en-US/docs/WebAPI/Contacts">কন্ট্যাক্টস</a> এবং <a href="/en-US/docs/WebAPI/Settings">সেটিংস</a> এপিআই এর মত কিছু এপিআই চালু আছে, যা ফায়ারফক্সে নেই । ফলে, এটা আপনার <span style="line-height: 1.5;">অ্যা</span><span style="line-height: 1.5;">প্লিকেশন ডেভেলপমেন্ট অথবা গায়া ইউজার ইন্টারফেসে কাজ করার ক্ষেত্রে সহায়ক হবে । এই লেখাটিতে কীভাবে ফায়ারফক্স ওএস ডাউনলোড অথবা তৈরি করতে হয় ; একইসাথে কীভাবে ব্যবহার করতে হয়, তা দেখানো হবে ।</span></p> +</div> +<div class="note"> + <p><strong>দ্রষ্টব্য:</strong> ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট ব্যবহারের সহজতম পন্থা হল <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_simulator" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_simulator">ফায়ারফক্স ওএস সিমুলেটর</a> । এর জন্য আপনাকে আলাদাভাবে ডেস্কটপ ক্লায়েন্ট তৈরি করা লাগবে না ।</p> +</div> +<h2 id="সর্বশেষতম_নির্মাণ_ডাউনলোড">সর্বশেষতম নির্মাণ ডাউনলোড</h2> +<p><a href="http://nightly.mozilla.org" title="http://nightly.mozilla.org">ফায়ারফক্স নাইটলিজ</a> এর মতই ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট প্রতিদিনই সর্বশেষ সোর্স কোড থেকে স্বয়ংক্রিয়ভাবে তৈরি হয় । সর্বশেষটি পাবেন <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">মজিলা এফটিপি সার্ভারে</a> । আপনার অপারেটিং সিস্টেমের জন্য সর্বশেষ সংস্করণ ও উপযুক্ত আর্কাইভ নির্বাচন করতে ভুলবেন না । ফলে আপনি এটি আলাদাভাবে তৈরির ব্যপারটি উপেক্ষা করতে পারবেন । তাছাড়া, এতে আপনাকে গায়াও ডাউনলোড করতে হবে না ।</p> +<p>আপনি এখন সরাসরি ডেস্কটপ ক্লায়েন্ট রান করায় (<a href="https://developer.mozilla.org/bn-BD/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client$edit#Running_the_desktop_client" style="line-height: 1.5;">Running the desktop client</a><span style="line-height: 1.5;">)</span><span style="line-height: 1.5;"> চলে যেতে পারেন, যদি না আপনি এটি নিজ থেকে তৈরি করতে চান । কোডবেস-এ পরিবর্তন আনতে ও তা পরীক্ষা করতে চাইলে এটি দরকার ।</span></p> +<h2 id="ডেস্কটপ_ক্লায়েন্ট_তৈরি">ডেস্কটপ ক্লায়েন্ট তৈরি</h2> +<p>আপনাকে প্রথমেই একটি <a href="https://developer.mozilla.org/En/Developer_Guide/Build_Instructions#Build_prerequisites" title="En/Developer_Guide/Build_Instructions#Build_prerequisites">প্রমাণ মজিলা নির্মাণ পরিবেশ</a> তৈরি করে নিতে হবে । কাজটি হয়ে গেলে আপনি প্রয়োজনমত কোড নিয়ে ও পরিবর্তন করে ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট তৈরি করতে পারবেন ।</p> +<h3 id="প্রথমবার_কোড_ডাউনলোড">প্রথমবার কোড ডাউনলোড</h3> +<p>যে ডিরেক্টরিতে সোর্স কোডটি পাঠাতে চান, সেটিতে সকল গেকো সমৃদ্ধ <code>mozilla-central</code> রিপোজিটরি ক্লোন করুন :</p> +<pre class="brush: bash"> hg clone http://hg.mozilla.org/mozilla-central</pre> +<p>একই কোড আপনি গিটহাব থেকেও নামাতে পারেন :</p> +<p> </p> +<pre class="brush: bash" style="font-size: 12px;"> git clone https://github.com/mozilla/gecko-dev +</pre> +<h3 id="কোড_নবায়ন">কোড নবায়ন</h3> +<p>ক্রম-নির্মাণের ক্ষেত্রে আপনার সর্বশেষ পরিবর্তনগুলো আনা উচিত :</p> +<pre class="brush: bash">cd mozilla-central +hg pull -u +</pre> +<p>অথবা,</p> +<pre class="brush: bash">cd gecko-dev +git pull +</pre> +<h3 id="mozconfig_তৈরি">mozconfig তৈরি</h3> +<p>এরপর, ফায়ারফক্সের বদলে গেকো ক্লায়েন্টে বুট তৈরি করার সিস্টেম কনফিগার করতে <code>mozilla-central</code> ডিরেক্টরিতে <code>mozconfig</code> নামের একটি ফাইল তৈরি করুন । ফাইলটিতে যা থাকবে :</p> +<pre class="brush: bash">. "$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</pre> +<p>B2G ডেস্কটপ ক্লায়েন্টে <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Mochitests">Mochitests</a> (হয় <code>mochitest-b2g-desktop</code> নাহলে <code>mochitest-plain</code>) অথবা <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Automated_testing/gaia-ui-tests/Gaia_UI_Tests_Run_Tests">গায়া ইউনিট টেস্টস</a> রান করাতে আপনাকে <code>ENABLE_MARIONETTE=1</code> যুক্ত করতে হবে ।</p> +<h3 id="প্রস্তুতকরণ"><span style="font-family: Vrinda; font-size: 18pt; line-height: 115%;">প্রস্তুতকরণ</span></h3> +<p><span style="line-height: 1.5;">এখন আপনি নিচের কমান্ডটি দিয়ে ডেস্কটপ ক্লায়েন্ট তৈরি করতে পারেন (এটিকে </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">mozilla-central</span><span style="line-height: 1.5;"> ডিরেক্টরি থেকে রান করান) :</span></p> +<pre class="brush: bash">./mach build +</pre> +<p>এই তৈরিকৃত ক্লায়েন্টটি <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">../build/dist</span> ডিরেক্টরিতে থাকবে (এটি নির্ভর করবে <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">mozconfig </span>ফাইলের <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">MOZ_OBJDIR</span> তে আপনি যে মানটি উল্লেখ করেছেন, তার উপর) ।</p> +<div class="note"> + <p>দ্রষ্টব্য : কোন সমস্যা হলে প্রথমেই <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions#Build_prerequisites" style="line-height: 1.5em;">এখানে</a><span style="line-height: 1.5em;"> আপনার ডিপেন্ডেন্সিস পরীক্ষা করুন ।</span></p> +</div> +<h2 id="গায়া_ডাউনলোড" style="margin-bottom: 20px; line-height: 28px; font-size: 28px;">গায়া ডাউনলোড</h2> +<p><span style="line-height: 1.5;">ডেস্কটপ ক্লায়েন্টটি স্বাভাবিকভাবেই একটি খালি স্ক্রিন দেখায় । কারণ এটি কোন ওয়েব অ্যাপটি স্বয়ংক্রিয়ভাবে ইন্সটল করা লাগবে, তা জানে না । এজন্য গায়া ডাউনলোড করতে হবে, যা ফায়ারফক্স ওএসের সাথে আসা সিস্টেম অ্যাপস ও ডিফল্ট অ্যাপসের সংগ্রহ ।</span></p> +<p><span style="line-height: 1.5;">প্রথমবার গায়া ডাউনলোডের সময় সোর্সকোড রিপজিটরি-টি গিটহাবে ক্লোন করুন :</span></p> +<pre class="brush: bash">git clone https://github.com/mozilla-b2g/gaia +cd gaia</pre> +<p>ইতিমধ্যে থাকা গায়া ক্লোনটি নবায়ন করতে আপনি গিটহাব থেকে সর্বশেষ পরিবর্তনগুলো আনতে পারেন :</p> +<pre class="brush: bash">cd gaia +git pull +</pre> +<h2 id="একটি_custom-settings.json_তৈরি">একটি custom-settings.json তৈরি</h2> +<p>আপনি যদি জেনে থাকেন যে আপনি কি করছেন এবং বিভিন্ন config অপশান তৈরি করতে চান, তাহলে <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">gaia/build/config/custom-settings.json </span><span style="line-height: 1.5;">ফাইলটি তৈরি করুন এবং সেখানে অপশানগুলো যুক্ত করুন । উদাহরণস্বরূপ :</span></p> +<pre><span class="brush: js">{ + "lockscreen.enabled": false, + "lockscreen.locked": false, + "devtools.debugger.remote-enabled": true +}</span></pre> +<p><span style="line-height: 1.5;">উদাহরণটি লকস্ক্রিনটি বাইপাস করতে কাজ দেয়, যেটি অন্য কোনভাবে ডেস্কটপে বাইপাস করা অসম্ভব, কারণ এটি মাউস বা ট্র্যাকপ্যাড দ্বারা আনলক করা যায় না ।</span></p> +<h2 id="একটি_প্রোফাইল_তৈরি">একটি প্রোফাইল তৈরি</h2> +<p>এখন আমাদের ডেস্কটপ ক্লায়েন্টটির জন্য গায়ার অ্যাপগুলো সেটআপ করা লাগবে । ঠিক যেভাবে গায়া অ্যাপগুলো ডিভাইসে ইন্সটল করার কথা, সেভাবে প্যাকেজ করা, একইসাথে অগ্রাধিকারপ্রাপ্ত সিস্টেম অ্যাপগুলোর জন্য অনুমতি সেটআপ করা এর অন্তর্ভুক্ত । একটি প্রোফাইল তৈরির মাধ্যমে আমরা কাজগুলো করি । নিচের কমান্ডটিই (ডাউনলোড করা <code>gaia</code> ডিরেক্টরিতে রান করান ) এর জন্য যথেষ্ট : </p> +<pre class="brush: bash">DESKTOP_SHIMS=1 NOFTU=1 DEBUG=1 make +</pre> +<p>এটি <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">gaia ডিরেক্টরির নিচে</span><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">profile-debug</code><span style="line-height: 1.5;"> নামে একটি ডিরেক্টরি তৈরি করবে ।</span><span style="line-height: 1.5;"> এই নতুন প্রোফাইলে B2G ঠিকমত রান করানোর জন্য প্রয়োজনীয় একটি কাস্টমাইজড এক্সটেনশন এবং অন্যান্য কনফিগারেশন ডিটেলস</span><span style="line-height: 1.5;"> যুক্ত আছে ।</span></p> +<h2 id="ডেস্কটপ_ক্লায়েন্টটি_রান_করানো">ডেস্কটপ ক্লায়েন্টটি রান করানো</h2> +<p>একবার যদি আপনি ক্লায়েন্টটি তৈরি করে থাকেন (অথবা নাইটলি ডেস্কটপ অ্যাপলিকেশনটি ডাউনলোড এবং ইন্সটল করে থাকেন) এবং গায়া ডাউনলোড করে থাকেন, তাহলে আপনি ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট চালু করার জন্য তৈরি ।</p> +<h3 id="লিনাক্সে_রান_করানো">লিনাক্সে রান করানো</h3> +<p>এমবেডেড গায়া প্রোফাইল ব্যবহার করে ডেস্কটপ ক্লায়েন্টটি লিনাক্সে রান করানোর জন্য স্রেফ <code>b2g</code> এক্সিকিউটেবলটি রান করান । যদি আপনি একটি ভিন্ন গায়া প্রোফাইল উল্লেখ করতে চান (যেমন উপরেরটি ব্যতীত পৃথকভাবে ডাউনলোডকৃত গায়া), আপনাকে <code>b2g</code> র্যাপার প্রোগ্রামটি বাইপাস করতে হবে এবং <code>b2g-bin</code> বাইনারিটি রান করাতে হবে । বাইনারিটি আপনার ডাউনলোডকৃত আর্কাইভে অথবা, আপনার তৈরি করা ক্লায়েন্ট হলে <code>../build/dist/bin</code> ডিরেক্টরিতে আছে ।</p> +<pre class="brush: bash">.../b2g-bin -profile gaia/profile-debug +</pre> +<p>আপনি বিরক্তিকর রেন্ডারিং সমস্যার সম্মুখীন হতে পারেন । এটি উপেক্ষা করতে নিচের লাইনটি আপনার <code>gaia/profile/user.js</code> ফাইলে যুক্ত করুন :</p> +<pre>user_pref("layers.acceleration.disabled", true); +</pre> +<h3 id="ম্যাকে_রান_করানো">ম্যাকে রান করানো</h3> +<p>আপনি যদি নাইটলি বিল্ড ডাউনলোড করে থাকেন, আপনি বরাবরের মতই ফাইন্ডার থেকে খুব সহজেই এটি চালু করতে পারেন । ম্যাকের সাথে যুক্ত প্রমাণ কন্সোল ইউটিলিটি প্রোগ্রাম রান করলেই যেকোন কন্সোল আউটপুট দৃশ্যমান হয় ।</p> +<p><span style="line-height: 1.5;">যদি আপনি একটি ভিন্ন গায়া প্রোফাইল উল্লেখ করতে চান (যেমন উপরেরটি ব্যতীত পৃথকভাবে ডাউনলোডকৃত গায়া), আপনাকে </span><code style="font-size: 14px;">b2g</code><span style="line-height: 1.5;"> র্যাপার প্রোগ্রামটি বাইপাস করতে হবে এবং </span><code style="font-size: 14px;">b2g-bin</code><span style="line-height: 1.5;"> বাইনারিটি রান করাতে হবে ।</span> <code>b2g-bin</code> বাইনারিটির লোকেশনের কারণে এবং প্রোফাইল ডিরেক্টরি নির্দেশের সময় নিখুঁত পথনির্দেশের প্রয়োজনে কমান্ড লাইনটি একটু বেশি জটিল :</p> +<pre>.../B2G.app/Contents/MacOS/b2g-bin -profile /full/path/to/gaia/profile-debug +</pre> +<h3 id="উইন্ডোজে_রান_করানো">উইন্ডোজে রান করানো</h3> +<p><code><font face="Open Sans, sans-serif"><span style="line-height: 21px;">উইন্ডোজে নাইটলি বিল্ড রান করানো </span></font>b2g.exe চালু করার মতই সহজ ।</code> আপনি চাইলে এক্সিকিউটেবল <code>b2g-bin.exe</code> রান করিয়ে এক্সিকিউশনটি কাস্টমাইজ করতে পারেন; এটি স্বয়ংক্রিয়ভাবে বান্ডেলকৃত গায়া ব্যবহারকারি র্যাপার প্রোগ্রামটি বাইপাস করে দেয় ।</p> +<h2 id="কমান্ড_লাইন_বিকল্প">কমান্ড লাইন বিকল্প</h2> +<p>ডেস্কটপ ক্লায়েন্ট ব্যবহারের সময় পছন্দমত রানটাইম অভিজ্ঞতা পাল্টাতে আপনি কিছু কমান্ড লাইন বিকল্প ব্যবহার করতে পারেন । <code>-help</code> অপশান ব্যবহার করে আপনি একটি লিস্ট পেতে পারেন । নিচে তাদের মধ্যে আকর্ষণীয় কিছুর উল্লেখ আছে ।</p> +<h3 id="option-screen" name="option-screen">স্ক্রিন সাইজ উল্লেখকরণ</h3> +<p>আপনি <code style="font-size: 14px;">--screen অপশান ব্যবহার করে যে ডিভাইসটি সিমুলেট করতে চান, তার স্ক্রিন সাইজ উল্লেখ করতে পারেন :</code></p> +<pre class="brush: bash">b2g --screen=<em><width></em>x<em><height></em>@<em><dpi></em></pre> +<p>এখানে <em><width></em>, <em><height></em>, এবং <em><dpi></em> মূলত নিজ নাম অনুযায়ী প্যারামিটার: এখানে ডিভাইস স্ক্রিনের দৈর্ঘ্য ও প্রস্থ হল পিক্সেল এককে এবং ডিভাইস রেজ্যুলেশন হল DPI এককে । কিছু বাস্তব উদাহরণ :</p> +<pre class="brush: bash">b2g --screen=320x480 +b2g --screen=320x480@160 +</pre> +<p>বিকল্প হিসাবে কিছু ডিভাইসের নাম উল্লেখ করে আপনি তাদের স্ক্রিন সাইজ এবং রেজ্যুলেশন সিমুলেট করতে পারবেন :</p> +<ul> + <li><code>iphone</code></li> + <li><code>ipad</code></li> + <li><code>nexus_s</code></li> + <li><code>galaxy_nexus</code></li> + <li><code>galaxy_tab</code></li> + <li><code>wildfire</code></li> + <li><code>tattoo</code></li> + <li><code>salsa</code></li> + <li><code>chacha</code></li> +</ul> +<h3 id="option-console" name="option-console">জাভাস্ক্রিপ্ট কন্সোল খোলা</h3> +<p>কমান্ড লাইন থেকে<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;"> -jsconsole</span><span style="line-height: 1.5;"> ব্যবহার করে আপনি B2G ক্লায়েন্ট চালু করার সময় জাভাস্ক্রিপ্ট কন্সোল খুলতে পারবেন । তৈরির পর স্রেফ নিচের কাজ করুন :</span></p> +<pre class="brush: bash">.../b2g -jsconsole -profile <em>/path/to/your/profile</em></pre> +<p>আপনি ম্যাকে নাইটলি বিল্ড ইন্সটল করে থাকলে নিচের কাজ করতে পারেন :</p> +<pre class="brush: bash">/Applications/B2G.app/Contents/MacOS/b2g-bin -jsconsole -profile <em>/path/to/your/profile-debug</em></pre> +<div class="note"> + <p><strong>দ্রষ্টব্য :</strong> উৎপাদন নির্মাণের সময় আগে থেকেই কন্সোল লগিং (যেমন {{domxref("console.log()")}}) বন্ধ করা থাকে । এটি চালু করতে, <a href="/en-US/Firefox_OS/Debugging/Developer_settings">ডেভেলপার সেটিংসে</a> গিয়ে <em>Console Enabled</em> preference চালু করে দিন ।</p> +</div> +<h3 id="option-runapp" name="option-runapp">B2G আরম্ভ হওয়ার সময় নির্দিষ্ট অ্যাপলিকেশন চালু করা</h3> +<p>ডেস্কটপ ক্লায়েন্টে B2G আরম্ভ হওয়ার সময় স্বয়ংক্রিয়ভাবে চালু হওয়ার জন্য আপনি একটি অ্যাপলিকেশন উল্লেখ করতে পারেন । বাকি সিস্টেম লোড হওয়ার সাথে সাথেই কাজটা হয়ে যাবে । এটি করতে, স্রেফ <code>--runapp</code> অপশনটি ব্যবহার করুন, যেটি চালু করার জন্য একটি অ্যাপলিকেশনের নামকে প্যারামিটার হিসেবে নেয় । উদাহরণস্বরূপ :</p> +<pre class="brush: bash"> .../b2g-bin -profile <em>/path/to/your/gaia/profile-debug</em> --runapp email</pre> +<div class="note"> + <p><b>দ্রষ্টব্য </b>: উল্লেখিত নামটিকে ছোট হাতের অক্ষরে পরিবর্তিত করে এবং সকল ড্যাশ ও স্পেস মুছে দিয়ে স্বাভাবিক করা হয় । এরপর এই স্বাভাবিককৃত নামটিকে প্রাপ্ত অ্যাপগুলোর manifestগুলোর সাথে তুলনা করা হয় । যেমন, ইমেইল অ্যাপটির বর্তমান নাম "E-mail", কিন্তু <code>--runapp email</code> কাজ করবে এই স্বাভাবিককরণের কারণে ।</p> +</div> +<p>আপনি যদি কোনো আর্গুমেন্ট ছাড়া অথবা একটি শূন্য আর্গুমেন্ট নিয়ে <code>--runapp</code> অপশানটি উল্লেখ করেন, b2g ক্লায়েন্ট আপনার টার্মিনালে একটি জানা অ্যাপলিকেশনের লিস্ট দেখাবে, সংক্ষিপ্ত ব্যবহারবিধিসহ ।</p> +<div class="note"> + <p><strong>দ্রষ্টব্য :</strong> <code>--runapp</code> অপশনটি পার্শ্বপ্রতিক্রিয়া হিসেবে লকস্ক্রিন বন্ধ করে দেয় এবং পুনরায় চালু করে না । এটি ধরে নেয়া হয় যে, আপনি লকস্ক্রিন পরীক্ষার সময় একই প্রোফাইলে, এই কমান্ডটি ব্যবহার করবেন না, অথবা <em>Settings > Screen Lock এ গিয়ে আপনি ম্যানুয়ালি এটিকে পুনরায় চালু করবেন ।</em> এটি যদি একটি সমস্যা হয়, নিঃসংকোচে এই আচরণ পরিবর্তনের জন্য একটি প্যাচ দান করুন ।</p> +</div> +<h2 id="ব্যবহারের_জন্য_টিপস">ব্যবহারের জন্য টিপস</h2> +<p>এই ধাপটি B2G ডেস্কটপ ক্লায়েন্ট ব্যবহারে জন্য কিছু গুরুত্বপূর্ণ টিপস দিচ্ছে ।</p> +<ul> + <li> Esc চাবিটি "back" বোতামের মতই কাজ করে ।</li> + <li> Home চাবিটি "home" বোতামের মতই কাজ করে; আপনি যদি ম্যাকে থাকেন, Home চাবিটি Fn + ← (Fn + Left Arrow) এ পাবেন ।</li> + <li>End চাবিটি ঠিক "power" বোতামের মতই কাজ করে; আপনি যদি ম্যাকে থাকেন , End চাবিটি Fn + → (Fn + Right Arrow) এ পাবেন ।</li> + <li> Page Up এবং Page Down চাবিগুলো যথাক্রমে "Volume Up" এবং "Volume Down" বোতামের মত কাজ করে; আপনি যদি ম্যাকে হন, Page Up চাবিটি Fn + ↑ (Fn + Up Arrow) এ এবং Page Down চাবিটি Fn + ↓ (Fn + Down Arrow) এ পাবেন ।</li> + <li>লম্বা সময় ধরে Home চাবি চেপে রাখলে "Card View" খোলে; আপনি ম্যাকে থাকলে, Cmd + Fn + ← (Cmd + Fn + Left Arrow) ই "Card View" খুলবে ।</li> +</ul> +<h2 id="ট্রাবলশ্যুটিং_B2G_ডেস্কটপ_চালুর_সময়_ফাঁকা_স্ক্রিন">ট্রাবলশ্যুটিং: B2G ডেস্কটপ চালুর সময় ফাঁকা স্ক্রিন</h2> +<p><code>b2g -profile gaia/profile ব্যবহার করে b2g চালুর সময় </code>"Cannot reach app://system.gaiamobile.org" এরর সহ একটি ফাঁকা স্ক্রিন দেখা যেতে পারে । এটি ঠিক করার জন্য কিছু জিনিস পরীক্ষা করে দেখতে পারেন :</p> +<ul> + <li><code><font face="Open Sans, sans-serif"><span style="line-height: 21px;">গায়া ডিরেক্টরিতে </span></font>DEBUG=1 make</code> প্রোফাইল ব্যবহার করে পুনরায় গায়া প্রোফাইলটি তৈরি করুন ।</li> + <li>b2g আবারও রান করান ।</li> + <li>যদি এতে সমাধান না হয়, 8080 পোর্টে আর কোনো কাজ চলছে কিনা দেখুন । গায়ার ডিফল্ট প্রোফাইল শুরু হয় <code>httpd.js দিয়ে</code>, যেটি 8080 পোর্টে কাজ করে । একটি ডিবাগ প্রোফাইল রান হওয়ার সময়, B2G localhost:8080 তে সংযুক্ত হয় । যদি 8080 পোর্টে অন্য কাজ চলতে থাকে, b2g গায়ার হোমস্ক্রিন দেখাতে ব্যর্থ হবে । + <ol> + <li>এটিই সেই সমস্যা কিনা বুঝতে <code>httpd.js এ লগইন চালু করুন ।</code> প্রোফাইলের মধ্যে <code>httpd.js থাকে</code> <code>gaia/profile/extensions/httpd/content/httpd.js লোকেশনে ।</code> সংশোধনের জন্য ফাইলটি খুলুন ।</li> + <li> <code>var DEBUG=false;</code> লাইনটি মুছে <code>var DEBUG=true; লিখুন ।</code></li> + <li>ফাইলটি সেভ করে B2G বন্ধ করে পুনরায় চালু করুন । এখন আপনি কন্সোলে httpd এর লগ দেখতে পাবেন ।</li> + </ol> + </li> +</ul> +<h2 id="পরবর্তী_ধাপগুলো">পরবর্তী ধাপগুলো</h2> +<p>এখন আপনার গেকো রান করানোর জন্য বুটের একটি ডেস্কটপ বিল্ড আছে, আপনি এখন এটিতে পরীক্ষা, উন্নয়ন এবং অন্যান্য কাজ করতে পারেন ।</p> +<ul> + <li><a href="/en/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko">বুট থেকে গেকোতে ডিবাগ</a></li> + <li><a href="/en/Mozilla/Boot_to_Gecko/Testing_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Testing_Boot_to_Gecko">বুট থেকে গেকো পরীক্ষা</a></li> + <li><a href="http://blog.johnford.org/desktop-b2g-include-gaia/" style="text-decoration: underline;">ডেস্কটপ B2Gতে এখন গায়া যুক্ত</a></li> +</ul> 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 +--- +<div class="summary"> + <p><span class="seoSummary"> <span id="result_box" lang="bn"><span class="hps">এই নিবন্ধটি</span> <span class="hps">গেকো</span> <span class="hps">এমুলেটর</span> <span class="hps">থেকে</span> <span class="hps">বুট</span> <span class="hps">ব্যবহার করার সময়</span> <span class="hps">আপনার জানা</span> <span class="hps">উচিত</span> <span class="hps">কিছু কি</span> <span class="hps">জিনিষ</span> <span class="hps">একটি সংক্ষিপ্ত</span> <span class="hps">গাইড</span> <span class="hps">উপলব্ধ করা হয়। </span></span> <span id="result_box" lang="bn"><span class="hps">এটি একটি</span> <span class="hps">সম্পূর্ণ</span> <span class="hps">ব্যবহারকারী ম্যানুয়াল</span> <span class="hps">হতে</span> <span class="hps">সারমর্ম</span> <span class="hps">না;</span></span></span><span id="result_box" lang="bn"><span class="hps">পরিবর্তে,</span> <span class="hps">এটা শুধু</span> <span class="hps">আপনি</span> <span class="hps">যে আপনি</span> <span class="hps">আপনার নিজের উপর</span> <span class="hps">জানতে</span> <span class="hps">না পারে</span> <span class="hps">যে কয়েক</span> <span class="hps">দরকারী</span> <span class="hps">জিনিস</span> <span class="hps">বলে ।</span></span></p> +</div> +<p><span id="result_box" lang="bn"><span class="hps">এই সহায়িকার</span> <span id="result_box" lang="bn"><span class="hps">অনুমান,</span></span> <span class="hps">আপনি ইতিমধ্যে</span> <span class="hps">এক এমুলেটর</span> <span class="hps">তৈরি করেছেন</span> <span>;</span></span> যদি না করে থাকেন, তাহলে ঘুরে আসুন <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="en/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko">Building and installing Firefox OS</a> থেকে !</p> +<h2 id="B2G_এমুলেটর_সম্পর্কে">B2G এমুলেটর <span class="short_text" id="result_box" lang="bn"><span class="hps">সম্পর্কে</span></span></h2> +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">এখানে দুই ধরনের </span><span class="hps">B2G</span> এমুলেটর <span class="hps">আছে।</span></span><span id="result_box" lang="bn"><span class="hps">প্রথমত,</span> <span class="hps">config.sh</span> <span class="hps">যখন চলমান</span> <span class="hps atn">"</span><span>এমুলেটর</span><span>" জন্য</span> <span class="hps">কনফিগার</span> <span class="hps">দ্বারা</span> <span class="hps">নির্মিত</span><span>, একটি</span> <span class="hps">এআরএম</span> <span class="hps">ডিভাইস</span> <span class="hps">এমুলেটর। যদিও x86 প্রসেসসরের তুলনায় এটি ধিরে চলে</span></span>, তবে <span id="result_box" lang="bn"><span>এটি</span> <span class="hps">আরো স্থিতিশীল</span></span> <span id="result_box" lang="bn"><span class="hps">এবং একটি আসল ডিভাইস যেভাবে কাজ করে এটি সেভাবে উপস্থাপন করতে পারে ।</span></span> <code>config.sh এটি আপনাকে x86 ডিভাইসের পরিবর্তে "এমুলেটর x86" এ চলতে সাহায্য করবে।</code></p> +<div class="note"> + <strong>Note:<span id="result_box" lang="bn"><span class="hps">সাম্প্রতিক কয়েক মাসে</span> <span class="hps">অটোমেশন</span> <span class="hps">টিম</span> <span class="hps">স্থায়িত্ব</span> <span class="hps">বিষয়</span> <span class="hps">কারণে</span> <span class="hps">x86</span> <span class="hps">এমুলেটর</span> <span class="hps">ব্যবহার</span> <span class="hps">করা বন্ধ করে দিয়েছে</span><span>.</span></span></strong> এর কারনে এমুলেটর x86 এ এতি কায না অ করতে পারে । <span id="result_box" lang="bn"><span class="hps">অন্যথায় </span></span><span id="result_box" lang="bn"><span class="hps">আপনি <span id="result_box" lang="bn"><span class="hps">এআরএম</span> <span class="hps">এমুলেটর</span> <span class="hps">ব্যবহার করুন.</span></span></span></span></div> +<p>একবার আপনি <span class="short_text" id="result_box" lang="bn"><span class="hps">নির্বাচিত করলেন, কনফিগার করলেন এবং একটি এমুলেটর বানালেন, </span></span><span id="result_box" lang="bn"><span class="hps">বাকি</span>টা <span class="hps">একটি ব্যবহারকারী</span> <span class="hps">দৃষ্টিকোণ থেকে</span> <span class="hps">একই ভাবে</span> <span class="hps">কাজ করতে থাকবে । </span></span>আর <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="so the rest of this guide is common to both.">তাই এই সহায়িকার বাকি টুকু ২টার জন্য এক।</span></span></p> +<div class="note"> + <strong>Note: ম্যাক </strong> OS X এ B2G এমুলেটরের জন্য Core 2 Duo প্রসেসর অথবা তার থেকে বেশি কিছু দরকার ; অর্থাৎ ,এমন একটা সিস্টেম যা Mac OS X 10.7 "Lion." এর সাথে <span class="short_text" id="result_box" lang="bn"><span class="hps">সামঞ্জস্যপূর্ণ ।</span></span> আপনাকে আসলে Lion চলমান রাখার দরকার নেই ,এর সাথে <span class="short_text" id="result_box" lang="bn"><span class="hps">সামঞ্জস্যপূর্ণ থাকলেই হবে ।</span></span></div> +<h2 id="এমুলেটর_চালু_করা">এমুলেটর চালু করা</h2> +<p><span id="result_box" lang="bn"><span class="hps">B2G</span> <span class="hps">এমুলেটর</span> <span class="hps">শুরু</span> <span class="hps">করার জন্য নিম্নলিখিত</span> <span class="hps">কমান্ডটি ব্যবহার করুন:</span></span></p> +<pre>./run-emulator.sh +</pre> +<p><span id="result_box" lang="bn"><span class="hps">এটি আপনার জন্য</span> <span class="hps">সব</span> <span class="hps">এমুলেটর</span> <span class="hps">সূচনার</span> <span class="hps">কাজগুলো</span> <span class="hps">ব্যবস্থা</span> <span class="hps">করবে .</span></span> যতক্ষণ পর্যন্ত এমুলেটর চালু না হয় এবং এটিতে গেকো বুট না হয় ততক্ষণ একটু ধৈর্য ধরুন। <span class="short_text" id="result_box" lang="bn"><span class="hps">কয়েক মিনিট</span> <span class="hps">সময় লাগবে</span><span>, তাই</span> <span class="hps">ধৈর্য ধরুন</span></span></p> +<h2 id="যখন_এমুলেটর_কাজ_করে_না"><span class="short_text" id="result_box" lang="bn"><span class="hps">যখন</span></span><span class="short_text" id="result_box" lang="bn"><span class="hps"> এমুলেটর</span> <span class="hps">কাজ করে না</span> </span></h2> +<p>কখনো কখনো এমুলেটর চালু হতে ব্যর্থ হয়। যন্ত্রনাগ্রস্থ প্রযুক্তির যুগে আপনাকে স্বাগতম ! <span class="short_text" id="result_box" lang="bn"><span class="hps">এখানে</span> <span class="hps">সমস্যার সমাধানের</span> <span class="hps">জন্য কিছু টিপস</span> <span class="hps">আছে.</span></span></p> +<h2 id="আপনি_কি_VM_এ_কাজ_করার_চেষ্টা_করছেন">আপনি কি <strong>VM </strong>এ কাজ করার চেষ্টা করছেন ?</h2> +<p><strong>VirtualBox </strong>এবং<strong> Parallels </strong>এর আগাম ঘটানো গ্রাফিক্স সাপোর্টের কিছু সমস্যা রয়েছে যার কারণে এমুলেটর বুট নিতে ব্যর্থ হতে পারে, এটা কিছুটা <strong>OpenGL </strong>ডিভাইস এর মতো। বুট নেওয়া শুরু করবে, বুট নিতে ব্যর্থ হবে এবং এইপ্রক্রিয়া চলতেই থাকবে অথবা এটি চালু হবে কিন্তু এমুলেটরে কিছুই দেখাবে না।দুর্ভাগ্যজনকবশতং এই সমস্যার কোনো সমাধান নেই (VirtualBox- এর জন্য একটি <a href="http://www.digitalmihailo.com/setting-up-ubuntu-12-04-virtual-machine-for-firefox-os-build/">workaround</a> আছে), আপনাকে VMWare Player (Freeware), Workstation or Fusion ব্যবহার করতে হবে ।VirtualBox এর জন্য - হয় আপনি Guest Addonsইন্সটল না করেন নতুবা vboxvideo module অকেজো (disable) করে দিন ।</p> +<h2 id="ADB_server_চলছে_কিনা_এটি_নিশ্চিত_করুন">ADB server চলছে কিনা এটি নিশ্চিত করুন</h2> +<p>এটি সচরাচরই হয় কারণ যে ADB server টি এমুলেটেড ডিভাইসটিকে নিয়ন্ত্রণ করছে হয় ওটি চলছে না অথবা স্বাভাবিকভাবে কাজ করতে পারছে না।</p> +<div class="note"> + <p><strong>Note:</strong> =যদিআপনি B2G সিস্টেম দ্বারা নির্মিত <code>ADB </code><code>ব্যবহার করেন</code><code> (</code><code>যেটি সম্ভবত আপনি করছেন</code><code>) এটি </code> <code>$B2G/out/host/<platform>/bin</code> <code>bin </code><code>এই নির্দেশিকাতে রয়েছে</code><code>।</code> <code>ম্যাক</code><code>-</code><code>এর জন্য এটি </code><code>$B2G/out/host/darwin-x86/bin</code>,<code>এই নির্দেশিকাতে রয়েছে</code><code> (</code><code>উদাহরণ</code><code>)</code></p> +</div> +<p><code>ADB </code><code>চলছে কিনা ওটা চেক করার করুন এভাবে</code></p> +<pre>ps aux | grep adb +</pre> +<p>যদি এটা এখানে থাকে তবে সারভারটি kill করার জন্য নিচের কাজটি করুন, কারণ সম্ভবত এটি ঠিক ভাবে কাজ করছে না ।</p> +<pre>adb kill-server +</pre> +<p>যদি এটা ওখানে না থাকে তাহলে নিচের কাজটি করুন</p> +<pre>adb start-server +</pre> +<p>এখন আবার এমুলেটরটি চালু করার চেষ্টা করুন । যদি এটি এখনো কাজ না করে, তাহলে সাহায্যের জন্য <a href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a>, irc.mozilla.org তে দিয়ে দিন।</p> +<h2 id="কনফিগারেশন_সেটিংস_মুছে_ফেলা">কনফিগারেশন সেটিংস মুছে ফেলা</h2> +<p>কখনো কখনো এমুলেটরের অনেক পুরোনো অপ্রয়োজনীয় কনফিগারেশন সেটিংস কাজে অনেক ঝামেলা করতে পারে । নিচের জিনিসটি করে আপনি এর IndexedDB ডাটাবেস ডিলিট করে এই ঝামেলা থেকে মুক্তি পেতে পারেন ।</p> +<ol> + <li>ADB server চলছে কিনা এটি নিশ্চিত করুন, যেটি <a href="#Make_sure_the_adb_server_is_running">Make sure the adb server is running</a> এ বর্ণনা করা হয়েছে।.</li> + <li> + <p style="margin-left: .25in;">এমুলেটর চালু করা</p> + </li> + <li>হোষ্ট কম্পিউটারের টার্মিনালে, আপনার এমুলেটরের জন্য রুট কোডের ভিতরের নির্দেশিকাতে যান, তারপর লিখুন : <code>out/host/<platform>/bin/adb -e shell</code>; ম্যাক-এর জন্য, এটি হবে <code>out/host/darwin-x86/bin/adb -e shell</code>.</li> + <li>এখন আপনি ADB সেল-এ প্রবেশ করেছেন এবং আপনি আপনার এমুলেটেড ডিভাইসে সেল কমান্ড কার্যকর করতে পারবেন। B2G ডিভাইসটিকে বন্ধ করি : <code>stop b2g</code>.</li> + <li>IndexedDB database কে ডিলিট করি : <code>rm -rf /data/local/indexedDB</code>.</li> + <li>এমুলেটেড ডিভাইসটিকে পুনরায় চালু করি : <code>start b2g</code>.</li> +</ol> +<p>এই ধাপে এসে আশা করা যায় যে, আপনিGAIA interface – এর শেষ ধাপে চলে এসেছেন এবং সব কিছু ঠিক আছে।</p> +<h2 id="যদি_এমন_হয়_এমুলেটরটি_চালু_হলো_কিন্তু_MOZILLA_TECHNOLOGY_স্প্লাশ_স্ক্রীন_আসার_আগে_অথবা_পরে_স্ক্রীন_কালো_হয়ে_গেলো">যদি এমন হয়, এমুলেটরটি চালু হলো কিন্তু "MOZILLA TECHNOLOGY" স্প্লাশ স্ক্রীন আসার আগে অথবা পরে স্ক্রীন কালো হয়ে গেলো</h2> +<p>এমন হওয়ার কারণ হতে পারে মেশিনের ড্রাইভারের ত্রুটির জন্য যেটি এমুলেটরটি চালাচ্ছে । লিনাক্স- এরওপেনসোর্স “NOUVEAU”ড্রাইভারসএ এটিপর্যবেক্ষণকরাহয়েছে । এটার সহজ সমাধান হতে পারে মেশিনের ড্রাইভারস গুলো বদলে ফেলা। এই ক্ষেত্রে “NOUVEAU” ড্রাইভারের বিকল্প হিসেবে আরো অতিরিক্ত কিছু ড্রাইভার ইন্সটল করা যেতে পারে। অন বোর্ড গ্রাফিক্স চিপসেটের ক্ষেত্রে, ডিফল্ট লিনাক্স ওপেন সোর্স ড্রাইভার এমুলেটর এরর “'eglMakeCurrent failed”দেখাতে পারে যেটি “OpenGL” এর ২.০ ভার্সন সাপোর্ট করে যেটি GPUএমুলেশনের জন্য দরকার । এর সমাধান হলো GPU কে ডিঅ্যাক্টিভেট করা । করার জন্য <code>run-emulator.sh</code> script লিখতেহবে (এটা কিছুটা ধীরে হবে) ।</p> +<h2 id="এমুলেটর_কনফিগার_করার_পদ্ধতি"><span class="short_text" id="result_box" lang="bn"><span class="hps">এমুলেটর</span> <span class="hps">কনফিগার করার পদ্ধতি</span></span></h2> +<p>এখানে অনেক অপশন আছে যার মাধ্যমে আপনি যেই ডিভাইসটিকে এমুলেট করতে চান তার মতো করে আপনি আপনার এমুলেটরটিকে খাপ খাইয়ে নিতে পারেন। এটা কিভাবে করবেন এই বিভাগ এই সম্পর্কে আপনাকে কিছু প্রাথমিক তথ্য প্রদান করবে। আপনি আপনার এমুলেটর কনফিগারেশন অ্যাডজাস্ট করতে পারেন run-emulator.sh স্কিপ্টটি এডিট করে (অথবা, আদর্শিকভাবে, এটার অনুলিপি করে)। অল্প কিছু প্রয়োজনীয় জিনিস এখানে আলোচনা করা হয়েছে ; অন্য বিষয়ে আরও বিস্তারিত জানার জন্য <a class="external" href="http://www.qemu.org/" title="http://www.qemu.org/">look at the qemu site</a> যেতে পারেন ।</p> +<div class="note"> + <strong>Tip:</strong>সিমুলেটটের জন্য প্রত্যেকটি ডিভাইসের run-emulator.shএকএকটিকপিতৈরিকরুন । এটা আলাদা আলাদা কনফিগারেশনে চালু হওয়ার কাজটা সহ্জ করে দেয় ।</div> +<h2 id="স্কিনস_পরিবর্তন"><span class="short_text" id="result_box" lang="bn"><span class="hps">স্কিনস</span></span><span class="short_text" id="result_box" lang="bn"><span class="hps"> পরিবর্তন</span> </span></h2> +<p>প্রথমে এমুলেটর অটোম্যাটিক “HVGA” মোডে চালু হয় ; এটা অর্ধেক VGA ,অথবা ৩২০x ৪৮০ পিক্সেলের হয় । যখন এমুলেটরটি চালু হয় তখন তা –skin প্যারামিটারে বলা থাকে । আপনি run-emulator.sh স্কিপ্টটি এডিট করে বিভিন্ন ডিসপ্লে তে সুইচ করতে পারেন (অথবা, আদর্শিকভাবে, এটার অনুলিপি করে) .প্রভাইডেড স্কিন গুলো হলো :</p> +<ul> + <li>HVGA (320x480)</li> + <li>QVGA (240x320)</li> + <li>WQVGA (240x400)</li> + <li>WQVGA432 (240x432)</li> + <li>WSVGA (1024x600)</li> + <li>WVGA800 (480x800)</li> + <li>WVGA854 (480x854)</li> + <li>WXGA720 (1280x720)</li> + <li>WXGA800 (1280x800)</li> +</ul> +<p>এই স্কিনগুলো <code>B2G/development/tools/emulator/skins</code> ডাইরেক্টরিতে রয়েছে । স্কিন গুলো অনেক সিম্পল ; যদি আপনি এদের দিকে তাকান, তারা এক্তি ফোলডারে রয়েছে যা PNG ফাইলে পরিপূর্ণ এবং যা বিভিন্ন <span class="short_text" id="result_box" lang="bn"><span class="hps">ইউজার ইন্টারফেস</span> অবজেক্ট</span> এবং <span class="short_text" id="result_box" lang="bn"><span class="hps">একটি টেক্সট ফাইল যার নাম</span></span> <code>layout যা </code><span class="short_text" id="result_box" lang="bn"><span class="hps">ইন্টারফেস এবং</span> <span class="hps">স্কিন</span> আরিয়া <span class="hps"> লেআউট</span> <span class="hps">বর্ণনা করে</span> </span>. <span class="short_text" id="result_box" lang="bn"><span class="hps">প্রয়োজন হলে</span> <span class="hps">কাস্টম</span> <span class="hps">স্কিনস</span> <span class="hps">তৈরি</span> করুন যা <span class="hps">মোটামুটি</span> <span class="hps">সহজ</span></span> ।</p> +<h2 id="মেমরি_Size_পরিবর্তন"><span class="short_text" id="result_box" lang="bn"> <span class="hps">মেমরি Size</span></span><span class="short_text" id="result_box" lang="bn"><span class="hps"> পরিবর্তন</span></span></h2> +<p>মেমোরি সাইজ কনফিগার করার জন্য আনার আর একটা অপশন দরকার . <span class="short_text" id="result_box" lang="bn"><span class="hps">ডিফল্ট</span> <span class="hps">512</span> <span class="hps">মেগাবাইট </span></span>; <span class="short_text" id="result_box" lang="bn"><span class="hps">কিন্তু</span></span>, যে ডিভাইস্টি আপনি ব্যবহার করছেন তার মেমোরি যদি বেশি অথবা কম হয়, তখন খাপ খায়িয়ে নেওয়ার জন্য সেটিংস পরিবর্তন করাটা জরুরি, যা নিশ্চিত করবে আপনি যে অ্যাপ টা রান করাবেন সেটি আপনার ডিভাইসের সাহে যায়। <span class="short_text" id="result_box" lang="bn"><span class="hps">এটি করার জন্য</span></span>, <code>প্রয়োজন হলে -memory প্যারামিটারের মান মেগাবাইটে পরিবর্তন করে নিন</code> . তাছাড়া ডিফল্ট ৫১২এমবি, ২৫৬এমবি এবং ১০২৪এমবি দিয়েওয়াপ্নি টেস্ট করতে পারেন। </p> +<p>ডিভাইসের এমুলেটেড <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="storage capacity">স্টোরেজ ক্ষমতা পরিবর্তনের জন্য</span></span> ( <span class="short_text" id="result_box" lang="bn">লোকাল ডাঁটা <span class="hps">জন্য</span> <span class="hps">স্টোরেজ স্পেস</span></span>, যেমনটা <span id="result_box" lang="bn"><span class="hps">একটি মোবাইল</span> <span class="hps">ফোনে</span> <span class="hps">ফ্ল্যাশ</span> <span class="hps">স্টোরেজ বা</span> <span class="hps">একটি কম্পিউটারে</span> <span class="hps">হার্ড</span> <span class="hps">ড্রাইভ</span></span>), <code>-partition-size</code> প্যারামিটার বদল করুন। ডিফল্ট ৫১২এমবি, কিন্তু টেস্ট করার জন্য আপনি যেকোনো সাইজ বলে দিতে পারবেন।</p> +<h2 id="নেটওয়ার্ক_কানেকটিভিটি">নেটওয়ার্ক কানেকটিভিটি</h2> +<p>যদি কোনো কারণে আপনি আপনার এমুলেটরটিকে ইন্টারনেট-এর না সংযুক্ত না করাতে পারেন তাহলে কমান্ডলাইন-এ নিচের কমান্ডটি প্রবেশ করান</p> +<pre>adb shell setprop net.dns1 10.0.2.3</pre> diff --git a/files/bn/archive/b2g_os/ফায়ারফক্স_ওএস_সিমুলেটর_ব্যবহার_করা/index.html b/files/bn/archive/b2g_os/ফায়ারফক্স_ওএস_সিমুলেটর_ব্যবহার_করা/index.html new file mode 100644 index 0000000000..d4b6547726 --- /dev/null +++ b/files/bn/archive/b2g_os/ফায়ারফক্স_ওএস_সিমুলেটর_ব্যবহার_করা/index.html @@ -0,0 +1,62 @@ +--- +title: ফায়ারফক্স ওএস সিমুলেটর ব্যবহার করা +slug: Archive/B2G_OS/ফায়ারফক্স_ওএস_সিমুলেটর_ব্যবহার_করা +translation_of: Archive/B2G_OS/Simulator +--- +<p>ফায়ারফক্স ওএস সিম্যুলেটর হলো একটি ডেস্কটপে ব্যবহার উপযোগী একটি টুল যা আপনাকে দেবে একটি ফায়ারফক্স ওএস চালিত মুঠোফোনে আপনার অ্যাপটিকে পরীক্ষা করে দেখার অনুভূতি। ফায়ারফক্স মার্কেটপ্লেস এ জমা দানের পূর্বে অ্যাপগুলোকে যাচাই করে নেবার জন্য এটাই সবচাইতে সহজ ও উপযোগী পদ্ধতি। ফায়ারফক্স ওএস সিম্যুলেটরকে পূর্বে "r2d2b2g" নামে ডাকা হতো, কিন্তু ওটা বড্ড খটমটে শোনাত।</p> +<p>সিম্যুলেটরটিকে ডেস্কটপ ফায়ারফক্সের একটি অ্যাড-অন হিসেবে প্যাকেজ করা আছে। ফায়াফক্স ১৭ এবং তার পরবর্তী ভার্সনগুলোর যে কোনটিতে আপনি এটা ব্যবহার করতে পারেন।</p> +<p>যদিওবা ফায়ারফক্স ওএস ডেস্কটপে চালাবার অন্যান্য ব্যবস্থা রয়েছে তবুও অ্যাপ ডেভেলপারদের জন্য এটাই সবচাইতে ভালো আর উপযোগী। যদি আপনি ফায়ারফক্স ওএস এর একজন কোর ওএস প্লাটফর্ম ডেভেলপার হয়ে থাকেন কিংবা অনুবাদক হিসেবে কাজ করেন তো আপনার চাহিদা আরও ভালোভাবে মেটাতে আরো বিভিন্ন টুল রয়েছে। সিম্যুলেটর এ্যাড-অনটিতে অন্তর্ভূক্ত রয়েছে টেস্ট এনভায়রনমেন্টে অ্যাপ যুক্ত করার ব্যবস্থা এবং এটিতে রিমোট ডিবাগিং, ওয়েব কনসোল এবং অন্যান্য ফিচারের সমর্থন রয়েছে। এটাতে আরো আছে একটি দৃশ্যমান হোম বাটন যা আপনি ক্লিক করতে পারেন এবং এটি ইউজার এজেন্ট স্ট্রিংকে ফায়ারফক্স ওএস ডিভাইসে ব্যবহৃত স্ট্রিংয়ের ন্যায় সেট করে। ফলে, একজন অ্যাপ ডেভেলপারকে প্রায় সব ধরণের স্বাচ্ছন্দ্যময় আর উপযোগী পরিবেশই তৈরী করে দেয়া হচ্ছে।</p> +<h2 id="ফায়ারফক্স_ওএস_সিম্যুলেটর_ইন্সটল_করা">ফায়ারফক্স ওএস সিম্যুলেটর ইন্সটল করা</h2> +<ol> + <li>ফায়ারফক্স ব্রাউজার ব্যবহার করে, এই লিংকটিতে যান: <a href="https://addons.mozilla.org/bn-BD/firefox/addon/firefox-os-simulator/" title="/bn-BD/firefox/addon/firefox-os-simulator/">https://addons.mozilla.org/addon/firefox-os-simulator/</a></li> + <li><strong>Add to Firefox (ফায়ারফক্সে যুক্ত করুন)</strong> - তে ক্লিক করুন। এটা বেশ বড় আকারের ফাইল। ডাউনলোড করা শেষ হলে স্ক্রিনের নির্দেশনাগুলো অনুসরণ করুন।</li> +</ol> +<div class="warning"> + <p>অ্যাড-অনটির আকার বেশ বড় হবার কারনে ইনস্টল করার সময় কিছু সময়ের জন্য ফায়ারফক্স থেমে যেতে পারে এবং আনরেসপন্সিভ স্ক্রিপ্ট (unresponsive script) উইন্ডো দেখাতে পারে। এটার কারন অবশ্য <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814505" title="https://bugzilla.mozilla.org/show_bug.cgi?id=814505">বাগ ৮১৪৫০৫</a>. যদি এমনটা ঘটে তবে Continue (<em>অবিরত থাকুন)</em> বোতামটি চাপুন, এবং তাতে ফায়ারফক্স অ্যাড-অনটির ইনস্টল করতে থাকবে।</p> +</div> +<h2 id="সিম্যুলেটর_চালু_করা">সিম্যুলেটর চালু করা</h2> +<ol> + <li><strong>ফায়ারফক্স</strong> মেন্যু (Windows) কিংবা <strong>Tools (সরঞ্জামাদি) </strong>মেন্যু (ম্যাক, লিনাক্স), থেকে <strong>Web Developer (ওয়েব মানোন্নয়নকারী</strong>) তে যান এবং <strong>Firefox OS Simulator (ফায়ারফক্স ওএস সিম্যুলেটর) </strong>এ ক্লিক করুন। ড্যাশবোর্ডটি সামনে চলে আসবে। + <p><img alt="Dashboard" height="378" src="/files/4487/dashboard.jpg" width="502"></p> + </li> + <li><strong>বন্ধ করা রয়েছে</strong> বোতামটিতে ক্লিক করুন। এটা <strong>চালু রয়েছে</strong> বোতামে পরিবর্তিত হবে এবং ফায়ারফক্স ওএস নিজস্ব উইন্ডো নিয়ে চালু হবে। প্রদর্শিত উইন্ডোটি পূর্বনির্ধারিত ৩২০x৪৮০ মাপে দেখা যাবে।<br> + <p><img alt="Simulator" src="/files/4485/simulator.jpg" style="width: 336px; height: 552px;"></p> + <p>সিম্যুলেটরটিকে বন্ধ করে দিতে ড্যাশবোর্ড থেকে <strong>Running (চালু রয়েছে)</strong> বোতামে চাপ দিন অথবা সিম্যুলেটর উইন্ডো বন্ধ করে দিন।</p> + </li> +</ol> +<div class="note"> + <p><strong>উল্লেখ্য:</strong> আপনি Developer Tools (মানোন্নয়নকারী সরঞ্জামাদি) থেকে কমান্ড লাইন ব্যবহার করে যথাক্রমে <code>firefoxos start</code> এবং <code>firefoxos stop</code> কমান্ড দিয়ে সিম্যুলেটরটিকে চালু এবং বন্ধ করতে পারবেন।</p> +</div> +<h2 id="সিম্যুলেটরের_অভ্যন্তরে_পরিচালনা">সিম্যুলেটরের অভ্যন্তরে পরিচালনা</h2> +<p>সোয়াইপ মোশন অনুকরণ করতে চাইলে মাউস দিয়ে ক্লিক ও ড্র্যাগ করুন। মাউসের স্ক্রল হুইলটি এ্যাপকে উপরে নিচে ওঠানামা করাবে, যেমন Settings এ্যাপ। লং প্রেস (long press) সিম্যুলেট করার জন্য মাউসের বাটন চেপে ধরে রাখুন।</p> +<p>হোম স্ক্রিনে ফিরে যেতে চাইলে সিম্যুলেটরের নিচের হোম বাটনে চাপ দিন, অথবা আপনার কীবোর্ডের <strong>Home</strong> কী-তে চাপ দিন। যেসকল ম্যাক কীবোর্ডের <strong>Home</strong> কী নেই, সেখানে <strong>Fn + বাম এ্যারো</strong> ব্যবহার করা যেতে পারে।</p> +<h2 id="কনসোল_চেকবক্স">কনসোল চেকবক্স</h2> +<p>আপনার এ্যাপ নিয়ে কাজ করার সময় উদ্ভুত এরর বা ত্রুটিগুলো খুঁজে পাবার জন্য সিম্যুলেটর চালু করার পূর্বে Console চেকবক্সে ক্লিক করে নিন, এতে একটি এরর কনসোল (Error Console) চালু হয় উদ্ভুত এররসমূহ প্রদর্শন করবে।</p> +<h2 id="সিমুলেটরে_অন্তর্ভুক্ত_ওয়েব_এপিআই(Web_API)_সমূহ">সিমুলেটরে অন্তর্ভুক্ত ওয়েব এপিআই(Web API) সমূহ</h2> +<p>মোজিলা নেটিভ প্লাটফর্মের সুযোগ সুবিধা ওপেন ওয়েব এ্যাপে প্রদান করার জন্য বিভিন্ন ওয়েব এপিআই (WebAPI) নিয়ে কাজ করছে। বর্তমান সিম্যুলেটরে সমর্থিত ওয়েব এপিআইসমূহ হল:</p> +<ul> + <li>Contacts API</li> + <li>Settings API</li> + <li><span style="color: #ff0000;"><span style="background-color: #ffff00;">? আর কোন কোন এপিআই ?</span></span></li> +</ul> +<h2 id="সিম্যুলেটরে_একটি_অ্যাপ_ইনস্টল_করা">সিম্যুলেটরে একটি অ্যাপ ইনস্টল করা</h2> +<p>সিম্যুলেটরে হোস্টেড এ্যাপ (Hosted App) ইন্সটল করতে চাইলে, URL বক্সে এ্যাপটির ম্যানিফেস্টের URL টি লিখুন এবং <strong>Add Manifest</strong> বাটনে চাপ দিন। এর ফলে এ্যাপটি সিম্যুলেটরে ইন্সটল হবে। আপনার পরীক্ষা করার জন্য নিচে একটি পরীক্ষামূলক আবহাওয়া পূর্বাভাসের এ্যাপের ম্যানিফেস্টের লিংক দেওয়া হল।</p> +<pre>http://jlongster.github.com/weatherme/manifest.webapp</pre> +<p>এ্যাপের আইকনটি হোমস্ক্রিনগুলোর যেকোন একটিতে যুক্ত হবে।</p> +<p>You can also install a plain website in the same way. Just type the website's URL in the box and click <strong>Add URL</strong>, and an icon for the site will be added to a home screen. Autocompletion works if you have the website open in another tab.</p> +<p>To install a packaged app in the Simulator, click the <strong>Add Directory</strong> button, then select the mini-manifest of the app on your local filesystem.</p> +<p>To remove an app from the Simulator, click the <strong>Remove</strong> link for the app in the dashboard. You may have to restart the Simulator to see it gone.</p> +<h2 id="একটি_অ্যাপ_আপডেট_করা">একটি অ্যাপ আপডেট করা</h2> +<p>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.</p> +<h2 id="বাগ_রিপোর্ট_করা">বাগ রিপোর্ট করা</h2> +<p>মনে রাখবেন এই সিমুলেটরটি একেবারেই নতুন একটি টুল এবং বর্তমানে ডেভেলপমেন্ট পর্যায়ে রয়েছে। যদি আপনি এতে কোনরূপ ত্রুটি / বাগ দেখতে পেলে অনুগ্রহ করে <a href="https://github.com/mozilla/r2d2b2g/issues?state=open" title="https://github.com/mozilla/r2d2b2g/issues?state=open">আমাদেরকে জানিয়ে দিন</a>।</p> +<h2 id="অতিরিক্ত_তথ্য">অতিরিক্ত তথ্য</h2> +<p>সিমুলেটরটি <a href="/bn-BD/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client" title="/bn-BD/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client">ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট </a> (যা বিটুজি(B2G) ডেস্কটপ ক্লায়েন্টও বলা হয়),<br> + ফায়ারফক্স ওএস এর একটি বিল্ড যা উইন্ডোজ,ম্যাক এবং লিনাক্সে চলে। ফায়ারফক্স ওএস সিমুলেটর<br> + ফায়ারফক্স ওএস ডেস্কটপ এ অ্যাপ নিরীক্ষা করা সহজ করে দিয়েছে কারণ এটি পরিবেশ(environment)এ অ্যাপ যোগের বৈশিষ্ট্য অর্ন্তভুক্ত করেছে এবং অ্যাপ ডেভেলপারদের<br> + দরকার অনুযায়ী এটিকে কনফিগার/বিস্তৃত করা সম্ভব।<br> + যদিও সিমুলেটরটি ফায়ারফক্স ওএস ডেস্কটপ ক্লায়েন্ট ব্যবহার করে করে ,বিটুজি(B2G) ডেস্কটপ<br> + গায়া এবং বিটুজি(B2G) এর ক্ষেত্রে প্রযোজ্য ডকুমেন্টেশন সিমুলেটর এর ক্ষেত্রেও কিছু ক্ষেত্রে<br> + প্রযোজ্য। এখানে সে সমস্ত ডক এর কিছু দেওয়া হল :</p> +<p><a href="/bn-BD/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client" title="/bn-BD/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client">ফায়ারফক্স ওএস এর ডেস্কটপ ক্লায়েন্ট ব্যবহার করা</a></p> +<p><a href="https://wiki.mozilla.org/Gaia/Hacking" title="https://wiki.mozilla.org/Gaia/Hacking">গায়া (Gaia) হ্যাক করা</a></p> 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 +--- +<p><span class="seoSummary"><strong>CSS3 </strong><em>ক্যাস্কেডিং স্টাইল শীট</em> ভাষার সর্বশেষ সংস্করণ, যা মূলত CSS2.1 এর ওপর কাজ করে, একে আরো উন্নত করে বানানো হয়েছে। এতে আছে অনেক প্রত্যাশিত, নতুন ফিচার, যেমনঃ বাঁকানো কর্নার (round corner), ছায়া (shadow), <a href="/bn-BD/CSS/Using_CSS_gradients">গ্র্যাডিয়েন্ট</a>, <a href="/bn-BD/CSS/CSS_transitions">transitions</a> অথবা <a href="/bn-BD/CSS/CSS_animations">এনিমেশন</a>। আরও আছে নতুন লে-আউট যেমন <a href="/bn-BD/CSS/Using_CSS_multi-column_layouts">বহু-কলাম</a>, ফ্লেক্সিবল বক্স বা গ্রিড লে-আউট। যেসব অংশ এখনো পরীক্ষামূলক, তাদের কোডের আগে ভেন্ডর এর প্রিফিক্স দেওয়া আছে। এসব পরীক্ষামূলক অংশগুলো ব্যবহার না করাই ভাল, আর করলেও অনেক সাবধানে করতে হবে। কারণ এদের সিনট্যাক্স আর ব্যবহারবিধি ভবিষ্যতে পরিবর্তিত হতে পারে। </span></p> + +<h2 id="মডিউল_সমূহ_এবং_মান_নির্ধারণ_প্রক্রিয়া">মডিউল সমূহ এবং মান নির্ধারণ প্রক্রিয়া</h2> + +<p>২০০২ এর আগস্ট থেকে ২০১১ এর জুন, অর্থাৎ প্রায় ৯ বছর লেগেছে সিএসএস ২ এর সুপারিশকৃত অবস্থায় আসতে। আনুষঙ্গিক কিছু বৈশিষ্ট্যের কারনেই এত বেশি সময় লেগেছে। ত্রুটিবিহীন বৈশিষ্ট্য গুলোর আদর্শিকিকরণ প্রক্রিয়া তরান্বিত করার জন্য W3C এর <a class="external" href="http://www.w3.org/blog/CSS/" title="http://www.w3.org/blog/CSS/">সিএসএস কর্মকর্তা দল</a> <a class="external" href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules" title="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules">বেইজিং ডকট্রিন</a> নামক একটি সিদ্ধান্ত নেয় যে, সিএসএস-কে ছোট ছোট ভাগে ভাগ করা হবে, এবং ভাগ গুলোকে <em>মডিউল</em> বলা হবে। এই মডিউল গুলোর প্রত্যেকটি এখন এই ভাষার স্বাধীন অংশ এবং নিজস্ব গতিতে আদর্শিকিকরণের দিকে এগিয়ে যাচ্ছে। একদিকে যখন কিছু মডিউল W3C এর ইতোমধ্যে সুপারিশকৃত অবস্থায় রয়েছে, তখন আরেক দিকে কিছু মডিউল এখনো খসড়া পর্যায়েই রয়ে গেছে। আবার নতুন প্রয়োজন চিহ্নিত হলে নতুন মডিউলও যুক্ত হচ্ছে।</p> + +<p><a href="/@api/deki/files/6120/=CSS_Modules_and_Snapshots.png" title="CSS_Modules_and_Snapshots.png"><img alt="CSS Modules and Snapshots as defined since CSS3" class="internal lwrap" src="/files/3623/CSS_Modules_and_Snapshots.png" style="float: left; width: 550px;"> </a>আনুষ্ঠানিকভাবে সিএসএস এর কোন আদর্শ মান নেই। প্রত্যেকটা মডিউল স্বাধীনভাবে আদর্শিকিকরণ করা হচ্ছে, তাই আদর্শ সিএসএস এর মধ্যে পূর্ণাঙ্গ মডিউল গুলোর সংশোধিত এবং বর্ধিত সিএসএস২.১ রয়েছে। এখানে প্রত্যেকটির একই স্তরে হওয়াটা জরুরী নয়। সময়ের প্রত্যেকটি পর্যায়ে সিএসএস২.১ এবং পূর্ণাঙ্গ মডিউল সমূহের তালিকাসহ আদর্শ সিএসএস এর একটি চিত্র বর্ণনা করা যাবে।</p> + +<p>W3 কনসোর্টিয়াম নির্দিষ্ট সময় পর পর এধরনের চিত্র প্রকাশ করে। যেমনঃ <a class="external" href="http://www.w3.org/TR/css-beijing/" title="http://www.w3.org/TR/css-beijing/">২০০৭</a> বা <a class="external" href="http://www.w3.org/TR/css-2010/" title="http://www.w3.org/TR/css-2010/">২০১০</a> এ করেছিল।</p> + +<p>যদিও আজ লেভেল ৩ এর উপরের কোন মডিউল এখন আদর্শ নয়, তবে এটা ভবিষ্যতে পরিবর্তিত হবে। কিছু মডিউল, যেমনঃ সিলেক্টর ৪ বা সিএসএস বর্ডার সমূহ এবং ব্যাকগ্রাউন্ড লেভেল ৪ ইতোমধ্যে সম্পাদকের খসড়াতে চলে এসেছে। কিন্তু এগুলো এখনো প্রথম প্রকাশিত কার্যকর খসড়া অবস্থায় পৌছেনি।</p> + +<h2 id="সিএসএস_মডিউল_সমূহের_অবস্থা" style="">সিএসএস মডিউল সমূহের অবস্থা</h2> + +<h3 id="স্থিতিশীল_মডিউল_সমূহ">স্থিতিশীল মডিউল সমূহ</h3> + +<p>অল্প কিছু সিএসএস মডিউল ইতোমধ্যে স্থিতিশীল অবস্থায় আছে এবং CSSWG এর সুপারিশকৃত তিনটি পর্যায়ের একটিঃ Candidate Recommendation এ পৌছেছে। অর্থাৎ প্রস্তাবিত সুপারিশ বা ইতোমধ্যে সুপারিশ করা হয়েছে এমন অবস্থায় রয়েছে। এগুলো কোন প্রকার প্রেফিক্স ছাড়াই ব্যবহার করা যাবে। তবে অল্প কিছু বৈশিষ্ট্য বাদ পড়ে যেতে পারে।</p> + +<p>এই মডিউল গুলো সিএসএস২.১ এর বৈশিষ্ট্য সমূহ সংশোধিত ও বর্ধিত করে, যা সিএসএস২.১ এর প্রাণ বলে বিবেচনা করা হয়। সবকিছু মিলিয়ে এগুলো-ই সিএসএস এর বর্তমান চিত্র।</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="thirdColumn greenBg"><strong>{{ SpecName("CSS3 Colors", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Colors") }} since June 7th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>এটি {{ cssxref("opacity") }} প্রপার্টি যুক্ত করে, এবং {{cssxref("<color>")}} মান তৈরি করার জন্য <code>hsl</code><code>()</code>, <code>hsla()</code>, <code>rgba()</code> ও <code>rgb()</code>ফাংশন ব্যবহার করে। এটা <code>currentColor</code> কিওয়ার্ডকেও বৈধ রঙ হিসেবে ব্যবহারের সুযোগ দেয়।</p> + + <p><code>transparent</code> রঙও এখন একটি বাস্তব রঙ (আলফা চ্যানেলের সমর্থনের জন্য ধন্যবাদ) এবং এটি এখন <code>rgba(0,0,0,1.0)</code> এর বিকল্প।</p> + + <p>এটা এখন সিস্টেম-কালার কিওয়ার্ড সমূহ, যা উৎপাদন কাজে ব্যবহার করা উচিত না, তা সমর্থন করে না।</p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Selectors") }} since September 29th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>Substring matching attribute selectors, <code>E[attribute^="value"]</code> , <code>E[attribute$="value"]</code> , <code>E[attribute*="value"]</code> .</li> + <li>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") }}.</li> + <li>Pseudo-elements are now characterized by two colons rather then one: <code>:after</code> becomes {{ cssxref("::after") }}, <code>:before</code> becomes {{ cssxref("::before") }}, <code>:first-letter</code> becomes {{ cssxref("::first-letter") }}, and <code>:first-line</code> becomes {{ cssxref("::first-line") }}.</li> + <li>The new <em>general sibling combinator</em> ( <code>h1~pre</code> ).</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a class="external" href="http://dev.w3.org/csswg/selectors4/" title="http://dev.w3.org/csswg/selectors4/">next iteration of the Selectors specification</a> is already in progress, though it still hasn't reached the First Public Working Draft stage.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Namespaces", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds the support for the XML Namespaces by defining the notion of <em>CSS qualified name</em> , using the ' <code>|</code> ' syntax and adding the {{ cssxref("@namespace") }} CSS at-rule.</p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Media Queries", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends the former media type ( <code>print</code>, <code>screen</code>, <code>…</code> ) to a full language allowing <a href="/en/CSS/Media_queries" title="en/CSS/Media_queries">queries on the device media capabilities</a> like <code>only screen and (color)</code> .</p> + + <p>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.</p> + </td> + </tr> + </tbody> +</table> + +<p>The <a href="http://dev.w3.org/csswg/mediaqueries4" title="http://dev.w3.org/csswg/mediaqueries4">next iteration of this specification</a> is in the work, allowing to tailor a Web site regarding the input methods available on the user agent, with new media features like <code>hover</code> or <code>pointer</code>. Detection of EcmaScript support, using the <code>script</code> media features is also proposed.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Style", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Style") }} since November 7th, 2013</td> + </tr> + <tr> + <td colspan="2">Formally defines the syntax of the content of the HTML <a href="/en/HTML/Global_attributes#attr-style" title="en/HTML/Global_attributes#attr-style"> <code>style</code> </a> global attribute.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Backgrounds", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Backgrounds") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>Support, on backgrounds, for any type of {{cssxref("<image>")}}, and not only for <code>uri()</code> defined ones.</li> + <li>Support for multiple background images.</li> + <li>The {{ cssxref("background-repeat") }} <code>space</code> and <code>round</code> values, and for the 2-value syntax of this CSS property.</li> + <li>The {{ cssxref("background-attachment") }} <code>local</code> value.</li> + <li>The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }}, and {{ cssxref("background-clip") }} properties.</li> + <li>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.</li> + <li>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.</li> + <li>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.<br> + <em><strong>At risk</strong> : due to insufficient browser support, this feature is at risk to be postponed to the next iteration of this module.</em></li> + <li>Support for shadows of the element with the CSS {{ cssxref("box-shadow") }} property.<br> + <em><strong>At risk</strong> : due to insufficient browser support, the animability of this feature is at risk, and may be postponed to</em> <em>the next iteration of this module</em> <em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a class="external" href="http://dev.w3.org/csswg/css4-background/" title="http://dev.w3.org/csswg/css4-background/">CSS4 iteration of the Backgrounds and Borders specification</a> 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).</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Multicol", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Multicol") }}</td> + </tr> + <tr> + <td colspan="2">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") }}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Speech", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Speech") }}</td> + </tr> + <tr> + <td colspan="2">Defines the <code>speech</code> media type, an aural formatting model and numerous properties specific for speech-rendering user agents.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Images", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Images") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Defines the {{cssxref("<image>")}} data type.</p> + + <p>Extends the <code>url()</code> syntax to support image slices using media fragments.</p> + + <p>Adds:</p> + + <ul> + <li>The <code>dppx</code> unit to the {{cssxref("<resolution>")}} data type.</li> + <li>The <code>image()</code> function as a more flexible alternative to <code>url()</code> to define an image from an url.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the <code>image()</code> function may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>Support for <code>linear-gradient()</code>, <code>repeating-linear-gradient()</code>, <code>radial-gradient()</code> and <code>repeating-radial-gradient()</code>.</li> + <li>The ability to define how a replaced element should fit in its element, using the CSS {{ cssxref("object-fit") }} property.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the {{ cssxref("object-fit") }} and property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to override the resolution and orientation of an external image using the CSS {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a href="#Images_(Level_4)">CSS Image Values and Replaced Content Level 4</a> which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Values", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Values") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Makes <code>initial</code> and <code>inherit</code> keywords usable on any CSS property.</p> + + <p>Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.</p> + + <p>Adds:</p> + + <ul> + <li>Definition for new font-relative length units: <code>rem</code> and <code>ch</code> .</li> + <li>Definition for viewport-relative length units: <code>vw</code>, <code>vh</code>, <code>vmax</code>, and <code>vmin</code> .</li> + <li>Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the <em>reference pixel</em> .</li> + <li>Definition for {{ cssxref("<angle>") }}, {{cssxref("<time>")}}, {{cssxref("<frequency>")}}, {{cssxref("<resolution>")}}.</li> + <li>Normative value to the definition of {{cssxref("<color>")}}, {{cssxref("<image>")}}, and {{ cssxref("<position>") }}.</li> + <li>Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and <code>toggle()</code> functional notations.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>calc()</code>, <code>attr()</code>, and <code>toggle()</code> functional notations may be postponed to </em> <em>the next iteration of this module</em><em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>Several types definition, like <code><ident></code> and <code><custom-ident></code>, have been deferred to CSS Values and Units Module Level 4.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Flexbox", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Flexbox") }}</td> + </tr> + <tr> + <td colspan="2">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") }}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Conditional", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Conditional") }}</td> + </tr> + <tr> + <td colspan="2">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()")}}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Text-decoration", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Text-decoration") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>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.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>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.</li> + <li>Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.</li> + </ul> + + <p>Precises:</p> + + <ul> + <li>The paint order of the decorations.</li> + </ul> + + <p><em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>text-decoration-skip</code>, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to </em> <em>the next iteration of this module</em><em>.</em></p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Fonts", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Fonts") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.</p> + + <p>Adds:</p> + + <ul> + <li>Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.</li> + <li>The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.</li> + <li>The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.</li> + <li>The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.</li> + <li>The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.</li> + <li>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.</li> + <li>The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h3 id="বিশোধন_প্রক্রিয়াধীন_মডিউল_সমূহ">বিশোধন প্রক্রিয়াধীন মডিউল সমূহ</h3> + +<p>Specifications that are deemed to be in the <em>refining phase</em> 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.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Basic UI", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Basic UI") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.<br> + <strong><em>At risk:</em> </strong> <em> due to insufficient browser support, standardization of the <code>padding</code><code>-box</code> value may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>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.<br> + <em><strong>At risk:</strong> 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 </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new <code>icon</code> value of the CSS {{ cssxref("content") }} property.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the <code>icon</code> value may be postponed to CSS4. </em></li> + <li>Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.</li> + <li>Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.</li> + <li>Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.<br> + <em><strong>At risk:</strong> 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 </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to define the hotspot of a cursor as well as the new <code>none</code>, <code>context-menu</code>, <code>cell</code>, <code>vertical-text</code>, <code>alias</code>, <code>copy</code>, <code>no-drop</code>, <code>not-allowed</code>, <code>nesw-</code><code>resize</code>, <code>nwse-</code><code>resize</code>, <code>col-resize</code>, <code>row-resize</code>, <code>all-scroll</code>, <code>zoom-in</code>, <code>zoom-out</code>, extending the {{ cssxref("cursor") }} property.</li> + <li>The ability to specify the sequential navigation order (that is the <em>tabbing order</em> ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the navigation properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>An early list of what could be in the next iteration of the CSS Basic User Interface Module is <a class="external" href="http://wiki.csswg.org/spec/css4-ui" title="http://wiki.csswg.org/spec/css4-ui">available</a>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transitions", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Transitions") }}</td> + </tr> + <tr> + <td colspan="2">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.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Animations", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Animations") }}</td> + </tr> + <tr> + <td colspan="2">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.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transforms", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Transforms") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>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: <code>matrix</code><code>()</code>, <code>translate()</code>, <code>translateX()</code>, <code>translateY()</code>, <code>scale()</code>, <code>scaleX()</code>, <code>scaleY()</code>, <code>rotate()</code>, <code>skewX()</code>, and <code>skewY()</code>.</li> + <li>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: <code>matrix</code> <code>3d()</code>, <code>translate3d()</code>, <code>translateZ()</code>, <code>scale3d()</code>, <code>scaleZ()</code>, <code>rotate3d()</code>, <code>rotateX</code><code>()</code> ,<code>rotateY</code><code>()</code>, <code>rotateZ()</code>, and <code>perspective()</code>.</li> + </ul> + + <p><em><strong>Note:</strong> this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms. </em></p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Fragmentation", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Fragmentation") }}</td> + </tr> + <tr> + <td colspan="2">Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Text", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Text") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>the CSS {{ cssxref("text-transform") }} property with the value <code>full-width</code>.</li> + <li>the CSS {{ cssxref("text-align") }} property with the value <code>start</code>, <code>end</code>, <code>start end</code>, and <code>match-parent</code> for a better support of documents with multiple directionalities of text.</li> + <li>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.</li> + <li>the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.</li> + <li>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.</li> + <li>Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.</li> + <li>Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>A few features present in early CSS Text Level 3 draft have being <a class="external" href="http://dev.w3.org/csswg/css3-text/#recent-changes" title="http://dev.w3.org/csswg/css3-text/#recent-changes">postponed to the next iteration of this module</a> .</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Variables", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Variables") }}</td> + </tr> + <tr> + <td colspan="2">Defines a mechanism allowing to define variables in CSS.</td> + </tr> + </tbody> +</table> + +<h3 id="সংশোধন_প্রক্রিয়াধীন_মডিউল_সমূহ">সংশোধন প্রক্রিয়াধীন মডিউল সমূহ</h3> + +<p>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.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Writing Modes", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Writing Modes") }}</td> + </tr> + <tr> + <td colspan="2">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.</td> + </tr> + </tbody> +</table> + +<h3 id="গবেষণাধীন_মডিউল_সমূহ">গবেষণাধীন মডিউল সমূহ</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Images", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Images") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>the <code>image()</code> functional notation to describe the directionality of the image (<code>rtl</code> or <code>ltr</code>), allowing for bidi-sensitive images.</li> + <li>the {{ cssxref("image-orientation") }} property by adding the keyword <code>from-image</code>, allowing to follow EXIF data stored into images to be considered.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>the <code>image-set()</code> functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.</li> + <li>the <code>element()</code> functional notation allowing the use of part of the page as image.</li> + <li>the <code>cross-fade()</code> functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.</li> + <li>the <code>conic-gradient()</code> and <code>repeating-conic-gradient()</code> functional notation describing a new type of gradient.</li> + <li>the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Device") }}</td> + </tr> + <tr> + <td colspan="2">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.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Grid", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Grid") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds a new layout based on a grid.</p> + + <p><em><strong>Note:</strong> there are current experiment towards merging this specification with the <strong>CSS Template Layout</strong> . </em></p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 GCPM", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 GCPM") }}</td> + </tr> + <tr> + <td colspan="2">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.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Exclusions and Shapes", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Exclusions and Shapes") }}</td> + </tr> + <tr> + <td colspan="2">Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Lists", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Lists") }}</td> + </tr> + <tr> + <td colspan="2">Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Regions", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Regions") }}</td> + </tr> + <tr> + <td colspan="2">Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.</td> + </tr> + </tbody> +</table> + +<p> </p> 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 +--- +<p>(bn-BD translation)</p> + +<p>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.</p> + +<p>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 <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p> + +<div class="note"> +<p><strong>Note to writers:</strong> 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 <strong>extremely</strong> 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 <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a> before moving content here.</p> +</div> + +<p>{{SubpagesWithSummaries}}</p> + +<h2 id="Subnav">Subnav</h2> + +<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p> 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 +--- +<p>These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.</p> +<p>{{SubpagesWithSummaries}}</p> 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 +--- +<div class="summary">ফায়ারফক্স মার্কেটপ্লেস এইচটিএমএল৫ দ্বারা তৈরি ওয়েব অ্যাপলিকেশন এর জন্য একটি মুক্ত এবং অমালিকানাধীন অন-লাইন মার্কেটপ্লস।</div> + +<div class="column-container"> +<p><span class="seoSummary">ফায়ারফক্স মার্কেটপ্লেস ডেভলপারদের সক্ষম করেছে বৈশিষ্ট-সূচক ওয়েব টেকনোলজি, ভাষা এবং টুলস দ্বারা ক্রস-প্লাটফর্ম <a href="https://developer.mozilla.org/en-US/Apps">অপেন ওয়েব অ্যাপস</a> তৈরি করতে। মজিলা এটার মর্মবস্তু মূল্যবোধ আনছে — মুক্ত নীতি, স্বাধীনতা, ব্যবহারকারীর বাছাই— অ্যাপস এর দুনিয়াতে।</span></p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Community" id="Community" name="Community">আপনার অ্যাপস প্রকাশনা</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/Marketplace/Publish">ফায়ারফক্স মার্কেটপ্লেস-এ প্রকাশনা</a></dt> + <dd>ফায়ারফক্স মার্কেটপ্লেস এ একটি অ্যাপ প্রকাশ করতে ডকুমেন্ট বিশেষ।</dd> + <dt><a href="https://developer.mozilla.org/en-US/Marketplace/Publish_options">অ্যাপ প্রকাশনা অপশন</a></dt> + <dd>একটি ওপেন ওয়েব অ্যাপ তৈরি করার পর, সমগ্র বিশ্বে প্রকাশনার জন্য ভিন্ন ভিন্ন অপশন উপস্থিত আছে। এই অনুচ্ছেদটি ব্যাখ্যা করে কি কি উপস্থিত আছে।</dd> + <dt><a href="https://developer.mozilla.org/en-US/Apps/Publishing/General_app_publishing_topics">সাধারণ অ্যাপ প্রকাশনার বিষয়বলী</a></dt> + <dd>ওপেন ওয়েব অ্যাপ প্রকাশনার উপর সাধারণ তথ্য এবং প্রয়োজনীয় টিপস।</dd> + <dt><a href="https://developer.mozilla.org/en-US/Marketplace/Marketplace_APIs">ফায়ারফক্স মার্কেটপ্লেস APIs</a></dt> + <dd>মজিলার ফায়ারফক্স মার্কেটপ্লেস APIs এর মূল রেফারেন্স গাইডের লিংক , যেখানে আপনি কনফিগার করতে পারবেন অ্যাপ পেমেন্ট একাউন্ট, স্বয়ংক্রিয় অ্যাপ জমা দিয়া এবং আরও অনেক কিছু।</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Community" id="Community" name="Community">অর্থ উপার্জন</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Marketplace/Monetization">আপনার অ্যাপস দিয়ে অর্থ উপার্জন</a></dt> + <dd>আপনি আপনার সর্বশেষ অ্যাপ এর কোডিং এর জন্য কঠোর কাজ করেছেন, কিন্তু কিভাবে আপনি কিছু ফিরতি পাবেন যখন ইহা প্রকাশিত হবে? এই সেকশন সে সকল তথ্য প্রদান করবে যা আপনার অ্যাপ এর পেমেন্ট বাস্তবায়ণে প্রয়োজন হবে, সেটা মার্কেটপ্লেস পেমেন্ট হোক অথবা ইন-অ্যাপ পেমেন্ট হোক।</dd> +</dl> + +<h2 class="Tools" id="Tools" name="Tools">অ্যাপস ডেভেলপারদের জন্য টুলস</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">ফায়ারফক্স ওএস সিমুলেটর </a></li> +</ul> + +<p>আপনি এই সিমুলেটর ব্যবহার করে ফায়ারফক্স এপ্লিকেশন আপনার পিসিতে চালাতে পারবেন। এজন্য আপনাকে আলাধা কোন ডিভাইস লাগবে না। আপনি একটি এড-অন ডাউনলোড করেই সিমুলেটরটি চালাতে পারবেন।</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Apps/App_developer_tools">অ্যাপ ডেভেলপার টুলস</a></li> +</ul> + +<h2 id="আপনার_নিজের_মার্কেটপ্লেস_তৈরিতে">আপনার নিজের মার্কেটপ্লেস তৈরিতে</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/Marketplace/Creating_a_store">একটি স্টোর তৈরি</a></dt> + <dd>আপনার অ্যাপটি বিতরণ করতে আপনাকে ফায়ারফক্স মার্কেটপ্লেস ব্যবহার করতে হবে না।</dd> +</dl> +</div> +</div> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Submission">অ্যাপ জমা ও পর্যালোচনা</a> + + <ol> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Submission/Pre-submission_checklist" title="A checklist of things you should be sure to do before you submit your app to the Firefox Marketplace.">পুন: জমার তালিকা।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Submission/Submitting_an_app" title="This step-by-step guide will help you successfully submit your app to the Firefox Marketplace.">ফায়ারফক্স মার্কেটপ্লেসে অ্যাপ জমা।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Submission/Rating_Your_Content">আপনার অ্যাপ এর রেটিং পেতে।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Submission/Marketplace_review_criteria" title="An explanation of the criteria an app must meet in order to be published on the Firefox Marketplace">মার্কেটপ্লেস পর্যালোচনা নির্ণয়ক।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Submission/FAQ" title="Frequently asked questions about publishing apps on the Firefox Marketplace.">ফায়ারফক্স মার্কেটপ্লস FAQ</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing">অ্যাপ প্রকাশনা</a> + <ol> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Publish_options" title="If you don't want to go the Firefox Marketplace route, here is some useful information on self-publishing apps.">নিজেই অ্যাপস প্রকাশনা করা।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Packaged_apps" title="A detailed description of packaged apps, what the different types entail, and what they are used for in the context of the Firefox Marketplace, and self-published apps.">প্যাকেজড অ্যাপস</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Creating_a_store" title="Information that may be helpful to you if you want to build your own store for selling and distributing Open Web Apps.">একটি স্টোর তৈরি করা।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Adding_a_subdomain" title="For security reasons, each app must have its own domain (or subdomain) on the Web. This article covers how to go about creating a subdomain for your app.">অ্যাপ এর জন্য একটি সাব-ডোমেইন যোগ করা।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Updating_apps" title="Information about how both hosted and packaged app updates are handled, and what you need to do to ensure that your app properly supports updating.">অ্যাপস আপডেট করা।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Marketplace_screenshot_criteria" title="Some guidelines on how to create an effective screenshot for marketplace submission">মার্কেটপ্লেস স্ক্রিন-সট নির্ণয়ক।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Privacy_policies" title="Your users' privacy is very important, so you need to develop and adhere to a reasonable privacy policy to engender their trust. This article provides a guide to developing privacy policies.">গোপনীয়তার নীতি।</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Monetization">অর্থ উপার্জন</a> + <ol> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Monetization/Profiting_from_your_app" title="This guide contains introductory materials on how to monetize your apps, including tools needed, and a monetization calculator.">আপনার অ্যাপ থেকে মুনাফা।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Monetization/Marketplace_Payments" title="How your app can work with the Firefox Marketplace to enhance your distribution model">মার্কেটপ্লেস পেমেন্টস।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Monetization/Marketplace_payments_FAQ">মার্কেটপ্লেস পেমেন্টস</a><a href="https://developer.mozilla.org/en-US/Marketplace/Monetization/Marketplace_payments_FAQ"> FAQ</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Monetization/Marketplace_payments_FAQ">পেমেন্টস।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Monetization/App_payments_guide">অ্যাপ </a><a href="https://developer.mozilla.org/en-US/Marketplace/Monetization/Marketplace_payments_FAQ">পেমেন্টস</a><a href="https://developer.mozilla.org/en-US/Marketplace/Monetization/App_payments_guide"> গাইড।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Monetization/In-app_payments" title="A guide to implementing support for in-app payments in your Web app.">ইন-অ্যাপ পেমেন্টস।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Monetization/validating_a_receipt" title="A guide to when—and how—to validate your app's purchase receipt.">রসিদের যথার্থতা প্রমাণ করতে।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Monetization/App_pricing" title="A round up of fixed price points you can choose for your paid apps, and how these vary across different currencies, along with useful supporting information on dealing with app payments.">অ্যাপ এর মূল্য তালিকা।</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Monetization/Payments_Status" title="An at-a-glance summary of what countries have got our app payment services set up in them — where paid apps can be distributed">পেমেন্টস স্ট্যাটাস।</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/APIs">মার্কেটপ্লেস APIs</a> + <ol> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/APIs/Marketplace_utility_library" title="To help you work with the Firefox Marketplace, we provide a JavaScript library you can use in your apps to make it easier to handle in-app payments and verify payment receipts.">মার্কেটপ্লেস ইউটিলিটি লাইব্রেরি।</a></li> + <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/submission.html" title="The Submission API lets you validate your app, update your app, and fetch information about the apps available to be installed.">জমা API</a></li> + <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/payment.html" title="The Payment API lets you get information about and process in-app purchases as well as to simply get information about what pricing tiers are available.">পেমেন্ট API</a></li> + <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/overview.html" title="All Marketplace-related documentation is centered here.">মার্কেটপ্লেস API</a></li> + </ol> + </li> +</ol> 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 +--- +<p>In <a href="/en-US/Marketplace/Options/Introduction">this section</a> you'll discover:</p> +<ul> + <li>the formats in which you can deliver Open Web Apps ‐ either as a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged</a> or <a href="/en-US/Marketplace/Options/Hosted_apps">hosted</a> app ‐ as well as details on how to <a href="/en-US/Marketplace/Options/Packaged_or_hosted_">make the choice between these formats</a>.</li> + <li>how the features of <a href="/en-US/Marketplace/Options/Open_web_apps_for_android">Open Web Apps for Android</a> and <a href="/en-US/Marketplace/Options/Open_web_apps_for_desktop">Open Web Apps for Desktop</a> deliver your apps to Android devices and Windows/Mac/Linux PCs.</li> + <li>information on choosing between devices with different amounts of memory.</li> + <li>your options for <a href="/en-US/Marketplace/Options/Self_publishing">publishing apps yourself</a>, outside Firefox Marketplace.</li> + <li>how you can <a href="/en-US/Marketplace/Options/Creating_a_store">create your own Marketplace</a>.</li> +</ul> +<div class="warning"> + <p>Content in this section is still under development.</p> +</div> +<p> </p> 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 +--- +<div class="summary"> +<p><span class="seoSummary">সেসব ওপেন-ওয়েব অ্যাপকে<strong> প্যাকেজড অ্যাপ</strong> বলা হয় যাদের সব রিসোর্স বা ফাইল/কোড (HTML, CSS, JavaScript, অ্যাপ মেনিফেস্ট এবং অন্যান্য ফাইল) একটি zip ফাইলে ব্যবহারকারীর কাছে পৌঁছে দেওয়া হয়, কোন ওয়েব সার্ভারে আপলোড করার পরিবর্তে। এই আর্টিকেলে প্যাকেজড অ্যাপের সাথে আপনাকে পরিচিত করা হবে এবং ডেভেলপার হিসেবে আপনার প্যাকেজড অ্যাপ নিয়ে যা যা জানা দরকার, সব তথ্যই এই পাতায় রয়েছে।</span></p> +</div> + +<p>প্যাকেজড অ্যাপ হল ওপেন ওয়েব অ্যাপকে কার্যকর করার জন্য <a href="/en-US/docs/Web/Apps/Manifest" style="line-height: 1.5;">অ্যাপ ম্যানিফেস্ট</a> (যা মূল ডিরেক্টরীতে থাকে)<span style="line-height: 1.5;"> ফাইল সহ প্রয়োজনীয় সব উপাদানের একটি জিপ ফাইল। অ্যাপ ম্যানিফেস্ট মূলত অ্যাপটির বর্ননা , যেই আইকনের মাধ্যমে ইন্সটলকৃত অ্যাপটিকে চেনা যাবে এবং এরকম সকল বিষয়ের ধারণা প্রদান করে। তারপর , এই প্যাকেজটি অ্যাপকে ফায়ারফক্স ওএস ডিভাইস, </span><span style="line-height: 1.5;"> </span><a href="/en-US/Marketplace/Options/Open_web_apps_for_android" style="line-height: 1.5;">অ্যান্ড্রয়েড ডিভাইস</a><span style="line-height: 1.5;"> এবং </span><a href="/en-US/Marketplace/Options/Open_web_apps_for_desktop" style="line-height: 1.5;">ডেস্কটপ</a> এ ইন্সটল করার কাজে ব্যবহৃত হয়।<span style="line-height: 1.5;"> একবার ইন্সটল হওয়ার পর , অ্যাপটি ডিভাইসে চলতে শুরু করে কিন্তু তারপরেও এটি ওয়েব সার্ভারের ডাটাবেজের মত ওয়েবে থাকা রিসোর্স ব্যবহার করতে পারে।</span></p> + +<p><a href="#types_of_packaged_apps">প্যাকেজড অ্যাপ</a> সাধারনত তিন রকমের হয়: ওয়েব অ্যাপ , প্রিভিলেজড অ্যাপ এবং সার্টিফায়েড অ্যাপ।প্যাকেজড অ্যাপ যেকোন ওপেন ওয়েব অ্যাপকে সরবরাহ করার কাজে ব্যবহার করা গেলেও , প্রিভিলেজড এবং সার্টিফায়েড অ্যাপসমূহে <a href="/bn-BD/Apps/Build/App_permissions" style="line-height: 1.5;">প্রিভিলেজড (বা সুবিধাভোগী) এবং সার্টিফায়েড (বা প্রত্যয়িত) এপিআই</a> এর ব্যবহার নিশ্চিত করার জন্য অ্যাপসমূহ ডিজিটালভাবে সাইন করা থাকে। প্রিভিলেজড অ্যাপসমূহ মার্কেটপ্লেসে রিভিও প্রক্রিয়ার সময় সাইনড হয় আর সার্টিফায়েড অ্যাপসমূহ ডিভাইস ম্যানুফ্যাকচার অথবা অপারেটরদের দ্বারা সাইন করা হয়।<span style="line-height: 1.5;"> </span></p> + +<p>প্রিভিলেজড এবং সার্টিফায়েড এপিআই ব্যবহার করার ক্ষমতা ছাড়াও , প্যাকেজড অ্যাপসমূহ প্রথমবার চালু হওয়ার সময় খুব দ্রুত চালু হয় যেহেতু অ্যাপটির সকল উপাদান ইন্সটলেশনের পরে সেটের মধ্যেই রয়ে গেছে। এই সুবিধার কারণে ফায়ারফক্স ওএস ডিভাইস ,<span style="line-height: 1.5;"> </span><a href="/en-US/Marketplace/Options/Open_web_apps_for_android" style="line-height: 1.5;">অ্যান্ড্রয়েড ডিভাইস</a><span style="line-height: 1.5;"> এবং </span><a href="/en-US/Marketplace/Options/Open_web_apps_for_desktop" style="line-height: 1.5;">ডেস্কটপ</a> এ ওপেন ওয়েব অ্যাপকে বিতরণ করার জন্য প্যাকেজড অ্যাপের মাধ্যমে বিতরণ করার ব্যাপারে সুপারিশ করা হয়।<span style="line-height: 1.5;"> </span></p> + +<div class="note"> +<p><strong>দ্রষ্টব্য :</strong> বর্তমানে ফায়ারফক্স মার্কেটপ্লেস শুধু ওয়েব এবং প্রিভিলেজড প্যাকেজড অ্যাপসমূহকেই সমর্থন করে। আর বিশেষ করে , ফায়ারফক্স মার্কেটপ্লেস ফায়ারফক্স ওএসের জন্য পেইড অ্যাপস এবং ফায়ারফক্স ওএস , ফায়ারফক্সের অ্যান্ড্রয়েড ও ডেস্কটপ সংস্করণের জন্য বিনামুল্যের প্যাকেজড অ্যাপসমূহকে সমর্থন করেI সকল প্লাটফর্মে যাতে পেইড অ্যাপস সহায়তা পাওয়া যায় , সেজন্য উন্নয়নের কাজ চলছে।</p> +</div> + +<h2 id="প্যাকেজড_অ্যাপসের_প্রকারভেদ"><a name="types_of_packaged_apps">প্যাকেজড অ্যাপসের প্রকারভেদ</a></h2> + +<p>মূলত তিন ধরণের প্যাকেজড অ্যাপ রয়েছে: ওয়েব অ্যাপ , প্রিভিলেজড অ্যাপ এবং সার্টিফায়েড অ্যাপ। প্রত্যেক ধরণের প্যাকেজড অ্যাপই ফায়ারফক্স ওএসের মধ্যে বাস্তবায়িত <a href="/bn-BD/Firefox_OS/Security/Security_model#App_Security" style="line-height: 1.5;">অ্যাপ সিকিউরিটি</a><span style="line-height: 1.5;"> মডেলের কোন না কোন একটি অংশের অনুরুপ। এই বিভাগটি প্রত্যকটি অ্যাপ সম্পর্কে আরো বিস্তারিত ধারণা দিবে । </span></p> + +<h3 id="ওয়েব_অ্যাপ">ওয়েব অ্যাপ</h3> + +<p>ওয়েব অ্যাপ হল সেই ধরণের অ্যাপ যেটি প্রিভিলেজড অথবা সার্টিফায়েড এপিআই ব্যবহার করে না। যখন মার্কেটপ্লেসে জমা দেয়া হয় , তখন অ্যাপটির প্যাকেজ সাইনকৃত অবস্থায় থাকে কিন্তু প্রিভিলেজড অথবা সার্টিফায়েড এপিআই এর জন্য যে বিশেষ অথেনটিকেশন প্রক্রিয়া ব্যবহৃত হয় তার ব্যবহার হয় না। প্রিভিলেজড এবং সার্টিফায়েড অ্যাপের জন্য প্রযোজ্য <a href="/en-US/Apps/CSP">কন্টেন্ট নিরাপত্তা পলিসি</a> (CSPs) এই ধরণের অ্যাপের জন্য প্রযোজ্য না।</p> + +<p>এই ধরণের প্যাকেজ অ্যাপ এর জন্য <span style="font-family: courier new,andale mono,monospace;">manifest.webapp</span> ফাইলের মধ্যে থাকা <code>type</code> অংশের প্রয়োজন পরে না, কেননা টাইপ(ওয়েব) এর জন্য থাকা ডিফল্ট ভ্যালু হল ওয়েব অ্যাপ।</p> + +<p>ওয়েব অ্যাপস <a href="/bn-BD/Marketplace/Options/Self_publishing">নিজে নিজে প্রচার করা</a> হতে পারে অথবা ফায়ারফক্স মার্কেটপ্লেসের মাধ্যমে বিতরণযোগ্য হতে পারে। <a href="/bn-BD/Marketplace/Options/Hosted_apps">হোস্টেড অ্যাপ</a> পদ্ধতির মাধ্যমেও ওয়েব অ্যাপস প্রকাশ করা যায়।</p> + +<h3 id="সুবিধাভোগী_(প্রিভিলেজড)_অ্যাপ">সুবিধাভোগী (প্রিভিলেজড) অ্যাপ</h3> + +<p>সুবিধাভোগী অ্যাপ হল সেই ধরণের অ্যাপ যেটি প্রিভিলেজড এপিআই ব্যবহার করে এবং এই ধরণের অ্যাপ আই ওএস এবং অ্যান্ড্রয়েডের মত প্লাটফর্মের অ্যাপের সমমানের অ্যাপ হিসেবে বিবেচিত হতে পারে। যখন সুবিধাভোগী অ্যাপস ফায়ারফক্স মার্কেটপ্লেসে জমা দেয়া হয়, তখন এক বিশেষ প্রক্রিয়ায় এটিকে গ্রহণ করা হয়। এই প্রক্রিয়া অ্যাপটির ব্যবহারকারীকে নিশ্চিন্ত করে যে , এই অ্যাপটি নিরাপত্তা , গোপনীয়তা এবং ধারনক্ষমতার ব্যাপারে খুব যত্নের সাথে পরীক্ষা করে দেখা হয়েছে। </p> + +<p>কোন অ্যাপ সুবিধাভোগী অ্যাপ কিনা তা বোঝাতে , অ্যাপটির <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">manifest.webapp ফাইলের</span><span style="line-height: 1.5;"> </span><a href="/en-US/docs/Web/Apps/Manifest#type" style="line-height: 1.5;"><code>type</code></a><span style="line-height: 1.5;"> অংশটুকু যুক্ত করুন এবং এটিকে <code>privileged</code> হিসেবে সেট করুন।</span><span style="line-height: 1.5;"> আপনার অ্যাপের যতগুলো প্রিভিলেজড এপিআই ব্যবহার করা লাগতে পারে , তার প্রত্যেকটির কথা </span><a href="/en-US/docs/Web/Apps/Manifest" style="line-height: 1.5;">অ্যাপটির ম্যানিফেস্ট</a> ফাইলের <code style="font-style: normal; line-height: 1.5;">permissions</code><span style="line-height: 1.5;"> অংশে যুক্ত করতে হবে ।</span></p> + +<p>ফায়ারফক্স ওএস এবং অ্যান্ড্রয়েড ও ডেস্কটপের জন্য কাজ করা ওয়েব রানটাইম প্রিভিলেজড অ্যাপসের জন্য এই <a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">সিএসপি</a> টি প্রয়োগ করে :</p> + +<pre class="brush: js">"default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"</pre> + +<p>সুবিধাভোগী অ্যাপসমূহ শুধু ফায়ারফক্স মার্কেটপ্লেসের মাধ্যমেই বিতরণযোগ্য হতে পারে।</p> + +<h3 id="প্রত্যয়িত_(সার্টিফায়েড)_অ্যাপ">প্রত্যয়িত (সার্টিফায়েড) অ্যাপ</h3> + +<div class="geckoVersionNote"> +<p>প্রত্যয়িত অ্যাপ সাধারণত তৃতীয় পক্ষের ডেভেলপারদের কাছে পাওয়া যাবে না এবং এই ধরণের অ্যাপ ফায়ারফক্স মার্কেটপ্লেসের মাধ্যমেও বিতরন করা হয় না। এপিআই কে সার্টিফাই করার পেছনে দীর্ঘমেয়াদি যে উদ্দেশ্য রয়েছে , তা হল এই প্রক্রিয়া আরো কঠিন করে তোলা যাতে করে তারা প্রিভিলেজড এপিআই হিসেবেও ব্যবহার হতে পারে। আপনি যদি কোন বিশেষ এপিআইকে সহজলভ্য হিসেবে দেখতে আগ্রহী থাকেন , তাহলে <a href="https://lists.mozilla.org/listinfo/dev-webapps">dev-webapps</a> মেইলিং লিস্টে আপনার মতামত প্রদান করুন।</p> +</div> + +<p>প্রত্যয়িত অ্যাপ হল মূলত সেই ধরণের অ্যাপ যেই অ্যাপ প্রত্যয়িত (সার্টিফায়েড) এপিআই ব্যবহার করে এবং সার্টিফায়েড এপিআই হল সেই এপিআই যা ডিফল্ট ডায়ালার বা ডিভাইসের মধ্যে থাকা সিস্টেম সেটিংস অ্যাপ বা এই ধরণের গুরুত্তপূর্ন সিস্টেম ফাংশনকে ব্যবহার করতে দেয়। সুবিধাভোগী অ্যাপের সাথে যদি আমরা তুলনা করি, প্রত্যয়িত অ্যাপের মধ্যে থাকা সব এপিআই এর অনুমতি ব্যবহারকারীর অনুমতি প্রদানের পুর্বেই দেয়া থাকে। কেননা কোন ডিভাইসের জন্য একটি প্রত্যয়িত অ্যাপকে OEM বা প্রস্তুতকারীর মাধ্যমে অনুমতি পেতে হয়।</p> + +<p><span style="line-height: 1.5;">কোন অ্যাপ প্রত্যয়িত অ্যাপ কিনা তা বোঝাতে , অ্যাপটির </span><span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">manifest.webapp ফাইলের</span><span style="line-height: 1.5;"> </span><a href="/en-US/docs/Web/Apps/Manifest#type" style="line-height: 1.5;"><code>type</code></a><span style="line-height: 1.5;"> অংশটুকু যুক্ত করুন এবং এটিকে </span><span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">certified হিসেবে সেট করুন।</span><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">আপনার অ্যাপের যতগুলো প্রিভিলেজড এবং সার্টিফায়েড এপিআই ব্যবহার করা লাগতে পারে , তার প্রত্যেকটির কথা </span><a href="/en-US/docs/Web/Apps/Manifest" style="line-height: 1.5;">অ্যাপটির ম্যানিফেস্ট</a><span style="line-height: 1.5;"> ফাইলের </span><code style="font-style: normal; line-height: 1.5;">permissions</code><span style="line-height: 1.5;"> অংশে যুক্ত করতে হবে।</span></p> + +<p>ফায়ারফক্স ওএস সার্টিফায়েড অ্যাপসের জন্য নিম্নের সিএসপি ব্যবহার করে :</p> + +<pre class="brush: js">"default-src *; script-src 'self'; object-src 'none'; style-src 'self'"</pre> + +<p>এটি মূলত সুবিধাভোগী অ্যাপসের তুলনায় প্রত্যয়িত অ্যাপসের উপর ইনলাইন সিএসপির ব্যাপারে কঠোর নিয়ম-নীতি আরোপের ফল। আপনি যদি এটি করার কারণ সম্পর্কে জানতে চান , তাহলে <a href="https://wiki.mozilla.org/Apps/Security#Default_CSP_policy">ডিফল্ট সিএসপি পলিসি</a> এবং <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=768029">৭৬৮০২৯ নং বাগ</a> দেখুন।</p> + +<p>প্রত্যয়িত অ্যাপসমূহ OEM এবং অপারেটরদের মাধ্যমে আগে থেকেই ডিভাইসে যুক্ত থাকে।</p> + +<h2 id="প্যাকেজড_অ্যাপস_পরীক্ষা_করা">প্যাকেজড অ্যাপস পরীক্ষা করা</h2> + +<p>ফায়ারফক্স ওএস সিমুলেটর অথবা কোন একটি ডিভাইসে পরীক্ষা করার জন্য প্যাকেজড অ্যাপ ইন্সটল করতে চাইলে , <a href="/bn-BD/Firefox_OS/Using_the_App_Manager">অ্যাপ ম্যানেজার ব্যবহার করা</a> নিবন্ধটি দেখুন। অথবা , আপনি চাইলে <a href="/en-US/Marketplace/Options/Self_publishing">নিজে নিজেই অ্যাপ প্রকাশ করুন</a> নিবন্ধের পদ্ধতি অনুসরণ করে যে কোন ওয়েব সার্ভার থেকে এটিকে একটি ডিভাইসে ইন্সটল করতে পারেন। মনে রাখবেন , যখন আপনি নিজে নিজে অ্যাপ পাবলিশ করবেন প্যাকেজড ওয়েব অ্যাপ শুধু তখনই ইন্সটল করা যাবে।</p> + +<h2 id="প্যাকেজড_অ্যাপস_পাবলিশ_করা">প্যাকেজড অ্যাপস পাবলিশ করা</h2> + +<p>প্যাকেজড অ্যাপস পাবলিশ করার জন্য আপনার কাছে দুটি উপায় আছে : ফায়ারফক্স মার্কেটপ্লেসে পাবলিশ করা অথবা নিজে নিজে পাবলিশ করা।</p> + +<h3 id="ফায়ারফক্স_মার্কেটপ্লেসে_পাবলিশ_করা">ফায়ারফক্স মার্কেটপ্লেসে পাবলিশ করা</h3> + +<p>ফায়ারফক্স মার্কেটপ্লেসে প্যাকেজড অ্যাপ জমা দেয়ার পদ্ধতি <a href="/en-US/Marketplace/Publishing">অ্যাপ পাবলিশ করা</a> বিভাগে বর্ননা করা আছে।</p> + +<p>যখন আপনি আপনার প্যাকেজড অ্যাপটি জমা দিবেন , এটার জিপ ফাইল মার্কেটপ্লেসের সার্ভারে জমা থাকে এবং আপনার প্যাকেজড অ্যাপের জিপ ফাইলের মধ্যে থাকা অ্যাপ মেনিফেস্টের উপর ভিত্তি করে মার্কেটপ্লেসটি <strong>mini-manifest</strong> নামের নতুন একটি মেনিফেস্ট তৈরি করবে। যখন একজন ব্যাবহারকারী আপনার অ্যাপটি ইন্সটল করবে, অ্যাপটি ইন্সটলের জন্য মিনি-মেনিফেস্টটি <code><a href="/en-US/docs/Web/API/Apps.installPackage">Apps.installPackage()</a></code> ফাংশনে চলে যাবে। ইন্সটলেশন এবং হালনাগাদ প্রক্রিয়ার জন্য মিনি-মেনিফেস্টটি থেকে যাবে কিন্তু যখন আপনার অ্যাপ যখন চলবে , তখন এটি কাজ করবে না।</p> + +<h3 id="নিজে_নিজেই_পাবলিশ_করা">নিজে নিজেই পাবলিশ করা </h3> + +<p>প্যাকেজড ওয়েব অ্যাপসমূহকে ফায়ারফক্স মার্কেটপ্লেসের বাইরে , নিজের ওয়েব সার্ভারেও পাবলিশ করা সম্ভব ।বিস্তারিত তথ্য <span style="line-height: 1.5;"> </span><a href="/en-US/Marketplace/Options/Self_publishing" style="line-height: 1.5;">নিজে নিজে অ্যাপস পাবলিশ করা</a> নিবন্ধে দেয়া আছে।</p> + +<h2 id="প্যাকেজড_অ্যাপসমূহ_হালনাগাদ_করা">প্যাকেজড অ্যাপসমূহ হালনাগাদ করা</h2> + +<p>অ্যাপসমূহকে হালনাগাদ করার ব্যাপারে আরো তথ্য পেতে , <a href="/en-US/docs/Web/Apps/Updating_apps">অ্যাপসমূহ হালনাগাদ করা</a> নিবন্ধটি দেখুন।</p> + +<h2 id="আরো_তথ্যসমূহ">আরো তথ্যসমূহ</h2> + +<ul> + <li><a href="/en-US/Firefox_OS/Security/Security_model">একনজরে ফায়ারফক্স ওএসের নিরাপত্তা</a></li> + <li><a href="/en-US/Firefox_OS/Security/Application_security">অ্যাপ্লিকেশনের নিরাপত্তা</a></li> + <li><a href="https://github.com/robnyman/Firefox-OS-Boilerplate-App" title="https://github.com/robnyman/Firefox-OS-Boilerplate-App">ফায়ারফক্স ওএস বয়লারপ্লেট অ্যাপ</a></li> +</ul> + +<p> </p> 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 +--- +<div class="summary"> + <p><span class="seoSummary">এমন অনেক পরিস্থিতি আসতে পারে যখন আপনি আপনার অ্যাপ ফায়ারফক্স মার্কেটপ্লেসের মাধ্যমে প্রকাশ করতে নাও চাইতে পারেন।উদাহরণস্বরুপ, আপনি আপনার সংগঠনের সদস্যদের জন্য অ্যাপ তৈরি করতে পারেন,বেটা টেস্ট চালাতে পারেন অথবা নিজের ইচ্ছেমত কিছু করতে পারেন।এই পাতায় আপনি ফায়ারফক্স মার্কেটপ্লেসের বাইরে নিজস্ব ব্যবস্থাপনায় কীভাবে অ্যপ প্রকাশ করবেন তার বিস্তারিত তথ্য পাবেন</span></p> +</div> +<p>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:</p> +<ol> + <li>একটি সার্ভার,যেখানে অ্যাপের মেনিফেস্ট ফাইল থাকবে</li> + <li>একটি সার্ভার, যেখানে অ্যাপ (হোস্টেড অ্যাপের ক্ষেত্রে) অথবা অ্যাপের প্যাকেজ জিপ ফাইল থাকবে</li> + <li>একটি ওয়েবসাইটে কিছু কোড থাকবে ,যা কল করা যাবে{{ domxref("Apps.install") }} অথবা {{ domxref("Apps.installPackage") }} করা যাবে (যখন যেটা সর্বোত্তম হয়)</li> +</ol> +<h2 id="সীমাবদ্ধতা">সীমাবদ্ধতা</h2> +<p>ওপেন ওয়েবে আপনার নিজস্ব ব্যবস্থায় অ্যাপ প্রকাশের আগে আপনার নিম্নোক্ত সীমাবদ্ধতাগুলো সম্পর্কে সচেতন হওয়া প্রয়োজন</p> +<ul> + <li>নিজস্ব ব্যবস্থায় প্রকাশিত অ্যাপসমূহ <a href="/en-US/Apps/Build/App_permissions">privileged APIs</a> ব্যবহার করতে পারবে না।এই এপিআইগুলো ব্যবহারের জন্য আপনার অ্যাপটিকে প্যাকেজ অ্যাপ হতে হবে এবং এর জিপ ফাইলটি মজিলা মার্কেটপ্লেস সাবমিশন প্রক্রিয়ার মাধ্যমে সাইন হতে হবে</li> + <li>আপনার অ্যাপ কখনো ফায়ারফক্স মার্কেকপ্লেসে in-app purchases অ্যাপ হতে পারবে না</li> + <li>আপনাকে আপনার নিজস্ব উদ্ভাবনী ক্ষতা কাজে লাগাতে হবে , কারণ আপনি ফায়ারফক্স মার্কেটপ্লেসের লিস্টিংয়ের সুবিধাগুলো পাবেন না</li> +</ul> +<h2 id="নিজস্ব_ব্যবস্থায়_প্রকাশিত_প্যাকেজ_অ্যাপ">নিজস্ব ব্যবস্থায় প্রকাশিত প্যাকেজ অ্যাপ</h2> +<p>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:</p> +<ol> + <li> + <p>Zip up your app's contents and give it the name <code>package.zip</code>. This file should contain all the app's resource files, including the (main) <a href="https://developer.mozilla.org/en-US/Apps/Build/Manifest" title="Manifest documentation">manifest</a>.</p> + <div class="warning"> + <p>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.</p> + </div> + </li> + <li>Create a file called <code>manifest.webapp</code> 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 <a href="#Mini-manifest_fields">Mini-manifest fields</a> below. + <pre class="brush: js">{ + "name": "My sample app", + "package_path" : "<a class="LinkyMobile-ext" href="http://my-server.com/my-app-directory/my-app.zip" title="Linkification: http://my-server.com/my-app-directory/my-app.zip">http://my-server.com/my-app-directory/my-app.zip</a>", + "version": "1", + "developer": { + "name": "A. Developer", + "url": "<a class="LinkyMobile-ext" href="http://my-server.com" title="Linkification: http://my-server.com">http://my-server.com</a>" + } +}</pre> + </li> + <li>Create the script that will install your app. Here we're using a simple HTML file named <code>index.html</code> , 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. + <pre class="brush: html"><html> + <body> + <p>Packaged app installation page</p> + <script> + // This URL must be a full url. + var manifestUrl = '<a class="LinkyMobile-ext" href="http://my-server.com/my-app-directory/package.manifest" title="Linkification: http://my-server.com/my-app-directory/package.manifest">http://my-server.com/my-app-directory/manifest.webapp</a>'; + var req = navigator.mozApps.installPackage(manifestUrl); + req.onsuccess = function() { + alert(this.result.origin); + }; + req.onerror = function() { + alert(this.error.name); + }; + </script> + </body> +</html></pre> + </li> + <li>Setup the files on your server or website by copying <code>package.zip</code>, <code>package.manifest</code>, and <code>index.html</code> into your chosen directory (<code>my-app-directory</code> in this example).</li> + <li>Now you can install the app using a compatible device (such as a Firefox OS phone). Simply open the <code>index.html</code> file (in this example its path is <code> <a class="LinkyMobile-ext" href="http://my-server.com/my-app-directory/package.manifest" title="Linkification: http://my-server.com/my-app-directory/package.manifest">http://my-server.com/my-app-directory/index.html</a></code>) 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.</li> +</ol> +<div class="note"> + <p>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 <code>package_path</code>, 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 <code><a class="LinkyMobile-ext" href="http://10.10.12.1:8080/package.zip" title="Linkification: http://10.10.12.1:8080/package.zip">http://10.10.12.1:8080/package.zip</a></code>.</p> +</div> +<h3 id="Mini-manifest_fields">Mini-manifest fields</h3> +<p>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 <a href="/en-US/Apps/Build/Manifest">App manifest</a>.</p> +<p>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 <code>name</code>, <code>version</code>, <code>developer</code> and <code>locales</code> 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: <code>package_path</code>, <code>release_notes</code> and <code>size</code>.</p> +<dl> + <dt> + <code>package_path</code> (required)</dt> + <dd> + The absolute path (full URL, such as <code> <a class="LinkyMobile-ext" href="http://my-server.com/my-app-directory/package.manifest" title="Linkification: http://my-server.com/my-app-directory/package.manifest">http://my-server.com/my-app-directory/manifest.webapp</a></code>) of the location where the app's zip file is stored.</dd> + <dt> + <code>release_notes</code> (optional)</dt> + <dd> + Information about this release of the app. On Firefox Marketplace this information is provided as part of the submission process.</dd> +</dl> +<dl> + <dt> + <code>size</code> (optional)</dt> + <dd> + 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.</dd> +</dl> +<p>Here is an example:</p> +<pre class="brush: js">{ + "name": "My app", + "package_path": "<a class="LinkyMobile-ext" href="http://thisdomaindoesnotexist.org/myapp.zip" title="Linkification: http://thisdomaindoesnotexist.org/myapp.zip">http://thisdomaindoesnotexist.org/myapp.zip</a>", + "version": "1.0", + "size": 172496, + "release_notes": "First release", + "developer": { + "name": "Developer Name", + "url": "<a class="LinkyMobile-ext" href="http://thisdomaindoesnotexist.org/" title="Linkification: http://thisdomaindoesnotexist.org/">http://thisdomaindoesnotexist.org/</a>" + }, + "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" + } +} +</pre> +<p>The other fields in this example are:</p> +<dl> + <dt> + <code>name</code> (required)</dt> + <dd> + The app's name. Maximum length is 128 characters.</dd> + <dt> + <code>version</code> (optional)</dt> + <dd> + The version of the app.</dd> + <dt> + <code>developer</code> (optional)</dt> + <dd> + Information about the developer, contains the <code>name</code> and <code>url</code> fields. The developer info needs to match between the mini-manifest and the main manifest file in the ZIP.</dd> + <dt> + <code>locales</code> (optional)</dt> + <dd> + Localization information. Keys should be in <code>xx-YY</code> format.</dd> + <dt> + <code>icons</code> (optional)</dt> + <dd> + Icons for use by the app.</dd> +</dl> +<p>For more detailed information on the content of manifest files, see <a href="/en-US/Apps/Build/Manifest" title="Manifest documentation">App manifest</a>.</p> +<h2 id="Self-publishing_Hosted_Apps">Self-publishing Hosted Apps</h2> +<p>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 <a href="/en-US/Apps/Build/Manifest" title="Manifest documentation">manifest file</a> 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.</p> +<h2 id="আরো_দেখুন">আরো দেখুন</h2> +<ul> + <li><a href="/en-US/Apps/Build/JavaScript_API">App Installation and Management APIs</a></li> + <li>{{ domxref("Apps.install") }}</li> + <li>{{ domxref("Apps.installPackage") }}</li> + <li><a href="/en-US/Apps/Build/Manifest" title="Manifest documentation">App manifest</a></li> + <li><a href="/en-US/Apps/Build/App_permissions">App permissions</a></li> +</ul> 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 +--- +<p>This section describes the process for submitting an app to Firefox Marketplace</p> +<p>Residual details: <a href="/en-US/Marketplace/Publishing/Submit/Submitting_an_app">https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Submitting_an_app</a></p> 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..3fecc7f35d --- /dev/null +++ b/files/bn/archive/mozilla/marketplace/publishing/submit/ওভারভিউ/index.html @@ -0,0 +1,122 @@ +--- +title: ওভারভিউ +slug: Archive/Mozilla/Marketplace/Publishing/Submit/ওভারভিউ +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Overview +--- +<div class="summary"> +<p>ফায়ারফক্স মার্কেটপ্লেসে আপনার অ্যাপ উপলব্ধ করতে চাইলে ,আপনাকে মার্কেটপ্লেসে প্রতিটি অ্যাপ সাবমিট করতে হবে এবং পাবলিশ করার আগে পর্যালোচনা করা হয়। ফায়ারফক্স মার্কেটপ্লেসে যেভাবে অ্যাপ সাবমিট করতে হয় এই পেজে তার একটা বর্ণনা আছে। পরবর্তী পেজগুলো প্রতিটি ধাপের অতিরিক্ত বিস্তারিত আলোচনা করে।</p> +</div> + +<div class="note"> +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">প্রক্রিয়ার প্রতিটি ধাপের</span> <span class="hps">অধিক বিবরণের জন্য</span></span>, Step Heading এর লিঙ্ক অনুসরন করুন অথবা প্রথম ধাপ থেকে সুরু করুন। A diagrammatic representation of the steps is offered at the bottom of this page.</p> +</div> + +<p>You can also follow the submission process in this video: <a class="video-item" href="http://s.vid.ly/embeded.html?link=8k2n4w&autoplay=false">http://vid.ly/8k2n4w</a></p> + +<h2 id="The_process">The process</h2> + +<p>So you want to submit your app to Firefox Marketplace, let's get started:</p> + +<dl> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Sign-in_to_your_developer_account">Step 1 - Sign in to your Developer account</a></dt> + <dd> + <ul> + <li>Go to the <a class="external external-icon" href="https://marketplace.firefox.com/developers/">Firefox Marketplace Developer Hub.</a></li> + <li>Click <a class="button" href="https://marketplace.firefox.com/developers/submit/">Submit your app to the Marketplace </a></li> + <li>Sign in to your developer account: + <ul> + <li>If you aren't registered you'll be asked to register.</li> + <li>If you haven't done so already, you'll be asked to agree to the Firefox Marketplace Developer Agreement.</li> + </ul> + </li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Load_your_app">Step 2 - Load your app</a></dt> + <dd>On the <strong>Submit an app</strong> page: + <ul> + <li>Select whether the app is free or paid.</li> + <li>Select the platforms the app will be available on.</li> + <li>Select whether the app is hosted or packaged then: + <ul> + <li>For a hosted app, provide the link to its manifest file.</li> + <li>For a packaged app, upload the <code>package.zip</code> file, and once it has been validated, identify the minimum API requirements.</li> + </ul> + </li> + <li>Click <strong>Continue</strong>.</li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Enter_your_apps_details">Step 3 - Enter your app's details</a></dt> + <dd> + <p>On the <strong>Edit App Details</strong> page:</p> + + <ul> + <li>Modify the app URL if you wish.</li> + <li>Modify the description (provided in the manifest) if you wish.</li> + <li>Select one or two categories.</li> + <li>Provide a Privacy Policy.</li> + <li>Defined a home page and support website if you have them.</li> + <li>Provide a support email address.</li> + <li>Indicate whether the app requires Flash support.</li> + <li>Add at least one screenshot or video.</li> + <li>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.</li> + <li>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.</li> + <li>Click <strong>Continue</strong>.</li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Next_steps">Step 4 - See details of the next steps</a></dt> + <dd>On the <strong>Next Steps</strong> page click <strong>Continue</strong>.</dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Rating_Your_Content">Step 5 - Obtain a content rating</a></dt> + <dd>On the <strong>Content Ratings</strong> page: + <ul> + <li>to obtain a new rating click <strong>Create an IARC Ratings Certificate</strong> and on the IARC Web site, complete the ratings questionnaire.</li> + <li>to enter a rating you've already obtained provide its <strong>Submission ID</strong> and <strong>Security Code</strong>.</li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Pricing/Introduction">Step 6 - Update availability and payment details</a></dt> + <dt style="margin-left: 40px;">Step 6a - If the app is free (and doesn't include in-app purchases):</dt> + <dd style="margin-left: 40px;">On the left hand menu, click <strong>Compatibility</strong>. Change the countries the app will be available in if you wish.</dd> + <dt style="margin-left: 40px;">Step 6b - If the app is paid (or free, but includes in app payments):</dt> + <dd style="margin-left: 40px;">On the left hand menu, click <strong>Compatibility & Payments</strong> + <ul> + <li>Setup your payment provider accounts, such as Bango and Boku.</li> + <li>Set the price, identify whether the app includes in-app products and select the countries the app will be available in.</li> + <li>If the app is being offered as a premium upgrade to a free app, identify the free app.</li> + </ul> + </dd> + <dt style="margin-left: 40px;">Step 6c - If the app includes in-app products:</dt> + <dd style="margin-left: 40px;"> + <ul> + <li>On the left hand menu click <strong>In-App Payments</strong> and obtain your API key and secret. (Note that you'll have to <a href="/en-US/Marketplace/Publishing/Updating_apps">submit an update</a> to your app once the API key and secret have been added to it, for more details see <a href="/en-US/Marketplace/Monetization/In-app_payments">In-app payments</a>.)</li> + <li>If you're using <a href="/en-US/Marketplace/Monetization/In-app_payments_section/fxPay_iap">fxPay</a>, on the left hand menu click <strong>In-App Products</strong> and define each of your in-app products.</li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Define_your_team">Step 7 - Setup team member (optional)</a></dt> + <dd>On the left hand menu, click <strong>Team Members</strong> and add any additional team member if you wish.</dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/View_your_listing">Step 8 - View the listing (optional)</a></dt> + <dd>On the left hand menu, click <strong>View Listing</strong> and view your app's Marketplace listing if you wish.</dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Edit_other_localizations">Step 9 - Edit other localization listings (optional)</a></dt> + <dd>On the left hand menu click <strong>Edit Listing</strong> 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.</dd> +</dl> + +<p>Your app is now in the review queue. You can monitor its progress through the review process by clicking <strong>Status and Version</strong> 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.</p> + +<h2 id="Flow_chart">Flow chart</h2> + +<p><img alt="Flow chart showing the app submission process" src="https://mdn.mozillademos.org/files/8137/Submission%20Process%20v4.png" style="width: 1260px; height: 2834px;"></p> + +<h2 id="What_next">What next?</h2> + +<p>Having completed your app submission your might want to:</p> + +<ul> + <li><a href="https://marketplace.firefox.com/developers/support">get support</a></li> + <li>get news and updates from: + <ul> + <li><a href="https://hacks.mozilla.org/">the Hacks blog</a></li> + <li><a href="https://www.youtube.com/user/mozhacks">the Hacks video channel on YouTube</a></li> + <li><a href="https://twitter.com/mozhacks">the Hacks twitter feed</a></li> + <li><a class="external external-icon" href="https://marketplace.firefox.com/developers/#newsletter-signup">the Apps & Hacks newsletter</a></li> + </ul> + </li> + <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Apps">get involved with Marketplace</a></li> +</ul> 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 +--- +<p>Marketplace submission</p> 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 +--- +<div class="summary"> + <p>ফায়ারফক্স মার্কেটপ্লেস ব্যবহার করে কোন অ্যাপ্লিকেশন বিতরণ করার জন্য যা আপনার জানা দরকার তা'র সবই এই আর্টিকেলে রয়েছে। অ্যাপ্লিকেশন ডেভেলপার এবং ব্যবহারকারী - সবার কথা মাথায় রেখেই এই নিয়মগুলো তৈরি করা হয়েছে। ডেভেলপারদের তাদের ব্যবসা'র সুবিধার্তে নীতিগত, ধারাবাহিক এবং সহজ নীতিমালা পছন্দ করেন। আর ব্যবহারকারীরা নিরাপদ অ্যাপ্লিকেশন, যা তাদের ডিভাইসে ঠিকমত চলবে এবং যেরকম হওয়ার কথা সেরকমভাবেই অ্যাপ্লিকেশনটি কাজ করবে এই নিশ্চয়তা চান। নিচের নিতিমালা এই দুই পক্ষের সুবিধা'র কথা মাথায় রেখেই তৈরি করা হয়েছে।</p> +</div> +<p>অ্যাপ্লিকেশন অনুমোদন বলতে মজিলা বুঝাতে চায়, তা নিচে দেওয়া হলঃ</p> +<ul> + <li>নীতিমালা অত্যন্ত নীতিগতভাবে, সচেতনভাবে এবং ধারাবাহিকভাবে প্রয়োগ করা হবে। অ্যাপ অনুমোদন প্রক্রিয়া কোন প্রহরী বা বাধা নয়, বরং বিশ্বস্ত সঙ্গী হিসেবে কাজ করবে যাতে ডেভেলপাররা মতামত পাওয়ার মাধ্যমে আরো সফল হতে পারে।</li> + <li>অনুমোদকরা কোন QA দল নয়! অনুমোদন প্রক্রিয়াতে কেউ একজন আপনার অ্যাপ এর মেনিফেস্ট ফাইলটি পড়বেন এবং সাধারণ ব্যবহারকারী'র মত অ্যাপটি ব্যবহার করে দেখবেন।</li> + <li>যদি কোন অ্যাপ অনুমোদন প্রক্রিয়া পার হতে ব্যর্থ হয় তাহলে ডেভেলপারকে পরিষ্কারভাবে সমস্যাগুলো ব্যখ্যা করা হবে, কীভাবে সমস্যাটি তৈরি করা যায় তা জানানো হবে এবং যথাসম্ভব ডেভেলপারকে সঠিক নির্দেশনা দেওয়া হবে প্রয়োজনীয় ডকুমেন্টেশনের লিঙ্ক সহ। কী কী পরিবর্তন করা যেতে পারে তা নিয়ে পরামর্শ দেওয়া হতে পারে।</li> + <li>অ্যাপটি <em>দেখতে</em> কেমন তা নিয়ে কোন বিচার অনুমোদকরা করেন না, বরং কীভাবে অ্যাপটি <em>কাজ করে</em> সেটিই তাদের দেখার বিষয়। যেমন, ধরা যাক কোন অ্যাপ এ কমলা পটভূমিতে লাল রঙ দিয়ে টেক্সট লেখা হয়েছে। অ্যাপটি দেখতে <em>বিশ্রী</em> এটা বলে একে বাতিল করা হবে না, তবে অ্যাপটি'র লেখা পড়া যায়না এই কারণে অ্যাপটি বাতিল হতে পারে।</li> + <li>আমরা কোনকিছু নিয়ে সন্দেহের সবসময় ডেভেলপারদের পক্ষে অবস্থান নেই। যদি আমরা কোন অ্যাপ বাতিল করা হবে কিনা এটা নিয়ে অনিশ্চিত থাকি, তাহলে বাতিল করার <em>আগেই</em> আমরা প্রশ্ন করি। ডেভেলপারের নিয়ন্ত্রণে নেই, এমন কোন প্ল্যাটফর্ম নিয়ে সমস্যার কারণে (জানামতে) কোন অ্যাপ বাতিল করা হয়না; তবে অ্যাপটি যদি কাজ না করে তাহলে আমরা অনুমোদন স্থগিত রাখি।</li> +</ul> +<h2 id="নিরাপত্তা">নিরাপত্তা</h2> +<p>অ্যাপ এর নিরাপত্তা নিয়ে বিস্তারিত পাবেন এখানেঃ <a href="https://wiki.mozilla.org/Apps/Security">https://wiki.mozilla.org/Apps/Security</a></p> +<ul> + <li>অ্যাপটি যেই ডোমেইনে আছে, অ্যাপ এর মেনিফেস্ট ও সেখান থেকেই সরবরাহ করতে হয়।</li> + <li>অ্যাপ মেনিফেস্টের <code>Content-Type</code> হেডারের মান হিসেবে <code>application/x-web-app-manifest+json</code> পাঠাতে হবে।</li> + <li>ডেভেলপারের অনুমতি নেই এমন কোন কিছু রিডাইরেক্ট করে বা iframe ব্যবহার করে দেখানো যাবে না।</li> + <li>আপনার অ্যাপটি ডিভাইস থেকে কি কি সুবিধা নিতে চায় তা অবশ্যই অ্যাপ মেনিফেস্টে লিখতে হবে - কি কারণে তা সহ।</li> +</ul> +<h2 id="ব্যক্তিগত_গোপনীয়তা">ব্যক্তিগত গোপনীয়তা</h2> +<ul> + <li>অ্যাপ জমা দেওয়ার সময় ডেভেলপারকে তার অ্যাপ এর ব্যবহারকারীদের ব্যক্তিগত তথ্যের গোপনীয়তা কেমন - তার একটা লিঙ্ক দিতে হবে। তবে এই ডকুমেন্টটি কিভাবে লিখতে হবে তার কোন বাঁধাধরা নিয়ম নেই। আপনার সুবিধার জন্য আমাদের <a href="https://github.com/flamsmark/privacy-policy-template">গোপনীয়তা নীতিমালা খসড়া</a> দেখতে পারেন। এছাড়া আমাদের <a href="/bn-BD/Marketplace/Publishing/Privacy_policies">গোপনীয়তা নীতিমালা লেখার নির্দেশনা</a> দেখতে পারেন।</li> +</ul> +<h2 id="অ্যাপ_এর_কণ্টেন্টবিষয়বস্তু">অ্যাপ এর কণ্টেন্ট/বিষয়বস্তু</h2> +<ul> + <li>যেকোন অ্যাপ যা আমাদের বিষয়বস্তু নির্দেশনা (নিচে দেওয়া হয়েছে) মেনে চলে না তা অনুমোদন করা হবে না। আপনার যদি প্রশ্ন থাকে তাহলে অ্যাপ জমা দেওয়ার আগেই অনুমোদক দলের সাথে কথা বলে নিশ্চিত হয়ে নিন। আমরা চাই না বাতিল হতে পারে এরকম কোন বিষয়বস্তু নিয়ে অ্যাপ লিখে আপনি আপনার মূল্যবান সময় নষ্ট করেন।</li> + <li>জানুয়ারি ২০১৪ থেকে সব অ্যাপের জন্য International Age Rating Coalition (IARC) রেটিং লাগবে। এই রেটিং পাওয়ার জন্য আমরা আপনাকে অ্যাপ জমা দেওয়ার সময় একটি লিংকে পাঠিয়ে দেব, কিছু প্রশ্নের উত্তর দেওয়ার মাধ্যমে আপনি সাথে সাথেই রেটিং পেয়ে যাবেন। এই প্রক্রিয়া নিয়ে বিস্তারিত পাবেন <a href="/bn-BD/Marketplace/Submission/Rating_Your_Content">এখানে</a>।</li> + <li>ফায়ারফক্স মার্কেটপ্লেসে জমা দেওয়া স্ক্রিনশট এবং বিবরণ অবশ্যই অ্যাপের সাথে সামঞ্জস্যপূর্ণ হতে হবে।</li> + <li>অ্যাপের মেনিফেস্ট ফাইলে <a href="/en-US/docs/Web/Apps/Manifest#locales"><code>locale</code> keys</a> এর মান হিসেবে আপনার অ্যাপ যেসব ভাষা সমর্থন করে তাদের হুবুহু দিতে হবে। আপনি যদি বাংলা ভাষার জন্য <code>locale</code> মান দিয়ে থাকেন, তাহলে ব্যবহারকারীরা আশা করবে বাংলা ভাষাতেও আপনার অ্যাপটি চলে।</li> +</ul> +<h3 id="বিষয়বস্তু_নীতিমালা"><strong>বিষয়বস্তু নীতিমালা</strong></h3> +<p>ফায়ারফক্স মার্কেটপ্লেসে যেসব বিষয়বস্তু অনুমোদিত <strong>নয়</strong> তার তালিকা নিচে দেওয়া হয়েছে। এই তালিকায় শুধু উদাহরণ রয়েছে, পুরোপুরি নির্দিষ্ট করে দেওয়া হয়নি এবং পরিবর্তিত হতে পারে। এই নীতিমালা ভঙ্গ করে এমন অ্যাপ মজিলা দেখার সাথে সাথেই ফায়ারফক্স মার্কেটপ্লেস থেকে সরিয়ে দিতে পারে।</p> +<ul> + <li>পর্নোগ্রাফিক/অশালীন বিষয়বস্তু, অথবা যৌনতা/হিংস্রতা ইত্যাদির ছবিতে বর্ণনা।</li> + <li>অন্য কারো অধিকার খর্ব করে এমন বিষয়বস্তু, মেধা সম্পত্তি অথবা প্রোপাইটেরি অধিকার অথবা গোপনীয়তা কিংবা প্রচারণার অধিকার সহ।</li> + <li>মজিলা কিংবা ব্যবহারকারীদের ক্ষতি করতে পারে এরকম বিষয়বস্তু (যেমন ক্ষতিকারক কোড, ভাইরাস, স্পাইওয়ার, ম্যালওয়ার ইত্যাদি)</li> + <li>অবৈধ বা বেআইনি কর্মকান্ড সমর্থন/প্রচার করে এমন বিষয়বস্তু।</li> + <li>এমনব বিষয়বস্তু যা প্রতারণামূলক, শঠ, ভুল পথে নিয়ে যায়, পতারণামূলক, মানুষের তথ্য চুরি করে বা পরিচিত চুরি করে।</li> + <li>জুয়া প্রচার/প্রমোশন করে এমন কিছু।</li> + <li>অবৈধ বা নিয়ন্ত্রিত দ্রব্য বা সেবার বিজ্ঞাপন দেয় এমন বিষয়বস্তু।</li> + <li>শিশুদের অপব্যবহার করে।</li> + <li>এমন বিষয়বস্তু যা বয়স, লিঙ্গ, জাতি, বংশ, জাতীয়তা, ধর্ম, লিঙ্গভিত্তিক বিচিত্রতা, শারীরিক অক্ষমতা, থাকার স্থান/অঞ্চল বা কোন সংরক্ষিত শ্রেণি ইত্যাদির ওপর ভিত্তি করে কাউকে বা কোন দল কে অপমান করে, ভয় দেখায়, বা হিংস্রতা উত্তেজিত করে, বা ক্ষতিকারক কাজকর্মে লিপ্ত হতে উৎসাহিত করে অথবা ঘৃণা ভরা বিবৃতি দেয়।</li> + <li>এমন বিষয়বস্তু যা ব্যবহারকারীকে তার অ্যাপটি কেনার সিদ্ধান্ত নিতে ভুল পথে নিয়ে যায়।</li> +</ul> +<h2 id="অ্যাপ_এর_আচরণ">অ্যাপ এর আচরণ</h2> +<ul> + <li>আপনার অ্যাপ এর প্রধান প্রধান যে কাজগুলো করার কথা, অনুমোদনকারী সেই কাজগুলো আপনার অ্যাপটি করতে পারে কিনা তা দেখবে। অ্যাপ এর চেহারা নিয়ে কোন ত্রুটি বা ছোটখাট সমস্যার কারণে আপনার অ্যাপ বাতিল হবে না, তবে আপনাকে এটি জানানো হবে।</li> + <li>অ্যাপকে সিস্টেমের দক্ষতা এবং স্থিতিশীলতার কোন ক্ষতি করতে দেওয়া যাবে না।</li> +</ul> +<h2 id="অ্যাপ_এর_ব্যবহারযোগ্যতা">অ্যাপ এর ব্যবহারযোগ্যতা</h2> +<ul> + <li>আপনি যেই প্ল্যাটফর্মে অ্যাপটি চালাতে চান, সেই প্লাটফর্মের জন্য অ্যাপ এর লে-আউট যাতে পারদর্শী হয় সে ব্যাপারে ডেভেলপারকে সচেতন হতে হবে। এই নিয়মটি রাখা হয়েছে যেন হরহামেশাই হয় এমন ভুলগুলো এড়ানো যায়। এমন কিছু ভুলঃ + <ul> + <li>ডেস্কটপের জন বানানো কোন সাইট মোবাইলের অ্যাপ হিসেবে জমা দিয়ে দেওয়া।</li> + <li>এমন কোন অ্যাপ যেটি স্ক্রিন এর খালি জায়গা'র পুরোটা জুড়ে থাকে না (যেমন ৩২০x৪৮০ সাইজের কোন অ্যাপ যা একটা ট্যাবলেটের উপরের কোণায় পরে থাকে, স্ক্রিনের বাকি জায়গা খালি রেখে। এমন কোন অ্যাপ নিশ্চয়ই কেউ দেখতে চান না!)</li> + </ul> + </li> + <li>অ্যাপ এর এক পাতা থেকে আরেক পাতায় যেতে নিজস্ব কোন পদ্ধতি ব্যবহার করুন। ব্রাউজার ক্রোমের ওপর নির্ভর করা বা কোন হার্ড-অয়্যার ব্যাক বাটনের ওপর ভরসা করা ঠিক হবে না কারণ তা সব ডিভাইসে থাকে না। + <ul> + <li>যেমন, যদি অনুমোদক অ্যাপ এর কোন একটা পাতায় চলে যান যেখান থেকে তিনি আর আগের স্ক্রিনে ফেরত আসতে পারেন না। তবে এর মানে এই না যে নেটিভ অ্যাপ এর মত আপনার অ্যাপ এ বাটন-বার বসাতে হবে।</li> + <li>ফায়ারফক্স ওএস ১.১ বা এর পরের ভার্সনগুলোতে আপনি <code><a href="/bn-BD/docs/Web/Apps/Developing/Manifest">chrome</a></code> মেনিফেস্ট প্রোপার্টি ব্যবহার করে সাধারণ ন্যাভিগেশন নিয়ন্ত্রণ দিতে পারেবেন।</li> + </ul> + </li> + <li>ন্যাভিগেশন (অ্যাপ এর এক অংশ থেকে আরেক অংশে যাওয়ার উপকরণ) যেমন বাটন, লিঙ্কগ ইত্যাদি যাতে সহজেই ক্লিক বা স্পর্শ করা যায় সেদিকে খেয়াল রাখতে হবে।</li> +</ul> +<h2 id="বাতিল_হওয়ার_কারণ">বাতিল হওয়ার কারণ</h2> +<p>যদিও আমরা কখনোই এটা করতে চাইনা, তারপরেও আমরা নিরাপত্তা, গোপনীয়তা, অথবা বিষয়বস্তু নিয়ে নীতিমালা ভঙ্গ করে বা অথবা সিস্টেম/নেটোয়ার্কের দক্ষতা মারাত্মকভাবে ক্ষতিগ্রস্ত করে এমন অ্যাপ সরিয়ে দেওয়ার ("ব্লকলিস্ট") অধিকার সংরক্ষণ করি। কোন অ্যাপ সরিয়ে দেওয়ার আগে ডেভেলপারকে ঘটনাটি জানানো হবে। কোন প্রমাণ না থাকলে আমরা ধরে নেই ডেভেলপারের কোন অসৎ উদ্দেশ্য ছিল না এবং অ্যাপ অনুমোদক দলের কাছ থেকে পূর্ণ সহায়তা করা হয় যাতে কি হচ্ছে তা ডেভেলপার জানতে পারে এবং সমস্যা সমাধানে সাহায্য করতে পারে। নির্দিষ্ট করে বলে গেলে, নিচের কিছু উদাহরণে অ্যাপ সরিয়ে দেওয়া হতে পারেঃ</p> +<ul> + <li>ফিশিং</li> + <li>স্প্যামিং</li> + <li>নিরীহ বিষয়বস্তু (যেমন কিউট কুকুরছানাদের ছবি) থেকে মারাত্মক/ভীতিকর বিষয়বস্তু দেখানো শুরু করলে (আপনার অ্যাপ এর বিষয়বস্তু'র রেটিং পরিবর্তন না করে)</li> + <li>ব্যবহারকারীদের একটা বড় অংশের কাছে আপনার অ্যাপ যদি ঠিকমত কাজ না করে - ফোনের দক্ষতা নষ্ট করে, ফোন রিবুট করায়, ব্যবহারকারী'র তথ্য হারিয়ে যাওয়া ইত্যাদি, যখন ব্যবহারকারীরা বলতে পারেন না এটা অ্যাপ এর কারণে হচ্ছে কিনা এবং ডিভাইস রিবুট করলে সমস্যার সমাধান হয় না।</li> + <li>অ্যাপটি নেটওয়ার্কে আক্রমণ চালানোর জন্য ব্যবহার করলে, যেমন distributed denial of service (DDOS)।</li> +</ul> 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 +--- +<h2 id="আপনার_পরীক্ষার_পরিবেশ_সেট_করুন">আপনার পরীক্ষার পরিবেশ সেট করুন</h2> +<h3 id="ফায়ারফক্স_ওএস">ফায়ারফক্স ওএস</h3> +<p><a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">ফায়ারফক্স ওএস সিমুলেটর</a> একটি ডেক্সটপ কম্পিউটারে ইন্সটল করুন এবং আপনার অ্যাপ্লিকেশন সিমুলেটরে ইন্সটল করার জন্য সিমুলেটরের কন্ট্রল প্যানেল ব্যবহার করুন।</p> +<h3 id="এ্যানড্রয়েড">এ্যানড্রয়েড</h3> +<p><a href="http://aurora.mozilla.org/">এ্যানড্রয়েডের জন্য অরোরা</a> ইন্সটল করুন। আপনার যদি এ্যানড্রয়েড ডিভাইস না থেকে থাকে, আপনি <a href="http://developer.android.com/sdk/">এ্যানড্রয়েড ইমুলেটর</a> ব্যবহার করতে পারেন।</p> +<p>[কিভাবে অ্যাপ্লিকেশন ইন্সটল করবেন?]</p> +<h3 id="ডেক্সটপ">ডেক্সটপ</h3> +<p><a href="http://aurora.mozilla.org/">ডেক্সটপ এর জন্য অরোরা</a> ইন্সটল করুন।</p> +<p>[কিভাবে অ্যাপ্লিকেশন ইন্সটল করবেন?]</p> +<h2 id="পরীক্ষাকরণ">পরীক্ষাকরণ</h2> +<p>এমনকি যদিও মুক্ত ওয়েব অ্যাপ্লিকেশনগুলো ওয়েব পেইজগুলোর প্রযুক্তি এবং বিতরণ পদ্ধতিই ব্যবহার করে, অ্যাপ্লিকেশন ব্যবহারকারীর অভিঙ্গতাটা বেশ ভিন্ন যেহেতু অ্যাপ্লিকেশনে ব্রাউজার ক্রোম যেমন ইউআরএল বার অথবা পূর্ববর্তী বাটন এবং ফায়ারফক্স ওএস ডিভাইসে এ্যানড্রয়েড এর মত হার্ডওয়্যার পূর্ববর্তী বাটন নেই। এই ধাপগুলো আপনার অ্যাপ্লিকেশনকে অনেক ভালো ব্যবহারকারী অভিঙ্গতা দেয়ার নিশ্চয়তার জন্য আপনাকে সাহায্য করবে।</p> +<ol> + <li>অ্যাপ্লিকেশন ইন্সটল করুন। নিশ্চিত হন স্ক্রিনের উপরে আইকন দেখাচ্ছে এবং অ্যাপ্লিকেশনের নাম কেটে যায়নি।</li> + <li>অ্যাপ্লিকেশন চালু করুন। নিশ্চিত হন স্ক্রিনের মাপ এবং পারিপার্শ্বিক যথাযথ সনাক্ত আছে।</li> + <li>নিশ্চত হন ব্যবহারকারী তাৎক্ষনিক আপনার অ্যাপ্লিকেশনটি দেখতে পায়, আপনার প্রথম পৃষ্ঠা না। মনে রাখবেন, ব্যবহারকারী যারা আপনার অ্যাপ্লিকেশনটি ইন্সটল করছে তারা ফায়ারফক্স মার্কেটপ্লেস থেকে অ্যাপ্লিকেশনের বৈশিষ্ট সম্পর্কে জানে। তাদেরকে অন্য পৃষ্ঠার মাধ্যমে অ্যাপ্লিকেশনের বৈশিষ্ঠ সম্পর্কে জানার জন্য পুনরায় কোন মাধ্যম দ্বারা তথ্য পাঠানোর দরকার নেই। অ্যাপ্লিকেশন শুরু অথবা লগ ইন পেজের মাধ্যমে ব্যবহারকারীকে আরম্ভ করতে দেয়াই হচ্ছে আদর্শবান অভিজ্ঞতা।</li> + <li>আপনার অ্যাপ্লিকেশনের প্রধান বৈশিষ্ঠ সমূহ দ্বারা অ্যাপ্লিকেশন শুরু করুন। নেভিগেশোনাল ডেড এনডস এবং কনটেন্ট স্কেলিং এর ইস্যুগুলো বিশেষভাবে দেখুন।</li> + <li>নিশ্চিত হন যেসব লিংকগুলো আপনার অ্যাপ্লিকেশনের অভিজ্ঞতার বাইরের বিষয়বস্তু, যেমন- অন্য পৃষ্ঠার সাথে লিংক করা অথবা টুইটার, সে ক্ষেত্রে নতুন একটি উইনডো অথবা ফ্রেম চালু করা যেন ব্যবহারকারী একটি পন্থা পায় পূর্বের অ্যাপ্লিকেশনে ফিরে যাওয়ার।</li> + <li>ডেক্সটপ ব্রাউজারের ক্ষেত্র, প্রতিক্রয়াশীল (রেসপনসিভ) ডিজাইন মুড ব্যবহার করুন যেন অ্যাপ্লিকেশনটি সকল প্রকার মাপের স্ক্রিনে চলে। আমরা ৩২০x৪৮০ অথবা ১২৬০x৮০০ রেজুলেশনে চেক করার জন্য প্রস্তাব দিয়ে থাকি।</li> +</ol> +<h2 id="সম্যসা_সমাধান_করা">সম্যসা সমাধান করা</h2> +<p>[সম্যসা সমাধান করার উপায়, ডিবাগিং, সাহায্যের জন্য কোথায় যাবেন]</p> +<h2 id="জমা_দেয়া">জমা দেয়া</h2> +<ol> + <li>যদি ইহা একটি <a href="/en-US/docs/Web/Apps/Packaged_apps">প্যাকেজড অ্যাপ্লিকেশন</a> হয়, নিশ্চত হন ইহা রুট এর মধ্যে তালিকা ফাইল সহ জিপ করা আছে।</li> + <li>তালিকা প্রিভিউ চেক করুন। নিশ্চত হন আইকন এবং স্ক্রিন শটগুলোর লডিং ঠিক আছে, ডেভলপারের নাম আপনার চাওয়া অনুযায়ী প্রকাশিত হচ্ছে এবং বর্ণনাতে অদ্ভুত অথবা উদ্ভট বর্ণমালা নেই।</li> + <li>কিছু সময় একটি সম্পূর্ণ বর্ণনা বানাতে ব্যয় করুন। একটি সুন্দর বর্ণনা অ্যাপ্লিকেশনের কি কর্ম তার এক অথবা দুই সংক্ষিপ্তসার বর্ণনা দ্বারা শুরু হয়, তারপর নির্দিষ্ট বৈশিষ্ট্য এবং সুবিধা সহ একটি তালিকা।</li> + <li>যদি আপনার অ্যাপ্লিকেশনে একটি অ্যাকাউন্টের দরকার হয়, তাহলে দয়া করে লগইন তথ্য দিবেন যেন মার্কেটপ্লেস স্টাফ পরীক্ষামূলক ব্যবহার করতে পারে।</li> +</ol> 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 +--- +<div class="summary"> +<p>মজিলা <a href="http://globalratings.com">ইন্টারন্যাশনাল এইজ রেটিং জোট</a> (আইএআরসি) এর সাথে পার্টনার হয়ে বয়স সম্পর্কিত বিষয়বস্তুর রেটিং সকল প্রকার অ্যাপলিকেশন সহ যুক্ত করেছে। কারণ মজিলা ব্যবহারকারীদের খেয়াল রাখে এবং বিশ্বাস করে যে ব্যবহারকারীদের নির্বাচনের সুযোগ থাকা উচিত কোন বিষয়বস্তু তাদের জন্য সঠিক, ১৫ই এপ্রিল, ২০১৪ থেকে ফায়ারফক্স মার্কেটপ্লেস এ সকল অ্যাপ্লিকেশন এর জন্য আইএআরসি রেটিং থাকার দরকার হবে। যদিও আমরা আমাদের সকল অ্যাপ্লিকেশন ভালোবাসি, আমাদের এই উদ্যোগের প্রতিজ্ঞা হল কোন অ্যাপ্লিকেশন অথবা গেম যেটার রেটিং থাকবে না তা মার্কেটপ্লেস থেকে শেষ সময়সীমা ১৫ই এপ্রিল, ২০১৪ এর পর সরিয়ে ফেলা হবে। আইএআরসি আপনাকে একটি ফ্রি টুল দিবে আপনার রেটিং তৈরির জন্য।</p> +</div> + +<h2 id="আইএআরসি_রেটিং_টুল_সম্পর্কে">আইএআরসি রেটিং টুল সম্পর্কে</h2> + +<h4 id="আইএআরসি_আন্তর্জাতিক_রেটিং_বোর্ড-এর_মধ্যে_একটি_সহযোগিতামূলক_প্রচেষ্টা_পৃথিবীব্যাপী_বিষয়বস্তুর_রেটিং_বরাদ্দ_করতে_একটি_সমাধান_হিসেবে_একটি_রেটিং_টুল_এর_সূচনা_করলো_ডিজিটালভাবে_বিতরণ_করলো_অ্যাপ্লিকেশন_এবং_গেম।_একটি_সাধারণ_ফরম_পূরণের_মাধ্যমে_আপনি_সাথে_সাথে_সকল_প্রকার_রেটিং_বোর্ড_এর_জন্য_রেটিং_এর_খেতাব_পেয়ে_যাবেন।_এটি_শুধু_ব্যবহারকারীকে_বিষয়বস্তু_সম্পর্কে_জানতে_সাহায্য_করে_না_কিন্তু_উপরন্তু_নাটকীয়ভাবে_মূল্য_হ্রাস_করে_এবং_ঝামেলা_সংযুক্ত_বিশ্বব্যাপী_বিষয়বস্তু_আলাদাভাবে_রেটিং_করে।"><span style="font-size: 16px;">আইএআরসি</span>, <span style="font-size: 16px;">আন্তর্জাতিক রেটিং বোর্ড-এর মধ্যে একটি সহযোগিতামূলক প্রচেষ্টা, <span style="font-size: 16px;">পৃথিবীব্যাপী বিষয়বস্তুর রেটিং বরাদ্দ করতে <span style="font-size: 16px;">একটি সমাধান হিসেবে <span style="font-size: 16px;">একটি রেটিং টুল এর সূচনা করলো, <span style="font-size: 16px;">ডিজিটালভাবে বিতরণ করলো অ্যাপ্লিকেশন এবং গেম। একটি সাধারণ ফরম পূরণের মাধ্যমে, আপনি সাথে সাথে সকল প্রকার রেটিং বোর্ড এর জন্য রেটিং এর খেতাব পেয়ে যাবেন। এটি শুধু ব্যবহারকারীকে বিষয়বস্তু সম্পর্কে জানতে সাহায্য করে না, </span></span></span></span></span>কিন্তু উপরন্তু নাটকীয়ভাবে মূল্য হ্রাস করে এবং ঝামেলা সংযুক্ত বিশ্বব্যাপী বিষয়বস্তু আলাদাভাবে রেটিং করে।</h4> + +<h2 id="ইন্টারন্যাশনাল_রেটিং_সিস্টেম_সমর্থিত">ইন্টারন্যাশনাল রেটিং সিস্টেম সমর্থিত</h2> + +<p>Using a single rating wizard, content ratings are generated for multiple rating systems, countries and regions.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Rating System</th> + <th scope="col">Countries Supported</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="http://culturadigital.br/classind/">Classificação Indicativa </a></td> + <td>Brazil</td> + </tr> + <tr> + <td><a href="http://www.esrb.org/">ESRB</a></td> + <td>Canada, Mexico, United States</td> + </tr> + <tr> + <td><a href="http://www.pegi.info">PEGI</a></td> + <td>Austria, 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</td> + </tr> + <tr> + <td><a href="http://usk.de/">USK</a></td> + <td>Germany</td> + </tr> + <tr> + <td><a href="https://www.globalratings.com/ratings_guide.aspx">Generic</a></td> + <td>Used for all other countries</td> + </tr> + </tbody> +</table> + +<h2 id="What’s_in_a_Content_Rating">What’s in a Content Rating?</h2> + +<p>The rating system provides users with three types of information:</p> + +<ul> + <li>The recommended minimum age — this may vary by country and culture.</li> + <li>Content descriptors — this provides information about any content the app contains that may be of concern to some users. This may include information on violence, references to alcohol or drug use, scary elements, real or simulated gambling, etc.</li> + <li>Interactive Elements — this provides details of any user interaction features the app contains, such as sharing personal information, sharing their location, In-App Purchases, downloadable content or social networking facilities.</li> +</ul> + +<p>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.</p> + +<h2 id="Obtaining_a_Content_Rating_for_Your_App">Obtaining a Content Rating for Your App</h2> + +<p>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.</p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<ol> + <li>Log into the Firefox Marketplace developer site; the rating tool may only be accessed when you are logged in as a developer.</li> + <li> + <p>Access the IARC Rating tool during the submission process:</p> + + <p><img alt="Demonstrates where in the app submission flow where ratings can be entered." src="https://mdn.mozillademos.org/files/6579/submission_flow.png" style="width: 200px; height: 239px; border-width: 1px; border-style: solid;"></p> + + <p>or from the Dev Dashboard:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6623/from_nav_bar.png" style="border-width: 1px; border-style: solid; height: 199px; width: 200px;"></p> + </li> + <li> + <p>Start the rating process:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6583/start_the_rating_process.png" style="width: 600px; height: 242px; border-width: 1px; border-style: solid;"></p> + + <p>or enter your information for an existing rating:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6585/enter_existing_rating_info.png" style="width: 600px; height: 276px; border-width: 1px; border-style: solid;"></p> + </li> + <li> + <p>Fill out the short questionnaire:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6587/questions.png" style="width: 600px; border-width: 1px; border-style: solid; height: 725px;"></p> + </li> + <li> + <p>Add additional information about your app:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6589/additional_info.png" style="width: 589px; height: 637px;"></p> + </li> + <li> + <p>Preview and confirm your rating information:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6591/confirm_info.png" style="width: 400px; height: 865px; border-width: 1px; border-style: solid;"></p> + </li> + <li> + <p>Return to the developer dashboard and you should see your rating information. You are ready to go!</p> + </li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You will receive an email with your rating certificate and security code. Please keep a copy for your records.</p> +</div> + +<h2 id="More_information">More information</h2> + +<p>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 <a href="mailto:dev-questions@globalratings.com">dev-questions@globalratings.com</a>. Additional information is also available on the <a href="http://globalratings.com/">global ratings website</a>.</p> + +<p>If you have any other questions, you can get in touch with Mozilla's app review team at <a href="https://groups.google.com/forum/#%21forum/mozilla.appreview" title="appreview@lists.mozilla.org">mozilla.appreview</a>.</p> 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 +--- +<div class="callout-box"><strong><a href="/en-US/docs/XUL_Tutorial" title="en-US/docs/XUL_Tutorial">XUL Tutorial</a></strong><br> +A guided tutorial that will help you get started with XUL, originally from XULPlanet.</div> + +<div> +<p><span class="seoSummary"><strong>XUL</strong> (XML User Interface Language) is Mozilla's <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>-based language for building user interfaces of applications like Firefox.</span> The term XUL is sometimes used to refer to the whole <a href="/en-US/docs/The_Mozilla_platform" title="/en-US/docs/The_Mozilla_platform">Mozilla platform</a> (e.g. XUL applications are applications using XUL and other components of the platform).</p> + +<p><a href="/en-US/docs/XUL_controls" title="en-US/docs/XUL_controls">XUL Controls</a> lists some of the common controls provided by XUL.</p> +</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation">Documentation</h2> + + <dl> + <dt><strong><a href="/en-US/docs/XUL_Tutorial" title="en-US/docs/XUL_Tutorial">XUL Tutorial</a></strong></dt> + <dd>A guided tutorial that will help you get started with XUL, originally from XULPlanet.</dd> + <dt><a href="/en-US/docs/XUL_Reference" title="en-US/docs/XUL_Reference">XUL Reference</a></dt> + <dd>XUL elements, attributes, properties, methods, and event handlers.</dd> + <dt><a href="/en-US/docs/XUL_controls" title="en-US/docs/XUL_controls">XUL Controls</a></dt> + <dd>A quick list of all of the available XUL controls.</dd> + <dt><a href="/en-US/docs/The_Joy_of_XUL" title="en-US/docs/The_Joy_of_XUL">The Joy of XUL</a></dt> + <dd>Describes the key features and components of XUL.</dd> + <dt><a href="/en-US/docs/XUL/PopupGuide" title="en-US/docs/XUL/PopupGuide">Menus and Popups Guide</a></dt> + <dd>A guide on using menus and popup panels.</dd> + <dt><a href="/en-US/docs/XUL/Template_Guide" title="en-US/docs/XUL/Template_Guide">Template Guide</a></dt> + <dd>A detailed guide on XUL templates, which is a means of generating content from a datasource.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="Drag and Drop">Drag and Drop</a></dt> + <dd>How to perform drag and drop operations.</dd> + </dl> + + <dl> + <dt>XUL Periodic Table</dt> + <dd>This collection of XUL demos used to be available as a web page, but can no longer be viewed in Firefox since support for <a href="/en-US/docs/Remote_XUL" title="/en-US/docs/Remote_XUL">Remote XUL</a> was disabled. There is a XULRunner application containing the XUL Periodic Table which can be opened with Gecko based browsers. <a href="https://github.com/matthewkastor/XULRunner-Examples" title="https://github.com/matthewkastor/XULRunner-Examples">You can get it here</a>. See: <a href="/en-US/docs/XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications" title="/en-US/docs/XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications">XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications</a> for instructions on running XULRunner apps in Firefox.</dd> + <dt>Changes to XUL</dt> + <dd>New XUL features and changes to existing features are included in the <a href="/en-US/docs/Mozilla/Firefox/Releases" title="/en-US/docs/Mozilla/Firefox/Releases">Firefox developer release notes</a>.</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/XUL" title="tag/XUL">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community">Community</h2> + + <ul> + <li>View Mozilla forums...{{ DiscussionList("dev-tech-xul", "mozilla.dev.tech.xul") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/xul">#xul on irc.mozilla.org</a></li> + </ul> + + <h2 class="Tools" id="Tools">Tools</h2> + + <ul> + <li><a class="external" href="/en-US/docs/XUL_Explorer" title="en-US/docs/XUL_Explorer">XUL Explorer</a> (a lightweight XUL IDE)</li> + <li><a href="https://github.com/matthewkastor/XULExplorer" title="https://github.com/matthewkastor/XULExplorer">XULExplorer</a> (Patched version of XUL explorer)</li> + <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension developer's extension</a> (featuring a Live XUL Editor)</li> + <li><a class="external" href="http://forum.addonsmirror.net/index.php?showtopic=751" title="http://forum.addonsmirror.net/index.php?showtopic=751">XULRef sidebar</a></li> + <li><a class="external" href="http://www.getfirebug.com/">Firebug</a></li> + <li><a href="/en-US/docs/DOM_Inspector" title="en-US/docs/DOM_Inspector">DOM Inspector</a></li> + <li><a class="external" href="http://www.spket.com/">Spket IDE</a>, IDE for XUL/XBL</li> + <li><a class="external" href="http://www.amplesdk.com" title="http://www.amplesdk.com/">Ample SDK</a>, (Cross-browser XUL renderer in JavaScript/HTML)</li> + </ul> + + <p><span class="alllinks"><a href="/en-US/docs/tag/tools" title="tag/tools">View All...</a></span></p> + + <h2 class="Related_Topics" id="Related_Topics">Related Topics</h2> + + <ul> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XBL" title="en-US/docs/XBL">XBL</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/RDF" title="en-US/docs/RDF">RDF</a>, <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">Extensions</a>, <a href="/en-US/docs/XULRunner" title="en-US/docs/XULRunner">XULRunner</a></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> 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 +--- +<p>This tutorial describes <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, the <a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a> User-interface Language. This language was created for the Mozilla application and is used to describe its user interface.</p> +<h2 id="Introduction" name="Introduction">Introduction</h2> +<ul> + <li><a href="/en-US/docs/XUL/Tutorial/Introduction" title="/en-US/docs/XUL/Tutorial/Introduction">Introduction</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/XUL_Structure" title="/en-US/docs/XUL/Tutorial/XUL_Structure">XUL Structure</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/The_Chrome_URL" title="/en-US/docs/XUL/Tutorial/The_Chrome_URL">The Chrome URL</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Manifest_Files" title="/en-US/docs/XUL/Tutorial/Manifest_Files">Manifest Files</a></li> +</ul> +<h2 id="Simple_Elements" name="Simple_Elements">Simple Elements</h2> +<ul> + <li><a href="/en-US/docs/XUL/Tutorial/Creating_a_Window" title="/en-US/docs/XUL/Tutorial/Creating_a_Window">Creating a Window</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Adding_Buttons" title="/en-US/docs/XUL/Tutorial/Adding_Buttons">Adding Buttons</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Adding_Labels_and_Images" title="/en-US/docs/XUL/Tutorial/Adding_Labels_and_Images">Adding Labels and Images</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Input_Controls" title="/en-US/docs/XUL/Tutorial/Input_Controls">Input Controls</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Numeric_Controls" title="/en-US/docs/XUL/Tutorial/Numeric_Controls">Numeric Controls</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/List_Controls" title="/en-US/docs/XUL/Tutorial/List_Controls">List Controls</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Progress_Meters" title="/en-US/docs/XUL/Tutorial/Progress_Meters">Progress Meters</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Adding_HTML_Elements" title="/en-US/docs/XUL/Tutorial/Adding_HTML_Elements">Adding HTML Elements</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Using_Spacers" title="/en-US/docs/XUL/Tutorial/Using_Spacers">Using Spacers</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/More_Button_Features" title="/en-US/docs/XUL/Tutorial/More_Button_Features">More Button Features</a></li> +</ul> +<h2 id="The_Box_Model" name="The_Box_Model">The Box Model</h2> +<ul> + <li><a href="/en-US/docs/XUL/Tutorial/The_Box_Model" title="/en-US/docs/XUL/Tutorial/The_Box_Model">The Box Model</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Element_Positioning" title="/en-US/docs/XUL/Tutorial/Element_Positioning">Element Positioning</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Box_Model_Details" title="/en-US/docs/XUL/Tutorial/Box_Model_Details">Box Model Details</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Groupboxes" title="/en-US/docs/XUL/Tutorial/Groupboxes">Groupboxes</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Adding_More_Elements" title="/en-US/docs/XUL/Tutorial/Adding_More_Elements">Adding More Elements</a></li> +</ul> +<h2 id="More_Layout_Elements" name="More_Layout_Elements">More Layout Elements</h2> +<ul> + <li><a href="/en-US/docs/XUL/Tutorial/Stacks_and_Decks" title="/en-US/docs/XUL/Tutorial/Stacks_and_Decks">Stacks and Decks</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Stack_Positioning" title="/en-US/docs/XUL/Tutorial/Stack_Positioning">Stack Positioning</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Tabboxes" title="/en-US/docs/XUL/Tutorial/Tabboxes">Tabboxes</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Grids" title="/en-US/docs/XUL/Tutorial/Grids">Grids</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Content_Panels" title="/en-US/docs/XUL/Tutorial/Content_Panels">Content Panels</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Splitters" title="/en-US/docs/XUL/Tutorial/Splitters">Splitters</a></li> +</ul> +<h2 id="Toolbars_and_Menus" name="Toolbars_and_Menus">Toolbars and Menus</h2> +<ul> + <li><a href="/en-US/docs/XUL/Tutorial/Toolbars" title="/en-US/docs/XUL/Tutorial/Toolbars">Toolbars</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Simple_Menu_Bars" title="/en-US/docs/XUL/Tutorial/Simple_Menu_Bars">Simple Menu Bars</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/More_Menu_Features" title="/en-US/docs/XUL/Tutorial/More_Menu_Features">More Menu Features</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Popup_Menus" title="/en-US/docs/XUL/Tutorial/Popup_Menus">Popup Menus</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Scrolling_Menus" title="/en-US/docs/XUL/Tutorial/Scrolling_Menus">Scrolling Menus</a></li> +</ul> +<h2 id="Events_and_Scripts" name="Events_and_Scripts">Events and Scripts</h2> +<ul> + <li><a href="/en-US/docs/XUL/Tutorial/Adding_Event_Handlers" title="/en-US/docs/XUL/Tutorial/Adding_Event_Handlers">Adding Event Handlers</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/More_Event_Handlers" title="/en-US/docs/XUL/Tutorial/More_Event_Handlers">More Event Handlers</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Keyboard_Shortcuts" title="/en-US/docs/XUL/Tutorial/Keyboard_Shortcuts">Keyboard Shortcuts</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Focus_and_Selection" title="/en-US/docs/XUL/Tutorial/Focus_and_Selection">Focus and Selection</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Commands" title="/en-US/docs/XUL/Tutorial/Commands">Commands</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Updating_Commands" title="/en-US/docs/XUL/Tutorial/Updating_Commands">Updating Commands</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers" title="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers">Broadcasters and Observers</a></li> +</ul> +<h2 id="Document_Object_Model" name="Document_Object_Model">Document Object Model</h2> +<ul> + <li><a href="/en-US/docs/XUL/Tutorial/Document_Object_Model" title="/en-US/docs/XUL/Tutorial/Document_Object_Model">Document Object Model</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Modifying_a_XUL_Interface" title="/en-US/docs/XUL/Tutorial/Modifying_a_XUL_Interface">Modifying a XUL Interface</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Manipulating_Lists" title="/en-US/docs/XUL/Tutorial/Manipulating_Lists">Manipulating Lists</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Box_Objects" title="/en-US/docs/XUL/Tutorial/Box_Objects">Box Objects</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/XPCOM_Interfaces" title="/en-US/docs/XUL/Tutorial/XPCOM_Interfaces">XPCOM Interfaces</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/XPCOM_Examples" title="/en-US/docs/XUL/Tutorial/XPCOM_Examples">XPCOM Examples</a></li> +</ul> +<h2 id="Trees" name="Trees">Trees</h2> +<ul> + <li><a href="/en-US/docs/XUL/Tutorial/Trees" title="/en-US/docs/XUL/Tutorial/Trees">Trees</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/More_Tree_Features" title="/en-US/docs/XUL/Tutorial/More_Tree_Features">More Tree Features</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Tree_Selection" title="/en-US/docs/XUL/Tutorial/Tree_Selection">Tree Selection</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Custom_Tree_Views" title="/en-US/docs/XUL/Tutorial/Custom_Tree_Views">Custom Tree Views</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Tree_View_Details" title="/en-US/docs/XUL/Tutorial/Tree_View_Details">Tree View Details</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Tree_Box_Objects" title="/en-US/docs/XUL/Tutorial/Tree_Box_Objects">Tree Box Objects</a></li> +</ul> +<h2 id="RDF_and_Templates" name="RDF_and_Templates">RDF and Templates</h2> +<ul> + <li><a href="/en-US/docs/XUL/Tutorial/Introduction_to_RDF" title="/en-US/docs/XUL/Tutorial/Introduction_to_RDF">Introduction to RDF</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Templates" title="/en-US/docs/XUL/Tutorial/Templates">Templates</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Trees_and_Templates" title="/en-US/docs/XUL/Tutorial/Trees_and_Templates">Trees and Templates</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/RDF_Datasources" title="/en-US/docs/XUL/Tutorial/RDF_Datasources">RDF Datasources</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Advanced_Rules" title="/en-US/docs/XUL/Tutorial/Advanced_Rules">Advanced Rules</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Persistent_Data" title="/en-US/docs/XUL/Tutorial/Persistent_Data">Persistent Data</a></li> +</ul> +<h2 id="Skins_and_Locales" name="Skins_and_Locales">Skins and Locales</h2> +<ul> + <li><a href="/en-US/docs/XUL/Tutorial/Adding_Style_Sheets" title="/en-US/docs/XUL/Tutorial/Adding_Style_Sheets">Adding Style Sheets</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Styling_a_Tree" title="/en-US/docs/XUL/Tutorial/Styling_a_Tree">Styling a Tree</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Modifying_the_Default_Skin" title="/en-US/docs/XUL/Tutorial/Modifying_the_Default_Skin">Modifying the Default Skin</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Creating_a_Skin" title="/en-US/docs/XUL/Tutorial/Creating_a_Skin">Creating a Skin</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Localization" title="/en-US/docs/XUL/Tutorial/Localization">Localization</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Property_Files" title="/en-US/docs/XUL/Tutorial/Property_Files">Property Files</a></li> +</ul> +<h2 id="Bindings" name="Bindings">Bindings</h2> +<ul> + <li><a href="/en-US/docs/XUL/Tutorial/Introduction_to_XBL" title="/en-US/docs/XUL/Tutorial/Introduction_to_XBL">Introduction to XBL</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Anonymous_Content" title="/en-US/docs/XUL/Tutorial/Anonymous_Content">Anonymous Content</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/XBL_Attribute_Inheritance" title="/en-US/docs/XUL/Tutorial/XBL_Attribute_Inheritance">XBL Attribute Inheritance</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Adding_Properties_to_XBL-defined_Elements" title="/en-US/docs/XUL/Tutorial/Adding_Properties_to_XBL-defined_Elements">Adding Properties</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Adding_Methods_to_XBL-defined_Elements" title="/en-US/docs/XUL/Tutorial/Adding_Methods_to_XBL-defined_Elements">Adding Methods</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Adding_Event_Handlers_to_XBL-defined_Elements" title="/en-US/docs/XUL/Tutorial/Adding_Event_Handlers_to_XBL-defined_Elements">Adding Event Handlers</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/XBL_Inheritance" title="/en-US/docs/XUL/Tutorial/XBL_Inheritance">XBL Inheritance</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/XBL_Example" title="/en-US/docs/XUL/Tutorial/XBL_Example">XBL Example</a></li> +</ul> +<h2 id="Specialized_Window_Types" name="Specialized_Window_Types">Specialized Window Types</h2> +<ul> + <li><a href="/en-US/docs/XUL/Tutorial/Features_of_a_Window" title="/en-US/docs/XUL/Tutorial/Features_of_a_Window">Features of a Window</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Creating_Dialogs" title="/en-US/docs/XUL/Tutorial/Creating_Dialogs">Creating Dialogs</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Open_and_Save_Dialogs" title="/en-US/docs/XUL/Tutorial/Open_and_Save_Dialogs">Open and Save Dialogs</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Creating_a_Wizard" title="/en-US/docs/XUL/Tutorial/Creating_a_Wizard">Creating a Wizard</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/More_Wizards" title="/en-US/docs/XUL/Tutorial/More_Wizards">More Wizards</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Overlays" title="/en-US/docs/XUL/Tutorial/Overlays">Overlays</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Cross_Package_Overlays" title="/en-US/docs/XUL/Tutorial/Cross_Package_Overlays">Cross Package Overlays</a></li> +</ul> +<h2 id="Installation" name="Installation">Installation</h2> +<ul> + <li><a href="/en-US/docs/XUL/Tutorial/Creating_an_Installer" title="/en-US/docs/XUL/Tutorial/Creating_an_Installer">Creating an Installer</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Install_Scripts" title="/en-US/docs/XUL/Tutorial/Install_Scripts">Install Scripts</a></li> + <li><a href="/en-US/docs/XUL/Tutorial/Additional_Install_Features" title="/en-US/docs/XUL/Tutorial/Additional_Install_Features">Additional Install Features</a></li> +</ul> +<div class="note"> + <p>This XUL tutorial was originally created by <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a>. He has graciously given us permission to use it as part of the <a href="/en-US/docs/Project:About" title="Project:About">MDN</a>.</p> +</div> +<div class="originaldocinfo"> + <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + <ul> + <li>Author: <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a></li> + <li>Copyright Information: © 1999-2005 XULPlanet.com</li> + </ul> +</div> +<p> </p> 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..a028ebcc50 --- /dev/null +++ b/files/bn/archive/mozilla/xul/tutorial/সূচনা/index.html @@ -0,0 +1,54 @@ +--- +title: সূচনা +slug: Archive/Mozilla/XUL/Tutorial/সূচনা +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction +--- +<p>{{ Next("XUL_Tutorial/XUL_Structure") }}</p> +<p>এই টিউটোরিয়ালটি XUL (এক্সএমএল ইউজার ইন্টারফেস ভাষা) শেখার একটি গাইড। XUL <span style="line-height: 1.5;">একটি ক্রস প্ল্যাটফর্ম ভাষা যা</span><span style="line-height: 1.5;">র </span><span style="line-height: 1.5;">সাহায্যে </span><span style="line-height: 1.5;">অ্যাপ্লিকেশন ইউজার ইন্টারফেস </span><span style="line-height: 1.5;">ব্য</span><span style="line-height: 1.5;">খ্যা </span><span style="line-height: 1.5;">করা যায়</span><span style="line-height: 1.5;">।</span></p> +<p>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.</p> +<h3 id="What_is_XUL_and_why_was_it_created">What is XUL and why was it created?</h3> +<p>XUL (pronounced "zool" and rhyming with "cool") was created to make development of the Mozilla browser easier and faster. It is an <abbr title="Extensible Markup Language">XML</abbr> language so all features available to XML are also available to XUL.</p> +<p>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.</p> +<p>XUL has all the advantages of other XML languages. For example XHTML or other XML languages such as <abbr title="Math Markup Language">MathML</abbr> or <abbr title="Scalable Vector Graphics">SVG</abbr> 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.</p> +<h3 id="What_kinds_of_user_interfaces_can_be_made_with_XUL">What kinds of user interfaces can be made with XUL?</h3> +<p>XUL provides the ability to create most elements found in modern graphical interfaces. Some elements that can be created are:</p> +<ul> + <li>Input controls such as textboxes and checkboxes</li> + <li>Toolbars with buttons or other content</li> + <li>Menus on a menu bar or pop up menus</li> + <li>Tabbed dialogs</li> + <li>Trees for hierarchical or tabular information</li> + <li>Keyboard shortcuts</li> +</ul> +<p>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 <abbr title="Resource Description Framework">RDF</abbr> file.</p> +<p>There are several ways you can use XUL:</p> +<dl> + <dt> + Firefox extension</dt> + <dd> + 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 <strong>overlay</strong>, 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.</dd> + <dt> + Standalone XULRunner application</dt> + <dd> + 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.</dd> + <dt> + XUL package</dt> + <dd> + 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.</dd> + <dt> + Remote XUL application</dt> + <dd> + 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.</dd> +</dl> +<p>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.</p> +<h3 id="What_do_I_need_to_know_to_use_this_tutorial.3F" name="What_do_I_need_to_know_to_use_this_tutorial.3F">What do I need to know to use this tutorial?</h3> +<p>You should have an understanding of <abbr title="HyperText Markup Language">HTML</abbr> and at least a basic understanding of XML and <abbr title="Cascading Style Sheets">CSS</abbr>. Here are some guidelines to keep in mind:</p> +<ul> + <li>XUL elements and attributes should all be entered in lowercase as XML is case-sensitive (unlike HTML).</li> + <li>Attribute values in XUL must be placed inside quotes, even if they are numbers.</li> + <li>XUL files are usually split into four files, one each for the layout and elements, for style declarations, for entity declarations (used for localization) and for scripts. In addition, you may have extra files for images or for platform specific data.</li> +</ul> +<p>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.</p> +<p>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 <a href="/en/XUL_Reference" title="en/XUL_Reference">XUL Reference</a> to find out about other features supported by specific elements.</p> +<p>{{ Next("XUL_Tutorial/XUL_Structure") }}</p> +<p>{{ 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" } ) }}</p> 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 +--- +<h2 id="সূচনা">সূচনা</h2> +<p>আপনি SeaMonkey 2 এর জন্য একটি থিম তৈরি করতে যাচ্ছেন , জানতে চান কিভাবে? আশা করি নিচের ম্যানুয়ালটি আপনাকে সাহায্য করতে সক্ষম হবে ।</p> +<h2 id="অভ্যন্তরস্ত">অভ্যন্তরস্ত</h2> +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Creating_a_Skin_for_SeaMonkey_2.x/Getting_Started">শুরু করুন</a></li> +</ul> 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 +--- +<div class="geckoVersionNote"> + <div class="callout-box"> + <strong><a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="en-US/docs/Using_the_W3C_DOM_Level_1_Core">W3C DOM এর ১ম কোর লেভেল ব্যবহার করা</a></strong><br> + W3C DOM এর হাতেখড়ি।</div> +</div> +<div> + <p><span class="seoSummary"><strong>ডকুমেন্ট অবজেক্ট মডেল </strong>(Document Object Model) বা সংক্ষেপে DOM হচ্ছে <a href="/bn-BD/docs/HTML">HTML</a> এবং <a href="/bn-BD/docs/XML">XML</a> ডকুমেন্ট ম্যানিপুলেট করার জন্য একটি অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টারফেস বা API । এটা ডকুমেন্ট এর একটি গাঠনিক উপস্থাপনা প্রদান করে, আর আপনাকে <a href="/bn-BD/docs/JavaScript">জাভাস্ক্রিপ্ট</a> ব্যবহার করে এর ভেতরে থাকা কন্টেন্ট এবং দৃশ্যমান উপাদানগুলোকে সংশোধন করার সুবিধা প্রদান করে।</span></p> +</div> +<div class="cleared topicpage-table row"> + <div class="section"> + <h2 class="Documentation" id="Documentation" name="Documentation">DOM সম্পর্কে ডকুমেন্টেশন</h2> + <dl> + <dt> + <a href="/bn-BD/docs/DOM/DOM_Reference" title="en-US/docs/Gecko_DOM_Reference">DOM রেফারেন্স</a></dt> + <dd> + ডকুমেন্ট অবজেক্ট মডেল এর রেফারেন্স।</dd> + <dt> + <a href="/bn-BD/docs/DOM/About_the_Document_Object_Model" title="en-US/docs/About_the_Document_Object_Model">ডকুমেন্ট অবজেক্ট মডেল সম্পর্কে</a></dt> + <dd> + DOM সম্পর্কে সংক্ষিপ্ত বর্ণনা।</dd> + <dt> + <a href="/bn-BD/docs/JavaScript/JavaScript_technologies_overview" title="en-US/docs/The_DOM_and_JavaScript">DOM এবং জাভাস্ক্রিপ্ট</a></dt> + <dd> + DOM কি ? জাভাস্ক্রিপ্ট কি ? কিভাবে আমি এই দুটোকে একসাথে আমার ওয়েব পেজে ব্যবহার করব ? এখানে পাবেন এমন সব প্রশ্নের উত্তর।</dd> + <dt> + <a href="/bn-BD/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information" title="en-US/docs/DOM/Using_dynamic_styling_information">ডায়নামিক স্টাইলিং তথ্য ব্যবহার করা</a></dt> + <dd> + DOM এর মাদ্ধমে কিভাবে তথ্য সংগ্রহ করা যায় এবং স্টাইলিং ম্যানিপুলেট করা যায়।</dd> + <dt> + <a href="/bn-BD/docs/DOM/DOM_event_reference" title="DOM event reference">DOM ইভেন্ট রেফারেন্স</a></dt> + <dd> + DOM ইভেন্ট সমূহের অর্থসহ তালিকা।</dd> + <dt> + <a href="/bn-BD/docs/DOM/Manipulating_the_browser_history" title="en-US/docs/DOM/Manipulating_the_browser_history">History API: ব্রাউজারের ইতিহাস ম্যানিপুলেট করা</a></dt> + <dd> + HTML5-এ চালু হওয়া DOM এর বর্ণনা করে {{ domxref("window.history") }} অবজেক্ট, ব্রাউজারের ইতিহাস ডায়নামিক্যালি পরিবর্তন করার সুবিধা প্রদান করে।</dd> + <dt> + <a href="/en-US/docs/Using_files_from_web_applications" title="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">ফাইল API: ওয়েব অ্যাপ্লিকেশন থেকে ফাইল ব্যবহার করা</a></dt> + <dd> + HTML5-এ প্রবর্তিত লোকাল ফাইল নির্বাচন করার এবং পড়ার ক্ষমতা বর্ণনা।</dd> + <dt> + <a href="/en-US/docs/DOM/Using_the_Page_Visibility_API" title="en-US/docs/DOM/Using_the_Page_Visibility_API">Page এর Visibility API ব্যবহার করা</a></dt> + <dd> + এখানে বর্ণনা করা হয়েছে, কিভাবে একটি ওয়েব পেজ সনাক্ত করতে হবে এবং উক্ত ওয়েব পেজ থেকে প্রাপ্ত তথ্য ব্যবহার করতে হবে; সেটা ব্যাকগ্রাউন্ডে ব্যবহৃত হোক বা ফোরগ্রাউন্ডে।</dd> + <dt> + <a href="/en-US/docs/DOM/Using_full-screen_mode" title="Using full-screen mode">Fullscreen API: ফুলস্ক্রিন মোড ব্যবহার করা</a></dt> + <dd> + এতে বর্ণনা করা হয়েছে, কিভাবে একটি পেজকে ব্রাউজারের কোন এলিমেন্ট ছাড়া সমগ্র স্ক্রিন জুড়ে দেখার জন্য তৈরি করতে হবে।</dd> + <dt> + <a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en-US/docs/Determining_the_dimensions_of_elements">এলিমেন্টের মাত্রা নির্ণয়</a></dt> + <dd> + আপনার প্রয়োজন অনুযায়ী সঠিক ভাবে এলিমেন্টের মাত্রা নির্ধারণের কৌশল এখানে বর্ণনা করা হয়েছে।</dd> + <dt> + <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface" title="en-US/docs/Dynamically_modifying_XUL-based_user_interface">Dynamically modifying XUL-based user interface</a></dt> + <dd> + The basics of manipulating the XUL UI with DOM methods.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/DOM" title="/en-US/docs/tag/DOM">View All...</a></span></p> + </div> + <div class="section"> + <h2 class="Community" id="Community" name="Community">Getting help from the community</h2> + <p>You need help on a DOM-related problem and can't find the solution in the documentation?</p> + <ul> + <li>Consult the dedicated Mozilla forum: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</li> + </ul> + <h2 class="Tools" id="Tools" name="Tools">Tools easing working with the DOM</h2> + <ul> + <li><a class="external" href="http://www.getfirebug.com/">Firebug </a></li> + <li><a href="/en-US/docs/DOM_Inspector" title="en-US/docs/DOM_Inspector">DOM Inspector</a></li> + <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li> + <li><a class="external" href="http://www.karmatics.com/aardvark/">Aardvark Firefox extension</a></li> + </ul> + <p><span class="alllinks"><a href="/en-US/docs/tag/DOM:Tools" title="/en-US/docs/tag/DOM:Tools">View All...</a></span></p> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + <ul> + <li><a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> + </ul> + </div> +</div> +<p> </p> 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 +--- +<p>একাধিক সফটওয়্যার কম্পোনেন্ট এর মধ্যে যোগাযোগের সুবিধা এবং এ সংক্রান্ত নিয়মগুলিকে API (Application Programming Interface) বলা হয়ে থাকে। ওয়েব ডেভেলপমেন্টের ক্ষেত্রে, API বলতে সাধারণত ওয়েবের কন্টেন্টের সঙ্গে যোগাযোগ / কাজ (ইন্টারঅ্যাক্ট) করার জন্য একগুচ্ছ {{glossary("method","methods")}}, {{Glossary("property","properties")}}, ইভেন্ট, এবং {{Glossary("URL","URLs")}} কে বুঝানো হয়।</p> + +<h2 id="আরও_জানুন">আরও জানুন</h2> + +<h3 id="সাধারণ_জ্ঞান">সাধারণ জ্ঞান</h3> + +<ul> + <li>উইকিপিডিয়ায় {{Interwiki("wikipedia", "Application_programming_interface", "API")}}</li> +</ul> + +<h3 id="কারিগরি_রেফারেন্স">কারিগরি রেফারেন্স</h3> + +<ul> + <li><a href="https://developer.mozilla.org/bn-BD/docs/Web/API">Web API রেফারেন্স</a></li> +</ul> 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 +--- +<p><span style="color: rgb(37, 37, 37); font-family: sans-serif; line-height: 22.3999996185303px;">নির্দিষ্টি সময়ে একটি ডাটা কানেকশন (সংযোগ) এর মধ্য দিয়ে যে পরিমাণ তথ্য যাওয়া-আসা (পরিবাহিত) করতে পারে, তাই পরিমাপই হল ব্যান্ডউইথ। এটি সাধারণত bits-per-second (bps), megabits-per-second (Mbps) or gigabits-p</span>er-second (Gbps) এককে মাপা হয়ে থাকে।</p> + +<h2 id="আরও_জানুন">আরও জানুন</h2> + +<ul> + <li>উইকিপিডিয়ায় {{Interwiki("wikipedia", "Bandwidth")}}</li> +</ul> 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 +--- +<p><b>DHTM</b><strong>L</strong> (dynamic {{glossary("HTML")}}) মানে ইন্টারেক্টিভ ওয়েব পেজ এর পিছনের কোডকে বুঝায় যার {{Glossary("Adobe Flash","Flash")}} অথবা {{Glossary("Java")}} প্লাগিন প্রয়োজন হয় না. DHTML সমষ্টিগতবাবে {{Glossary("HTML")}}, {{Glossary("CSS")}}, the {{Glossary("DOM")}} এবং {{Glossary("JavaScript")}} এর সমন্বয়ে গঠিত ।</p> + +<h2 id="আরো_জানুন">আরো জানুন</h2> + +<h3 id="সাধারণ_জ্ঞান">সাধারণ জ্ঞান</h3> + +<ul> + <li><a href="http://en.wikipedia.org/wiki/Dynamic_HTML">Dynamic HTML on Wikipedia</a></li> +</ul> 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 +--- +<div style="max-width: 300px; float: right; margin: 0 0 .5em 1em;">{{LearnBox({"title":"নতুন একটি শব্দ শিখুন:"})}}</div> + +<p>ওয়েবে যেসকল প্রযুক্তি ব্যবহার করা হয়, তার কোড বা ডকুমেন্টেশনে সাধারণত উদ্ভট টেকনিক্যাল শব্দ কিংবা সংক্ষিপ্ত শব্দ দেখা যায়। এই শব্দকোষের শব্দগুলোর সাহায্যে আপনি সহজেই ওয়েবের এই প্রযুক্তিগুলোকে বুঝতে ও ব্যবহার করতে পারবেন।</p> + +<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p> + +<h2 id="শব্দকোষে_অবদান_রাখুন">শব্দকোষে অবদান রাখুন</h2> + +<p>এই শব্দকোষের কাজ, আসলে, শেষ হবে না কখনোই! আপনি <a href="/bn-BD/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">নতুন শব্দ যোগ করে</a> কিংবা বর্তমানগুলিকে পরিবর্তন করে অবদান রাখতে পারেন। শুরু করার সবচেয়ে সোজা উপায় হল নিচের বাটনে ক্লিক করা, কিংবা নিচের কয়েকটি শব্দ বেছে নিয়ে কাজ করা!</p> + +<p><strong><a href="/bn-BD/docs/new?parent=4391">শব্দকোষে নতুন শব্দ যুক্ত করুন</a></strong></p> + +<p>{{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"})}}</p> + +<p>আপনি যদি এই শব্দকোষের ব্যাপারে আরও জানতে চান, এই <a href="/bn-BD/docs/MDN/Doc_status/Glossary">শব্দকোষ ডকুমেন্টেশন স্ট্যাটাস পেজটি</a> দেখতে পারেন!</p> 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 +--- +<p><strong>WebRTC</strong> (<em>Web Real-Time Communication</em>) হল ভিডিও চ্যাট, ভয়েস কল এবং পিয়ার-টু-পিয়ার ফাইল শেয়ারিং ওয়েব অ্যাপের জন্য একটি {{Glossary("API")}}।</p> + +<p>WebRTC এর মূলত ৩টি অংশ রয়েছে:</p> + +<dl> + <dt><code>getUserMedia</code></dt> + <dd>ডিভাইসের ক্যামেরা ও মাইক্রোফোনে {{Glossary("Browser", "browser")}} ব্যবহারে সহযোগিতা করা।</dd> + <dt><code>RTCPeerConnection</code></dt> + <dd>ভিডিও চ্যাট বা ভয়েস কল কনফিগার করা।</dd> + <dt><code>RTCDataChannels</code></dt> + <dd>ব্রাউজারের মধ্যে একটি {{Glossary("P2P", "peer-to-peer")}} ডাটা যাওয়া আসার পথ তৈরি করা</dd> +</dl> + +<h2 id="আরও_জানুন">আরও জানুন</h2> + +<h3 id="সাধারণ_জ্ঞান" style="line-height: 24px;">সাধারণ জ্ঞান</h3> + +<ul> + <li>উইকিপিডিয়ায় {{Interwiki("wikipedia", "WebRTC")}}</li> +</ul> + +<h3 id="কারিগরি_জ্ঞান">কারিগরি জ্ঞান</h3> + +<ul> + <li><a href="/bn-BD/docs/Web/Guide/API/WebRTC">MDN এ WebRTC গাইড</a></li> + <li><a href="http://caniuse.com/#feat=rtcpeerconnection">WebRTC এর ব্রাউজার সাপোর্ট</a></li> +</ul> 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 +--- +<p><span class="seoSummary"><a href="/bn-BD/docs/HTML" title="HTML">HTML</a> বলতে যা বুঝায় </span><span class="seoSummary"><strong>HTML5</strong> তার সর্বাধুনিক বিবর্তন</span><span class="seoSummary">। </span>বিষয়টি দুইটি ভিন্ন ধারনা কে প্রতিনিধিত্ব করে :</p> + +<div class="note"> +<ul> + <li> + <p><span class="seoSummary">এটি HTML এর নতুন সংস্করণ, এবং এতে আরো নতুন elements, attributes এবং behaviors যুক্ত হয়েছে,</span></p> + </li> + <li><span class="seoSummary">এটি বৃহৎ প্রযুক্তি ভান্ডার যা আরো শক্তিশালী এবং নানাবিধ ওয়েব সাইট এবং এপ্লিকেশন তৈরি করার সক্ষমতা দেয়।</span> এই ভান্ডারকে মাঝে মাঝে <em>HTML5 and friends</em> নামে ডাকা হয় এবং প্রায় ছোট করে করে শুধু <em>HTML5</em> বলে।</li> +</ul> +</div> + +<p>সকল উন্মুক্ত ওয়েব ডেভলপারদের ব্যবহার উপযোগী করা সাজানো হয়েছে। এই পৃষ্ঠায় অসংখ্যা HTML5 প্রযুক্তির তথ্য সমৃদ্ধ পৃষ্ঠার লিংক দেওয়া আছে। কার্যকরিতার উপর ভিত্তি করে এগুলোকে বিভিন্ন দলে বিভক্ত করা হয়েছে।</p> + +<ul> + <li><em>সিমানটিকস</em>: আপনার বিষয়বস্তু সম্পর্কে আপনাকে আরো যথাযথ ভাবে বর্ণনা করার সুযোগ দিবে।</li> + <li><em>কানেক্টিভিটি</em>: সার্ভারের সাথে যোগাযোগ করতে আপনাকে নতুন নতুন পথ দেখাবে।</li> + <li><em>অফলাইন এবং স্টোরেজ</em>: ক্লায়েন্ট সাইডে স্থানীয়ভাবে ওয়েবপেইজের তথ্য সংরক্ষণ করার সক্ষমতা দিবে এবং অফলাইনে তা ব্যবহার করতে আরো কার্যকরী করবে।</li> + <li><em>মাল্টিমিডিয়া</em>: উন্মুক্ত ওয়েবে ভিডিও এবং অডিও কে প্রথম শ্রেনীতে রাখা হয়েছে।</li> + <li><em>দ্বিমাত্রিক/ত্রিমাত্রিক গ্রাফিক্স এবং ইফেক্ট</em>: উপস্থাপনার জন্য আরো অনেক বিকল্প দিবে।</li> + <li><em>কার্যকারিতা এবং ইন্ট্রিগ্রেশন</em>: আরো গতির উন্নতি হবে এবং কম্পিউটার হার্ডওয়্যারের আরো ভালো ব্যবহার হবে</li> + <li><em>যন্ত্রের ব্যবহার</em>: আরো ইনপুট এবং আউটপুট যন্ত্রের ব্যবহারের সুযোগ দিবে।</li> + <li>সাজসজ্জা: চমৎকার চমৎকার থিম তৈরি করার সুযোগ দিবে।</li> +</ul> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 id="সিম্যানটিকস" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><em>সিম্যানটিকস</em></h2> + +<dl> + <dt><a href="/bn-BD/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 এর সেকশন এবং আউটলাইন</a></dt> + <dd>HTML5 এর নতুন আউটলাই এবং সেকশন উপাদানের এক ঝলক: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} এবং {{HTMLElement("hgroup")}}.</dd> + <dt><a href="/bn-BD/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 অডিও এবং ভিডিও'র ব্যবহার</a></dt> + <dd>{{HTMLElement("audio")}} এবং {{HTMLElement("video")}} উপাদান এম্বেড থাকা এবং নতুন মাল্টিমিডিয়ার ব্যবহার নিশ্চিত করা।</dd> + <dt><a href="/bn-BD/docs/HTML/Forms_in_HTML" title="Forms in HTML5">HTML5 এর ফর্ম</a></dt> + <dd>এক নজরে HTML5 এ ওয়েব ফর্মের উন্নয়নগুলো দেখে নেই: কন্সট্রেইন্ট ভ্যালিডেশন এপিআই, কিছু নতুন এট্রিবিউট, {{HTMLElement("input")}} এট্রিবিউটের জন্য নতুন নতুন ভ্যালু {{htmlattrxref("type", "input")}} এবং {{HTMLElement("output")}} নামক নতুন এলিমেনট।</dd> + <dt>নতুন সিমানটিকস এলিমেন্ট</dt> + <dd>সেকশন, মিডিয়া এবং ফর্ম এলিমেন্টের পাশাপারশি আরো নতুন নতুন এলিমেন্ট এসেছে, যেমন</dd> + <dd>{{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, অথবা{{HTMLElement("meter")}}, যা <a href="/bn-BD/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">HTML5 এলিমেন্টের পরিমান বৃদ্ধি করে দিচ্ছে।</a></dd> + <dt>{{HTMLElement("iframe")}} এর আরো উন্নয়ন</dt> + <dd>{{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe")}} এট্রিবিউটের ব্যবহার করে, ডেভলপারগন নিরাপত্তার মান কে আরো যথাযথ করতে পারছেন এবং {{HTMLElement("iframe")}} এর চাহিদা মতন রেন্ডারিং করতে পারছেন।</dd> + <dt><a href="/bn-BD/docs/MathML" title="MathML">MathML</a></dt> + <dd>গাণিতিক ফর্মুলার সরাসরি ব্যবহার নিশ্চিত করেছে।</dd> + <dt><a href="/bn-BD/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">HTML5 এর পরিচিতি</a></dt> + <dd>আপনি HTML5 এর মাধ্যমে কোন ওয়েব ডিজাইন করলে অথবা কোন ওয়েব এপ্লিকেশন তৈরি করতে চাইলে কিভাবে শুরু করবেন তা এই নিবন্ধে বলা আছে।</dd> + <dt><a href="/bn-BD/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-সমর্থিত পার্সার</a></dt> + <dd>এটি একটি পার্সার, যা HTML ডকুমেন্টের বাইটকে ডকুমেন্ট অবজেক্ট মডেলে (DOM) রূপান্তর করে। এটাকে এখন বর্ধিত করা হয়েছে এবং এখন আরো ভালভাবে সকল ক্ষেত্রে কাজ করার উপযুক্ত করা হয়েছে। এমন কি ভুল মার্কআপ পাওয়ার পরও যাতে ঠিকঠাক কাজ করতে পারে, তেমন ক্ষমতা দেয়া হয়েছে । এতে করে HTML5 সমর্থিত ব্রাউজার গুলোর মদ্ধে আন্তঃ পরিচালন ক্ষমতা ও অনুমানের দক্ষতা বৃদ্ধি পেয়েছে।</dd> +</dl> + +<h2 id="কানেক্টিভিটি" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><em>কানেক্টিভিটি</em></h2> + +<dl> + <dt><a href="/bn-BD/docs/WebSockets" title="WebSockets">ওয়েব সকেট</a></dt> + <dd>ওয়েব পেজ এবং সার্ভারের মধ্যে, HTML নয় এমন তথ্য আদান-প্রদানের জন্য, একটি স্থায়ী সংযোগ তৈরি করার সুবিধা দেয়।</dd> + <dt><a href="/bn-BD/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">সার্ভার-প্রেরিত ইভেন্ট</a></dt> + <dd>আগে সার্ভার গুলো শুধু গ্রাহকের অনুরোধের ভিত্তিতে তথ্য পাঠাতে পারত। কিন্তু এই নতুন সংযোজনটি বারবার অনুরোধের ঝামেলা ছাড়াই সরাসরি গ্রাহকের কাছে ইভেন্ট প্রেরণের অনুমতি দেয়।</dd> + <dt><a href="/bn-BD/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>RTC মানে Real Time Communication বা তাৎক্ষণিক যোগাযোগ। এটি ব্রাউজারের মাদ্ধমে অন্যদের সাথে চ্যাট বা ভিডিও কনফারেন্সিং এর সুবিধা দেয়। আর এই প্রযুক্তি ব্যবহারের ফলে কোন প্রকার আলাদা সফটওয়্যার বা প্লাগিনেরও প্রয়োজন হয়না।</dd> +</dl> + +<h2 id="অফলাইন_এবং_স্টোরেজ" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><em>অফলাইন এবং স্টোরেজ</em></h2> + +<dl> + <dt><a href="/bn-BD/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">অফলাইন রিসোর্স: এপ্লিকেশন ক্যাশ</a></dt> + <dd>ফায়ারফক্স সম্পূর্ণ ভাবে HTML5 অফলাইন রিসোর্স সমর্থন করে। বাকি সবারও একই ধরনের অফলাইন রিসোর্স সমর্থন আছে।</dd> + <dt><a href="/bn-BD/docs/Online_and_offline_events" title="Online_and_offline_events">অনলাইন এবং অফলাইন ইভেন্ট</a></dt> + <dd>ফায়ারফক্স ৩ WHATWG অনলাইন এবং অফলাইন ইভেন্ট সমর্থন করে, যা একটি এপ্লিকেশন এবং এক্সটেনশন কে সচল ইন্টারনেট সংযোগ আছে কিনা তা পরীক্ষা করার সুযোগ দেয়, সাথে সাথে সংযোগ কি উঠা নামা করছে কিনা তাও পরীক্ষা করে।</dd> + <dt><a href="/bn-BD/docs/DOM/Storage" title="DOM/Storage">WHATWG ক্লায়েন্ট সাইড সেসন এবং স্থায়ী স্টোরেজ (এককথায় DOM স্টোরেজ)</a></dt> + <dd>ক্লায়েন্ট সাইড সেসন এবং স্থায়ী স্টোরেজ ওয়েব এপ্লিকেশন কে ক্লায়েন্ট সাইডে তথ্য সংরক্ষণে সুবিধা দেয়।</dd> + <dt><a href="/bn-BD/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>ইহা একটি ওয়েব মান যা একটি উল্লেখযোগ্য পরিমান সাজানো তথ্য ব্রাজারে সংরক্ষণকে বুঝায় এবং ইন্ডেক্স ব্যবহার করে উচ্চ ক্ষমতায় তথ্য অনুসন্ধানের সুবিধা দেয়।</dd> + <dt><a href="/bn-BD/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">ওয়েব এপ্লিকেশন থেকে ফাইলের ব্যবহার</a></dt> + <dd>নতুন HTML5 ফাইল এপিআই গিকোতে যুক্ত হয়েছে, যা ব্যবহারকারী দ্বারা নির্বাচিত স্থানীয় ফাইল ব্যবহার করাকে সম্ভব করেছে। এরমধ্যে রয়েছে <span style="font-family: monospace;">{{HTMLElement("input")}} ও <a href="/bn-BD/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> অ্যাট্রিবিউট ব্যবহার করে একাধিক <a href="/bn-BD/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>ধরণের</strong></a> <span style="font-family: courier new;">file</span> নির্বাচন সমর্থন।</span> এরমধ্যে <a href="/bn-BD/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>ও আছে।</dd> +</dl> + +<h2 id="মাল্টিমিডিয়া" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">মাল্টিমিডিয়া</h2> + +<dl> + <dt><a href="/bn-BD/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 অডিও ও ভিডিও ব্যবহার করা</a></dt> + <dd>{{HTMLElement("audio")}} এবং {{HTMLElement("video")}} এর সাহায্যে মাল্টিমিডিয়া কন্টেন্ট ওয়েবপেজে যুক্ত করার এবং ম্যানিপুলেট করার সুবিধা দেয়।</dd> + <dt><a href="/bn-BD/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>RTC অর্থ রিয়েল টাইম কমিউনিকেশন, যা ব্রাউজারেই অতিরিক্ত প্লাগ-ইনের সাহায্য ছাড়া অন্যান্য মানুষের সাথে যোগাযোগ করা এবং সরাসরি ভিডিও-কনফারেন্সিং নিয়ন্ত্রণ করা সম্ভব করে।</dd> + <dt><a href="/bn-BD/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">ক্যামেরা API ব্যবহার করা</a></dt> + <dd>কম্পিউটারের ক্যামেরা থেকে ছবি ব্যবহার, পরিবর্তন এবং সংরক্ষণের সুবিধা প্রদান করে।</dd> + <dt>ট্র্যাক এবং WebVTT</dt> + <dd>{{HTMLElement("track")}} সাবটাইটেল এবং চ্যাপ্টারের সুবিধা প্রদান করে। <a href="/bn-BD/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> একটি টেক্সট ট্র্যাক ফরম্যাট।</dd> +</dl> + +<h2 id="ত্রিমাত্রিক_গ্রাফিক্স_এবং_ইফেক্ট" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ত্রিমাত্রিক গ্রাফিক্স এবং ইফেক্ট</h2> + +<dl> + <dt><a href="/bn-BD/docs/Canvas_tutorial" title="Canvas tutorial">ক্যানভাস টিউটোরিয়াল</a></dt> + <dd>নতুন HTML <code>{{HTMLElement("canvas")}}</code> এলিমেন্ট এবং গ্রাফিক্স ও অন্যান্য অবজেক্ট আঁকা সম্পর্কে জানুন</dd> + <dt><a href="/bn-BD/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas"><code><canvas></code> এলিমেন্টের জন্য HTML টেক্সট API</a></dt> + <dd>{{HTMLElement("canvas")}} এখন HTML5 টেক্সট API সমর্থন করে।</dd> + <dt><a href="/bn-BD/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>WebGL (ওয়েব জি, এল) OpenGL ES 2.0 এর কাছাকাছি একটি API এর সাহায্যে ওয়েবে {{HTMLElement("canvas")}} এলিমেন্টে ত্রিমাত্রিক গ্রাফিক্স নিয়ে আসে। </dd> + <dt><a href="/bn-BD/docs/SVG" title="SVG">SVG</a></dt> + <dd>সরাসরি HTML এ যুক্ত করার উপযোগী ভেক্টর ইমেজের জন্য XML-ভিত্তিক ফাইল ফরম্যাট।</dd> + <dt> </dt> +</dl> +</div> + +<div class="section"> +<h2 id="কার্যকারিতা_এবং_ইন্ট্রিগ্রেশন" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><em>কার্যকারিতা এবং ইন্ট্রিগ্রেশন</em></h2> + +<dl> + <dt><a href="/bn-BD/docs/DOM/Using_web_workers" title="Using web workers">Web Workers (ওয়েব ওয়ার্কার)</a></dt> + <dd>জাভাস্ক্রিপ্টকে ব্যাকগ্রাউন্ড থ্রেডের প্রতিনিধিত্ব ও মূল্যায়ন করার সুবিধা প্রদান করে। এরফলে ইন্টার্যাক্টিভ ইভেন্টগুলো ধীর গতির হয়না।</dd> + <dt><code><a href="/bn-BD/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> লেভেল 2</dt> + <dd>সময় এবং ব্যবহারকারীর কার্যক্রমের উপর নির্ভর করে বিক্ষিপ্তভাবে একটি পাতার কিছু অংশ নিয়ে আসে। আর এই প্রক্রিয়ায় আনার ফলে কন্টেন্ট গুলো ডায়নামিক হওয়ার সুযোগ পায়। এটাই <a href="/bn-BD/docs/AJAX" title="AJAX">Ajax</a> এর পেছনের প্রযুক্তি।</dd> + <dt>JIT-কম্পাইল করা জাভাস্ক্রিপ্ট ইঞ্জিন</dt> + <dd>নতুন প্রজন্মের জাভাস্ক্রিপ্ট ইঞ্জিন পূর্বের চেয়ে অনেক শক্তিশালী যার ফলে অধিক পারফরম্যান্স নিশ্চিত করে।</dd> + <dt><a href="https://developer.mozilla.org/bn-BD/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">হিস্টোরি API</a></dt> + <dd>এটি ব্রাউজারের হিস্টোরি ম্যানিপুলেট করার সুযোগ দেয়, যেসকল ওয়েবপেজ ইন্টারএ্যাক্টিভভাবে তথ্য লোড করে, তাদের জন্য এটি বিশেষভাবে উপযোগী।</dd> + <dt><a href="/bn-BD/docs/HTML/Content_Editable" title="HTML/Content Editable">contentEditable attribute: আপনার ওয়েবসাইটকে উইকিতে রুপান্তর করুন!</a></dt> + <dd>HTML5 contentEditable এ্যাট্রিবিউটটি স্ট্যান্ডার্ডের অন্তর্ভুক করেছে। এই নতুন ফিচারটি সম্পর্কে জানুন।</dd> + <dt><a href="/bn-BD/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">ড্র্যাগ-এন্ড-ড্রপ</a></dt> + <dd>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.</dd> + <dt><a href="/bn-BD/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML এ ফোকাস ব্যবস্থাপনা</a></dt> + <dd>নতুন HTML5 <code>activeElement</code> এবং <code>hasFocus</code> এট্রিবিউটগুলো এখন সমর্থিত!</dd> + <dt><a href="/bn-BD/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">ওয়েব-ভিত্তিক প্রোটোকল হ্যান্ডেলার</a></dt> + <dd>আপনে এখন প্রটোকল হ্যান্ডেলার হিসেবে ওয়েব এ্যাপ্লিকেশন রেজিস্টার করতে পারবেন <code>navigator.registerProtocolHandler()</code> মেথডের সাহায্যে।</dd> + <dt><a href="/bn-BD/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> + <dd>সর্বোত্তম পারফরম্যান্সের জন্য এ্যানিমেশন নিয়ন্ত্রণের সুবিধা প্রদান করে।</dd> + <dt><a href="/bn-BD/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">ফুলস্ক্রিন API</a></dt> + <dd>ব্রাউজারের ইন্টারফেস প্রদর্শন ব্যতিত আপনার ওয়েব পেজ বা এ্যাপ্লিকেশনকেই সম্পূর্ণ স্ক্রিনে প্রদর্শন নিয়ন্ত্রণ করে।</dd> + <dt><a href="/bn-BD/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">পয়েন্টার লক API</a></dt> + <dd>সবসময় কোন কন্টেন্ট এর পয়েন্টার লক করে রাখে, তাই গেমস অথবা একই ধরনের কোন এপ্লিকেশনের ক্ষেত্রে পয়েন্টার উইন্ডো সীমায় পৌছে গেলেও তা ফোকাস হারায় না।</dd> + <dt><a href="/bn-BD/docs/Online_and_offline_events" title="Online_and_offline_events">অনলাইন এবং অফলাইন ইভেন্ট</a></dt> + <dd>অফলাইনে চলবে এমন একটি ভালো মানের এপ্লিকেশন তৈরী করতে হলে, আপনাকে জানতে হবে আপনার এপ্লিকেশন কখন অফলাইনে আছে। আপনার এপ্লিকেশন কখন অনলাইনে আসতে পারে তাও আপনাকে জাতে হবে।</dd> +</dl> + +<h2 id="যন্ত্রের_ব্যবহার" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><em>যন্ত্রের ব্যবহার</em></h2> + +<dl> + <dt><a href="/bn-BD/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">ক্যামেরা API এর ব্যবহার</a></dt> + <dd>কম্পিউটারের ক্যামেরা থেকে ছবি ব্যবহার এবং সংরক্ষণ করে।</dd> + <dt><a href="/bn-BD/docs/DOM/Touch_events" title="DOM/Touch_events">টাচ ইভেন্ট</a></dt> + <dd>টাচ স্ক্রিন চাপলে ব্যবহারকারী কর্তৃক তৈরী করা ইভেন্ট অনুযায়ি কাজ করবে।</dd> + <dt><a href="/bn-BD/docs/Using_geolocation" title="Using geolocation">জিওলোকেশনের ব্যবহার</a></dt> + <dd>জিওলোকেশন ব্যবহার করে ব্রাউজার কে ব্যবহারকারীর বর্তমান অবস্থান নির্দিষ্ট করতে দেয়।</dd> + <dt><a href="/bn-BD/docs/Detecting_device_orientation" title="Detecting_device_orientation">ডিভাইসের স্থিতি সনাক্ত করা</a></dt> + <dd>এটা ডিভাইসের স্থিতি অর্থাৎ ডিভাইসটি উল্লম্ব ভাবে আছে, নাকি আনুভূমিক ভাবে আছে (আরও সহজ করে বলতে গেলে ডিভাইসটি সোজা করে ধরা হয়েছে না কাত করে ধরা হয়েছে) তা সনাক্ত করে ব্রাউজারকে মাপ পরিবর্তনে সহায়তা করে। এটা ইনপুট ডিভাইস হিসেবেও ব্যবহার করা যায়। যেমনঃ অবস্থান বা নড়াচড়াকে গেমের নিয়ন্ত্রণ হিসেবে ব্যবহার করা বা পেজের লেআউটে পরিবর্তন ইত্যাদি।</dd> + <dt><a href="/bn-BD/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">পয়েন্টার লক API</a></dt> + <dd>কন্টেন্টের সাথে পয়েন্টারকে লক করে রাখতে দেয়, যাতে করে পয়েন্টার পর্দার শেষ প্রান্তে পৌছালেও গেম এবং সদৃশ অ্যাপ গুলো আকর্ষণ না হারায়।</dd> +</dl> + +<h2 id="সাজসজ্জা" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><em>সাজসজ্জা</em></h2> + +<p><a href="/bn-BD/docs/CSS" title="CSS">সিএসএস</a>কে আরও জটিল নিয়মে এলিমেন্ট গুলোকে স্টাইল করার জন্য বর্ধিত করা হয়েছে। যদিও এটা এখন মনোলিথিক বৈশিষ্ট্যের মধ্যে নেই এবং আলাদা মডিউল গুলোও ৩য় স্তরে নেই, তারপরও এটাকে প্রায়ই <a href="/bn-BD/docs/CSS/CSS3" title="CSS/CSS3">সিএসএস৩</a> বলা হয়। এর মডিউল গুলোর মধ্যে কিছু ১ম স্তরে আছে, আবার কিছু ৪র্থ স্তরে আছে।</p> + +<dl> + <dt>নতুন ব্যাকগ্রাউন্ড স্টাইলিং বৈশিষ্ট্য সমূহ</dt> + <dd>এখন {{cssxref("box-shadow")}} ব্যবহার করে একটি বক্সের নিচে ছায়া এবং <a href="/bn-BD/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">একাধিক ব্যাকগ্রাউন্ড</a> প্রয়োগ করা যাবে।</dd> + <dt>আরও রুচিসম্মত বর্ডার সমূহ</dt> + <dd>এখন {{cssxref("border-image")}} ব্যবহার করে শুধু বর্ডার স্টাইলই করা যাবে না, এর সাথে সংশ্লিষ্ট অন্যান্য লং-হ্যান্ড প্রপার্টিও ব্যবহার করা যাবে। কিন্তু গোলাকার বর্ডার শুধু {{cssxref("border-radius")}} ব্যবহার করেই প্রয়োগ করা যাবে।</dd> + <dt>স্টাইল অ্যানিমেট করা</dt> + <dd><a href="/bn-BD/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">সিএসএস ট্রানজিশন</a> ব্যবহার করে দুইটি ভিন্ন অবস্থার মধ্যে অ্যানিমেট করা যাবে অথবা <a href="/bn-BD/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">সিএসএস অ্যানিমেশন</a> ব্যবহার করে কোন ইভেন্ট ট্রিগার না করেই বিভিন্ন অংশ অ্যানিমেট করা যাবে। আর এসব অ্যানিমেশনের সময়, ধরন, গতি-প্রকৃতি সবই আপনি নিয়ন্ত্রণ করতে পারবেন।</dd> + <dt>টাইপোগ্রাফি উন্নয়ন</dt> + <dd>ভালো টাইপোগ্রাফি ব্যবহার করার জন্য ডিজাইনারদের এখন আরও বেশি নিয়ন্ত্রণ দেয়া হয়েছে। তারা এখন {{cssxref("text-overflow")}} এবং <a href="/bn-BD/docs/CSS/hyphens" title="CSS/hyphens">হাইফেনেশন</a> নিয়ন্ত্রণ করতে পারেন। <a href="/bn-BD/docs/CSS/text-shadow" title="CSS/text-shadow">ছায়া</a> যুক্ত করতে পারেন অথবা অনেক সূক্ষ্মভাবে <a href="/bn-BD/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">অলঙ্করণ</a> করতে পারেন। নিজের ইচ্ছামত ফন্ট ডাউনলোড করে প্রয়োগ করা যাবে। এজন্য ধন্যবাদ দিতে হয় {{cssxref("@font-face")}} নিয়মটিকে।</dd> + <dt>নতুন প্রেজেন্টেশন লেআউট সমূহ</dt> + <dd>ডিজাইনের নমনীয়তা বৃদ্ধি করার জন্য নতুন দুইটি লেআউট যুক্ত করা হয়েছেঃ একটি হচ্ছে <a href="/bn-BD/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a>, এবং অপরটি <a href="/bn-BD/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>।</dd> +</dl> +</div> +</div> + +<p> </p> 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 +--- +<p><span id="result_box" lang="bn"><span class="hps">HTML এর</span> <span class="hps">পঞ্চম</span> <span class="hps">ও </span><span class="hps">সর্বশেষ</span> <span class="hps">সংস্করণ <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a></span></span>। <span id="result_box" lang="bn"><span class="hps">এর</span> নতুন কিছু ফিচার রয়েছে যেমন শুধু <span class="hps">রিচ</span> <span class="hps">মিডিয়া</span>ই <span class="hps">সমর্থন</span> <span class="hps">করা, ওয়েব </span></span><span id="result_box" lang="bn"><span class="hps">এপ্লিকেশন তৈরি করা এখন আরও সহজ। এসব ওয়েব এপ্লিকেশন ব্যবহারকীর সাথে ইন্টার-এক্ট করতে পারে, ব্যবহারকারীর কম্পিউটারের ডেটা নিয়ে কাজ করতে পারে, সার্ভারের সাথে যোগাযোগ </span></span>করতে পারে আগের থেকে অনেক কার্যকরভাবে।</p> +<p><span id="result_box" lang="bn"><span class="hps">HTML5</span> <span class="hps">এখনও</span> ডেভেলপ<span class="hps"> হচ্ছে</span><span>, সে কারণে</span> এখনো এর নির্দেশিকায় টুকটাক পরিবর্তন চলছে<span>।</span></span> <span id="result_box" lang="bn"><span class="hps">এখনো</span> <span class="hps">সব</span> <span class="hps">ব্রাউজারে সব ফিচার চলে না</span><span class="hps">।</span></span> যাইহোক, <em>গেকো</em> এবং তার এক্সটেনশন, ফায়ারফক্স খুব ভালভাবেই HTML5 সমর্থন করে, এবং এর আরও ফিচার সমর্থনের কাজ চলছে। <span id="result_box" lang="bn"><span class="hps">গেকো</span> <span class="hps">১.৮.১</span> <span id="result_box" lang="bn"><span class="hps">সংস্করণ</span></span> <span class="hps">থেকে HTML5 এর</span> ফিচার <span class="hps">সমর্থন করা</span> <span class="hps">শুরু করেছে। </span></span>গেকো বর্তমানে HTML5 এর কি কি ফিচার সমর্থন করে তা <a href="/bn/HTML/HTML5" title="en/HTML/HTML5">HTML5 এর মুল</a><a href="/bn-BD/HTML/HTML5"> পেজে </a> জানতে পারেন। অন্যান্য ব্রাউজারে HTML5 সাপোর্ট করে কি না, তা বিস্তারিত জানতে <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a> ওয়েবসাইটে যেতে পারেন।</p> +<h2 id="যেভাবে_বলবেন_আপনার_ডকুমেন্টে_HTML5_মার্ক-আপ_আছে">যেভাবে বলবেন আপনার ডকুমেন্টে HTML5 মার্ক-আপ আছে</h2> +<p>HTML5 এর জন্য ডকটাইপ খুবই সাধারন। আপনার HTML কন্টেন্ট যে HTML5 ব্যাবহার করছে তা বলার জন্য ডকুমেন্টের শুরুতে নিচের কোড লিখুনঃ</p> +<pre class="brush:html;"><!DOCTYPE html> +</pre> +<p>যেসব ব্রাউজার এখনো HTML5 সমর্থন করে না, তারাও এই কোড দেখলে স্ট্যান্ডার্ড মোডে চলে যাবে, যার অর্থ হল তারা HTML এর আগের সমর্থিত কোডগুলো ঠিকমতই দেখাবে এবং শুধুমাত্র যেসব HTML5 এলিমেন্ট তারা সমর্থন করে না সেগুলোই দেখাবে না।</p> +<p>নতুন এই ডকটাইপ আগের ডক্টাইপগুলো থেকে অনেক ছোট, যে কারণে এটা সহজেই মনে রাখা যায়। তাছাড়া ছোট হওয়ার জন্য কম বাইট ডাউনলোড হয় ব্যবহারকারীর মেশিনে।</p> +<h2 id="<meta_charset>_লিখে_ক্যারেক্টার-সেট_ডিক্লেয়ার_করুন"><code><meta charset> লিখে ক্যারেক্টার-সেট ডিক্লেয়ার করুন</code></h2> +<p>সাধারণতঃ পেইজের শুরুতেই এটি কোন ক্যারেক্টার-সেট ব্যবহার করছে তা বলে দিতে হয়। HTML এর আগের সংস্করণে জটিল {{HTMLElement("meta")}} ট্যাগ দিয়ে এটি করা লাগত, কিন্তু এখন যা খুবই সহজঃ</p> +<pre class="brush:html;"><meta charset="UTF-8"></pre> +<p>{{HTMLElement("head") }} এর পরেই উপরের কোড লিখুন, যেহেতু কিছু ব্রাউজার HTML ডকুমেন্ট পার্স করা নতুন করে শুরু করে, যদি আপনার ডিক্লেয়ার করা ক্যারেক্টার-সেট ব্রাউজার যেটা ধরে নিয়েছিল সেটার থেকে আলাদা হয়। এছাড়া, আপনি যদি UTF-8 ব্যবহার না করেন তাহলে আপনাকে UTF-8 ব্যবহার করতে নির্দেশনা দেওয়া হচ্ছে, কারণ এটি অনেক স্ক্রিপ্টেই ক্যারেক্টার ব্যবহার করা অনেক সহজ করে দেয়।</p> +<p>খেয়াল করুনঃ HTML5 নির্দেশনা দিয়েছে যে বৈধ ক্যারেক্টার-সেট অবশ্যই ASCII সমর্থিত হতে হবে আর কমপক্ষে ৮ বিট ব্যবহার করে এমন হতে হবে। নিরাপত্তা বাড়াতে আর কিছু এটাক (আক্রমণ!) ঠেকানোর জন্যই এই ব্যবস্থা।</p> +<h2 id="নতুন_HTML5_পার্সার">নতুন HTML5 পার্সার</h2> +<p>HTML5 পার্সিং নিয়মকানুন, (যা কিনা HTML কোডের অর্থ বের করে) HTML5 এ নিখুঁতভাবে বলা হয়েছে। HTML5 আসার আগে শুধুমাত্র বৈধ মার্ক-আপ কী সেটাই বলা থাকত, যেকারণে যখনই মার্ক-আপে কোন ভুল পাওয়া যেত (প্রায় সব ওয়েবসাইটেই কিছু না কিছু ভুল থাকে) একেক ব্রাউজার একেকভাবে আচরণ করত। কিন্তু এখন HTML5 এ যেহেতু মার্ক-আপে ভুল থাকলে কি করতে হবে সেটাও বলা হয়েছে, সব HTML5-সমর্থিত ব্রাউজার ভুল কোড পেলেও একইরকম আচরণ করবে।</p> +<p>এর ফলে ওয়েব ডেভেলপারদের এখন সুখের সময়। যদিও সব আধুনিক ব্রাউজার-ই HTML5-সমর্থিত, কিছু পুরনো ব্রাউজার পাওয়া যায় যারা কিনা HTML5 পার্সিং নিয়ম মেনে চলে না। এইসব HTML5-অসমর্থিত ব্রাউজার এখনো মানুষজন ব্যবহার করে। ডেভেলপারদের কে ভুল না করে, মার্ক-আপ লিখতে উৎসাহিত করা হয়, কারণ ভুলবিহীন কোড সহজেই বুঝা যায় আর পরেও কোড করতে সুবিধা হয়। আর বড় কথা হল, কোডে ভুল থাকলে পুরনো একেক ব্রাউজারে একেক আচরণ দেখা যাবে - কারণ পুরনো ব্রাউজারগুলো HTML5 পার্সিং নিয়ম মেনে চলে না।</p> +<p>টেনশন করার কোন দরকার-ই নেই, আপনার ওয়েবসাইটের কোন কিছু পরিবর্তন করা লাগবে না - ওয়েব ব্রাউজারের ডেভেলপার-রাই এসব নিয়ে মাথা ঘামাচ্ছে!</p> 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 +--- +<p>{{ CSSTutorialTOC() }}</p> +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}<span class="seoSummary">এটি <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> টিউটোরিয়ালের ৯ম বিভাগ; এখানে বর্ণনা করা হয়েছে কিভাবে আপনি CSS ব্যাবহার করে একটি ডকুমেন্টে বিষয়বস্তু যোগ করবেন। <span id="result_box" lang="bn"><span class="hps">আপনি টেক্সট</span> <span class="hps">কন্টেন্ট এবং</span> <span class="hps">ইমেজ যোগ</span> <span class="hps">করার জন্য আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">পরিবর্তন করুন।</span></span></span></p> +<h2 class="clearLeft" id="তথ্য_বিষয়বস্তু">তথ্য: বিষয়বস্তু</h2> +<p>CSS এর <span id="result_box" lang="bn"><span class="hps">গুরুত্বপূর্ণ বৈশিষ্ট হল এটি একটি ডকুমেন্টের বিষয়বস্তু থেকে ডকুমেন্টের স্টাইলকে আলাদা করতে সাহায্য করে</span></span>। এখনো সেখানে এমন কিছু অবস্থা আছে যেখানে এটা বুঝায় যে স্টাইলশিট এর অংশ হিসেবে কিছু নির্দিষ্ট বিষয়বস্তু ঠিক করতে হয়, ডকুমেন্ট এর অংশ হিসেবে নয়।</p> +<p><span id="result_box" lang="bn"><span class="hps">একটি স্টাইলশীটে</span> <span class="hps">নির্দিষ্ট</span> <span class="hps">বিষয়বস্তু</span> <span class="hps">টেক্সট বা</span> <span class="hps">ইমেজ</span> <span class="hps">গঠিত হতে পারে।</span></span><span id="result_box" lang="bn"><span class="hps">যখন</span> <span class="hps">আপনি আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">বিষয়বস্তু</span> <span class="hps">উল্লেখ করেন তখন <span id="result_box" lang="bn"><span class="hps">বিষয়বস্তুকে</span> <span class="hps">ঘনিষ্ঠভাবে</span> <span class="hps">ডুকুমেন্টের</span> <span class="hps">কাঠামো সাথে</span> <span class="hps">সংযুক্ত করা হয়</span></span>।</span></span></p> +<div class="tuto_details"> + <div class="tuto_type"> + <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো বিস্তারিত</span></span></div> + <p><span id="result_box" lang="bn"><span class="hps">একটি স্টাইলশীট</span> <span class="hps">কন্টেন্ট</span> <span class="hps">উল্লেখ</span> করতে <span class="hps">জটিলতার</span> <span class="hps">সৃষ্টি হতে পারে।</span></span> <span id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ, আপনি হয়ত</span><span class="hps"> স্টাইলশীটে আপনার ডকুমেন্টে থাকা বিভিন্ন ভাষা শেয়ার করেছেন। যদি স্টাইলশিট এর অংশ অনুবাদ করতে হয়, এর মানে হল যে আপনাকে অবশ্যই স্টাইলশিট এর সে অংশগুলো আলাদা আলাদা ফাইল এ রাখতে হবে এবং আপনার ডকুমেন্ট এর সঠিক ভাষা সংস্করণের সাথে তাদের সংযুক্ত করার ব্যবস্থা করতে হবে।</span></span></p> + <p>এই জটিলতাগুলো হয় না যদি আপনি চিহ্ন অথবা ছবি বা ইমেজ সমৃদ্ধ বিষয়বস্তু নির্দিষ্ট করেন যেটি সকল ভাষা এবং সংস্কৃতিতে প্রয়োগ করা যায়।</p> + <p><span id="result_box" lang="bn"><span class="hps">একটি স্টাইলশীট</span> <span class="hps">নির্দিষ্ট</span> <span class="hps">বিষয়বস্তু</span> <span class="hps">DOM এর</span> <span class="hps">অংশ</span> </span>নয়।</p> +</div> +<h3 id="টেক্সট_কন্টেন্ট"><span class="short_text" id="result_box" lang="bn"><span class="hps">টেক্সট কন্টেন্ট</span></span></h3> +<div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"> + <span id="result_box" lang="bn"><span class="hps">একটি উপাদান</span> আগে বা <span class="hps">পরে আপনি CSS</span> <span class="hps">টেক্সট কন্টেন্ট</span> <span class="hps">সন্নিবেশ করতে পারেন</span></span>। কিভাবে আপনি কন্টেন্টি {{ cssxref("::before") }} অথবা {{ cssxref("::after") }} যোগ করবেন তার একটি<span class="short_text" id="result_box" lang="bn"><span class="hps"> নির্দিষ্ট</span></span> নিয়ম selector এ দেয়া আছে। <span id="result_box" lang="bn"><span class="hps">টেক্সট কন্টেন্ট <span class="short_text" id="result_box" lang="bn"><span class="hps">নির্দিষ্ট মান</span></span></span> </span> {{ cssxref("content") }} প্রোপার্টির সাথে উল্লেখ করুন।</div> +</div> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>এই নিয়মে টেক্সট এ যোগ করুণ <span style="font-weight: bold; color: navy;">Reference :</span> before every element with the class <code>ref</code>:</p> + <pre class="brush:css">.ref:before { + font-weight: bold; + color: navy; + content: "Reference: "; +} +</pre> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + আরো বিস্তারিত</div> + <p>একটি স্টাইলশিট এর অক্ষরের সেট ডিফল্ট রুপে UTF-8 থাকে, কিন্তু এটা সংযুক্ত করে নির্দিষ্ট করা যায় অথবা স্টাইলশিট এটা নিজে অথবা আরও বিভিন্ন উপায়ে। আরও বিস্তারিত জানার জন্য দেখুন <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> CSS নির্দিষ্টকরণ।</p> + <p>আলাদা অক্ষরগুলোও escape প্রক্রিয়ায় নির্দিষ্ট করা যায় যেটি backslash ব্যবহার করে escape অক্ষর বা চিহ্ন হিসেবে। উদাহরণস্বরূপ, \265B হচ্ছে দাবার black queen ♛ এর প্রতীক। আরও বিস্তারিত জানার জন্য দেখুন, <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a> এবং <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> CSS নির্দিষ্টকরণে ।</p> +</div> +<h3 id="ইমেজ_বা_ছবি_বিষয়বস্তু">ইমেজ বা ছবি বিষয়বস্তু</h3> +<p>একটি উপাদানের আগে বা পরে ছবি সংযুক্ত করার জন্য, আপনি ছবিটির URL এই{{ cssxref("content") }} প্রপার্টি এর মানের মাঝে বসাবেন।</p> +<div class="tuto_example"> + <p><strong>উদাহরণ</strong><br> + এই নিয়মটি <span style="line-height: 1.5;">প্রতিটি link এর পরে</span><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">একটি space দেয় এবং একটি icon যোগ করে যেটিতে class </span><code style="font-style: normal; line-height: 1.5;">glossary আছে</code><span style="line-height: 1.5;">:</span></p> + <pre class="brush:css">a.glossary:after {content: " " url("../images/glossary-icon.gif");} +</pre> +</div> +<p>কোন উপাদানের background এ ছবি বা ইমেজ সংযুক্ত করার জন্য, কোন একটি ছবি বা ইমেজ এর URL {{ cssxref("background") }} প্রপার্টি এর মানের মাঝে নির্দিষ্ট করুন।এটি একটি shorthand প্রপার্টি যেটি background color, ছবি, কিভাবে ছবি এবং অন্যান্য বিস্তারিত নির্দিষ্টকরণে সহায়তা করে।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>এই নিয়মটি একটি নির্দিষ্ট উপাদানের background সেট করে, URL ব্যবহার করে image file উল্লেখ করে।</p> + <p>selector কোন উপাদানের id উল্লেখ করে। <code>no-repeat মানটি </code>image কে একবার দেখাতে সাহায্য করে :</p> + <pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;} +</pre> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + আরও বিস্তারিত</div> + <p>আলাদা আলাদা প্রপার্টিজ affecting backgrounds এবং অন্যান্য options যখন আপনি background ইমেজ গুলো ঠিক করেন সেইসব তথ্য এর জন্য, দেখুন{ cssxref("background") }} রেফেরেন্স পৃষ্ঠা।</p> +</div> +<h2 id="Action_Adding_a_background_ইমেজ">Action: Adding a background ইমেজ</h2> +<p>এ ইমেজ টি একটি সাদা বর্গ যেখানে এর নিচে একটি নীল লাইনে আছে :</p> +<table style="border: 2px solid #ccc;"> + <tbody> + <tr> + <td><img alt="Image:Blue-rule.png" class="internal" src="https://mdn.mozillademos.org/files/160/Blue-rule.png"></td> + </tr> + </tbody> +</table> +<ol> + <li>ইমেজ ফাইল টি Download করুন CSS file এর মত একই পদ্ধতিতে। (উদাহরণস্বরূপ, ডান পাশের বাটন এ ক্লিক করুন context মেনুটির জন্য, তারপর Save Image As টি তে ক্লিক করুন এবং এই টিউটোরিয়াল এর জন্য যে পদ্ধতি টি ব্যবাহার করছেন সেটি উল্লেখ করুন।)</li> + <li>আপনার CSS ফাইলটি সম্পাদন করুন এবং এই নিয়মটি body তে যোগ করুন , সম্পূর্ণ পৃষ্ঠার জন্য ব্যাকগ্রাউন্ড image যোগ করুন ।<br> + <pre class="brush:css">background: url("Blue-rule.png"); +</pre> + <p><code>repeat মান টি ডিফল্ট</code>, তাই একে কিছু করতে হবে না। ইমেজ বা ছবিটি বা অনূভুমিকপভাবে বা উলম্বভাবে পুনরাবৃত্তি হয় , যেটা রেখাযুক্ত লেখা কাগজের মত দেখায় :</p> + <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> + <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p> + <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> + <div style="font-style: italic; width: 24em;"> + <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</p> + </div> + <div style="font-style: normal; padding-top: 2px; height: 8em;"> + <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</p> + </div> + </div> + </div> + </li> +</ol> +<div class="tuto_example"> + <div class="tuto_type"> + চ্যালেঞ্জ</div> + <p>এই ইমেজ টি ডাউনলোড করুন:</p> + <table style="border: 2px solid #ccc;"> + <tbody> + <tr> + <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> + </tr> + </tbody> + </table> + <p>আপনার স্টাইলশিট এ একটি নিয়ম যোগ করুন যাতে করে এটি প্রতিটি লাইনের প্রথমে ইমেজ বা ছবি প্রদর্শন করে :</p> + <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> + <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p> + <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> + <div style="font-style: italic; width: 24em; padding-top: 8px;"> + <img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</div> + <div style="font-style: normal; padding-top: 12px; height: 8em;"> + <img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</div> + </div> + </div> + <div class="tuto_details" id="tutochallenge"> + <div class="tuto_type"> + Possible solution</div> + <p>Add this rule to your stylesheet:</p> + <pre class="brush: css">p:before{ + content: url("yellow-pin.png"); +} +</pre> + <p> </p> + <a class="hideAnswer" href="#challenge">Hide solution</a></div> + <a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> +<h2 id="পরবর্তীতে_কি_আছে">পরবর্তীতে কি আছে?</h2> +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}একটি সাধারণ প্রক্রিয়া stylesheets কিভাবে লিস্টে বিভিন্ন আইটেম মার্ক করার জন্য বিষয়বস্তু যোগ করে। পরবর্তী বিভাগ বর্ণনা করবে কিভাবে <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists">specify style for list elements।</a></p> 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 +--- +<div>Translation in progress</div> + +<div>{{LearnSidebar}}</div> + +<p class="summary">The following links provide solutions to common problems you can solve with CSS.</p> + +<h2 id="Common_use_cases">Common use cases</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Basics">Basics</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to apply CSS to HTML</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">How to use whitespace in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">How to write comments in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">How to select elements via element name, class or ID</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">How to select elements via attribute name and content</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">How to use pseudo-classes</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">How to use pseudo-elements</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">How to apply multiple selectors to the same rule</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">How to specify colors in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">How to debug CSS in the browser</a></li> +</ul> + +<h3 id="CSS_and_text">CSS and text</h3> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">How to style text</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">How to customize a list of elements</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">How to style links</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">How to add shadows to text</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Boxes_and_layouts">Boxes and layouts</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">How to control overflowing content</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to control the part of a CSS box that the background is drawn under</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li> + <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li> +</ul> +</div> +</div> + +<h2 id="Uncommon_and_advanced_techniques">Uncommon and advanced techniques</h2> + +<p>CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.</p> + +<h3 id="General">General</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li> +</ul> + +<h3 id="Advanced_effects">Advanced effects</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li> +</ul> + +<h3 id="Layout">Layout</h3> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li> +</ul> + +<h2 id="See_also">See also</h2> + +<p><a href="/en-US/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — A variety of topics: from debugging to selector usage.</p> 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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">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.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>You should learn the basics of HTML before attempting any CSS. We recommend that you work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module first. In that module, you will learn about:</p> + +<ul> + <li>CSS, starting with the <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module</li> + <li>More advanced <a href="/en-US/docs/Learn/HTML#Modules">HTML modules</a></li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages</li> +</ul> + +<p>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.</p> + +<p>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 <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a> and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both of which are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> 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 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module, albeit in a lot more detail.</p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> + <dd>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.</dd> + <dt>Responsive design (TBD)</dt> + <dd>With so many different types of devices able to browse the web these days, <a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (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.</dd> +</dl> + +<h2 id="Solving_common_CSS_problems">Solving common CSS problems</h2> + +<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a web page.</p> + +<p>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!</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt> + <dd>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.</dd> +</dl> 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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">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.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>Ideally you should start your learning journey by learning HTML. Start by reading <a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a>. You may then move on to learning about more advanced topics such as:</p> + +<ul> + <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> + <li><a href="/en-US/docs/Learn/CSS">CSS</a>, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)</li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.)</li> +</ul> + +<p>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 <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>before attempting this topic, however it isn't absolutely necessary; much of what is covered in the <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> article is also covered in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, albeit in a lot more detail.</p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2> + +<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> 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.</p> + +<h2 id="See_also">See also</h2> + +<div class="document-head" id="wiki-document-head"> +<dl> + <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN.</dt> + <dd>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.</dd> +</dl> +</div> 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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">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.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>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 <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>), and understand how to create and manage files (as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>). Both are parts of our <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<div class="note"> +<p><strong>Note</strong>: 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 <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>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.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></dt> + <dd>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!</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></dt> + <dd>The {{Glossary("Head","head")}} of an HTML document is the part that <strong>is not</strong> 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).</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></dt> + <dd>There are many other elements in HTML for formatting text that we didn't get to in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> 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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessments will test your understanding of the HTML basics covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt> + <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to HTML</em> 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.</dd> +</dl> + +<div class="note"> +<h2 id="Feedback">Feedback</h2> + +<p>Help us improve our guides and tutorials like this one by taking <a href="https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey">our survey here</a>.</p> +</div> 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 +--- +<div><font><font>{{LearnSidebar}}</font></font></div> + +<div><font><font>{{পূর্ববর্তীমেনেক্সট ("শিখুন / এইচটিএমএল / ভূমিকা_ টুটোঅ্যাপ / গেটিং_স্টার্ট" "" শিখুন / এইচটিএমএল / পরিচিতি_ টুআউটএইচএমএল / এইচটিএমএল_পাঠন_ফান্ডমেন্টস ")," শিখুন / এইচটিএমএল / ভূমিকা_to_HTML ")}</font></font></div> + +<p class="summary"><font><font>এইচটিএমএল ডকুমেন্টের {। শব্দকোষ ("প্রধান", "মাথা")} এমন অংশ যা পৃষ্ঠাটি লোড হওয়ার পরে ওয়েব ব্রাউজারে প্রদর্শিত হয় না। </font><font>এটিতে {t htmlelement ("শিরোনাম")} page পৃষ্ঠা, {{গ্লসারি ("CSS")) links (আপনি যদি CSS এর সাথে আপনার HTML বিষয়বস্তু স্টাইল করতে পছন্দ করেন), কাস্টম ফেভিকনগুলির লিঙ্ক এবং অন্যান্য সম্পর্কিত তথ্য রয়েছে মেটাডেটা (এইচটিএমএল সম্পর্কিত ডেটা, যেমন লেখক, এবং গুরুত্বপূর্ণ কীওয়ার্ড যা দস্তাবেজ বর্ণনা করে mark) আপনাকে নিবন্ধের সাথে কাজ করার জন্য একটি ভাল ভিত্তি দেওয়ার জন্য এই নিবন্ধে আমরা উপরের এবং আরও অনেকগুলি কভার করব।</font></font></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row"><font><font>পূর্বশর্ত:</font></font></th> + <td><font><font>এইচটিএমএল দিয়ে </font></font><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started"><font><font>শুরু করার ক্ষেত্রে</font></font></a><font><font> কভার হিসাবে বেসিক এইচটিএমএল পরিচিতি </font><font>।</font></font></td> + </tr> + <tr> + <th scope="row"><font><font>উদ্দেশ্য:</font></font></th> + <td><font><font>এইচটিএমএল হেড, তার উদ্দেশ্য, এটিতে থাকা সবচেয়ে গুরুত্বপূর্ণ আইটেমগুলি এবং এটি HTML ডকুমেন্টে কী প্রভাব ফেলতে পারে তা সম্পর্কে জানতে।</font></font></td> + </tr> + </tbody> +</table> + +<h2 id="এইচটিএমএল_প্রধান_কি"><font><font>এইচটিএমএল প্রধান কি?</font></font></h2> + +<p><font><font>আসুন </font></font><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document"><font><font>আমরা আগের প্রবন্ধে কভার করা</font></font></a><font><font> সাধারণ </font><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document"><font>HTML নথিটি আবার</font></a><font> ঘুরে দেখি </font><font>:</font></font></p> + +<pre class="notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p><font><font>এইচটিএমএল হেড হ'ল t t এইচটিএম্লেলেটমেন্ট ("মাথা")}} উপাদানটির বিষয়বস্তু - {t এইচটিএমলেলেট ("বডি")}} উপাদান (যা ব্রাউজারে লোড করার সময় পৃষ্ঠায় প্রদর্শিত হয়) এর বিপরীতে, মাথার সামগ্রীটি পৃষ্ঠায় প্রদর্শিত হয় না। </font><font>পরিবর্তে, দস্তাবেজের বিষয়ে প্রধানের কাজটি ss। শব্দকোষ ("মেটাডাটা", "মেটাডেটা") contain contain থাকা। </font><font>উপরের উদাহরণে, মাথাটি বেশ ছোট:</font></font></p> + +<pre class="notranslate"><head> + <meta charset="utf-8"> + <title>My test page</title> +</head></pre> + +<p><font><font>বড় পৃষ্ঠাগুলিতে তবে মাথা বেশ পূর্ণ হতে পারে। </font><font>আপনার পছন্দের কয়েকটি ওয়েবসাইটে যাওয়ার চেষ্টা করুন এবং </font></font><a href="/en-US/docs/Learn/Discover_browser_developer_tools"><font><font>বিকাশকারী সরঞ্জামগুলি</font></font></a><font><font> তাদের মাথার সামগ্রীগুলি পরীক্ষা করতে </font><font>ব্যবহার করুন </font><font>। </font><font>এখানে আমাদের উদ্দেশ্যটি আপনাকে যে কীভাবে সম্ভবত মাথার মধ্যে রাখা যেতে পারে সেগুলি কীভাবে ব্যবহার করবেন তা আপনাকে দেখানো নয়, বরং আপনাকে কীভাবে প্রধান উপাদানগুলিকে মাথার মধ্যে অন্তর্ভুক্ত করতে চাইবেন এবং কীভাবে আপনাকে কিছুটা পরিচয় দিতে হবে তা কীভাবে ব্যবহার করবেন তা শেখানো। </font><font>চল শুরু করি.</font></font></p> + +<h2 id="একটি_শিরোনাম_যুক্ত_করা_হচ্ছে"><font><font>একটি শিরোনাম যুক্ত করা হচ্ছে</font></font></h2> + +<p><font><font>আমরা ইতিমধ্যে ক্রিয়াকলাপে {t htmlelement ("শিরোনাম")}} উপাদানটি দেখেছি - এটি নথিতে একটি শিরোনাম যুক্ত করতে ব্যবহার করা যেতে পারে। </font><font>তবে এটি আপনার শরীরের সামগ্রীতে শীর্ষ স্তরের শিরোনাম যুক্ত করতে ব্যবহৃত which t htmlelement ("h1")}} উপাদানটির সাথে বিভ্রান্ত হতে পারে - এটি কখনও কখনও পৃষ্ঠা শিরোনাম হিসাবেও উল্লেখ করা হয়। </font><font>তবে এগুলি আলাদা জিনিস!</font></font></p> + +<ul> + <li><font><font>ব্রাউজারে লোড করার সময় {t htmlelement ("h1")}} উপাদানটি পৃষ্ঠায় উপস্থিত হয় - সাধারণত আপনার পৃষ্ঠার সামগ্রীর শিরোনাম চিহ্নিত করার জন্য এটি প্রতি পৃষ্ঠায় একবার ব্যবহার করা উচিত (গল্পের শিরোনাম, বা সংবাদ শিরোনাম, বা আপনার ব্যবহারের জন্য যা উপযুক্ত তা।)</font></font></li> + <li><font><font>T t এইচটিএমলেলেট ("শিরোনাম")}} উপাদানটি মেটাডেটা যা সামগ্রিক এইচটিএমএল ডকুমেন্টের শিরোনামকে উপস্থাপন করে (দস্তাবেজের সামগ্রী নয়))</font></font></li> +</ul> + +<h3 id="সক্রিয়_শেখা_একটি_সাধারণ_উদাহরণ_পরিদর্শন_করা"><font><font>সক্রিয় শেখা: একটি সাধারণ উদাহরণ পরিদর্শন করা</font></font></h3> + +<ol> + <li><font><font>এই সক্রিয় শেখার শুরু করতে, আমরা চাই আপনি আমাদের গিটহাব রেপোতে গিয়ে আমাদের </font></font><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html"><font><font>শিরোনাম-উদাহরণ</font></font></a><font><font> । </font><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html"><font>Html পৃষ্ঠাটির</font></a><font> একটি অনুলিপি ডাউনলোড করুন </font><font>। </font><font>এটি করার জন্য, হয়</font></font> + + <ol> + <li><font><font>পৃষ্ঠার বাইরে কোডটি অনুলিপি করুন এবং আপনার কোড সম্পাদকে একটি নতুন পাঠ্য ফাইলে আটকান, তারপরে এটি কোনও বোধগম্য জায়গায় সংরক্ষণ করুন।</font></font></li> + <li><font><font>গিটহাব পৃষ্ঠায় "কাঁচা" বোতাম টিপুন, যার ফলে কাঁচা কোড প্রদর্শিত হবে (সম্ভবত একটি নতুন ব্রাউজার ট্যাবে)। </font><font>এরপরে, আপনার ব্রাউজারের </font></font><em><font><font>ফাইল> পৃষ্ঠা হিসাবে সংরক্ষণ করুন ...</font></font></em><font><font> মেনু চয়ন করুন এবং ফাইলটি সংরক্ষণ করার জন্য একটি বুদ্ধিমান জায়গা চয়ন করুন।</font></font></li> + </ol> + </li> + <li><font><font>এখন আপনার ব্রাউজারে ফাইলটি খুলুন। </font><font>আপনার এইরকম কিছু দেখতে পাওয়া উচিত:</font></font> + <p><img alt="<শিরোনাম> উপাদানটিতে শিরোনামযুক্ত একটি সাধারণ ওয়েব পৃষ্ঠা এবং <h1> উপাদানটিকে <h1> সেট করা আছে।" src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;"><font><font>এটি এখন সম্পূর্ণ স্পষ্ট হওয়া উচিত যেখানে </font></font><code><h1></code><font><font>সামগ্রীটি প্রদর্শিত হবে এবং যেখানে </font></font><code><title></code><font><font>সামগ্রী প্রদর্শিত হবে!</font></font></p> + </li> + <li><font><font>আপনার কোড সম্পাদকে কোডগুলি খোলার চেষ্টা করা উচিত, এই উপাদানগুলির বিষয়বস্তু সম্পাদনা করে, তারপরে আপনার ব্রাউজারে পৃষ্ঠাটি রিফ্রেশ করুন। </font><font>এটা দিয়ে কিছু মজা আছে।</font></font></li> +</ol> + +<p><code><title></code><font><font>উপাদান বিষয়বস্তু অন্যান্য উপায়ে ব্যবহার করা হয়। </font><font>উদাহরণস্বরূপ, আপনি যদি পৃষ্ঠাটি বুকমার্ক করার চেষ্টা করেন ( </font></font><em><font><font>বুকমার্কস> এই পৃষ্ঠাটি</font></font></em><font><font> বুকমার্ক করুন </font><font>বা ফায়ারফক্সের URL বারে তারকা আইকন), আপনি </font></font><code><title></code><font><font>প্রস্তাবিত বুকমার্কের নাম হিসাবে ভরাট সামগ্রী </font><font>দেখতে পাবেন </font><font>।</font></font></p> + +<p><img alt="ফায়ারফক্সে একটি ওয়েবপেজ বুকমার্ক করা হচ্ছে; বুকমার্কের নামটি <শিরোনাম> উপাদানটির সামগ্রীতে স্বয়ংক্রিয়ভাবে পূর্ণ হয়ে গেছে filled" src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p><code><title></code><font><font>বিষয়বস্তু এছাড়াও, অনুসন্ধান ফলাফল ব্যবহার করা হয় যেমন আপনি নীচের দেখতে পাবেন।</font></font></p> + +<h2 id="মেটাডেটা_<মেটা>_উপাদান"><font><font>মেটাডেটা: <মেটা> উপাদান</font></font></h2> + +<p><font><font>মেটাডেটা এমন ডেটা যা ডেটা বর্ণনা করে এবং এইচটিএমএল একটি নথিতে মেটাডেটা যুক্ত করার একটি "অফিসিয়াল" উপায় রয়েছে - {{htmlelement ("meta")}। উপাদান। </font><font>অবশ্যই, আমরা এই নিবন্ধটিতে অন্যান্য জিনিসগুলির কথা বলছি তাও মেটাডেটা হিসাবে বিবেচনা করা যেতে পারে। </font><font>বিভিন্ন ধরণের </font></font><code><meta></code><font><font>উপাদান রয়েছে যা আপনার পৃষ্ঠার <হেড> এ অন্তর্ভুক্ত করা যেতে পারে তবে আমরা এ পর্যায়ে সেগুলি ব্যাখ্যা করার চেষ্টা করব না, কারণ এটি কেবল খুব বিভ্রান্ত হবে। </font><font>পরিবর্তে, আমরা আপনাকে কিছু ধারণা দেবো যা আপনি সাধারণত দেখতে পারেন, কেবল আপনাকে ধারণা দেওয়ার জন্য।</font></font></p> + +<h3 id="আপনার_নথির_অক্ষর_এনকোডিং_নির্দিষ্ট_করা"><font><font>আপনার নথির অক্ষর এনকোডিং নির্দিষ্ট করা</font></font></h3> + +<p><font><font>আমরা উপরের উদাহরণে দেখেছি, এই লাইনটি অন্তর্ভুক্ত ছিল:</font></font></p> + +<pre class="notranslate"><meta charset="utf-8"></pre> + +<p><font><font>এই উপাদানটি কেবল নথির অক্ষর এনকোডিং নির্দিষ্ট করে - নথিটি ব্যবহারের জন্য অনুমোদিত এমন অক্ষর সেট। </font></font><code>utf-8</code><font><font>একটি সর্বজনীন চরিত্র সেট যা কোনও মানব ভাষা থেকে যে কোনও চরিত্রকে অন্তর্ভুক্ত করে। </font><font>এর অর্থ হ'ল আপনার ওয়েব পৃষ্ঠাটি যে কোনও ভাষা প্রদর্শিত হ্যান্ডেল করতে সক্ষম হবে; </font><font>সুতরাং আপনার তৈরি প্রতিটি ওয়েব পৃষ্ঠায় এটি সেট করা ভাল ধারণা! </font><font>উদাহরণস্বরূপ, আপনার পৃষ্ঠাটি ইংলিশ এবং জাপানিদের ঠিক জরিমানা করতে পারে:</font></font></p> + +<p><img alt="ইংরেজি এবং জাপানি অক্ষর সমন্বিত একটি ওয়েব পৃষ্ঠা, সর্বজনীন বা utf-8 এ অক্ষর এনকোডিং রয়েছে with উভয় ভাষা সূক্ষ্ম প্রদর্শন করে," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;"><font><font>আপনি যদি নিজের চরিত্রের এনকোডিং সেট করেন </font></font><code>ISO-8859-1</code><font><font>, উদাহরণস্বরূপ (লাতিন বর্ণমালার জন্য বর্ণচিহ্ন সেট করা), আপনার পৃষ্ঠার রেন্ডারিং সমস্ত গোলমেলে প্রদর্শিত হতে পারে:</font></font></p> + +<p><img alt="ইংরাজী এবং জাপানি অক্ষর সমন্বিত একটি ওয়েব পৃষ্ঠাতে লাতিনে অক্ষর এনকোডিং রয়েছে। জাপানি চরিত্রগুলি সঠিকভাবে প্রদর্শিত হয় না" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<div class="note"> +<p><strong><font><font>দ্রষ্টব্য</font></font></strong><font><font> : কিছু ব্রাউজার (যেমন ক্রোম) স্বয়ংক্রিয়ভাবে ভুল এনকোডিংগুলি ঠিক করে দেয়, তাই আপনি কোন ব্রাউজারটি ব্যবহার করেন তার উপর নির্ভর করে আপনি যেভাবেই এই সমস্যাটি দেখতে পাবেন না। </font></font><code>utf-8</code><font><font>অন্য ব্রাউজারগুলিতে কোনও সম্ভাব্য সমস্যা এড়াতে আপনার পাতায় </font><font>এখনও কোনও এনকোডিং সেট করা উচিত </font><font>।</font></font></p> +</div> + +<h3 id="সক্রিয়_শেখা_চরিত্রের_এনকোডিংয়ের_পরীক্ষা"><font><font>সক্রিয় শেখা: চরিত্রের এনকোডিংয়ের পরীক্ষা</font></font></h3> + +<p><font><font>এটি চেষ্টা করার জন্য, পূর্ববর্তী বিভাগে </font></font><code><title></code><font><font>( </font></font><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html"><font><font>শিরোনাম-উদাহরণ html পৃষ্ঠা</font></font></a><font><font> ) </font><font>আপনি প্রাপ্ত সাধারণ এইচটিএমএল টেমপ্লেটটি আবার ঘুরে দেখুন </font><font>, মেটা চরসেট মানটিতে পরিবর্তন করার চেষ্টা </font></font><code>ISO-8859-1</code><font><font>করুন এবং আপনার পৃষ্ঠায় জাপানিদের যুক্ত করুন। </font><font>এটি আমরা ব্যবহার করা কোড:</font></font></p> + +<pre class="brush: html notranslate"><font><font><p> জাপানি উদাহরণ: ভাত গরম। </font><font>? </ P></font></font></pre> + +<h3 id="একজন_লেখক_এবং_বিবরণ_যুক্ত_করা_হচ্ছে"><font><font>একজন লেখক এবং বিবরণ যুক্ত করা হচ্ছে</font></font></h3> + +<p><font><font>অনেক </font></font><code><meta></code><font><font>উপাদান অন্তর্ভুক্ত </font></font><code>name</code><font><font>এবং </font></font><code>content</code><font><font>বৈশিষ্ট্য:</font></font></p> + +<ul> + <li><code>name</code><font><font>এটি হ'ল মেটা এলিমেন্টের ধরণ নির্দিষ্ট করে; </font><font>এটিতে কী ধরণের তথ্য রয়েছে।</font></font></li> + <li><code>content</code><font><font> প্রকৃত মেটা সামগ্রী নির্দিষ্ট করে।</font></font></li> +</ul> + +<p><font><font>আপনার পৃষ্ঠায় অন্তর্ভুক্ত করতে দরকারী এমন দুটি মেটা উপাদান পৃষ্ঠার লেখককে সংজ্ঞায়িত করে এবং পৃষ্ঠার একটি সংক্ষিপ্ত বিবরণ সরবরাহ করে। </font><font>আসুন একটি উদাহরণ তাকান:</font></font></p> + +<pre class="brush: html notranslate"><font><font><মেটা নাম = "লেখক" সামগ্রী = "ক্রিস মিলস"></font></font><font><font> +<মেটা নাম = "বিবরণ" সামগ্রী = "এমডিএন ওয়েব ডক্স লার্নিং এরিয়া সরবরাহ করার লক্ষ্য</font></font><font><font> +ওয়েবে তাদের জানতে প্রয়োজনীয় সমস্ত কিছুর সাথে ওয়েবে শুরু করুন</font></font><font><font> +ওয়েব সাইট এবং অ্যাপ্লিকেশন বিকাশ করে শুরু হয়েছে ""></font></font></pre> + +<p><font><font>কোনও লেখককে নির্দিষ্ট করে দেওয়া বিভিন্ন উপকারে: এই পৃষ্ঠাটি কে লিখেছেন তা বুঝতে সক্ষম হওয়া কার্যকর, যদি বিষয়বস্তু সম্পর্কে আপনার কোনও প্রশ্ন থাকে এবং আপনি তাদের সাথে যোগাযোগ করতে চান। </font><font>কিছু কন্টেন্ট ম্যানেজমেন্ট সিস্টেমে পৃষ্ঠা লেখকের তথ্য স্বয়ংক্রিয়ভাবে আহরণের এবং এ জাতীয় উদ্দেশ্যে এটি উপলব্ধ করার সুবিধা রয়েছে facilities</font></font></p> + +<p><font><font>আপনার পৃষ্ঠার সামগ্রীর সাথে সম্পর্কিত কীওয়ার্ড সহ একটি বিবরণ উল্লেখ করা দরকারী কারণ এটি আপনার পৃষ্ঠায় অনুসন্ধান ইঞ্জিনগুলিতে সম্পাদিত প্রাসঙ্গিক অনুসন্ধানগুলিতে উচ্চতর প্রদর্শিত হওয়ার সম্ভাবনা রয়েছে (এই জাতীয় ক্রিয়াকলাপটিকে </font></font><a href="/en-US/docs/Glossary/SEO"><font><font>অনুসন্ধান ইঞ্জিন অপ্টিমাইজেশন</font></font></a><font><font> বা "এসইও" বলা হয়) )}}।)</font></font></p> + +<h3 id="সক্রিয়_শিক্ষণ_অনুসন্ধান_ইঞ্জিনগুলিতে_বর্ণনার_ব্যবহার"><font><font>সক্রিয় শিক্ষণ: অনুসন্ধান ইঞ্জিনগুলিতে বর্ণনার ব্যবহার</font></font></h3> + +<p><font><font>বর্ণনাটি অনুসন্ধান ইঞ্জিনের ফলাফল পৃষ্ঠাগুলিতেও ব্যবহৃত হয়। </font><font>এটি এক্সপ্লোর করার জন্য অনুশীলনের মধ্য দিয়ে যাওয়া যাক</font></font></p> + +<ol> + <li><a href="https://developer.mozilla.org/en-US/"><font><font>মজিলা বিকাশকারী নেটওয়ার্কের প্রথম পৃষ্ঠায়</font></font></a><font><font> যান </font><font>।</font></font></li> + <li><font><font>পৃষ্ঠার উত্স দেখুন (পৃষ্ঠায় ডান / </font></font><kbd>Ctrl</kbd><font><font>+ ক্লিক করুন, </font><font>প্রসঙ্গ মেনু থেকে </font></font><em><font><font>পৃষ্ঠা উত্স দেখুন</font></font></em><font><font> চয়ন করুন </font><font>)</font></font></li> + <li><font><font>বর্ণনা মেটা ট্যাগ সন্ধান করুন। </font><font>এটি এর মতো কিছু দেখবে (যদিও এটি সময়ের সাথে সাথে এটি পরিবর্তিত হতে পারে):</font></font> + <pre class="brush: html notranslate"><font><font><মেটা নাম = "বিবরণ" সামগ্রী = "এমডিএন ওয়েব ডক্স সাইট </font></font><font><font> + ওপেন ওয়েব প্রযুক্তি সম্পর্কিত তথ্য সরবরাহ করে </font></font><font><font> + এইচটিএমএল, সিএসএস এবং উভয় ওয়েব সাইট এবং এর জন্য এপিআই সহ </font></font><font><font> + প্রগতিশীল ওয়েব অ্যাপ্লিকেশন ""></font></font></pre> + </li> + <li><font><font>এখন আপনার পছন্দসই সার্চ ইঞ্জিনে "MDN ওয়েব ডক্স" অনুসন্ধান করুন (আমরা গুগল ব্যবহার করেছি)) আপনি অনুসন্ধানের ফলাফলটিতে ব্যবহৃত বিবরণ </font></font><code><meta></code><font><font>এবং </font></font><code><title></code><font><font>উপাদান সামগ্রীটি </font><font>লক্ষ্য করবেন </font><font>- অবশ্যই তা মূল্যবান!</font></font> + <p><img alt='"মজিলা বিকাশকারী নেটওয়ার্ক" এর জন্য ইয়াহু অনুসন্ধানের ফলাফল' src="https://mdn.mozillademos.org/files/16074/mdn-search-result.png" style="border-style: solid; border-width: 1px; display: block; height: 982px; margin: 0px auto; width: 1302px;"></p> + </li> +</ol> + +<div class="note"> +<p><strong><font><font>দ্রষ্টব্য</font></font></strong><font><font> : গুগলে আপনি মূল হোমপেজ লিঙ্কের নীচে তালিকাভুক্ত MDN ওয়েব ডক্সের কিছু প্রাসঙ্গিক উপ পৃষ্ঠা দেখতে পাবেন - এগুলিকে সাইটলিঙ্কস বলা হয় এবং </font></font><a href="http://www.google.com/webmasters/tools/"><font><font>গুগলের ওয়েবমাস্টার সরঞ্জামগুলিতে</font></font></a><font><font> কনফিগার করা যায় </font><font>- গুগল অনুসন্ধান ইঞ্জিনে আপনার সাইটের অনুসন্ধানের ফলাফলকে আরও উন্নত করার একটি উপায়।</font></font></p> +</div> + +<div class="note"> +<p><strong><font><font>দ্রষ্টব্য</font></font></strong><font><font> : অনেকগুলি </font></font><code><meta></code><font><font>বৈশিষ্ট্য আর ব্যবহার করা হয় না। </font><font>উদাহরণস্বরূপ, কীওয়ার্ড </font></font><code><meta></code><font><font>এলিমেন্ট ( </font></font><code><meta name="keywords" content="fill, in, your, keywords, here"></code><font><font>) - যা বিভিন্ন অনুসন্ধানের পদগুলির জন্য সেই পৃষ্ঠার প্রাসঙ্গিকতা নির্ধারণের জন্য অনুসন্ধান ইঞ্জিনগুলির জন্য কীওয়ার্ড সরবরাহ করার কথা ছিল - অনুসন্ধান ইঞ্জিনগুলি দ্বারা উপেক্ষা করা হয়, কারণ স্প্যামাররা কেবলমাত্র শত শত কীওয়ার্ড সহ কীওয়ার্ডের তালিকাটি পূরণ করছিল, বাইসিং ফলাফলগুলি ।</font></font></p> +</div> + +<h3 id="অন্যান্য_ধরণের_মেটাডেটা"><font><font>অন্যান্য ধরণের মেটাডেটা</font></font></h3> + +<p><font><font>আপনি যখন ওয়েবে ঘুরে দেখেন, আপনি অন্যান্য ধরণের মেটাডেটাও দেখতে পাবেন। </font><font>ওয়েবসাইটগুলিতে আপনি দেখতে পাবেন এমন অনেকগুলি বৈশিষ্ট্য হ'ল মালিকানাধর্মী সৃজন, নির্দিষ্ট সাইটগুলি (যেমন সোশ্যাল নেটওয়ার্কিং সাইটগুলি) তারা ব্যবহার করতে পারেন এমন নির্দিষ্ট তথ্য সরবরাহ করার জন্য ডিজাইন করা।</font></font></p> + +<p><font><font>উদাহরণস্বরূপ, </font></font><a href="http://ogp.me/"><font><font>ওপেন গ্রাফ ডেটা</font></font></a><font><font> এমন একটি মেটাডেটা প্রোটোকল যা ফেসবুক ওয়েবসাইটগুলির জন্য আরও সমৃদ্ধ মেটাডেটা সরবরাহ করার জন্য আবিষ্কার করেছিল। </font><font>MDN ওয়েব ডক্স সোর্সকোডে আপনি এটি পাবেন:</font></font></p> + +<pre class="notranslate"><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"></pre> + +<p><font><font>এর একটি প্রভাব হ'ল আপনি যখন ফেসবুকে MDN ওয়েব ডক্সের সাথে লিঙ্ক করেন, লিঙ্কটি একটি চিত্র এবং বর্ণনার সাথে উপস্থিত হয়: ব্যবহারকারীদের জন্য আরও সমৃদ্ধ অভিজ্ঞতা।</font></font></p> + +<p><img alt="ফেসবুকে প্রদর্শিত হিসাবে এমডিএন হোমপেজ থেকে গ্রাফ প্রোটোকল ডেটা খুলুন, একটি চিত্র, শিরোনাম এবং বিবরণ দেখায়।" src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;"></p> + +<p><font><font>টুইটারের নিজস্ব </font></font><a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards"><font><font>টুইটার কার্ড</font></font></a><font><font> নামে নিজস্ব মালিকানাধীন মেটাডেটাও </font><font>রয়েছে, যা সাইটের ইউআরএল টুইটার ডটকমে প্রদর্শিত হলে একই প্রভাব ফেলে। </font><font>উদাহরণ স্বরূপ:</font></font></p> + +<pre class="notranslate"><meta name="twitter:title" content="Mozilla Developer Network"></pre> + +<h2 id="আপনার_সাইটে_কাস্টম_আইকন_যুক্ত_করা_হচ্ছে"><font><font>আপনার সাইটে কাস্টম আইকন যুক্ত করা হচ্ছে</font></font></h2> + +<p><font><font>আপনার সাইটের নকশাটিকে আরও সমৃদ্ধ করতে, আপনি আপনার মেটাডেটাতে কাস্টম আইকনগুলিতে উল্লেখ যুক্ত করতে পারেন এবং এগুলি নির্দিষ্ট প্রসঙ্গে প্রদর্শিত হবে। </font><font>এর মধ্যে সর্বাধিক ব্যবহৃত হ'ল </font></font><strong><font><font>ফেভিকন</font></font></strong><font><font> (ব্রাউজারগুলিতে "ফেভারিট" বা "বুকমার্কস" তালিকায় এর ব্যবহারের উল্লেখ করে "ফেভারিট আইকন" এর জন্য সংক্ষিপ্ত)।</font></font></p> + +<p><font><font>নম্র ফ্যাভিকন প্রায় বহু বছর ধরে রয়েছে। </font><font>এটি এই ধরণের প্রথম আইকন: একাধিক জায়গায় ব্যবহৃত 16 পিক্সেল বর্গ আইকন। </font><font>আপনি প্রতিটি ব্রাউজার পাতায় থাকা ব্রাউজার ট্যাবে এবং বুকমার্ক প্যানেলে বুকমার্কযুক্ত পৃষ্ঠাগুলির পাশে ফ্যাভিকনগুলি (ব্রাউজারের উপর নির্ভর করে) দেখতে পাবেন।</font></font></p> + +<p><font><font>আপনার পৃষ্ঠায় একটি ফেভিকন যুক্ত করা যেতে পারে:</font></font></p> + +<ol> + <li><font><font>সাইটের সূচক পাতা, সংরক্ষিত হিসাবে একই ডিরেক্টরির মধ্যে সংরক্ষণ </font></font><code>.ico</code><font><font>বিন্যাস (অধিকাংশ ব্রাউজারের মতো আরো সাধারণ বিন্যাসে ফ্যাবিকনগুলি সমর্থন করবে </font></font><code>.gif</code><font><font>বা </font></font><code>.png</code><font><font>, কিন্তু ICO ফরম্যাটে ব্যবহার করে এটি পর্যন্ত ফিরে ইন্টারনেট এক্সপ্লোরার 6. যেমন হিসাবে কাজ করে তা নিশ্চিত হবে)</font></font></li> + <li><font><font>এটি উল্লেখ করার জন্য আপনার এইচটিএমএল এর M {এইচটিএমলেমেন্ট ("প্রধান")}} ব্লকটিতে নিম্নলিখিত লাইনটি যুক্ত করা:</font></font> + <pre class="notranslate"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + </li> +</ol> + +<p><font><font>এখানে একটি বুকমার্ক প্যানেলে ফ্যাভিকনের উদাহরণ রয়েছে:</font></font></p> + +<p><img alt="ফায়ারফক্স বুকমার্কস প্যানেল, পাশে একটি ফ্যাভিকন সহ একটি বুকমার্কড উদাহরণ দেখায়।" src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p><font><font>এই দিনগুলিতেও বিবেচনার জন্য প্রচুর অন্যান্য আইকন ধরণের রয়েছে। </font><font>উদাহরণস্বরূপ, আপনি এটি MDN ওয়েব ডক্স হোমপেজের উত্স কোডে পাবেন:</font></font></p> + +<pre class="notranslate"><!-- 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"></pre> + +<p><font><font>প্রতিটি আইকন কীসের জন্য ব্যবহৃত হয় তা মন্তব্যগুলিতে ব্যাখ্যা করা হয় - ওয়েবসাইটগুলি যখন কোনও আইপ্যাডের হোম স্ক্রিনে সংরক্ষণ করা হয় তখন এই উপাদানগুলি ব্যবহার করার জন্য একটি দুর্দান্ত উচ্চ রেজোলিউশন আইকন সরবরাহ করার মতো জিনিসগুলিকে আবরণ দেয়।</font></font></p> + +<p><font><font>এই মুহূর্তে আইকন এই ধরণের বাস্তবায়িত সম্পর্কে খুব বেশি চিন্তা করবেন না - এটি একটি মোটামুটি উন্নত বৈশিষ্ট্য, এবং আপনি কোর্সের মাধ্যমে অগ্রগতি সম্পর্কে এই জ্ঞান আশা করা হবে না। </font><font>এখানে মূল উদ্দেশ্য হ'ল অন্যান্য ওয়েবসাইটগুলির উত্স কোড ব্রাউজ করার সময় আপনি যদি সেগুলি জুড়ে আসেন তবে এই জাতীয় জিনিসগুলি কী তা আপনাকে জানানো।</font></font></p> + +<div class="note"> +<p><strong><font><font>দ্রষ্টব্য:</font></font></strong><font><font> আপনার সাইটটি এর সুরক্ষা বাড়ানোর জন্য যদি কোনও বিষয়বস্তু সুরক্ষা নীতি (সিএসপি) ব্যবহার করে, তবে নীতিটি ফেভিকনে প্রযোজ্য। </font><font>যদি আপনার ফেভিকনটি লোড না হওয়ার সমস্যা হয়, তবে যাচাই করুন যে {{HTTPHeader ("বিষয়বস্তু-সুরক্ষা-নীতি")}। শিরোনামের </font></font><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code><font><font>নির্দেশিকা এতে</font></font></a><font><font> অ্যাক্সেস রোধ করছে না।</font></font></p> +</div> + +<h2 id="এইচটিএমএলে_সিএসএস_এবং_জাভাস্ক্রিপ্ট_প্রয়োগ_করা_হচ্ছে"><font><font>এইচটিএমএলে সিএসএস এবং জাভাস্ক্রিপ্ট প্রয়োগ করা হচ্ছে</font></font></h2> + +<p><font><font>আপনি আধুনিক দিনে যে সমস্ত ওয়েবসাইট ব্যবহার করবেন সেগুলি সম্পর্কে {গ্লসারি ("সিএসএস")} emplo তাদের দুর্দান্ত দেখানোর জন্য এবং ভিডিও প্লেয়ারের মতো ইন্টারেক্টিভ কার্যকারিতা পাওয়ার জন্য {{গ্লসারি ("জাভাস্ক্রিপ্ট") y emplo নিযুক্ত করবে , মানচিত্র, গেমস এবং আরও অনেক কিছু। </font><font>এগুলি যথাক্রমে page t htmlelement ("লিঙ্ক")}} উপাদান এবং {{htmlelement ("স্ক্রিপ্ট")}} উপাদান ব্যবহার করে কোনও ওয়েব পৃষ্ঠায় সাধারণত প্রয়োগ করা হয়।</font></font></p> + +<ul> + <li> + <p><font><font>Document t htmlelement ("লিঙ্ক")}। উপাদানটি সর্বদা আপনার দস্তাবেজের মাথার অভ্যন্তরে প্রবেশ করা উচিত। </font></font><code>rel="stylesheet"</code><font><font>এটিতে </font><font>দুটি বৈশিষ্ট্য লাগে, </font><font>এটি নির্দেশ করে যে এটি নথির স্টাইলশিট এবং </font></font><code>href</code><font><font>, এতে স্টাইলশিট ফাইলের পথ রয়েছে:</font></font></p> + + <pre class="notranslate"><link rel="stylesheet" href="my-css-file.css"></pre> + </li> + <li> + <p><font><font>T t এইচটিএমলেলেট ("স্ক্রিপ্ট")}} উপাদানটিও মাথার মধ্যে যেতে হবে এবং </font></font><code>src</code><font><font>আপনার যে জাভাস্ক্রিপ্টটি লোড করতে চান তার পথ সম্বলিত </font><font>একটি </font><font>বৈশিষ্ট্য </font><font>অন্তর্ভুক্ত করা উচিত এবং </font><font>এটি </font></font><code>defer</code><font><font>মূলত ব্রাউজারকে একই সাথে জাভাস্ক্রিপ্ট লোড করার নির্দেশ দেয় which পৃষ্ঠার এইচটিএমএল হিসাবে। </font><font>এটি জাভাস্ক্রিপ্ট চলার আগে এইচটিএমএল সমস্ত লোড হয়েছে কিনা তা নিশ্চিত করে তোলে, যাতে আপনি জাভাস্ক্রিপ্টের ফলে এমন কোনও HTML উপাদান অ্যাক্সেস করার চেষ্টা করছেন যা এখনও পৃষ্ঠায় বিদ্যমান নেই ত্রুটি পেতে না পারেন। </font><font>আপনার পৃষ্ঠায় জাভাস্ক্রিপ্ট লোড হ্যান্ডেল করার বেশ কয়েকটি উপায় রয়েছে তবে আধুনিক ব্রাউজারগুলির জন্য এটি ব্যবহার করা সবচেয়ে বোকামী (অন্যদের জন্য </font></font><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies"><font><font>স্ক্রিপ্ট লোডিং কৌশলগুলি পড়ুন</font></font></a><font><font> )। </font></font></p> + + <pre class="notranslate"><script src="my-js-file.js" defer></script></pre> + + <div class="blockIndicator note"> + <p><strong><font><font>দ্রষ্টব্য</font></font></strong><font><font> : </font></font><code><script></code><font><font>উপাদানটি খালি উপাদানের মতো দেখতে পারে তবে এটি তা নয় এবং তাই একটি ক্লোজিং ট্যাগের প্রয়োজন। </font><font>কোনও বাহ্যিক স্ক্রিপ্ট ফাইলের দিকে ইঙ্গিত করার পরিবর্তে, আপনি নিজের স্ক্রিপ্টটিকে </font></font><code><script></code><font><font>উপাদানটির </font><font>ভিতরে রাখার পছন্দ করতে পারেন </font><font>।</font></font></p> + </div> + </li> +</ul> + +<h3 id="সক্রিয়_শিক্ষা_একটি_পৃষ্ঠায়_সিএসএস_এবং_জাভাস্ক্রিপ্ট_প্রয়োগ_করা"><font><font>সক্রিয় শিক্ষা: একটি পৃষ্ঠায় সিএসএস এবং জাভাস্ক্রিপ্ট প্রয়োগ করা</font></font></h3> + +<ol> + <li><font><font>এই সক্রিয় শেখা শুরু করার জন্য, আমাদের একটি কপি দখল </font></font><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html"><font><font>মেটা-example.html</font></font></a><font><font> , </font></font><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js"><font><font>script.js</font></font></a><font><font> এবং </font></font><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css"><font><font>style.css</font></font></a><font><font> ফাইল, এবং একই ডিরেক্টরির মধ্যে আপনার কম্পিউটারে সংরক্ষণ করুন। </font><font>এগুলি সঠিক নাম এবং ফাইল এক্সটেনশনের সাহায্যে সংরক্ষিত হয়েছে তা নিশ্চিত করুন।</font></font></li> + <li><font><font>আপনার ব্রাউজার এবং আপনার পাঠ্য সম্পাদক উভয়ই HTML ফাইল খুলুন।</font></font></li> + <li><font><font>উপরের বর্ণিত তথ্য অনুসরণ করে আপনার HTML এ t t htmlelement ("লিঙ্ক")}} এবং {{htmlelement ("স্ক্রিপ্ট")}} উপাদান যুক্ত করুন, যাতে আপনার সিএসএস এবং জাভাস্ক্রিপ্ট আপনার HTML এ প্রয়োগ হয়।</font></font></li> +</ol> + +<p><font><font>যদি সঠিকভাবে সম্পন্ন করা হয়, আপনি যখন আপনার এইচটিএমএল সংরক্ষণ করেন এবং আপনার ব্রাউজারটি রিফ্রেশ করেন তখন আপনাকে দেখতে পারা উচিত যে জিনিসগুলি পরিবর্তিত হয়েছে:</font></font></p> + +<p><img alt="সিএসএস এবং জাভাস্ক্রিপ্ট সহ কোনও পৃষ্ঠা দেখানো উদাহরণ এটিতে প্রয়োগ করা হয়েছে। সিএসএস পৃষ্ঠাটিকে সবুজ করে তুলেছে, যেখানে জাভাস্ক্রিপ্ট পৃষ্ঠায় একটি গতিশীল তালিকা যুক্ত করেছে।" src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li><font><font>জাভাস্ক্রিপ্ট পৃষ্ঠাটিতে একটি খালি তালিকা যুক্ত করেছে। </font><font>এখন আপনি যখন তালিকার যে কোনও জায়গায় ক্লিক করুন, একটি ডায়ালগ বক্স পপ আপ হবে যাতে আপনাকে একটি নতুন তালিকা আইটেমের জন্য কিছু পাঠ্য লিখতে বলবে। </font><font>আপনি যখন ওকে বোতাম টিপেন, পাঠ্যযুক্ত তালিকায় একটি নতুন তালিকা আইটেম যুক্ত হবে। </font><font>আপনি যখন বিদ্যমান তালিকা আইটেমটিতে ক্লিক করেন, তখন একটি ডায়ালগ বক্স পপ আপ হয়ে যায় যা আপনাকে আইটেমটির পাঠ্য পরিবর্তন করতে দেয়।</font></font></li> + <li><font><font>সিএসএসের ফলে পটভূমি সবুজ হয়ে গেছে এবং পাঠ্যটি আরও বড় হয়েছে। </font><font>এটি জাভাস্ক্রিপ্ট পৃষ্ঠাটিতে যুক্ত করা কিছু সামগ্রীর স্টাইলও করেছে (কালো সীমান্তের সাথে লাল বারটি স্টাইলিংটি সিএসএস জেএস-উত্পন্ন তালিকাতে যুক্ত করেছে।)</font></font></li> +</ul> + +<div class="note"> +<p><strong><font><font>দ্রষ্টব্য</font></font></strong><font><font> : আপনি যদি এই অনুশীলনে আটকে যান এবং সিএসএস / জেএস প্রয়োগ করতে না পারেন তবে আমাদের </font></font><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html"><font><font>সিএসএস এবং জেএসএইচটিএমএল</font></font></a><font><font> উদাহরণ পৃষ্ঠাটি পরীক্ষা করে দেখুন।</font></font></p> +</div> + +<h2 id="নথির_প্রাথমিক_ভাষা_সেট_করা_হচ্ছে"><font><font>নথির প্রাথমিক ভাষা সেট করা হচ্ছে</font></font></h2> + +<p><font><font>শেষ অবধি, এটি উল্লেখ করার মতো যে আপনি নিজের পৃষ্ঠার ভাষা সেট করতে (এবং সত্যই হওয়া উচিত)। </font><font>খোলার এইচটিএমএল ট্যাগে </font></font><a href="/en-US/docs/Web/HTML/Global_attributes/lang"><font><font>ল্যাং বৈশিষ্ট্য</font></font></a><font><font> যুক্ত করে এটি করা যেতে পারে </font><font>( </font></font><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html"><font><font>মেটা-উদাহরণ html তে</font></font></a><font><font> দেখানো হয়েছে এবং নীচে দেখানো হয়েছে))</font></font></p> + +<pre class="brush: html notranslate"><font><font><html lang = "en-US"></font></font></pre> + +<p><font><font>এটি বিভিন্ন উপায়ে কার্যকর। </font><font>আপনার এইচটিএমএল ডকুমেন্টটি অনুসন্ধানের ইঞ্জিনগুলির দ্বারা আরও কার্যকরভাবে ইনডেক্স করা হবে যদি এটির ভাষা সেট করা থাকে (উদাহরণস্বরূপ ভাষা-নির্দিষ্ট ফলাফলগুলিতে এটি সঠিকভাবে উপস্থিত হতে দেয়), এবং স্ক্রিন পাঠক ব্যবহার করে ভিজ্যুয়াল অক্ষমতাযুক্ত ব্যক্তিদের জন্য এটি দরকারী (উদাহরণস্বরূপ, শব্দটি "ছয়" ফরাসি এবং ইংরেজি উভয় ক্ষেত্রেই বিদ্যমান, তবে এটি আলাদাভাবে উচ্চারণ করা হয়))</font></font></p> + +<p><font><font>আপনি আলাদা আলাদা ভাষা হিসাবে স্বীকৃতি পেতে আপনার দস্তাবেজের সাব-বিভাগগুলিও সেট করতে পারেন। </font><font>উদাহরণস্বরূপ, আমরা আমাদের জাপানি ভাষার বিভাগটি জাপানি হিসাবে স্বীকৃতি হিসাবে সেট করতে পারি:</font></font></p> + +<pre class="notranslate"><p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p></pre> + +<p><font><font>এই কোডগুলি </font></font><a href="https://en.wikipedia.org/wiki/ISO_639-1"><font><font>আইএসও 639-1</font></font></a><font><font> স্ট্যান্ডার্ড </font><font>দ্বারা সংজ্ঞায়িত করা হয়েছে </font><font>। </font><font>আপনি </font></font><a href="https://www.w3.org/International/articles/language-tags/"><font><font>এইচটিএমএল এবং এক্সএমএলে ভাষা ট্যাগগুলিতে</font></font></a><font><font> তাদের সম্পর্কে আরও জানতে পারেন </font><font>।</font></font></p> + +<h2 id="সারসংক্ষেপ"><font><font>সারসংক্ষেপ</font></font></h2> + +<p><font><font>এটি এইচটিএমএল হেডের আমাদের কুইকফায়ার সফরের সমাপ্তি চিহ্নিত করে - আপনি এখানে আরও অনেক কিছু করতে পারেন তবে একটি বিস্তৃত ভ্রমণ এই পর্যায়ে বিরক্তিকর এবং বিভ্রান্তিকর হবে এবং আমরা আপনাকে সর্বাধিক সাধারণ বিষয় সম্পর্কে ধারণা দিতে চাইছিলাম আপনি আপাতত সেখানে খুঁজে পাবেন! </font><font>পরবর্তী নিবন্ধে আমরা এইচটিএমএল পাঠ্যের মূল বিষয়গুলি খুঁজছি।</font></font></p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="এই_মডিউলটিতে"><font><font>এই মডিউলটিতে</font></font></h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started"><font><font>এইচটিএমএল দিয়ে শুরু করা</font></font></a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML"><font><font>মাথায় কি আছে? </font><font>এইচটিএমএলে মেটাডেটা</font></font></a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"><font><font>এইচটিএমএল পাঠ্য মৌলিক</font></font></a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks"><font><font>হাইপারলিঙ্ক তৈরি করা</font></font></a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting"><font><font>উন্নত পাঠ্য বিন্যাস</font></font></a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"><font><font>নথি এবং ওয়েবসাইট কাঠামো</font></font></a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML"><font><font>ডিবাগিং এইচটিএমএল</font></font></a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter"><font><font>একটি চিঠি চিহ্নিত করা</font></font></a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content"><font><font>সামগ্রীর একটি পৃষ্ঠা গঠন</font></font></a></li> +</ul> 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 +--- +<div class="summary"> +<p><u><strong id="docs-internal-guid-882eb067-dfbc-b1a1-15fd-8230d416ac78">আপনি কি আপনার নিজের ওয়েবসাইট বা ওয়েব এ্যাপ বানাতে চান ? আপনি একেবারে সঠিক জায়গায়তেই এসেছেন।</strong></u></p> +</div> + +<p><font face="FreeSans"><font face="SolaimanLipi">ওয়েব ডিজাইন এবং ডেভলোপমেন্ট শিখতে বেশ কিছু জানতে হয়</font></font><font face="SolaimanLipi">, </font><font face="FreeSans"><font face="SolaimanLipi">তবে এটি তেমন চিন্তার বিষয় নয়। এখানে আমরা আপনার সহযোগীতায় আছি </font></font><font face="SolaimanLipi">, </font><font face="FreeSans"><font face="SolaimanLipi">যেখানে আপনি শুধু কিছু কোড বেছে নিবেন আর দেখবেন ধীরে ধীরে আপনি একজন দক্ষ্য পেশাদারী ডেভলোপার এর পরিনত হয়ে যাবেন ।</font></font></p> + +<h2 id="কোথায়_থেকে_শুরু_করতে_চান">কোথায় থেকে শুরু করতে চান?</h2> + +<p><font face="FreeSans"><font face="SolaimanLipi">আপনি যেখানেই যেতে চান আমরা আপনার সাথে সেখানেই নিয়ে যাব । কোন বিবরনটি আপনার কাছে বেশি সুবিধা জনক </font></font><font face="SolaimanLipi">?</font><strong> </strong></p> + +<ul class="card-grid"> + <li><strong id="docs-internal-guid-7da75c9c-dfcb-0613-512e-903b8f31af91">আমি </strong><strong>একজন অনভিজ্ঞ</strong> + + <p><font face="FreeSans"><font face="SolaimanLipi">স্বাগতম</font></font><font face="SolaimanLipi">!! </font><font face="FreeSans"><font face="SolaimanLipi">আমাদের এই সিরিজটি</font></font> <a href="/en-US/Learn/Getting_started_with_the_web">"যেভাবে ওয়েব শেখা শুরু করবেন "</a> এটা<font face="FreeSans"><strong><font face="SolaimanLipi"> </font></strong><font face="SolaimanLipi">দিয়ে শুরু করতে পারেন । এটা আপনাকে ওয়েব ডেভলোপমেন্ট এর সাধারন বিষয় বস্তু এর ধারণা প্রদান করবে যা আমি কাজে লাগাতে পারবে ।</font></font></p> + </li> + <li><strong id="docs-internal-guid-7da75c9c-dfca-c553-2f44-21afe2603352">আমি ওয়েব সম্বন্ধে জানি</strong> + <p><strong id="docs-internal-guid-882eb067-e8e4-cce6-30f2-0bb4764ccf68"> </strong><font face="FreeSans"><font face="SolaimanLipi">খুবই আনন্দের</font></font><font face="SolaimanLipi">!! </font><font face="FreeSans"><font face="SolaimanLipi">সেই ক্ষেত্রে আমরা আপনাকে ওয়েব এর একন্তু মূল বিষয়গুলোর গভির জ্ঞান লাভের জন্য পরামর্শ প্রদান করব । </font></font><a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, এবং <a href="/en-US/docs/Learn/JavaScript">JavaScript</a></p> + </li> + <li><strong id="docs-internal-guid-7da75c9c-dfcc-5d84-9629-bb0fffa3c10c">আমি ওয়েব এর ব্যাপারে বিশেষজ্ঞ</strong> + <p>Amazing! In that case, you may be interested in exploring our advanced <a href="/en-US/docs/Web/Guide">Guides</a> and <a href="/en-US/docs/Web/Tutorials">Tutorials</a>. You should also consider <a href="/en-US/Learn/How_to_contribute">contributing to the Learning Area</a>. ;)</p> + </li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<p>{{LearnBox({"title":"Quick learning: Vocabulary"})}}</p> + +<h2 id="অন্যান্য_জনের_সাথে_শিখুন">অন্যান্য জনের সাথে শিখুন</h2> + +<p> যদি আপনার কিছু জানার থাকে 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:</p> + +<ul> + <li>মেন্টর ও শিক্ষকদের সাথে কথা বলতে এবং দেখা করতে <a href="http://discourse.webmaker.org/" rel="external">ডিসকোর্স ফোরাম</a> এ আসুন।</li> + <li><a href="https://events.webmaker.org/">ইভেন্ট খুঁজুন</a> and learn the web with awesome folks.</li> +</ul> + +<h2 id="Sharing_knowledge">Sharing knowledge</h2> + +<p>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 <a href="/en-US/Learn/How_to_contribute">how you can help</a>, and we encourage you to chat with us on our <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">mailing lists</a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>. :)</p> + +<dl> + <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt> + <dd>মেন্টরশিপ এবং প্রকল্প ভিত্তিক শেখার সঙ্গে, প্রযুক্তি দক্ষতা দক্ষতা জন্য বিনামূল্যে এবং খোলা কোর্স</dd> +</dl> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the web</a></li> + <li><a href="/en-US/Learn/Skills">Learn the web</a> + <ol> + <li><a href="https://webmaker.org/en-US/literacy" rel="external">Web Literacy Map</a></li> + <li><a href="/en-US/Learn/Web_Mechanics">Web mechanics</a></li> + <li><a href="/en-US/Learn/Infrastructure">Infrastructure</a></li> + <li><a href="/en-US/Learn/Coding-Scripting">Coding & Scripting</a></li> + <li><a href="/en-US/Learn/Design_and_Accessibility">Design & Accessibility</a></li> + <li><a href="/en-US/Learn/Composing_for_the_web">Writing & planning</a></li> + </ol> + </li> + <li><a href="#">Learn technologies</a> + <ol> + <li><a href="/en-US/Learn/HTML">HTML</a></li> + <li><a href="/en-US/Learn/CSS">CSS</a></li> + <li><a href="/en-US/Learn/JavaScript">JavaScript</a></li> + <li><a href="/en-US/Learn/Python">Python</a></li> + </ol> + </li> + <li><a href="/en-US/Learn/tutorial">Learning tutorials</a> + <ol> + <li><a href="/en-US/Learn/tutorial/How_to_build_a_web_site">How to build a web site?</a></li> + <li><a href="/en-US/Learn/tutorial/Information_Security_Basics">Information security basics</a></li> + </ol> + </li> + <li><a href="http://weblitmapper.webmakerprototypes.org/">Learning resources</a></li> + <li><a href="/en-US/Learn/help">Getting help</a> + <ol> + <li><a href="/en-US/Learn/FAQ">FAQ</a></li> + <li><a href="/en-US/docs/Glossary">Glossary</a></li> + <li><a href="http://discourse.webmakerprototypes.org/" rel="external">Ask your questions</a></li> + <li><a href="https://events.webmaker.org/" rel="external">Meet teachers and mentors</a></li> + </ol> + </li> + <li><a href="/en-US/Learn/How_to_contribute">How to contribute</a></li> +</ol> 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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">আমাদের প্রথম জাভাস্ক্রিপ্ট মডিউলে আমরা কিছু ভৌত প্রশ্নের উত্তর দিব, যেমন "জাভাস্ক্রিপ্ট কি?" , "এটা কেমন দেখতে?" , "এটা কি করতে পারে?" । আপনাকে আপনার প্রথম জাভাস্ক্রিপ্ট লেখার বাস্তব অভিজ্ঞতার মধ্য দিয়ে নিয়ে যাওয়ার আগে আমরা এগুলো শিখবো। তারপর আমরা কিছু কি বিল্ডিং ব্লক নিয়ে বিশদে আলোচনা করবো, যেমন ভ্যারিয়েবল, স্ট্রিং, নাম্বার এবং array ।</p> + +<h2 id="পূর্বশর্ত">পূর্বশর্ত </h2> + +<p>এই মডিউল শুরু করার পূর্বে আপনার জাভাস্ক্রিপ্ট এর উপর কোনো পূর্ব অভিজ্ঞতা থাকা আবশ্যক নয়, কিন্তু আপনার HTML ও CSS এর সাথে পরিচিতি থাকতে হবে। আপনাকে জাভাস্ক্রিপ্ট শুরু করার পূর্বে নিম্নের মডিউলগুলোর মধ্য দিয়ে কাজ শুরু করার পরামর্শ দেওয়া হচ্ছে। </p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> (which includes a really <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">basic JavaScript introduction</a>).</li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li> +</ul> + +<div class="note"> +<p><strong>বিঃদ্রঃ </strong>: আপনি যদি এমন একটি কম্পিউটার/ট্যাবলেট কিংবা অন্যান্য ডিভাইসে কাজ করেন যেখানে আপনার নিজের কোনো ফাইল তৈরী করা সম্ভব নয়, সেক্ষেত্রে আপনার তৈরী করা কোডগুলো নিয়ে গবেষণা করতে পারেন অনলাইন কোডিং প্রোগ্রামগুলোতে যেমন <a href="http://jsbin.com/">JSBin</a> অথবা <a href="https://thimble.mozilla.org/">Thimble</a>। </p> +</div> + +<h2 id="গাইড">গাইড</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">জাভাস্ক্রিপ্ট কি?</a></dt> + <dd>নবীন শিক্ষার্থীদের জন্য আয়োজিত MDN এর জাভাস্ক্রিপ্ট কোর্সে আপনাকে স্বাগতম। এই প্রথম আর্টিকেলে আমরা জাভাস্ক্রিপ্টকে উঁচু স্তর থেকে দেখবো। আমরা উত্তর দেব "এটা কি?" , এবং "এটা কি করছে?" এবং নিশ্চিত করবো যে আপনি জাভাস্ক্রিপ্ট এর উদ্দেশ্য নিয়ে সাচ্ছন্দবোধ করছেন। </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">জাভাস্ক্রিপ্ট এর প্রথম ঝলক</a></dt> + <dd>এখন আপনি জাভাস্ক্রিপ্ট সম্পর্কে কিছু তত্ত্ব শিখেছেন এবং আপনি জানেন আপনি এটা দিয়ে কি করতে পারবেন। আমরা আপনাকে একটি সংক্ষিপ্ত কোর্সে সম্পূর্ণ প্রাকটিকাল টিউটোরিয়াল এর মাধ্যমে জাভাস্ক্রিপ্টের ভৌত বৈশিষ্টগুলো শেখাবো। এখানে ধাপে ধাপে আপনি "Guess the number" নামের একটি সাধারণ গেম তৈরী করবেন। </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">কি সমস্যা হলো? জাভাস্ক্রিপ্ট মেরামত</a></dt> + <dd>পূর্বের আর্টিকেলে যখন আপনি "Guess the number" গেমটি তৈরী করেছিলেন তখন নিশ্চয়ই খেয়াল করেছিলেন যে এটা কাজ করছিলো না। ভয় পাওয়ার দরকার নেই - এই আর্টিকেল সেই উদ্দেশ্য নিয়ে লেখা হয়েছে কিছু সাধারণ টিপস সহকারে যাতে আপনি সহজে জাভাস্ক্রিপ্ট প্রোগ্রামের সমস্যা নির্ণয় করতে পারেন ও তার সমাধান করতে পারেন। </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">আপনার দরকারি তথ্য Storing (সংরক্ষণ) করা — Variables (চলক)</a></dt> + <dd>পূর্বের গুটিকতক আর্টিকেল পড়ার পরে আপনার এখন জানা উচিত জাভাস্ক্রিপ্ট কি, এটা আপনার জন্য কি করতে পারে, অন্যান্য ওয়েব টেকনোলজির পাশাপাশি আপনি এটাকে কিভাবে ব্যবহার করতে পারেন, এবং এটার মূল বৈশিষ্ট উঁচু স্তর থেকে দেখতে কেমন লাগে। এই আর্টিকেলে আমরা একেবারে মৌলিক বিষয় দেখবো যেটা হলো জাভাস্ক্রিপ্টের প্রথম মৌলিক বিল্ডিং ব্লক - Variables (চলক)। </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">জাভাস্ক্রিপ্ট এর মৌলিক গণিত — numbers and operators</a></dt> + <dd>এই মুহূর্তে আমরা আলোচনা করবো জাভাস্ক্রিপ্টের গণিত নিয়ে - আমরা কিভাবে অপারেটর একত্র করতে পারি কিভাবে নাম্বারকে আমাদের আদেশ পালন করার জন্য পরিচালনা করতে পারি। </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">টেক্সট সামলানো — strings in JavaScript</a></dt> + <dd>পরবর্তীতে আমরা আমাদের মনোযোগ ঘোরাবো স্ট্রিং এর দিকে - টেক্সট এর টুকরাকে প্রোগ্রামিংয়ের ভাষায় এটাই বলা হয়ে থাকে। এই আর্টিকেলে আমরা সেই সবকিছু দেখবো যেটা জাভাস্ক্রিপ্ট শেখার সময় স্ট্রিং সম্পর্কে আপনার জানা থাকার দরকার, যেমন স্ট্রিং তৈরী, স্ট্রিং থেকে কোটেশন এর মুক্তি এবং তাদেরকে একত্র করা। </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">সুবিধাজনক স্ট্রিং মেথড</a></dt> + <dd>এখন আমরা দেখলাম স্ট্রিং এর একেবারে মৌলিক বিষয়গুলো, এখন একটু গতি বাড়িয়ে চিন্তা করে দেখা যাক বিল্ট-ইন মেথড ব্যবহার করে স্ট্রিং এর উপর কি ধরণের লাভজনক অপারেশন করা যেতে পারে, যেমন একটি স্ট্রিং এর দৈর্ঘ্য পরিমাপ করা, স্ট্রিং একত্র ও পৃথক করা, স্ট্রিং এর একটি অক্ষর অন্যটির জন্য বাদ দেওয়া, এবং আরো অনেক কিছু। </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt> + <dd>এই মডিউলের সর্বশেষ আর্টিকেলে আমরা দেখবো Array - একটিমাত্র চলকের মধ্যে একটি ডাটার তালিকা সংরক্ষণ করার সহজ উপায়। এখানে আমরা দেখবো কেন এটি সুবিধাজনক, তারপর দেখবো কিভাবে একটি Array তৈরী করতে হয়, Array পুনরুদ্ধার, সংযোজন এবং Array এর তালিকা থেকে আইটেম বিয়োজন, এবং এর পাশাপাশি আরো অনেক কিছু। </dd> +</dl> + +<h2 id="মূল্যায়ন">মূল্যায়ন</h2> + +<p>নিচের কাজটি থেকে মূল্যায়ন করা হবে আপনি উপরের জাভাস্ক্রিপ্ট কোর্সের গাইড অনুসরণ করে কি শিখেছেন। </p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">মজাদার গল্প উৎপাদক</a></dt> + <dd>এই মূল্যায়নে আপনাকে একটি কাজ দেওয়া হবে, মডিউলগুলো থেকে কিছু শিখে আপনাকে একটি মজাদার App বানাতে হবে যেটা মজাদার গল্প তৈরী করে। শুভেচ্ছা রইলো !</dd> +</dl> 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..f42a4814cc --- /dev/null +++ b/files/bn/learn/javascript/first_steps/জাভাস্ক্রিপ্ট-কী/index.html @@ -0,0 +1,421 @@ +--- +title: জাভাস্ক্রিপ্ট কী? +slug: Learn/JavaScript/First_steps/জাভাস্ক্রিপ্ট-কী +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">মোজিলা ডেভেলপার নেটওয়ার্ক এর প্রাথমিক জাভাস্ক্রিপ্ট এর কোর্সে স্বাগতাম! এই লেখায় আমরা জাভাস্ক্রিপ্টকে গভীরভাবে জানব, কিছু প্রশ্ন নিয়ে আলোচনা করব যেমন "জাভাস্ক্রিপ্ট কী" এবং "জাভাস্ক্রিপ্ট দিয়ে কী করা যায়?", সেই সাথে সহজভাবে কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করতে সেটাও শিখব।</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">আগে থেকে যা জানতে হবে</th> + <td>কম্পিউটার </td> + </tr> + <tr> + <th scope="row">উদ্দেশ্য:</th> + <td>জাভাস্ক্রিপ্ট এর সাথে পরিচিতি,</td> + </tr> + </tbody> +</table> + +<h2 id="জাভস্ক্রিপ্ট_এর_পূর্ণাঙ্গ_সংজ্ঞা">জাভস্ক্রিপ্ট এর পূর্ণাঙ্গ সংজ্ঞা</h2> + +<p>জাভাস্ক্রিপ্ট মূলত একটি scripting ভাষা বা programming ভাষা। জাভাস্ক্রিপ্ট ব্যবহার করে ওয়েবসাইটে জটিল বৈশিষ্ট্য যুক্ত করা যায় যেমন নির্দিষ্ট সময় অনু্যায়ী কনটেন্ট পরিবর্তন করা, মানচিত্র যোগ করা ওয়েবসাইটে 2D/3D animation যুক্ত করা ইত্যাদি। নিচের ওয়েব প্রযুক্তি রূপক যে কেক আছে সেটার তৃতীয় স্তর হচ্ছে জাভাস্ক্রিপ্ট। </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>{{glossary("HTML")}} হচ্ছে মার্ক আপ ভাষা। এই ভাষা ব্যবহার করে ওয়েব সাইট তৈরী করা হয় এবং ওয়েবসাইটের কনটেন্ট এ অর্থবহ করা হয়। যেমন পেইজে প্যারগ্রাফ, শিরোনাম, ডাটা টেবি অথবা ছবি বা ভিডিও যুক্ত করা ইত্যাদি। </li> + <li>{{glossary("CSS")}} দিয়ে HTML এর কনটেন্ট এর সাথে স্টাইল যুক্ত করা হয় যাতে ওয়েবসাইট টা দৃষ্টিনন্দন হয়। যেমন ব্যাকগ্রাউন্ড এ রঙ যুক্ত করা, ফন্ট নিয়ে কাজ করা, ওয়েবসাইটের কলামকে বিভিন্ন কলামে ঠিক করা ইত্যাদি।</li> + <li>{{glossary("JavaScript")}} একটি scripting ভাষা। Scripting ভাষা হচ্ছে একটি প্রোগ্রামিং ভাষা যেটি interpreter ব্যবহার করে কোড রান করে। জাভাস্ক্রিপ্ট ব্যবহার করে সক্রিয়ভাবে কনটেন্ট পরিবর্তন, মাল্টিমিডিয়ার নিয়ন্ত্রণ, ছবির এনিমেশন, এবং আরও অনেক কাজ করা যায়। </li> +</ul> + +<p>তিনটা পর্যায় একটি আরেকটির উপর সুন্দরভাবে তৈরি। উদাহরণস্বরূপ নিচের টেক্সটটিকে দেখা যাক। HTML ব্যবহার করে আমরা লেখাটিকে মার্ক আপ করবঃ </p> + +<pre class="brush: html notranslate"><p>Player 1: Chris</p></pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p> + +<p>তারপর লেখাটিকে সুন্দর করার জন্য আমরা কিছু CSS যোগ করবঃ</p> + +<pre class="brush: css notranslate">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; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p> + +<p>এবং সবশেষে আমরা জাভাস্ক্রিপ্ট ব্যবহার করে কনটেন্ট যুক্ত করবঃ </p> + +<pre class="brush: js notranslate">const para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + let name = prompt('Enter a new name'); + para.textContent = 'Player 1: ' + name; +} +</pre> + +<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>কী ঘটছে তা দেখার জন্য লেখাটির সর্বশেষ সংস্করনে ক্লিক করে দেখুন (উল্লেখ্য আপনি এই ডেমোটা GitHub এও পাবেন — <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">সোর্স কোড দেখুন</a>, অথবা <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html"> সরাসরি চালিয়ে দেখুন </a>)!</p> + +<p>জাভাস্ক্রিপ্ট আরো অনেক কিছু করতে পারে - বিস্তারিত জেনে নেওয়া যাক। </p> + +<h2 id="জাভাস্ক্রিপ্ট_প্রকৃতভাবে_কী_কী_করতে_পারে">জাভাস্ক্রিপ্ট প্রকৃতভাবে কী কী করতে পারে? </h2> + +<p>মূল client-side জাভাস্ক্রিপ্ট সাধারণ কিছু প্রোগ্রামিং বৈশিষ্ট্য নিয়ে তৈরি যা দিয়ে আপনি নিচের </p> + +<ul> + <li>Store useful values inside variables. In the above example for instance, we ask for a new name to be entered then store that name in a variable called <code>name</code>.</li> + <li>Operations on pieces of text (known as "strings" in programming). In the above example we take the string "Player 1: " and join it to the <code>name</code> variable to create the complete text label, e.g. ''Player 1: Chris".</li> + <li>Running code in response to certain events occurring on a web page. We used a {{Event("click")}} event in our example above to detect when the button is clicked and then run the code that updates the text label.</li> + <li>And much more!</li> +</ul> + +<p>What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called <strong>Application Programming Interfaces</strong> (<strong>APIs</strong>) provide you with extra superpowers to use in your JavaScript code.</p> + +<p>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 <em>then</em> put them together to make a bookshelf.</p> + +<p>They generally fall into two categories.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> + +<p><strong>Browser APIs</strong> are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:</p> + +<ul> + <li>The {{domxref("Document_Object_Model","DOM (Document Object Model) API")}} allows you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, etc. Every time you see a popup window appear on a page, or some new content displayed (as we saw above in our simple demo) for example, that's the DOM in action.</li> + <li>The {{domxref("Geolocation","Geolocation API")}} retrieves geographical information. This is how <a href="https://www.google.com/maps">Google Maps</a> is able to find your location and plot it on a map.</li> + <li>The {{domxref("Canvas_API","Canvas")}} and {{domxref("WebGL_API","WebGL")}} APIs allow you to create animated 2D and 3D graphics. People are doing some amazing things using these web technologies —see <a href="https://www.chromeexperiments.com">Chrome Experiments</a> and <a href="http://webglsamples.org/">webglsamples</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a> like {{domxref("HTMLMediaElement")}} and {{domxref("WebRTC API", "WebRTC")}} allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a> to get the idea).</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: 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 <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a> in more detail when you get closer to delivering production code (i.e. real code that real customers will use).</p> +</div> + +<p><strong>Third party APIs</strong> 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:</p> + +<ul> + <li>The <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> allows you to do things like displaying your latest tweets on your website.</li> + <li>The <a href="https://developers.google.com/maps/">Google Maps API</a> and <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a> allows you to embed custom maps into your website, and other such functionality.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: 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 <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a>.</p> +</div> + +<p>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!</p> + +<h2 id="What_is_JavaScript_doing_on_your_page">What is JavaScript doing on your page?</h2> + +<p>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.</p> + +<p>Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> 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).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p> + +<p>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 <a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies">Script loading strategies</a> section.</p> + +<h3 id="Browser_security">Browser security</h3> + +<p>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.</p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<h3 id="JavaScript_running_order">JavaScript running order</h3> + +<p>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:</p> + +<pre class="brush: js notranslate">const para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + let name = prompt('Enter a new name'); + para.textContent = 'Player 1: ' + name; +}</pre> + +<p>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 <code>updateName()</code> code block (lines 5–8) is run. The <code>updateName()</code> 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.</p> + +<p>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 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer console</a> — <code>TypeError: para is undefined</code>. This means that the <code>para</code> object does not exist yet, so we can't add an event listener to it.</p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<h3 id="Interpreted_versus_compiled_code">Interpreted versus compiled code</h3> + +<p>You might hear the terms <strong>interpreted</strong> and <strong>compiled</strong> 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.</p> + +<p>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.</p> + +<p>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 <strong>just-in-time compiling</strong> 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.</p> + +<p>There are advantages to both types of language, but we won't discuss them right now.</p> + +<h3 id="Server-side_versus_client-side_code">Server-side versus client-side code</h3> + +<p>You might also hear the terms <strong>server-side</strong> and <strong>client-side</strong> 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 <strong>client-side JavaScript</strong>.</p> + +<p>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 <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> topic.</p> + +<h3 id="Dynamic_versus_static_code">Dynamic versus static code</h3> + +<p>The word <strong>dynamic</strong> 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.</p> + +<p>A web page with no dynamically updating content is referred to as <strong>static</strong> — it just shows the same content all the time.</p> + +<h2 id="How_do_you_add_JavaScript_to_your_page">How do you add JavaScript to your page?</h2> + +<p>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.</p> + +<h3 id="Internal_JavaScript">Internal JavaScript</h3> + +<ol> + <li>First of all, make a local copy of our example file <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Save it in a directory somewhere sensible.</li> + <li>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.</li> + <li>Next, go to your text editor and add the following in your head — just before your closing <code></head></code> tag: + <pre class="brush: html notranslate"><script> + + // JavaScript goes here + +</script></pre> + </li> + <li>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: + <pre class="brush: js notranslate">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); + } +});</pre> + </li> + <li>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.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: 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 <code>.html</code> file? Did you add your {{htmlelement("script")}} element just before the <code></head></code> tag? Did you enter the JavaScript exactly as shown? <strong>JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.</strong></p> +</div> + +<div class="note"> +<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">see it live too</a>).</p> +</div> + +<h3 id="External_JavaScript">External JavaScript</h3> + +<p>This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.</p> + +<ol> + <li>First, create a new file in the same directory as your sample HTML file. Call it <code>script.js</code> — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.</li> + <li>Replace your current {{htmlelement("script")}} element with the following: + <pre class="brush: html notranslate"><script src="script.js" defer></script></pre> + </li> + <li>Inside <code>script.js</code>, add the following script: + <pre class="brush: js notranslate">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); +}</pre> + </li> + <li>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.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">see it live too</a>).</p> +</div> + +<h3 id="Inline_JavaScript_handlers">Inline JavaScript handlers</h3> + +<p>Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:</p> + +<div id="inline_js_example"> +<pre class="brush: js example-bad notranslate">function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); +}</pre> + +<pre class="brush: html example-bad notranslate"><button onclick="createParagraph()">Click me!</button></pre> +</div> + +<p>You can try this version of our demo below.</p> + +<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline <code>onclick</code> handler to make the function run when the button is pressed.</p> + +<p><strong>Please don't do this, however.</strong> It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the <code>onclick="createParagraph()"</code> attribute on every button you want the JavaScript to apply to.</p> + +<p>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:</p> + +<pre class="brush: js notranslate">const buttons = document.querySelectorAll('button'); + +for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<p>This might be a bit longer than the <code>onclick</code> 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.</p> + +<div class="note"> +<p><strong>Note</strong>: Try editing your version of <code>apply-javascript.html</code> 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?</p> +</div> + +<h3 id="Script_loading_strategies">Script loading strategies</h3> + +<p>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 <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Document Object Model</a>), your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.</p> + +<p>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.</p> + +<p>In the internal example, you can see this structure around the code:</p> + +<pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() { + ... +});</pre> + +<p>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 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">learn about events</a> later in the course).</p> + +<p>In the external example, we use a more modern JavaScript feature to solve the problem, the <code>defer</code> attribute, which tells the browser to continue downloading the HTML content once the <code><script></code> tag element has been reached.</p> + +<pre class="brush: js notranslate"><script src="script.js" defer></script></pre> + +<p>In this case both the script and the HTML will load simultaneously and the code will work.</p> + +<div class="note"> +<p><strong>Note</strong>: In the external case, we did not need to use the <code>DOMContentLoaded</code> event because the <code>defer</code> attribute solved the problem for us. We didn't use the <code>defer</code> solution for the internal JavaScript example because <code>defer</code> only works for external scripts.</p> +</div> + +<p>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 <code></body></code> 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.</p> + +<h4 id="async_and_defer">async and defer</h4> + +<p>There are actually two modern features we can use to bypass the problem of the blocking script — <code>async</code> and <code>defer</code> (which we saw above). Let's look at the difference between these two.</p> + +<p>Scripts loaded using the <code>async</code> 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 <code>async</code> when the scripts in the page run independently from each other and depend on no other script on the page.</p> + +<p>For example, if you have the following script elements:</p> + +<pre class="brush: html notranslate"><script async src="js/vendor/jquery.js"></script> + +<script async src="js/script2.js"></script> + +<script async src="js/script3.js"></script></pre> + +<p>You can't rely on the order the scripts will load in. <code>jquery.js</code> may load before or after <code>script2.js</code> and <code>script3.js</code> and if this is the case, any functions in those scripts depending on <code>jquery</code> will produce an error because <code>jquery</code> will not be defined at the time the script runs.</p> + +<p><code>async</code> 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.</p> + +<p>Scripts loaded using the <code>defer</code> 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:</p> + +<pre class="brush: html notranslate"><script defer src="js/vendor/jquery.js"></script> + +<script defer src="js/script2.js"></script> + +<script defer src="js/script3.js"></script></pre> + +<p>All the scripts with the <code>defer</code> attribute will load in the order they appear on the page. So in the second example, we can be sure that <code>jquery.js</code> will load before <code>script2.js</code> and <code>script3.js</code> and that <code>script2.js</code> will load before <code>script3.js</code>. 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).</p> + +<p>To summarize:</p> + +<ul> + <li><code>async</code> and <code>defer</code> both instruct the browser to download the script(s) in a separate thread, while the rest of the page (the DOM, etc.) is downloading, so the page loading is not blocked by the scripts.</li> + <li>If your scripts should be run immediately and they don't have any dependencies, then use <code>async</code>.</li> + <li>If your scripts need to wait for parsing and depend on other scripts and/or the DOM being in place, load them using <code>defer</code> and put their corresponding <code><script></code> elements in the order you want the browser to execute them.</li> +</ul> + +<h2 id="Comments">Comments</h2> + +<p>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:</p> + +<ul> + <li>A single line comment is written after a double forward slash (//), e.g. + <pre class="brush: js notranslate">// I am a comment</pre> + </li> + <li>A multi-line comment is written between the strings /* and */, e.g. + <pre class="brush: js notranslate">/* + I am also + a comment +*/</pre> + </li> +</ul> + +<p>So for example, we could annotate our last demo's JavaScript with comments like so:</p> + +<pre class="brush: js notranslate">// 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); +}</pre> + +<div class="note"> +<p><strong>Note</strong>: 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).</p> +</div> + +<h2 id="Summary">Summary</h2> + +<p>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.</p> + +<p>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 <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">plunge straight into the practical</a>, getting you to jump straight in and build your own JavaScript examples.</p> + +<ul> +</ul> + +<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} হচ্ছে <span id="result_box" lang="bn"><span>একটি প্রোগ্রামিং ভাষা যা আপনাকে ওয়েব পৃষ্ঠাগুলিতে জটিল জিনিসগুলি বাস্তবায়ন করতে দেয়।</span> </span> <span id="result_box" lang="bn"><span>প্রতিবার একটি ওয়েব পৃষ্ঠা কেবল সেখানে একিরকম থাকে এবং আপনার জন্য স্ট্যাটিক তথ্য প্রদর্শন করে - সময়মত লেখার </span></span><span lang="bn"><span> আপডেটগুলি, বা </span></span>মিথষ্ক্রিয়<span lang="bn"><span> মানচিত্র, বা অ্যানিমেটেড 2 ডি / 3 ডি গ্রাফিক্স বা স্ক্রোলিং ভিডিও জুকবক্সগুলি ইত্যাদি প্রদর্শন করে - এবং সম্ভবত আপনি</span> <span>জড়িত </span><span>জাভাস্ক্রিপ্ট বিট করতে পারেন।</span></span></p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>JavaScript শেখা একটু বেশী কঠিন এর অনুষঙ্গী অন্যান্য ভাষা থেকে, যেমন <a href="/en-US/docs/Learn/HTML">HTML</a> এবং <a href="/en-US/docs/Learn/CSS">CSS</a>। তোমার প্রতি আক্তি কঠিন উপদেশহবে, JavaScript শিখার আগে কমসেকম এর অনুষঙ্গী দুইটি টেকনলজি এর সাথে একটু পরিচিত হন <span id="result_box" lang="bn"><span>অন্যদের পাশাপাশি এবং</span></span><span id="result_box" lang="bn"> <span>নিম্নলিখিত মডিউল মাধ্যমে কাজ করে শুরু করুন:</span></span></p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li> +</ul> + +<p>Having previous experience with other programming languages might also help.</p> + +<p>After getting familiar with the basics of JavaScript, you should be in a position to learn about more advanced topics, for example:</p> + +<ul> + <li>JavaScript in depth, as taught in our <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li> + <li><a href="/en-US/docs/Web/API">Web APIs</a></li> +</ul> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt> + <dd>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. </dd> +</dl> + +<h2 id="Solving_common_JavaScript_problems">Solving common JavaScript problems</h2> + +<p><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a> provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript on MDN</a></dt> + <dd>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.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> + <dd>An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> +</dl> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>জ্যাঙ্গ সম্পুর্ন বৈশিষ্ট্যযুক্ত জনপ্রিয় server-side web framework যা Python এ লিখিত। এই মডিউল আপনাকে দেখাবে জ্যাঙ্গ কেন সবচেয়ে জনপ্রিয় web server frameworks, কিভাবে এনভাইরনমেন্ট সেটআপ করতে হবে এবং দেখাবে কিভাবে আপনি আপনার নিজস্ব ওয়েব আপ্লিকেশন তৈরি করবেন।</div> + +<h2 id="পূর্বশর্ত">পূর্বশর্ত </h2> + +<p>এই মডিউল শুরু করার পুর্বে আপনার জ্যাঙ্গ সম্পর্কে কোন জ্ঞানের প্রয়োজন নেই। মুলত যেটা জানতেই হবে তা হচ্ছে, server-side web programming কি, web programming এবং web frameworks সম্পর্কে বিস্তারিত জানেতে আমাদের এই অংশটি দেখুন যেইখানে মুলত প্রথম থেকে শুরু হয়েছে, <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a>.</p> + +<p>আপনাকে অবশ্যই কিঞ্চিত অর্থাৎ প্রোগ্রামিং এর কিছু সাধারন ধারনা রাখতে হবে এবং <a href="/en-US/docs/Glossary/Python">Python</a> কেই আমরা রিকমেন্ড করি, যদিও মুল বিষয় খুব বেশি জরুরী না।</p> + +<div class="note"> +<p><strong>মনেরাখুন</strong>: পাইথন সবচেয়ে সহজ প্রোগ্রামিং ল্যাঙ্গুয়েজ যা কিনা যেকোনো অনভিজ্ঞ লোকের পক্ষেই পড়া এবং বোঝা সহজ। বলে রাখি, আপনি যদি এই মডিউলটি আরও ভালভাবে বুঝতে চান তবে আপনাকে সাহায্য করার জন্য ইন্টারনেটে প্রচুর বিনামূল্যে বই এবং টিউটোরিয়াল উপলব্ধ রয়েছে (নতুন প্রোগ্রামাররা python.org উইকিতে <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> পৃষ্ঠাগুলি চাইলে দেখতে পারেন)।</p> +</div> + +<h2 id="নির্দেশনাঃ">নির্দেশনাঃ </h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction </a></dt> + <dd>এই আর্টিকেলটির প্রথমেই আমরা এই প্রশ্নের জবাব দিবো যে, "জ্যাঙ্গ কি?" এবং কি কারনে এই ওয়েব ফ্রেমওয়ার্কটি বিশেষ করে তোলে তার একটি সংক্ষিপ্ত বিবরণ আপনাকে দিবো। আমরা মুলত প্রধান বৈশিষ্ট্যগুলির বর্ননা করব এবং কিছু উন্নত কার্যকারিতা সহ যেহেতু আমাদের হাতে পর্যাপ্ত সময় নেই সবকিছু বিশদ ভাবে ব্যাখ্যা করার। এটি সেট আপ করার আগে এবং জ্যাঙ্গ নিয়ে মাঠে নামার আগে এটি কী করতে পারে তার একটি ধারণা দেওয়ার জন্য আমরা আপনাকে জ্যাঙ্গো অ্যাপ্লিকেশনের কয়েকটি মূল বিল্ডিং ব্লক প্রদর্শন করব।</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></dt> + <dd> + <p dir="ltr" id="tw-target-text">এখন যেহেতু আপনি জানলেন যে জাঙ্গো কীসের জন্য, এখন আমরা আপনাকে উইন্ডোজ, লিনাক্স (উবুন্টু), এবং macOS-এ - (আপনি যে কমন অপারেটিং সিস্টেম ব্যবহার করছেন) জ্যাঙ্গো ডেভেলপমেন্ট এনভাইরনমেন্ট কীভাবে সেটআপ এবং টেস্ট করতে হবে তা দেখিয়ে দেব। একটি জ্যাঙ্গো অ্যাপ্লিকেশনগুলির ডেভেলপমেন্ট শুরু করার জন্য যা প্রয়োজন এই নিবন্ধটি আপনাকে মুলত সেগুলই দিবে যা আপনাকে দেওয়া উচিত।</p> + </dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></dt> + <dd>প্রথম আর্টিকেল এ আপনি আমাদের প্রাক্টিকাল টিউটোরিয়াল সিরিজ আপনাকে দেখাবে আপনি কি শিক্ষা গ্রহন করতে যাচ্ছেন এবং মুলত আপনি লকাল লাইব্রেরি সম্পর্কেই সাধারন নির্দেশনা পাবেন -- উদাহরণ সরূপ, আমরা একটি ওয়েবসাইট নিয়ে কাজ করব এবং তাকে বিকশিত করব।</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></dt> + <dd>এই অধ্যায়ে আপনি একটি ওয়েবসাইট প্রোজেক্ট এর স্কেলেটন তৈরি করা দেখানো হবে যেখানে আপনি site-specific settings, urls, models, views, and templates সম্পর্কে জানতে পারবেন।</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></dt> + <dd>এই নিবন্ধটি দেখায় যে কীভাবে <em>LocalLibrary</em> ওয়েবসাইটের মডেলগুলি সংজ্ঞায়িত করতে হয় - মডেলগুলি আমাদের অ্যাপ্লিকেশনটির ডেটা সংরক্ষণ করতে চাই এমন ডেটা স্ট্রাকচারকে উপস্থাপন করে এবং জ্যাঙ্গোকে আমাদের জন্য একটি ডাটাবেসে ডেটা সংরক্ষণ করার অনুমতি দেয় (এবং পরে এটি সংশোধন করে)। একটি মডেল কী তা ব্যাখ্যা করা হয়েছে, এটা কিভাবে ডিক্লিয়ার করা হয়েছে এবং কিছু মেইন ফিল্ড টাইপ্স। কিভাবে আপনি মডেল ডেটা অ্যাক্সেস করতে পারবেন এমন কয়েকটি প্রধান উপায় সংক্ষেপে দেখানো হয়েছে।</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></dt> + <dd>এখন আমরা <em>LocalLibrary</em> ওয়েবসাইটের জন্য মডেল তৈরি করেছি, আমরা কিছু "real" বইয়ের ডেটা যুক্ত করতে জাঙ্গো অ্যাডমিন সাইটটি ব্যবহার করব। প্রথমে আমরা আপনাকে অ্যাডমিন সাইটের সাথে কীভাবে মডেলগুলি নিবন্ধভুক্ত করব তা দেখাব, তারপরে আমরা আপনাকে লগইন করতে এবং কিছু ডেটা তৈরি করার উপায় দেখাব। শেষে আমরা কয়েকটি উপায় প্রদর্শন করি যার মাধ্যমে আপনি Admin সাইটের উপস্থাপনাটি আরও উন্নত করতে পারেন।</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></dt> + <dd>আমরা এখন আমাদের প্রথম পূর্ণ পৃষ্ঠাটি প্রদর্শন করার জন্য code যুক্ত করতে প্রস্তুত - <em>LocalLibrary</em> একটি হোম পৃষ্ঠা যা প্রতিটি মডেলের ধরণের আমাদের কাছে কত রেকর্ড রয়েছে তা দেখায় এবং আমাদের অন্যান্য পৃষ্ঠাগুলিতে সাইডবারের নেভিগেশন লিঙ্ক সরবরাহ করে। যেভাবে আমরা basic URL maps এবং ভিউ লিখতে, ডাটাবেস থেকে রেকর্ড পেতে এবং টেমপ্লেট ব্যবহার করে ব্যবহারিক অভিজ্ঞতা অর্জন করব।</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></dt> + <dd>এই টিউটোরিয়ালটি বই এবং লেখকদের তালিকা এবং বিশদ পৃষ্ঠা যুক্ত করে আমাদের <em>LocalLibrary</em> ওয়েবসাইটকে প্রসারিত করে। এখানে আমরা জেনেরিক class-based views সম্পর্কে শিখব, এবং তারা ব্যবহারের সাধারণ ক্ষেত্রে আপনার কোড লিখতে হবে এমন কোডের পরিমাণ কীভাবে হ্রাস করতে পারে তা দেখাব। আমরা বেসিক প্যাটার্নের matching পারফর্ম করব এবং তা দেখিয়ে আরও বিশদ বিবরণে url হ্যান্ডলিংয়ে যাব। </dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt> + <dd>এই টিউটোরিয়ালটি home page এ একটি সেশন-ভিত্তিক ভিজিট-কাউন্টার যুক্ত করে, আমাদের <em>LocalLibrary</em> ওয়েবসাইটকে প্রসারিত করে। এটি তুলনামূলকভাবে সহজ উদাহরণ, তবে এটি দেখায় যে আপনি কীভাবে আপনার নিজের সাইটগুলিতে বেনাম ব্যবহারকারীদের জন্য অবাধ চলাচল নিশ্চিত করার জন্য সেশন ফ্রেমওয়ার্কটি ব্যবহার করতে পারেন।.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></dt> + <dd>এই টিউটোরিয়ালে আমরা আপনাকে কীভাবে ব্যবহারকারীদের নিজের অ্যাকাউন্টে আপনার সাইটে লগইন করতে দেওয়া হবে এবং কীভাবে তারা কী করতে পারে তা নিয়ন্ত্রণ করতে হবে এবং লগ ইন করা হয়েছে কি না এবং তাদের অনুমতিগুলির ভিত্তিতে তা কীভাবে দেখানো হবে তা আমরা আপনাকে দেখাব। এই ব্যাখ্যার অংশ হিসাবে, আমরা LocalLibrary ওয়েবসাইট প্রসারিত করব, লগইন এবং লগ-আউট pages এবং বই যে ধার করা হয়েছে দেখার জন্য user- ও staff-specific pages নির্দিষ্ট পৃষ্ঠাগুলি যোগ করব।</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></dt> + <dd>এই টিউটোরিয়ালে আমরা আপনাকে জ্যাঙ্গ তে <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> এর সাথে কীভাবে কাজ করব এবং বিশেষত মডেল উদাহরণগুলি তৈরি করতে, আপডেট করতে এবং মুছতে ফর্মগুলি লেখার সহজ উপায়টি দেখাব। এই ব্যাখ্যার অংশ হিসাবে, আমরা LocalLibrary ওয়েবসাইট প্রসারিত করব, যাতে গ্রন্থাগারিকরা আমাদের নিজস্ব ফর্মগুলি (অ্যাডমিন অ্যাপ্লিকেশন ব্যবহার না করে) ব্যবহার করে লেখকদের বই পুনর্নবীকরণ(renew) করতে এবং তৈরি করতে, আপডেট করতে এবং মুছতে পারেন।</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></dt> + <dd>ওয়েবসাইটগুলি বড় হওয়ার সাথে সাথে এগুলি ম্যানুয়ালি পরীক্ষা করা আরও শক্ত হয়ে ওঠে- পরীক্ষার জন্য মনেহতে পারে আরও অনেক কিছুই নেই, তবে components এর মধ্যে interaction আরও জটিল হয়ে উঠার সাথে সাথে, একটি ছোট্ট পরিবর্তন, পরিবর্তনের সাথে অন্যান্য area এর প্রভাবটি যাচাই করতে আরও অনেক অতিরিক্ত পরীক্ষার প্রয়োজন হতে পারে। এই সমস্যাগুলি সহজ করার একটি উপায় হ'ল স্বয়ংক্রিয় পরীক্ষাগুলি লিখুন যা আপনি প্রতিবার পরিবর্তন করার সময় সহজেই এবং নির্ভরযোগ্যতার সাথে চালানো যেতে পারে। এই টিউটোরিয়ালটি দেখায় যে কীভাবে জাঙ্গোর পরীক্ষার কাঠামোটি ব্যবহার করে আপনার ওয়েবসাইটের <em>unit testing</em> স্বয়ংক্রিয় করবেন।</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></dt> + <dd><span class="VIiyi" lang="bn"><span class="ChMk0b JLqJ4b"><span>এখন আপনি একটি দুর্দান্ত লোকাল লাইব্রেরি ওয়েবসাইট তৈরি করেছেন (এবং পরীক্ষা করেছেন), আপনি এটিকে একটি পাবলিক ওয়েব সার্ভারে ইনস্টল করতে চাইছেন যাতে এটিতে লাইব্রেরি স্টাফ এবং সদস্যরা ইন্টারনেটে অ্যাক্সেস করতে পারে।</span></span> <span class="ChMk0b JLqJ4b"><span>এই আর্টিকেলটিতে আলোচনা করা হয়েছে, আপনাকে আপনার ওয়েবসাইট স্থাপন করতে কীভাবে একটি হোস্ট সন্ধান করতে হবে এবং আপনার সাইটকে প্রডাকশনের জন্য প্রস্তুত করার জন্য আপনাকে কী করতে হবে।</span></span></span></dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></dt> + <dd><span class="VIiyi" lang="bn"><span class="ChMk0b JLqJ4b"><span>ব্যবহারকারীর ডেটা রক্ষা করা যে কোনও ওয়েবসাইট ডিজাইনের একটি অপরিহার্য অংশ।</span></span> <span class="ChMk0b JLqJ4b"><span>আমরা এর আগে </span></span></span><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a><span class="VIiyi" lang="bn"><span class="ChMk0b JLqJ4b"><span> প্রবন্ধে আরও কয়েকটি সাধারণ সুরক্ষা হুমকির ব্যাখ্যা দিয়েছিলাম - এই নিবন্ধটিতে জ্যাঙ্গোর বিল্ট-ইন সুরক্ষাগুলি কীভাবে এই জাতীয় হুমকিগুলি পরিচালনা করে তার একটি ব্যাবহারিক প্রয়োগ প্রদর্শন করা হয়েছে। </span></span></span></dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p><span class="VIiyi" lang="bn"><span class="ChMk0b JLqJ4b"><span>এই মূল্যায়নটি জ্যাঙ্গো ব্যবহার করে কীভাবে একটি ওয়েবসাইট তৈরি করবেন সে সম্পর্কে আপনার বোধগম্যতার পরীক্ষা করবে, যা উপরের তালিকাভুক্ত গাইডগুলিতে বর্ণিত ছিলো। </span></span></span></p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt> + <dd><span class="VIiyi" lang="bn"><span class="ChMk0b JLqJ4b"><span>এই মূল্যায়নটিতে আপনি আপনার নিজের ব্লগ তৈরি করতে এই মডিউলটি থেকে শিখেছেন এমন কিছু জ্ঞান ব্যবহার করবেন।</span></span></span></dd> +</dl> 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 +--- +<div>{{LearnSidebar}}</div> + +<p>In this module <span class="seoSummary">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?".</span> 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.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you don't need to have any knowledge of server-side website programming, or indeed any other type of programming. </p> + +<p>However, you do need to understand how the web works. We recommend that you first read the following topics:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li> +</ul> + +<p>With that basic understanding, you'll be ready to work your way through the modules in this section. </p> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></dt> + <dd>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.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 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 <a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a> module.</p> +</div> + +<h2 id="Assessments">Assessments</h2> + +<p>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.</p> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div> + +<p class="summary">ওয়েবসাইট ডিজাইন ও ব্যবহারের সবক্ষেত্রেই এখন নিরাপত্তার প্রয়োজন হয়। এই লেখাটি আপনাকে ওয়েবসাইট নিরাপত্তার গুরু বানিয়ে ফেলবে তবে এটি আপনাকে কীভাবে নিরাপত্তা সংক্রান্ত ঝুঁকি আসতে পারে এবং সবচেয়ে সাধারণ কিছু ঝুঁকি থেকে রক্ষা করার জন্য কী কী প্রতিরোধমূলক পদক্ষেপ নেওয়া যায় সেসব সম্পর্কে প্রাথমিক ধারণা পাবেন।</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row"> + <p>যা জানা থাকা আবশ্যক</p> + </th> + <td> + <p>কম্পিউটারের সম্পর্কে মৌলিক জ্ঞান</p> + </td> + </tr> + <tr> + <th scope="row"> + <p>উদ্দেশ্য:</p> + </th> + <td>ওয়েব এপ্লিকেশনের নিরাপত্তা সংক্রান্ত সবচেয়ে সাধারণ ঝুঁকিগুলোকে সম্পর্কে জানা এবং ওয়েবসাইট হ্যাক হওয়ার ঝুঁকি কমানোর জন্য কী কী করা যায় সে সম্পর্কে ধারণা লাভ</td> + </tr> + </tbody> +</table> + +<h2 id="ওয়েবসাইটের_নিরাপত্তা_কী">ওয়েবসাইটের নিরাপত্তা কী?</h2> + +<p>ইন্টারনেট একটি ঝুঁকিপূর্ণ স্থান। আমরা হরহামেশাই ওয়েবসাইটকে খুঁজে না পাওয়া অথবা হ্যাক হয়েছে এরকম তথ্য প্রকাশ করা কথা শুনতে পাই।</p> + +<p>The purpose of website security is to prevent these (or any) sorts of attacks. The more formal definition of website security<em> is the act/practice of protecting websites from unauthorized access, use, modification, destruction, or disruption</em>.</p> + +<p>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.</p> + +<p>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.</p> + +<div class="note"> +<p><strong>Note</strong>: This is an introductory topic, designed to help you start thinking about website security, but it is not exhaustive.</p> +</div> + +<h2 id="Website_security_threats">Website security threats</h2> + +<p>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 <em>not paranoid enough</em> about the data coming from the browser.</p> + +<h3 id="Cross-Site_Scripting_XSS">Cross-Site Scripting (XSS)</h3> + +<p>XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts <em>through</em> the website into the browsers of other users. Because the injected code comes to the browser from the site, the code is <em>trusted</em> 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.</p> + +<div class="note"> +<p><strong>Note</strong>: XSS vulnerabilities have been historically more common than any other type of security threat.</p> +</div> + +<p>The XSS vulnerabilities are divided into <em>reflected</em> and <em>persistent</em>, based on how the site returns the injected scripts to a browser.</p> + +<ul> + <li>A <em>reflected</em> XSS vulnerability occurs when user content that is passed to the server is returned <em>immediately</em> and <em>unmodified</em> for display in the browser. Any scripts in the original user content will be run when the new page is loaded.<br> + For example, consider a site search function where the search terms are encoded as URL parameters, and these terms are displayed along with the results. An attacker can construct a search link that contains a malicious script as a parameter (e.g., <code>http://mysite.com?q=beer<script%20src="http://evilsite.com/tricky.js"></script></code>) and email it to another user. If the target user clicks this "interesting link", the script will be executed when the search results are displayed. As discussed earlier, this gives the attacker all the information they need to enter the site as the target user, potentially making purchases as the user or sharing their contact information.</li> + <li> + <p>A <em>persistent</em> XSS vulnerability occurs when the malicious script is <em>stored</em> on the website and then later redisplayed unmodified for other users to execute unwittingly.<br> + For example, a discussion board that accepts comments that contain unmodified HTML could store a malicious script from an attacker. When the comments are displayed, the script is executed and can send to the attacker the information required to access the user's account. This sort of attack is extremely popular and powerful, because the attacker might not even have any direct engagement with the victims.</p> + </li> +</ul> + +<p>While the data from <code>POST</code> or <code>GET</code> 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.</p> + +<p>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 <code><script></code>, <code><object></code>, <code><embed></code>, and <code><link></code>.</p> + +<div> +<p>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.</p> +</div> + +<h3 id="SQL_injection">SQL injection</h3> + +<p>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.</p> + +<div> +<p>SQL injection types include Error-based SQL injection, SQL injection based on boolean errors, and Time-based SQL injection.</p> +</div> + +<p>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 (<code>userName</code>) that has been supplied from an HTML form:</p> + +<pre class="brush: sql notranslate">statement = "SELECT * FROM users WHERE name = '" + <strong>userName</strong> + "';"</pre> + +<p>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 <code>userName</code>.</p> + +<pre class="brush: sql notranslate">SELECT * FROM users WHERE name = '<strong>a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't</strong>'; +</pre> + +<p>The modified statement creates a valid SQL statement that deletes the <code>users</code> table and selects all data from the <code>userinfo</code> table (which reveals the information of every user). This works because the first part of the injected text (<code>a';</code>) completes the original statement.</p> + +<p>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 <a href="https://en.wikipedia.org/wiki/Escape_character">escape</a> all the characters in the user input that have a special meaning in SQL.</p> + +<div class="note"> +<p><strong>Note</strong>: The SQL statement treats the <strong>'</strong> character as the beginning and end of a string literal. By putting a backslash in front of this character (<strong>\'</strong>), we escape the symbol, and tell SQL to instead treat it as a character (just a part of the string).</p> +</div> + +<p>In the following statement, we escape the <strong>'</strong> character. The SQL will now interpret the name as the whole string in bold (which is a very odd name indeed, but not harmful).</p> + +<pre class="brush: sql notranslate">SELECT * FROM users WHERE name = '<strong>a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t'</strong>; + +</pre> + +<p>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.</p> + +<div class="note"> +<p><strong>Note</strong>: This section draws heavily on the information in <a href="https://en.wikipedia.org/wiki/SQL_injection">Wikipedia here</a>.</p> +</div> + +<h3 id="Cross-Site_Request_Forgery_CSRF">Cross-Site Request Forgery (CSRF)</h3> + +<p>CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent.</p> + +<p>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 <code>POST</code> 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 <em>Submit</em> button disguised as a link to a "get rich quick" site).</p> + +<p>If a user clicks the submit button, an HTTP <code>POST</code> 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.</p> + +<p>The result is that a<span style="line-height: 1.5;">ny user who clicks the <em>Submit</em> button while they are logged in to the trading site will make the transaction. John gets rich.</span></p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<p>One way to prevent this type of attack is for the server to require that <code>POST</code> 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.</p> + +<p>Web frameworks often include such CSRF prevention mechanisms.</p> + +<h3 id="Other_threats">Other threats</h3> + +<p>Other common attacks/vulnerabilities include:</p> + +<ul> + <li><a href="https://www.owasp.org/index.php/Clickjacking">Clickjacking</a>. In this attack, a malicious user hijacks clicks meant for a visible top-level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials into an invisible {{htmlelement("iframe")}} controlled by the attacker. Clickjacking could also be used to get the user to click a button on a visible site, but in doing so actually unwittingly click a completely different button. As a defense, your site can prevent itself from being embedded in an iframe in another site by setting the appropriate HTTP headers.</li> + <li><a href="/en-US/docs/Glossary/Distributed_Denial_of_Service">Denial of Service</a> (DoS). DoS is usually achieved by flooding a target site with fake requests so that access to a site is disrupted for legitimate users. The requests may simply be numerous, or they may individually consume large amounts of resource (e.g., slow reads or uploading of large files). DoS defenses usually work by identifying and blocking "bad" traffic while allowing legitimate messages through. These defenses are typically located before or in the web server (they are not part of the web application itself).</li> + <li><a href="https://en.wikipedia.org/wiki/Directory_traversal_attack">Directory Traversal</a> (File and disclosure). In this attack, a malicious user attempts to access parts of the web server file system that they should not be able to access. This vulnerability occurs when the user is able to pass filenames that include file system navigation characters (for example, <code>../../</code>). The solution is to sanitize input before using it.</li> + <li><a href="https://en.wikipedia.org/wiki/File_inclusion_vulnerability">File Inclusion</a>. In this attack, a user is able to specify an "unintended" file for display or execution in data passed to the server. When loaded, this file might be executed on the web server or the client-side (leading to an XSS attack). The solution is to sanitize input before using it.</li> + <li><a href="https://www.owasp.org/index.php/Command_Injection">Command Injection</a>. Command injection attacks allow a malicious user to execute arbitrary system commands on the host operating system. The solution is to sanitize user input before it might be used in system calls.</li> +</ul> + +<p>For a comprehensive listing of website security threats see <a href="https://en.wikipedia.org/wiki/Category:Web_security_exploits">Category: Web security exploits</a> (Wikipedia) and <a href="https://www.owasp.org/index.php/Category:Attack">Category: Attack</a> (Open Web Application Security Project).</p> + +<h2 id="A_few_key_messages">A few key messages</h2> + +<p>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.</p> + +<div class="warning"> +<p>Important: The single most important lesson you can learn about website security is to <strong>never trust data from the browser</strong>. This includes, but is not limited to data in URL parameters of <code>GET</code> requests, <code>POST</code> requests, HTTP headers and cookies, and user-uploaded files. Always check and sanitize all incoming data. Always assume the worst.</p> +</div> + +<p>A number of other concrete steps you can take are:</p> + +<ul> + <li>Use more effective password management. Encourage strong passwords that are changed regularly. Consider two-factor authentication for your site, so that in addition to a password the user must enter another authentication code (usually one that is delivered via some physical hardware that only the user will have, such as a code in an SMS sent to their phone).</li> + <li>Configure your web server to use <a href="/en-US/docs/Glossary/https">HTTPS</a> and <a href="/en-US/docs/Web/Security/HTTP_strict_transport_security">HTTP Strict Transport Security</a> (HSTS). HTTPS encrypts data sent between your client and server. This ensures that login credentials, cookies, <code>POST</code> requests data and header information are not easily available to attackers.</li> + <li>Keep track of the most popular threats (the <a href="https://owasp.org/www-project-top-ten/">current OWASP list is here</a>) and address the most common vulnerabilities first.</li> + <li>Use <a href="https://owasp.org/www-community/Vulnerability_Scanning_Tools">vulnerability scanning tools</a> to perform automated security testing on your site. Later on, your very successful website may also find bugs by offering a bug bounty <a href="https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/">like Mozilla does here</a>.</li> + <li>Only store and display data that you need. For example, if your users must store sensitive information like credit card details, only display enough of the card number that it can be identified by the user, and not enough that it can be copied by an attacker and used on another site. The most common pattern at this time is to only display the last 4 digits of a credit card number.</li> +</ul> + +<p>Web frameworks can help mitigate many of the more common vulnerabilities.</p> + +<h2 id="Summary">Summary</h2> + +<p>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.</p> + +<p>With this article, you've come to the end of <a href="/en-US/docs/Learn/Server-side/First_steps">this module</a>, 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.</p> + +<p>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li> + <li><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></li> + <li><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li> + <li><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> 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.</p> + +<p>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 <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, such as when you want to view a different product on Amazon.</p> + +<p>In the modern world of web development, learning about server-side development is highly recommended.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>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.</p> + +<p>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".</p> + +<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li> +</ul> + +<p>With that basic understanding, you'll be ready to work your way through the modules in this section. </p> + +<h2 id="Modules">Modules</h2> + +<p>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. </p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt> + <dd>This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.</dd> +</dl> 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 +--- +<p><strong>স্থানীয়করণ</strong> (L10n) হচ্ছে এমন একটি প্রক্রিয়া, যা দ্বারা একটি সফটওয়্যারের ইউজার ইন্টারফেস একটি ভাষা থেকে অন্য ভাষায় রুপান্তর করা হয়। এবং সেই দেশের সংস্কৃতির সাথে সামঞ্জস্যপূর্ণ ও অধিবাসীদের ব্যবহার উপযোগী করা হয়। যাদের প্রযুক্তির প্রতি ও প্রযুক্তির স্থানীয়করণের প্রতি আগ্রহ রয়েছে, এসব রিসোর্স তাঁদের সকলের জন্য উন্মুক্ত। এগুলো ডেভেলপার ও অন্যান্য অবদানকারীর জন্য।</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="সহায়ক_প্রবন্ধ_সমুহ">সহায়ক প্রবন্ধ সমুহ</h2> + <dl> + <dt> + <a href="/en-US/docs/Localization_Quick_Start_Guide" title="https://developer.mozilla.org/en-US/docs/Localization_Quick_Start_Guide">স্থানীয়করণের হাতে-খড়ি</a></dt> + <dd> + স্থানীয়করণে আগ্রহী স্বেচ্ছাসেবকগণের জন্য সর্ব প্রথম পাঠ্য।</dd> + <dt> + <a href="/en-US/docs/XUL_Tutorial/Localization" title="en-US/docs/XUL_Tutorial/Localization">XUL টিউটোরিয়ালঃ স্থানীয়করণ</a></dt> + <dd> + XUL অ্যাপ্লিকেশন স্থানীয়করণের জন্য <a href="https://developer.mozilla.org/en-US/docs/XUL_Tutorial" title="https://developer.mozilla.org/en-US/docs/XUL_Tutorial">XUL টিউটোরিয়াল </a></dd> + <dt> + <a href="/en-US/docs/Writing_localizable_code" title="en-US/docs/Writing_localizable_code">স্থানীয়করণ যোগ্য কোড লেখা</a></dt> + <dd> + প্রোগ্রামারদের স্থানীয়করণ যোগ্য সফটওয়্যার তৈরি করার জন্য সর্বোত্তম কার্যকৌশল এবং নির্দেশনা।</dd> + <dt> + <a class="external" href="http://wiki.babelzilla.org/index.php?title=Tutorials#How_to_localize_strings_from_the_help.html_file_of_an_extension" title="http://wiki.babelzilla.org/index.php?title=Tutorials#How_to_localize_strings_from_the_help.html_file_of_an_extension">Help file স্থানিয়করন</a></dt> + <dd> + এসব ফাইল আরও সহজে স্থানীয়করণ করার জন্য - HTML থেকে কন্টেন্ট কিভাবে আলাদা করব।</dd> + <dt> + <a class="external" href="http://wiki.babelzilla.org/index.php?title=Tutorials#How_to_resize_a_xul_pref_dialog_according_to_every_language" title="http://wiki.babelzilla.org/index.php?title=Tutorials#How_to_resize_a_xul_pref_dialog_according_to_every_language">বক্সের আকার</a></dt> + <dd> + নির্দিষ্ট স্থানীয়করণের জন্য কিভাবে উইন্ডোর আকার সমন্বয় করবো।</dd> + <dt> + <a href="/en-US/docs/Localizing_extension_descriptions" title="en-US/docs/Localizing_extension_descriptions">এক্সটেনশনের বর্ণনা স্থানীয়করণ</a></dt> + <dd> + একটি এক্সটেনশনের বর্ণনা স্থানীয়করণের জন্য (extension window এর মধ্যে, extension এর নামের নিচে যে লাইনটি দেখায়) আপনার install.rdf ফাইলের মধ্যে থাকা তথ্যকে পুনরায় লিখতে হবে। এর এজন্য আপনাকে একটি বিশেষ Preference Key ব্যবহার করতে হবে। এই প্রবন্ধটিতে install.rdf ফাইল মডিফাই বা override করার বিস্তারিত নির্দেশনা আছে।</dd> + <dt> + <a href="/en-US/docs/Frequently_Asked_Localization_Questions" title="en-US/docs/Frequently_Asked_Localization_Questions">স্থানীয়করণের ক্ষেত্রে সচরাচর জিজ্ঞাসিত প্রশ্ন সমূহ</a></dt> + <dd> + স্থানীয়করণের কাজ করার সময় যতরকম প্রস্ন সচরাচর করা হয়, তার উত্তর এখানে দেয়া রয়েছে।</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Localization" title="en-US/docs/tag/Localization">সব দেখুন...</a></span></p> + </td> + <td> + <h2 class="Community" id="সাহায্যকারী_দল">সাহায্যকারী দল</h2> + <ul> + <li>মজিলার ফোরাম সমূহ দেখুন...</li> + </ul> + <p>{{ DiscussionList("dev-l10n", "mozilla.dev.l10n") }}</p> + <ul> + <li><a href="/Special:Tags?tag=Localization:Tools&language=en" title="Special:Tags?tag=Localization:Tools&language=en">টুলস</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/L10n" title="https://wiki.mozilla.org/L10n">কমিউনিটি</a></li> + </ul> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">সম্পর্কিত বিষয়াবলী</h2> + <ul> + <li><a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">Extensions</a>, <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> 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 +--- +<div>{{MDNSidebar}}</div> + +<p>MDN শুধু একটি উইকি নয়: এটি ডেভেলপারদের একটি কমিউনিটি, যারা উন্মুক্ত ওয়েব প্রযুক্তি ব্যবহারকারী অন্যান্য ডেভেলপারদের জন্য MDN কে অসাধারন রিসোর্স হিসেবে গড়ে তোলার জন্য কাজ করছে। "আসল কাজ" হয় MDN সাইটে, আর "কমিউনিটির কাজ" হয় আলোচনা ও চ্যাট এর মাধ্যমে।</p> + +<p>আমরা খুশি হব, যদি আপনি MDN এ অবদান রাখেন; তবে আমরা আরও বেশি খুশি হব, যদি আপনি আমাদের কমিউনিটিতে অংশগ্রহণ করেন। নিচের এই তিনটি সহজ ধাপ অনুসরণ করে আপনি আমাদের সাথে যুক্ত হতে পারেন।</p> + +<ol style="list-style-type: -moz-bengali; list-style-type: bengali;"> + <li>একটি MDN অ্যাকাউন্ট তৈরি করুন।</li> + <li> কথোপকথনে যোগ দিন।</li> + <li>চলমান ঘটনার উপর নজর রাখুন।</li> +</ol> + +<h2 id="মোজিলার_ডেভেলপার_সম্পদায়_কিভাবে_কাজ_করে">মোজিলার ডেভেলপার সম্পদায় কিভাবে কাজ করে</h2> + +<p>নিছের আর্টিকেলগুলি MDN সম্প্রদায় সম্পর্কে আরো বেশী বর্ণনা করা হয়েছে।</p> + +<h2 id="নেটওয়ার্কে_অ্যাকাউন্ট_তৈরি_করা">নেটওয়ার্কে অ্যাকাউন্ট তৈরি করা</h2> + +<p>{{page("/bn-BD/docs/Project:MDN/অবদান/শুরু", "একটি অ্যাকাউন্ট তৈরি করা") }}</p> + +<h2 id="dev-mdc_আলোচনায়_সাবস্ক্রাইব">dev-mdc আলোচনায় সাবস্ক্রাইব</h2> + +<p>MDN এর কনটেন্ট এর কাজ নিয়ে আলোচনা করার জন্য মেইলিং লিস্ট হচ্ছে <span style="line-height: inherit;"> </span><a href="https://lists.mozilla.org/listinfo/dev-mdc" style="line-height: inherit;" title="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc@lists.mozilla.org</a>। বিভিন্ন উপায়ে আপনি আমাদের কথোপকথন পড়তে পারেন। আর আপনি যদি প্রশাসকের অনুমতির অপেক্ষা না করেই আপনার বার্তা পাঠাতে চান, তাহলে আপনাকে অবশ্যই মেইলিং লিস্টে অন্তর্ভুক্ত হতে হবে। এখানে আরও কিছু ভিন্ন পদ্ধতি আছে, যার মাধ্যমে আপনি মেইলিং লিস্টে অন্তর্ভুক্ত হতে পারেনঃ<span style="line-height: inherit;">{{DiscussionList("dev-mdc", "mozilla.dev.mdc")}}</span></p> + +<p>কেন "dev-mdc"? আগে এটা "Mozilla Developer Center" বা MDC হিসেবে পরিচিত ছিল। তাই সেই আগের নাম অনুযায়ী মেইলিং লিস্টটি <span style="line-height: 21px;">dev-mdc হয়েছে। একটি </span><a href="https://lists.mozilla.org/listinfo/dev-mdn" style="line-height: inherit;" title="https://lists.mozilla.org/listinfo/dev-mdn">dev-mdn</a><span style="line-height: inherit;"> মেইলিং লিস্টও রয়েছে। </span><a href="https://github.com/mozilla/kuma" style="line-height: inherit;" title="https://github.com/mozilla/kuma">Kuma</a><span style="line-height: inherit;"> প্ল্যাটফর্ম, যেটা দিয়ে MDN চলে, সেটা ডেভেলপ করার জন্য ডেভেলপাররা এখানে আলোচনা করে। আপনাকে এখানেও যুক্ত হওয়ার জন্য স্বাগত জানানো হচ্ছে। কিন্তু আপনার যদি শুধু MDN এর কনটেন্ট এর প্রতি আগ্রহ থাকে, তবে এখানে যুক্ত হওয়ার প্রয়োজন নেই।</span></p> + +<h2 id="ইন্টারনেট_রিলে_চ্যাট_বা_IRC_তে_যোগদান">ইন্টারনেট রিলে চ্যাট বা IRC তে যোগদান</h2> + +<p>মোজিলা প্রজেক্টের অন্যান্য অংশের মতো MDN কমিউনিটি ব্যবহারকারীরা অনলাইন চ্যাট করার জন্য IRC ব্যবহার করে। <span style="line-height: inherit;">irc.mozilla.org এর মধ্যে</span><span style="line-height: inherit;"> নিচের IRC চানেল গুলো </span><span style="line-height: inherit;">MDN সংশ্লিষ্টঃ</span></p> + +<ul> + <li><a href="irc://irc.mozilla.org/devmo" title="irc://irc.mozilla.org/devmo">#devmo</a>: MDN এর কনটেন্ট নিয়ে আলোচনা করার জন্য।</li> + <li><a href="irc://irc.mozilla.org/mdndev" title="http://irc.mozilla.org/devmo">#mdndev</a>: MDN প্ল্যাটফর্ম এর উন্নয়নের আলোচনা করার জন্য (যা <a href="/en-US/docs/Project:MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a> হিসেবেও পরিচিত)</li> + <li><a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/mdn">#mdn</a>: পাঁচমিশালি আলোচনার জন্য; MDN সম্পর্কিত কোন কিছু জিজ্ঞাসা থাকলে আপনি যদি নিশ্চিত না হন, যে কোথায় জিজ্ঞেস করবেন, এখানে জিজ্ঞেস করতে পারেন।</li> +</ul> + +<p>খুব সম্ভবত এই চ্যানেল গুলো উত্তর আমেরিকায় রবিবার বাদে অন্য সব দিন চালু থাকে।</p> + +<p>যদি আপনি আগে কখনো IRC ব্যবহার নাকরে থাকেন, তবে <a href="http://wiki.mozilla.org/IRC" title="http://wiki.mozilla/org/IRC">IRC সম্পর্কে জানুন</a>। <a href="https://addons.mozilla.org/en-US/firefox/addon/chatzilla/" title="https://addons.mozilla.org/en-US/firefox/addon/chatzilla/">ChatZilla</a> হচ্ছে IRC ক্লায়েন্ট যা একটি ফায়ারফক্স অ্যাড-অন হিসেবে তৈরি করা হয়েছে।</p> + +<h2 id="পরবর্তী_ধাপ">পরবর্তী ধাপ</h2> + +<ul> + <li><a href="/bn-BD/docs/Project:MDN/%E0%A6%85%E0%A6%AC%E0%A6%A6%E0%A6%BE%E0%A6%A8" title="/bn-BD/docs/Project:MDN/%E0%A6%85%E0%A6%AC%E0%A6%A6%E0%A6%BE%E0%A6%A8">MDN এ অবদান রাখাঃ</a> MDN এ কাজ করার জন্য সহায়িকা এবং সাজেশনের জন্য এখানে দেখুন।</li> + <li><a href="/bn-BD/docs/Project:MDN/অবদান/চলমান_ঘটনাবলি_সম্পর্কে" title="/en-US/docs/Project:MDN/Contributing/Follow_what_s_happening">চলমান ঘটনাবলি সম্পর্কে জানুনঃ</a> MDN এর সাথে যুক্ত থাকার জন্য আরও কিছু পথ। আসলে এটি মোজিলার ডেভেলপারদের একসঙ্গে থাকার জন্য।</li> +</ul> 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 +--- +<div>{{MDNSidebar}}</div><p>MDN তৈরি হয়েছে মোজিলার <a href="https://wiki.mozilla.org/Engagement/Developer_Engagement" title="https://wiki.mozilla.org/Engagement/Developer_Engagement">Websites and Developer Engagement</a> কমিউনিটির দ্বারা। নিচে কিছু রাস্তা বলে দেয়া আছে যার মাধ্যমে আমরা কি করছি, সে সম্পর্কে তথ্য ভাগাভাগি করি।</p> +<h3 id="ব্লগ">ব্লগ</h3> +<dl> + <dt> + <a href="https://hacks.mozilla.org/" title="https://hacks.mozilla.org/">Mozilla Hacks</a></dt> + <dd> + ওয়েব, মোজিলা টেকনোলজি এবং ফিচার সম্পর্কে বিস্তারিত খবর এখানে পাওয়া যাবে। </dd> + <dt> + ডেভেলপারদের সংযুক্ত করা</dt> + <dd> + শীঘ্রই আসছে! কমিউনিটির মধ্যে তৎপরতা এবং আলোচনার প্রসার করতে খুব শীঘ্রই এটি চালু করা হবে। এর মাধ্যমে ডেভেলপারদের সংঘবদ্ধ ও সংযুক্ত রাখা যাবে।</dd> +</dl> +<h3 id="সামাজিক_যোগাযোগ">সামাজিক যোগাযোগ</h3> +<ul> + <li><a href="https://twitter.com/mozhacks" title="https://twitter.com/mozhacks"><span id="cke_bm_286S" style="display: none;"> </span>@MozHacks</a>: নিত্য নতুন ওয়েব টেকনোলজি, দারুন সব HTML5 অ্যাপ এবং ফায়ারফক্স ফিচার সম্পর্কে টুইট।</li> + <li><a href="https://twitter.com/NewOnMDN" title="https://twitter.com/NewOnMDN">@NewOnMDN</a>: নতুন পৃষ্ঠা গুলোর সংকলন, উল্লেখযোগ্য হালনাগাদ এবং মোজিলা ডেভেলপার নেটওয়ার্ক সম্পর্কে অন্যান্য খবর।</li> + <li><a href="https://plus.google.com/+MozillaDeveloperNetwork" title="https://plus.google.com/+MozillaDeveloperNetwork">+MozillaDeveloperNetwork</a></li> + <li><a href="http://www.youtube.com/user/mozhacks" title="http://www.youtube.com/user/mozhacks">Mozilla Hacks (YouTube)</a></li> + <li><a href="https://twitter.com/mozhacks/moz-developer-engagement" title="https://twitter.com/mozhacks/moz-developer-engagement">Moz Developer Engagment</a>: ডেভেলপারদের সংযুক্ত করার জন্য টুইটারে যারা সক্রিয় রয়েছেন, তাদের লিস্ট।</li> +</ul> +<h3 id="MDN_কমিউনিটি_সভা">MDN কমিউনিটি সভা</h3> +<p>কমিউনিটির সভা প্রতি দুই সপ্তাহ অন্তর বুধবারে, মার্কিন প্রশান্ত মহাসাগরীয় সময় ১০:০০ টায় (UTC-0800 অক্টোবর-মার্চ, UTC-0700 মার্চ-অক্টোবর), <a href="irc://irc.mozilla.org/devmo" title="irc://irc.mozilla.org/devmo">#devmo</a> <a href="http://wiki.mozilla.org/IRC" title="http://wiki.mozilla.org/IRC">IRC</a> চানেলে অনুষ্ঠিত হয়। <span style="line-height: inherit;">আগের সভা গুলোর আলোচ্য সূচি দেখার জন্য</span><span style="line-height: inherit;"> </span><a href="https://wiki.mozilla.org/MDN/Community_meetings" style="line-height: inherit;" title="https://wiki.mozilla.org/MDN/Community_meetings">MDN community meetings</a> এর উইকি পাতা দেখতে পারেন।</p> +<p><a class="external text" href="https://mail.mozilla.com/home/publiccalendar@mozilla.com/MDN_Events.html" rel="nofollow">MDN Events</a> ক্যালেন্ডারে MDN কমিউনিটির সভা, ডক এর সংকলন এবং MDN সংশ্লিষ্ট অন্যান্য অনুষ্ঠান সম্পর্কিত তথ্য থাকে।</p> 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 +--- +<div>{{MDNSidebar}}</div><p>মোজিলা ডেভেলপার নেটওয়ার্ক এর মৌলিক দুটি কাজ যা প্রায় সব অবদানকারী করে থাকে, তা হচ্ছে বর্তমান পৃষ্ঠাগুলো সম্পাদনা/সমৃদ্ধ করা এবং নতুন পৃষ্ঠা তৈরি করা। এই নিবন্ধটি সম্পাদনা ও নতুন পৃষ্ঠা তৈরি করার একেবারে মৌলিক কিছু কৌশল নিয়ে লেখা।</p> +<h2 id="বর্তমান_পৃষ্ঠাগুলো_সমৃদ্ধকরণ">বর্তমান পৃষ্ঠাগুলো সমৃদ্ধকরণ</h2> +<p>সম্পাদনা ও সমৃদ্ধ করা সহজ। পাতার উপরে শিরোনামের ডান পাশে থাকা নীল "Edit" বাটনে ক্লিক করলেই সম্পাদনার পাতা চলে আসবে। সম্পাদনার পাতাটিতে আপনি বিভিন্ন রকমের ফরম্যাটিং অপশন পাবেন। সেই অপশন গুলো ব্যবহার করে আপনি পাতায় থাকা সরাসরি তথ্য যোগ করা ও মোছার কাজ করতে পারবেন। অনুচ্ছেদ যুক্ত করা, লেখা মোছা, শিরোনাম যুক্ত করা সহ লেখা ও সম্পাদনা সংশ্লিষ্ট আরও মৌলিক কিছু ফাংশন এই পৃষ্ঠায় পাবেন।</p> +<h3 id="পরিবর্তন_নিরীক্ষণ">পরিবর্তন নিরীক্ষণ</h3> +<p>আপনার করা পরিবর্তন সমূহ দেখতে কেমন লাগবে, তা বোঝার জন্য পৃষ্ঠার উপরে ডান পাশে নীল রঙের "Preview changes" বাটনটি ক্লিক করুন। এরপর একটি নতুন/আলাদা ট্যাবে নিরীক্ষণ পৃষ্ঠা আসবে, যেখানে আপনার করা পরিবর্তন গুলো সহ পৃষ্ঠাটি (যে পৃষ্ঠাটি সম্পাদনা করছেন) দেখতে কেমন হবে, তা দেখতে পাবেন। যতবার আপনি এই বাটন চাপবেন, ততবারই এটি আপনার প্রিভিউ পৃষ্ঠা সর্বশেষ পরিবর্তন সহ পুনরায় লোড করবে। তবে মনে রাখবেন, প্রিভিউ পৃষ্ঠা আপনার পরিবর্তন গুলোকে আপাতত হিসেবে দেখাবে; সংরক্ষণ করবে না। তাই কখনো প্রিভিউ পাতা থেকে সেভ না করে বের হবেন না। প্রিভিউ পাতা বা এডিট পাতা থেকে চলে যাওয়ার আগে অবশ্যই সর্বশেষ পরিবর্তন সংরক্ষনের জন্য <strong>Save Changes</strong> চাপতে হবে।</p> +<h3 id="পরিমার্জনসংশোধন_মন্তব্য">পরিমার্জন/সংশোধন মন্তব্য</h3> +<p>সংরক্ষণপূর্ব নিরীক্ষণ বা <b>Preview</b> দেখার পর আপনি আপনার করা পরিবর্তনগুলো সংরক্ষণ করবেন। সংরক্ষণ করার আগে পেজের নিচে থাকা মন্তব্যের জায়গায় আপনি কেন সম্পাদনা করেছেন, তা লিখুন। আপনার মন্তব্য থেকে অন্যান্য অবদানকারীরা আপনার সম্পাদনা সম্পর্কে সহজে ধারনা পাবে। মনেকরুন, আপনি হয়তো নতুন কোনো অনুচ্ছেদ যুক্ত করেছেন, বা<span style="line-height: 1.572;"> কোন প্রবন্ধের ভাবকে আরও সহজে বোঝার জন্য কয়েকটি শব্দ পরিবর্তন করেছেন, অথবা অপ্রয়োজনীয় কিছু তথ্য মুছে দিয়েছেন। এরকম পরিবর্তন কেন করা প্রয়োজন, এ সম্পর্কে আপনি অবশ্যই মন্তব্য করবেন।</span></p> +<h3 id="ট্যাগ">ট্যাগ</h3> +<p>একটি পৃষ্ঠার কনটেন্ট সহজে বুঝতে ও খুঁজে পেতে ট্যাগ ব্যবহার করা হয়। আপনি চাইলে ট্যাগ যুক্ত বা অপসারণ করতে পারেন। আর এই ট্যাগ যুক্ত বা অপসারনের প্রক্রিয়াটিও যেহেতু সংশোধনের পর্যায়ে পড়ে, তাই এই কাজের সময়েও মন্তব্য করে আপনার কাজের নিরপেক্ষতা ও প্রয়োজনীয়তার স্বপক্ষে যুক্তি দেখাবেন।</p> +<h3 id="মতামত_প্রয়োজন">মতামত প্রয়োজন?</h3> +<p>যদি আপনি চান যে একজন দক্ষ বা অভিজ্ঞ অবদানকারী আপনার করা সম্পাদনা-সংশোধন দেখুক এবং মতামত জানান, তাহলে আপনি একটি টেকনিক্যাল (কোড, এপিআই অথবা প্রযুক্তি সম্বন্ধে) রিভিউ-এর জন্য আবেদন করতে পারেন। অথবা একটি সম্পাদকীয় রিভিউ (প্রবন্ধ, ব্যাকরণ এবং কনটেন্ট) অথবা একটি টেম্পলেট রিভিউ (কুমাস্ক্রিপ্ট কোডের জন্য) এর জন্যও আবেদন করতে পারেন। তবে এজন্য আপনাকে উক্ত পাতাটি সংরক্ষনের পূর্বে বক্সটি টিক দিয়ে রাখতে হবে।</p> +<h3 id="ফাইল_সংযুক্তি">ফাইল সংযুক্তি</h3> +<p>যদি আপনি কোন ফাইল সংযুক্ত করতে চান, বা আপনার নিবন্ধটি সহজে বোঝার জন্য কোন ছবি সংযুক্ত করতে চান, তাহলে সেটা পৃষ্ঠার একদম শেষের দিকে করতে পারেন।</p> +<h3 id="সংরক্ষণ_বাতিল_অথবা_সম্পাদনা_চালিয়ে_যাওয়া">সংরক্ষণ, বাতিল অথবা সম্পাদনা চালিয়ে যাওয়া</h3> +<p>যখন আপনার সম্পাদনা শেষ হয়ে যাবে এবং আপনি আপনার প্রিভিউ দেখে সন্তুষ্ট হবেন, তখন আপনি আপনার কাজ এবং মন্তব্য পেজের উপরে থাকা সবুজ "Save changes" লেখা বোতাম চেপে সংরক্ষণ করতে পারেন। কিন্তু পরক্ষনে যদি আবার আপনার মনে হয় যে কাজটা ঠিক হয়নি, তাহলে আপনি পেজের উপরে থাকা লাল রঙের "Discard changes" লেখা বোতাম চেপে আগের করা কাজগুলো বাতিল করতে পারেন।</p> +<h2 id="নতুন_পৃষ্ঠা_তৈরি_করা">নতুন পৃষ্ঠা তৈরি করা</h2> +<p>নতুন সাব পেজ বোতাম; লিঙ্ক ফলো করা; পেজ নকল করা।</p> +<p><a href="/en-US/docs/Project:MDN/Contributing/Page_types" title="/en-US/docs/Project:MDN/Contributing/Page_types">পেজ টাইপ</a> নিবন্ধের লিঙ্ক।</p> 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 +--- +<div>{{MDNSidebar}}</div><h2 id="মজিলা_ডেভেলপার_নেটওয়ার্ক_কি">মজিলা ডেভেলপার নেটওয়ার্ক কি ?</h2> + +<p>আমরা একটি মুক্ত ডেভেলপার পরিবার, যারা ওয়েব এর উত্তরোত্তর উন্নতির জন্য রিসোর্স তৈরি করছি। আমরা ব্র্যান্ড, ব্রাউজার অথবা প্ল্যাটফর্মে সীমাবদ্ধ নই। আমরা সকল ব্র্যান্ড, ব্রাউজার এবং প্ল্যাটফর্মের জন্য কাজ করি। আমাদের এখানে যে কেউ অবদান রাখতে পারে। এবং আপনাদের অবদান আমাদের আরও শক্তিশালী হতে সহায়তা করে। আমরা একসাথে ওয়েবে সৃষ্টিশীলতা আনা এবং বৃহৎ স্বার্থে কাজ চালিয়ে যেতে পারি। আপনাদেরকে সাথে নিয়েই আমরা যাত্রা শুরু করেছি, এবং থাকব।</p> + +<p><span>MDN (ডকুমেন্ট, ডেমো, এবং সাইট) ডেভেলপারদের একটি মুক্ত পরিবারের মাধ্যমে তৈরি করা হয়েছে। অনুগ্রহ করে আমাদের সাথে যুক্ত হোন!</span></p> + +<h2 id="যুক্ত_হবার_৩_টি_সহজ_ধাপ"><span> যুক্ত হবার ৩ টি সহজ ধাপ</span></h2> + +<h3 id="১ম_ধাপঃ_অ্যাকাউন্ট_তৈরি">১ম ধাপঃ অ্যাকাউন্ট তৈরি</h3> + +<p>মজিলা ডেভেলপার নেটওয়ার্ক (সংক্ষেপে MDN) এ আপনার অবদান শুরু করার জন্য আপনাকে অ্যাকাউন্ট তৈরি করতে হবে। অ্যাকাউন্ট কিভাবে তৈরি করবেন, এ বিষয়ে জানার জন্য <a href="/bn-BD/docs/MDN/Contribute/Howto/Create_an_MDN_account">কিভাবে অ্যাকাউন্ট তৈরি করতে হয়</a> এই পাতাটি দেখুন।</p> + +<h3 id="২য়_ধাপঃ_কাজ_নির্বাচন_করা">২য় ধাপঃ কাজ নির্বাচন করা</h3> + +<p>এখন যেহেতু আপনি লগ-ইন করে ফেলেছেন, নিচে উল্লেখিত তালিকায় বিভিন্ন ধরনের কাজের বিবরণ পড়ুন এবং সিদ্ধান্ত নিন যে কোনটি আপনার কাছে বেশি আকর্ষণীয় মনে হয়। আপনি আপনার অবদান রাখা শুরু করতে যেকোনো কাজ নির্বাচন করতে পারেন।</p> + +<h3 id="৩য়_ধাপঃ_কাজ_করা">৩য় ধাপঃ কাজ করা</h3> + +<p>একবার যখন আপনি নির্ধারণ করে ফেলবেন যে, আপনি কি ধরনের কাজ করতে চান, তারপর একটি নির্দিষ্ট পাতা, কোডের উদাহরন ইত্যাদি কাজ করার জন্য বেছে নিন এবং করে ফেলুন!</p> + +<p>এটা একদম নিখুঁতভাবে করার জন্য চিন্তা করার প্রয়োজন নেই; অন্যান্য MDN অবদানকারীরা আপনার করা ভুলগুলো শোধরানোর জন্য এখানে রয়েছে। যদি আপনি "আসলেই" কিছু করার আগে গবেষণা করতে চান, তাহলে আপনি <a href="/en-US/docs/Sandbox">Sandbox</a> পাতাটি সম্পাদনা করতে পারেন। চলার পথে স্বভাবতই আপনার মনে বিভিন্ন প্রশ্নের উদয় হবে। আপনার সব প্রশ্নের উত্তর পাওয়ার জন্য <a href="/bn-BD/docs/Project:MDN/অবদান/দলে_যোগদান">এমডিএন দলে যোগদান</a> পাতাটি দেখতে পারেন। এখানে আমাদের মেইলিং লিস্ট এবং চ্যাট চ্যানেলের তথ্য রয়েছে।</p> + +<p>যখন আপনার কাজ শেষ হয়ে যাবে, নির্দ্বিধায় আরেকটি কাজ নির্বাচন করে কাজ করুন, অথবা নিচে <a href="#Other_things_you_can_do_on_MDN">MDN এ আরও যা যা করতে পারেন</a> অংশটি দেখুন।</p> + +<h2 id="সম্ভাব্য_কাজের_ধরন">সম্ভাব্য কাজের ধরন</h2> + +<p>আপনার দক্ষতা এবং আগ্রহের উপর নির্ভর করে আপনি বিভিন্ন উপায়ে MDN এ অবদান রাখতে পারেন। এমনকি কিছু কাজ কঠিন হতে পারে, কিন্তু আমাদের অনেক সহজ/সাধারণ কাজ রয়েছে। এরমধ্যে অনেকগুলো করতে মাত্র পাঁচ মিনিট (এর থেকেও কম!) সময় লাগে। কাজ এবং তার সারসংক্ষেপের সাথে আপনি প্রত্যেক ধরনের কাজের জন্য আনুমানিক কতটা সময় লাগতে পারে, তা খুঁজে পাবেন।</p> + +<h3 id="অপশন_১_আমি_শব্দ_পছন্দ_করি">অপশন ১: আমি শব্দ পছন্দ করি</h3> + +<p>আপনি আমাদের বর্তমান ডকুমেন্ট সমূহ পর্যালোচনা, সম্পাদনা বা সঠিক ট্যাগ বসাতে সাহায্য করতে পারেন।</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">একটি পাতার জন্য সারাংশ বানান</a> (৫-১৫ মিনিট)</li> + <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Do_an_editorial_review">সম্পাদকীয় পর্যালোচনা </a>(৫–৩০ মিনিট)</li> +</ul> + +<div class="note"><strong>লক্ষ্য করুনঃ</strong> যদি আপনি নিবন্ধ পর্যালোচনা অথবা নতুন নিবন্ধ লেখার কাজ করেন, তবে আমরা আপনাকে <a href="/en-US/docs/Project:MDN/Style_guide">স্টাইল গাইড</a> পর্যালোচনার জন্য অনুরোধ করবো। এতে করে আপনার নিবন্ধ গুলো দৃঢ় হবে।</div> + +<h3 id="অপশন_২_আমি_কোড_পছন্দ_করি">অপশন ২: আমি কোড পছন্দ করি</h3> + +<p>আমাদের আরও অনেক কোড স্যাম্পল প্রয়োজন! আপনি চাইলে আমাদের সাইটের প্ল্যাটফর্ম, <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Kuma">Kuma</a> ডেভেলপ করতেও সাহায্য করতে পারেন!</p> + +<ul> + <li><a href="/bn-BD/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">কোড স্যাম্পল "লাইভ (live)" করার জন্য রুপান্তর</a> (৩০ মিনিট)</li> + <li><a href="https://kuma.readthedocs.org/en/latest/installation-vagrant.html">Kuma পরীক্ষা করার পরিবেশ তৈরি করা</a> (১ ঘণ্টা)</li> + <li><a href="https://github.com/mozilla/kuma#readme">Kuma'র কোডবেসে আপনার কোড প্যাচ পাঠান</a> (১ ঘণ্টা)</li> + <li><a href="https://developer.mozilla.org/en-US/demos/submit">নতুন একটি ডেমো জমা </a>(১ ঘণ্টা)</li> +</ul> + +<h3 id="অপশন_৩_আমি_শব্দ_এবং_কোড_উভয়ই_পছন্দ_করি">অপশন ৩: আমি শব্দ এবং কোড উভয়ই পছন্দ করি</h3> + +<p>আমাদের এমন কিছু কাজ রয়েছে, যাতে প্রযুক্তি ও ভাষাগত উভয় দক্ষতারই প্রয়োজন হয়। যেমনঃ নতুন একটি নিবন্ধ লেখা, প্রযুক্তিগত নির্ভুলতা যাচাইয়ের জন্য পর্যালোচনা অথবা ডকুমেন্ট অভিযোজিত করা।</p> + +<ul> + <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Tag_JavaScript_pages">জাভাস্ক্রিপ্ট পেজ সমূহ ট্যাগ করা</a> (৫ মিনিট)</li> + <li><a href="/en-US/docs/MDN/Promote">আপনার ওয়েবসাইটে MDN এর প্রচার করা</a> (৫ মিনিট)</li> + <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Do_a_technical_review">টেকনিক্যাল অনুমোদন</a> (৩০ মিনিট)</li> + <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Update_API_page_layout">API লেআউট পেজ হালনাগাদ </a> (৩০ মিনিট)</li> + <li><a href="/en-US/docs/MDN/Contribute/Creating_and_editing_pages#Creating_a_new_page">আপনার জানা বিষয়ে নতুন একটি নিবন্ধ লিখুন </a> (১ ঘণ্টা বা তার বেশী )</li> +</ul> + +<h3 id="অপশন_৪_আমি_আমার_ভাষায়_MDN_চাই">অপশন ৪: আমি আমার ভাষায় MDN চাই</h3> + +<p>MDN এ করা সমস্ত লোকালাইজেশন এবং অনুবাদের কাজ আমাদের দুর্দান্ত স্বেচ্ছাসেবক পরিবার করে থাকে।</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Localize/Translating_pages">পৃষ্ঠা সমূহ অনুবাদ করা</a> (২ ঘণ্টা)</li> + <li><a href="/en-US/docs/Project:MDN/Localizing/Localization_projects">লোকালাইজেশন প্রজেক্ট সমূহ</a> পাতায় তালিকাভুক্ত অন্যান্য লোকালাইজারদের সাথে যুক্ত হউন (৩০ মিনিট)</li> +</ul> + +<h3 id="অপশন_৫_আমি_কিছু_ভুল_তথ্য_পেয়েছি_কিন্তু_আমি_জানিনা_এটা_কিভাবে_সমাধান_করতে_হবে">অপশন ৫: আমি কিছু ভুল তথ্য পেয়েছি, কিন্তু আমি জানিনা এটা কিভাবে সমাধান করতে হবে</h3> + +<p><a class="external" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">ডকুমেন্টেশন বাগ ফাইল</a> করে আপনি সমস্যার কথা জানাতে পারেন। (৫ মিনিট)</p> + +<p>এই ফিল্ডের মান গুলো ব্যবহার করুনঃ</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Bugzilla field</strong></td> + <td><strong>Value</strong></td> + </tr> + <tr> + <td><code>product</code></td> + <td><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer+Documentation">Developer Documentation</a></td> + </tr> + <tr> + <td><code>component</code></td> + <td>[প্রাসঙ্গিক একটি জায়গা নির্বাচন করুন, অথবা আপনি যদি নিশ্চিত না হন বা সঠিকটি খুঁজে না পান, তাহলে "General" নির্বাচন করুন]</td> + </tr> + <tr> + <td><code>URL</code></td> + <td>যেই পেজে আপনি সমস্যাটির সম্মুখীন হয়েছেন।</td> + </tr> + <tr> + <td><code>Description</code></td> + <td>সমস্যাটি সম্পর্কে আপনি যতটা জানেন তা লিখতে পারেন। অথবা সমস্যাটি বিস্তারিত বর্ণনা করতে পারেন এবং কোথায় এ সম্পর্কে বিস্তারিত তথ্য পাওয়া যাবে ইত্যাদি লিখতে পারেন। এর মধ্যে বিভিন্ন মানুষকেও অন্তর্ভুক্ত করতে পারেন ("talk to so-and-so") এবং বিভিন্ন ওয়েব লিঙ্কও দিতে পারেন।</td> + </tr> + </tbody> +</table> + +<h2 id="MDN_এ_আপনি_আরও_যা_যা_করতে_পারেন">MDN এ আপনি আরও যা যা করতে পারেন</h2> + +<ul> + <li><a href="/bn-BD/docs/Project:en/Project:Community">MDN পরিবারে যুক্ত হউন</a>।</li> + <li><a href="/en-US/profile">আপনার প্রোফাইলে তথ্যপূর্ণ করুন</a> যাতে অন্যেরা আপনার সম্পর্কে আরও জানতে পারে।</li> + <li><a href="/bn-BD/docs/MDN/Contribute">MDN এ অবদান রাখা</a> সম্পর্কে আরও জানুন। + <ul> + <li><strong>বাংলায় অনুবাদ </strong>শুরু করবেন যেভাবে - <a href="/bn-BD/docs/Project:MDN/%E0%A6%85%E0%A6%AC%E0%A6%A6%E0%A6%BE%E0%A6%A8/mozillabd-l10n-team">স্ক্রিনশট ও গাইড</a></li> + </ul> + </li> +</ul> 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 +--- +<div>{{MDNSidebar}}</div><p class="summary">MDN এর একটি "live sample" ব্যবস্থা আছে, যেখানে একটি পাতা প্রদর্শনের জন্য সরাসরি কোডের উদাহরণটিকেই ব্যবহার করা হয়। তবে এখনো এমন কিছু নিবন্ধ রয়েছে, যেগুলোতে শুধু কোড দেখানো হয়েছে, কিন্তু সেগুলো ব্যবহার করা হয়নি। এগুলো ব্যবহারোপযোগী করতে রুপান্তর করা প্রয়োজন।</p> +<table class="full-width-table"> + <tbody> + <tr> + <td><strong>এটা কোথায় করতে হবে?</strong></td> + <td>যেসব নিবন্ধে <a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a> ট্যাগ রয়েছে।</td> + </tr> + <tr> + <td><strong>এই কাজটি করার জন্য আমার কি জানা প্রয়োজন?</strong></td> + <td> + <ul> + <li>কোডের উদাহরনের উপর নির্ভর করে HTML, CSS এবং/অথবা JavaScript এর জ্ঞান থাকতে হবে।</li> + <li>নিবন্ধের মধ্যে <a href="/en-US/docs/Project:Introduction_to_KumaScript">KumaScript</a> ম্যাক্রো সমূহ ব্যবহারের সক্ষমতা।</li> + </ul> + </td> + </tr> + <tr> + <td><strong>কাজটি করার জন্য কি কি ধাপ অনুসরণ করতে হবে ?</strong></td> + <td> + <p>কিভাবে লাইভ স্যাম্পল তৈরি করতে হবে সহ, লাইভ স্যাম্পল সিস্টেম সম্পর্কে সম্পূর্ণ ধারনা পেতে <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Live_samples">লাইভ স্যাম্পল সিস্টেম ব্যবহার করা</a> নিবন্ধটি দেখুন।</p> + <ol> + <li><a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a> পাতায় তালিকাভুক্ত নিবন্ধ গুলো থেকে যেকোনো একটি নিবন্ধ নির্বাচন করুন, যেটাতে কাজ করতে আপনি স্বচ্ছন্দ বোধ করবেন।</li> + <li>কোডের উদাহরণটিকে "live" হওয়ার জন্য রুপান্তর করুন।</li> + <li>উদাহরণটির আউটপুট দেখানোর জন্য পূর্বে যে কোড বা ইমেজ ব্যবহার করা হয়েছিল, তা অপসারণ করুন।</li> + </ol> + <p> </p> + </td> + </tr> + </tbody> +</table> +<p> </p> 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 +--- +<div>{{MDNSidebar}}</div><p>এভাবে আমরা MDN এ একটি অ্যাকাউন্ট তৈরি করবোঃ</p> +<ol style="list-style-type: -moz-bengali; list-style-type: bengali;"> + <li>পাতার উপরে থাকা<strong> Sign in</strong> <strong>with Persona</strong> বাটনে ক্লিক করুন। একটি পারসোনা লগইনের উইন্ডো চালু হবে।</li> + <li>নতুন অ্যাকাউন্ট এর জন্য যে ইমেইল ঠিকানা ব্যবহার করতে চান, সেটি লিখুন এবং <strong>next </strong>এ ক্লিক করুন।</li> + <li>এরপরে যেটা হবে, তা নির্ভর করে যে, আপনি এর আগে এই ইমেইল ঠিকানাটি পারসোনায় ব্যবহার করেছেন, কি না। + <ul> + <li>যদি এর আগে ব্যবহার করে থাকেন, তবে পারসোনা উইন্ডোটি আপনার পাসওয়ার্ড চাইবে। পাসওয়ার্ড দিন এবং <strong>done</strong> ক্লিক করুন।</li> + <li>যদি এর আগে কখনো পারসোনা ব্যবহার না করে থাকেন, তবে আপনাকে পাসওয়ার্ড নির্বাচন করতে বলবে। + <ol style="list-style-type: -moz-bengali; list-style-type: bengali;"> + <li>দুইবার পাসওয়ার্ড দিন এবং <strong>done</strong> ক্লিক করুন।</li> + <li>আপনার ইমেইল চেক করুন এবং দেখুন যে, no-reply@persona.org থেকে কোন মেইল এসেছে কি না; যদি ইনবক্সে না পান, তবে spam বক্সে দেখুন।</li> + <li> মেসেজে থাকা নিবন্ধন লিঙ্কে ক্লিক করুন। আপনার পারসোনা অ্যাকাউন্ট তৈরি।</li> + <li>এবার আপনি যে ট্যাব বা উইন্ডো থেকে MDN এ প্রবেশ (signing in) করতে গিয়েছিলেন, সেখানে ফিরে যান।</li> + </ol> + </li> + </ul> + </li> + <li>একবার যখন আপনি পারসোনায় অনুমোদিত হয়ে যাবেন, তখন MDN এর জন্য একটি নতুন ব্যবহারকারী পাতা (Profile page) পাবেন।</li> + <li>আপনার প্রোফাইলের জন্য একটি নাম (user name) নির্বাচন করুন এবং <strong>Create new profile</strong> ক্লিক করুন।</li> +</ol> +<div class="note"> + <p><strong>বিশেষ দ্রষ্টব্য:</strong> নতুন ইউজার নামের মধ্যে কোন স্পেস বা @ থাকতে পারবে না। মনে রাখবেন, আপনি যেসব কাজ করেছেন, তা চিহ্নিত করতে আপনার ইউজারনেম সার্বজনীন ভাবে প্রদর্শন করা হবে।</p> +</div> +<p> </p> 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 +--- +<div>{{MDNSidebar}}</div><p>These articles provide step-by-step guides to accomplishing specific goals when contributing to MDN.</p> +<p>{{LandingPageListSubpages}}</p> 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 +--- +<div>{{MDNSidebar}}</div><p>স্বাগতম! এই পেইজ দেখার মাধ্যমে MDN এর অবদানকারী হওয়ার পথে আপনি আপনার প্রথম পদক্ষেপ নিলেন। স্টাইল গাইড, আমাদের এডিটর এবং টুলস ব্যবহার করার গাইড এবং আরও অনেক কিছু সহ MDN এ অবদান রাখার সকল ক্ষেত্র সম্পর্কে এই গাইড এ লেখা আছে।</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="অবদানকারীদের_জন্য_গাইড">অবদানকারীদের জন্য গাইড</h2> + +<dl> + <dt><a href="/bn-BD/docs/MDN/Quick_start"> শুরু করা</a></dt> + <dd>মজিলাতে আপনার প্রথম অবদান রাখতে ও সেট আপ হতে সাহায্যকারী একটি কুইক স্টার্ট গাইড এটি।</dd> + <dt><a href="/bn-BD/docs/MDN/Contribute/Style_guide">কনটেন্ট এবং স্টাইল গাইড</a></dt> + <dt><span style="font-weight: normal; line-height: 1.5;"> MDN এর কনটেন্ট এবং স্টাইল গাইড লেখার স্টাইল, পেইজ লে-আউট এবং কনটেন্ট এর স্টাইল সম্পর্কে বিশদ তথ্য দেয়, যাতে করে আপনি যেই কনটেন্টটি লিখবেন তা MDN এর অন্যান্য কনটেন্ট এর সাথে খাপ খেয়ে যায়।</span></dt> + <dd> </dd> + <dt><a href="/bn-BD/docs/MDN/Contribute/Editor"> এডিটর গাইড</a></dt> + <dd>MDN এর এডিটর ব্যবহার করার জন্য একটি পূর্ণাঙ্গ গাইড। </dd> + <dt><a href="/bn-BD/docs/MDN/Contribute/Conventions">Terminology and conventions</a></dt> + <dd>Our terminology and conventions guide provides information you can use to ensure that you use the correct terminology to describe things.</dd> + <dt><a href="/bn-BD/docs/MDN/Contribute/Community">Working with the MDN community</a></dt> + <dd>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.</dd> + <dt><a href="/bn-BD/docs/MDN/Contribute/FAQ">Frequently asked questions</a></dt> + <dd>Tips and answers to the most common questions about contributing to MDN.</dd> +</dl> + +<dl> + <dt><a href="/bn-BD/docs/MDN/Contribute/Kuma">Contributing to Kuma</a></dt> + <dd>A guide to contributing to the Kuma project. Kuma is the platform that powers the MDN Web site.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="How_to...">How to...</h2> + +<p>Our <a href="/bn-BD/docs/MDN/Contribute/Howto">how-to guides</a> provide step-by-step instructions to help you accomplish specific tasks when contributing to MDN.</p> + +<dl> + <dt><a href="/bn-BD/docs/MDN/Contribute/Howto/Document_a_CSS_property">How to document a CSS property</a></dt> + <dd>A guide to writing documentation of CSS properties. All CSS property documents should match the style and layout described in this article.</dd> + <dt>How to document an HTML element</dt> + <dd>This guide to documenting HTML elements will ensure that the documents you write match others on MDN.</dd> + <dt><a href="/bn-BD/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a></dt> + <dd>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.</dd> + <dt><a href="/bn-BD/docs/MDN/Contribute/Howto/Interpret_specifications">How to interpret specifications</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Localization">Localization</h2> + +<dl> + <dt><a href="/bn-BD/docs/MDN/Contribute/Localize/Tour">Localization guided tour</a></dt> + <dd>This guided tour will teach you how to localize content on MDN.</dd> + <dt><a href="/bn-BD/docs/MDN/Contribute/Localize/Guide">Localization guide</a></dt> + <dd>This guide provides details about the localization process for MDN content.</dd> + <dt><a href="/bn-BD/docs/MDN/Contribute/Localize/Localization_projects">Localization projects</a></dt> + <dd>Find the localization project for your language—or, if there isn't one, learn how to start a new one!</dd> +</dl> +</div> +</div> + +<p> </p> 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 +--- +<div>{{MDNSidebar}}</div><p>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.</p> +<p>{{LandingPageListSubpages}}</p> +<h2 id="Localization_tools">Localization tools</h2> +<p>There are several useful tools that you'll use during localization work:</p> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Verbatim</a></dt> + <dd> + Used for translation of strings across multiple Mozilla projects, including the MDN user interface (as well as the Firefox user interface).</dd> + <dt> + <a href="http://transvision.mozfr.org/" title="http://transvision.mozfr.org/">Transvision</a></dt> + <dd> + 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.</dd> +</dl> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/Mozilla/Localization" title="/en-US/docs/Mozilla/Localization">Localization at Mozilla</a></li> +</ul> diff --git a/files/bn/mdn/contribute/localize/পেইজ_অনুবাদ/index.html b/files/bn/mdn/contribute/localize/পেইজ_অনুবাদ/index.html new file mode 100644 index 0000000000..8e357fb0bc --- /dev/null +++ b/files/bn/mdn/contribute/localize/পেইজ_অনুবাদ/index.html @@ -0,0 +1,52 @@ +--- +title: MDN এর পাতার অনুবাদ +slug: MDN/Contribute/Localize/পেইজ_অনুবাদ +tags: + - Localization + - MDN + - NeedsContent + - বাংলা + - বাংলাদেশ +translation_of: MDN/Contribute/Localize/Translating_pages +--- +<div>{{MDNSidebar}}</div><p>MDN-এ কিভাবে অনুবাদ করতে হয় এবং বিভিন্ন বিষয় ভালো ভাবে উপস্থাপন পদ্ধতি উভয় সম্পর্কেই এই নিবন্ধনটি প্রথমিক ধারণা প্রদান করবে ।</p> + +<h2 id="একটি_নতুন_পাতার_অনুবাদ_শুরু_করা">একটি নতুন পাতার অনুবাদ শুরু করা </h2> + +<p>যখন আপনি একটি ওয়েব পেজের সাথে পরিচিত হন, আপনি সেটিকে নিজের ভাষায় অনুবাদ করার জন্য নিচের ধাপগুলো অনুসরণ করুনঃ<span style="line-height: 1.5;"> </span></p> + +<ol> + <li><span style="line-height: 1.5;">ভাষার মেনুটি খোলার জন্য উপরে ডান দিকে <strong>ভাষার আইকনটিতে </strong>({{FontAwesomeIcon("icon-language")}})<span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">চাপ দিন (ক্লিক করুন) এবং এরপর, <strong>Add a Translation</strong> এ ক্লিক করুন। বাছাই করা ভাষার ওয়েব পেজটি তখন লোড হবে। </span></span></li> + <li>যে ভাষাতে অনুবাদ করতে চান সে ভাষাতে ক্লিক করুন। অনুবাদযোগ্য ভাষা বাম পাশে মূল ভাষা তে প্রদর্শিত হবে ।</li> + <li>অনুবাদ বর্ননার অধীনে, আপনি ভুমিকা এবং ঐচ্ছিকভাবে স্লাগ কে আপনার কাংখিত ভাষাতে অনুবাদ করতে পারেন। স্ল্যাগ হচ্ছে একটা পাতার URL এর সর্বশেষ অংশ (উদাহরন স্বরুপঃ এই লেখার "Translating Pages" )। কিছু ভাষা সম্প্রদায় স্ল্যাগ কে অনুবাদ না করে স্ল্যাগ কে ইংরেজ়ীতে রেখে দেয়। সাধারন অনুশীলনকে স্থির করার জন্য অনান্য লেখার সাথে আপনার ভাষায় তূলনা করুন।আপনার কাজ শেষ হয়ে গেল <strong>Translate Content</strong> এ আরও room তৈরীর জন্য <strong>Translate Description</strong> এর পরবর্তীতে অবস্থিত বিয়োগ চিহ্নে ক্লিক করুন।</li> + <li><strong>Translate Content</strong> এর অধীনে পাতার মূল অংশ অনুবাদ করুন।</li> + <li> কমপক্ষে পাতার একটি ট্যাগ পুরন করুন।</li> + <li>আপনার কাজ শেষ হয়ে গেলে <strong> পরিবর্তন সংরক্ষণ করুন</strong> এ ক্লিক করুন।</li> +</ol> + +<div class="note"><strong>নোট:</strong> অনুবাদকৃত লেখার ইউজার ইন্টেরফেস উপাদানসমুহ শুরুতে ইংরেজীতে প্রদর্শিত হয়।পরবর্তী পরিদর্শনে একটা নির্দিষ্ট লেখা কে অনুবাদ করার জন্য UI যথার্থ ভাষা তে প্রদর্শিত হয় যদি ঐ ভাষা MDN এর লোকালাইজেশনে পাওয়া যায়। <a href="https://localize.mozilla.org/projects/mdn/" title="https://localize.mozilla.org/projects/mdn/">Verbatim</a> এর সাহায্যে MDN ইউজার ইন্টেরফেস লোকালাইজ করা যায়।কিভাবে এই টুল ব্যবহার করবেন তার বিস্তারিত <a href="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Localizing with Verbatim</a> এ দেখুন।</div> + +<h2 id="অনুবাদকৃত_পাতার_সম্পাদনা">অনুবাদকৃত পাতার সম্পাদনা</h2> + +<ul> + <li>অনুবাদকৃত পাতায় , <strong>সম্পাদনা</strong> বাটন-এ ক্লিক করুন (কোন সময় এটি থাকে target language এর অধীনে) । এর পর Translating Article view খুলবে।</li> +</ul> + +<p>যদি অনুবাদের পর অনুবাদকৃত নিবন্ধনটির ইংরেজী সংস্করণে পরিবর্তন হয়, ঐ ক্ষেত্রে ইংরেজী সংস্করণে যে অংশটুকু পরিবর্তন হয়েছে সেখানে Translating Article view সোর্স লেভেলে দেখাবে "diff" । এতে করে নিবন্ধনটির কোন অংশে নতুন অনুবাদ দরকার সেটি সহজেই বোঝা যায় ।</p> + +<h2 id="ট্যাগ_অনুবাদ"><span class="short_text" id="result_box" lang="bn"><span class="hps">ট্যাগ</span> <span class="hps">অনুবাদ</span></span></h2> + +<p>একটি পাতায় অন্তত একটি ট্যগ থাকা উচিত । হোক না সেটি অনুবাদ ।</p> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">কিছু</span> <span class="hps">ট্যাগ</span> <span class="hps">অনুসন্ধান ফলাফল ফিল্টার বা কমানোর জন্য</span> <span class="hps">ব্যবহার করা হয়</span></span> । অথবা যারা বিষয়টি নিয়ে কাজ করছেন তাদের যোগাযোগ, মতামত বা কথোপকথন এর মাধ্যম হিসাবে ব্যবহার এর জন্য । এসব অনুবাদ না করাটাই উচিত হবে । এসব ট্যাগ সম্পর্কে জানতে পড়ুন <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">tagging standards</a>. দলীয় বিষয় গুলোতে আপনি অনুবাদকৃত ট্যাগ যোগ করতে পারেন যদি সেটি standards tags এর মধ্যে না থাকে ।</p> + +<h2 id="নতুন_অনুবাদকদের_জন্য_পরামর্শ">নতুন অনুবাদকদের জন্য পরামর্শ</h2> + +<p>যদি আপনি MDN এর অনুবাদে নতুন হন, এখানে কিছু পরামর্শ দেওয়া হলঃ</p> + +<ul> + <li>নবাগত ব্যাক্তিদের অনুবাদের জন্য টিপ্পনি প্রবন্ধগুলি কার্যকর, কারণ সেগুলি সংক্ষিপ্ত এবং সাধারণ। </li> + <li>যে সমস্ত প্রবন্ধগুলি <a href="https://developer.mozilla.org/en-US/docs/tag/l10n%3Apriority">"l10n:priority"</a> হিসাবে ট্যাগ করা থাকে সেগুলি অনুবাদ করতে উচ্চ অগ্রাধিকার হিসেবে বিবেচনা করা হয়। আর সাধারণত, টিউটোরিয়াল এবং ধারণাগত নিবন্ধগুলি রেফারেন্স পেজের তুলনায় বেশি প্রাধান্য পায়, যেহেতু পাঠকদের অনুবাদের সবচেয়ে বেশি প্রয়োজন নতুন ধারনা শেখার। </li> + <li>যদি আপনি এমন কোন লেখা দেখেন যেটা জোড়া কোঁকড়ানো ধনুরবন্ধনি দিয়ে আবদ্ধ, যেমন \{{some-text("more text")}}, সেটিকে অননুবাদিত অবস্থায় রেখে দিন, এবং যতিচিহ্ন অক্ষরগুলি পরিবর্তন করবেন না। এগুলি হচ্ছে <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Macros">macro</a>, যেগুলি পেজের(পাতার) গঠন অথবা দরকারি কিছু তৈরী করে । আপনি হয়ত এমন কিছু অননুবাদিত লেখা দেখতে পারেন যেগুলি ম্যাক্র দিয়ে তৈরী; এই সম্পর্কে চিন্তা করবেন না যতক্ষণ না আপনি MDN এ বেশি অভিজ্ঞতা অর্জন করছেন। (এই সমস্ত লেখা গুলিকে পরিবর্তিন করার জন্য <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Tools/Template_editing">বিশেষাধিকার</a> দরকার কারণ ম্যাক্র খুব শক্তিশালী হতে পারে।) আপনি আগ্রহী থাকলে <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">সাধারণ ভাবে ব্যবহৃত ম্যাক্রগুলি</a> দেখতে পারেন যে এগুলি কি কি করতে পারে।</li> + <li>স্থানীয়করণ সম্পর্কে আরো জানতে <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Localize/Localization_projects">স্থানীয়করণ প্রকল্প পৃষ্ঠা দেখুন.</a></li> +</ul> 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 +--- +<div>{{MDNSidebar}}</div><p><span class="seoSummary">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.</span> By following these guides, you can ensure that the material you produce is clean and easy to use.</p> +<p>{{LandingPageListSubpages}}</p> 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 +--- +<div>{{MDNSidebar}}</div> + +<p><span class="seoSummary">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.</span> 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.</p> + +<p>If you're looking for specifics of how a given type of page should be structured, see the <a href="/en-US/docs/MDN/Contribute/Content/Layout">MDN page layout guide</a>.</p> + +<p>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.</p> + +<p>For style standards that apply to content written for sites other than MDN, refer to the <a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>.</p> + +<h2 id="Page_name_and_heading_capitalization" name="Page_name_and_heading_capitalization">Basics</h2> + +<h3 id="Page_titles">Page titles</h3> + +<p>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 "<em><locale>/docs/</em>".</p> + +<h4 id="Title_and_heading_capitalization">Title and heading capitalization</h4> + +<p>Page titles and section headings should use sentence-style capitalization (only capitalize the first word and proper nouns) rather than headline-style capitalization:</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: "একটি নতুন পদ্ধতি তৈরি করা হয় জাভাস্ক্রিপ্ট বসানোর জন্য"</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: "A New Method for Creating JavaScript Rollovers"</li> +</ul> + +<p>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.</p> + +<h4 id="Choosing_titles_and_slugs">Choosing titles and slugs</h4> + +<p>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.</p> + +<p>Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.</p> + +<h4 id="Creating_new_subtrees">Creating new subtrees</h4> + +<p>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.</p> + +<p>For example, consider the <a href="/en-US/docs/Web/JavaScript">JavaScript</a> guide, which is structured like this:</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript/Guide</a> - Main table-of-contents page</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview" title="JavaScript/Guide/JavaScript_Overview">JavaScript/Guide/JavaScript Overview</a></li> + <li><a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">JavaScript/Guide/Functions</a></li> + <li><a href="/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details_of_the_Object_Model">JavaScript/Guide/Details of the Object Model</a></li> +</ul> + +<p>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.</p> + +<h3 id="Sections.2C_Paragraphs.2C_Newlines" name="Sections.2C_Paragraphs.2C_Newlines">Sections, paragraphs, and newlines</h3> + +<p>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.</p> + +<p>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.</p> + +<h3 id="Text_Formatting" name="Text_Formatting">Text formatting and styles</h3> + +<p>Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.</p> + +<div class="note"><strong>Note: </strong>The "Note" style is used to call out important notes, like this one.</div> + +<div class="warning"><strong>Warning:</strong> Similarly, the "Warning" style creates warning boxes like this.</div> + +<p>Unless specifically instructed to do so, <strong>do not</strong> use the HTML <code>style</code> attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.</p> + +<h3 id="Code_sample_style_and_formatting">Code sample style and formatting</h3> + +<h4 id="Tabs_and_line_breaks">Tabs and line breaks</h4> + +<p>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:</p> + +<pre class="brush: js notranslate">if (condition) { + /* handle the condition */ +} else { + /* handle the "else" case */ +} +</pre> + +<p>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:</p> + +<pre class="brush: js notranslate">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); +</pre> + +<h4 id="Inline_code_formatting">Inline code formatting</h4> + +<p>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 <code class="js plain">frenchText()</code> function".</p> + +<p>Method names should be followed by a pair of parentheses: <code>doSomethingUseful()</code>. This helps to differentiate methods from other code terms.</p> + +<h4 id="Syntax_highlighting">Syntax highlighting</h4> + +<p><img alt='Screenshot of the "syntax highlighting" menu.' src="https://mdn.mozillademos.org/files/7857/syntax-highlighting-menu.png" style="border-style: solid; border-width: 1px; float: right; height: 315px; margin: 2px 4px; width: 183px;">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:</p> + +<div class="line number2 index1 alt1"> +<pre class="brush: js notranslate">for (var i = 0, j = 9; i <= 9; i++, j--) + document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);</pre> +</div> + +<p>If no appropriate transformation is available, use the <code>pre</code> tag without specifying a language ("No Highlight" in the language menu).</p> + +<pre class="notranslate">x = 42;</pre> + +<h4 id="Styling_HTML_element_references">Styling HTML element references</h4> + +<p>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.</p> + +<dl> + <dt>Element names</dt> + <dd>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, <strong>enclose the name in angle brackets</strong> and use "Code (inline)" style (e.g., <code><title></code>).</dd> + <dt>Attribute names</dt> + <dd>Use <strong>bold face</strong>.</dd> + <dt>Attribute definitions</dt> + <dd>Use the {{TemplateLink("htmlattrdef")}} macro (e.g., <span class="nowiki">\{{htmlattrdef("type")}}</span>) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., <span class="nowiki">\{{htmlattrxref("attr","element")}}</span>) to reference attribute definitions.</dd> + <dt>Attribute values</dt> + <dd>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 <strong>type</strong> attribute of an <code><input></code> element is set to <code>email</code> or <code>tel</code> ...</dd> + <dt>Labeling attributes</dt> + <dd>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.</dd> +</dl> + +<h3 id="Latin_abbreviations" name="Latin_abbreviations">Latin abbreviations</h3> + +<h4 id="In_notes_and_parentheses" name="In_notes_and_parentheses">In notes and parentheses</h4> + +<ul> + <li>Common Latin abbreviations (etc., i.e., e.g.) may be used in parenthetical expressions and in notes. Use periods in these abbreviations. + <ul> + <li><span class="correct"><strong>Correct</strong></span>: Web browsers (e.g. Firefox) can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, e.g. Firefox, can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, (eg: Firefox) can be used ...</li> + </ul> + </li> +</ul> + +<h4 id="In_running_text" name="In_running_text">In running text</h4> + +<ul> + <li>In regular text (i.e. text outside of notes or parentheses), use the English equivalent of the abbreviation. + <ul> + <li><span class="correct"><strong>Correct</strong></span>: ... web browsers, and so on.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: ... web browsers, etc.</li> + <li><span class="correct"><strong>Correct</strong></span>: Web browsers such as Firefox can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> + </ul> + </li> +</ul> + +<h4 id="Meanings_and_English_equivalents_of_Latin_abbreviations" name="Meanings_and_English_equivalents_of_Latin_abbreviations">Meanings and English equivalents of Latin abbreviations</h4> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Abbrev</th> + <th>Latin</th> + <th>English</th> + </tr> + <tr> + <td>cf.</td> + <td><em>confer</em></td> + <td>compare</td> + </tr> + <tr> + <td>e.g.</td> + <td><em>exempli gratia</em></td> + <td>for example</td> + </tr> + <tr> + <td>et al.</td> + <td><em>et alii</em></td> + <td>and others</td> + </tr> + <tr> + <td>etc.</td> + <td><em>et cetera</em></td> + <td>and so forth, and so on</td> + </tr> + <tr> + <td>i.e.</td> + <td><em>id est</em></td> + <td>that is, in other words</td> + </tr> + <tr> + <td>N.B.</td> + <td><em>nota bene</em></td> + <td>note well</td> + </tr> + <tr> + <td>P.S.</td> + <td><em>post scriptum</em></td> + <td>postscript</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note:</strong> 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 <strong>you</strong> 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.</p> +</div> + +<h3 id="Acronyms_and_abbreviations" name="Acronyms_and_abbreviations">Acronyms and abbreviations</h3> + +<h4 id="Capitalization_and_periods" name="Capitalization_and_periods">Capitalization and periods</h4> + +<p>Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: XUL</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: X.U.L.; Xul</li> +</ul> + +<h4 id="Expansion" name="Expansion">Expansion</h4> + +<p>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 <a href="/en-US/docs/Glossary">glossary</a> entry describing the technology.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: "XUL (XML User Interface Language) is Mozilla's XML-based language..."</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: "XUL is Mozilla's XML-based language..."</li> +</ul> + +<h4 id="Plurals_of_acronyms_and_abbreviations" name="Plurals_of_acronyms_and_abbreviations">Plurals of acronyms and abbreviations</h4> + +<p>For plurals of acronyms or abbreviations, add <em>s</em>. Don't use an apostrophe. Ever. Please.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: CD-ROMs</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: CD-ROM's</li> +</ul> + +<h3 id="Contractions" name="Contractions">Capitalization</h3> + +<p>Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".</p> + +<h3 id="Contractions" name="Contractions">Contractions</h3> + +<p>Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!</p> + +<h3 id="Pluralization" name="Pluralization">Pluralization</h3> + +<p>Use English-style plurals, not the Latin- or Greek-influenced forms.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: syllabuses, octopuses</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: syllabi, octopi</li> +</ul> + +<h3 id="Hyphenation" name="Hyphenation">Hyphenation</h3> + +<p>Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.</p> + +<ul> + <li><font color="green"><strong>Correct</strong></font>: email, re-elect, co-op</li> + <li><font color="red"><strong>Incorrect</strong></font>: e-mail, reelect, coop</li> +</ul> + +<h3 id="Gender-neutral_language">Gender-neutral language</h3> + +<p>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.<br> + <br> + Let's take the following example:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the user if he allows the web page to make use of his web cam.</p> +</blockquote> + +<blockquote> +<p>A confirmation dialog appears, asking the user if she allows the web page to make use of her web cam.</p> +</blockquote> + +<p>Both versions in this case are gender-specific. This could be fixed by using gender-neutral pronouns:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the user if they allow the web page to make use of their web cam.</p> +</blockquote> + +<div class="note"> +<p><strong>Note:</strong> 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 "<a href="http://en.wikipedia.org/wiki/Singular_they">singular 'they.'</a>"</p> +</div> + +<p>You can use both genders:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.</p> +</blockquote> + +<p>making the users plural:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.</p> +</blockquote> + +<p>The best solution, of course, is to just rewriting to eliminate the pronouns completely:</p> + +<blockquote> +<p>A confirmation dialog appears, requesting the user's permission for web cam access.</p> +</blockquote> + +<blockquote> +<p>A confirmation dialog box appears, which asks the user for permission to use the web cam.</p> +</blockquote> + +<p>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.</p> + +<h3 id="Numbers_and_numerals" name="Numbers_and_numerals">Numbers and numerals</h3> + +<h4 id="Dates">Dates</h4> + +<p>For dates (not including dates in code samples) use the format "January 1, 1990".</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: February 24, 2006</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: February 24th, 2006; 24 February, 2006; 24/02/2006</li> +</ul> + +<p>Alternately, you can use the YYYY/MM/DD format.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 2006/02/24</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 02/24/2006; 24/02/2006; 02/24/06</li> +</ul> + +<h4 id="Decades" name="Decades">Decades</h4> + +<p>For decades, use the format "1990s". Don't use an apostrophe.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 1990s</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 1990's</li> +</ul> + +<h4 id="Plurals_of_numerals" name="Plurals_of_numerals">Plurals of numerals</h4> + +<p>For plurals of numerals add <em>"s"</em>. Don't use an apostrophe.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 486s</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 486's</li> +</ul> + +<h4 id="Commas" name="Commas">Commas</h4> + +<p>In running text, use commas only in five-digit and larger numbers.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 4000; 54,000</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 4,000; 54000</li> +</ul> + +<h3 id="Punctuation" name="Punctuation">Punctuation</h3> + +<h4 id="Serial_comma" name="Serial_comma">Serial comma</h4> + +<p><strong>Use the serial comma</strong>. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: I will travel on trains, planes, and automobiles.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: I will travel on trains, planes and automobiles.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> This is in contrast to the <a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>, which specifies that the serial comma is not to be used. MDN is an exception to this rule.</p> +</div> + +<h3 id="Spelling" name="Spelling">Spelling</h3> + +<p>For words with variant spellings, always use the first entry at <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. Do not use variant spellings.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: localize, honor</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: localise, honour</li> +</ul> + +<h3 id="Terminology">Terminology</h3> + +<h4 id="Obsolete_vs._deprecated">Obsolete vs. deprecated</h4> + +<p>It's important to be clear on the difference between the terms <strong>obsolete</strong> and <strong>deprecated</strong>.</p> + +<dl> + <dt>Obsolete:</dt> + <dd>On MDN, the term <strong>obsolete</strong> 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.</dd> + <dt>Deprecated:</dt> + <dd>On MDN, the term <strong>deprecated</strong> 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 <em>obsolete</em> 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.</dd> +</dl> + +<h4 id="HTML_elements">HTML elements</h4> + +<p>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).</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: the {{HTMLElement("span")}} element</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: the span tag</li> +</ul> + +<h4 id="User_interface_actions">User interface actions</h4> + +<p>In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: Click the Edit button.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Click Edit.</li> +</ul> + +<h3 id="Voice">Voice</h3> + +<p>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.</p> + +<h2 id="Wiki_markup_and_usage">Wiki markup and usage</h2> + +<h3 id="External_links">External links</h3> + +<p>To automatically create a link to a Bugzilla bug, use this template:</p> + +<pre class="notranslate">\{{Bug(322603)}} +</pre> + +<p>This results in:</p> + +<p>{{Bug(322603)}}</p> + +<p>For WebKit bugs, you can use this template:</p> + +<pre class="notranslate">\{{Webkitbug("322603")}} +</pre> + +<p>This results in:</p> + +<p>{{Webkitbug("322603")}}</p> + +<h3 id="Page_tags">Page tags</h3> + +<p>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 <a href="/en-US/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a> guide.</p> + +<p>The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:</p> + +<p><img alt="Screenshot of the UX for adding and removing tags on MDN" src="https://mdn.mozillademos.org/files/7859/tag-interface.png" style="border-style: solid; border-width: 1px; height: 167px; width: 863px;"></p> + +<p>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.</p> + +<p>To remove a tag, simply click the little "X" icon in the tag.</p> + +<h4 id="Tagging_pages_that_need_work">Tagging pages that need work</h4> + +<p>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.</p> + +<h4 id="Tagging_obsolete_pages">Tagging obsolete pages</h4> + +<p>Use the following tags for pages that are not current:</p> + +<ul> + <li><em>Junk</em>: Use for spam, pages created by mistake, or content that is so bad that it should be deleted. Pages with this tag are deleted from time to time.</li> + <li><em>Obsolete</em>: Use for content that is technically superceded, but still valid in context. For example an HTML element that is obsolete in HTML5 is still valid in HTML 4.01. You can also use the <span class="nowiki">{{TemplateLink("obsolete_header")}}</span> macro to put a prominent banner on the topic.</li> + <li><em>Archive</em>: Use for content that is technically superceded and no longer useful. If possible, add a note to the topic referring readers to a more current topic. For example, a page that describes how to use the Mozilla CVS repository should refer readers to a current topic on using Mercurial repos. (If no corresponding current topic exists, use the <em>NeedsUpdate</em> tag, and add an explanation on the Talk page.) Pages with the Archive tag are eventually moved from the main content of MDN to the <a href="/en-US/docs/Archive">Archive</a> section.</li> +</ul> + +<h3 id="SEO_summary">SEO summary</h3> + +<p>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.</p> + +<p>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 <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Editing#Formatting_styles">"SEO summary" style in the WYSIWYG editor</a>.</p> + +<h3 id="Landing_pages">Landing pages</h3> + +<p><strong>Landing pages</strong> are pages at the root of a topic area of the site, such as the main <a href="/en-US/docs/CSS" title="CSS">CSS</a> or <a href="/en-US/docs/HTML" title="HTML">HTML</a> pages. They have a standard format that consists of three areas:</p> + +<ol> + <li>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.</li> + <li>A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.</li> + <li>An <strong>optional</strong> "Browser compatibility" section at the bottom of the page.</li> +</ol> + +<h4 id="Creating_a_page_link_list">Creating a page link list</h4> + +<p>The link list section of an MDN landing page consists of two columns. These are created using the following HTML:</p> + +<pre class="brush: html notranslate"><div class="row topicpage-table"> + <div class="section"> + ... left column contents ... + </div> + <div class="section"> + ... right column contents ... + </div> +</div></pre> + +<p>The left-hand column should be a list of articles, with an <code><h2></code> 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 <code><dl></code> list of articles, with each article's link in a <code><dt></code> block and a brief one-or-two sentence summary of the article in the corresponding <code><dd></code> block.</p> + +<p>The right-hand column should contain one or more of the following sections, in order:</p> + +<dl> + <dt>Getting help from the community</dt> + <dd>This should provide information on Matrix chat rooms and mailing lists available about the topic. The heading should use the class "Community".</dd> + <dt>Tools</dt> + <dd>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".</dd> + <dt>Related topics</dt> + <dd>A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".</dd> +</dl> + +<p><strong><<<finish this once we finalize the landing page standards>>></strong></p> + +<h2 id="Using_inserting_images">Using, inserting images</h2> + +<p>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:</p> + +<ol> + <li>Attach the desired image file to the article (at the bottom of every article in edit mode)</li> + <li>Create an image in the WYSIWYG editor</li> + <li>In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image</li> + <li>Press OK.</li> +</ol> + +<h2 id="Other_References">Other References</h2> + +<h3 id="Preferred_style_guides" name="Preferred_style_guides">Preferred style guides</h3> + +<p>If you have questions about usage and style not covered here, we recommend referring to the <a href="http://www.economist.com/research/StyleGuide/">Economist style guide</a> or, failing that, the <a href="http://www.amazon.com/gp/product/0226104036/">Chicago Manual of Style</a>.</p> + +<h3 id="Preferred_dictionary" name="Preferred_dictionary">Preferred dictionary</h3> + +<p>For questions of spelling, please refer to <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use <em>honor</em> rather than <em>honour</em>).</p> + +<p>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 <a href="/en-US/docs/Project:Community" title="Project:en/Community">MDC mailing list</a> or <a href="/User:Sheppy" title="User:Sheppy">project lead</a> so we know what should be added.</p> + +<h3 id="MDC-specific" name="MDC-specific">MDN-specific</h3> + +<ul> + <li><a href="/en-US/docs/Project:Custom_CSS_Classes" title="Project:en/Custom_CSS_Classes">Custom CSS classes</a> defined for all MDC pages.</li> + <li><a href="/en-US/docs/Project:Custom_Templates" title="Project:en/Custom_Templates">Custom templates</a> created for use on MDC, with explanations.</li> +</ul> + +<h3 id="Other_resources" name="Other_resources">Language, grammar, spelling</h3> + +<p>If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.</p> + +<ul> + <li><a href="http://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction/dp/0060891548">On Writing Well</a>, by William Zinsser (Amazon link)</li> + <li><a href="http://www.amazon.com/Style-Basics-Clarity-Grace-4th/dp/0205830765/" title="http://www.amazon.com/Style-Lessons-Clarity-Grace-Edition/dp/0321898680">Style: The Basics of Clarity and Grace</a>, by Joseph Williams and Gregory Colomb (Amazon link)</li> + <li><a href="http://www.bartleby.com/64/">American Heritage Book of English Usage</a></li> + <li><a href="http://www.wsu.edu/~brians/errors/">Common Errors in English</a></li> + <li><a href="http://www-personal.umich.edu/~jlawler/aue.html">English Grammar FAQ</a> (alt.usage.english)</li> + <li><a href="http://www.angryflower.com/bobsqu.gif">Bob's quick guide to the apostrophe, you idiots</a> (funny)</li> + <li><a href="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2" title="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2">Merriam-Webster's Concise Dictionary of English Usage</a> (Amazon link): Scholarly but user-friendly, evidence-based advice; very good for non-native speakers, especially for preposition usage.</li> +</ul> 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 +--- +<div>{{MDNSidebar}}</div> + +<p><strong>MDN Web Docs</strong> 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).</p> + +<div class="summary"> +<p>The mission of MDN Web Docs is to provide <em>developers</em> with the <em>information</em> they need to <em>easily</em> build projects on the <em>web platform</em>. We invite you to help!</p> +</div> + +<p>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 <a href="/en-US/docs/MDN/Community" title="/en-US/docs/MDN/Community">MDN community</a>; we're here to help you! The documentation below should get you started, but don't hesitate to join the discussion in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a>.</p> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/MDN/Getting_started">Newcomer quick start</a></span> + + <p>Are you new to MDN and want to learn how to help make it better? Start here!</p> + </li> + <li><span><a href="/en-US/docs/MDN/Contribute">I'm an advanced user</a></span> + <p>Access our full, in-depth guide for MDN contributors to learn more once you've gotten comfortable.</p> + </li> + <li><span><a href="/en-US/docs/MDN/Promote">Spread the word</a></span> + <p>If you love MDN, help get the word out! Find art, tools, and guides for promoting MDN.</p> + </li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/MDN/Community">Join the MDN Community</a></li> + <li><a href="https://app.zenhub.com/workspace/o/mdn/sprints/boards?repos=121649843,55001853,70901646,134759439,90252175,1352520,3311772,82040629,121278372,33677290,132630865">Scrum board</a></li> +</ul> 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 +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>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.</p> + +<p>{{LandingPageListSubPages()}}</p> 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 +--- +<div>{{MDNSidebar}}</div><p><span class="seoSummary">The <a href="/en-US/docs/Project:MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a> platform on which MDN runs provides a powerful macro system, <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript</a>, 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.</span></p> + +<p>The <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript guide</a> 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.</p> + +<h2 id="How_macros_are_implemented">How macros are implemented</h2> + +<p>Macros on MDN are implemented using server-executed <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> code, interpreted using <a href="http://nodejs.org/" title="http://nodejs.org/">Node.js</a>. 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 <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript guide</a>; the <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_reference" title="/en-US/docs/Project:MDN/Kuma/KumaScript_reference">KumaScript reference</a> provides details on the libraries and other KumaScript APIs we've implemented.</p> + +<h2 id="Using_a_macro_in_content">Using a macro in content</h2> + +<p>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:</p> + +<pre class="notranslate">\{{macroname(parameter-list)}}</pre> + +<p>A few notes about macro calls:</p> + +<ul> + <li>Macro names are case-sensitive, but some attempt is made to correct for common capitalization errors; you may use all lowercase even if the macro name uses caps within it, and you may capitalize a macro whose name normally starts with a lower-case letter.</li> + <li>Parameters are separated by commas.</li> + <li>If there are no parameters, you may leave out the parentheses entirely; <code>\{{macroname()}}</code> and <code>\{{macroname}}</code> are identical.</li> + <li>Numeric parameters can be in quotes, or not. It's up to you (however, if you have a version number with multiple decimals in it, it needs to be in quotes).</li> + <li>If you get errors, review your code carefully. If you still can't figure out what's going on, see <a href="/en-US/docs/MDN/Kuma/Troubleshooting_KumaScript_errors">Troubleshooting KumaScript errors</a> for help.</li> +</ul> + +<p>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.</p> + +<div class="note"> +<p><strong>Note:</strong> 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).</p> +</div> + +<p>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.</p> + +<p>You can read up on our most commonly-used macros on the <a href="/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros" title="/en-US/docs/Project:MDN/Contributing/Custom_macros">Commonly-used macros</a> page; also, there's a <a href="https://developer.mozilla.org/en-US/docs/templates" title="https://developer.mozilla.org/en-US/docs/templates">complete list of all macros</a> here. Most macros have documentation built into them, as comments at the top.</p> + +<p>{{EditorGuideQuicklinks}}</p> 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 +--- +<div class="summary">আপনার ওয়েব ডকুমেন্টেশনের ১০ বছরপূর্তি উদযাপন করুন।</div> + +<div class="column-container"> +<div class="column-8"> +<h2 id="MDN_এর_ইতিহাস">MDN এর ইতিহাস</h2> + +<p>২০০৫ এর শুরুর দিকে কিছু আদর্শবাদী মানুষ সকল ওয়েব ডেভেলপারদের জন্য নতুন, উন্মুক্ত এবং কমিউনিটির দ্বারা তৈরি অনলাইন রিসোর্স তৈরির কাজ শুরু করেন। তাদের অসাধারন কিন্তু 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.</p> + +<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/History_of_MDN">Learn more <span class="offscreen">about the history</span></a></p> + +<h2 id="MDN_এ_অবদান_রাখুন">MDN এ অবদান রাখুন </h2> + +<p>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.</p> + +<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Learn more <span class="offscreen">about contributing</span></a></p> +</div> + +<div class="column-4"> +<div class="quote"> +<blockquote>যখন আমি 'কেমন করে' এর পরিবর্তে 'কেন' এটা জানতে চাই তখন MDN হল উপযুক্ত স্থান </blockquote> +<span class="attribution">— <a href="https://twitter.com/codepo8/status/621009648875868160">Christian Heilmann</a></span></div> +</div> +</div> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="/en-US/docs/MDN_at_ten/">MDN at 10</a></li> + <li><a href="/en-US/docs/MDN_at_ten/History_of_MDN">The history of MDN</a></li> + <li><a href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Contributing to MDN</a></li> +</ol> 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 +--- +<p>{{AddonSidebar}}</p> + +<p>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.</p> + +<dl> + <dd></dd><dt><a href="/Mozilla/Add-ons/AMO/Policy/Agreement">Developer Agreement</a></dt> +<dd>Effective January 5, 2016</dd> <dt><a href="/Mozilla/Add-ons/AMO/Policy/Reviews">Review Process</a></dt> +<dd>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.</dd> <dt><a href="/Mozilla/Add-ons/AMO/Policy/Featured">Featured Add-ons</a></dt> +<dd>How up-and-coming add-ons become featured and what's involved in the process. </dd> <strong><a href="/en-US/Add-ons#Contact_us">Contacting us</a></strong> + + <p> How to get in touch with us regarding these policies or your add-on.</p> + +</dl> 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 +--- +<p>এটা বিভিন্ন মোজিলা অ্যাপলিকেশনের এক্সটেনশন ডেভেলপারদের জন্য দরকারি কিছু কোড স্নিপেট<span style="font-size: 14px; line-height: 1.5;"> (ছোট ছোট কোডের নমুনা) </span><span style="font-size: 14px; line-height: 1.5;">এর তালিকা। এরমদ্ধে অনেক গুলো নমুনা স্বয়ং মোজিলার কোডে তো ব্যবহার হয়-ই আবার XULRunner অ্যাপ্লিকেশনের মধ্যেও ব্যবহার করা যায়।</span></p> +<p>কিভাবে প্রাথমিক কাজগুলো করতে হয়, এই নমুনাগুলো সেটা বর্ণনা করে।</p> +<h2 id="General" name="General">সাধারন বিষয়বস্তু</h2> +<dl> + <dt> + <a href="/en-US/docs/Code_snippets/From_articles" title="/en-US/docs/Code_snippets/From_articles">Examples and demos from MDN articles</a></dt> + <dd> + A collection of examples and demos from articles.</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Windows" title="/en-US/docs/Code_snippets/Windows">Windows code</a></dt> + <dd> + Opening and manipulating windows</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Toolbar" title="/en-US/docs/Code_snippets/Toolbar">Toolbar</a></dt> + <dd> + Toolbar related code</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Sidebar" title="/en-US/docs/Code_snippets/Sidebar">Sidebar</a></dt> + <dd> + Sidebar related code</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Forms">Forms</a></dt> + <dd> + Forms related code</dd> + <dt> + <a href="/en-US/docs/Code_snippets/XML" title="/en-US/docs/Code_snippets/XML">XML</a></dt> + <dd> + Code used to parse, write, manipulate, etc. XML</dd> + <dt> + <a href="/en-US/docs/Code_snippets/File_I_O" title="/en-US/docs/Code_snippets/File_I/O">File I/O</a></dt> + <dd> + Code used to read, write and process files</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Drag_&_Drop" title="/en-US/docs/Code_snippets/Drag_&_Drop">Drag & Drop</a></dt> + <dd> + Code used to setup and handle drag and drop events</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Dialogs_and_Prompts" title="/en-US/docs/Code_snippets/Dialogs_and_Prompts">Dialogs</a></dt> + <dd> + Code used to display and process dialog boxes</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Alerts_and_Notifications" title="/en-US/docs/Code snippets/Alerts and Notifications">Alerts and Notifications </a></dt> + <dd> + Modal and non-modal ways to notify users</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Preferences" title="/en-US/docs/Code_snippets/Preferences">Preferences</a></dt> + <dd> + Code used to read, write, and modify preferences</dd> + <dt> + <a href="/en-US/docs/Code_snippets/JS_XPCOM" title="/en-US/docs/Code_snippets/JS_XPCOM">JS XPCOM</a></dt> + <dd> + Code used to define and call XPCOM components in JavaScript</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Running_applications" title="/en-US/docs/Code_snippets/Running_applications">Running applications</a></dt> + <dd> + Code used to run other applications</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Canvas" title="/en-US/docs/Code_snippets/Canvas"><code><canvas></code> related</a></dt> + <dd> + <a href="/en-US/docs/HTML/Canvas" title="/en-US/docs/HTML/Canvas">WHAT WG Canvas</a>-related code</dd> + <dt> + <a href="/en-US/docs/Signing_a_XPI" title="/en-US/docs/Signing_a_XPI">Signing a XPI</a></dt> + <dd> + How to sign an XPI with PKI</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Threads" title="/en-US/docs/Code_snippets/Threads">Threads</a></dt> + <dd> + Performing background operations and delaying execution while background operations complete</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Miscellaneous" title="/en-US/docs/Code_snippets/Miscellaneous">Miscellaneous</a></dt> + <dd> + Miscellaneous useful code fragments</dd> + <dt> + <a href="/en-US/docs/Code_snippets/HTML_to_DOM" title="/en-US/docs/Code_snippets/HTML_to_DOM">HTML to DOM</a></dt> + <dd> + Using a hidden browser element to parse HTML to a window's DOM</dd> +</dl> +<h2 id="Browser-oriented_code" name="Browser-oriented_code">জাভাস্ক্রিপ্ট লাইব্রেরি সমূহ</h2> +<p>Here are some JavaScript libraries that may come in handy.</p> +<dl> + <dt> + <a href="/en-US/docs/Code_snippets/StringView" title="/en-US/docs/Code_snippets/StringView">StringView</a></dt> + <dd> + A library that implements a <code>StringView</code> view for <a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a>. This lets you access data in typed arrays using C-like string functions.</dd> +</dl> +<h2 id="Browser-oriented_code" name="Browser-oriented_code">ব্রাউজার-ওরিয়েন্টেড কোড</h2> +<dl> + <dt> + <a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser">Tabbed browser code</a> (Firefox/SeaMonkey)</dt> + <dd> + Basic operations, such as page loading, with the tabbed browser, which is the heart of Mozilla's browser applications</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Cookies" title="/en-US/docs/Code_snippets/Cookies">Cookies</a></dt> + <dd> + Reading, writing, modifying, and removing cookies</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Page_Loading" title="/en-US/docs/Code_snippets/Page_Loading">Page Loading</a></dt> + <dd> + Code used to load pages, reload pages, and listen for page loads</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged code</a></dt> + <dd> + How to communicate from extensions to websites and vice-versa.</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Downloading_Files" title="/en-US/docs/Code_snippets/Downloading_Files">Downloading Files</a></dt> + <dd> + Code to download files, images, and to monitor download progress</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Password_Manager" title="/en-US/docs/Code_snippets/Password_Manager">Password Manager</a></dt> + <dd> + Code used to read and write passwords to/from the integrated password manager</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Bookmarks" title="/en-US/docs/Code_snippets/Bookmarks">Bookmarks</a></dt> + <dd> + Code used to read and write bookmarks</dd> + <dt> + <a href="/en-US/docs/Code_snippets/JavaScript_Debugger_Service" title="/en-US/docs/Code_snippets/JavaScript_Debugger_Service">JavaScript Debugger Service</a></dt> + <dd> + Code used to interact with the JavaScript Debugger Service</dd> +</dl> +<h2 id="SVG" name="SVG">এসভিজি</h2> +<dl> + <dt> + <a href="/en-US/docs/Code_snippets/SVG_General" title="/en-US/docs/Code_snippets/SVG_General">General</a></dt> + <dd> + General information and utilities</dd> + <dt> + <a href="/en-US/docs/Code_snippets/SVG_Animation" title="/en-US/docs/Code_snippets/SVG_Animation">SVG Animation</a></dt> + <dd> + Animate SVG using JavaScript and SMIL</dd> + <dt> + <a href="/en-US/docs/Code_snippets/SVG_Interacting_with_script" title="/en-US/docs/Code_snippets/SVG_Interacting_with_script">SVG Interacting with Script</a></dt> + <dd> + Using JavaScript and DOM events to create interactive SVG</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Embedding_SVG" title="/en-US/docs/Code_snippets/Embedding_SVG">Embedding SVG in HTML and XUL</a></dt> + <dd> + Using SVG to enhance HTML or XUL based markup</dd> +</dl> +<h2 id="XUL_Widgets" name="XUL_Widgets">XUL উইজেট সমূহ</h2> +<dl> + <dt> + <a href="/en-US/docs/Code_snippets/HTML_in_XUL_for_rich_tooltips" title="/en-US/docs/Code_snippets/HTML_in_XUL_for_rich_tooltips">HTML in XUL for Rich Tooltips</a></dt> + <dd> + Dynamically embed HTML into a XUL element to attain markup in a tooltip</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Label_and_description" title="/en-US/docs/Code_snippets/Label_and_description">Label and description</a></dt> + <dd> + Special uses and line breaking examples</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Tree" title="/en-US/docs/Code_snippets/Tree">Tree</a></dt> + <dd> + Setup and manipulation of trees using XUL and JS</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Scrollbar" title="/en-US/docs/Code_snippets/Scrollbar">Scrollbar</a></dt> + <dd> + Changing style of scrollbars. Applies to scrollbars in browser and iframe as well.</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Autocomplete" title="/en-US/docs/Code_snippets/Autocomplete">Autocomplete</a></dt> + <dd> + Code used to enable form autocomplete in a browser</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Boxes" title="/en-US/docs/Code_snippets/Boxes">Boxes</a></dt> + <dd> + Tips and tricks when using boxes as containers</dd> + <dt> + <a class="internal" href="/en-US/docs/Code_snippets/Tabbox" title="/en-US/docs/Code snippets/Tabbox">Tabbox</a></dt> + <dd> + Removing and manipulating tabs in a tabbox</dd> +</dl> +<h2 id="Windows-specific" name="Windows-specific">উইন্ডোজ নির্দিষ্ট</h2> +<dl> + <dt> + <a href="/en-US/docs/Code_snippets/Finding_Window_Handles" title="/en-US/docs/Code_snippets/Finding_Window_Handles">Finding Window Handles (HWND)</a> (Firefox)</dt> + <dd> + How to use Windows API calls to find various kinds of Mozilla window handles. Window handles can be used for IPC and Accessibility purposes.</dd> + <dt> + <a href="/en-US/docs/Accessing_the_Windows_Registry_Using_XPCOM" title="/en-US/docs/Accessing_the_Windows_Registry_Using_XPCOM">Using the Windows Registry with XPCOM</a></dt> + <dd> + How to read, write, modify, delete, enumerate, and watch registry keys and values.</dd> +</dl> +<h2 id="External_links" name="External_links">বহিঃস্থ লিঙ্ক সমূহ</h2> +<p>The content at <a class="external" href="http://kb.mozillazine.org/Category:Example_code">MozillaZine Example Code</a> is slowly being moved here, but you can still find useful examples there for now.</p> 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 +--- +<h2 id="টুলবার_বাটন_সংযোজন">টুলবার বাটন সংযোজন</h2> +<p>এখানে দুইটি টিউটোরিয়াল রয়েছে :</p> +<p>একটি টিউটোরিয়াল এর জন্য একটি বিশেষ পদক্ষেপ রয়েছে: <a href="/en/XUL/Toolbars/Custom_toolbar_button" title="en/Custom_Toolbar_Button">কাষ্টম টুলবার বাটন</a> একটি টিউটোরিয়াল বর্ণনা করার জন্য ইতোমধ্যে আপনার উন্নয়ন বুনিয়াদি একটি টুলবার বাটন যুক্ত করা প্রয়োজন: <a href="/en/XUL/Toolbars/Creating_toolbar_buttons" title="en/Creating_toolbar_buttons">টুলবার বাটন তৈরি করা</a></p> +<h2 id="বাটন_যুক্ত_করার_পদ্ধতি">বাটন যুক্ত করার পদ্ধতি :</h2> +<p>আপনি যখন আপনার এক্সটেনশন স্থাপন এবং একটি টুলবার বাটন অভেরলেইং দ্বারা যুক্ত করা হয়, এটি ডিফল্ট অবস্থায় পাওয়া যায় না । ব্যবহারকারীকে বাটনটি টুলবারে টেনে আনতে হয়। <span id="result_box" lang="bn"><span class="hps">নিম্নলিখিত</span> <span class="hps">কোড</span> <span class="hps">টুলবারে</span> <span class="hps">আপনার</span> <span class="hps alt-edited">বাটন</span> <span class="hps alt-edited">স্থাপন করবে। </span></span>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.</p> +<h3 id="নোট">নোট</h3> +<ul> + <li><a href="/en/XUL_School/Appendix_B:_Install_and_Uninstall_Scripts#Install_Scripts">প্রথমবার চালনার সময়</a> একবার বাটন ঢোকান, অথবা একটি নতুন বাটন যোগ করে যখন একটি এক্সটেনশন আপডেট হয়।</li> + <li>Please only add your button by default if it adds real value to the user and will be a frequent entry point to your extension.</li> + <li>You <b>must not</b> insert your toolbar button between any of the following elements: the combined back/forward button, the location bar, the stop botton, or the reload button. These elements have special behaviors when placed next to eachother, and will break if separated by another element.</li> +</ul> +<pre class="brush: js">/** + * 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"); +} +</pre> +<h2 id="আরো_দেখুন">আরো দেখুন</h2> +<ul> + <li><a class="external" href="http://blog.pearlcrescent.com/archives/24">Programmatically adding items to the Firefox toolbar</a></li> + <li><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=189667">Toolbar button on install</a></li> + <li>{{ Bug(242071) }}</li> +</ul> 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 +--- +<div class="summary"><span style="color: #000000;">মোজিলা অ্যাপ্লিকেশান গুলোর পরিবর্তন এবং পরিবর্ধন </span></div> + +<p>অ্যাড-অন, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Gecko">গেকো</a> ভিত্তিক অ্যাপ্লিকেশান যেমন: ফায়ারফক্স, সীমাঙ্কী এবং থান্ডারবার্ড এ নতুন কার্যকারিতা যোগ করে। মূলত দুই ধরণের অ্যাড-অন আছে: <a href="https://developer.mozilla.org/en-US/Add-ons#Extensions">এক্সটেনশন</a>, অ্যাপ্লিকেশানে নতুন ধরণের ফিচার যুক্ত করে, আর <a href="https://developer.mozilla.org/en-US/Add-ons#Themes">থিম</a> অ্যাপ্লিকেশানের ইউজার ইন্টারফেস পরিবর্তন করে। </p> + +<p>এক্সটেনশন এবং থিম উভয়ের জন্যই মোজিলা <a href="https://addons.mozilla.org/">addons.mozilla.org</a> তে একটি রিপোজিটরি পরিচালনা করে যা এএমও নামে পরিচিত। আপনি যখন <a href="https://developer.mozilla.org/en-US/Add-ons/Submitting_an_add-on_to_AMO">এএমও তে অ্যাড-অন জমা দেন</a> , তখন সেগুলোকে পর্যালোচনা করা হয় তারপর সেগুলো পর্যালোচনাতে উত্তীর্ণ হলে ব্যাবহারকারির কাছে পৌঁছে।<span style="font-family: helvetica;">আপনাকে এএমও তে অ্যাড-অন জমা দিতে হবেনা, কিন্তু আপনি যদি দেন, তাহলে ব্যাবহারকারিরা আত্মবিশ্বাসী হতে পারেন যে, সেগুলো রিভিও (পর্যালোচনা) করা হয়েছে । এবং আপনি দরকারি অ্যাড-অন এর উৎস হিসেবে এএমও এর দৃশ্যমানতা এর সুবিধা নিতে পারেন। </span></p> + +<p><span style="font-family: helvetica;">যেসকল অ্যাপ্লিকেশান অ্যাড-অন কে হোস্ট করে অ্যাড-অন তাদের আচরণকে প্রবলভাবে প্রভাবিত করতে পারে। আমরা এক ঝাঁক দিকনির্দেশনা তৈরি করেছি যাতে ব্যাবরহারকারিদের ভাল অভিজ্ঞতা দিতে পারি । সকল ধরণের অ্যাড-অনের জন্যই এই দিকনির্দেশনা প্রযোজ্য, তা </span><a class="external" href="https://addons.mozilla.org/" style="text-decoration: none;">addons.mozilla.org</a><span style="font-family: helvetica;"> তে হোস্ট করা হোক বা অন্য কোথাও হোস্ট করা হোক। </span></p> + +<hr> +<h2 id="এক্সটেনশন">এক্সটেনশন </h2> + +<p>এক্সটেনশন ফায়ারফক্স এবং থান্ডার-বার্ড এর মত মোজিলা অ্যাপ্লিকেশান গুলোতে নতুন কার্যকারিতা যোগ করে। এরা ব্রাউজারে নতুন ফিচার যুক্ত করতে পারে, যেমন: বিভিন্ন উপায়ে ট্যাবগুলোকে পরিচালনা করা। এবং তারা বিশেষ বিশেষ ওয়েবসাইটের ব্যাবহারযোগ্যতা অথবা নিরাপত্তা বাড়াতে ওয়েব কনটেন্টের পরিবর্তন করতে সক্ষম। </p> + +<p>এক্সটেনশন তৈরি করতে আপনি তিনটি ভিন্ন ভিন্ন কৌশল ব্যাবহার করতে পারেন: অ্যাড-অন এসডিকে ভিত্তিক এক্সটেনশন, ম্যানুয়ালী বুটস্ত্র্যাপড রিস্টার্ট বিহীন এক্সটেনশন এবং ওভারলে এক্সটেনশন। </p> + +<ul class="card-grid"> + <li><span><a href="https://developer.mozilla.org/en-US/Add-ons/SDK">অ্যাড-অন এসডিকে এক্সটেনশন</a> </span><br> + এক গুচ্ছ হাই-লেভেল জাভাস্ক্রিপ্ট এপিআই দ্বারা রিস্টার্টবিহীন এক্সটেনশন ডেভেলপ করুন। </li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/Bootstrapped_extensions">রিস্টার্টবিহীন এক্সটেনশন </a><br> + এমন এক্সটেনশন ডেভেলপ করুন যাতে ব্রাউজার রিস্টার্টের প্রয়োজন না হয়। </li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions">ওভারলে এক্সটেনশন</a> <br> + এক্সইউএল ওভার লে দ্বারা গতানুগতিক এক্সটেনশন ডেভেলপ করুন। </li> +</ul> + +<p>আপনি যদি পারেন তবে, অ্যাড-অন এসডিকে ব্যাবহার করা সমীচীন হবে, যা রি স্টার্ট বিহীন মেকানিজম ব্যাবহার করে কিন্তু নির্দিষ্ট কিছু কাজকে সহজ করে এবং তারপর নিজেকে পরিষ্কার করে। যদি অ্যাড-অন এসডিকে আপনার প্রয়োজনের তুলনায় পর্যাপ্ত না হয় তবে, এর পরিবর্তে ম্যানুয়াল রি স্টার্ট বিহীন এক্সটেনশন ইমপ্লিমেন্ট করতে পারেন। বর্তমানে অধিকাংশ ক্ষেত্রে ওভারলে এক্সটেনশন অপ্রচলিত , যদিও এখনো এগুলোর প্রাচুর্য রয়েছে। </p> + +<p>কোন কৌশল অবলম্বন করবেন এ সম্পর্কে আরও জানতে পড়ুন তাদের <a href="https://developer.mozilla.org/en-US/Add-ons/Comparing_Extension_Toolchains">তুলনা</a>। </p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="ভাল_চর্চা">ভাল চর্চা </h2> + +<dl> + <dd>আপনি যেভাবেই এক্সটেনশন ডেভেলপ করুন না কেন, আপনাকে কিছু দিক নির্দেশ মেনে চলতে হবে, যাতে ব্যাবহারকারিরা একটা ভাল অভিজ্ঞতা পান। </dd> + <dt><a href="https://developer.mozilla.org/en-US/Add-ons/Performance_best_practices_in_extensions">পারফরমেন্স </a></dt> + <dd>নিশ্চিত করা যে আপনার এক্সটেনশন দ্রুত, প্রতিক্রিয়াশীল এবং মেমরি এফিসিয়েন্ট। </dd> + <dt><a href="https://developer.mozilla.org/en-US/Add-ons/Security_best_practices_in_extensions">নিরাপত্তা </a></dt> + <dd>নিশ্চিত করা যে আপনার এক্সটেনশন ইউজারকে ক্ষতিকারক ওয়েবসাইটে প্রবেশ করাবে না। </dd> + <dt><a href="https://developer.mozilla.org/en-US/Add-ons/Extension_etiquette">ভদ্রতা </a></dt> + <dd>নিশ্চিত করা যে আপনার এক্সটেনশন অপর এক্সটেনশনের সাথে ভালো ভাবে কাজ করতে পারে কিনা। </dd> +</dl> +</div> + +<div class="column-half"> +<h3 id="নির্দিষ্ট-অ্যাপ্লিকেশান">নির্দিষ্ট-অ্যাপ্লিকেশান</h3> + +<p>অধিকাংশ ডকুমেন্টেশান ধরে নেয় যে আপনি ফায়ারফক্স ডেক্সটপের জন্য অ্যাড-অন ডেভেলপ করছেন। আপনি যদি গেকো ভিত্তিক অন্য অ্যাপ্লিকেশান এর জন্য ডেভেলপ করতে চান, তাহলে আপনাকে তাদের মধ্যে মুখ্য পার্থক্য গুলো জানতে হবে। </p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/Add-ons/Thunderbird">থান্ডারবার্ড </a></dt> + <dd>থান্ডার বার্ড মেইল ক্লায়েন্ট এর জন্য এক্সটেনশন ডেভেলপ করা। </dd> + <dt><a href="https://developer.mozilla.org/en-US/Add-ons/Firefox_for_Android">ফায়ারফক্স এন্ড্রয়েড</a></dt> + <dd>ফায়ারফক্স এন্ড্রয়েডের জন্য এক্সটেনশন ডেভেলপ করা। </dd> + <dt><a href="https://developer.mozilla.org/en-US/Add-ons/SeaMonkey_2">সীমাঙ্কী</a></dt> + <dd><a href="http://www.seamonkey-project.org/">সীমাঙ্কী</a> সফটওয়্যার সুইটের জন্য এক্সটেনশন ডেভেলপ করা। </dd> +</dl> +</div> +</div> + +<hr> +<h2 id="থিম"><a name="Themes">থিম </a></h2> + +<p>থিম হল অ্যাড-অন যারা অ্যাপ্লিকেশানের ইউজার ইন্টারফেস পরিবর্তন করে। দুই ধরণের থিম আছে: লাইটওয়েট এবং সম্পূর্ণ থিম। </p> + +<div class="column-container"> +<div class="column-half"> +<p><a href="https://addons.mozilla.org/en-US/developers/docs/themes">লাইটওয়েট থিম</a> গুলো সম্পূর্ণ থিমের চেয়ে সহজে ইমপ্লিমেন্ট করা যায়, কিন্তু খুব সীমিত পরিবর্তন প্রদান করে। </p> +</div> + +<div class="column-half"> +<p><a href="https://developer.mozilla.org/en-US/docs/Themes">সম্পূর্ণ থিম</a> দ্বারা অ্যাপ্লিকেশান ইউআই তে গভীর পরিবর্তন আনা যায়। সম্পূর্ণ থিমের ডকুমেন্টেশান গুলো অনেক পুরনো, কিন্তু সম্ভাব্য আপডেটের জন্য এখানে লিঙ্ক দেয়া হবে। </p> +</div> +</div> + +<hr> +<h2 id="অন্যান্য_ধরণের_অ্যাড-অন">অন্যান্য ধরণের অ্যাড-অন</h2> + +<p><a href="https://developer.mozilla.org/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">সার্চইঞ্জিন প্লাগইন</a> হল সরল এবং খুব নির্দিষ্ট ধরণের অ্যাড-অন: তারা ব্রাউজারের সার্চবারে নতুন সার্চইঞ্জিন যুক্ত করে । </p> + +<p>যেসকল কন্টেন্টকে অ্যাপ্লিকেশান স্বাভাবিক ভাবে সাপোর্ট করেনা তাদের বোঝার জন্য <a href="https://developer.mozilla.org/en-US/docs/Plugins">প্লাগইনের</a> সাহায্য দরকার হয়। আমরা এসকল প্লাগ ইনের গভীরতা বাড়াতে কাজ করছি, কেননা এদের স্থায়িত্ব, পারফরমেন্স এবং নিরাপত্তার সমস্যাপূর্ণ ইতিহাস রয়েছে।</p> + +<p>{{AddonSidebar}}</p> + +<div id="__if72ru4sdfsdfrkjahiuyi_once" style="display: none;"></div> + +<div id="__hggasdgjhsagd_once" style="display: none;"></div> 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 +--- +<p> ফায়ারফক্সের একটি সব চেয়ে বড় সুবিধা হল 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.</p> +<h2 id="Improving_startup_performance">Improving startup performance</h2> +<p>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.</p> +<h3 id="Load_only_what_you_need_when_you_need_it">Load only what you need, when you need it</h3> +<p>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.</p> +<h3 id="Use_JavaScript_code_modules">Use JavaScript code modules</h3> +<p>You can create your own <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Using" title="/en-US/docs/Mozilla/JavaScript_code_modules/Using">JavaScript code modules</a> 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.</p> +<p>This has an advantage over XPCOM modules, which are always loaded when your extension starts up.</p> +<p>Of course, for extremely simple extensions it may not make sense to modularize your code.</p> +<h3 id="Defer_everything_that_you_can">Defer everything that you can</h3> +<p>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.</p> +<p>If there is <em>anything</em> 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.</p> +<h2 id="General_Performance_Tips">General Performance Tips</h2> +<h3 id="Avoid_Creating_Memory_Leaks">Avoid Creating Memory Leaks</h3> +<p>Memory leaks require the garbage collector and the cycle collector to work harder, which can significantly degrade performance.</p> +<p>Zombie compartments are a particular kind of memory leak that you can detect with minimal effort. See the<a href="/en/Zombie_compartments" title="en/Zombie_compartments"> </a><a href="/en/Zombie_compartments" title="en/Zombie_compartments">Zombie compartments page</a>, especially the <a href="/en/Zombie_compartments#Proactive_checking_of_add-ons" title="en/Zombie_compartments#Proactive_checking_of_add-ons">Proactive checking of add-ons</a> section.</p> +<p>See <a href="/en/Extensions/Common_causes_of_memory_leaks_in_extensions" title="en/Extensions/Common_causes_of_zombie_compartments_in_extensions">Common causes of memory leaks in extensions</a> for ways to avoid zombie compartments and other kinds of leaks.</p> +<p>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, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=719601" title="https://bugzilla.mozilla.org/show_bug.cgi?id=719601">bug 719601</a> featured a "System Principal" JavaScript compartment containing 100s of MBs of memory, which is <em>much</em> larger than usual.</p> +<h3 id="Use_JavaScript_Modules">Use JavaScript Modules</h3> +<p>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 <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Using" title="/en-US/docs/Mozilla/JavaScript_code_modules/Using">Using JavaScript Code Modules page</a>.</p> +<h3 id="Avoid_Writing_Slow_CSS">Avoid Writing Slow CSS</h3> +<ul> + <li>Read the <a href="/en/CSS/Writing_Efficient_CSS" title="en/CSS/Writing_Efficient_CSS">"writing efficient CSS"</a> guide.</li> + <li>Remember that any selector in your rule which might match many different nodes is a source of inefficiency during either selector matching or dynamic update processing. This is especially bad for the latter if the selector can dynamically start or stop matching. Avoid unqualified ":hover" like the plague.</li> +</ul> +<h3 id="Avoid_DOM_mutation_event_listeners">Avoid DOM mutation event listeners</h3> +<p>Adding DOM mutation listeners to a document disables most DOM modification optimizations and <a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/2f42f1d75bb906fb?pli=1">profoundly degrades the performance</a> 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: <code>DOMAttrModified</code>, <code>DOMAttributeNameChanged</code>, <code>DOMCharacterDataModified</code>, <code>DOMElementNameChanged</code>, <code>DOMNodeInserted</code>, <code>DOMNodeInsertedIntoDocument</code>, <code>DOMNodeRemoved</code>, <code>DOMNodeRemovedFromDocument</code>, <code>DOMSubtreeModified</code></p> +<p>For more on these events and their deprecation, see <a href="/en-US/docs/Web/Guide/DOM/Events/Mutation_events" title="en-US/docs/Web/Guide/DOM/Events/Mutation_events">Mutation events</a>. Use <a href="/en-US/docs/Web/API/MutationObserver" title="en-US/docs/Web/API/MutationObserver">Mutation Observers</a> instead if possible.</p> +<h3 id="Lazily_load_services">Lazily load services</h3> +<p>The <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm#Methods" title="en/JavaScript_code_modules/XPCOMUtils.jsm#Methods">XPCOMUtils JavaScript module</a> provides two methods for lazily loading things:</p> +<ul> + <li><code>defineLazyGetter()</code> defines a function on a specified object that acts as a getter which will be created the first time it's used. <a class="external" href="http://mxr.mozilla.org/mozilla-central/search?string=defineLazyGetter">See examples</a>.</li> + <li><code>defineLazyServiceGetter()</code> defines a function on a specified object which acts as a getter for a service. The service isn't obtained until the first time it's used. {{ LXRSearch("ident", "string", "defineLazyServiceGetter", "Look through the source") }} for examples.</li> +</ul> +<p>As of Firefox 4.0, many common services are already cached for you in <a href="/en/JavaScript_code_modules/Services.jsm" title="en/JavaScript_code_modules/Services.jsm">Services.jsm</a>.</p> +<h3 id="Reduce_file_IO">Reduce file I/O</h3> +<p>TODO: Give examples below, link to code, bugs, docs.</p> +<ul> + <li>If you're targeting Firefox 3.6 and earlier, or if you're specifying <code>em:unpack</code> then use chrome JARs!</li> + <li>Combine CSS</li> + <li>Combine pref files</li> + <li>Combine interfaces into a single .idl to reduce xpt files</li> + <li>Combine toolbar icons in a single file.</li> +</ul> +<h3 id="Use_the_right_compression_level_for_JAR_and_XPI_files">Use the right compression level for JAR and XPI files</h3> +<p>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 <em>decrease</em> 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 <a class="external" href="http://en.wikipedia.org/wiki/Solid_archive" title="http://en.wikipedia.org/wiki/Solid_archive">solid archive</a> effect).</p> +<p>If your extension doesn't specify <code>em:unpack</code> 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.</p> +<h3 id="Use_asynchronous_IO">Use asynchronous I/O</h3> +<p>This cannot be stressed enough: never do synchronous I/O on the GUI thread.</p> +<ul> + <li>Never use synchronous XMLHttpRequests (XHR). Use asynchronous requests instead and show a throbber image or message in case you need the user to wait.</li> + <li><a href="/en/JavaScript_code_modules/NetUtil.jsm" title="en/JavaScript_code_modules/NetUtil.jsm">NetUtils.jsm</a> provides helpers for asynchronous reading and copying of files.</li> + <li>Never access a SQLite database synchronously. Use the <a href="/en/Storage#Asynchronously" title="en/Storage#Asynchronously">asynchronous API</a> instead.</li> +</ul> +<h3 id="Unnecessary_onreadystatechange_in_XHR">Unnecessary onreadystatechange in XHR</h3> +<p><code>addEventListener</code>(load/error) and/or xhr.onload/.onerror are usually sufficient for most uses and will only be called once, contrary to <code>onreadystatechange</code>. When using XHR in websites people tend to use <code>onreadystatechange</code> (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 <code>onreadystatechange</code>, i.e. only once, and you don't need to check <code>readyState</code> or figure out if it is an error or not. Only use <code>onreadystatechange</code> if you want to process the response while it is still arriving.</p> +<h3 id="Removing_Event_Listeners">Removing Event Listeners</h3> +<p>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: <code>function onMouseOver(evt) { if (is_active) { /* doSomeThing */ } }</code> Also, remove "fire-once" listeners again:</p> +<pre class="brush: js"> function init() { + var largeArray; + addEventListener('load', function onLoad() { + removeEventListener('load', onLoad, true); + largeArray.forEach(); + }, true); +</pre> +<p>Else a lot of closure stuff might be still referenced (<code>largeArray</code> in this example). And the listener will sit idle in some internal table.</p> +<h3 id="Populate_menus_as_needed">Populate menus as needed</h3> +<p>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.</p> +<h3 id="Avoid_mouse_movement_events">Avoid mouse movement events</h3> +<p>Avoid mouse movement events (enter/over/exit) or at least keep computation to a minimum. Mouse movement events, especially the <code>mouseover</code> 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 <code>popupshowing</code> event). Also don't forget to remove the event listeners when no longer needed (see above).</p> +<h3 id="Avoid_polling">Avoid polling</h3> +<p>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.</p> +<h3 id="aPNGaGIF_inappropriate_in_a_lot_of_cases">aPNG/aGIF inappropriate in a lot of cases</h3> +<p>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.</p> +<h3 id="base64md5sha1_implementations">base64/md5/sha1 implementations</h3> +<p>Do not ship your own base64/md5/sha1 implementations. Regarding base64 there are the built-in <code>atob</code>/<code>btoa</code> 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") }}.</p> +<h3 id="Image_sprites">Image sprites</h3> +<p>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 <code>imagesrc</code>/<code>src</code> attributes to define images where possible.</p> +<h3 id="Consider_using_Chrome_Workers">Consider using Chrome Workers</h3> +<p>You can use a {{ domxref("ChromeWorker") }} to execute long running tasks or do data processing.</p> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en/Performance/Measuring_add-on_startup_performance" title="en/Measuring Add-on Startup Performance">Measuring Add-on Startup Performance</a></li> + <li><a class="external" href="http://blog.mozilla.com/addons/2010/06/14/improve-extension-startup-performance/" title="http://blog.mozilla.com/addons/2010/06/14/improve-extension-startup-performance/">How to Improve Extension Startup Performance</a></li> + <li><a href="/en-US/docs/Performance">General information about measuring and improving performance in Mozilla code</a></li> +</ul> 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 +--- +<p>এই এডঅন সফটওয়্যার সম্পাদনা বক্স (SDK) ব্যবহার করে আপনিও ফায়ারফক্সের জন্য এডঅন তৈরী করতে পারবেন, তবে আপনার জানা থাকতে হবেঃ জাভাস্ক্রিপ্ট, এইচটিএমএল, সিএসএস। এই সফটওয়্যার সম্পাদনা বক্স (SDK) এর সাথে আছে জাভাস্ক্রিপ্ট এপিআই (API) , যেটা আপনি এডঅন তৈরী, এডঅন টেস্টিং, এডঅন চালু করা ও এডঅন প্যাকেজ করার কাজে ব্যবহার করতে পারবেন।</p> +<hr> +<h3 id="পাঠদান"><u>পাঠদান</u></h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials#getting-started">শুরু করুন</a></dt> + <dd> + কিভাবে <a href="/en-US/Add-ons/SDK/Tutorials/Installation">সফটওয়্যার সম্পাদনা বক্স (SDK)</a> ইন্সটল করবেন এবং <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">সিএফএক্স</a> দিয়ে এডঅন সম্পাদনা, টেস্টিং ও প্যাকেজিং করবেন।</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials#interact-with-the-browser">Interact with the browser</a></dt> + <dd> + <a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Open web pages</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Listen_For_Page_Load">listen for pages loading</a>, and <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">list open pages</a>.</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials#development-techniques">Development techniques</a></dt> + <dd> + Learn about common development techniques, such as <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">unit testing</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Logging">logging</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Creating_Reusable_Modules">creating reusable modules</a>, <a href="/en-US/Add-ons/SDK/Tutorials/l10n">localization</a>, and <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">mobile development</a>.</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials#create-user-interfaces">Create user interface components</a></dt> + <dd> + Create user interface components such as <a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">toolbar buttons</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">context menus</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">menu items</a>, and <a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">dialogs</a>.</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials#modify-web-pages">Modify web pages</a></dt> + <dd> + Modify pages <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">matching a URL pattern</a> or dynamically <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">modify a particular tab</a>.</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Putting it together</a></dt> + <dd> + Walkthrough of the Annotator example add-on.</dd> + </dl> + </div> +</div> +<hr> +<h3 id="Guides">Guides</h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Guides#contributors-guide">Contributor's guide</a></dt> + <dd> + Learn <a href="/en-US/Add-ons/SDK/Guides/Getting_Started">how to start contributing</a> to the SDK, and about the most important idioms used in the SDK code, such as <a href="/en-US/Add-ons/SDK/Guides/Modules">modules</a>, <a href="/en-US/Add-ons/SDK/Guides/Classes_and_Inheritance">classes and inheritance</a>, <a href="/en-US/Add-ons/SDK/Guides/Private_Properties">private properties</a>, and <a href="/en-US/Add-ons/SDK/Guides/Content_Processes">content processes</a>.</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Guides#sdk-infrastructure">SDK infrastructure</a></dt> + <dd> + Aspects of the SDK's underlying technology: <a href="/en-US/Add-ons/SDK/Guides/Module_structure_of_the_SDK">modules</a>, the <a href="/en-US/Add-ons/SDK/Guides/Program_ID">Program ID</a>, and the rules defining <a href="/en-US/Add-ons/SDK/Guides/Firefox_Compatibility">Firefox compatibility</a>.</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">Content scripts</a></dt> + <dd> + A detailed guide to working with content scripts.</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Guides#sdk-idioms">SDK idioms</a></dt> + <dd> + The SDK's <a href="/en-US/Add-ons/SDK/Guides/Working_with_Events">event framework</a> and the <a href="/en-US/Add-ons/SDK/Guides/Two_Types_of_Scripts">distinction between add-on scripts and content scripts</a>.</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">XUL migration</a></dt> + <dd> + A guide to <a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">porting XUL add-ons to the SDK</a>. This guide includes a <a href="/en-US/Add-ons/SDK/Guides/XUL_vs_SDK">comparison of the two toolsets</a> and a <a href="/en-US/Add-ons/SDK/Guides/Porting_the_Library_Detector">working example</a> of porting a XUL add-on.</dd> + </dl> + </div> +</div> +<hr> +<h3 id="Reference">Reference</h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/High-Level_APIs">High-Level APIs</a></dt> + <dd> + Reference documentation for the high-level SDK APIs.</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Tools">Tools reference</a></dt> + <dd> + Reference documentation for the <a href="/en-US/Add-ons/SDK/Tools/cfx">cfx tool</a> used to develop, test, and package add-ons, the <a href="/en-US/Add-ons/SDK/Tools/console">console</a> global used for logging, and the <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json</a> file.</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Low-Level_APIs">Low-Level APIs</a></dt> + <dd> + Reference documentation for the low-level SDK APIs.</dd> + </dl> + </div> +</div> +<p> </p> 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 +--- +<div class="note"> + <p>এই টিউটরিআল বুঝতে হলে আপনাকে প্রথমে <a href="/en-US/Add-ons/SDK/Tutorials/Installation" style="line-height: 1.5;">এস ডি কে</a><span style="line-height: 1.5;"> ইন্সটল করতে হবে এবং </span><a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx" style="line-height: 1.5;">সি এফ এক্স এর প্রাথমিক </a><span style="line-height: 1.5;"> জিনিস গুলা শিখতে হবে ।</span></p> + <p><span style="line-height: 1.5;">এই টিউটোরিয়াল </span><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action" style="line-height: 1.5;">এক্সশন বাটন </a> এ পি আই <span style="line-height: 1.5;">ব্যাবহার করে, যে শুধু মাত্র ফায়ার ফক্স ২৯ বা এর পরের ভারশন গুলোতে কাজ করে ।</span></p> + <p> </p> +</div> +<p><span style="line-height: 1.5;">কোন বাটন টুলবারের সাথে সংযুক্ত করতে হলে </span><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action" style="line-height: 1.5;"> এক্সন বাটন</a><span style="line-height: 1.5;"> বা </span><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle" style="line-height: 1.5;">টগল বাটন </a>মডিউলগুলো ব্যাবহার করুন ।</p> +<p>একটি নতুন ডিরেক্টরি তৈরি করুন, তার ভেতরে ডুকুন এবং সিএফএক্স ইনিট চালান ।</p> +<p>তার পর নিচের আইকন তিনটি "ডাটা" ডিরেক্টরিতে সেভ করুন ।</p> +<table class="standard-table"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="width: 16px; height: 16px;"></td> + <td>icon-16.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="width: 32px; height: 32px;"></td> + <td>icon-32.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="width: 64px; height: 64px;"></td> + <td>icon-64.png</td> + </tr> + </tbody> +</table> +<p>Then open the file called "main.js" in the "lib" directory and add the following code to it:</p> +<pre class="brush: js">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/"); +}</pre> +<p>Now run the add-on with <code>cfx run</code>. The button is added to the toolbar at the top of the browser window:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7641/mozilla-button.png" style="width: 382px; height: 221px; display: block; margin-left: auto; margin-right: auto;">You can't set the initial location for the button, but the user can move it using the browser's customization feature. The <code>id</code> 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.</p> +<p>Clicking the button loads <a href="https://www.mozilla.org/en-US/">https://www.mozilla.org/</a> into a new tab.</p> +<h2 id="Specifying_the_icon">Specifying the icon</h2> +<p>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. <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#ActionButton(options)">Read more about specifying multiple icons</a>.</p> +<p>The icon file must be packaged with your add-on: it may not refer to a remote file.</p> +<p>You can change the icon at any time by setting the button's <code>icon</code> property. You can change the icon, and the other state attributes, either globally, for a specific window, or for a specific tab. <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#Updating_state">Read more about updating state</a>.</p> +<h2 id="Attaching_a_panel">Attaching a panel</h2> +<p>If you need to attach a panel to a button, use the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">toggle button</a> API. This is just like the action button API except it adds a boolean <code>checked</code> property which is toggled whenever the button is checked. To attach the panel, pass the button to the panel's <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel#show(options)"><code>show()</code></a> method. For more details on this, see the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle#Attaching_panels_to_buttons">toggle button's documentation</a>.</p> +<h2 id="Displaying_richer_content">Displaying richer content</h2> +<p>To create more complex user interface content than is possible with just a button, use the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar">toolbar</a> 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 <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_frame">frames</a>, that can host HTML, CSS, and JavaScript.</p> +<h2 id="Learning_more">Learning more</h2> +<ul> + <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button reference</a></li> + <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">toggle button reference</a></li> + <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar">toolbar reference</a></li> +</ul> 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 +--- +<p>এই পেজ এর তালিকাগুলো নিজ হাতে গড়া অনুচ্ছেদ, কেমনে SDK ব্যবহার করে নির্দিষ্ট কাজসমূহ অর্জন করা যায় এ সম্পর্কে।</p> +<hr> +<h3 id="শুরু_করা"><a name="শুরু করা">শুরু</a> করা</h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials/Installation"> স্থাপন করা </a></dt> + <dd> + ডাউনলোড, স্থাপন,এবং SDK চালু করা Windows, OS X এবং Linux এ।</dd> + </dl> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials/Troubleshooting">সমস্যাসমাধান </a></dt> + <dd> + কিছু pointers ব্যবহার করা হয় গতানুগতিক সমস্যাসমূহ সমাধান করার জন্য এবং আরও সাহায্য পাওয়ার জন্য।</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + শুরু করা</dt> + <dd> + SDK এর সাথে একটি simple add-ones তৈরি করুন।</dd> + </dl> + </div> +</div> +<hr> +<h3 id="ইউজার_ইন্টারফেস_তৈরি">ইউজার ইন্টারফেস তৈরি</h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">একটি toolbar button যুক্ত করুন</a></dt> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar"> একটি বোতাম যুক্ত করুন </a> Firefox Add-on toolbar এ।<a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox"> </a></dt> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">একটি menu item যুক্ত করুন Firefox এ </a></dt> + <dd> + Firefox main menus এ items যুক্ত করুন।</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + পপআপ প্রদর্শন</dt> + <dd> + পপআাপ dialog প্রদর্শন করা HTML এবং Javascript এর সাথে।<a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item"> </a></dd> + <dd> + <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">একটি </a><a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">context menu item যুক্ত করা</a></dd> + <dd> + Firefox's context menu এ items যুক্ত করুন।</dd> + </dl> + </div> +</div> +<hr> +<h3 id="ব্রাউজার_দিয়ে_যোগাযোগ">ব্রাউজার দিয়ে যোগাযোগ</h3> +<div class="column-container"> + <div class="column-half"> + <p><a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page"> একটি web page খোলা </a></p> + <p><a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page"> একটি web page খুলুন একটি নতুন browser tab e অথবা window তে tabs module ব্যবহার করে,এবং ইহার বিষয়বস্তুকে প্রবেশাধিকার দেয়া।</a></p> + <dl> + <dt> + </dt> + <dd> + </dd> + <dt> + পৃষ্ঠা লোড শুনুন</dt> + <dd> + Tabs module ব্যবহার করা অবহিত করার জন্য যখন নতুন web page load হবে, এবং তাদের বিষয়বস্তুকে প্রবেশাধিকার দেয়া হবে।</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + open tab এর তালিকা পাওয়া</dt> + <dd> + বর্তমানে খোলা tabs গুলোর মাধ্যমে বারবার,এবং তাদের content access tab module ব্যবহার করুন।</dd> + </dl> + </div> +</div> +<hr> +<h3 id="ওয়েব_পেজ_পরিবর্তন">ওয়েব পেজ পরিবর্তন</h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">URL এর উপর ভিত্তি করে ওয়েব পেজ পরিবর্তন করা </a></dt> + <dd> + URL এর উপর ভিত্তি করে web pages এর জন্য filters তৈরি করাঃযার URL টি ফিল্টার সাথে মিলে একটি ওয়েব পাতা লোড হয়, যখনই এটি একটি নির্দিষ্ট স্ক্রিপ্ট চালায়।</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">সচল ওয়েব পেজ চালানো </a></dt> + <dd> + বর্তমান সক্রিয় ওয়েব পেজ এর মধ্যে পরিবর্তনশীল একটি স্ক্রিপ্ট লোড করুন।</dd> + </dl> + </div> +</div> +<hr> +<h3 id="উন্নয়ন_কৌশল">উন্নয়ন কৌশল</h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials/Logging">লগিং </a></dt> + <dd> + <br> + ডায়গনিস্টিক উদ্দেশ্যে কনসোল থেকে বার্তা লগ ইন</dd> + <dt> + <br> + পূর্ণব্যবহারযোগ্য মডিউল নির্মাণ</dt> + <dd> + আলাদা modules এ আপনার add-on গঠন করুন যাতে এটি উন্নয়ন,ত্রুটি সরানো,এবং রক্ষণাবেক্ষণ করা সহজ হয়।পূর্ণব্যবহারযোগ্য packages তৈরি করুন যেটা আপনার modules এ ধারণ করবে,সুতরাং অন্যান্য add-on developers রাও তাদের ব্যবহার করতে পারবে।</dd> + <dt> + ইউনিট টেস্টিং</dt> + <dd> + SDK's test framework ব্যবহার করে writting and running unit tests করুন।</dd> + <dt> + ক্রোম কর্তৃপক্ষ</dt> + <dd> + components object এ access পাবেন,আপনার add-on load হওয়ার জন্য সক্রিয় করুন এবং কোন xpcom object ব্যবহার করুন।</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials/Creating_event_targets">event targets </a>তৈরি করা</dt> + <dd> + আপনি তাদের নিজস্ব ইভেন্ট থেকে নির্গত নির্ধারণ বস্তু সক্রিয় করুন।</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + লোড এবং লোড না করার জন্য শুনুন</dt> + <dd> + যখন আপনার add-on firefox এ load বা unload হবে তখন এর বিজ্ঞপ্তি জানুন এবং আর্গুমেন্ট পাস করান add-on এ command line হতে।</dd> + <dd> + <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Third-party modules </a>ব্যবহার করা</dd> + <dd> + ইনস্টল করুন এবং অতিরিক্ত মডিউল ব্যবহার করুন যা SDK এর সাথে Ship করে না।</dd> + <dt> + স্থানীয়করণ</dt> + <dd> + অনুবাদ কোড লেখা।</dd> + <dt> + মোবাইল উন্নয়ন</dt> + <dd> + Firefox Mobile এর জন্য android এর উপর add-ons উন্নয়ন করুন।</dd> + <dt> + <a href="/en-US/Add-ons/Add-on_Debugger">Add-on ডিবাগার</a></dt> + <dd> + আপনার অ্যাড অন এর জাভাস্ক্রিপ্ট ডিবাগ করুন।</dd> + </dl> + </div> +</div> +<hr> +<h3 id="একসঙ্গে_নির্বাণ"><a name="putting-it-together"></a>একসঙ্গে নির্বাণ</h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials/Annotator">ভাষ্যকার add-on </a></dt> + <dd> + একটি অপেক্ষাকৃত জটিল add-on এ walkthrough করা।</dd> + </dl> + </div> +</div> +<p> </p> 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 +--- +<p id="Prerequisites">পূর্বশর্ত</p> +<p>Add-on SDK-র মাধ্যমে উন্নয়ন করতে চাইলে আপনের লাগবেঃ</p> +<ul> + <li><a href="http://www.python.org/">Python</a> 2.5, 2.6 or 2.7. বিঃদ্রঃ Version 3.x of Python কোন Platform এ গ্রহণযোগ্য হবে না।নিশ্চিত করেন যে Python আপনার গতিপথে আছে।</li> + <li>Firefox.</li> + <li>SDK নিজেঃ আপনি এসডিকের সর্বশেষ স্থায়ী সংস্করণ পেতে পারেন tarball অথবা zip file হিসেবে, অথবা আপনি সর্বশেষ উন্নয়ন সংস্করণ পেতে পারেন GitHub repository থেকে।যদি আপনি সর্বশেষ উন্নয়ন সংস্করণ ব্যবহার করে থাকেন, তবে আপনাকে অবশ্যই এটি ব্যবহার করতে হবে Nightly version of Firefox এর সাথে।</li> +</ul> +<h2 id="Git_Sources_থেকে_Extention_Building_করা_AMO_এর_জন্য">Git Sources থেকে Extention Building করা AMO এর জন্য</h2> +<p>শুধুমাত্র addon-sdk sources এর সর্বশেষ git release tag ব্যবহার করা যেতে পারে যদি AMO তে উপস্থাপন করা হয়।</p> +<p>The git archive command প্রয়োজন হয় git clone working directory এর কিছু git attribute placeholders বিশ্লেষণ করার জন্য।</p> +<pre>1 git checkout 1.16 +2 +3 git archive 1.16 python-lib/cuddlefish/_version.py | tar -xvf - +</pre> +<h2 id="FreeBSD_OS_X_Linux_এ_স্থাপন_করা">FreeBSD/ OS X / Linux এ স্থাপন করা</h2> +<p>যে স্থানটি আপনি নির্বাচন করেছেন সে স্থানের File Contents Extract করুন, এবং shell/command prompt এর মাধ্যমে SDK এর root directory navigate করুন। উদাহরণস্বরূপঃ</p> +<pre>1 tar -xf addon-sdk.tar.gz +2 cd addon-sdk +</pre> +<p>যদি আপনি Bash user হন তবে চালু করুন (অধিকাংশ মানুষ)</p> +<pre>source bin/activate +</pre> +<p>এবং আপনি যদি non-Bash user হন ,আপনার চালু করা উচিতঃ</p> +<pre>bash bin/activate +</pre> +<p><span id="result_box" lang="bn"><span class="hps">আপনার কমান্ড</span> <span class="hps">প্রম্পট</span> <span class="hps">এখন</span> <span class="hps">SDK এর</span> <span class="hps">মূল</span> <span class="hps">ডিরেক্টরির নাম</span> <span class="hps">ধারণকারী একটি</span> <span class="hps">নতুন</span> <span class="hps">উপসর্গ</span> <span class="hps">থাকতে হবে</span></span></p> +<pre>(addon-sdk)~/mozilla/addon-sdk > +</pre> +<h2 id="Homebrew_ব্যবহার_করে_Mac_Install_করা">Homebrew ব্যবহার করে Mac Install করা</h2> +<p>যদি আপনি Mac user হন তবে SDK install করতে আপনি Homebrew ব্যবহার করতে পারেন, নিম্নোক্ত নির্দেশ ব্যবহার করেঃ</p> +<pre>brew install mozilla-addon-sdk</pre> +<p>একবার সফলতার সাথে এটি সম্পূর্ণ হলে, আপনি cfx program আপনার command line এ ব্যবহার করতে পারেন যে কোন সময় । আপনার bin/activate চালু করার প্রয়োজন নেই।</p> +<h2 id="Windows_এ_install_করা">Windows এ install করা</h2> +<p>যে স্থানটি আপনি নির্বাচন করেছেন সে স্থানের File Contents Extract করুন, এবং shell/command prompt এর মাধ্যমে SDK এর root directory navigate করুন। উদাহরণস্বরূপঃ</p> +<pre>7z.exe x addon-sdk.zip +cd addon-sdk +</pre> +<p>তারপর চালু করুনঃ</p> +<pre>bin\activate +</pre> +<p><span id="result_box" lang="bn"><span class="hps">আপনার কমান্ড</span> <span class="hps">প্রম্পট</span> <span class="hps">এখন</span> <span class="hps">SDK এর</span> <span class="hps">এর</span> <span class="hps">রুট ডিরেক্টরি</span> <span class="hps">সম্পূর্ণ পাথ</span> <span class="hps">ধারণকারী একটি</span> <span class="hps">নতুন</span> <span class="hps">উপসর্গ</span> <span class="hps">থাকতে হবে</span></span> :</p> +<pre>(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk> +</pre> +<h2 id="সক্রিয়_করা"> সক্রিয় করা</h2> +<p>সক্রিয় কমান্ড কিছু environment variables set করে যেটা SDK এর জন্য প্রয়োজন। এটি শুধুমাত্র variables set করে current command prompt এর জন্য। <code>যদি আপনি নতুন command prompt </code><code>চালু করেন,</code>SDK নতুন prompt এ সক্রিয় হতে পারবে না যতক্ষণ না পর্যন্ত আপনি activate type না করেন।</p> +<p>এটা মানে হল আপনার SDK এর অনেক কপি আপনার disk এর বিভিন্ন স্থানে থাকতে পারে এবং তাদের মধ্যে switch থাকতে পারে, <span id="result_box" lang="bn"><span class="hps">অথবা এমনকি তাদের</span> <span class="hps">উভয়ে</span> <span class="hps">একই সময়ে বিভিন্ন</span> <span class="hps">কমান্ড লিখতে </span><span class="hps">সক্রিয়</span> <span class="hps">থাকে।</span></span></p> +<h3 id="সক্রিয়করণ_স্থায়ী_করা">সক্রিয়করণ স্থায়ী করা</h3> +<p>এই variables গুলো আপনার পরিমণ্ডলে set করলে আপনার সকল নতুন prompt তাদের নির্ণয় করে ফেলবে, আপনি সক্রিয়করণকে স্থায়ী করতে পারবেন। <span id="result_box" lang="bn"><span class="hps">তারপর আপনি</span> <span class="hps">একটি নতুন কমান্ড</span> <span class="hps">প্রম্পট</span> <span class="hps">খুলুন</span> <span class="hps">প্রত্যেক সময়</span> <span class="hps">সক্রিয়</span> <span class="hps">টাইপ</span> <span class="hps">করার প্রয়োজন হবে না</span><span>।</span></span></p> +<p>কারন নতুন মুক্তিপ্রাপ্ত SDK এর সাথে সঠিক variables set পরিবর্তন হতে পারে,activation scripts পড়া উচিত কোন variables set করা প্রয়োজন তা ঠিক করার জন্য। সক্রিয়করণ ব্যবহার করে বিভিন্ন Scripts এবং sets করে বিভিন্ন variables bash environment এর জন্য (Linux and OS X) এবং Windows environments এর জন্য।</p> +<h4 id="Windows">Windows</h4> +<p>Windows এ, <code>bin\activate</code> uses <code>activate.bat</code>, এবং আপনি command line ব্যবহার করে <code>setx</code> tool or the Control Panel সক্রিয়করণ স্থায়ী করতে পাড়েন।</p> +<h4 id="Linux_OS_X">Linux / OS X</h4> +<p>Linux and OS X এ, <code>source bin/activate</code> <code>activate</code> bash script ব্যবহার করে, এবং আপনি সক্রিয়করণ স্থায়ী করতে পারবেন <code>~/.bashrc</code> (on Linux) or <code>~/.bashprofile</code> (on OS X) ব্যবহার করে।</p> +<p>এটির পরিবর্তে আপনার directory তে আপনি cfx program এ সাংকেতিক চিহ্ন তৈরি করতে পারেনঃ</p> +<p> </p> +<pre>ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx +</pre> +<p>SDK install করার করার জন্য যদি আপনি Homebrew ব্যবহার করেন,environment variables আপনার জন্য স্থায়ীভাবে স্থাপন হয়ে থাকবে।</p> +<h2 id="বৈধতা_পরীক্ষা">বৈধতা পরীক্ষা</h2> +<p>আপনার shell prompt এর মাধ্যমে চালু করেনঃ</p> +<pre>cfx +</pre> +<p>এটির নির্গমন এমন হতে হবে যে এটির প্রথম লাইন দেখতে এটির মত,অনেক লাইন তথ্য অনুসরণ করেঃ</p> +<pre>Usage: cfx [options] [command] +</pre> +<p>এটি হয় <a href="/en-US/Add-ons/SDK/Tools/cfx"><code>cfx</code> command-line program</a>। এটি আপনার Add-on SDK এর প্রাথমিক interface। Firefox চালাতে আপনি এটি ব্যবহার করেন এবং আপনার add-on পরীক্ষা করেন, আপনার add-on package করুন বিতরণ করার জন্য, দলিল পরিদর্শন করুন এবং unit tests চালু করুন</p> +<h2 id="সমস্যাসমূহ">সমস্যাসমূহ ?</h2> +<p><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Troubleshooting">Troubleshooting</a> page এ চেষ্টা করুন।</p> +<h2 id="পরবর্তী_পদক্ষেপ">পরবর্তী পদক্ষেপ</h2> +<p>পরবর্তীতে <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">Getting Started With cfx</a> tutorial দেখুন,সেখানে <span class="gt-card-ttl-txt" style="direction: ltr;">ব্যাখ্যা করা আছে যে কেমন করে</span> <code>cfx</code> tool ব্যবহার করে add-ons তৈরি করা যায়।</p> 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 +--- +<div class="note"> + To follow this tutorial you'll need to have <a href="/en-US/Add-ons/SDK/Tutorials/Installation">installed the SDK</a> and learned the <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">basics of <code>cfx</code></a>.</div> +<p> <a href="https://developer.mozilla.org/en/DOM/console">ডম<code> কনসোল অবজেক্ট</code> </a> জাভাস্ক্রিপ্ট ডিবাগ করার জন্য ব্যবহৃত হয়। কারণ ডম অবজেক্ট গুলো মেইন অ্যাড-অন কোডে পাওয়া যায় না । SDK এর নিজেস্ব গ্লোবাল কনসোল অবজেক্ট আছে যার অধিকাংশ মেথড ডম কনসোল এর মত , যার মধ্যে আছে লগ এরর, ওয়ার্নিং অথবা ইনফরমেশনাল ম্যাসেজ। কনসোল এ এক্সেস করার জন্য আপনার কোন কিছুর প্রয়োজন<code>()নেই।</code> এটি automatically আপনার জন্য দেয়া আছে ।</p> +<p>The <code>console.log()</code> method prints an informational message:</p> +<pre class="brush: js">console.log("Hello World"); +</pre> +<p>Try it out:</p> +<ul> + <li>create a new directory, and navigate to it</li> + <li>execute <code>cfx init</code></li> + <li>open "lib/main.js" and add the line above</li> + <li>execute <code>cfx run</code>, then <code>cfx run</code> again</li> +</ul> +<p>Firefox will start, and the following line will appear in the command window you used to execute <code>cfx run</code>:</p> +<pre>info: Hello World! +</pre> +<h2 id="console_in_Content_Scripts"><code>console</code> in Content Scripts</h2> +<p>You can use the console in <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">content scripts</a> 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 <code>console.log()</code> inside a content script:</p> +<pre class="brush: js">require("sdk/tabs").on("ready", function(tab) { + tab.attach({ + contentScript: "console.log(document.body.innerHTML);" + }); +}); +</pre> +<h2 id="console_Output"><code>console</code> Output</h2> +<p>If you are running your add-on from the command line (for example, executing <code>cfx run</code> or <code>cfx test</code>) then the console's messages appear in the command shell you used.</p> +<p>If you've installed the add-on in Firefox then the messages appear in Firefox's <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</p> +<p>But note that <strong>by default, calls to <code>console.log()</code> will not result in any output in the Error Console for any installed add-ons</strong>: this includes add-ons installed using the Add-on Builder or using tools like the <a href="https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/">Extension Auto-installer</a>.</p> +<p>See <a href="/en-US/Add-ons/SDK/Tools/console#Logging_Levels">"Logging Levels"</a> in the console reference documentation for more information on this.</p> +<h2 id="Disabling_strict_mode">Disabling strict mode</h2> +<p class="note">By default, <code>cfx</code> 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 <code>False</code>.</p> +<h2 id="Learning_More">Learning More</h2> +<p>For the complete <code>console</code> API, see its <a href="/en-US/Add-ons/SDK/Tools/console">API reference</a>.</p> 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 +--- +<div class="note"> + <p><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">এই tutorial আপনার থাকতে দরকার হবে অনুসরন করতে</span><span> <a href="/en-US/Add-ons/SDK/Tutorials/Installation">installed the SDK</a>, </span><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">জ্ঞানী </span><span><a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">basics of <code>cfx</code></a>, </span><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">আর অনুসরন করা tutorial</span><span> <a href="/en-US/Add-ons/SDK/Tutorials/Creating_reusable_modules">writing reusable modules</a>.</span></p> +</div> +<div class="note"> + <p><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">যদি আপনি ব্যবহার করতেন</span> <a href="/en-US/Add-ons/SDK/Tools/jpm">jpm</a> <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">cfx বদলে, cfx থেকে স্থানান্তর করতে গাইড দেখে</span>, in particular <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">সেকশান</span> <a href="/en-US/Add-ons/SDK/Tools/cfx_to_jpm#Requiring_modules_from_test_code">loading modules from test code</a>.</p> +</div> +<p><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">sdk দেয় একটি কাঠামো সাহায্য করতে বানায় আর আপনার কোড-এর জন্য অংশ পরীক্ষা দৌড়ায়</span>. <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">এটা হাতেকলমে দেখাতে কাজ করে আমরা একটি সাদাসিধে-এর জন্য কিছু অংশ পরীক্ষা লিখব</span> <a href="http://en.wikipedia.org/wiki/Base64">Base64</a> <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">মডিউল সঙ্কেতাক্ষরে লিখতে</span>.</p> +<h2 id="একটি_সাদাসিধে_base64_মডিউল"><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">একটি সাদাসিধে base64 মডিউল</span></h2> +<p><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">একটি ওয়েব পাতায়, আপনি base64 সম্পাদন করতে পারেন ( -rrb- আর atob -lrb- ) কাজ ব্যবহার সঙ্কেতাক্ষরে লিখতে আর btoa ব্যবহার করা সন্কেত উদঘাটন করতে।</span><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">দুর্ভাগ্যক্রমে এই কাজ ব্যবহার জানালা জিনিষে সংযুক্ত করা হয়: যেহেতু এই জিনিষ না উপস্থিত আপনার প্রধান add-on কোডে, atob ( -rrb- আর btoa -lrb- ) নেই উপস্থিত either।</span> <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">তাই আমরা একটি base64 মডিউল বানাবো প্ল্যাটফর্ম থেকে এই কাজ ব্যবহার অনাবৃত করতে।</span></p> +<p><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">শুরুতে, একটি নতুন ডিরেক্টরি বানাতে, এটায় পথ খোঁজতে, আর cfx init দৌড়াতে।</span> Now create a new file in "lib" called "base64.js", and give it the following contents:<span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">এখন `` libে '' `` "base64.js" ডাকা একটি নতুন ফাইল বানান।</span></p> +<pre class="brush: js">const { atob, btoa } = require("chrome").Cu.import("resource://gre/modules/Services.jsm", {}); + +exports.atob = a => atob(a); +exports.btoa = b => btoa(b); </pre> +<p><code><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">এই কোড দুটো কাজ ব্যবহার, যা মাত্র প্ল্যাটফর্ম-এর btoa ডাকে রপ্তানি করে</span>()</code> and <code>atob()</code> functions. <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">ব্যবহারে মডিউল দেখাতে, সম্পাদন করতে</span> "main.js"<span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">দাখিল করুন যেহেতু এটি অনুসরন করে:</span></p> +<pre class="brush: 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); + } +});</pre> +<p><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">আপনার add-ons `` ডাটা '' ডিরেক্টরিতে বাঁচাতে </span><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;"> উপরন্তু দৃষ্টান্ত একটি প্রতিমা উল্লেখ করে `` icon-16 দাখিল করে থাকতে হবে। । আপনি এই প্রতিমা ডাউনলোড করতে পারতেন:</span> <img alt="" src="https://mdn.mozillademos.org/files/7661/icon-16.png" style="width: 16px; height: 16px;">.</p> +<p><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">এখন</span> "main.js" <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">আমদানি base64 মডিউল আর ডাক এটার দুটো exported কাজ ব্যবহার।</span></p> +<table style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 12px; line-height: normal; overflow: auto; width: 400px; height: 40px;"> + <tbody> + <tr> + <td><span style="font-size: 16px;">যদি আমরা add-on দৌড়াতাম আর বাটন ক্লিক করি, আমরা অনুসরন করা লগ করা আউটপুট দেখা উচিত</span></td> + </tr> + </tbody> +</table> +<p>:</p> +<pre>info: aGVsbG8= +info: hello +</pre> +<h2 id="পরীক্ষা_করে_base64_মডিউল"><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">পরীক্ষা করে base64 মডিউল</span></h2> +<p><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">navigate এ্যাডঅন-এর-এর</span> <code>test</code> <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">directory আর delete</span> <code>test-main.js</code> <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">ফাইল</span>. <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">এটার জায়গায় বানান একটি ফাইল যা ডাকা হলো</span> <code>test-base64.js</code> <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">অনুসরন করা অভ্যন্তরস্থ বস্তু-এর সাথে</span>:</p> +<pre class="brush: 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); </pre> +<p><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">এটা দাখিল করে</span>: <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">রপ্তানি করে তিন কাজ ব্যবহার, যার each একটি একাকী যুক্তি পেতে আশা করে যা হচ্ছে একটি</span> <code>assert</code> <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">জিনিষ</span>. <code>assert</code> <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">যোগান দেয়া হয়</span> <a href="/en-US/Add-ons/SDK/Low-Level_APIs/test_assert"><code>test/assert</code></a> <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">module আর বাস্তবায়িত করে</span><a href="http://wiki.commonjs.org/wiki/Unit_Testing/1.1">CommonJS Unit Testing specification</a>.</p> +<ul> + <li> + <p><code><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">প্রথম দুটো কাজ ব্যবহার atob ডাকে</span>()</code> <code><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">আর btoa</span>()</code> <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">আর ব্যবহার</span> <a href="/en-US/Add-ons/SDK/Low-Level_APIs/test_assert#ok(guard.2C_message)"><code>assert.ok()</code></a> <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">যাচাই করতে যে হচ্ছে as আশা করা আউটপুট।</span></p> + </li> + <li> + <p><code><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">দ্বিতীয় কাজ ব্যবহার একটি খালি সূতা পাশ করতে দ্বারা মডিউল-এর error-handling কোড পরীক্ষা করে</span>atob()</code> <code><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">আর ব্যবহার করতে</span><a href="/en-US/Add-ons/SDK/Low-Level_APIs/test_assert#throws(block.2C_error.2C_message)">assert.throws()</a></code> <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">যাচাই করতে যে ওঠানো হয় প্রত্যাশিত ব্যতিক্রম।</span></p> + </li> +</ul> +<p><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">এই মুহূর্তে আপনার add-on ought এই মত দেখতে:</span></p> +<pre> /base64 + package.json + README.md + /doc + main.md + /lib + main.js + base64.js + /test + test-base64.js +</pre> +<p><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">এখন cfx নির্বাহ করুন-- এ্যাডঅন-এর মূল ডিরেক্টরি থেকে verbose পরীক্ষা করুন। আপনি এখন এর মত কিছু দেখা পাবেন:</span></p> +<pre>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. +</pre> +<table style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 12px; line-height: normal; overflow: auto; width: 400px; height: 40px;"> + <tbody> + <tr> + <td><span style="font-size: 16px;">কি ঘটে এখানে হচ্ছে সে cfx পরীক্ষা</span></td> + </tr> + </tbody> +</table> +<p><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">যোজক চিহ্ন নোট করুন</span><span> "test" </span><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">module নামে।</span><span> <code>cfx test</code></span><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">will অন্তর্ভুক্ত করে একটি মডিউল যা ডাকা হলো</span><span> "test-myCode.js", </span><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">কিন্তু, অভিলাষ মডিউল ছাঁটাই করে যা ডাকা হলো</span><span> "test_myCode.js" or "testMyCode.js".</span></p> +<ul> + <li><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">পরীক্ষা ডিরেক্টরিতে রূপ আপনার প্যাকেজ-এর</span></li> + <li><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">যেকোনো মডিউল যার নাম শব্দ পরীক্ষার সাথে শুরু করে loads-</span></li> + <li><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">প্রত্যেক exported কাজ ব্যবহার যার নাম শুরু করে calls</span>"test", <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">এটা একটি পাশ করতে</span> <a href="/en-US/Add-ons/SDK/Low-Level_APIs/test_assert#Assert"><code>assert</code></a> <span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">এটার একমাত্র যুক্তি হিসেবে আপত্তি করুন।</span></li> +</ul> +<p><span style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 16px; line-height: normal;">স্পষ্টত, আপনার-- verbose অপশন পাশ করতে cfx যদি আপনি চাইতেন না হবে না; এত মাত্র করতে আউটপুট আরো সহজ পড়তে বানায়।</span></p> 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 +--- +<div>{{AddonSidebar}}</div> + +<div class="note"> +<p>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.</p> +</div> + +<p>WebExtensions are a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a> supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> with <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">just a few changes</a>. The API is also fully compatible with <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>.</p> + +<p>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 <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> or <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> on <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h3 id="Getting_started">Getting started</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions_">What are WebExtensions?</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_first_WebExtension">Your first WebExtension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">Your second WebExtension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomy of a WebExtension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Examples">Example WebExtensions</a></li> +</ul> + +<h3 id="How_to">How to</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Intercept HTTP requests</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Modify a web page</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li> + <li>Manipulate browser tabs</li> + <li>Access and modify bookmarks</li> + <li>Access and modify cookies</li> +</ul> + +<h3 id="Concepts">Concepts</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_JavaScript_APIs">Using the JavaScript APIs</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Match patterns</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internationalization</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a></li> +</ul> + +<h3 id="Porting">Porting</h3> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">Porting a Google Chrome extension</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Porting a legacy Firefox add-on</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Comparison with the Add-on SDK</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparison with XUL/XPCOM extensions</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Chrome incompatibilities</a></li> +</ul> + +<h3 id="Firefox_workflow">Firefox workflow</h3> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Installation</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Getting started with web-ext</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">web-ext command reference</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">WebExtensions and the Add-on ID</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Publishing your WebExtension</a></li> +</ul> +</div> + +<div class="section"> +<h3 id="Reference">Reference</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API overview</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser compatibility tables for JavaScript APIs</a></li> +</ul> + +<h4 id="JavaScript_APIs">JavaScript APIs</h4> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}</div> + +<h4 id="Manifest_keys">Manifest keys</h4> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div> +</div> +</div> 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 +--- +<p><span id="result_box" lang="bn"><span title="<p>This page contains links to documentation for the approach to developing extensions for Gecko-based applications which uses:</p> + +">এই পাতা গেকো ভিত্তিক অ্যাপ্লিকেশনের জন্য উন্নয়নশীল এক্সটেনশন পদ্ধতির যা ব্যবহার ডকুমেন্টেশন লিঙ্ক উপস্থিত রয়েছে</span><br> + <br> + <br> + <span title="<li>XUL overlays to specify the interface</li> + "> XUL প্রতিস্থাপক ইন্টারফেস করুন </ li> নির্দিষ্ট করার<br> + </span><span title='&lt;li>APIs available to privileged code, such as &lt;a href="/en-US/docs/XUL/tabbrowser">&lt;code>tabbrowser&lt;/code>&lt;/a> and &lt;a href="/en-US'><লি> যেমন <a href="/en-US/docs/XUL/tabbrowser"> <code> বিশেষ সুবিধাভোগী কোড উপলব্ধ API গুলি, tabbrowser </ code> </a> এবং <একটি href = "/ en-US </span><span title='/docs/Mozilla/JavaScript_code_modules">JavaScript modules&lt;/a>, to interact with the application and content.&lt;/li> +'>/ ডক্স / মজিলা / JavaScript_code_modules "> জাভাস্ক্রিপ্ট মডিউল </a>, অ্যাপ্লিকেশন এবং কন্টেন্ট সঙ্গে যোগাযোগ করার জন্য. </ li></span><br> + <span title="</ul> + +"></ Li></span><br> + <br> + <span title="<p>Prior to Firefox 4, and the Gecko 2 engine that powers it, this was the only way to develop extensions."><P> ঢাকা ফায়ারফক্স 4, এবং গেকো 2 ইঞ্জিন এটি ক্ষমতা, এই এক্সটেনশন বিকাশ করার একমাত্র উপায় ছিল এর আগে. </span><span title='This methodology has largely been superseded by &lt;a href="/en-US/docs/Extensions/Bootstrapped_extensions">restartless extensions&lt;/a>, and the &lt;a href="/en-US/Add-ons/SDK">'>এই পদ্ধতি মূলত <a href="/en-US/docs/Extensions/Bootstrapped_extensions"> রিস্টার্টবিহীন এক্সটেনশন </a>, এবং <a দ্বারা বাতিল হয়েছে href="/en-US/Add-ons/SDK"> </span><span title="Add-on SDK</a>, which is built on top of them.">অ্যাড-অন এসডিকে </a>, যা তাদের উপর নির্মিত হয়. </span><span title="The privileged JavaScript APIs described here can still be used in these newer types of add-ons.</p> + +">সুবিধাভোগী জাভাস্ক্রিপ্ট এপিআই এখানে বর্ণনা এখনও অ্যাড টার্ন এই নতুন ধরনের ব্যবহার করা যেতে পারে. '</ p></span><br> + <br> + <span title='&lt;h2 id="XUL_School">XUL School&lt;/h2> + +'><H2 & id = "XUL_School"> XUL স্কুল </ h2></span><br> + <br> + <span title='&lt;p>&lt;a href="/en-US/Add-ons/Overlay_Extensions/XUL_School">XUL School&lt;/a> is a comprehensive add-on development tutorial, focusing on Firefox extension development but mostly applicable to other Gecko-based'><পি> <a href="/en-US/Add-ons/Overlay_Extensions/XUL_School"> XUL স্কুল </a> একটি ব্যাপক অ্যাড অন উন্নয়ন টিউটোরিয়াল, কিন্তু বেশিরভাগই অন্যান্য গেকো ভিত্তিক প্রযোজ্য ফায়ারফক্স এক্সটেনশন উন্নয়ন উপর মনোযোগ নিবদ্ধ করে </span><span title="applications.</p> + +">অ্যাপ্লিকেশন. '</ p></span><br> + <br> + <span title='&lt;h2 id="More_resources">More resources&lt;/h2> + +'><H2 & id = "More_resources"> আরো সম্পদ করুন </ h2></span><br> + <br> + <span title='&lt;div class="column-container"> +'><Div class = "কলাম-ধারক"></span><br> + <span title='&lt;div class="column-half"> +'><Div class = "কলাম অর্ধ"></span><br> + <span title="<dl> + "><DL><br> + </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Setting_up_extension_development_environment">Setting up your environment&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/Mozilla/Add-ons/Setting_up_extension_development_environment"> আপনার পরিবেশ </a> </ DT> সেট আপ<br> + </span><span title="<dd>Setting up the application for extension development.</dd> + "><DD> এক্সটেনশন উন্নয়নের জন্য আবেদন সেট আপ হচ্ছে. </ DD><br> + </span><span title='&lt;dt>&lt;a href="/en-US/docs/XUL">XUL&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/docs/XUL"> XUL </a> </ DT><br> + </span><span title="<dd>Tutorials and reference for the user interface language used by XUL extensions.</dd> + "><DD> টিউটোরিয়াল এবং ইউজার ইন্টারফেস XUL এক্সটেনশন. </ DD> দ্বারা ব্যবহৃত ভাষা জন্য রেফারেন্স<br> + </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Code_snippets">Code snippets&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/Mozilla/Add-ons/Code_snippets"> কোড স্নিপেট </a> </ DT><br> + </span><span title="<dd>Sample code for many of the things you'll want to do.</dd> + "><DD> জিনিষ আপনি করতে চাইবেন. </ DD> অনেক জন্য নমুনা কোড<br> + </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Installing_extensions">Installing extensions&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/Mozilla/Add-ons/Installing_extensions"> এক্সটেনশন </a> </ DT> ইনস্টল<br> + </span><span title="<dd>How to install an extension by copying the extension files into the application's install directory.</dd> + "><DD> অ্যাপ্লিকেশনের তালিকা ইনস্টল এক্সটেনশান ফাইল অনুলিপি দ্বারা একটি এক্সটেনশন ইনস্টল করার জন্য কিভাবে. </ DD><br> + </span><span title='&lt;dt>&lt;a href="/en-US/Add-ons/Overlay_extensions/Firefox_addons_developer_guide">Firefox add-ons developer guide&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/Add-ons/Overlay_extensions/Firefox_addons_developer_guide"> ফায়ারফক্স অ্যাড-অন ডেভেলপার নির্দেশিকা </a> </ DT><br> + </span><span title="<dd>A guide to developing overlay extensions.</dd> +"><DD> ওভারলে এক্সটেনশন. </ DD> উন্নয়নশীল একটি নির্দেশিকা</span><br> + <span title="</dl> +"></ DL></span><br> + <span title="</div> + +"></ Div></span><br> + <br> + <span title='&lt;div class="column-half"> +'><Div class = "কলাম অর্ধ"></span><br> + <span title="<dl> + "><DL><br> + </span><span title='&lt;dt>&lt;a href="/en-US/docs/Mozilla/JavaScript_code_modules">JavaScript code modules&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/docs/Mozilla/JavaScript_code_modules"> জাভাস্ক্রিপ্ট কোড মডিউল </a> </ DT><br> + </span><span title="<dd>JavaScript modules available to extension developers.</dd> + "><DD> জাভাস্ক্রিপ্ট মডিউল এক্সটেনশন ডেভেলপার. </ DD> উপলব্ধ<br> + </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Inline_Options">Extension preferences&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/Mozilla/Add-ons/Inline_Options"> এক্সটেনশন পছন্দগুলি </a> </ DT><br> + </span><span title="<dd>How to specify the preferences for your extension that will appear in the Add-ons Manager.</dd> + "><DD> কিভাবে আপনার এক্সটেনশন পছন্দগুলি যে অ্যাড-অন ম্যানেজার প্রদর্শিত হবে তা নির্দিষ্ট করার. </ DD><br> + </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Extension_Packaging">Extension packaging&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/Mozilla/Add-ons/Extension_Packaging"> এক্সটেনশন প্যাকেজিং </a> </ DT><br> + </span><span title="<dd>How extensions are packaged and installed.</dd> + "><DD> কিভাবে এক্সটেনশন প্যাকেজ এবং ইনস্টল করা হয়. </ DD><br> + </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System">Binary Firefox extensions&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/Mozilla/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System"> বাইনারি ফায়ারফক্স এক্সটেনশন </a> </ DT><br> + </span><span title="<dd>Creating binary extensions for Firefox.</dd> +"><DD> ফায়ারফক্সের জন্য বাইনারি এক্সটেনশন তৈরি. </ DD></span><br> + <span title="</dl> +"></ DL></span><br> + <span title="</div> +"></ Div></span><br> + <span title="</div> + +"></ Div></span><br> + <br> + <span title="<p>&nbsp;</p>"><পি> & nbsp; </ p></span></span></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 +--- +<p>{{AddonSidebar}}</p> + +<p>এই অনুচ্ছেদে ফায়ারফক্সের WebExtension তৈরীর আদ্যপন্ত জানব। এই অ্যাড-অন "mozilla.org" অথবা এর সাবডোমেন থেকে আসা সমস্ত পেজে লাল বর্ডার যোগ করবে।</p> + +<p>এই উদাহরণের সোর্স কোড GitHub-এ দেওয়া আছেঃ</p> + +<p><a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p> + +<p>প্রথমে দরকার হবে ফায়ারফক্স ৪৫ অথবা তার পরবর্তী ভার্সন।</p> + +<h2 id="WebExtension_লিখা">WebExtension লিখা</h2> + +<p>নতুন একটি ডিরেক্টরী তৈরী করে সেখানে প্রবেশ করুনঃ</p> + +<pre class="brush: bash">mkdir borderify +cd borderify</pre> + +<h3 id="manifest.json">manifest.json</h3> + +<p>এখন "borderify" ডিরেক্টরীর ভেতরে "manifest.json" নামে নতুন একটি ফাইল তৈরী করুন। তাতে নিম্নলিখিত কোড লিখুনঃ</p> + +<pre class="brush: 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"] + } + ] + +}</pre> + +<ul> + <li>প্রথম তিনটি key: <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, এবং <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, দিতেই হবে যাতে অ্যাড-অনের প্রাথমিক মেটাডাটা থাকে।</li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> ঐচ্ছিক কিন্তু দিতে পরাপর্শ দেওয়া হচ্ছে কারণ, অ্যাড-ম্যানেজারে এই তথ্য দেখাবে।।</li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> ঐচ্ছিক যা অ্যাড-অনের একটি আইকন নির্দিষ্ট করে,যা অ্যাড-ম্যানেজারে দেখাবে তাই দিতে পরামর্শ দেওয়া হচ্ছে।</li> +</ul> + +<p>কিছু ফায়ারফক্স ভার্সনে একটি অতিরক্ত <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/applications">applications </a></code>key manifest.json-এ যোগ করা লাগতে পারে।</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"applications":</span> <span class="punctuation token">{</span> + <span class="key token">"gecko":</span> <span class="punctuation token">{</span> + <span class="key token">"id":</span> <span class="string token">"borderify@example.com"</span><span class="punctuation token">,</span> + <span class="key token">"strict_min_version":</span> <span class="string token">"42.0"</span><span class="punctuation token">,</span> + <span class="key token">"strict_max_version":</span> <span class="string token">"50.*"</span><span class="punctuation token">,</span> + <span class="key token">"update_url":</span> <span class="string token">"https://example.com/updates.json"</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<p>সবচেয়ে মজার key হচ্ছ <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>. এটা ফায়ারফক্সকে সেই সব ওয়েব পেজে স্ক্রীপট লোড করতে বলবে যাদের URL-এ একটি নির্দিষ্ট প্যাটার্ন আছে।এক্ষেত্রে আমরা ফায়ারফক্সকে "mozilla.org" বা এর সাবডোমেনের সমস্ত HTTP অথবা HTTPS পেজে "borderify.js" নামে স্ক্রীপট লোড করতে বলছি।</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Learn more about content scripts.</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Learn more about match patterns</a>.</li> +</ul> + +<h3 id="iconsborder-48.png">icons/border-48.png</h3> + +<p>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".</p> + +<p>Create the "icons" directory directly under the "borderify" directory. Save an icon there named "border-48.png". You could use <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">the one from our example</a>, which is taken from the Google Material Design iconset, and is used under the terms of the <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a> license.</p> + +<p>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 <code>96</code> property of the <code>icons</code> object in manifest.json:</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span> + <span class="key token">"48":</span> <span class="string token">"icons/border-48.png", + "96": "icons/border-96.png"</span> +<span class="punctuation token">}</span></code></pre> + +<p>Alternatively, you could supply an SVG file here, and it will be scaled correctly.</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">Learn more about specifying icons.</a></li> +</ul> + +<h3 id="borderify.js">borderify.js</h3> + +<p>Finally, create a file called "borderify.js" directly under the "borderify" directory. Give it this content:</p> + +<pre class="brush: js">document.body.style.border = "5px solid red";</pre> + +<p>This script will be loaded into the pages that match the pattern given in the <code>content_scripts</code> manifest.json key. The script has direct access to the document, just like scripts loaded by the page itself.</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Learn more about content scripts.</a></li> +</ul> + +<h2 id="Testing_it_out">Testing it out</h2> + +<p>First, double check that you have the right files in the right places:</p> + +<pre>borderify/ + icons/ + border-48.png + borderify.js + manifest.json</pre> + +<p>Open "about:debugging" in Firefox, click "Load Temporary Add-on" and select any file in your add-on's directory:</p> + +<p>{{EmbedYouTube("cer9EUKegG4")}}</p> + +<p>The add-on will now be installed, and will stay until you restart Firefox.</p> + +<p>Now try visiting a page under "mozilla.org", and you should see the red border round the page:</p> + +<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p> + +<p>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:</p> + +<p>{{EmbedYouTube("NuajE60jfGY")}}</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Learn more about loading add-ons</a></li> +</ul> + +<h2 id="Packaging_and_publishing">Packaging and publishing</h2> + +<p>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 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publishing your WebExtension"</a>.</p> + +<h2 id="What's_next">What's next?</h2> + +<p>Now you've got an idea of the process of developing a WebExtension for Firefox, try:</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">reading more about the anatomy of WebExtensions</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">writing a more complex WebExtension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/API">reading about the JavaScript APIs available to WebExtensions.</a></li> +</ul> diff --git a/files/bn/mozilla/add-ons/থিম/index.html b/files/bn/mozilla/add-ons/থিম/index.html new file mode 100644 index 0000000000..30bd842c22 --- /dev/null +++ b/files/bn/mozilla/add-ons/থিম/index.html @@ -0,0 +1,60 @@ +--- +title: থিম +slug: Mozilla/Add-ons/থিম +tags: + - NeedsReview +translation_of: Mozilla/Add-ons/Themes +--- +<p>থিমস বিভিন্ন মোজিলা অ্যাপ্লিকেশনের জন্য স্কিনস। তারা আপনার ইউজার ইন্টারফেস এর লুক এবং অনুভুতিতে পরিবর্তন এবং আপনার কার্যকলাপকে এটি ব্যক্তিগতকৃত করতে অনুমতি দেয়। একটি থিম সহজভাবে UI এর রং পরিবর্তন করতে পারে অথবা এটি তার লুক এর প্রতিটি স্থানের পরিবর্তন করতে পারে। এখানে থিম ডকুমেন্টেশন তারিখ সীমার বাইরে, কিন্তু আমরা শীঘ্রই এটি আপডেট করার জন্য কিছু সাহায্য পেতে প্রত্যাশা করছি।</p> +<div class="column-container"> + <div class="column-half"> + <h2 class="Documentation" id="Documentation" name="Documentation">নথিপত্র</h2> + <dl> + <dt> + <a href="/en-US/docs/Building_a_Theme" title="Building a Theme">Building a Theme</a></dt> + <dd> + ফায়ারফক্স এর একটি সহজ থিম নির্মাণের জন্য একটি টিউটোরিয়াল।</dd> + <dt> + <a href="/en-US/docs/Themes/Common_Firefox_Theme_Issues_and_Solutions" title="Themes/Common_Firefox_Theme_Issues_and_Solutions">Common Theme Issues and Their Solutions</a></dt> + <dd> + যখন AMO সম্পাদকরা থিম এবং কিভাবে তাদের ঠিক করতে হবে এটা নিয়ে পর্যালোচনা করেন তখন প্রচলিত বিষয় দেখা যায়।</dd> + <dt> + <a href="/en-US/docs/Themes/Lightweight_themes" title="Themes/Lightweight themes">Lightweight themes</a></dt> + <dd> + ফায়ারফক্সের জন্য লাইটওয়েট থিম নির্মাণের প্রণালী।</dd> + <dt> + <a href="/en-US/docs/Creating_a_Skin_for_SeaMonkey_2.x" title="Creating_a_Skin_for_SeaMonkey_2.x">Creating a Skin for SeaMonkey 2</a></dt> + <dd> + সীমাংকি 2 জন্য নতুন থিম তৈরির জন্য একটি উপস্থাপনা।</dd> + <dt> + <a href="/en-US/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales" title="Making_Sure_Your_Theme_Works_with_RTL_Locales">Making Sure Your Theme Works with RTL Locales</a></dt> + <dd> + আপনার থিম হিব্রু, আরবি, ফার্সি ও উর্দু লোকেইলের সাথে সঠিক হবে কাজ করবে এটা নিশ্চিত করুন।</dd> + <dt> + <a href="/en-US/docs/Theme_Packaging" title="Theme_Packaging">Theme Packaging</a></dt> + <dd> + ফায়ারফক্স এবং থান্ডারবার্ড জন্য থিম প্যাকেজ করুন।</dd> + <dt> + <a href="http://www.tudobom.de/articles/yatt/" title="http://www.tudobom.de/articles/yatt/">Yet Another Theme Tutorial</a></dt> + <dd> + মোজিলা থিম নির্মাণ এর জন্য আরেকটি টিউটোরিয়াল।</dd> + <dt> + <a href="/en-US/Mozilla/Add-ons/Themes/Obsolete">Obsolete docs</a></dt> + <dd> + এই ডক্স খুব পুরানো এবং আপডেট করা হবে না কখনও কিন্তু থিম ডকুমেন্টেশন আপডেট সবার জন্য দরকারী উৎস উপাদান তাই তাদের জন্য রাখা হয়েছে।</dd> + </dl> + </div> + <div class="column-half"> + <h2 id="Getting_help">Getting help</h2> + <ul> + <li><a href="http://forums.mozillazine.org/viewforum.php?f=18">MozillaZine Themes forum</a></li> + </ul> + <h2 class="Tools" id="Tools" name="Tools">Tools</h2> + <ul> + <li><a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/inspectorwidget/">InspectorWidget</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-us/firefox/addon/force-rtl/">Force RTL</a>: Test for RTL compatibility</li> + </ul> + </div> +</div> +<p> </p> diff --git a/files/bn/mozilla/add-ons/থিম/obsolete/index.html b/files/bn/mozilla/add-ons/থিম/obsolete/index.html new file mode 100644 index 0000000000..43f20d34b5 --- /dev/null +++ b/files/bn/mozilla/add-ons/থিম/obsolete/index.html @@ -0,0 +1,9 @@ +--- +title: Obsolete +slug: Mozilla/Add-ons/থিম/Obsolete +tags: + - needsRevision +translation_of: Mozilla/Add-ons/Themes/Obsolete +--- +<p>এই পৃষ্ঠাটি কিছু থিম সংগ্রহ করে যেগুলো আমরা মনে করি কখনই হালনাগাদ করা হবে না , কিন্তু আমরা এই সময়ের জন্য এগুলো কে শক্তিশালী উৎস হিসেবে রেখে দিচ্ছি পরবর্তীতে ব্যবহার করার জন্য ।</p> +<p>{{ ListSubPages ("/en-US/Add-ons/Themes/Obsolete", 5) }}</p> 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 +--- +<p><a class="link-https" href="https://bugzilla.mozilla.org/">bugzilla.mozilla.org</a> (প্রায়ই সংক্ষেপে b.m.o ব্যবহার করা হয়) হল Mozilla.org-এর বাগ ট্যাকিং পদ্ধতি, এটি একটি ডাটাবেজ যেখানে ফায়ারফক্স, থান্তারবার্ড, সিমাংকি, ক্যামিনো এবং mozilla.org এর অন্যান্য প্রকল্পের বাগ এবং নতুন বৈশিষ্টের অনুরোধ সংরক্ষন করা হয়।</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">B.m.o. ডকুমেন্টেশন</h2> + +<dl> + <dt><a href="/en-US/docs/What_to_do_and_what_not_to_do_in_Bugzilla" title="en/What_to_do_and_what_not_to_do_in_Bugzilla">বাগজিলায় কোন কাজগুলো করা যাবে এবং কোনগুলো করা যাবে না</a></dt> + <dd>বাগজিলা ব্যবহারের বিভিন্ন টিপস্ এবং যে কাজগুলো এড়িয়ে চলতে হবে তার একটি তালিকা। </dd> + <dt><a class="link-https" href="https://bugzilla.mozilla.org/page.cgi?id=etiquette.html">বাগজিলা শিষ্টাচার</a></dt> + <dd>আদব কায়দার তালিকা, b.m.o.-তে আপনি নিজেকে কিভাবে পরিচালিত করবেন, আপনার আচরণ এবং সৌজন্যতা কিভাবে কোন একটি সমস্যার দ্রুত সমাধান পেতে সহায়তা করবে সেটি বিস্তারিতভবে বর্ণনা করা হয়েছে এখানে।</dd> + <dt><a href="http://www.mozilla.org/quality/help/beginning-duplicate-finding.html" title="http://www.mozilla.org/quality/help/beginning-duplicate-finding.html">কিভাবে জানবেন একটি বাগ আগেই রিপোর্ট করা হয়েছে কিনা</a></dt> + <dd>নতুন কোন একটি বাগ রিপোর্ট করার আগে জেনে নেয়া ভালো (বাধ্যতামূলক নয়) যে আগেই অন্য কেউ এটি বিষয়ে রিপোর্ট করেছেন কিনা। এটি গাইডে বিষয়টি বিস্তারিত বর্ণনা করা হয়েছে।</dd> + <dt><a href="/en-US/docs/Mozilla/QA" title="/en-US/docs/Mozilla/QA">মান নিয়ন্ত্রণ</a></dt> + <dd>মোজিলার মান নিয়ন্ত্রণের ডকুমেন্টেশন।</dd> + <dt><a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/en-US/docs/Mozilla/QA/Bug_writing_guidelines">বাগ লেখার গাইডলাইন</a></dt> + <dd>ডেভলপার দল যেন বাগের বর্ণনা পড়ে সহজেই সেটির বিস্তারিত বুঝতে পারে, এমন বর্ণনা লেখার পদ্ধতি সম্পর্কে বিস্তারিত উল্লেখ রয়েছে এই ডকুমেন্টেশনে।</dd> + <dt><a href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch">কিভাবে একটি প্যাচ সাবমিট করবেন</a></dt> + <dd>আপনি যদি একটি বাগ সমাধান করেন, অথবা নতুন কোনো বৈশিষ্ট সংযোজন করেন তবে আপনার এই প্যাচটি মূল সোর্স-ট্রিতে যুক্ত করতে হবে। সংযোজনের পর এটি মোজিলার ঐ প্রকল্পের সাথে সকলের ব্যবহার উপযোগী হিসাবে পাওয়া যাবে। এই গাইড থেকে আপনি এই কাজটি কার ধাপগুলো সম্পর্কে জানতে পারবেন।</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Bugzilla" title="/en-US/docs/tag/CSS">সবগুলো দেখুন...</a></span></p> +</div> + +<div class="section"> +<h2 id="অন্যান্য_ডকুমেন্টসমূহ">অন্যান্য ডকুমেন্টসমূহ</h2> + +<ul> + <li><a class="external" href="http://www.bugzilla.org/about/">An Introduction to Bugzilla</a></li> + <li><a class="external" href="http://blog.johnath.com/2010/02/04/bugzilla-for-humans">Bugzilla for humans</a></li> + <li><a class="external" href="http://www.squarefree.com/bugzilla/quicksearch-help.html">Bugzilla QuickSearch help page</a>. QuickSearch, বাগজিলায় দ্রুত, সহজে এবং কার্যকর উপায়ে অনুসন্ধানের একটি পদ্ধতি।</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Bugzilla/Testopia" title="https://developer.mozilla.org/en-US/docs/Mozilla/Bugzilla/Testopia">Testopia</a> - টেস্টকেস ব্যবস্থাপনার এক্সটেনশন</li> + <li><a class="external" href="http://www.bugzilla.org">bugzilla.org</a> - প্রকল্পের ওয়েবসাইট</li> + <li>{{ interwiki('wikipedia', 'Bugzilla', 'wikipedia:Bugzilla') }} - বাগজিলার সাধারণ বর্ণনা (শুধুমাত্র মোজিলা প্রকল্প কেন্দ্রিক বর্ণনা নয়)</li> +</ul> + +<h2 class="Tools" id="Tools" name="Tools">টুলসমূহ</h2> + +<ul> + <li><a href="http://harthur.github.io/bugzilla-todos/" title="http://harthur.github.io/bugzilla-todos/">Bugzilla Todos</a>, রিভিউ, ফ্ল্যাগ রিকোয়েস্ট, চেকইন করা হয়নি এমন প্যাচসমূহ, কাজ সম্পন্ন হয়নি এমন অনুরোধ সমূহ এবং বাগসমূহের তালিকা সংরক্ষন করে।</li> +</ul> +</div> +</div> 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 +--- +<p>আপনি পুরনো বা নতুন হোন না কেন, মোজিলা প্রযুক্তিতে ডেভেলপমেন্ট করার সময় এই পৃষ্ঠার আর্টিকেলগুলো আপনাকে সাহায্য করবে।</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="ডকুমেন্টেশন_টপিক">ডকুমেন্টেশন টপিক</h2> + + <dl> + <dt><a href="/bn-BD/docs/Introduction">যেভাবে শুরু করবেন</a></dt> + <dd>মোজিলার সঙ্গে যুক্ত হবার জন্য নতুনদের একটি ধারাবাহিক গাইড।</dd> + </dl> + + <dl> + <dt><a href="/bn-BD/docs/Developer_Guide/Source_Code">মোজিলা সোর্স কোড নিয়ে কাজ করা</a></dt> + <dd>মোজিলা কোডের সম্পর্কে কিছু সংক্ষিপ্ত কথা, কি করে কোড পাবেন এবং কোডিং স্টাইলের গাইড।</dd> + <dt><a href="/bn-BD/docs/Developer_Guide/Build_Instructions">বিল্ড করার নির্দেশনা</a></dt> + <dd>যেভাবে ফায়ারফক্স, থান্ডারবার্ড, সি-মানকি এবং অন্যান্য মোজিলা অ্যাপ্লিকেশন বিল্ড করবেন।</dd> + <dt><a href="/bn-BD/docs/Developer_Guide/Development_process_overview">ডেভেলপমেন্ট প্রক্রিয়া সারসংক্ষেপ</a></dt> + <dd>সম্পূর্ণ মোজিলা ডেভেলপমেন্ট প্রক্রিয়ার সারসংক্ষেপ।</dd> + <dt><a href="/bn-BD/docs/Mozilla/Multiple_Firefox_Profiles">একাধিক প্রোফাইল নিয়ে কাজ করা</a></dt> + <dd>যখন ফায়ারফক্সের রিলিজের আগের ভার্সনগুলো নিয়ে কাজ করবেন, তখন একাধিক ফায়ারফক্স প্রোফাইল রাখা অনেক উপকারী। যেমন, প্রতিটা চ্যানেলের জন্য একটি অথবা বিভিন্ন ধরণের টেস্টিংয়ের জন্য।</dd> + <dt><a href="/bn-BD/docs/Mozilla_automated_testing">স্বয়ংক্রিয় টেস্টিং</a></dt> + <dd>যেভাবে মোজিলার স্বয়ংক্রিয় বা অটোমেটেড টেস্টগুলো চালাবেন এবং যেভাবে নতুন টেস্ট লিখবেন।</dd> + <dt><a href="/bn-BD/docs/Developer_Guide/How_to_Submit_a_Patch">যেভাবে প্যাচ পাঠাবেন</a></dt> + <dd>আপনার প্যাচ লেখার পর আপনার করণীয় ট্রিতে চেক-ইন করানো। এই আর্টিকেলে রিভিউ প্রক্রিয়ার বিস্তারিত এবং আপনার প্যাচের অনুমোদিত হওয়া সংক্রান্ত বিস্তারিত আলোচনা করা হয়েছে।</dd> + <dt><a href="/bn-BD/docs/Developer_Guide/Getting_documentation_updated">ডকুমেন্টেশন আপডেট করা</a></dt> + <dd>যেভাবে নিশ্চিত করবেন আপনার ডেভেলপ করার সাথে সাথে ডকুমেন্টেশনও আপ-টু-ডেট থাকছে।</dd> + <dt><a href="/bn-BD/docs/Mozilla_Modules_and_Module_Ownership">মোজিলা মডিউল এবং মডিউল "মালিকানা"</a></dt> + <dd>এই আর্টিকেলে মোজিলার মডিউল, মডিউল স্বত্বাধিকারী (owner) এর ভূমিকা এবং যেভাবে স্বত্বাধিকারী (owner) রা নির্বাচিত হন।</dd> + <dt><a href="/bn-BD/docs/Code_snippets">কোড স্নিপেট</a></dt> + <dd>অনেকগুলো প্রয়োজনীয় কোড স্নিপেটের সংগ্রহ, আপনার কাজ অনেক সহজ করে দেবে।</dd> + <dt><a href="/bn-BD/docs/Mozilla_Development_Strategies">মোজিলা ডেভেলপমেন্ট সংক্রান্ত কৌশল</a></dt> + <dd>মোজিলা প্রজেক্টে কাজ করার সময় যেভাবে আপনার সময়ে সদ্ব্যাবহার করবেন।</dd> + <dt><a href="/bn-BD/docs/Debugging">ডিবাগ করা</a></dt> + <dd>মোজিলা কোড ডিবাগ করার কিছু গুরুতপূর্ণ টিপস এবং গাইড।</dd> + <dt><a href="/bn-BD/docs/Performance">পারফরম্যান্স</a></dt> + <dd>আপনার কোডের পারফরম্যান্স নিশ্চিত করার জন্য কিছু গাইড ও সাহায্যকারী টুলস।</dd> + <dt><a href="/bn-BD/docs/The_Mozilla_platform">মোজিলা প্লাটফর্ম</a></dt> + <dd>মোজিলা প্লাটফর্ম সংক্রান্ত যাবতীয় বিষয়বস্তু।</dd> + <dt><a href="/bn-BD/docs/Developer_Guide/Adding_APIs_to_the_navigator_object">navigator অবজেক্টে API যোগ করা</a> {{ gecko_minversion_inline("9.0") }}</dt> + <dd>যেভাবে {{ domxref("window.navigator") }} এ অতিরিক্ত API যুক্ত করবেন।</dd> + <dt><a href="/bn-BD/docs/Developer_Guide/Interface_Compatibility">ইন্টারফেস কম্পাটিবিলিটি</a></dt> + <dd>মোজিলার স্ক্রিপ্টেবল এবং বাইনারি API পরিবর্তন করার গাইডলাইন।</dd> + <dt><a href="/bn-BD/docs/Developer_Guide/Customizing_Firefox">ফায়ারফক্স কাস্টমাইজ করা</a></dt> + <dd>ফায়ারফক্সের কাস্টমাইজড ভার্সন তৈরি করা সংক্রান্ত তথ্য।</dd> + <dt><a href="/bn-BD/docs/Developer_Guide/Virtual_ARM_Linux_environment">ভার্চুয়াল ARM লিনাক্স এনভায়রনমেন্ট</a></dt> + <dd>ARM এর টেস্ট করার জন্য যেভাবে একটি লিনাক্সচালিত ARM এমুলেটর সেটআপ করবেন। মোবাইল ডেভেলপারদের জন্য গুরুত্বপূর্ণ।</dd> + <dt><a href="/bn-BD/docs/Introduction/Obsolete_Build_Caveats_and_Tips">পুরনো বিল্ড করার টিপস</a></dt> + <dd>পুরনো কোডবেজ বিল্ড করার জন্য কিছু গুরুত্বপূর্ণ টিপস - বর্তমান কোডবেজের জন্য প্রযোজ্য নয়।</dd> + </dl> + </td> + <td> + <h2 class="Tools" id="টুল">টুল</h2> + + <dl> + <dt><a href="https://bugzilla.mozilla.org/">Bugzilla (বাগজিলা)</a></dt> + <dd><a href="/bn-BD/docs/Bugzilla">Bugzilla</a> ডাটাবেজের সাহায্যে মোজিলা প্রজেক্টগুলোর সমস্যা ট্র্যাক করা হয়।</dd> + <dt><a href="http://mxr.mozilla.org/">MXR</a></dt> + <dd>ওয়েবে মোজিলা সোর্স কোড রেপোজিটরী ব্রাউজ এবং সার্চ করুন।</dd> + <dt><a href="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai (বনসাই)</a></dt> + <dd><a href="/bn-BD/docs/Bonsai">Bonsai</a> টুলটির সাহায্যে আপনি বের করতে পারবেন কে কোন কাজের জন্য কোন কোড পরিবর্তন করেছেন।</dd> + <dt><a href="/bn-BD/docs/Mercurial">Mercurial</a></dt> + <dd>মোজিলার সোর্স কোড ব্যবস্থাপনার জন্য ডিস্ট্রিবিউটেড ভার্সন কন্ট্রোল সিস্টেম।</dd> + <dt><a href="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a></dt> + <dd><a href="/bn-BD/docs/Tinderbox">Tinderbox</a> ট্রি এর অবস্থা প্রদর্শন করে (ঠিকভাবে বিল্ড হোক বা না হোক)। চেক-ইন বা চেক-আউট করার আগে নিশ্চিত হয়ে নিন আপনি ওয়ার্কিং ট্রির সঙ্গে কাজ করছেন কিনা।</dd> + <dt><a href="/bn-BD/docs/Crash_reporting">ক্র্যাশ ট্র্যাক করা</a></dt> + <dd><a href="https://crash-reports.mozilla.com/reports">Socorro</a> এবং <a href="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a> ক্র্যাশ রিপোর্টিং সিস্টেম সম্পর্কে বিস্তারিত।</dd> + <dt><a href="http://graphs.mozilla.org/">পারফরম্যান্স ট্র্যাক করা</a></dt> + <dd>মোজিলা প্রজেক্টগুলোর পারফরম্যান্স সংক্রান্ত তথ্য দেখুন।</dd> + <dt><a href="/bn-BD/docs/Developer_Guide/Callgraph">Callgraph (কল গ্রাফ)</a></dt> + <dd>কলগ্রাফ তৈরির মাধ্যমে মোজিলা কোডের স্ট্যাটিক অ্যানালাইসিস করার জন্য একটি টুল।</dd> + <dt><a href="http://www.mozilla.org/community/developer-forums.html">ডেভেলপার ফোরাম</a></dt> + <dd>মোজিলা ডেভেলপমেন্ট সংক্রান্ত সমস্যা নিয়ে কথা বলার জন্য একটি টপিক-ভিত্তিক তালিকা।</dd> + <dt><a href="http://www.brianbondy.com/mozilla/cheatsheet/">মোজিলা প্লাটফর্ম ডেভেলপমেন্ট চিট শিট</a></dt> + <dd>প্লাটফর্ম ডেভেলপারদের জন্য তৈরি ব্রায়ান বন্ডির তৈরি সচরাচর প্রয়োজনীয় তথ্যের রেফারেন্স।</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p><br> + </p> 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 +--- +<p>নিচের প্রবন্ধ গুলো আপনাকে মজিলার সোর্স কোড সম্পর্কে বিস্তারিত জানতে ও বুঝতে সাহায্য করবে এবং কিভাবে আপনার প্রস্তাবকৃত পরিবর্তন মূল কোডের সাথে যুক্ত করবেন, সে সম্পর্কে বিস্তারিত ধারনা দেবে।</p> +<table class="mainpage-table"> + <tbody> + <tr> + <td colspan="2"> + <h2 id="ডকুমেন্টেশন_টপিক_সমূহ">ডকুমেন্টেশন টপিক সমূহ</h2> + </td> + </tr> + <tr> + <td> + <dl> + <dt> + <a class="internal" href="/bn-BD/docs/Developer_Guide/Source_Code/Mercurial" title="En/Mozilla Source Code (Mercurial)">মারকিউরিয়াল রিপজিটরি থেকে কোড সংগ্রহ</a></dt> + <dd> + যদি আপনি মজিলা প্রকল্পে অবদান রাখার জন্য মনস্থির করে থাকেন, তাহলে আমাদের ভার্শন কন্ট্রোল রিপোজিটরি থেকে কোড দেখতে পারেন। কিভাবে দেখবেন তা জানতে এখানে দেখুন।</dd> + <dt> + <a class="internal" href="/bn-BD/docs/Developer_Guide/Source_Code/Downloading_Source_Archives" title="En/Mozilla Source Code (HTTP//FTP)">HTTP অথবা FTP ব্যবহার করে কোড ডাউনলোড করা</a></dt> + <dd> + আপনি যদি নির্দিষ্ট একটি মজিলা পণ্যের নির্দিষ্ট ভার্শনের কোড ডাউনলোড করতে চান, তাহলে এই নিবন্ধটি আপনার জন্য সহায়ক হতে পারে।</dd> + <dt> + <a class="internal" href="/bn-BD/docs/Viewing_and_searching_Mozilla_source_code_online" title="En/Viewing and searching Mozilla source code online">অনলাইনে মজিলার সোর্স কোড দেখা এবং অনুসন্ধান</a></dt> + <dd> + শিখুন কিভাবে MXR ব্যবহার করতে হয়, সোর্স কোডের জন্য মজিলার অনলাইন সার্চ এবং ব্রাউজিং টুল ব্যবহার করতে হয়। এটা কোড ডাউনলোডের জন্য সঠিক উপায় নয়। কিন্তু কোড অনুসন্ধান করার জন্য এটা অসাধারণ!</dd> + <dt> + <a class="internal" href="/bn-BD/docs/Mozilla_Source_Code_Directory_Structure" title="en/Mozilla Source Code Directory Structure">মজিলা সোর্স কোডের ভেতরে চলাচল করা</a></dt> + <dd> + মজিলার সোর্স ট্রি তে থাকা বিভিন্ন ফোল্ডার সম্পর্কে বিস্তারিত তথ্য এবং আপনার কাঙ্ক্ষিত জিনিস কিভাবে খুঁজে পাবেন, তা এখানে বর্ণনা করা হয়েছে।</dd> + <dt> + <a class="external" href="/bn-BD/docs/Introduction#.E0.A6.86.E0.A6.AE.E0.A6.BE.E0.A6.A6.E0.A7.87.E0.A6.B0_.E0.A6.9A.E0.A6.BF.E0.A6.B9.E0.A7.8D.E0.A6.A8.E0.A6.BF.E0.A6.A4_.E0.A6.95.E0.A6.B0.E0.A6.BE_.E0.A6.A8.E0.A6.A4.E0.A7.81.E0.A6.A8.E0.A6.A6.E0.A7.87.E0.A6.B0_.E0.A6.B8.E0.A6.AE.E0.A6.BE.E0.A6.A7.E0.A6.BE.E0.A6.A8.E0.A7.87.E0.A6.B0_.E0.A6.89.E0.A6.AA.E0.A6.AF.E0.A7.8B.E0.A6.97.E0.A7.80_.E0.A6.AC.E0.A6.BE.E0.A6.97.E0.A6.97.E0.A7.81.E0.A6.B2.E0.A7.8B_.E0.A6.96.E0.A7.81.E0.A6.81.E0.A6.9C.E0.A7.87_.E0.A6.AC.E0.A7.87.E0.A6.B0_.E0.A6.95.E0.A6.B0.E0.A7.81.E0.A6.A8" title="/en/Introduction#Find_a_bug_we%27ve_identified_as_being_good_for_newcomers">নতুনদের জন্য বাগ</a></dt> + <dd> + যদি আপনি প্রকল্পে নতুন হয়ে থাকেন, এবং কোন কাজ করতে চান, তাহলে এখানে দেখতে পারেন।</dd> + </dl> + </td> + <td> + <dl> + <dt> + <a class="internal" href="/bn-BD/docs/Developer_Guide/Coding_Style" title="En/Mozilla Coding Style Guide">মজিলা কোডিং স্টাইল গাইড</a></dt> + <dd> + কিভাবে আপনি আপনার সোর্স কোড সাজাবেন, তা কোড স্টাইল গাইডের মদ্ধে বর্ণনা করা হয়েছে। পর্যালোচকদের কাছে উপহাসের পাত্র না হতে চাইলে এটি আপনার অবশ্যই পড়া উচিত।</dd> + <dt> + <a href="/bn-BD/docs/Developer_Guide/Interface_development_guide" title="En/Developer Guide/Interface development guide">ইন্টারফেস ডেভেলপমেন্ট গাইড</a></dt> + <dd> + কিভাবে XPCOM ইন্টারফেস তৈরি করবেন ও আপডেট করবেন, সে সম্পর্কিত নির্দেশনা ও ডকুমেন্টেশন এখানে পাওয়া যাবে।</dd> + <dt> + <a class="link-https" href="https://wiki.mozilla.org/Build:TryServer" title="https://wiki.mozilla.org/Build:TryServer">সার্ভারে ব্যবহার করা</a></dt> + <dd> + মজিলার পণ্য গুলো অন্তত তিনটি প্লাটফর্মে তৈরি করা হয়েছে। যদি আপনার সেগুলোতে ব্যবহারের সুযোগ না থাকে, তাহলে আপনি আপনার প্যাচ টেস্ট করার জন্য সার্ভার ব্যবহার করতে পারেন; এবং নিশ্চিত করতে পারেন যে প্যাচগুলো ঠিকঠাক কাজ করছে।</dd> + <dt> + <a class="internal" href="/bn-BD/docs/Creating_a_patch" title="En/Creating a patch">প্যাচ তৈরি করা</a></dt> + <dd> + যখন আপনি মজিলা কোডে কোন পরিবর্তন করে ফেলবেন, তার পরবর্তী ধাপ হচ্ছে (সঠিক ভাবে কাজ করছে এটা নিশ্চিত করার পর) একটি প্যাচ তৈরি করে তা পর্যালোচনার জন্য জমা দেয়া। <em>মারকিউরিয়াল এর জন্য এই নিবন্ধটি পুরোপুরি আপডেট করা প্রয়োজন।</em></dd> + <dt> + <a class="external" href="http://www.mozilla.org/hacking/committer/" title="http://www.mozilla.org/hacking/committer/">সোর্স কোডে কমিট করার অনুমতি পাওয়া</a></dt> + <dd> + অল্প, গর্বিত, কমিটারদের সাথে যোগ দিতে প্রস্তুত ? মজিলার কোডে কিভাবে চেক-ইন এর ক্ষমতা পাবেন, তা এখান থেকে জানতে পারবেন।</dd> + <dt> + <a class="internal" href="/bn-BD/docs/Developer_Guide/Source_Code/CVS" title="En/Mozilla Source Code (CVS)">CVS থেকে মজিলার পুরাতন কোড সংগ্রহ</a></dt> + <dd> + মজিলার নতুন ও পুরাতন ভার্শন সহ NSS, NSPR ইত্যাদি একটি কনকারেন্ট ভার্শন সিস্টেমে রাখা হয়। এই নিবন্ধে সেসব সম্পর্কে বিস্তারিত জানতে পারবেন।</dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p>{{ languages( { "de": "de/Entwicklerhandbuch/Quelltexte", "ja": "ja/Developer_Guide/Source_Code", "pt": "pt/Developer_Guide/Codigo_Fonte" } ) }}</p> 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 +--- +<p>প্রতিদিন আরও এবং আরও মানুষের জন্য মোবাইল ডিভাইস হয়ে উঠছে ইন্টারনেটে প্রবেশ করার প্রাথমিক কিংবা একমাত্র পথ!<a class="link-https" href="https://www.mozilla.org/en-US/mobile/"> এন্ড্রয়েডের জন্য ফায়ারফক্স</a> (যার কোডনাম Fennec) একটি মুক্ত, পরিবর্তনের উপযুক্ত, আদর্শমান-ভিত্তিক ব্রাউজার - ঠিক যেমনটি ডেস্কটপ ফায়ারফক্স।</p> + +<p>এন্ড্রয়েডের জন্য ফায়ারফক্স, XUL এর বদলে এন্ড্রয়েডের নেটিভ উইজেট ব্যবহার করে নিজের ইউজার ইন্টারফেস তৈরি করে: এর ফলে পারফরম্যান্সে অনেক উন্নতি সাধিত হয়, বিশেষ করে চালু হবার সময় এবং মেমরি ব্যবহার।</p> + +<h2 id="এন্ড্রয়েডের_জন্য_ফায়ারফক্সে_অবদান_রাখুন">এন্ড্রয়েডের জন্য ফায়ারফক্সে অবদান রাখুন</h2> + +<p><a class="link-https" href="https://wiki.mozilla.org/Mobile">প্রজেক্টের উইকি পেজ</a> হল এন্ড্রয়েডের জন্য ফায়ারফক্সের তথ্যের শুরুর অংশ।</p> + +<p>এন্ড্রয়েডের জন্য ফায়ারফক্স তৈরি ও উন্নত করতে আপনি আমাদের সাহায্য করতে পারেন:</p> + +<ul> + <li> <a class="link-https" href="https://wiki.mozilla.org/Mobile/Testdrivers_Program">টেস্টিং</a> নিয়ে আমাদের সাহায্য করুন + + <ul> + <li>সবচেয়ে জনপ্রিয় সাইটগুলোর কম্প্যাটিবিলিটি টেস্ট করতে পারেন - আরও তথ্যের জন্য <a href="/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing" title="https://developer-new.mozilla.org/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing">এখানে</a> দেখুন।</li> + </ul> + </li> + <li>টিমের সঙ্গে <a class="link-irc" href="irc://irc.mozilla.org/#mobile">IRC</a> তে যোগাযোগ করুন অথবা যোগ দিন আমাদের <a class="link-https" href="https://wiki.mozilla.org/Mobile/Notes">বৃহস্পতিবারের ডেভেলপমেন্ট মিটিংয়ে</a></li> + <li>প্রজেক্টের খবরের সঙ্গে আপ-টু-ডেট থাকুন <a class="external" href="http://planet.firefox.com/mobile/">প্ল্যানেট ফায়ারফক্স</a> এবং <a class="link-https" href="https://twitter.com/#!/mozmobile" title="https://twitter.com/#!/mozmobile">ট্যুইটারে</a></li> + <li><a href="https://wiki.mozilla.org/Mobile/Fennec/Android" title="https://wiki.mozilla.org/Mobile/Fennec/Android">এন্ড্রয়েডের জন্য ফায়ারফক্স (Fennec) বিল্ড এবং হ্যাক করুন</a></li> +</ul> + +<h2 id="মোবাইল_ওয়েবের_জন্য_ডেভেলপ_করুন">মোবাইল ওয়েবের জন্য ডেভেলপ করুন</h2> + +<p>We've started putting together a guide to <a href="/En/Mobile" title="En/Mobile">designing web sites for mobile devices</a>.</p> + +<p>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:</p> + +<ul> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/" title="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Battery</a></li> + <li><a href="/en/DOM/Using_the_Camera_API" title="Using the Camera API">Camera</a></li> + <li><a href="/en/API/WebTelephony/Introduction_to_WebTelephony" title="Introduction to WebTelephony">WebTelephony</a></li> + <li><a href="/en/API/WebSMS/Introduction_to_WebSMS" title="Introduction to WebSMS">WebSMS</a></li> + <li><a href="/En/Using_geolocation" title="Using geolocation">Geolocation</a></li> + <li><a href="/en/Detecting_device_orientation" title="https://developer.mozilla.org/en/detecting_device_orientation">Orientation</a></li> +</ul> + +<p>To test your web site on Firefox for Android, you can <a class="link-https" href="https://www.mozilla.org/en-US/mobile/">install it on an Android device</a> or <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">run it on your desktop using the Android Emulator</a>.</p> + +<h2 id="মোবাইল_এড-অন_তৈরি_করুন">মোবাইল এড-অন তৈরি করুন</h2> + +<p><a href="/en/Extensions/Mobile" title="en/Extensions/Firefox_on_Android">Firefox for Android supports add-ons</a> using the exact same <a href="/en/Extensions" title="en/Extensions">extension system</a> 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 <a href="/en/Building_an_Extension" title="en/Building_an_Extension">same process</a> that would be used for desktop Firefox. Add-ons that work with desktop Firefox <strong>do not</strong> automatically work in Firefox on Android. The user interfaces are just too different.</p> + +<div class="note">Firefox on Android has a unique application identifier which must be used in <code>install.rdf</code>. The identifier is <code>{aa3c5121-dab2-40e2-81ca-7ea25febc110}</code></div> + +<p>Both classic restart-required and newer <a href="/en/Extensions/Bootstrapped_extensions" title="en/Extensions/Bootstrapped_extensions">restartless</a> 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.</p> + +<h3 id="দ্রুত_পরিদর্শন">দ্রুত পরিদর্শন</h3> + +<ul> + <li>There is no visible XUL in the UI, so using overlays to try to add or change UI is useless.</li> + <li>Internal code and objects, like <code>gBrowser</code>, do not exist. Look at the Firefox on Android <a class="external" href="https://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js"><code>browser.js</code></a> file to learn about the internals. Much of the same fundamental functionality exists.</li> + <li>Services like <code>nsIPromptService</code> and <code>nsIAlertsService</code> are implemented to use native Android UI.</li> + <li>There is a simple JavaScript object, called <a href="/en/Extensions/Mobile/API/NativeWindow" title="en/Extensions/Mobile/NativeWindow"><code>NativeWindow</code></a>, that allows you to manipulate parts of the native Android UI.</li> +</ul> + +<h2 id="এন্ড্রয়েডের_জন্য_ফায়ারফক্স_সংক্রান্ত_সাহায্য">এন্ড্রয়েডের জন্য ফায়ারফক্স সংক্রান্ত সাহায্য</h2> + +<p>Documentation and tutorials for using and troubleshooting Firefox for Android are available on the <a class="external" href="http://support.mozilla.org/mobile" title="http://support.mozilla.org/mobile">Mozilla Support website</a>.</p> 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 +--- +<p><strong> Gecko</strong> হচ্ছে মজিলা প্রকল্পের তৈরি একটি লেআউট ইঞ্জিন। <span class="short_text" id="result_box" lang="bn"><span class="hps">এ</span>র আসল নাম ছিল <span class="hps">NGLayout।</span></span> Gecko এর কাজ হচ্ছে ওয়েব কন্টেন্ট পড়া, যেমনঃ <a href="/bn-BD/docs/HTML" title="HTML">HTML</a>, <a href="/bn-BD/docs/CSS" title="CSS">CSS</a>, <a href="/bn-BD/docs/XUL" title="XUL">XUL</a>, <a href="/bn-BD/docs/JavaScript" title="JavaScript">JavaScript</a> এবং স্ক্রীনে রেন্ডার করা বা প্রিন্ট করা। XUL-based অ্যাপ্লিকেশনের মধ্যে ইউজার ইন্টারফেস রেন্ডার করার জন্যও গেকো ব্যবহার করা হয় ।<span class="short_text" id="result_box" lang="bn"><span class="hps"> </span></span></p> + +<p>অনেক অ্যাপ্লিকেশনে গেকো ব্যবহার করা হয়। কিছু ব্রাউজার যেমনঃ ফায়ারফক্স, সিমাঙ্কি, ইত্যাদিতে ব্যবহার করা হয়। (পরিপূর্ণ তালিকার জন্য <a href="http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29#Web_browsers">উইকিপিডিয়ায় গেকো'র নিবন্ধ</a>টি দেখতে পারেন।) যে সব পণ্য গেকোর একই ভার্সন ব্যবহার করে, তারা একই আদর্শ মান মেনে চলে।</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="ডকুমেন্টেশন">ডকুমেন্টেশন</h2> + + <dl> + <dt><a href="/bn-BD/docs/Gecko_FAQ" title="Gecko_FAQ">Gecko FAQ</a></dt> + <dd>Gecko সম্পর্কে সচরাচর জিজ্ঞাসিত প্রশ্ন।</dd> + <dt><a href="/bn-BD/docs/Gecko_DOM_Reference" title="https://developer.mozilla.org/bn-BD/docs/Gecko_DOM_Reference">Gecko DOM reference</a></dt> + <dd>DOM থেকে রেফারেন্স।</dd> + <dt><a href="/bn-BD/docs/Gecko-Specific_DOM_Events" title="Gecko/Gecko event reference">Gecko event reference</a></dt> + <dd>Gecko এবং Mozilla applications এর মধ্যে <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্যবহৃত</span></span> ইভেন্ট গুলোর রেফারেন্স; DOM events এর ওয়েব স্ট্যান্ডার্ড এর জন্য দেখুন <a href="/bn-BD/docs/DOM/DOM_event_reference" title="DOM/DOM event reference">DOM event reference</a>.</dd> + <dt><a href="/bn-BD/docs/Gecko/Versions" title="Gecko/Versions">Gecko versions and application version</a></dt> + <dd>Gecko এর ভার্সন এবং তাদের ব্যবহারিত এপ্লিকেশনগুলো</dd> + <dt><a class="external" href="/bn-BD/docs/Introduction_to_Layout_in_Mozilla" title="https://developer.mozilla.org/bn-BD/docs/Introduction_to_Layout_in_Mozilla">Introduction to Layout in Mozilla</a></dt> + <dd>লেআউটের Tech Talk .</dd> + <dt><a href="/bn-BD/docs/Embedding_Mozilla" title="Embedding_Mozilla">Embedding Mozilla</a></dt> + <dd>Gecko কে আপনার নিজস্ব এপ্লিকেশন হিসেবে ব্যবহার এর জন্য।</dd> + <dt><a href="/bn-BD/docs/Character_Sets_Supported_by_Gecko" title="Character Sets Supported by Gecko">Character sets supported by Gecko</a></dt> + <dd> Gecko এর সমর্থনে character sets.</dd> + <dt><a href="/bn-BD/docs/Gecko/HTML_parser_threading" title="Gecko/HTML_parser_threading">HTML parser threading</a></dt> + <dd> The HTML parser এর multithreading এর বর্ননা</dd> + <dt>{{interwiki('wikimo', 'Gecko:Home_Page', 'Gecko Home Page on MozillaWiki')}}</dt> + <dd> <span id="cke_bm_232S" style="display: none;"> </span>Active developers এর জন্য হোম. Roadmaps এবং আরো রিসোর্স।<span id="cke_bm_232E" style="display: none;"> </span></dd> + </dl> + + <p><span class="alllinks"><a href="/bn-BD/docs/tag/Gecko" title="tag/Gecko">সবগুলো দেখুন...</a></span></p> + </td> + <td> + <h2 class="Community" id="কমিউনিটি">কমিউনিটি</h2> + + <ul> + <li>মজিলা ফোরাম দেখুন... {{DiscussionList("dev-tech-layout", "mozilla.dev.tech.layout")}}</li> + </ul> + + <h2 class="Related_Topics" id="সম্পর্কিত_বিষয়াবলী">সম্পর্কিত বিষয়াবলী</h2> + + <dl> + <dd><a href="/bn-BD/docs/Web_Standards" title="Web_Standards">ওয়েবের আদর্শ মানদণ্ড</a>, <a href="/bn-BD/docs/XUL" title="XUL">XUL</a>, <a href="/bn-BD/docs/Embedding_Mozilla" title="Embedding_Mozilla">মজিলাকে প্রকাশ</a>, <a href="/bn-BD/docs/Developer_Guide" title="Developing_Mozilla">মজিলা উন্নয়ন</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> 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 +--- +<div>{{draft}}</div> + +<p>This will soon be an awesome landing page for Mozilla internals. For now, it's not.</p> + +<div>{{ListSubpages}}</div> 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 +--- +<p><span class="seoSummary"><strong>In progress. Localization</strong> (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.</span> They are for developers and all contributors.</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Project:MDN/Localizing" title="/en-US/docs/Project:MDN/Localizing">Localizing MDN</a></dt> + <dd>This resource covers localization of the documentation here on MDN.</dd> + <dt><a href="/en-US/Apps/Build/Localization">App localization</a></dt> + <dd>This set of documents applies more specifically to localizing apps, including Firefox OS apps.</dd> + <dt><a href="/en-US/docs/Web/API/L10n">L10n</a></dt> + <dd>Reference docs for the L10n API that Mozilla uses to localise Firefox OS.</dd> +</dl> 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 +--- +<p>{{draft}}</p> + +<h3 id="অর্থ_ভিত্তিক_অনুবাদ"><span class="author-p-1460 b"><strong>অর্থ ভিত্তিক অনুবাদ</strong></span></h3> + +<div id="magicdomid3"><span class="author-p-1460">When it comes to translation, </span><span class="author-p-1460">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:</span></div> + +<ul style="margin-left: 40px;"> + <li id="magicdomid4"><span class="author-p-1460">What does this word/sentence/string mean in English?</span></li> + <li id="magicdomid5"><span class="author-p-1460">What is the message the author is trying to send?</span></li> + <li id="magicdomid6"><span class="author-p-1460">How would I express that meaning in my own language?</span></li> +</ul> + +<h3 id="ব্যবহার"><span class="author-p-1460 b"><strong>ব্যবহার</strong></span></h3> + +<div id="magicdomid10"><span class="author-p-1460"> 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.</span></div> + +<ul style="margin-left: 40px;"> + <li><span class="author-p-1460">For Mozilla desktop products, the target audience is general users with all levels of technical ability. This could indicate more formal language in the UI as the target audience's relationship with desktop products is less frequent. </span>It could, however, indicate informal language due to the level of implied trust between a user and their browser.</li> + <li id="magicdomid11"><span class="author-p-1460">For Mozilla mobile products, the target audience is general users carrying mobile devices. This could indicate more informal language in the UI as the target audience's relationship with a mobile device is interpreted to be more intimate and an extension of oneself. </span></li> + <li id="magicdomid12"><span class="author-p-1460">For Mozilla web pages, the target audience will vary according to the purpose of the web page. Seek to identify the web project's purpose and intended audience before translating strings.</span></li> +</ul> + +<h3 id="Brevity"><span class="author-p-1460 b"><strong>Brevity</strong></span></h3> + +<div id="magicdomid15"><span class="author-p-1460"> 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.</span></div> + +<div> </div> + +<h3 id="অনুবাদযোগ্য_বনাম_অনুবাদের_জন্যে_নহে"><span class="author-p-1460 b"><strong>অনুবাদযোগ্য বনাম অনুবাদের জন্যে নহে</strong></span></h3> + +<dl> + <dt id=".C2.A0.C2.A0.C2.A0.C2.A0.C2.A0.C2.A0.C2.A0_Access_Keys"><span class="author-p-1460"> Access Keys</span></dt> +</dl> + +<dl> + <dd id="magicdomid19"><span class="author-p-1460"> 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.</span></dd> +</dl> + +<dl> + <dt id=".C2.A0.C2.A0.C2.A0.C2.A0.C2.A0.C2.A0.C2.A0_Variables"><span class="author-p-1460"> Variables</span></dt> +</dl> + +<dl> + <dd id="magicdomid21"><span class="author-p-1460"> Variables should never be translated. You can recognize a variable within a string by its beginning with a specific character (e.g., <span class="author-p-1460">$, #, %, etc.)</span> followed by a combination of words without spacing. For example, $BrandShortName and %S are variables. </span>You can move a variable around within a string, if the translation of the string requires it.</dd> +</dl> + +<dl> + <dt id=".C2.A0.C2.A0.C2.A0.C2.A0.C2.A0.C2.A0.C2.A0_Brands_and_Products"><span class="author-p-1460"> Brands and Products</span></dt> +</dl> + +<dl> + <dd id="magicdomid23"><span class="author-p-1460"> Brand and product names should never be translated, nor transliterated into a non-Latin based script.</span></dd> +</dl> + +<dl> + <dt id=".C2.A0.C2.A0.C2.A0.C2.A0.C2.A0.C2.A0.C2.A0_Copyright.2Ftrademark"><span class="author-p-1460"> Copyright/Trademark</span></dt> +</dl> + +<dl> + <dd id="magicdomid25"><span class="author-p-1460"> Copyrights and trademarks should never be translated.</span></dd> +</dl> + +<dl> + <dt id=".C2.A0.C2.A0.C2.A0.C2.A0.C2.A0.C2.A0.C2.A0_Code"><span class="author-p-1460"> Code</span></dt> +</dl> + +<dl> + <dd id="magicdomid27"><span class="author-p-1460"> 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, <code>{moz:domain}+{searchTerms}</code> or <code><a target='_' href='</code></span><code><span class="author-p-1460 url"><a href="https://developer.mozilla.org/docs/Tools/Debugger#Remote_Debugging">https://developer.mozilla.org/docs/Tools/Debugger#Remote_Debugging</a></span></code><span class="author-p-1460"><code>'></code> should not be translated. However, if there is a localized equivalent content, change the URL to point to the target language site/page.</span></dd> +</dl> + +<dl> + <dt id=".C2.A0.C2.A0.C2.A0.C2.A0.C2.A0.C2.A0.C2.A0_Blank.2FEmpty_strings"><span class="author-p-1460"> Blank/Empty Strings</span></dt> +</dl> + +<dl> + <dd id="magicdomid29"><span class="author-p-1460"> </span>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.</dd> +</dl> + +<dl> + <dt id=".C2.A0.C2.A0.C2.A0.C2.A0.C2.A0.C2.A0.C2.A0_Trailing_whitespace"><span class="author-p-1460"> Trailing Whitespace</span></dt> +</dl> + +<dl> + <dd id="magicdomid31"><span class="author-p-1460"> 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.</span><span class="author-p-1460"> </span></dd> + <dt style="margin-left: 40px;"><span class="author-p-1460">Keyboard shortcuts</span></dt> + <dd style="margin-left: 40px;"><span class="author-p-1460">Lorem ipsum https://developer.mozilla.org/en-US/docs/XUL_Accesskey_FAQ_and_Policies</span></dd> +</dl> + +<h3 id="Terminology"><span class="author-p-1460 b"><strong>Terminology</strong></span></h3> + +<h4 id="Translating_difficult_concepts"><span class="author-p-1460"> Translating difficult concepts</span></h4> + +<div id="magicdomid62"><span class="author-p-1460"> 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:</span></div> + +<ol style="margin-left: 80px;"> + <li id="magicdomid63"><span class="author-p-1460">Understand the meaning of the term in English.</span></li> + <li id="magicdomid64"><span class="author-p-1460">Understand the function of the feature.</span></li> + <li id="magicdomid65"><span class="author-p-1460">Consider similar ideas for those functions in your culture.</span></li> + <li id="magicdomid66"><span class="author-p-1460">Associate a culturally specific image with the meaning and function of the term.</span></li> +</ol> + +<div> </div> + +<h4 id="Consistency_across_products_modules"><span class="author-p-1460"> Consistency across products & modules</span></h4> + +<div id="magicdomid68"><span class="author-p-1460"> 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.</span></div> + +<div id="magicdomid69"> </div> + +<div style="text-align: right;"><a href="https://developer.mozilla.org/en-US/docs/L10n_Style_Guide/Mozilla_Content_Localized_in_Your_Language" title="/en-US/docs/">Next: Mozilla content in your language</a></div> 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 +--- +<h2 id="Firefox_OS" name="Firefox_OS">ফায়ারফক্স ওএস</h2> +<p>ফায়ারফক্স ও এস হচ্ছে একটি ওপেন সোর্স অপারেটিং সিস্টেম যেটা লিনাক্স এবং মজিলার Gecko ইঞ্জিন ব্যবহার করে একটি ইউজার ইন্টারফেস চালানোর জন্য এবং সকল অ্যাপলিকিশন লেখা হয় সম্পূর্ণভাবে HTML, CSS and JavaScript দিয়ে।</p> +<p>কিভাবে ফায়ারফক্স ওএস ইন্সটল করতে হয় এবং এর জন্য অ্যাপ তৈরি করতে হয় এই বিষয়ে পড়ুন।</p> +<h2 id="Firefox_for_Android" name="Firefox_for_Android">অ্যান্ড্রয়েড এর জন্য ফায়ারফক্স</h2> +<p>অ্যান্ড্রয়েড এর জন্য ফায়ারফক্স হচ্ছে মজিলার মোবাইল ওয়েব ব্রাউজার যা অ্যান্ড্রয়েড মোবাইল এর জন্য। এর জন্য সাম্প্রতিকভাবে অ্যান্ড্রয়েড এর নেটিভ UI তে ব্যবহার পুনর্লিখিত হয়েছে. যার ফলে এটি আরও দ্রুততর, লিনিয়ার এবং আরো প্রতিক্রিয়াশীল হয়ে উঠেছে। এটা আরও শক্তিশালী API গুলি ব্যবহার করে ডিভাইস ক্ষমতা অ্যাক্সেস করার জন্য যেমন ক্যামেরা এবং টেলিফোনি স্ট্যাক এর জন্য সমর্থন করে।</p> +<p>অ্যান্ড্রয়েড এর জন্য ফায়ারফক্স তৈরি করতে কিভাবে সাহায্য করতে হবে, কিভাবে ডিভাইস API গুলি ব্যবহার করতে হবে এবং মোবাইল এড-অন কিভাবে তৈরি করতে হবে এই বিষয়ে পড়ুন।</p> +<h2 id="Mobile_web_development" name="Mobile_web_development">মোবাইল ওয়েব ডেভেলপমেন্ট</h2> +<p>মোবাইল ডিভাইস ডেস্কটপ বা ল্যাপটপ কম্পিউটার থেকে খুব আলাদা হার্ডওয়্যার বৈশিষ্ট্য থাকে, এবং তাদের সঙ্গে কাজ করার জন্য ব্যবহার করা API গুলি অনেক প্রমিত হচ্ছে প্রক্রিয়ার মধ্যে রয়ে গেছে।</p> +<p>কিভাবে মোবাইল এর মধ্যে দেখতে ভাল লাগে আমন ওয়েবসাইট ডেভেলপ করা যায় এবং তারা যেগুলো নতুন সম্ভাবনার সুযোগ দেয় সেগুলো গ্রহন করা বিষয়ে পড়ুন। আপনার ওয়েব সাইটে বিভিন্ন ব্রাউজার ভাল কাজ করে এটা কীভাবে নিশ্চিত করবেন সেটা শিখুন।</p> 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 +--- +<h2 id="যে_ব্রাউজার_গুলোকে_সাপোর্ট_করে">যে ব্রাউজার গুলোকে সাপোর্ট করে</h2> +<p>পারসোনা তৈরি করে টেস্ট করা হয়েছে এবং তা নিচের ব্রাউজার গুলোকে সাপোর্ট করে। পারসোনা ব্যবহার এর জন্য কোন এডস্-অন এর প্রয়োজন নেই, এজন্য পারসোনার অন্যতম প্লাটফর্ম জাভাস্ক্রিপ্ট লাইব্রেরিকে ধন্যবাদ।</p> +<table> + <tbody> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><b>ডেক্সটপ ব্রাউজার</b></th> + </tr> + <tr> + <th scope="row"><b>ইন্টারনেট এক্সপ্লোরার</b></th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">৮.০<sup>*</sup>, ৯.০<sup>†</sup>, ১০.০<sup>*</sup><sup>*</sup> ( নিচের <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22" title="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">কম্প্যাটিবিলিটি মোড</a> দেখুন)</td> + </tr> + <tr> + <th scope="row"><b>ফায়ারফক্স</b></th> + <td colspan="2" style="background-color: #8ae234;">Current Stable, Beta, Aurora, Nightly, and Extended Support Releases<br> + Previous Stable Release</td> + </tr> + <tr> + <th scope="row"><b>ক্রোম</b></th> + <td colspan="2" style="background-color: #8ae234;">Latest Stable Release</td> + </tr> + <tr> + <th scope="row"><b>সাফারি</b></th> + <td colspan="2" style="background-color: #8ae234;">Latest Stable Release</td> + </tr> + <tr> + <th scope="row"><b>অপেরা</b></th> + <td colspan="2" style="background-color: #8ae234;">Latest Stable Release<sup>‡</sup></td> + </tr> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><b>আইওএস ব্রাউজার</b></th> + </tr> + <tr> + <th scope="row"><b>মোবাইল সাফারি</b></th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">iOS 5.x — 6.x</td> + </tr> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><b>অ্যানড্রইড ব্রাউজার</b></th> + </tr> + <tr> + <th scope="row"><b>ডিফল্ট ব্রাউজার</b></th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">2.2 — 4.x</td> + </tr> + <tr> + <th scope="row"><b>ফায়ারফক্স</b></th> + <td colspan="2" style="background-color: #8ae234;">Current Stable, Beta, Aurora, and Nightly Releases<br> + Previous Stable Release</td> + </tr> + <tr> + <th scope="row"><b>ক্রোম</b></th> + <td colspan="2" style="background-color: #8ae234;">Latest Stable Release</td> + </tr> + </tbody> +</table> +<p><sup>*</sup>: For Windows XP. <sup>†</sup>: For Windows Vista and Windows 7. <sup>*</sup><sup>*</sup>Windows 8.<sup> </sup><sup>‡</sup>: As time allows</p> +<h2 id="যে_ব্রাউজার_গুলোকে_সাপোর্ট_করেনা">যে ব্রাউজার গুলোকে সাপোর্ট করেনা</h2> +<ul> + <li>Internet Explorer versions 6.0 and 7.0 are not supported. Users will be prompted to upgrade their browser. Also see the section below on <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22" title="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">IE "Compatibility Mode"</a>.</li> + <li>Google Chrome Frame is not supported and will not function. Support may be added later (<a href="https://github.com/mozilla/browserid/issues/796" title="https://github.com/mozilla/browserid/issues/796">Issue #796</a>).</li> + <li>Third party browsers on iOS are not supported and will not function. Support may be added later (<a href="https://github.com/mozilla/browserid/issues/2034" title="https://github.com/mozilla/browserid/issues/2034">Issue #2034</a>).</li> +</ul> +<h2 id="ইন্টারনেট_এক্সপ্লোরার_কম্প্যাটিবিলিটি_মোড">ইন্টারনেট এক্সপ্লোরার "কম্প্যাটিবিলিটি মোড"</h2> +<p>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</p> +<ol> + <li>as a local setting in the browser</li> + <li>based on the presence and value of the <a href="https://developer.mozilla.org/docs/Quirks_Mode_and_Standards_Mode" title="https://developer.mozilla.org/docs/Quirks_Mode_and_Standards_Mode">DOCTYPE</a> declaration in the page</li> + <li>as an instruction sent from the site, using the <a href="http://msdn.microsoft.com/library/cc288325%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/library/cc288325%28v=vs.85%29.aspx">"X-UA-Compatible"</a> header either as an HTTP header or as a <a href="https://developer.mozilla.org/docs/HTML/Element/meta" title="https://developer.mozilla.org/docs/HTML/Element/meta"><code><meta></code></a> tag in the page. This method overrides the other two.</li> +</ol> +<p>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:</p> +<ul> + <li>your site is using "X-UA-Compatible" to explicitly instruct the browser to emulate a pre-8.0 version</li> + <li>your site's pages omit the DOCTYPE, do not have the DOCTYPE as the first line of the page, or set the browser to quirks mode, and your site is not setting "X-UA-Compatible" to IE version 8.0 or higher</li> + <li>the browser is locally configured to use a pre-8.0 Compatibility Mode, and your site is not overriding this by setting "X-UA-Compatible" to IE version 8.0 or higher</li> +</ul> +<p>For more information, see <a href="https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx?Redirected=true" title="https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx?Redirected=true">"Understanding Compatibility Modes in Internet Explorer 8"</a> and <a href="http://hsivonen.iki.fi/doctype/index.html#ie8" title="http://hsivonen.iki.fi/doctype/index.html#ie8">"IE8 and IE9 Complications"</a>.</p> +<h2 id="অন্যান্য_ব্রাউজার_গুলো">অন্যান্য ব্রাউজার গুলো</h2> +<p>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.</p> +<h2 id="যেসব_তথ্য_জানা_প্রয়োজন">যেসব তথ্য জানা প্রয়োজন</h2> +<ul> + <li>Browsers must accept third party cookies for full functionality (<a href="https://github.com/mozilla/browserid/issues/1352" title="https://github.com/mozilla/browserid/issues/1352">Issue #1352</a>).</li> + <li>Android 2.x users without a default browser selected may be unable to log in (<a href="https://github.com/mozilla/browserid/issues/1854" title="https://github.com/mozilla/browserid/issues/1854">Issue #1854</a>).</li> +</ul> 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 +--- +<div class="summary">সহজ, <span class="short_text" id="result_box" lang="bn"><span class="hps">গোপনীয়তা</span>-<span class="hps">সংবেদনশীল</span> <span class="hps">একক সাইন</span> <span class="hps">ইন</span></span>:<span id="result_box" lang="bn"><span class="hps"> আপনার</span> <span class="hps">ব্যবহারকারীরা তাদের</span> <span class="hps">ইমেইল ঠিকানা</span> <span class="hps">দিয়ে আপনার</span> <span class="hps">ওয়েবসাইটে</span> <span class="hps">সাইন ইন</span> করতে পারবে</span>, এবং আপনি পাসওয়ার্ড ব্যাবস্থাপনা থেকে মুক্ত হবেন।</div> + +<div class="column-container"> +<p><span class="seoSummary"><a href="https://login.persona.org/">মজিলা পারসোনা</a> ওয়েবের জন্য একটি ক্রস-ব্রাউজার লগইন পদ্ধতি যা <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্যবহার এবং</span> <span class="hps">স্থাপন</span> <span class="hps">করা সহজ</span><span>। এটি </span></span><a href="/bn-BD/docs/persona/Browser_compatibility">সব প্রধান ব্রাউজারে</a> কাজ করে এবং আপনি <a href="/bn-BD/docs/Persona/Quick_Setup">আজই শুরু করতে </a>পারেন।</span></p> + + +<p><span id="result_box" lang="bn"><span class="hps">কেন আপনি</span> <span class="hps">আপনার ওয়েবসাইটে</span> <span class="hps">পার</span>সোনা <span class="hps">ব্যবহার করবেন ?</span></span></p> + +<ol> + <li><strong>পারসোনা পুরোপুরি সাইট-নির্দিষ্ট পাসওয়ার্ড পরিহার করে</strong>, এবং পাসওয়ার্ড <span id="result_box" lang="bn"><span class="hps">তৈরি</span>,<span class="hps"> পরিচালনা</span><span> ও </span><span class="hps">নিরাপদভাবে</span> <span class="hps">সংরক্ষণ</span> <span class="hps">বোঝা</span> <span class="hps">থেকে</span> <span class="hps">ব্যবহারকারী এবং</span> <span class="hps">ওয়েবসাইটকে মুক্ত করে।</span></span></li> + <li><strong>পারসোনা ব্যাবহার করা সহজ। </strong>একাউন্ট তৈরির ঝামেলা কে বাদ দিয়ে, একজন পারসোনা ব্যাবহারকারী <a href="http://voo.st">Voost</a> এর মত নতুন সাইটে মাত্র দুই ক্লিকে একাউন্ট খুলতে পারে।</li> + <li><span id="result_box" lang="bn"><strong><span class="hps">পারসোনা </span><span class="hps">বাস্তবায়ন</span> </strong><span class="hps"><strong>করা সহজ</strong></span></span>। <span id="result_box" lang="bn"><span class="hps">ডেভেলপারগণ</span> <span class="hps">এক</span> <span class="hps">সন্ধ্যায়</span> <span class="hps">একটি সাইটে</span> পারসোনা <span class="hps">যোগ করতে পারেন।</span></span></li> + <li><strong>লক-ইন এর কোন ব্যাপার নেই।</strong> <span id="result_box" lang="bn"><span class="hps">ডেভেলপারগণ</span> <span class="hps">তাদের</span><span class="hps"> ব্যবহারকারীর</span> <span class="hps">একটি</span> ভেরিফিকেশন করা <span class="hps">ইমেইল ঠিকানা</span> পান<span class="hps">, এবং</span> <span class="hps">ব্যবহারকারী</span> পারসোনাতে যে কোন <span class="hps">ইমেইল ঠিকানা</span> <span class="hps">ব্যবহার করতে পারেন।</span></span></li> +</ol> + +<p>Plus, Persona is only going to get better: it's built on an <strong>open, decentralized protocol</strong> that's designed to allow <strong>direct integration into browsers</strong> and <strong>native support by email providers</strong><strong>. </strong>Sites that implement Persona today will automatically experience those improvements, without having to change any code.</p> +</div> + +<hr> +<div class="column-container"> +<h2 id="আপনার_সাইটে_পারসোনা_ব্যাবহার">আপনার সাইটে পারসোনা ব্যাবহার</h2> + + +<div class="column-third"> +<h3 id="শুরু_হোক">শুরু হোক</h3> + +<dl> + <dt><a href="/en-US/docs/Persona/Why_Persona">পারসোনাই কেন?</a></dt> + <dd>বিশেষ কিছু বিষয়ে <a href="/en-US/docs/Persona/Why_Persona">পারসোনার</a> সাথে অন্যদের তুলনা পরিচয় এবং পরিচয় প্রমাণ ব্যবস্থা।</dd> + <dt><a href="/en-US/docs/Persona/Quick_Setup">দ্রুত সেটআপ</a></dt> + <dd>এখানে দেখবেন কীভাবে আপনি আপনার ওয়েবসাইট এ <a href="/en-US/docs/Persona/Why_Persona">পারসোনা</a> যোগ করবেন</dd> +</dl> + +<h3 id="API_প্রসঙ্গে">API প্রসঙ্গে</h3> + +<dl> + <dt><a href="/en-US/Persona/The_navigator.id_API">The navigator.id API</a></dt> + <dd>ব্রাউজারের API.</dd> + <dt><a href="/en-US/docs/Persona/Remote_Verification_API">সত্যতা যাচাই API প্রসঙ্গে</a></dt> + <dd>দুরথেকে যাচাই করা API.</dd> +</dl> +</div> + +<div class="column-third"> +<h3 id="গাইড">গাইড</h3> + +<dl> + <dt><a href="/en-US/docs/Persona/Security_Considerations">নিরাপত্তাজনিত বিবেচ্য বিষয়</a></dt> + <dd><span id="result_box" lang="bn"><span class="hps">অভ্যাস</span> <span class="hps">এবং কৌশল বিস্তৃতি আপনার</span> <span class="hps">পারসোনা</span>'র <span class="hps">নিরাপদ</span> <span class="hps">নিশ্চিত করে।</span></span></dd> + <dt><a href="/en-US/docs/Persona/Browser_compatibility">ব্রাউজারের সামঞ্জস্যতা</a></dt> + <dd>সঠিকভাবে জানুন আপনার ব্রাউজার পারসোনা সমর্থন করে কিনা।</dd> + <dt><a href="/en-US/docs/Persona/Internationalization">Internationalization</a></dt> + <dd>Learn how Persona handles different languages.</dd> + <dt><a href="/en-US/docs/Persona/The_implementor_s_guide">The implementor's guide</a></dt> + <dd>Tips from sites that have added support for Persona.</dd> +</dl> +</div> + +<div class="column-third"> +<h3 id="রিসোর্স">রিসোর্স</h3> + +<dl> + <dt><a href="/en-US/docs/Persona/Libraries_and_plugins">Libraries and plugins</a></dt> + <dd>Find a drop-in library for your favorite programming language, web framework, blog, or content management system.</dd> + <dt><a class="link-https" href="https://github.com/mozilla/browserid-cookbook">The Persona cookbook</a></dt> + <dd>Example source code for Persona sites. Includes snippets in C# (MVC3), PHP, Node.JS, and more.</dd> + <dt><a href="/en-US/docs/Persona/User_interface_guidelines">User interface guidelines</a></dt> + <dd>How to present Persona sign-in to your users.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="পরিচয়_দাতা_হওয়া">পরিচয় দাতা হওয়া </h2> + +<p>আপনি যদি কোনো ই-মেইল সেবাদাতা হন অথবা অন্য কোনো পরিচয় প্রদাতা হন তবে নিচের লিংকগুলি দেখুন পার্সনা পরিচয়্দাতা হবার প্রসঙ্গে :</p> + +<div class="column-container"> +<div class="column-third"> +<dl> + <dt><a href="/en-US/docs/Persona/Identity_Provider_Overview">IdP Overview</a></dt> + <dd>A high level view of Persona Identity Providers.</dd> +</dl> +</div> + +<div class="column-third"> +<dl> + <dt><a href="/en-US/docs/Persona/Implementing_a_Persona_IdP">Implementing an IdP</a></dt> + <dd>A detailed guide to the technical details of becoming an IdP.</dd> +</dl> +</div> + +<div class="column-third"> +<dl> + <dt><a href="/en-US/docs/Persona/.well-known-browserid">.well-known/browserid</a></dt> + <dd>An overview of the <code>.well-known/browserid</code> file, which IdPs use to advertise support for the protocol.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="পারসোনা_প্রজেক্ট">পারসোনা প্রজেক্ট</h2> + +<div class="column-container"> +<div class="column-third"> +<dl> + <dt><a href="/en-US/docs/Persona/Glossary">গ্লোসারি</a></dt> + <dd>BrowserID and Persona terminology defined.</dd> + <dt><a href="/en-US/docs/Persona/FAQ">স.জি.প্র.</a></dt> + <dd>Answers to common questions.</dd> + <dt><a href="/en-US/docs/Persona/Protocol_Overview"><span class="short_text" id="result_box" lang="bn"> প্রটোকলের <span class="hps">বিবরণ</span></span></a></dt> + <dd>A mid-level technical overview of the underlying BrowserID protocol.</dd> +</dl> +</div> + +<div class="column-third"> +<dl> + <dt><a href="/en-US/docs/persona/Crypto"><span class="short_text" id="result_box" lang="bn"><span class="hps">ক্রিপ্টো</span></span></a></dt> + <dd>A look at the cryptographic concepts behind Persona and BrowserID.</dd> + <dt><a class="link-https" href="https://github.com/mozilla/id-specs/blob/prod/browserid/index.md">স্পেক</a></dt> + <dd>Deep technical details live here.</dd> +</dl> +</div> + +<div class="column-third"> +<dl> + <dt><a href="/en-US/docs/Persona/Bootstrapping_Persona">পারসোনা ওয়েবসাইট</a></dt> + <dd>To get Persona going, we're hosting three services at <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a>: a fallback Identity Provider, an implementation of the {{domxref("navigator.id")}} APIs, and a verification service.</dd> + <dt><a href="https://github.com/mozilla/browserid">পারসোনা সোর্স কোড</a></dt> + <dd>The code for Persona is on GitHub. Pull requests welcome!</dd> +</dl> +</div> +</div> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="#">Using Persona on a website</a> + + <ol> + <li><a href="/en-US/Persona/Why_Persona" title="Why Persona?">Why should you use Persona?</a></li> + <li><a href="/en-US/Persona/Quick_setup" title="Quick Start">Get started</a></li> + <li><a href="/en-US/Persona/The_implementor_s_guide" title="Implementor's Guide">Tips for implementing Persona</a></li> + <li><a href="/en-US/Persona/Security_Considerations" title="Security Considerations">Security considerations</a></li> + <li><a href="/en-US/Persona/Browser_compatibility" title="Browser compatibility">Browser compatibility</a></li> + <li><a href="/en-US/Persona/Internationalization" title="Internationalization">Internationalization</a></li> + <li><a href="/en-US/Persona/The_navigator.id_API" title="The navigator.id API">The navigator.id API</a></li> + <li><a href="/en-US/Persona/Remote_Verification_API" title="Remote Verification API">The remote verification API</a></li> + <li><a href="/en-US/Persona/Libraries_and_plugins" title="Libraries and plugins">Libraries and plugins</a></li> + <li><a href="/en-US/Persona/User_interface_guidelines" title="User interface guidelines">User interface guidelines</a></li> + </ol> + </li> + <li><a href="#">Becoming an Identity Provider</a> + <ol> + <li><a href="/en-US/Persona/Identity_Provider_Overview" title="IdP Overview">IdP Overview</a></li> + <li><a href="/en-US/Persona/Implementing_a_Persona_IdP" title="Implementing an IdP">Implementing an IdP</a></li> + <li><a href="/en-US/Persona/.well-known-browserid" title=".well-known-browserid format">.well-known-browserid format</a></li> + </ol> + </li> + <li><a href="#">The Persona project</a> + <ol> + <li><a href="/en-US/Persona/Glossary" title="Glossary">Glossary</a></li> + <li><a href="/en-US/Persona/FAQ" title="FAQ">FAQ</a></li> + <li><a href="/en-US/Persona/Bootstrapping_Persona" title="Persona hosted services">Persona hosted services</a></li> + <li><a href="/en-US/Persona/Protocol_Overview" title="Protocol overview">Protocol overview</a></li> + <li><a href="/en-US/Persona/Crypto" title="Crypto">Cryptography</a></li> + </ol> + </li> +</ol> diff --git a/files/bn/mozilla/persona/আন্তর্জাতিকায়ন/index.html b/files/bn/mozilla/persona/আন্তর্জাতিকায়ন/index.html new file mode 100644 index 0000000000..773d93a737 --- /dev/null +++ b/files/bn/mozilla/persona/আন্তর্জাতিকায়ন/index.html @@ -0,0 +1,60 @@ +--- +title: আন্তর্জাতিকায়ন +slug: Mozilla/Persona/আন্তর্জাতিকায়ন +translation_of: Archive/Mozilla/Persona/Internationalization +--- +<h2 id="পারসোনাতে_স্থানিয়করন_কি">পারসোনাতে স্থানিয়করন কি</h2> + +<p>ভবিষ্যতে ব্যাবহারকারিদের পারসোনার মাধ্যমে বিভিন্ন সাইটে সাইন-ইনের ইন্টারফেস সরাসরি ব্রাউজারের অন্তর্গত থাকবে, এবং এইভাবেই ব্রাউজারের মাধ্যমে সাইটগুলোও স্থানীয়করন হয়ে যাবে। যেসব ব্রাউজারে পারসোনা অন্তর্গত থাকবে না, সেসব ব্রাউজার<a href="https://login.persona.org" title="https://login.persona.org">ে login.persona.org</a> এই লিঙ্কটি চলে আসবে। এই উক্তিগুলো অনুবাদ করেছে <span class="short_text" id="result_box" lang="bn"><span class="hps">কমিউনিটি স্বেচ্ছাসেবকদের একটি দল</span></span>, এবং ৪৫ এর বেশি স্থানীয় বর্তমান <a href="https://github.com/mozilla/browserid/blob/dev/config/l10n-prod.json">এখানে কর্মরত আছেন</a>।</p> + +<h2 id="How_Persona_chooses_localizations">How Persona chooses localizations</h2> + +<p>The Persona service selects a language using the <code>Accept-Language</code> header sent alongside the browser's requests. The algorithm used to map an <code>Accept-Language</code> header to a language is the same as that used by <code>mozilla.org</code>:</p> + +<ol> + <li>For each language tag in the <code>Accept-Language</code> header: + + <ul> + <li>check if we have an exact match for the language identified by the language tag</li> + <li>check if we have an exact match for the language identified by the first part of the language tag</li> + </ul> + </li> + <li>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.</li> +</ol> + +<p>For example, the table below lists the language selected for various <code>Accept-Language</code> headers, if the following locales were supported: <code>en-US, es, es-MX</code>:</p> + +<table> + <thead> + <tr> + <th scope="col"><strong>Accept-Language Header</strong></th> + <th scope="col"><strong>Selected language</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>es-AR,es;q=0.8,en-us;q=0.5</code></td> + <td><code>es</code></td> + </tr> + <tr> + <td><code>es-MX,es;q=0.8,en-us;q=0.5</code></td> + <td><code>es-MX</code></td> + </tr> + <tr> + <td><code>e</code><code>s-es,en-us;q=0.5</code></td> + <td><code>en-US</code></td> + </tr> + <tr> + <td><code>e</code><code>s-es</code></td> + <td><code>en-US</code></td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<h2 id="আপনি_যেভাবে_সাহায্য_করতে_পারেন">আপনি যেভাবে সাহায্য করতে পারেন</h2> + +<p>পারসোনা নতুন অনুবাদে <span class="short_text" id="result_box" lang="bn"><span class="hps">স্বেচ্ছাসেবকদের সাহায্য করতে</span></span> Mozilla Verbatim ব্যবহার করে। যদি আপনি সাহায্য করতে চান তাহলে <a href="https://developer.mozilla.org/en-US/docs/Localizing_with_Verbatim" title="https://developer.mozilla.org/en-US/docs/Localizing_with_Verbatim">getting started with Verbatim </a>পড়ুন এবং Verbatim এ <a href="https://localize.mozilla.org/projects/browserid/" title="https://localize.mozilla.org/projects/browserid/">"BrowserID" project</a> দেখুন।</p> + +<p> </p> 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 +--- +<p>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.</p> + +<p>{{ LandingPageListSubpages() }}</p> 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 +--- +<p>মজিলা কোয়ালিটি অ্যাসুরেন্স (QA) টিম মজিলার তৈরি করা সফটওয়্যার এর মান নিশ্চিতকরণ এর কাজ করে থাকে এবং বিভিন্ন ধরনের সফটওয়্যার সময়মত রিলিজের জন্য গুরুত্বপূর্ণ ভূমিকা পালন করে। মজিলার প্রত্যেকটি প্রজেক্টের ভিতরে, আমরা নতুন ফিচার পরীক্ষা করার জন্য কাজ করি, বিভিন্ন প্রকার ত্রুটি খুঁজে বের করি, এবং তা সমাধান করার জন্য রিপোর্ট করি, বিভিন্ন ধরনের টূল বিল্ড করি এবং তা রক্ষণাবেক্ষণ করি, তথ্য সংগ্রহ এবং পর্যালোচনা করি, এবং উন্মুক্ত ওয়েবকে সমর্থনকারী, আন্তর্জাতিক মান সম্পন্ন পন্যের রিলিজে সহায়তা প্রদান করি।</p> + +<p><span class="seoSummary">QA টিমে যোগ দিয়ে ফায়ারফক্স টেস্ট করার এবং প্রত্যেকটি রিলিজ যথেষ্ট মান সম্পন্ন করার জন্য এখানে আপনি সহায়ক নিবন্ধ ও টুলস পাবেন।</span></p> + +<h2 id="শুরু_করা">শুরু করা</h2> + +<ul class="card-grid"> + <li><span>আমি কিভাবে টেস্ট করতে সাহায্য করতে পারি?</span> + + <p>মজিলা কোয়ালিটি টিমের একজন <a href="/en-US/docs/Mozilla/QA/How_can_I_help_test_">কমিউনিটি কন্ট্রিবিউটর</a> হওয়ার জন্য অনেক উপায় রয়েছে।</p> + </li> + <li><span>বাগ/ত্রুটি</span> + <p>সকল মজিলা প্রোজেক্ট বাগ ট্র্যাক করার জন্য <a href="https://bugzilla.mozilla.org/">বাগজিলা</a> ব্যবহার করে। কিভাবে <a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/en-US/docs/Mozilla/QA/Bug_writing_guidelines">একটি বাগ রিপোর্ট</a> করতে হয় শিখুন এবং <a href="/en-US/docs/What_to_do_and_what_not_to_do_in_Bugzilla">বাগজিলায় কি করতে পারেন</a> তা জানুন।</p> + </li> + <li><span>ইভেন্ট</span> + <p>আমাদের সাপ্তাহিক <a href="/en-US/docs/Mozilla/QA/Bug_Verification_Day">বাগ ভেরিফিকেশন ডে</a> অথবা <a href="/en-US/docs/Mozilla/QA/Bug_Triage_Day">বাগ ট্রায়াজ ডে</a> তে অংশগ্রহন করুন। এমনকি আপনি আপনার লোকাল কমিউনিটির জন্য <a href="/en-US/docs/Mozilla/QA/Organizing_a_Testday">একটি টেস্ট ডে আয়োজন</a> করতে পারেন!</p> + </li> + <li><span>আইআরসি (IRC)</span> + <p><a href="/en-US/docs/Mozilla/QA/Getting_Started_with_IRC">IRC এর সাথে পরিচিত হন</a>, এটি মজিলা কমিউনিটির সাথে যোগাযোগের প্রধান মাধ্যম।</p> + </li> +</ul> + +<h2 id="বাগত্রুটি">বাগ/ত্রুটি</h2> + +<div class="row topicpage-table"> +<div class="section"> +<h3 id="বাগ_রিপোর্ট_করা">বাগ রিপোর্ট করা</h3> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Bugzilla">বাগজিলা</a></dt> + <dd><span style="background-color: rgba(234, 239, 242, 0.498039);">সকল মজিলা প্রোজেক্ট বাগ ট্র্যাক করার জন্য </span><a href="https://bugzilla.mozilla.org/" style="background-color: rgba(234, 239, 242, 0.498039);">বাগজিলা</a><span style="background-color: rgba(234, 239, 242, 0.498039);"> ব্যবহার করে।</span> বাগ রিপোর্ট ও ট্রায়াজ করতে <a href="https://bugzilla.mozilla.org/createaccount.cgi">বাগজিলায় একটি নতুন অ্যাকাউন্ট</a> তৈরী করতে হবে।</dd> + <dt><a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/en-US/docs/Mozilla/QA/Bug_writing_guidelines">Bug writing guidelines</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Mozilla/QA/A_Bugs_Life" title="/en-US/docs/Mozilla/QA/A_Bugs_Life">একটি বাগের জীবন চক্র</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Mozilla/QA/Filing_Crash_Bugs">Filing Crash Bugs</a></dt> + <dd>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.</dd> +</dl> +</div> + +<div class="section"> +<h3 id="Triaging_bugs">Triaging bugs</h3> + +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Confirming_unconfirmed_bugs" title="en-US/docs/Confirming unconfirmed bugs">Confirming unconfirmed bugs</a></dt> + <dd>Identify useful bug reports and close the rest.</dd> + <dt><a href="/en-US/docs/Mozilla/QA/Triaging_Bugs_for_Firefox" title="/en-US/docs/Mozilla/QA/Triaging_Bugs_for_Firefox">Triaging Bugs for Firefox</a></dt> + <dd>Information about the entire bug triaging process – from processing incoming bugs to narrowing down the steps to reproducing bugs.</dd> + <dt><a href="/en-US/docs/Screening_duplicate_bugs">Screening duplicate bugs</a></dt> + <dd>Help get bugs fixed faster by screening incoming reports for duplicates.</dd> + <dt><a href="/en-US/docs/What_to_do_and_what_not_to_do_in_Bugzilla">General Guidelines</a></dt> + <dd>What to do and what not to do in Bugzilla.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Test_cases">Test cases</h2> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Test_Case_Writing_Primer">Test Case Writing Primer</a></dt> + <dd>How to write proper test cases</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="https://moztrap.mozilla.org/">MozTrap</a></dt> + <dd>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 <a href="https://moztrap.readthedocs.org">MozTrap Documentation</a>.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Test_automation">Test automation</h2> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Automated_testing" title="/en-US/docs/Mozilla/QA/Automated_testing">Automated testing at Mozilla</a></dt> + <dd>Documentation about creating and using automated tests for Mozilla code.</dd> + <dt><a href="/en-US/docs/Mozilla/QA/Developing_tests" title="en-US/docs/Developing_Tests">Developing tests</a></dt> + <dd>Ensure that future changes to Mozilla don't break things that currently work correctly.</dd> + <dt><a href="/en-US/docs/Mozilla/QA/Avoiding_intermittent_oranges" title="en-US/docs/QA/Avoiding intermittent oranges">Avoiding intermittent test failures</a></dt> + <dd>Suggestions for ways to make your tests more reliable, thereby helping to avoid random, intermittent test failures.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Robocop" title="/en-US/docs/Mozilla/QA/Robocop">Robocop</a></dt> + <dd>Robocop is the automated testing system used for Firefox for Android. Learn its <a href="/en-US/docs/Mozilla/QA/Robocop/Code_style_guidelines">code style guidelines</a></dd> + <dt><a href="/en-US/docs/Mozilla/QA/Mozmill_tests">Mozmill</a></dt> + <dd>Get started with Mozmill</dd> + <dd></dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Firefox_QE">Firefox QE</h2> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Triaging_Bugs_for_Firefox" title="/en-US/docs/Mozilla/QA/Triaging_Bugs_for_Firefox">Triaging Bugs for Firefox</a></dt> + <dd>Information about the entire bug triaging process – from processing incoming bugs to narrowing down the steps to reproduce a bug.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Tips_and_Tricks">Tips and Tricks</a></dt> + <dd>These tips and tricks will make your life easier when you are testing.</dd> +</dl> +<a href="/en-US/docs/Downloading_Nightly_or_Trunk_Builds">Downloading Nightly or Trunk Builds</a> + +<dl> + <dd>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. </dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/Command_Line_Options">Command Line Options</a></dt> + <dd>Command line options are used to specify various startup options for Firefox.</dd> + <dt><a href="/en-US/docs/Mozilla/Performance/Reporting_a_Performance_Problem">Reporting a Performance Problem</a></dt> + <dd>This article will guide you in reporting a performance problem using the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler">Gecko Profiler extension</a>.</dd> + <dt><a href="/en-US/docs/Crash_reporting">Crash Reporting</a></dt> + <dd>Firefox ships with an open-source crash reporting system.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Firefox_for_Android">Firefox for Android</h2> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Mobile_Firefox">Mobile Firefox</a></dt> + <dd>Firefox for Android is the mobile version of Firefox with a native Android look and feel.</dd> + <dt><a href="/en-US/Firefox_for_Android/Compatibility_Testing">Compatibility Testing</a></dt> + <dd>Help us identify websites that do not work well in Firefox by reporting the specific issues that you find in your investigation.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Fennec_Android:_Logging_with_the_Android_Debug_and_Logcat">Logging with the Android Debug Bridge and Logcat</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Mozilla/QA/Firefox_Mobile:_Enabling_the_Error_Console">Enabling the Error Console</a></dt> + <dd>See the Mozilla Hacks article on <a class="external external-icon" href="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/">Remote Debugging on Firefox for Android</a> for web content. If you need to debug the Firefox browser itself use Android's <a class="external external-icon" href="http://developer.android.com/tools/help/logcat.html">adb logcat</a>.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Firefox_OS">Firefox OS</h2> + +<div class="row topicpage-table"> +<div class="section"> +<h3 id="Manual_testing">Manual testing</h3> + +<dl> + <dt><a href="/en-US/Firefox_OS/Simulator_vs_Emulator_vs_Device">Simulator vs Emulator vs Device</a></dt> + <dd>These are three basic options when it comes to getting a Firefox OS environment in order to work on, or developing for, Firefox OS.</dd> + <dt><a href="/en-US/Firefox_OS/Debugging">Debugging</a></dt> + <dd>Discover the different tools at your disposal to debug your Firefox OS code.</dd> + <dt><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS">Reporting Bugs</a></dt> + <dd>This article provides a guide to filing bugs against the Firefox OS project, including Gaia and B2G.</dd> +</dl> +</div> + +<div class="section"> +<h3 id="Platform_(Gecko)">Platform (Gecko)</h3> + +<dl> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing">Automated Testing</a></dt> + <dd>Learn various aspects of testing Firefox OS, including running different tests, automation, and result reporting and tracking.</dd> + <dt><a href="/en-US/Firefox_OS/Platform/Automated_testing/Gaia_performance_tests">Gaia Performance Tests</a></dt> + <dd>This article provides information about running performance tests on Gaia, as well as how to create new tests.</dd> + <dt><a href="/en-US/Firefox_OS/Platform/Feature_support_chart">Feature Support Chart</a></dt> + <dd>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.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Web_QA">Web QA</h2> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Reducing_testcases" title="en-US/docs/Reducing testcases">Reducing testcases</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Mozilla/QA/Managing_Web_QA_XFails">Managing XFails</a></dt> + <dd>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.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Mozilla/QA/Running_Web_QA_automated_tests">Running Automated Tests</a></dt> + <dd>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.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Glossary">Glossary</h2> + +<div class="section"> +<dl> + <dt><a href="/en-US/docs/Glossary/Smoke_Test">Smoke Test</a></dt> + <dd></dd> +</dl> +</div> + +<p><span class="alllinks"><a href="/en-US/docs/tag/QA" title="en-US/docs/tag/QA">View all documents tagged QA</a></span></p> + +<p><span class="alllinks"><a href="/en-US/docs/tag/QA:Tools" title="en-US/docs/tag/QA:Tools">View all documents tagged QA:Tools</a></span></p> 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 +--- +<p>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.</p> + +<h4 id="Planning_Your_Event">Planning Your Event</h4> + +<div>The following should be done no later than one week before your event:</div> + +<div> </div> + +<ol> + <li>Once you have a topic in mind, pick a day to schedule your event — check the <a href="https://quality.mozilla.org/events/">calendar on QMO</a> for availaility</li> + <li>Create a test plan to define success criteria, declare a designated spot for signups for mentors, set a schedule (e.g, <a href="https://etherpad.mozilla.org/testday-20141024">past event test-plan</a>)</li> + <li>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, <a href="https://quality.mozilla.org/2014/09/volunteers-needed-for-testdays-relaunch-initiative/">see past event notice</a>)</li> + <li>Broadcast your event — Follow our suggested communication list below to help broadcast and publicize the event</li> + <li>Enlist mentors to help facilitate and educate throughout the event — gather contact information to ensure that they're able to attend during the event</li> +</ol> + +<h4 id="The_Day_Of">The Day Of</h4> + +<ol> + <li>Make sure the IRC channel topic is updated to point people to your test plan</li> + <li>Be proactive in greeting people and removing barriers for them to contribute - ask questions and engage with people who join the channel</li> + <li>Recommend sign-up to dev-quality and mozillians to attendees for future event notice</li> + <li>Provide a feedback survey to participants, <a href="https://docs.google.com/forms/d/1ZPa-0g_jqfRQdhBLOJFLms9VudvjLjVGKOHeHpJNLyk/viewform">clone or copy this example document</a></li> +</ol> + +<h4 id="After_the_Event">After the Event</h4> + +<ol> + <li>Provide a followup post in your communication channels thanking those who attended</li> + <li>Plan a future event</li> +</ol> + +<h4 id="Tips_for_Success">Tips for Success</h4> + +<div>The following is a list of tips which will hopefully make your event more successful.</div> + +<div> </div> + +<ul> + <li>Make sure you have enough mentors committed to your event, otherwise it might come off as disorganized</li> + <li>Make sure your project is ready for testers; remember that most testers are just Firefox users</li> + <li>The more you advertise the greater your audience</li> + <li>Give yourself enough time to prepare the material</li> + <li>Give your audience enough time to familiarize themselves with any material needed as a prerequisite before the event</li> + <li>Have a peer review your event material and attempt an activity to test the ease of your ramp-up path</li> + <li>Don’t be afraid to reach out to external communities (especially true for development related testdays)</li> +</ul> + +<h4 id="Communication_Channels">Communication Channels</h4> + +<p>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.</p> + +<h5 id="Mailing_Lists">Mailing Lists</h5> + +<ul> + <li>dev-quality: the primary public mailing for Mozilla QA</li> + <li>events: use if your event incorporates physical meetup</li> +</ul> + +<h5 id="Social_Networks">Social Networks</h5> + +<ul> + <li>Twitter: @MozillaQA is our Twitter account</li> + <li>Facebook: MozillaQA is our Facebook account. Note that QMO Event posts are automatically syndincated to Facebook</li> + <li>Yammer</li> + <li>Google Plus</li> +</ul> + +<h5 id="Forums">Forums</h5> + +<ul> + <li>Reddit: <a href="http://reddit.com/r/firefox">http://reddit.com/r/firefox</a> — active Firefox community</li> + <li>Discourse: <a href="/en-US/docs/">https://discourse.mozilla-community.org/c/quality-assurance</a></li> +</ul> + +<h5 id="Meeting_Pages">Meeting Pages</h5> + +<ul> + <li>Mozilla Project Weekly Update, <a href="https://wiki.mozilla.org/WeeklyUpdates">meeting details here</a></li> + <li>QA Team: public QA meeting, <a href="https://wiki.mozilla.org/QA/Team_Meeting">meeting details here</a></li> +</ul> + +<h5 id="Other_Websites">Other Websites</h5> + +<ul> + <li><a href="http://forum.xda-developers.com/">XDA Forums</a></li> + <li><a href="http://www.softwaretestingclub.com/">Software Testing Club</a></li> +</ul> + +<hr> +<h2 id="Moderators">Moderators</h2> + +<p>The following are some tips for moderators to make the testday a success.</p> + +<ul> + <li>Greet people as soon as they join the channel</li> + <li>Ask them to sign up for Mozillians.org</li> + <li>Ask them to download the test build</li> + <li>Ask them about their interest and give them a specific task to perform</li> + <li>Offer to answer questions</li> + <li>Touch base with your testers if you haven't heard from them in the last 20 minutes or so</li> + <li>Thank and encourage your testers when they are completing tasks</li> + <li>Thank and encourage your testers before when they indicate they are leaving</li> + <li>Tell people in other channels about your testday (#qa, #firefox, etc)</li> +</ul> + +<h2 id="Contributors">Contributors</h2> + +<p>The following are some tips for contributors to make the testday a success.</p> + +<ul> + <li>Ask questions, any and all questions you have are valid</li> + <li>Don't be afraid to stumble, hopefully you will learn something new</li> + <li>Read over the testplan and provided documentation</li> + <li>Get a build and start testing; just dive right in</li> + <li>Offer to help other testers and answer questions once you've learned the ropes</li> + <li>Sign up for <a href="https://mozillians.org">Mozillians.org</a> so we can keep in touch</li> + <li><strong>Missed the testday?</strong> Reach out to the organizer and see how you can help out after the fact</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_document_information">Original document information</h2> + +<ul> + <li>Author(s): Anthony Hughes</li> + <li>Date last modified: February 3, 2012 at 10:54 pm PST</li> +</ul> +</div> + +<hr> +<h3 id="QMO_Event_Page"><a name="event"></a>QMO Event Page</h3> + +<p>The week before a testday we need to create a QMO event page.</p> + +<ul> + <li>Once you are logged in (yes you need to be authenticated) simply click on the left to add a <a href="https://quality.mozilla.org/wp-admin/post-new.php">new post</a></li> + <li>Your title should indicate the topic and date (ie. Firefox Aurora Bugday May 6th)</li> + <li>Start out by giving a small summary of the topic, goals, and when the event takes place.</li> + <li>Give some context as to why this event/activity is necessary and valuable.</li> + <li>Give some encouragement for people who have absolutely no experience to attend.</li> + <li>Frame the language of your post with "making Firefox better", show them what benefit their contributions provide (no matter how big or small).</li> + <li>Provide a link to your testplan etherpad and a mibbit URL so people without IRC clients can join easily.</li> + <li>Be sure to thank them in advance for attending.</li> +</ul> + +<p>This is an example of an excellent <a href="http://quality.mozilla.org/events/2011/02/28/add-ons-compatibility-and-add-ons-manager-testday-march-4th/">QMO Event</a> page. <strong>Before posting make sure you:</strong></p> + +<ul> + <li>"Is this post an event?" is set to "Yes" below</li> + <li>"All day event?" is unchecked and the date/times are properly set (all times in PDT)</li> + <li>All other event details can be left blank</li> + <li>On the right under "Categories", check "Events", "QMO News" and any appropriate "Teams"</li> + <li><strong>Make sure you SAVE DRAFT and PREVIEW before publishing</strong> (if you have to, get someone else to review)</li> +</ul> + +<h3 id="QMO_Blog_Post"><a name="blog"></a>QMO Blog Post</h3> + +<p>The day before the testday, simply create a post which reminds people that a testday is happening <em>tomorrow</em>.</p> + +<ul> + <li>The title should be similar to "REMINDER: Firefox Aurora Testday Tomorrow!"</li> + <li>The message should summarize the activity, time, a mibbit URL to the channel, and a link to the QMO Event page for more information</li> + <li>Be sure to thank them ahead of time for attending</li> + <li>Be sure the "Categories" on the right are set to "QMO News"</li> + <li><strong>Make sure you SAVE DRAFT and PREVIEW before publishing</strong></li> +</ul> + +<p>This is a good example of a <a href="http://quality.mozilla.org/qmo-news/2011/03/24/testday-reminder-mozmill-crowd-and-endurance-testing/">QMO Event Reminder</a>. Your post should be syndicated to Planet within 30 minutes to an hour.</p> + +<h3 id="QMO_Results_Post"><a name="results"></a>QMO Results Post</h3> + +<p>The day after a testday, create another post which highlights the results.</p> + +<ul> + <li>The title should be similar to "Results of the Firefox Aurora Testday"</li> + <li>The message should summarize the activity and the value it provided</li> + <li>Highlight some of the results (number of bugs filed, number of bugs confirmed/verified, number of testers, etc)</li> + <li>Identify and thank the top tester</li> + <li>Identify and thank some of the people who were runners up for the top-tester</li> + <li>Give general thanks to everyone who helped</li> + <li>Provide a link to the next testday (should it be available) and ask people to come back to help</li> + <li>Be sure the "Categories" on the right are set to "QMO News"<strong> </strong></li> + <li><strong>Make sure you SAVE DRAFT and PREVIEW before publishing</strong></li> +</ul> + +<p>This is a good example of a <a href="http://quality.mozilla.org/qmo-news/2011/04/26/results-of-the-aurora-422-testday/">QMO Results Post</a>. Your post should be syndicated to Planet within 30 minutes to an hour. </p> + +<div class="originaldocinfo"> +<h2 id="Original_document_information_2">Original document information</h2> + +<ul> + <li>Author(s): Anthony Hughes</li> + <li>Date last modified: October 25, 2011 at 11:16 am PST</li> +</ul> +</div> + +<p> </p> 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 +--- +<div class="entry-content" style="word-wrap: break-word; margin-bottom: 1em; font-family: Georgia, Times, serif; font-size: 12.7272720336914px; line-height: 18.176362991333px;"> +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">আপনি <a href="https://wiki.mozilla.org/QA/Execution/Web_Testing" style="color: rgb(227, 114, 14); font-weight: bold;">Web QA</a> পরীক্ষা চালাতে চান , কিন্তু জানেন না কোথা থেকে শুরু করতে হবে ? This doc will help you get up and running a set of tests locally.</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">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 <a href="https://wiki.mozilla.org/QA/Execution/Web_Testing/Automation#Web_QA_Projects" style="color: rgb(227, 114, 14); font-weight: bold;">automation projects</a>, or you could simply use the <a href="https://github.com/mozilla/Addon-Tests" style="color: rgb(227, 114, 14); font-weight: bold;">Addon-Tests</a> project to start. Once you’ve decided which project you’d like to work on, follow this guide to run the existing tests.</p> + +<p style="margin-bottom: 1.4em;"><font color="#333333">You should join us on IRC</font><font color="#333333"> at <a href="/en-US/docs/">http://irc.mozilla.org</a>, #mozwebqa and #qa. You can say hello there, and get help if you get stuck on these instructions.</font></p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">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.</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">All of the following commands are performed from a terminal window (Linux/Mac) or shell (Windows).</p> + +<h2 id="Step_1_Install_required_software" style="color: rgb(42, 126, 0); margin-bottom: 0.5em; font-weight: normal; line-height: 1.2; font-size: 1.69em;">Step 1: Install required software</h2> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">In order to run and work on our tests you need both <strong>Git</strong> and <strong>Python</strong> installed. You will also need<strong>pip</strong>, which is a package manager for Python.</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">Excellent instructions for installing Git on all platforms can be found at <a href="https://help.github.com/articles/set-up-git" style="color: rgb(227, 114, 14); font-weight: bold;">Github</a>.</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">Python can be downloaded from <a href="https://www.python.org/downloads/" style="color: rgb(227, 114, 14); font-weight: bold;">here</a>. Select the appropriate version for your platform and run the installer, we recommend the highest version 2 package that is available.</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">You can verify that Python has been successfully installed by running the following command:</p> + +<pre style="color: rgb(51, 51, 51); margin-bottom: 1.4em; padding: 0px;">python --version</pre> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;"><strong>Windows only:</strong><br> + After installing Python, install SetupTools from <a href="http://pypi.python.org/pypi/setuptools" style="color: rgb(227, 114, 14); font-weight: bold;">here</a>. 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: <em>System Properties->Environment Variables->System Variables-> Path</em>.</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;"><strong>Linux only:</strong><br> + If you are running on Ubuntu/Debian, after installing Python, install SetupTools via</p> + +<pre style="color: rgb(51, 51, 51); margin-bottom: 1.4em; padding: 0px;">sudo apt-get install python-setuptools</pre> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">After Python is successfully installed, install pip by running the following command:</p> + +<pre style="color: rgb(51, 51, 51); margin-bottom: 1.4em; padding: 0px;">easy_install pip</pre> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">You now have all of the software required to run Web QA tests!</p> + +<h2 id="Step_2_Clone_the_project" style="color: rgb(42, 126, 0); margin-bottom: 0.5em; font-weight: normal; line-height: 1.2; font-size: 1.69em;">Step 2: Clone the project</h2> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">If you want to make any changes to tests, or add your own tests, you’ll need to <em>fork</em> the repository (repo) first, to obtain your own copy. To do this simply visit the repo page for <a href="https://wiki.mozilla.org/QA/Execution/Web_Testing/Automation#Web_QA_Projects" style="color: rgb(227, 114, 14); font-weight: bold;">one of the automation projects</a>, and click the fork button which you’ll find near the upper right-hand corner of the page:<br> + <img alt="Screen Shot 2013-10-18 at 11.26.33 AM" class="alignnone size-full wp-image-46129" src="https://quality.mozilla.org/qmo_content/uploads/Screen-Shot-2013-10-18-at-11.26.33-AM.png" style="height: 40px; width: 113px;"></p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">You can then <em>clone</em> 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:</p> + +<pre style="color: rgb(51, 51, 51); margin-bottom: 1.4em; padding: 0px;">git clone --recursive git@github.com:[your username]/[project].git</pre> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">For example:</p> + +<pre style="color: rgb(51, 51, 51); margin-bottom: 1.4em; padding: 0px;">git clone --recursive git@github.com:bobsilverberg/Addon-Tests.git</pre> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;"><em>Pro tip</em>: 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:<br> + <img alt="Screen Shot 2013-10-18 at 11.29.15 AM" class="alignnone size-full wp-image-46130" src="https://quality.mozilla.org/qmo_content/uploads/Screen-Shot-2013-10-18-at-11.29.15-AM.png" style="height: 112px; width: 209px;"> 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.</p> + +<h2 id="Step_3_Install_required_Python_packages" style="color: rgb(42, 126, 0); margin-bottom: 0.5em; font-weight: normal; line-height: 1.2; font-size: 1.69em;">Step 3: Install required Python packages</h2> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">Each project has its own requirements.txt which lists Python packages needed for running the tests.<br> + Install them using:</p> + +<pre style="color: rgb(51, 51, 51); margin-bottom: 1.4em; padding: 0px;">pip install -Ur requirements.txt</pre> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;"><strong>[Optional/Intermediate level]</strong><br> + While most of us have had some experience using virtual machines, <a href="http://pypi.python.org/pypi/virtualenv" style="color: rgb(227, 114, 14); font-weight: bold;">virtualenv</a> 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 <a href="http://www.doughellmann.com/projects/virtualenvwrapper/" style="color: rgb(227, 114, 14); font-weight: bold;">virtualenvwrapper</a> will give you some nice commands to use with virtualenv.</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">For a more detailed discussion of virtualenv and virtualenvwrapper, check out <a href="https://wiki.mozilla.org/QA/Execution/Web_Testing/Automation/Virtual_Environments" style="color: rgb(227, 114, 14); font-weight: bold;">our quickstart guide</a> and also <a href="http://www.silverwareconsulting.com/index.cfm/2012/7/24/Getting-Started-with-virtualenv-and-virtualenvwrapper-in-Python" style="color: rgb(227, 114, 14); font-weight: bold;">this blog post</a>.</p> + +<h2 id="Step_4_Create_a_credentials_file" style="color: rgb(42, 126, 0); margin-bottom: 0.5em; font-weight: normal; line-height: 1.2; font-size: 1.69em;">Step 4: Create a credentials file</h2> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">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.</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">If you do not see a sample credentials.yaml file in the root of the project then you can skip this step!</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;"><em>Pro tip</em>: 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.</p> + +<h2 id="Step_5_Choose_an_execution_environment" style="color: rgb(42, 126, 0); margin-bottom: 0.5em; font-weight: normal; line-height: 1.2; font-size: 1.69em;">Step 5: Choose an execution environment</h2> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">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:</p> + +<ul style="color: rgb(51, 51, 51); margin-bottom: 1.4em; margin-left: 1.6em; padding-left: 0px;"> + <li style="margin-bottom: 0.25em; padding-bottom: 0px;">Production – this is the “live” environment, the site which is actually visited by the site’s users. The url generally contains “mozilla.org” in it. For example, for addons it would be<a href="https://addons.mozilla.org/" style="color: rgb(227, 114, 14); font-weight: bold;">https://addons.mozilla.org</a>.</li> + <li style="margin-bottom: 0.25em; padding-bottom: 0px;">Staging – this is an environment where code lives after it has graduated from development but before going to production. The url generally contains “allizom.org” in it. For example, for addons it would be <a href="https://addons.allizom.org/" style="color: rgb(227, 114, 14); font-weight: bold;">https://addons.allizom.org</a>.</li> + <li style="margin-bottom: 0.25em; padding-bottom: 0px;">Development – this is the environment that developers use to test their code. The url generally contains “dev-” in it. For example, for addons it would be <a href="https://addons.allizom.org/" style="color: rgb(227, 114, 14); font-weight: bold;">https://dev-addons.allizom.org</a>.</li> +</ul> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;"><em>Pro tip</em>: 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:</p> + +<pre style="color: rgb(51, 51, 51); margin-bottom: 1.4em; padding: 0px;">baseurl = https://addons-dev.allizom.org</pre> + +<h2 id="Step_6_Run_the_tests!" style="color: rgb(42, 126, 0); margin-bottom: 0.5em; font-weight: normal; line-height: 1.2; font-size: 1.69em;">Step 6: Run the tests!</h2> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">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.</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">To run all the tests:</p> + +<pre style="color: rgb(51, 51, 51); margin-bottom: 1.4em; padding: 0px;">py.test --driver=firefox</pre> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">To run all the tests with a credentials file:</p> + +<pre style="color: rgb(51, 51, 51); margin-bottom: 1.4em; padding: 0px;">py.test --driver=firefox --credentials=/path/to/credentials.yaml</pre> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">To run all of the tests in one file:</p> + +<pre style="color: rgb(51, 51, 51); margin-bottom: 1.4em; padding: 0px;">py.test --driver=firefox tests/test_file.py</pre> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">To run one test in a file:</p> + +<pre style="color: rgb(51, 51, 51); margin-bottom: 1.4em; padding: 0px;">py.test --driver=firefox tests/test_file.py -k name_of_test_to_run</pre> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">To run tests on an environment other than the default, specify the “–baseurl” option:</p> + +<pre style="color: rgb(51, 51, 51); margin-bottom: 1.4em; padding: 0px;">py.test --driver=firefox --baseurl=https://addons.allizom.org</pre> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">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:</p> + +<pre style="color: rgb(51, 51, 51); margin-bottom: 1.4em; padding: 0px;">py.test --driver=firefox --baseurl=https://addons.allizom.org --destructive</pre> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">The pytest-mozwebqa plugin has advanced command line options for reporting and using browsers. To see the options available, try running:</p> + +<pre style="color: rgb(51, 51, 51); margin-bottom: 1.4em; padding: 0px;">py.test --help</pre> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">Also see the documentation on <a href="https://github.com/davehunt/pytest-mozwebqa" style="color: rgb(227, 114, 14); font-weight: bold;">the plugin’s project page</a>.</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;"><strong>[Optional/Intermediate level]</strong><br> + 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.</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">Follow our <a href="https://github.com/mozilla/moz-grid-config/wiki/Quick-Start" style="color: rgb(227, 114, 14); font-weight: bold;">quick start guide</a> to get Selenium Grid up and running.</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">Now you’re ready to contribute!</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">If you’d like to learn more, the next post in this series is on <a href="https://quality.mozilla.org/2014/03/automated-testing-analyzing-results/" style="color: rgb(227, 114, 14); font-weight: bold;">Automated Tests: Analyzing Results.</a></p> + +<h2 id="Step_7_Get_the_Badge!" style="color: rgb(42, 126, 0); margin-bottom: 0.5em; font-weight: normal; line-height: 1.2; font-size: 1.69em;">Step 7: Get the Badge!</h2> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">Once you have completed the steps above, you are eligible for the new Web QA badge! You can see the badge here:</p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;"><a href="https://badges.mozilla.org/en-US/badges/badge/Running--Web-QA-Automation" style="color: rgb(227, 114, 14); font-weight: bold;">https://badges.mozilla.org/en-US/badges/badge/Running–Web-QA-Automation</a></p> + +<p style="color: rgb(51, 51, 51); margin-bottom: 1.4em;">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!</p> + +<div style="color: rgb(51, 51, 51);"> </div> +</div> + +<p> </p> 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 +--- +<p>Mozilla has several technologies used as components of its projects. These are documented here. (flesh out this text).</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/bn/mozilla/ডেভলপার_প্রোগ্রাম/index.html b/files/bn/mozilla/ডেভলপার_প্রোগ্রাম/index.html new file mode 100644 index 0000000000..2e9754cc3f --- /dev/null +++ b/files/bn/mozilla/ডেভলপার_প্রোগ্রাম/index.html @@ -0,0 +1,115 @@ +--- +title: মজিলা ডেভলপার প্রোগ্রাম +slug: Mozilla/ডেভলপার_প্রোগ্রাম +translation_of: Mozilla/Connect +--- +<div class="summary"> +<p><span class="seoSummary">Enable, inspire and collaborate to make the Web the primary platform used to create experiences across all connected devices.</span></p> +</div> + + +<div> +<div class="column-container dev-program-callouts dev-program-block dev-program-first dev-program-column-wrapper" style=""> +<div class="dev-program-callout" style="display: inline-flex; width: 30% !important; padding: 10px;"> +<div class="callout-link-container"> +<h2 id="ডেভলপার_প্রোগ্রামে">ডেভলপার প্রোগ্রামে</h2> + +<h2 id="যোগ_দিন!">যোগ দিন!</h2> + +<p>সাইন আপ করুন ডেভলপার প্রোগ্রামের জন্য! এতে আপনি মেম্বারশীপ ছাড়াও আমাদের নিউজলেটারে সাবস্ক্রাইব করার সুযোগ পাবেন এবং বিভিন্ন সময়ে আমাদের প্রকাশিত বিভিন্ন ফিচারে প্রবেশ করতে পারবেন।</p> + +<p> </p> +<a class="callout-link" href="/profile/edit"> যোগ দিন বা লগ ইন করুন </a></div> +</div> + +<div class="dev-program-callout" style="display: inline-flex; width: 30% !important; padding: 10px;"> +<div class="callout-link-container"> +<h2 id="হ্যাকস্_ব্লগ">হ্যাকস্ ব্লগ</h2> + +<p>মুক্ত ওয়েব ডেভলপকারীদের জন্য সাহায্যের একটি মূল উৎস এটি। মজিলা হ্যাকস্ ব্লগ বিভিন্ন খবরাখবর এবং ওয়েব টেকনোলজি ও ব্রাউজার ফিচারের সর্বশেষ আলোচনা offer করে।</p> + +<p> </p> + +<p> </p> + +<p><a class="callout-link" href="https://hacks.mozilla.org/">এখনই পড়ুন</a></p> +</div> +</div> + +<div class="dev-program-callout" style="display: inline-flex; width: 30% !important; padding: 10px;"> +<div class="callout-link-container"> +<p> </p> + +<h2 id="সাহায্য_QA">সাহায্য Q&A</h2> + +<p>Stack Overflowতে ওয়েব এবং বিভিন্ন ওয়েব অ্যাপ সম্পর্কিত আলোচনায় অংশ নিন। এখানে আপনি অন্যান্য ওয়েব ডেভলপারদের সাথেও মত বিনিময় করতে পারেন।</p> + +<div class="smaller"><strong>{{anch("ডেভলপার ডিসকাশনসমূহ ", " Q&A নিচে খুজুঁন")}}</strong></div> + +<div class="callout-link-wrapper"><a class="callout-link" href="http://stackoverflow.com/r/mozilla"> স্ট্যাক ওভারফ্লোতে মজিলা প্রস্ন ও উত্তর </a></div> + +<div class="callout-link-wrapper"> </div> +</div> +</div> +</div> + +<div class="dev-program-explanation dev-program-block"> +<h2 id="মজিলা_ডেভলপার_প্রোগ্রাম_কী">মজিলা ডেভলপার প্রোগ্রাম কী?</h2> + +<h2 id="sect1"> </h2> + +<p>মজিলায় আমরা ডেভলপারে বিশ্বাস করি। মানসম্মত সেবা এবং সাধারণ মানুষের জন্য বিভিন্ন অ্যাপ তৈরির মাধ্যমে তারা ভবিষ্যৎ তৈরি করছে। মুক্ত এবং মানসম্মত ওয়েব টেকনোলজি ব্যবহারের সুযোগ করে দিয়ে তাদের তাতে সাহায্য করাই আমাদের লক্ষ্য। ডেভলপারদের সাহায্য করতে পেরে এবং দীর্ঘমেয়াদী সম্পর্ক ও বিভিন্ন চ্যানেল স্থাপনের মাধ্যমে আমরা তৈরি করতে পেরেছি মজিলা ডেভলপার প্রোগ্রাম (MDP)।</p> + +<p>প্রাথমিকভাবে, আপনার নির্দিষ্ট কোন টেকনিক্যাল ইস্যু সমাধানে ও বিভিন্ন চ্যালেঞ্জ মোকাবেলায় স্ট্যাক ওভারফ্লোতে Q&Aর মাধ্যমে আমরা সাহায্য করে থাকি। ওয়েব সিনে ওয়েব অ্যাপ ও আরো অনেক কিছু নিয়ে সর্বশেষ ঘটনা সম্পর্কে আপনাকে অবগত রাখতে আমাদের একটি নিউজলেটারও আছে।</p> + +<p>মজিলা ডেভলপার প্রোগ্রামকে ব্যাপক বিস্তৃতি দানের লক্ষ্যে আমাদের প্রচুর ধারণা এবং পরিকল্পনা আছে। আমরা চাই আপনিও এতে অংশ নিন আর আমরা সবাই মিলে এটি করি!তো, <a href="http://stackoverflow.com/r/mozilla">স্ট্যাক ওভারফ্লোর ট্যাগগুলো অনুসরণ করুন</a>, <a href="https://hacks.mozilla.org/">হ্যাকস্ ব্লগে সাবস্ক্রাইব করুন</a>, এবং <a href="/profile/edit">সাইন আপ করুন</a>!</p> +</div> + +<div class="column-container dev-program-block"> +<div class="column-half" id="Developer_discussions"> +<h2 id="স্ট্যাক_ওভারফ্লোতে_QA_সকল_প্রস্ন_ও_উত্তর_দেখুন...">স্ট্যাক ওভারফ্লোতে Q&A <a class="heading-link" href="http://stackoverflow.com/r/mozilla">সকল প্রস্ন ও উত্তর দেখুন...</a></h2> + +<p>ডেভলপ করার সময় বিভিন্ন চ্যালেঞ্জ এবং ইস্যু আলোচনার জন্য বিশেষ করে ফায়ারফক্স OS এবং মোবাইল ফোনে মুক্ত ওয়েবের জন্য আমাদের আছে Q&A। স্ট্যাক ওভাকফ্লোর এই URL <a href="http://stackoverflow.com/r/mozilla">http://stackoverflow.com/r/mozilla</a>এ আপনি পর্যাপ্ত সাহায্য পাবেন।</p> + + +<div class="stack-form">স্ট্যাক ফরম</div> + +<h3 id="সর্বশেষ_প্রস্ন_ও_উত্তর_বিষয়বস্তু">সর্বশেষ প্রস্ন ও উত্তর বিষয়বস্তু</h3> +</div> + +<div class="column-half dev-program-hacks dev-program-block"> </div> +</div> + +<p class="dev-program-block"><img alt="Developers at a Firefox OS workshop in Madrid." src="https://mdn.mozillademos.org/files/6611/PhonesUp.jpg" style="display: block; height: 359px; margin: 0px auto; max-width: 100%; width: 720px;"></p> + +<div class="column-container dev-program-block"> +<div class="column-7 dev-program-events"> +<h2 id="মজিলা_কোথায়">মজিলা কোথায়?</h2> + +<h2 id="আমাদের_ইভেন্ট_পেইজে_বিস্তারিত_দেখুন..."><a class="heading-link" href="https://developer.mozilla.org/en/events">আমাদের ইভেন্ট পেইজে বিস্তারিত দেখুন...</a></h2> + +<p>একটি ইভেন্টে আপনার উদ্দেশ্যে যেসব মজিলা রিপ্রেসেন্টেটিভরা কথা বলেন তাদের একটি তালিকা আছে এখানে। তাদের সাথে কথা বলে নিশ্ঢিত হন!</p> +</div> + +<div class="column-5"> +<h2 id="অন্য_রিসোর্স">অন্য রিসোর্স</h2> + +<ul> + <li><a href="http://www.youtube.com/user/mozhacks">ইউটিউবে মজিলা হ্যাকস</a> + + <ul class="no-bullets"> + <li> + <ul> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqIHIUUv08hBCHq1OgPKhdo0">ফায়ারফক্স OS এর ভিডিও</a></li> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqLZNY22xKbTEzMfYo9PXAlm">ফায়ারফক্স ডেভলপার টুলস্ এর ভিডিও</a></li> + </ul> + </li> + <li><a href="https://twitter.com/mozhacks">@টুইটারে মোজহ্যাকস্</a></li> + </ul> + </li> +</ul> +</div> +</div> +</div> + +<p> </p> diff --git a/files/bn/mozilla/ফায়ারফক্স/index.html b/files/bn/mozilla/ফায়ারফক্স/index.html new file mode 100644 index 0000000000..de6c68bbec --- /dev/null +++ b/files/bn/mozilla/ফায়ারফক্স/index.html @@ -0,0 +1,59 @@ +--- +title: ফায়ারফক্স +slug: Mozilla/ফায়ারফক্স +tags: + - ফায়ারফক্স +translation_of: Mozilla/Firefox +--- +<div>{{FirefoxSidebar}}</div> + +<p><a class="external external-icon" href="https://www.mozilla.org/firefox">ফায়ারফক্স</a> হচ্ছে মোজিলা'র বহুল পরিচিত ওয়েব ব্রাউজার এপ্লিকেশন, যা উইন্ডোজ, ম্যাক OS এক্স, এবং লিনাক্স এর মতো বিভিন্ন প্ল্যাটফরম, এছাড়াও এনড্রোয়েড মোবাইল এ ও রয়েছে । যার সাথে রয়েছে সর্বাধুনিক ওয়েব প্রযুক্তি এবং শক্তিশালী <a href="https://developer.mozilla.org/en-US/docs/Tools">ডেভেলপার টুল</a> । ওয়েব ডেভলপার এবং সাধারণ ব্যবহারকারীদের জন্য ফায়ারফক্স হচ্ছে একটি উৎকৃষ্ট ব্রাউজার।</p> + +<p>ফায়ারফক্স একটি ওপেন সোর্স প্রোজেক্ট, কোড এর অনেক কিছুই আমাদের স্বেচ্ছাসেবক সংগঠন এর মাধ্যমে তৈরি। এখানে আপনি ফায়ারফক্স প্রোজেক্ট এ কিভাবে সাহায্য করতে হয় তা শিখতে পারবেন, কিন্তু আপনি ফায়ারফক্স ডেভলপার টুল ব্যাবহার করে ফায়ারফক্স অ্যাড-অন তৈরির ডকুমেন্টেশন লিঙ্ক খুজে পাবেন।</p> + +<div class="summary"> +<p>কিভাবে ফায়ারফক্স OS এ অ্যাড-অন তৈরি করতে হয় শিখুন, কিভাবে ফায়ারফক্স ডেভলপ এবং তৈরি করা যায়, এবং কিভাবে ফায়ারফক্স এর অভ্যন্তরীণ সাবপ্রজেক্ট গুলো কাজ করে তা জানুন।</p> +</div> + +<ul class="card-grid"> + <li><span>ডেভলপার রিলিজ নোটস </span> + + <p><a href="https://developer.mozilla.org/en-US/Firefox/Releases">ডেভলপারদের জন্য রিলিজ নোট</a>; ফায়ারফক্স এর প্রতিটি ভার্সন এর ওয়েবসাইট এবং অ্যাড-অন এর নতুন ক্ষমতা সম্বন্ধে জানুন l</p> + </li> + <li><span>প্রোজেক্ট ডকুমেন্ট তৈরি করা </span> + <p><a href="/bn/docs/Mozilla">ফায়ারফক্স এর অভ্যন্তরীণ</a> বিষয় এবং এর তৈরি প্রক্রিয়ার বিস্তারিত তথ্য সম্বন্ধে অবগত থাকুন এতে আপনার কোড করা সহজ হবে।</p> + </li> + <li><span>ডেভলপার গাইড </span> + <p>আমাদের <a href="/bn/docs/Developer_Guide">ডেভলপার গাইড</a>, দিচ্ছে সম্পূর্ণ তথ্য কিভাবে আপনি ফায়ারফক্স সোর্স কোড কম্পাইল করতে পারেন, কিভাবে আপনি আপনার নিজস্ব কোড করার সুযোগ পান, এবং কিভাবে অন্যান্য প্রোজেক্ট এ যোগ দিতে পারেন।</p> + </li> +</ul> + +<h2 id="ফায়ারফক্স_চ্যানেল">ফায়ারফক্স চ্যানেল</h2> + +<p>ফায়ারফক্স চারটি <strong>চ্যানেলে</strong>পাওয়া যায়।</p> + +<h3 id="ফায়ারফক্স_নাইটলি">ফায়ারফক্স নাইটলি</h3> + +<p>প্রতি রাতে<a href="/en-US/docs/mozilla-central">মজিলা-সেন্ট্রাল</a> থেকে ফায়ারফক্স নাইটলি বিল্ড করি। এই বিল্ড গুলো ফায়ারফক্স ডেভেলপারদের জন্য অথবা যারা সক্রিয় ডেভেলপমেন্ট এর মধ্যে থাকা সর্বশেষ আকর্ষণীয় ফিচার ব্যবহার করতে চায়।</p> + +<p><a href="https://nightly.mozilla.org/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">ফায়ারফক্স নাইটলি ডাউনলোড</a></p> + +<h3 id="ফায়ারফক্স_ডেভেলপার_এডিশন">ফায়ারফক্স ডেভেলপার এডিশন</h3> + +<p>ফায়ারফক্সের এই সংস্করণ ডেভেলপারদের জন্য বিশেষভাবে তৈরি করা হয়েছে। প্রতি ৬ সপ্তাহ পর পর ফায়ারফক্স নাইটলিতে থাকা মোটামুটি স্ট্যাবল ফিচার ডেভেলপার এডিশনে যুক্ত করে রিলিজ দেয়া হয়। এছাড়াও শুধু ডেভেলপারদের প্রয়োজন হবে, এমন কিছু অতিরিক্ত ফিচারও আমরা এতে যুক্ত করে থাকি।</p> + +<p><a href="/en-US/Firefox/Developer_Edition">ফায়ারফক্স ডেভেলপার এডিশন সম্পর্কে আরও জানুন</a></p> + +<p><a href="https://www.mozilla.org/en-US/firefox/developer/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">ফায়ারফক্স ডেভেলপার সংস্করণ ডাউনলোড</a></p> + +<h3 id="ফায়ারফক্স_বেটা">ফায়ারফক্স বেটা</h3> + +<p>ফায়ারফক্স ডেভেলপার এডিশনে ছয় সপ্তাহ থাকার পর, যেসব ফিচার মোটামুটি স্ট্যাবল, আমরা তা নিয়ে ফায়ারফক্স বেটার একটি নতুন সংস্করণ তৈরি করি। ফায়ারফক্স বেটা মজিলার ভলান্টিয়ারদের টেস্ট করার জন্য রিলিজ দেয়া হয় এবং এরপর ফায়ারফক্সের পুর্নাঙ্গ সংস্করণে অন্তরভুক্ত করার জন্য তৈরি করা হয়।</p> + +<p><a href="https://www.mozilla.org/firefox/channel/#beta" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">ফায়ারফক্স বেটা ডাউনলোড</a></p> + +<h3 id="ফায়ারফক্স">ফায়ারফক্স</h3> + +<p>প্রায় দেড় মাস বেটা সংস্করণে থাকার পর, আমরা এখন নতুন ফিচার হাজার কোটি মানুষের কাছে ফায়ারফক্সের নতুন সংস্করণ পৌঁছে দিতে প্রস্তুত।</p> + +<p><a href="https://www.mozilla.org/firefox/channel/#firefox" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">ফায়ারফক্স ডাউনলোড</a></p> diff --git a/files/bn/mozilla/ফায়ারফক্স/রিলিজস/index.html b/files/bn/mozilla/ফায়ারফক্স/রিলিজস/index.html new file mode 100644 index 0000000000..9027523416 --- /dev/null +++ b/files/bn/mozilla/ফায়ারফক্স/রিলিজস/index.html @@ -0,0 +1,10 @@ +--- +title: ফায়ারফক্স ডেভেলপার রিলিজ নোট্স +slug: Mozilla/ফায়ারফক্স/রিলিজস +tags: + - NeedsReview +translation_of: Mozilla/Firefox/Releases +--- +<div>{{FirefoxSidebar}}</div><p>"ফায়ারফক্স এক্স ডেভেলপারস" দেরকে ফায়ারফক্স এর প্রতিটি রিলিজ এর প্রতিবেদন এর লিঙ্ক দিচ্ছে এই পেজ। ফায়ারফক্স এর প্রতিটি ভার্শন এর সাথে কি কি ফিচার যোগ এবং ভুলগুলো মুছে ফেলা হয়েছে তা এই নোটস এর মাধ্যমে আপনি দেখতে পারবেন।</p> + +<div class="multiColumnList">{{ListSubpages("",1,0,1)}}</div> 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 +--- +<p><img alt="Image:rhino.jpg" class="internal" src="/@api/deki/files/832/=Rhino.jpg"></p> +<p><strong>Rhino</strong> <span id="result_box" lang="bn"><span class="hps">হল</span> <span class="hps">জাভায়</span> <span class="hps">সম্পূর্ণরূপে</span> <span class="hps">লিখিত</span> <span class="hps">জাভাস্ক্রিপ্ট</span> এর <span class="hps">একটি</span> <span class="hps">ওপেন-সোর্স</span> <span class="hps">বাস্তবায়ন। ব্যবহারকারীদের স্ক্রিপ্টিং করার জন্য সাধারণত জাভা </span></span><span id="result_box" lang="bn"><span class="hps">অ্যাপ্লিকেশনের মধ্যে</span> <span class="hps">এমবেড করা হয়</span></span><span id="result_box" lang="bn"><span class="hps alt-edited">। ইহা আবশ্যক জাভা স্ক্রিপ্টিং ইঞ্জিন হিসেবে J2SE ৬ এ এমবেডেড করা হয়। </span></span></p> +<h4 id="Rhino_downloads" name="Rhino_downloads">Rhino ডাউনলোড</h4> +<p><a class="internal" href="/en/RhinoDownload" title="en/RhinoDownload">সোর্স এবং বাইনারী</a> কিভাবে পাবেন</p> +<h4 id="Rhino_documentation" name="Rhino_documentation">Rhino ডকুমেন্টেশন</h4> +<p>স্কিপ্ট লেখক এবং এমবেডেডকারীদের জন্য <a href="/en/Rhino_documentation" title="en/Rhino_documentation">Rhino</a> এর তথ্য.</p> +<h4 id="Rhino_help" name="Rhino_help">Rhino সাহায্য</h4> +<p><a href="/en/Rhino/Community" title="en/Rhino/Community">কিছু রিসোর্স</a> যদি আপনি আটকে যান।</p> +<p>{{ languages( { "ja": "ja/Rhino" } ) }}</p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<div class="summary"><span class="seoSummary">ডেস্কটপ এবং মোবাইলে HTML, CSS এবং জাভাস্ক্রিপ্ট পরীক্ষা, সম্পাদন এবং ডিবাগ করুন</span></div> + +<div class="column-container zone-callout"><a href="https://www.mozilla.org/firefox/channel/#aurora" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">ফায়ারফক্স অরোরা ইন্সটল করুন</a> + +<h3 id="What's_new_in_Aurora.3F" name="What's_new_in_Aurora.3F">অরোরাতে নতুন কি আছে?</h3> + +<p>অরোরা হচ্ছে ফায়ারফক্সের প্রিভিউ বিল্ড, যেখানে আপনি যেকোনো নতুন ফিচার সর্বসাধারণের জন্য উন্মুক্ত করার আগেই ব্যবহারের সুযোগ পাবেন। বর্তমান অরোরাতে ডেভেলপার টুলসে নিচের আপডেট সমূহ রয়েছে:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Storage_Inspector">স্টোরেজ ইনস্পেক্টর: একটি নতুন টূল, যেটা আপনাকে ওয়েব পেজ সমূহের স্টোর করা ডাটা সমূহ দেখতে সহায়তা করবে</a></li> + <li><a href="/en-US/docs/Tools/Performance">পারফরম্যান্স টূল: উন্নত প্রফাইলার ইউজার ইন্টারফেস এবং ফ্রেমরেট টাইমলাইন</a></li> + <li><a href="/en-US/docs/tools/Working_with_iframes">ফ্রেম সুইচিং: পেজের মধ্যে একটি নির্দিষ্ট iframe এ ডেভেলপার টুলসকে কেন্দ্রীভূত করতে পারবেন</a></li> + <li><a href="/en-US/docs/Web/API/Console.table">console.table সমর্থন</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector#Examining_event_listeners">পেজ ইনস্পেক্টরের মধ্যে এখন jQuery ইভেন্ট দেখা যায়</a></li> + <li><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">টুলবক্সে নতুন প্যানেল যুক্ত করার জন্য এক্সটেনশন এপিআই।</a></li> +</ul> +</div> + +<div class="column-container zone-callout"><a href="http://mzl.la/devtools" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">আপনার আইডিয়া শেয়ার করুন</a> + +<h3 id="Share_your_ideas" name="Share_your_ideas">আপনার আইডিয়া শেয়ার করুন</h3> + +<p>ডেভেলপার টুলসে নতুন ফিচারের জন্য অনুরোধ করুন অথবা অন্যান্য ডেভেলপারের আবেদন করা আইডিয়ার জন্য ভোট করুন।</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7307/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Creating" name="Creating">তৈরি করা</h2> + +<p>ওয়েবসাইট এবং ওয়েব অ্যাপ এর জন্য অথরিং টুলস।</p> + +<dl> + <dt><a href="/en-US/docs/Tools/Scratchpad">স্ক্র্যাচপ্যাড</a></dt> + <dd>ফায়ারফক্স এর ভেতরে একটি টেক্সট এডিটর দেয়া আছে যা আপনাকে জাভাস্ক্রিপ্ট লিখতে এবং এক্সিকিউট করতে দেয়।</dd> + <dt><a href="/en-US/docs/Tools/Style_Editor">স্টাইল এডিটর</a></dt> + <dd>বর্তমান পেজ এর CSS স্টাইল দেখুন এবং এডিট করুন।</dd> + <dt><a href="/en-US/docs/Tools/Shader_Editor">শেডার এডিটর</a></dt> + <dd>WebGL এর ব্যবহার করা ফ্র্যাগমেন্ট শেডার সহ সবকিছু দেখুন এবং সম্পাদনা করুন</dd> + <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">ওয়েব অডিও এডিটর</a></dt> + <dd>একটি অডিও কনটেক্সটে অডিও নোডের গ্রাফ পরীক্ষা করুন এবং তাদের প্যারামিটার পরিবর্তন করুন।</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Exploring" name="Exploring">এক্সপ্লোর ও ডিবাগ করুন </h2> + +<p>Examine, explore, and debug websites and web apps.</p> + +<dl> + <dt><a href="/en-US/docs/Tools/Web_Console">Web Console</a></dt> + <dd>See messages logged a web page, and interact with the page using JavaScript.</dd> + <dt>পেজ ইন্সপেক্টর</dt> + <dd>এইচটিএমএল , সিএসএস দেখতে এবং সম্পাদন করতে সহায়তা করে</dd> + <dt><a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></dt> + <dd>Stop, step through, examine and modify the JavaScript running in a page.</dd> + <dt><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></dt> + <dd>See the network requests made when a page is loaded.</dd> + <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt> + <dd>Inspect cookies, local storage, indexedDB and session storage present in a page.</dd> + <dt><a href="/en-US/docs/Tools/GCLI">Developer Toolbar</a></dt> + <dd>A command-line interface for the developer tools.</dd> + <dt><a href="/en-US/docs/Tools/3D_View">3D View</a></dt> + <dd>3D visualization of the page.</dd> + <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> + <dd>Select a color from the page.</dd> + <dt><a href="/en-US/docs/Tools/Working_with_iframes">Working with iframes</a></dt> + <dd>How to target a particular iframe.</dd> +</dl> +</div> +</div> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h2 id="Mobile" name="Mobile">মোবাইল</h2> + +<p>মোবাইল ডেভেলপ করার টুলস সমূহ.</p> + +<dl> + <dt>অ্যাপ ম্যানেজার</dt> + <dd>ফায়ারফক্স ওএস অ্যাপ ডিজাইন এবং ডেভেলপ।</dd> + <dt><a href="/en-US/docs/Tools/WebIDE">WebIDE</a></dt> + <dd>অ্যাাপ ম্যানেজারের প্রতিস্তাপক যা ফায়ারফক্স ৩৩ ভার্সন থেকে শুরু হয়েছে।</dd> + <dt><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></dt> + <dd>Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.</dd> + <dt><a href="/en-us/docs/Tools/Responsive_Design_View">Responsive Design View</a></dt> + <dd>See how your website or app will look on different screen sizes without changing the size of your browser window.</dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Debugging on Firefox for Android</a></dt> + <dd>Connect the developer tools to Firefox for Android.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Performance" name="Performance">Performance</h2> + +<p>Diagnose and fix performance problems.</p> + +<dl> + <dt><a href="/en-US/docs/Tools/Performance">Performance tool</a></dt> + <dd>Revamped JS profiler and frame rate timeline.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a></dt> + <dd>Figure out where your JavaScript code is spending its time.</dd> + <dt><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt> + <dd>Highlights the parts of the page that are repainted in response to events.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console#Reflow_events">Reflow Event Logging</a></dt> + <dd>See reflow events in the web console.</dd> + <dt><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt> + <dd>See how long the parts of your site take to load.</dd> +</dl> +</div> +</div> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h2 id="Debugging_the_browser" name="Debugging_the_browser">Debugging the browser</h2> + +<p>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.</p> + +<dl> + <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt> + <dd>See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.</dd> + <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> + <dd>Attach the Developer Tools to the browser itself.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Extending_the_devtools" name="Extending_the_devtools">Extending the devtools</h2> + +<p>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.</p> + +<dl> + <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt> + <dd>The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.</dd> + <dt><a href="/en-US/docs/Tools/Editor">Source Editor</a></dt> + <dd>A code editor built into Firefox that can be embedded in your add-on.</dd> + <dt><a href="/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt> + <dd>How to extend and customize the output of the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> and the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="More_resources" name="More_resources">More resources</h2> + +<p>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 <a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/">“Web Development” category on addons.mozilla.org</a>.</p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="https://www.getfirebug.com/">Firebug</a></dt> + <dd>A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.</dd> + <dt><a href="/en-US/docs/DOM_Inspector">DOM Inspector</a></dt> + <dd>Inspect, browse, and edit the DOM of web pages or XUL windows.</dd> + <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a></dt> + <dd>Adds a menu and a toolbar to the browser with various web developer tools.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="https://webmaker.org/en-US/tools/">Webmaker Tools</a></dt> + <dd>A set of tools developed by Mozilla, aimed at people getting started with Web development.</dd> + <dt><a href="http://www.w3.org/Status.html">W3C Validators</a></dt> + <dd>The W3C website hosts a number of tools to check the validity of your website, including its <a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> and <a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd> + <dt><a href="http://www.jshint.com/">JSHint</a></dt> + <dd>JavaScript code analysis tool.</dd> +</dl> +</div> +</div> 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 +--- +<div>{{ToolsSidebar}}</div><p>যে কোন পেজের গঠন ও লেআউট পরীক্ষা বা সংস্কারের জন্য ইন্সপেক্টর ব্যবহার করুন। </p> + +<h2 id="ইন্সপেক্টর_ওপেন_করা">ইন্সপেক্টর ওপেন করা</h2> + +<p>ইন্সপেক্টর ওপেন করার বেশ কিছু উপায় আছেঃ</p> + +<ul> + <li>'ওয়েব ডেভলপার' মেনু থেকে 'ইন্সপেক্টর' অপশনটি choose করুন (Mac এর 'টূলস্' মেনুতে এটি একটি সাবমেনু)</li> + <li>Ctrl-Shift-C চাপুন (ম্যাক OS X ও লিনাক্সে Cmd-Option-C )</li> + <li>ওয়েব পেজের যে কোন একটি এলিমেন্টে রাইট-ক্লিক করুন এবং 'ইন্সপেক্ট এলিমেন্ট' সিলেক্ট করুন</li> +</ul> + +<p>ইন্সপক্টর এক্টিভেট করার সাথে সাথে ব্রাউজার উইন্ডোর উপরে <a href="/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> দেখা যাবে।</p> + +<p>আপনি যদি 'ইন্সপেক্টর এলিমেন্ট' এ ক্লিক করে ইন্সপেক্টর invoke করে থাকেন তাহলে এলিমেন্ট এরই মধ্যে সিলেক্ট হয়ে থাকবে এবং ইন্সপেক্টরটি নিম্নবণিতভাবে কাজ করবে যেভাবে এটি <a href="#Selecting-Elements" title="#Selecting-Elements">'সিলেক্টিং এলিমেন্টস্'</a> এ কাজ করে।</p> + +<p>যদি তা না হয়ে থাকে তাহলে আপনি যখন আপনার মাউস পেজটিতে ঘুরাবেন তখন মাউসের নিচের এলিমেন্ট dotted বডার দিয়ে হাইলাইট হয়ে যাবে এবং একটি অ্যানোটেশন এটির HTML ট্যাগ ডিসপ্লে করবে। একই সাথে, এর HTML ডেফিনেশনও ইন্সপেক্টরের বাঁ দিকের pane কন্টেক্সটে ডিসপ্লে হয়ে যাবে।</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5323/inspector-no-element-selected.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>এলিমেন্টের উপর ক্লিক করলে তা সিলেক্ট হয়ঃ আপনি একটি এলিমেন্ট সিলেক্ট করে থাকলে ইন্সপেক্টরটি নিচের মত দেখাবে ও কাজ করবে সেভাবে যেভাবে তা নিচের <a href="#Selecting-Elements" title="#Selecting-Elements">"সিলেক্টিং এলিমেন্টস্"</a> এ কাজ কড়ে।</p> + +<h2 id="এলিমেন্ট_সিলেক্ট_করা"><a name="Selecting-Elements">এলিমেন্ট সিলেক্ট করা</a></h2> + +<p>যখন একটি এলিমেন্ট সিলেক্ট করা হয় তখন তার মার্কআপ ইন্সপেক্টরের বাঁ দিকে HTML paneএ হায়লাইট হয়ে যায় এবং ইন্সপেক্টরের ডান CSS pane এর স্টাইল ইনফরমেশন শো করেঃ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6919/inspector-annotated3.png" style="display: block; margin-left: auto; margin-right: auto;">এভাবেই এলিমেন্ট সিলেকশনের বিভিন্ন কাজ উল্লেখযোগ্যভাবে পরিবর্তিত হ্য ফায়ারফক্স 29এ।</p> + +<h3 id="ফায়ারফক্স_29_এর_আগে">ফায়ারফক্স 29 এর আগে</h3> + +<p>আপনি যখন একবার কোন পেজে একটি এলিমেন্টে ক্লিক করে এটি সিলেক্ট করেন তখনই ইন্সপেক্টর'স ডিসপ্লে সেই এলিমেন্টে লক হয়ে যায়। সেজন্য আপনি অন্য কোন ইন্সপেক্টর না চালু করেই মাউস ঘোরাতে পারেন।</p> + +<p>এলিমেন্টের জন্য নির্ধারিত annotationটির ডানদিকে ও বাঁদিকে একটি করে বাটন থাকে। বাঁ দিকের বাটনটি আপনাকে নতুন এলিমেন্ট সিলেক্ট করার সুযোগ দিয়ে পুরনো এলিমেন্ট আনলক করে। ডানদিকের বাটনটি এলিমেন্টটির জন্য একটি <a href="/en-US/docs/Tools/Page_Inspector#Element_popup_menu">পপআপ মেনু</a> ডিসপ্লে করে।</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6921/inspector-element-annotation.png" style="display: block; height: 167px; margin-left: auto; margin-right: auto; width: 389px;"></p> + +<h3 id="ফায়ারফক্স_29_ও_তার_পর">ফায়ারফক্স 29 ও তার পর</h3> + +<p>ফায়ারফক্স 29 থেকে পেজের কোন এলিমেন্টের সিলেক্ট করলে এর চারদিকের ডট দেওয়া বর্ডার এবং এর জন্য নির্ধারিত অনোটেশন দেখানো হয় না। এমনকি এলিমেন্ট সিলেক্ট করার সাথে সাথে ইন্সপেক্টরগুলোও লক হয়ে যায় না। আপনি যখন মারকাপ পেন এর চারদিকে মাউসটি মুভ করেন তখন কোরেস্পন্ডিঙ এলিমেন্টের চারদিকে ডট দেওয়া বর্ডার দেখা জায়।অয়েব পেজের কোন ভিনণ এলিমেন্ট সিলেক্ট করার জন্য "Select element" বাটনটি ক্লিক করুন, যা এখন <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox toolbar</a> দেখা যায়ঃ</p> + +<p>{{EmbedYouTube("zBYEg40ByCM")}}</p> + +<h2 id="এলিমেন্ট_পপআপমেনু"><a name="Element_popup_menu">এলিমেন্ট পপআপমেনু </a></h2> + +<div class="geckoVersionNote"> +<p>ফায়ারফক্স 29 থেকে পরবর্তীতে ওয়েব পেজের অটোনেশন আর দেখা জায় না। তাই শুধুমাত্র HTML পেন এ কনট্যাক্স-ক্লিকিন এর মাধ্যমে পপআপ মেনু ওপেন করতে পারেন</p> +</div> + +<p>পপআপ মেনু ব্যবহার করে আপনি যে কোন নির্দিষ্ট ক্ষেত্রে বেশ কিছু সাধারণ কাজ করতে পাড়েন। আপনি দুইভাবে মেনুটি এক্টিভেট করতে পারেনঃ</p> + +<ul> + <li>ওয়েব পেজের এলিমেন্টে সংযুক্ত অ্যানোটেশনের ডানদিকের বাটনে ক্লিক করুনঃ</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6347/inspector-element-selected-context-menu-cropped.png" style="display: block; height: 291px; margin-left: auto; margin-right: auto; width: 399px;"></p> + +<ul> + <li>কন্টেক্সট - <a href="#HTML_pane">HTML pane</a> র এলিমেন্টে ক্লিক করুনঃ</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6349/inspector-html-context-menu.png" style="display: block; height: 299px; margin-left: auto; margin-right: auto; width: 399px;"></p> + +<p>মেনুটি আপনাকে যা যা করতে সুযোগ দেয়ঃ</p> + +<ul> + <li><a href="#Editing_HTML">এলিমেন্টের HTML এডিট করা</a> (শুধুমাত্র ফায়ারফক্স 27 থেকে পরবর্তী)</li> + <li> ইনার অথবা আউটার HTML কপি করা</li> + <li> CSS সিলেক্টর কপি করা যা নিজে থেকে এলিমেন্ট সিলএক্ট করে</li> + <li>এলিমেন্ট ডিলেট করা</li> + <li><a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover">:hover</a>, <a href="/en-US/docs/Web/CSS/:focus" title="/en-US/docs/Web/CSS/:focus">:focus</a> এবং <a href="/en-US/docs/Web/CSS/:active" title="/en-US/docs/Web/CSS/:active">:active</a> CSS সিউডো-ক্লাসগুলো সেট করা</li> +</ul> + +<h3 id="ডাটা_URL_হিসাবে_ইমেজ_কপি_করা">ডাটা URL হিসাবে ইমেজ কপি করা</h3> + +<div class="geckoVersionNote"> +<p>ডাটা URL হিসাবে কপি করা ফায়ারফক্স 29এ নতুন।</p> +</div> + +<p>ফায়ারফক্স 29 থেকে পরবর্তীতে, যদি currently selected এলিমেন্টটি কোন ইমেজ হয় তাহলে পপআপ মেনুতে একটি অপশন থাকে ডাটা ইউ আর এল হিসাবে ক্লিপবোর্ডে ইমেজ কপি করার জন্যঃ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7011/inspector-copyasdatauri.png" style="display: block; height: 282px; margin-left: auto; margin-right: auto; width: 529px;"></p> + +<h3 id="HTML_এডিট_করা"><a name="Editing_HTML">HTML এডিট করা</a></h3> + +<div class="geckoVersionNote"> +<p>HTML এডিট করা শুধুমাত্র ফায়ারফক্স 27 এই সহজলভ্য।</p> +</div> + +<p>কোন এলিমেন্টের <a href="/en-US/docs/Web/API/Element.outerHTML">আউটারHTML</a> এডিট করার জন্য এলিমেন্টের পপআপ মেনু এক্টিভেট করে সিলেক্ট করুন "Edit As HTML"। আপনি HTML paneএ একটি টেক্সট-বক্স দেখবেনঃ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6351/inspector-html-edit-html.png" style="display: block; margin-left: auto; margin-right: auto;">আপনি যে কোন HTML এখানে সংযোগ করতে পারবেনঃ এলিমেন্টের ট্যাগ পরিবর্তন করা, existing এলিমেন্ট পরিবর্তন করা আথবা নতুন কোন এলিমেন্ট সংযোগ করা। বক্সের বাইরে ক্লিক করার সাথে সাথে আপনার করা পরিবর্তনগুলো পেজটিতে অ্যাপ্লাই হয়ে যাবে।</p> + +<h2 id="HTML_পেন"><a name="HTML_pane">HTML পেন</a></h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5459/inspector-html-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"> HTML পেন আপনাকে পেজটির HTML একটি গাছের আকারে দেখায় এটির শাখাগুলো collapsible. নির্ধারিত এলিমেন্টগুলোর শুরুর এবং শেষের ট্যাগগুলো ধূসর পটভূমিতে হাইলাইট করা হয়।</p> + +<p>আপনি এই পেনে সরাসরি এডিট করতে পারেন - বিভিন্ন ট্যাগ, অ্যাট্রিবিউটস এবং কন্টেন্টসঃ আপনি যেই এলিমেন্ট এডিট করতে চান তা পরিবর্তন করুন এবং পরিবর্তনগুলো সাথে সাথে দেখতে Enter ক্লিক করুন।</p> + +<p>কোন এলিমেন্টে কন্টেক্স-কিল্ক করলে তা ডিসপ্লে করে একটি <a href="#Element_popup_menu">পপআপ মেনু সেই এলিমেন্টে কাজ করার জন্য</a>।</p> + +<h3 id="HTML_পেন_টুলবার">HTML পেন টুলবার</h3> + +<h3 id="এই_পেইন_টির_উপরে_একটি_ডেডিকেটেড_টুলবার_তিনটি_অংশে_ভাগ_হয়ে_আছেঃ">এই পেইন টির উপরে একটি ডেডিকেটেড টুলবার তিনটি অংশে ভাগ হয়ে আছেঃ</h3> + +<div class="geckoVersionNote"> +<p>ফায়ারফক্স 29 থেকে পরবর্তীতে "Select element" বাটনটি <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox </a>এ মুভ করা হয়েছে।</p> +</div> + +<ul> + <li><em>এলিমেন্ট সিলেক্ট করাঃ </em>এই বাটনটি ক্লিক করলে,আপনি ব্রাউজার উইন্ডোতে শুধুমাত্র মাউস ঘুরিয়ে বিভিন্ন এলিমেন্ট সিলেক্ট করতে পারবেন।</li> + <li><em>HTML ব্রেড ক্রাম্বস্ঃ যেই ব্রাঞ্চের আওতায় নির্ধারিত এলিমেন্টটি আছে তার সমস্ত </em>hierarchy<em> </em>এটি দেখায়। আপনি যদি বারে কোন এলিমেন্ট ক্লিক করে ধরে থাকেন তাহলে একটি পপআপ মেনু দেখা যাবে যা আপনাকে একটি এলিমেন্টের অংশ সিলেক্ট করার সুযোগ দেয়। বারের বামদিকের ও ডানদিকের শেষের কোণার ছোট তীর চিহ্ণিত আইকনটি ক্লিক করলে সেটি বারটিকে স্ক্রল করবে যদি সেটি স্ক্রিনের থেকেও বড় হয়ে থাকে।</li> + <li><em>ট্যাগ খোঁজাঃ </em>আপনি যে ট্যাগের জন্য টাইপ করেন তা খুঁজুন এখানে। "Enter" প্রেস করে পরবর্তী অকারেন্স খুঁজে পাবেন।</li> +</ul> + +<h2 id="CSS_পেন">CSS পেন</h2> + +<p>CSS পেন কারেন্টলি সিলেক্টেড এলিমেন্টে ব্যবহৃত স্টাইলের তথ্য প্রদর্শন করে। চারটি ভিন্ন ভিন্ন ভিউ আছে এখানেঃ "রুলস্", "কম্পিউটেড", "ফন্টস" এবং "বক্স মডেল"। পেনের সর্ব উপরের টুলবারটি ব্যবহার করে আপনি তাদের মধ্যে সুইচ করতে পারেনঃ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5463/inspector-css-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="রুলস্_ভিউ">রুলস্ ভিউ</h3> + +<p>নির্ধারিত এলিমেন্টে ব্যবহৃত সব রুলস তালিকাবদ্ধ রাখে এই ভিউটি, বিশেষায়িত এর হ্রাসক্রম ভিত্তিতেঃ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5467/inspector-css-rules.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>রুলস ভিউ <a href="/en-US/docs/Web/CSS/Pseudo-elements">সিউডো-এলিমেন্টস</a> এবং ব্যবহৃত রুলস তালিকাবদ্ধ করে।</p> + +<h4 id="রুল_ডিসপ্লে">রুল ডিসপ্লে</h4> + +<p>এটি একটি স্টাইলশীটে প্রত্যেকটি রুল ডিসপ্লে করে, সেক্টর এর একটি লিস্টসহ <code>property:value;</code> ডিকলারেশনের লিস্ট ও থাকে।</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5659/inspector-css-rules-singlerule-annotated.png" style="display: block; height: 206px; margin-left: auto; margin-right: auto; width: 544px;">যেসব রুল অন্য রুলের বিপক্ষে যায় সেগুলো কেটে দেওয়া হয়েছে। কোন নির্দেশনার উপরে মাউস রাখলে এটির নিচে একটি চেকবক্স দেখা যাবেঃকোন রুল চালু বা বন্ধ করতে আপনি এটি ব্যবহার করতে পারেন।</p> + +<h4 id="CSS_ফাইলের_লিঙ্ক">CSS ফাইলের লিঙ্ক</h4> + +<p>প্রতিটি রুলের উপরে ডান দিকে ফাইলনেম সোর্স এবং লাইন নাম্বার লিঙ্ক হিসাবে দেখানো হয়ঃ ক্লিক করলে <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">স্টাইল এডিটর</a> থেকে এটি ওপেন হয়ে যাবে।</p> + +<p>ফায়ারফক্স 29 থেকে পরবর্তীতে ইন্সপেক্টর CSS সোর্স ম্যাপ বোঝে। এর মানে হল আপনি যদি CSS প্রিপ্রসেসর ব্যবহার করেন যার সোর্স ম্যাপ সাপোর্ট আছে এবং তা আপনি <a href="/en-US/docs/Tools_Toolbox#Style_Editor">স্টাইল এডিটর সেটিং</a> এ সক্রিয় করেছেন তাহলে লিঙ্কটি আপনাকে প্রকৃত সোরসে নিয়ে যাবে, জেনারেটেড CSS নয়ঃ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6947/inspector-css-sourcemap-detail.png" style="display: block; height: 133px; margin-left: auto; margin-right: auto; width: 390px;"></p> + +<p>CSS সোর্স ম্যাপ সাপোর্ট সম্পর্কে আরো জানুন <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">স্টাইল এডিটর ডকুমেন্টেশন</a> এ।</p> + +<h4 id="রঙ_নমুনা">রঙ নমুনা</h4> + +<div class="geckoVersionNote"> +<p>ফায়ারফক্স 27 থেকে পরবর্তীতে, আপনি কালার ভেল্যুর পরে দৃশ্যমান একটি রঙ নমুনা দেখতে পাবেনঃ</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p> + +<h4 id="কালার_পিকার">কালার পিকার</h4> + +<div class="geckoVersionNote"> +<p>ফায়ারফক্স 28 থেকে পরবর্তীতে, আপনি রঙ নমুনাতে (color sample) ক্লিক করলে রঙ পরিবর্তন করার জন্য একটি কালার পিকার দেখতে পাবেনঃ</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6659/inspector-color-picker.png" style="display: block; height: 321px; margin-left: auto; margin-right: auto; width: 411px;"></p> + +<h4 id="পটভূমি-দৃশ্য_পূর্ব_পরিদর্শন">পটভূমি-দৃশ্য পূর্ব পরিদর্শন</h4> + +<div class="geckoVersionNote"> +<p>ফায়ারফক্স 27 থেকে পরবর্তীতে, রুলের উপর মাউস ঘোরালে আপনি <a href="/en-US/docs/Web/CSS/background-image">ব্যাকগ্রাউন্ড-ইমেজ বা পটভূমি-দৃশ্য </a> নামে বিভিন্ন ইমেজের বিশেষ ব্যবহৃত একটি প্রিভিউ দেখতে পাবেনঃ</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6413/inspector-background-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 id="ভিজুয়ালাইজেশন_পরিবর্তন">ভিজুয়ালাইজেশন পরিবর্তন</h4> + +<div class="geckoVersionNote"> +<p>ফায়ারফক্স 29এ এটি নতুন।</p> +</div> + +<p>ফায়ারফক্স 29 থেকে পরবর্তী ক্ষেত্রে আপনি রুলস রিভিউতে কোন <a href="/en-US/docs/Web/CSS/transform"><code>ট্রান্সফরম</code></a> প্রপার্টিতে হোভার করলে,আপনি একটি টুলটিপ পাবেন যা আপনাকে দেখাবে এটি যা যা পরিবর্তন করে।</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7133/transform-tooltip.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 id="এডিট_করার_নিয়মাবলী">এডিট করার নিয়মাবলী</h4> + +<p>আপনি যদি কোন দিক্লারেশ্নে ক্লিক করেন তবে আপনি তার বৈশিষ্ট্যাবলী বা মান সংস্কার করতে পারবেন এবং সাথে সাথেই তা দেখতে পাবেন। একটি রুলে নতুন ডিকলারেশন যুক্ত করার জন্য ক্লিক করুন রুলের সর্বশেষ লাইনটিতে (শেষ বন্ধনী দিয়ে অধিকৃত লাইনটি)। সংস্কার করার সময় যদি আপনি অপ্রচলিত মান বা কোন অজানা বৈশিষ্টের নাম প্রবেশ করান, তবে ডিকলারেশনের নিচে একটি হলুদ সতর্ক সংকেত দেখা যাবে।</p> + +<p>আপনার করা যে কোন পরিবর্তনই ক্ষণস্থায়ীঃ পেজটি পুনরায় লোড করলে প্রকৃত স্টাইল রিস্টোর হয়ে যাবে।</p> + +<p><strong>Tip:</strong> 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.</p> + +<h3 id="কম্পিউটেড_ভিউ">কম্পিউটেড ভিউ</h3> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5473/inspector-css-computed.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5665/inspector-css-computed-show-rule.png" style="display: block; margin-left: auto; margin-right: auto;">By default, it only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box.</p> + +<p>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.</p> + +<h3 id="ফন্টস্_ভিউ">ফন্টস্ ভিউ</h3> + +<p>সিলেক্টেড এলিমেন্ট অনুযায়ী প্রয়োজনীয় সব ফন্ট দেখায় এটি। মনে রাখবেন, আপনি আপনার সিস্টেমে যে ফন্ট ব্যবহার করেন তাও দেখায় এটি, css এ যে ফন্ট নির্ধারণ করা আছে, তার থেকে এটি আলাদা হতে পারেঃ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5469/inspector-css-fonts.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>ফন্ট ভিউতে টেক্সট ভিউ হল "Abc" ডিফল্ট অনুসারে কিন্তু আসলে এটি একটি টেক্সট এরিয়া যা পড়্যোজন মত পরিবর্তন করা যেতে পারে।</p> + +<h3 id="বক্স_মডেল_ভিউ">বক্স মডেল ভিউ</h3> + +<p>নির্দিষ্ট এই এলিমেন্টে অ্যাপ্লাই করলে এটি <a href="/en-US/docs/Web/CSS/box_model" title="/en-US/docs/Web/CSS/box_model">বক্স মডেল</a> এর একটি গ্রাফিকাল representation দেখায়ঃ</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5667/inspector-css-box-model.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<ul> + <li>At the top-left is the total space taken by the element on the page.</li> + <li>The outside numbers tell you the margin size on each side of the element.</li> + <li>The numbers in squares on the borders tell you how wide each side's border is.</li> + <li>The next layer in shows the padding size on each side of the element.</li> + <li>Finally, in the center, is the size of the element's content.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5671/inspector-css-box-model-annotated.png" style="display: block; height: 435px; margin-left: auto; margin-right: auto; width: 680px;"></p> + +<h2 id="ওয়েব_কনসোল_এর_সাহায্যে_পেজ_ইন্সপেক্টর_ব্যবহার_করা"> ওয়েব কনসোল এর সাহায্যে পেজ ইন্সপেক্টর ব্যবহার করা</h2> + +<p>ওয়েব কনসোলকে আপনি পেজ ইন্সপেক্টর হিসাবেও ব্যবহার করতে পারেন। এমনকি আপনি একটি বোনাস ফিচার ও পIবেন! আপনি যদি পেজ ইন্সপেক্টরে কোন এলিমেন্ট সিলেক্ট করে থাকেন তবে তাও variable <code>$0</code>. ব্যবহার করে ওয়েব কনসোলের জাভাস্ক্রিপ্টে পাঠানো যাবে।<br> + </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5461/inspector-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="ডেভলপার_API">ডেভলপার API</h2> + +<p>ফায়ারফক্স এডঅনস্ এই কন্টেক্স chrome://browser/content/devtools/inspector/inspector.xul থেকে নিচের বিভিন্ন অবযেক্টে প্রবেশ করতে পারেঃ</p> + +<h3 id="উইন্ডো.ইন্সপেক্টর">উইন্ডো.ইন্সপেক্টর</h3> + +<p><a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js">ইন্সপেক্টর-পেনেল.js</a> এ আলোচিত। বিভিন্ন এট্রিবিউটস্ এবং ফানশনঃ</p> + +<ul> + <li>.নির্ধারণ - ইন্সপেক্টর সেকশন সম্পর্কিত তথ্যঃ + <ul> + <li>.isNode() - returns true if selection is node.</li> + <li>.node - returns the actual element from the page</li> + <li>.window - the window object of the frame the selection is in.</li> + </ul> + </li> + <li>.markDirty() - marks that the page has been changed by the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on reload.</li> +</ul> + +<p>Bindable events using on:</p> + +<h4 id="মার্কআপ_লোডেড">মার্কআপ লোডেড</h4> + +<p>বামদিকের পেনেল রিফ্রেশ করার পর যখন পেজ পরিবর্তন কার হয় তখন এর প্রয়োজন হয়।</p> + +<h4 id="ready">ready</h4> + +<p>প্রথম মার্কআপ লোডে দরকার হয়।</p> + +<h4 id="সিউডোক্লাস">সিউডোক্লাস</h4> + +<p>Called after toggle of a pseudoclass.</p> + +<h4 id="লে-আউট_পরিবর্তন">লে-আউট পরিবর্তন</h4> + +<p>"paint and resize এর মত কম গুরুত্বপূর্ণ পরিবর্তন ইভেন্ট।"</p> + +<h2 id="কীবোর্ড_শর্টকাটস">কীবোর্ড শর্টকাটস</h2> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p> + +<h3 id="গ্লোবাল_শর্ট-কাটস">গ্লোবাল শর্ট-কাটস</h3> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> + +<p>{{ languages( { "ja": "ja/Tools/Page_Inspector"} ) }}</p> 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 +--- +<div>{{ToolsSidebar}}</div><p>স্টাইল সীট এডিটর আপনাকে সক্ষম করবে ঃ</p> + +<ul> + <li>পেজ এর সাথে যুক্ত স্টাইলসীট দেখতে এবং এডিট করতে </li> + <li>scratch থেকে নতুন স্টাইলসীট তৈরি করতে এবং পেজ তা ব্যবহার করতে</li> + <li>তৈরিক্রিত স্টাইলসীট নিয়ে আসতে এবং পেজ এ তা ব্যবহার করতে</li> +</ul> + +<p><img alt="IFrame" style="height: 1px; width: 1px;"></p> + +<p>স্টাইল এডিটর খুলতে হলে "Web developer" মেনু থেকে "Style Editor" বাছাই করতে হবে( যা Mac এর "Tools" মেনু এর সাবমেনু)।স্টাইল এডিটর সক্রিয় হউয়ার সাথে সাথে<a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window"> ,Toolbox</a> ব্রাউজার এর পাদদেশ দৃশ্যমান হবে:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>স্টাইল এডিটর প্রধান দুই ভাগ এ বিভক্ত : বামপাশ এর স্টাইল সীট প্যান , এবং ডানপাশ এর এডিটর।</p> + +<h2 id="স্টাইল_সীট_প্যান"><strong>স্টাইল সীট প্যান</strong></h2> + +<p>বামপাশ এর স্টাইল সীট, বর্তমান ডকুমেন্ট এর ব্যবহৃত স্টাইলসীট এর তালিকা দিবে।সীট এর নাম এর বামপাশ দেওয়া eyeball আইকন এ ক্লিক করার মাধ্যমে আপনি দ্রুত গিভেন সীট ব্যবহার এর অন এবং অফ এ toggle করতে পারবেন।লিস্ট এ থাকা প্রত্যেক সীট এর কোণার নীচের অংশের ডানদিকে অবস্থিত সেভ বাটন এ ক্লিক করে আপনি আপনার স্টাইল সীট এর যেকোনো পরিবর্তন আপনার লোকাল কম্পিউটার এ সেভ করতে পারবেন।</p> + +<h2 id="এডিটর_প্যান"><strong>এডিটর প্যান</strong></h2> + +<p>ডানপাশ এর অংশ টি হচ্ছে এডিটর প্যান। এখানে আপনার জন্য নির্বাচিত কয়েকটি স্টাইল সীট এর সোর্স পড়তে এবং এডিট করতে দেওয়া আছে । পেজ এর যেকোনো পরিবর্তন এটিতে অবিলম্বে কাজ করবে। এটি পরীক্ষা করতে,পরিবর্তন করতে এবং সংশোধন করতে সহজ করে তোলে। আপনি যখন আপনার পরিবর্তন নিয়ে সন্তুষ্ট হবেন, তখন স্টাইল সীট প্যান এর এন্ট্রিতে যে সেভ বাটন আছে তাতে ক্লিক করে একটি কপি লোকাল হিসেবে সেভ করতে পারবেন। </p> + +<p>এডিটর আপনার CSS কে সহজ ভাবে পরার জন্য লাইন সংখ্যা এবং syntax hightiliting দিয়ে থাকে।এতে কয়েকটি <a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#Source_editor_shortcuts">keyboard shortcuts</a> ও সাপোর্ট করে।</p> + +<p> স্টাইল এডিটর অরিজিনাল টি কে পরিবর্তন না করে,সক্রিয় ভাবে de-minimize করে।এটি খুব অনুকুলে সহজ ভাবে পেজে কাজ করতে সাহায্য করে।</p> + +<h2 id="অটোকমপ্লিট"><strong>অটোকমপ্লিট </strong></h2> + +<h4 id="অটোকমপ্লিট_ফায়ারফক্স_২৯_এ_নতুন">অটোকমপ্লিট ফায়ারফক্স ২৯ এ নতুন</h4> + +<p>ফায়ারফক্স ২৯ হতে,স্টাইল এডিটর অটোকমপ্লিট সমর্থন করে।টাইপ শুরু করলে ইহা সাজেশন প্রস্তাব করে।</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">আপনি এটি <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a> এ বন্দধ করে দিতে পারবেন</p> + +<h3 id="স্টাইলসীট_তৈরি_করা_এবং_আমদানি_করা"><strong>স্টাইলসীট তৈরি করা এবং আমদানি করা</strong></h3> + +<p>টুলবার এর নিউ বাটন এ ক্লিক করে আপনি নতুন স্টাইল সীট তৈরি করতে পারবেন।এরপর আপনি নতুন এডিটর এ CSS দেয়ার মাধ্যমে শুরু করতে পারেন এবং নতুন স্টাইল যা ব্যবহার করেছেন তা দেখতে পারবেন অন্যান্য সীট এর মত সরাসরি।</p> + +<p>আপনি ডিস্ক থেকে স্টাইল সীট লোড করতে পারবেন এবং ইম্পোর্ট বাটন এ ক্লিক করে পেজ এ ব্যবহার করতে পারবেন।</p> + +<h3 id="সোর্স_ম্যাপ_সাপোর্ট"><strong>সোর্স ম্যাপ সাপোর্ট</strong></h3> + +<div class="geckoVersionNote"> +<p>CSS সোর্স ম্যাপ সাপোর্ট ফায়ারফক্স ২৯ এ নতুন বৈশিষ্ট্</p> +</div> + +<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p> + +<p>প্রি প্রসেসর যেমন <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, অথবা <a href="http://learnboost.github.io/stylus/">Stylus</a> ব্যবহার করে ওয়েব ডেভেলপাররা প্রায়ই CSS ফাইল তৈরী করে।এই টুল আরও গরীয়ান এবং অভিবাক্তপূর্ণ শব্দবিন্যাস থেকে CSS ফাইল তৈরী করতে সাহায্য করে। আপনি যদি এটি করেন তাহলে দেখতে পাবেন যে,তৈরীক্রিত CSS দেখতে পাওয়া এবং এডিট করা তেমন সুবিধা জনক না,কারন যে কোড আপনি ধারন করছেন তা প্রি প্রসেসর শব্দবিন্যাস,আপনার তৈরীক্রিত নয়। তাই আপনাকে তৈরীক্রিত CSS এডিট করতে হবে তারসাথে এটি পুনরাই অরিজিনাল সোর্স এ মানুয়াল্-ই কাজ করাতে হবে।</p> + +<p>সোর্স ম্যাপ টুল গুলো আপনাকে তৈরীক্রিত CSS থেকে অরিজিনাল শব্দবিন্যাস এ ফিরিয়ে আনতে সাহায্য করে,যাতে তাদের দেখা যায় এবং অরিজিনাল শব্দবিন্যাস এর ফাইল গুলো কে আপনি এডিট করতে পারেন।ফায়ারফক্স ২৯ স্টাইল এডিটর CSS সোর্স ম্যাপ ধরতে পারে।</p> + +<p>এটার মানে এই যে,ধরুন আপনি Sass দিলেন তাহলে স্টাইল এডিটর আপনাকে Sass ফাইল দেখাবে এবং এডিট করতে দিবে,তাদের তৈরী CSS নয় :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>এইটা কাজ করানোর জন্য আপনার উচিত :</p> + +<ul> + <li>CSS প্রসেসর ব্যবহার করতে হবে যা <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Source Map Revision 3 proposal</a> বুঝতে পারে। বর্তমানে এটা <a href="http://davidwalsh.name/future-sass">3.3.0 prerelease version of Sass</a> অথবা <a href="http://roots.io/using-less-source-maps/">1.5.0 version of Less </a>কে বুঝায়।অন্যান্য প্রি প্রসেসর সরাসরি ভাবে এটাকে সাপোর্ট করতে বা ধরতে কাজ করছে।</li> + <li>আসলে প্রসেসর কে সোর্স ম্যাপ তৈরী করতে নির্দেশ দিতে হবে, যেমন --sourcemap আর্গুমেন্ট টি Sass কমান্ড-লাইন টুল এ পাস করা।</li> + <li>ফায়ারফক্স ২৯ অথবা পরবর্তী ফায়ারফক্স ব্যবহার করা।</li> +</ul> + +<h3 id="অরিজিনাল_সোর্স_গুলো_দেখা"><strong>অরিজিনাল সোর্স গুলো দেখা</strong></h3> + +<p>এখন আপনি যদি <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a> এর "Show original sources" টি দেখেন, <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a> এর CSS রুল গুলো এর পরবর্তী লিংক স্টাইল সীট এর অরিজিনাল সোর্স এ নিয়ে যাবে।</p> + +<h3 id="এডিট_অরিজিনাল_সোর্স"><strong>এডিট অরিজিনাল সোর্স</strong></h3> + +<p>আপনি স্টাইল এডিটর এর অরিজিনাল সোর্স গুলো এডিট করতে পারবেন এবং যা ব্যবহার করা হয়েছে তা ঠিক তখনি সরাসরি দেখা যাবে।এটা কে কাজ করানোর জন্য আরও দুটি স্টেপ আছে।</p> + +<p>প্রথমে,আপনার প্রসেসর টিকে এমন ভাবে তৈরী করুন যাতে তা অরিজিনাল সোর্স কে দেখতে পারে এবং নিজস্ব ভাবে CSS তৈরী করে সোর্স পরিবর্তন করার সাথে সাথে। Sass এ আপনি --watch অপশন টি দেওয়ার মাধ্যমে কাজ টি করতে পাড়েন:</p> + +<p>sass index.scss:index.css --sourcemap --watch</p> + +<p>পরবর্তী তে,ফাইল এর পাশে "Save" বাটন এ ক্লিক করে স্টাইল এডিটর থেকে অরিজিনাল সোর্স সেভ করতে হবে, এবং অরিজিনাল ফাইল এ সেভ করতে হবে।</p> + +<p>এখন আপনি যখন স্টাইল এডিটর এর সোর্স ফাইল পরিবর্তন করবেন,CSS একাই তৈরী হবে এবংপরিবর্তন টি আপনি তখন-ই দেখতে পারবেন।</p> + +<h2 id="কীবোর্ড_শর্টকাট"><strong>কীবোর্ড শর্টকাট</strong></h2> + +<h3 id="সোর্স_এডিটর_শর্টকাট"><strong>সোর্স এডিটর শর্টকাট</strong></h3> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> + +<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p> 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 +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>The WebIDE is available from Firefox 34 onwards.</p> + +<p>You can also enable it in Firefox 33, by changing a preference: Visit <a href="http://kb.mozillazine.org/About:config">about:config</a>, find the preference called <code>devtools.webide.enabled</code> and set it to <code>true</code>.</p> +</div> + +<div class="summary"> +<p>The WebIDE is the replacement for the <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>. Like the App Manager, it enables you to run and debug <a href="/en-US/Firefox_OS">Firefox OS</a> apps using the <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> or a real Firefox OS device.</p> + +<p>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.</p> +</div> + +<p>With the WebIDE, you first <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">set up one or more runtimes</a>. 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.</p> + +<p>Next, you <a href="/en-US/docs/Tools/WebIDE#Creating_and_opening_apps">create an app, or open an existing app</a>. 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.</p> + +<p>Finally, you can <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Running_and_debugging_apps">install the app in one of the runtimes and run it</a>. You can then open the usual suite of developer tools - the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a> and so on - to examine and modify the running app.</p> + +<h2 id="System_requirements">System requirements</h2> + +<p>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.</p> + +<p>You can only use the WebIDE if you're targeting Firefox OS 1.2 or later.</p> + +<h2 id="Opening_the_WebIDE">Opening the WebIDE</h2> + +<p>In the Web Developer menu, click on the WebIDE entry and the WebIDE opens. You can also use the keybinding Shift-F8:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">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.</p> + +<p>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.</p> + +<h2 id="Setting_up_runtimes">Setting up runtimes</h2> + +<p>Under the "Select Runtime" dropdown, runtimes are grouped into three types:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">USB devices</a>: Firefox OS devices connected over USB</li> + <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simulators</a>: instances of the Firefox OS Simulator that you've installed</li> + <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Custom</a>: use this to connect to the WebIDE using an arbitrary name and port.</li> +</ul> + +<p>The first time you click the dropdown, you might not see any runtimes here:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">The rest of this section describes how you can add some runtimes.</p> + +<h3 id="Connecting_a_Firefox_OS_device">Connecting a Firefox OS device</h3> + +<p>Before you can connect a Firefox OS device, there's some setup you have to go through:</p> + +<ul> + <li><strong>check your Firefox OS version: </strong>make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check the version, go to the Settings app on the device, then <code>Device Information > Software</code>. If you don't have a high enough version, find your device in the <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> and follow the instructions for upgrading.</li> + <li><strong>enable remote debugging: </strong>in the Settings app on the device, go to <code>Device information > More information > Developer</code>. + <ul> + </ul> + + <ul> + <li>Firefox OS 1.3 and earlier: "Remote Debugging" is just a simple checkbox. Check it.</li> + <li>Firefox OS 1.4 and later: "Remote Debugging" asks you to enable for just ADB, or for ADB and DevTools. Select "ADB and DevTools".</li> + </ul> + </li> + <li><strong>disable Screen lock on your device:</strong> in the Settings app on the device, go to <code>Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li><strong>if you want to debug certified apps, including built-in apps</strong>: see the section on <a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">debugging certified apps</a>.</li> +</ul> + +<div class="note"> +<p><strong>Linux only:</strong></p> + +<ul> + <li>add a <code>udev</code> rules file, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values.</li> +</ul> +</div> + +<div class="note"> +<p><strong>Windows only:</strong></p> + +<ul> + <li>you need to install drivers, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a href="http://downloads.geeksphone.com/">Geeksphone web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li> + <li>if the WebIDE can't see your device after following all the steps, you may have to <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li> +</ul> +</div> + +<p>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":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p> + +<p>If you don't see your device, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p> + +<h3 id="Adding_a_Simulator">Adding a Simulator</h3> + +<p><span style="line-height: 1.5;">The <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. </span><span style="line-height: 1.5;">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.</span></p> + +<p><span style="line-height: 1.5;">This means that in many cases, you don't need a real device to test and debug your app. </span></p> + +<p>The Simulator is big, so it doesn't ship inside Firefox but as a Firefox <a href="/en-US/Add-ons">add-on</a>. 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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">To learn more about the Simulator, see its <a href="/en-US/docs/Tools/Firefox_OS_Simulator">documentation page</a>.</p> + +<h3 id="Custom_runtimes">Custom runtimes</h3> + +<p>With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.</p> + +<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. 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.</p> + +<p>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 <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> command.<br> + <br> + If you then want to use WebIDE to connect as well, you should <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">disable the ADB Helper add-on</a> and connect WebIDE using the Custom runtime option, entering the host and port that you passed to <code>adb forward</code>.</p> + +<p>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. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">See more about connecting to Firefox for Android using ADB</a>.</p> + +<h2 id="Selecting_a_runtime">Selecting a runtime</h2> + +<p>Once you've set up a runtime you can select it using the "Select Runtime" menu.</p> + +<ul> + <li>If you select a Simulator, the WebIDE launches the Simulator.</li> + <li>If you select a Firefox OS device the WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li> +</ul> + +<p>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.</p> + +<h3 id="Runtime_actions">Runtime actions</h3> + +<p>When a runtime is selected, the Runtimes dropdown menu has three extra items:</p> + +<ul> + <li><strong>Runtime Info</strong>: information on the current runtime</li> + <li><strong>Permissions Table</strong>: a table summarising <a href="/en-US/Apps/Build/App_permissions">app permissions</a> for the current runtime, indicating, for each API and each <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">app type</a>, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)</li> + <li><strong>Screenshot</strong>: a command to take a screenshot from the runtime</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8147/webide-runtimes-menu.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 789px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8145/webide-runtimeinfo.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"><img alt="" src="https://mdn.mozillademos.org/files/8149/webide-permissions.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"></p> + +<h2 id="Creating_and_opening_apps">Creating and opening apps</h2> + +<p>Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p> + +<h3 id="Create_a_new_app">Create a new app</h3> + +<p>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".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p> + +<p>Both templates are from Mozilla's <a href="https://github.com/mozilla/mortar">app template collection</a>, 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.</p> + +<p>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 <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h3 id="Open_a_packaged_app">Open a packaged app</h3> + +<p>Select "Open Packaged App..." to open a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged app</a>. You'll be asked to select a directory containing the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h3 id="Open_a_hosted_app">Open a hosted app</h3> + +<p>Select "Open Hosted App..." to open a <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a>. You'll be asked to enter a URL pointing to the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h2 id="Editing_apps">Editing apps</h2> + +<p>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.</p> + +<h3 id="The_app_summary_page">The app summary page</h3> + +<p>When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p> + +<p>You can always get back to the app summary page by clicking on the root of the tree on the left.</p> + +<h3 id="Manifest_validation">Manifest validation</h3> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p> + +<p>Of course, you can edit the <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> file right in the project editor as well.</p> + +<h3 id="The_source_editor">The source editor</h3> + +<p>The WebIDE uses the <a href="http://codemirror.net/">CodeMirror</a> source editor.</p> + +<h4 id="Source_editor_shortcuts">Source editor shortcuts</h4> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> + +<h4 id="Code_completion">Code completion</h4> + +<p>When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">To display autocomplete suggestions in JavaScript press Control + Space:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p> + +<h4 id="Inline_documentation">Inline documentation</h4> + +<p>The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p> + +<p>Clicking the <code>[docs]</code> link in the popup will take you to the MDN page for the symbol.</p> + +<h4 id="Saving_files">Saving files</h4> + +<p>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).</p> + +<h3 id="Removing_projects">Removing projects</h3> + +<p>To remove an app from the WebIDE, go to the <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">app summary page</a> and click "Remove Project".</p> + +<h2 id="Running_and_debugging_apps">Running and debugging apps</h2> + +<p>When you're ready to run the app, you need to <a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">select a runtime from the "Select Runtime" dropdown menu</a>. If you don't have any available runtimes here, find out how to add some in <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Setting up runtimes</a>.</p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">To debug the app, click the "Pause" button and the Developer Tools <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> appears, connected to your app:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;">Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> and <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>. 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.</p> + +<h3 id="Debugging_certified_apps_(including_main_process)">Debugging certified apps (including main process)</h3> + +<p>You can run the debugger against the simulator, b2g desktop, or a real device.</p> + +<p>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 <a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">certified apps</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p> + +<p><br> + However, to debug certified apps on a real device:</p> + +<ul> + <li>the device must be running a development build of Firefox OS 1.2+</li> + <li>you must enable certified app debugging</li> +</ul> + +<p>To enable certified app debugging, connect to the runtime, and then, in the menu, go to <code>Runtime > Runtime Info</code>. From here, if you see <code>"DevTools restricted privileges: yes</code>", that means certified apps can't be debugged. The path then differs depending on what you are debugging against:</p> + +<ul> + <li>Real device + <ul> + <li>If it can be rooted, clicking <code>"request higher privileges"</code> will enable certified apps debugging (Firefox OS will restart). You may need to select your device again in the 'Select Runtime' drop down.</li> + </ul> + </li> + <li>Simulator + <ul> + <li>The simulators come with certified debugging enabled by default.</li> + </ul> + </li> + <li>B2G desktop + <ul> + <li>Manually edit the B2G desktop client <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client">preferences</a> before connecting to enable certified app debugging.</li> + </ul> + </li> +</ul> + +<p>Now (or after a restart of the B2G desktop client) in the WebIDE you should see all the certified apps on the device.</p> + +<h2 id="Monitoring_performance">Monitoring performance</h2> + +<p>If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:</p> + +<ul> + <li>The <a href="/docs/Tools/WebIDE/Monitor">Monitor</a> panel offers a good overview of a device's performance. This can help you detect problems, e.g. a sudden, excessive increase in an app's memory usage (leak).</li> + <li>The <a href="/docs/Tools/Profiler">Profiler</a> tool gives you a way to analyze a single app's footprint in great detail. This is especially useful when investigating a known performance problem.</li> +</ul> + +<h2 id="Troubleshooting">Troubleshooting</h2> + +<p>If you have any problems working with the WebIDE, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p> + +<p> </p> + +<p> </p> 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 +--- +<div>{{ToolsSidebar}}</div><h2 id="একটি_Firefox_OS_ডিভাইসের_সাথে_সংযুক্ত_হওয়া">একটি Firefox OS ডিভাইসের সাথে সংযুক্ত হওয়া</h2> + +<p>যদি এমন হয় যে, আপনি একটি Firefox OS ডিভাইস WebIDE এর সাথে সংযুক্ত করার চেষ্টা করছেন, কিন্তু সেটি দেখাচ্ছে না, তাহলে এখানে কিছু উপায় বলা আছে, যা আপনি চেষ্টা করতে পারেন:</p> + +<ul> + <li>বর্তমান Firefox OS সংস্করণ: নিশ্চিত করুন যে আপনার ডিভাইসে Firefox OS 1.2/Boot2Gecko 1.2 বা তার পরবর্তী সংস্করণ ইনস্টল করা। সংস্করণ জানার জন্য আপনার ডিভাইসে থাকা সেটিংস অ্যাপ চালু করুন, তারপর Device Information থেকে Software এ ট্যাপ করলেই পেয়ে যাবেন। যদি আপনার যথেষ্ট উন্নত সংস্করণ না থাকে, তাহলে আপনার ডিভাইস <a href="/bn-BD/Firefox_OS/Developer_phone_guide">ডেভেলপার ফোন গাইড</a> থেকে খুঁজে বের করুন এবং আপগ্রেড করার জন্য নির্দেশনা সমূহ অনুসরণ করুন।</li> + <li>রিমোট ডিবাগিং চালু করুন: সেটিংস অ্যাপে থেকে প্রথমে Device information তারপর More information এবং সেখান থেকে Developer এ গেলে: + <ul> + <li>Firefox OS 1.3 এবং তার আগের সংস্করণের জন্য: "Remote Debugging" নামে একটি সাধারণ চেকবক্স পাবেন; সেটাতে ট্যাপ করে টিক দিলেই হয়ে যাবে।</li> + <li>Firefox OS 1.4 এবং তার পরবর্তী সংস্করণ: "Remote Debugging" আপনাকে জিজ্ঞেস করবে যে, শুধু ADB এর জন্য ইনস্টল করবেন, নাকি ADB এবং DevTools উভয়ের জন্য। এখান থেকে "ADB এবং DevTools" নির্বাচন করুন।</li> + </ul> + </li> + <li>আপনার ডিভাইসে স্ক্রিনলক বন্ধ করুন: ডিভাইসের সেটিংস অ্যাপে, Screen Lock এ যান এবং Lock Screen চেক বক্সে একবার ট্যাপ করে টিক চিহ্নটি তুলে দিন। এটা একটি ভালো বুদ্ধি, কারন যখন স্ক্রিন লক হয়ে যায়, ফোনের সাথে সংযোগও তখন বন্ধ হয়ে যায়। ফলে আর ডিবাগ করতে পারবেন না।</li> + <li>নিশ্চিত হউন যে Firefox OS ফোনের পাশাপাশি আপনার কম্পিউটারে অন্য কোন অ্যান্ড্রয়েড ফোন সংযুক্ত নয়।</li> + <li>যে USB কেবল ব্যবহার করছেন, সেটি পরীক্ষা করে দেখুন: + <ul> + <li>একবার খুলে আবার লাগাতে পারেন।</li> + <li>ইউএসবি কেবলটি আপনার কম্পিউটারের অন্য পোর্টে লাগিয়ে দেখুন। আপনার হয়ত পোর্ট পরিবর্তন করা লাগতে পারে।</li> + <li>অন্য একটি ইউএসবি কেবল ব্যবহার করুন। ফোনের সাথে দেয়া কেবলগুলো অনেক সময় নিম্নমানের হয় এবং মাঝে মাঝে কাজ করেনা।</li> + <li>ছোট USB কেবল ব্যবহার করে দেখতে পারেন। লম্বা গুলো অনেক সময় ঠিক মতো কাজ করে না।</li> + </ul> + </li> + <li>ডিভাইসের সেটিংস অ্যাপে রিমোট ডিবাগিং বন্ধ করে আবার চালু করে দেখতে পারেন।</li> + <li>যদি আপনি <a href="https://developer.mozilla.org/bn-BD/docs/Tools/WebIDE#Custom_runtimes">ADB Addon Helper ডিজ্যাবল করে থাকেন</a>, আপনি কি সঠিকভাবে <code>adb forward</code> কমান্ড চালাতে পেরেছেন?</li> + <li>যদি আপনি লিনাক্স ব্যবহারকারী হয়ে থাকেন, তাহলে নিশ্চিত করুন যে <a href="http://developer.android.com/tools/device.html#setting-up">অ্যান্ড্রয়েড ডিভাইস সেটাপ</a> গাইডের ৩ নং ধাপের বর্ণনা অনুযায়ী একটি udev রুলস ফাইল যুক্ত করেছেন। গিকসফোনের জন্য idVendor অ্যাট্রিবিউট হচ্ছে "05c6", এবং <a href="http://developer.android.com/tools/device.html#VendorIds">এই পাতায় </a>অন্যান্য idVendor মানের তালিকা দেয়া আছে।</li> + <li>যদি আপনি উইন্ডোজ ব্যবহারকারী হন: + <ul> + <li> <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">অ্যান্ড্রয়েড ডিভাইস সেটাপ</a> গাইডের ৩ নং ধাপের বর্ণনা অনুযায়ী আপনাকে ড্রাইভার ইনস্টল করতে হবে। আপনি গিকসফোন ডিভাইসের জন্য ড্রাইভার <a class="external-icon external" href="http://downloads.geeksphone.com/">গিকসফোনের ওয়েবসাইট</a> থেকে ডাউনলোড করতে পারবেন। ডিফল্টভাবে উইন্ডোজ ৮ সাইন ছাড়া ড্রাইভার ইনস্টল করতে দিবে না। <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a> এই টিউটোরিয়ালটি দেখুন।</li> + <li>যদি উপরোক্ত সব উপায় ব্যবহার করার পরও WebIDE আপনার ডিভাইস দেখতে না পায়, তাহলে আপনাকে <a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182">adb_usb.ini সম্পাদনা</a> করা লাগতে পারে।</li> + </ul> + </li> + <li>যদি আপনি EasyTether ব্যবহারকারী (OS X) হয়ে থাকেন, তাহলে আপনাকে EasyTether আন-ইনস্টল বা ডিজাবল করতে হবে: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li> +</ul> + +<h3 id="ইচ্ছামত_ডিবাগ_করা_(প্রত্যায়িত_অ্যাপ_বিল্ট-ইন_অ্যাপ_ডিভাইসে_ইতোমধ্যে_ইনস্টল_করা_অ্যাপ)">ইচ্ছামত ডিবাগ করা (প্রত্যায়িত অ্যাপ, বিল্ট-ইন অ্যাপ, ডিভাইসে ইতোমধ্যে ইনস্টল করা অ্যাপ)</h3> + +<p>যদি এমন হয় যে আপনি প্রত্যায়িত অ্যাপ, বিল্ট-ইন অ্যাপ বা একটি বাস্তব ডিভাইসে ইতোমধ্যে ইনস্টল করা অ্যাপ ডিবাগ করতে পারছেন না, তাহলে হয়ত আপনি WebIDE এর নিয়ন্ত্রিত ক্ষমতার নিরাপত্তা নিয়মের ভেতর রয়েছেন। আরও জানতে <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">ইচ্ছেমত ডিবাগ করা (প্রত্যায়িত অ্যাপ, মূল প্রক্রিয়া ইত্যাদি সহ)</a> দেখুন।</p> + +<h2 id="অন্যান্য_ব্রাউজারে_সংযোগ_স্থাপন_(ক্রোম_সাফারি)">অন্যান্য ব্রাউজারে সংযোগ স্থাপন (ক্রোম, সাফারি)</h2> + +<p>অন্যান্য ব্রাউজার যেমন- ক্রোম, সাফারি এর সাথে WebIDE সংযোগ স্থাপনের জন্য <a href="/en-US/docs/Tools/Firefox_Tools_Adapter">Valence (formerly Firefox Tools Adapter)</a> ব্যবহার করে।</p> + +<p>যদি আপনার উপরে উল্লেখিত ব্রাউজারে সংযোগ স্থাপনে সমস্যা হয়, তাহলে <a href="/en-US/docs/Tools/Firefox_Tools_Adapter">Valence page</a> এর সেটাপের ধাপগুলো এবং অন্যান্য নোট সমূহ অনুসরণ করুন।</p> + +<h2 id="প্রজেক্ট_লিস্ট_লোড_করা_সম্ভব_হচ্ছে_না">প্রজেক্ট লিস্ট লোড করা সম্ভব হচ্ছে না</h2> + +<p>যদি আপনি ফায়ারফক্সের একটি সংস্করণে WebIDE চালু করেন, এবং তারপর একটি পুরাতন সংস্করণে একই প্রোফাইল দিয়ে ব্যবহার করেন, তাহলে আপনি "Unable to load project list" বা "প্রজেক্ট লিস্ট লোড করা সম্ভব হচ্ছে না" এমন ইরর মেসেজ দেখতে পাবেন।</p> + +<p>WebIDE যে স্টোরেজ সিস্টেম ব্যবহার করে (<a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>) সেটা নতুন ফায়ারফক্স সংস্করণের জন্য স্থানান্তর বা পুনরায় কাঠামো তৈরির প্রয়োজন হলে এমনটি হতে পারে। The project list then becomes effectively inaccessible to older versions of Firefox.</p> + +<p>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.</p> + +<p>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:</p> + +<ol> + <li>Close Firefox</li> + <li>Find your Firefox profile directory</li> + <li>Find the <code>storage</code> folder inside the profile directory</li> + <li>Under some part of this file tree, there should be files and/or directories that start with <code>4268914080AsptpcPerjo</code> (a hashed name of the database)</li> + <li>Remove any such files and directories</li> + <li>Start Firefox and WebIDE again</li> +</ol> + +<h2 id="Enable_logging">Enable logging</h2> + +<p>You can also enable verbose logging to gather diagnostics:</p> + +<ol start="1" style="list-style-type: decimal;"> + <li>Open <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, and add a new preference called <code>extensions.adbhelper@mozilla.org.sdk.console.logLevel</code>, with the string value <code>all</code>, and set <code>extensions.adbhelper@mozilla.org.debug</code> to <code>true</code>.</li> + <li>In the <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons">Add-ons Manager</a>, disable and then re-enable the ADB Helper add-on.</li> + <li>Open the <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Browser Console</a> and you'll now see console messages prefixed with <code>adb</code>. If the messages don't mean anything to you, <a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help">ask for help</a>.</li> +</ol> + +<h2 id="Get_help">Get help</h2> + +<p>Go to the <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools room on IRC</a> and we will try to help.</p> diff --git a/files/bn/tools/ত্রিমাত্রিক_দর্শন/index.html b/files/bn/tools/ত্রিমাত্রিক_দর্শন/index.html new file mode 100644 index 0000000000..e1dfb87617 --- /dev/null +++ b/files/bn/tools/ত্রিমাত্রিক_দর্শন/index.html @@ -0,0 +1,96 @@ +--- +title: ত্রিমাত্রিক দর্শন +slug: Tools/ত্রিমাত্রিক_দর্শন +translation_of: Tools/3D_View +--- +<div>{{ToolsSidebar}}</div><p>{{ fx_minversion_header("11") }}</p> + +<p><span id="result_box" lang="bn"><span class="hps">যখন আপনি ত্রিমাত্রিক(<span id="result_box" lang="bn"><span class="hps">3D</span></span>) দর্শন</span> বোতাম চাপ দিবেন<span class="hps">,</span><span class="hps"> পাতা</span>টি ত্রিমাত্রিক দর্শন <span class="hps">প্রক্রিয়ায় যাবে</span><span>;</span><span class="hps"> এই</span> <span class="hps">প্রক্রিয়ায় আপনি</span><span id="result_box" lang="bn"><span class="hps"> দেখতে পাবেন</span></span> আপনার পাতা <span id="result_box" lang="bn"><span class="hps">ত্রিমাত্রিক(</span></span><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">3D)</span> <span class="hps">দৃশ্যে<span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps"> উপস্থাপন</span></span></span></span> করে <span id="result_box" lang="bn"><span class="hps">HTML-এর</span></span></span></span></span></span><span class="hps"> চারকোনা<span id="result_box" lang="bn"><span id="result_box" lang="bn"><span class="hps"> ঘর যা ক্রমবর্ধমান</span> <span class="atn hps">"</span><span>লম্বা</span><span>"</span> <span class="hps">হয়, যেটি </span></span></span></span><span class="hps">আপনার পৃষ্ঠা</span>কে বাইরের দিকে ঠেলে দিচ্ছে<span>।</span><span class="hps"> এই দৃশ্যে দেখা যায় আপনার বিষয়বস্তু</span><span class="hps">গুলো আরও সহজে ঘরের আকৃতিতে প্রকাশ পায়।</span></span></p> + +<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p> + +<p><span id="result_box" lang="bn"><span class="hps">চেপে রেখে এবং টেনে ধরে</span><span class="hps">, বিভিন্ন কোণ থেকে দেখার জন্য আপনি</span> <span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">পৃষ্ঠার</span> <span class="hps">DOM(</span></span></span><span id="result_box" lang="bn"><span id="result_box" lang="bn"><span class="hps">Document Object Model)</span> <span class="hps">অনুক্রমের</span> </span>ত্রিমাত্রিক বর্ণনাটি <span class="hps">ঘোরাতে পারেন</span> <span class="hps">এবং</span> <span class="hps">পুনরায়</span> দ্যুতিময় করতে পারেন<span>, </span><span class="hps">এর</span> কাঠামো <span id="result_box" lang="bn"><span class="hps">ভালো</span></span>মতো <span class="hps">পরীক্ষার জন্য</span><span>।</span> <span class="hps">পর্দার আড়ালে থাকা উপাদানসমূহ দৃশ্যমান হবে</span><span class="hps">, যার ফলে আপনি দেখতে পাবেন কোথায় উপাদানগুলোর সম্পর্ক স্থাপিত হয় দৃশ্যমান উপাদান এর সাথে।</span> আপনি উপাদানে চেপে HTML সূচি অথবা Style সূচি থেকে তাদের HTML<span class="hps"> দেখতে পারেন।</span> <span class="hps">বিপরীতভাবে, আপনি breadcrumb bar(এক প্রকার পরিভ্রমণ দণ্ড) এর উপাদানগুলোতে চেপে কোন কোন উপাদান ত্রিমাত্রিক দৃশ্যে থাকবে তা নির্বাচন করতে পারবেন</span><span class="hps">।</span></span></p> + +<p>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 <a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">blocklisted drivers page</a> for more information.</p> + +<h2 id="Controlling_the_3D_view">Controlling the 3D view</h2> + +<p>There are keyboard shortcuts and mouse controls available for the 3D view.</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Function</td> + <td class="header">Keyboard</td> + <td class="header">Mouse</td> + </tr> + <tr> + <td>Zoom in/out</td> + <td>+ / -</td> + <td>Scroll wheel up/down</td> + </tr> + <tr> + <td>Rotate left/right</td> + <td>a / d</td> + <td>Mouse left/right</td> + </tr> + <tr> + <td>Rotate up/down</td> + <td>w / s</td> + <td>Mouse up/down</td> + </tr> + <tr> + <td>Pan left/right</td> + <td>← / →</td> + <td>Mouse left/right</td> + </tr> + <tr> + <td>Pan up/down</td> + <td>↑ / ↓</td> + <td>Mouse up/down</td> + </tr> + <tr> + <td>Reset zoom level</td> + <td>0</td> + <td>Resets the zoom level to the default</td> + </tr> + <tr> + <td>Focus on selected node</td> + <td>f</td> + <td>Makes sure the currently selected node is visible {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td>Reset view</td> + <td>r</td> + <td>Resets zoom, rotation, and panning to the default {{ fx_minversion_inline("12.0") }}</td> + </tr> + <tr> + <td>Hide current node</td> + <td>x</td> + <td>Makes 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") }}</td> + </tr> + </tbody> +</table> + +<h2 id="Use_cases_for_the_3D_view">Use cases for the 3D view</h2> + +<p>There are a variety of ways the 3D view is useful:</p> + +<ul> + <li>If you have broken HTML causing layout problems, looking at the 3D view can help find where you've gone wrong. Often, layout problems are caused by improper nesting of content. This can become much more obvious when looking at the 3D view and seeing where your elements are nested wrong.</li> + <li>If content isn't displaying, you may be able to figure out why; since the 3D view lets you zoom out to see elements that are rendering outside the visible area of the page, you can find stray content this way.</li> + <li>You can get a look at how your page is structured to see if there may be ways to optimize your layout.</li> + <li>And, of course, it looks <strong>awesome</strong>.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> + <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li> + <li><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a></li> + <li><a href="/en/Tools" title="Tools">Tools</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li> +</ul> + +<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}</p> 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 +--- +<p><span class="seoSummary"><span style="color: #000000; font-family: Georgia; font-size: 16px; line-height: normal;">ভিতরে অনেক মানুষ as সম্ভব হিসেবে সক্ষম করা ওয়েব ব্যবহার করতে বুঝায় সাইট, যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয়</span>. </span><span style="color: #000000; font-family: Georgia; font-size: 16px; line-height: normal;">ভিতরে অনেক মানুষ as সম্ভব হিসেবে সক্ষম করা ওয়েব ব্যবহার করতে বুঝায় সাইট, যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয়.</span></p> + +<p>"<span style="color: #000000; font-family: Georgia; font-size: 16px; line-height: normal;">accessibility সবচেয়ে বেশী ঘন ঘন সুযোগসুবিধা বা নাগরিক সুবিধা বর্ণনা করতে বিকলত্ব-এর</span>, as এর '<span style="color: #000000; font-family: Georgia; font-size: 16px; line-height: normal;">সাথে মানুষকে সাহায্য করতে অভ্যস্ত আছে</span>'. This can extend to Braille signage, wheelchair ramps, audio signals at pedestrian crossings, walkway contours, website design, and so on." <a class="external" href="http://en.wikipedia.org/wiki/Accessibility">Wikipedia entry for Accessibility</a></p> + + + +<p>"<span style="color: #000000; font-family: Georgia; font-size: 16px; line-height: normal;">ওয়েব মৌলিকভাবে সব মানুষ-এর জন্য কাজ করতে ডিজাইন করা হয়</span>, 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." <a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p> + +<div class="cleared topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">ডকুমেন্টেশন</h2> + +<dl> + <dt><a href="/en-US/docs/Accessibility/Web_Development" title="Accessibility Web Development">ওয়েব ডেভেলপমেন্ট</a></dt> + <dd> + <div></div> + + <div> + <table style="height: 40px; overflow: auto; width: 400px;"> + <tbody> + <tr style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 12px; line-height: normal;"> + <td><span style="font-size: 16px;">রচনার একটি সংগ্রহ প্রবেশযোগ্যতার দুনিয়ায় ওয়েব উন্নয়ন ইস্যু তুলে ধরতে মনোনীত করল।</span></td> + </tr> + <tr style="color: rgb(0, 0, 0); font-family: Georgia; font-size: 12px; line-height: normal;"> + </tr> + </tbody> + </table> + </div> + </dd> + <dt><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt> + <dd><span style="color: #000000; font-family: Georgia; font-size: 16px; line-height: normal;">রচনার একটি সংগ্রহ শিখতে যেভাবে aria আপনার html ডকুমেন্ট আরও সহজগম্য বানাতে ব্যবহার করতে।</span></dd> + <dt><a href="/en-US/docs/Accessibility/AT_Development" title="AT Development">Assistive technology (AT) development</a></dt> + <dd><span style="color: #000000; font-family: Georgia; font-size: 16px; line-height: normal;">রচনার at ডেভেলাপার-এর জন্য উদ্দেশ্য করা একটি সংগ্রহ</span></dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">View all articles about Accessibility...</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">ওয়েব ডেভেলপারদের জন্য টুল সমূহ</h2> + +<ul> + <li><a class="external" href="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html" title="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html">Automated accessibility tests</a></li> + <li><a class="external" href="http://www.standards-schmandards.com/index.php?show/fangs">Fangs screen reader emulator</a></li> +</ul> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility:Tools" title="en-US/docs/tag/Accessibility:Tools">View All...</a></span></p> + +<h2 class="Tools" id="Tools" name="Tools">অন্যান্য উপকারী সাইট</h2> + +<ul> + <li><a class="external" href="https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we">Screen reader list</a></li> +</ul> +</div> +</div> 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 +--- +<div>{{DefaultAPISidebar("ব্যাটারি API")}}</div> + +<p><strong>ব্যাটারি অবস্থা API </strong>টি, প্রায়ই <strong>ব্যাটারি API</strong> হিসাবে বলা হয়, সিস্টেমের ব্যাটারি চার্জ লেভেল সম্পর্কে তথ্য সরবরাহ করে এবং যখন ব্যাটারি লেভেল বা করার অবস্থা পরিবর্তন করা হয় তখন প্রেরিত ইভেন্টগুলি দ্বারা আপনাকে সূচিত করে। ব্যাটারির চার্জ কম থাকলে এটি আপনার অ্যাপের সম্পদ ব্যবহারকে সামঞ্জস্য করে ব্যাটারী নিষ্কাশন কমাতে বা ডেটা ক্ষতি প্রতিরোধ করার জন্য ব্যাটারি শেষ হত্তয়ার আগে পরিবর্তন সংরক্ষণ করতে ব্যবহার করা যেতে পারে।</p> + +<p>ব্যাটারি অবস্থা API ব্যাটারি প্রতিশ্রুতি ফিরিয়ে আনার একটি {{domxref("navigator.getBattery()")}} মেথড/পদ্ধতিতে {{domxref("window.navigator")}}- কে প্রসারিত করে, যা একটি {{domxref("BatteryManager")}} অবজেক্টে সমাধান করা হয় যা আপনাকে ব্যাটারি অবস্থা নিরীক্ষণ করার জন্য কিছু নতুন ইভেন্টগুলি পরিচালনা করতে পারে.</p> + +<h2 id="উদাহরণ">উদাহরণ</h2> + +<p>এই উদাহরণে, আমরা চার্জিং অবস্থা (আমরা প্লাগ ইন এবং চার্জিং কিনা তাও) এর ব্যাটারি স্তর এবং সময় পরিবর্তনের উভয় পরিবর্তনগুলির জন্য দেখতে পাই। এটি {{event("chargingchange")}}, {{event("levelchange")}}, {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} ইভেন্টগুলি শোনার মাধ্যমে সম্পন্ন করা হয়।</p> + +<pre class="brush: js">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"); + } + +}); +</pre> + +<p>আরো দেখুন <a class="external" href="http://www.w3.org/TR/battery-status/#examples">the example in the specification</a>.</p> + +<h2 id="সবিস্তার_বিবরণী">সবিস্তার বিবরণী</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">সবিস্তার বিবরণী</th> + <th scope="col">অবস্থা</th> + <th scope="col">মন্তব্য</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Battery API")}}</td> + <td>{{Spec2("Battery API")}}</td> + <td>প্রাথমিক সংজ্ঞা</td> + </tr> + </tbody> +</table> + +<h2 id="উপযুক্তত_ব্রাউজার">উপযুক্তত ব্রাউজার</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>বৈশিষ্ট্যসূচক</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>মৌলিক সমর্থন</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("43")}}<sup>[3]</sup><br> + {{CompatGeckoDesktop("52")}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>বৈশিষ্ট্যসূচক</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>মৌলিক সমর্থন</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(40.0)}}</td> + <td> + <p>{{CompatGeckoMobile("10")}} {{property_prefix("moz")}}<br> + {{CompatGeckoMobile("16")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("43")}}<sup>[3]</sup><br> + {{CompatGeckoMobile("52")}}<sup>[3]</sup></p> + </td> + <td>{{CompatNo}}</td> + <td>25<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Disabled by default in Firefox 10.0, but can be enabled setting the preference <code>dom.battery.enabled</code> to <code>true</code>. Starting with Firefox 11.0, <code>mozBattery</code> 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")}}.</p> + +<p>[2] Values for {{domxref("BatteryManager.chargingTime")}} and {{domxref("BatteryManager.dischargingTime")}} are always equal to <code>Infinity</code>.</p> + +<p>[3] The new promise-based syntax for {{domxref("Navigator.getBattery()")}} is supported from Firefox 43 onwards.</p> + +<p>[4] From Firefox 52 onwards, the ব্যাটারি অবস্থা API is only available in chrome/privileged code.</p> + +<h2 id="আরো_দেখুন">আরো দেখুন</h2> + +<ul> + <li><a href="/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information">Retrieving battery status information - demo & article</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Hacks blog post - Using the Battery API</a></li> +</ul> 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 +--- +<p>{{APIRef("DOM")}}</p> + +<p><span class="seoSummary">The <code><strong>Event</strong></code> interface represents an event which takes place in the DOM.</span></p> + +<p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click" title="The HTMLElement.click() method simulates a mouse click on an element."><code>HTMLElement.click()</code></a> method of an element, or by defining the event, then sending it to a specified target using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent" title="Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent()."><code>EventTarget.dispatchEvent()</code></a>.</p> + +<p>There are many types of events, some of which use other interfaces based on the main <code>Event</code> interface. <code>Event</code> itself contains the properties and methods which are common to all events.</p> + +<p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML elements</a> (such as <code><button></code>, <code><div></code>, <code><span></code>, etc.) using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" title="The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target."><code>EventTarget.addEventListener()</code></a>, and this generally replaces using the old HTML <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">event handler attributes</a>. Further, when properly added, such handlers can also be disconnected if needed using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener" title="The EventTarget.removeEventListener() method removes from the EventTarget an event listener previously registered with EventTarget.addEventListener(). The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal"><code>removeEventListener()</code></a>.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> 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.)</p> +</div> + +<p>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 <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Event bubbling and capture</a> settings of each handler triggered.</p> + +<h2 id="Introduction" name="Introduction">Interfaces based on Event</h2> + +<p>Below is a list of interfaces which are based on the main <code>Event</code> interface, with links to their respective documentation in the MDN API reference.</p> + +<p>Note that all event interfaces have names which end in "Event".</p> + +<div class="index"> +<ul> + <li>{{domxref("AnimationEvent")}}</li> + <li>{{domxref("AudioProcessingEvent")}}</li> + <li>{{domxref("BeforeInputEvent")}}</li> + <li>{{domxref("BeforeUnloadEvent")}}</li> + <li>{{domxref("BlobEvent")}}</li> + <li>{{domxref("ClipboardEvent")}}</li> + <li>{{domxref("CloseEvent")}}</li> + <li>{{domxref("CompositionEvent")}}</li> + <li>{{domxref("CSSFontFaceLoadEvent")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("DeviceLightEvent")}}</li> + <li>{{domxref("DeviceMotionEvent")}}</li> + <li>{{domxref("DeviceOrientationEvent")}}</li> + <li>{{domxref("DeviceProximityEvent")}}</li> + <li>{{domxref("DOMTransactionEvent")}}</li> + <li>{{domxref("DragEvent")}}</li> + <li>{{domxref("EditingBeforeInputEvent")}}</li> + <li>{{domxref("ErrorEvent")}}</li> + <li>{{domxref("FetchEvent")}}</li> + <li>{{domxref("FocusEvent")}}</li> + <li>{{domxref("GamepadEvent")}}</li> + <li>{{domxref("HashChangeEvent")}}</li> + <li>{{domxref("IDBVersionChangeEvent")}}</li> + <li>{{domxref("InputEvent")}}</li> + <li>{{domxref("KeyboardEvent")}}</li> + <li>{{domxref("MediaStreamEvent")}}</li> + <li>{{domxref("MessageEvent")}}</li> + <li>{{domxref("MouseEvent")}}</li> + <li>{{domxref("MutationEvent")}}</li> + <li>{{domxref("OfflineAudioCompletionEvent")}}</li> + <li>{{domxref("OverconstrainedError")}}</li> + <li>{{domxref("PageTransitionEvent")}}</li> + <li>{{domxref("PaymentRequestUpdateEvent")}}</li> + <li>{{domxref("PointerEvent")}}</li> + <li>{{domxref("PopStateEvent")}}</li> + <li>{{domxref("ProgressEvent")}}</li> + <li>{{domxref("RelatedEvent")}}</li> + <li>{{domxref("RTCDataChannelEvent")}}</li> + <li>{{domxref("RTCIdentityErrorEvent")}}</li> + <li>{{domxref("RTCIdentityEvent")}}</li> + <li>{{domxref("RTCPeerConnectionIceEvent")}}</li> + <li>{{domxref("SensorEvent")}}</li> + <li>{{domxref("StorageEvent")}}</li> + <li>{{domxref("SVGEvent")}}</li> + <li>{{domxref("SVGZoomEvent")}}</li> + <li>{{domxref("TimeEvent")}}</li> + <li>{{domxref("TouchEvent")}}</li> + <li>{{domxref("TrackEvent")}}</li> + <li>{{domxref("TransitionEvent")}}</li> + <li>{{domxref("UIEvent")}}</li> + <li>{{domxref("UserProximityEvent")}}</li> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WheelEvent")}}</li> +</ul> +</div> + +<h2 id="Constructor" name="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("Event.Event", "Event()")}}</dt> + <dd>Creates an <code>Event</code> object, returning it to the caller.</dd> +</dl> + +<h2 id="Properties" name="Properties">Properties</h2> + +<dl> + <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt> + <dd>A boolean indicating whether or not the event bubbles up through the DOM.</dd> + <dt>{{domxref("Event.cancelBubble")}}</dt> + <dd>A historical alias to {{domxref("Event.stopPropagation()")}}. Setting its value to <code>true</code> before returning from an event handler prevents propagation of the event.</dd> + <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt> + <dd>A boolean indicating whether the event is cancelable.</dd> + <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt> + <dd>A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.</dd> + <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt> + <dd>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 <em>retargeting</em>.</dd> + <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt> + <dd>An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.</dd> + <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt> + <dd>Indicates whether or not the call to {{domxref("event.preventDefault()")}} canceled the event.</dd> + <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt> + <dd>Indicates which phase of the event flow is being processed.</dd> + <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>The explicit original target of the event (Mozilla-specific.)</dd> + <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>The original target of the event, before any retargetings. (Mozilla-specific.)</dd> + <dt>{{domxref("Event.returnValue")}}</dt> + <dd>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 <code>returnValue</code> if you choose to do so.</dd> + <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt> + <dd>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.</dd> + <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt> + <dd>A reference to the target to which the event was originally dispatched.</dd> + <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt> + <dd>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.</dd> + <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt> + <dd>The name of the event. Case-insensitive.</dd> + <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt> + <dd>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")}}).</dd> +</dl> + +<h3 id="Obsolete_properties">Obsolete properties</h3> + +<dl> + <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt> + <dd>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.)</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt> + <dd> + <p>Creates a new event, which must then be initialized by calling its <code>initEvent()</code> method.</p> + </dd> + <dt>{{domxref("Event.composedPath()")}}</dt> + <dd>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.</dd> +</dl> + +<dl> + <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt> + <dd>Initializes the value of an Event created. If the event has already been dispatched, this method does nothing.</dd> + <dt>{{domxref("Event.preventDefault()")}}</dt> + <dd>Cancels the event (if it is cancelable).</dd> + <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt> + <dd>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).</dd> + <dt>{{domxref("Event.stopPropagation()")}}</dt> + <dd>Stops the propagation of events further along in the DOM.</dd> +</dl> + +<h3 id="Obsolete_methods">Obsolete methods</h3> + +<dl> + <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt> + <dd>Non-standard; use {{domxref("Event.defaultPrevented")}} instead. (Returns the value of {{domxref("Event.defaultPrevented")}}.)</dd> + <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> + <dd>Obsolete; use {{domxref("event.stopPropagation")}} instead. (Prevents the event from bubbling.)</dd> + <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> + <dd>Obsolete; use {{domxref("event.stopPropagation")}} instead.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Event")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Types of events available: <a href="/en-US/docs/Web/Reference/Events">Event reference</a></li> + <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a> (<code>target</code> vs <code>currentTarget</code> vs <code>relatedTarget</code> vs <code>originalTarget</code>)</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li> + <li>For Firefox add-on developers: + <ul> + <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li> + <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li> + </ul> + </li> +</ul> 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 +--- +<div>{{apiref("DOM")}}</div> + +<p><span class="seoSummary">The {{domxref("Event")}} interface's <strong><code>preventDefault()</code></strong> 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.</span> 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.</p> + +<p>As noted below, calling <code><strong>preventDefault()</strong></code> for a non-cancelable event, such as one dispatched via {{domxref("EventTarget.dispatchEvent()")}}, without specifying <code>cancelable: true</code> has no effect.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>event</em>.preventDefault(); +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Blocking_default_click_handling">Blocking default click handling</h3> + +<p>Toggling a checkbox is the default action of clicking on a checkbox. This example demonstrates how to prevent that from happening:</p> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">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);</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p> + +<h3 id="Stopping_keystrokes_from_reaching_an_edit_field">Stopping keystrokes from reaching an edit field</h3> + +<p>The following example demonstrates how invalid text input can be stopped from reaching the input field with <code>preventDefault()</code>. Nowadays, you should usually use <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">native HTML form validation</a> instead.</p> + +<h4 id="HTML_2">HTML</h4> + +<p>Here's the form:</p> + +<pre class="brush: html"><div class="container"> + <p>Please enter your name using lowercase letters only.</p> + + <form> + <input type="text" id="my-textbox"> + </form> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<p>We use a little bit of CSS for the warning box we'll draw when the user presses an invalid key:</p> + +<pre class="brush: css">.warning { + border: 2px solid #f39389; + border-radius: 2px; + padding: 10px; + position: absolute; + background-color: #fbd8d4; + color: #3b3c40; +}</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>And here's the JavaScript code that does the job. First, listen for {{domxref("Element/keypress_event", "keypress")}} events:</p> + +<pre class="brush: js">var myTextbox = document.getElementById('my-textbox'); +myTextbox.addEventListener('keypress', checkName, false); +</pre> + +<p>The <code>checkName()</code> function, which looks at the pressed key and decides whether to allow it:</p> + +<pre class="brush: js">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" + ); + } + } +} +</pre> + +<p>The <code>displayWarning()</code> function presents a notification of a problem. It's not an elegant function but does the job for the purposes of this example:</p> + +<pre class="brush: js">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); +}</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p> + +<h2 id="Notes">Notes</h2> + +<p>Calling <code>preventDefault()</code> 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.</p> + +<p>You can use {{domxref("Event.cancelable")}} to check if the event is cancelable. Calling <code>preventDefault()</code> for a non-cancelable event has no effect.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Event.preventDefault")}}</p> 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 +--- +<p><span style="background-color: #ffffff; color: #4d4e53; display: inline !important; float: none; font-family: 'Open Sans',sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">আপনি যখন জাভাস্ক্রিট ব্যাবহার করে ওয়েব এর জ্ন্য কোড করবেন, আপনার জ্ন্য অনেকগুলি উপোযগী API আছে। নিম্নে সবগুলো interface এর লিংক দেওয়া হল।</span></p> + +<div>{{APIListAlpha}}</div> 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 +--- +<div class="summary"> +<p> ইনডেক্সডডিবি (IndexedDB) ক্লায়েন্ট-সাইড স্টোরেজ এর জন্য একটি এপিআই যা গুরুত্বপূর্ণ পরিমান গাঠনিক ডাটা জমা রাখে এবং যা ইনডেক্স এর সাহায্যে উক্ত ডাটার উপর উচ্চ কর্মক্ষমতাসম্পন্ন অনুসন্ধান চালাতে পারে।যেখানে <a href="/bn-BD/docs/DOM/Storage" title="en-US/docs/DOM/Storage">ডোম স্টোরেজ </a> উপকারী ক্ষুদ্র পরিমান ডাটা জমা রাখার জন্য, এটি কম উপকারী বড় আকারের গাঠনিক ডাটা জমা করার জন্য, সেক্ষেত্রে ইনডেক্সডডিবি(indexedDB) একটি সমাধান প্রদান করে।</p> +</div> + +<p>এই পেজটি এপিআই অবজেক্টসমূহের টেকনিক্যাল বিবরণগুলোর প্রবেশপথ হিসেবে কাজ করে। যদি আপনার প্রাথমিক বই এর দরকার হয় তবে আপনার <a href="/bn-BD/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">ইনডেক্সডডিবির প্রাথমিক ধারণা </a>দেখা উচিত। আরও বিস্তারিতের জন্য দেখুন <a href="https://developer.mozilla.org/bn-BD/docs/IndexedDB/Using_IndexedDB" title="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB">ইনডেক্সডডিবির ব্যবহার</a> ।</p> + +<p>ইনডেক্সডডিবি(IndexedDB) সিনক্রোনাস এবং এসিনক্রোনাস এক্সেস এর জন্য পৃথক এপিআই প্রদান করে। সিনক্রোনাস এপিআই কেবল <a href="/bn-BD/docs/DOM/Worker" title="Worker">ওয়েব ওয়ার্কার </a> এর ভিতরে ব্যবহারের জন্য কিন্তু এটি এখনও কোন ব্রাউজারে বাস্তবায়ন করা হয়নি। এসিনক্রোনাস এপিআই ওয়েবওয়ার্কার এর ভিতরে ও বাইরে উভয় জায়গাতে কাজ করে,কিন্তু ফায়ারফক্সে এখনও বাস্তবায়ন হয়নি।</p> + +<h2 id="এসিনক্রোনাস_এপিআই">এসিনক্রোনাস এপিআই</h2> + +<p>এসিনক্রোনাস এপিআই মেথড কলিং থ্রেডকে ব্লক না করে তা রিটার্ন করে। একটি ডাটাবেজ এ এসিনক্রোনাস প্রবেশাধিকার নেওয়ার জন্য ,একটি <a href="/en-US/docs/Web/API/IDBFactory.open"><code> </code></a><code><a href="/bn-BD/docs/DOM/window" title="en-US/docs/DOM/window">window</a> অবজেক্টের <a href="/bn-BD/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> এট্রিবিউট এর <a href="https://developer.mozilla.org/bn-BD/docs/Web/API/IDBFactory.open">open()</a></code> কল করুন। এই মেথড একটি {{domxref("IDBRequest")}} অবজেক্ট রিটার্ন করে ;এসিনক্রোনাস অপারেশনগুলো এপ্লিকেশন এর সাথে যোগাযোগ করে {{domxref("IDBRequest")}} অবজেক্টগুলোর ইভেন্ট চালুর মাধ্যমে।</p> + +<div class="note"> +<p>নোট: <code>indexedDB</code> অবজেক্ট পুরাতন ব্রাউজার ভার্সনগুলোতে পূর্বনির্ধারিত (property <code>mozIndexedDB</code> Gecko < 16 এ , <code>webkitIndexedDB</code> Chrome এ, এবং <code>msIndexedDB</code> IE 10 ে).</p> +</div> + +<p>এসিনক্রোনাস ইনডেক্সডডিবি (IndexedDB) এপিআই এর ইন্টারফেসগুলো নিচের ন্যায়:</p> + +<dl> + <dt>{{domxref("IDBFactory")}}</dt> + <dd>ডাটাবেজে প্রবেশাধিকার প্রদান করে। গ্লোবাল অবজেক্ট <a href="/bn-BD/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> এই ইন্টারফেসটি বাস্তবায়ন করছে এবং এই এপিআই এর জন্য এটি প্রবেশমুখ।</dd> + <dt>{{domxref("IDBCursor")}}</dt> + <dd>অবজেক্ট স্টোরসমূহ এবং ইনডেক্সসমূহের উপর বারবার ইটারেট করে।</dd> + <dt>{{domxref("IDBCursorWithValue")}}</dt> + <dd>অবজেক্ট স্টোরসমূহ এবং ইনডেক্সসমূহ বারবার ইটারেট করে এবং কার্সর এর বর্তমান মান রিটার্ন করে।</dd> + <dt>{{domxref("IDBDatabase")}}</dt> + <dd>ডাটাবেজের একটি সংযোগ বুঝায়। এটি একমাত্র রাস্তা যা দিয়ে ডাটাবেজে লেনদেন সম্ভব।</dd> + <dt>{{domxref("IDBEnvironment")}}</dt> + <dd>একটি ক্লায়েন্ট-সাইড ডাটাবেজে প্রবেশাধিকার প্রদান করে। এটি {{ domxref("window") }} এবং{{ domxref("worker") }} অবজেক্টসমূহদ্বারা বাস্তবায়িত হচ্ছে।</dd> + <dt>{{domxref("IDBIndex")}}</dt> + <dd>একটি ইনডেক্স এর মেটাডাটাতে প্রবেশাধিকার প্রদান করে।</dd> + <dt>{{domxref("IDBKeyRange")}}</dt> + <dd>কীসমূহের একটি সীমা সংজ্ঞায়িত করে।</dd> + <dt>{{domxref("IDBObjectStore")}}</dt> + <dd>একটি অবজেক্ট স্টোরকে প্রতিনিধিত্ব করে।</dd> + <dt>{{domxref("IDBOpenDBRequest")}}</dt> + <dd>একটি ডাটাবেজ খোলার অনুরোধকে প্রতিনিধিত্ব করে।</dd> + <dt>{{domxref("IDBRequest")}}</dt> + <dd>ডাটাবেজ এবং ডাটাবেজ অবজেক্টসমূহে এসিনক্রোনাস অনুরোধগুলোর ফলাফলে প্রবেশাধিকার প্রদান করে। এটি হল যেটি আপনি এসিনক্রোনাস মেথডকে কল করার ফলে পান।</dd> + <dt>{{domxref("IDBTransaction")}}</dt> + <dd>একটি ডাটাবেজ ট্রানসেকশনকে প্রতিনিধিত্ব করে। আপনি একটি ডাটাবেজে ট্রানসেকশন তৈরী করেন,স্কোপটি বলে দিলে(যেমন কোন অবজেক্ট স্টোরগুলোতে আপনি প্রবেশাধিকার চাচ্ছেন) এবং কি ধরণের প্রবেশাধিকার চাচ্ছেন( কেবলমাত্র পাঠ নাকি লেখাসহ)।</dd> +</dl> + +<ul> +</ul> + +<p>স্পেসিফেকেশন এর একটি প্রাথমিক ভার্সনে এই মুছে ফেলা ইন্টারফেসগুলো সংজ্ঞায়িত ছিল। কিন্তু এগুলো এখনো নথিবদ্ধ করে রাখা হয়েছে যাতে আপনার পূর্বে লেখা কোন কোড পরিবর্তনের প্রয়োজন হয়।</p> + +<dl> + <dt>{{domxref("IDBVersionChangeRequest")}}</dt> + <dd>একটি ডাটাবেজের ভার্সন পরিবর্তনের অনুরোধকে প্রতিনিধিত্ব কওরে। ডাটাবেজের ভার্সন পরিবর্তনের উপায় সম্প্রতি বদলানো হয়েছে ({{domxref("IDBFactory.open")}} কে কল করে এবং {{domxref("IDBDatabase.setVersion")}}কে কল না করে), এবং {{domxref("IDBOpenDBRequest")}} ইন্টারফেসটি এখন মুছে ফেলা {{domxref("IDBVersionChangeRequest")}} এর কাজ করতে পারে।</dd> + <dt>{{domxref("IDBDatabaseException")}} {{ obsolete_inline() }}</dt> + <dd>ডাটাবেজ অপারেশন এর সময় প্রাপ্ত এক্সসেপশন শর্তগুলোকে প্রতিনিধিত্ব করে।</dd> +</dl> + +<ul> +</ul> + +<div class="note"> +<p><strong>নোট: </strong> এই <a href="/bn-BD/docs/IndexedDB/Syncronous_API" title="/en-US/docs/IndexedDB/SyncronousAPI"> এপিআই এর একটি সিনক্রোনাস ভার্সন </a> আছে,যা কোন ব্রাউজার এখনও বাস্তবায়িত হয়নি। এটি কোন ব্রাউজারে এখনও বাস্তবায়িত হয় নি। এটি <a href="/bn-BD/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">ওয়েব ওয়ার্কার </a>এর সাথে ব্যবহারের জন্য তৈরী।</p> +</div> + +<h2 id="স্টোরেজ_সীমা"> স্টোরেজ সীমা</h2> + +<p>একক ডাটাবেজ এর আইটেম সাইজ এর কোন সীমা নেই। কিন্তু ইনডেক্সডডিবি (IndexedDB) ডাটাবেজ সাইজ এর একটি সীমা থাকতে পারে। এই সীমা(এবং কিভাবে ইউজার ইন্টারফেস তা ব্যবহার করবে) তা এক ব্রাউজার ও অন্য ব্রাউজার এ ভিন্ন হতে পারে।</p> + +<ul> + <li> + <p>ফায়ারফক্স: ইনডেক্সডডিবি ডাটাবেজ সাইজের কোন সীমা নেই। ইউজার ইন্টারফেস ৫০ এমবি এর বড় ব্লব এর জন্য অনুমতি প্রার্থনা করবে এবং এই সাইজ কোটা <code>dom.indexedDB.warningQuota</code> অগ্রাধিকার হতে পরিবর্তন করা যেতে পারে। (যা সংজ্ঞায়িত আছে <a href="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js" title="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js">http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js</a>)</p> + </li> + <li> + <p>গুগল ক্রোম: দেখুন <a class="link-https" href="https://developers.google.com/chrome/whitepapers/storage#temporary" rel="freelink">https://developers.google.com/chrome...rage#temporary</a></p> + </li> +</ul> + +<h2 id="Example" name="Example">উদাহারণ</h2> + +<ul> + <li>মার্কো ক্যাস্টেলুচিও একটি শক্তিশালী উদাহারণ প্রদান করেছে কিভাবে ওয়েব এ ইনডেক্সডডিবি ব্যবহার সম্ভব , উল্লেখ্য তিনি ইনডেক্সডডিবি মজিলা ডেভ ডার্বি এর বিজয়ী ছিলেন। বিজয়ী ডেমোটি ছিল <a href="/en-US/demos/detail/elibri" title="https://developer.mozilla.org/en-US/demos/detail/elibri">ইলিব্রি</a>, একটি লাইব্রেরী এবং ইবুক রিডার এপ্লিকেশন।</li> + <li>আপনি এছাড়াও রেফারেন্স ডক এর রেফারেন্স এপ্লিকেশনটি দেখতে পারেন : <a class="external" href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">টু-ডু নটিফিকেশন </a> (<a class="external" href="http://chrisdavidmills.github.io/to-do-notifications/">সরাসরি উদাহারণ দেখুন </a>)। সমস্ত কোড অংশগুলো এই উদাহারণে আসে নি, কিন্তু প্রতিটি উদাহারণ একই ডাটা স্ট্রাকচার ও সিনট্যাক্স ব্যবহার করছে এবং এই এপ্লিকেশন এর প্রেক্ষাপটে তা যথাযথ।</li> +</ul> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ব্রাউজার সামঞ্জস্যতা</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>বৈশিষ্ট্য</th> + <th>ক্রোম</th> + <th>ফায়ারফক্স(গেকো )</th> + <th>ইন্টারনেট এক্সপ্লোরার</th> + <th>ওপেরা</th> + <th> + <p>সাফারি</p> + + <p>(ওয়েবকিট)</p> + </th> + </tr> + <tr> + <td>এসিনক্রোনাস এপিআই</td> + <td> + <p>১১.0 {{ property_prefix("webkit") }}<br> + 24</p> + </td> + <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>১০</td> + <td>১৭</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>সিনক্রোনাস এপিআই<br> + (<a href="/bn-BD/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">ওয়েব ওয়ার্কার</a> এর সাথে ব্যবহৃত)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}<br> + See {{ bug(701634) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>বৈশিষ্ট্য</th> + <th>এন্ড্রয়েড</th> + <th>ফায়ারফক্স মোবাইল (গেকো)</th> + <th> + <p>আই-ই</p> + + <p>ফোন</p> + </th> + <th>ওপেরা মোবাইল</th> + <th>সাফারি মোবাইল</th> + </tr> + <tr> + <td>এসিনক্রোনাস এপিআই</td> + <td>৪.৪</td> + <td>{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>১০</td> + <td>১৭</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div class="note"> +<p>নোট :কিছু ব্রাউজার এখনও ইনডেক্সডডিবি সাপোর্ট না করলেও <a href="http://caniuse.com/sql-storage" title="http://caniuse.com/sql-storage">ওয়েব সিকুয়েল (webSQL)সাপোর্ট করে</a>, যেমন সাফারি/ওয়েবকিট ডেস্কটপ ও আইওএস। এই সমস্যার একটি সমাধান হচ্ছে <a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">ইনডেক্সডডিবি পলিফিল বা শিম </a> ব্যবহার করা যা অসর্মথিত ব্রাউজার এর ক্ষেত্রে ওয়েবসিকুয়েল এ ফল ব্যাক করে।</p> +</div> + +<h2 id="আরও_দেখুন">আরও দেখুন</h2> + +<ul> + <li><a href="/bn-BD/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en-US/docs/IndexedDB/Basic Concepts Behind IndexedDB">ইনডেক্সডডিবি এর প্রাথমিক ধারণা </a></li> + <li><a href="/bn-BD/docs/IndexedDB/Using_IndexedDB" title="en-US/docs/IndexedDB/IndexedDB primer">ইনডেক্সডডিবি এর ব্যবহার </a></li> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/" title="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">ইনডেক্সডডিবিতে ছবি ও ফাইল স্টোর </a></li> + <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">ইনডেক্সড ডাটাবেজ এপিআই স্পেসিফিকেশন </a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">ইনডেক্সড ডিবি- আপনার ব্রাউজার স্টোরেজ </a></li> + <li><a class="external" href="http://nparashuram.com/IndexedDB/trialtool/index.html" title="http://nparashuram.com/IndexedDB/trialtool/index.html">ইনডেক্সড ডিবি উদাহারণ </a></li> + <li><a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">ইনডেক্সডডিবি পলিফিল/শিম </a>যে সমস্ত ব্রাউজারে কেবল ওয়েব সিকুয়েল সর্মথিত(যেমন মোবাইল ওয়েবকিট )</li> + <li><a href="http://nparashuram.com/IndexedDBShim/" title="http://nparashuram.com/IndexedDBShim/">ইনডেক্সডডিবি জেকুয়েরি প্লাগইন</a></li> +</ul> 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 +--- +<p>{{APIRef}}</p> + +<p><strong><code>InputEvent</code></strong> ইন্টারফেসটি সম্পাদনযোগ্য কন্টেন্টে কোন পরিবর্তন হলে, সে পরিবর্তন সম্পর্কে জানায়।</p> + +<h2 id="প্রোপার্টি">প্রোপার্টি</h2> + +<p><em><code>InputEvent</code></em><em> ইন্টারফেসটির কোন প্রোপার্টি নেই।</em></p> + +<h2 id="মেথড">মেথড</h2> + +<p><em><code>InputEvent</code></em> <em>ইন্টারফেসটির কোন মেথড নেই।</em></p> + +<h2 id="ইভেন্ট">ইভেন্ট</h2> + +<dl> + <dt>{{domxref("InputEvent.data")}} {{readOnlyInline}}</dt> + <dd>লেখা বর্ণগুলি নিয়ে একটু {{domxref("DOMString")}} রিটার্ন করে। এই স্ট্রিংটি খালি হতে পারে, যদি পরিবর্তনের ফলে নতুন বর্ণ লেখা না হয়। (যেমন বর্ণ মুছার সময়)</dd> + <dt>{{domxref("InputEvent.isComposing")}} {{readOnlyInline}}</dt> + <dd><code>compositionstart</code> এর আগে এবং <code>compositionend</code> এর পরে একটু বুলিয়ান ভ্যালু নিয়ে ইভেন্ট ফায়ার করে।</dd> +</dl> + +<h2 id="ব্রাউজার_সমর্থন">ব্রাউজার সমর্থন</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>ফিচার</th> + <th>ক্রোম</th> + <th>ফায়ারফক্স (গেকো)</th> + <th>ইন্টারনেট এক্সপ্লোরার</th> + <th>অপেরা</th> + <th>সাফারি (ওয়েবকিট)</th> + </tr> + <tr> + <td><code>data</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>isComposing</code></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop("31.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>ফিচার</th> + <th>অ্যান্ড্রয়েড</th> + <th>ফায়ারফক্স মোবাইল (গেকো)</th> + <th>ইন্টারনেট এক্সপ্লোরার ফোন</th> + <th>অপেরা মোবাইল</th> + <th>সাফারি মোবাইল</th> + </tr> + <tr> + <td><code>data</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>isComposing</code></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("31.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 class="note" id="আরও_দেখুন">আরও দেখুন</h2> + +<ul> + <li><code>beforeinput</code></li> + <li><code>input</code></li> +</ul> 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 +--- +<div> + {{APIRef}}</div> +<p>একটি অবজেক্ট, যেটি একক স্টাইল শীট তথা <code>StyleSheet</code> ইন্টারফেস বর্ণনা করে। সিএসএস স্টাইল শীট সমূহ আরও বিশেষ ধরণের {{domxref("CSSStyleSheet")}} ইন্টারফেস বাস্তবায়ন করবে।</p> +<h2 id="Properties" name="Properties">প্রপার্টি সমূহ</h2> +<dl> + <dt> + {{domxref("StyleSheet.disabled")}}</dt> + <dd> + এটি একটি {{domxref("Boolean")}} মান, যেটা বর্ণনা করবে যে বর্তমান স্টাইলশীট টি প্রয়োগ করা হয়েছে কি না।</dd> + <dt> + {{domxref("StyleSheet.href")}} {{readonlyInline}}</dt> + <dd> + এটি একটি {{domxref("DOMString")}} প্রদান করে, যেটার মধ্যে স্টাইলশীটের অবস্থান লেখা থাকবে।</dd> + <dt> + {{domxref("StyleSheet.media")}} {{readonlyInline}}</dt> + <dd> + এটি একটি {{domxref("MediaList")}} দেয়, যার মধ্যে স্টাইল তথ্যের কাঙ্ক্ষিত লক্ষ্যের মাধ্যম বর্ণনা করা থাকে।</dd> + <dt> + {{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}</dt> + <dd> + এটা একটি {{domxref("Node")}} প্রদান করে, যা বর্তমান ডকুমেন্টের সাথে এই স্টাইলশীটকে যুক্ত করে।</dd> + <dt> + {{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}</dt> + <dd> + বর্তমানটির সাথে এটি আরও একটি {{domxref("StyleSheet")}} দেয় (যদি থাকে); যদি কোন স্টাইলশীট না থাকে, তাহলে <code>null</code> প্রদান করে।</dd> + <dt> + {{domxref("StyleSheet.title")}} {{readonlyInline}}</dt> + <dd> + বর্তমান স্টাইলশীটের শিরোনামের জন্য এটা {{domxref("DOMString")}} প্রদান করে।</dd> + <dt> + {{domxref("StyleSheet.type")}}{{readonlyInline}}</dt> + <dd> + বর্তমান স্টাইলশীটের ভাষা উপস্থাপন করার জন্য এটা {{domxref("DOMString")}} প্রদান করে।</dd> +</dl> +<h2 id="Specification" name="Specification">বৈশিষ্ট্য</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">বৈশিষ্ট্য</th> + <th scope="col">অবস্থা</th> + <th scope="col">মন্তব্য</th> + </tr> + <tr> + <td>{{ SpecName('CSSOM', '#stylesheet', 'StyleSheet') }}</td> + <td>{{ Spec2('CSSOM') }}</td> + <td>{{ SpecName('DOM2 Style') }} এরপর থেকে কোন পরিবর্তন হয়নি।</td> + </tr> + <tr> + <td>{{ SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet') }}</td> + <td>{{ Spec2('DOM2 Style') }}</td> + <td>প্রাথমিক সংজ্ঞা।</td> + </tr> + </tbody> +</table> +<h2 id="আরও_দেখুন">আরও দেখুন</h2> +<ul> + <li>{{domxref("CSSStyleSheet")}}</li> +</ul> 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 +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p><strong>CSS Animations</strong> 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.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("animation")}}</li> + <li>{{cssxref("animation")}}</li> + <li>{{cssxref("animation-delay")}}</li> + <li>{{cssxref("animation-direction")}}</li> + <li>{{cssxref("animation-duration")}}</li> + <li>{{cssxref("animation-fill-mode")}}</li> + <li>{{cssxref("animation-iteration-count")}}</li> + <li>{{cssxref("animation-name")}}</li> + <li>{{cssxref("animation-play-state")}}</li> + <li>{{cssxref("animation-timing-function")}}</li> +</ul> +</div> + +<h3 id="CSS_At-rules">CSS At-rules</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@keyframes")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Detecting CSS animation support</a></dt> + <dd>Describes a technique for detecting if the browser supports CSS animations.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + 43.0</td> + <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>12{{property_prefix("-o")}}<br> + 12.10<sup>[2]</sup></td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1 {{property_prefix("-webkit")}} [1]<br> + 4.0 {{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.</p> + +<p>[2] See the <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations on user actions.</li> +</ul> + +<p> </p> 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 +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p><strong>CSS Transforms</strong> is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("backface-visibility")}}</li> + <li>{{cssxref("perspective")}}</li> + <li>{{cssxref("perspective-origin")}}</li> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("transform-box")}}</li> + <li>{{cssxref("transform-origin")}}</li> + <li>{{cssxref("transform-style")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a></dt> + <dd>Step-by-step tutorial about how to transform elements styled with CSS.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transforms') }}</td> + <td>{{ Spec2('CSS3 Transforms') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + 36</p> + </td> + <td>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("16.0")}}<sup>[2]</sup></td> + <td>9.0{{property_prefix("-ms")}}<sup>[3]</sup><br> + 10.0</td> + <td>10.5{{property_prefix("-o")}}<br> + 12.10<br> + 15.0{{property_prefix("-webkit")}}<br> + 23</td> + <td>3.1{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>3D Support</td> + <td>12.0{{property_prefix("-webkit")}}<br> + 36</td> + <td>10.0{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10.0</td> + <td>15.0{{property_prefix("-webkit")}}<br> + 23</td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}<sup>[4]</sup></td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<br> + 11.0{{property_prefix("-webkit")}}<sup>[5]</sup></td> + <td>11.5{{property_prefix("-webkit")}}</td> + <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>3D Support</td> + <td>{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>22{{property_prefix("-webkit")}}</td> + <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 14.0 removed the experimental support for <code>skew()</code>, 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.</p> + +<p>[2] Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("<length>")}}, in addition to the standard {{cssxref("<number>")}}.</p> + +<p>[3] Internet Explorer 5.5 or later supports a proprietary <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve a similar effect.</p> + +<p>Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as <code>-ms-transform:rotate(10deg) translateZ(0);</code> will prevent the entire property from being applied.</p> + +<p>[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a <code>-webkit-transform</code>.</p> + +<p>[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} <a href="https://msdn.microsoft.com/library/jj127312#code-snippet-1">prefixed variant as an alias for the default one</a>.</p> + +<p> </p> 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() +--- +<div> + {{CSSRef}}{{SeeCompatTable}}</div> +<h2 id="Summary" name="Summary">সারাংশ</h2> +<h2 id="Summary" name="Summary"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;"><span style="color: #0000cd;"><a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a> </span> ফাংশন এলিমেন্টটি একটি{ {xref_cssimage}} এর মান কে সংজ্ঞায়িত করে যা একটি arbitrary HTML এলিমেন্ট থেকে উৎপন্ন হয়।এই ছবিটি জীবন্ত, অর্থাৎ যদি HTML উপাদান পরিবর্তন করা হয় ,তবে ফলপ্রসূ মান ব্যবহারিত সিএসএস বৈশিষ্ট্যগুলো স্বয়ংক্রিয়ভাবে আধুনিকায়িত হয়ে যাবে ।</span></h2> +<p>এটি ব্যবহার এর জন্য একটি বিশেষ দৃশ্য হবে HTML এ ছবি রেনডার করা'{{HTMLELEMENT("canvas")}} , তারপর এটিকে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করবে ।</p> +<p>গেকো ব্রাউজার এ আপনি নন- স্ট্যান্ডর্ডটি ব্যবহার করতে পারেন । {{domxref("document.mozSetImageElement()")}} এই পদ্ধতিটি একটি দেয়া সিএসএস ব্যাকগ্রাউন্ড এর ব্যাকগ্রাউন্ড হিসেবে ব্যবহৃত হওয়া এলিমেন্ট এর পরিবর্তন করে।</p> +<h2 id="Syntax" name="Syntax">পদবিন্যাস</h2> +<pre class="syntaxbox notranslate">element( <em>id</em> )</pre> +<p>যেখানে,</p> +<dl> + <dt> + <strong><code>id</code></strong></dt> + <dd> + একটি এলিমেন্ট এর ID কে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করতে ,বিশেষ করে এলিমেন্ট এর উপর HTML attribute #id ব্যবহার করা হয়।</dd> +</dl> +<h2 id="Examples" name="Examples">উদাহরন</h2> +<p>এই উদাহরনগুলো <a href="https://developer.mozilla.org/samples/cssref/moz-element.html" title="https://developer.mozilla.org/samples/cssref/moz-element.html">viewed live</a> এ দেখা যাবে <span style="line-height: 1.5;">builds of Firefox এ যা </span><code style="font-style: normal; line-height: 1.5;">-moz-element() সহায়তা করে।</code></p> +<h3 id="কিছু_বাস্তব_উদাহরন">কিছু বাস্তব উদাহরন</h3> +<p>এই উদাহরনটি একটি লুকানো {{HTMLElement("div")}} কে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করে।ব্যাকগ্রাউন্ড এলিমেন্টটি একটি নতি ব্যবহার করে কিন্তু সেই সাথে টেক্সট ও অন্তর্ভুক্ত করে যা ব্যাকগ্রাউন্ড এর অংশ হিসেবে রেনডার করা হয়।</p> +<pre class="brush: html notranslate"><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></pre> +<p> {{HTMLElement("div")}} এলিমেন্টের সাথে ID "myBackground1" কনটেন্ট এর ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করা হয় যেখানে "This box uses the element with the #myBackground1 ID as its background!" এই অনুছেদটি অন্তর্ভুক্ত করা হয়।</p> +<p><img alt="example1.png" class="internal default" src="/@api/deki/files/4624/=example1.png"></p> +<h3 id="আরও_কিছু_অদ্ভুত_উদাহরন">আরও কিছু অদ্ভুত উদাহরন</h3> +<p>এই উদাহরনটি একটি লুকানো {{HTMLElement("button")}} এলিমেন্ট কে পুনরাবৃওি নমুনায় ব্যাকগ্রাউনড হিসেবে ব্যবহার করে।এটি প্রমান করে যে আপনি ব্যাকগ্রাউন্ড হিসেবে arbitrary এলিমেন্ট ব্যবহার করতে পারেন কিন্তু ভাল নকশা অনুশীলনে ততটা প্রয়োজনীয় নয়।</p> +<pre class="brush: html notranslate"><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> +</pre> +<p><img alt="example2.png" class="internal default" src="/@api/deki/files/4625/=example2.png"></p> +<h2 id="নির্দিষ্টকরন">নির্দিষ্টকরন</h2> +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="http://dev.w3.org/csswg/css4-images/" title="http://dev.w3.org/csswg/css4-images/">CSS Image Values and Replaced Content Level 4</a></td> + <td>{{Spec2('CSS4 Images')}}</td> + <td>Actually now deferred to CSS4.</td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility" name="Browser_compatibility">ব্রাউজার সুসঙ্গত</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0 (2.0) [*] {{property_prefix("-moz")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0 (2.0) [*] {{property_prefix("-moz")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<p>[*] ব্যবহৃত {{cssxref("background")}} এবং {{cssxref("background-image")}} সিএসএস বৈশিষ্ট্গুলোর জন্য সিমাবদ্ধ।</p> +<h2 id="আরও_দেখুন">আরও দেখুন</h2> +<ul> + <li>{{domxref("document.mozSetImageElement()")}}</li> +</ul> 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 +--- +<p>{{ CSSTutorialTOC() }}</p> +<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles")}}এটা হচ্ছে <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">যেভাবে শুরু করবেন CSS </a> টিউটোরিয়ালের ৮ম বিভাগ; এটা ব্যাখ্যা করবে কিভাবে আপনি CSS এ রং উল্লেখ করবেন. আপনি আপনার নমুনা স্টাইলশিট এ পরিচিত হবেন background রং এর সাথে।</p> +<h2 class="clearLeft" id="তথ্য_রং_(color)">তথ্য: রং (color)</h2> +<p>এই টিউটোরিয়ালে এখন পর্যন্ত ,আপনি ব্যবহার করেছেন একটি নির্দিষ্ট সংখ্যক রং এর নাম . CSS 2 সর্বোপরি ১৭ টি রং এর নাম বহন করে। কিছু নাম হয় তো সেগুলো, যেগুলো আপনি আশা করেন না।</p> +<table style="border: 0px; margin-left: 2em; text-align: right;"> + <tbody> + <tr> + <td> </td> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: black;"> </td> + <td>gray</td> + <td style="width: 2em; height: 2em; background-color: gray;"> </td> + <td>silver</td> + <td style="width: 2em; height: 2em; background-color: silver;"> </td> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> + </tr> + <tr> + <td>primaries</td> + <td>red</td> + <td style="width: 2em; height: 2em; background-color: red;"> </td> + <td>lime</td> + <td style="width: 2em; height: 2em; background-color: lime;"> </td> + <td>blue</td> + <td style="width: 2em; height: 2em; background-color: blue;"> </td> + </tr> + <tr> + <td>secondaries</td> + <td>yellow</td> + <td style="width: 2em; height: 2em; background-color: yellow;"> </td> + <td>aqua</td> + <td style="width: 2em; height: 2em; background-color: aqua;"> </td> + <td>fuchsia</td> + <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> + </tr> + <tr> + <td> </td> + <td>maroon</td> + <td style="width: 2em; height: 2em; background-color: maroon;"> </td> + <td>orange</td> + <td style="width: 2em; height: 2em; background-color: orange;"> </td> + <td>olive</td> + <td style="width: 2em; height: 2em; background-color: olive;"> </td> + <td>purple</td> + <td style="width: 2em; height: 2em; background-color: purple;"> </td> + <td>green</td> + <td style="width: 2em; height: 2em; background-color: green;"> </td> + <td>navy</td> + <td style="width: 2em; height: 2em; background-color: navy;"> </td> + <td>teal</td> + <td style="width: 2em; height: 2em; background-color: teal;"> </td> + </tr> + </tbody> +</table> +<p> </p> +<div class="tuto_details"> + <div class="tuto_type"> + বিস্তারিত</div> + <p>আপনার browser হয়ত আরও অনেক রং এর নাম বহন করতে পারে, যেমনঃ</p> + <table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;"> + <tbody> + <tr> + <td>dodgerblue</td> + <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> + <td>peachpuff</td> + <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> + <td>tan</td> + <td style="width: 2em; height: 2em; background-color: tan;"> </td> + <td>firebrick</td> + <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> + <td>aquamarine</td> + <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> + </tr> + </tbody> + </table> + <p>এই প্রসারিত তালিকার আরও বিস্তারিত জানার জন্য দেখুন: <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> CSS 3 এর রং এর মডিউল এ। সতর্ক থাকুন ওই সব রং এর নাম ব্যবহারে যেগুলো আপনার পাঠকের browsers এ হয়ত বহন করে না।</p> +</div> +<p>একটি বৃহৎ palette এর জন্য, যে রং গুলো আপনি চান সেগুলোর লাল (red), সবুজ(green) এবং নীল( blue) উপাদানগুলো উল্লেখ করুন হ্যাশট্যাগ (#) দিয়ে এবং ৩টি <em>হেক্সাডেসিমাল</em>(<em>hexadecimal)</em> সংখ্যা যাদের শ্রেণী 0 - 9 , a – f. a – f অক্ষরগুলো দিয়ে 10 – 15 এর মান বুঝায়:</p> +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000</code></td> + </tr> + <tr> + <td>pure red</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>pure green</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#0f0</code></td> + </tr> + <tr> + <td>pure blue</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#00f</code></td> + </tr> + <tr> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + </tbody> +</table> +<p>সম্পূর্ণ palette এর জন্য, প্রতিটি উপাদানের ক্ষেত্রে উল্লেখ করুন দুইটি হেক্সাডেসিমাল সংখ্য:</p> +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000000</code></td> + </tr> + <tr> + <td>pure red</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#ff0000</code></td> + </tr> + <tr> + <td>pure green</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#00ff00</code></td> + </tr> + <tr> + <td>pure blue</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#0000ff</code></td> + </tr> + <tr> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#ffffff</code></td> + </tr> + </tbody> +</table> +<p>আপনি সচারচর এই ৬ সংখ্যার হেক্সাডেসিমাল কোড গুলো আপনার গ্রাফিক্স প্রোগ্রাম অথবা অন্য কোন টুলস থেকে পেতে পারেন।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <div class="tuto_type"> + <strong>সামান্য প্র্যাকটিস করে, আপনি তিন সংখ্যার রং গুলো আপনার বেশিরভাগ কাজের জন্য সুবিন্যস্ত করতে পারবেনঃ</strong></div> + <div class="tuto_type"> + </div> + <table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> + <tbody> + <tr> + <td>শুরু লাল এর সাথে:</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>একে হাল্কা করার জন্য, কিছু সবুজ এবং নীল যোগ করুনঃ</td> + <td style="width: 2em; height: 2em; background-color: #f77;"> </td> + <td><code>#f77</code></td> + </tr> + <tr> + <td>একে আরও কমলা করার জন্য, সামান্য একটু এক্সট্রা সবুজ যোগ করুনঃ</td> + <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> + <td><code>#fa7</code></td> + </tr> + <tr> + <td>আরও ডার্ক করার জন্য, এর সব উপাদান মুছে ফেলুন:</td> + <td style="width: 2em; height: 2em; background-color: #c74;"> </td> + <td><code>#c74</code></td> + </tr> + <tr> + <td>এর সম্পৃক্তি দূর করার জন্য, এর উপাদান গুলো কে আরও সমান করুনঃ</td> + <td style="width: 2em; height: 2em; background-color: #c98;"> </td> + <td><code>#c98</code></td> + </tr> + <tr> + <td>আপনি যদি একদম সমান করেন তাহলে আপনি পাবেন ধুুসরঃ</td> + <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> + <td><code>#ccc</code></td> + </tr> + </tbody> + </table> + <p>একটি মোমের মত শেডের জন্য যেমন বর্ণহীন নীলঃ</p> + <table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> + <tbody> + <tr> + <td>শুরু একদম শুভ্র সাদা থেকে:</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + <tr> + <td>অন্যান্য উপাদানগুলো সামান্য কমান:</td> + <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> + <td><code>#eef</code></td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + আরও বিস্তারিত</div> + <p>আপনি আরও উল্লেখ করতে পারেন একতি রং এর ডেসিমাল RGB মানগনগুলো যাদের শ্রেণী 0 – 25 অথবা percentages.</p> + <p>উদাহরণস্বরূপ ,মেরুন (dark red):</p> + <pre class="brush:css language-css"><code class="language-css"><span class="token function">rgb</span>(128, 0, 0)</code></pre> + <p>কিভাবে রং উল্লেখ করা যায় তার আরও বিস্তারিত জানার জন্য দেখুনঃ <a class="external external-icon" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">রং</a> CSS সুনির্দিষ্টকরণে এ। ম্যাচিং সিস্টেম রং যেমন মেনু এবং ThreeDFace, দেখুন: <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> CSS সুনির্দিষ্টকরণে এ।</p> +</div> +<p> </p> +<p>আপনি ইতিমধ্যে {{ cssxref("color") }} প্রপার্টি text এ ব্যবহার করেছেন ।</p> +<p>আপনি চাইলে আরও ব্যবহার করতে পারেন {{ cssxref("background-color") }} প্রপার্টি টি যাতে করে আপনি উপাদানগুলোর ব্যাকগ্রাউন্ড পরিবর্তন করতে পারেন।</p> +<p>ব্যাকগ্রাউন্ড টি আপনি সেট করতে পারেন স্বচ্ছ ভাবে যাতে করে আপনি স্পষ্টভাবে যে কোন রং মুছে ফেলতে পারেন, মূল উপাদানের ব্যাকগ্রাউন্ড প্রকাশ করে।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>এই টিউটোরিয়ালে <strong>উদাহরণ</strong> বাক্সগুলোতে বর্ণহীন হলুদ ব্যাকগ্রাউন্ড ব্যবহার করা হয়েছে:</p> + <pre class="brush:css">background-color: #fffff4; +</pre> + <p><strong>আরও বিস্তারিত</strong> বাক্সগুলো এই বর্ণহীন ধূসর ব্যবহার করেছেঃ</p> + <pre class="brush:css">background-color: #f4f4f4; +</pre> +</div> +<p> </p> +<h2 id="কাজ_কালার_কোড_এর_ব্যবহার">কাজ: কালার কোড এর ব্যবহার</h2> +<ol> + <li>আপনার CSS ফাইল সম্পাদন করুন।</li> + <li>এখানে মোটা করে যেগুলো দেখানো হয়েছে সেগুলো পরিবর্তন করুন, যাতে করে আপনি আদি অক্ষরগুলো কে একটি বর্ণহীন নীল রং দিতে পারেন। ( যে বিন্যাসগুলো এবং মন্তব্যগুলো আপনার ফাইলে দেখানো হয়েছে সেগুলো সম্ভবত দেখানো ফাইলগুলো হতে ভিন্ন।এই বিন্যাস এবং উক্তিগুলো আপনার মত করে সেভ করে রাখুন।)<br> + <pre class="brush:css;highlight:[13]">/*** 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;} +</pre> + </li> + <li>ফাইলটি সেভ করুন এবং আপনার ব্রাউজার টিকে রিফ্রেশ করুন যাতে করে আপনি ফলাফলটি দেখতে পারেন।</li> +</ol> +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> +</table> +<table class="standard-table"> + <tbody> + <tr> + <td> + <p><strong>প্রতিদন্দিতাঃ</strong><br> + আপনার CSS ফাইলে ,সব গুলো কালারের নাম পরিবর্তন করে 3 ডিজিট এর কালার কোড এ পরিবর্তন করুন ফলাফলে কোন প্রভাব না ফেলে।</p> + <p>(এটা হয়ত একদম সঠিক ভাবে হবে না, কিন্তু আপনি কাছাকাছি যেতে পারবেন। একদম সঠিক ভাবে করার জন্য আপনার প্রয়োজন 6 ডিজিট এর কোডসমূহ, এবং প্রয়োজন CSS সুনির্দিষ্টকরন দেখা অথবা ব্যবহার করুন একটি গ্রাফিক্স টুল যাতে করে কালার গুলো মিল করাতে পারেন।)</p> + <p> <a href="https://developer.mozilla.org/bn-BD/docs/Web/CSS/Getting_Started/Color$edit#tutochallenge">প্রতিদ্বন্দ্বিতার জন্য সমাধান দেখুন।</a></p> + </td> + </tr> + </tbody> +</table> +<h2 id="এরপর_কি"><strong>এরপর কি?</strong></h2> +<p><br> + {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}আপনার নমুনা ডকুমেন্ট এবং আপনার নমুনা stylesheet এর থেকে সম্পূর্ণভাবে আলাদা। এর পরে <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">পরবর্তী বিভাগ</a> ব্যাখ্যা করবে কেমন করে আপনি এই সম্পূর্ণ আলাদা জিনিস থেকে ভিন্ন কিছু তৈরি করবেন।<br> + </p> 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 +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}} এটি<span class="seoSummary"><a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> <span class="short_text" id="result_box" lang="bn"><span class="hps">টিউটোরিয়াল</span> এর <span class="hps">তৃতীয়</span> <span class="hps">অধ্যায়</span></span>; <span id="result_box" lang="bn"><span class="hps">এটা</span> <span class="hps">আপনার ব্রাউজারে</span> CSS <span class="hps">কিভাবে কাজ করে</span> <span class="hps">ব্যাখ্যা করে</span></span>। <span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="hps">বিশ্লেষণ করেন,<span id="result_box" lang="bn"><span class="hps">তার</span> <span class="alt-edited hps">স্টাইল</span> এর <span class="hps">বিবরণ</span> <span class="hps">প্রকাশের মধ্য দিয়ে।</span></span></span></span></span></p> + +<h2 class="clearLeft" id="তথ্য_CSS_কিভাবে_কাজ_করে">তথ্য: CSS কিভাবে কাজ করে</h2> + +<p>যখন একটি ব্রাউজার একটি ডকুমেন্ট প্রদর্শন করে, এটি অবশ্যই ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল তথ্য এর সমন্বয় ঘটায়।এটি ডকুমেন্ট টি কে দুই ধাপে প্রসেস করে থাকেঃ</p> + +<ol> + <li>ব্রাউজার টি মার্ক আপ লেঙ্গুয়েজ এবং সিএসেস একটি কাঠামোতে পরিবর্তন করে যেটির নাম <a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (ডকুমেন্ট অবজেক্ট মডেল). The DOM কম্পিউটার এর মেমরি তে ডকুমেন্ট কে উপস্থাপন করে.এটি ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল এর সমন্বয় ঘটায়।</li> + <li>ব্রাউজার টি DOM এর কন্টেন্ট গুলো কে তুলে ধরে।</li> +</ol> + +<p>একটি মার্ক আপ ল্যাঙ্গুয়েজ <em>elements</em>ব্যাবহার করে ডকুমেন্ট এর গঠন ব্যাখ্যা দেয়ার জন্য। ট্যাগ ব্যাবহার করে আপনি একটি elementকে মার্ক করতে পারেন, এর মধ্যে আছে স্ট্রিং যেটা শুরু হয় '<' দিয়ে এবং শেষ হয় '<' দিয়ে। বেশির ভাগ এলিমেন্ট এর জোড়া ট্যাগ আছে।একটি স্টার্ট ট্যাগ আর এন্ড ট্যাগ। স্টার্ট এর ক্ষেত্রে, elementএর নাম, '<code>< ></code>' এর ভিতরে ।এন্ড ট্যাগ <code>এর ক্ষেত্রে element</code> এর নাম এর আগে ,'<' এর পরে '/' বসাতে হবে।</p> + +<p>মার্ক আপ ল্যাঙ্গুয়েজ এর উপর ভিত্তি করে, কিছু element এর শুধু মাত্র স্টার্ট ট্যাগ অথবা শুধুমাত্র সিঙ্গেল ট্যাগ থাকবে যেখানে '/' নাম এর পরে আসে।</p> + +<p>একটি element একটি পাত্র হতে পারে , স্টার্ট ট্যাগ এবং এন্ড ট্যাগ এর মাঝে অন্যান্য উপকরন নিএ।</p> + +<p>একটি DOM এর গাছ এর মত কাঠামো থাকে. মার্ক আপ ল্যাঙ্গুয়েজ এ প্রতিটি element and টেক্সট এর রান একটি <em>node</em> হিসেবে কাজ করে এই গাছ কাঠামোতে. DOM nodes গুলো পাত্র নয়। বরং, এগুলোকে শিশু node এর অভিভাবক ধরা যায়।</p> + +<div class="tuto_example"> +<div class="tuto_type">উদাহরনঃ</div> +আপনার সেম্পল উদাহরনে, <code><p></code> ট্যাগ এবং এর অ্যান্ড ট্যাগ <code></p></code> একটি পাত্র তৈরি করে + +<pre class="brush:html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p> +</pre> + +<h2 id="বাস্তব_উদাহরণঃ">বাস্তব উদাহরণঃ</h2> + +<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> + +<p>DOM এ corresponding P node টি কে অভিভাবক ধরা হয় .এর শিশু node গুলো হল<small> </small>স্ট্রং nodes and টেক্সট nodes. স্ট্রং nodes গুলো নিজেরাই হল অভিভাবক, text nodes গুলোকে নিয়ে নিজেদের শিশু node হিসেবে ।</p> + +<pre><span style="color: black;">P</span> +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">C</span>" +├─"<span style="color: black;">ascading</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +├─"<span style="color: black;">tyle</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +└─"<span style="color: black;">heets</span>"</pre> +</div> + +<p> DOM বোঝা আপনাকে সাহায্য করবে ডিজাইন করতে, debug করতে and আপনার CSS রক্ষণাবেক্ষণ করতে কারন DOM হল যেখানে আপনার CSS ডকুমেন্ট এর content মিলিত হয়.</p> + +<h2 id="কার্যকরণ_একটি_DOM_বিশ্লেষণ">কার্যকরণ: একটি DOM বিশ্লেষণ</h2> + +<h3 id="DOM_Inspector_ব্যাবহার">DOM Inspector ব্যাবহার</h3> + +<p>একটি DOM বিশ্লেষণ করতে হলে, আপনার প্রয়জনহবে স্পেশাল সফটওয়্যার এর.এখানে আপনি ব্যাবহার করবেন মোজিলার <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) add-on , একটি DOM বিশ্লেষণ এর জন্য। এই কাজ টি করার জন্য আপনাকে add-on টি ইন্সটল করতে হবে।</p> + +<ol> + <li>মোজিলা ব্রাউজার টি ব্যাবহার করুন আপনার স্যাম্পল HTML ডকুমেন্ট টি ওপেন করবার জন্য.</li> + <li>আপনার ব্রাউজার এর মেনু বার থেকে , <strong>বাছাই করুন Tools > DOM Inspector</strong>, অথবা এভাবে <strong>Tools > Web Development > DOM Inspector</strong>. + <div class="tuto_details"> + <div class="tuto_type">আরও</div> + + <p>যদি আপনার মোজিলা ব্রাউজার এ DOMi না থাকে, তাহলে এটি ব্যাবহার করতে পারেন <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">install it from the Add-ons site</a> এবং ব্রাউজার রি-স্টার্ট করতে হবে। তারপর ফিরে যাবেন টিউটোরিয়াল এ।</p> + + <p>যদি আপনি DOMi ইন্সটল করতে না চান ( অথবা আপনি নন- মোজিলা ব্রাউজার ব্যাবহার করেন), আপনি ব্যাবহার করতে পারেন Web X-Ray Goggles, যেভাবে বিবরন দেয়া আছে পরবর্তী সেকশন এ। অথবা আপনি সেকশন টি বাদ রেখে পরবর্তী পেজ এ চলে যেতে পারেন. সেকশন টি বাদ দিয়ে গেলে টিউটোরিয়াল এর বাকি অংশে কোন প্রভাব ফেলবে না।</p> + </div> + </li> + <li>DOMi এ, আপনার ডকুমেন্ট এর nodes গুলোকে বিস্তৃত করুন arrows এ ক্লিক করার মাধ্যমে। + <p><strong>দ্রষ্টব্য: </strong> আপনার HTML ফাইল এ স্পেসিং করলে হয়ত DOMi কিছু শুন্য text nodes দেখাতে পারে,যেগুলো আপনি উপেক্ষা করতে পারেন।</p> + + <p>রেসাল্ট এর অংশ হয়ত এরূপ দেখাবে যা নিরভর করছে আপনি কোন nodes গুলোকে বিস্তৃত করেছেন:</p> + + <pre>│ ▼╴<span style="color: black;">P</span> +│ │ │ ▼╴<span style="color: black;">STRONG</span> +│ │ └<span style="color: darkblue;">#text</span> +│ ├╴<span style="color: darkblue;">#text</span> +│ ►╴<span style="color: black;">STRONG</span> +│ │</pre> + + <p>যখন আপনি একটি node সিলেক্ট করবেন, আপনিDOMi's এর ডান-হাত প্যান টি ব্যাবহার করতে পারেন আরও কিছু খুজে বের করার জন্য. উদাহরন সরূপ , আপনি যখন একটি text node সিলেক্ট করবেন, DOMi আপনাকে ডান-হাত প্যান এ টেক্সট টি দেখাবে.</p> + + <p>যখন আপনি একটি element node সিলেক্ট করবেন, DOMi সেটি বিশ্লেষণ করবে এবং ডান হাত প্যান এ অনেক তথ্য সরবরাহ করবে।স্টাইল তথ্য হল বিতরন করা তথ্য এর ই একটি অংশ।</p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">চেলেঞ্জঃ<br> +DOMi তে, স্ট্রং node এ ক্লিক করুন।</div> + +<p>DOMi এর ডান হাত প্যান টি ব্যাবহার করুন খুজে বের করার জন্য কোথায় node এর রঙ লাল রাখা হয়েছে এবং কোথায় এটিকে সাধারন টেক্সট এর তুলনায় গাঢ় দেখান হয়েছে।</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> + +<h3 id="Web_X-Ray_Goggles_এর_বেবহারঃ"> Web X-Ray Goggles এর বেবহারঃ</h3> + +<p><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>, DOM Inspector এর তুলনায় কম তথ্য সরবরাহ করে কিন্তু এটি ব্যাবহার করা ও ইন্সটল করা সহজ।</p> + +<ol> + <li><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a> এর জন্য হোম পেজ এ যান।</li> + <li>পেজের bookmarklet এর লিংক টি কে টেনে ব্রাউজার টুলবার এ আনুন।</li> + <li>আপনার স্যাম্পল HTML ডকুমেন্ট টি খুলুন।</li> + <li>Web X-Ray Goggles কে এক্টিভেট করুন টুলবার এর bookmarklet এ ক্লিক করার মাধ্যমে।</li> + <li>আপনার কার্সর এর পয়েন্টআর টিকে, ডকুমেন্ট এর এলেমেন্ট দেখার জন্য ডকুমেন্ট এর উপর ঘোরান।</li> +</ol> + +<h2 id="পরবর্তীতে_কি_আছে">পরবর্তীতে কি আছে?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}যদি আপনি চ্যালেঞ্জ টি গ্রহন করে থাকেন,আপনি দেখতে পেয়েছেন যে একাধিক জায়গা থেকে স্টাইল তথ্য যোগাযোগ স্থাপন করে একটি এলেমেন্ট এর জন্য একটি ফাইনাল স্টাইল তৈরি করতে।<a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">next page</a> এই সব যোগাযোগ স্থাপনের বেপারে আরও বিবরন দিবে।</p> 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 +--- +<p>সম্পূর্ণ নতুনদের জন্য লেখা এই CSS টিউটোরিয়াল আপনাকে <a href="/bn-BD/docs/CSS" title="/bn-BD/docs/CSS">Cascading Style Sheets</a> (<em>ক্যাসকেডিং স্টাইল শিট</em> বা CSS) এর সঙ্গে পরিচয় করিয়ে দেবে। এই গাইডটি ভাষাটির খুবই সাধারণ ফিচারগুলো সাথে উদাহরণসহ আপনাকে পরিচয় করিয়ে দেবে, যা আপনি নিজের ব্রাউজারে ঘরে বসেই চালিয়ে দেখতে পারবেন। এর ফলে আধুনিক ব্রাউজারগুলোতে CSS এর সাধারণ বিষয়গুলো আপনি সহজেই বুঝতে পারবেন।</p> +<p>CSS এ নতুন, এমন পাঠকদের জন্যই এই টিউটোরিয়াল লেখা হয়েছে, যদি আপনার CSS এর কিছু অতি সাধারণ বিষয় জানাশোনা তারপরেও আপনি এটি ব্যবহার করতে পারবেন। আপনি যদি CSS এ অভিজ্ঞ হয়ে থাকেন, তবে এই টিউটোরিয়ালটি আপনার বিশেষ একটা উপকার করতে পারবে না, CSS এর মূল পৃষ্ঠায় আরও এ্যাডভান্সড বিষয়ের <a href="/bn-BD/docs/CSS" title="/bn-BD/docs/CSS">তালিকা</a> রয়েছে।</p> +<nav class="fancyTOC"> + <a class="button" href="/bn-BD/docs/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">CSS কি</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">কেন CSS</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">CSS যেভাবে কাজ করে</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Cascading_and_inheritance" style="font-size: 19px;" title="Chapter 'Cascading and inheritance' of the CSS tutorial">ক্যাসকেডিং এবং ইনহেরিটেন্স</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">সিলেক্টর</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">সহজে পড়ার উপযোগী CSS</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">লেখার স্টাইল</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">রং</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Contbn-BDt" title="Chapter 'Contbn-BDt' of the CSS tutorial">কন্টেন্ট </a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">লিস্ট (তালিকা)</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">বক্স (বাক্স)</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">লেআউট</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">টেবিল</a> <a class="button" href="/bn-BD/docs/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">মিডিয়া</a></nav> +<h3 id="শুরু_করার_পূর্বে_আপনার_কি_করা_প্রয়োজন">শুরু করার পূর্বে আপনার কি করা প্রয়োজন?</h3> +<p>এই টিউটোরিয়ালটি ভালোভাবে অনুসরণ করতে চাইলে আপনার প্রয়োজন একটি টেক্সট এডিটর এবং একটি আধুনিক ব্রাউজার। কি করে এগুলো ব্যবহার করতে হয় - এ সংক্রান্ত বেসিক জানাশোনা থাকা ভালো।</p> +<p>আপনি যদি ফাইল নিয়ে ঘাঁটাঘাঁটি না করতে চান, তবে আপনি পুরো টিউটোরিয়ালটি শুধু পড়ে যেতে পারেন, এবং ছবিগুলোর দিকে চোখ বুলিয়ে যেতে পারেন, কিন্তু এ পদ্ধতিটি খুব একটা কার্যকর বা ভালো পদ্ধতি নয় বলে আমরা মনে করি।</p> +<p><strong>উল্লেখ্য: </strong>CSS এর সাহায্যে রং নিয়ে কাজ করা যায়, তাই এই টিউটোরিয়ালের কিছু অংশ রংয়ের ওপর নির্ভরশীল। আপনি এই অংশগুলো সহজেই কাজে লাগাতে পারবেন যদি আপনার একটি রঙিন মনিটর বা ডিসপ্লের পাশাপাশি স্বাভাবিক রং দেখায় কোন শারীরিক সমস্যা না থাকে।</p> +<h3 id="যেভাবে_টিউটোরিয়ালটি_ব্যবহার_করবেন">যেভাবে টিউটোরিয়ালটি ব্যবহার করবেন</h3> +<p>এই টিউটোরিয়ালটি ব্যবহারের জন্য প্রতিটা পৃষ্ঠা ভালোভাবে এবং ধারাবাহিকভাবে পড়ুন। যদি আপনি একটি পৃষ্ঠা বাদ দিয়ে ফেলেন, তাহলে পরবর্তী পৃষ্ঠাগুলো বোঝা আপনার জন্য অনেকটা কঠিন হতে পারে।</p> +<p>সিএসএস কিভাবে কাজ করে বোঝার জন্য প্রতিটি পৃষ্ঠার "<em>তথ্যাবলী</em>" অংশটি ভালো করে পড়ুন। "<em>হাতে-কলমে</em>" অংশগুলো পড়ে আপনার নিজের কম্পিউটারে CSS ব্যবহারের চেষ্টা করে দেখুন।</p> +<p>আপনি কতটুকু বুঝতে পেরেছেন, তা যাচাই করতে প্রতিটি পৃষ্ঠার শেষে থাকা "চ্যালেঞ্জ" গ্রহণ করুন। চ্যালেঞ্জের সমাধান কিন্তু চ্যানলেঞ্জের নিচেই লিংকের মাধ্যমে দেওয়া আছে, তাই ওগুলো খুব বেশি প্রয়োজন হলে না দেখাই ভালো! নিজে নিজে অবশ্যই চেষ্টা করতে হবে এবং যদি ব্যর্থ হন বারবার, তবে সামান্য একটু উঁকি মেরে দেখা দোষের কিছু না!</p> +<p>CSS আরও গভীরভাবে বুঝতে চাইলে "অতিরিক্ত তথ্য" লেখা বাক্সগুলোর তথ্য পড়ুন। লিংকগুলোর সাহায্যে CSS সংক্রান্ত আরও অনেক রেফারেন্স তথ্য খুঁজে বের করতে পারবেন।</p> +<h2 id="টিউটোরিয়াল_২য়_পর্ব">টিউটোরিয়াল ২য় পর্ব</h2> +<p>এই টিউটোরিয়ালের দ্বিতীয় পর্বে অন্যান্য ওয়েব ও মোজিলা প্রযুক্তির সাথে CSS ব্যবহারের কথা আলোচনা করা হয়েছে।</p> +<ol> + <li><strong><a href="/bn-BD/CSS/Getting_Started/JavaScript" title="bn-BD/CSS/Getting_Started/JavaScript">JavaScript (জাভাস্ক্রিপ্ট)</a></strong></li> + <li><strong><a href="/bn-BD/CSS/Getting_Started/SVG_graphics" title="bn-BD/CSS/Getting_Started/SVG_graphics">SVG গ্রাফিক্স</a></strong></li> + <li><strong><a href="/bn-BD/CSS/Getting_Started/XML_data" title="bn-BD/CSS/Getting_Started/XML_data">XML ডাটা</a></strong></li> + <li><strong><a href="/bn-BD/CSS/Getting_Started/XBL_bindings" title="bn-BD/CSS/Getting_Started/XBL_bindings">XBL বাইন্ডিং</a></strong></li> + <li><strong><a href="/bn-BD/CSS/Getting_Started/XUL_user_interfaces" title="bn-BD/CSS/Getting_Started/XUL_user_interfaces">XUL ইউজার ইন্টারফেস</a></strong></li> +</ol> 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 +--- +<p>{{ CSSTutorialTOC() }}</p> +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">This is the 6th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> 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.</span></p> +<h2 class="clearLeft" id="তথ্য_পাঠযোগ্য_CSS"><span class="short_text" id="result_box" lang="bn"><span class="hps">তথ্য</span></span>: <span class="short_text" id="result_box" lang="bn"><span class="hps">পাঠযোগ্য</span> </span>CSS</h2> +<p><span id="result_box" lang="bn"><span class="hps">আপনি এগুলো</span> <span class="hps">আরো পাঠযোগ্য</span> <span class="hps">করার জন্য আপনার</span> <span class="hps">স্টাইলশীট</span> এ <span class="hps">সাদা</span> <span class="hps">স্থান এবং</span> <span class="hps">মন্তব্য যুক্ত করতে পারেন</span></span>। <span id="result_box" lang="bn"><span class="hps">You can also group selectors together? যখন একই</span> <span class="hps">স্টাইল নিয়ম</span> <span class="hps">বিভিন্ন ভাবে</span> <span class="hps">নির্বাচিত</span> <span class="hps">উপাদানের উপর প্রয়োগ করা যায় </span>।</span></p> +<h3 id="সাদা_স্থান">সাদা স্থান</h3> +<p><span id="result_box" lang="bn"><span class="hps">হোয়াইট স্পেস</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps">মানে </span></span>প্রকৃত</span> <span class="hps">স্পেস,</span> <span class="hps">ট্যাব ও</span> <span class="hps">নতুন লাইন</span> <span class="hps">.</span> <span class="hps">আপনি আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">আরো পাঠযোগ্য করতে</span> <span class="hps">সাদা স্থান</span> <span class="hps">যোগ করতে পারেন।</span></span></p> +<p>পৃষ্ঠা বিন্যাস এবং গঠন context এর মধ্যে <span id="result_box" lang="bn"><span class="hps">সাদা স্থান হচ্ছে পৃষ্ঠার </span></span><span id="result_box" lang="bn"><span class="hps">অচিহ্নিত </span></span><span id="result_box" lang="bn"><span class="hps">অংশ </span></span><span id="result_box" lang="bn"><span>: <span id="result_box" lang="bn"><span class="hps">কলাম</span> <span class="hps">এবং টাইপ</span> <span class="hps">লাইনের মধ্যে </span></span></span></span> <span id="result_box" lang="bn"><span class="hps">মার্জিন,</span> <span class="hps">gutters</span><span>, এবং স্থান</span></span>।</p> +<p><span id="result_box" lang="bn"> <span><span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="hps">সিএসএস ফাইল</span> <span class="hps">বর্তমানে</span> <span class="hps">এক</span> <span class="hps"><span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">নিয়ম <span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">প্রতি</span></span></span></span> </span></span></span></span>লাইনে </span><span>এবং <span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">প্রায়</span> <span class="hps">সর্বনিম্ন </span></span></span></span>সাদা</span> <span class="hps">স্থান</span> <span class="hps"> আছে।</span> <span class="hps">একটি জটিল</span> <span class="hps">স্টাইলশীটে</span> <span class="hps">এই</span> <span class="hps">বিন্যাস</span><span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps"> পড়া</span> <span class="hps">কঠিন হয়ে দাড়াবে এবং</span></span></span></span> <span id="result_box" lang="bn"><span><span id="result_box" lang="bn"><span class="hps">স্টাইলশীট</span> </span></span></span> <span class="hps">বজায় রাখা</span>ও <span class="hps">কঠিন হবে</span> <span class="hps">।</span> </span></span></span></p> +<p><span id="result_box" lang="bn"><span class="hps">আপনার নির্বাচিত</span> <span class="hps">বিন্যাস</span> <span class="hps">সাধারণত একটি</span> <span class="hps">ব্যক্তিগত পছন্দ</span><span>, কিন্তু আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">যদি</span> ভাগ <span class="hps">প্রকল্পের</span> <span class="hps">অংশ হয়</span><span>, তাহলে ঐসব</span> <span class="hps">প্রকল্পের</span> <span class="hps">তাদের নিজস্ব</span> <span class="hps">নিয়মাবলী</span> <span class="hps">থাকতে পারে।</span></span><br> + </p> +<div class="tuto_example"> + <div class="tuto_type"> + <span id="result_box" lang="bn"><span class="hps">উদাহরণ</span><br> + <br> + <span class="hps"><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ যেমন <span id="result_box" lang="bn"><span class="hps">কম্প্যাক্ট বিন্যাস </span></span></span></span>আমরা <span id="result_box" lang="bn"><span class="hps">ব্যবহার করছি</span></span> , <span id="result_box" lang="bn"><span class="hps">শুধুমাত্র</span> <span class="hps">একটি লাইন</span> <span class="hps">বিভাজন</span><span> <span id="result_box" lang="bn"><span class="hps">যখন</span></span></span></span> এটা</span> <span class="hps">খুব দীর্ঘ</span> <span class="hps">হয়ে</span> যায় <span>:</span></span></div> + <br> + <pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;} +</pre> + <p><span class="short_text" id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">প্রতি লাইনে একটি</span> <span class="hps">মান</span> <span class="hps">পছন্দ </span><span>করে :</span></span></p> + <pre class="brush: css">.carrot +{ +color: orange; +text-decoration: underline; +font-style: italic; +} +</pre> + <p><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">indention ব্যবহার করে যেমন- দুই</span> <span class="hps">স্পেস,</span> <span class="hps">চার</span> <span class="hps">স্পেস</span> <span class="hps"> অথবা</span> <span class="hps">একটি ট্যাব</span> হচ্ছে <span class="hps">সাধারণ</span></span>:</p> + <pre class="brush: css">.carrot { + color: orange; + text-decoration: underline; + font-style: italic; +} +</pre> + <p><span id="result_box" lang="bn"> <span class="hps">কিছু মানুষ</span> <span class="hps">সবকিছু </span>ঊর্ধ্বাভাবে লাইনে লিখতে পছন্দ করে <span class="hps">(কিন্তু</span> <span class="hps">এর মত একটি</span> <span class="hps">বিন্যাস</span> <span class="hps">বজায় রাখা কঠিন</span><span>):</span></span></p> + <pre class="brush: css">.carrot + { + color : orange; + text-decoration : underline; + font-style : italic; + } +</pre> + <p><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">পাঠযোগ্যতা</span> <span class="hps">উন্নত করার লক্ষে্য </span> <span class="hps">মিশ্র</span> <span class="hps">হোয়াইটস্পেস</span> <span class="hps">ব্যবহার করে।</span></span></p> + <pre class="brush: css">.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 } +</pre> +</div> +<p><span id="result_box" lang="bn"><span class="hps">কিছু মানুষ</span> <span class="hps">বিন্যাসের</span> <span class="hps">জন্য ট্যাব</span> <span class="hps">ব্যবহার করেন ।</span> <span class="hps">কিছু মানুষ শুধুমাত্র</span> <span class="hps">ফাঁকা স্থান ব্যবহার</span><span> করেন।</span></span></p> +<h3 id="মন্তব্য"><span class="short_text" id="result_box" lang="bn"><span class="hps">মন্তব্য</span></span></h3> +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">CSS এর মধ্যে</span> <span class="hps">মন্তব্য</span> <span class="hps">শুরু</span></span> <code>হয় /*</code> <span class="short_text" id="result_box" lang="bn"><span class="hps">এবং</span> <span class="hps">শেষ হয়</span></span> <code>*/</code> দিয়ে ।</p> +<p><span id="result_box" lang="bn"><span class="hps">আপনি <span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> এ <span class="hps">প্রকৃত</span> <span class="hps">মন্তব্য</span> <span class="hps">করতে</span> <span class="hps">মন্তব্য ব্যবহার</span> <span class="hps">করতে পারেন, <span id="result_box" lang="bn"><span class="hps">এবং </span></span></span></span><span class="short_text" id="result_box" lang="bn"><span class="hps">এছাড়াও</span> <span id="result_box" lang="bn"><span class="hps">সাময়িকভাবে</span> <span class="hps">উদ্দেশ্যে</span> <span class="hps">পরীক্ষার জন্য</span> </span><span class="hps"><span id="result_box" lang="bn"><span class="hps">একটা </span></span>অংশ</span> <span class="hps">মন্তব্য </span></span></span><span class="hps"> করতে</span> পারেন<span class="hps"> </span><span>।</span></span></p> +<p><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">স্টাইলশীট</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">মন্তব্য </span></span></span></span>অংশ</span> <span class="hps">আউট </span> <span class="hps">করার জন্য,</span></span></span><span> <span id="result_box" lang="bn"><span class="hps">সে অংশ</span></span> একটি</span> <span class="hps">একটি মন্তব্যে</span> <span class="hps">লিখুন <span id="result_box" lang="bn"><span>যাতে </span></span><span id="result_box" lang="bn"><span class="hps">ব্রাউজার এটি</span> <span class="hps">উপেক্ষা করে</span><span>। </span></span></span><span class="hps">আপনি <span id="result_box" lang="bn"><span class="hps">সতর্ক থাকুন </span></span><span id="result_box" lang="bn"><span class="hps">যেখানে</span></span> <span id="result_box" lang="bn"><span class="hps">মন্তব্য</span> <span class="hps"> </span></span>শুরু</span> <span class="hps">এবং </span><span class="hps">শেষ</span><span class="hps">।</span> <span id="result_box" lang="bn"><span class="hps">বাকি </span></span><span class="hps">স্টাইলশীট</span> এ <span class="hps">সঠিক স্যন</span></span><span lang="bn"><span class="hps">টেক্স</span> <span class="hps">থাকতে হবে।</span></span></p> +<div class="tuto_example"> + <div class="tuto_type"> + <span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণ</span></span></div> + <pre class="brush: css">/* <span class="short_text" id="result_box" lang="bn"><span class="hps"><span class="short_text" id="result_box" lang="bn"><span class="hps">প্রথম</span> <span class="hps">অনুচ্ছেদে </span></span>প্রাথমিক</span> <span class="hps">অক্ষর C এর জন্য</span> <span class="hps">শৈলী </span></span> */ +.carrot { + color: orange; + text-decoration: underline; + font-style: italic; + } +</pre> +</div> +<h3 id="দলবদ্ধ_নির্বাচক"><span class="short_text" id="result_box" lang="bn"><span class="hps">দলবদ্ধ</span> <span class="hps">নির্বাচক</span></span></h3> +<p><span id="result_box" lang="bn"><span class="hps">যখন অনেক উপাদানের</span> <span class="hps">একই</span> <span class="hps">শৈলী</span> <span class="hps">থাকে, <span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">আপনি </span></span>নির্বাচক</span> <span class="hps">একটি গ্রুপ</span> <span class="hps">উল্লেখ করে </span></span></span><span class="hps">কমা দিয়ে</span> <span class="hps">তাদের পৃথক<span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps"> করতে পারেন</span></span></span>।</span></span> <span class="hps">ঘোষণা</span> <span class="hps">সমস্ত নির্বাচিত</span> <span class="hps">উপাদানের ক্ষেত্রে</span> <span class="hps">প্রযোজ্য।</span></span></p> +<p><span id="result_box" lang="bn"><span class="hps">অন্যত্র</span> <span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">আপনি আবার</span> <span class="hps">পৃথকভাবে</span> <span class="hps">একই</span> <span class="hps">নির্বাচক</span> <span class="hps">নির্দিষ্ট করতে পারেন</span>, <span class="hps">তাদের</span> <span class="hps">ব্যক্তিগত</span> <span class="hps">শৈলী নিয়ম</span> <span class="hps">প্রযোজ্য।</span></span></p> +<div class="tuto_example"> + <div class="tuto_type"> + <span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণ</span></span></div> + <p><span class="short_text" id="result_box" lang="bn"><span class="hps">এই নিয়ম</span> </span> {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, এবং {{ HTMLElement("h3") }} <span class="short_text" id="result_box" lang="bn"><span class="hps">উপাদান</span> <span class="hps">একই রং</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">তৈরি করে</span></span>।</p> + <p><span class="short_text" id="result_box" lang="bn"><span class="hps"> শুধুমাত্র</span> <span class="hps">এক জায়গায়</span> <span class="hps">রঙ উল্লেখ</span> <span class="hps">করা সুবিধাজনক</span></span>,<span class="short_text" id="result_box" lang="bn"><span class="hps"> যদি না এটি</span> <span class="hps">পরিবর্তন করা</span> <span class="hps">হয়।</span></span></p> + <pre class="brush: css">/* color for headings */ +h1, h2, h3 {color: navy;} +</pre> +</div> +<h2 id="প্রক্রিয়া_মন্তব্য_যোগ_এবং_বিন্যাস_উন্নতি">প্রক্রিয়া: মন্তব্য যোগ এবং বিন্যাস উন্নতি</h2> +<ol> + <li>আপনার CSS ফাইল সম্পাদনা করুন, এবং এটি এই নিয়ম আছে কিনা তা নিশ্চিত করুন (in any order): + <pre class="brush: css">strong {color: red;} +.carrot {color: orange;} +.spinach {color: green;} +#first {font-style: italic;} +p {color: blue;} +</pre> + </li> + <li><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">এটি আরো</span> <span class="hps">পাঠযোগ্য</span> <span class="hps">করুন <span id="result_box" lang="bn"><span class="hps">সাজানোর দ্বারা এমন <span id="result_box" lang="bn"><span class="hps">একটি উপায়ে </span></span></span></span></span></span><span id="result_box" lang="bn"><span class="hps">যে</span>ন <span id="result_box" lang="bn"><span class="hps">এটি</span></span> </span>আপনি যৌক্তিক</span> <span class="hps">খুঁজে</span> পান </span>, এবং <span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">হোয়াইটস্পেস</span> <span class="hps">এবং মন্তব্য</span> <span class="hps">যুক্ত করে </span></span>যাই হোক না কেন</span> <span class="hps">যে উপায়</span> <span class="hps">আপনি</span> <span class="hps">সেরা</span> <span class="hps">মনে </span></span>করেন।</li> + <li><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span>আপনার ব্রাউজারে</span> <span class="hps">প্রদর্শন</span> <span class="hps">ফাইল সংরক্ষণ করুন</span> <span class="hps">এবং রিফ্রেশ করুন,</span></span>নিশ্চিত করুন যে </span></span>স্টাইলশীট</span> যে<span class="hps">ভাবে কাজ করে</span> <span class="hps">আপনার</span> <span class="hps">পরিবর্তন</span> তাকে <span class="hps">প্রভাবিত না করেঃ </span></span> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> +<div class="tuto_details"> + <div class="tuto_type"> + চ্যালেঞ্জ</div> + <p><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">অংশের</span> <span class="hps">আউট মন্তব্য</span></span>,<span id="result_box" lang="bn"> <span class="hps">অন্য কিছু</span> <span class="hps">পরিবর্তন ছাড়া</span></span>,<span id="result_box" lang="bn"><span class="hps"> আপনার নথির</span> <span class="hps">খুব প্রথম</span> <span class="hps">অক্ষর <span id="result_box" lang="bn"><span class="hps">লাল</span></span></span> <span class="hps">করা,</span></span></p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + <p>(<span class="short_text" id="result_box" lang="bn"><span class="hps">এই কাজ করতে</span> <span class="hps">একাধিক</span> <span class="hps">উপায় আছে </span></span>।)</p> + <div class="tuto_details" id="tutochallenge"> + <div class="tuto_type"> + Possible solution</div> + One way to do this is to put comment delimiters around the rule for <code>.carrot</code>: + <pre class="brush: css">/*.carrot { + color: orange; +}*/</pre> + <a class="hideAnswer" href="#challenge">Hide solution</a></div> + <a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> +<h2 id="What_next">What next?</h2> +<p>{{ 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 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">specify the appearance of text</a> in your document<strong>.</strong></p> 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 +--- +<p>{{ CSSTutorialTOC() }}</p> +<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}<span class="seoSummary">এটি হচ্ছে <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> এর ৭ম টীউটোরিয়াল, এখানে টক্সট স্টাইল এর অনেক উদাহরণ দেয়া আছে। একাহে বর্ণনা করা হয়েছে কিভাবে আপনি আপনার নমুনা stylesheet এ বিভিন্ন ফন্ট ব্যাবহার করবেন।</span></p> +<h2 class="clearLeft" id="তথ্য_টেক্সট_স্টাইল">তথ্য: টেক্সট স্টাইল</h2> +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">সিএসএস</span> <span class="hps">স্টাইলিং</span> <span class="hps">লেখার জন্য</span> <span class="hps">বিভিন্ন</span> <span class="hps">ধরণ আছে।</span></span></p> +<p>এখানে {{ cssxref("font") }}আপনি আপনার লেখার বিভিন্ন দিক উল্লেখ করতে পারবেন,—যেমন:</p> +<ul> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">বোল্ড,</span> <span class="hps">ইটালিক,</span> <span class="hps">এবং ছোট</span> <span class="hps">হাতের অক্ষর</span></span> (<span class="short_text" id="result_box" lang="bn"><span class="hps"> ছোট</span> <span class="hps">হাতের অক্ষর</span></span>)</li> + <li>আকার</li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">লাইন উচ্চতা</span></span></li> + <li>ফন্টের বিভিন্ন ধরণ</li> +</ul> +<div class="tuto_example"> + <pre class="brush:css">উদাহরণ +p {font: italic 75%/125% "Comic Sans MS", cursive;} +</pre> + <p>এই নিয়মে বিভিন্ন ফন্টের ধরণ দেয়া আছে, <span id="result_box" lang="bn"><span>প্রতিটি</span> <span class="hps">অনুচ্ছেদ</span> এর লেখা হবে ইতালিক ফরমে।</span></p> + <p><span id="result_box" lang="bn"><span>প্রতিটি</span> <span class="hps">অনুচ্ছেদ</span> <span class="hps">এর মূল</span> <span class="hps">উপাদান</span> <span class="hps">আকার ফন্ট সাইজ <span id="result_box" lang="bn"><span class="hps">তিন চতুর্থাংশ</span> <span class="hps">সেট করা হয়েছে, <span id="result_box" lang="bn"><span>লাইন</span> <span class="hps">উচ্চতা</span> <span class="hps">১২৫%</span> <span class="hps">সেট করা হয়েছে।</span></span> </span></span></span></span>(<span id="result_box" lang="bn"><span>স্বাভাবিক তুলনায়</span> <span class="hps">একটু বেশি</span> <span class="hps">ব্যবধানযুক্ত</span></span>)।</p> + <p>Comic Sans MS এ,কিছু ফন্ট আকার সেট করা থাকে কিন্তু যদি তা গ্রহণ যোগ্য না হয় তবে ব্রাউজার ডিফল্ট কারসিভ (hand-written) আকার ব্যাবহার করতে পারবে।</p> + <p><span id="result_box" lang="bn"><span class="hps">এই নিয়মে</span> <span class="hps">বোল্ড এবং</span> <span class="hps">ছোট</span> <span class="hps">হাতের অক্ষরের</span></span> <span id="result_box" lang="bn"><span class="hps">পার্শ্ব প্রতিক্রিয়া</span> <span class="hps">আছে:</span></span>(setting them to <code>normal</code>):</p> +</div> +<h3 id="ফন্টের_আকার">ফন্টের আকার</h3> +<p>আপনি ভবিষৎ বানী করতে পারবেনা আপনার ডকুমেন্টি কোন ধরনের পাঠক পাবে। সুতরাং আপনি একটি উল্লেখযোগ্য ফন্টের আকার দিতে পারেন, সব থেকে ভাল হয় যদি আপনি পছন্দ অনুযায়ী একটি ফন্টের তালিকা দেন।</p> +<p>একটি ডিফল্ট আকার দিয়ে লিস্টটি শেষ করুনঃ <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p> +<p>ডকুমেন্ট এ যদি কিছু ফন্ট আকার সমর্থন না করে তবে ব্রাউজার এ আপনি ফন্ট আকার প্রতিস্থাপন করতে পারেন। ডকুমেন্ট এ সমর্থন করে না এমন বিশেষ অক্ষর থাকতে পারে। যদি ব্রাউজার ঐই অক্ষরের কোন ফন্ট আকার খুজে পায় তবে আপনি সেটি ব্যাবহার করতে পারেন।</p> +<p>তার <span id="result_box" lang="bn"><span class="hps">নিজস্ব ফন্ট আকার উল্লেখ করার</span></span> {{ cssxref("font-family") }}এটি ব্যাবহার করুণ।</p> +<h3 id="ফন্টের_মাপ">ফন্টের মাপ</h3> +<p>ব্রাউজার ব্যাবহারকারি <span id="result_box" lang="bn"><span class="hps">পৃষ্ঠাটি পড়ার সময় ডিফল্ট ফন্টরে মার অথবা লেখার আকার পরিবর্তন করতে পারেন,তাই সবথেকে ভাল যদি আপনি একটি আপেক্ষিক মাপ ব্যাবহার করতে পারেন।</span></span></p> +<p><span id="result_box" lang="bn"><span class="hps">আপনি ফন্টের ভাল মাপের</span> <span class="hps">জন্য</span> <span class="hps">কিছু বিল্ট ইন</span> <span class="hps">মান ব্যবহার করতে পারেন,যেম্ন-বড়,ছোট এবং মাঝারি</span></span>।<span class="_5yl5"><span class="null"> আপনি চাইলে ওই মান গুলো ব্যবহার করতে পারেন যেগুলো মূল উপাদানের ফন্টের আকারের সাথে সম্পর্কিত, যেমন ছোট বড় , ১৫০% অথবা ১.৫ em।<span class="_5yl5"><span class="null">একটি "em" হচ্ছে "m" অক্ষরের সমান প্রস্থের(মূল উপাদানের ফন্টের আকারের জন্য); এইভাবে ১.৫em হচ্ছে মূল উপাদানের এক এবং অর্ধ আকার।</span></span></span></span></p> +<p>প্রয়োজনে আপনি একটি নিদ্রিষ্ট আকার , যেমন: <code>14px</code> (14 pixels) <span id="result_box" lang="bn"><span class="hps">ডিসপ্লে ডিভাইস</span> এর জন্য</span> অথবা 14pt (14 points) প্রিন্টারের জন্য নির্ধারণ করতে পারেন। <span id="result_box" lang="bn"><span class="hps">এটা</span> <span class="hps">তাদের পরিবর্তন</span> <span class="hps">করার অনুমতি দেয় না</span><span>, কারণ এইটা impaired ব্যাবহারকারিদের</span></span> জন্য <span id="result_box" lang="bn"><span class="hps">অ্যাক্সেসযোগ্য হয় না</span></span>। <span id="result_box" lang="bn"> <span class="hps">আরো ভাল</span> <span class="hps">কৌশল</span> <span class="hps">ডকুমেন্টের</span> <span class="hps">উপরের</span> <span class="hps">স্তরের</span> এবং <span class="hps">মাঝারিতে</span> <span class="hps">একটি বিল্ট-ইন</span> <span class="hps">মান সেট</span> <span class="hps">করা হয়,</span></span><span id="result_box" lang="bn"><span class="hps">এবং তারপর</span> <span class="hps">তার সমস্ত</span> <span class="hps">descendent</span> <span class="hps">উপাদানের জন্য</span> <span class="hps">আপেক্ষিক</span> <span class="hps">মাপ সেট করা হয়</span><span>।</span></span></p> +<p><span id="result_box" lang="bn"><span class="hps">তার নিজস্ব একটি</span> <span class="hps">ফন্ট সাইজ</span> <span class="hps">উল্লেখ করার জন্য</span></span> {{ cssxref("font-size") }}ব্যাবহার করুন।</p> +<h3 id="লাইনের_উচ্চতা"><span class="short_text" id="result_box" lang="bn"><span class="hps">লাইনের</span> <span class="hps">উচ্চতা</span></span></h3> +<p>লাইনের উচ্চতা ২টা লাইনের মধ্যকার স্পেস উল্লেখ করে। আপনার ডকুমেন্টে দীর্ঘ লাইনের অনুচ্ছেদ থাক্লে,বিশেষ করে ফন্টের রাকার যদি ছোট হয় তবে পড়ার সুবিধারতে স্বাভাবিকের থেকে একটু বড় স্পেস দিন।</p> +<p><span id="result_box" lang="bn"><span class="hps">তার নিজস্ব একটি</span> <span class="hps">লাইন উচ্চতা</span> <span class="hps">উল্লেখ করার জন্য</span></span>{{ cssxref("line-height") }} ব্যাবহার করুণ।</p> +<h3 id="সজ্জা"><span class="short_text" id="result_box" lang="bn"><span class="hps">সজ্জা</span></span></h3> +<p>{{ cssxref("text-decoration") }}<code> ব্যাবহার করে আপনি আন্দার-লাইন অথবা অনন্য ডেকোরেশন করতে পারেন।</code> <code>আপনি স্পষ্টভাবে</code> ডেকোরেশন অপসরণ করতেও এটি ব্যাবহার করতে পারেন।</p> +<h3 id="অন্যান্য_বৈশিষ্ট্য"><span class="short_text" id="result_box" lang="bn"><span class="hps">অন্যান্য</span> <span class="hps">বৈশিষ্ট্য</span></span></h3> +<p>Italic জন্য ব্যাবহার করুন {{ cssxref("font-style") }}<code>: italic;</code><br> + Bold জন্য ব্যাবহার করুন <code>{{ cssxref("font-weight") }}: bold;</code><br> + Small capitals জন্য ব্যাবহার করুন <code>{{ cssxref("font-variant") }}: small-caps;</code></p> +<p><span id="result_box" lang="bn"><span class="hps">পৃথকভাবে এই</span> গুলো <span class="hps">বন্ধ</span> <span class="hps">করার জন্য, আপনি</span> <span class="hps">স্বাভাবিক</span> <span class="hps">মান</span> <span class="hps">সুনির্দিষ্টভাবে উল্লেখ করুন</span></span>।</p> +<div class="tuto_details"> + <div class="tuto_type"> + <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো বিস্তারিত</span></span></div> + <p><span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">অন্য কোন উপায়ে</span>ও <span class="hps">বিভিন্ন</span> <span class="hps">টেক্সট স্টাইল</span> <span class="hps">নির্দিষ্ট করতে পারেন।</span></span></p> + <p><span id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ, এখানে</span> <span class="hps">উল্লিখিত</span> <span class="hps">অন্য কিছু</span> মান আছে যা <span class="hps">আপনি ব্যবহার করতে পারেন</span>।</span></p> + <p>একটি জটিল স্টাইলশীট,shorthand <code>font</code> property এড়িয়ে চলে কারণ তার কিছু <span id="result_box" lang="bn"><span class="hps">পার্শ্ব প্রতিক্রিয়া আছে</span></span> (resetting other individual properties)।</p> + <p>আরো তথ্যের জন্য <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> in the CSS Specification দেখতে পারেন। টেক্সট ডেকোরেশন এর আরো তথ্যের জন্য দেখুন <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>।</p> + <p><span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">ব্যবহারকারীদের সিস্টেমে</span> <span class="hps">ইনস্টল</span> <span class="hps">আকারেরউপর নির্ভর</span> <span class="hps">করতে না ছাইলে</span><span>, আপনি</span> <span class="hps">ব্যবহার করতে পারেন</span></span>{{ cssxref("@font-face") }}এটি একটি অনলাইন ফন্ট উল্লেখ করে। যদিও এই নিয়ম সমর্থন করে ব্যাবহারকারিদের এমন একটি ব্রাউজার থাকা প্রয়োজন।</p> +</div> +<h2 id="কর্ম_উল্লেখ_ফন্ট"><span class="short_text" id="result_box" lang="bn"><span class="hps">কর্ম:</span> <span class="hps">উল্লেখ</span> <span class="hps">ফন্ট</span></span></h2> +<p>একটি সহজ ডকুমেন্ট এর জন্য {{ HTMLElement("body") }} তে আপনি ফন্ট এবং ডকুমেন্ট এর বাকি সেটিংস সেট করতে পারেন।</p> +<ol> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">সিএসএস ফাইল</span> <span class="hps">সম্পাদনা করুন.</span></span></li> + <li><span lang="bn"><span class="hps">ডকুমেন্ট জুড়ে</span> <span class="hps">ফন্ট পরিবর্তন করতে</span> <span class="hps">নিম্নলিখিত</span> <span class="hps">নিয়ম</span> <span class="hps">যোগ করুন.</span></span> <span id="result_box" lang="bn"><span class="hps">সিএসএস</span> <span class="hps">ফাইল উপরে</span> <span class="hps">এটি একটি</span> <span class="hps">লজিক্যাল</span> <span class="hps">জায়গা</span><span>, কিন্তু আপনি যখন এখানে রাখবেন সেখানেও তার</span> <span class="hps">একই প্রভাব</span> পরবে<span class="hps">:</span></span> + <pre class="eval">body {font: 16px "Comic Sans MS", cursive;} +</pre> + </li> + <li><span class="_5yl5"><span class="null">একটি মন্তব্য যোগ করুন যেটি নিয়ম ব্যাখ্যা করে এবং একটি স্পেস দিন যাতে করে আপনার পছন্দের বিন্যাসের সাথে এটি মিলে যায়।</span></span></li> + <li><span id="result_box" lang="bn"><span class="hps">ফাইল সংরক্ষণ করুন</span> <span class="hps">এবং ফলাফল</span> <span class="hps">দেখতে আপনার ব্রাউজার</span> <span class="hps">রিফ্রেশ করুন।</span></span> যদি আপনার Comic Sans MS এ থাকা আকার অথবা হাতে লেখা itlic আকার সমর্থন না করে ,তবে আপনার ব্রাউজার অন্নক্স কোন আকার পছন্দ করতে পারেঃ<br> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li>ব্রাউজার মেনুবার, <strong>View > Text Size > Increase</strong> (or <strong>View > Zoom > Zoom In</strong>) পছন্দ করতে পারে। <span id="result_box" lang="bn"><span class="hps">আপনি স্টাইল টি</span> <span class="hps">16</span> <span class="hps">পিক্সেল</span> <span class="hps">উল্লেখ</span> <span class="hps">যদিও</span><span>, ডকুমেন্ট</span> <span class="hps">পড়া</span> <span class="hps">একটি ব্যবহারকারী</span> <span class="hps">মাপ পরিবর্তন করতে পারেন</span></span>।</li> +</ol> +<div class="tuto_example"> + Challenge + <p>Without changing anything else, make all six initial letters twice the size in the browser's default serif font:</p> + <table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> + </table> + <div class="tuto_details" id="tutochallenge"> + <div class="tuto_type"> + Possible solution</div> + <p>Add the following style declaration to the <code>strong</code> rule:</p> + <pre class="brush: css"> font: 200% serif; +</pre> + If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. + <p> </p> + <a class="hideAnswer" href="#challenge">Hide solution</a></div> + <a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> +<h2 id="পরবর্তী">পরবর্তী ?</h2> +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}<span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="hps">ডকুমেন্ট</span> <span class="hps">ইতিমধ্যে</span> <span class="hps">বিভিন্ন</span> <span class="hps">নামে</span> <span class="hps">রং ব্যবহার করতে সক্ষম.</span></span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Color">The next section</a> দেয়া আছে রং এর তালিকা এবং কিভাবে আপনি রং প্রয়োগ করবেন।</p> 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 +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/bn-BD/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}<span class="seoSummary"><span class="seoSummary">এটি <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> <span id="result_box" lang="bn"><span class="alt-edited hps">টিউটোরিয়ালের <span id="result_box" lang="bn"><span class="hps">দ্বিতীয়</span> <span class="alt-edited hps">অধ্যায়</span></span></span></span> <span id="result_box" lang="bn"><span class="alt-edited hps">এবং ব্যাখ্যা করে কেন</span></span></span><span id="result_box" lang="bn"><span class="alt-edited hps"> ডকুমেন্ট</span> <span class="alt-edited hps">CSS</span> <span class="alt-edited hps">ব্যবহার করে।</span></span> আপনি CSS ব্যবহার করেন <span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="hps">একটি</span> <span class="hps">স্টাইলশীট</span> <span class="hps">যুক্ত করতে।</span></span></span></p> + +<h2 class="clearLeft" id="তথ্য_CSS_কেন_ব্যবহার_করব">তথ্য: CSS কেন ব্যবহার করব ?</h2> + +<p>CSS <span id="result_box" lang="bn"><span class="hps">একটি</span> <span class="alt-edited hps">ডকুমেন্টের</span> <span class="hps">তথ্য</span> <span class="alt-edited hps">সামগ্রী</span></span> সেটি কিভাবে <span id="result_box" lang="bn"><span class="alt-edited hps">প্রদর্শিত হবে তার <span id="result_box" lang="bn"><span class="hps">বিবরণ</span> <span class="hps">থেকে পৃথক রাখতে <span id="result_box" lang="bn"><span class="hps">সাহায্য করে। <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্ট </span></span></span></span></span></span></span></span>কিভাবে <span id="result_box" lang="bn"><span class="alt-edited hps">প্রদর্শিত হবে তার <span id="result_box" lang="bn"><span class="hps">বিবরণ <span id="result_box" lang="bn"><span class="alt-edited hps">স্টাইল</span> <span class="hps">হিসাবে পরিচিত। </span></span></span></span></span></span><span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="alt-edited hps">কন্টেন্ট</span> <span class="hps">থেকে </span></span><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps">স্টাইল </span></span></span></span></span></span>আলাদা রাখুন <span id="result_box" lang="bn"><span>যাতে আপনি পারেন </span></span>:</p> + +<ul> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">অনুলিপি</span> <span class="alt-edited hps">এড়াতে</span></span></li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">রক্ষণাবেক্ষণ</span> <span class="hps">সহজ</span> <span class="alt-edited hps">করে তুলতে</span></span></li> + <li><span id="result_box" lang="bn"><span class="alt-edited hps">বিভিন্ন উদ্দেশ্যে</span> <span class="hps">বিভিন্ন </span>স্টাইল এর <span class="hps">সঙ্গে একই</span> <span class="alt-edited hps">কন্টেন্ট</span> <span class="hps">ব্যবহার করতে</span></span></li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">উদাহরণ</div> + +<p><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">ওয়েব</span> <span class="hps">সাইটের <span id="result_box" lang="bn"><span class="hps">হাজার হাজার</span> <span id="result_box" lang="bn"><span class="hps">পৃষ্ঠা </span></span><span class="hps">থাকতে পারে</span></span></span></span> যারা <span id="result_box" lang="bn"><span class="alt-edited hps">অনুরূপ। <span id="result_box" lang="bn"><span class="hps">CSS এর</span> <span class="hps">ব্যবহার করে,<span id="result_box" lang="bn"><span class="alt-edited hps">আপনি একটি <span id="result_box" lang="bn"><span class="hps">সাধারণ</span> <span class="hps">ফাইলের মধ্যে</span> <span id="result_box" lang="bn"><span class="hps">তথ্য সংরক্ষণ করুন <span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps">যা</span> </span></span></span></span></span></span></span></span></span></span>সকল পৃষ্ঠা</span> <span class="alt-edited hps">শেয়ার</span> </span></span></span></span></span></span></span></span></span></span>করে।</p> + +<p>যখন একজন ব্যবহারকারী একটি ওয়েব পেইজ <span id="result_box" lang="bn"><span class="alt-edited hps">প্রদর্শন করে,<span id="result_box" lang="bn"><span class="hps">ব্যবহারকারীর</span> <span class="hps">ব্রাউজার</span> <span class="hps">পৃষ্ঠার</span> <span class="hps">কন্টেন্টের</span> <span class="alt-edited hps">পাশাপাশি</span> <span class="alt-edited hps">স্টাইলের</span> <span class="hps">তথ্য</span> <span class="hps">লোড করে।</span></span></span></span></p> + +<p><span id="result_box" lang="bn"><span class="hps">যখন একজন ব্যবহারকারী</span> <span class="hps">একটি</span> <span class="hps">ওয়েব পেজ</span> <span class="alt-edited hps">প্রিন্ট করে</span><span>, আপনি</span></span> <span id="result_box" lang="bn"><span class="alt-edited hps">বিভিন্ন</span> <span class="alt-edited hps">স্টাইলের</span> <span class="hps">তথ্য প্রদান করেন যা <span id="result_box" lang="bn"><span class="hps">মুদ্রিত</span> <span class="alt-edited hps">পৃষ্ঠা <span id="result_box" lang="bn"><span class="hps">পড়তে <span id="result_box" lang="bn"><span class="hps">সহজ করে তোলে।</span></span></span></span></span></span></span></span></p> +</div> + +<p><span id="result_box" lang="bn">HTML <span class="hps">দিয়ে</span> <span class="hps">সাধারণত </span><span class="hps">আপনি <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্টের</span> <span class="hps">তথ্য</span> <span class="alt-edited hps">সামগ্রী<span id="result_box" lang="bn"><span class="alt-edited hps"> বর্ণনা করেন</span> <span class="hps">মার্কআপ</span> <span class="hps">ভাষা</span> <span class="hps">ব্যবহার</span></span></span></span></span></span> করে,<span id="result_box" lang="bn"><span class="hps">তার</span> <span class="alt-edited hps">স্টাইল নয়।</span></span>আপনি CSS ব্যবহার করেন এর স্টাইল <span id="result_box" lang="bn"><span class="hps">নির্দিষ্ট করতে,<span id="result_box" lang="bn"><span class="hps">এর বিষয়বস্তু নয়</span></span></span></span> ।(<span id="result_box" lang="bn"><span class="hps">পরবর্তীতে</span> <span class="alt-edited hps">এই টিউটোরিয়ালে</span><span>, আপনি এই</span> <span class="hps">ব্যবস্থার</span> <span class="hps">কিছু</span> <span class="hps">ব্যতিক্রম</span> <span class="hps">দেখতে পাবেন।</span></span>)</p> + +<div class="tuto_details"> +<div class="tuto_type"><span class="short_text" id="result_box" lang="bn"><span class="hps">আরো তথ্য</span></span></div> + +<p><span id="result_box" lang="bn"><span class="hps">এছাড়াও <span id="result_box" lang="bn"><span class="alt-edited hps">HTML এর</span> <span class="hps">মত</span> <span class="hps">একটি</span> <span class="hps">মার্কআপ</span> <span class="hps">ভাষা <span id="result_box" lang="bn"><span class="alt-edited hps">স্টাইল</span> <span class="hps">নির্দিষ্ট করতে</span> <span class="hps">কিছু উপায়</span> <span class="hps">প্রদান করে।</span></span></span></span></span></span></p> + +<p><span id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ,</span> <span class="hps">HTML এ</span> <span class="hps">আপনি টেক্সট</span> <span class="hps">গাঢ়</span> <span class="hps">করতে একটি</span> <span class="hps"><b></span> <span class="hps">ট্যাগ</span> <span class="hps">ব্যবহার করতে পারেন</span><span>, <span id="result_box" lang="bn"><span>এবং আপনি</span> <span class="hps">তার</span> <span class="hps"><body></span> <span class="hps">ট্যাগ</span>ে <span class="hps">একটি</span> <span class="hps">পৃষ্ঠার</span> <span class="alt-edited hps">ব্যাকগ্রাউন্ড রং</span> <span class="hps">নির্ধারণ করতে পারবেন</span></span></span></span>।</p> + +<p>আপনি যখন CSS ব্যবহার করেন,<span id="result_box" lang="bn"><span class="hps">আপনি সাধারণত</span> <span class="hps">মার্কআপ</span> <span class="hps">ভাষার</span> <span class="alt-edited hps">এই বৈশিষ্ট্যগুলি</span> <span class="hps">ব্যবহার</span> <span class="hps">এড়িয়ে যান যাতে করে <span id="result_box" lang="bn"><span class="hps">আপনার সকল</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="alt-edited hps">এর স্টাইল</span> <span class="alt-edited hps">সংক্রান্ত তথ্য</span> <span class="hps">এক জায়গায়</span> <span class="hps">হয়।</span></span></span></span></p> +</div> + +<h2 id="অ্যাকশন_একটি_স্টাইলশীট_তৈরি"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">অ্যাকশন</span><span>:</span> <span class="hps">একটি</span> <span class="hps">স্টাইলশীট</span> <span class="hps">তৈরি</span></span></h2> + +<ol> + <li><span id="result_box" lang="bn"><span class="alt-edited hps">পূর্বের</span> মত <span class="hps">একই ডিরেক্টরির মধ্যে</span> <span class="hps">আরেকটি</span> <span class="hps">টেক্সট ফাইল</span> <span class="hps">তৈরি করুন।</span> <span class="alt-edited hps">এই</span> <span class="hps">ফাইলটি</span> <span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">হবে.</span> <span class="alt-edited hps">এটির</span> <span class="hps">নাম দিন </span></span>: <code>style1.css</code></li> + <li><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="alt-edited hps">CSS</span> <span class="hps">ফাইলের</span> <span class="hps">মধ্যে,</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps">এই এক</span> <span class="hps">লাইন </span></span>কপি</span> <span class="hps">এবং </span><span class="hps">পেস্ট করুন</span><span>, তারপর</span> <span class="alt-edited hps">ফাইলটি সংরক্ষণ করুন</span></span>: + <pre class="brush: css">strong {color: red;} +</pre> + </li> +</ol> + +<h3 id="আপনার_ডকুমেন্টের_সাথে_স্টাইলশীট_যুক্তকরণ"><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="alt-edited hps">ডকুমেন্টের সাথে <span class="short_text" id="result_box" lang="bn"><span class="hps">স্টাইলশীট <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">যুক্তকরণ</span></span></span></span></span></span></h3> + +<ol> + <li><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্ট এর সাথে <span id="result_box" lang="bn"><span class="hps">আপনার </span></span></span></span><span class="hps">স্টাইলশীট</span> <span class="hps">সংযুক্ত করতে,<span id="result_box" lang="bn"><span>আপনার</span> <span class="hps">HTML ফাইল</span> <span class="hps">সম্পাদনা করুন।<span id="result_box" lang="bn"><span class="hps"> এখানে</span> <span class="hps">হাইলাইট করা লাইনটি <span id="result_box" lang="bn"><span class="hps">যোগ করুন</span></span></span></span></span></span></span></span>: + + <pre class="brush: html; highlight:[6];"><!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> +</pre> + </li> + <li><span id="result_box" lang="bn"><span class="hps">ফাইলটি</span> <span class="hps">সংরক্ষণ করুন</span> <span class="hps">এবং আপনার</span> <span class="hps">ব্রাউজারের</span> <span class="alt-edited hps">ডিসপ্লে</span> <span class="hps">রিফ্রেশ করুন। <span id="result_box" lang="bn"><span class="hps">স্টাইলশীটটি <span id="result_box" lang="bn"><span class="alt-edited hps">প্রথম</span> <span class="hps">অক্ষরগুলোকে</span> <span class="hps">লাল</span> <span class="hps">করে তোলে, এভাবে</span></span></span></span></span></span>: + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<div class="tuto_example" id="challenge"> +<div class="tuto_type"><span class="short_text" id="result_box" lang="bn"><span class="hps">চ্যালেঞ্জ</span></span></div> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">লাল</span> <span class="hps">ছাড়াও,</span> <span class="alt-edited hps">CSS</span> <span class="hps">কিছু অন্যান্য</span> <span class="hps">রং </span></span>এর নাম প্রদান করে।</p> + +<p><span id="result_box" lang="bn"><span class="hps">রেফারেন্স না দেখে, <span id="result_box" lang="bn"><span id="result_box" lang="bn"><span class="hps">আরো </span></span></span><span id="result_box" lang="bn"><span class="hps">পাঁচটি</span> <span class="alt-edited hps">রঙের</span> <span class="hps">নাম</span> <span class="hps">খুঁজে বের করুন যা <span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="alt-edited hps">এ কাজ করে।</span></span></span></span></span></span></p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> + +<h2 id="পরবর্তীতে_কি"><span class="short_text" id="result_box" lang="bn"><span class="hps">পরবর্তী</span></span><span class="short_text" id="result_box" lang="bn"><span>তে কি?</span></span></h2> + +<p>{{nextPage("/bn-BD/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}<span id="result_box" lang="bn"><span class="alt-edited hps">এখন আপনার</span> <span class="hps">একটি পৃথক</span> <span class="hps">স্টাইলশীট</span> এর <span class="alt-edited hps">সাথে যুক্ত</span> <span class="hps">একটি নমুনা</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="hps">আছে</span><span>,</span></span> আপনি প্রস্তুত জানতে <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">learn more</a> কিভাবে <span id="result_box" lang="bn"><span class="alt-edited hps">আপনার ব্রাউজার</span> <span class="hps">তাদের</span> <span class="alt-edited hps">সমন্বয় করে যখন এটি <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্ট</span> <span class="alt-edited hps">প্রদর্শন করে।</span></span></span></span></p> 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..54e48ada6a --- /dev/null +++ b/files/bn/web/css/getting_started/নই/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 +--- +<p>{{ CSSTutorialTOC() }}</p> +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}<span class="seoSummary">এটি <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> টিউটোরিয়াল এর ৫ম অংশ; এটি ব্যাখ্যা করে আপনি কিভাবে স্টাইল সমুহ নির্বাচিতভাবে প্রয়োগ করবেন, এবং কিভাবে বিভিন্ন প্রকার নির্বাচক সমুহ বিভিন্ন প্রাধান্য পায়। আপনি আপনার নমুনা নিবন্ধে কিছু এট্রিবিউট যোগ করতে পারেন, এবং আপনি সেসব এট্রিবিউটগুলো আপনার নমুনা স্টাইলশীটে ব্যবহার করতে পারেন ।</span></p> +<h2 class="clearLeft" id="তথ্যঃ_নির্বাচকসমুহ">তথ্যঃ নির্বাচকসমুহ</h2> +<p>সি এস এস ভাষা ব্যাখ্যা করার জন্য সি এস এস এর নিজস্ব পারিভাষিক শব্দ আছে। এই টিউটোরিয়াল এর পূর্বে, আপনি একটি লাইন তৈরি করুন যেমনঃ</p> +<pre class="brush: css">strong { + color: red; +} +</pre> +<p>সি এস এস পারিভাষিক শব্দে, এই সমগ্র লাইন হল নিয়ম। এই নিয়ম শুরু হ্য়<code> strong</code> দিয়ে, যেটা একটা নির্বাচক। এটা নির্বাচন করে কোন উপাদানগুলো DOM-এ আছে কোন নিয়ম প্রয়োগ করা আছে ।</p> +<p>আরো বিস্তারিত</p> +<p>বাকা বন্ধনীর ভেতরের অংশে প্রকাশিত হয়।</p> +<div class="tuto_details"> + <p>মূলশব্দ <code>color</code> হল একটি বৈশিষ্ট্য এবং <code>red</code> হল একটি মান।</p> + <p>একই প্রকাশিত অংশে বৈশিষ্ট্যের জোড়া মানের পর সেমিকোলন দিয়ে অন্য বৈশিষ্ট্যের জোড়া মান থেকে আলাদা করা হয়।</p> + <p>এই টিউটোরিয়াল এ নির্বাচক যেমন <code>strong</code> উল্লেখ করা হয় ট্যাগ নির্বাচক হিসেবে। সি এস এস সুনির্দিষ্টভাবে এটিকে টাইপ নির্বাচক হিসেবে উল্লেখ করে।</p> +</div> +<p>নির্বাচকসমুহ যেগুলো আপনি সি এস এস নিয়মে ব্যবহার করতে পারেন এই টিউটোরিয়ালের পাতা সেগুলো সম্পর্কে আরো বেশি ব্যাখ্যা করে।</p> +<p>ট্যাগ নামের সাথে আপনি এট্রিবিউট এর মান নির্বাচকসমুহে ব্যবহার করতে পারেন।এটি আপনার নিয়মকে আরো সুনির্দিষ্ট করতে অনুমোদন করে।</p> +<p>সি এস এস এর দুইটি এট্রিবিউট এর বিশেষ অবস্থা আছে। তারা হল <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> এবং <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p> +<h3 id="নির্বচকসমুহের_ক্লাস">নির্বচকসমুহের ক্লাস</h3> +<p><a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> এট্রিবিউট একটি উপাদানকে নামকৃত ক্লাস এ বরাদ্দ করার জন্য ব্যবহার করা হয়। আপনি আপনার ক্লাস এর জন্য কোন নাম পছন্দ করবেন এটা আপনার উপর। একটা নিবন্ধে বিভিন্ন উপাদান একই নামের হতে পারে।</p> +<p>আপনার স্টাইলশীটে, ক্লাস নামের পূর্বে আপনি যখন একটি নির্বাচকে ব্যবহার করবেন তখন দাড়ি লিখুন(period) ।</p> +<h3 id="নির্বাচকসমুহের_আইডি">নির্বাচকসমুহের আইডি</h3> +<p><a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> এট্রিবিউট একটি উপাদানকে একটি আইডিতে বরাদ্দ করার জন্য ব্যবহৃত হয়। আপনি আইডিটার জন্যে কি নাম পছন্দ করবেন এটি আপনার উপর। নিবন্ধটিতে আইডি নাম অবশ্যই একটি এবং অনন্য হতে হবে।</p> +<p>আপনার স্টাইলশীটে, আপনি যখন নির্বাচকে ব্যবহার করবেন আইডির পূর্বে একটি নাম্বার সাইন(hash) লিখুন।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + এই এইচ টি এম এল ট্যাগের একটি <code>class</code> এট্রিবিউট এবং একটি <code>id</code> এট্রিবিউট আছেঃ<br> + <pre class="brush: html"><p class="key" id="principal"> +</pre> + <p>নিবন্ধে আইডি মান, মূল, অবশ্যই এক এবং অনন্য হতে হবে, কিন্তু অন্য ট্যাগসমুহে একই ক্লাস নাম, মূল থাকতে পারে।</p> + <p>একটি সি এস এস স্টাইলশীটে, এই নিয়ম সকল উপাদানকে একই ক্লাস <code>key</code> green এর অন্তর্ভূক্ত করেছে। (তারা সবাই {{ HTMLElement("p") }} এর উপাদান নাও হতে পারে)</p> + <pre class="brush: css">.key { + color: green; +} +</pre> + <p>এই নিয়ম একটি উপাদানকে <strong>id</strong> <code>principal</code> বোল্ড করে :</p> + <pre class="brush: css">#principal { + font-weight: bolder; +} +</pre> +</div> +<p>যদি একটির বেশি নিয়ম একটি উপাদান এ প্রয়োগ করা হয় এবং একই বৈশিষ্ট্য উল্লেখ করা হয়, তাহলে সি এস এস নিয়মের উপর প্রাধান্য দেয় যেটা আরো বেশি সুনির্দষ্ট নির্বাচক। একটি আইডি নির্বাচক ক্লাস নির্বাচক এর চেয়ে আরো সুনির্দিষ্ট, যেটা পর্যায়ক্রমে একটি ট্যাগ নির্বাচক এর চেয়ে আরো বেশি সুনির্র্দিষ্ট।</p> +<div class="tuto_details"> + <div class="tuto_type"> + আরো বিস্তারিত</div> + <p>আপনি নির্বাচকসমুহকে একত্রিত করতে পারেন, নির্বাচককে আরো বেশি সুনির্দিষ্ট করার জন্যে।</p> + <p>উদাহরণ স্বরুপ, নির্বাচক <code>.key</code> <code>ক্লাস নাম key যুক্ত </code>সকল উপাদানকে নির্বাচন করে। নির্বাচক <code>p.key</code> ক্লাস নাম <code>key যুক্ত উপাদানকে </code>শুধুমাত্র {{ HTMLElement("p") }} নির্বাচন করে ।</p> + <p>আপনি দুইটি বিশেষ এট্রিবিউট <code>class</code> এবং <code>id দ্বারা নিয়ন্ত্রিত নন</code>। আপনি অন্য এট্রিবিউট সুনির্দিষ্ট করতে পারেন স্কয়ার বন্ধনী ব্যবহার করে। যেমন, নির্বাচক <code>[type='button']</code><code>button মানের একটি </code><code>type এট্রিবিউট দ্বারা</code> সকল উপাদানকে নির্বাচিত করে ।</p> +</div> +<p>যদি স্টাইলশীটে নিয়মগুলো পরস্পর বিরোধী হ্য় এবং তারা সমানভাবে সুনির্দিষ্ট হয়, তাহলে তারা সি এস এস নিয়মকে প্রাধান্য দেয় যেটা স্টাইলশীটে পরের দিকে আছে।</p> +<p>যখন পরস্পর বিরোধী নিয়মের কারণে আপনার সমস্যা হবে, আরো সুনির্দিষ্ট কোন নিয়মের দ্বারা এটি সমাধান করার চেষ্টা করুন, তাহলে সেটাই প্রাধান্য পাবে। যদি আপনি সেটা করতে না পারেন, চেষ্টা করুন স্টাইলশীটের শেষের দিকের কোন নিয়মের কাছাকাছি যেতে তাহলে সেটিই প্রাধান্য পাবে।</p> +<h3 id="নকল_ক্লাসের_নির্বাচকসমূহ">নকল ক্লাসের নির্বাচকসমূহ</h3> +<p>একটি <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="en-US/docs/Web/Guide/CSS/Pseudo-classes">pseudo-class</a> সি এস এস এর মূলশব্দ নির্বাচকের সাথে যুক্ত যেটা উপাদানের বিশেষ অবস্থা নির্বাচনের জন্য সুনির্দিষ্ট করে। উদাহরণ সরূপ, {{ Cssxref(":hover") }} একটা স্টাইল প্রয়োগ করা যাবে যখন কোন ব্যবহারকারী নির্বাচকের দ্বারা সুনির্দিষ্ট করে দেয়া উপাদানের উপর চলাচল করবে।</p> +<p>নকল ক্লাসসমুহ, নকল উপাদানগুলোর সাথে, আপনাকে একটি উপাদানের উপর শুধু স্টাইল প্রয়োগ করতে দেয়না, সেই সাথে বহিরাগত কারণের সাথে সংযোগ করে যেমন নেভিগেটরের ইতিহাস ({{ cssxref(":visited") }}, উদাহরণ স্বরূপ), এটার উপাদানের অবস্থা (যেমন {{ cssxref(":checked") }} কিছু উপাদানের গঠনের উপর), অথবা মাউসের অবস্থান (যেমন {{ cssxref(":hover") }} যেটা আপনাকে জানাবে মাউসটি উপাদানের উপর আছে নাকি নাই). একটি সম্পূর্ণ নির্বাচক সমুহের তালিকা, <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a> এখানে যান।</p> +<div class="tuto_example"> + <div class="tuto_type"> + Syntax</div> + <pre class="brush:css">selector:pseudo-class { + property: value; +} +</pre> +</div> +<h4 id="নকল_ক্লাসসমুহের_তালিকা">নকল ক্লাসসমুহের তালিকা</h4> +<ul> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":visited") }}</li> + <li>{{ Cssxref(":active") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":nth-child") }}</li> + <li>{{ Cssxref(":nth-last-child") }}</li> + <li>{{ Cssxref(":nth-of-type") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":disabled") }}</li> +</ul> +<h2 id="তথ্যঃ_সম্পর্কের_ভিত্তিতে_নির্বাচক_সমুহ">তথ্যঃ সম্পর্কের ভিত্তিতে নির্বাচক সমুহ</h2> +<p>উপাদান সমুহের মধ্যে পারস্পরিক সম্পর্কের ভিত্তিতে উপাদান সমুহ নির্বাচন করার জন্য সি এস এস এর কিছু উপায় আছে। নির্বাচক সমুহকে আরো বেশি সুনির্দিষ্ট করার জন্যে আপনি এগুলো ব্যবহার করতে পারেন।</p> +<table id="relselectors"> + <caption> + সম্পর্কের ভিত্তিতে পরিচিত নির্বাচকসমুহ</caption> + <tbody> + <tr> + <td style="width: 10em;"><strong>নির্বাচক</strong></td> + <td><strong>নির্বাচিতসমুহ</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td>Any E element that is a <em>descendant</em> of an A element (that is: a child, or a child of a child, <em>etc</em>.)</td> + </tr> + <tr> + <td><code>A > E</code></td> + <td>Any E element that is a child of an A element</td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td>Any E element that is the first child of its parent</td> + </tr> + <tr> + <td><code>B + E</code></td> + <td>Any E element that is the next <em>sibling</em> of a B element (that is: the next child of the same parent)</td> + </tr> + </tbody> +</table> +<p>আপনি জটিল সম্পর্কগুলোকে প্রকাশ করার জন্যে এগুলো একত্রিত করতে পারেন।</p> +<p>আপনি <code>*</code> (asterisk) এই চিহ্নটি ব্যবহার করতে পারেন "যেকোনো উপাদান" বুঝানোর জন্যে।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>একটি এইচ টি এম এল টেবিলের একটি <code>id</code> এট্রিবিউট, কিন্তু এটির সারি এবং ছোট অংশগুলোর আলাদা আলাদা সনাক্তকারী থাকে নাঃ</p> + <pre class="brush: html"><table id="data-table-1"> +... +<tr> +<td>Prefix</td> +<td>0001</td> +<td>default</td> +</tr> +... +</pre> + <p>এই নিয়মগুলা সকল সারির প্রথম অংশকে বোল্ড করে, এবং দ্বিতীয় অংশকে মনোস্থানিক করে। তারা শুধু একটি সুনির্দিষ্ট টেবিলকে প্রভাবিত করেঃ</p> + <pre class="brush:css"> #data-table-1 td:first-child {font-weight: bolder;} + #data-table-1 td:first-child + td {font-family: monospace;} +</pre> + <p>ফলাফল এরূপ দেখায়ঃ</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table style="width: 18em; margin-right: 2em;"> + <tbody> + <tr> + <td><strong>Prefix</strong></td> + <td><code>0001</code></td> + <td>default</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + আরো বিস্তারিত</div> + <p>প্রচলিত উপায়ে, আপনি যদি একটি নির্বাচককে আরো সুনির্দিষ্ট করেন, তখন আপনি এটার প্রাধান্য বৃদ্ধি করতে পারবেন।</p> + <p>আপনি যদি পদ্ধতিগুলো ব্যবহার করেন, আপনার নিবন্ধে অনেকগুলো ট্যাগ-এর <code>class</code> অথবা <code>id এট্রিবিউটগুলোকে আপনি সুনির্দিষ্ট করার প্রয়োজন পরিহার করতে পারবেন। </code>তা ব্যতীত, সি এস এস কাজ করবে না।</p> + <p>অনেক বড় নকশার ক্ষেত্রে যেখানে গতি গুরুত্বপূর্ণ, আপনি আপনার স্টাইলশীটকে আরো নিপুণ করতে পারবেন জটিল নিয়মসমুহকে পরিহার করে যেটা উপাদান সমুহের মধ্যে পারস্পরিক সম্পর্কের উপর নির্ভর করে।</p> + <p>টেবিল সম্পর্কে আরো বেশি উদাহরণ এর জন্যে, সি এস এস রেফারেন্স পাতায় <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables </a>দেখুন।</p> +</div> +<h2 id="কাজঃ_ক্লাস_এবং_আইডি_নির্বাচক_সমুহের_ব্যবহার">কাজঃ ক্লাস এবং আইডি নির্বাচক সমুহের ব্যবহার</h2> +<p style="margin-left: 40px;">১। আপনার এইচ টি এম এল ফাইলটি সম্পাদনা করুন, কপি এবং পেস্ট করার মাধ্যমে।</p> +<p style="margin-left: 40px;">২। তারপর প্রথম কপিতে আইডি এবং ক্লাস এট্রিবিউট ব্যবহার করুন এবং একটি আইডি এট্রিবিউট দ্বিতীয় কপিতে দিন যেমন নিচে দেখানো হয়েছে। বিকল্পরূপে, আবার সমগ্র ফাইলকে কপি এবং পেস্ট করুনঃ</p> +<ol> + <li> + <pre class="brush: html"><!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> +</pre> + </li> + <li>এখন আপনি আপনার সি এস এস ফাইলটি সম্পাদনা করুন। সমগ্র বিষয় পুনঃস্থাপন করুনঃ<br> + <pre class="brush:css">strong { color: red; } +.carrot { color: orange; } +.spinach { color: green; } +#first { font-style: italic; } +</pre> + </li> + <li>ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ<br> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + লাইনের ক্রম কোন প্রভাব ফেলে না এটি দেখানোর জন্য আপনি আপনার সি এস এস ফাইলে লাইনগুলো পুনরায় সাজানোর চেষ্টা করতে পারেন।<br> + <br> + <p>ক্লাস নির্বাচকসমুহ <code>.carrot</code> এবং <code>.spinach</code> ট্যাগ নির্বাচক <code>strong</code> এর উপরে প্রাধান্য পায়।</p> + <p>আইডি নির্বাচক <code>#first</code> ক্লাস এবং ট্যাগ নির্বাচকের উপরে প্রাধান্য পায়।</p> + </li> +</ol> +<div class="tuto_example"> + <div class="tuto_type"> + প্রতিদ্বন্দ্বিতাসমুহ</div> + <ol> + <li>আপনার এইচ টি এম এল ফাইল পরিবর্তন করা ছাড়া, আপনার সি এস এস ফাইলে একটি একক নিয়ম যোগ করুন যেটা সকল প্রথম অক্ষরকে একই রং এর করে রাখে যেমন এখন তারা আছে, কিন্তু দ্বিতীয় বর্ণনায় অন্য সকল টেক্সটকে নীল করে।<br> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li>আপনি যে নিয়মটি এইমাত্র যোগ করেছেন তা এখন পরিবর্তন করে (অন্য কিছু পরিবর্তন না করে), প্রথম বর্ণনাকে নীল করার জন্যেঃ<br> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + </ol> + <div class="tuto_details" id="tutochallenge"> + <div class="tuto_type"> + Possible solution</div> + <ol> + <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: + <pre class="brush: css">#second { color: blue; } +</pre> + A more specific selector, <code>p#second</code> also works.</li> + <li>Change the selector of the new rule to be a tag selector using <code>p</code>: + <pre class="brush: css">p { color: blue; } +</pre> + </li> + </ol> + <a class="hideAnswer" href="#challenge">Hide solution</a></div> + <a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> +<h2 id="কাজঃ_নকল_ক্লাসের_নির্বাচকসমুহের_ব্যবহার">কাজঃ নকল ক্লাসের নির্বাচকসমুহের ব্যবহার</h2> +<ol> + <li>নিচের মত একটি এইচ টি এম এল ফাইল তৈরি করুনঃ</li> + <li> + <pre class="brush: html"><!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> +</pre> + </li> + <li>এখন আপনার সি এস এস ফাইল সম্পাদনা করুন। সমগ্র বিষয়গুলো পুনঃস্থাপন করুনঃ<br> + <pre class="brush: css">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; +} +</pre> + </li> + <li>ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ (আপনার মাউসটি নিচের লিংকের উপর রাখুন প্রভাব দেখার জন্য): + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td> + </tr> + </tbody> + </table> + </li> +</ol> +<h2 id="কাজঃ_সম্পর্ক_এবং_নকল_ক্লাসের_ভিত্তিতে_নির্বাচকসমুহের_ব্যবহার">কাজঃ সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহের ব্যবহার</h2> +<p>সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহ দ্বারা আপনি জটিল ক্যাসকেড এলগরিদম তৈরি করতে পারবেন।এটি ব্যবহার করার জন্য একটি সাধারণ কৌশল , উদাহরণ স্বরূপ, in order to create <strong>pure-CSS dropdown menus</strong> তৈরি করার জন্য (এটি শুধুমাত্র সি এস এস, <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript </a>ব্যতিরেকে). এই কৌশল এর সারাংশ হল নিম্নে বর্ণিত নিয়মের মত একটি নিয়ম তৈরি করাঃ</p> +<pre class="brush: css">div.menu-bar ul ul { + display: none; +} + +div.menu-bar li:hover > ul { + display: block; +}</pre> +<p>প্রয়োগ করার জন্য একটি এইচ টি এম এল গঠন নিম্নে দেয়া হলঃ</p> +<pre class="brush: html"><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> +</pre> +<p>আপনার সম্পূর্ণ <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> দেখুন একটি সম্ভব সংকেতের জন্য।</p> +<h2 id="পরবর্তীতে_কি">পরবর্তীতে কি?</h2> +<p>আপনার নমুনা স্টাইলশীট এখন এবং জটিল দেখাতে শুরু করেছে। পরবর্তী অংশ সি এস এসকে <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a> করার উপায় বর্ণনা করে {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p> 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..40292c7e7e --- /dev/null +++ b/files/bn/web/css/getting_started/লে-আউট/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 +--- +<p style="margin-left: 40px;">{{ CSSTutorialTOC() }}</p> +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}} <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS শুরু করা</a>র ১২তম অধ্যায় এটি; আপনার ডকুমেন্টের লে-আউট কীভাবে adjust করা যায় তা রয়েছে এখানে। আপনার নমুনা ডকুমেন্টের লে-আউট আপনি পরিবর্তন করতে পারেন।</p> +<h2 class="clearLeft" id="তথ্যঃ_লে-আউট">তথ্যঃ লে-আউট</h2> +<p>বিভিন্ন দৃশ্যমান প্রভাব বিশেষায়িত করার জন্য আপনি CSS ব্যবহার করতে পারেন যা আপনার ডকুমেন্টের লে-আউট পরিবর্তন করে। লে-আউট বিশেষায়িত করার কিছু পদ্ধতি বেশ অগ্রসর এবং সেগুলো এই বেসিক টিউটোরিয়ালের ঊর্ধ্বে।</p> +<p>আপনি যখন একাধিক ব্রাউজারে প্রায় একইরকম দৃশ্যমান লে-আউট ডিজাইন করেন, তবে তা আপনার স্টাইলশীট ব্রাউজারের ডিফল্ট স্টাইলশীট এবং লে-আউট ইঞ্জিনের সাথে যেভাবে interact করে তা বেশ জটিল হতে পারে। এটিও একটি অগ্রসরমান বিষয়, এই বেসিক টিউটোরিয়ালের ঊর্ধ্বে।</p> +<p>এই পেজে আপনার চেষ্টা করে দেখার জন্য কিছু সহজ কৌশল বর্ণনা করা আছে।</p> +<h3 id="ডকুমেন্ট_স্ট্রাকচার">ডকুমেন্ট স্ট্রাকচার</h3> +<p>আপনি যদি আপনার ডকুমেন্টের লে-আউট নিয়ন্ত্রণ করতে চান তবে আপনাকে এর স্ট্রাকচার পরিবর্তন করতে হতে পারে।</p> +<p>আপনার ডকুমেন্টের মার্কআপ ল্যাংগুয়েজের খুব সম্ভবত স্ট্রাকচার তৈরি করার জন্য general-purpose ট্যাগ আছে। যেমন ধরুনঃ HTMLএ আপনি স্ট্রাকচার তৈরির জন্য {{ HTMLElement("div") }} এলিমেন্ট ব্যবহার করতে পারেন।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>নমুনা ডকুমেন্টে, দ্বিতীয় শিরোনামের আওতায় সংখ্যায়িত প্যারাগ্রাফে নিজস্ব কোন কন্টেইনার নেই।</p> + <p>আপনার স্টাইলশীট প্যারাগ্রাফগুলোর চারদিকে বর্ডার টানতে পারে না, কারণ এই সেক্টরটি বিশেষায়িত করার জন্য কোন এলিমেন্ট নাই।</p> + <p>স্ট্রাকচারের এই সমস্যা সমাধানের জন্য, আপনি প্যারাগ্রাফের চারদিকে একটি {{ HTMLElement("div") }} ট্যাগ যোগ করতে পারেন। এই ট্যাগটি ,তাই এটি নির্দিষ্ট করা যেতে পারে একটি <code>id</code> অ্যাট্রিবিউট দিয়েঃ</p> + <pre class="brush:html;highlight:[2,8]"><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> +</pre> + <p>এখন আপনার স্টাইলশীট দুটি লিস্টের চারদিকে বর্ডার দেওয়ার জন্য একটি রুল ব্যবহার করতে পারেঃ</p> + <pre class="brush:css">ul, #numbered { + border: 1em solid #69b; + padding-right:1em; +} +</pre> + <p>এরকম দেখতে পাওয়ার কথাঃ</p> + <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> + <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + </div> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> + </table> +</div> +<h3 id="সাইজ_ইউনিট">সাইজ ইউনিট</h3> +<p>এত দূর পর্যন্ত এই টিউটোরিয়ালে আপনি pixel (<code>px</code>)এ সাইজ নির্ধারণ করেছেন। কম্পিউটার স্ক্রিনের মত কিছু কিছু ডিসপ্লে ডিভাইসের ক্ষেত্রের জন্য এটি যথাযথ। কিন্তু ব্যবহারকারী যখন ফন্ট সাইজ পরিবর্তন করে তখন আপনার লে-আউটে সমস্যা দেখা দিতে পারে।</p> +<p>অধিকাংশ ক্ষেত্রেই শতকরা হিসাবে অথবা ems (<code>em</code>)এ সাইজ নির্দিষ্ট করে দেওয়াই ভাল। em হল nominally চলমান ফন্টের (একটি m এর প্রসস্ততা) সাইজ। ব্যবহারকারী যখন ফন্ট সাইজ পরিবর্তন করেন, আপনার লে-আউট নিজে পরিবর্তন থেকেই হয়ে যায়।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>এই টেক্সটের বামদিকের বর্ডারের সাইজ পিক্সেলে নির্ধারিত।</p> + <p>ডানদিকের বর্ডারের সাইজ ems দিয়ে নির্ধারিত।</p> + <p>আপনার ব্রাউজারে, ফন্ট পরিবর্তন করে দেখতে পারেন কীভাবে ডানদিকের বর্ডার adjusts হয় কিন্তু বাঁদিকের বর্ডার হয় নাঃ</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div style=""> + আমার আকার পুনঃনিরধারণ করুন</div> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + বিস্তারিত</div> + <p>অন্যান্য ডিভাইসের ক্ষেত্রে, অন্যান্য দৈর্ঘ্য একক প্রযোজ্য।</p> + <p>এই টিউটোরিয়ালের পরবর্তী পেজে এ সংক্রান্ত আরো তথ্য আছে।</p> + <p>মান ও একক সংক্রান্ত বিস্তারিত জানার জন্য, CSS Specificationএ আপনি see <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> ব্যবহার করতে পারেন।</p> +</div> +<h3 id="টেক্সট_লে-আউট">টেক্সট লে-আউট</h3> +<p>কোন এলিমেন্টের একাধিক কন্টেন্ট কীভাবে এক লাইনে নিয়ে আসা যায় তা দুইটি প্রপার্টি দিয়ে নির্ধারিত হয়। সাধারণ লে-আউট adjustment এর জন্য আপনি সেগুলো ব্যবহার করতে পারেনঃ</p> +<dl> + <dt> + {{ cssxref("text-align") }}</dt> + <dd> + কন্টেন্ট এক লাইনে নিয়ে আসা। এই ভেল্যুগুলোর যেকোনটি ব্যবহার করেঃ <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd> + <dt> + {{ cssxref("text-indent") }}</dt> + <dd> + আপনার নির্ধারিত পরিমাণ অনুসারে কন্টেন্ট ইনডেন্ট করেঃ</dd> +</dl> +<p>শুধুমাত্র লেখাতেই না কোন এলিমেন্টের লেখা সদৃশ যেকোন কনটেন্টে এই প্রপার্টিগুলো প্রয়োগ করা যেতে পারে। খেয়াল রাখবেন, এগুলো এলিমেন্টের children দিয়ে inherited, তাই অবান্তর ফলাফল এড়াতে আপনাকে খুব সম্ভবত childrenএ সেগুলো বন্ধ করে নেওয়ার প্রয়োজন হতে পারে।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>শিরোনাম মাঝে আনতেঃ</p> + <pre class="brush:css">h3 { + border-top: 1px solid gray; + text-align: center; +} +</pre> + <p>ফলাফলঃ</p> + <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> + </td> + </tr> + </tbody> + </table> + <p>যে কোন HTML ডকুমেন্টে, শিরোনামের নিচে আপনি যে কনটেন্ট দেখেন তা গঠনগত ভাবে শিরোনামের আওতাধীন নয়। তাই আপনি যখন এরক্ম কোন শিরোনামকে এক লাইনে নিয়ে আসেন, তখন শিরোনামের নিচের ট্যাগগুলো ওই স্টাইলের অন্তর্ভুক্ত হয় না।</p> +</div> +<h3 id="Floats">Floats</h3> +<p>{{ cssxref("float") }} প্রপার্টি কোন এলিমেন্টকে ডানে-বামে সরায়। এলিমেন্টের অবস্থান ও আকার নির্ধারণের জন্য এটি একটি সহজ উপায়।</p> +<p>ডকুমেন্ট কনটেন্টের বাকি অংশ সাধারণত floated এলিমেন্টের চারদিকেই থাকে। অন্যান্য এলিমেন্টগুলোতে {{ cssxref("clear") }} প্রপার্টি ব্যবহার করে আপনি তাদের ফ্লট এর বাইরে থাকা নিয়ন্ত্রণ করতে পারেন।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>আপনার নমুনা ডকুমেন্টে, লিস্ট উইন্ডোতে ছড়িয়ে থাতে পারে। সেগুলোকে বাঁদিকে সরিয়ে আপনি তা রোধ করতে পারেন।</p> + <p>শিরোনামগুলোকে সঠিক স্থানে রাখার জন্য, আপনাকে অবশ্যই এটি নির্দিষ্ট করে দিতে হবে যেন সেগুলো ফ্লট মুক্ত থাকেঃ</p> + <pre class="brush:css">ul, #numbered {float: left;} +h3 {clear: left;} +</pre> +</div> +<p>এমন দেখতে পাওয়ার কথাঃ</p> +<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> +</table> +<p>(বক্সের ডানদিকে সামান্য padding দরকার, সেখানে বর্ডার লেখার খুবই কাছে হয়ে গিয়েছে।)</p> +<h3 id="অবস্থান_নির্ধারণ">অবস্থান নির্ধারণ</h3> +<p>চারটি উপায়ে আপনি কোন এলিমেন্টের অবস্থান নির্ধারণ করতে পারেন {{ cssxref("position") }} প্রপার্টি এবং নিচের যেকোন একটি ভেল্যু নির্দিষ্ট করে।</p> +<p>এগুলো এডভান্সড প্রপার্টি। সহজভাবেও এগুলো ব্যবহার করা যায় — সেজন্যই এই বেসিক টিউটোরিয়ালে এ সম্পর্কে বলা হয়েছে। তবে কমপ্লেক্স লে-আউটের জন্য এগুলো ব্যবহার করা কিছুটা জটিল হতে পারে।</p> +<dl> + <dt> + <code>relative</code></dt> + <dd> + এলিমেন্টের স্বাভাবিক অবস্থানের আপেক্ষিক পরিবর্তন করা হয়। Use this to shift an element by a specified amount. You can sometimes use the element's margin to achieve the same effect.</dd> + <dt> + <code>fixed</code></dt> + <dd> + এক্ষেত্রে এলিমেন্টের অবস্থান নির্দিষ্ট। এলিমেন্টের অবস্থান ডকুমেন্ট উইন্ডো অনুযায়ী নির্ধারণ করুন। বাকি ডেকুমেন্ট স্ক্রল করলেও এ ক্ষেত্রে এলিমেন্টটি স্থির থাকবে।</dd> + <dt> + <code>absolute</code></dt> + <dd> + parent এলিমেন্টের তুলনায় এলিমেন্টের অবস্থান স্থির থাকবে। শুধুমাত্র একটি parent যার নিজের অবস্থান <code>relative</code>, <code>fixed</code> অথবা <code>absolute</code> দিয়ে নির্ধারিত সেটি কাজ করবে। <code>position: relative নির্দিষ্ট করে আপনি যেকোন </code>parent<code> এলিমেন্টকেই এর জন্য প্রস্তুত করে নিতে পারেন;</code> এর জন্য কোন শিফট ব্যবহার না করেই।</dd> + <dt> + <code>static</code></dt> + <dd> + ডিফল্ট। অবস্থান নির্ধারণ করা সম্পূর্ণ বন্ধ করার প্রয়োজন হলে এই ভেল্যুটি ব্যবহার করুন।</dd> +</dl> +<p><code>position</code> প্রপার্টির এই ভেল্যুগুলোর সাথে সাথে (<code>static ব্যতীত</code>), আরো কিছু প্রপার্টি নির্দিষ্ট করুনঃ <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code>। আপনি কোথায় আপনার এলিমেন্টটি দেখতে পেতে চান তা এগুলো নির্দেশ করে এবং এর সাথে সাথে আকারও।</p> +<div class="tuto_example"> + <div class="tuto_type"> + উদাহরণ</div> + <p>দুইটি এলিমেন্ট একে অপরের উপর অবস্থাআন দেওয়ার জন্য, আপনার ডকুমেন্টের ভেতরে দুইটি এলিমেন্টসহ একটি parent কন্টেইনার তৈরি করুনঃ</p> + <pre class="brush:html"><div id="parent-div"> + <p id="forward">/</p> + <p id="back">\</p> +</div> +</pre> + <p>আপনার স্টাইলশীটে, parents এর অবস্থান <code>relative</code> করুন। এখানে কোন প্রকৃত শিফট নির্ধারণের কোন প্রয়োজন নেই। children এর অবস্থান <code>absolute</code> নির্ধারণ করুনঃ</p> + <pre class="brush:css">#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; +} +</pre> + <p>ফলাফলে ফরওয়ার্ড শ্ল্যাশের উপরে ব্যাকশ্ল্যাশ দিয়ে এমনটি দেখতে পাওয়ার কথাঃ</p> + <div style="position: relative; left: .33em; font: bold 300% sans-serif;"> + <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> + <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> + </div> + <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;"> + <tbody> + <tr> + <td> </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + আরো বিস্তারিত</div> + <p>অবস্থান নির্ধারণের পুরো বিষয়টির উপর CSS Specificationএ দুইটি জটিল অধ্যায় আছেঃ <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> এবং <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>.</p> + <p>আপনি যদি একাধিক ব্রাউজারে কার্যকর কোন স্টাইলশীট ডিজাইন করতে থাকেন, তবে আপনারও তা অ্যাকাউন্ট ডিফারেন্সে নেওয়ার দরকার হতে পারে, যেভাবে ব্রাউজার স্ট্যান্ডার্ডের সাথে interpret করে এবং খুব সম্ভবত নির্দিষ্ট কিছু ব্রাউজারের বিশেষ কিছু ভার্সনে বাগ করতে পারে।</p> +</div> +<h2 id="Action_লে-আউট_নির্ধারণ">Action: লে-আউট নির্ধারণ</h2> +<ol> + <li>আপনার নমুনা ডকুমেন্ট পরিবর্তন করুন, <code>doc2.html</code> এবং স্টাইলশীট, <code>style2.css</code>, এই অংশে উপরের উদাহরণ <a href="#Document_structure" title="#Document structure"><strong>ডকুমেন্ট স্ট্রাকচার</strong></a> এবং <a href="#Floats" title="#Floats"><strong>ফ্লটস</strong></a>।</li> + <li><a href="#Floats" title="#Floats"><strong>ফ্লটস</strong></a> উদাহরণে, আপনার padding যুক্ত করুন ডানদিকের বর্ডার থেকে টেক্সট 0.5 em দূরে সরানোর জন্য।</li> +</ol> +<div class="tuto_example"> + <div class="tuto_type"> + চ্যালেঞ্জ</div> + <p>আপনার<strong> </strong>নমুনা ডকুমেন্ট পরিবর্তন করুন, <code>doc2.html</code>, শেষ করার আগ দিয়ে এই ট্যাগটি যুক্ত করে, <code></body> ট্যাগের </code>ঠিক আ<code>গে।</code></p> + <pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> +</pre> + <p>এই টিউটোরিয়ালে আপনি যদি ইমেজ ফাইলটি আগে থেকে ডাউনলোড না করে থাকেন, তবে এখন সেটি ডাউনলোড করে নিন এবং <code>নমুনা ফাইলের মত </code>একই ডিরেক্টরিতে এটি রাখুনঃ</p> + <table style="border: 2px solid #ccc;"> + <tbody> + <tr> + <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> + </tr> + </tbody> + </table> + <p>আপনার ডকুমেন্টের কোথায় ইমেজটি দেখা যেতে ঠিক করে নিন। এবার আপনার ব্রাউজার রিফ্রেশ করুন আপনার কাজ সঠিক হয়েছে কিনা তা দেখার জন্য।</p> + <p>আপনার স্টাইলশীটে একটি রুল যুক্ত করুন যা আপনার ডকুমেন্টে উপরের দিকে ডানে ইমেজটি রাখে।</p> + <p>আপ্নার ব্রাউজার রিফ্রেশ করে উইন্ডোটি ছোট করুন। যখন আপনি আপনার ডকুমেন্ট স্ক্রল করেন তখন দেখুন ইমেজটি উপরের দিকে ডানে থাকে কিনাঃ</p> + <div style="position: relative; width: 29.5em; height: 18em;"> + <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </div> + <p style=""> </p> + <div style="position: absolute; top: 2px; right: 0px;"> + <img alt="Yellow map pin" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></div> + </div> + </div> +</div> +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout"> এই চ্যালেঞ্জটির একটি সমাধান দেখুন।</a></p> +<h2 id="এর_পরে">এর পরে?</h2> +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }} এইমাত্র আপনি এই বেসিক CSS টিউটোরিয়ালের সব টপিক প্রায় শেষ করে ফেলেছেন। পরবর্তী পেজটি CSS রুলের আরো অ্যাডভান্সড সিলেক্টর বর্ণনা করে এবং আরো কিছু নির্দিষ্ট উপায় যা দিয়ে আপনি <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables">টেবিল</a> স্টাইল করতে পারেন।</p> 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 +--- +<p><span class="seoSummary"><strong>Cascading Style Sheets</strong>, <strong>CSS</strong>, মূলত <a href="https://developer.mozilla.org/bn-BD/docs/DOM/stylesheet">stylesheet</a> সংক্রান্ত ভাষা যা একটি <a href="https://developer.mozilla.org/bn-BD/docs/HTML" title="The HyperText Mark-up Language">HTML</a></span> or <a href="https://developer.mozilla.org/bn-BD/docs/XML" title="en-US/docs/XML">XML</a> দিয়ে (অনেক ধরনের XML ভাষা সহ যেমন <a href="https://developer.mozilla.org/bn-BD/docs/SVG" title="en-US/docs/SVG">SVG</a> অথবা <a href="https://developer.mozilla.org/bn-BD/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>) লেখা নথির উপস্থাপনায় বাবহারিত হয়ে থাকে ।<span class="seoSummary"> CSS </span>গঠনকৃত উপাদান গুলো পর্দায় , কাগজে, <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">বক্তব্য বা অন্য কোন মাধ্যমে </span></span> কিভাবে <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">উপস্থাপিত হবে তা ব্যাখ্যা করে থাকে।</span></span></p> + +<p>CSS মুক্ত ওয়েবের একটি কেন্দ্রীয় ভাষা এবং এর <span class="short_text" id="result_box" lang="bn"><span class="hps">প্রমিত</span></span> <a class="external external-icon" href="http://w3.org/Style/CSS/#specs">W3C specification</a> আছে। ধাপে ধাপে <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">বিকশিত হবার কারণে</span></span>, CSS1 বর্তমানে অপ্রচলিত , CSS2.1 একটি পরামর্শ স্বরূপ হয়ে গিয়েছে এবং <a href="https://developer.mozilla.org/bn-BD/docs/CSS/CSS3" title="CSS3">CSS3</a>, <span class="short_text" id="result_box" lang="bn"><span class="hps">এখন</span> <span class="hps">ছোট</span> <span class="short_text" id="result_box" lang="bn"><span class="hps">ছোট</span></span> <span class="alt-edited hps">মডিউলে</span> <span class="hps">বিভক্ত</span></span>, যা প্রমিত রূপ লাভের দিকে অগ্রসর হচ্ছে।</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>সিএসএস রেফারেন্স</span> + + <p>ওয়েব ডেভেলপারদের জন্য সিএসএস এর প্রতিটি প্রোপার্টি এবং ধারণা আলোচনা করা হয়েছে আমাদের <a href="https://developer.mozilla.org/bn-BD/docs/CSS/CSS_Reference" title="en-US/docs/CSS/CSS_Reference">বিশাল রেফারেন্সে</a>।</p> + </li> + <li><span>সিএসএস টিউটোরিয়াল</span> + <p>সম্পূর্ণ নতুনদের জন্য <a href="https://developer.mozilla.org/bn-BD/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">ধারাবাহিক পরিচিতি</a>। এতে সকল প্রয়োজনীয় বিষয়াদি উপস্থাপন করা হয়েছে।</p> + </li> + <li><span>সিএসএস ডেমো</span> + <p>একটি <a href="https://developer.mozilla.org/bn-BD/demos/tag/tech:css3" title="https://developer.mozilla.org/bn-BD/demos/tag/tech:css3">ডেমোর সংগ্রহ</a> যা সর্বশেষ সিএসএস প্রযুক্তির ক্ষমতা প্রদর্শন করে: সৃজনশীলতা বাড়ানোর জন্য দারুন!</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">ডকুমেন্টেশন এবং টিউটোরিয়াল</h2> + +<dl> + <dt>সিএসএস এর মৌলিক ধারনা</dt> + <dd>এখানে <a href="/bn-BD/docs/CSS/Syntax" title="/bn-BD/docs/CSS/Syntax">সিনট্যাক্স ও ভাষার ধরন</a> এবং <a href="/bn-BD/docs/CSS/Specificity" title="Specificity">স্পেসিফিসিটি</a>, <a href="/bn-BD/docs/CSS/inheritance" title="inheritance">ইনহেরিট্যান্স</a>, <a href="/bn-BD/docs/CSS/box_model" title="Box model">বক্স মডেল</a>, <a href="/bn-BD/docs/CSS/margin_collapsing" title="Margin collapsing">মার্জিন কলাপসিং</a>, <a href="/bn-BD/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">স্ট্যাকিং</a>, <a href="/bn-BD/docs/CSS/block_formatting_context" title="block formatting context">ব্লক ফরম্যাটিং</a> এর ধারনা, বা <a href="/bn-BD/docs/CSS/initial_value" title="initial value">প্রাথমিক</a>, <a href="/bn-BD/docs/CSS/computed_value" title="computed value">কম্পিউটকৃত</a>, <a href="/bn-BD/docs/CSS/used_value" title="used value">ব্যবহারকৃত </a>ও <a href="/bn-BD/docs/CSS/actual_value" title="actual value">আসল</a> মানের সাথে পরিচিত করা হয়েছে। <a href="/bn-BD/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">সিএসএস শর্টহ্যান্ড প্রপার্টি সমূহও</a> এখানে বর্ণনা করা হয়েছে।</dd> + <dt><a href="/bn-BD/docs/Web/Guide/CSS" title="/bn-BD/docs/Web/Guide/CSS">সিএসএস ডেভেলপার গাইড</a></dt> + <dd>আপনার কন্টেন্টকে আরও আকর্ষণীয় করে দেখানোর জন্য যেসব সিএসএস কৌশল সমূহ আপনার অবশ্যই শেখা দরকার, এখানে সেগুলো বর্ণনা করা হয়েছে।</dd> + <dt><a href="/bn-BD/docs/Web/CSS/Common_CSS_Questions">সাধারন সিএসএস জিজ্ঞাসা</a></dt> + <dd>সিএসএস নিয়ে সাধারণত জিজ্ঞাসিত প্রশ্ন ও তার উত্তর এই নিবন্ধে দেয়া হয়েছে।</dd> +</dl> + +<h2 class="Tools" id="Tools" name="Tools">সিএসএস এর জন্য টুল সমূহ</h2> + +<ul> + <li><a class="external" href="http://jigsaw.w3.org/css-validator/">W3C এর সিএসএস ভ্যালিডেশন সেবা</a> পরীক্ষা করে দেখে যে যেই সিএসএস টি দেয়া হয়েছে, সেটি ঠিকঠাক আছে কি না বা সিএসএস এর মধ্যে কোন ভুল আছে কি না। এটি একটি অমূল্য ডিবাগিং টুল।</li> + <li>ফায়ারফক্সের <a class="link-https" href="https://addons.mozilla.org/bn-BD/firefox/addon/1843">ফায়ারবাগ এক্সটেনশন</a><span class="external">, ডেভেলপারদের কাছে একটি জনপ্রিয় এক্সটেনশন বা টুল। এটি ব্যবহার করে আপনি একটি পাতার এইচটিএমএল, সিএসএস ও জাভাস্ক্রিপ্ট ব্রাউজারের মধ্যেই অনেক সহজে সম্পাদনা করতে পারবেন।</span></li> + <li><span class="external">ফায়ারফক্সের </span><a class="link-https" href="https://addons.mozilla.org/bn-BD/firefox/addon/60">ওয়েব ডেভেলপার এক্সটেনশন</a>ও লাইভ সাইট সম্পাদনা করার সুবিধা দেয়। এটা সিম্পল কিন্তু ফায়ারবাগের চেয়ে একটু কম সুবিধা দেয়।</li> + <li>ফায়ারফক্সের <a class="external link-https" href="https://addons.mozilla.org/bn-BD/firefox/addon/179">এডিট সিএসএস এক্সটেনশন</a> সাইডবারে সিএসএস এডিট করার সুবিধা প্রদান করে।</li> +</ul> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="News" name="News">খবর</h2> + +<ul> + <li><a href="http://www.w3.org/TR/css-text-decor-3/" title="http://www.w3.org/TR/css-text-decor-3/">সিএসএস টেক্সট-ডেকোরেশন লেভেল ৩</a> <em>Candidate Recommandation</em> অবস্থায় পৌছেছে। এর অর্থ হচ্ছে <code>text-decoration-*</code> ও <code>text-emphasis-*</code> প্রপার্টি দুটো খুব দ্রুত ব্যবহারোপযোগী হবে। আমাদের অনেক পরিচিত {{cssxref("text-shadow")}}ও এখানে বর্ণনা করা হয়েছে। (১লা আগস্ট<em>, ২০১৩)</em></li> + <li>গেকো এখন {{cssxref("background-origin")}}<code>: local</code> সমর্থন করে। ফায়ারফক্স ২৫ এর পর থেকে (নাইটলিতে ইতোমধ্যে চলে এসেছে) এটা ব্যবহারযোগ্য হবে। <em>(২৫ জুলাই, ২০১৩)</em></li> + <li><a href="http://www.w3.org/TR/pointerevents/" title="http://www.w3.org/TR/pointerevents/">পয়েন্টার ইভেন্ট সমূহ</a> <em>Candidate Recommandation</em> অবস্থায় পৌছেছে। তার মানে<code> touch-action </code>ও খুব দ্রুত ব্যবহারোপযোগী হবে। বর্তমানে এটা শুধু ইন্টারনেট এক্সপ্লোরার ১০ এ যুক্ত করা হয়েছে। তবে এটা ব্যবহার করার জন্য <code>-ms-</code> প্রেফিক্স ব্যবহার করতে হবে। <em>(৬ মে, ২০১৩)</em></li> + <li>গেকোর <a href="/bn-BD/docs/CSS/Tutorials/Using_CSS_flexible_boxes" title="/bn-BD/docs/CSS/Tutorials/Using_CSS_flexible_boxes"><em>flexible boxes</em></a> সমর্থন সাম্প্রতিক একটি বৈশিষ্ট্যের সাথে সামঞ্জস্য স্পষ্ট করার জন্য অনুমোদিত হয়েছেঃ ফায়ারফক্স ২৩ থেকে {{cssxref("::before")}} ও {{cssxref("::after")}} ফ্লেক্সের উপকরণ হবে, এবং {{cssxref("order")}} ও {{cssxref("align-self")}} ব্যবহার করে পুনর্বিন্যাস করা যাবে। <em>(৩ মে, ২০১৩)</em></li> +</ul> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">সংশ্লিষ্ট বিষয়াবলী</h2> + +<ul> + <li>মজিলার <a href="/bn-BD/learn/css" title="https://developer.mozilla.org/bn-BD/learn/css">সিএসএস শেখার রিসোর্স সমূহ</a>।</li> + <li>মুক্ত ওয়েবের ভাষা, যেগুলোতে প্রায়ই সিএসএস প্রয়োগ করা হয়ঃ <a href="/bn-BD/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/bn-BD/docs/SVG" title="SVG">SVG</a>, <a href="/bn-BD/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/bn-BD/docs/XML" title="en-US/docs/XML">XML</a>।</li> + <li>মজিলার প্রযুক্তি সমূহ, যেগুলোতে অনেক বেশি সিএসএস বাবহৃত হয়ঃ <a href="/bn-BD/docs/XUL" title="en-US/docs/XUL">XUL</a>, ফায়ারফক্স ও থান্ডারবার্ড <a href="/bn-BD/docs/Extensions" title="en-US/docs/Extensions">এক্সটেনশন সমূহ</a> এবং <a href="/bn-BD/docs/Themes" title="en-US/docs/Themes">থিম সমূহ</a>।</li> +</ul> +</div> +</div> +</section> 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 +--- +<p>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.</p> + +<p>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 <a href="/en-US/docs/Mozilla/Add-ons">add-ons</a> can use them to interact with the browser.</p> + +<h2 id="Most_Common_Categories">Most Common Categories</h2> + +<table class="standard-table"> + <caption>Resource Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("cached")}}</td> + <td>The resources listed in the manifest have been downloaded, and the application is now cached.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>A resource failed to load.</td> + </tr> + <tr> + <td>{{event("abort")}}</td> + <td>The loading of a resource has been aborted.</td> + </tr> + <tr> + <td>{{event("load")}}</td> + <td>A resource and its dependent resources have finished loading.</td> + </tr> + <tr> + <td>{{event("beforeunload")}}</td> + <td>The window, the document and its resources are about to be unloaded.</td> + </tr> + <tr> + <td>{{event("unload")}}</td> + <td>The document or a dependent resource is being unloaded.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Network Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("online")}}</td> + <td>The browser has gained access to the network.</td> + </tr> + <tr> + <td>{{event("offline")}}</td> + <td>The browser has lost access to the network.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Focus Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("focus")}}</td> + <td>An element has received focus (does not bubble).</td> + </tr> + <tr> + <td>{{event("blur")}}</td> + <td>An element has lost focus (does not bubble).</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Websocket Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td> + <td>A WebSocket connection has been established.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td> + <td>A message is received through a WebSocket.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td> + <td>A WebSocket connection has been closed.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Session History Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("pagehide")}}</td> + <td>A session history entry is being traversed from.</td> + </tr> + <tr> + <td>{{event("pageshow")}}</td> + <td>A session history entry is being traversed to.</td> + </tr> + <tr> + <td>{{event("popstate")}}</td> + <td>A session history entry is being navigated to (in certain cases).</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>CSS Animation Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("animationstart")}}</td> + <td>A <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations">CSS animation</a> has started.</td> + </tr> + <tr> + <td>{{event("animationend")}}</td> + <td>A <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations">CSS animation</a> has completed.</td> + </tr> + <tr> + <td>{{event("animationiteration")}}</td> + <td>A <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations">CSS animation</a> is repeated.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>CSS Transition Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("transitionstart")}}</td> + <td>A <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has actually started (fired after any delay).</td> + </tr> + <tr> + <td>{{event("transitioncancel")}}</td> + <td>A <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has been cancelled.</td> + </tr> + <tr> + <td>{{event("transitionend")}}</td> + <td>A <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has completed.</td> + </tr> + <tr> + <td>{{event("transitionrun")}}</td> + <td>A <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has began running (fired before any delay starts).</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Form Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("reset")}}</td> + <td>The reset button is pressed</td> + </tr> + <tr> + <td>{{event("submit")}}</td> + <td>The submit button is pressed</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Printing Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("beforeprint")}}</td> + <td>The print dialog is opened</td> + </tr> + <tr> + <td>{{event("afterprint")}}</td> + <td>The print dialog is closed</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Text Composition Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("compositionstart")}}</td> + <td>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).</td> + </tr> + <tr> + <td>{{event("compositionupdate")}}</td> + <td>A character is added to a passage of text being composed.</td> + </tr> + <tr> + <td>{{event("compositionend")}}</td> + <td>The composition of a passage of text has been completed or canceled.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>View Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("fullscreenchange")}}</td> + <td>An element was turned to fullscreen mode or back to normal mode.</td> + </tr> + <tr> + <td>{{event("fullscreenerror")}}</td> + <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td> + </tr> + <tr> + <td>{{event("resize")}}</td> + <td>The document view has been resized.</td> + </tr> + <tr> + <td>{{event("scroll")}}</td> + <td>The document view or an element has been scrolled.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Clipboard Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("cut")}}</td> + <td>The selection has been cut and copied to the clipboard</td> + </tr> + <tr> + <td>{{event("copy")}}</td> + <td>The selection has been copied to the clipboard</td> + </tr> + <tr> + <td>{{event("paste")}}</td> + <td>The item from the clipboard has been pasted</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Keyboard Events</caption> + <tbody> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + <tr> + <td>{{event("keydown")}}</td> + <td>ANY key is pressed</td> + </tr> + <tr> + <td>{{event("keypress")}}</td> + <td>ANY key except Shift, Fn, CapsLock is in pressed position. (Fired continously.)</td> + </tr> + <tr> + <td>{{event("keyup")}}</td> + <td>ANY key is released</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Mouse Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("mouseenter")}}</td> + <td>A pointing device is moved onto the element that has the listener attached.</td> + </tr> + <tr> + <td>{{event("mouseover")}}</td> + <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td> + </tr> + <tr> + <td>{{event("mousemove")}}</td> + <td>A pointing device is moved over an element. (Fired continously as the mouse moves.)</td> + </tr> + <tr> + <td>{{event("mousedown")}}</td> + <td>A pointing device button is pressed on an element.</td> + </tr> + <tr> + <td>{{event("mouseup")}}</td> + <td>A pointing device button is released over an element.</td> + </tr> + <tr> + <td>{{event("auxclick")}}</td> + <td>A pointing device button (ANY non-primary button) has been pressed and released on an element.</td> + </tr> + <tr> + <td>{{event("click")}}</td> + <td>A pointing device button (ANY button; soon to be primary button only) has been pressed and released on an element.</td> + </tr> + <tr> + <td>{{event("dblclick")}}</td> + <td>A pointing device button is clicked twice on an element.</td> + </tr> + <tr> + <td>{{event("contextmenu")}}</td> + <td>The right button of the mouse is clicked (before the context menu is displayed).</td> + </tr> + <tr> + <td>{{event("wheel")}}</td> + <td>A wheel button of a pointing device is rotated in any direction.</td> + </tr> + <tr> + <td>{{event("mouseleave")}}</td> + <td>A pointing device is moved off the element that has the listener attached.</td> + </tr> + <tr> + <td>{{event("mouseout")}}</td> + <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td> + </tr> + <tr> + <td>{{event("select")}}</td> + <td>Some text is being selected.</td> + </tr> + <tr> + <td>{{event("pointerlockchange")}}</td> + <td>The pointer was locked or released.</td> + </tr> + <tr> + <td>{{event("pointerlockerror")}}</td> + <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td> + </tr> + </tbody> +</table> + +<table class="standard-table" style="height: 276px; width: 856px;"> + <caption>Drag & Drop Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("dragstart")}}</td> + <td>The user starts dragging an element or text selection.</td> + </tr> + <tr> + <td>{{event("drag")}}</td> + <td>An element or text selection is being dragged (Fired continuously every 350ms).</td> + </tr> + <tr> + <td>{{event("dragend")}}</td> + <td>A drag operation is being ended (by releasing a mouse button or hitting the escape key).</td> + </tr> + <tr> + <td>{{event("dragenter")}}</td> + <td>A dragged element or text selection enters a valid drop target.</td> + </tr> + <tr> + <td>{{event("dragover")}}</td> + <td>An element or text selection is being dragged over a valid drop target. (Fired continuously every 350ms.)</td> + </tr> + <tr> + <td>{{event("dragleave")}}</td> + <td>A dragged element or text selection leaves a valid drop target.</td> + </tr> + <tr> + <td>{{event("drop")}}</td> + <td>An element is dropped on a valid drop target.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Media Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("durationchange")}}</td> + <td>The <code>duration</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{event("loadedmetadata")}}</td> + <td>The metadata has been loaded.</td> + </tr> + <tr> + <td>{{event("loadeddata")}}</td> + <td>The first frame of the media has finished loading.</td> + </tr> + <tr> + <td>{{event("canplay")}}</td> + <td>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.</td> + </tr> + <tr> + <td>{{event("canplaythrough")}}</td> + <td>The browser estimates it can play the media up to its end without stopping for content buffering.</td> + </tr> + <tr> + <td>{{event("ended")}}</td> + <td>Playback has stopped because the end of the media was reached.</td> + </tr> + <tr> + <td>{{event("emptied")}}</td> + <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td> + </tr> + <tr> + <td>{{event("stalled")}}</td> + <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> + </tr> + <tr> + <td>{{event("suspend")}}</td> + <td>Media data loading has been suspended.</td> + </tr> + <tr> + <td>{{event("play")}}</td> + <td>Playback has begun.</td> + </tr> + <tr> + <td>{{event("playing")}}</td> + <td>Playback is ready to start after having been paused or delayed due to lack of data.</td> + </tr> + <tr> + <td>{{event("pause")}}</td> + <td>Playback has been paused.</td> + </tr> + <tr> + <td>{{event("waiting")}}</td> + <td>Playback has stopped because of a temporary lack of data.</td> + </tr> + <tr> + <td>{{event("seeking")}}</td> + <td>A <em>seek</em> operation began.</td> + </tr> + <tr> + <td>{{event("seeked")}}</td> + <td>A <em>seek</em> operation completed.</td> + </tr> + <tr> + <td>{{event("ratechange")}}</td> + <td>The playback rate has changed.</td> + </tr> + <tr> + <td>{{event("timeupdate")}}</td> + <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{event("volumechange")}}</td> + <td>The volume has changed.</td> + </tr> + <tr> + <td>{{event("complete")}}</td> + <td>The rendering of an {{domxref("OfflineAudioContext")}} is terminated.</td> + </tr> + <tr> + <td>{{event("audioprocess")}}</td> + <td>The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Progress Events</caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("loadstart")}}</td> + <td>Progress has begun.</td> + </tr> + <tr> + <td>{{event("progress")}}</td> + <td>In progress.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>Progression has failed.</td> + </tr> + <tr> + <td>{{event("timeout")}}</td> + <td>Progression is terminated due to preset time expiring.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td> + <td>Progression has been terminated (not due to an error).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td> + <td>Progression has been successful.</td> + </tr> + <tr> + <td>{{event("loadend")}}</td> + <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td> + </tr> + </tbody> +</table> + +<h3 id="Storage_events">Storage events</h3> + +<p>{{event("change")}} (see {{anch("Non-standard events")}})<br> + {{event("storage")}}</p> + +<h3 id="Update_events">Update events</h3> + +<p>{{event("checking")}}<br> + {{event("downloading")}}<br> + {{event("error")}}<br> + {{event("noupdate")}}<br> + {{event("obsolete")}}<br> + {{event("updateready")}}</p> + +<h3 id="Value_change_events">Value change events</h3> + +<p>{{event("broadcast")}}<br> + {{event("CheckboxStateChange")}}<br> + {{event("hashchange")}}<br> + {{event("input")}}<br> + {{event("RadioStateChange")}}<br> + {{event("readystatechange")}}<br> + {{event("ValueChange")}}</p> + +<h3 id="Uncategorized_events">Uncategorized events</h3> + +<p>{{event("invalid")}}<br> + {{event("localized")}}<br> + <code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code><br> + <code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code><br> + <code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code><br> + <code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code><br> + {{event("show")}}</p> + +<h2 id="Less_common_and_non-standard_events">Less common and non-standard events</h2> + +<h3 id="cancelable_Fetch_events">"cancelable" Fetch events</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Event name</th> + <th scope="col">Fired when</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("abort_(cancellable_fetch)", "abort")}}</td> + <td>A fetch request is aborted, i.e. using {{domxref("FetchController.abort()")}}.</td> + </tr> + <tr> + <td>{{event("requestprogress")}}</td> + <td>The HTTP request part of a fetch request makes progress.</td> + </tr> + <tr> + <td>{{event("responseprogress")}}</td> + <td>The response part of a fetch request makes progress, i.e. more of the response is downloaded.</td> + </tr> + <tr> + <td>{{event("statechange_(cancellable_fetch)", "statechange")}}</td> + <td>The {{domxref("FetchObserver.state", "state")}} of a fetch request changes.</td> + </tr> + </tbody> +</table> + +<h3 id="WebVR_events">WebVR events</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Event name</th> + <th scope="col">Fired when</th> + </tr> + <tr> + <td>{{event("vrdisplayconnect")}}</td> + <td>when a compatible {{domxref("VRDisplay")}} is connected to the computer.</td> + </tr> + <tr> + <td>{{event("vrdisplaydisconnect")}}</td> + <td>When a compatible {{domxref("VRDisplay")}} is disconnected from the computer.</td> + </tr> + <tr> + <td>{{event("vrdisplayactivate")}}</td> + <td>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.</td> + </tr> + <tr> + <td>{{event("vrdisplaydeactivate")}}</td> + <td>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.</td> + </tr> + <tr> + <td>{{event("vrdisplayblur")}}</td> + <td>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.</td> + </tr> + <tr> + <td>{{event("vrdisplayfocus")}}</td> + <td>When presentation to a {{domxref("VRDisplay")}} has resumed after being blurred.</td> + </tr> + <tr> + <td>{{event("vrdisplaypresentchange")}}</td> + <td>The presenting state of a {{domxref("VRDisplay")}} changes — i.e. goes from presenting to not presenting, or vice versa.</td> + </tr> + </thead> +</table> + +<h3 id="SVG_events">SVG events</h3> + +<p>{{event("SVGAbort")}}<br> + {{event("SVGError")}}<br> + {{event("SVGLoad")}}<br> + {{event("SVGResize")}}<br> + {{event("SVGScroll")}}<br> + {{event("SVGUnload")}}<br> + {{event("SVGZoom")}}</p> + +<h3 id="Database_events">Database events</h3> + +<p><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code><br> + <code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code><br> + <code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code><br> + {{event("error")}} (<a href="/en-US/docs/Web/Reference/Events/error">link</a>)<br> + <code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code><br> + <code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code><br> + <code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p> + +<h3 id="Notification_events">Notification events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a><br> + <a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></p> + +<h3 id="CSS_events">CSS events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a><br> + <a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a><br> + <a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a><br> + {{event("transitionend")}}</p> + +<h3 id="Script_events">Script events</h3> + +<p>{{event("afterscriptexecute")}}<br> + {{event("beforescriptexecute")}}</p> + +<h3 id="Menu_events">Menu events</h3> + +<p>{{event("DOMMenuItemActive")}}<br> + {{event("DOMMenuItemInactive")}}</p> + +<h3 id="Window_events">Window events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a><br> + <a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a><br> + <a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a><br> + <a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a><br> + <a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a><br> + <a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a><br> + <a href="/en-US/docs/Web/Reference/Events/close_event">close</a></p> + +<h3 id="Document_events">Document events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a><br> + <a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a><br> + <a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a><br> + <a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a><br> + <a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a><br> + <a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></p> + +<h3 id="Popup_events">Popup events</h3> + +<p>{{event("popuphidden")}}<br> + {{event("popuphiding")}}<br> + {{event("popupshowing")}}<br> + {{event("popupshown")}}<br> + <a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></p> + +<h3 id="Tab_events">Tab events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a><br> + <a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a><br> + <a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a><br> + <a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a><br> + <a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a><br> + <a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a><br> + <a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a><br> + <a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a><br> + <a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a><br> + <a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a><br> + {{event("visibilitychange")}}</p> + +<h3 id="Battery_events">Battery events</h3> + +<p>{{event("chargingchange")}}<br> + {{event("chargingtimechange")}}<br> + {{event("dischargingtimechange")}}<br> + {{event("levelchange")}}</p> + +<h3 id="Call_events">Call events</h3> + +<p>{{event("alerting")}}<br> + {{event("busy")}}<br> + {{event("callschanged")}}<br> + {{event("cfstatechange")}}<br> + {{event("connected")}}<br> + {{event("connecting")}}<br> + {{event("dialing")}}<br> + {{event("disconnected")}}<br> + {{event("disconnecting")}}<br> + {{event("error_(Telephony)","error")}}<br> + {{event("held")}}, {{event("holding")}}<br> + {{event("incoming")}}<br> + {{event("resuming")}}<br> + {{event("statechange")}}<br> + {{event("voicechange")}}</p> + +<h3 id="Sensor_events">Sensor events</h3> + +<p>{{event("compassneedscalibration")}}<br> + {{event("devicelight")}}<br> + {{event("devicemotion")}}<br> + {{event("deviceorientation")}}<br> + {{event("deviceproximity")}}<br> + {{event("MozOrientation")}}<br> + {{event("orientationchange")}}<br> + {{event("userproximity")}}</p> + +<h3 id="Smartcard_events">Smartcard events</h3> + +<p>{{event("icccardlockerror")}}<br> + {{event("iccinfochange")}}<br> + {{event("smartcard-insert")}}<br> + {{event("smartcard-remove")}}<br> + {{event("stkcommand")}}<br> + {{event("stksessionend")}}<br> + {{event("cardstatechange")}}</p> + +<h3 id="SMS_and_USSD_events">SMS and USSD events</h3> + +<p>{{event("delivered")}}<br> + {{event("received")}}<br> + {{event("sent")}}<br> + {{event("ussdreceived")}}</p> + +<h3 id="Frame_events">Frame events</h3> + +<p>{{event("mozbrowserclose")}}<br> + {{event("mozbrowsercontextmenu")}}<br> + {{event("mozbrowsererror")}}<br> + {{event("mozbrowsericonchange")}}<br> + {{event("mozbrowserlocationchange")}}<br> + {{event("mozbrowserloadend")}}<br> + {{event("mozbrowserloadstart")}}<br> + {{event("mozbrowseropenwindow")}}<br> + {{event("mozbrowsersecuritychange")}}<br> + {{event("mozbrowsershowmodalprompt")}} (<a href="/en-US/docs/Web/Reference/Events/mozbrowsershowmodalprompt">link</a>)<br> + {{event("mozbrowsertitlechange")}}<br> + <a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></p> + +<h3 id="DOM_mutation_events">DOM mutation events</h3> + +<p><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code><br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code><br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code><br> + {{event("DOMContentLoaded")}}<br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code><br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code><br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code><br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code><br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code><br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p> + +<h3 id="Touch_events">Touch events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a><br> + <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a><br> + <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a><br> + <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a><br> + <a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a><br> + <a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a><br> + <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a><br> + <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a><br> + <a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a><br> + <a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a><br> + <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a><br> + <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a><br> + <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a><br> + {{event("touchcancel")}}<br> + {{event("touchend")}}<br> + {{event("touchenter")}}<br> + {{event("touchleave")}}<br> + {{event("touchmove")}}<br> + {{event("touchstart")}}</p> + +<h3 id="Pointer_events">Pointer events</h3> + +<p>{{event("pointerover")}}<br> + {{event("pointerenter")}}<br> + {{event("pointerdown")}}<br> + {{event("pointermove")}}<br> + {{event("pointerup")}}<br> + {{event("pointercancel")}}<br> + {{event("pointerout")}}<br> + {{event("pointerleave")}}<br> + {{event("gotpointercapture")}}<br> + {{event("lostpointercapture")}}</p> + +<h2 id="Standard_events">Standard events</h2> + +<p>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.</p> + +<table class="standard-table" style="height: 9388px; width: 1781px;"> + <thead> + <tr> + <th class="header" style="width: 220px;">Event Name</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("abort")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></td> + <td>The loading of a resource has been aborted.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a> and <a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td> + <td>Progression has been terminated (not due to an error).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td> + <td>A transaction has been aborted.</td> + </tr> + <tr> + <td>{{event("afterprint")}}{{gecko_minversion_inline("6")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td> + <td>The associated document has started printing or the print preview has been closed.</td> + </tr> + <tr> + <td>{{event("animationend")}}</td> + <td>{{domxref("AnimationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> + <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has completed.</td> + </tr> + <tr> + <td>{{event("animationiteration")}}</td> + <td>{{domxref("AnimationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> + <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> is repeated.</td> + </tr> + <tr> + <td>{{event("animationstart")}}</td> + <td>{{domxref("AnimationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> + <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has started.</td> + </tr> + <tr> + <td>{{event("appinstalled")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="/en-US/docs/Web/Manifest">Web App Manifest</a></td> + <td>A web application is successfully installed as a <a href="https://developer.mozilla.org/en-US/Apps/Progressive">progressive web app</a>.</td> + </tr> + <tr> + <td>{{event("audioprocess")}}</td> + <td>{{domxref("AudioProcessingEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td> + <td>The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.</td> + </tr> + <tr> + <td>{{event("audioend")}} {{experimental_inline}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The user agent has finished capturing audio for speech recognition.</td> + </tr> + <tr> + <td>{{event("audiostart")}} {{experimental_inline}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The user agent has started to capture audio for speech recognition.</td> + </tr> + <tr> + <td>{{event("beforeprint")}} {{gecko_minversion_inline("6")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td> + <td>The associated document is about to be printed or previewed for printing.</td> + </tr> + <tr> + <td>{{event("beforeunload")}}</td> + <td>{{domxref("BeforeUnloadEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5 </a></td> + <td>The window, the document and its resources are about to be unloaded.</td> + </tr> + <tr> + <td>{{event("beginEvent")}}</td> + <td>{{domxref("TimeEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element begins.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td> + <td> </td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>An open connection to a database is blocking a <code>versionchange</code> transaction on the same database.</td> + </tr> + <tr> + <td>{{event("blur")}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></td> + <td>An element has lost focus (does not bubble).</td> + </tr> + <tr> + <td>{{event("boundary")}} {{experimental_inline}}</td> + <td>{{domxref("SpeechSynthesisEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The spoken utterance reaches a word or sentence boundary</td> + </tr> + <tr> + <td>{{event("cached")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The resources listed in the manifest have been downloaded, and the application is now cached.</td> + </tr> + <tr> + <td>{{event("canplay")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></td> + <td>The 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.</td> + </tr> + <tr> + <td>{{event("canplaythrough")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></td> + <td>The user agent can play the media up to its end without having to stop for further buffering of content.</td> + </tr> + <tr> + <td>{{event("change")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td> + <td>The <code>change</code> 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.</td> + </tr> + <tr> + <td>{{event("chargingchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td>The battery begins or stops charging.</td> + </tr> + <tr> + <td>{{event("chargingtimechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td>The <code>chargingTime</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{event("checking")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The user agent is checking for an update, or attempting to download the cache manifest for the first time.</td> + </tr> + <tr> + <td>{{event("click")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></td> + <td>A pointing device button has been pressed and released on an element.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A WebSocket connection has been closed.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td> + <td> </td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td> + <td>A transaction successfully completed.</td> + </tr> + <tr> + <td>{{event("complete")}}</td> + <td>{{domxref("OfflineAudioCompletionEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td> + <td>The rendering of an {{domxref("OfflineAudioContext")}} is terminated.</td> + </tr> + <tr> + <td>{{event("compositionend")}}{{gecko_minversion_inline("9")}}</td> + <td>{{domxref("CompositionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend">DOM L3</a></td> + <td>The composition of a passage of text has been completed or canceled.</td> + </tr> + <tr> + <td>{{event("compositionstart")}}{{gecko_minversion_inline("9")}}</td> + <td>{{domxref("CompositionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart">DOM L3</a></td> + <td>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).</td> + </tr> + <tr> + <td>{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}</td> + <td>{{domxref("CompositionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate">DOM L3</a></td> + <td>A character is added to a passage of text being composed.</td> + </tr> + <tr> + <td>{{event("contextmenu")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="https://html.spec.whatwg.org/multipage/forms.html#context-menus">HTML5</a></td> + <td>The right button of the mouse is clicked (before the context menu is displayed).</td> + </tr> + <tr> + <td>{{event("copy")}}</td> + <td>{{domxref("ClipboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td> + <td>The text selection has been added to the clipboard.</td> + </tr> + <tr> + <td>{{event("cut")}}</td> + <td>{{domxref("ClipboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td> + <td>The text selection has been removed from the document and added to the clipboard.</td> + </tr> + <tr> + <td>{{event("dblclick")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick">DOM L3</a></td> + <td>A pointing device button is clicked twice on an element.</td> + </tr> + <tr> + <td>{{event("devicechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName("Media Capture")}}</td> + <td>A media device such as a camera, microphone, or speaker is connected or removed from the system.</td> + </tr> + <tr> + <td>{{event("devicelight")}}</td> + <td>{{domxref("DeviceLightEvent")}}</td> + <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/light/Overview.html" lang="en" title="The definition of 'Ambient Light Events' in that specification.">Ambient Light Events</a></td> + <td>Fresh data is available from a light sensor.</td> + </tr> + <tr> + <td>{{event("devicemotion")}}</td> + <td>{{domxref("DeviceMotionEvent")}}</td> + <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td> + <td>Fresh data is available from a motion sensor.</td> + </tr> + <tr> + <td>{{event("deviceorientation")}}</td> + <td>{{domxref("DeviceOrientationEvent")}}</td> + <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td> + <td>Fresh data is available from an orientation sensor.</td> + </tr> + <tr> + <td>{{event("deviceproximity")}}</td> + <td>{{domxref("DeviceProximityEvent")}}</td> + <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html" lang="en" title="The definition of 'Proximity Events' in that specification.">Proximity Events</a></td> + <td>Fresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).</td> + </tr> + <tr> + <td>{{event("dischargingtimechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td>The <code>dischargingTime</code> attribute has been updated.</td> + </tr> + <tr> + <td><code>DOMActivate</code> {{deprecated_inline}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate">DOM L3</a></td> + <td>A button, link or state changing element is activated (use {{event("click")}} instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationNameEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged">DOM L3</a> Removed</td> + <td>The name of an attribute changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified">DOM L3</a></td> + <td>The value of an attribute has been modified (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified">DOM L3</a></td> + <td>A text or another <a href="/en-US/docs/DOM/CharacterData">CharacterData</a> has changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td>{{event("DOMContentLoaded")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td> + <td>The document has finished loading (but not its dependent resources).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationNameEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged">DOM L3</a> Removed</td> + <td>The name of an element changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code>DOMFocusIn</code> {{deprecated_inline}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn">DOM L3</a></td> + <td>An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).</td> + </tr> + <tr> + <td><code>DOMFocusOut</code> {{deprecated_inline}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut">DOM L3</a></td> + <td>An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted">DOM L3</a></td> + <td>A node has been added as a child of another node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument">DOM L3</a></td> + <td>A node has been inserted into the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved">DOM L3</a></td> + <td>A node has been removed from its parent node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument">DOM L3</a></td> + <td>A node has been removed from the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified">DOM L3</a></td> + <td>A change happened in the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td>{{event("downloading")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.</td> + </tr> + <tr> + <td>{{event("drag")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td> + <td>An element or text selection is being dragged (every 350ms).</td> + </tr> + <tr> + <td>{{event("dragend")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td> + <td>A drag operation is being ended (by releasing a mouse button or hitting the escape key).</td> + </tr> + <tr> + <td>{{event("dragenter")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td> + <td>A dragged element or text selection enters a valid drop target.</td> + </tr> + <tr> + <td>{{event("dragleave")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td> + <td>A dragged element or text selection leaves a valid drop target.</td> + </tr> + <tr> + <td>{{event("dragover")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td> + <td>An element or text selection is being dragged over a valid drop target (every 350ms).</td> + </tr> + <tr> + <td>{{event("dragstart")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td> + <td>The user starts dragging an element or text selection.</td> + </tr> + <tr> + <td>{{event("drop")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td> + <td>An element is dropped on a valid drop target.</td> + </tr> + <tr> + <td>{{event("durationchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td> + <td>The <code>duration</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{event("emptied")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td> + <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td> + </tr> + <tr> + <td>{{event("end_(SpeechRecognition)","end")}} {{experimental_inline}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The speech recognition service has disconnected.</td> + </tr> + <tr> + <td>{{event("end_(SpeechSynthesis)","end")}} {{experimental_inline}}</td> + <td>{{domxref("SpeechSynthesisEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName("Web Speech API")}}</td> + <td>The utterance has finished being spoken.</td> + </tr> + <tr> + <td>{{event("ended")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td> + <td>Playback has stopped because the end of the media was reached.</td> + </tr> + <tr> + <td>{{event("ended_(Web_Audio)", "ended")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName("Web Audio API")}}</td> + <td>Playback has stopped because the end of the media was reached.</td> + </tr> + <tr> + <td>{{event("endEvent")}}</td> + <td>{{domxref("TimeEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element ends.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></td> + <td>A resource failed to load.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td> + <td>Progression has failed.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>An error occurred while downloading the cache manifest or updating the content of the application.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td>An event source connection has been failed.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>A request caused an error and failed.</td> + </tr> + <tr> + <td>{{event("error_(SpeechRecognitionError)","error")}} {{experimental_inline}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>A speech recognition error occurs.</td> + </tr> + <tr> + <td>{{event("error_(SpeechSynthesisError)","error")}}</td> + <td>{{domxref("SpeechSynthesisErrorEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>An error occurs that prevents the utterance from being successfully spoken.</td> + </tr> + <tr> + <td>{{event("focus")}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></td> + <td>An element has received focus (does not bubble).</td> + </tr> + <tr> + <td>{{event("focusin")}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></td> + <td>An element is about to receive focus (bubbles).</td> + </tr> + <tr> + <td>{{event("focusout")}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></td> + <td>An element is about to lose focus (bubbles).</td> + </tr> + <tr> + <td>{{event("fullscreenchange")}}{{gecko_minversion_inline("9")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td> + <td>An element was turned to fullscreen mode or back to normal mode.</td> + </tr> + <tr> + <td>{{event("fullscreenerror")}}{{gecko_minversion_inline("9")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td> + <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td> + </tr> + <tr> + <td>{{event("gamepadconnected")}}</td> + <td>{{domxref("GamepadEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td> + <td>A gamepad has been connected.</td> + </tr> + <tr> + <td>{{event("gamepaddisconnected")}}</td> + <td>{{domxref("GamepadEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td> + <td>A gamepad has been disconnected.</td> + </tr> + <tr> + <td>{{event("gotpointercapture")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-gotpointercapture-event">Pointer Events</a></td> + <td>Element receives pointer capture.</td> + </tr> + <tr> + <td>{{event("hashchange")}}</td> + <td>{{domxref("HashChangeEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td> + <td>The fragment identifier of the URL has changed (the part of the URL after the #).</td> + </tr> + <tr> + <td>{{event("lostpointercapture")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-lostpointercapture-event">Pointer Events</a></td> + <td>Element lost pointer capture.</td> + </tr> + <tr> + <td>{{event("input")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td> + <td>The value of an element changes or the content of an element with the attribute <a href="/en-US/docs/DOM/Element.contentEditable">contenteditable</a> is modified.</td> + </tr> + <tr> + <td>{{event("invalid")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td> + <td>A submittable element has been checked and doesn't satisfy its constraints.</td> + </tr> + <tr> + <td>{{event("keydown")}}</td> + <td>{{domxref("KeyboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></td> + <td>A key is pressed down.</td> + </tr> + <tr> + <td>{{event("keypress")}}</td> + <td>{{domxref("KeyboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a></td> + <td>A key is pressed down and that key normally produces a character value (use input instead).</td> + </tr> + <tr> + <td>{{event("keyup")}}</td> + <td>{{domxref("KeyboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></td> + <td>A key is released.</td> + </tr> + <tr> + <td>{{event("languagechange")}} {{experimental_inline}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td> + <td>The user's preferred languages have changed.</td> + </tr> + <tr> + <td>{{event("levelchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td>The <code>level</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{event("load")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></td> + <td>A resource and its dependent resources have finished loading.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td> + <td>Progression has been successful.</td> + </tr> + <tr> + <td>{{event("loadeddata")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td> + <td>The first frame of the media has finished loading.</td> + </tr> + <tr> + <td>{{event("loadedmetadata")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td> + <td>The metadata has been loaded.</td> + </tr> + <tr> + <td>{{event("loadend")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td> + <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td> + </tr> + <tr> + <td>{{event("loadstart")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td> + <td>Progress has begun.</td> + </tr> + <tr> + <td>{{event("mark")}} {{experimental_inline}}</td> + <td>{{domxref("SpeechSynthesisEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The spoken utterance reaches a named SSML "mark" tag.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td> + <td>{{domxref("MessageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A message is received through a WebSocket.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code></td> + <td>{{domxref("MessageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td> + <td>A message is received from a Web Worker.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code></td> + <td>{{domxref("MessageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td> + <td>A message is received from a child (i)frame or a parent window.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code></td> + <td>{{domxref("MessageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td>A message is received through an event source.</td> + </tr> + <tr> + <td>{{event("messageerror")}}</td> + <td>{{domxref("MessageEvent")}}</td> + <td style="white-space: nowrap;">{{domxref("MessagePort")}}, <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, <a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel</a>, {{domxref("Window")}}</td> + <td>A message error is raised when a message is received by an object.</td> + </tr> + <tr> + <td>{{event("message_(ServiceWorker)","message")}} {{experimental_inline}}</td> + <td>{{domxref("ServiceWorkerMessageEvent")}} or {{domxref("ExtendableMessageEvent")}}, depending on context.</td> + <td style="white-space: nowrap;"><a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></td> + <td>A message is received from a service worker, or a message is received in a service worker from another context.</td> + </tr> + <tr> + <td>{{event("mousedown")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></td> + <td>A pointing device button (usually a mouse) is pressed on an element.</td> + </tr> + <tr> + <td>{{event("mouseenter")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3</a></td> + <td>A pointing device is moved onto the element that has the listener attached.</td> + </tr> + <tr> + <td>{{event("mouseleave")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></td> + <td>A pointing device is moved off the element that has the listener attached.</td> + </tr> + <tr> + <td>{{event("mousemove")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove">DOM L3</a></td> + <td>A pointing device is moved over an element.</td> + </tr> + <tr> + <td>{{event("mouseout")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout">DOM L3</a></td> + <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td> + </tr> + <tr> + <td>{{event("mouseover")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover">DOM L3</a></td> + <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td> + </tr> + <tr> + <td>{{event("mouseup")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup">DOM L3</a></td> + <td>A pointing device button is released over an element.</td> + </tr> + <tr> + <td>{{event("nomatch")}} {{experimental_inline}}</td> + <td>{{domxref("SpeechRecognitionEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The speech recognition service returns a final result with no significant recognition.</td> + </tr> + <tr> + <td>{{event("notificationclick")}}</td> + <td>{{domxref("NotificationEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td> + <td>A system notification<span style="line-height: 19.0909080505371px;"> spawned by {{domxref("ServiceWorkerRegistration.showNotification()")}} has been clicked.</span></td> + </tr> + <tr> + <td>{{event("noupdate")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The manifest hadn't changed.</td> + </tr> + <tr> + <td>{{event("obsolete")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.</td> + </tr> + <tr> + <td>{{event("offline")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td> + <td>The browser has lost access to the network.</td> + </tr> + <tr> + <td>{{event("online")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td> + <td>The browser has gained access to the network (but particular websites might be unreachable).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A WebSocket connection has been established.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td>An event source connection has been established.</td> + </tr> + <tr> + <td>{{event("orientationchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td> + <td>The orientation of the device (portrait/landscape) has changed</td> + </tr> + <tr> + <td>{{event("pagehide")}}</td> + <td>{{domxref("PageTransitionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td> + <td>A session history entry is being traversed from.</td> + </tr> + <tr> + <td>{{event("pageshow")}}</td> + <td>{{domxref("PageTransitionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td> + <td>A session history entry is being traversed to.</td> + </tr> + <tr> + <td>{{event("paste")}}</td> + <td>{{domxref("ClipboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td> + <td>Data has been transferred from the system clipboard to the document.</td> + </tr> + <tr> + <td>{{event("pause")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td> + <td>Playback has been paused.</td> + </tr> + <tr> + <td>{{event("pause_(SpeechSynthesis)", "pause")}} {{experimental_inline}}</td> + <td>{{domxref("SpeechSynthesisEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The utterance is paused part way through.</td> + </tr> + <tr> + <td>{{event("pointercancel")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointercancel-event">Pointer Events</a></td> + <td>The pointer is unlikely to produce any more events.</td> + </tr> + <tr> + <td>{{event("pointerdown")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerdown-event">Pointer Events</a></td> + <td>The pointer enters the active buttons state.</td> + </tr> + <tr> + <td>{{event("pointerenter")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerenter-event">Pointer Events</a></td> + <td>Pointing device is moved inside the hit-testing boundary.</td> + </tr> + <tr> + <td>{{event("pointerleave")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerleave-event">Pointer Events</a></td> + <td>Pointing device is moved out of the hit-testing boundary.</td> + </tr> + <tr> + <td>{{event("pointerlockchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td> + <td>The pointer was locked or released.</td> + </tr> + <tr> + <td>{{event("pointerlockerror")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td> + <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td> + </tr> + <tr> + <td>{{event("pointermove")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointermove-event">Pointer Events</a></td> + <td>The pointer changed coordinates.</td> + </tr> + <tr> + <td>{{event("pointerout")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerout-event">Pointer Events</a></td> + <td>The pointing device moved out of hit-testing boundary or leaves detectable hover range.</td> + </tr> + <tr> + <td>{{event("pointerover")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerover-event">Pointer Events</a></td> + <td>The pointing device is moved into the hit-testing boundary.</td> + </tr> + <tr> + <td>{{event("pointerup")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerup-event">Pointer Events</a></td> + <td>The pointer leaves the active buttons state.</td> + </tr> + <tr> + <td>{{event("play")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td> + <td>Playback has begun.</td> + </tr> + <tr> + <td>{{event("playing")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> + <td>Playback is ready to start after having been paused or delayed due to lack of data.</td> + </tr> + <tr> + <td>{{event("popstate")}}</td> + <td>{{domxref("PopStateEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td> + <td>A session history entry is being navigated to (in certain cases).</td> + </tr> + <tr> + <td>{{event("progress")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td> + <td>In progress.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code></td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The user agent is downloading resources listed by the manifest.</td> + </tr> + <tr> + <td>{{event("push")}}</td> + <td>{{domxref("PushEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName("Push API")}}</td> + <td>A <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a> has received a push message.</td> + </tr> + <tr> + <td>{{event("pushsubscriptionchange")}}</td> + <td>{{domxref("PushEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName("Push API")}}</td> + <td>A <a href="/en-US/docs/Web/API/PushSubscription">PushSubscription</a> has expired.</td> + </tr> + <tr> + <td>{{event("ratechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td> + <td>The playback rate has changed.</td> + </tr> + <tr> + <td>{{event("readystatechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><span>HTML5 <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td> + <td>The readyState attribute of a document has changed.</td> + </tr> + <tr> + <td>{{event("repeatEvent")}}</td> + <td>{{domxref("TimeEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element is repeated.</td> + </tr> + <tr> + <td>{{event("reset")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td> + <td>A form is reset.</td> + </tr> + <tr> + <td>{{event("resize")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a></td> + <td>The document view has been resized.</td> + </tr> + <tr> + <td>{{event("resourcetimingbufferfull")}}</td> + <td>{{domxref("Performance")}}</td> + <td style="white-space: nowrap;"><a href="https://w3c.github.io/resource-timing/#dom-performance-onresourcetimingbufferfull">Resource Timing</a></td> + <td>The browser's resource timing buffer is full.</td> + </tr> + <tr> + <td>{{event("result")}} {{experimental_inline}}</td> + <td>{{domxref("SpeechRecognitionEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.</td> + </tr> + <tr> + <td>{{event("resume")}} {{experimental_inline}}</td> + <td>{{domxref("SpeechSynthesisEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>A paused utterance is resumed.</td> + </tr> + <tr> + <td>{{event("scroll")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a></td> + <td>The document view or an element has been scrolled.</td> + </tr> + <tr> + <td>{{event("seeked")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td> + <td>A <em>seek</em> operation completed.</td> + </tr> + <tr> + <td>{{event("seeking")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td> + <td>A <em>seek</em> operation began.</td> + </tr> + <tr> + <td>{{event("select")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></td> + <td>Some text is being selected.</td> + </tr> + <tr> + <td>{{event("selectstart")}} {{experimental_inline}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{ SpecName('Selection API')}}</td> + <td>A selection just started.</td> + </tr> + <tr> + <td>{{event("selectionchange")}} {{experimental_inline}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{ SpecName('Selection API')}}</td> + <td>The selection in the document has been changed.</td> + </tr> + <tr> + <td>{{event("show")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td> + <td>A contextmenu event was fired on/bubbled to an element that has a <a href="/en-US/docs/DOM/element.contextmenu">contextmenu</a> attribute</td> + </tr> + <tr> + <td>{{event("soundend")}} {{experimental_inline}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>Any sound — recognisable speech or not — has stopped being detected.</td> + </tr> + <tr> + <td>{{event("soundstart")}} {{experimental_inline}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>Any sound — recognisable speech or not — has been detected.</td> + </tr> + <tr> + <td>{{event("speechend")}} {{experimental_inline}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>Speech recognised by the speech recognition service has stopped being detected.</td> + </tr> + <tr> + <td>{{event("speechstart")}} {{experimental_inline}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>Sound that is recognised by the speech recognition service as speech has been detected.</td> + </tr> + <tr> + <td>{{event("stalled")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td> + <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> + </tr> + <tr> + <td>{{event("start_(SpeechRecognition)","start")}} {{experimental_inline}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</td> + </tr> + <tr> + <td>{{event("start_(SpeechSynthesis)","start")}}</td> + <td>{{domxref("SpeechSynthesisEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The utterance has begun to be spoken.</td> + </tr> + <tr> + <td>{{event("storage")}}</td> + <td>{{domxref("StorageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td> + <td>A storage area (<a href="/en-US/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/en-US/docs/DOM/Storage#sessionStorage">sessionStorage</a>) has changed.</td> + </tr> + <tr> + <td>{{event("submit")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td> + <td>A form is submitted.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>A request successfully completed.</td> + </tr> + <tr> + <td>{{event("suspend")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td> + <td>Media data loading has been suspended.</td> + </tr> + <tr> + <td>{{event("SVGAbort")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>Page loading has been stopped before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td> + </tr> + <tr> + <td>{{event("SVGError")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An error has occurred before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td> + </tr> + <tr> + <td>{{event("SVGLoad")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document has been loaded and parsed.</td> + </tr> + <tr> + <td>{{event("SVGResize")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document is being resized.</td> + </tr> + <tr> + <td>{{event("SVGScroll")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document is being scrolled.</td> + </tr> + <tr> + <td>{{event("SVGUnload")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document has been removed from a window or frame.</td> + </tr> + <tr> + <td>{{event("SVGZoom")}}</td> + <td>{{domxref("SVGZoomEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document is being zoomed.</td> + </tr> + <tr> + <td>{{event("timeout")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td> + <td> </td> + </tr> + <tr> + <td>{{event("timeupdate")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td> + <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{event("touchcancel")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td> + <td>A touch point has been disrupted in an implementation-specific manners (too many touch points for example).</td> + </tr> + <tr> + <td>{{event("touchend")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td> + <td>A touch point is removed from the touch surface.</td> + </tr> + <tr> + <td>{{event("touchmove")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td> + <td>A touch point is moved along the touch surface.</td> + </tr> + <tr> + <td>{{event("touchstart")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td> + <td>A touch point is placed on the touch surface.</td> + </tr> + <tr> + <td>{{event("transitionend")}}</td> + <td>{{domxref("TransitionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td> + <td>A <a href="/en-US/docs/CSS/CSS_transitions">CSS transition</a> has completed.</td> + </tr> + <tr> + <td>{{event("unload")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">DOM L3</a></td> + <td>The document or a dependent resource is being unloaded.</td> + </tr> + <tr> + <td>{{event("updateready")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td> + <td>The resources listed in the manifest have been newly redownloaded, and the script can use <code>swapCache()</code> to switch to the new cache.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td> + <td> </td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>An attempt was made to open a database with a version number higher than its current version. A <code>versionchange</code> transaction has been created.</td> + </tr> + <tr> + <td>{{event("userproximity")}}</td> + <td>{{domxref("UserProximityEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName("Proximity Events")}}</td> + <td>Fresh data is available from a proximity sensor (indicates whether the nearby object is <code>near</code> the device or not).</td> + </tr> + <tr> + <td>{{event("voiceschanged")}} {{experimental_inline}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the {{event("voiceschanged")}} event fires.)</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td> + <td> </td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td> + <td>A <code>versionchange</code> transaction completed.</td> + </tr> + <tr> + <td>{{event("visibilitychange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td> + <td>The content of a tab has become visible or has been hidden.</td> + </tr> + <tr> + <td>{{event("volumechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td> + <td>The volume has changed.</td> + </tr> + <tr> + <td>{{event("waiting")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td> + <td>Playback has stopped because of a temporary lack of data.</td> + </tr> + <tr> + <td>{{event("wheel")}}{{gecko_minversion_inline("17")}}</td> + <td>{{domxref("WheelEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel">DOM L3</a></td> + <td>A wheel button of a pointing device is rotated in any direction.</td> + </tr> + </tbody> +</table> + +<h2 id="Non-standard_events">Non-standard events</h2> + +<table class="standard-table" style="width: 100%;"> + <thead> + <tr> + <th class="header" style="width: 220px;">Event Name</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("afterscriptexecute")}}</td> + <td>{{domxref("Event")}}</td> + <td><em>Mozilla Specific</em></td> + <td>A script has been executed.</td> + </tr> + <tr> + <td>{{event("beforescriptexecute")}}</td> + <td>{{domxref("Event")}}</td> + <td><em>Mozilla Specific</em></td> + <td>A script is about to be executed.</td> + </tr> + <tr> + <td>{{event("beforeinstallprompt")}}</td> + <td>{{domxref("Event")}}</td> + <td><em>Chrome specific</em></td> + <td>A user is prompted to save a web site to a home screen on mobile.</td> + </tr> + <tr> + <td>{{event("cardstatechange")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.cardState")}} property changes value.</td> + </tr> + <tr> + <td>{{event("change")}}</td> + <td>{{domxref("DeviceStorageChangeEvent")}}</td> + <td><em>Firefox OS specific</em></td> + <td>This event is triggered each time a file is created, modified or deleted on a given storage area.</td> + </tr> + <tr> + <td>{{event("connectionInfoUpdate")}}</td> + <td> </td> + <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#176"><em>Firefox OS specific</em></a></td> + <td>The informations about the signal strength and the link speed have been updated.</td> + </tr> + <tr> + <td>{{event("cfstatechange")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The call forwarding state changes.</td> + </tr> + <tr> + <td>{{event("datachange")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.data")}} object changes values.</td> + </tr> + <tr> + <td>{{event("dataerror")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.data")}} object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</td> + </tr> + <tr> + <td>{{event("DOMMouseScroll")}}{{deprecated_inline}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>The wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)</td> + </tr> + <tr> + <td><code>dragdrop</code> {{deprecated_inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td>An element is dropped (use {{event("drop")}} instead).</td> + </tr> + <tr> + <td><code>dragexit</code> {{deprecated_inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td>A drag operation is being ended(use {{event("dragend")}} instead).</td> + </tr> + <tr> + <td><code>draggesture</code> {{deprecated_inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td>The user starts dragging an element or text selection (use {{event("dragstart")}} instead).</td> + </tr> + <tr> + <td>{{event("icccardlockerror")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>the {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.</td> + </tr> + <tr> + <td>{{event("iccinfochange")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.iccInfo")}} object changes.</td> + </tr> + <tr> + <td>{{event("localized")}}</td> + <td> </td> + <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td> + <td>The page has been localized using data-l10n-* attributes.</td> + </tr> + <tr> + <td>{{event("mousewheel")}}{{deprecated_inline}}</td> + <td> </td> + <td><a href="http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td> + <td>The wheel button of a pointing device is rotated.</td> + </tr> + <tr> + <td>{{event("MozAudioAvailable")}}</td> + <td>{{domxref("Event")}}</td> + <td><em>Mozilla specific</em></td> + <td>The audio buffer is full and the corresponding raw samples are available.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozBeforeResize"><code>MozBeforeResize</code></a> {{obsolete_inline}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>A window is about to be resized.</td> + </tr> + <tr> + <td>{{event("mozbrowseractivitydone")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when some activity has been completed (complete description TBD.)</td> + </tr> + <tr> + <td>{{event("mozbrowserasyncscroll")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the scroll position within a browser<code> </code>{{HTMLElement("iframe")}} changes.</td> + </tr> + <tr> + <td>{{event("mozbrowseraudioplaybackchange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.</td> + </tr> + <tr> + <td>{{event("mozbrowsercaretstatechanged")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.</td> + </tr> + <tr> + <td>{{event("mozbrowserclose")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when window.close() is called within a browser {{HTMLElement("iframe")}}.</td> + </tr> + <tr> + <td>{{event("mozbrowsercontextmenu")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a browser {{HTMLElement("iframe")}} try to open a context menu.</td> + </tr> + <tr> + <td>{{event("mozbrowserdocumentfirstpaint")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.</td> + </tr> + <tr> + <td>{{event("mozbrowsererror")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when an error occured while trying to load a content within a browser iframe</td> + </tr> + <tr> + <td>{{event("mozbrowserfindchange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see <a href="/en-US/docs/Web/API/HTMLIFrameElement#Search_methods">HTMLIFrameElement search methods</a>.)</td> + </tr> + <tr> + <td>{{event("mozbrowserfirstpaint")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from <em>about:blank</em>.)</td> + </tr> + <tr> + <td>{{event("mozbrowsericonchange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the favicon of a browser iframe changes.</td> + </tr> + <tr> + <td>{{event("mozbrowserlocationchange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when an browser iframe's location changes.</td> + </tr> + <tr> + <td>{{event("mozbrowserloadend")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the browser iframe has finished loading all its assets.</td> + </tr> + <tr> + <td>{{event("mozbrowserloadstart")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the browser iframe starts to load a new page.</td> + </tr> + <tr> + <td>{{event("mozbrowsermanifestchange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent 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.</td> + </tr> + <tr> + <td>{{event("mozbrowsermetachange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.</td> + </tr> + <tr> + <td>{{event("mozbrowseropensearch")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a link to a search engine is found.</td> + </tr> + <tr> + <td>{{event("mozbrowseropentab")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent 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 <kbd>ctrl</kbd>/<kbd>cmd</kbd> + click.)</td> + </tr> + <tr> + <td>{{event("mozbrowseropenwindow")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when {{domxref("window.open()")}} is called within a browser iframe.</td> + </tr> + <tr> + <td>{{event("mozbrowserresize")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the browser {{HTMLElement("iframe")}}'s window size has changed.</td> + </tr> + <tr> + <td>{{event("mozbrowserscroll")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the browser {{HTMLElement("iframe")}} content scrolls.</td> + </tr> + <tr> + <td>{{event("mozbrowserscrollareachanged")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent 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.)</td> + </tr> + <tr> + <td>{{event("mozbrowserscrollviewchange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when asynchronous scrolling (i.e. APCZ) starts or stops.</td> + </tr> + <tr> + <td>{{event("mozbrowsersecuritychange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the SSL state changes within a browser iframe.</td> + </tr> + <tr> + <td>{{event("mozbrowserselectionstatechanged")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{event("mozbrowsercaretstatechanged")}} instead.</td> + </tr> + <tr> + <td>{{event("mozbrowsershowmodalprompt")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe</td> + </tr> + <tr> + <td>{{event("mozbrowsertitlechange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the document.title changes within a browser iframe.</td> + </tr> + <tr> + <td>{{event("mozbrowserusernameandpasswordrequired")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when an HTTP authentification is requested.</td> + </tr> + <tr> + <td>{{event("mozbrowservisibilitychange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{domxref("HTMLIFrameElement.setVisible","setVisible()")}}.</td> + </tr> + <tr> + <td>{{event("MozGamepadButtonDown")}}</td> + <td> </td> + <td><em>To be specified</em></td> + <td>A gamepad button is pressed down.</td> + </tr> + <tr> + <td>{{event("MozGamepadButtonUp")}}</td> + <td> </td> + <td><em>To be specified</em></td> + <td>A gamepad button is released.</td> + </tr> + <tr> + <td>{{event("MozMousePixelScroll")}} {{deprecated_inline}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>The wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)</td> + </tr> + <tr> + <td>{{event("MozOrientation")}} {{deprecated_inline}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>Fresh data is available from an orientation sensor (see deviceorientation).</td> + </tr> + <tr> + <td>{{event("MozScrolledAreaChanged")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td>The document view has been scrolled or resized.</td> + </tr> + <tr> + <td>{{event("moztimechange")}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>The time of the device has been changed.</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{deprecated_inline}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>A touch point is placed on the touch surface (use touchstart instead).</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{deprecated_inline}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>A touch point is moved along the touch surface (use touchmove instead).</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{deprecated_inline}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>A touch point is removed from the touch surface (use touchend instead).</td> + </tr> + <tr> + <td>{{event("alerting")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The correspondent is being alerted (his/her phone is ringing).</td> + </tr> + <tr> + <td>{{event("busy")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The line of the correspondent is busy.</td> + </tr> + <tr> + <td>{{event("callschanged")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been added or removed from the list of current calls.</td> + </tr> + <tr> + <td><a href="/en-US/docs/DOM/onconnected">onconnected</a> {{event("connected")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been connected.</td> + </tr> + <tr> + <td>{{event("connecting")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to connect.</td> + </tr> + <tr> + <td>{{event("delivered")}}</td> + <td>{{domxref("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td>An SMS has been successfully delivered.</td> + </tr> + <tr> + <td>{{event("dialing")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The number of a correspondent has been dialed.</td> + </tr> + <tr> + <td>{{event("disabled")}}</td> + <td> </td> + <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td> + <td>Wifi has been disabled on the device.</td> + </tr> + <tr> + <td>{{event("disconnected")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been disconnected.</td> + </tr> + <tr> + <td>{{event("disconnecting")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to disconnect.</td> + </tr> + <tr> + <td>{{event("enabled")}}</td> + <td> </td> + <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td> + <td>Wifi has been enabled on the device.</td> + </tr> + <tr> + <td>{{event("error_(Telephony)","error")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>An error occurred.</td> + </tr> + <tr> + <td>{{event("held")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been held.</td> + </tr> + <tr> + <td>{{event("holding")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to be held.</td> + </tr> + <tr> + <td>{{event("incoming")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is being received.</td> + </tr> + <tr> + <td>{{event("received")}}</td> + <td>{{domxref("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td>An SMS has been received.</td> + </tr> + <tr> + <td>{{event("resuming")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to resume.</td> + </tr> + <tr> + <td>{{event("sent")}}</td> + <td>{{domxref("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td>An SMS has been sent.</td> + </tr> + <tr> + <td>{{event("statechange")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The state of a call has changed.</td> + </tr> + <tr> + <td>{{event("statuschange")}}</td> + <td> </td> + <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#156"><em>Firefox OS specific</em></a></td> + <td>The status of the Wifi connection changed.</td> + </tr> + <tr> + <td>{{event("overflow")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td>An element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td> + </tr> + <tr> + <td>{{event("smartcard-insert")}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been inserted.</td> + </tr> + <tr> + <td>{{event("smartcard-remove")}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been removed.</td> + </tr> + <tr> + <td>{{event("stkcommand")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The <abbr title="SIM Application Toolkit">STK</abbr> Proactive Command is issued from <abbr title="Integrated Circuit Card">ICC</abbr>.</td> + </tr> + <tr> + <td>{{event("stksessionend")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The <abbr title="SIM Application Toolkit">STK</abbr> Session is terminated by <abbr title="Integrated Circuit Card">ICC</abbr>.</td> + </tr> + <tr> + <td><code>text</code></td> + <td> </td> + <td><em>Mozilla Specific</em></td> + <td>A generic composition event occurred.</td> + </tr> + <tr> + <td>{{event("touchenter")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a> Removed</td> + <td> </td> + </tr> + <tr> + <td>{{event("touchleave")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a> Removed</td> + <td> </td> + </tr> + <tr> + <td>{{event("underflow")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td>An element is no longer overflowed by its content (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td> + </tr> + <tr> + <td><code>uploadprogress</code> {{deprecated_inline}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td><em>Mozilla Specific</em></td> + <td>Upload is in progress (see {{event("progress")}}).</td> + </tr> + <tr> + <td> + <p>{{event("ussdreceived")}}</p> + </td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>A new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received</td> + </tr> + <tr> + <td>{{event("voicechange")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.voice")}} object changes values.</td> + </tr> + </tbody> +</table> + +<h2 id="Mozilla-specific_events">Mozilla-specific events</h2> + +<div class="note"> +<p><strong>Note:</strong> those events are never exposed to web content and can only be used in chrome content context.</p> +</div> + +<h3 id="XUL_events">XUL events</h3> + +<table class="standard-table" style="height: 554px; width: 1033px;"> + <tbody> + <tr> + <th class="header" style="width: 220px;">Event Name</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + <tr> + <td>{{event("broadcast")}}</td> + <td> </td> + <td><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td> + <td>An <code>observer</code> noticed a change to the attributes of a watched broadcaster.</td> + </tr> + <tr> + <td>{{event("CheckboxStateChange")}}</td> + <td> </td> + <td>XUL</td> + <td>The state of a <code>checkbox</code> has been changed either by a user action or by a script (useful for accessibility).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/close_event">close</a></td> + <td> </td> + <td>XUL</td> + <td>The close button of the window has been clicked.</td> + </tr> + <tr> + <td>{{event("command")}}</td> + <td> </td> + <td>XUL</td> + <td>An element has been activated.</td> + </tr> + <tr> + <td>{{event("commandupdate")}}</td> + <td> </td> + <td>XUL</td> + <td>A command update occurred on a <code>commandset</code> element.</td> + </tr> + <tr> + <td>{{event("DOMMenuItemActive")}}</td> + <td> </td> + <td>XUL</td> + <td>A menu or menuitem has been hovered or highlighted.</td> + </tr> + <tr> + <td>{{event("DOMMenuItemInactive")}}</td> + <td> </td> + <td><em>XUL</em></td> + <td>A menu or menuitem is no longer hovered or highlighted.</td> + </tr> + <tr> + <td>{{event("popuphidden")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip has been hidden.</td> + </tr> + <tr> + <td>{{event("popuphiding")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip is about to be hidden.</td> + </tr> + <tr> + <td>{{event("popupshowing")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip is about to become visible.</td> + </tr> + <tr> + <td>{{event("popupshown")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip has become visible.</td> + </tr> + <tr> + <td>{{event("RadioStateChange")}}</td> + <td> </td> + <td>XUL</td> + <td>The state of a <code>radio</code> has been changed either by a user action or by a script (useful for accessibility).</td> + </tr> + <tr> + <td>{{event("ValueChange")}}</td> + <td> </td> + <td>XUL</td> + <td>The value of an element has changed (a progress bar for example, useful for accessibility).</td> + </tr> + </tbody> +</table> + +<h3 id="Add-on-specific_events">Add-on-specific events</h3> + +<table class="standard-table" style="width: 100%;"> + <tbody> + <tr> + <th class="header" style="width: 220px;">Event Name</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A touch point is swiped across the touch surface</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Two touch points start to move away from each other.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Two touch points move away from each other (after a MozMagnifyGestureStart).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Two touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Two touch points start to rotate around a point.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Two touch points rotate around a point (after a MozRotateGestureStart).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Two touch points rotate around a point (after a sequence of MozRotateGestureUpdate).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Two touch points are tapped on the touch surface.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A touch point is swiped across the touch surface to invoke the edge UI (Win8 only).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Content has been repainted.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A popup has been blocked</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A window has been created.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A window is about to be closed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td> + <td> </td> + <td><em>Addons specifc</em></td> + <td>The title of a window has changed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td> + <td> </td> + <td><em>Addons specifc</em></td> + <td>A link has been added a document.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td> + <td> </td> + <td><em>Addons specifc</em></td> + <td>A link has been removed inside from a document.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A <code>meta</code> element has been added to a document.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A <code>meta</code> element has been removed from a document.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A modal dialog is about to open.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A modal dialog has been closed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>The content of an element has been auto-completed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>The frame has finished loading (but not its dependent resources).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is shown.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is closed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Browser fullscreen mode has been entered or left.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Window has entered/left fullscreen mode, or has been minimized/unminimized.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td><a href="/en-US/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> mode has been entered.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>The session store will stop tracking this window.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>The session store will stop tracking this tab.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab is about to be restored.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been restored.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A window state has switched to "ready".</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A window state has switched to "busy".</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been opened.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been closed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been selected.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been shown.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been hidden.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been pinned.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been unpinned.</td> + </tr> + </tbody> +</table> + +<h3 id="Developer_tool-specific_events">Developer tool-specific events</h3> + +<table class="standard-table" style="width: 100%;"> + <tbody> + <tr> + <th class="header" style="width: 220px;">Event Name</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td> + <td> </td> + <td><em>devtools specific</em></td> + <td>The "Rules" view of the style inspector has been updated.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td> + <td> </td> + <td><em>devtools specific</em></td> + <td>The "Rules" view of the style inspector has been changed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td> + <td> </td> + <td><em>devtools specific</em></td> + <td>A link to a CSS file has been clicked in the "Rules" view of the style inspector.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Event")}}</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li> +</ul> 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 +--- +<p>{{draft}}</p> +<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> 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.</p> +<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (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.</p> +<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">a single, consistent API</a>. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p> +<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p> +<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2> +<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) 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 <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>).</p> +<p>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 <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p> +<h2 id="More_about_the_DOM">More about the DOM</h2> +<p>{{LandingPageListSubpages}}</p> 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 +--- +<p>এখানে আপনি ওয়েব ডেভেলপমেন্ট আর্কিটেকচার যেসকল এপিআই এর ভিত্তিপ্রস্তরের উপর দাঁড়িয়ে আছে, তার সম্পর্কে ধারণা পেতে কিছু আর্টিকেলের লিংক এখানে পাবেন।</p> +<h2 id="Web_APIs_from_A_to_Z">Web APIs from A to Z</h2> + +<p>{{ListGroups}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li> + <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li> + <li><a href="/en-US/docs/Learn">Learning web development</a></li> +</ul> 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 +--- +<p><strong>WebRTC</strong> (যেখানে RTC এর পূর্ণরুপ Real-Time Communications) হল একটি প্রযুক্তি যা একাধিক ব্রাউজারের মধ্যে ব্রাউজার-ব্রাউজার অডিও/ভিডিও স্ট্রিমিং কিংবা ডাটা শেয়ারিং সুবিধা প্রদান করে থাকে। WebRTC এর সাহায্যে কোনরূপ প্লাগ-ইন বা এক্সটেনশন ব্যবহার ছাড়াই স্ট্যান্ডার্ড ওয়েব এপিআই এর সাহায্যে টেলিকনফারেন্সিং কিংবা ডাটা শেয়ারিং সম্ভব।</p> + +<p>WebRTC এর অংশগুলোকে জাভাস্ক্রিপ্ট এপিআই এর সাহায্য ব্যবহার করা যায়: Network Stream API একটি অডিও/ভিডিও স্ট্রিম নির্দেশ করে, PeerConnection API এর সাহায্য দুই বা ততোধিক ব্রাউজারের মধ্যে সংযোগ স্থাপন করা যায়, এবং DataChannel API এর সাহায্য অডিও/ভিডিও ব্যতীত অন্যান্য ধরণের ডাটা আদানপ্রদান করা যায় - যা গেমিং, চ্যাট কিংবা ফাইল ট্রান্সফারের জন্য অসাধারণ!</p> + +<div class="note"> +<p><span style="color: #000000;"><strong>উল্লেখ্য:</strong> এই ডকুমেন্টেশন <a href="/bn-BD/docs/Web/API/WebRTC_API">নতুন যায়গায়</a> চলে যাচ্ছে। </span></p> +</div> + +<h2 id="গাইড">গাইড</h2> + +<dl> + <dt><a href="/bn-BD/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/bn-BD/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">WebRTC এর সাহায্যে পিয়ার-টু-পিয়ার যোগাযোগ</a></dt> + <dd>ওয়েবআরটিসি এপিআই এর সাহায্যে পিয়ার টু পিয়ার যোগাযোগ করা।</dd> + <dt><a href="/bn-BD/docs/Web/Guide/API/WebRTC/WebRTC_architecture" title="/bn-BD/docs/Web/Guide/API/WebRTC/WebRTC_architecture">WebRTC এর আর্কিটেকচার পরিচিতি</a></dt> + <dd>WebRTC এর অনেকগুলো আলাদা আলাদা অংশ রয়েছে যা নবাগতদের জন্য প্রচণ্ড বিভ্রান্তকর। এই আর্টিকেলে এইসকল অংশগুলোর পরিচয় দিয়ে, তারা কিভাবে একত্রে কাজ করে - সে সম্পর্কে ধারণা দেওয়া হয়েছে।</dd> + <dt><a href="/bn-BD/docs/Web/Guide/API/WebRTC/WebRTC_basics" title="/bn-BD/docs/Web/Guide/API/WebRTC/WebRTC_basics">WebRTC এর সাধারণ বিষয়াবলী</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="রেফারেন্স">রেফারেন্স</h2> + +<dl> + <dt><a href="/bn-BD/docs/Web/API/Navigator.getUserMedia">Navigator.getUserMedia</a></dt> + <dd>মিডিয়া (ভিডিও/অডিও) ক্যাপচার করার এপিআই।</dd> + <dt><a href="/bn-BD/docs/Web/API/RTCPeerConnection"><span style="color: #0095dd;">RTCPeerConnection</span></a></dt> + <dd>দুইটি পিয়ারের মধ্যে ডাটা স্ট্রিমিং করার ইন্টারফেস।</dd> + <dt><a href="/bn-BD/docs/Web/API/RTCDataChannel">RTCDataChannel</a></dt> + <dd>পিয়ার কানেকশনের মধ্যে দিয়ে ডাটা (মিডিয়া নয় এমন) পাঠানোর ইন্টারফেস।</dd> +</dl> 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 +--- +<p>{{draft()}}</p> +<p>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.</p> +<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">overview page</a> 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.</p> +<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">custom events page</a> 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.</p> +<p>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.</p> +<p>The <strong>device</strong> 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 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation. </p> +<p>The <strong>window</strong> in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.</p> +<p>The <strong>process</strong> 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.</p> +<p>The <strong>user interaction</strong> 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:</p> +<ul> + <li>the original 'click' event,</li> + <li>mouse events,</li> + <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li> + <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier, but deprecated, <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>.</li> +</ul> +<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as is explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p> +<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p> +<p>The <strong>network requests</strong> made by a web page might trigger some events.</p> +<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p> +<div class="note"> + <p>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.</p> +</div> +<h2 id="Docs">Docs</h2> +<p>{{LandingPageListSubpages}}</p> 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 +--- +<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="width: 200px; height: 450px; float: right;"></a></p> +<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> হচ্ছে একটি <a href="/en-US/docs/HTML" title="HTML">HTML</a> element যেটা স্ক্রিপ্টিং (সাধারণত <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> ) ব্যবহার করে গ্রাফিক্স আঁকার জন্য ব্যবহার করা হয় । উদাহরণস্বরূপ গ্রাফ আঁকতে, ছবি কম্পোজিশন অথবা সাধারন ( তবে<a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster"> বেশি সাধারন নয় </a>) অ্যানিমেশন তৈরি করতে এটি ব্যবহার করা হয় । ডানপাশের ছবিতে <code><canvas></code> প্রয়োগ করে কিছু উদাহরণ দেওয়া হয়েছে যা আমরা পরে এর টিউটোরিয়াল এ দেখবো।</p> +<p><code><canvas></code> সর্বপ্রথম Apple এর Mac OS X ড্যাশবোর্ড এ ব্যবহার করার জন্য প্রকাশিত হয় এবং পরে Safari এবং Google Chrome এ প্রয়োগ করা হয়. <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> 1.8- ভিত্তিক browsers, যেমন Firefox 1.5 ও এই element কে সমর্থন করে. এই <code><canvas></code> element হচ্ছে <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> এর একটি অংশ যা HTML5 নামেও পরিচিত।</p> +<p><span class="seoSummary">এই টিউটোরিয়াল কিভাবে <code><canvas></code> element ব্যবহার করে প্রাথমিক ভাবে 2D গ্রাফিক্স তৈরি করা যায় তা বর্ণনা করে । আপনি canvas ব্যবহার করে কি করতে পারবেন এই উদাহরণগুলো তার সুস্পষ্ট ধারণা দেয় এবং code কে snippets করে আপনার নিজের কাঙ্ক্ষিত বিষয়কে</span> তৈরি করতে শুরু করে ।</p> +<h2 id="Before_you_start" name="Before_you_start">শুরু করার পূর্বে</h2> +<p><code><canvas></code> element ব্যবহার করা কঠিন কিছু নয় তবে আপনার <a href="/en-US/docs/HTML" title="HTML">HTML</a> এবং <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> সম্পর্কে প্রাথমিক ধারণা থাকতে হবে । কিছু পুরাতন browsers এ <code><canvas></code> element সমর্থন করে না, কিন্তু সম্প্রতি সকল প্রধান browsers গুলো তে সমর্থন করে । canvas এর default সাইজ হচ্ছে 300px * 150px (width * height). কিন্তু custom size গুলো CSS এর height এবং width property ব্যবহার করে উল্লেখ করা যায় । canvas এ গ্রাফিক্স আঁকতে গেলে আমরা javascript context object ব্যবহার করি , যা গ্রাফিক্সটিকে অনেক উন্নতমানের করে তুলে ।</p> +<h2 id="In_this_tutorial" name="In_this_tutorial">এই টিউটোরিয়াল এ যা আছে</h2> +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">প্রাথমিক ব্যবহার</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">আকৃতি</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">ছবি ব্যবহার করা</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">styles এবং color প্রয়োগ করা</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">রূপান্তরকরণ</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">একত্রীকরণ</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">প্রাথমিক অ্যানিম্যাশন</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">canvas সাজানো</a></li> +</ul> +<h2 id="See_also" name="See_also">আরও দেখুন</h2> +<ul> + <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas ভিত্তিক পৃষ্ঠা</a></li> + <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Canvas এর সাথে গ্রাফিক্স আঁকা</a></li> + <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas এর উদাহরণসমূহ</a></li> + <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 টিউটোরিয়াল</a></li> + <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">Canvas ব্যবহার করে টেক্সট আঁকা</a></li> + <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="Adding Text to Canvas">Canvas এ টেক্সট যোগ করা</a></li> + <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Canvas নমুনাসমূহ- গেইমস, অ্যাপ্লিকেশনস, টুলস এবং টিউটোরিয়ালস</a></li> + <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas আঁকা এবং অ্যানিম্যাশন অ্যাপ্লিকেশন</a></li> + <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">ইন্টার্যাক্টিভ canvas টিউটোরিয়াল</a></li> + <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">গুণ এবং পদ্ধতিসহ Canvas Cheat শিট</a></li> + <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">অ্যাডোব ইলাস্ট্রেটর এর জন্য Canvas plug-in</a></li> + <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5 Canvas টিউটোরিয়াল</a></li> + <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">Canvas API ব্যবহার করে কিভাবে N grade Bézier curves আঁকা যায়</a></li> + <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">canvas টিউটোরিয়াল এর ৩১ দিন</a></li> + <li><a href="http://www.w3.org/TR/2dcontext/" title="http://www.w3.org/TR/2dcontext/">W3C স্ট্যান্ডার্ড</a></li> + <li><a href="http://www.tutorialspark.com/html5/HTML5_canvas_Intro.php" title="http://www.tutorialspark.com/html5/HTML5_canvas_Intro.php">HTML5 Canvas টিউটোরিয়াল এবং সহায়িকা</a></li> +</ul> +<h2 id="A_note_to_contributors">A note to contributors</h2> +<p>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.</p> +<div> + {{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}</div> 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 +--- +<p><span class="seoSummary">HTML5 এ যেকোনো অংশ পরিবর্তনীয়। কিছু জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার ব্যবহার করে আপনি একটি ওয়েব পেজ একটি সম্পূর্ণ এবং দ্রুত rich-text editor এ রুপান্তর করতে পারবেন । এই অনুচ্ছেদ আপনাকে এর কার্যকারিতা সম্পর্কে কিছু তথ্য প্রদান করবে।</span></p> +<h2 id="সামঞ্জস্যতা"><span class="short_text" id="result_box" lang="bn"><span class="hps">সামঞ্জস্যতা</span></span></h2> +<p>পরিবর্তনীয় বিষয়গুলো সম্পূর্ণভাবে বর্তমান ব্রাউজার গুলোর সাথে সামঞ্জস্যপূর্ণ।</p> +<ul> + <li>ফায়ারফক্স ৩.৫+</li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">অ্যান্ড্রয়েড-এর জন্য </span></span>ফায়ারফক্স ১৯+</li> + <li>ক্রোম ৪.০+</li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">ইন্টারনেট এক্সপ্লোরার</span></span> ৫.৫+</li> + <li>সাফারি ৩.১+</li> + <li>অপেরা ৯+</li> + <li>আইওএস সাফারি ৫.০+</li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">অ্যান্ড্রয়েড</span></span> ব্রাউজার ৩.০+</li> + <li>অপেরা মোবাইল ১২.১+</li> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">অ্যান্ড্রয়েড-এর জন্য ক্রোম </span></span>২৫+</li> +</ul> +<p>এখন পর্যন্ত অপেরা মিনি তে সমর্থিত নয়।</p> +<h2 id="এটা_কিভাবে_কাজ_করে">এটা কিভাবে কাজ করে ?</h2> +<p><code>contenteditable</code> এট্রিবিউট টি আপনার HTML উপাদান এ <code>true</code> সেট করুন। এটা প্রায় সকল HTML উপাদান এ ব্যবহার করা যায়।</p> +<h2 id="উদাহরণ">উদাহরণ</h2> +<p>একটি সহজ উদাহরণ</p> +<pre><!DOCTYPE html> +<html> + <body> + <div contenteditable="true"> + This text can be edited by the user. + </div> + </body> +</html> </pre> +<p>আপনি এখানে লোকালস্টোরেজ ব্যবহার করে জাভাস্ক্রিপ্ট ইন্টিগ্রেশন এর একটি কার্যকর উদাহরন দেখতে পারেন। এই উৎস-এর সাথে</p> +<h2 id="আরও_দেখুন">আরও দেখুন</h2> +<pre class="code">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");</pre> +<p><a href="/en/Midas" title="en/Midas">কিভাবে এই বিষয় এর সাথে কাজ করবেন </a> (old IE style API) এবং <a href="/en/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">এখানে</a></p> +<div> + {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}</div> 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 +--- +<p>এই সহায়িকা হচ্ছে একটি সামগ্রিক নির্দেশিকা যা আপনাকে মাষ্টার<span style="background-color: #40e0d0;"> HTML</span> form তৈরি করতে সাহায্য করবে । <span id="result_box" lang="bn"><span class="hps"><span style="background-color: #00ffff;">HTML</span> from</span> <span class="hps">ব্যবহারকারীদের সাথে</span> <span class="hps">আলাপচারিতার</span> <span class="hps">জন্য খুব</span> <span class="hps">শক্তিশালী হাতিয়ার</span> <span class="hps">হয়</span></span> না । <span id="result_box" lang="bn"><span class="hps">এই সহায়িকার মধ্যে,<span style="background-color: #00ffff;"> </span></span><span id="result_box" lang="bn"><span class="hps"><span style="background-color: #00ffff;">HTML</span></span> from <span class="hps">হতে </span></span><span class="hps">আমরা</span> <span class="hps">কাস্টম উইজেট</span> <span class="hps">করার</span> <span class="hps">পরিচালনার</span> <span class="hps">তথ্য</span> <span class="hps">থেকে</span> <span class="hps">কাঠামো</span> <span class="hps">থেকে</span> <span class="hps">স্টাইলিং</span> <span class="hps">করার</span></span>। তুমি এই শক্তিশালি অফার শিখতে এবং উপভোগে পারবে।</p> +<h2 id="বর্ন_মালা">বর্ন মালা</h2> +<ol> + <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">আমার প্রথম HTML form</a></li> + <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>HTML form </span></a>কি ভাবে গঠন করতে হয় </li> + <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>নেটিভ form <span id="result_box" lang="bn"><span class="hps">উইজেট</span></span></span></a></li> + <li>CSS সাথে HTML forms + <ol> + <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>HTML forms</span></a> এর উন্নতি</li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms"> HTML forms উন্নতির ধরন</a></li> + <li> উইজেট এর টেবিল হতে <a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Property </a>শামাযশ্যতা</li> + </ol> + </li> + <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>তথ্য হতে </span></a>পাঠাতে এবং চেষ্টা করতে</li> + <li> তথ্য হতে বৈধতা</li> + <li> উইজেট হতে কিভাবে coustom তৈরি করতে হয়</li> + <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript"> JavaScript কি ভাবে নিক্ষেপ করতে হয়</a> + <ol> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">ডাটা অবজে</a>কট কিভাবে ব্যাবহার করতে হয়</li> + </ol> + </li> + <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">HTML হতে <span id="result_box" lang="bn"><span class="hps">ব্রাউজারে </span></span></a></li> +</ol> +<h2 id="HTML_Documentation">HTML Documentation</h2> +<h3 id="HTML_Elements">HTML Elements</h3> +<table> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Related DOM interface</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;">{{HTMLElement("button")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td> + <td style="vertical-align: top;">The <code>button</code> element represents a clickable button.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td> + <td style="vertical-align: top;">The <span style="font-family: Courier New;">datalist</span> element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other forms elements.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td> + <td style="vertical-align: top;">The <span style="font-family: Courier New;">fieldset</span> is used to group several form elements within a form.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("form")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td> + <td style="vertical-align: top;">The <code>form</code> element represents a section of document that contains interactive element that enable a user to submit information to a web server.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("input")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td> + <td style="vertical-align: top;">The <code>input</code> element is used to create interactive controls for forms.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td> + <td style="vertical-align: top;">The <code>keygen</code> element exists to facilitate generation of key material, and submission of the public key as part of an HTML form</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("label")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td> + <td style="vertical-align: top;">The <code>label</code> element represents a caption for an item in a user interface</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("legend")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td> + <td style="vertical-align: top;">The <code>legend</code> element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("meter")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td> + <td style="vertical-align: top;">The <code>meter</code> element represents either a scalar value within a known range or a fractional value.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td> + <td style="vertical-align: top;">the <code>optgroup</code> element creates a group of options within a {{ HTMLElement("select") }} element.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("option")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td> + <td style="vertical-align: top;">the HTML<em> </em><code>option<em> </em></code>element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("output")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td> + <td style="vertical-align: top;">The <code>output</code> element represents the result of a calculation.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("progress")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td> + <td style="vertical-align: top;">The <code>progress</code> element is used to view the completion progress of a task.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("select")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td> + <td style="vertical-align: top;">The <code>select</code> element represents a control that presents a menu of options.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td> + <td style="vertical-align: top;">The <code>textarea</code> element represents a multi-line plain-text editing control.</td> + </tr> + </tbody> +</table> +<div class="note"> + <p><strong>Note:</strong> All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.</p> +</div> +<h3 id="HTML_Attributes">HTML Attributes</h3> +<table class="standard-table"> + <thead> + <tr> + <th>Attribute Name</th> + <th>Elements</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>accept</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>List of types the server accepts, typically a file type.</td> + </tr> + <tr> + <td style="white-space: nowrap;">accept-charset</td> + <td>{{ HTMLElement("form") }}</td> + <td>List of supported charsets.</td> + </tr> + <tr> + <td>action</td> + <td>{{ HTMLElement("form") }}</td> + <td>The URI of a program that processes the information submitted via the form.</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Indicates whether controls in this form can by default have their values automatically completed by the browser.</td> + </tr> + <tr> + <td>autofocus</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>The element should be automatically focused after the page loaded.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>challenge</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>A challenge string that is submitted along with the public key.</td> + </tr> + <tr> + <td>checked</td> + <td>{{ HTMLElement("input") }}</td> + <td>Indicates whether the element should be checked on page load.</td> + </tr> + <tr> + <td>cols</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Defines the number of columns in a textarea.</td> + </tr> + <tr> + <td>data</td> + <td>{{ HTMLElement("object") }}</td> + <td>Specifies the URL of the resource.</td> + </tr> + <tr> + <td>dirname</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td> </td> + </tr> + <tr> + <td>disabled</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the user can interact with the element.</td> + </tr> + <tr> + <td>enctype</td> + <td>{{ HTMLElement("form") }}</td> + <td>Defines the content type of the form date when the <code>method</code> is POST.</td> + </tr> + <tr> + <td>for</td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>Describes elements which belongs to this one.</td> + </tr> + <tr> + <td>form</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates the form that is the owner of the element.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>high</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the lower bound of the upper range.</td> + </tr> + <tr> + <td>keytype</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Specifies the type of key generated.</td> + </tr> + <tr> + <td>list</td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifies a list of pre-defined options to suggest to the user.</td> + </tr> + <tr> + <td>low</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the upper bound of the lower range.</td> + </tr> + <tr> + <td>max</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Indicates the maximum value allowed.</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Defines the maximum number of characters allowed in the element.</td> + </tr> + <tr> + <td>method</td> + <td>{{ HTMLElement("form") }}</td> + <td>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.</td> + </tr> + <tr> + <td>min</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>Indicates the minimum value allowed.</td> + </tr> + <tr> + <td>multiple</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td> + </tr> + <tr> + <td>name</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Name of the element. For example used by the server to identify the fields in form submits.</td> + </tr> + <tr> + <td>novalidate</td> + <td>{{ HTMLElement("form") }}</td> + <td>This attribute indicates that the form shouldn't be validated when submitted.</td> + </tr> + <tr> + <td>optimum</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the optimal numeric value.</td> + </tr> + <tr> + <td>pattern</td> + <td>{{ HTMLElement("input") }}</td> + <td>Defines a regular expression which the element's value will be validated against.</td> + </tr> + <tr> + <td>placeholder</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Provides a hint to the user of what can be entered in the field.</td> + </tr> + <tr> + <td>readonly</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the element can be edited.</td> + </tr> + <tr> + <td>required</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether this element is required to fill out or not.</td> + </tr> + <tr> + <td>rows</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Defines the number of rows in a textarea.</td> + </tr> + <tr> + <td>selected</td> + <td>{{ HTMLElement("option") }}</td> + <td>Defines a value which will be selected on page load.</td> + </tr> + <tr> + <td>size</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td> + </tr> + <tr> + <td>src</td> + <td>{{ HTMLElement("input") }}</td> + <td>The URL of the embeddable content.</td> + </tr> + <tr> + <td>step</td> + <td>{{ HTMLElement("input") }}</td> + <td> </td> + </tr> + <tr> + <td>target</td> + <td>{{ HTMLElement("form") }}</td> + <td> </td> + </tr> + <tr> + <td>type</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>Defines the type of the element.</td> + </tr> + <tr> + <td>usemap</td> + <td>{{ HTMLElement("input") }}</td> + <td> </td> + </tr> + <tr> + <td>value</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Defines a default value which will be displayed in the element on page load.</td> + </tr> + <tr> + <td>wrap</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Indicates whether the text should be wrapped.</td> + </tr> + </tbody> +</table> +<h3 id="Normative_reference">Normative reference</h3> +<ul> + <li><a href="http://www.w3.org/TR/html5/forms.html" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML5 Specification (Forms)</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li> +</ul> 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 +--- +<p>এই আর্টিকেলগুলো আপনাকে নির্দিষ্ট কিছু প্রযুক্তি এবং এপিআই ব্যবহার সংক্রান্ত তথ্য দেবে।</p> +<div class="note"> + <p><strong>সাবধান:</strong> আমাদের কন্টেন্টগুলো ঠিকমত সাজানোর আগ পর্যন্ত পেজটির অবস্থা বেশ অগোছালো থাকতে পারে। দুঃখিত!</p> +</div> +<p>{{LandingPageListSubpages}}</p> +<dl> + <dt> + <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">জাভাস্ক্রিপ্ট</a></dt> + <dd> + ওয়েবে অ্যাপ্লিকেশন লেখার জন্য শক্তিশালী প্রোগ্রামিং ল্যাঙ্গুয়েজটি হল জাভাস্ক্রিপ্ট।</dd> +</dl> +<h2 id="আরও_দেখুন">আরও দেখুন</h2> +<ul> + <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">ওয়েব ডেভেলপার রেফারেন্স</a></li> +</ul> 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 +--- +<p><span id="result_box" lang="bn"><span class="hps">আধুনিক</span> <span class="hps">ওয়েব</span> <span class="hps">অ্যাপ্লিকেশন এবং</span> <span class="hps">সাইট</span> <span class="hps">নির্মাণ</span> <span class="hps">করার সময়, আপনার কনটেন্ট সঠিক ভাবে কাজ করা অত্যন্ত জরুরি।</span></span> যেন, তা <span class="short_text" id="result_box" lang="bn"><span class="hps">দ্রুত এবং</span> <span class="hps">দক্ষতার সঙ্গে কাজ</span> <span class="hps">করতে পারে।</span></span> <span class="short_text" id="result_box" lang="bn"><span class="hps">এটি</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps">শক্তিশালী</span> <span class="hps">ডেস্কটপ</span> <span class="hps">সিস্টেম</span> <span class="hps">ব্যবহারকারীদের</span> <span class="hps">পাশাপাশি</span> <span class="hps">কম</span> <span class="hps">ক্ষমতা সম্পন্ন</span> <span class="hps">ডিভাইসের জন্যও</span></span></span></span><span class="short_text" lang="bn"><span class="hps"><span lang="bn"> </span>কার্যকরভাবে</span> <span class="hps">কাজ</span> করে থাকে</span>।</p> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/bn/web/guide/গ্রাফিক্স/index.html b/files/bn/web/guide/গ্রাফিক্স/index.html new file mode 100644 index 0000000000..fdf50fc2b7 --- /dev/null +++ b/files/bn/web/guide/গ্রাফিক্স/index.html @@ -0,0 +1,53 @@ +--- +title: গ্রাফিক্স অন দি ওয়েব +slug: Web/Guide/গ্রাফিক্স +tags: + - NeedsReview +translation_of: Web/Guide/Graphics +--- +<p><span id="result_box" lang="bn"><span class="hps">আধুনিক ওয়েব</span> <span class="hps">সাইট এবং</span> <span class="hps">অ্যাপ্লিকেশনে</span> <span class="hps">প্রায়ই</span> <span class="hps">গ্রাফিক্স</span> <span class="hps">উপস্থাপন</span> <span class="hps">প্রয়োজন পরে। </span></span><span id="result_box" lang="bn"><span class="hps">{{HTMLElement("img")}} উপাদান <span id="result_box" lang="bn"><span class="hps">ব্যবহার করে </span></span><span id="result_box" lang="bn"><span class="hps">সহজে</span>ই </span>স্ট্যাটিক</span> <span class="hps">ইমেজ</span> <span class="hps">প্রদর্শিত করা</span></span><span lang="bn"><span class="hps"> </span><span class="hps">যায়, অথবা</span></span> {{cssxref("background-image")}} প্রোপার্টি <span id="result_box" lang="bn"><span class="hps">ব্যবহার করে</span> <span class="hps">এইচটিএমএল</span> <span class="hps">উপাদানের</span> <span class="hps">পটভূমি</span> <span class="hps">নির্ধারণ করা যায়।</span></span></p> +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">প্রায়ই</span> <span class="hps">অন</span>-দা-ফ্লাই <span class="hps">গ্রাফিক্স</span> <span class="hps">নির্মাণ করতে</span> <span class="hps">চান</span></span>, অথবা ঘটনার পরে ছবি প্রদর্শন করতে চান। এই নিবন্ধনটি আপনাকে সাহায্য করবে কিভাবে আপনি তা সম্পন্ন করতে পারেন।</p> +<div class="row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">2D গ্রাফিক্স</h2> + <dl> + <dt> + <a href="/en-US/docs/HTML/Canvas">Canvas(ক্যানভাস)</a></dt> + <dd> + এই {{HTMLElement("canvas")}}উপাদানটি APIs প্রদান করে যেন জাভাস্ক্রিপ্ট ব্যাবহার করে 2D গ্রাফিক্স তৈরি করা যায়।</dd> + <dd> + <a href="/en-US/docs/Web/SVG">SVG(এস ভি জি)</a><br> + স্কেলেবল ভেক্টর গ্রাফিক্স (SVG) লাইনস, কারভস, এবং অন্যান্য <span class="short_text" id="result_box" lang="bn"><span class="hps">জ্যামিতিক আকার প্রদান </span></span>করে। bitmaps ব্যাবহার করা এড়িয়ে চলার মাধ্যমে, আপনি যেকোনো আকারের ছবি পরিছন্নভাবে <span id="result_box" lang="bn"><span class="hps">তৈরি করতে পারেন।</span></span></dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">সম্পূর্ণ দেখুন্...</a></span></p> + </div> + <div class="section"> + <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">3D গ্রাফিক্স</h2> + <dl> + <dt> + <a href="/en-US/docs/Web/WebGL">WebGL(ওয়েব জি এল)</a></dt> + <dd> + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"> + <span class="short_text" id="result_box" lang="bn"><span class="hps">WebGL</span> <span class="hps">শুরু</span> <span class="hps">করার একটি নির্দেশিকা</span></span>, ওয়েবের জন্য <span class="short_text" id="result_box" lang="bn"><span class="hps">3D গ্রাফিক্স API</span></span>. এই প্রযুক্তি আপনাকে <span class="short_text" id="result_box" lang="bn"><span class="hps">ওয়েবের মধ্যে স্ট্যান্ডার্ড</span></span> OpenGL ES ব্যাবহার করতে দেয়।</div> + </div> + </dd> + </dl> + <h2 id="ভিডিও">ভিডিও</h2> + <dl> + <dt> + <a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">HTML5 (অডিও এবং ভিডিও ব্যাবহার)</a></dt> + </dl> + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"> + <span id="result_box" lang="bn"><span class="hps">একটি HTML</span> <span class="hps">নথিতে</span> <span class="hps">ভিডিও এম্বেড</span> <span class="hps">এবং প্লেব্যাক</span> <span class="hps">নিয়ন্ত্রণ</span><span>।</span></span></div> + </div> + <dl> + <dt> + <a href="/en-US/docs/WebRTC">WebRTC(ওয়েব আর টি সি)</a></dt> + <dd> + WebRTC(ওয়েব আর টি সি) এর RTC (আর টি সি) বলতে Real-Time Communications (রিয়েল টাইম কমিউনিকেশন) কে বুঝায়, এই প্রযুক্তি <span id="result_box" lang="bn"><span class="hps">অডিও / ভিডিও</span> <span class="hps">স্ট্রিমিং</span> <span class="hps">এবং ব্রাউজার</span> <span class="hps">ক্লায়েন্ট</span>স <span class="hps atn">(</span><span>মিত্রগণ</span><span>)</span> <span class="hps">মধ্যে তথ্য</span> <span class="hps">ভাগ</span> <span class="hps">করতে সক্ষম</span><span>।</span></span></dd> + </dl> + </div> +</div> +<p> </p> 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><span class="seoSummary">এইচটিএমএল (<strong>হাইপার টেক্সট মারকআপ ল্যাঙ্গুয়েজ</strong>) এর এলিমেন্টগুলো সাধানত "ব্লক-লেভেল" এলিমেন্ট অথবা <a href="/en-US/docs/HTML/Inline_elements" title="/en-US/docs/HTML/inline_elements">"ইনলাইন" এলিমেন্ত</a> । একটি ব্লক-লেভেল এলিমেন্ট তার প্যারেন্ট এলিমেন্তটর{কন্তাইনার} সমস্ত জায়গা দখল করে , সেজন্য একটি "ব্লক" বানানো হয় ।এগুলো বুজানোর জন্য এই প্রবন্ধটি সাহায্য করবে।</span></p> + +<p>ব্রাউজারস এলিমেন্টর আগে এবং পরে এক নিওলাইনের সাথে ব্লক-লেভেল এলেমেন্টকেদেখায়।. নিচের উদাহরন ব্লক-লেভেল এলেমেন্টর প্রভাবের ব্যবহারিক প্রমান দেয়। </p> + +<h2 id="Block-level_Example" name="Block-level_Example"><span style="color: rgb(51, 51, 51); margin-left: -3px; text-transform: none;">ব্লক-লেভেল এলিমেন্টস </span></h2> + +<h3 id="এইচটিএমএল">এইচটিএমএল</h3> + +<pre class="brush: html"><p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p></pre> + +<h3 id="সিএসএস">সিএসএস</h3> + +<pre class="brush: css">p { background-color: #8ABB55; } +</pre> + +<p>{{ EmbedLiveSample('Block-level_Example') }}</p> + +<h2 id="ব্যবহারবিধি">ব্যবহারবিধি</h2> + +<ul> + <li><span class="seoSummary">ব্লক-লেভেল এলিমেন্টস কখনো</span> {{ HTMLElement("body") }}এলিমেন্টের ভিতরে আসে।</li> +</ul> + +<h2 id="ব্লক-লেভেল_বনাম._ইনলাইন"><span class="seoSummary">ব্লক-লেভেল</span> বনাম. ইনলাইন</h2> + +<p><span class="seoSummary">ব্লক-লেভেল এলিমেন্টস এবং ইনলাইনের মধ্যে দুইটি বিশেষ পার্থক্য আসে।</span>:</p> + +<dl> + <dt>ফরম্যাটিং</dt> + <dd>বাই ডিফল্ট,<span class="seoSummary">ব্লক-লেভেল এলিমেন্টস</span>নতুন লাইনেই শুরু করে, কিন্ত ইনলাইন এলিমেন্টস একটি লাইনের যেকোনো জায়গা থেকে শুরু করতে পারে।</dd> + <dt>কনটেন্ট মডেল</dt> + <dd>সাধারণত, <span class="seoSummary">ব্লক-লেভেল এলিমেন্টস ইনলাইন এলিমেন্টস</span> এবং বাকি ব্লক-লেভেল এলিমেন্টসকে ধরে রাখে। স্বভাবত গঠনগত স্বাতন্ত্র হল ঐ ধারনা যা ব্লক-লেভেল এলিমেন্টস ইনলাইন এলিমেন্টস থেকেও "বড়" কাঠামো তৈরি করে। </dd> +</dl> + +<p>ব্লক-লেভেলের স্বাতন্ত্র বনাম.<span class="seoSummary">ইনলাইন এলিমেন্টস</span> এইচটিএমএলের সবিস্তার বিবরণীকে ৮.০১ পর্যন্ত ব্যবহার করা হয়। এইচটিএমএল৫ এ,এই বিনারি স্বাতন্ত্রকে আরো জটিল <a href="/en-US/docs/HTML/Content_categories" title="/en-US/docs/HTML/Content_categories">কন্টটেন্ট ক্যাটেগরিস </a>সেটে প্রতিস্থাপন করা হয়।এইচটিএমএল৫ এ "ব্লক-লেভেল" ক্যাটেগরিটি মোটামোটিভাবে <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="/en-US/docs/HTML/Content_categories#Flow_content">ফ্লও কনটেন্ট </a> ক্যাটাগরিতে সারা দেয়, যখন "ইনলাইন" <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">ফ্রাসিং কনটেন্ট </a> এ সারা দেয়, কিন্তু কোন বাড়তি ক্যাটাগরি নেই।</p> + +<h2 id="এলিমেন্টস"><span class="seoSummary">এলিমেন্টস</span></h2> + +<p>নিচে এইচটিএমএল<span class="seoSummary">ব্লক-লেভেল এলিমেন্টসের সম্পূর্ণ তালিকা দেওয়া</span> হল (যদিও "ব্লক-লেভেল" ব্যাখ্যা করা হইনই ঐএলিমেন্টের যা এইচটিএমএল৫ এ নতুন)।</p> + +<div class="threecolumns"> +<dl> + <dt>{{ HTMLElement("address") }}</dt> + <dd>Contact information.</dd> + <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Article content.</dd> + <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Aside content.</dd> + <dt>{{ HTMLElement("blockquote") }}</dt> + <dd>Long ("block") quotation.</dd> + <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Drawing canvas.</dd> + <dt>{{ HTMLElement("dd") }}</dt> + <dd>Definition description.</dd> + <dt>{{ HTMLElement("div") }}</dt> + <dd>Document division.</dd> + <dt>{{ HTMLElement("dl") }}</dt> + <dd>Definition list.</dd> + <dt>{{ HTMLElement("fieldset") }}</dt> + <dd>Field set label.</dd> +</dl> + +<dl> + <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Figure caption.</dd> + <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Groups media content with a caption (see {{ HTMLElement("figcaption") }}).</dd> + <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Section or page footer.</dd> + <dt>{{ HTMLElement("form") }}</dt> + <dd>Input form.</dd> + <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt> + <dd>Heading levels 1-6.</dd> + <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Section or page header.</dd> + <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Groups header information.</dd> + <dt>{{ HTMLElement("hr") }}</dt> + <dd>Horizontal rule (dividing line).</dd> + <dt>{{ HTMLElement("li") }}</dt> + <dd>List item.</dd> + <dt>{{ HTMLElement("main") }}</dt> + <dd>Contains the central content unique to this document.</dd> + <dt>{{ HTMLElement("nav") }}</dt> + <dd>Contains navigation links.</dd> +</dl> + +<dl> + <dt>{{ HTMLElement("noscript") }}</dt> + <dd>Content to use if scripting is not supported or turned off.</dd> + <dt>{{ HTMLElement("ol") }}</dt> + <dd>Ordered list.</dd> + <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Form output.</dd> + <dt>{{ HTMLElement("p") }}</dt> + <dd>Paragraph.</dd> + <dt>{{ HTMLElement("pre") }}</dt> + <dd>Preformatted text.</dd> + <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Section of a web page.</dd> + <dt>{{ HTMLElement("table") }}</dt> + <dd>Table.</dd> + <dt>{{ HTMLElement("tfoot") }}</dt> + <dd>Table footer.</dd> + <dt>{{ HTMLElement("ul") }}</dt> + <dd>Unordered list.</dd> + <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Video player.</dd> +</dl> +</div> + +<h3 id="See_also" name="See_also">আরো দেখুন</h3> + +<ul> + <li><a href="/en-US/docs/HTML/Inline_elements" title="en/HTML/Inline_elements">ইনলাইন এলিমেন্ট</a></li> +</ul> 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 +--- +<p> <a href="/bn-BD/docs/HTML/HTML5" title="/bn-BD/docs/HTML/HTML5">HTML5</a> এ যুক্ত <strong>HTML {{HTMLElement("canvas")}} এলিমেন্টটি</strong> ব্যবহার করে স্ক্রিপ্টিংয়ের (সাধারণত <a href="/bn-BD/docs/JavaScript" title="JavaScript">জাভাস্ক্রিপ্ট</a>) সাহায্যে গ্রাফিক্স আঁকা যায়। উদাহরণস্বরুপ, এটি গ্রাফিক্স আঁকা, ছবির কম্পোজিশন তৈরি করা, অ্যানিমেশন তৈরি করা অথবা এমনি রিয়েল-টাইম ভিডিও রেন্ডারিং অথবা প্রসেসিংয়ের কাজেও ব্যবহার করা যায়।</p> +<p><code><canvas></code> এর জন্য মোজিলা অ্যাপ্লিকেশনসমূহ সাপোর্ট পাওয়া শুরু করেছে গিকো ১.৮ (বা <a href="/bn-BD/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">ফায়ারফক্স ১.৫</a>) থেকে। মূলত এ্যাপল তাদের <a class="external" href="http://www.apple.com/macosx/features/dashboard/">ড্যাশবোর্ড</a> এবং সাফারির জন্য এলিমেন্টটি প্রকাশ করে। ইন্টারনেট এক্সপ্লোরার ৯ ভার্সন থেকে <code><canvas></code> সাপোর্ট করে; ইন্টারনেট এক্সপ্লোরারের পুরনো সংস্করণের জন্য গুগলের <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a> প্রজেক্টের একটি স্ক্রিপ্ট যুক্ত করে কার্যকরভাবে <code><canvas></code> এর সাপোর্ট যোগ করা যায়। গুগল ক্রোম এবং অপেরা ৯ <code><canvas></code> ক্যানভাস সাপোর্ট করে।</p> +<p><code><canvas></code> টি দিয়ে <a href="/bn-BD/docs/WebGL" title="WebGL">WebGL</a> এর সাহায্যে হার্ডওয়্যার-এক্সেলারেশনের মাধ্যমে ওয়েব পেজে ত্রিমাত্রিক (3D) গ্রাফিক্স দেখানো সম্ভব।</p> +<div class="row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Documentation" name="Documentation">ডকুমেন্টেশন</h2> + <dl> + <dt> + <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">স্পেসিফিকেশন</a></dt> + <dd> + <code><canvas></code> এলিমেট হল WhatWG ওয়েব অ্যাপ্লিকেশনস ১.০ স্পেসিফিকেশন বা HTML5 এর অংশ।</dd> + <dt> + <a href="/bn-BD/docs/HTML/Canvas/Tutorial" title="Canvas_tutorial">ক্যানভাস টিউটোরিয়াল</a></dt> + <dd> + <code><canvas></code> এর সাধারণ ব্যবহার এবং এর অ্যাডভান্সড ফিচারের ওপর একটি বিস্তারিত টিউটোরিয়াল।</dd> + <dt> + <a href="/bn-BD/docs/Code_snippets/Canvas" title="Code_snippets/Canvas">কোড স্নিপেট: ক্যানভাস</a></dt> + <dd> + <code><canvas></code> সংক্রান্ত এক্সটেনশন ডেভেলপার সংশ্লিষ্ট কোড স্নিপেট।</dd> + <dt> + <a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">ক্যানভাস উদাহরণ</a></dt> + <dd> + কিছু <code><canvas></code> ডেমো।</dd> + <dt> + <a href="/bn-BD/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" title="HTML/Canvas/Drawing DOM objects into a canvas">ক্যানভাসে DOM অবজেক্ট আঁকা</a></dt> + <dd> + যেভাবে HTML এলিমেন্টের ন্যায় DOM কন্টেন্ট একটি ক্যানভাসে আঁকবেন।</dd> + <dt> + <a href="/bn-BD/docs/A_Basic_RayCaster" title="A Basic RayCaster">একটি সাধারণ raycaster</a></dt> + <dd> + ক্যানভাসের সাহায্যে ray-tracing এনিমেশনের ডেমো।</dd> + <dt> + <a href="/bn-BD/docs/Gecko_DOM_Reference#Canvas_interfaces" title="Gecko_DOM_Reference#Canvas_interfaces">ক্যানভাস DOM ইন্টারফেস</a></dt> + <dd> + গিকোতে ক্যানভাস DOM ইন্টারফেস সমূহ।</dd> + </dl> + <p><span class="alllinks"><a href="/bn-BD/docs/tag/HTML:Canvas" title="tag/HTML:Canvas">সব দেখুন...</a></span></p> + </div> + <div class="section"> + <h2 class="Community" id="কমিউনিটি">কমিউনিটি</h2> + <ul> + <li>মোজিলা ফোরাম দেখুন... {{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}</li> + <li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">ক্যানভাস-ডেভেলপার ইয়াহু গ্রুপ</a></li> + </ul> + <h2 class="Resources" id="Resources" name="Resources">তথ্যভান্ডার</h2> + <ul> + <li><a class="external" href="http://joshondesign.com/p/books/canvasdeepdive/title.html" title="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">HTML5 Canvas Deep Dive</a></li> + <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a> (<a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png" title="HTML5_Canvas_Cheat_Sheet.png (1388×1027)">PNG</a> / <a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf" title="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf">PDF</a>)</li> + </ul> + <h2 class="Libraries" id="Libraries" name="Libraries">লাইব্রেরি</h2> + <ul> + <li><a class="external" href="http://libcanvas.github.com/" title="http://libcanvas.github.com/">libCanvas</a> একটি হালকা ও শক্তিশালী ক্যানভাস ফ্রেমওয়ার্ক</li> + <li><a class="external" href="http://processingjs.org" title="http://processingjs.org/">Processing.js</a> হল প্রসেসিং ভিজ্যুয়ালাইজেশন ল্যাঙ্গুয়েজের পোর্ট</li> + <li><a class="external" href="http://easeljs.com/" title="http://easeljs.com/">EaselJS</a> হল একটি ফ্ল্যাশের মত API সমৃদ্ধ লাইব্রেরি</li> + <li><a class="external" href="http://www.liquidx.net/plotkit/" title="http://www.liquidx.net/plotkit/">PlotKit</a> হল একটি চার্ট ও গ্রাফ তৈরির লাইব্রেরি</li> + <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi" title="https://github.com/jeremyckahn/rekapi">Rekapi</a> হল ক্যানভাসের জন্য অ্যানিমেশনের কি-ফ্রেম করার API।</li> + <li><a class="external" href="http://senchalabs.github.com/philogl/" title="http://senchalabs.github.com/philogl/">PhiloGL</a> হল ডাটা ভিজ্যুয়ালাইজেশন, সৃজনশীল কোডিং ও গেম ডেভেলপমেন্টের জন্য একটি WebGL ফ্রেমওয়ার্ক।</li> + <li><a class="external" href="http://thejit.org/" title="http://thejit.org/">JavaScript InfoVis Toolkit</a> ওয়েবের জন্য ইন্টারএ্যাক্টিভ 2D ক্যানভাস ডাটা ভিজ্যুয়ালাইজেশন তৈরি করে।</li> + <li><a href="http://www.frame-engine.com" title="http://www.frame-engine.com">Frame-Engine</a> হল অ্যাপ্লিকেশন ও গেম ডেভেলপ করার একটি ফ্রেমওয়ার্ক।</li> + </ul> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">সম্পর্কিত টপিক</h2> + <ul> + <li><a href="/bn-BD/docs/HTML" title="HTML">HTML</a>, <a href="/bn-BD/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/bn-BD/docs/CSS" title="CSS">CSS</a>, <a href="/bn-BD/docs/AJAX" title="AJAX">AJAX</a>, <a href="/bn-BD/docs/DOM" title="DOM">DOM</a>, <a href="/bn-BD/docs/SVG" title="SVG">SVG</a>, <a href="/bn-BD/docs/WebGL" title="WebGL">WebGL</a></li> + </ul> + </div> +</div> +<div> + {{HTML5ArticleTOC()}}</div> 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 +--- +<p><strong><code><a href="/bn-BD/docs/HTML/Canvas" title="HTML/Canvas"><canvas></a></code></strong> হল একটি <a href="/bn-BD/docs/HTML" title="HTML">HTML</a> এলিমেন্ট, যা দ্বারা স্ক্রিপ্টিংয়ের (সাধারণত <a href="/bn-BD/docs/JavaScript" title="JavaScript">জাভাস্ক্রিপ্ট</a>) সাহায্যে গ্রাফিক্স আঁকা যায়। এটি অবশ্য গ্রাফিক্স আঁকা, ছবি কম্পোজিশন তৈরি করা এবং সাধারণ (এবং <a href="/bn-BD/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster">অসাধারণ</a>) এনিমেশন তৈরির কাজ করতে পারে।</p> +<p><code><canvas></code> এর জন্য মোজিলা অ্যাপ্লিকেশনসমূহ সাপোর্ট পাওয়া শুরু করেছে গিকো ১.৮ (বা <a class="new" href="https://developer.mozilla.org/bn-BD/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">ফায়ারফক্স ১.৫</a>) থেকে। মূলত এ্যাপল তাদের <a class="external" href="http://www.apple.com/macosx/features/dashboard/">ড্যাশবোর্ড</a> এবং সাফারির জন্য এলিমেন্টটি প্রকাশ করে। <code><canvas></code> এলিমেন্টটি <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> স্পেসিফিকেশনের একটি অংশ, যা HTML5 নামেও পরিচিত।</p> +<p>এই টিউটোরিয়ালে আপনার HTML পেজে <code><canvas></code> এলিমেন্ট ব্যবহারের প্রক্রিয়া আলোচনা করা হয়েছে। উদাহরণগুলো থেকে আপনি <code><canvas></code> দিয়ে কি করতে পারেন, তা আন্দাজ করতে পারেন এবং আপনার নিজের ইমপ্লিমেন্টেশন তৈরিতে সাহায্য করতে পারে।</p> +<h2 id="Before_you_start" name="Before_you_start">শুরু করার পূর্বে</h2> +<p><code><canvas></code> ব্যবহার করা খুব কঠিন - তা নয়। কিন্তু, আপনার অবশ্যই <a href="/bn-BD/docs/HTML" title="HTML">HTML</a> এবং <a href="/bn-BD/docs/JavaScript" title="JavaScript">জাভাস্ক্রিপ্ট</a> এর সাধারণ ধারণা থাকতে হবে।</p> +<p><code><canvas></code> টি অনেক পুরনো ব্রাউজার সাপোর্ট করে না কিন্তু, ফায়ারফক্স ১.৫ ও পরবর্তী ভার্সন, অপেরা ৯ ও পরবর্তী, এবং সাফারি, গুগল ক্রোমের নতুন ভার্সন ও ইন্টারনেট এক্সপ্লোরার ৯ হতে কাজ করে।</p> +<h2 id="In_this_tutorial" name="In_this_tutorial">এই টিউটোরিয়ালে আছে</h2> +<ul> + <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">সাধারণ ব্যবহার</a></li> + <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">শেপ (জ্যামিতিক আকৃতি) আঁকা</a></li> + <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Using_images" title="Canvas_tutorial/Using_images">ছবি (ইমেজ) ব্যবহার</a></li> + <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">স্টাইল এবং রং প্রয়োগ করা</a></li> + <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Transformations" title="Canvas_tutorial/Transformations">ট্রান্সফরমেশন (রুপান্তর)</a></li> + <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Compositing" title="Canvas_tutorial/Compositing">কম্পোজিট করা</a></li> + <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">সাধারণ এনিমেশন</a></li> + <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/bn-BD/docs/Canvas_tutorial/Optimizing_canvas">ক্যানভাস অপটিমাইজ করা</a></li> +</ul> +<h2 id="See_also" name="See_also">আরও দেখুন</h2> +<ul> + <li><a href="/bn-BD/docs/HTML/Canvas" title="HTML/Canvas">ক্যানভাস টপিক পেজ</a></li> + <li><a href="/bn-BD/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">ক্যানভাসের সাহায্যে গ্রাফিক্স আঁকা</a></li> + <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">ক্যানভাসের উদাহরণ</a></li> + <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 টিউটোরিয়াল</a></li> + <li><a href="/bn-BD/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">ক্যানভাস ব্যবহার করে টেক্সট আঁকা</a></li> + <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="Adding Text to Canvas">ক্যানভাসে টেক্সট যুক্ত করা</a></li> + <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">ক্যানভাস ডেমো - গেম, অ্যাপ্লিকেশন, টুল এবং টিউটোরিয়াল</a></li> + <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">ক্যানভাস ড্রয়িং এবং অ্যানিমেশন অ্যাপ্লিকেশন</a></li> + <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">ইন্টারঅ্যাক্টিভ ক্যানভাস টিউটোরিয়াল</a></li> + <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">সকল এট্রিবিউট ও মেথড সহ ক্যানভাস চিট শিট</a></li> + <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">এডোব ইলাস্ট্রেটর -> ক্যানভাস প্লাগ-ইন</a></li> + <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> + <li><a class="external" href="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api" title="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api">ক্যানভাস API এর সাহায্যে একটি বিন্দু আঁকা</a></li> + <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">ক্যানভাস API এর সাহায্যে N grade Bézier curve আঁকা</a></li> + <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">৩১ দিনের ক্যানভাস টিউটোরিয়াল</a></li> +</ul> +<div> + {{ Next("Canvas_tutorial/Basic_usage") }}</div> 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 +--- +<p><span class="seoSummary"> </span></p> + +<div class="almost_half_cell" id="gt-res-content"> +<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="bn"><span class="hps">HTML5 এর মধ্যে</span><span>,</span> <span class="hps">যেমন</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>গান"</span><span>)</span><span>}</span><span>}</span> <span class="hps">অথবা</span> <span class="hps">হিসাবে</span> </span>সি ও আর এস <span lang="bn"> <span class="hps">জন্য</span> <span class="hps">সমর্থন</span> <span class="hps">প্রদান</span> <span class="hps">যা</span> <span class="hps">কিছু</span> <span class="hps">HTML উপাদান</span><span>,</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>ভিডিও</span><span>"</span><span>)</span><span>}</span><span>}</span><span>,</span> <span class="hps">আপনি</span> <span class="hps">কনফিগার</span> <span class="hps">করতে দেয়</span><span>, যা একটি</span> <span class="hps">crossorigin</span> <span class="hps">অ্যাট্রিবিউট</span> <span class="atn hps">(</span><span>crossOrigin</span> <span class="hps">সম্পত্তি</span><span>)</span><span>,</span> <span class="hps">আছে</span> </span>সি ও আর এস <span lang="bn"> <span class="hps">উপাদান</span> <span class="hps">এর</span> <span class="hps">সংগৃহীত</span> <span class="hps">তথ্য</span> <span class="hps">জন্য</span> <span class="hps">অনুরোধ</span><span>.</span> <span class="hps">এই</span> <span class="hps">বৈশিষ্ট্যাবলী</span> <span class="hps">গণিত</span><span>,</span> <span class="hps">এবং</span> <span class="hps">নিম্নলিখিত সম্ভব</span> <span class="hps">মান</span> <span class="hps">আছে</span><span>:</span></span></div> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Keyword</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>anonymous</code></td> + <td>CORS requests for this element will not have the credentials flag set.</td> + </tr> + <tr> + <td><code>use-credentials</code></td> + <td>CORS requests for this element will have the credentials flag set; this means the request will provide credentials.</td> + </tr> + </tbody> +</table> + +<p> </p> + +<p><span id="result_box" lang="bn"><span class="hps">ডিফল্ট</span> <span class="atn hps">(</span><span>অ্যাট্রিবিউট</span> <span class="hps">উল্লেখ না করা</span> <span class="hps">হলে</span><span>, যে</span> <span class="hps">হয়</span><span>)</span> <span class="hps">দ্বারা</span><span>, কর্ড</span> <span class="hps">সব সময়ে</span> <span class="hps">ব্যবহার করা হয় না</span><span>।</span> <span class="atn hps">"</span><span>বেনামী</span><span>"</span> <span class="hps">শব্দ</span> </span> সি ও আর এস<span lang="bn"> <span class="hps">স্পেসিফিকেশন</span> <span class="hps">পরিভাষা</span> <span class="hps">বিভাগে বর্ণিত</span> <span class="hps">হিসাবে</span> <span class="hps">কুকিজ</span><span>,</span> <span class="hps">ক্লায়েন্ট প্রান্তের</span> <span class="hps">SSL সার্টিফিকেট</span> <span class="hps">বা</span> <span class="hps">HTTP প্রমাণীকরণের</span> <span class="hps">মাধ্যমে</span> <span class="hps">ব্যবহারকারী শংসাপত্র</span> <span class="hps">কোন</span> <span class="hps">বেচা কেনা নেই এবং</span> <span class="hps">হবে।</span><br> + <span class="hps">একটি অবৈধ</span> <span class="hps">শব্দ</span> <span class="hps">এবং</span> <span class="hps">একটি খালি</span> <span class="hps">স্ট্রিং</span> <span class="hps">বেনামী</span> <span class="hps">শব্দ</span> <span class="hps">হিসেবে</span> <span class="hps">পরিচালিত হবে</span><span>।</span></span></p> + +<h2 id="বিশেষ_উল্লেখ"> <span class="short_text" id="result_box" lang="bn"><span class="hps">বিশেষ উল্লেখ</span></span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ব্রাউজার_উপযুক্ততা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">উপযুক্ততা</span></span></h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>13</td> + <td>{{ CompatGeckoDesktop("8.0") }}</td> + <td>11</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>{{ HTMLElement("video")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("12.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("8.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>{{ HTMLElement("video")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("12.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="আরো_দেখুন"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো দেখুন</span></span></h2> + +<ul> + <li><a href="/En/HTTP_access_control" title="en/HTTP access control">HTTP </a><span class="short_text" id="result_box" lang="bn"><span class="hps">প্রবেশাধিকার নিয়ন্ত্রণ</span></span></li> +</ul> 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: <a> +slug: Web/HTML/Element/a +translation_of: Web/HTML/Element/a +--- +<p>The <em>HTML <code>Anchor</code> Element</em> (<strong><code><a></code></strong>) 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.</p> + +<pre class="brush: html"><a href="https://developer.mozilla.org">MDN</a></pre> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, interactive content, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Transparent</a>, containing either <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a> or <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>, or any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="আট্ট্রিবিউট">আট্ট্রিবিউট </h2> + +<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt> + <dd>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 <code>/</code> and <code>\</code> 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. + <div class="note"> + <p><strong>Note:</strong></p> + + <ul> + <li>Can be used with <a href="/en-US/docs/Web/API/URL.createObjectURL" title="/en-US/docs/Web/API/URL.createObjectURL"><code>blob:</code> URLs</a> and <code>data:</code> 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).</li> + <li>If the HTTP header <code>Content-Disposition:</code> is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.</li> + <li>If this attribute is present and <code>Content-Disposition:</code> is set to <code>inline</code>, Firefox gives priority to <code>Content-Disposition</code>, like for the filename case, while Chrome gives priority to the <code>download</code> attribute.</li> + <li>This attribute is only honored for links to resources with the same-origin.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd>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 <code>href</code> 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 <a href="/en-US/docs/HTML/Global_attributes#attr-id" title="Global attributes#attr-id">ID</a>) within the current document. URLs are not restricted to Web (HTTP)-based documents. URLs might use any protocol supported by the browser. For example, <code>file</code>, <code>ftp</code>, and <code>mailto</code> work in most user agents. + <div class="note"> + <p><strong>Note:</strong> You can use the special fragment "top" to create a link back to the top of the page; for example <code><a href="#top">Return to top</a></code>. <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid" lang="en" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">This behavior is specified by HTML5</a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> for HTML5 and by <a class="external" href="http://www.ietf.org/rfc/rfc1766.txt" title="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> for HTML4. Use this attribute only if the {{htmlattrxref("href", "a")}} attribute is present.</dd> + <dt>{{htmlattrdef("media")}} {{HTMLVersionInline(5)}}</dt> + <dd>This attribute specifies the media which the linked resource applies to. Its value must be a <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a>. 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. + <div class="note"> + <p><strong>Usage note:</strong></p> + + <ul> + <li>In HTML 4, only simple white-space-separated list of media description literals, i.e. <a href="/en-US/docs/CSS/@media" title="https://developer.mozilla.org/en-US/docs/CSS/@media">media types and groups</a>, where defined and allowed as values for this attribute, like <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>, ... HTML 5 extended this to any kind of <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media queries</a>, which are a superset of the allowed values of HTML 4.</li> + <li>Browsers not supporting the <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">CSS3 Media Queries</a> won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}</dt> + <dd>The 'ping' attribute, if present, sends the URLs of the resources a notification/ping if the user follows the hyperlink.</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>A string indicating which referrer to use when fetching the resource: + <ul> + <li><code>"no-referrer"</code> meaning that the <code>Referer:</code> header will not be sent.</li> + <li>"<code>no-referrer-when-downgrade</code>" meaning that no <code>Referer:</code> 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.</li> + <li><code>"origin"</code> meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.</li> + <li>"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. </li> + <li><code>"unsafe-url"</code> 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.</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>For anchors containing the <strong>href</strong> attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types">link types values</a>. 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 <strong>href</strong> attribute is present.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>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 <em>browsing context</em> (for example, tab, window, or inline frame). The following keywords have special meanings: + <ul> + <li><code>_self</code>: 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.</li> + <li><code>_blank</code>: Load the response into a new unnamed HTML4 window or HTML5 browsing context.</li> + <li><code>_parent</code>: 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 <code>_self</code>.</li> + <li><code>_top</code>: 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 <code>_self</code>.</li> + </ul> + Use this attribute only if the <strong>href</strong> attribute is present.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>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 <a class="linkification-ext external" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES" title="Linkification: http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a>. Use this attribute only if the <code>href</code> attribute is present.</dd> +</dl> + +<h3 id="Obsolete">Obsolete</h3> + +<dl> + <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>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 <a class="external" href="http://tools.ietf.org/html/rfc2045" title="http://tools.ietf.org/html/rfc2045">RFC 2045</a>. The default value is ISO-8859-1. + <div class="note"> + <p><strong>Usage note: </strong>This attribute is obsolete in HTML5 and <strong>should not be used by authors</strong>. To achieve its effect, use the HTTP Content-Type header on the linked resource.</p> + </div> + </dd> + <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>For use with object shapes, this attribute uses a comma-separated list of numbers to define the coordinates of the object on the page.</dd> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>This attribute is required in an anchor defining a target location within a page. A value for <strong>name</strong> is similar to a value for the <strong>id</strong> core attribute and should be an alphanumeric identifier unique to the document. Under the HTML 4.01 specification, <strong>id</strong> and <strong>name</strong> both can be used with the <a> element as long as they have identical values. + <div class="note"> + <p><strong>Usage note:</strong> This attribute is obsolete in HTML5, use <a href="/en-US/docs/HTML/Global_attributes#attr-id" title="HTML/Global attributes#id">global attribute <strong>id</strong></a> instead.</p> + </div> + </dd> + <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>This attribute specifies a reverse link, the inverse relationship of the <strong>rel</strong> attribute. It is useful for indicating where an object came from, such as the author of a document.</dd> + <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>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 <code>circle</code>, <code>default</code>, <code>polygon</code>, and <code>rect</code>. The format of the <strong>coords</strong> attribute depends on the value of shape. For <code>circle</code>, the value is <code>x,y,r</code> where <code>x</code> and <code>y</code> are the pixel coordinates for the center of the circle and <code>r</code> is the radius value in pixels. For <code>rect</code>, the <strong>coords</strong> attribute should be <code>x,y,w,h</code>. The <code>x,y</code> values define the upper-left-hand corner of the rectangle, while <code>w</code> and <code>h</code> define the width and height respectively. A value of <code>polygon</code> for <strong>shape</strong> requires <code>x1,y1,x2,y2,...</code> values for <strong>coords</strong>. Each of the <code>x,y</code> 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 <code>default</code> for shape requires that the entire enclosed area, typically an image, be used. + <div class="note"><strong>Note: </strong>It is advisable to use the <code>usemap</code> attribute for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the <code>shape</code> attribute.</div> + </dd> +</dl> + +<h3 id="মানসম্মত_নয়">মানসম্মত নয়</h3> + +<dl> + <dt>{{htmlattrdef("datafld")}} {{Non-standard_inline}}</dt> + <dd>This attribute specifies the column name from that data source object that supplies the bound data. + <div class="note"> + <p><strong>Usage note: </strong>This attribute is non-standard and <strong>should not be used by authors</strong>. To achieve its effect, use scripting and a mechanism such as <a href="/en-US/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> to populate the page dynamically</p> + </div> + + <table class="fullwidth-table"> + <tbody> + <tr> + <td rowspan="2">Support</td> + <td>Gecko</td> + <td>Presto</td> + <td>WebKit</td> + <td>Trident</td> + </tr> + <tr> + <td>Not implemented</td> + <td>Not implemented</td> + <td>Not implemented</td> + <td>IE4, IE5, IE6, IE7 (Removed in IE8)</td> + </tr> + <tr> + <td>Normative document</td> + <td colspan="4"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533703%28VS.85%29.aspx">Microsoft's Data Binding: dataFld Property (MSDN)</a></td> + </tr> + </tbody> + </table> + </dd> + <dt>{{htmlattrdef("datasrc")}} {{Non-standard_inline}}</dt> + <dd>This attribute indicates the ID of the data source object that supplies the data that is bound to this element. + <div class="note"> + <p><strong>Usage note: </strong>This attribute is non-standard and <strong>should not be used by authors</strong>. To achieve its effect, use scripting and a mechanism such as <a href="/en-US/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> to populate the page dynamically.</p> + </div> + + <table class="fullwidth-table"> + <tbody> + <tr> + <td rowspan="2">Support</td> + <td>Gecko</td> + <td>Presto</td> + <td>WebKit</td> + <td>Trident</td> + </tr> + <tr> + <td>Not implemented</td> + <td>Not implemented</td> + <td>Not implemented</td> + <td>IE4, IE5, IE6, IE7 (Removed in IE8)</td> + </tr> + <tr> + <td>Normative document</td> + <td colspan="4"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx">Microsoft's Data Binding: dataSrc Property (MSDN)</a></td> + </tr> + </tbody> + </table> + </dd> + <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt> + <dd>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. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534168(VS.85).aspx">Methods Property (MSDN)</a></dd> +</dl> + +<dl> + <dt>{{htmlattrdef("urn")}} {{Non-standard_inline}}</dt> + <dd>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. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx">urn Property (MSDN)</a></dd> +</dl> + +<h2 id="উদাহরণ">উদাহরণ </h2> + +<h3 id="বহিঃ_ঠিকানায়_সংযোগ">বহিঃ ঠিকানায় সংযোগ </h3> + +<pre class="brush: html"><!-- anchor linking to external file --> +<a href="http://www.mozilla.com/"> +External Link +</a> +</pre> + +<h4 id="Result" name="Result">Result</h4> + +<p><a class="external" href="http://www.mozilla.com/">External Link</a></p> + +<h3 id="Creating_a_clickable_image">Creating a clickable image</h3> + +<p>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.</p> + +<pre class="brush: html"><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> +</pre> + +<h4 id="Result" name="Result">Result</h4> + +<figure> +<p>{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}</p> +</figure> + +<h3 id="Creating_an_email_link">Creating an email link</h3> + +<p>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 <code>mailto</code> link. Here's a simple example:</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></pre> + +<p>This results in a link that looks like this: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p> + +<p>For additional details about the <code>mailto</code> URL scheme, such as how to include the subject, body, or other predetermined content, see <a href="/en-US/docs/Web/Guide/HTML/Email_links">Email links</a> or {{RFC(6068)}}.</p> + +<h3 id="Using_the_download_attribute_to_save_a_canvas_as_a_PNG">Using the download attribute to save a canvas as a PNG</h3> + +<p>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:</p> + +<pre class="brush: js"><strong style="color: #000066; font-weight: bold;">var</strong> link <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'a'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> +link.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'download image'</span><span style="color: #339933;">;</span> + +link.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <strong style="color: #000066; font-weight: bold;">function</strong><span style="color: #009900;">(</span>ev<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> + link.<span style="color: #660066;">href</span> <span style="color: #339933;">=</span> canvas.<span style="color: #660066;">toDataURL</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> + link.<span style="color: #660066;">download</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">"mypainting.png"</span><span style="color: #339933;">;</span> +<span style="color: #009900;">}</span><span style="color: #339933;">,</span> <strong style="color: #003366; font-weight: bold;">false</strong><span style="color: #009900;">)</span><span style="color: #339933;">;</span> + +document.<span style="color: #660066;">body</span>.<span style="color: #660066;">appendChild</span><span style="color: #009900;">(</span>link<span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre> + +<p>You can see this in action <a href="http://jsfiddle.net/codepo8/V6ufG/2/">http://jsfiddle.net/codepo8/V6ufG/2/</a></p> + +<h2 id="Specifications" name="Specifications">স্পেসিফিকেশন</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrer</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ব্রাউসার_কম্পিটিয়েবিলিটি">ব্রাউসার কম্পিটিয়েবিলিটি</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>href="#top"</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>download</td> + <td>{{CompatChrome("14")}}</td> + <td>{{CompatGeckoDesktop("20.0")}}</td> + <td>Edge 13</td> + <td>{{CompatOpera("15")}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ping</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>referrerpolicy</code></td> + <td>{{CompatChrome(46.0)}} [3] </td> + <td>{{CompatGeckoDesktop("45")}} [4]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>href="#top"</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>download</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("20.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ping</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>referrerpolicy</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [3]</td> + <td>{{CompatGeckoMobile("45.0")}} [4]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [3]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Starting from Gecko 41 {{geckoRelease("41.0")}}, {{HTMLElement("a")}} without <code>href</code> attribute is no more classified as interactive content. Clicking it inside {{HTMLElement("label")}} will activate labelled content ({{bug(1167816)}}).</p> + +<p>[2] <a href="http://kb.mozillazine.org/Browser.send_pings">Disabled by default</a></p> + +<p>[3] Implemented behind a flag.</p> + +<p>[4] From Firefox 42 to Firefox 44, the attribute was called <code>referrer</code>.</p> + +<h2 id="ক্লিক_করুন_ও_ফোকাস_করুন">ক্লিক করুন ও ফোকাস করুন </h2> + +<p>Whether clicking on an {{HTMLElement("a")}} causes it to (by default) become focused varies by browser and OS.</p> + +<table> + <caption>Does clicking on an {{HTMLElement("a")}} give it the focus?</caption> + <tbody> + <tr> + <td>Desktop Browsers</td> + <th>Windows 8.1</th> + <th>OS X 10.9</th> + </tr> + <tr> + <th>Firefox 30.0</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + <tr> + <th>Chrome ≥39<br> + (<a href="https://code.google.com/p/chromium/issues/detail?id=388666" title="Issue 388666: Focus anchor (A) elements on mousedown">Chromium bug 388666</a>)</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + <tr> + <th>Safari 7.0.5</th> + <td style="background-color: silver;">N/A</td> + <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> + </tr> + <tr> + <th>Internet Explorer 11</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Presto (Opera 12)</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + </tbody> +</table> + +<table> + <caption>Does tapping on an {{HTMLElement("a")}} give it the focus?</caption> + <tbody> + <tr> + <td>Mobile Browsers</td> + <th>iOS 7.1.2</th> + <th>Android 4.4.4</th> + </tr> + <tr> + <th>Safari Mobile</th> + <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Chrome 35</th> + <td>???</td> + <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> + </tr> + </tbody> +</table> + +<h2 id="পাদটীকা">পাদটীকা</h2> + +<p>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.</p> + +<p>HTML 3.2 defines only <strong>name</strong>, <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, and <strong>title</strong>.</p> + +<p>The <strong>target</strong> 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 <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> but is limited to frameset or transitional forms.</p> + +<h3 id="জাভাস্ক্রিপ্ট_রিকোমেন্ডিশন">জাভাস্ক্রিপ্ট রিকোমেন্ডিশন </h3> + +<p>It is often the case that an anchor tag is used with the <code>onclick</code> event. In order to prevent the page from refreshing, <strong>href</strong> 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.</p> + +<h2 id="আরও_দেখুন">আরও দেখুন </h2> + +<ul> + <li>Other elements conveying <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">text-level semantics</a>: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> 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: <article> +slug: Web/HTML/Element/article +tags: + - Element + - HTML + - HTML sections + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/article +--- +<p><em>HTML <code><article></code> এলিমেন্ট</em> ডকুমেন্ট, পেজ, অ্যাপ বা সাইটে একটি স্বয়ংসম্পূর্ণ প্রবন্ধ উপস্থাপন করে। এই প্রবন্ধটি স্বাধীনভাবে বিতরণযোগ্য বা পুনর্ব্যবহারযোগ্য, যেমনঃ syndication। এটা একটা ফোরাম পোস্ট হতে পারে, একটি ম্যাগাজিন বা পত্রিকার নিবন্ধ হতে পারে, একটি ব্লগ পোস্ট হতে পারে, মন্তব্য হতে পারে, একটি ইন্টারেক্টিভ উইজেট বা গ্যাজেট হতে পারে অথবা কন্টেন্ট এর একটি স্বাধীন উপকরণ হতে পারে।</p> +<div class="note"> + <p><strong>ব্যবহার নির্দেশিকাঃ</strong></p> + <ul> + <li>যখন একটি <code><article></code> এলিমেন্ট নেস্ট করা হয়, তখন ভেতরে থাকা এলিমেন্টটি একটি নিবন্ধ উপস্থাপন করে, যা বাইরের এলিমেন্টের সাথে সম্পর্কযুক্ত। উদাহরণ স্বরূপ, একটি ব্লগ পোস্টের কমেন্ট সমূহ <code><article></code> এলিমেন্টের মধ্যে নেস্ট করা <code><article></code> এলিমেন্ট হতে পারে, যেগুলো ব্লগ পোস্টটির সাথে সম্পর্কিত।</li> + <li><code><article></code> এলিমেন্টের লেখকের তথ্য {{HTMLElement("address")}} এলিমেন্টের মাধ্যমে দেয়া যায়, কিন্তু আমরা আগেই জেনেছি যে, <code><article></code> এর মধ্যে <code><address></code> এলিমেন্ট নেস্ট করা যাবেনা।</li> + <li><code><article> এলিমেন্টের </code>প্রকাশের তারিখ এবং সময় {{HTMLElement("time")}} এলিমেন্টের {{htmlattrxref("pubdate", "time")}} অ্যাট্রিবিউট ব্যবহার করে লেখা যাবে।</li> + </ul> +</div> +<ul class="htmlelt"> + <li><dfn><a class="new" href="/bn-BD/docs/Web/HTML/Content_categories">কন্টেন্ট ক্যাটাগরি</a></dfn> <a class="new" href="/bn-BD/docs/Web/HTML/Content_categories#Flow_content">ফ্লো কন্টেন্ট</a>, <a class="new" href="/docs/Web/HTML/Content_categories#Sectioning_content">সেকশনিং কন্টেন্ট</a>, পাল্পেবল কন্টেন্ট।</li> + <li><dfn>অনুমোদিত কন্টেন্ট</dfn><a class="new" href="/bn-BD/docs/Web/HTML/Content_categories#Flow_content">ফ্লো কন্টেন্ট</a></li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>অনুমোদিত প্যারেন্ট এলিমেন্ট সমূহ</dfn> যেকোনো এলিমেন্ট, যা <a class="new" href="/bn-BD/docs/Web/HTML/Content_categories#Flow_content">ফ্লো কন্টেন্ট</a> সমর্থন করে। তবে খেয়াল রাখবেন, <code><article></code> এলিমেন্ট কে কখনো {{HTMLElement("address")}}এলিমেন্ট এর ভেতরে ব্যবহার করা যাবে না।</li> + <li><dfn>DOM ইন্টারফেস</dfn> {{domxref("HTMLElement")}}</li> +</ul> +<h2 id="অ্যাট্রিবিউট_সমূহ">অ্যাট্রিবিউট সমূহ</h2> +<p>এই এলিমেন্টের মধ্যে শুধু <a class="new" href="/bn-BD/docs/Web/HTML/Global_attributes">গ্লোবাল অ্যাট্রিবিউট সমূহ</a> ব্যবহার করা যাবে।</p> +<h2 id="উদাহরণ">উদাহরণ</h2> +<pre class="brush: html"><article> + <h4>A really awesome article</h4> + <p>Lots of awesome text.</p> +</article> +</pre> +<h2 id="Specifications" name="Specifications">Specifications</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="ব্রাউজার_কম্প্যাটিবিলিটি">ব্রাউজার কম্প্যাটিবিলিটি</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>ফিচার</th> + <th>ক্রোম</th> + <th>ফায়ারফক্স (গেকো)</th> + <th>ইন্টারনেট এক্সপ্লোরার</th> + <th>অপেরা</th> + <th>সাফারি</th> + </tr> + <tr> + <td>মৌলিক সমর্থন</td> + <td>৫</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>৯.০</td> + <td>১১.১০</td> + <td>৪.১</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>ফিচার</th> + <th>অ্যান্ড্রয়েড</th> + <th>ফায়ারফক্স মোবাইল (গেকো)</th> + <th>ইন্টারনেট এক্সপ্লোরার মোবাইল</th> + <th>অপেরা মোবাইল</th> + <th>সাফারি মোবাইল</th> + </tr> + <tr> + <td>মৌলিক সমর্থন</td> + <td>২.২</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>৯.০</td> + <td>১১.০</td> + <td>৫.০ (iOS ৪.২)</td> + </tr> + </tbody> + </table> +</div> +<h2 id="আরও_দেখুন">আরও দেখুন</h2> +<ul> + <li><article> সংশ্লিষ্ট আরও কিছু এলিমেন্টঃ {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li class="last"><a class="deki-ns current" href="/bn-BD/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> +<p>{{ HTMLRef }}</p> 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 +--- +<h2 id="সংক্ষিপ্ত"> <span class="short_text" id="result_box" lang="bn"><span class="hps">সংক্ষিপ্ত</span></span></h2> + +<p> </p> + +<div class="almost_half_cell" id="gt-res-content"> +<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="bn"><span class="hps">এইচ টি এম এল</span> <span class="atn hps"><</span><span>বি</span><span>></span> <span class="hps">এলিমেন্ট</span> <span class="hps">কোন</span> <span class="hps">বিশেষ</span> <span class="hps">গুরুত্ব বা প্রাসঙ্গিকতা</span> <span class="hps">conveying</span> <span class="hps">ছাড়াই</span> <span class="hps">স্বাভাবিক</span> <span class="hps">টেক্সট</span> <span class="hps">থেকে</span> <span class="hps">শৈলীগত</span> <span class="hps">বিভিন্ন</span> <span class="hps">লেখার একটা</span> <span class="hps">স্প্যান</span> <span class="hps">প্রতিনিধিত্ব করে।</span> <span class="hps">এটা</span> <span class="hps">সাধারণত</span> <span class="hps">একটি</span> <span class="hps">সারসংক্ষেপ</span> <span class="hps">মধ্যে কীওয়ার্ড</span><span>, পণ্যের নাম</span> <span class="hps">একটি পর্যালোচনা</span><span>,</span> <span class="hps">বা</span> <span class="hps">যার</span> <span class="hps">সাধারণত</span> <span class="hps">উপস্থাপনা</span> <span class="hps">boldfaced</span> <span class="hps">হবে</span>। <span class="hps">টেক্সট</span> <span class="hps">অন্য</span> <span class="hps">ঘটনাকাল জন্য</span> <span class="hps">ব্যবহার করা হয়</span><span>। </span><span class="hps">তার</span> <span class="hps">ব্যবহারের</span> <span class="hps">আরেকটি</span> <span class="hps">উদাহরণ হল একটি</span> <span class="hps">প্রবন্ধের</span> <span class="hps">প্রতিটি</span> <span class="hps">অনুচ্ছেদের</span> <span class="hps">নেতৃত্ব</span> <span class="hps">বাক্য চিহ্নিত</span> <span class="hps">করা হয়</span><span>।</span></span></div> +</div> + +<div class="note"> +<p><strong>Usage notes:</strong></p> + +<ul> + <li>Do not confuse the <code><b></code> element with the {{HTMLElement("strong")}}, {{HTMLElement("em")}}, or {{HTMLElement("mark")}} elements. The {{HTMLElement("strong")}} element represents text of certain <em>importance</em>, {{HTMLElement("em")}} puts some emphasis on the text and the {{HTMLElement("mark")}} element represents text of certain <em>relevance</em>. The <code><b></code> element doesn't convey such special semantic information; use it only when no others fit.</li> + <li>Similarly, do not mark titles and headings using the <code><b></code> 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 <em>necessaril</em><em>y</em><em> </em>displayed in bold.</li> + <li>It is a good practice to use the <strong>class</strong> attribute on the <code><b></code> in order to convey additional semantic information (for example <code><b class="lead"></code> 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.</li> + <li>Historically, the <code><b></code> element was meant to make text boldface. Styling information has been deprecated since HTML4, so the meaning of the <code><b></code> element has been changed.</li> + <li>If there is no semantic purpose on using the <b> element, using css property <a href="/en-US/docs/CSS/font-weight" title="font-weight">font-weight</a> with bold value would be a better choice for making text bold.</li> +</ul> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="/en-US/docs/DOM/span" title="DOM/span"><code>HTMLSpanElement</code></a> interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 id="আরোপ_করা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরোপ করা</span></span></h2> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">এই</span> <span class="hps">উপাদান</span> <span class="hps">শুধুমাত্র</span> <span class="hps">গ্লোবাল</span> <span class="hps">গুণাবলী</span>তে <span class="hps">রয়েছে</span><span>।</span></span></p> + +<h2 id="উদাহরণ"> <span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণ</span></span></h2> + +<pre class="brush: html"><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. +</pre> + +<h3 id="ফল"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ফল</span></span></h3> + +<p> </p> + +<p><span id="result_box" lang="bn"><span class="hps">এই নিবন্ধটি</span> <span class="hps">কয়েকটি</span> <span class="hps">টেক্সট</span><span class="atn">-</span><span>স্তরের উপাদান</span> <span class="hps">বর্ণ।</span><span class="hps">এটি একটি এইচ টি এম এল</span> <span class="hps">নথিতে</span> <span class="hps">তাদের</span> <span class="hps">ব্যবহার</span> <span class="hps">ব্যাখ্যা</span><span>।</span><br> + <br> + <span class="hps">মূলশব্দ</span> <span class="hps">গাঢ়</span> <span class="hps">সম্ভবত</span> <span class="atn hps"><</span><span>বি</span><span>></span> <span class="hps">উপাদান</span><span>,</span> <span class="hps">এর</span> <span class="hps">ডিফল্ট</span> <span class="hps">শৈলী সঙ্গে</span> <span class="hps">প্রদর্শিত হয়</span><span>।</span></span></p> + +<h2 id="Specifications" name="Specifications"> <span class="short_text" id="result_box" lang="bn"><span class="hps">বিশেষ উল্লেখ</span></span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ব্রাউজার_উপযুক্ততা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">উপযুক্ততা</span></span></h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="আরো_দেখুন"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো দেখুন</span></span></h2> + +<ul> + <li>Others elements conveying <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">text-level semantics</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> + <li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags">Using <b> and <i> elements (W3C)</a></li> +</ul> + +<div>{{HTMLRef}}</div> 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: <blockquote> +slug: Web/HTML/Element/blockquote +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Element/blockquote +--- +<h2 id="সংক্ষিপ্ত"> <span class="short_text" id="result_box" lang="bn"><span class="hps">সংক্ষিপ্ত</span></span></h2> + +<p> <span id="result_box" lang="bn"><span class="hps">এইচ টি এম এল</span> <span class="atn hps"><</span><span>blockquote</span><span>></span> <span class="hps">এলিমেন্ট</span> <span class="atn hps">(</span><span>বা</span> <span class="hps">এইচ টি এম এল</span> <span class="hps">ব্লক</span> <span class="hps">উদ্ধৃতি</span> <span class="hps">এলিমেন্ট</span><span>)</span> <span class="hps">ঘিরা টেক্সট</span> <span class="hps">বর্ধিত</span> <span class="hps">উদ্ধৃতি</span> <span class="hps">যে ইঙ্গিত দেয়।</span><span class="hps">সাধারণত</span><span>,</span> <span class="hps">এই</span> <span class="atn hps">(</span><span>এটি পরিবর্তন</span> <span class="hps">করার জন্যে</span> <span class="hps">নোট দেখুন</span><span>)</span> <span class="hps">খাঁজ</span> <span class="hps">দ্বারা</span> <span class="hps">দৃশ্যত</span> <span class="hps">অনুষ্ঠিত</span> <span class="hps">হয়</span><span>।</span><span class="hps">উৎস</span> <span class="hps">একটি</span> <span class="hps">টেক্সট উপস্থাপনা</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>cite</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">উপাদান</span> <span class="hps">ব্যবহার</span> <span class="hps">দেওয়া যেতে পারে</span><span>, যখন</span> <span class="hps">উদ্ধৃতি</span> <span class="hps">উৎস</span> <span class="hps">জন্য একটি URL</span><span>,</span> <span class="hps">অ্যাট্রিবিউট</span> <span class="hps">cite</span> <span class="hps">ব্যবহার</span> <span class="hps">দেওয়া হতে পারে।</span></span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, sectioning root, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<p> </p> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">আরোপ করা</span><br> + <br> + <span class="hps">এই</span> <span class="hps">উপাদান</span> <span class="hps">গ্লোবাল</span> <span class="hps">গুণাবলী</span> <span class="hps">রয়েছে</span><span>।</span></span></p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd> <span id="result_box" lang="bn"><span class="hps">উদ্ধৃত</span> <span class="hps">তথ্যের জন্য একটি</span> <span class="hps">উৎস নথি</span> <span class="hps">বা</span> <span class="hps">বার্তা</span> <span class="hps">মনোনীত</span> <span class="hps">যে একটি URL</span><span>।</span> <span class="hps">এই বৈশিষ্ট্য</span> <span class="hps">কনটেক্সট</span> <span class="hps">বা</span> <span class="hps">উক্তি</span>র <span class="hps">রেফারেন্স</span> <span class="hps">ব্যাখ্যা</span> <span class="hps">তথ্য</span> <span class="hps">নির্দেশ করার </span><span class="hps"> উদ্দেশ্যে করা হচ্ছে</span><span>।</span></span></dd> +</dl> + +<h2 id="উদাহরণ"> <span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণ</span></span></h2> + +<pre class="brush: html"><blockquote cite="http://developer.mozilla.org"> + <p>This is a quotation taken from the Mozilla Developer Center.</p> +</blockquote> +</pre> + +<p> <span class="short_text" id="result_box" lang="bn"><span class="hps">এইচ টি এম এল</span> <span class="hps">কোডের </span><span class="hps">আউটপুট</span> <span class="hps">উপরে</span><span>:</span></span></p> + +<blockquote cite="http://developer.mozilla.org"> +<p>This is a quotation taken from the Mozilla Developer Center.</p> +</blockquote> + +<h2 id="Specifications" name="Specifications"><span class="short_text" id="result_box" lang="bn"><span class="hps">বিশেষ উল্লেখ</span></span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ব্রাউজার_উপযুক্ততা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">উপযুক্ততা</span></span></h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="নোট"> <span class="short_text" id="result_box" lang="bn"><span class="hps">নোট</span></span></h2> + +<p> </p> + +<p><span id="result_box" lang="bn"><span class="atn hps"><</span><span>Blockquote</span><span>></span> <span class="hps">ইন্ডেন্ট</span> সি এস এস<span class="hps"> কোড ব্যবহার</span> <span class="atn hps">{</span><span class="atn">{</span><span>cssxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>মার্জিন</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">সম্পত্তি পরিবর্তন করতে</span><span>।</span><br> + <br> + <span class="hps">স্বল্প</span> <span class="hps">কোট</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>Q</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">উপাদান</span> <span class="hps">ব্যবহার করার জন্য।</span></span></p> + +<p> </p> + +<p><span id="result_box" lang="bn"><span class="hps">আরো দেখুন</span><br> + <br> + <span class="hps">ইনলাইন</span> <span class="hps">উদ্ধৃতি</span> <span class="hps">জন্য</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>Q</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">উপাদান</span><span>।</span><br> + <span class="hps">উৎস</span> <span class="hps">উদ্ধৃতির</span> <span class="hps">জন্য</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span><span>}</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>cite</span><span>"</span><span>)</span><span>}</span> <span class="hps">উপাদান</span><span>।</span><br> + <br> + <span class="atn hps">{</span><span class="atn">{</span><span>}}</span> <span class="hps">HTMLRef</span></span></p> 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 +--- +<p>যেসব <strong>HTML এলিমেন্ট</strong>, HTML5 অথবা এর আগের কোন সংস্করণে ছিল, তাদের প্রত্যেককে এই পাতায় লিস্ট করা হয়েছে। যখন কোন এলিমেন্ট কে <em>এঙ্গেল ব্র্যাকেটের</em> ভেতর লেখা হয়, তখন তাদেরকে HTML ট্যাগ বলে, যেমনঃ <code><elementname></code>। কীভাবে একটা HTML পেইজ/ডকুমেন্ট তৈরি করা হবে, আর এই পেইজের কোন অংশে কি ধরণের কন্টেন্ট বসানো হবে তা নির্ধারিত হয় এইসব HTML এলিমেন্ট দিয়েই।</p> +<p>এই পাতায় সব স্ট্যান্ডার্ড HTML ট্যাগকে লিস্ট করা হয়েছে। নতুন HTML5 ট্যাগ আর পুরনো ট্যাগ (স্ট্যান্ডার্ড না এমন ট্যাগ আর বাতিল হয়ে যাওয়া ট্যাগও রয়েছে) সবগুলোকেই লিস্ট করা হয়েছে এখানে। যেসব এলিমেন্ট <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a> এ নতুন এসেছে তাদেরকে প্রায়ই নতুন HTML5 এলিমেন্ট বলা হয়, যদিও আগের স্ট্যান্ডার্ড এলিমেন্টগুলোও HTML5 এ কাজ করে।</p> +<p>In an HTML document, an element is defined by a <em>starting tag</em>. If the element contains other content, it ends with a <em>closing tag</em>, where the element name is preceded by a forward slash: <code></elementname></code>. Some elements don't need to be closed, such as image elements. These are known as <em>void</em> elements. HTML documents contain a tree of these elements. Each is named to represent what it does. For example, the <code><title></code> element represents the title of the document. Below is an alphabetical list of the HTML Elements.</p> +<div class="index widgeted"> + <span id="A">A</span> + <ul> + <li>{{ HTMLElement("a") }}</li> + <li>{{ HTMLElement("abbr") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("acronym") }}</s></li> + <li>{{ HTMLElement("address") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("applet") }}</s></li> + <li>{{ HTMLElement("area") }}</li> + <li class="html5">{{ HTMLElement("article") }}</li> + <li class="html5">{{ HTMLElement("aside") }}</li> + <li class="html5">{{ HTMLElement("audio") }}</li> + </ul> + <span id="B">B</span> + <ul> + <li>{{ HTMLElement("b") }}</li> + <li>{{ HTMLElement("base") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("basefont") }}</s></li> + <li class="html5">{{ HTMLElement("bdi") }}</li> + <li>{{ HTMLElement("bdo") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("bgsound") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("big") }}</s></li> + <li><s class="nonStdElement">{{ HTMLElement("blink") }}</s></li> + <li>{{ HTMLElement("blockquote") }}</li> + <li>{{ HTMLElement("body") }}</li> + <li>{{ HTMLElement("br") }}</li> + <li>{{ HTMLElement("button") }}</li> + </ul> + <span id="C">C</span> + <ul> + <li class="html5">{{ HTMLElement("canvas") }}</li> + <li>{{ HTMLElement("caption") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("center") }}</s></li> + <li>{{ HTMLElement("cite") }}</li> + <li>{{ HTMLElement("code") }}</li> + <li>{{ HTMLElement("col") }}</li> + <li>{{ HTMLElement("colgroup") }}</li> + <li class="html5">{{ HTMLElement("command") }}</li> + </ul> + <span id="D">D</span> + <ul> + <li class="html5">{{ HTMLElement("data") }}</li> + <li class="html5">{{ HTMLElement("datalist") }}</li> + <li>{{ HTMLElement("dd") }}</li> + <li>{{ HTMLElement("del") }}</li> + <li class="html5">{{ HTMLElement("details") }}</li> + <li>{{ HTMLElement("dfn") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("dir") }}</s></li> + <li>{{ HTMLElement("div") }}</li> + <li>{{ HTMLElement("dl") }}</li> + <li>{{ HTMLElement("dt") }}</li> + </ul> + <span id="E">E</span> + <ul> + <li>{{ HTMLElement("em") }}</li> + <li class="html5">{{ HTMLElement("embed") }}</li> + </ul> + <span id="F">F</span> + <ul> + <li>{{ HTMLElement("fieldset") }}</li> + <li>{{ HTMLElement("figcaption") }}</li> + <li class="html5">{{ HTMLElement("figure") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("font") }}</s></li> + <li class="html5">{{ HTMLElement("footer") }}</li> + <li>{{ HTMLElement("form") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("frame") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("frameset") }}</s></li> + </ul> + <span id="G">G H</span> + <ul> + <li>{{ HTMLElement("h1") }}</li> + <li>{{ HTMLElement("h2") }}</li> + <li>{{ HTMLElement("h3") }}</li> + <li>{{ HTMLElement("h4") }}</li> + <li>{{ HTMLElement("h5") }}</li> + <li>{{ HTMLElement("h6") }}</li> + <li>{{ HTMLElement("head") }}</li> + <li class="html5">{{ HTMLElement("header") }}</li> + <li class="html5">{{ HTMLElement("hgroup") }}</li> + <li>{{ HTMLElement("hr") }}</li> + <li>{{ HTMLElement("html") }}</li> + </ul> + <span id="I">I</span> + <ul> + <li>{{ HTMLElement("i") }}</li> + <li>{{ HTMLElement("iframe") }}</li> + <li>{{ HTMLElement("img") }}</li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("ins") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("isindex") }}</s></li> + </ul> + <span id="J">J K</span> + <ul> + <li>{{ HTMLElement("kbd") }}</li> + <li class="html5">{{ HTMLElement("keygen") }}</li> + </ul> + <span id="L">L</span> + <ul> + <li>{{ HTMLElement("label") }}</li> + <li>{{ HTMLElement("legend") }}</li> + <li>{{ HTMLElement("li") }}</li> + <li>{{ HTMLElement("link") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("listing") }}</s></li> + </ul> + <span id="M">M</span> + <ul> + <li class="html5">{{HTMLElement("main")}}</li> + <li>{{ HTMLElement("map") }}</li> + <li class="html5">{{ HTMLElement("mark") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("marquee") }}</s></li> + <li class="html5">{{ HTMLElement("menu") }}</li> + <li>{{ HTMLElement("meta") }}</li> + <li class="html5">{{ HTMLElement("meter") }}</li> + </ul> + <span id="N">N</span> + <ul> + <li class="html5">{{ HTMLElement("nav") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("nobr") }}</s></li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("noframes") }}</s></li> + <li>{{ HTMLElement("noscript") }}</li> + </ul> + <span id="O">O</span> + <ul> + <li>{{ HTMLElement("object") }}</li> + <li>{{ HTMLElement("ol") }}</li> + <li>{{ HTMLElement("optgroup") }}</li> + <li>{{ HTMLElement("option") }}</li> + <li class="html5">{{ HTMLElement("output") }}</li> + </ul> + <span id="P">P</span> + <ul> + <li>{{ HTMLElement("p") }}</li> + <li>{{ HTMLElement("param") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("plaintext") }}</s></li> + <li>{{ HTMLElement("pre") }}</li> + <li class="html5">{{ HTMLElement("progress") }}</li> + </ul> + <span id="Q">Q</span> + <ul> + <li>{{ HTMLElement("q") }}</li> + </ul> + <span id="R">R</span> + <ul> + <li class="html5">{{ HTMLElement("rp") }}</li> + <li class="html5">{{ HTMLElement("rt") }}</li> + <li class="html5">{{ HTMLElement("ruby") }}</li> + </ul> + <span id="S">S</span> + <ul> + <li>{{ HTMLElement("s") }}</li> + <li>{{ HTMLElement("samp") }}</li> + <li>{{ HTMLElement("script") }}</li> + <li class="html5">{{ HTMLElement("section") }}</li> + <li>{{ HTMLElement("select") }}</li> + <li>{{ HTMLElement("small") }}</li> + <li class="html5">{{ HTMLElement("source") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("spacer") }}</s></li> + <li>{{ HTMLElement("span") }}</li> + <li><s class="obsoleteElement deprecatedElement">{{ HTMLElement("strike") }}</s></li> + <li>{{ HTMLElement("strong") }}</li> + <li>{{ HTMLElement("style") }}</li> + <li>{{ HTMLElement("sub") }}</li> + <li class="html5">{{ HTMLElement("summary") }}</li> + <li>{{ HTMLElement("sup") }}</li> + </ul> + <span id="T">T</span> + <ul> + <li>{{ HTMLElement("table") }}</li> + <li>{{ HTMLElement("tbody") }}</li> + <li>{{ HTMLElement("td") }}</li> + <li>{{ HTMLElement("textarea") }}</li> + <li>{{ HTMLElement("tfoot") }}</li> + <li>{{ HTMLElement("th") }}</li> + <li>{{ HTMLElement("thead") }}</li> + <li class="html5">{{ HTMLElement("time") }}</li> + <li>{{ HTMLElement("title") }}</li> + <li>{{ HTMLElement("tr") }}</li> + <li class="html5">{{ HTMLElement("track") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("tt") }}</s></li> + </ul> + <span id="U">U</span> + <ul> + <li>{{ HTMLElement("u") }}</li> + <li>{{ HTMLElement("ul") }}</li> + </ul> + <span id="V">V</span> + <ul> + <li>{{ HTMLElement("var") }}</li> + <li class="html5">{{ HTMLElement("video") }}</li> + </ul> + <span id="W">W</span> + <ul> + <li class="html5">{{ HTMLElement("wbr") }}</li> + </ul> + <span id="X">X Y Z </span> + <ul> + <li><span id="X"><s class="obsoleteElement deprecatedElement">{{ HTMLElement("xmp") }}</s></span></li> + </ul> +</div> +<p>The symbol <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="width: 16px; height: 16px; vertical-align: middle;" title="This element has been added in HTML5"></a> 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.</p> 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: <section> +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 +--- +<h2 id="সারাংশ">সারাংশ</h2> + +<p><em>HTML সেকশন এলিমেন্ট</em> (<code><section></code>) একটি ডকুমেন্ট এর কিছু অংশকে নির্দিষ্ট করে। যেমনঃ শিরোনাম সহ কিছু কন্টেন্ট।</p> + +<div class="note"> +<p><em>ব্যবহার নির্দেশিকাঃ</em></p> + +<ul> + <li>যদি একটি {{HTMLElement("section")}} এর কন্টেন্ট আলাদাভাবে চিহ্নিত করার প্রয়োজন হয়, তাহলে {{HTMLElement("article")}} এলিমেন্ট ব্যবহার করতে পারেন।</li> + <li>সাধারন কন্টেইনার হিসেবে {{HTMLElement("section")}} এলিমেন্ট ব্যবহার করবেন না; সাধারন কন্টেইনার হিসেবে ব্যবহার করার জন্য{{HTMLElement("div")}} এলিমেন্ট রয়েছে। সহজ কথায়, সেকশন শুধু একটি ডকুমেন্ট এর আউটলাইন তৈরিতে ব্যবহার করা যাবে।</li> +</ul> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/bn-BD/docs/Web/HTML/Content_categories">কন্টেন্ট ক্যাটাগরি</a></dfn><a href="/bn-BD/docs/Web/HTML/Content_categories#Flow_content">ফ্লো কন্টেন্ট</a>, <a href="/bn-BD/docs/Web/HTML/Content_categories#Sectioning_content">সেকশনিং কন্টেন্ট</a>, পাল্পেবল কন্টেন্ট।</li> + <li><dfn>অনুমোদিত কন্টেন্ট</dfn> <a href="/bn-BD/docs/Web/HTML/Content_categories#Flow_content">ফ্লো কন্টেন্ট</a></li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>অনুমোদিত প্যারেন্ট এলিমেন্ট সমূহ</dfn> যেকোনো এলিমেন্ট, যা <a href="/bn-BD/docs/Web/HTML/Content_categories#Flow_content">ফ্লো কন্টেন্ট</a> সমর্থন করে। তবে খেয়াল রাখবেন, {{HTMLElement("section")}} এলিমেন্ট কে কখনো {{HTMLElement("address")}} এলিমেন্ট এর ভেতরে ব্যবহার করা যাবে না।</li> + <li><dfn>DOM ইন্টারফেস</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="অ্যাট্রিবিউট_সমূহ">অ্যাট্রিবিউট সমূহ</h2> + +<p>এই এলিমেন্টের মধ্যে শুধু <a href="/bn-BD/docs/Web/HTML/Global_attributes">গ্লোবাল অ্যাট্রিবিউট সমূহ</a> ব্যবহার করা যাবে।</p> + +<h2 id="উদাহরণ">উদাহরণ</h2> + +<pre class="brush: html"><section> + <h1>Heading</h1> + <p>Bunch of awesome content</p> +</section> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ব্রাউজার_কম্প্যাটিবিলিটি">ব্রাউজার কম্প্যাটিবিলিটি</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>ফিচার</th> + <th>ক্রোম</th> + <th>ফায়ারফক্স (গেকো)</th> + <th>ইন্টারনেট এক্সপ্লোরার</th> + <th>অপেরা</th> + <th>সাফারি</th> + </tr> + <tr> + <td>মৌলিক সমর্থন</td> + <td>৫</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>৯.০</td> + <td>১১.১০</td> + <td>৪.১</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>ফিচার</th> + <th>অ্যান্ড্রয়েড</th> + <th>ফায়ারফক্স মোবাইল (গেকো)</th> + <th>ইন্টারনেট এক্সপ্লোরার মোবাইল</th> + <th>অপেরা মোবাইল</th> + <th>সাফারি মোবাইল</th> + </tr> + <tr> + <td>মৌলিক সমর্থন</td> + <td>২.২</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>৯.০</td> + <td>১১.০</td> + <td>৫.০ (iOS ৪.২)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="আরও_দেখুন">আরও দেখুন</h2> + +<ul> + <li>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")}};</li> + <li><a href="/bn-BD/docs/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of an HTML5 document</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> 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: <summary> +slug: Web/HTML/Element/summary +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Element/summary +--- +<p>{{SeeCompatTable}}</p> + +<p> </p> + +<p><span id="result_box" lang="bn"><span class="hps">সংক্ষিপ্ত</span><br> + <br> + <span class="hps">এইচ টি এম এল</span> <span class="hps">সারসংক্ষেপ</span> <span class="hps">উপাদান</span> <span class="atn hps">(</span><span class="atn"><</span><span>সারসংক্ষেপ</span><span>></span><span>)</span> <span class="hps">একটি</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>বিবরণ</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">উপাদান</span> <span class="hps">বিষয়বস্তুর জন্য</span> <span class="hps">একটি</span> <span class="hps">সারসংক্ষেপ</span><span>,</span> <span class="hps">ক্যাপশন</span><span>,</span> <span class="hps">অথবা</span> <span class="hps">লেজেন্ড</span> <span class="hps">হিসেবে</span> <span class="hps">ব্যবহার করা হয়</span><span>।</span><br> + <span class="hps">উল্লেখ্য</span><span>:</span> <span class="atn hps"><</span><span>সারসংক্ষেপ</span><span>></span> <span class="hps">উপাদান</span> <span class="hps">বাদ দেওয়া হয়</span><span>, তাহলে</span> <span class="hps">শিরোনাম</span> <span class="atn hps">"</span><span>বিবরণ</span><span>"</span> <span class="hps">ব্যবহার করা</span> <span class="hps">হবে</span><span>।</span></span></p> + +<h2 id="ব্যবহারের_প্রেক্ষাপট"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্যবহারের</span> <span class="hps">প্রেক্ষাপট</span></span></h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Phrasing content</a> or one element of <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Heading_content" title="en/HTML/Content categories#Heading content">Heading content</a></td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>None, both the start tag and the end tag are mandatory.</td> + </tr> + <tr> + <th scope="row">Permitted parent element</th> + <td>The {{ HTMLElement("details") }} element.</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element">HTML5, section 4.11.2</a></td> + </tr> + </tbody> +</table> + +<h2 id="আরোপ_করা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরোপ করা</span></span></h2> + +<p> <span class="short_text" id="result_box" lang="bn"><span class="hps">এই</span> <span class="hps">উপাদান</span> <span class="hps">শুধুমাত্র</span> <span class="hps">গ্লোবাল</span> <span class="hps">গুণাবলী</span> <span class="hps">রয়েছে</span><span>।</span></span></p> + +<p> </p> + +<p><span id="result_box" lang="bn"><span class="hps">ডি ও এম </span> <span class="hps">ইন্টারফেস</span><br> + <br> + <span class="hps">এই</span> <span class="hps">উপাদান</span> <span class="atn hps">{</span><span class="atn">{</span><span>domxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>HTMLElement</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">ইন্টারফেস এবং কার্যকরী</span><span>।</span></span></p> + +<p> </p> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণ</span></span><br> + <br> + </p> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">সঙ্কলন</span><span>, পরের</span> <span class="hps">লাইন</span> <span class="hps">লিঙ্ক থেকে</span> <span class="hps">বিবরণ</span> <span class="hps">পেতে</span></span></p> + +<details style="color: blue; margin-left: 15px; margin-bottom: 10px;"> </details> + +<p> <span id="result_box" lang="bn"><span class="atn hps"><</span><span>সারসংক্ষেপ</span><span>></span> <span class="hps">উপর</span> <span class="hps">উদাহরণ</span> <span class="hps">জন্য</span> <span class="atn hps">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>বিবরণ</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">পাতাটি দেখুন।</span></span></p> + +<h2 id="Specifications" name="Specifications"> <span class="short_text" id="result_box" lang="bn"><span class="hps">বিশেষ উল্লেখ</span></span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ব্রাউজার_উপযুক্ততা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">উপযুক্ততা</span></span></h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>12</td> + <td>{{ CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko doesn't currently implement this. See {{bug(591737)}}.</p> + +<h2 id="আরো_দেখুন"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো দেখুন</span></span></h2> + +<ul> + <li>{{ HTMLElement("details") }}</li> +</ul> + +<div class="noinclude">{{HTMLRef}}</div> 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 +--- +<p>এইচটিএমএল৫ এর ওয়ার্কিং ড্রাফট, <code><a href="/en-US/docs/Web/API/Document/activeElement">একটিভআলিমেন্ত</a></code> ডোম অ্যাট্রিবিউট এবং <code><a href="/en-US/docs/Web/API/Document/hasFocus">হেজফোকাস()</a></code> ডোম মেথড প্রোগ্রামারকে ইউজার এর কারনে পেজ এর ইন্টারআক্তিভিটিতে আরও ভালো নিয়ন্ত্রণ করার ক্ষমতা দেয়। উদাহরণস্বরূপ, দুইটিকে পরিসংখ্যান এর সাধারণ উদ্দেশে ব্যাবহার করা যায়, একটি পেজ এর কিছু লিংকের ক্লিক সংখ্যা বের করা,একটি এলিমেন্তের উপর ফোকাসের সময় বের করা, এবং আরও অনেক।অতিরিক্ত, আজাক্স টেকনোলজির সাহায্যে, সার্ভারের রিকুস্তের সংখ্যা কমানো যায় যা ইউজার এবং পেজ এর লেআউট এর উপর নির্ভর করে।</p> + +<h2 id="ব্রাউজার_কম্পাতিবিলিটি">ব্রাউজার কম্পাতিবিলিটি</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[১] গিককো ৮.০ তে শুরু {{geckoRelease("8.0")}},ফায়ারফক্স এখন একটি ফোকাস রিং আঁকে <strong>যেকোনো</strong> এলিমেন্ত এর উপর যখন তার তাবিনেক্স ভেলু ০ থেকে বড়, শুধু একটি সীমিত সাবসেট আইটেমস এর পরিবর্তে। এই নিয়মের কিছু বাতিক্রম আছেঃ {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("iframe")}}, {{HTMLElement("frame")}}, {{HTMLElement("body")}}, and {{HTMLElement("html")}}.</p> + +<h2 id="আরও_দেখুন">আরও দেখুন</h2> + +<ul> + <li>{{domxref("document.activeElement")}}</li> + <li>{{domxref("document.hasFocus")}}</li> +</ul> 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 +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p> </p> + +<div class="almost_half_cell" id="gt-res-content"> +<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="bn"><span class="hps"> </span></span><span class="short_text" id="result_box" lang="bn"><span class="hps">অ্যাক্সেস কী</span></span><span lang="bn"> <span class="hps">গ্লোবাল</span> <span class="hps">অ্যাট্রিবিউট</span> <span class="hps">বর্তমান উপাদান</span> <span class="hps">জন্য</span> <span class="hps">একটি</span> <span class="hps">কীবোর্ড</span> <span class="hps">শর্টকাট</span> <span class="hps">জেনারেট করার জন্য</span> <span class="hps">একটি</span> <span class="hps">ইঙ্গিত প্রদান করে</span><span>। </span><span class="hps">এই বৈশিষ্ট্য</span> <span class="hps">অক্ষরের</span> <span class="hps">একটি</span> <span class="hps">স্থান</span> <span class="hps">বিচ্ছিন্ন তালিকা-র</span> <span class="atn hps">(</span><span>এক</span> <span class="hps">একক</span> <span class="hps">ইউনিকোড</span> <span class="hps">কোড</span> <span class="hps">পয়েন্ট</span><span>)</span> <span class="hps">নিয়ে গঠিত</span><span>।</span> <span class="hps">ব্রাউজার</span> <span class="hps">কম্পিউটার কিবোর্ড</span> <span class="hps">লেআউট</span> <span class="hps">যে বিদ্যমান</span> <span class="hps">প্রথমটি</span> <span class="hps">ব্যবহার</span><span>।</span><br> +<br> +<span class="hps"> </span></span><span class="short_text" id="result_box" lang="bn"><span class="hps">অ্যাক্সেস কী </span></span><span lang="bn"><span class="hps">সক্রিয়</span> <span class="hps">অপারেশন</span> <span class="hps">ব্রাউজার</span> <span class="hps">এবং</span> <span class="hps">তার</span> <span class="hps">প্ল্যাটফর্ম</span> <span class="hps">উপর নির্ভর করে।</span></span></div> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th> </th> + <th>Windows</th> + <th>Linux</th> + <th>Mac</th> + </tr> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + <td>On Firefox 14 or newer, <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + On Firefox 13 or older, <kbd>Control</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Internet Explorer</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td colspan="2" rowspan="1">N/A</td> + </tr> + <tr> + <th>Google Chrome</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Safari</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td>N/A</td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera</th> + <td colspan="3" rowspan="1"><kbd>Shift</kbd> + <kbd>Esc</kbd> opens a contents list which are accessible by accesskey, then, can choose an item by pressing <kbd><em>key</em></kbd></td> + </tr> + </tbody> +</table> + +<p> <span id="result_box" lang="bn"><span class="hps">ফায়ারফক্স</span> <span class="hps">ব্যবহারকারীর</span> <span class="hps">পছন্দ প্রয়োজন</span> <span class="hps">মডিফায়ার কী</span> <span class="hps">কাস্টমাইজ</span> <span class="hps">করতে পারেন মনে রাখবেন</span><span>।</span></span></p> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">বিশেষ উল্লেখ</span></span></p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML4.01')}}, several characters can be set as the <code>accesskey</code>. Also, it can be set on any element.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Only supported on {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}</td> + </tr> + </tbody> +</table> + +<h2 id="ব্রাউজার_উপযুক্ততা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">উপযুক্ততা</span></span></h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="আরো_দেখুন"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো দেখুন</span></span></h2> + +<p><span class="short_text" id="result_box" lang="bn"><span class="hps">সকল</span> <span class="hps">গ্লোবাল</span> <span class="hps">গুণাবলী</span><span> </span></span></p> + +<ul> +</ul> 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 +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p><strong>কন্টেন্টেদিতেবল</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">গ্লোবাল আত্রিবিয়ট</a> একটি এনাম্বেরাতেট আত্রিবিয়ুট যা নির্দেশিত করে যে যদি এলিমেন্ত ইউজার দ্বারা এডিটিং করা যায়।তাহলে,ব্রাউজার এডিটিং এর জন্য তার ওয়িদগেট পরিবর্তন করবে। আত্রিবিয়ুটি নিম্নের যেকোনো একটি ভেলুকে নিতে হবেঃ</p> + +<ul> + <li><span style="font-family: courier new;">সত্য</span> অথবা আম্পতি <em>স্ট্রিং </em>,যা নির্দেশিত করে যে এলিমেন্তটি অবশ্যই এডিটেবল;</li> + <li><span style="font-family: courier new;">মিথ্যা</span>,যা নির্দেশিত করে যে এলিমেন্তটি এডিটেবল নয়।</li> +</ul> + +<p>যদি এই আত্রিবিয়ুট সেট না হয়,ইহার দিফোলট ভেলু ইহার প্যারেন্ট<em> এলিমেন্ত থেকে নেয়া হবে</em>।</p> + +<p>এই আত্রিবিয়ুট একটি এনাম্বেরাতেট এবং বুলিয়ান নয়। ইহার মানে যে <span style="font-family: courier new;">সত্য</span>, <span style="font-family: courier new;">মিথ্যা</span> অথবা আম্পটি <em>স্ট্রিং</em> ভেলুর স্পষ্ট ব্যবহার কার্যভার এবং এর মত শর্টহ্যান্ড <code><label contenteditable>Example Label</label> </code>অনুমোদিত নয়।সঠিক ব্যবহার হল <code><label contenteditable="true">Example Label</label></code>।</p> + +<h2 id="স্পেসিফিকেশনস">স্পেসিফিকেশনস</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="ব্রাউজার_কম্প্যাটিবিলিটি">ব্রাউজার কম্প্যাটিবিলিটি</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.9") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="আরও_দেখুন">আরও দেখুন</h2> + +<ul> + <li>সব <a href="/en-US/docs/Web/HTML/Global_attributes">গ্লোবাল আত্রিবুয়তস।</a></li> + <li>{{domxref("HTMLElement.contentEditable")}} এবং {{domxref("HTMLElement.isContentEditable")}}</li> +</ul> 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 +--- +<p>{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> + +<p><span id="result_box" lang="bn"><span class="hps">টেনে আনার যোগ্য</span> <a href="/en-US/docs/">গ্লোবাল অ্যাট্রিবিউট </a><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes"> </a><span class="hps">উপাদান</span> <span class="hps">টেনে নিয়ে যাবে</span> <span class="hps">যে কিনা তার ইঙ্গিত</span> <span class="hps">একটি</span> <span class="hps">গণিত</span> <span class="hps">অ্যাট্রিবিউট</span></span> ব্যবহার করে {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. <span class="short_text" id="result_box" lang="bn"><span class="hps">এটা</span> <span class="hps">নিম্নলিখিত</span> <span class="hps">মান থাকতে পারে;</span></span></p> + +<ul> + <li><span style="font-family: courier new;">সঠিক,এটি নি্দেশ করে যে উপাদানটি টানা হতে পারে</span></li> + <li>ভুল,<span style="font-family: courier new;">এটি নি্দেশ করে যে উপাদানটি টানা হতে পারে না</span></li> +</ul> + +<p>যদি এই আরোপন সেট না হয়, তবে প্রাথমিক মান আপনা-আপনি হয়, <span id="result_box" lang="bn"><span class="hps">আচরণ যার অর্থ</span> <span class="hps">ব্রাউজার</span> <span class="hps">দ্বারা</span> <span class="hps">ডিফল্টরূপে</span> <span class="hps">সংজ্ঞায়িত</span> <span class="hps">এক</span> <span class="hps">হওয়া উচিত</span><span>।</span></span></p> + +<p><span id="result_box" lang="bn"><span class="hps">এই বৈশিষ্ট্য</span>টি <em><span class="hps">গণিত</span></em> <span class="hps">তবে</span> <span class="hps">একটি</span> <em><span class="hps">বুলিয়ান</span></em> <span class="hps">না</span><span>। </span><span class="hps">এই</span> <span class="hps">মান সত্য বা মিথ্যা</span> হোক এর <span class="hps">স্পষ্ট</span> <span class="hps">ব্যবহার</span> <span class="hps">বাধ্যতামূলক, যে</span> <span class="hps">মানে</span> <span class="hps">এবং</span> <span class="atn hps"><</span><span>ট্যাগ</span> <span class="hps">টেনে আনার যোগ্য</span><span>></span> <span class="hps">উদাহরণ</span> <span class="hps">ট্যাগ</span> <span class="atn hps"><</span><span>/</span> <span class="hps">ট্যাগ</span><span>></span> <span class="hps">মত</span> <span class="hps">একটি</span> <span class="hps">সংক্ষিপ্ত লেখার</span> <span class="hps">অনুমতি দেওয়া হয় না।</span> <span class="hps">সঠিক</span> <span class="hps">ব্যবহারটি হলো</span> <span class="atn hps"><</span><span>ট্যাগ</span> <span class="hps">টেনে আনার যোগ্য</span> <span class="hps">=</span> <span class="atn hps">"</span><span>সত্য</span><span>"</span><span>></span> <span class="hps">উদাহরণ</span> <span class="hps">ট্যাগ</span> <span class="atn hps"><</span><span>/</span> <span class="hps">ট্যাগ</span><span>></span> ।</span></p> + +<p><span id="result_box" lang="bn"><span class="hps">ডিফল্টরূপে</span><span>,</span> <span class="hps">শুধুমাত্র</span> <span class="hps">টেক্সট</span><span class="hps">,</span> <span class="hps">ছবি, লিংক নির্বাচন করা হলে </span></span><span lang="bn"><span class="hps">টেনে নেওয়া যাবে।সকল উপাদান এর জন্য, পর্বটি</span></span> <strong>{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} </strong>অবশ্যই<strong> </strong>টেনে নেওয়া এবং ছেঁড়ে দেওয়ার কাজ এর জন্য সেট করতে হবে, যেমন দেখানো হলো <a href="/en-US/docs/DragDrop/Drag_Operations" title="https://developer.mozilla.org/En/DragDrop/Drag_Operations">কম্প্রেহেনসিভ উদাহারন</a>.</p> + +<h2 id="স্পেসিফিকেশন">স্পেসিফিকেশন</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">স্পেসিফিকেশন</th> + <th scope="col">অবস্থা</th> + <th scope="col">মন্তব্য</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>বর্তমান স্ন্যাপশট হতে পরিবর্তন নেই, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>প্রাথমিক সংজ্ঞা এর স্ন্যাপশট {{SpecName('HTML WHATWG')}},</td> + </tr> + </tbody> +</table> + +<h2 id="ব্রাউজার_কম্পিবিলিটি">ব্রাউজার কম্পিবিলিটি</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>বৈশিষ্ট্য</th> + <th>ক্রোম</th> + <th>ফায়ারফক্স (গেছকো)</th> + <th>ইন্টারনেট এক্সপ্লোরার</th> + <th>অপেরা</th> + <th>সাফারি</th> + </tr> + <tr> + <td>প্রাথমিক সহায়তা</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>বৈশিষ্ট্য</th> + <th>এন্ড্রোয়েড</th> + <th>এন্ড্রয়েডের জন্য ক্রোম</th> + <th>ফায়ারফক্স মোবাইল (গেছকো)</th> + <th>আই ই মোবাইল</th> + <th>অপেরা মোবাইল</th> + <th>সাফারি মোবাইল</th> + </tr> + <tr> + <td>প্রাথমিক সহায়তা</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.8.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="আরও_দেখুন">আরও দেখুন</h2> + +<ul> + <li>সব <a href="/en-US/docs/Web/HTML/Global_attributes">গ্লোবাল এট্রিবিউটস</a>.</li> +</ul> 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 +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p> <span id="result_box" lang="bn"><span class="hps">লুকানো</span> <span class="hps">গ্লোবাল</span> <span class="hps">অ্যাট্রিবিউট</span> <span class="hps">উপাদান</span> <span class="hps">এখনো</span> <span class="hps">নয়</span><span>,</span> <span class="hps">অথবা আর</span><span>,</span> <span class="hps">প্রাসঙ্গিক</span> <span class="hps">তা নির্দেশ করে ।একটি</span> <span class="hps">বুলিয়ান</span> <span class="hps">বৈশিষ্ট্য হল.</span> <span class="hps">উদাহরণস্বরূপ, এটি</span> <span class="hps">লগইন</span> <span class="hps">প্রক্রিয়া সম্পন্ন</span> <span class="hps">না হওয়া পর্যন্ত</span> <span class="hps">ব্যবহার করা যাবে না</span> <span class="hps">যে</span> <span class="hps">পৃষ্ঠার</span> <span class="hps">উপাদান</span> <span class="hps">আড়াল</span> <span class="hps">করতে ব্যবহার করা যেতে</span> <span class="hps">পারে</span><span>। </span><span class="hps">ব্রাউজার</span> <span class="hps">যেমন</span> <span class="hps">উপাদান</span> <span class="hps">রেন্ডার</span> <span class="hps">করা হবে না।</span></span></p> + +<p> </p> + +<p><span id="result_box" lang="bn"><span class="hps">এই বৈশিষ্ট্য</span> <span class="hps">বৈধভাবে</span> <span class="hps">দেখানো</span> <span class="hps">যেতে পারে</span> <span class="hps">যে</span> <span class="hps">কন্টেন্ট</span> <span class="hps">আড়াল</span> <span class="hps">করতে</span> <span class="hps">ব্যবহার করা</span> <span class="hps">উচিত নয়</span><span>। </span><span class="hps">এই</span> <span class="hps">একটি</span> <span class="hps">স্টাইলিং</span> <span class="hps">সিদ্ধান্ত</span> <span class="hps">এবং</span> <span class="hps">তাদের</span> <span class="hps">একটি</span> <span class="hps">পুরোপুরি</span> <span class="hps">সঠিক</span> <span class="hps">পাতা</span> <span class="hps">নেতৃত্ব চাই</span> <span class="hps">দেখাচ্ছে</span> <span class="hps">অন্য শৈলী</span> <span class="hps">হিসাবে</span> <span class="hps">উদাহরণস্বরূপ</span><span>, এটি একটি</span> <span class="hps">ট্যাবযুক্ত</span> <span class="hps">ইন্টারফেস</span> <span class="hps">ট্যাব</span> <span class="hps">প্যানেল লুকান</span> <span class="hps">ব্যবহার করা</span> <span class="hps">উচিত নয়</span><span>।</span><br> + <br> + <span class="hps">গোপন উপাদান</span> <span class="hps">অ</span> <span class="hps">লুকানো</span> <span class="hps">উপাদান</span> <span class="hps">এবং</span> <span class="hps">যে</span> <span class="hps">স্ক্রিপ্ট</span> <span class="hps">উপাদান</span> <span class="hps">এখনও</span> <span class="hps">নির্বাহ করতে পারেন</span> <span class="hps">এবং</span> <span class="hps">ফর্ম উপাদান</span> <span class="hps">এখনও</span> <span class="hps">জমা দিতে পারেন</span><span>, যার মানে</span> <span class="hps">সক্রিয়</span> <span class="hps">এখনও</span> <span class="hps">একটি</span> <span class="hps">গোপন</span> <span class="hps">উপাদান</span> <span class="hps">উত্তরপুরুষ</span> <span class="hps">যে উপাদান</span> <span class="hps">থেকে</span> <span class="hps">সংযুক্ত করা উচিত নয়</span><span>।</span></span></p> + +<div class="note"> +<p><strong>Note:</strong> Changing the value of the CSS {{cssxref("display")}} property on an element with the <code>hidden</code> attribute overrides the behavior. For instance, an element styled <code>display: flex</code> will be displayed on screen regardless of the <code>hidden</code> attribute being present.</p> +</div> + +<h2 id="বিশেষ_উল্লেখ"> <span class="short_text" id="result_box" lang="bn"><span class="hps">বিশেষ উল্লেখ</span></span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Defines the suggested default rendering of the <code>hidden</code> attribute using CSS</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ব্রাউজার_উপযুক্ততা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">উপযুক্ততা</span></span></h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>11</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>11</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="আরো_দেখুন"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো দেখুন</span></span></h2> + +<ul> + <li> <span class="short_text" id="result_box" lang="bn"><span class="hps">সকল</span> <span class="hps">গ্লোবাল</span> <span class="hps">গুণাবলী</span><span>।</span></span></li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="summary"> +<p><strong>Global attributes</strong> are attributes common to all HTML elements; they can be used on all elements, though the attributes may have no effect on some elements.</p> +</div> + +<p>Global attributes may be specified on all <a href="/en-US/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. 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 <code><foo hidden>...<foo></code><code>, </code>even though <code><foo></code> is not a valid HTML element.</p> + +<p>In addition to the basic HTML global attributes, the following global attributes also exist:</p> + +<ul> + <li><strong><code>xml:lang</code></strong> and <code><strong>xml:base</strong></code> — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.</li> + <li>The multiple <code><strong><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> attributes, used for improving accessibility.</li> + <li>The event handler attributes: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="Description">Description</h2> + +<dl> + <dt id="attr-accesskey"><code><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt> + <dd>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.</dd> + <dt id="attr-class"><code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code></dt> + <dd>Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the <a href="/En/CSS/Class_selectors" title="https://developer.mozilla.org/En/CSS/Class_selectors">class selectors</a> or functions like the method {{domxref("Document.getElementsByClassName()")}}.</dd> + <dt id="attr-contenteditable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt> + <dd>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: + <ul> + <li><code>true</code> or the <em>empty string</em>, which indicates that the element must be editable;</li> + <li><code>false</code>, which indicates that the element must not be editable.</li> + </ul> + </dd> + <dt id="attr-contextmenu"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt> + <dd>Is the <code><a href="#attr-id"><strong>id</strong></a></code> of an {{HTMLElement("menu")}} to use as the contextual menu for this element.</dd> + <dt id="attr-dataset"><code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt> + <dd>Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the <a href="/en-US/docs/Web/HTML" title="en/HTML">HTML</a> and its <a href="/en-US/docs/Glossary/DOM" title="en/DOM">DOM</a> 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.</dd> + <dt id="attr-dir"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt> + <dd>Is an enumerated attribute indicating the directionality of the element's text. It can have the following values: + <ul> + <li><code>ltr</code>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li> + <li><code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li> + <li><code>auto</code>, 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.</li> + </ul> + </dd> + <dt id="attr-draggable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">draggable</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute indicating whether the element can be dragged, using the <a href="/en-us/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: + <ul> + <li><code>true</code>, which indicates that the element may be dragged</li> + <li><code>false</code>, which indicates that the element may not be dragged.</li> + </ul> + </dd> + <dt id="attr-dropzone"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute indicating what types of content can be dropped on an element, using the <a href="/En-us/docs/DragDrop/Drag_and_Drop" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: + <ul> + <li><code>copy</code>, which indicates that dropping will create a copy of the element that was dragged</li> + <li><code>move</code>, which indicates that the element that was dragged will be moved to this new location.</li> + <li><code>link</code>, will create a link to the dragged data.</li> + </ul> + </dd> + <dt id="attr-hidden"><code><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt> + <dd>Is a Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. 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.</dd> + <dt id="attr-id"><code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code></dt> + <dd>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).</dd> + <dt id="attr-itemid"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt> + <dt id="attr-itemprop"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt> + <dt id="attr-itemref"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt> + <dt id="attr-itemscope"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt> + <dt id="attr-itemtype"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt> + <dd>These attributes are related to the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata">WHATWG HTML Microdata feature</a>.</dd> + <dt id="attr-lang"><code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt> + <dd>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 <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> IETF document. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> has priority over it.</dd> + <dt id="attr-spellcheck"><code><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: + <ul> + <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> + <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> + </ul> + </dd> + <dt id="attr-style"><code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code></dt> + <dd>Contains <a href="/en/CSS" title="en/CSS">CSS</a> 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.</dd> + <dt id="attr-tabindex"><code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt> + <dd>Is an integer attribute indicates if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values: + <ul> + <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li> + <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> + <li>a <em>positive value</em> 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 <a href="#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative position in the document).</li> + </ul> + </dd> + <dt id="attr-title"><code><a href="/en-US/docs/Web/HTML/Global_attributes/title">title</a></code></dt> + <dd>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.</dd> + <dt id="attr-translate"><code><a href="/en-US/docs/Web/HTML/Global_attributes/translate">translate</a></code></dt> + <dd>Is an enumerated attribute that is used to specify whether an element's attribute values and the values of it<code>s</code> {{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: + <ul> + <li>empty string and <code>"yes"</code>, which indicates that the element will be translated.</li> + <li><code>"no</code>", which indicates that the element will not be translated.</li> + </ul> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>From latest snapshot, {{SpecName('HTML5.1')}}, <strong>itemid</strong>, <strong>itemprop</strong>, <strong>itemref</strong>, <strong>itemscope</strong>, and <strong>itemtype</strong> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, <strong>spellcheck</strong>, <strong>draggable</strong>, and <strong>dropzone</strong> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <strong>dir</strong>, <strong>lang</strong>, <strong>style</strong>, <strong>id</strong>, <strong>class</strong>, <strong>tabindex</strong>, <strong>accesskey</strong>, and <strong>title</strong> are now true global attributes.<br> + <strong>xml:lang</strong> which was initially part of XHTML, is now also part of HTML.<br> + <strong>hidden</strong>, <strong>data-*</strong>, <strong>contextmenu</strong>, <strong>contenteditable</strong>, and<strong> <strong>translate</strong></strong> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br> + <strong>class</strong> and <strong>style</strong> 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")}}.<br> + <strong>dir</strong> 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")}}.<br> + <strong>id</strong> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <strong>lang</strong> 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")}}.<br> + <strong>tabindex</strong> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> + <strong>accesskey</strong> is only supported on {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}.<br> + <strong>title</strong> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>accesskey</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>class</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>contenteditable</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>contextmenu</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(9)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>data-*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>dir</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>draggable</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>dropzone</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>hidden</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>id</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>itemid, itemprop, itemref, itemscope, itemtype</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>lang</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>spellcheck</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>style</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>tabindex</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>title</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>accesskey</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>class</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>contenteditable</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>contextmenu</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>data-*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>dir</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>draggable</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>dropzone</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>hidden</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>id</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>itemid, itemprop, itemref, itemscope, itemtype</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>lang</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>spellcheck</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>style</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>tabindex</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>title</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element")}} and {{domxref("GlobalEventHandlers")}} interfaces that allow to query most global attributes.</li> +</ul> 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 +--- +<p style="margin: 0.5em 0px 0px 50px; padding-top: 0px; padding-bottom: 2px; color: rgb(58, 73, 86); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Tahoma, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal;"><span id="result_box" lang="bn"><span class="hps">আমরা</span> <span class="hps">যেমন</span> <span class="hps">অভিনেতা</span><span>,</span> <span class="hps">পরিচালক</span><span>,</span> <span class="hps">মূল্যায়ন</span> <span class="hps">হিসাবে</span> <span class="hps">বৈশিষ্ট্য</span> <span class="hps">মত</span><span>,</span> <span class="hps">পাশ</span> <span class="hps">ইমেজ</span> <span class="hps">বা</span> <span class="hps">তথ্য</span> <span class="hps">সম্পর্কে</span> <span class="hps">সার্চ ইঞ্জিন থেকে</span> <span class="hps">আরো</span> <span class="hps">তথ্য</span> <span class="hps">ট্যাগ</span> <span class="hps">যে কোন ধরণের</span> <span class="hps">দিতে</span> <span class="hps">পারেন</span></span>। <span id="result_box" lang="bn"><span class="hps">একটি আইটেম</span> <span class="hps">এর</span> <span class="hps">বৈশিষ্ট্য</span> <span class="hps">লেবেলে</span> আইটেমপ্রোপ</span><span lang="bn"> <span class="hps">অ্যাট্রিবিউট</span> <span class="hps">ব্যবহার</span></span><code>।</code> <span class="short_text" id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ</span><span>,</span> <span class="hps">একটি সিনেমা</span> <span class="hps">পরিচালককে</span> <span class="hps">চিহ্নিত করা যাক</span><span>,</span></span><span id="result_box" lang="bn"><span class="hps">পরিচালক</span> <span class="hps">এর</span> <span class="hps">নাম</span> <span class="hps">অন্তর্নিহিত উপাদান</span> <span class="hps">করার</span> আইটেমপ্রোপ <span class="hps">=</span> <span class="atn hps">"</span><span>পরিচালক</span><span>"</span> <span class="hps">যোগ করুন।</span></span></p> + +<p style="margin: 0.5em 0px 0px 50px; padding-top: 0px; padding-bottom: 2px; color: rgb(58, 73, 86); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Tahoma, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal;">এখানে একটি সহজ উদাহরনঃ</p> + +<pre style="font-family: Courier, monospace; font-size: 14.4px; width: auto; padding: 0px 5px 2px 10px; margin: 0.5em 0px 0px 50px; text-align: left; overflow: auto; color: rgb(58, 73, 86); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; text-indent: 0px; text-transform: none; background: rgb(225, 225, 225);"><div itemscope itemtype ="http://schema.org/Movie"> + <h1 <strong>itemprop="name"</strong>>Avatar</h1> + <span>Director: <span <strong>itemprop="director"</strong>>James Cameron</span> (born August 16, 1954)</span> + <span <strong>itemprop="genre"</strong>>Science fiction</span> + <a href="../movies/avatar-theatrical-trailer.html" <strong>itemprop="trailer"</strong>>Trailer</a> +</div></pre> + +<p> </p> + +<p> <span class="short_text" id="result_box" lang="bn"><span class="hps">সংশ্লিষ্ট</span> <span class="hps">বৈশিষ্ট্যাবলী</span> <span class="hps">পড়ুন</span> <span class="hps">উপর</span> <span class="hps">আরও তথ্যের জন্য</span></span> https://schema.org/docs/gs.html</p> 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 +--- +<p><span id="result_box" lang="bn"><span class="hps"> এই বৈশিষ্ট্য</span> <span class="hps">স্ট্রাকচার্ড ডেটা</span> <span class="hps">প্রচার করে।</span><span class="hps">স্কিমা মাইক্রোডাটা আইটেমস্কুপ </span><span class="hps">ব্যবহার করে আপনি</span> <span class="hps">সংশ্লিষ্ট</span> <span class="hps">bloe</span> <span class="hps">অন্তর্ভুক্ত</span> <span class="hps">এইচ টি এম এল</span> <span class="hps">একটি নির্দিষ্ট আইটেম</span> <span class="hps">সম্পর্কে</span> <span class="hps">যে</span> <span class="hps">নির্দিষ্ট করতে পারেন</span><span>।</span></span><br> + <br> + <span lang="bn"><span class="hps">কিন্তু</span> <span class="hps">এটা</span> <span class="hps">একটি আইটেম</span> <span class="hps">এটা</span> <span class="hps">একটি আইটেম</span> <span class="hps">কি ধরনের</span> <span class="hps">উল্লেখ না</span> <span class="hps">আলোচনা হচ্ছে</span> <span class="hps">সেখানে</span> <span class="hps">যে</span> <span class="hps">উল্লেখ করার</span> <span class="hps">উপযোগী</span> <span class="hps">নয়</span><span>।</span> <span class="hps">আমরা</span> <span class="hps">আইটেমস্কুপ </span> <span class="hps">দ্বারা আইটেমস্কুপ অনুসরণ</span> <span class="hps">অ্যাট্রিবিউট ব্যবহার</span> <span class="hps">আইটেমটি</span> <span class="hps">ধরণ উল্লেখ করা যাবে</span><span>।</span><br> + <br> + <span class="hps">এখানে</span> <span class="hps">উদাহরণ</span> <span class="hps">হলঃ</span></span></p> + +<p> </p> + +<pre><div itemscope <strong>itemtype="http://schema.org/Movie"</strong>> + <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></pre> + +<p><span id="result_box" lang="bn"><span class="hps">এই আইটেমস্কুপ</span> <span class="hps">দ্বারা</span> <span class="atn hps"><</span><span>p></span> <span class="hps">...</span> <span class="atn hps"><</span><span>/ p</span><span>></span> <span class="hps">নির্দিষ্ট ধরণ সম্পর্কে</span> <span class="hps">ভিতর</span> <span class="hps">আমরা</span> <span class="hps">এইচ টি এম এল</span> <span class="hps">উল্লেখ</span> <span class="hps">করা হয়</span><span>,</span> <span class="hps">এবং</span> <span class="hps">আমরা</span> <span class="hps">অ্যাট্রিবিউট</span> <span class="hps">আইটেম টাইপের</span> <span class="hps">সঙ্গে</span> <span class="hps">কনটেন্ট এর</span> <span class="hps">ধরণ</span> <span class="hps">উল্লেখ</span> <span class="hps">করা হয়</span><span>।</span><br> + <br> + <span class="hps">আইটেম টাইপ</span> <span class="hps">সম্পর্কে</span> <span class="hps">আরো</span> <span class="hps">বৈশিষ্ট্যাবলী</span></span><span lang="bn"> <span class="hps">পাওয়া যাবে </span><span class="hps">http://schema.org/Thing</span> </span></p> + +<p> </p> 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 +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p class="note">Note: The maximum value for tabIndex should not exceed 32767 per W3C section 17.11.1</p> + +<p><strong>ট্যাবইনডেক্স</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">গোব্যাল আত্রিবিওট </a>একটি পূর্ণসংখ্যা যা নির্দেশিত করে যে,যদি এলিমেন্তটি ফোকাসকে ইনপুতে নিতে পারে (ইহা ফোকাসিত),যদি ইহা সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশন অংশগ্রহন করে, এবং যেকোন অবস্তায়. ইহা সহাস্র ভেলু নিতে পারেঃ</p> + +<ul> + <li><em>একটি নেগাতিভ ভেলু মানে</em> হল এলিমেন্তটি অবশ্যই ফোকাসিত,কিন্তু সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আশা যাবে না;</li> + <li><code>0</code> মানে হল এলিমেন্তটি ফোকাসিত করা যায় এবং সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আসা যায়,কিন্ত ইহার রিলেতিভ অর্ডার প্লাটফর্ম দ্বারা সংজ্ঞায়িত;</li> + <li>একটি <em>পসিতিভ ভেলু যার মানে হল</em><em> </em>ফোকাসিত করা যায় এবং সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশনের মাধ্যমে কাছে আসা যায়,কিন্ত ইহার রিলেতিভ অর্ডার প্লাটফর্ম দ্বারা সংজ্ঞায়িত; সেকএন্তিয়াল <strong>ট্যাবইনডেক্সের</strong> বড়দিত ভেলুকে অনুসরণ করে।যদি অনেক এলিমেন্তস একই ট্যাবইনডেক্স নিজদের মধ্যে ভাগ করে,তাদের রিলেতিভ অর্ডার তাদের রিলেতিভ পসিসনকে অনুসরন করে)।</li> +</ul> + +<p>একটি এলিমেন্তের সাথে <code>0 ভেলু</code>, একটি অকার্যকর ভেলু, অথবা কোন <strong>ট্যাবইনডেক্স</strong> ভেলু সেকএন্তিয়াল কীবোর্ড ন্যাভিগেশন অর্ডারের পসিতিভ<strong> ট্যাবইনডেক্স</strong> এর এলিমেন্তের পরে বসবে না।</p> + +<p>তুমি <a href="/en/Focus_management_in_HTML" title="en/Focus management in HTML">এই প্রবন্ধটি</a> পরযাচলনা করতে পারো ফোকাস মানেজমেন্তের ব্যাপক ব্যাখ্যা দেখার জন্য।</p> + +<h2 id="স্পেসিফিকেসনস">স্পেসিফিকেসনস</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="ব্রাউজার_কম্প্যাটিবিলিটি">ব্রাউজার কম্প্যাটিবিলিটি</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="আরও_দেখুন">আরও দেখুন</h2> + +<ul> + <li>সব <a href="/en-US/docs/Web/HTML/Global_attributes">গোব্যাল আত্রিবিওট</a>.</li> + <li>{{domxref("HTMLElement.tabindex")}} যা প্রতিফলিত করে এই আত্রিবিওটকে।</li> +</ul> 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 +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> + +<p> <span id="result_box" lang="bn"><span class="hps">অনুবাদ</span> <span class="hps">গ্লোবাল</span> <span class="hps">অ্যাট্রিবিউট</span> <span class="hps">একটি উপাদান</span> <span class="hps">এর</span> <span class="hps">অ্যাট্রিবিউট</span> <span class="hps">মান</span> <span class="hps">এবং</span> <span class="hps">তার টেক্সট</span> <span class="hps">নোড</span> <span class="hps">শিশুদের</span> <span class="hps">মান</span> <span class="hps">পৃষ্ঠা</span> <span class="hps">অনূদিত হয়</span> <span class="hps">বা</span> <span class="hps">অপরিবর্তিত</span> <span class="hps">তাদের</span> <span class="hps">ছেড়ে কিনা</span> <span class="hps">যখন</span> <span class="hps">অনুবাদ</span> <span class="hps">করা</span> <span class="hps">হয়</span> <span class="hps">কিনা তা উল্লেখ করতে</span> <span class="hps">ব্যবহৃত</span> <span class="hps">হয়</span> <span class="hps">যে</span> <span class="hps">একটি</span> <span class="hps">গণিত</span> <span class="hps">বৈশিষ্ট্য হল।</span><span class="hps">এটা</span> <span class="hps">নিম্নলিখিত</span> <span class="hps">মান</span> <span class="hps">থাকতে পারে</span><span>:</span></span></p> + +<ul> + <li> <span id="result_box" lang="bn"><span class="hps">পাতা</span> <span class="hps">অনূদিত হয়</span> <span class="hps">যখন</span> <span class="hps">উপাদান</span> <span class="hps">অনুবাদ</span> <span class="hps">করা</span> <span class="hps">উচিত</span> <span class="hps">যা নির্দেশ করে যে</span> <span class="hps">খালি স্ট্রিং</span> <span class="hps">এবং</span> <span class="atn hps">"</span><span>হ্যাঁ</span><span>"</span><span>,</span><span>।</span></span></li> + <li><code> </code><span id="result_box" lang="bn"><span>কোন</span><span>"</span><span>,</span> <span class="hps">উপাদান</span> <span class="hps">অনুবাদ</span> <span class="hps">করা</span> <span class="hps">উচিত নয়</span> <span class="hps">যে</span><span>, যা নির্দেশ করে</span><span>।</span></span></li> +</ul> + +<h2 id="বিশেষ_উল্লেখ"> <span class="short_text" id="result_box" lang="bn"><span class="hps">বিশেষ উল্লেখ</span></span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ব্রাউজার_উপযুক্ততা"> <span class="short_text" id="result_box" lang="bn"><span class="hps">ব্রাউজার</span> <span class="hps">উপযুক্ততা</span></span></h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="আরো_দেখুন"> <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো দেখুন</span></span></h2> + +<ul> + <li><span class="short_text" id="result_box" lang="bn"><span class="hps">সকল</span> <span class="hps">গ্লোবাল</span> <span class="hps">গুণাবলী</span><span>।</span></span></li> + <li><span id="result_box" lang="bn"><span class="hps">এই</span> <span class="hps">বৈশিষ্ট্য</span> <span class="hps">প্রতিফলিত করে</span> <span class="atn hps">{</span><span class="atn">{</span><span>domxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>HTMLElement.translate</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">সম্পত্তি</span><span>।</span></span></li> +</ul> 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 +--- +<div>{{HTMLSidebar}}</div> + +<p><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) হল ওয়েব নির্মানের মূল উপাদান। এটি ওয়েবপেজের বিষয়বস্তুগুলিকে বর্ণনা এবং সংজ্ঞায়িত করে। সাধারণভাবে HTML ছাড়া অন্যান্য প্রযুক্তি একটি ওয়েবপেজের চেহারা / উপস্থাপনা (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>) অথবা কার্যকারিতা (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">Javascript</a>) বর্ণনার জন্য ব্যবহার করা হয়। আপনার ব্রাউজারে প্রদর্শিত সবকিছুই মূলত HTML দিয়ে গঠিত হয়। আরও সঠিকভাবে বলা যায় যে, HTML হল এমন একটি ভাষা যা একটি ওয়েব ডকুমেন্টের গঠন, নক্সা, বিষয়বস্তুর অবস্থান, অভ্যন্তরীণ তথ্য ইত্যাদি নিয়ন্ত্রণ করে।</span></p> + +<p>"হাইপার টেক্সট" বলতে একটি লিঙ্ক বোঝায় যেটা একটি ওয়েব পেজের সঙ্গে আরেকটি ওয়েবপজের সংযোগ স্থাপন করে, হয় একটি একক ওয়েবসাইট মধ্যে বা বিভিন্ন ওয়েবসাইটের মধ্যে। লিঙ্ক গুলি ওয়েবের সবচেয়ে অপরিহার্য অংশ। ইন্টারনেটে বিষয়বস্তু আপলোড এবং তা অন্যান্য ব্যক্তিদের দ্বারা নির্মিত পৃষ্ঠাগুলিতে সংযুক্ত করে আপনি ওয়ার্ল্ড ওয়াইড ওয়েবের একজন সক্রিয় অংশগ্রহণকারী হয়ে যেতে পারেন।</p> + +<p>একটি ওয়েব ব্রাউজারের মধ্যে লেখা, ছবি, এবং অন্যান্য বিষয়বস্তু প্রদর্শনের জন্য এইচটিএমএল "মার্কআপ" ব্যবহার করে। HTML এর মার্কাপগুলি বিশেষ কতগুলি উপাদান দিয়ে অন্তর্ভুক্ত যেমন {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, এবং অনেক কিছু।</p> + +<p>নিচের প্রবন্ধগুলি আপনাকে HTML শিখতে আরও সাহায্য করবে।</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>HTML প্রসঙ্গ</span> + + <p>আমাদের বিস্তীর্ণ <a href="/bn-BD/docs/Web/HTML/Reference">HTML reference</a> অধ্যায়ে HTML এর সকল এলিমেন্ট ও অ্যাট্রিবিউট এর বিস্তারিত তথ্য জানতে পারবেন।</p> + </li> + <li><span>HTML ডেভেলপার নির্দেশিকা</span> + <p>HTML ব্যবহার সম্পর্কিত নিবন্ধ, পরিপূর্ণ উদাহরণ সহ টিউটোরিয়াল ইত্যাদি দেখতে আমাদের <a href="/bn-BD/docs/Web/Guide/HTML">HTML ডেভেলপার গাইড</a> দেখুন।</p> + </li> + <li><span>HTML পরিচিতি</span> + <p>ওয়েব ডেভেলপমেন্ট এর ক্ষেত্রে আপনি যদি নতুন হয়ে থাকেন, তাহলে HTML কি এবং কিভাবে এটা ব্যবহার করতে হবে ইত্যাদি জানার জন্য আমাদের <a href="https://developer.mozilla.org/bn-BD/docs/Web/Guide/HTML/Introduction">পরিচিতি</a> নিবন্ধটি অবশ্যই পড়বেন।</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">রেফারেন্স সমূহ</h2> + +<p>{{SubpagesWithSummaries}}</p> + +<p><span class="alllinks"><a href="/bn-BD/docs/tag/HTML" title="Article tagged: HTML">সব দেখুন...</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">গাইড এবং টিউটোরিয়াল সমূহ</h2> + +<dl> + <dt><a href="/bn-BD/docs/Web/Guide/HTML">এইচটিএমএল ডেভেলপার গাইড</a></dt> + <dd>এমডিএন এর কিছু নিবন্ধ, যাতে কিছু নির্দিষ্ট কৌশল বর্ণনা করা হয়েছে যেগুলো আপনি HTML দিয়ে ওয়েব কন্টেন্ট তৈরি করার সময় ব্যবহার করতে পারেন। এখানে কিছু টিউটোরিয়ালও আছে যেগুলো আপনার কাজে লাগবে।</dd> +</dl> +</div> +</div> +</section> + +<dl> + <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Element">HTML উপাদানসমূহের নির্দেশিকা</a></dt> + <dd class="landingPageList">সকল <a class="glossaryLink" href="/bn-BD/docs/Glossary/HTML">HTML</a> <a class="glossaryLink" href="/bn-BD/docs/Glossary/Element">উপাদানের</a> একটি তালিকা দেখুন।</dd> + <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Reference">HTML প্রসঙ্গ</a></dt> + <dd class="landingPageList">এইচটিএমএল এলিমেন্ট নিয়ে গঠিত, যার প্রত্যেকটি কতগুলি আট্রিবিউট দ্বারা পরিবর্তিত হতে পারে. HTML documents গুলি পরস্পরের সঙ্গে অন্যান্য <a href="/bn-BD/docs/Web/HTML/Link_types">লিঙ্কের</a> মাধ্যমে সংযুক্ত থাকে। </dd> + <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Inline_elements">Inline উপাদানসমূহ</a></dt> + <dd class="landingPageList">এইচটিএমএল এলিমেন্ট সাধারণত "ইনলাইন" উপাদান বা <a href="/bn-BD/docs/Web/HTML/Block-level_elements">"ব্লক-স্তরের"</a> উপাদান। একটি ইনলাইন উপাদান শুধুমাত্র ট্যাগের ভিতরের স্থান অধিকার করে থাকে। </dd> + <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Block-level_elements">Block-level উপাদানসমূহ</a></dt> + <dd class="landingPageList">এইচটিএমএল এলিমেন্ট সাধারণত "ব্লক-স্তরের" উপাদান বা <a href="/bn-BD/docs/HTML/Inline_elements">"ইনলাইন"</a> উপাদান। একটি ব্লক স্তরের উপাদান তার প্যারেন্ট এলিমেন্টের (container) সমস্ত জায়গা জুরে অবস্থান করে, যার ফলে একটি "ব্লক" তৈরি হয়।</dd> + <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/CORS_enabled_image">CORS সক্রিয় ছবি</a></dt> + <dd class="landingPageList">The <code><a href="/bn-BD/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code> attribute, in combination with an appropriate <a class="glossaryLink" href="/bn-BD/docs/Glossary/CORS">CORS</a> 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.</dd> + <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/CORS_settings_attributes">CORS বৈশিষ্ট্যাবলী সেটিংস</a></dt> + <dd class="landingPageList">Some HTML elements that provide support for <a href="/bn-BD/docs/HTTP/Access_control_CORS">CORS</a>, such as {{HTMLElement("img")}} or {{HTMLElement("video")}}, have a <code>crossorigin</code> attribute (<code>crossOrigin</code> property), which lets you configure the CORS requests for the element's fetched data.</dd> + <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Focus_management_in_HTML">HTML এ ফোকাস ব্যবস্থাপনা</a></dt> + <dd class="landingPageList">The <code><a href="/bn-BD/docs/Web/API/Document/activeElement">activeElement</a></code> DOM attribute and the <code><a href="/bn-BD/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM method help you track and control a user's interactions with elements on a webpage.</dd> + <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Global_attributes">সার্বজনীন attributes</a></dt> + <dd class="landingPageList">Global attributes may be specified on all <a href="/bn-BD/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.</dd> + <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Attributes">HTML attribute নির্দেশিকা</a></dt> + <dd class="landingPageList">Elements in HTML have <strong>attributes</strong>. These are additional values that configure the elements or adjust their behavior in various ways.</dd> + <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Link_types">লিংকের ধরন</a></dt> + <dd class="landingPageList">In HTML, various link types can be used to establish and define the relationship between two documents. Link types include <a href="/bn-BD/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/bn-BD/docs/Web/HTML/Element/area"><code><area></code></a>, and <a href="/bn-BD/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> + <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Supported_media_formats">এইচটিএমএল অডিও এবং ভিডিও উপাদান দ্বারা সমর্থিত Media বিন্যাস</a></dt> + <dd class="landingPageList">The <a href="/bn-BD/docs/Web/HTML/Element/audio"><code><audio></code></a> and <a href="/bn-BD/docs/Web/HTML/Element/video"><code><video></code></a> 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.</dd> + <dt class="landingPageList"><a href="/bn-BD/docs/Web/HTML/Using_the_application_cache">Using the application cache</a></dt> + <dd class="landingPageList">Application caching lets web-based applications run offline. You can use the <strong>Application Cache</strong> (<em>AppCache</em>) 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.</dd> +</dl> 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 +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> is an <a href="https://en.wikipedia.org/wiki/Application_Layer">application-layer</a> 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 <a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">client-server model</a>, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a <a href="https://en.wikipedia.org/wiki/Stateless_protocol">stateless protocol</a>, 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 <a href="https://en.wikipedia.org/wiki/Transport_Layer">transport layer</a>, that is, a protocol that doesn't lose messages silently like UDP does. <a href="https://en.wikipedia.org/wiki/Reliable_User_Datagram_Protocol">RUDP</a> — the reliable update of UDP — is a suitable alternative.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Tutorials">Tutorials</h2> + +<p>Learn how to use HTTP with guides and tutorials.</p> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt> + <dd>The basic features of the client-server protocol: what it can do and its intended uses.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Caching">HTTP Cache</a></dt> + <dd>Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Cookies">HTTP Cookies</a></dt> + <dd>How cookies work is defined by <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>. When serving an HTTP request, a server can send a <code>Set-Cookie</code> 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 <code>Cookie</code> request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.</dd> + <dt><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></dt> + <dd><strong>Cross-site HTTP requests</strong> are HTTP requests for resources from a <strong>different domain</strong> than the domain of the resource making the request. For instance, an HTML page from Domain A (<code>http://domaina.example/</code>) makes a request for an image on Domain B (<code>http://domainb.foo/image.jpg</code>) via the <code>img</code> 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.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt> + <dd>A brief description of the changes between the early versions of HTTP, to the modern HTTP/2, the emergent HTTP/3 and beyond.</dd> + <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla web security guidelines</a></dt> + <dd>A collection of tips to help operational teams with creating secure web applications.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt> + <dd>Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Session">A typical HTTP session</a></dt> + <dd>Shows and explains the flow of a usual HTTP session.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt> + <dd>Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Reference">Reference</h2> + +<p>Browse through detailed HTTP reference documentation.</p> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Headers">HTTP Headers</a></dt> + <dd>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 <code>X-</code> prefix; others in an <a href="https://www.iana.org/assignments/message-headers/message-headers.xhtml#perm-headers">IANA registry</a>, whose original content was defined in <a href="https://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a href="https://www.iana.org/assignments/message-headers/message-headers.xhtml#prov-headers">registry of proposed new HTTP message headers</a>.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Methods">HTTP Request Methods</a></dt> + <dd>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")}}.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Response_codes">HTTP Status Response Codes</a></dt> + <dd>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.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP directives</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Tools_resources">Tools & resources</h2> + +<p>Helpful tools and resources for understanding and debugging HTTP.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/en-US/docs/Tools/Network_Monitor">Network monitor</a></dd> + <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt> + <dd> + <p>A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.</p> + </dd> + <dt><a class="external" href="https://redbot.org/">RedBot</a></dt> + <dd>Tools to check your cache-related headers</dd> + <dt><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt> + <dd>A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.</dd> +</dl> +</div> +</div> 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 +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><span class="seoSummary">HTTP response status codes indicate whether a specific <a href="/en-US/docs/Web/HTTP">HTTP</a> request has been successfully completed. Responses are grouped in five classes: </span></p> + +<ol> + <li><span class="seoSummary">Informational responses (<code>100</code>–<code>199</code>),</span></li> + <li><span class="seoSummary">Successful responses (<code>200</code>–<code>299</code>),</span></li> + <li><span class="seoSummary">Redirects (<code>300</code>–<code>399</code>),</span></li> + <li><span class="seoSummary">Client errors (<code>400</code>–<code>499</code>),</span></li> + <li><span class="seoSummary">and Server errors (<code>500</code>–<code>599</code>).</span></li> +</ol> + +<p>The below status codes are defined by <a href="https://tools.ietf.org/html/rfc2616#section-10">section 10 of RFC 2616</a>. You can find an updated specification in <a href="https://tools.ietf.org/html/rfc7231#section-6.5.1">RFC 7231</a>.</p> + +<div class="blockIndicator note"> +<p>If you receive a response that is not in this list, it is a non-standard response, possibly custom to the server's software.</p> +</div> + +<h2 id="Information_responses">Information responses</h2> + +<dl> + <dt>{{HTTPStatus(100, "100 Continue")}}</dt> + <dd>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.</dd> + <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt> + <dd>This code is sent in response to an {{HTTPHeader("Upgrade")}} request header from the client, and indicates the protocol the server is switching to.</dd> + <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt> + <dd>This code indicates that the server has received and is processing the request, but no response is available yet.</dd> + <dt>{{HTTPStatus(103, "103 Early Hints")}}</dt> + <dd>This status code is primarily intended to be used with the {{HTTPHeader("Link")}} header, letting the user agent start <a href="/en-US/docs/Web/HTML/Preloading_content">preloading</a> resources while the server prepares a response.</dd> +</dl> + +<h2 id="Successful_responses">Successful responses</h2> + +<dl> + <dt>{{HTTPStatus(200, "200 OK")}}</dt> + <dd>The request has succeeded. The meaning of the success depends on the HTTP method: + <ul> + <li><code>GET</code>: The resource has been fetched and is transmitted in the message body.</li> + <li><code>HEAD</code>: The entity headers are in the message body.</li> + <li><code>PUT</code> or <code>POST</code>: The resource describing the result of the action is transmitted in the message body.</li> + <li><code>TRACE</code>: The message body contains the request message as received by the server</li> + </ul> + </dd> + <dt>{{HTTPStatus(201, "201 Created")}}</dt> + <dd>The request has succeeded and a new resource has been created as a result. This is typically the response sent after <code>POST</code> requests, or some <code>PUT</code> requests.</dd> + <dt>{{HTTPStatus(202, "202 Accepted")}}</dt> + <dd>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.</dd> + <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt> + <dd>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.</dd> + <dt>{{HTTPStatus(204, "204 No Content")}}</dt> + <dd>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.</dd> + <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt> + <dd>Tells the user-agent to reset the document which sent this request.</dd> + <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt> + <dd>This response code is used when the {{HTTPHeader("Range")}} header is sent from the client to request only part of a resource.</dd> + <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt> + <dd>Conveys information about multiple resources, for situations where multiple status codes might be appropriate.</dd> + <dt>{{HTTPStatus(208, "208 Already Reported")}} ({{Glossary("WebDAV")}})</dt> + <dd>Used inside a <code><dav:propstat></code> response element to avoid repeatedly enumerating the internal members of multiple bindings to the same collection.</dd> + <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt> + <dd>The server has fulfilled a <code>GET</code> request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.</dd> +</dl> + +<h2 id="Redirection_messages">Redirection messages</h2> + +<dl> + <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt> + <dd>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.)</dd> + <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt> + <dd>The URL of the requested resource has been changed permanently. The new URL is given in the response.</dd> + <dt>{{HTTPStatus(302, "302 Found")}}</dt> + <dd>This response code means that the URI of requested resource has been changed <em>temporarily</em>. Further changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd> + <dt>{{HTTPStatus(303, "303 See Other")}}</dt> + <dd>The server sent this response to direct the client to get the requested resource at another URI with a GET request.</dd> + <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt> + <dd>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.</dd> + <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt> + <dd>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.</dd> + <dt><code>306 unused</code></dt> + <dd>This response code is no longer used; it is just reserved. It was used in a previous version of the HTTP/1.1 specification.</dd> + <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt> + <dd>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 <code>302 Found</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: If a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> + <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt> + <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: If a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> +</dl> + +<h2 id="Client_error_responses">Client error responses</h2> + +<dl> + <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt> + <dd>The server could not understand the request due to invalid syntax.</dd> + <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt> + <dd>Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.</dd> + <dt>{{HTTPStatus(402, "402 Payment Required")}} {{experimental_inline}}</dt> + <dd>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.</dd> + <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt> + <dd>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.</dd> + <dt>{{HTTPStatus(404, "404 Not Found")}}</dt> + <dd>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.</dd> + <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt> + <dd>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, <code>GET</code> and <code>HEAD</code>, must never be disabled and should not return this error code.</dd> + <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt> + <dd>This response is sent when the web server, after performing <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content that conforms to the criteria given by the user agent.</dd> + <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt> + <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd> + <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt> + <dd>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.</dd> + <dt>{{HTTPStatus(409, "409 Conflict")}}</dt> + <dd>This response is sent when a request conflicts with the current state of the server.</dd> + <dt>{{HTTPStatus(410, "410 Gone")}}</dt> + <dd>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.</dd> + <dt>{{HTTPStatus(411, "411 Length Required")}}</dt> + <dd>Server rejected the request because the <code>Content-Length</code> header field is not defined and the server requires it.</dd> + <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt> + <dd>The client has indicated preconditions in its headers which the server does not meet.</dd> + <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt> + <dd>Request entity is larger than limits defined by server; the server might close the connection or return an <code>Retry-After</code> header field.</dd> + <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt> + <dd>The URI requested by the client is longer than the server is willing to interpret.</dd> + <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt> + <dd>The media format of the requested data is not supported by the server, so the server is rejecting the request.</dd> + <dt>{{HTTPStatus(416, "416 Range Not Satisfiable")}}</dt> + <dd>The range specified by the <code>Range</code> 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.</dd> + <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt> + <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd> + <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt> + <dd>The server refuses the attempt to brew coffee with a teapot.</dd> + <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt> + <dd>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.</dd> + <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request was well-formed but was unable to be followed due to semantic errors.</dd> + <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt> + <dd>The resource that is being accessed is locked.</dd> + <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request failed due to failure of a previous request.</dd> + <dt>{{HTTPStatus(425, "425 Too Early")}}</dt> + <dd>Indicates that the server is unwilling to risk processing a request that might be replayed.</dd> + <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt> + <dd>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).</dd> + <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt> + <dd>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.</dd> + <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt> + <dd>The user has sent too many requests in a given amount of time ("rate limiting").</dd> + <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt> + <dd>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.</dd> + <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt> + <dd>The user-agent requested a resource that cannot legally be provided, such as a web page censored by a government.</dd> +</dl> + +<h2 id="Server_error_responses">Server error responses</h2> + +<dl> + <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt> + <dd>The server has encountered a situation it doesn't know how to handle.</dd> + <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt> + <dd>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 <code>GET</code> and <code>HEAD</code>.</dd> + <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt> + <dd>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.</dd> + <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt> + <dd>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 <code>Retry-After:</code> 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.</dd> + <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt> + <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd> + <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt> + <dd>The HTTP version used in the request is not supported by the server.</dd> + <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt> + <dd>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.</dd> + <dt>{{HTTPStatus(507, "507 Insufficient Storage")}} ({{Glossary("WebDAV")}})</dt> + <dd>The method could not be performed on the resource because the server is unable to store the representation needed to successfully complete the request.</dd> + <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt> + <dd>The server detected an infinite loop while processing the request.</dd> + <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt> + <dd>Further extensions to the request are required for the server to fulfil it.</dd> + <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt> + <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("http.status")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">List of HTTP status codes on Wikipedia</a></li> + <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li> +</ul> 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 +--- +<p>উন্মুক্ত বা ওপেন ওয়েব ডেভেলপারদের অসাধারণ সকল সুযোগ-সুবিধা প্রদান করছে। এইসকল প্রযুক্তির সম্পূর্ণ সুবিধা আদায় করে নিতে হলে আপনাকে অবশ্যই এদের সম্পর্কে জানতে হবে। নিচে বিভিন্ন ওয়েব প্রযুক্তি সম্পর্কে আমাদের লেখা আর্টিকেলগুলোর লিংক পাওয়া যাবে । </p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="ওয়েব_প্রযুক্তি">ওয়েব প্রযুক্তি</h2> + +<h3 id="প্রারম্ভিক">প্রারম্ভিক</h3> + +<dl> + <dt><a href="/en-US/docs/Web/HTML">HTML</a></dt> + <dd>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ হল ওয়েব পেজের মূল ভাষা, যার মাধ্যমে ওয়েব কন্টেন্টের বর্ণনা এবং নির্ধারণ করা হয়।</dd> + <dt><a href="/en-US/docs/Web/CSS">CSS</a></dt> + <dd>ক্যাসকেডিং স্টাইল শিট ওয়েব কন্টেন্টের ডিজাইন তৈরীতে ব্যবহার করা হয় । </dd> +</dl> + +<h3 id="স্ক্রিপ্টিং">স্ক্রিপ্টিং</h3> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript</a></dt> + <dd>JavaScript হল একটা প্রোগ্রামিং ল্যাঙ্গুয়েজ যেটা ব্রাউজার এর মধ্যে চলে ,যেটা অত্যাধুনিক ইউজার ইন্টারঅ্যাক্টিভ ওয়েবসাইট ও অ্যাপ্লিকেশান তৈরি তে ব্যাবহৃত হয়।</dd> + <dt><a href="/en-US/docs/Web/Reference/API">Web APIs</a></dt> + <dd>Reference material for each of the individual APIs that comprise the Web's powerful scriptability, including the <a href="/en-US/docs/DOM">DOM</a> and all of the related APIs and interfaces you can use to build Web content and apps. + <ul> + <li><a href="/en-US/docs/Web/API" title="/en-US/docs/Web/API">Web API interface reference</a> <span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">- সব ইন্টারফেস, alphabetically আয়োজন করা।</span></li> + <li><a href="/en-US/docs/WebAPI">WebAPI</a> <span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">page যন্ত্র প্রবেশগম্যতা apis আর অন্য apis উপকারি এ্যাপ্লিকেশন-এর জন্য সাজায়</span></li> + </ul> + </dd> +</dl> + +<h3 id="গ্রাফিক্স">গ্রাফিক্স</h3> + +<dl> + <dt><a href="/en-US/docs/SVG">SVG</a></dt> + <dd>আকার পরিবর্তনযোগ্য ভেক্টর গ্রাফিক্স, আপনি তাদের তারা টানা করছি, যা এ নির্বিশেষে আকার সহজে আকার পরিবর্তন করার অনুমতি দেয় ,যাতে ভেক্টর এবং আকার সেট হিসাবে ইমেজ বর্ণনা দেওয়া.</dd> + <dt><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd>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</dd> +</dl> + +<h3 id="অন্যান্য">অন্যান্য</h3> + +<dl> + <dt><a href="/en-US/docs/Web/MathML">MathML</a></dt> + <dd><span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">গাণিতিক markup ভাষা এটা সম্ভব জটিল গাণিতিক সমীকরণ আর বাক্যপ্রকরণ প্রদর্শন করতে বানায়।</span></dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="ধরণ_অনুযায়ী_ডকুমেন্টেশন">ধরণ অনুযায়ী ডকুমেন্টেশন</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide"> ওয়েব উন্নতিকারক নির্দেশিকা</a></dt> + <dd><span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">ওয়েব ডেভেলাপার গাইড উপকারি how-to অভ্যন্তরস্থ বস্তু আপনি ওয়েব প্রযুক্তি আসলে ব্যবহার করেন করতে যা আপনি চান বা করতে দরকার হতে সাহায্য করতে দেয়।</span></dd> + <dt><a href="/en-US/docs/Web/Tutorials">ওয়েব উন্নতিকারকদের জন্য TUTORIALS</a></dt> + <dd><span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">tutorials-এর আপনাকে নিতে একটি লিষ্ট apis, প্রযুক্তি, বা চওড়া বিষয় এলাকা শেখা মধ্য দিয়ে ধাপে ধাপে।</span></dd> + <dt><a href="/en-US/docs/Web/Reference">References</a></dt> + <dd><span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">এই পাতা mdn-এর ওপরে সব বরাত তথ্যে সংযোগ প্রস্তাব করবে, কিন্তু এখনকার জন্য প্রযুক্তি-এর ব্যবহার একটা বাঁদিকের সেকশানে সংযোগ করবে</span></dd> +</dl> + +<h2 id="অন্যান্য_টপিক">অন্যান্য টপিক</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Apps">Developing Web applications</a></dt> + <dd><span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">ওয়েব এ্যাপ্লিকেশন ডেভেলাপার-এর জন্য documentation; ওয়েব অ্যাপ্লিকেশন হচ্ছে সত্য write-once, deploy যেকোথাও এ্যাপস মোবাইল, ডেস্কটপ, আর ফায়ারফক্স os জন্য।</span></dd> + <dt><a href="/en-US/docs/Web/Accessibility">Accessibility</a></dt> + <dd><span style="color: rgb(0, 0, 0); font-family: georgia; font-size: 16px; line-height: normal;">ওয়েব উন্নয়নে accessibility সক্ষম করা যেহেতু অনেক মানুষ as সম্ভব ওয়েব সাইট ব্যবহার করতে, এমনকি যখন ওগুলো মানুষকে-এর সামর্থ্য কিছু পথে সীমাবদ্ধ করা হয় বুঝায়। এখানে আমরা সন্তুষ্ট হতে সহজগম্য তৈরী করতে তথ্য দেই।</span></dd> +</dl> +</div> +</div> + +<p><span class="alllinks"><a href="/bn-BD/docs/tag/Web">সব দেখুন...</a></span></p> + +<p> </p> 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 +--- +<div>{{jsSidebar}}</div> + +<h2 id="ভূমিকা">ভূমিকা</h2> + +<p><a href="/bn-BD/JavaScript" title="/bn-BD/JavaScript">জাভাস্ক্রিপ্ট</a> নিয়ে কেন নতুন করে ভূমিকা দেওয়ার দরকার পরল? কারণ <a href="http://javascript.crockford.com/javascript.html" title="http://javascript.crockford.com/javascript.html">দুনিয়ায় সবচেয়ে ভুল বোঝা প্রোগ্রামিং ভাষা</a> হিসেবে জাভাস্ক্রিপ্টের ব্যাপক খ্যাতি (!) আছে। আমাদের অনেকেই সি/জাভা/পিএইচপি বা অন্য কোন ভাষায় কোডে মোটামোটি ভালভাবে শিখে ফেলার পরে জাভাস্ক্রিপ্ট শিখতে গিয়ে দেখি বাহ, এটা তো সি/জাভা'র মতই! তারপর ভালমত না শিখেই কাজ করতে যাই জাভাস্ক্রিপ্টে... প্রত্যাশা মত ফলাফল আসে না আর এরপর গলা খুলে জাভাস্ক্রিপ্টের গালমন্দ করি। অথচ জাভাস্ক্রিপ্ট অনেক শক্তিশালী - যেটা অনেক সময় ভাষাটির সহজ-সরল চেহারা দেখে বুঝে ওঠা হয় না। ২০০৫ এ আমরা দেখেছি অনেক নামী-দামী জাভাস্ক্রিপ্ট এপ্লিকেশন বাজারে এসেছে - কাজেই জাভাস্ক্রিপ্টে গভীর জ্ঞান রাখা যে যেকোন ডেভেলপারের জন্য আবশ্যকীয় সেটা না বললেও চলবে!</p> + +<p>ভাষাটির ইতিহাস দিয়ে শুরু করা যাক। ১৯৯৫ সালে নেটস্কেপের প্রকৌশলী Brendan Eich জাভাস্ক্রিপ্ট তৈরি করেন, যেটা মুক্তি পায় ১৯৯৬ সালের শুরুর দিকে নেটস্কেপ ২ (ব্রাউজার) এর সাথে। এর নাম দেয়া হয়েছিল LiveScript, কিন্তু মার্কেটিং কৌশলের গ্যাড়াকলে পড়ে দুর্ভাগ্যজনত এর নাম জাভাস্ক্রিপ্ট হয়ে যায়, সান মাইক্রোসিস্টেম এর জাভা ল্যাংগুয়েজের জনপ্রিয়তাকে পুঁজি করার জন্য। জাভা আর জাভাস্ক্রিপ্টের মাঝে তেমন কোন মিল না থাকা সত্ত্বেও সেই থেকে তাই জাভাস্ক্রিপ্ট নামটা নিয়ে বিভ্রান্তি থেকে গেছে।</p> + +<p>মাইক্রোসফট এই প্রোগ্রামিং ভাষার সাথে প্রায় মিলে যায় এরকম একটি ল্যাংগুয়েজ JScript নাম দিয়ে প্রায় ৩ মাস পর ইন্টারনেট এক্সপ্লোরারের সাথে বাজারে নিয়ে আসে। এদিকে নেটস্কেপ <a class="external" href="http://www.ecma-international.org/">Ecma International</a> (স্ট্যান্ডার্ড নির্ধারণ করে এরকম একটি ইউরোপীয়ান সংস্থা) এর কাছে ল্যাংগুয়েজটি উপস্থাপন করে - যার ফলাফল ১৯৯৭ সালে <a href="https://developer.mozilla.org/en/JavaScript/Language_Resources" title="en/ECMAScript">ECMAScript</a> এর প্রথম সংস্করণ হিসেবে বাজারে আসে। ১৯৯৯ সালে এই স্ট্যান্ডার্ডটি আরো উন্নত হয় <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript সংস্করণ ৩</a> হিসেবে - আর সেই থেকে ভাষাটির তেমন কোন বড় পরিবর্তন হয়নি। চতুর্থ সংস্করণটি ভেস্তে যায়, ভাষাটির জটিলতা নিয়ে মতবিরোধের ফলাফল হিসেবে। তবে এই চতুর্থ সংস্করণের অনেক অংশবিশেষ কে ভিত্তি হিসেবে ধরে ২০০৯ সালে নতুন ECMAScript এর পঞ্চম সংস্করণ প্রকাশ করা হয় এবং এর ৬ষ্ঠ মূখ্য সংস্করণ বের হয় ২০১৫ সালের জুনে। </p> + +<p>Specification মোটামোটি অপরিবর্তিত থাকাটা আসলে ডেভেলপারদের জন্য খুশির খবর, কারণ অনেকেই এর মাঝে ভাষাটির সাথে খাপ খাইয়ে নিতে পেরেছেন। আমি বিশেষভাবে, ৩য় সংস্করণের বিশেষ বিশেষ অংশ নিয়ে আলোচনা করব এখন, আর সবার পরিচিত নাম জাভাস্ক্রিপ্ট ব্যাবহার করব।</p> + +<p>অন্য সব প্রোগ্রামিং ভাষার সাথে জাভাস্ক্রিপ্টের বড় অমিল হল - এতে কোন ইনপুট/আউটপুটের বালাই নেই। একটা হোস্ট এনভায়রনমেন্টে চলবে ধরে নিয়েই জাভাস্ক্রিপ্ট ডিজাইন করা হয়েছে - সবচেয়ে পরিচিত হোস্ট এনভায়রনমেন্ট হচ্ছে ব্রাউজার। হোস্ট এনভায়রনমেন্টের দায়িত্ব হচ্ছে জাভাস্ক্রিপ্ট কীভাবে বাইরের জগতের সাথে ডেটা আদান প্রদান বা যোগাযোগ করবে সেটার আয়োজন করা। ব্রাউজার ছাড়াও Adobe Acrobat, Photoshop, Yahoo!'র Widget engine এমনকি সার্ভারে-চলে এরকম পরিবেশেও জাভাস্ক্রিপ্ট ইন্টারপ্রেটারের ব্যবহার দেখা যায়।</p> + +<h2 id="হালকা_পাতলা_ধারণা">হালকা পাতলা ধারণা</h2> + +<p>জাভাস্ক্রিপ্ট একটি ওবজেক্ট-ওরিয়েন্টেড, ডায়নামিক প্রোগ্রামিং ভাষা। এতে আছে ডেটা টাইপ, অপারেটর, গুরুত্বপূর্ণ কিছু অবজেক্ট (যেগুলো সব সময় আপনি ব্যবহার করতে পারবেন) আর ফাংশন বা মেথড। জাভা আর সি প্রোগ্রামিং ভাষা থেকে বেশ কিছু সিন্ট্যাক্স ধার করে নেওয়ায় যারা এসব ভাষায় পারদর্শী তাদের জন্য সুখবর আরকি! তবে অন্য অনেক ভাষার সাথে জাভাস্ক্রিপ্ট এর একটা বড় পার্থক্য হল এতে কোন ক্লাস (class) নেই, বরং "প্রটোটাইপ" নামের নতুন এক ধারণা কে কাজে লাগিয়ে ক্লাস এর কাজ কর্ম করা হয়ে থাকে। আরো একটা বড় পার্থক্য হল জাভাস্ক্রিপ্ট এ যেকোন "ফাংশন" আসলে একেককটি অবজেক্ট! ফাংশনে আপনি কোড রাখতে পারবেন, আরো পারবেন অবজেক্টের মত কোডের এক জায়গা থেকে আরেক জায়গায় পাস (pass) করাতে।</p> + +<p>চলুন শুরু করি যেকোন ভাষার মৌলিক উপাদান নিয়ে: type মানে কী কী রকমের ডেটা থাকতে পারে। জাভাস্ক্রিপ্টে যেসব টাইপ আছে সেগুলো হলঃ</p> + +<ul> + <li><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Number">সংখ্যা (Numbers)</a></li> + <li><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String">স্ট্রিং (Strings</a>)</li> + <li><a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">বুলিয়ান (Boolean)</a></li> + <li><a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function">ফাংশন (Functions)</a></li> + <li><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Object">অবজেক্ট (Objects)</a></li> +</ul> + +<p>... আরও আছে বিশেষ দু'টি টাইপ - "Undefined" আর "Null". আর আছে <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Arrays</a>, যেটি আসলে অবজেক্টের-ই একটি বিশেষ ধরণ। আছে তারিখ নিয়ে কাজকারবারের জন্যে <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Date">Dates</a>, আছে <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp" title="en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp">Regular Expressions</a> - এগুলোও অবজেক্ট। আর আগেই তো বলা হয়েছে জাভাস্ক্রিপ্টে ফাংশন-ও আসলে অবজেক্ট। টাইপ হচ্ছে তাই:</p> + +<ul> + <li>সংখ্যা (Number)</li> + <li>স্ট্রিং (String)</li> + <li>বুলিয়ান</li> + <li>অবজেক্ট + <ul> + <li>ফাংশন</li> + <li>Array</li> + <li>Date</li> + <li>RegExp</li> + </ul> + </li> + <li>Null (নাল)</li> + <li>Undefined (অসংজ্ঞায়িত)</li> +</ul> + +<p>ওহ আর বলতে প্রায় ভুলেই গিয়েছিলাম, ত্রুটি ধরার জন্যে কিছু <a href="/en/JavaScript/Reference/Global_Objects/Error" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Error">Error</a> টাইপও আছে।</p> + +<h2 id="সংখ্যা_বা_Numbers">সংখ্যা বা Numbers</h2> + +<p>সংখ্যা টাইপ জাভাস্ক্রিপ্ট এ "<a href="http://en.wikipedia.org/wiki/Double-precision_floating-point_format" title="http://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-bit format IEEE 754 values</a>", নির্দেশনা অনুসরণ করে। ফলস্বরূপ কিছু বিশেষ ঘটনা ঘটতে পারে। জাভাস্ক্রিপ্টে কোন "Integer" ধরণের টাইপ নাই, তাই অংক কষার সময় মাঝে মাঝে একটু সচেতন থাকবেন C অথবা জাভা ডেভেলপাররা। যেমন ধরুনঃ</p> + +<pre class="eval">0.1 + 0.2 == 0.30000000000000004 +</pre> + +<p>বাস্তবে integer গুলোকে ৩২-বিট ইন্টেজার ধরে নিয়ে কাজ করে জাভাস্ক্রিপ্ট (আর সংরকষণ ও একই ভাবে কিছু ব্রাউজারে করা হয়ে থাকে)। Bit-wise অপারেশন করার সময় এটা মাথায় রাখতে হবে। বিস্তারিত দেখতে পারেন <a href="http://www.hunlock.com/blogs/The_Complete_Javascript_Number_Reference" title="http://www.hunlock.com/blogs/The_Complete_Javascript_Number_Reference">জাভাস্ক্রিপ্টের পূর্ণাঙ্গ Number রেফারেন্স </a>এ।</p> + +<p>অংক কষার জন্য স্ট্যান্ডার্ড সব <a href="/en/JavaScript/Reference/Operators/Arithmetic_Operators" title="/en/JavaScript/Reference/Operators/Arithmetic_Operators">অপারেটর</a> জাভাস্ক্রিপ্টে আছে, যোগ বিয়োগ, ভাগশেষ (modulus) ইত্যাদি নিয়ে কাজ করা যায়। বলতে ভুলে গেছি <a href="/en/JavaScript/Reference/Global_Objects/Math" title="/en/JavaScript/Reference/Global_Objects/Math">Math</a> নামে একটি গ্লোবাল অবজেক্ট আছে গণিত নিয়ে বিশদভাবে কাজকারবার করার জন্যেঃ</p> + +<pre class="brush: js">Math.sin(3.5); +var d = Math.PI * r * r; +</pre> + +<p>বিল্ট-ইন <code><a href="/en/JavaScript/Reference/Global_Objects/parseInt" title="en/Core_JavaScript_1.5_Reference/Global_Functions/parseInt">parseInt()</a></code> ফাংশন ব্যবহার করে কোন string কে integer এ রূপান্তর করতে পারবেন। আর ফাংশনের দ্বিতীয় প্যারামিটার হিসেবে রূপান্তরের ভিত্তি (base) দিতে পারবেন, যদিও এই দ্বিতীয় প্যারামিটার টা ঐচ্ছিক এটা অবশ্যই দেওয়া উচিতঃ</p> + +<pre class="brush: js">> parseInt("123", 10) +123 +> parseInt("010", 10) +10 +</pre> + +<p>২য় প্যারামিটারে base না পাঠালে অপ্রত্যাশিত ফলাফল আসতে পারেঃ</p> + +<pre class="brush: js">> parseInt("010") +8 +</pre> + +<p>এমন ফল এসেছে কারণ শুরুতে 0 দেখে parseInt ফাংশনটা ধরে নিয়েছে ১ম প্যারামিটারে পাঠানো সংখ্যাটা অকটাল ভিত্তিতে আছে।</p> + +<p>বাইনারী সংখ্যাকে দশমিক ভিত্তিতে নিয়ে আসা একদম সোজাঃ</p> + +<pre class="brush: js">> parseInt("11", 2) +3 +</pre> + +<p>একইভাবে <code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseFloat" title="en/JavaScript/Reference/Global Objects/parseFloat">parseFloat()</a> </code>নামেও বিল্ট-ইন ফাংশন আছে যেটা দিয়ে ভগ্নাংশ (floating point number) এ রূপান্তর (parse) করা যায়। তবে parseInt() এর সাথে এর একট অমিল - এটা সবসময় দশমিক ভিত্তিতে আছে ধরে নিয়ে কাজকর্ম করে।</p> + +<p>"+" অপারেটর ব্যবহার করেও কোন মান কে সংখ্যায় রূপান্তর করা যায়। এখানে "+" ইউনারী অপারেটর হিসেবে কাজ করেঃ</p> + +<pre>> + "42" +42 +</pre> + +<p>তবে আপনি যদি সংখ্যা নয়, এমন কোন String কে পার্স করতে যান তাহলে বিশেষ এক ধরণের মান ফাংশনের return ভ্যালু হিসেবে পাওয়া যায় - <code><a href="/en/JavaScript/Reference/Global_Objects/NaN" title="en/Core_JavaScript_1.5_Reference/Global_Properties/NaN">NaN</a></code> ("Not a Number" এর সংক্ষিপ্ত রূপ):</p> + +<pre class="brush: js">> parseInt("hello", 10) +NaN +</pre> + +<p><code>গাণিতিক কোন অপারেটর এর কোন এক </code><code>NaN</code><code> পাশে থাকলেই ফলাফাল হিসেবে </code><code>NaN</code><code> পাওয়া যাবেঃ</code></p> + +<pre class="brush: js">> NaN + 5 +NaN +</pre> + +<p>বিল্ট-ইন <code><a href="/en/JavaScript/Reference/Global_Objects/isNaN" title="en/Core_JavaScript_1.5_Reference/Global_Functions/isNaN">isNaN()</a></code> ফাংশন ব্যবহার করে বের করতে পারবেন কোন কিছু NaN কিনাঃ</p> + +<pre class="brush: js">> isNaN(NaN) +true +</pre> + +<p>জাভাস্ক্রিপ্টে অসীম মান নিয়ে কাজ করার জন্য আছে বিশেষ মান <code><a href="/en/JavaScript/Reference/Global_Objects/Infinity" title="en/Core_JavaScript_1.5_Reference/Global_Properties/Infinity">Infinity</a></code> এবং <code>-Infinity</code>:</p> + +<pre class="brush: js">> 1 / 0 +Infinity +> -1 / 0 +-Infinity +</pre> + +<p>কোন মান <code>Infinity</code>, <code>-Infinity</code> অথবা <code>NaN</code> কিনা টেস্ট করতে পারবনে বিল্ট-ইন <code><a href="/en/JavaScript/Reference/Global_Objects/isFinite" title="en/Core_JavaScript_1.5_Reference/Global_Functions/isFinite">isFinite()</a></code> ফাংশন দিয়েঃ</p> + +<pre class="brush: js">> isFinite(1/0) +false +> isFinite(-Infinity) +false +> isFinite(NaN) +false +</pre> + +<div class="note"><strong>খেয়াল করুনঃ </strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseInt" title="en/JavaScript/Reference/Global Objects/parseInt"><code>parseInt()</code></a> আর <code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseFloat" title="en/JavaScript/Reference/Global Objects/parseFloat">parseFloat()</a></code> ফাংশন দুইটি আপনার দেয়া প্যারামিটারকে ততক্ষণ পার্স করতে থাকবে যতক্ষণ না এটি প্যারামিটারে এমন কোন অক্ষর (character) পাচ্ছে যেটা কিনা অবৈধ (মানে যে ভিত্তিতে বা base থেকে রূপান্তর করা হচ্ছে সেই ভিত্তিতে এই অক্ষরটি থাকতে পারে না)। ফাংশনদুটি এই প্রথম অবৈধ অক্ষর এর আগ পর্যন্ত পার্স করে রিটার্ন করবে। তবে, "+" অপারেটর টি অন্যরকম, প্যারামিটারে কোন অবৈধ ক্যারেকটার থাকলে এটা সোজাসাপটা NaN রিটার্ন করে। ব্যাপারটা ভাল মত বুঝার জন্যে "10.2abc" এটাকে দুইটা ফাংশন দিয়ে পার্স করার কোড লিখে দেখুন!</div> + +<h2 id="স্ট্রিং">স্ট্রিং</h2> + +<p>জাভাস্ক্রিপ্টে স্ট্রিং হল অন্য সব ভাষার মত পরপর অনেকগুলো ক্যারেকটার (character) - আরো ভালো মত বলতে গেলে <em>ইউনিকোড</em> ক্যারেক্টার। প্রতিটা ক্যারেকটারকে ১৬-বিট নাম্বার দিয়ে প্রকাশ করা যায়। তাই যাদের এপ্লিকেশনে বিভিন্ন ভাষাভাষী দেশের জন্যে সাপোর্ট দেয়া লাগবে তারা তালিয়া বাজাতে পারেন!</p> + +<p>আপনার যদি কখনো একটা মাত্র ক্যারেকটার ব্যবহার করার প্রয়োজন পরে, তাহলে ১ লেংথ (length) এর স্ট্রিং ব্যবহার করুন যেহেতু ক্যারেকটার বলে কোন টাইপ জাভাস্ক্রিপ্টে নাই।</p> + +<p>আগেই বলেছি জাভাস্ক্রিপ্টে সব স্ট্রিং ই একেক্টা অব্জেক্ট। কয়টা ক্যারেকটার আছে স্ট্রিং এ জানতে হলে <code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/length" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/length">length</a></code> প্রোপার্টি (অবজেক্ট এর ফাংশন) ব্যবহার করুন।</p> + +<pre class="brush: js">> "hello".length +5 +</pre> + +<p>এই প্রথম আমরা কোন অব্জেক্ট ব্যবহারের কোড দেখলাম! স্ট্রিং অবজেক্ট এর আরো অনেক <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods" title="/En/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods">ফাংশন</a> ও কিন্তু আছেঃ</p> + +<pre class="brush: js">> "hello".charAt(0) +h +> "hello, world".replace("hello", "goodbye") +goodbye, world +> "hello".toUpperCase() +HELLO +</pre> + +<h2 id="অন্যান্য_টাইপ">অন্যান্য টাইপ</h2> + +<p>জাভাস্ক্রিপ্টের একটা অনন্য বৈশিষ্ট্য হল এটা null আর undefined এ দুটি জিনিস এক না। Null হচ্ছে 'অবজেক্ট' টাইপের এক ধরণের অবজেক্ট যেটা কোডার স্বেচ্ছায় কোন ভ্যারিয়েবলে এসাইন (asign) করেছেন। আর undefined হল 'undefined' টাইপের একটা অবজেক্ট - কোন ভ্যারিয়েবল যদি কোন ভ্যালু দিয়ে ইনিশিয়ালাইজ (initialize) করা না হয় (সোজা বাংলায় ভ্যারিয়েবল ডিক্লেয়ার করার সময় বা পরে যদি তাতে "=" চিহ্ন দিয়ে কোন মান এ্যাসাইন না করা হয়) তাহলে সেটা undefined অবস্থায় থাকে। ভ্যারিয়েবল নিয়ে আমরা পরে আলোচনা করব। জাভাস্ক্রিপ্টে ভ্যারিয়েবলে কোন ভ্যালু না দিয়েই ভ্যারিয়েবলটি তৈরি করা যায় - তখন তার ভ্যালু হিসেবে থাকে এই 'undefined'।</p> + +<p>জাভাস্ক্রিপ্টে বুলিয়ান বলে একটা টাইপ আছে, যার মান হতে পারে শুধুমাত্র true অথবা false (এই দুইটাই কি-ওয়ার্ড)। নিচের নিয়ম অনুযায়ী যেকোন ভ্যালু কে বুলিয়ানে কনভার্ট করা যায়ঃ</p> + +<ol> + <li><code>false</code>, <code>0</code>, শূন্য স্ট্রিং (<code>""</code>), <code>NaN</code>, <code>null</code>, এবং <code>undefined</code> এগুলাকে বুলিয়ানে কনভার্ট করলে <code>false পাওয়া যাবে।</code></li> + <li>অন্য যেকোন টাইপের ভ্যলু বুলিয়ানে কনভার্ট করলে <code>true পাওয়া যায়।</code></li> +</ol> + +<p><code>Boolean()</code> ফাংশন ব্যবহার করে আপনি এই কনভার্সন করেই ছাড়তে পারেনঃ</p> + +<pre class="brush: js">> Boolean("") +false +> Boolean(234) +true +</pre> + +<p>কিন্তু আমাদের এভাবে explicitly কনভার্ট করতে হবে না, কারণ জাভাস্ক্রিপ্ট যখন কোথাও বুলিয়ান প্রত্যাশা করে কিন্তু অন্য কোন টাইপ পায়, তখন সে চুপিচুপি এই কনভার্ট টি করে নেয়।</p> + +<p>অন্য ভাষার মত বুলিয়ান অপারেটর যেমন && (লজ্যিকাল AND), , <code>||</code> (লজ্যিকাল <em>or</em>), আর <code>!</code> (লজ্যিকাল <em>not</em>) আছে।</p> + +<h2 id="ভ্যারিয়েবল_(চলক!)">ভ্যারিয়েবল (চলক?!)</h2> + +<p><code><a href="/en/JavaScript/Reference/Statements/var" title="en/Core_JavaScript_1.5_Reference/Statements/var">var</a></code> কী-ওয়ার্ড ব্যবহার করে নতুন কোন ভ্যারিয়েবল তৈরি করুনঃ</p> + +<pre class="brush: js">var a; +var name = "simon"; +</pre> + +<p>আগেই বলেছি, ভ্যারিয়েবলে কোন ভ্যালু এসাইন না করলে সেটা <code>undefined</code> টাইপ হয়ে বসে থাকে।</p> + +<p><span style="color: #ff0000;">গুরুত্বপূর্ণঃ</span> অন্যান্য প্রোগ্রামিং ভাষার সাথে বড় একটা পার্থক্য হল জাভাস্ক্রিপ্ট কোডে ব্লক লেভেলে ভ্যারিয়েবলের স্কোপ বলে কিছু নেই। ভ্যারিয়েবল টা যেই ফাংশনে আছে, পুরা ফাংশনে এই ভ্যারিয়েবলের একটাই স্কোপ থাকে। তাই যদি কোন if বা লুপের মধ্যে কোন ভ্যারিয়েবল তৈরি করেন তাহলে পুরা ফাংশনেই সেটার স্কোপ থাকবে।</p> + +<h2 id="অপারেটর">অপারেটর</h2> + +<p>জাভাস্ক্রিপ্টের নিউমেরিক (numeric) অপারেটরগুলো হল <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> আর <code>%</code> - মানে কিনা ভাগশেষ বের করার অপারেটর। <code>= ব্যবহার করে ভ্যারিয়েবলে ভ্যালু দেয়া হয়। জটিল এসাইনমেন্ট অপারেটরও আছে যেমন</code> <code>+=</code> আর <code>-=</code>। এই জটিল অপারেটরগুলোকে ভেঙ্গে এইভাবে কল্পনা করতে পারেনঃ <code>x = x <em>অপারেটর</em> y</code>.</p> + +<pre class="brush: js">x += 5 +x = x + 5 +</pre> + +<p>ভ্যারিয়েবলের ভ্যালু এক বাড়াতে বা কমাতে যথাক্রমে ++ আর -- অপারেটর ব্যবহার করতে পারেন। সি/জাভার মত এগুলোর প্রিফিক্স/পোস্টফিক্স দুটো ফর্ম-ই আছে।</p> + +<p>আর আমরা তো আগেই জেনেছি <a href="/en/JavaScript/Reference/Operators/String_Operators" title="en/Core_JavaScript_1.5_Reference/Operators/String_Operators"><code>+</code> অপারেটর</a> দিয়ে স্ট্রিং জোড়া লাগানো যায় (concatenation)</p> + +<pre class="brush: js">> "hello" + " world" +hello world +</pre> + +<p>আপনি যদি স্ট্রিং কে অন্য কোন সংখ্যা (বা অন্য কোন মান) এর সাথে যোগ করতে যান তাহলে সবকিছু প্রথমে স্ট্রিং এ কনভার্ট করে নেওয়া হয়ঃ</p> + +<pre class="brush: js">> "3" + 4 + 5 +345 +> 3 + 4 + "5" +75 +</pre> + +<p>কোন মানকে স্ট্রিং এ কনভার্ট করার তাই আরেকটা চোরাই বুদ্ধি হচ্ছে ঐ মানের সাথে <em>শূন্য স্ট্রিং</em> ("")যোগ করা।</p> + +<p><a href="/en/JavaScript/Reference/Operators/Comparison_Operators" title="/en/JavaScript/Reference/Operators/Comparison_Operators">তুলনা</a> (Compare) করার জন্যে জাভাস্ক্রিপ্টের কাছে আছে <code><</code>, <code>></code>, <code><=</code> আর <code>>=</code> অপারেটর। এগুলো সংখ্যা আর স্ট্রিং দুইটার বেলাতেই কাজ করে। তবে == অপারেটর ব্যবহার করে দুইটা মান সমান কিনা সেটা চেক করাটা একটু অপ্রত্যাশিত হতে পারে, কারণ == অপারেটরের দুই পাশে দুই ধরণের টাইপের ভ্যালু দিলে জাভাস্ক্রিপ্ট প্রয়োজন মত কনভার্ট করে নেয়ঃ</p> + +<pre class="brush: js">> "dog" == "dog" +true +> 1 == true +true +</pre> + +<p>জাভাস্ক্রিপ্টের এই মাতব্বরী বন্ধ করতে চাইলে === অপারেটর ব্যবহার করুনঃ</p> + +<pre class="brush: js">> 1 === true +false +> true === true +true +</pre> + +<p>আপনি হয়ত ভাবছেন <code>!=</code> আর <code>!==</code> অপারেটেরের কথা - হ্যা এগুলো তো আছেই।</p> + +<p>জাভাস্ক্রিপ্ট দিয়ে <a href="/en/JavaScript/Reference/Operators/Bitwise_Operators" title="/en/JavaScript/Reference/Operators/Bitwise_Operators">বিট-লেভেলে (bitwise) অপারেশন</a> ও করতে পারবেন।</p> + +<h2 id="কন্ট্রোল_স্ট্রাকচার">কন্ট্রোল স্ট্রাকচার</h2> + +<p>C বা জাভাতে ব্যবহার করে আসা if অথবা else জাভাস্ক্রিপ্টেও একইভাবে ব্যবহার করা যাবেঃ</p> + +<pre class="brush: js">var name = "kittens"; +if (name == "puppies") { + name += "!"; +} else if (name == "kittens") { + name += "!!"; +} else { + name = "!" + name; +} +name == "kittens!!" +</pre> + +<p>জাভাস্ক্রিপ্টে while আর do-while লুপ আছে, হুবুহু সি-জাভার মত। যদি চান যে লুপটি অন্ততঃ একবার চালাতেই হবে তাহলে do-while ব্যবহার করুন।</p> + +<pre class="brush: js">while (true) { + // an infinite loop! +} + +var input; +do { + input = get_input(); +} while (inputIsNotValid(input)) +</pre> + +<p>সি-জাভার মত for লুপ ব্যবহার করে এক লাইনেই লুপ কন্ট্রোল করতে পারেনঃ</p> + +<pre class="brush: js">for (var i = 0; i < 5; i++) { + // Will execute 5 times +} +</pre> + +<p>শর্ট-কাটে লজিক প্রয়োগ করতে পারেন && আর || অপারেটরের একটি অন্যরকম ব্যবহার করে। অপারেটর গুলোর ২য় অপারেন্ড কার্যকর (execute) হবে কিনা নির্ভর করে ১ম অপারেন্ডের ওপরঃ</p> + +<pre class="brush: js">var name = o && o.getName(); +</pre> + +<p>অথবা ডিফল্ট মান বসানোর জন্যঃ</p> + +<pre class="brush: js">var name = otherName || "default"; +</pre> + +<p>কন্ডিশনাল এক্সপ্রেশনের জন্য সি-জাভার মত টার্নারী অপারেটর (যেগুলোর অপারেন্ড ৩টি) ব্যবহার করতে পারেনঃ</p> + +<pre class="brush: js">var allowed = (age > 18) ? "yes" : "no"; +</pre> + +<p>একাধিক ব্রাঞ্চের কন্ট্রোল লজিকের জন্যে switch ব্যবহার করতে পারেন। জাভাস্ক্রিপ্টের switch-case স্ট্রিং এর জন্যে কাজ করেঃ</p> + +<pre class="brush: js">switch(action) { + case 'draw': + drawit(); + break; + case 'eat': + eatit(); + break; + default: + donothing(); +} +</pre> + +<p>break না ব্যবহার করলে পরের case এও আপনার কোডের কন্ট্রোল চলে যাবে - এরকম কোডিং সাধারণতঃ করা হয়না। তাই আপনি যদি break ব্যবহার না করেন তাহলে কমেন্টে লিখে রাখুন যাতে কনফিউশন তৈরি না হয়।</p> + +<pre class="brush: js">switch(a) { + case 1: // fallthrough + case 2: + eatit(); + break; + default: + donothing(); +} +</pre> + +<p>default ক্লজটি ঐচ্ছিক। আরেকটি মজার দিক হল switch আর case দু'জায়গাতেই আপনি এক্সপ্রেশন লিখতে পারেন। তুলনা করা হয় === অপারেটর ব্যবহার করেঃ</p> + +<pre class="brush: js">switch(1 + 3) { + case 2 + 2: + yay(); + break; + default: + neverhappens(); +} +</pre> + +<h2 id="অবজেক্ট">অবজেক্ট</h2> + +<p>জাভাস্ক্রিপ্টে অবজেক্ট হচ্ছে এক কথায় name-value pair। নিচে যেগুলো পয়েন্ট করা হয়ছে সেগুলোর সাথে কোন পার্থক্য নেইঃ</p> + +<ul> + <li>Python এর dictionary</li> + <li>Perl আর ruby'র hash</li> + <li>C/C++ এর hashtable</li> + <li>জাভা'র HashMap</li> + <li>PHP'র associative array</li> +</ul> + +<p>এই ডেটা-স্ট্রাকচারটা এত বেশি ব্যবহৃত হয় যে এটা সম্পর্কে নতুন করে বলার সুযোগ কম। যেহেতু জাভাস্ক্রিপ্টে সবকিছুই অবজেক্ট এটা আশা করা স্বাভাবিক যে জাভাস্ক্রিপ্ট প্রোগ্রামে অনেক বেশি হ্যাশটেবিল লুক-আপ হবে... আমরা বেঁচে গেছি কারণ অনেক দ্রুত এই লুক-আপ করা যায়!</p> + +<p>জাভাস্ক্রিপ্ট অবজেক্টের "name" হিসেবে স্ট্রিং ব্যবহার করতে হবে, আর "value" অংশে যা মন চায় ব্যবহার করতে পারবেন। তার মানে ভ্যালু হিসেবে অন্য অবজেক্ট ও রাখতে পারেন। এভাবে যত জটিল চান সেরকম অবজেক্ট-ই তৈরি করতে পারবেন।</p> + +<p>একটা শূণ্য অবজেক্ট ২ভাবে তৈরি করতে পারেনঃ</p> + +<pre class="brush: js">var obj = new Object(); +</pre> + +<p>আরঃ</p> + +<pre class="brush: js">var obj = {}; +</pre> + +<p>ওপরের দুইটা উপায় সমার্থক। নিচের পদ্ধটি-তিকে বলা হয় অবজেক্ট লিটারেল, আর এটি JSON সিন্ট্যাক্সের ও একটি অংশ। তাই নিচের পদ্ধটি-তি যত বেশি ব্যবহার করা যায় ভাল!</p> + +<p>অবজেক্ট তৈরি হয়ে যাওয়ার পর এর প্রোপার্টি (সম্পদ?!) দুইভাবে এক্সেস করতে পারবেনঃ</p> + +<pre class="brush: js">obj.name = "Simon"; +var name = obj.name; +</pre> + +<p>এবং...</p> + +<pre class="brush: js">obj["name"] = "Simon"; +var name = obj["name"]; +</pre> + +<p>দুইটা পদ্ধতি-ই সমার্থক, তবে ২য় পদ্ধটিতে দেখুন, অবজেক্টের name স্ট্রিং হিসেবে দেওয়া হচ্ছে, মানে এই নামটি আমরা ভ্যারিয়েবলে রেখে রানটাইমে দিতে পারি! অবশ্য এই পদ্ধটিতি ব্যবহার করলে কিছু জাভাস্ক্রিপ্ট ইঞ্জিন আর মিনিফায়ার (কোড সংক্ষিপ্ত করে যেসব টুলস) কোড অপ্টিমাইজ করতে পারে না। আবার এই পদ্ধতি ব্যবহার করে <a href="/en/JavaScript/Reference/Reserved_Words" title="/en/JavaScript/Reference/Reserved_Words">সংরক্ষিত name সমূহ</a> গেট-সেট করতে পারেনঃ</p> + +<pre class="brush: js">obj.for = "Simon"; // Syntax error, because 'for' is a reserved word +obj["for"] = "Simon"; // works fine +</pre> + +<p>আগেই দেখানো অবজেক্ট লিটেরাল সিন্ট্যাক্স ব্যবহার করে পুরো অবজেক্ট গোড়াতেই ইনিশিয়ালাইজ করে নিতে পারেনঃ</p> + +<pre class="brush: js">var obj = { + name: "Carrot", + "for": "Max", + details: { + color: "orange", + size: 12 + } +} +</pre> + +<p>অবজেক্টের এট্রিবিউট এক্সেস একের-পর-এক (চেইন) করতে পারেনঃ</p> + +<pre class="brush: js">> obj.details.color +orange +> obj["details"]["size"] +12 +</pre> + +<h2 id="Array">Array</h2> + +<p>জাভাস্ক্রিপ্টের Array আসলে বিশেষ ধরণের অবজেক্ট - রেগুলার অবজেক্টের মতই array কাজ করে বেশিরভাগ সময়ে ( numeric প্রোপার্টি, মানে ০,১,২,... ইন্ডেক্সে থাকা প্রোপার্টি শুধুমাত্র [] সিন্ট্যাক্স দিয়েই এক্সেস করা যাবে)। সব array'র 'length" ম্যাজিক প্রোপার্টি আছে, যার মান হচ্ছেঃ (ওই array'র সর্বোচ্চ ইন্ডেক্স + ১)</p> + +<p>প্রাগৈতিহাসিক(!) নিয়মে array ব্যবহার-পদ্ধতিঃ</p> + +<pre class="brush: js">> var a = new Array(); +> a[0] = "dog"; +> a[1] = "cat"; +> a[2] = "hen"; +> a.length +3 +</pre> + +<p>তবে স্মার্ট এপ্রোচ হচ্ছে <em>array লিটেরাল</em> ব্যবহার করাঃ</p> + +<pre class="brush: js">> var a = ["dog", "cat", "hen"]; +> a.length +3 +</pre> + +<p>সাবধানঃ লিটের্যাল ব্যবহার করে সবশেষের প্রোপার্টির পর কমা রেখে দিলে ব্রাউজার-ভেদে বিভিন্ন অবস্থা তৈরি হতে পারে - তাই সর্বশেষ array element এর পর কমা রেখে দেওয়া চলবে না।</p> + +<p>খেয়াল করুনঃ array.length মানেই যে array তে কয়টা প্রোপার্টি আছে তা কিন্তু সবসময় ঠিক না। নিচের কোড দেখুনঃ</p> + +<pre class="brush: js">> var a = ["dog", "cat", "hen"]; +> a[100] = "fox"; +> a.length +101 +</pre> + +<p>আবারো বলছিঃ length প্রোপার্টি হচ্ছে: (সবথেকে বড় ইন্ডেক্স + ১)</p> + +<p>আপনি যদি এমন কোন প্রোপার্টি নিয়ে কাজ করতে চান যেটির ইন্ডেক্স ভুল, তাহলে 'undefined' পাবেন মান হিসেবে।</p> + +<pre class="brush: js">> typeof a[90] +undefined +</pre> + +<p>ওপরে যা বলা হল তা মাথায় রেখে নিচের কোড দিয়ে array এর সব এলিমেন্ট নিয়ে কাজ করতে পারবেন (iteration):</p> + +<pre class="brush: js">for (var i = 0; i < a.length; i++) { + // Do something with a[i] +} +</pre> + +<p>তবে ওপরের কোডিং টা অত ভাল হল না, কারণ বারবার array.length প্রোপার্টি'র মান খুঁজতে হচ্ছে। নিচের কোড টা বেশি ভাল (কার্যকরী):</p> + +<pre class="brush: js">for (var i = 0, len = a.length; i < len; i++) { + // Do something with a[i] +} +</pre> + +<p>আর নিচেরটা হচ্ছে <em>বস-লেভেলের</em> কোডিং ;-)</p> + +<pre class="brush: js">for (var i = 0, item; item = a[i++];) { + // Do something with item +} +</pre> + +<p>খেয়াল করুনঃ লুপের দুই সেমিকোলনের মাঝের অংশ ভ্যারিয়েবল এসাইনমেন্ট আর false কিনা টেস্টিং দুই-ই করা হচ্ছে। এই লুপ ব্রেক করবে প্রথম "falsy" এলিমেন্ট (যেমন 'undefined') পাওয়া মাত্রই।</p> + +<p>কাজেই, যদি array'র কোন এলিমেন্ট "falsy" হওয়ার সম্ভাবনা থাকে, তাহলে ওপরের তথাকতিত "বস-লেভেল" কোডিং ব্যবহার করা যাবে না। যেমন, কোন array এলিমেন্ট এর মান false হিসেবে গণ্য হলেই (যেমন শূণ্য স্ট্রিং) পরের ভ্যালিড এলিমেন্ট ও কিন্তু আর এক্সেস করা যাবে না। আপনি যদি নিশিচ থাকেন যে array তে কোন "falsy" এলিমেন্ট নেই (যেমন অবজেক্টের array অথবা <a href="/en/DOM" title="en/DOM">DOM</a> নোড ইত্যাদি) তাহলেই ওপরের পদ্ধতি ব্যবহার করুন।</p> + +<p><code><a href="/en/JavaScript/Reference/Statements/for...in" title="en/Core_JavaScript_1.5_Reference/Statements/for...in">for...in</a></code> লুপ ব্যবহার করেও array এলিমেন্টগুলোতে <em>iterate </em>করতে পারবেন। কেউ যদি Array.prototype (পরে আলোচনা করেছি) ব্যবহার করে নতুন নতুন প্রোপার্টি যোগ করেন এরে তে, তাহলে সেগুলোও এই লুপ দিয়ে iterate করা যাবে:</p> + +<pre class="brush: js">for (var i in a) { + // Do something with a[i] +} +</pre> + +<p>Array তে নতুন এলিমেন্ট যোগ করার সবচাইতে নিরাপদ পদ্ধতিঃ</p> + +<pre class="brush: js">a[a.length] = item; // same as a.push(item); +</pre> + +<p>যেহেতু a.length সবসময় এরে এর সর্বোচ্চ ইন্ডেক্স + ১ কাজেই আপনি নিশ্চিত থাকতে পারেন যে আপনি ফাকা স্থানেই নতুন এলিমেন্ট বসাচ্ছেন।</p> + +<p>Array'র সাথে অনেক ফাংশন প্যাকেট করে দেওয়া হয়েছেঃ</p> + +<table style="height: 124px; width: 598px;"> + <thead> + <tr> + <th scope="col">Method name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>a.toString()</code></td> + <td> </td> + </tr> + <tr> + <td><code>a.toLocaleString()</code></td> + <td> </td> + </tr> + <tr> + <td><code>a.concat(item[, itemN])</code></td> + <td>প্রদত্ত আইটেম (এলিমেন্ট) গুলো সহ নতুন একটি Array রিটার্ন করে।</td> + </tr> + <tr> + <td><code>a.join(sep)</code></td> + <td> </td> + </tr> + <tr> + <td><code>a.pop()</code></td> + <td>শেষ এলিমেন্ট-টিকে এরে থেকে মুছে দিয়ে রিটার্ন করে।</td> + </tr> + <tr> + <td><code>a.push(item[, itemN])</code></td> + <td><code>এরে'র শেষে এক/একাধিক আইটেম যোগ করে</code></td> + </tr> + <tr> + <td><code>a.reverse()</code></td> + <td> </td> + </tr> + <tr> + <td><code>a.shift()</code></td> + <td> </td> + </tr> + <tr> + <td><code>a.slice(start, end)</code></td> + <td>একটি সাব-এরে রিটার্ন করে</td> + </tr> + <tr> + <td><code>a.sort([cmpfn])</code></td> + <td>তুলনা করার জন্য একটি ফাংশন প্যারামিটারে দিতে পারেন (ঐচ্ছিক)</td> + </tr> + <tr> + <td><code>a.splice(start, delcount[, itemN])</code></td> + <td>এরে'র আইটেমগুলো মুছে দিয়ে/রিপ্লেস করতে পারবেন।</td> + </tr> + <tr> + <td><code>a.unshift([item])</code></td> + <td>এরে'র শুরুতে আইটেম কে যোগ করে।</td> + </tr> + </tbody> +</table> + +<h2 id="ফাংশন">ফাংশন</h2> + +<p>জাভাস্ক্রিপ্ট ভালোমত শিখতে হলে অবজেক্টের পাশাপাশি ফাংশন সম্পর্কেও ভাল ধারণা থাকা দরকার। নিচে খুবই নিরীহ-দর্শন একটা ফাংশন দেখা যাচ্ছেঃ</p> + +<pre class="brush: js">function add(x, y) { + var total = x + y; + return total; +} +</pre> + +<p>ফাংশনের বেসিক জানার জন্যে এইটুকুই যথেষ্ট। ফাংশনে এক/একাধিক প্যারামিটার/আর্গুমেন্ট পাঠাতে পারেন। ফাংশনের বডিতে যত খুশি স্টেটমেন্ট লিখুন, নিজের ইচ্ছামত "লোকাল" ভ্যারিয়েবল তৈরি করুন। ফাংশনের যেকোন জায়গায় return স্টেটমেন্ট ব্যবহার করতে পারেন - এই স্টেটমেন্টের পরের কোন স্টেটমেন্ট আর কার্যকর হবে না মানে ফাংশন থেকে তখন-ই প্রোগ্রাম বের হয়ে যাবে। return এর পর যেই ভ্যালু দিবেন ফাংশনটি তার caller কে সেই ভ্যালুটি রিটার্ন করবে। return এর পর কোন ভ্যালু না দিলে (অথবা আদৌ কোন রিটার্ন স্টেটমেন্ট ব্যবহার না করলে) জাভাস্ক্রিপ্ট undefined কে রিটার্ন ভ্যালু হিসেবে পাঠিয়ে থাকে।</p> + +<p>আপনি যদি ফাংশন কল করার সময় কোন প্যারামিটারের ভ্যালু না পাঠান, তাহলে 'undefined' ঐ প্যারামিটারের ভ্যালু হিসেবে চলে যাবে ফাংশনের কাছেঃ</p> + +<pre class="brush: js">> add() +NaN // You can't perform addition on undefined +</pre> + +<p>অন্য প্রোগ্রামিং ভাষার সাথে একটুখানি অমিলঃ আপনি চাইলে ফাংশন যতগুলো প্যারামিটার নিয়ে কাজ করে, তার থেকে বেশি প্যারামিটারও পাঠাতে পারেন!</p> + +<pre class="brush: js">> add(2, 3, 4) +5 // added the first two; 4 was ignored +</pre> + +<p>একটু হাস্যকর মনে হলেও, ফাংশনের নিজস্ব <a href="/en/JavaScript/Reference/Functions_and_function_scope/arguments" title="En/Core_JavaScript_1.5_Reference/Functions_and_function_scope/arguments"><code>arguments</code></a> নামের একটা array এর মত ভ্যারিয়েবল আছে - এর এলিমেন্ট হিসেবে ফাংশনে যতগুলো ভ্যালু প্যারামিটার হিসেবে পাঠানো হয়েছে সবগুলোই থাকে। আসুন add ফাংশনটিকে এমনভাবে লিখি যাতে যত খুশি প্যারামিটার পাঠানো হোক না কেন সবগুলোই যোগ করা যায়ঃ</p> + +<p>কিছুটা "আজাইরা" ধাঁচের মনে হলেও জাভাস্ক্রিপ্টে ফাংশগুলোর মধ্যে <a href="/en/JavaScript/Reference/Functions_and_function_scope/arguments" title="En/Core_JavaScript_1.5_Reference/Functions_and_function_scope/arguments"><code>arguments</code></a> নামের একটি ভ্যারিয়েবল আছে, যাতে ফাংশনটিতে পাস করা সকল ভ্যালু থাকে! আসুন ফাংশনটিকে এমনভাবে পরিবর্তন করি যেন তা ইচ্ছেমত আর্গুমেন্ট নিতে পারে!</p> + +<pre class="brush: js">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 +</pre> + +<p>এবার গড় বের করার একটি ফাংশন (ফাংশন নাম্বার ১) লিখে ফেলিঃ</p> + +<pre class="brush: js">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 +</pre> + +<p>এটা কাজের ফাংশন সন্দেহ নাই, তবে নতুন একটা ঝামেলা তৈরি করলঃ avg() ফাংশন কমা-দিয়ে-আলাদা-করা এক গাদা আর্গুমেন্ট নেয় - কিন্তু আপনি যদি আর্গুমেন্ট হিসেবে শুধু একটি array পাঠাতে চান? তাহলে avg() ফাংশনটা এভাবে (ফাংশন নাম্বার ২) লেখা যেতে পারেঃ</p> + +<pre class="brush: js">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 +</pre> + +<p>কিন্তু নতুন করে না লিখে আগের ১-নাম্বার ফাংশনটা-ই ব্যবহার করতে পারলে ভাল হত! এক কাজের জন্য কয়টা ফাংশন লিখব, আর কি কাজ কর্ম নাই নাকি? সৌভাগ্যবশতঃ, জাভাস্ক্রিপ্ট দিয়ে যেকোন ফাংশনের <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply"><code>apply()</code></a> মেথড কল করে (যেহেতু ফাংশন-ও এক ধরণের অবজেক্ট, তাই ফাংশনের-ও মেথড/প্রোপার্টি ইত্যাদি থাকতে পারে!) আর্গুমেন্ট হিসেবে যেকোন array পাঠাতে পারেনঃ</p> + +<pre class="brush: js">> avg.apply(null, [2, 3, 4, 5]) +3.5 +</pre> + +<p>এই apply() মেথডের ২য় প্যারামিটারের ভ্যালুটাই ফাংশনের <a href="/en/JavaScript/Reference/Functions_and_function_scope/arguments" title="En/Core_JavaScript_1.5_Reference/Functions_and_function_scope/arguments"><code>arguments</code></a> হিসেবে ব্যবহৃত হবে। প্রথম আর্গুমেন্টের কাজ কি সেটা পরে বলব। আর হ্যা, এখন তো বুঝতে পারলেন যে ফাংশন-ও জাভাস্ক্রিপ্টে আসলে অবজেক্ট! (প্রমাণিত)</p> + +<p>জাভাস্ক্রিপ্টে <strong>বেওয়ারিশ </strong>(anonymous!) ফাংশন তৈরি করতে পারবেনঃ</p> + +<pre class="brush: js">var avg = function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} +</pre> + +<p>ওপরের "বেওয়ারিশ" ফাংশন আর function avg() এর মাঝে কোন পার্থক্য নাই, অন্ততঃ সিমান্ট্যাকালি। কিন্তু এই anonymous ফাংশন অনেক পাওয়ারফুল - কারণ এভাবে আপনি কোডের যেকোন জায়গায় ফাংশন তৈরি করে নিতে পারেন - যেখানে হয়ত আগে সাদামাটা এক্সপ্রেশন দেওয়া লাগত। যেমন, একটা ট্রিক দেখুনঃ আমরা জানি জাভাস্ক্রিপ্টে "ব্লক" লেভেলে ভ্যারিয়েবলের নতুন কোন স্কোপ নাই, কিন্তু ফাংশন লেভেলে ভ্যারিয়েবলের স্কোপ আছে। এখন যদি আমরা কোন ফাংশনের ভেতর C ল্যাংগুয়েজের মত ব্লক লেভেলে কোন ভ্যারিয়েবলের স্কোপ চাই, তাহলে চট করে একটা বেওয়ারিশ ফাংশন লিখে ফেলতে পারিঃ</p> + +<pre class="brush: js">var a = 1; +var b = 2; +(function() { + var b = 3; // b ভ্যারিয়েবলের নতুন স্কোপ তৈরি করলাম! + a += b; +})(); +a; // 4 +b; // 2 - b এর মান আগেরটাই আছে। +</pre> + +<p>জাভাস্ক্রিপ্টে ফাংশন রিকারসিভলি (কোন ফাংশনের ভেতর নিজেকেই আবার কল করা) কল করতে পারবেন। Tree - সদৃশ ডেটা স্ট্রাকচার নিয়ে কাজ করতে এটা উপকারী। যেমন, <a href="/en/DOM" title="en/DOM">DOM</a> নিয়ে কাজ করার সময় কাজে লাগে।</p> + +<pre class="brush: js">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; +} +</pre> + +<p>অবশ্য এভাবে কাজ করতে গিয়ে anonymous ফাংশন কল করতে গেলে ঝামেলা হবেঃ এনোনিমাস ফাংশনকে রিকার্সিভ কল কিভাবে করবেন? ওদের তো নাম-ই নাই! এই ঝামেলা দূর করতে এসে গেল "named anonymous ফাংশন":</p> + +<pre class="brush: js">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); +</pre> + +<p>এভাবে এনোনিমাস ফাংশনকে দেওয়া নাম শুধুমাত্র ঐ ফাংশনের ভেতরেই কাজ করবে। এভাবে যেমন জাভাস্ক্রিপ্ট ইঞ্জিন অপ্টিমাইজ ভাবে কাজ করতে পারে, সেরকম আপনার কোডও সহজবোধ্য হয়।</p> + +<h2 id="মনের_মত_অবজেক্ট">মনের মত অবজেক্ট</h2> + +<div class="note"><strong>খেয়াল করুন:</strong> জাভাস্ক্রিপ্ট দিয়ে অবজেক্ট-ওরিয়েন্ট প্রোগ্রামিং করতে চাইলে আরো বিস্তারিত আলোচনা দেখুন এখানেঃ <a href="/en/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="/en/JavaScript/Introduction_to_Object-Oriented_JavaScript">জাভাস্ক্রিপ্টে অবজেক্ট-ওরিয়েন্টেডের হাতেখড়ি</a></div> + +<p><em>এই প্যারার টাইটেল নিয়ে একটু মজা করলাম... হেহে। ইংরেজিতে টাইটেল ছিল "Custom Objects" :-P</em></p> + +<p>ক্ল্যাসিক অবজেক্ট অরিয়েন্টেড প্রোগ্রামিং মানেই class নামের কী-ওয়ার্ড... জাভাস্ক্রিপ্ট একটু অন্যরকম। আমরা সাধারণত অবজেক্ট কে ডেটা আর সেইসব ডেটার ওপর কাজ করার জন্য মেথড এর একটা কালেকশনকেই বুঝি। জাভাস্ক্রিপ্টে কোন class স্টেটমেন্ট নাই, জাভাস্ক্রিপ্ট prototype-ভিত্তিক প্রোগ্রামিং ভাষা, তাই সবার এই ব্যাপারটা একটু শিখে নেওয়ার দরকার আছে। জাভাস্ক্রিপ্টে আসলে <strong>ফাংশন-ই</strong> ক্লাস হিসেবে কাজ করে। আসুন একটা person অবজেক্ট চিন্তা করি... যাতে firstname আর lastname দু'টি প্রোপার্টি আছে। এখন, কোন ব্যাক্তির নাম প্রিন্ট করার ২টা পদ্ধতি চিন্তা করিঃ একটা হল আগে firstname প্রিন্ট করব, পরে lastname। আর অন্য পদ্ধতিটা উল্টা, আগে lastname প্রিন্ট করবঃ</p> + +<pre class="brush: js">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 +</pre> + +<p>কিন্তু... ওপরের আজব কোড দেখে যেকারর-ই মেজাজ খারাপ হওয়ার কথা। এভাবে কোড করতে থাকলে শেষপর্যন্ত আপনার স্ক্রিপ্টের global স্কোপেই হাজার হাজার ফাংশন পয়দা হয়ে বসে থাকবে। আমরা চাই অবজেক্টের সদস্য মেথডগুলো শুধু ওই অবজেক্টের স্কোপেই থাকুক। যেহেতু ফাংশন == অবজেক্ট, আমরা নিমেষেই সুন্দর কোডিং করে ফেলতে পারিঃ</p> + +<pre class="brush: js">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 +</pre> + +<p>ওপরের কোডে দেখুন আমরা প্রথমবারের মত '<code><a href="/en/JavaScript/Reference/Operators/this" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator">this</a></code>' কীওয়ার্ড ব্যবহার করলাম। কোন ফাংশনের ভেতর যখন this ব্যবহার করা হয় তখন সেটি ঐ ফাংশনটি'র অবজেক্ট কে রেফার (refer) করে থাকে, যদি কিনা আপনি <a href="/en/JavaScript/Reference/Operators/Member_Operators" title="/en/JavaScript/Reference/Operators/Member_Operators">ডট (.) অথবা ব্রাকেট</a> ব্যবহার করে মেথডটিকে কল করে থাকেন। কিন্তু অন্য কোন ভাবে কল করলে this আসলে global অবজেক্ট কে রেফার করে। এই ব্যাপারটা ঠিকমত না বুঝতে পারলে ভুল করার সম্ভাবনা থাকে। উদাহরণ দেখুনঃ</p> + +<pre class="brush: js">> s = makePerson("Simon", "Willison") +> var fullName = s.fullName; +> fullName() +undefined undefined +</pre> + +<p>যখন আমরা <code>fullName()</code> কল করলাম (s.fullname() না) , '<code>this</code>' আসলে global অবজেক্ট কে রেফার করে। এই গ্লোবাল অবজেক্ট এর যেহেতু <code>first</code> অথবা <code>last</code> নামের কোন প্রোপার্টি নাই, তাই <code>undefined</code> পাওয়া যাচ্ছে।</p> + +<p>নতুনদের জন্য এই বিষয়টা একটু ভ্রান্তিকর মনে হতে পারে... যাই হোক! এই this কী-ওয়ার্ড ব্যবহার করে আমরা makePerson কে আরেকটু ভাল চেহারা দিতে পারিঃ</p> + +<pre class="brush: js">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"); +</pre> + +<p>দেখুন, নতুন কী-ওয়ার্ড '<code><a href="/en/JavaScript/Reference/Operators/new" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new</a></code>' এর ব্যবহার - এই new এর সাথে this এর সম্পর্ক খুবই শক্ত-পোক্ত! কোন ফাংশন কল করার আগে new ব্যবহার করলে যা হয়ঃ একটি নতুন অবজেক্ট তৈরি হয়, এরপর ফাংশনটিকে কল করা হয় যেন this নতুন তৈরি করা অবজেক্ট টিকে রেফার করে থাকে। যেসব ফাংশন কে new কী-ওয়ার্ড দিয়ে কল করা উচিত তাদের নাম সাধারণতঃ বড় হাতের অক্ষরে লেখা হয় প্রথম হরফটি - যাতে ডেভেলপার সহজেই বুঝতে পারে যে ফাংশনটি new কী-ওয়ার্ড দিয়ে কল করতে হবে ।</p> + +<p>দেখতে সুন্দর লাগলেও আসলে এখনো একটা ঝামেলা রয়ে গেছে, যত বার আমরা new ব্যবহার করে makePerson এর অবজেক্ট তৈরি করব, প্রতিটা অবজেক্টের জন্য fullName() আর fullNameRevesed() ফাংশনদুটি'র নতুন কপি তৈরি হবে! কিন্তু আসলে তো উচিত শুধু ক্লাসের সদস্য ভ্যারিয়েবল গুলোর অবজেক্ট-প্রতি কপি তৈরি হওয়া, ফাংশন এর কপি তৈরি করাটা অপ্রয়োজনীয়। প্রতিটা অবজেক্টের জন্য এভাবে মেম্বার ফাংশন তৈরি না করে আসলে প্রচলিত অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিং এর ধারণা অনুযায়ী কোন ক্লাসের সকল অবজেক্ট বা ইন্সট্যান্সের উচিত ক্লাসের সদস্য ফাংশন <strong>শেয়ার </strong>করা।</p> + +<pre class="brush: js">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; +} +</pre> + +<p>এখন প্রতিটা অবজেক্টের জন্য ফাংশন গুলোর নতুন কপি তৈরি না করে ফাংশনগুলো একবার-ই তৈরি করে শেয়ার করা নেওয়া হল। কিন্তু আসলে এর থেকেও ভালভাবে কোড করা সম্ভবঃ</p> + +<pre class="brush: js">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; +} +</pre> + +<p><code>Person.prototype এমন একটি অবজেক্ট যা Person ফাংশনের সব ইন্সট্যান্স বা অবজেক্ট শেয়ার করে। এভাবে "prototype chain" নামের বিশেষ ধরণের লুক-আপ চেইন তৈরি হয়ঃ যখন আপনি Person এর এমন কোন প্রোপার্টি এক্সেস করতে চান যেটা এখনো সেট করা হয়নি, জাভাস্ক্রিপ্ট Person.prototype</code> এ <code>খুজে দেখবে (লুক-আপ) সেখানে এই প্রোপার্টি টি সেট করা আছে কিনা। <strong>সহজ বাংলায়, Person.prototype এ আমরা যে সকল প্রোপার্টি (ফাংশন বা ডেটা) সেট করব সেটা Person এর সকল ইন্সট্যান্স/অবজেক্ট এক্সেস করতে পারবে।</strong></code></p> + +<div class="note"> +<p><em><code>অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিং করার জন্য নতুন রা চোখ বন্ধ করে ওপরে দেখানো প্রটোটাইপ পদ্ধতি ব্যবহার করতে পারেন। ভাল-মন্দ এতগুলো উদাহরণ শুধুমাত্র কন্সেপ্ট পরিষ্কার করার জন্যই দেখানো হল - তবে গুলিয়ে ফেললে ভয় পাওয়ার কিছু নাই।</code></em></p> +</div> + +<p>এই প্রটোটাইপ আসলে অনেক পাওয়ারফুল টুল। জাভাস্ক্রিপ্ট আপনাকে যেকোন কিছুর প্রটোটাইপ যেকোন সময় পরিবর্তন করার সুযোগ দেয়। যার মানে, রানটাইমেই আপনি অবজেক্টে নতুন নতুন মেথড যোগ করতে পারেন! এটাও সি/জাভার সাথে অন্যতম পার্থক্য প্রটোটাইপ-ভিত্তিক ল্যাংগুয়েজ যেমন জাভাস্ক্রিপ্ট এর।</p> + +<pre class="brush: js">> 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 +</pre> + +<p>মজা দেখুনঃ বিল্ট-ইন অবজেক্টের প্রটোটাইপ ও এভাবে পরিবর্তন করা সম্ভব! আসুন আমরা বিল্ট ইন String এ নতুন একটা মেথড যোগ করি স্ট্রিং উল্টে দেওয়ার জন্যঃ</p> + +<pre class="brush: js">> 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 +</pre> + +<p>এই নতুন মেথড স্ট্রিং লিট্যারেল এও কাজ করবেঃ</p> + +<pre class="brush: js">> "This can now be reversed".reversed() +desrever eb won nac sihT +</pre> + +<p>আগে যেমনটা বলেছিলাম, prototype হচ্ছে একটা বিশেষ চেইনের অংশ। এই চেইনের গোড়ায় আছে Object.prototype, যার একটা মেথড হল toString() - এই মেথড টা কল হয় যখন আপনি কোন একটা অবজেক্ট কে স্ট্রিং হিসেবে পেতে চাচ্ছেন (জাভা'র toString() এর মতন)। ডিবাগিং করার জন্য এটা উপকারী হবেঃ</p> + +<pre class="brush: js">> var s = new Person("Simon", "Willison"); +> s +[object Object] +> Person.prototype.toString = function() { + return '<Person: ' + this.fullName() + '>'; +} +> s +<Person: Simon Willison> +</pre> + +<p>মনে আছে আমরা avg.apply() এর প্রথম প্যারামিটারে null পাঠিয়েছিলাম? এই apply() এর প্রথম প্যারামিটারে যেই অবজেক্ট পাঠাবেন, this সেটাকে রেফার করবে। আমরা new এর একটা সহজ-সরল ইমপ্লেমেন্টেশন করতে পারিঃ</p> + +<pre class="brush: js">function trivialNew(constructor) { + var o = {}; // Create an object + constructor.apply(o, arguments); + return o; +} +</pre> + +<p>অবশ্য এটা পুরোপুরি new হিসেবে ব্যবহার করা যাবে না কারণ প্রটোটাইপ চেইন তৈরি করা হয়নি। এরকম কোড সচরাচর দেখা যায়না, তবে চাইলে যে করতে পারবেন সেটা দেখানো হল আরকি।</p> + +<p><a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function/call"><code>call</code></a> নামের apply() এর মতই একটা ফাংশন আছে। পার্থক্য হল, array এর বদলে এটি বিশদ-ভাবে (কমা সেপারেটেড) আর্গুমেন্ট নিয়ে থাকেঃ</p> + +<pre class="brush: js">function lastNameCaps() { + return this.last.toUpperCase(); +} +var s = new Person("Simon", "Willison"); +lastNameCaps.call(s); +// Is the same as: +s.lastNameCaps = lastNameCaps; +s.lastNameCaps(); +</pre> + +<h2 id="ফাংশনের_ভেতরে_ফাংশন_(Inner_functions)">ফাংশনের ভেতরে ফাংশন (Inner functions)</h2> + +<p>জাভাস্ক্রিপ্টে ফাংশনের ভেতরে ফাংশন লেখা যায় এটা আমরা আগে makePerson() উদাহরণে দেখেছি। একটা গুরুত্বপূর্ণ ব্যাপার খেয়াল রাখতে হবে যে জাভাস্ক্রিপ্টে এই Inner ফাংশন তার প্যারেন্ট ফাংশনের স্কোপ এক্সেস করতে পারেঃ</p> + +<pre class="brush: js">function betterExampleNeeded() { + var a = 1; + function oneMoreThanA() { + return a + 1; + } + return oneMoreThanA(); +} +</pre> + +<p>তাই কোড বুঝার আওতায় রাখা আর মেইন্টেইন করা সহজ জাভাস্ক্রিপ্টেঃ যদি কোন ফাংশন (ফাংশন নাম্বার-১) এমন কয়েকটা ফাংশনের ওপর নির্ভর করে যেই ফাংশনগুলা অন্য কোথাও কাজে লাগে না, তাহলে আমরা সেই ফাংশনগুলোকে এই ১-নাম্বার ফাংশনের ইনার (inner) ফাংশন হিসেবে রেখে দিতে পারি। এতে করে, global স্কোপের আওতায় থাকা ফাংশনের সংখ্যা কমবে - এটা সবসময় ভাল অভ্যাস হিসেবে বিবেচনা করা হয়।</p> + +<p>এমন করে আসলে এক গাদা গ্লোবাল ভ্যারিয়েবল তৈরি করে গ্লোবাল স্কোপ নষ্ট করে ফেলার অভ্যাস থেকেও বেচে যাওয়া যায়। গ্লোবাল স্কোপে সুযোগ মত ভ্যারিয়েবল তৈরি করে ফাংশনে ডেটা শেয়ার করার প্রবণতা খুবই লক্ষ্যণীয় - কিন্তু এভাবে কোড করলে একটা সময় পর আর কোড মেইন্টেইন করা যায় না। জাভাস্ক্রিপ্টের inner ফাংশন ব্যবহার করে আমরা যেসব ফাংশন কোন গ্লোবাল ভ্যারিয়েবল শেয়ার করতে চায়, তাদের একটা প্যারেন্ট ফাংশনের inner ফাংশন হিসেবে ঢুকিয়ে দিতে পারি। এভাবে যেখানে প্রয়োজন, সম্পর্কিত ফাংশনগুলোকে couple করে ফেললেও গ্লোবাল স্কোপে ভ্যারিয়েবলের সংখ্যা কমে যাবে। এই অভ্যাস সতর্কতার সাথেই করা উচিত, যদিও এরকম কোড করার সুযোগ থাকাটা খুবই উপকারী।</p> + +<h2 id="ক্লোজার_(Closures)"> ক্লোজার (Closures)</h2> + +<p>ক্লোজার জাভাস্ক্রিপ্টের অফার করা সেরা এবস্ট্রাকশন (abstractions) গুলোর একটি - অবশ্য ঠিকভাবে না বুঝলে কনফিউজিং হতে পারে। এটা আসলে কী?</p> + +<pre class="brush: js">function makeAdder(a) { + return function(b) { + return a + b; + } +} +x = makeAdder(5); +y = makeAdder(20); +x(6) +? +y(7) +? +</pre> + +<p>makeAdder নাম দেখেই বুঝা যাচ্ছে এটা নতুন <strong>নতুন</strong> adder ফাংশন তৈরি করে! এই <strong>নতুন </strong>ফাংশনগুলো কে যখন কিনা আবার কল করা হবে কোন আর্গুমেন্ট দিয়ে, makeAdder ফাংশনে দেয়া আর্গুমেন্টটির সাথে এই নতুন আর্গুমেন্ট কে যোগ করবে।</p> + +<p>এখানে যা হচ্ছে অনেকটাই Inner ফাংশনের সাথে মিলে যায়ঃ একটা ফাংশনকে অন্য কোন ফাংশনের মধ্যে তৈরি করা হয়ছে - ভেতরের ফাংশনটি বাইরের (প্যারেন্ট) ফাংশনের সব ভ্যারিয়েবল এক্সেস করতে পারে। একমাত্র পার্থক্য হচ্ছে বাইরের (outer) ফাংশনটি কিন্তু রিটার্ন করে গিয়েছে, তাই কমন-সেন্স থেকে মনেহতে পারে যে এর লোকাল ভ্যারিয়েবল গুলো আর নেই। কিন্তু আসলে, এগুলো এখনো বহাল তবিয়তেই আছে - না থাকলে adder ফাংশনগুলো তো কাজ করত না! আরো লক্ষ্যণীয় যে makeAdder এর লোকাল ভ্যারিয়েবলের দু'টি আলাদা, ভিন্ন "কপি" দেখা যাচ্ছে - যার একটিতে a ভ্যারিয়েবলের মানে 5 আর অন্যটিতে এই মান 20। তাই, ওপরের ফাংশন কল দু'টির ফলাফল হবে নিম্নরূপঃ</p> + +<pre class="brush: js">x(6) // returns 11 +y(7) // returns 27 +</pre> + +<p>পর্দার আড়ালেঃ যখন জাভাস্ক্রিপ্ট কোন ফাংশন execute করে, ঐ ফাংশনের লোকাল ভ্যারিয়েবল গুলো রাখার জন্যে একটি 'স্কোপ' অবজেক্ট তৈরি করা হয়। এই স্কোপ ভ্যারিয়েবল ইনিশিয়ালাইজ করা হয় ফাংশনে প্যারামিটার হিসেবে যেসব ভ্যারিয়েবল পাঠানো হয়েছিল সেগুলো দ্বারা। এটা গ্লোবাল অবজেক্টের মতই যেখানে সব গ্লোবাল ভ্যারিয়েবল আর ফাংশনগুলো থাকে, কিন্তু দু'টি পার্থক্য সহ। প্রথমতঃ প্রতিবার একটি ফাংশন execute হওয়া শুরু করে একটি নতুন স্কোপ অবজেক্ট তৈরি হয়ে যায়। গ্লোবাল স্কোপ অবজেক্টের সাথে দ্বিতীয় পার্থক্যটি হল, গ্লোবাল স্কোপের প্রোপার্টি সরাসরি এক্সেস করা যায় (যেমন ব্রাউজারের ক্ষেত্রে এই গ্লোবাল অবজেক্ট টি হল window), কিন্তু ফাংশনের স্কোপের ক্ষেত্রে এটি সম্ভব নয়। উদাহরণস্বরূপ বলা যায়, ফাংশনের স্কোপ অবজেক্টের প্রোপার্টিকে iterate করে এক্সেস করা সম্ভব নয়।</p> + +<p>তাই যখন makeAdder কল করা হয়েছিল, একটা স্কোপ অবজেট তৈরি হয়ে গেছে। এই স্কোপ অবজেক্টের একটাই প্রোপার্টিঃ a ভ্যারিয়েবল যেটি কিনা এই ফাংশনের একমাত্র প্যারামিটার। makeAdder তারপর নতুন একটা ফাংশন তৈরি করে রিটার্ন করে। এই মুহূর্তে জাভাস্ক্রিপ্টের গারবেজ কালেকটর (কোন ভ্যারিয়েবল গুলোর আর প্রয়োজন নাই সেগুলো খুজে বের করে এরা যে মেমরি দখল করে রেখেছিল তা অন্য নতুন ভ্যারিয়েবলের জন্য ফ্রি করে দেওয়া'র পদ্ধতি) এর makeAdder এর স্কোপ অবজেট গায়েব করে ফেলার কথা, কিন্তু makeAdder যে ফাংশনটি তৈরি করে রিটার্ন করল তার মাঝে makeAdder এর স্কোপ অবজেক্টের একটা রেফারেন্স থেকে যায়। যে কারণে, যতক্ষণ makeAdder এর রিটার্ন করা ফাংশনের কোন না কোন রেফারেন্স কোডে অবশিষ্ট থাকছে (সহজভাবে যতক্ষণ এটি ব্যবহৃত হচ্ছে), ততক্ষণ makeAdder এর স্কোপ অবজেক্ট-টিও অক্ষত থাকবে।</p> + +<p>স্কোপ অবজেক্টেরা প্রোটোটাইপ চেইনে মত স্কোপ চেইন মেইনটেইন করে।</p> + +<p>ক্লোজার হচ্ছে একট ফাংশন আর এই ফাংশনকে যেই ফাংশন তৈরি করেছিল তার স্কোপ অবজেক্টের একটা সমন্বয় (combination)।</p> + +<p>ক্লোজার আপনাকে স্টেট মনে রাখার একটা সুবিধা দেয় - যে কারণে অবজেক্টের বদলে ক্লোজার ব্যবহার করা যেতে পারে।</p> + +<h3 id="মেমরি_অপচয়_(Memory_leaks)">মেমরি অপচয় (Memory leaks)</h3> + +<p>ক্লোজার ব্যবহারের একটি দুর্ভাগ্যজনক পার্শ্বপ্রতিক্রিয়া হল এটি ইন্টার্নেট এক্সপ্লোরারে মেমরি অপচয় করে। জাভাস্ক্রিপ্টে গার্বেজ কালেকশন পদ্ধতি ব্যবহার করা হয় অবজেক্টের দখল করা মেমরি ফ্রি করার জন্যে। অবজেক্ট যখন তৈরি হয় তখন তাদের মেমরি দেওয়া (allocate) করা হয় - যখন ঐ অবজেক্টের আর কোন রেফারেন্স কোডে অবশিষ্ট থাকে না তখন সেই মেমরি ফ্রি করে দেওয়া হয়। হোস্ট যেসব অবজেক্ট সরবরাহ করে সেগুলো হ্যান্ডেল সেই হোস্ট নিজেই করে।</p> + +<p>ব্রাউজার হোস্টগুলোর বিশাল পরিমাণে অবজেক্ট ম্যানেজ করা লাগে - যেই HTML পাতাটি দেখানো হচ্ছে - তার জন্যে <a href="/en/DOM" title="en/DOM">DOM</a> এর অবজেক্ট গুলো। এই অবজেক্টগুলো ম্যানেজ আর রিকভারি করার দায়িত্ব ব্রাউজারের।</p> + +<p>এই কাজের জন্যে ইন্টারনেট এক্সপ্লোরার (IE) তার নিজের গার্বেজ কালেকশন পদ্ধতি ব্যবহার করে, জাভাস্ক্রিপ্টের পদ্ধতি থেকে যেটি আলাদা। এই দুই এর মাঝে ইন্টারেকশনের জন্যে মেমরি অপচয় হতে পারে।</p> + +<p>IE তে মেমরি অপচয় হবে যখনি কোন জাভাস্ক্রিপ্ট অবজেক্ট আর নেটিভ অবজেক্টের মাঝে সার্কুলার (circular) রেফারেন্স তৈরি হবে। নিচের কোড দেখুনঃ</p> + +<pre class="brush: js">function leakMemory() { + var el = document.getElementById('el'); + var o = { 'el': el }; + el.o = o; +} +</pre> + +<p>ওপরের কোডে যে সার্কুলার রেফারেন্স তৈরি হল তার জন্যে IE, el <code>আর o অবজেক্টের দখল করা মেমরি ফ্রি করবে না যতক্ষণ না ব্রাউজার পুরোপুরি রিস্টার্ট করা হচ্ছে। ফলাফল মেমরি অপচয়...</code></p> + +<p>ওপরের কেইসটি প্রোগ্রামারের চোখ এড়িয়ে যেতে পারে, কারণ এই মেমরি অপচয় অনেক্ষণ-ধরে-চলছে এরকম বড়সর এপ্লিকেশনের ক্ষেত্রেই প্রভাব ফেলে। কোন এপ্লিকেশন জটিল ডেটা স্ট্রাকচার ব্যবহার করে বা লুপের মধ্যে মমরি অপচয় করলেও সেটা চোখে পড়বে।</p> + +<p>সার্কুলার রেফারেন্স ওপরের কোডের মত এত সহজে চোখে নাও পড়তে পারে। অনেক সময় মেমরি নষ্ট করা ডেটা স্ট্রাকচারে অনেক লেভেলের রেফারেন্সের পরে সার্কুলার রেফারেন্স তৈরি হতে পারে - তখন আর চট করে সার্কুলার রেফারেন্স ধরা যাবে না।</p> + +<p>ক্লোজার ব্যবহার করলে অনিচ্ছাকৃত মেমরি অপচয় হতে পারে। নিচের কোড টা দেখুনঃ</p> + +<pre class="brush: js">function addHandler() { + var el = document.getElementById('el'); + el.onclick = function() { + this.style.backgroundColor = 'red'; + } +} +</pre> + +<p>ওপরের কোডে HTML এলিমেন্ট টিকে লাল রং করা হবে যখন কেউ এর উপরে ক্লিক করবে। একই সাথে মেমরি লীক ও হতে থাকবে। কেন? কারণ এনোনিমাস inner ফাংশনটি'র ক্লোজারে el এর একটা রেফারেন্স অনিচ্ছাকৃতভাবে থেকে যাবে। এর ফলে একটা জাভাস্ক্রিপ্ট অবজেক্ট (ফাংশনটি) আর একটা নেটিভ অবজেক্ট (el) এর মাঝে সার্কুলার রেফারেন্স তৈরি হল।</p> + +<p>এই সমস্যা সমাধানের কয়েকটা উপায় আছে। সবথেকে সহজটি হল আদৌ কোন el ভ্যারিয়েবল ব্যবহার না করাঃ</p> + +<pre class="brush: js">function addHandler(){ + document.getElementById('el').onclick = function(){ + this.style.backgroundColor = 'red'; + } +} +</pre> + +<p>আরেকটা মজার উপায় হল এক ক্লোজার এর সার্কুলার রেফারেন্স অন্য আরেকটি ক্লোজার দিয়ে নষ্ট করাঃ</p> + +<pre class="brush: js">function addHandler() { + var clickHandler = function() { + this.style.backgroundColor = 'red'; + }; + (function() { + var el = document.getElementById('el'); + el.onclick = clickHandler; + })(); +} +</pre> + +<p>Inner ফাংশনটি সরাসরি execute হয়, এর ভেতরের সবকিছু clickHandler এর তৈরি করা ক্লোজার থেকে আড়াল করে।</p> + +<p>ক্লোজার থেকে দূরে থাকার আরেকটি ভাল বুদ্ধি হল window.onunload ইভেন্টে সার্কুলার রেফারেন্স দূর করা। অনেক ইভেন্ট লাইব্রেরী এই পদ্ধতি ব্যবহার করে। কিন্তু এরকম করলে আবার ফারায়ফক্স ১.5 এর bfcache কাজ করবে না, তাই ফায়ারফক্সে unload লিসেনার রেজিস্টার করা উচিত হবে না (যদি এমন হয় যে ব্যবহার না করে উপায় নাই তাহলে অবশ্য ভিন্ন কথা)।</p> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">মূল ডকুমেন্টের খবরাখবর...</h2> + +<ul> + <li>লেখকঃ <a class="external" href="http://simon.incutio.com/">Simon Willison</a></li> + <li>শেষ সম্পাদনাঃ মার্চ ৭, ২০০৬</li> + <li>কপিরাইটঃ © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.</li> + <li>আরো তথ্যঃ এই টিউটোরিয়াল নিয়ে আরো তথ্যের জন্য (আর মূল আলোচনার স্লাইডের লিংক পেতে) দেখুন Simon's <a class="external" href="http://simon.incutio.com/archive/2006/03/07/etech">Etech weblog post</a>.</li> +</ul> +</div> + +<p> </p> + +<p><em><strong>অনুবাদ সংক্রান্ত তথ্যঃ</strong> টেকনিকাল তথ্য অপরিবর্তিত রেখে ভাবানুবাদের পাশাপাশি সামান্য পরিমার্জনা করা হয়েছে।</em></p> 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 +--- +<div>{{jsSidebar("More")}}</div> + +<p>সব প্রোগ্রামিং ল্যাংগুয়েজের নিজস্ব ডেটা স্ট্রাকচার থাকে (যা ব্যবহার করে আপনি আপনার ডেটা বা তথ্য প্রোগ্রামে রাখতে পারেন) - তবে একেক প্রোগ্রামিং ভাষায় একেক রকম ডেটা স্ট্রাকচার দেখা যায়। এই আর্টিকেলে জাভাস্ক্রিপ্টের নিজস্ব ডেটা স্ট্রাকচার আর সেগুলোর বিভিন্ন প্রোপার্টি (বৈশিষ্ট্য) নিয়ে আলোচনা করা হয়েছে। এই নিজস্ব ডেটা স্ট্রাকচার গুলো ব্যবহার করে অন্যান্য ডেটা স্ট্রাকচার বানানো যাবে। যেখানে সম্ভব অন্য ভাষার সাথে পার্থক্য ও দেখানো হয়েছে।</p> + +<h2 id="ডাইনামিক_টাইপিং">ডাইনামিক টাইপিং </h2> + +<p>JavaScript একটি loosely typed বা dynamic ভাষা। যার মানে হচ্ছে আমাদের আগে থেকে কোন variable এর type বলে দিতে বা ঠিক করে দিতে হবে না। কোন প্রোগ্রাম চলাকালে অটোমেটিক এর type ঠিক হয়ে যায়। যার মানে দাঁড়ায়, আমরা একই নামের বিভিন্ন type এর variable তৈরি করতে পারি!! </p> + +<pre><code>var foo = 42; // foo is now a Number +var foo = 'bar'; // foo is now a String +var foo = true; // foo is now a Boolean</code></pre> + +<h2 id="ডেটা_টাইপ">ডেটা টাইপ </h2> + +<p>ECMAScript স্ট্যান্ডার্ড অনুযায়ী ৭ ধরণের ডেটা স্ট্রাকচার আছেঃ</p> + +<p> </p> + +<ul> + <li>প্রথম ৬টি হল মৌলিক বা {{Glossary("Primitive", "primitives")}}: + <ul> + <li>বুলিয়ান {{Glossary("Boolean")}}</li> + <li>নাল {{Glossary("Null")}}</li> + <li>অসংগায়িত {{Glossary("Undefined")}}</li> + <li>সংখ্যা {{Glossary("Number")}}</li> + <li>স্ট্রিং {{Glossary("String")}}</li> + <li>সিম্বল {{Glossary("Symbol")}} (new in ECMAScript 6)</li> + </ul> + </li> + <li>এবং অবজেক্ট {{Glossary("Object")}}</li> +</ul> + +<p>নিচের আলোচনায় আমরা দেখব কিভাবে এগুলো ব্যবহার করে ডেটা রাখা যায় আর কীভাবে এগুলোর সাহায্যে আরও উন্নতমানের ডেটা স্ট্রাকচার তৈরি করা যায়।</p> + +<h2 id="মৌলিকবেসিক_মানসমূহ">মৌলিক/বেসিক মানসমূহ</h2> + +<p>অবজেক্ট ছাড়া বাকি সব টাইপের ডেটার মান তৈরি করার পর আর পরিবর্তন করা যায় না। বিশেষকরে, স্ট্রিং (যেখানে C ভাষায় স্ট্রিং এর মান পরিবর্তন করা যায়)। এই টাইপের ডেটাকে আমরা মৌলিক (primitive) টাইপের বলে থাকি। নিচে {{ anch("Strings") }} নিয়ে আলোচনায় এই বিষয়ে বিস্তারিত রয়েছে।</p> + +<h3 id="বুলিয়ান_নাল_এবং_অসংজ্ঞায়িত">বুলিয়ান, নাল এবং অসংজ্ঞায়িত</h3> + +<p>শুধুমাত্র চারটি ধ্রুবক (কন্সট্যান্ট) দিয়েই এই ডেটাটাইপ গুলো প্রকাশ করা সম্ভবঃ বুলিয়ান প্রকাশ করার জন্য <code>true</code>, <code>false</code>, নাল প্রকাশের জন্য <code>null</code>, আর অসংজ্ঞায়িত প্রকাশের জন্য <code>undefined</code>। যেহেতু এগুলো কন্সট্যান্ট, এগুলো উঁচুমানের ডেটা রাখতে পারে না।</p> + +<h3 id="সংখ্যা">সংখ্যা</h3> + +<p>ECMAScript স্ট্যান্ডার্ড অনুযায়ী সংখ্যা প্রকাশ করার জন্য একটি মাত্র নাম্বার-টাইপ আছেঃ "double-precision 64-bit binary format IEEE 754 value"। অন্যান্য প্রোগ্রামিং ভাষার মত Integer (পূর্ণ সংখ্যা) প্রকাশ করার জন্য আলাদা কোন টাইপ নেই! ভগ্নাংশ রাখার পাশাপাশি জাভাস্ক্রিপ্টের এই একমাত্র নাম্বার টাইপ দিয়ে <code>+Infinity</code>, <code>-Infinity</code>, এবং <code>NaN</code> (not-a-number) এই বিশেষ প্রতীক গুলোও প্রকাশ করা যায়।</p> + +<p>যদিও একটি সংখ্যা সাধারণত শুধুমাত্র এর মানই প্রকাশ করে, জাভাস্ক্রিপ্টের কিছু <a href="/en/JavaScript/Reference/Operators/Bitwise_Operators">বাইনারী অপারেটর</a> আছে, যেগুলো দিয়ে <a href="http://en.wikipedia.org/wiki/Mask_%28computing%29">বিট মাস্কিং</a> পদ্ধতিতে একটি মাত্র সংখ্যা থেকেই অনেকগুলো বুলিয়ান মান প্রকাশ করা সম্ভব। তবে এরকম ব্যবহার নিরুৎসাহিত করা হয়, কারণ জাভাস্ক্রিপ্টে অন্য পদ্ধতিতে বুলিয়ান মান রাখা যায় (যেমন বুলিয়ান মানের array ব্যবহার করে অথবা অবজেক্টে প্রত্যেকটা বুলিয়ান মানের জন্য একটা করে প্রোপার্টি ব্যবহার করে)। বিট মাসস্কিং ব্যবহার করলে কোড দুর্বোধ্য হয়, পরে এই কোড নিয়ে আর কাজ করাও যায় না। ক্ষেত্র বিশেষে বিট মাসস্কিং ব্যবহার না করে কোন উপায় থাকে না, যেমন স্টোরেজ সীমাবদ্ধতা থাকলে অথবা নেটওয়ার্ক দিয়ে প্রত্যেক্টা বিট পাঠানোর সময়। তবে যখনই পারা যায়, বিট মাসস্কিং শেষ সম্বল হিসেব রেখে দিয়ে দেখতে হবে অন্য কোন উপায়ে কোডটা করে ফেলা যায় কিনা!</p> + +<h3 id="স্ট্রিং">স্ট্রিং</h3> + +<p>স্ট্রিং হচ্ছে "বাক্য" বা একসাথে অনেকগুলো অক্ষর। C ভাষার সাথে জাভাস্ক্রিপ্টের পার্থক্য হচ্ছে জাভাস্ক্রিপ্টের স্ট্রিং তৈরি করার পর পরিবর্তন করা যায় না। তবে একটি স্ট্রিং এর ওপর কোন অপারেশন প্রয়োগ করে নতুন অন্য স্ট্রিং তৈরি করা যায়। যেমনঃ</p> + +<ul> + <li>মূল স্ট্রিং এর যেকোন অংশ থেকে যেকোন সংখ্যক অক্ষর নিয়ে সাব-স্ট্রিং তৈরি করা যায়। অথবা সরাসরি এই ফাংশন ব্যবহার করে সাবস্ট্রিং তৈরি করা যায়ঃ <a href="/en/JavaScript/Reference/Global_Objects/String/substr" title="substr"><code>String.substr()</code></a>।</li> + <li>যোগ করার অপারেটর (+) ব্যবহার করে দুইটা স্ট্রিং একের পর এক বসিয়ে নতুন আরেকটা স্ট্রিং তৈরি করা যায়। একই কাজ হয় <a href="/en/JavaScript/Reference/Global_Objects/String/concat" title="concat"><code>String.concat()</code></a> ফাংশন ব্যবহার করে।</li> +</ul> + +<h4 id="আপনার_কোডের_সব_ডেটা_স্ট্রিং_দিয়ে_প্রকাশ_করবেন_না!">আপনার কোডের সব ডেটা স্ট্রিং দিয়ে প্রকাশ করবেন না!</h4> + +<p>জটিল রকমের ডেটাকে স্ট্রিং দিয়ে প্রকাশ করার প্রবণতা খুবই লক্ষ্য করা যায়। কারণ, কিছু সুবিধা পাওয়া যায় প্রায় সবকিছু স্ট্রিং দিয়ে প্রকাশ করতে গেলেঃ</p> + +<ul> + <li>স্ট্রিং এর পর স্ট্রিং বসিয়ে অনেক জটিল ডেটা তৈরি করা যায়।</li> + <li>স্ট্রিং ডেটাকে ডিবাগ করা খুব সহজ।</li> + <li>অনেক API তেই স্ট্রিং খুব পরিচিত একটা মুখ। এসব API এর মধ্যে উদাহরণ হিসেবে <a href="/en/DOM/HTMLInputElement" title="HTMLInputElement">input fields</a>, <a href="/en/Storage" title="Storage">local storage</a> মান, {{ domxref("XMLHttpRequest") }} responses যখন <code>responseText ব্যবহার করা হচ্ছে</code>, ইত্যাদি।) তাই মনে হতে পারে সব ডেটাই তো স্ট্রিং দিয়ে প্রকাশ করা যাচ্ছে!</li> +</ul> + +<p>এটা সত্য যে প্রায় সব ডেটা স্ট্রাকচার কেই স্ট্রিং দিয়ে প্রকাশ করা সম্ভব, কিন্তু এটা ভাল আইডিয়া না। যেমন, আলাদা করার জন্য কিছু একটা ব্যবহার করে কেউ স্ট্রিং দিয়ে লিস্ট তৈরি করার চেষ্টা করতে পারে (যেখানে array বেশি উপযুক্ত হত)। এখন আলাদা করার জন্য যেই অক্ষরটা ব্যবহার করা হয়েছে, সেটিই যদি লিস্টের সদস্য হিসেবে হাজির হয় তাহলে সমস্যা দেখা দিবে। কোন এসকেপ অক্ষর ব্যবহার করা যেতে পারে হয়ত, কিন্তু এত কাহিনী কীর্তি করার তো দরকার নেই কারণ লিস্ট রাখার জন্য নিবেদিত ডেটা স্ট্রাকচার ই আছে, যেটা ব্যবহার না করে স্ট্রিং ব্যবহার করলে অপ্রয়োজনীয় বোঝা বহন করতে হবে।</p> + +<p>তাই শুধুমাত্র টেক্সট-জাতীয় ডেটা রাখার জন্যই স্ট্রিং ব্যবহার করা উচিত। জটিল ডেটা রাখার জন্য স্ট্রিংটিকে পার্স করে উপযুক্ত ডেটা স্ট্রেকচার ব্যবহার করতে হবে।</p> + +<h2 id="অবজেক্ট">অবজেক্ট</h2> + +<p>জাভাস্ক্রিপ্টে, অবজেক্টকে আমরা অনেকগুলো ডেটা রাখার জন্য একটা প্যাকেট হিসেবে চিন্তা করতে পারি। <a href="/en/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">অবজেক্ট লিটেরেল সিনট্যাক্স</a> ব্যবহার করে আমরা অবজেক্টের অল্প কিছু প্রোপার্টির মান দিয়ে দিতে পারি। তবে পরে যেকোন সময় যেকোন প্রোপার্টি ঐ অবজেক্টে যোগ বা বিয়োগ করা যাবে। যেকোন টাইপের ডেটা আমরা প্রোপার্টি হিসেবে রাখতে পারি অবজেক্টের, অন্য অবজেক্টের ডেটাও। এভাবে, জটিল ডেটা স্ট্রাকচার তৈরি করা সম্ভব।</p> + +<h3 id="সাধারণ_অবজেক্ট_আর_ফাংশন">"সাধারণ" অবজেক্ট, আর ফাংশন</h3> + +<p>জাভাস্ক্রিপ্টে অবজেক্ট হচ্ছে key-value ম্যাপিং। মানে অবজেক্টের কোন একটা স্ট্রিং key এর মান হিসেবে যেকোন ডেটা টাইপের value রাখা যাবে। তাই অবজেক্ট কে <a href="http://en.wikipedia.org/wiki/Hash_table">হ্যাশ-ম্যাপের</a> বিকল্প হিসেবে ব্যবহার করা যায়। তবে, নন-স্ট্যান্ডার্ড <code><a href="/en/JavaScript/Reference/Global_Objects/Object/proto" title="__proto__">__proto__</a></code> pseudo প্রোপার্টি সাবধানে ব্যবহার করতে হবে। যেখানে প্রযোজ্য, সেখানে <code><a href="/en/JavaScript/Reference/Global_Objects/Object/proto" title="__proto__">__proto__</a></code> এর ভুল মান বসালে অবজেক্টের নিজস্ব প্রোটোটাইপ (ধরণ) বদলে যাবে। যেসব ক্ষেত্রে আমরা জানি না কোন স্ট্রিং এর উৎস কী (যেমন কোন ইনপুট ফিল্ড) সেসব ক্ষেত্রে সাবধান থাকতে হবেঃ <a href="http://productforums.google.com/forum/#!category-topic/docs/documents/0hQWeOvCcHU">অন্যরা এই সমস্যায় ভুগেছে</a>। এসব ক্ষেত্রে কোন <a class="external" href="http://code.google.com/p/google-caja/source/browse/trunk/src/com/google/caja/ses/StringMap.js?r=4779">StringMap abstraction</a> ব্যবহার করা যেতে পারে।</p> + +<p>ফাংশনও অবজেক্ট, জাভাস্ক্রিপ্টে। পার্থক্য হল, ফাংশন কে কল করা যায়।</p> + +<h3 id="Arrays">Arrays</h3> + +<p><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> ও অবজেক্ট, জাভাস্ক্রিপ্টে। তবে এখানে, প্রোপার্টি গুলোর key হচ্ছে পূর্ণ সংখ্যা আর বিশেষ 'length' প্রোপার্টি রয়েছে এদের। আরও কাহিনী হল, এরেগুলো ইনহেরিট হয় <code>Array.prototype</code> থেকে - যার ফলে বেশ কিছু দরকারি ফাংশন পাওয়া যায় এরে অবজেক্ট গুলো থেকে। যেমন, <code><a href="/en/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> ফাংশন ব্যবহার করে array তে কোন একটা মান (সদস্য) আছে কিনা জানা যায় আবার <code><a href="/en/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code> ফাংশন ব্যবহার করে এরে এর শেষে কোন সদস্য যোগ করা যায়। লিস্ট কিংবা সেট হিসেবে ব্যবহার করার জন্য তাই এরে হচ্ছে সবচেয়ে উপযুক্ত ডেটা-স্ট্রাকচার।</p> + +<h3 id="তারিখ">তারিখ</h3> + +<p>তারিখ প্রকাশ করার জন্য সবচেয়ে উপযুক্ত হবে নিজস্ব <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a> ইউটিলিটি ব্যবহার করা। </p> + +<h3 id="WeakMaps_ম্যাপ_সেট">WeakMaps, ম্যাপ, সেট</h3> + +<p>স্ট্যান্ডার্ড নয়। আশা করা যায় ECMAScript 6. ভার্সনে স্ট্যান্ডার্ড হবে।</p> + +<p>এসব ডেটা স্ট্রাকচার কোন অবজেক্টের রেফারেন্স কে key হিসেবে নিতে পারে। সেট দিয়ে একসারি (set) অব্জেট প্রকাশ করা হয়, আবার WeakMaps আর ম্যাপ দিয়ে কোন অবজেক্ট কে ভ্যালু হিসেবে রাখা হয়। ম্যাপ আর উইকম্যাপ এর মাঝে পার্থক্য হচ্ছেঃ ম্যাপে অবজেক্ট key, enumerate করা যায়। আর উইকম্যাপে গার্বেজ-কালেকশন বেশি ভালভাবে কাজ করে।</p> + +<p>শুধুমাত্র ECMAScript 5 ব্যবহার করেই ম্যাপ ও সেট ইমপ্লিমেন্ট করা সম্ভব। কিন্তু যেহেতু অবজেক্ট compare (যেমন, কোনটা কার থেকে ছোট সেই তুলনা করতে গেলে) করা সম্ভব না, লুক-আপ পারফরমেন্স linear হয়ে যাবে এতে। এর থেকে নেটিভ ইমপ্লেমেন্টেশন ভাল হবে কারণ তাহলে লুক-আপ পারফরমেন্স লগারিদমিক থেকে কন্সটান্ট পর্যন্ত হতে পারবে।</p> + +<p>সাধারণভাবে, DOM নোডে ডেটা bind করার জন্য যে কেউ সরাসরিভাবে অবজেক্টে প্রোপার্টি হিসেবে দিয়ে দিতে পারে, অথবা <code>data-*</code> attribute গুলো ব্যবহার করতে পারে। এর সমস্যা হল একই context এ চলছে এরকম যেকোন স্ক্রিপ্ট এই ডেটা ব্যবহার করতে পারবে। ম্যাপ আর উইকম্যাপ দিয়ে ডেটা কোন অব্জেক্টের সাথে সহজেই প্রাইভেট ভাবে bind করা যায়।</p> + +<h3 id="TypedArrays">TypedArrays</h3> + +<p>স্ট্যান্ডার্ড নয়। আশা করা যায় ECMAScript 6. ভার্সনে স্ট্যান্ডার্ড হবে।</p> + +<h2 id="আরও_দেখুন">আরও দেখুন</h2> + +<ul> + <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas এরঃ জাভাস্ক্রিপ্টে বহুল-প্রচলিত ডেটা স্ট্রাকচার আর এলগরিদমের সংগ্রহশালা </a></li> + <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">জাভাস্ক্রিপ্টে Search Tre(i)es ইমপ্লিমেন্টেশন</a></li> +</ul> 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 +--- +<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> + +<p>এই চ্যাপ্টারের আলোচ্য বিষয় হল ভ্যালু যা জাভাস্ক্রিপ্ট চেনে এবং জাভাস্ক্রিপ্ট এক্সপ্রেশন গঠনের মূল কাঠামো: ভেরিয়েবল, কনস্টান্ট, এবং লিটারেল সম্পর্কে বর্ণনা করে।</p> + +<h2 id="Values(মান)">Values(মান)</h2> + +<p>জাভাস্ক্রিপ্ট নিচে উল্লেখিত পাঁচ ধরণের প্রাথমিক টাইপের ভ্যালুগুলো চেনে:</p> + +<table> + <caption> </caption> + <thead> + <tr> + <th scope="col">টাইপ</th> + <th scope="col">ভ্যালু টাইপের উদাহরন / ব্যাখ্যা</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" style="color: rgb(34, 85, 170); text-decoration: underline; line-height: 21px;" title="en-US/docs/JavaScript/Reference/Global Objects/Number">সংখ্যা/Number</a></td> + <td>42, 3.14159</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" style="color: rgb(34, 85, 170); text-decoration: underline; line-height: 21px;" title="en-US/docs/JavaScript/Reference/Global Objects/Boolean">বুলিয়ান/Boolean</a></td> + <td>true / false</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" style="color: rgb(34, 85, 170); text-decoration: underline; line-height: 21px;" title="en-US/docs/JavaScript/Reference/Global Objects/String">স্ট্রিং/String</a></td> + <td>"Howdy"</td> + </tr> + <tr> + <td><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">null</span></td> + <td><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">null বা "শুন্য"</span><span style="line-height: 21px;"> ভ্যালু নির্দেশ করার জন্য এই কী-ওয়ার্ড টি ব্যবহার করা হয়। এছাড়া নাল একপ্রকার প্রিমিটিভ ভ্যালু। যেহেতু জাভাস্ক্রিপ্ট ইংরেজী হরফের কেইস-সংবেদনশীল(</span>case-sensitive), <code style="font-size: 14px;">null তাই</code> <code style="font-size: 14px;">Null</code>, <code style="font-size: 14px;">NULL অথবা এগুলোর সমমানের </code>সবগুলো-ই ভিন্ন।</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Global_Objects/undefined" style="color: rgb(34, 85, 170); text-decoration: underline; font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;" title="en-US/docs/JavaScript/Reference/Global Objects/undefined">undefined</a></td> + <td><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">undefined হল </span>top-level প্রোপার্টি যার <span style="line-height: 1.5;">ভ্যালু হচ্ছে </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">এটা বা</span>'অসংজ্ঞায়িত' হিসেবে চিহ্নিত করার জন্য <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">। এটা</span><span style="line-height: 1.5;">একটি প্রিমিটিভ ভ্যালু। </span></td> + </tr> + </tbody> +</table> + +<p> </p> + +<p>এই গুটিকয়েক টাইপের ভ্যালু অথবা <em>ডেটা টাইপ</em> ব্যবহার করেই আসলে যেকোন কাজের কোড লিখে ফেলা সম্ভব। Integer আর ভগ্নাংশ (floating value) রাখার জন্য পৃথক ডেটা-টাইপ নাই। একইভাবে, তারিখ রাখার জন্যে কোন আলাদা ডেটা-টাইপ নাই, অবশ্য আপনি চাইলে <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="en-US/docs/JavaScript/Reference/Global Objects/Date">Date</a></code> অবজেক্ট আর এর বিভিন্ন কাজের মেথড ব্যবহার করতে পারেন।</p> + +<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global Objects/Object">Objects</a> আর <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global Objects/Function">functions</a> হচ্ছে ভাষাটির অন্যতম গুরুত্বপূর্ণ উপাদান। ফাংশন অন্যান্য প্রোগ্রামিং ভাষার মতই - কোন একটি বিশেষ কাজ করার জন্য লেখা হয় ফাংশন। আর অবজেক্টে থাকে নাম-ভ্যালু যুগল! (key-value pairs) - নাম ব্যবহার করে ভ্যালুতে কি রাখা আছে জানতে পারবেন।</p> + +<h3 id="ডেটা-টাইপের_রূপান্তরকনভার্সন">ডেটা-টাইপের রূপান্তর/কনভার্সন</h3> + +<p>জাভাস্ক্রিপ্ট ডায়নামিক-টাইপ (dynamically typed) ভাষা, মানে কোন ভ্যারিয়েবলের টাইপ কি সেটা বলে দিতে হয়না, জাভাস্ক্রিপ্ট নিজেই রান-টাইমে বের করবে। এই টাইপ পরিবর্তন ও করা যায় রান-টাইমে। স্ক্রিপ্ট চলার সময় প্রয়োজনমত ভ্যারিয়েবলের টাইপ ও কনভার্ট করে নেওয়া হয়। ধরে নেই, আপনি নিচের মত করে ভ্যারিয়েবল ডিক্লেয়ার করেছেনঃ</p> + +<div style="overflow: hidden;"> +<pre class="brush: js">var answer = 42; +</pre> +</div> + +<p>পরে কোন এক সময় আপনি একই ভ্যারিয়েবলে স্ট্রিং মান বসালেনঃ</p> + +<div style="overflow: hidden;"> +<pre class="brush: js">answer = "Thanks for all the fish..."; +</pre> +</div> + +<p>জাভাস্ক্রিপ্ট ডায়নামিক-টাইপ বলেই এই লাইনে কোন ভুল হয়নি। কোডের ভাষা জাভা/সি হলে এই লাইনেই ভুল হত।</p> + +<p>যদি কোন এক্সপ্রেশনে সংখ্যা আর স্ট্রিং মান এর মাঝে '+' ওপারেটের ব্যবহার করেন, তাহলে সংখ্যা-ভ্যালু গুলো স্ট্রিং এ কনভার্ট হয়ে যাবে। যেমনঃ</p> + +<pre class="brush: js">x = "The answer is " + 42 // "The answer is 42" +y = 42 + " is the answer" // "42 is the answer" +</pre> + +<p>তবে '+' ব্যাতীত অন্য অপারেটরের ক্ষেত্রে কিন্তু সংখ্যাকে স্ট্রিং এ কনভার্ট করা হয় না! যেমনঃ</p> + +<pre class="brush: js">"37" - 7 // 30 +"37" + 7 // "377" + +</pre> + +<p>আসলে জাভাস্ক্রিপ্টে '+' সাইন দিয়ে যেমন নিউমেরিক সংখ্যার যোগ এর কাজ করা হয়। ঠিক তেমনি স্ট্রিং এর ক্ষেত্রে দুইটা স্ট্রিং কে জোড়া দেয়ার কাজ করে থাকে। যাকে ইংরেজিতে <code>concatenation</code> বলা হয়। এই কাজটা <code>concat()</code> নামক ফাংশন ব্যবহার করেও করা হয়ে থাকে।</p> + +<h3 id="স্ট্রিং_থেকে_সংখ্যা">স্ট্রিং থেকে সংখ্যা</h3> + +<p>স্ট্রিং কে সংখ্যায় কনভার্ট করতে পারবেন নিচের মেথডগুলো ব্যবহার করেঃ</p> + +<h4 id="parseInt()_আর_parseFloat()"><code>parseInt()</code> আর <code>parseFloat()</code></h4> + +<p>দেখুনঃ <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/parseInt" title="en-US/docs/JavaScript/Reference/Global Objects/parseInt">parseInt()</a></code> আর <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/parseFloat" title="en-US/docs/JavaScript/Reference/Global Objects/parseFloat">parseFloat()</a></code> পাতায়।</p> + +<p><code>parseInt</code> শুধুমাত্র integer রিটার্ন করে, তাই দশমিক সংখ্যা নিয়ে কাজকারবারেই এর ব্যবহার সীমিত। এছাড়া, একটি ভাল অভ্যাস হল এই ফাংশনে ২য় প্যারামিটারে কনভার্সনের ভিত্তি (base) পাঠিয়ে দেওয়া।</p> + +<h4 id="''_অপারেটর">'+' অপারেটর</h4> + +<p>স্ট্রিং কে সংখ্যায় কনভার্ট করার আরেকটা বুদ্ধি হল '+' অপারেটর ব্যবহার করাঃ</p> + +<pre class="brush: js">"1.1" + "1.1" = "1.11.1" +(+"1.1") + (+"1.1") = 2.2 // শুধুমাত্র বোঝার সুবিধার জন্যে বন্ধনী ব্যবহার করা হয়েছে।</pre> + +<h2 id="ভ্যারিয়েবল">ভ্যারিয়েবল</h2> + +<p>আপনার এপ্লিকেশনে ব্যবহার করার জন্য যেকোন ভ্যালু, মেমরী তে সংরক্ষণ করে রাখতে ভ্যারিয়েবল ব্যবহার করুন। ভ্যারিয়েবল হিসেবে আমরা যে নামগুলো দিতে পারব তাদের <em>identifiers</em> বলা হয়। এগুলো দেওয়ার কিছু নিয়ম আছেঃ</p> + +<p>জাভাস্ক্রিপ্টে <em>identifiers </em>অবশ্যই কোন বর্ণ (letter), আন্ডারস্কোর (_) অথবা ডলার চিহ্ন ($) দিয়ে শুরু করতে হবে; পরবর্তী অক্ষরে সংখ্যা (0-9) ব্যবহার করা যাবে। জাভাস্ক্রিপ্টে হরফের case (ইংরেজীতে বড় হাতের বা ছোট হাতের হরফ) গুরুত্বপূর্ণ - ইংরেজী "A" থেকে শুরু করে "Z" পর্যন্ত বর্ণগুলো বড় হাতের, আর "a" থেকে শুরু করে "z" পর্যন্ত বর্ণগুলো ছোট হাতের।</p> + +<p>জাভাস্ক্রিপ্ট ১.৫ বা এর ওপরের ভার্সনগুলোতে আপনি ISO 8859-1 বা ইউনিকোড অক্ষর যেমন অ/আ/ক/খ ব্যবহার করতে পারবেনঃ</p> + +<pre class="brush: js">var ফল = "কলা"; +alert(ফল);</pre> + +<p>ভ্যারিয়েবলের নাম হিসেবে বাংলা অক্ষর ব্যবহার করছি! এছাড়াও \uXXXX {{anch("Unicode escape sequences")}} ক্যারেকটার হিসেবে আইডেন্টিফায়ারে ব্যবহার করা যাবে।</p> + +<p>বৈধ ভ্যারিয়েবলের নামের কিছু উদাহরণঃ <code>Number_hits</code>, <code>temp99</code>, এবং <code>_name</code>।</p> + +<h3 id="ভ্যারিয়েবল_তৈরি_করা">ভ্যারিয়েবল তৈরি করা</h3> + +<p>দু'টি উপায়ে ভ্যারিয়েবল তৈরি (declare) করা যায়ঃ</p> + +<ul> + <li><a href="/en-US/docs/JavaScript/Reference/Statements/var" title="en-US/docs/JavaScript/Reference/Statements/var">var</a> কী-ওয়ার্ড ব্যবহার করে। যেমনঃ <code>var x = 42</code>। লোকাল আর গ্লোবাল দুই ধরণের ভ্যারিয়েবল-ই এই কীওয়ার্ড দিয়ে তৈরি করা যায়।</li> + <li>সরাসরি ভ্যালু এসাইন করে দিয়ে। যেমনঃ <code>x = 42</code>। এটি করলে <a href="#Global_Variables">global ভ্যারিয়েবল</a> তৈরি হবে আর strict লেভেলের ওয়ার্নিং তৈরি হবে। তাই এই পদ্ধতি ব্যবহার করা অনুচিত।</li> +</ul> + +<h3 id="ভ্যারিয়েবলের_মান_কী">ভ্যারিয়েবলের মান কী?</h3> + +<p><code>var</code> স্টেটমেন্ট ব্যবহার করে কোন ভ্যালু দিয়ে ইনিশিয়ালাইজ না করলে তার মান হিসেবে থাকবে <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/undefined" title="en-US/docs/JavaScript/Reference/Global Objects/undefined">undefined</a></code>।</p> + +<p>তৈরি করা হয়নি (undeclared) এমন কোন ভ্যারিয়েবল নিয়ে কাজ করতে গেলে <code>ReferenceError</code> এক্সেপশন পাবেনঃ</p> + +<pre class="brush: js">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 +</pre> + +<p>কোন ভ্যারিয়েবলে ভ্যালু দেওয়া হয়েছে কিনা জানতে তাই <code>undefined</code> ব্যবহার করুন। নিচের কোডে <code>input</code> ভ্যারিয়েবলে কোন ভ্যালু দেই নি, তাই <code><a href="/en-US/docs/JavaScript/Reference/Statements/if...else" title="en-US/docs/JavaScript/Reference/Statements/if...else">if</a></code> স্টেটমেন্টে <code>true</code> পাওয়া যাচ্ছেঃ</p> + +<pre class="brush: js">var input; +if(input === undefined){ + doThis(); +} else { + doThat(); +} +</pre> + +<p><span class="comment">The following is related to "Variables" section as potential values in assignment.</span></p> + +<p>বুলিয়ান কন্টেক্সট এ ব্যবহার করলে অবশ্য <code>undefined</code>, <code>false</code> হিসেবে আচরণ করে। যেমনঃ নিচের কোডে <code>myFunction</code> ফাংশনটি একজিকিউট হবে কারণ <code>myArray</code> এলিমেন্ট টি তৈরি করা হয় নি।</p> + +<pre class="brush: js">var myArray = new Array(); +if (!myArray[0]) myFunction(); +</pre> + +<p>তবে numeric কন্টেক্সটে ব্যবহৃত হলে <code>undefined</code> কনভার্ট হবে <code>NaN</code> এঃ</p> + +<pre class="brush: js">var a; +a + 2 = NaN</pre> + +<p>যখন কোন নাল ভ্যারিয়েবল ব্যবহারের চেষ্টা করেন, তখন বুলিয়ান কন্টেক্সটে false আর numeric কন্টেক্সটে 0 হিসেবে এর মান নির্ণিত হয়ঃ</p> + +<pre class="brush: js">var n = null; +console.log(n * 32); // logs 0 +</pre> + +<h3 id="ভ্যারিয়েবলের_স্থায়িত্বস্কোপ_(scope)">ভ্যারিয়েবলের স্থায়িত্ব/স্কোপ (scope)</h3> + +<p>যখন একটা ভ্যারিয়েবল কে কোন ফাংশনের বাইরে তৈরি করেন তখন তাকে <em>global </em>ভ্যারিয়েবল বলি, কারণ ডকুমেন্টের যেকোন জায়গায় ঐ ভ্যারিয়েবল টা ব্যবহার করা যাবে। অপরদিকে, কোন ফাংশনের ভিতর যদি ভ্যারিয়েবলটি তৈরি করেন, তাহলে সেটি <em>local </em>ভ্যারিয়েবল, কারণ ঐ ফাংশনের বাইরে ঐ ভ্যারিয়েবলের কোন অস্তিত্ব নাই।</p> + +<p>জাভাস্ক্রিপ্টে <a href="/bn-BD/docs/JavaScript/Guide/Statements#Block_Statement" title="/bn-BD/docs/JavaScript/Guide/Statements#Block_Statement">ব্লক স্টেটেমেন্টের</a> আলাদা কোন স্কোপ নেই; বরং একটা ফাংশনে যতগুলো ব্লক-ই থাকুক না কেন সবগুলো একই স্কোপে - ঐ ফাংশনের স্কোপে থাকে। যেমন নিচের কোড 5 লগ করবে (জাভাস্ক্রিপ্ট কনসোলে 5 লিখবে) কারণ x ভ্যারিয়েবলের স্কোপ if ব্লকের বাইরেও আছে।</p> + +<pre class="brush: js">if (true) { + var x = 5; +} +console.log(x); +</pre> + +<p>অন্য প্রোগ্রামিং ভাষার সাথে জাভাস্ক্রিপ্টের অমিল এখানেই। আরেকটা অপ্রত্যাশিত ব্যাপার হলঃ পরে তৈরি করা হয়েছে এমন ভ্যারিয়েবল আগে ব্যবহার করতে পারবেন অনায়াসে। কারণ ধরে নেওয়া হয় যে ভ্যারিয়েবল গুলো ফাংশনের শুরুতেই টুকে নেওয়া হয়েছে। তবে যাই হোক, যদি কোন ভ্যালু দিয়ে ভ্যারিয়েবল initialize না করেন তাহলে এর মান <code>undefined</code> পাবেন ।</p> + +<pre class="brush: js">/** + * 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"; +})(); +</pre> + +<p>২ নাম্বার উদাহরণ টি খুব সাবধানে দেখুন! ২ নম্বর উদাহরণটি এভাবে কাজ করবেঃ</p> + +<pre class="brush: js">var myvar = "my value"; + +(function() { + var myvar; + console.log(myvar); // undefined + myvar = "local value"; +})();</pre> + +<p>যেমনটা বলেছিলাম, সব <code>var স্টেটমেন্টগুলো যেন ফাংশনের শুরুতেই তৈরি করা হয়েছে। এভাবে কোড করলে ভুল হওয়ার সম্ভাবনা কমে যায় আর সহজেই বুঝতে পারা যায় কী হচ্ছে!</code></p> + +<h3 id="গ্লোবাল_ভ্যারিয়েবল">গ্লোবাল ভ্যারিয়েবল</h3> + +<p>গ্লোবাল ভ্যারিয়েবল হচ্ছে আসলে একটা <em>global object</em> এর প্রোপার্টি! ওয়েবপেইজে গ্লোবাল অবজেক্ট টা হচ্ছে <code><a href="/en-US/docs/DOM/window" title="en-US/docs/DOM/window">window</a>, তাই আপনি </code><code>window.<em>variable </em>সিন্ট্যাক্স ব্যবহার করেও গ্লোবাল ভ্যারিয়েবল এক্সেস করতে পারবেন।</code></p> + +<p><span class="comment">need links to pages discussing scope chains and the global object</span>ফলস্বরূপ, ব্রাউজারের এক উইন্ডো তে তৈরি করা গ্লোবাল ভ্যারিয়েবল কে ব্রাউজারের অন্য উইন্ডোতে বা ফ্রেম থেকে এক্সেস করা যাবে উইন্ডো বা ফ্রেমটির name ব্যবহার করে। যেমন, কোন একটা <code>FRAMESET ডকুমেন্টে তৈরি করা </code><code>phoneNumber ভ্যারিয়েবলকে এর কোন বাচ্চা ফ্রেম (child frame) থেকে </code><code>parent.phoneNumber ব্যবহার করে এক্সেস করতে পারবেন।</code></p> + +<h2 id="কন্সট্যান্ট">কন্সট্যান্ট</h2> + +<p>শুধু পড়া যাবে, মান পরিবর্তন করা যাব্বে না এমন ভ্যারিয়েবল তৈরি করতে পারেন <code><a href="/en-US/docs/JavaScript/Reference/Statements/const" title="en-US/docs/JavaScript/Reference/Statements/const">const</a> কী-ওয়ার্ড দিয়ে। এর আইডেন্টিফায়ার এর সিন্ট্যাক্স ভ্যারিয়েবলের আইডেন্টিফায়ার এর মতইঃ অবশ্যি অক্ষর, আন্ডারস্কোর অথবা $ চিহ্ন দিয়ে শুরু হতে হবে আর এরপর অক্ষর, সংখ্যা বা আন্ডারস্কোর থাকতে পারবে।</code></p> + +<pre class="brush: js">const prefix = '212'; +</pre> + +<p>শুরুতেই মান নির্ধারণ করে দেওয়ার পর কন্সট্যান্ট এর মান পরিবর্তন করা যায় না বা নতুন করে একই নামে কন্সট্যান্ট তৈরি করা যায় না।</p> + +<p>কন্সট্যান্ট এর স্কোপ ভ্যারিয়েবলের মতই। তবে <code>const কী-ওয়ার্ড টা অবশ্যই লিখতে হবে, না হলে জাভাস্ক্রিপ্ট কীভাবে ধরবে আপনি ভ্যারিয়েবল নাকি কন্সট্যান্ট কোনটা তৈরি করতে চাচ্ছেন! কীওয়ার্ড টা ব্যবহার না করলে তাই একে ভ্যারিয়েবল হিসেবেই গণ্য করা হবে।</code></p> + +<p>একই স্কোপের ভেতর কোণ ফাংশন অথবা ভ্যারিয়েবলের নামে কন্সট্যান্ট তৈরি করা যায় না। যেমনঃ</p> + +<pre class="brush: js">// নিচের কোডে ভুল আছে +function f() {}; +const f = 5; + +// নিচেরটাও ভুল! +function f() { + const g = 5; + var g; + + //statements +} +</pre> + +<h2 id="লিট্যারেল">লিট্যারেল</h2> + +<p>লিটারেল কে জাভাস্ক্রিপ্টে ভ্যালু হিসেবে ব্যবহার করা যায়। এগুলো যেভাবে দেখানো হয়, সেভাবেই লিখতে হবে - এগুলো ভ্যারিয়েবল না। যেভাবে দেখানো হচ্ছে সেভাবেই কোডে লিখতে হবে বলেই এদের নাম লিটারেল (literal)! এই অংশে নিচের লিট্যারেল গুলো নিয়ে আলোচনা করেছিঃ</p> + +<ul> + <li>{{anch("Array লিটারেল")}}</li> + <li>{{anch("বুলিয়ান লিটারেল")}}</li> + <li>{{anch("ভগ্নাংশের লিটারেল")}}</li> + <li>{{anch("Integers")}}</li> + <li>{{anch("Object literals")}}</li> + <li>{{anch("String literals")}}</li> +</ul> + +<h3 id="Array_লিটারেল">Array লিটারেল</h3> + +<p>Array লিটারেল হচ্ছে শূণ্য বা এর থেকে বেশি সংখ্যক "এক্সপ্রেশনের" একটা লিস্ট - এই সব এক্সপ্রেশনের প্রত্যেকেই হচ্ছে array টির একেকটি সদস্য - এই লিস্টের সামনে আর পরে তৃতীয় বন্ধনী ([]) ব্যবহার করতে হবে। যখন আপনি array লিটারেল ব্যবহার করে array তৈরি করবেন, তখন এই লিস্টের ভ্যালুগুলোকে array টির সদস্য হিসেবে বিবেচনা করে arrayটি ইনিশিয়ালাইজ করা হয়। আর যতগুলো সদস্য দিলাম, array এর length তত।</p> + +<p>নিচের উদাহরণে ৩ সদস্য বিশিষ্ট তদন্ত কমিটি থুক্কু <code>coffees নামের array তৈরি করা হয়েছে - array টির length ও তাই তিনঃ</code></p> + +<pre class="brush: js">var coffees = ["French Roast", "Colombian", "Kona"]; +</pre> + +<p><strong>খেয়াল করুনঃ</strong> array লিটারেল হচ্ছে বিশেষ ধরণের অবজেক্ট ইনিশিয়ালাইজার। দেখুন <a href="/bn-BD/docs/JavaScript/Guide/Working_with_Objects#Using_Object_Initializers" title="/bn-BD/docs/JavaScript/Guide/Working_with_Objects#Using_Object_Initializers">কিভাবে অবজেক্ট ইনিশিয়ালাইজার ব্যবহার করা যায়।</a></p> + +<p>যদি টপ-লেভেল কোডে (মানে ফাংশনের বাইরের কোডে) array তৈরি করা হয়, যেই এক্সপ্রেশনে array লিটারেলটি আছে - সেই এক্সপ্রেশনটি যতবার execute করা হবে ততবার-ই array টি ইন্টারপ্রেট (নতুন করে তৈরি) করা হবে। এছাড়া কোন ফাংশনের ভেতর array লিটারেল ব্যবহার করলে যতবার ফাংশনটি কল করবেন ততবার লিটারেলটি তৈরি করা হবে।</p> + +<p>Array লিটারেল <code>Array</code> অবজেক্ট-ও বটে। পড়ুন <a href="/bn-BD/docs/JavaScript/Guide/Predefined_Core_Objects#Array_Object" title="/bn-BD/docs/JavaScript/Guide/Predefined_Core_Objects#Array_Object">বিস্তারিত</a>।</p> + +<h4 id="Array_লিটারেলে_বাড়তি_কমা'র_ব্যবহার">Array লিটারেলে বাড়তি কমা'র ব্যবহার</h4> + +<p>Array লিটারেলে যে সব সদস্য দিতেই হবে এমন কথা নাই - যদি কোন row তে পরপর দুইটা কমা ব্যবহার করেন তাহলে কমা দুটোর মাঝের সদস্যটি <code>undefined</code> হিসেবে থাকে। নিচের উদাহরণে <code>fish</code> array তৈরি করা হয়েছে এভাবেঃ</p> + +<pre class="brush: js">var fish = ["Lion", , "Angel"]; +</pre> + +<p>এই array তে দুটো সদস্যের মান আছে আর একটির ভ্যালু নাই। (<code>fish[0] </code>হচ্ছে "Lion", <code>fish[1]</code> হচ্ছে <code>undefined</code>, আর <code>fish[2]</code> হচ্ছে "Angel")।</p> + +<p>সদস্যের লিস্টের শেষে যদি কমা দিয়ে রাখেন সেটি অগ্রাহ্য করা হবে। নিচের উদাহরণে array এর length তিন। <code>myList[3]</code> বলে কোন সদস্য নেই। শেষের এই অতরিক্ত কমা ছাড়া বাকি সব কমা-ই নতুন সদস্য নির্দেশ করে। (<strong>খেয়াল করুনঃ</strong> পুরোনো ব্রাউজারে শেষের অতিরিক্ত কমা ত্রুটি তৈরি করতে পারে তাই লিস্টের শেষে বাড়তি কমা না দেওয়াই ভাল।)</p> + +<pre class="brush: js">var myList = ['home', , 'school', ]; +</pre> + +<p>নিচের উদাহরণে array এর length চার। <code>myList[0]</code> আর <code>myList[2]</code> অসংজ্ঞায়িত।</p> + +<pre class="brush: js">var myList = [ , 'home', , 'school']; +</pre> + +<p>নিচের উদাহরণে array এর length চার। <code>myList[1]</code> আর <code>myList[3]</code> অসংজ্ঞায়িত।<code> শুধুমাত্র শেষের কমা অগ্রাহ্য করা হয়েছেঃ</code></p> + +<pre class="brush: js">var myList = ['home', , 'school', , ]; +</pre> + +<p>অতিরিক্ত কমা'র ব্যবহারে ফলাফল কী আসে সেটা ঠিকমত বুঝতে পারাটা গুরুত্বপূর্ণ। নিজে কোড লেখার সময় array'র যে সদস্যগুলোর মান দিতে চান না, সরাসরি <code>undefined</code> মান বসিয়ে দিলে আপনার কোড সহজেই বুঝা যাবে আর ভবিষ্যতে কাজ করাও সহজ হবে।</p> + +<h3 id="বুলিয়ান_লিটারেল">বুলিয়ান লিটারেল</h3> + +<p>বুলিয়ান টাইপের দু'ধরণের লিটারেল আছেঃ <code>true</code> আর <code>false</code>।</p> + +<p>প্রিমিটিভ (যেগুলো অবজেক্ট না) <code>true</code> আর <code>false</code> বুলিয়ান ভ্যালু কে Boolean অবজেক্টের true আর false ভ্যালুর সাথে গুলিয়ে ফেলবেন না - এটি প্রিমিটিভ ভ্যালুগুলোর wrapper হিসেবেই কাজ করে। আরো তথ্যের জন্য <a href="/bn-BD/docs/JavaScript/Guide/Predefined_Core_Objects#Boolean_Object" title="/bn-BD/docs/JavaScript/Guide/Predefined_Core_Objects#Boolean_Object">বুলিয়ান অবজেক্ট</a> নিয়ে পড়ুন।</p> + +<h3 id="Integers">Integers</h3> + +<p>Integers (পূর্ণ সংখ্যা) কে ১০ (দশমিক), ১৬ (হেক্সাডেসিমাল) বা ৮(অক্টাল) এর ভিত্তিতে (base) প্রকাশ করা যায়।</p> + +<ul> + <li>দশমিক পূর্ণ সংখ্যার লিটারেল হচ্ছে এক বা একাধিক সংখ্যার ক্রম যার শুরুতে শূণ্য থাকতে পারবে না।</li> + <li>শুরুতে শূণ্য সহ এক বা একাধিক সংখ্যার ক্রম ব্যবহার করলে সেটি অক্টাল বলে গণ্য হয়। অক্টাল ভিত্তিতে শুধুমাত্র ০-৭ এই কয়টি ডিজিট ব্যবহার করা যায়।</li> + <li>শুরুতে 0x (অথবা 0X) সহ এক বা একাধিক সংখ্যার ক্রম ব্যবহার করলে সেটি হেক্সাডেসিমাল বলে গণ্য হয়। এই ভিত্তিতে 0-9 এই কয়টি ডিজিট ছাড়াও a-f বা A - F এই অক্ষরগুলো ব্যবহার করা যায়।</li> +</ul> + +<p>অক্টাল লিটেরেল ব্যবহার নিরুতসাহিত আর ECMA-262 ৩য় সংস্করণে বাদ দিয়ে দেওয়া হয়েছে। অবশ্য পুরনো কোড যাতে চলতে পারে সেহেতু জাভাস্ক্রিপ্ট ১.৫ এ এখনো অক্টাল সমর্থন করে।</p> + +<p>Integer লিটেরেলের কিছু ব্যবহারঃ</p> + +<pre class="eval">0, 117 and -345 (দশমিক, base 10) +015, 0001 and -077 (অক্টাল, base 8) +0x1123, 0x00111 and -0xF1A7 (হেক্সাডেসিমাল, "hex" or base 16) +</pre> + +<h3 id="ভগ্নাংশের_লিটারেল">ভগ্নাংশের লিটারেল</h3> + +<p>ভগ্নাংশে নিচের বিষয়গুলো থাকেঃ</p> + +<ul> + <li>চিহ্ন (sign) সহ/ছাড়া দশমিক ভিত্তির পূর্ণ সংখ্যা (শুরুতে ''+'' অথবা ''- '' চিহ্ন থাকতে পারে)</li> + <li>একটা দশমিক ফোটা ("."),</li> + <li>দশমিক ফোটার পরের অংশ (যেটা কিনা ১০-ভিত্তির পূর্ণ সংখ্যা),</li> + <li>এক্সপোনেন্ট (exponent)</li> +</ul> + +<p>Exponent অংশ "e" অথবা "E" দিয়ে শুরু হয় আর এর পর থাকে ১০-ভিত্তির পূর্ণসংখ্যা, যেটার শুরুতে আবার + অথবা - চিহ্ন থাকতে পারে নাও পারে। একটা ভগ্নাংশ লিটেরেলে কমপক্ষে একটি ডিজিট (সংখ্যা) এবং হয় দশমিক ফোটা অথবা "e" (অথবা "E") থাকতে হবে।</p> + +<p>ভগ্নাংশ লিটেরেলের কিছু উদাহরণ হলঃ 3.1415, -3.1E12, .1e12, আর 2E-12।</p> + +<p>পরিষ্কার করে বলতে গেলে, সিন্ট্যাক্স হচ্ছেঃ</p> + +<pre class="eval">[digits][.digits][(E|e)[(+|-)]digits] +</pre> + +<p>যেমনঃ</p> + +<pre class="eval">3.14 +2345.789 +.3333333333333333333 +</pre> + +<h3 id="অবজেক্ট_লিটেরেল">অবজেক্ট লিটেরেল</h3> + +<p>দ্বিতীয় বন্ধনীর ({}) ভেতর শূণ্য/এক/একাধিক নাম-ভ্যালু যুগল (name-value pairs) লিখে অবজেক্ট লিটেরেল তৈরি করা যায়। তবে কোন স্টেটমেন্টের শুরুতেই অবজেক্ট লিটেরেল ব্যবহার করা যায় না। এমনটা করলে ত্রুটি তৈরি হবে অথবা আপনি যেমনটা আশা করছিলেন সেরকম ফল পাবেন না - কারণ শুরুতেই { দেখে জাভাস্ক্রিপ্ট মনে করতে পারে আপনি ব্লক শুরু করছেন।</p> + +<p>নিচের উদাহরণে অবজেক্ট লিটেরেল দেখানো হয়েছে। <code>car</code> অবজেক্টের প্রথম সদস্য <code>myCar</code> নামের একটি প্রোপার্টি; দ্বিতীয় সদস্য <code>getCar</code> একটি ফাংশন <code>(CarTypes("Honda"));</code> ইনভোক করে, আর তৃতীয় সদস্য <code>special</code> ইতোমধ্যে তৈরি করা একটা ভ্যারিয়েবল ব্যবহার করে (<code>Sales</code>)।</p> + +<pre class="brush: js">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 +</pre> + +<p>এছাড়াও, কোন প্রোপার্টির নাম হিসেবে সংখ্যা কিংবা স্ট্রিং লিটেরেল ব্যবহার করতে পারেন অথবা এক অবজেক্টের ভেতর আরেকটিকে নেস্ট করতে পারেন। নিচের উদাহরণে দেখুনঃ</p> + +<pre class="brush: js">var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" }; + +console.log(car.manyCars.b); // Jeep +console.log(car[7]); // Mazda +</pre> + +<p>দয়া করে খেয়াল করুনঃ</p> + +<pre class="brush: js">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 +</pre> + +<h3 id="স্ট্রিং_লিটেরেল">স্ট্রিং লিটেরেল</h3> + +<p>স্ট্রিং লিটেরেল তৈরি হয় শূণ্য বা এর থেকে বেশি ক্যারেকটার ডবল-কোটেশন (") বা উদ্ধৃতি চিহ্ন বা single quotation (') চিহ্ন এর মধ্যে রাখলে। তবে double বা single যেই উদ্ধৃতি চিহ্ন-ই ব্যবহার করুন না কেন স্ট্রিং লিটেরেলের শুরুতে আর শেষে একই প্রকারের চিহ্ন ব্যবহার করতে হবে। নিচে কিছু স্ট্রিং লিটেরেলের উদাহরণ দেখুনঃ</p> + +<ul> + <li><code>"foo"</code></li> + <li><code>'bar'</code></li> + <li><code>"1234"</code></li> + <li><code>"one line \n another line"</code></li> + <li><code>"John's cat"</code></li> +</ul> + +<p>স্ট্রিং লিটেরেলে আপনি স্ট্রিং অবজেক্টের যেকোন ফাংশন কল করতে পারবেন - জাভাস্ক্রিপ্ট স্বয়ংক্রিয়ভাবে স্ট্রিং লিটেরেল কে অস্থায়ী অবজেক্টে কনভার্ট করে, এরপর মেথডটি কল করে, তারপর অস্থায়ী অবজেক্টটি ফেলে দেয়। আপনি <code>String.length </code>প্রোপার্টি ব্যবহার করতে পারেন স্ট্রিং লিটেরেলের ওপরঃ</p> + +<pre class="brush: js">"John's cat".length +</pre> + +<p>স্ট্রিং অবজেক্ট ব্যবহারেরে বিশেষ কোন কারণ না থাকলে আপনার উচিত হবে স্ট্রিং লিটেরেল-ই ব্যবহার করা। বিস্তারিত দেখুনঃ <a href="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#String_Object" title="en-US/docs/JavaScript/Guide/Predefined Core Objects#String Object">String Object</a> ।</p> + +<h4 id="স্ট্রিং_এ_বিশেষ_অক্ষর_ব্যবহার">স্ট্রিং এ বিশেষ অক্ষর ব্যবহার</h4> + +<p>গতানুগতিক অক্ষরের পাশাপাশি বিশেহ অক্ষ্র ও স্ট্রিং এ ব্যবহার করতে পারবেন, যেমনটা দেখানো হয়েছে উদাহরণেঃ</p> + +<pre class="brush: js">"one line \n another line" +</pre> + +<p>নিচের টেবিলে জাভাস্ক্রিপ্টের বিশেষ অক্ষরগুলো যেগুলো স্ট্রিং এ ব্যবহার করতে পারবেন সেগুলো দেখানো হয়েছেঃ</p> + +<table class="standard-table"> + <caption>টেবিল ২.১ জাভাস্ক্রিপ্টের বিশেষ অক্ষর</caption> + <thead> + <tr> + <th scope="col">অক্ষর</th> + <th scope="col">অর্থ</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\b</code></td> + <td>Backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Form feed</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>নতুন লাইন</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Carriage return</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Tab</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Vertical tab</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>ঊর্ধকমা or single quote</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>Double quote</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>Backslash character (\).</td> + </tr> + <tr> + <td><code>\<em>XXX</em></code></td> + <td>Latin-1 এনকোডিং সহ অক্ষরটি 0 এবং 377 এর মধ্যে তিনটি অক্টাল সংখ্যা দ্বারা XXX নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, \251 হল কপিরাইট প্রতীকের অকটাল ক্রম।</td> + </tr> + <tr> + <td><code>\x<em>XX</em></code></td> + <td>Latin-1 এনকোডিং সহ অক্ষরটি 00 এবং FF এর মধ্যকার সংখ্যাগুলি দ্বারা XXX নির্দিষ্ট করা হয়েছে। উদাহরণস্বরূপ, \xA9 হল কপিরাইট প্রতীকের হেক্সাডেসিমেল ক্রম।</td> + </tr> + <tr> + <td><code>\u<em>XXXX</em></code></td> + <td>ইউনিকোড অক্ষর চারটি হেক্সাডেসিমেল সংখ্যা দ্বারা XXXX নির্দিষ্ট করা হয়। উদাহরণস্বরূপ, \u00A9 হল কপিরাইট প্রতীকের ইউনিকোড ক্রম। {{anch("Unicode escape sequences")}} এ দেখুন.</td> + </tr> + </tbody> +</table> + +<h4 id="অক্ষর_এস্কেপ_(escape)_করা">অক্ষর এস্কেপ (escape) করা</h4> + +<p>যেই অক্ষরগুলো টেবিল ২.১ এ দেখানো হয়নি সেগুলোর সামনের ব্যাক-স্ল্যাশ অগ্রাহ্য করা হয়। কিন্তু এই ব্যবহার নিরুতসাহিত করা হয় এবং করাও উচিত নয়।</p> + +<p>স্ট্রিং এর মধ্যে উদ্ধৃতি চিহ্ন দিতে পারেন এটির সামনে ব্যাক-স্ল্যাশ ব্যবহার করে। এটি-ই <em>এসকেপ</em> করা (উদ্ধৃতি চিহ্ন কে) হিসেবে পরিচিত। যেমনঃ</p> + +<pre class="brush: js">var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."; +console.log(quote); +</pre> + +<p>এর ফলাফল হবে এমনঃ</p> + +<pre class="eval">He read "The Cremation of Sam McGee" by R.W. Service. +</pre> + +<p>অবশ্য স্ট্রিং এ ব্যাক-স্ল্যাশ ব্যবহার করতে একেও এসকেপ করতে হবে! যেমন, স্ট্রিং এ <code>c:\temp</code> মান ব্যবহার করতে চাইলেঃ</p> + +<pre class="brush: js">var home = "c:\\temp"; +</pre> + +<p>লাইন-বিরতি এসকেপ করতে পারেন সেগুলোর আগে ব্যাক-স্ল্যাশ ব্যবহার করে। ব্যাক-স্ল্যাশ আর লাইন-বিরতি (কীবোর্ডের এন্টার চেপে লাইন বিরতি দেওয়া যায়) দুটোই স্ট্রিং এর মান থেকে সরিয়ে নেওয়া হবেঃ</p> + +<pre class="brush: js">var str = "this string \ +is broken \ +across multiple\ +lines." +<span class="objectBox objectBox-text">console.log(str);</span> // <span class="objectBox objectBox-text">this string is broken across multiplelines.</span> +</pre> + +<p>যদিও জাভাস্ক্রিপ্টে "heredoc" সিন্ট্যাক্স নেই, আপনি কাছাকাছি কিছু একটা পেতে পারেন লাইন-বিরতি এসকেপ ব্যবহার করে আর এসকেপ করা লাইনব্রেক প্রতি লাইনের শেষে দিয়েঃ</p> + +<pre class="brush: js">var poem = +"Roses are red,\n\ +Violets are blue.\n\ +I'm schizophrenic,\n\ +And so am I." +</pre> + +<h2 id="ইউনিকোড">ইউনিকোড</h2> + +<p>ইউনিকোড হচ্ছে বিশ্বব্যাপী স্বীকৃত ক্যারেকটার-কোডিং স্ট্যান্ডার্ড, কোন ভাষা (যেমনঃ বাংলা) লেখার জন্য ব্যবহৃত হয়। আমেরিকা, ইউরোপ, মধ্যপ্রাচ্য, আফ্রিকা, ভারত, এশিয়া, প্যাসিফিকা সব অঞ্চলের ভাষার-ই সাপোর্ট আছে ইউনিকোডে। শুধু তাই নয় ঐতিহাসিক পাণ্ডুলিপি আর টেকনিক্যাল সিম্বল দেওয়ার ও ব্যবস্থা আছে। পৃথিবীর বিভিন্ন ভাষায় লেখালেখির আদান-প্রদান, প্রসেস করা, উপ্সথাপন করা সবকিছুই ইউনিকোড দিয়ে করা যায় (যেমনটা আপনারা এখন এই লেখাটা বাংলায় পড়তে পারছেন ইউনিকোড এর জন্য-ই!)। এছাড়া সাধারণ গাণিতিক আর টেকনিকাল চিহ্ন-ও দেওয়া যায়। বহুভাষায় কম্পিউটিং করার যে আন্তর্জাতিক সমস্যা ছিল, ইউনিকোড তার সমাধান করেছে। অবশ্য নতুন কিছু ভাষা বা প্রাগৈতিহাসিক পাণ্ডুলিপির জন্য সাপোর্ট নাও পেতে পারেন।</p> + +<p>সব এনকোডিং এর জন্যে-ই ইউনিকোড বর্ণমালা ব্যবহার করা যায়। ASCII (American Standard Code for Information Interchange) বর্ণমালার ওপর ভিত্তি করে ইউনিকোড মডেল করা হয়েছে। প্রত্যেকটি হরফের জন্য এটি একটি সংখ্যা আর নাম ব্যবহার করে। এই সংখ্যাটি'র বিট রিপ্রেজেন্টেশন ও ক্যারেক্টার এনকোডিং এ বলা থাকে। ১৬-বিটের সংখ্যাটি হেক্সাডেসিমালে প্রকাশ করা হয়, আর এর সামনে থাকে U অক্ষরটি। যেমন, U+0041 দিয়ে A বুঝানো হয়। আর এই অক্ষরটির অনন্য নাম হল LATIN CAPITAL LETTER A।</p> + +<p><strong>জাভাস্ক্রিপ্টের ১.৩ এর আগের ভার্সনে ইউনিকোড সাপোর্ট নেই।</strong></p> + +<h3 id="ASCII_এবং_ISO_এর_সাথে_ইউনিকোড_কম্প্যাটিবিলিটি">ASCII এবং ISO এর সাথে ইউনিকোড কম্প্যাটিবিলিটি</h3> + +<p>ইউনিকোড আন্তর্জাতিক স্ট্যান্ডার্ড ISO/IEC 10646-1; 1993 দ্বারা সম্পূর্ণভাবে সমর্থিত, যেটা কিনা ISO 10646 এর অংশ।</p> + +<p>বেশকিছু ইউনিকোড স্ট্যান্ডার্ড (UTF-8, UTF-16 এবং ISO UCS-2 সহ) ব্যবহার করা হয় ইউনিকোড কে বিট হিসেবে দেখানোর জন্য। (মানে ব্যবহারিক প্রয়োগের জন্য!)</p> + +<p>ইউনিকোডের 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) দু'টি অক্টেট ব্যবহার করে।</p> + +<p>UTF-8/ইউনিকোডের জন্য জাভাস্ক্রিপ্ট আর নেভিগেটরের সাপোর্ট থাকার ফলাফল স্বরূপ আপনি ল্যাটিন নয়-এমন, আন্তর্জাতিক আর এলাকাভিত্তিক, আপনার নিজের ভাষার বর্ণমালা ব্যবহার করতে পারছেন, আরো পারছেন বিশেষ সব টেকনিকাল হরফ ব্যবহার করতে। বহুভাষায় ভাব প্রকাশ সমর্থন করার জন্য ইউনিকোড একটি স্ট্যান্ডার্ড পদ্ধতি। যেহেতু ইউনিকোডের UTF-8 এনকোডিং ASCII সমর্থন করে, প্রোগ্রামগুলো ASCII বর্ণমালাও ব্যবহার করতে পারে ইউনিকোডের পাশাপাশি, আর ASCII নয় এমন বর্ণমালা (যেমন, বাংলা!) ও ব্যবহার করতে পারেন জাভাস্ক্রিপ্টের কমেন্টে, স্ট্রিং লিটেরেলে, ভ্যারিয়েবলের আইডেন্টিফায়ারে, রেগুলার এক্সপ্রেশনে।</p> + +<h3 id="ইউনিকোড_এসকেপ_সিকোয়েন্স">ইউনিকোড এসকেপ সিকোয়েন্স</h3> + +<p>আপনি স্ট্রিং লিটেরেল, রেগুলার এক্সপ্রেশন আর ভ্যারিয়েবলের আইডেন্টিফায়ারে ইউনিকোড এসকেপ সিকোয়েন্স ব্যবহার করতে পারেন। এসকেপ সিকোয়েন্সে ৬টি ASCII অক্ষর থাকেঃ \u আর ৪-ডিজিটের হেক্সাডেসিমেল সংখ্যা। যেমনঃ \u00A9 দিয়ে কপিরাইট চিহ্নটিকে প্রকাশ করা হয়। আর বুঝতেই পারছেন, প্রতিটি এসকেপ সিকোয়েন্স দিয়ে ১টি মাত্র অক্ষর প্রকাশ করা হয়।</p> + +<p>নিচের কোডে দেখিয়েছি কিভাবে কপিরাইট চিহ্ন আর "Netscape Communications" স্ট্রিংটি তৈরি করা হয়েছেঃ</p> + +<pre class="brush: js">var x = "\u00A9 Netscape Communications";</pre> + +<p>নিচের সারণিতে প্রায়-ই ব্যবহার করা হয় এমন কিছু বিশেষ অক্ষর আর তাদের ইউনিকোড ভ্যালু দেওয়া হলঃ</p> + +<table class="standard-table"> + <caption>সারণী ২.২ বিশেষ অক্ষরের ইউনিকোড মান</caption> + <thead> + <tr> + <th scope="col">প্রকৃতি</th> + <th scope="col">ইউনিকোড মান</th> + <th scope="col">নাম</th> + <th scope="col">ফর্ম্যাট</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="4">White space values</td> + <td>\u0009</td> + <td>Tab</td> + <td><TAB></td> + </tr> + <tr> + <td>\u000B</td> + <td>Vertical Tab</td> + <td><VT></td> + </tr> + <tr> + <td>\u000C</td> + <td>Form Feed</td> + <td><FF></td> + </tr> + <tr> + <td>\u0020</td> + <td>Space</td> + <td><SP></td> + </tr> + <tr> + <td rowspan="2">Line terminator values</td> + <td>\u000A</td> + <td>Line Feed</td> + <td><LF></td> + </tr> + <tr> + <td>\u000D</td> + <td>Carriage Return</td> + <td><CR></td> + </tr> + <tr> + <td rowspan="5">Additional Unicode escape sequence values</td> + <td>\u0008</td> + <td>Backspace</td> + <td><BS></td> + </tr> + <tr> + <td>\u0009</td> + <td>Horizontal Tab</td> + <td><HT></td> + </tr> + <tr> + <td>\u0022</td> + <td>Double Quote</td> + <td>"</td> + </tr> + <tr> + <td>\u0027</td> + <td>Single Quote</td> + <td>'</td> + </tr> + <tr> + <td>\u005C</td> + <td>Backslash</td> + <td>\</td> + </tr> + </tbody> +</table> + +<p>জাভাস্ক্রিপ্টে ব্যবহৃত এসকেপ সিকোয়েন্স আর জাভাতে এর ব্যবহারের মাঝে পার্থক্য আছে। জাভাস্ক্রিপ্টে কখনোই এস্কেপ সিকোয়েন্স কে বিশেষ কোন অক্ষর হিসেবে ধরা হয় না প্রথমে। যেমন, কোন স্ট্রিং এর ভেতর লাইন-শেষ-করার-জন্য কোন এসকেপ সিকোয়েন্স ব্যবহার করলে সেটি লাইন বিরতি দেয় না, যতক্ষণ না ফাংশন একে ব্যবহার করছে। জাভাস্ক্রিপ্ট কমেন্টে ব্যবহার করা যেকোন এসকেপ সিকোয়েন্স উপেক্ষা করে। যদি কোন এসকেপ সিকোয়েন্স এক-লাইনের কমেন্টে ব্যবহার করা হয়, জাভা একে ইউনিকোড অক্ষর হিসেবে নেয়। স্ট্রিং লিটেরেলের ক্ষেত্রে জাভা কম্পাইলার প্রথমেই এসকেপ সিকোয়েন্সকে ইন্টারপ্রেট করে। যেমন, লাইন-বিরতি এস্কেপ অক্ষর (যেমন \u000A) যদি জাভায় ব্যবহার করেন, স্ট্রিং লিটেরেল টি ঐখানেই শেষ হয়ে যাবে। ফলস্বরূপ ত্রুটি তৈরি হবে কারণ জাভার স্ট্রিং লিটেরেলে লাইন-বিরতি চিহ্ন ব্যবহার করা যায় না। লাইন ফিড দেওয়ার জন্য জাভাতে আপনাকে \n ব্যবহার করতে হবে। জাভাস্ক্রিপ্টে এই \n এর কাজ এসকেপ সিকোয়েন্স দিয়েই করতে পারবেন।</p> + +<h3 id="জাভাস্ক্রিপ্ট_ফাইলে_ইউনিকোড_অক্ষর">জাভাস্ক্রিপ্ট ফাইলে ইউনিকোড অক্ষর</h3> + +<p><a href="/en-US/docs/Gecko" title="en-US/docs/Gecko">Gecko</a> এর পুরোনো ভার্সন ধরে নিত XUL যেই জাভাস্ক্রিপ্ট ফাইল লোড করে, সেগুলো ল্যাটিন-১ ক্যারেক্টার এনকোডিং এ আছে। Gecko ১.৮ আর পরের ভার্সনগুলোতে ফাইলটা যেই এনকোডিং এ থাকবে, সেই এনকোডিং ই ব্যবহার করা হয়। <a href="/en-US/docs/International_characters_in_XUL_JavaScript" title="en-US/docs/International_characters_in_XUL_JavaScript">XUL জাভাস্ক্রিপ্টে আন্তর্জাতিক অক্ষর</a> দেখুন আরো তথ্যের জন্য।</p> + +<h3 id="ইউনিকোড_ব্যবহার_করে_অক্ষর_দেখানো">ইউনিকোড ব্যবহার করে অক্ষর দেখানো</h3> + +<p>বিভিন্ন ভাষার অক্ষর কিংবা টেকনিকাল চিহ্ন দেখানোর জন্য ইউনিকোড ব্যবহার করুন। অক্ষরগুলো ঠিকমত দেখানোর জন্য ক্লায়েন্ট (যেমন মজিলা ফায়ারফক্স বা নেটস্কেপ) এর ইউনিকোড সমর্থন করা প্রয়োজন। এছাড়াও, ক্লায়েন্টের কাছে উপযুক্ত ইউনিকোড ফন্ট থাকাটাও দরকার, আর ক্লায়েন্ট যেই প্ল্যাটফর্মে আছে সেখানেও ইউনিকোড সমর্থন করতে হবে। প্রায়ই দেখা যায় ইউনিকোড ফন্ট যেটি ব্যবহার করা হয়েছে সেটি সব ইউনিকোড অক্ষর দেখায় না। কিছু প্ল্যাটফর্ম, যেমন উইন্ডোজ ৯৫ এ ইউনিকোডের আংশিক সমর্থন রয়েছে।</p> + +<p>ASCII নয় এমন অক্ষর ইনপুট নেওয়ার জন্য ক্লায়েন্টকে ইউনিকোড হিসেবে ইনপুট নিতে হবে। শুধুমাত্র স্ট্যান্ডার্ড কীবোর্ড ব্যবহার করেই ইউনিকোড-সমর্থিত অতিরিক্ত অক্ষরগুলো ইনপুট নেওয়া সম্ভব নয়। মাঝে মাঝে, ইউনিকোড ইনপুট নেওয়ার একমাত্র উপায় হয়ে দাড়ায় ইউনিকোড এসকেপ সিকোয়েন্স ব্যবহার করে।</p> + +<p>ইউনিকোড নিয়ে আরো তথ্যের জন্য দেখুন <a class="external" href="http://www.unicode.org/">Unicode হোমপেইজ</a> আর ইউনিকোড স্ট্যান্ডার্ড, ২.০ সংস্করণ, প্রকাশকঃ Addison-Wesley, 1996।</p> + +<h2 id="তথ্যাদি">তথ্যাদি</h2> + +<ul> + <li><a class="external" href="http://0xcc.net/jsescape/" title="Text Escaping and Unescaping in JavaScript">জাভাস্ক্রিপ্টে লেখা এসকেপ করা আর এসকেপ-না-করা</a> – অক্ষর কে জাভাস্ক্রিপ্ট ইউনিকোড অক্ষরে রূপান্তরের ইউটিলিটি।</li> +</ul> 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 +--- +<div>{{jsSidebar("জাভাস্ক্রিপ্ট গাইড")}}</div> + +<p class="summary">এই জাভাস্ক্রিপ্ট গাইডটি আপনাকে দেখাবে যে কিভাবে <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">জাভাস্ক্রিপ্ট</a> ব্যবহার করতে হয় এবং এই ল্যাঙ্গুয়েজ টি সম্পর্কে একটি ওভারভিউ প্রদান করবে। আপনি যদি আরও বেশি জানতে আগ্রহী হয়ে থাকেন, তাহলে দয়া করে <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">জাভাস্ক্রিপ্ট রেফেরেন্স</a> লিঙ্কটিতে প্রবেশ করুন।</p> + +<ul class="card-grid"> + <li><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction">ভূমিকাঃ</a></span> + + <p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">এই গাইড সম্পর্কে কিছু কথা</a><br> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript">জাভাস্ক্রিপ্ট সম্পর্কে কিছু কথা</a><br> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">জাভা ও জাভাস্ক্রিপ্ট</a><br> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">(ইকমাস্ক্রিপ্ট) ECMAScript</a><br> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">টুল সমুহ</a><br> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction#Hello_world">প্রথম জাভাস্ক্রিপ্ট প্রোগ্রামঃ Hello World</a></p> + </li> + <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Grammar_and_types">Grammar and types</a></span> + <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Basic syntax & comments</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Declarations</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Variable scope</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Variable hoisting</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Data structures and types</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literals</a></p> + </li> + <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></span> + <p><code><a href="/bn-BD/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/bn-BD/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p> + </li> + <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></span> + <p><code><a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Functions">ফাংশন</a></span> + + <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Functions#Defining_functions">Defining functions</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Functions#Calling_functions">Calling functions</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Functions#Function_scope">Function scope</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> & <a href="/bn-BD/docs/Web/JavaScript/Guide/Functions#Function_parameters">parameters</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Arrow functions</a></p> + </li> + <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Expressions_and_Operators">এক্সপ্রেশন এবং অপারেটর</a></span> + <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assignment</a> & <a href="/bn-BD/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparisons</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Arithmetic operators</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bitwise</a> & <a href="/bn-BD/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logical operators</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Conditional (ternary) operator</a></p> + </li> + <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a></span><a href="/bn-BD/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Number literals</a> + <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> object</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> object</a><br> + <a href="https://developer.mozilla.org/bn-BD/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> object</a></p> + </li> + <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Text_formatting">Text formatting</a></span> + <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String literals</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> object</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_strings">Template strings</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalization</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Regular_Expressions">রেগুলার এক্সপ্রেশন</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a></span> + + <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Indexed_collections#Array_comprehensions">Array comprehensions</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p> + </li> + <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Keyed_collections">Keyed collections</a></span> + <p><code><a href="/bn-BD/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> + <code><a href="/bn-BD/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> + <code><a href="/bn-BD/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> + <code><a href="/bn-BD/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> + </li> + <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Working_with_Objects">Working with objects</a></span> + <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Objects and properties</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Creating objects</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Defining methods</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p> + </li> + <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a></span> + <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Prototype-based OOP</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Creating object hierarchies</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Inheritance</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></span> + + <p><a href="/bn-BD/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iterators</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generator_comprehensions">Generator comprehensions</a></p> + </li> + <li><span><a href="/bn-BD/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></span> + <p><code><a href="/bn-BD/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handlers and traps</a><br> + <a href="/bn-BD/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Revocable Proxy</a><br> + <code><a href="/bn-BD/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> 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 +--- +<div>{{JsSidebar}}</div> + +<p class="summary"><strong>JavaScript</strong> (সংক্ষেপে <strong>JS</strong>) একটি lightweight ইন্টারপ্রেটেড বা যথাসময়ে কম্পাইল করা প্রোগ্রামিং ভাষা যাতে রয়েছে {{Glossary("First-class Function", "first-class functions")}}। যদিও এটি ওয়েব পেজের স্ক্রিপ্টিং ভাষা হিসেবে বেশি পরিচিত, এছাড়া <a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">ব্রাউজার ছাড়াও অন্যান্য জায়গায়</a> ব্যবহার করা হয়, যেমন <a class="external" href="https://nodejs.org/">node.js</a> and <a href="https://couchdb.apache.org/">Apache CouchDB</a>. JavaScript হল {{Glossary("Prototype-based programming", "prototype-based")}}, multi-paradigm, dynamic scripting language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. <a href="/en-US/docs/Web/JavaScript/About_JavaScript">JavaScript সম্পর্কে</a> আরো পড়ুন.</p> + +<p>সাইটের এই সেকশনটি JavaScript ভাষার জন্য নিবেদিত, এবং ওয়েব পেইজ অথবা হোস্ট এনভাইরনমেন্টের সাথে সম্পৃক্ত নয়। {{Glossary("API","APIs")}} সম্পর্কে জানতে <a href="https://developer.mozilla.org/en-US/docs/Web/API">Web APIs</a> এবং <a href="https://developer.mozilla.org/en-US/docs/Glossary/DOM">DOM</a> দেখুন।</p> + +<p>JavaScript স্ট্যান্ডার্ড এর নাম <a href="/bn-BD/docs/JavaScript/%E0%A6%AD%E0%A6%BE%E0%A6%B7%E0%A6%BE%E0%A6%B0_%E0%A6%B0%E0%A6%BF%E0%A6%B8%E0%A7%8B%E0%A6%B0%E0%A7%8D%E0%A6%B8" title="ECMAScript">ECMAScript</a>। ২০১২ সাল পর্যন্ত পাওয়া তথ্য অনুযায়ী সব <a href="https://kangax.github.io/compat-table/es5/">নতুন ব্রাউজার</a> ECMAScript 5.1 সমর্থন করে। পুরোনো ব্রাউজারগুলো অন্তত ECMAScript 3 সমর্থন করে। ২০১৫ সালের ১৭ জুন <a href="http://www.ecma-international.org">ECMA International</a> তার ষষ্ঠ প্রধান সংস্করণ প্রকাশ করে, আনুষ্ঠানিক ভাবে যা ECMAScript 2015 নামে অভিহিত, এবং সাধারন ভাবে এটি ECMAScript 6 বা ES6 নামে পরিচিত। তখন থেকেই বাৎসরিক প্রকাশ চক্র অনুযায়ী ECMAScript -এর মান প্রকাশিত হচ্ছে। এই ডকুমেন্টেশনটি সর্বশেষ খসড়া সংস্করণ, যা <a href="https://tc39.github.io/ecma262/">ECMAScript 2018</a> কে বোঝায়।</p> + +<p> JavaScript এর সাথে <a href="https://en.wikipedia.org/wiki/Java_%28programming_language%29">Java programming language</a> কে গুলিয়ে ফেলবেন না। "Java" এবং "JavaScript" উভয় প্রোগ্রামিং ভাষাই Oracle কোম্পানির ট্রেডমার্ক বা ট্রেডমার্ক হিসেবে নিবন্ধিত যুক্তরাষ্ট্র এবং অন্যান্য দেশে। যাইহোক, এই দুই প্রোগ্রামিং ভাষার বাক্য গঠন প্রণালী (syntax), শব্দার্থবিদ্যা(semantics), এবং ব্যবহার একেবারেই আলাদা।</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="টিউটোরিয়াল">টিউটোরিয়াল</h2> + +<p>জাভাস্ক্রিপ্ট দিয়ে কিভাবে প্রোগ্রাম করা হয় সেটা শিখুন টিউটোরিয়াল এবং নির্দেশিকার মাধ্যমে।</p> + +<h3 id="যারা_একেবারেই_নতুন">যারা একেবারেই নতুন</h3> + +<p>আপনি যদি জাভাস্ক্রিপ্ট শিখতে চান কিন্তু আপনার জাভাস্ক্রিপ্ট বা অন্য কোন প্রোগ্রামিং সম্পকে কোন পূর্ব অভিজ্ঞতা নেই তাহলে আমাদের জাভাস্ক্রিপ্ট শিক্ষাক্ষেত্রের দিকে এগিয়ে যান। নিম্নে সম্পূর্ণ মডিউলগুলো রয়েছে।</p> + +<p><strong><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">জাভাস্ক্রিপ্টের প্রথম ধাপ</a></strong></p> + +<p>জাভাস্ক্রিপ্ট এর বৈশিষ্ট “ভেরিয়েবল, স্ট্রিং, নাম্বারস, এবং এরেইস” এগুলোর আলোচনার সাথে কিছু মৌলিক প্রশ্নের উত্তর দিন যেমন “জাভাস্ক্রিপ্ট কি?”, “ এটা দেখতে কেমন?”, এবং “এটা কি করে?”</p> + +<p><strong><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">জাভাস্ক্রিপ্ট নির্মান অংশ</a></strong></p> + +<p>জাভাস্ক্রিপ্ট এর মৌলিক বৈশিষ্ট এর সাথে সাধারণভাবে সম্মুক্ষীন হওয়া বিভিন্ন ধরনের কোড ব্লকের দিকে আমাদের দৃষ্টি আকর্ষন করা যেমন conditional statements, loops, functions, এবং events. </p> + +<p><strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">জাভাস্ক্রিপ্ট অবজেক্ট এর পরিচিতি </a></strong></p> + +<p> জাভাস্ক্রিপ্ট এর অবজেক্ট ওরিন্টেড প্রকৃতিটা বুঝা গুরুত্বপূর্ণ যদি আপনি ভাষার জ্ঞান নিয়ে সামনে এগিয়ে যেতে চান এবং আধিক কার্যকর কোড লিখতে চান, এখানে আমাদের দেয়া মডিউল আপনাকে সহযোগিতা করবে।</p> + +<h3 id="জাভাস্ক্রিপ্ট_নির্দেশনা">জাভাস্ক্রিপ্ট নির্দেশনা</h3> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">জাভাস্কিপ্ট নির্দেশনা</a></dt> + <dd>জাভাস্ক্রিপ্ট ভাষা এর একটি বিস্তারিত নির্দেশনার উদ্দেশ্য যাদের জাভাস্ক্রিপ্ট বা অন্য কোনো প্রোগ্রামিং ভাষা সম্পর্কে পূর্বপর্তী অভিজ্ঞতা আছে ।</dd> +</dl> + +<h3 id="মধ্যবর্তী">মধ্যবর্তী</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">ক্লায়েন্ট সাইড ওয়েব </a> <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs">APIs</a></dt> +</dl> + +<p>ওয়েব সাইট বা এপ্লিকেশনগুলির জন্য ক্লায়েন্ট সাইড জাভাস্ক্রিপ্ট লেখার সময় API গুলি ব্যবহার শুরু করার আগে খুব বেশী দুরে যাবেন না--ব্রাউজার ও ওপারের্টং সিস্টেম চলন্ত অবস্থায় ইন্টারফেইসগুলি বিভিন্ন দিক সুচারু রূপে পরিচালনা করার জন্য বা এমনকি অন্য ওয়েব সাইট বা সেবাগুলি থেকে আসা ডাটা। এই মডিউলে আমরা এপিআই কি ? এবং কিভাবে খুবই প্রচলিত কিছু এপিআই আপনার ডেভেলপমেন্টের কাজে ব্যবহার করতে হয় সেই সম্পর্কে জানবো।</p> + +<dl> + <dt></dt> + <dt></dt> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">জাভাস্ক্রিপ্ট এর পুনঃউপস্থাপন</a></dt> + <dd>যারা মনে করে , তারা জাভাস্ক্রিপ্ট সম্পর্কে জানে, তাদের জন্য একটি সংক্ষিপ্ত বিবরণ।</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">জাভাস্ক্রিপ্ট এর ডাটার গঠনশৈলী </a></dt> + <dd>জাভাস্ক্রিপ্ট এর ডাটার গঠনশৈলী সম্পর্কে সংক্ষিপ্ত বিবরন।</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">সমতুল্যতা এবং অভিন্নতা </a></dt> +</dl> + +<p><code>জাভাস্ক্রিপ্ট তিন ধরনের মান সরবরাহ করে- তুলনার ক্ষেত্রে: কঠোর সমতার ক্ষেত্রে === এবং শিথিল সমতার ক্ষেত্রে == ।</code></p> + +<dl> + <dt> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures">Closures</a></dt> + <dd>closure হচ্ছে একটি ফাংশন এবং lexical environment এর সমাহার যেটি পূর্বেই ঘোষনা করা হয়েছে।</dd> +</dl> + +<h3 id="এডভান্স">এডভান্স</h3> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">ইনহেরিটেন্স এবং প্রোটোটাইপ চেইন</a></dt> + <dd>ব্যাপকভাবে ভুল বুঝা বুঝি এবং অবহেলা করা হচ্ছে প্রোটোটাইপ ইনহেরিটেন্স ব্যাখ্য ।</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">কঠোর মুড</a></dt> + <dd>কঠোর মুড( Strict mode ) এর সঙ্গা হচ্ছে যে আপনি এটি আরম্ভ করার পূর্বে কোনো ভেরিয়েবল ব্যবহার করতে পারবেন না। এটা ECMAScript 5 একটি সীমাবদ্ধতা, দ্রুত কর্মক্ষমতা এবং সহজ ডিবাগিংএর জন্য। </dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">জাভাস্ক্রিপ্টের অ্যারে টাইপ</a></dt> + <dd>জাভাস্ক্রিপ্টের অ্যারে নতুন বাইনারি তথ্য অ্যাক্সেসের জন্য একটি প্রক্রিয়া প্রদান করে।</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management">মেমরি ম্যানেজমেন্ট</a></dt> + <dd>মেমরীর জীবনচক্র এবং জাভাস্ক্রিপ্টের মধ্যেকার আবর্জনা সংগ্রহ।</dd> + <dt></dt> +</dl> +</div> + + + +<div class="column-half"> +<h2 id="Reference">Reference</h2> + +<p>ব্রাউজ করুন.সম্পূর্ণ <a href="/en-US/docs/Web/JavaScript/Reference">জেএস- রেফারেন্স</a> ডকুমেন্টেশন ।</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">Standard objects</a></dt> + <dd>Get to know standard built-in objects <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="The JavaScript Array global object is a constructor for arrays, which are high-level, list-like objects."><code>Array</code></a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" title="Creates a JavaScript Date instance that represents a single moment in time. Date objects are based on a time value that is the number of milliseconds since 1 January, 1970 UTC."><code>Date</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error" title="The Error constructor creates an error object. Instances of Error objects are thrown when runtime errors occur. The Error object can also be used as a base objects for user-defined exceptions. See below for standard built-in error types."><code>Error</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. In JavaScript every function is actually a Function object."><code>Function</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="The JSON object contains methods for parsing JavaScript Object Notation (JSON) and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own."><code>JSON</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="Math is a built-in object that has properties and methods for mathematical constants and functions. Not a function object."><code>Math</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="The Number JavaScript object is a wrapper object allowing you to work with numerical values. A Number object is created using the Number() constructor."><code>Number</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp" title="The RegExp constructor creates a regular expression object for matching text with a pattern."><code>RegExp</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="The String global object is a constructor for strings, or a sequence of characters."><code>String</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" title="The Map object is a simple key/value map. Any value (both objects and primitive values) may be used as either a key or a value."><code>Map</code></a>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap" title="The WeakMap object is a collection of key/value pairs in which the keys are objects and the values can be arbitrary values."><code>WeakMap</code></a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet" title="The WeakSet object lets you store weakly held objects in a collection."><code>WeakSet</code></a>, and others.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressions & operators</a></dt> + <dd>Learn more about the behavior of JavaScript's operators <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, and more.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Statements & declarations</a></dt> + <dd>Learn how <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do-while</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for-in</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try-catch</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if-else</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch">switch</a></code>, and more JavaScript statements and keywords work.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></dt> + <dd>Learn how to work with JS functions to develop your applications.</dd> +</dl> + +<h2 id="Tools_resources">Tools & resources</h2> + +<p>Helpful tools while writing and debugging your JavaScript code.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>, <a href="/en-US/docs/Tools/Web_Console">Web Console</a>, <a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/en-US/docs/Tools/Debugger">Debugger</a>, and more.</dd> + <dt><a class="external" href="http://www.getfirebug.com/">Firebug</a></dt> + <dd>Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Shells</a></dt> + <dd>A JavaScript shell allows you to quickly test snippets of JavaScript code.</dd> + <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> + <dd> + <p class="hero-header-text large">Collaboration made easy.</p> + </dd> + <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd>Stack Overflow questions tagged with "JavaScript".</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">JavaScript versions and release notes</a></dt> + <dd>Browse JavaScript's feature history and implementation status.</dd> +</dl> +</div> +</div> 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 +--- +<div>{{jsSidebar("Advanced")}}</div> + +<p>যেসব ডেভেলপার আগে ক্লাস-ভিত্তিক প্রোগ্রামিং ল্যাংগুয়েজে (যেমন সি++ বা জাভা) কোড করছেন, তারা জাভাস্ক্রিপ্টে কোড করতে গিয়ে একটু বিভ্রান্ত হবেন, কেননা জাভাস্ক্রিপ্ট একটি ডায়নামিক ল্যাংগুয়েজ আর এতে কোন <code>class</code> ইমপ্লিমেন্টেশন নেই ( যদিও <code>class </code>নামে একটি কীওয়ার্ড জাভাস্ক্রিপ্ট সংরক্ষণ করে রেখেছে - তাই এই নামে কোন ভ্যারিয়েবল তৈরি করতে পারবেন না )।</p> + +<p>জাভাস্ক্রিপ্টে ইনহেরিটেন্স বিষয়ক একটি মাত্র কন্সট্রাক্ট আছেঃ অবজেক্ট। সব অবজেক্ট এরই আরেকটা অবজেক্ট এর সাথে অভ্যন্তরীণ লিঙ্ক থাকে যাকে তার <strong>প্রটোটাইপ </strong>বলে। আবার এই প্রোটাটাইপ অবজেক্টের ও নিজস্ব একটি প্রটোটাইপ থাকে। এভাবে চলতেই থাকে, যতক্ষণ না আমরা <code>null</code> হিসেবে কোন অবজেক্টের প্রটোটাইপ পাই। <code>null</code> এর কোন প্রটোটাইপ থাকে না, তাই যখন null পাব তখন বুঝতে হবে <strong>প্রটোটাইপ চেইনের</strong> শেষপ্রান্তে এসে গেছি।</p> + +<p>প্রটোটাইপ মডেল কে অনেকে জাভাস্ক্রিপ্টের দুর্বলতা বললেও আসলে প্রটোটাইপ-ভিত্তিক ইনহেরিটেন্স মডেল সি++/জাভা ভিত্তিক ক্লাসিকাল মডেলের থেকে অনেক শক্তিশালী। যেমন, প্রটোটাইপ মডেল কে ভিত্তি করে আমরা সহজেই ক্ল্যাসিকাল মডেল তৈরি করতে পারি, কিন্তু ক্লাসিকাল মডেলের ওপর ভিত্তি করে চাইলেই প্রটোটাইপ ভিত্তিক মডেল তৈরি করা সম্ভব না।</p> + +<h2 id="প্রটোটাইপ-চেইন_ভিত্তিক_ইনহেরিটেন্স">প্রটোটাইপ-চেইন ভিত্তিক ইনহেরিটেন্স</h2> + +<h3 id="প্রোপার্টি_ইনহেরিট_করা"><strong>প্রোপার্টি </strong>ইনহেরিট করা</h3> + +<p>জাভাস্ক্রিপ্টে অবজেক্ট কে আমরা বিভিন্ন <strong>প্রোপার্টির</strong> "ব্যাগ" (থলে) হিসেবে কল্পনা করতে পারিঃ এই ব্যাগে যেকোন সময় যেকোন প্রোপার্টি ঢুকানো যায়, ব্যাগ থেকে ফেলেও দেওয়া যায় (যে কারণে আমরা জাভাস্ক্রিপ্টকে ডায়নামিক বলি) । প্রতিটা অবজেক্টের সাথে একটা বিশেষ অবজেক্টের লিংক থাকে, এই বিশেষ অবজেক্ট টাকে আমরা মূল অবজেক্টটার প্রটোটাইপ বলি। আমরা যখন কোন অবজেক্টের কোন প্রোপার্টি কে ব্যবহার করতে চাই, তখন যা ঘটেঃ</p> + +<pre class="brush: js">// ধরে নেই, আমার 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 রিটার্ন করতে হবে। +</pre> + +<p>কোন অবজেক্টের প্রোপার্টি সেট করে দিলে সেটা সেই অবজেক্টের নিজস্ব প্রোপার্টি হিসেবে কাজ করে। একমাত্র ব্যতিক্রম হলঃ <a href="/bn-BD/docs/JavaScript/Guide/Working_with_Objects?redirectlocale=en-US&redirectslug=Core_JavaScript_1.5_Guide%2FWorking_with_Objects#Defining_getters_and_setters">getter অথবা setter</a> দিয়ে যখন ইনহেরিটেড প্রোপার্টি নিয়ে কাজ করা হয়।</p> + +<h3 id="মেথড_ইনহেরিট_করা">"মেথড" ইনহেরিট করা</h3> + +<p>ক্লাস-ভিত্তিক প্রোগ্রামিং ভাষাতে যেভাবে "মেথড" বা ফাংশন এর ধারণা প্রচলিত আছে, জাভাস্ক্রিপ্টে মেথডের ধারণা টা ঠিক সেভাবে নয়। জাভাস্ক্রিপ্টে, যেকোন ফাংশন সাধারণ প্রোপার্টির মতই অবজেক্টে যোগ করা যায়। ইনহেরিট করা ফাংশন অবজেক্টের বাদবাকি প্রোপার্টির মতই স্বাভাবিকভাবে কাজ করবে। উপরের উদাহরণে দেখানো property shadowing এখানেও কাজ করবে (এক্ষেত্রে একে বলা হবে <em>method overriding</em> বা ফাংশন ওভাররাইডিং)</p> + +<p>যখন ইনহেরিট-হওয়া কোন ফাংশন একজিকিউট হয়, তখন <a href="/bn-BD/JavaScript/Reference/Operators/this" title="this"><code>this</code></a> এর মান হিসেবে ইনহেরিট-হওয়া অবজেক্ট টা থাকে, প্রোটোটাইপ অবজেক্ট টা না যেখানে ফাংশনটা নিজস্ব প্রোপার্টি হিসেবে দেওয়া হয়েছিল।</p> + +<pre class="brush: js">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 এর নিজস্ব প্রোপার্টি। +</pre> + +<h2 id="অবজেক্ট_তৈরি_করার_বিভিন্ন_উপায়_এবং_ফলাফল_হিসেবে_প্রোটোটাইপ_চেইন">অবজেক্ট তৈরি করার বিভিন্ন উপায় এবং ফলাফল হিসেবে প্রোটোটাইপ চেইন</h2> + +<h3 id="সিন্ট্যাক্স_কন্সট্রাক্টস_ব্যবহার_করে_অবজেক্ট_তৈরি_করা">সিন্ট্যাক্স কন্সট্রাক্টস ব্যবহার করে অবজেক্ট তৈরি করা</h3> + +<pre class="brush: js">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 +</pre> + +<h3 id="কন্সট্রাক্টর_এর_সাহায্যে">কন্সট্রাক্টর এর সাহায্যে</h3> + +<p>জাভাস্ক্রিপ্টে "কন্সট্রাক্টর", "শুধুই" সাধারণ যেকোন ফাংশন যাকে কিনা <a href="/bn-BD/docs/Web/JavaScript/Reference/Operators/new?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FOperators%2Fnew" title="new">new</a> অপারেটর দিয়ে কল করা হয়।</p> + +<pre class="brush: js">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. +</pre> + +<h3 id="Object.create_দিয়ে">Object.create দিয়ে</h3> + +<p>ECMAScript 5 নতুন একটি মেথড নিয়ে এসেছেঃ <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="create">Object.create</a>। এই মেথড কল করলে নতুন একটি অবজেক্ট তৈরি হয় যার প্রোটোটাইপ হল মেথডটির প্রথম প্যারামিটারঃ</p> + +<pre class="brush: js">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 +</pre> + +<div> +<h3 id="পারদর্শীতা">পারদর্শীতা</h3> + +<p>কোন অবজেক্টে কোন প্রোপার্টি আছে কিনা সেটা জানার জন্য, অবজেক্টের পুরো প্রটোটাইপ-চেইন খুঁজে দেখতে হয়। কোডের পার্ফরমেন্সে এটা ভালই বাজে প্রভাব ফেলে। যেসব কোডের পারফরমেন্স খুব ভাল হওয়া দরকার, সেখানে এই ইস্যু প্রভাব ফেলতে পারে। অবজেক্টে কোন প্রোপার্টি খুঁজে না পেলে পুরো প্রোটোটাইপ চেইনের কোথাও প্রোপার্টি টা আছে কিনা খুঁজা হয়।</p> + +<p>এছাড়াও, অবজেক্টের প্রোপার্টি গুলো ঘুরে দেখার সময় (iterate করার সময়) প্রোটোটাইপ-চেইনের <strong>প্রত্যেকটা</strong> প্রোপার্টি খুঁজে দেখা (enumerate করা) হবে।</p> + +<p>অবজেক্টে কোন প্রোপার্টি শুধুমাত্র <em>নিজস্ব</em> প্রোপার্টি হিসেবে আছে কিনা (প্রোটোটাইপ চেইনের অন্য কোথাও নয়) <a href="/bn-BD/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> মেথড ব্যবহার উচিত। সব অবজেক্ট এই মেথডটাকে <code>Object.prototype থেকে ইনহেরিট করে।</code></p> + +<p>জাভাস্ক্রিপ্টে <a href="/bn-BD/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a>-ই একমাত্র ফাংশন যা প্রোপার্টি নিয়ে কাজ করে এবং পুরো প্রোটোটাইপ চেইন ঘুরে (traverse) <strong>না</strong>।</p> + + +<div class="note">খেয়াল করুনঃ কোন প্রোপার্টি <a href="/bn-BD/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> কিনা এই চেক করাই যথেষ্ট <strong>নয়</strong>। হতে পারে প্রোপার্টি টি বহাল তবিয়তেই আছে, কেবল এর মান <code>undefined</code> দেওয়া হয়েছে।</div> + +<div> +<h3 id="বদ_অভ্যাসঃ_নেটিভ_প্রোটোটাইপ_এক্সটেন্ড_করা">বদ অভ্যাসঃ নেটিভ প্রোটোটাইপ এক্সটেন্ড করা</h3> + +<p>একটা বাজে ব্যাপার প্রায়ই করা হয় তা হল <code>Object.prototype</code> অথবা অন্য কোন বিল্ট-ইন প্রটোটাইপ এক্সটেন্ড করা।</p> + +<p>এই পদ্ধতিকে বলা হয় monkey patching যা <em>encapsulation</em> এর সর্বনাশ ছাড়া আর কিছুই নয়। Prototype.js এর মত কিছু জনপ্রিয় ফ্রেমওয়ার্কে এর ব্যবহার দেখা গেলেও, স্ট্যান্ডার্ড-নয়, এমন ফিচার দিয়ে বিল্ট-ইন টাইপগুলোর বোঝা বাড়ানোর কোন মানে হয় না।</p> + +<p>বিল্ট-ইন টাইপ এক্সটেন্ড করার একমাত্র যৌক্তিক কারণ হতে পারে জাভাস্ক্রিপ্টের নতুন ফিচার গুলো পুরনো ইঞ্জিনে দেওয়া; যেমন <code>Array.forEach</code>, ইত্যাদি।</p> +</div> + +<div> +<h3 id="পরিশেষে">পরিশেষে</h3> + +<p>প্রটোটাইপ ইনহেরিটেন্স মডেল এর ভিত্তি করে জটিল জটিল কোড লেখার আগে একে ভালভাবে বুঝা <strong>উচিত</strong>। এছাড়াও, পারফরমেন্স জনিত সমস্যা থেকে দূরে থাকার জন্য লম্বা প্রটোটাইপ চেইন পরিহার করতে হবে আর যেখানে সম্ভব প্রটোটাইপ চেইন ভেঙ্গে ছোট করতে হবে। সবশেষে, জাভাস্ক্রিপ্টের নতুন ফিচার যাতে সব ইঞ্জিনেই চলে, শুধুমাত্র সেক্ষেত্রে নেটিভ প্রোটোটাইপ এক্সটেন্ড করা যাবে, এছাড়া এর ব্যবহার সর্বক্ষেত্রে <strong>নিরুৎসাহিত</strong> করা হয়।</p> +</div> +</div> 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 +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties.</p> + +<div class="onlyinclude"> +<p>The term "global objects" (or standard built-in objects) here is not to be confused with the <strong>global object</strong>. Here, global objects refer to <strong>objects in the global scope</strong> (but only if ECMAScript 5 strict mode is not used; in that case it returns <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>). The <strong>global object</strong> itself can be accessed using the {{jsxref("Operators/this", "this")}} operator in the global scope. In fact, the global scope <strong>consists of</strong> the properties of the global object, including inherited properties, if any.</p> + +<p>Other objects in the global scope are either <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">created by the user script</a> or provided by the host application. The host objects available in browser contexts are documented in the <a href="/en-US/docs/Web/API/Reference">API reference</a>. For more information about the distinction between the <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> and core <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h2 id="Standard_objects_by_category">Standard objects (by category)</h2> + +<h3 id="Value_properties">Value properties</h3> + +<p>These global properties return a simple value; they have no properties or methods.</p> + +<ul> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}} literal</li> +</ul> + +<h3 id="Function_properties">Function properties</h3> + +<p>These global functions—functions which are called globally rather than on an object—directly return their results to the caller.</p> + +<ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li> + <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li> +</ul> + +<h3 id="Fundamental_objects">Fundamental objects</h3> + +<p>These are the fundamental, basic objects upon which all other objects are based. This includes objects that represent general objects, functions, and errors.</p> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}} {{experimental_inline}}</li> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("EvalError")}}</li> + <li>{{jsxref("InternalError")}}</li> + <li>{{jsxref("RangeError")}}</li> + <li>{{jsxref("ReferenceError")}}</li> + <li>{{jsxref("SyntaxError")}}</li> + <li>{{jsxref("TypeError")}}</li> + <li>{{jsxref("URIError")}}</li> +</ul> + +<h3 id="Numbers_and_dates">Numbers and dates</h3> + +<p>These are the base objects representing numbers, dates, and mathematical calculations.</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("Math")}}</li> + <li>{{jsxref("Date")}}</li> +</ul> + +<h3 id="Text_processing">Text processing</h3> + +<p>These objects represent strings and support manipulating them.</p> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("RegExp")}}</li> +</ul> + +<h3 id="Indexed_collections">Indexed collections</h3> + +<p>These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.</p> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Int8Array")}}</li> + <li>{{jsxref("Uint8Array")}}</li> + <li>{{jsxref("Uint8ClampedArray")}}</li> + <li>{{jsxref("Int16Array")}}</li> + <li>{{jsxref("Uint16Array")}}</li> + <li>{{jsxref("Int32Array")}}</li> + <li>{{jsxref("Uint32Array")}}</li> + <li>{{jsxref("Float32Array")}}</li> + <li>{{jsxref("Float64Array")}}</li> +</ul> + +<h3 id="Keyed_collections">Keyed collections</h3> + +<p>These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.</p> + +<ul> + <li>{{jsxref("Map")}} {{experimental_inline}}</li> + <li>{{jsxref("Set")}} {{experimental_inline}}</li> + <li>{{jsxref("WeakMap")}} {{experimental_inline}}</li> + <li>{{jsxref("WeakSet")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Vector_collections">Vector collections</h3> + +<p>{{Glossary("SIMD")}} vector data types are objects where data is arranged into lanes.</p> + +<ul> + <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> + <li>{{jsxref("float32x4", "SIMD.float32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("float64x2", "SIMD.float64x2")}} {{experimental_inline}}</li> + <li>{{jsxref("int8x16", "SIMD.int8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("int16x8", "SIMD.int16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("int32x4", "SIMD.int32x4")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Structured_data">Structured data</h3> + +<p>These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> +</ul> + +<h3 id="Control_abstraction_objects">Control abstraction objects</h3> + +<ul> + <li>{{jsxref("Promise")}} {{experimental_inline}}</li> + <li>{{jsxref("Generator")}} {{experimental_inline}}</li> + <li>{{jsxref("GeneratorFunction")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Reflection">Reflection</h3> + +<ul> + <li>{{jsxref("Reflect")}} {{experimental_inline}}</li> + <li>{{jsxref("Proxy")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Internationalization">Internationalization</h3> + +<p>Additions to the ECMAScript core for language-sensitive functionalities.</p> + +<ul> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> +</ul> + +<h3 id="Non-standard_objects">Non-standard objects</h3> + +<ul> + <li>{{jsxref("Iterator")}} {{non-standard_inline}}</li> + <li>{{jsxref("ParallelArray")}} {{non-standard_inline}}</li> + <li>{{jsxref("StopIteration")}} {{non-standard_inline}}</li> +</ul> + +<h3 id="Other">Other</h3> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> +</ul> +</div> 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 +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h3 id="Summary" name="Summary">সারসংক্ষেপ</h3> + +<p>একটি আর্গুমেন্টকে যাচাই করে বলে এটি সসীম সংখ্যা কিনা।</p> + +<h3 id="Syntax" name="Syntax">সিনট্যাক্স</h3> + +<p><code>isFinite(<em>number</em>) </code></p> + +<h3 id="Parameters" name="Parameters">প্যারামিটার</h3> + +<dl> + <dt><code>number</code></dt> + <dd>যে সংখ্যাটিকে যাচাই করতে হবে।</dd> +</dl> + +<h3 id="Description" name="Description">বিবরণ</h3> + +<p><code>isFinite</code> একটি টপ লেভেল ফাংশন এবং কোন অবজেক্টের সঙ্গে সংশ্লিষ্ট নয়।</p> + +<p>এই ফাংশনটির সাহায্যে আপনি জানতে পারবেন কোন সংখ্যা সসীম সংখ্যা কিনা। <code>isFinite</code> এর আর্গুমেন্টে আসা সংখ্যাটিকে পরীক্ষা করে দেখে। আর্গুমেন্টটি <code>NaN, ধনাত্বক অসীম অথবা ঋণাত্মক অসীম হলে এই মেথডটি</code> <code>false</code> রিটার্ন করে; নয়তো <code>true</code> রিটার্ন করে।</p> + +<h3 id="Examples" name="Examples">উদাহরণ</h3> + +<h4 id="Example:_Using_isFinite" name="Example:_Using_isFinite">উদাহরণ: <code>isFinite</code> ব্যবহার করা</h4> + +<p>আপনি আপনার ক্লায়েন্টের ইনপুট নিয়ে পরীক্ষা করে দেখতে পারেন তা সসীম সংখ্যা কিনা।</p> + +<pre class="brush: js">if (isFinite(ClientInput)) { + /* take specific steps */ +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 2nd Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">See also</h2> + +<ul> + <li>{{jsxref("Number.isFinite()")}}</li> + <li>{{jsxref("Number.NaN()")}}</li> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Number</code></strong> JavaScript object is a wrapper object allowing you to work with numerical values. A <code>Number</code> object is created using the <code>Number()</code> constructor.</p> + +<h2 id="Syntax" name="Syntax">Constructor</h2> + +<pre class="syntaxbox">new Number(value);</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<dl> + <dt><code>value</code></dt> + <dd>The numeric value of the object being created.</dd> +</dl> + +<h2 id="Description" name="Description">Description</h2> + +<p>The primary uses for the <code>Number</code> object are:</p> + +<ul> + <li>If the argument cannot be converted into a number, it returns {{jsxref("Global_Objects/NaN", "NaN")}}.</li> + <li>In a non-constructor context (i.e., without the {{jsxref("Operators/new", "new")}} operator), <code>Number</code> can be used to perform a type conversion.</li> +</ul> + +<h2 id="Properties" name="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("Number.EPSILON")}} {{experimental_inline}}</dt> + <dd>The smallest interval between two representable numbers.</dd> + <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}} {{experimental_inline}}</dt> + <dd>The maximum safe integer in JavaScript (<code>2<sup>53</sup> - 1</code>).</dd> + <dt>{{jsxref("Number.MAX_VALUE")}}</dt> + <dd>The largest positive representable number.</dd> + <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}} {{experimental_inline}}</dt> + <dd>The minimum safe integer in JavaScript (<code>-(2<sup>53</sup> - 1)</code>).</dd> + <dt>{{jsxref("Number.MIN_VALUE")}}</dt> + <dd>The smallest positive representable number - that is, the positive number closest to zero (without actually being zero).</dd> + <dt>{{jsxref("Number.NaN")}}</dt> + <dd>Special "not a number" value.</dd> + <dt>{{jsxref("Number.NEGATIVE_INFINITY")}}</dt> + <dd>Special value representing negative infinity; returned on overflow.</dd> + <dt>{{jsxref("Number.POSITIVE_INFINITY")}}</dt> + <dd>Special value representing infinity; returned on overflow.</dd> + <dt>{{jsxref("Number.prototype")}}</dt> + <dd>Allows the addition of properties to a <code>Number</code> object.</dd> +</dl> + +<div>{{jsOverrides("Function", "properties", "MAX_VALUE", "MIN_VALUE", "NaN", "NEGATIVE_INFINITY", "POSITIVE_INFINITY", "protoype")}}</div> + +<h2 id="Methods" name="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Number.isNaN()")}} {{experimental_inline}}</dt> + <dd>Determine whether the passed value is NaN.</dd> + <dt>{{jsxref("Number.isFinite()")}} {{experimental_inline}}</dt> + <dd>Determine whether the passed value is a finite number.</dd> + <dt>{{jsxref("Number.isInteger()")}} {{experimental_inline}}</dt> + <dd>Determine whether the passed value is an integer.</dd> + <dt>{{jsxref("Number.isSafeInteger()")}} {{experimental_inline}}</dt> + <dd>Determine whether the passed value is a safe integer (number between <code>-(2<sup>53</sup> - 1)</code> and <code>2<sup>53</sup> - 1</code>).</dd> + <dt><s class="obsoleteElement">{{jsxref("Number.toInteger()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Used to evaluate the passed value and convert it to an integer (or {{jsxref("Global_Objects/Infinity", "Infinity")}}), but has been removed.</s></dd> + <dt>{{jsxref("Number.parseFloat()")}} {{experimental_inline}}</dt> + <dd>The value is the same as {{jsxref("Global_Objects/parseFloat", "parseFloat")}} of the global object.</dd> + <dt>{{jsxref("Number.parseInt()")}} {{experimental_inline}}</dt> + <dd>The value is the same as {{jsxref("Global_Objects/parseInt", "parseInt")}} of the global object.</dd> +</dl> + +<div>{{jsOverrides("Function", "Methods", "isNaN")}}</div> + +<h2 id="Number_instances" name="Number_instances"><code>Number</code> instances</h2> + +<p>All <code>Number</code> instances inherit from {{jsxref("Number.prototype")}}. The prototype object of the <code>Number</code> constructor can be modified to affect all <code>Number</code> instances.</p> + +<h3 id="Methods_of_Number_instance" name="Methods_of_Number_instance">Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype', 'Methods')}}</div> + +<h2 id="Examples" name="Examples">Examples</h2> + +<h3 id="Example:_Using_the_Number_object_to_assign_values_to_numeric_variables" name="Example:_Using_the_Number_object_to_assign_values_to_numeric_variables">Example: Using the <code>Number</code> object to assign values to numeric variables</h3> + +<p>The following example uses the <code>Number</code> object's properties to assign values to several numeric variables:</p> + +<pre class="brush: js">var biggestNum = Number.MAX_VALUE; +var smallestNum = Number.MIN_VALUE; +var infiniteNum = Number.POSITIVE_INFINITY; +var negInfiniteNum = Number.NEGATIVE_INFINITY; +var notANum = Number.NaN; +</pre> + +<h3 id="Example:_Using_Number_to_convert_a_Date_object" name="Example:_Using_Number_to_convert_a_Date_object">Example: Integer range for <code>Number</code></h3> + +<p>The following example shows minimum and maximum integer values that can be represented as <code>Number</code> object (for details, refer to EcmaScript standard, chapter <em>8.5 The Number Type</em>):</p> + +<pre class="brush: js">var biggestInt = 9007199254740992; +var smallestInt = -9007199254740992; +</pre> + +<p>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 <code>Number</code> type. Using {{jsxref("Global_Objects/String", "String")}} instead is a possible workaround.</p> + +<h3 id="Example:_Using_Number_to_convert_a_Date_object" name="Example:_Using_Number_to_convert_a_Date_object">Example: Using <code>Number</code> to convert a <code>Date</code> object</h3> + +<p>The following example converts the {{jsxref("Global_Objects/Date", "Date")}} object to a numerical value using <code>Number</code> as a function:</p> + +<pre class="brush: js">var d = new Date('December 17, 1995 03:24:00'); +print(Number(d)); +</pre> + +<p>This displays "819199440000".</p> + +<h3 id="Example_Convert_numeric_strings_to_numbers">Example: Convert numeric strings to numbers</h3> + +<pre class="brush: js">Number("123") // 123 +Number("") // 0 +Number("0x11") // 17 +Number("0b11") // 3 +Number("0o11") // 9 +Number("foo") // NaN +Number("100a") // NaN +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7', 'Number')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number-objects', 'Number')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>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")}})</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{jsxref("Global_Objects/NaN", "NaN")}}</li> + <li>The {{jsxref("Global_Objects/Math", "Math")}} global object</li> +</ul> 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 +--- +<div> +<div>{{JSRef}}</div> +</div> + +<h2 id="সারসংক্ষেপ">সারসংক্ষেপ</h2> + +<p>পাস করা ভ্যালু সসীম কিনা তা জানায়। গ্লোবাল <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isFinite"><code>isFinite</code></a> এর উন্নততর সংস্করণ।</p> + +<h2 id="Syntax" name="Syntax">সিনট্যাক্স</h2> + +<pre class="syntaxbox"><code>Number.isFinite(test<em>Value</em>);</code></pre> + +<h3 id="Parameters" name="Parameters">প্যারামিটার</h3> + +<dl> + <dt><code>test<em>Value</em></code></dt> + <dd>সে সংখ্যা পরীক্ষা করে বলা হবে সসীম কিনা।</dd> +</dl> + +<h2 id="বিবরণ">বিবরণ</h2> + +<p>গ্লোবাল <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isFinite"><code>isFinite</code></a> ফাংশনটির সঙ্গে তুলনা করে বলা যায়, এই মেথডটি জোর পূর্বক প্যারামিটারকে সংখ্যার রুপান্তর করে না। কেবলমাত্র যে সকল নাম্বার টাইপের আর্গুমেন্ট সসীম সংখ্যা হবে, তাদের জন্যই মেথডটি <code>true</code> রিটার্ন করবে।</p> + +<h2 id="উদাহরণ">উদাহরণ</h2> + +<pre class="brush:js;">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 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">Number.isFinite = Number.isFinite || function(value) { + return typeof value === "number" && isFinite(value); +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td> + <p>{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}</p> + </td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("19")}}</td> + <td>{{CompatGeckoDesktop("16")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("15")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>The {{jsxref("Global_Objects/Number", "Number")}} object it belongs to.</li> +</ul> 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 +--- +<div>{{JsSidebar}}</div> + +<p>This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more <a href="/en-US/docs/Web/JavaScript/Reference/About">about this reference</a>.</p> + +<h2 id="Global_Objects">Global Objects</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript standard built-in objects</a>, along with their methods and properties.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard objects (by category)')}}</div> + +<h2 id="Statements">Statements</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> + +<h2 id="Expressions_and_operators">Expressions and operators</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript expressions and operators</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> + +<h2 id="Functions">Functions</h2> + +<p>This chapter documents how to work with <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript functions</a> to develop your applications.</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li> +</ul> + +<h2 id="Additional_reference_pages">Additional reference pages</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>জাভাস্ক্রিপ্ট স্টেটমেন্ট এর মধ্যে কিওয়ার্ড থাকে, যা যথাযথ সিনট্যাক্স এর সাথে ব্যবহার করা হয়। একটি একক স্টেটমেন্ট এর মধ্যে একাধিক লাইন থাকতে পারে। সেমিকোলন দিয়ে আলাদা করা হলে একাধিক স্টেটমেন্ট এক লাইনেই লেখা সম্ভব। এক্ষেত্রে একটি কিওয়ার্ড হবে না, কিওয়ার্ড এর একটি গ্রুপ হবে।</p> + +<h2 id="Statements_and_declarations_by_category">Statements and declarations by category</h2> + +<p>For an alphabetical listing see the sidebar on the left.</p> + +<h3 id="Control_flow">Control flow</h3> + +<dl> + <dt>{{jsxref("Statements/block", "Block")}}</dt> + <dd>A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.</dd> + <dt>{{jsxref("Statements/break", "break")}}</dt> + <dd>Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.</dd> + <dt>{{jsxref("Statements/continue", "continue")}}</dt> + <dd>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.</dd> + <dt>{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd> + <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd>Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</dd> + <dt>{{jsxref("Statements/switch", "switch")}}</dt> + <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd> + <dt>{{jsxref("Statements/throw", "throw")}}</dt> + <dd>Throws a user-defined exception.</dd> + <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd> +</dl> + +<h3 id="Declarations">Declarations</h3> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Declares a variable, optionally initializing it to a value.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> + <dd>Declares a block scope local variable, optionally initializing it to a value.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> + <dd>Declares a read-only named constant.</dd> +</dl> + +<h3 id="Functions_and_classes">Functions and classes</h3> + +<dl> + <dt>{{jsxref("Statements/function", "function")}}</dt> + <dd>Declares a function with the specified parameters.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/function*", "function*")}}</dt> + <dd>Generators functions enable writing <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Specifies the value to be returned by a function.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/class", "class")}}</dt> + <dd>Declares a class.</dd> +</dl> + +<h3 id="Iterations">Iterations</h3> + +<dl> + <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd>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.</dd> + <dt>{{jsxref("Statements/for", "for")}}</dt> + <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd> + <dt>{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd> + <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}</dt> + <dd>Iterates over iterable objects (including <a href="https://developer.mozilla.org/en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="Array">arrays</a>, array-like objects, <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Iterators_and_Generators" title="Iterators and generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd> + <dt>{{jsxref("Statements/while", "while")}}</dt> + <dd>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.</dd> +</dl> + +<h3 id="Others">Others</h3> + +<dl> + <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/export", "export")}}</dt> + <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/import", "import")}}</dt> + <dd>Used to import functions exported from an external module, another script.</dd> + <dt>{{jsxref("Statements/label", "label")}}</dt> + <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd> +</dl> + +<dl> + <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> + <dd>Extends the scope chain for a statement.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: function*, let, for...of, yield, class</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> +</ul> 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 +--- +<div>Swa{{JsSidebar("Advanced")}}</div> + +<p><span class="seoSummary"><strong>JavaScript typed arrays</strong> are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers.</span> 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.</p> + +<p>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.</p> + +<p>However, typed arrays are <em>not</em> to be confused with normal arrays, as calling {{jsxref("Array.isArray()")}} on a typed array returns <code>false</code>. Moreover, not all methods available for normal arrays are supported by typed arrays (e.g. push and pop).</p> + +<h2 id="Buffers_and_views_typed_array_architecture">Buffers and views: typed array architecture</h2> + +<p>To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into <strong>buffers</strong> and <strong>views</strong>. 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.</p> + +<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p> + +<h3 id="ArrayBuffer">ArrayBuffer</h3> + +<p>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 <code>ArrayBuffer</code>; 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.</p> + +<h3 id="Typed_array_views">Typed array views</h3> + +<p>Typed array views have self-descriptive names and provide views for all the usual numeric types like <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> and so forth. There is one special typed array view, the <code>Uint8ClampedArray</code>. It clamps the values between 0 and 255. This is useful for <a href="/en-US/docs/Web/API/ImageData">Canvas data processing</a>, for example.</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">Type</th> + <th class="header" scope="col">Value Range</th> + <th class="header" scope="col">Size in bytes</th> + <th class="header" scope="col">Description</th> + <th class="header" scope="col">Web IDL type</th> + <th class="header" scope="col">Equivalent C type</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Int8Array")}}</td> + <td><code>-128</code> to <code>127</code></td> + <td>1</td> + <td>8-bit two's complement signed integer</td> + <td><code>byte</code></td> + <td><code>int8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8Array")}}</td> + <td><code>0</code> to <code>255</code></td> + <td>1</td> + <td>8-bit unsigned integer</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8ClampedArray")}}</td> + <td><code>0</code> to <code>255</code></td> + <td>1</td> + <td>8-bit unsigned integer (clamped)</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int16Array")}}</td> + <td><code>-32768</code> to <code>32767</code></td> + <td>2</td> + <td>16-bit two's complement signed integer</td> + <td><code>short</code></td> + <td><code>int16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint16Array")}}</td> + <td><code>0</code> to <code>65535</code></td> + <td>2</td> + <td>16-bit unsigned integer</td> + <td><code>unsigned short</code></td> + <td><code>uint16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int32Array")}}</td> + <td><code>-2147483648</code> to <code>2147483647</code></td> + <td>4</td> + <td>32-bit two's complement signed integer</td> + <td><code>long</code></td> + <td><code>int32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint32Array")}}</td> + <td><code>0</code> to <code>4294967295</code></td> + <td>4</td> + <td>32-bit unsigned integer</td> + <td><code>unsigned long</code></td> + <td><code>uint32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Float32Array")}}</td> + <td><code>1.2</code><span style="">×</span><code>10<sup>-38</sup></code> to <code>3.4</code><span style="">×</span><code>10<sup>38</sup></code></td> + <td>4</td> + <td>32-bit IEEE floating point number (7 significant digits e.g., <code>1.123456</code>)</td> + <td><code>unrestricted float</code></td> + <td><code>float</code></td> + </tr> + <tr> + <td>{{jsxref("Float64Array")}}</td> + <td><code>5.0</code><span style="">×</span><code>10<sup>-324</sup></code> to <code>1.8</code><span style="">×</span><code>10<sup>308</sup></code></td> + <td>8</td> + <td>64-bit IEEE floating point number (16 significant digits e.g., <code>1.123...15</code>)</td> + <td><code>unrestricted double</code></td> + <td><code>double</code></td> + </tr> + <tr> + <td>{{jsxref("BigInt64Array")}}</td> + <td><code>-2<sup>63</sup></code> to <code>2<sup>63</sup>-1</code></td> + <td>8</td> + <td>64-bit two's complement signed integer</td> + <td><code>bigint</code></td> + <td><code>int64_t (signed long long)</code></td> + </tr> + <tr> + <td>{{jsxref("BigUint64Array")}}</td> + <td><code>0</code> to <code>2<sup>64</sup>-1</code></td> + <td>8</td> + <td>64-bit unsigned integer</td> + <td><code>bigint</code></td> + <td><code>uint64_t (unsigned long long)</code></td> + </tr> + </tbody> +</table> + +<h3 id="DataView">DataView</h3> + +<p>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 <a href="/en-US/docs/Glossary/Endianness">Endianness</a>) of your platform. With a <code>DataView</code> 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.</p> + +<h2 id="Web_APIs_using_typed_arrays">Web APIs using typed arrays</h2> + +<p>These are some examples of APIs that make use of typed arrays; there are others, and more are being added all the time.</p> + +<dl> + <dt><a href="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()" title="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()"><code>FileReader.prototype.readAsArrayBuffer()</code></a></dt> + <dd>The <code>FileReader.prototype.readAsArrayBuffer()</code> method starts reading the contents of the specified <a href="/en-US/docs/Web/API/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a> or <a href="/en-US/docs/Web/API/File" title="/en-US/docs/DOM/File"><code>File</code></a>.</dd> + <dt><a href="/en-US/docs/Web/API/XMLHttpRequest#send()" title="/en-US/docs/Web/API/XMLHttpRequest#send()"><code>XMLHttpRequest.prototype.send()</code></a></dt> + <dd><code>XMLHttpRequest</code> instances' <code>send()</code> method now supports typed arrays and {{jsxref("ArrayBuffer")}} objects as argument.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData">ImageData.data</a></code></dt> + <dd>Is a {{jsxref("Uint8ClampedArray")}} representing a one-dimensional array containing the data in the RGBA order, with integer values between <code>0</code> and <code>255</code> inclusive.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_views_with_buffers">Using views with buffers</h3> + +<p>First of all, we will need to create a buffer, here with a fixed length of 16-bytes:</p> + +<pre class="brush:js notranslate">let buffer = new ArrayBuffer(16); +</pre> + +<p>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:</p> + +<pre class="brush:js notranslate">if (buffer.byteLength === 16) { + console.log("Yes, it's 16 bytes."); +} else { + console.log("Oh no, it's the wrong size!"); +} +</pre> + +<p>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:</p> + +<pre class="brush:js notranslate">let int32View = new Int32Array(buffer); +</pre> + +<p>Now we can access the fields in the array just like a normal array:</p> + +<pre class="brush:js notranslate">for (let i = 0; i < int32View.length; i++) { + int32View[i] = i * 2; +} +</pre> + +<p>This fills out the 4 entries in the array (4 entries at 4 bytes each makes 16 total bytes) with the values <code>0</code>, <code>2</code>, <code>4</code>, and <code>6</code>.</p> + +<h3 id="Multiple_views_on_the_same_data">Multiple views on the same data</h3> + +<p>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:</p> + +<pre class="brush:js notranslate">let int16View = new Int16Array(buffer); + +for (let i = 0; i < int16View.length; i++) { + console.log('Entry ' + i + ': ' + int16View[i]); +} +</pre> + +<p>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 <code>0</code>, <code>0</code>, <code>2</code>, <code>0</code>, <code>4</code>, <code>0</code>, <code>6</code>, <code>0</code>.</p> + +<p>You can go a step farther, though. Consider this:</p> + +<pre class="brush:js notranslate">int16View[0] = 32; +console.log('Entry 0 in the 32-bit array is now ' + int32View[0]); +</pre> + +<p>The output from this is <code>"Entry 0 in the 32-bit array is now 32"</code>.</p> + +<p>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 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects" title="JavaScript typed arrays/ArrayBufferView#Typed array subclasses">view types</a>.</p> + +<h3 id="Working_with_complex_data_structures">Working with complex data structures</h3> + +<p>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 <a href="/en-US/docs/Web/WebGL" title="WebGL">WebGL</a>, data files, or C structures you need to use while using <a href="/en-US/docs/Mozilla/js-ctypes" title="js-ctypes">js-ctypes</a>.</p> + +<p>Consider this C structure:</p> + +<pre class="brush:cpp notranslate">struct someStruct { + unsigned long id; + char username[16]; + float amountDue; +};</pre> + +<p>You can access a buffer containing data in this format like this:</p> + +<pre class="brush:js notranslate">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);</pre> + +<p>Then you can access, for example, the amount due with <code>amountDueView[0]</code>.</p> + +<div class="note"><strong>Note:</strong> The <a href="http://en.wikipedia.org/wiki/Data_structure_alignment" title="http://en.wikipedia.org/wiki/Data_structure_alignment">data structure alignment</a> in a C structure is platform-dependent. Take precautions and considerations for these padding differences.</div> + +<h3 id="Conversion_to_normal_arrays">Conversion to normal arrays</h3> + +<p>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 <code>Array.from()</code> is unsupported.</p> + +<pre class="brush:js notranslate">let typedArray = new Uint8Array([1, 2, 3, 4]), + normalArray = Array.prototype.slice.call(typedArray); +normalArray.length === 4; +normalArray.constructor === Array; +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Int8Array")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Getting <code>ArrayBuffer</code>s or typed arrays from <em>Base64</em>-encoded strings</a></li> + <li><a href="/en-US/docs/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> + <li><a href="https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays">Faster Canvas Pixel Manipulation with Typed Arrays</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/webgl/typed_arrays">Typed Arrays: Binary Data in the Browser</a></li> + <li><a href="/en-US/docs/Glossary/Endianness">Endianness</a></li> +</ul> diff --git a/files/bn/web/javascript/ভাষার_রিসোর্স/index.html b/files/bn/web/javascript/ভাষার_রিসোর্স/index.html new file mode 100644 index 0000000000..c539ad7321 --- /dev/null +++ b/files/bn/web/javascript/ভাষার_রিসোর্স/index.html @@ -0,0 +1,102 @@ +--- +title: জাভাস্কিপ্ট ভাষার রিসোর্স +slug: Web/JavaScript/ভাষার_রিসোর্স +tags: + - JavaScript + - JavaScript Language Resource + - জাভাস্ক্রিপ্ট +translation_of: Web/JavaScript/Language_Resources +--- +<div>{{JsSidebar}}</div> + +<p><strong>ECMAScript</strong> হচ্ছে এক প্রকার স্ক্রিপ্টিং ভাষা যার ওপর ভিত্তি করে <a href="/bn-BD/docs/JavaScript">জাভাস্ক্রিপ্ট</a> তৈরি। <span class="chatlinetext"><a href="http://www.ecma-international.org/">আন্তর্জাতিক ECMA</a> সংস্থা ECMA স্ক্রিপ্ট এর জন্য ECMA-262 এবং ECMA-402 এই দুইটি মান নির্ধারণ করে দিয়েছে।</span> নিচের<span class="short_text" id="result_box" lang="bn"> <span class="hps">ECMAScript</span> স্টান্ডার্ডগুলো <span class="hps">অনুমোদিত হয়েছে</span><span>:</span></span></p> + +<table class="standard-table"> + <tbody> + <tr> + <th>নাম</th> + <th>লিঙ্ক</th> + <th>তারিখ</th> + <th>বর্ননা</th> + </tr> + <tr> + <td>ECMA-262 <span class="short_text" id="result_box" lang="bn"><span class="hps">সংস্করণ</span></span> ৫.১</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/">HTML</a></td> + <td>জুন ২০১১</td> + <td> + <p>ECMAScript ৫.১, জাভাস্ক্রিপ্ট নির্দেশনার সর্বশেষ প্রকাশিত সংস্করণ<br> + <span id="result_box" lang="bn"><span class="hps">এই সংস্করণ</span> <span class="hps">সম্পূর্ণরূপে</span> <span class="hps">আন্তর্জাতিক</span> <a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755"><span class="hps">আইএসও</span><span class="hps">/</span><span class="hps">আইইসি</span> <span class="hps">১৬২৬২</span></a></span><a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755"><span class="short_text" id="result_box" lang="bn"><span>:২০১১</span></span></a><span id="result_box" lang="bn"> <span class="hps">এর</span> <span class="hps alt-edited">তৃতীয়</span> <span class="hps">সংস্করণ</span> <span class="hps">সমর্থিত</span><span class="hps">। </span></span><span id="result_box" lang="bn"><span class="hps alt-edited">এতে</span> <span class="hps">ES5</span> <span class="hps">Errata</span> <span class="hps alt-edited">সংশোধন অন্তর্ভূক্ত করা হয়েছে</span>, <span class="hps">নতুন কোন বৈশিষ্ট্য</span> <span class="hps alt-edited">অন্তর্ভুক্ত করা হয়নি।</span></span></p> + </td> + </tr> + <tr> + <td>CMA-402</td> + <td><a href="http://ecma-international.org/ecma-402/1.0/ECMA-402.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-402/1.0/index.html">HTML</a></td> + <td>ডিসেম্বর ২০১২</td> + <td>ECMAScript <span class="short_text" id="result_box" lang="bn"><span class="hps">আন্তর্জাতিকায়ন</span></span> API</td> + </tr> + <tr> + <td>ECMA-357 <span class="short_text" id="result_box" lang="bn"><span class="hps">সংস্করণ</span></span> ২</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-357.pdf">PDF</a></td> + <td>ডিসেম্বর ২০০৫</td> + <td>এক্সএমএল<a href="/en-US/docs/E4X"> (E4X)</a> এর জন্য ECMAScript.</td> + </tr> + <tr> + <th colspan="4"><span class="short_text" id="result_box" lang="bn"><span class="hps">অপ্রচলিত</span> সংস্করণ</span></th> + </tr> + <tr> + <td>ECMA-262</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">PDF</a></td> + <td>জুন ১৯৯৭</td> + <td><span class="short_text" id="result_box" lang="bn"><span class="hps">ECMAScript</span> এর আদি সংস্করণ<span>।</span></span></td> + </tr> + <tr> + <td>ECMA-262 <span class="short_text" id="result_box" lang="bn"><span class="hps">সংস্করণ</span></span> ২</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf">PDF</a></td> + <td>আগস্ট ১৯৯৮</td> + <td> + <p><span id="result_box" lang="bn"><span class="hps">ECMAScript</span> স্ট্যান্ডার্ড এর <span class="hps">দ্বিতীয়</span> <span class="hps">সংস্করণ</span><span>;</span> <span class="hps">এছাড়াও</span> <span class="hps">আইএসও</span> <span class="hps">স্ট্যান্ডার্ড</span> <span class="hps">১৬২৬২।</span></span></p> + </td> + </tr> + <tr> + <td>ECMA-262 <span class="short_text" id="result_box" lang="bn"><span class="hps">সংস্করণ ৩</span></span></td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf">PDF</a></td> + <td>ডিসেম্বর ১৯৯৯</td> + <td>ECMAScript প্রমিত তৃতীয় সংস্করণ; জাভাস্ক্রিপ্ট এর ১.৫ এর অনুরূপ।<br> + <span class="short_text" id="result_box" lang="bn"><span class="hps">আরো দেখুন</span></span> <a href="http://www.mozilla.org/js/language/E262-3-errata.html">errata</a></td> + </tr> + <tr> + <td>ECMA-262 <span class="short_text" id="result_box" lang="bn"><span class="hps">সংস্করণ ৫</span></span></td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf">PDF</a></td> + <td>ডিসেম্বর ২০০৯</td> + <td>ECMAScript ৫<br> + আরো দেখুন <a href="http://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">ES5 errata</a> এবং <a href="/bn-BD/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="JavaScript/ECMAScript 5 support in Mozilla">ECMAScript ৫ মোজিলা সমর্থন</a></td> + </tr> + <tr> + <td>ECMA-357</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-357,%201st%20edition,%20June%202004.pdf">PDF</a></td> + <td>জুন ২০০৪</td> + <td><a href="/en-US/docs/E4X" title="E4X">এক্সএমএল (E4X) এর জন্য ECMAScript</a><br> + আরো দেখুন <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406">E4X errata</a></td> + </tr> + </tbody> +</table> + +<p><span id="result_box" lang="bn"><span class="hps">ECMAScript</span> এর <span class="hps">ইতিহাস</span> সম্পর্কে <span class="hps">আরও তথ্যের</span> <span class="hps">জন্য</span> <a href="http://en.wikipedia.org/wiki/ECMAScript"><span class="hps">উইকিপিডিয়া</span> <span class="hps">ECMAScript</span></a> <span class="hps">এন্ট্রি</span> <span class="hps">দেখুন।</span></span></p> + +<p>ECMAScript ভাষার স্পেসিফিকেশন এর পরবর্তী সংস্করণ, কোড-নাম "হারমনি" এর কাজ এ <span class="short_text" id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="hps">অংশগ্রহণ</span> <span class="hps">বা শুধু</span> <span class="hps">ট্র্যাক করতে পারেন, এবং </span></span><span id="result_box" lang="bn"><span class="hps">পাবলিক</span> <span class="hps">উইকি</span>র <span class="hps">মাধ্যমে</span> <span class="hps">ECMAScript</span> <span class="hps">আন্তর্জাতিকায়ন</span> <span class="hps">এপিআই</span> <span class="hps">স্পেসিফিকেশন </span></span>এবং <a href="http://www.ecmascript.org/community.php" title="http://www.ecmascript.org/community.php">ecmascript.org</a> হতে <span class="link-https"><a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a> মেইলিং তালিকায় অংশগ্রহণ করতে পারেন।</span></p> + +<h2 id="বাস্তবায়ন">বাস্তবায়ন</h2> + +<ul> + <li><a href="/bn-BD/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> - ফায়ারফক্স এ ব্যবহৃত জাভাস্ক্রিপ্ট ইঞ্জিন;</li> + <li><a href="/bn-BD/docs/Rhino" title="Rhino">Rhino</a> - জাভায় লেখা জাভাস্ক্রিপ্ট ইঞ্জিন;</li> + <li><a href="/bn-BD/docs/Tamarin" title="Tamarin">Tamarin</a> - <span id="result_box" lang="bn"><span class="hps atn">(</span><span>অ্যাডোবি</span> <span class="hps">®</span> <span class="hps">ফ্ল্যাশ</span> <span class="hps">®</span> <span class="hps">প্লেয়ার</span> এ <span class="hps">ব্যবহৃত</span><span>)</span> <span class="hps">ActionScript</span> <span class="hps">ভার্চুয়াল মেশিন</span><span>; </span></span></li> + <li><a href="http://en.wikipedia.org/wiki/List_of_ECMAScript_engines" title="http://en.wikipedia.org/wiki/List_of_ECMAScript_engines"><span class="short_text" id="result_box" lang="bn"><span class="hps">অন্যান্য</span> <span class="hps">বাস্তবায়ন</span></span></a> (<span class="short_text" id="result_box" lang="bn"><span class="hps">উইকিপিডিয়া</span></span>)</li> +</ul> + +<h2 id="আরো_দেখুন">আরো দেখুন</h2> + +<ul> + <li><a href="http://brendaneich.com/" title="http://brendaneich.com/">Brendan Eich এর ব্লগ</a>। Brendan হল জাভাস্ক্রিপ্ট এবং <span class="short_text" id="result_box" lang="bn"><span class="hps">SpiderMonkey JS এর প্রস্তুতকারক।</span></span> <span id="result_box" lang="bn"><span class="hps">তিনি</span> <span class="hps">এখনও</span> <span class="hps">ভাষা</span> <span class="hps">অভিব্যক্ত</span>করণ <span class="hps">ECMA</span> <span class="hps">দলের সাথে</span> <span class="hps">কাজ করছেন।</span></span></li> + <li><a href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/"><span id="result_box" lang="bn"><span class="hps atn">ECMA-</span><span>262</span> <span class="hps">সংস্করণ</span> ৩<span class="hps"> এবং</span> ৫ <span class="hps">এর</span> </span></a><a href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/">Dmitry Soshnikov</a><a href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/"><span id="result_box" lang="bn"> <span class="hps">এর</span> <span class="hps">বিশ্লেষণ</span></span></a></li> +</ul> 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 +--- +<p>মুক্ত ওয়েব তৈরী হয়েছে বেশ কিছু প্রযুক্তির উপর ভিত্তি করে। নিচে এই সকল প্রযুক্তির নাম এবং বিস্তারিত তথ্য সম্বলিত লিংক দেয়া হল।</p> +<div class="row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">মূল ওয়েব প্রযুক্তি</h2> + <dl> + <dt> + <a href="/bn-BD/docs/Web/API" title="/en-US/docs/Web/API">API</a></dt> + <dd> + ওয়েব এপিআই এর সাথে সম্পর্কিত সকল ধরনের ইন্টারফেস সম্পর্কিত তথ্যের রেফারেন্স পাওয়া যাবে এখানে। DOM এবং এর সম্পর্কিত সকল এপিআই, এবং ওয়েব কন্টেন্ট এবং অ্যাপ তৈরীর কাজে লাগবে এমন এপিআই গুলো বর্ণক্রম অনুযায়ী সাজানো হয়েছে।</dd> + <dt> + <a href="/en-US/docs/Web/Reference/API" title="/en-US/docs/Web/Reference/API">Web APIs</a></dt> + <dd> + A list of the individual APIs and technology suites that make up the overall Web API.</dd> + <dt> + <a href="/bn-BD/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></dt> + <dd> + হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ হল ওয়েব পেজের মূল ভাষা, যার মাধ্যমে ওয়েব কন্টেন্টের বর্ণনা এবং নির্ধারণ করা হয়।</dd> + <dt> + <a href="/bn-BD/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></dt> + <dd> + ক্যাসকেডিং স্টাইল শিট ওয়েব কন্টেন্টের ডিজাইন তৈরীতে ব্যবহার করা হয়।</dd> + <dt> + <a href="/bn-BD/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></dt> + <dd> + স্কেলেবল ভেক্টর গ্রাফিক্স ব্যবহার করে ছবিগুলো বিভিন্ন ভেক্টর এবং অন্যান্য আকার হিসাবে সংরক্ষন করা হয়। এর ফলে ছবির আকার পরিবর্তন করা হলেও ছবির মানের কোনো পরিবর্তন করা হয় না।</dd> + <dt> + <a href="/bn-BD/docs/Web/MathML" title="/en-US/docs/Web/MathML">MathML</a></dt> + <dd> + ম্যাথ মার্কআপ ল্যাঙ্গুয়েজ ব্যবহার করে জটিল গাণিতিক সূত্র লেখা যায়।</dd> + </dl> + </div> + <div class="section"> + <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">অন্যান্য প্রযুক্ত</h2> + <p>শিঘ্রই যুক্ত করা হবে।</p> + </div> +</div> +<p> </p> 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 +--- +<p>« <a href="/en-US/docs/SVG" title="SVG">SVG</a> / <a href="/en-US/docs/SVG/Attribute" title="SVG/Attribute">SVG Attribute reference</a> »</p> +<h2 id="SVG_এর_উপাদানসমূহ">SVG এর উপাদানসমূহ</h2> +<div class="index"> + <span id="A">A</span> + <ul> + <li>{{SVGElement("a")}}</li> + <li>{{SVGElement("altGlyph")}}</li> + <li>{{SVGElement("altGlyphDef")}}</li> + <li>{{SVGElement("altGlyphItem")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("animateColor")}}</li> + <li>{{SVGElement("animateMotion")}}</li> + <li>{{SVGElement("animateTransform")}}</li> + </ul> + <span id="C">B C</span> + <ul> + <li>{{SVGElement("circle")}}</li> + <li>{{SVGElement("clipPath")}}</li> + <li>{{SVGElement("color-profile")}}</li> + <li>{{SVGElement("cursor")}}</li> + </ul> + <span id="D">D</span> + <ul> + <li>{{SVGElement("defs")}}</li> + <li>{{SVGElement("desc")}}</li> + </ul> + <span id="E">E</span> + <ul> + <li>{{SVGElement("ellipse")}}</li> + </ul> + <span id="F">F</span> + <ul> + <li>{{SVGElement("feBlend")}}</li> + <li>{{SVGElement("feColorMatrix")}}</li> + <li>{{SVGElement("feComponentTransfer")}}</li> + <li>{{SVGElement("feComposite")}}</li> + <li>{{SVGElement("feConvolveMatrix")}}</li> + <li>{{SVGElement("feDiffuseLighting")}}</li> + <li>{{SVGElement("feDisplacementMap")}}</li> + <li>{{SVGElement("feDistantLight")}}</li> + <li>{{SVGElement("feFlood")}}</li> + <li>{{SVGElement("feFuncA")}}</li> + <li>{{SVGElement("feFuncB")}}</li> + <li>{{SVGElement("feFuncG")}}</li> + <li>{{SVGElement("feFuncR")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feImage")}}</li> + <li>{{SVGElement("feMerge")}}</li> + <li>{{SVGElement("feMergeNode")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("fePointLight")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feSpotLight")}}</li> + <li>{{SVGElement("feTile")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("font")}}</li> + <li>{{SVGElement("font-face")}}</li> + <li>{{SVGElement("font-face-format")}}</li> + <li>{{SVGElement("font-face-name")}}</li> + <li>{{SVGElement("font-face-src")}}</li> + <li>{{SVGElement("font-face-uri")}}</li> + <li>{{SVGElement("foreignObject")}}</li> + </ul> + <span id="G">G</span> + <ul> + <li>{{SVGElement("g")}}</li> + <li>{{SVGElement("glyph")}}</li> + <li>{{SVGElement("glyphRef")}}</li> + </ul> + <span id="H">H</span> + <ul> + <li>{{SVGElement("hkern")}}</li> + </ul> + <span id="I">I</span> + <ul> + <li>{{SVGElement("image")}}</li> + </ul> + <span id="L">J K L</span> + <ul> + <li>{{SVGElement("line")}}</li> + <li>{{SVGElement("linearGradient")}}</li> + </ul> + <span id="M">M</span> + <ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGElement("mask")}}</li> + <li>{{SVGElement("metadata")}}</li> + <li>{{SVGElement("missing-glyph")}}</li> + <li>{{SVGElement("mpath")}}</li> + </ul> + <span id="P">N O P</span> + <ul> + <li>{{SVGElement("path")}}</li> + <li>{{SVGElement("pattern")}}</li> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("polyline")}}</li> + </ul> + <span id="R">Q R</span> + <ul> + <li>{{SVGElement("radialGradient")}}</li> + <li>{{SVGElement("rect")}}</li> + </ul> + <span id="S">S</span> + <ul> + <li>{{SVGElement("script")}}</li> + <li>{{SVGElement("set")}}</li> + <li>{{SVGElement("stop")}}</li> + <li>{{SVGElement("style")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{SVGElement("switch")}}</li> + <li>{{SVGElement("symbol")}}</li> + </ul> + <span id="T">T</span> + <ul> + <li>{{SVGElement("text")}}</li> + <li>{{SVGElement("textPath")}}</li> + <li>{{SVGElement("title")}}</li> + <li>{{SVGElement("tref")}}</li> + <li>{{SVGElement("tspan")}}</li> + </ul> + <span id="U">U</span> + <ul> + <li>{{SVGElement("use")}}</li> + </ul> + <span id="V">V — Z</span> + <ul> + <li>{{SVGElement("view")}}</li> + <li>{{SVGElement("vkern")}}</li> + </ul> +</div> +<h2 id="বিভাগসমুহ">বিভাগসমুহ</h2> +<h3 id="Animation_এর_উপাদানসমূহ">Animation এর উপাদানসমূহ</h3> +<h2 id="sect1"> </h2> +<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p> +<h3 id="প্রাথমিক_আকারসমূহ">প্রাথমিক আকারসমূহ</h3> +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> +<h3 id="উপাদানসমূহের_ধারক">উপাদানসমূহের ধারক</h3> +<h3 id="sect2"> </h3> +<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}</p> +<h3 id="বর্ণনামূলক_উপাদানসমূহ">বর্ণনামূলক উপাদানসমূহ</h3> +<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p> +<h3 id="Filter_এর_প্রাচীন_উপাদানসমূহ">Filter এর প্রাচীন উপাদানসমূহ</h3> +<p>{{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")}}</p> +<h3 id="Font_এর_উপাদানসমূহ">Font এর উপাদানসমূহ</h3> +<p>{{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")}}</p> +<h3 id="Gradient_এর_উপাদানসমূহ">Gradient এর উপাদানসমূহ</h3> +<p>{{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p> +<h3 id="Graphics_এর_উপাদানসমূহ">Graphics এর উপাদানসমূহ</h3> +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p> +<h3 id="Light_source_এর_উপাদানসমূহ">Light source এর উপাদানসমূহ</h3> +<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p> +<h3 id="sect3"> </h3> +<h3 id="Shape_এর_উপাদানসমূহ">Shape এর উপাদানসমূহ</h3> +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> +<h3 id="কাঠামোগত_উপাদানসমূহ">কাঠামোগত উপাদানসমূহ</h3> +<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p> +<h3 id="Text_content_এর_উপাদানসমূহ">Text content এর উপাদানসমূহ</h3> +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> +<h3 id="Text_content_child_এর_উপাদানসমূহ">Text content child এর উপাদানসমূহ</h3> +<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}} এর উপাদানসমুহ</p> +<h3 id="Uncategorized_এর_উপাদানসমূহ">Uncategorized এর উপাদানসমূহ</h3> +<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p> 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 +--- +<div class="callout-box"> + <strong><a href="/en-US/docs/SVG/Tutorial" title="SVG/Tutorial">Getting Started</a></strong><br> + This tutorial will help get you started using SVG.</div> +<p><strong>Scalable Vector Graphics (SVG)</strong> is an <a href="/en-US/docs/XML" title="XML">XML</a> markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what XHTML is to text.</p> +<p>SVG is similar in scope to Adobe's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a <a href="http://www.w3.org/Graphics/SVG/">W3C recommendation</a> (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 <a href="http://www.w3.org/">W3C</a> standards such as <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a> and <a href="http://www.w3.org/AudioVideo/">SMIL</a>.</p> +<div class="cleared row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Documentation">Documentation</h2> + <dl> + <dt> + <a href="/en-US/docs/SVG/Element">SVG element reference</a></dt> + <dd> + Get details about each SVG element.</dd> + <dt> + <a href="/en-US/docs/SVG/Attribute">SVG attribute reference</a></dt> + <dd> + Get details about each SVG attribute.</dd> + <dt> + <a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces">SVG DOM interface reference</a></dt> + <dd> + Get details about the whole SVG DOM API.</dd> + <dt> + Enhance HTML content</dt> + <dd> + SVG works together with HTML, CSS and JavaScript. Use SVG to enhance a regular HTML page or web application.</dd> + <dt> + SVG in Mozilla</dt> + <dd> + Notes and information on how SVG is implemented in Mozilla. + <ul> + <li><a href="/en-US/docs/SVG_in_Firefox">How much SVG is implemented in Firefox</a></li> + <li><a href="/en-US/docs/SVG_in_Firefox">Tutorial for how to use </a></li> + <li><a href="/en-US/docs/SVG_In_HTML_Introduction">SVG in XHTML</a></li> + </ul> + </dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/SVG">View All...</a></span></p> + <h2 class="Community" id="Community">Community</h2> + <ul> + <li>View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> + </ul> + <h2 class="Tools" id="Tools">Tools</h2> + <ul> + <li><a href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li> + <li><a href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a> (Discontinued)</li> + <li><a href="/en-US/docs/tag/SVG:Tools" title="tag/SVG:Tools">More Tools...</a></li> + <li>Other resources: <a href="/en-US/docs/XML">XML</a>, <a href="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/HTML/Canvas">Canvas</a></li> + </ul> + </div> + <div class="section"> + <h2 class="Related_Topics" id="Examples">Examples</h2> + <ul> + <li>Google <a href="http://maps.google.com">Maps</a> (route overlay) & <a href="http://docs.google.com">Docs</a> (spreadsheet charting)</li> + <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a></li> + <li><a href="http://jwatt.org/svg/authoring/">SVG authoring guidelines</a></li> + <li>An overview of the <a href="/en-US/docs/Mozilla_SVG_Project">Mozilla SVG Project</a></li> + <li><a href="/en-US/docs/SVG/FAQ" title="SVG/FAQ">Frequently asked questions</a> regarding SVG and Mozilla</li> + <li>Slides and demos from talk on <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG and Mozilla</a> at SVG Open 2009</li> + <li><a href="/en-US/docs/SVG/SVG_as_an_Image">SVG as an image</a></li> + <li><a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SVG animation with SMIL</a></li> + <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a></li> + <li>More samples (<a href="http://croczilla.com/bits_and_pieces/svg/samples">SVG Samples croczilla.com</a>, <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li> + </ul> + <h3 id="Animation_and_interactions">Animation and interactions</h3> + <p>Like HTML, SVG has a document model (DOM), events and is accessible from JavaScript. This allows developers to create rich animations and interactive images.</p> + <ul> + <li>Some real eye-candy SVG at <a href="http://svg-wow.org/">svg-wow.org</a></li> + <li>Firefox extension (<a href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of SMIL animation support</li> + <li>Interactive <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a> manipulation</li> + <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code></li> + </ul> + <h3 id="Mapping_charting_games_3D_experiments">Mapping, charting, games & 3D experiments</h3> + <p>While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.</p> + <ul> + <li><a href="http://www.codedread.com/yastframe.php">An SVG Tetris</a> & <a href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li> + <li><a href="http://files.myopera.com/orinoco/svg/USStates.svg">Find the State</a> game</li> + <li><a href="http://www.carto.net/papers/svg/us_population/index.html">US population map</a></li> + <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> & <a href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a></li> + <li><a href="http://jvectormap.com/">jVectorMap</a> (interactive maps for data visualization)</li> + </ul> + </div> +</div> +<p> </p> 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 +--- +<p><strong>ওয়েব ডেভেলপমেন্ট </strong>বলতে একটি ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশন তৈরির প্রতিটি দিককে বোঝানো হয়।</p> +<p>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.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="ডকুমেন্টেশনের_বিষয়">ডকুমেন্টেশনের বিষয়</h2> + <h3 id="প্রযুক্তি">প্রযুক্তি</h3> + <dl> + <dt> + <a class="internal" href="/bn-BD/docs/Web_Development/Introduction_to_Web_development" title="bn-BD/docs/Web Development/Introduction to Web development">Introduction to Web development</a></dt> + <dd> + A guide to learning how to develop for the Web.</dd> + <dt> + <a class="internal" href="/bn-BD/docs/HTML" rel="internal">HTML</a></dt> + <dd> + HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.</dd> + <dt> + <a class="internal" href="/bn-BD/docs/CSS" rel="internal">CSS</a></dt> + <dd> + Cascading Style Sheets make it possible to do advanced layout and page design on the Web.</dd> + <dt> + <a class="internal" href="/bn-BD/docs/JavaScript" rel="internal">JavaScript</a></dt> + <dd> + JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.</dd> + <dt> + <a class="internal" href="/bn-BD/docs/DOM" rel="internal">DOM</a></dt> + <dd> + 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.</dd> + <dt> + <a class="internal" href="/bn-BD/docs/AJAX" rel="internal">AJAX</a></dt> + <dd> + 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.</dd> + <dt> + <a class="internal" href="/bn-BD/docs/XHTML" title="bn-BD/docs/XHTML">XHTML</a></dt> + <dd> + Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.</dd> + <dt> + <a class="internal" href="/bn-BD/docs/SVG" rel="internal">SVG</a></dt> + <dd> + Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.</dd> + </dl> + <h3 id="কলা-কৌশল">কলা-কৌশল</h3> + <dl> + <dt> + <a class="internal" href="/bn-BD/docs/Web_Standards" title="bn-BD/docs/Web Standards">Web standards</a></dt> + <dd> + Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.</dd> + <dt> + <a href="/bn-BD/docs/Web_Development/Responsive_Web_design" title="bn-BD/docs/Web development/Responsive Web design">Responsive Web design</a></dt> + <dd> + Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.</dd> + <dt> + <a href="/bn-BD/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">Writing forward-compatible websites</a></dt> + <dd> + Best practices for creating websites that do not break when browsers are updated.</dd> + <dt> + <a href="/bn-BD/docs/Web_Development/Mobile" title="/bn-BD/docs/Web development/Mobile">Mobile Web development</a></dt> + <dd> + 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.</dd> + <dt> + <a class="internal" href="/bn-BD/docs/Mozilla_Web_Developer_FAQ" title="bn-BD/docs/Mozilla Web Developer FAQ">Mozilla Web developer FAQ</a></dt> + <dd> + Frequently asked questions from Web developers. With answers!</dd> + </dl> + <p><span class="alllinks"><a href="/bn-BD/docs/tag/Web_Development" title="bn-BD/docs/tag/Web_Development">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="কমিউনিটি">কমিউনিটি</h2> + <ul> + <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">মোজিলা হ্যাকস ব্লগ</a></li> + <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li> + <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li> + </ul> + <h2 class="Tools" id="টুল">টুল</h2> + <ul> + <li><a href="/bn-BD/docs/Tools" title="bn-BD/docs/Tools">Main Tools page</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/bn-BD/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/bn-BD/firefox/addon/1843">Firebug এক্সটেনশন</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/bn-BD/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/bn-BD/firefox/addon/60">Web Developer extension</a></li> + <li><a href="/bn-BD/docs/Venkman" rel="internal">Venkman</a> জাভাস্ক্রিপ্ট ডিবাগার</li> + <li><a href="/bn-BD/docs/DOM_Inspector" rel="internal" title="bn-BD/docs/DOM Inspector">DOM Inspector</a></li> + <li><a href="/bn-BD/docs/Tools/Scratchpad" title="bn-BD/docs/Tools/Scratchpad">Scratchpad</a></li> + </ul> + <p><span class="alllinks"><a href="/bn-BD/docs/tag/Web_Development:Tools" title="bn-BD/docs/tag/Web_Development:Tools">View All...</a></span></p> + </td> + </tr> + </tbody> +</table> +<p> </p> 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 +--- +<div class="summary"> + <p><span class="seoSummary">এই নিবন্ধে বাগজিলায় (<span class="seoSummary"><a class="link-https" href="https://bugzilla.mozilla.org/">bugzilla.mozilla.org</a></span>) অধিকার/সুবিধা থেকে শুরু করে বাগ চিহ্নিত করা ও সমাধান করার সকল ধাপে করণীয় ও করা উচিত নয়, সেসব বিষয় বিস্তারিত বর্ণনা করা হয়েছে।</span></p> +</div> +<h2 id="Getting.2FUpgrading_Bugzilla_privileges" name="Getting.2FUpgrading_Bugzilla_privileges">বাগজিলায় অধিকার পাওয়া/বাড়ানো</h2> +<p>যদি আপনি বাগজিলায় সুবিধা বা অধিকার পেতে চান, (যেমনটি নিচে বর্ণনা করা হয়েছে) তাহলে <a href="https://bugzilla.mozilla.org/page.cgi?id=get_permissions.html" title="https://bugzilla.mozilla.org/page.cgi?id=get_permissions.html">এই পাতা</a>টি দেখতে পারেন। এর মদ্ধে প্রয়োজনীয় বিষয় ও যোগাযোগের জন্য ই-মেইলের তালিকা রয়েছে।</p> +<p>যদি আপনি দ্রুত canconfirm অথবা editbugs অধিকার পেতে চান, বিশেষতঃ বাগ টেস্ট করার জন্য অথবা বাগ ডে'তে অংশগ্রহণ করার জন্য, তাহলে আপনি irc তে <span style="line-height: inherit;">lizzard কে বলতে পারেন, অথবা মেইল করতে পারেন</span><a href="mailto: lhenry@mozilla.com?subject=Increased%20permissions%20on%20bugzilla.mozilla.org" style="line-height: inherit;" title="mailto: lhenry@mozilla.com?subject=Increased%20permissions%20on%20bugzilla.mozilla.org"> lhenry@mozilla.com</a><span style="line-height: inherit;">. ইমেইলে আপনার <a href="https://bugzilla.mozilla.org/page.cgi?id=user_activity.html" title="https://bugzilla.mozilla.org/page.cgi?id=user_activity.html">Bugzilla activity page</a> এর লিঙ্ক দিয়ে দেবেন। canconfirm সুবিধা পাওয়ার আগে, আপনি বাগ টেস্ট করতে পারেন এবং মন্তব্য করতে পারেন। এভাবেও আপনি একটি বাগ সমাধানে সাহায্য করতে পারেন। editbugs এর ক্ষেত্রেও একই কথা প্রযোজ্যঃ আপনি ওই বাগে যা যুক্ত করতে বাঁ সম্পাদনা করতে চান, সেটা মন্তব্যের মাদ্ধমে বলতে পারেন। এতে করে আপনি আপনার যোগ্যতা প্রমাণ করতে পারবেন, এবং দ্রুত editbugs এর অধিকার পাবেন। </span></p> +<h2 id="Canconfirm_privilege" name="Canconfirm_privilege">Canconfirm অধিকার</h2> +<p>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 <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided" title="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided">guided</a> or <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?format=__default__" title="https://bugzilla.mozilla.org/enter_bug.cgi?format=__default__">advanced</a> forms).</p> +<h3 id="Confirming_unconfirmed_bugs" name="Confirming_unconfirmed_bugs">অননুমোদিত বাগ অনুমোদন করা</h3> +<ul> + <li>A useful <a href="/en/Confirming_unconfirmed_bugs" title="en/Confirming_unconfirmed_bugs">general guide for confirming unconfirmed bugs</a>.</li> + <li>A <a class="external" href="http://groups.google.com/groups?selm=mailman.1069274340.867.mozilla-layout%40mozilla.org">guide for confirming layout bugs</a> (bugs in web page rendering)</li> +</ul> +<h3 id="Reporting_new_bugs" name="Reporting_new_bugs">নতুন বাগ রিপোর্ট করা</h3> +<p>You should report a bug in the NEW state after going through the triaging process as described in the two above-mentioned guides.</p> +<p>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.</p> +<h3 id="Editbugs_privilege" name="Editbugs_privilege">Editbugs অধিকার</h3> +<p>The more powerful editbugs privilege gives you the privileges of <a href="#Canconfirm_privilege">canconfirm</a> and also the ability to edit most aspects of a bug. Therefore, don't abuse your privileges.</p> +<h3 id="Resolving_bugs" name="Resolving_bugs">বাগ সমাধান</h3> +<p>Some general rules:</p> +<ul> + <li>When you resolve a bug, CC yourself so that you are informed when new facts come up.</li> + <li>The conditions for <strong>not resolving</strong> a bug always overrule the conditions for resolving a bug.</li> + <li>When in doubt about resolving a bug, leave it alone!</li> +</ul> +<h4 id="Resolving_bugs_as_DUPLICATE" name="Resolving_bugs_as_DUPLICATE">নকল হিসেবে বাগ চিহ্নিত করা</h4> +<p>See this <a class="external" href="http://www.mozilla.org/quality/help/screening-duplicates.html">guide for screening <code>DUPLICATE</code> bugs</a>. In general newer bugs should be marked as <code>DUPLICATE</code>s of older bugs, except when the newer bug contains more information (bug description clearer, patch already attached, lots of people already CC'ed, etc.).</p> +<h4 id="Resolving_bugs_as_WORKSFORME" name="Resolving_bugs_as_WORKSFORME"><code>WORKSFORME</code> হিসেবে বাগ চিহ্নিত করা</h4> +<p>You can resolve a bug as <code>WORKSFORME</code> (WFM) if it can't be reproduced on the reported hardware/OS.</p> +<p>You <strong>should not</strong> resolve a bug as WFM if:</p> +<ul> + <li>the bug reporter uses a different hardware/operating system (e.g. bug appears on Linux and you can't reproduce it on Windows).</li> + <li>the bug has been reproduced by some people but can't be reproduced by other people.</li> +</ul> +<p>In general you can resolve a bug as WFM if:</p> +<ul> + <li>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.</li> + <li>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.</li> + <li>the bug reporter has not responded to questions for one month and the bug can't be reproduced with a current build.</li> + <li>the bug reporter reports that he can no longer see the bug and no other people report that they are still seeing the bug.</li> +</ul> +<h4 id="Resolving_bugs_as_INCOMPLETE" name="Resolving_bugs_as_INCOMPLETE">অসম্পূর্ণ বাগ চিহ্নিত করা</h4> +<p>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.</p> +<h4 id="Resolving_bugs_as_INVALID" name="Resolving_bugs_as_INVALID">বাতিল বাগ চিহ্নিত করা</h4> +<p>You should resolve a bug as <code>INVALID</code> 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 <code>INVALID</code>ated by anyone other than the <a class="external" href="http://www.mozilla.org/owners.html">module owner or module peer</a>; 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 <code>INVALID</code>.</p> +<h4 id="Resolving_bugs_as_FIXED" name="Resolving_bugs_as_FIXED">সমাধানকৃত বাগ চিহ্নিত করা</h4> +<p>Resolve a bug as <code>FIXED</code> 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 <code>WORKSFORME</code> instead of <code>FIXED</code> if they can't be linked to a single checkin.</p> +<h4 id="Resolving_bugs_as_WONTFIX" name="Resolving_bugs_as_WONTFIX">সমাধানের অযোগ্য বাগ চিহ্নিত করা</h4> +<p>Bugs should not be marked <code>WONTFIX</code> by the normal bug triager. The decision to mark a bug <code>WONTFIX</code> is reserved for module owners or module peers.</p> +<h3 id="Verifying_bugs" name="Verifying_bugs">বাগ যাচাই করা</h3> +<p>Only <code>RESOLVED</code> 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:</p> +<ul> + <li>Verifying <code>DUPLICATE</code>s is the easiest task, so start with that. Note that in general it's impossible to verify a <code>DUPLICATE</code> until the original has been resolved.</li> + <li>Verifying <code>WONTFIX</code> or <code>INVALID</code> bugs is relatively easy if a developer or a trusted <abbr title="Quality Assurance">QA</abbr> person has <code>WONTFIX</code>ed or <code>INVALID</code>ated them. Bugs that were <code>INVALID</code>ated or <code>WONTFIX</code>ed 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.</li> + <li>Before verifying <code>FIXED</code> 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.</li> + <li>There are no clear rules for verifying <code>WORKSFORME</code>. 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.</li> +</ul> +<div class="note"> + <p><strong>Note:</strong> 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.</p> +</div> +<h3 id="Changing_the_bug_information_fields" name="Changing_the_bug_information_fields">বাগের তথ্যের ফিল্ডে পরিবর্তন করা</h3> +<h4 id="Summary" name="Summary">সারাংশ</h4> +<p>You should change the summary if the current one is unclear or does not correctly describe the issue covered by the bug. You <strong>should not change</strong> 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.</p> +<h4 id="OS.2FHardware" name="OS.2FHardware">অপারেটিং সিস্টেম/হার্ডওয়্যার</h4> +<p>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.</p> +<h4 id="Severity" name="Severity">প্রবলতা</h4> +<p>This field describes the impact of a bug.</p> +<table> + <tbody> + <tr> + <th style="font-family: Verdana, sans-serif; font-size: small; font-weight: bold; vertical-align: top; white-space: nowrap;">blocker</th> + <td style="font-family: Verdana, sans-serif; font-size: small;">Blocks development and/or testing work</td> + </tr> + <tr> + <th style="font-family: Verdana, sans-serif; font-size: small; font-weight: bold; vertical-align: top; white-space: nowrap;">critical</th> + <td style="font-family: Verdana, sans-serif; font-size: small;">crashes, loss of data, severe memory leak</td> + </tr> + <tr> + <th style="font-family: Verdana, sans-serif; font-size: small; font-weight: bold; vertical-align: top; white-space: nowrap;">major</th> + <td style="font-family: Verdana, sans-serif; font-size: small;">major loss of function</td> + </tr> + <tr> + <th style="font-family: Verdana, sans-serif; font-size: small; font-weight: bold; vertical-align: top; white-space: nowrap;">normal</th> + <td style="font-family: Verdana, sans-serif; font-size: small;">regular issue, some loss of functionality under specific circumstances</td> + </tr> + <tr> + <th style="font-family: Verdana, sans-serif; font-size: small; font-weight: bold; vertical-align: top; white-space: nowrap;">minor</th> + <td style="font-family: Verdana, sans-serif; font-size: small;">minor loss of function, or other problem where easy workaround is present</td> + </tr> + <tr> + <th style="font-family: Verdana, sans-serif; font-size: small; font-weight: bold; vertical-align: top; white-space: nowrap;">trivial</th> + <td style="font-family: Verdana, sans-serif; font-size: small;">cosmetic problem like misspelled words or misaligned text</td> + </tr> + <tr> + <th style="font-family: Verdana, sans-serif; font-size: small; font-weight: bold; vertical-align: top; white-space: nowrap;">enhancement</th> + <td style="font-family: Verdana, sans-serif; font-size: small;">Request for enhancement</td> + </tr> + </tbody> +</table> +<p>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 <code>UNCONFIRMED</code> 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 <a href="/en/Bugzilla" title="en/Bugzilla">Bugzilla</a>, <a href="/en/Tinderbox" title="en/Tinderbox">Tinderbox</a>, <a class="external" href="http://lxr.mozilla.org/">LXR</a>, etc.) is a blocker.</p> +<p>Bug reports about crashes, hangs, data-loss, or severe security exploits (e.g. remote execution of arbitrary code) get the critical severity.</p> +<h4 id="Priority.2FTarget_Milestone" name="Priority.2FTarget_Milestone">অগ্রাধিকার/অভীষ্ট মাইলস্টোন</h4> +<p>As stated in the <a class="external" href="http://bugzilla.mozilla.org/page.cgi?id=etiquette.html">Bugzilla Etiquette</a>, you must not change the Target Milestone and Priority fields. These fields are reserved for the developers. <strong>This also applies to bugs with Target Milestones in the past.</strong></p> +<h3 id="Reassigning_bugs" name="Reassigning_bugs">বাগ স্থানান্তর</h3> +<p>If a bug belongs to a different Product or Component it should be reassigned. When performing bug reassignments, keep the following things in mind:</p> +<ul> + <li>Always remember to check the <strong>Reassign to default owner and QA Contact</strong> radio button under the comment textbox.</li> + <li>Mozilla applications like the <a class="external" href="http://www.mozilla.org/releases/">Application Suite</a>, <a class="external" href="http://www.mozilla.com/thunderbird/">Thunderbird</a>, or <a class="external" href="http://www.mozilla.com/firefox/">Firefox</a> share most of their program code and all of the backend code including things like <a href="/en/Necko" title="en/Necko">network connectivity</a> (FTP, HTTP, IMAP) and <a href="/en/Gecko" title="en/Gecko">HTML rendering</a>. 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.</li> + <li>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.</li> +</ul> +<h3 id="Bug_flags" name="Bug_flags">বাগ ফ্ল্যাগ সমূহ</h3> +<p>Mozilla <a class="external" href="http://www.mozilla.org/about/roles.html#Drivers">drivers</a> use flags to identify bugs blocking a release. You may only use the <code>blocking?</code> flag to nominate bugs for blocking status. The use of the <code>blocking-</code> flag and the <code>blocking+</code> flag is <strong>prohibited</strong>. Continued abuse will result in revocation of your Bugzilla privileges.</p> +<h3 id="Mass_changes" name="Mass_changes">বড় ধরনের পরিবর্তন</h3> +<p>Mass changes (changes to more than one bug simultaneously) are discouraged. Don't do it!</p> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">আসল ডকুমেন্টের তথ্য</h3> + <ul> + <li>Author(s): Simon Paquet</li> + <li>Other Contributors: Andreas Kunz, Boris Zbarsky, Christian Biesinger, Daniel Wang, Fantasai, Ian Hickson, James Graham, and Michael Lefevre</li> + </ul> +</div> +<p>{{ languages( { "ja": "ja/What_to_do_and_what_not_to_do_in_Bugzilla" } ) }}</p> 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 +--- +<p>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.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="ওয়েব_ও_অ্যাপস_উন্নতিকরন">ওয়েব ও অ্যাপস উন্নতিকরন</h2> + +<dl> + <dt><a href="/en-US/Apps">App Center</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn">Learning Area</a></dt> + <dd>This zone is all about articles to help newcomers to Web development get started in this exciting new world.</dd> + <dt><a href="/en-US/docs/Tools">Developer tools</a></dt> + <dd>Learn how to use the Firefox developer tools to debug, test, and optimize your Web apps and sites.</dd> + <dt><a href="/en-US/Marketplace">Firefox Marketplace</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Games">Game development</a></dt> + <dd>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.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="Products" name="Products">পণ্য এবং প্রকল্প সমূহ</h2> + +<dl> + <dt><a href="/en-US/docs/Emscripten">Emscripten</a></dt> + <dd>An LLVM to JavaScript compiler; this lets you compile, for example, C++ code into JavaScript code which can be run in any Web browser.</dd> + <dt><a href="/en-US/docs/L20n">L20n</a></dt> + <dd>A JavaScript localization framework for unleashing your natural language's power with simple code.</dd> + <dt><a href="/en-US/docs/Project:MDN">The MDN project</a></dt> + <dd>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!</dd> + <dt><a href="/en-US/Persona">Persona</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="মজিলা_প্রযুক্তি">মজিলা প্রযুক্তি</h2> + +<dl> + <dt><a href="/en-US/Add-ons">Add-ons</a></dt> + <dd>Learn how to build and install extensions, themes, and plug-ins for Mozilla-based software, including the popular Firefox Web browser.</dd> + <dt><a href="/en-US/Firefox">Firefox</a></dt> + <dd>Learn all about Firefox, from how to build and revise it to how to build add-ons specifically for it.</dd> + <dt><a href="/en-US/Firefox_OS">Firefox OS</a></dt> + <dd>A new mobile operating system developed by Mozilla which lets users install and run open Web applications created using HTML, CSS, and JavaScript.</dd> +</dl> +</div> +</div> + +<p> </p> |