标签: CSS

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

下图是一个示例:

查看网站在不同浏览器(包括IE6、7)的显示效果

safari ie网页看起来是否不同环境都整齐?是否曾想知道自己的网站或者网页在不同的系统、浏览器下的显示效果,尤其是IE6下的显示效果?如果你用PC,则可以使用IETester这款软件查看以前版本的IE下显示的效果,但是缺点是你必须要安装这个收费软件。为了确保多种浏览器的显示效果,你可能还需要安装不同的浏览器比如说Chrome、Safari、Firefox以及Opera。而且如果你用Mac,IE的问题怎么解决呢?

好在有线上检查工具,可以通过截取远程服务器上运行不同系统、打开不同浏览器的网页的截图来让你检查自己的设计成果。下面简单介绍两款最常用的在线检查网站。希望IE6不要让你失望。

Browsershots: 查看Windows、Mac、Linux下不同浏览器的网页显示情况

browsershots.org是一个非常强大的在线检查网站,它提供了极为丰富的系统和浏览器选择,几乎可以满足你的所有浏览器要求。网站默认会为你的所有截图保存一段时间方便你依次的观看。

无需插件实现 jQuery 平滑滚动

jquery logo_6平滑滚动总能让用户体验更友好。我推荐过一款jQuery平滑滚动插件,其通过调用$.scrollTo()或$.smoothScroll()函数实现页面的平滑滚动。事实上,你不需要任何插件,不需要添加多余的代码就可以做到jquery页面平滑滚动。一切都靠jQuery自己的一行很简单的代码即可完成。

无需jQuery scroll插件实现 jQuery 平滑滚动

要实现此效果,只需运行:

$(document.body).animate({scrollTop:$(~selector).offset().top}, ~time );

即可。不需要引入jquery scroll插件。其中~selector~time是自定义的值,分别是元素目标和时间,此方法将会使页面滚动到~selector的顶部。

例如 $(document.body).animate({scrollTop:$("#header").offset().top}, 1000 ); 可以实现滚动到我的页面的顶部。

在线转换Webp图片文件

Webp_logo_Webp本文介绍如何在线转换图片到Webp,以及将Webp转换为Png格式。Webp是由google开发支持的新型图片格式,同时提供有损和无损压缩。WebP最初在2010年发布,目标是在最小的压缩损失下,提供尤其是在网络上应用的开放图片格式,竞争JPEG。Webp可达到与jpg不相上下的图片质量,但是有着更小的文件,可以减少图片档的传送时间。目前Chrome浏览器,Opera浏览器可以良好支持Webp文件。而你如果用Chrome Webstore,也可以发现上面的演示图片已经使用Webp格式。

jpg-vs-webp_2

网站图片JPG、PNG、GIF哪个好,该选择谁

Preview_icon目前网站图片的采用一共有流行三种,分别是JPG、PNG、GIF,然而很多人并不知道三者在选择的时候究竟应该选谁(BMP就不考虑了吧)。虽然都可以存储图片,但是如果要发布到网上,就必须考虑速度、大小和失真程度的问题。如果你运用得好,选对图片,那样便会使网站的整体体验上升,如果你运用得不好,就会引起反效果。下面我通过文件大小等多方面的元素来讲一下网站图片的合理选择。

PNG、GIF、JPG 介绍

GIF 图片

Gif 算是比较老的图片格式了,它的色彩效果最低,用gif保存鲜艳的图片的话会让你的网站看上去非常可怕。但是gif有着不可忽视的特点:体积小,有着极好的压缩效果,支持动画,并且支持透明效果,虽然这个透明没有PNG的那样渐变透明的强大。动画选gif没错;如果你的图片只有很单调的色彩,没有渐变色,例如只有红蓝两色,那么选GIF最好不过了!例如百度的首页LOGO就是很好的例子,它的大小只有2KB,节省了资源。

12个强大的 Chrome 插件扩展 推荐 (二)

chrome web storeChrome功能强大,也得益于其拥有丰富的扩展资源库。Chrome Web Store里有各种各样的插件,可以满足你使用Chrome时的各种要求。和Firefox一样,Chrome的扩展非常容易安装,而且非常容易卸载。与Firefox不同,Chrome的扩展不需要重新启动,并且不会有扩展插件会减小你的网页面积。在这里我总结出2013年 Chrome 的12款非常强大的扩展程序(二),供大家挑选分享。

阅读: 12个强大 Chrome 插件推荐 (一)

所有的扩展程序都可以在Chrome Web Store在线搜索并下载。

Kloudless

这个插件可以帮助你把Gmail邮件里的附件转存到Box,Google Drive,以及Dropbox里。你不需要先下载,再登陆,再上传,现在只需几个按键即可。在使用前需要登录到相关服务获取权限。

https://chrome.google.com/webstore/detail/kloudless/nddbhiejgghlfkjcmhanfpbpjiliclkd

kloudless