Verecom Web Design Blog

With the booming Internet marketing and e-commerce, the web design is beginning to emphasise visual, interactive technology, and hence the RIA ( Rich Internet Applications ), the new web design techniques, become the hot topic. In order to grab this business opportunity, Microsoft has also launched a new generation of RIA product, Silverlight 3.0 and stressed that it would allow Internet users have a better interactive experience.

Compared to the traditional HTML web design technologies, RIA uses vector-style animation, multimedia and database integration, to make the website has computer desktop use patterns and functions, hence allows the integration of multi-media Web site content, and improve the visitors loyalty with more intuitive, more friendly, more interactive use experience. “Website interface and content design is from simple text-and image-based rendering and go to the era of RIA rapidly” said from Microsoft’s develop team.

RIA’s technology characteristics, not only suitable for applications in entertainment, leisure and marketing fields, but also recently used in general business applications, so there are more and more enterprises are beginning to use the RIA technologies to develop the various services. For example, the United States Continental Airlines, uses RIA technologies to develop a customer service and reservation system to process booking enquiry from 70000 customers every day, and significantly enhance the efficiency of booking and customer satisfaction.

As the bullish prospects on RIA technologies, Microsoft developed RIA design tools, Silverlight, two years ago. Now there are 400 million computers around the world have downloaded and installed Silverlight. Microsoft has also released the latest version of Silverlight 3.0, in addition to supporting HD 1080P high-definition video and off-line implementation; it also supports Windows 7 multi-touch features. Microsoft develop team believes that in the future, Internet-based media, financial institutions, as well as electronic billboards, will be the RIA’s main market.

Edited By Henry Lu

Adobe AIR is cross-platform executable software; you can perform variety of networking applications on the desktop. Therefore it is more and more popular and many independent web developers have begun to develop variety of interesting applications with the Adobe AIR platform. In this article we introduce the seven AIR-specific Web design programs, whether in visual design, interface design, interactive design and Web developers Adobe AIR program can be found useful for web designers.

Em Calculator
James Whittaker developed this Em Calculator to help web designers for computing the most appropriate font size, table alignment and so on, and automatically generate the corresponding CSS code with size, line height, borders and many more.

Download URL: www.jameswhittaker.com/blog/article/em-based-layouts-vertical-rhythm-calculator/

ColorPicker
Although the standard 32-bit screen can display 1,677 million colours, but there are limited numbers of colours which are suitable for Website, so ColorPicker can mark suitable colours and its 16 colour-coded decimal values for web designer. If the selected colour is not available from the value of Web standard, ColorPicker can also adjust the colour options for users to choose the most similar colour.

Download URL: colorpicker.riaforge.org

AIR Icon Generator
Sometimes web designer urgently needs to make a temporary Logo to client, but if designer use Illustrator or CorelDRAW with normal procedures to design is often slow in coming, hence AIR Icon Generator will come in handy. Designer just select the desired style (currently there are only two can be selected) and colour, and then enter the text to display, Air Icon Generator can quickly generate Icons automatically; It can generate a total of 4 different sizes Icon files.

Download site: clockmaker.jp/labs/air_icon/

Google Analytics Reporting Suite
Most web maters installed Google Analytics on their websites to analyse site traffic, but each time had to connect to Google Analytics interface to manage multiple site traffic, and is not convenient. The Google Analytics Reporting Suite can import multiple websites at the same time, as well as generate variety of statistical tables.

Download URL: www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1282521

Shrink O’Matic
Why should use expensive Photoshop software to scale images? In fact, with AIR application Shrink O’Matic, designers can easily set the output parameters such as thumbnail size, the output name and format, and then drag images to the Shrink O’Matic window to immediately complete the thumbnail work.

Download URL: toki-woki.net/p/Shrink-O-Matic

WebSnapshot
Web designers need to collect a number of exciting design web pages for reference, but some web pages iare too long and by pressing Alt + Print Screen is not enough. This time WebSnapshot can come in handy, and user can choose to retrieve the thumbnail or the entire web site picture, or part of the current web page you want to browse.

Download site: myspyder.net/tools/websnapshot

Pixus
How do you find out the size of a button or tables of web page? Pixus is a very interesting AIR application and its function is very simple, it displays information on the desktop with a semi-transparent box, the user simply put Pixus on the object which user want to know the size, and it will display info immediately on the box.

Download site: code.google.com/p/pixus

Edited By Henry Lu

Since Search engine came 10 years ago, the young generation is quite accustomed to the text search engine. The image search function is still a relatively new technology, but this technology brings new possibilities. By using the image search technology properly, it can be a time-saving secret weapon for web designer.

The following will introduce several new image search engine.

Picitup
Through keywords to search for a similar picture, in the search process, users can reset the scope and attributes to re-find more accurate search results.
Once find photos, users can also use the “similar pictures” function to do further in-depth search for similar pictures.

Website: www.picitup.com

Gazopa
Escape out of concept of text search engine, Gazopa’s technology will automatically analyze the image’s elements such as color, shape, composition, etc., then find similar pictures according to these elements.

Website: www.gazopa.com

TinEye
Since it is image search engine, you should be able to attempt to find image by image. TinEye allows users to upload a picture to find similar pictures. If the picture is clear and its elements are simple, than the results will be better.

However, it still cannot search for image of human face.

Website: tineye.com

Incogna
Although the home page of Incogna is simple, but the search speed is quite surprising. While also enter a keyword to search, but it can find better image according to correlation between searched images.

Website: www.incogna.com

Google Image Search
As a search engine giant, Google also has related product, with its vast computing resources, the effectiveness of its search engine is unbeatable.
Although there is no function of image search by using image, but you can still find a lot of good image by using texts.

Website: http://images.google.com/

Edited By Henry Lu

Businesses need websites, but to get a good domain name for your site can be more and more difficult, because most of the good names are already taken by others, and how to grab a good name before others, you will need a good tool.

This article will introduce 8 domain name selection tools to help you to choose your preferred domain name which hasn’t been taken, and to make recommendations of other possible domain name.

Domainr
Today, to find a perfect . Com, . Net or . Org name can be very difficult, Domainr is a interesting small tool that can help you find and propose similar well-known Web 2.0 sites, such as last. fm, del.icio.us and so on.

Dot-o-mator
Dot-o-mator is an interesting domain name generator. It can generate a suitable domain name via the prefix and suffix, you can also choose to use category pre-and post-character types to automatically produce merged domain name, and to check whether the domain name is available.

BustAName
BustAName is a domain name naming tool which uses linguistic information to assist users to obtain good domain name. It can also manage and organize the user’s search results, according to the keywords you enter to proposed similar name. The proposed domain name may be listed under a number of conditions, such as readability or length.

Domain Tools
Different from other tools, Domain Tools is a domain name search tool to find hidden information for specific domain name, such as the “Whois” search tool to find out the domain registration information and also provide “Suggestions tool” to find similar domain name, “Domain Search” tool can check whether the specified domain name is available, or on sale, auction and more.

Squurl
Squurl’s function is very simple, with Ajax technology, users type their preferred domain name, Squurl will automatically find and list out available domain name, if your are luck which that your preferred domain name is available. Users can now select favorite online domain registration business suggested by Squurl.

DomainsBot
DomainsBot is a very simple domain name search tool; you can quickly check whether the desired domain name is available. You can set the length of the domain name to reduce the number of the proposed name of your website.

StuckDomains
StuckDomains is a very interesting tool that allows users to search for “expired” domain name, if the original domain owners, forget to renew contract, or no longer used, and sometimes maybe you can pick up a very nice domain name.

Ajax Whois
To put it simply, Ajax Whois tools in the simplest way to help user to quickly find a suitable domain name, and even provides shortcuts to speed up the search efficiency.

Edited By Henry Lu

Regarding Naming Tradition

Here is a very practical question: in order not to extend the depth of the directory, and to reduce the searching time, we need to get rid of some directory level.

As we know, the purpose of adding more sub-folders to a directory is for the convenience of looking up a specific document later.

How can we find a file in a short time? Control system can correctly search the file through path, because in every directory, all symbols are the same, we can normally find:

- name of the file
- type of the file
- location of the file
- the last modified time

Path, (even you know the path, you still need to click into each subfolders for the file you need)

But for computer, it does not need to know how readable the file name to be, as long as it matches the criteria of the naming tradition, then only a unique name under the same directory is enough.

As a result, we can use some “prefix” or “suffix” to make it easier for us human to read and faster for computer to interpret.

Common prefix or suffix are: file name, file type, domain name, date and version.

For the word “demo”, you can extend its file name by adding the following:
File name:css_demo |demo_css
File type：png_demo | demo_png
Domain：blog_demo | demo_blog
Date：20090904_demo | demo_20090904
Version：v1_demo | demo_v

Edited By Dan Li

Texture Lighting Basics

Highlight is an important element to show the texture of an object, including the reflection of a line, a dot and a surface. Correct highlight will firstly deal with the source of light, this is essential, according to the position of the source and the path of diffusion, we can define side that faces the light and the side that is back to the light.

After positioning reflected light, we also need to know its characters. In addition, according to the different outline of different surface, we need to work out different shape of reflection.

For instance, an angle of a smooth surface will look like this, and its reflected surface will look like; At a sharp edge, it looks like, the reflected edge looks like; On a flat surface, it looks like, on a reflected surface, it looks like.

Below is an example to demonstrate the above points.

1. This is how you should position the light if the source of light is on the top left hand corner.

2. The highlights.

3. The combine effects of 1 & 2.

Edited By Dan Li

Vertical Gradient Model

Well, this model would require more effort, we should:

1.Modify the upper and lower edges of the height (depending on your gradient).
2.Modify the upper and lower edges of the background image positioning (depending on your gradient).
3.Use 1px repeating-x background image to create gradient effect for container div.
4.Define the size for the content, or set a minimum height for the container (again, depends on gradient).

Let’s get started!

HTML code (the same as before):

<div class=”roundedBox” id=”type5″>
<strong>My content in roundedBox Type 5</strong>
<div class=”corner topLeft”></div>
<div class=”corner topRight”></div>

<div class=”corner bottomLeft”></div>
<div class=”corner bottomRight”></div>
</div>

CSS code:

My gradients is vertical, so we have to increase the height on the upper corner, and modify the background image positioning of the lower corner.

You will know how it works when you see my new sprite. This is how it looks like in my div.

Define container div:

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}

Add in all corners (I’ve change the format of the picture to .png in order to get better gradient quality)

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
Now we increase the height of the corner (this depends on the final colour that the top reaches).

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,
#type5 .topRight {height:140px;}
At the end, I adjust the positioning of the lower corners.

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,
#type5 .topRight {height:140px;}
#type5 .bottomLeft {background-position:-1px -142px;}
#type5 .bottomRight {background-position:-19px -142px;}

IE6 version
You need to define both width and height for (.roundedBox, or #type1, #type2, etc), otherwise they will split out, also don’t forget to check with IE6 conditions.

Edited By Dan Li

Red border model

In the last article, we learn to create the rounded box, what if I want borders around the rectangle?

HTML code:

<div class=”roundedBox” id=”type4″>
<strong>My content in roundedBox Type 4</strong>
<div class=”corner topLeft”></div>

<div class=”corner topRight”></div>
<div class=”corner bottomLeft”></div>
<div class=”corner bottomRight”></div>
</div>

CSS code (add borders to your rounded corners in sprite, also match the background of .roundedBox class and border with sprite)

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}

This is what it looks like. However our corners still can not properly cover #type4. Therefore we must correct their position to cover the previous position style.

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}
#type4 .topLeft {top:-1px;left:-1px;}
#type4 .topRight {top:-1px; right:-1px;}
#type4 .bottomLeft {bottom:-1px; left:-1px;}
#type4 .bottomRight {bottom:-1px; right:-1px;}

Edited By Dan Li

Rounded box model (blue)

HTML code:

<div class=”roundedBox” id=”type1″>
<strong>My content in roundedBox Type 1</strong>

<div class=”corner topLeft”></div>
<div class=”corner topRight”></div>
<div class=”corner bottomLeft”></div>
<div class=”corner bottomRight”></div>
</div>

we need a container div to implement a special background, we will name its ID #type1.

CSS code:
First, we need to match #type1 with a background colour, so that it can fit into the rounded corners in the sprite.

#type1 {background-color:#CCDEDE;}

Then, load sprite into the rounded box through defining .corner class.

#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../images/corners-type1.gif);}

Now we have our first rounded rectangle.

Edited By Dan Li

Step 2: HTML Code

Firstly, we will give container a div class .roundBox

<div class=”roundedBox”></div>

Now, we need to add 4 more div, which will be used when we create the four rounded corners. For each corner, we need to specify a div with their position for each.

Here we need to specify the absolute-positioned element, otherwise it will follow the parent relatively-positioned element. If the parent element can not be defined, then it will take the closest element to define its position until the body tag.

Don’t worry if you are still confused, it will become clearer soon.

Now let’s define all the rounded corners:
All rounded corners must be absolute positioned, with height and width defined. In this case, my rounded corners’ height is defined as 17px.

.corner {
position:absolute;
width:17px;
height:17px;
}

Then we should start define container div:

.roundedBox {position:relative;}

All classes defined under .roundedBox will be affected by its property, but not the body tag. Also we must set some value to padding, without this setting, rounded corners will cover our body text. Important notice: value of top and bottom padding must equal to the height of the rounded corner. In the same way, the value of left and right padding must equal to the width of the rounded corner. In this case, all values should be all equal to 17px.

.roundedBox {position:relative; padding:17px; margin:10px 0;}

Last, let us define for the box without rounded corners.

We need to have all rounded corners absolute-positioned, as well as the position of the background image (according to our sprite):

.roundedBox {position:relative; padding:17px; margin:10px 0;}

.corner {position:absolute; width:17px; height:17px;}

.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

You may have noticed, our style has not downloaded the spirte yet, because we have another way to do it, which will be introduced in the next blog.

Edited By Dan Li