使用geolocation API定位你的访问者位置

作者: 阿肆 发表时间: March 8, 2010 分类: WebBuild 2条评论

今天要说一个跨省的好东西玩玩。

那就是geolocation，W3C对geolocation的解释是“defines an API that provides scripted access to geographical location information associated with the hosting device”。Firefox从3.5起就支持geolocation了，习惯赶时髦的opera也发布了一个支持geolocation的版本，几天前Chrome dev 5也正式支持geolocation了。如果你的浏览器被鄙视了也可以使用google gears的Geolocation API 曲线救国来玩（关于这一点请参考JerryQu同学早一段时间写的文章）。于是记录和朋友们分享下。

如果你有兴趣可以使用上面提到的浏览器点击这里看个简单的demo。

简单说下前端的实现吧，主要代码如下：

function displayPosition(position) {
    //得到两个值：position.coords.longitude(经度)、position.coords.latitude(维度)。
    /*任意鞣虐得到的经纬度信息来展示你想要的样子吧。
    */
}
navigator.geolocation.getCurrentPosition(displayPosition);

geolocation的原理就是收集你上网的终端设备的某些信息发送到特定的服务接口用来查询以获得你的地理信息，如果你是使用的是无线wifi上网的方式，发送的信息如JerryQu提到的一样，大致如下（Firefox下的抓包）：

post http://www.google.com/loc/json
post_data='{"version":"1.1.0",
            "request_address":true,
            "access_token":"2:OLzIuqa-P8tZYOpu:Gu-LV8OcMFK28CVE",
            "wifi_towers":[
                {
                    "mac_address":"00-23-eb-b7-ef-70",
                    "ssid":"abc","signal_strength":-45
                },
                {
                    "mac_address":"00-23-eb-b7-ef-72",
                    "ssid":"abc_Guest","signal_strength":-48
                }
                ]
            }=';

返回的信息类似如下(可以查看我通过curl脚本模拟的数据 http://www.ivershuo.com/did/geolocation/loc.php)：

{
    "location":
        {
            "latitude":40.0475799,
            "longitude":116.2947221,
            "address":{
                "country":"China",
                "country_code":"CN",
                "region":"Beijing",
                "city":"Beijing",
                "street":"Tangjialing Rd"
                },
            "accuracy":278.0
            }
        }

可以发现firefox也是使用的google的loc接口，如果你提供的access_token值为空或者是错误的在respone的时候会给你返回一个正确的access_token（该值是2周有效的）。wifi_towers包含了你的wifi信息数组用来判断你离热点们(?)的距离等信息。如果你使用的是有线上网的方式会发现传送的wifi_towers数组是空的，但是也会返回地理位置的值，应该是通过ip来返回的（因为我使用服务器脚本去请求该接口的时候返回的是服务器所在地的地理信息），所以偏差很大。现在还不知道是不是可以传送gps数据，有条件的同学可以试试在android手机上验证可以使用gps数据。

不过照前面的demo来看，就算是wifi的方式得到的位置信息还是有一定的偏差（这中间也有不同地图服务的定位信息的偏差），但是比ip获得的位置已经精确很多了。对位置信息精确度教高的web应用可以试点应用玩玩。

回到开头的那句话，大家不要担心跨省，因为浏览器在发送这个信息的时候会先要获得你的授权的。

p.s1：要使用geolocation：Firefox浏览器需要保证about:config中geo.enabled的值为true，chrome dev需要带参数“"--enable-geolocation"”启动。

p.s2：如果你也想构造数据请求google的loc接口，需要保证数据是以application/json的格式请求的。

页面重构合理化讨论（第三期WEB标准化交流会总结）

作者: 阿肆 发表时间: December 27, 2009 分类: WebBuild 2条评论

昨天参加第三届WEB标准化交流会，讨论的话题是页面重构的合理化。会上大家都讨论得很热烈，我也在这里做下个人的总结吧。

WEB标准化交流会在北京已经成功举办了三届，首先感谢这三期以来积极参与讨论的参会者，感谢身边网和百度UXday的场地支持，感谢W3C中国、简单网、buleidea、谷歌中国软件部、百度FE及WED团队的支持。我们也希望更多的前端爱好者参与到讨论会中来，共同讨论和推广WEB标准。

好了，回到昨天的讨论的话题吧。先从DTD开始，DTD其实主要是告诉终端你的doc是什么type的。就好像在入校之前你会告诉学校你的性别以方便安排你到男宿舍还是女宿舍一样，不写DTD就留给了浏览器一个“猜”的任务，这样其实是比较危险的，很多情况下你不知道浏览器会怎样来处理。假如春哥入学不写明性别，就可能有分错宿舍的危险。接下来讨论的是通过W3C验证的必要性，大部分同学观点比较明确和统一：通过W3C验证至少可以去除一些基础的嵌套错误。就像是照镜子吧，脸上有个脏的地方可以通过镜子照出来，有没有前列腺炎是不能照镜子照出来的，所以镜子是必要的，但是镜子不能反映所有的问题。这就是为什么会有医生为什么会有专业的前端开发者。语义化及命名规范以及由此衍生的microformats和RDFa等知识好像在昨天的参会者中研究的同学并不是很多，记得原先初中政治课中有说道规则是为了更大方面的自由。第二期交流会的时候就有提到行业规范化的东西、后来我和月影回来一直觉得可以推动这方面的工作，这个真的还是挺有意义的。社会主义是有可能实现的，关键是不能做空想社会主义也不能在实现的时候变质，我们的国家已经走了中国特色，我们的网页不能再走中国特色，如果你和我一样觉得互联网是当今世界社会主义最好的呈现的话。如果能理解就不会出现div和ul标签泛滥的情况，扯远了~。微格式和twiter的@符的马太效应使我们想到可以做和应该做的还有很多。关于标签更大语义化的工作W3C也在努力，大家应该可以在HTML5中感受到，就有同学提到了实际应用中经常遇到不知道该选择什么样的标签的问题，这也确实是现阶段HTML标签存在的一个问题。当网页内容越来越“丰富”的时候问题将会更加明显化，最开始的网页不是也不支持图片？现在的网页上img标签已经遍地都是了。不过世间万物可以归宗两象五行，又但是W3C曾有想将图片归用object标签来描述是合理的么？这方面可以思考的还有很多。会上有很多同学不太熟悉属性语义和属性值语义方面的东西，特发几个传送门：语义网、microformats.org、RDFa。

交流会的第二个讨论话题是样式合理化的问题。在实际应用中会分项目的性质来把不同的组织，一般小的个人网站就一个样式文件就行了，节省请求。对于具体的应用项目可以分离公共样式+项目特定样式的形式组织，大家的意见也都比较统一。讨论期间rekey有提到公用样式后期的特殊化的问题，相信这也是很多页面开发者遇到的实际问题。其实克军在12号的webrebuild要也有讲到这个问题，关于模块化的组织。核心还是在页面架构方面，好的架构可复用性和单独拓展性都是需要考虑到的，当然在实际项目中还要评估为什么以前的统一模块中有一个或几个要单独加/减其他东西。能不能实现改的功能是我们在架构时候需要考虑的，为什么需要改是产品和设计和我们协作的问题，有一个前期的一致规范是好的。克军上次也有提到接下来HTML要走一段路了，关于模块化方面的东西个人觉得某些方面是可以借鉴js框架的思维。HTML是洋葱的核心（？,见克军ppt），是牵一发动全身的东西，这么重要的东西不能三思而后行么？

第三个讨论话题是素材合理性，更多的涉及到了第一期讨论会网站重构中的文件组织和第二期讨论会CSS Sprites方面的知识。讨论到了图片格式的选择，结论还是大部分选择png-8、gif、jpg这三种格式，按需所取。比较理想的是期间讨论了图片压缩的话题，本来我们上周自己的组内也讨论了这个话题，两次讨论得到的结论都是压缩无止境，呵呵。其实素材管理很有讨论性的是图片管理和缓存方面的东西，我也很想听到各个公司对于这方面的实战经验，因为到会的有谷歌、微软、新浪、百度等大公司的前端，各个公司的部署肯定有很多不同，很有交流讨论价值，不过由于时间原因还是没来得及讨论。

很高兴在twitter直播上码头同学有提到“认为要做好页面重构的合理化最重要的是前期项目规划的合理化”。这其实是我一直在等待的答案。建筑结构工程师和只会砌墙（切图）的建筑工人，你自己怎样定位？知道这一点你就知道以怎样的态度来思考你在干的事情。

期待下一次的交流会，如果你也一样的话，请留意w3ctech官方网站，我们将在每月的最后一个礼拜的周六聚首讨论。更多信息可以follow我们的twitter：http://twitter.com/w3ctech或加入QQ群：46077068。

猥琐地实现域名转发

作者: 阿肆 发表时间: October 19, 2009 分类: WebBuild 8条评论

发现很久没有写东西了，因为越来越懒了。

早两天终于将域名从比较垃圾的阳光互联转出到Godaddy了，比较兴奋，并且终于可以添加SRV记录了，hoho。

不过因为天朝的强大，域名转发功能被X了。

国内的某些DNS解析提供商也禁用了域名转发。

一般的朋友会使用强大的htaccess来做重定向，可是因为我觉得写htaccess比较麻烦，又为了给不支持htaccess的朋友提供方面所以使用php来重定向，使用xml来存储，这样没有方便没有数据库的朋友。

有需要的朋友可以在这里下载，有需要修改的加了注释

有几点说明下：

  1. 将文件上传到你的空间，绑定你想转发的域名到这个空间上
  2. 没有使用登陆验证，请修改a4.php这个文件名
  3. 同时如果你不想让别人看到你哪些域名在使用转发，修改xml文件名，Linux机修改其属性为777
  4. 使用robots文件防蜘蛛暴漏你的添加域名的文件地址（像Godaddy就强大到给你生成sitmap提交到google）
  5. 如果你的空间和域名都支持泛解析，那就更乖乖了

懒人工具，提供给和我一样懒的朋友。

 

 

记录IE下一个bug，label下的图片聚焦表单元素失效

作者: 阿肆 发表时间: August 20, 2009 分类: WebBuild 8条评论

应该有很多朋友已经发现过这个神奇的BUG，此BUG在IE5.5-IE8下通吃，就是当label中是图片元素的时候，无法通过点击该图片来激活绑定的表单元素，请用IE看这里>>

已有朋友提供使用添加元素+背景图+绝对定位遮盖的方法来解决这个问题，请看这里>>

这种办法在使用中可能比较麻烦，因为图片极大的可能性是不一样的，并且一般背景图和页面图片会存放在不同的文件夹甚至服务器上，加上设计者的权限等乱七八糟的问题，可能麻烦性更大。

还有一种方法就是可以使用js来实现，比较简单，虽然在无js支持的情况下会失效。我想的是：js都不支持的浏览器也不在乎多这点可访问性的牺牲。（接受异议）

基本代码：

<script type="text/javascript">
        var lb=document.getElementsByTagName('label');
        for (i=0;i<lb.length;i++) {
            lb[i].onclick=function () {
                var lbfor=this.getAttribute('for')?this.getAttribute('for'):this.getAttribute('HTMLfor')+'';
                document.getElementById(lbfor).click();
                document.getElementById(lbfor).focus();
            }            
        }
    </script>

可以通过这里查看>>

事件处理比较简单，你可以自己修改针对不同类型的表单元素使用switch来触发条件，对于checkbox框再来判断是否选正等，我省略了这些，就在js前加了IE判断。

两个小插曲:

  1. 在IE下使用getAttribute获得的值类型是Object，需要处理下，关于这点请参考rank的这篇文章
  2. 感谢屈屈提示在IE8以下版本的IE无法直接通过some.getAttribute('for')的方法获取到for的值，因为for是保留字，类似的还要class，需要使用HTMLfor。

使用Msg2phone通过网页免费发送短信到手机

作者: 阿肆 发表时间: June 1, 2009 分类: WebBuild 19条评论

上次偷米饭童鞋写了个WP有新评论就发送短信提醒的插件，借助的是移动139邮箱的“邮件到达提醒”，于是发现可以通过139邮箱的这个功能实现直接通过网页发送短信到手机，并且还是免费的。

无聊中我就写了这个：Msg2Phone，这个有什么用呢？首要作用就是我写着玩玩，呵呵，当我不在线有人需要找我的话可以通过这里发短信给我，而我不必告诉互联网我的手机号码。如果你有和我同样的需求，也可以试试。

 

下面是需要设置的地方：

打开你的139邮箱，点开“邮件到达提醒”设置页：（如没有注册的朋友需要先注册。顺便说一下，139邮箱使用的是和网易邮箱同样的Coremail邮件系统，对于大部分朋友来说应该比较容易上手）

sz01.jpg

在设置中，需要开启邮件到达通知，手机接受时间依自己情况设置，发送方式推荐使用350字长短信。

sz02.jpg

然后你就可以打开Msg2Phone，输入你的手机号码进入下一步，这里会发送一个验证短信到你的手机，填入验证短信（5位数字母和数字的组合）进行简单的设置就可以了。如果长时间（10分钟之后）没有收到验证短信，可以再次输入你的手机号码，会有提示消息，点击重发验证码的链接就可以了，以后需要修改信息也可以通过这里。

 

可以借助139邮箱的这个功能实现诸如手机验证，Twitter手机提醒等服务。不过还是需要提醒朋友们不要随意在网上填写你的手机号码，就算是上面的Msg2phone，如果你质疑我的RP，也不要注册。

正式投入Typecho怀抱

作者: 阿肆 发表时间: May 29, 2009 分类: WebBuild 8条评论

其实接触和使用Typecho也有一段时间了，只是因为一直在等官方插件文档和最近忙于毕业设计一直没有正式将博客转换到Typecho。如今Typecho已经出到0.6了，70原先就说0.6发布之后主要任务就是尽快出插件开发文档，并且我的毕业设计也已经做完，现在等着答辩，所以就将博客正式转到Typecho了。

之前就已经做好了皮肤，数据转换有现成的插件，加上之前插件也使用得不多，所以很轻松就转换过来了。之间自己写了个lightbox2插件，不是很完善，如有需要的朋友可以联系我。

feed会重复输出几篇，有订阅的朋友，不好意思了。

下面推荐几个IM群，有喜爱Typecho的朋友可以加入交流：

  1. Typecho)))：29515206 （旺旺群）
  2. Typecho开发交流：8110782 （QQ群）
  3. hello typecho：1466531 （QQ群）

再发一个Typecho主题：IVAppleWeb

作者: 阿肆 发表时间: April 18, 2009 分类: WebBuild 6条评论

继续发一个Typecho主题，IVAppleWeb。素材来自templateworld。


IVAppleWeb


下载地址：IVAppleWeb.7z 简单的配置在setup.php文件，相关配置说明请参阅这里。


下次尽量添加后台插件来实现这些配置，大家稍等一段时间，这段时间要搞毕业设计，还有两门重修(-_-!汗，以前没过)，我的php又很菜，等官方出插件开发文档。


演示得等70哥帮写个插件，有喜欢这个主题并使用的朋友可以帮忙给个演示地址，谢谢！


有问题的朋友留言或者Gtalk我吧。

发布一个Typecho主题:IVLineBox

作者: 阿肆 发表时间: April 10, 2009 分类: WebBuild 9条评论

这段时间有很多朋友将博客程序换到Typecho了，所以关注了下这个“年轻”的博客程序，觉得很不错，所以有将博客换到Typecho的打算，于是先将这个博客的主题转换过去。

暂时将这套主题命名为:IVLineBox（IV是阿肆的“肆”的意思，:)）。有喜欢这种简单线盒模型的朋友可以下载，外观演示就是和阿肆的博客一样，演示地址：http://beta.ivershuo.com。下载地址：IVLineBox

下载完成之后修改一下setup.php文件中的某些变量就可以直接定制你博客的一些个性信息，具体修改帮助如下（建议：修改之前先备份）：

$page_title_before&nbsp;=&nbsp;true;

如果你的博客title需要保留Typecho默认样子，修改这里为false；如果需要像阿肆的博客这样将文章/页面/分类标题放在博客名之前保留这里为”true”，并且修改/var/Widget/Archive.php文件的852行如下：（Check到最新的SVN已不再需要修改Archive.php文件，没有使用SVN更新的朋友可以到主题下载帖子下载最新的Archive.php文件）

&lt;del&gt;echo&nbsp;implode($split,&nbsp;$this-&gt;_archiveTitle)&nbsp;.&nbsp;$split;&lt;/del&gt; $h1Plus&nbsp;=&nbsp;'阿肆的个人博客';

将这里的文字换成你的博客需要的副标题。

$sentence&nbsp;=&nbsp;'Yield&nbsp;to&nbsp;Nothing!';

增加一句话博客描述，可以见阿肆的博客上的表现。

$rss&nbsp;=&nbsp;'http://feed.ivershuo.com/shuo';

你的博客RSS地址，如使用系统默认地址，将这里替换成$this->options->feedUrl()；并且去掉单引号。

$gtalk&nbsp;=&nbsp;'tk=z01q6amlqj6&hellip;&hellip;&hellip;';

如果你的博客也想放置一个像阿肆的博客右边这样一个gtalk聊天按钮，将这里的字符串换成你自己的gtalk在线聊天连接代码，获取得这段字符串方法：打开这个页面，在下面的代码框找到URL地址中的“/Show?”之后及第一个“&”符号之前的所有字符串复制粘贴即可。

$twitter&nbsp;=&nbsp;'I&amp;#146;m&nbsp;...|ivershuo|6';

如果你想将你的Twitter更新放置在博客上，竖线分隔开的三个参数分别是：显示标题、Twitter帐号名、显示最新更新数目，每项均不可以少。如不要显示清空或者注释这条。

$share&nbsp;=&nbsp;'My&nbsp;Reader&nbsp;Share|00916762244891282327|5';

如果你要将你的Google reader分享项目显示在博客边栏，竖线分隔开的三个参数分别是：显示标题、google reader的分享id、显示分享的条目，每项均不可以少。如不要显示清空或者注释这条。google reader的分享id或者办法：打开“共享项目”页面，点击打开“向您的网站或博客添加剪辑”窗口，得到的HTML代码，第二段js的src地址中/user/和/state/之间的数字值就是这里需要的。

$links=&nbsp;'links';

友情链接页面名，这里需要PageToLinks插件的支持，如没有装这个插件，请注释这条

$copyright_owner&nbsp;=&nbsp;'ivershuo.com';

博客版权所有者。

$copyright_date&nbsp;=&nbsp;'2005-2009';

博客版权时间段

$copyright_cc&nbsp;=true;

是否CC版权，如cc版权显示版权信息参照阿肆的博客；如完全版权，修改为false，则显示“All Rights Reserved.”

$miibeian&nbsp;=&nbsp;'湘ICP备07002569号';

备案许可证号

$gg_analytics=&nbsp;'UA-258263-4';

Google统计站点id，可以在网站统计列表页面的网站名后面得到这串以“UA-”开头的字符串

$fuck_ie6=&nbsp;true;

将这里设置为True，如果访问者使用的是IE6及以下版本IE浏览器，则显示WebRebuild.org发起的友好升级IE提示。站在大多数网站开发者的立场，强烈建议您保留这里为true，这是您对互联网的贡献，谢谢！

以上变量均可以清空或者注释，单引号之内的值局可以清除，布尔值局均可以设置为true或者false。注意单引号之内的值不可以包含单引号，如需要使用，请用&#146;代替。

并且我将顶部的导航加入了分类导航，如不需要可以对照注释删除header.php文件中相关代码。博客字号也较原主题增大了一号。修正了原结构诸多不合理的地方。欢迎大家提意见。

还没有很认真的研究Typecho这款优秀的博客程序，主题CSS文件还有待细化，并且正在研究将这些变量集成到后台，所以主题暂时发布版本号定为0.9.0。

主题的HTML代码是可以通用的，你可以直接修改CSS代码来创造自己另外一套主题，我也会在有时间的时候再多写几套主题。

页码：

  1. 1
  2. 2
  3. 3
  4. 4
  5. ...
  6. 8