ওয়েব ডেভেলপমেন্টের জন্য অফলাইন এবং অনলাইন বিভিন্ন সফটওয়্যার এবং ওয়েব সাইট নিয়ে আলোচনা করা হয়েছে এ নথিতে।

ওয়েব ডেভেলপমেন্ট বলতে ওয়েব সাইট তৈরি বা ওয়েব এ্যাপ তৈরি করা বুঝানো হয়। এ কাজে ব্যবহৃত সফটওয়্যার এবং ওয়েব সাইট সম্পর্কিত তথ্য দেয়া হয়েছে এ পাতায়। এখানে মুক্ত এবং বিনামূল্য সফটওয়্যার সমূহকেই শুধু প্রাধান্য দেয়া হয়েছে।

Offline Apps

অফলাইন বলতে যে সফটওয়্যার গুলো ইন্টারনেট ছাড়াই চালানো যায় তাদের বুঝানো হয়।

Brackets

Brackets হল Adobe এর একটি ওপেনসোর্স এবং বিনামূল্য Web Development পন্য। এটির বৈশিষ্ট্য হল এটি তৈরি করা হয়েছে শুধু মাত্র HTML, CSS এবং JavaScript দিয়ে! এটি ডাউনলোড করতে পারেন brackets.io থেকে। এটি ডাউনলোড করে ইনস্টল করে চালু করলেই ছোট ব্যবহারবীধি দেখতে পাবে।

Brackets নিয়ে আমাদের নির্দেশিকাটি দেখতে পারেন এখানে।

Notepad

Ctrl + R চাপুন এবং লিখুন “notepad” তারপর OK দিন। দেখুন Notepad চালু হয়েছে। এতে আপনি HTML কোড লিখে সংরক্ষণ করুন এভাবেঃ

• File > Save as এ গিয়ে File Name এ ওয়েবপেজের নাম দিন সাথে .htm অথবা .html এক্সটেনশন দিন। যেমনঃ mywebpage.html
• Save as type থেকে All files (*.*) সিলেক্ট করে দিন।
• আপনার HTML কোড এ ইউনিকোড (যেমনঃ বাংলা লিখা) থাকলে Encoding থেকে UTF-8 সিলেক্ট করে Save এ ক্লিক করুন।

এবার যেখানে আপনার ওয়েবপেজটি সংরক্ষন করেছেন সেখানে গিয়ে ফাইলটিতে ডাবল ক্লিক করলেই ফাইলটি আপনার ডিফল্ট ব্রাউজার এ চালু হবে।

এখানে HTML ডকুমেন্ট তৈরির ধাপ দেখানো হয়েছে। অন্য ডকুমেন্টর জন্যও একই ধাপ অনুসরন করতে হবে, শুধু এক্সটেনশন ফাইল টাইপ অনুযায়ী দিতে হবে। যেমনঃ CSS হলে .css, PHP হলে .php ইত্যাদি।

Online Apps

অনলাইন বলতে যে সব সফটওয়্যার ইন্টারনেটের মাধ্যমে চালাতে হয় তাদের বুঝানো হয়। এসব সফটওয়্যার/ এ্যাপ দিয়ে অনলাইটনেই আপনি ডকুমেন্ট তৈরি করতে এবং প্রিভিউ দেখতে পারবে। প্রয়োজনে তা ডাউনলোড এবং ক্লাউড হোস্টিং এ সংরক্ষন করারও সুবিধা পাওয়া যায়।

#01 IW Code Editor (ইমাজিনেটিভ ওয়ার্ল্ড কোড এর নিজস্ব কোড এডিটর)

code.imaginativeworld.org/iwceditor/

সুবিধা সমূহঃ

• HTML, CSS এবং JavaScript একত্রে কোডিং এবং সরাসরি প্রিভিউ।
• স্বয়ংক্রিয় ব্রাউজারে কোড সংরক্ষণ।

#02 dabblet

dabblet.com

সুবিধা সমূহঃ

• HTML, CSS এবং JavaScript একত্রে কোডিং এবং সরাসরি প্রিভিউ।
• যে কোনো কোডের অংশে মাউস রেখা শুধু ঐ কোডের প্রিভিউ।

#03 code pen

codepen.io/pen/

সুবিধা সমূহঃ

• HTML, CSS এবং JavaScript একত্রে কোডিং এবং সরাসরি প্রিভিউ।
• কোডকে ওয়েব পেজ এবং ওয়ার্ডপ্রেস.অর্গ এ যুক্ত (embed) করার সুবিধা।

#04 Mozilla Thimble

thimble.webmaker.org

সুবিধা সমূহঃ

• HTML এবং CSS একত্রে কোডিং এবং সরাসরি প্রিভিউ।

#05 JSFiddle

jsfiddle.net

সুবিধা সমূহঃ

• HTML, CSS এবং JavaScript একত্রে কোডিং এবং সরাসরি প্রিভিউ।

ওয়েব সাইট

ওয়েব ডেভেলপমেন্ট সম্পর্কে জানতে পারবেন এরকম তথ্য সমৃদ্ধ কিছু ওয়েব সাইটের তালিকাঃ

• w3schools.com
• docs.webplatform.org
• css-tricks.com
• MDN (Mozilla Developer Network)