Alice 是支付宝前端样式解决方案小组的项目代称。她包括构建样式库的样式库解决方案，帮助团队理解新技术的W3C标准文档库和正在进行中实验项目等; 也是团队的代称。目前 Alice 的主要职责是提供 CSS 和 HTML 方面的技术支持和解决方案开发。

基于“分享·贡献·学习”的理念建立此网站，开源部分团队成果。发布的所有开源源代码，均采用 MIT License 许可。欢迎参与 Alice 的开发，或提出你宝贵的意见。

官方站点：http://aliceui.com/

Github：https://github.com/sofish/Alice

简单用了一下 感觉还不错哦
为了方便大家打包压缩 我也写了个插件基于ant的打包工具

https://github.com/sofish/Alice/tree/master/plugins/AntBuild

解释：

同步刷新：当文件修改时 浏览器自动刷新，如果你在做多屏幕开发的时候会尤其提升开发效率

昨天在微博上看到了f5这款国人开发的软件，今天收到激活码 ，在mac下进行了简单测试，没有什么问题

相比较的话，国人开发的这款软件基于air技术，能够比较好的跨平台，但是需要激活，不知道除了验证以外会不会有其他数据的收集

总体来讲 支持一下

官方网站：http://www.getf5.com//

视频演示：

下面有几个激活码 分享一下

• c65af48f80e249d198293cdf1a9ee6a9
• 55a365fc7d7042e5be52ad6d24b77450

demo见：http://www.iamued.com/demo/Mselect/

代码：https://github.com/iamued/Mselect

也借此机会尝试用了一下git 貌似还不错哦~

如果你从没听说过互动电影，那就真的要点击这里开开眼界了。这个页面以灰白色调为主，页面上的动画效果皆由 HTML5 技术制作，官方推荐最好使用 Chrome 浏览器，经过我们的试用，IE8 与 Opera 均无法启动这个页面，而 Firefox 4.0 Beta 4 和 Safari 都能体验这个互动电影。

谷歌在间接“鄙视”IE8 与 Opera 对 HTML5 的支持度

但这两款浏览器对这个页面的 HTML5 特效处理速度奇慢无比，偶尔还会出现崩溃现象，我们不排除这一个页面为谷歌 Chrome 浏览器特别优化过，因为这种以特效体验页面来暗中贬低对手的把戏已经屡见不鲜了。

登录这个页面后你首先需要输入你小时候的住址，为什么？因为电影情节将会从这里开始，并且融合谷歌地图和谷歌街景的技术到电影中，达到非常震撼的互动效果，其他诸如 Canvas，Video，Audio 等的 HTML5 标准特效就更加不用多介绍了。

输入小时候的住址

经过好一会儿的载入等待之后，由著名作家兼导演 Chris Milk 亲自操刀的互动电影就开始了，开始的时候，一名模样十分鬼祟的白衣男子在狂奔，奔到有气无力的时候，电影会先暂停，让你用交互绘图工具绘画一张明信片，寄给小时候的你。

一双无影脚

谷歌街景视图中的是不是你儿时的家？

你可以用鼠标乱涂乱画，也可以直接输入你想说的话，不过这张明信片，无论你的画工有多精细，画出来的都只能是错综复杂的线条，配合著名独立摇滚乐团 Arcade Fire 刚刚推出的新专辑《The Suburbs》中的歌曲 We Used to Wait 作为主题音乐，颇有剪不断理换乱的感觉。

错综复杂的明信片

写完明信片后将会是一段狂奔的视频

纸上谈兵完毕，最后送上这个HTML5 互动电影《The Wilderness Downtown》的视频。

The Wilderness Downtown

关于 Arcade Fire （拱廊之火）

Arcade Fire（拱廊之火）是一支独立摇滚乐队，来自于加拿大的蒙特利尔。乐队的主创成员是Win Butler和Régine Chassagne，他们是一对夫妻。乐队演奏的主要乐器有吉他、贝司和鼓，除此之外还有钢琴、小提琴、中提琴、大提琴、低音提琴、木琴、钟琴、键盘、圆号、手风琴、竖琴、曼陀林和手摇风琴。乐队在巡演中会带上几乎所有的乐器，然后由多面手的乐队成员们在整场演出中交替演奏。

Arcade Fire（拱廊之火）

拱廊之火乐队赢得了诸多奖项，包括2008年流星音乐奖的最佳国际专辑奖和2008年朱诺音乐奖的年度另类专辑奖。乐队在2005年和2008年因专辑《Funeral》（葬礼）和《Neon Bible》（霓虹圣经）同获格莱美音乐奖的最佳另类音乐专辑奖提名。而他们于2010年发行的新专辑《The Suburbs》（郊区），更是得到了评论界的称赞。

http://www.google.com/intl/zh-CN/events/devfests/2010/

还是收获不少的，google还赠送了一些小礼品 T-shirt、包包、笔记本、钥匙链等

几个主题主要围绕的还是HTML5+CSS3 还有一些chrome的深入讲解

相关PPT目前还没有得到，请持续关注，之后如果拿到PPT会持续更新的：）

顺便问下：谁知道昨天最后讲解的那个测试兼容性的 extensions 叫什么？

WEB标准化交流会让我认识了不少新朋友、今天更巧的是遇到了一年前项目合作过的同事：）

IE9的分享 重点在于IE系列终于迈向标准化 并且将GPU引入浏览器引擎，对于渲染速度和性能大大提升，同时透露出XP下无论哪个浏览器都是无法使用GPU加速的，虽然不知道这个说法的可信性，但是这次IE的预览，还是有一些收获的，至少让我们看到了浏览器越来越标准，当然更重要的是kill IE6！

第二场爱民老师的分享让我比较有收获，几个方面吧

1.解决问题的思路-共性、本质，找到问题的根源
现场的例子：以为运营说需要在这里加一个按钮，他的需求真的是要多加一个按钮么？实际上可能是觉得原来按钮的位置并不合适
2.系统框架、框架、库、应用的概念
说实话，听的确实有些模糊，不过两个例子很精彩，由浅入深的，讲解了是如何一步一步的抽象出最终的系统框架。
从我的理解，库是相互没有依赖关系的，框架是来将库进行一个抽象关联，而系统框架，是更本质的抽象出了某一类业务的底层逻辑包括一些必须的数据和逻辑关联

给我印象比较深的一张图片如下：

当我们更多的关注于插件机制、组建机制、消息机制的时候、我们更应该从需求变更、版本升级、产品整合的视角来看待他们的本质

而我的观点是-人人都是”架构”师

为什么这么说呢?哈,首先我所说的架构是加了引号的

我理解的”架构”呢,更贴近我们的生活,工作,架构可大可小,”系统架构师”可能我们确实需要很多积累、天赋，而我们要把架构的意识引入到我们的日常生活中来

几个例子：
1.职业规划 是不是架构？
2.当我们保存站点文件，站点文件的目录是不是架构？
3.CSS的reset、grid、form等算不算架构呢？
4.我们经常用js写的weiget又算不算架构呢？
……
我相信在我们的生活、工作中、架构无所不在-人人都是”架构”师

CanvasPaint 是一个基于 HTML5 的标准 Windows 画图程序，它拥有和 Windows 画图程序一模一样的界面和操作，功能也几乎完全一样，在特定浏览器的支持下，你甚至可以将最后的作品保存到本机。这并不是最近的项目，2006年就有了， 因此，目前绝大多数支持标准的浏览器（Firefox，Safari，Chrome，Opera）都可以正常使用这个程序。以下是作者对这个项目的一些解 释。

为什么要开发这个程序？

目的不是为了开发一个 Windows 画图程序，而是体验 HTML5 的 Canvas 功能。

如何使用

和标准 Windows 绘图程序一样。

能保存吗？

是的，但只支持 Firefox 2 和 Opera 9 （译者注：这是作者2006年就实现的一个程序）。在本机保存，选择 File 菜单中的 Download，在线保存，选择 Save online，会自动生成一个 URL 在线显示你的作品。

浏览器本身的右键菜单影响使用

可以在浏览器的设置中禁用右键菜单。

为什么有些功能不能用？

一些功能支持特定版本的浏览器（译者注：这是就2006年而言）:

Color picker

Firefox 2.0

Opera 9

Flood fill

Opera 9

Save image

Firefox 2.0

Opera 9

Open URL

Firefox 1.5

Opera 9

Latest WebKit

Canvas 对象好用吗?

对那些不需要跨浏览器支持的应用很好用。但在绘画中，最大的问题是，受限于 mousemove 事件的刷新率，你不太容易发现光标的位置，使用喷笔的时候尤其明显。另外，当尺寸变得很大时，速度变得很慢，没有 getPixel() 功能。

技术细节

程序中使用了 5 个 Canvas 对象。

一个主画板，一个是透明画板层浮动在上方显示预览绘画内容，一个隐藏的 Canvas 用来缓存选择的内容，另一个用来缓存反悔状态，一个用在程序标题栏，用来显示渐变色。

其他人的 HTML5 Canvas 实验

Canvascape 3D （用 HTML5 实现简单的第一人称射击游戏）
CanvasGraph （一个 HTML5 Canvas 绘图 JavaScript 类库 ）
Image reflections （用 HTML5 Canvas 实现图像倒影）
Canvas Painter （一个更为简单的 Canvas 画图程序）

真正令人赞叹的 HTML 画图程序

如果上面的程序已经让你对 HTML5 的 Canvas 功能感到鼓舞，下面这个画图程序会让你赞叹 。拥有不输桌面的界面体验和流畅 感，在多屏幕电脑上，我甚至有将那些浮动工具面板拖到第二个屏幕的冲动。

演示地址：http://mugtug.com/sketchpad/

本文素材来源：http://canvaspaint.org/#
http://mugtug.com/sketchpad/

中文编译来源：锐商企业CMS 网站内容管理系统 官方网站

先感谢一下北京腾讯给我们提供了场地，水，和公仔，今天听了很多“大虾”们的分享，感受颇深
就说一下小公司前端开发在研发中如何更好的协作吧 

今天会议上几个突出的词：“流程”，“沟通”，“专业“，“吃饭喝酒”：） 

那我就分别说一下自己的见解
1.“流程”，存在即是合理的，社会所必须承受的，就像高房价一样，很多时候“流程”被我们吹捧的就像一个神一样，貌似能解决一切问题，而实际上我认为，流程只是一个比较虚的东西，什么是流程？就是一种大家认可的协作方式，在中小企业里我认为无流程就是最好的流程 

2.“沟通”，为什么沟通？怎样沟通？今天腾讯的页面组leader说得好：“沟通就是情商，情商会从你的绩效考评里反映出来”，什么意思呢？也就是“强制沟通”，我认同这个观点，有效的沟通能够大大提升我们的效率，以及信息不对称等问题，我也希望所有的前端朋友们，一定要学会使用“沟通”这个武器，很多时候他能解决你技能所解决不了的问题 

3.“专业”，专业是什么？kejun兄补充的好-“专业就是饭碗”，我们要提升自身专业度，在研发流程中承担更多的职能，现在有多少公司里，后端不做一些“前端”的活呢？这也可能目前前端开发是“解耦”的最好途径 

4.“吃饭喝酒”，同事间朋友间，需要有一些私下的沟通与了解，适当的有些活动，能够在工作配合上更加的顺畅，当然了吃饭喝酒只是其中之一，更多的在轻松地环境下交流交流，增进一下友谊,本次讨论会后聚餐共16人哦：） 

kejun在最后公布了之前出的html面试题的答案 有兴趣的 移步这里
http://www.iamued.com/qianduan/1373.html

最后借用一张崔凯发的合影结尾吧：） 

第六期WEB标准化交流会合影{点击放大}

<P>&nbsp;&nbsp;哥写的不是HTML，是寂寞。<br><br>&nbsp;&nbsp;我说：<br>不要迷恋哥，哥只是一个传说

这是原来雅虎一道笔试题（文字变了变），用了很多年了，还没有一个人完全答对过。
下周（3.27）交流会上我会公布答案  点击查看第六期WEB标准化交流会 总结

＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 解答部分 ================

出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维护，灵不灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。

这不是一道较真题或是装逼题，正经一道“画鸡蛋”的题（引自http://twitter.com/RageCarrier/status/10712084993）考的是基本功。代码如其人，对一行代码的理解足以反映出他的前端开发素养。

言归正传。这道题的考点：

考点1：html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。

这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。

考点2：考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp

考点3：合理使用标签
br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。

上面全答对，你就能拿到100分。

对原题改进的结果：
html 4.01:
<p>哥写的不是HTML，是寂寞。<p>我说：<br> 不要迷恋哥，哥只是一个传说

xhtml 1.0:
<p>哥写的不是HTML，是寂寞。</p><p>我说：<br /> 不要迷恋哥，哥只是一个传说</p>

加分：合理的用语义化标签
在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。

<p>哥写的不是HTML，是寂寞。
<p>我说：<br> <q>不要迷恋哥，哥只是一个传说</q>

我觉得这就够了，如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。

<p> 哥写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>，是寂寞。
<p><cite> 我</cite>说：<br> <q>不要迷恋哥，哥只是一个传说</q>

转自kejun的blog：http://hikejun.com/blog/?p=548

　　北京时间3月17日消息，据国外媒体报道，微软当地时间周二发布了面向Web开发者的预览版IE 9(下载地址)。

　　微软IE团队总经理迪恩·哈克莫维奇(Dean Hachamovich)今天发表声明称，IE 9与以往的IE版本有很大不同。他表示，微软将每8周对预览版IE 9进行一次升级，第一次升级将在5月中期。但哈克莫维奇没有披露正式版IE 9的发布时间。

　　微软称，预览版IE 9还不是一款完整的浏览器，目前还不包括地址栏等用户导航工具以及安全功能。微软发布了一个它称之为“Test Drive”的网站，方便网站设计人员、应用开发者了解预览版IE 9的功能。

　　预览版IE 9只支持Windows 7、Windows Vista SP2和Windows Server R2。IE 9可以利用图形处理器的处理能力加速文本和图形的渲染。

　　用户可以从Test Drive网站下载大小为31MB的预览版IE 9。（阳光）

　　附：IE 9预览版下载地址：http://ie.microsoft.com/testdrive/