Apr 22

সফটওয়ার ডেভলাপমেন্ট লাইফসাইকেল . Software Development Life Cycle

সফটওয়ার ডেভলাপমেন্ট লাইফসাইকেল

রিদওয়ান বিন শামীম

 

সফটওয়ার ডেভলাপমেন্ট লাইফসাইকেল বা সংক্ষেপে SDLC হল সফটওয়ার প্রকৌশলে কাঙ্খিত পণ্য উৎপাদনের সুপরিচিত ও সুগঠিত কার্যক্রমের ধাপসমূহ।

SDLCএর কার্যক্রমঃ SDLC কাঙ্খিত পণ্য বা সফটওয়ার ডিজাইন ও ডেভেলাপের জন্য কয়েকটি ধাপ নিশ্চিত করে, SDLC ফ্রেমওয়ার্কে কয়েকটি ধাপ থাকে যেগুলো হল,

যোগাযোগঃ এটি প্রথম ধাপ যেখানে গ্রাহক কোনও সফটওয়ারের জন্য চাহিদা প্রকাশ করে, সফটওয়ার সেবা প্রদানকারীর সাথে যোগাযোগ করে ও শর্তাবলী জানায়। সেবা প্রদানকারীর কাছে লিখিত ভাবে তার চাহিদার কথা জানাতে হয়।

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

• অপ্রচলিত বা বিদ্যমান সিস্টেম ও সফটওয়ার নিরীক্ষণ করে,
• ডেভেলপার ও গ্রাহকের সাক্ষাৎকার নিয়ে,
• ডাটাবেসের সাহায্য নিয়ে,
• উদ্ভূত প্রশ্নের সমাধান করে।

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

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

সফটওয়ার ডিজাইনঃ এরপর সমস্ত তথ্য ও শর্তাবলী একসাথে করে সফটওয়ারটি ডিজাইন করতে হয়। গ্রাহক চাহিদা, শর্তাবলী ও প্রয়োজনীয় তথ্য যা চাহিদা সংবদ্ধ করার সময় পাওয়া গিয়েছিল সেগুলোই এই ধাপে ইনপুট। আউটপুট দুটি ধাপে আসবে, লজিকাল ডিজাইন ও ফিজিকাল ডিজাইন। প্রকৌশলীরা কিছু মেটা ডাটা, ডাটা ডিকশনারি, লজিকাল ডায়াগ্রাম, ডাটা ফ্লো ডায়াগ্রাম এবং কিছু কেসে কিছু সিডো কোড(pseudo codes) প্রস্তুত করেন।

কোডিংঃ এই ধাপও প্রোগ্রামিং ধাপ হিসেবে ধরা হয়। সঠিকভাবে উপযুক্ত প্রোগ্রামিং ভাষায় নির্ভুলভাবে প্রোগ্রাম কোড লেখার মাধ্যমে সফটওয়ার ডিজাইনের কার্যক্রম বাস্তব রূপ লাভ করে।

নিরীক্ষণঃ একটি সমীক্ষায় দেখা গেছে, ৫০ % সফটওয়ার ডেভলাপমেন্ট নিরীক্ষণ করা হয়। সামান্য ভুলের জন্য সফটওয়ারের ক্ষতি এমনকি বাতিলও হতে পারে। ডেভলপাররা কোডিঙের সময় মডিউল টেস্টিং, প্রোগ্রাম টেস্টিং, অভ্যন্তরীণ টেস্টিং, গ্রাহক ভিত্তিক টেস্টিং ইত্যাদি নিরীক্ষণ করেন, প্রারম্ভিক পর্যায়ে ভুল ধরা পরা নির্ভরযোগ্য সফটওয়ারের জন্য দরকারি।

মৌলিকতাঃ লাইব্রেরী, ডাটাবেস ও অন্যান্য প্রোগ্রামের ক্ষেত্রে সফটওয়ারের মৌলিকতা থাকতে হবে। SDLC এর এই বৈশিষ্ট্যই বিশ্ব বাজারে এর স্বাতন্ত্র্য নিশ্চিত করবে।
প্রয়োগঃ গ্রাহকের যন্ত্রে সফটওয়ার ইন্সটল করতে হবে, ইন্সটল করার পরে কনফিগার করতে হয়, এরপর বহনযোগ্যতা, অভিযোজন ও মৌলিকতা নির্ণয় করে দেখা হয়।

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

প্রবণতাঃ সময়ের সাথে সাথে সফটওয়ারের সক্ষমতা কমতে থাকে, এটি একদম অকেজো হয়ে পরে, বা আপডেটের দরকার হয়। কোনও বড় অংশ বাছাই করার দরকার হতে পারে। ডাটা ও সফটওয়ারের কোনও অংশ একসাথে রাখা, সিস্টেম বন্ধ করা, প্রবনতার পরিকল্পনা, কাজ শেষে সিস্টেম ত্যাগ করা ইত্যাদি এই ধাপের অন্তর্গত।

সফটওয়ারের ডেভলাপমেন্ট মডেলঃ সফটওয়ারের ডেভলাপমেন্ট মডেল ডেভলাপারকে কোনও সফটওয়ারের পরিকল্পনা তৈরি করতে সাহায্য করে। সফটওয়ারের ডেভলাপমেন্ট মডেলের নিজস্ব যন্ত্রপাতি, পদ্ধতি ও প্রক্রিয়া আছে যা স্পষ্টভাবে নির্দেশিত ও সফটওয়ার ডেভলাপমেন্ট লাইফসাইকেল সংজ্ঞায়িত করে। সফটওয়ারের ডেভলাপমেন্ট মডেলের অল্প কিছু ধাপ নিচে দেখানো হল।

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

ডেভলাপার একই ধরনের সফটওয়ারে পূর্বে কাজ করেছে এরকম ক্ষেত্রে ওয়াটারফল মডেল অনুসরণ করা যায় কারণ এটির সব ধরনের ডোমেইন সম্পর্কে তার ধারণা থাকে।

পুনরাবৃত্তিক মডেলঃ SDLC প্রক্রিয়ার ধাপগুলো পুনরাবৃত্তিক ভাবে চাক্রিকভাবে সম্পন্ন হয়, প্রথমে সফটওয়ারটি ক্ষুদ্র পরিসরে তৈরি করা হয়, এবং যৌক্তিক সকল পন্থা অনুসরণ করা হয়, এরপর পরবর্তী সকল চক্রে নতুন অনেক ফিচার ও মডিউলকে ডিজাইন, কোড ও টেস্ট করা হয়, তারপর সফটওয়ারে যোগ করা হয়।

প্রতি চক্রের পরে ব্যবস্থাপনা টিম ঝুঁকি ব্যবস্থাপনা ও পরবর্তী চক্রের জন্য তৈরি হতে পারে, যেহেতু প্রতিটি চক্র ছোট ছোট অনেক ভাগে বিভক্ত তাই ব্যবস্থাপনা প্রক্রিয়া অপেক্ষাকৃত সহজ, যদিও বেশি রিসোর্সের প্রয়োজন হয়।

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

ভি মডেলঃ ওয়াটারফল মডেলে SDLC প্রক্রিয়ার এক পর্ব শেষ হলে তবেই অন্য আরেক পর্ব শুরু হয়, এক পর্বে অন্য পর্বের কোনও বিশ্লেষণ হয় না, ভি মডেলে সম্পূর্ণ উলটোটি হয় অর্থাৎ সকল ধাপেই সম্পূর্ণ বিশ্লেষণ করতে হয়। সকল ধাপে প্রদত্ত চাহিদা অনুসারে পরীক্ষা ও মূল্যায়ন করতে হয় সফটওয়ারটিকে, সম্পূর্ণ প্রস্তুত হয়ে গেলে শর্তাবলীর সাথে মিলিয়ে দেখা হয়। এ মডেলে নিরীক্ষা ও বৈধতা পরস্পরের পরিপূরক তাই একে নিরীক্ষা ও বৈধতা মডেলও বলা হয়।

বিগ ব্যাং মডেলঃ এ ধরনের মডেল সরল, এতে অল্প পরিকল্পনা ও বেশি কোডিং, বেশি অর্থ লাগে। বিজ্ঞানীরা যেমনটি বলেন, বিগ ব্যাংএর পরে গ্রহ নক্ষত্র সব মিলিয়ে ব্যপারটা যেমন হয়েছিল তেমনি আমরা যদি বেশি অর্থ ও বেশি প্রোগ্রামিং কাজে লাগাতে পারি তাহলে আমরা সবচেয়ে ভাল সফটওয়ার পণ্য তৈরি করতে পারব।

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

Apr 21

সফটওয়ার ইঞ্জিনিয়ারিংঃ সারসংক্ষেপ (What is Software Engineering)

সফটওয়ার ইঞ্জিনিয়ারিং

সারসংক্ষেপ

রিদওয়ান বিন শামীম

 

সফটওয়ার ইঞ্জিনিয়ারিং শব্দটি দুটি শব্দ মিলে হয়েছে, সফটওয়ার ও ইঞ্জিনিয়ারিং।

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

অন্যদিকে প্রকৌশল হল সংজ্ঞায়িত ও বৈজ্ঞানিক সুত্রে ও পন্থায় পণ্যের মান বৃদ্ধি করা।

সফটওয়ার ইঞ্জিনিয়ারিং হল তেমনই একটি প্রকৌশল উপশাখা যেখানে বৈজ্ঞানিক সুত্রে,পরিকল্পনায় ও পন্থায় সফটওয়ার জাতীয় পণ্যের উন্নয়ন করা হয়। কার্যকর ও নির্ভরযোগ্য সফটওয়ার জাতীয় পণ্যের উৎপাদনই সফটওয়ার ইঞ্জিনিয়ারিংএর মূল উদ্দেশ্য।

IEEE সফটওয়ার ইঞ্জিনিয়ারিংকে যেভাবে প্রকাশ করেছে তা হল, সফটওয়ার উন্নয়ন পরিকল্পনা ও ব্যবস্থাপনার জন্য নিয়মতান্ত্রিক, পরিকল্পনাপ্রসুত কার্যপ্রণালী বা এপ্লিকেশন যা প্রকৌশল এপ্লিকেশন, এবং সফটওয়ার উন্নয়ন নিশ্চিত করে এই প্রক্রিয়া সাধনের প্রবণতাই সফটওয়ার ইঞ্জিনিয়ারিং।

Fritz Bauer নামক জার্মান কম্পিউটার প্রকৌশলী সফটওয়ার ইঞ্জিনিয়ারিংকে যেভাবে প্রকাশ করেছেন তা হল, সফটওয়ার ইঞ্জিনিয়ারিং হল একপ্রকার প্রকৌশল সংস্থাপন যেখানে বাণিজ্যিকভাবে এমন সফটওয়ার উৎপাদন নিশ্চিত করা হয় যা বাস্তব যন্ত্রকাঠামোয় নির্ভরযোগ্য এবং সফলভাবে কাজ করতে সক্ষম।

সফটওয়ার ইঞ্জিনিয়ারিং ব্যবহার করে কোনও সফটওয়ার তৈরি, উন্নয়ন ও উৎপাদন সম্পন্ন করার প্রক্রিয়াকে সফটওয়ার বিবর্তন (software evolution) বলা হয়। এটি একদম সফটওয়ার তৈরি থেকে শুরু করে উৎপাদন প্রক্রিয়া, রক্ষনাবেক্ষন করা ও আপডেট ইত্যাদি এবং প্রারম্ভিক শর্তাবলী অনুযায়ী চূড়ান্ত উৎপাদন পর্যন্ত সবকিছু মিলে সম্পন্ন হয়।

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

সফটওয়ার বিবর্তন আইনঃ লেম্যানের(Lehman) দেয়া সফটওয়ার বিবর্তন সূত্র আছে। লেম্যান সফটওয়ারকে তিন ভাগে ভাগ করেন,

S-type (static-type) নির্ধারিত স্পেসিফিকেসন ও সমাধান অনুসারে কাজ করে। কোডিঙের আগে স্পেসিফিকেসন ও সমাধান ঠিক করে দিতে হয়। সরল ধরনের এবং ক্ষুদ্র পরিবর্তনেও সংবেদনশীল, যেমন গাণিতিক গননা করার প্রোগ্রাম।

P-type (practical-type) এ ধরনের সফটওয়ারে নির্ধারিত প্রক্রিয়া অনুসারে কাজ করে, কয়েকটি প্রক্রিয়া ঠিক করে দেয়া থাকে। প্রারম্ভিক শর্তাবলী নির্ণীত কিন্তু ফলাফল সবসময় পুঙ্খানুপুঙ্খ নাও হতে পারে। যেমন, গেমিং সফটওয়ার।

E-type (embedded-type) বাস্তব ক্ষেত্রে প্রয়োগবান্ধব সফটওয়ার, আইন, শুল্ক ইত্যাদি ছাড়াও অন্যান্য আরও অনেক কারণে দ্রুত পরিবর্তিত হয়, যেমন, অনলাইন বাণিজ্য সফটওয়ার।

E-type (embedded-type) সফটওয়ারের বিবর্তনঃ লেম্যান E-type সফটওয়ারের বিবর্তনে আটটি আইন বা নিয়ম বর্ণনা করেছেন,
নিয়ত পরিবর্তনশীলতাঃ সময়ের সাথে এই ধরনের সফটওয়ারের পরিবর্তন হয়, না হলে এগুলো সর্বাধিক কার্যক্ষমতা ধরে রাখতে পারবে না।

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

মানের নিম্নমুখিতাঃ যেহেতু পরিবর্তনশীল প্রেক্ষাপটে কাজ করতে হচ্ছে তাই অনেক ক্ষেত্রে মানের সাথে আপোষ করতে হয় E-type সফটওয়ারের।

ফিডব্যাক সিস্টেমসঃ E-type সফটওয়ার মাল্টিলেভেল ও মাল্টিলুপ ফিডব্যাক সিস্টেম অনুসরণ করে এবং তা অনুসারে সফলভাবে পরিবর্তন বা উন্নয়ন নিশ্চিত করে।
স্ব-প্রবিধান অর্থাৎ নিজের রেগুলেসন নিয়ন্ত্রণ করাঃ E-type সফটওয়ারের বিবর্তন নিজের রেগুলেসন নিয়ন্ত্রণ করে ও পণ্যের বণ্টন ও প্রক্রিয়া স্বাভাবিকের কাছাকাছি রাখার চেষ্টা করে।

সাংগঠনিক স্থিতিঃ বিশ্বব্যপী কার্যক্রমের হার E-type সফটওয়ারের বিবর্তনের ক্ষেত্রে পণ্যের লাইফটাইমের সাথে সাথে পরিবর্তিত হয়।

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

সফটওয়ার ডেভলপমেন্ট মডেলঃ এটি সফটওয়ার ডেভলপমেন্টের প্রকৌশল মডেল হিসেবেও ধরা যায় কারণ এতে প্রকৌশলগত ধারনাও প্রয়োগ করা হয়। এতে বিভিন্ন গবেষণা ও শর্ত আরোপিত থাকে সফটওয়ার পণ্য উৎপাদনের জন্য, যেগুলো মূলত নিম্নরূপ,

• শর্ত আরোপণ
• সফটওয়ার ডিজাইন
• প্রোগ্রামিং

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

• ডিজাইন
• রক্ষণাবেক্ষণ
• প্রোগ্রামিং

প্রোগ্রামিং মডেলঃ এই অংশটি প্রোগ্রামিং এর সাথে তুলনামুলকভাবে বেশি জড়িত, এতে থাকে,

• কোডিং
• টেস্টিং
• ইন্টিগ্রেশন

সফটওয়ার প্রকৌশলের প্রয়োজনীয়তাঃ সফটওয়ার প্রকৌশলের প্রয়োজনীয়তা বৃদ্ধি পেয়েছে এর উপযুক্ত পরিবেশ গ্রাহক চাহিদা পরিবর্তন ও কার্যকর ক্ষেত্রের বৃদ্ধি পাওয়ার ফলে।

বৃহৎ সফটওয়ারঃ বাড়ি তৈরির আগে তার দেয়াল তৈরি সুবিধাজনক, একই ভাবে সফটওয়ারের আকার বাড়লে তাতে বিজ্ঞানভিত্তিক প্রক্রিয়া প্রয়োগের সুযোগ বাড়ে।

কর্মপরিধিঃ বিজ্ঞানভিত্তিক প্রক্রিয়া ব্যবহার না করলে অন্য কোনও মডেলের অনুকরণে নতুন সফটওয়ার তৈরি করা যায়।

মূল্যঃ হার্ডওয়ার কোম্পানির দক্ষতা ও উৎপাদন বৃদ্ধির ফলে কম্পিউটারের দাম কমলেও সঠিক প্রক্রিয়া মেনে না চললে সফটওয়ারের মূল্য বেশিই থাকে।

গতিশীল প্রবণতাঃ ব্যবহারকারীদের কাজের পরিবেশের সাথে সফটওয়ারের ব্যবহার প্রবণতা ও পরিবর্তন নির্ভর করে, যদি সফটওয়ারের প্রচুর পরিবর্তন সাধিত হয় তবে তা পূর্বের ভার্সনের সাথে সাযুজ্য রেখেই পরিবর্তন করতে হবে, আর এক্ষেত্রেই সফটওয়ার প্রকৌশলের গুরুত্ব বেড়ে যাচ্ছে।

মান নিয়ন্ত্রণঃ মান নিয়ন্ত্রণ ভাল হলে উৎপাদন ও সেবা মানসম্মত হবে।

ভাল সফটওয়ারের বৈশিষ্ট্যঃ একটি সফটওয়ার কি সেবা দিচ্ছে আর কতটা ভাল সেবা দিচ্ছে তাই পণ্য হিসাবে তার গুরুত্ব নিশ্চিত করবে, এজন্য নিচের এই শর্তগুলো পূরণ করতেই হবে,

• কর্মক্ষমতা,
• পরিবর্তনযোগ্যতা ও
• রক্ষণাবেক্ষণ

সঠিক প্রকৌশলগত ও আদর্শ সফটওয়ারে নিচের বৈশিষ্ট্যগুলো থাকা উচিৎ,

কর্মক্ষমতাঃ কাজের ক্ষেত্রে সফটওয়ারটি কতটুকু ভাল তা নির্দেশ করে, এক্ষেত্রে যে বৈশিষ্ট্যগুলো থাকে তা হল,

• বাজেট,
• ব্যবহারযোগ্যতা,
• দক্ষতা,
• নির্ভুলতা,
• ফাংশনালিটি,
• নির্ভরতা,
• প্রতিরক্ষা,
• নিরাপত্তা

পরিবর্তনযোগ্যতাঃ সফটওয়ারটি এক প্লাটফর্ম থেকে অন্য প্লাটফর্মে চালানোর ক্ষেত্রে এই বিষয়টি কাজে লাগে। এর অন্তর্গত বিষয় হল,

• পরিবহনযোগ্যতা,
• এক প্লাটফর্ম থেকে অন্য প্লাটফর্মে চালানোর সক্ষমতা,
• পুনরায় ব্যবহারযোগ্যতা,
• অভিযোজন দক্ষতা।
রক্ষণাবেক্ষণঃ পরিবর্তনশীল পরিবেশে সফটওয়ারটি কিভাবে নিজেকে রক্ষা করবে তা এই অংশের আলোচ্য বিষয়। এর অন্তর্গত বিষয়গুলো হল,
• পৃথক অংশে সীমাবদ্ধ করা,
• রক্ষণাবেক্ষণের যোগ্যতা,
• স্থিতিস্থাপকতা,
• কর্মক্ষমতা প্রসারণ।

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

Apr 21

এইচটিএমএল(5) স্টাইল গাইড এবং কোডিং কনভেনশন HTML(5) Style Guide and Coding Conventions

শরিফুল ইসলাম
Job category-Php Coder

এইচটিএমএল কোডিং এর নিয়ম

ওয়েব ডেভেলপাররা এইচটিএমএল এ কোডিং স্টাইল এবং syntax ব্যবহারের ক্ষেত্রে প্রায়ই দ্বিধান্বিত থাকেন।

২০০০ থেকে ২০১০ সালের মধ্যে অনেক ওয়েব ডেভেলপার এইচটিএমএলকে এক্সএইচটিএমএল এ রূপান্তরিত করে।

এক্সএইচটিএমএল দিয়ে ডেভেলপাররা সঠিক এবং সুন্দরভাবে কোডিং লিখতে বাধ্য হয়।

যখন এইচটিএমএল ৫ কোড ভ্যালিডেশন (বৈধ্যতা) নিয়ে আসে তখন এটি আরও সাবলিল হয়।

HTML5 দিয়ে, আপনি আপনার নিজেকে তৈরি করতে পারবেন শ্রেষ্ঠ অনুশীলন, স্টাইল গাইড এবং কোডিং কনভেনশন দ্বারা।

 

স্মার্ট এবং ভবিষ্যত প্রমান

এইচটিএমএল এ গঠনগত ভাবে কোডিং করলে তা অন্যদের জন্য বুজতে অনেক সহজ হয়।

ভবিষ্যতে এক্সএমএল রিডার এর মত প্রোগ্রাম আপনার এইচটিএমএল পরতে চাইতে পারে।

স্টাইল এ দক্ষতা আনতে হলে স্মার্ট, পরিপাটি, পরিষ্কার, এবং সুগঠিত হতে হবে।

 

সঠিক ডকুমেন্ট টাইপ

ডকুমেন্ট এর প্রথমে doctype লিখতে হবে

<!DOCTYPE html>

 

যদি ছোট হাতের অক্ষরে আমরা লিখি

<!DOCTYPE html>

 

ছোট হাতের এলিমেন্ট (উপাদান) এর নাম লিখতে হবে

উপাদানের নামের ক্ষেত্রে এইচটিএমএল ৫ একসাথে ছোট এবং বড় হাতের লেখাকে গ্রহন করে।

আমরা সবসময় সুপারিশ করি উপাদানের নাম ছোট হাতের অক্ষরে লেখার জন্য।

  • একসাথে ছোট এবং বড় হাতের অক্ষর মিলে লেখা ভাল নয়।
  • ডেভেলপারদের ছোট হাতের অক্ষরে লিখতে হবে  (এক্সএইচটিএমএল হিসাবে)
  • ছোট হাতের অক্ষরে লেখা পরিচ্ছন্ন দেখায়
  • ছোট হাতের অক্ষরে লেখা সহজ।

 

খারাপ অনুশীলন

<SECTION>
  <p>This is a paragraph.</p>
</SECTION>

 

আরও বেশি খারাপ অনুশীলন

 <Section>
  <p>This is a paragraph.</p>
</SECTION>


সঠিক অনুশীলন




<section>
  <p>This is a paragraph.</p>
</section>




 


সকল এলিমেন্ট (উপাদান) এর সমাপনি বন্ধনী


এইচটিএমএল ৫ এ, সকল এলিমেন্ট এর বন্ধনী সমাপ্ত করার প্রয়োজন নেই।  (উদাহরণ <p> এলিমেন্ট)


আমরা সবসময় বলি সকল ট্যাগ বা উপাদানকে সমাপ্ত করার জন্য।


 


খারাপ অনুশীলন




<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>




 


সঠিক অনুশীলন




<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>




 


এইচটিএমএল এর ফাকা উপদানগুলোর ট্যাগ সমাপ্ত করা


এইচটিএমএল ৫ এ এই বিষয়টি অপশনাল


এটি গ্রহণযোগ্য




<meta charset="utf-8">




 


অথবা




<meta charset="utf-8" />




এক্সএইচটিএমএল এবং এক্সএমএল এ স্লাশ চিহ্ন (/) দরকার পরে।


যদি আপনি এক্সএমএল সফটওয়্যারকে পেজ অ্যাক্সেস করার অনুমতি দেন তাহলে, এই চিহ্নকে রেখে দেওয়ােই ভাল।


 


Attribute এর নাম ছোট হাতের হতে হবে


Attribute নামের ক্ষেত্রে এইচটিএমএল ৫ একসাথে ছোট এবং বড় হাতের লেখাকে গ্রহণ করে।


আমরা সবসময় এর নাম ছোট হাতের অক্ষরে লেখার জন্য সুপারিশ করি ।


    

  • একসাথে ছোট এবং বড় হাতের অক্ষর মিলে লেখা ভাল নয়।
    • 

  • ডেভেলপারদের ছোট হাতের অক্ষরে লিখতে হবে  (এক্সএইচটিএমএল হিসাবে)
    • 

  • ছোট হাতের অক্ষরে লেখা পরিচ্ছন্ন দেখায়
    • 

  • ছোট হাতের অক্ষরে লেখা সহজ।
    • 



 


ভাল দেখায় না




<div CLASS=”menu”>




 


ভাল দেখায়




<div class=”menu”>




 


উদ্ধৃতি অ্যাট্রিবিউট মান


কোটেশন চিহ্ন ছাড়া attribute এর ভ্যালুকে লেখা এইচটিএমএল ৫ সাপোর্ট করে।


আমরা সবসময় সুপারিশ করি


    

  • যদি ভ্যালুতে ফাকা স্থান থাকে তাহলে উদ্ধৃতি চিহ্ন ব্যবহার করতে হবে
    • 

  • ভিন্ন ভিন্ন স্টাইল মিসিয়ে লেখা কখনই ভাল নয়
    • 

  • কোটেশন দেয়া মান পড়া সহজ ।
    • 



 


নিচের কোডটি কাজ করবে না কারন ফাকা স্থান আছে :




<table class=table striped>




 


এটি কাজ করবে




<table class="table striped">




 


ইমেজ এট্রিবিউট


সবসময় ইমেজ এর সাথে alt attribute ব্যবহার করতে হবে। কারন যখন ছবি লোড না হবে তখন খুব প্রয়োজনীয়।




<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">




 


ইমেজ সাইজ নির্ধারণ করে দেওয়া উচিত কারন ব্রাউজার ইমেজ লোড হওয়ার পূর্বে তার জন্য জায়গা ফাকা রাখে




<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">




 


Spaces এবং equal চিহ্ন


ফাকা জায়গা বেশি হলে কোন সমস্যা নেই






<link rel = "stylesheet" href = "styles.css">






 


কিন্তু ফাকা কম হলে তা পরতে সহজ এবং সুবিধার হয়




<link rel="stylesheet" href="styles.css">




 


লম্বা কোড লাইন এড়িয়ে চলুন


যখন এইচটিএমএল এডিটর ব্যবহার করা হয় তখন বাম পাস থেকে ডান পাশে স্ক্রল করা এক ধরনের বিরক্তিকর। এইজন্য ৮০ টি ক্যারেক্টার এর লাইন এ লিখতে হবে।


 


ফাকা line এবং Indentation


কোন কারন ছাড়া ফাকা লাইন করা উচিত নয়।


বড় বড় কোড এর জন্য তা ব্যবহার করা যাবে।


Indentation এর ক্ষেত্রে ট্যাব এর পরিবর্তে ২ টি স্পেস ব্যবহার করতে হবে।


কোন কারন ছাড়া ফাকা জায়গা এবং Indentation ব্যবহার করা উচিত নয়।


 


প্রয়োজনীয় নেই




 <body>

  <h1>Famous Cities</h1>

  <h2>Tokyo</h2>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>




 


ভাল




<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>




 


টেবিল এর উদাহরণ




 <table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>




 


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




 <ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>




 


<html> এবং body ট্যাগ বাদ দেওয়া


এইচটিএমএল ৫ এ <html>এবং <body> ট্যাগ বাদ দেওয়া হয়েছে


এইচটিএমএল ৫ এর ক্ষেত্রে উদাহরণ




 <!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>




 


আমরা কখনই বলি না <html>এবং <body> ট্যাগ বাদ দেওয়ার জন্য।


<html> হল ডকুমেন্ট এর রুট। পেজ এর ভাষাকে এর মাঝে নির্দিষ্ট করে দিতে হয়।




<!DOCTYPE html>
<html lang="en-US">




ল্যাঙ্গুয়েজ ডিক্লায়ার করা এসেম্বিলি অ্যাপলিকেশন (স্ক্রিণ রিডার) এবং সার্চ ইঞ্জিন এর জন্য গুরুত্বপূর্ণ ।


<html>এবং <body> ট্যাগ বাদ দেওয়া DOM এবং এক্সএমএল সফটওয়্যার ক্র্যাশ এর কারণ হতে পারে।


পুরাতন ব্রাউজার (IE9) এরর দেখাতে পারে যদি <body> না ব্যবহার না করা হয়।


 


<head> ট্যাগ কি বাদ দেওয়া


এইচটিএমএল ৫ এর ক্ষেত্রে এটি ঠিক আছে।


ডিফল্ট ভাবে ব্রাউজার বডি সেকশন এর পূর্বে সকল উপাদান যোগ করে হেড সেকশন এর মধ্যে । সুতরাং <head> ট্যাগ কে বাদ দেওয়া যেতে পারে।


 


উদাহরণ




<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>




 


Meta data


এইচটিএমএল ৫ এ <title> এলিমেন্ট অত্যাবশ্যকীয়। টাইটেলকে যথাসম্ভব অর্থবহ করুন।






<title>HTML5 Syntax and Coding Style</title>






 


সঠিকভাবে search engine এ ইনডেক্স করার ক্ষেত্রে ডকুমেন্ট এর মধ্যে ভাষা এবং ক্যারেক্টার encode কে ডিফাইন করে দিতে হবে




<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>




 


এইচটিএমএল কমেন্ট


ছোট কমেন্ট এক লাইনে লেকা যেতে পারে। <!–এই খানে লিখতে হবে–>




<!-- This is a comment -->




 


অনেক বড় কমেন্ট হলে আলাদা আলাদা লাইন এ লিখতে হবে।




<!--
 This is a long comment example. This is a long comment example. This is a long comment example.
 This is a long comment example. This is a long comment example. This is a long comment example.
 -->




লম্বা কমেন্ট একাধিক লাইনে ভেঙ্গে লিখলে বুঝতে সুবিধা হয়।


 


স্টাইল শিট


Style শিট লিঙ্ক করার ক্ষেত্রে সাধারন syntax ব্যবহার করুন




<link rel="stylesheet" href="styles.css">




 


ছোট নিয়ম এক লাইন এ লিখতে হবে




p.into {font-family:"Verdana"; font-size:16em;}




 


বড় নিয়ম কয়েকটি লাইন এ লিখতে হবে




body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}




 


    

  • ব্রাকেট এর শুরুর আগে একটা স্পেস ব্যবহার করতে হবে,
    • 

  • indentation এ দুইটি স্পেস ব্যবহার করতে হবে,
    • 

  • প্রপার্টি এবং এর ভ্যালুর মাঝে কোলন এর পাশাপাশি একটি স্পেস ব্যবহার করতে হবে,
    • 

  • কমা এবং সেমিকোলন এর পরে একটা স্পেস ব্যবহার করতে হবে,
    • 

  • প্রত্যেক জোড়া প্রপার্টি ভ্যালু এর পরে সেমিকোলন ব্যবহার করতে হবে,
    • 

  • কোটেশন ব্যবহার করতে হবে যদি ভ্যালু এর মাঝে একটা স্পেস থাকে,
    • 

  • ৮০ ক্যারেক্টার এর উপরে কোন লাইনে রাখা যাবে না।
    • 



যেকোনো ধরনের লেখার ক্ষেত্রে স্পেস এর পরে কমা বা সেমিকোলন যুক্ত করা সাধারন নিয়ম।


 


এইচটিএমএল এর মধ্যে javascript লোড করা


সাধারন syntax ব্যবহার করে external javascript লোড করা যায়। এর জন্য কোন attribute এর দরকার পরে না।




<script src="myscript.js">




 


Javascript দিয়ে এইচটিএমএল কে অ্যাক্সেস করা


যদি এইচটিএমএল স্টাইল যদি পরিপাটি না হয় তাহলে javascript এ এরর আসতে পারে। এই দুইটি statement দুই ধরনের ফলাফল দেখাবে




var obj = getElementById("Demo")


var obj = getElementById("demo")




যদি সম্ভব হয় এইচটিএমএল এর উপাদানের সাথে javascript যোগ করার পর উপাদানের একই নাম ব্যবহার করতে হবে।


 


ফাইল এর নামের ক্ষেত্রে ছোট হাতের অক্ষর ব্যবহার


ফাইল এর নাম করনের ক্ষেত্রে অনেক ওয়েব সার্ভার কেস এর ব্যাপারে সক্রিয় (apache , unix)


london.jpg কখনই London.jpg নামে অ্যাক্সেস হবে না


অন্যান্য ওয়েব সার্ভার যেমন (Microsoft, IIS) খুব বেশি সক্রিয় না


London.jpg  কে London.jpg বা london.jpg নামে অ্যাক্সেস করা যাবে।


যদি আপনি বড় ছোট হাতের অক্ষর একসাথে ব্যবহার করেন তাহলে অত্যন্ত সামঞ্জস্যপূর্ণ হতে হবে।


যদি আপনি সংবেদনশীল নয় এমন একটি সার্ভার থেকে সংবেদনশীল এমন একটি সার্ভার এ যান তাহলে ছোট ছোট এরর আপনার ওয়েব পেজকে নষ্ট করে দিতে পারে।


এই সকল সমস্যা থেকে প্রতিকারের জন্য ছোট হাতের অক্ষর ব্যবহার করতে হবে।


 


File extensions


এইচটিএমএল ফাইল এর এক্সটেনশন হল .html ( বা .htm)


সিএসএস ফাইল এর এক্সটেনশন হল .css


Javascript ফাইল এর এক্সটেনশন হল .js


 


						
						
						
		

		
			    
    	




 
            

                


            

            		

                



		
	

    
    			    	

            

            	Apr
                20
                            

                    

            
		        

			
				HTML5 এ রূপান্তর (HTML5 Migration)            
			        

		
					    
    		
				

			
													
							
												
								
HTML5 এর ধারবাহিক টিউটোরিয়ালে আপনাকে স্বাগতম। আজ আমরা আলোচনা করব Migration from HTML4 to HTML5 নিয়ে। আজ আমরা শিখবো কিভাবে একটি typical HTML4 page কে typical HTML5 page এ পরিনত করা যায় আগের সকল কিছু অপরিবর্তিত রেখে।


 








Typical HTML4




Typical HTML5








<div id=”header”>




<header>








<div id=”menu”>




<nav>








<div id=”content”>




<section>








<div id=”post”>




<article>








<div id=”footer”>




<footer>








 


Typical HTML4


বলে রাখা ভাল আপনি একই নিয়ম ব্যাবহার করে HTML5 থেকে HTML4 এবং XHTML এ পরিবর্তন করতে পারবেন। এখন একটা Typical HTML4 Page উদাহরণ দেখাই-




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>HTML4</title>
 <style>
   body {font-family:Verdana,sans-serif;font-size:0.8em;}
   div#header,div#footer,div#content,div#post 
   {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
   div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
   div#content {background-color:#ddd;}
   div#menu ul {margin:0;padding:0;}
   div#menu ul li {display:inline; margin:5px;}
 </style>
 </head>
 <body>
 
 <div id="header">
   <h1>Monday Times</h1>
 </div>
 
 <div id="menu">
   <ul>
     <li>News</li>
     <li>Sports</li>
     <li>Weather</li>
   </ul>
 </div>
 
 <div id="content">
 <h2>News Section</h2>
 
 <div id="post">
   <h2>News Article</h2>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
 </div>
 
 <div id="post">
   <h2>News Article</h2>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
 </div>
 
 </div>
 
 <div id="footer">
   <p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
 </div>
 
 </body>
 </html>




 


যেভাবে HTML5 Doctype পরিবর্তন করবেন


HTML4 doctype:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">




 


HTML5 doctype:




<!DOCTYPE html>




 


যেভাবে HTML5 Encoding পরিবর্তন করবেন


HTML4:




<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″>




 


HTML5:




<meta charset=”utf-8″>




 


						
						
						
		

		
			    
    	




 


                



		
	

    
    			    	

            

            	Apr
                19
                            

                    

            
		        

			
				HTML5 এর শব্দার্থিক উপাদানসমূহ (HTML5 Semantic Elements)            
			        

		
					    
    		
				

			
													
							
												
								
HTML5 এর ধারবাহিক টিউটোরিয়ালে আপনাকে স্বাগতম। আজ আমরা আলোচনা করব HTML5 Semantic Elements নিয়ে। Semantics কে আমরা বলতে পারি ভাষার অর্থ  বিষয়ক গবেষণা।


এখন প্রশ্ন হল Semantic Elements কি?


একটি Semantic Elements এর প্রধান কাজ হল পরিষ্কারভাবে ব্রাউজার এবং ডেভেলপার উভয় এর অর্থ বর্ণনা করা।


non-semantic elements এর উদাহরণ:


<div> and <span> – Tells nothing about its  content.


semantic elements এর উদাহরণ:


<form>, <table>, and <img> – Clearly defines its content.


Semantic Elements কোন কোন Browser Support করে?


এক কথাই বলা যাই HTML5 semantic elements আধুনিক সকল Browser এই  Support করে।


নতুন উপাদানসমূহ:






<article>
নিবন্ধ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়




<aside>
সাধারণত সাইডবারের জন্য ব্যবহৃত হয়




<bdi>
একটি ভিন্ন দিক ফরম্যাটে লেখা প্রকাশের জন্য ব্যবহৃত হয়




<command>
কমান্ড বাটন সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়




<details>
অতিরিক্ত বিশদ ব্যাখ্যা ব্যবহারকারীর প্রদর্শন অথবা আড়াল করতে ব্যবহৃত হয়




<dialog>
ডায়লগ বক্স অথবা উইন্ডোতে সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়




<summary>
<details> উপাদানের সারমর্ম প্রদর্শনের জন্য ব্যবহৃত হয়




<figure>
চিত্রাঙ্কনের, ডায়াগ্রামে, ছবি, কোড তালিকা ইত্যাদির স্বয়ংসম্পূর্ণ বিষয়বস্তু নির্ধারণ করা হয়




<figcaption>
<figure> উপাদান জন্য ক্যাপশন ব্যবহৃত হয়




<footer>
একটি বিভাগের জন্য পাদচরণ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়




<header>
একটি বিভাগের জন্য হেডার সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়




<hgroup>
যখন একাধিক মাত্রার শিরোনাম থাকে, তখন <h1> থেকে <h6> উপাদানের সমষ্টিকে বুঝায়




<mark>
চিহ্নিত / হাইলাইট টেক্সট সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়




<meter>
একটি পরিচিত পরিসীমার মধ্যে স্কেলের পরিমাপ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়




<nav>
নেভিগেশন লিঙ্কগুলি সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়




<progress>
একটি টাস্ক অগ্রগতি প্রতিনিধিত্ব করে




<ruby>
রুবি টীকা সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়




<rt>
অক্ষরের একটি ব্যাখ্যা / উচ্চারণ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়




<rp>
Ruby টীকা সমর্থন করে না তা ব্রাউজারে দেখানোর জন্য ব্যবহৃত হয়




<section>
নথিতে একটি অধ্যায় সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়




<time>
তারিখ / সময় প্রদর্শনের জন্য ব্যবহৃত হয়




<wbr>
লাইন বিরতির জন্য ব্যবহৃত হয়




<audio>
শব্দ যুক্ত করার জন্য ব্যবহৃত হয়




<video>
ভিডিও যুক্ত করার জন্য ব্যবহৃত হয়




<source>
<video> এবং <audio> জন্য একাধিক মিডিয়া রিসোর্স যুক্ত করার জন্য ব্যবহৃত হয়




<embed>
একটি বহিরাগত অ্যাপ্লিকেশন অথবা ইন্টারেক্টিভ বিষয়বস্তুর জন্য একটি ধারক




<track>
<video> এবং <audio> এর জন্য টেক্সট গানগুলি সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়




<canvas>
গ্রাফিক্স আঁকতে ব্যবহৃত হয়




<datalist>
ইনপুট নিয়ন্ত্রণ জন্য পূর্ব নির্ধারিত অপশনের একটি তালিকা নির্দিষ্ট করে




<keygen>
key-জুটি জেনারেটরের জন্য ব্যবহৃত হয়




<output>
হিসাবের ফলাফল ব্যাখ্যা করার জন্য ব্যবহৃত হয়






 


						
						
						
		

		
			    
    	




 


                



		
	

    
    			    	

            

            	Apr
                19
                            

                    

            
		        

			
				ডট নেট এর প্রধান টেকনোলজি সমূহ  । .NET basic technologies overview            
			        

		
					    
    		
				

			
													
							
												
								
ডট নেট প্রযুক্তির সারসংক্ষেপ


রিদওয়ান বিন শামীম


নতুনদের জন্য বিশেষ করে যারা প্রোগ্রামিঙে নতুন তাদের জন্য ডট নেট প্রযুক্তির বিভিন্ন দিক বুঝতে পারাটা প্রথম দিকে একটু কঠিন মনে হতে পারে, এই প্রবন্ধে আমরা ডট নেট প্রযুক্তির মৌলিক বিষয়গুলো নিয়ে আলোচনা করছি।


ভিজুয়াল স্টুডিয়ো (Visual Studio) হল মাইক্রোসফটের ডট নেট ডেভলাপমেন্টের একটি IDE, যার সর্বশেষ ভার্সন হল Visual Studio10, এটিরও কয়েকটি প্রকরণ যেমন Visual Studio Express, Visual Studio Ultimate এরকম আছে।


ডট নেট প্রোগ্রাম লেখার জন্য সবচেয়ে উপযোগী হল সি শার্প (C#) ল্যাঙ্গুয়েজ, সি শার্প অনেকটা সি ল্যাঙ্গুয়েজ ভিত্তিক প্রোগ্রামিং ল্যাঙ্গুয়েজ যেটি জাভা থেকে অনেক সূত্র নেয় কিন্তু সর্বশেষ কয়েকটি ভার্সনে তারা ভিন্ন শাখা ব্যবহার করছে। VB.NET ভার্সনের আগে সি শার্প নতুন ভাষাগত বৈশিষ্ট্য অর্জন করতে শুরু করেছিল কিন্তু বর্তমানে দুটি ভাষা পরস্পরের সমকক্ষ হয়ে গেছে। সি শার্প পরবর্তীতে গতিশীল, বিবৃতিমূলক ও ফাংশনাল দৃষ্টান্ত ব্যবহার করা শুরু করেছে।


VB.NET সি শার্পের মতই কাজ করে কিন্তু এটি চিহ্নের তুলনায় শব্দনির্ভর, এটি কোন বিবৃতিকে আলাদা করার জন্য নতুন লাইনের চিহ্ন ব্যবহার করে, যেটি কয়েক লাইনের বিবৃতির ক্ষেত্রে সমস্যা সৃষ্টি করে।


F# হল অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং ল্যাঙ্গুয়েজ যা মূলত OCaml নির্ভর, যা এলগরিদমিক কাজের জন্য সবচেয়ে উপযোগী।


Iron Ruby এবং Iron Python হল Ruby ও Python এর ওপেন সোর্স প্রকরণ যা ডট নেটের বিভিন্ন ভাষার সমন্বয়কারক .NET Common Language Runtime (CLR) এ কার্যকর। IronRuby ও IronPython ব্যবহারের ক্ষেত্রে এই সমন্বয় আবশ্যক নয় কিন্তু সুবিধাজনক অপশন।


.NET CLR একটি ভার্চুয়াল মেসিন যার ভেতরে ডট নেট কোড চলে। যখন আমরা কোন ডট নেট প্রোগ্রাম তৈরি করি তা কোন নেটিভ বাইনারি করে না, তা .NET CLR ভিত্তিক বাইনারি তৈরি করে। এর মানে হল যেকেউ একটি অন্য প্ল্যাটফরমের জন্য .NET CLR লিখে তাতে ডট নেট অ্যাপ্লিকেশন চালাতে পারে, রিকম্পাইল না করেই। .NET CLR এর অল্টারনেটিভ হল মনো(mono), যা .NET CLR এর সাথে সাযুজ্যপূর্ণ কিন্তু এর প্রয়োগের ফলাফল ডট নেট ফ্রেমওয়ার্কে শতভাগ সাযুজ্যপূর্ণ নয়।


.NET Framework হল তথ্যভাণ্ডারের একটি সেট যা ডট নেট প্রোগ্রামের সবচেয়ে কমন ফাংশনালিটি প্রদান করে, .NET Frameworkএ অজস্র অবজেক্ট ও ডজন ডজন নেমস্পেস সংগৃহীত থাকে। দক্ষ ডট নেট ডেভলাপার হতে গেলে ডট নেট ফ্রেমওয়ার্কের কোথায় কি আছে তা জানা জরুরী যাতে কাজের সময় একদম প্রথম থেকে খুঁজতে না হয়।


WinForms হল ডেক্সটপ এপ্লিকেশনে UI নিয়ে কাজ করার জন্য ডট নেটের একটি গতানুগতিক পদ্ধতি, অবজেক্ট তৈরির জন্য নিয়মতান্ত্রিকভাবে কোড ব্যবহার করা হয় যা UI প্রোগ্রাম চালায়, এবং একই কোড নিপুনভাবে সমস্ত প্রোগ্রাম চালায়।WinForms ইভেন্ট হ্যান্ডেলিং কার্যপ্রণালীর মধ্যে ট্রিগার কোডিঙের মাধ্যমে চালিত হয়। এটি Windows Presentation Foundation (WPF) এক তত্ত্বাবধায়নে অপেক্ষাকৃত দ্রুত কাজ করে।


WPF হল Windows Vista ও .NET 3.0এ কার্যকর প্রযুক্তির সেট যা UI কে এক্সএমএল এর অধীনে XAML নামক একটি ভাষার সাহায্যে প্রকাশ করতে দেয়, WPF হল সিলভারলাইট প্রযুক্তির ভিত্তি যা ডেভলাপারদের WinForms এর চেয়ে অনেক সহজে এনিমেশন, ট্রান্সলেসন ও অন্যান্য ইফেক্ট তৈরি করার সুযোগ করে দেয়। Visual Studio 2008তে WPF নিয়ন্ত্রণ অতটা সহজ ছিল না কিন্তু Visual Studio 2010 তে অনেক সহজে এটি ব্যবহার করা যাচ্ছে , XAML বা Expression Blend ইত্যাদি ভাষা শেখার দরকার পরছে না।


সিলভারলাইট হল ডট নেট প্রোগ্রামের পোর্টেবল প্যাকেজ, যা WPF কে UI হিসেবে ব্যবহার করে। বর্তমানে এটি Windows এবং Mac OS X এ চলছে Microsoft-made binaries দ্বারা, আর লিনাক্সে এটি Moonlight application দ্বারা চলছে। যদিও সিলভারলাইট ব্রাউসারের প্লাগিনে বেশি সাযুজ্যপূর্ণ, এটির এপ্লিকেশনগুলো ব্রাউসার ছাড়াও কাজ করে, এবং লোকাল অপারেটিং সিস্টেমে ভালই রেসপন্স করে থাকে।


WinForms যেমন ডেক্সটপ এপ্লিকেশন তৈরিতে সহায়তা করে ওয়েবে সেই কাজ করে ASP.NET, এটি ওয়েব ডেভলাপমেন্টে WinForms model সংস্থাপনের চেষ্টা করে। ASP.NET ডেভলাপারের অনেক কাজ নিজেই করে দেয়, অনেক কর্মপ্রণালীর নিয়ন্ত্রণ নিয়ে নেয়। ডেভলাপারের অনেক কাজ ASP.NET MVC তে শিফট হয়ে যায়।


ASP.NET MVC, WPF এর মত ওয়েব এপ্লিকেশন লেখার অনেকটা স্বয়ংক্রিয় একটি পদ্ধতি যা ডেভলাপারের অনেক কাজ করে দেয়, ASP.NET এর তুলনায়। Ruby on Rails নামক একটি প্রোগ্রামিং ভাষা থেকে এর মূল ধারণা নেয়া হয়েছে। “prefers convention over configuration” হল এর মূলমন্ত্র, এবং separation of concernsবা ঝুঁকির বিন্যাসই এর প্রধান লক্ষ। ASP.NET MVC যত পরিনত হয় তত তা ওয়েব ডেভলাপমেন্ট প্রোজেক্টের জন্য সহায়ক হয়ে উঠে।


 


 


						
						
						
		

		
			    
    	




 


                



		
	

    
    			    	

            

            	Apr
                18
                            

                    

            
		        

			
				HTML5 এর নতুন উপাদান (HTML5 New Elements)            
			        

		
					    
    		
				

			
													
							
												
								
মাসুদ


 


HTML5 New Elements গুলো এবং এদের কাজগুলো নিম্নে দেয়া হল






<article>
একটা ডকুমেন্ট এর মধ্যে আর্টিকেল বোঝাতে এই Element ব্যবহৃত হয়।




<aside>
কোন কন্টেন্ট যদি পেজ কন্টেন্ট এর থেকে আলাদা হয় তাহলে তা এই Element দ্বারা বোঝানো হয়।




<bdi>
কতগুলো বর্নের মধ্যে যদি নির্দিষ্ট কতগুলো বর্ন আলাদা ফরমেটে হয় তাহলে এই Element দ্বারা বোঝানো হয়।




<details>
এর দ্বারা অতিরিক্ত বিবরন ব্যবহারকারী আড়াল করে রাখতে পারে।




<dialog>
কোন ডায়লগ বক্স নির্দেশ করে।




<figcaption>
<figure> element এর caption নির্দেশ করে।




<footer>
কোন ডকুমেন্ট এর footer নির্দেশ করে।




<header>
কোন ডকুমেন্ট এর header নির্দেশ করে।




<main>
এর দ্বারা কোন ডকুমেন্ট এর প্রধান কন্টেন্ট নির্দেশ করা হয়।




<mark>
এর দ্বারা কোন ডকুমেন্ট এর সিলেক্ট করা বর্ন বোঝানো হয়।




<menuitem>
এর দ্বারা কোন পপ-আপ মেনু থেকে যে কোন কমান্ড সিলেক্ট করতে পারে।




<meter>
এর দ্বারা কোন ডকুমেন্ট এর কোন নির্দিষ্ট রেঞ্জ এর পরিমাপ বোঝানো হয়।




<nav>
এর দ্বারা কোন ডকুমেন্ট এর নেভিগেশন লিঙ্কস গুলো বোঝানো হয়।




<progress>
এর দ্বারা কোন ডকুমেন্ট কার্যপ্রক্রিয়া প্রকাশ করা হয়।




<section>
কোন একটি ডকুমেন্ট এর নির্ধারিত সেকশন প্রকাশ করে।




<summary>
এর দ্বারা <details> element এর বিস্তারিত অংশ দেখা যায়।




<time>
সময় ও তারিখ নির্দেশ করে।




<wbr>
সম্ভাব্য লাইন বিরতি প্রকাশ করে।






						
						
						
		

		
			    
    	




 


                



		
	

    
    			    	

            

            	Apr
                17
                            

                    

            
		        

			
				এইচটিএমএল ৫ ব্রাউজার সাপোর্ট (HTML5 Browser Support)            
			        

		
					    
    		
				

			
													
							
												
								
শরিফুল ইসলাম

Job category-Php Coder


এইচটিএমএল ৫ ব্রাউজার সাপোর্ট


এইচটিএমএল ৫ সকল আধুনিক ব্রাউজার সাপোর্ট করে। সকল নতুন এবং পুরাতন ব্রাউজার অটোমেটিক ভাবে অচেনা elements গুলোকে ইনলাইন element হিসেবে চিহ্নিত করে। এই কারনে আপনি অচেনা element গুলোকে চিহ্নিত নিয়ন্ত্রণ করার জন্য পুরাতন ব্রাউজার গুলো শিখতে পারেন। আপনি অনেক আগের ভার্সন IE6(windows XP 2001) শিখতে পারেন যা এইচটিএমএল এর অজানা element গুলোকে নিয়ন্ত্রণ করতে পারে।


 


এইচটিএমএল ৫ element গুলোকে ব্লক element হিসেবে ডিফাইন করা


এইচটিএমএল৫ ৮টি নতুন element কে ডিফাইন করে থাকে। সবগুলোই ব্লক লেভেল elements। পুরাতন ব্রাউজার গুলোকে সঠিক ফরম্যাট এ ব্যবহার করার জন্য সিএসএস এর ডিসপ্লে প্রপার্টি কে ব্লক আকারে সেট করতে হয়।


উদাহরণ


Example




header, section, footer, aside, nav, main, article, figure {

display: block;

}




 


নতুন element এইচটিএমএল এ যোগ করা


ব্রাউজার এর কৌশল অনুযায়ী এইচটিএমএল এর যেকোনো নতুন element কে যোগ করতে পারেন । নিচের উদাহরণ এ একটি নতুন element <myHero> যোগ করা হয়েছে




<!DOCTYPE html>
 <html lang="en">
 <head>
 <title>HTML5 Skeleton</title>
 <meta charset="utf-8">
 
 <!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
 </script>
 <![endif]-->
 
 <style>
 body {font-family: Verdana, sans-serif; font-size:0.8em;}
 header,nav, section,article,footer
 {border:1px solid grey; margin:5px; padding:8px;}
 nav ul {margin:0; padding:0;}
 nav ul li {display:inline; margin:5px;}
 </style>
 </head>
 <body>
 
 <header>
   <h1>HTML5 SKeleton</h1>
 </header>
 
 <nav>
 <ul>
   <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
   <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
   <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
 </ul>
 </nav>
 
 <section>
 
 <h1>Famous Cities</h1>
 
 <article>
 <h2>London</h2>
 <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>
 </article>
 
 <article>
 <h2>Paris</h2>
 <p>Paris is the capital and most populous city of France.</p>
 </article>
 
 <article>
 <h2>Tokyo</h2>
 <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
 and the most populous metropolitan area in the world.</p>
 </article>
 
 </section>
 
 <footer>
 <p>&copy; 2014 W3Schools. All rights reserved.</p>
 </footer>
 
 </body>
 </html>




 


 


						
						
						
		

		
			    
    	




 


                



		
	

    
    			    	

            

            	Apr
                16
                            

                    

            
		        

			
				HTML 5 এর পরিচিতি (HTML5 Introduction)            
			        

		
					    
    		
				

			
													
							
												
								
আতিক হাসান


ওয়েবপেজ ডিজাইন এন্ড ডেভেলপার


 


HTML 5 এর পরিচিতি


HTML 4 এর উন্নত ভার্সনই হল HTML 5।HTML 5 এ নতুন কিছু ট্যাগ, এলিমেন্ট, এট্রিবিউট যোগ করা হয়েছে এবং পুরনো কিছু বাদ দেয়া হয়েছে।


HTML 5 এর উদাহরনঃ




<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Title of the document</title>
 </head>
 
 <body>
 Content of the document......
 </body>
 
 </html>




 


 


HTML 5 এ নতুন যা পরিবর্তন আনা হয়েছে


HTML 5 এ DOCTYPE ঘোষণা খুবই সহজ। যেমনঃ-




<!DOCTYPE html>




 


 


HTML 5 এ Character Encoding  ঘোষণা করাও খুবই সহজ।যেমনঃ-




<meta charset=”UTF-8″>




 


 


HTML 5 এর নতুন কিছু  Elements


HTML 5 এ খুব বেশী ব্যাবহৃত নতুন এলিমেন্টগুলো হচ্ছেঃ


Semantic Elements যেমন- <header>, <footer>, <article>, and <section>.


Form control attributes যেমন- number, date, time, calendar, range and required.


Graphic Elements যেমন- <svg> and <canvas>.


Multimedia Elements: যেমন-  <audio> and <video>.


 


HTML5 API’s (Application Programming Interfaces)


HTML 5 এর প্রধান নতুন API’s হচ্ছেঃ


    

  • HTML Geolocation
    • 

  • HTML Drag and Drop
    • 

  • HTML Local Storage
    • 

  • HTML Application Cache
    • 

  • HTML Web Workers
    • 

  • HTML SSE
    • 



 


HTML 5 থেকে যেসকল এলিমেন্ট বাদ দেয়া হয়েছে






এলিমেন্ট
HTML 4 এলিমেন্টের পরিবর্তে লেখা হয়




<acronym>
<abbr>




<applet>
<object>




<basefont>
CSS




<big>
CSS




<center>
CSS




<dir>
<ul>




<font>
CSS




<frame>





<frameset>





<noframes>





<strike>
CSS




<tt>
CSS






 


 


						
						
						
		

		
			    
    	




 


                



		
	

    
    			    	

            

            	Apr
                15
                            

                    

            
		        

			
				এইচটিএমএল ইনপুট বৈশিষ্ট্যাবলী (HTML Input Attributes)            
			        

		
					    
    		
				

			
													
							
												
								
শরিফুল ইসলাম

Job category-Php Coder


 


ভ্যালু attribute


ফর্ম এর শুরুতে ইনপুট ফিল্ড এর জন্য একটি প্রাথমিক ভ্যালু সেট করার জন্য value attribute ব্যবহার করা হয়


উদাহরণ




<form action="">
 First name:<br>
 <input type="text" name="firstname" value="John">
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>




 


ফলাফল




First name:

Last name:






 


 


কেবল পঠনযোগ্য অ্যাট্রিবিউট (Readonly attribute)


ইনপুট ফিল্ডের ভ্যালু শুধু পরতে পারবে কিন্তু কোন প্রকার পরিবর্তন করতে পারবে না এই readonly attribute দ্বারা


উদাহরণ




<form action=””>

First name:<br>

<input type=”text” name=”firstname” value=”John” readonly>

<br>

Last name:<br>

<input type=”text” name=”lastname”>

</form>




এই attribute এর জন্য কোন মান লাগবে না শুধু লিখতে হবে readonly=”readonly”


 


ফলাফল




First name:

Last name:






 


নিষ্ক্রিয়করণ অ্যাট্রিবিউট (Disabled attribute)


ইনপুট ফিল্ডের কোন ডাটা এডিট করা যাবে না,বাবহার করা যাবে না, ক্লিক করা যাবে না এবং সাবমিট করা যাবে না এই রকম disable করে রাখার জন্য এই disable attribute ব্যবহার করা হয়


উদাহরণ




<form action="">
 First name:<br>
 <input type="text" name="firstname" value="John" disabled>
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>




এই attribute এর কোন মানের দরকার পরে না (disabled=”disabled”)


 


ফলাফল




First name:

Last name:






 


আকার অ্যাট্রিবিউট (Size attribute)


ইনপুট ফিল্ডের এর character এর আকার size attribute দ্বারা করা হয়


উদাহরণ




 <form action="">
 First name:<br>
 <input type="text" name="firstname" value="John" size="40">
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>




 


ফলাফল




First name:

Last name:






 


সর্বচ্চোআকার অ্যাট্রিবিউট (Maxlength attribute)


ম্যাক্সিমাম কতটি ক্যারেক্টার হতে পারে এর জন্য আমরা maxlength attribute ব্যবহার করব।


উদাহরণ




<form action="">
 First name:<br>
 <input type="text" name="firstname" maxlength="10">
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>




 


ফলাফল




First name:

Last name:






Maxlength দ্বারা নির্দিষ্ট character এর বেশি কোন ওয়ার্ড সাপোর্ট করে না। এই attribute কোন ফিডব্যাক প্রদান করে না। যদি ইউজার কে আমরা alert করতে চাই তাহলে আমাদের javascript বাবকার করতে হবে


ইনপুট নিষেধাজ্ঞা অব্যর্থ হয় না। javascript এর মাধ্যমে অবৈধ ভাবে ইনপুট করার অনেক উপায় আছে। নিরাপত্তার জন্য নিষেধাজ্ঞার পাশাপাশি রিসিভার (সার্ভার) দ্বারা চেক করা আবশ্যক.


 


এইচটিএমএল ৫ এর attribute গুলো


    

  • autocomplete
    • 

  • autofocus
    • 

  • form
    • 

  • formaction
    • 

  • formenctype
    • 

  • formmethod
    • 

  • formnovalidate
    • 

  • formtarget
    • 

  • height and width
    • 

  • list
    • 

  • min and max
    • 

  • multiple
    • 

  • pattern (regexp)
    • 

  • placeholder
    • 

  • required
    • 

  • step
    • 



এবং ফর্ম এর জন্য


    

  • Autocomplete
    • 

  • Novalidate
    • 



 


স্বয়ংকৃয়ভাবে সম্পূর্ণ বৈশিষ্ট্য (Autocomplete attribute)


কোন ইনপুট ফিল্ড আপনা থেকেই পরিপূর্ণ করবে কিনা এর জন্য autocomplete অন বা অফ ব্যবহার করা হয়। যদি তা অন করা থাকে তাহলে ব্রাউজার ইনপুট ফিল্ডের কোন ভ্যালু insert করার আগে আগেই অটোমেটিক পুরণ হয়ে যাবে যদি আগে এই ভ্যালুটি ইনপুট করা হয়ে থাকে। ফর্মের এর ক্ষেত্রে autocomplete অন রাখা সম্ভব নির্দিষ্ট কিছু ইনপুট ফিল্ডের এর জন্য তা অফ করে রাখা যাবে। autocomplete attribute ফর্মের এর ক্ষেত্রে কাজ করে এবং ইনপুট ফিল্ড এর ভিন্ন ভিন্ন ধরন যেমন text, search, url, tel, email, password, date picker, range, এবং color এই সব ক্ষেত্রে কাজ করে।


উদাহরণ




<form action="action_page.php" autocomplete="on">
 First name:<input type="text" name="fname">


Last name: <input type="text" name="lname">


E-mail: <input type="email" name="email" autocomplete="off">


<input type="submit">
 </form>




কিছু কিছু ব্রাউজার এর ক্ষেত্রে কাজের জন্য autocomplete ফাংশন চালু করা লাগতে পারে।


 


ফলাফল




First name:Last name: E-mail: 








 


Novalidate attribute


ফর্ম ডাটা সাবমিট করার পর এটাকে অবৈধ ঘোষণা করার জন্য এই attribute ব্যবহার করা হয়


উদাহরণ




<form action=”action_page.php” novalidate>

E-mail: <input type=”email” name=”user_email”>

<input type=”submit”>

</form>




 


ফলাফল




E-mail: 






 


অটোফোকাস বৈশিষ্ট্য (Autofocus attribute)


কোন ইনপুট ফিল্ড পেজ লোড হওয়ার সাথে সাথে ওই ঘরে কার্সর আনার জন্য এই attribute ব্যবহার করা হয়


উদাহরণ




First name:<input type=”text” name=”fname” autofocus>




 


ফলাফল




First name:Last name: 






এইখানে firstname এর ঘরে কার্সর দেখা যাবে।


 


ফর্ম attribute


একাধিক ফর্মের input ফিল্ড কে একটি কমন ফর্ম এর ID দিয়ে চিহ্নিত করার জন্য এই attribute ব্যবহার করা হয়


উদাহরণ


যদিও ফর্ম এর বাইরে একটি ইনপুট ফিল্ড ব্যবহার করা হচ্ছে কিন্তু তারপরও এটি ফর্মের একটি অংশ




<form action="action_page.php" id="form1">
 First name: <input type="text" name="fname">


<input type="submit" value="Submit">
 </form>


Last name: <input type="text" name="lname" form="form1">




 


ফলাফল




First name: 


The “Last name” field below is outside the form element, but still part of the form.


Last name: 




 


 


Formaction attribute


Form action attribute একটি ফর্ম এর ফাইল এর URL চিহ্ন করে যেখানে যেয়ে ইনপুট ডাটা সাবমিট হবে। এই attribute দুটি টাইপ এ ব্যবহার করা হয় type=”submit”, type=”image”


উদাহরণ


ভিন্ন ভিন্ন action এ দুইটি বাটন দ্বারা দেখানো হল




<form action=”action_page.php”>

First name: <input type=”text” name=”fname”>


Last name: <input type=”text” name=”lname”>


<input type=”submit” value=”Submit”>


<input type=”submit” formaction=”demo_admin.asp”

value=”Submit as admin”>

</form>




 


ফলাফল




First name: Last name: 








 


Formenctype attribute


যখন সার্ভার এ ফর্ম ডাটা সাবমিট করা হবে তখন তা কিভাবে encode করা হবে এর জন্য আমরা এই attribute ব্যবহার করব পোস্ট মেথড এর ক্ষেত্রে । type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।


উদাহরন


প্রথম সাবমিট বাটন ডিফল্ট encoded এবং দ্বিতীয় সাবমিট বাঁটন multipart/form-data হিসেবে encode করা হয়েছে




<form action=”demo_post_enctype.asp” method=”post”>

First name: <input type=”text” name=”fname”>


<input type=”submit” value=”Submit”>

<input type=”submit” formenctype=”multipart/form-data”

value=”Submit as Multipart/form-data”>

</form>




 


ফলাফল




First name: 






 


Formmethod attribute


ফর্ম ডাটা url এ পাঠানোর ক্ষেত্রে HTTP মেথড বোঝার জন্য এই attribute ব্যবহার করা হয় । type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।


উদাহরণ


দ্বিতীয় বাটন টি HTTP এই মেথড এর




<form action=”action_page.php” method=”get”>

First name: <input type=”text” name=”fname”>


Last name: <input type=”text” name=”lname”>


<input type=”submit” value=”Submit”>

<input type=”submit” formmethod=”post” formaction=”demo_post.asp”

value=”Submit using POST”>

</form>




 


ফলাফল




First name: Last name: 








 


Formnovalidate attribute


Input উপাদান কে সাবমিট করার পর তা অবৈধ ঘোষণা করার ক্ষেত্রে এই বুলিয়ান attribute ব্যবহার করা হয়। type=”submit” এই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।


উদাহরণ


দুইটি সাবমিট বাটন একটি validate ছাড়া অন্যটি validate সহ




<form action=”action_page.php”>

E-mail: <input type=”email” name=”userid”>


<input type=”submit” value=”Submit”>


<input type=”submit” formnovalidate value=”Submit without validation”>

</form>




 


ফলাফল




E-mail: 






 


Formtarget attribute


ফর্ম সাবমিট করার পর কোথায় আমরা এর প্রতিক্রিয়া দেখতে চাই তা আমরা এই attribute এর মাধ্যমে করতে পারি। type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।


উদাহরণ


ভিন্ন ভিন্ন টার্গেট এর জন্য দুইটি বাটন ব্যবহার করা হল




<form action=”action_page.php”>

First name: <input type=”text” name=”fname”>


Last name: <input type=”text” name=”lname”>


<input type=”submit” value=”Submit as normal”>

<input type=”submit” formtarget=”_blank”

value=”Submit to a new window”>

</form>




 


ফলাফল




First name: Last name: 








 


উচ্চতা এবং প্রস্থ অ্যাট্রিবিউট Height and width attribute


ইনপুট ফিল্ডের আকার নির্ধারণ করার জন্য এই attribute ব্যবহার করা হয়। type=”image” ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।


উদাহরণ


Width এবং height সহ একটি ইমেজ যুক্ত বাটন দেখানো হল




<input type=”image” src=”img_submit.gif” alt=”Submit” width=”48″ height=”48″>




 


ফলাফল




First name: Last name: 






 


তালিকা বৈশিষ্ট্য (List attribute)


<datalist> উপাদান যাতে ইনপুট করার জন্য কিছু pre-defned অপশন থাকবে


উদাহরণ


Pre-defined ভ্যালু সহ একটি ইনপুট ফিল্ড




<input list="browsers">


<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
 </datalist>




 


ফলাফল













 


ন্যূনতম, সর্বোচ্চ অ্যাট্রিবিউট (Min, max attribute)


একটি ইনপুট ফিল্ড এর মিনিমাম এবং ম্যাক্সিমাম ডাটা ইনপুট করার ক্ষেত্রে এই attribute গুলো ব্যবহার করা হয় ভিন্ন ভিন্ন ধরনের ইনপুট ব্যবহার করা যায় number, range, date, datetime, datetime-local, month, time এবং week।


উদাহরন


মিনিমাম এবং ম্যাক্সিমাম ভ্যালু সহ একটি উদাহরণ




Enter a date before 1980-01-01:
 <input type="date" name="bday" max="1979-12-31">


Enter a date after 2000-01-01:
 <input type="date" name="bday" min="2000-01-02">


Quantity (between 1 and 5):
 <input type="number" name="quantity" min="1" max="5">




 


ফলাফল




Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

Quantity (between 1 and 5):






 


একাধিক অ্যাট্রিবিউট (Multiple attribute)


ইনপুট ফিল্ডে একাধিক ডাটা সাবমিট করার ক্ষেত্রে এই বুলিয়ান attribute ব্যবহার করা হয়।দুই ধরনের ইনপুটে কাজ করা যায় ইমেইল, ফাইল।


উদাহরণ


এই ইনপুট ফিল্ড এ অনেকগুলো ইমেজ আপলোড করা যাবে




Select images: <input type="file" name="img" multiple>




 


ফলাফল




Select images: 






 


প্যাটার্ন অ্যাট্রিবিউট (Pattern attribute)


Regular expression এই ধরনের ডাটা ইনপুট করার ক্ষেত্রে আমরা এই attribute ব্যবহার করব। এতে ফরম্যাট দেওয়া থাকে সেই অনুপাতে ডাটা ইনপুট দিতে হয়। এই টাইপ গুলো হল text, search, url, tel, email এবং password।


উদাহরণ


এই ইনপুট ফিল্ড এ ৩ টা লেটার ইনপুট করা যাবে যেখানে কোন নাম্বার বা special character থাকবে না




Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">




 


ফলাফল




Country code: 






 


স্থানধারক অ্যাট্রিবিউট (Placeholder attribute)


ইনপুট ফিল্ড এ কোন কিছু ইনপুট করার আগে হালকা ভাবে কোন লেখা ডিসপ্লে করার জন্য এই attribute ব্যবহার করা হয়। এই টাইপ গুলো হল text, search, url, tel, email এবং password।


উদাহরণ




<input type="text" name="fname" placeholder="First name">




 


ফলাফল










 


আবশ্যক অ্যাট্রিবিউট (Required attribute)


কোন ইউজার যেন কোন নির্দিষ্ট ইনপুট ফিল্ড ফাকা না রেখে ফর্ম সাবমিট করে সেই জন্য আমরা এই attribute ব্যবহার করব। এই টাইপ গুলো হল text, search, url, tel, email, password, date pickers, numbers, checkbox, radio, file.।


উদাহরণ




Username: <input type="text" name="usrname" required>




 


ফলাফল




Username: 






 


ধাপ অ্যাট্রিবিউট (Step attribute)


ইনপুট ফিল্ড এ লিগাল নাম্বার ইনপুট দেওয়ার ক্ষেত্রে এই attribute টি ব্যবহার করা হয়। যেমন যদি স্টেপ ৩ হয় তাহলে লিগাল নাম্বার গুলো হবে -৩,০,৩,৬


এই attribute যেই ধরনের ইনপুট টাইপ গুলোর ক্ষেত্রে কাজ করতে পারে এইগুলো হল number, range, date, datetime, datetime-local, month, time এবং week.


উদাহরণ




<input type="number" name="points" step="3">




 


ফলাফল