সুপ্রিয় পাঠক, অনলাইনে আয়ের ক্ষেত্রে ঢাকার অবস্থান পৃথিবীতে তৃতীয়। একটা বিষয় খুব ভালো লাগে যখন কোন প্রজেক্টে বিড করতে যাই, দেখি প্রায় ৬০% বিডার বাংলাদেশী। অর্থ্যাৎ ধীরে ধীরে বাংলাদেশী যুবকদের অংশগ্রহণ যে বাড়ছে অনলাইন আর্ণিংয়ে তা সুস্পষ্ট। বিভিন্ন অনলাইন মার্কেট প্লেসগুলি ঘাটলে দেখা যায় বাংলাদেশী প্রোগামাররা সোৎসাহে আয় করছে লক্ষ লক্ষ টাকা। এমনকি গত ঈদের দিনে কয়েকজনকে পাওয়া গেল অনলাইনে কাজ করছে। এই বিপুল উৎসাহকে স্বাগত জানাই। এই রকম ডেডিকেশন একদিন এই দেশের যুব সমাজকে বেকারত্বমুক্ত করে ছাড়বে আশা করি। তবে তার জন্য সঠিক প্রশিক্ষণও জরুরী। আর এই উদ্দেশ্যেই এই ধারাবাহিক রচনাটি প্রকাশ করা। আউটসোর্সিং এর খুব ব্যাপকভাবে পাওয়া যায় PSD2 HTML এর কাজ এবং Joomla Tempeting । কাজটি একটু কঠিন হলেও আয় খুব ভাল। মাসে কমপক্ষে ৫০০/৬০০ ডলার। তাই নিয়মিত এই পাঠটি পড়ুন ও শিখতে থাকুন নানান প্রফেশনাল কাজ। আপনিও ক্রমান্বয়ে হয়ে উঠবেন দক্ষ আউটসোর্সার
আগের ৩টি পর্বে আমরা Div base HTML file ও CSS file তৈরী করে Link করা শিখেছিলাম। আমরা এই পর্বে খুব গুরুত্বপূর্ণ কাজ শিখব যা হল MENU তৈরী করা। এই কাজটি করতে হলে আগের পর্বের ধারনাগুলো নেয়া জরুরী। আগের পর্বগুলো সংগ্রহ করে নিবেন। MENU একটা Website এর খুব গুরত্বপূর্ণ অংশ। একে Navigation নামেও ডাকা হয়। Menu তৈরীর জন্য আমরা যে Sample Website টি ব্যবহার করব তার জন্য আপনাকে Download করতে হবেwww.icdbd.com/part4.zip এই লিংক হতে। Uinzip করার পর index.html file টিOpen করলেই আপনি দেখতে পারবেন একটি Sample Website তবে তার মাঝে Main menuসবহঁ টি নেই। আমরা Banner Image টির উপর Main manu তৈরী করব প্রদর্শিত ছবির মত। এর জন্য আমাদের MainNav নামে একটি Div তৈরী করতে হবে। এবার আমরা Practical কাজ শুরু করব। লক্ষ্য করুন আপনার Folder এর মাঝে CSS নামে একটি Folder আছে। আপনার Computer এAdobe Dreamweaver software টি Install করা থাকতে হবে। এবার আপনি index.htmlএবং Styles.CSS file এর উপর Right Click করে Open with দিয়ে Dreamweaverদিয়ে ঋরষব দুটো খুলুন। যদি Dreamweaver না থাকে তবে Open with দিয়ে Notepad দিয়ে দুটো খুলুন। এরপর index file এর TOP Div এর পর MainNav নামে একটি উরা আমরা বানাবো। তাই TOP Div এর পর নিচের কোডটুকু Type করুনঃ <div class="mainNav">
<ul>
<li><a href="#">Home Staging</a></li>
<li><a href="#">Why Footsteps?</a></li>
<li><a href="#">Schedule a Consultation</a></li>
<li class="last"><a href="#">Home</a></li>
</ul>
<div class="clear"></div>
</div>
কোডটুকু Type করার পর আপনি ব্যানার ইমেজ এর উপর Manu Item গুলো এরকম দেখবেনঃ Home Staging Why Footsteps? Schedule a Consultation Home এখন আপনার প্রয়োজন Menu Item গুলোকে নিচের মত করে সাজানো। এর জন্য আপনার প্রয়োজন Style.CSS file টির মাঝে প্রয়োজনীয় কোড Type করা। তাইStyle.CSS file টির মাঝে নিচের কোডটুকু Type করুনঃ .mainNav{ width:100%; height:44px; background:url(../images/nav_bg.png) repeat-x; } .mainNav ul{ margin-left:135px; } .mainNav ul li{ float:left; text-align:center; padding:0 30px; background:url(../images/nav_separator.png) no-repeat right 15px; } .mainNav ul li.last{ background:none; } .mainNav ul li a{ font-size:17px; line-height:42px; font-weight:bold; color:#000; } .mainNav ul li a:hover{ color:#ffffff; } .mainNav ul li.active a{ color:#462418; } কোডটুকু আপনি যে কোন স্থানে Type করতে পারেন। তবেঃ .logo{ width:491px; height:92px; padding-top:184px; } এরপর Type করুন। এবার আমরা একটু ব্যাখ্যা করে বুঝবো কোডের কোন অংশে কি কাজ হচ্ছে। আসলে MainNav নামের Div টি সম্পূর্ণ Menu কে ধারণ করছে। একটি Menu তৈরীর জন্য আমাদের প্রয়োজন অনেকগুলো Item. এগুলোকে আমরা বলবো li বা list item যেমন Home Staging, why Footsteps?, Home ইত্যাদি হল এক একটি item. তবেitem. রঃবস. বা li. গুলোকে বেধে রাখার জন্য আমাদের <ul> ব্যবহার করতে হবে। লক্ষ্য করুন একটি Div Class declare করা হয়েছে last নামে (<li class="last"><a href="#">Home</a></li>) । কারণ Manu item গুলোর পর একটা Separator ( | ) দেখা যায়। কিনতৃ সবশেষে কোন Separator দরকার নাই। তাই last Class এর জন্য Style.CSS fileটির মাঝে নিচের কোডটুকু Type করা হয়েছ .mainNav ul li.last{ background:none; } Menu item গুলোর উপর মাউস নিলে Menu item গুলো সাদা রংয়ের হচ্ছে Style.CSS file টির মাঝেঃ .mainNav ul li a:hover{ color:#ffffff; } - কোডটুকু থাকায়। আপনি color:#ffffff; এর ffffff এর পরিবর্তন করে ২২২২২২ দিয়ে বা অন্য কোড দিয়ে দেখতে পারেন। আগামী পর্বে খুব গুরুত্বপূর্ণ একটি কাজ শিখব। তাহল Textbox, list item, radio button ইত্যাদি তৈরী করা। এই কাজটির জন্য আজকে পর্যন্ত যে বিষয়গুলি শেখানো হল তা বার বার চর্চা করে কোন অসুবিধা থাকলে তা দূর করে ফেলুন। আপনি ধীরে ধীরে প্রবেশ করছেন প্রোগ্রামিং এর গভীরে। নিজেকে তার জন্য প্রস্তুত করতে থাকুন। যদি এই পর্বেই আটকে যান তবে সামনে এগোনোর পথ হারিয়ে যাবে। একটা চক্রে ঘুরতে থাকবেন। কাজেই কোন সমস্যায় যোগাযোগ করার দরকার হলে icdjamil@gmail.com এই ঠিকানায়। সবাইকে অনেক অনেক শুভেচ্ছা জানিয়ে আজকের পর্ব এখানেই শেষ করছি। সবাই ভালো সুস্থ থাকুন। Feedback: combarta@gmail.com |
শনিবার, ৭ জানুয়ারী, ২০১২
জুমলাঃ আয় করুন মাসে হাজার ডলার পর্ব - ৪
জুমলাঃ আয় করন মাসে হাজার ডলার পর্ব - ৩
সুপ্রিয় পাঠক, আনলাইনে আয়ে ঢাকার অবস্থান পৃথিবীতে তৃতীয়। ভারতের চেন্নাই ও ফিলিপাইনের ম্যানিলার পর ঢাকার প্রোগ্রামাররা অবস্থান করে নিয়েছে। অসংখ্য মানুষ অনলাইনে কাজকরে আয় করছে মাসে লক্ষ্য লক্ষ্য টাকা। সমপ্রতি বেসিস এর উদ্যোগে পুরস্কার ও সম্মানিত করা হল বাংলাদেশে আউটসোর্সিং কাজের শীর্ষে আছে এ রকম ১০ জনকে। নানা উপায়ে আয় করতে পারেন আপনি । তবে অনেকেই না বুঝে মূল্যবান সময় নষ্ট করে PTC নামের জালে। কেউ বা ব্লগিং করেও আয় করছেন কিছু কিছু। কিন্তু আমরা আপনাকে উপযোগী করে তুলতে চাই সবচেয়ে নির্ভরযোগ্য ও সম্মানজনক কাজের জন্য। আর এ জন্যই PSD To HTML এবংJoomla TEMPLATING কাজে দক্ষ করে তোলার জন্য এই আয়োজন। ২ টি পর্ব যারা পাননি তারা অবশ্যই সংগ্রহ করে নিবেন ধারাবাহিক এই আয়োজনে আমাদের সাথে থাকুন। আপনিও ক্রমান্বয়ে হয়ে উঠবেন দক্ষ আউটসোর্সার
সুপ্রিয় পাঠক, সবাইকে অসংখ্য শুভেচ্ছা জানাচ্ছি । ফাল্গুনের শুরুতে বিশ্ব ভালবাসা দিবসের মধূর ভালবাসার ছোয়া লাগুক সবার। ভালবাসার জন্য মাঝে মাঝে খরচ ও তো দরকার। ঘরে বসে যদি বেশ কিছু টাকা আয় করা যায় তো মন্দ কি?
আগের পর্বে আমরা শিখেছিলাম, কিভাবে একটা HTML File এবং CSS তৈরী করে Link করা যায়। আজ আমরা শিখব একটা Index তৈরী করার জন্য কিভাবে শুরু করবেন। Index Page হল একটা ওয়েব সাইটের প্রথম Page . কেউ একজন একটা ওয়েব এড্রেস এ ঢুকলে প্রথমেই এই Pageটি আসবে। এখন আমরা জানবDiv base HTML ও CSS দিয়ে কাজ করার সময় কিভাবে Plan করা হবে।
একটা Page কে তিনটি ভাগে ভাগ করে ফেলতে হবে Program এর সুবিধার্থে। ভাগ তিনটি হল Top, Middle, Bottom সাধারনত Top ও Botton এ কোন পরিবর্তন হয় না। অর্থাৎ Middleঅংশের ছবি, লেখা মাঝে মাঝে আপডেট হতে পারে তবে অন্য দুটি অংশে খুব বেশি পরিবর্তন হয় না। Top অংশের মাঝে সাধারনত থাকে Logo, Small Menu, Main Menu Slogan, ইত্যাদি। আমরা MTA এরWeb টাতেলক্ষ্য করি।Top অংশের মাঝে আছে Logo Slogan Small Menu এবং Main Menu . আমরা Main Menu কে Nav নামে অভিহিত করব। যা Navigation বোঝায়। তাহলে তিনটি ভাগের জন্য আমাদের তিনটি উরা প্রয়োজন। আমরা index.html এর মাঝে নিচেরCode টুকু লিখব।
<html>
<head>
<title>MTA Home Page</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div class="top"> </div>
<div class="middle"> </div>
<div class="bottom"></div>
</div>
</body>
</html>
উপরের কোডটুকু html file অর্থাৎ index.html এর মাঝে লেখার পর Save করে রাখুন। এখন খুলুনStyle.css file টি এবং তার মাঝে থাকবে নিচের কোডটুকু।
#wrapper {
width:800px;
margin:0px auto;
min-height:800px;
}
.top {
width:100%;
margin-top:15px;
background:url(../images/top_bg.png) no-repeat top;
}
.middle {
width:775px;
margin:0 auto;
}
.bottom {
width:100%;
padding-bottom:10px;
}
এবার CSS File এর কোডটুকু লেখা শেষে ঝধাব করুন, তার পর index.html File টি Fire Fox দিয়ে খুলে দেখুন ফলাফল কি যদি Image না পায় তবে বুঝতে হবে Image Location পাচ্ছে না। Imageগুলো Download করে নিতে পারেন এই www.icdbd.com/images.htm থেকে। আপনারFolder এর মাঝে তাহলে থাকবে Images ও CSS নামে দুটি Folder ও Index.html File. CSS এর মাঝে Style.CSS ও Image এর মাঝে Image এর Slice গুলো। আগামী পর্বে খুব গুরুত্বপূর্ণ একটি কাজ শিখব। তাহল Menu তৈরী করা। এই কাজটির জন্য আজকে পর্যন্ত যে বিষয়গুলি শেখানো হল তা বার বার চর্চা করে কোন অসুবিধা থাকলে তা দূর করে ফেলুন। আপনি ধীরে ধীরে প্রবেশ করছেন প্রোগ্রামিং এর গভীরে। নিজেকে তার জন্য প্রস্তুত করতে থাকুন। যদি এই পর্বেই আটকে যান তবে সামনে এগোনোর পথ হারিয়ে যাবে। একটা চক্রে ঘুরতে থাকবেন। কাজেই কোন সমস্যায় যোগাযোগ করার দরকার হলেcombarta@gmail.com এই ঠিকানায়।
সবাইকে অনেক অনেক শুভেচ্ছা জানিয়ে আজকের পর্ব এখানেই শেষ করছি। সবাই ভালো, সুস্থ থাকুন।
সুপ্রিয় পাঠক, সবাইকে অসংখ্য শুভেচ্ছা জানাচ্ছি । ফাল্গুনের শুরুতে বিশ্ব ভালবাসা দিবসের মধূর ভালবাসার ছোয়া লাগুক সবার। ভালবাসার জন্য মাঝে মাঝে খরচ ও তো দরকার। ঘরে বসে যদি বেশ কিছু টাকা আয় করা যায় তো মন্দ কি?
আগের পর্বে আমরা শিখেছিলাম, কিভাবে একটা HTML File এবং CSS তৈরী করে Link করা যায়। আজ আমরা শিখব একটা Index তৈরী করার জন্য কিভাবে শুরু করবেন। Index Page হল একটা ওয়েব সাইটের প্রথম Page . কেউ একজন একটা ওয়েব এড্রেস এ ঢুকলে প্রথমেই এই Pageটি আসবে। এখন আমরা জানবDiv base HTML ও CSS দিয়ে কাজ করার সময় কিভাবে Plan করা হবে।
একটা Page কে তিনটি ভাগে ভাগ করে ফেলতে হবে Program এর সুবিধার্থে। ভাগ তিনটি হল Top, Middle, Bottom সাধারনত Top ও Botton এ কোন পরিবর্তন হয় না। অর্থাৎ Middleঅংশের ছবি, লেখা মাঝে মাঝে আপডেট হতে পারে তবে অন্য দুটি অংশে খুব বেশি পরিবর্তন হয় না। Top অংশের মাঝে সাধারনত থাকে Logo, Small Menu, Main Menu Slogan, ইত্যাদি। আমরা MTA এরWeb টাতেলক্ষ্য করি।Top অংশের মাঝে আছে Logo Slogan Small Menu এবং Main Menu . আমরা Main Menu কে Nav নামে অভিহিত করব। যা Navigation বোঝায়। তাহলে তিনটি ভাগের জন্য আমাদের তিনটি উরা প্রয়োজন। আমরা index.html এর মাঝে নিচেরCode টুকু লিখব।
<html>
<head>
<title>MTA Home Page</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div class="top"> </div>
<div class="middle"> </div>
<div class="bottom"></div>
</div>
</body>
</html>
উপরের কোডটুকু html file অর্থাৎ index.html এর মাঝে লেখার পর Save করে রাখুন। এখন খুলুনStyle.css file টি এবং তার মাঝে থাকবে নিচের কোডটুকু।
#wrapper {
width:800px;
margin:0px auto;
min-height:800px;
}
.top {
width:100%;
margin-top:15px;
background:url(../images/top_bg.png) no-repeat top;
}
.middle {
width:775px;
margin:0 auto;
}
.bottom {
width:100%;
padding-bottom:10px;
}
এবার CSS File এর কোডটুকু লেখা শেষে ঝধাব করুন, তার পর index.html File টি Fire Fox দিয়ে খুলে দেখুন ফলাফল কি যদি Image না পায় তবে বুঝতে হবে Image Location পাচ্ছে না। Imageগুলো Download করে নিতে পারেন এই www.icdbd.com/images.htm থেকে। আপনারFolder এর মাঝে তাহলে থাকবে Images ও CSS নামে দুটি Folder ও Index.html File. CSS এর মাঝে Style.CSS ও Image এর মাঝে Image এর Slice গুলো। আগামী পর্বে খুব গুরুত্বপূর্ণ একটি কাজ শিখব। তাহল Menu তৈরী করা। এই কাজটির জন্য আজকে পর্যন্ত যে বিষয়গুলি শেখানো হল তা বার বার চর্চা করে কোন অসুবিধা থাকলে তা দূর করে ফেলুন। আপনি ধীরে ধীরে প্রবেশ করছেন প্রোগ্রামিং এর গভীরে। নিজেকে তার জন্য প্রস্তুত করতে থাকুন। যদি এই পর্বেই আটকে যান তবে সামনে এগোনোর পথ হারিয়ে যাবে। একটা চক্রে ঘুরতে থাকবেন। কাজেই কোন সমস্যায় যোগাযোগ করার দরকার হলেcombarta@gmail.com এই ঠিকানায়।
সবাইকে অনেক অনেক শুভেচ্ছা জানিয়ে আজকের পর্ব এখানেই শেষ করছি। সবাই ভালো, সুস্থ থাকুন।
জুমলাঃ আয় করন মাসে হাজার ডলার পর্ব - ২
গতপর্বে আমরা শিখেছিলাম কিভাবে একটা HTML File কে জুমলা Template এ রুপান্তরিত করতে হয়। কাজটি ছিল Advanceকাজ । যারা গত পর্বটি পড়েন নি তারা অবশ্যই সংগ্রহ করে নিবেন। খুব Expertলোক ব্যতীত জুমলা Template তৈরী করার ধারনা আপনাকে কেউ চট করে দিতে পারবে না। সাধারনত আমরা নানা ডবনংরঃব থেকে ফ্রি টেমপ্লেট উড়হিষড়ধফ করে কাজ করি। কিন্তু ইন্টারনেট থেকে প্রচুর টাকা আয় করতে হলে আপনাকে অবশ্যই জানতে হবে জুমলা টেমপ্লেট বানানো। কিন্তু কান টানলে মাথা আসে। জুমলা টেমপ্লেট বানানোর জন্য তো শুধু জুমলা জানলে হবে না, জানতে হবে HTMLCSSPHP। তবে একসাথে সব শিখতে গেলে জট লেগে যাবে। একটা একটা করে শিখুন। কাজে লাগাতে পারবেন। সবচেয়ে বড়কথা, পরিষ্কার ধারনা থাকতে হবে যে কি শিখলে কি কাজ হবে। আমাদের মূললক্ষ্য অনলাইনে অর্থ ঊপার্জন। বিভিন্ন Market place থেকে আপনি অনায়াসে মাসে হাজার হাজার ডলার কামাতে পারেন, যেমন Freelancer.com,Scriptlance.com ইত্যাদি হতে।
ঘরে বসে কাজগুলো করে Bayer কে দিবেন, টাকা এসে জমা হবে আপনার Master Card এ কিংবাBank account এ। কথাগুলো খুব অবিশ্বাস্য মনে হয়। আসলে আয়ের টাকা হাতে না আসলে বোঝা যায় না। তবে আমি নিজে যেহেতু আয় করছি, আমার কাছে বিষয়টা ১১০% সত্যি। যাই হোক, কোন কোন ক্ষেত্রগুলো থেকে আয় করা যায়? অসংখ্য ক্ষেত্র, Data Entry , Article Writing, Web Development ইত্যাদি হাজারো প্রোগ্রাম দিয়ে আপনি আয় করতে পারেন। তবে ভাল Amount income করতে হলে আপনাকে Web Design এ কাজ করতে হবে। একবার দক্ষতা অর্জন করতে পারলে আপনার নিশ্চিত মাসিক ঊপার্জন ১০০০ থেকে ১৫০০ ডলার। এ লক্ষ্যেই আমাদের যাত্রা। আপনি প্রথমে বিশ্বাস করুন। Computer বার্তার এই ফিচারের সবকটা পর্বশেষে আপনিই আত্নবিশ্বাসের সাথে বলবেন, হ্যা আমি ইন্টারনেটে কাজ করে আয় করছি। এখানে কোন অসত্য নেই।
তো আসুন আমাদের এই দীর্ঘ যাত্রার জন্য প্রথম পদক্ষেপ ফেলি। প্রথমেই আমরা হাত দিব HTML এ। আয়ের জন্য খুব গুরুত্বপূর্ণ একটা কাজ হল PSD to HTML. ধরুন অষ্ট্রেলিয়ার একটা কোম্পানি তাদের WebsiteএরDesign Photoshop এ অর্থ্যাৎ PSD Design করে রেখেছে। এখন তারা এটাকেWebsite এর Format এ অর্থ্যাৎ HTML রুপে দাড় করাতে চায়। সে আপনাকে PSD File টা পাঠিয়ে দিবে। তারপর সেটাকে HTML (Div Base ) এ Convert করতে বলবে। এর জন্য প্রয়োজন হবে HTML (Div Base)এ CSS । যদিও প্রথমে আপনাকে পরিকল্পনা মাফিক PSD File কেSlice করতে হবে । এই কাজটি আমরা পরে শিখব । ধরে নিন আপনার কাজের জন্য Bayer আপনাকেSlice করে পাঠিয়েছে। আমার এই lessonটির জন্য আপনি Slice file download করে নিতে পারবেন www.icdbd.com/psdslice/images.zip থেকে। download করে এটিকেUnzipকরলে images নামে একটি Folder পাবেন। এবার কাজের প্রস্তুতি নিন।
আমাদের প্রথম কাজ Computer এর যেকোন Drive এ একটি Folder বানানো PSDHTMLনামে। তার পর তার মাঝে images এবং CSSনামে দুটি Folder বানান। এবার একটা HTML File বানাবো । ফাকা জায়গায় Right click করে New> Text document এclick করুন। একটি Text File তৈরী হবে । File টি Open করে নিচের কোর্ডগুলো লিখুনঃ
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="wrapper">
<div class="name">My HTML</div>
</div>
</body> </html>
কোর্ডগুলো লিখে Text File টিকে File>Save as click করে Save করুন। Save as Type দিবেন all files এবং File name দিবেন index.html তারপর Save button এclick এ পষরপশ করলে দেখবেন একটি HTML File তৈরী হয়ে যাবে।
আর একটি কাজ আজকে করব। একটা CSS File তৈরী করব CSS নামে Folder এর মধ্যে। লক্ষ্য করুন HTML Code এর মাঝে আপনি লিখছেন href="css/styles.css"> অর্থ্যাৎCSS Folder এর মাঝে style.css নামে একটা ফাইল থাকবে এবং এর সাথে HTML File এরLink থাকবে।
body {
background:#000000;
}
#wrapper {
width:800px;
height:400px;
background:#ffffff;
margin:0px auto;
}
.name {
color:green;
background:#cccccc;
font-size:30px;
}
পরিশেষে index.html File টি Double click করে খুললে দেখবেন একটি কালোBackground এর মাঝে সাদা একটা Rectangle (Wrapper div) এবং তার মাঝে সবুজ কালিতে লেখা ছাই রংয়ের Background (name div) এর উপর সবুজ লেখা My HTML
পাঠক এই পর্বে আপনি সফলভাবে HTML এবং CSS File তৈরী করে Link করতে শিখলেন। যাদের এখন্ও সমস্যা আছে তাদের জন্য আমি পুরো কাজটি করে রেখেছি। download করে নিবেনwww.icdbd.com/psdslice/psdhtml.zip - Link থেকে। পরের পর্বে গুলোকে সাজিয়েWebpage রুপে তৈরী করতে শিখবেন। এবং পাশাপাশি ক্রমান্বয়ে আপনি হয়ে উঠবেন HTML, CSS এর দক্ষ Programmer সবাই ভাল থাকবেন।
ঘরে বসে কাজগুলো করে Bayer কে দিবেন, টাকা এসে জমা হবে আপনার Master Card এ কিংবাBank account এ। কথাগুলো খুব অবিশ্বাস্য মনে হয়। আসলে আয়ের টাকা হাতে না আসলে বোঝা যায় না। তবে আমি নিজে যেহেতু আয় করছি, আমার কাছে বিষয়টা ১১০% সত্যি। যাই হোক, কোন কোন ক্ষেত্রগুলো থেকে আয় করা যায়? অসংখ্য ক্ষেত্র, Data Entry , Article Writing, Web Development ইত্যাদি হাজারো প্রোগ্রাম দিয়ে আপনি আয় করতে পারেন। তবে ভাল Amount income করতে হলে আপনাকে Web Design এ কাজ করতে হবে। একবার দক্ষতা অর্জন করতে পারলে আপনার নিশ্চিত মাসিক ঊপার্জন ১০০০ থেকে ১৫০০ ডলার। এ লক্ষ্যেই আমাদের যাত্রা। আপনি প্রথমে বিশ্বাস করুন। Computer বার্তার এই ফিচারের সবকটা পর্বশেষে আপনিই আত্নবিশ্বাসের সাথে বলবেন, হ্যা আমি ইন্টারনেটে কাজ করে আয় করছি। এখানে কোন অসত্য নেই।
তো আসুন আমাদের এই দীর্ঘ যাত্রার জন্য প্রথম পদক্ষেপ ফেলি। প্রথমেই আমরা হাত দিব HTML এ। আয়ের জন্য খুব গুরুত্বপূর্ণ একটা কাজ হল PSD to HTML. ধরুন অষ্ট্রেলিয়ার একটা কোম্পানি তাদের WebsiteএরDesign Photoshop এ অর্থ্যাৎ PSD Design করে রেখেছে। এখন তারা এটাকেWebsite এর Format এ অর্থ্যাৎ HTML রুপে দাড় করাতে চায়। সে আপনাকে PSD File টা পাঠিয়ে দিবে। তারপর সেটাকে HTML (Div Base ) এ Convert করতে বলবে। এর জন্য প্রয়োজন হবে HTML (Div Base)এ CSS । যদিও প্রথমে আপনাকে পরিকল্পনা মাফিক PSD File কেSlice করতে হবে । এই কাজটি আমরা পরে শিখব । ধরে নিন আপনার কাজের জন্য Bayer আপনাকেSlice করে পাঠিয়েছে। আমার এই lessonটির জন্য আপনি Slice file download করে নিতে পারবেন www.icdbd.com/psdslice/images.zip থেকে। download করে এটিকেUnzipকরলে images নামে একটি Folder পাবেন। এবার কাজের প্রস্তুতি নিন।
আমাদের প্রথম কাজ Computer এর যেকোন Drive এ একটি Folder বানানো PSDHTMLনামে। তার পর তার মাঝে images এবং CSSনামে দুটি Folder বানান। এবার একটা HTML File বানাবো । ফাকা জায়গায় Right click করে New> Text document এclick করুন। একটি Text File তৈরী হবে । File টি Open করে নিচের কোর্ডগুলো লিখুনঃ
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="wrapper">
<div class="name">My HTML</div>
</div>
</body> </html>
কোর্ডগুলো লিখে Text File টিকে File>Save as click করে Save করুন। Save as Type দিবেন all files এবং File name দিবেন index.html তারপর Save button এclick এ পষরপশ করলে দেখবেন একটি HTML File তৈরী হয়ে যাবে।
আর একটি কাজ আজকে করব। একটা CSS File তৈরী করব CSS নামে Folder এর মধ্যে। লক্ষ্য করুন HTML Code এর মাঝে আপনি লিখছেন href="css/styles.css"> অর্থ্যাৎCSS Folder এর মাঝে style.css নামে একটা ফাইল থাকবে এবং এর সাথে HTML File এরLink থাকবে।
body {
background:#000000;
}
#wrapper {
width:800px;
height:400px;
background:#ffffff;
margin:0px auto;
}
.name {
color:green;
background:#cccccc;
font-size:30px;
}
পরিশেষে index.html File টি Double click করে খুললে দেখবেন একটি কালোBackground এর মাঝে সাদা একটা Rectangle (Wrapper div) এবং তার মাঝে সবুজ কালিতে লেখা ছাই রংয়ের Background (name div) এর উপর সবুজ লেখা My HTML
পাঠক এই পর্বে আপনি সফলভাবে HTML এবং CSS File তৈরী করে Link করতে শিখলেন। যাদের এখন্ও সমস্যা আছে তাদের জন্য আমি পুরো কাজটি করে রেখেছি। download করে নিবেনwww.icdbd.com/psdslice/psdhtml.zip - Link থেকে। পরের পর্বে গুলোকে সাজিয়েWebpage রুপে তৈরী করতে শিখবেন। এবং পাশাপাশি ক্রমান্বয়ে আপনি হয়ে উঠবেন HTML, CSS এর দক্ষ Programmer সবাই ভাল থাকবেন।
Firefox Gi bZzb †g¨vwRK
cig Ki“bvgq
Avjvni bv‡g ïi“ KiwQ| wcªq cvVK wbðq LyeB Avb›` I Dj¨‡mi mv‡_ KvwU‡q‡Qb mevB c~Rvi
QywUUv| wPš—vi welq GUvB †h ag© Ggb GKwU gva¨g hvi g‡a¨w`‡q gvb~l fy‡j hvq abx,
Mixe, †QvU, eoi †f`v‡f` ïay GUvB g‡bc‡o †h Avgiv mevB gvbyl| mwZ¨ gvb~l me
wKQyi D‡a© GB K_vwU eySv‡Z wM‡q Kwe e‡j‡Qb mevi Dci gvbyl mZ¨ Zvnvi Dc‡i bvB|
hvB †nvK Avi K_v bv evwo‡q P‡j hvB Avgv‡`i g~j Av‡jvPbvq|
hZ¸wj wd«! Browser Av‡Q eZ©gvb evRv‡i Zvi g‡a¨ GKwU RbwcÖq bvg n‡”Q Firefox| Firefox e¨venviKvix mviv we‡k¦ cÖvq 45%
†_‡K 60%| Avi Abvb¨ hviv Av‡Q Zviv Chrome, Opera, Suffery, Explorer e¨venvi K‡i| †h‡nZz mviv we‡k¦i †ekxi fvM †jvKB e¨venvi K‡i Firefox ZvB Avgv‡`i cy‡iv
UziUvB _vK‡Q Firefox †K wb‡q|
wKQyw`b Av‡M Firefox Gi Dci GKUv cÖwZ‡e`b †`‡L Avgvi g‡b nj †h GLv‡b †h welq¸‡jv Av‡mwb
ev Avbv nqwb wKš‘ Avwg †m welq¸wj Rvwb †Zv Avgvi GB Rvbv‡K ïay Rvb‡jB Pj‡e bv
eis Aci‡K Rvbv‡Z n‡e d‡j AvgviI B”Qv c~ib n‡e Avi Aci GKRbI G welq¸wvj Rvb‡Z
cvi‡e| Avgiv cy‡iv Firefox †K wb‡q Av‡jvPbv
Ki‡j †ekx `yi AvMv‡bv hv‡e bv ZvB Avgiv †h welq¸wj wb‡q Av‡jvPbv Kie Zv nj Firefox Gi K‡qKwU Add-Ons wb‡q Zvi g‡a¨ cÖ_‡gB _vK‡Q †h bvgwU †mwU nj Fire Bug| GwU GKwU PgrKvi
Uzjm&.. hvi Øviv me‡P‡q †ekx DcK…Z n‡Z cvi‡eb we‡kl K‡i Web
Developer iv| bv †`L‡j Avcwb nqZ wek¦vmB Ki‡Z cvi‡eb bv †h GUv
w`‡q GZ me PgrKvi KvR Kiv hv‡”Q, wek¦vm Ki‡eb ZLbB hLb Avcwb wb‡R KvR Ki‡eb Ges
Abyfe Ki‡eb PgrKvi GK Tools Gi ¯^v`| hvB †nvK Avgiv Rvwb †Kvb Website Gi Page Source †c‡Z
Avgiv hve n‡”Q View †_‡K Page Source wKš‘ Page Source Code cvIqvi
ci Avcwb †Kvb cÖKvi Change ev GwWU Ki‡Z cvi‡eb bv Website G¸‡j‡K
cÖ¶vš—‡i Firefox Gi c×Zx Zvi Dëv| Zvn‡j Avmyb †`Lv hvK wKfv‡e KvR K‡i
GB Tools Gi gva¨‡g| Z‡e g‡b ivL‡eb GB Change Kiv
wKš‘ Avmj Change Kiv bq eis GB Change n‡”Q Nywg‡q Nywg‡q mcœ †`Lvi gZ, †h hZ
fvj mcœB †nvK bv †Kb Nyg dziv‡jB mcœ ‡hgb †kl| †Zgwb AvcwbI
hw` cy‡iv Website Uv‡K Change Kivi ci GKevi Refresh Button G Pv‡cb Zvn‡j Zv
Av‡Mi gZ n‡q hv‡e| GUv †`Iqvi cÖavb GKUv D‡Ïk¨ nj Avcbvi Website ‡K hLb Avcwb Develop Ki‡eb ev Ab¨ †Kvb Website Gi KvR Ki‡eb ZLb GUv w`‡q KvR Ki‡j Avcbvi A‡bK myweav n‡e †hgb
Avgiv hLbB †Kvb Website Develop Kwi ZLb `iKvi nq
ev‡i ev‡i Prewiew K‡i †`Lvi, wVK ZLbB Avcwb GB Tools †K Abyef Ki‡eb | ai“b †Kvb Object ‡K Avgiv ïay HTML G Kj K‡i CSS Code Avcwb GLvb †_‡KB ‡mU
Ki‡Z cv‡ib †h GwU KZ Pixel Wv‡b, ev‡g, Dc‡i, ev wb‡P w`‡eb ev ivL‡Z Pvb Ges GLvbKvi djvdj cvIqvi ci GB gvb ewm‡q w`‡eb
Avcbvi †gBb CSS Code G Avmyb Zvn‡j †`Lv
hvK wKfv‡e Ki‡eb GB KvR¸wj| Zvi Av‡M Rvbv hvK †hme KvR Ki‡Z cvi‡eb
Avcwb GB Tools Gi gva¨‡g|
Ø ‡gBb KvR
‡hUv †mUv nj Avcwb GB Tools Gi gva¨‡g cy‡iv Website Gi Page Source Code cv‡eb |
Ø Lye mn‡R
Avcwb cÖwZwU Object †K Ly‡R †c‡Z cv‡ib| GLvb †_‡K Object Gi gvb
evwo‡q ev Kwg‡qI †`L‡Z cv‡ib|
Ø Object wU KZ Pixel Wv‡b, ev‡g, Dc‡i, ev wb‡P Av‡Q Zv Select K‡i w`‡Z
cv‡ib Avcwb GLvb †_‡KB|
Ø A¯’vqx
fv‡e cy‡iv Website †K Avcwb DjU cvjU K‡i w`‡Z cvi‡eb|
Ø Avjv`v
Avjv`v fv‡e cÖwZUv Language Gi Source Code cv‡eb |
Ø cy‡iv Website Gi Layout A_©vr
†c‡Ri Heidth, Width Kgv‡Z ev evov‡Z cvi‡eb Avcwb GLvb †_‡KB|
Ø me‡P‡q
gRvi welq n‡”Q Avcwb Lye mn‡RB †h †Kvb Object †K ai‡Z cvi‡eb ev Select Ki‡Z cvi‡eb
Element
bvgK Tools wUi gva¨‡g| Tools wU Select Kivi
c‡i †h Object wU Avcwb ai‡Z
Pvb ev Select Ki‡Z Pvb Object wUi Dc‡i ïay Mouse
Pointer Uv wb‡q Click Ki‡jB Object wU KZ bs jvB‡b Av‡Q, wK Zvi Kvjvi mKj ai‡bi
ˆewkó me wKQyB cvwbi gZ †f‡m DV‡e Avcbvi mvg‡b hv Ab¨fv‡e cv‡eb Avcwb A‡bK KvVLo
†cvov‡bi ci|
Ø Website Gi †h
†Kvb Object ‡K Search I Ki‡Z cv‡ib Avcwb GLvb †_‡KB|
mnR fv‡e
ejv ‡h‡Z cv‡i †h cy‡iv Website †K A¯’vqx fv‡e Change ev GwWU Ki‡Z cvi‡eb GB Tools wUi gva¨‡g|
Gevi Zvn‡j Avmyb wKfv‡e KvR¸‡jv Avcwb
wb‡R Ki‡eb|
wbðB Pvjy Av‡Q Avcbvi Internet
Connection ‡Zv Avi †`ix †Kb ?
Avmyb GZ¶Y †h gwnqvmx Tools Gi m¤ú©‡K Rvbjvg Gevi †`Lv hvK Zvi
Avmj †KivgwZ| Avcbvi Computer G hw` Mozila Firefox Install bv _v‡K
Zvn‡j `qv K‡i Install A_ev Download Ki“b GB
Website †_‡K www.mozilafirefox.org| Gevi Software wU Install nIqvi ci
Add-Ons wU cvIqvi Rb¨ cÖ_‡g Avgiv Firefox wU Open Kie Zvi
ci hve n‡”Q Tools †_‡K Add-Ons GLb Search G
wjLyb Fire Bug Zvici Search Button G Click Ki“b|
Gevi †`Lyb †cvKvi gZ A‡bK ¸wj Add-Ons Avcbvi mvg‡b
fvm‡Q GLvb †_‡K Avcwb †hUv Select Ki‡eb †mUv nj Fire Bug| Select Kivi ci Install Button G Click Ki“b Install †kl n‡q
†M‡j Firefox wU GKevi Restart Ki“b| Gevi †`Lyb Avcbvi Firefox Gi Window wUi me©
Wv‡b wb‡P †cvKvi gZ GKwU Add-Ons G‡m Rgv n‡q †M‡Q|
wb‡Pi Qwe‡Z ‡h AskwU
wPwýZ Kiv Av‡Q jvj e„ËvKv‡i|
wP‡Î Fire Bug Tools wU
†`Lv‡bv nj|
GUvB n‡”Q †mB Add-Ons Fire Bug| hvi
gva¨‡g Avgiv KvR ïi“ Kie Gi evwS©K †Pnviv GUvB| Pjyb Zvn‡j Gevi KvR ïi“ Kiv
hvK| cÖ_‡g Avcwb GUv‡K Open Ki‡eb Click A_ev F12 Press Gi gva¨‡g Open nIqv Window wUi me©
Dc‡i ev‡g GKwU Icon Av‡Q Av‡Mi †cvKvwUi gZB| GUv GK ai‡bi †gby hvi g†a¨
Av‡Q Avcwb wK wK KvR Ki‡Z cvi‡eb GB Icon Gi gva¨‡g Zvi GKwU ZvwjKv †`Iq Av‡Q| wØZxq‡Z
†h Icon wU i‡q‡Q †mwU nj Lye PgrKvi GKwU Tools hvi
gva¨‡g Avcwb A‡bK mn‡RB †h †Kvb Object †K mywbw`©ó fv‡e Select Ki‡Z cvi‡eb A_ev Object wU KZ
bs jvB‡b Av‡Q, wK Zvi Kvjvi mKj ai‡bi ˆewkó me wKQyB Avcwb GB Tools wUi
g‡a¨B cv‡eb| cÖ_‡g Tools wU‡K Select Ki“b Zvi ci Avcwb †h Object wU‡K ai‡Z ev Select Ki‡Z
Pvb †mB Object Gi Dc‡i Mouse Pointer wU wb‡q
hvb Ges Click Ki“b|
aivhvK Avwg GKUv Website Open Kijvg Avcbviv
Gi Av‡M QwewU‡Z †`‡L‡Qb †h Logo wUi wb‡P OPACE-Bangladesh GKUv
†jLv wQj †mUv‡K Avgiv Change K‡i Gevi wj‡LwQ AMAR-Bangladesh Ges Gi
Kvjvi wQj mvv` Avgiv ZvI Kv‡jv K‡i w`‡qwQ,, Gfv‡e AvcwbI Change Ki‡Z
cv‡ib Gi Kvjvi, d›U mvBR, d›U BZ¨vw`
wP‡Î
Change
K‡i †`Lv‡bv nj|
Gevi †`Lyb Gi Av‡M Avcwb †h Window wU Open
K‡iwQ‡jb †mB Window wU†Z wKQy Ask †jLv Select n‡q †M‡Q Ges Zvi wVK Wvbcv‡k Avjv`v Kjv‡g
Zvi wevfbœ ˆewkô †`Iqv Av‡Q ‡hgb Kvjvi, dvBj UvBc, cwRkb, d›U mvBR, e¨vKMÖDÛ,
÷vBj, nvBW, IqvBW, gvwR©b, BZ¨vw` AviwK †gvUvgywU dvB‡ji hZ ai‡bi ˆewkó Av‡Q
mKj ai‡bi ˆewkóB GLv‡b †`Lv‡e Avcwb B”Qv Ki‡jB GLvb †_‡K †h †Kvb wKQy †hgb
Kvjvi, cwRkb, d›U mvBR, e¨vKMÖDÛ, BZ¨vw` ˆewkó Change Ki‡Z ev GwWU Ki‡Z cv‡ib| Zvi ci †h wPý
`ywU Av‡Q †m¸‡jv nj GKwU Back Ges Ab¨wU Forward Gi gva¨‡g Avcwb ‡cQ‡b A_ev mvg‡bi G
†h‡Z cv‡ib| Gi c‡ii Option wU nj Command Gi Rb¨ Gi gva‡g Avcwb †`L‡Z cvi‡eb †h †Kvb jvB‡b wK
wK ai‡bi Command Kiv Av‡Q| Gi c‡i †h †QvU Arrow wPýwU
Av‡Q GUvi bvg nj Panel Selector GUvi gva¨‡g Avcwb †`L‡Z cvi‡eb Avjv`v
Avjv`v Language Gi Code †hUv Avcbvi `iKvi †mUv| Gi c‡i †h AckbwU
i‡q‡Q †mwU nj Search Option hvi gva¨‡g GLvb †_‡KB Avcwb Search Ki‡Z
cvi‡eb GB Website Gi me¸‡jv Object| Gi c‡i
†h wZbwU Button i‡q‡Q GB wZbwU Button Avgv‡`i mevi A‡bK cwiwPZ Zvi ciI Avwg
D‡jL K‡i †`B| cÖ_‡g †hUv Av‡Q †mUvnj Minimize Button A_©vr Window wU‡K
¶z`ª A_ev †QvU K‡i ivLvi Rb¨, wØZxqwU nj Open Firebug New Window †hUvi
gva¨‡g Avgiv Window Uv‡K Avjv`v K‡i †`L‡Z cvie Avi Z„ZxqwU nj Deactive
Firebug for this Website hvi gva¨‡g Avgiv GB Window Uv‡K Avgiv Deactive /
Close K‡i w`‡Z cvwi|
 |
wP‡Î wewfbœ Tools Gi
bv‡gi cwiwPwZ †`Lv‡bv nj
(wØZxq †iv Uv‡Z hv Av‡Q)
cÖ_‡g †hUv Av‡Q †mUvnj Break of
Mutate hvi gva¨‡g Avgiv `ywU cvkvcvwk Tag Gi g‡a¨ Mutate Ges Break Ki‡Z
cvwi| wØZxqwU nj Edit this HTML hvi gva¨‡g Avgiv GB
Website †K Edit Ki‡Z cvie | Avi Z„ZxqwU nj Body hvi
wfZ‡i jyKvB‡Zv Av‡Q Avgv‡`i cy‡iv Website Gi Page Source Code ¸‡jv
†mUv| Gi c‡i Av‡Q HTML Avgv‡`i cy‡iv Website Gi †eix‡KU A_©vr †c‡Ri Boundary A_ev
mxgvbv.. .. Ges me© Wv‡b Av‡Q CSS, Compute, Layout, Ges DOM
Gevi Window eÜ Ki‡Z Press Ki“b
me© Wv‡bi wb‡Pi †cvKvwU‡Z A_ev me© Wv‡bi Dc‡ii jvj Button U‡Z Avi
hw` ZvI bv nq Zvn‡j weKí e¨e¯’ wnmv‡e F12 Press Ki“b| Zvn‡j ‡`L‡eb M‡Z©i mvc †jR¸wU‡q
M‡Z©B w`‡KB †diZ hv‡”Q A_©vr Close n‡q †M‡Q|
mevB fvj _vKzb, my¯’ _vKzb GB KvgbvB
Kwi|
‡gvt
Kwei †nvmvBb
এতে সদস্যতা:
পোস্টগুলি (Atom)