08 十二 08 如何通过javascript将客户端时间变成格林威治时间？
Tags: gmt, javascript, utc, 时区, 格林威治时间
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, 信息可视化, 开放代码, 曲线图, 源码下载
08 五 08 请您参观虚拟3d暨大图书馆
Michelle提出的，北京大学的黄翔在blueidea上有过相关的介绍（点这里）。
Tags: 3d, javascript, SWFObject, 图书馆, 暨大, 虚拟
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, 宽度, 开放代码, 浏览器, 窗口
22 三 07 Millennium系统OPAC整合之一：将字符转换成unicode的脚本
这段时间赶着做Millennium系统的OPAC整合，已经七七八八，实在是忙得够呛。
对于此次新系统的OPAC整合工作，虽然受Millennium系统本身的限制甚多，我还是想做好一些，希望能能按照标准的XHTML来编写网页文件，以方便开展下一步的用户自定义模块工作；希望能实现心中的关于用户检索词热点记录系统、关于书目TAGGING系统的一些设想；希望能做出一两个可轻松部署的，独立于网站及自动化系统之外的开源模块。当然这些希望的实现，可能一两个月，也可能半年一年。毕竟Millennium系统从招标到安装，从培训到测试，我都没有接触，现在临阵磨枪，有点压力；另外，工作也不能只做自己感兴趣的东西，有些不感兴趣的事情，也要认真做好。
没太多思路写博客，只能将上午的工作记录一下，都是些细节的东西，不过也耗费了些时间，忽然发现当自己没有状态的时候，写程序真是痛苦不已。
呵呵，废话就不说了，讲讲这两天做的事情。此次OPAC整合，任务很简单——一是实现网站首页提交检索，返回检索结果；二是实现用户登录网站后，可直接查看借阅信息及进行续借预约等操作，无需二次登录；三是把显示页面改一下，以符合网站的风格。至于上面所提到的希望，则是我感兴趣的东西。当务之急，当然是完成任务先。
总的来说，进展还算顺利，但今天早上碰到了编码问题，却也让我着急了一阵。当然，解决方案还是有的，但总觉得不是我想要的效果，不过也只能带点遗憾匆匆上马。问题是这样的：
Millennium系统的webopac模块采用Unicode进行编码，而我们的网站采用的字符集是gb2312（痛哭啊，刚开始做网站的时候还年轻，没想到那么多……），所以，当我们想从网站提交检索词到OPAC系统时，由于编码不同，在OPAC中显示为乱码，检索不能正常进行，同样的问题也出现在用户从网站登录系统的脚本中。因此，必须将网站提交的字符串进行编码，才能提交给Millennium OPAC系统。
主要是用到了javascript的encodeURI()函数将提交字符编码。
| <script language=”javascript”> <!– function opac() { var t=”"; var s=”"; t=document.all.t.value; s=document.all.s.value; s=encodeURI(s); s=”http://202.116.13.244/search*chx/a?searchtype=”+t+”&searcharg=”+rs+”&searchscope=1″; window.location.href=rs;} –> </script> <select <option value=”X” >关键词</option> <option value=”t” <option value=”a”>责任者</option> <option value=”i”>ISBN</option> <option value=”d”>主题</option> <option value=”c”>索书号</option> </select> <input name=”s” id=”s” style=”width: 80%” onFocus=this.select() <a href=”#” id=”alink” onClick=”javascript:opac();”><img |
初衷是用脚本将检索词编码后，再重新赋值给表单项，然后通过表单提交检索，但实践证明编码后的检索词，浏览器会再次编码，OPAC系统同样无法接收正确的检索词；那么只能直接提交正确的URL至OPAC系统。脚本中没有用window.open()，进行提交，因为用户可能拦截弹出窗口，所以用上了window.location.href，不过缺点之一是在当前窗口打开，不是很好，其次是不能使用form，用户输完检索词后直接回车没有提交反应，所以针对检索图标按钮作了个判断，如果用户在文本框中回车则点击提交。任务之一实现了，不过感觉怪怪的：（
任务之二中，解决方式和ILAS同出一辙，思路都是从网站中得到用户账户信息，再通过表单提交到系统，从而通过其验证。按道理来说，Millennium系统应该有更好的方式选择，可惜在网上能检索到的信息太少，也只能这么个样子将就了。
任务之三倒是做了点有意思的事情，大量的采用DIV进行布局，加上CSS，感觉很是美妙，呵呵～先打个基础，下一步的拖曳、自定义显示，就从这里出发了～
其实所做的是个小事情，但正因为小，我几乎没能google或者baidu到什么有用的关于Millennium
OPAC系统整合资料，也只能到各个用此系统的图书馆看看，Millenium系统帮助全英文，在OPAC方面的描述也不是很清晰，对我来说，非常不友好。
希望能得到高人的指点，一是如何更好的解决这个编码问题，二是在哪里能找到Millennium系统的web
opt设置方面的清晰的参考。
希望接下来，能有之二之三。
Tags: javascript, millennium, OPAC, unicode
