[浅谈 演示] 你所不知道的HTML - 从 XHTML2 到 HTML5 (1)

[浅谈 演示] 你所不知道的HTML - 从 XHTML2 到 HTML5 (1)

HTML5 出来其实也有很长一段时间了。因为这个那个的原因,在HTML5刚出炉时,我根本就没对它有任何重视。直到有一天突然看到某人搞了个东东,里面用到了HTML5中的一个特性——canvas,才突然意识到:“天哪!XHTML2还没站稳脚跟,就给这小子找到火柴了!” (注:即老赵blog文章中提到的HTML5事件,的确受到了不小打击的……)

在切入正题之前,大家先看下面这个演示:

按箭头键还能使这个多面体旋转哦~

很好玩吧?这个小玩意儿就用到了HTML5的新特性——canvas

这个东东的代码是从polyhedra.org上看来的,并作了小小的修改,使它能适应cnBlogs的博客。而polyhedra.org的代码,则用的是google的开源代码——其实,google maps上的很多效果都用到了这个canvas特性。刚刚出现的HTML5, 其实离你只有一步之遥。

-XHTML2的尴尬

如果你关心过前台开发的新技术,那么你或许会知道,W3C组织在推HTML5之前,准备推的是XHTML2的规范。突然转眼之间又弄出HTML5这么个东东来,究竟是为什么的?

这要从XHTML的目的说起。

W3C制定XHTML的目的,是最终希望将一个web网页的文档结构完全从表现和行为中解放出来,并最终使其成为一个通用的语言——它不仅可以用于构建一个网页的结构,而且可以用来构建一个更通用的文档结构。

这种文档结构的最好例子就是书。一本书有标题(相当于一个网页的title),目录(也就是我们说的导航),章节标题(h1~h6, 以及XHTML2中新定义的h),章节(XHTML2中甚至新定义了一个section元素来表示这个以前在HTML/XHTML中没有的结构),段落(p元素),列表(ul, ol)等等。XHTML的最终目的就是用XML的语法来定义这么一个文档结构的框架。你要写书,只要照着这个框架填内容就可以了。至于这本书由什么出版社出版,多少开本印刷,是不是要做成电子版等等,都不是XHTML2要关心的东东。

这么看来似乎XHTML2是个很好的规范,因为它减少了文档结构和表现/行为的耦合。而任何一个程序员都知道,耦合是越低越好,那么W3C怎么又搞出HTML5这么个东东呢?

其实大家可以想想,既然有书,为什么大多数人还是喜欢逛网站、博客去看一些在书本上都能找到的东西呢?很简单:因为书本有个很大的缺点——缺乏互动性。你不能把书上的一张图片从一页拖拽到另一页,也不能通过书本来和别人交流。一份文档,给你提供的最终实质,就是稳当的内容而已——这就是XHTML2, 只有内容结构。

当然,XHTML2被提出的时候只有2002年,整个XHTML概念成型在2000年左右。那时还是整一个win98的时代,当时的人们估计是万万没想到web application 现在会这么火,只是一心想从设计模式上改进原有的HTML系统罢了。从设计模式上来讲,XHTML2是非常优秀的,但是短短6年间,XHTML2就有些跟不上web 2.0的脚步了。在这个web application大行其道的年代,用户并不会关心你页面采用了如何优秀的设计模式。他们只会关心这个网页是不是够炫,功能够不够好用。因此交互成为互联网应用的关键,而非原来的数据共享。

于是就催生了HTML5这么个另类的东东。

 

未完待续~现在偶先去呼呼了@@

Tag标签: HTML,html5,xhtml2,canvas
posted @ 2008-04-22 01:41 棕熊 阅读(5628) 评论(38)  编辑 收藏 网摘 所属分类: HTML/XHTML标准,又见标准

  回复  引用  查看    
#1楼2008-04-22 02:33 | 怪怪      
呵呵, Canvas并不像想象中那么炫, 去年还是前年末, 我玩Yahoo的pipes还是什么, 就见到这玩意了,也试着做了些demo级的应用,碰见一些问题: 首先是IE不支持, 但是这个好说, 这个可以等待或者呼吁IE做出改变; 或者主动一些, 直接用又老又破旧的VML就覆盖了Canvas的主要(甚至全部)应用, 而且还有附赠品 -____-。



(因为早不关注了,时间久远,下面内容说错勿怪。)



关键在于, Canvas和svg相比, 没有很好的对象模型和响应机制, 使得这玩意更多的象一个鸡肋: 画个图示什么还可以, 实现与矢量图形的互动,xhtml+svg完胜HTML 5(这可不可以作为HTML 5不合时宜的证据呢? :)。 所以LZ大可不必因为这个而遭受什么打击; 即使仅以炫不炫, 是不是实用来衡量, xhtml+svg早就搞定的东西其现实意义也是胜于所谓的html 5的, 比如:




(广告时间, 你的浏览器太慢吗? 想体会更流畅的冲浪感觉吗? 请使用safari 3.1)


http://code.mincus.com/svg/3d.svg">再看看这个


后面这个例子里, 鼠标悬停在不同的图形对象上的反映,使用Canvas如何得到一个可接受的实现呢? 我们需要的响应并非只有mouseover一个, 难道整个模型都要自己从头再来么? 同时, svg本身作为一个独立文档(也可以inline)的时候,是可以直接被重用的, 那么Canvas这种做法的重用, 至少需要额外的工作。


xhtml 2还没有实施就跟不上了, 这也太惨啦。 个人认为xhtml本身虽然更多关注的是文档结构以及实现初步的、较弱的语义, 但是我们实现一个应用时, 又不是只有一个xhtml可用不是? 所以说xhtml跟不上潮流了, 好像Canvas对比xhtml+svg这个例子, 其实是很难成立的; 这是这种可以分离、 组合, 但统一的做法, 既可以保证比如LZ所要求的能力, 又可以保证更良好的正交, 这才是这个规范的价值所在。



实际上, 很多人认为HTML 5不过只是对HTML 4的简单改进, 不够清晰, 缺乏规划(连著名的反微软网站IBM Developer上都这么说),实际上有点倒退的意味; 使劲往一个草稿里塞东西, 即使获得一时的优势, 恐怕也很难长远吧? 相反国内外一些在这个领域比较有研究的, 比如园子里的爆牙齿, 都比较认可xhtml 2.0对1.x的补充; 更何况除了与svg这样的组合方式, xhtml本身也是可扩展的, 即使需要新功能,为什么不在这个框架统一而非要另起炉灶呢?



一些新的、看似有点没原则或者自相矛盾的标准出现, 只能说w3c作为一个平衡利益的伟大组织, 偶尔妥协一下是很正常地, 不用给他们找啥理由~ 毕竟, 如果不向Apple/Opera/Mozzilla等公司屈服, 过两天WHATWG自己单干了, MS又早让他给B4了, 可怜的w3c就要名存实亡啦。 当然啦, 漂亮话和理由总是不缺地, 几个月前号称大盘至少8000点的,不也一大堆说辞吗? 信不信就看咱们自己啦, 至少应该HTML 5的出生地上去看一看; 一直到现在, WHATWG都还是排斥IE的, 在那里咱们可以再次看见白花花的银子。



另外顺便借贵宝地和这个话题再次B4 Google一下, Google的代码, 是借用人家原来的excanvas(用于兼容IE)的作者的, 不过最后还是很有良心的在去年上半年, 把原作者雇佣啦。 其实Google是一个非常缺乏创新和原创的公司, 除了10年前的PageRank,嗯嗯。



对啦,LZ有些用词和说法虽然无伤大雅, 不过还是稍欠严谨,比如设计模式是有更具体的含义的,和xhtml挂钩有点让人摸不着头脑..



不过HTML 5也不能说一无是处, 比如Canvas对于一些展示性质而不是交互性质(从图像本身来说)的应用, 或者交互不基于图形元素本身的应用, 还是不错滴, 至少比SVG简单,3D做图也更有效率(这个得假设如果包装OpenGL的Canvas3D最终实现了的话), 期待LZ深入挖掘, 也介绍些HTML 5的其它新特性 :), 比如其实我觉得最具突破性的应该是Offline支持~



只是HTML 5其实还没有“出来”,一切还要等2011年之后, 最后结局如何也不好说, 现在跟进还是有风险地````


  回复  引用    
#2楼2008-04-22 02:48 | 不理你[未注册用户]
做的好漂亮 界面赞一个
  回复  引用    
#3楼2008-04-22 02:56 | Scott Xu(南方小鬼)
期待续集
  回复  引用  查看    
#4楼2008-04-22 07:36 | 生鱼片      
为了看楼主的博客升到ie7了,在ie6下不堪入目啊
  回复  引用  查看    
#5楼2008-04-22 07:52 | 侯垒      
楼主好强悍.
  回复  引用  查看    
#6楼2008-04-22 08:43 | asheng      
界面好看 应该还算行,但是没有到让人佩服到五体投地的地步
我虽不太懂 前端 的事情,比起您来 我还没入门
但我还是有些想说的
1.您的页面加载速度很慢 ,这是我的直观感觉 ,起码比园子里其他人的速度慢很多(注:我的电脑1G内存 ,T43,打开多数网页还不算废劲)
2.我用IE6 很长时间了 ,暂不愿意换,还有多少用户在用IE6想必您也应该知道一个大概的数字,直接说不支持IE6好像有点 说不过去,对于您这样专业的前端设计师来说 ,您是不能忽略这样的情况的 。(我是专门换用FF2来看的你的bolg 的)
3.确实花哨的界面是可以引来 很多访问量的 ...
----------------------------------------------一个小菜鸟

  回复  引用  查看    
#7楼2008-04-22 08:50 | 李战      
http://www.cnblogs.com/Emoticons/qface/055243188.gif" alt="" />俺先来拜拜山头,以后请大师多多关照啊!http://www.cnblogs.com/Emoticons/others/handshake001.gif" alt="" />
  回复  引用  查看    
#8楼2008-04-22 08:51 | Dove.Net      
HTML4对给我留下了阴影....
  回复  引用    
#9楼2008-04-22 08:56 | kisskiki[未注册用户]
楼主的网页显示好慢,一卡一卡的,而且写评论都看不到字不知道什么原因
  回复  引用  查看    
#10楼2008-04-22 09:07 | Beginor      
IE7支持Convas!
我用Vista SP1 + IE 7未发现上述兄弟们所说的加载慢,有卡,或显示等问题,前端内容好久都没有看过了,不过最近还是蛮关注Silverlight的,准备抽点时间出来搞搞~
  回复  引用  查看    
#12楼2008-04-22 09:34 | 丁学      
如果是为了RIA,W3C不如继续搞他的SVG,如此反复,让我很难再信任这帮标准制定者
不要指望一个标准/技术可以解决所有的问题,无论XHTML还是HTML,我都始终认为,这应该是一种文档标准,而非展现标准
想炫,可以,你可以去加入乱战,sliverlight、flex/flash、svg、vml,大打出手并非坏事,但不要依仗大家对XHTML标准的信任,你就乱来

PS:你这个模板的确有些卡,页面下载完成后的展现需要一些时间,而且CPU和内存占用要比其他模板高出一些。在评论框里输入文字时会有些迟钝
WinXP + IE7,全部update至最新了

  回复  引用  查看    
#13楼2008-04-22 09:36 | ZH-CN      
界面加载好慢~~

设计模式和HTML2??

这个也能搭上关系?

  回复  引用  查看    
#14楼2008-04-22 09:37 | ZH-CN      
http://brownkuma.liberty2k.com/?cmd=sillywords&1208827717468

总是在加载这些个东西,响应时间好长好长好长好长~

  回复  引用  查看    
#15楼2008-04-22 09:38 | Tony Zhou      
好像转不了
  回复  引用  查看    
#16楼2008-04-22 09:49 | Jeffrey Zhao      
有几个脚本加载好慢,好像files.cnblogs.com有点问题……
  回复  引用  查看    
#17楼2008-04-22 09:50 | JustDI      
你的博客吃内存吃得好厉害哦,看来绚丽外表总是有代价的。
  回复  引用  查看    
#18楼2008-04-22 09:55 | 杨正祎(阿一)      
支持系列文章,学习中……

另:
胡仔兄,看来有必要优化一下页面效率了。很多朋友反映哦…… 呵呵~~

  回复  引用    
#19楼2008-04-22 10:03 | sky266[未注册用户]
我说是谁这么有个性呢。回头看原来是怪怪。很牛,很强大。
这个回复框中的文字是白色的。要选择了之后才可以看到。ie6.0

  回复  引用  查看    
#20楼2008-04-22 10:44 | andy.wu      
@怪怪

ie7下无法显示你的svg, safari下可以.


用safari一段时间了, 速度的确可以, 就是有一些莫名其妙的bug, 总的来说不错.

  回复  引用  查看    
#21楼2008-04-22 10:46 | Zhuang miao      
请教楼主一下,图片加个倒影用什么做的?有什么快速简单的工具吗?

还有我觉得那个顶端显示文字的如果用flash或silverlight来做完全可以更炫,速度也可以更快,有时候都用脚本貌似速度并不见得好吧?


  回复  引用    
#22楼2008-04-22 10:50 | STS[未注册用户]
研究问题是好事.
不过研究前麻烦给出一个详细的兼容列表.

  回复  引用    
#23楼2008-04-22 11:12 | 海风冷笑[未注册用户]
界面很卡.转起来也很吃力.打字干脆凭记忆去打.都没的显示.
不过做得可真好看啊!

  回复  引用  查看    
#24楼[楼主]2008-04-22 11:37 | 棕熊      
@怪怪
canvas这个东西,甚至说HTML5中不少的东西都是有点鸡肋的感觉,呵呵。之所以用这个例子,无非是为了激发大家的兴趣。其实在贴这个例子的时候,我还特意考虑过要不要把在IE下的svg实现去掉,以更好的说明这是一个用canvas实现的演示。但是想到,规范其实只是提供一个定义,说明浏览器应该实现什么样的功能。至于浏览器怎么实现,这个是浏览器的问题。既然IE已经有了svg, 稍微包装一下,在以后的版本里作为canvas的实现也不是不可能。
其实等我写完了,你会发现,我想传递的信息更多是关于规范的发展,以及不同规范间的比较,从而纠正人们对规范存在的很多误区,而不是具体介绍HTML5的某个功能,因为毕竟这个东东还是草案而已。个人我倾向XHTML2,因为理论上说一个更具通用性的规范总是对的。总之,还请怪怪gg看我的下文,并且继续支持偶吧,呵呵

  回复  引用  查看    
#25楼[楼主]2008-04-22 11:44 | 棕熊      
@杨正祎(阿一)
--引用--------------------------------------------------
胡仔兄,看来有必要优化一下页面效率了。很多朋友反映哦…… 呵呵~~
--------------------------------------------------------
效率问题,包括IE6的问题,我会专门写一篇文章讲,正好可以重申以下我对前台开发的观点。
至于很多人反映IE6下输入框文字和背景都是白色的问题,可以定义为bug, 的确需要fix

@Zhuang miao
--引用--------------------------------------------------
Zhuang miao: 请教楼主一下,图片加个倒影用什么做的?有什么快速简单的工具吗?

还有我觉得那个顶端显示文字的如果用flash或silverlight来做完全可以更炫,速度也可以更快,有时候都用脚本貌似速度并不见得好吧?
--------------------------------------------------------
图片倒影的话photoshop 就行,很方便的。

导航不用flash或者silverlight,最重要的原应是accesseblilty。为了accesseblilty 可以牺牲一些复杂的效果,但是为了效果而牺牲accesseblilty就不行了

  回复  引用  查看    
#26楼2008-04-22 12:25 | 晓江工作室      
已经把内容和评论都看完了,演示的区域还是空白一块,不知道是什么原因
WinXP IE8 Beta

  回复  引用    
#27楼2008-04-22 15:01 | cslarsar[未注册用户]
晕死!!!你的页面慢死!!!!!!!!
  回复  引用    
#28楼2008-04-22 17:03 | 路人小刀[未注册用户]
按箭头键还能使这个多面体旋转哦~
--------------------------------------------------
在那个图形上狂点鼠标箭头,不动,感觉象铁板一样。。。
想了半天,意识到是点键盘的方向键。。。。@@

  回复  引用  查看    
#29楼2008-04-22 17:24 | negy      
博主的页面加载起来好慢啊
  回复  引用  查看    
#30楼2008-04-23 09:05 | 哈哈熊      
RE:24楼
看你写的以为IE7开始支持SVG了呢,高兴半天。回头看了一下那个js,好像是用的VML吧。

  回复  引用  查看    
#31楼2008-04-23 11:55 | looping      
@路人小刀
汗,偶也是~~

  回复  引用    
#32楼2008-04-23 17:47 | NormRen[未注册用户]
熊哥是不是做前端的啊?页面在IE6都变形了哦。
  回复  引用  查看    
#33楼2008-04-24 20:03 | GoGoSonny      
关键还是浏览器的问题,而非标准的代数。

博主博客在FireFox下显示效果很好,一楼的哪动画也看的见,很炫。

在IE7下,感觉不大好的样子。。。

  回复  引用    
#34楼2008-05-25 20:25 | hax[未注册用户]
xhtml2和html5的分歧内幕其实很难说。但是基本可以认为两者所面对的需求不一样。whatwg是浏览器联盟(除了ms之外),代表的是浏览器厂商的利益(注意MS并不是一个真正的浏览器厂商,因为他的浏览器是OS搭送的),也就是要参与Web Application的竞争。如果不上HTML5,那浏览器几乎无法与air、silverlight竞争。
  回复  引用  查看    
#35楼2008-07-07 01:41 | 张跃      
我倒是不觉得页面很慢,可以接受的范围吧
  回复  引用  查看    
#36楼2008-08-06 10:16 | codemo      
不支持IE(IE6)啊
FireFox可以




发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1164716




相关文章:

相关链接:

版权声明

除特别声明外,本站一切资源均适用于
Creative Commons License This work by 棕熊 is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 China Mainland License
PS: 这个blog目前暂时不能完美支持IE6