编织の梦想

CSS新手阅读的CSS技巧十则

Sctercn@Gmail.com (admin) — Thu, 24 Jul 2008 13:14:01 +0800

这十则CSS技巧汇编于网络，作为老手已经司空见惯了，也没有什么新意，但温故而知新，或许阅读一遍也有一定的启发，本文主要面对CSS新手朋友，有一些东西或许不是搞的很明白。而这十则CSS技巧能促进你的学习与编码技巧，希望大家能认真阅读。

一、CSS字体属性简写规则

　　一般用CSS设定字体属性方法：
　　font-weight:bold;
　　font-style:italic;
　　font-varient:small-caps;
　　font-size:1em;
　　line-height:1.5em;
　　font-family:verdana,sans-serif;
　　可以把它们全部写到一行上去：
　　font: bold italic small-caps 1em/1.5em verdana,sans-serif;
　　这样看起来是不是简单多了，只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及font-varient，他们会使用缺省值，这点要记上。

二、CSS border的缺省值

　　通常可以设定边界的颜色，宽度和风格，如：
　　border: 3px solid #000;
　　这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。
　　如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

三、给元素同时使用两个类

　　一般一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：
　　<p class=”text side”>…</p>
　　同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
　　补充：对于一个ID，不能这样写<p id=”text side”>…</p>也不能这样写

四、CSS用于文档打印

　　许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。
也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
　　<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” />
　　<link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />
　　第1行就是显示，第2行是打印，注意其中的media属性。
　　但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮等。

五、CSS图片替换技巧

　　一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。
　　比如你想整个卖东西的图标，你就用了这个图片：
　　<h1><img src=”widget-image.gif” alt=”Buy widgets” /></h1>
　　这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
　　<h1>Buy widgets</h1>
　　但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：
　　h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
　　注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

六、CSS box模型的另一种技巧

　　这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：
　　#box { width: 100px; border: 5px; padding: 20px }
　　这样调用它：
　　<div id=”box”>…</div>
　　这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
　　但用CSS也可以达到同样的目的，让它们显示效果一致。
　　#box { width: 150px }
　　#box div { border: 5px; padding: 20px }
　　这样调用：
　　<div id=”box”><div>…</div></div>
　　这样，不管什么浏览器，宽度都是150点了。

七、CSS设置块元素水平居中对齐

　　如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：
　　#content { width: 700px; margin: 0 auto }
　　你会使用 <div id=”content”> 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：
　　body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
　　这会把网页内容都居中，所以在Content中又加入了:text-align: left 。
　　另外DTD不正确也会引起问题，可以参考这篇文章：
　　　

八、用CSS来处理垂直对齐

　　垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。
　　CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。

九、CSS在容器内的定位

　　CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：
　　#container { position: relative }
　　这样容器内所有的元素都会相对定位，可以这样用：
　　<div id=”container”><div id=”navigation”>…</div></div>
　　如果想定位到距左30点，距上5点，可以这样：
　　#navigation { position: absolute; left: 30px; top: 5px }
　　当然，你还可以这样：
　　margin: 5px 0 0 30px
　　注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。
　　更多的CSS布局与技术，请参考52CSS.com的大量教程。

十、直通到屏幕底部的背景色

　　在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：
　　#navigation { background: blue; width: 150px }
　　较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？
　　不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。
　　body { background: url(blue-image.gif) 0 0 repeat-y }
　　此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。

继续阅读...

分类: 设计开发 | Tags: Dreamweaver HTML Ajax CSS | 添加评论(0)

216种Web安全颜色，Web安全颜色是什么？ (2008-7-16 14:55:32)

70个流行的AJAX应用的演示和源码下载 (2008-7-15 22:2:46)

8个简单实用的CSS秘诀 (2008-7-13 19:23:52)

Generic Malware Debunking Post (2008-7-13 19:13:41)

关于DOCTYPE 使用 (2008-4-19 13:8:30)

Google改进后的Flash索引

Sctercn@Gmail.com (admin) — Fri, 18 Jul 2008 19:52:42 +0800

我们收到过许多期望我们改进对Adobe Flash文件索引问题的建议。今天，索引团队的软件工程师 Ron Adler 和Janis Stipins，将就我们最近在Flash文件索引编制上取得的改进与大家进行更深入的探讨和交流。

问：目前哪些Flash文件能更好地被谷歌索引到呢？
我们改善了对所有类型SWF文件中的文字内容的索引能力，其中包括像按钮或菜单这样的Flash“小工具”，独立自成一体的 Flash 网站，以及所有介于两者之间的Flash形式。

问：这些Flash文件中的哪些内容能被谷歌更好地索引呢？
用户在与您的Flash文件互动过程中所看到的一切文本内容都将得到更好地索引。如果您的网站包含Flash，其中的文字内容会被Google用来生成您网站的摘要。同时，出现在Flash文件中的文字可以用来匹配用户在Google搜索框中输入的搜索查询。

除了索引Flash文件中的文本内容，我们现在也能够识别在Flash文件中的出现的URL，并且把这些链接纳入搜索引擎机器人爬行的目标队列中，就像对待那些非Flash网页中出现的URL一样。例如，如果您的Flash 应用程序中包含指向您网站内部页面的链接，Google现在能够更好地发现并抓取您的网站。

问：那么Flash文件中包含的非文本内容呢，比如图片？
目前，我们只能识别和索引Flash文件中的文本内容。如果您的Flash文件里只有图片，我们将不能识别和索引出现在这些图片中的任何文字。类似地，如果一个Flash按钮没有任何附属的文字的话，我们将无法对这类指向特定链接的Flash按钮生成任何錨文本。

还应注意到的是，我们无法索引 FLV 文件，比如在 YouTube 上播放的视频，因为这些文件没有包含任何文字元素。

问： Google是怎样识别Flash文件里的内容呢？
我们开发出了一种算法，这种算法可以使Google机器人能够模仿人类通过点击按钮、输入内容等方式来了解Flash文件。我们的算法能够记住沿途它遇到的所有文字内容，其后这些内容都能被索引到。我们无法告诉您更多的保密细节，但是我们可以告诉您，通过使用Adobe的新型可检索性SWF数据库，这种算法的有效性得到了进一步提高。

问：我怎样做才能使Google索引到我的Flash文件中出现的文本呢？
基本上，您不需要做任何事情。我们已经取得的技术改进，使这项功能的实现，无需网页设计者或网站管理员做任何特别的操作。如果您的网站上有Flash内容，我们会在现有技术能力的基础上，尽最大能力对它们自动进行索引（详见接下来的问题）。

也就是说，您应该了解 Google现在已经可以识别那些展现在您网站访问者面前的文字信息。如果你希望 Google忽略一些次要内容，如"版权"或"加载"等信息，您可以考虑把那些文本替换为图片，这样它们就不会被我们抓取到了。

问：在索引Flash文件上，Google遇到的主要技术难题是什么？
目前的问题主要体现在三个方面，这也正是我们在努力解决的：

1、Googlebot不能执行某些类型的JavaScript程序。因此，如果您的网页通过JavaScript加载Flash文件的话，Google可能无法识别该Flash文件，在这种情况下，它将不会被索引到。
2、目前，我们还无法把那些通过您的Flash文件加载的外来内容和您的Flash文件整合起来。也就是说，如果您的Flash文件加载了一个HTML文件，或一个XML文件，或另一个SWF文件等等，Google将分别索引这些资源，但是它们将不会被认为是您Flash文件内容的一部分。
3、虽然我们能够索引在网络上出现的几乎所有语种的Flash，但在识别用双向语言书写的Flash内容还有一定困难。在这个问题解决之前，我们将无法识别和索引Flash文件中的希伯来文或阿拉伯文的内容。

但是，在这些问题上我们也已经取得了相当的进展，所以，敬请期待我们进一步的改进！

附：

改进之前搜索结果中的Flash网站

改进之后搜索结果中的Flash网站, 搜索查询 [nasa deep impact animation]

继续阅读...

分类: SEO | Tags: Google SEO 网站推广 | 添加评论(0)

Google搜索结果页面点击分配 (2008-7-18 19:38:38)

Bodog’s Battle of the Brand (2008-7-15 15:19:19)

Yahoo Patents Anchor Text Relevance in Search Indexing (2008-7-14 19:30:37)

Content analysis and Sitemap details, plus more languages (2008-7-13 10:3:53)

Google Releases Protocol Buffers Into the Wild (2008-7-10 18:57:27)

Google搜索结果页面点击分配

Sctercn@Gmail.com (admin) — Fri, 18 Jul 2008 19:38:38 +0800

07年的时候在搜索引擎研究领域出现一张Google和百度的点击热图（如下），图的出处未知，但是从图中可以看出google和百度用户行为的显著区别，也可以看出在这两个搜索引擎中排名网站的流量分配的大概情况。

Google的用户点击呈现明显的黄金三角，搜索用户流量基本导入首页排名前三的网站，而百度的用户点击则是比较杂乱。这张图曾经被很多SEO用来强调关键词排名的重要性，尤其是“Google排名势必前三甲”理论的重要。但是这张图虽然给出一个SERP点击热点概况，却无法从中知道在Google首页的10个结果中不同排名之间的真正点击比例。

而在06年，康乃尔大学的学者们进行过一次eye tracking试验，通过试验参与者们使用google的多次搜索查询比较获得了一份相对真实可靠的Google搜索结果页面的用户行为分析。试验结果如下图：

从图中可以看出，Google排名前三位的网站几乎分流了搜索流量的80%，而第一名更是获得了超过半数的搜索流量，第二名和第三名所获得的点击则远远低于排名第一的网站，前三位点击比例大概是4：1：0.7。第五名网站获得的点击超过第四位（在标准浏览器界面中，Google搜索结果页面第一屏是显示5 个结果，这一结果与第十名点击大于第九名一起表明，首屏最后一个结果获得的注意力是大于倒数第二位的）。排名第七位获得的点击是最少的，原因可能在于用户在浏览过程中下拉页面到底部，这时候就只显示最后三位排名网站，第七名便被浏览习惯所忽略。调查结果还显示Google搜索结果页面第二页第一位排名的网站所获得的点击只有首页排名第十网站的40%。

关键词排名一直是被SEO所重视的，而获得SERP首页排名更是最大追求。但是从这份研究结果可以看出，即使网站排名进入首页，所获得的点击流量还是有很大差异的。所以要追求好的搜索流量，前三甲是势在必得，而第一位排名则更应该是最终目标，毕竟对于一个2万流量的搜索关键词第一名就劫持走了一万了。

这份06年的调研对于现在做SEO而言依旧是有参考价值的，虽然现在的Google搜索结果页面与当时相比有不少变化，譬如增加了sitelinks以及搜索结果的多样化，但是对于中文关键词搜索而言，google搜索结果页面的变动还是比较少的。而这个调研结果只具备参考价值的原因在于这次试验所做的关键词搜索数量有限且参与实验者基本为学生，不能完全代表Google用户群体，而且eye tracking试验本身就是很难做到准确度的。当然Google搜索结果页面的点击分配和流量分配到底怎样，Google自己是了解的，只是估计没有我们是没有机会知道了。

继续阅读...

分类: SEO | Tags: SEO Google | 添加评论(0)

Google改进后的Flash索引 (2008-7-18 19:52:42)

Bodog’s Battle of the Brand (2008-7-15 15:19:19)

Yahoo Patents Anchor Text Relevance in Search Indexing (2008-7-14 19:30:37)

Content analysis and Sitemap details, plus more languages (2008-7-13 10:3:53)

Google Releases Protocol Buffers Into the Wild (2008-7-10 18:57:27)

216种Web安全颜色，Web安全颜色是什么？

Sctercn@Gmail.com (admin) — Wed, 16 Jul 2008 14:55:32 +0800

Web 安全颜色是浏览器使用的 216 种颜色，与平台无关。在 8 位屏幕上显示颜色时，浏览器将图像中的所有颜色更改成这些颜色。216 种颜色是 Mac OS 的 8 位调色板的子集。通过只使用这些颜色，您为用于 Web 而制作的图片在设置为以 256 色显示的系统上就一定不会出现仿色。在 Adobe 拾色器中识别 Web 安全颜色：点按拾色器左下角的“只有 Web 颜色”选项，然后选取拾色器中的任何颜色。选中此选项后，所拾取的任何颜色都是 Web 安全颜色。将非 Web 颜色更改为 Web 安全颜色：如果选择非 Web 颜色，则 Adobe 拾色器中的颜色矩形旁边会显示一个警告立方体 “颜色不是 Web 安全色”图标。点按警告立方体选择最接近的 Web 颜色。（如果未出现警告立方体，则所选的颜色是 Web 安全颜色。）使用“颜色”调板选择 Web 安全颜色： 1. 点按“颜色”调板选项卡，或选取“窗口”>“颜色”，查看“颜色”调板。 2. 选取选择 Web 安全颜色的选项： * 从“颜色”调板菜单中选取“保证四色曲线图 Web 安全”。选中该选项后，在“颜色”调板中选取的任何颜色都是 Web 安全颜色 * 从“颜色”调板菜单中选取“Web 颜色滑块”(Photoshop)，或从“颜色”调板菜单中选取任一“滑块”选项 (ImageReady)。默认情况下，在拖移“Web 颜色滑块”时，Web 颜色滑块紧贴着 Web 安全颜色（由勾号指示）。（如果要覆盖 Web 安全颜色选区，请在拖移滑块时按住 Alt 键 (Windows) 或 Option 键 (Mac OS)。）如果选取非 Web 颜色，“颜色”调板左侧的四色曲线图上方会出现一个警告立方体 “颜色不是 Web 安全色”图标。点按警告立方体选择最接近的 Web 颜色。在 ImageReady 中，在警告图标周围拖移以选择其他接近的 Web 颜色。（如果未出现警告立方体，则所选的颜色是 Web 安全颜色。）注释：在 Photoshop 中，必须从“颜色”调板菜单中选取“Web 颜色滑块”，才能查看 Web 安全警告立方体。在 ImageReady 中，用任何颜色滑块选项都能查看警告立方体。

#000000	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF
#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF
#660000	#660033	#660066	#660099	#6600CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF
#990000	#990033	#990066	#990099	#9900CC	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF
#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF

继续阅读...

分类: 设计开发 | Tags: HTML CSS | 添加评论(0)

CSS新手阅读的CSS技巧十则 (2008-7-24 13:14:1)

8个简单实用的CSS秘诀 (2008-7-13 19:23:52)

Generic Malware Debunking Post (2008-7-13 19:13:41)

关于DOCTYPE 使用 (2008-4-19 13:8:30)

Meta标签的强大功效之Meta标签详解 (2008-4-19 12:58:45)

70个流行的AJAX应用的演示和源码下载

Sctercn@Gmail.com (admin) — Tue, 15 Jul 2008 22:02:46 +0800

Ajallerix : AJAX, simple, fast Web image gallery demo ; at Novell
AJAX - microlink pattern tutorial : A microlink is a link that opens up content below it.
Ajax BBC News RSS Reader : demo by Nigel Crawley
AJAX Chat in Python with Dojo : at AquaAjax
Ajax Chess : multiplayer chess
Ajax examples at BackBase : examples demonstrating several aspects of the Backbase technology.
Ajax examples at Rico : Inner HTML, JavaScript updater etc.
Ajax examples using ColdFusionMX, SQLServer, SOAP : Contact Manager, NOAA 7 Day Forecast code and demos.
Ajax Feed TV : News feed
Ajax inline dictionary : Highlight any text on this site then right click. A tooltip containing the definition of the selected word should show up.
Ajaxload : Ajax loading gif generator.
Ajax Login Demo : Creating a secure login system using XMLHttpRequest
Ajax Newsletter Signup : A newsletter signup form that shows Thank You on the same page.
ajaxProject : Project Management applicaiton with rich UI
Ajax Rater : A star rating system that uses Ajax.
AJAX-S : An Ajax-based slideshow system.
AJAX Spell Checker : spell check text / form content.
Ajax Toolbox : Tools for the Ajax Developer
Amazon Catalog Tree : Amazon Catalog Tree
Amazon Zuggest : Amazon product suggestion (like google suggest)
Askeet by symfony : Digg-like AJAX interactions; open source
Backbase - Ajax Demos : Ajax demos at BackBase
Basic Ajax Examples : Ping, track changes, drop down, Google suggest hack etc at Clearnova
Behaviour : Fading lists, Sortable lists, Dropout boxen, Shaky lists
chat.app : ajax chat
Chihuahua Word Puzzle : daily word puzzles
Coloir : Ajax Slideshow
DHTML arcade/action games : a collection that demonstrate the power of DHTML
DomAPI : Windows Desktop, Outlook-like, RSS Reader
Drag and Drop Shopping Cart Demo : at CyberDummy
Easy AJAX inline text edit 2.0 : edit a piece of text inline
FileChucker : File upload and progress bar at Encodable.com
Gmail Style Check Username AJAX Demo : at CyberDummy
Google Web Toolkit Example Projects : Hello World, Dynamic Table, Desktop App Clone etc
GreyBox : Pop up window using idea of light box.
FiftyFourEleven: Ajax Examples
IntuiCat - ajax Catalogue : Ajax-based Catalogue Demo
jsLINB programming demos : LINB(Lazy INternet and Browser)
JSlog : Ajax logging tool.
JS/UIX Unix Shell : JS/UIX is an UN*X-like OS for standard web-browsers, written entirely in JavaScript.
Lace : free web chat application
Lightbox : simple, unobtrusive script used to overlay images on the current page.
Leightbox : Light Box with inline div’s instead of AJAX calls.
Live Quote Demo : Simple way of creating an updating stock quote table in ajax.
Magnetic Poetry : drag and drop poetry
Metatron Chat Engine : PHP/MySQL/JavaScript powered chat engine
Monket Calendar : online calendar
Multi List Drag Drop Demo : at CyberDummy
NetDirector : open and extensible framework for managing configurations of common open source network services.
nexImage : Image processing demo
Opera Platform : Enabling AJAX applications on mobile phones
Orbeon examples : various examples illustrating the capabilities of OPS, from the OPS Tutorial examples to XForms examples
OVO Suite : Online Virtual Office : virtual office limited demo
phpFreeChat : php Free Chat
S5: A Simple Standards-Based Slide Show System : S5 is a slide show format based entirely on XHTML, CSS, and JavaScript.
script.aculo.us Reflector : image reflector script that uses uses opacity-based fades
Slider Bar Demo : at CyberDummy
SmallestAjax : Smallest Ajax example in the world?
Spell Check demo : by Primal Grasp
Super Maryo World : Japanese game demo
Tacos : Tacos provides a library of useful Tapestry components. This application provides some examples to get you started.
theList : to-do list / bug-tracker
ThickBox : ThickBox is a Lightbox than can show html pages as well as images.
Tooltip.js : Tooltip.js is a simple class to make it possible to add tooltips to your page.
Treehouse Chat : ajax chat
Tudu Lists : open-source to-do lists
WeBoggle : Ajax Boggle
XHTML live Chat : ajax chat
YahooSearchAsYouType : Yahoo search as you type
ZK Demo : demo programs for various components

继续阅读...

分类: 设计开发 | Tags: Ajax | 添加评论(0)

CSS新手阅读的CSS技巧十则 (2008-7-24 13:14:1)

8个简单实用的CSS秘诀 (2008-7-13 19:23:52)

Generic Malware Debunking Post (2008-7-13 19:13:41)

Ajax+PHP分页程序代码 (2008-4-12 15:21:38)

地心游记3D-Journey to the Center of the Earth 3D在线免费观看

Sctercn@Gmail.com (admin) — Tue, 15 Jul 2008 15:43:23 +0800

片名：地心游记3D

又名：地心漫游记/地心冒险

英文片名：Journey to the Center of the Earth 3D

国家/地区：美国

区域：欧美

出品：

发行：华纳 Warner Bros. Pictures

类型：动作冒险科幻

导演：埃里克·布雷维格Eric Brevig Eric Brevig"; 埃里克·布雷维格Eric Brevig 埃里克·布雷维格Eric Brevig 埃里克·布雷维格Eric Brevig } 埃里克·布雷维格

编剧：

主演：布兰登·弗雷泽Brendan Fraser 乔什·哈切森Josh Hutcherson 安妮塔·布雷伊姆Anita Briem 吉安卡洛·卡塔彼安诺Giancarlo Caltabiano

分级：美国PG

上映时间：2008年7月11日

详细剧情

传说，在冰岛的某个火山口之下，隐藏着一条路途，这条路不但直通地球核心，还将通往一个光怪陆离的地心世界。这个被大多数人嗤之以鼻的“无稽之谈”，却让一对兄弟心醉神往--身为大学教授、地质学家的特雷弗（布兰登·弗雷泽），就此提出一套看似稀奇古怪的假说设想，却因此沦为学院笑柄，学术名声几乎毁于一旦；而哥哥马克思则身体力行，为了搜寻传说中的“火山通道”，自此多年前下落不明。
可这些都不能阻挡特雷弗打破沙锅搜寻到底的决心，为了继续研究，他甚至差点无家可归。一次偶然，特雷弗和侄子肖恩（乔什·哈切森）在一本古籍里发现了一张古老的羊皮纸，为了寻个究竟，他们毅然决定依照记载，前往冰岛探险！在沿途，他们还偶遇了美女向导汉娜（安妮塔·布雷伊姆），而汉娜的父亲，正是当年和马克思有所联系的老科学家。按照计划，他们一行将跋涉登山，如果一切顺利，也许在太阳下山之前，便可以收工回家。
然而，一切的确别有洞天！意外的一阵电闪雷鸣，顷刻便将三人劈入了神秘洞穴。洞穴外山石封压，而沿着洞穴往里走的他们，却又不慎踏上了崩塌的地面跌入了无底深渊。更没想到的是，幽深的洞底之下不但有一汪大湖，还竟真有一个神秘的地心世界！稀奇古怪的生物、美轮美奂的奇观，特雷弗的“无稽之谈”终于有了扬眉吐气的机会。可最关键的问题是，离地心滚烫熔岩把他们烤焦之前，仅剩不到48个小时，这三个进了大观园的倒霉鬼，能不能在这之前找到另外一条出路，逃出生天？

看点

自打《国家宝藏》复活了寻宝探险，探宝行家们又开始了浪迹天涯--欲老弥坚的“印第安纳·琼斯”摩拳擦掌，继续穿越的“木乃伊”也打起了中国帝王的主意。可比起小儿科的盗墓冒险，凡尔纳大叔1864年就鼓捣出的科幻经典《地心游记》，才是探险王国的终极选项。1959年问世的一版电影一举斩获3项奥斯卡提名，便是地心游记威力一斑。
没有金刚钻，哪敢揽瓷器活！胆敢挑战经典，《地心游记3D》着实有过人的杀手锏。凡尔纳奇诡绚丽的想象自不必谈，光“史无前例第一部3D大片”的高帽，加上曾打造过《深渊》、《全面回忆》、《珍珠港》等大片特效而获得小金人视效达人导演，就足以让人享够眼球冰淇淋。虽说技术革新大势所趋，投靠3D立体的影片也不在少数，可在此之前，三维的极致也不过是动画、短片或者电影片段，这般全片3D拍摄的感官刺激，吸引力菲浅！试想，试映中仅水虎鱼猛然跃起的场面就吓得观众当即跳弹，加上与食人鱼交战、地下深海探险、古老矿车狂飙，甚至“侏罗纪公园”式的霸王龙捕杀等等，重重惊险绝对值得一看。
有了视效大导詹姆斯·卡梅隆亲自负责开发的3D摄影机系统，也难怪影片底气十足--电影通篇，几乎只有3个主要演员摸爬滚打填充门面。《盗墓迷城》里的冒险大王布兰登·弗雷泽主打耍宝，踏出梦奇地《仙境之桥》的小帅哥乔什·哈切森则继续驰骋于幻想世界...。说到底，有了“活生生”的地心世界初现银幕，哪还需要其他？

其他

上天入地身临其境，坐上深矿列车一路呼啸，闯进地心神秘世界，探究美妙奇景，继而历尽惊险劫后余生，如此惊心动魄之旅，只需要一张电影票的价钱。没错，好莱坞大鳄们齐声令下，这很可能就是未来普及的影视蓝图，而骄傲的以3D为后缀的《地心游记3D》，正是立体电影辉煌时代的序幕。所以，尽管拍摄3D电影仍然复杂重重，本片也更像大型主题公园历险而非真正天马行空的猎奇，可这位第一个吃螃蟹的家伙，还是当仁不让地成为了先驱标杆。
掀开立体酷炫技术的神秘面纱，你会惊奇地发现：3D果然能够让“母猪赛貂蝉”！拍摄时弗雷泽坠下瀑布的大戏，原来不过是“停车场夜晚+演员们倒吊绳索”的简易处理-因为负担不起搭建实景的费用，现场只不过是铺上了黑色塑料的50英尺台子，再用消防水管从高处冲刷，立体处理之后，效果却依然无可比拟。也难怪全新的地心冒险信心满满地瞄准了PG评级的老少咸宜，不是因为老辣的凡尔纳，也不是因为地心幻想的绚丽，而是因为：要轻易抗拒3D瑰奇的外衣，没那么容易！

地心游记3D

继续阅读...

分类: 新闻娱乐 | Tags: 地心游记3D | 添加评论(0)

找不到相关文章，请发表流言

Bodog’s Battle of the Brand

Sctercn@Gmail.com (admin) — Tue, 15 Jul 2008 15:19:19 +0800

Early last week, Bodog Entertainment lost control of over 3000 domain names, including bodog.com due to a default judgment in a patent infringement case. I’m not going to delve into the specifics involving the suit, or the potential ramifications to the web as whole, because that has already been covered in great detail in other places.

Instead, I think there is some great value in taking the time to look at the SEO implications of last week’s domain seizure. In terms of organic search, Bodog has been the 800lb Gorilla for quite some time. Not only did they dominate the SERPS for popular generic gambling phrases, they also enjoyed an extremely high level of search traffic from branded terms. Even to the point that Google returns the word “bodog” as a related search for “poker” and “online poker.”

Now, if you’re new to the SEO game, it’s important to understand that getting to a point where the world’s largest search engine thinks your brand is synonymous for the two most coveted generic phrases within your space is pretty much the equivalent of reaching SEO Nirvana. Obviously, the volume of search traffic being in that type of position produces has a positive impact on the bottom line. But the real question is will the loss of that traffic be as devastating to Bodog as many people are suggesting?

For many other companies in Bodog’s space, I’d say the answer would be an absolute yes. But Bodog has a huge advantage over everyone else, because no one understands how to build and maintain a brand better than they do. Bodog is much more than an online gambling company. They are a digital entertainment company that has successfully established their brand in several different verticals in an extremely short period of time. And they also have an incredible understanding of how to leverage the web.

While they may have lost temporary control of their branded domain names, the plaintiff in the case can’t seize control all the other places on the web where their brand is deeply entrenched. (MySpace, YouTube, Flickr, etc.)

All of that, combined with an extremely proactive PR team who jumped out in front of the story so that it could be leveraged in their favor has put them in a position that will make it fairly easy for them to weather the storm.

In just a little over a week, Bodog has been able to establish over 43,000 links to their new domain.

That has helped put them back in the top 20 for the term “bodog” despite the fact that Google hasn’t even come close to purging all the pages from the original domain, and dozens of opportunistic affiliate spammers are coming out of the woodwork trying to rank for Bodog’s name.

Within the next couple of weeks, I think you’ll see Bodog regain most of their branded SERPS, and then generic phrases will begin coming back as well. It just isn’t possible to suppress a brand with the level of momentum Bodog has for very long.

继续阅读...

分类: SEO | Tags: Google SEO | 添加评论(0)

Google改进后的Flash索引 (2008-7-18 19:52:42)

Google搜索结果页面点击分配 (2008-7-18 19:38:38)

Yahoo Patents Anchor Text Relevance in Search Indexing (2008-7-14 19:30:37)

Content analysis and Sitemap details, plus more languages (2008-7-13 10:3:53)

Google Releases Protocol Buffers Into the Wild (2008-7-10 18:57:27)

Yahoo Patents Anchor Text Relevance in Search Indexing

Sctercn@Gmail.com (admin) — Mon, 14 Jul 2008 19:30:37 +0800

Yahoo was granted a patent this week which describes how anchor text in links may be used to increase the relevancy ranking of a page pointed to by that anchor text. The patent was originally filed in 2002, and it discusses how anchor text might work while naming the Altavista search engine as a possible place where the methods it describes might be implemented. Yahoo acquired the company that owned Altavista, and the technology is theirs.

While the patent is fairly old, it provides some details about how anchor text might be used by a search engine in a search index that may not be widely known.

It’s fairly common knowledge that the major commercial search engines pay attention to the anchor text in links pointing to pages, and may consider a page to be even more relevant for a query term if the term not only appears on a page, but also appears in the linked anchor text pointing to a page. Some pages may even be determined to be relevant for words that they don’t contain, but which show up in links to those pages.

However, we don’t know much about how much weight anchor text might be given when a search engine indexes a page, or if and how some anchor text might be determined to be more important than other anchor text.

We’ve even seen lately some discussion about experiments with two links on the same page, using different anchor text, pointing to the same page passing along relevance to that second page with both links - See Google passes second link’s anchor text.

How Anchor Text is Broken into Tokens to be Weighed

The process is fairly simple. It starts with a search engine collecting a list of pages that have hyperlinks pointing to a specific page.

The anchor text from those links are retrived and may be broken down into one or more tokens. For example, the anchor text pointing to a page might be “Best Louis Armstrong site.”

That anchor text might be broken down into the following tokens:

Best Louis Armstrong site
Louis Armstrong
Louis
Armstrong
Best
Best Louis
Best Armstrong
Best site
A weight might be calculated for each of those tokens, and if the weight for any token exceeds a certain threshold weight, the page it points towards might be indexed under that token.

The weight for tokens, or words and sequences of words, found in the anchor text is calculated using a formula that looks at how often each token can be found in anchor text pointing to that particular page, and how often the token appears in the search engine index.

Example

A web page to be indexed has a number of other pages linking to it.

The page is about the musician, Louis Armstrong.

The first linking page uses the anchor text “Louis.”

The second linking page uses the anchor text “Louis Armstrong.”

The third linking page uses the anchor text “best Louis Armstrong site.”

The fourth linking page uses the anchor text “Satchmo.”

The page to be indexed is highly relevant to the subject “Louis Armstrong” but it’s possible that conventional ranking methods may not rank that page as highly as it might deserve because the precise query terms may not appear in the page as frequently as in other, less relevant, pages. Or there may be many more sites that link to other less relevant pages about “Louis Armstrong”.

Each of the anchor texts pointing to the page may be broken down into tokens like my example for “Best Louis Armstrong site” was above.

When there are several tokens that are pointing to the same page, it might be helpful to see which of the tokens are the most important, and assign weights to those tokens.

This might be done by determining the weight of each token compared to the weight of all tokens pointing to the same page.

Some specific importance criteria might be used in the calculation of the weight of a token.

The greatest importance might be assigned to words that appear the least frequently in the search index, based on the idea that those words are more specifically related to the concept that a user would attempt to express.

A token that appears more frequently in anchor text pointing to a page could be given a higher weight.

Tokens that appear very frequently in the search index, such as “site” or “best”, might be discounted because they do not have specific importance in the context of the subject document.

Every token is assigned a weight and those tokens having a weight that is less than a threshold weight are discounted.

Tokens that are not discounted are are counted as being relevant for the page being indexed, with the tokens having the greatest weights being considered the most relevant.

The Yahoo Patent is:

Method for ranking web page search results
Invented by Andrei Z. Broder and Farzin Maghoul
Assigned to Overture Services, Inc.
US Patent 7,398,461
Granted July 8, 2008
Filed: January 24, 2002

Conclusion

While this patent seems to have been applied for almost a lifetime ago, it provides some insights into the importance of anchor text in ranking pages that anchor text points towards. It also provides some insight into how much weight different words and phrases within anchor text might have when determining the relevancy relationship between those words and a page linked to with them.

Another patent from Yahoo was also granted this week on How Network Usage traffic can be used to in ranking web pages, and in assigning weights to links and link text based upon the frequency of use of those links. I’ve written about that over on the SEM Clubhouse, in How A Search Engine May Use Web Traffic Logs in Ranking Web Pages.

继续阅读...

分类: SEO | Tags: SEO Google | 添加评论(0)

Google改进后的Flash索引 (2008-7-18 19:52:42)

Google搜索结果页面点击分配 (2008-7-18 19:38:38)

Bodog’s Battle of the Brand (2008-7-15 15:19:19)

Content analysis and Sitemap details, plus more languages (2008-7-13 10:3:53)

Google Releases Protocol Buffers Into the Wild (2008-7-10 18:57:27)