标签: HTML

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 的网站存在着下面这一句话的细微区别。

解决 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

在 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... ,如图所示

HTML5 自定义属性 data-* 和 jQuery.data 详解

html5 dataset新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。下面介绍HTML5 Dataset 存储的实际应用,以及包括jQuery在内的四种存取方式。

HTML5 Dataset 存储的例子

为一个元素分配data属性存储数据,例如这是一个span元素,它的内容是一首音乐的名称,我们为其HTML标签里直接预置这首歌的更多信息,在HTML源码上看起来可以这样来写:

<span id="music-latch" class="musique"
data-date="2013"
data-genre="Electronic"
data-album="Settle (Deluxe)"
data-artist="Disclosure"
data-composer="Howard Lawrence & Guy Lawrence">
Latch (feat. Sam Smith)
</span>

这样,我们就很简单的为这首歌在span标签里直接内嵌了其专辑、艺术家和流派信息。

如何一步步把网站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广告仍然可以赚钱
  • 支持分享文章,以及保存到稍后阅读服务

下图是一个示例:

用history api"偷换"浏览器历史记录

pushstate logo

HTML5提供了新的history接口,例如pushstate,以及popstate。通常情况下,浏览器的历史记录能保存访问历史,但是因为有了history api,pushstate和replacestate,我们甚至可以“偷换掉”浏览器的历史记录,偷走后退按钮,让浏览者点按“后退按钮”时,到一个你指定的网页,看起来就像是真的后退历史记录一样!这个网页还可以跨域,而且就算不存在向前d历史记录也能创建。有什么好处呢?想让访客更多的留在你的网站上?想要……?

用history api"偷走"浏览器后退按钮

history-stealing