七 08
Wang Wen HaoWeb开发 HTML, html5
利用web技术进行应用开发的趋势已深入人心，甚至web浏览器以外亦是如此。最近披露Windows 8将会为编写运用HTML 5技术的应用提供支持只不过是契合了其在开发界的转变而已。因此问题是：你打算如何应对？
如果你没有在一直地密切跟踪，很容易就会做出这样的猜测，为什么突然之间Web技术会扮演桌面应用开发平台的角色。在正在定稿的HTML5标准里面，添加了一些新的项目，这些项目为HTML目前的文档格式附加上了真正的应用开发能力。过去，庞大的JavaScript框架及浏览器插件是某些相当琐碎的功能之所需。
HTML5依靠添加对视频流、多线程以及异步处理（通过“Web Workers”消息传递系统）、利用套接字直接通信等的支持来改变这场游戏。尽管一个文档格式标准拥有这些能力会吓到某些人（包括我本人在内），但是车轮滚滚，这仍是HTML 5的前进方向，而且它还有苹果、微软、谷歌、Mozilla、Adobe等公司给它撑腰。此外，各种不同的框架的存在让它能够轻易地将Web应用直接与后台的Web服务连接起来。其结果是，对于许多任务来说，HTML 5现在跟Silverlight、Flash、Flex/AIR以及JavaFX等技术一样出色（尽管在某些事情上那些仍做得更好）。
以下就是你希望学习来步入此门槛的技术：
HTML5： 尽管HTML5作为标准可能尚未完全确定，但是到了这个阶段变动不会太大了。目前，它已经是可用的，并在相当一些浏览器上有了实现。你现在可以开始学习它了。
CSS： 如果你对CSS还不熟悉，现在正是学习它的大好时机。浏览器支持还在不断完善，且现在IE6在市场的份额已经很少，对此开发人员已经觉得可以放心地忽略不计。
Web services： 每一种主流的服务器端开发语言都拥有一个框架或一套库，以便容易地生成web服务，如.NET中的Windows Communication Foundation （WCF）。理解这些基础应该不需要花费太多的学习精力。你也许特别希望学会如何生成JSON的输出，此物正在迅速变成Web应用的通用语。还有，确保你理解了RESTful Web服务。在现代的开发环境下，相对于SOAP来说，尽管它们可能需要花费更多的功夫，但是其可访问性可用性也要高得多。
JavaScript： 相对于传统的ASP.NET或类似开发需求来说，新的应用开发范式需要多一点JavaScript方面的知识。
jQuery： jQuery已经成为可用的客户端开发框架；它似乎可用包办一切。在利用一组扩展的插件的情况下，如果你想玩点UI的花样，很可能jQuery能帮你忙。
这些技术现在构成了若干不同的开发系统的基础。移动网站就是一条好的途径，靠它可用最少的功夫来达到最多的移动用户。像Appcelerator的Titanium那样的工具允许你在若干平台上（包括桌面和移动）在其系统之内使用web技术。其他的系统，像OutSystem的Agile Platform打包了像jQuery这样的库，使得开发桌面或移动web应用变得极其简单。Windows 8，尽管细节仍很含糊，看起来似乎会拿IE9（或彼时的当前版本）作为HTML 5的运行环境，来充当脱离明显的浏览器窗口之外的本地应用。可以推断，这些应用会拥有增强的特权来访问本地资源，也可能其行为会更像是本地应用。
自学上述核心技术可谓聪明的一步，今年9月微软的BUILD大会举办过后，我们就应该了解到该公司Windoes 8的策略调整计划，并能发现还有哪些东西需要我们去学。
七 06
Wang Wen HaoWeb开发, 互联网 jQuery, WordPress
最近上人人网的时候，发现页面的底部有一个“返回顶部”的按钮，于是在自己的网站上也搞了一个，其实非常简单。
首先，修改主题模板的footer.php文件，</body>上面加入如下代码：
<div id="toolBackTo" style="display: none;" class="back-to">
<a title="返回顶部" onclick="window.scrollTo(0,0); return false;"
href="#top" class="back-top">返回顶部</a>
</div>
上面这段代码是完全Copy自人人网的源代码。返回页面顶端的代码很简单。
接下来修改style.css文件，加入上面div和链接的样式：
.back-to {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 999;
width: 110px;
overflow: hidden;
zoom: 1;
-ie6-position-fixed-delay: 200;
}
.back-to .back-top:hover {
background-position: -50px 0
}
.back-to .back-top {
float: right;
display: block;
width: 50px;
height: 50px;
background: url(http://a.xnimg.cn/imgpro/button/back-top.png) no-repeat 0 0;
margin-left: 10px;
outline: 0 none;
text-indent: -9999em;
}
非常不好意思，这些代码也是原样copy自人人网。
.back-to就是div的样式，它的position设为fixed。这样它就会固定在页面的某个地方。在这里它的位置是bottom: 10px; right: 10px，就是右下角距离浏览器边角各10px的位置。
到这一步，基本功能已经实现了，当我们把页面滚动到下方的时候，点击这个按钮，就会自动跳到页面的顶端。
不过，当页面在顶端的时候，这个按钮其实没有存在的必要，我们可以用javascript来控制它。
再回到footer.php文件，在刚刚的代码下面加上如下代码。
<script type="text/javascript">
$(function(){
var bt = $('#toolBackTo');
var hl = $.browser.webkit ? $('body')[0] : $('html')[0];
$(window).scroll( function() {
var st = hl.scrollTop;
show = (st>30);
if( show ){
bt.show("slow");
}else{
bt.hide("slow");
}
});
});
</script>
这段代码用到了jQuery，所以需要先检查一下当前模板有没有引用jQuery，如果没有的话要在header.php里引用它。
我们给window对象绑上了scroll方法，在页面滚动的时候触发来控制返回按钮所在div的隐藏和显示。
代码非常简单。
七 02
Wang Wen Hao互联网, 我的工作 Web, 浏览器
浏览器的种类，如果按照生产商的品牌分，不说数以万计，起码也有成百上千种了， 如果按浏览器核心分类，它的种类就会少的多。
当今浏览器核心的种类值得一体的大约只有三到四个，它们分别是：Trident、Gecko、WebKit和Presto。
乍一看，似乎都很陌生，其实并不然，只要你上过网，就至少用过其中一种浏览器核心的浏览器软件，因为它们的市场占有率的确是太高了。
一、Trident核心，代表产品Internet Explorer
说起Trident，很多人都会感到陌生，但提起IE（Internet Explorer）则无人不知无人不晓，由于其被包含在全世界使用率最高的操作系统Windows中，得到了极高的市场占有率，所以我们又经常称其为IE核心。
Trident（又称为MSHTML），是微软开发的一种排版引擎。它在1997年10月与IE4一起诞生，至今经历12年，至少更新了四个版本，虽然它相对其它浏览器核心还比较落后，但Trident一直在被不断地更新和完善。而且除IE外，许多产品都在使用Trident核心，比如Windows的Help程序、RealPlayer、Windows Media Player、Windows Live Messenger、Outlook Express等等都使用了Trident技术。
但并不是所有的IE都使用Trident引擎，微软还有另一个网页浏览器排版引擎，叫做Tasman，它是使用在Internet Explorer for Mac的排版引擎，即苹果版的IE引擎。
使用Trident引擎的浏览器有很多，比如Internet Explorer、Maxthon遨游、世界之窗、腾讯TT、Netcapter、Avant等等，但Trident只能应用于Windows平台，且是不开源的。
二、Gecko核心，代表作品Mozilla Firefox
Gecko也是一个陌生的词，但Firefox的名声应该已经有所耳闻，Gecko是一套开放源代码的、以C++编写的网页排版引擎。
目前为Mozilla家族网页浏览器以及Netscape 6以后版本浏览器所使用。这软件原本是由网景通讯公司开发的，现在则由Mozilla基金会维护。它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行，而且它提供了一个丰富的程序界面以供互联网相关的应用程式使用，例如网页浏览器、HTML编辑器、客户端/服务器等等。
Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
三、WebKit核心，代表作品Safari、Chrome
webkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。主要代表作品有Safari和Google的浏览器Chrome。
四、Presto核心，代表作品Opera
Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。
Presto在推出后不断有更新版本推出，使不少错误得以修正，以及阅读Javascript效能得以最佳化，并成为速度最快的引擎，这也是Opera被公认为速度最快的浏览器的基础。
六 23
Wang Wen Hao互联网, 我的工作 CSS, HTML, JavaScript, Web
Web 开发的分散性和交互性，决定了 Web 开发必须遵从一定的开发规范和技术约定，只有每个开发人员都按照一个共同的规范去设计、沟通、开发、测试、部署，才能保证整个开发团队协调一致的工作，从而提高开发工作效率，提升工程项目质量。
一、基本规范：
页面一定要有相应的Title，特殊页面可以不要；如Iframe页、Include页等
主要页面要有meta字段以便于搜索引擎查找，还可充当注释作用
尽量使用广泛支持的技术。以流行的浏览器及版本为标准，同时照顾低版本
不使用过小的字体不使用过大的图片、动画、声音、不使用过长的滚屏
及时删除无用文件，防止无谓的下载速度减慢、后期维护简洁明了
所有文件全部以小写字母命名，包括图形文件。禁止用中文作文件名
页面支持最低800X600屏幕分辨率（实际尺寸为778*434px），即不能出现横向滚动条
通常情况下页面应以居中为主，如有特殊要求可以设置居顶、居左
图片采用gif, jpg压缩格式，以减小页面下载数据量，<img alt="" />标记要有width,height属性
所有页面都需要定义背景颜色，系统默认值是可以被用户随意更改的
二、文件命名与目录结构规则
首页面必须是以index.htm 、index.jsp命名的文件，按目录划分
HTML文件扩展文件名一律用 .htm，不要同.html扩展名混用
除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主。尽量用一些大家都能看懂的词汇。
目录下新建css文件夹，专门用来存放本级目录的全局CSS样式文件
目录下新建image文件夹，专门用来存放本级目录的全局图片资源，如gif、jpg
目录下新建script文件夹，专门用来存放本级目录的全局脚本程序代码，如js、vbs
目录下新建media文件夹，专门用来存放本级目录的全局媒体文件，如flash、avi
目录下新建temp文件夹，专门用来存放本级目录的临时或测试资源文件
根目录下一般只存放index页面及其所包含的帧页面与一些公共页面，如error、wait
所有文件与目录尽量符合DOS系统8/3文件格式命名，即8字节文件名、3字节扩展名
三、表格嵌套布局规范
在排布表格之前,请大家一定要好好思考一个最佳的方案,表格的嵌套尽量控制在三层以内,并且应该尽量避免 两个标记,经验表明,这两个标记会带来许多麻烦。
一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。如果必须这样做,请使用<tbody>标记,以便能够使这个大表格分块显示。
排版中我们经常会遇到需要进行首行缩进的处理,不要使用 或者全角空格来达到效果,规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上<p>标记,注意,一般情况下,请不要省略</p>结束标记 。
原则上,禁止用 <img alt=”" width=”?” height=”?” /> 来人为干预图片显示的尺寸,而且建议 <img alt=”" /> 标签中不要带上 width 和 height 两个属性,这是因为制作过程中,图片往往需要反复的修改,这样可以避免人为干预图片显示的尺寸,尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时,不会留出图片的站位大小,可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的,不会有这个现象）,尤其是当图片的尺寸较大时,这种现象会很明显,所以当预料到这种会明显导致网页抖动的情况会发生时,请大家务必在最后给 <img alt=”" /> 附上 width 和 height 属性。
为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用<br>来人工干预分段。
不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。
请不要在网页中连续出现多于一个的半角空格, 也尽量少使用全角空格（英文字符集下,全角空格会变成乱码）,空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的 gif 图片来实现。
中英文混排时,我们尽可能的将英文和数字定义为 verdana 和 arial 两种字体。
行距建议用百分比来定义,常用的两个行距的值是 line-height:120%/150%
网站中的路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,如我们不必这样：<a href=”aboutus/index.htm”> 而应该这样：<a href=”aboutus/”></a>
四、Web标准设计规范（XHTML+CSS）
为页面添加正确的DOCTYPE，过渡型（Transitional）、严格型（Strict）、框架型（Frameset）
设定名字空间（Namespace）
声明编码语言
用小写字母书写所有的标签元素与属性名字
为图片添加 alt 属性
给所有属性值加引号””
关闭所有的标签，包括空标签
用CSS定义元素外观
用结构化元素代替无意义的垃圾代码
给每个表格和表单加上id
所有的XML标记都必须合理嵌套
把所有<>和&特殊符号用编码表示； < > &等
给所有属性赋一个值，没有值的就重复本身
不要在注释内容中使用“–”
推荐定义font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;
辅助图片一律用背景处理
尽量多使用群选择器、派生选择器来书写具有层次结构的CSS样式
合理使用类别选择器与id选择器，同个ID只用一个地方，相同CLASS可用多个地方
链接伪类一定要按照a:link、a:visited、a:hover、a: active的顺序书写
多使用具有良好风格的注释，便于今后的维护与重构
HTML编码规范
一个标记必须占用一行 不得出现两个标记在同一行的情况(同一标记的关闭标记除外)
静态文件内容必须包含在标记中间
标记必须包含在标记中间
对于需要关闭的标记，必须同其关闭标记同时出现，不得出现交叉包含的语句
最高一级的父标记采用左对齐顶格方式书写
下一级标记采用左对齐向右缩进一个Tab的方式书写
在下一级依此类推，分别左对齐相对于父标记向右缩进一个Tab的方式书写
同一级标记的首字符上下必须对齐
JavaScript编码规范
变量命名规范
常量以及全局变量名必须全部使用大写字母
变量名首字母必须小写
变量名必须使用其类型的所写字符串开始。各种类型的所写字符串如下：
整型变量：int；长整型变量：lng；浮点型变量：flt；双精度变量：dbl
对象引用变量：obj；字符串变量:str；Date类型变量：dtm
变量名必须采用有意义的单词命名
变量名除首字母小写外，其他单词首字符必须大写
如果变量名过长可以使用单词缩写，除了被广泛了解的单词缩写以外，所有使用单词缩写的变量名必须在定义时给出注释
变量使用规范
变量使用前必须定义。没有定义的变量禁止使用
变量的使用尽量缩小到小的作用域
对象命名规范
text输入框：txt button按钮：btn select下拉选择框：sel option项：opt
form表单：frm frame框架：fra hidden表单项：hdn div标记：div
span标记：span 对话框对象：dlg 窗口对象：win
函数以及子过程命名规范
函数命名必须使用动词＋名词对的方式，并且能够体现函数的功能
函数命名的动词前缀必须是同函数功能相关的完整动词
函数命名第一个单词的首字母小写，后面每一个单词的首字母大写
RSS
Twitter
Facebook
Google+
eMail
近期评论