必威体育下载基督教Heilmann

贴有“parisweb”标签的帖子

巴黎网络-工作在现在

星期五,11月14日,2008

昨天我是在巴黎网络我的演讲是“在当下工作”
(slideshare id = 749394医生= workinginthenow - 749394 - 9 -易名= 425]

我展示了拥挤火车的减肥功效。Xavier Borderie拍摄
最初我想说的是HTML5以及如何用Flash和。来模拟它们DHTML现在(写一个小的抽象库),但是看到最近几轮的崩溃和裁员,我改变了我的立场,谈论了我们现在可以做的事情,既可以确保我们的工作,又不会失去过去几年标准运动的势头。

我已经详细地解释了原因和我的想法这里的另一篇文章。在我的演讲中,我提倡重用组件和系统我们必须更快地工作,这样做可以更好地交付,并减少硬件和软件开销。

这些都是:

到目前为止的反馈很好,但也有很多人说"这是开源的,但如果运营它的公司倒闭了怎么办?我怎么能相信它?我很快就会写一些更长的东西,看到免费的东西和信任存在一个大问题是非常有趣的。

巴黎的网络视频是在线的-看看我的“成功的团队使用网络标准”的演讲

星期五,3月7日,2008

可爱的巴黎人网站刚刚发布2007年dailymotion会议的所有视频。我的演讲是唯一的英语演讲,主题是如何遵循web标准帮助您的团队更成功:


成功的团队使用web标准!
上传的parisweb

幻灯片:

其他的视频很有趣,因为它们涵盖了技术层面的可访问性和国际化问题,社会和立法角度。我最喜欢的是IBM通过在音频流上运行语音识别来自动转录视频的服务器。

低调JavaScript的巴黎Web 2007研讨会记录

星期五,11月23日,2007

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

你可以在这里下载使用的所有文件:parisweb2007_workshop.zip

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

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

第一步:分析任务和HTML

我们从一个HTML模板(01 _template.html)并加以分析。我们指出,该模板不是最佳的,因为它包含嵌入式CSS在一个活的产品中哪个应该是单独的CSS文件。我们也指出这样开始是可以的,因为它使维护更容易。

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

我们有一块CSS在文档的开头和正文的末尾有一个脚本块。在主体的末尾有一个脚本块,可以确保所有HTML我们希望JavaScript中的reach在执行时可用。

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

第二步:了解浏览器问题并利用它们

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

帮助我们的是一个鲜为人知的东西ie漏洞如果你用键盘点击指向页面内锚点的链接页面就会跳转到那里,但是键盘的焦点不会随着它移动。最简单的解决方案是将锚元素嵌套到其中的一个元素中hasLayout。在我们的例子中,我们添加了DIV每个标题和内容部分周围的元素,并将其宽度设置为100% (02 _iefix.html)。

第三步:脚本

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

  • 隐藏所有内容部分
  • 隐藏反向链接,因为我们只显示一个内容部分时不需要它们
  • 显示与链接相连接的内容部分TOC当它被点击时

我们讨论了这样做的不同可能性DOM,的所有子元素DIV并将其style.display值设置为“无”等)。然后我提出,到目前为止最简单的方法是编写一个简单的JavaScript,在JS可用时将类添加到文档主体中并进行定义CSS这隐藏了必要的元素。那样的话我们可以很容易地让CSS干重活DOM通过遍历,我们为设计人员提供了一个钩子来以不同的方式设计非JavaScript和JavaScript版本。

JavaScript:


document.body.className = ‘js';

CSS:


/*脚本依赖样式*/

Bydi.js*的TOC {
浮:左;
宽度:20%;
margin-right: 5%;
}

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

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

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


document.body.className = (document.body.className +' ‘||'‘) + ‘js';

这确保了所有必要的元素最初都是隐藏的(03 _hideandstyle.html)。我们还指出,我们使用了off-left技术,而不是使用display来隐藏内容:none,因为这可以确保屏幕阅读器仍然可以访问它。

事件处理

这是我们在JavaScript和DOM。现在我们需要知道如何在单击适当的链接时显示我们想显示的部分。我们需要为此使用事件处理,并将事件侦听器应用于不同的元素。最初,参与者考虑为每个事件添加一个click事件侦听器,但在使用人豚鼠(视频dailymotion网站)我们意识到,只需要将一个事件处理程序应用于TOC和使用事件的代表团做剩下的事。

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

CSS:


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

JavaScript:


document.body.className = (document.body.className +' ‘||'‘) + ‘js';
var toc = document.getElementById(' toc');
如果(toc){
功能开关(e) {
var t = e.target;
如果(t.nodeName.toLowerCase()= a){
var sectionID = t.getAttribute('href').split('#')[1];
var section = document.getElementById(sectionID);
如果(部分){
section.parentnode.classname='显示';
}

}
};
toc.addEventListener(“点击”,切换、虚假);
};

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


document.body.className = (document.body.className +' ‘||'‘) + ‘js';
var toc = document.getElementById(' toc');
如果(toc){
var current = {};
功能开关(e) {
var t = e.target;
如果(t.nodeName.toLowerCase () = a) {
如果(current.section){
current.section.classname='';
};
var sectionID = t.getAttribute(' href').split(' #')[1];
var section = document.getElementById(sectionID);
如果(部分){
section.parentNode.className = ‘show';
current.section = section.parentNode;
};
};
};
toc.addEventListener(“点击”,切换、虚假);
};

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

命名空间的脚本。

要使脚本与其他脚本很好地协作,最简单的技巧是使用模块的模式并将其嵌套在赋给匿名函数的变量中(06 _namespaced.html):


var sectionCollapse = function(){
document.body.className = (document.body.className +' ‘||'‘) + ‘js';
var toc = document.getElementById(' toc');
如果(toc){
var current = {};
功能开关(e) {
var t = e.target;
如果(t.nodeName.toLowerCase()= a){
如果(current.section){
current.section.classname='';
};
var sectionID = t.getAttribute('href').split('#')[1];
var section = document.getElementById(sectionID);
如果(部分){
section.parentnode.classname='显示';
current.section = section.parentNode;
};
};
};
toc.addEventListener(“点击”,切换、虚假);
};
}();

简化维护

为了方便下一个开发人员接替我们的工作,然后我们同意在脚本本身中没有任何ID或类名,而是将它们移到自己的配置对象中。我们能覆盖的最后一步是移动CSSJavaScript生成自己的文档我们的例子完成了(07年_final.html):


var sectionCollapse = function(){

//开始配置-在这里编辑
var config = {
JSavailableClass:“js”,
showClass:“秀”,
tocID:“目录”
}

/ /结束配置

document.body.className = (document.body.className +' ‘||'‘) + config.JSavailableClass;
var toc=document.getElementByID(config.tocid);
如果(toc){
var current = {};
功能开关(e) {
var t = e.target;
如果(t.nodeName.toLowerCase () = a) {
如果(current.section){
current.section.classname='';
};
var sectionID = t.getAttribute(' href').split(' #')[1];
var section = document.getElementById(sectionID);
如果(部分){
section.parentnode.classname=config.showclass;
current.section = section.parentNode;
};
};
};
toc.addEventListener(“点击”,切换、虚假);
};
}();

结论

我希望参与者能对你的设计有所了解CSSJavaScript可以协同工作,并学习了必威体育下载一些使JavaScript更易于维护的方法。我个人希望大多数人在开始编写代码之前就开始分析问题:)

缩小的地铁,棘手的事件处理和伟大的新遭遇-这是巴黎网络2007

星期天,11月18日,2007

缩小是指删除所有不必要的空白(空格,选项卡,)从一段代码,使其重量更轻时下载。在巴黎的一次罢工中,公共交通系统发生了这样的事情:

拥挤的地铁

我在……度过了最后三天巴黎网络——在巴黎举行了为期三天的关于网络标准和可访问性的会议,法国。总结一下:虽然穿越城市到达两个不同的地方是我曾经想象过的噩梦,这次会议本身就是一次奇妙的经历,我很高兴成为其中的一员。

Paris Web展示了一个会议的特点,这个会议是由那些仅仅热衷于将标准化和可访问性的好想法带给人们,而不是让他们中饱私囊的人组织的。

为期两天的会议通行证IBM这栋楼里有一个最先进的礼堂(我还在为遥控器发愁,舞台上有个监视器,可以看到我的幻灯片),供应充足的咖啡和饮料,两天的租金是100欧元。车间,不幸的是(因为罢工),在城市另一边的一所学校举行的集会只花了10欧元就让与会者望而却步!

这些价格意味着你能够接触到你通常无法接触到的人,因为他们负担不起昂贵得多的会议的门票。等待我,低廉的价格并不意味着你得不到令人印象深刻的演讲者和精彩的演讲。的演讲嘉宾读起来像法语网络上的“谁是谁”,包括来自黄蜂的人,的W3C,IBM和prototype团队的成员。

我在会议上的演讲“成功的团队使用网络标准”

我自己的演示刻意保持非技术性,并解释了在开发web站点时遵循标准的好处:

我的关于低调JavaScript的研讨会

我根据我的低调JavaScript的七个原则并试图通过增强指向文档中几个内容区域的内容表来应用它们。当我有时间的时候,会有一个详细的增强描述。

这个房间不适合做工作室,因为它是一个塞满了电脑和19英寸的教室阴极射线管监视器,这意味着你不能看到很多你教的人。

我已经向小组保证,到会议结束时,精通JavaScript的人会意识到,他们编写的代码太多了,JavaScript担心参与者会知道如何与JS开发人员工作和交流(是的,那可能)。

充分利用房间,心血来潮,我解释了事件处理和事件的代表团使用真实的人:

使用人豚鼠处理事件

第一行是目录中的链接,在列表项后面,然后左边的UL和左边的Stephanie Booth是窗口对象(我没有把她当作对象,不要开始这些谣言!坐在前面的女士是事件监听器,其中一个链接中的便利贴是事件对象e。这很难解释,我猜你一定在那儿。

我目前还在清理workshop文件,一完成就会放到我的服务器上。你将在……找到它们http://icant.co.uk/articles/parisweb2007/files.zip今天晚些时候。

演出还会继续吗?

我听说这将是最后一个巴黎网络,我认为这是一种耻辱,因为这是一个非常需要的会议,有太多的人需要感谢和提及。这是一次伟大的经历,它应该继续下去。

flickr上有很多会议的照片组织者告诉我,以后所有的会议都将以“创意共享”的形式在dailymotion上播放。

照片
拉斐尔·哥特和克利斯朵夫·波特纽夫