ফায়ারফক্স হল বিশ্বের সবথেকে জনপ্রিয় একটা ব্রাউজার। রিসেন্টলি ফায়ারফক্স তাদের একটা অপারেটিং সিস্টেমও রিলিজ করেছে যেটা কম সময়ে ব্যাপক মার্কে...
আপনার অ্যাপ কিভাবে বাংলায় লোকালাইজেশন করবেন?
Bolaram
0
Firefox,
Firefox OS App,
Firefox Student Ambassador,
Localization,
Training,
tutorial
Thursday, May 28, 2015
আপনার অ্যাপ কিভাবে বাংলায় লোকালাইজেশন করবেন?
বর্তমানে মোবাইল ফোন এর মার্কেটে অনেক ধরনের ওএস সংযুক্ত ডিভাইস রয়েছে। যেমনঃ অ্যান্ড্রোয়েড, উইন্ডোজ ফোন ইত্যাদি। আমাদের দেশে যদিও এখনো আসেন...
Firefox OS App UI & UX Training at SUST
Bolaram
0
Event,
Firefox OS App,
Marketplace,
Mozilla SEC,
Mozilla Sylhet,
Training,
Ux Design
Tuesday, May 19, 2015
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...
Firefox OS App training day at Metropolitan University
Bolaram
0
Event,
Firefox OS App,
Marketplace,
Mozilla SEC,
Mozilla Sylhet,
Training
Monday, April 20, 2015
Firefox OS App training day at Metropolitan University
Firefox OS App training day at Metropolitan University A app training day on Firefox OS was held at Metropolitan University,Sylh...
Showing posts with label Firefox OS App. Show all posts
Showing posts with label Firefox OS App. Show all posts
Monday, June 22, 2015
Firefox Web Developer Edition for Developers
ফায়ারফক্স হল বিশ্বের সবথেকে জনপ্রিয় একটা ব্রাউজার। রিসেন্টলি ফায়ারফক্স তাদের একটা অপারেটিং সিস্টেমও রিলিজ করেছে যেটা কম সময়ে ব্যাপক মার্কেট পেয়েছে। Firefox OS সম্পূর্ণ ওয়েব ল্যাংগুয়েজ দিয়ে লেখা এবং Firefox সবকিছু্ই ওয়েব ল্যাংগুয়েজ এর ভেতর আনার একটা উদ্যোগ নিয়েছে যেটা তাদের জনপ্রিয়তা আরও বাড়িয়ে দিয়েছে।
ফায়ারফক্সের আরেকটা চমৎকার টুলস রয়েছে সেটা হল ফায়ারফক্স ডেভলপার এডিশন Firefox Developer Edition। এটা মোজিলার ১০ তম এনিভার্সারি সেলিব্রেশন উপলক্ষে রিলিজ করা হয়।
রিসেন্টলি ফায়ারফকেক্সর এই এডিশনটা ৬৪ বিটের যেকোন উইন্ডোজ, ম্যাক ও লিনাক্স এর জন্যও রিলিজ করা হয়েছে। সুতরাং আপনি যে অপারেটিং সিস্টেমে ই থাকেন না কেন, আপনি খুব সহজেই ফায়ারফক্স ডেভলপার এডিশন ইউজ করতে পারছেন। Firefox Developer Edition মূলত ওয়েব ডেভলপমেন্টের জন্য বিভিন্ন সুযোগ সুবিধার সাথে রিলিজ হয়েছে।
Firefox Developer Edition এর মাধ্যমে আপনি আপনার ওয়েব কোডের ডিবাগিং, কোডিং, কোড ভিউ এরকম আরও অনেক সুযোগ সুবিধা খুব সহজেই পাবেন। এটা আপনার প্রফেশনাল ডেভলপিং স্কিল আরও বাড়িয়ে তুলবে এবং প্রফেশনাল ডেভলপিং এর ক্ষেত্রে আপনি দ্রুত সফল হতে পারবেন। আপনি ফায়ারফক্স ডেভলপার এডিশন এখান থেকে ডাউনলোড করতে পারবেন।
এবার Firefox Developer Edition এর কিছু চরম চরম ফিচার আমরা দেখে নিই এবং কেন এটা একজন ওয়েব ডেভলপার হিসেবে আপনার ইউজ করা উচিৎ সেটাও আমরা জেনে নিই।
ওয়েব আইডিই (Web IDE)
Firefox Developer Edition এর অন্যতম একটা প্রধান আকর্ষণ হল ওয়েব আইডিই। আপনি ফায়ারফক্স ওয়েব সিমুলেটরে যেকোন ওয়েব অ্যাপ ক্রিয়েট, এডিট টেস্ট বা ডিবাগ করে রান করতে পারবেন এটার মাধ্যমে। আপনি যদি একটা ওয়েব অ্যাপ তৈরী করেন, তাহলে এটা আপনার জন্য একটা বেসিক বয়লার প্লেট তৈরী করে এবং এটা ছাড়াও এটা আপনার অ্যাপের জন্য একটা সুন্দর ডাইরেক্টরী স্ট্রাকচারের সাথে একটা বয়লার প্লেট তৈরী করে। ওয়েব আইডিই এর মাধ্যমে আপনি ফায়ারফক্স ডেভটুলস এর সাথে সাফারি, এন্ড্রয়েড ফায়ারফক্স, এন্ড্রয়েড ক্রোম ইত্যাদির সাথে কানেক্ট করতে পারবেন।
রেসপন্সিভ ডিজাইন ভিউ (Responsive Design View)
Firefox Developer Edition এর আরেকটা মজার জিনিস হল এটার রেসপন্সিভ ডিজাইন ভিউ। রেসপন্সিভ ডিজাইন সম্পর্কে আমরা সবাই কমবেশী সবাই ই জানি। আপনি ফায়ারফক্স ডেভলপার এডিশন ইউজ করে এই রেসপন্সিভ ডিজাইন ভিউ দেখতে বা চেক করতে পারবেন খুব সহজেই। আপনি এটা দেখার জন্য বা চেক করার জন্য জাস্ট আপনার কীবোর্ডের Ctrl + Shift + M বাটন চাপ দিতে হবে। এটার মাধ্যমে আপনি অনেকগুলো অপশন চেক করার সুযোগ পাবেন। যেমন ডিভাইসের সাইজ সেটিংস, রোটেটিং স্ক্রীণ সেটিংস, টাচ ইভেন্ট সিমুলেট করা এবং রেসপনন্সিভ মুডে স্ক্রীণশট নেওয়া।
আইড্রপার টুল (Eyedropper Tool)
ফাঢারফক্স ডেভলপার এডিশনের Firefox Developer Edition আরেকটা চমক হল আইড্রপার টুলস। আইড্রপার টুলস এর সাথে হয়তবা আপনারা ফটোশপে পরিচিত আছেন। হ্যা, ঠিক সেই কাজটাই আপনারা ফায়ারফক্স ডেভলপার এডিশনে করতে পারবেন। এই টুলের সাহায্যে আপনারা ওয়েব পেজের যেকোন স্থানের কালারের হেক্সাডেসিমেল ভ্যালূ বের করতে পারবেন। এটা আপনাকে ডাইনামিকলি ওয়েব পেজের যেকোন স্থানের বা ইমেজের কালার সম্পর্কে জানতে পারবেন। যেকোন স্থানের কালার চেক কররেই এটা আপনার ক্লিপবোর্ডে কপি হয়ে যাবে। ফলে এটা আপনি অন্য অনেক কাজে লাগাতে পারবেন।
ব্রাউজার ইন্সপেক্টর (Browser Inspector)
আমরা সবাই হয়ত ইলিমেন্ট ইন্সেপেক্টর নিয়ে কাজ করেছি এবং এটা সম্পর্কে বেশ ভালভাবেই জানি। কিন্তু, ব্রাউজার ইন্সেপেক্টর কী ? এটা অনেকের কাছেই নতুন একটা শব্দ। ফাফারফক্সে ব্রাউজার ইন্সেপেক্টর মূলত ব্রাউজার ডিবাগিং এর কাজেই ইউজ করা হয। মজার, তাই না ?আপনি এটার মাধ্যমে ব্রাউজারের অনেক কিছুই চেঞ্জ করতে পারেন। আপনি যদি ব্রাউজারের ইউআরএল বার এর কালার চেঞ্জ করতে চান বা অন্য যেকোন রকম মোডিফিকেশন করতে চান, তাহলে এটা আপনি ব্রাউজার ইন্সেপেক্টর দিয়ে খুব সহজেই করতে পারবেন। অবশ্য এই এ্কই কাজগুলো স্ক্রাচপ্যাড দিয়েই করা যায়, কিন্তু যারা ফায়ারফক্স ডেভলপার, তাদের জন্য এটা একটা খুব সহজ এবং মজার জিনিস। সহজেই ব্রাউজার মোড করা।
3D ভিউ (3D View)
এটাই মনে হয় Firefox Developer Edition টুলসের ভেতর সবথেকে মজার জিনিস। আপনি এটার মাধ্যমে যেকোন ওয়েবসাইটের 3D একটা ভিউ দেখতে পাবেন। এটা আপনাকে অনেক কিছু চোখে দিয়ে বুঝতে সাহায্য করবে। এটার মাধ্যমে আাপনি সহজেই বুঝতে পারবেন যে কোন Element টা কোন Element এর ভেতর নেসটেড অবস্থায় আছে। আপনি ফায়ারফক্স ডেভলপার এডিশনে 3D ভিউ চালু করার জন্য জাস্ট Ctrl+Shift+C চাপুন এবং তারপর বক্স এর মত একটা আইকন প্রেস করুন যেটা ডান দিকে নতুন ওপেন হওয়া প্যানেলের ভেতর থাকে।
স্ক্রাচপ্যাড (Scratchpad)
স্ক্রাচপ্যাড হল Firefox Developer Edition এর একটা মজার জিনিস এবং অনেক কাজের একটা জিনিস। এটা আপনি Shift + F4 প্রেস করে ওপেন করতে পারেন। এটার মাধ্যমে আপনি জাভাস্ক্রিপ্ট এর কোড এডিট, রান ডিবাগ এবং রেজাল্ট ও দেখতে পারবেন। অবশ্য আপনি বলতে পারেন যে ব্রাউজার কনসোল ও একই কাজ করে। কিন্তু না, ব্রাউজার কনসোলে আপনি জাস্ট একটা লাইন কোড নিয়ে কাজ করতে পারবেন, আর স্ক্রাচপ্যাড নিয়ে আপনি হিউজ পরিমাণ কোড একসাথে নিয়ে কাজ করতে পারবেন। এটা আপনি কীভাবে আউটপুট নিবেন তার উপরও ডিপেন্ড করছে।
স্টাইল এডিটর (Style Editor)
স্টাইল এডিটর হল আপনার ওয়েব সাইটের স্টাইল লেখা ও এগুলো লাইভ টেষ্ট করার জন্য একটা অসাম টুল। আপনি এখানে যেকোন লোডেড স্টাইলশীট সিলেক্ট করতে পারেন অথবা আপনিন নিজে থেকেই স্টাইলশীট তৈরী করতে পারেন। যেকোন মডিফাইড ফাইল খুব সহজেই সেভ করা সম্ভব এটাতে।
নেটওয়ার্ক (Network)
নেটওয়ার্ক হল আপনার সাইটে ইউজাররা কী ধরণের রিকুয়েস্ট করছেন এবং সেগুলো লোড হতে কেমন টাইম নিচ্ছে এসব ইনফো জানার জন্য একটা গ্রেট টুল। এটা রিসোর্স এবং স্টাট্যাস কোড সম্পর্কে একটা ওভারভিউ আপনাকে দিবে এবং এর সাথে এটা লোড নিতে কেমন টাইম নিচ্ছে এবং কোন ফাইল কেমন টাইম নিচ্ছে এটাও আপনি জানতে পারবেন।
Thursday, May 28, 2015
আপনার অ্যাপ কিভাবে বাংলায় লোকালাইজেশন করবেন?
বর্তমানে মোবাইল ফোন এর মার্কেটে অনেক ধরনের ওএস সংযুক্ত ডিভাইস রয়েছে। যেমনঃ অ্যান্ড্রোয়েড, উইন্ডোজ ফোন ইত্যাদি। আমাদের দেশে যদিও এখনো আসেনি, তবে যে সকল দেশে বের হয়েছে সে দেশগুলোতে খুব অল্প দিনের মাথায় আলোড়ন সৃষ্টি করেছে এমন একটি ওএস হচ্ছে, মোজিলার একটি প্রজেক্ট ফায়ারফক্স ওএস। এতে অনেকগুলো অনন্য বৈশিষ্ট রয়েছে যা অন্যন্য ওএস থেকে একে এগিয়ে রাখে। তা এখানে বলে শেষ করা যাবে না। তবে একটার কথা না বললেই না, সেটি হল ফায়ারফক্স ওএস যে দেশেই বের হয়, এ ওএস-টি অন্যান্য ভাষা সহ সেই দেশের ভাষায় পাওয়া যায়। অর্থাৎ এই ওএস এর জন্য লোকালাইজেশন করা হয়ে থাকে, যেটি অন্য কোন ওএস এর জন্য করা হয় না। আর এর জন্যই সাধারণ মানুষের কাছে ফায়ারফক্স ওএস-টির চাহিদা খুব তাড়াতাড়ি বেড়ে চলেছে। আর যেহেতু ওএস-টি লোকালাইজেশন করা হয়ে থাকে, তাই ওএস এর প্রাণ, যা কিনা অ্যাপ নামে আমরা জানি, এদেরকেও আমরা লোকালাইজ করতে পারি।
আজ আপনাদের দেখাব কিভাবে WebIDE দিয়ে আপনার তৈরি অ্যাপ বাংলাতে লোকালাইজেশন করবেন। এর মানে আপনার মোবাইলে যদি ইংরেজি ভাষা নির্বাচন করে থাকেন, তবে আপনার অ্যাপ ইংরেজিতে আর বাংলা ভাষা নির্বাচন করে থাকেন, তবে আপনার অ্যাপ বাংলাতে দেখা যাবে। এমনই এক অতুলনীয় অপশন আপনার জন্য এনে দিয়েছে ফায়ারফক্স ওএস।
এখন দেখা যাক, কিভাবে আপনার অ্যাপটিকে বাংলাতে লোকালাইজ করবেন –
প্রথম ২টি কথা জেনে রাখা ভাল যে,
- WebIDE এর ব্যবহার।
- বাংলাদেশের বাংলা ভাষার লোকালাইজেশনের কোড হচ্ছে “bn-BD”। মনে রাখবেন, BN-BD, BN-bd, bn-bd, Bn-Bd, bN-bD এর কোনটিই না।

যেভাবে লোকালাইজ করতে হবে
প্রথমে Open App থেকে একটি প্রোজেক্ট তৈরি করুন।

এখন কিছু প্রয়োজনীয় কাজ করে নিতে হবে।
manifest.webapp ফাইল এডিট
manifest.webapp ফাইলে আপনার প্রয়োজনীয় অবজেক্ট ও এর ভ্যালু বসানোর পর locales নামের একটি অবজেক্ট ব্যবহার করতে হবে। locales এর সাব-অবজেক্ট গুলোর নাম ইংরেজিতেই হবে কিন্তু এগুলোর ভ্যালু সব বাংলাতে দিতে হবে। নিন্মে উদাহরণ সরূপ দেওয়া হল
{
"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": [
"*"
],
"locales": {
"bn-BD": {
"name": "টেস্ট অ্যাপ",
"description": "এই অ্যাপটি পরীক্ষা করার জন্য।",
"permissions": {},
"developer": {
"name": "এস এম মহি-উস সুন্নাত",
"url": "https://mozillians.org/en-US/u/sunnat/"
}
}
},
"default_locale": "en"
}

HTML ফাইল
- সেখানে আপনার HTML ফাইল গুলোতেই একটু বেশি কাজ করতে হবে।
- যেগুলো লোকালাইজেশন করবেন এগুলোর প্রতিটি ট্যাগে data-l10n-id এট্রিবিউট ব্যবহার করে এর ভ্যালু ন্যাম বসাতে হবে। যেমন –
<h1 align=”center” data-l10n-id=”app_title“></h1>
<p data-l10n-id=”app_description“></p>
<p data-l10n-id=”message“></p>
এখানে কিছু না লিখলেও হবে। কারণ এখানে কিছু লিখা থাকা না থাকা প্রায় একই কিন্তু লিখে রাখা ভাল, নাহলে পরে কি লিখা লাগত মনে নাও থাকতে পারে।

Data ফোল্ডার
Data নামের ফোল্ডারে দেখুন en-US.properties এবং locales.ini ২টি ফাইল আছে। আরও থাকতে পারে, ওইগুলো আমাদের কোন কাজের না। এই ২টি ফাইলই আসল। এখন রাইট ক্লিক করে bn-BD.properties নামের একটি নতুন ফাইল তৈরি করুন এবং locales.ini নামের ফাইলে যেয়ে
[bn-BD] @import url(bn-BD.properties)
লিখে save করুন।
এখন আমাদের যা করতে হবে en-US.properties এবং bn-BD.properties ফাইলেই সবকিছু করতে হবে।

HTML ফাইলে data-l10n-id এট্রিবিউট গুলোর ভ্যালু ন্যাম গুলো en-US.properties এবং bn-BD.properties তে ছবিটির মত বসিয়ে নেই।
এখন en-US.properties ফাইলে সব গুলোর মান ইংরেজিতে দিতে হবে যেমন –
app_title = My First App
app_description = This app has created by the WebIDE. It is very powerfull developing tool for Firefox OS App.
message = I am a Mozillian.
আর bn-BD.properties ফাইলে সব গুলোর মান বাংলাতে দিতে হবে যেমন –
app_title = আমার প্রথম অ্যাপ
app_description = এই অ্যাপটি WebIDE দিয়ে তৈরি। ফায়ারফক্স ওএস অ্যাপের জন্য খুবই শক্তিশালী একটি ডেভেলপিং টুল।
message = আমি একজন মজিলিয়ান।
এভাবে যতগুলো ট্যাগ লোকালাইজেশন করবেন এগুলোর প্রতিটি ট্যাগের data-l10n-id এট্রিবিউট এর ভ্যালু ন্যাম এই ২টি ফাইলে বসিয়ে এদের মান ইংরেজি আর বাংলা লিখে নিতে হবে।

সব কাজ শেষ হলে ডিভাইস বা সিমুলেটর (২.১ ভার্শন) এ রান করুন। এখন দেখবেন আপনার অ্যাপ এর নাম ও ভেতরের ইন্টারফেস ডিভাইস বা সিমুলেটর (২.১ ভার্শন) এর ভাষা এর উপর নির্ভর হয়ে যাবে। English নির্বাচন করলে অ্যাপটি ইংরেজিতে আসবে আর বাংলা (বাংলাদেশ) নির্বাচন করলে অ্যাপটি বাংলাতে আসবে।


Tuesday, May 19, 2015
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 joined on this
workshop.Various useful information on UX Designing
was provided by the trainer.
This Workshop helped lot for Firefox App developer.
Reps Event Link : https://reps.mozilla.org/e/firefox-os-app-ui-ux-training-at-sust/
Labels:
Event,
Firefox OS App,
Marketplace,
Mozilla SEC,
Mozilla Sylhet,
Training,
Ux Design
Location:
Sylhet, Bangladesh
Friday, May 15, 2015
Firefox OS App Developing Tutorial
Monday, April 20, 2015
Firefox OS App training day at Metropolitan University
Reps Event Link : https://reps.mozilla.org/e/firfox-os-app-training-day-at-metropolitan-university-sylhet/
Labels:
Event,
Firefox OS App,
Marketplace,
Mozilla SEC,
Mozilla Sylhet,
Training
Location:
Sylhet, Bangladesh
Sunday, April 12, 2015
Subscribe to:
Posts (Atom)








