包含关键字 前端 的文章

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

那就是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标准化交流会,讨论的话题是页面重构的合理化。会上大家都讨论得很热烈,我也在这里做下个人的总结吧。

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.orgRDFa

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

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

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

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

很多朋友都认为关于URL优化方面的工作是后端工程师做的,前端方面注重结构方面的优化就可以了。其实不然,对于请求及DNS请求等等诸多方面,前端工程师也应该在自己能做到的方面给予优化。

下面我就说说我对于URL在前端优化方面的理解,希望大家指正。

首先,第一点,比较“吝啬”,就是使用“c”、“j”、“i”文件夹分别代替我们经常用的“css”、“javascript”、“images”文件夹。如果没有记错的话,这个方法是Zeldman在《网站重构》第一版的时候提出来的(如果记错了,欢迎大家指正),我是比较赞成这个的。当然很多人会说,有这个必要吗?我个人觉得有,虽然这样做或许不会对页面精简带来太大的效果,但是并不会带来任何坏处。

第二点,对于链接到像http://www.example.com/dir/这样的URL时候,记得在最后加上“/”,因为如果你的网站包含目录并使用了自动索引,不加结尾的斜线的话会页面会多一次重定向。(p.s:对于链接到主机名的链接可以不必加)

第三点,就是上面已经提到的重定向问题。这应该是前端最应该重视的基于URL的优化问题,大家应该都有亲身体验重定向时的等待的不愉悦,尤其是第一个请求就是重定向时,用户看到的是一个“漫长”的空白页面过程。所以应该避免滥用重定向,不过很多时候(主要用在跟踪)还是需要用到重定向,当然这也包括服务器的配置方面,不管怎么说,我们还是在我们能做的方面尽量做好吧。

第四点,减少DNS的查找。对与这点,可以主要从增大DNS缓存时间和减少网站内容主机请求数量两点来优化。对于第一点在网站端可以通过DNS的TTL及HTTP的Keep-Alive来设置(虽然这不是HTTP1.1中必需的,但是很多浏览器和服务器都包含它)。当然你在配置中得考虑自己网站的实际情况,确保你的内容和ip不会在你设置的时间内失效。在主机名数量上,减少唯一主机名的数量会减少页面并行下载的数量,基于下面要说的原因,Steve Souders建议网站数据内容分别放在2-3个主机名下是最优选择。

最后一点,将数据内容并行下载。在HTTP1.1规范下,建议浏览器从每个主机名并行的下载两个数据包内容,并且很多浏览器默认都是这样做的(可以打开YSlow对照页面在firefox下的结果),如果你的页面包含较多的图片等数据内容,将其分别放在两个主机名下,整体的下载时间将会有明显的缩短。但是基于上面一点的原因,不要将内容放在太多的主机下,至于实际几个,可以通过自己的页面情况考虑。

当然,基于URL的优化,在服务器方面的配置(包括CDN,路由等方面)效果明显,但是我们前端在做好其他如页面结构、页面压缩、HTTP请求数量等方面的优化下,进行上述的URL使用优化,肯定能使你的页面有更好的呈现。

本文很多观点来自Steve Souders《高性能网站建设指南》,本文内容比较偏,欢迎大家拍砖。现在像google的分布式还有热门的云计算方面也是URL优化方面极具讨论价值的话题,欢迎大家讨论指教。

第一句话,我得说:雷军是我非常敬佩的人。

因为老家在乡下,没有很好的互联网环境,但是对于向我这样依赖互联网就像鱼依赖水一样的人来说超过24小时不上网基本很难生活,于是UCWEB陪伴了我寒假的大部分时间。也正因为UCWEB的强大使我免于跑到“乌烟瘴气”的网吧去受罪,基于这点,我先向UCWEB表示感谢!

接下来说说我个人对于UCWEB的想法吧:

UCWEB已经是一款非常优秀的软件,并且我相信在雷军的带领下,UCWEB能成为一款伟大的软件,正如金山WPS一样,或者极有可能超越金山WPS。并且优视动景也极有可能成为像金山一样——甚至超越金山——的伟大的技术公司。

在我周围的人群中,越来越多的人成为UCWEB的用户,并且这些用户也都逐渐成为UCWEB的忠实用户,而唯一的原因是出于UCWEB十分好用而产生的对其深深的喜爱。谁都知道占有用户就是占有了市场,当占有的市场一定之后,拥有资深经验的雷军和俞永福会知道将它变成真正有用的东西的....

这不是主要的,重要的是UCWEB已经拥有强大的技术支持,并正不断的吸引着技术人员。UCWEB的成功,技术起到了很大的作用,举例说其页面压缩技术使用户体验到了实在的好处。我们看到的是UCWEB低调扎实的作风,创新的技术氛围,加上雷军的个人魅力,已经对技术人员产生了很大的吸引力。而雷军也知道将这些技术体现到产品中,最大限度的使用户能体验到技术带来的实在优势。举例说UCWEB6.3飞跃式变革的UI设计,给用户带来的视觉和交互体验带来的愉悦是很好的证明。

移动互联技术的发展,已经领先竞争对手的优势,优秀的管理和技术人才,UCWEB注定能非常成功。

只是我觉得UCWEB能做的要做的不只是这些,不只是将UCWEB打造成一个手机浏览器,而是应该将UCWEB做成一个移动互联网终端(甚至是一个网络终端)。因为自己的毕业设计本来准备做《嵌入式浏览器的开发》的,所以从那时开始着重关注UCWEB,查看了一些文章之后才醒悟:或许在未来,互联网将真的在生活中(物理程度上的)无处不在。

所以,或许有一天,我们可以在汽车上通过UCWEB看一场足球直播比赛;在下班的地铁上用手机通过UCWEB打开家里的电饭煲。疯狂的想像下,或许那时候Android在这些嵌入式系统上相当于pc上的windows,而那时候UCWEB的作用就是现在互联网上无所不能的Google!

当某天我们再也离不开UCWEB(或许还包括了很多的收购,因为现在很多做手机软件的公司都很小——甚至只是个人在开发,但是其产品都不错),并且不能感觉出它是一款软件的时候,它就真的成为了一款无以替代的伟大的产品!

p.s:作为一名自诩的WEB前端开发人员,很期待UCWEB发布一份面向WEB开发人员的说明文档,以说明其对HTML,CSS,尤其是JS的支持和处理方式。

早两天老师发个通知下来,是中国广东核电集团补招的消息,然后要去广核网站上填写简历,有几个同学去了,说网站要答题,是智力测试的那种,-_-!。然后我刚才去看了下,基于“职业”敏感,打开页面先直接Ctrl+U,然后发现:乖乖~嘻嘻

首先,基于为Firefox讨个公道的原因,批评一下网站验证码部分的设计。页面网址(http://www.cgnpc.com.cn:8002/hrrs/Campus/CampusMain.html

function showAuthCode(e,whichone){
        if (whichone.style.visibility == "hidden"){
            whichone.zIndex++;
            whichone.style.left=document.body.scrollLeft+event.clientX-event.offsetX-3;
            whichone.style.top=document.body.scrollTop+event.clientY-event.offsetY+21;
            whichone.style.visibility="visible";
        }else{
            whichone.style.visibility="hidden";
        }
}

上面是验证码输入框onfocus()的js代码,你说你个验证码到底是给eval robots看的还是给human看的?!

Firefox用户同僚可以直接输入http://www.cgnpc.com.cn:8002/hrrs/imageCode这个网址将得到的验证码填上就可以了。

然后登录,通过对我的鄙视(第一个页面那里我都需要选择“否”)之后就进入了能力测试部分,题目就是汪涵主持的那个什么什么英雄的那个答题节目差不多的题。我就不多说了,直接教大家答题:查看源代码,通过几个frame,再查看源代码(这页的http://hr-exam.cgnpc.com.cn/User/AbilityDo.aspx),你会发现下面的源码(我精简了只留下核心部分):
第3题:0, 2, 6, 12, 20, ( )

<input type="radio" value="0" />A.28
<input type="radio" value="1" />B.30
<input type="radio" value="0" />C.40
<input type="radio" value="0" />D.48

我想稍微有点智商的朋友都知道选哪个了吧!然后再提醒一下用Firefox的朋友,这里提交的时候在IE下会有验证,如果题没有答完会弹出警告框来提示并阻止提交的,然是Firefox下不会提示而直接给你提交,并且不管答题是多久时间都是0。

我以前没有看到过一个程序这样的依赖前端脚本(并且是非标准脚本)来判断和处理敏感数据,并且还是用在大型的公司上(据该程序的官方网站上注明,广东移动也是用的这套系统)

点击下面的连接打开我整理的答案

- 阅读剩余部分 -

下面这张图是在腾讯校园招聘的"招聘行程"页面抓下来的(使用的浏览器是Firefox3):

主要内容是图上标明(3)的地方,但是在Firefox、Chrome、Safari浏览器下,这部分等于是完全不可以见的。同时这里是通过iframe引用的另外一个页面,如果引用的是一个动态页可能还想得通,因为可能为了方便修改数据,但是引用的却是一个html静态页面,似乎就没有必要了。

"返回首页"的按钮设置在了(2)的位置而这里的"首页"又指的是哪一页呢?tencent首页,招聘首页,还是校园招聘首页?在位置(1)的地方你想或许有个回到招聘首页的连接吧?没有!那里就是一副图片。

下面这张图片依旧是Firefox用户的优待:

有趣的是,城市是你无法选择到的,如果你使用的是Firefox浏览器。

招聘虽然没必要做成淘宝/支付宝UED那么cool,或者豆瓣那么的有意思,但是至少要能使用吧?看腾讯招聘中多个职位需要”熟悉LINUX/UNIX操作和开发环境“,而真正在linux环境下的用户却无法到达腾讯,因为他们通向腾讯的大门(招聘网站)是ie only的,而他们却没有ie(如果没有双系统的话)。

今天看了twinsenliang的博客,知道腾讯缺的不是前端人员,他们有很不错的前端人才!

-12月04日