Thursday, December 31, 2009

နရီမဲ႔အလြမ္းမ်ား...




‘Call’ ဆုိတဲ႔ ခလုတ္ေလးေပၚမွာ
ကၽြန္ေတာ္အေတာ္ၾကာ တုံ႔ဆုိင္းေနခဲ႔မိတယ္.
ကုိယ္႔ကုိယ္ကုိ မုန္းမိလုိက္တာ
ဒီလုိေတြေ၀ေနျခင္းေတြ
ဒီလုိေ၀ခဲြမရႏုိင္ျခင္းေတြ
ဒီလုိဆုံးျဖတ္ရခက္ေနျခင္းေတြ
ဒီလုိစုိးရြံ႔ပူပင္ျခင္းေတြ
ဒီလုိ နာက်င္ခံရခက္ျခင္းေတြ
ဒီလုိ ခ်စ္ဒုကၡဆင္းရဲေတြကေန
ဘယ္ေတာ႔မ်ားမွ ကၽြန္ေတာ္လြတ္ေျမာက္ခြင္႔ရမလဲ.

Wednesday, December 16, 2009

အႏုပညာဆုိင္ရာႏွင္႔ သုတ ဘေလာ႔ဂ္ေတြသိရင္ ေျပာျပေပးပါ

အားလုံးပဲ မဂၤလာပါ.

ကၽြန္ေတာ္ တစ္ခုသိခ်င္လုိ႔ပါ.

ဓာတ္ပုံ၊ ပန္းခ်ီ၊ Graphic Art စသည္ျဖင္႔ အႏုပညာနဲ႔သက္ဆုိင္တဲ႔ ဘေလာ႔ဂ္ေတြ၊ ဆုိက္ေတြ သိသေလာက္ေလး ကၽြန္ေတာ္႔ကုိ ေျပာျပေပးလုိ႔ရမလား.

ေနာက္တစ္ခုကေတာ႔ သုတပုိင္းဆုိင္ရာေတြ၊ ျမန္မာ႔သမုိင္း၊ ကမၻာ႔သမုိင္း လုိမ်ိဳးေတြကုိ ေရးတဲ႔ ဘေလာ႔ဂါေတြေရာ ရွိလား. ဆုိလုိတာက General Knowledge ေတြလည္းျဖစ္ႏုိင္သလုိ သမုိင္းေၾကာင္းနဲ႔သက္ဆုိင္တာေတြကုိ ေရးတဲ႔ဘေလာ႔ဂ္ေတြလည္း ျဖစ္ႏုိင္ပါတယ္.

ျမန္မာလူငယ္လူၾကီးေတြ ေရးထားတဲ႔ဆုိက္ေတြေပါ႔ဗ်ာ. အဲဒါေတြကုိ Organize လုပ္ခ်င္လုိ႔ပါ. ကၽြန္ေတာ္႔စိတ္ထဲမွာ ၁၀ ခုေက်ာ္မေက်ာ္ သိခ်င္လုိ႔ပါ.

အားလုံးပဲ ၾကိဳျပီး ေက်းဇူးတင္ထားလုိက္မယ္. း)

Y.

Tuesday, December 15, 2009

ဘေလာ႔ဂ္တန္းပလိတ္မ်ားကုိ ခ်ဲ႔ျခင္း (၁)

အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ.

ကၽြန္ေတာ္တုိ႔ေတြ မေတြ႔ျဖစ္တာလည္း အေတာ္ၾကာသြားျပီေနာ္. ေနေကာင္းၾကတယ္ဟုတ္.

ဒီတစ္ခါေတာ႔ ကၽြန္ေတာ္႔ကုိ ေမးလ္ပုိ႔ျပီး ေမးလာတဲ႔ ဘေလာ႔ဂါညီေလးတစ္ေယာက္ရဲ႔ ေမးခြန္းကုိ ေျဖရင္း အားလုံးကုိ ျပန္မွ်ေ၀ခ်င္တဲ႔ နည္းပညာေလးတစ္ခုအေၾကာင္း ေရးခ်င္ပါတယ္.

ဘေလာ႔ဂ္တန္းပလိတ္ကုိ ခ်ဲ႔နည္းပါ.

ဒီနည္းကုိ ဒီေနရာမွာ ေရးထားတာ ေတြ႔ဖူးပါတယ္. အခု ကၽြန္ေတာ္ကေတာ႔ ညီအစ္ကုိတုိ႔နဲ႔အတူတူ လက္ေတြ႔လုပ္ေဆာင္ရင္း ရွင္းျပသြားမွာ ျဖစ္ပါတယ္. တန္းပလိတ္ေတြက တစ္ခုနဲ႔တစ္ခု မတူေပမယ္႔ အုိင္ဒီယာက အတူတူပါပဲ.

ေရွ႔ဆက္မသြားခင္ အားလုံးသိခ်င္ေနမယ္႔ ေမးခြန္းတစ္ခုကို အရင္ဆုံးေျဖပါမယ္.

ဘာေၾကာင္႔ တန္းပလိတ္ကုိ ခ်ဲ႔ခ်င္ရတာလဲ..

အေျဖကရွင္းပါတယ္. နဂုိေပးထားတဲ႔အရာက က်ဥ္းေနလုိ႔ပါ. ကုိယ္က ဒီ႔ထက္ က်ယ္က်ယ္ပုိလုိခ်င္လုိ႔ပါ. ဒီ႔ထက္ရွင္းတဲ႔အေျဖရွိမယ္လည္း မထင္ေတာ႔ဘူး. ဟတ္ဟတ္.

ကၽြန္ေတာ္ နည္းႏွစ္နည္းခဲြျပီး ေဆြးေႏြးခ်င္ပါတယ္.

(၁) ရုိးရုိးတန္းပလိတ္မ်ားကုိ ခ်ဲ႔နည္းနဲ႔
(၂) Rounder Template မ်ားကုိ ခ်ဲ႔နည္း ဆုိျပီးေတာ႔ ျဖစ္ပါတယ္.

အခု ေရးမွာကေတာ႔ နံပါတ္တစ္ျဖစ္တဲ႔ ရုိးရုိးတန္းပလိတ္မ်ားကုိ ခ်ဲ႔နည္းပဲ ျဖစ္ပါတယ္.

ကဲ. ကၽြန္ေတာ္တုိ႔ စလုိက္ၾကရေအာင္လား…

ကၽြန္ေတာ္တုိ႔ကုိ Blogger က ေပးထားတဲ႔ တန္းပလိတ္ရုိးရုိးေလးေတြထဲက Minima Ochre ဆုိတဲ႔ တန္းပလိတ္ေလးကုိ ေရြးလုိက္ပါမယ္.



Layout Tab ေလးထဲက Edit HTML ကိုသြားျပီး အဲဒီ႔တန္းပလိတ္ေလးရဲ႔ CSS Coding ပုိင္းေလးကုိ အရင္ဆုံး ေလ႔လာၾကည္႔ပါမယ္.

ကၽြန္ေတာ္တုိ႔ ေရွ႔ဆက္မသြားခင္မွာ တန္းပလိတ္ခ်ဲ႔တဲ႔ အုိင္ဒီယာေလးကုိ အလြတ္သေဘာ စဥ္းစားၾကည္႔ၾကပါမယ္.



အေပၚကပုံေလးကုိၾကည္႔ပါ.

ကၽြန္ေတာ္တုိ႔ စဥ္းစားရမယ္႔အပို္င္း (၃) ပုိင္းရွိပါတယ္. ဘာေတြလဲဆုိေတာ႔

Outer-wrapper ဆုိတာရယ္ Main-wrapper ဆုိတာရယ္နဲ႔ Sidebar-wrapper ဆုိတာရယ္ပါပဲ. တန္းပလိတ္ေတြ ဘယ္လုိေျပာင္းေျပာင္း အဲဒီ႔သုံးခုက တန္းပလိတ္ခ်ဲ႔မယ္ဆုိ သိထားရမယ္႔ Key Players ေတြပါ. 2-column-template ဆုိရင္ sidebar တစ္ခုပဲ ပါမယ္. 3-column-template ဆုိရင္ေတာ႔ left and right sidebars ေတြပါမယ္ေပါ႔ဗ်ာ.

တစ္ျခားသိထားသင္႔တဲ႔ အသုံးအႏႈန္းေလးေတြကေတာ႔ header-wrapper, content-wrapper စသည္တုိ႔ပဲ ျဖစ္ပါတယ္. ျဖည္းျဖည္းခ်င္းပဲ မိတ္ဆက္ေပးသြားမယ္ဗ်ာ.ေနာ္.

အခု ကၽြန္ေတာ္တုိ႔ရဲ႔ Minima Ochre တန္းပလိတ္ေလးမွာ Outer-wrapper ဆုိျပီး ရွာၾကည္႔လုိက္ရင္ ဒါမ်ိဳးေလးေတြ႔ရပါတယ္.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

အဲဒါကုိ ဘယ္လုိနားလည္ေအာင္ လုပ္ရမလဲဆုိျပီး ေခါင္းစားမေနပါနဲ႔. ကၽြန္ေတာ္တုိ႔ သိရမယ္႔အရာ သုံးခုပဲ ရွိပါတယ္. အဲဒီ႔သုံးခု ဘယ္လုိဆက္စပ္ေနလဲဆုိတာကုိ နားလည္ထားရင္ တန္းပလိတ္ခ်ဲ႔နည္းကုိ ၅၀ % ေလာက္ သိျပီးသားျဖစ္သြားပါလိမ္႔မယ္. ဘယ္လုိလဲဆုိေတာ႔ ဂလုိပါ. း)

အီေကြးရွင္းေလးေပးမယ္ေနာ္. အလြတ္က်က္ထား.


Main-Wrapper + Sidebar-Wrapper+Space Between = Outer-Wrapper

ေခါင္းေတြခါကုန္ျပီလား. း)… ျပန္ရွင္းျပပါမယ္.

အခု ကၽြန္ေတာ္တုိ႔ရဲ႔ တန္းပလိတ္မွာ ဘာေလးေတြေတြ႔လဲဆုိေတာ႔ Width:660 px စတာေလးေတြေတြ႔ပါလိမ္႔မယ္. ဟုတ္တယ္ဟုတ္.

အဲဒါေလးေတြကုိ အစားျပန္သြင္းၾကည္႔မယ္ေနာ္.

410 +220 + Space between Main and Sidebar wrapper = 660
Space between Main and Sidebar wrapper = 660-(410+220) = 30

ဒါေၾကာင္႔ Space between Main and Sidebar Wrapper ဟာ 30 px ျဖစ္ပါတယ္.

Outer-wrapper ဆုိတာက တန္းပလိတ္ရဲ႔ ဘယ္ဖက္အစကေန ဟုိး ညာဖက္ အဆုံးထိတြက္ခ်က္ထားတာပါ. သူ႔ေအာက္မွာ ဘာေတြပါလဲဆုိေတာ႔ ပုိ႔စ္ေရးတဲ႔ေနရာျဖစ္တဲ႔ main-wrapper (or) content-wrapper ဆုိတာပါတယ္. ျပီးေတာ႔ အဲဒီ႔ Post Area နဲ႔ Sidebar ၾကားမွာ လပ္ေနတဲ႔ Space ေလးပါတယ္. အခုတန္းပလိတ္မွာ အဲဒီ႔ Space ေလးက 30 px ရွိတာေပါ႔. ျပီးေတာ႔ကာ sidebar-wrapper ပါတယ္. အဲဒီ႔သုံးခုေပါင္းလုိက္ရင္ outer-wrapper နဲ႔ ညီရပါမယ္. မဟုတ္ရင္ ကၽြန္ေတာ္တုိ႔ရဲ႔ တန္းပလိတ္ၾကီးဟာ အခ်ိဳးအစားမညီမွ်တာ ျဖစ္လာႏုိင္ပါတယ္.

ကဲ. ဒါဆုိရင္ အုိင္ဒီယာရျပီေပါ႔ေနာ္. ကၽြန္ေတာ္တုိ႔က ပုိ႔စ္ေရးတဲ႔ေနရာျဖစ္တဲ႔ main-wrapper (သုိ႔) content-wrapper ေနရာကုိ ခ်ဲ႔ရမွာပါ. သူ႔ကုိခ်ဲ႔သေလာက္ Outer-wrapper ကုိလည္း လုိက္ၾကီးေပးဖုိ႔ လုိပါတယ္.

ထားပါေတာ႔ဗ်ာ. အခုကိစၥမွာ Outer-wrapper က 660 px ျဖစ္ျပီးေတာ႔ main-wrapper က 410 px ပဲရွိတယ္. ကၽြန္ေတာ္က အဲဒီ႔ main-wrapper ကုိ ေနာက္ထပ္ 200 px ထပ္ေပါင္းခ်င္တယ္. ဆုိလုိတာက 410+200 = 610 px ျဖစ္ခ်င္တာေပါ႔.

ဒီေတာ႔ ကၽြန္ေတာ္တုိ႔အတြက္ ထပ္ေပါင္းထည္႔မယ္႔ နံပါတ္က 200 px ျဖစ္ေနတယ္. အဲဒီ႔ေကာင္ကုိ Outer-wrapper မွာ ျပန္ေပါင္းထည္႔ေပးဖုိ႔ လုိျပီေပါ႔. ဟုတ္တယ္ဟုတ္.

ဒါေၾကာင္႔ ကၽြန္ေတာ္တုိ႔ရဲ႔ တြက္ခ်က္မႈက ဒီလုိျဖစ္လာပါတယ္.

Main-wrapper = 410+200 = 610
Outer-wrapper = 660 + 200 = 860
Sidebar-wrapper = no change
Space Between = no change

အေပၚက ကုဒ္ဒင္းေလးေတြေနရာမွာ တစ္ခါတည္း အစားသြင္းလုိက္မယ္ေနာ္.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 610px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

အဲဒီ႔အတုိင္းျပင္ျပီး တန္းပလိတ္ကုိ Save လုိက္ပါတယ္. ကဲ. ကၽြန္ေတာ္တုိ႔ရဲ႔ Result ကုိ ျပန္ၾကည္႔ရေအာင္.



တန္းပလိတ္ေလး က်ယ္သြားျပီဟုတ္…

၀မ္းသာအားရျဖစ္သြားတဲ႔ မ်က္ႏွာေလးက တစ္စုံတစ္ခုကို တအံ႔တဩစိုက္ၾကည္႔ရင္း ေမးခ်င္ေနျပီထင္တယ္.

ကၽြန္ေတာ္သိတယ္. ဒီလုိပဲ ကၽြန္ေတာ္လည္း အေတြ႔အၾကဳံက ရင္းျပီး သင္ယူလာခဲ႔ရတာမုိ႔ အကုန္လုံးကုိ မေျပာျပဘဲ ဘာေၾကာင္႔ ဒီလုိျဖစ္ရတယ္ဆုိတာကုိ ခင္ဗ်ားကုိယ္တုိင္သိေစခ်င္လုိ႔ပါ. ဒါမွ ေနာက္ေနာင္ ဘယ္လုိအခက္အခဲပဲရွိရွိ ကုိယ္႔ဖာသာကုိယ္ ဆန္းစစ္အေျဖရွာတတ္လာမယ္ မဟုတ္ဘူးလား.

ေစတနာကုိ နားလည္ပါဗ်ာ. ေနာ္.

နားမလည္လည္းေနေတာ႔… ဘာျဖစ္တယ္ဆုိတာ ဆက္ေျပာျပမယ္. ဟတ္ဟတ္.

တန္းပလိတ္ရဲ႔ Post Area ကေတာ႔ က်ယ္သြားပါရဲ႔. ဒါေပမယ္႔ Header က လုိက္မက်ယ္ဘဲ က်န္ေနခဲ႔တယ္.

ဒီေတာ႔ ကၽြန္ေတာ္တုိ႔ ကိုယ္႔ကုိယ္ကုိ ဘယ္လုိေမးသင္႔လဲ.

Header ကုိ ထိန္းထားတဲ႔ coding တစ္ခုခုေတာ႔ ရွိရမယ္.

Alright! Let’s go, baby!

တန္းပလိတ္ထဲကုိ ျပန္သြား… Header-wrapper ဆုိျပီး ရိုက္ၾကည္႔လုိက္ေတာ႔

လားလား ( ျမင္းမဟုတ္ပါ)

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

အဲဒီ႔မွာ ေတြ႔ပါျပီဗ်ာ…

သူ႔ရဲ႔ width က 660 px တဲ႔. ကဲ. ကၽြန္ေတာ္တုိ႔ ဘယ္လုိဘာသာျပန္မလဲ

တန္းပလိတ္ကုိ မခ်ဲ႔ခင္က main-wrapper (or) content-wrapper ရဲ႔ width က ဘယ္ေလာက္ရွိခဲ႔လဲ. ျပန္ၾကည႔္လုိက္ရေအာင္.

610 px တဲ႔..

အင္း… ဒါဆုိရင္ေတာ႔ header-wrapper နဲ႔ main-wrapper မဆက္စပ္ဘူး. ေနာက္ထပ္လုိက္ရွာၾကည္႔လုိက္ရေအာင္. ဘာေတြ႔လဲ

ေတြ႔ပါျပီဗ်ာ.

Outer-wrapper ကလည္း 660 px ပဲ.

There you go!... We made it…

ဒါေၾကာင္႔ Outer-wrapper နဲ႔ Header-wrapper ဟာ အတူတူပဲ. ဘေလာ႔ဂ္တန္းပလိတ္ကုိ ခ်ဲ႔ရင္ Outer-wrapper ကုိတင္မကဘူး. Header-wrapper ကုိပါ လုိက္ရွာျပီး ျပင္ေပးဖုိ႔လုိတယ္လုိ႔ ကၽြန္ေတာ္တုိ႔ ေကာက္ခ်က္ခ်လုိက္ပါတယ္.

Header ေနရာဟာ တကယ္ေတာ႔ Banner ေနရာနဲ႔ အတူတူပါပဲ. ဒါေၾကာင္႔ ကုိယ္႔မွာ ဘန္နာေလးေတြ တင္ျပီးသားျဖစ္ေနခဲ႔ရင္လည္း အဲဒီ႔ဘန္နာကုိပါ လုိက္ျပီး ျပန္ခ်ဲ႔ေပးဖုိ႔လုိတယ္လုိ႔ မွတ္ရပါမယ္.

ကဲ. Header-wrapper ကုိ Outer-wrapper ရဲ႔ width အတုိင္းျပင္ျပီေနာ္.


/* Header
-----------------------------------------------
*/

#header-wrapper {
width:860px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

တန္းပလိတ္ကုိ Save လုိက္မယ္. ျပီးေတာ႔ ကၽြန္ေတာ္တုိ႔ ရင္ခုန္စြာ ျပန္ၾကည္႔လုိက္ၾကရေအာင္လား.



Ahhhhhh… Man….

Look at that…..

C’mon, man! Who’s your daddy?

လုိ႔ ေကာ႔ထားတဲ႔ ရင္ဘတ္ၾကီးကုိ ကုိယ္႔ညာဖက္လက္နဲ႔ ဘန္းခနဲ ရုိက္ထည္႔လုိက္စမ္းပါ. ျပီးေတာ႔ကာရင္ေကာ႔ေခါင္းေမာ႔ျပီး ျမန္မာျပည္က Rapper ေပါက္စေတြ စတုိင္လ္မ်ိဳးဖမ္းလုိ႔ ေျမာက္ၾကြေျမာက္ၾကြနဲ႔ ကုိယ္႔အခန္းထဲ ပတ္ပတ္လည္ လမ္းတစ္ပတ္ေလာက္ ေလွ်ာက္လုိက္စမ္းပါ.

အဲဒါပဲ. ကုိယ္႔လူ…

သိပ္လည္း ေျမာက္မသြားနဲ႔ဦး..

Rounder Template ေတြကုိ ခ်ဲ႔နည္း က်န္ေသးတယ္. ဟတ္ဟတ္ဟတ္.

Note:

Sidebar-wrapper ကုိ ခ်ဲ႔ခ်င္လည္း ရပါတယ္. Sidbar နဲ႔ Main ၾကားက Space ကုိ အတုိးအေလွ်ာ႔ လုပ္ခ်င္လည္း ရပါတယ္. ဘာေတြ ဘယ္လုိပဲလုပ္လုပ္ Outer-wrapper ရဲ႔ width ကုိ မေက်ာ္ရင္ ျပီးတာပါပဲ. ေက်ာ္ရင္ ဘယ္လုိျဖစ္မလဲ ကၽြန္ေတာ္႔ကုိ မေမးနဲ႔. ကုိယ္တုိင္သာစမ္းၾကည္႔…

ကၽြန္ေတာ္ကေတာ႔ မ်ိဳးၾကီးရဲ႔ သီခ်င္းေလးနားေထာင္ရင္း ျငိမ္႔ေနလုိက္မယ္.

“အုိးးးးးးးးး ကုိ႔ယုိးကားယားးးး

အုိးးးးကုိ႔ယုိးကားယားးး”

ကဲ. အားလုံးပဲ ရယ္ေမာေပ်ာ္ရႊင္ႏုိင္ၾကပါေစသတည္း….

အားလုံးကုိခ်စ္ခင္ေလးစားလ်က္

ရန္ေအာင္