逐浪技术--Zoomla!逐浪CMS官方博客

精雕细琢与强大工具箱组合卓越结晶-2017版逐浪CMS官网改版感言

作者:发哥 发布时间:2017-03-31 来源:佚名 点击数:

发哥

博主:发哥
个人座右铭:建网站,选逐浪。 易上手,功能棒。 质量好,服务善。 高性能,最划算。

阅前提示:

这是一篇纯技术的干货文章,没有什么艺术性可言,而且为了考虑方便用户,诸多技术细节采用流水帐的记录,以利开发者,闲人慎入


第一部份:架构篇

用什么样的架构开发,用什么样的布局,就如同画家作画、书家写字,谋定全局。

Zoomla!逐浪CMS2 x3.9.0全面基于MVC架构和微软dotNET4.0,集成最新的windows server 2016黑科技与SQL server大数据技术,显然是最优秀的框架。

为此,官方第一时间将整站后台升级到Zoomla!逐浪CMS2 x3.9.0版本,从而具体良好的框架。


Zoomla!逐浪CMS的开发中,模板层、资源层、数据源、应用层、附件层有着严格的定义。

blob.png


需要指出的是,虽然我们目前已经进入了2017年大数据时代,但市面上还有一些低端主机厂商依然在兜售基于windows 2008系统的主机,2017-2009=10。军队一辆坦克开三年都要升级,民用一台手机基本也是两年一换,而一个操作系统和硬件环境,10年没换,显然是跑不出逐浪CMS这样的企业级产品的。

更有甚者,对于新时代的网站系统,依然沿袭旧的win2003时代思路,每站分配100M内存,想想手机内存都是4G\6G的今天,岂不是叶公好龙、刻舟求剑?


在逐浪云上,部署好Zoomla!逐浪CMS,开始全新的门户开发。


Let's GO!



第二部份:是建站,又不止是建设网站




blob.png

这是一个尊重技术、尊重工匠的时代。

我们认识到,今天我们的所面临的网站开发环境,远不是10年前做一个网页挂在www万维网中,就万事大吉,而是以网站开发为起点的全杯应用体验。


网站依然是互联网的中心,尤其是以Google\微软\fb\apples对于下一代站点和APP的规划(Progressive Web App),甚至是国内微信小程序来看,门户、以及以HTML5为核心技术的移动站点将大放异彩,坚定门户技术与B/S技术超越一切,超文本语言是最有生命语言理念。

同时又充分的融入新的技术,如AngulaJS等技术,拥有移动技术,转换思维,从而构建卓越的全栈体验,建立全生态访问矩阵,才是符合时代的平台。

这也正是逐浪CMS团队孜孜不倦的追求。


本次改版目标由此确定:



第三部份:前端篇

诚然,今天为了适应移动化,已经有诸多框架可选。但作为首个引入Bootstrap的国产CMS,逐浪官方决定将此进行到底,并进行示范化的展示,因而还是进行了纯正的Bootstrap设计以为范例。

对于轮播控件,Bootstrap可以进行细致化的定义,如下代码:

<div id="carousel-example-captions" class="carousel slide home17_banner" data-pause="hover" data-ride="carousel" data-keyboard="true" data-interval="21000">

其中,data-keyboard指定了支持键盘驱动轮播控件,而Dta-interval指定了每次滚动的时间,为各个动画轮播的时间进行了细微定制。

当然,如果开发过程中,不想自动滚动,也可以采用data-pause="hover"来指定,使之固定不播放,从而方便调试。


动画上,我们引用了经典学院派的animate.js,这个脚本在逐浪CMS中已经引入很多个版本,在dist的各个目录下都能看到。

为了配合animate效果,我们还引入了wow.js这个脚本(以下可能称为wow.min.js,二者意义相同)。

wow.min.js这是一个非常有趣的脚本,Wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的,用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。Wow.js 比其他 JavaScript 视差插件小,类似 Scrollorama(这个非常华丽,但是也更繁杂)。wow.min.js 非常容易安装和使用。如果你使用 Wow.js,你可以非常快的启动,执行代码。


WOW.js 需要 animate.css 配合,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。wow.min.js可以实现在滚动下的动画状态。

使用方法:

1、加入animate.css


<link href="http://www.bbsxiaomi.com/case/css/animate.min.css" rel="stylesheet">

2、加入wow.js


<script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>

3、元素中加入class


<div class="wow animated tada">tada</div>

4、可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如

1
<div class="wow animated wobble" data-wow-duration="4s" data-wow-delay="3s"></>wobble</div>

5、wow.js 使用了 querySelectorAll 方法,IE 低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。

1
2
3
4
5
<script>
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
    new WOW().init();
};
</script>

6、也可以自定义wow.js

1
2
3
4
5
6
7
8
var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();



属性/方法类型默认值说明
boxClass字符串‘wow’需要执行动画的元素的 class
animateClass字符串‘animated’animation.css 动画的 class
offset整数0距离可视区域多少开始执行动画
mobile布尔值true是否在移动设备上执行动画
live布尔值true异步加载的内容是否有效

增加顺序动画


在标签上增加 


data-wow-delay="0.3s"

如:

blob.png

感兴趣的朋友可以点此下载wow.js:

https://www.z01.com/Template/office/style/js/wow.min.js 



第四部份:图像篇

对于程序员和代码人员来说,图像是短板。

但没有理由忽视它。

这里分享几个压图的小技巧。


有时会很好奇,比如微软windows操作系统的桌面背景图高清晰,可是文件却压得好小。
还有苹果公司官网的图片也是相当清晰明亮,文件也不大。
现行摄影网站多数会限制上图大小,比如不超过200K。摄影作品在Photoshop调图完成后,正常情况下使用“存储”或“存储为”命令通过改变压缩率可以将文件控到符合要求。但是对于一些超高像素相机出的片子,和一般像素相机拍摄的细节非常丰富的片子,以及后期使用软件功能形成的“大文件”结果,最后保存JPG小图时往往无法将文件大小降下来。
下图就是一张细节丰富的照片,保存JPG时原尺寸为5000×3333像素,300PPI,文件大小竟然有13.29MB,使用“存储”或“存储为”命令,图片质量降到0也不能低于200K大小。
换一个命令,使用“存储为Web所用格式”命令,压缩率更大,文件大小降下来了。在选项中注意选择是否保留文件和相机信息,包括EXIF信息。

91c4a6e7tx6D7rTSuZK0c&690.jpg



当然,图片元素信息选择为无,这个主要记载你的图片是什么型号相机拍摄的,我们还可以点击右上小三角设置选择优化文件大小,可以存为你想要的大小了。

2.jpg

3.jpg

经过比对分析,JPG图片变小效果非常明显,对于PNG图片也有效(只是比率很小,一般小1-10K),但对于“寸土寸金”的流量来说,也是难得可贵,值得一试。



第五部份:视觉优化中的两个坑

话说Zoomla!作为至今中国CMS厂商alexa排名第一的平台,每年都会有改版。

一般网站尊敬2-3年一大改版,每年一小改版的进度迭代推进。

这从逐浪官网的脚本命名规则也能看出来,最近的一个CSS脚本是2014.css,虽然是2014年创建的,但一直有不断的更新和维护。

新版逐浪CMS官网采用了global.css这个标准名称,时行全新设计,摒弃旧式约定,整个站点改版完成,CSS文件不超过500行,取得了卓越的成效。


然而在实际设计中,我们还是遇到了一起坑。

首先是webfont加速事宜。

我们知道,当前市面上的webfont中文字库,均采用有限字库引用法,即用几个字,就引用相应文件(包括国内的字蜘font-spider.org均是采用同类方案,一旦加一个字符就要重新更新字库引用文件,相当麻烦)。

这样的优点是文件小、加载快。缺点是灵活性不够,维护成本高,一旦要加一个文字或减一个文字就要重新引用。

为此,逐浪软件旗下的逐浪字库团队提供了一个全库解决方案(感兴趣可以访问www.ziti163.com/webofnt)。

显然,全库加载是慢的,如何解决呢?


逐浪的优秀前端设计师是这样考虑的:

我做不到过大文件极速加载完,但可以做到将客户看到的第一屏最快展示出来,其它在后面自由排队,显然也是一种思路。


具体应用上,由逐浪官网引用了一款极细的逐浪超细宋webfont,在初加载时,我们将微软雅黑超细和ST黑体超细(用于mac设备)作为备选。

webfont有一个特征,就是当一个字体在下载时,会用OS内置的备用字库作为显示,后台慢慢的等待下载,完成后再呈现出最终效果。

其CSS写作是:

font-family:"ZoomlaXSongExtraLight","Microsoft YaHei UI light","STheitiSc-light";



我们遇到的第二个坑是视频加载过慢。

首引引用了一个视频,并创造性的引用了一个随心加载,点击PC右下角的惊叹号,视频和标语会变化,如下图:

blob.png

最初我们将这台笔记本电脑背景设置成透明的PNG,带来的问题是每次都要等好久才能加载出视频(一般超过5秒不能加载成功,就是失败的站点)。

解决此问题用的小聪明是:原来透明的PNG,改成带视频其中一帧的JPG文件,从而使视觉上感受不到加载延迟:

blob.png

老师说,只要有效的方法,就是好方法


在此提出两个解决思路,只是为了说明在通往开发的自由之路上,只要想办法,总是有解决方案的,更何况在逐浪软件的开发工具箱上,拥有无限种可能。


顺便说一下,在mac的web及平面设计中,一般采用黑体-简 Heiti SC来取得与雅黑同等效果,即黑体-简(细体|中等)对应window下微软雅黑Reguler默认效果。
MAC中细黑的网页效果,可以使用STheitiSc-light,也可以使用STHeitiTC-Light,二者区别SC是大陆国标字,TC是港澳台标准的字。
举个例子,国标逗号句号顿号是左下角的,TC的是居中的,还有一些字的写法,草字头的TC是两个分开的加号。


第六部:终极加速

就是避免一切不需要的查询,整个逐浪官网只引用了两个查询标签,其它均是固定的内容,也是没有必要的查询。

固然CMS使人更方便,但对于一些固态内容,显然没必要用标签(动态标签),否则会让代码思路更加复杂。

甚至于标签中也追求极致的简约,比如target属性,虽然可以通过节点来识别是否弹出新窗口,但官方新闻这一块,我们铁定是必须target="_blank"的,就直接写明,不需要来动态,省去不必要的动作,自然查询就更快了。



Web开发之路是孤独的,同时技术也是不断演化的,这一篇博文只是开发过程的一段小记,我们将不断优化设计,整理思维,用以献给所有支持逐浪软件发展的人们。


第七部:结语:

web开发中,既要小气抠门,一点点的细节都要管控住,同时又要适当的前瞻,在5G即将到来、更高速的网络下,门户和web的形态将如何表现?

这都是体现开发者匠胆琴心之处。


曾有朋友在引用SSL加密浏览后一段时间,拆除效果,理由是加载过慢。

事实上,只要恰当引用、科学设计,速度并不会慢,而且会带更好的安全性。



顺便预报一下,在新版逐浪CMS中,提供了全新的webfont字库引用等功能,将更加方便,其中zfont、zIco两大全新解决方案也将第一次面对广大站长开放,引用起来非常方便,如:

<style>
    @import url("https://code.z01.com/Zfont.css"); /*此行相同页面只需引用一次*/
    .ZoomlaXingtiJ { font-family: 'ZoomlaXingtiJ'; }
</style>
<div class="ZoomlaXingtiJ">我是繁体创意书法</div>


整个引用库在逐浪云上,即:

@import url("https://code.z01.com/Zfont.css");


精彩值得期待!

本文责任编辑: 加入会员收藏夹 点此参与评论>>
复制本网址-发给QQ/微信上的朋友