标签: progressive-enhancement

设计一个适合每个人的网站是一门真正的艺术,而Progressive Enhancement对我来说几乎是一个口头禅......

所以我想知道,无论浏览器,操作系统,javascript,闪存,屏幕分辨率,禁用用户可访问性等,您使用哪些最好的技巧来使网站适合所有人？

(我知道很多关于javascript和浏览器的技巧,但会承认对flash等无能为力)

编辑:我不是真的在谈论1%的RIA网站如果没有javascript或flash就无法运行.我不是问如何在没有js的情况下编写Google Docs.我想知道人们为那些可以做很酷的事情但实际上并不需要的网站所做的事情.

我会提供几个我自己的答案......

我正在努力在我的应用程序的客户端集成来自外部Web服务的数据.当服务不可用或关闭时,有人让我测试条件.在我们运行测试以查看服务如何降级时,任何人都有关于如何临时阻止此站点的任何提示？

对于那些好奇的我们正在测试虚拟地球,但谷歌地图,但这将适用于任何同样复杂的外部服务.

欢迎任何想法和建议

作为Progressive-Enhancement的忠实粉丝,我使用Modernizr来测试浏览器功能.如何使用Modernizr测试浏览器对AJAX的支持(特别是jQuery的AJAX函数)？

好的,我知道你的网站在禁用javascript时工作正常非常重要.

在我看来,开始考虑如何设计这样的网站的一种方法是在主页上检测javascript,如果它没有启用重定向到另一个版本的网站不javascript代码并使用纯HTML(如gmail)

我想到的另一种方法是,例如在网页上的对话框中考虑X(关闭按钮).如果在没有任何javascript干扰的情况下按下X会导致向服务器发送请求,而在服务器端我们在下次渲染页面时隐藏该对话框,并且我们还将javascript函数绑定到链接的onclick,如果是启用JavaScript后,它会立即隐藏对话框.

你觉得这怎么样？你会如何设计一个支持两者的网站？

是渐进增强和优雅降级基本上是一回事吗？

我目前正在为MooTools编写一个就地编辑脚本,我有点难以理解如何在没有JavaScript的情况下使其优雅地降级,同时还具有一些功能.我想以某种方式使用渐进增强.我不是在寻找代码,而是更多关于如何处理这种情况的概念.如果您有任何想法或知道任何优雅降级的编辑就地脚本,请分享.

我有一个简单的发货选项表单,当有人从下拉列表中选择一个新选项时,我使用javascript自动提交表单.

为了支持没有javascript的浏览器,还有一个提交表单的按钮.使用javascript隐藏此按钮.

但是,这意味着我的按钮在短时间内可见,并且可能会导致闪烁,因为其余内容将被重新格式化.

任何人都可以建议一种创建按钮的方法,使其开始隐藏,但只有在javascript不可用时才可见？例如,从display:none开始; 并神奇地改为显示:block; 当且仅当没有javascript.

我的两个最高优先级是渐进增强和内联编辑.我发现了渐进增强(DataTables)和内联编辑(jqGrid),但不是两者都有.支持jQuery UI主题会很不错,但优先级较低.

更新:这是我想象的解决方案类似的例子:

<table summary="A table full of example tabular data">
  <caption>My Table to Progressively Enhance</caption>
  <thead>
    <tr>
      <th id="colA">Column A</th>
      <th id="colB">Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="colA">foo</td>
      <td headers="colB">bar</td>
    </tr>
    <tr>
      <td headers="colA">argle</td>
      <td headers="colB">bargle</td>
    </tr>
  </tbody>
</table>

… insert jquery datatable stuff here …

<script type="text/javascript">
    progressivelyEnhanceMyTable();
</script>

该程序将表1中的所有记录复制到表2中,并写入文本文件.完成复制所有记录后,将删除记录,使table1为空,然后再添加新记录.我喜欢增强我的代码,例如:

1. 喜欢插入代码来验证记录是否为空,如果在复制文件时遇到问题,或者如果是EOF,我该怎么办？
2. 这段代码在form_load()中并在win form应用程序中运行,如果我运行程序exe,我不会出现什么形式？我想让这个程序像在Windows后面运行一样.只会出现错误或成功的消息框？
3. 解决方案,指导或参考方面的任何帮助都非常感谢.

先感谢您!

//create connection
 SqlConnection sqlConnection1 =
   new SqlConnection("Data Source=.\SQLEXPRESS;Database=F:\Test2.mdf;Integrated Security=True;User Instance=True");
//command insert into queries
  SqlCommand cmdCopy = new SqlCommand();
  cmdCopy.CommandType = System.Data.CommandType.Text;
  cmdCopy.CommandText = "INSERT INTO tblSend (ip, msg, date) SELECT ip, msg, date FROM tblOutbox";
  cmdCopy.Connection = sqlConnection1;
//insert into text file
  SqlCommand cmd = new SqlCommand();
  cmd.CommandType = CommandType.Text;
  cmd.CommandText = "SELECT * FROM tblOutbox";
  cmd.Connection = sqlConnection1;
  sqlConnection1.Open();
  StreamWriter tw = File.AppendText("c:\INMS.txt");
  SqlDataReader reader = cmd.ExecuteReader();
  tw.WriteLine("id, ip address, message, datetime"); …

我在<br>标题中使用标签(例如h1),并且作为我的渐进增强响应式设计的一部分(这是一个例外吗？) - 我想将它隐藏在较窄的视口中.

当然,CSS规则是:

h1 br {
    display: none;
}

但是在HTML中解决这个问题的正确方法是什么？

如果它是这样的,那么当br隐藏时,"heading"和"with"之间没有空格:

1) <h1>Example heading<br>with a break right thurr</h1>

那么以下语义是否正确？

2) <h1>Example heading <br>with a break right thurr</h1>

或者这个呢？

3) <h1>Example heading<br> with a break right thurr</h1>

我知道,非常挑剔,但我很好奇.

PS在这种情况下,绝对必须使用a,br因为单词"Example heading"比"break sturr"短 - 使用流体容器会在不需要的地方强行打破.

另外,正如David指出的那样,示例#2和#3都可以工作 - 但它们在语义上是否正确？虽然HTML标签周围的空格是语义的并且被忽略(这就是我们如何使标记很好阅读)......但是元素标签内的空格呢？他们应该在那里吗？

我理解渐进式增强是什么,我只是模糊了一些细节实际上将它拉下来.当然,那可能是因为我以错误的方式看待它.让我试着用一个假设来解释我的困难:

ASP.NET MVC站点.我有一个带有选项卡式导航的视图.每个标签用于电影类别/流派,显示该类别中电影的5-10个链接.电影数据是通过Netflix的Odata获得的.

我最初的想法是在单击每个选项卡时使用Ajax从正确的OData GET请求中提取和解析JSON.我如何提供非JavaScript版本的？它甚至可能吗？

对于更简单的请求,其中JSON不是必需的 - 例如,让用户登录系统 - 我看到我如何简单地设置cookie并基于它动态地更改页面以反映更改.但是如果我需要返回并解析JSON呢？我如何提供替代方案？

有人知道这两种文件的真正区别吗？我知道我无法将.JPG链接为.jpg,反之亦然,但没有正确的答案为何存在这样的事情.我也认识到,.JPG文件比.jpg小一点.这是一个错误或保存"photo.JPG"比"photo.jpg"更好吗？ //我交换文件名来知道,这个术语在这里不是问题.这些图片之间的差异只是增强.

两个论坛,也有这个问题,但没有可接受的答案:1.https: //in.answers.yahoo.com/question/index ? qid = 20070109235224AAQpacy 2. https://ubuntuforums.org/showthread.php?t = 1372695

通过Angular进行HTML回退的最佳方法是什么？

我需要这样的东西:

<span>{{angularText}} plain text</span>

如果用户没有启用JavaScript,则纯文本将是"备份"(可能由服务器生成).当然,如果用户启用了JavaScript,那么我显然不希望两者都显示.