必威体育下载基督教Heilmann

您当前正在浏览ParisWeb类别的存档。必威体育简介

“parisweb”类别的存档

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

星期五,3月7日,2008年

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


成功的团队使用网络标准!
上传人parisweb

幻灯片:

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

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

星期五,11月23日,2007

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

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

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

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

第一步:分析任务和HTML

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

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

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

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

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

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

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

第三步:脚本

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

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

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

javascript:


document.body.classname='js';

这个CSS


/*脚本依赖样式*/

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

body.js div {
浮动:右;
宽度:70%;
}

body.js div,body.js .back {
位置:绝对的;
左:-9999 px;
}

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


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

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

事件处理

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

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

CSS


body.js展示{
位置:相对;
左: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('click',toggle,false);
};

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


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

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

脚本的名称间距。

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


var节折叠=函数()。{
document.body.classname=(document.body.classname+“”'“)+'js';
var toc=document.getElementByID(“toc”);
如果(TOC){
var current = {};
功能切换(E){
var t = e.target;
如果(t.nodeName.toLowerCase () = a) {
if(当前节){
current.section.classname='';
};
var sectionid=t.getattribute('href').split('')[1];
var section = document.getElementById(sectionID);
如果(节){
section.parentnode.classname='显示';
current.section=section.parentnode;
};
};
};
toc.addEventListener('click',toggle,false);
};
}();

使维护更容易

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


var节折叠=函数()。{

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

/ /结束配置

document.body.classname=(document.body.classname+“”,“””,+config.jsavailableclass;
var toc = document.getElementById(config.tocID);
如果(TOC){
var current = {};
功能切换(E){
var t = e.target;
if(t.nodename.tolowercase()=“a”)。{
if(当前节){
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('click',toggle,false);
};
}();

结论

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

小型地铁,棘手的事件处理和伟大的新遭遇——2007年巴黎奥运会

星期天,11月18日,2007

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

拥挤的地铁

过去三天我一直在巴黎网络-在巴黎举行为期三天的关于网络标准和可访问性的会议,法国。总而言之:虽然穿越城市到达两个不同的地点更像是我想象中的噩梦,这次会议本身就是一次奇妙的经历,我很高兴能参与其中。

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

两天的会议通行证在西安举行国际商用机器公司大楼里有一个最先进的礼堂(我还在玩遥控器,在舞台上有一个显示器来看我的幻灯片),两天内供应的咖啡和饮料超过100欧元。研讨会,可悲的是(因为罢工)在镇另一边的一所学校里举行的活动,使与会者只花了10欧元就退场了!

这些价格意味着你能够接触到那些你通常无法接触到的人,因为他们买不起昂贵会议的门票。等着我,低廉的价格并不意味着你没有得到一系列令人印象深刻的演讲者和精彩的演讲。这个演讲嘉宾读起来像是法语网站的名人录,包括黄蜂的人,的W3C公司,IBM和原型团队的成员。

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

我自己的演示是故意保留非技术性的,并解释了在开发网站时遵循标准的好处:

我的关于低调JavaScript的研讨会

我的工作坊是基于我的低调javascript的七个原则并试图通过增强指向文档中多个内容区域的目录来应用它们。当我有时间的时候,会有一个详细的增强描述。

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

我已经向小组承诺,到课程结束时,精通javascript的人会意识到他们编写代码的时间太长,害怕javascript的参与者会知道如何与JS开发人员工作和交流(是的,那可能)。

充分利用房间,然后根据突发奇想,我解释了事件处理和事件委托使用真人:

使用人豚鼠处理事件

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

我目前仍在清理车间文件,并将在完成后立即将其放到我的服务器上。你可以在网址:http://icant.co.uk/articles/parisweb2007/files.zip今天晚些时候。

演出还会继续吗?

我听说这将是最后一个巴黎网站,我觉得这很丢人,因为这是一个非常需要的会议,而且有太多的人需要感谢和提及。这是一次伟大的经历,应该继续下去。

flickr上有很多会议的照片组织者告诉我,所有的会议都将在稍后的DailMotion上以创意共享视频的形式提供。

照片
拉斐尔·戈特和克里斯托夫·波特纽夫