Firefox Web Developer Edition for Developers

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> ফায়ারফক্স হল বিশ্বের সবথেকে জনপ্রিয় একটা ব্রাউজার। রিসেন্টলি ফায়ারফক্স তাদের একটা অপারেটিং সিস্টেমও রিলিজ করেছে যেটা কম সময়ে ব্যাপক মার্কেট পেয়েছে। Firefox OS সম্পূর্ণ ওয়েব ল্যাংগুয়েজ দিয়ে লেখা এবং Firefox সবকিছু্ই ওয়েব ল্যাংগুয়েজ এর ভেতর আনার একটা উদ্যোগ নিয়েছে যেটা তাদের জনপ্রিয়তা আরও বাড়িয়ে দিয়েছে।</div> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> ফায়ারফক্সের আরেকটা চমৎকার টুলস রয়েছে সেটা হল <a href="https://www.mozilla.org/en-US/firefox/developer/" style="border-bottom-color: rgb(12, 56, 110); border-bottom-style: dotted; border-bottom-width: 1px; color: #0c386e; text-decoration: none;">ফায়ারফক্স ডেভলপার এডিশন Firefox Developer Edition</a>। এটা মোজিলার ১০ তম এনিভার্সারি সেলিব্রেশন উপলক্ষে রিলিজ করা হয়।</div> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> রিসেন্টলি ফায়ারফকেক্সর এই এডিশনটা ৬৪ বিটের যেকোন উইন্ডোজ, ম্যাক ও লিনাক্স এর জন্যও রিলিজ করা হয়েছে। সুতরাং আপনি যে অপারেটিং সিস্টেমে ই থাকেন না কেন, আপনি খুব সহজেই ফায়ারফক্স ডেভলপার এডিশন ইউজ করতে পারছেন। Firefox Developer Edition মূলত ওয়েব ডেভলপমেন্টের জন্য বিভিন্ন সুযোগ সুবিধার সাথে রিলিজ হয়েছে।</div> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> <img alt=" photo 2015-06-23_01-30-50_zpsdixmc9kb.gif" border="0" class="" height="400" src="http://i1282.photobucket.com/albums/a539/techtunes/tDrive/tune-365451/2015-06-23_01-30-50_zpsdixmc9kb.gif" style="max-width: 100%;" width="740" /></div> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> Firefox Developer Edition এর মাধ্যমে আপনি আপনার ওয়েব কোডের ডিবাগিং, কোডিং, কোড ভিউ এরকম আরও অনেক সুযোগ সুবিধা খুব সহজেই পাবেন। এটা আপনার প্রফেশনাল ডেভলপিং স্কিল আরও বাড়িয়ে তুলবে এবং প্রফেশনাল ডেভলপিং এর ক্ষেত্রে আপনি দ্রুত সফল হতে পারবেন। আপনি ফায়ারফক্স ডেভলপার এডিশন <a href="https://www.mozilla.org/en-US/firefox/developer/" style="border-bottom-color: rgb(12, 56, 110); border-bottom-style: dotted; border-bottom-width: 1px; color: #0c386e; text-decoration: none;">এখান থেকে ডাউনলোড করতে পারবেন</a>।</div> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> এবার Firefox Developer Edition এর কিছু চরম চরম ফিচার আমরা দেখে নিই এবং কেন এটা একজন ওয়েব ডেভলপার হিসেবে আপনার ইউজ করা উচিৎ সেটাও আমরা জেনে নিই।</div> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> <img alt="" class="aligncenter size-full wp-image-365458" height="395" src="http://s.techtunes.com.bd/tDrive/tuner/arindampaulripon/365451/ScreenHunter_172-Apr.-08-21.35.jpg" style="background: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); display: block; margin: 15px auto; max-width: 100%; padding: 6px; text-align: center;" width="600" /></div> <h2 class="nolinks" style="background-color: white; border-bottom-color: rgb(133, 160, 208); border-bottom-style: solid; border-bottom-width: 3px; color: #0c386e; font-family: SolaimanLipi, Arial, Vrinda; font-size: 1.4em; font-weight: normal; line-height: 27.431999206543px; margin: 0px; padding: 0px 0px 3px;"> ওয়েব আইডিই (Web IDE)</h2> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> Firefox Developer Edition এর অন্যতম একটা প্রধান আকর্ষণ হল ওয়েব আইডিই। আপনি ফায়ারফক্স ওয়েব সিমুলেটরে যেকোন ওয়েব অ্যাপ ক্রিয়েট, এডিট টেস্ট বা ডিবাগ করে রান করতে পারবেন এটার মাধ্যমে। আপনি যদি একটা ওয়েব অ্যাপ তৈরী করেন, তাহলে এটা আপনার জন্য একটা বেসিক বয়লার প্লেট তৈরী করে এবং এটা ছাড়াও এটা আপনার অ্যাপের জন্য একটা সুন্দর ডাইরেক্টরী স্ট্রাকচারের সাথে একটা বয়লার প্লেট তৈরী করে। ওয়েব আইডিই এর মাধ্যমে আপনি ফায়ারফক্স ডেভটুলস এর সাথে সাফারি, এন্ড্রয়েড ফায়ারফক্স, এন্ড্রয়েড ক্রোম ইত্যাদির সাথে কানেক্ট করতে পারবেন।</div> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> <img alt="" class="aligncenter size-full wp-image-365460" height="546" src="http://s.techtunes.com.bd/tDrive/tuner/arindampaulripon/365451/WebIDE.jpg" style="background: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); display: block; margin: 15px auto; max-width: 100%; padding: 6px; text-align: center;" width="600" /></div> <h2 style="background-color: white; border-bottom-color: rgb(133, 160, 208); border-bottom-style: solid; border-bottom-width: 3px; color: #0c386e; font-family: SolaimanLipi, Arial, Vrinda; font-size: 1.4em; font-weight: normal; line-height: 27.431999206543px; margin: 0px; padding: 0px 0px 3px;"> রেসপন্সিভ ডিজাইন ভিউ (Responsive Design View)</h2> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> Firefox Developer Edition এর আরেকটা মজার জিনিস হল এটার রেসপন্সিভ ডিজাইন ভিউ। রেসপন্সিভ ডিজাইন সম্পর্কে আমরা সবাই কমবেশী সবাই ই জানি। আপনি ফায়ারফক্স ডেভলপার এডিশন ইউজ করে এই রেসপন্সিভ ডিজাইন ভিউ দেখতে বা চেক করতে পারবেন খুব সহজেই। আপনি এটা দেখার জন্য বা চেক করার জন্য জাস্ট আপনার কীবোর্ডের Ctrl + Shift + M বাটন চাপ দিতে হবে। এটার মাধ্যমে আপনি অনেকগুলো অপশন চেক করার সুযোগ পাবেন। যেমন ডিভাইসের সাইজ সেটিংস, রোটেটিং স্ক্রীণ সেটিংস, টাচ ইভেন্ট সিমুলেট করা এবং রেসপনন্সিভ মুডে স্ক্রীণশট নেওয়া।</div> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> <img alt="" class="aligncenter size-full wp-image-365462" height="528" src="http://s.techtunes.com.bd/tDrive/tuner/arindampaulripon/365451/ScreenHunter_165-Apr.-08-17.26.jpg" style="background: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); display: block; margin: 15px auto; max-width: 100%; padding: 6px; text-align: center;" width="600" /></div> <h2 class="nolinks" style="background-color: white; border-bottom-color: rgb(133, 160, 208); border-bottom-style: solid; border-bottom-width: 3px; color: #0c386e; font-family: SolaimanLipi, Arial, Vrinda; font-size: 1.4em; font-weight: normal; line-height: 27.431999206543px; margin: 0px; padding: 0px 0px 3px;"> আইড্রপার টুল (Eyedropper Tool)</h2> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> ফাঢারফক্স ডেভলপার এডিশনের Firefox Developer Edition আরেকটা চমক হল আইড্রপার টুলস। আইড্রপার টুলস এর সাথে হয়তবা আপনারা ফটোশপে পরিচিত আছেন। হ্যা, ঠিক সেই কাজটাই আপনারা ফায়ারফক্স ডেভলপার এডিশনে করতে পারবেন। এই টুলের সাহায্যে আপনারা ওয়েব পেজের যেকোন স্থানের কালারের হেক্সাডেসিমেল ভ্যালূ বের করতে পারবেন। এটা আপনাকে ডাইনামিকলি ওয়েব পেজের যেকোন স্থানের বা ইমেজের কালার সম্পর্কে জানতে পারবেন। যেকোন স্থানের কালার চেক কররেই এটা আপনার ক্লিপবোর্ডে কপি হয়ে যাবে। ফলে এটা আপনি অন্য অনেক কাজে লাগাতে পারবেন।</div> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> <img alt="" class="aligncenter size-full wp-image-365463" height="477" src="http://s.techtunes.com.bd/tDrive/tuner/arindampaulripon/365451/ScreenHunter_166-Apr.-08-20.24.jpg" style="background: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); display: block; margin: 15px auto; max-width: 100%; padding: 6px; text-align: center;" width="600" /></div> <h2 style="background-color: white; border-bottom-color: rgb(133, 160, 208); border-bottom-style: solid; border-bottom-width: 3px; color: #0c386e; font-family: SolaimanLipi, Arial, Vrinda; font-size: 1.4em; font-weight: normal; line-height: 27.431999206543px; margin: 0px; padding: 0px 0px 3px;"> ব্রাউজার ইন্সপেক্টর (Browser Inspector)</h2> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> আমরা সবাই হয়ত ইলিমেন্ট ইন্সেপেক্টর নিয়ে কাজ করেছি এবং এটা সম্পর্কে বেশ ভালভাবেই জানি। কিন্তু, ব্রাউজার ইন্সেপেক্টর কী ? এটা অনেকের কাছেই নতুন একটা শব্দ। ফাফারফক্সে ব্রাউজার ইন্সেপেক্টর মূলত ব্রাউজার ডিবাগিং এর কাজেই ইউজ করা হয। মজার, তাই না ?আপনি এটার মাধ্যমে ব্রাউজারের অনেক কিছুই চেঞ্জ করতে পারেন। আপনি যদি ব্রাউজারের ইউআরএল বার এর কালার চেঞ্জ করতে চান বা অন্য যেকোন রকম মোডিফিকেশন করতে চান, তাহলে এটা আপনি ব্রাউজার ইন্সেপেক্টর দিয়ে খুব সহজেই করতে পারবেন। অবশ্য এই এ্কই কাজগুলো স্ক্রাচপ্যাড দিয়েই করা যায়, কিন্তু যারা ফায়ারফক্স ডেভলপার, তাদের জন্য এটা একটা খুব সহজ এবং মজার জিনিস। সহজেই ব্রাউজার মোড করা।</div> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> <img alt="" class="aligncenter size-full wp-image-365464" height="550" src="http://s.techtunes.com.bd/tDrive/tuner/arindampaulripon/365451/ScreenHunter_168-Apr.-08-20.39.jpg" style="background: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); display: block; margin: 15px auto; max-width: 100%; padding: 6px; text-align: center;" width="600" /></div> <h2 class="nolinks" style="background-color: white; border-bottom-color: rgb(133, 160, 208); border-bottom-style: solid; border-bottom-width: 3px; color: #0c386e; font-family: SolaimanLipi, Arial, Vrinda; font-size: 1.4em; font-weight: normal; line-height: 27.431999206543px; margin: 0px; padding: 0px 0px 3px;"> 3D ভিউ (3D View)</h2> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> এটাই মনে হয় Firefox Developer Edition  টুলসের ভেতর সবথেকে মজার জিনিস। আপনি এটার মাধ্যমে যেকোন ওয়েবসাইটের 3D একটা ভিউ দেখতে পাবেন। এটা আপনাকে অনেক কিছু চোখে দিয়ে বুঝতে সাহায্য করবে। এটার মাধ্যমে আাপনি সহজেই বুঝতে পারবেন যে কোন Element টা কোন Element এর ভেতর নেসটেড অবস্থায় আছে। আপনি ফায়ারফক্স ডেভলপার এডিশনে 3D ভিউ চালু করার জন্য জাস্ট Ctrl+Shift+C চাপুন এবং তারপর বক্স এর মত একটা আইকন প্রেস করুন যেটা ডান দিকে নতুন ওপেন হওয়া প্যানেলের ভেতর থাকে।</div> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> <img alt="" class="aligncenter size-full wp-image-365465" height="370" src="http://s.techtunes.com.bd/tDrive/tuner/arindampaulripon/365451/ScreenHunter_169-Apr.-08-20.46.jpg" style="background: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); display: block; margin: 15px auto; max-width: 100%; padding: 6px; text-align: center;" width="600" /></div> <h2 class="nolinks" style="background-color: white; border-bottom-color: rgb(133, 160, 208); border-bottom-style: solid; border-bottom-width: 3px; color: #0c386e; font-family: SolaimanLipi, Arial, Vrinda; font-size: 1.4em; font-weight: normal; line-height: 27.431999206543px; margin: 0px; padding: 0px 0px 3px;"> স্ক্রাচপ্যাড (Scratchpad)</h2> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> স্ক্রাচপ্যাড হল Firefox Developer Edition এর একটা মজার জিনিস এবং অনেক কাজের একটা জিনিস। এটা আপনি Shift + F4 প্রেস করে ওপেন করতে পারেন। এটার মাধ্যমে আপনি জাভাস্ক্রিপ্ট এর কোড এডিট, রান ডিবাগ এবং রেজাল্ট ও দেখতে পারবেন। অবশ্য আপনি বলতে পারেন যে ব্রাউজার কনসোল ও একই কাজ করে। কিন্তু না, ব্রাউজার কনসোলে আপনি জাস্ট একটা লাইন কোড নিয়ে কাজ করতে পারবেন, আর স্ক্রাচপ্যাড নিয়ে আপনি হিউজ পরিমাণ কোড একসাথে নিয়ে কাজ করতে পারবেন। এটা আপনি কীভাবে আউটপুট নিবেন তার উপরও ডিপেন্ড করছে।</div> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> <img alt="" class="aligncenter size-full wp-image-365466" height="450" src="http://s.techtunes.com.bd/tDrive/tuner/arindampaulripon/365451/ScreenHunter_170-Apr.-08-21.01.jpg" style="background: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); display: block; margin: 15px auto; max-width: 100%; padding: 6px; text-align: center;" width="600" /></div> <h2 style="background-color: white; border-bottom-color: rgb(133, 160, 208); border-bottom-style: solid; border-bottom-width: 3px; color: #0c386e; font-family: SolaimanLipi, Arial, Vrinda; font-size: 1.4em; font-weight: normal; line-height: 27.431999206543px; margin: 0px; padding: 0px 0px 3px;"> স্টাইল এডিটর (Style Editor)</h2> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> স্টাইল এডিটর হল আপনার ওয়েব সাইটের স্টাইল লেখা ও এগুলো লাইভ টেষ্ট করার জন্য একটা অসাম টুল। আপনি এখানে যেকোন লোডেড স্টাইলশীট সিলেক্ট করতে পারেন অথবা আপনিন নিজে থেকেই স্টাইলশীট তৈরী করতে পারেন। যেকোন মডিফাইড ফাইল খুব সহজেই সেভ করা সম্ভব এটাতে।</div> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> <img alt="" class="aligncenter size-full wp-image-365459" height="411" src="http://s.techtunes.com.bd/tDrive/tuner/arindampaulripon/365451/style-editor.jpg" style="background: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); display: block; margin: 15px auto; max-width: 100%; padding: 6px; text-align: center;" width="540" /></div> <h2 style="background-color: white; border-bottom-color: rgb(133, 160, 208); border-bottom-style: solid; border-bottom-width: 3px; color: #0c386e; font-family: SolaimanLipi, Arial, Vrinda; font-size: 1.4em; font-weight: normal; line-height: 27.431999206543px; margin: 0px; padding: 0px 0px 3px;"> নেটওয়ার্ক (Network)</h2> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> নেটওয়ার্ক হল আপনার সাইটে ইউজাররা কী ধরণের রিকুয়েস্ট করছেন এবং সেগুলো লোড হতে কেমন টাইম নিচ্ছে এসব ইনফো জানার জন্য একটা গ্রেট টুল। এটা রিসোর্স এবং স্টাট্যাস কোড সম্পর্কে একটা ওভারভিউ আপনাকে দিবে এবং এর সাথে এটা লোড নিতে কেমন টাইম নিচ্ছে এবং কোন ফাইল কেমন টাইম নিচ্ছে এটাও আপনি জানতে পারবেন।</div> <div style="background-color: white; font-family: SolaimanLipi, Arial, Vrinda; font-size: 18px; line-height: 27.431999206543px;"> <img alt="" class="aligncenter size-full wp-image-365461" height="206" src="http://s.techtunes.com.bd/tDrive/tuner/arindampaulripon/365451/network.jpg" style="background: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); display: block; margin: 15px auto; max-width: 100%; padding: 6px; text-align: center;" width="700" /></div> </div>

Firefox Web Developer Edition for Developers

ফায়ারফক্স হল বিশ্বের সবথেকে জনপ্রিয় একটা ব্রাউজার। রিসেন্টলি ফায়ারফক্স তাদের একটা অপারেটিং সিস্টেমও রিলিজ করেছে যেটা কম সময়ে ব্যাপক মার্কে...

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