必威体育下载基督教Heilmann

贴有“教程”标签的帖子

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

星期四,7月28日,2011

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

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

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

地狱里的“你好世界”

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

 
     

通常情况下,解释如下:

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

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

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

最后,无论如何,我们都将这样做,以获得在单独的文件中维护脚本的好处。只有当高性能环境需要一个缓存文件中的所有内容时,才需要在页面中嵌入代码。另一种情况是,我经常看到内嵌JS代码对产品进行快速修复,或者添加“one off as this is a special page”,从而使维护更加困难。

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

 
     

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

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

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

诅咒document.write()。

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

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

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

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

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

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

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

    这不难,它是?

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

诅咒警报()提示()

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

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

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

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

       

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

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

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

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

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

注意力持续时间短的神话

每当我要求人们解释教程中的“为什么”而不仅仅是“如何”时,我得到的反馈是,我们的读者很忙,希望尽快看到结果。一般的共识是,读者的注意力持续时间非常短,不希望重复或得到冗长的解释。

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

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

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

猪嘴里的口红和假发

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

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

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

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

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

Yui探员–不要错过这些Yui教程

星期日,7月27日,二千零八

我尊敬的大学克劳斯科曼达似乎花了和我为大众写酷东西一样多的时间,但不知怎么的,他并没有出现在很多阅读清单中。羞耻,我说,把我的裤子拉到腋下(是的,我看着辛普森一家)我指给你看,尊敬的读者对一系列文章的解释悠悠自下而上的有权代理人悠悠

对,我也喜欢他们,因为我很喜欢邦德。

使用TutorialBuilder从源注释生成教程

周二,5月13日,二千零八

我花了太多的时间让脚本的解释教程与代码的更改保持同步。所以我给自己写了一封PHP为我做这项工作的解决方案。多年来,我发现解释剧本最好的方法是:

  • 举个例子
  • 显示完整的源代码
  • 逐位显示源代码,然后解释每个部分的功能

如果你去查一下Tutorialbuilder你会看到我用a实现了大部分的自动化PHP脚本。它为您做了以下工作:

  • 它根据脚本源代码中的注释生成教程部分。
  • 它将源代码转换为可显示代码(对其进行编码,添加行号,允许突出显示行)
  • 它使用正确的文件名创建脚本的可下载版本
  • 它创建一个脚本的可执行版本,不带注释,可通过脚本元素链接到该版本。
  • 它可以缩小脚本(删除所有空白以减小文件大小)

换言之,结果这个源脚本进入之内像这样的教程使用模板和一些CSS(大部分取自悠悠)。

它是替代JSDoc但是相反,它更容易使用和解释代码的功能,而不是JS代码本身的语法。

Tutorialbuilder授权给BSD,所以你自己动手吧。

使用Ajax代码显示的懒人代码教程

周一,1月28日,二千零八

目前,我正在为一个关于Web标准的在线自我培训课程编写很多教程,我遇到了不得不在两个地方维护示例代码的麻烦:代码本身和HTML记录下解释。因此,我使用jquery编写了一个小脚本,自动将链接转换为HTML代码示例HTML实体和行号。您可以定义要显示的行,哪些行应突出显示,您可以在伊夫拉姆单击链接时。

一个简单的想法:控制静态HTML文档的javascript版本

周一,1月14日,二千零八

当你编写教程并且你希望人们在任何地方使用它们时,最好提供HTML以压缩方式下载文档。对最终用户的好处是,他们不需要在线查找(例如,我有HTML 4.01我机器上的文档HTML文件)。缺点是,文档可能会过时,而用户不知道——即使当他们在线观看时也是如此。

现在,我仔细考虑了一下,想知道这样的事情betway体育官方网是否不是解决办法:

  • 在每个文档的标题中添加一个版本号。
  • 在每个文档的末尾添加一个远程托管的versions.js脚本。
  • 这个脚本有一个杰森对象,并与每个文档的版本信息进行比较。
  • 如果版本过时,它会生成一条错误消息,显示给用户。

你可以试试看下载两个演示文档解压它们并在连接到Internet的计算机上打开它们。与第一个文档链接的第二个文档应该过时。

源头版本控制系统


(checkversion=function()
//根据实际情况更改
var versions = {
'documentExample.html':'1.0',
'documentexample2.html':'2.0'
};
var errorid='版本错误';
var errormessage='此文档已过时,请转到主页下载新版本!;

//检查代码
var d=文件;
//获取版本号
var cv=d.title.match(/(version(.*))$/);
//获取文件名
var cn=window.location.href.split('/');
cn = cn[cn.length-1].split(“#”)[0];
//如果出现不匹配,检查并创建错误消息
如果(cv[1]&&versions[cn]);
如果版本[cn]! = =简历[1]){
如果(!)D.GetElementByID(错误ID))
var m=d.createElement('div');
M. ID=ErrRID;
m.AppendChild(d.CreateTextNode(ErrorMessage));
d.body.insertbefore(m,d.body.firstchild);
}

}
}

}());

您可以创建标题和杰森object in versions.js on the backend automatically by scanning the titles or from a version control system.你怎么认为?