网站程序员如何应对web标准

四月 2nd, 2007

本文讨论的是在web标准普及的形势下,网站程序员的定位以及如何与设计师配合开发符合web标准的网站项目。
本文适合的读者是传统TABLE布局下分工不是非常明晰的程序员。

1:学习web标准,让你的工作变得更加简单。

web标准是大势所趋,所以作为网站程序员。你必须洗脑,必须去学习web标准。去重新认识html标签,去了解如何让程序输出页面需要的代码。

比如:

上边是美工出来的效果图,下边是符合标准的程序代码:

Dim oHtml
set rs=server.createobject("adodb.recordset")
Sql = "select top 10 id,Title From tbl_News  order by id desc"
rs.open sql,conn,1,1
oHtml="<ul>"
do while not rs.eof
    oHtml=oHtml & "<li><a href=""shownews.asp?id=" & rs("id") & """ title=""" & rs("title") & """>" & rs("title") & "</a></li>"
rs.movenext
loop
oHtml=oHtml & "</ul>"
rs.close
set rs=nothing
response.write (oHtml)

而如果是传统的TABLE布局下,程序员要写的HTML代码就会多很多,要写出TABLE、要判断什么时候输出TR来换行、要在每条新闻的前边加个一个IMG来输出小图标、要用程序去控制输出的标题长度。所有的工作都需要先出页面代码,程序员才能去写出这段程序。
对于程序员而言,你应该把web标准当成是一种福音,你应该把它当圣经一样去读,去了解页面代码到底需要什么,明白之后你就会发现。你比以前要轻松多了。由于web标准注重的是表现与内容相脱离,而程序只负责内容数据。从此你就不再需要考虑用程序代码如何控制隔行换色、一行分几列输出等等。你需要去做的,就是向页面输出最直接的内容,没有任何装饰的内容。
当然如果你是用.net开发的话,你就可以更彻底一点了。你可以完全将工作重点放在建立对象、类库、数据访问等,向表现层提供方法即可。下边的例子是我以前做项目的,应该有点参考价值。

2:网站程序员,别让HTML标签阻挡了你的视线。

如果你觉得你真的非常讨厌繁琐的HTML标签,而且自己的学习方向也不在网站的表现层,那你就和HTML标签彻底地说再见吧。

我曾经在传统桌面软件开发的公司工作,程序员都不会HTML,网站项目紧的时候又不得不让他们来帮忙。我们就拿着Visual Studio .Net 2003自带的几个例子仔细分析,按照面向对象的结构化分层开发模式,也能非常好的进行配合。以新闻模块的开发为例:
第一步:网站程序员可以按需求分析进行数据库设计,你可以负责建表、编写存储过程。这类的事情程序员都非常的熟悉。
第二步:定义对象。将网站的信息对象化,比如:

Public Class News
Protected _id As Integer
Protected _typeId As Integer
Protected _title As String
Protected _author As String
Protected _original As String
Protected _updateTime As DateTime
Protected _content As String
Protected _clickCount As Integer

Public Property Id() As Integer
    Get
        Return _id
    End Get
    Set(ByVal Value As Integer)
        _id = Value
    End Set
End Property

Public Property TypeId() As Integer
    Get
        Return _typeId
    End Get
    Set(ByVal Value As Integer)
        _typeId = Value
    End Set
End Property

Public Property Title() As String

End Property

Public Property Author() As String

End Property

Public Property original() As String

End Property

Public Property UpdateTime() As DateTime

End Property

Public Property Content() As String

End Property

Public Property ClickCount() As Integer

End Property
End Class

就像这样,把网站里所有的表都试着对象化。然后再定义对象相关的记录集,上边定义的是单个的新闻对象,再定义一个新闻的记录集。

Public Class Newss
......
End Class

第三步:定义一套公共的数据访问方法。
定义一些操纵数据库、执行存储过程的公共方法。
第四步:编写基于对象的方法层。如:

    Public Function ReadNews(ByVal ID As Integer) As News
    End Function

函数返回的就是一个新闻对象。根据功能的需要,一般还会定义一些相关的函数,如:

'读取新闻列表
Public Function ReadNewss(ByVal newsType As eNewsType, ByVal nCount As Integer) As News

End Function
'增加一新闻
Public Function InsertNews(ByVal n As News) As Integer

End Function

'更新一条新闻
Public Function UpdateNews(ByVal n As News) As Integer

End Function

'删除一条新闻
Public Function DeleteNews(ByVal ID As Integer) As Integer

End Function

这样来做,网站开发可以分成对象层、数据访问层、方法层、表现层。而程序员则只需要提供表现层所需要的方法。这样一来,在表现层需要显示新闻列表时,页面设计师只需要用.net中的Repeater控件,如下代码:

<asp:Repeater ID="topNewsList" runat="server" >
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    <ItemTemplate>
        <li><a href="shownews.asp?id=<%#Container.DataItem("id")%>"><%#Container.DataItem("title")%></a></li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>

而在表现层的程序代码中我们只需要加上:

topNewsList.DataSource = New facade.newsFacade().ReadNewss(eNewsType, newsCount)

这样的话,程序员基本上可以与HTML完全脱离了。而且这样的话,整个项目组的成员都可以并行工作了。能非常明显地提高整个项目的开发效率。况且现在web2.0模式的兴起,对后台数据库开发提出了更高的要求。如豆瓣网、365Kit等网站,后台的数据库挖掘工作是非常复杂的。所以在分工明晰的今天,除了HTML代码,其它有很多更重要的工作等待网站程序员去做。

3:以用户为中心的设计,离不开前端开发工程师。

如果你觉得脱离了熟悉的HTML代码,你有点舍不得的话,不要紧。干脆将自己推到web技术的风口浪尖。做一个成产品设计关系密切的前台开发工程师。

随着网络、计算机硬件设施的不断提升,我们正在朝着富客户端的方向前进。为了产品的易用性,给网站程序员提出了非常高的要求。前台开发工程师这个岗位也越来越显得重要。这个职位应该说也是近年才有的,而这个职位也不是一般的网页设计师能胜任的,所以网站程序员也自然分开了,分后台开发工程师和前台开发工程师,这个方向应该说也是一个非常好的选择。而这个则需要你对web标准有一个比较全面的认识。既需要你对javascript非常了解,同时也需要你对DOM文档对象模型、CSS表现层样式代码、ajax异步都非常了解。相关的例子就非常多了,比如:在线注册表单的即时检测、密码强度的提示、多级下拉菜单的联动等。对于改善用户体验、提高网站访问速度都有非常重要的作用。

网易招聘的测试题

三月 3rd, 2007

我面试的职位是页面工程师,测试题是用DIV + CSS完成美工提供的效果图
之所以现在才放上来,是怕影响他们的招聘工作。现在应该已经算是过期的,拿出来与大家分享一下。

预览地址
代码结构非常简单,所以就不提供打包下载了。需要的朋友可以通过查看源码找到相关的css/js/img。

求职中,博客暂停更新!

二月 28th, 2007

下边是我的求职资料,如果您有相关的消息或意向,欢迎与我联系!

[个人资料]
性别:男
现所在地:江西南昌
出生年月:1980-08-23
婚姻状况:未婚
求职意向:页面工程师/页面架构
最高学历:大专
学历性质:高等教育自学考试

[个人成长经历]

1998年高中毕业
1998年底参军。
2000年底退伍。
2001年在广东惠州打工。
2002年返回大学进修。
2004年开始网站建设相关工作。

[个人作品]

http://www.jxbw.com

江西博微新技术有限公司主页
采用XHTML+CSS设计,本人负责整站的设计、开发、维护。

http://www.cecm.net.cn

中国电力工程造价信息网
采用XHTML+CSS设计,本人负责页面架构、制作、web表现层的程序代码编写、网站数据库的设计。该项目另外二名成员分别负责效果图制作(美工)以及底层代码开发。包括方法层、数据访问层的代码编写以及数据库存储过程编写等。

http://www.iwcn.net

个人博客

[发表文章]

(发表于蓝色经典的部分技术文章)

影响SEO的页面制作细节

http://www.blueidea.com/tech/web/2007/4468.asp

页面制作人员的修练之道

http://www.blueidea.com/tech/web/2007/4431.asp

基于标准的web项目开发模式探索

http://www.blueidea.com/tech/web/2006/4347.asp

改善用户体验之密码强度提示

http://www.blueidea.com/tech/web/2006/4324.asp

RSS 在线阅读器开发实例

http://www.blueidea.com/tech/program/2006/4298.asp

改善用户体验之alert提示效果

http://www.blueidea.com/tech/web/2006/4185.asp

[联系方式]

电邮:jxdawei(at)163.com

毕业了,辞职了!

二月 14th, 2007

一边工作一边考试的日子告一段落了。前几天终于拿到了《高等教育自学考试》的大专毕业证。

年底了,又要重新考虑自己的工作了。明年会在哪里?我想应该是做与web标准相关的页面制作类的工作吧。或者运气好一点的话应该去做一些web产品设计。

最近面试了很多家网络公司的W3C页面工程师职位,其中网易还发了一份测试题:
[制作XHTML页面]
要求:用DIV + CSS设计。
有兴趣的朋友可以打开效果图试一下。年后回来再把页面代码发出来!

影响SEO的页面制作细节

一月 30th, 2007

1、将css与javascript全部用下边的方法分离到外部文件中去。

link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot; media=&quot;all&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;include/common.js&quot;&gt;&lt;/script&gt;

让html代码最大可能的只是用来显示实际内容。

2、采用xhtml代码编写页面,抛弃传统Table布局模式,去掉页面中的例如font/bgcolor等格式化控制标签。用符合web标准的代码来制作页面。这样能够让xhtml代码结构化、语义化。提高页面代码的可读性。

3、采用了上边的方法你会发现你的html代码会变得非常小,当然如果可以的话。让它变得更小。太大的页面会影响搜索引擎的处理速度。一般通过xhtml+css设计的网页,html代码应该可以控制在50K以内。大家可以去看一下用web标准重构得比较好的网站。

4、用好图片的alt标签,合理的使用页面关键字去描述图片,这样能增加页面的关键字密度。

5、尽可能少地使用javascript来做与内容相关的事情,例如用document.write去显示正文。这样会影响搜索引擎对页面内容的搜索。

6、千万不要去javascript来实现你网站的导航。那样会让搜索引擎迷失方向。

7、每个页面的关键字尽可能出现在页面的标题,也就是头部的Title标签中。当然,要合理应用,太要太长,更别用大量与页面内容无关的网络热门关键字。因为那就不是优化而是在作弊。

8、尽量在每个页面代码中合理使用<h1><h2>等标签并让你的关键字出现在<h1>标签中,让页面的文档结构更清晰。

我是做网页制作的,所以SEO的诸多专业技术及算法我都不是非常了解。如果您想了解更多关于这方法的知识,建议您访问一些国内知名的SEO优化类的网站,比如点石互动等。在那里你能查阅到很多关于“反向链接”、“页面PR值”等专业知识。这里只是将我在页面制作的过程中涉及到的一些细节问题拿出来和大家探讨一下。由此也可以说明为什么基于web标准设计的网站会更有利于SEO了。

如果您不打算花钱去请专业的SEOer来为您的网站做优化,那么可以让页面制作人员在制作上注意一些细节。相信这样免费的一些细节也能达到一个比较好的效果。

暂时总结以上几点,若有遗漏欢迎补上。

页面制作人员的修练之道(五)结束语

一月 18th, 2007

页面制作人员应该了解的知识
如果说美工只负责出效果图,程序员只负责数据处理的话。那么网页制作人员需要负责的东西无疑是最多的。

  1. XHTML(这是最根本的,也是最重要的。)
  2. CSS(不学会这个,你根本没有办法去实现美工所画出来的效果图。)
  3. Javascript(虽然说要注重结构、表现、行为的脱离,但很多时候我们也需要如何用javascript和css配合作战。)
  4. Dom(文档对象模型,配合javascript使用。)
  5. SEO(搜索引擎优化,虽然现在有专门的做SEO的公司,但不是每个网站都会去请那些人来做这种事情的,如果你会了你就会知道其实很多优化是页面代码上的优化。)
  6. 网站的可用性(比如在NoScript环境下的正常显示等。)
  7. 网站的易用性(美工画出来的图是没有行为的,而用户是可以在网页上做事的,所以如何让页面的易用性,这是你应该考虑的,除非你们还有专门的UE人员。)
  8. 了解后台程序开发(对后台开发的了解有利于和开发人员进行沟通,不然会很麻烦。)

5-8内容为个人体会,最重要的是上边四点。

我所使用的工具软件列表

  • Editplus-用来编写html代码和javascript代码。
  • TopStyle-用来编写css代码。
  • FrontPage-虽然说大家都说DW比这个要好,但我是一直用着它的,现在基本手写了,但偶尔会用用。有感情了。
  • Firefox-浏览器,强大的插件功能吸引了我。
  • Opera-浏览器,多装几个,看一下你的作品在多种浏览器中是不是一样。
  • Visual Studio-项目大多是用vs.net做的,但我不建议你去用2003做前台页面,2005会稍好一点。

我推荐的资源列表
网站

  • http://www.w3.org
  • http://www.blueidea.com
  • http://www.w3cn.org
  • http://www.csszengarden.com/
  • http://yuntian.cnblogs.com/
  • http://sheneyan.com/
  • http://andy.andymao.com/
  • http://www.forest53.com/

教程

  • 样式表中文手册 -苏昱
  • 样式表滤镜中文手册 -苏昱
  • 文档对象模型中文手册 -苏昱
  • 在30天内打造更具亲和力的网站
  • 网站重构
  • 《CSS网站布局实录》
  • javascript宝典(第四版)

页面制作人员的修练之道(四)重新认识javascript

一月 18th, 2007

Javascript是什么?二年前,我说它是一个小丑,因为那时候在很多网页制作人员的眼中,它就约等于特效,比如跑马灯效果、弹出窗口、网页关闭时弹出一个欢迎再来等等,还有专门的网站来收集javascript的特效,并将其归类为窗口特效、文字特效、图片特效等。这足以说明几年前javascript在网页制作领域所处于的小丑地位了。

但现在,如果你还说javascript是小丑,我会反对你。自从AJAX应用的兴起、web标准的提倡,可以说javascript和asp、asp.net、jsp等后台开发语言一样,处于不可轻视的地位。这就是“网页前台开发”。

网页,我认为大致可分为二类:一类为呈现内容型的,如一般的内容页面。另一类就是注重应用型的,如以Gmail为首的。当然,一般的网页都是二者都有的,只是孰轻孰重罢了。在注重用户体验、交互的今天,网页前台脚本开发担任了非常重要的角色。

网页制作行业的分工与合作模式现在还处于摸索阶段,所以说,对于行为层代码的编写工作到底属于网页制作人员还是属于开发人员的。我觉得应该看各个开发团队的具体情况而定。不管怎么样,作为页面制作人员我觉得还是应该对Javascript以及DOM有所了解的。

页面制作人员的修练之道(三)理解表现与内容相脱离

一月 18th, 2007

表现与内容相脱离,这应该算是web标准所提倡的核心了。按w3c提出的标准,将网页划分成了三大块,即结构层、表现层、行为层。下边我们还是以上一节中的效果图为例,来了解这三块内容。您可以在新窗口中打开这个页面

Html代码:从页面代码的角度上看,我们应该说只能看到这些东西:就是一个标题,以及一个详细列表。所以说在脑海中初步形成的代码应该是

<h4>标题</h4>
<ul>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
	...
	<li>列表项</li>
</ul>

CSS代码:就是大家看到的视觉效果。通过更换css文件,我们可以在不修练html代码的基础上任意变换这个页面的视觉效果。所有的效果应该是与html内容本身没有关系的。因为视觉效果仅仅是为了让页面更漂亮、更容易让用户去接受。

Javascript:细心的朋友会发现,标题栏左侧有一个小三角形。通过点击这个图标,我们可以完成一个收缩功能,这就是行为,也是与页面内容无关的东西。

三种角色负责三个不同的分工,尽量不要去相互影响。

一个网页,应该以它的主体内容为根本,所以我主张。先编写html代码,在编写html代码时,我们尽量不去考虑为了迎合它的表现形式,这样才能写出结构化、语义化的页面代码。当然,在CSS实现以及行为脚本时,我们也允许最小程度的去修改现有的html代码,毕竟还有很多客观因素在制约着。但这绝不意味着像某些网站,纯粹为了通过w3c验证、为了实现某些不合理的效果图去写出类似于N个div嵌套、满页都是div的现象。时下所流行的一种叫法“div+css”让很多初学者对web标准产生了严重的误解,认为就是用div去代替以前的table,会产生“满页尽是div”的错误结论。
这种表现与内容相脱离的设计思想,对于页面制作人员而言,也同时提出了更高的要求:
1.抛弃"所见即所得"的网页编辑软件,改用手写。亲身去感受每一个html标签的真实意义。你会发现除了table标签,原来还有那么多有用而根本没有胜过的标签。
2.以前只用DW、FP等软件拉出无数个表格然后填充些东西进去就能保存为网页的时代过去了,你要懂每一个html标签它应该布置在网页的什么位置。
3.页面html代码不负责页面的效果,它只是告诉浏览器我这个页面的结构和内容,所以刚开始时,你会觉得符合标准的页面做出来都比较难看,那是因为你还没有学会CSS,就算学会了,你还没有经过多次的这种html代码与css代码分开编写的实践。
4.要尽量让页面上的每一个标签都有它的实际意义。不要让html代码为css而活着。

页面制作人员的修练之道(二)基于web标准的网页基本特征

一月 18th, 2007

从三年前开始接触网页到现在,我亲身经历了国内大多数网站的web标准重构。自己在不断的学习过程中也总结出了一点符合web标准的网页的一般特征,和大家一起分享一下。
1、页面代码容易读懂了
举一个简单的例子,按以前如果要实现一个页面的布局,一般是使用表格来划分整个页面。如:

<TABLE width="100%" cellpadding="5" cellspacing="1" bgcolor="blue">
<TR>
	<TD bgcolor="silver" colspan="2" align="center" align="right">
		<TABLE width="90%">
		<TR>
			<TD>首页</TD>
			<TD>栏目一</TD>
			<TD>栏目二</TD>
			<TD>栏目三</TD>
			<TD>栏目四</TD>
		</TR>
		</TABLE>
	</TD>
</TR>
<TR height="400">
	<TD width="25%" bgcolor="white">左侧内容</TD>
	<TD width="75%" bgcolor="white">右侧内容</TD>
</TR>
<TR>
	<TD colspan="2" bgcolor="#f8f8f8" align="center">尾部文字</TD>
</TR>
</TABLE>

而我们现在,一般会简化成这样:

<div id="header">
    <menu>
        <li>首页</li>
        <li>栏目一</li>
        <li>栏目二</li>
        <li>栏目三</li>
        <li>栏目四</li>
    </menu>
</div>
<div id="left">左侧内容</div>
<div id="right">右侧内容</div>
<div id="bottom">尾部内容</div>

然后再通过外部的CSS对页面上的元素进行布局以及美化效果,这样的代码相对于前一段应该说更精短,更易读懂。而且这个易读性,你还可以理解成搜索引擎也比较容易读懂你的内容、聋哑等有障碍人士也能通过一些特殊设备来读懂你的内容、用手机wap上网也能比较顺畅地访问你的页面。
2、页面变小了
同样的网页在新的标准下制作和以前的传统制作相比,代码一般能节约40%以上,当然这是由于以下原因造成的:
a.通常在符合标准的页面中,已经不再直接使用><td bgcolor="red" align="center" ….></td>这种方法直接去控制显示样式了,而是放在网页之外的CSS文件中去表现。
b.抛弃了表格用来布局的做法后,N个表格重复嵌套的冗余代码也就不再出现了。
c.页面上已经不再直接使用图片进行装饰了,而是采用在CSS中使用背景图去实现。当然,具有实际意义的图片还是应该存在的,比如网站的Logo图标、广告图片、新闻图片以及其它不是用来装饰页面效果的、是属于实际内容的一部分的那类图片。
d.大量的javascript代码也被移植到了网页外部,在页面中将精简成<script type="text/javascript" src="../js/**.js"></script>。

当然以上所谈的特征非常的表面化、也非常的局限,只是就页面代码方面描述了比较浅显的特征,针对于页面制作人员而言,也同时提出了更高的要求,会在后边的文章中做详细的讲解。
有兴趣的朋友可以照着下边的这个效果图去用传统的方法试着做一下,然后再查看这个页面的html代码,是不是觉得的确精短了很多?

到底如何去培养自己去编写精练的、有语义的、结构非常清晰的html代码呢。在下一节中我们来讨论如何将一个美工画出来的效果图拆分成结构层、表现层以及行为层,以及如何正确处理三者之间的关系。

页面制作人员的修炼之道(一):前言

一月 17th, 2007

[写本文的目的]:与您分享如何学习基于web标准的网页制作。
[本文适合人群]:网页制作初学者。有一定的页面制作基础,并想学或正在学习web标准的朋友们。
[文章内容摘要]:
1、前言-新形势下的网页制作以及职业定位。
2、基于web标准的网页有哪些基本特征。
3、如何理解结构层、表现层、行为层代码的脱离。
4、编写符合标准的(x)html代码的一般方法。
5、用CSS美化页面。
6、正确认识Javascript。
7、网页制作人员需要了解哪些知识。
8、我常用的工具软件介绍。
9、推荐的网站列表。
[备注]:
本文只是从理解以及概念上去分享网页制作的学习方法和步骤。力求通俗易懂,所以没有任何具体的代码、规范等内容,比如Xhtml的代码规范、CSS样式手册等具体内容我将会在文章的最后“推荐的资源列表”中将我所看到过或学习过的教程一一列出。

新形势下的网页制作以及职业定位。

随着网络的发展,前几年还只是国外网站以及国内少数个人网站才会去实施的web标准,现在已经是大行其道了。上至新浪、163等门户网站,下至刚从学校毕业的大学生们的个人网站。到处都是它的踪影。
网站建设的分工也从原来的一人承包(从效果到页面到程序代码)的模式也逐步转变成Web Designer + Page Builder + Programer 的项目组合作开发模式。正是由于web标准的兴起,“页面工程师”这个称谓也慢慢走上了舞台并担任起了相当重要的角色。
曾在蓝色经典上看到Aether帖出来的土豆网(tudou.com)的招聘信息,感觉这个招聘信息非常的有代表性,原文如下:[quote]
页面工程师,1人
技能要求:
1、对W3C网页标准(Web Standards)有较深理解;
·精通结构层代码(XHTML)和样式层代码(CSS)。
·对语义、结构与内容分离等有深刻理解;
·熟悉Javascript,并对行为层编程机理有一定理解,并了解后台程序制作流程。
2、有成熟作品,目前将主要从事代码方向工作;
3、精通Javascript优先。
工作内容:
配合页面架构(Web Architect,负责总体规划),完成页面制作(Page Builder)。
其上游是页面设计(Web Designer),下游是网站程序员(Programer)。
[/quote]
我非常的认同这种职业定位,所以转了过来。或许这将是未来比较流行的网站制作过程中的项目组分工合作的模式吧。