Asia Bangladesh Dhaka: January 2013

Wednesday, January 23, 2013

ফায়ারফক্সের গতি বাড়ান খুব সহজেই!

বাংলাদেশের স্লো ইন্টারনেটের কারনে আমরা অনেক সমস্যার সম্মুখীন হয়ে থাকি। এজন্য আমরা অনেকেই Opera ব্রাউজারের Turbo ব্যবহার করে থাকি। তবে অনেকেই হয়তো খেয়াল করেননা যে, Opera ব্রাউজারের Turbo ব্যবহারের ফলে যারা ১ গিগাবাইট বা ৩ গিগাবাইট এর মত লিমিটেড ইন্টারনেট ব্যবহার করে, তারা অনেক সমস্যার সম্মুখীন হয়। কারন Turbo ব্যবহারের ফলে ইন্টারনেট খুব দ্রুত শেষ হয়ে যায়।
কিন্তু আমরা চাইলে কোন ঝামেলা ও অ্যাডিশনাল সফটওয়্যার ছাড়া খুব সহজেই এই সমস্যার সমাধান করতে পারি। এজন্য প্রয়োজন শুধুমাত্র Mozilla Firefox ইন্টারনেট ব্রাউজার এবং মাইক্রোসফট উইন্ডোজের যে কোন অপারেটিং সিস্টেম। তবে ফায়ারফক্সের সর্বশেষ ভার্সনগুলো থাকলে ভাল হয়।

খুব সহজেই ইন্টারনেটের গতি বাড়ানোর পদক্ষেপ সমূহঃ-

১. প্রথমে Mozilla Firefox ব্রাউজারটি Open করুন।
২. এবার Address Bar -এ যেয়ে about:config লিখে Enter করুন।
৩. এরপর একটি Warning Messsage দেখাবে। সেখানে I’ll be careful -এ দিয়ে Enter করুন।
৪. এরপর about:config -এর Page টি আসবে। সেখানে Filter এ Pipelining লিখে Search দিন অথবা Pipelining এর অপশনগুলো খুজে নিন।
৫. এবার সেখান থেকে network.http.pipelining -এর Value পরিবর্তন করে false থেকে true করে দিন
এবং network.http.pipelining.maxrequests -এর Value পরিবর্তন করে 4 থেকে 10 করে দিন।
৬. লক্ষ্য রাখতে হবে যে network.http.pipelining.maxrequests -এর Value কখনোই 10 এর
বেশি দেয়া যাবেনা। সেক্ষেত্রে ফায়ারফক্স ফ্রিজ হবার সম্ভাবনা থাকে।

৭. এবার ফায়ারফক্স এর File এ যেয়ে Exit দিন।
৮. তারপর আপনার ইন্টারনেট কানেকশন ম্যানেজার -এ যান।
৯. সেখান থেকে আপনার default connection অর্থাত আপনি যে connection টি ব্যবহার করেন, তার Properties এ যান।
১০. সেখানে প্রথমেই থাকা General ট্যাব এর Configure -এ ক্লিক করুন।
১১. এবার Maximum speed (bps) পরিবর্তন করে সর্বোচ্চ মান অর্থাত 921600 -এ দিয়ে OK দিয়ে
বেড়িয়ে আসুন।
১২. তারপর আপনার কম্পিউটারটি Restart করুন।
এবার আপনি নিজেই Mozilla Firefox এর সাহায্যে ইন্টারনেটে ব্রাউজ করে দেখুন গতি কতটা বেড়েছে!

Tuesday, January 22, 2013

সিএসএস সিম্ফোনীঃ পর্ব ৬

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

গতপর্বে আমরা আলোচনা করেছিলাম, ক্লাস নিয়ে। আজ আমরা আলোচনা করব এক্সটারনাল,ইন্টারনাল এবং ইনলাইন স্টাইলশীট নিয়ে, কিভাবে এদের ডিক্লেয়ার করতে হয় ইত্যাদি নিয়ে।
এক্সটারনাল স্টাইল শীট মূলত html ডকুমেন্টের বাইরে ডিক্লেয়ার করা হয় যে কোনো টেক্সট এডিটরে(যেমন, নোটপ্যাড)। এই শীট .css এক্সটেনশান দিয়ে সেভ করতে হয়। এই ফাইলে সাধারণত কোনো html ইলিমেণ্ট থাকে না।
নিচে একটি এক্সটারনাল স্টাইলশীটের উদাহরন দেয়া হল।
h1{align:center; color:blue}
p{color:red}
#pr{align:right;color:pink}
এ কোডটুকু একটি টেক্সট এডিটরে লিখে sample.css নামে সেভ করা হলে sample নামে একটি এক্সটারনাল স্টাইলশীট তৈরি হয়ে যাবে।
এখন একটি html ডকুমেন্ট খুলে তাতে <head> ট্যাগের মধ্যে নিচের মত sample স্টাইলশীটটিকে লিঙ্ক করে দেয়া যায়।
<head>
<link rel=”stylesheet” type=”text/css” href=”sample.css” />
</head>
আমি নিচের html ডকুমেন্টকে এভাবেই sample.css স্টাইলশীটের সাথে লিঙ্ক করলাম
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”sample.css” />
</head>
<body>
<h1 class=”cn”> HELLO EVERYBODY </h1>
<p> this is a center align paragraph</p>
<p> this is normal</p>
<p id=”pr”> this is another thing </p>
</body>
<html>
ফলে নিচের মত রেজাল্ট পাওয়া গেল

লক্ষ্য করুন, শেষের লাইনটা সবুজ হয়েছে। কেন? কারণ, sample নামের এক্সটারনাল স্টাইলশীটে আমি #pr{align:right;color:pink} লেখার মাধ্যমে pr id বিশিষ্ট সকল html ইলিমেন্টেকে সবুজ রঙে দেখানোর ইন্সট্রাকশন দিয়েছি। এর ফলে শেষের লাইনটা সবুজ, কারণ এর <p> ট্যাগের id হল pr.
ইন্টারনাল এবং ইনলাইন স্টাইলশীট সম্পর্কেতো আগের পর্বেই জেনেছেন।
এখন একএকটি পেইজে যদি ইন্টারনাল স্টাইল, ইনলাইন স্টাইল এবং এক্সটারনাল স্টাইল শীট একই সাথে ডিফাইন করা থাকে, তাহলে কি হবে ? নিচের কোডটি দেখলেই বুঝতে পারবেন।
১)       <html>
২)       <head>
৩)      <link rel=”stylesheet” type=”text/css” href=”sample.css” />
৪)      <style type=”text/css”>
৫)      p{color:yellow}
৬)      </style>
৭)       </head>
৮)       <body>
৯)       <h1> HELLO EVERYBODY </h1>
১০)        <p>this is the new day<p>
১১)        <p id=”pr”> this is a center align paragraph</p>
১২)         <p id=”pr”> this is normal</p>
১৩)          <p id=”pr” style=”color:grey”> this is another thing </p>
১৪)          </body>
১৫)          <html>
এই কোডে এক্সটারনাল sample.css শীটকে লিঙ্ক করে দেয়া হয়েছে ৩নং লাইনে।
৪,৫,৬ নং লাইনে ইন্টারনাল স্টাইল ডিক্লেয়ার করা হয়েছে। ৫নং লাইনে p{color:yellow} এর মাধ্যমে সকল প্যারাগ্রাফকে হলুদ রঙ বিশিষ্ট করতে বলা হয়েছে।
১৩ নং লাইনে pr id বিশিষ্ট <p> ট্যাগের লেখাকে ধূসর রঙের লেখা প্রদর্শন করতে বলা হয়েছে।
Sample.css এক্সটারনাল শীটের কোড
h1{align:center; color:blue}
p{color:red}
#pr{align:right;color:green}
নিচের মত রেজাল্ট পাবেন।

এখানে দেখা যাচ্ছে এক্সটারনাল শীটে p{color:red} এর মাধ্যমে প্যারাগ্রাফের লাইনকে লাল রঙ এ দেখাতে বলা হলেও এইচটিএমএল ডকুমেন্টের <head> ট্যাগে ডিক্লেয়ার করা ইন্টারনাল স্টাইলে p{color:yellow} লেখার ফলে প্রথম প্যারাটি হলুদ দেখাচ্ছে।
২য় ও ৩য় প্যারার “pr” id বিশিষ্ট প্যারার জন্য ইন্টারনাল স্টাইল শীটে কোনো নির্দেশনা নেই,নির্দেশনা আছে এক্সটারনাল sample.css শীটের #pr{align:right;color:green} লাইনে,যেখানে এদের কালার সবুজ করতে বলা হয়েছে। তাই এদের রঙ সবুজ। যদি এক্সটারনাল শীটে এদের জন্য কোনো নির্দেশনা না থাকত,তবে এরা ইন্টারনাল শীটের {color:yellow} অনুসারে হলুদ রঙ প্রদর্শন করত।
১৩ নং লাইনে <p id=”pr” style=”color:grey”> অংশের মাধ্যমে <p> ট্যাগের মধ্যেই ধূসর রঙ নির্ধারন করা হয়েছে,তাই pr id বিশিষ্ট হওয়া সত্বেও এর sample.css এক্সটারনাল শীটের নির্দেশনা অনুসরন না করে প্রথমে লাইনের ভেতরের এই স্টাইল অনুসরন করল।
উপরের এই উদাহরন থেকে আমরা বলতে পারি, প্রায়োরিটি অনুসারে উপর থেকে নিচের দিকে সাজালে আমরা পাই,
১) ইনলাইন স্টাইল
২) ইন্টারনাল স্টাইল
৩) এক্সটারনাল স্টাইল
৪) ব্রাউজার ডিফল্ট
অর্থাৎ, যদি লাইনেই স্টাইল ডিফাইন করা থাকে তবে তার কাজ আগে হবে, এরপর যথাক্রমে ইন্টারনাল স্টাইল,এক্সটারনাল স্টাইল এবং সব শেষে ব্রাউজার ডিফল্ট স্টাইল প্রাধান্য পাবে যদি কোনো স্টাইলই ডিফাইন করা না থাকে।
আজ এ পর্যন্তই,কেমন লাগলো জানাবেন। ধন্যবাদ।

সিএসএস সিম্ফোনীঃ পর্ব ৫

সি এস এস সিম্ফোনীর ৫ম পর্বে আপনাদের সবাইকে স্বাগতম। গতপর্বে আমরা জেনেছিলাম,কিভাবে id এর মাধ্যমে কোনো নির্দিষ্ট এইচটিএমএল ইলিমেন্টে সিএসএস স্টাইল প্রয়োগ করা যায় সে সম্পর্কে। আজ আমরা আরেকটি বিষয় সম্পর্কে জানব, আর তা হল class.
আসলে এটি অনেকটা id এর মতই কাজ করে, তবে পার্থক্য হল লেখার পদ্ধতিতে। নিচের কোড দেখলেই তা বুঝতে পারবেন।
১)               <html>
২)             <head>
৩)             <style type=”text/css”>
৪)            .cn {text-align:center;color:blue;}
৫)             </style>
৬)             </head>
৭)             <body>
৮)             <h1 class=”cn”> HELLO EVERYBODY </h1>
৯)            <p class=”cn”> this is a center align paragraph</p>
১০)            <p> this is normal</p>
১১)             <p> this is another thing </p>
১২)              </body>
১৩)                 </html>

৩ নং লাইনে সাধারণভাবেই সিএসএস ডিক্লেয়ার করা হয়েছে।
৪ নং লাইনে সিলেক্টর হিসেবে নির্ধারন করা হয়েছে “.cn”। এখানে cn কে <h1> এবং একটি <p> ট্যাগের class এট্রিবিউটের মান হিসেবে নির্ধারন করা হয়েছে। বাকি দুটি <p> ট্যাগ অপরিবর্তিত অবস্থায় আছে। cn class বিশিষ্ট সকল html ট্যাগের মান পরিবর্তন করার জন্যই <head> ট্যাগের মধ্যে সিএসএস অংশে .cn {text-align:center;color:blue;} লিখে তা ডিক্লেয়ার করা হয়েছে। উল্লেখ্য যেকোনো class এট্রিবিউটের মান সিএসএস এর মাধ্যমে পরিবর্তন করার জন্য সিলেক্টরের জায়গায় class এর নাম লিখে তার আগে “.” দিতে হয়। <h1> এবং প্রথম <p> ট্যাগের class এর নাম cn । এই ট্যাগকে সিএসএস এর মাধ্যমে পরিবর্তন করার জন্য তাই সিএসএস অংশে এদের class অর্থাৎ cn লিখে তার আগে “.” দেয়া হয়েছে এবং এর পরে প্রপার্টি ঠিক করে দেয়া হয়েছে।
সবশেষে নিচের মত পাবেন

বন্ধুরা, আজ এ পর্যন্তই। পরবর্তী পর্বে এক্সটারনাল স্টাইল শীট ডিক্লেয়ার করে তা কি ভাবে ব্যবহার করতে হয় তা নিয়ে আলোচনা করা হবে। সবাইকে ধন্যবাদ।

সিএসএস সিম্ফোনীঃ পর্ব ৪

সিএসএস সিম্ফোনীর ৪র্থ পর্বে সবাইকে স্বাগতম। গত পর্বে আমরা জেনেছিলাম, CSS এর ডিক্লেয়ার করার পদ্ধতি সম্পর্কে, এবং CSS নিয়ে আলোচনা এবং ধারণাকে আরো ঝালাই বা পরিষ্কার করে নিয়েছি। আজ আমরা আরেকটি নতুন বিষয় নিয়ে জানব। কি সেই বিষয়? নাহ, এখন বলব না, তার আগে গত পর্বের কোডের মত আরেকটি কোড একবার দেখে নিই।
<html>
<head>
</head>
<body>
<p> Hi friends, how are you all ? </p><br>
<p> Once upon a time there lived a king called miron </p><br>
<p> Do you know how to swim ? </p><br>
<p> When do you have your meal ? </p>
</body>
</html>
এখানে চারটি লাইনকে <p> ট্যাগের মাধ্যমে প্যারাগ্রাফের আকারে লেখা হয়েছে। <p> হল HTML ট্যাগ যা যেকোনো লেখাকে প্যারাগ্রাফ হিসেবে ডিফাইন করে। এখন এই লাইন তথা প্যারা চারটিকে যদি আপনি লাল রঙের করতে চান এবং ফন্ট সাইজও চেঞ্জ করতে চান তাহলে কি করা যায় বলতে পারেন ?
নিচে দেখুন।
<head>
<style type=”text/css”>
p {color:blue;text-align:center;font:12}
</style>

</head>
<head> ট্যাগের মধ্যে সি এস এস এর এই অংশটুকু লিখলেই হয়ে যাবে। এর ফলে নিচের মত রেজাল্ট পাবেন।

এর কারণ হল, সি এস এস এর কোডে আপনি ডিক্লেয়ার করে দিয়েছেন, সকল <p> ট্যাগবিশিষ্ট লেখাকে যেনো নীল রঙের ১২ ফন্টের মাঝ সারিবিশিষ্ট লেখা হিসেবে মডিফাই করা হয়।
কিন্তু এমন যদি হয় যে, আপনি এই লেখাটুকুর মধ্যে শুধুমাত্র প্রথম ও শেষ লাইনটাকেই নীল রঙের এবং মাঝ সারি বিশিষ্ট লেখা হিসেবে সেট করতে চান,অন্য লাইনগুলো যেন সাধারণভাবেই থাকে সেক্ষেত্রে কি করবেন ? নিচে দেখুন।
<html>
<head>
<style type=”text/css”>
#sam {color:blue;text-align:center;font:12}
</style>

</head>
<body>
<p id=”sam”> Hi friends, how are you all ? </p><br>
<p> Once upon a time there lived a king called miron </p><br>
<p> Do you know how to swim ? </p><br>
<p id=”sam”> When do you have your meal ? </p>

</body>
</html>

উপরের কোডে দেখতে পাচ্ছেন, <body> ট্যাগের মধ্যে যে সকল লেখা রয়েছে তার মধ্যে প্রথম ও চতুর্থ লাইনে <p> ট্যাগের id এট্রিবিউটের মান “sam ” নির্ধারণ করা হয়েছে। এট্রিবিউট হল ট্যাগের নিজস্ব কিছু বৈশিষ্ট্য। প্রতিটি মানুষের যেমন নাম,বয়স, উচ্চতা ইত্যাদি বৈশিষ্ট্য আছে প্রতিটি ট্যাগেরও তেমনি কিছু বৈশিষ্ট্য আছে। এসকল বৈশিষ্ট্যকে এট্রিবিউট বলা হয়। এমনই একটি এট্রিবিউট হল “id” যার মাধ্যমে ঐ ট্যাগের নিজস্ব নাম বা পরিচয় নির্ধারণ করা হয় যে নামের মাধ্যমে ব্রাউজার ঐ ট্যাগকে চিনতে পারে। প্রথম ও চতুর্থ <p> ট্যাগে “id” এট্রিবিউটের মান “sam” নির্ধারণ করার মাধ্যমে এই দুটি ট্যাগের নাম দেয়া হয়েছে “sam” ।
এবার নিচের কোডটি দেখি।
<style type=”text/css”>
#sam {color:blue;text-align:center;font:12}
</style>
এখানে স্টাইল অর্থাৎ #sam {color:blue;text-align:center;font:12} অংশে #sam এর মাধ্যমে জানানো হয়েছে সি এস এস কোডের মাধ্যমে “sam” idবিশিষ্ট সকল ট্যাগের পরিবর্তন ঘটানো হবে। আর
{ color:blue;text-align:center;font:12} এই অংশের মাধ্যমে এই পরিবর্তন ঘটানো হয়েছে, এর ফলে সকল “sam” নামবিশিষ্ট ট্যাগের মধ্যবর্তী লেখাগুলো রঙ নীল,ফন্ট ১২ এবং সারি মাঝসারি বিশিষ্ট হয়েছে।
<body> অংশে প্রথম ও চতুর্থ <p> ট্যাগ ছাড়া বাকি দুটি <P> ট্যাগের নাম “sam” নির্ধারণ করা হয়নি। তাই এদের মধ্যবর্তী লেখাকে ব্রাউজারে সাধারণভাবেই দেখাবে ঠিক নিচের মত।

বন্ধুরা,আজ এ পর্যন্তই। ভালো থাকবেন সবাই। ধন্যবাদ।

সিএসএস সিম্ফোনীঃ পর্ব ৩

বন্ধুরা, গত পর্বে আমরা দেখেছিলাম একটি সাধারণ কোড যা দিয়ে আমরা সি এস এস এর সাথে মোটামুটি পরিচিত হওয়ার চেষ্টা করেছি। আজ আমরা আমদের জানাটাকে আরেকটু ঝালাই করে নেব এ বিষয়ে আরো কিছুটা আলোচনার মাধ্যমে। আপনাদের কি মনে আছে গতকাল লেখা কোডটির কথা যা আমি পোষ্টের শেষে উল্লেখ করেছিলাম। মনে না থাকলে সমস্যা নেই, আপনাদের সুবিধার্থে আবারও উল্লেখ করে দিচ্ছি।
<html>
<head>
<style type=”text/css”>
h1 {color:blue;text-align:center}
</style>
</head>
<body>
<h1>   WELCOME   </h1>
<br>
<h1>   HOW ARE YOU ? </h1>
<br>
<h1> WELL DONE   </h1>

</body>
</html>

এই কোডের আউটপুট কেমন হবে জানেন ? নিচের মত।

এমনটি হওয়ার কারণ, <h1>   WELCOME   </h1>
এর মাধ্যমে আমি WELCOME লেখাটিকে শিরোনাম আকারে দেখাচ্ছি। এরপরে <br> ট্যাগ ব্যবহার করেছি যার অর্থ নতুন লাইন শুরু করা।
এরপর <h1>   HOW ARE YOU ? </h1> এবং <h1> WELL DONE   </h1> এই দুইটি অংশের মাধ্যমে যথাক্রমে HOW ARE YOU এবং WELL DONE লেখা দুইটিকে শিরোনাম আকারে নির্ধারণ করেছি।
এখন হয়ত ভাবছেন, আমিতো শুধু শিরোনাম আকারে লেখা নির্ধারণ করলাম,কিন্তু এই লেখাগুলোকে তো পেইজের মাঝখানে বসাইনি বা নীল রঙও দিইনি,তাহলে এগুলো কি করে হল ? ঐ যে,<head> ট্যাগের মাঝে কয়েকটা সি এস এস এর লাইন লিখেছিলাম, মনে আছে ?
h1 {color:blue;text-align:center}
এই অংশের মাধ্যমেই ডিফাইন করে দেয়া হয়েছে যে, সকল <h1> ট্যাগ বিশিষ্ট লেখার রঙ হবে নীল (color:blue এই অংশের মাধ্যমে রঙ নির্ধারিত হয়েছে) এবং লেখাগুলোর অবস্থান হবে পেইজের মাঝখানে (text-align:center অংশের মাধ্যমে নির্ধারিত হয়েছে)।
মূলত এভাবেই সি এস এস কাজ করে।
কি হাঁপিয়ে উঠেছেন ? তাহলে একটু বিশ্রাম করে নিন। এরপর পরবর্তী ধাপে যাব।
চলুন এবার তাহলে শুরু করা যাক।
আমি এখন কথা বলব <head> ট্যাগের মধ্যে অবস্থিত সি এস এস লাইন গুলো নিয়ে।
সি এস এস স্ক্রিপ্ট বা সিএসএস এর লেখা শুরু করতে হয় একে ডিক্লেয়ার করে। <head> ট্যাগের পরে <style type=”text/css”> লিখে তা ডিক্লেয়ার করা হয়েছে, একথা আমি আগের পর্বেই বলেছি। সিএসএস স্ক্রিপ্ট শেষ করতে হয় </style> ট্যাগের মাধ্যমে যা <head> ট্যাগ শেষ হওয়ার আগে শেষ হয়েছে।
সিএসএস স্ক্রিপ্টের মাঝে লেখা h1 {color:blue;text-align:center} অংশটিই মূলত সিএসএস কন্টেন্ট। লক্ষ্য করলে দেখতে পাবেন সিএসএস এর মূলত দুটি অংশ আছে।
সিলেক্টর>এটি হল ট্যাগের নাম যে ট্যাগের বৈশিষ্ট্য বা প্রপার্টি অর্থাৎ রঙ,ফন্ট,সাইজ,ইমেজ ইত্যাদি মডিফাই করা হবে। যেমন, h1 {color:blue;text-align:center} এই অংশে h1 হল সিলেক্টর।
ডিক্লেয়ারেশন>এটি হল সিলেক্টরের প্রপার্টি এবং প্রপার্টির মান। যেমন, h1 {color:blue;text-align:center} এই অংশে {color:blue;text-align:center} হল ডিক্লেয়ারেশন পার্ট। এখানে color এবং text-align হল প্রপার্টি এবং blue ও center হল এই প্রপার্টিগুলোর মান বা ভ্যালু।
তবে সিএসএস যে শুধু <head> এর মধ্যেই ডিক্লেয়ার করতে হয় তা নয়, আপনি ইচ্ছা করলে নিচের মত করেও ডিক্লেয়ার করতে পারেন।

<html>
<head>
</head>
<body>
<h1 style=”color:blue;text-align:center”>   WELCOME   </h1>
</body>
</html>
দেখুন,উপরের কোডটিতে আমি <head> ট্যাগের মধ্যে স্টাইল ডিক্লেয়ার না করে সরাসরি <body> ট্যাগের মধ্যে যেখানে <h1> ট্যাগ বিশিষ্ট লেখা রয়েছে সেখানেই h1 ট্যাগ শুরু করার সাথে সাথে ওপেনিং ট্যাগের মধ্যেই স্টাইল নির্ধারণ করে দিয়েছি <h1 style=”color:blue;text-align:center”> অংশের মাধ্যমে।
এখানে যে আমি <body> অংশে এইচটিএমএল ট্যাগের মধ্যেই স্টাইল নির্ধারণ করে দিয়েছি একেই বলা হয় ইন লাইন সিএসএস (Inline CSS)। আর এর আগে যে আমি, <head> ও </head> ট্যাগের মধ্যে সিএসএস স্ক্রিপ্ট লিখেছিলাম তাকে বলে ইন্টারনাল সিএসএস স্টাইলশিট(Internal CSS Styles heet)।
বন্ধুরা, আজ তাহলে এ পর্যন্তই। কেমন লাগলো,জানাবেন। সবাইকে ধন্যবাদ।

সিএসএস সিম্ফোনীঃ পর্ব-২

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

প্রথমেই বলে রাখা ভালো, সি এস এস স্টাইল শিট এক্সটারনাল অর্থাৎ এইচ টি এম এল ডকুমেন্ট বা মূল ওয়েব পেইজের বাইরে আলাদা একটি ফাইল হিসেবে থাকতে পারে,আবার মূল এইচ টি এম এল ফাইল বা ওয়েব পেইজেও ডিক্লেয়ার করা যেতে পারে। আবার আপনি চাইলে এইচ টি এম এল ট্যাগের মধ্যেও এটি ডিক্লেয়ার করতে পারেন। সুতরাং, বলা যায় সি এস এস তিনভাবে ডিক্লেয়ার করা যায়।
১) এক্সটার্নাল শিট বা বাহ্যিকভাবে আলাদা ফাইল হিসেবে- এক্ষেত্রে আলাদা একটি ফাইল যা css এক্সটেনশানবিশিষ্ট, এমন একটি ফাইলে স্টাইলগুলো ডিক্লেয়ার করা হয়। ডিক্লেয়ার করা স্টাইলগুলো ওয়েব পেইজ বা এইচ টি এম এল ডকুমেন্টে এইচ টি এম এল ট্যাগে প্রযুক্ত হয়।
২) ইন্টার্নাল সি এস এস- এক্ষেত্রে সি এস এস স্টাইল ডিক্লেয়ার করা হয় এইচ টি এম এল ফাইলের শুরুতে <head> ট্যাগের মধ্যে।
৩) ইনলাইন সি এস এস- এক্ষেত্রে প্রতিটি ট্যাগের মধ্যে শুধুমাত্রে ঐ ট্যাগের জন্য সি এস এস ডিক্লেয়ার করা হয়।
আপনারা হয়তো ভাবছেন, স্টাইল জিনিসটা কিরকম? আসলে সি এস এস এ স্টাইল বলতে মূলত প্রতিটি ট্যাগের মান কেমন হবে তা নির্ধারণ করাকে বোঝায়। যেমন, <h1> একটি এইচ টি এম এল ট্যাগ যার মাধ্যমে শিরোনাম বা হেডিং বোঝানো হয়। অর্থাৎ <h1> এবং </h1> এর মাঝে যা লেখা হবে তা পেইজের শিরোনাম হিসেবে থাকবে।
যেমন
<html>
<head>
</head>
<body>
<h1> WELCOME </h1>
</body>
</html>
এ লেখাটি রান করলে নিচের মত পাওয়া যাবে।

সি এস এস এর কাজ হল এই শিরোনামটি যা এইচ টি এম এল ট্যাগের মাধ্যমে নির্ধারন করা হল, একে পেইজের কোথায় বসাতে হবে,এর রঙ কি হবে, ফন্ট বা সাইজ কত হবে, এগুলো নির্ধারন করা। শুধু তাই নয়, পেইজের ব্যাকগ্রাউন্ড কালার কি হবে, ব্যাকগ্রাউন্ডে কোনো ছবি থাকবে কিনা, বা পেইজে যত লেখা আছে তার দেখতে কেমন হবে ইত্যাদি নির্ধারন করা। অর্থাৎ, একটি পেইজের Outlook বিষয়ক যাবতীয় বৈশিষ্ট্য সি এস এস এর মাধ্যমে নির্ধারন করা হয়। আসুন তাহলে দেখি, আমরা যে শিরোনামটি নির্ধারন করলাম এটিতে কিভাবে সি এস এস এর মাধ্যমে পরিবর্তন ঘটানো যায়।
যে নোটপ্যাডে উপরের কোডটি লিখেছেন তা আবার খুলুন। এবারে এই কোডটিতে নিচের মত আরো কিছু কোড লিখুন <head> ও </head> ট্যাগের মধ্যে।
<html>
<head>
<style type=”text/css”>
h1 {color:blue;text-align:center}
</style>
</head>
<body>
<h1> WELCOME </h1>
</body>
</html>
এখন সেভ করে রান করে দেখুন তো কি হয়?

আসুন, কোডটি বিশ্লেষন করে দেখি।
প্রথমে দেখুন, <head > ও </head> ট্যাগের মধ্যে <style type=”text/css”> লেখা হয়েছে। এর মাধ্যমে ঘোষনা দেয়া হয়েছে যে এই ফাইলে সি এস এস ব্যবহার করা হচ্ছে এবং তা এখানেই ডিক্লেয়ার করা হচ্ছে। এর পরে h1 {color:blue;text-align:center} লেখা হয়েছে,যার মাধ্যমে বোঝানো হয়েছে, এই ফাইলের <body> ট্যাগের মধ্যে যত কন্টেন্ট আছে তাতে যদি কোনো <h1> ট্যাগ বিশিষ্ট কোনো লেখা অর্থাৎ কোনো শিরোনাম থাকে তবে তার color হবে blue,শিরোনামটির text align হবে center অর্থাৎ শিরোনামটি পেইজের মাঝে অবস্থান করবে। উল্লেখ্য এখানে color,text-align হল h1 এর প্রপার্টি বা বৈশিষ্ট্য যাদের মান যথাক্রমে blue এবং center নির্ধারন করা হয়েছে {color:blue;text-align:center} অংশের মাধ্যমে। এখন আপনি <h1> ট্যাগবিশিষ্ট যত লেখাই লিখুন না কেন, সবগুলোই এই বৈশিষ্ট্যপ্রাপ্ত হবে, কারন, সি এস এস এ আমরা তা ডিক্লেয়ার করে দিয়েছি <h1> ট্যাগের জন্য। যেমন,নিচের কোডটি দেখুন,
<html>
<head>
<style type=”text/css”>
h1 {color:blue;text-align:center}
</style>
</head>
<body>
<h1> WELCOME </h1>
<br>
<h1> HOW ARE YOU ? </h1>
<br>
<h1> WELL DONE </h1>
</body>
</html>
ভাবুনতো, এর রেজাল্ট আপনার ব্রাউজারে কেমন আসতে পারে। সবাইকে ধন্যবাদ।

সিএসএস টিউটোরিয়ালঃ ১ম পর্ব

CSS এর পূর্ন নাম বা রূপ হচ্ছে Cascading Style Sheets. সহজ ভাষায় একটি ওয়েবসাইটের বিভিন্ন কনটেন্ট (এইচটিএমএল ইলিমেন্ট) যেমনঃ সাইটের গঠন, আকার(দৈর্ঘ্য, প্রস্থ এবং উচ্চতা), কনটেন্ট এর অবস্থান, ছবি, রং, ভিডিও, এ্যানিমেশন, বাটন কিভাবে ওয়েব ব্রাউজারে প্রদর্শন করবে এটার নির্দেশনা দান করাই হচ্ছে CSS এর কাজ। এইচটিএমএল কে যদি একটি ওয়েবসাইটের মেরুদণ্ড (Structure) বলেন তাহলে সিএসএস হল প্রান।

CSS কিভাবে কাজ করে?

CSS নিয়ে কাজ করতে হলে আপনাকে প্রথমে এইচটিএমএল এ ভাল দক্ষতা থাকতেই হবে। তা নাহলে শুধু সিএসএস দিয়ে আপনি কিছুই করতে পারবেন না। তাই, সিএসএস শিখার আগে অবশ্যই এইচটিএমএল শিখে নিতে হবে। সিএসএস মূলত এইচটিএমএল সাথে জয়েন ভেঞ্চারে/কম্বিনেশনে কাজ করে। সাপোজ মনে করেন, এইচটিএমএল ফাইল এ একটি পারাগ্রাফ লিখেছেন। এখন আপনি চাইছেন সেই পারাগ্রাফ লিখার কালার লাল রঙের করবেন। তাহলে আপনাকে যা করতে হবে সেটা নিচের উদাহরনে লক্ষ করুনঃ

<html>
 <head>
   <style type=”text/css”>
      p{
        color: red;
       }
   </style>
 </head>

<body>
    <p>This is a paragraph. Which color is RED!</p>
</body>
</html>

Note: উপরের কোড গুলো ফলো করুন… হেড((<head> </head>)সেকশনে internal style sheet (বিভিন্ন টাইপ এর স্টাইল সীট নিয়ে পরের অধ্যায়ে জানবো) এর style ট্যাগের ভিতরে আমরা পারাগ্রাফ জন্য লাল কালার ডিক্লেয়ার করেছি। আর বডি(<body> </body >) সেকশনে প্যারাগ্রাফ ট্যাগ (<p></p>) এর ভিতরে প্যারাগ্রাফ টেক্সট ডিক্লেয়ার করেছি। উপরের কোড টুকুর আউটপুট ব্রাউজার এ প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু নিজ হাতে লিখুন, ভুলেও কপি-পেস্ট করবেন না। ফাইলের নাম দিন index বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…

পরবর্তি পর্বে আসছে সিনট্যাক্স পরিচিতি। সেই পর্যন্ত সবাই ভাল থাকুন সুস্থ থাকুন!

Sunday, January 6, 2013

নিজের একটি ওয়াইফাই হটস্পট

বন্ধুরা কেমন আছেন সবাই? অনেক দিন পর লিখতে বসলাম। আজকে আমি আপনাদের সাথে এমন একটি সফটওয়্যার নিয়ে শেয়ার করতে যাচ্ছি, যা কি খুব সহজেই আপনার ডেস্কটপ অথবা ল্যাপটপ কে ওয়াইফাই হট স্পট এ পরিনত করতে পারে। আসুন দেখি কি দরকার আমার ল্যাপটপ কিংবা ডেস্কটপ কে হট স্পট এ পরিনত করার ?
আমি নিজে বাসাতে মোট তিনটি ডিভাইস ব্যবহার করি, একটি ডেস্কটপ, একটি ল্যাপটপ এবং একটি স্মার্ট ফোন। তিনটি তে আলাদা আলাদা ইন্টারনেট লাইন নিতে গেলে আমার পকেট শেষ… অনেক দিন থেকেই ভাবছিলাম কি করা যায়। হ্যা করার অনেক কিছুই আছে, তবে আমি চাচ্ছিলাম সবচাইতে সহজ একটি উপায়। আর এই সহজ উপায়টিই আমাকে দিয়েছে, Connectify.me নামের একটি সফটওয়্যার। দুটি ভার্সন এ এই সফটওয়্যার টি পাওয়া যায়, একটি হচ্ছে লাইট এবং অপরটি হচ্ছে প্রো । তবে আমার মতে, বাসাতে ব্যবহারের জন্য লাইট ভার্সন টি বেস্ট।

 http://www.connectify.me/features/?refid= এখান থেকে প্রথমে সফটওয়্যার টিকে ডাউনলোড করে নিন

এবার ইন্সটল করে নিন আপনার ডেস্কটপ অথবা ল্যাপটপ এ।
মনে রাখবেন, ওয়াইফাই হট স্পট বানাতে আপনার নিচের হার্ডওয়্যার গুলো থাকতে হবে;
ডেস্কটপ অথবা ল্যাপটপ কম্পিউটার।
ডেস্কটপ হলে, একটি ওয়াইফাই কার্ড (PCI অথবা USB ডংগল), আর ল্যাপটপ হলে ল্যাপটপ এর ওয়াইফাই কার্ড।
ওয়াইফাই কার্ড এর আপডেট ড্রাইভার।
Connectify সফটওয়্যার টি।
একটি ইন্টারনেট কানেকশন।
যদি ডেস্কটপ হয়ঃ
আপনি যদি আপনার ডেস্কটপ দিয়ে ওয়াইফাই হট স্পট বানাতে চান, তবে, প্রথমেই আপনার ডেস্কটপ এ আপনার ওয়াইফাই কার্ড টিকে ইন্সটল করেনিন (ড্রাইভার সহ)।
যদি ল্যাপটপ এ হয়ঃ
আপনি যদি আপনার ল্যাপটপ দিয়ে ওয়াইফাই হট স্পট বানাতে চান, তবে, প্রথমেই আপনার ল্যাপটপ এ আপনার ওয়াইফাই কার্ড টিকে এনাবল করে নিন (প্রয়োজনে আপডেট ড্রাইভার ইন্সটল করে নিন)।
এবার, Connectify সফটওয়্যার টি ইন্সটল করুন। সফটওয়্যার টি ইন্সটল করা খুবি সোজা, শুধু মাত্র, কয়েকবার নেক্সট নেক্সট করে গেলেই দেখবেন সফটওয়্যার টি ইন্সটল হয়ে গেছে।
সফটওয়্যার টি চালু হবার পরে নিচের ছবির মতন একটি ইউজার ইন্টারফেস দেখতে পাবেন। আসুন পরিচিত হয়ে নেই এই ইন্টারফেস এর বিভিন্ন অংশের সাথে;

সেটিংস্‌ ট্যাব এ প্রথমেই আছে, Hotspot Name এবং Password যেহেতু আমি লাইট ভার্সন টি ব্যবহার করছি তাই আমি আমার হট স্পট এর নাম যাই দেই না কেন, আগে অবশ্যই Connectify লিখা থাকবে। এখানে আমি নাম দিয়েছি, “Connectify-test”.
আর Password হচ্ছে, আপনি যেই কী টা দিতে চান আপনার নেটওয়ার্ক সিকিউরিটির জন্য তা দিয়ে দিন।

এর পরে আসছে; Internet to Share, তার মানে, এখানে আপনি ঠিক যেই ইন্টারনেট কানেকশন টি শেয়ার করতে চাচ্ছেন, তা সিলেক্ট করে দিন। আমার ল্যাপটপ এ Broadcom NetXtreme 57XX নেটওয়ার্ক ইন্টারফেস কার্ড এর মাধ্যমে ইন্টারনেট কানেকশন এসেছে, আর আমি চাচ্ছি যে, এই ইন্টারনেট টিকে আমি আমার হট স্পট এ শেয়ার করব; তাই আমি Internet to Share এ আমার Broadcom NetXtreme 57XX নেটওয়ার্ক ইন্টারফেস কার্ড টিকে সিলেক্ট করে দিয়েছি।

এবার আসুন Advanced Settings এ, এখানে দুটি পার্ট আছে; প্রথমটি হচ্ছে; Share Over; এখানে আপনি দেখিয়ে দিবেন (যদি আপনার কম্পিউটার এ একের অধিক ওয়াইফাই ইন্টারফেস থাকে, যেমন আমার ল্যাপটপ এ একটি বিল্ট-ইন ওয়াইফাই আছে এবং একটি ওয়াইফাই ডংগল আছে) কোন ইন্টারফেস টি দিয়ে আপনি আপনার অন্য ডিভাইস গুলো কে কানেক্ট করতে চাচ্ছে;

Connectify মোট তিনটি Sharing Mode সাপোর্ট করে, যেগুলো হচ্ছে;
Wi-Fi Access Point, Encrypted (WEP2)
Wi-Fi Ad- Hoc, Open
Wi-Fi Ad- Hoc, Encrypted
আমার স্মার্ট মোবাইল টি Ad-Hoc সাপোর্ট করে না, সুতরাং আমি সিলেক্ট করেছি; Wi-Fi Access Point, Encrypted (WEP2);
এছাড়াও আরো দুইটি অপশন আছে Firewall সম্পর্কিত যা লাইট ভার্সনে আপনি চাইলেও বন্ধ করতে পারবেন না, তবে আপনার যদি প্রো ভার্সনের সফটওয়্যার টি থেকে তবে, ক্ষেত্র বিশেষে চাইলেই এই অপশন দুটি কে বন্ধ করে রাখতে পারবেন।
এবার সরাসরি “Start Hotspot” বাটন টিতে ক্লিক করে দিন।

এবার দেখুন সফটওয়্যার টির উপর দিকে একটি সবুজ রঙ এর চিহ্ন বোঝাচ্ছে আপনার ওয়াইফাই হট স্পট ঠিক মতন চলছে।

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

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