linux上安装node.js

说明:

使用CentOS系统,进行node.js安装,node.js版本- v0.12.0。

1,先下载node.js:

# wget http://npm.taobao.org/mirrors/node/v0.12.0/node-v0.12.0.tar.gz

//用的淘宝镜像,更快

2,解压文件

# tar xvf node-v0.12.0.tar.gz

 

3,进入解压目录

# cd node-v0.12.0

 

4,检查所需要配置

# ./configure

 

5,如出现以下错误,安装gcc-c++ (安装较新的版本可能会出现)

注意:线上服务器请勿随意升级,建议尝试其他版本的 node.js!!!!!

出现错误提示:

WARNING: C++ compiler too old, need g++ 4.8 or clang++ 3.4 (CXX=g++)

# yum install gcc-c++

如无,请跳过

 

6,进行安装(时间比较长):

# make install

 

7,检查是否成功安装,输入命令:

# node -v

 

如果安装成功会输出相应版本号,如:

v0.12.0

 

8,现在可以创建一个test.js文件进行测试,文件内容为:console.log('Hello World.');

输入命令:

# node test.js

输出:

Hello World.

 

育网专题评论区改版

整    理:肖雅君

时    间:2015-12-04

更    新:2016-02-26

说    明:育网专题PC端和WAP端使用本公司开发的评论区修改步骤

 

一、PC端

1.公共头部

2.评论部分

二、WAP端

1.添加手机端评论样式

2.头部添加代码

3.底部添加代码

4.分享

 

PC端和WAP端评论区改版

头部+导航+底部+评论区

以前PC端和手机端的的评论部分都是用的“畅言”(畅言是搜狐推出的社会化评论及聚合平台)。但以后育网专题都会采用育儿网仿畅言做出来的评论。暂时尚未做成后台,所以需要前端手动添加各种文档、修改参数。

一、PC

  1. 公共头部

简介:育网公共头部,包含导航和登录的php文件以及头部样式引入。

添加方式:无需拷贝文件,无需改变路径,只需要在对应位置添加两串固定代码。

添加位置:  

<html>
<head>
<?php include "../global/meta.php";?>
</head>
<body>
<?php include "../global/header.php";?>
</body>
</html>

2.“评论”部分

(1)引入评论:

在<!DOCTYPE html>前添加如下代码:

<?php
include_once('../include/global.php');
$id = 11742336;//帖子ID
?>

(2)修改方式:

后台操作:

专题后台链接:http://www.ci123.com/special/sadmin/clearup_list.php?page=4

编辑那边通过后台发布的评论页面有可能是.html文件,(如:http://www.ci123.com/special/sadmin/recommend/recommend.php?code=piyao-ceqie.html),.html文件对应的是“畅言”的评论。

转成育网评论需在后台操作,步骤如下:

将“是否使用妈妈社区评论”选择“是”:

2

本地操作:

第一步:在index.php中添加两个样式文件(固定链接):

在index.php的<head>部分添加“左侧评论块”和右侧“专题推荐”部分的样式文件:

<link rel="stylesheet" href="http://www.ci123.com/special/dajiashuo-pc/styles/reply.css">

<link href="http://www.ci123.com/special/recommend/css/recom-wqhg.min.css" rel="stylesheet" type="text/css">

(*注:“dajiashuo-pc/styles/reply.css”是公共样式,部分专题都已使用这个样式,除非所有的专题评论区都存在共性的问题,否则不得直接修改这个样式文件。只能在自己写的样式文件里写入新样式覆盖dajiashuo-pc的样式。)

第二步:引入评论区:

在index.php的评论部分添加如下代码:

<?php include_once("../recommend/piyao-ceqie.php");?>

第三步:修改帖子ID【重要】

【重要】不同专题的帖子ID是不一样的。同一个专题的手机端和PC端的帖子ID是同样的。

 

二、WAP端

1.添加手机端评论样式

WAP端只需添加一个样式文件。

<link rel="stylesheet" href=" http://m.ci123.com/special/dajiashuo_wap/styles/reply.css">

2.顶部

包括:PC端/WAP端的链接跳转,育网APP分享,代码如下:

<?php
include_once('../inc/global.php');
if(getOsNew()== 'pc'){
header('Location:http://www.ci123.com/special/survey-ceqie/');//链接为专题PC端的链接
exit;
}
$post_id = 10724610;//帖子ID,重要!每一期都要修改
$url = '专题手机端的访问链接';
$share_pic = '专题分享图片';
$msg = '专题分享文案';
$title = '专题标题';
?>
<!DOCTYPE html>
<html>
</html>

3.底部

包括:评论部分+制作团队+“妈妈社区APP推广”+底部版权

重点是评论以及“妈妈社区”,代码如下:

<div class="weibo">
<div class="say"><i></i><span>大家都在说</span></div>
<?php include_once('../inc/reply.php');?>
</div><!--weibo-->
<div class="part-team">
</div><!-制作团队-->
<?php
if($_COOKIE['uid']>0&&strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') === false){
?>
<?php } else {?
<a href="http://app.ci123.com/down/bbs.php?type=2" class="app_pro">
<img src="http://m.ci123.com/special/piyao-gudaiyunyu/images/download.png" width="100%">
</a>
<?php }?>
<div class="footer">
</div><!--版权所有-->

4.分享

简介:手机端另一个和往期专题不同变化是分享。

现在的分享采用两种方式,一种是在微信朋友圈推广,采用微信自带的分享方式。另一种是在妈妈社区APP或是育网APP上的分享按钮。

后端已对这两种方式进行了处理,只有在APP上才会显示分享按钮,微信上并不显示。

但是前端这两种方式都要顾及到,所以需要前端修改两个地方的分享文案

添加方式:

1.添加微信分享:

在index.php中添加如下代码:

<!--微信分享内容区域-->

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="http://m.ci123.com/special/weixin/wx_share.js"></script>
<script type="text/javascript">
$.getJSON('http://m.ci123.com/special/weixin/getAuth.php?PackageUrl='+encodeURIComponent(window.location.href),function(data){
callWeiXin(data);
wxShare('侧切会影响产后“性福”?','顺产侧切真的会影响产后性生活吗?《育网辟谣》告诉你真相!','http://m.ci123.com/special/piyao-ceqie','http://m.ci123.com/special/piyao-ceqie/images/share1.jpg');
});
</script>
<?php include_once('../inc/app_share.php');?>

<!--end 微信分享内容区域-->

 

CSS3 Transform 转换属性

整    理:徐秀、晋哲

时    间:2015-12-04

说    明:CSS3 Transform基本语法以及基础用法的介绍。

一、名词解释

transform字面上就是变形,改变的意思,包括2D transform和3D transform。在CSS3中transform主要包括以下几种:移动translate()、旋转rotate()、扭曲skew()、缩放scale()以及矩阵变形matrix(),对内联元素(inline)和块级元素(block)都适用。

二、浏览器兼容性
注意:transform是CSS3新属性,目前兼容浏览器【盗图】:image001

和其它CSS3新属性一样,transform要加兼容前缀。

三、transform-origin属性

transform-origin在元素发生transform变换时有效,是发生变换的基点,以此点建立【2d/3d】坐标。默认值为:transform-origin:50% 50% [0]; 第三个参数是3d转换下z的值,默认0。当改变transform-origin的值时,transform参照基点发生改变,如: transform-origin:0 0;image002

其中X和Y的值可以是百分值,em,px,其中X也可以是字符参数值left,center,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom。

四、语法讲解

描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

未经transform转换的div,以下各种变换均以此为参照:image003

  • transform:translate();

通过指定translation(tx,ty)进行矢量偏移,translation3d(tx,ty,tz);参数tx 是x轴方向的偏移矢量,ty 可选参数是y轴方向的偏移矢量。translation3d()中的各值,表示在对应方向的偏移量。tx,ty,tz的取值可以是具体的像素值,也可以是百分比,百分比的的取值相对于自身的宽高。translate(),表示对对象进行平移,当值为负数时,反方向移动物体。分别指定指定轴上的偏移量可以。通过transform-origin属性改变基点。

其它写法:translateX(x)【适用于2d/3d】,translateY(y) 【适用于2d/3d】;translateZ(z) 【适用于3d】,

代码:image004image005效果:image005

  • transform:rotate();

通过指定的角度参数对指定元素指定一个rotate(angle)进行2d旋转,rotate3d(rx,ry,rz,angle)进行3d旋转;rx,ry,rz可以取【1:正方向;-1:反方向;0不旋转】;在指定方向选择angle度; angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。可以通过transform-origin属性改变基点。

其它写法:rotateX(angle) 【适用于3d】;rotateY(angle) 【适用于3d】;rotateZ(angle) 【适用于3d】
代码:image007image008效果:image009

  • transform:scale();

通过指定scale(sx,sy)的sx、sy参数对指定元素进行2d缩放; scale3d(sx,sy,sz)进行3d缩放。2d缩放的第二个参数可选,未提供,则取与第一个参数一样的值;3d的三个参数都必写,表示在对应方向的缩放比例。可以通过transform-origin对元素的基点进行设置。

其它写法:scaleX(x)【适用于2d/3d】,scaleY(y) 【适用于2d/3d】;scaleZ(z) 【适用于3d】。

代码:image011image010 效果:image012

  • transform:skew();

通过指定skew(x-angle, y-angle)的x-angle、 y-angle参数对指定元素在指定方向上发生倾斜; skew()没有3d写法;x-angle是水平方向扭曲角度,y-angle可选,是垂直方向扭曲角度。如未设置y-angle,那么Y轴倾斜角度为0deg。

其它写法:skewX(x)【适用于2d】,skewY(y) 【适用于2d】。
代码:image013image014效果:
111

  • transform: matrix ();

matrix():2d矩阵包含6个值matrix(a,b,c,d,e,f);3d矩阵包含16个之matrix(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p)4*4个值,以上的各种变换(2d/3d),都可以矩阵计算得到相应效果,单计算过程很复杂,此处就不赘述了。有兴趣的小伙伴可以自行学习下。

后台产品上新和新闻稿更新

整    理:徐秀、肖雅君

时    间:2015-12-04

说    明:精工后台的操作及注意点,包括精工腕表产品和新闻稿模块的更新。

后台地址:

http://www.seiko.com.cn/M/Login.aspx?ReturnUrl=%2fm%2findex.aspx

精工的腕表产品和新闻稿更新都在后台进行操作。

1) 对应线上的网址:

产品展示:http://www.seiko.com.cn/collections/index.aspx页面下各类别腕表产品页。

2) 新闻资讯:http://www.seiko.com.cn/press_release/index.aspx下的新闻页。

页面入口可由官网页头导航条进入。image001

一、产品上新

  1. 图片制作

要求:一张大图(一般为:300 x 300,视情况而定),一张小图(一般为:42 x 75)。图片一律约束比例缩放,不得变形。以线上该系列下的最新(第一个) 产品图片为模板。【产品上新时,精工发的邮件会包含,一个包含所有新产品信息的excel表格和高清新产品图片,如果没有图片,记得跟他们要,因为excel表格上的图片处理完就糊了。】举个栗子:image002

1)精工发来新产品:

在官网”产品展示”---“premier”---“7D46・7D48・7D56机芯”点击弹出如下页面。image003

下载第一个产品的大图和小图为参考模板。图片的高度和宽度要与线上的一致,”new”的位置,以及图上下的留白区也要一致(可借助PS的参考线来确定图片内容位置;)

方法:

1)模板图片上下左右内容区做好参考线,删除图片内容,保留”new”,做成空白模板;

2)把新图片的上下空白区域裁剪掉,然后根据模板的内容区高度(一般为292px),ctrl+alt+i约束比例确定高度复制到模板区域,调整上下边距【一定要注意】,左右保证居中即可。

PS:找不到该系类咋办【情况非常少】?它是一个新系列,精工邮件会有说明,参考相邻系列的产品图片呗。但多了一项任务,还要制作这个系列的代表图片,尺寸参考相邻系列代表图片。如:image004

  1. 登录后台上新

1) 浏览器输入后台网址,输入用户和密码。image005

2) 确认是否线上已有该系列,没有要先添加“产品系列”。点击侧栏”产品系列管理”---“新增”。image006

根据excel表格中的内容填写下面各项,“保存”。ps:后台操作一保存,精工官网立马显示,一定要慎重检查再保存。检查点【系列款式是否正确,文字描述是否有错字】

3)线上已有该系列,跳过2),在侧栏选择“产品管理”---“新增”。弹出:image007

PS:从上到下依次填入所提到的点,写完之后,注意检查再保存。检查点:

  • 所属列表、款式、机芯系列是否正确。
  • 产品名称是否和文档一致。
  • 显示顺序的数字是否正确。
  • 图片是否正确,简介是否有错字。

产品的显示顺序应该根据产品名称递增排序。如下:image008

如果SNP126J1的“显示顺序”号为10,则SNP127J1顺序号:11,SNP128J1:12;SNP129J1:13。

二、新闻稿上新

  1. 登录后台

1) 侧栏点击“最新资讯管理”—“新增”image009
2) 根据精工发来的word文档的排版。进行如下操作,“保存“。
PS:各项填完之后,检查以下问题再保存。

  • 如果有遇到无法解决的排版问题,参考线上相似新闻稿;
  • 未确认排版前,日期最老,使新闻稿不容易被访问到;
  • 为防止代码错乱,建议在”代码模式”下写新闻稿;
  • 保存后,对比word文档,查看图片显示位置是否正确,是否有错别字,特殊符号(如英文人名中间的圆点等)是否与word一致。
  1. 修改首页入口链接

新闻稿确定保存后,要到精工服务器的首页相应位置添加新闻资讯的链接。【很简单,主要是复制粘贴改链接。】image010

1) 登录服务器---找到精工首页的”aspx”文件,备份两份,打开测试的aspx文件,ctrl+f查找【id=”whatsnew”】,复制一个完整的标题和链接部分,只有修改标注部分,链接、和标题,以及新闻发生月份。链接是导航条上“最新资讯“下,你刚更新的新闻稿的网址,格式参考往期。【再添加一个新链接,要删除最下面一个旧链接,不然会有溢出。】
2) 修改完之后在首页“最新咨询”,弹出框测试,测试链接是否正确。image011

php文件包含路径问题


编	写:袁	亮
时	间:2015-12-01
说	明:php文件包含路径问题

一、解决什么问题
	1、在某些项目代码中,会出现包含出错问题
	2、多次include的时候,会发现不知道包含的到底是哪个文件
	3、某些项目代码中,找不到对应include进来的文件

二、前置知识:3种路径
	1、绝对路径
		linux下,以/开头的路径
		window下以盘符开头的,比如c:/
	2、相对路径
		以.或者..开头的路径
	3、不确定路径
		非上述两种情况的都是

三、包含路径include_path
	1、这是一个目录列表
	2、在php查找文件的时候起作用,主要是以下这些函数
		include,require,fopen,file,readfile,file_get_contents
	3、查找文件的时候,会根据include_path中的目录列表一个个去找,找到之后中止返回
	4、功能类似系统中的环境变量
	5、可以通过php.ini或者php代码中进行设置(也可以通过php函数读取)
	6、默认值是. 代表当前工作目录(简单来说就是访问的第一个php文件所在的目录)

四、查找要包含哪个文件
	1、包含的是绝对路径的文件
		与include_path无关,直接引用绝对路径所对应的文件
	2、包含的是相对路径的文件
		跳过include_path,根据工作路径拼接上相对路径,查找文件,如果有则包含,没有则报错
		ps:工作路径即访问的第一个php文件所在的目录
	3、包含的是不确定路径的文件
		3.1 逐个使用include_path中的目录跟不确定路径拼接查找文件,找到则退出
		3.2 如果没有找到,则根据包含语句include所在的文件的目录,拼接上不确定路径查找文件
		3.3 如果还是没有,则报错

五、解决方案
	1、项目的一个公共文件,通过__FILE__,或者__DIR__(php 5.3后),结合dirname来计算获取项目根目录
	2、所有文件包含,均通过项目根目录进行拼接,得到绝对路径,再包含
	3、使用不确定路径包含文件
		3.1 使用不确定路径,包含当前目录或当前目录的子目录下的文件
		3.2 这种方法性能较差,因为必然是经过多次查找才能得到
		3.3 而且在项目工作目录出现同名文件,则会出现包含到错误文件的情况
		3.4 常见于sdk包,一般情况下少用

参考文档:
1、PHP中require和include路径问题详解
	http://www.cnblogs.com/rainman/p/4177302.html
2、PHP手册
	http://php.net/manual/zh/ini.core.php#ini.include-path
	http://php.net/manual/zh/function.set-include-path.php

关于include_path使用说明

整    理:朱 兵
时    间:2015-11-30
说    明:关于include_path使用说明
 一、在什么地方遇到?
    现象:在文件中遇到require_once("DB.php"),发现在当前目录下并没有该文件。
    原因:主要是用到了include_path,遇到此问题,在php配置中查找include_path的路径即可找到相应的文件。
    当用到函数include(),require()函数来寻找文件时候.在不设置include_path的情况下,这些函数打开文件时候默认的是以web根目录去寻找.当设置include_path以后,这些php函数就会先在指定的include_path目录下面去搜索寻找。我们可以在include_path目录下找到相应的文件。
 二、include_path的设置
1、第一种方法:
linux 下
修改php.ini文件中的include_path项。

include_path=".:/opt/ci123/php-5.3.27/share/pear"
windows下
include_path=".;c:\php\includes"
在 Windows 中,用分号分隔目录。在任何其它系统中用冒号分隔目录。

编写程序时可以用常量 PATH_SEPARATOR 代替

2、第二个方法:
使用ini_set方法。

ini_set('include_path', '/usr/lib/pear');

 三、运行时包含的顺序

1.如果为绝对路径,则直接包含, 并结束(找不到直接退出).

2.如果是是相对路径((形如./file, ../dir/file),则跳过include_path的作用逻辑, 直接解析相对路径(找不到直接退出)

3.都不是以上两种情况

会根据include_path,和当前执行文件的path组成一个待选的目录列表

注意点:
1、如果在指定的目录下找不到所要求包含的文件,而在当前页面目录下正好存在这个名称的文件时,则默认引入当前目录下的该文件。

2、当指定了多个目录为 include_path ,而所要求包含的文件在这几个目录都有相同名称的文件存在时,php选择使用设定 include_path 时排位居前的目录下的文件。

 四、php手册中的相关函数

   - set_include_path — 设置 include_path 配置选项
   - ini_set() - 为一个配置选项设置值
   - get_include_path() - 获取当前的 include_path 配置选项
   - restore_include_path() - 还原 include_path 配置选项的值
 五、扩展阅读

 

使用token来解决用户信息同步问题


编	写:袁	亮
时	间:2015-11-27
说	明:多应用系统用户信息统一安全升级策略

一、问题
	1、post请求之后,后退按钮导致加载失败,提示需要重新提交数据问题的解决
	2、用户信息被抓包,会导致账号泄漏问题
	
二、原因
	1、根据http协议,post请求非幂等,不能缓存,因此有响应头Pragma:no-cache
	2、后退的时候,浏览器会强制提醒用户,确认是否重新输入数据
	3、因此后退会出现白页

三、可能解决思路
	1、post请求换成get请求,绕过限制
		1.1 私密数据不安全,如果链接发给其他人,会导致账号被盗
		1.2 统计代码中,会把这些链接都给存储下来,太危险
	2、对get的数据进行可逆加密并加过期时间
		还是解决不了上面的两个问题
	3、先post发送私密数据过去,然后get跳转
	
四、完整思路
	1、私密数据,必须要走post,不能get
	2、先通过服务器间请求,将私密数据post过去
		2.1 在客户端对数据进行签名及有效期
		2.2 通过post将数据通过服务器与服务器传输
		2.3 服务端返回该数据存储的token(类似session存储)
			为防止服务器返回较慢,导致token丢失,token以客户端传过去的签名为准
		2.4 该数据,只存储一个小时,超过则失效
	3、get形式带上token去请求数据
		3.1 根据token,取到对应的数据
		3.2 用户之后的token要删除,不允许重复使用
		3.3 取出的数据需要验证是否有效期内,并验证签名是否正确
	4、解决了哪些问题
		4.1 没有通过get传输私密数据
		4.2 浏览器没有发起post请求,因此不存在后退刷新的问题
		4.3 私密数据通过服务器间的post请求,因此对用户抓包,并不能获取到这份私密数据
			抓更原始的包那就没办法,虽然不知道原始数据,但还是能登陆到用户账户上
	5、导致的问题及解决办法
		5.1 比之前多了一次http请求,会变的更慢
			在相应的服务器端加host,降低解析时间(同一机房,走内网)
			服务端只做数据存储到内存,不做额外操作降低运行时间
			客户端设置超时,防止卡住
		5.2 memcache存储的数据,存在一定几率丢失
			可以暂时不考虑,概率太低,而且最坏的影响也就是用户某一次可能登陆不上(只有新用户)
		5.3 token丢失或被抓包
			32位的加盐散列,基本可以不考虑被暴力强刷
			token即使丢失,问题也不大,因为token生成之后,用户基本上马上就使用,之后token就失效了
	

使用范例见附件:build_query

【SEIKO】精工VPN创建

整    理:徐秀、肖雅君

时    间:2015-11-27

说    明:创建连接精工服务器的VPN

 

创建连接精工服务器的VPN。以Win7为例,其他系统大同小异

  1. 创建seikoVPN连接。

打开“控制面板”--“网络和Internet”--“Internet选项”>“连接”菜单,弹出窗选择“添加VPN(P)”,如下图:seiko服务器端操作一110

在弹出框设置如下:seiko服务器端操作一123

“下一步”,输入用户名和密码。【已固定,因为有保密性,查看相关文档】seiko服务器端操作一160

现在,seiko的vpn已出现桌面任务栏的网络连接中,点击任务栏网络连接按钮seiko服务器端操作一202出现上图,右击”seiko”-> “属性” -> “网络” 更改相应配置。seiko服务器端操作一242

选择“TCP/IP4” -> “属性”seiko服务器端操作一264弹出框去掉“在远程网络上使用默认网关”选项。然后确定退回。seiko服务器端操作一296

2、像连接宽带一样连接VPN

3、远程登录内网的虚拟机192.168.1.152(此机器是win2003系统)

点击win的开始,选择运行【快捷键:win键+r】seiko服务器端操作一380

输入mstsc,启用远程登录seiko服务器端操作一399

如下图,输入内网的ip,192.168.1.152,点击显示选项seiko服务器端操作一438

点击”本地资源”下的”详细信息”弹出右侧对话框,勾选如下选项。【可以完成本机和服务器的信息的复制粘贴】,点击”确定”,回到上图界面,点击连接按钮。seiko服务器端操作一514

看到下图所示,输入 账号、密码seiko服务器端操作一532

【注意】: 每次登远程之前要先连seiko的vpn(和连接宽带方式相同)。

【SEIKO】精工PPT制作说明

整    理:徐秀、肖雅君

时    间:2015-11-27

说    明:精工每月PPT制作技巧和内容的总结

 

一、概述

二、详细介绍

1.表类网站分析PPT

2.精工网站数据分析PPT

3.半年度ppt

三、PPT制作的小技巧

 

一、概述

精工有三类PPT需制作,第一个是对精工自家流量的分析(每月)、第二份是对精工同类型手表的网站分析(每月),即所谓的“表类网站分析PPT”,第三份是半年度PPT。其中每月还需从51yes网站上导出精工“每月访问数据量excel”,用于制作PPT 。

三份PPT对应内容简介如下表

PPT标题 PPT内容 PPT制作时间 PPT数据准备
1.表类网站分析 主要是分析同类型腕表(例如劳力士、天梭、浪琴等手表)的数据,包括该类手表每个月的资讯更新情况、每个月的排名等 同类网站比较ppt制作时间为当月最后一天【做迟做早都可能造成数据不准确】建议每月月底前制作。 网站Alexa排名,登录(http://www.alexa.cn/)用百度搜索各类表名,看是否有品牌推广。进入官网,截取首页,并查看是否有咨询更新
2.精工每月数据分析 主要在51yes上获取精工网站的相关数据,如:PV访问量,独立IP访问量,流量来源与比例等。 精工数据分析ppt制作时间为下个月的月初【可获取上个月的完整数据,做早了会导致数据不完整】 登录51yes(http://countt.51yes.com/login.aspx)查询网站的各项数据。(侧栏的导航都有分类)。Excel图表制作,以及数据计算
3.半年度 主要是对半年的表类网站分析数据的总结比较 半年度ppt每半年做一次。精工会直接向我公司索要PPT。最好提前做好准备。

二、详细介绍

1.表类网站分析PPT

1.1 第一项:本月同类手表网站总体排名与更新excel截图

需制作者先在excel里统计数据后再截图。

该excel内容包括:

(1)资讯更新

(2)上月排名情况

(3)本月排名情况

排名登录:http://www.alexa.cn/ 获取(操作见1.1.1&1.1.2)

image001

1.1.1 新闻资讯更新获取

在各网站的官网中,如有新闻更新,写入;无则空白,各网站结构大同小异,小伙伴自行查找吧。ppt制作技巧【图片由excel截图】:

(1).图片圆角制作:image002

"裁剪"工具下拉选项---裁剪为形状

(2)投影制作:开始----形状效果---映像。

1.1.2 Alexa本月数据获取

各网站Alexa查询:http://www.alexa.cn/image003

同类比较网站首页地址:

劳力士http://www.rolex.com/zh-hans#/home?

欧米茄http://www.omegawatches.com/?

天梭http://www.tissot.ch/?

浪琴http://www.longines.cn/?

西铁城http://www.citizen.com.cn/??

英纳格http://www.enicar.com/?

梅花http://www.titoni.ch/zhs.html?

美度http://www.mido.ch/?

雷达http://www.rado.com/??

卡西欧http://www.casio.com.cn/wat/?

【上月Alexa数据直接由上月PPT中copy】

1.2 第二项:其它表类网站分析

分析内容包括:

(1)首页整理结构有无变化。

(2)有无资讯更新。

(3)是否在百度首页有推广。

如下图:image004

在百度搜索引擎中输入表类关键字,看该表是否在百度上做了品牌推广。比较上个月ppt,填写格式参照ppt。

1.3 根据查询结果写结论-END

  1. 精工网站数据分析PPT

Tip:精工流量数据均可在51yes上查询到,且可查到往期的数据

(1)统计区间制作方法image005

way1:情节提要------“编辑布局”【office2010】

way2:wps中幻灯片母版---编辑母版

(2)数据获取【以下各数据选取,均注意日期选择】,访问:http://countt.51yes.com/login.aspx

2.1 第一项:概况

此项主要简单说明下本月PV和IP较上月数值的变动情况,如下图:image006

2.2 第二项:综合评价

此项主要是通过具体的数值,详细的说明下本月PV和IP较上月的变动情况,如下图:image007

数值获取方式:

(1) 先查数据

登录51yes网站。image008

点进侧栏的“综合统计”。主页面右下方有上月访问量统计(蓝色为pv量,括号紫色为独立IP访问量):image009

(2) 计算上升/下降百分比

平均页面访问量=本月pv/本月独立ip;

pv上升%=|本月pv-上月pv|/本月pv*100%;[ip/页面访问同]

2.3 第三项:流量分析

此项主要统计以下几个内容:

(1)将本月和上月访问量最高的城市记录下来,包括其访问比率。同时对访问比的变化情况作总结。

(2)记录两个月的流量主要来源,并简要总结。

(3)记录哪些网站对精工网站流量产生影响。(此项一般不会变化,主要是一些主流的搜索引擎)image010

2.3.1 数据获取

点击”客户端分析”【获取访问量最高的前五城市】image011

2.3.2 搜索引擎流量分析

如上,在侧栏点击”来路统计(域名为单位)”,注意日期选取。在ppt记录前三四域名及所占比例。

2.4 第四项:页面总访问和独立ip访问数据获取

2.4.1 网站访问量统计

侧栏“数据下载”:image012 点击进入下载页,类型选择,”下一步”:image013

选择你想要输出的月份:image014

点击下载按钮即可。

2.4.2 制作柱形图

通过excel表格的柱形图制作成如下格式【根据下周的excel表格—插入柱形图制作,注意格式以及颜色选择】。同理制作独立IP访问量的柱形图。image015

2.5 第五项:单个页面的受访率

此项主要统计以下几个内容:

(1)受访页面的截图。

(2)在51yes上获取当月的数据,与前一年的数据形成比较。image016

根据获取到的页面访问率,从高到低排列,参考往月ppt 变化,注意更改。在51yes的侧栏点击:image017

(注意右侧日期选择)。

  1. 半年度ppt

对比分析以往半年度PPT,主要修改的是以下几点内容:

(1)半年的表类网站分析PPT总结版,截取制作当月各网站的首页图片【可以用firefox的FireCaptors截屏插件,截取一整个网站的图片。】并附上网站logo。

(2) 统计各比较网站的资讯更新,附上主图和链接。

(3) 统计网站半年的资讯更新情况,统计各网站的半年咨询更新数量,自行绘制“网站活跃度表格”。

三、PPT制作的小技巧

1.网站的截取可以由firefox的FireCaptors

2. 图片圆角制作:"裁剪"工具下拉选项---裁剪为形状

3. 投影制作:开始----形状效果---映像。

4. 统计区间制作方法:

way1:情节提要------“编辑布局”【office2010】

way2:wps中幻灯片母版---编辑母版

5. 数据计算:

平均页面访问量=本月pv/本月独立ip;

pv上升%=|本月pv-上月pv|/本月pv*100%;[ip/页面访问同]

Apidoc的安装及使用

整    理:曹燕

时    间:2015-11-27

说    明:Apidoc的安装及使用(官方文档:http://apidocjs.com/

 

1.安装

2.运行

3.apidoc.json配置文件

4.注释中必需的部分

5.继承

6.apidoc的注释规则

(1)@api——定义接口的请求方式、请求路径、标题

(2)@apiDefine——定义一个可重用的块

(3)@apiDescription——api方法的详细介绍

(4)@apiError——出错情况的描述

(5)@apiErrorExample——一个返回出错信息的示例

(6)@apiExample——使用一个接口的示例

(7)@apiGroup——对块进行分类,便于导航条分类

(8)@apiHeader

(9)@apiHeaderExample

(10)@apiIgnore——不被转换的块

(11)@apiName——接口的名称

(12)@apiParam——描述接口的参数

(13)@apiParamExample——接口参数的一个示例

(14)@apiPermission

(16)@apiSuccess——成功时的返回值

(17)@apiSuccessExample——一个成功的返回信息的示例

(18)@apiUse——调用一个已经定义好的块

(19)@apiVersion——一个块的版本信息

 

1.安装

npm install apidoc -g

2.运行

apidoc -i myapp/ -o apidoc/ -t mytemplate/

-i 输入文件的目录,即项目文件夹

-o 输出目录,即放置生成文档的位置

-t 使用的模板,会有默认的模板,当然也可以用自己定义的模板

示例: apidoc -i abc/ -o doc/   apidoc的使用1956

3.apidoc.json配置文件

放在你的工程项目的根目录下,是对项目的概要介绍,包括标题、简要介绍、版本等。

{

"name": "育儿网",

"version": "1.0.0",

"description": "育儿API文档",

"title": "API文档",

"template": {

"withCompare": true,

"withGenerator": true

}

}

其中name、version、description都会被显示出来。

4.注释中必需的部分

/**

* @api {get} /user/:id Request User information

* @apiName GetUser

* @apiGroup User

*/

  • 注释块必须用/** */包围
  • @api {get} /user/:id Request User information

注释块必须以@api开头,否则会忽视这个注释块

  • @apiName必须是一个独一无二的名字
  • @apiGroup的作用是给这个方法分组

5.继承apidoc的使用2448

@apiDefine定义了一个可重用的块,然后其他块调用这个块的时候就写:

@apiUse UserNotFoundError

在生成的文档中会自动填充成UserNotFoundError块的具体内容。

Apidoc中的继承只能继承一层,层数多了会影响可读性。

6.apidoc的注释规则

(1)@api——定义接口的请求方式、请求路径、标题

【开头必需,除非是@apiDefine开头】apidoc的使用2644

Method:必须,方法的请求方式,如get、post、put、delete...

Path:必须,请求路径

Title:可选,可选,用于导航和文章的子标题apidoc的使用2725

(2)@apiDefine——定义一个可重用的块apidoc的使用2753

Name:必须,独一无二的名字,之后引用这个块就是用这个名字

Title:可选,标题

Description:可选,详细介绍,另起一行写apidoc的使用2824

(3)@apiDescription——api方法的详细介绍apidoc的使用2858

Text:必须,api方法的文字介绍

(4)@apiError——出错情况的描述apidoc的使用2902

(Group):可选,有了group值之后该错误会被分组;默认归类为Error 4xx。

{Type}:可选,返回类型,如{Boolean},{Number},{String}等。

Field:必须,返回标识符,例如错误码。

Description:可选,对错误码的描述。apidoc的使用3041

(5)@apiErrorExample——一个返回出错信息的示例

会以预格式化代码输出到页面apidoc的使用3091

{type}:可选,返回信息的格式

Title:可选,这个出错信息的标题

Example:必须,具体的返回信息apidoc的使用3149

(6)@apiExample——使用一个接口的示例

会以预格式化代码输出到页面apidoc的使用3192

{type}:可选,代码的语言

Title:必须,这个例子的标题

Example:必须,使用接口的代码apidoc的使用3246

(7)@apiGroup——对块进行分类,便于导航条分类apidoc的使用3278

Name:必须,分类的名称apidoc的使用3294

(8)@apiHeader

暂略

(9)@apiHeaderExample

暂略

(10)@apiIgnore——不被转换的块apidoc的使用3361

将这句放在块的起始位置,这样进行转换的时候这个块就会被跳过,常常用于一个块还没有开发完毕的时候。

Hint:可选,描述为什么不转换这个块apidoc的使用3432

(11)@apiName——接口的名称apidoc的使用3455

Name:必须,接口的名称,必须是独一无二的名称(允许版本不同的同一名称)apidoc的使用3495

(12)@apiParam——描述接口的参数apidoc的使用3521

(group):可选,所有的参数会被分到这个类里,如果不设置,就分到Parameter。

{type}:可选,参数的类型,如{String}等。

{type{size}}:可选,参数取值的详细信息,如

{number{100-999}}——参数必须是个100-999的数字

{string{2..5}}——参数必须是2-5个字符的字符串

{type=allowedValues}:可选,关于变量允许取值的信息,如

{string="small","huge"}——参数必须是包含”small”或”huge”的字符串

Field:必须,变量名,表示该参数对于接口是必须的

[field]:必须,变量名,表示该参数对于接口不是必须的

=defaultValue:可选,参数的默认取值

Description:可选,参数的描述apidoc的使用3884

(13)@apiParamExample——接口参数的一个示例apidoc的使用3919

{type}:可选,请求信息的格式

Title:可选,示例的标题

Example:必须,请求的具体信息apidoc的使用3973

(14)@apiPermission

暂略

(15)@apiSampleRequest——模拟请求时的urlapidoc的使用4031

(16)@apiSuccess——成功时的返回值apidoc的使用4602

(group):可选,所有的参数会被分到这个类里,如果不设置,就分到Success 200。

{type}:可选,参数的类型,如{String}等。

Field:必须,返回标识符。

Description:可选,成功码的描述。apidoc的使用4723

(17)@apiSuccessExample——一个成功的返回信息的示例apidoc的使用4763

{type}:可选,返回信息的格式

Title:可选,示例的标题

Example:必须,返回的具体信息apidoc的使用4817

(18)@apiUse——调用一个已经定义好的块

已经定义的块是指用@apiDefine定义的块apidoc的使用4869

Name:必须,@apiDefine定义的块的名称apidoc的使用4897

(19)@apiVersion——一个块的版本信息

Group和name值都相同的块,可以进行不同版本的对比。可用于在生成的文档中和之前的版本进行比较,增加和修改的会用绿色标出、删除的会用红色标出。apidoc的使用5000

Version:必须,版本号apidoc的使用5017