Quantcast
ADs by Techtunes tAds
ADs by Techtunes tAds

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

টিউন বিভাগ ওয়েব ডিজাইন
প্রকাশিত
জোসস করেছেন

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

ADs by Techtunes tAds

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

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

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

জেন কোডিং হলো একটা নোডপ্যাড প্লাগিন যেটা দিয়ে আমরা 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+ এর লেটেস্ট ভার্সনটি ডাউনলোড করে নিন।

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

ADs by Techtunes tAds

ডাউনলোড করে এক্সট্রাক্ট করলে 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 এর জন্য। ]

ADs by Techtunes tAds

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

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

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

শেষ কথা

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

ADs by Techtunes tAds

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

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

ADs by Techtunes tAds
Level 6

আমি সানিম মাহবীর ফাহাদ। Supreme Tuner, Techtunes বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 5 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 179 টি টিউন ও 3522 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 91 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

অন্য আর দশটা মানুষের মতোই একদিন এই পৃথিবীতে আসছিলাম। তারপর থেকে নিজের মতো করেই নিজের পৃথিবীতে বেঁচে আছি। এরপর একদিন টুপ করে জীবন্ত পৃথিবী থেকে ঝরে পড়বো। জীবনতো এটাই, তাই না?


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

ধন্যবাদ
ধন্যবাদ
@শিখতে চাই: ভাই, প্রথম কমেন্ট একটা বিজ্ঞাপন দিয়ে শুরু করলেন!!!!!!
ধন্যবাদ ভাই । জেন কোডিং এর পুরো লিস্ট টা কি আছে? থাকলে যদি লিঙ্ক টা দিতেন ভালো হত ।
    @ফিদা আল হাসান: আমার দেওয়া জেন কোডিং এর লিংক থেকে ডাউনলোড করলে আপনি জেন কোডিং এর পুরো লিস্ট পাবেন । কমেন্ট করার জন্য ধন্যবাদ ।
আপনার গিফট ২ টি ও অনেক ভালো লেগেছে । বিশেষ করে Pixie টা । অনেক কাজে লাগবে । এরকম আরও সফটওয়্যার থাকলে শেয়ার করুন
Level 0
Happy Birth Day
কোড কপি করে ctrl+e চাপি কিন্তু কাজ হয়না। ওইটার একটা স্ক্রিন সট দেন।
    @সাজিদুল হাসান: আপনি সম্ভবত প্লাগিনটা ভালো ভাবে সংযোজন করতে পারেন নাই । নাহলে সমস্যা হওয়ার কথা না । আর তাছাড়া আপনি নিশ্চিত হয়ে নিন যে আপনি সঠিক ভাবে কোড টাইপ করেছেন । ধন্যবাদ কমেন্টের জন্য ।
দোয়া করি আপনার জন্য @ অনেক দূর এগিয়ে যেতে পারেন।।
    @হোছাইন আহম্মদ: ধন্যবাদ হোসাইন ভাই, আপনার মতো মানুষের দোয়া কাছে থাকলে পৃথিবীটাই জয় করা যাবে ।
অনেক অনেক শুভ কামনা রইল। শুভ জন্মদিন।। ধন্যবাদ সুন্দর টিউনটির জন্য।।।
আমার edit plus এ কাজ হয়েছে কিন্তু note pad ++ এ কাজ করেনা।
    @সাজিদুল হাসান: কাজ করতেই হবে । আপনি ভালোভাবে সবকিছু ট্রাই করুন । দরকার হলে শুরু থেকে আবার করুন । এটা পরিক্ষিত, তাই কাজ না হওয়ার কোন কারন নেই । আর আপনি কোডিং করার সময় চিটশীট দেখে কোডিং করবেন । তাহলে ভুল হবেনা । আশা করছি আপনার সমস্যার সমাধান হবে ।
Level 0
Happy birthday! আর জটিল টিউন টার জন্য tnx! উপহারটার জন্য ধন্যবাদ । প্রশ্ন । Zencoding কি XP তে কাজ করে ? *দিয়ে ৫টা li নিলে সব একলাইনে থাকছে প্রত্যেক li আলাদা লাইনে হয়না !
    @shakilmax: আমি জানিনা যে XP তে কাজ করে কিনা । কিন্তু এটা note pad ++ এর জন্য । XP তে সমস্যা হওয়ার কথা না । XP তে নোটপ্যাড++ চললে জেন কোডিং ও চলবে বলে মনে হয় । ধন্যবাদ কমেন্টের জন্য ।
    @shakilmax: *দিয়ে ৫টা li নিলে হবেনা ভাই, li নিয়ে তারপর *৫দিতে হবে । তবে অবশ্যই লক্ষ্য করবেন যেন মাঝখানে কোন স্পেস না থাকে । আশা করছে আপনার সমস্যার সমাধান হবে।
Dhonyobad Dada r Happy Birthday to Fb Te bole6i tai abar bollamna.
Level 0
অনেক ধন্যবাদ । আমি খুব অলস । দেখি এইবার কিছু করতে পারি নাকি ।
    @tuhinbc: ধন্যবাদ তুহিন ভাই আপনার কমেন্টের জন্য । তবে সংবিধিবদ্ধ সতর্কিকরন: এটা অলসদের জন্য না । যারা দ্রুত কাজ করতে চান শুধুমাত্র তাদের জন্য ।
ডাউনলোড হয় না। দয়া করে যদি লিঙ্ক ঠিক করে দিতেন। ধন্যবাদ
    @samir01: দুঃখিত ! আমি আমার ড্রপবক্সে কিছুটা পরিবর্তন আনছিলাম ফলে লিংক পরিবর্তন হয়ে গিয়েছিল । এখন আপডেট করে দিয়েছি । কমেন্টের জন্য ধন্যবাদ ।
শুভজন্ম দিন :) ইমেট আমার খুবই পছন্দের একটি প্লাগিন। http://docs.emmet.io/cheat-sheet/ এখান থেকে ইমেট এর সব শর্টকাট দেখে নিতে পারবেন। আমি অবশ্যি সিএসএস এ ইমেট তেমন ব্যবহার করি না। তবে এইচটিএমএল এর জন্য ইমেট বেশ কাজে লাগে বলতে হবে। ধন্যবাদ টিউন করার জন্য।
    আপনাকেও ধন্যবাদ রাকিবুল হাসান ভাই, সুন্দর একটা কমেন্ট করার জন্য আর আপনার দেয়া লিংকটি আমি অবশ্যই দেখবো । সাথে থাকবেন ।
osthir ..... tnx bro
আসসালামুয়ালাইকুম। ভাই কেমন আসেন? আপনার দেয়া লিঙ্ক এ গেলে Zen Coding.rar 10 hrs ago · 172.15 KB এটা আসে আপনি বলেসেন ১০০ কেবি মাত্র? আর এটাত rar ফাইল। এটা ওপেন করব কিভাবে। আপনি বলেসেন ডাউনলোড করে এক্সট্রাক্ট করলে NppScripting নামে একটা ফোল্ডার এবং NppScripting.dll নামের একটা ফাইল পাব কিন্তু এক্সট্রাকট ত হয়না এখন কি করবো?
    Zen Coding 100 Kb but ami er modde zen coding cheat sheet dia diaci. upi first rar file extract krle tar modde aro akti zip file paben, tar moddhe zen coding ace. Sorry For my mistake. Pore r update kra hyni. kosto kre dekhe niben, asha krci kuno somossa hbena. Thanks for comment.
Level 0
অনেক ধন্যবাদ। পিডিএফ করে রাখলাম।
অসংখ্য ধন্যবাদ!
দারুণ পোস্ট। জেন কোডিং শিখতে পারলাম