Web Design And Development Course-Web Design and Development কি?

Web Design and Development

Web Design বলতে বুঝায়, website এর  রূপ কেমন হবে তা বুঝায়। Web Design হিসেবে আপনার কাজ হবে এমন একটা পূর্ণাঙ্গ website  এর  template  বানানো। যেমন, এটার layout কেমন হবে। Header, Sidebar কি রকম হবে Menu কোথায় রাখতে হবে , Image গুলো কিভাবে দেখাবে  ইত্যাদি। যদি অন্যভাবে  আমরা বলি website এর তথ্য কি হবে এবং কোথায় জমা থাকবে এগুলো চিন্তা না করে, তথ্যগুলা কিভাবে দেখানো হবে সেটা নির্ধারণ করাই হচ্ছে Web Designer  এর কাজ ।  এই ডিজাইন নির্ধারণ করতে ব্যাবহার করতে হবে কিছু টুলস যেমন PHOTOSHOP, GIMP ইত্যাদি। এবং কিছু Markup এবং Scripting Language  আছে যেমন, HTML. CSS এবং JavaScript ইত্যাদি। Web De signer কে আমরা Front-

End Developer ও বলতে পারি ।

Web development  হচ্ছে এমন বিষয় যা একটা Website এর প্রাণ সঞ্চারনে সাহায়্তা করে।

একজন Web Designer যে  Design তৈরি করেন তার প্রতিটা উপকরণকে ফাংশনাল এবং ডাইনামিক করার জন্য পরিচালিত করণীয় কাজ হচ্ছে Web Development।

একটা website কে তিন ভাগে বিভক্ত করা যায় যেমন, Design , কনটেন্টম্যানেজমেন্ট সিস্টেম এবং ডাটাবেস।

একজন web developer এই তিনটি বিষয়ের মধ্যে সমন্বয় ঘটিয়ে পুরো System কে সক্রিয় এবং Dynamic  করে থাকেন।

web developer  এর  কাজ হচ্ছে ডাটা প্রসেসিং, ডাটাবেস নিয়ন্ত্রণ, সিকিউরিটি নির্মান, ইউজার এবং এডমিনের ক্ষমতা নিয়ন্ত্রণকরা, এপ্লিকেশনের সকল ফিচারকে ফাংশনাল এবং ডাইনামিক করা এবং সমগ্র সিস্টেমের কার্যকারীতা এবং ব্যবহার যোগ্যতা নিয়ন্ত্রণ করা ।

আপনাকে একজন ভালো মানের web designer হতে হলে PHP, MySQL এবং এর পাশাপাশি HTML, CSS, Javascript, Bootstrap , Jqueryএর সম্পর্কে অনেক ভাল জ্ঞান রাখা প্রয়োজন।

 

একজন ভাল web developer এর  যে ধরনের যোগ্যতা থাকতে হয়?

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

নারী এবং পুরুষ উভয়ের জন্যই কাজটি সমান ভার ও অর্থ বহন করে সে জন্য নারী-পুরুষ উভয়েই web developerহিসেবে কোন প্রাধান্য ছাড়াই কাজ করতে পারেন।

একজন ভাল মানের  web design হিসেবে কাজ করার ক্ষেত্রে অভিজ্ঞতা খুবই  গুরুত্বপূর্ণ বিষয়। নিয়োগ পাওয়ার জন্য নিম্নে এক  বছরের অভিজ্ঞতা বাধ্যতামূলকভাবে উল্লেখ করা থাকে। অনেক ক্ষেত্রে চার থেকে সাত বছরের অভিজ্ঞতা প্রয়োজনীয় হয়। তবে এক থেকে তিন বছরের অভিজ্ঞতা থাকলেই এক্ষেত্রে Web Developer হিসেবে নিয়োগ পাওয়া যায়।

 

এখন ধরা যাক আমি তা ভালোভাবেই শিখলাম। পরে কোথায় এবং কিভাবে কাজ করব?

অনলাইন মার্কেটপ্লেস যেমনঃ upwork.com, freelancer.com, fiverr.com  web page design এবং web developer দের অনেক অনেক চাহিধা রয়েছে। এইসব মার্কেট গুলোতে আপনি নিম্ন ২ ডলার থেকে ১০০ ডলার পর্যন্ত প্রতি ঘন্টা আয় করতে পারেন এবং themeforest.net, codecanyon.net এর মতো মার্কেট প্লেসে আপনি আপনার তৈরী ওয়েব এপ্লিকেশন গুলো বিক্রি করে প্রতি মাসে লক্ষ টাকা আয়  করতে পারেন। এবং বাংলাদেশে হাজার হাজার সফটওয়্যার এবং ওয়েব ডেভেলপমেন্ট কোম্পানি গুলোতে আপনি চাকরিও করতে পারেন। এই জায়গায় বড় সুবিধা হচ্ছে আপনি Computer science  এ পড়া লেখা না করেও software company ভালো মানের স্যালারিতে চাকরি করতে পারবেন।

আমরা  নিজে শিখতে চাইলে কোথায় থেকে শিখব ?

চাইলে আপনাকে অবশ্যই অনলাইন থেকে হেল্প নিতে হবে।  এই ক্ষেত্রে youtube.com হচ্ছে বেস্ট বা সুবিধা জনক পাল্টফ্রম।এ ছাড়া w3programmers.com এবং w3programmers.com/Bangla এ ওয়েব ডেভেলপমেন্ট এর উপর প্রচুর টিউটোরিয়াল এবং Article আছে, হেল্প নিতে পারেন।

Web Design And Development Course-Web Design শিখতে কি কি দরকার?

 

 

Web Design And Development Course

ওয়েব ডেভেলপমেন্ট করতে কিকি শিখা দরকার?

Web ও Softwere ডিজাইন এবং ডেভেলপমেন্ট এর জন্য প্রথম আমাদের যে দুটি Language জানা দরকার তা হলো –
১। HTML এবং
২। CSS

এই দুটি মার্কআপ Language কোন প্রোগ্রামিং Language নয়। এ দুটো Language দিয়ে আপনি একটি Static Web Side বা Softwere তৈরি করতে পারেন।
next এ আপনি যখন,
৩।PHP ও
৪। SQL

এখানে PHP একটি Program Language এবং SQL ডাটাবেস Language । এই দুটি Language শিখলে আপনি একটি Dynamic Website বা Software তৈরি করতে পারবেন।
তারপর আপনি

৫। জাভাস্ক্রিপ্ট Language শিখলে আপনি একটি সুন্দর ও দৃষ্টি নন্দন WebSite অথবা Software তৈরি করতে পারবেন।
এছাড়া Web ও Software ডিজাইন এবং ডেভেলপমেন্ট করতে আপনাদের বিভিন্ন গ্রাফিক্স এর কাজের প্রয়োজন হবে।
এজন্য- Photoshop, Illustrator এবং Graphics এর কাজ মোটামুটি জানা দরকার।
তাছাড়াও আমরা চাইলে C, Python বা ভিজুয়াল বেসিক দিয়ে Softwere তৈরি করতে পারব, তবে Speed এর কথা ভাবলে C দিয়ে Softwere অথবা Application তৈরি করা সবচেয়ে Better.

Markup Language এবং Program Language কি?
HTML এবং CSS দুটি Markup Language এরকম আরো অনেক Markup Language আছে। এ দুটি Language দিয়ে আপনি যতটুকু কোড লিখবেন সে টুকুরই ফলাফল প্রকাশ করবে। এর বাইরে সে কিছুই করতে পারবেনা। আপনি যদি এই দুটি Language কে প্রশ্ন করেন যে ৫ এবং ৫ যোগ করলে কত হবো? সে আপনাকে কে কোন ফলাফল দিতে পারবেনা কেননা এটি একটি Markup Language কিন্তু আপনি যদি কোন Program Language, যেমন- PHP বা জাভাস্ক্রিপ্টকে কে প্রশ্ন করেন যে ৫ এবং ৫ যোগ করলে কত হবো? সে বলে দিতে পারবে ১০। কারণ এটি একটি Program Language এরকম PHP বা JavaScript ছাড়া আরো অনেক গুলো Program Language আছে।

Static এবং Dynamic আসলে কি?
আমরা Web Site ও Softwere দুট ভাবে তৈরি করতে পারি। একটি Static এবং অপরটি Dynamic। আমাদের যেসব Web Site ও Softwere পেইজের কোন কিছু সংযুক্ত, সম্পাদনা বা বাতিল করতে, মূল কোডে যাওয়া ছাড়া পরিবর্তন করা সম্ভব নয় সেগুলো হলো Static পেইজ। আর যেসব ওয়েব বা Softwere পেইজর কোন কিছু সংযুক্ত, সম্পাদনা বা বাতিল করতে মূল কোডে যাওয়া ছাড়া পরিবর্তন করা সম্ভব সেগুলো হলো Dynamic পেইজ। যেমন Facebook এর কথা ধরুন, আমরা ইচ্ছা করলে Facebook আমাদের Profile, যেকোন Post, Friend যোকোন সময় Add, Edit এবং Delete করতে পারি। মূলত ওই ওয়েব সাইটটি Dynamic হওয়াতে আমাদের জন্য তা করা সম্ভব হয়েছে। তাই আমাদের কোন Web Site বা Softwere তৈরির করার সময় সব কিছু Dynamic কিনা সেদিকে খেয়াল রাখতে হবে।

কিভাবে তৈরি হয় এই Web Side?
At Fast একজন Designer WebSite Design করে । সাধারনত Photoshop দিয়ে Design টির একটি বাহ্যিক রূপ প্রদান করে । কিন্তু Photoshope যেসব টেক্সট Image ব্যবহার করা হয় সেগুলোত আমরা যেই Browser ব্যবহার করি যেমন, Firefox, Goggle Crome ইত্যাদি বুঝতে পারবে না । এই Browser গুলোকে বোঝানোর জন্য আলাদা কিছু Language আছে যেমন – HTML, CSS, জাভাস্ক্রীপ্ট ইত্যাদি । প্রথমে HTML দিয়ে Photoshop যে Design টি করা হয় সেটি একটি কাঠামো তৈরি করা হয় । তারপর CSS দিয়ে Photoshop যে ডিজাইন করা হয়েছে সেই রকম Design করা হয় । Browser এবং জেকুয়েরি দিয়ে Design বিভিন্ন রকম Advance ফিচার যেমন যোগ করা হয়।এরপর PHP মাইএসকউএল ইত্যাদি দিয়ে ওয়েব সাইটি ব্যবহার উপযোগী করা হয় ।

কিভাবে আমরা শিখবো ওয়েব ডেভেলপমেন্ট?
প্রথমেই আপনাকে মনস্থির করতে হবে যে কমপক্ষে দুইটি বছর সময় ব্যয় করবেন শুধু মা্এ শেখার জন্য। তারপর ফেসবুকের দুইটা গ্রুপে যোগ দিবেন একটা হল আর আর ফাউন্ডেশনের অফিসিয়ার group আর একটি হল odesk help group । group এ যোগ দিয়েই প্রথমেই group এর File গুলো পড়ে ফেলবেন।তবে প্রথমে কিছুই বুঝবেন না তারপরও ধৈর্য ধরে পড়ে ফেলেন। এরপর grope এ যে যত পোষ্ট দিবে নিয়মিত পড়তে থাকেন।

কোথায় কিভাবে শিখবেন ?
এখন অনলাইনে এত Resorce যে খুব সহজে একাই আপনি শিখতে পারবেন। w3schools যেখানে সব টিউটোরিয়াল Resorce পাবেন। আর Tools পেজে পাবেন সব রকম Tools । অথবা বিভিন্ন প্রকার training center থেকেও শিখতে পারবেন। একটা জনিস লক্ষ্য রাখবেন । আমাদের দেশে এখন পযর্ন্ত ভাল মানের training center আছে হাতে গোনা মাএ কয়েকটি।

Web Design And Development Course-HTML Element

 

Web Design And Development Course

বিস্তারিতঃ

এর আগে Element । একটা Element এর ভিতর tag এর   মতই এক বা একাধিক Element  থাকতে পারে বা থাকে (এটাকে nested Element বলে)। নিচের উদাহরনটি দেখুন…

দেখুন…HTML TAG নিয়ে আলোচনা করলাম। একটা start tag (যেমন <div>) এবং end tag (যেমন </div>)  এর মাঝে যে যে বিষয় থাকে তা সহ পুরোটি একটা

 

এখানে <html> Element এরুপ body একটা Element । একইভাবে বাকিগুলিও এক একটি Element </html> এর ভিতর যা কিছু আছে সব কিছু নিয়ে এটা একটা html ।

Element এর ভিতর Element থাকতে পারে  যেমন, <h1></h1> এর ভিতর কোন Element নেই, যে লেখাটি আছে তা হচ্ছে এর Content  তাই <h1></h1> এর ভিতরের লেখাটিসহ এটা h1 Element ।

DOC type এ এই উদাহরনটি দেয়া আছে, Code করে দেখতে পারেন আমাদের অনলাইন এডিটরে ।

 

এই উহরনটিতে মোট 5 টি Element আছে head Element, body , h1 HTML Element,  ,এবং p Element।

 

* ট্যাগের মত এখানে HTML Element এর চাইল্ড Element হচ্ছে বাকি সবগুলি Element । আবার body হচ্ছে প্যারেন্ট এবং এর চাইল্ড হচ্ছে h1 ও p Element । ভিতরের গুলি হচ্ছে Chiled Element আর যে Element এর ভিতর অন্য   Element থাকে সেটা হচ্ছে Parent।

 

* ট্যাগগুলির শব্দগুলি ছোটহাতের অক্ষরে লিখতে হবে, যেমন <body> এভাবে না দিয়ে <BODY> এভাবে দিলে এটা একটা গ্রামাটিকাল ভুল। সাথে সাথে end tag টিও দিতে হবে নাহলে একই ভুল হবে।

 

** যত Element লেখি না কেন সব body Element এর ভিতরই লিখতে হবে, বাকি Element যেমন head ইত্যাদির ভিতর শুধু নির্দিষ্ট কিছু Element লেখা যায়। Browser শুধু ঐটুকুরই Output আসে যেটা body Element ভিতর থাকে।

 

Notepad++ এ বাংলা লিখবেন কিভাবে??

 

এটা খুব সহজ বিষয় । Code লেখার আগে Notpad “Encoding” মেনু থেকে Unicode Setting Select  করে দিতে হবে। তাহলে এবার বাংলা লিখলে Browser ঠিক ঠিক

Output দেখতে পাবেন।

 

ব্লক লেভেল এবং Inline Element.

=========================

দুই ধরনের Element  আছে,

 

Block level Element : যে Element গুলিBy default তার ডানে বামে পুরো জায়গা দখল করে সেগুলিকে Block level Element বলে। একটু ভিন্ন ভাবে বলা যায়  যে Element গুলি শুরু হয় নতুন লাইনে (যখন ব্রাউজারে প্রদর্শন করবে) সেগুলি Block level  Element ।

div, p, h1, ul, li ইত্যাদি ব্লকলেভেল এলিমেন্ট।

Inline  Element : যে Element এর কারনে নতুন Line শুরু হয়না  তাই Inline Element

a, i, b, span, strong ইত্যাদি Inline Element.

Note: পরবর্তী Web Design And Development Course টিউটোরিয়ালে (Part-6) এইচটিএমএল ট্যাগ এর বিস্তারিত আলোচনা করা হবে।

See More Article…

• Web Design And Development Course-HTML TAG
• Web Design And Development -HTML paragraph
• Web Design And Development Course-HTML Heading
• Web Design And Development Course-HTML List