SPWM Unique Coding

ကျွန်မကတော့ Web Designer အဖြစ်ဝင်ရောက်လုပ်ကိုင်နေတဲ့ ဆုရည်ထွန်း ဖြစ်ပါတယ်။ ဒီအပတ်မှာတော့ Spiceworks Myanmar ရဲ့ Design Team Leader ကိုအောင်ခန့်ဖြိုးရဲ့ လမ်းညွန်မှုဖြင့်member များစုပေါင်းပြီး Unique Coding စာအုပ်လေးလုပ်ဖြစ်ခဲ့တဲ့ စာအုပ်လေးအကြောင်းကို ပြောပြချင်ပါတယ်။

အဖွဲ့လိုက် coding ရေးရာတွင်အဆင်မပြေမှုများ လျော့ချနိုင်မဲ့ နည်းလမ်းလေး တစ်ခုဖြစ်ပါတယ်။ Freelancer တွေအတွက်တော့ coding အပြောင်းအလဲ ကမသိသာပင်မဲ့ Teamwork လုပ်တဲ့အခါမှာတော့ အချင်းချင်းအဆင်ပြေစေဖို့ နားလည်လွယ်ပီး စနစ်ကျတဲ့ coding flow တခုရှိသင့်ပါတယ်။

Unique coding စာအုပ်လေးထဲက အားလုံး နဲ့အဆင်ပြေမဲ့အကြောင်းရာအချို့ကို
တခြား teamwork လုပ်နေတဲ့လူတွေကော အခုမှ စတင်လေ့လာမဲ့သူများပါ လေ့လာနိုင်အောင် နမူနာအဖြစ်ဝေမျှပေးချင်ပါတယ်။

ပထမအနေနဲ့ Data တခုအဆင်ပြေ ချောချောမွေ့မွေ့ ထွက်လာဖို့ path လမ်းကြောင်းကအရေးကြီးဆုံးဖြစ်ပါတယ်။
ယခုလက်ရှိ design team မှာအသုံးပြုနေတဲ့ folder တည်ဆောက်တဲ့လမ်းကြောင်းပုံစံလေးဖြစ်ပါတယ်။

1. Create Folder path

├ img/

├ css/

├ js/

├ index.html

Project မှာအသုံးလိုမဲ့ပုံလေးတွေကို img folder လေးဆောက်ထားရင် data ရှာရတာကော coding ရေးတဲ့အခါမှပါအဆင်ပြေပါတယ်။အဲ့လိုပဲ CSS,JS file တွေကို လဲ folder ဆောက်ထားပြီးအသုံးပြုရင်ပိုကောင်းပါတယ်။

ဒုတိယအနေနဲ့ကတော့ CSS Format ပါ။ Responsive Web Site များဖန်တီးရာမှာ PC,SP CSS coding တိုင်းကို format ချထားသင့်ပါတယ်။ကိုတကယ်ရေးတဲ့အချိန် ပိုပီးအဆင်ပြေပါတယ်။ နမူနာလေး လေ့လာကြည့်ပါနော်။

2. CSS Format

For PC

@charset utf-8;
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family:Avenir , “Open Sans” , “Helvetica Neue” , Helvetica , Arial , Verdana , Roboto , “游ゴシック” , “Yu Gothic” , “游ゴシック体” , “YuGothic” , “ヒラギノ角ゴPro W3” , “Hiragino Kaku Gothic Pro” , “Meiryo UI” , “メイリオ” , Meiryo , “ＭＳＰゴシック” , “MS PGothic” , sans-serif;
}

article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block;
}

ul li {
list-style: none;
}

a{
text-decoration:none;
}

input,select,textarea,button{
margin:0;
padding:0;
border:0;
box-shadow:none;
border-radius:0;
}

img{
width:100%;
vertical align:middle;
}
.pc{
display: block;
}
.sp{
display: none;
}
.clear{
clear: both;
}
.inner{
width: 1200px;
margin: 0 auto;
}

For SP

@charset utf-8;
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: .12rem;
vertical-align: baseline;
background: transparent;
font-family:Avenir , “Open Sans” , “Helvetica Neue” , Helvetica , Arial , Verdana , Roboto , “游ゴシック” , “Yu Gothic” , “游ゴシック体” , “YuGothic” , “ヒラギノ角ゴPro W3” , “Hiragino Kaku Gothic Pro” , “Meiryo UI” , “メイリオ” , Meiryo , “ＭＳＰゴシック” , “MS PGothic” , sans-serif;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block;
}
ul li {
list-style: none;
}
a{
text-decoration:none;
}
input,select,textarea,button{
margin:0;
padding:0;
border:0;
box-shadow:none;
border-radius:0;
}
img{
width:100%;
vertical-align:middle;
}
.pc{
display: none;
}
.sp{
display: block;
}
.clear{
clear: both;
}

Teamwork မှာ အသုံးပြုရအဆင်ပြေမဲ့ CSS Stylesheet တွေကိုလဲသတ်မှတ်ထားသင့်ပါတယ်။Spiceworks Myanmar မှာတော့ External Stylesheet ကို ပိုအသုံးပြုပါတယ်။

3. Google Fonts

https://fonts.google.com/

ကိုယ့်ဆီမှာ မရှိတဲ့ good fonts တွေကိုအဆင့်သင့်ထည့်သုံးလို့ရပါတယ်။ HTML file မှာဖြစ်ဖြစ် CSS file မှာဖြစ်ဖြစ် အဆင်ပြေတဲ့နေရာမှာ ယူသုံးလို့ရပါတယ်။ အောက်မှာ ဘယ်လိုထည့်သုံးရမလဲဆိုတာလေးပါ ပြောပြပေးထားပါတယ်။

Specify in HTML

*css*

font-family: ‘Roboto’, sans-serif;

(or)

Specify in CSS

font-family: ‘Roboto’, sans-serif;

4. Naming Images

Please name for image as following :

top page

top_img01.jpg
top_img02.jpg
top section page top_topBg.jpg
about section page top_aboutBg.jpg
text section page top_aboutTxt01.jpg
top_aboutTxt02.jpg
btn btn_squarer.gif
ico ico_triangle.gif
ico_login.gif
ico_menu_open.gif

bnr bnr_sub01.jpg
h1～h6 h2_business01.gif
h3_service01.gif
tit tit_topic01.gif
txt txt_corporate01.gif
pic pic_about01.jpg
img img_about01.jpg
mainimg mainimg_about01.jpg
footer footer_index.png
footer_index_hover.png

5. There are two cases naming class

1. Camel Case (Eg: contentRed)
2. Snake Case (Eg: content_red)

Class နာမည်တွေ Id နာမည်တွေကို teamwork မှာအသုံးများမဲ့ပုံစံတခုကိုရွေးချယ် အသုံးပြုနိုင်ပါတယ်။

6. Usage of heading tag(h1 – h6)

<h2>Myanmar Made<</h2>
<h3>T-Shirt</h3>
<h3>Skirt</h3>
<h4>Red-Shirt</h4>
<h4>Red-Shirt</h4>
<h2>Myanmar Made</h2>
<h3>T-Shirt</h3>
<h3>Skirt</h3>
<h4>Red-Shirt</h4>

If you arrange so that it is in the order like “h1 ⇒ h2 ⇒ h3 ⇒ h4” within the page it will be in the correct state.

7. Don’t use <br> for separating layout

• You can create with css using inline-type.
• Don’t use <br> in HTML tag.

Eg:

output: My name is Joe.
I am 18 age.

label {
display: inline-block;
}

8.Free Download Icon
http://www.flaticon.com/
http://icooon-mono.com/

9.The Color Scheme Designer

http://paletton.com/
スマートフォンサイト用文字サイズの実験

10.Facebook buttons plugin
https://developers.facebook.com/docs/plugins/like-button

11.twitter button
https://publish.twitter.com/

12.google plus button
https://developers.google.com/+/web/+1button/

“ To Impress Others By Works "

Leave a Reply Cancel reply