必威体育下载基督教Heilmann

您目前正在浏览徽章类别的存档。必威体育简介

“徽章”类别的存档

伟大的实现者骗取徽章使用容易,并不使它聪明!

周二,2月12日2008

无论你如何改变它——网页设计的未来将不再围绕页面和网站,而是围绕模块。社交网络和系统为应用程序和徽章的发布提供了平台,并将持续下去。
这很酷,因为它让最终用户更能控制自己的体验。然而,它也不好,因为它意味着我们试图建立和遵循的标准,呃,9年很快就过去了。

最主要的原因是“立竿见影”和“唾手可得”的承诺,以及再一次试图利用技术使网络成为一种文化所见即所得和拖放界面。

这是我的最新发现,它让我想知道为什么我们不从过去的错误中学习——使事情易于实现和使它们易于使用是不一样的!必威体育下载

考虑一下这个工作是为第三方提供一个在他们的网站上添加徽章的机会。一点也不难——主要任务实际上是在实施层面,即。确保父方的样式不会破坏标记。

容易实现的徽章

现在,为了方便实现者,这是建议:



实现者可以在属性中选择大小和皮肤,并给出要显示的品牌名称。这很容易理解,脚本使它工作也不是巫术:


(徽章= function () {
var s = document.getElementsByTagName(' script');
(var = 0; s[我];我+ +){
if(s[i].getAttribute(‘src') 'badge.js'){
var div = document.createElement('div');
var content = s[i].firstChild.nodeValue;
div.innerHTML = '

很棒的徽章!

”;
div.appendChild (document.createTextNode(内容));
var size = s[i].getAttribute('size');
var skin = s[i].getAttribute('skin');
var坳,宽度;
开关(大小){
case 'small':width = 100;break;
大小写:宽度= 400;
默认值:宽度= 200;断裂;
}

开关(皮肤){
case 'blue':col = '#ccf';break;
case 'green:col = '#cfc';break;
默认值:坳= # ccc的;断裂;
}

div.style.background = col;
div.style.width = width + 'px';
[我].parentNode.replaceChild(div,s[我]);
}

}
})();

遍历所有脚本元素,把src和你的相比较,读取属性和元素内容,组装一个徽章,设置视觉样式并用标记替换脚本。

这使得实现变得轻而易举,甚至允许实现者为使用的每个标记选择大小和颜色。

然而,这有几个问题:

无效的HTML

不能向其添加自定义属性HTML尼利威利,因为它使你HTML无效的。这是一个很难让人理解的问题HTML验证被认为是一种美好的拥有,而不是一种真正的需要。多年来浏览器的松懈让我们对这个问题免疫。而且,实际上你可以用定制来解决这个问题DTD!

如果您想知道是否添加src和内容脚本是无效的HTML——不是。所有的建议都说用户代理应该忽略脚本当存在src属性时:

的内容中定义脚本 脚本元素或外部文件中的。如果没有设置src属性,用户代理必须将元素的内容解释为脚本。如果src有a URI值,用户代理必须忽略元素的内容,并通过 URI。注意charset属性是指src属性指定的脚本的字符编码;它与…的内容无关 脚本元素。

性能不佳。

This way of adding a badge loads the badge.js file for every instance.虽然它可能被缓存,但这仍然是一个不必要的开销。另一个问题是脚本元素使浏览器停止呈现,直到其中的脚本或与src属性链接的脚本执行为止。

文档主体中的脚本越多,你的网站会越慢!我可以肯定地说,我的大多数firefox崩溃是由于第三方JS包含(真的:广告)。作为一个真正的badge实现可以做得更多HTTP调用——大多数情况下是在呈现之后直接调用——这会增加更多的开销。

不好的可访问性和搜索引擎优化

非javascript客户端(如搜索机器人)不会找到任何带有这种标记的内容。屏幕阅读器可能会得到这个标记,但是在调用自己之后替换脚本对于任何连接到浏览器的引擎来说都是很难接受的DOM

替代方案

下面所有的建议都需要更多的实施者,但也要确保上述问题不会发生。使用渐进式增强,我们更改了一个有效的HTML结构,该结构可由搜索蜘蛛编入索引,并最终得到相同的结果。

所有的解决方案都使用一个脚本,在本例中,在文档的最后,但通过onload调整,这也可能发生在头部。这意味着HTTP开销要小得多,而且脚本不会受到每个实现的严重影响。

使用服务器端回退进行完全渐进的增强

这个解决方案只是使用到一个适当的后端解决方案的链接,这个后端解决方案将为每个品牌提供一个登录页面。这意味着适当的搜索引擎优化因为链接可以被跟踪,所以登录页面就成为了一个起点。徽章的属性是URL参数。虽然不是所有这些都必须由服务器端回退使用,但它们仍然可以。你永远不能拥有太多的数据。





剧本并不难:


(fpebadge = function(){
var div = document.getElementsByTagName(' div');
var b = [];
(var = 0;div[我];我+ +){
如果(div[我].className.indexOf (fpebadge) !1){
b.push(div[我]);
}

}
(var = 0;b[我];我+ +){
var link = b[i].getElementsByTagName(' a')[0];
如果(链接){
var urldata = link.getAttribute(' href');
var badgecfg = convertURL(urldata);
var div = buildBadge(badgecfg);
如果(div){
b[我].parentNode.replaceChild(div,b[我]);
}

}
}

函数buildBadge(badgecfg){
如果(badgecfg) {
var div = document.createElement(' div');
div.innerHTML = '

很棒的徽章!

”;
如果(badgecfg.brand){
div.appendChild(document.createTextNode(badgecfg.brand));
}

var坳,宽度;
开关(badgecfg.size){
case ' small':width = 100;break;
大小写:宽度= 400;
默认值:宽度= 200;断裂;
}

开关(badgecfg.skin) {
case ' blue':col = ' #ccf';break;
case ' green: col = ' #cfc';break;
默认值:坳= # ccc的;断裂;
}

div.style.background = col;
div.style.width = width + ‘px';
返回div;
}

}
函数convertURL(urldata){
如果(urldata.indexOf(' ? ')! = = 1){
var chunk = urldata.split(' ?')[1].split(' &');
var badgecfg = {};
(var = 0,j = chunks.length;i var vp = chunk [j].split(' =');
badgecfg[vp[0]]=[1]副总裁;
}

}
返回badgecfg;
}

})();

服务器端登录页面的逐步增强

如果你不想提供品牌登陆页面,但是只显示名称,如果您不相信您的实现者能够正确地编码&:),那么您也可以只显示一个登录页面,并将badge属性保存在类名中:




代码没有太大的不同:


(pebadge = function(){
var div = document.getElementsByTagName(' div');
var b = [];
(var = 0;div[我];我+ +){
如果(div[我].className.indexOf(landingbadge)! = = 1){
b.push(div[我]);
}

}
(var = 0;b[我];我+ +){
var badgecfg = convertClassData(b[i].className);
var link = b[i].getElementsByTagName(' a')[0];
如果(链接){
var linkdata = link.getAttribute(' href').split(' brand=')[1];
badgecfg.brand = linkdata;
}

var div = buildBadge(badgecfg);
如果(div){
b[我].parentNode.replaceChild(div,b[我]);
}

}
函数buildBadge(badgecfg){
如果(badgecfg) {
var div = document.createElement(' div');
div.innerHTML = '

很棒的徽章!

”;
如果(badgecfg.brand){
div.appendChild(document.createTextNode(badgecfg.brand));
}

var坳,宽度;
开关(badgecfg.size){
case ' small':width = 100;break;
大小写:宽度= 400;
默认值:宽度= 200;断裂;
}

开关(badgecfg.skin) {
case ' blue':col = ' #ccf';break;
case ' green: col = ' #cfc';break;
默认值:坳= # ccc的;断裂;
}

div.style.background = col;
div.style.width = width + ‘px';
返回div;
}

}
函数convertClassData©{
var chunks = c.split(' ‘);
var badgecfg = {};
(var = 0,j = chunks.length;i var vp = chunk [j].split(' -');
如果(vp[1]){
badgecfg[vp[0]]=[1]副总裁;
}

}
返回badgecfg;
}

})();

嘿,你使用类,为什么不提供一个皮肤文件?

看到最后一个选项实际上使用了类,为什么不保留样式呢CSS并提供一些实现人员可以更改的皮肤文件?这样你的徽章脚本就会非常小:


(pebadge = function(){
var div = document.getElementsByTagName(' div');
var b = [];
(var = 0;div[我];我+ +){
如果(div[我].className.indexOf(skinnedbadge)! = = 1){
b.push(div[我]);
}

}
(var = 0;b[我];我+ +){
var link = b[i].getElementsByTagName(' a')[0];
如果(链接){
var div = document.createElement(' div');
var linkdata = link.getAttribute(' href').split(' brand=')[1];
div.appendChild(document.createTextNode(linkdata));
div.innerHTML = '

很棒的徽章!

”;
b[我].parentNode.replaceChild(div,b[我]);
}

}
})();

您可以将其扩展到load和applyCSS文件需求,但将它们保存在一个文件中会更有意义,再一次削减开支HTTP开销也要用级联来产生小CSS文件。

评论?你可以去在这里尝试所有的例子

JavaScript的艺术和科学诞生了

周四,1月24日,2008

我在JavaScript的艺术和科学章节

我对死树媒体的最新贡献是Sitepoint新书的一个章节
JavaScript的艺术和科学。我一直在a中详细介绍这本书的历史和内容在Yahoo Developer博客上发布博文这本书已经出版了一段时间了我今天才拿到了免费的拷贝,因此,延迟。

我的章节详细介绍了如何构建一个标记来显示存储在另一个站点上的信息,而不必求助于服务器端解决方案或降低站点的速度。所有的奇迹都发生在页面加载之后,如果没有可用的JavaScript,访问者仍然会看到指向相同在线资源的链接。

它详细解释了我的基本原理和脚本del.icio.us plugin for wordpress如下所示:

[delicious:我关于JavaScript的链接,codepo8,10, JavaScript]

虽然不是最华丽的章节,但我希望人们可以学习一些关于api的知识,必威体育下载休息并由此生成动态脚本节点。

JavaScript的艺术和科学

我个人对这本书的质量感到非常惊讶:全彩印刷,排版和图像都很好。唯一缺少的是作者的名字或者章节开始页的简短介绍,要知道谁做了什么有点棘手。做得好Sitepoint !

YUI上的运行加载YUI组件的需求

星期五,12月7日,2007

这是我在雅虎的演讲之一。前端工程峰会在伦敦,它处理削减规模的选择YUI库组件。已经有很多关于这个主题的文章和帖子,但是没有一个真正解释使用这个主题的想法betway体育官方网雅虎_config来按需加载组件,而不是使用YUI加载程序。

这也是我用来创建低调的flickr徽章v2