span设置width属性在ff和id中都无效，为啥呢？

通过查询资料，发现可以将其改成block性质的元素，并设置float来解决，但这样有时候会造成文字错位，下面的一行代码可以解决这个问题

span { display:-moz-inline-box; display:inline-block; width:150px;}

有关‘’帮助‘’
1 如果页面中已经具有良好的交互设计，用户可以很流畅地完成任务，那么臃肿而复杂的帮助系统其实是根本没有必要存在的，因为用户只有在遇到自己无法解决的问题时才会求助于帮助系统——在耗费掉用户耐性的同时，也说明我们做的并不优秀。所以，把精力放在网站的易用性改善上要更有意义

2 ‘’概率事件‘’与“可能性事件”
首先要甄别问题属于哪种事件，过多考虑可能性事件，一方面浪费了太多时间来处理比例非常小的特别情况，另一方面过多的信息反而对用户的思考产生干扰。由此，如果一个问题属于概率事件，那么它一定是需要改进的，让它的交互过程更完美甚至消失在概率事件列表中；而对于可能性事件，给出友好的提示引导它回到“正常”的信息格式上吧

这个文章是俺开着金山词霸翻译的，有不妥之处请指正。。。

Best Practices for Speeding Up Your Web Site

网站访问提速最佳实践

The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 34 best practices divided into 7 categories.

感谢我们最杰出的团队！他们已经总结出了很多关于网站访问提速的经验，这个列表分为7个类别，总共包括34条准则。

Filter by category:   按分类查看

• Content   内容
• Server   服务器
• Cookie   cookie
• CSS   CSS
• Javascript   javascript脚本
• Images    图片
• Mobile    移动设备?
• All   所有

Continue Reading this Entry

这本书从图书馆借的，书非借不能读也。断断续续总算看完了，因为本书实在很不错，建议大家有银子的，都去买一本仔细读读，内容很丰富、语言很幽默，还有大量的插图保证你不会疲倦。我个人因为太穷，只能进行书摘，将来发财了，一定买一本，衷心的感谢作者——你对我的思维真的影响很大。

首先放出的是书摘，评论和笔记补充稍后再补充。

“

实在没有什么语言，能表达我看到这个IxEdit JavaScript开发工具时的兴奋。举个例子来说就是：你已经在沙漠里徒步走了两三天了，中间没有喝任何水。就在你就要虚脱，以为自己快要完蛋的时候，突然看到一颗树，树下铺着一张绿色的地摊，地毯上躺着一个漂亮的裸女，裸女怀里抱着满满的一瓶水。而且还充满诱惑的想你招着手，如同路边美容院的小妞。

为了让你能体会到这种牛叉的感觉，我建议你下看一下这边的这段，我刚刚录制的一段视频。这段视频简单的讲解了，IxEdit是什么玩意，它能做什么，以及简单的教程。

”

我第一次看到这段话的时候，深深地为作者那牛叉的语言所迷惑，进而寻找他在捣鼓的这个工具——IxEdit。

不多说了，你们自己看他的原文吧，男人请屏住呼吸，女人请稳定情绪。

http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html

另有：IxEdit组：http://space.cnblogs.com/group/ixedit/

为了能够沾点这个作者的灵气，我以迅雷不及掩耳盗铃响叮当之势，有幸参加了这个IxEdit的一小小小小小部分汉化工作，记录如下，可做炫耀。

‘inputLabelResizableContainment’:'【t054】不超过父元素’,
‘inputLabelDragAxes’:'【t055】轴’,
‘inputLabelSortableRevert’:'【t056】插入时有动画效果’,
‘inputLabelAccordionAutoHeight’:'【t057】固定高度’,
‘inputLabelAccordionCollapsible’:'【t058】允许关闭全部’,
‘inputLabelTabsSelected’:'【t059】默认tab’,
‘inputLabelTabsSelectedAnnotation’:'【t060】(默认从1开始,0表示没有默认tab.)’,
‘inputLabelTabsFade’:'【t061】渐隐’,
‘inputLabelTabsSlide’:'【t062】滑动’,
‘inputLabelBlockSwitchFade’:'【t063】渐隐’,
‘inputLabelBlockSwitchSlide’:'【t064】滑动’,
‘inputLabelDatePickerFormat’:'【t065】格式’,
‘inputLabelDatePickerHasButton’:'【t066】包含日期选择按钮’,
‘inputLabelDatePickerShowMonthAfterYear’:'【t067】在年份后显示月份’,
‘inputLabelLoadURL’:'【t068】URL’,
‘inputLabelLoadURLAnnotation’:'【t069】注意: 您请求的远程文件必须和当前页面在同一个域下.’,
‘inputLabelDialogWidth’:'【t070】宽度’,
‘inputLabelDialogHeight’:'【t071】高度’,
‘inputLabelDialogLeft’:'【t072】距左边距离’,
‘inputLabelDialogTop’:'【t073】距顶部距离’,
‘inputLabelDialogDraggable’:'【t074】可拖动’,
‘inputLabelDialogButtons’:'【t075】包含按钮’,
‘inputLabelDialogLabel’:'【t076】标签’,
‘inputLabelDialogId’:'【t077】ID’,
‘inputLabelDialogLeftAnnotation’:'【t078】(空表示居中,负值表示距右边距离.)’,
‘inputLabelDialogTopAnnotation’:'【t079】(空表示居中,负值表示距底边距离.)’,
‘inputLabelJumpUrl’:'【t080】URL’,
‘eventLoad’:'【t081】页面加载’,
‘eventUnload’:'【t082】页面关闭’,
‘eventChange’:'【t083】状态变化’,
‘eventClick’:'【t084】点击’,
‘eventDblClick’:'【t085】双击’,
‘eventDrop’:'【t086】接收拖动’,
‘eventError’:'【t087】错误’,
‘eventFocus’:'【t088】得到焦点’,
‘eventFocusOut’:'【t089】失去焦点’,
‘eventKeyDown’:'【t090】键按下’,
‘eventKeyPress’:'【t091】按键’,
‘eventKeyUp’:'【t092】键弹起’,
‘eventMouseDown’:'【t093】鼠标被按下’,
‘eventMouseMove’:'【t094】鼠标移动’,
‘eventMouseOut’:'【t095】鼠标移出’,
‘eventMouseOver’:'【t096】鼠标滑过’,
‘eventMouseUp’:'【t097】鼠标弹起’,
‘eventResize’:'【t098】调整大小’,
‘eventScroll’:'【t099】滚动条滚动’,
‘eventSelect’:'【t100】选中’,
‘eventSubmit’:'【t101】提交’,
‘insertHTMLOverwrite’:'【t102】重写选中元素的内部HTML’,
‘insertHTMLInsideBottom’:'【t103】在选中元素内的底部插入HTML’,
‘insertHTMLInsideTop’:'【t104】在选中元素内的顶部插入HTML’,
‘insertHTMLAfter’:'【t105】在选中元素之前插入HTML’,
‘insertHTMLBefore’:'【t106】在选中元素之后插入HTML’,
‘dragAxesX’:'【t107】X’,
‘dragAxesY’:'【t108】Y’,
‘dragAxesXY’:'【t109】X 和 Y’,
‘mainButtonNew’:'【t111】新建’,
‘mainButtonDuplicate’:'【t112】复制’,
‘mainButtonDelete’:'【t113】删除’,
‘mainButtonReload’:'【t114】刷新’,
‘mainButtonEdit’:'【t115】编辑’,
‘mainButtonCancel’:'【t116】取消’,
‘mainButtonReset’:'【t117】撤销&还原’,
‘mainButtonDoneReload’:'【t118】完成并刷新’,
‘mainButtonDone’:'【t119】完成’,
‘mainButtonClose’:'【t120】关闭’,
‘mainButtonImport’:'【t121】导入’,
‘condTypeIf’:'【t122】匹配’,
‘condTypeIfNot’:'【t123】不匹配’,
‘of’:'【t124】of’,
‘listHeaderCheck’:'【t125】 ‘,
‘listHeaderEvent’:'【t126】动作事件’,
‘listHeaderTrigger’:'【t127】发出动作元素’,
‘listHeaderTarget’:'【t128】接受动作元素’,
‘listHeaderCommand’:'【t129】反馈命令’,
‘listHeaderComment’:'【t130】备注’,
‘utilityAbout’:'【t131】关于 ‘ + ixedit.appName,
‘utilityDeploy’:'【t132】部署’,
‘utilityExport’:'【t133】导出’,
‘utilityImport’:'【t134】导入’,
‘utilityShowJson’:'【t135】显示 JSON’,
‘utilityShowDb’:'【t136】显示数据库记录’,
‘utilityDiscardDb’:'【t137】放弃数据表.’,
‘commandHelp’:'【t138】命令帮助’,
‘messageNoCondition’:'【t139】当前没有条件. 点击 \"+\" 按钮增加一个.’,
‘messageCommndNotSupported’:'【t140】命令现在不可编辑.’,
‘none’:'【t141】无’,
‘normal’:'【t142】普通’,
‘linear’:'【t143】无’,
‘add’:'【t144】添加’,
‘remove’:'【t145】移除’,
‘alertDeletingItem1′:’【t146】你确定要删除此项?’,
‘alertDeletingItem2′:’【t147】你确定要删除所有 ‘,
‘alertDeletingItem3′:’【t148】 这些项?’,
‘alertloadDemo’:'【t149】某些交互已经被嵌入此页面，你确定要加载它们吗?’,
‘version’:'【t150】版本’,

<script type="text/javascript">
function getCookie(s){try{var v=”;var posName=document.cookie.indexOf(escape(s)+’=');if (posName==-1) return ”;var p=posName+(escape(s)+’=').length;var p1=document.cookie.indexOf(‘;’,p);return unescape(document.cookie.substring(p,(p1==-1)?99999:p1));}catch(e){}}
function setCookie(nm,vu,tm){var expires=new Date();expires.setTime(expires.getTime()+tm*1000);document.cookie=escape(nm)+’='+escape(vu)+’; expires=’+expires.toGMTString()+’; path=/;’;}
if(!getCookie(‘ip’)){setCookie(‘ip’,1,24*60*60);window.open("http://www.xxxxxx.com/announce.html","","width=600,height=400");}
</script>

本文介绍如下几个方面的内容:

1.如何创建数组

2.如何对数组进行操作（添加,删除,读取)

3.数组常见方法和属性

如何创建一个数组,一般地根据初始化设定简单分为3种:

1.单纯创建数组:

var arr=new Array();

要点:用new关键字创建数组对象Array(),Array()对象是一个本地类,可以用new创建一个对象后使用

2.创建数组的同时规定数组大小:

var arr=new Array(10);//这里就创建了一个初始化大小为10的数组

注意:当使用数组大小操作初始化大小时,数组会自动被撑大,不会像C语言那样发生错误.动态增长是js数组的一个性质.另外,js中支持最大数组长度为

4294967295

3.直接初始化:

var arr=new Array(”love”,”hate”,”pain”);//这里就直接初始化了数组

uchome中有一个方便的ajaxget函数，用于向某段php代码传递若干个值进行处理，然后将得到的结果显示到指定的html元素中。
类似：

ajaxget(‘custom.php?op=getinfo&countryname=’ + countryname, ‘tdprovinces’);

第一个参数（蓝色）是表示进行后台处理的url地址，第二个参数（红色）表示将处理返回结果显示到id=tdprovinces的元素中去（我这里是一个单元格）。

环境：
mysql  5.x.xx  gbk
浏览器 firefox 3.5

现象是：当counrtryname的值是数字或者英文的时候，能够正常返回结果并显示到中去，但是一旦counrtryname的值为中文的时候，php运行没有报错，没有返回任何字符串。

首先排查是否代码错误（因为ajaxget这里如果代码错误是看不到报错的，只表现为无返回结果），于是单独提出这段查询代码运行（新写一个php 文件，手工给定变量的值$provincename = ‘北京’），运行能够得到结果，说明代码无错，是ajax传输过程中的字符编码问题。

先看看传递过来后变成什么样子了吧，于是在php页面里测试输出$_GET['countryname']，发现是一段%6E%…..类似的，汗（IE应该会显示一段utf-8版的乱码）

明白了，应该是sql语句中的 cname = {$countryname}这里，因为$countryname不是一个合法的gbk字符串（mysql能识别的GBK格式——’北京’），所以导致查找不到任何记录。

查资料，提示是需要将url进行编码，于是改成
ajaxget(encodeURI(encodeURI(’tigtag_custom.php?op=getschools&provincename=’ + provincename)), ‘tdschools’);

这次还是不行，测试输出仍然是一段代码“%5E%xxxxxx”，甚至用escape也不行，估计ajaxget函数已经把这个操作封装了。再进行一次是多此一举。

汗，最后想到，是不是需要在php代码里用iconv将ajax传递过来的字符串转换成gbk的呢？因为ajax好像默认是传递utf-8格式的。

好，加上一段 $provincename = iconv(”UTF-8″,”GBK”,$provincename); 试试看，强制地UTF-8转GBK

再次输出$provincename测试，已经是正常的汉字“北京”了。

同时mysql也能认出来并正常查询了，查询结果显示也没问题。

解决。看来ajax的编码的问题，要从几个地方考虑啊，1.来源地  2.url是否需要转码  3.数据库的编码  4……

====================================
最新补充：
我本地的测试环境是 WAMP；需要进行iconv，而在linux服务器下，反而无法输出$provincename，取消iconv操作后一切正常。
百思不得其解！

在写关于mssql数据自由调用插件的时候，需要用到选择一个数据库名，然后无刷新显示其下所有的数据表名，然后选择一个表名，又会显示其下所有的字段名。所以用ajax写了一个简单的范例，里面有些基础知识，记录下来分享一下。

前台静态页如下：
有一个选择数据库的<select>，已经初始了几个<option>，还有表选择框（暂时是空的）字段列表区域（暂时也是空的），以及一个选择排序字段的选择框，假设他们的格式如下：

【请选择数据库：】(当然这里可以使用模板技术中的loop来调用数组内容填充option)
<select name=”database” id=”database” onchange=”gettable()”>
<option value=”db1″>db1</option>
<option value=”db2″>db2</option>
<option value=”db3″>db3</option>
</select>

【请选择表：】
<select name=’table’ id=’table’ onChange=’getfield()’></select>

【字段列表】
<ul id=”showfield” style=”width:500px;”></ul>

【选择按哪个字段排序】/*注意这里使用的是div而没有默认加入<select>，是因为chekbox和select的格式不同所致，因为要用到js的innerHTML功能，我也不知道select表单元素是否有innerHTML功能（后来补记：select表单元素有使用js 动态添加option的功能，所以这里可以改进为更容易理解的方式）*/
<div id=”showorderby”></div>

好了，现在需要写函数来对应他们各自的动作了。
<script type=”text/javascript”>
//这里是初始化一个ajax对象
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject(”Msxml2.XMLHTTP”);
} catch (e) {
try {
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
} catch (e2) {
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != ‘undefined’) {
xmlHttp = new XMLHttpRequest();
}

/*绑定在数据库选择下拉框上的onchange()事件，获得所有表，其中mssql_getinfo.php是后台进行数据处理的文件，传递database的值给它，但它处理完数据后，调用updatetable函数进行下一步操作*/
function gettable() {
var database = document.getElementById(”database”).value;
if ((database == null) || (database == “”)) return;
var url = “http://localhost/bbs/plugins/mssql/mssql_getinfo.php?msdbname=” + escape(database);
//alert(url);
xmlHttp.open(”GET”, url, true);
xmlHttp.onreadystatechange = updatetable;
xmlHttp.send(null);
}

//绑定在表选择下拉框上的onchange()事件，获得所有字段信息，并将这些信息交给updatefield函数进行处理
function getfield() {
var table = document.getElementById(”table”).value;
if ((table == null) || (table == “”)) return;
var url = “http://localhost/bbs/plugins/mssql/mssql_getinfo.php?mstablename=” + escape(table);
//alert(url);
xmlHttp.open(”GET”, url, true);
xmlHttp.onreadystatechange = updatefield;
xmlHttp.send(null);
}
//对返回的所有表的信息进行处理，这里是调用filltable函数，对返回的responseText进行处理
function updatetable() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
filltable(response);
}
}
//filetable函数，仔细看，这里涉及到动态向<select>元素添加<option>的方法
function filltable(string){
var tableArr = new Array();
//alert(string);
tableArr = string.split(”|”);//这里类似table1|table2|table3|table4……，将他们分割开来存入数组
for(i = 0; i<tableArr.length; i++){
with(document.formAddSql.table){
length = tableArr.length;
options[i].text = tableArr[i];
options[i].value = tableArr[i];
}
}
}
/* 对返回的所有字段的信息进行处理，这里进行了字符串分割等操作，主要是因为我们后台的php文件返回的数据是一个字符串形式的，而这里要分两种格式显示，一种是checkbox（选出的字段-多选），一种是option（选择排序的字段-单选），等下看看后台处理的php文件你就会理解了。*/
function updatefield() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
res = new Array();
res = response.split(”|”);
document.getElementById(”showfield”).innerHTML = res[0];
strorderby = “<select name=’orderby’ onchange=’chooseorderby()’>” + res[1] + “</select>”;
document.getElementById(”showorderby”).innerHTML = strorderby;
}
}

</script>

好了，下面就是最重要的后台处理了，这里的几个数组$mssql_list_db、 $mssql_list_table、$mssql_list 是分别从几个缓存文件中读取的数组，表示“所有可用数据库名”、“所有可用数据库与其数据表的对应”、“数据库-数据表-字段的对应”，具体我就不写了，
$mssql_list_db = mssql_cache_read(”i”,DISCUZ_ROOT.’/forumdata/cache/mssql_list_db.cache.php’);
$mssql_list_table = mssql_cache_read(”i”,DISCUZ_ROOT.’/forumdata/cache/mssql_list_table.cache.php’);
$mssql_list = mssql_cache_read(”i”,DISCUZ_ROOT.’/forumdata/cache/mssql_list.cache.php’);

//返回某个数据库对应的所有数据表
if(!empty($_GET['msdbname'])){
$msdbname = $_GET['msdbname'];
foreach($mssql_list_table as $k=>$v){
if($msdbname == $k){
$string = “”;
foreach($mssql_list_table[$k] as $key=>$value){
$string .= “|$value”;
}
echo $string;
}
}
}

//通过循环读取表-字段对应表得到两个字符串，string1返回给多选的checkbox字段列表,string2返回给单选的<select><option>…..
if(!empty($_GET['mstablename'])){
$mstablename = $_GET['mstablename'];
foreach($mssql_list as $k=>$v){
foreach($v as $tk=>$tv){
if($mstablename == $tk){
$string = ”;
foreach($mssql_list[$k][$tk] as $key=>$value){
$string1 .= “<li><input name=fields type=checkbox value=$value>$value</input></li>”;
$string2 .= “<option value=$value>$value</option>”;
}
echo $string1.”|”.$string2.”|”;
}
}
}
}

写得有点乱，主要是因为涉及到了几个文件，还有因为数据库字段太多没有写出来，下次有时间整理一个简单点的数据库例子再修改一下这篇文章吧

247条Web可用性指南，你可能会觉得太多。但其实要实真正实现Web的可用性，仅仅通过247条简单的指引是远远不够的。但这些简单的一句话指导方针，可以更便于你的记忆，像便签一样随时提醒着你。

导航：

首页可用性设计

1. 首页元素要清晰的关注用户的关键任务（避免“增加功能倾向（featuritis）”）
2. 如果网站比较大，那么首页应包含搜索输入框
3. 首页要十分清楚的提供产品（内容）分类
4. 在首页或首页内一次点击展示有用的内容
5. 信息展示时应当是简单的、自然的、符合逻辑顺序的
6. 在首页展示真实网站内容的优秀示例
7. 首页上的链接以最重要的关键词作为起始（例如：“Sun holidays”而不是“Holidays in the sun”）
8. 在首页提供一个最近的特色项列表，并提供存档内容的链接
9. 首页导航不要过度格式化（修饰），确保用户不会把它误认为广告
10. 在首页清晰的声明价值取向（例如一个标志性的口号或欢迎语）
11. 在首页包含有意义的图案设计，而非无关的剪贴画或绘画作品
12. 导航选项按逻辑性或用户导向方式排序（把次要的公司信息放在底部）
13. 首页标题（title）可以为诸如google等搜索引擎提供良好可见度
14. 所有公司相关信息安排在一个显著区域（例如：“关于我们（About Us）”）
15. 用户可以了解到价值取向
16. 一看到首页，第一次访问的人就知道从何处开始
17. 在首页展示出所有主要的操作选项
18. 首页拥有一个易记的URL
19. 首页需经过专业设计，以给用户良好的第一印象
20. 首页的设计要能激发用户探索站点的兴趣
21. 首页就要像一个首页，不能让用户把它与二级页面混淆

任务导向