浅谈 HTML 5

当然，我知道，聪明的你肯定也知道，HTML 5只是一个噱头而已，真正讨论的是移动互联网开发。

近几年来，在Web标准沉默了很多 年以及IE 6独占市场很多年以后，HTML 5神话地打破了这个局面，使得Web标准重新成为标准，并不受一家限制。这个主要归功于成功的开源HTML解释引擎Webkit（感谢Webkit、感谢 Apple，不过，其实真正该感谢的还是KDE，因为不是KHTML严格的GPL，Apple不知道会不会把拿KHTML来改造的Webkit开源 呢～）。不受平台限制，所以最终在几乎所有手机浏览器的内核都是Webkit（自带浏览器）。

不过，HTML 5真的还有很长的路要走。

近 几年来，HTML 5标签的变化主要集中在替代Flash的解决方案上，包括Canvas、Video以及Audio标签，至于其他标签，实际上可以通过CSS进行定制来模 拟，甚至很多标签基本没有所谓的式样，只是语义。但语义Web，我觉得是，HTML从创建之初就是用来格式化的，为什么语义？语义也应该是格式化上的语 义。

相比Flash，从设计之处就支持打算支持硬件加速的Canvas、Video以及Audio标签使页面运行更为流畅、自然。三个功能 单一化的标签，使得维护更容易。Video和Audio现在的问题就是如何维持浏览器之间的兼容性。而Canvas，其中一个很严重的缺点就是内容难以描 述，基于位图操作的Canvas对于图表，描述性自然是很差的，但愿SVG动画能够填补这个空白。Canvas的出现大概是为了游戏。但 JavaScript引擎的设计大多数是基于单线程的，对于游戏设计来说性能还是不好。

但HTML 5实际上伴随的变化，还在于CSS 3建立的互动模型。由于Webkit的流行，支持HTML 5就等于支持CSS 3。而CSS 3的动画、过渡、坐标变换等内容大大增强了HTML 5的表现力，实际上从原来基于函数的操作转换为基于模型（利用CSS 3的选择器来建模，然后用JavaScript调用模型之间的变化关系，其余操作由CSS动画过渡模块来解决）。这样，动画交互设计变得容易，静态的内容 真正动态化、互动化，革新了以往对Web纯静态平面设计的概念。但CSS 3现在面临的问题是，缺少对动画状态的描述。

说到CSS 3，不得不提的是硬件加速。相对于用JavaScript来实现的动画来说，CSS 3动画显然会更为流畅（浏览器的绘制的优化）。于是，很多动画框架从CSS 3中寻找解决方案，希望利用CSS 3来实现流畅的动画效果。但由于现阶段的CSS 3还缺少流程控制，还有基于CSS 3本身基于模型的设计。到底应不应该用CSS 3来达到除了互动以外的动画特效目的？还是浏览器应该定义一套支持硬件加速的基本API（WebGL？）来实现？

HTML的设计到现在来说还有一个很严重的问题——页面跳转间没有过渡效果。这个问题在jQuery Mobile中通过AJAX拉取页面然后动态插入DOM来解决，但这样实际上做了很多复杂的工作，代码兼容上也有问题。模拟的就绪事件还是不能和DOM就绪事件相比。

HTML 5还有一个很重要的组成部分就是JavaScript，这个逻辑与表现的桥梁。动态语言的优点或许不用我说了。而JavaScript有着和动态语言的通 病：难以进行静态语法分 析来进行上下文提示（这或许也是JavaScript没有神什么好用的IDE的原因之一）。那么使用这套语言的人必须十分清楚对象是什么，以及类有什么 API，否则，面对一个JS对象将无从下手。动态语言屏蔽了类型差异，为快速开发打下基础，但是模糊的语义在某些情况下又使得开发难度增加。

好了，先说到这里吧，有时难免情绪化，若有些错误，希望大家指出。也希望大家给出自己的意见。感谢收听～

 

Design Comments(1) 2012年7月20日 23:53

新的一篇以及改进的主题

终于决定把博客迁到这里了。小玖似乎也不在百度空间了，而人人上压力巨大，大多数博客系统基本上不适合写代码……

昨天晚上把自定义 CSS 玩了一把。发现这里的自定义 CSS 挺好的，主题的 HTML 结构也很好（比百度空间的标准一点吧），附有多种主题作为基础选择。相对于以前的百度空间也算是一个进步。不过有些特效还是依赖 jQuery 等库才可以玩， CSS 3 的动画目前似乎只有gecko和webkit支持，opera也不支持（但我没有测试过，据W3schools.com的测试了解到的）。

主题主要修改部分：

  • 把 header 部分改为导航栏在上，然后用 position: fixed; 固定。考虑到 IE 可能不支持，我尝试删掉 position 属性定义，效果还可以，起码不会太乱。
    这样做的好处是看文章的时候总是可以见到导航栏，真正发挥导航的作用（呵呵，一家之言罢了）
  • header 上部分 float 的内容改用 position: absolute; 来替换。
  •  header 部分圆角边框和其他一些地方的圆角微调。
  • 改进了原来 #wrapper 控制的主内容区的排版方式。采用 margin-right 属性固定留空 #sidebar 区域，然后把 #sidebar 的 position 属性设置为 absolute ，当然，这样一来，为了排版，一些父元素的 position 也改成了 relative 。取消了原来的 float 和 width 固定页宽的排版方式。
    这个改进的好处是页面会随着屏幕的宽度而改变。尽可能不浪费横向空间的同时，也保留了版式的完整。但在小屏幕上，我承认这样的设计会有问题。但小屏幕的时候，浏览器应该不会过多地考虑 position 等定义吧（尽可能利用纵向空间）
  • 一些动画的改进。仅仅对Webkit和Gecko较新的内核上测试过。IE 肯定不支持的。看看 IE 10 吧。模拟了部分以往需要 jQuery 才能达到的动画效果。
  • 底部 footer 配合样式把宽度设为 100% 了。

基本上也就是这样了。有些细节可能没写出来，毕竟也很难完全写出来。参看我的 CSS 代码吧。:-)

#coldblue .inner {
  position: relative;
  margin: auto 20ex;
  width: auto;
}

#coldblue #search {
  position: fixed;
  top: 0;
  z-index: 100;
}

#coldblue #header {
  width: auto;
  margin: 50px 20ex 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#coldblue #header .inner {
  margin: 0 1ex;
}

#coldblue #header #navigation {
  float: none;
  top: auto;
  width: auto;
  position: absolute;
  right: 1ex;
  bottom: 1em;
}

#coldblue img[alt='Avatar'] {
  box-shadow: 0px 0px 10px #333;
}

#coldblue #head ~ h2, #coldblue #head ~ #chito_search {
  display: none;
}

#coldblue #chito_search ~ h2 {
  display: block;
}

#coldblue #chito_search + h2 {
  display: none;
}

@-moz-keyframes colorFadeAnimation {
  0% { color: white; }
  40% { color: yellow; }
  60% { color: yellow; }
  100% { color: white; }
}

@-webkit-keyframes colorFadeAnimation {
  0% { color: white; }
  40% { color: yellow; }
  60% { color: yellow; }
  100% { color: white; }
}

@keyframes colorFadeAnimation {
  0% { color: white; }
  40% { color: yellow; }
  60% { color: yellow; }
  100% { color: white; }
}

#coldblue #search a {
  color: white;
}

#coldblue #search .current_page_item a {
  text-shadow: 0px 0px 10px white;
  color: green;
}

#coldblue #search a:hover {
  -moz-animation:colorFadeAnimation 5s infinite;
  -moz-animation-play-state: running;
  -webkit-animation: colorFadeAnimation 5s infinite;
  -webkit-animation-play-state: running;
  animation: colorFadeAnimation 5s infinite;
  animation-play-state: running;
  color： yellow;
  text-shadow: 0px 0px 10px white;
}

#coldblue #wrapper {
  background-image: none;
  width: auto;
  margin: auto 20ex;
  position: relative;
  border-width: 0px;
}

#coldblue #wrapper #content {
  width: auto;
  margin-right: 270px;
  float: none;
}

#coldblue .post-title h3 {
  text-align: right;
}

#coldblue .post-p {
  padding: 0.3em;
  background-color: #aaa;
  border-radius: 0.2em;
}

@-moz-keyframes backgroundFade1 {
  0% { background-color: black; }
  50% { background-color: #888; }
  100% { background-color: black; }
}

@-webkit-keyframes backgroundFade1 {
  0% { background-color: black; }
  50% { background-color: #888; }
  100% { background-color: black; }
}

@keyframes backgroundFade1 {
  0% { background-color: black; }
  50% { background-color: #888; }
  100% { background-color: black; }
}

#coldblue .post-p a {
  padding: 0.1em;
  border-radius: 0.3em;
}

#coldblue .post-p a:hover {
  -moz-animation: backgroundFade1 4s infinite;
  -moz-animation-play-state: running;
  -webkit-animation: backgroundFade1 4s infinite;
  -webkit-animation-play-state: running;
  animation: backgroundFade1 4s infinite;
  animation-play-state: running;
  background-color: #888;
}

#coldblue #wrapper #sidebar {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #ccc;
  border-bottom-left-radius: 15px;
}

#coldblue #footer {
  text-align: center;
  width: auto;
  margin: 0;
}

 

Design Comments(2) 2011年8月07日 12:11