Showing posts with label ওয়েবসাইট ডিজাইনিং. Show all posts
Showing posts with label ওয়েবসাইট ডিজাইনিং. Show all posts

Tuesday, August 18, 2015

ওয়েব ডিজাইন শিখতে চান? তবে লিন্ডার এই ভিডিও টিউটোরিয়ালটি আপনার জন্য !

           No comments   

ওয়েব ডিজাইনের ব্যাপারে একেবারেই নতুন !
প্ল্যানিং করছেন ক্যারিয়ার হিসেবে ওয়েব ডিজাইনকে বেছে নিতে !
কোথাও গিয়ে সরাসরি ট্রেনিং নেওয়াটা আপাতত সম্ভব হচ্ছে না !
তবে দেরী না করে  লিন্ডার এই ভিডিও টিউটরিয়ালগুলো দিয়ে শুরু করে দিন।  লিন্ডার সৌজন্যে এই টিউটোরিয়ালটিতে টিউটোর জেমস উইলিয়ামসন ওয়েব ডিজাইনের ফান্ডামেন্টাল কনসেপ্ট, টুলস এবং লার্নিং পাথ নিয়ে বিশদ আলোচনা করেছেন। আর সেই সাথে প্রাকটিস ফাইল তো রয়েছেই! লিন্ডার এই টিউটোরিয়ালটি সম্পূর্ন প্রিমিয়াম একটি টিউটোরিয়াল। কিন্তু আপনাদের জন্য টিউটোরিয়ালটি সম্পূর্ন  ফ্রিতে শেয়ার করছি। তাই দেরী না করে ঝটপট নীচের লিঙ্কগুলো থেকে টিউটোরিয়ালগুলো ডাউনলোড করে সংগ্রহে রাখুন। তবে তার আগে জেনে নেই কি কি বিষয় কভার করা হয়েছে এই টিউটোরিয়ালটিতে –
  • What is web design?
  • What is a web designer?
  • Learning to code
  • Choosing a web host
  • Working with a CMS
  • Exploring how websites are structured
  • Choosing your framework or software
  • Designing with standards and accessibility in mind
  • Learning HTML, CSS, and javascript
ডাউনলোড লিঙ্কঃ
পার্ট – ১ঃ http://bit.ly/1M4fQBW
পার্ট – ২ঃ http://bit.ly/1UmJoh5
পার্ট – ৩ঃ http://bit.ly/1N9cHzC
পার্ট – ৪ঃ http://bit.ly/1IoS9ja
পার্ট – ৫ঃ http://bit.ly/1N9cV9I
পার্ট – ৬ঃ http://bit.ly/1MM3mAx
প্রাকটিস ফাইলঃ http://bit.ly/1T2D6AD
আশা করি ভিডিও টিউটোরিয়ালটি  শেখার ক্ষেত্রে আপনাদের উপকারে আসবে। প্রয়োজনে ফেসবুকে আমাকে নক করতে পারেন। আমার ফেসবুক প্রোফাইলঃ 

Friday, August 7, 2015

নিয়ে নিন সকল HTML Code For Web Design

           No comments   

যারা ওয়েব ডিজাইন এর কাজ করেন তাদের জন্য সবচেয়ে গুরুত্বপূর্ণ একটা নাম হচ্ছে HTML code. এটা ছাড়া সাইট ডিজাই করা মুশকিল। সুতরাং দেরি কেন? নিয়ে নিন

Tag 

Description

<!–…–>                        Defines a comment
<!DOCTYPE>Defines the document type
<a>Defines a hyperlink
<abbr>Defines an abbreviation
<acronym>Not supported in HTML5. Use <abbr> instead.
Defines an acronym
<address>Defines contact information for the author/owner of a document
<applet>Not supported in HTML5. Use <object> instead.
Defines an embedded applet
<area>Defines an area inside an image-map
<article>NewDefines an article
<aside>NewDefines content aside from the page content
<audio>NewDefines sound content
<b>Defines bold text
<base>Specifies the base URL/target for all relative URLs in a document
<basefont>Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a document
<bdi>NewIsolates a part of text that might be formatted in a different direction from other text outside it
<bdo>Overrides the current text direction
<big>Not supported in HTML5. Use CSS instead.
Defines big text
<blockquote>Defines a section that is quoted from another source
<body>Defines the document’s body
<br>Defines a single line break
<button>Defines a clickable button
<canvas>NewUsed to draw graphics, on the fly, via scripting (usually JavaScript)
<caption>Defines a table caption
<center>Not supported in HTML5. Use CSS instead.
Defines centered text

Tuesday, August 4, 2015

কোডিং শিখার জন্য সেরা ১০ টি ওয়েবসাইট।

      ,      No comments   

কোডিং এর সেরা ওয়েবসাইট
কোডিং এর সেরা ওয়েবসাইট
কোডিং বা প্রোগ্রমিং ছিল একটি সময় সেরাদের বিষয়।বিলগেটস এর মত ব্যাক্তিরা একসময় কোডিং দিয়ে পৃথিবী রাজত্ব করেছেন। বর্তমানে সকলের ই এই সুযোগ আছে কোডিং শিখার, প্রোগ্রামার হওয়ার। এমনকি চাইলে নিদির্ষ্ট সেক্টরে হতে পারে সেরাদের সেরা। আপনি কি প্রোগ্রামিং বা কোডিং এ সেরা হতে চান ? তাহলে জেনে নিন কোডিং শিখার সেরা ১০ টি ওয়েবসাইট সম্পর্কে।
কোড একাডেমী
ওয়েবসাইট : www.codecademy.com
কোড একাডেমী নিঃসন্দেহে একটি অসাধারণ ওয়েবসাইটে কোডিং শিখার জন্য । কোড একাডেমীর অন্যন্য সাধারণ ইন্টাফেইস, অসাধারণ পাঠ পরিকল্পনা এই সাইটটিকে সেরাদের তালিকায় নিয়ে এসেছে । কোড একাডেমী আপনাকে যেসকল কোর্স প্রদান করবে তা হচ্ছে ওয়েব বেসিক, পিএইচপি, জাভাস্ক্রিপ্ট, জে কুয়্যেরি, পাইথন, রুবি এবং এপিআই। কোড একাডেমীর কোর্সের একটি অংশ কোন কোডটি কিভাবে কাজ করে তা জানাবে , অন্য একটি অংশে আপনি অনুশীলন এর সুযোগ পাবেন।
কোড এভেন্জার
ওয়েবসাইট : www.codeavengers.com
কোডিং এর প্রতি ভালবাসা তৈরী করবে কোড এভেন্জার। যদিও এই সাইটটি শুধুমাত্র এইচটিএমএল৫, সিএসএস৩ এবং জাভাস্ক্রিপ্ট কোর্স সরবরাহ করে কিন্তু প্রতিটি পাঠ্যসুচি এমনভাবে ডিজাইন করা হয়েছে যাতে কোডিং বিরক্তির কারণ না হয়ে উঠে। প্রতিটি অধ্যায়ের শেষে ছোট খাট গেইমসএর ব্যবস্থা রাখা হয়েছে যা চাপ কমাবে এবং আপনাকে আরও দ্রুত এগিয়ে যেতে সহায়তা করবে ।কোড একাডেমীর কোডগুলো খুব বেশী দীর্ঘায়িত করা হয় নি এবং নতুনদের জন্য অপ্রযোজনীয় ব্যাখা রাখা হয় নি ।
কোড স্কুল 
ওয়েবসাইট : www.codeschool.com
কোড একাডেমী বা কোড এভেন্জারে পাঠ শেষ করার পর আপনি যদি আপনার কোডিং দক্ষতাকে আরও বৃদ্ধি করতে চান কোড স্কুল আপনাকে পরিপুর্ণ সহায়তা করবে। কোড স্কুল বাস্তব জ্ঞান ও আপনাকে করে তুলবে আরও দক্ষ।
কোড স্কুলের পাঠ্যক্রম ৪ টি ভাগে বিভক্ত।
ক. রুবি
খ. জাভাস্ক্রিপ্ট
গ. এইচটিএমএল, সিএসএস
ঘ. আইওএস
ট্রি-হাউস
ওয়েবসাইট : teamtreehouse.com
ট্রি-হাউসের কোর্সগুলোতে ল্যাংগুয়েজের চেযে প্রজেক্টকে বেশী গুরুত্বদেয়। নতুনদের জন্য এই ওয়েবসাইটটি অসাধারণ। যেমন,ওয়েবসাইট কোর্সের অংশ হিসাবে এখানে থাকছে রেস্পন্সিভ ওয়েবসাইট তৈরী, ডাইনামিক ওয়েবসাইট এমনকি ওয়ার্ডপ্রেস থিম তৈরী ও শিখানো হবে যা খুবই বাস্তব জ্ঞান সম্মত ও কার্যকরী। এই কোর্সগুলোর জন্য আপনার খরচ হবে ২৫ ডলার থেকে ৪৯ ডলার।
ইউডাসিটি
ওয়েবসাইট :www.udacity.com
যারা খুব বেশী পড়তে ভালবাসেন না কিন্তু প্রফেশনালদের থেকে শুনতে ভালবাসেন তাদের জন্য ইউডাসিটি অন্যন্য। এখানে কোন একটি বিষয় আলোচনা করার পর কুইজ দেওয়া হবে যা আপনার দক্ষতাকে করে তুলবে আরও সমৃদ্ধ। ইউডাসিটি অন্যান্য সাইটের চেয়ে অনেক বেশী ভিডিও প্রদান করবে যা বাস্তব প্রযোগমুলক । কোডিং শুরু করার জন্য ইউডাসিটি ভাল নয় বরং ভার্চুয়াল বিশ্ববিদ্যালয় হিসাবে ইউডাসিটি অন্যন্য।
কোড এইচএস
ওয়েবসাইট : codehs.com
উপরে যেসকল ওয়েবসাইট সম্পর্কে আলোচনা করা হয়েছে তা অধিকাংশই ওয়েব ডেভেলপমেন্ট এবং কম্পিউটার বিষয়ক। কিন্তু কোড এইচএস সম্পুর্ণ আলাদা। এই সাইটটি খুবই সাধারণ এবং মজার গেইমস প্রোগ্রামিং সাইট। এখানে কুইজের মাধ্যমে বিভিন্ন জাভাস্ক্রিপ্ট, অ্যানিমেশন, ডাটা স্ট্রাকচার, গেইম ডিজাইন পাজল গেইমস এর মাধ্যমে বিভিন্ন বিষয় শেখানো হয়।
এই সাইটের মুল সুবিধা হচ্ছে আপনাকে চিন্তা করতে হবে একজন দক্ষ প্রোগ্রামারের মত। যেমন একটি কুকুরকে সরানোর জন্য কিভাবে কোডিং করতে হবে, কিভাবে প্রোগ্রামিং এর মাধ্যমে সাধারণ বিষয়গুলো সমাধান করতে হবে ইত্যাদি । এই সাইটের সদস্য পদের জন্য আপনাকে প্রতিমাসে ২৫ ডলার ব্যয় করতে হবে ।
খান একাডেমী
এয়েবসাইট : www.khanacademy.org
এই সাইটটি কোডএইচএস এর মত নয় বরং নোভিস এবং নতুনদের জন্য এই সাইটটি ব্যতিক্রম। আপনি যদি ড্রয়িং, এনিমেশন এই ধরনের কিছু শিখতে চান তবে এই সাইটটি ব্যবহার করতে পারেন। কোন নিদির্ষ্ট প্রোগ্রামিং এর উপর এই সাইটটি নয় বরং অধিকাংশ প্রোগ্রামিং টুলস ব্যবহার করা হয়েছে এই সাইটে।
স্ক্রাচ ২
ওয়েবসাইট : scratch.mit.edu
ছোটদের জন্য যাদের ইংরেজীতে ভাল দক্সতা নেই তারা এই সাইটটি ব্যবহার করতে পারেন। কোন নিদিষ্টর্ প্রোগ্রামিং এর উপর নয় বরং ভিজুয়াল ব্লক এর মাধ্যমে এই সাইটে বিভিন্ন বিষয় শিখানো হয়। ভিজুয়াল প্রোগ্রামিং প্রোগ্রামিং ব্লকের মাধ্যমে ছোটরা অনেক বড় প্রোগ্রামিং সমস্যাকে একটির পর একটি ছোট ছোট অংশে ভাগ করে সমাধান করা শিখতে পারে।
এসকিউএলজু
ওয়েবসাইট: sqlzoo.net
স্ট্রাকচার্ড কুয়্যেরি ল্যাঙ্গুয়েজ (এসকিউএল) এক ল্যাংগুযেজ যা ডাটাবেসে ডাটা সংরক্ষন ও পরবর্তী ব্যবহাররের জন্য ব্যবহৃত হয়। আপনার ক্লান্তি ও বিরক্তি দুর করার জন্য এসকিউএলজু সুন্দর ইউজার ইন্টারফেসের মাধ্যমে এসকিউএল এর বিভিন্ন অংশ শিখতে সাহায্য করবে। এই সাইটে বিভিন্ন ধরনের কুইজ ছোট ছোট সমস্য সমাধানের মাধ্যমে আস্তে আস্তে একধাপ থেকে অন্য ধাপে নিয়ে যাবে ।
উপরোক্ত ওয়েবসাইট গুলো ছাড়াও অংসথ্য ওয়েবসাইট আছে যার মাধ্যমে আপনি কোডিং শিখে হতে পারেন সফল প্রোগ্রামার। উল্লেখযোগ্য হচ্ছে w3schools, ওয়েবকোচবিডি ইত্যাদি ।

Friday, June 12, 2015

ওয়েবসাইট ডিজাইন - সম্ভাবনাময় ফ্রিল্যান্সিং ক্যারিয়ার

           No comments   

ইন্টারনেটে আউটসোর্সিং এর মাধ্যমে আয়ের যে সকল পদ্ধতি রয়েছে তার মধ্যে সবচেয়ে বেশি চাহিদা রয়েছে ওয়েবসাইট তৈরির কাজগুলোতে। এর একটা প্রধান কারণ হচ্ছে ব্যক্তিগত বা ব্যবসায়ীক উদ্দ্যেশ্যে ইন্টারনেটের উপর ক্রমবর্ধমান নির্ভরশীলতা। কারণ একটি ওয়েবসাইটের মাধ্যমে একটি প্রতিষ্ঠান একদিকে যেভাবে তার গ্রাহকদের সাথে সরাসরি যোগাযোগ স্থাপন করতে পারে, অপরদিকে বিভিন্ন শহরে বা বিভিন্ন দেশে অবস্থিত নিজস্ব শাখার সাথে আন্তঃযোগাযোগও সহজে এবং কম খরচে করতে পারে। তাই বর্তমান সময়ে একটি ডেস্কটপ সফটওয়্যার তৈরি করার চাইতে ওয়েব এপ্লিকেশন তৈরি করার দিকেই সবার ঝোঁক থাকে।
একটি পূর্ণাঙ্গ ওয়েবসাইট দুটি বিষয়ের সংমিশ্রণে তৈরি করা হয়, যার একটি হচ্ছে ওয়েবসাইটি কিভাবে কাজ করবে তার নির্দেশনা দেয়ার জন্য প্রোগ্রামিং এবং অপর অংশ হচ্ছে এর বহিরাবরণ বা ডিজাইন। ওয়েবসাইট নির্দেশনা সাধারণত PHP, ASP, Python, Perl, Ruby ইত্যাদি প্রোগ্রামিং ভাষায় লেখা হয় এবং ডাটাবেইজ হিসেবে MySQL, MS SQL, PostgreSQL ইত্যাদি ব্যবহার করা হয়। অনলাইনে ওয়েবসাইট প্রোগ্রামিং এর কাজই সবচেয়ে বেশি পাওয়া যায়। যারা কম্পিউটার সায়েন্স বা এর সাথে সম্পর্কিত বিষয়ে প্রাতিষ্ঠানিকভাবে পড়ালেখা করেছে তারা ওয়েবসাইট প্রোগ্রামিং করে থাকে। তবে অনেকেই আছেন যারা শুধুমাত্র নিজের চেষ্টায় প্রোগ্রামিং শিখে বর্তমানে বেশ ভাল অবস্থায় আছেন।

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

প্রয়োজনীয় দক্ষতাসমূহ
একটি ওয়েবসাইটে তথ্য কিভাবে বিন্যস্ত থাকবে তার উপর ভিত্তি করে দুটি ভাগে ভাগ করা যায় - স্ট্যাটিক (Static) এবং ডাইনামিক (Dynamic) ওয়েবসাইট। স্ট্যাটিক ওয়েবসাইটে ওয়েবসাইটের তথ্য কখনো পরিবর্তন হয় না, অন্যদিকে ডাইনামিক ওয়েবসাইটের তথ্য ব্যবহারকারীর চাহিদার উপর ভিত্তি করে পরিবর্তিত হয়। স্ট্যাটিক ওয়েবসাইটেকে প্রোগ্রামিং এর মাধ্যমে ডাইনামিক ওয়েবসাইটে পরিণত করা হয়। একটি ওয়েবসাইটের ডিজাইন তৈরি করা থেকে শুরু করে এটিকে একটি স্ট্যাটিক ওয়েবসাইটে পরিণত করতে কয়েকটি ধাপ অতিক্রম করতে হয়। একজন সফল ওয়েবসাইট ডিজাইন ফ্রিল্যান্সার হতে হলে কেবল ডিজাইনের মধ্যে সীমাবদ্ধ না থেকে একটি স্ট্যাটিক ওয়েবসাইট তৈরির অন্যান্য বিষয় যেমন - Template তৈরি, HTML, CSS, Javascript ইত্যাদিতেও দক্ষ হওয়া প্রয়োজন। নিচে পর্যায়ক্রমে বিষয়গুলো আলোকপাত করা হল -

১) টেম্পলেট তৈরি:
ওয়েবসাইটের একটি ডিজাইনকে ওয়েবসাইট টেম্পলেট (Template) বলা হয়। টেম্পলেট সাধারণত Adobe Photoshop, Illustrator, Flash ইত্যাদি সফটওয়্যারের মাধ্যমে তৈরি করা হয়। বর্তমানে ওপেন সোর্স ব্যবহারকারীদের কাছে Gimp নামক সফটওয়্যারটিও টেম্পলেট তৈরির জনপ্রিয় একটি টুলে পরিণত হয়েছে। এদের মধ্যে ফটোশপ সফটওয়্যারই সবচেয়ে জনপ্রিয়। অন্যদিকে ফ্লাশ দিয়ে এনিমেটেড ও দৃষ্টিনন্দন ওয়েবসাইট তৈরি করা যায়। ফ্লাশের কাজেরও ব্যাপক চাহিদা রয়েছে। ফ্লাশের ActionScript নামক নিজস্ব প্রোগ্রামিং ভাষা আছে। শুধুমাত্র ফ্লাশ দিয়েই সম্পূর্ণ একটি ডাইনামিক ওয়েবসাইট তৈরি করা যায়। ওয়েবসাইট ডিজাইনিং এ যারা আসতে আগ্রহী তারা ফটোশপ অথবা ফ্লাশ থেকে যেকোন একটিকে বেছে নিতে পারেন।

একজন ওয়েবসাইট ডিজাইনারের সমসাময়িক ওয়েবসাইটের ডিজাইন সম্পর্কে ভাল ধারণা থাকতে হবে। বর্তমানের বেশিরভাগ ওয়েবসাইটগুলো Web 2.0 নামক একটি স্ট্যান্ডার্ড মেনে চলে। একে দ্বিতীয় প্রজন্মের ওয়েবসাইট ডিজাইনও বলা হয়। সহজভাবে বললে Web 2.0 মানের একটি ওয়েবসাইটির নিচে উল্লেখিত বৈশিষ্ট্যগুলোর কয়েকটি বা সবগুলো থাকতে পারে:
  • সাধারণ ও পরিচ্ছন্ন ইন্টারফেস যাতে ওয়েবসাইটের তথ্যগুলো সহজেই পড়া যায়
  • মূল ডিজাইন ব্রাউজারের মাঝামাঝি স্থানে অবস্থান করবে, অন্যদিকে অতীতের ওয়েবসাইটগুলো ব্রাউজারের বাম দিকে সরানো থাকত
  • ওয়েবপেইজের কলাম সংখ্যা কম থাকবে
  • পেইজের উপরের অংশ পরিষ্কারভাবে ওয়েবসাইটের কন্টেন্ট অংশ থেকে আলাদা থাকবে
  • সহজে ব্যবহারযোগ্য নেভিগেশন
  • লোগো বোল্ড থাকবে
  • লেখাগুলো বড় থাকবে যাতে পড়তে আরামদায়ক হয়
  • সূচনা লেখা বোল্ড থাকবে
  • বাটন এবং ডিজাইনের বিভিন্ন ক্ষেত্রে 3D ও Reflection এফেক্ট নিয়ে আসা
  • উজ্জ্বল রঙের সংমিশ্রণ
  • Gradient বা গাঢ় থেকে হালকা রঙের সমন্বয়
  • সুন্দর ও নজরকাড়া আইকন
২) HTML এ রূপান্তর:

HTML
একটি ওয়েবপেইজ অক্ষর, ছবি, লিংক ইত্যাদির সমন্বয়ে গঠিত যা HTML নামক একটি ভাষায় লেখা হয়। এটি কোন প্রোগ্রামিং ভাষা নয়, বরং একটি ওয়েবপেইজকে ব্রাউজারে প্রদর্শন করার ডকুমেন্ট ফরমেট। HTML এর উন্নত সংস্করণ হচ্ছে XHTML যা XML নামক আরেকটি ভাষার নিয়ম অনুসরণ করে। HTML বা XHTML এ দক্ষ হতে এক সপ্তাহের বেশি সময় লাগবে হবে না। অনলাইনে অনেক টিউটোরিয়াল সাইট রয়েছে, তবে সবচেয়ে সহজ ও ভাল টিউটোরিয়াল পাওয়া যাবেwww.w3schools.com নামক ওয়েবসাইটে।

ফটোশপ দিয়ে তৈরি করা ওয়েবসাইটের টেম্পলেটকে সাধারণত PSD ফরমেটে সেইভ করা হয়। প্রকৃতপক্ষে PSD ফাইলে টেম্পলেটকে সংরক্ষণ করা পর্যন্ত একজন ডিজাইনারের কাজ শেষ হয়ে যায়। তবে ফ্রিল্যান্সার হিসেবে বাড়তি আয় করতে চাইলে HTML জানাটাও জরুরী। ডিজাইনকে ওয়েবপেইজে রূপান্তর করতে হলে HTML দিয়ে কোডিং করতে হবে। এই রূপান্তরের প্রক্রিয়া ডিজাইন ভেদে ভিন্ন ভিন্ন হতে পারে। সাধারণত ফটোশপে Slice নামক একটি টুল আছে যা দিয়ে ডিজাইনকে HTML এ রূপান্তর করা যায়। কেবলমাত্র PSD থেকে HTML এ রূপান্তর করার কাজও ফ্রিল্যান্স মার্কেটপ্লেস সাইটগুলোতে পাওয়া যায়।


৩) CSS প্রয়োগ:
CSS হচ্ছে এক ধরনের স্টাইলশীট ভাষা যা দিয়ে একটি ওয়েবসাইটের ডিজাইনকে প্রদর্শন করা হয়। ওয়েবসাইটের ডিজাইনকে সাধারণত HTML ডকুমেন্টে সরাসরি না লিখে আলাদা একটি CSS ফাইলে ভিন্ন ভিন্ন Class তৈরি করা হয়। এরপর HTML ডকুমেন্টে ওই CSS ফাইলের লিংক দেয়া হয় এবং HTML এর বিভিন্ন অংশে বা Tag এ সেই ক্লাসগুলোকে যুক্ত করা হয়। HTML এর একটি নির্দিষ্ট অংশের ফন্ট দেখতে কিরকম হবে, লেখার পেছনে ছবি বা রং কোনটা থাকবে, বর্ডার থাকবে কি না ইত্যাদি স্টাইল সম্পর্কিত নির্দেশনা ক্লাসগুলোতে দেয়া হয়।


CSS দিয়ে HTML ডকুমেন্টে স্টাইল বা ডিজাইন তৈরি করার অনেকগুলো সুবধা রয়েছে। উল্লেখযোগ্য দুটি সুবিধার একটি হচ্ছে, HTML এর বিভিন্ন অংশে বা বিভিন্ন পৃষ্ঠায় খুব সহজে একই স্টাইল দেয়া যায়। অন্য আরেকটি সুবিধা হচ্ছে কেবলমাত্র CSS ফাইলকে পরিবর্তন করে একটি ওয়েবসাইটের চেহারা মুহূর্তের মধ্যে পরিবর্তন করা সম্ভব। CSS এর প্রথমিক ধারণা পেতে কয়েক ঘন্টা সময়ের প্রয়োজন এবংwww.w3schools.com সাইটিই যথেষ্ঠ। তবে CSS এ পূর্ণ দখল আনতে কিছুটা সময়ের প্রয়োজন। 


৪) Javascript:
Javascriptজাভাস্ক্রিপ্ট হচ্ছে একটি প্রোগ্রামিং ভাষা যাকে ব্রাউজার সাইড স্ক্রিপ্টিং ভাষা বলা হয়। অন্যদিকে PHP বা ASP হচ্ছে সার্ভার সাইড স্ক্রিপ্টিং ভাষা। জাভাস্ক্রিপ্টের সুবিধা হচ্ছে এটি সরাসরি ব্যবহারকারীর কম্পিউটারের রিসোর্স ব্যবহার করে দ্রুততার সাথে কাজ করে। যা একটি ওয়েবসাইটকে ইউজার ফ্রেন্ডলি করে তোলে। জাভাস্ক্রিপ্টে দক্ষ হতে অবশ্যই ভাল প্রোগ্রামিং জ্ঞানের প্রয়োজন রয়েছে। তবে ডিজাইনাররাও জাভাস্ক্রিপ্টের কিছু সুবিধা গ্রহণ করে ডিজাইনকে আরো প্রাণবন্ত করে তুলতে পারেন। জাভাস্ক্রিপ্ট প্রোগ্রামিংকে সহজ করতে বেশ কিছু ফ্রেমওয়ার্ক বা কোডিং লাইব্রেরি পাওয়া যায়। এগুলোর মধ্য সবচেয়ে জনপ্রিয় হচ্ছে jQuery নামক লাইব্রেরিটি। এটি দিয়ে খুব সহজেই বিভিন্ন ধরনের এনিমেশন, নজরকাড়া এফেক্ট, দরকারী টুল ইত্যাদি তৈরি করা যায়। এটি সম্পর্কে বিস্তারিত তথ্য পাবেন www.jQuery.com ওয়েবসাইট থেকে। jQuery দিয়ে তৈরি অসংখ্য টুল অনলাইনে ফ্রি পাওয়া যায়।



ডিজাইন শেখার কয়েকটি সাইট পরিচিতি
নিচে ফটোশপ দিয়ে ওয়েবসাইট ডিজাইনিং শেখার কয়েকটি জনপ্রিয় সাইটকে তুলে ধরা হল -

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

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


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



nettuts.com
এটি ওয়েবসাইট ডিজাইনার এবং প্রোগ্রামার উভয়ের জন্য খুবই সাহায্যকারী একটি টিউটোরিয়াল সাইট। HTML, CSS, Javascript, Ajax, jQuery, PHP, Ruby, Wordpress ও ডিজাইন সংক্রান্ত আরো অনেক বিষয়ের উপর ছবি সহকারে এবং সহজ ভাষায় টিউটোরিয়াল পাওয়া যায়। এই সাইটে ভিডিওর মাধ্যমে অনেক টিউটোরিয়াল প্রকাশ করা হয়। ডিজাইনারদের জন্য সাহায্যকারী অনেক টুল সাইট থেকে ফ্রি ডাউনলোড যায়। এই সাইট থেকেও টিউটোরিয়াল লিখে প্রতিটির জন্য ১৫০ ডলার করে আয় করা যায়।


ফটোশপ দিয়ে দৃষ্টিনন্দন এফেক্ট তৈরির টিউটোরিয়াল নিয়ে জনপ্রিয় এই সাইটটি সাজানো হয়েছে। সাইটটিতে ফটোশপের এফেক্ট, গ্রাফিক্স ডিজাইন, ফটো এফেক্ট, টেক্সট এফেক্ট, ওয়েব গ্রাফিক্স, ওয়েবসাইট ডিজাইন ইত্যাদি বিষয়ের উপর টিউটোরিয়াল পাওয়া যায়। ওয়েবসাইট ডিজাইন বিভাগে একটি সম্পূর্ণ ওয়েবসাইট কিভাবে তৈরি করতে হয় তা ছবি সহকারে বর্ণনা করা হয়েছে।



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

  1. www.good-tutorials.com
  2. www.psdvibe.com 
  3. www.tutorialized.com/tutorials/Photoshop/6 
  4. www.actionfx.com 
  5. www.stockvault.net/tutorials.php 
  6. www.photoshoproadmap.com 
  7. www.pixel2life.com 
  8. www.totaltutorials.com
  9. www.deviantart.com 
  10. www.teamphotoshop.com 
  11. www.photoshoptopsecret.com 
  12. www.planetphotoshop.com

অনলাইনে টিউটোরিয়ালের পাশাপাশি বাজারে ফটোশপের মানসম্মত ভিডিও টিউটোরিয়াল সিডি, বই ইত্যাদি পাওয়া যায়, যা থেকে ফটোশপের প্রাথমিক কৌশল রপ্ত করতে পারেন। তবে ভাল ওয়েবসাইট ডিজাইনার হতে হলে বেশি করে অনলাইনে বিভিন্ন ওয়েবসাইটের ডিজাইন দেখতে হবে। উন্নতমানের ডিজাইন বিক্রি করে এরকম ওয়েবসাইটের মধ্যে রয়েছে - www.dreamtemplate.com,www.templatemonster.com , www.templateworld.com ইত্যাদি। এই সাইটগুলোতে ডিজাইনের প্রিভিউ দেখা যায়। নতুন ডিজাইনাররা প্রথম অবস্থায় চেষ্টা করুন ঠিক একই ধরনের ডিজাইন আপনিও তৈরি করতে পারছেন কিনা। এভাবে শিখতে থাকলে একদিকে যেমন সমসাময়িক ওয়েবসাইট ডিজাইন সম্পর্কে ভাল ধরাণা তৈরি হবে, অন্যদিকে সম্পূর্ণ নতুন একটি ওয়েবসাইট ডিজাইন তৈরির আইডিয়াও পাবেন। ওয়েবসাইট ডিজাইন থেকে অনলাইনে আয় করা যায় এরকম সাইট নিয়ে পরবর্তী লেখায় আলোচনা করা হবে।

ওয়েবসাইট ডিজাইনিং - পেশা হিসেবে অসাধারণ

           No comments   

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

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

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

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

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

আর যদি বিড করে কাজ না পেয়ে হতাশ হয়ে থাকেন, তাহলেও নিরাশ হবেন না। আজ আমি আপনাদেরকে একটি ওয়েবসাইটের সাথে পরিচয় করিয়ে দিব যেখানে কোন বিড করতে হয় না। যেখানে ক্লায়েন্টের কোন চাহিদা নেই। আপনি সম্পূর্ণ নিজের ইচ্ছে মত কাজ করে যাবেন আর অনবরত আয় হতে থাকবে। সাইটি হচ্ছে - GraphicRiver.net ।


মজার ব্যাপার হচ্ছে, এই সাইটে আপনাকে সম্পূর্ণ ওয়েবসাইটের টেম্পলেট তৈরি করতে হবে না। একটি ওয়েবসাইট তৈরি করার জন্য প্রয়োজনীয় গ্রাফিক্স যেমন বাটন, ব্যানার, বিভিন্ন ধরনের টেবিল, ব্যাকগ্রাউন্ড ইত্যাদি তৈরি করে জমা দিতে পারবেন। ডিজাইন জমা দেবার পর ওয়েবসাইটের কর্তৃপক্ষ যাচাই করে দেখবে আপনার ডিজাইনটি মানসম্মত অথবা অন্য কারো ডিজাইন অনুকরণ করে তৈরি করা হয়েছে কিনা। যাচাইয়ে উত্তীর্ণ হলে তারাই ডিজাইনটির একটি মূল্য নির্ধারণ করে দিবে যা ১ ডলার থেকে ১০ ডলার পর্যন্ত হতে পারে। এর মধ্যে প্রথম অবস্থায় ৪০% অর্থ ডিজাইনারকে দেয়া হবে।

মূল্য শুনে মন খারাপ করবেন না, আসল কথা এখনও বলা হয় নি। এই সাইটি একটি অনলাইন শপ বা ইকমার্স সাইটের মত। অর্থাৎ একটি ডিজাইন একের অধিক ক্লায়েন্ট কিনতে পারে। এক একটি ভাল ডিজাইন গড়ে ৫০ বার বা তার চেয়ে বিক্রি হয়। আর সময়ের সাথে বিক্রি বাড়তেই থাকে। ধরা যাক, আপনার তৈরিকৃত একটি ব্যানারের মূল্য ১ ডলার নির্ধারণ করা হল অর্থাৎ প্রতিবার বিক্রি হলে আপনি পাবেন ০.৪০ ডলার। একটি ব্যানার তৈরি করতে ১ দিনের বেশি লাগার কথা নয়। তাহলে মাসে যদি ৫০ বার ব্যানারটি বিক্রি হয় তাহলে ওই ১ দিনের কাজের জন্য আপনি মাসে আয় করছেন ২০ ডলার। এভাবে প্রতিদিন যদি অন্তত একটি ভাল ডিজাইন তৈরি করতে পারেন তাহলে বিষয়টা দাড়াচ্ছে ৩০x২০=৬০০ ডলার। আমি কি বেশি বলে ফেললাম !!!

ঠিক আছে, তাহলে আমি নিজেই তা পরীক্ষা করে দেখি। চলুন দেখা যাক আমি কিছু বিক্রি করতে পারি কি না। আজকে (১৭ আগস্ট ২০০৯ তারিখে) আমি একটি ডিজাইন "গ্রাফিক রিভার" সাইটে জমা দিয়েছি। এটি একটি মূল্য তালিকা প্রদর্শন করার টেবিল। তৈরি করতে আমার মত অদক্ষ ডিজাইনারের বিকেল থেকে রাত অবধি সময় লেগেছে। সাইটের কর্তৃপক্ষ ডিজাইনটির জন্য ১ ডলার মূল্য নির্ধারণ করে দিয়েছে। আমার প্রথম ডিজাইনটি যে তারা গ্রহণ করেছে তাতেই আমি খুশি। নিচের লিংক থেকে আমার কাজটি দেখতে পাবেন - 
http://graphicriver.net/item/web-pricing-table/54601?ref=zchowdhury

চলুন দেখা যাক, ডিজাইনটি শেষ পর্যন্ত কতবার বিক্রি হয়।

লেখক - মোঃ জাকারিয়া চৌধুরী

Popular Posts

Recent Posts

banner image

Blog Archive

Kategori

Kategori

Recent Comments

Formulir Kontak

Name

Email *

Message *

মোট পৃষ্ঠাদর্শন

Recent

Comment

Facebook

banner image

Flickr

banner image

Football

Sample Text