我们的故事 » 视角 http://blog.ihandu.com i Hand u - dUcky's Blog Tue, 22 Jun 2010 16:32:21 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 html5 带来了什么？ html5 与 css3 http://blog.ihandu.com/2010/03/html5-css3/ http://blog.ihandu.com/2010/03/html5-css3/#comments Wed, 03 Mar 2010 14:46:26 +0000 dUcky http://blog.ihandu.com/?p=458 html5

html5 已经被热议了很久，什么是 html5 以及它发展的情况不去赘述，要强调的是 html5 工作组得到了 Apple 以及 Google 两巨头的支持。详细可以查看维基百科关于 html5 的描述。

html5 的标签

与 html4 或者 xhtml1 相比，html5 带来了新的标签，废弃了一些旧的。举个例子，现在我们写一个普通的新闻页面里 <body> 的内容是：

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="header">ihandu.com 我们的故事</div>
 
<div class="content">
    <div class="news">
        <h1>dUcky的blog: ihandu.com 我们的故事</h1>
        <div class="detail">
            <p>i,dUcky</p>
            <p>Bio:交互设计 前端 Gfans html5 带来了什么？ html5 与 css3</p>
        </div>
    </div>
</div>
 
<div id="footer">2010 ihandu.com 我们的故事 版权所有</div>

那么用 html5 该怎么写呢？

1
2
3
4
5
6
7
8
9
10
11
12
13

<header>ihandu.com 我们的故事</header>
 
<section>
    <article>
        <h1>dUcky的blog: ihandu.com 我们的故事</h1>
        <section>
            <p>i,dUcky</p>
            <p>Bio:交互设计 前端 Gfans  html5 带来了什么？ html5 与 css3</p>
        </section>
    </article>
</section>
 
<footer>2010 ihandu.com 我们的故事 版权所有</footer>

终于，我们可以真正的摆脱所谓 “div+css” 的标准化了，省去了很多 class 以及 id …

html5 提供了更多的语义化标签，比如：

1
2
3
4
5
6

<header>页头</header> 
<footer>页脚</footer> 
<section>文档中的区块章节</section> 
<article>文章</article> 
<video>视频内容</video> 
<audio>声音内容</audio>

等等……

当然，html5 也抛弃了一些标签：
center, font, u, strike, s, frameset, frame, applet

我们看到 frameset 和 frame ，那么框架结构在 html5 里就不复存在了，在我看来，这是个好事情。

关于 html5 标签的详细可以参考：html5 参考手册

css3 高级选择器

那么 html5+css3 会是什么样呢？看代码：

1
2
3
4
5
6
7
8
9

<section>
    <section> -------------------------------- 1
        <section></section> ------------ 3
        <section></section> ------------ 4
    </section>
    <section> -------------------------------- 2
        <section></section> ------------ 5
    </section>
</section>

CSS3 提供了很多高级选择器：

1
2
3
4
5
6
7
8
9

section>section{}  section 直属下级的 section (编号1和编号2)
 
section>section:nth-child(1){}  二级 section 中第一个 section (编号1)
section>section:nth-child(2){}  二级 section 中第二个 section (编号2)
 
section>section:nth-last-child(1){}  二级 section 中最后一个 section (编号2)
section>section:nth-last-child(2){}  二级 section 中倒数第二个 section (编号1)
 
section>section:only-of-type{}  section 下只出现一次的 section (只能定位到编号5)

要弄清关系必须多用，我项目中会用到 css3 的选择器来 hack ，因为现在 IE 看不懂…

CSS3 选择器相关的可以参考：css_3_selectors_explained

html5 与 css3 的浏览器兼容性

上面说到浏览器兼容性，那么哪些浏览器支持 html5 以及 css3 呢？

Safari 4+, Firefox 3.5+, Chrome 3+ 已经支持
Opera 10.5 已经部分支持
ie9 支持 css3 ，有可能支持 html5 …

html5 更多的亮点

html5 还有更加强大的其他属性，比如：canvas、本地存储和 web socket 等等。

Google 已经宣布放弃 gears 而用 html5 作为离线存储方案；youtube 以及用 html5 架构页面等等，相信未来会有更多关于 html5 的惊喜。

相关文章

]]> http://blog.ihandu.com/2010/03/html5-css3/feed/ 1 Lets Wave – 惊喜的 Google Wave 邀请 http://blog.ihandu.com/2009/10/google-wave-invite/ http://blog.ihandu.com/2009/10/google-wave-invite/#comments Wed, 14 Oct 2009 13:01:11 +0000 dUcky http://blog.ihandu.com/?p=338 google wave logo

折腾了好久的Google Wave终于折腾到我头上了…之前第一批测试用户很少，而且没有邀请。这次大概有10万用户受邀测试使用Google Wave服务。

下午还在开会的时候收到一封标题为《Your invitation to preview Google Wave》的邮件，真的是不敢相信。看了内容，应该是很久以前递交过给Google一份使用申请，没想到这次还真的排上我了…

google wave invite

“Thank you for signing up to give us early feedback on Google Wave.” 应该是就因为这个吧。

google wave invite

登录Google Wave以后会得到8个邀请的机会，邀请你的朋友也加入Wave，而且这8个邀请也是通过一条”Wave”操作的。瞬间就把邀请发光了…而且现在只有这样的第一代有邀请，被邀请者是不能再邀请别人的。

一开始联系人中没有几个在使用wave，这个时候可以在搜索框里输入 “with:public” 搜索所有公开的Wave，并且结果还在不断更新，绝对海量…点进去一个看很杂乱，不过有快捷键，按空格可以直接跳到本Wave下的下一条未读的信息。

google wave

用公开给所有用户的Wave发招聘信息是个不错的主意……

Google Wave里可以添加各种媒体以及Google的各种插件，具体的可以参照Google Wave的示例代码，每个用户的每个步骤都会被记录下来并且可以回放。刚开始用，正在摸索中，我想我都收到邀请了，应该越来越多的人都会有。这东西大家一起来用才有价值，可惜我的联系人里还没几个用Google Wave服务的，邀请已经发了，但是收到邀请的时间好像有点长…

可以在twitter与我交流： twitter @iducky

——– 2009-10-15 0:50 ——–
腾了几个小时的 googleWave 我崩溃了…好难操作…

所有的列表内容都是通过搜索条件出的结果，可以保存自己的搜索条件，比如说公开的中文Wave的搜索条件 “with:public lang:zh” ，还可以建立自己的文件夹，但是我不知道怎么把Wave拖进去…

之前拖拽到垃圾桶可以删除index里不要的Wave，但是现在不行了…不知道怎么把公开的 Wave 存进文件夹，拖拽完全不起作用…有的Wave里我写着写着就输入不了中文了…昏了昏了… via

——– 2009-10-31 22:50 ——–
时隔半个多月我又一次登录 GoogleWave ，发现怎么又多了12个邀请名额，现在还有人没有吗？另外Wave里个人资料的头像是上传到Picasa的，由于无法访问，所以没事就不要换头像了…

@方便面 已经发给你了，请等待…

另外想要邀请的童鞋可以在twitter上 follow @iducky ，联系我就可以了。

相关文章

]]> http://blog.ihandu.com/2009/10/google-wave-invite/feed/ 22 阿里巴巴推出云计算网站 Alibaba Labs http://blog.ihandu.com/2009/09/alibaba-labs-10th/ http://blog.ihandu.com/2009/09/alibaba-labs-10th/#comments Tue, 08 Sep 2009 10:03:17 +0000 dUcky http://blog.ihandu.com/?p=217 alibaba labs

之前阿里就提出过云计算，并在南京建立“亚洲首个电子商务云计算中心”。今天，阿里巴巴推出了它的云计算网站：Alibaba Labs，虽然只有一个首页…via。我们知道，一般敢叫Lab的，出产的东西会比较特别，希望从阿里实验室出来的产品也能这样。

alibaba labs

据说网站将于9月10日阿里十周年庆典那天发布更多的内容。我们现在看到的首页截图上也透露了一点信息。浏览器？输入法？手机同步？……你还能看出点什么？看来阿里不止想占领你的浏览器，还想占领你的计算机系统以及手持终端。期待着“强劲产品”的面世。此文将持续更新，关注此次阿里发布的相关产品。

——– 2009-09-09 12:30 ——–
此时阿里巴巴云计算网站 Alibaba Labs 报404，首页已经被撤下，无法访问了。via 明天就是阿里10年庆典，不知道有什么花样。另外泄出了阿里输入法内测版，现在外网无法访问。


阿里巴巴拼音输入法

alibaba pinyin

阿里巴巴拼音输入法内测版可以更换很多与阿里有关的皮肤，比如淘宝支付宝什么的，另输入法词库包含了阿里集团所有员工的姓名。有兴趣可以去搜索“阿里 拼音输入法 下载”，网上已经有提供下载压缩包了，不过我不感兴趣，就不试了。

随机日志

]]> http://blog.ihandu.com/2009/09/alibaba-labs-10th/feed/ 0 微博的“三国演义” http://blog.ihandu.com/2009/09/twitter-meme-jaiku/ http://blog.ihandu.com/2009/09/twitter-meme-jaiku/#comments Mon, 07 Sep 2009 13:08:14 +0000 dUcky http://blog.ihandu.com/?p=192 twitter-meme-jaiku

类 twitter 微博在国内的生存状况大家都知道，火最大的就是饭否被关了…很多文字以及朋友都找不回来，百度百科的条目被删除，豆瓣小组被解散等等，相关资料可以看 wiki 。

所以，不得不再一次使用 twitter 。最早在2008年1月注册了，这是第一条推…虽然很多很多阻碍，但得益于 twitter 的开放性，国内的活跃用户还是很多，它也是我得到第一手新闻资料的来源。

twitter @iducky

然后就是最近比较火的 yahoo meme 。邀请已经泛滥，而且由于 meme 的贴图很方便，所以很多一部分都是图推。也许是之前国内用户憋的太久，所以在 meme 上歇斯底里的爆发了，多是美女图片类，也不乏比较过的图，而且在 meme “漏器官的都不会删贴，图片不出现2人以上就行”（via）。所以经常占据 meme popular 排行榜的多席，不知道国外网友是怎么想的…不过热度应该持续不了几天，这段时间已经冷静多了。dUcKy也同样不能免俗，看美图请进…

meme/iducky

至于 Jaiku 是 Google 之前收购的，没有很努力的去推广，也没有抓住前段时间 twitter 宕机的机会。但是 Jaiku 是完全开源的，应用也可以很方便的扩展。它的 Channels 比较有特点，类似小组的功能，可以去试一试。由于时间还短，没怎么去用，还是习惯用 twitter 。

jaiku | iducky

最后还得提一下新浪微博，在 twitter 很难访问的时候，确实火了一阵，但是当 meme 出现后，几乎被人遗忘…

新浪微博 iducky

所以，twitter 是活跃度最高的，信息非常多和杂，可以像我一样分不同的帐号 follow 不同的人，关注各个方面的消息，但是对于初级用户很难访问是一个问题。

而 meme ，体验比较好，而且如果你想要看美图，去就没错了，反正至今我没发现其他更加特别的地方。

至于 Jaiku ，由于用户基数不大，而且国内用户不是太多，可以作为备用或者技术研究。

新浪微博，有很多名人在用，而且是国内的，比较稳定，就是限制比较多，也没发现什么新意，而且本土化的一些功能也不是很好用。

——– 2009-10-08 12:30 ——–
放假回来发现meme的首页改版了，主打看来是图推了，确实meme图推的体验还是不错的。

snap-meme

最后选什么还是看自己要什么，欢迎在各个微博与我交流… = =

twitter @iducky
meme/iducky
Jaikus from iducky
dUcky在新浪微博

相关文章

]]> http://blog.ihandu.com/2009/09/twitter-meme-jaiku/feed/ 2 Google Voice 试用手记 http://blog.ihandu.com/2009/09/google-voice-test/ http://blog.ihandu.com/2009/09/google-voice-test/#comments Fri, 04 Sep 2009 17:49:34 +0000 dUcky http://blog.ihandu.com/?p=170 google voice关于 Google Voice ，相关的文章已经太多。由于是前一段时间申请的，不知道现在是不是还是这样的状况，而且此博刚开，所以只当备份。

首先 Google Voice 只对美国的用户开放，所以首先你得有一个美国的IP，这个可以通过代理或者VPN解决，问题不大。最主要还是说一下激活你的 Google Voice 的步骤。

下面就是重头戏，因为 Google Voice 需要一个美国的固定电话输入验证码来激活，这个自然也难不倒我们，你可以使用 Skype 付费使用一个美国本土的号码，或者在 Virtual Phone Line 申请一个美国的虚拟号码，其实提供虚拟号码的网站有不少，比如 Gizmo5，但是很奇怪，都是虚拟号码，Google Voice 可以支持 Virtual Phone Line ，却不支持 Gizmo5 ，因为第一个激活的号码必须是固定电话，而 Virtual Phone Line 被认为是固定电话号码。

如下图：
Google Voice
@iducky http://twitpic.com/dyvcf – gizmo5 的号码在激活时不被支持，不过激活以后应该可以添加。 via

如果你申请了 Virtual Phone Line ，可以使用一个虚拟号码20多天。此时，别急着确认你领的号码，因为这个号码有可能是别人用来申请用过的，然后过期了，回到号码池里，你如果挑中了，也无法激活 GoogleVoice 。


如下图：
google voice
@iducky http://twitpic.com/dyu2i – 我郁闷啊，哪位哥哥在 virtualphoneline 上用 15672441596 这个号码的啊，现在过期以后被我选中了，害得我没法激活 GoogleVoice 啊… via

当你可以用 Virtual Phone Line 以后，在 Virtual Phone Line 里设置所有电话转接到你的 Gtalk ，然后输入验证码。在 Gtalk 里输入验证码可以自动模拟按键，直接输入数字就可以了。

如下图：
google voice
@iducky http://twitpic.com/e0b9h – 使用 Gtalk 输入验证码，成功激活 GoogleVoice via

成功激活后来到主页面，有一条语音留言。

如下图：
google voice
@iducky http://twitpic.com/e0cwp – Google Voice “收音箱”…又添加了一个Gizmo5的号码，音质好很多。打完收工，睡醒再研究。 via

至此，你拥有了一个 Google Voice 全球唯一的号码，想使用通话功能，可以把电话转接到你的 Skype 上是最方便的。对于国内的用户，最容易使用的就是短信功能了，可以免费向手机发短信，国内的只有移动是支持的，联通收不到…

手机接收短信测试如下图：
google voice
@iducky 测试 Google Voice 发送国内移动短信，听说联通的不行。发送号码就是我 Google Voice的号码。 via

发送的短信会保存在 SMS 文件夹了，别人可以直接回复，也会显示在一个文件夹里，但是别人回复得1块人民币一条哦 = =

对于运营商，Google Voice 应该是一个很大的挑战，但是作为国内用户，也许它还离我们很远，国内如果想正常使用，可能只是一个梦想。

相关文章

]]> http://blog.ihandu.com/2009/09/google-voice-test/feed/ 0