必威体育下载基督教Heilmann

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

“搜索引擎优化”类别的存档

SEO和可访问性-一个谈话

星期五,2月22日,2008

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

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

周二,2月12日,2008

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

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

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

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

易于实施的徽章

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



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


(badge=function()
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坳,宽度;
开关(大小){
case 'small':width = 100;break;
大小写“large”:宽度=400;中断;
默认值:宽度= 200;断裂;
}

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

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

}
})();

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

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

然而,这有几个问题:

无效HTML

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

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

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

性能不佳。

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

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

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

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

替代方案

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

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

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

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





剧本并不难:


(fpebage=function()
var divs=document.getElementsByTagname('div');
var b = [];
(var = 0;div[我];我+ +){
if(divs[i].classname.indexof('fpebage')!- 1){
b.推动(divs[i]);
}

}
(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.尺寸)
大小写“small”:宽度=100;中断;
大小写:宽度= 400;
默认值:宽度= 200;断裂;
}

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

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

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

}
返回badgecfg;
}

})();

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

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




代码没有太大的不同:


(pebadge=function()
var divs=document.getElementsByTagname('div');
var b = [];
(var = 0;div[我];我+ +){
如果(div[我].className.indexOf(landingbadge)! = = 1){
b.推动(divs[i]);
}

}
(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[我].parentNode.replaceChild(div,b[我]);
}

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

很棒的徽章!

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

var坳,宽度;
开关(badgecfg.尺寸)
大小写“small”:宽度=100;中断;
大小写:宽度= 400;
默认值:宽度= 200;断裂;
}

开关(badgecfg.skin)
案例“蓝色”:col='ccf';中断;
case ' green: col = ' #cfc';break;
默认值: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 = chunk [j].split(' -');
如果(vp[1]){
badgecfg[vp[0]]=vp[1];
}

}
返回badgecfg;
}

})();

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

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


(pebadge=function()
var divs=document.getElementsByTagname('div');
var b = [];
(var = 0;div[我];我+ +){
if(divs[i].classname.indexof('skinedbadge')!==- 1){
b.推动(divs[i]);
}

}
(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文件夹。

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