Personal studio website development specifications V1.0

I. Overview
Whether it's the oldest HTML or recently popular Ajax, website development is always an experiment that combines a variety of the latest technologies. As a personal studio, there are only a handful of members, mostly working by hand.
Workshop, usually one person has to assume multiple roles, both front-end artist and background Engineer Program Personnel, both overall planning and detailed database design ...... To
The development of small and medium-sized websites (web projects) has become the first choice for personal Studios.
Because of a set of good development specifications, hand workshops can also have powerful competitiveness like software factories. Only in this way will we spare no effort to arm all kinds of original high-end development technologies to the hands-on workshop.
The essence of a network is sharing. This development specification is developed by the deep Studio
(Www.deepcast.net) created by the deep pupil (server # deepcast.net), and released the latest version on www.deepcast.net, according
By Creative Commons Attribution-submit alike 1.0
The terms of authorization indicate that you are welcome to copy, distribute, and use the terms of authorization, but you must refer to the original author. derivative works derived from this website must also comply with the terms of authorization.

2. five basic roles in the studio (in the order they appear in the website development cycle): Usually one person and multiple roles.
(1) System Architect planning: conducts requirement analysis, provides detailed planning solutions, and plans website promotion later.
(2) Project Manager: customizes and monitors the overall project design, development progress, and development specifications, reviews all links, and coordinates various members (groups). It also targets shareholders.
(3) software developer ):
A. Artist: Design website AI, UI, and logo based on planning and requirements.
B. programmer: design the database and function module implementation based on the overall project design.
C,CodeIntegrator: responsible for integrating the code and interface of the programmer. The Code integrator can create pages related to the website,
(4) software Tester: responsible for testing the program.
(5) Solution Architect (maintainer maintenance): Project deployment and change, technical support, project maintenance, website version control, project document maintenance, reports, and project tracking.

3. Common development tools

1. common tools for artists:
Web editing software
Dreamweaver MX/Frontpage: create a website framework and a webpage
Image software
ADODB Photoshop, imageready, firework, and other designs, Two-Dimensional Image Processing
Webpage animation software
Flash MX: Animation
Adobe Illustrator: vector image processing
Other tools for creating web pages: cool360 for creating panorama, swish for creating flash text effects, and CuteFTP for publishing.
Specific technical implementation of webpage special effects: Ajax: javascript + DHTML

2. Common Tools for programmers:
Traditional powerdesigner/Rational Rose can be used for modeling. You can also consider using case studio or MS Visio for database management.
IDE select as needed, Dreamweaver/visiual studio.net/vs.net Express, etc.

3. project management tools:
Microsoft Project: Development Progress
Visual sourcesafe: code version control. You can also use CVs or rational clearcase.

4. Test Tool: Microsoft Application Center test, a companion tool of vs.net, which can perform parallel and load testing.

5. Document tools: Word/WPS.

In addition, Ms's latest visual studio.net 2005 team suite integrates IDE, modeling, testing, project management, documentation, MSF, and other team development functions, which are coming soon.

Iv. System Analysis Technology:
1. Development Process:
Our goal is to establish a simple and standard development process.
In order to pursue a balance between speed and quality, professional studios spend much time on overall planning, design, and system testing than coding. This is reflected in the two phases of review and test.
Website development process
Figure:

Figure "onLoad =" javascript: If (this. width> 500) This. width = 500 "Height =" 491 "width =" 415 ">
In fact, the two main lines of front-end and back-end development were not completely independent in the early stages of project development. Web planning and demand analysis often require comprehensive consideration by system architects. One is website presentation and style planning, the other is the planning of website functions. They are the relationship between clothes and trunk. At the end of the development stage, the frontend and backend are merged into one.

2. System Analysis:
Requirement Analysis: it is very important and requires the experience and communication of planners.
Website Construction Scheme and quotation: Design Sketch, planning structure diagram, production cost, Company Profile
Website Construction Details: Art Design (columns, layout, etc.), Background planning (module analysis, database design, etc.), website deployment, standard directory
Positioning of the overall website style: website type, general industry style (color tone, strokes)

Overall Image Design: Standard words, logos, standard colors, and slogans.

Homepage design (1-3, please sign one): Style Design (layout, color, image, dynamic effect, icon); Module Design (banner, menu, title, copyright ).

3. Development and Production: the screen size is 800*600 (actually 778*434), the standard page is A4 (8.5*11 inch), and the small banner is 88*31, small icons can use 120*90,120*60.

4. Test and Maintenance
5. Seo and website promotion: set appropriate meta tags and log on to Google,

V. Art Design
(1) Application of Color Matching in websites
1. Basic Knowledge
2. Color Scheme
3. Color Selection
4. Four functional roles of colors
5. Use colors to locate websites
(2) design the user interface
1. Art considerations: Basic knowledge includes space composition (Plane Composition, three-dimensional composition) and time Composition
(1) text:
Title.
Font:, neatly clear, can be used for typographical titles (BOLD) and text (fine ). Bold and bold, neat and serious, can be used for title sorting. The circle is full and round and can be used for text, title, and decoration. In addition, art and calligraphy can be used for titles, advertisements, and decoration.
Width: fine words beautiful calm Yin soft, bold words strong enthusiasm Yang Gang. It is best to use a standard font for the text.
Font size: strong confidence and compact characters. If the title is zoomed in, the page is active. If the title is zoomed in, the page is zoomed out.
(2), color: configure the appropriate color tone and the page theme to be harmonious, such as the elegant gray tone, bright colors of healthy and lively.
(3), shape (image): vivid illustrations and photos can directly represent the theme of the page. Use photos to add stories and illustrations to increase impressions.
(4 ),
Layout, use photos of life to express life and self (you can use the same color to express your fantasies.
And closed. Use the left and right alignment to express intelligence and openness; Use the scattered panorama to show freedom and ease; use the satellite to show family stability; Use the surround style to show limits; Use the scatter style to show
Flow and freedom, elegance and ease;
(5) Page Structure: use white spaces and color blocks to display page information in groups, so that the page structure is clear.

2. Practical Design:
(1), welcome: available flowers/smiling faces and other pictures; available bright colors (vigor), bright colors (pleasure), soft colors (calm); available festive scene pattern (spring festival, birthday, garlands, peach hearts, Peking Opera images ).
(2) To convey trust: The image can be used with natural and reasonable bright colors, and the layout can be neatly balanced.
(3) Strengthen persuasion/affinity: relevant illustrations and photos are available, and Pos Character styles are available.

(3) Advertisement Design
1. Design Principles: eye-catching and beautiful, persuasive content, reasonable number of settings, and coordination with the entire page
2, standard size (unit: pixel)
300*250 medium rectangle, 250*250 square, which can be used inside the page
130*300 vertical rectangle, 120*600 vertical bar, mixed with the body
360*300 large rectangle, used in pop-up window
468*60 bar ads, 234*60 half-bar ads
88*31 link logo
120*60 button style, 120*240 vertical button, 125*125 square button, can be used for a large number of customers to small ads

5. Comprehensive Technologies such as Layer/table/framework/template/behavior/JavaScript/CSS/database technology are used:

Vi. Development specifications

To unify the overall style of the project, maintain and expand the code, and overcome the risks arising from the decentralization, independence, and integration of web project development, each team will develop according to rules or conventions.

1. Database Development

[Data file name]
The system name + _ + file type is used. For example, if the system name is kupage, the database file is named kupage_database.mdf. Some database files have multiple, such as SQL
There are two server files, one is a database file and the other is a log file. Their files are named kupage_database.mdf respectively,
Kupage_log.log. All file names are in lower case.

[Database table name]
The table name cannot exceed 30 characters. The table name contains all words in the singular form. The first letter of the word must be in upper case. No connected symbols are required between multiple words. If there are multiple systems in the database, the table name should be system name _
A system name is short for a development system. All system names are in lowercase English, such as bbs_title and bbs_forumtype. If the library contains only one system
Table names only use one or more words. Select one or more English words that can summarize the table content, such as userinfo and usertype. The name of a joined table is re_table _.
B. Re is the abbreviation of relative, such as re_user_articletype and re_user_formtype.

[Database Field naming] database Field names are all lowercase English words separated by "_". The naming rules are table alias + word, such as user_name and user_pwd.

[Table alias rules] If the table name is a word, the first four letters of the word are used as the alias. If the table name is a word, take the first two letters of each word to form an alias with four letters. If the table name is composed of three words, take two from the first word and then take one letter from the last two words. The result is a 4-letter alias.

[View name] VIEW _ Table A _ table B _ Table C, view indicates view. When several tables are generated in this view, use "_" to connect the names of several tables. If there are too many tables, you can simplify the table name properly, but you must list all the table names.

[Stored procedure name] P _ TABLE name_access procedure name (abbreviation), such as p_user_del and p_articletype_adddata.

[SQL statement writing] the keywords must be in upper case. Other writing rules follow the naming rules described above. For example:

Select user_id, user_name from user where user_id = 'Tom'

2. Naming rules for folder file names

[Folder naming] generally uses English letters, with a length of no more than 20 characters, and lowercase letters are used for naming. Chinese Pinyin is used only in special cases,

*
Some common folder names include: images (storing graphical files), flash (storing Flash files), style (storing CSS files), and scripts (storing
JavaScript scripts), Inc (storing include files), Link (storing links), and media (storing multimedia files.

[File name]
A combination of lower-case letters, numbers, and underscores. The guiding ideology of naming principles is that you and every member of the Working Group can easily understand the meaning of each file, and when we are in a folder
When the command "sort by name" is used, files of the same category can be arranged together for us to search, modify, replace, and calculate the load.

[Naming rules for images] _description. The two parts are separated by underscores, And the header part indicates the main types of images, such as advertisements, logos, menus, and buttons.
* The banner name is the advertisement, decorative pattern, and other rectangular images placed on the top of the page.
* Name the iconic image: logo
* For a small image with a link that is not fixed on the page, we name it "button ".
* The image appears continuously at a certain position on the page. The image of the same link bar is named menu.
* We name the decoration photo pic.
* An image without a link is named title.
* The following are examples: banner_sohu.gif, banner_sina.gif, and menu_aboutus.gif.
、Menu_job.gif, title_news.gif, logo_paie.gif, logo_national.gif
、Pic_lele.jpg.

[Naming rules for dynamic language files] Description of nature _, which can contain multiple words separated. The general nature is the summary of the page. Example: register_form.asp, register_post.asp, topic_lock.asp

3. program code programming specifications

[Overview] a good program coding style is conducive to system maintenance, and the code is easy to read and troubleshoot.

* Only the programming style and conventions of ASP are discussed here. All variables in ASP are weak variables, which can be used directly without being defined, and the code is case insensitive. But other languages are generally defined. In order to develop good programming habits, you must follow the rules below to write code.

1. Each variable name must be defined. Add the statement <% option explicit %> at the beginning of the ASP file to force each variable to be customized.
2. For the purpose of easy reading and consistency, use the following variable naming conventions in the Code:

Subtype | prefix
| Example
| Prefix I like

Boolean
| Bln
| Blnfound | BL

Byte
| BYT
| Bytrasterdata | BT

Date (time) | DTM | dtmstart | da

Double | DBL | dbltolerance | DB

Error
| Err
| Errordernum | er

Integer | int | intquantity | in

Long
| LNG
| Lngdistance | LG

Object
| OBJ
| Objcurrent | OJ
 
Single
| Sng
| Sngaverage | SG
 
String | STR | strfirstname | St
 

3. [program code] requires indentation. indentation uses the tab key on the keyboard instead of the Space key. And "=" or a link string needs to be left and right blank,

* Example:
<%
Stmessage = "hello"
Stmessage = stmessage & "goodbye"
%>

4. [function process] writing conventions. The function or process naming uses Action + nouns. Each function requires corresponding comments, function functions, input variables, and the author and modification of relevant information.

* Example:
<%
'[Function] returns the value of a parameter.
'[Parameter] stparametername parameter name
'[Author] icefire 2002/8/20 AM
Function getparametervalue (strparametername)
Dim objrs, strsql, strparametervalue
Stsql = "select parametervalue from damsparameters where parametername = '" & strparametername &"'"
.
Getparametervalue = strparametervalue
Set objrs = nothing
End Function

5. [Asp built-in objects] are case sensitive. The following code snippet

* Example:
Stusername = request. form ("username ")
Set conn = server. Createobject ("ADODB. Connection ")

6. [database connection] A database can only have one database connection file. The principle of creating a database object is to open the database as late as possible and close the database as early as possible. Create a database object call and create a function in a unified manner.

* Example:
Sub openconn (byref conn)
Dim strdbpath, strdbconnection
Stdbpath = server. mappath ("database/tax. mdb ")
Stdbconnnection = "driver = {Microsoft Access Driver (*. mdb)}; DBQ =" & stdbpath
Set conn = server. Createobject ("ADODB. Connection ")
Conn. Open stdbconnnection
End sub

7. Release object resources when an object is not in use, such as ojfso and ojrs objects. Unified function call is used.

* Example:
Sub closeobj (byref OBJ)
If isobject (OBJ) then
OBJ. Close
Set OBJ = nothing
End if
End sub

9. All the time is saved to the database in the form of a string. In this way, the date can be well saved in different databases, and it is also convenient for database migration. The time is saved as a 14-bit string, and the date is saved as an 8-Bit String.

8. Glossary
Web project development involves frontend and backend development,
[Website front-end development] mainly refers to non-program programming. Its main responsibilities include website AI design, interface design, and animation design. It mainly refers to Web interface design, including website overall framework establishment, common pictures, Flash animation design, and so on.
[Website Background Development] is mainly used for programming and website operation platform construction. Its main responsibility is to design the implementation of website databases and website function templates. It mainly refers to website dynamic program development and database modeling.
In addition, [website project management] mainly controls the development progress and code version.
[Development specifications] a development convention and rules that must be customized before any project or System Development

9. For more information, see Article :

use of color matching in the website
http://spaces.msn.com/members/silicn/Blog/cns! 1pfxlhngzhuekwmtieqk9nga! 2453. Entry
http://download.winzheng.com/SoftDown.asp? Id = 27696
full search engine optimization (SEO) Knowledge manual
www.sowang.com/resources/2005_hbj_seo.pdf
about website development specifications
http://3rgb.com/ B? Act = viewthread & category = 3 & threadid = 216 & page = 2