A UI specification file

A UI specification file

This is a UI template specification, in the B/S version of the application, in fact, such things are not what formal norms, just to adapt to the development environment we are facing and the organization process to do some expedient efforts, and solve some problems with the program communication and interface, try to avoid misunderstanding and friction.

A suitable environment and objects
Two necessity
Three technical principles
Four Code writing specifications
Five-page Template usage specification

A suitable environment and objects
This specification is applicable to the software project development of B/s version based on browser. Template page Authoring and template file application work in the development process must be performed in accordance with this specification. The applicable object is development coder, UI designer, template writer, interface tester, etc.
This technical specification is not applicable to client-based C/s software development work.

Two necessity
The purpose of this specification is to develop technical standards for the work cross-section between coders and UI template writers, so that they follow the same operating norms and facilitate smooth handover of cross-work. Standardized way to improve the level of communication and technical cooperation, improve work efficiency. Reduce and change responsibility unclear, task unclear, and the resulting information communication is not smooth, repeated changes, duplication of labor, inefficient phenomenon.

Three technical principles
Code Normalization Writing
Code normalization is consistent with the overall script style, ensuring consistent scripting styles written by the same person at different times and consistent scripting styles written by different developers in the same workgroup. Because development cannot be done in isolation, code normalization writing is a prerequisite for collaborative communication between project team members.

Data layer, structure layer, presentation layer separation
Data content is the actual information that the page actually conveys, including data, documents, or pictures. The "real" emphasis here refers to the sheer data information itself. The information content in a suitable format, in short, page layout, such as: divided into titles, authors, chapters, sections, paragraphs and lists, so that the content more logical, clear and easy to read and understand, called "structure (Structure)" Although the structure is defined, but the content or the same style has not changed, For example, the title font is not larger, the color of the body has not changed, no background, no decoration. All of these things that change the appearance of the content, called "Performance (Presentation)" "Performance" to make the content look beautiful, pleasing and inspiring!

All HTML and XHTML pages are made up of three aspects: structure, performance, and behavior. Abstract a little understanding, the content is the basic layer, and then attach to the structure layer and the expression layer, the human interaction with the page content and operation effect is called "behavior (Behavior)",

For the separation of data, structure and performance, it was first proposed in the theory of software development architecture. The UI Designer designs the page template, the programmer is responsible for the content data embedding, the data may be extracted from the database, may be static writing of the prompt text, and finally form a new page to show to the software operators. The structure of the template file is defined using the html+xhtml tag, and everything involved in the presentation is stripped out and put into a separate file, which is the CSS.

The benefits of separating data, structure and performance are:
Programmers do not need to think too much about the page display problem, but only need to put the data into the template corresponding location according to the template effect. The structure and performance of the interface is the responsibility of the UI designer. Fill in the structure of the data consciously applied to design a good performance effect. Finally, a complete interface for implementing the function is presented.
The separation of the presentation layer keeps the whole software interface visual consistency, making the revision also become very simple, modify the style sheet can be;
As the structure is clear and the data layer is relatively independent, it is more convenient and flexible to integrate, update, process and reuse the data.

Four Code writing specifications

(i) directory structure and naming rules

Directory structure specification
1. The principle of directory establishment: Provide the most clear and simple access structure at the lowest level.
2, the root directory generally only store index.htm and other necessary system files
3, in the root directory in principle should be in accordance with the system column structure, to each column to open a directory, according to the needs of each column in the directory to open a images and media sub-recruitment to place this column proprietary pictures and multimedia files, if the content of this column is particularly large, and many subordinate columns , you can open other directories accordingly. The images in the root directory is used to store the common images to be used on each page, and the images directory under the subdirectory holds the private images used in this column.
4, all js,asp,php and other scripts stored in the root directory of the scripts directory
5. Cgi-bin directory where all CGI programs are stored in the root directory
6. All CSS files are stored in the root directory in the style directory
7. Each language version is stored in a separate directory. Example: Simplified Chinese GB
8, all flash, AVI, RAM, QuickTime and other multimedia files stored in the root directory of the media directory
9, the temp sub-recording customers to provide a variety of text pictures and so on the original data, to the name of the time to open a directory, the customer will provide the data sorted.

File and directory naming conventions
1, the principle of file naming: With the fewest letters to achieve the most easy to understand the meaning.
2, each directory contains the default HTML file, file name unified with Index.htm
3, the file name unified in lowercase letters, numbers and underscores combination, must not contain Chinese characters, spaces and special characters
4, as far as possible according to the English translation of the word name. For example: feedback (feedback), AboutUs (about us) it's not the last resort. Do not use pinyin as the directory name
5. Multiple files of the same type are named with English letters and numbers, and the letters and numbers are separated by _. For example: news_01.htm. Note that the number of digits is proportional to the number of files, not enough to use 0 to complement. For example, a total of 200 news, of which 18th is named news_018.htm

Naming conventions for pictures
1, the name is divided into the head and tail 22 parts, separated by an underscore.
2. The head part represents the large class nature of this picture. For example: The ads placed at the top of the page, decorative patterns, such as rectangular pictures we name: banner; The iconic image we named: logo; On the page is not fixed and a small picture with a link we are named button; The image of the link column of the same nature we name: menu, decorative photos we name: pic; no link to the title of the picture we name: Title according to this principle and analogy.
3, the tail part is used to indicate the specific meaning of the picture, in English letters. Example: Banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic _people.jpg pic_hill.jpg.

4, have onmouse effect of the picture, two in the original file name after adding "_on" and "_off" name

Other file naming conventions
1, the naming principle of JS in the function of the English word as the name. For example: The ad bar JS file name is: ad.js
2. All CGI files are suffixed with CGI. The configuration file for all CGI programs is config.cgi

(ii) HTML authoring rules
　　
General principles
1, in the preparation of template files, the layout of the structure of the table, to consider a best solution, the table nesting as far as possible to control within three layers, to consider the implementation of the application of the realization, versatility, flexibility, predictability, all content is a building block organization, can be replaced and deleted, and the overall structure will not have a destructive impact
2, try to avoid <colspan> <rowspan> two marks, experience shows that these two marks will bring a lot of trouble
3, a webpage to try to avoid using the entire table, all the content is nested in this large table. Because the browser in the interpretation of the page elements, is displayed in the form of a table, if a page is nested in a large table, then it is likely to result in, when the viewer typed the URL, he had to face a blank for a long time, and then all the content of the Web page appears at the same time. If you have to do this, use the <tbody> tag so that you can make this large table chunk display
4, typesetting often encountered the need to carry out the first line indentation, do not use full-width space to achieve the effect, the standard practice is to define p {text-indent:2em;} then add <p> tags to each paragraph, note that, in general, do not omit </p > End Tag
5, in principle, we prohibit the use of to human intervention in the size of the image display, and the recommendations labels do not take the width and height two properties, this is because during the production process, the picture often needs to be modified repeatedly, so as to avoid human intervention image display size, As much as possible to play the browser's own function, but such a side effect is that when the page has not loaded the picture, will not leave the image of the position size, may cause the page in the loading process jitter (if the picture is inserted in a fixed-size table, there is no such phenomenon), especially when the size of the picture is large, This can be obvious, so when you anticipate that this will obviously cause page jitter to occur, be sure to attach the width and Height properties to the at the end.
6, in order to maximize the function of the browser automatic typesetting, in a complete text, try not to use <br> to manually intervene in segments
7. There should be a half-width space between the words in different languages, except for the sign before and after the avoidance, the punctuation between Chinese characters should be used with full-width punctuation, and the parentheses around the letters and numbers should use half-width brackets
8, for the implementation of the principle of separation of the structure layer and the performance layer, the use of traditional html3.2/4.0 control performance of the label, such as <font>,<b&gt, and also intended to be used in the structure later abused to control the performance of the label, such as:9, do not appear in the Web page more than one and try to use less full-width space (the English character set, the full-width space will be garbled), white space should try to use text-indent, padding, margin, hspace, vspace and transparent GIF pictures to achieve.
10, in Chinese and English mixed, we as far as possible the English and the number defined as Verdana and Arial two fonts
11. Line spacing is defined as a percentage, and the two leading values used are line-height:120%/150%
12, the path in the system all adopt relative path
13, in order to ensure the compatibility of the system and browser, when setting the background picture, stick to double quotes.
14. "Page Size" is the sum of all the file sizes of the Web page, including HTML files and all embedded objects. The page size stays below 34K for the right

Code rules
Head area identification (head area refers to the content between 1, the company copyright note
<!--
Generator: Medium Soft Melt xin
Creation Data:2005-8-1
Original Author: Zhang San
-

2. Web page display Character set
Chinese Simplified:
<meta. http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
Chinese Traditional:
<meta. http-equiv= "Content-type" content= "text/html; Charset=big5 ">
English
<meta. http-equiv= "Content-type" content= "text/html; Charset=iso-8859-1 ">
?
3. Introduction
<meta. Name= "DESCRIPTION" content= "here to fill your website profile";?

4, Web page CSS file definition, all CSS files as far as possible to use external calls
<link href= "Style/style.css" rel= "stylesheet" type= "Text/css" >

5. Page Title
<title> here is the title of your page </title>

6. All JavaScript scripts try to take external calls
<script. language= "JavaScript" src= "Script/xxxxx.js" ></SCRIPT>

The head area can optionally join the logo
7, set the expiration time of the webpage. Once the page expires, it must be re-accessed on the FWQ.
<meta. http-equiv= "Expires" Content= "Wed, 1997 08:21:57 GMT" >

8, prohibit the browser from the local computer cache to access the page content.
<meta. http-equiv= "Pragma" content= "No-cache" >

9. To prevent others from calling your page in the frame.
<meta. http-equiv= "Window-target" content= "_top" >

10, automatic jump.
<meta. http-equiv= "Refresh" content= "5; Url=http://www.yahoo.com ">
5 means time to stay for 5 seconds.

11. Web Search Robot Wizard. Used to tell the search robot which pages need to be indexed, and which pages do not need to be indexed.
<meta. Name= "Robots" content= "None" >
The content parameters are all,none,index,noindex,follow,nofollow. The default is all.

12. Favorites Icon
<link rel = "Shortcut Icon" href= "Favicon.ico" >

13. Search Key Words
<meta. Name= "keywords" content= "keyword 1, keyword 2, keyword 3,..." >

Marks below the head area
1. Body tag
To ensure browser compatibility, you must set the page background
<body bgcolor= "#FFFFFF" >

2. Table Tag
When writing <table> nesting, in strict accordance with the specification, for a single <table>,<tr>,<td> each indent two half-width space, the end tag and the start tag are flush. <td> if there are nested table,<table> also indent two half-width spaces, if there are no nested tables in <td>,</td> the closing tag should be on the same line as <td>, do not wrap.
Correct wording:
A\
<table width= "100%"? Border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<table width= "100%"? Border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

B\
<td></td>

Wrong wording
A\
<table width= "100%"? Border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><table width= "100%"? Border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

B\
<td>
</td>
This is because the browser thinks that the line is equivalent to a half-width space, the above is not the canonical way to inadvertently add a half-width space, if it is necessary to add a half-width space, you should also write:
<td> </td>

At the same level of <table> must be left aligned, and do not allow empty cells without any content exists, height greater than or equal to 12px should be between <td> and </td> write A; If the height is less than 12px, a transparent GIF picture of 1*1 size should be inserted between <td> and </td>, because some browsers think empty cells are illegal and will not be interpreted. If the code order is messy, you can rearrange it in the DW via command->apply souce formatting!

3, Width and height markers
In general, there is only one column of the table, width written in the <table> label, only one row of the table, height written in the <table> label, multi-row multi-column table, width and height written in the first row or the first column of the &LT;TD > in the tag. In short, follow one principle: No more than one control of the same cell size of height and width, to ensure that any one width and height are valid, that is, change the code of any width and height of the value, should be seen in the browser changes.
A, the width tag of a column-only table
<table width= "100%"? Border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
b, the height tag of a row-only table
<table width= "100%" height= "30"? Border= "0" cellpadding= "0" cellspacing= "0" >
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Width and height markers for C, multiline multi-column tables
<table border= "0" cellpadding= "0" cellspacing= "0" >
<tr>
&LT;TD width= "height=" >&nbsp;</td>
&LT;TD width= ">&nbsp;</td>"
&LT;TD width= ">&nbsp;</td>"
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

4, table's Width property

To follow the principle of page structure flexibility and generality, the Width property of table is all written in principle to 100% or not the Width property, it is not recommended to write other non-100% width attributes. The empty display effect is implemented by applying the Padding property of the style to the external TD.

<table width= "100%"? Border= "1" cellspacing= "0" cellpadding= "0" >
<tr>
<TD width= "" bgcolor= "#FF0000" >
<table width= "100%" border= "1" cellpadding= "0" cellspacing= "0" bgcolor= "#FFFFFF" >
<tr>
<td>table width 100%</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
<td>&nbsp;</td>
</tr>
</table>

It should be explained that although the style of the TD is CSS, but not the content of the presentation layer, but belong to the structure layer of content, so you can directly write in the middle of the HTML tag.

5, data list table code notation
Table plus a <div>, and an ID for <div>, that is, <div ID =list>, and then through the style sheet on the ID of all the HTML elements under control,
with <th> indicates that the table header
sets the position of the width of each column in the <th> of the header, where the number of words in the list item is the most or the variable is not set to a width. The value of the
width is determined by the number of items in the list, 2 characters of 30px, three characters of 40px, time, month day (e.g. 2004-11-11) 80-120px,
similar to the title of the list item, table alignment is left aligned (align=left), Time, The names are generally aligned in the center, and the data is generally right aligned (align=right).
do not use div to align the contents of the page, write align= directly in TD or TH ...
Header text is generally not wrapped by adding nowrap to <th> or by using a style sheet to control the

<table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<th width= "nowrap>" Selection </th>
<th align= "left" nowrap> title </th>
<th width= "Nowrap>" published by the People </th>
<th width= "nowrap>" Time </th>
<th width= "nowrap>" size </th>
</tr>
<tr>
<td>&nbsp;</td>
<TD align= "left" >&nbsp;</td>
<TD align= "center" >&nbsp;</td>
<TD align= "center" >&nbsp;</td>
<TD align= "right" >&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<TD align= "left" >&nbsp;</td>
<TD align= "center" >&nbsp;</td>
<TD align= "center" >&nbsp;</td>
<TD align= "right" >&nbsp;</td>
</tr>
</table>

(iii) CSS authoring rules

CSS file call notation
1, all the CSS as far as possible to use external calls, special circumstances to allow the use of built-in HTML notation.
<link href= "Style/style.css" rel= "stylesheet" type= "Text/css" >

CSS File Structure organization
1, file header, CSS file name, time, author

2, the different purposes and effects of CSS selectors are grouped separately, group hierarchy level to make the structure clear, easy to check. and properly block the comment, note the object to illustrate the applied paging file. Top notes are preceded by *top*, and secondary annotations are not used.

　
. headtext {
font-size:14px;
Color: #ffffff;
Font-weight:bold;
}?
. headtext A:link {
Color: #ffffff;
Text-decoration:none;
}
. headtext a:visited {
Color: #ffffff;
Text-decoration:none;
}
. headtext A:hover {
color:fed078;
Text-decoration:none;
}

#clientcard {
Align:left;
}
#clientcard th {
height:20;
font-size:12px;
Color: #737373;
Padding-left:10;
Font-weight:bold;
background-attachment:fixed;
Background:url (Images/dot2.gif)

Background-repeat:no-repeat;
Background-position:left Center;
}
#clientcard TD {
height:20;
font-size:12px;
Color: #FD783A;
padding-right:25;
}

3, the order of the selectors grouping is redefined first, pseudo class second, custom finally. Easy to read for yourself and others.
For example:

BODY {
margin-left:0px;
...
}

TD {
font-size:12px;
...
}

a:link {
Color:? #484848;
Text-decoration:none;
}
a:visited {
Color: #484848;
Text-decoration:none;
}
a:hover {
Color: #BD0800;
Text-decoration:underline;
}

. ltreename {
font-size:14px;
...
}

Class and ID naming conventions
1. Name the class and ID as a function and define the location of the object, rather than the appearance. For example, a. Smallblue class was created, and later it was intended to change the text to a color red, and the class name no longer had any meaning. Therefore, it is more appropriate to use more descriptive names such as. Copyright and. Info-list.

Unit
1, 0 no units
2, not 0 value to indicate the unit, specify the font, margin, or size, you must indicate the units used
Example: padding:0 2px 0 1em;
3, Special case: Line-height do not need units

Font size
1, in order to ensure that the font size on different browsers is consistent, the font size pixel px to define, general use of Chinese song 12px and 14.7px This is an optimized font size, bold or italicized word bold, generally choose the size of 14.7px more appropriate
For example: font-size:12px;

Order
1, a:link a:visited a:hover a:actived to be written in canonical order
2. The short order of the Border (border), margin (margin), and filler (padding) is: The clockwise direction starts from the top, that is, Top, right, Bottom, and left.
Example: margin:0 1px 3px 5px; indicates that the top margin is zero, the right margin is 1px, and so on.

Combo Selector
1, keeping the CSS short is very important to reduce the download time. Minimize redundancy by grouping selectors, leveraging Inheritance (inheritance), and using shorthand (shorthand).

Working with pictures
1, the CSS often encountered the use of pictures, the path of the image is used relative path.
For example:

. hurdlename {
font-size:14px;
Color: #0B43C2;
height:25px;
Font-weight:bold;
Background-image:url (images/rbar_bg.gif);
Background-repeat:repeat-y;
text-indent:12px;
}

. but1{
Background-image:url (.. /images/but1.gif);
font-size:12px;
Color: #000000;
border:0;
width:85px;
height:26px;
Cursor:hand;
}

2, the use of image replacement technology to consider with the system and file structure of affinity. If all the files referencing the CSS are not at the same level relative to the path, there will be an issue where the CSS-specified picture cannot be displayed. In this scenario, the use of picture technology is not supported. It is recommended to use filter technology
For example:

Input.buttton {
Filter:progid:DXImageTransform.Microsoft.Gradient (gradienttype=0, startcolorstr= #CFD1CF, endcolorstr= #EFEFEF);
border: #B5B6B5 1px solid;
font-size:12px;
Color: #000000;
Cursor:hand;
height:24px;
Background: #ffffff;
}

Five-page Template usage specification

The purpose of the page template usage specification is to unify and contract the UI design, interface engineer and different program Coder's behavior, and the specification of writing code does not completely solve the unity problem of interface application. Because different coders have different understanding of the same template, and the different personal work habits, the results of the interface are often prone to differences. Even a little bit of difference, can make the quality of software has a great impact.

Clear division of responsibilities
1, UI design, interface Engineer is responsible for the interface style design and software template writing, and supervise the effect of the interface applied. Responsible for the final interface of the software.
2, the coding Engineer is responsible for the implementation of software business logic, software template application. Responsible for the data and procedures of the software.
3, the reality is that the individual coding engineers in the template after the deviation, in the interface engineer to propose changes in the time to refuse to modify, to develop progress, time is not enough to stall, and even the subjective think "this (interface) is not important" causes the interface Engineer's role is not due to play, affecting software PRODUCT quality.
4, the solution is accountability. Interface issues to increase the level of attention, and into the development process and progress management.

Interface Template Junction Process
1. When the template file is finished, it should be presented to the coding engineer with a brief description and reminder of the template's documentation.
2, coding engineers and interface engineers work closely to fully understand the template use instructions.
3, the interface structure layer HTML table nesting relationship understanding clearly and clearly and the purpose of the combination of procedures. There is a situation that is not compatible with the program, and further discussion with the interface engineer to obtain the solution. The table structure, positional properties, and nested relationships must not be modified without the knowledge of the interface engineer. The downside to this is that while a person solves a temporary display problem, the results are different from those applied by other coding engineers. It is also not conducive to interface engineers to control the overall interface.
4. The corresponding relationship between the interface element of the presentation layer and the CSS file selector. Be aware of, understand a template file, to apply other files can be extrapolate.

5, the Code engineer fully understand the interface template, it will be able to smooth the content of the data layer into the appropriate location of the structure layer, and specify the appropriate selection of the performance layer selector attributes. Complete the interface apply work.

The content of the template description
1, the overall interface structure
2, the layout of the page plate and positioning table of the wording
3. Reasons for the way table is nested
4, different functions of the interface display unit description and use method
5, the use of the selection of CSS file instructions, the general can understand, individual special to highlight.

Version control of CSS files
CSS files should be introduced into the version control mechanism, the project team should be designated person responsible for the CSS file upload and modification. Fwq CSS files and interface engineer's CSS files should be updated synchronously. Encoding engineers are not supported to arbitrarily add selectors to modify CSS files. Anyone can change there is no standard, no version control to do difficult to achieve a unified interface

A UI specification file