Web Production Guideline

Wednesday, April 30, 2008

A template is layout and is divided it into zones, in the pre-design phase before production. There are:

• Header
• Footer
• Left
• Right
• Center
  

Within these zones, the Header and Footer zones are special has specific information to go in. The Left, Right, and Center Zones are typically filled with the following different types of blocks:

• entry tags,
• catalog tags,
• menu,
• drawings,
• info blocks,
• info boxes,
• ...
  

The color and shape of these zone color and tag/block color are selected at step 1 of the production. These blocks are to be placed into the Right, Left, and Center zones during step 6 of production (see below). The structure of website ensures the production can work in an orderly fashion. And this guideline also governs what can be changed, and can not during production.

All the parameter used in the layout are pre-designed or configured prior to the production started (step 1). Those parameter of configuration should not be touched during step 6 of production content fill. Since we have never established this rule before, we will pay more attention in following this guideline.

As a reminder, let me list the 9 steps of website order fulfillment (production) process:

1. choose a site template/layout
2. create menu (site map structure)
3. match the site color style
4. create baseline repository,
5. each staff check out their designated pages
6. content fill:
7. check in
8. QA
9. publish (release)

The content fill are executed with multi-staff in parallel

• match the info box color
• modify the info block placement, size, layout
• match/place the entry tags
• header/footer

Design Guideline

web design style and format
- reference: e.g. http://www.webstyleguide.com/

Text formatting
- reference: http://www.e-agency.com/landing_webdev.shtml
1. do not make a long text descriptive block;
2. do not only use bullet/number itemize approach; and
3. mix the text,
4. insert (processed) picture,
5. itemize the contents,
6. use mulit-column when possible,
7. balance the white space.
8. double and triple check the alignment.

Text font, points, and etc.
1. small points give you elegance but only on the white background
- reference: http://www.e-agency.com/landing_webdev.shtml
2. consistent font throughout the entire site/page
3. font/point/color/underline change only on the special words, for example: heading, quote, and title
4. always underline the hyperlink
5. use single line spacing.
6. 10 points on the light background seems to be the most common choice.
7. same indentation through out
8. build all common practice into css, and obtain prior approval for over writing the default css style

Text contrasting on the background
1. do not use dark on dark,
2. use white lettering on the darker background,
3. use black lettering on the lighter background.

Tables background and borders
- usage: itemized packages or plans
- reference: http://www.zinfi.com/
1. use some off-prime or grey background color
2. use gradient or stronger hue on the title cell
3. use 1 pt white or very light color border, do not stress the outline
4. clear MORE button to the next level page

Organization
1. divide the content to no more than 3-5 parts at each level
2. navigation links should be 10-12 links at each level
3. hyperlink as much as we can
4. access entrance should be everywhere, such as login/registration, chat, product and service menu

Product and service menu page
1. summarize in tabular format
2. more buttons to each category
3. replicate this information in different places and in different shape and format

Gallery page
1. balancing the levels of pages i.e. minimize the number of clicks (levels) v.s the size and number of thumbnails
2. easy and attractive navigation structure
3. quick and easy access to the detail information

To Choose a (set of) Color Scheme for the website

In a lot of cases, we browse different websites, and we came across a rare one and like what we saw. Colorpicker would be able to pick up the color code, right there and then.

colorpicker http://quick-html-color-picker.allgraphicstools-com.qarchive.org/_download2.html The color value will be converted to RGB and HTML format.
The colorpicker is an executable, you can create a shortcut to place it on the start command menu, or leave the executable on the desktop.

When edit our own site, we like to pick a set of matching colors, here is how we do it:
theme picker http://www.yafla.com/dforbes/yaflaColor/ColorRGBHSL.aspx?

The guideline for picking the right color:

1. to use the above suggested tools
2. to apply gradient on the tag, not the mouse over one (vey low appearance frequency)
3. to use different color tone (saturation) on the neighboring tags

9 Sitepoint great books on webdesing

All following books in one Place

http://rapidshare.com/files/66092901/9_site_point_e-books.rar

The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques
The Art & Science Of CSS
Build Your Own Web Site The Right Way Using HTML & CSS
The Principles of Beautiful Web Design
The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition
The Flash Anthology: Cool Effects & Practical ActionScript
Build Your Own AJAX Web Applications
Firefox Secrets
Simply JavaScript

Navigation Menu

Tuesday, April 29, 2008

DHTML Menu System
http://subi2xezequiel.blogspot.com/2008/02/sothink-dhtml-menu-v-8.html

After installation and replaced the DHTMLMenu.dll on the C:\Program Files\SourceTec\Sothink DHTML Menu 8

Bring up the application and click on top menu bar - Sothink tab, choose the menu you like, then the program will bring you to the sothink Free Download page


Download DHTML menu builder --- Sothink DHTML Menu, to create JavaScript cross browser menu, pop-up navigation menus in clicks!

Go click on the following:
Please download version 8.5 directly.

Dreamweaver Spry Menu
This tutorial was post originally on ZeForce.com


Another Tutorial Part 1 Part 2 Part 3

<a href="#h-12.2.4">fdsafdsa</a> <a name="h-12.2.4">12.2.4</a>

Mouse Over change image

Here is the code generator to change the image when mouse over: http://www.htmlbasix.com/mouseoverimages.shtml

MP3 Production - Split and Join the clips

The long processing delay for editing the mp3 clips directly on the audacity is caused by the re-compressing of the long mp3 clips.

The better practice is to split and join the header theme song clip and the exisitng episode clip using another tool - mp3 splitter and joiner. This way we avoided the long recompression of the half to an hour mp3 clips.

EZ SoftMagic MP3 Splitter and Joiner v3.27.1

1. Install via setup.exe
2. Copy Mp3Mate.exe to installation directory and overwrite original
3. Run the application and register using any name and serial number
4. Restart the application.

Download


Install the VST plugin, an equalizer among many effects, http://audacityteam.org/vst/, on Audacity. Example:http://plus247.com/podcast/salesletter_sample.mp3, suppressed volumne and bass(200Hz) during narration. For a natural sound effect best to mix with equalize, envelope, and fade filters.

List the posts as Categories on the side bar

Friday, April 25, 2008

The very first thing you have to do is whenever you make posts (or edit old posts), type the relevant labels (categories or tags) in the field provided at the bottom of the post editor (see screen shot below, the part highlighted with a red circle):
Label List in the sidebar (or elsewhere)


Blogger Label List Page Element

Just adding label or labels to a post will help but will not be very useful because a visitor will see the label or labels only at the bottom of a particular post. It would be much more useful if you add a Label List to the sidebar (or anywhere you like) so that the list of labels you use will appear in every page, including the main (home or index) page, the individual post pages (permalinks) and the archive pages.

Click the TEMPLATE tab, in the post editor page, and you then should see the LAYOUT. The proceedure may be slightly different depending on which page of Blogger you are in. It could be you will need to click on PAGE ELEMENTS instead.

Click on the ADD A PAGE ELEMENT in the LAYOUT page, and you will get a "pop-up". Select LABELS (see screenshot at the beginning of this section).
You will the see CONFIGURE LABELS where you can chose to display the labels either alphabetically or by frequency, plus you will see Labels already added to the title of that Page Element.

My habit is to add (Categories or Tags) to that because categories and tags are better known.

After you have made a choice, click SAVE CHANGES and you will see the new Page Element added to the top of section.

If you are happy with that, your job is done. If you want it elsewhere, hover your mouse over the new Page Element and the cursor will change to a cross: Blogger Page Element: Cursor changed to cross at Page Element in LAYOUT for dragging to new position. You can now drag it to wherever you want it.

Like in the example above, you want someone to see all your posts you made about your favorite books, just add the label "My Favorite Books" (minus the quotation marks) and any other labels you want and you will see the link "My Favorte Books" in the Label List in the sidebar. Anyone clicking on that link will see all your posts you made on your favorite books.

Post on iTune Store

How To Submit A Podcast To ITunes

How to embed mp3 player!

Here's another away: a Flash player from providentpartners.net that allows you to pause and rewind the MP3 as well, with a different look and feel. The mp3 file still need to be hosted on your server (or on another server). While there are many solutions based on Flash, this is the one most of the podcaster use:

<object id="audioplayer5" width="290" height="24" data="http://www.providentpartners.net/blog/wp-content/plugins/audio-player/player.swf" type="application/x-shockwave-flash"> <param value="http://www.providentpartners.net/blog/wp-content/plugins/audio-player/player.swf" name="movie"> <param value="playerID=3&soundFile=[MP3 file address]" name="FlashVars"> <param value="high" name="quality"> <param value="false" name="menu"> <param value="transparent" name="wmode"> </object>

You just have to replace [MP3 file address] with the actual address.

Here you can see how it looks. In this audio, I have placed a song from Teresa Deng located on url=http://www.plus247.com/podcast/DLJ5.mp3:






Download

Complete List of Embeded MP3 Players

Tuesday, April 22, 2008

<embed src="'http://webjay.org/flash/xspf_player'" wmode="'transparent'" flashvars="'playlist_url=" com="" rounded_corner="1" skin_color_1="" skin_color_2="0,0,0,0'" type="'application/x-shockwave-flash'" pluginspage="'http://www.adobe.com/go/getflashplayer'/" height="234" width="400"> </embed> <embed src="http://www.odeo.com/flash/audio_player_standard_gray.swf" quality="high" allowscriptaccess="always" wmode="transparent" type="application/x-shockwave-flash" flashvars="valid_sample_rate=true&external_url=http://www.plus247.com/podcast/ReasonToBelieve.mp3" pluginspage="http://www.macromedia.com/go/getflashplayer" height="52" width="300"> </embed>





Download