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

贴有“车间”标签的帖子

Web Directions South Roadshow 4月20日至24日-演讲者折扣

星期二,2月10日,二千零九

今年4月,我将参加网络方向南方路演。21号星期二我将在墨尔本,23号星期四在悉尼举行为期一天的研讨会务实的,Web服务世界中的可访问JavaScript.

对于不同的人来说,javascript是一个惊人的数量。曾经有一段时间,让网站变得光鲜亮丽、有趣是一件好玩的事情。现在你很难想到任何不使用它的网络产品。使用JavaScript很容易。使其与后端等其他技术相匹配, CSSHTML少一些。我们正在离一个要求你从头开始编码的世界越来越远。相反,我们使用的是框架和API,以及使用Web服务。
在这个研讨会中,我们将从日常情况开始——一个相当混乱的旧Web产品。我们会把它清理干净,让每个人都能接触到它,易于维护并移交给第三方,而且总是通过像雅虎这样的网络服务提供最新支持 钇铝石榴石还有管道,以及像twitter这样的社交系统,轻快而美味。你将带着对javascript的新热情离开,但同时也配备了一整套坚如磐石的技术,可以让你第一次正确地完成工作,从而节省公司的时间和金钱。

我非常期待,不仅因为我从未去过澳大利亚,还因为两天前在丹佛与来自网络方向的约翰会面,并被他对这个话题的热情所感染。

如果车间正常定价太多了,我得到了好消息:通过使用折扣代码WD—CH车间的价格回到了499*美元。

希望在那里见到你!

克里斯

戴上我的扑克脸——斯德哥尔摩BWIN研讨会

星期二,12月9日,二千零八

在斯德哥尔摩的Geekmeet之后,我在Etoys(first.com boom)工作的前同事Tim Heighes请我去他的新住所-比温–并讨论当前的开发人员市场情况和Javascript和Web开发的未来。此外,这个想法是告诉企业开放数据给世界带来的好处。

我计划在早上进行三次会谈——一次概述网络开发的发展方向,另两次小规模的技术会谈,下午的专家观众。因为蒂姆犯了一个错误,让我在极客聚会后喝醉,我没有时间准备专门的材料,但是,在我所说的网站和产品的实况展示中随意添加了概述,使用GreaseMonkey演示如何对网站进行原型更改,并对观众提出的问题和请求做出一般反应。

下午的会谈是Geekmeet的性能演讲还有我的可维护的javascript材料来自前沿会议(也可分为两部分以视频形式提供)第一部分第二部分

比材料更重要的是与BWIN团队的沟通,以及了解他们在工作中必须面对的挑战。他们选择的对抗浏览器不一致的武器是JQuery对我来说是另一个很好的接触,因为听别人说图书馆比悠悠用于大型,专业发展环境。

我度过了一段美好的时光,希望能够激励BWIN更加高效地工作,更加开放。认识一些在办公室工作的大极客也很好。

讲习班结束后,蒂姆带我去斯德哥尔摩喝了一杯,晚上我在酒店的冰柜里结束了(冰柜是用冰制成的,里面的温度恒定在零下5摄氏度,而且是非常美味的混合鸡尾酒)。

第二天早上,吉克梅特的蒂姆和罗伯特·尼曼带我去斯德哥尔摩旅游。我不得不说,这座城市确实是一个非常好的地方,瑞典人是非常好的人参观和工作。我想我很快会回来的。

巴黎网络2007年不引人注目的javascript研讨会记录

星期五,11月23日,二千零七

这是一个循序渐进的描述,并附有“低调的javascript”研讨会的代码示例,该研讨会在巴黎2007年举行。法国。

您可以在此处下载此中使用的所有文件:parisweb2007_工作坊.zip

在研讨会开始时,我做了两个承诺:

  • 了解javascript的参与者会发现他们经常编写过多的代码
  • 不了解javascript的参与者将学习如何准备和帮助JS开发人员构建不引人注目的产品。必威体育下载

第一步:分析任务和HTML

我们从一开始HTML模板(模板)01_模板.html)并进行分析。我们指出,模板不是最佳的,因为它包含嵌入的CSS在直播产品中应该单独CSS文件。我们还指出,像这样开始是可以的,因为它使维护更容易。

模板是一个链接列表(目录),指向页面下方的一组标题。其想法是,访问者可以单击目录(TOC)并向下移动文档。“返回顶部”链接允许他们再次返回。这个TOCID为“TOC”,后面链接一个“back”类。

我们有一块CSS在文档的头部和正文末尾的脚本块中。在主体的末尾有一个脚本块可以确保HTML我们希望在我们的javascript被执行时可以使用它。

我们希望在研讨会中实现的任务是将此模板转换为一个动态界面,该界面隐藏所有内容,只显示连接到链接的内容。TOC当访问者点击它时。

第二步:了解浏览器问题并将其用于我们的优势

问题是我们必须知道在单击链接时要显示和隐藏哪个部分。逻辑连接很简单:在TOC具有一个href属性,该属性指向它所连接到的标题中的ID。我们可以在脚本中使用它。问题是我们不知道标题后面的内容。我们需要一种方法来确保我们可以将需要隐藏的所有元素分组到一个元素中。

帮助我们的是一个鲜为人知的Internet Explorer错误如果使用键盘通过指向页面内锚定点的链接进行制表,则页面会跳到该位置,但是键盘焦点不会随它移动。最简单的解决方法是将锚定元素嵌套在哈斯布局.在我们的案例中,我们添加了div每个标题和内容部分周围的元素,并将其宽度设置为100%()02yIEFix.HTML

第三步:脚本

我们拥有一切HTML我们需要,页面已经做了我们想做的。现在我们开始考虑如何覆盖默认行为并使其对我们有用。我们要做的主要改变是:

  • 隐藏所有内容节
  • 当我们只显示一个内容部分时,隐藏不需要的后链接
  • 在中显示与链接连接的内容节TOC当它被点击时

我们讨论了这样做的不同可能性(循环通过DOM,获取的所有子元素div并将其style.display值设置为“无”等)。然后,我建议到目前为止最简单的方法是编写一个简单的javascript,在JS可用时向文档体添加一个类,并定义CSS这隐藏了必要的元素。这样我们就可以轻松地CSS做所有沉重的事DOM遍历,我们为设计人员提供了一个钩子,以使非javascript和javascript版本的样式不同。

JavaScript:


document.body.classname='js';

这个CSS


/*依赖于脚本的样式*/

Bydi.js*的TOC {
浮动:左;
宽度:20%;
右边距:5%;
}

By.js div {
浮动:正确;
宽度:70%;
}

body.js div,body.js.back_
位置:绝对;
左:-99 99 px;
}

然后我们发现这不安全,因为可能已经有一个类应用于body元素,这意味着我们需要检查它,并在需要时附加新类。


document.body.classname=(document.body.classname+“”'“)+'js';

这确保所有必要的元素最初都被隐藏(03隐藏样式.html)我们还指出,我们使用左键技术而不是用显示隐藏内容:无,因为这可以确保屏幕阅读器仍然可以访问内容。

事件处理

这是我们用JavaScript和DOM.现在,我们需要了解如何显示单击适当链接时要显示的部分。我们需要为此使用事件处理,并将事件侦听器应用于不同的元素。最初,参与者考虑在每一个事件中添加一个点击事件监听器,但在经历了使用人豚鼠(human guinearigs)进行事件处理的想法之后。日常活动视频)我们意识到只需要将单个事件处理程序应用于TOC使用事件委托其余的。

我们使用了W3C事件处理方法,导致以下代码(04X事件):

CSS


body.js Div.Show_
职位:相对;
左:0;
}

JavaScript:


document.body.classname=(document.body.classname+“”'“)+'js';
var toc=document.getElementByID(“toc”);
如果(TOC){
功能切换(E)
var t=e.目标;
if(t.nodename.tolowercase()='a')
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(节){
section.parentnode.classname='显示';
}

}
};
toc.addEventListener('click',toggle,false);
};

这确保了我们可以在单击元素时实际显示它们,但也有一个问题,即我们没有隐藏以前显示的部分。为此,我们需要存储信息并在调用toggle()时重置它。我提到过一个提示,使用对象来存储接口的状态总是一个好计划,因为这意味着您可以保留尽可能多的属性,而不需要引入更多的变量。更改只是将节存储在当前对象中的几行,并在已经有一个集合时移除类(05撊keepingstate.html):


document.body.classname=(document.body.classname+“”'“)+'js';
var toc=document.getElementByID(“toc”);
如果(TOC){
无功电流=
功能切换(E)
var t=e.目标;
if(t.nodename.tolowercase()='a')
if(当前节)
current.section.classname='';
};
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(节){
section.parentnode.classname='显示';
current.section=section.parentnode;
};
};
};
toc.addEventListener('click',toggle,false);
};

就课程的(非常基本的)功能而言(我们只有一个小时),最后要记住的几点是让这个代码与其他脚本一起工作,以及如何使其更容易维护。

脚本的名称间距。

使脚本与其他人一起工作的最简单技巧是使用模块模式并将其嵌套在分配给匿名函数()的变量中。06撏namespaced.html):


var sectioncollapse=function()
document.body.classname=(document.body.classname+“”'“)+'js';
var toc=document.getElementByID(“toc”);
如果(TOC){
无功电流=
功能切换(E)
var t=e.目标;
if(t.nodename.tolowercase()='a')
if(当前节)
current.section.classname='';
};
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(节){
section.parentnode.classname='显示';
current.section=section.parentnode;
};
};
};
toc.addEventListener('click',toggle,false);
};
}();

使维护更容易

为了便于下一个开发者从我们这里接管,然后,我们同意脚本本身不包含任何ID或类名,而是将它们移到自己的配置对象中。我们能覆盖的最后一步是移动CSS把javascript放到自己的文档中,我们的示例完成了(07L):


var sectioncollapse=function()

//开始配置–在此处编辑
var CONFIG={
jsAvailableClass:'js',
展示类:'show',
ToCID:“Toc”
}

//结束配置

document.body.classname=(document.body.classname+“”,“””,+config.jsavailableclass;
var toc=document.getElementByID(config.tocid);
如果(TOC){
无功电流=
功能切换(E)
var t=e.目标;
if(t.nodename.tolowercase()='a')
if(当前节)
current.section.classname='';
};
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(节){
section.parentnode.classname=config.showclass;
current.section=section.parentnode;
};
};
};
toc.addEventListener('click',toggle,false);
};
}();

结论

我希望参加者能了解到你如何CSSJavascript可以协同工作,并学习了必威体育下载一些使他们的javascript更容易维护的方法。我个人希望大多数人在开始代码之前就开始分析问题:)