IxEdit-简化Web交互开发的JavaScript库

IxEdit是一个为简化Web交互开发而设计的一个js库,基于jQuery&UI库,用它可以快速敏捷的实现很多时下比较主流的交互效果,操作简便。

在使用它之前确认你的浏览器已经安装Google Gear,或者使用了Google Chrome作为默认浏览器。IxEdit目前放出的是beta版,使用上基本问题不大,生成的代码足够简洁,同时你还可以自行对代码进行优化。

想了解更多详细信息:

1.官方的用户手册 UserGuide(英文):

2.阿一前辈的视频教程(推荐)。

WP页面加入自定义侧边栏

        在前面一篇文章中简要介绍了如何创建wordpress自定义页面,在此,介绍一下在自定义页面中加入个性化的侧边栏(sidebar.php),顶部(header.php)及底部(footer.php)。关于如何创建自定义页面,可参考此文:自定义WordPress的页面模板
下面以侧边栏为例:

我们知道在page.php(页面模板),single.php(文章模板),调用头部侧边底部的方法分别是:get_header(),get_sidebar(),get_footer(),在get_sidebar()方法中,有一段代码:

function get_sidebar( $name = null ) {
do_action( ‘get_sidebar’, $name );
$templates = array();
if ( isset($name) )
$templates[] = “sidebar-{$name}.php”;
$templates[] = “sidebar.php”;

……

所以,我们只需要建一个以sidebar.php为母版的个性化sidebar-{YourName}.php文件,在页面模板的调用中将默认get_sidebar()修改为get_sidebar(“YourName”)即可。

同理你也可以按此方法,自定义自己的header.php,footer.php 。
本站的一个搜索页面示例:点击浏览.

简单色调处理

ps-color2

 

简单的照片色调处理,平时可以用上…

  1. 打开你要更改的照片;
  2. 创建一个调整图层(菜单栏)→黑白(CS3中或是“White&Black”),在色调选项中打勾,使用默认设置,也可按喜好更改;
  3. 图像→应用图像,都使用默认设置即可;
  4. 盖印图层(ctrl+shift+alt+e);
  5. 再次创建调整图层→曲线,提高亮度,加深暗部,要是觉得的原图对比够的话可以不加;
  6. 滤镜→扭曲→镜头校正→加暗角(可以不加此步骤);
  7. 再次盖印图层;
  8. 选择滤镜→锐化→USM锐化。

通过JS在IE中使用HTML5元素

通过JS 创建此对于IE未知的HTML5元素,再在CSS定义样式属性:

document.createElement(newElementName)

具体实现:

<html>
<head>
<style>blah { color: red; }</style>

<script>document.createElement("blah")</script>
</head>
<body>
<blah>Hello!</blah>
</body>
</html>

更多详细请参考:《HTML5 Shiv》

批量引入新元素[怿飞]

(function(){
    // from: http://dean.edwards.name/weblog/2007/03/sniff/
    if(!/*@cc_on!@*/0) return;

    var html5= “abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,

figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video”.split(‘,’);
    for(var i = 0, len = html5.length; i < len; i++ )
        document.createElement(html5[i]);
    }
})();

很简单,很省事~

IE版本判断方法的总结

    做页面设计时,由于IE版本的不同,经常会遇到兼容性问题,有时确实很头疼,在这次专题中用到了HTML注释,顺便汇总一下判断IE版本的一些方法。

一,HTML注释

    <!–[if XXX]>
这里是正常的html代码
<![endif]–>
这里XXX是一些特定的东东,在此列表几个出来,详细介绍各自的含义:
<!–[if IE]> / 如果浏览器是IE /
<!–[if IE 5]> / 如果浏览器是IE 5 的版本 /
<!–[if IE 6]> / 如果浏览器是IE 6 的版本 /
<!–[if IE 7]> / 如果浏览器是IE 7 的版本 /

几个逻辑判断参数:

lte,lt,gte,gt,!
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :自然不用说了

示例:

<!– 默认先调用A.css样式表 –>
<link rel=”stylesheet” type=”text/css” href=”A.css” />
<!–[if !IE]>
<!– 非IE下调用B.css样式表 –>
<link rel=”stylesheet” type=”text/css” href=”B.css” />
<![endif]–>
<!–[if lt IE 6]>
<!– 如果IE浏览器版本小于6,调用C.css样式表 –>
<link rel=”stylesheet” type=”text/css” href=”C.css” />
<![endif]–>

另外,需要额外注意的是,条件注释是在IE5.0以后才被支持的。
二,利用JS判断

1.跳转

<script language=”javascript”>
function getIE(){
if(navigator.appName == “Microsoft Internet Explorer”)
{
if(navigator.appVersion.match(/7./i)==’7.’)
{
//是IE7,不跳转
}else{
//不是,跳转
location.href=’http://www.anymoore.com‘;
}
}
}
</script>

<input type=”button” name=”getIEver” value=”getIEver” onclick=”getIE();” />

2.HTML内嵌

<span id=”cssIE”></span>
<script>
if(navigator.userAgent.indexOf(“MSIE”)>0){ //是否是IE浏览器
if(navigator.userAgent.indexOf(“MSIE 6.0″)>0){ //6.0 使用A.CSS
cssIE.innerHTML='<link href=”A.css” rel=”stylesheet” type=”text/css” >’
}
if(navigator.userAgent.indexOf(“MSIE 7.0″)>0){//7.0 使用B.CSS
cssIE.innerHTML='<link href=”B.css” rel=”stylesheet” type=”text/css” >’
}
}else{//否则使用C.CSS 还有具体的浏览器 你可以用navigator.userAgent 去获取信息 具体使用 看你自己
cssIE.innerHTML='<link href=”C.css” rel=”stylesheet” type=”text/css” >’
}
</script>

就到这,希望能帮上你。

一块狗皮

   闲暇之作,难登大雅,自娱自乐罢了.

             TAGS: 简约主义,simple is power,

              主题色:天蓝,故取名Azure.

snap2

snap3

 

            皮肤只支持横排同窗口显示,英文字体用的Verdana,中文用的微软雅黑,对”简约,天蓝,横排同窗”有兴趣的,可以下载试试.

            这里是下载地址.(请确保你安装了雅黑Verdana字体)

使用多个JS框架时产生冲突解决方法

  在做某个专题的时候,用到了mootool和jQuery两个时下流行的框架,mootool实现highslide效果,jQuery用来生成facebook Wall的Ajax效果,结果无论怎么调整,鱼和熊掌都没法兼得,只能择其一,我心不甘,查!

   试了不少方法,不管用,像这个:

<script type=”text/javascript”>
      jQuery.noConflict();
</script>

下面是最后采用的,通过测试完美解决.

<script src=”http://jquery.com/src/latest/”></script>

<script type=”text/javascript”>

JQ = $;  //rename $ function

</script>

<script src=”mootool.js”></script>

       即将$重命名为JQ,注意后面使用”$”都需要替换为”JQ”,同时注意调用顺序,先jQuery在mootool.

       同时这个方法还可以解决jQuery与prototype等框架的冲突问题.

分享一下某设计高人的40点想法

做纯粹的分享吧,不多说了,整得跟观后感似的.

做一个总结,把自己这些年的从业经历和观感罗列一下,某些话可能触及到个人神经,但它们没有恶意。
设计师喜欢把世界想象得很美好,社会很和谐,但是这些都只是愿望,真实情况是,设计师在个人成长和职业发展中总会遇到很多客观问题,而面对问题的时候,个人的IQ和EQ就变得很重要。

和大家共享交流一些我的看法,有助于以更平和的心态继续提高自己。

关于公司:

1. 好的公司只有那几个,剩下的大多数都是不怎么样的,但好在有一些不错的人让你支持下去;
  2. 在中国当今社会中,你能够从公司的设计团队中找到真正的朋友;
  3. 公司的性质取决于客户的性质,客户的性质取决于市场的需求,因此设计师必须先了解市场的需求;
  4. 公司中别有用心的人很多,当有人质疑你能力的时候,你也应该有能力让他闭嘴;
  5. 千里马不应该待在骡子群当中,选择最适合施展你能力的平台,而不是薪水最高的那个;
  6. 千万不要相信猎头会给你介绍最好的工作,好和不好只有自己试过才知道;
  7. 在别人的公司做出业绩,在自己的领域做出成就;
  8. 公司里面有“人手”,“人才”,“人精”,“人渣”,站哪个队你可以自己选,只要能承担后果就行;
  9. 优秀领导关注发展和利润,合格领导关注业绩和制度,无知领导关注马屁和权利,酌情处理;
  10. 你的设计很棒,对于公司看来就是个美工,但是公司会虚伪的称呼你为“设计师”,“工程师”,“艺术家”。我们的期望是这个情况正在改变中,但是没有看到改变的成果。

关于个人:

1. 你是设计师,不是战斗机,需要亲和力;
  2. 先立才能后破,在说别人的作品和观点不好的时候,先反省自己,多想一步;
  3. 谁都是从零开始,遇到虚心求教的朋友能帮就帮,没有时间也说明一下,就算你真牛B也要尊重人;
  4. 不要把个人情绪带入任何场合,那样很幼稚;
  5. 设计师是做设计给人用,不是做给自己看,或者让朋友称赞;
  6. 先做好设计,再谈策划,再谈综合能力,不要搞反了;
  7. 做设计的不必显得高人一等,都是社会工种罢了;
  8. 不要趟在以前的成绩上沾沾自喜,要不断学习和进步,要谦虚,因为硬盘是会坏的,网络是会断的,作品也是会被抄袭的,只有你的思想和能力别人拿不走;
  9. 眼高手低主要是由于见识太少,声名显赫主要是由于厚积薄发,设计师切忌浮躁;
  10. 就算没有设计师,社会一样会照常运转,因此你要体现出你的价值,而不是一味索取。

关于生活:

1. 无论如何,亲人和朋友是最重要的;不要因为赶项目而忽略了他(她)们;
  2. 如果你觉得自己没有创意了,你可以先养条狗;
  3. 周末最好不要设计,去你认为值得去的地方放松一下;
  4. 身体健康是最重要的;
  5. 如果你发现离开电脑什么都不会做了,那你就不是一个好的设计师;
  6. 无论你是否认同,比设计更重要的是赚钱;
  7. 用心爱你的女(男)朋友,她(他)会给你很多意外的灵感,还有关心;
  8. 生活中最重要的是信任和沟通,设计中也一样;
  9. 设计师不应该只知道和艺术有关的东西;
  10. 设计师喜欢完美,喜欢挑刺,喜欢对比,请别在生活中这样。

关于行业:

1. 中国的设计领域,没有真正的行业,但是有圈子,而且这个圈子很小;
  2. 进入圈子也有可能会被隔离出来,全在于你的心态和作为;
  3. 设计行业一样有潜规则,别理解错了,不是娱乐圈的那种;
  4. 认识行业中的领军人物,学习他们的处事方式和沟通技巧,设计要靠自己,但是成长要靠提拔;
  5. 如果有一天你退步了,你会发现被行业甩得很远;
  6. 在行业中建立你的口碑,这需要靠人格,设计作品只是一个认识你的渠道而已;
  7. 如果你积极的参与行业的建设,行业会给你回报的,但是公司不一定;
  8. 努力认识更多优秀的人,同时让他们也知道你的优秀,英雄才会识英雄;
  9. 但是两个英雄在一起要处理好利益分配,处理好友谊关系,一群英雄在一起更是必须;
  10. 你如果觉得行业对你没有帮助,同时也说明了你对行业没有作用。

文章摘自Google Axure社区,不知看到这的你有没啥收获呢?