混合式HTML（一）

Hybridizing HTML

November 8, 2007

 

 

我发现越来越多的web站点充斥着不可读和相互覆盖的文本，以及不可见或无法运行的组件。我不知道这是否是由于对AJAX组件正确性（validity）的过度信任，或CSS没有一直保持跨平台性，还是两者兼有之。

最近John Dvorak高调发表了评论，他坚信是AJAX让web程序变得十分差劲。事实上他说的并不是AJAX本身（他的读者很快就发现这一点了），而是众多AJAX组件上CSS/JavaScript/DHTML的用户界面（UI）。很多AJAX组件库过多地将注意力放在底层技术上而忽视了表达细节上的正确性。从根本上讲，是AJAX组件库用到的CSS和JavaScript出现了问题，而AJAX却遭到了抨击。

不管怎样，他的基本观点是任何人都可以向web页面中加入有趣的小玩意，但难就难在如何让它在任何机器上（无论何种操作系统/浏览器）始终保持可用（不受屏幕分辨率限制）并有用武之地？对于AJAX，阻力最小的一条路径并不是保证其正确运行。

我没有Dvorak那么笃定，但不断增多的AJAX应用和越来越多无法使用的站点似乎印证了这种观点。我所知道的是开发人员没有花时间在不同浏览器上测试其站点—显然他们是在假设：如果应用AJAX和CSS并在IE上运行成功，那么它在其他地方运行也不会出问题。连强大的GMail最近也发现了一个Bug，它会导致在装有FireFox的机器上出现文本重叠。

似乎我去的每一家旅游网站（航班、酒店和旅游综合信息）都只在IE浏览器上可用。如果使用FireFox登录这些站点，会发现时间选择器（当然是AJAX组件）可能不可见，或弹出的时候不是所有信息都可见。余下的组件也不一定可见，这时我才会想起来应该使用IE登录。

这些站点都由经验丰富的开发人员创建。他们大概都去参加了一个专为编写旅游网站的人举办的会议，并且大量讨论了AJAX组件如何无需多重化结构（multiple configurations）测试就能解决他们所有的问题。他们对此坚信不疑。

我一点没有指责他们的意思，当然也不想花时间在所有浏览器下验证它们。我只想“一次编写，到处运行”，而这也由于Java的自身利益成为了一个笑柄，虽然思想还是值得称道的，否则我们都必然要遭遇测试的梦魇。结果是它缩小了我们在web上尝试的范围。

编写能够跨平台工作的网站显然不是不可能的，因为有很多站点虽然和旅游站点一样复杂但仍旧在FireFox下乃至其他非IE浏览器下运行的很好，例如Google应用程序、Wells Fargo、Amazon等等。像TigerDirect一类的网站并未使用AJAX组件而仍然坚持用HTML也同样解决了问题。

我在我的网站上采用了极其保守且简单的解决方案。我尽量远离各种可能性并尝试让所有页面使用相同的简单布局和CSS。即使这样我也得试图让这种简单格式在各个地方都能以同一方式运行，当然它没有CSS许诺的那样简单。CSS虽在正确的方向上向前迈出了一步（不依赖于布局的独立内容），但总的来说它是失败的一笔，糟糕的设计以及为什么我不能创建并使用自己的简单标记（tag）？为何我必须到处使用DIV和类？以及为什么仅仅为了包含一个标准页眉和页脚就得用到PHP或其他技术？如果他们打算“修补”它，为何他们不将其简化和函数化？

我听说过CSS的优秀之处，也和现实抗争过。直到更好的东西出现后我才会说它不能解决问题，接着我们就得提出一个更好的解决方案。

我无论何时批评web、CSS、AJAX的任何一方面，都会有人从角落里跳出来说“你用的不对”或“你还是没理解”。未得到任何承认似乎还没有人真正懂得它。Dvorak进一步说道“除了极少的例外情况，AJAX天生就很差劲”。虽然这存在误解一些技术概念的可能，但他毕竟将问题联系起来了。

很多人认为问题不是出在技术本身，而是出在那些不称职的程序员身上（显然指的是那些创建了目前广泛部署使用的AJAX库的人）。以前我也多次听到过这种言论：一种技术被打上了“好”的标签只是因为有正确应用该技术的可能性（实际上不少讨论都似乎最后归结到这样一个断言上了）。这种说法的问题就出于真正的判断标准并不是可能性，而是易用性。如果一种技术能相对容易并正确地使用，那么更多的人就有能力快速掌握并应用该技术。而如果很难正确使用，那就将会产生大量糟糕的应用实例，最后结果是要么修复它，要么迫使人们另寻他路。

我觉得差的电子商务网站体验主要来自于CSS未被标准化以及被误用，同时开发人员笃信AJAX组件（主要在页面显示中使用CSS和JavaScript）会履行它们所宣称的，无须作跨浏览器的结果测试并将其交给混合架构（mix）即可。

而最基本的问题是：如何在不用浪费大量时间情况下始终显示内容？这个问题似乎是关于窗体的最大症结了，因为文本和图像还要看起来正常显示。（放轻松些，回溯至诞生初期，这些原本就是web该做的事情）

 

Flex窗体

Flex设计者们克服了很多困难来来实现更容易地创建Flex窗体—确切的说，是比创建与其等价的HTML更容易些。因为跨平台问题是靠Flash VM解决的，你无须了解窗体在不同浏览器下是如何工作的。在本文中，你会看到Flex窗体和窗体组件的威力，并告诉你如何轻松地将HTML融入到Flex窗体之中。了解了这些内容之后，下次创建窗体时你就会重新考虑使用CSS/JavaScript/AJAX了，特别是对于复杂窗体。

创建Flex用户界面有三种方法：

1，  亲自编写所有代码。对于此方法，你最好一开始就使用FlexBuilder的免费版来生成基本模版，然后再手动或用自动化脚本进行复制。

2，  使用FlexBuilder中的GUI生成器。它可以通过拖拽组件完成用户界面的创建。这种方法适用于大多数人，接着转到下一步：

3，  在FlexBuilder（提供了上下文帮助和自动完成）中手工编写界面。MXML布局语言可指导你如何方便地创建窗体布局，因此这与用HTML编写窗体布局相比降低了代码量。

另外，FlexBuilder能够生成检测是否安装Flash Player的代码（如果未安装则让用户安装、版本太老则更新之）。后面我会介绍如何使用JavaScript库来解决该问题。（未完待续）

 

（原文链接网址：http://www.artima.com/weblogs/viewpost.jsp?thread=213902）