[米随随] s5s5 - 第15页共155页 - 本站是基于人类交互的，您的想象决定了我们的应用！

HTML5 ~= HTML + CSS + JS APIs

技术的发展已经不再是靠单一的某项技术来推动，如同HTML5一样，其实并不是简单的HTML标签的升级，而是涵盖CSS3、JS APIs、视频编码等各种技术的大集合。近些年AJAX、WEB2.0、SNS之类的发展越来越表现出这种组合拳和大联招的趋势。在这种情况下还象以前一样靠个人力量单干将会越来越难，团队合作共同发展才是王道。

谷歌的两位工程师做了一个展示HTML5的PPT项目 html5-slides 来展示HTML5的各种特性，看后感慨颇多，推荐大家也看一看：
http://apirocks.com/html5/html5.html （需翻墙）
http://directguo.com/html5/ （中文版）

另外最近乔大爷挟HTML5以挑FLASH，微软、谷歌也是趁火打劫，各方人马都看到了HTML5发展所带来的机遇要拼个你死我活，而未来则可能导致HTML5会涵盖更多的技术，这对我们开发者来说，是一个非常大的挑战！

想做外包、想找工作快来看！钱多，活少，速来！！！

嘿，标题党一把，给大家说两条好信息：

一是腾讯互联网ISD Webteam 设计制作供应商招募，只要你设计功底高，平面广告、Flash动画、WEB UI玩的转，诚信守信，哪大把的银子等你拿！
（注意：去招募页面下载应募表，一定要右键另存为，并且并且下载时或下载后，把文件名后缀改成 .rar 格式。）

二是腾讯ISD Webteam 2010年实习生招聘正式启动，用户研究、交互设计、视觉设计、网页重构，无论哪一个都将为你助力你的未来人生路，在Webteam实习更是如虎添冀！一个好工作将会改变你的人生，你还在等什么？ISD Webteam欢迎你！

具体详细信息请点击链接了解。

换肤&CSS3使用小记

时光飞逝，岁月如歌，转眼间CSS3的时代就要到来了，同学们都摩拳擦掌，跃跃欲试一试CSS3的神奇，像哥这样的懒人今天也下了套支持CSS3的皮肤搞搞高科技。话说这一搞不要紧，一搞之下哥的人生观+世界观都为之一颤，为什么一颤呢，原来哥发现这个世界原来真的是圆角比较美，难怪 Apple 的设计如此美观，正是因为乔大爷对世界万物的认真观察啊！！！

【硅谷革命】18. 到处都是圆角矩形
史蒂夫突然变得很激动，「带圆角的长方形哪儿都是！你看看这个屋子里面。」当然，这样的例子随处可见，比如白板，桌子和椅子。他又指着窗外说：「你再看看外面，外面更多，哪儿都是！」他甚至说服比尔跟他一起出去在楼附近走一圈，一个个地指给他看圆角矩形的物体。
二人路过一个带着圆角的禁止停车标志时，史蒂夫终于达到目的了。「好啦，我投降。」比尔乞求道，「我去看看是不是我想象的那么难吧。」然后他就回家研究去了。

搞CSS3当然是用咱的懒人搞法，直接找套支持CSS3的WP皮肤来用就成了，然后就可以对外宣布，哥已经掌握CSS3啦，哈哈哈哈~~~当然，咱也不能太懒，还是要看看哪里有不足，改一改，这一改不要紧，一改之咱对CSS3的掌握又是更进了一层，事情是这样滴：
继续阅读“换肤&CSS3使用小记”

CSS3的动画

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /www/wwwroot/s5s5.me/wp-content/plugins/wp-syntax/wp-syntax.php on line 380

最近研究CSS3的动画，还是相当的强大啊，做了一个小皮球跳跳的动画 DEMO，代码如下：

< !doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 animation</title>
<style>
.animation {
	-webkit-animation-name: bounce;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 10;
	-webkit-animation-direction: alternate;
	-webkit-border-radius:100px;
	position: relative;
	left: 0;
	top:100px;
	width:100px;
	height:100px;
	text-align:center;
	line-height:100px;
	background:#F00;
}
@-webkit-keyframes bounce {
	from {
		top: 0;
		-webkit-animation-timing-function: ease-out;
	}
	25% {
		top: 110px;
		-webkit-animation-timing-function: ease-out;
	}
	50% {
		top: 50px;
		-webkit-animation-timing-function: ease-out;
	}
	75% {
		top: 90px;
		-webkit-animation-timing-function: ease-out;
	}
	to {
		top: 100px;
	}
}
</style>
</head>
<body>
<div class="animation">皮球</div>
</body>
</html>

< !doctype html> <html> <head> <meta charset="utf-8" /> <title>css3 animation</title> <style> .animation { -webkit-animation-name: bounce; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 10; -webkit-animation-direction: alternate; -webkit-border-radius:100px; position: relative; left: 0; top:100px; width:100px; height:100px; text-align:center; line-height:100px; background:#F00; } @-webkit-keyframes bounce { from { top: 0; -webkit-animation-timing-function: ease-out; } 25% { top: 110px; -webkit-animation-timing-function: ease-out; } 50% { top: 50px; -webkit-animation-timing-function: ease-out; } 75% { top: 90px; -webkit-animation-timing-function: ease-out; } to { top: 100px; } } </style> </head> <body> <div class="animation">皮球</div> </body> </html>

继续阅读“CSS3的动画”

CSS3 HTML5 YSlow孰对孰错

YSlow计算公式
F = 8×{100-[4×(JS文件数-3)+4×(CSS文件数-2)+3×(CSS背景图连接数-6) ] } +6×(100-10×未使用CDN的连接个数) +10×[100-11×(Expire时间小于172800秒的连接个…

HTML5 – 新旧语法简介
米：把DIV标签淘汰，晕，我认为这是不可能的。语义化标签不可能覆盖所有的东东吧，总要有一个万能的、中性的标签来表现哪些灰色地带吧~

CSS3变换入门
我们需要的是快速而简单的方法来给页面添加简单的变换(transition)效果。在本文中，你会发现很有用的关于CSS变换(transition)以及如何使用它们的信息。
继续阅读“CSS3 HTML5 YSlow孰对孰错”

第六期WEB标准化交流会(深圳站)小记

昨天参加了第六期WEB标准化交流会(深圳站)的活动，因为之前在公司里做过一个关于“协作沟通”的分享PPT，所以在交流会上也丢了这个砖下去希望引起大家的一起金玉良言出来，呵呵。辛苦组织的同学早早的准备了一切，大家聊的比较开心。特别是来了很多深圳同行业的专家，以前这种会还是太少了，以后还是要多多有这样的一些交流会大家互相学习研究才好~

在会上大家主要围绕着工作当中经常遇到的“沟通”、“项目工作量与进度”、“紧急需求插入”、“项目周期安排”、“上流设计稿交付延期”、“流程建设”、“并行开发”、“模块化”、“版本更新的影响”等问题深入的交换了意见，现在好象主要记录如下一些关键点：
继续阅读“第六期WEB标准化交流会(深圳站)小记”

有一种失败叫占领有一种胜利叫撤退

“有一种失败叫占领，有一种胜利叫撤退”。在《潜伏》中有这么一句话非常经典，当时是老将围剿延安，而老毛战略撤退让出延安，然后运动了几圈消灭老将的部队。当时延安坚壁清野，找不到任何食物，老乡们也不给任何关于老毛的情报。而且民兵也多，老将的部队经常受到袭击，分不清哪是主力；并且遍地都是地雷，老将部队伤亡惨重，人心惶惶，前进时个个胆战心惊；老毛又擅长夜战和近战，老将的重型武器优势无法发挥；更要命的是老毛占据有利地形，抵抗异常坚决，他们采用“节节撤退、节节抵抗”的战术，最后把老毛拖垮了……

[译]渐进增强：纯CSS聊天泡泡

原文地址：http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/
作者：Nicolas Gallagher
译者：米随随

聊天泡泡做为一种UI表现形式是广大网民群众所喜闻乐见，但许多教程实现它却总是需要上使用非语义的HTML或者JavaScript。而本教程中的各种聊天泡泡只需要使用到CSS2.1来构建，并用CSS3来增强效果。不使用图片，也不使用JavaScript和更加不使用当前语义没用到的HTML哦。
在CSS文件中有大量对代码的注释，可以让你方便的看懂这些代码。（译者：在翻译时作者要求DEMO页面要用原先的网址，所以这些注释没有翻译，当然当你看完本文，了解清楚实现方式，哪么不看注释也是可以看懂代码。）

查看DEMO：纯CSS聊天泡泡
 继续阅读“[译]渐进增强：纯CSS聊天泡泡”

WEB标准网速测试FWA Webkit bubbles

Progressive enhancement: pure CSS speech bubbles
Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

The FWA
FWA stands for Favourite Website Awards, an industry recognised internet award program and inspirational portal, established in May 2000.

Webkit内核探究【2】——Webkit CSS实现
关于CSS的介绍网上已经有很多了，在这里将主要从Webkit实现的角度对其进行介绍。
继续阅读“WEB标准网速测试FWA Webkit bubbles”