HTML 5 从业者学会听话才能生存

微信打造了 HTML 5 的「小生态」,但从业者要乖乖的!

HTML 5 如果颠覆了原生 APP,不会是简单的 Web App 崛起,而是意味着「大生态」系统的构建,包括新的操作系统、新的玩家、新的商业模式、新的产品逻辑等等。但没有几个人真的相信这种颠覆会很快出现。

抛开「HTML 5 颠覆 APP」这种骇人听闻的说辞,业界已经看到一些构建 HTML 5「小生态」机会的存在,例如微信已经融入原生生态并且构建了自己的 HTML 5 小生态。但是融入生态意味着顺从,微信亦要看更高等生态系统如 Apple 的脸色,遵循玩家规则。同样微信「小生态」体系下的玩家亦要学会做个乖乖的顺从者,上周张小龙的发言给 HTML 5 游戏重燃的热情浇了一盆冰水,不知是有意或是失言,谈话中对 HTML 5 游戏的明确拒绝让业界好不容易重燃的希望再次受到打击。

围绕着微信生态笔者说过「与虎谋皮」的话,这是对应着 HTML 5 膨胀的野心而言。回顾互联网开放平台,Facebook 造就了 Zynga 也毁灭了 Zynga,中国互联网开放平台打击合作商出手的力度只会「有过之而无不及」,美国市场数年前诞生过 Zynga 这样的公司,中国出现过类似机会只是从来没有真正实现过。微信马力十足的一步步掌控电商和游戏的流量、收编媒体,如果 HTML 5 从业者剔除更多的野心,做个乖乖的顺从者从微信的小生态内分得一杯羹还是十分现实,只是这里没有构建「大生态」和「颠覆原生 APP」的机会。

 

HTML 5 是原生 APP 生态下的血管

移动浏览器眼下日落西山,微信这样的「小生态」系统更是无法承载过大的野心,那么 HTML 5 和当下生态系统到底如何共处并且获得发展?「融入」正在发生!市场不是不需要 HTML 5 技术,只是不需要 HTML 5 从业者的野心。

HTML 5 正在快速融入 iOS 与 Android 主导的原生生态系统!原生 APP 内嵌入 webview 访问 web 页面已经成为通行做法,用 HTML5 开发原生 APP 也早不是新鲜事。并且 HTML 5 技术的进一步发展解决了原生 APP 生态的一些痼疾,例如 APP 的「孤岛效应」。

相比 PC 主导的 web 互联网,APP 主导的移动互联网缺少了「流量促进规模化」的有效手段,「流量产生流量」即倒流的模式艰难的存在着。积分墙和广告推荐 APP 有效果,但是相比 web 时代一个链接跳转的高效模式效果又不那么理想。

微信朋友圈分享让 HTML 5 产生了盘活移动互联网流量的巨大价值,「将内容从一个 APP 快速、完整、高效的传输到另外一个 APP」是 HTML 5 最擅长的部分。在去中心化的用户设备桌面上,HTML 5 像血管一样连接了一个个的独立的 APP 器官并且输送血液到不同的 APP 中。这就是 HTML 5 快速融入生态的表现之一,并且发挥自由流量的价值加速和逐步改造原生生态。

 

HTML 5 想不到的未来,起爆点指标还要看美国

就在三年前,中国市场 feature phone 仍占据大半江山的时候,我们去谈论「云端趋势」以及智能终端的普及速度这些话题,几乎没有人准确预期今天的终端市场格局。

所谓的颠覆,往往就是在我们不可预期的情况下以一种未知的形态扑面而来。最新的美国移动互联网报告显示,所有联网设备中 PC 份额已经被严重挤压到不足 1/4 并且呈现进一步萎缩的趋势,移动支付手段也推陈出新,基于「云端」架构的移动购物、商业等行为正在重塑各个传统领域,例如星巴克 2013 年移动交易额超过 60 亿元。HTML 5 颠覆 APP 这种假大空的话题不是今天才有人说,反而是说了很久。不能说 HTML 5 颠覆 APP 的可能性不存在,但是就算颠覆也不会以我们目前可以轻易预期的形式出现,不会是移动浏览器,也不会是 APP 内访问 Web App,这些还都是适应原生生态的模式。颠覆意味着革命、革命意味着创新,只有行业积聚了足够的创新人才、创新动力以及创新资源的时候,才会推动变革,只是目前这些创新的条件几乎无一具备。

中国互联网产业比较发达,特定的文化、政策甚至汉字都为中国互联网设置了天然的保护屏障,给中国互联网从业者创造了独特的机会。但是中国互联网发展模式绝大部分仍旧是所谓的 C2C 即 copy to China,我们使用 HTML 5 也好、打造 HTML 5 生态也罢、亦或是去颠覆原生 APP,这一切作为中国互联网从业者更明智的做法是寻找美国市场的「对标」公司,笔者没有任何否定中国互联网从业人创新能力的意思,但是如果如此颠覆性的事件在更成熟的欧美互联网产业环境下都没有提前引爆,那么在中国更是难以独自突破。

作为一个建设性的参考指标,只有欧美 HTML 5 市场催生了足够规模的成功案例情况下,中国的 HTML 5 大生态领域才可能出现类似的机会。但是目前来看,完全下赌注在基于 HTML 5 技术的纯 Web 模式下,机会渺茫。

让WordPress通过HTML5校验

很久没折腾wordpress了,之前自己弄了个模版,然后希望是支持html5的,写完了发现wordpress本身会多出一些属性,还是让我无法通过html5校验。不过想想wordpress会注意到的吧,于是就没有修改主题。

不过最近偶然点击了下校验依然还是无法通过,于是百度下吧,果然有人弄出解决办法了,果然把代码丢尽模版里面,html验证通过。

<?php
foreach(array(
‘rsd_link’,//rel=”EditURI”
‘index_rel_link’,//rel=”index”
‘start_post_rel_link’,//rel=”start”
‘wlwmanifest_link’//rel=”wlwmanifest”
) as $xx)
remove_action(‘wp_head’,$xx);//X掉以上
//rel=”category”或rel=”category tag”, 这个最巨量
function the_category_filter($thelist){
return preg_replace(‘/rel=”.*?”/’,’rel=”tag”‘,$thelist);
}
add_filter(‘the_category’,’the_category_filter’);
?>

以上代码放入functions.php

让wordpress通过HTML5验证

<?php   foreach(array(     ‘rsd_link’,//rel=”EditURI”     ‘index_rel_link’,//rel=”index”     ‘start_post_rel_link’,//rel=”start”     ‘wlwmanifest_link’//rel=”wlwmanifest”   ) as $xx)   remove_action(‘wp_head’,$xx);//X掉以上   function the_category_filter($thelist){//rel=”category”或rel=”category tag”, 这个最巨量     return preg_replace(‘/rel=”.*?”/’,’rel=”tag”‘,$thelist);   }   add_filter(‘the_category’,’the_category_filter’); ?>

将以上代码加到functions.php里面去,Wordpress就不会生成烦人无用的rel属性了

HTML5兼容网络视频比例由10%升至63%

视频聚合网站MeFeedia在一份报告中称,过去一年,与HTML5兼容的网络视频比例由10%上升至63%。
MeFeedia发现,与HTML5兼容的网络视频比例由2010年1月份的10%上升至5月份的26%,6月份上升至54%,3月份则进一步上升至63%。
由于得到包括YouTube、苹果和微软在内的各大公司的支持,HTML5迅速成为Flash的竞争对手。过去,Flash一直是网络视频领域的霸主。

苹果CEO史蒂夫·乔布斯(Steve Jobs)去年在一封公开信中阐述了该公司移动设备不支持Flash的多个原因,并表达了对HTML5的支持,认为HTML5未来将取代Flash。

22个HTML5的初级技巧

1. 新的Doctype声明

XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
 

 
HTML5的Doctype声明很短,看到这个声明相信你马上就能记住,不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。

<!DOCTYPE html>
 
HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式,你可能会奇怪IE6/7居然也可以支持HTML5 Doctype,事实上,IE是只要doctype符合 这种格式,都会进入标准模式。

2. <figure>标签

看看下面一段简单的代码:

<img alt=”About image” src=”path/to/image”>
<h6>image of Mars.</h6>

 
遗憾的是,这里的h6标签和img标签好像没有什么关系,语义不够明确。HTML5意识到了这一点,于是就采用了<figure>标签。当<figure>结合<figcaption>标签的使用,可以让h6标签和img标签组合起来,代码就更具语义化了。

<figure>
<img alt=”about image” src=”path/to/image”>
<figcaption>
<h6>This is an image of something interesting. </h6>
</figcaption>
</figure>
 
3. 重新定义<small>

不久前,我使用了<small>标签来创建与logo相关的副标题。但是在HTML5中重新定义了<small>标签,使之更能表现语义化,在<small>的字号都会变小,想想如果这个标签用于网站的底部的版权信息还是个不错的做法。

4. 去掉了Javascript和CSS标签的type属性

通常你会在<link>和<script>加上type属性:

<link rel=”stylesheet” type=text/css href=”path/to/stylesheet.css”>
 <script type=”text/javascript” src=”path/to/script.js”></script>
 
在HTML5中,不再需要type属性了,因为这显得有点多余,去掉之后可以让代码更为简洁。

<link href=”path/to/stylesheet.css”>
 <script src=”path/to/script.js”></script>
 
5. 是否使用双引号

这有点让人纠结,HTML5并不是XTHML,你可以省去标签中的双引号。相信大多数同志也包括我都习惯了加上双引号,因为这让代码看起来会更标准。不过,这可以根据你的个人喜好来确定是到底要不要双引号。

<h6 id=”someid”> start the reactor. </h6>
  继续阅读

DIV+CSS并不能使你的网站节省流量

      话说很久以前,我就一直保持这个观点,但是一直苦于div+css的主流趋势所致,使我之前使惯了table到现在要大量的div标签,其实每个新产品出来都会攻击上一代产品,无情的将上代产品的缺陷上撒盐,目前html5出来后我已经看到一些文章在攻击div大量的重复使用。而html5则推出了几个新的标签来代替div,

HTML 5 添加了一些新元素,专门用来标识这些常见的结构:

  • section:这可以是书中的一章或一节,实际上可以是在 HTML 4 中有自己的标题的任何东西
  • header:页面上显示的页眉;与 head 元素不一样
  • footer:页脚;可以显示电子邮件中的签名
  • nav:指向其他页面的一组链接
  • article:blog、杂志、文章汇编等中的一篇文章

那为什么说我一直不认同div+css呢,可能是因为我是太过习惯table了,到div+css主流之后我很少设计网页了。另外最重要的一个原因就是我网站运营中的数据统计,事实证明div+css更浪费流量,每每都看到div+css降低运营成本的文章,网站重构的文章,其实这些有多少考虑到网站的运营实际情况呢?

     我所运作的大多网站都是靠搜索引擎来获取流量,这样有一个特点就是大量访问者都只是访问一个页面就离开,这样的话table就比div+css要节省很多流量,然后事实上有多少网站具有高浏览量的特性呢?

     其实div和table差不多 table是去加一些属性,而div是加标签到css中去解析,这样就会导致访问一个页面的情况下table表现出来一个页面的内容,div+css却要表现出来一个页面+全局的css内容+分类的css内容等,只有当访问者浏览超过3个页面以上的时候浏览才相当或者比table更节省流量。在用户角度上我还测试大量使用的IE,当使用table写网站的时候,重复的代码内容在每个分页的加载,IE的表现并不是重新加载,它似乎做了处理,表现出来是很快的。很可能这部分相同代码的流量是不消耗的。一样能够表现出CSS的重用性。起码给用户的体验是表现出来的。最后一个批评table的噱头是不容易改版及可读性差,我个人也认为这个是不可以理解的,比起要看两个文件才能看出是什么格式,我认为还是只看一个页面要容易理解,这个可能跟我之前大量使用table有关,另外不容易改版我也认为这个是不合适的,在模板的使用中,无论是div+css还是table,都是只修改一个模板然后整个网站都生成新的页面了。不存在什么大量文件需要修改。

     现在html5的一些文章已经在说html5的优势了,我也觉得在html和xhtml中,更多的运用html更适合中国的网站情况,我也希望能用一个HTML5写出来的wordpress模板。