标签: 网页设计

Nginx 为 HTTPS 加密站点启用 Certificate Transparency

nginx-ssl传统的 SSL 认证身份的过程可能存在着受信任 CA 错误或某些不负责任行为、抑或是自身域名被别人冒充申请颁发证书的潜在危险,这是 SSL 认证环节中容易被利用的一环。由 Google 主导的 Certificate Transparency (CT)希望解决这些问题。任何证书持有人、CA 都可以向 CT 服务器提交证书,并接受审计和监控,使得当前的 CA 能够更加安全公开和透明。

启用 Certificate Transparency 与否的不同

如果 HTTPS 网站没有部署 Certificate Transparency,会有什么不同呢?

首先,Google Chrome 浏览器取消了对没有 CT 记录 Extended Validation(EV)证书绿条(Green Address bar)的显示。

其次,如果你有 iOS 开发的需要,你会了解到 iOS 9 新增了一个叫做 App Transport Security (ATS)的特性,开始默认强制所有请求为 HTTPS 请求。如果你的网站不支持Certificate Transparency,那么将不能通过 NSRequiresCertificateTransparency 的情况。

除此之外,对于大多数中小型网站 CT 的启用与否,还没有太大的区别。在 Chrome 上点击证书绿锁可以看到,未启用 CT 的网站和启用 CT 的网站存在着下面这一句话的细微区别。

针对 HTTPS 加密优化 Nginx 的参数配置

nginx-ssl网页的全面加密是一个很明显的未来趋向,安全性这一因素被越来越多的网站考虑,部署 https 加密对于大多数网站来说都非常必要,尤其是当搜索巨头 Google 宣布会稍微提高 https 网站的优先级之后。这家公司本身就非常注重安全性和保密性,因此推出这样的策略也不难理解,也能极大地推动加密称为网站建设的标准配置。

为什么要加密

互联网是越来越开放的,人们也是越来越注重保密性的。在互联网的保密观念不强的过去,https 并不是网站的标配。但是在当下,我们需要传输越来越多的个人信息,对于网站的保密性要求也就更高。看到网站地址挂上了绿锁,总是不必担心自己阅读的内容被其他人看到。

其次,在国内,运营商劫持是一件非常令人烦恼的事情。运营商为了追逐利益,会强行注入广告代码,甚至是调取搜索关键词,强势推销广告,隐私暴露无遗。这不仅是对访客的伤害,对自己的网站体验也是一种伤害。加密的 https 则会最大的避免这一个风险。

部署 SSL 证书并启用 HTTPS 连接非常简单,在此不再赘述。

下面讲解以 Linux + Nginx 为例子,详解如何优化配置 Nginx 的参数,提升安全指数和速度。

所有的配置一经修改,都需要重启或重载 Nginx 服务来应用。

解决 Google CDN 无法连接导致网页无法加载的问题

Google Blocked国内网非常多的网站都使用免费的 Google CDN 服务来加载某些 js、字体样式库以提升网页浏览体验,例如 jQuery、Google Fonts。但是目前 Google 的大多数网站在大陆无法正常访问,因此这些本身是加快网页载入的库反而成为了阻塞网站加载的原因。这种情况国内的网站并不多,但是国外的网站却非常多地使用这些库。一般地,当 Google CDN 库称为网页加载的限制因素时,浏览器状态条会显示状态为 “正在等待 ajax.googleapis.com 的响应...” 或 “正在连接...” 等字样。

ajax.googlepis.com connection refused

如果打开控制台,能看见 Google CDN 确实正在阻塞网页加载。如果等待足够长的时间,浏览器最终会放弃加载,并呈现一个残缺的网页,这并不好。下面从网页开发者、浏览器用户的角度给出一些解决方案。

网页检测 AdBlock 的 6 种方法

adblock logo有些网页上充斥着令人厌恶的广告,这些广告不仅阻碍了信息的获取,有的还严重影响了浏览者的心情。特别是某些毫不相关的多媒体广告和弹出式窗口,不仅让人感到被骚扰,还很容易误点到,浪费宝贵的时间。由此便诞生了大名鼎鼎的跨平台 AdBlock 插件,在任何主流浏览器上都有它的扩展或插件,用户可以安装它并屏蔽绝大多数的广告。

既然 AdBlock 有检测广告并屏蔽它们的方法,作为网页制作者,其实也有反过来检测 AdBlock 的方法。

为什么要检测 AdBlock

这是一个有争论的问题:用户有选择不看广告、在浏览器页面上销毁广告的权利,网站也有捆绑广告和信息一同派发给你并收取广告商展示费用的自由。这两者都不能互相干预,并且在没有明确法律法规的环境下,你可以防范我,我也可以防范你。

ads on webpage

带给设计师创意和灵感的十大 iPad 应用

apps designer iconiPad 的多点触摸大屏幕是设计师们发现创意和寻找灵感的绝佳方式。App Store 上丰富多彩的应用也给了用户无限的可能性,有了如此众多的工具,唯一的局限可能就是个人的想象力。不过灵感虽然重要,但效率和转化率也很重要。有了好工具,还要有足够的耐心真正打造出优秀的设计。

我们要在鱼目混杂的众多应用里探索并选取能带给人灵感的佼佼者,下面是挑选的其中十款,它们都为 iPad 的大屏幕优化适配,可以充分利用大屏幕的优势,某些应用还可以适用于 iPhone 和 Android。

Bēhance

Bēhance 现被 Adobe 公司收购,是一个设计者们发布分享和发现新设计的的地方,你可以从其丰富的分类浏览到世界各地设计师们的杰出作品。从简单的绘图,到 UI 界面设计,再到 Logo 的设计创意,你都可以找到丰富的资源。这里不仅仅是设计师们的炫技场,还是你平日查找和学习优秀设计的好地方。有什么比直接关注并学习设计大师们的作品更好的学习方法呢?相信这些琳琅满目的优秀设计可以带给你不少触动。你还可以上传自认满意的作品,看看别人怎么评价。

在 Sublime Text 直接运行 Javascript 调试控制台

sublime text javascriptSublime Text是深受喜欢的多语言编辑器,很多开发人员都选择它作为自己的主力编辑器进行创作,并且凭借其强大的可扩展性,Sublime Text功能也越来越丰富。

但是有个问题,那就是Sublime Text不支持一些语言的运行,例如javascript,我们通常通过写一个HTML页面来嵌入JS,然后再用Chrome或者Firefox的开发者工具来调试。而实际上我们也可以通过添加Build System的方法来让Sublime Text支持Javascript Console控制台调试。

利用 JSC 添加 JavaScript 控制台 (Mac OS X)

实际上Mac内置了一个javascript控制台程序,但是藏得太深,它在

/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc

里。实际上你可以在终端里直接运行这个程序,然后在终端进行调试。

为Sublime Text添加此Build System,只需打开Sublime Text,选择 Tools > Build System > New Build System... ,如图所示

如何一步步把网站Retina优化

retina logo随着高清屏幕、高分辨率屏幕越来越流行,例如MacBook Retina机型、iPad Air系列,这些新生机器有着很高的PPI,对网页的清晰度要求很高,所以越来越多的站长都不得不面临一个问题,那就是把自己的网站做到高分辨率适配 (Retina-Ready)。因为低清的网页在高分辨率屏幕上看起来很糟糕,对用户体验是一个很大的损害。相反,高分辨率适配的网站看起来则更加美观清晰,对用户体验有很大的提高。所以随着科技的发展,Retina适配 (Retinafy)是一种必然趋势,各位不妨现在就做好这个准备。

Retina 适配的优势

网站为高清屏幕优化有什么优势呢?首先有大量的网站没有Retina优化,并且有着越来越多的互联网流量来自平板和手机电脑,这些机型都是非常提前就拥有高清屏的。之所以广大的站长还不动心Retina优化自己的网站,大多因为他们管理网站所用的电脑还不是高清屏幕,所以暂时没有体验到高清屏下低清网页的模糊感觉。但是如果能在现在就鹤立鸡群,把自己的网站做到高清优化,是非常尊重用户体验的,可以获得更多的回头客和满意度。

retina websites on macbook

下面就来从网站的一些基本角度出发,来展示如何一步步的让网站Retina优化。

下载网页中嵌入的Base64编码字体 (Webfont)

font icon网页上可以嵌入一些小型的字体来增强界面效果,优美的字体一直是界面开发者所梦寐以求的,然而优美的字体并不能想Arial和Helvetica那样,在大多数的平台上都自带。如果确实需要某种字体,为了防止客户端字体库没有这个字体,UI设计者可能就会在网页上选择嵌入字体,来达到所有客户端显示效果一致,保留最整齐的界面。

Webfont (Web Open Font Format) 正诞生于此,它的有点不仅在于占用体积较小、浏览器通用功能,它还可以轻松的转换为base64编码,从而非常简单的直接嵌入到CSS中,不需要额外的文件了。例如主流的Adobe Typekit就提供了在线字体库服务,其字体大多数都是通过此方法来嵌入的。

typekit

中意了某款在线字体,想要下载下来试用一下?本文就以Chrome浏览器为例,来教大家如何下载这些嵌入的Base64编码的字体 (Webfont)。

Tridiv: 在线的CSS 3D编辑器,轻松创建3D Web图形

tridiv logo利用最新的CSS技术,配合支持的浏览器,你可以轻松的在线创建、浏览并保存管理Web 3D图像。Tridiv是一个基于 Web 的免费编辑器,使用 CSS 创建 3D 图像,直观且容易操作,不需要多余的教程即可轻松上手,并且可基于Local Storage保存管理你创建的3D图像。

tridiv.com

WiziApp插件: 创建WordPress HTML5移动版页面、甚至Android、iOS客户端

wiziapp logowordpress上比较流行的移动版插件是WPtouch,可以让你不需要过多的关心即可生成高质量的移动主题,给人非常好的移动阅读体验。但是一味的WPtouch 也没有新意了,今天介绍的是WiziApp,一款非常强大,并且有着商业化运营的全新移动版插件:Wiziapp。

WiziApp插件 创建wordpress移动版网页

Wiziapp可以创建HTML5的移动版网页,来让移动浏览器访客进入此移动版网页,使得它看起来像是真的App一样,并且如果你有需要还提供了免费的Android软件生成。下面简单介绍一下WiziApp创建wordpress移动版的使用和体验。

Wiziapp的显著优点

  • HTML5清新风格移动版主题,给人浏览器网页以App应用的体验
  • 不是WPtouch的界面
  • 快速、简单,一键解决的向导,安装好插件只需等待一会即可完成创建!
  • 功能齐全,界面美观,并且可定制性强
  • 支持文章、图片相册,甚至音乐视频的展示,并可在线播放
  • 支持生成高质量的移动客户端!支持Android、iOS,你不需要写任何代码,并且自动更新内容
  • 免费网页+免费生成Android客户端 并协助你提交到Google Play
  • 收费的iOS客户端,大约200 USD每年
  • 支持Google Analytics
  • 支持Admob,如果你有Adsense广告仍然可以赚钱
  • 支持分享文章,以及保存到稍后阅读服务

下图是一个示例: