有趣的透视屏幕图~

今天在看smashingMagazine的时候看到一篇十分有趣的文章Beautiful Examples of Transparent Screen Trick Photos,大致内容是这样的:

“我们找到了一些独特的而且有创意的东西来提升你的精神和挑战你的创造力,一旦将这些显眼的,有吸引力的幻想应用到电脑屏幕上,结果会变得十分有趣和幻觉一般…那么就拍一张”透明的”显示器图片吧.这个创意十分简单:你拍一张周围环境的图片,将它处理一下后设置为显示器桌面壁纸,当你的角度恰好的时候,你将发现神奇一般的效果,显示器好像是透视了一样,既然如此简单我们又能通过它做点什么神奇的事情呢?”

接下来我将展示几张它们做的十分神奇的图片

很显然其中有一张比较粗糙的图是我做的,HOHO,,,纯属娱乐了,,,觉得还是很有意思的,嗯嗯,有兴趣的朋友也可以试一下更加奇妙的效果,,,睡觉咯~

部分内容转载自:http://www.smashingmagazine.com/2010/08/07/beautiful-examples-of-transparent-screen-trick-photos/

WordPress 3.1 Beta 1 发布

前天,wordpress官方网站新闻更新了说wp 3.1beta1版本发布了,比较激动,去看了看,,,以下是我简单的原文翻译:

又到了一个开发周期的发布时刻了,此时所有基本功能已经完成,也消除了很多BUG.请喜欢追新的朋友尝试一下这个新版本吧!当然,现在这个版本还在开发阶段,我们不建议你将它作为目前正在使用的网站上,最好是仅仅用来测试,当然如果你发现了问题,及时通知我们,当然如果有可能的话,未尝不可帮我们解决这个问题,我们将很高兴!

如果一切都很顺利的话,wordpress 3.1将于年底发布,当然实际情况将取决于这个测试版的测试结果了,你帮我们查到的问题越快越多,我们也将更快的推出稳定的版本.

如果你想成为测试人员,你需要了解有关报告错误的知识(<<如何提交错误(原文:how to report bugs)>>)一下将介绍这次更新带来的变化:

  1. 发布文章的格式(详见:#14746)
  2. 主题搜索 (详见:#14936)
  3. 内部链接 (详见:#11420)
  4. 管理工具条(详见:#14772)
  5. 交互式管理(详见:#14579)
  6. 更新TinyMCE(即编辑器,详见:#12574)
  7. 多分类查询(详见:#12891)
  8. 自定义文章索引页(详见:#13818)
  9. CSS清除管理(详见:#14770)
  10. 用户管理(详见:#14696)
  11. 网络管理(详见:#14435)
  12. 更新密码重置方式(Password Reset Redux,详见:#5919)

当然,还有一些待验证的问题,还没有完全的完成,在这个测试版中没有提到.它会将在3.1普及使用之前解决的….(后面一大串,我就不详述了,大致的更新内容简单介绍到这里,也希望,WP能更好的完善部分功能,其实我还是比较期待内置编辑器的变化~)

时间不早了,睡觉了~

测试版本下载地址:Download WordPress 3.1 Beta 1

原文来自:http://wordpress.org/news/2010/11/wordpress-3-1-beta-1/

js修改标签内内容(下)

经过彻夜和一上午的研究,现在总算是把最终效果弄出来了,我先上代码,老鸟不要笑话(这么简单的东西琢磨半天…),没办法,没有系统学习过这个玩意,很多东西都出问题.代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输入框焦点样式变化测试</title>
<!--文本框样式可以忽略,不过为了增加特效的观赏性,我简单的加上了.-->
<style>
input {border:1px solid #eee;height:20px;width:100px;line-height:20px;}
</style>
<script type="text/javascript">
window.onload = iSC; //加载iSC()函数
function iSC() {
inputs=document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++) {
inputs[i].onmouseup = function(){this.style.backgroundColor='#fffab5';}
inputs[i].onblur = function(){this.style.backgroundColor='#fff';}
}
}
</script>
</head>
<body>
<form>
  <input type="text" />
  <input type="text" />
  <input type="text" />
</form>
</body>
</html>

当然这只是一个简单的示例,效果也很简单.那段JS也不难理解,这里并没有用到之前所想的用setAttribute()来解决,而后来的多次测试,不知道是不是我代码不对还是其他原因,通过这个方法无法达到目的.总之,通过这个简单的东西我总结出了几个需要注意的问题:

  1. inputs[i].onmouseup = function(){this.style.backgroundColor=’#fffab5′;}不能通过inputs[i].setAttribute(“onmouseup“,”function(){this.style.backgroundColor=’#fffab5′;“)来实现.
  2. window.onload = iSC;千万不能忘记!否则,你会发现,他根本没有运行这个js.当然你同样可以在测试的时候,写一个按钮,测试这个js是否读取了所有的input标签,方便调试.

关于此次学习的其他方面总结包括,在查找问题的同时,我学到了其他的一些特效,特别分享给大家.

其实,在一些高级的浏览器(我基本是把除了IE6(包括相同核心),其他的都算高级了,IE7那不伦不类,IE8稍有长进~)中,input设置一个伪类,十分简单的就可以实现以上效果:

  • 看这个就知道了(除了IE6不行,我测试过IE8和chrome都是没有问题的,我想其他的比如FF,OPERA应该也没有问题吧)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>最简单的输入框变化方法</title>
    <style>
    input:focus {background-color:#FF9;}
    </style>
    </head>
    <body>
    <input type="text" />
    <input type="text" />
    <input type="text" />
    </body>
    </html>
    
  • 另外还有许多其他的效果,比如跟这个类似的,并非样式变化,而是当光标焦点处于输入框时,输入框默认value改变,比如,默认value=”请在此处输入用户名”,当焦点在此时,value=””等待用户输入,,等等效果,这里不一一列举,为了方便大家学习,我顺便将其打包,部分代码摘自互联网,版权的话,我也找不到了,反正大家学习嘛,我想这小东西不会还说我侵权吧…z当然以上我自己总结的东西,大家尽管拿去,有什么疑问也可以发邮箱与我联系交流.
  • 其他部分特效源码打包下载(skydrive网盘地址下载)(除了我这两种之外的源码在内,还有其他三种比较简单的效果)
  • 百度可参考的资料,其实后来我发现,这个不就是我那个差不多的嘛,汗我研究这么久,http://baike.baidu.com/view/1710146.htm

js修改标签内内容(上)

最近几天做页面,跟表单设计制作打交道很多,很多页面的表单格式都很简单,其中,在设计初期,有些效果未添加,而后期需要增加这些效果,于是面对大量的input标签,修改起来也出现了困难,具体情况待我细说.

比如原始的代码大部分格式是这样的:

<html>
<head>
</head>
<body>
<form>
<input type="text" />
</form>
</body>
</html>

而,后来有需求说,需要添加一个效果,当光标进入输入框时,会出现比如输入框边框颜色变化,输入框背景颜色变化的效果,当然,如果这仅仅是修改其中这一个输入框的效果,那么方法很多,其中最简单的方法可能可以这样写:

<html>
<head>
</head>
<body>
<form>
<input type="text" onBlur="this.style.backgroundColor='#ffffff'" onMouseUp="this.style.backgroundColor='#fffab5'" />
</form>
</body>
</html>

是的,大概就是这样,但是如果有很多页面,有很多input标签,难道一个个这样加,虽然我不是很会js,但是我感觉应该可以直接修改input标签内的内容,更多的是通过获取某个ID,并通过setAttribute()修改某个属性的值,然后事实并不是这样的.也不知道是不是我代码写错了,还是什么的,无论是用setAttribute(属性,值)还是setAttribute(属性,函数),效果都无法实现,当然,这里是为了测试才使用ID的,既然无法实现,则采取另外一个思路,直接通过getElementsByTagName()方法,对于这个方法,可以方便的修改所有input标签的属性,即getElementsByTagName(“input”),当然,首先是需要遍历当前页面的所有input标签,然后一个个进行修改,之前,我试了很多次,可能是由于代码规范问题,因为我还没有系统的学习js,或者可能是种种原因,弄了一晚上没弄好,最后还Anfy同学的帮助下,解决了这个问题,由于时间关系,今天暂时写这些,明天把这个简单的小例子写出来,分析,同时也是为了方便以后查阅,举一反三!

^_^ 卷卷的头发 *_* —自恋

上个星期六,汤,前来与我一同去湖工报名考试,下午一起提前庆祝了下生日,顺便把德也喊了来,,,吃完饭…寂寞的德,说要去武大走走散心,于是两个男人就去了武大…

看来上上个星期六和德去菊花展赏花,他没有达到理想的效果,这最近他也是情绪万千啊~

步入正题…武大武大,大学里面总是给人感觉充满朝气,温馨,外加少许怀念的感受.秋天的感觉应该是容易勾起种种思绪,更是带有那种淡淡的伤感…不知道为啥,可能是在城市,收获季节的象征,我觉得一点都感觉不到.走在大学里的路上,回想自己那几年大学,不知该如何评价是好,如果上天再给我一次读大学的机会,我一定好好珍惜(嘿嘿,提前给自己压力~)…

我这个喜欢东拍拍西拍拍的人,自然少不了带上相机,话说我要是没带,不知道德会不会不肯出来玩,是的,他也是自恋的吧…天蝎都自恋么,,,唔唔唔…其实秋天的武大还是有不少好地方观赏或是留恋的,就说那路边的一排树,朝着路边向外的方向长着,很有感觉,黄中带红,红中带黄,明中有暗,暗中有明,那天光线也不错,层次感体现的淋漓尽致,可惜我技术有限,总拍不出满意的图片.话说人像倒是拍了不少,有明显主题内容的东西拍起来当然容易多了,找到一个草地,这是个好地方,想了想,来张合影,来张自拍都是不错的选择,当然既然如此少不了自拍,怎么说也是武大留念,稍后上自拍图,呵呵.

话说,有人庆幸我老了一岁,话说男人越老越值钱…应该是这样的吧.哇咔咔…刚刚整理照片的时候看到之前的短发,想到现在头上的长发,颇有一番风味,不知道究竟是短发好看呢还是长发好看^_*…

夏日短发的我
夏日短发的我

这张拍摄于2010年8月初,拍摄人汤,很显然我也在拍他~其实短发很精神啊.

武大自拍
武大自拍

这张显然异见,前几天武大的自拍,,,卷发要睁大眼睛的看,HOHO…

好了,自恋完毕,头发继续留着,看看过阵子能不能出什么新玩意~

对了,最后说一句,限于这个空间大小问题,我才开的flickr就是我以后存照片的地方了,有空可以看看,谢谢~
我的flickr相册

生日快乐

嘿~今天是我生日咯咯咯~话说我这个生日持续时间很长的啊,从13号就开始过了,过到今天,这几天烦心的事情是有的,因为这是持续不断的,但是几件小事让我现在至少心情很好…

首先,感谢父母等人的关心和祝福.另外也感谢前天同学前来,还有你的母亲,你们实在是太客气了,我真不知道我已经欠了你们多少人情了.

再次,感谢我的同学们,赵鑫,芋头,还有…不知道有没有遗漏的,要是有的话,你告诉我一下,我下次请你们吃饭的啦~

话说,我的博客也算是今天正式开放,之前几个月也是马马虎虎,没怎么用心管理.前阵子,在小熊的激励下,我决定趁着今天生日,就正式公布开了,不管这个博客能如何走下去,总之我还是会用心打理的,也希望大家多多支持…

由于匆匆忙忙开放,所以,主题什么的,用的也是别人的,前阵子说好好学习PHP和WORDPRESS,也是搞了下没搞了,这下子又忘光了…匆匆弄LOGO,画了N多手稿,也在PS做了N多,但是总是不满意,没有感觉啊,,,欣赏了大量了好作品,却总觉得人家做的简介又美,而我的…看来我的绘制能力差的不行,这虽说审美观还不算差,但是估计也就只能用用人家的素材啥的了…

这就是我的LOGO,没办法,暂时抽象化的

whidy logo 小图
whidy logo 小图

另外一个原始的,就是这个了…

whidy logo大图
whidy logo大图

好了,今天就这么多了,纪念完成,早点睡觉,这几天睡眠还是不好哟,,,今天凌晨还写了个小诗,,,

夜雨风吹门作声,梦醒思绪万千层;
闭目静把周公待,辗转无眠闹心头。

大家也早点休息,晚安~

最后,谢谢朋友们!

正则表达式学习总结(表单验证)

前一阵子,每天忙着做公司的电子商务网站的前台,对我来说也是一个很大的挑战,由于某些原因程序员离职,最后公司找了一个兼职程序员,这可苦了我~一向做前台只管设计图纸和HTML的我需要自己弄js了,也怪我不争气,早就说了把js掌握,可是到现在都没搞好,还是个看得懂却写不出的水平.

这次电子商务网站首先从用户注册开始写起,之前做过博客制作项目,不过当时是公司程序员做了很多js,那时我也就万事大吉了~现在看到注册页面,首先表单不熟悉的我就是悲剧,这个要动态验证用户注册时填写的是否正确可是让我忙碌了许多天,也头疼了许多天,当然在此先感谢前几天热心帮助我的大师丁同志.于是乎,今天也是闲着,细致了看了关于正则表达式的基本用法,受益匪浅,学习过程中像小熊同志(最近研究PHP)问了下,也给我带来了不少帮助,不过他说PHP的正则表达式跟这个我看的js有区别,这下我又晕了,不管,总之大同小异. 其实本来表单验证的正则表达式网上是有很多的,但是不够灵活,不具复制性,下面,我将以我自己学习的结果举几个例子.

  1. 验证手机号码(大陆): 我是这样写的: ^(\(\+86\)?)|(\+86)?(13[0-9]|15[0|3|6|7|8|9]|18[8|9])\d{8}$ 首先在input内的文本输入框有个默认的value=”(+86)”或者没有都不影响最终验证,并且,它能够验证当前国内的手机号码是否符合,当然同样国际手机号码的格式可以这样写 \+/d{2,4}/d{8,11} 这里需要说明的是,它分为两个部分,第一部分\+/d{2,4}为国家区号长度为最小长度2,最大长度4,后面同理号码最小长度6,最大长度11.
  2. 验证网站地址: 网上大多比较简陋,比如: [a-zA-z]+://[^/s]* ,这个明显存在很大问题,如果用户输入 what://baidu 他是可以通过验证的,有谁见过这样的网址?当然准确的说,http://可写可不写,因为ftp://和https://一般不是默认域名.我则是这样处理的,input文本输入框默认值value=”http://”,而表达式是我是这样写的: ^(http\:\/\/)?([a-zA-Z]{0,63}\.)?[-a-zA-Z0-9]{0,63}\.[a-zA-Z]{2,3}$ 这个对于whidy.net,www.whidy.net,http://whidy.net,http://www.whidy.net都是OK的,对于网站域名最大长度保守的来说我就设定为最大63,我想没有谁会申请这么长的域名了: ),,,而对于网址的结尾,则做了最小长度为2,最大长度为3的限制,域名一般没有长度为1或者大于3的.那么这样相对来说就很严格,用户哪里有输入错误,可以方便的检测出来~

看了这两个例子之后,大家可以尝试在其他表单验证,根据自己需求来写.对于正则表达式的熟练使用还是相当重要的! 最后,我分享几个有关资源,大家可以用来学习测试(一下资源均来自互联网,仅供学习参考使用,不可用于商业用途.嘻嘻~)

  1. 正则表达式系统教程
  2. 正则表达式验证小工具:RegexTester.exe 简要说明:在Regex输入框内输入规则后,在Resource内输入你要验证的内容,最后按F5,查看Matches框内的验证结果~示例如图:

    Regex Tester
    Regex Tester
  3. 一个别人写的,不错,当然看到后面也比较费力,大家有兴趣也可以看看 http://deerchao.net/tutorials/regex/regex.htm

大冢爱<<星象仪>>中文版

前天同学发来一段大冢爱的演唱会视频,看了十分感动,他发给我的是ACFUN上面的视频,当然是字幕满屏,于是又找了一些稍好一点的版本,可惜,演唱会版只找到优酷等视频网站上的,找不到高清和无水印版.而大肆搜寻好不容易在电驴和其他网站上找到相关资源,无奈没有源了,下载速度超慢…只好慢慢等待.

该视频是收录自[LOVE.IS.BORN.~5nd.Anniversary.2008~.Disc2],稍后我会将我目前收集的相关资源共享上来,当然速度的话,可能有些悲剧,除非你跟我一样有耐心哈哈~

看视频时,她那专注的神情和演唱的感觉实在是太有感染力了…总之,她弹琴的样子,歌声以及超喜爱歌词吸引了我…先上歌词:

夕阳的背后 月儿探出头 舍不得踏上 归途的孩童
遥远的天空 这片宇宙的尽头 是否会有你静静在等候
夏天的最后 只属於你我的 公园那角落
仰望著星空 许下了个承诺 是否还记得作证的 是哪一个星座
会えなくても 记忆をたどって 同じ幸せを见たいんだ
あの香りとともに 花火がぱっと开く
想到你左右 想到你身边停留 无法控制现在就想要见你的冲动
黑暗中摸索 看不见也不寂寞 为了你我会勇敢走
满天的星斗 闪烁地耀眼依旧 不变的星空 永远在这里陪我
眼泪不会流 因为那片和你看的 美丽夜空还在我的心头
路的那一头 响起的脚步 彷佛还在耳中 是幻觉是梦
我看著自己 越拉越长的影子轮廓 不禁又难过
ちっとも 変わらないはずなのに せつない気持ちふくらんでく
どんなに想ったって 君は もういない
想到你左右 想在你身边停留 不管你眼里的是多麼渺小的我
没有人能够 爱你比我还要多 因为你 我勇敢活
当流星划过 黑夜的尽头 偷偷的许了个愿望藏进胸口
眼泪不会流 真心的祈求 美丽的星空会懂
会えなくても 记忆をたどって 同じ幸せを见たいんだ
あの香りとともに 花火がぱっと开く
想到你左右 想到你身边停留 紧紧的握住 我这双小小的手
眼泪不停流 没理由只能说 都是星光太美丽的错
当流星划过 黑夜的尽头 偷偷的许了个愿望藏进胸口
眼泪不停流 只能把所有想念留在这片星空里…

优酷版本的下载地址:进入我的skydrive下载~

演唱会全套
电驴资源下载:点击下载
种子下载:
国内全套资源种子点击下载(速度还行)
国外资源原版Disc1种子点击下载(速度悲剧)
国外资源原版Disc2种子点击下载(速度悲剧)

希望大家会喜欢.

摄影小知识(1)

光的传播特性质 对焦模式 偏振光

题记:摄影的小知识很多,有大量的名词,平时看起来并不重要,但直接影响着摄影技术。

光的传播特性:

  • 光在均匀的介质中以直线方式传播(均匀指的是什么?)
  • 不同位置的光线通过细小孔径和 狭小缝隙时,靠近边缘的光线不按 直线传播,而是绕过了物体边缘障碍直线传播,产生明暗交替的光 斑,这种现象称之为光的衍射。
  • 当在非金属物体表面的反射角为33°时,反光光波振动公限于某一因 定方向,或者某一固定方向比较 强,而其他方向比较弱,我们称之 为平面偏振光。
  • 照度:物体离物体的距离增加一 倍,单位面积所接受的光照量减少为四分之一(如何测量光照?)

一些自动对焦模式

  • 红外线测距聚焦
  • 声纳测距聚焦
  • 对影聚焦
  • 相信检测聚焦
  • 陷阱聚焦
  • 眼控自动聚焦

此内容来自于:《摄影辞典》黑龙江出版社,大家有兴趣的话可以看看。

出汗的苹果

Dreamweaver CS5 新功能学习有感

一早起床,实在想不出来做什么了,于是看了看上次没看完的Adobe Dreamweaver CS5 新特性视频教程,可能我下载的不够完整,教程一共11个视频,每个视频看后都觉得大有惊喜,那么我挑几个我认为很有帮助的简单说一下

  1. 禁用/启用CSS属性:
    这个主要是在
    (点击图片可放大)

    禁用/启用CSS属性
    禁用/启用CSS属性

    这里可以更加方便的将某个标签的CSS属性比如途中是font-size,(点击图中其中任意箭头指向的地方)禁用查看效果,我想这个功能也许会在有时遇到某些莫名其妙的问题中通过排除法更快的解决,功能比较类似chrome里面的”审查元素”将某个CSS属性关闭或开启,总而言之,这个将会在web设计中起到很大的帮助作用,具体用法还需大家多多实践~

  2. 检查:
    当你需要编辑某个标签时,通过该功能可以直观的查看他的CSS属性和该标签在代码中的位置,如图

    检查

    当你鼠标悬浮在元素上时,左侧代码区讲随着你的光标对不同的元素选择而变化,当你单击某个元素时,便是图中的状态,你可以清晰的看出来该元素的CSS特征(例如,未定义PADDING和MARGIN值,这个P标签是由默认的外边距和内边距的),我自己感觉的话这个功能其实跟Firefox和chrome里面的工程模式差不多了.

  3. Adobe BrowserLab:
    当然这个是需要在线测试的,并且需要注册ADOBE帐号才能使用,按理说是可以本地测试的,不过我的DW配置有问题,而且没有添加站点,所以只好在线测试已经上传了的页面,通过这个可以方便的对比出不同浏览器之间的区别,更容易解决兼容性问题,这个功能是我最喜欢的,因为经常要考虑多浏览器兼容的时候,用那个IE TESTER有时候会崩溃,很麻烦,而且电脑安装多个浏览器也不是很方便.如图,这是分成两列的效果

    Adobe BrowserLab 2-up view

    同样的可以用参考线,进行对比,左边是FF 3.6效果,右边则是IE6效果,太方便了,当然还有个更神奇的,见下图

    Adobe BrowserLab

    如果我不说你猜出来是什么了没,就是将两种效果重叠的看,图中间有个滑动块,可以调整两个不同浏览器的效果图的透明度,简直就是Wonderful ; )有兴趣的赶紧尝试下吧~

就先介绍这三个强大的新功能,更多细节还有待发掘 : )