Friday, June 15, 2012

ওয়েব ডেভেলাপারদের বিশেষ প্রয়োজনীয়ঃ ওয়েবসাইটের বিভিন্ন সুন্দর ও আকর্ষনীয় ফিচারগুলোর সোর্সকোডঃ পর্ব - ১

আপনি যখন কোন একজন ক্লায়েন্টের সাইট বানাতে যাবেন তখন ক্লায়েন্ট আপনাকে তার পছন্দ অনুযায়ী বিভিন্ন ফিচার যোগ করতে বলতে পারে বা বলতে পারে যে অমুক সাইটের ঐ ফিচারটি আমি আমার সাইটে চাই। ধরুন ফিচারটি জাভাস্ক্রীপ্টের। এই মূহুর্তে আপনার জাভাস্ক্রীপ্ট কোডের গভীরে যতটুকু জানা দরকার তার চেয়েও বেশি জানা দরকার ঐ নির্দিষ্ট ফিচারের সোর্স কোড আপনি কোথায় পেতে পারেন।  আপনার যদি অনেক কিছু সম্পর্কে আগেই ধারনা থাকে তাহলে কাজটি করে ফেলতে সুবিধা। বা আপনি আপনার সাইটে আকর্ষনীয় নতুন কিছু গ্যাজেটও যোগ করতে পারেন। যেমন- ঐদিন এক বায়ার চাইল সে তার সাইটের একটা পেজে সাইড বার মেনু চায় এবং পেজের মাঝখানে গুগল ম্যাপ চায়। সে তার জব পোস্টে লিখে রেখেছে "Expart Javascript Programmer needed". আপনি জাভাস্ক্রীপ্টে পুরোপুরি এক্সপার্ট না হলেও কাজটি করে দিতে পারেন। কাজটি তাকে করে দিতে চাইলে এই পোস্টের ২ নং এবং ১০ নং সোর্সকোড ইউজ...
করলেই হবে । তবে আপনাকে কোড ভাল করে ইউজ জানতে হবে।


আজকে বিভিন্ন ওয়েবসাইটে আমাদের দেখা অনেক সুন্দর ও আকর্ষনীয় ফিচারগুলোর সোর্সকোড কোথায় পাওয়া যাবে তা সম্পর্কে আলোচনা করব। ডেমো লিঙ্কে ঐ নির্দিষ্ট ফিচারের সোর্সকোড এবং কিভাবে ব্যাবহার করবেন তা দেয়া আছে। তবুও যদি আপনার বুঝতে সমস্যা হয় আমাকে নক করবেন।

১। এটাতে মাউস নাড়ানোর সাথে সাথেই ব্যাকগ্রাউন্ড ইমেজটি দৌড়ে একে একে প্রতিটি মেনু লিস্টের কাছে যাবে। এই ফিচারটি আপনার সাইটে ইউজ করতে চাইলে লিঙ্কটিতে দেখুন- ডেমো লিঙ্ক 


২। আমরা সাইটে মেনু উপরে রাখতে পারি। আবার বামদিক বা ডানদিকে রাখতে পারি। কিন্তু আপনি যদি চান এটা সাইড বারে রাখতে তাহলে এই কোড ইউজ করতে পারেন।


  • এটাও প্রায় একই একটু স্লাইড করে মেনুটা দেখাবে। প্রথমটার সাথে এর পার্থক্য হল এটা স্ক্রলিং করার পরও মেনুটি দেখা যাবে। তবে এটা সুন্দর -  ডেমো লিঙ্ক ৩ 
৩। এবার আসি, মেনু এবং সাব-মেনুগুলোকে কোন স্টাইলে আপনি দেখাতে চান -  ডেমো

 স্টাইলগুলো একে একে দিচ্ছি - 
a.  Bullet list accordion menuএটাতে মেনু এবং সাবমেনু থাকবে। মেনুতে ক্লিক দেয়ার পর সাবমেনু স্লাইড আকারে দেখাবে। আবার এটাও একই কাজ করে।
b. Apple silver accordion menu এবং Urban Gray accordion menu তে মাউস রাখার সাথে সাথেই সাবমেনু এসে পড়ে।
c. একেবারে সাধারন html এর মেনু আর সাবমেনু স্টাইল - http://www.dynamicdrive.com/dynamicindex1/dropdowncontrol.htm
d. ট্যাব আকারে দেখানোর জন্য - http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm
e. সাধারনত লেফট ক্লিক দিলে সাবমেনু দেখায়, কিন্তু এটাতে রাইট ক্লিক করলে মেনু আসবে। সুন্দর - http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm
f. এটাতে মাইক্রোস্ফট আউটকুলের স্টাইল দেয়া হয়েছে - http://www.dynamicdrive.com/dynamicindex1/outbar2/index.htm

৪। অনেক সময় দেখা যায় কোন লিঙ্কের উপর মাউস ধরলেই মেনু বা সাবমেনু দেখানো শুরু করে। আপনিও এটা করতে পারেন। 
  • এটাও একই, বাট সাধারন - ডেমো 
 ৫। আমাদের অনেক সময় মাল্টিমেনু তৈরি করার প্রয়োজন পড়ে। খুব সহজেই বিভিন্ন স্টাইলের করতে পারি ।

নিচের লিঙ্ক গুলো দেখতে পারেন- 
http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm
http://www.dynamicdrive.com/dynamicindex1/ddmegamenu.htm
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm (এটা আমাদের nstu এর সাইটে দেয়া)
http://www.dynamicdrive.com/dynamicindex1/jimmenu/example2.htm ( এটা সাইড মাল্টি মেনুবারের জন্য)
http://www.dynamicdrive.com/dynamicindex1/drilldownmenu.htm ( এটা ড্রিল মেশিনের মত সাবমেনুগুলোকে দেখায়)
http://www.dynamicdrive.com/dynamicindex11/stickycontent.htm (এটাতে মেনু স্টিকি থাকবে)
৬। কোন সাইট যদি আইফ্রেমে লিঙ্কে ক্লিক দেয়ার সাথে সাথে দেখাত চাই, তাহলে এটা খুব সুন্দর কোড- 
 ( আইফ্রেম মানে হল একই ওয়েবসাইটের ভেতরে অন্য আরেকটি ওয়েবসাইট দেখানো)  .

 না বুঝলে আপনি ডেমো লিঙ্কগুলোত যান তাহলেই বুঝতে পারবেন - ডেমো লিঙ্ক
৭। ফেসবুক এখন তাদের টিকারগুলোতে এই স্টাইলের খুব সুন্দর স্ক্রলিংগুলো ব্যাবহার করে। 
 

 ৮। খুব সুন্দর ড্রাগ এন্ড ড্রপ স্ক্রীপ্ট - 



৯। কি সুন্দর কালার নিয়ে কাজ করা যায়। - 

ডেমো লিঙ্ক
ডেমো লিঙ্ক ২


১০ । গুগল ম্যাপ যদি ইউজ করতে চান সাইটে তাহলে ডেমো লিঙ্ক



১১। প্রথমে লেখাগুলো উহ্য থাকলে মাউস রাখলেই স্পষ্ট হয়ে দেখাবে- ডেমো লিঙ্ক


১২। টাইটেল লেখাটা খুব সুন্দর ভাবে ভাসবে, যদিও প্রফেশনাল সাইটে এটা ইউজ করা উচিত নয়-  ডেমো লিঙ্ক

১৩। অনেক সময় আমরা দেখি কোন টপিকে ক্লিক দিলেই তার ডিটেইলস সাথে সাথে সুন্দর করে চলে আসে।

  • এটাতে আরো সুন্দর করে ইনফো আসে। একটা ফিচার আছে কনটেন্টের ইনফো পরে লোড হয়ে আসবে -  ডেমো লিঙ্ক ৩

 ১৪। এটাতে নিচে দিয়ে স্টিকি হয়ে বড় করে মেনু বা কপিরাইট এ জাতীয় লেখা যেতে পারে -  ডেমো লিঙ্ক



 ১৫। ছবিটিতে ভাল করে দেখুন। ইদানিং অনেক ওয়েবসাইট এই স্টাইলের লগিন ফর্ম ইউজ করছে। - ডেমো লিঙ্ক

১৬। ভিজিটরকে মেসেজ দেয়ার জন্য আমাজন ডট কম এই জাতীয় ইনফরমেশন রাখে।



১৭। এটা এডবক্স, ৩০ সেকেন্ড উইন্ডোতে থাকবে তারপর চলে যাবে-



  •  এডফ্লাই এই ধরনের ফ্লায়িং এডগুলো দেয়, যা পেজ স্ক্রলিং করার পরও থেকে যায়, চরম বিরক্তি কর - ডেমো ২


১৮। এটা html5 পপয়াপ নোটপ্যাড, কিন্তু কি কাজে যে লাগে বুঝবার পারলাম না - ডেমো লিঙ্ক


১৯। লিঙ্কে ক্লিক দিলে বক্সে ইনফরমেশন দেখা যাবে, ইনফরমেশনগুলো স্ক্রলিং করা যায়। এতে করে আপনি খুব সুন্দর করে আপনার তথ্য দেখাতে পারবেন। 






২০। রাইট ক্লিক ডিসেবল করার কয়েকটা স্ক্রীপ্ট - ডেমো


ইমেজের উপর রাইট ক্লিক অফ - ডেমো
রাইট ক্লিক অফ কিন্তু কোন এলার্ট দেখাবে না- ডেমো 

২১। প্রিন্ট বাটন - ডেমো 

২২। ফন্ট বড় ছোড় করার কাজে এটা ব্যাবহার করা যাবে - ডেমো ১     ডেমো ২


২৩। সাইটবুক মার্ক করে রাখার জন্য -  ডেমো

২৪। লিঙ্কের উপর মাউস রাখলেই ডিটেইলস চলে আসবে এমন অনেক স্ক্রীপ্ট আছে । 


  • একটু সুন্দর জাস্ট বর্ডার দেয়া হয়েছে - ডেমো ৬ 
  • নিচে দিয়ে ট্যাব খুলবে যেখানে ইনফো থাকবে - ডেমো ৮ 
২৫। অনেক সময় লিঙ্কে ক্লিক দিলে তা আটোস্ক্রল করে আমাদের নির্দিষ্ট লেখাইয় পাঠিয়ে দেয়, এটাও সেটা করবে - 
ডেমো
২৬।  ব্যাকগ্রাউন্ড ইমেজ তৈরি করবে যা সব সময় স্ট্যাটিক থাকবে। সুন্দর জিনিস -  ডেমো

২৭। টপে যাওয়ার জন্য ওয়েব সাইটের নিচের দিকে একটা স্ট্যাটিক বাটন রাখা যায় - ডেমো



5 comments:

  1. খুবই উপকারী। বুকমার্ক করে রাখলাম। ধন্য়বাদ।

    ReplyDelete
  2. অনেক সুন্দর করে গুছিয়ে লিখেসিস

    ReplyDelete

  3. Just want to say your article is as astonishing.
    The clarity in your post is just great and i can assume you're an expert on this subject. Well with your permission let me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please continue the gratifying work.

    Also visit my weblog;Pree Tech3

    ReplyDelete
  4. চমৎকার কাজের পোস্ট।

    ReplyDelete

এখানে আপনি আপনার মূল্যবান মতামতটি প্রকাশ করতে পারেন।