作者归档:Shelwee

给计算机专业新生的五点建议

时光荏苒,转眼我都已经毕业五年了。如果从现在的认知角度来分析自己在大学的四年,会觉得自己当时很蠢,没有充分利用在学校近四年的黄金时间。

现在恰好临近入学季,所以你如果打算毕业后从事与互联网技术相关的行业,那么我建议你详细看看我对大学四年的「复盘」。

1.尽早确定目标

如果能回到大一,我一定会先让自己想好毕业后要做什么工作。

尽早确定毕业后要从事的行业,这很重要,只有确定了一个大目标,你才能保持在这个车道上不偏移。如果你对自己的专业没有兴趣,那么请一定要尽快转专业,千万别浪费了四年的时间。

很可惜的是我到大二才逐渐想明白自己毕业后想做什么,但同时也很庆幸当时自己选择了计算机这个专业,因为我对编程是感兴趣的。所谓兴趣是最好的老师,只有感兴趣,你才能学进去。而对于工作来说,只有感兴趣,你才能保持热情。

其次计算机专业就业方面也是很灵活的,可以硬件,可以软件,可以网络,可以运营,甚至只要你有兴趣,非计算机专业也无妨,你总能在互联网行业找到一席之地。所以只要你定下了目标,就可以朝着这个目标不断地修正方向。

2.学好基础课程

虽然大学学的课程在毕业后很少用到,但我还是建议你一定要学好。比如现在大火的人工智能,如果你在大学没有学好线性代数,概率论,高等数学等课程的话,现在入门门槛就比较高,首先就得恶补数学基础。

乔布斯在大学时代偶然间上了书法课,学到了衬线和无衬线两种字体,以及如何改变字母间的间距使其好看。在当时,乔布斯自己也认为学的这些东西,在将来的人生中也许并没有什么实际用途。然而,过了十年他就将学到的字体引入到了 Macintosh 中。如果没有当时的偶然,也许也就没有后来在计算机中看到的字体。

其他一切知识也是同样的道理,也许短期内感觉没有用处,但长期来看,总有一个「奇点」会把这些知识都串联起来。

3.精通一门语言

如果能回到大一,我一定会让自己精通一门语言,不出意外我应该会选择 Java。

因为 Java 是一门不错的语言,也因为从 09 年开始,Android 市场进入指数级增长。Android 开发对于当时来说,是极其稀缺的。当然,这只是针对 09 年来说的,现在已经不适用了,毕竟已经过了这么多年。

现在你也应该精通一门语言,但不是非得 Java 不可。只要你精通了一门语言之后,你在学习新的语言时,虽然做不到无缝衔接,但至少会让你游刃有余,学起来更快。从现在的技术发展情况来看,未来 AI 应该更热门,可以考虑 C++ 、Python。

程序员圈子经常流传着各种鄙视链,当然包括语言的鄙视链。这个我觉得当笑话看看就好了,不必在意,每一门语言都有大神级的人物存在。只要能完成需求,它就是一门好的语言。

4.善用搜索引擎

学习过程中,肯定会遇到许多问题。但通常你遇到的问题,90% 以上都能通过搜索找到答案。这时候应该先通过搜索去寻找解决方案,只有搜索不到相关的解决方案时,再考虑咨询比你厉害的大牛。 尽量避免自己不先去搜索找答案,就直接丢个问题去问大牛怎么解决。因为很多大牛都很反感这种情况,这么简单的问题自己都懒得去搜索。

所以务必要多搜索,会搜索。

这里介绍三个常用的搜索技巧:

1.从指定网站搜索关键词

如从 stackoverflow 网站搜索关于jvm相关的问题,输入 「site:stackoverflow.com jvm」 即可。

2.搜索指定文件类型

假如你要搜索一本《三体》的 PDF 类型的书籍,则搜索 「filetype:pdf 三体」。

3.从指定位置搜索

  • intitle: 从网页标题中搜索。例如:「intitle: jvm」
  • intext: 从网页正文中搜索。例如:「intext: jvm」
  • inurl: 从网页链接中搜索。例如:「inurl: jvm」

5.Side Project

动手实践是检验你是否真正掌握一门技术的唯一途径,理论再好,等你真正开始动手实践的时候就会发现还有很多意料之外的问题。

所以我极力推荐你在学习的同时,动手创造一个属于你自己的 Side Project。由项目驱动学习,你不仅能将学习的知识转化成作品,毕业时,你的 Side Project 更可以成为你求职的敲门砖。

比如你喜欢写博客,那么你可以开发一个 CMS,在自己开发的系统里写,你就会自然而然地不断优化这个项目,最终变成一个不错的 Side Project。当然最好的 Side Project 还是你自己想做的,并且能实际解决一些问题。重复造轮子也不是不行,轮子造的多了,你就会产生自己的想法了。


互联网技术的发展总是日新月异,不断推陈出新,所以每个准备从事技术岗的人都应当对新技术保持一定的敏感,不断提升自己。

时间对每个人都是公平的,在当下无法做出最好的选择时,就只能将来投入双倍的时间来弥补。

一万年太久,只争朝夕。

THE END

「深入人心」的 Keep 跑步机

Keep 在 3 月 19 日发布了旗下第一款智能跑步机,作为一个快两年的 Keep 用户,又碰巧在这个时间需要这么一款产品,于是我就顺理成章地在发布当天成为了首批用户。

1.Keep 跑步机的亮点

简单说说这款跑步机吸引我的地方:

  1. 外观相对简洁。外观能给人最直观的感受,Keep 跑步机的外观对比市场上的绝大多数竞品来说,给我留下了深刻的印象。
  2. 占用空间小。这点对于小空间来说至关重要,Keep 跑步机可以说做到极简了。
  3. 可玩性高。Keep 跑步机可单独连接 WIFI,并与手机 APP 联合使用。包括:虚拟路线、跟随课程自动变速以及数据统计。

虚拟路线图

然而用到现在已经快三个月了,Keep 跑步机的槽点也是深入人心。

2.Keep 跑步机的

槽点一:
品控是否做到位?第二次开跑的时候,跑步机的马达就出现了异常噪音。

槽点二:
售后维修不专业。与客服联系后,安排了第三方的维修人员。据说 Keep 有对维修人员统一培训过,但还是出现了一些看起来很不专业的情况。比如内部固定电线的固定点,维修人员都直接剪掉,最后又用 502 将其固定,而这个操作本身是可以避免的。

槽点三:
拆卸与螺丝问题。固定跑步机马达的螺丝尺寸有点尴尬,Keep 官方寄来的螺丝刀加上维修人员自带的工具都无可奈何,最后用刀片配合前后持续了一周左右才成功换上新马达。

槽点四:
贴纸问题。由于换内部零件需要将底部的几颗螺丝拆掉,而螺丝藏在贴纸里面,这就导致了最后还原的时候,贴纸贴不上了,已经没有粘性了。

槽点五:
噪音与晃动。跑步过程中,跑步机会轻微晃动,并且声音在也有点大。

吐槽使人进步,虽然槽点满满,但是最后大部分问题都通过售后得到了解决。Keep 跑步机至少目前还是最接近我心目中一款出色跑步机的标准。

3.跑步机的未来

后期产品迭代升级如果能够加入坡度控制,再配合虚拟路径,让用户身临其境的在任何地方跑步,这样的体验更能吸引到我。

这里做个大胆的预测,未来单一功能的跑步机将会消失,最终会被 VR + 跑步机 结合的方式取代。这种集娱乐健身于一体的跑步机才能更容易被大众所接受,这样的方式是不是更符合 Keep Slogon 所说的 「自律给我自由」 。

THE END

2018 GDS 之旅

上周有幸得到了由阿里云赠送的 GDS 2018 峰会门票,这么难得的机会必然不能错过。

GDS(Global Digital Summit)2018全球数字峰会,围绕互联网数字领域及行业热点展开,通过大会分享、论坛对话、项目路演等会议模块,打造数字领域互联互通、共享共治、共创共赢的国际化分享、社交平台。

GDS 主会场

早上是主会场,根据众多大佬分享提炼成以下几点:

  1. 数字经济增长的比例越来越大,将在2030年达到全国GDP的50%;
  2. 互联网时代域名对企业来说很重要,而移动互联网时代域名仍然重要,并不会过时;
  3. 百度未来流量将会向熊掌号倾斜,今年这个比例将达到50%,到了2020年这个比例将会上升到80%,所以未来将不在需要SEO;
  4. 区块链已经上升至国家战略,将在未来20-30年深入到各行各业;
  5. 短视频的火热带动了大多数新媒体从图文音频到短视频的升级尝试。

区块链、新媒体与域名

下午则分为三个分会场同时进行,分别为区块链峰会、新媒体峰会以及域名峰会。

比较戏剧性的是参会人数很好地展现了当前三个行业各自的发展趋势。

区块链刚开始人数众多,而随着会议的进行人数陆续减少。正如区块链目前的火热,以及各种美好的应用场景。然而目前区块链技术存在着一些问题,限制了它的发展,比如吞吐量。一旦解决了这个问题,应用场景可能将呈爆发式增长。

新媒体会场一开始就呈现出火热的人气,现场座无虚席,甚至后排还站满了人。新媒体近几年的发展态势呈指数增长,微信公众号、头条号、百家号、熊掌号以及各种短视频类应用衍生出的自媒体,长期吸引及占用着用户的注意力。

域名峰会则是一片「荒凉」,现场为数不多的铁杆观众,代表着域名这个已经成熟透了的市场被少部分的人掌握着。大多数优质的域名早已被少部分人所抢占,后来者只能是花重金买入。

很遗憾下午由于时间关系没有听完后面的分享,但同时也很幸运的参加了这次峰会,学习了业内大佬们对于各自所在行业发展的看法,这就够了吧,不虚此行。

THE END

Processing 导出视频的两种方式

 1.前言

Processing 作为一款创意编程工具,不仅可以很方便的用来控制视频,比如用来 控制播放透明通道的视频,也可以用它来编写一些酷炫的效果,然后通过程序生成视频。

Processing 生成视频或者说录制视频,目前主要有两种方式,下面谈谈两种方式的使用方法及区别。

2.视频导出方式

a.使用 Movie Maker 导出

Movie Maker 是 Processing IDE 自带的一个视频合成工具,可以根据需要设置序列帧图片以及音频,然后生成视频。

优点

  • 有操作界面、使用简单,是一个独立的工具软件。

缺点

  • 没有提供相关接口,不能在 Processing 程序中集成开发。

使用步骤

需要提供序列帧图片。在 Processing 中用自带导出图片的 API 生成序列帧图片:

saveFrame(); //保存序列帧图片

有了序列帧图片就可以打开 Processing -> 工具 -> Movie Maker,然后根据文字介绍操作。

b.使用 VideoExport 导出

VideoExport 是 Processing 的一个第三方库,下载后放入相应位置即可使用。

优点

  • 可以方便的在程序中集成开发,可以根据需求灵活的控制导出时机和时长。

缺点

  • 依赖 ffmpeg,所以使用前需要先安装。

步骤

import com.hamoid.*;

VideoExport videoExport;

// demo,录制会自动结束

float movieFPS = 30;
float soundDuration = 10.03; // in seconds

void setup() {
    size(600, 600);

    videoExport = new VideoExport(this);
    videoExport.setFrameRate(movieFPS);
    videoExport.setAudioFileName("test-sound.mp3");
    videoExport.startMovie();
}

void draw() {
    background(#888888);
    rect(frameCount * frameCount % width, 0, 40, height);
    videoExport.saveFrame();
    if(frameCount > round(movieFPS * soundDuration)) {
        videoExport.endMovie();
        exit();
    }
}

3.小结

工具/库 优点 缺点
Movie Maker 有操作界面、使用简单,是一个独立的工具软件。 没有提供相关接口,不能在 Processing 程序中集成开发。
VideoExport 可以方便的在程序中集成开发,可以根据需求灵活的控制导出时机和时长。 使用前需要先安装 [ffmpeg](http://ffmpeg.org/)。

通过表格比较可以很清楚的得知两种方式的使用场景并不一样,并不能互相取代,而是一种互补的关系。因此具体选择哪一个使用,完全可以根据业务需求来定。

THE END

如何用 Java + OpenCV 实现自动玩跳一跳?

前言

自从微信更新到 6.6.1 版本之后,微信小游戏也随之发布。跳一跳成了第一批小游戏的代表作,到处刷屏。而在程序员的朋友圈里,则是各种刷分,各种版本的算法实现自动玩刷分。

秉着学习 OpenCV 的心态,我也用 Java + OpenCV 实现了一个版本。

目标分解

跳一跳这个小游戏规则很简单,就是根据触摸屏幕的时间长短决定跳跃的距离。
所以整个程序可以分解为以下 6 步,循环执行:

  1. 获取跳一跳游戏画面
  2. 找到起点,即跳一跳中的紫色小人
  3. 找到终点,即小人要跳跃的下一个目标的中点
  4. 根据欧式距离公式计算起点与终点的距离
  5. 根据得出的距离计算触摸时间
  6. 用 adb 工具模拟触摸屏幕

准备工作

1.熟悉 ADB 命令

adb shell screencap -p xxx //截屏
adb pull xxx //从设备复制资源到电脑上
adb shell input swipe x1 y1 x2 y2 time //模拟从(x1,y1)滑动到(x2,y2),滑动时间为time(ms)

2.开发环境

本文基于 Java 1.8.0 与 OpenCV 3.4.0 开发。

3.欧式距离公式

编程实现

1.找起点

//载入跳一跳小人图片
Mat template = Imgcodecs.imread("i.jpg");
//载入屏幕截图
Mat source = Imgcodecs.imread("1.png");
//新建 result 用于保存模板匹配结果
Mat result = Mat.zeros(source.rows(),source.cols(),CvType.CV_32FC1);
//在模板图像和输入图像之间寻找匹配,获得匹配结果图像 result
Imgproc.matchTemplate(source, template, result, Imgproc.TM_CCOEFF_NORMED);
//在给定的矩阵中寻找最大和最小值(包括它们的位置)
MinMaxLocResult minMaxLocResult = Core.minMaxLoc(result);
//minMaxLocResult 返回的 maxLoc 为匹配的模板在截图中的左上位置,所以可以得到起点的位置
Point startPoint = new Point(minMaxLocResult.maxLoc.x + template.width() / 2, minMaxLocResult.maxLoc.y + template.height() - 20);

如图,minMaxLoc 方法返回的 maxLoc 点为匹配到目标的左上点。

2.找终点

先判断下一个目标是否有小白点,有的话按照找起点的方法模板匹配白点的坐标,即可得到终点。

如果找不到白点,则先利用高斯模糊消除噪声,再运行边缘检测算法,然后从上到下遍历得到上边缘的顶点与下边缘的顶点,从而可以得出终点。

//载入小白点图片
Mat template_white_dot = Imgcodecs.imread("white_dot.jpg");
//dot_result 用于保存白点模板匹配结果
Mat dot_result = Mat.zeros(source.rows(),source.cols(),CvType.CV_32FC1);
Imgproc.matchTemplate(source, template_white_dot, dot_result, Imgproc.TM_CCOEFF_NORMED);
MinMaxLocResult minMaxLocDotResult = Core.minMaxLoc(dot_result);
//判断模板匹配值,如果大于 0.7 就相信存在白点,即可直接获取目标点
if (minMaxLocDotResult.maxVal > 0.7) {
    System.out.println("found white dot.");
	targetPoint.x = minMaxLocDotResult.maxLoc.x + template_white_dot.width() / 2;
	targetPoint.y = minMaxLocDotResult.maxLoc.y + template_white_dot.height() / 2;
} else {
	System.out.println("white dot not found.");
	//result2 用于存放高斯模糊结果
	Mat result2 = Mat.zeros(source.rows(),source.cols(),CvType.CV_32FC1);
	//result2 用于存放边缘检测结果
	Mat result3 = Mat.zeros(source.rows(),source.cols(),CvType.CV_32FC1);
	//使用高斯平滑滤波器降噪
	Imgproc.GaussianBlur(source, result2, new Size(5, 5), 0);
	//运行 Canny 算子
	Imgproc.Canny(result2, result3, 1, 10);
	//把小人在图中抹掉,防止高度过高对结果产生影响
	clearTemplateRect(result3, new Rect(minMaxLocResult.maxLoc, p));
	//遍历边缘像素,计算终点
	targetPoint = findTargetPoint(result3);
}

3.计算距离

//传入起点和终点,根据欧式距离公式计算距离
public static double getDistance(Point s, Point e){
	return Math.sqrt(Math.pow(s.x-e.x, 2) + Math.pow(s.y-e.y, 2));
}

4.计算时间

//1.35 这个参数适合1080*1920分辨率,其他分辨率需要调整。
int time = getDistance(startPoint, targetPoint) * 1.35;

5.模拟触屏

int x1 = source.width() / 3 * 2; //取图片宽度的 2/3
int y1 = source.height() / 3 * 2; //取图片高度的 2/3
int x2 = x1 + random.nextInt(10); //随机模拟移动10像素内
int y2 = y1 + random.nextInt(10); //随机模拟移动10像素内
cmd("adb shell input swipe "+ x1 + " " + y1 + " "+ x2 +" " + y2 + " " + time);

最后

在与微信防作弊的不断博弈中,算法实现也需要不断更新,需要更加真实地模拟人为操作,否则刷到很高的分也会被微信拒绝。截止目前,这个版本已经可以跑得很高分了。

当然,这篇文章的目的并不是为了宣传刷分作弊,只是作为我这次学习实践的一次记录。而通过这次的实践,对 OpenCV 有了初步了解,相信以后有机会用在更有趣的场景。

如需完整项目及代码,关注公众号「现代晓说」回复【跳一跳】获取。

THE END

2018你好,2017再见

1.前言

也许是随着心智的成熟,也许是将近而立之年而产生的一种错觉,总觉得时间过得很快。转眼又到了该给自己一个交代的时候了,也该梳理一下自己在过去一年的「得与失」。

2.再见2017

2016 年的这个时候立下要在 2017 实现的小目标,如今多多少少肯定有几个没能完成的,比如写作。2016 年的计划是在 2017 年一周写一篇,而实际上却只写了八篇,平均下来一个月一篇都没能达到。这是 2017 年度我做得相对比较不好的一件事。

而 2017 年度对我来说比较满意的事情就是:

  • 与 2016 年一样,又坚持骑行了一年。(一个月大约 200 公里)
  • 健身从 2017 下半年开始,坚持了 12 周,后面由于天气问题停止,计划等到春末夏初再开始。
  • 一天背 20 个单词从 2017 年 11 月中旬开始,至今坚持了 49 天。
  • 2017 年已经坚持看书 24 周了,阅读量相比去年有所增加。

因此坚持就成为了我 2017 的年度关键词,以坚持来告别 2017,用学习来迎接 2018。

3.你好2018

最近几年「终身学习」这个词像智能推荐似的常出现在我的视野里,这个时代变化得太快了,我希望自己能在风口中抓住机会,迎难而上,而不是因为所谓的「中年危机」而迷茫。

对于「终身学习」这个词我深有感触。想学的东西很多,想做的事情更多,所以努力让自己更加自律。

2018 我的计划是:

  • 至少写 12 篇文章
  • 学习 OpenCV
  • 入门机器学习

计划学习 OpenCV 与机器学习倒不是因为某一门技术的火热而跟风学习,而是之前在接触到相关的技术时就感觉很有意思,所以计划在业余时间扩展相关技术深度。

我觉得人最难能可贵的是在人生的每个阶段都知道自己的目标是什么,并为之奋斗。 我希望能成为这样的人。

你可能还想看:

THE END

引用视频网站资源的正确姿势

1.前言

目前大部分网站如果需要嵌入视频的话,应该都是先把视频上传到视频网站平台上(如腾讯视频、爱奇艺、优酷等),然后再引用视频网站平台的资源,而引用的方式则是插入视频网站提供的分享代码。

腾讯视频、爱奇艺、优酷等视频网站都提供了多种引用方式,分别有 flash 地址、html、通用代码等。

2.Flash 与 Html 代码引用

众所周知,目前 Flash 已经逐渐衰落,各大视频网站也正在逐渐向 HTML5 技术转移。所以 Flash 的引用方式兼容性很差,PC 端目前还能正常使用,而移动端基本上已经惨不忍睹了。如果你用的是 Chrome 浏览器,那么你应该看过下面的提示:

所以就不要用 flash 这种方式了。

现在看看各家视频网站提供的 Html 代码:

<embed type="application/x-shockwave-flash" src="url" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" ></embed>

看到 application/x-shockwave-flash 没有?这种引用方式实际上也是依赖的 flash,在手机上也是完全不显示,因此这个方式也不推荐。

3.通用代码

之所以叫通用代码是因为它的特点是通用,以腾讯视频为例,看看代码:

<iframe frameborder="0" width="1280" height="720" src="https://v.qq.com/iframe/player.html?vid=t00253jl9mv&tiny=0&auto=0" allowfullscreen></iframe>

它是直接用 iframe 嵌入视频地址,然后网页在加载的时候 iframe 包含的视频部分就会由视频网站负责渲染,并以最佳的方式呈现,所以不管是 PC 端还是移动端都能正常显示播放。

因此通用代码是最佳的引用方式。当然,如果你的网站是纯粹面向 PC 端的,那么用 html 代码 embed 暂时也是没问题的。

4.可能会出现的问题

通用代码虽然是相对最优的选择,但是也有可能出现问题,比如引用了上面的代码,PC 端访问正常,移动端虽然也能正常访问,但是视频上下两端都出现了一大截黑块,高度无法自适应。

解决思路

让 iframe 宽度为 100%,与父容器宽度一致,高度动态计算赋值。把视频比例当成 16:9 来处理,则 iframe 高度为: height = 父容器宽度 * 9 /16

转成代码

<iframe id="video_iframe" frameborder="0" width="100%" height="" src="https://v.qq.com/iframe/player.html?vid=t00253jl9mv&tiny=0&auto=0" allowfullscreen></iframe>

把 js 代码放在 /body 之前

<script type="text/javascript">
    iframe = document.getElementById('video_iframe');
    //parent-id 为 iframe 的父容器 id
    iheight = document.getElementsById("parent-id").offsetWidth *9/16;
    iframe.style.height = iheight + "px";
</script>
THE END

如何优雅地给网站添加赞赏功能?

1.前言

前阵子发布了一个很小的开源项目 reward.js,这是一个高效且通用的、低侵入性的赞赏功能。不论何种类型的网站,仅仅在需要显示赞赏功能的页面引入一行 JS 代码即可实现这个功能。

 2.添加赞赏步骤

  1. 下载 reward.min.js
  2. 把 reward.min.js 文件里的两个二维码图片链接改为自己的并上传到服务器上
  3. 在对应的页面插入下面这行代码即可显示赞赏按钮。(同样把下面的 src 的链接修改为你服务器上的 reward.min.js 的链接。)
<script type="text/javascript">document.write(unescape("%3Cdiv id='reward' %3E%3C/div%3E%3Cscript src='http://www.shelwee.com/wp-content/themes/shelwee/js/reward.min.js' type='text/javascript'%3E%3C/script%3E"));</script>

至此,你就可以把上面这行代码引用到任何你想放的地方。

假如你同时运营多个网站,那只要把上面那行代码分别放到不同网站页面的指定位置就行了。一次配置,任意使用。够优雅吧?

3.后期更新计划

目前这个版本在 PC 端使用没有发现任何问题,但这还远远不够。后期的更新计划如下:

  • 支持识别微信 WebView
  • 增加支持移动端显示

本想支持移动端场景,但考虑到通过微信公众号阅读原文链接(或公众号菜单等)跳转到网站更加高频,而其它移动端场景暂时不考虑,使用场景及频率都不高。所以仅支持第一条即可覆盖绝大部分使用场景。

所以最后计划要实现的功能就是: reward.js 如果识别到是用微信 WebView 在阅读网站内容,就只显示微信赞赏码。

THE END

WordPress 免费开启全站 HTTPS

1.前言

记不清楚 Chrome 是从哪个版本开始标记网站是否采用 HTTPS 协议,即在网址前面有一把绿色的锁,旁边有「安全」两字。而一般未采用 HTTPS 协议的网站则是一个黑色的i图标,表示 「不安全」。
虽然使用 HTTP 协议并不影响使用,但这事估计早晚都得做。于是今天就干脆把网站从 HTTP 过渡到 HTTPS,顺便记录一下阿里云服务器上 WordPress 开启全站 HTTPS 的过程。

2.申请证书

由于我用的是阿里云服务器,所以直接在阿里云申请的 CA 安全证书。如果服务器用的不是阿里云,可以在 Let’s Encrypt 申请。
登录阿里云后,点击「产品与服务」-> 「安全(云盾)」栏目下的「CA证书服务(数据安全)」,然后点击「购买证书」,选择「免费型DV SSL」,购买。

免费数字证书,最多保护一个明细子域名,不支持通配符,一个阿云帐户最多签发20张免费证书。

购买成功后,按要求补全相关个人信息,然后等待审核通过即可下载证书。

3.Nginx 配置证书

在 Nginx 安装目录创建 cert 文件夹,把下载的证书上传到此目录。上传后的路径类似这样:

  • /etc/nginx/cert/1127.key
  • /etc/nginx/cert/1127.pem

然后配置 nginx.conf ,配置如下,直接将访问 HTTP 的请求 301 跳转到 HTTPS 上。

server {
    listen       80;
    server_name shelwee.com www.shelwee.com;
    return 301    https://$host$request_uri;
}


server {
    listen 443;
    server_name shelwee.com www.shelwee.com;
    ssl on;
    root /home/www.shelwee.com;
    index index.php index.html index.htm;
    ssl_certificate   cert/1127.pem;
    ssl_certificate_key  cert/1127.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    location / {
        try_files $uri $uri/ /index.php?$args;
    }
        location ~ \.php$ {
        fastcgi_pass   127.0.0.1:9000;
        try_files $uri $uri/ /index.php?$args;
        fastcgi_connect_timeout 300;
        fastcgi_read_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }
}

保存 nginx.conf 并重启 Nginx 。

sudo service nginx reload

这时刷新网站,虽然网址可能已经出现 HTTPS ,但前面的图标应该还不是绿色的安全锁,因为网站的资源还是 HTTP 协议下的,所以下一步要把网站的所有资源链接都替换成 HTTPS。

4.WordPress 修改

function.php

打开主题模板下的 function.php 文件,在文件末尾追加下面的函数:

/* 替换资源链接为 https */
function resources2Https($content){
    if( is_ssl() ){
        $content = str_replace('https://www.shelwee.com/wp-content/uploads', 'https://www.shelwee.com/wp-content/uploads', $content);
    }
    return $content;
}
add_filter('the_content', 'resources2Https');

wp-config.php

最后修改 wp-config.php 文件,文件末尾追加下面语句:

/* 强制后台和登录使用 SSL */
define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

现在刷新网站,绿色的安全锁是不是已经出现了?如果没有的话,检查一下网站上是不是存在一些写死的资源路径,找出他们(通常是 http:// 开头的)并修改成 https:// 。

THE END

Processing 播放透明通道视频

1.前言

Processing 是一种基于 Java 且简化了语法的编程语言,拥有丰富的第三方库,开发者也能非常容易的扩展开发出满足自己独特需求的库。因此在一些交互场景项目中,Processing 通常是我首选的工具。

2.需求

实际项目中,往往需要加入一些效果好的动效。

比如在原来的背景上,加入一个酷炫的动画。通常可以使用 gif 图来解决,但有时 gif 图会出现锯齿,效果不理想,又或者需要加入声音,那么就只能采用带透明通道的视频来解决了。

假设现在的需求如下:在原来的视频之上叠加一个类似摄像机在录制的一个动画,如下图:

3.分析

正常情况下,两个相同分辨率的视频叠加处理如下:

import processing.video.*;

Movie v1, v2;

void setup() {
  size(640, 480);
  v1 = new Movie(this, "1.mov");
  v1.loop();
  v2 = new Movie(this, "2.mov");
  v2.loop();
}

void draw() {
  background(255);
  image(v1, 0, 0, width, height);
  image(v2, 0, 0, width, height);
}

void movieEvent(Movie m) {
  m.read();
}

但是这样 v2 会直接把 v1 覆盖掉,透明通道并没有生效。效果如下:

正确处理透明通道代码如下:

import processing.video.*;

Movie v1, v2;

void setup() {
  size(640, 480, P2D);
  //如果需要全屏的话, 把 size(640, 480, P2D) 换成 fullScreen(P2D) 即可
  //fullScreen(P2D);
  v1 = new Movie(this, "1.mov");
  v1.loop();
  v2 = new Movie(this, "2.mov");
  v2.loop();
}

void draw() {
  background(255);
  image(v1, 0, 0, width, height);
  image(v2, 0, 0, width, height);
}

void movieEvent(Movie m) {
  m.read();
}

相信你已经看出来了,关键就在于有没有 P2D,但实际上如果把 P2D 改成 P3D 也是可以的。而缺省值则代表 JAVA2D,这个是不支持透明通道视频的。

附:

size(width, height, renderer)
fullScreen(renderer)

Parameters
renderer	String: the renderer to use, e.g. P2D, P3D, JAVA2D (default)
THE END