বর্তমান সময়ে একটা ওয়েব সাইট সুধমাত্র তথ্য প্রকাশের সার্বজনীন মাধ্যমই নয় বরং শিক্ষা, বিনোদোন, যোগাযোগ, ব্যবস্যা-বাণিজ্য, বিজ্ঞাপনের অন্যতম মাধ্যমে পরিণত হয়েছে। তাই একটি ওয়েব সাইটকে সুন্দরভাবে উপস্থাপনার প্রয়োজনীয়তা দিন দিন বেড়েই চলেছে।
ওয়েব সাইট ডিজাইন সম্পর্কে কিছু কথা
একটা সময় ছিল যখন শুধু মাত্র HTML দিয়েই একটি ওয়েব সাইট ডিজাইন করা হত কিন্তু সে প্রেক্ষাপট পাল্টেছে, স্ট্যাটিক ওয়েব সাইটের পরিবর্তে একটা সময় এসে সবাই ডাইনামিক ওয়েব সাইটের প্রয়োজণীয়তা অনুভব করে। PHP, ASP এর মত ল্যাঙ্গুয়েজ গুলো মানুষের প্রত্যাশা পূরণ করে। এতে করে একটা সাইটের পেজ গুলো আরো বেশি ব্যবহার বান্ধব হয়ে ওঠে। খুব সহজেই এ সকল সাইটে নতুন তথ্য যুক্ত করা যায় বলে ক্রমেই জনপ্রিয়তা লাভ করে। কিন্তু মানুষের চাহিদা এখানেই সীমাবদ্ধ থাকেনি প্রায় প্রতিদিনই নতুন নতুন কৌশল তৈরি হচ্ছে, কিভাবে একটা ওয়েব পেজকে আরো বেশি তথ্য বহুল, আকর্ষণীয়, আরো বেশি ব্যবহার বান্ধব করা যায়।
টেমপ্লেট কি ?
আমরা নিজেদেরকে সুন্দর করে উপস্থাপন করা জন্য সুন্দর সুন্দর পোশাক পরে থাকি, ভাল কসমেটিক্স ব্যবহার করে থাকি। পোশাক পরিবর্তন করলেই আমাদের প্রকাশের ভঙ্গিও পরিবর্তন হয়। আমরা যখন অফিসে যাই তখন এক ধরণের পোশাক পরি আবার যখন খেলার মাঠে যাই তখন অন্য ধরণের পোশাক পরি। আমাদের পোশাক পরিচ্ছদ আমাদের কাজের ধরণ প্রকাশ করে। ঠিক একটা ওয়েব সাইটের টেমপ্লেটও পোশাক সদৃশ। বর্তমানে প্রায় সকল সাইটেই টেমপ্লট ব্যবহার করা হয়। অর্থাৎ সাইটের কন্টেন্ট থেকে সাইটের ডিজাইনকে আলাদা রাখা হয়। সহজেই টেমপ্লেট পরিবর্তন করে সাইটের ডিজাইন এবং ইউজার ইন্টারফেস পরিবর্তন করা যায়। আবার প্রতিটা টেমপ্লেট কোনটা কোন ধরণের সাইট তা প্রকাশ করে।
টেমপ্লেট ডিজাইন
একটা ভাল সাইটের জন্য একটা ভাল মানের টেমপ্লেট অপরিহার্য। বর্তমানে CSS3, JavaScript, J Query, Ajax এর মত নতুন ল্যাঙ্গুয়েজ গুলো ওয়েব ডিজাইনার ও ডেভলপারদের সৃজনশীলতা প্রকাশের নতুন দিগন্ত তৈরি করেছে।
টেমপ্লেট ডিজাইন এর বিভিন্ন পর্যায়
- ডিজাইনিং
যদি একটা ওয়েব সাইটের টেমপ্লেট তৈরির প্রক্রিয়া খেয়াল করা হয় তাহলে দেখা যায়, প্রথমে ফটোসফ, ইলাসট্রেটর অথবা ফায়ারওয়ার্কস এর মত গ্রাফিক্স সফটওয়্যারের সাহায্যে প্রথমে ওয়েব পেজগুলোর জন্য ডিজাইন তৈরি করা হয়। লেখা গুলোকে সুন্দরভাবে উপস্থাপন করার জন্য টাইপোগ্রাফির সাহায্য নেয়া হয়। সচরাচর PSD ফরমেটে ডিজাইন তৈরি করা হয়। একটা পেজের উপাদান হিসেবে হেডার, নেভিগেশন বার, লোগো, বিভিন্ন বাটন, ব্যানার ইত্যাদি সহ একাধিক প্যারাগ্রাফ সাইডবার সবই তৈরি করা হয়, বিভিন্ন রং গ্রেডিয়েন্ট আর বিভিন্ন ধরণের গ্রাফিক্যাল টেকনিক এবং ইফেক্টের মাধ্যমে। একটি ভাল ডিজাইন তৈরি জন্য একজন ভাল গ্রাফিক্স ডিজাইনার হওয়াই যথেষ্ঠ নয়। ওয়েব পেজে বিভিন্ন উপাদানের জন্য আলাদা আলাদা লেয়ারে এবং গ্রুপে ভাগ করার বিষয়টিও খুবই গুরুত্বপূর্ণ।
ফটোশফ ছাড়াও ফ্লাসের মাধ্যমেও ওয়েব পেজের এক বা একাধিক উপাদানের ডিজাইন এবং এনিমেশন তৈরি করা যায়। এমন ওয়েব সাইটও আছে যা শুধুমাত্র ফ্লাস দিয়েই সম্পূর্ণ অংশ ডিজাইন করা
- স্লাইসিং
ডিজাইন তৈরির পর প্রত্যকটি উপাদানকে আলাদার করার জন্য ফটোসফের স্লাইস টুল অথবা ক্রপ টুলের সাহায্য নেয়া হয়। একটা টেমপ্লেটের ইমেজগুলোকে সাধারণত একটা ফাল্ডারের মধ্যে রাখা হয় এবং ব্যবহারের সুবিধার্থে বিভিন্ন নাম দেয়া হয়।
- কোডিং ডিজাইনিং এবং স্লাইসিং এর পর কোডিং এর পর্যায়। সাধারণত HTML ব্যবহার করে টেমপ্লেট এর কোডিং করা হয় আর কাঠামো বা স্টাইল তৈরি করা হয় CSS দ্বারা। অবশ্য বর্তমান সময়ে CSS3 শুধুমাত্র কাঠামো তৈরি মধ্যেই সীমাবদ্ধ নেই। কালারিং, বিভিন্ন ইস্পেশাল ইফেক্ট তৈরির জন্যও CSS ব্যবহার করা হয়। JavaScript, J Query, Ajax এর মত নতুন নতুন কৌশল গুলোর মাধ্যমে নেভিগেশন বার, লগ ইন বক্স, ফ্রম সাইড বার, ফিচার আর্টিকেল, ইমেজ স্লাইডিং, পোর্টফোলিও পেজ, ইমেজ গ্যালারি, পপ আপ বক্স ইত্যাদিতে ইস্পেশাল ইফেক্ট যুক্ত করে টেমপ্লেটকে আরো আকর্ষণীয় এবং ব্যবহার বান্ধব করে তোলা হয়। টেমপ্লেটের বেশির ভাগ অংশের কালার গ্রেডিয়েন্ট, বর্ডার, ব্যকগ্রাউন্ড ফটোসফের গ্রাফিক্সকে CSS কোডিং এ কনভার্ট করে তৈরি করার চেষ্টা করা হয়। এতে করে টেমপ্লেটের ওয়েট কমে যায়। কখনো কখনো ইমেজ রিপিটেশন ব্যবহার করেও ওয়েট কমানোর চেষ্টা করা হয়।
………………………………………………………………………………..
আজ এখানেই শেষ করছি। সবার জন্য শুভকামনা রইল ।
খুবই কাজের একটা পোস্ট আনেক ধন্যবাদ কুমার ভাই
রাসেল ভাই আপনাকেও ধন্যবাদ, শুভ কামনা রইল।
খুবই ভালে্া লাগলো , টেমপ্লেট ডিজাইন নিয়ে ধারাবাহিক পোষ্ট পেলে উপকৃত হতাম।
সহমত 🙂
তথ্যসমৃদ্ধ পোষ্ট। ধারাবাহিক লিখা চাই চাই চাই !!!!!! 😀
It is nice topics thanks for your good topics
WordPress template বানানো শিখতে চাই। দয়া করে ইনফরমেশন দিবেন।
Awesome post with nice explanation. Thanks for sharing this nice post.
Thank you for this tutorial.