ওয়েব ডেভেলপমেন্টের জন্য দুটি উপায় আছে:টেক্সট এডিটর ও GUI এডিটর উপায়। প্রথম উপায়টি মূলত আরও উন্নত ডেভেলপারদের জন্য, যারা কোড বোঝেন, জানেন তারা কী চান এবং তাদের ওয়েব পেজ তৈরি করতে ভিজ্যুয়াল এইডের প্রয়োজন হয় না। তারা vim, emacs, Notepad++, Kate, বা অন্যান্য টেক্সট এডিটরের মতো প্রোগ্রামগুলির সাথে কাজ করে এবং যখন তারা তাদের কাজের শেষ ফলাফল দেখার প্রয়োজন অনুভব করে তখন ব্রাউজারে ওয়েবপৃষ্ঠাগুলি লোড করে। এই পদ্ধতিটি নূন্যতম, দক্ষ - এবং কঠিন।
দ্বিতীয় উপায় হল বেশিরভাগ লোকেরা যা করে:এমন একটি প্রোগ্রাম ব্যবহার করুন যা সাধারণত ব্যবহারকারীদের কাছ থেকে কোডটি লুকিয়ে রাখে এবং তাদের বিষয়বস্তুর উপর ফোকাস করতে দেয়। এই উদ্দেশ্যে ব্যবহৃত প্রোগ্রামগুলি ওয়েব এডিটর হিসাবে পরিচিত। তাছাড়া, এগুলি আপনি যা দেখেন তা আপনি যা পান (WYSIWYG) এর বিভাগে পড়ে, যার অর্থ সম্পাদকের GUI-এর ভিতরে প্রদর্শিত পৃষ্ঠাটি শেষ ফলাফলের সাথে মিলবে৷ আরও কিছু জনপ্রিয় শিরোনামের মধ্যে রয়েছে KompoZer, Dreamweaver, Quanta, Bluefish, এবং অন্যান্য বন্ধুত্বপূর্ণ ওয়েব ডেভেলপমেন্ট সফ্টওয়্যার যা লোকেদের লেগো বিল্ডিংয়ের মানসিকতার সাথে বিষয়টির কাছে যেতে দেয়। WYSIWYG সম্পাদকদের সাথে কাজ করা টেক্সট এডিটরদের তুলনায় অনেক সহজ, কিন্তু তারা সাধারণত কম দক্ষ হয়।
এবং তারা অনেক crud পিছনে ছেড়ে.
আপনি যখন টেক্সট এডিটরদের সাথে কাজ করেন, তখন ওয়েব ফাইলের প্রতিটি বাইট কোড আপনার দ্বারা সেখানে রাখা হয়। অন্যদিকে, ওয়েব এডিটররা সাধারণত অটো-জেনারেটেড মেটা ক্ষেত্র, স্ব-প্রচারমূলক মন্তব্য এবং প্রচুর অপ্রয়োজনীয় বিরতি এবং হোয়াইটস্পেস সহ কোডটি বেশ উদারভাবে পেপার করে, কোডটিকে আপনার ইচ্ছার চেয়ে অনেক বড় করে।
বেশীরভাগ লোকই উদ্বৃত্তের বিষয়ে খেয়াল করবে না বা যত্ন করবে না, কিন্তু আপনি যদি আপনার ওয়েব ডেভেলপমেন্টকে পরিষ্কার, সুশৃঙ্খল, স্পার্টান উপায়ে করতে চান, কিন্তু তারপরও GUI সম্পাদক ব্যবহার করতে চান, তাহলে এমন অনেক সরঞ্জাম রয়েছে যা আপনাকে চর্বি বজায় রাখতে সাহায্য করতে পারে এবং ঝরঝরে কোড।
এই টুলগুলি লিন্ট/পরিপাটি ইউটিলিটি হিসাবে পরিচিত এবং এইচটিএমএল এবং তার সাথে থাকা ফাইলগুলির আউটপুটকে ছোট, পরিষ্কার এবং আরও ভালভাবে সাজানোর জন্য ব্যবহৃত হয়। এই টিউটোরিয়ালে, আমি এই ইউটিলিটিগুলির একটি সংগ্রহ উপস্থাপন করতে যাচ্ছি, যার বেশিরভাগ আমি ব্যক্তিগতভাবে ব্যবহার করি, যাতে আপনিও আরও মার্জিত এবং কোলেস্টেরল-মুক্ত ওয়েব বিকাশ উপভোগ করতে পারেন। চল শুরু করি.
HTML পরিপাটি
HTML পরিপাটি সম্ভবত সবচেয়ে জনপ্রিয় HTML পরিপাটি উপযোগী উপলব্ধ. এই ছোট্ট প্রোগ্রামটি আপনার কোডের সাহায্যে বিস্ময়কর কাজ করতে পারে, অবৈধ এইচটিএমএল ঠিক করতে সাহায্য করে, অতিরিক্ত হোয়াইটস্পেস অক্ষর মুছে ফেলতে, লেআউট উন্নত করতে এবং চূড়ান্ত মার্কআপের ইন্ডেন্টেশন করতে পারে।
এটি সমস্ত প্রধান অপারেটিং সিস্টেমে ব্যবহার করা যেতে পারে। অধিকন্তু, বেশিরভাগ ওয়েব সম্পাদক তাদের নিজস্ব GUI এর মধ্যে থেকে পরিপাটি চালাতে সক্ষম, যা কাজ এবং পরিষ্কার কোড বজায় রাখা উভয়কেই সহজ করে তোলে।
লিনাক্স মিন্ট 6 ফেলিসিয়ার ব্লুফিশের একটি উদাহরণ এখানে দেওয়া হল:
এখানে Windows XP-এ KompoZer-এ পরিপাটি কনফিগারেশনের একটি উদাহরণ:
এই দুটি চমৎকার ওয়েব সম্পাদক সম্পর্কে আরও জানতে, অনুগ্রহ করে এই নিবন্ধটি দেখুন। একটি জনপ্রিয় উইন্ডোজ টেক্সট এডিটর নোটপ্যাড++ ইতিমধ্যেই ইন্সটল করা পরিপাটি প্লাগইন সহ আসে, যাতে আপনি সম্পাদক না রেখেই কোডটি সম্পাদনা করতে পারেন।
পরিপাটি কিভাবে কাজ করে তার একটি উদাহরণ এখানে। আমি একটি ফাঁকা পাঠ্য নথিতে কয়েকটি শব্দ লিখতে যাচ্ছি এবং তারপর এটির বিরুদ্ধে পরিপাটি চালাব। পরিপাটি শুধুমাত্র আউটপুটকে সুন্দর করবে না, এটি অনুপস্থিত, প্রয়োজনীয় HTML (XHTML) ট্যাগ যোগ করবে এবং সঠিক ইন্ডেন্টেশন তৈরি করবে:
আগে:
পরে:
অথবা এই:
আপনি HTML-কে XHTML-এ রূপান্তর করতে পারেন, XML-এ রূপান্তর করতে বা রিইন্ডেন্ট করতে পারেন, মোড়ানো ব্যবহার করতে পারেন, এমনকি Microsoft Word নথিগুলিও পরিষ্কার করতে পারেন!
সাধারণভাবে, পরিপাটি একটি কমান্ড লাইন ইউটিলিটি। এটি চালানোর জন্য যা লাগে তা হল পরিপাটি filename.html চালিয়ে একটি পছন্দসই HTML ফাইলের বিরুদ্ধে এটিকে আহ্বান করা। এইচটিএমএল ফাইলে প্রত্যাশিত এক্সটেনশন বা হোয়াইটস্পেস ছাড়া কোনো বিন্দু থাকা উচিত নয়, কারণ এগুলো ইউটিলিটির কার্যকারিতা ভেঙে দিতে পারে। যা যুক্তি এবং সাধারণ "ভাল" কোডিং নির্দেশিকাকে বোঝায়৷
৷
একইভাবে, আপনি যদি ওয়েব এডিটরগুলির মধ্যে একটির মধ্যে পরিচ্ছন্নতাকে আমন্ত্রণ জানান, তারা কীভাবে কনফিগার করা হয়েছে তার উপর নির্ভর করে, আপনি সমস্ত অসঙ্গতি, ত্রুটি এবং সতর্কতাগুলির একটি দীর্ঘ প্রতিবেদন পেতে পারেন। Bluefish আপনার জন্য এটি করবে:
পরিপাটি করুন
পরিপাটি অনেক আকার এবং ফর্ম আসে. তথ্যের সেরা উৎস হল অফিসিয়াল পেজ। মূল বিকাশকারী, ডেভ র্যাগেটের পৃষ্ঠাটি দেখতে আপনাকে স্বাগত জানাই, যদিও প্রকল্পের উন্নয়ন, সংশোধন এবং উন্নতিগুলি এখন সোর্সফোর্জ সাইটে একত্রিত হয়েছে।
লিনাক্স
পরিপাটি বেশিরভাগ, জনপ্রিয় ডিস্ট্রোগুলির ভান্ডারে অন্তর্ভুক্ত করা হয়, তাই এটি প্রাপ্ত করা কোনও সমস্যা হওয়া উচিত নয়।
উইন্ডোজ
উইন্ডোজ ব্যবহারকারীদের বেশ কয়েকটি পছন্দ রয়েছে:তারা নোটপ্যাড++ ব্যবহার করতে পারেন, উদাহরণস্বরূপ, বা একটি উইন্ডোজ এক্সিকিউটেবলের জন্য যেতে পারেন, যা পরে এইচটিএমএল ফাইলের বিরুদ্ধে কমান্ড লাইন থেকে বা KompoZer-এর মতো একটি ওয়েব সম্পাদক ব্যবহার করা যেতে পারে এবং প্লাগইনগুলির একটির মাধ্যমে কল করতে পারে।
আপনি যদি কমান্ড লাইন অপছন্দ করেন, ডার্ক পেহেল একটি GUI সংস্করণও তৈরি করেছে, যা অন্যান্য অপারেটিং সিস্টেমেও উপলব্ধ।
অনলাইন সেবা
পরিপাটি সরাসরি অনলাইনেও ব্যবহার করা যেতে পারে, কোনো ইনস্টলেশনের প্রয়োজন নেই। W3C আন্তর্জাতিক WWW স্ট্যান্ডার্ড সংস্থা নিজেই সহ বেশ কয়েকটি ওয়েবসাইট এই পরিষেবাটি অফার করে। আপনাকে শুধুমাত্র আপনার HTML ফাইলের URL-এর সাথে লিঙ্ক করতে হবে এবং পরিপাটি করে চালাতে হবে।
ফায়ারফক্স এক্সটেনশন
একটি ফায়ারফক্স এক্সটেনশনও উপলব্ধ আছে, যদিও শুধুমাত্র উইন্ডোজের জন্য। এক্সটেনশনটি বেশ ভারী, 2.6MB ডাউনলোড, কিন্তু এটি আপনাকে আপনার ব্রাউজারের মধ্যে বর্ধিত বৈধতা ক্ষমতা প্রদান করে। আরো বিস্তারিত জানার জন্য আপনাকে অফিসিয়াল সাইটেও যেতে হবে।
তারপর, জাভা, পাইথন, পিএইচপি, এবং রুবি সংস্করণ পরিপাটি আছে. তালিকা প্রায় অবিরাম।
CSSTidy
CSSTidy হল একটি ওপেন সোর্স CSS পার্সার এবং অপ্টিমাইজার। HTML টিডির মতো, এটি CSS ফাইলগুলির কোড পরিষ্কার করতে, প্রোপার্টি স্ট্রিংগুলিকে যেখানে উপলব্ধ সেখানে হেক্স কোডে রূপান্তর করতে, হোয়াইটস্পেস অক্ষরগুলি সরাতে, সদৃশ বৈশিষ্ট্যগুলি সরাতে এবং মার্জ করতে এবং আরও অনেক কিছু করতে ব্যবহৃত হয়। এইভাবে, CSSTidy CSS ফাইলের মোট আকার দশ শতাংশ কমিয়ে আনতে পারে।
CSSTidy হল একটি ক্রস-প্ল্যাটফর্ম সমাধান, Linux, Windows এবং Mac-এ উপলব্ধ। C++ এবং PHP সংস্করণও পাওয়া যায়। এছাড়াও একটি অনলাইন ফরম্যাটার এবং অপ্টিমাইজার রয়েছে, পাঁচটি ভাষায় উপলব্ধ, যা আমরা HTML পরিচ্ছন্নতার সাথে দেখেছি।
HTML টিডির মতো, CSSTidy একটি কমান্ড লাইন ইউটিলিটি এবং ব্যবহার করা অত্যন্ত সহজ।
এখানে CSSTidy একটি CSS ফাইল অপ্টিমাইজ করার একটি উদাহরণ:
Weblint
এটি আরেকটি এইচটিএমএল অপ্টিমাইজেশন ইউটিলিটি যা আপনি বিবেচনা করতে চাইতে পারেন, যদিও এটি এইচটিএমএল টিডির তুলনায় কম শক্তিশালী এবং কম বহনযোগ্য, যেহেতু এটি শুধুমাত্র HTML 4.0 নথির সাথে কাজ করে। এটি ব্লুফিশের সাথে অন্তর্ভুক্ত। সাধারণভাবে, ওয়েবলিন্ট শুধুমাত্র লিনাক্সের জন্য উপলব্ধ (রেপোতে)।
উপসংহার
আপনি একজন অপেশাদার বা পেশাদার ডেভেলপার হোন না কেন, HTML এবং CSS পরিপাটি ইউটিলিটিগুলি খুব দরকারী। আপনি যদি কঠোর আন্তর্জাতিক মানদণ্ড পূরণ করে এমন উচ্চ-মানের সামগ্রী তৈরি করার চেষ্টা করেন, তাহলে আপনার সেগুলি ব্যবহার করার কথা বিবেচনা করা উচিত।
তারা কেবল একটি ভাল স্থাপিত আউটপুট তৈরি করতে এবং ফাইলগুলিকে আরও কমপ্যাক্ট করতে সহায়তা করবে না, তারা আপনাকে ওয়েব স্ট্যান্ডার্ডগুলি মেনে চলার মাধ্যমে আপনার চিন্তাভাবনা এবং কাজ করার পদ্ধতি পরিবর্তন করতে বাধ্য করবে৷ আপনি আপনার ওয়েব নথির সামগ্রিক গুণমান এবং ধারাবাহিকতা উন্নত করবেন। এবং আপনার পাঠকরা এই বা সেই রেজোলিউশনে এই বা সেই ব্রাউজারে আউটপুট কেমন হতে পারে তা নিয়ে চিন্তা না করেই প্রথম-শ্রেণীর সামগ্রী উপভোগ করতে পারবেন৷
আপনি যদি ওয়েব ডেভেলপমেন্টের জগতে প্রবেশ করতে চান বা এটিতে আপনার প্রথম পদক্ষেপগুলি তৈরি করতে চান, তাহলে HTML পরিপাটি এবং CSSTidy ব্যবহার করার কথা বিবেচনা করার এটাই সেরা সময়৷ আপনি কেবল আপনার নিজের কাজকে আরও আনন্দদায়ক করে তুলবেন না, আপনি কোডের বড় জগতটিকে আরও ছোট হতে সাহায্য করবেন। আরে, প্রতিটি নম্র অবদান গুরুত্বপূর্ণ।
চিয়ার্স।
