趁着中午休息，发篇文章。不管怎样，从周末开始折腾重构爱墙昨天上了（地址：http://lovewall.js8.in，老版：http://love.js8.in），昨天由于局域网的DNS没有更新，所以也没访问，今天看了下还算比较正常，就是空间速度有点挫，国外的，你懂的！

新版爱墙程序变化：

1. 程序全部重构，php采用公司同事开发的rareMVC框架
2. 前端重写，采用html5+css3，所以推荐使用chrome或者FF3.6+体验
3. javascript代码全部重写，采用了自己的简单框架YQ（暂命名）

4. 添加表情功能
   为啥重构爱墙？：

5. 熟悉php面向对象开发，MVC开发

6. 实践html5+css3
7. 测试自己的框架YQ（源码）
8. 打发周末时间
   这个版本的爱墙程序兼容IE6+，chrome，Firefox，主要是练手用的，不再继续维护开发。此程序前端代码全部未压缩处理，欢迎观摩指导

ps：今天看了下浏览记录，发现谷歌搜索“jsonp”我的一篇文章竟然排了第一，甚是欣慰~O(∩_∩)O哈哈~

W3C 中新添加了一个名为 Geolocation的 API 规范，Geoloaction API的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来简单的获取用户的地理位置信息。本文中将简单介绍下W3C的Geolocation。

Geolocation在javascript的navigator 对象中，我们可以通过 navigator.geolocation 来使用它。不支持 geolocation 的浏览器并不包含这一对象，那么可以通过下面的代码来做能力检测，对不同的浏览器做不同的处理。

if (navigator.geolocation) {
        alert( ' 浏览器支持 geolocation ' );
}else{
        alert( ' 浏览器不支持 geolocation ' );
}

在访问 geolocation 对象时，即调用 geolocation 下面的方法时，浏览器会弹出提示，询问用户是否许可网站提供的位置服务，只有在得到用户许可过后，服务才会继续，否则将被停止，在稍后你将会了解到，我们能够捕获到用户拒绝服务的动作。下面这张图分别是 Chrome , Firefox 和 Opera 在初次访问 geolocation 时，给用户的提示：

常用的navigator.geolocation对象有以下三种方法：

1. 获取当前地理位置：navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
2. 持续获取地理位置：navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)

3. 清除持续获取地理位置事件：navigator.geolocation.clearWatch(watch_position_id)
   其中success_callback_function为成功之后处理的函数，error_callback_function为失败之后返回的处理函数，参数position_options是配置项，由JSON格式传入：

4. enableHighAccuracy：true/false，它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候，浏览器会尝试启用这些设备，默认指为 true，在这种情况下，浏览器会尽可能地进行更为精确的查询，简单地说，如果用户有可用的 GPS 设备，会返回 GPS 设备的查询结果，IP 是最后的选择，对于移动设备来说，网络接入点(基站)或许成为另一个选择，对此我还没有完全了解，但根据测试，即时没有任何额外功能的手机，也能够得到更为精确的查询结果。

5. maximumAge：单位毫秒，告诉设备缓存时间，主要用于设备的省电或者节省带宽方面。
6. timeout：单位毫秒，超时事件，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。

例如下面的代码：

var geo=navigator.geolocation.getCurrentPosition(geo_success, geo_error, {enableHighAccuracy:true, 
    maximumAge:30000, 
    timeout:27000});

网站的访问速度和性能对用户体验来说是非常重要的。如果你的网站访问非常的慢，你不仅会失去用户，而且更可怕的是你会失去潜在的客户。像Google这样的互联网巨头也会把网站访问速度作为排名的一个参数。因此当你需要优化网站速度时，你需要考虑方方面面，每个毫秒。这里对改进网站性能提出一些基础和普遍的建议。

1、如果可能的话，延迟加载一些内容

可以使用Ajax来按需加载部分内容。比如一个相册，可以在用户浏览页面时先出缩略图，当用户点击了，然后异步请求原图并展示，这样用户如果只需要看几张图片，就不需要等待所有图片都加载下来。这种开发模式叫做延迟加载。
Ajax/Web开发类库如jQuery，Prototype，与及MooTools可以使得延迟加载更容易实现。

2、使用外部JS和CSS文件

当用户第一次加载网页时，浏览器会缓存住外部的CSS和JavaScript文件，所以将javascript和CSS放到外部文件比内联的会好。
使用内联CSS还会增加网页的渲染时间，让所有样式都定义在你的主CSS文件中使得浏览器渲染页面时少做一些工作，因为它一开始就知道所有需要应用的样式规则。另外使用外部javascript和css文件也有助于维护代码。

3、使用缓存系统

如果你发现网站总是连接数据库来查询产生出同样的结果，可能就需要使用缓存系统了。使用缓存的话，只需要生成一次特定的内容而不需要用户每次访问的时候都去生成。缓存系统也会根据配置周期性的刷新缓存。你可以生成静态HTML页，以减小服务器脚本执行的开消，或者使用数据库和服务端脚本缓存系统，比如PHP的加速器，memcached等。

4、避免在html中改变图片大小

如果一张图片原本是1280900px的，但是你需要它显示为400280px的，你应该用图片编辑器，如Photoshop来改变它的大小，而不是使用HTML的width和height属性。

好久没正儿八经的写写js代码了，再不写就生疏了，昨天无意中发现cityhouse的首页幻灯片有问题，于是今天就写了三个幻灯片实例，如果还不会用jquery写幻灯片的可以参考我之前的文章：《CSS+jQuery实现滑动幻灯片实例详解》以及两个jQuery幻灯片实例。

今天的三个jQuery幻灯片其实还是两个，只不过第一种滚动的幻灯片有两种形式：分别是上下滚动和左右滚动。兼容IE6+，FF，chrome等主流浏览器。
效果和淘宝首页的幻灯片效果相同，自动播放时是一直往一个方向前进。
布局方面还算比较简洁，大家可以根据自己的需要添加内容，另外这次的幻灯片加上了文字，其实不光图片可以slider，文字也可以slider一会的。另外加了一点CSS3，就是控制按钮圆角化了（FF3.6+和chrome下有效果）。

截图

教程

有不少wBox的用户反映iframe时候不可以自动撑开高度，今天在无意中看到了司徒正美的一片关于iframe自适用高度的js代码，感觉不错，转载来了。

var adjustIframe = function (id) {
    var iframe = document.getElementById(id)
    var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;
    var callback = function () {
        var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight); //取得其高
        iframe.style.height = iheight + "px";
    }
    if (iframe.attachEvent) {
        iframe.attachEvent("onload", callback);
    } else {
        iframe.onload = callback
    }
}

随着Css3和html5的风靡，越来越多的前端人员开始学习Css3，今天的文章就是来说说前端应该掌握10个Css3属性。 上篇博文提到了《前端必须掌握30个CSS3选择器》，但是对于Css3的新属性，你又了解多少呢？虽然大多数的css3属性在很多流行的浏览器中不支持，但是我们鼓励在前端开发中要学会并且运行这些css3属性，因为这是未来的趋势。 关键是首先确定你是否对各个浏览器之间的细微的差别有所了解，你能肯定的说IE显示的90度的角就不圆滑嘛？这取决于你的决定。但是要永远记住，网站设计不必看到所有浏览器的不同。在文章的最后，我们将显示一个有趣的最终的案例。

1、border-radius

border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。 border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

注意：请在Safari 5 和 IE9浏览器中执行”border-radius”语法。
圆
许多读者也许不会意识到我们可以用这个属性来做一个圆。

也许你已经学会了CSS的三个简单常用的选择器：#ID，.class，标签选择器，可是这些就足够了吗？随着CSS3的到来，作为前端开发者需要掌握下面三十个基本的选择器，这样才可以在平时开发中得心用手。

本文中将综合前端开发中常用的30个CSS3选择器，并且附带了浏览器的支持情况，希望对大家有所帮助。

1、*：通用元素选择器

* {  
 margin: 0;  
 padding: 0;  
} 

*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除默认CSS样式方法

*选择器也可以应用到子选择器中，例如下面的代码：

#container * {  
 border: 1px solid black;  
} 

这样ID为container 的所有子标签元素都被选中了，并且设置了border。

查看演示

兼容性

1. IE6+
2. Firefox
3. Chrome
4. Safari
5. Opera

#ID：ID选择器

#container {  
   width: 960px;  
   margin: auto;  
}  

ID选择器是CSS中效率最高的选择器，使用的时候要保证ID的唯一性。

查看演示

兼容性

1. IE6+
2. Firefox
3. Chrome
4. Safari
5. Opera

.class:类选择器

.error {  
  color: red;  
}  

类选择器效率低于ID选择器，一个页面可以有多个class，并且class可以放在不同的标签中使用。

查看演示

上一篇文章提到了谷歌的ping服务接口，其实国内的搜索引擎百度也有类似的服务，今天就介绍下百度博客ping服务，百度博客Ping服务的详细介绍，请移步：http://www.baidu.com/search/blogsearch_help.html#n7。百度的ping服务也是基于XML-RPC标准协议，但是与谷歌ping服务不同的是百度的ping发送的xml格式不同，我们需要使用string节点包裹内容。

例如：

<?xml version="1.0" encoding="UTF-8"?>
<methodCall>
<methodName>weblogUpdates.extendedPing</methodName>
<params>
<param>
<value><string>断桥残雪部落格</string></value>
</param>
<param>
<value><string>http://js8.in/</string></value>
</param>
<param>
<value><string>http://js8.in/644.html</string></value>
</param>
<param>
<value><string>http://js8.in/feed</string></value>
</param>
</params>
</methodCall>

根据上篇提到的谷歌接口，我们只要改变一下提交的xml内容即可，当然百度ping服务返回的判断也是跟谷歌的不同，也可以做相应的修改，

谷歌博客推出了ping服务已经很长时间了，如果我们的博客是wordpress可以很方便的设置ping服务，但是如果我们的博客不是wordpress，或者我们的网站程序是自己手写的，那么就要自己写RPC代码了。今天断桥残雪分享一下自己写的PHP的XML-RPC代码。在此之前先说说ping服务的好处以及wordpress的ping设置。

配置ping服务，加快收录速度

谷歌的ping服务是一种快速收录的方法，打个比方就是：我们写了一篇文章想要谷歌收录，我们就可以使用ping服务来通知下谷歌，要googlebot尽快来抓取收录。谷歌官方的解释：

通过 Google“博客搜索”Ping API, 用户可以程序化的方式将博客内容的更新通知给 Google“博客搜索”引擎。这对于经常更新博客内容的用户尤其有用。博客服务提供商的管理人员也可以利用此API将其平台上的博客内容变化向 Google 通告，以便 Google“博客搜索”及时抓取来自这一服务提供商的最新内容。为设置对 Google“博客搜索”的自动 Ping 机制，请按照如下所述设置XML-RPC客户端或REST客户端以发送请求。您可以任选一种方法进行通知；两者都将按照相同的方式进行处理。

wordpress设置ping的方法

wordpress自身就带着ping服务，只要我们配置一下就可以了，步骤是：设置→撰写→更新服务。常用的ping服务有以下几个：

http://rpc.pingomatic.com/
http://ping.baidu.com/ping/RPC2(百度的)
http://blogsearch.google.com/ping/RPC2(谷歌的)
http://api.my.yahoo.com/RPC2(雅虎的)
http://api.my.yahoo.com/rss/ping(雅虎的)
http://www.feedsky.com/api/RPC2(feedsky的)

谷歌ping服务的PHP代码

关于RPC的详细介绍可以移步维基百科，谷歌ping服务的标准：

RPC端点： http://blogsearch.google.com/ping/RPC2
调用方法名： weblogUpdates.extendedPing
参数： (应按照如下所列的相同顺序传送)

* 站点名

• 站点URL
• 需要检查更新的页面URL
• 相应的RSS、RDF或Atom种子的URL
• 可选：页面内容的分类名称(或标签)。您可以指定多个值，之间用’|’字符进行分隔。

在css2中允许我们使用media的属性，例如使用screen和print，我也写过一篇关于使用CSS media的print来定义打印网页的样式的文章，关于css2中的media文章，推荐下w3c的。今天来说说CSS3的Media Queries。CSS3中不仅仅可以使用screen和print，而且支持多媒体多分辨率的样式表。

我们先来看下CSS3 Media Queries的演示实例：http://js8.in/mywork/css3media.html，来自于（Web Designer Wall）

Max Width

故名思意，就是最大宽度的意思，例如下面的代码是在宽度小于600px的时候才执行的。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

也可以在link标签里面使用media属性，即下面的写法：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width

跟Max Width相反，是最小宽度，例如当宽度大于900px的时候才运行下面的代码

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}