Follow me on GitHub

建站❤编程

调用Google Maps API实现HTML5 Geo定位

HTML5进入人们视线的时间并不长,但我们已经能看到浏览器变得更强大,应用也变得越具智能。充分利用HTML5的新特性能使我们的生活更加便利。这儿就有一个例子——我们结合HTML5技术和地图应用接口来实现定位。

该应用可兼容的浏览器包括:Opera,Chrome, FireFox,Safari。以及……偶滴U8110自带浏览器(Safari Mobile)上测试通过。

允许 More >

15个提高WordPress博客速度的技巧[译]

网络上关于WordPress提速优化的文章已是数不胜数,这里也译一篇来凑凑热闹,毕竟网站的优化在怎么提也不过分,大概没有人会嫌自己的网站加载过快吧。

Slow WordPress Blogs turn everyone off – Google doesn’t like sites that load slowly, and readers have to impatiently wait to read your brilliant material. In that waiting time, they might even click that back button. Fast-loading websites and blogs are a necessity in the impatient information age.

反应慢的WordPress博客会让访客们扫兴—Google也不喜欢加载速度慢的网站,读者常常为了一览你的风采必须经历无奈的等待。在等待的过程中,他们甚至可能点击关闭按钮。博客网站的加载速度在这信息爆炸的时代显得更加重要。 More >

JavaScript 框架

由于不同 Web 浏览器所支持DOM标准版本不尽相同,与 HTML 和 CSS一样,不同的浏览器有不同的 JavaScript 实现方式。这使得早期 JavaScript 代码实现跨浏览器兼容成为一场噩梦。

就拿网站右下角常见的浮动提示框举例:

  1. 首先,必须通过判断getElementById() 方法存在与否来决定是用document.getElementById(“floater”).style还是document.floater方法进行浮动框定位;
  2. 要想把浮动内容固定在右下角,脚本需要知道可用页面的宽度和高度,这时又得考虑不同浏览器上访问这些对象的方法也存在window.innerHeight和document.body.clientHeight的差异;
  3. 针对上下或左右滚动页面时浮动内容也需要随着页面移动,又需要考虑是用window.pageXOffset方法还是document.body.scrollLeft方法。。。

而使用JavaScript 框架就清净多了,比如jQuery就有专门的Floatbox库扩展,一句$.floatbox({content: “xxxx” );就能搞定,要是心情好还可以考虑是否加入渐变效果啥的,jQuery库在众多流行的 Web 浏览器版本上进行了可靠性测试,我们可以放心地使用这些框架,产生的JavaScript代码将会在不同浏览器和平台上以类似的方式工作。 More >

输入Email查看Gravatar头像的小工具

当你到任何一个支持Gravatar的网站留言时,这个网站都就会根据你留言时提供的Email地址为你显示出匹配的头像。当然,这个头像,是需要你事先到Gravatar的网站注册并上传的,否则,在这个网站上,就只会显示成一个默认的头像(如右图)。具体介绍见这篇文章

下面介绍下本文的主角:这是一个可以查看email所对应Gravatar头像的小工具,用浏览器打开后,输入需要查询的email,点击旁边的按钮提交后即可 More >

jQuery实现背景图填满屏幕的代码

拾贝电台是一个收集了众多优秀电台资源的广播频道聚合器,其功能模块较少,无非播放控制和播放列表等几个窗口。为了不至于留下太多的空白区域影响整体美观,设置了可拉伸的背景图片。这里把实现该效果的代码贴出:

用jQuery实现背景拉伸,自适应窗口的调整而改变大小。该段代码应该放在网页内容之前,最好是紧跟在<body>之后,这样可以避免页面加载时出现太突兀的情景。

JavaScript计算客户端浏览器窗口尺寸比较简单。第一个模块的代码做一些初步的计算,判断图像比例,浏览器宽度。

再使用jQuery来操作相应节点的CSS规则改变图片显示,以保持图像的的比例不变 适应浏览器窗口的调整。 More >

HTML5的设计[部分翻译]

又见HTML5,对HTML5功能特性、标准和概念的绍已是不绝于耳,正如被炒得如火如荼而又让人云里雾里的“云计算”概念。

不过这个演说的侧重点是html5的设计,而不是用html进行的设计。就像横空出世的大英雄,大家在对他的英雄事迹津津乐道后,总会有人想要关心英雄的身世(参考阅读:The Internet: a historical encyclopedia)。

.

More >

移动设备浏览当前页