Thil's page | තිලිණ ගුණසේකර ගේ බ්ලොග් සටහන

හොඳ චිත්‍රපටි බලාගන්න ලේසි විදිහක්

2010-07-08T12:55:00.004+05:30

ෆිල්ම්හෝල් වලට එන ඉංග්‍රීසි ෆිල්ම් අතලොස්සක් ඇරෙන්න අපිට ෆිල්ම් බලන්න තියන ලේසිම විදිහ, ටොරන්ට් හරි ස්ට්‍රීමින් සයිට් එකක බලන එක. ෆිල්ම් එක ගැන හොයන්නෙ බලන්නෙ නැතුව පැය ගානක් ඩවුන්ලෝඩ් කරාට පස්සෙ බලද්දී තමයි තේරෙන්නේ කිසි වැඩකට නැති ෆිල්ම් එකක් කියලා. ෆිල්ම් එකක් ගැන අනිත් අය කියන්නේ මොනවද කියල බලන්න ලේසිම/හොදම තැන තමයි imdb - internet movie database එක. මෙතන තියනවා හැම ෆිල්ම් එකකම වගේ විස්තර. මම බලන්නේ user rating එක 6 ට වඩා වැඩි ඒවා. ඕනනම් ඉතින් imdb පිටුවේ පහලම තියන බලලත් ෆිල්ම් එක ගැන වැඩි අදහසක් ගන්න පුලුවන්.

හැබැයි ටොරන්ට් සයිට් එකට ගිහිල්ලා ෆිල්ම් එකේ නම කොපි කරගෙන ආපහු ඒක imdb එකේ හොයන එක ටිකක් කම්මැලි වෙලායන වැඩක්. (ගුගල් ක්‍රෝම් එකේ නම් නම සිලෙක්ට් කරලා රයිට්ක්ලික් කරාම එන මෙනු එකෙන් search google for... තෝරලා google search පිටුවට ගියාම එන පලවෙනි රිසල්ට් එක ෆිල්ම් එකට අදාල imdb පිටුව). කොහොමහරි මේ වැඩේ බ්‍රව්සර් එකේ එකම ටැබ් එකක කරන්න පුලුවන් නම් ලේසී කියල මට හිතුනා. එතකොට මට මතක් උනා smashingmag එකේ තිබුන ලිපියක්. පොඩි වෙනස්කම් ටිකක් කරල imdb එකට හරියන්න හදාගත්තා. tgunasekara.com/playground/imdb/ මෙහෙමයි පාවිච්චි කරන්නේ..

මුලින්ම tgunasekara.com/playground/imdb/ පිටුවට ගිහිල්ලා check movie කියල තියන ලින්ක් එක බ්‍රව්සර් එකේ bookmarks bar එකට drag කරගන්න.

bookmarks bar එකේ 'Check movie' කියලා අලුත් ලින්ක් එකක් පෙනේවි.

දැන් තමන් කැමති ටොරන්ට් / ස්ට්රීමින් සයිට් එකේදී මේ bookmarklet එක පාවිච්චි කරන්න පුලුවන්.

මම හුගක් වෙලාවට යන්නේ quicksilverscreen. ෆිල්ම් එකේ නම සිලෙක්ට් කරලා bookmark bar එකේ 'Ckeck movie' ක්ලික් කරන්න.

දැන් ඒ ෆිල්ම් එකට අදාල විස්තරය එම ටැබ් එකේම පෙනේවි.

මේ විදිහට ටොරන්ට් සයිට් එකක වුනත් ඉක්මනින් imdb විස්තර බලාගන්න පුලුවන්. කරන්න අවශ්ය නම තෝරලා 'Check movie' ක්ලික් කරන එක විතරයි.

ව්‍යායාම සහ css වගුවේ කතාව

2010-05-14T12:20:00.004+05:30

උදේ ඉදන් හවස් වෙනකනුයි පස්සෙ ගෙදර ගියාමයි කරන එකම වැඩේ කම්පියුටර් ගැහිල්ල නිසා ඇගට කිසිම ව්‍යයාමයක් නෑ. විහිලුවට වගේ බර කිරල බැලුවහම කිලෝම 73ක්. BMI එක බැලුවහම බර වැඩියි.

BMI එක කිව්වේ Body mass index. පොඩි කාලෙ ඉස්කෝලෙ ඉගනගත්තෙ. වැඩි විස්තර ඕනනම් මේ විකිපීඩියා පිටුව බලන්න.

මේක හොයන්නේ බර, උසේ වර්ගයෙන් බෙදලා.

බර / උස x උස

මේ ගාන හදල බැලුවම නීරෝගී පුද්ගලයෙක්ගේ 18.5 - 24.9 අතර උත්තරයක් එන්න ඕන. මොකක් හරි ඇක්‍ෂන් එකක් ගත්තෙ නැතොත් වැඩේ අල වෙන නිසා හිතුනා ටිකක් දුවන්න ඕන කියලා. ඔෆිස් එකට ගිහින් ඔය කතාව කිව්වම තමයි මීටර් උනේ කට්ටියට ම තේරිලා කියල ඇගට ව්‍යයාමයක් අවශ්ය බව. උදේම නැගිටලා දුවන එක කෙරෙන්නෙ නැ වැඩක් නිසා කට්ටියම එකග වුනා දවසක් ඇර දවසක් ඔෆිස් ඉවර වෙලා හවස ඔෆිස් එක ගාව ඉදන් පාර්ලිමන්ට්ග්‍රවුන්ඩ් එකට දුවල පන තිබ්බොතින් ග්‍රවුන්ඩ් එකෙත් වටයක් දුවල ආපහු ඔෆිස් එකට එන්න. හැබැයි හුගක් දවසට මුලින් දුවන්න කැමතිවලා හිටපු කට්ටියටත් ඇදුම්, සපත්තු එහෙම ගේන්න අමතක වෙනවා. කොහොමහරි මමයි තව එක්කෙනෙකුයි තමයි හැමදාම වගේ අන්තිමේදි වැඩේට සෙට් වෙන්නේ.

දවසක් ඇර දවසක් දිව්වා කියමුකෝ. ප්‍රෝග්‍රස් එක බලන්න විදිහකුත් එපැයි. වෙබ්සයිට් නම් ඕනතරම් තියනවා වැඩේ කරන්න. ඒත් මට හිතුනා මම ම වගුවක් හදාගන්න ඕන කියල වැඩේට. Google Chart API එකෙන් නම් ලේසියෙන්ම හදන්න පුලුවන් චාට්. ටිකක් කල්පනා කරාම හිතුනා එක ගලෙන් කුරුල්ලෝ දෙන්නෙක්ම මරාගන්නත් එක්ක වැඩේ ටිකක් වෙනස් විදිහට කරන්න.

ප්ලෑන් එක තමයි ඉමේජ් පාවිච්චි කරන්නෙ නැතුව css, html, js පාවිච්චි කරල චාට් එක ඇදීම. මුලින්ම එන ප්‍රශ්නෙ ඇද ඉරි අදින එක. කැන්වස් එකෙන් වැඩේ ලේසියෙන් කරන්න පුලුවන් උනත් මම පාව්ච්චි කරා වෙන ක්‍රමයක්.

ඩිව් එකක් තියනවා.

div

ඒකට අපි ට්කක් ලොකු රතුපාට බෝඩර් එකක් දානවා.

div

දැන් අපි බෝඩර් වල පාට වෙනස් කරලා බලමු. උඩට ,යටට කොලපාට පැත්තට රතුපාට.

div

පේනවා නේද උඩයි පැත්තෙයි බෝඩර් සෙට්වෙන තැන්වල ඇල හැඩයක්. ඒ හැඩේ තමයි මම පාවිච්චි කරේ ඇද ඉරි වලට. උදාහරනයක් විදිහට මේ කොටුවෙම වම් පැත්තේ සහ උඩ බෝඩර් විතරක් තියලා පලල 0 කරලා උඩ බෝඩර් එක සුදුපාට කරොත්

div

ඊට පස්සේ දවසින් දවස බර අරගෙන ලිස්ට් එකක දැම්මම ස්වයංක්‍රීයව වගුව ඇදෙන්න jQuery වලින් ප්ලගින් එකක් හැදුවා. මෙතනින් බලන්න (උදාහරණයක් විතරයි, තියන දත්ත වැරදියි). කොලපාටින් පේන්නේ ක්‍රමයෙන් අඩුවීම, රතුපාටින් වැඩිවීම. එහෙමයි කිසිම පින්තූරයක් පාවිච්චි නොකර css වලින්ම වගුවක් හැදුවේ

සින්ඩියේ ඉදිරි ගමන

2010-02-16T15:20:00.001+05:30

මම දකින විදිහට සිංහල යුනිකේතයෙන් බ්ලොග් ලියන්නන්ගේ බ්ලොග් ලිපි වලට පුලුල් පාඨක පිරිසක් ලගාකර ගැනීමට සින්ඩියෙන් සිදුවන්නේ මනා සේවයක්. තාක්ෂනික, ආගමික දේශපාලනික ආදී නානාවිද බ්ලොග් අඩවි වල ලිපි සින්ඩියේ පලවනවා. ඒ වගේම බ්ලොග් කියවන පාඨක පිරිසත් විවිදයි. සමහරු කැමති තාක්ෂනික දේවල් තියෙන බ්ලොග් බලන්න. සමහරු දේශපාලනික අදහස් ලියන බ්ලොග් වලට කැමතියි. බ්ලොග් අඩවි වර්ගීකරණය කිරීම මගින් කියවන්නන්ට තමන් කැමති ආරේ බ්ලොග් අඩවි කියවීමට අවස්ථාව ලැබෙනවා. උදාහරණයක් වශයෙන්, දේශපාලනික බ්ලොග් අඩවි කියවීමට කැමති නම් http://blogs.sinhalabloggers.com/political/ බුක්මාර්ක් කරගන්න පුලුවන්. තාක්‍ෂනික බ්ලොග් වලට http://blogs.sinhalabloggers.com/technology/ මේ ක්‍රමය කියවන්නන්ට පහසුවක්.

දැනට ඇති ප්‍රධාන ගැටලු

බ්ලොග්කරුවෙකුට තෝරාගත හැක්කේ කැටගරි දෙකක් පමණයි.

මෙම වර්ගීකරණය බ්ලොග් වශයෙන් නැතිව ලිපි වශයෙන් කරන්න පුලුවන්නම් වඩා හොදයි. නමුත් දැනට ඇති තාක්ෂනික ගැටලු සමග අඩු වියදමකින් මෙය කරන අයුරක් සොයාගත යුතුයි. බොහොමයක් බ්ලොග් එකම තේමාවකින් ලිපි පලකලත් සමහර බ්ලොග් විවිද තේමා වල ලිපි ලිවීමේදී දැනට තිබෙන ක්‍රමය අනුව ලිපි අදාල කැටගරියේ පල නොවීම ගැටලුවක්. උදා: තාක්ෂනික බ්ලොග් අඩවියක්ලෙස වර්ගීකරණය වී ඇති බ්ලොග් අඩවියක දේශපාලනික කරුණක් ගැන ලිපියක් ලියැවුනොත් එම ලිපියත් පලවන්නේ තාක්ෂනික කැටගරියේමයි.

මුල් පිටුවේ සෑම කැටගරියක්ම නොපෙන්වීම

සින්ඩියේ මුල්පිටුවේ මෙලෙස සමහර කැටගරි නොපෙන්වීමට සිදුවීම කණගාටුවට කරුණක්. තමන්ට කැමති කැටගරියකට පාඨකයාට කෙලින්ම යාහැකි නිසා බ්ලොග් ලියන්නන්ට ඇතිවියහැකි පාඩුව අවමයි.
දේශපාලන බ්ලොග් මුල්පිටුවෙන් ඉවත් කිරීම පිලිබදව වැරදි වටහාගැනීම් අනවශ්‍යයි. දේශපාලන අඩවි කියවන පාඨකයන් විශාල ප්‍රමාණයක් සින්ඩියට දිනපතා එනවා. එම අඩවි කියවීමට අවශ්‍යනම් අදාල කැටගරියට යෑම පමණයි කල යුත්තේ. මේ කරුණ හොදින් දන්නා නිසාමයි එම කැටගරියට අදාල ලින්ක් එක පැහැදිලිව පෙනෙන ලෙස සකසා තිබෙනේ.

බ්ලොග් අඩවි සින්ඩියට එකතු කිරීමට ඇති පමාව

දැනට දිනපතා සින්ඩියට නව බ්ලොග් අඩවි 10-20 අතර ප්‍රමාණයක් එකතු කිරීමට ඉල්ලුම් කෙරෙනවා. මේ සියලු බ්ලොග් අඩවි වෙත ගොස් සින්ඩියට සුදුසු බ්ලොග් අඩවි පමණක් එකතු කිරීම යම් කාලයක් වැයවෙන කටයුත්තක්. සින්ඩියේ බ්ලොග් අඩවි වල ගුණාත්මකබව හැකිතරම් ආරක්‍ෂා කිරීමට සිදුවන නිසා සැලකියයුතු වේලාවක් නව බ්ලොග් අඩවි පරීක්‍ෂාකිරීමට ගතවෙනවා.

විසදුම්

මේ දිනවල බ්ලොග් අඩවි එකතුකිරීමේ පමාව යම්තාක්දුරට හෝ අඩුකරගැනීමට ක්‍රමයක් සැකසෙමින් පවතිනවා.
දැනට සින්ඩිය සදහා පාවිච්චි කරන වෙබ් වැඩසටහනේ අඩුපාඩු සහ සර්වර් සදහා වැයවන අධික වියදම අවම කර ගැනීමට නව සින්ඩි වැඩසටහනක් සාදමින් පවතිනවා.
බ්ලොග් වර්ගීකරණය කිරීමේදී බ්ලොග් වශයෙන් වර්ගීකරණය නොකර ලිපි වශයෙන් වර්ගීකරණය කිරීමට ප්‍රායෝගික ක්‍රමයක් තවම නැහැ. බ්ලොග් ලියන්නන් සම්මත කැටගරි ක්‍රමයකට ලිපි ලියනවා නම් මෙයට විසදුමක් සොයාගැනීම පහසු වේවි. නමුත් මෙය ප්‍රායෝගික නැති බව වැටහෙනවා.

සින්ඩිය සදහා නව අදහස් හෝ විසදුම් admin[at]sinhalabloggers[.]com වෙත එවන්න.

පසුගිය මැතිවරණයේදී මඩ ප්‍රචාර, බොරු ප්‍රචාර සදහා සමහර බ්ලොග් ලියන්නන් සින්ඩිය පාවිච්චි කිරීම කණගාටුවට කරුණක්. මෙවැනි දේ නිසා සින්ඩියේ පැවැත්මට පවා බලපෑම් ඇතිවන්න පුලුවන්.

බ්ලොග් ලියන සහෘදයන්ගෙන් ඉල්ලා සිටින්නේ සින්ඩියෙන් ප්‍රයෝජන ලබාගන්නා අතරම සින්ඩියේ යහපැවැත්ම වෙනුවෙන් කටයුතු කරන ලෙසයි.

හැම පරිගණකයකම වගේ තියෙන සෙල්ලමක්

2009-11-26T17:49:00.001+05:30

ඔන්න කාලෙකට පස්සෙ බ්ලොග් එක පැත්තේ ආවෙ. අද මට ලියන්න හිතුනා ගේම් එකක් ගැන. මම බ්ලොග් එක පටන් ගනිද්දිම හිතාගෙන හිටියෙ ගේම් ගැන ලියන්න. හැබැයි වෙන වෙන දේවල් තමයි මෙච්චර කල් ලියල තියෙන්නෙ. මේ කියන පරිගණක සෙල්ලම පෙර නියමයෙන්ම හුගක් පරිගණක වල තියෙනවා. ඒ කියන්නේ අමුතුවෙන් ස්ථාපන කරන්න අවශ්‍ය නෑ. වින්ඩෝස් වල නම් තියෙන්නේ Minesweeper කියලා. උබුන්ටු වල මේකම තියෙනවා Mines කියලා. Windows වල නම් Start -> All Programs -> Games -> Minesweeper Ubuntu වල නම් Applications -> Games -> Mines හුගක් අය කම්පියුටරෙන් කාඩ් ගේම් සෙල්ලම් කරත් බිම්බෝම්බ හොයන මේ සෙල්ලම කරන්න කැමති නෑ. ලොකුම හේතුව තමයි මේක තේරෙන්නේ නැති කම. සමහරු හිතන්නේ මේක කණාවට ගහන එකක් කියලා. මම කියන්නම් සෙල්ලම කරන හැටි. හරිම සරලයි. ගේම් එකේ මූලික අරමුණ තමයි අඩුම වේලාවකින් බිම්බෝම්බ සියල්ල සොයාගැනීම. මුලින්ම අලුතෙන් ගේම් එක පටන් ගත්තහම එන්නේ පහලින් තියන වගේ වින්ඩෝ එකක්. මම මේක ගත්තේ wndows 7 වලින්. windows xp වල පෙනුම ටිකක් වෙනස්. හැබැයි සෙල්ලම් කරන විදිහේ කිසිම වෙනසක් නැහැ.

මේකෙ තියෙන කොටු වලින් සමහර කොටු වල බිම්බෝම්බ තියෙන්න පුලුවන්. මේ කොටු ටික තමයි අපිට හොයාගන්න තියෙන්නේ. කොහෙන් හරි පටන් ගන්න එපැයි. බය වෙන්න දෙයක් නෑ. පලවෙනියටම ඔබන කොටුවේ බෝම්බ නෑ. ඒක නිසා කැමති කොටුවක් ඔබලා පටන් ගන්න පුලුවන්.

හොඩක් වෙලාවට පලවෙනි ක්ලික් එකෙන් කොටු එකකට වඩා ඇරෙනවා. ඒක නිසා වැඩේ ලේසියි. හැබැයි හදිස්සියෙන් පහල රූපය වගේ අවස්ථාවක් ආවොත් ආපහු වෙන තැනක කොටුවක් ඔබලා බලන්න වෙනවා.

ඔන්න දැන් පොටක් පෑදිලා තියෙනේ බිම්බෝම්බ හොයන්න. පහල රූපය බලන්න.

	මම රවුම් කරල තියෙන තැන තියෙන්නේ 1 ඉලක්කම.
	මේකෙන් කියන්නේ රවුම් කරපු කොටුව වටේට තියෙන කොටු 8න් එකක අනිවාරයෙන් බෝම්බයක් තියෙනවා කියලා.
	දැනටමත් විවෘත කරන්න ඉතුරු වෙලා තියෙන්නේ එක කොටුවයි. (5 වැනි කොටුව) ඒ නිසා ඒ කොටුවේ අනිවාරයෙන්ම බිම්බෝම්බයක් තිබිය යුතුයි.
	ඒ කොටුව right click කිරීමෙන් බෝම්බයක් තිබෙන බවට සලකුණු කරන්න පුලුවන්. මේ විදිහට සලකුණු කිරීම අනිවාර්‍ය නැහැ. ඒත් අපේ පහසුව සදහා සලකුණු කරගන්න පුලුවන්.
	දැන් අපි බලමු ඒ ලගම තියන අනිත් 1 ඉලක්කම. ඒ වටේත් ඇති කොටු 8 විවෘත කර නැත්තේ එක කොටුවයි (5 වැනි කොටුව). එනිසා මෙහි බිම්බෝම්බයක් තිබිය යුතුයි.
	ඊලගට රතුපාටින් රවුම් කර ඇති 2 ඉලක්කම. එහි අදහස 2 ඉලක්කම වටා ඇති කොටු 8න් කොටු දෙකක බිම්බෝම්බ ඇති බව. දැනටමත් රතු පාටින් දක්වා ඇති 4 සහ 6 කොටුවල බිම්බෝම්බ තිබෙන බව අපි දන්නවා. එනිසා රතු පාටින් දක්වා ඇති 5 වෙනි කොටුවේ බෝම්බයක් තිබෙන්න විදිහක් නැහැ. ඊට හේතුව 2 ඉලක්කම වටා තිබෙන්න පුලුවන් බෝම්බ ගණන 2 පමණක් වීමයි.
	මේ ආකාරයටම රූපයේ 1 ඉලක්කම වටා බෝම්බ තිබිය හැක්කේ 1ක් පමණයි. දැනටමත් 4 කොටුවේ බෝම්බයක් තිබෙන බව දන්නා නිසා 5 කොටුවේ බෝම්බ තිබෙන්න බැහැ.
	රූපයේ පෙනෙන විදිහට අවස්ථාවක් ආවොත් රවුම් කර ඇති 2 ඉලක්කමට සාපේක්ෂව 4 හෝ 5 කොටු ව්ල බෝම්බ තිබිය හැකියි. මෙවැනි වේලාවක අපිට හරි කොටුව තෝරාගන්න බැහැ. ඒ නිසා වෙන මුල්ලකින් බෝම්බ සෙවීම පටන් ගන්න වෙනවා. පසුව මෙතැන විසදීමට හැකි වේවි.

මම හිතනවා දැන් සෙල්ලම නොතේරුන අයට තේරෙන්න ඇති කියලා. ඉක්මනින් කල්පනා කරලා ඉක්මනින් තීරණ අරගෙන බෝමබ ඔක්කොම අඩුම කාලයකින් සෙවීම තමයි අබියෝගය. බෝමබ සෙවීමට ගිය වෙලාව ප්‍රතිචාරයක් විදිහට සටහන් කරන්න!

බණ අහන හැටි

2009-09-29T15:12:00.000+05:30

බණ ගෙදරකදි ජංගම දුරකතනයේ ශබ්දය ක්‍රියා විරහිත කරන්න නොදන්න අයට..

ජංගම දුරකතනයේ # බොත්තම තත්පර කිහිපයක් තදකරන්න.

නැතිනම් phone settings වෙත ගොස් එහි profile මෙනුවෙන් silent තෝරන්න

ගූගල් ක්‍රෝම් Bookmarks

2009-08-18T13:22:00.007+05:30

ඔන්න මම කාලයක ඉදන් බලාගෙන හිටපු දෙයක් අලුත් ක්‍රෝම් 4.0 න් ඇවිත්. ඒ තමයි ගූගල් ක්‍රෝම් එකට ගූගල් බුක්මාර්ක් එකතු කරන එක. අනිකුත් බ්‍රවුසර වල ගූගල් ටූල්බාර් හරහා බුක්මාර්ක් ඕනම තැනක ඉදන් පාවිච්චි කරන්න පුලුවන්කම තිබුනත් ක්‍රෝම් හි මෙම පහසුකම මෙතෙක් තිබුනේ නැහැ.

මෙහෙමයි වැඩේ කරන්නේ.

මුලින්ම ක්‍රෝම් dev channel එකට මාරු වෙන්න වෙනවා. මොකද ඒකට තමයි 4.0 එක දැනට ඇවිත් තියෙනේ. මේක development channel එක වුනත් සෑහෙන්න stable. බොහොම කලාතුරකින් තමයි ප්‍රශ්නයක් ඇතිවෙනේ. එහෙම වුනත් පැය කීපයක් ඇතුලත නැවත යථා තත්වයට පත් කරනවා. Google Chrome Channel Changer වෙත ගිහින් බාගත කරගෙන dev channel එකට මාරු වෙන්න. ඉන්පසු ක්‍රෝම් වල ස්පැනර් එක -> About Google Chrome වෙත ගියාම ඔබට පෙනෙයි updates බාගත කරන හැටි.

දැන් ගුගල් ක්‍රෝම් අයිකන් එකේ properties ගිහින් target කොටුවේ chrome.exe එකට පසු --enable-sync යොදා ගුගල් ක්‍රෝම් විවෘත කරන්න.

දැන් ස්පැනර් එක -> Import BOokmarks & Settings වෙත ගියවිට එන popup එකේ dropdown මෙනුවෙන් Google Toolbar තෝරා Import ඔබන්න.

දැන් ක්‍රෝම් වල බුක්මාර්ක් ටූල්බාර් එකේ Other Bookmarks තුලට Google Bookmarks import වී ඇති.

css සිංහලෙන්

2009-04-01T09:58:00.002+05:30

ෆයර්ෆොක්‌ස්‌ 3.0 සහ IE 8 නිකුතුවට පසු css සදහා සිංහල unicode සහයොගීතාව ලබා දුන්නා. මෙය අපේ රටේ වෙබ් අඩවි නිර්මාණකරුවන්ට විශාල ජයග්‍රහනයක්‌. මම අද පෙන්වන්නම් css සදහා සිංහල unicode යොදාගන්න ආකාරය.

සාමාන්‍ය ආකාරයටම html යොදාගන්න පුලුවන්.

උදා:

<div id="හිස"> 
    හිස සදහා
</div>
<div id="බඳ">
    බඳ සදහා
</div>
<div id="පාදය">
    පාදය සදහා
</div>

අපි දන් සිංහලෙන් css එක ලියමු

#හිස { 
   අකුරු වර්ණය: රතු; 
   උස: පික්‌සල 100;  
   පසුබිම් වර්ණය : ලා නිල්;
   අකුරු ප්‍රමාණය : විශාල;
} 
#බඳ {
   අකුරු වර්ණය: රතු;    
   පසුබිම් වර්ණය : ලා අලු; 
} 
#පාදය {
   අකුරු ප්‍රමාණය : කුඩා;
}

ඔබත් පාවිච්චි කර බලන්න. තවත් වෙබ් අඩවි නිර්මාණකරණය පිලිබද තොරතුරු රැගෙන ලගදීම එන්නම්.

Happy April Fools Day!

Windows 7 වල මම කැමති දේ

2009-03-11T15:25:00.001+05:30

ඉදිරියේදි නිකුත් වීමට නියමිත අලුත්ම Windows වෙලුම තමයි Windows 7. අගෝස්‌තු පලවෙනිදා වෙනකන් beta සංස්‌කරනය නොමිලේ පාවිච්චි කරන්න පුලුවන් නිසා මටත් හිතුනා උත්සාහ කර බලන්න. දැනට මාසයක්‌ විතර සැහෙන්න හොඳින් වැඩ කල නිසා මේ ගැන බ්ලොග් සටහනක්‌ ලියන්න අදහස්‌ කලේ.

ඇත්තටම Windows 7 beta තත්ත්වයේ තවම තිබුනත් Windows Vista වලට වඩා ගොඩක්‌ ස්‌ථායී(stable). මම පාවිච්චි කල කාලය අතරතුර එක වරක්‌ වත් stuck උනේ නැහැ.System resources පාවිච්චියත් සතුටුදායක මට්‌ටමක තියෙනවා. මම ස්‌තාපනය කල පරිගණකය සාමාන්‍ය core 2 duo processor සහ 2GB RAM සහිත Onboard Graphics ඇති එකක්‌. මට දැනගන්න ලැබුනා අඩු RAM ප්‍රමාණ වලත් Windows 7 හොදින් ක්‍රියා කරන බව.

Windows 7 වල ඉතා සිත්ගන්නාසුලු අංග රාශියක්‌ තිබෙනවා. මම ඒවා තිරපිටපත් සමග ඉදිරිපත් කරන්නම්.

Windows 7 Desktop

මම Windows 7 වල වඩාත්ම කැමති අංගය එහි task bar එකයි. වැඩි ඉඩක්‌ ගන්නේ නැතිව ඉතාමත් පහසුවෙන් පාවිච්චි කල හැකි task bar එකක්‌ windows 7 සතුව තිබෙනවා. එහි අපි නිතර පාවිච්චි කරන වැඩසටහන් වල shortcut තබාගන්න පුලුවන්. ඒ වගේම දැනට විවෘත වැඩසටහන් පෙන්වන්නේත් එතැනමයි.

Windows 7 Taskbar

වැඩසටහනක කලින් වැඩ කල පිටුවක්‌ විවෘත කරන්න අවශ්‍යනම් කල යුත්තේ එම අයිකන කිරීම පමණයි. එහිදී මතුවන මෙනු එකෙන් අපි කලින් වැඩකරමින් සිටි ගොනු පෙන්වනවා.

Windows 7 Taskbar

Taskbar එකේ icon mouseover කරද්දී දැනට විවෘතව ඇති windows පෙන්වනවා.

Windows 7 Taskbar

Windows 7 වල තවත් වැදගත් අංගයක්‌ තමයි Notification Icon Manager එක. මෙයින් System Tray එකේ එන කුඩා අයිකන පාලනය කරන්න පුලුවන්.

Windows 7 Taskbar

මම මේ කිව්වේ User Interface එක අතින් windows 7 වල මම කැමති දේ. Backend ගැන ඉදිරි post එකක කතා කරමු!

ලෝක විනාශයද ? හික්‌

2009-02-13T16:29:00.000+05:30

ඔන්න ජීවිතේටම එක වතාවක්‌ වෙන සිද්දියක්‌ තව ටික වෙලාවකින් වෙනවා.

ඒ තමයි unix time එක 1234567890 ලෙස සටහන වීම.

මොකද්ද මේ unix time..

Unix time යනු 1970 ජනවාරි මස පලමුවැනිදා සිට ගතවූ තත්පර ගනන වේලාව ලෙස දක්‌වන ක්‍රමයයි. කොටින්ම කියනවා නම් පරිගනකය වේලාව බලන්නෙ unix time එකෙන්.

1970 ජනවාරි මස පලමුවැනිදා සිට තත්පර 1234567890 ගත වීමට තව වැඩි වේලාවක්‌ නැහැ :).

countdown

Techකතා - ටෙක්‌නොලොජි සිංහලෙන් !

2009-02-09T21:25:00.021+05:30

කාලයක ඉදන් හිතේ තිබ්බ අදහසක්‌ ඔන්න අපේ කට්‌ටිය එකතු වෙලා ක්‍රියාත්මක කෙරුව :). Techකතා. ටෙක්‌නොලොජි ගැන සිංහලෙන් කතා කරන අපි කාගෙත් වෙබ් අඩවියයි මේ!

මේක අපි කරන්නේ podcast එකක්‌ විදිහට. ඕනම කෙනෙක්‌ට තමන්ට මුහුනපාන්න සිද්ද වෙච්ච ටෙක්‌ ගැටලු ඉදිරිපත් කරන්න පුලුවන්. ගැටලු ඉදිරිපත් කිරීමේදී http://techkatha.com/contact/ හි ඇති ෆෝරමය එවීම, info(at)techkatha(dot)com වෙත පනිවුඩයක්‌ එවීම හෝ skype මගින් කතාකර ගැටලුව ඔබේ කටහදින්ම ඉදිරිපත් කිරීම කරන්න පුලුවන්. අපි හැම සතියකටම වරක්‌ එනවා ඒ ගැටලුවලට පිලිතුරු සහ තවත් විශේශාංග සමගින්.

දැනට අපි වැඩසටහන් තුනක්‌ම පලකරා නේ. ප්‍රතිචාර නම් උපරිමයි. ඉදිරියටත් හැකි උපරිම ලෙස වැදසටහන කර ගෙන යෑමට උත්සාහ කරනවා! නොවරදවා අහන්න :)

Google Search එකෙන් වැඩ ගමු

2008-12-18T13:29:00.004+05:30

Google Search එකෙන් වෙබ් පිටු සෙවුමට වඩා වැඩ රාශියක්‌ කරගන්න පුලුවන් නේ. මම අද හදන්නෙ ඉන් කිහිපයක්‌ ගැන කියන්නයි.

Google එකෙන් ගණන් හදමු

Google search එකෙන් පහසුවෙන්ම ගනන් හදන්න පුලුවන්. අවශ්‍ය ගාන සෙවුම් කොටුවේ ඇතුල්කර search බොත්තම ඔබන්න.

උදා - 5 x 5 සදහා සෙවුම් කොටුවේ 5*5 ඇතුල් කර සොයන්න.

විනිමය අනුපාත

ඇමරිකානු ඩොලර් 50 ක්‌ ලංකා රුපියල් වලින් කීයද? යන්න google, සොයන්න මේ විදිහට - 50 USD in LKR

සින්දු ලේසියෙන් හොයමු!

හදිස්‌සියට සින්දුවක්‌ හොයාගන්න ගූගල් සෙවුම් පිටු අස්‌සෙ සාමාන්‍ය විදිහට සොයලා කාලෙ කන්න ඕන නැහැ. ලේසියෙන්ම හොයාගන්න පුලුවන් මේ විදිහට හෙව්වොත්. සෙවුම් කොටුවේ මේ විදිහට සොයන්න intitle:index.of mp3 songtitle උදාහරනයක්‌ ලෙස Metallica ගෙ nothing else matters සොයමු. පහත රූපයේ පරිදි සෙවිය යුතුයි.

එන සෙවුම් ප්‍රතිඵල වලින් පලමු එකට ගිහින් බලමු.

ඔන්න අපිට පේනවා ඇපාචි ඩිරෙක්‌ටරි ලිස්‌ටින් ඉවත් නොකල වෙබ් ගොනුවක්‌. මෙයින් අවශ්‍ය සින්දුව ක්‌ලික්‌ කල පසු එය පරිගනකයට භාගත වේවි.

වෙලාව බලන්න

වේලව බලන්න මෙලෙස හොයන්න. what time is it 'city name'. උදා - what time is it new york

රටක ප්‍රධාන නගර වල වේලාවන් බලන්න අවශ්‍ය නම් what time is it සමග රට ඇතුල් කරන්න.

jQuery | sidemenu එකක්‌ හදමු

2008-12-12T20:54:00.001+05:30

ඔන්න ආපහු ආවා jQuery එක්‌ක. අද බලමු තවත් මෙනු එකක්‌ කොහොමද හදන්නෙ කියලා. මේකට මම භවිතා කරන්නේ next() . next() මගින් අපිට යම් element එකක ඊලගට ඇති element එක ගන්න පුලුවන්.

මුලින්ම අපි html list එකක්‌ මගින් මෙනු එකෙහි සැකැස්‌ම හදමු.

<ul id="nav">
    <li><a class="main" href="#">Home</a>
     <ul>
         <li><a href="#">my blog</a></li>
            <li><a href="#">my facebook profile</a></li>
            <li><a href="#">my website</a></li>
        </ul>
    </li>
    <li><a class="main" href="#">SBU</a>
     <ul>
         <li><a href="#">Sinhala Bloggers Union</a></li>
            <li><a href="#">Sinhala Blog Reader</a></li>
            <li><a href="#">MyBlog.lk</a></li>
            <li><a href="#">Sinhala Blogs Facebook App</a></li>
        </ul>
    </li>
    <li><a class="main" href="#">Links</a>
  <ul>
            <li><a href="#">google</a></li>
            <li><a href="#">youtube</a></li>
            <li><a href="#">facebook</a></li>
  </ul>
    </li>
    <li><a class="main" href="#">About Me</a></li>
    <li><a class="main" href="#">Contact</a></li>
</ul>

දැන් එය මෙසේ දිස්‌වේවී. දැන් අපේ මෙනු එක css මගින් style කරන්න වෙලාව.

පිටුවේ ඇති සියලුම element වල padding සහ margin, 0 කිරීම සදහා css ගොනුවට * { margin:0; padding0; } කේතය අතුල් කරනවා. ඉන් පසු ul (unordered list) එකෙහි li (list item) වල bullet එක ඉවත් කිරීමට සහ එක li තුල ඉඩ ලබා දීමට li { list-style:none; line-height:36px; display:inline; } ලෙස යොදනවා. menu එකෙහි ප්‍රමානය රඳවා ගැනීමට මම wrapper div එකක්‌ තුලට menu list එක දමා තිබෙනවා. එහි පලල 350px ලෙස දෙමු.

* { 
    margin:0; 
    padding:0; 
}

li { 
    list-style:none; 
    line-height:36px;  
    display:inline; 
}

#wrapper { 
    width:350px; 
    margin:30px 0 0 30px;
}

එලෙසම මෙනු එකෙහි ලින්ක්‌ සදහා css style ලබා දෙමු.

#nav li a, #nav li a:visited { 
    display:block; 
    color:#fff; 
    text-decoration:none; 
    padding-left:15px; 
    font-family:Georgia, "Times New Roman", Times, serif; 
    font-style:italic; 
    font-size:22px; 
    border-bottom:1px solid #fff; 
    background:#3b5998 url(arrow.gif) top right no-repeat; 
}
#nav li a:hover, a.active_link { 
    background-position:bottom right!important; 
}

#nav li ul li a, #nav li ul li a:visited { 
    font-weight:normal!important; 
    color:#3b5998!important; 
    background:#d8dfea!important; 
}
#nav li ul li a:hover { 
    background:#c6d5ed!important; 
}

මෙහි ලින්ක්‌ එකේ පසුබිම් රූපයක්‌ ලෙස මම කුඩා ඊතලයක රූපයක්‌ photoshop මගින් සාදා ගත්තා. පහත ආකාරයට එම රූපයේ ඉහල කොටසින් ලින්ක්‌ එකෙහි සාමාන්‍ය පෙනුමත් පහල කොටසින් ලින්ක්‌ එක hover කල පසු පෙනුමත් දැක්‌වෙන ලෙස රූපය සාදාගෙන තිබෙනවා.css මගින් ලින්ක්‌ hover එක කල විට පසුබිම් රූපයේ පිහිටීම වෙනස්‌ කිරීමෙන් අපිට මෙනු එකෙහි දැක්‌වෙන ආකාරයේ effect එක ලබාගන්නට පුලුවන්.

දැන් අපේ මෙනු එක css style සමග මෙසේ පෙනේවි.

සම්පූර්ණ css කේතය

* { 
    margin:0; 
    padding:0;
}

#wrapper {  
    width:350px;  
    margin:30px 0 0 30px; 
}

li {  
    list-style:none;  
    line-height:36px;
    display:inline;
}

#nav li a, #nav li a:visited {  
    display:block;  
    color:#fff;  
    text-decoration:none;  
    padding-left:15px;  
    font-family:Georgia, "Times New Roman", Times, serif;  
    font-style:italic;  
    font-size:22px;  
    border-bottom:1px solid #fff;  
    background:#3b5998 url(arrow.gif) top right no-repeat; 
}

#nav li a:hover, a.active_link {  
    background-position:bottom right!important; 
}

#nav li ul li a, #nav li ul li a:visited {  
    font-weight:normal!important;  
    color:#3b5998!important;  
    background:#d8dfea!important; 
}

#nav li ul li a:hover {  
    background:#c6d5ed!important; 
}

දැන් අපි jquery මගින් මෙනු එකට සජීවී බවක්‌ එකතු කරමු. ප්‍රථමයෙන් jquery ගොනුව ඔබේ පිටුවට එකතු කරගන්න. නවතම ගොනුව jquery.com වෙතින් ලබා ගන්නට පුලුවන්.

$(document).ready(function(){
    $('#nav li ul').hide();
    $('#nav li a.main').click(function(){
        $('#nav li ul:visible').slideUp('normal');
        $('.active_link').removeClass('active_link');
        $(this).addClass('active_link').next().slideDown('slow');
    });
});

මුලින්ම අපි sub menu සගවමු. මේ සදහා document ready function හි $('#nav li ul') මගින් #nav හි සියලු li තුල ඇති ul ලබාගෙන (එනම් sub menu), hide() මගින් ඒවා සැගවිය හැකියි.

ඉන්පසු මෙනු එකෙහි main class එක සහිත සියලු ලින්ක්‌ සඳහා click function එකක් යොදනවා.එ තුල මුලින්ම කර ඇත්තේ දැනටමත් sub menu විවෘතව ඇත්ද යන්න බැලීමයි. විවෘතව ඇත්නම් ඒවා slide up වෙනවා. මෙහි active_link class එක භාවිතා කරන්නේ ලින්ක්‌ එකෙහි පසුබිම් රූපය වන ඊතලය වෙනස්‌ කිරීම සදහායි. active link class එක ලින්ක්‌ එකට යෙදූ විට ඊතලය පහලට යොමුවී තිබෙන අතර active link class එක ලින්ක්‌ එකේ නැති විට ඊතලය දකුණට යොමු වෙනවා.

අවසාන පේලියෙන් කියන්නේ ඔබ ක්‌ලික්‌ කල ලින්ක්‌ එකට ($(this)), active_link class එක එකතු කරන ලෙසත් ඉන් පසු එම ලින්ක්‌ එකට පසුව ඊලගට ඇති element එක වන sub menu එක slide down කරන ලෙසයි.

අවසාන ප්‍රතිඵලය මෙසේ දිස්‌වේවි.

facebook app | සිංහල බ්ලොග් කියවනය

2008-11-27T09:40:00.005+05:30

දැන් කාගෙ කාගෙත් කාලය වැඩියෙන් වැය කරන්නෙ facebook එකේ නේ. ඔන්න ඒක නිසා හැදුව පොඩි facebook application එකක්‌ සිංහල බ්ලොග් කියවනයේ අලුත්ම ලිපි පෙන්වන්න. මේක තාම ප්‍රාථමික මට්‌ටමේ තියෙන්නෙ. දාල ම බලන්න කො. ඉදිරියට තව අංග රාශියක්‌ එකතු කිරීමට බලාපොරොත්තු වෙනවා.

http://apps.facebook.com/sinhala_blogs/

අවශ්‍ය නම් මෙය 'profile tab' ලෙස එකතු කරන්නත් පුලුවන්. ඉහත සබැඳියට පිවිසීමෙන් පසු ඔබේ 'profile' එකට ගොස්‌ එහි ඇති (+) ලකුන ඔබා එන සෙවුම තුල 'sinhala blogs' සොයන්න.

jQuery | Contact From එකක්‌ හදමු

2008-11-26T21:00:00.007+05:30

වෙබ් අඩවියක වැදගත් අංගයක්‌ නේ contact form එක. අපි අද බලමු කොහොමද jquery/php/ajax භාවිතයෙන් එකක්‌ හදන්නෙ කියලා. හුගක්‌ වෙබ් අඩවි වල මේ පිලිබඳ සටහන් තිබුනත්, සිංහලෙන් වැඩි විස්‌තර නැති නිසා මම හිතුවා මේ ගැන ලියන්න.

අවසාන ප්‍රතිඵලය මුලින්ම බලලම ඉමු. කිසිම කොටුවක්‌ සම්පූර්ණ නොකර send බොත්තම ඔබා බලන්න. මෙහි fileds පුරවන්නෙ නැතිව send බොත්තම එබුවොත් පනිවුඩයක්‌ දිස්‌ වෙනවා එම fields සම්පූර්ණ කරන ලෙස ඉල්ලමින්. නැවත එම fields සම්පූර්ණ කල පසු පමනයි form එක submit වන්නේ.

අපි form layout එකෙන් පටන්ගමු.

html

<div id="wrapper">
 <h1>Contact Form</h1>
    <ul id="response">
     <li class="process">Processing..</li>
    </ul>
 <form method="post" action="send.php">
     <label for="name">Name</label>
        <input type="text" name="name" id="name" />
        <label for="email">Email</label>
        <input type="text" name="email" id="email" />
        <label for="message">Message</label>
        <textarea id="message" name="message" cols="20" rows="5"></textarea>
        <input type="button" value="send" id="send" name="submit" />
    </form>
</div>

css

* {
 padding:0; 
 margin:0;
}

body { 
 font-family:Verdana, Arial, Helvetica, sans-serif; 
 font-size:12px; 
 padding-top:30px; 
}

#wrapper { 
 width:500px; 
 margin:0 auto; 
 padding:20px; 
 background:#f9f9f9; 
 border:1px solid #ddd; 
}

label { 
 display:block; 
 padding:10px 0 5px; 
}

input, textarea { 
 width:490px; 
 border:1px solid #ddd!important; 
 padding:5px!important; 
}

input#send { 
 margin-top:15px; 
 width:100px; 
 text-align:center; 
 font-weight:bold; 
 background:#ddd; 
}

ul#response { 
 list-style-position:inside; 
 padding:20px 0 10px; 
}

ul#response li { 
 color:#c00; 
}

.sent { 
 color:#090!important; 
 list-style:none; 
}

jQuery

jquery.com වෙබ් අඩවියෙන් අලුත්ම jQuery ගොනුව ලබාගෙන ඔබේ පිටුවට link කරගන්න. මෙම form එක සඳහා අපි jquery හි ajax යෙදුම භාවිතා කරනවා. එය කරන්නෙ මෙහෙමයි. පහතින් පේලියෙන් පේලිය විස්‌තර කරන්නම්.

$(document).ready(function(){
  $('.process').hide();
  $('#send').click(function(){
    $('.process').fadeIn('fast');
      var name = $('#name').val();
      var email = $('#email').val();
      var message = $('#message').val();      
      $.ajax({
        type: 'post',
        url: 'send.php',
        data: 'name=' + name + '&email=' + email + '&message=' + message,
        success: function(msg{
          $('.process').fadeOut(1000);    
          $('#response').html(msg);
        }
      });
  });
});

පලවන පේලියෙන් සුපුරුදු පරිදි ආරම්භ වීමට ප්‍රථම පිටුව පූරණය වන තෙක්‌ සිටිනවා.

දෙවන පේලියෙන් කරන්නේ අපේ තාවකාලික පනිවිඩය ෆෝරමයේ send බොත්තම ඔබන තෙක්‌ සගවා තබා ගැන්ම.

තුන් වන පේලියේදී #send id එක සහිත send බොත්තම සදහා click function එකක්‌ යොදනවා. එනම් බොත්තම එබූ පසු එම වරහන් තුල ඇති කේතය (4 සිට 16 දක්‌වා පේලි) ක්‍රියත්මක වෙනවා.

හතරවන පේලියෙන් තාවකාලික පනිවිඩය පෙන්වනවා.

5, 6, 7 පේලි මගින් භාවිතයේ පහසුව සදහා අදාල id සහිත input සහ textarea වෙතින් එන අගයන් (values) විචල්‍යන්ට දමා ගන්නවා.

8 - 16 පේලි ajax post එක සදහායි. මෙහි මම භාවිතා කරන සැකසුම කොටස්‌ හතරකින් සමන්විතයි.type - යවන ආකාරය, url - යවන්නේ කුමන ගොනුවටද, data - යවන දත්තයන් සහ success - ලැබෙන ප්‍රතිචාරය එම කොටස්‌ හතරයි.

මෙහිදී මම ඊමේල් පනිවිඩය යෑවීමට 'phpMailer' නමැති නොමිලේ ලබාගත හැකි php class එක පාවිච්චි කරනවා. ඔබේ සර්වරයේ php version එකට ගැලපෙන ගොනුව phpMailer වෙතින් ලබාගන්නට පුලුවන්.

එම phpMailer ෆෝල්ඩරයත් ඔබේ contact form එක ඇති ෆෝල්ඩරය තුලටම දමන්න.

දැන් ඇත්තේ send.php ගොනුව php මගින් සාදා ගැනීමයි. මෙය ඉතා පහසුවෙන් phpMailer හි example ගිනු පිරික්‌සීමෙන් සාදාගන්නට පුලුවන්. අපේ contact form එක සඳහා සරල validation සහිත send.php ගොනුවක්‌ පහත පරිදි ලියන්න පුලුවන්.

<?php
 
 $name = trim($_POST['name']);
 $email = $_POST['email'];
 $message = $_POST['message'];
 
 $site_owners_email = 'youremail@email.com'; // ඔබේ ඊමේල් ලිපිනය යොදන්න 
 $site_owners_name = 'your name'; // ඔබේ නම යොදන්න 
 
 if (strlen($name) < 2) {
  $error['name'] = "Please enter your name"; 
 }
 
 if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
  $error['email'] = "Please enter a valid email address"; 
 }
 
 if (strlen($message) < 3) {
  $error['message'] = "Please leave a comment.";
 }
 
 if (!$error) {
  
  require_once('phpMailer/class.phpmailer.php');
  $mail = new PHPMailer();
  
  $mail->From = $email;
  $mail->FromName = $name;
  $mail->Subject = "Website Contact Form";
  $mail->AddAddress($site_owners_email, $site_owners_name);
  $mail->Body = $message;
    
  $mail->Send();
  
  echo "<li class='sent'>Thank You " . $name . ". We recived your message.</li>";
  
 }
 else {

  $response = (isset($error['name'])) ? "<li>" . $error['name'] . "</li> \n" : null;
  $response .= (isset($error['email'])) ? "<li>" . $error['email'] . "</li> \n" : null;
  $response .= (isset($error['message'])) ? "<li>" . $error['message'] . "</li>" : null;
  
  echo $response;
 }

?>

දැන් සියල්ල සූදානම්. ගැටලු ඇත්නම් comment මගින් විමසන්න.

සම්පූර්ණ කේතය මෙතනින් ගන්න

'මචං' එල මචන්

2008-11-09T07:36:00.000+05:30

මරු මූවි එක මචන්.. කාලෙකින් බැලුවෙ හොද සිංහල චිත්තරපටියක්‌.. ෆිල්ම්හෝල් එකෙන් එලියට එද්දි කාගෙත් මූනු හිනාවෙන් පිරිලා..

jQuery | සරල jQuery වැඩ කිඩ

2008-10-27T10:53:00.013+05:30

ඔන්න අපේ මලින්ත මලයත් දෙතුන් පාරක්‌ ම මතක්‌ කරපු නිසා හිතුන අද පොඩි jQuery වැඩ කෑලි ටිකක්‌ ලියන්න. jQuery ගැන කෙටි හැදින්වීමක්‌ සහ කෙටි ලිපියක්‌ මීට කලින් මම ලිව්වා. පහත සබැදි වලින් ඒවා බලන්න පුලුවන්.

jQuery javascript එකතුව ගැන කෙටි හැදින්වීමක්‌
jQuery එක්‌ක ලස්‌සන වෙන්න!
ඕනම element එකකට hover effect

අද අපි බලමු slide effect එකක්‌ කරන්නෙ කොහොමද කියලා.

උදාහරණය:

මගේ වෙබ් පිටුවේ ඉහල දකුණු කෙලවරේ contact me, click කර බලන්න. contact ෆෝරමයක්‌ පහලට එනු පෙනේවි. අද අපි හදන්න යන්නේ මීට සමාන දෙයක්‌.

අපි මුලින්ම පිටුවට toggle button එකක්‌ එකතු කරමු. මේ සදහා මම භවිතා කරන්නේ සාමාන්‍ය ලින්ක්‌ එකක්‌. මෙය වරක්‌ එබූ විට my_slide div එක පෙන්වීමටත් නැවත එබූ විට my_slide div එක නොපෙනී යාමටත් සකස්‌ කරමු.

html

<a href="#" class="my_button">show me the slide</a>

<div id="my_slide">
    <div id="container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

css

#my_slide { 
    width:300px; 
    margin-top:20px; 
    background:#CDEB8B; 
    overflow:hidden; 
}

#container { 
    padding:20px; 
}

අලුත්ම jQuery සංස්‌කරණය jQuery.com වෙතින් ලබා ගන්නට පුලුවන්. එය ඔබේ පිටුවට අමුණූ පසු පහත පරිදි කේතය ලියන්න.

javascript

<script type="text/ecmascript">
$(document).ready(function(){
    $('#my_slide').hide();
    $('.my_button').click(function(){
        $('#my_slide').slideToggle('slow');
        return false;
    });
});
</script>

මෙහි $('#my_slide').hide(); මගින් my_slide, div එක සගවනවා. ඉතිරි පේලි වලින් කියන්නේ ලින්ක්‌ එක එබූ පසු my_slide, div එකට ස්‌ලයිඩ් වෙන ලෙසයි.

සබැදිය බලන්න

නැවත හමුවෙමු !

css | css කෙටියෙන් ලියමු !

2008-10-21T11:27:00.003+05:30

css හිදී සමහර අවස්‌ථා වල අපට පේලි කිහිපයකින් ලියන දෙයක්‌ තනි පේලියකින් ලියන්නට පුලුවන්. මෙහි වාසි කිහිපයක්‌ තියෙනවා. ප්‍රධානම කරුන වන්නේ css ගොනුවේ ප්‍රමාණය (file size) අඩු වීමයි. මෙමගින් වෙබ් පිටු පරිශීලනය කරන විට ගොනු බාගත වීමට යන කාලය සැලකියයුතු ලෙස අඩු වෙනවා. තවත් කරුණක්‌ වන්නේ පසුව ගොනු වෙනස්‌ කිරීමට යාමේදී පහසුවෙන් අදාල අගයන් සොයාගැනීමට ඇති පහසුවයි.

padding

#myelement {
    padding-top:10px;
    padding-bottom:10px;
    padding-left:20px;
    padding-right:20px;
}

මෙම අගයන් හතරම තනි පේලියකින් ලිවිය හැකියි.මෙහි අගයන් යොදන්නේ දක්‍ෂිණාවර්තවයි. පලවෙනි අගය top-padding සදහාත් දෙවැනි අගය right-padding සදහාත් තුන්වෙනි අගය bottom-padding සදහාත් හතරවෙනි අගය left-padding සදහාත් යොදගන්නවා. එනිසා ඉහත පේලි හතර කෙටියෙන් මෙසේ ලියන්න පුලුවන්.

#myelement {
    padding:10px 20px 10px 20px;
}

මෙම උදාහරනයේ top-padding සහ bottom-padding දෙකම එක සමාන අගයක්‌. එලෙසම left-padding සහ right-padding සමාන අගයන්. එනිසා මෙය පහත පරිදි තවත් කෙටියෙන් ලියන්නට පුලුවන්. මෙසේ ලිවේම සදහා එකිනෙකට විරුද්ධ පැති වල අගයන් සමාන විය යුතුයි.

#myelement {
    padding:10px 20px;
}

margin

margin සදහාත් කෙටි ක්‍රම ඉහත padding පරිදිමයි.

#myelement {
    margin:10px 20px 10px 20px;
}

මෙමගින් කියවෙන්නේ top-margin, right-margin, bottom-margin, left-margin සදහා අගයන් පිලිවෙලින් 10px, 20px, 10px 20px වන බවයි.

background (පසුබිම)

#myelement {
    background-color: #356AA0;
    background-image: url("mybackground.jpg");
    background-position: top left;
    background-repeat: no-repeat;
}

background සදහා දීර්ඝ ක්‍රමය මෙවැනියි. මෙහි පසුබිම් වර්ණය, පසුබිම් රූපය, පසුබිම පිහිටවියයුතු ස්‌තානය සහ පසුබිම repeat වෙනවාද යන්න දක්‌වලා තියෙනවා.

එයම කෙටියෙන් මෙලෙස ලියන්න පුලුවන්.

#myelement {
    background:#356AA0 url("mybackground.jpg") no-repeat top left;
}

මේකෙදි මුල්ම අගය වෙන් වන්නේ පසුබිම් වර්නයට..ඊට පසු අගය පසුබිම් රූපය සදහා.. ඉතිරි අගයන් පිලිවෙලින් පසුබිම් රූපය repeat විය යුතු ආකාරය සහ පසුබිම් රුපයේ පිහිටීම පෙන්වනවා. මෙම පිහිටීම පික්‌සල් අගයකින් හෝ ප්‍රතිශතයක්‌ වශයෙනුත් ලබා දෙන්න පුලුවන්. 0 0 යනු ඉහල වම් කෙලවරයි. එලෙසම 0% 0% ඉහල වම් කෙලවරයි.

තවත් කෙටි මං ඉදිරියට !

පුලුවන්නම් විසදන්න - දෙවන කොටස

2008-10-08T08:02:00.001+05:30

ඔන්න මේ පාර දානව ලේසි එකක්‌. පැල ගැන කතාවක්‌.

කතන්දරය

රුක්‌ රෝපන දිනය දවසෙ මට පැල හතරක්‌ හම්බුනා හිටවන්න. අපේ තාත්තා ගණන් සර්. මට අවිත් කියනවා පුලුවන් නම් ඔය පැල හතර එකිනෙකට සම දුරින් හිටවන්න කියල. මම කල්පනා කරල කරල කරල කරල කොහොමහරි වැඩේ කෙරුව.

ප්‍රශ්නය

මම කොහොමද පැල හතර එකිනෙකට සම දුරින් පැල කරේ ?

පුලුවන්නම් විසදන්න - පලමු කොටස - පිලිතුර

2008-10-07T11:40:00.005+05:30

ප්‍රශ්නය

පුලුවන්නම් විසදන්න - පලමු කොටස

පිලිතුර

ඔන්න එහෙනම් මම දාන්නම් උත්තරේ පින්තූරයකුත් එක්‌ක.

පෘතුවිය ගෝලාකාරයි. මිනිස්‌සු විවිධාකාරයි. :D. මේ ගැටලුව විසදද්දි පෘතුවියේ ගෝලාකාර බව අනිවාර්යෙන් සැලකිල්ලට ගන්න ඕන. මධ්‍යහ්න රේඛා උතුරු පැත්තට යද්දි ලං වෙනවා. එනිසා රූපයේ පෙනෙන විදිහට ලෙනින්ග්‍රාද් වලට නැගෙනහිර දෙසින් තමයි හෙලිකොප්ටරය ගොඩබාන්නේ. ගොඩ බෑ ස්‌තානයේ සිට ගමන පටන් ගත් තැනට දුර අක්‍ෂාංශ දේශාංශ ඇසුරෙන් සොයන්න පුලුවන් :D
*පින්තූරෙ ගත්තෙ අර මම කියපු වයි. පෙරල්මාන් ගෙ රුසියන් ගනන් පොතෙන්

මුලින්ම නිවැරදි පිලිතුර දුන්නෙ චිරාන් මල්ලිට සුබපැතුම්. පස්‌සෙ නිවැරදි පිලිතුරු දීපු යාලුවන්ටත් මෙන්න සැනසිලි සුබපැතුම්. හික්‌. උත්සාහ කල සැමටත් ස්‌තුතියි.

තවත් ගැටලුවක්‌ ලගදීම බලාපොරොත්තු වන්න!

පුලුවන්නම් විසදන්න - පලමු කොටස

2008-10-06T09:02:00.003+05:30

මම පොඩි කාලෙ ඉදන් ආස වැඩක්‌ තමයි ගණිත ගැටලු විසදන එක. අපේ බ්ලොගර් කට්‌ටිය එක්‌කත් බෙදාගන්න හිතුන. මුලින්ම මම අහන්න හදන්නෙ පරන රුසියන් ගණන් පොතක තිබ්බ ප්‍රශ්නයක්.comments වල උත්තරේ දාන්න. කාටවත් බැරි උනොත් ඉතින් මම දානව උත්තරේ හෙට (08).

කතන්දරය

ලෙනින්ග්‍රාද්* වල ඉදලා හෙලිකොප්ටරයක්‌ කෙලින්ම උතුරට කිලෝමීටර 500 ගියා. ඊට පස්‌සෙ නැගෙනහිර දිශාවට හැරිලා තවත් කිලෝමීටර 500 ගියා. ආපසු දකුනු දිශාවට හැරිලා තවත් කිලෝමීටර 500 ගියා. අන්තිමට බස්‌නාහිර දිශාවට කිලෝමීටර 500 ගිහින් ගොඩබෑවා.
* ලෙනින්ග්‍රාද් කියන්නේ රුසියාවේ ශාන්ත පීටර්ස්‌බර්ග් නගරයටමයි

ප්‍රශ්නය

හෙලිකොප්ටරය ගොඩබෑවේ කොහාටද ?

google එකේ කැත වැඩ

2008-10-05T11:41:00.002+05:30

youtube එකේ දැන් හරියකට එකක්‌ බලාගන්න බෑ. This video is not available in your country කියල පනිවිඩයක්‌ එනව නේ. proxy අස්‌සෙ රිංගන්න ඕන ඒක බලන්න. එපා වෙනව

ඒ අස්‌සේ firefox එකේදි google toolbar එකේ gamil icon එක එබුවමත් එනව පනිවිඩයක්‌ chrome දාගන්න කියල (supported browser list එකේ උඩින්ම තියෙන්නෙ chrome) .පිටුව ආපහු refresh කලාම තමයි ඒක වැඩ කරන්නේ.

ඒත් ඉතින් අපි හැමදාම google ට අදරෙයි :D. google වලින් තොර ලොවක්‌ නැහැ නෙ දැන්

Google Chrome අලුත්ම බ්‍රව්සරය

2008-09-02T20:56:00.006+05:30

Official Google Blog: A fresh take on the browser

google chrome beta මෙතනින් බාගත කරන්න !

- ටැබ් වෙන වෙනම process වෙන අතරම එක ටැබයක්‌ crash වූවත් බ්‍රවුසරය අක්‍රිය නොවේ.

- අද කාලයේ වැදගත් අංගයක්‌ වන javascript කාර්යක්‍ෂමව ක්‍රිය කරයි.

- තවත් අංග ගනනාවක්‌ ඉතා ආකර්ශනීය ලෙස මෙම චිත්‍ර කතා පෙලේ පැහැදිලි කෙරේ

google chrome චිත්‍ර කතාව

css | සරල css ඉගි

2008-09-01T16:35:00.001+05:30

බ්‍රවුසර් කවුලුවේ මැදට පිටුව ගන්න හැටි

හරිම ලේසියි. main container (උදාහරණය අනුව wrapper) එකේ margin පහත පරිදි දෙන්න. මෙහි 0 යන්නෙන් උඩ මාජින් (margin-top) සහ auto යන්නෙන් දකුණුපස මාජින් (margin-right) අගයන් පෙන්වයි.

html

<div id="wrapper">
    <div id="content">
        site content goes here
    </div>
</div>

css

#wrapper { margin:0 auto; width:500px; }

#content { }

සබැදිය බලන්න

තීරු (columns)

floating කියන්නෙ css වල වැදගත්ම කොටසක්‌. අපි බලමු සරල තීරු 2ක පිටුවක්‌.

html

<div id="wrapper">
    <div id="header">
        header content goes here
    </div>
    <div class="column">
        column-1 content goes here
    </div>
    <div class="column">
        column-2 content goes here
    </div>
</div>

css

#wrapper { 
    margin:0 auto; 
    width:500px; 
    padding:20px;
}

#header { 
    padding:20px; 
    font-size:200%; 
}

.column { 
    float:left;
    width:230px;
    padding:10px;
    text-align:justify;
}

සබැදිය බලන්න

දැන් අපි එකට පසුබිම් වර්ණයක්‌ දාල බලමු

css

#wrapper { 
    margin:0 auto; 
    width:500px; 
    padding:20px;
    background:#ccc;
}

සබැදිය බලන්න

වැඩේ හරිගියේ නෑ නේද. ෆයර් ෆොක්‌ස්‌ හි wrapper එකට දාපු පසුබිම් වර්නය පිටුවෙ උඩ කොටසේ පමනයි පෙනෙන්නෙ. මේකට හේතුව කලින් තීරු float කිරීම. මෙය නිවැරදි කරන්න අපිට float එක clear කරන්න වෙනව. ඒ සදහා පහත පරිදි float clear කල හිස් div‌ එකක්‌ යොදාගන්න පුලුවන්.

html

<div id="wrapper">
    <div id="header">
        header content goes here
    </div>
    <div class="column">
        column-1 content goes here
    </div>
    <div class="column">
        column-2 content goes here
    </div>
    <div class="clearfloat"></div>
</div>

css

#wrapper { 
    margin:0 auto; 
    width:500px; 
    padding:20px;
    background:#ccc;
}

#header { 
    padding:20px; 
    font-size:200%; 
}

.column { 
    float:left;
    width:230px;
    padding:10px;
    text-align:justify;
}

.clearfloat{
    clear:both;
}

සබැදිය බලන්න

තවත් ඉගි පසුවට!

css | absolute/relative position ගැන

2008-08-28T14:08:00.019+05:30

වෙබ් අඩවියක්‌ සැදීමේදි අපි පාවිච්චි කරන div ස්‌තානගත කිරීමට ක්‍රම කිහිපයක්‌ තියෙනවා. සාමාන්යෙන් අපි div එකක්‌ පිටුවට අතුලත් කල පසු එහි සම්මත පිහිටීම (default) වන්නේ position:static .පිටුවට තව තවත් div එකතු කරන විට ඒවා ක්‍රමානුකූලව කලින් එකතු කල div වලට පහලින් ස්‌තානගත වෙනවා. මෙලෙස ක්‍රමානුකූලව යටින් එකතු කරනවා වෙනුවට අපිට අවශ්‍ය තැනකට කෙලින්ම div එකක්‌ එකතු කරන විට අපි පාවිච්චි කරන්නේ "absolute position". මෙය css හි position:absolute ආකාරයට ලියන්න පුලුවන්.

උදාහරණය:

සබැදිය බලන්න

html

<div id="wrapper">
<div id="div1">div 1 content here</div>
<div id="div2">div 2 content here</div>
</div>

css

#div1 { }

#div2 { }

රූපයේ දක්‌වා ඇති පරිදි පිටුවට div1, div2 වශයෙන් div එකතු කර තිබෙනවා. එම div වල position සදහා අපි වෙනම අගයන් css වලින් ලබා දී නැහැ (default). එමනිසා ඒවා පවතින්නේ position:static වශයෙන්. දැන් අපි div3 නමින් තවත් div එකක්‌ එකතු කරමු. මෙහි position එකත් default අගය නිසා එය div2 එකට යටින් එකතු වෙනවා.

සබැදිය බලන්න

html

<div id="wrapper">
<div id="div1">div 1 content here</div>
<div id="div2">div 2 content here</div>
<div id="div3">div 3 content here</div>
</div>

css

#div1 { }

#div2 { }

#div3 { }

අපි සිතමු අපිට div3 එක div1 මතට පහත රූපයේ ආකාරයට එකතු කිරීමට අවශ්‍යයි කියා. එවිට තමයි 'Absolute Positioning' අවශ්‍ය වන්නේ.

මෙහිදී අපි div 3 සදහා position:absolute ලෙස ලබා දෙනවා. වම් පැත්තෙන් පික්‌සල් 50ක ඉඩක්‌ අවශ්‍ය නිසා left:50px; වශයෙන් ලබා දෙනවා. (අවශ්‍ය තැනකට div 3 ස්‌තානගත කිරීම සදහා css හි top, right, bottom, left යොදාගන්න පුලුවන්.

css

#div1 { }

#div2 { }

#div3 { 
    position:absolute;
    left:50px;
    top:0;
}

සබැදිය බලන්න

දැන් අපි fixed width වෙබ් අඩවියක්‌ සදහා මෙය යොදාගන්න ආකාරය බලමු.

html

<div id="wrapper">
<div id="div1">div 1 content here</div>
<div id="div2">div 2 content here</div>
</div>

css

#wrapper { 
    margin:0 auto;
    width:500px;
}

#div1 { }

#div2 { }

සබැදිය බලන්න

කලින් ආකාරයටම div 1 මතට div 3 දැමීමට උත්සාහ කරමු.

html

<div id="wrapper">
<div id="div1">div 1 content here</div>
<div id="div2">div 2 content here</div>
<div id="div3">div 3 content here</div>
</div>

css

#wrapper { 
    margin:0 auto;
    width:500px;
}

#div1 { }

#div2 { }

#div3 { 
    position:absolute;
    left:50px;
    top:0; 
}

සබැදිය බලන්න

අපිට අවශ්‍ය ආකාරයටම වැඩේ නැහැ නේද. අපි wrapper එක පික්‌සල් 500ක පලලකට සීමා කලත් div 3 එක පිටුව පුරාම තිබෙනවා. මෙයට හේතුව වන්නේ position absolute කල div බ්‍රවුසර කවුලුවේ ප්‍රමානයට අනුකූලව හැඩගැසීමයි. div 3 එක බ්‍රව්සර කවුලුවට වම් පැත්තෙන් පික්‌සල් 50ක්‌ ඈතින් ස්‌තානගත වී තිබෙනවා. මෙය නිවැරදි කරගැනීමට අපිට 'Relative Positioning' පාවිච්චි කරන්නට පුලුවන්. එවිට position:relative කල div තුල ඇති position:absolute කල div ක්‍රියා කරන්නේ එම position:relative කල div එකට අනුරූපවයි. උදාහරනයට අනුව div 3 එක ස්‌තානගත වන්නේ position:relative කල wrapper div එකට අනුවයි.

css

#wrapper { 
    position:relative;
    margin:0 auto;
    width:500px;
}

#div1 { }

#div2 { }

#div3 { 
    position:absolute;
    left:50px;
    top:0; 
}

සබැදිය බලන්න

ඔන්න දැන් හරි!

මම හැකි තරම් පැහැදිලි කරන්න උත්සාහ කලා. ගැටලු ඇත්නම් ඉදිරිපත් කරන්න.

නැවත මායා ලෝකයට - world of warcraft

2008-08-20T20:28:00.005+05:30

විවේකයක්‌ ලැබෙන වෙලාවට සෙල්ලම් කොරන්න අපහු මගේ World of Warcraft account එක activate කරා!. මාස ගානකට පස්‌සෙ නෙ ආපහු login උනේ. බලද්දි අපේ පරන guild එකේ කට්‌ටිය කවුරුත් නැහැ. ඒකෙ බාගෙට බාගයක්‌ හිටියෙ ජපානෙ ඔකිනාවා ඇමරිකන් හමුදා කදවුරේ මෙරීන් සෙබලු. ඒ කට්‌ටියට ඉරාකෙ යන්න වෙලා. ඉරාකෙ ඉදෙද්දි මොන ගේම් ද. ඒක නිසා මම අලුත් guild එකකට බැදුනා.The High Council guild එක US Terenas Server එකේ ඉන්න හොද කන්ඩායමක්‌. අලුත් අත්දැකීම් ගොඩක්‌ ලබාගන්න අවස්‌තා උදා වේවි මේ පාර.

බලු පැටියගෙ නිදිමත

2008-08-10T20:19:00.001+05:30

හි හි.. අවුරුද්දට අපේ ආත්තම්මගේ ගෙදර ගියාම වීඩියෝ කරේ. නම ස්‌නෝවි. වයස මාසයයි. ඉපදිලා තියෙන්නේ අප්‍රේල් 1 වෙනිදා. හි හි.

YouTube පිටුව

ටොරන්ට්‌ (torrent) වේගවත් කරගන්න ඉගි

2008-08-10T12:36:00.004+05:30

මම පවිච්චි කරන්නේ SLT ADSL 512 Home අන්තර්ජාල සම්භන්දතාවයක්‌. මෙහි ටොරන්ට්‌ 50kB/s වේගය පහසුවෙන්ම ලගාවිම සදහා මම භවිතා කරන ටොරන්ට්‌ මෘදුකාංගය සහ එහි සැකසුම් ගැනයි මේ.

මගේ ප්‍රියතම ටොරන්ට්‌ ඩවුන්ලෝඩරය µTorrent.

ඉතාම සැහැල්ලු මෘදුකාංගයක්‌ වන මෙය windows සදහා මෙතනින් බාගත කරගන්නට පුලුවන්.(260kB)

filesize අතින් ඉතා කුඩා වන අතරම ප්‍රොසෙසර් පාවිච්චිය ද ඉතා අඩුයි. සාමාන්‍ය ප්‍රොසෙසරයක µTorrent සමග අනිකුත් වෙනත් වැඩසටහන් පාවිච්චි කිරීමට කිසිම අපහසුවක්‌ නැහැ. ඒ වාගේම ටොරන්ට්‌ වේගවත් කරගැනීම සදහා මෙහි සැකසුම් රාශියක්‌ අඩංගුයි.

ඔබ අන්තර්ජාලයට පිවිසීම සදහා භවිතා කරන්න්නෙ රවුටරයක්‌ (router) නම් port forward කිරීම මගින් ටොරන්ට්‌ වේගය වැඩිකරගත හැකියි. මේ සදහා µTorrent ස්‌තාපනය කල පසු එහි Options > Speed Guide.. වෙත ගොස්‌ Current Port අගය පිටපත් කරගන්න

ඉන්පසු ඔබේ රවුටරයේ port forwarding හෝ virtual servers වෙත ගොස්‌ එම current port අගය ඔබේ ටොරන්ට්‌ බාගත කරන පරිගනකයේ IP ලිපිනයට forward කරන්න. සියලුම රවුටර වර්ග සදහා port forwarding විස්‌තර portforward.com වෙබ් අඩවියෙන් ලබාගත හැකියි.

512 අන්තර්ජාල සම්බන්දතාවයේදී ඔබේ ටොරන්ට්‌ upload වේගය 6-10kB/s අතර පවත්වා ගැනීම මගින් ටොරන්ට්‌ වේගය වැඩිවන අතර ටොරන්ට්‌ බාගත කරන අතරතුර වෙබ් අඩවි වලට පිවිසීම පහසු වේ.

ඒ අතරම ටොරන්ට්‌ බාගත කිරීමෙදී seeds/peers අගය ගැන සැලකිලිමත් වන්න.seeds 100 සහ peers 500 ට වඩා පහසුවෙන් seeds 100, peers 100 ඇති ටොරන්ට්‌ එක බාගත වේවි.

ශ්‍රි ලංකා සයිබර් ගේම්ස්‌ 2008

2008-07-31T18:53:00.001+05:30

yuthmax.com සදහා රචිත ලිපියකි.

ශ්‍රි ලංකාවේ පරිගණක ක්‍රිඩා ජාත්‍යන්තර තලයට ගෙනයෑම සදහා gamer.lk සහ කොලඹ විශ්ව විද්‍යාලයේ විද්‍යා අංශයේ රොට්‍රැක්‌ට්‌ සමාජය සමග එකමුතුව ශ්‍රි ලංකා සයිබර් ගේම්ස්‌ 2008 ප්‍රථම වතාවට පවත්වනු ලබනවා.

මෙය පැවැත්වෙන්නේ අගෝස්‌තු මස 15, 16 සහ 17 යන දින වල උදේ 10.00 සිට සවස 5.00 දක්‌වා බණ්‌ඩාරනායක අනුස්‌මරණ සම්මන්ත්‍රණ ශාලාවේදියි.

WCG තලයට ශ්‍රි ලාංකීය පරිගණක ක්‍රීඩකයන් ගෙනයැමට මෙය මහත් රුකුලක්‌ වේවි.

මෙම තරගාවලිය සදහා පහත පරිගණක ක්‍රිඩා සදහා ඔබටත් අයදුම් කරන්නට පුලුවන්.

Counter Strike 1.6
Call of Duty 4
DOTA
Starcraft: Broodwar
FIFA 08

මේ තරගාවලිය සදහා මා නියෝජනය කරන 'Hallucination' පරිගණක ක්‍රිඩා කණ්‌ඩායම ද සහභාගි වීමට බලාපොරොත්තු වනවා.

ඉක්‌මන් කරන්න. www.slcg.lk අදම ලියාපදිංචි වන්න. අලුත් අත්දැකීම විදගන්න!

css වලින් menu හදමු

2008-07-28T13:02:00.012+05:30

වෙබ් අඩවි වලට menu හදද්දි අපි බොහෝ වෙලාවට mouseover එකේදි මෙනුවේ රූපය වෙනස්‌ වෙන ආකරයට හදනවා. මේ ආකාරයේ menu සම්පුර්නයෙන්ම css භවිතයෙන් හදන්න පුලුවන්. මම පෙන්වන්නම් කරන හැටි.

පලවෙනි උදාහරණය

මෙලෙස menu එක සැදීමෙන් වාසි කිහිපයක්‌ තියෙනවා.

menu එකේ අයිතමයක සාමාන්‍ය පෙනුම සහ mouseover කල විට පෙනුම සදහා රූප දෙකක්‌ වෙනුවට අපි භාවිතා කරන්න්නේ එක රූපයයි. එනිසා පරිශීලකයා මෙනු අයිතමය mouseover කල සැනින් අපට අවශ්‍ය පෙනුම ලබා ගන්නට පුලුවන්. මන්ද mouseover සදහා වෙනම රූපයක්‌ පරිශීලකයාගෙ පරිගනකයට බාගත වීමට අවශ්‍ය නොවන නිසා.
ඒ වාගේම අනවශ්‍ය javascript භාවිතා නොකර css මගින් menu එක ක්‍රියාත්මක වන නිසා කේතය පැහැදිලියි.

මෙහිදී අපි කරන්නේ යම් සබැදුමක්‌(link) සදහා එම සබැදුමේ පසුබිම් රූපය(background-image) වෙනස්‌ කිරීමයි. එය කරන්නේ මෙහෙමයි.

සාමාන්‍ය පෙනුම සහ mouseover කල පසු පෙනුම යන දෙකම අඩංගු කර රූපය සාදාගත යුතුයි. උදාහරණය සදහා මම පහත රූපය යොදා ගන්නවා. එහි අලු පැහැති ඉහල කොටස සාමාන්‍ය පෙනුම සදහාත් කලු පැහැ පහල කොටස mouseover සදහාත් යොද ගන්නවා.

html කේතය

<a href="http://thilspage.blogspot.com" id="my-link"> </a>

css කේතය

#my-link {
    display: block;
    width: 325px;
    height: 80px;
    background-image:url(hoverlogo.jpg);
    background-position: top;
}

#my-link:hover {
    background-position: bottom;
}

ප්‍රතිඵලය

මෙම ක්‍රමය menu සදහා භවිතා කල හැකියි. පහත සබැදුම බලන්න.

පලවෙනි උදාහරණය

සම්පූර්ණ කේතය

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu</title>
<style>

#wrapper { 
    margin:50px auto; 
    width:600px; 
}

#top_navigation { 
    height:40px; 
    background:url(menu_bg.gif) repeat-x; 
}

a.top_nav_home:link, a.top_nav_home:visited { 
    display:block; 
    width:94px; 
    height:40px; 
    float:left; 
    background:url(home.gif) no-repeat top; 
}

a.top_nav_home:hover { 
    background-position:bottom; 
}

a.top_nav_about:link, a.top_nav_about:visited { 
    display:block; 
    width:94px; 
    height:40px; 
    float:left; 
    background:url(about.gif) no-repeat top; 
}

a.top_nav_about:hover { 
    background-position:bottom; 
}

</style>
</head>

<body>
    <div id="wrapper">
        <div id="top_navigation">
            <a class="top_nav_home" href="#"> </a>
            <a class="top_nav_about" href="#"> </a>
        </div>
    </div>
</body>
</html>

'මා ගැන' බොත්තමේ රූපය

ඔබේ අඩවියට ඔබේම favicon

2008-07-23T15:06:00.005+05:30

favicon කියන්නේ favorites අයිකොන් එකටයි. වර්ඩ්ප්‍රෙස්‌ හෝ බ්ලොගර් සම්මත favicon වෙනුවට ඔබටත් පුලුවන් ඔබේම favicon එකක්‌ යෙදීමට.

මෙම කුඩා රූපය සදහා jpg/png වැනි ග්‍රෆික්‌ ෆෝමැට්‌ එකක්‌ පාවිච්චි කරන්න පුලුවන් උනත් ico ෆෝමැට්‌ එක මෙන් සියලුම බ්‍රව්සර වල ක්‍රියා කරන්නේ නැහැ. ඒ නිසා අපි ico ෆෝමැට්‌ එකෙන් favicon එක සාදමු.

ඔබ භාවිතා කරන්නේ photoshop මෘදුකාංගය නම් මේ සදහා විශේෂ ප්ලගිනයක්‌ අවශ්‍යයි. මෙම වෙබ් අඩවියට ගොස්‌ එම plug-in එක ලබාගන්න. ඉන් පසු එය ඔබේ photoshop ෆෝල්ඩරයේ Plug-Ins\File Formats තුලට දමන්න.

Photoshop තුල 16x16 ගොනුවක්‌ විවෘත කර ඔබට අවශ්‍ය පරිදි රූපය සාදාගෙන File > Save As.. වෙත ගොස් Format dropdown‌ එකෙන් ICO තෝරා myfavicon.ico ලෙස save කරන්න. 16x16 තුල රූපය සෑදීමට අපහසු නම් 64x64 රූපය සාදා පසුව 16x16 දක්‌වා ප්‍රමානය අඩුකරගත හැකියි.

දැන් සාදාගත් favicon එක ඔබේ වෙබ් අඩවියට upload කර ඉන්පසු වෙබ් පිටුවේ <head> තුල පහත කේතය යොදන්න.

<link rel="shortcut icon" href="myfavicon.ico" />

ඔබේ බ්ලොග් එක තියෙන්නෙ බ්ලොගර් හි නම් ඔබට වෙනත් ස්ථානයක favicon එක upload කරන්නට සිදු වේවි. මගේ බ්ලොග් එකේ මම ඒ සදහා යොදාගෙන තිබෙන්නේ GooglePages. දැනට එහි ලියාපදිංචි වී නැත්නම් නව ගිනුමක්‌ ආරම්භ කර සාදගත් myfavicon.ico එක upload කරන්න.

ඔබේ බ්ලොගර් ගිනුමේ Layout වෙත ගොස්‌ Edit HTML විවෘත කරන්න. Edit Template කොටුවේ <head> ටැග් එක සොයාගෙන එයට යටින් පහත කේතය යොදන්න.

<link href='http://youraccount.googlepages.com/myfavicon.ico' rel='shortcut icon'/>
<link href='http://youraccount.googlepages.com/myfavicon.ico' rel='icon'/>

ඉන්පසු template එක save කරන්න

css | footer එක පිටුවේ යටටම ගන්න හැටි

2008-07-20T09:20:00.007+05:30

සාමාන්ය වෙබ් පිටු සැකසුමක් සලකමු.

<body>
<div id="wrapper">
 <div id="header">
      <h2>header</h2>
 </div>
 <div id="content">
      my content
 </div>
 <div id="footer">
  footer 
 </div>
</div>
</body>

උදාහරණය 1

මෙහි content කොටසෙහි අති දත්ත ප්රමානය අනුවයි එහි උස තීරණය වන්නේ.

පිටුවේ දත්ත ප්රමාණය හෝ පිටුව දර්ශනය වන resolution එක වෙනස් වෙද්දි සැම විටම පිටුවේ අන්තිමටම footer එක යොදන්නට අවශ්ය නම් එය කරන්නේ මෙහෙමයි.

මුලින්ම body සදහා 100% උසක් ලබා දෙමු. ඉන් පසු wrapper සදහා body එකේ ආකරයෙන්ම absolute position සහිතව 100% අවම උසක්(min-height) සහ පලලක් දෙමු.

body {
 margin: 0px;
 height: 100%;
}

#wrapper {
 display: block;
 position: absolute;
 min-height: 100%;
 width: 100%;
 top: 0px;
 left: 0px;
 z-index: 0;
}

මෙම අවම උස සදහා වන min-height ෆයර් ෆොක්ස්(Firefox) සහ සෆාරි(Safari) සදහා වැඩ කලත් IE සදහා වැඩ කරන්නේ නැහැ. ඒනිසා අපිට සිදු වෙනවා අමතර css ගොනුවක් සාදා එය <!--[if lte IE 6]> මගින් අපේ පිටුවට එකතු කරගන්න.

ඒ සදහා අපි iefix.css නමින් අලුත් css ගොනුවක් විවෘත කර එහි පහත පරිදි wrapper හි උස සදහා 100% ලබා දෙමු.

#wrapper {
 height: 100%;
}

අපේ පිටුවට iefix.css අමුනා ගැනීම සදහායි පහත කේතය භාවිත කරන්නේ.

<!--[if lte IE 6]>
 <link rel="stylesheet" type="text/css" href="iefix.css" />
<![endif]-->

if lte IE 6 පරීක්ෂා කර බලනවා බ්රව්සරය IE6 හෝ IE6 වලට වඩා අඩුද කියලා. එසේනම් පිටුවට iefix.css අමුනා දෙනවා.

පිටුවේ දත්ත අතුල්කරන කොටස වන content සදහා padding-bottom අගය අප භවිතා කරන footer හි උස හා සමාන විය යුතුයි. උදාහරනය සදහා footer හි උස 50px ලෙස සලකමු.

#content {
 padding-bottom: 50px;
}

අවසාන වශයෙන් footer සදහා css කේතය

#footer {
 display: block;
 position: absolute;
 left: 0px;
 bottom: 0px;
 width: 100%;
 height: 50px;
 z-index: 999;
}

අවසාන ප්රතිඵලය

සම්පූර්ණ කේතය

footerposition.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>footer position</title>
<link rel="stylesheet" type="text/css" href="footerposition.css" />
<!--[if lte IE 6]>
 <link rel="stylesheet" type="text/css" href="iefix.css" />
<![endif]-->
</head>

<body>
<div id="wrapper">
 <div id="header">
     <h2>Lorem ipsum dolor sit amet</h2>
    </div>
 <div id="content">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam rutrum ipsum. Pellentesque tempus mi non turpis. Etiam tortor. Donec posuere, nulla quis venenatis faucibus, ante nisi convallis enim, a vestibulum purus tortor in nunc. Sed at nisl. Quisque eu mauris. Fusce a sapien. Cras lectus elit, ullamcorper vel, vehicula in, lacinia vel, nisl. Maecenas hendrerit, nulla nec viverra rutrum, velit massa euismod erat, at imperdiet enim neque nec sem. Proin felis ligula, rutrum vitae, dictum ut, rhoncus tristique, neque. Vivamus suscipit feugiat diam. Duis urna eros, suscipit vitae, malesuada ac, commodo eu, mi. Praesent tincidunt feugiat purus. Aenean lobortis sem nec leo lobortis semper. Mauris metus. Nulla facilisi. Fusce nec tortor id pede hendrerit scelerisque. Donec pharetra molestie neque.
    </div>
    <div id="footer">
     footer content goes here
    </div>
</div>
</body>
</html>

footerposition.css

@charset "utf-8";
/* CSS Document */
body {
 margin: 0px;
 height: 100%;
}

#wrapper {
 display: block;
 position: absolute;
 min-height: 100%;
 width: 100%;
 top: 0px;
 left: 0px;
 z-index: 0;
}

#content {
 padding-bottom: 50px;
}

#footer {
 display: block;
 position: absolute;
 left: 0px;
 bottom: 0px;
 width: 100%;
 height: 50px;
 z-index: 999;
 background-color:#999999;
}

iefix.css

@charset "utf-8";
/* CSS Document */
#wrapper {
 height: 100%;
}

ඉදිරියේදි නිකුත් වෙන පරිගණක ක්රීඩා

2008-07-18T11:06:00.009+05:30

World of Warcraft - Wrath of the Lich King

ලොව පුරා මිලියන දහයකට අදික පිරිසක් ක්රීඩා කරන World of Warcraft, MMORPG පරිගණක ක්රීඩවේ නවතම ප්රකාශනය Wrath of the Lich King එලබෙන නත්තල් සමයේදි නිකුත් කිරීමට නියමිතයි. මෙහි පලවෙනි ප්රකාශනය නිකුත් වුනේ 2004 නොවැම්බර් මාසයෙදීයි. වයස් බේදයක් නැතිව ඕනැම කෙනෙකුට එක සේ සතුටු වියහැකි ක්රීඩාවකි මෙය. මෙම ක්රීඩාව ක්රියත්මක වන්නේ අන්තර්ජාලය හරහායි.

මම ක්රීඩා කරන චරිතය

Starcraft II

දැනට අවුරුදු 10කට පමන පෙර නිකුත් වූ පලවෙනි ප්රකාශනයෙන් පසු ලොව පුරා බොහෝ දෙනා බලාසිටි Starcraft 2 පරිගනක ක්රීඩාවත් ලගදීම නිකුත් වීමට නියමිතයි.

jQuery | ඕනම element එකකට hover effect

2008-07-14T23:28:00.009+05:30

ඉන්ටෙර්නෙට්‌ එක්‌ස්‌ප්ලොරර් 6 වල links හරුනුකොට වෙනත් element සදහා :hover pseudo-class එක වැඩ කරන්නේ නැහැ.

උදාහරණය 1 : firefox හි paragraph සදහා hover වැඩ කලත් ie6 හි වැඩ කරන්නේ නැහැ.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE hover test</title>
<style>
#wrapper { margin:20px auto; width:600px; }

.hover-me:hover { background:#eee; }
</style>
</head>

<body>
<div id="wrapper">
 <a class="hover-me" href="#">test link</a>
 <p class="hover-me">test paragraph</p>
</div>
</body>
</html>

ඉහත දැක්‌වෙන උදාහරණයේ හි link එක සදහා අලු පැහැති පසුබිම් වර්නයක්‌ mouse over කිරීමේදී දර්ශනය වූවත් paragraph (p) එක සදහා එය අපට අවශ්‍ය පරිදි ක්‍රියා කරන්නේ නැහැ.

මෙය හරි ආකාරව ක්‍රියාත්මක කර ගැනීම සදහා අපි jQuery භාවිතා කරමු.

අපි මෙහිදී කරන්නේ mouse over කරන අවස්‌තාවෙදී එම අදාල element එකට class එකක්‌ එකතු කිරීමයි.

උදාහරණය සදහා මම යොදා ගන්නේ hover-frosure class එකයි. එහි පසුබිම් වර්නය සදහ අලු පැහැය css මගින් යොදා තිබෙනවා.

.hover-forsure { background:#eee; }

දැන් අපි jQuery addClass මගින් hover වීමේදි hover-me paragraph class එක සදහා hover-forsure class එක යොදමු.

$(document).ready(function(){
 $('.hover-me').hover(function() {
 $(this).addClass('hover-forsure'); 
 }, function() {
 $(this).removeClass('hover-forsure');
 }); 
});

උදාහරණය 2: දැන් IE6 එකෙත් hover වැඩ කරනවා!

සම්පූර්ණ කේත

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hover Demo</title>
<style>
#wrapper { margin:20px auto; width:600px; }
.hover-forsure { background:#eee; }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('.hover-me').hover(function() {
 $(this).addClass('hover-forsure'); 
 }, function() {
 $(this).removeClass('hover-forsure');
 }); 
});
</script>
</head>
<body>
<div id="wrapper"> 
 <p class="hover-me">test hover 2</p>
</div>
</body>
</html>

jQuery එක්‌ක ලස්‌සන වෙන්න!

2008-07-07T16:41:00.001+05:30

ThickBox (තික්‌ බොක්‌ස්‌)
වෙබ් මුහුනත් අලංකාර කරන්න වගේම පින්තූර දර්ශනය කරන්න නියමයි.
පින්තූර උදාහරණය
මුලින්ම අවශ්‍ය ගොනු බාගත කරගමු.
thickbox.js
thickbox.css
jquerry-latest.js (පසුගිය සතියේ zeebra table හදන්න පාවිච්චි කල library එකමයි)
loadingAnimation.gif
පින්තූර සදහා..
ඉන්පසු javascript සහ css ගොනු අපේ වෙබ් පිටුවට අතුලත් කරමු.

<link rel="stylesheet" type="text/css" href="thickbox.css" />
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="thickbox.js"></script>

ඔබට අවශ්‍ය කුඩා රූපය සහ විශාල රූපය සාදා (උදාහරණය සදහා මගේ කුඩා රූපය illidan_small.jpg ලෙසත් විශාල රූපය illidan.jpg ලෙසත් පාවිච්චි කරනවා) පහත ආකාරයට thichbox එක ඇතුලත් කරගන්න.

<a href="illidan.jpg" title="ඔබට අවශ්‍ය මාතෘකාවක්‌ යොදන්න" class="thickbox"><img src="illidan_small.jpg" alt="Illidan"/></a>

පින්තූර උදාහරණය
iframe සදහා..
ඉහත ආකාරයටම javascript ගොනු සහ css ගොනු ඔබේ පිටුවට අතුලත් කර පහත දක්‌වෙන පරිදි thickbox එකක්‌ තුල iframe ලෙස දර්ශනය කරන්න පුලුවන්.

<a href="myiframe.html?keepThis=true&TB_iframe=true&height=300&width=400" title="ඔබට අවශ්‍ය මාතෘකාවක්‌ යොදන්න" class="thickbox">click here</a>

iframe උදාහරණය
thickbox වෙබ් අඩවිය

jQuery javascript එකතුව ගැන කෙටි හැදින්වීමක්‌

2008-07-01T10:35:00.001+05:30

ප්‍රයෝජන
සැම බ්‍රව්සරයක්‌ ම එකම ආකාරයෙන් වෙබ් පිටු දර්ශනය කරන්නේ නැහැ. jQuery මගින් මෙම අඩුපාඩුව පහසුවෙන් මගහැරගන්නට පුලුවන්.
DOM script පේලි රාශියකින් ලියන දෙයක්‌ jQuery මගින් ඉතා සුලු පේලි ගනනකින් ලිවිය හැකියි.
පහසුවෙන් පිටුවක අන්තර්ගතයන් වෙනස්‌ කරගනීමේ හැකියාව jQuery ලබදෙයි. උදාහරනයක්‌ වශයෙන් පිටුවක ඇති text වෙනස්‌ කිරීම, පින්තූර මාරු කිරීම ලයිස්‌තු වෙනස්‌ කිරීම වැනි දේ.
වෙබ් පිටු සජීවීකරනය කරගැනීමට නොයෙකුත් ආකාරයේ දෘශ්‍ය ප්‍රයෝග jQuery එකතුව සතුයි.
වෙබ් පිටු පරිශීලකයා වෙබ් පිටුව හසුරුවන ආකරය ( link එකක්‌ මත ක්‌ලික්‌ කිරීම වැනි දේ ) event handlers මගින් පාලනය කිරීමේ පහසු ක්‍රම jQuery ලබාදෙයි.
මම ඒ පැහදිලි කරන්නට උත්සාහ කලේ jQuery මගින් අපට ලබාදෙන පහසුකම් සමහරක්‌. දැන් අපි බලමු jQuery උපයෝගී කරගෙන සරල උදාහරනයක්‌.

සීබ්‍රා tables
සීබ්‍රා tables වෙබ් පිටු වල බොහෝ සේ පාවිච්චි කරන දෙයක්‌. පේලියෙන් පේලියට වර්නය මාරු වෙන නිසා දත්ත පැහැදිලිව පෙනෙන අතරම පිටුව අලංකාරව පේනවා.
මුලින්ම බලමු කොහොමද jQuery අපේ පිටුවට එකතු කරගන්නෙ කියලා. http://www.jquery.com වෙබ් අඩවියෙන් jquery-1.2.6.js (දැනට පවතින version එක) බාගත කරගන්න.
වෙබ් පිටුවෙ head section එකේ පහත ආකරයෙන් එය link‌ කරගන්න.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zeebra</title>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
</head>

table එකේ html

<body>
<table id="zeebra" cellspacing="0">
<tr>
  <td>Nickelback</td>
  <td>If Everyone Cared</td>
</tr>
<tr>
  <td>Goo Goo Dolls</td>
  <td>Iris</td>
</tr>
<tr>
  <td>Edwin McCain</td>
  <td>I'll Be</td>
</tr>
<tr>
  <td>Metallica</td>
  <td>Nothing Else Matters</td>
</tr>
<tr>
  <td>Nirvana</td>
  <td>Smells Like Teen Spirit</td>
</tr>
</table>
</body>

css

body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
#zeebra {  border: 1px solid #666666; }
#zeebra td { border-left: 1px solid #D9D9D9; padding:5px; }

<දැන් ඔබේ පිටුව මෙසේ දිස්‌ වේවි.
අපට ඉරට්‌ටේ පේලි නිල් පැහැ කිරීමට අවශ්‍ය යයි සිතමු. css‌ වලින් අපි even නමින් class එකක්‌ හදලා අපිට අවශ්‍ය විදිහට නිල් පාට පසුබිම් වර්නයක්‌ යොද ගනිමු.

.even { background-color:#edf3fe; }

දැන් ඉතිරිව ඇත්තේ මගින් අපට අවශ්‍ය zeebra stripe යොදාගනීම පමනයි. පහත දැක්‌වෙන පේලි head section එකේ යෙදීමෙන් ඉරට්‌ටෙ පේලි වල පසුබිම් වර්නය නිල් පැහැ වේවි.

<script type="text/javascript">
$(document).ready(function() {
 $('tr:even').addClass('even');
});
</script>

tr:even මගින් table එකේ ඇති ඉරට්‌ටෙ පේලි සොයා දෙන අතර addClass මගින් අපි කලින් css වලින් සාදාගත් even class එක එම ඉරට්‌ටෙ පේලි වලට යොදනු ලැබේ.
අවසාන ප්‍රතිපලය මෙසේ දිස්‌ වේවි.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zeebra</title>
<script src="http://thilina.gunasekara.googlepages.com/jquery.js" type="text/javascript"></script>
<style type="text/css">
body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
#zeebra {  border: 1px solid #666666; }
#zeebra td { border-left: 1px solid #D9D9D9; padding:5px; }
.even { background-color:#edf3fe; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('tr:even').addClass('even');
});
</script>
</head>

<body>
<table id="zeebra" cellspacing="0">
<tr>
    <td>Nickelback</td>
    <td>If Everyone Cared</td>
</tr>
<tr>
    <td>Goo Goo Dolls</td>
    <td>Iris</td>
</tr>
<tr>
    <td>Edwin McCain</td>
    <td>I'll Be</td>
</tr>
<tr>
    <td>Metallica</td>
    <td>Nothing Else Matters</td>
</tr>
<tr>
    <td>Nirvana</td>
    <td>Smells Like Teen Spirit</td>
</tr>
</table>
</body>
</html>

තවත් jQuery තොරතුරු සමග හමුවෙමු!

w3c validation ගනන් ගන්නවද?

2008-06-27T21:58:00.001+05:30

මොකද්ද?

World Wide Web Consortium (W3C) ආයතනයෙන් වෙබ් පිටු සදහා සම්මත ක්රමයක් පිලියෙල කර තිබෙනවා.w3c valid පිටුවක් ලෙස සදහන් කරන්නේ w3c ආයතනය මගින් අනුමත ක්රමයට සහ රිති වලට අනුකූල වෙබ් පිටුවක්.

html validator

වැදගත්කම

මේ මොන වැඩකට නැති දෙයක් ද කියා ඔබට සිතෙන්නට පුලුවන්. බ්රවුසර් එකේ හරියට පේනව නම් තව වෙන මොනවද. නමුත් w3c ආයතනය එම සම්මතයන් සාදා තිබෙන්නෙ ලෝකයේ දැනට බාවිතා වෙන බොහොමයක් බ්රවුසර් වල ඔබ සාදන වෙබ් පිටු හරි ආකාරව දර්ශනය වීම සදහායි. මෙය ඉතාමත් වැදගත් කරුනක්. අපි සැම විටම උත්සාහ කරන්නේ අපේ වෙබ් පිටුවට පැමිනෙන පුද්ගලයන් ගනන වැඩිකරගැනීමට, එනිසා සැම බ්රවුසරයකම පාහේ අපේ වෙබ් පිටුව හරි ආකාරව දර්ශනය වීම වාසියක්.

ඒ වගේම w3c valid පිටුවක් ඉතා පැහැදිලියි. යම්කිසි දෝශයක් code එකේ තිබේ නම් ඉතාමත් ලෙහෙසියෙන් සොයගන්න පුලුවන්.

w3c valid පිටුවල ඇති පැහැදිලි බව නිසාම වෙබ් පිටු සෙවුම් යන්ත්ර spider වලට ඔබේ වෙබ් පිටු crawl කිරීම පහසුයි. එය සෙවුම් යන්ත්ර වල high rank ලබා ගැනීම සදහා අමතර වාසියක් වේවි.

මම මේ බ්ලොග් අඩවිය සදහා යොදාගන්නා blogger වෙබ් පිටු w3c valid පිටු නොවීම කනගාටුවට කරුනක්.

කොහොමද?

html validator වෙත ගොස් ඔබේ html / xhtml .. පිටු පරීක්ෂා කරන්න පුලුවන්.

css validator වෙත ගොස් ඔබේ css පිටු පරීක්ෂා කරන්න පුලුවන්.

කරන දේ හරියට කරන එක නේද හොද..

Mootools slide menu

2008-06-10T09:39:00.001+05:30

මේ slide menu එක මම හැදු‍වේ mootools JavaScript library එකෙන්.

අවශ්‍ය විදිහට වෙනස් කරලා පාවිච්චි කරන්න.

download

‍සිංහල බ්ලොග්..

2008-06-10T08:38:00.001+05:30

හුග කාලයක ඉදන් ආසාවක් තිබුනා බ්ලොග් එකක් ලියන්න. හැමදාම කල් දදා හිටිය මිසක් පටන් ගන්න බැරි උනා. තව පරක්කු කරන්නෙ නැතිව වෙලාව ලැ‍බෙන විදිහට ලි‍යන්න ඕන කියල ඉටා ගත්තා.

පලවෙනි කාරනේ තමයි මම මේකෙ මොනවද ලි‍යන්නෙ කියන එක. මට හිතුන මම හ‍දන, අලුතින් ඉගනගන්න web developing / designing අ‍දහස් බ්ලොග් එකෙන් හුවමාරැ කරගන්න, අලුත් දැනුම ලබා ගන්න හොද අත්වැලක් වෙයි කියලා.

අනිත් එක මට මේ පුංචි post එක ලියන්නත් හුග වෙලාවක් ගියා. හැ‍ම දේටම කලින් සිංහල keyboard layout පුරැදු වෙන්න ඕන!

බොහොම ස්තුතියි