আসলে কী হচ্ছে, কেন হচ্ছে?

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

আমাদের পাতায় কোনো $wp_query অবজেক্ট লোড হচ্ছে না। সেকারণে Query argument-ও যোগ হচ্ছে না ইউআরএল-এ। তাই আমাদের বহুল পরিচিত পেজিনেশন সংক্রান্ত কন্ডিশনাল:

$paged = get_query_var('paged') ? get_query_var('paged') : 1;

এখানে কাজ করছে না, কারণ get_query_var() আসলে কিছু পাচ্ছে না (কুয়েরি আর্গুমেন্ট তো যোগই হচ্ছে না, পাবে কিভাবে)। সেজন্য ইউআরএল-এ &paged প্যারামিটারের ভ্যালু পাবার জন্য আমরা $_GET মেথড ব্যবহার করতে বাধ্য হচ্ছি, যেমনটা Milo শিখালেন।

এবারে সব পেজিনেশনের জন্য যেমন কিছু ছোটখাটো বিষয় বানিয়ে নেয়া লাগে এখানেও তাই করা হচ্ছে, আমরা বলে নিচ্ছি:

$nextpage = $paged + 1;

আর আমরা আগের পাতা দেখানোর জন্য তৈরি করেছি:

$prevpage = max( ($paged - 1), 0 );

খুব সোজা, পরের পাতা মানে ১ যোগ, আর আগের পাতা মানে ১ বিয়োগ। কিন্তু এভাবে যাতে নেগেটিভ মানে না চলে যায়, তাই আমরা পিএইচপি’র max() ফাংশন ব্যবহার করেছি।

ধরা যাক আমাদের কুয়েরিটা এরকম:

এখানে আমরা posts_per_page প্যারামিটারে ওয়ার্ডপ্রেসের নিজস্ব Settings > Reading-এ সেট করা পাতা-প্রতি পোস্টের সংখ্যা ব্যবহার করছি। আমরা তাই বারবার কুয়েরি না করে ফাংশনেও এই সংখ্যাটা নিয়ে নিচ্ছি। যদি আপনার ক্ষেত্রে ব্যতিক্রম কিছু থেকে থাকে, আপনি চাইলে পেজিনেশন $posts_per_page = 5 এরকম করে আপনার ভ্যালুও পাস করে দিতে পারেন। যদি ফাংশনে $items_per_page-এ কোনো ভ্যালু না দেয়া হয়, তাহলে আমরা ওয়ার্ডপ্রেসের ডিফল্টটা গ্রহণ করেছি ফলব্যাক হিসেবে। লক্ষ রাখুন, $paged প্যারামিটারে get_query_var()-এর বদলে $_GET মেথড ব্যবহার করেছি।

এবারে এই হচ্ছে আমাদের পেজিনেশন ফাংশন:

আর, এই ফাংশনকে আমরা এভাবে ব্যবহার করতে পারবো:

এখানে আমাদের মতো করে আমরা পেজিনেশন প্যারামিটারগুলো পাঠাতে পারছি। এবং সর্বোপরি, আমরা কততম পাতায় আছি, Next Page, Previous Page, Last Page, First Page ইত্যাদি বোতামও পাচ্ছি, প্যাজিনেশনকে প্রয়োজনমতো ব্যবহার করার জন্য।

সুতরাং, বুঝে নিয়ে ব্যবহার করতে নেই মানা। কোনো ভুল থাকলে জানানোর অনুরোধ। আর ভালো লাগলো কিনা, কিংবা আসল কথা, কাজে লাগলো কিনা, নিচে মন্তব্য করে জানাতে ভুলবেন না। আর কাজে লাগলে, শেয়ার করে সবাইকে জানাতেও ভুলবেন না।

মঈনুল ইসলাম
mayeenulislam.github.io

_____________________________

কৃতজ্ঞতা

কৃতজ্ঞতা জানাচ্ছি Christine Cooper এবং Milo-কে, তাঁদের দেয়া পরামর্শ আর স্নিপেটের^ উপর ভিত্তি করে এখানে একটা কার্যোপযোগী মার্জিত সংস্করণ যোগ করা হয়েছে মাত্র।

The post অ্যাডমিন প্যানেলে নিজস্ব $wp_query’র জন্য পেজিনেশন appeared first on Tuts by Mayeenul Islam.

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

রিলিয দেয়ার গিট পদ্ধতি

git ব্যবহার করে প্রোডাক্ট রিলিয দেয়ার পদ্ধতি হচ্ছে git tag। কমান্ডলাইনে (git bash ব্যবহার করে) কাজটা করার উপায় হচ্ছে:

git tag -a v1.0.0 -m "First Release"

এতে যেটা হবে সর্বশেষ কমিটে v1.0.0 ট্যাগটি জুড়ে যাবে। এবারে কমান্ডলাইনে ট্যাগ পুশ করে দিলেই গিটহাবে একটা ট্যাগ তৈরি হয়ে যাবে।

git push -u origin --tags

কিন্তু এতে রিলিয নোট লেখা হবে না। তাই ট্যাগ তৈরি এবং রিলিয দেয়ার জন্য গিটহাব-এ রয়েছে রিলিয ফিচার:

কিভাবে রিলিয করতে হয়

https://github.com/username/repo সাধারণত এইরকমই হয় গিটহাবে রেপোযিটোরির লিংক। তো আপনার রেপোযিটোরিতে releases লিংকে ক্লিক করুন।

রিলিযেয পাতায় Create a new Release বোতামে ক্লিক করুন।

রিলিয নোট পাতায় রিলিয নোট লিখে শেষ করুন।

“Tag version” হলো সংস্করণের নাম্বার, অর্থাৎ যে সংস্করণটি রিলিয করতে যাচ্ছেন আপনি, আমাদের ক্ষেত্রে যেমন ব্যাপারটা হলো 1.0.0। “Release title” যেকোনো কিছু হতে পারে, আপনি যা দিয়ে এই রিলিযটাকে সূচিত করতে চান আরকি। উদাহরণ হিসেবে বলা যায়, ওয়ার্ডপ্রেস তাদের রিলিযগুলো একেকজন জ্যায শিল্পীর নামানুসারে করে থাকে, তো আপনার ক্ষেত্রে এটা যেকোনো কিছু হতে পারে। আমরা নাম দিতে পারি “প্রথম রিলিয”, কিংবা “প্রাথমিক রিলিয”, কিংবা “আন্তর্জাতিক রিলিয” ইত্যাদি যেকোনো কিছুই।

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

এটা যদি আপনার প্রাক-রিলিয হয়ে থাকে, যা আসলে আনুষ্ঠানিক কোনো রিলিয না, কিংবা [মোটামুটি প্রস্তুতই], পরীক্ষা করার জন্য, কিংবা ডেভলপমেন্ট পরখ করার জন্য ইত্যাদি ক্ষেত্রে, আপনি চাইলে:

This is a pre-release checkbox.

লেখা চেকবাক্সটি চেক করে দিতে পারেন।

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

বাইনারি ফাইল যোগ

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

সত্যি বলতে কি, এটা আপনার প্রোজেক্টের ঐ ভার্ষনের ফাইলগুলো, যেখানে অবাঞ্ছিত ফাইল কিংবা কোনো অবাঞ্ছিত কোড নেই।

তো, কিভাবে একটা বাইনারি ফাইল বানানো যায়? আসলে, সেটা আপনার প্রোজেক্টের ধরণই নির্ধারণ করে দিবে। স্ক্রিপ্টিং ল্যাঙ্গুয়েজের (যেমন: পিএইচপি) কোনো প্রোজেক্টের ক্ষেত্রে আমার পছন্দ হলো রেপোযিটোরির বিদ্যমান অবস্থার (যা আসলে আপনার রিলিয পাবার উপযুক্ত কোডের সংকলন) একটা যিপ সংস্করণ নামিয়ে নেয়া। এই কাজটা গিটহাবে খুব সহজে করা যায়, রেপোযিটোরির ডান দিকের “Download Zip” বোতামে ক্লিক করে খুব সহজে পুরো রেপোযিটোরি কমপ্রেস্‌ড অবস্থায় নামিয়ে নেয়া যায়।

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

তো, রেপোযিটোরিটা খুব সহজে ডাউনলোড করে নিন, আর .zip ফাইলটা আপনার রিলিযের সাথের বাইনারি ফাইল হিসেবে যোগ করে দিন। আমরা এবারে আমাদের আগে প্রকাশ করা রিলিযটাকেই সম্পাদনা করে দেখাচ্ছি:

পরখ করে দেখার জন্য আমরা এবারে এটাকে Pre-release চেকবাক্সে ক্লিক করে প্রাকরিলিয বানিয়ে নিলাম।

আমরা আমাদের xyz.zip বাইনারি ফাইলটা যোগ করেছি, এবং খুব সহজেই আমাদের ব্যবহারকারীদের কাছে এই zip ফাইলের পাথটা ছড়িয়ে দিতে পারি, যাতে তাঁরা ডাউনলোড করে নিতে পারেন আমাদের রিলিয করা পণ্যটি। এই পাথটা মোটামুটি এরকম হয়:

https://github.com/username/repo/releases/download/1.0.0/xyz.zip

বাইনারিগুলো কেন

বাইনারি ফাইল ছাড়াও যেকেউই আপনার রিলিয করা সংস্করণটা খুব সহজেই ডাউনলোড করতে পারেন “Source Code (zip)”-এ ক্লিক করেই। কিন্তু এই যিপ ফাইলটা ডাউনলোড করলে:

• আপনার ব্যবহারকারীদের কাছে অপ্রয়োজনীয়ভাবেই গিট রিভিশনের ইতিহাসগুলোও চলে যায়
• আর, আপনি চাইলেও, কোনো রিলিয ঠিক কতবার ডাউনলোড হলো, তার কোনো সংখ্যাও আপনি পাবেন না

হ্যা, শুধুমাত্র একটা বাইনারি ফাইলই আপনার রিলিযের ডাউনলোডের পরিমাণ জানান দিতে সক্ষম।

ডাউনলোডের হিসাব পান

আপনি যদি আপনার গিটহাবের রেপোযিটোরির এপিআই ইউআরএল ব্রাউয করেন, তাহলে আপনি আপনার রিলিযের আদ্যোপান্ত JSON আকারে দেখতে পাবেন (শুধুমাত্র ব্যবহারকারী নাম আর রেপোযিটরির নামটা বদলে নিতে হবে):

https://api.github.com/repos/[username]/[repo-name]/releases

এবং আমরা জানি, জেকুয়েরির getJSON মেথড কাজে লাগিয়ে, আমরা আমাদের রিলিযের ডাউনলোডের সংখ্যা খুব সহজেই পেতে পারি।

$.getJSON("https://api.github.com/repos/someone/kauwa-kala/releases").done(function (json) {
    var release = json[0];
    console.log(release);
    console.log(release.assets[0].download_count);
});

ইতি কথা

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

– মঈনুল ইসলাম
mayeenulislam.github.io

The post কিভাবে গিটহাবে প্রোজেক্ট রিলিয করতে হয় appeared first on Tuts by Mayeenul Islam.

সিএসএস৩ দিয়ে তৈরি কলাম আরো পরিচ্ছন্ন, আরো সহজ। এখানে স্তবকে স্তবকে সাজানো <div>-গুলোকে কোনো ক্লাস কিংবা সিলেক্টরের তোয়াক্কা না করে শ্রেফ সিএসএস দিয়ে ধরে ধরে কলাম আকারে সাজিয়ে ফেলা যাবে। এবং রেসপন্সিভ ডিযাইনেও একই কৌশল কাজে লাগিয়ে লেআউটকে বিভিন্ন ভিউপোর্টে ইচ্ছামতো বদলে নেয়া যাবে।

আসুন দেখা যাক, কিভাবে সেটা করা হয়। আমরা সহজ করার জন্য সবটুকু কাজ একটা ফাইলের মধ্যেই করে দেখাচ্ছি:

আমরা <div>-কে বলে দিচ্ছি বামদিকে চলে যেতে, সবগুলো <div>-এর width বলে দিয়েছি, প্রয়োজনীয় মার্জিন দিয়ে সরিয়ে সরিয়ে দেখিয়েছি, আর সবগুলোতে একটা নির্দিষ্ট ম্যাটম্যাটে রং দিয়ে দিয়েছি। তাতে যেটা হবে, বামদিকে চেপে একের পর এক <div> বসে যাবে (আমরা <div>গুলোকে বোঝার জন্য 100px-এর একটা উচ্চতা দিয়েছি)। এবারে আমরা CSS3 সিলেক্টর ব্যবহার করে কলাম ১ এবং কলাম ৩-এর জন্য আলাদা আলাদা সিএসএস র‍্যুল ডিক্লেয়ার করেছি। আমরা বলেছি:

এখানে কমেন্ট করে বুঝিয়ে দিয়েছি, কোন কোডটা ১ম কলাম এবং কোন কোডটা তৃতীয় কলামকে ধরেছে। এতে যা হয়েছে, তা দেখা যাক:

এখন সময় এসেছে CSS3 ছদ্ম (pseudo) সিলেক্টর :nth-of-type(n) সম্পর্কে জানার:

:nth-of-type(n) হলো কোনো একই এলিমেন্টের n তম-টিকে ধরার জন্য ব্যবহৃত সিলেক্টর। এটি ব্যবহার করে কোনো সিলেক্টরের, শীর্ষ’র ভিতরকার, নিজস্ব ধরণের n তম-টিকে ধরা যায়। n হতে পারে কোনো অংক, কীওয়ার্ড কিংবা কোনো ফর্মুলা।

এই কথাটা বোঝার জন্য নিচের কোড স্নিপেটটি দেখা যাক:

মানে হচ্ছে, একটা <div>-এর ভিতরে <p>, <span>, <a> ইত্যাদি বিভিন্ন ধরণের ট্যাগ থাকলে, <div>টা হচ্ছে শীর্ষ বা প্যারেন্ট; এখন আমরা যদি p:nth-of-type(2) লিখি, তাহলে তা এর ভিতরকার দ্বিতীয় p ট্যাগকে ধরবে। যদিও দ্বিতীয় এলিমেন্টটা p না, বরং a, কিন্তু সে যেহেতু শুধুমাত্র একই ধরণের এলিমেন্টকে টার্গেট করে, তাই p-এর দ্বিতীয় এলিমেন্টকে সে ধরবে। আমাদের এই উদাহরণে n হচ্ছে ২, কেননা আমরা দ্বিতীয়টাকে সিলেক্ট করার জন্য বলেছি।

ঠিক একইভাবে :nth-child(n)-ও ব্যবহার করা যায়, কিন্তু nth-child যেটা করে, সে, ধরণের ধার ধারে না, বরং শীর্ষ’র ভিতরকার n-তম সন্তানকে খুঁজে নেয়। যেমন: উপরের উদাহরণে আমরা যদি p:nth-child(2) লিখতাম, তাহলে সে কিন্তু কিছুই করতো না, কারণ আমাদের শীর্ষ’র দ্বিতীয় এলিমেন্টটা কোনো <p> ট্যাগ না, বরং একটা <a> ট্যাগ।

আমরা যখন ডিযাইন করছি, তখন শুধু <div> দিয়ে হয়তো করছি, বিভিন্ন এলিমেন্টের মিশেল না হলে nth-of-type কিংবা nth-child-এর যেকোনোটি ব্যবহার করা যায়। কিন্তু যদি বিভিন্ন এলিমেন্টের মিশেল থাকে, তাহলে nth-of-type-এর ব্যবহার নির্দিষ্ট আর নিরাপদও।

ফর্মুলা

এখানে তো আমরা ৩টি কলামের কোড দেখিয়েছি বোঝানোর জন্য। আপনার তো ৪ কলাম, ৫ কলাম, ১০ কলাম অনেক কিছুরই দরকার হতে পারে, তখন কী করবেন? তাই জেনে নিতে হবে ফর্মুলাটা। তাহলে যেকোনো সংখ্যক কলাম তৈরিতে নিশ্চিন্ত থাকা যাবে:

কলাম সংখ্যা × n + লক্ষ্য কলাম

কয়টা কলাম হবে? ৪টা। তাহলে কলাম সংখ্যা হলো ৪। এবারে কোন কলামকে টার্গেট করে সিএসএস লিখতে চান? প্রথম কলামকে। তাহলে লক্ষ্য কলাম হচ্ছে ১। কোন কলামকে টার্গেট করে সিএসএস লিখতে চান? ৪র্থ কলামকে। তাহলে লক্ষ্য কলাম হচ্ছে ৪।

.item:nth-of-type(4n + 1){ /* css rules here */ }
.item:nth-of-type(4n + 4){ /* css rules here */ }

আমরা ঠিক এই কৌশল কাজে লাগিয়ে পত্রিকার জন্য একটা লেআউট তৈরি করলাম:

সীমাবদ্ধতা

CSS3 ছদ্ম সিলেক্টরগুলো ব্যবহারে কিছুটা সীমাবদ্ধতা আছে। বিশেষ করে Internet Explorer 8-এ :nth-of-type(n) এবং :nth-child(n) কাজ করে না। এই ছদ্ম সিলেক্টরদ্বয় সমর্থনকারী প্রথম সংস্করণগুলো হলো: Google Chrome 4.0, Internet Explorer (IE) 9, Mozilla Firefox 3.5, Apple Safari 3.2, এবং Opera 9.6। যদি আপনার সাইট এসকল ব্রাউযারে ব্রাউয হবার সম্ভাবনা থাকে, তাহলে আপনার জন্য বিকল্প হিসেবে PHP দিয়ে তৈরি কলাম তো থাকলোই…।

– মঈনুল ইসলাম
mayeenulislam.github.io

বাড়তি সহায়তা

• CSS3 :nth-of-type Selector^ – MDN Dev Net
• nth-child, nth-of-type, nth-last-child, nth-last-of-type সিলেক্টর পরখ করে দেখার অনলাইন অ্যাপ^ – সিএসএস ট্রিক্‌স

The post CSS3 ব্যবহার করে কলাম তৈরি appeared first on Tuts by Mayeenul Islam.

আমরা আশা করি কমান্ডলাইনের মজা আর কার্যকারিতার শক্তিমত্তা সম্পর্কে একটা ধারণা পেয়ে গেছি। ব্যস, আমাদের আজকের আলোচনা কমান্ডলাইন নিয়ে হলেও তা অপারেটিং সিস্টেমের শেল কমান্ডলাইন না, বরং আমাদের বহুল পরিচিত, বহুল ব্যবহৃত ওপেন সোর্স ব্রাউজার Mozilla Firefox-এর কমান্ডলাইন, যার কেতাবি নাম হচ্ছে GCLI (Graphical Command Line Interpreter) – সোজা বাংলায়: কমান্ড লাইনের লেখাকে দৃষ্টিগ্রাহ্য করে কাজে রূপান্তর করার প্রোগ্রাম। এটি ফায়ারফক্সের বিল্ট-ইন ওয়েব ডেভলপার টুল-এর একটি এক্সটেনশন।

এই কমান্ডলাইনটি অতি সম্প্রতি আমার এক সহকর্মী আমাকে দেখালেন, আমি মোহাম্মদ সিরাজুল ইসলাম-এর কৃতজ্ঞতা জ্ঞাপন করছি। এটি ইউনিক্স কনসোলের মতোই অপূর্ব একটি ফিচার। এতোদিন কেন দেখলাম না, নিজেকেই শুধাই!

কিভাবে কী?

ফায়ারফক্স ব্রাউযার খুলে কীবোর্ডে Shit+F2 চাপলেই ব্রাউযারের একেবারে নিচে দেখবেন একটি ছোট্ট বার খুলে গেছে। অথবা ব্রাউযারের Tools » Web Developer » Developer Toolbar সিলেক্ট করে দিলেই নিচে এটিকে দেখা যাবে।

ব্যস, এটাই হলো আপনার ফায়ারফক্স জিসিএলআই কমান্ডলাইন। এখানেই আপনি বৈধ কমান্ডগুলো লিখে প্রয়োজনীয় অনেক কাজ অনায়াসে করে নিতে পারবেন। সুতরাং বাকি পোস্টটা না পড়েও আপনি এখনই অনায়াসে কাজে নেমে যেতে পারেন। কিন্তু তবু পড়ে নেয়ার অনুরোধ রইলো…

কী কাজে আসবে?

কী কাজে আসবে, তার ইয়ত্তা নেই। কারণ এটি এক্সটেনসিবল, মানে বর্ধনযোগ্য, মানে বাড়তি যোগ করা যাবে এমন সক্ষমতাসম্পন্ন একটি প্রোগ্রাম। আমি কয়েকটা মাত্র উদাহরণ দিবো, কারণ আমি নিজেও জানি খুব কম:

স্ক্রিনশট:

বিভিন্নসময় ওয়েবসাইটের স্ক্রিনশট নেবার দরকার পড়ে। ডেস্কটপে আমার পছন্দ LightShot Desktop – রীতিমতো অসাধারণ! ওয়েবপেজে, বিশেষ করে লম্বা ওয়েবপেজে সেটা আবার কাজ করে না। তখন ব্রাউযারের কোনো এক্সটেনশন ব্যবহার ছাড়া গত্যান্তর থাকে না। কিন্তু ব্রাউযারের লাইটশট এক্সটেনশনটা ঠিক অতোটা আরামপ্রদ না। সেজন্য Firefox-এ আমি Screengrab ব্যবহার করি, আর Google Chrome-এ আমি Full Page Screen Capture এক্সটেনশনটি ব্যবহার করি। এই দুটোর মধ্যে স্ক্রিনগ্র্যাবের একটা বদভ্যাস হচ্ছে, স্টিকি টপ বারগুলো সে বুঝতে পারে না, আপনি হয়তো পাতার মাঝামাঝি থেকে পুরো পাতাটার স্ক্রিনশট নিতে বললেন, সে তখন স্টিকি টপবারটাকে মাঝখানে রেখে স্ক্রিনশট নেয়। এই সমস্যাটা আবার ফুল পেজ স্ক্রিন ক্যাপচার-এর ক্ষেত্রে হয় না।

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

screenshot

এন্টার দিলেই হলো, কাজ শেষ। ব্রাউযারে সেট করা ডাউনলোড ফোল্ডারে জমা হয়ে যাবে স্ক্রিনশটটা।

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

screenshot --fullpage

খুব দ্রুত কাজ করে এটি।

●●●

ফোল্ডার:

আবার লিখুন:

folder open

এন্টার চাপলেই সে আপনার ইউযার ফোল্ডারটি খুলবে। আপনি অন্য ফোল্ডার খুলতে চাইলে পাথটা (path) বসিয়ে দিলেই হয়ে যাবে, সাথে সাথে খুলে যাবে। যেমন এইমাত্র সংরক্ষিত স্ক্রিনশটগুলো দেখতে চাইলে ডাউনলোড্‌স ফোল্ডারে ঢুকতে আমি লিখলাম:

folder open C:\Users\mayeenulislam\downloads

এন্টার চাপতেই খুলে গেল।

●●●

রিসাইয:

আপনি হয়তো রেসপন্সিভ ওয়েব ডিযাইন করছেন, ব্রাউযারটা টেনে টেনে ছোট-বড় করে ব্রেকপয়েন্টগুলো খুঁজছেন, এক্ষেত্রে আপনার সহায়ক হতে পারে ডেভলপার টুলবারের resize কমান্ডটি:

resize to 320 480

এন্টার চাপতেই দেরি, রিসাইয হতে দেরি নেই। এবং এই নতুন উইন্ডোতে আপনি স্ক্রিনশটও নিতে পারবেন, আর টাচ ইভেন্টগুলোকেও সিমুলেট করতে পারবেন। (এটা অবশ্য ওয়েব ডেভলপার-এর Responsive Design View, যা খুব সহজে Ctrl + Shift + M দিয়ে নিয়ন্ত্রণ করা যায়)

আগের অবস্থায় ফিরে যেতে লিখতে হবে

resize off

●●●

টিল্ট:

কমান্ড লিখুন

tilt open

কীবোর্ড থেকে হাত না সরিয়ে shift + f2 চেপে আবার কমান্ডলাইনে চলে আসুন:

tilt rotate 50 30

অর্থাৎ থ্রিডি ভিউটাকে ৫০ ডিগ্রি এক্স অক্ষে, আর ৩০ ডিগ্রি ওয়াই অক্ষে ঘুরাও। আবার shift + f2 চেপে কমান্ডলাইনে এসে লিখুন:

tilt close

বন্ধ হয়ে গেল থ্রিডি ভিউ। এই ভিউতে আপনি আপনার ডিযাইনে লেয়ারগুলো দেখতে পারছিলেন।

●●●

কুকী:

এবং শেষটি:

cookie list

লিখে একটা এন্টার চাপলেই আপনি বুঝবেন কী কাজের জিনিস এটি। আপনার সাইটের সব cookie, যদি কোনোটা রেজিস্টার করা থেকে থাকে, দেখা যাবে

কিভাবে জানবো কোন কমান্ডে কী হয়?

খুব সহজেই জানা যাবে কোন কমান্ড কীজন্য ব্যবহার করতে হবে। লিখতে হবে:

help

এন্টার দিলেই সে দেখাবে কী কী কমান্ড আছে, সেগুলোতে ক্লিক করলেই সেগুলোর সহায়তা দেখা যাবে। যদি কমান্ডটা আপনার জানা থাকে, কিন্তু আপনি কমান্ডটির আরো বিস্তারিত সুযোগ-সুবিধাগুলো জেনে নিতে চান, তাহলে লিখতে হবে:

help <command>

অর্থাৎ আমাদের স্ক্রিনশট কমান্ডটার জন্য ব্যাপারটা হবে:

help screenshot

ব্যস, যা যা কমান্ড এর সাথে দেয়া যায়, (যেমন আমাদের দেখা screenshot --fullpage) সেগুলো দেখা যাবে।

●●●

অন্যান্য কমান্ডলাইনগুলোর মতোই এতে কীবোর্ডের আপ-অ্যারো (up arrow) চাপলে আগে লেখা কমান্ডগুলো পাওয়া যায়। এছাড়া কমান্ড লিখে আপ-অ্যারো বা ডাউন-অ্যারো চাপতে থাকলে সম্ভাব্য অপশনগুলোও দেখাবে, যেমন: cookie লিখে কাজটি করলে list, set, remove ইত্যাদি সাজেশন দেখাবে।

…তো জেনে গেলেন খনির খোঁজ, এবারে আমাকে শিখানো আপনাদের দায়িত্ব… কারণ একজন মযিলা ডেভলপারের থেকে এই ব্লগটা এলে অবশ্যই আরো অনেক অনেক সমৃদ্ধ তথ্য থাকতো। সেই সমৃদ্ধ ব্লগের অপেক্ষায় থাকলাম।

বাড়তি তথ্য

• ফায়ারফক্সের GCLI ব্যবহারের ডকুমেন্টেশন^
• GCLI প্রোজেক্ট সম্পর্কিত তথ্য^

-মঈনুল ইসলাম
mayeenulislam.github.io

The post GCLI – ফায়ারফক্সের শক্তিশালী কনসোল টুল appeared first on Tuts by Mayeenul Islam.

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

আমরা গত পর্বে বলেছিলাম মাত্র ৬টা কমান্ড দিয়ে শিখে নিব, গিট কিভাবে ব্যবহার করতে হয়। …এখুনি হাত নোংরা করার দরকার নেই, একটু ভালো করে বুঝে নিতে হবে আগে। গিট রেপোযিটরি (কিংবা রেপোজিটোরি) কী? গিট কমিট কী (কমিটি নয় কিন্তু, কিংবা কম্মিট বলারও দরকার নেই)? স্টেজ করা কী? …বুঝে বুঝে এগোলে কনসেপ্ট পরিষ্কার হবে, নতুন কিছু গ্রহণ করাও সহজ হবে।

ধাপে ধাপে গিট

গিট রেপোযিটরি: ধরা যাক, আমার একটা ওয়েবসাইট বানাতে হবে, যেখানে দুটো ফাইল থাকবে: (১) index.html আর (২) style.css। ওযেবসাইটের নাম “mywebsite”। এখন কী করবো? … খুব সহজ, mywebsite নামের একটা ফোল্ডার তৈরি করে তার ভিতরে ফাইল দুটো রাখবো। তাহলে আমরা যদি বলি ঐ mywebsite ফোল্ডারটা হলো আমাদের প্রজেক্ট ফোল্ডার, ইউনিক্সের ভাষায় যাকে বলে ডিরেক্টরি, আর গিটের ভাষায় যাকে বলে রেপোযিটরি (repository)। ব্যস রেপোযিটরি বুঝে ফেললাম আমরা – রেপোযিটরি হলো আমাদের প্রজেক্টের সকল ফাইল একত্র করে রাখার একটা স্থান। তাহলে দেখা যাচ্ছে, একটা ফোল্ডার আর রেপোযিটরির মধ্যে কোনো পার্থক্য নেই। …আসলে তা কিন্তু সত্যি নয় – পার্থক্য আছে।

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

ক্লাউড তৈরি করে নেয়া

গিট নিয়ে কাজ করার জন্য আমাদেরকে বিনামূল্যে নিজেদের প্রজেক্ট আপলোড করার সুযোগ করে দিয়েছে github.com নামের ওয়েবসাইটটি (এরকম আরো অনেক গিট সাইট আছে)। আমরা তাই সেখানেই আমাদের রিমোট রেপোযিটরিটা রাখবো। এজন্য আমাদেরকে গিটহাবে বিনামূল্যে একটা অ্যাকাউন্ট খুলে নিতে হবে। নিজের ইমেইল ঠিকানা আর পাসওয়ার্ড দিয়ে গিটহাবে ঢুকে একটা নতুন রেপোযিটরি তৈরি করে ফেলা যাক। সময়ে সময়ে গিটহাবে নতুন পরিবর্তন হচ্ছে, আপাতত নামের পাশের যোগ চিহ্নে (+) ক্লিক করে New Repository চেপে নতুন রেপো তৈরি করে নিতে হবে। আমরা আপাতত git-tutorial নামে একটা রেপো তৈরি করে নিলাম, এবং নিচে README ফাইল যাতে যুক্ত হয় সেজন্য টিকচিহ্ন দিয়ে দিলাম। পাবলিক রেপো তৈরি করবো, কারণ প্রাইভেট রেপো তৈরি করতে খরচা করতে হবে। আমরা কাজ না বুঝে এখনই পয়সা ঢালতে রাজি না।

ব্যস আপনার প্রথম গিট রেপোযিটরি আপনার জন্য তৈরি। আমরা এখন এই রেপোযিটরিটাকে আমাদের পিসিতে clone করবো। ক্লোন করা মানে হলো হুবহু আরেকটা রূপ দেয়া – পৃথিবীতে প্রথম (১৯৯৬ খ্রি.) সফল ক্লোন করা ভেড়ার নাম ডলি, সে ছিল অন্য একটা ভেড়ার অবিকল আরেকটা সত্তা। আমাদের ক্ষেত্রেও বিষয়টা তা-ই। আমাদের সার্ভারে বা ক্লাউডে যা আছে, আমরা সেটাকে লোকাল পিসিতে অবিকল নামিয়ে আনবো। এজন্য আমাদেরকে এই রেপো’র path-টা নিতে হবে। এটা রেপোযিটরির ডানদিকে পাওয়া যাবে, সেখান থেকে কপি করে নিতে হবে।

টিপ্‌স: যেখানেই থাকি না কেন git bash প্রথমে user-এর ফোল্ডারে খোলে। তারপর ডস কমান্ড লিখে লিখে নিজের কাঙ্ক্ষিত ফোল্ডারে যেতে হয়। কিন্তু আমরা গত পর্বে ‘ধর্তব্য ধাপ ২’-তে যে কাজটা করেছিলাম, তা আমাদের কাজকে আরো সহজ করে দিয়েছে। যেখানেই আছেন, খালি জায়গায় মাউসের ডান বোতাম ক্লিক করুন, লেখা দেখবেন: Git Bash Here। ক্লিক করুন, আর গিট ব্যাশ সরাসরি ঐ পাথেই খুলবে। যারা Windows XP SP2 ব্যবহার করছেন, তারা এটা না পেলে Windows Explorer মোডে বামদিকে যে ফোল্ডার ট্রি আসে, সেখানে ফোল্ডারের উপরে মাউসের ডান বোতামে এই কমান্ডটি পাবেন।

একটা Notepad খুলে লেখাটা পেস্ট করলে দেখা যাবে সেটা আসলে আমার ঐ রেপোযিটরির URL-ই, শুধু শেষে একটা .git [ডট গিট] যুক্ত আছে।

এবারে আমাদের পিসিতে Start মেনু থেকে Git Bash চালু করি। ধরা যাক আমরা ক্লোন করে ডেস্কটপে (desktop) রাখবো, তাই আমাদেরকে কমান্ড লিখে আগে ডেস্কটপে যেতে হবে – এটা গিটের অংশ না। যারা ডস মোডে কাজ করেছেন, তারা এটাতে খুব বেশি অভ্যস্থ। আর এগুলো গোণায়ই ধরা যায় না। আমরা নিচের মতো করে লিখলেই ডেস্কটপে চলে যেতে পারি- বলছি change directory to desktop:

cd desktop

এন্টার চাপতেই আমরা ডেস্কটপে চলে এলাম। সত্যি এসেছি কিনা তা যাচাই করা যায় pwd কমান্ডটি লিখে এন্টার চাপলে।

কোড ১: ক্লোন করে নেয়া

যাহোক এবারে আমাদের রেপোযিটরি পাথ ব্যবহার করে আমরা সার্ভারে থাকা গিট রেপোযিটরিটিকে আমাদের ডেস্কটপে নিয়ে আসবো। এজন্য আমাদেরকে লিখতে হবে:

git clone https://github.com/mayeenulislam/git-tutorial.git

টিপ্‌স: গিট ব্যাশে কোনো কিছু কপি-পেস্ট করা একটু সমস্যার। এজন্য ব্যাশের বাম দিকের উপরের টাইটেল বারের আইকনে ক্লিক করে বের হওয়া মেনুর Edit সাব মেনু থেকে সুবিধাগুলো ব্যবহার করা যাবে।

এছাড়া গিটের নতুন সংস্করণের সাথে পাওয়া গিট ব্যাশে Insert কী চাপলেও লেখা পেস্ট হবে।

লক্ষ করুন, আমরা ওখান থেকে যে লিংকটা কপি করেছিলাম, তা এখানে পেস্ট করেছি। পেস্ট করতে কষ্ট হলে নোটপ্যাডে পেস্ট করে দেখে দেখে টাইপ করে নিন। এবারে এন্টার চাপলে সার্ভার থেকে গিট রেপোযিটরিটি আমাদের পিসিতে হুবহু নেমে যাবে। …কোথায় নামবে? যেখানে আমরা সর্বশেষ ছিলাম (pwd লিখে চেক করে দেখেছিলাম)। …ক্লোন হবার সময় ব্যাশ আমাদের দেখিয়েছে Cloning into 'git-tutorial'..., তার মানে ডেস্কটপে আমাদের রেপোযিটরিটা git-tutorial নামে তৈরি হয়েছে। আমরা ডেস্কটপে সেই ফোল্ডারটা দেখেও নিতে পারি। সুতরাং আমরা এখন ঐ ফোল্ডার বা রেপোযিটরিতে ব্যাশ ব্যবহার করে ঢুকতে চাইলে লিখবো:

cd git-tutorial

আমরা এখন আমাদের সদ্য নামানো রেপোযিটরির ভিতরে আছি।

কোড ২: গিট, তোমার খবর কী?

এবারে আমরা জানতে চাচ্ছি, এই রেপোযিটরির খবর কী। গিটের হালচাল জানতে হলে বহুল ব্যবহৃত কমান্ডটি হলো:

git status

উত্তরে গিট আমাদেরকে বলবে: হ্যা, হ্যা, খবর খুব ভালো। তোমার গিট রেপোযিটরিটা সার্ভারের ওরিজিনাল রেপোযিটরির সাথে এক্কেবারে সাম্প্রতিক (up-to-date), কমিট করার কিচ্ছুই নেই, পুরোপুরি সাফ-সুতরো। 🙂

    On branch master
    Your branch is up-to-date with 'origin/master'.
    
    nothing to commit, working directory clean

আমরা কিন্তু দুটো কমান্ড ইতোমধ্যেই শিখে ফেলেছি। আর এটাও লক্ষ করেছি কিনা যে, গিটের অধিকাংশ কমান্ড শুরু হয় git লেখাটা দিয়েই। 🙂

তথ্যকণিকা: এই যে রেপো’র ভিতরে গিয়ে git status লেখার সাথে সাথেই সে আপনাকে তথ্য দেখানো শুরু করলো, তার কারণ এটা একটা গিট রেপোযিটরি। আমরা যখন গিটহাবে রেপো বানানোর সময় README ফাইল যোগ করতে বলে দিয়েছিলাম, তখনই সে এটাকে একটা গিট রেপো বানিয়ে দিয়েছে। যদি আমাদের প্রজেক্টটি গিট রেপো বানানো না থাকতো, কিংবা একটা সাধারণ ফোল্ডারের ভিতর ঢুকে আমরা স্ট্যাটাস জানতে চাইতাম, তখন কিন্তু গিট আমাদেরকে কিচ্ছু বলতে পারতো না। আর তখনই আমাদেরকে আমাদের ফোল্ডারকে আগে গিট রেপো বানানো লাগতো। যেকোনো ফোল্ডারকে গিট রেপো বানানোর জন্য আপনাকে গিট ব্যাশে সেই ফোল্ডারে ঢুকে কোড লিখতে হবে git init — গিটকে ইনিশিয়েট করো – চালু করো। আর তখনই আমাদের শিখে আসা .git ফোল্ডারটি ঐ ফোল্ডারে তৈরি হয়ে নিজের কাজ শুরু করবে।

আমরা এবারে আসল ভার্সন কন্ট্রোল বা ভার্সন নিয়ন্ত্রণ করে দেখবো… আমাদের রেপোযিটরির ভিতরে একটা index.html ফাইল আছে। সেটা যদি আমরা টেক্সট এডিটরে খুলি, তাহলে নিচের মতো HTML কোড দেখা যাবে:

    <html>
        <head><title>Test - nanodesigns</title></head>
        <body>
            <p>This is a test file for git-tutorial repository.</p>
        </body>
    </html>

ধরা যাক এটাই আমাদের ওয়েবসাইট, দারুণ সুন্দর একটা ওয়েবসাইট। আমরা করলাম কি, প্যারাগ্রাফ ট্যাগের শেষের ফুলস্টপটাই (.) শুধু ফেলে দিলাম। তারপর আবার ফাইলটা সেভ করলাম। তারমানে কি? আমাদের ফাইলে একটা পরিবর্তন করা হয়েছে। পরিবর্তনের পরিমাণ হিসেবে খুবই নগন্য (হা হা হা, এটা কোনো পরিবর্তন হলো নাকি?), কিন্তু তবু পরিবর্তন তো…। এবারে ব্যাশে ফিরে আসুন, আপনি আমাদের রেপো’র ভিতরে রয়েছেন, এবারে আবার গিটের হালচাল জানতে চান:

git status

এবারে গিট লাল রং দিয়ে আমাদের test.html ফাইলটাকে দেখিয়ে বলবে: এহ্‌হে, মডিফাই করা ফাইল পাওয়া গেছে, যা এখনও মঞ্চে তোলা হয়নি (not staged)। ঠিকইতো, আমরা ফাইলটাতে পরিবর্তন করেছি, কিন্তু গিটের সাথে তো কোনো খেলাধুলা করিনি এপর্যন্ত।

কোড ৩: মঞ্চে তোলো

তাই এবারে গিটকে বলতে হবে, গিট, হ্যা, ফাইলে পরিবর্তন যা তুমি দেখতে পাচ্ছো, তা ঠিকই আছে। এই পরিবর্তনকে এবার মঞ্চে নিয়ে এসো:

git add test.html

আমরা গিটকে শুধুমাত্র test.html ফাইলটাকে মঞ্চে নিয়ে আসতে বললাম add বলার পরে ফাইলের নামটা লিখে। ধরা যাক, একবারে অনেকগুলো ফাইলে আমরা পরিবর্তন করলাম, তখন কি আমরা প্রত্যেকটা ফাইলের নাম ধরে ধরে এভাবে যোগ করে নিব? না তখন সব ফাইলকে এক কমান্ডে staged করে নেয়ার কমান্ড হলো git add . (গিট অ্যাড ডট্‌) কিংবা git add -A, অর্থাৎ, গিট, সব (All) ফাইলকে যোগ করে নাও। এবারে আবারও git status জানতে চাইলে সবুজ রঙে গিট আমাদের ফাইলটা দেখাবে: হ্যা, তোমার পরিবর্তনটা মঞ্চে নিয়ে এসেছি (staged), এবারে তা কমিট করার অপেক্ষায়। এবারে আমরা আমাদের পরিবর্তনটার একটা ছবি তুলে রাখবো।

কোড ৪: ছবি তোলো

…এই যে মঞ্চে তোলা বা যোগ করে নেয়া, একে বলা হয় stage করা। এর পরের ধাপটাই ছবি তুলে রাখা (snapshot)। তাহলে বুঝা গেল, staged না হলে, মঞ্চে আনা না হলে মডেলের snapshot নেয়া যায় না।

unstaged ফাইলকে staged করা হয়েছে, পর্দার পেছনের মডেলকে মঞ্চে আনা হয়েছে, এবারে আমাদের দরকার ছবিটা তুলে রাখা, আর একে গিট-এর ভাষায় বলে কমিট করা (commit)। আমরা গত পর্বে দেখেছিলাম, গিট আসলে ফাইল সংরক্ষণ করে না, ছবি তুলে রাখার মতোই ফাইলের অবস্থার রেকর্ড রাখে। কমিট করার মাধ্যমে আমরা আসলে গিটকে বলি: গিট বাবাজি, করো…। কী করবে? গিটের তো একটাই কাজ, ভার্সন নিয়ন্ত্রণ। সে তখন স্টেজ করা ফাইলগুলোর একটা রেকর্ড রেখে দিবে। এজন্য আমরা টাইপ করবো:

git commit -m "My first commit to learn git with nanodesigns"

এই কোডে আমরা বললাম, গিট, কমিট করো। [যাতে পরে চিনে নিতে পারি, তাই] কমিটটাকে একটা বার্তা (-m) দিয়ে সংরক্ষণ করে রাখো। বুঝতেই পারছেন, পাশে ডাবল কোটের ভিতরে আমরা বার্তাটাই রেখেছি। …এবারে আবার git status টাইপ করে এন্টার চাপলে দেখাবে, কমিট করার নতুন কিছুই নেই, প্রজেক্ট ফোল্ডার ফকফকা পরিষ্কার।

সম্পূর্ণ লোকালি গিট: বারবার একই কথা, গিট দিয়ে লোকালি কাজ করা যায়, ইন্টারনেটের দরকারই নেই। কিন্তু আমরা তো শুরুই করলাম github.com দিয়ে? ক্যামনে কী?। ডেস্কটপে একটা ফোল্ডার খুলুন, নাম দিন ‘test’। ভিতরে একটা টেক্সট ফাইল খুলুন, নাম দিন ‘test.txt’। ঐ ফোল্ডার পাথে git bash খুলুন। লিখুন git init। ব্যস, গিট রেপো তৈরি। এবারে git add -A আর git commit -m "Test"। আমরা সবই পারি…

হাত নোংরা করি…

এবারে পটাপট কয়েকবার অনুশীলন করা যাক—

1. HTML ফাইলটা খুলে কিছু পরিবর্তন করে ফেলুন।
2. এবারে ব্যাশ খুলে লিখুন git status,
3. স্ট্যাটাস দেখা হয়ে গেলে লিখুন git add test.html কিংবা git add -A, ব্যস হয়ে গেল মঞ্চে তোলা বা স্টেজ করা
4. এবারে আরেকটা কমিট করতে লিখুন git commit -m "Another commit"
5. আবার git status চেপে অবস্থা দেখুন
6. ফাইলটা আরো খানিকটা বদলে তারপর
   • স্টেজ করুন, তারপর
   • আরেকটা কমিট করুন।

…সহজ না? ব্যস, আপনার গিট শেখা শেষ। আপনি গিট শিখে গেছেন।

আপনি বলবেন: এক মিনিট; কোড শেখার কথা ছিল ৬টা, শেখা হলো ৪টা, বাকি দুটোর কী হবে? আসলে বাকি দুটো না হলেও আপনি লোকালি গিট ব্যবহার করে এভাবে ভার্সনের পর ভার্সন সংরক্ষণ করতে পারবেন। গিটের পুরো কাজটাই হয় লোকালি, একারণে গিট অনেক দ্রুত। এবং সত্যি কথা হলো, ‘তথ্যকণিকা’ সাথে নিয়ে কোড ২, ৩, আর ৪ দিয়েই আপনি লোকালি ভার্সন নিয়ন্ত্রণ করতে পারবেন (সহায়তার দরকার হলে ডানের বাক্সটা দেখুন)। …তবে যেহেতু আমরা সার্ভার থেকে জিনিসপত্তর নামিয়ে নিয়েছিলাম, তাই সার্ভারে আবার সেটা তুলে দেয়ার বিষয় থাকতেই পারে। এজন্য দরকার হবে এই দুটো কমান্ড-

কোড ৫: ধাক্কা মেরে তুলে দাও

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

git push origin master

অর্থাৎ, গিট, মূল যেখান থেকে একে পেয়েছো, সেখানে একে ধাক্কা (push) দিয়ে তুলে দাও। আমরা যখন ক্লোন করে রেখেছিলাম, তখনই সে তার খাতায় জানিয়ে রেখেছিল, তার মূল অস্তিত্ব যে সার্ভারে, সেখানে তার জন্ম হয়েছিল। তাই এখন যখন আমি origin master-এ তুলে দিতে বলেছি, সে বুঝে গেছে, কোন অরিজিনাল মাস্টারে তাকে তুলতে বলেছি।

গিট তখন আমার গিটহাবের ব্যবহারকারী নাম আর পাসওয়ার্ড জানতে চাইলো, আমি লিখলাম, তারপর এন্টার চাপতেই সে আমার লোকাল পিসিতে করা পরিবর্তনটা সার্ভারে তুলে নিয়ে সার্ভারের রেপোটাকেও সাম্প্রতিক করে নিলো। আমরা সেটা যাচাইও করে নিলাম গিটের হালহকিকত জিজ্ঞেস করে।

কোড ৬: টান দিয়ে নামিয়ে নাও

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

git pull

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

ব্যস, গিট আমাদের আয়ত্বে এসে গেছে। এবারে একে এগিয়ে নিতে হবে আরো অনেকদূর। আজ যে পথচলা শুরু হলো, এটা তো শুরু মাত্র। আমাদের জানার শেষ নেই। merge করা, merge conflict দূর করা, branch নিয়ে কাজ করা, প্রাইভেট রেপোতে কাজ করা, fetch করা, ফেচ করা তথ্যের সাথে পার্থক্য দেখা, অন্যের রেপোতে কাজ করা… কত রকম কাজ এখনও বাকি…। তাই এপর্যায়ে বোধহয় একটা উপযুক্ত সময় হয়েছে Scott Chacon-এর গিট পরিচিতিমূলক বক্তৃতাটা দেখে নেয়ার (এই ভিডিওটার লিংক দিয়ে বন্ধু নাজমুস সাকিব সর্বপ্রথম আমার গিট শেখার সূচনা করে, অবশ্য প্রথম হিসেবে একটু কঠিনই লাগছিল, কিন্তু এবারে আপনাদের আর কঠিন লাগবে না):

মঈনুল ইসলাম
mayeenulislam.github.io

আরো তথ্য

• Understanding git for real by exploring the .git directory – Pierre de Wulf (Medium.com) – .git ফোল্ডারটি ঘুরে ঘুরে দেখা যেতে পারে, medium-এ প্রকাশিত এই টিউটোরিয়াল দেখে নিলে।

হালানাগাদ: ৬ আগস্ট ২০১৭

The post গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান : পর্ব ২ appeared first on Tuts by Mayeenul Islam.

গিট (Git) হলো হাল আমলের সবচেয়ে প্রসিদ্ধ এবং জনপ্রিয় ভার্সন নিয়ন্ত্রণ সফ্‌টওয়্যার। …ভার্সন কন্ট্রোল বা ভার্সন নিয়ন্ত্রণ কী – আমরা সেটা দেখবো। আমরা যেহেতু একেবারে প্রাথমিক আলোচনা করছি, তাই অনেক বিষয়ই জানা থাকলেও একটু না একটু আলোচনা করতেই হবে, ধারণা পরিষ্কার হবে, আমরা বিষয়টা বুঝবোও সহজে। মনে রাখতে হবে, এপৃথিবীর সবকিছুর মূলে রয়েছে কিছু কনসেপ্ট বা ধারণা। ধারণাটা বুঝে ফেললে বাকি সব পানিভাত। Git নামটা বুঝার আগে আমি GitHub নামটা শুনেছিলাম, এবং এই দুটোর মধ্যে কোনো পার্থক্য করতে পারতাম না প্রথম প্রথম। আপনাদের মনেও যদি এই প্রশ্নটা থাকে, তাও আমরা পরিষ্কার করবো ইনশাল্লাহ। তবে শর্ত হলো দুটো –

1. যদি জানতে হয়, শিখতে হয়, পুরো লেখাটা দুই পর্বেরই শেষ পর্যন্ত পড়তে হবে।
2. আমার প্রতি বিশ্বাস রাখুন, খুব সহজে, সংক্ষেপে গিট বুঝাতে চলেছি, এবং আমার মতো মোটা মাথায় যদি ঢুকতে পারে, আপনাদের জন্য তো চিন্তারই কারণ নেই।

সংক্ষেপে বলো – সহজে বলো

গিট সম্পর্কে জানতে হলে কি আপনার এইসব ফিরিস্তি পড়তে হবে বসে বসে? …মোট্টেই না।

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

• গিট-এর উপর Scott Chacon-এর সম্পূর্ণ বই – Pro Git – বিনামূল্যে ডাউনলোড করুন
• অনলাইনে বসে হাতে-কলমে গিট শিখুন – Try Git থেকে
• অ্যাটলাশিয়ান-এর গিট টিউটোরিয়াল
• গিট পরিচিতি – হাসিন হায়দার – shell ব্যবহার করে গিট ব্যবহারের উপর বাংলায় ভিডিও টিউটোরিয়াল

ভার্সন নিয়ন্ত্রণ কী

গিট বুঝতে গেলে একটু বুঝে নেয়া দরকার, ভার্সন নিয়ন্ত্রণ বিষয়টা কী। সহজে বলতে গেলে নিচের টেক্সট ফাইলটি (Readme.txt) দেখা যাক:

	20140919~15:03:40	This is a readme file
	20140919~15:04:27	A readme file that is changed from its original state
	20140919~15:04:55	A readme file that is changed from its original state. And something appended after the first paragraph.

এই টেক্সট ফাইলটিকে আমরা একটা ছোট্ট উদাহরণ হিসেবে নিয়েছি। এখানে আপনারা ভালো করে লক্ষ করলে দেখবেন তিনটা আলাদা আলাদা সময়ের উল্লেখ আছে, যদিও তারিখটা একই আছে। তিনটা আলাদা সময়ে ফাইলটাতে তিনটা আলাদা পরিবর্তন হয়েছে। প্রথম সময়ে (15:03:40) যে লেখাটা ছিল, পরের সময়েই (15:04:27) সেই লেখাটা প্রায় পুরোপুরি বদলে ফেলা হয়েছে (মানে বাদ দিয়ে, যোগ করা হয়েছে)। আবার তার পরের সময়ে (15:04:55) দ্বিতীয় লেখাটা না ছুঁয়ে তার সাথে নতুন কিছু যোগ করা হয়েছে। মনে রাখতে হবে, এই তিনটা পরিবর্তনই কিন্তু একই ফাইলে হয়েছে, শুধু পার্থক্য হলো, এগুলো বিভিন্ন সময়ে হয়েছে। এখন আমরা এই তিনটা সময়কে যদি এই ফাইলটার তিনটা আলাদা আলাদা অবস্থা ধরে নিই, তাহলে তা-ই কিন্তু ভার্সন (version)।

আমাদের ফাইলটি এখন খুললে আমরা কোন অবস্থায় পাবো, মানে কোন ভার্সনে পাবো? অবশ্যই সর্বশেষ ভার্সনে, মানে 15:04:55 সময়ে আপডেট করা ভার্সনটি। কিন্তু ধরা যাক, কোনো কারণে আমাদের প্রথম বাক্যটার (A readme file that is…) জায়গায় দরকার একেবারে প্রথমে যে বাক্যটা লিখেছিলাম, সেই বাক্যটা (মানে: This is a readme file বাক্যটা)। এখন তাহলে কোথায় পাবো সেটা? …কোত্থাও পাওয়া যাবে না, কারণ ফাইলটার পুরোন সেই লেখাটা এখন আর ফাইলে নেই – ঐ লেখাটা মুছেইতো সর্বশেষ অবস্থা পেলাম। …এজন্যই দরকার পড়ে ভার্সন কন্ট্রোল বা ভার্সন নিয়ন্ত্রণের, যেখানে আমাদের পুরোন কাজগুলো কখন কেমন ছিল, তার একটা রূপ আমরা পরেও দরকার পড়লে পাই। আবার এমনও হতে পারে, ফাইলের সব লেখা মুছে কেউ সব উল্টাপাল্টা করে ফেললো, তখন ফাইলের বিভিন্ন ভার্সন থাকলে আমরা পুরোন ভার্সনটাতে ফাইলটাকে ফিরিয়ে নিয়ে গিয়ে বিপদ থেকে উদ্ধার পাবো সহজে। এই কালানুগ কিংবা অবস্থানুগ পরিবর্তনের চিত্রটাই হলো ভার্সন, আর উপরে বর্ণিত কারণগুলোর জন্যই মূলত আমাদের ভার্সন নিয়ন্ত্রণের দরকার পড়ে।

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

ভার্সন নিয়ন্ত্রণের পুরোন পদ্ধতি ফেলে এখন যখন গিট

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

আপনি যে ফাইলে কাজ করেছেন, সেই ফাইলটা ছাড়াও এখন আরো তিনটা ফাইল আপনার হয়ে গেছে। যদি একেকটা ফাইলের আকার 1kb করে হয়, তাহলে আপনার ডিস্কে এখন 4kb (মূল ফাইল + তিনটা ভার্সন) জায়গা জোড়া হয়ে গেছে। বিষয়টা বড় ফাইলের ক্ষেত্রে হলে কী হবে আশা করি আর বুঝিয়ে বলা লাগবে না। আর এখানেই গিট-এর কৃতিত্ব। গিট এই পদ্ধতিতে ভার্সন নিয়ন্ত্রণ করে না।

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

একটু পরিচিতি…

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

গিট নিয়ে কাজ করতে দেখলেই আমরা দেখি অনেক অনেক কোড লেখালেখি, আসলে এটাই হলো গিট নিয়ে কাজ করার সহজতর পন্থা (আমি কি ‘সহজতর পন্থা’ বলিনি?)। কিন্তু এছাড়াও গিট ব্যবহারের অনেক GUI বা Graphical User Interface বা দেখে-দেখে-ক্লিক-করে-করে-কাজ-করার প্রোগ্রাম রয়েছে, কিন্তু সেগুলো এখনও হয়তো অতটা সম্পূর্ণ না এবং অনেক ক্ষেত্রে সেগুলোতে সীমাবদ্ধতা আছে, তাই কোডাররা কোড লিখে কাজ করাকেই বেশি পছন্দ করেন। এবং GUI পদ্ধতিতে কাজ করলে একটা সমস্যা হলো একজন এই ইন্টারফেস পছন্দ করেন তো আরেকজন অন্য ইন্টারফেস পছন্দ করেন, তখন আপনার জন্য নিজের অবস্থান তৈরি করাটা কষ্টকর হয়ে উঠতে পারে। কিন্তু যে যেই ইন্টারফেসেই স্বচ্ছন্দবোধ করুন না কেন, যদি তাঁর গিট কোড জানা থাকে, তাহলে যেকোনো পরিবেশ-পরিস্থিতিতেই স্বাভাবিকভাবে, স্বচ্ছন্দে কোড করতে পারবেন তিনি। তাই আমরা আসলে ঐসব ইন্টারফেসভিত্তিক গিট না শিখে খুব সহজে কোড লিখে গিট শিখে নিব।

গিট ব্যাশ – কোড লিখে ভার্সন নিয়ন্ত্রণ

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

গিট ইন্সটল করা

মাইক্রোসফ্‌ট অফিস ব্যবহার করতে হলে যেমন তা ইন্সটল করে নিতে হয়, গিট ব্যবহার করার জন্যও তা ইন্সটল করে নিতে হয় – তবে গিট সফ্‌টওয়্যারটা যথেষ্ট হালকা। এজন্য আমাদেরকে নিচের URL থেকে গিট-এর সাম্প্রতিক সংস্করণটি ডাউনলোড করে নিতে হবে:

git-scm.com/downloads

ধর্তব্য ধাপ ১: ডাউনলোড করা ইন্সটলারটি চালু করলে Next চেপে চেপে এগোলে নিচের মতো একটি পর্দা আসবে। এখানে আপনাকে, গিট কোথায় ইনস্টল হবে, তা দেখিয়ে দিতে হবে। C:\ ড্রাইভে ইন্সটল করতেই হবে – এরকম কোনো বাধ্যবাধকতা নেই।

ধর্তব্য ধাপ ২: Next চাপলে আরেকটি পর্দা আসবে, যেখানে আপনাকে গিট-এর কম্পোনেন্ট মানে দরকারি অংশগুলো বাছাই করে নিতে হবে। এখানে আপনি Windows Explorer Integration অংশে Git Bash here এবং Git GUI here পছন্দ করে নিন – আমরা ব্যাশ নিয়ে কাজ করলেও GUI-টা পাশাপাশি থাকবে, এবং ঠিকমতো ইন্সটল হলে মাউসের রাইট বাটনের সাথে এই দুটো অপশন যোগ হয়ে যাবে। Next চাপুন।

ধর্তব্য ধাপ ৩: PATH বাছাই পাতায় Use Git from Git Bash only বাছাই করে Next চাপুন।

ধর্তব্য ধাপ ৪: Line ending conversions-এ Checkout Windows-style, commit Unix-style line endings বাছাই করে Next চাপুন।

ব্যস, গিট ইন্সটল হয়ে গেল।

এবারে গিটকে নিজের, সম্পূর্ণ আপন করে নেয়ার পালা। Start » Git » Git Bash-এ ক্লিক করুন। ব্যস, উইন্ডোজের ডস মোডের মতো একটা কমান্ড কনসোল খুলবে, এখানেই আমরা কাজ শুরু করবো। গিটকে আপন করে নেবার জন্য দুটো কাজ করতে হবে:

• গিটকে নিজের নামটা বলে দেয়া
• গিটকে নিজের ইমেইল ঠিকানাটা দিয়ে দেয়া

ধরা যাক আমার নাম Someone আর ইমেইল ঠিকানা হলো someone@example.com, তাহলে যা লিখতে হবে-

git config --global user.name "Someone"
git config --global user.email "someone@example.com"

ব্যস গিট এবার আপনার, শ্রেফ আপনার জন্য প্রস্তুত। এই কাজটা বারবার করতে হবে না, ব্যস এই একবারই।

গিট ব্যবহারের প্রাথমিক জ্ঞানের আজকের আলোচনা এই পর্যন্তই। এখানে আমরা গিট সম্পর্কে প্রায় সম্পূর্ণ অন্তর্নিহীত ধারণা পেয়ে গেলাম। আগামী পর্বে আমরা গিট ব্যবহার করে ভার্সন নিয়ন্ত্রণ করা শিখে নিব মাত্র ৬টা কমান্ড দিয়ে, ইনশাল্লাহ।

আগামী পর্বে সমাপ্য…

পরের পর্ব »

– মঈনুল ইসলাম
mayeenulislam.github.io

The post গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান : পর্ব ১ appeared first on Tuts by Mayeenul Islam.

Grab the Original English version here on WordPress StackExchange

জ্ঞানস্তর: প্রাথমিক/মাধ্যমিক স্তর

সময়: ৫ মিনিট

ফেভিকন (favicon) হলো ওয়েবসাইটের একটা সংক্ষিপ্ততম পরিচিতি বা ব্র্যান্ডিং, যা, আপনি ওয়েবসাইট খুললে ব্রাউযারের ট্যাবে কিংবা টাইটেল বারে, ওয়েবসাইটের নামের পাশে দেখা যায়। সাধারণত ওয়েবসাইটের লগো’র ছোট্ট রূপটাই ফেভিকন হিসেবে ব্যবহার করতে দেখা যায়, তবে এক্ষেত্রে ফেভিকনটা সম্পূর্ণই আপনার ব্যক্তিগত পছন্দ – যা ইচ্ছা তা হতে পারে। কোনো ওয়েবসাইটে ফেভিকন যুক্ত করার জন্য HTML <head> ট্যাগের ভিতর নিচের লাইনটি লিখতে হয়, আর যথাস্থানে .ico (Icon) এক্সটেনশানের একটা ইমেজ ফাইল রাখতে হয়:

<link rel="shortcut icon" href="images/favicon.ico" />

ওয়ার্ডপ্রেস ওয়েবসাইটেও একইভাবে ফেভিকন যুক্ত করা যায়, তবে ওয়ার্ডপ্রেসে ফাইলের পাথ (মানে কোথায় ফাইলটি আছে) বোঝানো একটু অন্যরকম, তাছাড়া সর্বত্র ফেভিকনকে দেখানোর বিষয়টিও আমরা এখানে আলোচনা করতে যাচ্ছি।

প্রথমত জেনে নেয়া দরকার, আপনি এই কাজটি থিম কিংবা প্লাগইন উভয় পদ্ধতিতেই করতে পারেন – আমরা উভয় পদ্ধতিই আলোচনা করছি:

প্রস্তুতি

যে ছবিটিকে ফেভিকন হিসেবে দেখাতে চান, তা নির্বাচন করুন, এবং যেকোনো ছবি এডিট করার টুল (যেমন: পেইন্ট, ফটোশপ, গিম্প ইত্যাদি) দিয়ে ছবিটিকে 16px × 16px কিংবা 32px × 32px-এ সংরক্ষণ করুন। ছবির ফাইলটি .jpg (JPEG), .png (PNG), .gif (GIF) ইত্যাদি যেকোনো ফর্মেটেরই হতে পারে। তবে ব্যাকগ্রাউন্ডহীন ছবি হলে .png-তে সংরক্ষণ করতে হবে।

ফাইলটিকে রিনেম করুন, এবং এক্সটেনশানটা বদলে .ico করে ফেলুন। ধরা যাক আপনার ছবিটি ছিল favicon.png, এবারে তা হয়ে গেল favicon.ico।

ব্যস, প্রস্তুতি শেষ। এবারে কাজে নামার পালা।

থিম-এর মাধ্যমে ফেভিকন যোগ

স্ট্যাটিক বা স্থির কোড

থিম তৈরি করার সময় থিমের images ফোল্ডারের ভিতর ফেভিকন আইকন ফাইলটি রেখে, থিমের হেডারে <head> ট্যাগের ভিতর উপরের কোডটি বসিয়ে দিলেই কাজটা হয়ে যাবে। তবে কোডটিতে একটু পরিবর্তন করে নিতে হবে:

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" />

লক্ষ করুন এখানে get_template_directory_uri()ব্যবহার করা হয়েছে। ওয়ার্ডপ্রেসে থিমের ফোল্ডারটির পাথ সনাক্ত করাবার জন্য এটি ব্যবহার করা হয়ে থাকে। আপনি যদি চাইল্ড থিম নিয়ে কাজ করেন, তাহলে এক্ষেত্রে get_stylesheet_directory_uri()-এর ব্যবহার করুন।

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

ডায়নামিক কোড

ওয়ার্ডপ্রেস থিমের হেডারের <head> সেকশনে wp_head()-এর ব্যবহার উত্তম, এবং একটি আধুনিক পদ্ধতি – অনেক প্লাগইনই এর হুকটা ব্যবহার করে প্রয়োজনীয় কোড লোড করে। আপনার থিমে এই হুকটা যদি হেড সেকশনে বসানো থাকে, তাহলে থিমের functions.php ফাইলে নিচের কোডটি বসাতে হবে:

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

রেফারেন্স লিংক:

• get_template_directory_uri() – ওয়ার্ডপ্রেস কোডেক্স^
• get_stylesheet_directory_uri() – ওয়ার্ডপ্রেস কোডেক্স^

প্লাগইন-এর মাধ্যমে ফেভিকন যোগ

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

এজন্য শুরুতেই একটা নিজস্ব প্লাগইন^ বানিয়ে নিতে পারি। কোড এডিটর খুলে নিচের কোডগুলো লিখুন:

লক্ষ করুন, এখানে আমরা আগের ফাংশনটার বদলে plugins_url() ফাংশনটা ব্যবহার করেছি, কারণ আমরা প্লাগইনের ভিতরে আমাদের আইকন ফাইলটি রাখতে যাচ্ছি। এবারে ফাইলটি ধরা যাক my-favicon.php লিখে সংরক্ষণ করলাম। ফাইলটা একটা my-favicon নামক একটা ফোল্ডারে রেখে আমাদের favicon.ico ফাইলটি ঐ ফোল্ডারে রাখি। এবারে এই পুরো ফোল্ডারটি wp-content/plugins ফোল্ডারের ভিতর পেস্ট করি। তাহলে ব্যাপারটা যা দাঁড়ালো:

wp-content/
    plugins/
       my-favicon/
         -my-favicon.php
         -favicon.ico

এখন আপনার ওয়ার্ডপ্রেস অ্যাডমিন প্যানেলের প্লাগইন্‌স পাতায় (সাধারণত /wp-admin/plugins.php) গিয়ে My Favicon নামক প্লাগইনটি অ্যাক্টিভেট বা সক্রীয় করুন।

ব্যস, এবার আপনার সাইটের ফ্রন্টএন্ড এবং ব্যাকএন্ডে উপভোগ করুন ফেভিকন!

রেফারেন্স লিংক:

• plugins_url() – ওয়ার্ডপ্রেস কোডেক্স^

বোনাস – অ্যাপল টাচ আইকন যোগ!

অ্যাপলের মোবাইল (আইফোন) কিংবা আইপ্যাডে অ্যাপল টাচ আইকন দেখা যায়, যা আপনার সাইটের প্রতিনিধিত্ব করবে অনেকটা ফেভিকনের মতো।  যদিও ফেভিকন এবং অ্যাপল টাচ আইকন ভিন্ন বিষয়, তবু এদের পদ্ধতিটা যেহেতু এক, তাই বিষয়টা এখানেই আলোচনা করা হলো:

ফেভিকন যেখানে ১৬-১৬ কিংবা ৩২-৩২ ডাইমেনশনে তৈরি করা হয়েছিল, অ্যাপল টাচ আইকনটা সেখানে তৈরি করতে হবে 129px × 129px ডাইমেনশনে, তবে ফাইলটা .png হলেও সমস্যা নেই। এবারে আগের কোডের মতোই হবে এবারের কোডটিও, লিখতে হবে:

বাকিটা এবারে আপনিও পারবেন ইনশাল্লাহ। 🙂

এই অংশটির জন্য helgatheviking^-কে ধন্যবাদ (মূল উৎস^)।

-মঈনুল ইসলাম
mayeenulislam.github.io

______________________________

^{পুরো টিউটোরিয়ালটা আগে, ইংরেজিতে প্রকাশ করেছিলাম StackExchange-এর WordPress Development প্রশ্নোত্তর সাইটে ১৬ মার্চ ২০১৪ তারিখে। (মূল লিংক^)}

The post ওয়ার্ডপ্রেস ফ্রন্টএন্ড ও ব্যাকএন্ডে ফেভিকন যোগ appeared first on Tuts by Mayeenul Islam.

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

সাবটাইটেল ফাইল পরিচিতি

সাবটাইটেল ফাইলগুলোর এক্সটেনশন হলো SRT (*.srt)। ফাইলের নাম যা ইচ্ছা হতে পারে, ভিডিও প্লেয়ারে ভিডিওটি চালু করে এসআরটি ফাইলটি লোড করে দিলেই হয়, সময় বুঝে বুঝে সে ভিডিও চলার সাথে সাথে নিচে সাবটাইটেল দেখাতে থাকবে। এই ফাইলগুলোতে শুধু লেখা বা অক্ষর থাকে বলে এগুলোর আকার হয় যথেষ্ট কম, মাত্র কয়েক কিলোবাইট (KB)।

সাবটাইটেল ফাইলের কার্যপদ্ধতি

দেখা যাক একটা সাবটাইটেল ফাইল কিভাবে কাজ করে, উদাহরণস্বরূপ ‘শার্লক হোম্‌স’ চলচ্চিত্রের এসআরটি ফাইলটাই ধরা যাক:

1
00:00:27,198 --> 00:00:29,189
[HOOVED PATTERING]

2
00:00:29,367 --> 00:00:31,597
[HORDED WHINNYING]

3
00:01:43,307 --> 00:01:44,774
HOLMES:
 <i>Head cocked to the left...</i>

4
00:01:44,942 --> 00:01:46,739
<i>...partial deafness in ear.</i>

এখানে 1, 2, 3, … এগুলো হলো সাবটাইটেলের সংখ্যা। 00:00:27, 198 –> 00:00:29, 189 হলো ঘন্টা:মিনিট:সেকেণ্ড, মিলিসেকেণ্ড থেকে ঘন্টা:মিনিট:সেকেণ্ড, মিলিসেকেণ্ড পর্যন্ত সময়কাল; এর দ্বারা বোঝায়, লেখাটি এই সময়ের ভিতরে পর্দায় দেখা যাবে, সময় শেষ হয়ে গেলেই তা অদৃশ্য হয়ে যাবে। আর এর পরে দিতে হয় প্রদর্শনযোগ্য লেখাটি, যেমন এখানে [HOOVED PATTERING] লেখাটি।

সাবটাইটেল-এ বিভিন্ন ফরম্যাটিং যুক্ত করার জন্য HTML-এর কয়েকটি বহুল পরিচিত ট্যাগ ব্যবহার করা যায় এসআরটি ফাইলে, যেমন: Bold ট্যাগ (Text), Italic ট্যাগ (Text), এবং Underline (Text)। লক্ষ করুন: এখানে 3 নম্বর সাবটাইটেলটি ইটালিক ট্যাগ দিয়ে লেখা, মানে মনিটরে এই লেখাটি বাঁকা করে দেখাবে।

এছাড়াও সাবটাইটেল লেখায়, সাহিত্যিক লেখনীর বিভিন্ন প্রতীকি বিষয় দেখানো যায়, যেমন: একটা শব্দ (sound) হচ্ছে, শব্দটা কোনো ব্যক্তির বক্তব্য নয়, তাই শব্দকে বোঝাতে তৃতীয় বন্ধনীর ভিতরে ইংরেজি বড় ছাদের হরফ দিয়ে লেখা হয় শব্দটার ধরণ, তখন দর্শক বুঝতে পারেন, এটা কিসের শব্দ। উদাহরণস্বরূপ: এখানে 1, 2-তে ‘ঘোড়া ডাকছে’ এবং ‘চাপা আওয়াজ’ বোঝাতে যথাক্রমে [HOOVED PATTERING] এবং [HORDED WHINNYING] লেখা হয়েছে তৃতীয় বন্ধনী দিয়ে। এছাড়া, কোনো কথায় জোর দেয়া (emphasis) বোঝাতে বাঁকা করে লেখা, যেমন: I insist, I did not do this. (আমি জোরেশোরে বলছি, আমি এটা করি নাই)। এছাড়া ‘কথাগুলো মনে মনে বলছে’ বোঝাতে বাঁকা করে লেখা। আবার কোনো কথা চিৎকার করে জোর গলায় বলা হচ্ছে বোঝাতে সবগুলো হরফ ইংরেজি বড় ছাদের অক্ষর দিয়ে লেখা হয়, যেমন: I say DO IT NOW. (আমি বলছি, [চিৎকার করে] এক্ষুণি করো)। এছাড়া এন্টার (Enter, Return) চেপে নিচের লাইনে চলে আসার মাধ্যমে লেখাকেও একাধিক লাইনে লেখা যায়।

সাবটাইটেল ফাইল তৈরি করার পদ্ধতি

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

1. প্রথম ধাপ: প্রথমে একটা নোটপ্যাড খুলুন (উইন্ডোজ কম্পিউটারে Start > All Programs > Accessories > Notepad। কিংবা Start > Run খুলে লিখুন notepad এবং OK করুন)
2. দ্বিতীয় ধাপ: এবারে উপরে দেয়া ফরম্যাট অনুসরণ করে আপনার কাঙ্ক্ষিত ভিডিওটির লেখাগুলো, ভিডিও প্লেয়ারে সময়ের সাথে মিলিয়ে মিলিয়ে দেখে লিখে ফেলুন
3. তৃতীয় ধাপ: লেখা শেষ হয়ে গেলে ফাইলটি সংরক্ষণ করতে File > Save (Ctrl + S) চাপুন। যেখানে সংরক্ষণ করতে চান, সেখানে গিয়ে File Name-এর স্থলে ফাইলের নাম লিখুন এবং .txt-এর বদলে লিখুন .srt। কারণ আমরা সাবটাইটেল হিসেবে ফাইলটি সংরক্ষণ করতে চাচ্ছি, আর সাবটাইটেল ফাইলের এক্সটেনশন হলো এসআরটি

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

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

বাংলায় সাবটাইটেল লেখার পদ্ধতি

‘How to write Bangla subtitle?’ লিখে গুগল করেও কাঙ্ক্ষিত জবাব সহজে পাইনি। তাই বাংলায় সাবটাইটেল লেখার বিষয়টা নিয়েই মূলত এই আয়োজন। যাহোক, সাবটাইটেল লেখার পদ্ধতি সম্পর্কে আমরা এখন জানি, এবং করতেও পারি। তাই সাবটাইটেল লেখার জন্য ‘প্রথম ধাপ’ অনুসরণ করতে কোনো বাধা নেই।

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

ধরা যাক, শার্লক হোম্‌সের ঐ সাবটাইটেলগুলো আমরা বাংলায় লিখলাম, তাহলে তা দেখা যাবে এভাবে:

1
00:00:27,198 --> 00:00:29,189
[ঘোড়া ডাকছে]

2
00:00:29,367 --> 00:00:31,597
[চাপা আওয়াজ]

3
00:01:43,307 --> 00:01:44,774
হোম্‌স: <i>মাথাতে বাম দিকে থেকে আঘাত...</i>

4
00:01:44,942 --> 00:01:46,739
<i>...মানে, কানে সাময়িক বধিরতা।</i>

এভাবে বাংলায় লিখে ফেলার পরে আমাদের দ্বিতীয় ধাপ শেষ।

তৃতীয় ধাপ: এবারে তৃতীয় ধাপে গিয়ে নোটপ্যাডের File > Save (Ctrl + S) চাপার পর যে উইন্ডো আসবে, সেখানে আগের মতোই ফাইলনেম দিতে হবে এবং এক্সটেনশন হিসেবে .srt লিখতে হবে। শুধু, সংরক্ষণ করার আগে, নিচের তিন নম্বর ড্রপডাউনে ক্লিক করে ANSI’র বদলে Unicode পছন্দ করে দিতে হবে; ব্যস, কাজ শেষ। ইউনিকোড এজন্য পছন্দ করে দিতে হবে, কারণ বাংলা হরফগুলো আমরা ইউনিকোডে লিখেছি, এবং নোটপ্যাড ডিফল্টভাবে ASCII Plain Text লেখার জন্য তৈরি করা হয়েছে। আপনি ইউনিকোড পছন্দ না করে দিলে এতক্ষণ কষ্ট করে লেখা বাংলা লেখাগুলো নোটপ্যাড আসকিতে বদলে নিবে, এবং বাংলা লেখাগুলোর বদলে সেখানে কিছু প্রশ্নবোধক চিহ্ন (?????) বা আয়তাকৃতির বাক্স দেখা যেতে পারে। তখন সব পরিশ্রম বৃথা হয়ে যাবে।

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

নোটপ্যাড ছাড়াও ওয়ার্ডপ্যাড-এ লেখার কাজটি করা যায়। তবে ওয়ার্ডপ্যাডে বাংলা রেন্ডারিং-এ সমস্যা দেখা যেতে পারে। আপনি চাইলে মাইক্রোসফ্‌ট অফিস দিয়েও এধরণের লেখালেখি করতে পারেন, এতে বাংলা লেখাগুলো বড়-ছোট করে ভালো করে দেখে লিখতে পারবেন। তবে সেজন্য ফাইলটি সংরক্ষণ করার সময়ই যথারীতি .srt এক্সটেনশন দিয়ে, Save as type-এ Plain Text (*.txt) পছন্দ করে Save-এ ক্লিক করতে হবে। এবারে পরবর্তি উইন্ডোতে File Conversion-এ Other Encoding- রেডিও বাটনে এ ক্লিক করে তালিকা থেকে Unicode পছন্দ করে দিতে হবে। তারপর OK করে সংরক্ষণ সম্পন্ন করতে হবে।

এছাড়া বিভিন্ন কোড এডিটর যেমন: NotePad++, SublimeText, Visual Studio Code, … ইত্যাদি দিয়েও কাজটি করা যাবে, তবে সংরক্ষণ করার সময় ইউনিকোডের ব্যাপারটি মাথায় রাখলেই হবে।

সাবটাইটেল লেখা/সম্পাদনার বিশেষ সফ্‌টওয়্যার

এভাবে হাতের কাছে যা আছে, তা দিয়ে কাজ না করে আরো সহজসাধ্য সফ্‌টওয়্যার দিয়ে যারা কাজ করতে চান, তারা সাবটাইটেল লেখার বিভিন্ন সফ্‌টওয়্যার ব্যবহার করে থাকেন। এধরণের সফ্‌টওয়্যারগুলোর মধ্যে Subtitle Workshop, Subtitle Edit, AHD Subtitles Maker ইত্যাদি জনপ্রিয়। এছাড়াও আরো বহু সফ্‌টওয়্যার কিনে অথবা বিনামূল্যে ব্যবহার করা যায়।

সীমাবদ্ধতা

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

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

– মঈনুল ইসলাম
mayeenulislam.github.io

The post কিভাবে বাংলায় ভিডিও’র সাবটাইটেল লিখবেন? appeared first on Tuts by Mayeenul Islam.

ভার্ষন: ফটোশপ ৭ (এবং সমমান)

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

চিত্র ১ থেকে আমরা পুরো উইন্ডো’র একটা পরিচিতি পেয়ে যাবো। নিচে সেগুলোর সংক্ষিপ্ত পরিচিতি দেয়া হলো (এগুলোর বিস্তারিত আমরা ভবিষ্যতে জানবো, ইনশাল্লাহ):

টাইটেল বার: নাম শুনেই বোঝা যাচ্ছে এখানে দেখা যাবে পরিচিতিমূলক নাম বা টাইটেল। সবচেয়ে উপরের অংশটিতেই তা থাকে। যেহেতু আমাদের সফ্‌টওয়্যারের নাম ফটোশপ, তাই এখানে টাইটেল বারে লেখা Adobe Photoshop।

মেনু বার: যেখানে File, Edit, Image ইত্যাদি মেনু থাকে, এবং তার অধীনে সাবমেনু থাকে।

টুলবার/টুলপ্যালেট: ‘প্যালেট’ বানানটা এরকম: Palette। এটা দিয়ে বোঝানো হয় চিত্রকরদের আঙ্গুল ঢুকিয়ে হাতের তালুতে ধরা একটা বোর্ড, যাতে রং লেপ্টে চিত্রকর ছবি আঁকেন। অনেকেই একে ভুল করে ‘প্লেট’ বলে, যা শুদ্ধ নয়। যাহোক, কাজ করার উপযোগী প্রয়োজনীয় সব টুলগুলো যেখানে গোছানো থাকে, তাই টুল প্যালেট।

রিবন: টুলবারে যে টুলটা সিলেক্ট করা হবে বা বাছাই করা হবে, সেই টুল সংক্রান্ত প্রয়োজনীয় ফিচার বা সেটিংসগুলো দেখা যাবে এই রিবনে। প্রাথমিকভাবে মুভ টুল (V) সিলেক্ট থাকে বলে চিত্রের (চিত্র ১) মতো ফিচারগুলো দেখা যাচ্ছে। আপনি তার পার্শ্ববর্তি র‍্যাক্টাঙ্গুলার মার্কিউ টুল (M) সিলেক্ট করলেই দেখবেন রিবনের অপশনগুলো বদলে গেছে।

ইমেজএরিয়া (কর্মক্ষেত্র): এটা হলো মূল কর্মক্ষেত্র। ফটোশপ খোলার পরে এটা দেখা যায় না, নতুন একটা ফাইল চালু করলে, কিংবা বিদ্যমান কোনো ছবির (ইমেজ) ফাইল খুললে এটা দেখা যাবে। এখানেই মূলত যাবতীয় কাজ করা হয়, এবং দেখা যায়।

ইমেজ এরিয়ার উপরে রয়েছে আরেকটা টাইটেল বার। এই টাইটেল বারও ডিযাইনারদের জন্য গুরুত্বপূর্ণ। কেননা এখানে যেমন থাকে ফাইলটার নাম, কত শতাংশে দেখা যাচ্ছে, কোন লেয়ারটা সিলেক্ট করা আছে এবং সবচেয়ে গুরুত্বপূর্ণ– ছবিটা কোন মোডে, অর্থাৎ RGB নাকি CMYK নাকি Grayscale-এ আছে, তা দেখা যায়।

স্ট্যাটাসবার: ‘স্ট্যাটাস বার’ নামটা শুনেই বোঝা যাচ্ছে এখানে স্ট্যাটাস বা অবস্থা সম্পর্কে দেখা যায়। [স্ক্রিনশট ০১.২-এ] লক্ষ করুন, স্ট্যাটাস বারে আমরা কিছু স্থান, সংখ্যা দিয়ে মার্ক করেছি, সেগুলো হলো:

১. যে ইমেজ এরিয়াটা খোলা আছে, কিংবা একাধিক ইমেজের ক্ষেত্রে যে ইমেজটা বা ইমেজ এরিয়াটা সিলেক্ট করা আছে, সেটা এই মুহূর্তে তার মূল আকৃতির কত শতাংশে দেখা যাচ্ছে, তা দেখা যায়। আমার ইমেজটা মূল আকারের 66.67% বড় করে দেখা যাচ্ছিল। আপনি চাইলে ওখানে টাইপ করে 100%, 80%, 53% -এভাবে যে পরিমাণ বড় করে দেখতে চান, দিতে পারেন। (একই ফাংশন Info প্যালেটে দেখা যায়)

২. এটা মূলত কোনো অনলাইন এডিটিং-এর সময়, কিংবা কোনো নেটওয়ার্কে একাধিক ব্যক্তি একটি ফাইলে কাজ করছেন, ওসব ক্ষেত্রে নেটওয়ার্কে যোগাযোগ ম্যানেজ করা যায় ওখান থেকে। নেটওয়ার্কে বসে একাধিক ব্যক্তি একসাথে কাজ না করলে ওটার দরকার পড়বে না। (একই ফাংশন মেনুবারে File > Workgroup-এ দেখা যাবে)

৩. এখানে দেখা যায়, যে ফাইলটা খোলা আছে, বা চালু করেছি, তার প্রকৃত আকৃতি কত, যেমন: 3M মানে হচ্ছে ছবিটার পিক্সেল ডাইমেনশন, মানে পিক্সেলের আকার কেমন, তা নির্দেশ করছে। দ্বিতীয়াংশের লেখাটি ফাইলের সম্ভাব্য আকৃতি সম্পর্কে ধারণা দেয় কিলোবাইটে (k) কিংবা মেগাবাইটে (m)।

৪. ৩ নম্বর অংশে কোন তথ্যটা দেখতে চান, তা এখান থেকে ঠিক করে দেয়া যায়। প্রাথমিকভাবে Document Sizes সিলেক্ট করে দেয়া আছে, তাই ৩ নম্বর-স্থলে ডকুমেন্ট সাইযেস দেখাচ্ছে। যদি Document Dimensions সিলেক্ট করা থাকতো, তাহলে ডকুমেন্টের পাশ-উচ্চতা’র (width-height) পরিমাপ দেখাতো।

আর এর ঠিক পরের অংশটিতে দেখায়, যে টুলটি সিলেক্ট করা আছে, তা পরিচালনা করার প্রয়োজনীয় নির্দেশনা।

ন্যাভিগেটরপ্যালেট (Navigator): এখানে দেখা যায় নিবন্ধটা কত শতাংশ বড় করে দেখা যাচ্ছে, তা প্রয়োজনে ছোট-বড় করা যায়।

ইনফোপ্যালেট (Info): মাউসের কার্সরটা এই মুহূর্তে যেখানে আছে, সেখানটার রংয়ের মান কী (R=?, G=?, B=? অথবা C=?, M=?, Y=?, K=?), রুলারের হিসাবে ওটার X-অক্ষ এবং Y-অক্ষের মান কত –সবকিছু দেখাবে।

কালারপ্যালেট (Color): ফোরগ্রাউন্ড কালার (উপরের রং) আর ব্যাকগ্রাউন্ড কালার (পিছনের রং) এখন কী আছে, এবং তা প্রয়োজনে পরিবর্তন করে নেয়া যায় যে কোনো রঙে, এখান থেকে।

সোয়াচেযপ্যালেট (Swatches): এখানে অনেকগুলো রং একসাথে দেখা যাবে, তবে প্রত্যেকটা আলাদা আলাদা করে দেখানো হয়েছে। প্রয়োজনীয় রঙে ক্লিক করে সেই রংটি দ্রুততার সাথে বাছাই করা যাবে।

স্টাইল্‌সপ্যালেট (Styles): বিভিন্ন ইফেক্ট, যা আপনি আগে কোথাও দিয়েছিলেন, তা যদি সেভ করে রাখেন, তবে তা এখানে দেখাবে। সহজ ভাষায়, স্টাইল্‌স প্যালেটে থাকবে সব রেকর্ড করা ইফেক্ট, যা বারবার কাজে লাগানো যায়।

হিস্ট্রিপ্যালেট (History): যা যা কাজ করলেন, তার সবই ধারাবাহিকভাবে দেখা যাবে এই প্যালেটে, প্রয়োজনীয় ধাপে এক ক্লিকেই ঘুরে আসা যায়।

এ্যাকশন্‌সপ্যালেট (Actions): একই ধরণের কাজ (এ্যাকশন) করার একঘেয়েমী দূর করতে একবার করে তা এখানে রেখে দেয়া যায়, পরে এক ক্লিকে কাজে লাগানো যায়।

টুলপ্রিসেট্‌স (Tool Presets): টুলবারে যে টুলটা সিলেক্ট করা হলো, তার কোনো বিশেষ ইফেক্ট যদি সেভ করা থাকে, তবে সেটা এখানে দেখা যায়। ফটোশপে প্রাথমিকভাবে কিছু প্রিসেট দিয়ে দেয়া থাকে।

লেয়ার্‌সপ্যালেট (Layers): আমার সবচেয়ে পছন্দের প্যালেট, এবং ফটোশপের সবচেয়ে বেশি ব্যবহৃত একটা প্যালেট। এখানে বিভিন্ন স্তর তৈরি করে একই ছবিতেই বিভিন্ন স্তরে আলাদা আলাদাভাবে কাজ করা যায়।

চ্যানেল্‌সপ্যালেট (Channels): ছবিটা যদি আরজিবি মোডে থাকে, তবে তিনটার সংমিশ্রণে একটা আর তিনটাতে আলাদা আলাদা করে আরো তিনটা –এভাবে একাধিক চ্যানেলে ছবিটাকে দেখা যায়।

পাথ্‌সপ্যালেট (Paths): সাধারণত কিছুই থাকে না। ছবির কোনো সিলেকশন যদি সংরক্ষণ (সেভ) করা হয়, তাহলে সেটা এখানে সংরক্ষিত থাকে।

ক্যারেক্টারপ্যালেট (Character): ফটোশপে লেখার জন্য যখন টেক্সট টুলের কাজ আসবে, তখন আপনার সবচেয়ে বেশি কাজে লাগবে এই ক্যারেক্টার প্যালেট। এখান থেকে ফন্ট সংক্রান্ত যাবতীয় পরিবর্তন এবং পরিশুদ্ধি আপনি নিশ্চিত করতে পারবেন।

প্যারাগ্রাফ প্যালেট (Paragraph): লেখাগুলোকে সুন্দর করে গুছিয়ে উপস্থাপন করার জন্য প্যারাগ্রাফের বিভিন্ন ধরণ পরিবর্তনে সহায়তা করবে এই প্যালেটটি।

প্যালেট কূপ (Palette Well): নাম দেখে ঘাবড়ে যাবার কিছু নেই, ফটোশপ ৭-এ প্যালেটগুলোর উপরের দিকে রিবনের ডান অংশে ব্রাশেয আর ফাইল ব্রাউযার নামে দুটো প্যালেট বসে থাকতে দেখা যায়, ঐ অংশটাকে বলে প্যালেট ওয়েল, যার বাংলা করলে দাঁড়ায় প্যালেটের কুয়া বা কূপ। প্রাথমিকভাবে প্যালেট কূপে এই ব্রাশেয আর ফাইল ব্রাউযার- দুটো প্যালেটই থাকে।

ব্রাশেয প্যালেট (Brushes): টুলবারে যে ব্রাশটা সিলেক্ট করা আছে, সেটাকে এখানে ইচ্ছামতো বদলে নেয়া যায়।

ফাইলব্রাউযার প্যালেট (File Browser): সহজে নির্দিষ্ট ফাইলকে খুলতে ফাইল ব্রাউজার কাজের জিনিস। এখান থেকে যেকোনো স্থানে গিয়ে প্রয়োজনীয় ফাইলটা খোলা যায়। এমনকি লক্ষ করলে দেখবেন, ফাইল ব্রাউজারের একেবারে নিচে-ডানে সিলেক্ট করা ফাইলটাকে উৎসস্থলেই ৯০০[ডিগ্রী] রোটেট করা বা ঘোরানো যায়।

যদি কোনো প্যালেট দেখা না যায়, তাহলে খুব সহজেই মেনুবারের Window মেনুর অধীনে ক্লিক করে প্রয়োজনীয় প্যালেট চালু করে নেয়া যাবে, আবার প্রয়োজনে বন্ধও করে ফেলা যাবে।

প্যালেট কূপে প্যালেট ফেলা

আপনার প্যালেটগুলো যদি ওয়ার্কস্পেসের ডানদিকে সংকুলান হয়না, তাহলে আপনি আপনার পছন্দের প্যালেটটিকে প্যালেট কূপে নোঙর (dock) করিয়ে রাখতে পারেন বা ফেলে দিতে পারেন। এজন্য পছন্দের প্যালেট শিরোনামে একটা ক্লিক করে প্যালেটটি নির্বাচন করে নিতে হবে। তারপর প্যালেটের ডানদিকে ডান-মুখী তীরটাতে ক্লিক করে তার মেনু বের করতে হবে। মেনুর প্রথম অপশনটাই হলো “Dock to Palette Well”। ওটাতে ক্লিক করলেই আপনার প্যালেটটি প্যালেট কূপে গিয়ে ঢুকে যাবে। কুয়ার মধ্যে পড়ে যাওয়ার যে এতো আনন্দ, ঐ প্যালেটকে না দেখলে বোঝা যাবে না তখন।

ইচ্ছেমতো ওয়ার্কস্পেস সাজানো

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

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

এই সমস্যার সমাধান হলো, নিজের পছন্দের ওয়ার্কস্পেস সংরক্ষণ করে রাখা (সেভ করা)। নিজের পছন্দমতো প্যালেটগুলো সাজিয়ে নেয়া হয়ে গেলে, মেনু বারের Window > Workspace > Save Workspace… –এ ক্লিক করতে হবে (চিত্রে দ্রষ্টব্য 1)। একটা পপআপ আসবে (চিত্রে দ্রষ্টব্য 2), সেখানে আপনার পছন্দের ওয়ার্কস্পেসের জন্য একটা নাম লিখুন (আমরা যেমন লিখেছি nanodesigns workspace), তারপর সেভ বোতাম চাপুন। ব্যস, আপনার ওয়ার্কস্পেস সংরক্ষিত থাকলো। পরবর্তিতে ওয়ার্কস্পেস অন্যরকম হয়ে গেলেও Window > Workspace–এর অধীনে থাকা আপনার সংরক্ষিত ওয়ার্কস্পেস লোড করতে (পূণরায় ব্যবহার করতে) পারেন (চিত্রে দ্রষ্টব্য 3)।

আর যদি কখনও মনে হয়, নাহ্, এগুলো আর ভালো লাগছে না, ফটোশপে যেভাবে দেয়া ছিল, সেভাবেই ফিরে যাই, তাহলে Window > Workspace > Reset Palette Locations –এ ক্লিক করে প্যালেটের অবস্থান রিসেট করে নিয়ে ডিফল্ট বা প্রাথমিক অবস্থায় ফিরে যাওয়া যাবে সহজেই।

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

-মঈনুল ইসলাম
mayeenulislam.github.io

The post বেসিX: ফটোশপের ওয়ার্কস্পেস appeared first on Tuts by Mayeenul Islam.