অনেক তথ্য একসাথে, ডাটাবেযে ঢুকানো বা আপলোড করার (bulk upload) কাজটি অনেক ব্লগে, টিউটোরিয়ালেই আলোচনা করা হয়েছে। আমরা আসলে সেগুলো পড়েই কাজটা খুব সহজে করে ফেলতে পারি। কিন্তু সমস্যাটা সৃষ্টি হবে, যদি আপনি বাংলায় লেখা তথ্যগুলো ডাটাবেযে ঢুকাতে যান… তাছাড়া পুরো প্রক্রিয়াটা কিভাবে কী হচ্ছে, তাও জানা থাকা দরকার। শেঁকড়টা পোক্ত থাকলে ডালপালায় দৌঁড়ানো খুব সহজ। আমরা তাই পুরো প্রক্রিয়াটি এখানে বিস্তারিত আলোচনা করছি:Continue reading

গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান - ন্যানোডিযাইন্‌স

« আগের পর্ব

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

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

গিট - ফোল্ডার স্ট্রাকচার

গিট – ফোল্ডার স্ট্রাকচার

ধাপে ধাপে গিট

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

গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান - ন্যানোডিযাইন্‌স

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

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

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

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

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

সিএসএস (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

ফটোশপ 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