আপনি কি একজন ওয়েব ডিজাইনার? আজ থেকে হয়ে যান ম্যাজিশিয়ান, ৫ মিনিটের কোড লিখুন ৫ সেকেন্ডে! আপনার জন্যই আজকের সবকিছু! হ্যাপি কোডিং … | Techtunes

– بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ –

সুপ্রিয় টেকটিউনস কমিউনিটি সবাইকে আমার সালাম এবং শুভেচ্ছা জানিয়ে শুরু করছি আমার আজকের টিউন।

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

যাইহোক এবার কাজের কথায় আসি। প্রথমেই জেনে নিই জেন কোডিং আসলে কি জিনিস? এটা খায় নাকি মাথায় দেয়!

জেন কোডিং হলো একটা নোডপ্যাড প্লাগিন যেটা দিয়ে আমরা 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+ ওপেন করলে মেনু বারে আপনি জেন কোডিং অপশন দেখতে পাবেন।

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 [আলাদা id/class এর জন্য। ]

এখন আসুন জেনে নেই কিভাবে 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 এর মত সাজেশন পাবেন। আশা করছি কোডিং এ আপনারা আজ থেকে ম্যাজিশিয়ান হয়ে যাবেন।

আপনাদের জন্য কিছু উপহার

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

শেষ কথা

টিউনটি যদি আপনাদের ভালো লেগে থাকে অথবা বুঝতে যদি কোন রকম সমস্যা হয় তাহলে আমাকে টিউমেন্টের মাধ্যমে জানাতে ভুলবেন না। কারন আপনাদের যেকোন মতামত আমাকে সংশোধিত হতে এবং আরো ভালো মানের টিউন করতে উৎসাহিত করবে। আর আপনাদের যাদের টেকটিউনসে একাউন্ট নেই তারা আমার ব্যক্তিগত ফেসবুক পেজ লিংক থেকে আমার টিউনে টিউমেন্ট করতে পারবেন। পেজে লাইক দিয়ে আমার সকল টিউন বিষয়ে আপডেট থাকুন। সর্বশেষ যে কথাটি বলবো সেটা হলো, আশাকরি এবং অপরকেও কপি পেস্ট টিউন করতে নিরুৎসাহিত করি। সবার সর্বাঙ্গিন মঙ্গল কামনা করে আজ এখানেই শেষ করছি। দেখা হবে আগামী টিউনে।

আপনাদের সাহায্যার্থে আমি আছি.

ফেসবুক | টুইটার | গুগল-প্লাস