ওপেন সোর্স অনলাইন সরঞ্জামগুলি ব্যবহার করে ডায়নামিক এইচটিএমএল 5 ওয়েব অ্যাপ্লিকেশনগুলি টিউন করা হচ্ছে


আমি এই সিরিজের শেষ নিবন্ধটি শুরু করার সাথে সাথে আমার আশা যে আপনি এইচটিএমএল 5 এবং মোবাইল-বান্ধব/প্রতিক্রিয়াশীল ওয়েব বিকাশের গুরুত্ব বুঝতে সক্ষম হয়েছেন। আপনার পছন্দমতো ডেস্কটপ বিতরণ নির্বিশেষে, নেটবিন্স একটি শক্তিশালী আইডিই এবং বেসিক লিনাক্স কমান্ড-লাইন দক্ষতা এবং পার্ট 3 এ আলোচিত সরঞ্জামগুলির সাথে একসাথে ব্যবহৃত হলে, আপনাকে কোনও ঝামেলা ছাড়াই অসামান্য অ্যাপ্লিকেশন তৈরি করতে সহায়তা করতে পারে।

তবে দয়া করে নোট করুন যে আমরা এই সিরিজটিতে কেবল HTML 5 এবং ওয়েব বিকাশের প্রাথমিক বিষয়গুলি আবৃত করেছি এবং ধরে নিয়েছি যে আপনি এইচটিএমএল এর সাথে কিছুটা পরিচিত, তবে ডাব্লুডাব্লুডাব্লু দুর্দান্ত সংস্থান দ্বারা পরিপূর্ণ - আমরা তাদের প্রসারিত করতে কিছু ফস - এখানে ভাগ করে নেওয়া হয়েছে।

এই শেষ গাইডে আমরা সেই কয়েকটি সরঞ্জাম সম্পর্কে কথা বলব এবং কীভাবে সেগুলি ব্যবহার করতে হবে তা আমাদের ইউআই (ইউজার ইন্টারফেস) সুন্দর করার জন্য আমরা যে বিদ্যমান পৃষ্ঠায় কাজ করে যাচ্ছি তাতে কীভাবে ব্যবহার করতে হয় তা আপনাকে দেখাব।

আপনি এই সিরিজের অংশ 2 ("এইচটিএমএল 5 ওয়েব অ্যাপ্লিকেশন লিখতে jQuery এবং বুটস্ট্র্যাপ যুক্ত করা") থেকে স্মরণ করবেন যে বুটস্ট্র্যাপ জিপ ফাইলটি ফন্ট নামের একটি ডিরেক্টরি সহ আসে। আমরা আমাদের প্রকল্পের সাইটরটের অভ্যন্তরে একই নামের ফোল্ডারে এর সামগ্রীগুলি সংরক্ষণ করেছি:

আপনি সম্ভবত উপরের চিত্রটি থেকে বলতে পারেন, বুটস্ট্র্যাপে গ্লাইফিকনস নামে উপাদানগুলির একটি সেট রয়েছে যা আপনার অ্যাপ্লিকেশনগুলিতে বোতাম এবং মেনুগুলির জন্য সুদর্শন আইকন সরবরাহ করে এমন অন্তর্নির্মিত উপাদানগুলি কম নয়। বুটস্ট্র্যাপে অন্তর্ভুক্ত গ্লাইফিকনগুলির সম্পূর্ণ তালিকা http://getbootstrap.com/compferences/ এ উপলব্ধ।

গ্লাইফিকনগুলির ব্যবহার চিত্রিত করতে, আসুন আমাদের মূল পৃষ্ঠায় নেভিগেশন বারে কিছু যুক্ত করুন। নীচে নেভিগেশন বার মেনুগুলি পরিবর্তন করুন। প্রতিটি বন্ধ হওয়া স্প্যান ট্যাগ এবং মেনু পাঠ্যের মধ্যে স্থানটি নোট করুন:

<li class="active"><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a></li>

(যাইহোক, আইকনগুলিকে অন্যান্য উপাদানগুলির সাথে মিশ্রিত হতে না দেওয়ার জন্য এখানে স্প্যান ট্যাগগুলি ব্যবহার করা হয়)।

এবং ফলাফল এখানে:

গ্লাইফিকনগুলি যদিও দরকারী তবে এটিও সীমাবদ্ধ। এবং ফন্ট আশ্চর্যজনক দৃশ্যে .োকে এখানে। ফন্ট আশ্চর্য হ'ল একটি আইকন/হরফ/সিএসএস সম্পূর্ণ টুলকিট যা বুটস্ট্র্যাপের সাথে নির্বিঘ্নে সংহত করার সম্ভাবনা রয়েছে।

আপনি কেবল আপনার পৃষ্ঠাগুলিতে সম্পূর্ণ অন্যান্য আইকন যোগ করতে পারবেন না, তবে সেগুলি পুনরায় আকার দিতে, ছায়া ছড়িয়ে দিতে, রঙ পরিবর্তন করতে এবং CSS ব্যবহার করে আরও অনেকগুলি বিকল্প দিতে পারেন। তবে, যেহেতু সিএসএসের সাথে ডিল করা এই সিরিজের বাইরে নয়, আমরা কেবলমাত্র ডিফল্ট আকারের আইকনগুলির সাথেই কাজ করব তবে আপনাকে এই সরঞ্জামটি আপনাকে কতটা দূরে নিয়ে যেতে পারে তা আবিষ্কার করতে আপনাকে "আরও গভীর গভীরতা" দিতে উত্সাহিত করব।

ফন্ট আশ্চর্যজনক ডাউনলোড করতে এবং এটি আপনার প্রকল্পে অন্তর্ভুক্ত করতে, নিম্নলিখিত কমান্ডগুলি কার্যকর করুন (বা সরাসরি প্রকল্পের ওয়েব সাইটে যেতে এবং আপনার ব্রাউজারের মাধ্যমে জিপ ফাইলটি ডাউনলোড করতে এবং জিইআইআই সরঞ্জামগুলি ব্যবহার করে এটি সঙ্কুচিত করতে নির্দ্বিধায়):

# wget http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.3.0.zip

(হ্যাঁ, ডোমেনের নামটি আসলে ফোরআউউইস, একটি আর সহ, যাতে এটি কোনও টাইপ নয়)।

# unzip font-awesome-4.3.0.zip
# cp font-awesome-4.3.0/css/font-awesome.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp font-awesome-4.3.0/fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts

এবং আমাদের পৃষ্ঠার শীর্ষে .css ফাইলটি যুক্ত করুন, যেমন আমরা আগে jQuery এবং বুটস্ট্র্যাপ দিয়েছিলাম (মনে রাখবেন যে আপনাকে সবকিছু টাইপ করতে হবে না - কেবল ফাইলটি টেনে আনুন প্রকল্প উইন্ডোতে ট্যাব):

আসুন আমাদের নেভিগেশন বারে ড্রপডাউন তালিকাটি ধরুন, উদাহরণস্বরূপ:

ভাল, তাই না? এটি যা লাগে তা হ'ল সূচিপত্রের নীচে বিদ্যমান উল ক্লাস নামক ড্রপডাউন-মেনুটির বিষয়বস্তুগুলি এর সাথে প্রতিস্থাপন করা হয়:

<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>

বিশ্বাস করুন - এই সরঞ্জামগুলি কীভাবে ব্যবহার করবেন তা শিখতে আপনার সময় বিনিয়োগ করা খুব পুরস্কৃতের অভিজ্ঞতা হবে।

একজন আইটি ব্যক্তি হিসাবে আপনাকে অবশ্যই ইন্টারনেট উপলব্ধ করার জন্য প্রচুর সংস্থান থেকে ভালভাবে পরিচিত হতে হবে। যেহেতু ওয়েব বিকাশ করা ব্যতিক্রম নয়, এখানে কয়েকটি সংস্থান রয়েছে যা আমরা নিশ্চিত যে আপনার অ্যাপ্লিকেশনগুলি টিউন করার সময় আপনি দরকারী পাবেন।

জাভাস্ক্রিপ্ট কোডের সাথে কাজ করার সময় (উদাহরণস্বরূপ, আমরা যখন পার্ট 2-তে যেমন jQuery নিয়ে কাজ করছি), আপনি জেএসহিন্ট, একটি অনলাইন জাভাস্ক্রিপ্ট মানের কোড চেকার ব্যবহার করতে চাইবেন যা লক্ষ্য করে বিকাশকারীদের ত্রুটি এবং সম্ভাব্য সমস্যা সনাক্ত করতে সহায়তা করে। এই সমস্যাগুলি খুঁজে পাওয়া গেলে, জেএসহিন্ট লাইন নম্বরটি কোথায় অবস্থিত তা নির্দেশ করে এবং সেগুলি ঠিক করার জন্য আপনাকে ইঙ্গিত দেয়:

এটি অবশ্যই দুর্দান্ত দেখায়, তবে এই দুর্দান্ত স্বয়ংক্রিয় সরঞ্জামের সাথেও এমন সময় আসবে যখন আপনার কোডটি একবার দেখার জন্য আপনার অন্য কারও প্রয়োজন হবে এবং কীভাবে এটি ঠিক করতে হবে বা অন্যথায় এটি কীভাবে উন্নত করতে হবে তা আপনাকে বোঝায়, যা এটি কোনওভাবে ভাগ করে নেওয়া বোঝায়।

জেএসফিডেল (একটি অনলাইন জাভাস্ক্রিপ্ট/সিএসএস/এইচটিএমএল কোড পরীক্ষক) এবং বুটপ্লি (জেএসফিডেলের মতো তবে বুটস্ট্র্যাপ কোডে বিশেষ) আপনাকে কোড স্নিপেটগুলি সংরক্ষণ করতে দেয় (ফিডল নামেও পরিচিত) এবং ইন্টারনেটে খুব সহজেই সেগুলি ভাগ করার জন্য আপনাকে একটি লিঙ্ক সরবরাহ করে (হয় হয় আপনার বন্ধুদের সাথে ইমেলের মাধ্যমে, আপনার সামাজিক নেটওয়ার্ক প্রোফাইল ব্যবহার করে বা ফোরামে)।

সারসংক্ষেপ

এই নিবন্ধে আমরা আপনাকে আপনার ওয়েব অ্যাপ্লিকেশনগুলি টিউন করার জন্য কয়েকটি টিপস সরবরাহ করেছি এবং কিছু সংস্থান ভাগ করে নিয়েছি যা আপনি আটকা পড়ে গেলে বা অন্য জোড়া চোখ (এবং কেবল একটি নয়, তবে অনেকগুলি) চাইলে আপনার দিকে নজর দিতে পারেন কোডটি কীভাবে এটি উন্নত করা যায় তা দেখতে

সম্ভাবনাগুলি হ'ল আপনি অন্যান্য সংস্থানগুলিও জানেন। যদি তা হয় তবে নীচের মন্তব্য ফর্মটি ব্যবহার করে বাকী টেকমিন্ট সম্প্রদায়ের সাথে এগুলি নির্দ্বিধায় ভাগ করে নিন - এবং যাইহোক, এই নিবন্ধে উপস্থাপিত বিষয়বস্তু সম্পর্কে আপনার কোনও প্রশ্ন রয়েছে কিনা তা আমাদের জানাতে দ্বিধা করবেন না।

আমরা আশা করি যে এই সিরিজটি আপনাকে মোবাইল-বান্ধব এবং প্রতিক্রিয়াশীল ওয়েব বিকাশের বিশাল সম্ভাবনার এক ঝলক দিয়েছে।