分类: 网页设计

在 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

加载 jQuery 的正确方式

jquery logo_6jQuery是我们用的最多的javascript函数库,占有率极高,Wordpress原生自带,并且扩展性也很强。但是加载jQuery仅仅只是一行调用代码而已那么简单吗?事实上jQuery的正确加载方式,不一定所有人都知道并掌握。掌握正确的jQuery加载方式,总是会对网站有利无弊。

确定要放在Head部分 ?

事实上最好的情况是,js文件都不要在<head>部分进行加载,否则会影响到head部分的载入速度,直接导致网站的内容(body)载入延迟。如果你确定你不需要在head部分载入jQuery,请将载入代码移动到</body>前,准确的说是第一个会用到jQuery函数的javascript代码前。

当然,如果你需要head部分加载jquery,也请确保所有的js文件,包括jquery,都要放在调用CSS文件的代码之后,来实现同步下载。这也是Google官方给出的建议。例如下面的加载不推荐:

<script src=jquery.js></script>

<link href="style.css" .../>

而是应该使用:

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

pushstate logo

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

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

history-stealing

查看网站在不同浏览器(包括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 ); 可以实现滚动到我的页面的顶部。

jQuery hash 插件

jquery.hash.logo

URL中的hash,也就是网址井号后面的部分,其实是一块宝地,它能创建浏览历史,也能存储一些简单数据。从Twitter开始Hash被用来定义Ajax内容,虽然如今已被HTML5的pushState所替代。这里介绍jQuery Hash 插件,可以帮助你完成简单数据的存储。

Hash存储数据有什么用

首先传统URL传递数据的弊端是,对搜索引擎不友好,搜索引擎会认为 /example和/example?key=val是不同的网址,然而hash则不同,搜索引擎认为 /example 和 /exmaple#;key=val 会是两个完全相同的网页。此外,用hash存储数据也不必刷新页面。

hash可以作为一种本地临时存储的解决方案,正如cookie那样。可以在url中保存临时的用户状态这是cookie做不了的。例如含有Ajax页面的刷新,就可以直接利用hash存储当前的状态。再例如你可以配合Hashchange监听来完成一些事情。

这算是一个尝试,虽然目前少有人在hash存数据上作文章,但是如果你真的需要,可以用这个插件参考一下。