yoursunny.com is in Git and Completely Rebuilt

I started making websites since 2001. This website, yoursunny.com, started in 2006. In the past 11 years, I've rebuilt the site several times, switched from ASP to PHP, and moved from Windows dedicated hosting to shared hosting and eventually to Linux VPS. So far, every time I want to perform a major edit to the website, I copy original versions of affected files to a backup folder on my computer, and then go ahead to do the edit. After having tested the modification locally, I upload changed files via FTP or SFTP to the server. One constant worry over my head is, what if I lose all the files on my computer, and my hosting provider vanishes so I can't get them back? Another headache is, sometimes I may make an edit incorrectly, but I couldn't revert it back because I didn't copy the original files to the backup folder as I determined the change wasn't "major" enough to warrant a backup.

During my studies at University of Arizona, I learned a useful tool called git. Git is a source control system: it allows developers to create a repository and put source code into the repository, and will automatically keep track of all the edits applied to each file. By putting website source code into a git repository, I can find out what modifications I've performed to each file over time, regardless of whether it is "major" or "minor". Additionally, I can synchronize the git repository with a remote git server, so that the server has a copy of my website, including edit histories as well. This would solve both the worry of losing files, and the headache of not having an earlier version to revert to in case of an incorrect modification.

After delaying this projects several times, I am finally determined to move yoursunny.com into git repositories in Apr 2017. At the same time, to keep the website source code as clean as possible, I decide to try out two new technologies: static site generators and Composer. That is, I would rebuild yoursunny.com, copying page by page, into a new website stored in git repositories.

I spent about 2 months for this rebuild/move, and I'm happy to announce that yoursunny.com is now under source control.

Main Site with Composer

那些年,我做过的网站

2001年,我制作了第一个个人主页。10年过去了,让我来回顾一下,10年来我做过的网站。

以下列举了34个网站,只包含目前仍然在线、或者能够找到截图/源码的站点,且不包含某些非公开项目;实际做过的网站,大约在60个左右。部分截图来自Internet Archive Wayback Machine

2001 个人主页

  • 内容:自我介绍,我的第一张数码照片
  • 技术:FrontPage
  • 发布:通过电子邮件发给读者
个人主页 截图

2002 FredSoft

  • 内容:VB编程作品
  • 技术:手写HTML4
  • 发布:学校空间
FredSoft 截图

2002 个人文件夹

  • 内容:链接到子文件夹
  • 技术:手写HTML4、CSS、JavaScript
  • 发布:本地计算机个人使用,Windows 98的folder.htt功能
个人文件夹 截图

10分钟为网站添加聊天室功能

2016-01-05更新:Windows Live Messenger Connect已于2013年关闭,本技巧已经失效。

如果你正在运营一家新闻/小说/视频类网站,每时每刻都有大量用户访问同一个页面,那么你可以在网页上添加一个“聊天室”,让同时访问同一网页的用户互相交流。

根据本文介绍的方法,你可以在10分钟为网站添加聊天室功能,而且不占用任何服务器资源。

第一步:应用注册(3分钟)

本文介绍的“聊天室”功能由Windows Live Messenger Connect提供,需要使用一个Windows Live ID来管理。如果你的网站不是个人网站,建议你新注册一个Windows Live ID作为开发者帐号,以便在必要时与其他网站管理者共同使用该帐号。注意密码必须足够复杂,否则是无法作为开发者帐号使用的。

双层动态图片保护Email地址

Email是最重要的通讯工具之一。滥发垃圾信息者会利用一切可能的通讯工具,把小广告送到你的手中。发送Email的成本极为低廉,使得Email倍受垃圾信息发送者的青睐。发送垃圾邮件的第一步,是收集足够多的有效电子邮件地址;而收集Email地址的方法,主要就是查询目录、使用网页爬虫两种。

通过查询目录收集Email地址,主要是查询各类电子黄页、网站备案资料、域名WHOIS信息等。例如WHOIS yoursunny.com,可以查询到域名注册者的Email地址(有些WHOIS结果页面会用各种方式保护Email地址,但大部分并不会进行保护)。根据规定,域名WHOIS信息必须包含有效的Email地址,因此规避这种收集的唯一方法是使用Private Domain Registration服务,令WHOIS信息中包含的Email地址不断变化。

使用网页爬虫收集Email地址,是指垃圾邮件发送者编写程序抓取互联网上的网页,在网页文本中提取形似Email地址的字符串。比如某网页包含了 someone@example.com 这个Email地址,爬虫程序抓取该网页时就可以用正则表达式找到这个地址。本文主要讨论针对这种收集方法的防范。

防范网页爬虫抓取Email地址的传统方法

使用变体Email地址

SNS社交平台的核心技术架构

SNS(Social Networking Sites),是一类用户可以自己发布信息、与别人互动并分享个人或职业兴趣的网站。知名的SNS网站有Facebook、MySpace、人人网(校内网)、开心网等。

运营一个SNS并不容易,需要用户体验研究、艺术设计、前端开发、后端架构、系统维护优化等技术人员,以及商务、公关、客服等非技术部门的通力配合。阳光男孩是技术人员,所以只谈技术。本文只想涉及SNS技术的一小部分:平台核心架构。所谓“平台核心架构”,我说的是SNS网站最基础、最核心的部分。与“操作系统”对比,SNS的平台核心架构,就相当于操作系统的内核。阳光男孩认为,SNS平台的核心架构包括两块:应用接入、消息分发。

应用接入,让用户有事可做

完善、稳定的应用接入平台,让用户在SNS平台上有事可做。这里所说的“应用”,既包括第三方应用(比如开心农场、荣光医院、跑火车等各类游戏),也包括SNS网站自己推出的应用(比如日志、照片、相册等各种内置工具)。自有应用+第三方应用,约等于SNS网站上除了首页、个人主页、设置页面以外的所有页面。

SNS平台为接入应用提供的功能

Web应用的评测清单

有人说,只需24小时你就可以完成一个网站,并且开始做生意。建立Web站点已经变得像搭积木一样简单:在WordPress、Discuz、UCenter Home、ShopEx等常用建站程序选择一个(或者多个),能让你在3分钟之内创建一个可以运行的Web站点;然后,你可以用剩下的23小时57分钟安装插件、修改模板、发布内容,实现更丰富的功能。

不过,这些“积木”并不一定能满足你的目的。很多情况下,你需要自己(或者请人)开发一块新的“积木”——编写网站程序。至少,你也得对某些“积木”进行一定的修改和扩充,来满足你网站的特殊需求。

当你的网站并不完全由常用建站程序组成时,Web站点的质量就是一个必须关注的问题了。

Web站点的质量包括哪些方面?

我认为,制作一个网站,必须关注的质量问题,至少包括下面这些:

我的Web开发学习之路

最近有人问我,如何开始学习Web开发?在此,我想对自己学习Web开发的历程作一个回顾。

网页制作 vs Web开发

实际上,很多人提出的问题并不是“如何开始学习Web开发”,而是:

  • 怎么做网站?
  • 网页制作的方法
  • 建立网页的流程
  • 我会PHP和Dreamweaver,还要学什么?
  • 寻网页制作程序编程高手

现在,我坚持使用Web开发这个词,而不是网页制作网站建设这些说法。我认为,“网站”只是Web开发的一部分;学习了这么多开发技能,仅仅用于制作“网站”或“网页”,就是大大的浪费。

无闪烁、SEO友好的完美图像替换(pFIR_improved)

图像替换是网站前端设计中经常使用的技巧之一。本文在pFIR图像替换技术的基础上,提出了一个改进版本。

什么是图像替换(FIR)?

考虑这样一种情况:<h4>Image Replacement</h4>,效果:

Image Replacement

现在希望用一张图片替换掉文字内容,使得网页更加丰富多彩(很多情况下是为了表现出特殊字体效果)。做到这种效果:

用JavaScript检测浏览器是否打开图像显示

JavaScript能不能检测浏览器是否打开图像显示?看似一个非常简单的问题,但是网上却很难查到相关资料。大部分用户不会关闭图像显示,但是仍有少数非宽带用户关掉了图像。为了使网站变得更加人性化、具有更好的可用性,Web前端工程师有时需要通过JavaScript检测“显示图像”功能是否打开。

方法一:图像尺寸法

未指定width、height属性的<img>标签,在图片成功下载的情况下能从width、height属性中取得图片的真实尺寸,而图片功能未开启时则是一个固定的、比较小的尺寸(相当于那个“红叉”)。为此,可以插入一张尺寸较大的图片,然后读取width属性,如果尺寸与原图不符说明图片显示没有开启。

信息系统计算模型:从C/S、B/S到云计算

随着计算机软件的不断发展,计算机软件的科学计算、信息处理两大用途中,信息处理应用变得越来越广泛。信息处理软件自始就是多用户的:UNIX上的mail是最早的信息处理软件之一,它的作用是在同一台UNIX机器的不同用户间传递文本信件。计算机网络出现后,多用户的信息处理软件得到进一步发展,演变成“信息系统”。一个基于计算机的信息系统,是以计算机软件、硬件、存储和电信等技术为核心的人机系统。

回到过去——单机时代

最早的信息处理软件mail是多用户的,但是它只能在同一台机器的不同用户间传递信息,而不能实现跨机器的传递。uucp可以实现跨主机的信息传递,但是主机间的网络连接不是持续的,信息到达的时间无法保证。那时,计算机信息处理仍然是以单机为主,通过软盘或非持续的网络连接在主机间交换数据。

在中文市场,求伯君开发的WPS字处理软件取得了很大的市场份额。WPS最早的版本基于彩色文本界面,通过控制字符决定文字、段落的格式。WPS处理的对象是中文文档,信息处理的主要目的是根据需要的格式打印文档——信息在计算机上的处理是次要的,文档的主要形式是打印稿。

FoxBase等单机版数据库管理系统也迅速发展。开发者在此类数据库基础上,开发了单机版本的图书馆、工资等各类管理信息系统

Web设计的核心准则

Web设计大全》[美]Thomas A. Powell著
Web Design: The Complete Reference
2001机械工业出版社 ISBN7-111-08619-8

Web设计介绍

  • 规则:设计者不是用户。
  • 规则:用户不是设计者。
  • 规则:为共性设计,但应该考虑差异。
  • 规则:站点的运行应该接近没有错误。
  • 规则:了解和注意Web及因特网媒体的限制。
  • 规则:适当的时候,Web站点应该遵守GUI原理。
  • 规则:导航系统只不过是达到目标的手段。
  • 规则:外观会显著影响用户开始对站点的价值判断。
  • 规则:站点的综合印象分受外观、内容、技术、可用性及用户满足程度的综合影响。
  • 规则:不要用界面去打造品牌。
  • 规则:没有一种“正确”的Web设计符合所有的站点。
  • 规则:控制权应该给予或至少看起来给予了用户。
  • 规则:所见即所想(WYSIWYW)。

Web设计进程

  • 建议:在设计之前尽可能地收集站点内容。
  • 规则:外观设计应该采用自顶而下,从主页到子页,最后是内容网页。
  • 建议:在开发外观组合图时,一定要考虑浏览器窗口的边界效果。
  • 规则:和原型设计保持距离。倾听用户并润色设计。
  • 规则:站点总会存在一些问题,好好测试你的站点。
  • 规则:测试应该设计站点的各个方面,包括内容、外观、功能和目标。
  • 规则:用户测试是最重要的测试形式,不要在最后才进行。
  • 规则:站点开发是一个持续的过程:规划、设计、开发和发布,如此周而复始。

从谷歌谈网络广告媒体

广告媒体就是直接以实现广告主与广告对象之间联系的物质或工具,凡是能刊载、播映、播放广告作品、在广告宣传中能传播广告信息的物质都可称为广告媒体。 网络,是当今越来越重要的广告媒体。 发布广告是许多网站的重要甚至唯一赢利模式;据统计,网站收入的第一来源是短信平台,第二就是发布商业广告。

大家对谷歌(Google)公司的印象,往往就是其搜索引擎;而其搜索乃至其他大部分业务的盈利,几乎完全来源于其独创的“相关文本广告”(relative text ads)技术。 你可以尝试在谷歌上输入“手机”,你一定会在搜索结果页面的顶部或右侧看到“赞助商链接”。

从这个截图看,对关键字“手机”的广告是有关手机或充值卡的内容,只把广告展示给可能感兴趣的用户。 虽然这样降低了信息收视率,但是有效到达率大大提高,无疑可以获得更好的广告效果。

谷歌还把广告放置在用户的电子邮件旁边

这样的做法很快引起了争议:“谷歌阅读了我的电子邮件!” 虽然谷歌一再表示,Gmail中显示的广告是基于机器自动匹配相关文本的,但还是有人认为隐私受了侵犯。 然而,显示与电子邮件内容相关的广告确实是谷歌的高明之处。

我的顶级域名开通了!

我早就有注册顶级域名的想法。本来我的网站一直是用免费二级域名的,比如最早用的fred.9126.com,后来用的sunnyland.1a.cn和sunnyPower.588.net等。 但是,有不少人觉得这些网址不容易记住;更严重的是,在使用免费二级域名时,会显示或弹出服务商的广告,有些广告内容实在不好看,吓跑了一些访客,同时广告页面的特殊脚本有时会导致部分浏览器不能正常转入我的网站。

在Google上搜索了半天,一直没有查到可用的免费顶级域名。我决定,花钱买一个。 我想,这笔投资是很值得的,因为一个朗朗上口的顶级域名对于网站的形象很重要。 经过一段时间的网上学习,我了解到,注册顶级域名需要通过注册商进行,不同的注册商报价各不相同。 我在搜索免费PHP空间时找到了008.net这家属于重庆电信公司的网站,它同时提供域名注册服务,报价是65元/年;再搜索其他注册商,没有找到更便宜的,我就选定了这家“我家在线”网站为注册商。

接下来就是要选择一个域名。 我原有的网站名叫sunnyPower阳光力量,但是很可惜sunnyPower.com已被别人注册了,sunnyPower.net、sunnyPower.org、sunnyPower.cn都还在,但是我担心访客可能会只记得sunnyPower而忘了后面是什么,那时就往往会先尝试.com,而进入了别人的网站。 我想,我应该注册一个.com的域名。sunny.com当然不可能还在了,早就被造SUNNY牌汽车的一家日本公司注册了(在WHOIS里能看到),isunny.com、sunnylove.com、mysunny.com……都已经没有了,我突然想到了yoursunny.com,一试,还可以注册! 于是,我就下了单。

然后要付款。 “我家在线”的付款方式有招商银行、工商银行、农业银行、建设银行、PayPal、支付宝六种。 学校里有一家工商银行,我看到工商银行后面有一长串数字和一个人的名字,于是我把它抄下,跑到工商银行问是怎么回事,银行保安告诉我,这是个账号,可以汇款给这个账号。 于是我拿了钱去,却被告知要身份证。 只好等了一星期,回家拿了身份证,再去银行办妥汇款手续。 那么,网站怎么知道是谁给它汇的款呢? 银行保安说,收款人可以获得汇款人的姓名和身份证号等。 我登录“我家在线”,看到上面有个表单,可以填入姓名、身份证号、汇款金额、汇款具体时间,就填了提交;过了一天(漫长的一天,随时可能被别人抢注域名),果然看到用户余额里出现了65.00元。 到国际域名注册页面,填入了yoursunny.com,在提交前检查了又检查,生怕域名拼写错误(不能改的),再点击提交。 马上,系统提示注册成功。 不过,要在等一天,才会向国际域名组织正式注册,以后就可以使用了。

又过了一天,昨天晚上,域名终于可以用了。 我花了不少时间去设置它的DNS解析等功能,还没有完全弄明白。 不过,我看到的事实是,在浏览器里打上yoursunny.com,已经可以看到我的网站了! 我终于拥有了属于我自己的域名!