আসুন আপনার টেম্পলেটকে কিভাবে ক্রস ব্রাউজার সাপোর্ট করবেন তা দেখি !

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



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



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



১. ক্রস ব্রাউজার এর অন্যতম প্রধান বা আমার কাছে প্রথম শর্ত সেটা হল মার্কআপ(HTML) ও স্টাইল(CSS) পরিপূর্ণ ভ্যালিডেশন থাকা। এখানে মার্কআপ(HTML) এ কোন প্রকার এরোর বা ওয়ার্নিং থাকা যাবে না এবং স্টাইল(CSS) এর ক্ষেত্রে ওয়ার্নিং গুলা না হলেও এরোর গুলা অবশ্যই ঠিক করতে হবে এবং আপনার যত স্টাইল(CSS) ফাইল থাকবে সব গুলাই চেক করবেন। এখানে একটা কথা বলে রাখি সকল এরোর বা ভুল কিন্তু এই কাজে ততটা হেল্প করে না তবে এটা একটা স্ট্যান্ডার্ড প্র্যাকটিস এবং সবচেয়ে বড় বিষয় এটা SEO এর জন্যে অনেক সাহায্য করে। কারণ প্রধান সার্চইঞ্জিন গুলা ভ্যালিডেশন রিকমান্ড করে ।



যা দ্বারা করবেনঃ

HTML Validation -> http://validator.w3.org/

or use for html validation for mozila -> https://addons.mozilla.org/en-US/firefox...validator/

CSS Validation -> http://jigsaw.w3.org/css-validator/



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

যেমনঃ header, footer, aside, nav, article {display: block;} এগুলা দ্বারা আমরা ব্রাউজারকে জানিয়ে দিলাম যে এই সব এলিমেন্ট সব block এলিমেন্ট। প্রত্যেক বাউজার তাদের নিজের নিজের ধরণ ও তা প্রকাশ ভিন্ন ভিন্ন ভাবে করে থাকে। তাই প্রত্যেক বাউজার এর জন্যে আলাদা আলাদা CSS লিখা অনেক কষ্ট সাধ্যের তাই আমরা সকল ব্রাউজার কে একই behaviour করার জন্যে আমরা আমাদের CSS প্রথমেই একটা বা একগুলা কোড ব্যবহার করে থাকি এগুলাকে Reset Code বলা হইয়ে ত্থাকে। এখন আবার এই জাইগাই অনেক তর্ক বিতর্ক কোন Reset Code টা ভাল। তবে আমার জানা মতে দুইটা রিসেট কোড সবাই তাদের পছন্দের প্রথমে রেখেছে। সেগুলা হল ->

1. Universal Reset Code .কোড *{margin:0;padding:0}

2. Meyer Reset . রিসেট কোড প্যাক http://meyerweb.com/eric/tools/css/reset/

৩. Normalize রিসেট কোড প্যাক http://necolas.github.io/normalize.css/



কিন্তু আমার মতে এবং বর্তমানে অনেক বড় বড় কম্পানি এবং ওয়েব পোর্টাল সবাই Normalize টা বেশি ব্যবহার করতেছে আমি নিজেও করি তাতে পূর্বের থেকে অনেক কম ফিক্সিং করা লাগে সকল ব্রাউজার এর জন্যে, Bootstrap 3, tympanus.net , html5boilerplate ইত্যাদি জনপ্রিয় ফ্রেময়াক এবং সাইট গুলা এই Normalize রিসেট কোডটা বর্তমানে ব্যবহার করে ।



৩. আমাদের টেম্পলেট টা মুটামুটি সব মডার্ন ব্রাউজারেই ভাল ভাবে দেখাই তবে সব চেয়ে বেশি সমস্যা হই ইন্টারনেট এক্সপ্লোরারে। আসলে এর নাম সুনলেই জ্বর এসে যাই । তবে আমি ব্যাগ্তিগত এটাকে ভেলিডেটের হিসাবে ব্যাবহার করি । মানে এখানে আপনার কোন সমস্যা না থাকলে বুজবেন আপনার কাজে কোন বড় রকম ভুল নাই। কিন্তু অনেক সময় সব ঠিক থাকার ও পরেও এটাতে সমস্যা করে বিভিন্ন জাইগাই। আসলে এটাতে অনেক বাগ আছে তার ভিতরে আমি কিছু আলোচনা করবো । আলোচনাই ঠিক না শুধুমাত্র কইটা সাধারন টিপস দিবো যেগুলা অনেক সমস্যার সমাধান অটো মসাধান দিয়ে দিবে আর আলাদা আলাদা ভাবে আলোচনা করতে গেলে সবাই পোস্টটি না পড়েই দৌড় মারবে । টিপস গুলোঃ



#ক্রসব্রাউজার এর জন্যে এই মেটা ট্যাগ অনেক হেল্প ফুল

দুইটাই দিতে হবে । তবে প্রথমটা w3 Validation এ এরোর দেখাই এর কি কারণ আমি অনেক চেষ্টা করেছি জানার তবে তা জানতে পারি নাই। কারও জানা থাকলে দয়াকরে আমাকে অবহিত কইরেন।



# কোড গুলা যতটুকু সম্ভব সিম্পল রাখুন কম div বা কম মার্কআপে যদি কাজ করা যাই তাই করুন এবং কোড গুলা পরিষ্কার রাখুন এবং অপ্রয়োজনীয় কোড ব্যাবহার থেকে বিরত থাকুন। অনেকেই form filed এর কাজ করে নাই তার পরেও সিএসএস এর প্রথমেই তা স্টাইলের জনে ডিক্লার করে রাখে এই গুলা পরিত্যাগ করুন। যেমন কেও তার টেম্পলেট বা ফাইলে কোন filed কাজ করে নাই কিন্তু প্রথমে

input[type=text],input[type=password],input[type=email], textarea{} এভাবে প্রতিনিয়ত ডিক্লায়ার করে রাখে । এটা না প্রয়োজন হলে ব্যাবহার করার কোন কারনই নাই। এরকম অপ্রয়োজনীয় কোড ব্যাবহার থেকে বিরত থাকুন।

যেটা লাগবে সেটাই ব্যাবহার করুন।



# nested elements কম ব্যাবহার এর অভ্যাস করুন। তবে সব nested elements কে আমি বুজাই নাই যেমন ধরেন





কোড:

This is my sentence of text.

এটা একটা খারাপ স্ট্রাকচার । অর্থাৎ গ্রুপিং nested elements ব্যাবহার না করাই ইন্টারনেট ইক্সপ্লোরারের জন্যে ভাল। এটাতে অনেক সময় সমস্যা করে।



# সিএসএস এতে img{border:none} ব্যাবহার করুন এতে ইন্টারনেট এক্সপ্লোরার এর একটা বাগ যেটা অটো png ইমেজের বর্ডার দেখাই টা আর করবে না।



# খুব বেশি প্রয়োজন না হলে ইমেজ html অথবা css দিয়ে রিসাইজ কইরেন না। এটা ইন্টারনেট এক্সপ্লোরার এর পুরাতন ভার্সনে অনেক সমস্যা করে এমনকি আমি একদিন IE9 এবং সাফারি তেও এই জন্যে সমস্যাই পড়েছিলাম। অর্থাৎ আপনি যদি কোন ইমেজ ব্যাবহার করেন তাহলে টা আগে সাইজ করে ব্যাবহার করেন কিন্তু যদি html অথবা css দিয়ে সাইজ করেন তাহলে অনেক সময় টা ইন্টারনেট এক্সপ্লোরে সমস্যা করে । তবে আমার জানা মতে এই html অথবা css দিয়ে ইমেজ রিসাইজ করা সাটের লোদিং ঠিক থাকে এবং এসইওর জন্যেও এটা উপকারি। তবে কিছু পাওয়ার জন্যে কিছু হারাইলে সমস্যা নাই তবে সব সময় এই মেথড ব্যাবহার করার দরকার নাই । যদি কখন ইমেজ সাইজ এর সমস্যা হই IEতে তাহলে মেথডটা ব্যাবহার করবেন।



# আর টেমপ্লেট এর কাজ করার সময় অবশ্যই মডার্ন ব্রাউজার ব্যাবহার করবেন । কারণ তাহলে ওটা একদম স্টান্ডার্ট কোডিং প্র্যাকটিস এবং টা সিউর হতে পারবেন। আর আমার জানা মতে সব চেয়ে মডার্ন ব্রাউজার এর দৌরে মিজিলা সবার আগে আছে তাই এটা ব্যাবহার করেই সাইট এর কাজ করা উত্তম।



# ইন্টারনেট ইক্সপ্লোরারের বাগ গুলা মধ্য অন্যতম হচ্ছে Floating Problem এবং Double Margin on Floated Elements এই সমস্যাই পরে নাই এমন লোক কমই আছে তবে এটা খুব সহজেই সমাধান করা যাই জধুমাত্র যেই div কে Floating করা হই তাতে display:inline and overflow:hidden যুক্ত রাখলেই হবে।



#টেমপ্লেট পরিক্ষার জন্যে যত সম্ভব ব্রাউজার এবং ভার্সন ব্যাবহার করেন আর যেহেতু IE তে সমস্যা বেশি হই তাই সম্ভব হলে এক্তাদিন ভার্সন IE তে চেস্ট করে । আর যেহেতু এক পিসিতে একাধিক ইনটারনেট এক্সপ্লোরার ব্যাবহার করা যাই না তাই এটা http://tredosoft.com/Multiple_IE অথবা http://utilu.com/IECollection/ দ্বারা করতে পারবেন তবে টা বাধ্যতামূলক নই।



#খুব খুব বেশি প্রয়োজন না হলে Lucida ফোন্ট ব্যাবহার করবেন না । আর এটা ব্যাবহার করলে কি সমস্যা হই টা নিজে একটু দেখে নেন IE পুরাতন ভার্সনে।



#ইমেজ এর জন্যে alt tag অবশ্যই ব্যাবহার করবে হবে এটা শুধু সার্চ ইঞ্জিনকেই পড়তে সাহায্য করে না এটা একটা গুড প্র্যাকটিস আর Flash and Javascript ব্যাবহার করা থেকে যত দূর সভব দূরে থাকতে হবে বিশেষত Navigation এ কোন ভাবেই ফ্ল্যাশ ব্যাবহার করা যাবে না ।



#আমাদের গ্রুপে অনেকেই গুগল ফোন্টের নিয়ে অনেক সময় সমস্যা পরার কথা শেয়ার করে তাদের জন্যে বলতেছি আপনারা এখানে একটু চোখ বুলিয়ে নেন কিভাবে আসলে গুগল ফোন্ট কাজ ও ব্যাবহার করা যাই এবং আরও অনেক কিছু। আর কেউ কেউ দেখি css যেই জাইগাই ইচ্ছা @import tag দ্বারা গুগল ফোন্ট ব্যাবহার করেন। আপনারা একটু আনে বানে ব্যাবহার করে এখানে http://jigsaw.w3.org/css-validator একটু চেক করে নিয়ে যে উনারে কি বলে। যাই হোক এটা অবশ্যই প্রথমে কল করাটাই স্টান্ডার্ট।



#আমারা অনেকেই Dreamweaver এবং KompoZer ব্যাবহার করি । আমি অনেক জাইগাই দেখিছি এটা ক্রস ব্রাউজার এর জন্যে নাকি অনেক ভাল। অর্থাৎ অটো Vendor prefix এবং নানা রকম কোড জেনারেট করে এগুলা যতই তাইরে নাইরে কোড জেনারেট করুক না কেন ভাল মানের টেম্পলেট এর ক্ষেত্রে এটা কখনই সম্পূর্ণ রুপে ক্রস ব্রাউজার সাপোর্ট করতে পারে নাই সামনেও পারবে না। যখন পারবে তখন ওয়েব ডিজাইনার আর থাকবে না । সব সফটওয়্যার দিয়েই করা হবে। তাই এই গুলা পরিত্যাগ করুন(ব্যাগ্তিগত মতামত)।



#আরও কিছু ইন্টারনেট এর বাগ এবং তার সমাধান পেতে এই পোস্ট দুইটি পড়ুন অতি মনোযোগ সহিত।

http://net.tutsplus.com/tutorials/html-c...-fix-them/

http://coding.smashingmagazine.com/2010/...ss-coding/



৪. এতক্ষন অনেক স্টান্ডার বিষয় নিয়ে কথা বললাম এখন একটু হাতুড়ে বিষয় নিয়ে কথা বলি আমি এইটারে বলি Hard Way মানে সুজা আঙ্গুলে ঘি না উটলে আঙ্গুল বাকানো। সেটা হল কিন্ডিশনাল মন্তব্য(Conditional Comments/Stylesheet)। অনেকেই এর সাথে পরিচিত তাই বেশি কিছু এটা আলোচনা করবো না। এটা তখনই ব্যাবহার করা উচিত এবং করার নিয়ম যখন আপনি সকল কিছু ঠিক ভাবে করার পরেও সমস্যা করলে তখন কোন শেষ এটা একটা অনেক কার্যকরি একটা পন্থা এবং শেষ পন্থা । আর এটা কি ভাবে ব্যাবহার করতে হবে তার জন্যে এই দুইটা টিউটোরিয়াল যথেষ্ট

1. http://webdesignerwall.com/tutorials/css...t-explorer

2. http://css-tricks.com/how-to-create-an-i...tylesheet/



৫. এখন প্রশ্ন হল সব সমস্যা কি শুধু ইন্টারনেট এক্সপ্লোরারের অন্য ব্রাউজারের কি হই এই সব সমস্যা হই না ? আসলে প্রত্যক ব্রাউজারই বাগ আছে তবে ইন্টারনেট এক্সপ্লোরারের এত বেশি যে তা শুরু করলে শেষ করা সম্ভব না। হ্যা অন্ন ব্রাউজারে ও সমস্যা আছে । এমন অনেক ফিচার্ড আছে যা মজিলাতে একদম ১০০% ঠিক ভাবে শোঁ করে না সেটা আবার অন্য ব্রাউজার যেমন সাফারিতে করে। উদাহারন স্রুপ বলা যাই যে মোবাইল ওয়েব এপ্লিকেশন এবং মোবাইল এর যে কোন কাজ যেমন রেস্পন্সিভ এর জন্যেও সব চেয়ে ভাল ব্রাউজার হচ্চে সাফারি । এটাতে সেই সব এফেক্ট/যেই ভাবে শো করে তা ট্যাবলেট এবং আইপেড এ প্রাই সেম এফেক্ট শোঁ করে যা অন্য ব্রাউজারে পাওয়া সম্ভব না তাই অনেকে মোবাইল কাজ টেস্ট করার জনে এটা ব্যাবহার করে। তবে ওয়েব টেম্পলেট এ তুলনা মূলক একটু কমই পার্থক্য হই তবে অনেক ক্ষেত্রেই হতে পারে । আমি নিজেও এর ভুক্ত ভুগি। এখন কথা হইতেছে ইন্টারনেট এক্সপ্লোরারের এর জন্যে তোঁ কন্ডিশনাল কমেন্টস বা সিএসএস ব্যাবহার করা যাই এগুলা জন্যে কিভাবে ব্যাবহার করা যাই যদি প্রয়োজন হই। আর প্রয়োজন হবে না বললে ভুল আমি যত গুলা বেশি ফিচার্ড কাজ/প্রেক্টিস করেছি তার ৭০%ই একটু না একটু ভিন্নতা পাইছি সেই গুলা ঠিক করার জনেও আমার Hard Way ব্যাবহার করেছি। তবে এই ব্রাউজার গুলার জন্যে ইন্টারনেট এক্সপ্লোরারের এর মত সিএসএস করে ব্যাবহার করা যাই না এটা করতে হলে একটা javascript ফাইল কল করতে হবে তার পরে সিএসএস এ কাজ করতে হবে আর এটা করা অনেক সহজ শুধুমাত্র এই http://rafael.adm.br/css_browser_selector/ টিউটোরিয়ালটা দেখেন তাহলেই পারবেন। আর একটা এখানে যদিও একটা জিনিষ দেওয়া নাই তবে সব দেওয়া থাকবে এটা আশা করা ঠিক না। আর সেটা হল সিলেক্টর এবং আমি যে ভাবে এই সিলেক্টর গুলা ব্যাবহার করি যেমন Chrome এর জন্যে আলাদা ভাবে শুধু chrome না লিখে এভাবে লিখেন webkit, safari, chrome তার পরে তার স্টাইল। তাহলে এক সাথে safari,chrome ও webkit জাতিয় সব ব্রাউজার এর জন্যে একবারে কাজ হইয়ে যাবে যদি আলাদা আলাদা প্রয়োজন হই তাহলে তোঁ কিছু করার নাই তবে আমি আজ পর্যন্ত এদের নিজেদের জাতের মধ্যে যথেষ্ট মিল পাইছি । আর এটা ডাউনলোড লিংক http://github.com/rafaelp/css_browser_se...elector.js



--------------------------------------------------------------------------------------------------------------------------------------

এই গুলা সবই একদম বিগিনার দের জন্যে জানি সবাই এর সম্পর্কে ধারনা আছে তার পরেও নতুন দের জন্যে লিখা আর যদি ভাল সারা পাই তাহলে এর এডভান্স পার্ট টাও তারাতারই দিবো। আর একটা কথা আমি নিজে এখন শিকতেছি তাই এখানে ভুল ইনফরমেশন থাকতেই পারে আর লেখার কথা তো বললামই না বাব দাদার আমলেও লিখি নাই । আর এত বড়তো নাই !! । ভুল হলে ক্ষমা করবেন। আর একটা ছোট্ট কথা আপনারা যারা শিকতে চান তারা w3schools তারে বাদে শিকেন কারণ এখানে এত সহজে সব কিছু শিখান হইয়েছে। মানে অনেক বিস্তারিত বা বলে কোন রকম ছোট ছোট উদাহারন এবং অল্প পরিমাণ বিবরন দিয়ে শুরু চলে গেছে এবং এর থেকে দেখে যারা শিকতেছে তাদের থেকে যারা আবার অন্য জাইগাই নিজেদের জালাই না করে কাজে লেগে বা বলে যে ভাই HTML CSS শেষ করে ফেলেছি। তার কাজে গেলে অনেক সমস্যায় পরে। বই এর মত পিস্টা উলটাইয়ে চলে গেলে নিজেরই ক্ষতি কারান এখানে আপনি কাজ না জানলে পারবেন না আর না পারলে আপনি কি পড়েছেন তারও লাভ হবে না। এটা তো স্কুল এর মত সার্টিফিকেট হলেই সে ভাল ছাত্র হওয়ার কোন যাইগা না। জানি এই বিষয়ে অনেকেই এর তিব্র প্রতিবাদ করবেন। তাই যারা w3schools এর ভক্ত তারা ওখান থেকে শিকেন ওটাও ভাল তবে যদি একবারে শিকতে চান তাহলে সরাসরি প্রত্যক্টা অফিসিয়াল সাইট থেকে শিকুন। যেমন। http://w3.org, http://php.net/, http://jquery.com/ ইত্যাদি। ধন্যবাদ


লেখাঃ লিমন ভাই

Read More

রেস্পন্সিভ ভিডিও ওয়েব ডিজাইন

In css:

.videowrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.videowrapper iframe,
.videowrapper object,
.videowrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Read More

নোটপ্যাড++ এ বাংলা লিখুন

আপনারা যারা নতুন ওয়েব ডেভেলপার হতে যাচ্ছেন তাদের কে বলছি। শুধু ইংরেজি ওয়েব সাইট বানালেই হবে না, প্রয়োজনে আমাদের দেশের জন্য তথা বাংলা ভাষায় ও করতে হবে। আর তখন আপনাকে কিছু কিছু ব্যপারে নোটপ্যাডে বাংলাতে লিখতে হতে পারে। কিন্তু যদি পদ্ধতিটা আপনার জানা না থাকে তাহলে কিছুটা হলেও ঘাবড়ে যেতে পারেন। তাই আপনার জন্যই আমার এই ছোট্ট প্রচেষ্টা। (আজই শিখলাম, তাই আপনিও শিখে ফেলুন।  )ভুমিকা না বারিয়ে সরাসরি কাজের কথা বলি।
প্রথমে নোটপ্যাড++ সফটওয়্যার টি ওপেন করুন। এবার উপরের মেনু বার এ একবার চোখ রাখুন। দেখুন Encoding মেনু লেখা আছে।

এবার দেখুন এখানে ডিফল্ট ভাবে Encoding UTF-8 without BOM লেখাতে মার্ক করা আছে (আপনাদের আছে কিনা জানি না। তবে আমার ছিল। ) এবার আপনার কাজ হবে এটাকে পরিবর্তন করে Encoding UTF-8 without BOM লাইনটির থিক নিচের লাইনে লিখা আছে Encoding UTF-8 এটাতে মার্ক করুন।

এবার চেষ্টা করে দেখুন। আপনি বাংলাতে লিখতে পারবেন। পারছেন কি? যদি পারেন তো কমেন্ট করে জানান আমাকে।
মজার ব্যাপার হচ্ছেঃ আপনি অভ্র দিয়েই লিখতে পারবেন।
লক্ষণীয় বিষয়ঃ যতবার নোটপ্যাডে কাজ করতে যাবেন ততবারই পদ্ধতিটা অবলম্বন করবেন। আশা করি বুঝতে পেরেছেন।

Read More

১০ টি প্লাগিন যা বদলে দিবে আপনার টেমপ্লেটের চেহারা !!

আশা করি আপনারা ভালো আছেন আজকে আমি আপনাদেরকে বলব ১০ টি জেকোয়ারি প্লাগিনের কথা যে গুলো আমি

নিজে ব্যবহার করি , আপনি যদি এই ১০ টি প্লাগিন ব্যবহার করেন তা হলে আপনার টেম্পলেটের চেহারা বদলে যাবে ।



১।  UiKit - আসলে UiKit একটা CSS ফ্রেমওয়ার্ক যা আপনি ব্যবহার করতে পারেন এটি ব্যবহার করার মাধ্যমে আপনি

আপনার সাইটের  এলিমেন্টকে   সুন্দর সুন্দর  অ্যানিমেশন দিতে পারবেন । ব্যবহার করার জন্য ভিজিট করুন ঃ http://www.getuikit.com/



২। mixitup -- আপনি যদি আপানার সাইটে পোর্টফলিও অ্যাড করতে চান তাহলে বোলব mixitup একবার দেখে আসতে পারেন । অনেক সুন্দর সুন্দর ইফেক্ট রয়েছে ব্যবহার করতে পারেন । ব্যবহার করার জন্য ভিজিট করুন ঃ http://mixitup.io/



৩। Isotope -- আমি আমার সাইটে কোন পোর্টফলিও অ্যাড করতে হলে আমি আইসোটোপ জেকোয়ারি এই প্লাগিন টা ব্যবহার করি আমার  কাছে  এই প্লাগিন টা ভালো লাগে ।আপনি ব্যবহার করতে পারেন । ব্যবহার করার জন্য ভিজিট করুন ঃ http://isotope.metafizzy.co



৪। Hoverizr -- অনেক সময়  প্রিমিয়াম টেম্পলেটে দেখা যায় ইমেজ ডিফল্ট অবস্থায় সাদা-কালো হোভার করলে আগের অবস্থায় এসে আই মিন রঙিন হয়ে যায় আপনি এই প্লাগিনের মাধ্যমে সেটা করতে পারবেন । ব্যবহার করার জন্য ভিজিট করুন ঃ http://www.iliasiovis.com/hoverizr/



৫ । prettyPhoto -- আমি আমার করা মাক্সিমাম টেম্পলেটে এই প্লাগিনটা  ব্যবহার করি আপনি ও ব্যবহার করতে পারেন । আসলে এই প্লাগিনের কাজ হচ্ছে কোন ইমেজ বা ভিডিওকে লাইট বক্সের মাধ্যমে ওপেন করা ।  আপনি এই প্লাগিন টা ব্যবহার করতে পারেন । তাছাড়া ও আরো অনেক লাইট বক্স প্লাগিন পাওয়া যায় । তবে prettyPhoto বেশি ব্যবহার হয় । ব্যবহার করার জন্য ভিজিট করুন ঃ http://www.no-margin-for-errors.com



৬ ।  FitVids -- আসলে আপনার সাইটে যদি কোন ভিডিও থাকে তাহলে ভিডিও রেস্পন্সিভ করতে গেলে হয়তো একটু ঝামেলায় পরতে পারেন । আসলে আমি ভিডিও অটো রেস্পন্সিভ করার জন্য FitVids জেকোয়ারি প্লাগিন ব্যবহার করি আপনিও ব্যবহার করতে পারেন । এই প্লাগিনের কাজ হচ্ছে ভিডিও কে অটো রিসাইজ করা । ব্যবহার করার জন্য ভিজিট করুন ঃ http://www.fitVidsjs.com/



৭ । Sidr-- রেস্পন্সিভের কথা যখন বলেই ফেললাম তখন মোবাইলের জন্য আপনারা Sidr প্লাগিন টা ব্যবহার করতে পারেন । এই প্লাগিন টা ব্যবহার করলে আপনারা ট্যাব বা মোবাইলের জন্য সাইডবারে একটা সুন্দর মেন্যু দেখতে পাবেন  জিনিস  তা দেখতে ভালো লাগে । এটা ব্যবহারে জন্য ভিজিট করুন  ঃ http://www.berriart.com/sidr/



৮ । jQuery-Collapse -- Accordions বা Collapse ম্যাক্সিমাম সাইটে দেখা যায় । আসলে এই গুলোর মাধ্যমে আপনি ক্লাইন্টের টেস্টটোমোনিয়াল বা কোম্পানির নীতি এই জিনিস গুলো দেখাতে পারেন । আমার দেখা এই প্লাগিন টাই বেস্ট এবং কাস্টমাইজেশন অনেক সোজা , ব্যবহার করতে পারেন । ব্যবহার করার জন্য ভিজিট করুন ঃ  http://github.com/danielstocks/jQuery-Collapse/



৯ । Box Slider বা Owl Carousal --- আসলে একটা টেম্পলেটে স্লাইডার বা কারসাল থাকবে তো সে ক্ষেত্রে আপনি Box Slider বা Owl Carousal ব্যবহার করতে পারেন । ব্যবহারের জন্য ভিজিট করুন http://bxslider.com বা http://www.owlgraphic.com/owlcarousel/



১০ । Nice Scroll -- আমার সাদা-মাটা  Scroll বার মোটেই পছন্দ নয় তাই আমি ব্যবহার করি Nice Scroll আপনি ও ব্যবহার করতে পারেন । ব্যবহার করার জন্য ঃ https://github.com/inuyaksa/jquery.nicescroll । এই Scroll বারে আপনি ইচ্ছা মত কালার পরিবর্তন করতে পারবেন ।

Read More