Subscribe: PuterJam's Blog - Note
http://www.pjhome.net/feed.asp?cateID=6
Preview: PuterJam's Blog - Note

PuterJam's Blog - Note



关注互联网~ 关注前端技术~ 激情是成功的必要前提~



Copyright: Copyright 2005 PBlog3 v2.8
 



URI 和 URL的一些研究笔记

Tue,15 Nov 2011 16:08:06 +0800

(image)

1. 关键字回顾:

RFC(Request For Comments) ,RFC文档是一系列关于Internet(早期为ARPANET)的技术资料汇总,于1969年开始发布。它制定了我们很多常见和不常见的Internet的各种文字资料和规范。


URI(Universal Resource Identifiers) 统一资源标识符, RFC 文献1630中定义了它详细的规范(1994年6月)

|- URL(Uniform Resource Locators) 统一资源定位符,RFC文献1738中定义了它详细的规范(1994年12月)


URI的规范中,资源描述文字,只允许使用字母,数字,安全字符,特殊字符,和转义字符

转义字符在URL中规定是使用%和两个hex进行表示,所以也就是为什么浏览器的form post会自动进行转义成%xx的关系而不使用unicode常用的%uxxxx(同时ECMAScript v3也不推荐在js中使用escape)。

 

(image)

但是值得注意的是在URI中,空格是作为保留字的,所以URI规范中空格被辅以一个快速标记符号(short hand notation)来进行标识,就是我们看到的+号。所以在php中提供的urlencode方法是为了把字符串转换成URI规范用的, 保留空格转换成+号,可以模拟出浏览器form post的结果。

 

2. 说说 URL

URL 其实是 URI 中的一个子集,URI是一个很宽泛的定义,而且也在URI的基础上做了自己的特殊规范,例如

(image)

另外 URL 中把 # 规定成锚点是用来定位使用,使用了URI规定的保留字中的一个字符。

当然URL的escape也遵循了URI的规范使用 %和两个hex的格式。

值得注意的是URL的保留字和URI是不一样的,这些字符都是有特殊意义的

(image)

有没有注意到空格在里面?在URL规范中,空格只是认为不安全(unsafe)的存在,因为可能会因为排版和打印关系,可能会被忽略,所以URL中是需要把空格转换成%20的。对应的php提供的rawurlencode 方法是用来把字符串转换成URL的标准。

JS中的 encodeURI和encodeURIComponent 对字符的转义,虽然也是按照URI规范转义,但是它并没还有转换空格成+号,而是%20,后者会把URI的保留字; : / ?也进行转义。为什么浏览器和流行的server遇到 “ “,%20,+ 都会转换成空格?其实是为了更好兼容URI标准。

其实很多流行的http server都已经根据标准自动把url进行decode后给到后面的CGI进行处理,而我们自己的server很多时候需要开发来对这些进行decode。如果对这些标准不了解就很容易在decode的时候使用错误的decode手段。

而unicode目前使用场景最多的是在我们的脚本语言和页面展示中,为了支持更宽的字符集,用一种统一的编码来规范处理文字而使用,浏览器会根据资源的定义(charset) 对目标的文字先进行unicode转义后再进行统一的处理,这样就可以保证一个utf-8 的页面也可以同时支持请求GB2312的资源,而不会因此显示出错。

 

3. 附件:

除了URI和URL以外,还有一个不太流行的URN(Uniform Resource Name), 有兴趣的同学可以自己研究:P,它同样也是属于URI的子集。




微软出品 Html5 的吃豆人

Thu,21 Apr 2011 11:00:02 +0800

(image)

Html5 游戏开始初露锋芒,在终端上渐现优势的Html5 game 或许瞄准了一个非常号的平台。微软的加入更加让Html5的普及加上更多的动力。

看看微软做的html5游戏吧,这个在FC上的经典游戏,也跨平台到了HTML5上,不过借助网络的力量,这个版本的吃豆人可以自创关卡哟~

这个游戏由澳大利亚的网页游戏工作室Soap Creative开发,发布于微软的MIX11开发者大会上。

使用 Opera firefox Chrome IE9 等浏览器都可以玩哈~  猛击这里游玩

(image)

(image)




自己做的一张壁纸

Sat,13 Jun 2009 02:25:51 +0800

(image)

 

(image)

 

QZFL是团队自己开发的一个框架库。 做一张壁纸练练手,不过fireworks在处理模糊和大面积渐变的时候还真的比较吃力,效果还不好。 也只能怪自己没好好学PS了。




safari 4.0 欢迎动画的秘密

Wed,25 Feb 2009 10:23:24 +0800

http://www.apple.com/safari/welcome/

这个safari 4.0的欢迎动画, 页面虽小但是确是一个包含了很多新技术的展示页面.

我们来看看都用了那些新元素.

 

1.html 5.0 的视频和音频支持

(image)

(image)

2. css动画, 动画的构造师

(image)

http://images.apple.com/safari/welcome/styles/safari.css

通过这些新技术,给我们带来一小段很震撼的动画效果演示,




Internet Explorer 8 User-Agent

Sat,10 Jan 2009 11:24:07 +0800

(image) ie8 增加了兼容模型,当我们选择不同的兼容模型后,ie8的userAgent(下简称UA)就会发生变化,UA里的 MSIE 版本号会有直接的变化。为了可以让开发更加容易判断浏览器类型。ie8在UA里增加了 Trident 的标示.

 

先扫扫盲,Trident 是什么?

大家都知道TT,Maxthon用的是IE内核,但是IE的渲染引擎是什么呢? 和firefox,safari一样,浏览器是有自己的渲染引擎的,Trident 就是IE的渲染引擎,他是在IE4.0开始成型的。不过 Trident 这个名字没有Gecko/Webkit那么响亮,这个有点可惜。

更多 Trident 的信息: http://en.wikipedia.org/wiki/Trident_(layout_engine)

 

以下内容来自IETeam: http://blogs.msdn.com/ie/archive/2009/01/09/the-internet-explorer-8-user-agent-string-updated-edition.aspx

 

IE8 on Windows Vista (Compatibility View)

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0)

IE8 on Windows Vista

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)

IE8 on Windows 7

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)

64-bit IE on 64-bit Windows:

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Win64; x64; Trident/4.0)

32-bit IE on 64-bit Windows:

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0)

 

不过判断ie8,舜子比较喜欢用 var ie8 = !!window.XDomainRequest; :P




CS193H: High Performance Web Sites

Thu,08 Jan 2009 11:40:24 +0800

(image) Steve Souders牛人的性能优化的演讲PPT

http://cs193h.stevesouders.com/




safari xPath的Bug

Tue,30 Dec 2008 17:26:08 +0800

空间在safari里经常时好时坏的,追查了问题的根源,发现是safari对xPath解释的时候有Bug.

(image)

这段代码里,safari使用XPathEvaluator经常没事返回一个underfined.

不过这个问题在 webkit 已经得到修正了。

为了解决这个问题,改用了querySelector来修正,而且接口的使用也简单很多了.


(image)




浏览器测试也疯狂 on Mac

Tue,30 Dec 2008 14:57:48 +0800

之前发过浏览器派对~~的文章,主要分享了一下win下的浏览器。有朋友问到mac系统有没有类似的测试,其实我们是有关注mac系统的,同时mac系统做开发和web测试比windows的体验好太多了。(和mac有血缘关系的Linux desktop除外,至今觉得这个系统还不是给人用的)


(image)

目前mac上浏览器测试用到的一些浏览器,严格来说不是所有工具都是浏览器。其实LittleSnapper是一个截图工具,只是里面内嵌入了一个webkit, OmniWeb是一个速度很快的浏览器,雷区Minefield是firefox的测试版,Fluid是一个把web转换成应用程序的工具,也是内嵌webkit。 底下3个都是虚拟机提供但是个真实环境的ie三个版本。

mac系统上webkit内核运用广泛。好比windows下的ie控件。




[简译]web开发的责任

Tue,30 Dec 2008 11:00:22 +0800


(image)
John Resig 在他的新文章指出,给浏览器做一个好的bug报告者也是web开发的一种责任

http://ejohn.org/blog/a-web-developers-responsibility/
 

做为Web开发,我们都能发现浏览器的很多Bug,但是我们有没有给他们反馈这些bug?还是我们默默忍受,用一些极端的方式解决呢?

浏览器改进了,其实对开发对用户都是一举两得的。

The solution to helping browsers is two-fold:

1) Every time you find a browser bug, file a bug report to the respective browser.

2) Actively test your sites in the latest builds of the major browsers.


帮助浏览器解决问题是一个一举两得的事情:1)当你找到一个浏览器的Bug,我们需要给个别浏览器提出Bug报告,2)积极地跟进和测试每一个Latest Builds 版本浏览器。

 

如何提交一份好的Bug报告?

没个浏览器都有提交Bug报告的地方地址如下:

1.发现问题后,我们就不要闷不作声,问题解决后也给相应的浏览器提交一份Bug报告

2.提交的报告需要分类的,例如:要明确是Dom的问题,还是渲染引擎,脚本引擎的问题

3.同时,我们还需要提供简洁明了的测试用例,没有测试用例开发不能很快得从你的讲述中明白Bug的原因

4.定期检查你的Bug有没有被修复

 

如果提交的Bug报告被拒绝怎么办?

通常有两种情况会拒绝:1)这不是一个Bug,2)这个Bug无法重现

如果拒绝后,你还坚持这是浏览器的Bug,我们可以选择辩论(通常以评论的方式进行)来和开发讨论这个Bug的原因

这里有些辩论的例子

Canvas arc() with radius of 0 throws exception

Out of Memory Error with .split("") due to large number of live objects

querySelectorAll NodeList Exception

Implement .children

 

获得最新版本的浏览器(Latest Nightly)

测试你的Bug是否真正解决

Firefox Nightly Release

WebKit/Safari Nightly Release

IE 8 Betas, IE 8 Weekly Builds (需要微软的邀请才能获得)

Google Chrome Nightly Builds

Opera Desktop Team Blog




浏览器派对~~

Sun,21 Dec 2008 17:21:37 +0800

为了进行浏览器兼容,我们需要关注每一个浏览器,甚至每一个浏览器的版本之间的差别, 以及不同操作系统下不同浏览器的差别。

(image)

俺windows下的所有浏览器…