জনপ্রিয় ই-মেইল ইয়াহু, এমএসএন বা জিমেইলের মতো মেসেঞ্জারে নিজের অবস্থা Available থেকে Away, Invisible বা অফলাইনে পরিবর্তন করা যায়। তাত্ক্ষণিক বার্তা আদান-প্রদান (চ্যাট) করার সময় এগুলো ব্যবহার করে বিশেষ কিছু সুবিধাও পাওয়া যায়। যেমন Invisible মোডে থাকার সময় আপনি অনলাইনে থেকে অন্যদের অবস্থা দেখতে পাবেন। কিন্তু অন্যরা বুঝবে না যে আপনি অনলাইনে রয়েছেন। ফেসবুকে চ্যাট করার সময় এমন কোনো অপশন পাওয়া যায় না, সেখানে কেবল অনলাইন এবং অফলাইন নামে দুটি মোড থাকে। ফেসবুকের Online Now (http://www.facebook.com/apps/application.php?id=29197096351) প্রোগ্রামটি Invisible মোডের মতো কাজ করে। এটি ব্যবহার করে অফলাইনে থাকা কোনো ব্যবহারকারী সহজেই জানতে পারবেন অন্য কোনো ব্যবহারকারী এখন অনলাইনে রয়েছেন।
লেবেলসমূহ: Chat tips
GIF এনিমেশন তৈরিতে ব্যবহৃত একটি অসাধারন সফটওয়্যার Macromedia Fireworks । এর মাধ্যমে খুব সহজে ওয়েবসাইটে ব্যবহার উপযোগী এনিমেশন তৈরি করা যায়। আজ আমরা Macromedia Fireworks ব্যাবহার করে নিচের এনিমেশনটি তৈরি করব।
প্রথমে Macromedia Fireworks ওপেন করে 250 pixels by 250 pixels এর একটি নতুন ডকুমেন্ট তৈরি করতে হবে। ব্যকগ্রাউন্ড কালার বা canvas color custom সিলেক্ট করে #000000 বা কাল কালার নির্বাচন করতে হবে।
এখন Tool bar থেকে text tool বা A চিন্হিত tool টি সিলেক্ট করে যে লেখাটি এনিমেশন করতে হবে তা লেখতে হবে। আমি এখানে WELCOME TO TUTORIALBD.COM লেখাটিকে এনিমেশন করার জন্য নিয়েছি। এর পরিবর্তে যে কোন লেখা নেয়া যেতে পারে। তবে খেয়াল রাখতে হবে লেখাটি যেন কাল ব্যকগ্রাউন্ডের ঠিক মাঝখানে থাকে। আমি Text size 25 pixels নিয়েছি, ইচ্ছা অনুযায়ী নেয়া যাবে। Text color হিসেবে আমি #FF0066 বা পিংক কালার এবং Text font হিসেবে Aharoni নিয়েছি এক্ষেত্রেও যে কোন সুন্দর font ও আকর্ষনীয় color নির্বাচন করা যেতে পারে।
এখন যে লেখাটিকে এনিমেশন করতে হবে সে লেখাটি সিলেক্ট করে Modify মেনুতে ক্লিক করে Animation সিলেক্ট করে Animate slection এ ক্লিক করলে Animate slection উইন্ডো আসবে।
Animate slection উইন্ডো থেকে Frames – 30 , Move – 0 , Direction – 0 , Scale to – 100 , Opacity - 0 to 100 , Rotate – 360 , এবং CW সিলেক্ট করে Ok বাটন চাপ দিলে এনিমেশনটি তৈরি হয়ে যাবে।এখন Play/stop বাটনে চাপ দিয়ে এনিমেশনটি দেখা যাবে। Animated ZIF হিসেবে এনিমেশনটির Output file তৈরির জন্য File মেনুতে ক্লিক করে Save as এ ক্লিক করতে হবে। এর পর উপযুক্ত File name দিয়ে Save as type হিসেবে Animated ZIF সিলেক্ট করে Save বাটনে চাপ দিলে Output ফাইলটি তৈরি হবে। যা আমাদের ওয়েব সাইটে ব্যবহার করে ওয়েব সাইটকে সমৃদ্ধ করতে পারি। এভাবে তৈরি এনিমেশনকে আমরা বাটন হিসেবেও ব্যবহার করতে পারি।
লেবেলসমূহ: photoshop tips, website making
পৃথিবীতে এমন কোন ওয়েব ডিজাইনার খুজে পাওয়া বেশ কষ্টই হবে যিনি ফটোশপ ব্যবহার করেন না। ওয়েব ডিজাইনারদের কাছে ফটোশপ ঠিক এতটাই জনপ্রিয়। যা হোক আমদের যে কেও নিজের জন্য হোক বা অন্যের জন্য হোক ওয়েব ডিজাইন করতে গিয়ে প্রথমেই যে বিষয়টি ভাবতে হয় তা হল ওয়েব সাইটের জন্য একটি আকর্ষনীয় হেডার তৈরি করা । যা ওয়েবসাইটের প্রাথমিক পরিচয় বহন করে। এখন আমরা কিভাবে ফটোশপ ব্যবহার করে একটি আকর্ষনীয় হেডার তৈরি করা যায় তা দেখব।
প্রথমে Adobe Photoshop CS4 ওপেন করে 1000 pixels by 175 pixels এর একটি নতুন ডকুমেন্ট তৈরি করতে হবে। Background Contents : White এবং Resolation : 72 রাখতে হবে।
এখন একটি নতুন Layer নিয়ে ground নাম দিতে হবে এবং keyboard হতে U press করে Rectangle Tool টি নির্বাচন করতে হবে। এরপর সম্পূর্ণ ডকুমেন্ট জুড়ে একটি Rectangle তৈরি করতে হবে। তারপর ground Layer টির উপর ডাবল ক্লিক করে Layer Style উইন্ডোতে প্রবেশ করে এখান থেকে Gradient Overlay তে টিক চিহ্ন দিয়ে Gradient লেখা কালার বক্সটিতে ক্লিক করে Gradient editor উইন্ডোতে প্রবেশ করতে হবে। Gradient editor এর বাম দিকের Color stop #333333 এবং ডান দিকের Color stop #000000 নির্বাচন করি সব শেষে OK বাটনে ক্লিক করতে হবে।
এখন keyboard হতে B press করে Brush Tool টি নির্বাচন করে এর Size: 900 pixels করে দিতে হবে। এরপর brush নামে একটা Layer নিয়ে আমরা যে Rectangle নিয়েছি তার ঠিক মাঝখানে একটা ক্লিক করতে হবে ।সবকিছু ঠিক থাকলে আমাদের কাজটি দেখতে নিচের ছবির মত হবে।
এখন navigation নামে নতুন একটা Layer নিয়ে সেখানে নিচের ছবির মত Rectangle তৈরি করতে হবে।
navigation Layer এর উপর ক্লিক করে Layer Style উইন্ডোতে প্রবেশ করে এখান থেকে Blend Mode এর পাশের কালার বক্স থেকে Color: #000000 বা Black করে দিতে হবে। এরপর নিচের চিত্র অনুযায়ী Drop shadow ইফেক্টের জন্য সেটিংস নির্বাচন করে OK বাটনে ক্লিক করতে হবে।
সব কিছু ঠিক থাকলে আমাদের করা কাজটি নিচের মত দেখাবে।
navigation Layer এ আমরা যে Rectangle তৈরি করেছিলাম glass নামে নতুন একটি layer নিয়ে তার অর্ধেক চওড়া এবং একই দৈর্ঘ্যের অপর একটি Rectangle তৈরি করতে হবে। এরপর Glass Layer এর উপর ক্লিক করে Layer Style উইন্ডোতে প্রবেশ করে এখান থেকে Color Overlay তে color #ffffff বা White করে দিতে হবে এবং Opacity 25% করে দিতে হবে । এ অবস্হায় নিচের মত দেখাবে।
Text নামে নতুন একটি Layer নিয়ে এখন keyboard হতে T press করে Type Tool টি নির্বাচন করে আমাদের প্রয়োজন অনুযায়ী HOME,ABOUT US,CONTACT US,NEWS,SERVICE,PRODUCTS ইত্যাদি প্রত্যেকটার মাঝে ২ টা করে Tab পরিমান Space দিয়ে F0nt :Times New Roman, Font size: 22 Pixelএবং Font color: White নির্বাচন করে লেখতে হবে। আমরা নিচের ছবির মত
দেখতে পাব।
লেবেলসমূহ: Internet tips, photoshop tips
ফটোশপ দিয়েই তৈরি করি নিজের ওয়েব সাইটের হেডার ।- (১ম অংশ) আমরা যেখানে শেষ করেছিলাম তা ছিল নিচের মত।
এখন home নামে নতুন একটি Layer নিয়ে নিচের ছবির মত Rectangle তৈরি করতে হবে। এবং এর color: #119a02 বা Green করে দিতে হবে। আমরা এখন নিচের ছবির মত দেখতে পাব।
এখন আমাদেরকে home Layer টিকে সবার উপর থেকে নামিয়ে glass Layer এবং navegation Layer দুটির ঠিক মাঝখানে স্থাপন করতে হবে। এরপর home Layer টিতে Outer glow ইফেক্ট দেওয়ার জন্য home Layer টির উপর ডাবল ক্লিক করে Layer Style উইন্ডো থেকে নিচের ছবির মত করে সেটিংস্ নির্বাচন করতে হবে।
inner glow ইফেক্ট দেওয়ার জন্য Layer Style উইন্ডো থেকে নিচের ছবির মত করে সেটিংস্ নির্বাচন করতে হবে।
এর পর OK বাটনে ক্লিক করলে আমাদের কাজটি নিচের ছবির মত দেখাবে।
er" src="http://tutorialbd.com/bn/wp-content/uploads/2009/11/glow-efect.png" alt="glow-efect" width="750" height="134">
লেবেলসমূহ: photoshop tips, website making
ফটোশপ দিয়েই তৈরি করি নিজের ওয়েব সাইটের হেডার।- (২য় অংশ) শেষে আমাদের কাজটি ছিল নিচের ছবিটার মত।
এ পর্যায়ে আমাদেরকে name নামে নতুন একটি layer নিয়ে এখন keyboard হতে T press করে Type Tool টি নির্বাচন করে Site name টি লেখতে হবে যেখানে F0nt: Engravers MT , Font size: 72 Pixelএবং Font color: #000000 বা Black নির্বাচন করে দিতে হবে। এ পর্যায় শেষে আমরা আমাদের সাইটের হেডারটি নিচের মত দেখাবে।
এখন name Layer টিতে Bevel and Emboss ইফেক্ট দেওয়ার জন্য আমাদেরকে name Layer টির উপর ডাবল ক্লিক করে Layer Style উইন্ডো থেকে নিচের ছবির মত করে সেটিংস্ নির্বাচন করতে হবে।
এবার Inner glow ইফেক্ট দেওয়ার জন্য Layer Style উইন্ডো থেকে নিচের ছবির মত করে সেটিংস্ নির্বাচন করতে হবে।
এবার Outer glow ইফেক্ট দেওয়ার জন্য Layer Style উইন্ডো থেকে নিচের ছবির মত করে সেটিংস্ নির্বাচন করতে হবে।
সবকিছু ঠিক থাকলে হেডারটা নিচের মত হবে।
লেবেলসমূহ: photoshop tips, website making
ফটোশপ দিয়েই তৈরি করি নিজের ওয়েব সাইটের হেডার ।- (৩য় অংশ) আমরা যেখানে শেষ করেছিলাম তা ছিল নিচের মত।
এখন আমরা আমাদের Site name কে আরও আকর্ষণীয় করার জন্য name নামে যে Layer টি নিয়েছিলাম তার উপর মাউসের রাইট বাটন ক্লিক করে Duplicate layer এ ক্লিক করতে হবে। Duplicate layer উইন্ডোতে Duplicate layer এর নাম shadow name দিতে হবে। shadow name Layer টি সিলেক্ট থাকা অবস্থায় Keyboard হতে ctrl + T প্রেস করতে হবে এবং menu ber এর নিচে থাকা Option ber এ নিচের ছবির মত সেটিংস্ নির্বাচন করে Enter প্রেস করতে হবে। Layer এর Opacity 40% করে দিতে হবে।
এরপর Filter মেনু থেকে Blur এবং এরপর Gaussian Blur এ ক্লিক করলে Gaussian Blur উইন্ডো Open হবে এখান থেকে Radius : 1.0 করে OK বাটনে ক্লিক করতে হবে। এরপর হেডারটি দেখতে নিচের চিত্রের মত হবে।
এখন আমরা welcome নামে নতুন একটা Layer নামে নতুন একটি layer নিয়ে এখন keyboard হতে T press করে Type Tool টি নির্বাচন করে নিচের ছবির মত Welcome to our web site. বা অন্য যে কোন একটি তথ্য লেখতে হবে যেখানে F0nt: Footlight MT Light , Font size: 30 Pixel এবং Font color: #000000 বা Black নির্বাচন করে দিতে হবে।
welcome Layer টিতে Bevel ইফেক্ট দেওয়ার জন্য আমাদেরকে welcome Layer টির উপর ডাবল ক্লিক করে Layer Style উইন্ডো থেকে নিচের ছবির মত করে সেটিংস্ নির্বাচন করতে হবে।
Gradient Overlay , Bevel and Emboss, Drop shadow, Inner Shadow, Outer Glow ইফেক্ট গুলো দেওয়ার জন্য বারতি কোন পরিবর্তন করতে হবে না Selection Button গুলাতে শুধু টিক চিহ্ন দিয়ে দিলেই সুন্দর ইফেক্ট পরবে। কারো ইচ্ছা হলে একটু পরিবর্তন করে দিলেও ভালই হবে। যা হোক সব শেষে আমরা আমাদের পূর্ণাঙ্গ হেডারটিকে নিচের মত দেখতে পাব।
লেবেলসমূহ: photoshop tips, website making
১.১) ওয়েব সার্ভার সেটাপ
১.২) পিএইচপি সেটাপ
১.৩) ডাটাবেস সার্ভার সেটাপ
১.১) ওয়েব সার্ভার সেটাপ
পিএইচপি শিখতে হলে তোমার পিসিতে পিএইচপি ইনস্টল করে নিতে হবে। আর পিএইচপি চালানোর জন্য আমাদেরকে প্রথমে একটি ওয়েব সার্ভার ব্যবহার করতে হবে। এই ক্ষেত্রে আমরা অ্যাপাচি ওয়েব সার্ভার ব্যবহার করবো। চলো তা হলে প্রথমে আমরা অ্যাপাচি ওয়েব সার্ভার সেটাপ করি-
প্রথমে অনলাইন থেকে অ্যাপাচি ওয়েব সার্ভার ডাউনলোড করে নিতে এই লিঙ্কে যাও- Click This Link । এখান থেকে MSI Installer Package টি (যেমন, win32-x86-no_ssl.msi) ফাইলটি নামিয়ে নাও। এবার সাধারণ সফটওয়্যার সেটাপ করার মত করে সেটাপ শুরু করো। ইনস্টলারটি তোমার কাছে কিছু তথ্য(Server Information) জানতে চাইবে। নিচের মত করে তথ্যগুলো পুরণ করে নিতে হবে-
Server Information
Network Domain: localhost
Server Name: localhost
Admin Email: (your any email)
এবার for All Users, on Port 80, as a Service সিলেক্ট করে Next এ ক্লিক করো।
পরের বিষয়গুলোতে যেমন আছে তেমন রেখে Next করে যাও। Destination Folder হিসাবে সরাসরি C:\ ড্রাইভ ব্যবহার করা ভাল। তা হলে আমাদের অ্যাপাচি সার্ভার লোকেশন হবে C:/Apache2.2. Finish বাটনে ক্লিক করার সাথে সাথে তোমার অ্যপাচি সার্ভার চলতে শুরু করবে। সিস্টেম ট্রে তে লক্ষ করো অ্যাপাচির প্লে বাটনের মত আইকনটি() দেখা যাচ্ছে। অ্যাপাচি বন্ধ করার পর ঐ আইকনটি দেখতে স্টপ সাইনের মত হবে ()। ঐ আইকনে ক্লিক করে খুব সহজেই তুমি অ্যাপাচি সার্ভারটি চালু করতে বা বন্ধ করতে পারবে।
অ্যাপাচি ঠিকমত চলছে কিনা বুঝতে হলে ব্রাউজার ওপেন করে এড্রেসবারে http://127.0.0.1/ বা http://localhost/ লিখো। সবকিছু ঠিকঠাক থাকলে ব্রাউজারে ‘It works!’ লেখা একটি খালি পেজ দেখতে পাবে।
ডকুমেন্ট রুট(DocumentRoot ):
ওয়েব সার্ভার সেটাপ সম্পন্ন হওয়ার পর তাতে সাইট রাখার জন্য যে ফোল্ডারটি ব্যবহৃত হয় তাকে বলে DocumentRoot বলা হয়। তুমি যদি C:/Apache2.2 এ তোমার সার্ভার সেটাপ করে থাকো তা হলে তোমার DocumentRoot হবে C:/Apache2.2/htdocs লোকেশনে। তুমি চাইলে httpd.conf ফাইল থেকে পরিবর্তন করে যেকোন ড্রাইভ বা লোকেশনে এই DocumentRoot রাখতে পারো। এরজন্য স্টার্ট মেনুতে গিয়ে “Apache HTTP Server 2.2 > Configure Apache Server > httpd.conf” খুলে DocumentRoot খুঁজে বের করো পরিবর্তন করে নিতে পারো।
—-
এবার নিজের সাইট তৈরি তৈরি করে DocumentRoot ফাইলগুলো রেখে ব্রাউজারে http://127.0.0.1/ বা http://localhost লোকেশন থেকে ব্রাউজ করে দেখুন। কোন সমস্যা হলে জানাতে পারেন। পরেরপর্বে PHP সেটাপ করা দেখানো হবে।
লেবেলসমূহ: PHP Tips and Trick, website making