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

贴有“seo”标签的帖子

接触到这些网络人——一个关于数据分布的话题,NMM的api和社交媒体

周三,4月29日,2009

昨天晚上,我真的很高兴去伦敦的国家海事博物馆和几家博物馆的代表讨论数据分发问题,钇铝石榴石和开放的表。

整个事情是由吉姆奥唐纳谁和他在一起待了很长时间钇铝石榴石NMM的数据

在我的谈话中[PDF,2.2Mb]我介绍了从网站到开放数据的转变,这是一个接触更多用户的机会,让你的访问者从一个接收方变成一个向他们的朋友转播你的信息的中转站,联系方式和分销渠道,你甚至不知道。

你可以下载演讲的录音,:接触那些网络人[MP3,76.6 mb)

也多亏了Mia Ridge做笔记如果你想要别人的观点。

Keywordfinder.org是生活

星期一,11月24日,2008

我已经有一段时间没有发布完整的web应用了(不,shouldiusetablesforlayout不算),所以我想我花了几个小时来创作keywordfinder.org:

Keywordfinder.org网站的截图

它是一项服务,返回你输入的搜索关键词中最成功的20个关键字,以及你在线搜索时出现的前20个网站。

希望这对一些人有用,我只是玩得很开心老板和一些宇航CSS要在一个早上从头开始创造整个东西:)

搜索引擎优化和可访问性——一个谈话

星期五,2月22日,2008

这是我刚刚在一个内部会议上做的演讲搜索引擎优化关于重叠的会议搜索引擎优化和可访问性。主要的共识是,如果你仔细观察,这两家公司都在试图解决同样的问题,大多数时候,我们的方法使它变得棘手。

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

星期二,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=宽度+‘px’;
s[i].parentnode.replaceChild(div,s[i]);
}

}
})();

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

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

然而,这有几个问题:

无效的HTML

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

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

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

性能不佳。

这种添加徽章的方法为每个实例加载badge.js文件。虽然它可能被缓存,但这仍然是一个不必要的开销。另一个问题是脚本元素使浏览器停止呈现,直到其中的脚本或与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=转换URL(urldata);
var div = buildBadge(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坳,宽度;
开关(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=宽度+‘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=链接数据;
}

var div = buildBadge(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坳,宽度;
开关(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=宽度+‘px’;
返回div;
}

}
函数convertClassData©{
var块=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[i].父节点.replaceChild(div,b[i]);
}

}
})();

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

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