快乐八哥 - 博客园

2013年4月29日

使用Unix的初期需要知道您访问Unix的方式。有2种不同的方式。

1.您是作为共享的多用户系统的一部分，例如在学校等机构或者公司单位中

2.您拥有一台自己的Unix计算机。这种情况下，您控制计算机并且是唯一的用户。当然你家只有一台电脑，您和家人使用不同的帐号登录Unix系统应该属于第一种情况，共享多用户。

基于第一种情况，一般在学校等机构或公司，就有专门人负责管理和维护Unix系统。这样的人称之为：系统管理员。System Administrator.我们一般简称：admin或sysadmin

我们自己的角色是普通的Unxi/Linux用户。系统管理时一份全职的工作，需要大量的专业知识，系统管理员可能还有许多助手，协助他共同完成系统的管理和维护。系统管理员不等同于网络管理员。现在很多企业的IT部门，有全职的员工，他们是系统管理员，同时也可能是网络管理员。我一般区分系统管理员和网络管理员是采用如下分类：

配置公司或机构里面的系统的人员，比如配置IIS，FTP，Email，反向代理服务器等，可以认为是系统管理员；

而配置路由器和交换机，制作网线，设置网络防火墙等任务的人员，可以认为是网络管理员。

1.用户标识和口令

用户标识也就是用户的账户。userid：user identification

口令：就是用户的密码。

2.登录和注销

login指令使用。在Ubuntu上必须切换到root账户下，然后输入“login”指令才有效，

出来的结果如下图所示。记住：默认新装的Ubuntu，没有设置root密码。

注销账户可以使用”logout”和”exit”指令，Ubuntu下这2个指令都可以使用。

3.shell提示介绍

目前最流行的3种shell。分别是：Bash,C-Shell和Korn Shell.

对于Bash和Korn Shell来说，提示是一个美元符号。

对于C-Shell来说，提示是一个百分比符号：

4.修改口令

如果需要修改密码时，输入“passwd”命令，我经常输入为“password”。其实这是Unix系统早期开发时，为了简洁而这样取名的。比如其他一些指令：ll,ls,cp和ps等。

另外一个我比较不能接受的就是，输入密码时，字符是不回显的。设计目的是防止他人偷看到你的口令。但是反观Windows 8系统，它一个比较大的更新是密码框，右侧有个小眼睛，

你可以点击眼睛，然后查看你在密码框输入具体的内容。我觉得这个功能对普通用户来说是非常的方便。你如果都用*来表示，一方面我不知道输入了多少位，另一方面我也不知道我输入的是否正确。所以我真心希望哪天Unix或GNU/Linux提供一个快捷键，然后用户查看输入的密码，而且要回显功能呀!

5.注意事项

Unix系统是区分大小写的。这也是很多从Windows系统迁移过来用户经常忽略的。

PS：之前笔记本是安装的Ubuntu12.04，前天升级到13.04 UbuntuKylin版，发现那些窗口动画效果在低配置电脑跑起来就像电影镜头慢放一样，所以又装回了12.04。看样子新系统对配置要求也高了。以上主要是《Unix&Linux大学课程》读书笔记，所以实践操作，我自己选择的是Ubuntu。

posted @ 2013-04-29 17:40 快乐八哥阅读(803) 评论(4) 编辑

2013年4月18日

Photoshop切图学习

前端开发中，之前都是Designer给我们切好图，给出readline，所以我们前端工程师基本不自己动手切图，现在换了新的公司，需要我们自己手动切一些图。Designer制作好的psd的图片如下：

自己想达到以下要求：

1.将“Sign in”按钮填充放大，文字也放大并且居中显示

a).选中要操作的图层

b).选择右下角进行拖动，可以看到图片变大了。也可以在工具栏中直接设置图片的x，y坐标和width、height值。

c).如果文字不是居中显示的话，我们可以选中文字的图层，然后点击

T字区域。工具栏会显示文字设置。

在这里可以调整文字的字体family和字体大小，消除锯齿的方法等。

d).放大或缩小字体之后，文字不会水平和垂直居中，需要调整。

选中文字和按钮背景的图层：

然后工具栏如下图所示：

可以设置水平对齐和垂直对齐方式。

2.如何快速从一个大图中切出需要的那个小图(Sign in按钮)

通过上述方法，我们制作了一个简单的放大版的登录按钮，现在要裁剪下来，给前端开发使用。所以要了解如何从一张很大的图（就是说有很多图层构成的图）切出那个小图（当前就是制作好的登录按钮）

步骤：

a.新建一个photoshop文件

然后直接将选中的登录按钮拖放到新的文件上。效果如下：

b.在新的文件中，点击“图像”->“裁切”。弹出的对话框如下：

点击确定就可以将透明的背景去掉，只剩下我们需要的登录按钮。将文件另存为就好了。

PS：Photoshop中“裁剪”和“裁切”的区别

参考网址：

http://helpx.adobe.com/cn/photoshop/using/adjusting-crop-rotation-canvas.html

http://yiliyumili.blog.163.com/blog/static/972595220132203171165/

posted @ 2013-04-18 11:10 快乐八哥阅读(38) 评论(0) 编辑

2013年4月12日

让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能

项目中有两份代码，一份是Main Site，一份是Mobile Site.Main Site里面主页使用到jQuery Tools Scrollable功能，让多张图片循环显示。但是这个功能移植到Mobile Site中，出现了一些问题。

因为本身要实现scrollable功能，必须有特定的html结构和css。然后调用scrollable()方法才能实现这个功能。一个基本scrollable实现代码可以参考jQuery Tools的官方文档。参考地址：http://jquerytools.org/demos/scrollable/

.scrollable{
    position:relative;
    overflow:hidden;
    width:660px;
    height:90px;
}

可以看出我们必须设置最后可显示区域的宽和高。其实这个高度也就是所包含的图片的宽和高。在Mobile Site开发过程中，为了适应手机拥有不同的分辨率和大小尺寸。在开发过程必须对图片的width设置为100%，图片的height不设定。当用户使用不同的分辨率的手机查看站点时，浏览器自动缩放图片。但是问题就来了，我们要实现scrollabel功能，必须设置可见区域的宽度和高度。

所以需要在页面load之后就进行resize操作。基本解决办法是在调用scrollable()方法之前就进行图片的resize操作。但是这个解决方案有一个很的问题就是如何去判定当前要显示的三张图片的第一章显示的默认宽高。因为我们将图片的width设置为100%，height需要等浏览器解析完成才能取得。如果本身图片不是放在应用程序的目录，是从第三方或者云存储平台过来的话，取得图片的height都是为0，所以我们在项目代码中加入1秒的延时，通过延时1秒才去读取浏览器默认使用width：100%显示的图片的高度。

效果如下：

代码如下：　　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Scrollable with resizing for mobile web</title>


    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width" />
    <style type="text/css">
        #mainContainer
        {
            margin: 0 auto;
            width: 100%;
            height: 100%;
        }
        #scrollable
        {
            /* required settings */
            position: relative;
            overflow: hidden;
        }
        .scrollable .items
        {
            /* this cannot be too large */
            width: 20000em;
            position: absolute;
        }
        .items div
        {
            float: left;
        }
    </style>
    <!-- jQuery Library + UI Tools -->
    <!--<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/jquery.tools.min.js"></script>-->
    <script src="jquery.tools.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="mainContainer">
        <a class="prev browse left"></a>
        <!-- root element for scrollable -->
        <div class="scrollable" id="scrollable">
            <!-- root element for the items -->
            <div class="items">
                <!-- 1-->
                <div>
                    <img id="originalImg" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf.jpg"
                        width="100%" />
                </div>
                <!-- 2 -->
                <div>
                    <img src="http://farm1.static.flickr.com/30/37446217_14bc95631a.jpg" width="100%" />
                </div>
                <!-- 3 -->
                <div>
                    <img src="http://farm1.static.flickr.com/200/507751258_5f13e3d802.jpg" width="100%" />
                </div>
            </div>
        </div>
        <!-- "next page" action -->
        <a class="next browse right"></a>
    </div>
    <div>
        Hello World.
    </div>
    <script type="text/javascript">
function widthUpdate() {
            //$("body").width()即取得当前viewport的宽度
            $("#scrollable .items div img").css("width", $("body").width());

            var ModuleHeight = $("#scrollable .items div img").outerHeight();


            if (ModuleHeight != 0) {
                $("#scrollable").css("height", ModuleHeight);
            }
        }
        $(window).resize(function () {
            widthUpdate();
        });
        $(function () {
            setTimeout(function () {
                widthUpdate();
            }, 1000);

            //scrollable for images
            setTimeout(function () {
                $(".scrollable").scrollable({ speed: 400, circular: true }).navigator().autoscroll();
            }, 2000);
        });
    </script>
</body>
</html>

不知道园子里面有人是否遇到过相同的问题。这个bug在本地测试问题好像不大，并且我们使用asp.net页面缓存。所以开发的时候根本发现不了这个问题。上线之后，用户可能是第一次访问我们的站点，那么我们之前的代码获得图片的高度为0，所以根本不显示图片，但是我们resize浏览器窗口时，图片就显示正常。本来想通过判断加载第一张图片是否完成的。使用的代码如下，但是依旧解决不了这个问题。不知道大家是否有更好的解决办法。

posted @ 2013-04-12 17:44 快乐八哥阅读(578) 评论(0) 编辑

2013年4月10日

Facebook Like Button在IE上的bug

项目主要是欧美项目，所以大多数网站都要集成Facebook,Twitter和Email三个功能。随着Google大力推广Google+，而且现在图片分享也很火热。估计越来越多的网站会添加Google+和Pinterest功能。

但是从目前开放API来看。Facebook是做的最好一家，文档和示例都很丰富，所以开发者也愿意接入FaceBook，不过可惜国内无法正常访问。网站需要兼容IE7-10,Chrome，Firefox和苹果设备上Safari。

功能需求界面如下，点击图1的图标，弹出一个如图2的模式对话框。然后就有一些相关的信息，用户就把title和description分享出去。点击Like Button（这里使用的西班牙语）。用户可以输入评论，然后把内容分享到Facebook Timeline上。

(图1)

(图2)

点击Like Button应该出现的效果如下图：

(图3)

facebook开发者文档地址：http://developers.facebook.com/docs/reference/plugins/like/

在其他浏览器中都是正常的。但是在IE中显示不正常，这个Like Button有时出现，有时不出现。通过Facebook在线代码生成工具，操作步骤如下图：

在第二点中提到，未来适应老版本的IE，需要在html标签中添加xml命名空间，http://ogp.me/ns/fb#. 这个是很多开发者容易忘记的一点。但是我们遇到不是这个问题。因为我们使用的Javascript动态拼接最后一个html代码片段。但是我们只有用户点击了图1的icon，才出现模式对话框，此时才显示Like Button。就是说一开始这个button根本没有显示出来，当我们打开模式对话框，fb:like标签没有去重新解析，所以显示不了。

解决办法是，需要调用FB.XFBML.parse()方法，让浏览器重新去解析一下fb:like标签。

参考网址：http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

在我们项目中，还不能简单的在拼接html代码片段之后调用FB.XFBML.parse()方法。因为模式对话框没有打开，解析了也是没有用的。所以我们需要在打开模式对话框的函数里面，先调用FB.XFBML.parse()方法，然后再显示对话框。这样就可以在IE浏览器中正常的显示Like Button。

posted @ 2013-04-10 22:44 快乐八哥阅读(545) 评论(3) 编辑

2013年4月7日

使用jQuery Tools scrollable注意事项

项目开发中一直使用jQuery Tools中scrollable插件，一直也只是停留在使用上，最多看文档实现如何调用它的prev(spped)和next(speed)等几个方法。因为都是要完成几张图片在首页轮流展示，开发人员和测试人员都没有去关注图片的播放顺序是否正确。今天测试人员开出了一个bug，说页面在第一次载入时，scrollable展示图片的顺序不对。显示的是最后一个，而且显示第二张图片时，实际图片是第二张图片，而不是第一张。因为很多情况下，我们会出现表示当前第几张图片的小icon，如下图：

问题来了，scrollable默认不是从第一张图片开始显示，而是：image 4->image 2->image3->image4。第一次不是显示的image 1。通过chrome develop tools，显示的cloned的元素。如下：

本身scrollable插件生成class为cloned的元素，是为了动画循环显示，但是在这里浏览器把它作为第一张图片显示了。

代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery Tools Scrollable使用注意事项</title>
    <!--jQuery Tools CDN-->
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
    <style type="text/css">
        #itemsContainer {
            margin:0 auto;
            width:600px;
            height:600px;
        }
        .scrollable {
            position:relative;
            overflow:hidden;
            width:430px;
            height:180px;
        }
            .scrollable .items {
                width:2000em;
                position:absolute;
            }
        .items div {
            float:left;
        }
    </style>
</head>
<body>
    <div id="itemsContainer">
        <!-- root element for scrollable -->
        <div class="scrollable" id="autoscroll">

            <!-- root element for the items -->
            <div class="items">

                <!-- image 1 -->
                <div>
                    <img src="images/google1.png" />
                    
                </div>

                <!-- image 2 -->
                <div>
                    <img src="images/google2.png" />
                </div>

                <!-- image 3 -->
                <div>
                    <img src="images/google3.png" />
                </div>
                <div>
                    <img src="images/google4.png" />
                </div>
            </div>

        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            
            $("#autoscroll").scrollable({ circular: true }).autoscroll({ autoplay: true });

            //setTimeout(function () {
            //    $("#autoscroll").scrollable({ circular: true }).autoscroll({ autoplay: true });
            //},2000);
        });
    </script>
</body>
</html>

目前修复的方式，延迟调用scrollable()方法。所以使用setTimeout()进行2秒的延迟操作。

将上面的代码改为：

setTimeout(function () {

$("#autoscroll").scrollable({ circular: true }).autoscroll({ autoplay: true });

},2000);

重新运行页面，发现正常。

参考网址：

http://jquerytools.org/demos/scrollable/index.html

http://jquerytools.org/documentation/scrollable/index.html#api

posted @ 2013-04-07 21:35 快乐八哥阅读(606) 评论(1) 编辑

仅列出标题下一页