Archive for 七月, 2009

我很忙。

Posted in Develop, Me on 七月 31st, 2009 by corrie – 3 Comments

从最北边到最东边,从程序到架构,从了解到懂得。这两个月来经历了一次次的转折。朋友时常告诉我,不能再像小孩子那样了。妈妈总是担心我,是不是一切都好。我想告诉所有关心我的人,我一切都好,我会依然保持一种良好的心态。我会走出自己的路。

在新公司已经1个多月了,上个月都是实习期,一切感觉良好。想想自己以前工作的环境,真是有点败事有余。当初给出来就是为了technology,为了博学,为了更多的朋友。而一点小小的心慈手软就丢掉了我一年的时间,虽然我也学到了很多不知道的,那对我来说真的没有多大用处,更多的是让我看懂了国内私人企业经营的不规范,和标准流程化作业的怠慢。有人说过“宁可做百年的企业,不要做一时的世界前列”。持久化和利益化的均衡尤为重要。国内一直没有私营大公司的原因也就在于此吧。一个小小的日本,竟然有很多有名的企业,像sony,像丰田。。。国人们不得不考虑跟人家学习经验了,而要取代的就是看不起小日本的一切。你可以充满愤怒,你可以热血中烧。千万不要做落后的人。。。

最近一直在做一个PHP框架,有兴趣的朋友可以从google code上checkout一份出来项目名称“midp”,我是很支持开源的,希望更多的人加入到共同开发的行列,大家互相进步。技术没有止境,同行没有大小。

jquery messager更新到1.5了,很多朋友留言说IE6下面不行,呵呵,我对IE6真是没多大兴趣了。我希望我也成为ie6 blocker,不过下一个版本,我会更新IE6的bug,到了一定时候我会彻底放弃IE6。

jquery areaopt正在酝酿中,我会让它支持数据绑定,但是真的是太忙了。没有太多的时间。

@riku老师合作开发运营的一个项目已经在准备中了,等手头上没什么事情了,就努力开写。@riku老师都已经把设计草图和一些东西都做好了。就差我这边了。。。加油一下。(透漏点消息,本项目block IE6)

@网网老大的项目也在筹备中,就希望我的框架早日完成了,现在还有太多的bug,本来说是要半个月完成了,现在看来。。。要多的多。。前期的规划太重要了。

最近很忙,真的很忙!最后祝我最好的一个哥们aitom获得全国设计三等奖。

  • Facebook
  • Twitter
  • Share/Bookmark

上海日全食在线直播

Posted in Collation on 七月 22nd, 2009 by corrie – 2 Comments

日全食轨迹:google地图

Google IG直播:http://www.google.cn/ig/china?referrer=ign

PPLIVE视频直播:http://ikan.pplive.com/p/c71781/34098/

  • Facebook
  • Twitter
  • Share/Bookmark

Firefox下实现复制文本内容的方法

Posted in Java, Me, UED on 七月 16th, 2009 by corrie – 3 Comments

刚做了一个网址,可以说是put8.com的升级版 http://5url.cn,需要一个复制按钮,用IE的不行,用有些朋友提供的flash版本的也不行,因为我不会写FLASH AS3,所以只能找资源。正好发现了http://bit.ly用的是flash版本的,经过用firebug分析。用闪客精灵反向解析了flash的代码,贴出来一部分供大家学习。

private function copyClick(param1:MouseEvent) : void
{
var e:* = param1;
try
{
this.copyText = ExternalInterface.call(“CopyClipboardButton.getCopyText”, this.copyTextContainerId);
trace(this.copyText);
trace(this.copyTextContainerId);
}// end try
catch (error:Error)
{
this.copyText = “”;
}// end catch
if (this.copyText == “” && this.copyTextOrig != “”)
{
this.copyText = this.copyTextOrig;
}// end if
System.setClipboard(this.copyText);
if (this.imageUrl == null)
{
tf.htmlText = “Copied!“;
}// end if
return;
}// end function

他用ExternalInterface.call方法调用了外部的方法,获得了值然后传回到FLASH执行copy。
就写了CopyClipboardButton.getCopyText方法测试

CopyClipboardButton = {};
CopyClipboardButton.getCopyText = function(){alert(‘text’);}

测试执行JS函数成功,修改函数成返回值的形式,通过Flashvars把调用的元素和图片定义好就OK了

var CopyClipboardButton={};
CopyClipboardButton.getCopyText=function(a){
var b=document.getElementById(a);
try{return(b.value||b.innerText||b.textContent)}catch(c){return”"}
};

<object width=”61″ height=”30″>
<param name=”movie” value=”CopyClipboardButton.swf?v=3.0″/>
<param name=”FlashVars” value=”copyTextContainerId=copyTextValue&fontSize=14&fontFace=Helvetica&fontColor=#555555&imageUrl=./index_copy_button_bento.jpg&copyText=”/>
<param name=”quality” value=”high”/>
<param name=”menu” value=”false”/>
<param name=”wmode” value=”transparent”/>
<embed width=”61″ height=”30″ type=”application/x-shockwave-flash” src=”CopyClipboardButton.swf?v=3.0″ flashvars=”copyTextContainerId=copyTextValue&fontSize=14&fontFace=Helvetica&fontColor=#555555&imageUrl=./index_copy_button_bento.jpg&copyText=” wmode=”transparent”/>
</object>

一个Flash版本的复制按钮就OK了,FLASH AS3跟JS进行交互来实现一些功能的实例其实很多。

  • Facebook
  • Twitter
  • Share/Bookmark

关于谷歌操作系统( Chrome Os)的新闻和讨论

Posted in Collation on 七月 9th, 2009 by corrie – 5 Comments

google操作系统Chrome OS一石激起千层浪,我们谷奥会在近几天集中为大家带来国内外各种讨论和分析,请点击下面的目录观看Chrome OS的相关文章:

互动:

  • Facebook
  • Twitter
  • Share/Bookmark

迈克尔-杰克逊追思会直播

Posted in Collation on 七月 8th, 2009 by corrie – 5 Comments

伟大的舞者迈克尔-杰克逊追思会在香港时间凌晨一点在洛杉矶的斯泰普尔斯中心举行,届时将会过百万他的粉丝到现场去送迈克尔-杰克逊最后一程,小编也是迈克尔-杰克逊的其中一个粉丝,特别酷爱他的太空舞和滑步,遗憾天才英年早逝。在这里祝偶像一路走好。

希望更多的网友可以为偶像送行,特提供高清网址:

rtsp://122.224.104.253:1755/3681a0TybaH5AJJJJJJ6La-6Vna-8a-8JJJa- LRiVRipCp5ML68n6Cc5o6iMn8optcJwSF5DFHHHDogtH0JJa0aoTybaHa0m7m4aH8CVa- 8LJCca-Ja-ba-Ra-8JJJa-Ja0aom7m4aHa094laH8L82862CR2LapiJa- 8L828C28L2ncapiJiJa-iJa0ao94laHa0qKNaHru4r79ap8LJa- GTGqapL8c286R2L6628C8apiJiJa-mIzm4apuIGma- a0aoqKNaHa0fG4uaHSF5DDxa5LLJ8VV88JJnna-LLJ28VV288J2nna0aofG4uaH

直播已经过去了,不知道有没有重播,提供高清图像浏览

http://gb.cri.cn/27824/2009/07/08/782s2556533.htm

  • Facebook
  • Twitter
  • Share/Bookmark

无需翻墙上Twitter!

Posted in Collation on 七月 7th, 2009 by corrie – 5 Comments

使用Twitter 哪需翻墙?(改Hosts版)

HOST文件文件位置(双击后用文本编辑器打开)
C:\windows\system32\drivers\etc\hosts文件中加入以下几行。

128.121.146.228 twitter.com
128.121.146.228 www.twitter.com
128.121.146.101 assets0.twitter.com
128.121.146.101 assets1.twitter.com
128.121.146.101 static.twitter.com
128.121.146.229 assets2.twitter.com
128.121.146.229 assets3.twitter.com
65.74.185.41 twitter.zendesk.com
65.74.185.41 help.twitter.com

好像只有这么多可用的Twitter IP了。

  • Facebook
  • Twitter
  • Share/Bookmark

PHP中Unicode转码和解码的实现

Posted in Collation, PHP on 七月 6th, 2009 by corrie – 1 Comment

在JS中一般将汉字编码成为unicode进行输出,这样可以避免一些中文的问题。PHP中如何处理unicode,这里转一个文章给大家。

UNICODE编码在PHP中使用UCS-2编码,之前还真是没有发现,一直还以为是UTF-8就行了。贴出代码:

//将内容进行UNICODE编码,编码后的内容格式:YOKA\u738b (原始:YOKA王)
function unicode_encode($name)
{

$name = iconv(‘UTF-8′, ‘UCS-2′, $name);
$len = strlen($name);
$str = ”;
for ($i = 0; $i < $len – 1; $i = $i + 2)
{
$c = $name[$i];
$c2 = $name[$i + 1];
if (ord($c) > 0)
{    // 两个字节的文字
$str .= ‘\u’.base_convert(ord($c), 10, 16).base_convert(ord($c2), 10, 16);
}
else
{
$str .= $c2;
}
}
return $str;
}

// 将UNICODE编码后的内容进行解码,编码后的内容格式:YOKA\u738b (原始:YOKA王)
function unicode_decode($name)
{
// 转换编码,将Unicode编码转换成可以浏览的utf-8编码
$pattern = ‘/([\w]+)|(\\\u([\w]{4}))/i’;
preg_match_all($pattern, $name, $matches);
if (!empty($matches))
{
$name = ”;
for ($j = 0; $j < count($matches[0]); $j++)
{
$str = $matches[0][$j];
if (strpos($str, ‘\\u’) === 0)
{
$code = base_convert(substr($str, 2, 2), 16, 10);
$code2 = base_convert(substr($str, 4), 16, 10);
$c = chr($code).chr($code2);
$c = iconv(‘UCS-2′, ‘UTF-8′, $c);
$name .= $c;
}
else
{
$name .= $str;
}
}
}
return $name;
}

测试用例:

echo ‘<h3>YOKA\u738b -> ‘.unicode_decode(‘YOKA\u738b’).’</h3>’;
$name = ‘YOKA王’;
echo ‘<h3>’.unicode_encode($name).’</h3>’;

  • Facebook
  • Twitter
  • Share/Bookmark

推荐:Web 开发与设计师速查手册大全(上)

Posted in Collation, UED on 七月 4th, 2009 by corrie – 1 Comment

Cheat Sheet 一词在中文中并没有很贴切的对译,大概是考试作弊条一类的东西,这要求 Cheat Sheet 必须短小精悍又覆盖广泛,作为 Web 开发与设计师,免不了在工作时查询大量资料,某个 Web 色值,某个 JavaScript 库的核心语法,这类资料如果攒齐了,怕有半间屋子那么多,如果用 Cheet Sheet 也许几十页纸就够了,本文收集了近百份用于 Web 开发与设计的 Cheet Sheet,你会发现他们非常实用。

HTML, XHTML, CSS2

CSS2 Cheat Sheet

不仅是一份完整的 CSS2 速查手册,还让你了解每个属性该怎么用。预览下载 (PDF)

Gosquared CSS help sheets

设计和结构都很整齐,漂亮。下载(PDF)

CHEAT_SHEETS

addedbytes CSS2 Cheat Sheet

该速查手册只有一页纸,包含 CSS 2.1 全部选择器和属性,还包含一个盒子模型示例。下载(PDF | PNG

Core css

将 CSS 的核心知识分成3部分,包含了 CSS 的方方面面。下载 (需免费注册)

core css

core css

CSS Shorthand Cheat Sheet

一些不容易记住的 CSS 元素。下载 (PDF)

CSS2 – Quick Reference Guide – PDF 下载(PDF)

XHTML 1.1 Cheat Sheet

XHTML 1.1 细则中涉及到的所有元素与属性。预览 | 下载

CHEAT_SHEETS

Gosquared html help sheets

设计漂亮,结构精良的 HTML 速查。下载(PDF)

CHEAT_SHEETS

HTML Cheat Sheet

一份 A4 纸大小的单页 HTML 速查表。下载 (PDF | PNG

CHEAT_SHEETS

HTML5 Canvas Cheat Sheet

HTML5 Canvas 对象的速查手册,直接编译自 WHATWG specs 细则,只是更容易阅读一些。下载 (PDF | PNG

CHEAT_SHEETS

HTML Character Entities Cheat Sheet

HTML 字符标识速查。下载 ( PDF | PNG

CHEAT_SHEETS

HTML Character Entities Cheat Sheet

该表包含 HTML 4 字符标识,包括 ISO8859-1 (Latin-1)  中的字符。预览 | 下载CHEAT_SHEETS

HTML Colors Cheat Sheet

该  HTML 颜色表包含 1050 种颜色,按色度区分,每个色度包含25中不同饱和度与亮度。还包含216种 Web 安全色。预览 | 下载(PDF)

CHEAT_SHEETS

RGB Hex Colour Chart

RGB 16进制颜色表。包含216种 Web 安全色。下载 (PNG | PDF

CHEAT_SHEETS

Scripting 速查手册

JavaScript Cheat Sheet

包含 JavaScript 的 的方法与函数,正则表单时,以及 XMLHttpRequest  对象。下载(PNG | PDF

CHEAT_SHEETS

JavaScript DOM Cheatsheet

JavaScript DOM 结构速查手册。下载(PDF)

CHEAT_SHEETS

jQuery 1.3 Cheat Sheet

jQuery 1.3 速查表。预览 | 下载(PDF)

CHEAT_SHEETS

jQuery Cheat Sheet 1.2 jQuery 1.2 速查手册 下载(PDF)

CHEAT_SHEETS

mootools 1.2 cheat sheet

另一个 JavaScript 库 MooTools 1.2 速查手册。下载(PDF)

CHEAT_SHEETS

prototype 1.5.0 JavaScript 库 Prototype 1.5 速查手册。下载 (PDF)

CHEAT_SHEETS

Prototype 1.6.0.2 Cheat Sheet

JavaScript 库 Prototype 1.6.0.2 速查手册。下载(PDF)

CHEAT_SHEETS

Addison-Wesley’s JavaScript Reference Card

JavaScript 参考手册。下载(PDF)

CHEAT_SHEETS

jQuery selectors

对 jQuery 开发者来说,该速查手册不可或缺,详细列举了 jQuery 所有选择器。下载 (徐免费注册)

CHEAT_SHEETS

服务器端编程

PHP Cheat Sheet (V2)

单页 PHP 参考手册,包含日期格式,正则表达式以及常用函数。下载 (PDF | PNG

CHEAT_SHEETS

visibone

该站包含2页基本PHP速查手册,以及8页高级速查手册。非免费。

CHEAT_SHEETS

Php 4 Reference Card PHP4 参考速查手册。下载(PDF)

CHEAT_SHEETS

PHP Cheat Sheet

PHP 比较操作速查手册。下载

CHEAT_SHEETS

Core C# and .NET Quick Reference C# 与 .NET 速查参考手册。下载(PDF)

CHEAT_SHEETS

ASP.net ASP.NET 速查参考手册。下载

CHEAT_SHEETS

MS ASP 古老的 ASP 与 VB Script 速查手册。下载(PNG | PDF

CHEAT_SHEETS

msnet formatting strings 微软 .NET 字符串格式化速查。下载(PDF)

CHEAT_SHEETS

SQL (Structured Query Language) in one page SQL 语言速查。直接访问

CHEAT_SHEETS

MySQL Cheat Sheet MySQL 速查。下载(PNG | PDF

CHEAT_SHEETS

XML (eXtensible Markup Language) in one page XML 单页速查手册。直接访问

CHEAT_SHEETS

XML Syntax Quick Reference XML 语法参考。下载(PDF)

CHEAT_SHEETS

SEO 速查手册

The Web Developer’s SEO Cheat Sheet

出自 SEO MOZ 的 SEO 速查手册,包括重要的 SEO HTML 标签,搜索引擎索引的限制,Title 标签语法建议等。下载(PDF)

CHEAT_SHEETS

本文资料来源:http://www.tripwiremagazine.com/tools/cheat-sheets/front-end-web-developers-toolbox.html
翻译整理:COMSHARP CMS 官方网站

  • Facebook
  • Twitter
  • Share/Bookmark

IE6浏览器不显示PNG图像滤镜的解决方法

Posted in UED on 七月 2nd, 2009 by corrie – 3 Comments

今天美工给了一个宣传页,用了透明的PNG图片和滤镜,也没看直接写到模板后,发现在IE6下无法显示。

代码如下:

.top_txt{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’/reg/top10.png’,sizingMethod=’scale’);}

最终解决办法为,把相对地址换成绝对地址即可,代码如下:

.top_txt{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’http://res.pplive.com/baike/games/zsg/reg/top10.png’,sizingMethod=’scale’);}

  • Facebook
  • Twitter
  • Share/Bookmark

说说豆瓣电台的界面设计[转]

Posted in UED on 七月 1st, 2009 by corrie – 1 Comment

使用豆瓣电台的过程中,我已经三次错将喜欢的歌曲拖进了垃圾箱。原因在于,在听到好歌的激动情绪中,点击了电台上最醒目的 垃圾箱 按钮,我以为那会是收藏。

豆瓣电台本身是主动推送给听众的,因而需要听众交互的地方少,按钮就那么几个。简洁明了的设计在这里是极恰当的,但如果不注意元素(展示元素,操作元素)摆放的位置,简洁的设计一样会带来使用问题。在我看来,豆瓣电台在界面上就存在如下问题:

1 操作元素 布局分散

电台界面上有如下操作元素:a 音量调节 b 关闭电台 c 加心收藏 d 删除曲目 e 跳过曲目

可以看到,即便简单如5个操作元素,也被分布在三个区域了,我觉得(也根据实际使用)这样并不合理。

操作元素少的界面,如非功能特殊,元素们应尽量在一个集中的区域,以免用户操作跨度太大或找不到相应的操作入口。

我的方案是,将这5个操作元素都集中在显示屏下方的区域。(见我的设计图)

现在的豆瓣电台UI

当前的豆瓣电台界面

我修改的豆瓣电台UI

我修改的豆瓣电台界面

2 操作元素 未根据操作行为进行归类与安排

音量调节 与 关闭电台 按钮摆在一起,二者操作模式不同,况且关闭电台是影响很大的操作,二者在一起颇古怪。

动作相似的操作行为,如非功能特殊,应该安排在一起。这里,加心收藏、删除曲目、听下一曲 三者都是“点击”的操作模式,可以并行排在一起。(关闭电台 也是 点击 操作,但功能特殊且少用,不在此列)

根据操作后果的严重性(比如是否能挽回),以及位置的醒目性,再来安排三者的顺序,我给的方案是:从左至右,加心收藏、听下一首、删除曲目。

另外,将 音量 元素与 关闭电台 元素 分开了,音量元素因为其外型长度,将之置于曲目显示屏下方。关闭电台置于右下的角落里。

3 显示元素 主次不适当

豆瓣电台里,显示元素有三块:a 封面 b 时间 c 歌曲名称及演唱者

我们看到,时间 元素是被置于歌曲名称上方的,颜色深,还是粗体,这一行除了它,没有其他元素。又由于这是个动态元素,本就吸引人的注意力,因而,时间元素 在这里非常引人注目。

但这个区域(时间+曲目)里究竟谁是更主要的呢?我认为是曲目。时间元素在这里过分突出,是个干扰。

将主次颠倒了一下,突出曲目名称,时间元素显示在右下角,并且颜色调淡,我觉得这样更相宜。

另外,电台里的专辑封面缩略图比较粗糙,不清晰,这个细节应该改善。

困扰我的问题

关闭电台 元素的摆放,让我头疼半天,怎么摆都觉得不合适。到后来我反思,它是必要的吗?

没有 关闭电台 按钮的 电台界面UI

没有 关闭电台 按钮的界面,是不是更好些?

我估计,设计人员保留这个按钮的作用,是设想的这样的使用情境:用户独立开一个电台窗口,最小化听音乐,不想听了,可以先关闭电台(但窗口保留,便 于他二次开启)。因为从豆瓣去到电台入口,步骤很麻烦。(bug 一枚,鼠标移到 关闭电台 按钮,没有提示文字,也没有 变色 等任何反馈。)

关闭电台 元素是个使用次数少的操作,位置应该不明显。奇怪的是,无论摆在哪里,它都很明显。尽管现在我将之挪在了右下角,以保持所有操作元素都在一个集中的大区域里,但仍不是最满意的。

原文地址:http://blog.hoooooney.com/2009/06/29/about_the_ui_of_douban_radio/

  • Facebook
  • Twitter
  • Share/Bookmark