আপনার অ্যাপ কিভাবে বাংলায় লোকালাইজেশন করবেন?

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="entry-content" style="background-color: #f9f9f9; color: #333333; font-family: 'Open Sans', 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Calibri, SolaimanLipi, Kalpurush, 'Siyam Rupali', SutonnyOMJ, sans-serif; font-size: 14px; line-height: 22.3999996185303px;"> <div style="margin-bottom: 1.5em; padding: 0px;"> বর্তমানে মোবাইল ফোন এর মার্কেটে অনেক ধরনের ওএস সংযুক্ত ডিভাইস রয়েছে। যেমনঃ অ্যান্ড্রোয়েড, উইন্ডোজ ফোন ইত্যাদি। আমাদের দেশে যদিও এখনো আসেনি, তবে যে সকল দেশে বের হয়েছে সে দেশগুলোতে খুব অল্প দিনের মাথায় আলোড়ন সৃষ্টি করেছে এমন একটি ওএস হচ্ছে, মোজিলার একটি প্রজেক্ট <strong>ফায়ারফক্স ওএস</strong>। এতে অনেকগুলো অনন্য বৈশিষ্ট রয়েছে যা অন্যন্য ওএস থেকে একে এগিয়ে রাখে। তা এখানে বলে শেষ করা যাবে না। তবে একটার কথা না বললেই না, সেটি হল ফায়ারফক্স ওএস যে দেশেই বের হয়, এ ওএস-টি অন্যান্য ভাষা সহ সেই দেশের ভাষায় পাওয়া যায়। অর্থাৎ এই ওএস এর জন্য<strong> লোকালাইজেশন</strong> করা হয়ে থাকে, যেটি অন্য কোন ওএস এর জন্য করা হয় না। আর এর জন্যই সাধারণ মানুষের কাছে ফায়ারফক্স ওএস-টির চাহিদা খুব তাড়াতাড়ি বেড়ে চলেছে। আর যেহেতু ওএস-টি লোকালাইজেশন করা হয়ে থাকে, তাই ওএস এর প্রাণ, যা কিনা <em>অ্যাপ </em>নামে আমরা জানি, এদেরকেও আমরা লোকালাইজ করতে পারি।</div> <div style="margin-bottom: 1.5em; padding: 0px;"> আজ আপনাদের দেখাব কিভাবে <strong>WebIDE</strong> দিয়ে আপনার তৈরি অ্যাপ বাংলাতে লোকালাইজেশন করবেন। এর মানে আপনার মোবাইলে যদি ইংরেজি ভাষা নির্বাচন করে থাকেন, তবে আপনার অ্যাপ ইংরেজিতে আর বাংলা ভাষা নির্বাচন করে থাকেন, তবে আপনার অ্যাপ বাংলাতে দেখা যাবে। এমনই এক অতুলনীয় অপশন আপনার জন্য এনে দিয়েছে ফায়ারফক্স ওএস।</div> <div style="margin-bottom: 1.5em; padding: 0px;"> এখন দেখা যাক, কিভাবে আপনার অ্যাপটিকে বাংলাতে লোকালাইজ করবেন –</div> <div style="margin-bottom: 1.5em; padding: 0px;"> প্রথম ২টি কথা জেনে রাখা ভাল যে,</div> <ul style="margin: 0px 0px 1.5em 24px; padding: 0px;"> <li><a href="http://mozillabd.org/blog/2014/07/webide-%E0%A6%95%E0%A6%BF-%E0%A6%8F%E0%A6%AC%E0%A6%82-%E0%A6%8F%E0%A6%B0-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%AC%E0%A6%B9%E0%A6%BE%E0%A6%B0/" style="color: #2983c8; text-decoration: none;" title="WebIDE এর ব্যবহার।">WebIDE এর ব্যবহার।</a></li> <li>বাংলাদেশের বাংলা ভাষার লোকালাইজেশনের কোড হচ্ছে “<strong>bn-BD”। </strong>মনে রাখবেন, <strong>BN-BD, BN-bd, bn-bd, Bn-Bd, bN-bD</strong> এর কোনটিই না।</li> </ul> <div style="margin-bottom: 1.5em; padding: 0px;"> <img alt="" class="aligncenter" height="217" src="https://lh3.googleusercontent.com/-YH1Y6EcBGJI/U7bfwIZEgKI/AAAAAAAAC_4/BZC4Kx8AEy0/w1044-h437-no/1.png" style="background-color: white; border: 10px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 1px; display: block; height: auto; margin: 0px auto 1.5em; max-width: 96.5%;" width="518" /></div> <div style="margin-bottom: 1.5em; padding: 0px;"> <br /></div> <h3 style="color: #484848; font-family: 'Open Sans Light', 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Calibri, SolaimanLipi, Kalpurush, 'Siyam Rupali', SutonnyOMJ, sans-serif; font-size: 1.75em; font-weight: normal; letter-spacing: -0.5px; line-height: 1; margin: 0px 0px 0.25em; padding: 0px; text-shadow: rgba(255, 255, 255, 0.74902) 0px 1px 0px;"> যেভাবে লোকালাইজ করতে হবে</h3> <div style="margin-bottom: 1.5em; padding: 0px;"> প্রথমে <strong>Open App</strong> থেকে একটি প্রোজেক্ট তৈরি করুন।</div> <div style="margin-bottom: 1.5em; padding: 0px;"> <img alt="" class="aligncenter" height="768" src="https://lh4.googleusercontent.com/-GhZt3O-daVE/U7au6RRh8MI/AAAAAAAAC-g/gw77V8_w4OY/w1366-h768-no/1.png" style="background-color: white; border: 10px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 1px; display: block; height: auto; margin: 0px auto 1.5em; max-width: 96.5%;" width="1366" /></div> <div style="margin-bottom: 1.5em; padding: 0px;"> এখন কিছু প্রয়োজনীয় কাজ করে নিতে হবে।</div> <div style="margin-bottom: 1.5em; padding: 0px;"> <strong>manifest.webapp ফাইল এডিট</strong></div> <div style="margin-bottom: 1.5em; padding: 0px;"> manifest.webapp ফাইলে আপনার প্রয়োজনীয় অবজেক্ট ও এর ভ্যালু বসানোর পর <strong>locales</strong> নামের একটি অবজেক্ট ব্যবহার করতে হবে। <strong>locales এর সাব-অবজেক্ট গুলোর নাম ইংরেজিতেই হবে কিন্তু এগুলোর ভ্যালু সব বাংলাতে দিতে হবে</strong>। নিন্মে উদাহরণ সরূপ দেওয়া হল</div> <blockquote style="font-style: italic; margin: 0px 0px 1.5em; padding: 0px 24px; quotes: '', '';"> <pre style="margin-bottom: 1.5em; overflow: auto; padding: 0px;">{ "version": "0.1.0", "name": "Test App", "description": "This app is for testing.", "launch_path": "/index.html", "icons": { "16": "/img/icons/icon16x16.png", "48": "/img/icons/icon48x48.png", "60": "/img/icons/icon60x60.png", "128": "/img/icons/icon128x128.png" }, "developer": { "name": "S. M. Mohi-Us Sunnat ", "url": "https://mozillians.org/en-US/u/sunnat/" }, "type": "privileged", "permissions": {}, "installs_allowed_from": [ "*" ],<strong> "locales": { "bn-BD": { "name": "টেস্ট অ্যাপ", "description": "এই অ্যাপটি পরীক্ষা করার জন্য।", "permissions": {}, "developer": { "name": "এস এম মহি-উস সুন্নাত", "url": "https://mozillians.org/en-US/u/sunnat/" } } },</strong> "default_locale": "en" } </pre> </blockquote> <div style="margin-bottom: 1.5em; padding: 0px;"> <img alt="" class="aligncenter" height="768" src="https://lh6.googleusercontent.com/-7toH1R9R_0I/U7au_IwJN8I/AAAAAAAAC_E/V1-vtCDjjCQ/w1366-h768-no/manifest.png" style="background-color: white; border: 10px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 1px; display: block; height: auto; margin: 0px auto 1.5em; max-width: 96.5%;" width="1366" /></div> <div style="margin-bottom: 1.5em; padding: 0px;"> <br /></div> <div style="margin-bottom: 1.5em; padding: 0px;"> <strong>HTML ফাইল</strong></div> <ul style="margin: 0px 0px 1.5em 24px; padding: 0px;"> <li>সেখানে আপনার <strong>HTML</strong> ফাইল গুলোতেই একটু বেশি কাজ করতে হবে।</li> <li>যেগুলো লোকালাইজেশন করবেন এগুলোর প্রতিটি ট্যাগে <em><strong>data-l10n-id</strong></em> এট্রিবিউট ব্যবহার করে এর <em>ভ্যালু ন্যাম</em> বসাতে হবে। যেমন –</li> </ul> <blockquote style="font-style: italic; margin: 0px 0px 1.5em; padding: 0px 24px; quotes: '', '';"> <div style="margin-bottom: 1.5em; padding: 0px;"> <h1 align=”center” <strong><span style="font-style: normal;">data-l10n-id=”</span></strong><span style="font-style: normal;">app_title</span><strong><span style="font-style: normal;">“</span></strong>></h1><br /><p <strong><span style="font-style: normal;">data-l10n-id=”</span></strong><span style="font-style: normal;">app_description</span><strong><span style="font-style: normal;">“</span></strong>></p><br /><p <strong><span style="font-style: normal;">data-l10n-id=”</span></strong><span style="font-style: normal;">message</span><strong><span style="font-style: normal;">“</span></strong>></p></div> </blockquote> <div style="margin-bottom: 1.5em; padding: 0px;"> এখানে কিছু না লিখলেও হবে। কারণ এখানে কিছু লিখা থাকা না থাকা প্রায় একই কিন্তু লিখে রাখা ভাল, নাহলে পরে কি লিখা লাগত মনে নাও থাকতে পারে।</div> <div style="margin-bottom: 1.5em; padding: 0px;"> <img alt="" class="aligncenter" height="516" src="https://lh5.googleusercontent.com/-BWenO_aGReY/U7Zh7cxwJTI/AAAAAAAAC8M/feSf-U1Wefs/w918-h516-no/Screenshot+from+2014-07-04+14_11_19.png" style="background-color: white; border: 10px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 1px; display: block; height: auto; margin: 0px auto 1.5em; max-width: 96.5%;" width="918" /></div> <div style="margin-bottom: 1.5em; padding: 0px;"> <br /></div> <div style="margin-bottom: 1.5em; padding: 0px;"> <strong>Data ফোল্ডার</strong></div> <div style="margin-bottom: 1.5em; padding: 0px;"> <em>Data</em> নামের ফোল্ডারে দেখুন <strong>en-US.properties</strong> এবং <strong>locales.ini </strong>২টি ফাইল আছে। আরও থাকতে পারে, ওইগুলো আমাদের কোন কাজের না। এই ২টি ফাইলই আসল। এখন রাইট ক্লিক করে <strong>bn-BD.properties </strong>নামের একটি নতুন ফাইল তৈরি করুন এবং <em><strong>locales.ini </strong></em>নামের ফাইলে যেয়ে</div> <blockquote style="font-style: italic; margin: 0px 0px 1.5em; padding: 0px 24px; quotes: '', '';"> <pre style="margin-bottom: 1.5em; overflow: auto; padding: 0px;"><strong>[bn-BD] @import url(bn-BD.properties)</strong></pre> </blockquote> <div style="margin-bottom: 1.5em; padding: 0px;"> লিখে save করুন।</div> <div style="margin-bottom: 1.5em; padding: 0px;"> এখন আমাদের যা করতে হবে <strong>en-US.properties </strong>এবং<strong> <strong>bn-BD.properties</strong></strong> ফাইলেই সবকিছু করতে হবে।</div> <div style="margin-bottom: 1.5em; padding: 0px;"> <img alt="" class="alignnone" height="768" src="https://lh6.googleusercontent.com/-ZfsbtTNPmDE/U7au9PYn-qI/AAAAAAAAC-8/DouhDXOCv1k/w1366-h768-no/locales.png" style="background-color: white; border: 10px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 1px; height: auto; max-width: 96.5%;" width="1366" /></div> <div style="margin-bottom: 1.5em; padding: 0px;"> <strong>HTML</strong> ফাইলে <em><strong>data-l10n-id</strong></em> এট্রিবিউট গুলোর <em>ভ্যালু ন্যাম গুলো <strong>en-US.properties </strong>এবং<strong> <strong>bn-BD.properties</strong></strong> </em>তে ছবিটির মত বসিয়ে নেই।</div> <div style="margin-bottom: 1.5em; padding: 0px;"> এখন <em><strong>en-US.properties</strong></em> ফাইলে সব গুলোর মান ইংরেজিতে দিতে হবে যেমন –</div> <blockquote style="font-style: italic; margin: 0px 0px 1.5em; padding: 0px 24px; quotes: '', '';"> <div style="margin-bottom: 1.5em; padding: 0px;"> <strong>app_title = </strong>My First App<br /><strong>app_description = </strong>This app has created by the WebIDE. It is very powerfull developing tool for Firefox OS App.<br /><strong>message = </strong>I am a Mozillian.</div> </blockquote> <div style="margin-bottom: 1.5em; padding: 0px;"> আর <em><strong>bn-BD.properties</strong></em> ফাইলে সব গুলোর মান বাংলাতে দিতে হবে যেমন –</div> <blockquote style="font-style: italic; margin: 0px 0px 1.5em; padding: 0px 24px; quotes: '', '';"> <div style="margin-bottom: 1.5em; padding: 0px;"> <strong>app_title =</strong> আমার প্রথম অ্যাপ<br /><strong>app_description =</strong> এই অ্যাপটি WebIDE দিয়ে তৈরি। ফায়ারফক্স ওএস অ্যাপের জন্য খুবই শক্তিশালী একটি ডেভেলপিং টুল।<br /><strong>message =</strong> আমি একজন মজিলিয়ান।</div> </blockquote> <div style="margin-bottom: 1.5em; padding: 0px;"> এভাবে যতগুলো ট্যাগ লোকালাইজেশন করবেন এগুলোর প্রতিটি ট্যাগের <em><strong>data-l10n-id</strong></em> এট্রিবিউট এর <em>ভ্যালু ন্যাম</em> এই ২টি ফাইলে বসিয়ে এদের মান ইংরেজি আর বাংলা লিখে নিতে হবে।</div> <div style="margin-bottom: 1.5em; padding: 0px;"> <img alt="" class="aligncenter" height="768" src="https://lh4.googleusercontent.com/-BIQFJqLVe9s/U7au_9-YZoI/AAAAAAAAC_M/S_HWuHSbxD0/w1366-h768-no/properties.png" style="background-color: white; border: 10px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 1px; display: block; height: auto; margin: 0px auto 1.5em; max-width: 96.5%;" width="1366" /></div> <div style="margin-bottom: 1.5em; padding: 0px;"> সব কাজ শেষ হলে <strong>ডিভাইস বা সিমুলেটর (২.১ ভার্শন)</strong> এ রান করুন। এখন দেখবেন আপনার অ্যাপ এর নাম ও ভেতরের ইন্টারফেস <strong>ডিভাইস বা সিমুলেটর (২.১ ভার্শন)</strong> এর ভাষা এর উপর নির্ভর হয়ে যাবে। <em><strong>English</strong></em> নির্বাচন করলে অ্যাপটি ইংরেজিতে আসবে আর<em><strong> বাংলা (বাংলাদেশ)</strong></em> নির্বাচন করলে অ্যাপটি বাংলাতে আসবে।</div> <div style="margin-bottom: 1.5em; padding: 0px;"> <img alt="" class="aligncenter" height="640" src="https://lh3.googleusercontent.com/-Afb04wngF3c/U7au717fvZI/AAAAAAAAC-w/agODE7xhlKE/w720-h640-no/l10n1.png" style="background-color: white; border: 10px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 1px; display: block; height: auto; margin: 0px auto 1.5em; max-width: 96.5%;" width="720" /></div> <div style="margin-bottom: 1.5em; padding: 0px;"> <img alt="" class="alignnone" height="640" src="https://lh6.googleusercontent.com/-mjtnVLgZigQ/U7au8V9AVjI/AAAAAAAAC-0/OXGTcvXh8Zw/w720-h640-no/l10n2.png" style="background-color: white; border: 10px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 1px; height: auto; max-width: 96.5%;" width="720" /></div> </div> <footer class="entry-meta" style="background: rgba(0, 0, 0, 0.0196078); border-bottom-color: rgba(255, 255, 255, 0.498039); border-bottom-style: solid; border-bottom-width: 1px; box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 3px inset; clear: both; color: #333333; font-family: 'Open Sans', 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Calibri, SolaimanLipi, Kalpurush, 'Siyam Rupali', SutonnyOMJ, sans-serif; font-size: 0.857em; margin: 24px 0px 0px; padding: 12px 24px 8px;"><div class="meta" style="margin-bottom: 0.5em; padding: 0px;"> <span style="text-transform: uppercase;">Source :mozilla BD Blog</span></div> </footer></div>

আপনার অ্যাপ কিভাবে বাংলায় লোকালাইজেশন করবেন?

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

Read More

Firefox OS App UI & UX Training at SUST

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixDr6P4432HBDXmZzTghpZG8kgrqIW9gmo6NKL8PBDs6UEE03NofwW0KXKcHbV11QEgE8_6lfMqhajR2YG20m0hRwyHgUwVvBqOOVTKH8KNNfn3hk3K3gTVXEDmr9ueJ9dyijrCe-CygWx/s1600/UX-Design-.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixDr6P4432HBDXmZzTghpZG8kgrqIW9gmo6NKL8PBDs6UEE03NofwW0KXKcHbV11QEgE8_6lfMqhajR2YG20m0hRwyHgUwVvBqOOVTKH8KNNfn3hk3K3gTVXEDmr9ueJ9dyijrCe-CygWx/s320/UX-Design-.png" width="320" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> A workshop was arrenged on Ux design for Mozilla Firefox OS App developing at SUST.Mozillian from Mozilla SUST,Mozilla SEC have joined on this workshop.Various useful information on UX Designing was provided by the trainer. This Workshop helped lot for Firefox App developer.</div> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJNk9CAEj6yaUBY1vPbr97aI7WD_tS0TFoNM9aAAk4V-StkuM6eCUib2KlBGddG7e3d9tBiIs8jZBehLQslw_GQLFLk6v5lk4vwS-MeJBXISZSMSo64wdt0owWgf9lF-PejLsFKNmn4s16/s1600/UX-infographic.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJNk9CAEj6yaUBY1vPbr97aI7WD_tS0TFoNM9aAAk4V-StkuM6eCUib2KlBGddG7e3d9tBiIs8jZBehLQslw_GQLFLk6v5lk4vwS-MeJBXISZSMSo64wdt0owWgf9lF-PejLsFKNmn4s16/s320/UX-infographic.jpg" width="320" /></a></div> <br /> <br /> Reps Event Link : https://reps.mozilla.org/e/firefox-os-app-ui-ux-training-at-sust/<br /> <div dir="ltr" style="text-align: left;" trbidi="on"> <br /></div> </div>

Firefox OS App UI & UX Training at SUST

A workshop was arrenged on Ux design for Mozilla Firefox OS App developing at SUST.Mozillian from Mozilla SUST,Mozilla SEC have join...

Read More

Firefox OS App Developing Tutorial

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh69iIhX_977JOhm8N9_Y2oye3nhYiX-g7TGS0VcWj5dfXkBGGT-jvrgD8DHN_BsiIyYOkLCht7KqKKk2-aNhIOJWQaoxeqF1_B6t0RYnCsB9AdUcf6PC6TJDyYrrec1nYFRmdZVSFXiRjF/s1600/file.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh69iIhX_977JOhm8N9_Y2oye3nhYiX-g7TGS0VcWj5dfXkBGGT-jvrgD8DHN_BsiIyYOkLCht7KqKKk2-aNhIOJWQaoxeqF1_B6t0RYnCsB9AdUcf6PC6TJDyYrrec1nYFRmdZVSFXiRjF/s640/file.png" width="640" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> Go here for see Slide : <a href="http://shafiul.github.io/slides/kickstart_fxos.html#/" target="_blank">Firefox OS App Developing Tutorial</a></div> </div>

Firefox OS App Developing Tutorial

Go here for see Slide :  Firefox OS App Developing Tutorial

Read More