কারসারগুলি " থেকে প্রায় আছে৷ সব ডেমোর মা ” যেখানে ডগলাস এঙ্গেলবার্ট ষাটের দশকের শেষের দিকে মাউস এবং গ্রাফিকাল ইউজার ইন্টারফেসকে বিশ্বের কাছে পরিচয় করিয়ে দিয়েছিলেন। মাউস কার্সার আমাদের কম্পিউটারের স্ক্রিনে আমরা কোথায় মহাশূন্যে আছি তা দেখতে দেয়। ব্যবহারকারীর অভিজ্ঞতার টুল হিসেবে, আমরা স্ক্রিনের যেকোনো সময়ে কী করতে পারি বা কম্পিউটার কী করছে তা আমাদের দেখাতে সক্ষম হওয়া সত্যিই দুর্দান্ত। এই নিবন্ধটি আপনাকে কিছু উপায় সম্পর্কে বলবে যা আমরা আমাদের ওয়েবপেজে মাউস কার্সার ব্যবহার করে আপনার ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারি।
সিনট্যাক্স
আমাদের CSS সিলেক্টরে, আমরা ডিফল্ট তীর ব্যতীত অন্য কিছুতে কার্সার পরিবর্তন করতে নিম্নলিখিত সিনট্যাক্স ব্যবহার করি।
cursor: [ url(1.png), url(2.png) ], etc.,
<mandatory keyword value>
বর্গাকার বন্ধনীর প্রথম সেটের মধ্যে, আমাদের কাছে কমা দ্বারা পৃথক করা url-এর একটি তালিকা রয়েছে। এটি একটি ঐচ্ছিক মান। এটি কাস্টম কার্সার ব্যবহার করার অনুমতি দেয় - ইন্টারনেটে এমন অনেকগুলি কাস্টম কার্সার নির্মাতা রয়েছে যা আপনাকে অনন্যভাবে আপনার এমন কিছু তৈরি করতে সহায়তা করে৷
কমা দ্বারা পৃথক করা তালিকা নির্দেশ করে যে ব্রাউজারটি প্রথমটি লোড করার চেষ্টা করবে৷ যদি এটি প্রথমটি খুঁজে না পায় বা url সঠিক না হয়, তাহলে এটি তালিকার নিচে চলে যাবে যতক্ষণ না এটি কাজ করে এমন একটি খুঁজে পায় বা এটি শেষে বাধ্যতামূলক কীওয়ার্ডে সেট করা হবে।
প্রথম প্যারামিটার – ইউআরএল সহ ঐচ্ছিক। দ্বিতীয়টি নয়। আপনাকে অবশ্যই এমন একটি কীওয়ার্ড অন্তর্ভুক্ত করতে হবে যা নির্দেশাবলীর একটি সেট দেয় যে আপনি সেখানে কোন কার্সারটি দেখতে চান। এখানে কিছু উপলব্ধ মান রয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS custom cursor</title>
<style>
table {
width:100%;
text-align: center;
border-collapse: collapse;
font-family: 'Roboto', sans-serif;
}
thead {
width: 100%;
background: lightblue;
}
tr:nth-child(even) {
background-color: lightgrey;
}
td {
width: 32%;
height: 50px;
padding: 10px;
}
td.test {
color: red;
font-weight: bold;
}
td#auto {
cursor: auto;
}
td#cell {
cursor: cell;
}
td#crosshair {
cursor: crosshair;
}
td#default {
cursor: default;
}
td#none {
cursor: none;
}
td#pointer {
cursor: pointer;
}
td#help {
cursor: help;
}
td#progress {
cursor: progress;
}
td#wait {
cursor: wait;
}
td#text {
cursor: text;
}
td#vertical-text {
cursor: vertical-text;
}
td#zoom-in {
cursor: zoom-in;
}
td#zoom-out {
cursor: zoom-out;
}
</style>
</head>
<body>
<table>
<thead>
<td>Cursor Type:</td>
<td>Description:</td>
<td>Test it Out: </td>
</thead>
<tr>
<td>auto</td>
<td>Automatically figures out which cursor to use based on context.</td>
<td class="test" id="auto"> TEST </td>
</tr>
<tr>
<td>default</td>
<td>Typically an arrow, but depends on platform being used.</td>
<td class="test" id="default"> TEST </td>
</tr>
<tr>
<td>help</td>
<td>Used to indicate help is available</td>
<td class="test" id="help"> TEST </td>
</tr>
<tr>
<td>none</td>
<td>No cursor present</td>
<td class="test" id="none"> TEST </td>
</tr>
<tr>
<td>pointer</td>
<td>Most often used when hovering over link or button to indicate it can be clicked.</td>
<td class="test" id="pointer"> TEST </td>
</tr>
<tr>
<td>progress</td>
<td>A mashup of pointer and wait - indicates that the UI can still be interacted with while something else is happening...</td>
<td class="test" id="progress"> TEST </td>
</tr>
<tr>
<td>text</td>
<td>Tells the user text can be highlighted.</td>
<td class="test" id="text"> TEST </td>
</tr>
<tr>
<tr>
<td>wait</td>
<td>Indicates that the computer is thinking and user CANNOT interact with UI...</td>
<td class="test" id="wait"> TEST </td>
</tr>
<tr>
<td>zoom-in</td>
<td>Indicates to user that we can zoom in on something. </td>
<td class="test" id="zoom-in"> TEST </td>
</tr>
<tr>
<td>zoom-out</td>
<td>Indicates to user that we can zoom out on something. </td>
<td class="test" id="zoom-out"> TEST </td>
</tr>
</table>
</body>
</html> উপরের কোডটি শুধুমাত্র কিছু উপলব্ধ কার্সার শেয়ার করে যা আমরা আমাদের সাইটে ব্যবহার করতে পারি। অন্যদের জন্য MDN দেখুন৷
৷উপসংহার
আজ আমরা ব্যবহারকারীর অভিজ্ঞতার উন্নতিতে সহায়তা করার জন্য আপনার ওয়েবসাইটে কার্সার যুক্ত করার বিভিন্ন উপায় নিয়ে আলোচনা করেছি। পৃষ্ঠার যেকোন বিন্দুতে কী করা যেতে পারে তা নির্দেশ করতে কার্সার ব্যবহার করে, ব্যবহারকারীরা আপনার সাইটে নেভিগেট করার সময় কী আশা করবেন তা জানেন। এখানে উল্লিখিতদের চেয়ে আরও অনেক কিছু রয়েছে।
আমি আপনার প্রয়োজনের সাথে মানানসই করার জন্য আপনার কার্সারকে কাস্টমাইজ করতে বিভিন্ন উপায়গুলি পরীক্ষা করার পরামর্শ দিই৷ এবং মনে রাখবেন:কার্সারটি UX-এর মাত্র এক অর্ধেক। অন্য অর্ধেক আসলে বাস্তবায়িত করছে ব্যবহারকারী যা কার্সার আশা করে। আমরা অন্য সময় এটিতে প্রবেশ করব। হ্যাপি হ্যাকিং!
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
