Mar 21, 2007

架构符合XHTML标准的博客

费了点时间让自己的网页上都贴上了Valid XHTML的标签,于是顺便扯几句。

XHTML,其实就是一个标准,至于来历,看我后面的扯谈。架构一个符合XHTML标准的网站并不难,可世界上的网站,真能符合w3C颁布标准的还真不多。因为养成的习惯要改并不是那么容易的,而且浏览器也都支持那些旧的标准,这也是不少网站对浏览器兼容不好的问题所在。如果要验证自己的网站是否符合这一标准,只要去 validator.w3.org/ 输入自己的网址就可以了。

如果你的网站不符合XHTML,这不代表它有什么太多的劣势(google的网页没一个符合的),而是你的网页有潜在的兼容性问题,结构上的问题可能让你耗费更多的时间来调整网页代码,使其在不同浏览器中看起来一致。我之前就一直不知道<li>必须嵌置在<ol>或者<ul>中,结果不得不花费时间来调整css代码。

而要架设一个符合XHTML的博客。

  • 最简单的开始就是先掌握XHTML相对于之前HTML的区别。http://www.w3schools.com/ 上给出了详细的说明,还可以做一下上面的Quiz。
  • 其次就是找一个比较好的平台。wordpress,blogspot,都是不错的平台,用他们编置出来的网页,错误相当的少(一般不会超过100)。
  • 尽可能的使用css来控制你网页上元素的性质(颜色,长宽,空白,一切的一切)。将这些元素从XHTML中剥离出来,也是他们的一个目标之一。
  • 随后就是利用上面的http://validator.w3.org/去验证你的网站,它对错误都会给出详细的说明,调试起来很方便。
  • 安装Firefox,使用它的插件的Web Developer进行各种调试纠错,会大大缩短你用的时间。

当你完成所有的纠错以后,就只剩下最后一件事情了。 :) ,在你的网页中插入如下的代码:

<a href="http://validator.w3.org/check?uri=referer" target="_blank">Valid XHTML</a>

【注】
说XHTML,就不可避免的从HTML说开去,自然,也就要提到Berners Lee这位互联网的鼻祖。
话说我刚上小学那会儿,还是个向往当天文学家的主,全因为有一年哈勃上了天;但当时的我却不知道(嗯,绝大多数人都不知道)―正是在那一年Berners Lee在欧洲的粒子实验室倒腾出了万维网。时至今日,你还能看到当年网站的屏幕截图
也正是Berners Lee,领导建立了现如今互联网的标准语言,其中就包括了大名鼎鼎的HTML,全称就是HyperText Markup Language。因为技术的障碍,之前的HTML不得不相对的松散,也就产生了诸多兼容性的问题,人们用不同的浏览器得到的效果经常会不同;而且,随着发展,website在跨平台信息交流中的作用也日益显现。所以Berners Lee们自然而然的就想到了将其标准化。而XHTML,也就是HTML4.01版,就是标准化过程中的一个里程碑。

Tags:       
Post by SUN @ 11:46 pm | 与时俱进 | Comment (0)
Mar 19, 2007

Ajax Comments Reply

本文永久地址:
http://blog.znsun.com/plugins-list/ajax-comments-reply/

MSN留言风格的Ajax Commens-Reply插件
(
MSN Type Ajax Comments-Reply Plugin)

  • 点击下载版本:1.0β ,最近更新于2007/03/18

原创于懶懶喵日記,后Zhang-Zi根据此版本制作了非常优秀的Ajax Comments-Reply插件,现在这个版本实质是将Zhang-Zi的两个版本(一个是以前的实现msn风格的留言版本,另一个是他现在用的版本)合二为一。因此,这里特别感谢两位作者之前所作的大量努力。此版本主要实现的功能如下:

  • 回复无需刷新。
  • 可以直接在各种页面上(主页,多文章页面,单篇文章)回复留言(默认为5层嵌套),使得讨论更有针对性。

此修订版主要改了一下几个方面:

  • 修改了原插件必须放置在wordpress根目录下的缺点,同时保留了prototype.lite等函数(因为我用的litebox中也用到了prototype.lite【注】litebox是lightbox的精简版本,用以实现图片显示的特殊效果)。
  • 整合了Zhang-Zi的两个不同版本的插件,合并了部分代码,使之达到现在的显示效果。
  • 修改了留言栏的式样,使得符合我的blog风格。
  • 压缩了javascript代码,其中css文件没有压缩,如果有需要,可以参考我的文章:加速Wordpress

压缩包内容,包含在一个comment-reply的文件夹:

  1. readme.html //Read Me
  2. ajax-comments.php //实现在多文章页面上留言
  3. comments.php //实现单页面上的留言
  4. comment.css // css文件,控制评论栏效果
  5. comment.js, parse.js.php //已压缩的 javascript文件
  6. moo.ajax.js, prototype.lite.js, moo.fx.js //prototype.lite 模块
  7. comments-ajax.php //ajax留言处理
  8. comment-reply.php //插件控制
  9. working.gif //Loading留言时候的动态图标
  10. unzip文件夹 //未压缩过的javascript版本

插件安装使用:

  1. 从上面链接下载安装文件,解压缩后得到一个comment-reply文件夹
  2. 把文件夹的comments.php放到模版目录下,覆盖同名文件—请备份旧的comments.php
  3. 将comment-reply文件夹整个放入插件目录。结构如下:
    ---------------Plugins/
    ----------------------/comment-reply/
    ----------------------------comment-reply.php 等文件
  4. 到管理界面启用Ajax Comments-Reply修订版插件。
  5. 在index.php中用以下代码显示评论:

    <?php $pid=$post->ID; $cnum = get_comments_number(); showcomment($pid, $cnum);?>

插件卸载:

  1. 将模版目录下备份的comments.php复原。
  2. 管理界面停用插件或者直接删除此插件文件。

欢迎使用。有任何问题,可在此留言,或者email 到 "qmqsun(AT)gmail.com",当然,也可以去问Zhang-Zi,他的G-talk是"zhang(AT)zhiqiang.org"。 :)

Post by SUN @ 12:57 am | 与时俱进 | Comment (1)
Mar 17, 2007

Google Reader

朋友圈子中,似乎全民blog的热度已经渐渐退去了。剩下还坚守岗位的多半就是真写点儿什么的人。但这不允许半点松懈的年代,哪能容许我们花大量的时间流离于别人的博客啊。于是,rss方式的聚合就成了一些人的首选,我也是……。

我看别人的blog,一直用的RSS Reader这个老牌rss聚合软件,当时Google虽然有自己的reader产品,但是效果差强人意。不过,Google从来没让人失望过。这不,新版本的Google Reader,极大的完善了 RSS聚合功能,浏览界面也有了很大的改观。完全的ajax技术配合强大的google网络,让我们赏阅图文时格外的便捷。下面是我浏览界面的一个截图。

此外Google Reader 还提供了不少相关的附属功能,比方说RSS聚合的javascript输出。
我把自己逛的blog做了一个页面,收在这儿。

blog.znsun.com/rss-feed/

效果相当的不错,只能说Google太有才了~

Tags:
Post by SUN @ 12:09 am | 与时俱进 | Comments (4)
Mar 16, 2007

WP Static Homepage

PLEASE Scroll down for Chinese version

This plugin enables the wp system to convert your dynamic homepage to static index.html, more importantly, keep the content up to date. It can speed up the loading for your homepage.

Readme:

  1. Plugin WP-Cron is needed for this plugin, I've packed WP-Cron v 1.4 in the zip file.
    Please upzip all the files to plugins/static-index, so that it look like:
    ------plugins/
    ------------static-index/
    ----------------static.php
    ----------------wp-cron-static-index.php
    ----------------wp-cron.php
  2. Active two plugins :WP-cron and WP-Cron Static Homepage.
  3. Create a file named index.html in your blog root folder, set
    666 permissions for it.

Well, the system will update index.html automatically (per 15 mins), you may hack wp-cron.php at line 49 to change the time for scheduled exection actions.

More Tips:

  1. You may use the following php to refresh homepage when comments come in.

    <?php
    include (get_settings('siteurl') . "/wp-content/plugins/static-index/static.php");
    ?>

  2. The following script is to demo how to set cookies in the html files.

    <script type="text/javascript">
    function GetCookie(sName, id)
    {
    // cookies are separated by semicolons
    var something = document.getElementById(id);
    if(!something) return 0;
    for (var i=0; i < aCookie.length; i++)
    {
    // a name alue pair (a crumb) is separated by an equal sign
    var aCrumb = aCookie[i].split("=");
    if (sName == aCrumb[0])
    {
    if(sName=="comment_author_10add94cfc29a64b08306c8a8f9edb30")
    something.value = decodeURI(aCrumb[1]);
    else
    something.value=unescape(aCrumb[1]);
    return 1;
    }
    }
    // a cookie with the requested name does not exist
    return 0;
    }
    //please fill in with your own cookie id
    GetCookie("comment_author_8e11b42cc2f3a74aac664cc9afa5baf7", "authorname");
    GetCookie("comment_author_email_8e11b42cc2f3a74aac664cc9afa5baf7", "email");
    GetCookie("comment_author_url_8e11b42cc2f3a74aac664cc9afa5baf7", "url");</script>

Post by SUN @ 5:22 pm | 与时俱进 | Comments (2)
Mar 14, 2007

推荐一款在线播放器

本文于2009年08月20日再次更新

Web2.0的时代,不少人喜欢在自己的blog或者网站上放音乐,不可否认,我也喜欢。
但如何加载音乐的确是个问题,因为大多数在线播放器都会在加载该页面的同时读取相应的mp3文件,这样就降低了网页浏览速度。所以我碰到加载速度慢的mp3,一般都是直接block掉,免得影响自己的浏览速度。

这儿推荐一款flash在线播放器,flash在线播放器的最大的好处就是加载速度快,不会影响网页浏览的速度(至于音乐的加载速度,主要决定于你的带宽)。
如果你是wordpress的用户,我推荐你安装XSPF_Player插件

如果你的blog不是wordpress系统或者你想在自己的其他网页上添加播放器,请用如下的代码:

<object type="application/x-shockwave-flash" data="http://www.znsun.com/Music/player_mp3_maxi.swf" width="200" height="20">
<param name="wmode" value="transparent" />
<param name="movie" value="http://www.znsun.com/Music/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=歌曲地址栏&amp;bgcolor1=ffffff&amp;bgcolor2=cccccc&amp;buttoncolor=999999&amp;buttonovercolor=0&amp;slidercolor1=cccccc&amp;slidercolor2=999999&amp;sliderovercolor=666666&amp;textcolor=0&amp;showvolume=1&amp;autoplay=0&amp;loop=0" />
<p>Texte alternative</p>
</object>

注:
上面包含了两段播放代码,针对不同的浏览器有效,满足不同人士需要啦。
这个播放器本身是在我网站上的,你可以下载后再上传到自己的网站上。
其中

  1. 歌曲地址栏请包含完整的歌曲 URL代码
  2. &autoplay=0 用来控制是否自动播放(1为自动播放),如果不需要请删除此部分代码。
  3. &loop=0用来控制是否重复播放(1为重复播放),如果不需要请删除此部分代码。

更多的参考请参阅:http://flash-mp3-player.net/

最后的实际效果见下,自动播放被我取消了,请自行点击开始欣赏。

Texte alternatif

Tags:     
Post by SUN @ 5:07 pm | 与时俱进 | Comment (0)

PHP判断浏览器类型和浏览器语言

用php语言来判断浏览器类型其实很简单。
因为浏览器在和服务器连接时候都会先发送一些包含自己信息的内容(浏览器类型、语言啦)。

这里我们主要分析的是_SERVER["HTTP_USER_AGENT"](浏览器类型)和_SERVER["HTTP_ACCEPT_LANGUAGE"](浏览器语言)。

我们所要做的就是把这些内容读出来,然后用strpos或者preg_match函数来对比就可以了。

判断浏览器类型:

<?php echo $_SERVER["HTTP_USER_AGENT"]; ?>

判断浏览器语言:

<?php echo $_SERVER["HTTP_ACCEPT_LANGUAGE"]; ?>

判断浏览器类型的具体程序如下:

<?php
if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE 8.0"))
echo "Internet Explorer 8.0";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE 7.0"))
echo "Internet Explorer 7.0";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE 6.0"))
echo "Internet Explorer 6.0";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Firefox/3"))
echo "Firefox 3";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Firefox/2"))
echo "Firefox 2";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Chrome"))
echo "Google Chrome";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Safari"))
echo "Safari";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Opera"))
echo "Opera";
else echo $_SERVER["HTTP_USER_AGENT"];
?>

判断浏览器语言的具体程序如下:

<?php
$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 4); //只取前4位,这样只判断最优先的语言。如果取前5位,可能出现en,zh的情况,影响判断。
if (preg_match("/zh-c/i", $lang))
echo "简体中文";
else if (preg_match("/zh/i", $lang))
echo "繁體中文";
else if (preg_match("/en/i", $lang))
echo "English";
else if (preg_match("/fr/i", $lang))
echo "French";
else if (preg_match("/de/i", $lang))
echo "German";
else if (preg_match("/jp/i", $lang))
echo "Japanese";
else if (preg_match("/ko/i", $lang))
echo "Korean";
else if (preg_match("/es/i", $lang))
echo "Spanish";
else if (preg_match("/sv/i", $lang))
echo "Swedish";
else echo $_SERVER["HTTP_ACCEPT_LANGUAGE"];
?>

这是根据上面的代码做出来的一个小程序:
www.znsun.com/Download/test.php
判断浏览器类型主要是靠分析_SERVER["HTTP_USER_AGENT"]的内容,而分析浏览器语言则是分析_SERVER["HTTP_ACCEPT_LANGUAGE"]。

Tags:   
Post by SUN @ 12:44 am | 与时俱进 | Comments (8)