Web Technology Blog

Web 2.0 Design Guide

2010-02-08T17:45:00.000-08:00

Web 2.0
A web applications that facilitate interactiv.

information sharing
interoperability
user-centered design
collaboration

Such as:

social-networking sites
video-sharing sites
wikis
blogs

Technology:

Broswer-side
CSS
Ajax
DIV

Features of Web2.0

Simplicity: 2.0 design means focused, clean and simple. User-Generated Content.

Why simplicity is good?

* Web sites have goals and all web pages have purposes.
* Users' attention is a finite resource.
* It's the designer's job to help users to find what they want (or to notice what the site wants them to notice)
* Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice,
and the less likely a user is to notice the important stuff.
* So we need to enable certain communication, and we also need to minimise noise. That means we need to find a solution that's does its stuff with as little as possible. That's economy, or simplicity.

How?

There are two important aspects to achieving success with simplicity:

1. Remove unnecessary components, without sacrificing effectiveness.
2. Try out alternative solutions that achieve the same result more simply.

Simple navigation:
* 2.0 design makes global navigation large, bold, clean and obvious.
* Inline hyperlinks (links within text) are typically clearly differentiated from normal text.

Why simple navigation is better?

Users need to be able to identify navigation, which tells them various important information:

* Where they are (in the scheme of things)
* Where else they can go from here
* And what options they have for doing stuff

Following the principle of simplicity, and general reduction of noise, the best ways to clarify navigation are:

* Positioning permanent navigation links apart from content
* Differentiating navigation using colour, tone and shape
* Making navigation items large and bold
* Using clear text to make the purpose of each link unambiguous

Bigger text
Making things bigger makes them more noticeable than lesser elements. This effect has been used throughout the history of print design, on headings, title pages and headlines.

Rich surfaces
Realistic surface effects (like drop-shadows, gradients and reflections) help make a visual interface feel more real, solid and "finished".

They may also remind us of certain tactile or aesthetic qualities of real-world objects, such as water droplets, shiny plastic buttons, and marble floors. Making stuff look solid and real can make it look "touchable", which is likely to appeal.

Cute icons
Icons can be useful when they're easily recognisable and carry a clear meaning.

Improvement:

Layout: the designer's job to help users to find what they want
Improvement: focused, clean and simple. minimize noise.
Main menu is important: navigation is not obvious.
Revolution (800 x 600) is too small: 1024x768 is better
http://www.w3counter.com/globalstats.php
January 2010
1 1024x768 27.16%
2 1280x800 20.24%
3 1280x1024 11.03%
4 1440x900 8.61%
5 1680x1050 5.57%
6 1366x768 4.30%
7 800x600 3.51%
8 1152x864 2.39%
9 1920x1200 2.04%
10 1280x768 1.54%

Add Sound effect to your mouseover event in HTML

2009-02-22T20:17:00.000-08:00

function onSoundlibLoaded() {
$('a').mouseover(function () {
soundPlay('2000hz', 10);
}).mousedown(function () {
soundPlay('click2', 50);
});
$('#say').unbind('mousedown').mousedown(function () {
soundPlay('saq2_' + String('0' + Math.floor(Math.random() * 23 + 1)).substr(-2), 100);
});
$('#name-saq').unbind('mousedown').mousedown(function () {
soundPlay('saq1_' + String('0' + Math.floor(Math.random() * 23 + 1)).substr(-2), 100);
});
$('.email-saq').unbind('mousedown').mousedown(function () {
soundPlay('saq3_' + String('0' + Math.floor(Math.random() * 23 + 1)).substr(-2), 100);
});
}
function soundPlay(sid, vol) {
getSwf("soundlib").playA(sid, vol);
}

source: http://saqoosha.net/en/category/flash/

Error: malformed URI sequence

2007-10-23T03:12:00.000-07:00

When use decodeURI to get the ajax feedback, it will return the error of malformed URI sequence if the feedback include some character like: %. The soltion is to make sure the feedback is a encodeURI or escape string, then don't use decode. More choice is use % as the replace.

Yahoo! UI Library: Rich Text Editor

2007-09-12T02:36:00.000-07:00

YUI Editor is a powerful editor. I've try it on some projects, The conclusion is it's definitely good enough to customize and control to display and use on my projects. This is my favorite menu:

toolbar: {
titlebar: 'Editor', collapse:true,
buttons: [
{ group: 'textstyle',
buttons: [
{ type: 'push', label: 'Bold', value: 'bold' },
{ type: 'push', label: 'Italic', value: 'italic' },
{ type: 'push', label: 'Underline', value: 'underline' },
{ type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
{ type: 'color', label: 'Background Color', value: 'backcolor', disabled: true },
{ type: "push", label: 'Align Left', value: 'justifyleft' },
{ type: "push", label: 'Align Center', value: 'justifycenter' },
{ type: "push", label: 'Align Right', value: 'justifyright' },
{ type: 'push', label: 'Justify', value: 'justifyfull' },
{ type: 'push', label: 'Remove Formatting', value: 'removeformat', disabled: true },
{ type: 'push', label: 'Indent', value: 'indent', disabled: true },
{ type: 'push', label: 'Outdent', value: 'outdent', disabled: true },
{ type: 'push', label: 'Create an Unordered List', value: 'insertunorderedlist' },
{ type: 'push', label: 'Create an Ordered List', value: 'insertorderedlist' },
{ type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true },
{ type: 'push', label: 'Insert Image', value: 'insertimage' },

And I found a little problem when use this HTML editor: the sign of collapse menu is always minus when click to collapse the menu. This is my solution:

add two setStyle to change the CSS background style of collapse in editor-beta-min.js on 24 line:

//alert(Dom.getStyle(collapse,'background'));
if(Dom.getStyle(this.get('cont'),'display')=='none'){
Dom.setStyle(collapse,'background','url(/editor/assets/skins/sam/sprite.png) no-repeat 0 -400px;');
Dom.setStyle(this.get('cont'),'display','block');
Dom.removeClass(collapse,'collapsed');
this.fireEvent('toolbarExpanded',{type:'toolbarExpanded',target:this});
}else{
Dom.setStyle(collapse,'background','url(/editor/assets/skins/sam/sprite.png) no-repeat 0 -350px;');
Dom.setStyle(this.get('cont'),'display','none');
Dom.addClass(collapse,'collapsed');
this.fireEvent('toolbarCollapsed',{type:'toolbarCollapsed',target:this});}},this,true);
}

6 steps to Successful Site

2007-04-13T00:09:00.000-07:00

1. Mastering the basics - figure out where you are today and measure over time to know impact. Keep a list of domains and sub domains you own and what they're doing. If you have other domains that are dupes, your SEO needs to know this. Monitor your log files. Not just analytics. Log files show what is making the request. You want to know what pages the SE's are requesting. You need to know if something is blocking you website from se's.

2. Track your rankings for business critical keywords at major SE's. Collect data from different sources, like Yahoo! Google, MSN. Use tools like Omniture, Wordtracker, etc. Webposition shows rankings. Keep monthly reports for your websites to spot problems earlier.

3.Internal cross linking - most sites have a global top nav and go down to other levels. Breadcrumbs are how you link back up. Go top down and bottom up. Side to side too. Make sure you have all these links. URL structure. Make them text links. Why? Its easy for se's to read URLS of text links. SE's don't execute JavaScript. Some JavaScript has the url in it and the SE may be able to see it. Don't trust it. If a section of your site is not being indexed, it could be the URL structure. Alt attributes don't get much weight for SE's. They are used behind images. SE's can't fill out forms. Forms are great for users, provide another path for SE's.

4. Footer links - recommends using them. Link to the most important pages on your site. Not all partner sites or links pages. Keep it short and simple. Less links equals more weight for each one on the page. Short URLs are less complex and easier to follow. Many levels down is interpreted as not being important on your site. The higher up the link, the most "important" you feel the page is.

5. Http request/response cycle - referring url user agent name, ip address, cookies for domain, more. http response is 3 digit status code (200, 301, 302, 404), html code, location of redirect, cookies or more. Every request is met with a response. Some URLS have moved, for example. There are cookie communications to and from.

200 ok code - all is well and here is your html. Don't put a custom error page with 200 ok code.
301 - permanent moving of page; redirect to appropriate page
302 - temp move
404 - custom error page

6. The circle of death - do not block entire site using robots.txt file. Don't permit a "Disallow://". Don't require anyone to require a cookie to access the site. SE's don't accept cookies. Don't force cookies to see a particular country. Can cause huge problems. Every URL should have unique content.

Suggestion to webmaster from SES New York

2007-04-12T23:55:00.000-07:00

Use tags
your blog software will have a page for that tag and rank in search engines for that tag. You should try to have a cool title, but an SEO-perfect title tag. There’s an “SEO Title Tag” plugin for WordPress that lets you customize those, which is great (must install!), you can assign any unique URL a unique title tag.

Create tag conjunction pages
combining multiple tags for great SEO. Says you should do what ProBlogger does, putting featured posts in blocks at the top of the page. Don’t use “permalink” to link to your post, use the title (unless you want to rank well for permalink, dope). Try sticky posts, which always appear at the top of your category page to introduce it (WordPress plugin: Adhesive).

Why tables for layout is stupid

2007-03-13T01:25:00.000-07:00

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text.
Read more >>

Lightbox JS v2.0

2007-03-13T01:20:00.000-07:00

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
Read more >>

The BBC's Fifteen Web Principles

2007-03-12T23:26:00.000-07:00

From a BBC2.0 project developer, Such as:

Do not attempt to do everything yourselves
Treat the entire web as a creative canvas
Remember your granny won't ever use “Second Life”
Consistent design and navigation needn't mean one-size-fits-all

Read more >>

An Example of State Diagram

2007-03-12T21:18:00.000-07:00

The example below is the state transition diagram for the initial state of my parser. The links don't lead anywhere, so don't bother clicking on them. Do change the text size in your browser, though, and look at the example with styles turned off if your browser lets you.
Read more >>

Is invalid code created through JavaScript ok?

2007-03-12T21:10:00.001-07:00

When developing web sites with heavy interactivity, your scripting skills are really put to the test. And, sooner or later, you will be put in a situation where it’s a fine line between following web standards and what’s best from a performance and structure perspective. One question that follows that is: is it ok to apply invalid attributes via script to elements? Read more >>

Best CSS Rounded Corners Solutions

2007-03-12T21:08:00.001-07:00

This collection of techniques to create boxes with rounded corners using CSS has become quite popular. The problem now is there are so many choices it's hard to know which one to choose.
Read more>>

The website 3-click rule

2007-03-12T21:03:00.000-07:00

Is it important that users be able to get to any content in a website within 3 clicks?

We hear at least weekly of companies enforcing the “rule” that users must be able to get to any page in the site within 3 clicks. There are several problems with this rule. More detail

53 Hot CSS Tips

2007-03-12T20:43:00.000-07:00

smashing magazine contributed 53 accessible and usable css-based designs, base on the simple and easy principal, I think the following CSS styles are worth to learn:

CSS Bar Graphs (CSS For Bar Graphs)

Define Image Opacity with CSS

Drop Cap - Capital Letters with CSS

How to Create a Block Hover Effect for a List of Links

CSS Tricks for Custom Bullets

Creating a Star Rater using CSS

Displaying Percentages with CSS

Dynamic Piechart with CSS