jQuery / JS 社内ルール

jQuery / JS 社内ルール v0.1 2017/05/29 by Shin (shin@accorder.co.jp)

【jQuery/jsファイルの保存】

jQueryなどカスタマイズが不要なファイルはいいが、基本的に全てのjQuery/jsファイルは、directoryが必要。
良い例) /js/jquery.js <– jQuery /js/common.js <– 全ページで使う js /js/colorbox/jquery.colorbox.js /js/colorbox/colorbox.css /js/colorbox/colorboxSet.js /js/colorbox/images/border.png /js/colorbox/images/loading.gif 悪い例) /js/jQuery2.2.4/jquery2.2.4.js <– jQueryだけでいいです。他の情報不要です。 /js/common.js <– 全ページで使う js /js/colorbox/jquery.colorbox-min.js <– minは使いません。 /js/colorbox/colorbox-min.css <– minは使いません。 /js/colorbox/colorboxSet.js /images/colorbox/border.png <– jsに入れてください。 /images/colorbox/loading.gif <– jsに入れてください。 /js/jquery.heightLine.js <– directoryの中に入れて下さい。

【dist と src が両方入っている場合】

dist と src が入っているjqueryのライブラリーも多いと思います。 distだけ入れて下さい。 distの中に、minが入っていれば、minではない方を入れてください。

【Google Analyticsのコード】

必ずheadの閉じタグの上に入れて下さい。
<!-- Google Analyticsは、ここです -->
</head>

【括弧の書き方】

functionやif文などを作成するとき、 区切るところが分かりやすくなるよう、以下のように空白スペースを必ず入れてください。

sample1(var_a, var_b)までがセットです。
function sample1(var_a, var_b) {
   //...
}
if(a != b)までがセットです。
if(a != b) {
//...
} else {
   //...
}

コーディング環境 社内ルール [ENG]

Coding rules in company’s environment

Written By Shin (shin@accorder.co.jp) 2016/07/26
Translated by Nissa (nissa@accorder.co.jp) 2016/11/07


File Management

★Before releasing the site:

We use GIT from bitbucket.org https://about.gitlab.com/. If you haven’t register yet, do create your own account. Your ID should start with acc_//your name//.

Example,
acc_nissa

After that, you can download sourcetree. Both software has almost the same functions. (Download at : https://ja.atlassian.com/software/sourcetree).

Please make sure to create a folder named 【home】 under your local [Working [WEB]], which is already been created. (Keep all the files in home directory so that people can search the data easily.)

Example,
アコーダーのHPなら作業中[WEB]> home > accorder.co.jp
★Just before the site has been released:

data_mac_mini01 > 作業中[WEB] > WEB
Transfer the data that was being created at【home】to WEB.

When in comes to coding,
data_mac_mini01 > 作業中[WEB] > WEB

will be uploded in the WEB.
Upload from local is prohibited, this is to ensure that data_mac_mini 01 is up to date.

★After the site has been released:

Delete all local file from GIT since the files is also in data_mac_mini 01. After release, any maintenance can be done in data_mac_mini 01. It does not copy locally so before working on any files, make sure to put the original files at ” data_mac_mini01> Working [WEB]> WEB_DELETED ” for backup.


How to use the test server

★dev.acc-test.net:

This URL will not be given to clients. Hence, it is used to test the developed website to server. The coding must be completed and corrected before testing.

★acc-test.net (or client.acc-test.net):

This URL will be used only after we get the confirmation from the clients. If there are no error in dev.acc-test.net, you may press the sync button and hand it over to the customer.
(Synchronization panel: dev.acc-test.net/home.php)

〘Why do we need to confirm the information?〙

dev can be a problem sometimes due to the screen design and information may change. Therefore, it is prohibited to do coding during customer’s confirmation. It is advised to use “dev.acc-test.net” for internal work and use “acc-test.net” for customer confirmation.

It is prohibited to upload anything from FTP on acc-test.net (client sides). Please upload it to dev and use the sync button. It will sync automatically according to the latest date, in order to prevent acc-test from late updates.

 

HTML / CSS 社内ルール (Eng)

HTML / CSS-House Rules v1.0

Written By Shin (shin@accorder.co.jp) 2016/07/26 Translated by Nissa (nissa@accorder.co.jp) 2016/11/07

[HTML banned tag]

center, font, blink, strike, s, u, bgsound, marquee, applet, acronym, dir, frame, frameset, noframes, isindex, listing, xmp, noembed, plaintext, rb, basefont, big, spacer, tt, hr

[Eliminate the tag when there is no text]

Try to not write with the tag that does not exist. Do know the position and the use of each tag!

BAD example

<div>Hello, this is Accorder.</div>

GOOD Example

<div><p>Hello, this is Accorder.</p></div>

[BLOCK element and INLINE element rules]

  • BLOCK element in BLOCK element is OK.
  • BLOCK element in INLINE element is BAD (except when it is necessary).
  • In INLINE element, DIV is not used We use SPAN.
  • DIV is a BLOCK element. However, do not put DIV element as an INLINE element.

[How to use the BR tag]

Example
<p>
   Hello,<br>
   This is an example of the HTML of writing.<br>
   Please If you have any questions!<br>
</p>
At the end of the line put <br> tag. If there are two <br>, make a new space to show <br> is used twice!
<p>
   Hello,<br>
   Here is an example of the HTML of writing.<br>
   Please If you have any questions!<br><br>

   CSS of writing is in the other pages.<br>
</p>
If you want to create two separate paragraphs it is possible to make a new <p> tag for the separation.
<p>
   Hello,<br>
   This is an example of the HTML of writing.<br>
   Please ask, if you have any questions!<br>
</p>
<p>
   css coding is in the other page.<br>
</p>

[Example 1 four row of lines in HTML]

In this case, Japanese language is used and it is unified. As long as there is no specific reason this is compatible to use.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

[Wrapper]

Make sure to put #wrapper. Even though it is unnecessary sometimes.
<body>
<div id="wrapper">

Here in the coding.

</div><-!/#wrapper-->
</body>

[How to use the directory]

  • /images/: All images are put in here
  • /slides/: all slides are put in here
  • /js/: js · jQuery are stored in here
  • /tpl/: all Smarty’s template is in here.
  • /fonts/: fonts related are all stored here.
  • /css/: all css file is in here.

[Specified PATH]

For absolute path and also relative path, as long as there is no reason, do not write the index.html as it will not fill out the anchor. Using absolute path concept
<a href="/">Home</a>
<a href="/about/">Company</a>
<a href="/about/company.html">Company</a>
<a href="/contact.html">Contact</a>
Using relative path concept
<a href="../">Home</a>
<a href="./">Company</a>
<a href="company.html">Company</a>
<a href="../contact.html">Contact</a>
In relative path concept, file is located in the same previous lower layer, instead ./ Sample.html it can be written only Sample.html without ./ You want to link your page to an external site, it is necessary to put-> rel = “nofollow” target=”_ blank”. It is not required in some cases depending on the contents . This depends on the agreement with the person in charge through consultation.
<a href="../">Home</a>
<a href="./">Company</a>
<a href="company.html">Company</a>
<a href="../contact.html">Contact</a>
<a href="http://www.amazon.com" rel="nofollow" target="_blank">Amazon</a>

[META]

Title: Very important | important | less important keyword:Five to seven(Do enter the appropriate keywords although there are no effects on SEO) Description: Depending on the length, the keyword can be good up to 2 times.

[HTML5 tag]

<nav> <section> <article> etc. According to the rule, this can not be used because it may not be compatible for some clients PC.

[The usage and about ALT]

Be sure to type ALT for the image. If image is not loaded, ALT will appear. This is useful for those who have visual impairment.

※ Important

As for example, putting logo image in the tag.
<img src="logo.gif" alt="logo">
People with visual impairment gets information by listening to the sound. If the information received is only “logo”, the person will not understand clearly. To be fair and more precise, it is very important to describe the wording of an image. So, if Accorder’s logo is used then it is, alt=”Accorder Co., Ltd.”.

※ Important 2

    • “!”, “?”, “→” Special characters should not be in image tag. It should either be in background or list tag.
    • If it is really necessary to put in IMG tag, please use alt=”” instead of alt=”arrow”. Unnecessary information of alt will be measured in SEO techniques.

[IMG tag rules]

Basically, you will decide the width, height and alt tags. However, it is absolutely unnecessary to have width and height in image tag (depending on the design)
<img src="logo.gif" width="200" height="45" alt="Accorder Co. Ltd.">
The unit does not fill the page except percentage, %. The units are normally in pixel, so make sure to put the value of the pixel.

[Method of determining the image name]

It basically unifies according to rules. page name_type_description Page name: contact.html -> contact, index.html -> top, company.html->company type: icn: Icon bg: background image img: image bul: Brett photo: photo ※ There will be plenty of images used under the same element. Hence, please do put the image name as the example below … Example) contact_icn_phone.png contact_icn_fax.png contact_bg.png contact_bul_phonenumbers.png

[Format of the image]

jpg: photo (QUALITY: 40% ~ 60%) png: all of the image other than the photo (the banner that contains the photos, saved in jpg) gif: for animation If required support from old browser, png is used not gif. It corresponds the Retina display. Adjust the size to two times bigger and the vertical double-wide. Then for img tags, please adjust the size in css.img tags, or just adjust the size in CSS. For example, if the image is 320×320, then write in 640×640. retina

[How to close the tag]

■ Example of ID
<div id="wrapper">
<p>aaaaaaaaaaaaa</p>
</div> <-!/#wrapper-->
■ Example of CLASS
<div class="wrapper">
<p>aaaaaaaaaaaaa</p>
</div> <-!./wrapper-->
If the source code is short, it wont be a problem to know which DIV belongs to which DIV. But if the codes are long and it does not fit in one screen, then comment is needed right next to the closed tag. So that it is easy to be identified.

[Method of determining the ID · CLASS name]

Putting proper name for every class created will give a huge advantage so that you can use in all of the pages

Example of a class used in all pages:

Ex) all_top_menu Ex) all_footer Ex) all_footer_copyright

Example of index.html:

Ex) top_welcome Ex) top_welcome_title Ex) top_content Ex) top_content_news Ex) top_content_blog

Example of contact.html:

Ex) contact_phone Ex) contact_fax Make sure that short forms are not used when coding. Some people may not understand short forms and it can be a waste of time to figure it out. Avoiding short forms help to speed up the efficiency work of coding. Ex) top_ttl → top_title Ex) Top_pt → Top_photo Ex) Wrp_ct → Wrapper_content Even though it is just a class name, please be sure that the name can be predicted by others. So that they can detect where is the class located easily. #footer: The footer ID at? #footer_logo: The logo is in the footer? #footer_logo_text: The text and the logo is a part of the footer? #footer_copyright: The copyright of the footer may be placed outside of the footer_logo?

[CSS writing-orders]

  • background
  • width
  • height
  • margin
  • padding
  • position
  • float
  • display
  • border
  • line
  • letter
  • text
  • font
  • color
※ In particular, background ~ padding, text ~ color are protected like always!

[Always put this on the first line of css file]

@charset "utf-8";
※ Should be saved in UTF-8 format.

[CSS file name]

    • reset.css → reset (default)
    • style.css → basically the main file
    • language.css → foreign language support is required, some of the foreign language is compatible to use.
    • responsive.css → responsive case depending by the scale.

[How to write CSS]

#top .menu .menu_list .logo h1 span strong {…} → BAD This is too long! Put class at the end of strong, if it is impossible to make it short. .title_bold {…} → GOOD
h1.top {…} → BAD
Heading tag does not specify ID and CLASS.
.top {…} → GOOD

[Js / jQuery destination]

JQuery, just like Bootstrap and the base file except for the file “common.js” which was created from scratch. These files should be placed and renamed in a folder which represent each Js / JQuery.

Example) colorbox

    • js/colorbox/colorbox.css
    • js/colorbox/colorboxSet.js
    • js/colorbox/jquery.colorbox-min.js
    • js/colorbox/jquery.colorbox.js
    • js/colorbox/images/
    • js/colorbox/images/border.png
    • Etc
Do not mix. Even there is only one element of Js, it should be distributed in a different folder according to it functions.

[Challenge Course]

※ This is not compulsory, but can be very useful and good.
      • Do not use Float
      • If there are two or more values of Margin and padding, please do summarize instead of using Margin-top
      • For Color code, make sure it is in all uppercase. Instead of #ffcccc, write #FFCCCC. Color code can be written in short form only if there are repetition in letters like #FFCCCC can be written as # FCC
      • In HTML, do not write H1 after H2. This should be in order, H1 H2 H3 H4…
      • If there is a side menu, on the coding, it brings to the next content

Consultations or suggestions are welcome anytime, thank you. Let’s shorten the coding time by complying the efficient rules!