WampServer设置快捷方式

在windows平台我们通常使用wampserver作为我们的amp集成开发环境,为了方便wamp提供了任务栏快捷方式,但是随着我们队wamp配置的修改这些快捷方式会失去作用。例如,修改端口号后,原有的localhost将不能访问;例如,我们通常使用的httpd-vhosts.conf文件是否可以添加到快捷方式呢?
当然是可以的,你可以通过修改wamp根目录的“wampmanager.tpl”文件,例如:我们添加httpd-vhosts.conf到快捷方式

[apacheMenu]
;WAMPAPACHEMENUSTART
Type: submenu; Caption: "Version"; SubMenu: apacheVersion; Glyph: 3
Type: submenu; Caption: "Service"; SubMenu: apacheService; Glyph: 3
Type: submenu; Caption: "${w_apacheModules}"; SubMenu: apache_mod; Glyph: 3
Type: submenu; Caption: "${w_aliasDirectories}"; SubMenu: alias_dir; Glyph: 3
Type: item; Caption: "httpd.conf"; Glyph: 6; Action: run; FileName: "notepad.exe"; parameters:"${c_apacheConfFile}"
;添加的快捷方式
Type: item; Caption: "httpd-vhosts.conf"; Glyph: 6; Action: run; FileName: "notepad.exe"; parameters:"d:/wamp/bin/apache/apache2.2.21/conf/extra/httpd-vhosts.conf"

泰来妇女网上线

泰来妇女网

网址:www.tlfnw.com

设计:@小松
前端:@柯军
应用:@博业 @智凯

扁平化设计的中文字体选择

扁平化设计源于英语语种,在英文文字上有很好的表现,换成中文文字时其美感很难把握。对于扁平化设计其字体表现出一定的柔圆的感觉,标题大字纤细,形似钢丝;小字柔滑,微软雅黑即可。但是雅黑字体当字号变大是显得很粗,失去了纤细的感觉,这里给大家推荐一个字体“昆仑细圆”。但是昆仑细圆是一种小众字体,不是系统自带,因此只能制作成图片使用。还可以选择悦黑纤细体字体创艺简细圆。如果我们需要系统自带的字体的话,“幼圆”是一个较为折中的代替。
下图为“幼圆”和“昆仑细圆”的比较图
扁平化设计中文字体

配置Centos服务器

1. 安装centos
安装时注意分区留下一个/data区给网站内容存储。
2. 配置网络连接
默认centos网络连接不是开机启动的,需要配置。
vi /etc/sysconfig/network-scripts/ifcfg-eth0
配置对应网卡信息,eth0为你的网卡名称
具体配置参数可参考 network-scripts/ifcfg-配置详解

DEVICE=name,这里name是物理设备的名字(动态分配的PPP设备应当除外,它的名字是“逻辑名”。
IPADDR=addr, 这里addr是IP地址。
NETMASK=mask, 这里mask是网络掩码。
NETWORK=addr, 这里addr是网络地址。
BROADCAST=addr, 这里addr是广播地址。
GATEWAY=addr, 这里addr是网关地址。
ONBOOT=answer, 这里answer取下列值之一:
   yes-- 该设备将在boot时被激活。
   no -- 该设备不在boot时激活。
USERCTL=answer, 这里answer取下列值之一:
   yes--非root用户可以控制该设备。
   no -- 非root用户不允许控制该设备。
BOOTPROTO=proto, 这里proto取下列值之一:
   none-- 不使用boot时协议。
   bootp-- 使用bootp协议。
   dhcp --使用dhcp协议。
   static -- 静态ip

网卡信息配置正确后,重启网卡
service network restart

设置DNS
vi /etc/resolv.conf
添加(可以换行添加多条)
nameserver 202.118.224.100
nameserver 202.118.224.101
3 远程登陆centos
ssh root@your-ip

4 安装相关包(apache mysql php ftp)
(1)先创建一个普通用户
adduser username
passwd username
给用户添加sudo权限
vi /etc/sudoers
在 root ALL=(ALL) ALL 下面添加一句
username ALL=(ALL) ALL
username为你的用户名

(2)切换到此用户执行安装
sudo yum -y install httpd php mysql mysql-server php-mysql httpd-manual mod_ssl mod_perl mod_auth_mysql php-mcrypt php-gd php-xml php-mbstring php-ldap php-pear php-xmlrpc mysql-connector-odbc mysql-devel libdbi-dbd-mysql vsftpd

5 启动各服务器
启动apache
service httpd start
启动mysql
service mysqld start
启动vsftpd
service vsftpd start
设置开机自动启动服务
chkconfig httpd on [设置apahce服务器httpd服务开机启动]
chkconfig mysqld on [设置mysql服务开机启动]
chkconfig vsftpd on [设置ftp服务开机启动]

6 配置防火墙打开服务端口
vi /etc/sysconfig/iptables
内容如下

# Firewall configuration written by system-config-firewall
# Manual customization of this file is not recommended.
*filter
:INPUT ACCEPT [0:0]
:FORWARD ACCEPT [0:0]
:OUTPUT ACCEPT [0:0]
-A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
-A INPUT -p icmp -j ACCEPT
-A INPUT -i lo -j ACCEPT
-A INPUT -m state --state NEW -m tcp -p tcp --dport 22 -j ACCEPT
-A INPUT -j REJECT --reject-with icmp-host-prohibited
-A FORWARD -j REJECT --reject-with icmp-host-prohibited
COMMIT

添加规则打开apache和ftp端口
-A INPUT -m state –state NEW -m tcp -p tcp –dport 80 -j ACCEPT
-A INPUT -m state –state NEW -m tcp -p tcp –dport 20:21 -j ACCEPT
添加完后保存文件,执行
service iptables restart
测试访问网站是否连通。

7 配置ftp
(1)可以为ftp创建一个用户,用户名为jingle
useradd -s /sbin/nologin -d /opt/jingle -g ftp jingle
passwd jingle
输入密码
chmod 777 /opt/jingle -R [修改此目录权限为777]
(2)如果你不想给ftp单独创建用户,你也可以用系统用户登陆
(3)打开vsftp被动服务
vi /etc/vsftpd/vsftpd.conf
添加以下内容
# Passive support
pasv_enable=YES
pasv_min_port=65400
pasv_max_port=65450
需要配置iptables,vi /etc/sysconfig/iptables
添加规则打开apache和ftp端口
-A INPUT -m state –state NEW -m tcp -p tcp –dport 80 -j ACCEPT
然后,重启iptables,service iptables restart

由于selinux的原因,可能出现下面原因:
1 本地用户无法登陆ftp,出现 “500 OOPS: cannot change directory:/home/jingle” 错误
2 ftp通常只能浏览下载,不能上传修改,因此需要设置selinux
setenforce 0
8 配置apache
(1) 修改服务器根目录
vi /etc/httpd/conf/httpd.conf
(2)打开虚拟主机

9 配置mysql
mysqladmin -u root password “yourpassword” [引号内为你的密码]

登录mysql数据库配置
mysql -u root -p
输入密码
DROP DATABASE test; [删除test数据库]
DELETE FROM mysql.user WHERE user=””; [删除匿名用户]
FLUSH PRIVILEGES; [重载权限]

添加mysql用户并赋予权限
insert into mysql.user(Host,User,Password) values(‘localhost’,’phplamp’,password(‘1234’));
flush privileges;
create database phplampDB
grant all privileges on phplampDB.* to phplamp@localhost identified by ‘1234’;
flush privileges;

设置mysql默认字符集编码为utf8
[client]
default-character-set=utf8
[mysqld]
default-character-set=utf8
init_connect=’SET NAMES utf8′

不用Https如何实现数据传输安全

Web请求的数据都是明文传输的,黑客通过截获数据得到用户的个人数据。为了数据安全一些安全性要求较高的网站采用Https协议,例如支付宝。但是,Https价格是比较昂贵的。我们是否有一些辅助方案来解决一些关键数据的安全问题。下面的架构提出了一个解决思路。

网络安全结构

利用AES对称加密算法加密传输的数据,服务器端利用密钥解密数据。

因为AES是对称加密算法,因此有密钥就可以解密密文。因此密钥不能始终使用同一个,应时刻变化,否则知道密钥轻松解密密文。如果密钥采用随机生成,服务器端就必须得到客户端的密钥,因此借助RSA非对称加密算法用公钥将AES随机密钥传输给服务器端,服务器利用私钥解密得到AES密钥明文,利用AES密钥明文解密数据。

为什么不直接用RSA算法加密数据,服务器用RSA解密?
因为RSA算法对于明文字节长度限制为117字节,解密密文长度128字节,对于web较大数据传输不能胜任。但是对于小数据,例如密码、用户ID等数据是可以的。

这样的思路需要我们具有两方面的工具:JS AES、RSA库和服务器端AES、RSA库。这两方面工具都有智者分享了。

JS地图库开源项目OpenLayers

现在越来越多Lbs应用,很多web服务都在整合地理位置信息,我们需要将一些信息显示到地图上,给予用户更直观的信息感受。OpenLayers为你提供了一个方便的js框架,它可以整合各种标准地图Google Map, Baidu Map, QQ Map等等,甚至可以是自己做的图片。

可视化中的两色渐变颜色映射

colorGradient
在做可视化项目的时候,我们经常会用颜色表示信息,例如:红白之间,越红表示越热门,越白表示越冷清。
本文主要解决这个问题:

假设我们有一个数值数组,要用红白之间的颜色表示各数。

算法:

color = (value – minValue) / (maxValue – minValue) * (endColor – startColor) + startColor
value:数组中一个元素
color:value的映射颜色值
minValue:数组中最小的值
maxValue:数组中最大的值
startColor:起点颜色
endColor:终点颜色

但是,颜色色值是用RGB三色十六进制数表示,比如红色0xff0000,白色0xffffff。不能直接在0xff0000与0xffffff之间映射。必须r,g,b三种颜色分别映射。即,先拆开r,g,b三色,分别对三色进行映射,再组合。
对应的函数为:

public static function caculateColor(value:Number,startColor:uint,endColor:uint,startValue:Number,endValue:Number):uint
{
	var rs:uint = startColor >> 16 & 0xff;
	var gs:uint = startColor >> 8 & 0xff;
	var bs:uint = startColor & 0xff;
	var re:uint = endColor >> 16 & 0xff;
	var ge:uint = endColor >> 8 & 0xff;
	var be:uint = endColor & 0xff;
 
	var rx:uint = ColorUtil.mappingColor(value,rs,re,startValue,endValue);
	var gx:uint = ColorUtil.mappingColor(value,gs,ge,startValue,endValue);
	var bx:uint = ColorUtil.mappingColor(value,bs,be,startValue,endValue);
 
	return rx << 16 | gx << 8 | bx;
}
 
private static function mappingColor(value:Number,startColor:uint,endColor:uint,startValue:Number,endValue:Number):uint
{
	return (value - startValue) / (endValue - startValue) * (endColor - startColor) + startColor;
}

求出数组中的最大值和最小值就不讨论了。

Flash中国地图开源项目flash-china-map

Flash 中国地图
Flash中国地图,以Object为数据源,便于实现基于中国地图的可视化项目。

特征:

  • swc,便于导入到Flex项目中
  • 数据源为Object,比静态XML更方便
  • 数据驱动的地图块颜色和Hover颜色
  • 可配置是否显示省份名

Code License: Apache 2.0
Author: ComingX Jingle
Download: Git Repo
Demo Show:

使用方法:

  • 创建Flex项目,拷贝ChinaMap.swc至项目libs目录下
  • map = new Map()

Flex导入地图

<?xml version="1.0" encoding="utf-8"?>
<!--
* ComingX.com Business License
* 
* Copyright 2013. All rights reserved.
*
* @Author: Jingle
* @Email: jingdongemail@gmail.com
* @Created date: 2013-6-27
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   creationComplete="application1_creationCompleteHandler(event)"
			   >
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import com.comingx.jingle.chinamap.MapBase;
			import com.comingx.jingle.chinamap.ProvinceItem;
			import com.comingx.jingle.chinamap.domains.InitData;
			import com.comingx.jingle.chinamap.utils.ColorUtil;
 
			import flash.display.Sprite;
 
			import mx.controls.Alert;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			private var map:MapBase;
 
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				map = new Map();
 
				map.addEventListener(MouseEvent.CLICK, provinceClicked);
 
				var ui:UIComponent = new UIComponent();
				ui.addChild(map);
				test.addElement(ui);
				var initData:InitData = new InitData();
				initData.isShowProvinceName = false;
				initData.provinceDataArray = [
					{"id":11,"name":"beijing","color":0xff4400,"hoverColor":0xff0000},
					{"id":12,"name":"tianjin","color":0xccffcc,"hoverColor":0xff0000},
					{"id":13,"name":"hebei","color":0xbbffbb,"hoverColor":0xffff00},
					{"id":14,"name":"shanxi","color":0xffee00,"hoverColor":0xff2200},
					{"id":15,"name":"neimenggu","color":0xaaffaa,"hoverColor":0xff2200},
					{"id":21,"name":"liaoning","color":0xddffdd,"hoverColor":0xff2200},
					{"id":22,"name":"jilin","color":0xddffdd,"hoverColor":0xff2200},
					{"id":23,"name":"heilongjiang","color":0xddffdd,"hoverColor":0xff2200},
					{"id":31,"name":"shanghai","color":0xddffdd,"hoverColor":0xff2200},
					{"id":32,"name":"jiangsu","color":0xddffdd,"hoverColor":0xff2200},
					{"id":33,"name":"zhejiang","color":0xddffdd,"hoverColor":0xff2200},
					{"id":34,"name":"anhui","color":0xddffdd,"hoverColor":0xff2200},
					{"id":35,"name":"fujian","color":0xddffdd,"hoverColor":0xff2200},
					{"id":36,"name":"jiangxi","color":0xddffdd,"hoverColor":0xff2200},
					{"id":37,"name":"shandong","color":0xddffdd,"hoverColor":0xff2200},
					{"id":41,"name":"henan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":42,"name":"hubei","color":0xddddff,"hoverColor":0xff2200},
					{"id":43,"name":"hunan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":44,"name":"guangdong","color":0xddffdd,"hoverColor":0xff2200},
					{"id":45,"name":"guangxi","color":0xddeeff,"hoverColor":0xff2200},
					{"id":46,"name":"hainan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":50,"name":"chongqing","color":0xddffdd,"hoverColor":0xff2200},
					{"id":51,"name":"sichuan","color":0xffffdd,"hoverColor":0xff2200},
					{"id":52,"name":"guizhou","color":0xddffdd,"hoverColor":0xff2200},
					{"id":53,"name":"yunnan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":54,"name":"xizang","color":0xddeffe,"hoverColor":0xff2200},
					{"id":61,"name":"shannxi","color":0xddffdd,"hoverColor":0xff2200},
					{"id":62,"name":"gansu","color":0xddffdd,"hoverColor":0xff2200},
					{"id":63,"name":"qinghai","color":0xddffdd,"hoverColor":0xff2200},
					{"id":64,"name":"ningxia","color":0xddffdd,"hoverColor":0xff2200},
					{"id":65,"name":"xinjiang","color":0xddffdd,"hoverColor":0xff2200},
					{"id":71,"name":"taiwan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":81,"name":"xianggang","color":0xddffdd,"hoverColor":0xff2200},
					{"id":82,"name":"aomen","color":0xddffdd,"hoverColor":0xff2200}
				];
				map.init(initData);
 
				for(var i:int = 0; i<9; i++)
				{
					var ui2:UIComponent = new UIComponent();
					ui2.addChild(drawRect(ColorUtil.caculateColor(i*2,0xffffff,0xff0000,0,16)));
					ui2.x = i*20;
					ui2.y = 400;
					this.addElement(ui2);
				}
			}
 
			protected function provinceClicked(evt:MouseEvent):void
			{
				var provinceItem:ProvinceItem = evt.target as ProvinceItem;
				var provinceId:int = provinceItem.province.id;
				var provinceName:String = provinceItem.province.name;
				Alert.show("Province id is " + provinceId +"; Province name is " + provinceName +";");
			}
 
			public function drawRect(color:uint):Shape{
				var shape:Shape = new Shape();
				shape.graphics.beginFill(color);
				shape.graphics.drawRect(0,0,20,20);
				shape.graphics.endFill();
				return shape;
			}
 
		]]>
	</fx:Script>
	<s:Group id="test">
 
	</s:Group>
</s:Application>

Demo下载

社会媒体图标矢量图

微博icons
微信、微博、朋友圈、豆瓣、人人网等社会媒体图片矢量图,需要矢量图的请留下邮箱

光电所UOI网站改版上线

哈尔滨工业大学超精密光电仪器工程研究所

哈尔滨工业大学超精密光电仪器工程研究所原版网站是2005年由我们设计,当时由于Flash技术比较时髦,因此多处使用flash,视觉效果还是不错的。考虑到显示器尺寸的不同,利用flash技术实现的自适应。

uoisiteold

如今,Flash在网站中的应用日趋减少,因此这次改版目的是建设一个快捷易用的网站。改版主要关注:

  • 快捷
  • 易用
  • 方便多语言

新版取消了Flash的使用,并使用全新的后台程序CXCMS,信息发布更加方便。