必威体育下载克里斯蒂安·海尔曼

贴有“html”标签的帖子

Lynx不会对语义和HTML印象深刻。

星期三,11月16日,2011年

未受影响的山猫最近有很多关于标记的讨论,尤其是新的HTML5元素。有一个很大的呼哈哈当希希这个沃特沃想要从中删除时间元素HTML规格迪维亚和她在一起激起了很多感情”我们对语义价值的无意义追求“当然杰瑞米发表了他的观点,在对位文章中也是如此”追求语义价值“。

也许没有对位,也许有。坦率地说,我太忙了,没时间看那本书。也没什么关系,随着我越来越觉得我们真的需要考虑网络的现状以及它将如何发展。对我来说,对语义标记的价值缺乏理解只是一个正在发生的变化的征兆。

昨天的故事

关于语义值和正确使用HTML被那些已经存在了很长一段时间,并且看到浏览器以更多我们想要记住的方式失败的人们保持着活力。有效的标记和合理的结构是我们实现可维护性和理解周围事物的唯一机会。这在很久以前特别重要。我记得用猞猁上网冲浪。

lynx显示twitter.com

我还记得让林克斯在我的军火库里呆得更长一点。我用它来“查看”搜索引擎和辅助技术看到了什么。前者在当时是正确的(不再是,谷歌索引是否闪烁JavaScript实际上是这样使用hashbangs的构思错误的链接

后者在当时甚至是错误的。关于正确使用HTML5现在试图支持“像屏幕阅读器这样的辅助技术需要它”的论点。不,还不完全是这样.

快速构建,使它工作

我在几次谈话中提到过,当人们提到标记很重要、人们关心的美好的过去时,他们都在胡说八道。这些日子从来都不存在,当我们开始开发Web时,我们努力使事情工作起来。我们使用表格进行布局,NBSP对于空白,大量的br元素用于垂直空格和更多邪恶的东西。然后,我们使用间隔棒来填充和边缘,并开始关注什么时候CSS出来支援。原因不是我们想写得更干净HTML.原因是我们想让一切正常运转,因为我们得到的只是一个设计来建造,不是如何构造文档或构建内容的描述。从Web产品的外观开始,语义学已经在濒临灭绝的名单上。

少写,实现更多

这是现在的咒语。jquery的巨大成功是基于它的。JavaScript标准过于复杂和冗长,无法快速编写代码并快速更改。所以jquery人群分析了人们做的最多的事情——对DOM以及添加和删除类(以及后来的Ajax),使它变得非常简单和简短。不需要编写不起多大作用的代码。

同样的事情一次又一次地发生。较少的萨斯在中为不同的浏览器设置前缀hell和replicationCSS易于维护和客户端模板语言浏览器内部模板和客户端MVC制作HTML计算和编程逻辑的结果,而不是起点。

如果你看不到,为什么这么做?

很多什么的粉丝HTML语义学正因为看不见而兴奋。每当新的HTML元素得到了支持,在浏览器中有一个可视化的表示,这是一个很简单的方法。人们立即使用它。在大多数情况下,他们使用错误,但是他们使用了它(我看到了在图像周围使用的字段集和图例,因为它很漂亮,当然还可以用块引用

很多语义丰富的元素根本不存在。blockquotes的cite属性旨在通过告诉我们引用的来源来赋予引用的含义。首字母缩略词ABBR我们应该告诉人们TLA意思是——见鬼,我们甚至在会议和新闻发布会上都不这么做,所以为什么还要添加浏览器不向用户显示的信息呢?

这也是微格式的一个大问题。如果浏览器使地址可拖动到您的通讯簿或为Votelinks创建投票按钮,如果一个浏览器能够自动检测事件,并给你一个简单的界面来添加到你的日历中,那么你就不用费心去使用它们了。事实上,我们有几个成功的故事要讲,做了很多工作。

大书咏叹调

当我们谈论可访问性时,它会变得非常令人沮丧。当我们坚持保持简单并遵循人类的逻辑时,为具有各种能力的人提供Web文档应该是容易的。

它应该,但事实并非如此。通过保持事情非常简单,我们可以接触到更多的人,但我们也可以剥夺一大群伟大的界面。每当我们在浏览器中做一些疯狂的事情,并且谈论到让它们可以访问时,走出去的路就是神话。咏叹调.

如果你潜入咏叹调你很快就会意识到这是一项很大的工作,很难理解概念,最重要的是许多要写入的代码。而不是将可访问性作为HTML5,我们必须处理两个并行标准。一种是快速实现目标,将Web从文档移动到应用程序,另一种是让所有人都可以使用它。这不是个好地方。当你从一开始就接受它时,可访问性就发生了。在这个过程的最后,没有什么神奇的子弹层可以让事情运转起来。

那么呢?HTML语义学呢?

你知道吗?没有解决所有问题的办法。原因并不是因为技术的进步,或者人们不关心用户,或者我们的标准阻碍了我们,或者其他类似的事情。原因是“写一次,“部署到任何地方”简直是胡说八道。到目前为止,使Web工作并成为令人惊叹的工作市场的一件事是灵活性。我们都很高兴,您可以通过许多不同的方式为我们的最终用户提供类似的体验。那么,我们为什么要在开发范围的一个方面或另一个方面进行讨论呢?

这个怎么betway体育官方网样?

  • 如果你亲手写一份文件,使用您可以添加的所有语义。这是你的笔迹,你的代码就是你的诗,人们从你所做的事情中学习。必威体育下载
  • 如果您需要编写一个核心应用程序,而每个字节都是一个囚徒,那么尝试使用语义,但要遵循最终的交付速度目标。尽管如此,请确保告诉人们您的代码是转换和优化的最终结果,而不是供人类查看。
  • 不管你做什么——当你可以使用新技术的时候——都要使用它。
  • 请记住,网络不是您的浏览器和计算机——使用前沿技术时,为其他浏览器添加回退。当其他人追上来的时候,你就不必修改你的代码了!
  • 标记和Web代码的主要焦点并不是为边缘应用程序优化的,而是让人们更容易维护它。如果人们能看到HTML发生了什么事——赢。如果只与JS一起工作的是JS-更好。
  • 更多的加价是增加价值的加价,而不是犯罪。论证强大比B更糟,因为这意味着在服务器上执行gzip时,更多的代码和较慢的加载页是不相关的。
  • 我们只能逃避新的鸡和蛋的问题HTML当我们使用它的时候。马上,如果您在浏览器中请求对新元素的支持,大多数供应商的答案是没有人使用它们,那么为什么要麻烦呢?当你问人们为什么不使用它们时,他们会告诉你,因为浏览器不支持它们。我们中的一个必须开始改变这一点。

要炸的大鱼

就我个人而言,我现在更关注那些令我担心的网络问题,列出它们可能很有趣。

  • 长寿之死–我一直喜欢这样一个事实:我可以在网上找到一些东西,然后再回到它上面。这种情况已经不复存在了。我的很多旧书签都死了,我的推特在一定数量后进入数据涅盘,我无法再访问它们,你为公司写的代码在你离开后不久将完全不同。这不是我想要的网络。它是娱乐和档案的完美结合,“实时网络”真的把这搞得一团糟。
  • 高保真网站–我记得当闪光灯使我们的500兆赫机器闪光时。现在,几乎每一个我尝试过的酷炫的新网站都会对我的双核MacBook这样做。在不久的将来,我可以看到一些网页告诉我,我的视频卡不够好,不能享受它们。这就是我从未在电脑上玩游戏的原因。让我们换一种明智的方式来使用新的炫酷的。
  • 身份–我们现在正在网络上散播自己,留下了很多过时和错误的个人资料。你在网络上的身份正在成为一个非常奇怪的概念,我现在所做的一些工作正试图把它重新变成一种更容易维护的时尚。
  • 开放式网络今天,美国在辩论像中国这样审查互联网是否是个好主意,叙利亚和其他国家也有。这吓坏了我。我从网络上开始,因为它没有广播或电视那么规范,也没有那么商业化。我们不要放弃自由
  • 制造者网络网络无处不在,我们把它作为日常工作和娱乐的一部分。最近我发现,尽管网络的创造性部分正在消亡,人们正在消费它,而不是使用和丰富它。这个,再一次,吓坏我了。我们不应该成为虚伪的懒汉。

语义学就像美妙的散文。你用它们来提供一个令人愉快的产品。人们不因写书而出名。他们以充满他们的东西而闻名。如果我们不断地把有结构的东西放到网络上,并且在更复杂的显示产品上做得更好,我们将为未来而构建。如果我们指责别人做错事,我们就浪费时间。

有评论吗?给他们在Google+上脸谱网

2011年国家地理摄影大赛中吉米·托希尔拍摄的林克斯照片

生锈——我们需要新的最佳实践来适应不同的发展世界。

星期一,8月15日,2011年

好消息是:我们,那些推广开放网络标准的人,赢了!今天的网络使用越来越少的封闭技术和插件HTML,CSS和JavaScript是用来创建大量优秀Web体验的工具。

例如,几乎没有人使用flash作为简单的图片库,越来越多的公司向我们以及世界宣传自己“支持Web标准”和“使用开放技术”。

当然,有很多人在说假话,正如布鲁斯·劳森所说,我们得到了HTML5,空洞的演示和忘记基础知识.布鲁斯指出很多HTML5演示没有任何语义标记,甚至不要创建工作链接,也不要有很多我们在90年代和千年之初在Flash隧道中看到的特性。

在这场争论的另一方面,有几个人一直告诉我,他们正在写博客文章“为什么语义标记和javascript回退不再重要”。

我认为有一个快乐的中间地带有待发现,这主要意味着我们需要了解以下内容:作为一个Web开发人员,您所做的工作在很大程度上取决于我们的工作所使用的媒介.

多年来,我们如何使用互联网已经发生了变化,如果我们不想被视为进步的敌人,我们需要改变我们的最佳实践,并在应用它们时给予它们更多的灵活性。

就像一个在每一个浏览器中查找和工作相同的网站,意味着要迎合最低的共同点,而不是巧妙地使用我们的平台,“以某种方式使用的一堆技术”限制了我们接触那些刚开始在网上工作并只想完成一些工作的人。

我们的最佳实践真的植根于现实吗?

改变最佳实践?这怎么可能?好,首先,我认为我们所宣扬的很多是货物崇拜而不是基于真实的事情。我们告诉人们的许多“在网络上工作是绝对必要的”的事情是不需要的,而且许多关于语义标记有用性的激动人心的解释实际上并不是基于事实的。作为最佳实践,我们所做的很多工作都是为我们而做的,不适用于最终用户或我们使用的技术。但以后会更多。

回首往事(不生气)

我们是如何到达现在的位置的,新建的Showcase网站违反了最简单的概念,例如为图像提供可选文本或使用结构化的HTML而不是几个空的沙发?

为了了解我们是如何陷入这必威体育下载种混乱的,了解我们过去所做的事情是很重要的。许多演讲、书籍和帖子描绘了一幅勇敢的网络标准新世界的图景,厚颜无耻地在封闭技术的丛林中开辟了一条通向光明未来的道路。这与实际情况相差甚远。如果我们诚实,我们所做的很多事情都是为了让事情变得有意义,然后试图找到一种方法让我们所做的事情可持续发展。最后一步是语义。当我听到赞扬波什—简单的旧语义HTML就像我们过去建造东西的方式一样,随着时间的推移,我们忘记了这项技能,我不得不窃笑。我们没有这样做——至少在生产中没有。

卑微的开端-HTMLCGI

很久以前,HTML用于表示,行为和结构

起初没有插件,也没有javascript。我们有HTML图像和人们已经犯下的最大错误是把文本显示为没有任何可选文本的图像。这意味着只有文本的浏览器(仍在使用中)和那些连接速度较慢的浏览器存在短端。交互被定义为点击链接和提交表单。

我们已经开始尝试使用帧来加快速度。例如,我们保留了一个“粘性导航”,只加载没有任何菜单的内容页。这是为了提高性能而打破诸如书签等基本浏览器功能的开始。我记得我曾用cookies存储页面状态,并在随后的访问中相应地重新编写框架集。这只为当前用户修复了它——再也不可能向其他用户发送链接了。但是页面加载得更快。

布局实现于HTML-水平线,之前元素,很多和桌子。最重要的是让它在所有浏览器中都看起来正确,而不是HTML真的。

然而,我们告诉人们的是,这是一个简单的时代,HTML它的语义价值真的很重要。我记得不一样。

DHTML天(1)

当Javascript得到支持时,我们就开始正常工作了。整个菜单都是用document.write()。我们使用了弹出窗口,其中动态写入了框架(例如图像库):

Javascript允许更丰富的交互和更多的错误

我们甚至开始检查使用的是哪种浏览器,在更明智的情况下,提供了不同的体验。在考虑较少的解决方案中,我们只是告诉人们“这个网站需要Internet Explorer 4才能工作”。

我们还开始用JavaScript隐藏和显示内容。有时候我们用JS写出来的,并没有给文本浏览器(或者那些通过代理默认关闭JS的公司)提供任何内容或太多内容而不太关心结构。

什么时候?SEO开始重要了,我们也用了无脚本标签提供回退文本和链接——大多数时候都是关键词而不是意义。

DHTML天(2)

什么时候?CSS得到支持的东西真的起飞了——我们不仅可以创造动态的东西,展示和隐藏它们,而且还可以真正地去城镇移动,旋转的,动画制作和堆叠它们。我们做到了。DHTML图书馆网站上有数百个效果菜单、图像滑块和旋转按钮等:

JavaScript和CSS让我们有机会构建许多闪亮的东西

大多数行为都是用javascript完成的,但我们也开始使用CSS悬停伪选择器用于构建“仅限于CSS的多级下拉菜单”以及其他没有鼠标就无法使用的东西。

当时正是DHTML几乎所有脚本的第一行都在检查IE和所有文件或Netscape文件层.计算机的速度也迫使我们经历各种危险的黑客和诡计(危险的是,他们使维护非常困难,因为黑客往往没有得到记录),使事情看起来很顺利。

福音书(根据塞尔德曼)

塞尔德曼之书这就是我们要传达的信息:让我们停止尝试为浏览器解决问题,跳过障碍,让我们的产品在一个不值得信任的环境中工作,转而依赖标准。此消息的主要工具是分离技术:

为了使Web开发界保持清醒,我们声称HTML是一种结构,CSS是表示,JS是行为

HTML是结构,CSS是为了视觉上的外观和感觉,而javascript是为了行为。如果我们把这些东西分开,然后我们有了一个好的易于维护的Web产品,为每个人工作,干净的扩展和工作。

这就是我们的想法,我们创造了一个术语不引人注目的javascript(我记得写这门课很有趣)然后DOM脚本(使用DOM编写黄蜂工作组的脚本杰瑞米基思的和我的书举例说明如何使用它)。

今日国家

如今,我们似乎已经回到了混合和匹配发展关注点和层次的世界:

今天,看来,所有的分离层被混合并再次匹配。

强大的力量带来了巨大的责任感,而现在我感觉到后者在我们的雷达上是非常低的,因为和我们拥有的酷的新东西一起玩太有趣了。我们的移动电话有非常快的处理器,我们有能够进行3D动画和硬件加速的超音速javascript引擎。CSS动画。这使得人们很难对语义值感到兴奋。

在这个新的Web技术世界中,几乎所有栈中的技术都被淘汰了,分离变得更加困难。什么是好帆布没有任何脚本?我们应该在CSS还是用JavaScript?动画是行为还是表现?仅用于视觉效果的元素是否应位于HTML或者用javascript生成,或者用:after和:before生成CSS

这些天我们在客户身上做的比过去多得多。是时候我们在最佳实践中给予客户更多的信任了。对,旧的浏览器不太可能很快就消失(这有时是有意的,例如微软不提供对Windows的IE升级XP-很快Vista–用户

关注点与Web开发人员的形象

在其意义和方法上,塞尔德曼首先解释的分离仍然是一个令人难以置信的好主意——不同技术分离背后的思想是伟大的。一些公司在培训中非常认同这一概念,例如雅虎甚至进一步将其称为“可理解”。关注点分离“而不是发展的层次。

这种微妙的差异也部分地说明了为什么这个伟大的想法不总是在现实产品中实现:你需要了解不同的技术是如何工作的,以及如何正确地编写它们。本质上,你想让一个拥有不同专业主题的团队一起构建一个令人兴奋的产品。

事实上,尽管Web开发仍然被视为任何一个经过培训的开发人员都可以做的事情,或者当您雇佣一个专门的Web开发团队时,他们被认为是全面的专家,不允许专注于语义,CSS或JavaScript。

这就是为什么最终的Web产品没有清晰的分离的主要原因。在大多数情况下,开发人员意识到他们本可以做得更好,但他们不得不赶时间或者使用一种他们不太关心的技术。如果你必须调试和优化CSS由Java开发人员编写,你就会明白我的意思。

Web标准展示和消耗

每当我们称赞一个新产品以正确的方式使用网络标准时,它就不是一个大产品。它几乎不是企业框架或细胞质雄性不育.而且,在很多情况下,它的构建实际上是为了强调使用Web标准,而不是简化构建Web产品的过程。

以最有可能成为突破CSS在社区看来:CSS禅宗花园.花园很简单XHTML文件,语义正确,但已经有很多id和类作为要应用的句柄CSS规则。它的工作是通过分离外观和感觉来显示你可以轻松地重新设计一个网站,使它看起来(以及稍后对用户的反应)完全不同于一个案例到另一个案例。

这一切进展得非常顺利,直到我们对图像替换的可能性感到兴奋。后来提交到花园的材料中有大量的背景图片文本,这很讽刺,因为最初的论点是所有的内容都应该在HTML.

在现实世界中,然而,我们从来没有固定过HTML要玩的文档–我们细胞质雄性不育为我们创建网页,一切都在不断变化。你不能控制菜单元素的数量,你不能控制文本的数量,您将无法“简单地将类添加到元素”以赋予它一些额外的功能。现在是时候让我们明白,我们可以通过展示网站和演示来激发灵感了,但我们确实不帮助人们开发网站,也不反对“每个人都可以做前端”的概念。这不是硬代码”。

当我们乘坐喷气式滑雪板时,没有人想知道海洋的深度和组成。

现在,“最佳实践Web开发”讨论,演示和教程都是非常自我参照的。我们同同同一个人谈论同一个主题,并声称人们在使用语义的同时,网络在世界范围内很小的一部分市场上与围墙花园开发和本地移动开发作斗争。

人们高兴地说他们“只为WebKit构建”,因为这是“最好、最快、最稳定的浏览器”。如果你没有合适的浏览器和操作系统,人们可以看到一个展示网站完全失败。

我们开始退到各自的专家领域,并在专家会议上发言。在设计会议上教授的很多东西与在性能会议上听到的完全相反。我们在抽象层之上构建抽象层,以解决浏览器问题,并在会议上发布数十个“奇迹”库和脚本,而不考虑是否有人会使用它们。

速度仍然是我们讨论的主要问题。如何在脚本加载程序上减少20毫秒的时间?如何使动画由30帧改为50帧?

开发人员新市场的最佳实践

我最喜欢的例子是参加Google IO可访问性谈话。大约一个小时我们学会了如何把一个元素变成一个按钮并保持它的可访问性。.没有人提到我们为什么不使用纽扣作业的元素。在那次谈话中有很多很好的信息,但是当我们模拟浏览器提供给我们的JS和CSS.

我们现在拥有的新一代开发人员对技术非常兴奋。我们,“最佳实践”的教育者和解释者都被浏览器多年来的失望所玷污。jquery和其他环境传播“写更少,“实现更多”是成功的主要目标。我们告诉人们的大部分是“加上这个和那个来赋予事物意义”,当他们问我们“为什么?”我们必须想出谎言,例如,现在没有一个浏览器关心大纲算法。

使用Web标准的唯一真正好处

使用Web标准首先意味着一件事:提供一个干净的专业工作。您没有为浏览器编写干净的标记,你不会为最终用户写的。你为从你手中接过这份工作的人写的。就像你应该在简历中使用好的语法,而不是用蜡笔写它一样,当你留下一堆“有用”的东西时,你不能指望维护代码的人会尊重你。

这就是我们需要努力让新开发人员理解的。这是一种为提供一份干净的工作而自豪的态度。不是使用最新的技术和追求光泽。对于我们自己,我们必须理解,唯一真正关心我们所钟爱的标准和关注点分离的人是我们——正如我们所认为的,可维护性,而不是快速部署和持续的代码迭代。网络不是代码——网络是一种媒介,我们使用适合现有目的的技术组合,为最终用户提供出色的体验。

不带闪光灯的幻灯片共享嵌入

星期五,11月12日,2010年

我以前说过几次,但我爱幻灯片.对于像我这样的专业演讲者来说,这是一个很好的方式来分享我的资料,并从允许他们重复使用的人那里得到反馈。有些人抱怨的是嵌入的是基于flash的,我们都知道flash会让小猫哭,忍者也看得见,所以我们不能这样做。

不过别担心,因为有出路。假设您在Slideshare上的演示文稿http://www.slideshare.net/cheilmann/reasons-to-be-javely-fronteers-2010
快乐的理由-摄影2010年的前沿人物

只需在用户名前添加a/mobile/即可查看手机版哪一个是有点HTML

按照片滑动共享手机

你可以在iFrame中加入这个功能,但是移动版的Chrome可能有点压倒性。不用担心,开放的网络可以解决这个问题。查看源代码,你找到了杰森包含所有信息的对象:

这里有趣的部分是BaseLeDelURL以及幻灯片总数.要获得不同的图像,只需将-slide-n.jpg添加到BaseLeDelURL其中n是幻灯片的编号。

把这个放在一起,添加一些样式和一些玉三对于功能,我现在可以向您展示可嵌入的HTML版本:

http://icant.co.uk/slidesharehtml只需输入统一资源定位地址转换幻灯片。这个转换器的源代码在GitHub上所以你可以自己主持。

查看中的流程以下屏幕放映

我喜欢开放网络技术和聪明的转换器,是吗?

为什么我不用HTML编写幻灯片

星期二,11月2日,2010年

在2010年的前沿趋势会议上,Tantek_elik花了他最后几分钟的时间HTML5夸夸其谈HTML作为一种很好的演示格式,并敦促人们使用开放式网络的好处HTML滑动系统而不是闪存或PDF.其他演示者现在写的太棒了CSS3型驱动幻灯片放映并构建自己的脚本以显示其演示文稿。我可以,但我没有——这就是为什么。

演示文稿不是Web文档

我完全赞成开放网络(见鬼,我刚接受了一份工作,宣传它),但我不写幻灯片HTML我真的不认为它是一个很好的格式,像一个演讲。以下是我的理由:

  • 你在屏幕上看到的不是演示文稿–许多演讲者的笔记在主题演讲或PowerPoint中以演示者视图显示,而不是向观众显示,而是显示在不同的屏幕上。可能有办法做到这一点CSS和媒体查询,但我还没有找到一个使用支持这一要求的Web标准的幻灯片系统。如果你只是看了你的幻灯片,你最好别在舞台上。
  • 添加图像还应允许您编辑它们–我发现自己一直在将照片拖到主题演讲中,裁剪和调整它们的大小。这可以用CSS还有javascript,但是我还没有看到一个幻灯片系统有这样的功能。
  • 演示文稿需要按不同的分辨率缩放–我遇到了从800×600到1280×1024的任何东西。幻灯片包会调整字体大小,并按我的预期方式保留字体-HTML还没有。再一次,我确信SVG公司,画布和巧妙的诡计这可以很容易做到,但请告诉我一个系统,认为这一点。
  • 演示文稿必须是单一的,可打印文件–为喜欢在纸上编辑或阅读的人邮寄和打印演示文稿。使用PDFⅠ可以做到。例如,当您有带签名翻译的会议时,需要打印输出。因为符号翻译不是逐字翻译,而是通过意义翻译句子,所以他们知道接下来会发生什么是很重要的。除非HTML幻灯片系统也支持良好的打印样式这是不可能的
  • HTML无法嵌入幻灯片并调整其大小–使用SlideShare,人们可以将我的幻灯片嵌入到他们的博客文章或文章中,人们可以在上下文中观看它们。你可以把HTMLiframe中的幻灯片,但它们不会调整大小,而是获得巨大的滚动条
  • 幻灯片可能需要与音频同步才能有意义–除了提供Slideshare嵌入外,我通常还会录制我的演讲。我也做过幻灯片放映,但是Slideshare上的编辑还不够好。这是我们可以写的东西HTML幻灯片–一个带有音频的同步工具,可以自动向前移动。
  • 幻灯片需要脱机工作–许多会议都没有无线网络,人们想在火车上阅读幻灯片。如果您使用其他地方托管的第三方字体或图像,或者您链接到现场演示,这是非常令人沮丧的。不过,您可以使用离线存储。
  • 幻灯片应该在没有计算机和浏览器的情况下工作–许多手动滚动的幻灯片平台需要演示者设置,操作系统或某个浏览器的夜间构建,并不是以渐进式增强的方式编写的,因为它们是供个人使用的。当人们试图在自己的电脑上观看,却看不到效果或演示说明这实际上是开放网络技术的坏广告。
  • 幻灯片组具有固定的布局和字体–在幻灯片中,浏览器渲染或弹性设计效果的差异并不受欢迎–所以为什么要选择一种在这方面表现出色的技术?

演示文稿不仅仅是网络上的一个文档,除非我能在HTML正如我在主题演讲中所做的那样,我不会切换。

争论的理由HTML滑动甲板

Tantek提到的“为网络做正确的事情”以外的主要论点是,你的幻灯片PDF或者在网上找不到Flash电影。这不是真的——谷歌很乐意索引PDF以及flash和slideshare创建幻灯片的副本作为SEO原因。

另一个更切题的论点是HTML文档易于编辑,重复使用和更新。在主题演讲和PowerPoint中的幻灯片平台上进行协作可能会导致操作系统和软件版本之间出现令人恼火的不一致。

我的混合方法

就个人而言,我对这个问题采用了混合方法。我把我的演示文稿写成笔记,然后用它们创建一个幻灯片。我解释了这批(以及上述反对HTML幻灯片)开发人员福音手册的介绍章节


当我写一个新的幻灯片时,我从一个文本编辑器开始。我写了我演讲的故事,我遵循的规则和写在线文章.这样我可以确定一些事情:

  • 我知道我想要涵盖的内容和范围–这也允许我在演讲时遵守时间限制。
  • 我有高度可移植格式的信息供人们事后阅读。–将其转换为HTML以后写这些笔记。
  • 我已经知道要显示的所有链接,并且可以创建易于查找的版本–例如,在美味的.
  • 我不会对视觉效果着迷。–当你使用好的演示软件时,这是一个很大的危险。

对,这是复制工作,但我认为这是值得的——毕竟SlideShare是一个幻灯片平台社区——你已经有了一个被俘虏的观众,而不是希望GoogleBot出现,并认为你比同一主题的其他资源更好。

目录脚本——我的宿敌

星期三,1月6日,2010年

有一件事我很喜欢——让我重新表述一下——我非常喜欢微软Word,那就是你可以从一个文档中生成一个目录。Word将遍历标题并创建一个嵌套总有机碳从他们那里为你:

向Word文档添加目录

Microsoft Word生成的目录。

现在,我总是喜欢为我写的文件做这件事HTML,同样,但是用手维护它们是一种痛苦。我通常先写我的文件大纲:


              
              身份证件=
              “可爱”
              >
             互联网上可爱的东西>

              
              身份证件=
              “兔子”
              >
             兔子>

              
              身份证件=
              “小狗”
              >
             小狗>

              
              身份证件=
              “实验室”
              >
             拉布拉多犬>

              
              身份证件=
              “阿尔萨斯人”
              >
             阿尔萨斯人>

              
              身份证件=
              “紧身衣”
              >
             紧身衣>

              
              身份证件=
              “检索器”
              >
             猎犬>

              
              身份证件=
              “小猫”
              >
             小猫>

              
              身份证件=
              沙鼠
              >
             沙土鼠>

              
              身份证件=
              “小鸭”
              >
             小鸭>

互联网上可爱的东西

兔子

小狗

拉布拉多犬

阿尔萨斯人

紧身衣

猎犬

小猫

沙土鼠

小鸭

然后我收集那些,复制并粘贴它们,然后使用搜索和替换来打开N号要将链接和ID链接到片段标识符,请执行以下操作:


             
              >
             
             
             HREF=
             “可爱”
             >
            互联网上可爱的东西>>

             
              >
             
             
             HREF=
             “兔”
             >
            兔子>>

             
              >
             
             
             HREF=
             “小狗”
             >
            小狗>>

             
              >
             
             
             HREF=
             “实验室”
             >
            拉布拉多犬>>

             
              >
             
             
             HREF=
             “阿尔萨斯人”
             >
            阿尔萨斯人>>

             
              >
             
             
             HREF=
             “甲壳虫”
             >
            紧身衣>>

             
              >
             
             
             HREF=
             “猎犬”
             >
            猎犬>>

             
              >
             
             
             HREF=
             “小猫”
             >
            小猫>>

             
              >
             
             
             HREF=
             “沙鼠”
             >
            沙土鼠>>

             
              >
             
             
             HREF=
             “鸭子”
             >
            小鸭>>
              
              身份证件=
              “可爱”
              >
             互联网上可爱的东西>

              
              身份证件=
              “兔子”
              >
             兔子>

              
              身份证件=
              “小狗”
              >
             小狗>

              
              身份证件=
              “实验室”
              >
             拉布拉多犬>

              
              身份证件=
              “阿尔萨斯人”
              >
             阿尔萨斯人>

              
              身份证件=
              “紧身衣”
              >
             紧身衣>

              
              身份证件=
              “检索器”
              >
             猎犬>

              
              身份证件=
              “小猫”
              >
             小猫>

              
              身份证件=
              沙鼠
              >
             沙土鼠>

              
              身份证件=
              “小鸭”
              >
             小鸭>
  • 互联网上可爱的东西
  • 兔子
  • 小狗
  • 拉布拉多犬
  • 阿尔萨斯人
  • 紧身衣
  • 猎犬
  • 小猫
  • 沙土鼠
  • 小鸭
  • 互联网上可爱的东西

    兔子

    小狗

    拉布拉多犬

    阿尔萨斯人

    紧身衣

    猎犬

    小猫

    沙土鼠

    小鸭

    然后我需要查看标题的重量和顺序,并添加总有机碳相应地列出。

    
                 
                  >
                 
      
                 
                  >
                 
                 
                 HREF=
                 “可爱”
                 >
                互联网上可爱的东西>
        
                 
                  >
                 
          
                 
                  >
                 
                 
                 HREF=
                 “兔”
                 >
                兔子>>
          
                 
                  >
                 
                 
                 HREF=
                 “小狗”
                 >
                小狗>
            
                 
                  >
                 
              
                 
                  >
                 
                 
                 HREF=
                 “实验室”
                 >
                拉布拉多犬>>
              
                 
                  >
                 
                 
                 HREF=
                 “阿尔萨斯人”
                 >
                阿尔萨斯人>>
              
                 
                  >
                 
                 
                 HREF=
                 “甲壳虫”
                 >
                紧身衣>>
              
                 
                  >
                 
                 
                 HREF=
                 “猎犬”
                 >
                猎犬>>
            >
          >
          
                 
                  >
                 
                 
                 HREF=
                 “小猫”
                 >
                小猫>>
          
                 
                  >
                 
                 
                 HREF=
                 “沙鼠”
                 >
                沙土鼠>>
          
                 
                  >
                 
                 
                 HREF=
                 “鸭子”
                 >
                小鸭>>
        >
      >
    >
                  
                  身份证件=
                  “可爱”
                  >
                 互联网上可爱的东西>
    
                  
                  身份证件=
                  “兔子”
                  >
                 兔子>
    
                  
                  身份证件=
                  “小狗”
                  >
                 小狗>
    
                  
                  身份证件=
                  “实验室”
                  >
                 拉布拉多犬>
    
                  
                  身份证件=
                  “阿尔萨斯人”
                  >
                 阿尔萨斯人>
    
                  
                  身份证件=
                  “紧身衣”
                  >
                 紧身衣>
    
                  
                  身份证件=
                  “检索器”
                  >
                 猎犬>
    
                  
                  身份证件=
                  “小猫”
                  >
                 小猫>
    
                  
                  身份证件=
                  沙鼠
                  >
                 沙土鼠>
    
                  
                  身份证件=
                  “小鸭”
                  >
                 小鸭>

    互联网上可爱的东西

    兔子

    小狗

    拉布拉多犬

    阿尔萨斯人

    紧身衣

    猎犬

    小猫

    沙土鼠

    小鸭

    现在,自动为我做这件事不是很好吗?在javascript和DOM事实上,这是一个比乍一看更棘手的问题DOM脚本编写研讨会)。

    以下是一些需要考虑的问题:

    • 你可以很容易地得到元素GetElementsByTagname()。但你不能GetElementsByTagname('h*')可悲的是。
    • 标题在XHTMLHTML 4没有它们作为子元素应用到的元素(xhtml l2建议HTML5在某种程度上-布鲁斯·劳森写了一篇关于这个的好文章betway体育官方网还有一个相当漂亮HTML5外挂线可用)。
    • 你可以做GetElementsByTagname()。对于每个标题级别,然后连接所有标题级别的集合。然而,这并没有给你他们在文件来源上的顺序。
    • 为此目的PPK写了一个臭名昭著的总有机碳脚本很久以前在他的网站上用过GetElementsByTagnames()。不是每个浏览器都支持的功能。因此,它也不太适合这项工作。他也在大会上“作弊”总有机碳当他添加类以直观地缩进它们而不是真正嵌套列表时,请列出。
    • 对于所有使用DOM是痛苦的:做一个GetElementsByTagname(“*”)走完全程DOM树,比较节点名以这种方式获取标题。
    • 我想到的另一个解决方案是内层HTML然后使用正则表达式匹配标题。
    • 由于您不能假定每个标题都有一个ID,因此如果需要,我们需要添加一个ID。

    所以这里有一些解决这个问题的方法:

    使用DOM

    ()功能(){
      变量标题= []
      变量贺普斯= /H/D/I
      变量计数= 
      变量榆树=文件。GetElementsByTagname()“*”
      对于()变量=J=榆树。长度<J++{
        变量当前=榆树[]
        变量身份证件=库尔身份证件
        如果()HEXP。测试()库尔节点名{
          如果()库尔身份证件={身份证件= “头”+计数库尔身份证件 =身份证件计数++;
          }标题。()当前
        }
      }
      变量外面的= '
                
      ' 对于 ()= J =标题。 长度 <J ++ { 变量重量 =标题 []. 节点名. 子串 () 如果 ()重量 >旧的重量 {外面的 += ' ' } 如果 ()重量 =下重 {外面的 += '' } } 变量旧的重量 =重量 }外面的 += '
    '
    文件。按ID获取元素()“TOC”.内层HTML =外面的 }()
      ;出+='
    • '+标题[i].innerhtml+';if(标题[i+1])var nextweight=标题[i+1].nodename.substr(1,1);if(重量>下一个重量)out+='
    ;如果(重量==nextweight)out+=';var oldweight=重量;}++=;document.getElementByID('toc').innerHTML=out;)();

    你可以DOM解决方案在这里起作用.它的问题是,在大型文档和微星6.

    正则表达式解

    围绕着穿越整个世界的需要DOM,我认为在内层HTMLDOM一旦我添加了ID并组装了总有机碳

    ()功能(){
      变量屋宇署=文件。身体X=BD内层HTML标题=X。比赛()/
                
                 *> [s\s] *?</H\d> $/mg
                R1号= />/R2= /<(\/)?H(d)/g总有机碳=文件。创建元素()“div”外面的= '
                
      ' = J =标题。 长度 当前 = 重量 = 下重 = 旧的重量 = 容器 =屋宇署 对于 ()= <J ++ { 如果 ()标题 []. 索引 () “ID=” = {当前 =标题 []. 代替 ()R1号 “ID”=“H” ++ “> X =X。 代替 ()标题 [] 当前 } 其他的 {当前 =标题 [] }重量 =库尔 子串 () 如果 ()<J - {下重 =标题 [+ ]. 子串 () } 变量=库尔 代替 ()R2 '<1美元' =a. 代替 () 'id=“' 'href=“” 如果 ()重量 >旧的重量 {外面的 += '
        ' }外面的 += '
      • '+ 如果()下重<重量{外面的+='
      '
      } 如果 ()下重 =重量 {外面的 += '' }旧的重量 =重量 }BD 内层HTML =X TOC。 内层HTML =外面的 + '
    '
    容器=文件。按ID获取元素()“TOC” _屋宇署容器。附属儿童()总有机碳 }()
      ',i=0,j=标题长度,Cur=重量=0,n权值=0,OLDBoad=2,容器=bd;(I=0;I) “”;x=x.替换(标题[i],cur);其他cur=标题[i];重量=电流子串(2,1);如果(i) oldweight)out+='
        ;出+='
      • “+A”;如果(下)重
      ;container=document.getElementByID('toc')bd;container.appendchild(toc);)();

    你可以请参阅此处的正则表达式解决方案.问题在于阅读内层HTML然后写出来可能会很昂贵(这需要测试),如果你将事件处理附加到元素上,它可能会泄漏内存,正如我的同事Matt Jones指出的(再一次,这需要测试)。阿拉-贝利维亚还提到两种方法的混合可能更好——匹配标题,但不要写回innerhtml——而是使用DOM添加ID。

    图书馆救援-A玉三例子

    与另一位同事交谈-DAV玻璃-关于总有机碳问题他指出玉三选择器引擎愉快地获取一个元素列表,并以正确的顺序返回它们。这使得事情变得非常简单:

    <脚本类型=“文本/javascript”SRC=“http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js”>
                脚本>
    <脚本>悠悠(){结合 超时 一万}.使用()“结点” 功能()Y {
      变量节点=是的。全部的()'h1、h2、h3、h4、h5、h6'
      变量外面的= '
                 
      ' 变量重量 = 下重 = 旧的重量 节点。 每个 () 功能 ()O型 K { 变量身份证件 =O 得到 () “ID” 如果 ()身份证件 = {身份证件 = “头” +K O 设置 () “ID” 身份证件 } 重量 =O 得到 () '节点名' . 子串 () 如果 ()重量 >旧的重量 {外面的 += ' ' } 如果 ()重量 =下重 {外面的 += '' } }旧的重量 =重量 } 外面的 += '
    '
    是的。()'目录'.设置()“内HTML”外面的 }脚本>

    可能有一种更清洁的方法来组装总有机碳列表。

    性能注意事项

    生活不仅仅是提高速度。-甘地

    上面的一些代码可能非常慢。这就是说,每当我们谈论性能和javascript时,重要的是要考虑实现的上下文:目录脚本通常用于重文本,但简单,文件。测量和判断这些脚本在Gmail或雅虎主页上运行是没有意义的。这就是说,更快、更少的内存消耗总是更好的,但是我总是对考虑边缘情况的性能测试有点怀疑,而不是解决方案要应用到的情况。

    移动服务器端。

    另一件事,我越来越怀疑是客户端解决方案的事情,实际上也有意义的服务器。因此,我认为我可以使用上面的正则表达式方法并将其移到服务器端。

    第一个版本是PHP脚本可以循环HTML记录通过。你可以在这里查看tocit.php的结果

    
                
    $文件 = 获得['文件']
    如果()预匹配()'/^[A-Z0-9 \-\.]+$/i'$文件{
    美元内容 = 文件获取目录()$文件
    普雷格尔马奇亚尔()
                  *> *</H.> /US
                 美元内容$标题
    美元 = '
                 
      ' 前额 () $标题 [ ] 作为 美元 = > $H { 如果 () 字符串查找 () $H “ID” = { X = 前置替换 () '/> “ID”=“头” . 美元 . “> $H 美元内容 = 斯特拉替代 () $H X 美元内容 $H = X } $Link = 前置替换 () '/<(\/)?H\D/' '<1美元' $H $Link = 斯特拉替代 () 'id=“' 'href=“” $Link 如果 () 美元 > & & $标题 [ ] [ 美元 - ] < $标题 [ ] [ 美元 ] { 美元 .= '
        ' } 美元 .= '
      • '.$Link. 如果()$标题[][美元+] & & $标题[][美元+]<$标题[][美元]{ 美元.='
      '
      } 如果 () $标题 [ ] [ 美元 + ] & & $标题 [ ] [ 美元 + ] = $标题 [ ] [ 美元 ] { 美元 .= '' } } 美元 .= '
    '
    回声 斯特拉替代()'
    '
    美元美元内容 }其他的{ 死亡()'请只保存像text.html这样的文件!' } ?>
      ';foreach($headlines[0]as$k=>$h)if(strstrstr($h,'id')==false)$x=preg replace('/>/','id=“head.$k.”“>”,$h,1);$content=str_替换($h,$x,$content);$= $x;};$link=preg_replace('/<(\/)?h\d/','<$1a',$h);$link=str_replace('id=“”,'href=“”,$link);如果($k>0&$headlines[1][$k-1]<$headlines[1][$k])$out.='
        ;=美元。
      • “$Link。”如果($headlines[1][$k+1]&&$headlines[1][$k+1]<$headlines[1][$k])$out.='
      ;如果($headlines[1][$k+1]&&$headlines[1][$k+1]==$headlines[1][$k])$out.=';}
    ';echo str_replace('
    ',$out,$content);else die('only files like text.html please!')}?>

    这很好,但是没有另一个文件循环,我们也可以使用的输出缓冲区PHP

    
                
    功能托伊特()美元内容{
      普雷格尔马奇亚尔()
                  *> *</H.> /US
                 美元内容$标题
      美元 = '
                 
      ' 前额 () $标题 [ ] 作为 美元 = > $H { 如果 () 字符串查找 () $H “ID” = { X = 前置替换 () '/> “ID”=“头” . 美元 . “> $H 美元内容 = 斯特拉替代 () $H X 美元内容 $H = X } $Link = 前置替换 () '/<(\/)?H\D/' '<1美元' $H $Link = 斯特拉替代 () 'id=“' 'href=“” $Link 如果 () 美元 > & & $标题 [ ] [ 美元 - ] < $标题 [ ] [ 美元 ] { 美元 .= '
        ' } 美元 .= '
      • '.$Link. 如果()$标题[][美元+] & & $标题[][美元+]<$标题[][美元]{ 美元.='
      '
      } 如果 () $标题 [ ] [ 美元 + ] & & $标题 [ ] [ 美元 + ] = $标题 [ ] [ 美元 ] { 美元 .= '' } } 美元 .= '
    '
    返回 斯特拉替代()'
    '
    美元美元内容 } 奥博开始()“托伊特” ?>…文件…] 奥本登齐()?>
      ;foreach($headlines[0]为$k=>$h)if(strstr($h,'id')==false)$x=pregreplace('/>/','id=“head.$k.”“>”,$h,1);$content=str_替换($h,$x,$content);$= $x;};$link=preg_replace('/<(\/)?h\d/','<$1a',$h);$link=str_replace('id=“”,'href=“”,$link);如果($k>0&$headlines[1][$k-1]<$headlines[1][$k])$out.='
        ;=美元。
      • “$Link。”如果($headlines[1][$k+1]&&$headlines[1][$k+1]<$headlines[1][$k])$out.='
      ;如果($headlines[1][$k+1]&&$headlines[1][$k+1]==$headlines[1][$k])$out.=';}
    ;返回str_replace('
    ',$out,$content);ob_start(“tocit”);?>[…文件…]

    服务器端解决方案有一些好处:它们总是有效的,如果需要,您还可以缓存一段时间的结果。我确信PHP可以加速,不过。

    查看所有解决方案并获取源代码

    我给你看了我的,现在给我看看你的!

    所有这些解决方案都非常粗糙和现成。你认为如何改进它们?为不同的库做一个版本怎么样?前进,在Github上分叉项目,告诉我你能做什么。