大家都知道Windows下的回车换行和Linux下的回车换行有区别,分别是

Windows  --  \r\n

Linux       --  \n

在我们的数据入库、出库的时候要特别注意这个问题,特别是在进行显示处理的时候,比如使用表单中的 textarea 进行了一段文字的提交,客户端是Windows的话就会包含\r\n,如果要显示在页面上,这些都是不起作用的,我们需要替换成页面中可以辨认的回车 <br />

这个时侯就可以使用 ereg_replace()这个函数。

我就是在这个地方遇到了问题,比较一下下面两条语句

ereg_replace('\r\n', '<br />', $value);

ereg_replace("\r\n", "<br />", $value); 

问题就出在单引号和双引号上,如果我们始终使用双引号,我们肯定是安全的。但是如果我们使用单引号,那么那些元字符就会被解释成其他的含义,从而导致了这句执行失败。

所以如果发现替换失败或者失效的时候,就从引号上找找原因吧。

posted @ 2009-07-04 14:03 Cocowool 阅读(59) | 评论 (0)编辑

Firefox 3.5 发布了,他给我们带来了什么呢?

 介绍:Firefox 3.5基于Gecko 1.9.1渲染平台,提供了许多新的技术、改进了易用性、增强了表现,显著的特点包括

1、超过70种语言的支持。能够有这么多种语言,也说明了FF在世界范围内越来越普及了。

2、支持HTML5的<video>和<audio>标签,提供原生的Ogg支持。这个功能应该算是一个亮点,之前在GDD看到演示的机遇Ogg的3D视频,效果还是很不错的。

3、增强的私有浏览模式。私有浏览模式(Private Browsing),更通俗的何况以称为Porn Mode(我觉得这个简直太精辟了),可以让我们浏览的历史无迹可寻,包括所有的痕迹,诸如浏览历史、密码、搜索关键字...,但是相比IE8来说,FF的这个功能来的太晚了。

4、使用了新的TraceMonkey Javascript引擎,提高了脚本速度。虽然快了,但仍然不是最快,相比Chrome和Safari

5、基于地区的浏览。(Location Aware Browsing)。看来基于地区这个概念越来越流行了,我们需要准确的知道用户的位置,从而为用户提供更精准的服务。

6、原生的JSON支持和Web Worker Threads?这个还不太了解,据说是在浏览的时候后台还在处理一些事情,这样感觉浏览的速度就快了起来,想起来了就像在GDD里演示的那样,JS在非激活的窗口中仍在运行...

7、改进的Gecko布局引擎,提高了解析速度和渲染能力。

8、支持更多的新的WEB技术。Downloadable fonts、CSS media queries、HTML5 Local Storage...只希望这些新特性能够尽早的纳入规范,让后起的浏览器都遵循。

posted @ 2009-06-30 23:48 Cocowool 阅读(2507) | 评论 (27)编辑
如果你的团队很小并且在软件开发领域也没什么经验,那么放下包袱使用开源框架吧(OSS Framework),但是如果你有一个很大而且有丰富经验的团队,那么最好还是开发
自己的框架。

什么是框架,并没有明确的解释,但是似乎我们听到这个名词以后大概都知道是怎么回事。Wiki上是这么定义的:框架是一种可复用的系统化设计。
软件的框架会包括支持程序、代码库、脚本语言以及一些其他的软件来帮助开发或者将项目中不同部分的组件联合起来。外界看来框架的不同部分就像是各种API。

根据这个定义,框架最基本核心的思想就是可复用的设计,更进一步的框架才会包含辅助程序、代码库和粘合性的代码。

“在代码可用这个层面上来讲,框架类似于API或者各种代码库,但与此不同的是,框架中流程控制不是由调用者,而是由框架本身决定的。”

各种各样的框架定义都表明,框架就是定义在开发过程中事情通常是怎么做的,框架定义了代码的结构、通用的样式。

在PHP开发中,框架通常都定义了一种MVC的实现,更进一步的会提供一个抽象的数据层、一套模版系统、一个测试框架或者其他的一些东西。
框架必须提供应用开发指导,这是非常重要的。在指导下进行新模块的设计、建立通用的文件夹结构、命名空间设计、测试设计等等。框架一般都应该包含一些通用的任务,
比如说邮件发送这样在WEB应用中非常常见的功能。另外有一些功能可能只有特定的框架中才有,比如说图像处理这样非常依赖应用类型的功能。有一点我们需要始终记住,
选择我们需要的工具来完成任务。

创建自己的框架。

开发自己的框架并不意味着一定要重复的制造轮子,编写MVC这样的扩展代码是非常费时间的一项工作。我们可以根据自己的需要,选择一些开源框架中的组建来加入到自己
的框架中。这就需要我们仔细考虑选用何种合适的开源框架组件。

为自己的框架选择部件。

下面这些原则可以帮助在选择框架部件中做出决策:
1、是否满足自己的功能需要;
2、是否理解功能概念,是否容易扩展。打破框架都是我们极力避免的,但有时候却避免不了这种情况;
3、是否有一个活跃的社区,是否有公司在背后支持;
4、社区是否稳定,能否提供稳定的支持;
5、管理是否规范,是否有版本控制和BUG跟踪;
6、当前版本是否未定;
7、当前公开的BUG和关闭的重要BUG的数量;
8、最后,是否有丰富的文档,是否有教程;
posted @ 2009-06-02 15:49 Cocowool 阅读(24) | 评论 (0)编辑
Commandlinie是Firebug中总有用的一个特性。如果你有Microsoft Visual Studio的使用经验,你就会知道“Immediate Window”
和“Watch Window”的作用,我倒是想起了AutoCAD中的Commandline,通过快速的输入命令来完成操作。

Firebug中的命令行更像“Immediate Window”,你能够在任何时候检测代码中的值,firebug命令行的一个好处就是可以在”设计时“
就查看代码。另外还有一个优点就是你可以在命令行写js语句并且让他们立刻执行。

firebug commandline的详细的api可以在官方的地址中看到:http://getfirebug.com/commandline.html

下面来详细的介绍一下:

命令行的类型。firebug中有两种类型的命令行:1、单行模式;2、多行模式;

1、单行模式。单行模式是firebug的默认命令行模式,它允许我们一次输入一行代码。单行模式的优点是支持自动完成。
    这个很强大的,就像在终端中一样,你还可以使用上下键来调入最近使用过的命令。
2、多行模式。多行模式是单行模式的加强版,它允许我们一次输入多行代码并且马上执行。
这两种模式都有各自的优势,大家可以根据自己的情况选择适合的模式。

Commandline API使用示例。

在使用之前,需要在提醒一下尽管这些API在运行时和DEBUG时都可以使用,但是他们在DEBUG时尤其有用,下面我们就来看看为什么。

API列表:

1、$(id);
2、$$(selector);
3、$x(path);
4、dir(object);
5、dirxml(node);
6、cd(window);
7、clear();
8、inspect(object [,tagname]);
9、key(object);
10、values(object);
11、debug(fn) & undebug(fn);
12、monitor(fn) & unmonitor(fn);
13、monitorEvents(object [, tagname]) & unmonitorEvents(object [, tagName]);
14、profile(title) & profileEnd();

1、$(id)。
    使用过Prototype的同学看到这个一定很亲切。
    对了,他的用法就和Prototype中的$一样,在单行模式中,命令会将选择的元素打印到console中
    在多行模式中,你就完全可以像在Prototype中那样使用它了。
    对于Prototype不熟悉的同学可以查看参考资料中的连接了解更多的情况。

2、$$()。
    返回给定CSS选择器选中的元素数组。
    关于CSS Selector(选择器),相信了解一些CSS的人都有一些印象,Jqueyr将Css Selector发扬的很光大。
    我在console中试验了几个jquery中的常用写法,看来支持的还是不够好。
    
3、$x(xpath)。
    返回给定xpath下的元素数组。
    例如在一个包含多个p的div中,我们可以用下面的代码获得每个p。
    var obj = $x('html/body/div/p');
    console.log(obj[0].id);
    console.log(obj[1].id);
    console.log(obj[2].id);

4、dir(object)。
    打印一个对象的所有属性,结果形式和在DOM标签中看到的一样。
    其实这个用法和console.dir()是一样的。
    var obj = $x('html/body/div/p');
    dir(obj);
    
5、dirxml(note)。
    打印xml或HTML元素的树形结构。打印的结果就像在HTML标签中看到的一样。
    之前我们也接触过console.dirxml()的用法,这两个方法是一样的。

6、cd(window)。
    cd是用来在框架布局的不同窗口间切换,不过据说还不是很完善。
    
7、clear()。
    清除控制台的内容,就像在Javascript中使用Console.clear()一样。
    
8、inspect(object [,TabName])。
    在最适合的标签中检测一个元素,也可以通过TabName指定需要打开的标签。
    例如:
        inspect($('txt1'),'html');
        就会打开HTML标签,并且选中id为txt1的元素。

9、keys(boject)。
    返回指定名称的对象的所有属性的名称数组。指定的名称可以是Javascript对象,也可以是HTML的DOM元素。
    function Car(){  
     this.Model = "Old Model";  
     this.getManufactor = new function(){  
     return "Toyota";  
     }  
    }
    var o = new car()
    我们可以用keys(o)获得car对象的所有属性。
    
    还可以获得HTML元素的所有属性名称,比如 keys($('txt5'));

10、values(object)。
    返回对象包含的属性值的数组。
    像keys一样,我们既可以用在javascript上,也可以用在html元素上。
    
11、debug(fn)和undebug(fn)。
    在程序的开始处添加或删除断点。
    
12、monitor(FunctionName)和unmonitor(FunctionName)。
    打开或关闭函数调用的记录。
    通常,如果我们想知道一个函数是否被执行,我们会加入一个alert()或者console.log()来记录。
    这实在是一个累人的工作,特别是如果编辑一个很大的script文件的时候,我们需要找到这个函数,加入alert,console.log
    保存然后再运行,我们需要不断地保存、修改、运行来检查函数在那里被执行了。
    有了firebug你就不再需要这么累了,你只需要知道这个函数,然后你就可以跟踪它,只要他被执行了,执行情况就会打印在
    console窗口中。另外,console还会提供一个指向这个函数的连接。
    
    使用方法    monitor(func1); 找到问题的原因后,我们还可以通过 unmonitor(func1)里解除对于函数的追踪。
    
13、monitorEvent(object [,types])和 unmonitorEvent(object [,types])。
    打开或关闭对于对象动作的记录。
    
    types表示的我们要追踪的事件类型,最常用的就是'mouse'和'key'
    完整的参数类型包括:“composition”, “contextmenu”, “drag”, “focus”, “form”, “key”, “load”, “mouse”, “mutation”, “paint”, “scroll”, “text”, “ui”, and “xul”
    
    不过不幸的是,这个API工作地不是很好,希望作者能够在后继的版本中完善一下。              

14、profile([title])和profileEnd([title])
    对于这个命令,我想看过上一篇的同学应该比较熟悉。这个就和console.profile()是一样的,用来记录页面中js的执行情况
    并在结束后给出分析报告。
    
最后,希望每一位使用firebug来开发的同学,能够提高自己的开发效率。
            
[参考资料]
1、firebug commandline        http://michaelsync.net/2007/09/15/firebug-tutorial-commandline-api
2、prototype                    http://www.prototypejs.org/
posted @ 2009-05-23 11:15 Cocowool 阅读(1099) | 评论 (2)编辑
简介
符合Web2.0特征的众多网站一个明显的特点就是采用Ajax。Ajax提供了在后台提交请求访问数据的功能。其实现主要使用的是XMLHttpRequest函数,这个函数允许客户端的Javascript
发送到服务器端的HTTP请求并获得返回数据。Ajax同时也是目前众多的Mashup背后的驱动力量,他们都利用Ajax来聚合不同来源的信息。

理解同源策略的限制
同源策略是指阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地指相同。同源策略通过隔离来实现对资源的保护。这个策略的历史非常悠久
从Netscape Navigator 2.0时代就开始了。

解决这个限制的一个相对简单的办法就是在服务器端发送请求,服务器充当一个到达第三方资源的代理中继。虽然是用广泛但是这个方法却不够灵活。
另一个办法就是使用框架(frames),将第三方站点的资源包含进来,但是包含进来的资源同样要受到同源策略的限制。

有一个很巧妙的办法就是在页面中使用动态代码元素,代码的源指向服务地址并在自己的代码中加载数据。当这些代码加载执行的时候,同源策略就不会起到限制。但是如果代码试图下载文件的时候
执行还是会失败,幸运的是,我们可以使用JSON(JavaScript Object Notation)来改进这个应用。

JSON和JSONP
与XML相比,JSON是一个轻量级的数据交换格式。JSON对于JavaScript开发人员充满魅力的原因在于JSON本身就是Javascript中的对象。
例如一个ticker对象
    var ticker = {symbol:'IBM',price:100}
而JSON串就是    {symbol:'IBM',price:100}
这样我们就可以在函数的参数中传递JSON数据。我们很容易掌握在函数中使用动态的JSON参数数据,但是我们的目的并不是这个。
通过使我们的函数能够加载动态的JSON数据,我们就能够处理动态的数据,这项技术叫做 Dynamic Javascript Insertion。
我们看下面的例子
index.html中
    <script type="text/javascript">
        function showPrice(data){
            alert("Symbol:" + data.symbol + ", Price:" + data.price);
        }
        
        var url = "ticker.js";        //Outer JS URL
        var script = document.createElement('script');
        script.setAttribute('src', url);
        
        //load javascript
        document.getElementsByTagName('head')[0].appendChild(script);
    </script>
ticker.js中
    var data = {symbol:'IBM', price:100};
    showPrice(data);

上面的代码通过动态加入Javascript代码,来执行函数加载数据。
正如之前提到过的,同源策略对于动态插入的代码不适用。也就是你可以从不同的域中加载代码,来执行在他们代码中的JSON数据。
这就是JSONP(JSON with Padding)。注意,使用这种方法时,你必须在页面中定义回调函数,就像上例中的showPrice一样。

我们通常所说的JSONP服务(远程JSON服务),实际上就是一种扩展的支持在用户定义函数中包含返回数据的能力。这种方法依赖于必须接受一个回调函数的名字作为参数。
然后执行这个函数,处理JSON数据,并显示在客户页面上。

JQuery的JSONP支持

从JQery 1.2以后,就开始支持JSONP的调用。在另外的一个域名中指定好回调函数名称,你就可以用下面的形式来就加载JSON数据。
    url?callback=?

示例:
    jQuery.getJSON(url + "&callbak=?", function(data){
        alert("Symbol:" + data.symbol + ", Price:" + data.price);
    });
jquery会在window对象中加载一个全局的函数,当代码插入时函数执行,执行完毕后就会被移除。同时jquery还对非跨域的请求进行了优化,如果这个请求是在同一个域名下
那么他就会像正常的Ajax请求一样工作。

上例中我们在动态插入到页面的代码中使用了静态的json数据,虽然完成了依次JSONP返回,但仍不是JSONP服务,因为不支持在URL中定义回调函数名称。下面是一个将其变成JSONP服务的一个方法
服务器端使用PHP。

首先我们来定义接口的规范,就像这样:http://www.mydomain.com/jsonp/ticker?symbol=IBM&callback=showPrice
symbol是请求条件,callback是回调函数名称。

在页面文件中,我们使用JQuery的支持:
        //JQuery JSONP Support
        var url = "http://www.mydomain.com/api/suggest.php?symbol=IBM&callback=?";
        jQuery.getJSON(url, function(data){
            alert("Symbol:" + data.symbol + ", Price:" + data.price);
        });

在suggest.php中
     $jsondata = "{symbol:'IBM', price:120}";
     echo $_GET['callback'].'('.$jsondata.')';
    
现在,如果我们想制作一些mashup,或者将第三方的资源整合到一个页面中,我们就很容易想到JSONP的解决方法了。

现有的JSONP服务
    既然我们已经知道如何使用JSONP,那么我们也就可以使用一些现有的JSONP服务了,下面是一些例子:
    Digg API:http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?
    Geonames API:http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?
    Flickr API:http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?
                   
注意:
    JSONP是一个非常强大的构建mashp的方法,可是不是一个解决跨域访问问题的万能药。它也有一些缺点
    第一也是最重要的:JSONP不提供错误处理。如果动态插入的代码正常运行,你可以得到返回,但是如果失败了,那么什么都不会发生。你无法获得一个404的错误,也不能取消这个请求
    另外一个重要的缺点是如果使用了不信任的服务会造成很大的安全隐患。    
    

[参考资料]
1、Cross-domain communication with jsonp        http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
posted @ 2009-05-21 14:38 Cocowool 阅读(1092) | 评论 (9)编辑
Firebug对于Web开发人员来说,已经成为了不可或缺的工具,但是在我日常的工作中,常常感觉还没有能够深刻的挖掘出她的潜力,今天花了点时间仔细研究了Console和命令行的使用在提高工作效率方面的作用,
记下来和大家分享一下.

Firebug一共有Console,HTML,CSS,Script,DOM,NET六个Tab,今天着重说一下Console的用法。
其实我们对于Console应该非常熟悉,因为这里是Firebug给出各种信息的窗口,而这也正是Console的主要用途,日志记录(Logging)。
除此之外,Console还提供了通过命令行方式来调试Javascript的方法。下面就来学习一下Console的用法。

1、Firefox的日志记录(Logging in Firefox)。
通过Console的记录方法,我们可以不再使用烦人的alert或者document.write方法来进行调试。
Firebug提供了五种日志的类型:
    console.log:记录一行信息,无任何图标提示;
    console.debug:记录一行信息,带超链接,可以链接到语句调用的地方;
    console.error():向控制台中写入错误信息,带错误图标显示和高亮代码链接;
    console.info():向控制台中写入提示信息,带信息图标显示和高亮代码链接;
    console.warn():向控制台中写入警告信息,带警告图标显示和高亮代码链接;

    consle打印字符串支持字符串替换,使用起来就像c里面的printf(“%s",a),支持的类型包括:
    %s        string,字符串
    %d,%i    整型
    %f        浮点
    %o        对象
    如果使用%o的话,对象就会用绿色的超链接表示出来,单击后会将你带到DOM视图。

2、分组(Grouping)。
    如果某一类的信息特别多时,分组就有利于逻辑的划分。
    使用上很简单,参见代码。
            function consoleGroup(){
                var groupname = "Group 1";
                console.group("Message group %s", groupname);
                console.log("This is the 1 message in %s", groupname);
                console.log("This is the 2 message in %s", groupname);
                console.log("This is the 3 message in %s", groupname);
                console.groupEnd();
                
                goupname = "Group 2";
                console.group("Message group %s", goupname);
                console.log("This is the 1 message in %s", goupname);
                
                var subgroupname = "Sub group 1";
                console.group("Message group %s",subgroupname);
                console.log("This is the 1 message in %s", subgroupname);
                console.log("This is the 2 message in %s", subgroupname);
                console.log("This is the 3 message in %s", subgroupname);
                console.groupEnd();
                
                console.log("This is the 2 message in %s", goupname);
                console.groupEnd();
            }

   
3、console.dir和console.dirxml
    console.dir可以将一个对象的所有方法和属性打印出来,这个方法无疑是非常有用的,我们不再需要object.toString这样的方法支持了,只要有firebug,查看对象也变得很轻松
    同时,我们也可以将页面中的元素作为一个对象打印出来,但是你要小心,因为这将输出众多的信息,可能你会迷失在繁杂的信息中而找不到自己需要的条目。
    我们可以通过分组将这些大量的信息放入一个分组中,这样可以在逻辑上更清楚一些。
            function consoleDir(){
                function Car(){
                    this.Model = "Old Model";
                    this.getManu = function(){
                        return "Toyota";
                    }
                }
                
                var objCar = new Car();
                console.dir(objCar);
                console.dir(zoo);
                
                var groupname = "Css Style";
                console.group("The button Style", groupname);
                console.dir(document.getElementById('consoledir').style, groupname);
                console.groupEnd();
            }

           
    console.dirxml    打印出HTML元素的XML表示形式.

4、断言(console.assert())。
    console.assert()可以用来判断一个表达式是否正确,如果错误,他就会打印错误信息在控制台窗口中。
    
5、追踪(console.trace())。
    console.trace()是一个非常有趣的功能。我们先来看看官方的解释:打印Javascript执行时刻的堆栈追踪。
    这个函数可以打印出程序执行时从起点到终点的路径信息。
    比如如果我们想知道某个函数是何时和如何被执行的,我们将console.trace()放在这个函数中,我们就能够的看到这个函数被执行的路径。
    这个函数在调试其他人的源代码时非常有用。    

6、计时(Timing)。
    console.time(timeName)可以用来计时,这个在我们需要知道代码执行效率的时候特别有用,就不用自己造轮子了。
            function consoleTime(){
                var timeName = "timer1";
                console.time(timeName);
                var a = 0;                
                for(var i = 0; i < 100; i++){
                    for(var j = 0; j < 100; j++){
//                        console.log('Hello world');
                        a = a + 1;
                    }
                }
                
                console.log("a = %d", a);
                console.timeEnd(timeName);
            }

7、Javascript分析器(Javascript Profiler)。
    我们可以通过代码console.profile('profileName')或者单击Profiler标签来进行Javascript代码执行的分析。这个功能有点类似于console.time(),可以帮助我们评估
    代码的表现,但是能够提供比console.time()更详细的信息。

    有三种方法可以调用Javascript profiler。一种是在代码中写入分析脚本,一种是单击profile标签,最后还可以在命令行下输入命令来执行。
    执行后,可以看到详细的输出结果,下面对各项进行一些说明:
    Function Column:显示调用的函数名称;
    Call Column:显示调用次数;
    Percent Column:显示消耗的时间比;
    Own Time:显示函数内部语句执行的时间,不包括调用其他函数的时间;
    Time Column:显示函数从开始到结束的执行时间;
    Avg Column:平均时间。Avg = Own / Call;
    Min & Max Column:显示最小和最大时间;
    File Column:函数所在的文件;    

8、其他的一些选项。
    在Console Tab的最右侧有一个Options的选项,在这里可以自己定义需要显示的错误,其内容很好理解,这里就不多说了。
    有一点就是Firebug1.3以后,多了
    Show Chrome Errors
    Show Chrome Message

    等几个选项,这几个选项还没有验证过其具体的作用,哪位知道的可以共享一下。

 

[参考资料]

1、Firebug Tutorial    http://michaelsync.net/2007/09/09/firebug-tutorial-logging-profiling-and-commandline-part-i
2、Firebug Tutorial    http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii
posted @ 2009-05-12 10:44 Cocowool 阅读(1743) | 评论 (5)编辑
作为微软的官方品牌字体,Segoe Font是一种非常优雅的字体,小到海报大到Logo,Segoe字体应用在微软品牌宣传的各种领域,
最著名的就是在Vista中的应用。你很难在网络上下载到这个字体,如果不管通过何种渠道得到了她,你应该珍惜她。她就像
Helvetica一样好用,借助ClearType技术,她在小字体时甚至表现的更加清晰。如果你想自己做一个Microsoft的Logo,那么
你必须使用她才行。

这个网址 http://www.istartedsomething.com/20070531/download-segoe-collection/ 曾在2007年5月31日的时候,很敏感的
找到了意外在微软站点上发布的Segoe全套字体的下载,作者发布了字体的共享,不过不幸的,很快微软的A-Team(版权维护部门
Microsoft Legal Council)找上门来,作者也随即扯下了下载。作者表示A-Team一点也不幽默。(The A-Team has struck again.
They're no fun.)

Segoe系列的字体至少包含了27种,不仅包括ClearType类型,也包括PostScript、For Mac等各种字体。
在微软的官方网页上,http://www.microsoft.com/typography/fonts/family.aspx?FID=331
他们指出Segoe Family有下面几种字体:
    Segoe UI;
    Segoe UI Bold;
    Segoe UI Bold Italic;
    Segoe UI Italic;
    Segoe Light;
    Segoe UI Semibold;
    Segoe UI Symbol;

    xp系统中默认是没有这些字体的,如果安装了Office 2007,会增加,segoeui.ttf、segoeuib.ttf、segoeuii.ttf、segoeuiz.ttf
这四个字体。由于没有Vista系统,笔者并未实际考察Vista种具体都包括有哪些字体。

    目前网络上能够搜索到的字体也大多是这四种,至于传说中的27种字体,不知什么时候才能有幸一见。

 

补充说明:
看了大家的评论后我又仔细看了以下微软页面上的版权说明,微软的字体好像都是有Ascender Corpration代理的,页面上的链接也都指向了AC的网站。
我们想获得或者使用字体有两种方式:

1、购买或者下载Segoe UI Font。个人使用、在工作站中的专业或商业使用;
但是很不幸,满怀着希望进去以后却发现了令人伤心的结果。
Unfortunately Microsoft has not made the font you selected available for download at this time.

2、Segoe UI 字体许可。提供给企业、网络开发人员、为硬件、软件的分发或者服务安装提供使用许可;
想要获得许可的话,必须要填写一份表单,估计AC的人会和你联系吧,不过暂时我不许要为许可支付费用...


参考资料
1、Microsoft Font Family        http://www.microsoft.com/typography/fonts/family.aspx?FID=331    

 

posted @ 2009-05-07 21:56 Cocowool 阅读(1707) | 评论 (6)编辑

易用性是什么?

易用性就是是你的网站对用户来说使用更简单,能够让用户在他需要的地方很快找到需要的信息。类比于Google所提倡的”让用户呆在Google的时间不短缩短“,对于网站来说,我们不是减少用户在网站的停留时间,而是缩短用户寻找关键信息和向导的时间。

很多人认为要实现网站的易用性需要耗费大量的人力、财力和物力,确实有很多的大网站他们投入了很多的钱和设备去做网站的易用性的研究和测试,但是对于我们日常的小网站来说,我们仍有方法在没有专家和专业设备的基础上改进网站的易用性。

一、包含宣传词(Tagline)。

宣传词是一个用来表明公司理念、目标或者网站愿景的地方。这一部分应该是网站最引人瞩目的部分,应该用简短的语言概括站点。统计结果表明,一个页面只有8秒钟的时间来吸引一个用户继续他的浏览,所以如果不能用醒目的焦点吸引用户,那这个页面就是失败的。

国外的站点很多使用Tagline或者醒目的Flash,国内的站点也可以 这么用,有的时候内容多的时候,还可以是Banner+焦点图,这个要区分不同的网站类型来对待。例如对于产品型的网站,完全可以只使用一个焦点图或者醒目的有特色的Flash来吸引注意,如果是资讯类的或者专题类的页面,则可能既要有Banner,来突出这个页面的主题,也要有焦点图,来显示最近的一些动态。这个需要在制作的过程中不断地体会积累。

 

 

 

二、提供站内搜索。

站内搜索对于用户来说也是非常重要的,特别是当站点的内容量开始逐渐增多以至于用户不能很轻易的找到他想要的东西时,用户往往会想到搜索。 你能想象到,要在博客园里通过连接一个一个查找你之前看到过的某一篇文章的痛苦吧。

搜索框的长度和位置也需要加一点注意,不能太小,位置最好放在右上区域,因为根据用户的浏览习惯呈现出”F“的趋势(F Pattern),提交按钮的文字最好能够明确的告诉用户,接下来将要发生的动作是搜索。

 

三、不能滥用图片。

 从易用性的角度来看,Less Is Always More。

四、使用站点地图。

站点地图是一项能够改进站内导航和搜索引擎优化(SEO)的特性。典型的站点地图提供了站点的结构和各个页面的导航。站点地图可以是任何形式的,可以是一个网页、一些页面的列表,只要他们是按照层级关系组织起来的就行。

最近,Google、Yahoo、MSN开始提供Sitemap Protocol的服务,同站点地图非常相近,但是数据是以XML的形式组织的。

 

五、不要破坏工作流。

工作流是指用户在网站上所进行的操作,比如填写表单、注册用户、浏览目录、档案等,要允许用户撤销操作,如果没有提供后退或者返回的选项,用户就被逼着做他们不想做的动作,或者他们会干脆关掉浏览器来图个清净。

有些站点上的操作顺序并不是那么的明显,这个时候就需要有提示来指导用户。比如Yahoo Music当第一次进入的时候,会有一个向导来指导你一步一步的熟悉页面上各个功能区。玩游戏的时候也会有游戏教学这个环节,如果网站上也提供了,会带来很好的用户体验。

还有一个误区是改变超链接的样式。传统的门户往往让超链接停留在他原始的样子,这样能够给用户明确的指示,这是一个超链接,通过点击,我可以进入一个新的页面。当然,我并不赞成超链接的样式一定不能改变,但是如果发生了改变,我们一定需要通过图示或者文字来表明,用户可以通过点击这个链接到达另外一个页面。

六、让网站更容易被”扫描“。

内容的可读性能够提高用户的忠诚度,让用户停留在站点上获得他们需要的内容。但是研究表明,很多用户并不是在读页面,而是在”扫描“,通过扫描标题、着重文字、强调的列表来获得信息。

Jacbo Nilsen通过视觉追踪发现用户的浏览很像一个F型,他们从左到用从上到下的”扫描“页面。

 

他的实验同时也得出了一下结论:

用户不是一个字一个字的去阅读,而是从段落、着重文字中提取信息。

 文章的前两段非常的重要,这两段必须包括这篇文章的大部分内容。

副标题和列表能够重新引起用户的注意,注意用这些元素来强调重要的内容。

从传统的纸质媒体上得来的经验也告诉我们,将内容组织成一个倒金字塔型。关键问题是,我们如何才能知道什么信息对用户来说是重要的,那些信息对用户来说又是不重要的,作者推荐了一个工具:News Values。

七、不要设计容易误导的界面元素。

千万不要设计那种看上去像是一个按钮实际上不是的内容,我们也经常被那些带下划线的文字误导,当我们点击时,发现他们根本不是链接!

Yahoo是一个很好的正面的例子。

八、给出用户有意义的提示。

这一点大家应该都有共识了,不要将出错信息直接输出到页面上,要给出用户经过处理的、用户能够理解的信息。

九、不要过度使用Javascript。

过度的使用Javascript和Ajax技术,我们需要小心的避免出现浏览器兼容性问题,我们要很好的衡量这个代价。

十、避免验证符。

验证符的使用在必须的地方添加,如果不是那么必要,还是要符合人类懒惰的本性,去掉那些验证符吧。

 

总结:提升网站的易用性并不一定需要墨守成规,但是在没有足够的功力之前,这些规则能够为我们提供一个很好的方向指向。对于这些规则的争论也很多,比如避免验证符的使用,在很多情况下,我们必须使用验证符来避免垃圾信息的产生,就像坐飞机时的安检,虽然是一件让人不舒服的事情,可是他有他的目的。

 网站的易用性也不是网站的全部,我们必须在易用性、页面设计、站点的可维护性和安全性之间权衡,对不同类型的项目采取不同的处理策略。

参考资料:

[1]、http://www.webdesignerdepot.com/2008/12/10-usability-tips-for-web-designers/

[2]、http://www.useit.com/

[3]、News Values。http://mtsu32.mtsu.edu:11178/171/newsvals.htm#top

posted @ 2009-05-01 13:51 Cocowool 阅读(1519) | 评论 (7)编辑
一、什么是编码。

字符编码(Character Encoding)可以说就是让某一字符序列匹配一个指定集合中的某一东西,常见的例子包括长短电键组合起来表示的摩斯电码(Morse Code)、Baudot code、Unicode和用二进制来表示的ASCII(American Standard Code for Information Interchange)码、这样便能够将文本在计算机中存储和通过通信网络发送出去。

字符表(Character Set)和字符编码(Character Encoding)经常被混淆。实际上Character Set(字符表)只是指一组为特定的Encoding System(编码系统)使用的符号集合,而不包含他们的数字含义或者顺序。而Character Encoding(字符编码)则包括了Character Set(字符表)和每个字符在字符编码集中的表示方法。由于历史的原因,MIME(Multipurpos Internet Mail Extensions)和使用这种编码的系统使用属于“字符集(Charset)”来表示用于将一组字符编码成一系列8位字节数据的整个系统。

摩斯电码(Morse Code)发明于1840年,用来编码字母、数字和拉丁字符,都用长短组合的电键来表示。
ASCII码发明与1963年,是由7位(7-bit)的二进制代码表示字符、数字、符号和固定长度的设备控制代码。同年,IBM使用8位(8-bit)的编码机制实现了ASCII的扩展EBCDIC(IBM's Extended Binary Coded Decimal Interchange Code)。

二、现代编码模型

Unicode和与他同等的标准ISO/IEC10646 UCS(Universal Character Set)共同构成了现代字符编码,为了更详细的解释这两个标准我们需要了解下面的一些概念。

字符表(Character Set或Character repertoire)是一个系统所支持的所有抽象字符的总和。字符表可以是封闭的,例如ASCII和多数ISO/IEC 8859,也可以是开放的,例如Unicode等可以添加新的符号。特定字符表中的字符反映了如何将书写系统分解成线性信息单元的问题。

编码字符集(CCS:Code Character Set)定义了如何使用称为码点的非负整数表示一个字符表。一个完整的字符集和对应的整数一起称为“编码字符集”。多个编码字符集可以表示同样的字符表,例如ISO-8859-1和IBM的代码页037和500覆盖同样的字符表但是将他们映射为不同的代码。

字符编码形式(CEF:Character Encoding Form)定义将编码字符集的整数代码转换成有限大小整数代码值以有利于使用固定位的二进制表示数字的形式的系统存储。

字符编码机制(CES:Character Encoding Scheme)定义固定大小的整数代码如何映射到适合基于8位字节数居的文件系统存储或者基于8位字节网络传输。在多数使用Unicode的场合,一个简单的字符编码机制用来指定每个整数的字节顺序是大字节在先排列顺序(Big-Endian)或者小字节在先排列顺序(Little-Endian)。然而,有些复杂的字符编码机制使用转义序列在几种简单编码机制和用于减小每个单元所用字节数的压缩机制之间切换。

Big endian和Little endian。
“endian”这个词出自《格列佛游记》。小人国的内战就源于吃鸡蛋时是究竟从大头(Big-Endian)敲开还是从小头(Little-Endian)敲开,由此曾发生过六次叛乱,其中一个皇帝送了命,另一个丢了王位。

三、文件编码格式。

从文件编码的方式来看,文件可分为ASCII文件和二进制文件。
ASCII文件也称为文本文件,这种文件在磁盘中存放时每个字符对应一个字节,用于存放对应的ASCII码。
二进制文件是按二进制的编码方式来存放文件的。
二进制文件虽然也可在屏幕上显示,但其内容无法读懂。C系统在处理这些文件时,并不区分类型,都看成是字符流,按字节进行处理。输入输出字符流的开始和结束只由程序控制而不受物理符号(如回车符)的控制。 因此也把这种文件称作“流式文件”。

四、字符编码的转换。

由于目前共存的众多字符编码方法,为了方便,人们开发了很多在不同字符编码机制间转换数据的程序:

多平台方法:
iconv        提供标准的程序和API来进行编码转换;
convert_encoding.py    基于Python的文本文件转换工具;
decodeh.py    提供算法和模块来谈测字符的编码;

Linux:
recode    转换文件编码;
Utrac    转换文件编码;
cstocs    转换文件编码;
convmv    转换文件名编码;
enca    分析给定文件的编码;

Windows:
cscvt    字符集转换工具;

五、Linux下利用Vim查看文件编码和进行编码转换。

在VIM中查看文件编码
:set fileencoding

在VIM中执行文件编码转换
:set fileencoding=utf-8

我的系统Fedora 10的VIM默认是不支持GBK的,如果想让VIM支持,需要修改~/.vimrc
set fileencodings=utf-8,gbk
这样VIM就会按照这个顺序去匹配文件的编码

五、使用命令进行文件编码的转换

可以使用最常用的ICONV命令进行文件编码的转换,格式
iconv -f encoding -t encoding inputfile
更详细的说明可以man iconv


[参考文献]
1、MSDN    http://msdn.microsoft.com/zh-cn/library/x14b16ab(VS.80).aspx
2、文件编码格式    http://blog.chinaunix.net/u2/82877/showart_1892207.html
3、Linux下查看文件编码、文件编码转换和文件名编码    http://www.luoxf.net/wordpress/archives/227
4、字符、字节和编码        http://www.regexlab.com/zh/encoding.htm
5、CSDN相关文章    http://blog.csdn.net/fancyaphy/archive/2006/03/09/619972.aspx
6、WIKI字符编码    http://zh.wikipedia.org/wiki/%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81
7、Character Encoding    http://en.wikipedia.org/wiki/Character_encoding
8、MIME    http://en.wikipedia.org/wiki/MIME
posted @ 2009-04-25 17:45 Cocowool 阅读(114) | 评论 (0)编辑

第1列分钟1~59
第2列小时1~23(0表示子夜)
第3列日1~31
第4列月1~12
第5列星期0~6(0表示星期天)
第6列要运行的命令

下面是crontab的格式:
分 时 日 月 星期 要运行的命令

这里有crontab文件条目的一些例子:

30 21 * * * /usr/local/apache/bin/apachectl restart
上面的例子表示每晚的21:30重启apache。

45 4 1,10,22 * * /usr/local/apache/bin/apachectl restart
上面的例子表示每月1、10、22日的4 : 45重启apache。

10 1 * * 6,0 /usr/local/apache/bin/apachectl restart
上面的例子表示每周六、周日的1 : 10重启apache。

0,30 18-23 * * * /usr/local/apache/bin/apachectl restart
上面的例子表示在每天18 : 00至23 : 00之间每隔30分钟重启apache。

0 23 * * 6 /usr/local/apache/bin/apachectl restart
上面的例子表示每星期六的11 : 00 pm重启apache。

* */1 * * * /usr/local/apache/bin/apachectl restart
每一小时重启apache

* 23-7/1 * * * /usr/local/apache/bin/apachectl restart
晚上11点到早上7点之间,每隔一小时重启apache

0 11 4 * mon-wed /usr/local/apache/bin/apachectl restart
每月的4号与每周一到周三的11点重启apache

0 4 1 jan * /usr/local/apache/bin/apachectl restart
一月一号的4点重启apache

posted @ 2009-04-22 13:40 Cocowool 阅读(41) | 评论 (0)编辑