Monday, February 8, 2010

Web 2.0 Design Guide

Web 2.0
A web applications that facilitate interactiv.
  1. information sharing
  2. interoperability
  3. user-centered design
  4. collaboration

Such as:
  1. social-networking sites
  2. video-sharing sites
  3. wikis
  4. blogs
Technology:
  1. Broswer-side
  2. CSS
  3. Ajax
  4. 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%

Sunday, February 22, 2009

Add Sound effect to your mouseover event in HTML


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/

Tuesday, October 23, 2007

Error: malformed URI sequence

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.

Wednesday, September 12, 2007

Yahoo! UI Library: Rich Text Editor

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);
}

Friday, April 13, 2007

6 steps to Successful Site

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.

Thursday, April 12, 2007

Suggestion to webmaster from SES New York

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).

Tuesday, March 13, 2007

Why tables for layout is stupid

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 >>