05
二 13

你的网站去了js还有可用性吗?

一直到现在,都认为一个网站的真正可用性,应该是开发之时就不考虑js应用,完全纯静态页面+后端程序打造一个网站,最后才去添加js应用,这个比较针对ajax部分,同一个url对应的后端方法至少需要两个,一个是对ajax请求响应,返回部分数据,一个是对普通get请求响应,返回整个页面。

js(比如jQuery)的事件绑定机制,可以让你轻松暴露真实的链接地址,但是点击了该链接,通过return false阻止浏览器默认行为,就可以走ajax途径,做到良好的页面效果。当js被禁用,该链接可以依然有效。

js(比如jQuery) 可以让你做到,对搜索引擎是纯静态的内容,而对用户却是由ajax动态载入和更新的内容。既不影响用户体验,也不会影响搜索引擎搜录 。

以上都是附属,非正题,而且说起来容易,想做好却是工作量巨大。回归正题,今天在浏览资讯,无意关联到了一个网站,发现其首页的幻灯切换真正体现了什么叫 网站可用性

看图,这是在禁用js的情况下截图:

Unnamed-QQ-Screenshot-300x152

这样的外观很常见,应该很容易想到js效果是怎样的。

而该幻灯效果在禁用了js的情况下, 外观没有很大改变,仅仅是右侧出现了一个滑动条,可以拖动以浏览幻灯的不同内容,而左下角的数字标识则是以锚点的方法依然起作用,点击数字可以跳到锚点对应的图片幻灯内容。

话说,之前从未想过如此去做一个幻灯效果,怎么样,有木有启示?!

该网站地址为:http://www.mymodernmet.com/

转自:http://cssor.com/this-is-the-genuine-website-usability.html


25
十 12

关于专题设计,元芳你怎么看?

页面特性:产品页面简洁易用,专题页面绚丽视效印象深刻。

在页面设计当中,产品页面(如facebook 微博 twitter 微吧等)的设计。注重功能,交互,设计要考虑用户长时间的浏览体验。视觉上侧重间距,布局,按钮和logo,及icon样式。注重规范和视觉识别性。样式通常简洁易用,绚丽元素少,视觉上并不强调冲击力。

专题页面时效性有限(大多专题是有推广及活动时间限制的,过了这个时间,就很少会有人再访问该页面。),多为活动推广和吸引用户等内容,能在限定的时间的吸引最多用户才能形成有力的推广,需要强有力的视觉效果,和有趣的浏览体验,来达到吸引用户的特点。在规范和布局甚至交互上可以适当放宽要求。

用抢眼的视觉吸引户并留下深刻印象是专题设计的首要!

传统产品页面,简洁注重功能和图标等视觉设计。

专题页面突出视觉效果,华丽丰富 Continue reading →


11
六 12

自动提示 ie6 访客升级浏览器

我们一起来让讨厌的ie6去死

现在IE10马上就要正式发行了,讨厌的IE6,让我们web开发人员痛不欲生的浏览器,我们从自身做起,给一直坚持用IE6的用户一个最后通牒。

让我们一起大声说:“ie must die.”

English

<!–[if lte IE 6]>
<script src=”http://letskillie6.googlecode.com/svn/trunk/letskillie6.pack.js”></script>
<![endif]–>

简体中文

<!–[if lte IE 6]>
<script src=”http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js”></script>
<![endif]–>

将以上代码添加至贵站的 <head> 标签内即可。

让我们行动起来吧!


03
五 12

访问google、google+等产品不用翻墙

通过添加hosts方式,享受谷歌产品,这样读图会快很多,gmail也能随时打开了,不会出现链接不上情况了,更不用翻墙了!!
windows下修改hosts文件,添加固定的DNS解析

打开系统目录:c:/windows/system32/drivers/etc找到hosts文件,打开hosts文件并在最后面添加以下记录:

#forced Google DNS By:Raygd time:2011,10,09
203.208.46.30 www.google.com
203.208.46.30 picasaweb.google.com
203.208.46.30 lh1.ggpht.com
203.208.46.30 lh2.ggpht.com
203.208.46.30 lh3.ggpht.com
203.208.46.30 lh4.ggpht.com
203.208.46.30 lh5.ggpht.com
203.208.46.30 lh6.ggpht.com
203.208.46.30 lh6.googleusercontent.com
203.208.46.30 lh5.googleusercontent.com
203.208.46.30 lh4.googleusercontent.com
203.208.46.30 lh3.googleusercontent.com
203.208.46.30 lh2.googleusercontent.com
203.208.46.30 lh1.googleusercontent.com
203.208.46.30 images1-focus-opensocial.googleusercontent.com
203.208.46.30 images2-focus-opensocial.googleusercontent.com
203.208.46.30 images3-focus-opensocial.googleusercontent.com
203.208.46.30 images4-focus-opensocial.googleusercontent.com
203.208.46.30 images5-focus-opensocial.googleusercontent.com
203.208.46.30 images6-focus-opensocial.googleusercontent.com
203.208.46.30 s6.googleusercontent.com
203.208.46.30 s5.googleusercontent.com
203.208.46.30 s4.googleusercontent.com
203.208.46.30 s3.googleusercontent.com
203.208.46.30 s2.googleusercontent.com
203.208.46.30 s1.googleusercontent.com
203.208.46.30 plus.google.com
203.208.46.30 talkgadget.google.com
203.208.46.30 ditu.google.com
203.208.46.30 maps-api-ssl.google.com
203.208.46.30 mail.google.com
203.208.46.30 docs.google.com
203.208.46.30 pop.gmail.com
203.208.46.30 scholar.l.google.com
203.208.46.30 news.google.com
203.208.46.30 video.google.com
203.208.46.29 translate.google.com
203.208.46.30 profiles.google.com
203.208.46.29—-203.208.46.91

Continue reading →


12
四 12

jQuery图片弹出插件popImage

此插件的特点:

  1. 灰常小巧,未压缩2.2KB,mini压缩之后1.7KB
  2. 功能简单,但是比较漂亮~嘿嘿~
  3. 即将要弹出的大图都会被插件预加载到页面中,以作弹出时候的准备
  4. 使用简单,配置参数很少
    配置参数1:tagName=>这个表示图片地址是取自DOM元素的什么属性,默认的是“href”,
    配置参数2:timeOut=>这个表示,弹出图片所用的时间。

就这么点特点~~哈哈~~大家赏脸的话,可以到下面的链接去瞅瞅DEMO演示,嘿嘿~~如果觉得效果还不错~~也可以打包拿走。


29
三 12

jquery绑定回车键发送(登录)

按回车键就可以出发发送按钮,这个在一般登录页面比较常用。

代码如下:

$(document).keydown(function(e){
if(e.keyCode == 13) {
$('#login').submit();
}
});

$(document)意思是说,获取整个网页文档对象(类似的于window.document),
$(document).ready意思就是说,获取文档对象就绪的时候。
上面这段代码的意思是检查文档对象直到它能够允许被操作。
(这样做比window.onload()函数要快的多,因为只要文档对象载入完成就能够执行代码了,而不需要等待页面中的图片下载是否已经完成)


12
一 12

css3文字颜色渐变、动画特效效果

css3颜色渐变动画特效效果演示:

72色 72COLOR.COM

CSS3颜色渐变的文字特效,利用css3的animation属性还能做出动感十足的特效。上面的效果大家看到了把,那就是用下面的css3代码实现的,很简单的几行代码就能实现文字颜色渐变和动态效果,以前不是flash就是要用javascript脚本语言。

<code>
<style type=”text/css”>
p.color_shine
{
font-size: 3em;
margin: 0 auto;
padding:20px 0;
}

.color_shine
{
background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
-webkit-background-size: 125px;

color: rgba(255, 255, 255, 0.1);
-webkit-background-clip: text;

-webkit-animation-name: color_shine;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes color_shine
{
0%
{
background-position: top left;
}
100%
{
background: top right;
}
}
</style>
<!– HTML –>
<p class=”color_shine”>交互设计中心-72色 72COLOR.COM</p>
</code>


10
一 12

jQuery切割图片插件生成缩略图

jQuery切割图片插件生成缩略图

堪比流行flash切割头像的插件一样方便一样酷,自由选择图片任意部分任意大小。

jQuery切割图片插件生成缩略图

还可以得到及时反馈所需要的鼠标滑动时的信息,同样可以生成缩略图

插件的使用起来特别方便,具体使用法请看传送门:

插件演示

下载地址


15
十二 11

用css3做漂亮的水晶按钮

css3制作水晶按钮

以前还用Photoshop制作透明水晶按钮的时候都要跟着网上教程学,就是现在用photoshop做水晶按钮也不是很简单就能做出很漂亮的按钮,现在有了css3,只要几行css代码就可以了,想怎么调试就怎么调试,想要什么颜色就要什么颜色,赶紧试试吧!

HTML结构:

<div class="button aqua">
  <div class="glare"></div>
  Button Label
</div>

css 代码:


.button{
width: 120px;
height: 24px;
padding: 5px 16px 3px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border: 2px solid #ccc;
position: relative;

/* Label */
font-family: Lucida Sans, Helvetica, sans-serif;
font-weight: 800;
color: #fff;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.aqua{
background-color: rgba(60, 132, 198, 0.8);
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* FF 3.5+ */
}
.button .glare {
position: absolute;
top: 0;
left: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
height: 1px;
width: 142px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}

预览地址:http://girliemac.com/sandbox/button.html
原文地址:http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/


01
十二 11

2011年12月Godaddy优惠码域名1美元

2011年12月Godaddy域名活动,1美元。

每个用户好像只能买一个域名,貌似还限定了一个信用卡。(本次活动只能用信用卡付款)

SPECIAL OFFER! $1.00 DOMAIN NAME! Register any available .COM, .US, .MOBI, .BIZ, .NET, .ORG, .CA, .CO.UK and .IN domain for just $1.00!*
优惠码:getfit
10000个或者1月31日前
注册地址:godaddy.com

Godaddy域名注册优惠码

优惠码: cjc695dom   cjc749dom    cjc749chp
cjc749IDC
说明: $7.49 .COM 注册
有效期: N/A

优惠码: cjc749b004
注册com域名 $7.49美元

优惠码: cjcPRIVATE
说明: 域名隐私保护
有效期: 2011年12月

优惠码: cjctld749 
说明: $7.49 .NET 注册
有效期: N/A

优惠码: cjctld749 
说明: $7.49 .ORG 注册
有效期: N/A

优惠码: cjcUS349 
说明: $3.49 .US 注册
有效期: N/A