Apr 01

যোগাযোগ ব্যবস্থাপনায় লক্ষণীয় বিষয়সমূহ

To read this article in English please click this link

বড় প্রজেক্টের ক্ষেত্রে যোগাযোগের বিষয়টিও পূর্বপরিকল্পিত হতে হবে এবং কার্যকর ভাবে বাস্তবায়ন করতে হবে। অবস্থার পরিপ্রেক্ষিতে এই পরিকল্পনা পর্যালোচনা এবং পরিবর্তন করা যেতে পারে। সারকথা:-

* যোগাযোগ খুবই সুকৌশল এবং বিচক্ষণতার সাথে করতে হবে।

* সংকলন, প্রেরণ, সংরক্ষণ ও বিতরণ সংক্রান্ত কাজ এবং প্রজেক্টের যাবতীয় রেকর্ড সংরক্ষণ করতে হবে।

* কি ব্যাপারে, কার সাথে, কতটুকু বিরতিতে এবং ঠিক কোন সময়ে যোগাযোগ করা তা আগেই নির্ধারণ করতে হবে।

মাশরুম প্রজেক্ট ম্যানেজমেন্ট:

নির্দিষ্ট ব্যক্তির কাছে সময়মত ঠিক তথ্য প্রেরণ করার চাইতে নিয়মিত বিরতিতে এজেন্টের অগ্রগতি পরিদর্শন করাটাই শ্রেয় যেখানে সবাইকে সবকিছু জানানো হবে না।

যোগাযোগ ব্যবস্থাপনায় কিছু লক্ষণীয় বিষয়ঃ

* যোগাযোগ পরিকল্পনা

* বাস্তবায়ন (তথ্য বিতরণ)

* তদারকি এবং নিয়ন্ত্রন (পারফরম্যান্স রিপোর্ট এবং বিনিয়োগকারীদের সাথে আলোচনা)

উক্ত কাজগুলির মাধ্যমে বিনিয়োগকারীদের সাথে যোগাযোগ করলে তা সংশয় কমাতে সাহায্য করে এবং কর্মীদের উৎসাহিত করে।

প্রজেক্ট ম্যানেজারের কাজ: বেশিরভাগ ক্ষেত্রে যোগাযোগ এমনকি তা মোট সময়ের ৯০ শতাংশ হতে পারে যার অর্ধেক হবে টিমের সদস্যদের সাথে।

আরও কিছু বিষয়ঃ

* পরিকল্পনা (যোগাযোগ পরিকল্পনা)

* ফলাফল (যোগাযোগ ব্যবস্থাপনার পরিকল্পনা)

* বিরতির পরিমাণ

* মাধ্যম/ধরন যেমন ই–মেইল, ওয়েব, মিটিং ইত্যাদি

* কোন কোন তথ্য

* কার সাথে

এ পরিকল্পনায় বেশ কিছু বিষয় প্রভাব ফেলে যেমন ব্যবসায়িক পরিবেশ, প্রাতিষ্ঠানিক সম্পত্তি এবং মূল প্রজেক্টের পরিকল্পনা।

প্রয়োজনীয় সরঞ্জামঃ

যোগাযোগের মাধ্যম: যোগাযোগ কিভাবে হবে তা নির্ধারণ করুন। n সংখ্যক লোক n(n–1)/2পন্থায় যোগাযোগ করতে পারে। এর মাধ্যমে একটি ছোট দল গঠন করা যেতে পারে। কিছু ক্ষেত্রে অফিসিয়াল চ্যানেলের ব্যবহার গুরুত্বপূর্ণ। বিভিন্ন প্রযুক্তি যেমন ভিডিও কনফারেন্স, নেট মিটিং ব্যবহার করা যেতে পারে।

যোগাযোগ ব্যবস্থার পরিকল্পনা:

–তথ্য সমূহ কাকে প্রদান করা হচ্ছে?

– কোন কোন তথ্য প্রদান করা হচ্ছে?

– কার মাধ্যমে প্রদান করা হচ্ছে?

– কোন প্রক্রিয়ায় প্রদান করা হচ্ছে?

– কতক্ষণ পর পর?

বাস্তবায়ন(তথ্য প্রদান):

যোগাযোগের আদর্শ উপায়ঃ

* ঠিকভাবে শ্রবণ

* মতামত প্রদান

* পারিভাষিক ভাষা ব্যবহার

যোগাযোগের উপায়:

* নিয়মতান্ত্রিক এবং অনিয়মিত লিখিত পদ্ধতি

* নিয়মতান্ত্রিক এবং অনিয়মিত মৌখিক পদ্ধতি।

তদারকি এবং নিয়ন্ত্রণঃ

দ্রষ্টব্যঃ এখানে প্রজেক্ট ম্যানেজমেন্ট সংক্রান্ত যাবতীয় তথ্য PMI এবং PMBOK অনুযায়ী সংকলিত।

Mar 31

এইচটিএমএল লেআউট (HTML Layout)

Md. Mursedul Islam Sumon

Web Designer

 

এইচটিএমএল লেআউট (HTML Layouts)

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

HTML এ <div> tag এর ব্যবহার করে layout design বা কলামে বিভক্ত করা যায়।

div element ব্যবহার করে প্রায় layout করা হয়, কারন div ব্যবহার করলে একে সহজেই CSS দিয়ে এর অবস্থান ও সবকিছু design করে নেয়া যায়।

নিচের উদাহরণটিতে চারটি div ব্যবহার করে কয়েকটি কলাম তৈরি করা হল-

<body>

<div id=”header”>
<h1>City Gallery</h1>
</div>

<div id=”nav”>
London<br>
Paris<br>
Tokyo<br>
</div>

<div id=”section”>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id=”footer”>
Copyright © W3Schools.com
</div>

</body>



উপরোক্ত html এর CSS part টুকু নিম্নরুপ




<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
 </style>




 


ফলাফলঃ




Table




 


HTML5 ব্যবহার করে ওয়েবসাইট বিন্যাস


HTML5 দিয়ে খুব সুন্দরভাবে ও সহজেই একটা website এর layout তৈরি করা যায়।


HTML5 এর কিছু নতুন Tag ব্যবহার করে সহজেই website এর বিভিন্ন part আলাদা করা যায়।


 






header = এই tag ব্যবহার করে website এর header section কে বুঝানো হয়।




nav = এই tag ব্যবহার করে মেনুর আইটেমগুলোর link করা হয়।




section = এই tag ব্যবহার করে কোন document এর section বুঝানো হয়।




article = এই tag দিয়ে একটি article বুঝানো হয়।




aside = এই tag দিয়ে পেজ এর sidebar বুঝানো হয়।




footer = এই tag দিয়ে পেজ এর সর্বনিম্ন অংশ বা footer part বুঝানো হয়।






নিচের উদাহরনে <header>, <nav>, <section>, এবং <footer> ব্যবহার করে layout তৈরি করা দেখানো হল-




<body>


<header>

<h1>City Gallery</h1>

</header>


<nav>

London<br>

Paris<br>

Tokyo<br>

</nav>


<section>

<h1>London</h1>

<p>

London is the capital city of England. It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.

</p>

<p>

Standing on the River Thames, London has been a major settlement for two millennia,

its history going back to its founding by the Romans, who named it Londinium.

</p>

</section>


<footer>

Copyright © W3Schools.com

</footer>


</body>




 


 


উপরোক্ত html এর CSS নিম্নে দেয়া হল-




<style>
 header {
     background-color:black;
     color:white;
     text-align:center;
     padding:5px; 
 }
 nav {
     line-height:30px;
     background-color:#eeeeee;
     height:300px;
     width:100px;
     float:left;
     padding:5px; 
 }
 section {
     width:350px;
     float:left;
     padding:10px; 
 }
 footer {
     background-color:black;
     color:white;
     clear:both;
     text-align:center;
     padding:5px; 
 }






টেবিল ব্যবহার করে HTML বিন্যাস


Table tag ব্যবহার করে html layout তৈরি করা যায়।




<body>
 
 <table class="lamp">
 <tr>
   <th>
     <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
   </th>
   <td>
     The table element was not designed to be a layout tool.
   </td>
 </tr>
 </table>
 
 </body>






 


উপরোক্ত html এর CSS নিম্নে দেয়া হল-




<style>
 table.lamp {
     width:100%;
     border:1px solid #d4d4d4;
 }
 table.lamp th, td {
     padding:10px;
 }
 table.lamp th {
     width:40px;
 }
 </style>




 



						
						
						
		

		
			    
    	




 
            

                


            

            		

                



		
	

    
    			    	

            

            	Mar
                31
                            

                    

            
		        

			
				অ্যাঙ্গুলার জেএস (AngularJS) এবং টুইটার বুটস্ট্র্যাপ            
			        

		
					    
    		
				

			
													
							
												
								
অ্যাঙ্গুলার জেএস (AngularJS) এবং টুইটার বুটস্ট্র্যাপ


মো: আসাদুজ্জামান (Md. Asaduzzaman)

ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার)


 


বুটস্ট্র্যাপ একটি জনপ্রিয় স্টাইল শিট (style sheet) এই অধ্যায়ে AngularJS সঙ্গে কিভাবে এটি ব্যবহার হয় দেখানো হবে।


 


বুটস্ট্র্যাপ

আপনার AngularJS এপ্লিকেশন এ বুটস্ট্র্যাপ অন্তর্ভুক্ত করার জন্য, আপনার <head> এলিমেন্ট এর মধ্যে নিম্নলিখিত লাইনটি যোগ করুন:


<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>


আপনি বুটস্ট্র্যাপ অধ্যয়ন করতে চান, আমাদের বুটস্ট্র্যাপ টিউটোরিয়ালে যান.


নীচে একটি সম্পূর্ণ এইচটিএমএল উদাহরণ সহ সকল AngularJS নির্দেশ এবং বুটস্ট্র্যাপ ক্লাস ব্যাখ্যা করা হয়েছে।


 


এইচটিএমএল কোড

<!DOCTYPE html>

<html ng-app=””>

<head>

<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>

<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script>

</head>


<body ng-controller=”userController”>

<div class=”container”>


<h3>Users</h3>


<table class=”table table-striped”>

<thead><tr>

<th>Edit</th>

<th>First Name</th>

<th>Last Name</th>

</tr></thead>

<tbody><tr ng-repeat=”user in users”>

<td>

<button class=”btn” ng-click=”editUser(user.id)”>

<span class=”glyphicon glyphicon-pencil”></span>&nbsp;&nbsp;Edit

</button>

</td>

<td>{{ user.fName }}</td>

<td>{{ user.lName }}</td>

</tr></tbody>

</table>


<hr>

<button class=”btn btn-success” ng-click=”editUser(‘new’)”>

<span class=”glyphicon glyphicon-user”></span> Create New User

</button>

<hr>


<h3 ng-show=”edit”>Create New User:</h3>

<h3 ng-hide=”edit”>Edit User:</h3>


<form class=”form-horizontal”>

<div class=”form-group”>

<label class=”col-sm-2 control-label”>First Name:</label>

<div class=”col-sm-10″>

<input type=”text” ng-model=”fName” ng-disabled=”!edit” placeholder=”First Name”>

</div>

</div>

<div class=”form-group”>

<label class=”col-sm-2 control-label”>Last Name:</label>

<div class=”col-sm-10″>

<input type=”text” ng-model=”lName” ng-disabled=”!edit” placeholder=”Last Name”>

</div>

</div>

<div class=”form-group”>

<label class=”col-sm-2 control-label”>Password:</label>

<div class=”col-sm-10″>

<input type=”password” ng-model=”passw1″ placeholder=”Password”>

</div>

</div>

<div class=”form-group”>

<label class=”col-sm-2 control-label”>Repeat:</label>

<div class=”col-sm-10″>

<input type=”password” ng-model=”passw2″ placeholder=”Repeat Password”>

</div>

</div>

</form>


<hr>

<button class=”btn btn-success” ng-disabled=”error || incomplete”>

<span class=”glyphicon glyphicon-save”></span> Save Changes

</button>

</div>


<script src = “myUsers.js”></script>

</body>

</html>


 


এটা নিজে চেষ্টা করে দেখুন


ডিরেক্টিভ (Directives) (উপরে ব্যবহৃত) ব্যাখ্যা

AngularJS ডিরেক্টিভ বর্ণনা

<html ng-app ডিফাইন করে (unnamed) এপ্লিকেশন <html> এলিমেন্ট এর জন্য

<body ng-controller একটি কন্ট্রোলার ডিফাইন করে <body> এলিমেন্ট এর জন্য

<tr ng-repeat <tr> এলিমেন্ট রিপিট করে প্রত্যেক ইউজার এর ইউজারগুলোর মধ্যে

<button ng-click editUser() ফাংশনকে কল করে যখন <button> এ ক্লিক করা হয়

<h3 ng-show <h3> এলিমেন্ট প্রদর্শন করে যদি edit = true

<h3 ng-hide <h3> এলিমেন্ট অদৃশ্য করে যদি edit = true

<input ng-model <input> এলিমেন্ট বাধাই করে এপ্লিকেশন এর মধ্যে।

<button ng-disabled <button> এলিমেন্ট নিস্ক্রিয় করে যদি কোন ভূল বা অপরিপূর্ণতা থাকে incomplete = true


________________________________________

বুটস্ট্র্যাপ ক্লাস এ ব্যাখ্যা

এলিমেন্ট বুটস্ট্র্যাপ ক্লাস ডিফাইনস

<div> container একটি কন্টেন্ট কন্টেইনার

<table> table একটি টেবিল

<table> table-striped একটি স্ট্রাইপড টেবিল

<button> btn একটি বাটন

<button> btn-success একটি সফল বাটন

<span> glyphicon একটি গ্লিফ আইকন

<span> glyphicon-pencil একটি পেন্সিল আইকন

<span> glyphicon-user একটি ইউজার আইকন

<span> glyphicon-save একটি সংরক্ষন আইকন

<form> form-horizontal একটি হরিজন্টাল ফরম

<div> form-group একটি ফরম গ্রুপ

<label> control-label একটি কন্ট্রোল লেবেল

<label> col-sm-2 একটি ২ কলাম স্প্যান

<div> col-sm-10 একটি ১০ কলাম স্প্যান


________________________________________

জাভাস্ক্রিপট কোড

function userController($scope) {

$scope.fName = ”;

$scope.lName = ”;

$scope.passw1 = ”;

$scope.passw2 = ”;

$scope.users = [

{id:1, fName:’Hege’, lName:”Pege” },

{id:2, fName:’Kim’, lName:”Pim” },

{id:3, fName:’Sal’, lName:”Smith” },

{id:4, fName:’Jack’, lName:”Jones” },

{id:5, fName:’John’, lName:”Doe” },

{id:6, fName:’Peter’, lName:”Pan” }

];

$scope.edit = true;

$scope.error = false;

$scope.incomplete = false;


$scope.editUser = function(id) {

if (id == ‘new’) {

$scope.edit = true;

$scope.incomplete = true;

$scope.fName = ”;

$scope.lName = ”;

} else {

$scope.edit = false;

$scope.fName = $scope.users[id-1].fName;

$scope.lName = $scope.users[id-1].lName;

}

};


$scope.$watch(‘passw1’,function() {$scope.test();});

$scope.$watch(‘passw2’,function() {$scope.test();});

$scope.$watch(‘fName’, function() {$scope.test();});

$scope.$watch(‘lName’, function() {$scope.test();});


$scope.test = function() {

if ($scope.passw1 !== $scope.passw2) {

$scope.error = true;

} else {

$scope.error = false;

}

$scope.incomplete = false;

if ($scope.edit && (!$scope.fName.length ||

!$scope.lName.length ||

!$scope.passw1.length || !$scope.passw2.length)) {

$scope.incomplete = true;

}

};


}


________________________________________

জাভাস্ক্রিপ্ট কোড এর ব্যাখ্যা

স্কোপ প্রপার্টিজ ব্যবহার করা হয়েছে

$scope.fName মডেল ভেরিয়েবল (ইউজার ফার্স্ট নেম)

$scope.lName মডেল ভেরিয়েবল ((ইউজার লাস্ট নেম)

$scope.passw1 মডেল ভেরিয়েবল (ইউজার পাসওয়ার্ড ১)

$scope.passw2 মডেল ভেরিয়েবল (ইউজার পাসওয়ার্ড ১))

$scope.users মডেল ভেরিয়েবল (অ্যারে অব ইউজার)

$scope.edit সেট true যখন ইউজার ক্রিয়েট ইউজার এ ক্লিক করে.

$scope.error সেট true যদি passw1 passw2 এর মত না হয়

$scope.incomplete সেট true যদি কোন ফিল্ড ফাকা থাকে (length = 0)

$scope.editUser সেট মডেল ভেরিয়েবল

$scope.watch ওয়াচেস মডেল ভেরিয়েবল

$scope.test টেস্ট মডেল ভেরিয়েবল ভূল অথবা অপরিপূর্ণতার জন্য।


						
						
						
		

		
			    
    	




 
            

                


            

            		

                



		
	

    
    			    	

            

            	Mar
                31
                            

                    

            
		        

			
				আজ আমরা জেকোয়েরি দিয়ে ওয়েব পেজ এর উপাদান (HTML Elements) গুলোর CSS property (such as display, font-height) পরিবর্তন করা শিখবো            
			        

		
					    
    		
				

			
													
							
												
								
আজ আমরা জেকোয়েরি দিয়ে ওয়েব পেজ এর উপাদান (HTML Elements) গুলোর CSS property (such as display, font-height) পরিবর্তন করা শিখবো । সাথে সাথে উপাদান গুলোর CSS class পরিবরতন করবো যেমন নতুন css class যোগ করা।

লেখাঃ মোস্তাফিজুর ফিরোজ ।


কেমন আছেন সবাই? আজ আমরা জেকোয়েরি দিয়ে সিএসএস ক্লাস পরিচালনা করা শিখবো ।


জেকোয়েরি দিয়ে খুব সহজে সিএসএস ক্লাস গুলোকে পরিচালনা করা যায় ।


জেকোয়েরি দিয়ে সিএসএস পরিচালনাঃ

সিএসএস পরিচালনা করার জন্য জেকোয়েরি এর কয়েকটি পদ্ধতি আছে । আমরা এর ভিতর নিচের পদ্ধতি গুলো অনুসরণ করবো ।


১। addClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাস যোগ করা যায় ।


২। removeClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাস দূরীভূত করা যায় ।


৩। toggleClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাসকে সংযুক্ত বা দূরীভূত করা যায় ।


৪। css() ঃ স্টাইল এট্রিবিউটকে সেট করে থাকে ।


স্টাইলশিট এর উদাহরণঃ

নিচের উদাহরণটি আজ সবখানে ব্যবহার করবো । তাই খুব ভালভাবে খেয়াল করুন ।


.important

{

font-weight:bold;

font-size:xx-large;

}


.blue

{

color:blue;

}


১। jQuery addClass() Methodঃ

নিচের উদাহরণ দেখাবে বিভিন্ন এলিমেন্টস এর সাথে কিভাবে ক্লাস এট্রিবিউটস যোগ করতে হয় । যখন ক্লাস যোগ করা হয় তখন অবশ্যই আপনি অনেকগুলো এলিমেন্টস একসাথে নির্বাচন করতে পারবেন ।


$(“button”).click(function(){

$(“h1,h2,p”).addClass(“blue”);

$(“div”).addClass(“important”);

});


addClass() method এর মাধ্যমে আপনি একসাথে অনেক গুলো ক্লাস কে নির্দেশনা দিতে পারবেন ।

$(“button”).click(function(){

$(“#div1”).addClass(“important blue”);

});


২। jQuery removeClass() Methodঃ

নিচের উদাহরণ দেখাবে বিভিন্ন এলিমেন্টস এর থেকে কিভাবে ক্লাস এট্রিবিউটসকে দূর করতে হয় ।


$(“button”).click(function(){

$(“h1,h2,p”).removeClass(“blue”);

});


৩। jQuery toggleClass() Methodঃ

নিচের উদাহরণের মাধ্যমে আমরা দেখতে পাবো jQuery toggleClass() Method ব্যবহার করতে হয় । এই মেথড নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাসকে সংযুক্ত বা দূরীভূত করে ।


$(“button”).click(function(){

$(“h1,h2,p”).toggleClass(“blue”);

});


৪। jQuery css() Methodঃ

এই মেথড স্টাইল এট্রিবিউটকে সেট করে থাকে । এটা অনেকভাবে স্টাইল করে থাকে । তাই পরে এটা নিয়ে একটি পোস্ট করবো ।


তাই এই গুলো আপাতত প্র্যাকটিস করতে থাকুন । দেখা হবে পরবর্তী পোস্টে jQuery css() Method নিয়ে । ততক্ষণ আমাদের সাথেই থাকুন ।


						
						
						
		

		
			    
    	




 


                



		
	

    
    			    	

            

            	Mar
                31
                            

                    

            
		        

			
				জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার            
			        

		
					    
    		
				

			
													
							
												
								
জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার ।


লেখকঃ মোস্তাফিজুর ফিরোজ ।

মেইলঃ me@firoz.me

ওয়েবসাইটঃ www.firoz.me


কি খবর ? কেমন আছেন সবাই? আজকে একটু ঠাণ্ডা বেশি, তাই সবাই মনে হয় লেপের ভিতর থেকে ভালোই আছেন । আজ আমি আপনাদেরকে জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখাবো ।


jQuery CSS Classes

জেকোয়েরি মোবাইল তার উপাদান সমূহকে বিভিন্ন ভাবে ডিজাইন করার জন্য সিএসএস ক্লাস ব্যবহার করে থাকে । আজ আমরা তাই সিএসএস ক্লাসের কিছু সাধারণ ব্যবহার দেখাবো ।


Global Classes

এই Global Classes গুলো জেকোয়েরি মোবাইল উইজেটস যেমন বাটন, টুলবার, প্যানেল, টেবিল, লিস্ট প্রভৃতি যোগ করার কাজে ব্যবহার করা হয় ।


ক্লাসের নামঃ ui-corner-all

ক্লাসের বর্ণনাঃ উপাদানের গোলাকার কোণা তৈরিতে ব্যবহার করা হয় ।


ক্লাসের নামঃ ui-shadow

ক্লাসের বর্ণনাঃ উপাদান সমূহের শ্যাডো মানে ছায়া তৈরিতে ব্যবহার করা হয় ।


ক্লাসের নামঃ ui-overlay-shadow

ক্লাসের বর্ণনাঃ মাত্রাতিরিক্ত ছায়া তৈরিতে এটা ব্যবহার করা হয় ।


ক্লাসের নামঃ ui-mini

ক্লাসের বর্ণনাঃ উপাদাঙ্গুলোকে ছোট করতে এটা ব্যবহার করা হয় ।


Button Classes

<a> অথবা <button> উপাদানগুলোকে Global Classes এর সাথে যোগ করতে ব্যবহার করা হয় ।


ক্লাসের নামঃ ui-btn

ক্লাসের বর্ণনাঃ বাটনগুলোকে বিভিন্ন স্টাইলে সাজাতে এই <a> উপাদানসমূহকে যোগ করতে ব্যবহার করা হয় ।


ক্লাসের নামঃ ui-btn-inline

ক্লাসের বর্ণনাঃ বাটন গুলোকে একই সারিতে দেখাতে এটি ব্যবহার করা হয় ।


ক্লাসের নামঃ ui-btn-icon-top

ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার উপরে নিয়ে যায় ।


ক্লাসের নামঃ ui-btn-icon-right

ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার ডান দিকে নিয়ে যায় ।


ক্লাসের নামঃ ui-btn-icon-bottom

ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার নিচে নিয়ে যায় ।


ক্লাসের নামঃ ui-btn-icon-left

ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার বাম দিকে নিয়ে যায় ।


ক্লাসের নামঃ ui-btn-icon-notext

ক্লাসের বর্ণনাঃ শুমুমাত্র আইকন দেখাবে ।


ক্লাসের নামঃ ui-btn-a|b

ক্লাসের বর্ণনাঃ a এবং b দুইটি ব্যাকগ্রাউণ্ডের কালার দেখাবে । a এর কালার ডিফল্ট থাকে যা হল ধূসর ব্যাকগ্রাউণ্ডের সাথে কালো লেখা । শুধুমাত্র b কালো ব্যাকগ্রাউণ্ডের সাথে সাদা লেখার পরিবর্তন করবে ।


Icon Classes

সকল <a> এবং <button> উপাদানের ক্লাসসমূহ দেয়া হল ।


ক্লাসের নামঃ ui-icon-action

ক্লাসের বর্ণনাঃ অ্যাকশন বাটন ।


ক্লাসের নামঃ ui-icon-alert

ক্লাসের বর্ণনাঃ একটা ত্রিভূজের ভিতর বিস্ময় চিহ্ন ।


ক্লাসের নামঃ ui-icon-audio

ক্লাসের বর্ণনাঃ স্পিকারের চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-d-l

ক্লাসের বর্ণনাঃ নিচের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-d-r

ক্লাসের বর্ণনাঃ নিচের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-u-l

ক্লাসের বর্ণনাঃ উপরের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-u-r

ক্লাসের বর্ণনাঃ উপরের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-l

ক্লাসের বর্ণনাঃ বাম দিকের তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-r

ক্লাসের বর্ণনাঃ ডান দিকের তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-u

ক্লাসের বর্ণনাঃ উর্দ্ধমূখী তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-d

ক্লাসের বর্ণনাঃ নিম্নগামী তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-back

ক্লাসের বর্ণনাঃ ব্যাক বাটন ।


ক্লাসের নামঃ ui-icon-bars

ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল দাগের বাটন ।


ক্লাসের নামঃ ui-icon-bullets

ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল ফোটার বাটন ।


ক্লাসের নামঃ ui-icon-calendar

ক্লাসের বর্ণনাঃ ক্যালেন্ডার বাটন ।


ক্লাসের নামঃ ui-icon-camera

ক্লাসের বর্ণনাঃ ক্যামেরা বাটন ।


ক্লাসের নামঃ ui-icon-carat-d

ক্লাসের বর্ণনাঃ নিম্নগামী ক্যারাট ।


ক্লাসের নামঃ ui-icon-carat-l

ক্লাসের বর্ণনাঃ বামমুখী ক্যারাট ।


ক্লাসের নামঃ ui-icon-carat-r

ক্লাসের বর্ণনাঃ ডানমুখী ক্যারাট ।


ক্লাসের নামঃ ui-icon-carat-u

ক্লাসের বর্ণনাঃ উর্দ্ধমূখী ক্যারাট ।


ক্লাসের নামঃ ui-icon-check

ক্লাসের বর্ণনাঃ চেক মার্ক ।


ক্লাসের নামঃ ui-icon-clock

ক্লাসের বর্ণনাঃ ঘড়ির আইকন ।


ক্লাসের নামঃ ui-icon-cloud

ক্লাসের বর্ণনাঃ মেঘের আইকন ।


ক্লাসের নামঃ ui-icon-comment

ক্লাসের বর্ণনাঃ কমেন্ট বা ম্যাসেজ বাটন ।


ক্লাসের নামঃ ui-icon-delete

ক্লাসের বর্ণনাঃ ডিলিট বাটন ।


ক্লাসের নামঃ ui-icon-edit

ক্লাসের বর্ণনাঃ এডিট অথবা পেন্সিল আইকন ।


ক্লাসের নামঃ ui-icon-eye

ক্লাসের বর্ণনাঃ চোখের আইকন ।


ক্লাসের নামঃ ui-icon-forbidden

ক্লাসের বর্ণনাঃ নিষিদ্ধ আইকন ।


ক্লাসের নামঃ ui-icon-forward

ক্লাসের বর্ণনাঃ ফরওয়ার্ড আইকন ।


ক্লাসের নামঃ ui-icon-gear

ক্লাসের বর্ণনাঃ সেটিংস বাটন ।


ক্লাসের নামঃ ui-icon-grid

ক্লাসের বর্ণনাঃ গ্রিড চিহ্ন ।


ক্লাসের নামঃ ui-icon-heart

ক্লাসের বর্ণনাঃ হার্ট অথবা লাভ চিহ্ন ।


ক্লাসের নামঃ ui-icon-home

ক্লাসের বর্ণনাঃ হোম বাটন ।


ক্লাসের নামঃ ui-icon-info

ক্লাসের বর্ণনাঃ ইনফরমেশন বাটন ।


ক্লাসের নামঃ ui-icon-location

ক্লাসের বর্ণনাঃ লোকেশন বাটন ।


ক্লাসের নামঃ ui-icon-lock

ক্লাসের বর্ণনাঃ তালার আইকন ।


ক্লাসের নামঃ ui-icon-mail

ক্লাসের বর্ণনাঃ মেইল আইকন ।


ক্লাসের নামঃ ui-icon-minus

ক্লাসের বর্ণনাঃ বিয়োগ আইকন ।


ক্লাসের নামঃ ui-icon-navigation

ক্লাসের বর্ণনাঃ নেভিগেশন আইকন ।


ক্লাসের নামঃ ui-icon-phone

ক্লাসের বর্ণনাঃ টেলিফোন আইকন ।


ক্লাসের নামঃ ui-icon-power

ক্লাসের বর্ণনাঃ পাওয়ার বাটন । বা অন অফ বাটন ।


ক্লাসের নামঃ ui-icon-plus

ক্লাসের বর্ণনাঃ যোগ বাটন ।


ক্লাসের নামঃ ui-icon-recycle

ক্লাসের বর্ণনাঃ রিসাইকেল চিহ্ন ।


ক্লাসের নামঃ ui-icon-refresh

ক্লাসের বর্ণনাঃ রিফ্রেশ বাটন ।


ক্লাসের নামঃ ui-icon-search

ক্লাসের বর্ণনাঃ সার্চ বাটন ।


ক্লাসের নামঃ ui-icon-shop

ক্লাসের বর্ণনাঃ দোকান অথবা ব্যাগের আইকন ।


ক্লাসের নামঃ ui-icon-star

ক্লাসের বর্ণনাঃ তারার চিহ্ন ।


ক্লাসের নামঃ ui-icon-tag

ক্লাসের বর্ণনাঃ ট্যাগ বাটন ।


ক্লাসের নামঃ ui-icon-user

ক্লাসের বর্ণনাঃ ব্যবহারকারী বাটন ।


ক্লাসের নামঃ ui-icon-video

ক্লাসের বর্ণনাঃ ভিডিও বা ক্যামেরা আইকন ।


Theme Classes

জেকোয়েরি মোবাইল সাধারণত ধূসর এবং কালো এই দুই ধরনের থিম সরবরাহ করে থাকে । কিন্তু আপনি আপনার ইচ্ছামত এটা পরিবর্তন করে নিতে পারেন । আপনি (a-z) মত আপনার থিমটি কাস্টোমাইজ করতে পারবেন ।


ক্লাসের নামঃ ui-bar-(a-z)

ক্লাসের বর্ণনাঃ হেডার, ফুটার এবং অন্যান্য বারের কালার নির্দেশ করে থাকে ।


ক্লাসের নামঃ ui-body-(a-z)

ক্লাসের বর্ণনাঃ কনটেন্ট ব্লক যেমন page content panes , listview items, popups, collapsibles, loader, sliders, এবং panels এর কালার নির্দেশ করে ।


ক্লাসের নামঃ ui-btn-(a-z)

ক্লাসের বর্ণনাঃ বাটন এবং আইকনের কালার নির্দেশ করে থাকে ।


ক্লাসের নামঃ ui-group-theme-(a-z)

ক্লাসের বর্ণনাঃ গুরুপ ভিত্তিক রঙ নির্দেশ করে দেয় ।


ক্লাসের নামঃ ui-overlay-(a-z)

ক্লাসের বর্ণনাঃ ডায়ালগ, পপ-আপ এবং পেজের উপাদানসমূহের রঙ ঠিক করে দেয় ।


ক্লাসের নামঃ ui-page-theme-(a-z)

ক্লাসের বর্ণনাঃ প্রত্যেক পেজের রঙ নির্দেশ করে ।


Grid Classes

গ্রিডের কলাম গুলো বিন্নভাবে থাকতে পারে। সাধারণত ৫ ধরণের গ্রিড ব্যবহার করা হয়ে থাকে ।


গ্রিড ক্লাসঃ ui-grid-solo

কলামঃ 1

কলামের ব্যাপ্তিঃ 100%

সুসঙ্গত হয়ঃ ui-block-a


গ্রিড ক্লাসঃ ui-grid-a

কলামঃ 2

কলামের ব্যাপ্তিঃ 50% / 50%

সুসঙ্গত হয়ঃ ui-block-a|b


গ্রিড ক্লাসঃ ui-grid-b

কলামঃ 3

কলামের ব্যাপ্তিঃ 33% / 33% / 33%

সুসঙ্গত হয়ঃ ui-block-a|b|c


গ্রিড ক্লাসঃ ui-grid-c

কলামঃ 4

কলামের ব্যাপ্তিঃ 25% / 25% / 25% / 25%

সুসঙ্গত হয়ঃ ui-block-a|b|c|d


গ্রিড ক্লাসঃ ui-grid-d

কলামঃ 5

কলামের ব্যাপ্তিঃ 20% / 20% / 20% / 20% / 20%

সুসঙ্গত হয়ঃ ui-block-a|b|c|d|e


আর এর ভিতরেই কিন্তু আমরা জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখে গেলাম । কোথাও না বুঝতে পারলে কমেন্ট করতে কিন্তু ভুলবেন না ।


						
						
						
		

		
			    
    	




 


                



		
	

    
    			    	

            

            	Mar
                31
                            

                    

            
		        

			
				জে’কুয়েরি (jQuery) মোবাইল orientationchange ইভেন্ট            
			        

		
					    
    		
				

			
													
							
												
								
জে’কুয়েরি (jQuery) মোবাইল orientationchange ইভেন্ট

—–

কেউ যখন তার মোবাইল ডিভাইসের অবস্থান (orientation) পরিবর্তন করে আনুভূমিক (horizontal) কিংবা উল্লম্ব (vertical) অবস্থায় নিয়ে আসবে তখন orientationchange ইভেন্ট কাজ করবে।

orientationchange ইভেন্ট ব্যবহার করার জন্য window object এর সাথে ইভেন্টটি সংযুক্ত করে দিতে হবে। যেমন-

$(window).on(“orientationchange”,function(){

alert(“ডিভাইসের অবস্থান পরিবর্তন হয়েছে!”);

});

callback ফাংশনটি একটি আর্গুমেন্ট ধারণ করতে পারে, আর তা হলো event অবজেক্ট; যা মোবাইল ডিভাইসের orientation বা অবস্থা জানায়: “portrait” (অর্থ হচ্ছে মোবাইল ডিভাইস এখন উল্লম্ব অবস্থানে রাখা আছে) কিংবা “landscape” (মোবাইল ডিভাইস এখন আনুভূমিক অবস্থানে রাখা আছে):

উদাহরণ:

$(window).on(“orientationchange”,function(event){

alert(“Orientation is: ” + event.orientation);

});


						
						
						
		

		
			    
    	




 


                



		
	

    
    			    	

            

            	Mar
                31
                            

                    

            
		        

			
				জেকয়ারি এফেক্ট মেথড            
			        

		
					    
    		
				

			
													
							
												
								
জেকয়ারি এফেক্ট মেথড

নয়ন চন্দ্র সরকার


জেকয়ারি হল এমন একটি জাভাস্ক্রিপ্ট লাইব্রি যা সহজ, ছোট এবং সমৃদ্ধ এবং যা, এইচ টি এম এল ডকুমেন্ট গুলোকে একটা এ পি আই এর মাধ্যমে বিভিন্ন ব্রাউজার দক্ষতা সহকারে হস্তচালন করতে সাহায্য করে। নিচে এর এফেক্ট গুলো আলোচনা করা হল।


জেকয়ারির অ্যানিমেশন এফেক্ট তৈরি করতে যে পদ্ধতিগুলো ব্যবহার করা হয়, সেগুলো নিচে আলোচনা করা হল।


“animate ( ) মেথডঃ

এই মেথডটা নিদিষ্ট উপাদানে কাস্টম অ্যানিমেশন রান করে।


clearQueue ( ) মেথডঃ

এই মেথড অপেক্ষারত ফাংশনগুলোকে নিদিষ্ট উপাদান গুলো থেকে দূর করতে সাহায্য করে।


Delay( ) মেথডঃ

এই মেথডের মাধ্যমে সকল অপ্পেক্ষারত ফাংশনগুলোর জন্য একটা ডিলে সেট করা হয়।


Dequeue ( ) মেথডঃ

এটা পরবর্তী ফাংশন কে লাইন থেকে বিতারিত করে ফাংশন টা সম্পাদন করে।


FadeIn ( ) মেথডঃ

নির্বাচিত উপাদানগুলোকে ফেইদ ইন করে।


Fadeout ( ) মেথডঃ

নির্বাচিত উপাদানগুলোকে ফেইদ আউট করে।


fadeTo ( ) মেথডঃ

এই নিয়মটা নিদিষ্ট উপাদানগুলোকে একটা প্রদত্ত অপাছিতিতে ফেইদ ইন বা আউট করে।


fadeToggle ( ) মেথডঃ

এটা ফেইদ ইন এবং আউট এর মধ্যে টগল করে ।


Finish ( ) মেথডঃ

এই মেথডটা সব অপ্পেক্ষারত এনিমেশনগুলোকে নির্দিষ্ট উপাদাগুলথেকে থামতে, দূর করতে অথবা সম্পন্ন করতে সাহায্য করে ।


Hide ( ) মেথডঃ

এটা নির্দিষ্ট উপাদানগুলোকে হাইট করে ।


Queue ( ) মেথডঃ

এটা অপ্পকেক্ষারত ফাংশনগুলোকে নির্দিষ্ট উপদানে দেখায় ।


Show ( ) মেথডঃ

এটা সো করায়


Slidedown ( ) মেথডঃ

এটা নির্দিষ্ট উপাদানগুলোকে স্লাইড দাউন করে ।


Slideup ( ) মেথডঃ

এটা নির্দিষ্ট উপদাঙ্গুলকে স্লাইড আপ করে ।


Stop ( ) মেথডঃ

এটা চলতি অ্যানিমেশন নির্দিষ্ট উপদান থেকে থামতে সাহায্য করে ।

Toggle ( ) মেথডঃ

এটা hide() এবং show() এর মধ্যে তগল করে


						
						
						
		

		
			    
    	




 


                



		
	

    
    			    	

            

            	Mar
                31
                            

                    

            
		        

			
				jQuery Mobile Scrollstart            
			        

		
					    
    		
				

			
													
							
												
								
jQuery Mobile Scrollstart

——————————–

অনুবাদক: ফয়সাল রকি

——————————-


যখন কোনো ব্যবহারকারী কোনো page scroll করা শুরু করে তখন scrollstart ইভেন্টটি কাজ করতে শুরু করে।

উদাহরণ:

$(document).on(“scrollstart”,function(){

alert(“Started scrolling!”);

});


লক্ষ্যণীয় বিষয়: iOS ব্যবহৃত device গুলো page scroll এর সময় DOM manipulation কে freeze করে দেয়; সুতরাং যখন কোনো ব্যবহারকারী কোনো page scroll করে তখন কোনো কিছু পরিবর্তন করা সম্ভব হয় না।


jQuery Mobile Scrollstop

যখন কোনো ব্যবহারকারী কোনো page scroll করা বন্ধ করে তখন Scrollstop ইভেন্টটি কাজ শুরু করে।

উদাহরণ:

$(document).on(“scrollstop”,function(){

alert(“Stopped scrolling!”);

});


						
						
						
		

		
			    
    	




 


                



		
	

    
    			    	

            

            	Mar
                31
                            

                    

            
		        

			
				জেকোয়েরি এর বিভিন্ন প্রক্রিয়া ।            
			        

		
					    
    		
				

			
													
							
												
								
জেকোয়েরি এর বিভিন্ন প্রক্রিয়া ।

লেখকঃ মোস্তাফিজুর ফিরোজ ।


কেমন লাগছে সবার জেকোয়েরি ? নিশ্চয়ই ভালো । আজ আমি আপনাদের সাথে জেকোয়েরি এর বিভিন্ন প্রক্রিয়া সম্পর্কে আলোচনা করবো ।


প্রক্রিয়ার নামঃ data()

প্রক্রিয়ার বর্ণনাঃ বিভিন্ন উপাদানের সাথে ডাটা যোগ করতে অথবা এসব উপাদান থেকে ডাটা সংগ্রহ করতে ব্যবহার করা হয় ।


প্রক্রিয়ার নামঃ each()

প্রক্রিয়ার বর্ণনাঃ সকল সদৃশ উপাদান থেকে ফাংশন তৈরি করে ।


প্রক্রিয়ার নামঃ get()

প্রক্রিয়ার বর্ণনাঃ সিলেক্টর দ্বারা DOM elements কে সদৃশ করতে ব্যবহৃত হয় ।


প্রক্রিয়ার নামঃ index()

প্রক্রিয়ার বর্ণনাঃ কোনো তথ্য দেয়া থাকলে তার অনুরুপ উপাত্ত গুলো খুঁজে বের করে থাকে ।


প্রক্রিয়ার নামঃ $.noConflict()

প্রক্রিয়ার বর্ণনাঃ $ ভেরিয়েবলস এর ক্ষেত্রে জেকোয়েরি এর নিয়ন্ত্রণ করে ।


প্রক্রিয়ার নামঃ $.param()

প্রক্রিয়ার বর্ণনাঃ কোনো শ্রেণীবিন্যাস অথবা কোনো উপাদান থাকলে তাদের একটা সিরিয়াল তৈরি করে প্রদর্শন করে ।


প্রক্রিয়ার নামঃ removeData()

প্রক্রিয়ার বর্ণনাঃ পূর্বের সংগ্রহকৃত ডাটা মুছে ফেলে ।


প্রক্রিয়ার নামঃ size()

প্রক্রিয়ার বর্ণনাঃ জেকোয়েরি সিলেক্টর দ্বারা DOM elements গুলোকে সদৃশ করে থাকে ।


প্রক্রিয়ার নামঃ toArray()

প্রক্রিয়ার বর্ণনাঃ জেকোয়েরি তে থাকা শ্রেণীবিন্যাসকৃত সকল DOM elements গুলো কে আলাদা করে ।


তাহলে আমরা জেকোয়েরি এর বিভিন্ন প্রক্রিয়াগুলোর নাম এবং তাদের কাজগুলো জানলাম তো । এখন এগুলো একটু জেনে রাখুন, পরে এর উদাহরণসহ বর্ণনা দিবো তাহলে আরো বুঝতে সুবিধা হবে । এখন সব একবারে শিখতে গেলে আরো জটিল মনে হবে । কোথাও বুঝতে না পারলে কমেন্ট করতে ভুলবেন না কিন্তু ।


						
						
						
		

		
			    
    	




 


                



		
	

    
    			    	

            

            	Mar
                31
                            

                    

            
		        

			
				jQuery এবং অন্যান্যJavaScript অবকাঠামো            
			        

		
					    
    		
				

			
													
							
												
								
jQuery এবং অন্যান্যJavaScript অবকাঠামো


ইতিমধ্যে আপনি যেনেছেন , jQuery তে $ চিহ্ন ব্যবহার করা হয় শর্টকাট হিসাবে।

অন্যান্য অনেক জনপ্রিয় জাভাস্ক্রিপ্ট অবকাঠামো আছে যেমন Angular, Backbone, Ember, Knockout আরও অনেক।

তাছারা কিভাবে অন্যান্য জাভাস্ক্রিপ্ট অবকাঠামো $ চিহ্ন ব্যবহার করা হয় শর্টকাট হিসাবে।

দুটি আলাদা অবকাঠামো একই শর্টকাট ব্যবহার করে থাকে, তাদের মধ্যে একটি কাজ বন্ধ হতে পারে ।

ইতিমধ্যে JQuery এর টিম এই সম্পর্কে চিন্তা আছে, এবং noConflict() পদ্ধতি প্রয়োগ করা।


JQuery এর noConflict() পদ্ধতি

noConflict()পদ্ধতি, $ শর্টকাট পরিচিতি ধরে রিলিজ, তাই অন্য যে কোন স্ক্রিপ্টের ব্যবহার করতে পারেন।

আপনি অবশ্যই এখনও jQuery ব্যবহার করতে পারেন।

উদাহরন

$.noConflict();

jQuery(document).ready(function(){

jQuery(“button”).click(function(){

jQuery(“p”).text(“jQuery is still working!”);

});

});


আপনি খুব সহজেই আপনার নিজের শর্টকাট তৈরি করতে পারেন। noConflict() পদ্ধতিতে jQuery এর রেফারেন্স প্রদান করে, তাছারা একতি variable save করতে পারেন, পরে ব্যবহারের জন।


এখানে একটি উদাহরণ:


var jq = $.noConflict();

jq(document).ready(function(){

jq(“button”).click(function(){

jq(“p”).text(“jQuery is still working!”);

});

});


যদি আপনার ব্যবহার করা jQuery code ব্লক থাকে এবং পরিবর্তন করতে না চান, আপনি পারেন $ সাইন পারামিটার হিসাবে ব্যবহার করতে।

আপনি jQuery $ ব্যবহার করে অ্যাক্সেস করতে পারবেন, এই ফাংশন ভিতরে – এটা বাইরে ব্যবহার করতে যাবে “jQuery”:


উদাহরণ


$.noConflict();

jQuery(document).ready(function($){

$(“button”).click(function(){

$(“p”).text(“jQuery is still working!”);

});

});


নাম :: মাহবুবুর রহমান