বর্তমান বিশ্বে ডিজাইনিং এর প্রয়োজনীয়তা দিন দিন বাড়ছে

শামীম অভী।

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

ব্যানার এইচটিএমএল ট্যাগ যুক্ত করবেন যেভাবে

Name: মুতাসিম বিল্লাহ (সুমন)

ব্যানার এইচটিএমএল ট্যাগ যুক্ত করবেন যেভাবে:

বর্তমান জগতটি প্রযুক্তির জগত। এখানে আপনি হাত বাড়ালেই পেয়ে যাবেন প্রযুক্তির সকল ধরনের উপাদান। আসলে প্রযুক্তি আমাদের যেভাবে সামনে এগিয়ে নিয়ে যাচ্ছে তাতে আগামী পৃথিবীর মানুষেরা কোন ধরনের প্রযুক্ত ব্যবহার করবে সেটা অনুধাবন করা বেশ কষ্টকর। বর্তমান পৃথিবীর কোন জিনিসটা আমাদের সবচেয়ে বেশী কাছে টেনে এনেছে জিজ্ঞাসা করলে ওয়েব সাইটের নাম সবার আগে আসে। ওয়েব ডেভেলপমেন্ট একটি মূল্যবান কাজ। যারা এই বিষয়ে নতুন কাজ করছেন ওয়েব সাইটে ব্যানার ট্যাগ তাদের কাছে একটি প্রয়োজনীয় শিক্ষা। আজকে আমি আপনাদের এই বিষয়ে বিস্তারিত ধারনা দিবো।
আমরা বিভিন্ন ওয়েব সাইটের উপরে, তলায়, ডানে বা বামে বিভিন্ন বিজ্ঞাপন দেখতে পায়, এই গুলো তৈরিতে আসলে ওয়েব সাইটে Banner HTML Tag ব্যবহার করে করা হয়। আপনিও ইচ্ছা করলে খুব সহজে আপনার ওয়েব সাইট বা ব্লগে HTML Tag ব্যবহার করে বিজ্ঞাপন বা ইমেজ ব্যবহার করতে পারেন।

 
এটি করতে হলে আপনাকে প্রাথমিক পর্যায়ে ফটোশপের মাধ্যমে আপনাকে একটি ব্যানার তৈরি করতে হবে। আপনি বিভিন্ন সাইজের ব্যানার তৈরি করতে পারেন। তবে ২০০×২০০, ৩০০×১৫০, ৬৮০×২৫০ ইত্যাদি সাইজের হলে ভাল হয়। আপনি ব্যানারটির ফাইল JPEG, PNG বা GIF হিসেবে সেভ করতে পারেন। আপনার ব্যানারটি তৈরি করা শেষ হলে এবার শুরু হবে আপনার আসল কাজ।

 
প্রথমে আপনি যে ব্যানারটি তৈরি করেছেন সেটি কোনও ফটো শেয়ার সাইটে আপলোড করুন, আপনি Picasa online ব্যবহার করতে পারেন। মনে রাখবেন আপনার ব্যানারটি যেন সঠিক মাপের হয়।

 
দ্বিতীয় স্তরে এসে আপনি লগ ইন করে আপনার ওয়েব প্রোভাইডারের ড্যাসবোর্ডে প্রবেশ করুণ এরপর ব্যানার স্থাপনের জন্য একটি গ্যাজেট ওপেন করুন। মনে রাখবেন গ্যাজেট নির্ধারণের জন্য আপনি অবশ্যই HTML/JAVA গ্যাজেট ব্যবহার করবেন। এবার নতুন ওপেন হওয়া বক্সে টাইপ করুন

<a href=”http://www.********.com”><img src=”http://**********.com/-.png” align=”right”/></a>
এর মাধ্যমে আপনি HTML ট্যাগ তৈরি করলেন এবার প্রথম http থেকে মুছে আপনার ব্যানারটি যে ওয়েবের বিজ্ঞাপনের জন্য সেটির লিংক যুক্ত করুন। এবার দ্বিতীয় http থেকে মুছে আপনার ব্যানার ইমেজটি যেখানে আপলোড করেছিলেন সেই লিংকটি এখানে বসান। তাহলে আপনার ব্যানার বিজ্ঞাপনটি সক্রিয় হবে। এবার align=” এর পরে আপনার ব্যানারটি ওয়েবের কোন স্থান কেন্দ্র করে বসবে সেটি নির্বাচন করে দিতে পারেন, যথা: right, left, top, bottom। মনে রাখবেন আপনার ব্যানার লিংকটি অবশ্যই সঠিক হওয়া লাগবে নতুবা আপনি ইমেজ দেখতে পাবেন না।
আজ এ পর্যন্ত, আশাকরি এই টিউটোরিয়ালটা আপনাদের উপকারে আসবে। তাহলে এখনিই কাজটি করার চেষ্টা করুন।

পিএইচপি৫ : এ এক ফাইল এর মধ্যে অন্য ফাইল এর কোড ব্যবহার করা। (PHP 5 Include Files)

include ও require statement পিএইচপি প্রোগ্রামিং এর একটি গুরুত্বপূর্ণ অংশ যা ব্যবহার করে আপনি একটি ওয়েবসাইটে একাধিক পাতায় একই পিএইচপি, এইচটিএমএল, অথবা টেক্সট অন্তর্ভুক্ত করতে পারবেন যা আপনার পিএইচপি কোডিং কে সহজে ব্যাবহার যোগ্য এবং কোডিং এর আকার সংক্ষিপ্ত করে।

include file ব্যাবহারের মাধ্যমে ওয়েব পেইজ এর প্রতিটি পাতার জন্য একটি আদর্শ header, footer, এবং একটি মেন্যু ব্যাবহার করা যেতে পারে। যদি কখনও header অথবা footer অথবা মেন্যুতে জরুরি পরিবর্তন করতে হয় তাহলে শুধুমাত্র header অথবা footer অথবা মেন্যু অংশে পরিবর্তন আনলেই চলবে। এক্ষেত্রে পুরো পাতাই অন্য কোন পরিবর্তনের ঝামেলা নেই। উক্ত সুবিধার কারনেই পিএইচপি কোডিং এইচটিএমএল কোডিং থেকে নিরাপত্তা ও সহজে ব্যাবহারের দিক থেকে অনেক এগিয়ে।

মনে করি আমরা একটি footer ফাইল তৈরি করব যা আমাদের মূল ফাইলে অন্তরভুক্ত হবে। আমরা এই ফাইলটির নাম দিতে পারি “footer.php”


<?php
 echo "<p>Copyright &copy; 1999-" . date("Y") . 
       "http://bangla.salearningschool.com</p>";
 ?>

 

এখন উপরোক্ত footer.php ফাইলটি মূল পিএইচপি ফাইলে অন্তরভুক্ত করব।


<html>
 <body>
<h1>Welcome to my home page!</h1>
 <p>Lets Learn PHP.</p>
 <p>Some more text.</p>
 php include 'footer.php';?>
</body>
 </html>

 

আবার মনে করি আমরা একটি আদর্শ মেন্যু আমাদের মূল পিএইচপি ফাইলের সকল পেইজে ব্যবহার করব। সেক্ষেত্রে মেন্যু ফাইলটির নাম দেয়া হল “menu.php”


<?php
 echo '<a href="/default.asp">Home</a> -
 <a href="/html/default.asp">HTML Tutorial</a> -
 css/default.asp">CSS Tutorial -
 <a href="/js/default.asp">JavaScript Tutorial</a> -
 <a href="default.asp">PHP Tutorial</a>';
 ?>

 

এখন উপরোক্ত menu.php ফাইলটি মূল পিএইচপি ফাইলে অন্তরভুক্ত করব।


<html>
 <body>
<div class="menu">
 <?php include 'menu.php';?>
 </div>
<h1>Welcome to my home page!</h1>
 <p>Some text.</p>
 <p>Some more text.</p>
</body>
 </html>

 

include ও require এ দুটি statement এ যদি কোন ভুল থেকে থাকে তাহলে সাধারনত দু ধরনের error বার্তা প্রদর্শন করে থাকে।

include এর ক্ষেত্রে (E_COMPILE_ERROR) দেখাবে এবং স্ক্রিপ্ট বন্ধ হয়ে যাবে।
require এর ক্ষেত্রে (E_WARNING) দেখাবে কিন্তু স্ক্রিপ্ট বন্ধ না হয়ে চলমান থাকবে।

সুতরাং আপনি যদি include statement সংবলিত পিএইচপি কোডটি পরিচালনা করে এর ফলাফল প্রদর্শন করতে চান সেক্ষেত্রে include file ব্যাবহার অপরিহার্য। এতে যদি কোডিং এ কোন ভুল থাকে তাহলে তা (E_COMPILE_ERROR) দেখাবে। তবে জটিল পিএইচপি অ্যাপ্লিকেশন কোডিং ক্ষেত্রে require statement ই বেশী নিরাপদ এবং এটি উক্ত ফাইলের নিরাপত্তার জন্য নির্ভরযোগ্য।

এইচটিএমএল কমেন্ট (HTML Comment)

রাজু (DU)

 

এইচ টি এম এল এ কমেন্ট করার জন্য কমেন্ট ট্যাগ <!– এবং –> ব্যবহার করা হয়।

HTML Comment Tags এইচটিএমএল কমেন্ট ট্যাগ

HTML source  এ আপনি নিম্নোক্ত syntax ব্যাবহার করে comments করতে পারেনঃ


<!– এখানে  আপনার Comment লিখুন –>


নোটঃ এখানে অবশ্যই মনে রাখতে হবে যে একটি  বিস্ময় সূচক চিহ্ন (!)  শুরুর ট্যাগ এ ব্যাবহার করা হয়েছে। কিন্তু সমাপ্তি ট্যাগ হিসেবে কোন (!) ব্যবহার করা হয়নি।

 

Comments গুলি browser এ প্রদর্শিত হয় না কিন্তু তারা HTML document এ সাহায্য করে থাকে।

Comments দ্বারা আপনি আপনার HTML এ  notifications and reminders ঠিক করে দিতে পারবেন।

উদাহরনঃ


<!– এখানে  আপনার Comment লিখুন –>

<p>এখানে  আপনার paragraph লিখুন .</p>

<!– কোন information মনে রাখার জন্য এখানে যোগ করুন –>


 

 

HTML debugging এর জন্য comment  অসাধারন কাজ করে, কেননা আপনি HTML code line এর বাইরে comment করতে পারেন এবং কমেন্ট দেখে ত্রুটি খুজে বের করতে পারবেন।

উদাহরনঃ


<!– Do not display this at the moment

<img border=”0″ src=”pic_mountain.jpg” alt=”Mountain”>

–>


 

 

Conditional Comments (শর্তাধীন Comment)

HTML এ Conditional Comment ব্যাবহারে আপনি বাধার সম্মুখীন হতে পারেনঃ


<!–[if IE 8]>

…. some HTML here ….

endif]–>


Conditional comment সংবলিত HTML tag কেবলমাত্র Internet Explorer দ্বারা ই কার্যকর হতে পারে।

 

Software Program Tags

HTML comment tag গুলি বিভিন্ন HTML software program দ্বারা তৈরি হতে পারে।

উদাহরণসরূপঃ  <!–webbot bot–>  tag টি  HTML comment এর ভিতরে FrontPage এবং Expression Web দ্বারা মোড়ান থাকে।

নিয়ম হিসেবে এইসব tag কে রেখে দেয়া হয় software টিকে সহায়তা করার জন্য, যা দ্বারা এটি তৈরি করা হয়েছে।

AngularJS Templates এর নিরাপত্তা।

URL of translated tutorial
http://sitestree.com/securing-your-angularjs-applications/
Paste written translation here
AngularJS Templates এর নিরাপত্তা।
Md. Shahinoor Islam
যদি আপনি চান তবে আপনি এটা ($templateCache caches templates) ব্যবহার করতে পারেন। প্রত্যেক user কে login করার সময় cache টা remove করতে হবে।
নিচের উদাহরনটি আপনাকে সাহায্য করবে,
Cache-Control: no-cache, no-store, must-revalidate
Pragma : no-cache
Expires : 0
https ব্যবহার snooping এর জন্য সুবিধাজনক , না করলে মাঝখানে কিছু অসুবিধা হতে পারে।
আপনাকে JSON Injection এর আক্রমন প্রতিরোধ করতে হবে।
প্রতিরোধ করতে আপনি নিচের উধাহরনটি লক্ষ্য করুন।
আপনার JSON এর পুর্বে লিখুন এটি )]}’, যদিও এটা বৈধ নয়।
client side থেকে XSS এর আক্রমন দূর করতে হবে।
AngularJS সব HTML প্রদর্শন করে যা ng-bind directive, or template interpolation এর মাধমে text এর ভিতর দেখা দেখা যায় (that is text in {{curly braces}}).

AngularJS এর performance উন্নতি

http://sitestree.com/performance-improvement-of-angularjs-applications-writing-robust-angulajs-applications/
Paste written translation here
AngularJS এর performance উন্নতি
Application: জোরালো AngulaJS application লেখা।
Md. Shahinoor IslamAngularJS এর performance উন্নতি, Application: জোরালো AngulaJS application লেখা।
মুলত আপনার যোগ্যতা পরিমাপ করতে হবে এবং ফলাফলের উপর কৌশল প্রয়োগ করে আবেদন করতে হবে।
আপনার জানাটা ভুল হতে পারে যদি আপনি এটা বাস্তব জীবনে প্রয়োগ না করেন। তাছাড়া যোগ্যতার পরিক্ষায় real অথবা simple Data আপনাকে সাহায্য করতে পারে এটি Application এর উপর নির্ভর করে।এটা ঠিক যে, আমার খুব একটা অভিঞতা নেই কিন্তু সঠিক পরামর্শ হল যে, আপনাকে $digest loops ব্যবহার সম্পর্কে সাবধান হতে হবে। 50 loops or 100 loops এর বেশি পুনরাবৃত্তি আপনার application কে অচল করে দিতে পারে।
$digest loops এর ভিতরের watch number গুলো এবং তাড়াতাড়ি সেগুলো কাজ করতে পারে, এগুলো application এর যোগ্যতার প্রভাব ফেলে দেয়। আপনি number of watches কমাতে পারেন অথবা দ্রুত গতি সুম্পর্ন করতে পারেন। আপনি মনিটর মেমরি ব্যবহার করতে পারেন। মেমরির ব্যবহার কমিয়ে দিলে আপনার application দ্রুতগতি সম্পুর্ন হতে পারে।
ng-repeat directive টি খুব ক্ষমতা সম্পুর্ন। যদি আপনি 100s ধরনের কাজ করার জন্য ng-repeat ব্যবহার করেন তবে এটি আপনার application কে অচল করে দিতে পারে। তাই আপনার collections টি সীমিত করুন অথবা আপনার উদ্দেশ্য সফল করার জন্য custom directives দিয়ে লিখুন। অন্যথায় এমন ভাবে কাজটি করুন যাতে আপনাকে খুব বেশি চাপ প্রয়োগ না করে, যা আপনাকেই ভাবতে হবে

AngularJS এ নিজের/Custom Directives তৈরি। building-your-own-directives-in-angularjs

AngularJS এর মাধ্যমে নিজের Directives তৈরি।
Md. Shahinoor Islamনিজের Directives তৈরি।
HTML উপাদান, মন্তব্য বা CSS classes দিয়ে Directives প্রদর্শন করতে পার। উদাহরনঃ

<my-directive></my-directive>
<input my-directive>
<!– directive: my-directive–>
<input>

একটি Directive এর ধারনা
angular.module(‘app’, []).directive(‘myDir’, function() {
return myDirectiveDefinition;
});

একটি Button Directive লেখা
escribe(‘button directive’, function () {
var $compile, $rootScope;
beforeEach(module(‘directives.button’));
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it(‘adds a “btn” class to the button element’, function() {
var element = $compile(‘<button></button>’)($rootScope);
expect(element.hasClass(‘btn’)).toBe(true);
});
});
});

button directive ব্যবহার
<button type=”submit”
>Click Me!</button>

একটি Custom Validation Directives প্রবর্তন
একটি Custom Validation directive প্রবর্তন

এই জায়গায় আমাদের একটা test আছে, সুতরাং আমরা directive এর কার্যকারিতা বাস্তবায়ন করতে পারিঃ

myModule.directive(‘validateEquals’, function() {
return {
require: ‘ngModel’,
link: function(scope, elm, attrs, ngModelCtrl) {
function validateEqual(myValue) {
var valid= (myValue === scope.$eval(attrs.validateEquals));
ngModelCtrl.$setValidity(‘equal’, valid);
return valid ? myValue : undefined;
}
ngModelCtrl.$parsers.push(validateEqual);
ngModelCtrl.$formatters.push(validateEqual);
scope.$watch(attrs.validateEquals, function() {
ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);
});
}
};
});

Angular স্থানীয়করণ (Localization) সমর্থন: AngularJS আন্তর্জাতিক অ্যাপ্লিকেশনের লেখা। Localization Support in Angular : Writing International Applications in AngularJS

URL of translated tutorial
http://sitestree.com/841/
Paste written translation here
Angular স্থানীয়করণ সমর্থন: AngularJS আন্তর্জাতিক অ্যাপ্লিকেশনের লেখা।
Md. Shahinoor IslamAngular স্থানীয়করণ সমর্থন: AngularJS আন্তর্জাতিক অ্যাপ্লিকেশনের লেখা।
AngularJS লাইব্রেরি অধীনে en-US লোকেল সম্পর্কিত তথ্য রাখা হয় যেখানে একটি ফোল্ডার i18n আছে। আপনি একটি ভিন্ন লোকেল ব্যবহার করতে চান তাহলে নিম্নরূপ আপনি এটি করতে পারেন। Fr_ca লোকেলর জন্য সমর্থন lib/angular/angular-locale_fr-ca.js সঙ্গে স্ক্রিপ্ট ট্যাগ লক্ষ্য করুন। নীচে যেভাবে দেয়া আছে JS ফাইল সে ভাবে হতে হবে।
angular.module(‘locale’, [‘ngLocale’]) : module definition with a dependency on the ngLocale
angular.module (‘locale’, [‘ngLocale’]) : ngLocale মডিউলের উপর মডিউলের সংজ্ঞা নির্ভর করে।
<!doctype html>
<html ng-app=”locale”>
<head>
<meta charset=”utf-8″>
<script src=”lib/angular/angular.js”></script>
<script src=”lib/angular/angular-locale_fr-ca.js”></script>
<script src=”locale.js”></script>
</head>
<body ng-controller=”LocaleCtrl”>

</body>

সম্পর্কিত উদাহরণ:
{{now | date:’fullDate’}}সেট হিসাবে সম্পূর্ণ তারিখ ফিরে আসবে লোকেলর উপর ভিত্তি করে
{{100 | currency:’€’}}
{{1000.5 | number}}
অনুবাদ হ্যান্ডলিং: টেক্সট বিভিন্ন ভাষার জন্য অনুবাদ করতে হবে।

প্রাথমিক ধারণা হচ্ছে, বিভিন্ন লোকেইলের জন্য key value pairs সহ আপনার JSON structure থাকতে হবে।আপনি ইউজার লোকেল দিয়ে যেখানে অনুবাদ করতে চাচ্ছেন সেখানে কী গুলো ব্যবহার করুন।

উদাহরনঃ
{
‘crud.user.remove.success’: ‘A user was removed successfully.’,
‘crud.user.remove.error’: ‘There was a problem removing a user.’
. . .
}
In your HTML, you can write something like below
<span>Hello, !</span>
to
<span>{{‘greetings.hello’ | i18n}}, !</span>

greetings.hello key সহ লোকেলের জন্য আপনার প্রয়োজনীয় JSON আপনি বুঝতে পেরেছেন।

MVVM: মডেল : Angular JS

URL of translated tutorial
http://sitestree.com/mvvm-model-view-viewmodel/
Paste written translation here
MVVM: মডেল দেখুন ViewModel
অনুবাদক শেখ সোয়াইব

MVVM: এই ধরনের Angular.JS এবং Knockout.js হিসেবে
http://en.wikipedia.org/wiki/Model_View_ViewModel
KnockOut.js
http://en.wikipedia.org/wiki/Knockout.js
মার্টিন ফাওলার দ্বারা উপস্থাপনা মডেল
http://martinfowler.com/eaaDev/PresentationModel.html (theory behind: MVVM)

Angular.JS বিষয় : সম্পর্কিত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক স্টাফ . Angular.JS resources : Related JavaScript framework Stuff

Angular.JS বিষয় : সম্পর্কিত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক স্টাফ

Source: http://sitestree.com/angular-js-resources-related-javascript-framework-stuff/ (by Sayed Ahmed)
By শেখ সোয়াইব

কেন Angular? এবং কেন Angular না
http://www.sitepoint.com/10-reasons-use-angularjs/
কেন এই Angular.js Rock?
http://angular-tips.com/blog/2013/08/why-does-angular-dot-js-rock/
অনুচ্ছেদ এবং ই এস পি বিভাগের সম্পুর্ন পড়ুন : কেন Augular নয়?কেন নয় BackBone ,কেন নয় Ember । এ সম্প্রর্কিত বিষয় পড়তে এখানে ক্লিক করুন । https://moot.it/blog/technology/frameworkless-javascript.html

এই অনুচ্ছেদটি ও গুরুত্বপুর্ন : http://angular-tips.com/blog/archives/
স্লপ সাইজের ওয়েব ডেভল্ভমেন্ট ট্রেনিং এর সাথে Angular : https://egghead.io/
ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্ট এর সাথে Angular নিয়ন্ত্রণ : http://www.packtpub.com/angularjs-web-application-development/book
CRUD অ্যাপ্লিকেশন Angular ডেমো : https://github.com/angular-app/angular-app
Angular.JS উইকিপিডিয়া : https://github.com/angular/angular.js/wiki