30 个创新的 CSS3 Web 网站设计实例

还有什么开发离得开 Web 吗?桌面应用和Web应用的界限越来越模糊,甚至手机应用和Web应用也越来越模糊。制作出一个漂亮而且吸引人的网页让人惊叹。

每天都有大量的富有创意和美丽的设计。 CSS3 摆脱了网页设计的所有限制。下面是我们推荐的 30 个各种各样创意的网站设计。

Alma Natura

HTC

Plugo Browser

Timothee Roussilhe Portfolio

Carnation Group

The UK Energy Guide

The Expressive Web

HMR Servis

CSS Piffle Pitch

Nicolas Tarier Photography

Riley Cran

Infographic Design

ZURB

Code Poet

Campbell Harrison

Yourself WordPress Theme

Bearded

Piccsy

Domani Studios

K2

X-PRIME GROUP

Tomislav Pocedulic

Mailboxing

Sony make.believe

Google Ventures

Offscreen Magazine

Madeinhaus

Whiteboard

Superlovers

LE TIPI

via djdesignerlab /oschina

Firefox 16 将支持桌面 Web 应用

Firefox 16 目前还处于 nightly 版本阶段,不过已经是支持来自 Mozilla 市场的桌面 Web 应用。Mozilla 市场的 App 是由 HTML5、CSS3、JavaScript 以及 Mozilla 提供的固有 API 实现的。通过 Mozilla 市场安装的应用跟一个普通的桌面应用没有别,例如在 Win7 下安装了一个名为 Jauntly 应用,同样可以从开始菜单或者桌面中启动它。

这个跟 Chrome 的应用快捷方式很类似,但更强大,可当作桌面应用软件来进行管理。安装后,运行结果如下:

从上面的截图你会注意到,Mozilla 应用是在一个独立的窗口中打开,提供很少的浏览器菜单,这是特别为平板优化的。

要从 Mozilla 市场上安装 App,必须有 BrowserID 帐号:

卸载 App 的方法:

你可以直接利用 Windows 的卸载工具来除去 Mozilla App 软件:

如果是 Mac 的系统就更简单了,直接将应用图表拖到垃圾箱即可。不过 Linux 下暂时还不支持卸载功能,当然将来将会实现此功能。

英文原文OSCHINA原创翻译

基于 HTML5 的人脸识别技术

介绍一个网站,演示了通过 HTML5 + JavaScript 技术实现的人脸识别,目前仅适用于 Chrome 浏览器,首先需要在地址栏输入 about:flags ,然后找到“启用 MediaStream” 这一项,点击“启用” 后重启 Chrome 浏览器

然后打开下面地址:

http://neave.com/webcam/html5/face/

浏览器会提示你允许访问摄像头,然后你就能看到下面的效果:

当你摇头晃脑的时候,那副眼镜会跟着移动并帮你戴上眼镜。

你可以查看网页源码来了解具体的实现细节。

备注:你测试时所看到的头像不一定有上图帅!

几种常用 HTML5 移动应用框架的比较

 

对于Mobile Web来说,现在是快速成长时代。由于采用了HTML5和CSS3技术,移动浏览器的性能加强了许多,同时,移动app的框架也扩展了,这意味着为移动设 备创建丰富的互动的web体验的可行性又提升了。采用诸如PhoneGap这样的封装软件,您就可以使用native app Store以及单个代码库,就可以分布式部署iPhone,iPad和Android等不同的目标平台了。

对于Mobile Web的开发人员来说,切换框架代价很高:因为动画的转换,工具栏,按钮,列表的显示,以及线下存储等都很麻烦。因为大部分上述功能都是新技术,以及这些 领域的技术还在迅速地改变。作者玩转了许多Mobile Web的框架并且对它们进行了分析比较,下面将为您讲解他的研究发现。

 

jQTouch

jQTouch易用性强,相关文档也很全面。它的特色是在 使用HTML,CSS和JavaScript创建iPhone App方面拥有出色的能力。jQTouch使用渐进增强的方案,在您相应的HTML顶层来实现像iPhone那样的用户体验。它简单易用,提供了一个基础的小工具集以及动画方案,开发人员只需要编程控制其动态行为即可。

不过在作者的简单测试中发现app的性能存在一定的问题,页面在转换时可能出现跳转或者缺失的情况,以及在响应tap事件的时候还有周期性延迟。该项目在技术上还活跃着,不过原作者的进展和部署都显得太慢了。

只需要遵守MIT的license许可就可以使用jQTouch了,MIT lic是作者最喜欢的开源许可之一。

 

jQueryMobile

jQuery Mobile是这个领域的新丁,2010年8月才正式宣布成立,但是已经迅速进展到功能丰富的阿尔法2测试版本了。jQuery Mobile跟jQTouch相比很相似,但是更加标准,更有适应性,感觉很像jQTouch的后继版本,对用户接口和style的支持范围更加宽广了。

jQuery Mobile的性能是不稳定的,(虽然比jQTouch好一些)特别是在响应TAP事件的动画延迟补偿的时候。此外,还缺少一些关键的程序hook,所以 不能轻松地让app更加具有动态性能。例如:当一个页面启动的时候事件触发了,这时候却无法通知响应的代码页面将转向哪个用户接口,也不能传递附加的信息 给处理模块。针对上述问题,创建工作区来解决还是可行的,但是在这里作者希望其将来的版本能从jQTouch那里学习一下,并把现在的功能缺陷处理掉。

jQuery Mobile的相关文档资料很零散但是有所改进,作者很希望它们能变得像核心jQuery库那样具有鲁棒性。(请注意,jQuery Mobile是和jQuery UI相辅相成的,并不是建在单纯jQuery之上的)

想获得jQuery Mobile只需获得MIT或者GPL2 license。

Sencha Touch

这是个与Ext JS框架完全不同的产物,其方案与jQTouch/jQuery完全不同:Sencha生成自己的DOM(基于用JavaScript创建的对象)代替了 先前存在的HTML增强方式。如此,使用Sencha工作的感觉不像是web编程,而更像是使用Java或者Flex等技术来做app的样子。比起 jQuery来,Sencha的感觉更像是YUI。作者个人比较偏好渐进增强的方案,尽管其性能还真有些不尽人意的地方。

sencha跟其竞争对手们相比,扩展性强了很多:它拥有大量的用户接口组件,直接的iPad支持,拥有JSON和HTML5线下存储技术使得存储 和数据绑定更加方便。(使用Sencha的数据结构来操作app的数据十分酷~它可以实时响应列表的更新)此外,Sencha还是唯一在工具栏上支持内嵌 的对象支持,其他方式都是滚轮列表的样子。

在作者的测试程序中,使用Sencha与jQTouch/jQuery相比,虽然app很明显地不那么轻量级,但是其性能和可靠性方面明显提高了,不过其初始化加载时间略慢。

当您使用库library或者框架frame进行开发的时候,不遵守框架或者用你自己的方式通常都不会获得成功。但Sencha的支持范围足够宽 广,这意味着您可以使用Sencha的开发方式来实现任何需求。作者最开始用的是WebKit的内嵌SQLite数据库来做线下存储,但是最终还是因为其 复杂性和各种bug问题的烦恼而放弃了,转而使用了Sencha数据存储的功能。

在文档方面,Sencha做的不太好,虽然很广泛,但是又有很多旧版本的老漏洞没有及时更新,作者就在这些框架中与bug作斗争,调试过程浪费了很 多时间,因为文档不够健全,很多问题难以追踪或理解。而在开发者论坛响应作者提问的频率还算较高,不过最终感觉还是不太够。Sencha提供的付费技术支 持起价是$300每年,作者很强烈地打算付费了,但是Sencha的回应是很好奇地打听为啥这么急着给他们送钱,真搞不懂。

获取Sencha需要遵守GPL3 license,以及在某种不是GPL标准又很相似LGPL的授权下也能用,以及遵循非商业license也可以获得。

 

TitaniumMobile

与Sencha Touch很相似,Appcelerator公司的Titanium Mobile可以让您使用Javascript API来编写app。不过与Sencha不同的是,Titanium把你的代码编译成Native的iPhone或Android app,这意味着它并不是一个真正的Web框架,而是一个兼容层或者编译器。(请注意Titanium Mobile的近亲Titanium Desktop是一个基于web的,让您可以使用HTML /js来编写桌面封装的本地应用的一款软件)

这么说来Titanium允许web开发人员使用JavaScript和一点点XML之类的其他相关技术,可以实现高性能、更换皮肤很方便的 Native App,而不需要额外去学习Objective-C或者Cocoa Touch等技术了。作者的简单测试表明其性能不错,吹散了框架方面的疑云,而且整合起来也不是太难。

不过这个优点也是其致命的缺点,您只能作出Titanium所支持的平台上面的应用,你被它们的开发工具限制住了。作者想证明这一点只需要换一个不 是iPhone的平台上来跑一下就知道了。同时,Titanium的调试器也不怎么样,不能使用XCode方式运行或者调试,就算在其仿真器上面程序跑的 还算不错,还是需要作者自己去实际机器上自己再找问题。

 

分析

作者在这4个框架上面挑选了3种并编造了自己的app来试一试,过程虽然很冗繁,但是收获也颇丰。作者很喜欢jQTouch,但是不太相信它会在现 有版本上再前进多少了。对于jQuery Mobile,很赞赏其简单易用性以及其以web为中心的开发方法,不过它的缺点是缺少核心特色,跟Sencha比性能差很多。

用一个阿尔法2版本的产品来跟一个1.0版本的正式版相比或许有失公平,但是在用户具有很强烈的刚性用户需求时就必须做出选择了,于是作者选择了 Sencha Touch。作者最初被其强大的性能和宽广的支持程度所吸引,最终更喜欢其开发风格。随着开发的深入,其文档的漏洞让作者十分沮丧,但是其广泛的支持程度 依旧吸引着作者,渐渐适应了其开发风格。如果他们愿意回复邮件的话,作者很有意向付费以获取技术支持。不过现在,Pints的发布已经是一个基于 Sencha的app了。

 

结论

作者还没有回答最大的问题呢:一个基于web的app在没有本地app的情况下能否hold住局面?如果可以的话,实现这样的技术是否值得舍弃原来那种单一代码库方式所带来的代价呢?

鉴于两星期以来Pints的实际应用,作者倾向于说不。Pints在性能和bug方面陷入僵局,平均每隔10-15秒页面就乱跳,在滚动页面的时候容易乱跳,动画效果也不是很连贯。

 

原文地址:http://www.dzyngiri.com/?p=752

翻译:范小虎

热点争议:Web 设计师需要编程知识吗?

Web设计师是否应该学习编写代码是个充满争议的问题。通常,在完成了一件网页设计后他们把创建网页代码的繁重工作都留给了程序员们。这种现象不只出现在网络开发行业,在软件及游戏开发业也是如此。 在本篇文章中,作者Deepu Balan 和大家分享了一些为什么Web设计师需要学习编写代码的理由,这会使广大的Web设计师们受益匪浅。

 

Deepu Balan 是个自学成才的Web UI设计师和Web开发者,他对Web设计相关的工作充满热情,你可以通过他的Twitter@bdeepu来关注他。

我们假想一下,如果所有的Web设计师对开发一窍不通,而Web开发人员对设计一无所知,情况会有多么糟糕?偏偏我这样的怪人既希望网站能够设计得非常漂亮,运行也非常流畅。

很抱歉以这样一段话作为本篇文章的开头,但是每当我看到很多Web设计师对HTML和CSS基础一窍不通的时候,都禁不住感到奇怪。不要误会我的意思,但是,一个精通Photeshop的设计师,在跟一些简单的HTML或CSS标签打交道的时候都很吃力,这听上去非常别扭。你肯定不会把“我是个设计师,我对HTML和CSS一窍不通”这种话当成一种炫耀。不管怎么说,这种情况存在争议,有人赞成不学习HTML和CSS是因为它们不像Photoshop那样具有很强的创造力;但是当这和学习编码的优势出现矛盾的时候,这些争议就明朗了。

设计师不谙编程带来的问题

我们假设一下,这是个美好的世界,和平永存,对于设计师来说,图片的导入过程很简单,并能够把它轻而易举地转化成一个引人注目的网站,或App。但是现实世界很少出现这种情况,你需要先使用Photoshop把图片设计好,再通过Dreamweaver或类似的工具把这些图片转换成网站的前台,由于设计师认为HTML和CSS不在自己的工作范畴之内,因此,设计师需要和程序员协作按时完成项目。

这就是最基本的团队合作,某个团队成员的缺席,整项工作就都无法开展。如果设计师可以扮演兼职的开发人员的角色,保证工作按时完成岂不是更好?实际上,我想说得更极端一些,每个设计师都需要有编码能力。并且,学习HTML和CSS基础也非常有趣,这意味着,你没有拖延学习的理由。相信我,你不会后悔学习HTML和CSS,永远不会。

编码是设计师不可推卸的责任
并不是每个设计师都能那么幸运,一些设计师不仅要完成登陆页面设计的工作,还需要在项目中承担起协调的作用,并且,有时候,老板相信他们有把所有想法呈现在浏览器中的潜力。相信我,这并不是一件糟糕的事,你只需要一到两个月时间钻研HTML和CSS,就可以让你的简历更加出彩。好了,说实在的,CSS虽然表面有点复杂难懂,你在元素的位置上花些功夫,是非常值得的。

不管怎么说,如何你仍然意志坚定地不想知道为什么自己要学习HTML的原因,那么下面我给出了你需要考虑学习编码基础的5大理由:

1.更完善的知识体系让设计更加可行

大多数用户都会抱有这种观点:设计师精通编码,这意味着,他们希望参与开发过程以期得到满意的结果。这听起来是个好主意,但是作为设计师来说,你不得不应付更多的干扰,更甚者,还可能需要忍受荒谬的建议,这些建议很有可能搞砸整个设计过程。但是如果你有相关的HTML和CSS知识,客户便不敢对你随便指点,项目也会按期完工,多方皆大欢喜。

2.完整的创作过程

把编码和设计过程拆分开来,不可避免地会出现开发人员胡乱对待设计问题,因为开发人员认为在调整色调或更换渐变效果这样的小问题上没有必要去打扰设计师。所以说,最完美的解决方案就是设计师能够提高编码的能力,这样会大大提高工作效率。

3.编码与设计之间的差别并不大

相信我,编码与设计之间的差别并不大。实际上,在一些专家看来,HTML和CSS本就是设计师的份内事。而且,HTML和CSS会让你的设计更加完美。因此,可以公平地说,HTML和CSS是设计师应该完成的工作。你只需要跨出一小步,你就可以稳稳地抱着自己的“金饭碗”了。

4.节省时间

由于你知道把网站的哪个部分做的更有创造性,在使用HTML和CSS进行设计的时候就会留心。这些工作你都得心应手,这就意味着,整个设计,编码成HTML的过程会在最短的时间内完成。而且,如果你一个人完成所有的工作,就不用在文件传送和让其他人参与开发上浪费时间了,整个过程对你来说轻而易举。

5.源源不断的机会

如果你想让自己拥有更强的竞争力,你需要同时拥有设计和编程的能力。没有人会喜欢开发人员完成的工作,而把奖励给予设计师的这种想法。这就是为什么拥有编程能力的设计师会大受欢迎的原因。

原文出处:Do web designers need to know coding?