সুপ্রিয় টেকটিউনস কমিউনিটি, সবাইকে আমার আন্তরিক সালাম এবং শুভেচ্ছা জানিয়ে আমার আজকের টিউন শুরু করছি ।
আমার আজ পরীক্ষা হওয়ার কথা ছিল । কিন্তু ক্লাস এ গিয়ে ১ ঘন্টা বসে থাকার পর শুনলাম স্যার ভুলে গেছে পরিক্ষার কথা (বিজ্ঞানীদের ভূলো মন আমার মেজাজ চনমন) । সেই সাথে কালকের পরীক্ষাও স্থগিত । একটু সময় হাতে পেলাম আর তাই টিউন করতে বসে গেলাম ।

আমার গত টিউনে আমাকে অনেকেই অনুরোধ করেছে যাতে জেন কোডিং (ইমেট) সম্পর্কে একটা টিউন করি । তাদের অনুরোধের প্রেক্ষিতেই আজকের টিউনটি করা ।
যাইহোক এবার কাজের কথায় আসি । প্রথমেই জেনে নিই জেন কোডিং আসলে কি জিনিস? এটা খায় নাকি মাথায় দেয়!!!!
জেন কোডিং হলো একটা নোডপ্যাড প্লাগিন যেটা দিয়ে আমরা HTML এবং CSS এর জন্য সম্পুর্ণ কোডিং না করে শুধুমাত্র কিছু নির্দিষ্ট কি-ওয়ার্ড টাইপ করে নির্ভুলভাবে আমাদের কাঙ্খিত ফলাফল পেতে পারি । এটা ব্যবহার করা অনেক সহজ এবং এটা দিয়ে অনেক দ্রুত কাজ করা যায় ।


আমাদের পরিচিত এবং বহুল ব্যবহৃত প্রায় সব ধরনের টেক্সট এডিটরে জেন কোডিং সাপোর্ট করবে ।
তবুও আমি আপনাদের সুবিধার্থে এডিটর গুলোর নাম উল্লেখ করছি ।
=>> Notepad++
=>> Sublime Text
=>> EditPlus
=>> Ultra Edit
=>> Vim Editor
=>> Coda etc;
=>> SlickEdit;
=>> TextMate;
=>> TopStyle;
=>> CodeMirror;
=>> Espresso;
=>> PsPad;
উল্লেখিত এডিটর গুলোর মধ্যে একমাত্র EditPlus এ বিল্ট-ইন ভাবে জেন কোডিং দেওয়া আছে আর বাকি সব গুলোর জন্য জেন কোডিং প্লাগিন ডাউনলোড করে ব্যবহার করতে হবে । EditPlus সম্পর্কে জানতে এখান থেকে EditPlus বিষয়ে আমার টিউনটি দেখুন ।
আমি আজ আপনাদের শুধুমাত্র Notepad++ এবং Sublime Text এ জেন- কোডিং ব্যবহার করা দেখাবো ।

তাহলে চলুন শুরু করি ……..
Notepad++ সম্পর্কে আপনারা সবাই জানেন । আপনাদের কম্পিউটারে Notepad++ নেই এটা ভাবাও বোকামি… তবুও যাদের Notepad++ নেই বা মান্ধাতা আমলের Notepad++ ব্যবহার করছেন তারা এখান থেকে Notepad++ এর লেটেস্ট ভার্সনটি ডাউনলোড করে নিন ।
এবার জেন কোডিং ডাউনলোড করার পালা । আপনারা হয়তো ভাবছেন এতো কাজের প্লাগিন যেহেতু সাইজটা তাহলে কতইনা বড় হবে ! কিন্তু আপাদের হতাশ করে দিয়ে বলছি এটার সাইজ মাত্র ১০০ কেবি । সুতরাং এখান থেকে তারাতারি ডাউনলোড করে নিন ।


ডাউনলোড করে এক্সট্রাক্ট করলে NppScripting নামে একটা ফোল্ডার এবং NppScripting.dll নামের একটা ফাইল পাবেন । এগুলো কপি করে C drive>> Program Files>> Notepad++>> Plugins এর মধ্য পেস্ট করে দিন । এখন Notepad++ ওপেন করলে মেনু বারে আপনি জেন কোডিং অপশন দেখতে পাবেন ।
Sublime Text Editor এ Zen Coding প্লাগিন Emmet নামে পরিচিত । Sublime Text Editor এ Emmet প্লাগিন কিভাবে ব্যবহার করতে হয় এটা নিয়ে আমাদের সকলের প্রিয় টিউনার “রনি সাটিয়ার” ভাইয়ের একটা সুন্দর টিউন আছে যেটা দেখে আপনারা অনায়াসে Emmet ব্যবহার করতে পারবেন ।

রনি সাটিয়ারের টিউনটা আপনারা এখান থেকে দেখে নিতে পারেন ।
আশা করছি আপনারা সবাই কোন সমস্যা ছাড়াই জেন কোডিং প্লাগিন Notepad++ এবং Sublime Text এ সংযুক্ত করতে পারছেন । এবার জেনে নিন কিভাবে ব্যবহার করবেন এবং কিভাবে এটা কাজ করে ।
জেন কোডিং ব্যবহার করে আপনাকে শুধুমাত্র কিছু নির্দিষ্ট কোডিং ব্যবহার করতে হবে । তারপর Ctrl+E চাপলেই সেটা বর্ধিত হয়ে যাবে ।

যেমন আপনি HTML 4 Transitinal এর একটা ডকুমেন্ট তৈরী করবেন । এর জন্য ডিফল্ট ভাবে আপনাকে অনেক গুলো কোড লিখতে হবে । কিন্তু জেন – কোডিং ব্যবহার করে আপনি শুধুমাত্র html:4t লিখে Ctrl+E চাপলেই নিচের মত অটো কোডিং হয়ে যাবে ।

এবাবে আপনি HTML 5এর জন্য html:5; HTML 4.01 strict এর জন্য html:4s; XHTML এর জন্য html:xxs ইত্যাদি লিখে Ctrl+E চাপলেই অটো কোডিং হয়ে যাবে । বিশ্বাস না হলে এখনি করে দেখুন ।


এবার ধরুন আপনি চাচ্ছেন আপনারে Menu নামে একটা id থাকবে তার মধ্যে একটি ul থাকবে তার ভেতরে ৫টা li থাকবে এবং প্রত্যেকের একটা করে class থাকবে এবং li গুলোর ভেতরে a থাকবে তাহলে নিচের মতো লিখুন আর Ctrl+E চাপুন দেখুনতো কাজ হয় কিনা ।
#menu>ul>li.class*5>a
আবার ধরুন আপনি ৫টা div নিবেন প্রত্যেকের একই অথবা আলাদা আলাদা class/id হবে ।
তাহলে এভাবে লিখুন আর Ctrl+E চাপুন দেখুন হয় কিনা ।
div.class*5 [একই id/class এর জন্য ]
div#id$*5 [আলাদা এর জন্য । ]
এখন আসুন জেনে নেই কিভাবে Head/body Tag এর মধ্যে CSS, Favicon, Javascript লিংক করতে হবে ….
নিচের মতো করে চেষ্টা করে দেখুনতো কাজ হয় কিনা,
Link:css [For CSS Linking]
link:favicon [For Favicon Linking]
meta:utf [For Unicode Support]
script:src [For Javascript Source Adding]
script [For Javascript]
এবার আসি কিছু CSS প্রপাটি নিয়ে
ধরুন আপনি চাচ্ছেন
margin:0; padding: 0; font-family:sans-serift; background-color:#abc; font-size: 14px; height: auto; width: auto;
এরকম কোডিং করতে ।

তাহলে নিচের মতো লিখুন তার দেখুন মজা !!
m:0 then Ctrl+E;
p:0 then Ctrl+E;
bgc:then Ctrl+E;
ff:ss then Ctrl+E;
fz then Ctrl+E;
h:a then Ctrl+E;
w:a then Ctrl+E;
জেন- কোডিং দিয়ে প্রায় সব ধরনের HTML এবং CSS কোডিং করতে পারবেন । আমি সামান্য কিছু আপনাদের দেখিয়ে দিলাম কিন্তু বাকি কাজ গুলোতো আপনাদের নিজে থেকেই শিখতে হবে । কিন্তু বাঙ্গালী বলে কথা নিজে থেকে কিছু শিখতে চায় না । তাই আপনাদের জন্য জেন কোডিং চিটশীট দিয়ে দিলাম । জেন কোডিং ডাউনলোড করলেই আপনি তার ভেতরে পেয়ে যাবেন ।


আশা করছি কোডিং এ আপনারা আজ থেকে ম্যাজিশিয়ান হয়ে যাবেন।
তারপরেও আপনাদের কোন সমস্যা হলে আমাকে জানাবেন ।

আজ আমার ২২তম জন্মদিন, জন্মদিনে মানুষ উপহার পায় কিন্তু আজ আমি আপনাদের সবাইকে দিচ্ছি কারন ভালোবাসা বলে কথা । টেকটিউনস পরিবারকে আমিও আপনাদের সবার মতো অনেক ভালোবাসি । যাইহোক ওয়েব ডিজাইনের ২টা গুরুত্বপুর্ন টুলস আপনাদের আজ আমি উপহার দিলাম ।

এখান থেকে ডাউনলোড করে নিন তারাতারি । উপহারটি খুবই ছোট কিন্তু উপহার বলে কথা । কি দিলাম সেটা বড় কথা না ।
সবার মঙ্গল কামনা করে আজ এখানেই শেষ করছি । ভালো থাকবেন সকলে ।

আর হ্যাপি কোডিং..............
ফেসবুকে আমি
বি: দ্র: আপনারা হয়তো টিউনটি ৫মিনিটেই পড়ে ফেলছেন কিন্তু টিউনারের টিউনটি করতে কমপক্ষে ৫ ঘন্টা সময় লেগেছে । অনেক কিছু ভাবতে হয়েছে । টিউনার আপনাদের কাছে কিছুই চায়না । শুধু মাত্র এইটুকুই আশা করে যে আপনারা যদি টিউনটি থেকে কিছুটা উপকার পান তাহলে যেন তাকে একটা ধন্যবাদ জানান । সুতরাং সব সময় আপনাদের মন্তব্য আশা করি ।

কারন আপনাদের সুচিন্তিত মন্তব্য গুলোই আমাদের টিউন করতে উৎসাহিত করে । সুতরাং আপনাদের সমস্যা থাকলে বা কোন চাওয়া থাকলে অবশ্যই টিউমেন্টের মাধ্যমে জানাবেন । আমি যথাসাধ্য চেষ্টা করবো আপনাদের সহযোগিতা করার জন্য ।
।