标签归档：Web

维护个人站点常用到的操作备忘

如果拥有自己的主机或者vps，在日常中的维护中会有一些操作，主要体现在内容更新、备份，数据库备份，本地测试等诸多内容。我选用的是Linode VPS，用的是ubuntu作为操作系统，上面主要部署了自己的web站点和基于wordpress的个人博客，日常难免进行一些维护，由于维护不是非常的频繁，所以有必要对用到的操作做一下备忘记录。

1、mysql的备份与恢复

数据备份
mysqldump -uroot -p yourdestdb> target.sql
其中 
yourdestdb 是要备份的数据库
> 是备份符号
target.sql 是备份的文件名

数据恢复
mysql -uroot -p yourtargetdb< /destpath/dest.sql
其中
yourtargetdb 是要恢复的目标数据库
< 是恢复符号
destpath 是备份数据文件的路径
dest.sql 是备份文件名

2、文件目录的压缩

tar -cpzf /backup/target.tar.gz /dest
压缩dest目录，保存在backup目录中，压缩文件为target.tar.gz
c 新建 p 保留权限 z 使用gzip处理 f 指定存档或设备

3、在本地调试wordpress

有时会需要需要在本地调试wordpress，将vps上的数据导入本地后，需要处理四部分的内容

（1）修改配置文件wp-config.php，使用文本编辑器打开编辑
（2）修改数据库表wp_options中的option_value替换为本地url
（3）修改数据库表wp_posts中的guid替换为本地url
（4）修改数据库表wp_posts中的post_content替换为本地url

update wp_options set option_value = replace(option_value,"http://www.youinterneturl.com","http://youlocalhosturl");
update wp_posts set guid = replace(guid,"http://www.youinterneturl.com","http://youlocalhosturl");
update wp_posts set post_content = replace(post_content,"http://www.youinterneturl.com","http://youlocalhosturl");

-EOF-

新版产品网站基本完工

6条回复

借这次的App的推出，终于下决心改版网站，于是乎在刚刚在各个市场上提交App后，马上就开始动工。其实早就该改版了，一直以来看着就挺闹心的，页面的布局使用Table，那是一个Table嵌Table啊，宽度也不太适应最近几年屏幕分辨率的发展了，在现在的分辨率下看着这屏幕中间的一个细条，就是基于这两点吧，也早该改版了。

基于上面说的，这次改版的目标：

1、基于CSS的布局，全面抛弃Table；

2、看起来大气一些，像那么回事；

3、分辨率为近几年比较常用的960px宽；

4、功能上的需求来源于老版本，并增加新元素：方案跟服务，产品的分类在以前基础上增加掌上App；

有了目标，也就定下了方向，接下来就是着手设计制作，并最终实现，设计制作没什么可说的，就是用Photoshop按照自己想改版设计原型图，各个功能模块及效果一个一个的做。最终实现上可选择的就比较多了：
1、可以选择开源的CMS来实现；
2、可以自己从头写（PHP+MySQL ），模板采用Smraty或者也自己写；
3、纯静态页面；

最终选择了第三种，用手工打造纯静态页面，一页一页实现，选择这个的原因其一是这个网站主要以展示自己的软件项目为主，本身平常的动态数据及更新量很小，需要交互的地方也很少，其重点在于软件产品的后续更新升级；其二是这样实现的时间成本最低；其三是这样实现对于存在的需要交互的地方以后可使用Ajax+Js+PHP+MySQL来嵌入到现有的静态页面，也满足后续的交互需求；

基于这三点，这次的网站改版使用Vim + Photoshop 这两样工具，历经几天，于今天基本上完工，除了有些链接地址未指向（相关文档软件需要重新整理更新一下）。

由这里进入访问

总结

1、明确需求及目标

这个是基础，只有这些明确了，才能产生设计、才能选用合适的方法[架构]、才能完成实现。需求及目标应建立在总体之上，除非这个需求及目标本身就是独立的，依托核心要做的或为核心服务而产出的需求及目标要统筹考虑。

2、设计

设计主要是确定结构并建立结构，对需求的分类与整理，是当前设计人员对于需求的理解，并以视觉的展现及交互的描述，这是个复杂活，需要经验、多行业的知识、时间的沉淀，而且每个设计人员的设计都不一样。

2、选择适合方法

合适的方法是要看到侧重点，对于这个网站来说是对产品的辅助，不是重点，节约时间成本是比较重要的。合适的方法能满足后续的扩展，该扩展是建立在对需求的理解与明确基础之上的，而且要可实现。

4、改进的地方

在完工以后会产生各种改进的想法，这次完工后马上产生需要改进的想法主要体现在导航上面，应该能更加明晰的在每一页告诉访问者当前在哪里；第二个产生要改进的是分散的图片合成一张图片，减少图片加载次数；

— 结束—

互联网企业提供的产品服务不应该强制频繁的推荐

35条回复

现在有越来越多的人使用互联网产品（服务），而作为互联网产品（服务）的企业的营销中往往会采用病毒营销的方式来推进自己的产品或者服务，而电子邮件作为病毒营销的一种很频繁的被别人使用，所以现在几乎每个人的Email中每天都会有很多的垃圾邮件，这种是通常的方式，应该把这样的方式称之为纯粹的用邮件来进行营销，这样的方式一般采用购买行业邮件数据及群发工具，然后开始群发，根据群发用户的各项操作进行统计分析，然后改善邮件内容或者标题等等，然后周而复始的发送，已取得期望的营销效果。

还有另外一种情况，这里我觉得有必要说说，现在提供互联网产品（服务）的企业，往往首先会要求使用者进行注册，然后通过注册这个过程，多数企业都会跟用户有一个基于Email的交互，一般用于激活帐号或者验证帐号，在前端时间帐号泄密的一些列事情的推动下，以后会有更多的企业都会跟用户之间有一个这样的交互。一般用户在这样的互联网产品（服务）上注册表明其就本次而言，该产品（服务）对其产生了价值，所以才会有这样一个互动，就这次互动本身大多数公司就把其当作是一个激活也好验证也好的一个过程，这样就挺好，明确完成了这个交互的需求，完成这个过程应该到此就结束了。

对于用户：激活或者验证完，可以使用该产品（服务）了，如果使用良好，以后肯定会成为该企业的一个长久用户，产生长久效益；

对于企业：有了经过验证的用户数据了，可以进行产品或服务的推荐了；

我想更多的是企业考虑如何提供更好的能够满足用户的产品，这才是正道，只有具有核心价值的产品（服务）才能留住更多的用户。对于产品或服务的推荐呢，应该是变相的电子邮件营销，应该对自身拥有的用户行为数据进行挖掘有选择性的推荐，而不是像现在很多企业强制性的频繁的推荐，几乎每天都能收到大量的邮件推荐这个推荐哪个，如果确实是所需要的推荐，那么双方皆大欢喜，可现在我自身每天收到的确不是我想要看到，时间久了，也就厌烦了，以前可能使用这个企业的产品（服务）现在也就不会使用了，直接设为垃圾邮件，OK，以后就不会再想起这个了，这样也就意味着失去了一个本来可能成为活跃的用户。

我想是不是在推荐的时候考虑以下几点：

1、应该让用户选择是不是接收推荐（就像软件有更新了要让用户选择是不是更新），或者有很方便设置不接收推荐的选项；

2、是不是考虑适当的周期推荐一次（有重大活动或者里程碑的节点，或者是固定的周期，每天都推或每天推几次容易让人厌烦）；

3、是不是根据用户行为数据进行精确的推荐，大而全的推荐在很容易让人淹没在信息中而不知所措；

互联网给人带来方便的同时，其爆炸式的信息洪流也很容易让人淹没在网络中，往往大半天过去了，在网上翻腾不到自己所需的东西，所以精确的推荐在以后会是越来越多的人所需要的，但是这个推荐应该是真实的，有效的，用户认可的。

左侧Tab切换页面实现

23条回复

最近在玩着做一个小站，目前的状态正处于设计阶段（再小的东西都需要设计一下的），在Photoshop中做好图转化成页面，页面中有个部分需要实现左侧Tab页面切换的效果，做了下代码实验，最终实现，分享出来供需要的人取用。

设计的最终效果图如下所示：

左侧可以切换的页面

之所以选择使用Tab页面切换来显示页面中的内容是因为要显示的内容属于同一类型，内容能在该类型中很清晰的分组，这样有利于用户在浏览的时候有更好的比较跟选择，能在同一块显示区域显示更多的内容，有较好的体验，这仅仅是自己的想法，不一定正确。（btw：在网上称为滑动门在目前的网站中比较常见，这让我想起前不久还在职的时候经历的一个项目，决策者放佛迷恋这种效果，于是说能用滑动门都用滑动门，于是乎…）。

1、设计到页面的转换

首先PS中设计出上图，然后开始切图，主要切出左侧Tab页面即可，因为右边内容区域可设置容器的border来达到最终效果，切出52×32的图，有两个，切好后如下所示。

然后就开始形成最终要用的页面，主要想法是左侧Tab条跟右侧内容区域，两个float：left；跟整个的con大小匹配，然后用js完成在左侧tab按钮条选择切换的时候应用不同的样式即可，考虑到IE跟Firefox的像素差距注意使用！important，在选择到Tab页的时候，让tab的图像向右偏移一个像素（px），使用对象不可层叠（position取值为relative）将内容区域的边线遮住，然后加上调试，形成最终代码如下。

2、测试页面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>tab test</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <link rel="stylesheet" type="text/css" href="style.css" />
  </HEAD>
<BODY>
  <div id="con">
    <ul id="tabs">
      <li style="margin-top:25px;" class="selectTab">
        <a href="javascript:void(0)" onclick="selectTab('tabContent0',this)">tab1</a>
      </li>   
      <li><a href="javascript:void(0)" onclick="selectTab('tabContent1',this)">tab2</a></li>
    </ul>
    <div id="tabContent">
      <div id="tabContent0" class="tabContent selectTab">
        <p>tab1 contents</p>
      </div>
      <div id="tabContent1" class="tabContent"><p>tab2 contents</p></div>
    </div>
 </div>
</BODY> 
<script type="text/javascript">
  function selectTab(thisContent,thisObj) {
    thisObj.blur();
    var tab = document.getElementById("tabs").getElementsByTagName("li");
    var tablength = tab.length;
    for(i=0; i<tablength; i++) {
      tab[i].className = "";
    }
    thisObj.parentNode.className = "selectTab";
    for(i=0; j=document.getElementById("tabContent"+i); i++) {
      j.style.display = "none";
    }
    document.getElementById(thisContent).style.display = "block";
  } 
</script>
</HTML>

3、相关的样式文件

#con{width:439px !important;width:440px;height:402px;float:left;}
#con #tabs{height:400px;width:52px;margin:0;padding:0;float:left;}
#con #tabs li {float:left;background:url(tabnormal.png) no-repeat; height:32px; list-style-type:none;width:52px;margin-top:8px;text-indent:12px;font-size:14px;}
#con #tabs li a { text-decoration:none; float:left; background:url(tabnormal.png) no-repeat;height:32px;line-height:32px;color:#000;}
#con #tabs li.selectTab {background:url(tabselect.png) no-repeat;position:relative;height:32px;width:52px;right:-1px;}
#con #tabs li.selectTab a {background:url(tabselect.png) no-repeat;color:#7979b3; height:32px; line-height:32px;}
#tabContent {background-color:#fff; border:1px solid #0087ae;float:left;width:384px !important;width:382px;height:400px;} 
.tabContent {margin:10px 0 0 10px;color:#474747; width:360px; display:none}
#tabContent div.selectTab{display:block}

页面客户端简易柱状图的实现

4条回复

对于统计的的结果很多时候会采用一些图表进行显示，这样一方面给人的视觉上有很直观的表现，另一方面比起数字来说有很强的对比性及友好性，其中柱状图是常用到的一种图表。

在页面客户端展现柱状图目前多采用图片，其实现方式包括直接由服务器的脚本生成、一些类库、Flash等，对于简单的柱状图其实也可以使用CSS结合Javascript来完成.

1、最终效果

柱状图（效果中颜色跟高度随机）

2、页面代码

<!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>Histogram</title>
  <style type="text/css">
    #Histogram{
      width:300px;
      height:150px;
      position:relative;
      border-left:1px solid #000;
      border-bottom:1px solid #000;
    }
    #Histogram ul {
      width:300px;
      height:150px;
      margin:0;
      padding:0;
    }
    #Histogram ul li {
      position:absolute;
      width:12px;
      height:120px;
      bottom:0px;
      padding:0 !important;
      margin:0 !important;
      text-align:center;
      font-weight:bold;
      color:#fff;
      line-height:2.5em;
    }
  </style>
  <script language="javascript" type="text/javascript">
    function getRandomColor() {
      var str = "0123456789abcdef";
      var sColor = "#";
      for(var i=0;i<6;i++) {
        sColor = sColor + str.charAt(Math.random()*str.length);
      }
      return sColor;
    }
    function setResults() {
      var oRes = document.getElementById("Histogram");
      var tmpString = "";
      tmpString += "<ul>";
      for (var i=0; i<10; i++) {
        tmpString+="<li style=\"left:"+(30+(20*i))+"px;background:"+getRandomColor()+";height:"+Math.random()*120+"px;\">"+i+"</li>";
      }
      tmpString+="</ul>";
      oRes.innerHTML = tmpString;
      oRes.style.display="block";
    }
  </script>
</head>
<body onload="setResults();">
  <div id="Histogram"></div>
</body>
</html>