কিভাবে আপনার সাইটকে দর্শকদের কাছে আকর্ষণীয় করে তুলবেন? এই প্রশ্নটি ইন্টারনেট সংস্থানগুলির প্রায় সমস্ত মালিককে উদ্বিগ্ন করে: বণিক, ব্লগার, ছোট এবং বড় ব্যবসার মালিক, ভ্রমণকারী এবং কেবল সৃজনশীল ব্যক্তিরা যাদের বিশ্বকে বলার মতো কিছু আছে৷
কেন একটি ওয়েবসাইট সুন্দর এবং কার্যকরী হওয়া উচিত?
ভিজিটের সংখ্যা সাইটটির থিম এবং এর লক্ষ্য দর্শক, একটি নির্দিষ্ট পণ্যের প্রতি মানুষের আগ্রহ, বিনিয়োগ, প্রচার, বিষয়বস্তু এবং অন্যান্য অনেক কারণের উপর নির্ভর করে। কিন্তু এটা অস্বীকার করা যাবে না যে সাইট "জামাকাপড় দ্বারা অভিবাদন করা হয়।" এটি সম্পদের প্রথম এবং প্রধান পৃষ্ঠা যা এর মুখ, কলিং কার্ড, যার দ্বারা দর্শককে বুঝতে হবে যে তিনি বিষয়বস্তুটি আরও দেখার জন্য তার সময় ব্যয় করতে চান কিনা।
এবং ভুলের কোন অবকাশ নেই! মার্কিন যুক্তরাষ্ট্রের একটি প্রযুক্তিগত বিশ্ববিদ্যালয়ের গবেষণা অনুসারে, দর্শক এক সেকেন্ডেরও কম সময়ের মধ্যে সাইটের প্রথম ছাপ পায়। গড়ে, একজন ব্যক্তি 3 সেকেন্ডের মধ্যে একটি সাইট "স্ক্যান" করে। বিদ্যুতের গতি, তাই না?!
মূল পৃষ্ঠাটি কেমন দেখায় তার উপর নির্ভর করে সম্পদের সাফল্যের 70% পর্যন্ত। প্রথম জিনিস মানুষ লক্ষ্যলোগো, কিন্তু দ্বিতীয়টি হল নেভিগেশন। এবং যদি লোগোর সাথে সবকিছু কম-বেশি পরিষ্কার হয়, তবে সাইটের ergonomics এর নেভিগেশন, মেনু এবং সুবিধার উপর আপনার মাথা ভেঙ্গে দেওয়া মূল্যবান। একটি যুক্তিসঙ্গত প্রশ্ন উত্থাপিত হয়: "কিভাবে আপনার সাইট সাজাইয়া রাখা, এটি যতটা সম্ভব কার্যকরী এবং সুবিধাজনক করা, কিন্তু একই সময়ে সুন্দর?" অফার করার জন্য অনেক অস্বাভাবিক ধারণা আছে, কিন্তু সবচেয়ে আকর্ষণীয় হল টুলটিপ।
টুলটিপ কি? সাইটের কার্যকারিতা উন্নত করার জন্য একটি দুর্দান্ত প্রক্রিয়া হওয়ার পাশাপাশি, টুলটিপগুলি এমন একটি সরঞ্জাম যা ব্যবহারকারীকে একটি আইকন, শব্দ বা ছবির উপর ঘোরার সময় একটি নির্দিষ্ট চিত্রের ব্যাখ্যা দেখতে দেয়৷
টুলটিপ দিয়ে কাজ করার জন্য টুল
টুলটিপ তৈরির জন্য বুটস্ট্র্যাপ সেরা টুল। এটি HTML, CSS, Sass, এবং JavaScript-এ লেখা অ্যাপ এবং ওয়েবসাইট তৈরির জন্য সহজে শেখার টেমপ্লেটের সেট।
নির্দিষ্ট হওয়ার জন্য, টুলটিপ বুটস্ট্র্যাপ টেমপ্লেটের একটি গ্রাফিকাল উপাদান ব্যবহার করে - টুলটিপ৷
বুটস্ট্র্যাপ ফ্রেমওয়ার্ক "টুইটার" এর জন্য তৈরি করা হয়েছিল এবং এটিকে মূলত "টুইটার ব্লুপ্রিন্ট" বলা হয়। 2012 সালে কিছু পরিবর্তনের পর, এটি একটি 12-কলামের গ্রিড পেয়েছে, অভিযোজিত হয়ে উঠেছে এবং পরিচিত নাম - টুলটিপ অর্জন করেছে। টুলটিপ হল এমন একটি উপাদান যা মনিটরের স্ক্রিনে একটি নির্দিষ্ট উপাদানের উপর ঘোরার সময় পপ আপ হয়৷
একটি ইঙ্গিত তৈরি করা হচ্ছে
আপনি বৈশিষ্ট্য ব্যবহার করে একটি বুটস্ট্র্যাপ টুলটিপ তৈরি করতে পারেনডেটা, সেইসাথে "জাভা স্ক্রিপ্ট" উপাদান সক্রিয় করে। একটি HTML বুটস্ট্র্যাপ টুলটিপ তৈরি করার দুটি প্রধান উপায় রয়েছে। প্রথমটির সারমর্ম হল অ্যাট্রিবিউট এবং অ্যাট্রিবিউট শিরোনাম (টাইটেল) প্রয়োগ করা, যাতে ইঙ্গিত লেখা থাকবে। টুলটিপ উপরের দিকে পপ আপ হবে (ডিফল্ট সেটিং)। এটা মনে রাখা দরকার যে টুলটিপটি আরম্ভ করা দরকার, যেহেতু পারফরম্যান্সের কারণে "টুইটার বুটস্ট্র্যাপ"-এ স্বয়ংক্রিয় সূচনা বাতিল করা হয়েছে।
টুলটিপ শুরু করার জন্য, বিশেষ জাভাস্ক্রিপ্ট ব্যবহার করা হয়, যেখানে একটি বৈশিষ্ট্য আছে এমন সমস্ত উপাদানের জন্য টুলটিপ পদ্ধতি পুনরুদ্ধার করা হয়। দ্বিতীয় পদ্ধতির সারমর্ম হল একটি টুলটিপ অন্তর্ভুক্ত করে একটি টুল ক্লাস লিখে jQuery লাইব্রেরির অংশগ্রহণের সাথে "জাভাস্ক্রিপ্ট" কোড ব্যবহার করে একটি টুলটিপ সক্রিয় করা। উপাদান নির্বাচন পদ্ধতি ব্যতীত পদ্ধতিটি প্রথমটির মতোই। আপনি নীচে দেখানো উপায়ে "জাভা স্ক্রিপ্ট"-এ ইঙ্গিত সক্রিয় করতে পারেন৷
বুটস্ট্র্যাপ টুলটিপের উদাহরণ
পজিশনিং টুলটিপগুলির জন্য চারটি প্রধান বিকল্প রয়েছে: বাম এবং ডান প্রান্তে এবং উপাদানের উপরে এবং নীচে৷
উপর থেকে ইঙ্গিত
ইঙ্গিত ডান
নীচে ইঙ্গিত
ইঙ্গিত বাকি
টুলটিপ ব্যবহার করা
বুটস্ট্র্যাপ টুলটিপের অনেক ব্যবহার রয়েছে। আপনি টুলটিপস সন্নিবেশ করতে পারেন যাতে ব্যবহারকারী পাঠ্যে একটি বিদেশী ভাষা থেকে পাঠ্যের অনুবাদ বুঝতে পারে। টুলটিপগুলিকে একটি টুল হিসাবে ব্যবহার করা যেতে পারে যাতে ব্যবহারকারীরা প্যানেলের বোতামগুলির উপর ঘোরাঘুরি করার সময় তাদের অর্থ বুঝতে পারে৷ বুটস্ট্র্যাপ টুলটিপ টেমপ্লেটগুলি প্রায়শই বিভিন্ন সংস্থার ওয়েবসাইটে কোম্পানির খবরের সদস্যতা তৈরি করতে ব্যবহৃত হয়। এটি গ্রাহকদের আপ টু ডেট রাখে এবং দর্শকদের নতুন তথ্য পেতে দেয়, যেমন ডিসকাউন্ট রেট, অফার, কোম্পানির মধ্যে পরিবর্তন৷
একটি উদাহরণ বিবেচনা করুন যেখানে একজন ব্যবহারকারীকে একটি নিউজলেটারে সদস্যতা নেওয়ার জন্য তাদের ইমেল ঠিকানা লিখতে হবে৷ এইচটিএমএল 5 এবং প্রয়োজনীয় বৈশিষ্ট্য ব্যবহার করে ক্লায়েন্ট শ্রোতারা খবরে সদস্যতা নিচ্ছেন তা নিশ্চিত করার কাজটি সবচেয়ে সহজে অর্জন করা হয়। ব্যবহারকারীর কর্মের ক্রম বোঝার জন্য এই ক্ষেত্রে টুলটিপ ইঙ্গিত প্রয়োজন। উদাহরণস্বরূপ, ইমেল ঠিকানা প্রবেশ করার পরে, আমি বাক্সটি চেক করেছি: "আমি আমার ইমেল ঠিকানায় কোম্পানির খবর পেতে সম্মত।" নীচে ফর্ম কোডের একটি উদাহরণ রয়েছে৷
এই কোডটি HTML বুটস্ট্র্যাপ টুলটিপে ইনস্টল করা সহজ। কিন্তু উপকারিতা উল্লেখযোগ্য। এখন গ্রাহকরা কোম্পানির সব খবর জানেন। এটি এক ধরনের বিনামূল্যের বিজ্ঞাপন।
পপআপ তৈরি করার সময় প্রধান ভুলইঙ্গিত
বুটস্ট্র্যাপ টুলটিপ কাজ না করলে কি করবেন? প্রথম এবং প্রধান ভুল যেখানে টুলটিপ অ্যাট্রিবিউট কাজ করবে না তা হল টুলটিপ সক্রিয় না থাকলে। এটি সক্রিয় করার জন্য, আপনাকে একটি বিশেষ কোড ব্যবহার করতে হবে৷
এই পদ্ধতিটি আপনাকে একটি ওয়েব পৃষ্ঠায় একেবারে সমস্ত টুলটিপ শুরু করতে দেয়।
দ্বিতীয় সাধারণ ভুল হল হেডারে jQuery না থাকা।
লিঙ্কটি সঠিকভাবে কাজ করার জন্য একটি প্রয়োজনীয় শর্ত রয়েছে - "জাভা স্ক্রিপ্ট" এর মতো একটি ডেটা প্রসেসিং ফাংশন অবশ্যই নির্দিষ্ট করতে হবে৷
টুলটিপ বৈশিষ্ট্য
এর মূল অংশে, টুলটিপ উপাদানটি টুলটিপ প্রদর্শন করার জন্য ডিজাইন করা হয়েছে যখন আপনি পৃষ্ঠার এক বা অন্য অংশে মাউস পয়েন্টার সরান। তবে, সাহায্যে ডান, বাম এবং উপরে টুলটিপের অবস্থান ছাড়াও, টুলটিপের নিম্নলিখিত বৈশিষ্ট্য রয়েছে:
- সক্রিয়। বুটস্ট্র্যাপ টুলটিপে সত্যিকারের প্রপার্টি ব্যবহার করলে টুলটিপ প্রদর্শন করা যায়, একই প্রপার্টি মিথ্যাতে সেট করার অর্থ হল কোন টুলটিপ প্রদর্শন করা যাবে না।
- AutoPopDelay হল টিপস দেখানোর সময়।
- AutoPopDelay। টুলটিপ প্রদর্শিত হওয়ার জন্য মাউস কার্সারটি অবশ্যই একটি উপাদানের উপর ঘোরাঘুরি করার সময়ের পরিমাণ প্রতিনিধিত্ব করে৷
- ইসবেলুন। HTML বুটস্ট্র্যাপ টুলটিপ টুলটিপের মান সত্য হলে, টুলটিপ একটি ক্লাউডে পরিবর্তিত হবে।
- টুলটিপ আইকন। উইন্ডোতে প্রদর্শিত অক্ষরটি প্রতিনিধিত্ব করেইঙ্গিত।
টুলটিপস্টার
সুন্দর টুলটিপ তৈরি করতে, উদাহরণস্বরূপ, Wordpress-এ তৈরি করা একটি সাইটে, ওয়েব ডেভেলপারদের ভাষা পুঙ্খানুপুঙ্খভাবে জানার প্রয়োজন নেই। টুলটিপস্টারের মতো একটি প্লাগইন (এক্সটেনশন) এর অস্তিত্ব সম্পর্কে জানা যথেষ্ট। নাম থেকে এটি স্পষ্ট যে এই প্লাগইনটি টুলটিপের উপর ভিত্তি করে তৈরি করা হয়েছে এবং এটির বৈশিষ্ট্য এবং উদ্দেশ্যের সাথে আশ্চর্যজনকভাবে একই রকম। এই প্লাগইন কি জন্য? এটি আপনাকে টুলটিপের ভিতরে প্রয়োজনীয় HTML মার্কআপ তৈরি করতে দেয়।
প্লাগইনটির কাজ পৃষ্ঠায় শর্টকাট সন্নিবেশের উপর ভিত্তি করে। সমস্ত মৌলিক HTML বুটস্ট্র্যাপ টুলটিপ বৈশিষ্ট্য রয়েছে: বিষয়বস্তু (ডেটা-টুলটিপ-কন্টেন্ট), শিরোনাম, অবস্থান, ট্রিগার, ইত্যাদি
