ওয়ার্ডপ্রেস থিম অপশন্‌স পাতায় এডিটরকে পূর্ণ প্রবেশাধিকার দিন।

জ্ঞানস্তর: মাধ্যমিক/উচ্চস্তর
সময়: ৫ মিনিট

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

ওয়ার্ডপ্রেসে অ্যাডমিন প্যানেলে আলাদা পাতা বানিয়ে সেটিংস ডাটাবেযে সংরক্ষণের চিন্তা করলেই আপনাকে ওয়ার্ডপ্রেসের Settings API^‘র কথা চিন্তা করতে হবে। কারণ এই পদ্ধতিতে আপনি অনেক ঝামেলার বিষয়কে এড়িয়ে, হ্যাকিংয়ের সম্ভাবনা কমিয়ে আপনার সাইটের অ্যাডমিন প্যানেলে একটি সুরক্ষিত অ্যাডমিন সেকশন তৈরি করে নিতে পারবেন। কিন্তু সেটিংস এপিআই একটু সময় নিয়ে করতে হয়। যাহোক, সেটিংস এপিআই নিয়ে অন্য একদিন কথা বলা যাবে। এছাড়াও বিভিন্ন অপশন্‌স ফ্রেমওয়ার্ক আছে, যেগুলো অনুসরণ করে অনেক কম সময়ে অনেক ভালো অ্যাডমিন সেকশন তৈরি করে ফেলা যায়। কিন্তু এই পদ্ধতিগুলোর একটা সমস্যা আছে, সেটা হলো গতি। অ্যাডমিন ফ্রেমওয়ার্কগুলো সাইটকে অনেক ধীর করে দেয়। খুব ছোটখাটো কাজের জন্য তাই ফ্রেমওয়ার্কের বিকল্প হলো আমার গুরু Ian Stewart-এর Sample Theme Options^। মাত্র একটি ফাইল ব্যবহার করে দারুণ একটি থিম অপশন্‌স পেজ তৈরি করা যায় অনায়াসেই।

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

Cheatin’ uh?

এররটা একটু বিতর্কিত, কারণ অনেকেই এধরণের ভুলকে ‘চিটারি’ বলে অপমান করা মনে করেন। যাহোক, সেটা আমাদের বিষয় না। …অনেক ঘাঁটাঘাঁটি করলাম। কিন্তু আশানুরূপ কোনো সমাধান পেলাম না। ঘাঁটতে ঘাঁটতে ওয়ার্ডপ্রেসের trac-এ একটি টিকেট^ পেয়ে গেলাম, সেখানে একটা আপাত-সমাধান পেলাম।Continue reading

ওয়ার্ডপ্রেস পাসওয়ার্ড রিসেট, পিএইচপিমাইঅ্যাডমিন ছাড়াই

জ্ঞানস্তর: উচ্চস্তরের টিউটোরিয়াল

সময়: ১০ মিনিট

অতি সম্প্রতি আমার একজন ক্লায়েন্ট এমন একটি সাইট নিয়ে উপস্থিত হয়েছেন, যেখানে আগের ডেভলপার তাঁকে ঠকিয়েছে। সাইটটা যে ওয়ার্ডপ্রেসে করেছে, তাও বলেনি, সাইটের অ্যাডমিন প্যানেলের পাসওয়ার্ডও দিয়ে যায়নি। ক্লায়েন্ট আমাকে কন্ট্রোল প্যানেলের পাসওয়ার্ড দিতে পারলেও সেখানে ঢুকে আমি থ’ হয়ে গেলাম: ৫ গিগাবাইট সার্ভার স্পেস থাকাসত্ত্বেয় সেখানে phpMyAdmin কিংবা SQL Manager নেই, এখন কিভাবে ওয়ার্ডপ্রেসের ব্যাকআপ নেয়া যায়? ব্যাকআপ না নিয়ে তো নতুন কাজে হাত দেয়া যায় না…

শেষ পর্যন্ত একটা উপায় খুঁজে পেলাম, যেভাবে কোনো এসকিউএল ম্যানেজার না থাকলেও ওয়ার্ডপ্রেস পাসওয়ার্ড পরিবর্তন করে অ্যাডমিন প্যানেলে ঢোকা যাবে। নিচের কোডটি দেখুন:

3 এবং 6 নম্বর লাইনে লক্ষ করুন, এটা হলো আমাদের মূল কোড, এখানে আমাদের ওয়ার্ডপ্রেসের ডাটাবেজের তথ্যাদি যোগ করতে হবে। যেহেতু আপনার কাছে cPanel কিংবা কন্ট্রোল প্যানেলে ঢোকার অনুমতি আছে, তাই আপনি খুব সহজেই ওয়ার্ডপ্রেসের wp-config.php ফাইলটি খুলতে পারবেন। সেখানে এই লাইনগুলো দেখতে পাবেন:

3, 6, 9 এবং 12 নম্বর লাইনে আমাদের প্রয়োজনীয় তথ্য রয়েছে। এখানে DB_HOST-এর ভ্যালুতে localhost-ও লেখা থাকতে পারে। যা-ই লেখা থাকুক, এখান থেকে তথ্য নিয়ে আপনি আপনার কোডে যথাস্থানে বসালে কোডটা হবে এরকম:

3 এবং 6 নম্বর লাইনে আমরা তথ্যগুলো বসিয়েছি। এছাড়া এখানে আরেকটি বিষয় হচ্ছে, আমরা পাসওয়ার্ড বসাচ্ছি 9 নম্বর লাইনে, যেখানে আমি পাসওয়ার্ড দিয়েছি newpassword123here, আপনি আপনার মতো পাসওয়ার্ড দিয়ে নিতে পারেন। এই লাইনেরই শেষ অংশে দেখুন আমরা কোন username-এর জন্য পাসওয়ার্ড পরিবর্তন করতে যাচ্ছি, লিখেছি admin। কারণ ওয়ার্ডপ্রেস ইন্সটল করার সময়ই ব্যবহারকারীর ID = 1 আর ডিফল্ট ইউযারনেম admin দিয়ে একটি অ্যাকাউন্ট তৈরি করে দেয়। সেটা যদি পরিবর্তন না করা হয়ে থাকে, তাহলে আমরা এই কোড দিয়ে সফলভাবে পাসওয়ার্ড রিসেট করতে পারবো ইনশাল্লাহ।

ব্যস, কাজ শেষ। এবারে ফাইলটা সংরক্ষণ করা যাক একটা নাম দিয়ে, হতে পারে reset-wordpress-db-password.php। ফাইলটা এবারে ওয়ার্ডপ্রেস ইন্সটলেশনের root-এ (যেখানে wp-config.php ফাইলটা আছে, সেখানে) আপলোড করে দিন। তাই নাম নির্বাচনের সময় এমন নাম দেয়া যাবে না ফাইলটাতে, যা এখানকার কোনো ফাইলের সাথে সাংঘর্ষিক হয়। (ফাইলটা নামিয়েও নিতে পারেন)

download-source

এবারে http://example.com/reset-wordpress-db-password.php -এভাবে আপনার সাইটের URL দিয়ে ফাইলটা একবার ব্রাউয করুন। সব ঠিকঠাক হলে কিছুক্ষণের মধ্যেই ইনশাল্লাহ সুসংবাদ ভেসে উঠতে দেখবেন।

তাহলে এবারে http://example.com/wp-login.php-তে গিয়ে ইউযারনেম admin এবং পাসওয়ার্ড newpassword123here দিয়ে লগইন করুন।

আর এভাবে ওয়ার্ডপ্রেসের Export ফিচার ব্যবহার করে ক্লায়েন্টের সাইটের মোটামুটি একটা ব্যাকআপ নিতে সমর্থ হয়েছি আমি।

-মঈনুল ইসলাম

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

সিএসএস (CSS: Cascade StyleSheet) হলো ওয়েব ডিযাইনের একটি ভাষা, যা দিয়ে ওয়েবসাইটের HTML দিয়ে লেখা কাঠামোগুলোকে সাজানো হয়। ক্যাসক্যাড কথাটার মানে হলো ‘জলপ্রপাতের মতো নেমে আসা’, তবে ইলেকট্রনিক্সের পরিভাষায় এর অর্থটা এরকম: A series of components or networks, the output of each of which serves as the input for the next — বাংলা করলে দাঁড়ায়: ক্যাসক্যাড হলো এমন ধারাবাহিক কিছু, যার একটি দিয়ে অন্যটির সূত্রপাত হয়। সোজা বাংলায় সিএসএসের কোডগুলো ঝরণার মতোই ধাপে ধাপে সাজানো, যেখানে পরের কোডটা, আগের কোডের চেয়ে প্রাধান্য পায়।

রহিম { যাও: ওদিকে;}

রহিম { যাও: এদিকে;}

আগের কমান্ডে রহিমকে বললাম, তুমি ওদিকে যাও, পরের কমান্ডে বললাম এদিকে এসো – রহিম তবে কোনটা শুনবে? সিএসএস যেহেতু ক্যাসক্যাড আকারে লিখিত হলো, ধাপে ধাপে, এবং পরের ধাপটি প্রাধান্য পায়, তাই রহিম পরেরটা শুনবে, অর্থাৎ এদিকে আসবে।

সিএসএসের ধরণ: সিএসএস-এর আসলে কোনো প্রকারভেদ নেই, সব সিএসএস-ই একইরকম। কিন্তু কিভাবে সেটা ব্যবহার করা হচ্ছে, তার হিসাবে সিএসএস তিন রকম:

  1. ইনলাইন সিএসএস বা লাইনের মধ্যবর্তী সিএসএস (Inline CSS)
  2. ইন্টারনাল সিএসএস বা অভ্যন্তরীণ সিএসএস (Internal CSS)
  3. এক্সটার্নাল সিএসএস বা বহিঃস্থ সিএসএস (External CSS)

ইনলাইন সিএসএস লেখা হয় HTML এলিমেন্ট বা ট্যাগগুলোর ভিতরে ভিতরে। এক্ষেত্রে HTML এলিমেন্টের মধ্যে লিখতে হয় style আর সিএসএস কোডগুলো লিখতে হয় সমান চিহ্নের (=) পরে ডাবল কোটের (“”) ভিতরে। এভাবে লেখার কারণটা সিএসএসের মধ্যে নয়, বরং HTML-এর মধ্যে, কারণ HTML-এ কোনো প্রোপার্টি লেখার পদ্ধতি হলো এরকম, সমান চিহ্নের পরে ডাবল কোটের ভিতরে লিখতে হয়। উদাহরণ দেখা যাক:

 <p style=”color: red; align: center;” align=”center”>Paragraph</p> 

কিংবা,

 <div style=”font-size: 12px; color: #333;”>Section is called ‘div’ in HTML</div> 

কিংবা,

 <div style=”font-weight: bold; color: black;”> The color of the text is black, but <span style=”color: red;”>the text inside this span is red</span>.</div> 

লক্ষ করুন, প্রথম উদাহরণে style-এর ভিতরে যে align লেখা হয়েছে, এটা সিএসএস, কিন্তু বাইরে যে align লেখা হয়েছে, তা এইচটিএমএল। এখানে তৃতীয় উদাহরণে লক্ষ করুন, কিভাবে লাইনের ভিতরে ভিতরে সিএসএস করা হয়েছে – এজন্যই একে ইনলাইন সিএসএস বলা হয়।

ইন্টারনাল সিএসএস, HTML এলিমেন্টের ভিতর লেখা হয় না, তবে HTML ফাইলের ভিতরে লেখা হয় বলেই একে অভ্যন্তরীণ সিএসএস বলে। এধরণের সিএসএস লেখা হয় HTML-এর <style> ট্যাগের ভিতরে। এভাবে:

<style>
div{color: black;}
</style>

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

<div id=”my-div” style=”font-weight: bold; color: black;”>The color of the text is black, but <span id=”this-is-span” style=”color: red;”>the text inside this span is red</span>.</div></p>
 <style>
  #my-div{color: black;}
  #this-is-span{color: red;}
 </style>

সিএসএস-এ হ্যাশ চিহ্ন (#) দিয়ে HTML-এর id-কে বোঝানো হয়ে থাকে।

ইন্টারনাল সিএসএস, HTML কোড ব্লকের যেকোনো জায়গায়ই বসানো যায়। তবে এক্ষেত্রে উত্তম হলো পাতার সমস্ত সিএসএস <head> এবং </head>ট্যাগের ভিতর বসানো। এভাবে:

<head>
 <style>
  #my-div{color: black;}
  #this-is-span{color: red;}
 </style>
</head>

এক্সটার্নাল সিএসএস-এর নাম থেকেই বুঝা যাচ্ছে, এজাতীয় সিএসএস-কে মূল HTML ফাইল থেকেই বিচ্ছিন্ন করে ফেলা হয়। আগেই বলেছি, সিএসএস-এর কোনো রকমভেদ নেই, সব সিএসএসই একই জিনিস, কিন্তু ব্যবহার ভিন্ন বলেই নাম ভিন্ন হয়েছে। তাই সাধারণ সিএসএস কোডই একটা ফাইলে লিখে, তাকে ডট সিএসএস (.css) ফাইল হিসেবে সংরক্ষণ করলেই তাকে এক্সটার্নাল সিএসএস বলা হয়।

ধরা যাক, কোনো একটা ওয়েবসাইটের মূল ফাইলটা যদি হয় index.html, তাহলে সেই HTML এলিমেন্টগুলোর যাবতীয় স্টাইল সাজানো থাকলো style.css ফাইলে। কিন্তু ইনলাইন সিএসএস কিংবা ইন্টারনাল সিএসএস করলে তো সিএসএস কোডগুলো থাকে HTML ফাইলের ভিতরেই, অথচ এক্ষেত্রে আমরা সিএসএস-এর আলাদা একটা ফাইল করেছি। এখন এই দুটোর মধ্যে সংযোগ স্থাপন করবো কিভাবে?

খুবই সহজ। এজন্য HTML-এর <head> এবং </head> ট্যাগের ভিতরে গিয়ে লিখতে হবে:

<link type=”text/css” rel=”stylesheet” href=”style.css”/>

আমরা এখানে HTML-এর <link> ট্যাগটি দিয়ে আমাদের style.css ফাইলটিকে লিংক করছি, যেখানে আমরা বলে দিচ্ছি যে, এই যে ফাইলটা লিংক করছি, তার ধরণ হলো, তাতে সিএসএস কোড text আকারে লেখা রয়েছে, এবং HTML ফাইলটার সাথে ঐ ফাইলটার সম্পর্ক (relation) হলো, ঐ ফাইলটা এই ফাইলের স্টাইলশীট – যা এই ফাইলে ডিযাইন বা স্টাইল যোগ করবে। স্টাইল ফাইলের নাম যে style-ই হতে হবে এমন কোনো কথা নেই হতে পারে styles.css, styleheet.css কিংবা abul.css, kamala.css ইত্যাদি যেকোনো কিছু। তবে style, styles, stylesheet ইত্যাদি বোধগম্য এবং সুন্দর নাম ব্যবহার করতে উৎসাহ দেয়া হয়।

সিএসএস-এর প্রাধান্য: সিএসএস-এ ব্যবহারের ভিত্তিতে করা এই তিন ধরণের মধ্যে একটা খুব মজার বিষয় লুক্কায়িত আছে, আর তা হলো প্রাধান্য বা গুরুত্ব। আচ্ছা, যদি প্রশ্ন করি: পাশের ঘরে আগুন লেগেছে, তার তাপ বেশি অনুভূত হবে, নাকি আপনার হাতে আগুন লেগেছে, তার তাপ? অবশ্যই আপনার হাতের আগুনের তাপ বেশি অনুভূত হবে, তার কারণ হলো নৈকট্য বা প্রক্সিমিটি। সুতরাং খুব সহজেই বোঝা যাচ্ছে যে, এক্সটার্নাল সিএসএস-এর চেয়ে গুরুত্ব বেশি পাবে ইন্টারনাল সিএসএস, আবার ইন্টারনাল সিএসএস-এর চেয়েও বেশি গুরুত্ব পাবে ইনলাইন সিএসএস – কারণ? কারণ ইনলাইন সিএসএস, HTML এলিমেন্টের সবচেয়ে কাছাকাছি থাকে, সেই তুলনায় ইন্টারনাল একটু দূরে, আর এক্সটার্নাল সিএসএস-এর সাথে শুধু পারিবারিক সম্পর্ক (<link rel=”stylesheet”>) আছে, কিন্তু সে থাকে বহুদূরে।
আমরা আগেই বলেছি, উপরের লাইনের সিএসএস-এর চেয়ে [ক্যাসক্যাডিং-এর কারণে] প্রাধান্য পায় তার নিচের লাইনের সিএসএস কোড। এরপর এক্সটার্নাল সিএসএস-এ যে নির্দেশনা দেয়া আছে, ইন্টারনালের নির্দেশনা তারচেয়েও বেশি প্রাধান্য পায়; আবার ইন্টারনালের চেয়ে বেশি প্রাধান্য পায় লাইনের ভিতরে ভিতরে দেয়া সিএসএস।

তবে এই সব সিএসএস-কেই অপ্রধান করেও কোনো সিএসএস প্রোপার্টিকে প্রাধান্য দিতে চাইলে? – সেটা নাহয় আরেকদিন জানবো।

-মঈনুল ইসলাম
গ্রাফিক্স ডিযাইনার অ্যান্ড ওয়েব ডেভলপার
wz.islam@gmail.com

সংস্করণ: ওয়ার্ডপ্রেস ৩.২.১, ৩.৩, ৩.৩.১+

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

ওয়েব ডিযাইনিং-এ CMS (Content Management System)-এর মধ্যে সবচেয়ে জনপ্রিয় হলো জুমলা। কিন্তু প্রাথমিক জ্ঞান দিয়ে যারা ওয়েব ডিযাইন করতে চান, তাদের কাছে সবচেয়ে বেশি পছন্দের ওয়ার্ডপ্রেস। যারা ইন্টারনেটে WordPress.com-এ একটা ব্লগ সাইট খুলেছেন, তারা খুব আশ্চর্য হয়ে ভাবছেন, ওয়ার্ডপ্রেস তো ব্লগ! এটা ওয়েবসাইট হবে কিভাবে? হ্যা, ব্লগের ধারণাকে একটু বদলে নিয়ে ওয়ার্ডপ্রেস দিয়ে জনপ্রিয় সব ওয়েবসাইট বানানো যায়। আর তার প্রকৃষ্ট উদাহরণ আপনারা দেখতে পাবেন WordPress.org ওয়েবসাইটে (.com নয়)।

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

অন্যান্য টিউটোরিয়াল

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

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

চলচ্চিত্রে দেখা যাবে বাংলা সাবটাইটেল, তৈরি করবো নিজেই :)

চলচ্চিত্রে দেখা যাবে বাংলা সাবটাইটেল, তৈরি করবো নিজেই 🙂

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

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

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

দেখা যাক একটা সাবটাইটেল ফাইল কিভাবে কাজ করেContinue reading

CSS-tooltip-how-it-works
জ্ঞানস্তর: মাধ্যমিক

কোনো একটা লম্বা নামকে সংক্ষিপ্ত করে লেখার দরকার হলো, এজন্য প্রত্যেকটা শব্দের প্রথম অক্ষরগুলো, মানে আদ্যক্ষর নিয়ে, আপনি সেই নামটা তৈরি করলেন, ইংরেজিতে যাকে বলে acronym। যেমন: Bangladesh Agricultural and Rural Development-কে সংক্ষেপে ডাকা হয় BARD বলে; এখানে BARD হলো পুরো নামটার সংক্ষিপ্তরূপ। ধরা যাক, একটা লেখা লিখছেন, যেখানে বারবার আপনি BARD-ই বলে যাচ্ছেন। কিন্তু একজন পাঠক BARD-এর মানে তো নাও জানতে পারেন। তাই এসব ক্ষেত্রে HTML-এর সহজ একটা কৌশল কাজে লাগানো হয়: <acronym> কোডটি।

কোডটার ব্যবহার:

<acronym title=“Bangladesh Agricultural and Rural Development”>BARD</acronym>

এই কোডটা ব্যবহার করলে যখনই আপনি BARD লেখাটার উপরে মাউস আনবেন, একটু অপেক্ষা করলেই সেখানে একটা হলদে বাক্সে দেখাবে BARD-এর মানে, যা আপনি acronym-এর title-এ দিয়েছেন। 

কিন্তু যারা HTML-এর acronym ব্যবহার করে একটু ক্লান্ত, তাদের জন্য রয়েছে সিএসএস (CSS)-এর অপূর্ব একটা কৌশল, যার নাম “tool-tip”। আসুন দেখা যাক কিভাবে ব্যবহার করা যায় এটা:Continue reading

ফটোশপ basiX (প্রাথমিক জ্ঞান)

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

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

ফটোশপ ৭-এর ওয়ার্কপ্লেস পরিচিতি

স্ক্রিনশট ০১.১: ফটোশপ ৭-এর ওয়ার্কপ্লেস পরিচিতি (ছবিটা ক্লিক করে মূল রেযোল্যুশনে খুলুন)

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

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

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

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

সার্ভার-সাইড স্ক্রিপ্টিং ল্যাংগুয়েজ যেমন: পিএইচপি (PHP), এএসপিডটনেট (ASP.net) ইত্যাদি দিয়ে ওয়েবসাইট তৈরি করতে গেলে প্রথমেই আপনার দরকার একটা সার্ভার। কিন্তু আপনার বাসায় ইন্টারনেট সংযোগই নেই, কিংবা আপনার নিজস্ব ডোমেইন কেনা নেই, সেক্ষেত্রে আপনি সার্ভার কোথায় পাবেন? সমাধানটা খুব সহজ: যারা পিএইচপি কোড করেন, তারা সবাই পিএইচপিতে কাজ করার জন্য নিজের কম্পিউটারের মধ্যেই একটা বানোয়াট সার্ভার বানিয়ে নেন। পিএইচপি কোড মনে করে সে সার্ভার পেয়েছে, আসলে ওটা মোটেই কোনো ইন্টারনেট সার্ভার না, ওটা কম্পিউটারের মধ্যেই একটা সার্ভারের আবহ, যা অনেকটাই ইন্টারনেট সার্ভারের মতো কাজ করে। একে বলা হয় Local Server, যা মূলত Localhost-এর অধীন হয়।

এই লোকাল সার্ভার বলতে মূলত বোঝায় অ্যাপাচি সার্ভারকে (Apache)। এছাড়াও আরো বিভিন্ন রকম সার্ভার আছে, আমরা সে আলোচনায় যাবো না। অ্যাপাচি সার্ভার ছাড়াও ডাটাবেজের জন্য বহুল পরিচিত প্রোগ্রাম হচ্ছে মাইএসকিউএল (MySQL), আর আপনার লাগবে ডাটাবেজ সংগঠন-সমন্বয়ের জন্য পিএইচপিমাইএ্যাডমিন (phpMyAdmin)। এই শব্দগুলোর আদ্যক্ষর একত্র করলে আপনি পাবেন AMP। আর এগুলো একত্রে সার্ভারে ব্যবহারের জন্য পাওয়া যায় XamppServer সফ্‌টওয়্যারটি। উইন্ডোজের (W) জন্য রয়েছে WAMP, লিনাক্সের (L) জন্য রয়েছে LAMP, ম্যাকের (M) জন্য রয়েছে MAMP। Xampp সব প্লাটফর্মে কাজ করে বলে এটা অনির্ধারিত (X) প্লাটফর্ম। ইন্টারনেট থেকে ফ্রি বা বিনামূল্যে ডাউনলোড করে নিতে পারেন এর যেকোনোটি (পরিশিষ্ট দ্রষ্টব্য)। Wamp কিংবা Xampp ইন্সটল করার সময় কোনো কিছু পরিবর্তন করার দরকার নেই, যা যেভাবে আছে, তার সাথে রাজি হয়ে আপনি তা ইন্সটল করুন। আমরা উইন্ডোজ পিসিতে WAMP ব্যবহার করতে স্বচ্ছন্দবোধ করি। উদাহরণটা তাই WAMP দিয়ে দিচ্ছি, যদিও সবগুলোরই কার্যপ্রক্রিয়া প্রায় এক। আমরা WampServer2.1e ব্যবহার করছি।

WAMP-এর পূর্বনির্ধারিত সেটিংস অনুযায়ী যদি আপনি ইন্সটল করেন, তাহলে তা আপনার কম্পিউটারের প্রাথমিক ড্রাইভে (অধিকাংশ ক্ষেত্রে C:\\) একটা জায়গা করে নিবে। যার ঠিকানাটা মোটামুটি এরকম:Continue reading

 ন্যানোডিযাইন্‌স-এর সকল পাঠক ও শুভাকাঙ্ক্ষির প্রতি শুভেচ্ছা

শুভ নববর্ষ ১৪১৯ বঙ্গাব্দ!

জ্ঞান-স্তর: প্রাথমিক

ভার্ষন: ফটোশপ (যেকোনো ভার্ষন)

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

জেনে রাখতে হবে, আমরা ফটোশপে কোনো ছবি, লেখা, আঁকিবুকি ইত্যাদি যাবতীয় কিছুকে পিক্সেল (pixels, পিক্‌যেল) দিয়ে হিসাব করিপিক্সেল জিনিসটা হলো ধরা যাক একটা ছোট্ট আকৃতির বর্গক্ষেত্রআমরা হয় dot জিনিসটা বুঝি, একটা ফোঁটাতবে আমাদের কাছে মনে হয়, ডট জিনিসটা গোলাকৃতি কিছুকিন্তু পিক্সেল জিনিসটা গোলাকৃতি না, এটা বর্গাকৃতিরচিত্র ৩.০১-এ লক্ষ করবেন, বাম দিকে একটা ছোট্ট গোলাকৃতি বৃত্ত আছেওটাকে যখন বড় করে দেখছি আমরা ফটোশপে, তখন ওটা হয়ে যাচ্ছে অনেকগুলো বিভিন্ন [কাছাকাছি] রঙের বর্গক্ষেত্রের একটা সমন্বয়

চিত্র ৩.০১: পিক্সেল ধারণা

চিত্র ৩.০১: পিক্সেল ধারণা

এভাবে কম্পিউটারের মনিটরে যেকোনো ছবি, ভিডিও, লাইন —যা কিছু আমরা দেখি, তা আসলে হাজারে হাজারে পিক্সেলের সমন্বয়ে তৈরিএবারে আপনার মনিটরের দিকে তাকান,Continue reading

ওয়েব ডিযাইনারদের সুবিধার জন্য এবার থাকছে একটি ফটোশপ ফাইল (*.psd) ডাউনলোডের ব্যবস্থা। আপনার ওয়েবসাইটের নিচে, ফুটারে, ধরা যাক আপনি কিছু মেনু বাটন রাখতে চাচ্ছেন, আর সাথে থাকবে ফেসবুক আর টুইটার ফ্যানপেজের লিংক। সেক্ষেত্রে এরকম একটি ফুটার মেনু আপনি বসাতে পারবেন ওয়েবসাইটের ফুটারে। আপনাদের কাজের সুবিধার্থে এই ডিযাইনের পুরো ফটোশপ ফাইলটা ডাউনলোড করার জন্য দেয়া হলো:

download web footer menu from nanodesigns for FREE

তো, আর দেরি করার কোনোই কারণ দেখি না। এখুনি লেগে যান ডিযাইনটাকে কাজে লাগানোয়। এই পোস্টে বিশেষ কৃতজ্ঞতা স্বীকার করছি আমার সিএসএস (CSS) শিক্ষক অমিত চৌধুরীর।
-মঈনুল ইসলাম
wz.islam@gmail.com