আসসালামু আলাইকুম,
আজকে আবার আরেকটি ডায়নামিক এইচটিএমএল ওয়েবসাইট টেমপ্লেট নিয়ে এলাম আপনাদের জন্য সম্পূর্ণ বিনামুল্যে।
এর নাম সানরাইট। নামের কোনো মানেই নেই, পেছনের ব্যাকগ্রাউন্ড ইমেজের সাথে মিল রেখে নাম একটা দিয়ে দিয়েছি।
এইটিও সম্পূর্ণ ওপেন সোর্স টেমপ্লেট।
যেকোনো সফটওয়ার ওয়েবসাইটের জন্য আদর্শ টেমপ্লেট এইটি।
প্রথমে একটা স্টাইল ট্যাগের মাঝে আমি সিএসএস এপ্লাই করেছি। সেখানে এর পজিশন ফিক্সড করে স্থির রেখেছি। রাইট ০ পিএক্স দিয়ে ডান দিকে ০ পিক্সেল প্যাডিং, মানে কোনো ফাক না থাকার ব্যাবস্থা করেছি। টপ ৪০% দিয়ে উপর থেকে ৪০% নিচে নামিয়েছি। এতেই এটি পেজের ডান পাশে মাঝামাঝি অংশে ভেসে থাকে বা ফ্লোট করে। বর্ডার রেডিয়াস ১০ পিএক্স দিয়ে বর্ডার গোলাকার করেছি। প্যাডইং ১০পিক্স ১৫পিএক্স দিয়ে মাঝের কন্টেন্ট মারজিন করেছি। ব্যাকগ্রাউন্ড কালারে আরজিবিএ এপ্লাই করে অর্ধ স্বচ্ছ রঙ এপ্লাই করেছি। হাইট ৭০পিক্সেল রেখেছি।
এবার আমরা একটা বেসিক পোর্টফলিও সাইট করে দেখবো।তো যারা জানো তারা জানো, যারা জানো না তারা তাদের এডিটর খুলো প্লিজ।
যেকোনো এডিটর ইউজ করা যেতে পারে, যার যেটা ভালো লাগে। আমি এনপিপি ইউজ করি :)
এবার আমরা তাহলে শুরু করি। আবার বলে রাখি, পোস্টটি নতুন্দের জন্য।
আমাদের আজকের প্রোজেক্টের ডেমো এবং কোডের ডাউনলোড লিঙ্ক পোস্টের একেবারে শেষে দেওয়া হয়েছে :)
প্রথমে একটা এইচটিএমএল ফাইল তৈরি করো, আমাদের একটা ডিরেক্টরি প্রয়োজন হবে। যারা লোকালহোস্ট দিয়ে কাজ করবে, তারা ইনডেক্স নাম দিয়ে করলে সুবিধা পাবে।
তো আমি ইনডেক্স ফাইলে প্রয়োজনীয় মেটা ট্যাগ দিয়ে নিচ্ছি, এখানে কেবল ব্যাসিক দেখাবো বলে কেবল দুইটি মেটা ট্যাগ দিচ্ছি। এর পরের পর্বে আরও কিছু দেখানো হবে :)
প্রশ্ন করতে পারো যে, আমি কেনো আবার ইমেজ কন্টেইনার নামে আবার আরেকটা ডিভিশন তৈরি করেছি। এটা বাদ দিলেও তো হতো... আচ্ছা, বাদ দিয়ে দেখ। এটা তোমার পোর্টফলিও ইমেজ গুলোকে রেস্পন্সিভ করে এবং অভারফ্লো দেখাতে দেয় না। ফলে আমরা একটা ক্লিন ডিজাইনের পোর্টফলিও দেখতে পাই।
এবার তোমরা চাইলে প্রোজেক্টের ফাইল ডাউনলোড করে নিতে পারো বা এখানে এই লিঙ্ক থেকে ডেমো দেখে নিতে পারো। এরপরের পর্বে তোমাদের আমার ডিজাইন করা টেম্পলেটটি দেবো এবং শিখিয়ে দেবো কিভাবে প্রফেশনাল এইচটিএমএল পোর্টফলিও টেম্পলেট ডিজাইন করা।
তাই আমার সাথেই থাকো। আমার সাথে অথবা আমাদের ফেইসবুক পেইজে লাইক অথবা ফলো দিয়ে একটিভ থাকো, তবে আমি ফেইসবুক পোস্টের মাধ্যমে তোমাদের নোটিফাই করতে পারবো।
কেমন আছো সকলে? পড়াশোনায় ব্যাস্ত থাকায় ব্লগপোস্ট করা নিয়মিত হয়ে ওঠে না।
এই ওয়েব ডিজাইন পোস্ট সিরিজে তোমাদের আমি পোর্টফলিও ওয়েবসাইট ডিজাইন সম্পর্কে ব্যাসিক এবং প্রফেশনাল দুইটি অংশ সম্পর্কে সম্যক ধারণা দেবো এবং টিউটোরিয়াল দেখাবো। এছাড়া তোমরা আমার একটি পোর্টফলিও ওয়েবসাইটের এইচটিএমএল টেম্পলেট বিনামুল্যে পাবে এই সিরিজে! :)
ব্রিফকেসের মাঝে যেরকম নানা রকম ফাইল সাজানো গোছানো থাকে, সেরকম ব্যাবস্থাকেই বলা হয় পোর্টফলিও।
আর এভাবে আমাদের কোনো কাজ সুন্দর করে সাজিয়ে ভিজিটর বা ক্ল্যায়েন্টের সামনে উপস্থাপন করার জন্য যে ওয়েবসাইট ডিজাইন করা হয় তাকে পোর্টফলিও ওয়েবসাইট বলে।
পোর্টফোলিও ওয়েবসাইট হচ্ছে এমন একটি ওয়েবসাইট যা একজন ব্যক্তির অথবা প্রতিষ্ঠানের গুন এবং কর্মসূচীগুলো বিশ্বের সকলের কাছে সহজে সুন্দরভাবে উপস্থাপন করার সুযোগ করে দেয়। সেই ওয়েবসাইটের মালিকানাধিন কোম্পানি হতে পারে গ্রাফিক ডিজাইন টিম, এনিমেশন স্টুডিও, ওয়েব ডেভেলপার টিম কিংবা যে কোন সংগঠন।
আবার ব্যাক্তিগতপোর্টফোলিও ওয়েবসাইট হল এমন একটি ওয়েবসাইট যা একজন ব্যক্তির গুন এবং কর্মসূচীগুলো বিশ্বের সকলের কাছে সহজে সুন্দরভাবে উপস্থাপন করার সুযোগ করে দেয়। সেই ওয়েবসাইটের মালিকানাধিন ব্যাক্তি হতে পারে গ্রাফিক ডিজাইনার, অ্যানিমেটর, ওয়েব ডেভেলপার, লেখক কিংবা যে কেউ।
Portfolio Website
এখন বলি, পোর্টফোলিও কেন করা হবে।
আসলে একজন ভিজিটর অথবা ক্লায়েন্ট কোনো ওয়েবসাইটের কভার পেইজে লেখা আর্টিকেল কিংবা সার্টিফিকেট দেখতে চায় না। কারন এতকিছু দেখার সময়ও তাদের হাতে থাকে না এবং তারা অধৈর্য হয়ে পরে।
তারা দেখতে চায় তুমি কি কাজ করো, কেমন করে করো।
সেটাই যদি তুমি তোমার ওয়েবসাইটে তুলে ধরতে পারো তবেই নানা রকম বেনিফিটপূর্ণ কাজ পাবার সম্ভাবনা অনেক বেড়ে যায়।
একটা পোর্টফলিও সাইটে কি কি থাকতে পারে,
তুমি যেসব প্রোজেক্ট করেছ সেই সব প্রোজেক্টের লিষ্ট
প্রোজেক্টের ছবি
কাজের ক্ষুদ্র বর্ণনা
কাজের রেইট এবং ফিস
আগামি পর্বেই শুরু হবে টিউটোরিয়াল। তাই, স্টে টিউন্ড ;)
প্রায়ই নানা ব্লগার টেম্পলেটের ওয়েবসাইটে ঘোরার সময় আমার ইউজারদের ফিডব্যাক বা কমেন্ট সেকশনে চখ পড়ে। সেখানে অনেকের প্রশ্নের একটা বড় অংশ হল, টেম্পলেটের নিচের ফুটার রিমুভ করলে নাকি ডেভেলপার পেইজে রিডাইরেক্ট হয়ে যায়। এটা সত্য যে ডেভেলপারদের ক্রেডিট মোছা উচিত নয়। কিন্তু অনেকেই ব্লগের সৌন্দর্যের(!) কথা চিন্তা করে এটা রিমুভ করার চেস্টা করি। আবার অনেকে লিঙ্ক বা নাম বদলে দেই, এতেও রিডাইরেক্ট হতে থাকে।
আসলে, যারা নতুন ব্লগার, ব্লগিং লাইনে বেশিদিন নেই, তারা ফ্রি টেম্পলেটের স্থলে প্রিমিয়াম টেম্পলেট ইউজ করতে যায়। এবং অনেকে কোনো কারন ছাড়াই ফুটার ক্রেডিট রিমুভ করে দেয়। এটা অনৈতিক। কিন্তু ব্লগের ভেতরে কমেন্টে ডেভেলপারের নাম রেখে ফুটার রিমুভ করা যেতে পারে।
কিভাবে রিমুভ করবেন?
আসলে, এই লিঙ্কগুলো জাভাস্ক্রিপ্ট দিয়ে প্রোগ্রাম করা থাকে। জাভাস্ক্রিপ্ট চেক করে দেখে তার কাছে দেওয়া ভেরিয়েবল নেইম এবং ইউআরএল এর সাথে ফুটার ক্রেডিটের মিল আছে নাকি। না থাকলে সে রিডাইরেক্ট করে দেয়।
জাভাস্ক্রিপ্টাকে খুজে বের করে রিমুভ করা কষ্টসাধ্য এবং সময় সাপেক্ষ কাজ এবং অনেক ক্ষেত্রে অসম্ভব। কারন হয়তো জাভাস্ক্রিপ্টগুলো এনকোড করা থাকে, এতে খুজেই পাওয়া যায় না।
কিন্তু আমরা একটা সিএসএস এপ্লাই করে ২ মিনিটেই এটা রিমুভ করতে পারি।
প্রথমে ব্লগার ডট কমে যান।
ব্লগার প্রোফাইলে গিয়ে কাঙ্ক্ষিত ব্লগে যান।
এবার Dashboard > Template > Edit HTML.এ যান।
এবার credit/footer link খুজে বের করুন। আপনি Copyright, credit or designed এজাতীয় লেখা খুজে পেতে পারেন। (নিচে নমুনা)
.
.
