Showing posts with label web-design-tutorials. Show all posts
Showing posts with label web-design-tutorials. Show all posts

Website ေရးနည္း အပုိင္း (၄ + ၅) - html5 and css3

မဂၤလာပါ၊

Singapore Web Design website (web-designer.sg) ကုိ ဥပမာ ထားၿပီးေတာ့ website ေရးနည္းကုိ သင္ျပေပးထားတဲ့ video tutorial ျဖစ္ပါတယ္။ HTML5 နဲ႔ CSS3 ကုိ အသုံးျပဳၿပီး ေရးျပထားပါတယ္။ CSS sprite ေရးနည္းကုိလည္း ဒီတစ္ပတ္ သင္ခန္းစာမွာ သင္ေပးထားပါတယ္။ video ႏွစ္ဖုိင္မွာ တစ္ဖုိင္က အရမ္းတုိးေနပါတယ္။ အသံသြင္းေနတုန္း mic က ဘာျဖစ္သြားလဲ မသိဘူး၊ ဒါေပမယ့္ vlc medai player နဲ႔ အသံကုိ ၂၀၀% ေလာက္ထား နားေထာင္ရင္ ၾကားရပါတယ္။

အရင္တစ္ေခါက္က ေရးတာေတာ့ ေတာ္ေတာ္ေလးၿပီးေနပါၿပီ၊ ကၽြန္ေတာ္တင္ေပးတဲ့ video သင္ခန္းစာေတြကုိ ေတာက္ေလွ်ာက္လုပ္လာတဲ့လူကေတာ့ ဒီအခ်ိန္မွာ website တစ္ခုရဲ႕ စာမ်က္ႏွာ တစ္ဝက္ေလာက္ ၿပီးေနမွာပါ၊ အခုတင္ေပးမယ့္ သင္ခန္းစာ ႏွစ္ခုနဲ႔ပါေပါင္းလိုက္ရင္ေတာ့ website တစ္ခုရဲ႕ စာမ်က္ႏွာ ေလးပုံ သုံးပုံေလာက္ေတာင္ ၿပီးေနမွာပါ။

 အရင္တုန္းက တစ္ပတ္ကုိ သင္ခန္းစာ တစ္ခုပဲ တင္ေပးေပမယ့္ ဒီေန႔ေတာ့ video သင္ခန္းစာ ႏွစ္ခု တင္ေပးလိုက္ပါတယ္။ အားလုံးပဲ လုိက္လုပ္ၾကည့္ပါဦး၊ video သင္ခန္းစာေတြ ၿပီးရင္လည္း ကၽြန္ေတာ္ ေရးထားတဲ့ website files ေတြ အားလုံးကုိ တင္ေပးပါ့မယ္။ ဒီတစ္ပတ္အတြက္ video သင္ခန္းစာေတြကေတာ့ ...

HTML5, CSS3 နဲ႔ Website ေရးနည္း အပုိင္း (၃)

Singapore Web Design (web-designer.sg) website ကုိ နမူနာထားၿပီး website ေရးနည္းကုိ သင္ေပးထားေသာ သင္ခန္းစာျဖစ္ပါတယ္။ ဒီေန႔ တင္ေပးမွာကေတာ့ website ေရးနည္း အပုိင္းသုံး ျဖစ္ပါတယ္။ စာအျဖစ္နဲ႔ေတာ့ ေထြေထြထူးထူး ေျပာစရာမရွိပါဘူး၊ အားလုံး video ထဲမွာ ေျပာျပေပးထားပါတယ္။ ဒီတစ္ေခါက္ video ကေတာ့ နည္းနည္းေလး ရွည္ပါတယ္။ တစ္ကယ္လို႔ youtube က video ေတြ download လုပ္လို႔ မရဘူးဆုိရင္ http://www.downvids.net/ ကုိသြားၿပီးေတာ့ video ရဲ႕ လိပ္စာကုိ paste လုပ္ၿပီး download လုပ္ႏုိင္ပါတယ္။ အဲဒါကုိ အခက္အခဲရွိေနဦးမယ္ဆုိရင္လည္း သိပါရေစ၊ comment ခ်န္ခဲ့ပါ၊ တစ္ျခားေနရာမွာ တင္ေပးလိုက္ပါမယ္။ အရင္က သင္ခန္းစာေတြ ျပန္ၾကည့္ခ်င္တယ္ဆုိရင္ေတာ့ အပုိင္း (၁) HTML5 နဲ႔ CSS3 ကုိ အသုံးျပဳၿပီးေတာ့ Website ေရးနည္း (အပုိင္း ၁) အပုိင္း (၂) Website ေရးနည္း video သင္ခန္းစာ အပုိင္း ၂ (by using HTML5 and CSS3)

အပုိင္း (၃) video ကေတာ့ ေအာက္မွာပါ



HTML5, CSS3 နဲ႔ Website ေရးနည္း အပုိင္း (၃) မွ ကူးယူ ေဖာ္ျပပါသည္။

Website ေရးနည္း video သင္ခန္းစာ အပုိင္း ၂ (by using HTML5 and CSS3)


အရင္ တစ္ေခါက္က html5, css3 နဲ႔ website ေရးနည္း သင္ခန္းစာ ကုိ ၾကည့္ျဖစ္ၾကမယ္ထင္ပါတယ္။ ဒီတစ္ေခါက္ သင္ခန္းစာမွာေတာ့ main menu ေရးပုံကုိ သင္ျပေပးထားပါတယ္။ Singapore Web Design (web-designer.sg)ဆုိက္ကုိ နမူနာ ထားၿပီးေတာ့ ေရးနည္း သင္ေပးထားတာပါ။ အခက္အခဲရွိရင္ေတာ့ comment ေရးခဲ့ပါ။ အရင္တစ္ေခါက္က video ၾကည့္ၿပီး တစ္ခ်ဳိ႕လည္း feed back ေလးေတြေပးၾကတယ္၊ အသံက သိပ္မရွင္းဘူးတုိ႔၊ code ေတြကုိ သိပ္မျမင္ရဘူးတုိ႔ေပါ့ဗ်ာ၊ ၿပီးေတာ့ စကားေျပာတာ ေျပာခ်င္သလိုမေျပာခ်င္သလို ျဖစ္ေနတယ္တဲ့ :D အဲဒါေတြအားလုံးက video ကုိ download လုပ္ရင္ မၾကာေအာင္လို႔ အတတ္ႏုိင္ဆုံးအခ်ိန္ကုိ ခ်ဳံ႕တဲ့ သေဘာပါ၊ video minutes ေတြ မၾကာေအာင္၊ မမ်ားေအာင္၊ စကားကုိ ျမန္ျမန္ေျပာရပါတယ္။ အဲဒါေၾကာင့္ စကားက ေျပာခ်င္သလို မေျပာခ်င္သလို ျဖစ္ေနႏုိင္ပါတယ္။ နားမလည္လိုက္ရင္ ျပန္ရစ္ၿပီး နားေထာင္ေပးပါ။ အသံသိပ္မရွင္းလိုက္တာမ်ဳိးဆုိရင္ ျပန္ျပန္ရစ္ၿပီး နားေထာင္ပါ၊ နားလည္သြားပါလိမ့္မယ္။ code ေတြကုိ ေသခ်ာမျမင္ရတာမ်ဳိးဆုိရင္ေတာ့ video ကုိ full screen ခ်ဲ႕ၿပီးၾကည့္ပါ၊ ဒါဆုိရင္ အဆင္ေျပသြားမယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ ကုိယ္က download လုပ္ၿပီးသြားရင္လည္း download လုပ္ရတာ အခက္အခဲရွိတဲ့သူေတြကုိ မွ်ေဝေပးေပါ့ဗ်ာ။ သူမ်ားကို ေပးကမ္းတဲ့အလုပ္က ျမင့္ျမတ္သူေတြမွ လုပ္ႏုိင္တာတဲ့ဗ်။


Credit: Website ေရးနည္း video သင္ခန္းစာ အပုိင္း ၂ (by using HTML5 and CSS3)

HTML5 နဲ႔ CSS3 ကုိ အသုံးျပဳၿပီးေတာ့ Website ေရးနည္း (အပုိင္း ၁)

မဂၤလာပါ၊ အရင္တစ္ေခါက္တုန္းကေတာ့ html4 နဲ႔ css2 ကုိ အသုံးျပဳၿပီး website ေရးနည္း ကုိ video recording နဲ႔ တင္ေပးဖူးပါတယ္။ ဒီတစ္ေခါက္မွာေတာ့ ေနာက္ဆုံးေပၚျဖစ္တဲ့ HTML5 နဲ႔ CSS3 ကုိသုံးၿပီးေတာ့ website ေရးတာကုိ video recording လုပ္ထားေပးပါတယ္။ (web-designer.sg) website ရဲ႕ design ကုိ ၾကည့္ၿပီးေတာ့ HTML5 နဲ႔ CSS3 coding ကုိ ျပန္ေရးျပတာ ျဖစ္ပါတယ္။ video ကုိ download လုပ္ရတာအဆင္ေျပေအာင္၊ video လည္း ဝါးတားတားမျဖစ္ေအာင္ အေကာင္းဆုံး size ကုိ ခ်ိန္ၿပီးေတာ့ တင္ထားေပးပါတယ္။ ၾကည့္ရတာ အဆင္မေျပဘူး ေသခ်ာမရွင္းဘူးဆုိရင္ေတာ့ video ကုိ full screen ေျပာင္းၿပီး ၾကည့္ပါ။ full screen ကုိ ေအာက္ကပုံမွာ ဝုိင္းျပထားတာေလးကုိ ႏွိပ္လိုက္ရင္ အက်ယ္ျမင္ရပါၿပီ။

  youtube full screen   

 သင္ခန္းစာ Video ၾကည့္မယ္ဆုိရင္ေတာ့ ေအာက္မွာပါ။


Credit: HTML5 နဲ႔ CSS3 ကုိ အသုံးျပဳၿပီးေတာ့ Website ေရးနည္း (အပုိင္း ၁)

How to make a blogger website

မဂၤလာပါ..
ဒီတစ္ေခါက္ေတာ့ ကၽြန္ေတာ္တုိ႔ ကုိယ္ပုိင္ blogger website ျပဳလုပ္ပုံကုိ သင္ေပးမွာ ျဖစ္ပါတယ္။ သင္ခန္းစာ မစခင္ ကၽြန္ေတာ္တုိ႔ blogger ကုိ ဘာလို႔ ေရြးရသလဲ၊ ခင္ဗ်ားတုိ႔ေကာ website ျပဳလုပ္တဲ့ အခါမွာ blogger ကုိ ဘာေၾကာင့္ ေရြးသင့္လဲ ဆုိတာကုိ မိတ္ဆက္အေနနဲ႔ အနည္းငယ္ ေျပာျပပါမယ္။
ကၽြန္ေတာ္က blogger ကုိ ဘာေၾကာင့္ ေရြးသလဲဆုိေတာ့ ကၽြန္ေတာ္ကုိယ္တုိင္ကုိက google ကေပးတဲ့ services ေတြကုိ ႀကိဳက္လုိ႔ပါ။ Blogger ဆုိတာက google က ေပးတဲ့ services ေတြထဲက တစ္ခုျဖစ္ပါတယ္။ Blogger ကုိ လူတုိင္းမသိႏုိင္ေပမယ့္၊ google ကုိေတာ့ လူတုိင္း သိမွာပါ။
ခင္ဗ်ားတုိ႔ကေရာ blogger ကုိ ဘာေၾကာင့္ ေရြးသင့္သလဲဆုိေတာ့ အဓိက အေၾကာင္းအရင္းကေတာ့ google ပါပဲ။ Blogger က google product တစ္ခုျဖစ္တဲ့အတြက္ေၾကာင့္ google ရဲ႕ မ်က္ႏွာသာေပးျခင္း ခံရပါတယ္။ ဘယ္လုိမ်က္ႏွာေပးခံရလဲဆုိတာကိုေတာ့ ေအာက္ပါလင့္ခ္မွာ သြားေရာက္ ဖတ္ရႈႏုိင္ပါတယ္။

How to Install Joomla Website

အရင္တစ္ေခါက္က XAMPP ကို Install လုပ္တာကို ရွင္းျပျပီးခဲ႔ပါျပီ။ တကယ္လို႔ အဲ႔ဒီpost ကိုမဖတ္ ရေသးဘူး ဆိုရင္ How to install Xampp XAMPP Install လုပ္တာကိုအရင္သြား ဖတ္ေစခ်င္ပါတယ္။  ဒီတစ္ေခါက္မွာေတာ့ Joomla website တစ္ခုကုိ Installation လုပ္တာကို သင္ျပသြားမွာျဖစ္ပါတယ္။ Joomla website ပုံစံကုိ ေလ့လာဖုိ႔အတြက္ အရင္ဆုံး web-designer.sg ဝဘ္ဆုိက္ကုိ သြားၿပီး စာမ်က္ႏွာနဲ႔ တည္ေဆာက္ပုံေတြကုိ ေလ့လာရပါမယ္။ ၿပီးရင္ေတာ့ Joomla Install လုပ္ပုံကုိ ေအာက္ပါအတုိင္း ဆက္ေလ့လာပါ။

Download w3schools.com for offline

ဟုိတစ္ေန႔က အြန္လုိင္းမွာ စကားေျပာျဖစ္တဲ့ထဲက တစ္ေယာက္က w3schools.com ကုိ ဝင္ၾကည့္ရတာ အခက္အခဲရွိတယ္၊ အခ်ိန္ျပည့္ ၾကည့္ဖုိ႔ အဆင္မေျပဘူးဆုိလို႔ offline ၾကည့္လုိ႔ရမယ့္ version ေလး ကၽြန္ေတာ့္မွာ ရွိေနတာနဲ႔ပဲ တင္ေပးလိုက္ပါတယ္။ ေဒါင္းလုဒ္လုပ္ခ်င္တယ္ဆုိရင္ေတာ့ ေအာက္က လင့္ခ္မွာ ေဒါင္းလုဒ္လုပ္ပါ။ Link ကုိႏွိပ္လိုက္တာနဲ႔ download က်ပါတယ္။ ေဒါင္းလုဒ္လင့္ခ္ကေတာ့

Website lay-outing with css

မဂၤလာပါ ...

ဒီတစ္ပုိင္းကေတာ့ website ေရးျခင္းရဲ႕ ေနာက္ဆုံး အပုိင္းျဖစ္ပါတယ္၊ ကၽြန္ေတာ္ တင္ေပးထားတဲ့ သင္ခန္းစာေတြကုိ ေတာက္ေလွ်ာက္ လုိက္လုပ္တဲ့လူဆုိရင္ေတာ့ အခု သင္ခန္းစာ ၿပီးရင္ website တစ္ခုကုိ ေရးတတ္မွာ ေသခ်ာပါတယ္။ ဒီ post အခုမွေတြ႕တဲ့လူေတြအတြက္လည္း အရင္သင္ခန္းစာေတြကုိ ျပန္ညႊန္းေပးပါ့မယ္။


အပုိင္း (၁) --- Analyzing a website (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)
အပုိင္း (၂) --- Coding header of Myanmar Web Designer
အပုိင္း (၃) --- Coding main menu of Myanmar Web Designer
အပုိင္း (၄) --- Coding footer of Myanmar Web Designer
အပုိင္း (၅) --- jQuery slider တစ္ခု ဖန္တီးျခင္း (Create a jQuery slider)

ဒီေန႔ video ကေတာ့ သုံးပုိင္းရွိပါတယ္၊ သုံးပုိင္း ဆုိလို႔ လန္႔မသြားပါနဲ႔ သုုံးခုေပါင္းမွ ၂၇ မိနစ္ေလာက္ပဲ ရွိတာပါ၊ အဲဒီ video ေတြကေတာ့ -

jQuery slider တစ္ခု ဖန္တီးျခင္း (Create a jQuery slider)

မဂၤလာပါ ...

အရင္တစ္ပတ္ကေတာ့ ကြၽန္ေတာ္တုိ႔ Myanmar Web Designer ရဲ႕ main body အပုိင္းကုိ ခ်န္ထားခဲ့ၿပီး footer ကုိ အရင္ သင္ျပေပးခဲ့ပါတယ္၊ ဒီတစ္ပတ္မွာေတာ့ main body ထဲက content ေတြကုိ layout ခ် တာကုိ သင္ျပေပးမွာျဖစ္ပါတယ္။

အခု သင္ခန္းစာကုိ ဘယ္သူေတြ လုိက္ႏုိင္မလဲ ?

အခု ေျပာျပေပးမယ့္ သင္ခန္းစာကုိေတာ့ ေအာက္က အပုိင္း ၁၊ ၂၊ ၃၊ ၄ ေတြကုိ ဖတ္ၾကည့္ၿပီး လုိက္လုပ္ဖူးတဲ့ လူတုိင္း လုိက္ႏုိင္မွာ ျဖစ္ပါတယ္၊

အပုိင္း (၁) --- Analyzing a website (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)
အပုိင္း (၂) --- Coding header of Myanmar Web Designer
အပုိင္း (၃) --- Coding main menu of Myanmar Web Designer
အပုိင္း (၄) --- Coding footer of Myanmar Web Designer

ဒါဆုိရင္ ကြၽန္ေတာ္တုိ႔ သင္ခန္းစာ စလိုက္ၾကရေအာင္ဗ်ာ ...

Create footer of Myanmar Web Designer

မဂၤလာပါ ...

ဒီတစ္ပတ္ေတာ့ အားလပ္ရက္ ပုိရလို႔ ကၽြန္ေတာ္ footer အတြက္ပါ video record လုပ္ထားလုိက္ပါတယ္။ ဒီသင္ခန္းစာက website တစ္ခု တည္ေဆာက္ျခင္းရဲ႕ အပုိင္း (၄) လုိ႔ ေျပာလို႔ရပါတယ္။ က်န္အပုိင္းမ်ားကုိ မဖတ္ဖူးေသးရင္ ဒီသင္ခန္းစာကုိ မေလ့လာခင္ က်န္အပုိင္း သုံးပုိင္းကုိ အရင္ဖတ္ရမွာျဖစ္ပါတယ္၊ က်န္တဲ့အပုိင္းေတြကေတာ့ ေအာက္ပါအတုိင္းျဖစ္ပါတယ္။

အပုိင္း (၁) --- Analyzing a website (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)
အပုိင္း (၂) --- Coding header of Myanmar Web Designer
အပုိင္း (၃) --- Coding main menu of Myanmar Web Designer

အပုိင္း (၁)၊ (၂)၊ (၃) ကုိ ဖတ္ၿပီးသားလူေတြကေတာ့  အခုသင္ခန္းစာအတြက္ ေအာက္က video ကုိ ၾကည့္ပါ။

Creating mainmenu of Myanmar Web Designer

မဂၤလာပါ …

အရင္တစ္ေခါက္ကေတာ့ ကၽြန္ေတာ္တုိ႔ "Coding header of Myanmar Web Designer"
ကုိ ေရးခဲ့ၿပီး ျဖစ္ပါတယ္၊ ဒီတစ္ေခါက္ post မွာေတာ့ mainmenu အပုိင္းကုိ ေရးမွာျဖစ္ပါတယ္။ ကၽြန္ေတာ့္အေနနဲ႔ “firebug” addon ကုိ မိတ္ဆက္ေပးခဲ့ၿပီး အသုံးျပဳပုံကုိ ရွင္းျပခဲ့ၿပီး ျဖစ္ပါတယ္၊ ဒီတစ္ခါ firefox addon ေနာက္တစ္ခုကုိ ကၽြန္ေတာ္ မိတ္ဆက္ေပးမွာျဖစ္ပါတယ္၊ firefox addon ျဖစ္တဲ့အတြက္ firefox မွာပဲ အလုပ္လုပ္မွာပါ၊ တစ္ျခား browser ေတြအတြက္လည္း ရွာရင္ေတာ့ ရွိႏုိင္ပါတယ္၊ အဲဒီ addon ကေတာ့ ...

Create header of Myanmar Web Designer

မဂၤလာပါ …

ဒီတစ္ပါတ္ေတာ့ ကၽြန္ေတာ္တုိ႔ html နဲ႔ css code ေတြကုိ စေရးရပါေတာ့မယ္။ မေရးခင္ ဘယ္ language က ဘာအတြက္ သုံးတယ္ဆုိတာေလး ေျပာခ်င္ပါတယ္။ html ဆုိတာကေတာ့ “Hyper Text Markup Language” ရဲ႕ အတုိေကာက္ျဖစ္ၿပီးေတာ့ website မွာ content (စာ, ဓာတ္ပုံ, ..) ေတြထည့္ဖုိ႔ သုံးရတဲ့ language ျဖစ္ၿပီးေတာ့၊ css (Cascading Style Sheet) ကေတာ့ style sheet ဆုိတဲ့အတုိင္း html က ထည့္ထားတဲ့ content ေတြကုိ ပုံစံေျပာင္းျခင္း၊ အလွဆင္ျခင္း အစရွိတာေတြကုိ လုပ္ႏုိင္တဲ့ language ျဖစ္ပါတယ္။

ဒီသင္ခန္းစာကုိ ဘယ္လိုလူေတြ လုိက္ႏုိင္မလဲ?

ဒီသင္ခန္းစာကုိ “Analyzing a website” ကုိ ဖတ္ဖူးတဲ့လူေတြ လုိက္ႏုိင္မွာ ျဖစ္ပါတယ္။

သင္ခန္းစာ အက်ယ္

Analyzing a website (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)

သင္ခန္းစာ အက်ဥ္း

ဒီ post ဟာ website ေရးျခင္းကုိ စိတ္ဝင္စားတဲ့ လူေတြအတြက္ ပထမဆုံး ေျခလွမ္းျဖစ္မယ္ထင္ပါတယ္။ အခု သင္ခန္းစာမွာ website တစ္ခုရဲ႕ တည္ေဆာက္ပုံကုိ ခြဲျခမ္းစိတ္ျဖာ ေလ့လာမွာ ျဖစ္ပါတယ္။

ဘယ္လိုလူေတြက ဒီသင္ခန္းစာကုိ လုိက္ႏုိင္မလဲ?

အခု သင္ခန္းစာကုိ website တစ္ခုကုိ ျမင္ဖူးတဲ့လူတုိင္း လုိက္ႏုိင္မွာ ျဖစ္ပါတယ္။

သင္ခန္းစာ အက်ယ္