Javascript 渐进增强技巧

设计一个适合所有人的网站是一门真正的艺术，渐进式的增强实际上是我的一个咒语

所以我想知道，无论浏览器、操作系统、javascript、flash、屏幕分辨率、禁用的用户可访问性等如何，您使用了哪些最佳技巧使网站为所有人服务

（我知道很多关于javascript和浏览器技巧的知识，但我承认对flash等一无所知。）

编辑：我不是说1%的RIA网站没有javascript或flash就无法正常运行。我不是在问如何在没有js的情况下编写Google文档。我想知道人们为那些可以做一些很酷但实际上不需要做的网站做些什么

---

我会提供一些我自己的答案…

我尽量避免咒语，除了咒语世界是一个混乱的地方

我认为很多桌面功能将被网络功能取代，这将是一个棘手的过渡，最终会在浏览器中出现真正的应用程序。真正的应用程序意味着JavaScript或Flash或Silverlight，或Java或C#或编译成JavaScript的Objective-J

对我来说，唯一的诀窍就是找出那些不能有效使用这些应用程序的人和浏览器，并为他们提供一些替代内容

这包括检测手机和提供适当的内容。在iPhone上有许多网站因为太多的Flash和宽大的电脑显示器而崩溃

我不认为对于一个网站来说需要JavaScript是可以的，但是我认为对于一个应用程序来说是可以的。我不认为只提供960像素宽的页面是可以的。我不认为只提供Flash格式的视频是可以的。

检查您的统计数据（如果没有统计数据，请安装），并确定您的用户要去哪里以及他们实际在做什么

e、 g

1.）你的用户经常使用搜索是因为他们找不到东西吗？如果是这样，也许你可以让搜索工作更好

2.）您的404页面是否提供了一些快速选项来搜索相关术语或尝试“猜测”他们在寻找什么

3.）您的站点是否有站点地图，可以快速访问站点中有意义的部分

4.）如果所有其他方法都失败，用户是否有简单的方法联系您/技术支持以帮助他们找到他们需要的东西

5.）不确定你是否在你的网站上“卖”东西，但类似于你在任何一家主要的bricks n morter零售商拿到付款台时。。。他们问你是否找到了今天要找的所有东西。考虑提供一个用户可以提出建议的选项…也许你有一个尚未开发的市场等待被征服

6.）在可用性方面，一定要用IE（6,7,8）、Safari等工具浏览你的网站，并确保它在你关心的任何地方都能正常工作

7.）有一本很棒的书叫做“”，这是一本关于现实可用性的很好的资源。如果你还没有读过。。。去拿一份

---

此外，确保所有其他小事情都得到妥善处理。。。e、 g.您充分利用了缓存（JS、CSS、图像）

我在使用基于ajax的站点时使用的一些漂亮技巧：

1） 使用普通a标记编写整个页面和所有链接，该标记将转到禁用javascript的右侧页面，然后基于“rel=external”之类的内容“hijax”它们

2） 在javascript可能插入动态内容的任何地方添加具有替代内容的noscript标记

---

3） 使用javascript隐藏javascript将在DOM加载时控制的元素，而不是将它们隐藏在样式表中，然后使用javascript显示它们，因为如果关闭javascript，用户将永远看不到它们。

渐进增强并不复杂

考虑三个主要问题：

• 内容（HTML）
• 演示文稿（CSS）
• 行为（JS）

---

你从内容开始，通过关注点工作，确保每个新关注点不会妨碍前一个关注点或试图模仿另一个关注点；JavaScript不应该生成内容；CSS不应该处理行为；HTML不应该处理演示等等。

通常我所做的是在没有任何javascript的情况下编写整个网站。一旦这是功能，你可以“标记它”

也就是说，有一些很好的起点：

通常是良好的可访问性所必需的

您希望确保在HTML的开头附近有一个启用跳转链接的菜单。如果您不确定，请尝试使用链接或类似的基于文本或语音的浏览器运行您的网站。如果你感到恼火，你的可访问用户也会感到恼火

确保仅当图像有意义时才将alt标记应用于图像。仅出于设计目的而提供图像alt=”“是合法的。同样，设置title=”“将满足Firefox用户对悬停工具提示的需求，而不会打扰可访问的用户

---

希望这些简单的提示能有所帮助！无障碍是每个人的责任

好的，当涉及到web站点类型的应用程序时，最好是始终支持多种格式，某种程度上。。。HTML、XML、JSON、RSS、Atom（在有意义的地方）以及为什么其他人不。。。为此，您需要在服务器上使用干净的MVC架构。。。好吧，它不需要是MVC，但是让我们说，渲染层应该像面包一样哑，下面运行一个编写良好的业务逻辑。。。您的前端控制器应选择正确的格式返回以响应请求，然后您就可以。。。您检索/更新数据、分页等的整个业务逻辑只需实现一次，然后您只需将其呈现为HTML模板，或将其转换为JSON，或执行任何操作

现在的想法是，实现一个视图，它将返回坚如磐石的、语义清晰的HTML。。。做一个，t

<video>
    <source src="video.ogv" type="video/ogg" /><!-- OGG for Mozilla/Opera -->
    <source src="video.mp4" type="video/mp4" /><!-- h.264 for Apple/Google -->
    <object><!-- Fall back to Flash/h.264 for older browsers -->
            <!-- And in the event the UA can't handle any of those, all you can do is provide a link to the media -->
            <p><a href="video.ogv">Download the video</a>.</p>
    </object>
</video>