The forthcoming HTML5 update to the 20 year old HyperText Markup Language promises to bring the “web” experience to a whole new level, allowing the browser to do more from both a visual and data perspective. Even though HTML5 is still a good distance away from being fully deployed, that hasn’t stopped many developers from pushing it to the limits.

Check out these amazing websites which really give you a good idea as to the capabilities of HTML5 as a programming language, doing things in your web browser that were once only possible in an external program or plugin. I’ve tested them in Chrome and they should all work in an HTML5 compliant browser such as Chrome, Firefox 4, Safari or IE9. They are demos and HTML5 is still a work in progress, so if you have problems viewing them you might want to try in another browser. Enjoy!

Multiple Window Ball

一个可以在多个窗口滚动的球，酷吧！

下面这个更酷，酷到我没话说~~~

Radiohead/HTML5 Mashup

既然来了，也许你也会想看一下：

• 2010/09/07 -- 10款基于Html的移动应用开发框架
• 2010/08/19 -- IE6中Iframe产生横向滚动条的解决办法
• 2010/10/18 -- 手机应用的HTML5 JavaScript框架

自创建以来, Jo 作为一个轻量级框架成功地进行了手机浏览器的测试, 新的桌面浏览器，甚至仪表板部件. Jo 用一个友好的OpenBSD使用协议. 没有信赖关系的JavaScript在压缩后刚刚超过8K.

Demo: http://joapp.com/
License: License Free

既然来了，也许你也会想看一下：

• 2010/09/07 -- 10款基于Html的移动应用开发框架
• 2011/03/23 -- Yii Framework 源码阅读笔记(述)
• 2011/01/13 -- 动开发者调查:2011年移动应用开发趋势
• 2011/01/04 -- 35+手机及Web应用开发图标集
• 2010/12/16 -- 神奇的Html5
• 2010/12/09 -- FLEAPHP运行在PHP5.3+上的报错的解决办法
• 2010/11/24 -- 我最近的困惑
• 2010/08/19 -- IE6中Iframe产生横向滚动条的解决办法

In the last two years the rapid growth and diffusion of touch devices such as iOS or Android based platforms has forced developers and web designers to rethink the model of their own webapps for the new “touch experience” introduced by the iPhone in 2007.

During this period several frameworks have been released to help web developers implement quickly applications for this kind of touch devices. Here is a collection of some useful frameworks to develop easily HTML-based webapps that will work on all popular smartphone and tablet touch platforms.

Titanium – Appcelerator Titanium is a free and open source framework to develop easily native mobile and desktop apps with web technologies. It provides developers with over 100 customizable UI controls for native tables, views, tabs, alerts, dialogs, buttons, support for geolocation, social networks and multimedia.

Titanium – Appcelerator 公司开发的 Titanium 是一个可以很容易地开发移动应用和Web应用的自由和开源的框架。它提供开发者以超过100个定制的UI控件。

Sencha Touch – Sencha Touch is a HTML5 mobile app framework that allows you to develop web apps that look and feel native on Apple iOS and Google Android touchscreen devices. It supports HTML5, CSS3, and Javascript for the highest level of power, flexibility, and optimization in developing your web applications.

Sencha Touch – Sencha Touch 是一个HTML5的移动应用框架，它允许你开发Web应用的外观和有苹果iOS和谷歌Android的触摸屏设备的原生感觉。它支持HTML5，CSS3,Javascript， 它可以非常灵活对你开发中的Web应用进行优化。

Sproutcore Touch – Sproutcore Touch is the touch edition of the Sproutcore framework for developing HTML 5 web applications that includes complete support for touch events and hardware acceleration on the iPad and iPhone.

Sproutcore Touch – Sproutcore Touch 是触摸版Sproutcore框架, 用于开发Html 5的Web应用, 它包括在IPAD和iPhone中对触摸事件和硬件加速的完全支持.

PhoneGap – PhoneGap is another interesting open source framework for building cross-platform mobile apps with web standars (HTML5, CSS3, JavaScript). This framework supports geolocation, vibration, accelerometer, camera, orientation change, magnetometer and other interesting features for iPhone, Android, Blackberry, Symbian and Palm.

PhoneGap – PhoneGap 是另一个有趣的开放源码框架建设的跨平台（HTML5的，对CSS3，JavaScript）的Web标准的移动应用。该框架支持geolocation, vibration, accelerometer, camera, orientation change，magnetometer和iPhone， Android， 黑莓, Symbian和Palm上其他有趣的功能。

Rhodes – Rhodes is another excellent open source framework to rapidly build native apps for all major smartphone operating systems (iOS, Windows Mobile, Symbian and Android). It supports GPS geolocation, PIM contact reading and writing, and camera image capture.

Rhodes – Rhodes 是另一个优秀的开源框架，可以迅速建立为所有主要智能手机操作系统（iOS, Windows Mobile, Symbian and Android）原生应用。它支持GPS geolocation, PIM contact reading 和 writing, 和 camera image capture.

iUI – iUI is a framework consisting of a JavaScript library, CSS, and images for developing advanced mobile webapps for iPhone and comparable/compatible devices.

iUI – iUI 是一个由JavaScript库，CSS和图像组成的框架。

iWebkit – iWebkit 5 is the new version of the popular ultralight framework for easily creating iPhone and iPod touch applications. The current release has new improved features and is really easy to understand in order to develop in just a few minutes your own web apps.

iWebkit – iWebkit 5 是超轻型的框架，可以轻松创建iPhone和iPod触摸应用。目前的版本有新的改进功能，是很容易理解，以让你在几分钟内开发出一个WebApps。

XUI – XUI is another javascript framework for building simple web applications for mobile devices. No much documentation available but it worth to try it for not complex apps.

XUI – XUI 是另一个为移动设备建立简单的Web应用程序的JavaScript框架。没有多少可用的文档，但如果应用不是很复杂, 它还是值得一试的。

jQPad – jQPad is an iPad web development framework jQuery based with some features for quickly developing simple iPad applications.

jQPad – jQPad 是一个iPad的Web开发框架, 基于jQuery的一些特性, 可以快速的开发简单的iPad应用.

jQuery Mobile – Closing I want to suggest you jQuery Mobile, the touch-optimized version of the popular jQuery framework for smartphones and tablets which will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms. The framework will support iOs, Android, Windows Phone, BlackBerry, Symbian, Palm webOS and other devices. The framework is under development and will be available in late 2010.

jQuery Mobile – 最后, 我向你推荐jQuery Mobile, 是流行的jQuery框架的智能手机和平板平台的触摸优化版, 它允许你设计一个高度定制的Web应用工作在所有流行的智能手机和平板平台.该框架将支持 iOs, Android, Windows Phone, BlackBerry, Symbian, Palm webOS和其他设备。该框架正在开发中，将于2010年底上市。

既然来了，也许你也会想看一下：

• 2010/10/18 -- 手机应用的HTML5 JavaScript框架
• 2010/08/19 -- IE6中Iframe产生横向滚动条的解决办法
• 2010/12/16 -- 神奇的Html5
• 2011/03/23 -- Yii Framework 源码阅读笔记(述)
• 2011/01/17 -- 10款顶级jQuery插件推荐
• 2011/01/13 -- 动开发者调查:2011年移动应用开发趋势
• 2011/01/04 -- 35+手机及Web应用开发图标集
• 2010/12/09 -- FLEAPHP运行在PHP5.3+上的报错的解决办法

最近在开发公司的新产品，在后台使用了大量的JQuery(jquery.layout, jquery.grid, jquery.ui等)，而今天要讲的问题就是在使用jquery.layout时遇到的，虽然使用了大量jquery插件，可是我并不想使用Ajax，因为目前产品还没有定型，只是在搭架子的时期，这时候应该是讲求快速实现及快速修改，所以并不打算在这个阶段使用Ajax。出于以上考虑，我选择了iframe，在FF中着实在让我小兴奋了一下，很精制的效果，配合jquery.ui使整个感觉很顺畅，完全达到我的预期。可是一到IE下，我就傻眼了，界面是常有的错位我就不提了，逐一修复后，发现出现了横向滚动条。

汗~~~根本不明白它是怎么来的。于是到网上查了一下，大致的原因是iframe中的页面有相对body的样式包含width:100%的元素。

同时也找到了解决的办法，第一和第二条比较常见（CSS解决：overflow-x: hidden;），也是我一开始想到的，而第三条是我使用的方法，在这里分享出来。

$(function(){
    if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("html").height())
        $("html").css("overflowY","scroll");
});

既然来了，也许你也会想看一下：

• 2010/09/07 -- 10款基于Html的移动应用开发框架
• 2010/12/16 -- 神奇的Html5
• 2011/01/17 -- 10款顶级jQuery插件推荐
• 2010/10/18 -- 手机应用的HTML5 JavaScript框架
• 2010/09/09 -- 最佳jQuery插件(LightBox篇)
• 2010/09/01 -- 常用于后台开发的jQuery插件