আপনি কি একজন ওয়েব ডিজাইনার ??? আজ থেকে হয়ে যান ম্যাজিশিয়ান, ৫ মিনিটের কোড লিখুন ৫ সেকেন্ডে!!! আপনার জন্যই আজকের সবকিছু ! হ্যাপি কোডিং ….. ~ Tips-Tune

রথমেই জেনে নিই জেন কোডিং আসলে কি জিনিস? এটা খায় নাকি মাথায় দেয়!!!!

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

যে সব এডিটরে জেন কোডিং সাপোর্ট করবে

আমাদের পরিচিত এবং বহুল ব্যবহৃত প্রায় সব ধরনের টেক্সট এডিটরে জেন কোডিং সাপোর্ট করবে ।
তবুও আমি আপনাদের সুবিধার্থে এডিটর গুলোর নাম উল্লেখ করছি ।

=>> Notepad++
=>> Sublime Text
=>> EditPlus
=>> Ultra Edit
=>> Vim Editor
=>> Coda etc;
=>> SlickEdit;
=>> TextMate;
=>> TopStyle;
=>> CodeMirror;
=>> Espresso;
=>> PsPad;

উল্লেখিত এডিটর গুলোর মধ্যে একমাত্র EditPlus এ বিল্ট-ইন ভাবে জেন কোডিং দেওয়া আছে আর বাকি সব গুলোর জন্য জেন কোডিং প্লাগিন ডাউনলোড করে ব্যবহার করতে হবে । EditPlus সম্পর্কে জানতে এখান থেকে EditPlus বিষয়ে আমার টিউনটি দেখুন ।

কিভাবে আপনার এডিটরে জেন কোডিং প্লাগিন ব্যবহার করবেন

আমি আজ আপনাদের শুধুমাত্র Notepad++ এবং Sublime Text এ জেন- কোডিং ব্যবহার করা দেখাবো । তাহলে চলুন শুরু করি ……..

Zen Coding For Notepad++

Notepad++ সম্পর্কে আপনারা সবাই জানেন । আপনাদের কম্পিউটারে Notepad++ নেই এটা ভাবাও বোকামি… তবুও যাদের Notepad++ নেই বা মান্ধাতা আমলের Notepad++ ব্যবহার করছেন তারা এখান থেকে Notepad++ এর লেটেস্ট ভার্সনটি ডাউনলোড করে নিন ।

এবার জেন কোডিং ডাউনলোড করার পালা । আপনারা হয়তো ভাবছেন এতো কাজের প্লাগিন যেহেতু সাইজটা তাহলে কতইনা বড় হবে ! কিন্তু আপাদের হতাশ করে দিয়ে বলছি এটার সাইজ মাত্র ১০০ কেবি । সুতরাং এখান থেকে তারাতারি ডাউনলোড করে নিন ।

ডাউনলোড করে এক্সট্রাক্ট করলে NppScripting নামে একটা ফোল্ডার এবং NppScripting.dll নামের একটা ফাইল পাবেন । এগুলো কপি করে C drive>> Program Files>> Notepad++>> Plugins এর মধ্য পেস্ট করে দিন । এখন Notepad++ ওপেন করলে মেনু বারে আপনি জেন কোডিং অপশন দেখতে পাবেন ।

Zen Coding For Sublime Text

Sublime Text Editor এ Zen Coding প্লাগিন Emmet নামে পরিচিত । Sublime Text Editor এ Emmet প্লাগিন কিভাবে ব্যবহার করতে হয় এটা নিয়ে আমাদের সকলের প্রিয় টিউনার “রনি সাটিয়ার” ভাইয়ের একটা সুন্দর টিউন আছে যেটা দেখে আপনারা অনায়াসে Emmet ব্যবহার করতে পারবেন । রনি সাটিয়ারের টিউনটা আপনারা এখান থেকে দেখে নিতে পারেন ।

Zen Coding কিভাবে ব্যবহার করবেন

আশা করছি আপনারা সবাই কোন সমস্যা ছাড়াই জেন কোডিং প্লাগিন 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 কোডিং করতে পারবেন । আমি সামান্য কিছু আপনাদের দেখিয়ে দিলাম কিন্তু বাকি কাজ গুলোতো আপনাদের নিজে থেকেই শিখতে হবে । কিন্তু বাঙ্গালী বলে কথা নিজে থেকে কিছু শিখতে চায় না । তাই আপনাদের জন্য জেন কোডিং চিটশীট দিয়ে দিলাম । জেন কোডিং ডাউনলোড করলেই আপনি তার ভেতরে পেয়ে যাবেন ।

এছাড়াও আপনারা যদি Notepad++ এ Settings>Prefereces>Auto-completion থেকে সবগুলো চেক করে দেন । তাহলে DreamWeaver এর মত সাজেশন পাবেন ।

ওয়েব ডিজাইনের ২টা গুরুত্বপুর্ন টুলস আপনাদের আজ আমি উপহার দিলাম । এখান থেকে ডাউনলোড করে নিন তারাতারি