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

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

“徽章”类别的存档

伟大的实施者欺骗-使徽章使用简单并不意味着它聪明!

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

无论你如何转变,未来的网页设计不会围绕网页和网站,而是围绕模块。社交网站和提供应用程序和徽章浏览服务的系统在这里,并将在这里停留。
这很酷,因为它让最终用户更能控制自己的体验。但是,这也很糟糕,因为这意味着我们在最后一次尝试建立和遵循的标准,9年的时间很快就要结束了。

主要原因是“快赢”和“低挂果”的承诺,以及再次尝试使用技术使网络成为所见即所得以及拖放界面。

这是我的最新发现,它让我想知道为什么我们不从过去的错误中吸取教训——使事情易于实现与使它们易于使用不同!必威体育下载

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

易于实施的徽章

现在,为了便于实施者,建议如下:



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


(badge=函数()。{
var s=document.getElementsByTagname('script');
对于(var i=0;s[i];i++){
if(s[i].getattribute('src')'badge.js')。{
var div=document.createElement('div');
var content=s[i].firstchild.nodevalue;
div.innerhtml='

棒极了的徽章!


div.appendChild(document.createTextNode(content));
var size=s[i].getattribute('size');
var skin=s[i].getattribute('skin');
VAR COL,宽度;
开关(大小){
大小写“small”:宽度=100;中断;
大小写“large”:宽度=400;中断;
默认值:宽度=200;中断;
}

开关(皮肤){
案例“蓝色”:col='ccf';中断;
案例“绿色”:col='cfc';中断;
默认值:col='ccc';break;
}

div.style.background=col;
div.style.width=宽度+‘px’;
s[i].parentnode.replaceChild(div,s[i]);
}

}
});

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

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

但是,这有几个问题:

无效HTML

不能将自定义属性添加到HTML任性地,因为它使你HTML无效。这是一个很难让人们理解的HTML验证被认为是一种好的拥有而不是真正的必要性。多年来浏览器的松懈使我们对这个问题免疫。而且,实际上,你可以用一个习惯DTD

如果您想知道是否在脚本无效HTML-不是。所有的建议都说,用户代理应该忽略脚本当有SRC属性时:

脚本可以在 脚本元素或在外部文件中。如果没有设置src属性,用户代理必须将元素的内容解释为脚本。如果SRC有 尿嘧啶尿路感染价值,用户代理必须忽略元素的内容,并通过 尿嘧啶尿路感染.注意charset属性是指由src属性指定的脚本的字符编码;它不涉及 脚本元素。

性能不佳。

这种添加徽章的方法为每个实例加载badge.js文件。虽然它可能被缓存,但这仍然是不必要的开销。另一个问题是脚本元素使浏览器停止渲染,直到执行其中的脚本或使用src属性链接到的脚本为止。

文档正文中的脚本越多,你的网站速度会越慢!我可以放心地说,我的大多数火狐崩溃是因为第三方JS包括(真的:广告)。作为一个真正的徽章,实现可以做得更多超文本传输协议调用——大部分时间直接在渲染之后——这会增加更多的开销。

无障碍和SEO

非javascript客户端(如搜索机器人)将找不到任何带有此类徽章的内容。屏幕阅读器可能会获得徽章,但在调用脚本后替换脚本肯定很难接受任何与浏览器相关的引擎。DOM.

备选方案

以下所有建议都需要更多的实施者,但也要确保上述问题都没有发生。使用渐进增强,我们将HTML可以被搜索蜘蛛索引并最终得到相同结果的结构。

所有解决方案都使用一个脚本,在本例中,在文档末尾,但是,如果只进行一次在线调整,这也可能是个问题。这意味着超文本传输协议开销要少得多,而且您的脚本不会受到每个实现的严重影响。

通过服务器端回退进行全面的渐进式增强

这个解决方案只使用到一个合适的后端解决方案的链接,该解决方案将为每个品牌提供一个登录页。这意味着适当SEO因为链接可以被跟踪,登陆页面成为一个起点。徽章的属性是统一资源定位地址参数。虽然并非所有这些都必须由服务器端回退使用,但它们仍然可以使用。你永远不会有太多的数据。





剧本并不难:


(fpebage=函数()。{
var divs=document.getElementsByTagname('div');
VaR b=[];
对于(var i=0;divs[i];i++){
if(divs[i].classname.indexof('fpebage')!- 1){
b.推动(divs[i]);
}

}
对于(var i=0;b[i];i++){
var link=b[i].getElementsByTagname('a')[0];
如果(链接){
var urldata=link.getattribute('href');
var badgecfg=转换URL(urldata);
var div=建筑徽章(badgecfg);
如果(div){
b[i].父节点.replaceChild(div,b[i]);
}

}
}

功能构建徽章(badgecfg){
如果(BADGECFG){
var div=document.createElement('div');
div.innerhtml='

棒极了的徽章!


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

VAR COL,宽度;
开关(标牌尺寸){
大小写“small”:宽度=100;中断;
大小写“large”:宽度=400;中断;
默认值:宽度=200;中断;
}

开关(badgecfg.skin){
案例“蓝色”:col='ccf';中断;
案例“绿色”:col='cfc';中断;
默认值:col='ccc';break;
}

div.style.background=col;
div.style.width=宽度+‘px’;
返回div;
}

}
函数转换器url(urldata){
if(urldata.indexof('?')!==- 1){
var chunks=urldata.split('?')[1].拆分(&');
var badgecfg=
对于(var i=0,j=chunks.length;i var vp=chunks[j].split('=');
badgecfg[vp[0]]=vp[1];
}

}
返回badgecfg;
}

});

服务器端登录页的渐进增强

如果您不想提供品牌登录页,但是,只要显示名称,如果您不相信实现人员能够正确编码和号:)那么您也可以有一个登录页,并将标记属性保留在类名中:




代码没什么不同:


(pebadge=函数()。{
var divs=document.getElementsByTagname('div');
VaR b=[];
对于(var i=0;divs[i];i++){
if(divs[i].classname.indexof('landingBadge')!==- 1){
b.推动(divs[i]);
}

}
对于(var i=0;b[i];i++){
var badgecfg=convertClassData(b[i].类名);
var link=b[i].getElementsByTagname('a')[0];
如果(链接){
var linkdata=link.getattribute('href').split('brand='[1];
badgecfg.brand=链接数据;
}

var div=建筑徽章(badgecfg);
如果(div){
b[i].父节点.replaceChild(div,b[i]);
}

}
功能构建徽章(badgecfg){
如果(BADGECFG){
var div=document.createElement('div');
div.innerhtml='

棒极了的徽章!


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

VAR COL,宽度;
开关(标牌尺寸){
大小写“small”:宽度=100;中断;
大小写“large”:宽度=400;中断;
默认值:宽度=200;中断;
}

开关(badgecfg.skin){
案例“蓝色”:col='ccf';中断;
案例“绿色”:col='cfc';中断;
默认值:col='ccc';break;
}

div.style.background=col;
div.style.width=宽度+‘px’;
返回div;
}

}
函数ConvertClassData{
var块=c.split(“”);
var badgecfg=
对于(var i=0,j=chunks.length;i var vp=chunks[j].split('-');
如果(VP〔1〕){
badgecfg[vp[0]]=vp[1];
}

}
返回badgecfg;
}

});

嘿,你上课,为什么不提供外观文件?

看到最后一个选项实际上使用类,为什么不把造型留到CSS并提供一些实施者可以更改的剥皮文件?这样你的徽章脚本就非常小了:


(pebadge=函数()。{
var divs=document.getElementsByTagname('div');
VaR b=[];
对于(var i=0;divs[i];i++){
if(divs[i].classname.indexof('skinedbadge')!==- 1){
b.推动(divs[i]);
}

}
对于(var i=0;b[i];i++){
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[i].父节点.replaceChild(div,b[i]);
}

}
});

您可以将其扩展到加载和应用CSS随需应变的文件,但把它们放在一个文件里会更有意义,再次削减超文本传输协议但也要用级联来产生小的CSS文件夹。

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

javascript的艺术和科学已经到来

星期四,1月24日,二千零八

我在javascript艺术与科学的一章

我对死树上的墨水媒体的最新贡献是SitePoint新书的一章。
JavaScript的艺术与科学.我一直在详细介绍这本书的历史和内容。雅虎开发者博客上的博客文章虽然已经有一段时间了,我今天才拿到了我的免费拷贝,因此延误了。

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

这是一个对基本原理和脚本的详细解释用于WordPress的del.icio.us插件如下所示:

[美味:我关于javascript、codepo8、10、javascript的链接]

虽然不是最花哨的章节,但我希望人们能学到一些关于API的知识,必威体育下载休息以及从中生成动态脚本节点。

JavaScript的艺术与科学

我个人对这本书本身的质量感到非常惊讶:全彩印刷,印刷术和图像学都很好。唯一缺少的是作者姓名或章节起始页上的简短简介,知道是谁干的有点棘手。干得好,SitePoint!

yui on the go–按需加载yui组件

星期五,12月7日,二千零七

这是我在雅虎的演讲之一!在伦敦召开的前端工程峰会讨论了减少悠悠库组件。关于这个主题已经有很多文章和帖子,但是没有一篇真正解释了使用betway体育官方网雅虎_配置以按需加载组件,而不是使用悠悠加载器。

这也是我用来创造低调的Flickr徽章v2.