Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Kids
Webdesign

শিশুদের জন্য ওয়েব ডিজাইন: Tuts+ নগরে তোমাকে স্বাগতম!

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Getting Ready to Build a Website

Bengali (বাংলা) translation by Shakila Humaira (you can also view the original English article)

Tuts+ নগরে তোমাকে স্বাগতম, এখানে সবাই ওয়েব ডিজাইন ভালবাসে! এই সিরিজে তুমি ওয়েব ডিজাইন সম্পর্কে সবকিছু শিখবে এবং ওয়েবসাইট তৈরী করবে। আমাদের সাথে হাত লাগাও, আমরা সকলে মিলেমিশে একটা ওয়েব সাইট তৈরী করতে যাচ্ছি।

এই পাঠক্রমগুলো (অথবা টিউটোরিয়াল) একটা ওয়েবসাইট তৈরীর ক্ষেত্রে ধারাবাহিক নির্দেশিকা হিসাবে কাজ করবে। প্রতি পাঠ্যক্রমের শেষে সকল অনুশীলন ফাইলগুলো সংযোজন করা হবে, যাতে তুমি তোমার নিজের তৈরী কাজের সাথে এর পার্থক্য মূল্যায়ন করতে পার।

তাই, অনুগ্রহ করে এসো, আরাম করে বসো, আর চলো কিছু তৈরী করি Tuts+ নগরবাসীদের জন্য !

ওয়েব কেমন করে কাজ করে?

চলো একধাপ পিছিয়ে যায় এবং চিন্তা করি ওয়েব কিভাবে কাজ করে।

যখন দুটো কম্পিউটার ইন্টারনেটের সাথে সংযুক্ত থাকে (নিচের ছবিতে হলুদ রেখার মাধ্যমে যেটি দেখানো হয়েছে) তারা পরস্পর কথা বলতে পারে।

একটা সার্ভার ( নীল বাক্স) হল একটা বিশেষ কম্পিউটার যা ভেতরে থাকে ওয়েব পেইজ ফাইলগুলো। বাড়ি কিম্বা স্কুলো তুমি যে কম্পিউটার ব্যবহার কর সেটি কিন্ত সার্ভার নয়, কেননা এটা সরাসরি ইন্টারনেটের সাথে সংযুক্ত থাকে না। আমরা কোন ইন্টারনেট সেবাপ্রদানকারী প্রতিষ্ঠান বা Internet Service Provider (ISP)-এর  মাধ্যমে ইন্টারনেটের সাথে যুক্ত হই।

একটা সাইটের বিষয়বস্তু(কোন ওয়েবসাইটে যেসব বিষয়গুলোর কথা বলা হয়) কম্পিউটারের বোধগম্য বিশেষ নিয়মাবলীর মাধ্যমে সুবিন্যস্ত করা হয়; অনেকটা গোপন,সাংকেতিক ভাষায় কথা বলার মত, আমরা শীঘ্রয় এই গোপনীয়াতা শিখতে যাচ্ছি!

তোমার কম্পিউটার কীভাবে ওয়েবের সাথে সংযুক্ত হয়

এই ছবিতে ব্রাউজার সার্ভারের কাছে  www.tutsplus.com সাইটটি প্রদর্শনের জন্য অনুরোধ পাঠাচ্ছে যেখানে এই সাইটের ফাইলগুলো রক্ষিত আছে।  সার্ভার ফাইলগুলো ফেরত পাঠাচ্ছে এবং ব্রাউজার এগুলোকে অনুবাদ করে একটা পেইজকে স্ক্রীনে(মনিটরে) প্রদর্শন করছে। এবং তা নিমিশেই ঘটছে!

এটা হল পুরোটাই যোগাযোগ এবং তথ্য শেয়ার করা।

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

একজন ওয়েব ডিজাইনারের কাজ

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

একজন ওয়েব ডিজাইনারের কাজ

আমাদের প্রজেক্ট

এই সিরিজে আমরা Tuts+ নগরের জন্য একটা ওয়েবসাইট তৈরী করবো। এই নগরের জন্য একটা জায়গা দরকার যেখানে পর্যটকেরা এই নগর পরিভ্রমনের পূর্বেই নগর বিয়য়ে সুবিধাজন তথ্য পেতে পারে। 

ওয়েবসাইটটা কেমন হবে এটা হল তার একটা প্রাক-ধারণা:

আমরা যা তৈরী করবো

ওয়েব ডিজাইনের যে বিষয়গুলো আমরা শিখবো তার সবকিছুই এই ওয়েবসাইটের মাঝে বিদ্যমান আছে। তোমার জন্য এটি একটি প্রকৃতই পরিচ্ছন্ন প্রথম ওয়েব ডিজাইন প্রোজেক্ট।

নকশা ও নির্মান

সেখানে যাবার জন্য যা প্রয়োজন, চলো আমরা তা নিয়ে কিছু কথা বলি 

প্রথমত, আমরা আমাদের সাইটের একটা চিত্র আঁকবো এবং এরপর একটা বিশেষ ফাইলের মাঝে আমরা এই পেইজে যা দেখতে চাই তা যোগ করব। আর ভিজিটরদের অন্য কোন জায়গায় নিয়ে যাবার জন্য এখনে আমরা লিংক-ও যোগ করবো, যেমন বেচা-কেনার কোন ওয়েব সাইট ওয়েব সাইট। 

নকশা আঁকা গুরুত্বপূর্ণ

শৈলী (স্টাইলিং)

আমাদের ওয়েবসাইটের জন্য বিশেষ ফাইলটি অংকন ও তা লেখার পর আমাদের এটিকে সুন্দর দেখাতে হবে। এইটা হল সেই সেকশন যেখনে আমাদের সকল রং এবং গঠন বিন্যাসের (লেআউট) ধারণাগুলো (স্ক্রিনে এই সকল বিষয়গুলো কিভাবে অবস্থান করবে) জীবন্ত হয়ে উঠবে।

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

সিরিজ মানচিত্র (ম্যাপ)

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

আমাদের পথ নির্দেশিকা (রোডম্যাপ)

সূচনা

গোলাপী তারা দেখে তুমি বুঝতে পারছো আমরা বর্তমানে সূচনা অংশ পড়ছি। ///এখন ওয়েব কিভাবে কাজ করে, একজন ওয়েব ডিজাইনারের কাজ এসম্পর্কে আমরা একটা সাধারণ ধারণা লাভ করেছি এবং ///

ওয়েবসাইট তৈরী

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

এবার আমরা আমাদের ওয়েবসাইটের কোডিং অংশ শুরু করতে প্রয়োজনীয় ফাইল এবং টুলস বা সরঞ্জাম সম্পর্কে কথা বলবো।

HTML (এইচটিএমএল)

HyperText Markup Language (HTML) এটা হচ্ছে গোপনীয় (কিন্ত এখন নয়) ভাষা যা আমাদের পূর্বোক্ত টেক্সট ফাইলটি সংগঠিত করতে ব্যবহার করা হবে। এই ভাষাটি আমাদের ব্রাউজারকে ওয়েবসাইট ফাইল বুঝতে ও প্রদর্শন করতে সাহায্য করে।

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

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

CSS (সিএসএস)

Cascading Stylesheets, CSS, আমাদের ওয়েবসাইটের জন্য একটি স্টাইল (রঙ, ফণ্ট, এবং সম্পূর্ণ অনুভূতি) ঠিক করে দেয়। এটাকে আকর্ষণীয় করার পাশাপাশি ভিজিটরদের জন্য যথাসম্ভব ব্যবহারোপযোগী করে তৈরি করে। 

সিএসএস কেমন দেখায়

সিএসএস গঠন বিন্যাস (লেআউট)

আমাদের পেইজের সকল অংশগুলো বিন্যস্ত করার বিষয়ে সিএসএস -ও আমাদের সাহায্য করতে পারে।

ছবি

এই পর্যায়ে এসে আমরা আমাদের ওয়েবসাইটে কি ধরনের ছবি যোগ করবো এবং কিভাবে এটাতে কিছু স্টাইল যোগ করবো সে সম্পর্কে কথা বলবো। নীচের মত চারটি সুন্দর ছবি যোগ করতে হবে, তুমি তাদের সম্পর্কে কি ভেবে দেখেছো?

Our images

প্রাথমিক(বেসিক) ডিজাইন

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

টাইপোগ্রাফি

টাইপোগ্রাফি হল অক্ষর(টাইপ) কে বিন্যাস করার শিল্প এবং আমাদের নতুন ডিজাইন পাঠক্রমের জন্য বিশেষ অনুপেরণা, যেমন এটি ব্যাপকভাবে আমাদের ওয়েবসাইটের জন্য সাফল্য এনে দিতে পারে তেমনি এটাকে ডুবিয়েও দিতে পারে। 

আমাদের সাইটের টাইপোগ্রাফির প্রথম উদাহরণটা দেখতে পাবে একেবারে সবার প্রথমে।

Heading

রং

রং এর ব্যবহার অত্যন্ত গুরুত্বপূর্ণ এবং খুবই মজার। রং কোন সাইটকে সুন্দর করে তোলে, পাশাপাশি অর্থবহ, যা সম্পর্কে আমরা সেখানে কথা বলব।

সিরিজ শেষে

আমরা এই সিরিজ পাঠক্রমগুলো শেখা শেষে আমরা জানতে পারবো, সার্ভার নামের বিশেষ কম্পিউটারে থেকে তোমার ওয়েবসাইট-এর ফাইলগুলো তোমার সকল বন্ধু ও স্বজনেরা কিভাবে ইন্টারনেটের মাধ্যমে দেখতে পাবে। আমরা আরো  বলবো, "Tuts+ নগরের জন্য ওয়েব ডিজাইন" এরকম আরো নতুন শিরোনাম থেকে প্রাপ্ত শিক্ষা আপনি কোথায় কাজে লাগাতে পারেন  সে সম্পর্কে।

কিন্তু এ বিষয়ে এখনই খুব বেশী উদ্বিগ্ন হয়ো না, আমরা সবে মাত্রই এখনে এসেছি!

শীঘ্রই আবার দেখা হবে!

পরবর্তী পাঠ্যক্রমে আমরা সোজসুজি নেমে পড়ব HTML দিয়ে একটি ওয়েবসাইট কীভাবে তৈরী করা যায় তা শেখার কাজে। আমি আর অপেক্ষা করতে পারছি না, নগরের আশে-পাশেই তোমার সাথে দেখা হচ্ছে!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.