html5+css3版的爱墙上了

趁着中午休息,发篇文章。不管怎样,从周末开始折腾重构爱墙昨天上了(地址: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哈哈~

使用navigator.geolocation来获取用户的地理位置信息

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 时,给用户的提示:

初次使用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属性。

三种常见jQuery幻灯片(jQuery slider)制作教程

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

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

截图

三种常见jQuery幻灯片(jQuery slider)实例

教程

iframe自适用高度代码

有不少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
    }
}

前端必须熟悉的10个CSS3属性

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

1、border-radius

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”语法。

许多读者也许不会意识到我们可以用这个属性来做一个圆。

前端必须掌握30个CSS3选择器

也许你已经学会了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服务API加快文章收录,秒收不是梦

上一篇文章提到了谷歌的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服务返回的判断也是跟谷歌的不同,也可以做相应的修改,

利用google博客的ping服务接口API加快网站收录

谷歌博客推出了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
  • 可选:页面内容的分类名称(或标签)。您可以指定多个值,之间用’|’字符进行分隔。

CSS3 Media Queries使用方法详解

在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;
  }
}