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

您当前正在浏览必威体育下载克里斯蒂安·海尔曼七月的博客必威体育简介档案,2011。

7月存档,二千零一十一

在他们年轻的时候把他们搞得一团糟?更好的网络教程!

星期四,7月28日,二千零一十一

我目前正在技术审查一本用于教育环境(学校,大学,公司培训)关于HTML5,css和javascript,或者简而言之,Web开发。不用说,我对学校在这方面的教学感到非常震惊。

新学员得到的第一批材料似乎重复了许多过去的错误,这让我很恼火。必威体育下载接下来,我将展示一些问题以及我们应该做什么。

免责声明:这些是我在当前代码示例和培训材料中遇到的示例。如果有人喊着“再也没有人用它了”和“什么样的白痴会这样编码”的话,请从象牙塔上下来,把他们的手弄脏,在我们的学校和公司培训室进行日常培训。我并不是在编这个词——这是人们从学校或公司的角度开始上网时的印象,而不是阅读杂志,博客或关注Twitter上的一些知名人士。

地狱里的“你好世界”

我一直看到的第一个代码示例是这样的:

 
     

通常情况下,解释如下:

  • 这是嵌入脚本的方法,
  • 类型和/或语言对于告诉浏览器它是什么类型的脚本和
  • 需要注释来阻止浏览器显示代码。最后一行中的javascript行注释“/”有时会添加“以确保HTML验证“

如果你真的使用HTML5doctype不需要它们.Javascript是唯一支持的语言浏览器HTML5并且正在使用的将执行,因此类型属性仅在希望嵌入不应由所有人呈现的脚本时才有意义。一些客户端模板语言会这样做。JScript死了,我们甚至不必费心告诉别人。

至于评论,我从来没有遇到过在脚本块中显示代码的浏览器。如果你真的担心向后兼容性猞猁Netscape 1(显然lynx还在生产中)那么您也不应该在页面中嵌入脚本。

最后,这是我们在任何情况下都要做的,以获得在单独文件中维护脚本的好处。只有当高性能环境需要一个缓存文件中的所有内容时,才需要在页面中嵌入代码。另一次我看到嵌入的JS代码是对产品应用一个快速修复,或者添加一个“一次性的,因为这是一个特殊的页面”,从而使维护更加困难。

我们改成这样吧:写“你好世界”的方法是写一个索引文件这就解释了非常需要的语义基础HTML并嵌入以下内容:

 
     

这样人们就不会被诱惑混合行为,结构和表示,并理解构建Web产品而不是将所有内容都包含在一个文件中的页面意味着什么。

当然,将所有内容保存在一个文档中可能有好处。首先,你可以解释不同的东西是如何一起工作的。在真实的开发环境中,然而,这是个奇怪的例子,我们的引物不应该开始解释这些。不学东西比学东西难得多,必威体育下载那么为什么我们要从你以后不会用的东西开始呢?

我们一起吃吧CSSJS就像我们在HTML文件——外部资源。这是最大的用例,也是我们应该让人们从中开始的用例。

诅咒document.write()。

每次我看到document.write()。document.writeln()。最近在材料方面,我有点死在里面。当我们不得不用它将框架集写入刚刚打开的弹出窗口时,我就在附近。原因是浏览器不支持DOM访问页面中的内容或创建HTML内容。我不想记得那些时候,第一次进入网络开发世界的人也不应该。

我理解,在文档中显示输出是最简单的方式——给新开发人员第一个“哇,我刚才编程的内容会出现在屏幕上的“时刻”。我也知道,然而,我不会雇佣任何使用文件编写只是在屏幕上打印一些东西。

使用document.write()。告诉开发人员JS在添加脚本节点的位置写出内容,而不是如何与之交互HTML.

我们改为这样做:我们有一些选择,而不是写入文档。这些是优先订购的,从最不理想的开始:

  • 使用警报()—只稍微好一点,但也有一些好处。警报具有破坏性。它们会停止代码的执行,例如,您可以演示变量的值如何通过脚本的执行进行更改。他们的问题是如果你想展示很多价值观,按Enter键可以消除所有警报,这会变得很烦人。例如,在新的火狐中,警报被叠加而不是停止执行,这意味着这种利益已经消失。
  • 首先简单介绍一下DOM.如果你想一想,这真的很简单:

    使用文档对象模型(DOM),我们可以访问页面中的元素。比如说你有一个

    在文档中。使用 document.getElementByID('结果')在您的javascript中,您可以访问这个元素。您可以使用 内层HTML.所以如果你做了 document.getElementByID('result').innerHTML='我的结果'你会看到段落的内容改为“我的结果”。如果你做了 警报(document.getElementByID('result').innerhtml)您将收到一条提示,说明“我的结果”,因为这是您更改段落后的文本内容。

    这并不难,它是?

  • 从一开始就介绍调试工具–在浏览器中解释控制台。所有现代浏览器都配有一个开发控制台,可以显示用控制台。.首先,我们解释开发人员在编写代码之前如何调试代码,然后让他们了解代码中发生了什么。这就像是在让新学员使用电动工具之前,向他们展示手册和急救箱的位置。我们的大部分工作是测试代码,而不是编写代码。在现实世界中,我们大部分时间都在调试和重构代码——那么为什么不从这开始呢?

诅咒警报()提示()

在任何浏览器中使用警报和提示打印结果并从用户那里获取内容都是一种简单的方法。然而,在一个真正的产品中,你几乎不会使用警报(除了用于调试),我可以安全地说,我从未在教程之外看到过使用提示。

举手,谁犯了错误,添加了一个警报()在大循环中或尝试调试模糊()事件处理程序使用一个警报,从而在一个无休止的调试循环中结束。对,当浏览器(和服务器端的javascript)这些天有调试工具,能够更好地向我们展示引擎盖下发生的事情时,这样做是没有意义的。一个控制台向我们显示对象和DOM元素而不是神秘的[对象对象]作为调试信息。

我们改为这样做:而不是使用浏览器对象模型和警报,确认并提示使用控制台进行调试,使用表单字段进行数据输入。写一个简单的解释如何访问表单中的数据并不难:

文档中的表单允许您从用户那里获取信息并对其进行操作。假设您在页面中有以下表单:

       

这个标签需要元素来告诉用户条目字段是什么,以及应该如何处理它。这个类型属性告诉浏览器我们需要什么样的输入字段——在本例中是一个数字。当表单发送到服务器和身份证件需要连接标签和输入元素,这个占位符向用户显示预期值和必修的属性在浏览器中验证表单。

与文档中的所有元素一样,您可以使用document.getElementByID()。方法。你可以设置和读取价值在球场上GET属性()SET属性().因此,如果您想使用javascript设置入口数至5,你要做的就是document.getElementByID('entryNumber').setAttribute('value',5).如果要读取字段的值,可以执行console.log(document.getElementByID('entryNumber').getAttribute('value'))

您可以通过读取或写入价值元素的属性。设置入口数至5,你要做的就是document.getElementByID(“entryNumber”)。值=5.如果要读取字段的值,可以执行console.log(document.getElementByID('entryNumber').value)

(在Mathias Bynens的一些测试和反馈之后,这仍然是教新开发人员更好的方法)

用一个链接到的工作示例来支持它,并且您已经解释了表单是如何工作的,一些属性的作用是,现在的浏览器有客户端验证,以及如何读写表单值。时间不长,也不难做到。

短注意广度的神话

每当我要求人们解释为什么而不仅仅是如何在教程中获得反馈,即我们的读者很忙,希望尽快看到结果。一般的共识是,读者的注意力跨度非常短,不想重复,也不想得到冗长的解释。

可能是真的,但这并不意味着你需要用勺子来提供信息。这意味着教程的开始必须吸引他们的注意力,并且必须使其有趣。如果通过一个教程和编码是有趣的,那么人们将不会意识到他们花了多长时间在一个特定的任务上。

看看游戏:愤怒的小鸟并没有附带教程——每次你得到一种新型的小鸟,都会有一张简单的图片向你展示它们是做什么的,以及如何用你的手指激活它们的特殊技能。他们本可以写一份很长的文件,但不需要。如果你真的认为人们的注意力广度很短,并且很快就失去了兴趣,那就看看有多少次人们会一次又一次地试图解决相同的问题,因为看到猪爆炸很有趣。这同样适用于“剪断绳子”。当小青蛙皱眉的时候,你会感觉很不舒服,因为糖果已经不见了,它对即将到来的喂食的持续的兴奋让你更想解决这个难题。为什么我们只有在“浪费时间”玩游戏的时候才会有这样的关注?

我们的培训材料应该从中吸取教训,让我们的读者保持兴奋,并希望必威体育下载了解更多。你不需要用掷模模拟器和计算素数的数学循环来做这些。把情感带进你的材料或展示现实生活中的例子,你就会引起读者的注意。在训练中,让小组一点一点地发现这些材料,而不是给他们一个大的活页夹,上面有一些信息和例子,如果你想得到一个闪亮的证书来收集墙上的灰尘,那么就必须在当天结束之前完成。

猪嘴里的口红和假发

你不能通过用新技术来增加旧材料的味道来重新利用它们。时期。每当出现新的流行词时,一些旧书被掸掉,新功能被添加。这发生在DHTML,然后是Ajax,然后是移动网络开发,现在是HTML5.用Chrome替换Netscape 3截图,拍一章介绍新技术和Voil_-你给自己买了一个新卖家。我相信很多人会被出版商联系到“为这本旧书写一个新版本,你,知道,升级它”。说不!

除非这本书的原始版本写得非常好——而且我还没有找到这样的一个标准——否则这是在浪费每个人的时间,而且接近于一个骗局。过去,Web开发的很大一部分要么是解决浏览器中的错误,要么是适应特殊的环境。这都是过去的事情,你不能仅仅增加一个理论上的新篇章来升级一本基于过时方法的旧书。

我们仍在努力寻找一种正确的方法来在网络上构建东西,我们的开发实践也在不断变化。性能问题,安全问题和稳定性在浏览器中不断地被修正和改变,过去的好主意现在很容易让你的网站被黑客攻击,或者让它运行得非常糟糕。

改变Web开发中解释代码的方法

所有这些都激励我编写另一个关于Web开发的初学者教程。我们不应该展示所有可能的事情,而应该展示有意义的事情,让人们上路。一个坚实的基础与最少必要的信息是一个伟大的起点,走出去,学习在你自己的条件。必威体育下载我们的教程和课程应该开始渴望更多的学习,而不是确保我们得到所有的信息,我们被要求推下我们的学生的喉咙。必威体育下载

会议问答的另一种方式——采访

星期四,7月21日,二千零一十一

几周前是高地探险,一位非常热心的人在苏格兰组织和举办的会议,Alan White。在过去的那次活动中,我讲了两次,我最喜欢的一件事是它如何处理观众的问答。

问答问题

谈话后的问答总是很难纠正的。有几个问题不断出现:

  • 人们不敢在其他观众面前提出“可能很愚蠢”的问题(有趣的是,很多时候这是很多其他人都有的问题,但他们都不敢问)
  • 提出问题的人利用这个机会来介绍自己或他们的公司/产品,而不是问一个有效的问题(因此浪费了每个人的时间)
  • 演讲者和/或听众听不到或听不懂这个问题(演讲者需要重复这个问题,这样每个人都能听到/听到这个问题,从而浪费了更多的时间)
  • 演讲者不能正确地看到听众(眼睛里的光),这意味着一些半心半意的要求没有得到认可。
  • 提出问题的人被要求等待麦克风对每个人都能理解,这需要时间(并不是每个人都知道如何处理麦克风)。
  • 演讲开始时的有趣问题在中途被遗忘
  • 演讲者会被困在回答一个问题或偏离方向,而不是迅速地回答更多的问题。

高地投掷方式

弗林的做法不同:会议主持人不仅介绍了发言者,而且在演讲结束后对他们进行了20分钟的采访,而不是在演讲结束后举行公开的问答会议。会议参与者可以在谈话过程中通过推特向采访者提问。这可以解决前面提到的大多数问题。

今年我很幸运成为主持人/采访者。

海兰德弗林面试原始照片德鲁麦克莱伦

你可能知道,我有一个无线电背景,在那里我花了很多时间在电话和现场采访人。回到这一点是很有趣的,特别有趣的是,有一组混合的演讲者,他们都有不同的专业话题可以谈论。

从这次会议的推特反馈来看,我一定做得很好,当演讲者坐在沙发上,知道会有一些问题出现,而不是希望会有一些问题出现时,他们会更加放松,这真是太好了。

我认为更多的会议应该采纳这个想法。

关于浏览器“统计”

星期三,7月6日,二千零一十一

浏览器大战

每次我遇到鸣叫 关于 浏览器 统计我有点紧张。首先,因为他们总是试图在一个方向或另一个方向上绘制图片,但主要是因为我不确定他们所基于的数据。

来源是什么?

每当有人谈论浏览器统计数据时,就会有几家公司突然出现:counter.com网站statcounter.com网站netapplications.com,所有这些都是HitCounter解决方案。

我个人使用statcounter——但只有在我的一些页面上我特别想要监控。所以,如果我将statcounter的统计数据与我的服务器附带的urchin的总体统计数据进行比较,存在差异:

统计统计数据

海胆统计

(我不知道那里有什么管道——我想有一些RSS工作中的联合组织:)

这个,当然是意料之中的。但是如果我现在说Safari只占我统计数据的6.1%,并且在另一句话中使用服务器的总命中数,那么人们就不会对错误的连接视而不见了。

现在,正如经常提到的大多数官方消息来源都是通过销售统计软件赚钱的公司,这让你怀疑这些数字是否不能被篡改以显示一些酷的趋势,所以人们想知道iPad上有多少酷孩子来他们的网站。即使没有戴上我的锡箔帽,我也觉得应该有更好的方法从更接近的来源收集信息,呃逆,来源。你知道的,像服务器日志。

我们对网站统计的迷恋

似乎人们真的需要数字。所有大型网络节目都有大量的主题演讲。谷歌IO的安卓设备有数百万台,而谷歌IO的iOS设备也有数百万台。WWDC公司.很多人升级到IE9在混合(嘿,不但是,Windows XP用户,很抱歉)当然,很多人使用黑莓和诺基亚手机,还有……

我从来没有一个客户不想要一个统计数据包,当你提供给他们(那些公司或谷歌诊断)的时候,看到人们在寻找什么总是令人惊奇的:成功的故事。

  • 上个月我们有多少用户(不管他们是访客还是试图注入代码的垃圾邮件机器人)?
  • 网站的哪些部分最成功?
  • 什么是主屏幕分辨率?
  • 有多少用户禁用了JS,这样我们就可以轻拍自己的后背,宣布hashbang URL不是问题?

我们把统计数据作为验证我们成功的手段,不是分析哪些方面可以改进的机会。它是“喜欢”文化近年来已经占领了我们的市场。

旁白:你的统计数据中有很多有趣的数据。检查你的统计数据上的表单提交数据,看看人们试图注入什么代码,在哪里可以看到你的站点的哪些部分需要额外的安全保护。检查你网站的哪些部分表现不佳,或者阻止人们进一步发展,找出是什么导致了这种情况的发生。断开的链接在哪里?它们对网站导航有多有害?分析你网站上的搜索机器人行为,看看他们被困在哪里。还有…

但是返回浏览器:

“唯一重要的统计”神话

你可能看到过这样的对话:有人展示了一个或另一个浏览器统计数据,以及这个数据所代表的令人难以置信的令人振奋的故事,然后以“当然唯一真正重要的统计数据是你所工作的站点之一”结尾。

大多数情况下,这意味着“如果你的大多数用户都坚持使用IE<9,那么这些很酷的东西对你来说并不重要”。这是危险的想法。首先,使用渐进增强,您可以使用所有酷的新功能:

当你把东西放到网上的时候,对我来说,支持旧的浏览器是一件很重要的事情。读我的嘴唇:您不能指定用户应该使用的浏览器.如果你这样做,你伤害了网络,你把自己锁定在一个单一文化中,你又建立了一个网页,它将阻碍未来的创新。我不在乎你的需求浏览器是不是IE,游猎,Chrome或Firefox。所有人都应该得到一些有用的东西——不管某个浏览器的新版本有多酷。这种想法给了我们所有现在只在IE6.

使用聚合体你甚至可以让那些不太幸运的浏览器做同样的事情,酷的。我不太喜欢Polyfills,但这是另一个帖子。

虽然很明显,你应该迎合大部分的游客,但你不应该认为这是不为那些能得到更多的游客改善体验的原因。在支持它的浏览器中使用本地存储和脱机存储可以显著减少流量。使用CSS3型而灵敏的设计意味着你迎合了网络和新事物,在不改变体验的情况下为平板电脑和移动设备降温IE6用户。

当你专注于只支持旧的浏览器和台式机时,你的统计数据中就不会有很多移动浏览器了。你的统计数据应该是一个指导方针,提醒你拥有多样化的受众,不是阻滞剂,意思是你永远不会得到别人。

也,当你从头开始一个新项目时会发生什么?那么就没有“一个重要的统计数据”…

我告诉你我想要什么,我真的,真的想要…

我真正想要的是开放式,免费和可编辑的资源,您可以在那里找到大型网站的统计数据。你可以看到市场的统计数据,根据站点的性质,从服务器日志中获取真实信息,而不是一些依赖跟踪的软件,这些软件可能会被阻止(首先需要安装)。

在雅虎内部,我们有一个很好的资源来显示我们的统计数据。但这从未对外公布过(尽管我经常要求这样做)。我认为每个大公司都是这样做的。得到facebook的统计数据是不是很棒?雅虎谷歌,美国在线,监护人,美国有线电视新闻网…?如果服务器日志数据中没有特定于浏览器的所有信息,这些公司都不会给出任何竞争优势数据。我们所能得到的只是一个真实的世界观真的?使用。

你知道这些数据吗?你在大公司工作吗?现在问问你是否可以对你的数据进行转储并显示一些统计数据——我保证你会得到一个非常有选择的需要真实信息的Web开发团队的大量点击!

ttmmhtm:摆弄jsiddle,停止寻找“喜欢”,会议手册和Mozilla活动

星期二,7月5日,二千零一十一

今天早上让我快乐的事情:

使用画布从HTML5视频创建屏幕抓取

星期五,7月1日,二千零一十一

最近,我一直在玩画布和视频,看看能用它做些什么,在你自己的电脑上做一些很难做的事情。有一件事我觉得很烦人,那就是很难在屏幕上抓取视频。在过去,这是不可能的(在视频卡允许你用屏幕截图捕捉Flash内容之前),即使现在,这也是一种痛苦。

如果你提供一个在线视频HTML5,使用Canvas允许最终用户下载视频图像非常简单。我已经编写了一个演示,它确实做到了这一点——它拍摄了一个视频的快照,并将其名称和时间戳添加到快照中。然后用户可以下载快照作为PNG.

画布截图

这里有一个关于如何完成的快速教程(还有YouTube上提供

你可以查看现行代码在Github上分叉并获取源代码.

唯一的麻烦是,由于安全问题(跨域来源),您可以不从不在同一服务器上的视频中获取图像从不在同一服务器上的视频中抓取帧,但不允许将其保存为图像。在火狐中,你可以将画布保存为图像,但它似乎不能跨浏览器工作.