09 五 08 用Flot插件在web中实现数据的曲线图
参加过“数字图书馆高级研讨班”的朋友们，肯定对林夏老师的信息可视化课程印象深刻。一般来说，信息可视化的程序，都是采用桌面程序来实现。这是因为桌面程序有丰富的API支持，实现起来比较容易。但是，相对于web，桌面程序不利于使用和传播，因此，如何在web中轻松实现信息的可视化，曾经是个棘手的问题。Java Applet、flash、SVG、ActiveX、JFreeChart、Silverlight等等技术，都给出了解决方案，但要求的技术成本有点高的。其实，使用简单的javascript，一样可以满足我们在web中实现信息可视化的大部分需求，只是因为相关标准不完善（例如canvas标签很长时间得不到承认和支持），一直以来不受重视。不过，随着web2.0的兴起，javascript成为宠儿，许多javascript框架出现之后，使用javascript在web中实现信息可视化方面，迅速成为焦点。
采用javascript来做这一事情的好处是显而易见的，所以，大部分javascript框架都实现了丰富的绘图接口，并且有更多的第三方插件基于基本的javascript框架，对相关功能进行封装，以便于我们更好的应用。本文中介绍的Flot插件就是其中的佼佼者。
Flot是基于jQuery的、纯脚本的、开源的插件，由丹麦的iola工作室开发，它的官方站点在http://code.google.com/p/flot/，上面有例子和源码下载。
接下来，如下图所示，我们使用Flot来实现一个简单的例子，将每个月和每天的入馆人数用一条曲线图展示出来（马上下载本例子的源码）。
Tags: canvas, chart, flot, graph, javascript, plot, visualization, web, web2.0, 信息可视化, 开放代码, 曲线图, 源码下载
26 四 08 一个solaris下的自动备份数据的例子
一、编写脚本内容，并命名为backupdata，置于根目录：
#!/bin/sh
#备份文件名
backupfile=”`date +”%Y%m%d”`.tar”
export backupfile
#删除旧备份
rm /backup/*.tar
#进入待备份数据目录
cd /u/data/
#打包data文件夹下的database目录
tar cvf /backup/$backupfile database
#将ftp相关信息输出到netrc，使用netrc实现ftp自动上传
#ftp用户名：backup，密码backup
echo “default login backup password backup”>/.netrc
#初始化,macro define initial
echo “macdef init”>>/.netrc
#文件的传输方式设为二进制
echo “bin”>>/.netrc
#ftp服务器路径,backup文件夹
echo “cd backup”>>/.netrc
#本地路径
echo “lcd /backup”>>/.netrc
#上传
echo “put $backupfile”>>/.netrc
#完成后断开连接
echo “bye”>>/.netrc
#输出空白行，说明macdef定义结束
echo “”>>/.netrc
#设置.netrc文件权限，仅能被本用户访问
chmod 600 /.netrc
#执行命令，访问ftp
/usr/bin/ftp 192.168.0.10
(全文…)
Tags: crontab, ftp备份, shell, solaris, 例子, 数据备份, 自动备份, 计划任务
26 四 08 一个基于prototype框架的Ajax跨域例子
本文旨在提供可运行的例子，相关的知识点，参见以下链接：
源码运行之前，请先下载以下两个文件，并与domainA.html放在同一目录中：
- prototype框架：http://www.prototypejs.org/assets/2008/1/25/prototype-1.5.1.2.js
- prototype框架的跨域插件：http://www.mellowmorning.com/wp-content/uploads/2007/11/transport.js
源码：
Tags: Ajax, prototype, Thierry Schellenbach, 例子, 源码, 跨域
22 五 07 根据浏览器分辨率自动调整网页宽度的一个例子
）及更高的分辨率，将逐步成为主流。就用户的使用习惯而言，纵向滚动是很自然的，但横向滚动，就让人恼火了。所以，当前的大部分web页面设计，均采用800px宽度居中的形式来设计。这样的好处无疑是很明显的，较好的兼容性，无横向滚动，并且由于固定大小，界面可以设计得很美观。Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=GBK”
/>
<meta name=”Security” content=”public” />
<meta name=”DC.Rights” content=”Copyright (c) 2007 by Johnson
Zhong” />
<meta name=”KEYWords” contect=”xhtml sample” />
<meta name=”DEscription” contect=”xhtml sample” />
<meta name=”Author” contect=”Johnson Zhong” />
<meta name=”Robots” contect=”all” />
<style type=”text/css”>
BODY{
MARGIN: 0px;
}
#wrap {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px;
BACKGROUND: #ffffff; PADDING-BOTTOM: 10px; OVERFLOW: hidden;
WIDTH:
expression(this.offsetParent.clientWidth<800?”770px”:”99%”);
PADDING-TOP: 2px; min-width: 770px
}
#main {
CLEAR: both; BACKGROUND: #fff; MARGIN-TOP:
6px;
}
#leftbar {
BORDER-RIGHT: #dddddd 1px solid; BORDER-LEFT:
#dddddd 1px solid; BORDER-TOP: #dddddd 1px solid; BORDER-BOTTOM:
#dddddd 1px solid; BACKGROUND: #F2F9DC; FLOAT: left;
PADDING-BOTTOM: 5px; WIDTH: 188px; height:100%
}
#cenbar {
FLOAT: left; PADDING-BOTTOM: 10px; WIDTH:
100%;
}
#sublogopanel {
CLEAR: both; width:100%; height:80px;
position:relative; BACKGROUND: url(/_img/ad-bg.jpg) repeat-y
left;
}
#rightbar {
FLOAT: left; PADDING-BOTTOM: 10px; OVERFLOW:
hidden; WIDTH: 180px; margin-left:0px; margin-top:0px;
background:#cccccc
}
</style>
<title>xhtml sample!</title>
</head>
<body>
<!–body层开始–>
<div id=”wrap”>
<div id=”main”>
<table width=”100%” height=”100%”
cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td width=”188″
height=”100%” valign=”top”>
<!–左边–>
<div id=”leftbar”>
<table
width=”100%” height=”100%” cellspacing=”0″ cellpadding=”0″
border=”0″>
<tr>
<td
height=”72″ valign=”top”> </td>
</tr>
</table>
</div>
<!–左边结束–>
</td>
<td width=”100%”
valign=”top”>
<!–中间内容–>
<div id=”cenbar”>
<table width=”100%”
height=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td
width=”100%”>
<div
id=”sublogopanel”>
<img
height=”80″ width=”388″
src=”/_img/sublogo_esource.jpg”>
</div>
</td>
</tr>
</table>
</div>
<!–中间内容结束–>
</td>
<td width=”180″
valign=”top”>
<!–右边–>
<div id=”rightbar”>
<table width=”100%”
height=”72″>
<tr>
<td
width=”180″ height=”1″>
</td>
</tr>
</table>
</div>
<!–右边结束–>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
以上代码中，将页面树向分为三栏，其中左右栏宽度固定，中间栏宽度自动调整。
加红的两处地方比较关键，第一处：
WIDTH:
expression(this.offsetParent.clientWidth<800?”770px”:”99%”);
通过在CSS样式表中应用javascript判断：如果当前窗口宽度小于800，则页面宽度为770px，否则为当前窗口宽度*99%；
<img height=”80″
width=”388″ src=”/_img/sublogo_esource.jpg”>
在中间层插入一张图片，确保当用户窗口宽度小于800时候，页面宽度不在缩小。
浏览效果分别如下：
1280*1024
1024*768
800*600
Tags: CSS, javascript, xhtml, 宽度, 开放代码, 浏览器, 窗口
07 三 07 根据用户浏览器语言向用户显示合适的页面
我们的用户来自五湖四海，一个成功的网站，应该具备多种语言版本以适应不同国家的用户。一些网站的做法是提供了语言选择的链接，一些网站则直接根据用户所使用的语言直接跳转到相应的页面。
要知道用户所使用的语言，一个简单的办法就是根据Http
Request信息检测到用户所使用的浏览器的语言代码。知道了用户所使用的语言，即可跳转到相应语言版本的页面对用户请求进行反馈。
在ASP中，我们可以通过Request对象的ServerVariables集合中的HTTP_ACCEPT_LANGUAGE值获得我们想要的语言信息，下面是一个用ASP写成的简单的跳转例子。
|
‘获取客户端浏览器HTTP_ACCEPT_LANGUAGE值 Request.ServerVariables(”HTTP_ACCEPT_LANGUAGE”) ‘将该值转为小写
‘取该值前两位
strArea = if Response.Redirect(”cn/index.asp”) else Response.Redirect(”en/index.asp”) end if |
HTTP_ACCEPT_LANGUAGE的相关值如下：
Afrikaans (af)
Albanian (sq)
Basque (eu)
Bulgarian (bg)
Byelorussian (be)
Catalan (ca)
Chinese (zh)
Chinese/China (zh-cn)
Chinese/Taiwan (zh-tw)
Chinese/Hong Kong (zh-hk)
Chinese/singapore (zh-sg)
Croatian (hr)
Czech (cs)
Danish (da)
Dutch (nl)
Dutch/Belgium (nl-be)
English (en)
English/United Kingdom (en-gb)
English/United Satates (en-us)
English/Australian (en-au)
English/Canada (en-ca)
English/New Zealand (en-nz)
English/Ireland (en-ie)
English/South Africa (en-za)
English/Jamaica (en-jm)
English/Belize (en-bz)
English/Trinidad (en-tt)
Estonian (et)
Faeroese (fo)
Farsi (fa)
Finnish (fi)
French (fr)
French/Belgium (fr-be)
French/France (fr-fr)
French/Switzerland (fr-ch)
French/Canada (fr-ca)
French/Luxembourg (fr-lu)
Gaelic (gd)
Galician (gl)
German (de)
German/Austria (de-at)
German/Germany (de-de)
German/Switzerland (de-ch)
German/Luxembourg (de-lu)
German/Liechtenstein (de-li)
Greek (el)
Hindi (hi)
Hungarian (hu)
Icelandic (is)
Indonesian (id or in)
Irish (ga)
Italian (it)
Italian/ Switzerland (it-ch)
Japanese (ja)
Korean (ko)
Latvian (lv)
Lithuanian (lt)
Macedonian (mk)
Malaysian (ms)
Maltese (mt)
Norwegian (no)
Polish (pl)
Portuguese (pt)
Portuguese/Brazil (pt-br)
Rhaeto-Romanic (rm)
Romanian (ro)
Romanian/Moldavia (ro-mo)
Russian (ru)
Russian /Moldavia (ru-mo)
Scots Gaelic (gd)
Serbian (sr)
Slovack (sk)
Slovenian (sl)
Sorbian (sb)
Spanish (es or es-do)
Spanish/Argentina (es-ar)
Spanish/Colombia (es-co)
Spanish/Mexico (es-mx)
Spanish/Spain (es-es)
Spanish/Guatemala (es-gt)
Spanish/Costa Rica (es-cr)
Spanish/Panama (es-pa)
Spanish/Venezuela (es-ve)
Spanish/Peru (es-pe)
Spanish/Ecuador (es-ec)
Spanish/Chile (es-cl)
Spanish/Uruguay (es-uy)
Spanish/Paraguay (es-py)
Spanish/Bolivia (es-bo)
Spanish/El salvador (es-sv)
Spanish/Honduras (es-hn)
Spanish/Nicaragua (es-ni)
Spanish/Puerto Rico (es-pr)
Sutu (sx)
Swedish (sv)
Swedish/Findland (sv-fi)
Thai (ts)
Tswana (tn)
Turkish (tr)
Ukrainian (uk)
Urdu (ur)
Vietnamese (vi)
Xshosa (xh)
Yiddish (ji)
Zulu (zu)
Tags: HTTP_ACCEPT_LANGUAGE, 开放代码, 浏览器, 语言, 跳转
