আমি আপনার এইচটিএমএল 5 অ্যাপ্লিকেশনগুলিতে ফাইলগুলি সংগঠিত করার জন্য একটি প্রস্তাবিত কাঠামোর রূপরেখা দেব। এটি কোনও ধরণের মান তৈরি করার চেষ্টা নয়। পরিবর্তে, আমি কীভাবে যৌক্তিক সুবিধাজনক উপায়ে ফাইলগুলি নামকরণ এবং নামকরণের বিষয়ে পরামর্শ দেব suggestions
আপনার প্রকল্প
ধরে নেওয়া যাক আপনি একটি HTML5 অ্যাপ্লিকেশন তৈরি করছেন। কিছু ক্ষেত্রে আপনি আপনার সার্ভারের মূলটিকে মূল ধারক হিসাবে ব্যবহার করতে পারেন তবে এই নিবন্ধটির প্রয়োজনে আমি ধরে নেব যে কোনও ফোল্ডারে HTML5 অ্যাপ্লিকেশন রয়েছে। এই ফোল্ডারের অভ্যন্তরে আপনাকে অবশ্যই আপনার অ্যাপ্লিকেশন সূচী ফাইল বা প্রধান এন্ট্রি পয়েন্ট তৈরি করতে হবে।
সাধারণত, আপনার অ্যাপ্লিকেশনটিতে এইচটিএমএল, সিএসএস, চিত্র এবং জাভাস্ক্রিপ্ট ফাইল থাকবে। এই ফাইলগুলির মধ্যে কয়েকটি আপনার অ্যাপ্লিকেশনের জন্য নির্দিষ্ট হবে এবং কিছু অন্যান্য একাধিক অ্যাপ্লিকেশন জুড়ে ব্যবহার করা যেতে পারে। এটি একটি খুব গুরুত্বপূর্ণ পার্থক্য। আপনার ফাইলগুলির কার্যকর গোষ্ঠীকরণ করতে আপনাকে অবশ্যই সাধারণ-উদ্দেশ্য ফাইলগুলি অ্যাপ্লিকেশন-নির্দিষ্ট সংস্থান থেকে আলাদা করে শুরু করতে হবে।
- appcropolis প্রকল্পের
- সম্পদ
- বিক্রেতারা
- আমার-index.html
এই সরল বিভাজনটি আপনার ফাইলগুলিতে নেভিগেট করা অনেক সহজ করে তোলে। একবার আপনি বিক্রেতাদের ফোল্ডারের ভিতরে লাইব্রেরি এবং সাধারণ উদ্দেশ্যে ফাইলগুলি স্থাপন করলে এটি স্পষ্ট হয়ে যায় যে আপনি যে ফাইলগুলি সম্পাদনা করবেন সেগুলি উত্সগুলিতে থাকবে ফোল্ডারে থাকবে।
আপনার এইচটিএমএল কোড বাদে আপনার অ্যাপ্লিকেশনের বাকি ফাইলগুলি বেশিরভাগ সিএসএস, জাভাস্ক্রিপ্ট এবং চিত্রসমূহ। সম্ভাবনাগুলি হ'ল আপনি ইতিমধ্যে আপনার অ্যাপ্লিকেশন ফাইলগুলিকে ফোল্ডারগুলির মধ্যে এই জাতীয় সম্পদের সাথে সামঞ্জস্য করে group
- appcropolis প্রকল্পের
- সম্পদ
- বিক্রেতারা
- আমার-index.html
JS ফোল্ডারটি আপনার জাভাস্ক্রিপ্ট কোড রাখা হবে। একইভাবে, ইমেজ ফোল্ডারটি সেই জায়গা যেখানে আপনার ইমেজগুলি যুক্ত করা উচিত যা সরাসরি আপনার অ্যাপ্লিকেশনের সূচক। Html বা অন্য কোনও পৃষ্ঠা থেকে ব্যবহৃত হয়। এই চিত্রগুলির ফোল্ডারটি স্টাইলশিট সম্পর্কিত ফাইলগুলি হোস্ট করার জন্য ব্যবহার করা উচিত নয়। আপনার সিএসএস কোড এবং সম্পর্কিত চিত্রগুলি CSS ফোল্ডারের ভিতরে থাকা উচিত । এটি করে আপনি এমন পৃষ্ঠাগুলি তৈরি করতে পারেন যা সহজেই বিভিন্ন থিম ব্যবহার করতে পারে এবং আপনি আপনার অ্যাপ্লিকেশনটিকে আরও পোর্টেবল করার অনুমতি দিন।
- appcropolis প্রকল্পের
- সম্পদ
- CSS
- নীল থিম
- চিত্র
- নীল-theme.css
- আমার-index.css
- JS
- আমার-index.js
- আমার-কন্টাক্ট-info.js
- চিত্র
- পণ্য
- computer.jpg
- cellphone.png
- printer.jpg
- আমার-কোম্পানী-লোগো-small.png
- আমার-কোম্পানী-লোগো-large.png
- উপাত্ত
- কিছু-data.json
- আরো-data.xml
- সারণীর-data.csv
- অতিরিক্ত data.txt
- বিক্রেতারা
- jQuery
- চিত্র
- Ajax-loader.gif
- আইকন-18-white.png
- jquery.min.js
- jquery.mobile-1.1.0.min.css
- jquery.mobile-1.1.0.min.js
- কিছু-CSS-গ্রন্থাগার
- কিছু-plugin.jquery
- আমার-index.html
- আমার-কন্টাক্ট-info.html
- আমার-products.html
পূর্ববর্তী উদাহরণটি সিএসএস ফোল্ডারের সামগ্রী দেখায় । লক্ষ্য করুন যে default.css নামে একটি ফাইল রয়েছে যা আপনার মূল সিএসএস ফাইল হিসাবে ব্যবহার করা উচিত। ডিফল্ট স্টাইলশীট দ্বারা ব্যবহৃত চিত্রগুলি চিত্রের ফোল্ডারের । আপনি যদি বিকল্প স্টাইলশিট তৈরি করতে চান বা আপনি যদি নিজের ডিফল্ট স্টাইলশিটে সংজ্ঞায়িত বিধিগুলি ওভাররাইড করতে চান তবে আপনি অতিরিক্ত সিএসএস ফাইল এবং সংশ্লিষ্ট ফোল্ডার তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি একটি নীল-থিম.এসএস স্টাইলশীট তৈরি করতে এবং সম্পর্কিত সমস্ত চিত্র একটি নীল-থিমের মধ্যে রাখতে পারেন ফোল্ডারের ভিতরে থাকা উচিত । আপনার যদি সিএসএস বা জাভাস্ক্রিপ্ট কোড থাকে যা কেবলমাত্র একটি পৃষ্ঠার দ্বারা ব্যবহৃত হয় (এই ক্ষেত্রে আমার সূচক html), আপনি পৃষ্ঠার একই নামের সাথে .css এবং .js ফাইলের মধ্যে পৃষ্ঠা নির্দিষ্ট কোডটি গ্রুপ করতে পারেন (ei আমার সূচক) .css এবং my-index.js)। আপনার সিএসএস এবং জাভাস্ক্রিপ্ট কোডটি যথাসম্ভব জেনেরিক হওয়া উচিত তবে আপনি পৃথক ফাইলে রেখে ব্যতিক্রমগুলি অনুসরণ করতে পারেন।
চূড়ান্ত সুপারিশ
ফোল্ডার এবং ফাইলের নামগুলি ঘিরে কিছু চূড়ান্ত সুপারিশ করা উচিত। একটি সাধারণ নিয়ম হিসাবে নিশ্চিত হয়ে নিন যে আপনি সমস্ত ফোল্ডার এবং ফাইলের নামগুলিতে ছোট হাতের অক্ষর ব্যবহার করেছেন। যখন কোনও ফাইল বা ফোল্ডারটির নামকরণ করতে একাধিক শব্দ ব্যবহার করা হয় তখন সেগুলিকে হাইফেন (যেমন আমার-সংস্থা-লোগো-ছোট.png) দিয়ে আলাদা করুন। আপনি যদি এই নিবন্ধের পরামর্শ অনুসরণ করেন তবে সাধারণ সংস্থানগুলি এবং কাস্টম কোডটি সুন্দরভাবে পৃথক করে রাখার সময় আপনার একাধিক পৃষ্ঠা একত্রিত করতে সক্ষম হওয়া উচিত।
অবশেষে, আপনি যদি এই নিবন্ধে প্রস্তাবিত কাঠামোটি ব্যবহার না করা বেছে নেন, তবে একটি সম্মেলনে আটকে থাকা গুরুত্বপূর্ণ। এটি আপনার উত্পাদনশীলতা বৃদ্ধি করবে এবং আরও গুরুত্বপূর্ণ এটি আপনার কাজকে অন্যের দ্বারা বোঝার পক্ষে সহজ করে তোলে।
উত্স ক্রেডিট:
আপনার এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলি কীভাবে সংগঠিত করবেন