5 个交互式 Web 设计中有用的工具

1.FitText.js

FitText.js是一个能让字体大小灵活变化的JavaScript插件,它很容易使用,你可以从github免费下载它。

主页:http://fittextjs.com

2.Adaptive Images

该工具检测访问者的屏幕大小并自动创建、缓存和为不同设备重新调节网页中的图片大小。这个使用起来有点小困难,因为你不仅需要点html和css知识,还需要点服务器知识。具体细节请看该项目的安装指导。

主页:http://adaptive-images.com

3.Responsive Testing

这个工具可以让你预览你设计网页在不同设备上的效果,只需要访问http://mattkersley.com/responsive并输入你网站的地址就可以看到了。

4.Less Framework 4

Less Framework是一个为自适应网站设计的CSS网格系统,它有4种布局和3中预设的排版,都基于一个单一的网格。你可以从github免费下载它。

主页:http://lessframework.com

5.Responsive Web Design Sketch Sheets

如果你还在用纸和笔来创建你的实体模型,你可以用这些现有的草图来设计你的交互网站了。

下载:http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets

ASP.NET MVC4 Web API 堆栈将添加指定消息处理功能

微软工程师 Kiran Challa 近日在其博客中张贴了一张正在开发阶段的 ASP.NET MVC4 Web API 堆栈图,如下图所示。

Kiran 称,目前该堆栈正在开发阶段,上面的这张图并不能代表最终的官方版本,但是,你可以从图中预先进行了解。此外,Kiran 还给出了一张先前公布的官方版本堆栈图,如下图所示。

这两张图中最显著的区别是,上面第 1 张图中包含指定路由消息处理程序管道(Route-Specific Message Handler Pipelines)。此功能允许用户在给定路由的请求链中指定最终的消息处理程序,包括:

  • 支持在每个路由基础上添加消息处理程序。
  • 允许“ride-along”框架使用路由去分派自己的(非 IHttpController)端点。

你可以通过这里详细了解。

ASP.NET MVC 是微软官方提供的一个以 MVC 模式编写 ASP.NET Web 应用程序的框架,该框架提供了一个可以代替 ASP.NET Web 窗体的基于 MVC 的应用。在今年 3 月底,微软在 Apache 2.0 许可证下,开源了 ASP.NET MVC 4、ASP.NET Web API 和 ASP.NET Web Pages v2(Razor),源码发布在微软的开源项目托管网站 CodePlex 中。

Via Kiran’s Blog

25+ 个新的 HTML5 + CSS3 的网站实例

不管你怎么看,HTML5 + CSS3 是 Web 网站开发技术的趋势。本文介绍的这二十几个使用 HTML5 和 CSS3 技术开发的网页,看起来非常的新颖,富有创意。实用价值倒在其次,关键是感受一下 HTML5 和 CSS3 给我们带来的全新体验。

Adobe – The Expressive Web

OrangeSprocket

Har Du Det I Deg

HTC

Beercamp 2012

Suit Up or Die Magazine

Casey Britt

Lois Jeans

Glamour.biz

Bobadilium

Societe Generale

Whiteboard

Ghost Horses

FiftyThree

lend your leg

Marcus Thomas

KRYSTALRAE

Capitol Couture

Air Jordan 2012

Bikes aus Düsseldorf

Nature Valley Trail View

Pulpfingers

Discover Bagigia

Superlovers

Soleil Noir 2012

Guns N Roses

Source: http://designmodo.com/html5-css3-websites/

HTML5 能取代 Android 和 iOS 应用程序吗?

大量新生移动设备的兴起,改变了互联网的未来。在技术的发展上,HTML5会取代App应用吗?或者说能够在多大程度上取代呢?在HTML5规 范中,已经加入了相机、磁力罗盘、GPS信息的支持。很多新兴浏览器也已经开始支持这些新特性。能否用一个统一的HTML5来替代android和ios 并行开发的双重成本呢?以下译自Michael Mahemoff的一篇文章,详细分析了HTML5能否取代Android和iOS应用程序。

介绍

移动应用程序(App)和HTML5都是目前最火的技术,二者之间也有不少重叠之处。在移动设备浏览器里运行的html5的web页面,也可以重新打包 成不同平台上运行的app。目前很多浏览器都有很好的跨平台支持,(译注:firefox居然可以在android中使用和windows下同样的浏览器 内核),HTML5的web方案,对开发者来说更为方便。完成一次,即可多平台使用。但这确实可行吗?仍然有许多必要原因,使得开发者选择了app开发。 很明显,很多人已经在这么做了。本文将详细分析两种方案的优劣。

功能丰富

正方:App里可以开发出更丰富的功能

我们把移动功能分成两类。程序本身和程序与系统的结合。比如android里,加入widget图标或者通知提醒之类的。App对这两者都没问题。不用多说,这是肯定的。

反方:APP是挺强,但Web也正在迎头跟进

确实很多原生app实现的功能是HTML5望尘莫及的。不管你的web做的再牛,如果停留在一个没有摄像头支持的沙盒中,很多场合还是玩不转。幸运的 是,现在没有这样的沙盒限制了。如果你需要你的web照相片,可以做一个负责照像的app,再把你的web打包进这个应用里面。开源的PhoneGap框 架是这么干的。这样widget,手机提醒也都没问题了。

但这种混合开发的问题在于,增加了复杂性,而且不象传统web那样可以直接在 浏览器里运行。这个问题短时间内恐怕没辙。好在现在网络标准在不断的高速扩充,先进的浏览器也在一直跟进。Android 3.1已经支持camera了。iOS浏览器也支持WebSocket和设备方向检测了。

总得来说,移动设备在发展,而web也同样在快速变化。桌面浏览器本身,有5家主要浏览器开发商在改进现有标准,丰富新的功能。所以原生App在快速前进,同时,web也在缩小差距。

运行效率

正方:原生APP速度更快

原生APP没有瓶颈,而且可以直接调用GPU加速、使用多线程。

反方:现如今Web已经快多了,而且多数应用也用不着那么快。

这说法有点落伍了。Chrome发布之时带来的Javascript V8,给Web速度带来的飞跃。而现在,计算速度变得更快了:

图片处理引擎已经使用web加速。现在硬件加速也已经开始应用了。看看用上硬件加速的canvas(图表来源)

HTML5能取代Android和iOS应用程序吗?

要开发3D游戏的就不用抬杠了,但对于平而来说,新闻、邮件、时间管理、社交网络,这些用Web都够用了。试试Steve Souders的手机性能测试工具。 另外,越来越多的框架结合WebGL,可以发挥OpenGL的优势了。比如ImpactJS,帮助开发JS游戏。

HTML5能取代Android和iOS应用程序吗?

开发感受

正方:原生APP好写

原生APP使用强壮的程序语言(Java, Objective C, C++)。适合写复杂程序,经过历史验证,API丰富。在桌面环境可以方便的用模拟器测试。而Web程序的runtimes和乱七八糟的各路浏览器让人头大。

反方:一般都是Web更简单,特别是需要兼容不同设备的时候。

Web最初的功能只限于文档展示,而不是程序应用,貌似最近俩星期才有了JS。但有了JS后,web的世界马上就不一样了。更何况web不只是静止 的,HTML5,CSS3,EcmaScript Harmony(谁知道这是什么?)都给开发者极大帮助。你是喜欢C++,java, JavaScript,那你的个人爱好,也是基于你已经攒下的代码。但是现在没人能否认JavaScript也和前者站在同一擂台上。

浏览器/runtime的互不兼容(碎片),反过来看做APP也是一样。用Java写了Android app,然后又要面对iOS的Objective C。如果能写一个程序,马上能在Android和iOS上运行,多省事啊。这咱还没提WebOS, BlackBerry,Windows Mobile呢。当然,这是理论上的。要是想让程序在每个平台都跑得很漂亮,得做不少调试和妥协。这对很多原生APP也是一样的。不同OS版本,不同的设 备。。。

所谓的Web碎片化,一直都是如此。但好消息是现在已经有很多不错的解决办法。Modernizr库,用得好的话,可以帮你兼容一大批主流设备,不管是啥系统,哪个牌子的。看看我们2011年的Google IO演示。

用户体验

正方:原生APP更切合原有平台

操作感受的定义之一,就是用户希望在你的程序里,用与系统连贯统一的方式来操作。不同的平台,都有一些约定俗成的习惯。比如长按按钮会有啥反应。你不能指望用一套统一的HTML5 App去满足所有用户。

此外,整个平台的操作感受都由用平台自有的软件库协调。直接调用平台工具包就能直接免费获得完整支持。

反方:我们Web有自己的传统,你要特想做原有平台那种感觉的web,也一样能做出来

前面说了,Web开发的方式,是先做一个大体适合所有平台的版本,然后再针对不同平台不断改进。当这些改进主要是针对功能时,你可以选择几个你最关心的 平台做优化。类似于浏览器检测。技术论坛里的悲催技术员们,经常抱怨这事。太多不同的浏览器版本了。不过如果你优先关注两三种主流平台,是值得为他们多花 点时间做做优化。

web本来就有自己的操作感受。我们也可以说,不同的默认浏览器以及运行环境造就了独特的”Web感受”。从更广的角 度看,这本身就是一种用户公认的方式。此外,还有很多成功的案例并不遵循移动设备的原生操作习惯,人家也成功了。想想你最喜欢的手机游戏的界面?很多更传 统的app也是一样,比如Twitter客户端。

传播途径

正方:原生应用更容易接触客户

象Google Play和Apple Store这样的app发布机制这几年势不可挡,推动了整个移动行业。每个程序员都能在市场里发布自己的应用。用户都挤在市场里浏览,搜索,接受推荐。不仅如此,只要你的程序够好,现有用户的打分会帮助你说服更多新的客户。

反方:其实web才容易接触到客户

通过web找到内容,这是经过论证的可靠途径。利用URL,每一项发布的内容都有一个独立的地址,包括在网站上发布的应用程序。搜索引擎帮助发现内容, 其他网站提供链接,还有一些类似应用市场的分类网站。用户还可以邮件、短信、在社交网站分享你的链接。你的应用链接可以直接在不同设备上直接打开。

web上还没有一个统一的评分系统,但这个情况也在发生改变。往下看。。。

收费

正方:App收费:应天意,顺民生

“六岁孩子午饭时做app,$3一个,卖出几百万”。最近常听看到这样的新闻。各种大小厂商也跟着蜂拥而至,等着圈钱。应用商点帮开发商直接收费。最简单的办法,一次性收费。也有在app里再另行收费或者做订阅收费的,这帮助开发商赢得长期稳定的回报。

此外,传统网站的广告、赞助,在app里也同样适用。

反方:网站赚钱,从来都不是问题。现在机会还越来越多

Web能成为现在社会的推动力,有能力用多种方式取得回报,这是基本条件。虽然使用付费并不普遍。但SaaS的模式已经相当普及了。成功案例包括 Google Apps,37Signals的系列产品,各类邮件的收费版。另外,直接收费并不是web应用的唯一模式。广告、会员链接,赞助,其他产品服务的交叉推广 都是可选的模式。

看着能在应用市场里直接赚钱而眼红的Web开发商们,你们不能直接把你的URL发进市场,但是做一个浏览web的 app的壳子来连到自己的web上怎么样?现在市场中如果不说数以千计,至少也有上百的app这么干了。有些包装的好的,你甚至察觉不到他是一个web程 序。

以后应用市场会直接支持web程序吗?这个现在还不好说,但去年Google已经建了个Chrome web store。虽然还只能从桌面电脑放问,但这已经挑起了浏览器厂商的兴趣。现在还只是个初步概念,但看起来挺有前途。

结论

现在还看不出完胜的一方。有些应用适合做app,有一些适合用html5。目前的情况,原生APP肯定是一个很重要的选择。上面提到的混合式开发,可能是一个不错的妥协方案。能用web的时候用app调用web。web实现不了的功能用app开发。

如果你选择web方式,要在web标准和不断的改进上用心。web技术本身的优点就是能兼容大批不同的操作系统和设备。消极的看,你也可以这是碎片,但web就是一切通吃。

微软面向开发者公布 HTML5 Metro 开发技术指引

微软今天在博客编撰了一篇有关HTML5开发Metro应用的文章,介绍了HTML5的技术意义以及应用程序开发人员如何用它来创建一个新的Metro7应用。微软的IE10已经完整支持HTML5,对于用惯了Visual Studio 2010和Expression Web等工具的开发者来说用这种技术来进行开发可以让自己的程序更轻量且更广泛地支持其它平台。

http://i.msdn.microsoft.com/hh335062.Satrom_Figure2_hires(en-us,MSDN.10).jpg

查看:Building Apps with HTML5: What You Need to Know