How to play NFS MOSTWANTED using LAN(ETHERNET CABLE): nfs most wanted: Connect Two Windows 7 Computers On LAN Using Ethernet Cable and enjoy nfsmw Step 1 . In order to start the connection, you’ll have ...
শনিবার, ২১ ফেব্রুয়ারী, ২০১৫
বুধবার, ১১ ফেব্রুয়ারী, ২০১৫
১:২৬ PM
rezaul haque
প্রশ্ন- উত্তর
No comments
প্রশ্নঃ
কোনও মেনু আইটেম এর লিঙ্ক হিসেবে কোনও ডিভ আইডি দিলে ওই মেনু আইটেম এ ক্লিক করলে ওই ডিভ টি আসে। কিন্তু আমি চাচ্ছি যে ডিভ টি খুব আস্তে এনিমেটেড হয়ে আসুক। এটা কিভাবে করবো? প্লিজ এক্সপার্ট ভাইয়েরা হেল্প করুন।
উত্তরঃ
আপনার এইচটিএমএল টেমপ্লেট এর ফুটারে এই কোডটি দিয়ে দিন। আর কিছু করতে হবে না।
*নিচে দেখুন এক জায়গায় 1200 লিখা আছে, ঐ খানে মান পরিবর্তনের মাধ্যমে গতি কমাতে/বাড়াতে পারবেন।
$(document).ready(function(){
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1200);
return false;
}
}
});
});
- ১:২৩ PM
- rezaul haque
- ওয়েব ডিজাইন
- 3 comments
আমরা যারা ওয়েব ডিজাইন কাজ করি বা শিকতেছি তারা প্রায় আমাদের কাজটা যখন বিভিন্ন ব্রাউজারে পরীক্ষা করি তখন একই রকম দেখাই না আর এর সংখ্যা একটু মনে হই বেশিই। আর বিশেষত যদি কাজটা একটু বেশি মডার্ন ডিজাইন বা ফিচার্ড থাকে তাহলে হওয়ার স্মভবনা অনেক বেশি !
কিন্তু যদি অতিরিক্ত মডার্ন ডিজাইন/ফিচার্ড দ্বারা কি সাইট তৈরি হয় না এবং সেগুলা কি সকল ব্রাউজারে একই রকম দেখাই না ? অবশ্যই। তবে খুব বেশি ফিচার্ড যুক্ত কাজ সকল প্লাটফর্মে সমান পারফর্মেন্স করানো একটুত কষ্ট সাধ্য বিষয় আমার মতে। এবং ব্যাক্তিগত ভাবে অনেক প্রিমিয়াম থিম যা অনেক বেশি ফিচার্ড যুক্ত ওগুলা পুরাতন ব্রাউজারে চেক করে দেখেছি খুব একটা সুবিধা করতে পারে না।
যাই হোক এটা আমাদের আলোচ্য বিষয় নয়। আজকে মুটামুটি মডার্ন ডিজাইন/ফিচার্ড এবং নরমাল সাইট/টেমপ্লেট কিভাবে ক্রস প্লাটফর্মের জন্যে উপযুক্ত করা যাই তাই দেখবো। আর আমি যা ইনফরমেশন শেয়ার করবো এর ভিতরে কিছু আমার ব্যাক্তিগত মতামতের ভিত্তিরে আর কিছু অনলাইন থেকে নেওয়া তাই আমার ব্যাক্তিগত মতামত থেকে ইনফরমেশন গুলার সাথে যদি কেও একমত না হতে পারেন তাহলে আমি আগেই এই জন্যে দুঃখ প্রকাশ করতেছি এবং সকলকে নিজে ভাল ভাবে জেনে প্রয়োজনে এই গুলা ব্যাবহার করার জনে অনুরোধ করতেছি। তাহলে শুরু করা যাক ঃ-
১. ক্রস ব্রাউজার এর অন্যতম প্রধান বা আমার কাছে প্রথম শর্ত সেটা হল মার্কআপ(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/ ইত্যাদি। ধন্যবাদ
লেখাঃ লিমন ভাই
কিন্তু যদি অতিরিক্ত মডার্ন ডিজাইন/ফিচার্ড দ্বারা কি সাইট তৈরি হয় না এবং সেগুলা কি সকল ব্রাউজারে একই রকম দেখাই না ? অবশ্যই। তবে খুব বেশি ফিচার্ড যুক্ত কাজ সকল প্লাটফর্মে সমান পারফর্মেন্স করানো একটুত কষ্ট সাধ্য বিষয় আমার মতে। এবং ব্যাক্তিগত ভাবে অনেক প্রিমিয়াম থিম যা অনেক বেশি ফিচার্ড যুক্ত ওগুলা পুরাতন ব্রাউজারে চেক করে দেখেছি খুব একটা সুবিধা করতে পারে না।
যাই হোক এটা আমাদের আলোচ্য বিষয় নয়। আজকে মুটামুটি মডার্ন ডিজাইন/ফিচার্ড এবং নরমাল সাইট/টেমপ্লেট কিভাবে ক্রস প্লাটফর্মের জন্যে উপযুক্ত করা যাই তাই দেখবো। আর আমি যা ইনফরমেশন শেয়ার করবো এর ভিতরে কিছু আমার ব্যাক্তিগত মতামতের ভিত্তিরে আর কিছু অনলাইন থেকে নেওয়া তাই আমার ব্যাক্তিগত মতামত থেকে ইনফরমেশন গুলার সাথে যদি কেও একমত না হতে পারেন তাহলে আমি আগেই এই জন্যে দুঃখ প্রকাশ করতেছি এবং সকলকে নিজে ভাল ভাবে জেনে প্রয়োজনে এই গুলা ব্যাবহার করার জনে অনুরোধ করতেছি। তাহলে শুরু করা যাক ঃ-
১. ক্রস ব্রাউজার এর অন্যতম প্রধান বা আমার কাছে প্রথম শর্ত সেটা হল মার্কআপ(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/ ইত্যাদি। ধন্যবাদ
লেখাঃ লিমন ভাই
- ১:২০ PM
- rezaul haque
- ওয়ার্ডপ্রেস
- No comments
যারা WordPress নিয়ে কাজ করেন তারা WordPress একটি শক্তিশালী ফিচার শটকোডের বিষয়ে কিছুটা হলেও জানেন। আমরা শটকোড নিয়ে কাজ করার সময় নতুন কিছু কোড আমাদের প্রয়োজন হয়। হয়তবা গুগলে খুজলেই আমরা সেইসব নতুন কোড পেতে পারি কিন্তু তা অনেক সময়ের ব্যপার। তাই আজ আমি এমন কিছু কোড একজাইগাই জরো করার চেষ্টা করলাম।
শোট কোডের মধ্যে কাস্টম পোস্টঃ শটকোডের মধ্যে কাস্টম পোস্ট নিয়ে আসার জন্য নিছের কোডটি ব্যবহার করুন।
function department_shortcod($atts){
extract( shortcode_atts( array(
'category' => '',
), $atts, 'department' ) );
$q = new WP_Query(
array('posts_per_page' => '6',
'post_type' => 'department',/* Here use post-type*/
'department_cat' => $category,
)
);
$list = '
';/* Here use befour div of your post */
while($q->have_posts()) : $q->the_post();
$idd = get_the_ID();
$list .= '/* Here use your code for post */';
endwhile;
$list.= '
';
wp_reset_query();
return $list;
}
add_shortcode('deparment', 'department_shortcod');
আরো প্রয়োজনিয় কিছু কোডঃ
# শটকোডের মধ্যে পোস্টের ডাইনামিক টাইটেল আনতে get_the_title(); এই কোডটি ব্যবহার করুন।
# শটকোডের মধ্যে পোস্টের ডাইনামিক লিঙ্ক আনতে get_permalink(); এই কোডটি ব্যবহার করুন।
# উইজেডের মধ্যে শটকোড সাপোট করাতে add_filter('widget_text', 'do_shortcode'); এই কোডটি ব্যবহার করুন।
# কমান্টের মধ্যে শটকোড সাপোট করাতে add_filter( 'comment_text', 'do_shortcode' ); এই কোডটি ব্যবহার করুন।
# এক্সা প্টের মধ্যে শটকোড সাপোট করাতে add_filter( 'the_excerpt', 'do_shortcode'); এই কোডটি ব্যবহার করুন।
- ১:১৬ PM
- rezaul haque
- ওয়েব ডিজাইন
- No comments
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%;
}
- ১:১৫ PM
- rezaul haque
- No comments
খুব সাধারন বিষয়গুলো অনেক সময় অসাধারন ভূমিকা পালন করে । যেকোন একটা পিএসডি ডিজাইন যদি দশজন ডেভেলপারকে দেয়া হয়, দশজন দশভাবে কোডিং করবে । হ্যাঁ সবাই এইচটিএমএল দিয়ে মার্কআপ করবে সিএসএস দিয়ে ডিজাইন করবে । কিন্তু এই এইচটিএমএল এবং সিএসএস ব্যবহার করার মধ্যেও অনেক কৌশল আছে যা দ্রুত এবং নির্ভুল কোডিংএ সহায়তা করে । সিএসএস শর্টহ্যান্ড এরকমই একটি কৌশল যা আপনাকে আরও বেশি প্রফেশনাল করে গড়ে তুলবে । আসুন জেনে নেই এরকম কিছু সিএসএস শর্টহ্যান্ড সম্পর্কে ।
BACKGROUND
____________________________________________________
ধরুন কোন একটি এলিমেন্টের background দিতে হবে । আমরা অনেক ভাবেই কাজটি করতে পারি । background দেয়ার সময় আমরা অনেক ধরনের property ব্যবহার করি । যেমন -
element {
background-color: color || #hex || (rgb / % || 0-255);
background-image:url(URI);
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-position: X Y || (top||bottom||center) (left||right||center);
background-attachment: scroll || fixed;
}
উপরে যে background property গুলো ব্যবহার করা হয়েছে সেগুলো মাত্র একটি লাইনের মাধম্যেও দেয়া যায় । যেমন -
BACKGROUND SHORTHAND:
element {
background: #fff url(image.png) no-repeat 20px 100px fixed;
}
***এখানে ধারাবাহিকতা আপনাকে ঠিক রাখতে হবে । color >> image >> repeat >> position >> attachment
আর একটি ব্যাপার হচ্ছে কোন একটি property যদি আমরা না দেই তাহলে কি হবে । default background property গুলো হচ্ছে -
DEFAULT BACKGROUND PROPERTY VALUES:
element {
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;
}
যেমন ধরুন আপনি শুধু background property হিসেবে color এবং image দিলেন ।
element {
background:red url(image.png);
}
আসলে ব্রাউজার এটা দেখাবে এভাবে -
element {
background:red url(image.png) repeat top left scroll;
}
লক্ষ্য করুন এখানে repeat, positon এবং attachment property এর default values দেখাবে ।
FONT
________________________________________
Font এর ব্যাপারটা অনেকটা background এর মতই । Font এর আমরা সাধারনত যেসব property ব্যবহার করি -
FONT PROPERTIES:
element {
font-style: normal || italic || oblique;
font-variant:normal || small-caps; font-weight: normal || bold || bolder || || lighter || (100-900);
font-size: (number+unit) || (xx-small - xx-large); line-height: normal || (number+unit); font- family:name,"more names";
}
FONT DEFAULT PROPERTIES:
element {
font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;
}
FONT SHORTHAND PROPERTY:
element {
font: normal normal normal inhert/ normal inherit;
}
// font-style >> font-variant >> font-weight >> font-size >> line-height >> font-family
BORDER
_____________________________________________________________________
BORDER PROPERTIES:
element {
border-width: number+unit;
border-style: (numerous);
border-color: color || #hex || (rgb / % || 0-255);
}
THE BORDER SHORTHAND PROPERTIES:
element {
border: 4px groove #fff;
}
// width >> style >> color
একটা উদাহরন দেখলে এই ব্যাপারগুলো বুঝতে সুবিধা হবে -
p { border:solid blue; }/* will create a '3px' solid blue border... who knows where 3px came from?? */
p { border:5px solid; }/* will create 5px solid 'black' border... default must be black?? */
p { border:dashed; } /* will create a '3px' dashed 'black' border... 3px black lines unite! */
p { border:10px red; } p { border:10px; } p { border:red; } /* তিনটি কোড কাজ করবে না কারন হচ্ছে আপনাকে অবশ্যই border-style দিতে হবে । যদি color না দেন তবে ডিফল্টভাবে black color দেখাবে । */
এই উদাহরনটি দেখেন -
p { border:dotted; color:red; } /* will create a 3px dotted red border */
body { color:blue; } body p { border:5px solid; } /* will create a 5px solid blue border */
***একটা বিষয় লক্ষ্য করেন, এখানে p কালার red এবং body এর কালার blue কিন্তু আমরা যখন body p এর border দিলাম color property না দিয়ে তখন default ভাবে body কালার border এর কালার হিসেবে নিবে।
MARGIN AND PADDING:
_________________________________________________________
Margin এবং Padding এর জন্য সবচেয়ে সহজ উদাহরন হচ্ছে ঘড়ি ।
MARGIN PROPERTIES:
element {
margin-top: number+unit;
margin-right: number+unit;
margin-bottom: number+unit;
margin-left: number+unit;
}
MARGIN SHORTHAND PROPERTY:
element { margin: auto auto auto auto; } /* top >> right >> bottom >> left */
যেকোন এলিমেন্টে মার্জিন শর্টহ্যান্ড দেয়ার সময় ঘড়ির কাটার কথা খেয়াল রাখবেন । প্রথমে উপরের মার্জিন, ডান, নিচে এবং সবশেষে বায়ে এর মার্জিন । Margin কে আরও সুন্দর এবং সহজভাবে দেয়া যায় ।
element { margin:10px; }/* adds a 10px margin to all four sides */
element { margin:20px 5px; }/* adds a 20px margin to top and bottom and a 5px margin to left and right */
element { margin:50px 10px 300px; }/* adds a 50px margin to top and a 10px margin to left and right and a 300px margin to bottom */
Padding এর ক্ষেত্রে একই ভাবে দিতে হবে।
(collected)
- ১:১০ PM
- rezaul haque
- ওয়েব ডিজাইন
- No comments
আপনারা
যারা নতুন ওয়েব ডেভেলপার হতে যাচ্ছেন তাদের কে বলছি। শুধু ইংরেজি ওয়েব
সাইট বানালেই হবে না, প্রয়োজনে আমাদের দেশের জন্য তথা বাংলা ভাষায় ও করতে
হবে। আর তখন আপনাকে কিছু কিছু ব্যপারে নোটপ্যাডে বাংলাতে লিখতে হতে পারে।
কিন্তু যদি পদ্ধতিটা আপনার জানা না থাকে তাহলে কিছুটা হলেও ঘাবড়ে যেতে
পারেন। তাই আপনার জন্যই আমার এই ছোট্ট প্রচেষ্টা। (আজই শিখলাম, তাই আপনিও শিখে ফেলুন। )ভুমিকা না বারিয়ে সরাসরি কাজের কথা বলি।
প্রথমে নোটপ্যাড++ সফটওয়্যার টি ওপেন করুন। এবার উপরের মেনু বার এ একবার চোখ রাখুন। দেখুন Encoding মেনু লেখা আছে।
এবার দেখুন এখানে ডিফল্ট ভাবে Encoding UTF-8 without BOM লেখাতে মার্ক করা আছে (আপনাদের আছে কিনা জানি না। তবে আমার ছিল। ) এবার আপনার কাজ হবে এটাকে পরিবর্তন করে Encoding UTF-8 without BOM লাইনটির থিক নিচের লাইনে লিখা আছে Encoding UTF-8 এটাতে মার্ক করুন।
এবার চেষ্টা করে দেখুন। আপনি বাংলাতে লিখতে পারবেন। পারছেন কি? যদি পারেন তো কমেন্ট করে জানান আমাকে।
মজার ব্যাপার হচ্ছেঃ আপনি অভ্র দিয়েই লিখতে পারবেন।
লক্ষণীয় বিষয়ঃ যতবার নোটপ্যাডে কাজ করতে যাবেন ততবারই পদ্ধতিটা অবলম্বন করবেন। আশা করি বুঝতে পেরেছেন।
প্রথমে নোটপ্যাড++ সফটওয়্যার টি ওপেন করুন। এবার উপরের মেনু বার এ একবার চোখ রাখুন। দেখুন Encoding মেনু লেখা আছে।
এবার দেখুন এখানে ডিফল্ট ভাবে Encoding UTF-8 without BOM লেখাতে মার্ক করা আছে (আপনাদের আছে কিনা জানি না। তবে আমার ছিল। ) এবার আপনার কাজ হবে এটাকে পরিবর্তন করে Encoding UTF-8 without BOM লাইনটির থিক নিচের লাইনে লিখা আছে Encoding UTF-8 এটাতে মার্ক করুন।
এবার চেষ্টা করে দেখুন। আপনি বাংলাতে লিখতে পারবেন। পারছেন কি? যদি পারেন তো কমেন্ট করে জানান আমাকে।
মজার ব্যাপার হচ্ছেঃ আপনি অভ্র দিয়েই লিখতে পারবেন।
লক্ষণীয় বিষয়ঃ যতবার নোটপ্যাডে কাজ করতে যাবেন ততবারই পদ্ধতিটা অবলম্বন করবেন। আশা করি বুঝতে পেরেছেন।
- ১২:৫৯ PM
- rezaul haque
- অন্যান্য
- No comments
যারা Payoneer নিয়ে নিচের প্রশ্ন গুল করে থাকেন তাদের জন্য।
- Payoneer মাষ্টার কার্ড কোন ব্যাংক এর ATM এ ব্যবহার করলে বেশি রেট পওয়া যাবে?
- Payoneer মাষ্টার কার্ড এর মাসিক চার্জ কত?
- Payoneer মাষ্টার কার্ড কোন ATM এ ব্যবহার করা ভাল হবে?
- Payoneer মাষ্টার কার্ড ATM এ দিয়ে টাকা না পেলে কি করবেন? এই ধরনের আর সব প্রশ্নের উত্তর...
নভেম্বর ২০০৯ এ আমার ফ্রিলান্সিং ক্যারিয়ার শুরু। এবং জানুয়ারী ২০১০ থেকে Payoneer এর ব্যববার শুরু।। আমার এই অভিজ্ঞতা থেকে...
- Payoneer মাষ্টার কার্ড কোন ব্যাংক এর ATM এ ব্যবহার করলে বেশি রেট পওয়া যাবে?
*** Payoneer মাষ্টার কার্ড দিয়ে টাকা উঠালে বাংলাদেশের সব ব্যাংকের ATM এ আপনি সমান রেট পাবেন। কত টাকা রেট পাবেন এটা জানতে আপনি গুগলে সার্চ করুন "Convert USD to BDT" এটা লিখে। লিঙ্ক টা দেখতে পারেন। http://tr.im/1FtXd
এখন আপনাদের হয়ত জানা আছে যে, Payoneer মাষ্টার কার্ড এর একটা ATM Withdrawal চার্জ আছে, এই চার্জ টা নির্ভর করে আপনার কার্ড এর উপর, মানে কিভাবে আপনার কার্ডটা করা, কারো রেফারেল, ডিরেক্ট Payoneer মাষ্টার কার্ড এর সাইট এ গিয়ে, না কি কোন ফ্রিলান্সিং বা পার্টনার সাইট থেকে করা। তবে এই চার্জ টা সধারনত ২.১৫ বা ৩.১৫ ডলার হয়ে থাকে। আপনার কার্ড এর চার্জ দেখতে এই লিঙ্ক থেকে ঘুরে আসুন। http://tr.im/1FrEq অবশ্যই আপনার আকাউন্টে লগইন করে। যে কোন এমাউন্ট এ এই চার্জ ফিক্সড। এখন আপনি যদি ৫০০ টাকা ও Withdrawal করেন তাও আপনার যে (২.১৫ বা ৩.১৫ ডলার) চার্জ করা হবে এবং ২০০০০ টাকা ও Withdrawal করেন তাও (২.১৫ বা ৩.১৫ ডলার) চার্জ কাটা হবে। এছাড়াও আরো একটি চার্জ আছে, যেটা ব্যাংক এর চার্জ, ৩% চার্জ এটা সব ব্যাকং এই সমান। অর্থাৎ ১০০ টাকাই ৩ টাকা বাংক কেটে নেবে। ব্যাখাঃ এখন ডলারের রেট ৭৭.২৮ হলে আপনি পাবেন ৩/১০০*৭৭.২৮=২.৩২ টাকা। অর্থাৎ ৭৭.২৮ টাকাই ২.৩২ টাকা চার্জ বাদ ৭৭.২৮-২.৩২=৭৪.৯৬ টাকা।
- Payoneer মাষ্টার কার্ড এর মাসিক চার্জ কত?
*** Payoneer মাষ্টার কার্ড এর মাসিক চার্জ ও নির্ভর করে আপনার কার্ড এর উপর, মানে কিভাবে আপনার কার্ডটা করা, কারো রেফারেল, ডিরেক্ট Payoneer মাষ্টার কার্ড এর সাইট এ গিয়ে, না কি কোন ফ্রিলান্সিং বা পার্টনার সাইট থেকে করা। তবে এই চার্জ টা সধারনত ১ বা ৩ ডলার হয়ে থাকে। আপনার কার্ড এর চার্জ দেখতে এই লিঙ্ক থেকে ঘুরে আসুন। http://tr.im/1FrEq অবশ্যই আপনার আকাউন্টে লগইন করে। এক এবং ৩ ডলার হয়ে থাকে আপনার মাসিক পেমেন্ট রিসিভ এর উপর। আপনি মাসিক যদি ৩+(অনেক কার্ড এর ক্ষেত্রে এট ২+ ও থাকতে পারে) পেমেন্ট রিসিভ করে থাকেন তাহলে আপনার ১ ডলার চার্জ কাটবে নেক্সট মাসের ১ম তারিখে। আর যদি ৩ টার(যাদের ২+ আছে তাদের ২ টার) নিচে পেমেন্ট রিসিভ করে থাকেন তাহলে ৩ ডলার কাটবে। এই চার্জ করার সময় Payoneer যদি আপনার কার্ডে পর্যাপ্ত ব্যলান্স না থাকে তাহলে যে এমাউন্ট থাকবে সেটাই কাটবে। যেমন আপনার চার্জ কাটবে ৩ ডলার কিন্তু আপনার একাউন্টে আছে ১.৫ বা তার ও কম তাহলে ১.৫ বা যে এমাউন্ট থাকবে সেটা কেটে নেবে। এবং পরবর্তী মাসে আর বাকি এময়াউন্ট টা কাটা হবে না। (নেক্সট মাসে শুধু নেক্সট মাসের নির্ধারীত চার্জ কাটা হবে, এই মাসে ডিউ ১.৫ আর কাটা হবে না) এমনকি যদি কোন মাসে আপনার ০ বালান্স থাকে তাহলে এই মাসে কোন চার্জ কাটা হবে না। প্রতি মাসে চার্জ করা হবে তার আগের মাসের হিসাব করে।
- Payoneer মাষ্টার কার্ড কোন ATM এ ব্যবহার করা ভাল হবে?
*** Payoneer মাষ্টার কার্ড ডাচ-বাংলা ব্যাংক এর ATM এ ব্যবহার করাই ভাল। নিচের উত্তরে এর কারন দেখুন।
- Payoneer মাষ্টার কার্ড ATM এ দিয়ে টাকা না পেলে কি করবেন?
*** আপনার কার্ডটি ATM মেশিনে প্রবেশের পর আপনি টাকা ইনপুট করার পর যে কোন কারনে আপনি টাকা পেলেন না, তাহলে আপনাকে যেটা করতে হবে। প্রথমে আপনাকে বাংক এ যোগাযোগ করতে হবে, তবে আমি বলি বাংকে যোগাযোগ করে কোন লাভ নেই। কোন বাংক ই - Payoneer মাষ্টার কার্ড এর সাপোর্ট দিতে চাইনা। তারা বলে এটা আমাদের বাংক এর কার্ড না। আপনি আপনার কার্ডের ব্যাংক এ যোগাযোগ করেন, (আমি আলরেডী ব্যাক, প্রাইম, এ প্রবলেম এ পরেছি)। এখন আপনাকে Payoneer এর সাপোর্ট এ যোগাযোগ করতে হবে। তারা আপনাকে একটা Dispute Card Holder নামে একটা ফর্ম দিবে। এবং সেটা পুরন করে ফ্যক্স অথবা রিপ্লে ইমেল এ পাঠতে হবে। এটা পাঠানোর পর ৯০ দিনের মধ্যে আপনার টাকা আপনি আপনার Payoneer এ পেয়ে জাবেন (যদি ফর্মে আপনার দেওয়া সকল তথ্য সঠিক হয়)। তবে হ্য্য আপনি এই টাকা ফেরত পাবেন কি না এটা ৩০ দিনের মধ্যে বুঝতে পারবেন। কারন ৩০ দিনের মধ্যে ই আপনার ডলার পেন্ডিং দেখাবে(দুই বা এক ডলার কম বেশি হয়ে পারে) কিন্তু আপনি টাকা উঠাতে বা কোন কাজে ব্যবহার করতে পারবেন না। এবং ৬০ বা ৬৫ দিন পরে Available হয়ে যাবে।
এখন আসি ডাচ-বাংলা ব্যাংক ATM এর কথাই। ঊপরের নিয়ম টা এ ক্ষেত্রে প্রযোজ্য নয়। ডাচ-বাংলার ATM এ যদি এই ধরনের প্রবলেম হয় তাহলে আপনি ১০ মিনিট থেকে ৩ ঘন্টার মধ্যে আপনার টাকাটা চার্ড এ পেয়ে জাবেন (পুরো টাকা) এটা ডাচ-বাংলার অটো পদ্ধতি। যদি কোন ক্রমে ৩ ঘন্টার মধ্যে না পান তাহলে ২৪ ঘন্টা অপেক্ষা করুন আশা করি পেয়ে জাবেন। যদি তাও না পান তাহলে ও আপনাকে ৯০ দিন অপেক্ষা করতে হবে না। কারন ডাচ-বাংলা ব্যাংক এর কাল সেন্টারে আপনি অভিজোগ করতে পারবেন এবং তারা আপনাকে ৭২ ঘন্টার মধ্যে টাকা ফেরত দিবে। তবে আমার ৪-৫ বার এই প্রবলেম হয়েছিল কিন্তু প্রতিবার ই আমি ১৫ মিনিটের মধ্যে ফেরত পেয়েছি তাও আবার ১০০% টাকা। এই জন্য আমি সবাই কে বলব DBBL এর ATM ব্যবহার করার জন্য। আর হা এটা DBBL এর সামান্য কিছু বুথ এ কাজ করে না। নো ওয়ারী। যে বুথে এটা কাজ করবে না সে বুথে আপনি কার্ড প্রবেশ করলে আপনাকে দেখাবে, এই ATM থেকে আপনাকে সেবা দেয়া সম্ভভ না। এটার জন্য কোন চার্জ করা হবে না।
Payoneer এর বিভিন্ন চার্জ জানতে এই লিঙ্ক থেকে ঘুরে আসুন... http://tr.im/1FrEq
আপনাদের যাদের Payoneer Account দরকার তারা নিচের লিঙ্ক এ আমার রেফারেল এ করতে পারেন। আমি আপনাদের Account Approved করাতে help করব। আমার রেফারেল লিঙ্ক- http://share.payoneer-affiliates.com/a/clk/1Xctc0
(collected)
- Payoneer মাষ্টার কার্ড কোন ব্যাংক এর ATM এ ব্যবহার করলে বেশি রেট পওয়া যাবে?
- Payoneer মাষ্টার কার্ড এর মাসিক চার্জ কত?
- Payoneer মাষ্টার কার্ড কোন ATM এ ব্যবহার করা ভাল হবে?
- Payoneer মাষ্টার কার্ড ATM এ দিয়ে টাকা না পেলে কি করবেন? এই ধরনের আর সব প্রশ্নের উত্তর...
নভেম্বর ২০০৯ এ আমার ফ্রিলান্সিং ক্যারিয়ার শুরু। এবং জানুয়ারী ২০১০ থেকে Payoneer এর ব্যববার শুরু।। আমার এই অভিজ্ঞতা থেকে...
- Payoneer মাষ্টার কার্ড কোন ব্যাংক এর ATM এ ব্যবহার করলে বেশি রেট পওয়া যাবে?
*** Payoneer মাষ্টার কার্ড দিয়ে টাকা উঠালে বাংলাদেশের সব ব্যাংকের ATM এ আপনি সমান রেট পাবেন। কত টাকা রেট পাবেন এটা জানতে আপনি গুগলে সার্চ করুন "Convert USD to BDT" এটা লিখে। লিঙ্ক টা দেখতে পারেন। http://tr.im/1FtXd
এখন আপনাদের হয়ত জানা আছে যে, Payoneer মাষ্টার কার্ড এর একটা ATM Withdrawal চার্জ আছে, এই চার্জ টা নির্ভর করে আপনার কার্ড এর উপর, মানে কিভাবে আপনার কার্ডটা করা, কারো রেফারেল, ডিরেক্ট Payoneer মাষ্টার কার্ড এর সাইট এ গিয়ে, না কি কোন ফ্রিলান্সিং বা পার্টনার সাইট থেকে করা। তবে এই চার্জ টা সধারনত ২.১৫ বা ৩.১৫ ডলার হয়ে থাকে। আপনার কার্ড এর চার্জ দেখতে এই লিঙ্ক থেকে ঘুরে আসুন। http://tr.im/1FrEq অবশ্যই আপনার আকাউন্টে লগইন করে। যে কোন এমাউন্ট এ এই চার্জ ফিক্সড। এখন আপনি যদি ৫০০ টাকা ও Withdrawal করেন তাও আপনার যে (২.১৫ বা ৩.১৫ ডলার) চার্জ করা হবে এবং ২০০০০ টাকা ও Withdrawal করেন তাও (২.১৫ বা ৩.১৫ ডলার) চার্জ কাটা হবে। এছাড়াও আরো একটি চার্জ আছে, যেটা ব্যাংক এর চার্জ, ৩% চার্জ এটা সব ব্যাকং এই সমান। অর্থাৎ ১০০ টাকাই ৩ টাকা বাংক কেটে নেবে। ব্যাখাঃ এখন ডলারের রেট ৭৭.২৮ হলে আপনি পাবেন ৩/১০০*৭৭.২৮=২.৩২ টাকা। অর্থাৎ ৭৭.২৮ টাকাই ২.৩২ টাকা চার্জ বাদ ৭৭.২৮-২.৩২=৭৪.৯৬ টাকা।
- Payoneer মাষ্টার কার্ড এর মাসিক চার্জ কত?
*** Payoneer মাষ্টার কার্ড এর মাসিক চার্জ ও নির্ভর করে আপনার কার্ড এর উপর, মানে কিভাবে আপনার কার্ডটা করা, কারো রেফারেল, ডিরেক্ট Payoneer মাষ্টার কার্ড এর সাইট এ গিয়ে, না কি কোন ফ্রিলান্সিং বা পার্টনার সাইট থেকে করা। তবে এই চার্জ টা সধারনত ১ বা ৩ ডলার হয়ে থাকে। আপনার কার্ড এর চার্জ দেখতে এই লিঙ্ক থেকে ঘুরে আসুন। http://tr.im/1FrEq অবশ্যই আপনার আকাউন্টে লগইন করে। এক এবং ৩ ডলার হয়ে থাকে আপনার মাসিক পেমেন্ট রিসিভ এর উপর। আপনি মাসিক যদি ৩+(অনেক কার্ড এর ক্ষেত্রে এট ২+ ও থাকতে পারে) পেমেন্ট রিসিভ করে থাকেন তাহলে আপনার ১ ডলার চার্জ কাটবে নেক্সট মাসের ১ম তারিখে। আর যদি ৩ টার(যাদের ২+ আছে তাদের ২ টার) নিচে পেমেন্ট রিসিভ করে থাকেন তাহলে ৩ ডলার কাটবে। এই চার্জ করার সময় Payoneer যদি আপনার কার্ডে পর্যাপ্ত ব্যলান্স না থাকে তাহলে যে এমাউন্ট থাকবে সেটাই কাটবে। যেমন আপনার চার্জ কাটবে ৩ ডলার কিন্তু আপনার একাউন্টে আছে ১.৫ বা তার ও কম তাহলে ১.৫ বা যে এমাউন্ট থাকবে সেটা কেটে নেবে। এবং পরবর্তী মাসে আর বাকি এময়াউন্ট টা কাটা হবে না। (নেক্সট মাসে শুধু নেক্সট মাসের নির্ধারীত চার্জ কাটা হবে, এই মাসে ডিউ ১.৫ আর কাটা হবে না) এমনকি যদি কোন মাসে আপনার ০ বালান্স থাকে তাহলে এই মাসে কোন চার্জ কাটা হবে না। প্রতি মাসে চার্জ করা হবে তার আগের মাসের হিসাব করে।
- Payoneer মাষ্টার কার্ড কোন ATM এ ব্যবহার করা ভাল হবে?
*** Payoneer মাষ্টার কার্ড ডাচ-বাংলা ব্যাংক এর ATM এ ব্যবহার করাই ভাল। নিচের উত্তরে এর কারন দেখুন।
- Payoneer মাষ্টার কার্ড ATM এ দিয়ে টাকা না পেলে কি করবেন?
*** আপনার কার্ডটি ATM মেশিনে প্রবেশের পর আপনি টাকা ইনপুট করার পর যে কোন কারনে আপনি টাকা পেলেন না, তাহলে আপনাকে যেটা করতে হবে। প্রথমে আপনাকে বাংক এ যোগাযোগ করতে হবে, তবে আমি বলি বাংকে যোগাযোগ করে কোন লাভ নেই। কোন বাংক ই - Payoneer মাষ্টার কার্ড এর সাপোর্ট দিতে চাইনা। তারা বলে এটা আমাদের বাংক এর কার্ড না। আপনি আপনার কার্ডের ব্যাংক এ যোগাযোগ করেন, (আমি আলরেডী ব্যাক, প্রাইম, এ প্রবলেম এ পরেছি)। এখন আপনাকে Payoneer এর সাপোর্ট এ যোগাযোগ করতে হবে। তারা আপনাকে একটা Dispute Card Holder নামে একটা ফর্ম দিবে। এবং সেটা পুরন করে ফ্যক্স অথবা রিপ্লে ইমেল এ পাঠতে হবে। এটা পাঠানোর পর ৯০ দিনের মধ্যে আপনার টাকা আপনি আপনার Payoneer এ পেয়ে জাবেন (যদি ফর্মে আপনার দেওয়া সকল তথ্য সঠিক হয়)। তবে হ্য্য আপনি এই টাকা ফেরত পাবেন কি না এটা ৩০ দিনের মধ্যে বুঝতে পারবেন। কারন ৩০ দিনের মধ্যে ই আপনার ডলার পেন্ডিং দেখাবে(দুই বা এক ডলার কম বেশি হয়ে পারে) কিন্তু আপনি টাকা উঠাতে বা কোন কাজে ব্যবহার করতে পারবেন না। এবং ৬০ বা ৬৫ দিন পরে Available হয়ে যাবে।
এখন আসি ডাচ-বাংলা ব্যাংক ATM এর কথাই। ঊপরের নিয়ম টা এ ক্ষেত্রে প্রযোজ্য নয়। ডাচ-বাংলার ATM এ যদি এই ধরনের প্রবলেম হয় তাহলে আপনি ১০ মিনিট থেকে ৩ ঘন্টার মধ্যে আপনার টাকাটা চার্ড এ পেয়ে জাবেন (পুরো টাকা) এটা ডাচ-বাংলার অটো পদ্ধতি। যদি কোন ক্রমে ৩ ঘন্টার মধ্যে না পান তাহলে ২৪ ঘন্টা অপেক্ষা করুন আশা করি পেয়ে জাবেন। যদি তাও না পান তাহলে ও আপনাকে ৯০ দিন অপেক্ষা করতে হবে না। কারন ডাচ-বাংলা ব্যাংক এর কাল সেন্টারে আপনি অভিজোগ করতে পারবেন এবং তারা আপনাকে ৭২ ঘন্টার মধ্যে টাকা ফেরত দিবে। তবে আমার ৪-৫ বার এই প্রবলেম হয়েছিল কিন্তু প্রতিবার ই আমি ১৫ মিনিটের মধ্যে ফেরত পেয়েছি তাও আবার ১০০% টাকা। এই জন্য আমি সবাই কে বলব DBBL এর ATM ব্যবহার করার জন্য। আর হা এটা DBBL এর সামান্য কিছু বুথ এ কাজ করে না। নো ওয়ারী। যে বুথে এটা কাজ করবে না সে বুথে আপনি কার্ড প্রবেশ করলে আপনাকে দেখাবে, এই ATM থেকে আপনাকে সেবা দেয়া সম্ভভ না। এটার জন্য কোন চার্জ করা হবে না।
Payoneer এর বিভিন্ন চার্জ জানতে এই লিঙ্ক থেকে ঘুরে আসুন... http://tr.im/1FrEq
আপনাদের যাদের Payoneer Account দরকার তারা নিচের লিঙ্ক এ আমার রেফারেল এ করতে পারেন। আমি আপনাদের Account Approved করাতে help করব। আমার রেফারেল লিঙ্ক- http://share.payoneer-affiliates.com/a/clk/1Xctc0
(collected)
শনিবার, ৭ ফেব্রুয়ারী, ২০১৫
- ১:০৭ AM
- rezaul haque
- ওয়েব ডিজাইন
- No comments
আশা করি আপনারা ভালো আছেন আজকে আমি আপনাদেরকে বলব ১০ টি জেকোয়ারি প্লাগিনের কথা যে গুলো আমি
নিজে ব্যবহার করি , আপনি যদি এই ১০ টি প্লাগিন ব্যবহার করেন তা হলে আপনার টেম্পলেটের চেহারা বদলে যাবে ।
১। 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 বারে আপনি ইচ্ছা মত কালার পরিবর্তন করতে পারবেন ।
নিজে ব্যবহার করি , আপনি যদি এই ১০ টি প্লাগিন ব্যবহার করেন তা হলে আপনার টেম্পলেটের চেহারা বদলে যাবে ।
১। 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 বারে আপনি ইচ্ছা মত কালার পরিবর্তন করতে পারবেন ।
- ১:০৩ AM
- rezaul haque
- ওয়ার্ডপ্রেস
- No comments
আপনার
ওয়েবসাইট অথবা ক্লায়েন্ট এর ওয়েবসাইটটির মেনুটিকে স্টিক করা লাগতে পারে যে
কোন সময়। বিষয়টি একদমই সহজ । অবশ্য যারা জানেন না তাদের কাছে অনেক কঠিন
লাগাটাই স্বাভাবিক ।নষ্ট হতে পারে অনেকটা সময়। ছোট্ট তিনটি স্টেপ ফলো করলে
খুব সহজেই এটি করতে পারেন।
প্রথম ধাপ : নিচের কোডটি কপি করে আপনার মেইন জে এস(main.js) ফাইলে দিয়ে দিন।ইনডেক্স এইচটিএমএল এও ব্যবহার করতে পারেন তবে ইনডেক্স এইচটিএমএল এ ব্যবহার করলে অবশ্যই Script ট্যাগ ব্যবহার করতে হবে। যেমন :
প্রথম ধাপ : নিচের কোডটি কপি করে আপনার মেইন জে এস(main.js) ফাইলে দিয়ে দিন।ইনডেক্স এইচটিএমএল এও ব্যবহার করতে পারেন তবে ইনডেক্স এইচটিএমএল এ ব্যবহার করলে অবশ্যই Script ট্যাগ ব্যবহার করতে হবে। যেমন :
$(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
দ্বিতীয় ধাপ : sticker কে আইডি হিসেবে মেইনমেনু এরিয়া তে সেট করতে হবে।
তৃতীয় ধাপ : এবার নিচের কোডটি স্টাইল সিএসএস এ দিয়ে দিতে হবে।
.stick {
position:fixed;
top:0px;
}
Credit by Avro
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
দ্বিতীয় ধাপ : sticker কে আইডি হিসেবে মেইনমেনু এরিয়া তে সেট করতে হবে।
তৃতীয় ধাপ : এবার নিচের কোডটি স্টাইল সিএসএস এ দিয়ে দিতে হবে।
.stick {
position:fixed;
top:0px;
}
Credit by Avro
- ১:০১ AM
- rezaul haque
- ওয়ার্ডপ্রেস
- No comments
ওয়ার্ডপ্রেসে প্রাইমারী টেমপ্লেট ৮টি
1. index.php
2. archive.php
3. single.php
4. page.php
5. home.php
6. comments-popup.php
7. 404.php
8. search.php
ওয়ার্ডপ্রেসে সেকেন্ডারী টেমপ্লেট ৮টি
1.paged:true paged.php
2. author.php
3. category.php
4. texonomy.php
5. date.php
6. tag.php
7. attachment.php
8. single-post.php
ওয়ার্ডপ্রেসে ভেরিয়েবল টেমপ্লেট ১৬টি
1. archive-$posttype.php
2. single-$posttype.php
3. page-$id.php
4. mimetype_$subtype.php
5. page-&slug.php
6. author-$id.php
7. category-$id.php
8. taxonomy-&taxonomy.php
9. tag-$id.php
10. $subtype.php
11. &custom.php
12. author-$nicename.php
13. catagory-$slug.php
14. taxonomy-$taxonomy-$term.php
15. tag-$slug.php
16. $mimetype.php
ওয়ার্ডপ্রেসে পেইজ টাইপ ২৭টি
1. paged:false
2. Year Archive
3. Month Archive
4. Day Archive
5. Custom Template
6. Default Template
7. Author Archive
8. Category Archive
9. Custom Post Type Archive
10. Custom Taxonomy Archive
11. Date Archive
12. Tag Archive
13. Attachment Post
14. Custom Post
15. Blog Post
16. Page Template
17. Page Shown On Front
18. Posts Shown On Front
19. Single Post Page
20. Static Page
21. Archive Page
22. Singular Page
23. Site Front Page
24. Blog Posts Index Page
25. Comments Popup Page
26. Error 404 Page
27. Search Result Page
এতে সদস্যতা:
পোস্টগুলি (Atom)