博客

（1280 x 800 的视频在宁皓网上播放时的截图）

最近试着把视频的尺寸提高到 1280 x 800，这是视频录制时的尺寸，也就是当时录的啥样，你看到的应该就是啥样。最近的两个课程都使用了这个尺寸， Drupal 多语言网站 和 配置 CentOS 服务器。

如果你购买了一台阿里云的 Linux 系统的云服务器，或者其它任何服务商的 Linux 系统的 VPS （虚拟服务器），你期待有一个图形桌面可以远程控制服务器，结果呢，你得到的是一个命令行工具，自己完全不知道怎么处理这玩意，其实你的想法很简单，就想在上面运行一个网站。

《CentOS : 在阿里云上运行网站》这套课程就是让你可以自己配置 Linux 系统的服务器，并且在上面运行网站系统，比如 Joomla，Drupal，Wordpress …

Windows 用户如果想要远程控制 Linux 系统的服务器，可以使用 puTTY 工具，下面是基本步骤。

Joomla 3 刚刚发布了正式版，这次升级相比 Joomla 2 来说改进了不少。不过对于普通用户来说，感受最大的是 Joomla 3 的新的用户界面，Joomla 3 的前台添加了一个 protostar 模板，管理后台使用的是 isis 模板。这两个模板都是基于 Twitter bootstrap 架构创建的（宁皓网 Bootstrap 教程），并且他们对移动设备都非常友好。就是说以后你可以在平板电脑或者手机上来管理和浏览你的网站了。

下面我们一起安装新的 Joomla 3.0。

在浏览器里打开 Joomla 所在的目录，因为我们还没有安装过 Joomla ，所以，这里会显示出 Joomla 3.0 安装界面。Joomla 3 简化了安装步骤，一共只显示3步就可以完成 Joomla 的安装。

第一步是相关的配置，选择安装时使用的语言，然后输入网站的名称，描述，管理员的邮箱，用户名和密码，Joomla 会根据这里输入的信息为我们创建一个网站的超级管理员。然后点击下一步。

如果你想把自己网站上的视频弄得能在 iOS 或者 Android 设备上播放，你需要想两个事儿，一个是你网站上的视频播放器要支持 HTML5，还有你的视频得支持在这些设备上看。

网站的视频播放器我们可以使用 JW Player，这个播放器有三种模式，Flash，HTML5，下载。就是如果浏览器不支持Flash模式，播放器会切换到 HTML5 模式，都不支持的话可以提供一个下载视频的链接。（你可以设置这几种模式的先后顺序）

让视频能在 iOS 和 Android 上播放，可以使用 AVC（h.264） 编码视频，用 AAC 编码音频。编码视频可以用 Handbrake 这个软件。

瀑布流式的页面，最早我是在国外的一个叫 Pinterest 的网站上看到，这个网站爆发，后来国内的很多网站也使用了这种瀑布流方式来展示页面（我不太喜欢瀑布流这个名字）。

我们可以使用 jQuery 的 Masonry 插件来实现这种页面形式，下面介绍一下方法。

1，分别下载 jQuery 与 Masonry ，然后把他们都加载到页面中使用。

刚刚为宁皓网的视频页面添加了一个“自动播放”按钮，点一下这个按钮以后，当前视频播放完成后，会自动跳转到接下来的视频页面，并且会自动播放视频。这个自动播放按钮是以课程为单位的，也就是它可以播放整个课程相关的所有的视频。

不过遗憾的是 IOS 设备不允许自动播放视频，你必须得点击一下播放按钮才行。

说一下实现这个功能的大概的思路：

视频页面会有一个视频目录，这个视频目录是一个 views （views 是 Drupal 的一个模块）。views 会自动为当前的视频页面的<a>标签中会添加一个 .active类。我们的“自动播放”按钮就是利用了这个.active类。

根据页面窗口自动缩放的背景图片

在宁皓网首页的展示区域，有一个大背景图片，这个背景图片会根据页面窗口的宽度自动缩放。这里用到是 jQuery 的 Anystretch 插件。下载这个插件并把它加载到页面中，同时你的页面中还需要使用到 jQuery。

jQuery Anystretch：
https://github.com/danmillar/jquery-anystretch

调用的方法：
$('#showcase').anystretch("files/images/show-02.jpg");

解释：
找到页面中带有 #showcase 这个 id 的元素。然后用 Anystretch 为这个元素添加一个可以自动缩放的背景图片，图片的位置在 files/images/show-02.jpg。

现在是凌晨 3 点，把小改版之后的宁皓网上传到了服务器，希望不会有太大的问题，这次改版也意味着是正式版的宁皓网，所有 9 月份之前订阅课程的会员订阅开始的时间全部都改成了 9 月 1号，也就是未来的一年，您仍然会是我们的会员。

跟宁皓网测试版一样，都是小雪逼着我做的，她总是推着我做一些事情。我记得测试版开始是在国外的一台虚拟主机上，速度很慢，但我们还是推出了测试版，这里我要非常非常感谢支持我的朋友们，你们是我的天使。

很多朋友问我的工作是什么，其实宁皓网就是我的主要工作，除此以外，目前我还没有其它的工作。我们目前还不是一个公司，也算不上是一个团队，只能说是一个小团伙，只有我跟小雪，小雪已经是我媳妇了，wo hoo ~~ ：）

这次改版的变化不是很大，不过页面的代码几乎全部重写了，用了 bootstrap 架构（希望你用的是 Chrome 浏览器，上帝保佑！），对 iPad 等移动设备做了些优化，在视频页面添加了一个向前，向后的按钮。天呐，就改了这么点东西，但几乎花费了我一个月的时间。

《Bootstrap 用户界面架构 》介绍了 Bootstrap 架构的使用。Bootstrap 来自 Twitter ，是一套用户界面与交互的架构，你可以使用 Bootstrap 快速的创建专业的设计。