Design

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 Pゴシック” , “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 Pゴシック” , “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:

<label> My name is Joe </label>
<label> I am 18 age </label>

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/

Hello

Leave a Reply

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