Community project by students of the Faculty of Information Technology, University of Moratuwa, Sri Lanka.

10.2 වෙබ් අඩවියක අන්තර්ගතය (The structure and the composition of websites to organize pages and content)

 
 
මෙමපාඩමේදී ප්‍රධාන වශයෙන් වෙබ් අඩවියක අන්තර්ගතය පිළිබද අවධානය යොමු කරනවා.එහිදී ආරම්භක පිටුව (Home page),සම්බන්දිත පිටු (Link pages),අකුරු (Texts),චිත්‍රන (Graphics), ශ්‍රව්‍ය (Audio), දෘශය (Visuals),අධි සම්බන්දය (Hyperlinks) හා අන්තර්ගතය සංවිධානය කීරීම ඉතා වැදගත්.වෙබ් අඩවි යන අදහස ඇති වීම හා එහි පසුබිම පිළිබද පලවෙනි පාඩමේදී (10.1) ඔබට යම් අවබෝධ ලබාගන්න පුළුවන්.

 

ආරම්භක පිටුව (Home page)

වෙබ් අඩවියක (web site)ආරම්භක පිටුව කියල කියන්නේ Web Browser එකේ අදාළ වෙබ් අඩවියේ පළමුවෙන්ම පෙන්වන වෙබ් පිටුවයි.ආරම්භක වෙබ් පිටුවට ගොඩක් නම් භාවිතා වෙනවා Index page, Front page, Main page ඒ නම් විදියට පෙන්වන්න පුළුවන්.පහලින් ඇති වෙබ් පිටුව ආරම්භක වෙබ් පිටුවට උදාහරණයක්.මෙම අරාම්භක වෙබ් පිටුව තමයි වෙබ් අඩවියේ වඩා වැදගතම කොටස වෙන්නේ.පාරිබෝගිකයන් භාණ්ඩය හෝ සේවාව ගැන අවබෝධයක් ගන්නේ මෙම homepage එක නිරීක්ෂණය කිරීම මගිනි.පහත කරුණු ඊට අමතරව අඩංගු වීම වැදගත්.

1. වෙළදාම හෝ සමාගමක් හදුන්වදීම හා එමගින් සිදුවෙන්නේ කුමක්ද යන්න පැහැදිලි කරදීම.
2. පරිබෝගිකයන්ව තමන්ගේ සේවාවන් සදහා ඇතුලත් කරගැනීමට.
3. තොරතුරු සහ ප්‍රචාරණ සේවා ලබාදීමට.

 

වෙබ් ආරම්භක පිටුව

 

 

සම්බන්දිත පිටු (Link pages)

ආරම්භක වෙබ් පිටුවෙන් සම්බන්ද වෙන්නේ,සම්බන්දිත පිටු වලටයි. මෙම සම්බන්දිත පිටු තමයි වෙබ් අඩවියක සම්මත (standard) වෙබ් පිටු වෙබ් අඩවියේ තොරතුරු (Information) අඩංගු වෙන්නේ මේ සම්බන්දිත පිටු වලයි. මෙසේ සම්බන්දිත පිටු ඇති කිරීමට Internal Links භාවිතා කරගන්නවා. මෙහිදී විෂය පථයක (domain) තිබෙන පිටුවක සිට එම විෂය පථයේම තිබෙන වෙනත් පිටුවකට සම්බන්ධ විමට උපකරී වෙනවා. මෙමගින්,

1. පහසුවෙන් පිටු අතර ගමන් කරමින් තොරතුරු ලබා ගැනිමට උපකාරී වෙනවා.

2. අදාළ වෙබ් අඩවියේ තොරතුරු ක්‍රමානුකූලව ඉදිරිපත් කිරීමටත් ඉඩ ලබාදෙනවා. <a href=”url“> Link text  මෙම කේතය HTML හි link ගොඩ නැගීමට යොදා ගනී. 
 

අන්තර්ජාලයේ ප්‍රධාන වෙබ් පිටු වර්ග දෙකක් පවතී.

1. ස්ථිතික පිටු
2. ගතික පිටු

 

ස්ථිතික පිටු (Static page)

වෙබ් අඩවියක Search Engine එකකින් ඉල්ලු විට, එය Web Browser එකට, වෙබ් අඩවිය ගබඩා කර ඇති වෙබ් අනුග්‍රාහක (Web Server) සිට බාගත විය යුතුයි.ස්ථිතික පිටු (Static page) ,Web Server එකේ ඇති ආකාරයටම බාගත වී Web Browser මගින් පෙන්වයි. මෙවැනි වෙබ් පිටු නිර්මාණය කිරීමට සරල HTML කේත ක්‍රමය භාවිතා කරගනී. නිර්මාණකරුවා ඔහුට අවශ්‍ය ආකාරයට සැකිල්ල හා අන්තර්ගතය නිර්මාණය කරයි. බාවිතා කරන්නාගේ ක්‍රියාකාරකම්(e.g:button click) මත දිගින් දිගටම මෙම වෙබ් පිටු,Web Server එකේ ඇති ආකාරයටම බාගත වී load වීම සිදුවේ.අනතර්ගතයේ වෙනස් විමක් සිදුවීමට ,නිර්මාණකරුගේ නවීකරණය කිරීමක් හෝ නව ලිපියක් ප්‍රසිද්ධ කිරීම සිදු විය යුතුයි . මෙහිදී වෙබ් පිටුව ස්‌වයං ලෙස නවීකරණය වීමක් සිදු නොවේ.

වාසි.
1. නිපදවීම පහසුය.
2. නිපදවීමට ඇති ප්‍රමාණය කුඩාය.
3. host කිරීමට අවශ්‍ය ඉඩ ප්‍රමාණය කුඩාය.

 

 

අවාසි.
1.කල්පැනගිය තොරතුරු අඩංගු වී තිබීමට පුළුවන.
2. විශේෂ නිර්මාණයක් ,කරුණක් ,ස්ථානයක් ගැන අවදානය යොමු කරන නිසා ,වෙබ් අඩවිය භාවිතා කරන්නන්ට ප්‍රයෝජනවත් නොවීමට පුළුවන.
3. භාවිතා කරන්නන්ට ,වැඩිදුර විස්තර ලබාගැනීමට හෝ ප්‍රතිචාරය (feedback ) දැක් වීමට ,වෙබ් අඩවිය නොවන වෙනත් මාර්ග (Telephone No) යොදාගන්න වෙනවා .
 

 

 

ගතික පිටු (Dynamic page)

මෙම වෙබ් පිටු වල අන්තර්ගතය බාවිතා කරන්නන්ගේ හෝ අයිත්කරුගේ හෝ ස්‌වයංක්‍රිය ක්‍රියාකාරකම් නිසා නිරන්තරයෙන්ම කොටසක් හෝ සම්පුර්ණයෙන් වෙනස් වෙන ස්වභාවයෙන් යුක්ත වේ. මේ සදහා හේතුව වන්නේ මෙම වෙබ් පිටු සැම මොහොටකම නව තොරතුරු ලබා ගනිමන් දිගින් දිගටම නවීකරණය විමයි.එබැවින් මෙම පිටු ඉහල ගුණාත්මක මෙන්ම අලංකාරාත්මක භාවයකින් යුක්ත වේ. PHP, ASP, සහ JSP යන කේත වර්ග වෙබ් පිටු නිර්මාණය කිරීම සදහා යොදාගනී.

 

වාසි
1. නවීකරණය පහසු වේ.
2. ඉහල ක්‍රියාකාරීත්වයෙන් යුක්ත වෙබ් පිටු වේ.
3. search engine මගින් නිතර කියවන නිසා පහසුවෙන් හා ඉක්මනින් තොරතරු ලබා ගැනීමට හැකිවේ.
අවාස
1. නිපදවීමට ඉතා ඉහල වියදමක් දෑරීමට සිදුවේ.
2. Hosting මිල තරමක් ඉහලය.
3.බාවිතා කරන්නන්ගේ ක්‍රියාකාරකම් නිසා විශාල දත්ත ප්‍රමාණයක් එක්රැස් වේ. මෙය වෙබ් අඩවියේ හා දත්ත වල ආරක්ෂාවට ,නිවැරදි භාවයට තර්ජනයක් වේ .

 

 

වෙබ් පිටුවක් තැනීමට අවශ්‍ය මුලිකාංග (Basic Components needed to create a Website )

වෙබ් පිටුවක් තැනීමට අවශ්‍ය මුලිකාංග ලෙස අකුරු (Text), චිත්‍රන (Graphics), ශ්‍රව්‍ය (Audio), දෘශය (Visuals) සහ අධි සම්බන්දයන් (Hyperlinks) ද දක්වන්න පුළුවන්.

 

අකුරු (Texts)

වෙබ් පිටු නිර්මාණය කිරීමේදී තොරතුරු ඉදිරිපත් කරන්න භාවිතා කරන එක ක්‍රමයක් තමයි අකුරු මගින් තොරතුරු ඉදිරිපත් කිරීම. විවිධ ආකාරයේ හැඩතලයන් සහ වෙනස්කම් (වර්ණ, ප්‍රමාණය) සිදු කරල වෙබ් පිටු ගුණාත්මකව මෙන්ම අලංකාරත්මකව නිර්මාණය කරගන්න පුළුවන්. වර්තමානයේ භාවිත කරන අකුරු සහ හැඩතල පහසුවෙන් කියවිය හැකි පැහැදිලි ආකාරයකින් යුක්ත විය යුතය. පහලින් උදාහරණ පෙන්වල තිබෙනවා යොදා ගන්න විවිද අකුරු වර්ග කිහිපයක්. වෙබ් පිටු නිර්මාණය කිරීමේදී වෙබ් ආරක්ෂිත මුද්‍රණ අකුරු (web safe fonts) භාවිතා කරනවා. Web safe fonts කියල කියන්නේ සියලුම පරිඝනක පද්ධති වල හා බොහෝ web browser වල නිරුපනය කල හැකි මුද්‍රණ අකුරු වලටයි. අකුරු වල ආකෘතිය හා හැඩතල පාලනය කරනු ලබන්නේ web browser මගිනි. එබැවින් සියලුම අකුරු වර්ග වල ආකෘතිය හා හැඩතල නිර්මාණය කිරීමට, වෙබ් නිර්මාණකරුවන්ට පුළුවන් කමක් ලැබෙන්නේ නැහැ.
පහලින් පෙන්වල තියෙන්නේ web safe fonts වර්ග කිහිපයකි.

 

1. Arial/Helvectica

2. Times New Roman/ Times

3. Courier New/ Courier

4. Verdana

5. Georgia

6. Comic Sans

7. Trebuchet MS

8. Tahoma

9. Arial Black

චිත්‍රන (Graphics), ශ්‍රව්‍ය (Audio), දෘශය (Visuals)

මෙම අංග භාවිතා කිරීමෙන් පහසුවෙන් සහ සරලව කරුණු ඉදිරිපත් කරන්න පුළුවන්. මෙසේ චිත්‍රන, ශ්‍රව්‍ය, දෘශය වෙබ් පිටුවක තොරතුරු ඉදිරිපත් කිරීමට භාවිතා කිරීම ඒ සදහා අකුරු භාවිතා කිරීමට වඩා ගොඩක් පලදායි වෙනවා.ඒ වගේම විවිධ අකුරු වර්ග වල ආකෘතිය චිත්‍රන ලෙස වෙබ් අඩවියට සම්බන්ද කල හැකියි. ඒ වගේම වෙබ් පිටුවේ අලංකාරයද ඉහල යනවා.
මෙහිදී දැනගත හැකිවෙනවා  වීඩියෝ එකක් වෙබ් පිටුවට ඇතුළු කරගන්න ආකාරය. එක බොහොම ලේසි දෙයක්. HTML 5 කියන HTML අනුවාදය (version ) මෙය පහසු කර තිබෙනවා .
Browser MP4 WebM Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES NO NO
Opera 10.6+ NO YES YES

 

මේ තියෙන්නේ එක් එක් web browser විවිධ video වර්ග වලට support කරන ආකාරයයි.

 

ඊලගට audio එකක් වෙබ් පිටුවට ඇතුළු කරගනන ආකාරය අධ්‍යනය කල හැකි වෙනවා.. මේ සදහත් HTML 5  යොදාගන්න පුලුවන්.
Browser MP3 Wav Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES YES NO
Opera 10+ NO YES YES

 

මේ තියෙන්නේ audio support කරන ආකාරයයි.

 

අධි සම්බන්දය (Hyperlinks)

අධි සම්බන්දයන් ද අනිවාර්යයෙන්ම වෙබ් පිටුවල අන්තර්ගත වෙනවා. මෙම අධි සම්බන්ධතාවයන් කිසියම් වෙබ් පිටුවකට සම්බන්දයක් පවත්වා ගෙන තියනවා. එම නිසා hyperlink click කරලා ඉක්මනින්ම අදාළ වෙබ් පිටුවට යන්න පුළුවන්.මෙය විශ්ව විසිරි වියමන සංකල්පය ඉදිරිපත් කරපු විනිවර් බුෂ් ( Vannevar Bush) ,ටීම් බ්නාර්ඩ් ලී (Tim Berners-Lee) ගේ ප්‍රධාන අදහසක්.
මෙම hyperlink ආධාරයෙන්  ඉක්මනින් හා පහසුවෙන් වෙබ් අඩවි වලින් අවශ්‍ය තොරතුර සොයාගත හැක. පහලින් hyperlinks වලට උදාහරණයක් පෙන්නලා තියනවා.  නිල් පට අකුරෙන් underline වෙලා තියෙන්නේ hyperlinks.

අන්තර්ගතය සංවිධානය කීරීම (Organization of contents)

මේ සදහා කොටස් කිහිපයක් සලකා බැලීමට සිදුවෙනවා. ඒවානම් ආකෘති (Format), ලයිස්තු (Lists), වගු (Tables), රාමු (Frames).
ආකෘතිය (Format)
මෙහිදී වෙබ් පිටුවේ අන්තර්ගතය පිලිබදව අවදානය යොමු කරනවා. සාමාන්‍යයෙන් වෙබ් පිටුවකට නියමිත ප්‍රමාණයක් (දිගක්, පළලක්) පවතිනවා.නමුත් එය එක එක වෙබ්අඩවි වලින් තරමක් දුරට වෙනස් වෙනවා. මෙහිදී බාවිතා කරන්නාගේ අවශතාව හා ඔහු වෙබ් අඩවියට පිවිසීමට බාවිතා කරන උපකරණය (laptop ,tab ,smartphone ) පිළිබදවද සලකනවා . උදාහරණ විදියට පලින් දීල තියන වෙබ්අඩවි වල ප්‍රමාණයන් බලන්න.
  • Facebook – 980 pixels
  • YouTube – 961 pixels
  • Yahoo! – 973 pixels
  • MSN – 980 pixels
  • Twitter – 919 pixels (partly fluid)
  • LinkedIn – 980 pixels
  • Bing – 970 pixels (partly fluid)
  • Baidu – 900 pixels
  • QQ – 974 pixels
 

 

 

වෙබ්අඩවියක ආකෘතියට ප්‍රධාන කොටස් කිහිපයක් අයත් වෙනවා. ඒවානම් Navigation Bar, Content Selection Bar, Display, Footer Bar. මෙම කොටස් විවිධ වෙනස්කම් වලට භාජනය කරලා වෙබ්අඩවි වල භාවිතා කරනවා.

 

රාමු (Frames)

මෙහිදී වෙබ් පිටුව Navigation bar, Content selection bar, Display, Footer bar යන කොටස් වලට (රාමු වලට) බෙදා වෙන් කරගනිමින් අලංකාරව හා පලදායි ලෙස වෙබ් පිටුව නිර්මාණය කිරීමට හැක. විවිධ ආකාරයට රාමු හසුරවමින් අලංකාරත්මකව වෙබ් පිටුව නිර්මාණය කරගන්න පුළුවන් වෙනවා. මෙසේ රාමු ගොඩනැගීම මගින් තොරතුරු පැහැදිලිව හා පහසුවෙන් භාවිතා කල හැකි අයුරින් වෙබ් පිටුව තුල ගොනු කරගන්න පුළුවන්. උදාහරණ කිහිපයක් පහලින් පෙන්වල තියනවා.
 
 
 

 

   

 
 
 

වගු (Tables)

සාමාන්‍ය ජීවිතයේදී විශාල තොරතුරු ප්‍රමාණයක් සංශිප්තව ඉදිරිපත් කිරීමට වගු යොදාගන්නවා.තොරතුරු රාශියක් නිවැරදිව හා පැහැදිලිව නිරුපනය කරන්න ,වෙබ් පිටුවලත් මෙය යොදාගන්නවා . මෙසේ වගු භාවිතා කිරීම මගින් වෙබ් පිටු වලට අලංකාරත්මකව බවක් හා පැහැදිලි බවක් ලැබෙනවා. පසු පාඩම් වලදී ඉගෙනහත හැකි වෙනවා  කොහොමද මේ වගු නිර්මාණය කරගන්නේ කියලා. දැනට ඒවගෙන් වෙන දේවල් තේරුම් ගන්න උත්සහ කරන්න. උදාහරණ පහල තියනවා.

 

 

ලයිස්තු (Lists) 

අපේ තොරතුරු ක්‍රමානු කුලව ගොඩ නගන්න සහ යම් කොටසක අනු කොටස් දැක්වීමේදී වගේ අවස්ථා වලදී  list භාවිතා කරනවා. List ප්‍රධාන කොටස් 2කට බෙදා වෙන් කරලා දක්වන්න පුළුවන්.
1.Ordered List view
2.Unordered List view

 

Ordered List View
මෙහිදී අනු කොටස් ප්‍රධාන කොටස යටතේ කිසියම් පිළිවෙලකට ගොඩ නගා ගනු ලැබේ. අනු කොටස් වලට පිලිවෙලින් ඉලක්කම් ලැබේ.

Unordered List View
අනු කොටස් පිළිවෙලකට ගොඩ නඟා ගැනීමක් මෙහිදී සිදු නොවෙන අතර එම අනු කොටස් ඉලක්කම් යොදා ගැනීමකින් තොරවම ප්‍රදාන කොටස යටතේ ගොඩනග ගැනේ. මෙහිදී Bullets, Starts, Dots වැනිදේ අනු කොටස් වල නිරුපණයට යොදා ගනී.

   

The following two tabs change content below.

Prasad Somarathna

Latest posts by Prasad Somarathna (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.