2007-05-17
如今,许多网站上都会用到统计表,于是我们需要为它们制作一些漂亮的图片来呈现,自然而然又想利用最少的带宽和最简单的标记。在把这些图片放到网页上的方法,一个是插入图片,一个是背景图片。

插入图片的代码固然简单,但是没有语义,跨平台的展示性并不强。那么背景图片呢,在更加没有语义的同时我们还要面临背景图片的两个问题:1.并非所有浏览器的默认设置是可以打印背景图片 2.用户不能复制图片中的数据到word文档或者outlook等其它编辑器。当然,我们可以告诉用户更改浏览器的打印设置,令其可以打印背景图片,但是要求用户这样做明显不是个好主意。接下来,我要介绍是另外一种方法,与以上两种方法完全不同哦~

什么是图表?

举个例子吧,比如:一个网站每月的浏览次数统计。我们需要画出一张下面这样的图表:
2007-04-06
从业三年来,不断听人说CSS+DIV,甚至有些公司的招聘广告也是要求应聘者会“DIV+CSS”,这说法令人实在是受不了了。其实我也知道,说这话的人真正的意图是想说标准化网页制作。每当认识的人在我面前把这两个词强行组合在一起说出来的时候我都会马上给予纠正和解释。今天无意中去看蓝色的帖子,一楼一楼还是说的让人受不了的“CSS+DIV”,忍不住给re了一下。

标准化网页制作,是用xhtml代码结合CSS样式表来书写网页。Div只是xhtml代码中的一个没有语义的标签而已,纯粹Div+Css制作的网页那不是符合...
2007-03-01
当我们自豪地甩开table布局方式时,css+xhtml的布局也常常令我们苦恼不已。经典的3像素问题,莫名其妙的高度没有自适应等等,都是源于css里的float!

我聪明可爱的同行们一般都是在容纳了浮动对象的容器内最后放一个空的div,给其设置属性为clear:both。这样一来确实解决了不少讨厌的浮动问题,但是想想看,我们做标准是为了什么?一个空的div,浪费代码不说,还没有任何语义!

几个月前我终于找到一套纯css方法,不需要在xhtml代码里添加任何无用代码。废话不多说...
2006-11-02

前段写过一篇更人性化的交互表单表现形式,今天再来推荐一款更具亲和力的表单结构。其好处在于:1.标签语义化增强。2.用户体验更好。

好处1的解释:充分运用xhtml固有标签label,将“用户名”、“密码”、“重复密码”等字符放进label标签里,令其具备语义。

好处2的解释:给label赋予for属性,并给后面的input赋予相同的id,用户在点击label里的文字时,对应的input被激活,变得可输入。

废话少说,代码贴上:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Form demo</title>
<style type="text/css">
<!--
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#666666;
 background:#fff;
 text-align:center;

}

* {
 margin:0;
 padding:0;
}

a {
 color:#1E7ACE;
 text-decoration:none; 
}

a:hover {
 color:#000;
 text-decoration:underline;
}
h3 {
 font-size:14px;
 font-weight:bold;
}

pre,p {
 color:#1E7ACE;
 margin:4px;
}
input, select,textarea {
 padding:1px;
 margin:2px;
 font-size:11px;
}
.buttom{
 padding:1px 10px;
 font-size:12px;
 border:1px #1E7ACE solid;
 background:#D0F0FF;
}
#formwrapper {
 width:450px;
 margin:15px auto;
 padding:20px;
 text-align:left;
 border:1px solid #A4CDF2;
}

fieldset {
 padding:10px;
 margin-top:5px;
 border:1px solid #A4CDF2;
 background:#fff;
}

fieldset legend {
 color:#1E7ACE;
 font-weight:bold;
 padding:3px 20px 3px 20px;
 border:1px solid #A4CDF2; 
 background:#fff;
}

fieldset label {
 float:left;
 width:120px;
 text-align:right;
 padding:4px;
 margin:1px;
}

fieldset div {
 clear:left;
 margin-bottom:2px;
}

.enter{ text-align:center;}
.clear {
 clear:both;
}

-->
</style>
</head>

<body>
<div id="formwrapper">

<h3>已注册用户登录</h3>
 <form action="" method="post" name="apLogin" id="apLogin">
 <fieldset>
  <legend>用户登录</legend>
  <div>
   <label for="Name">用户名</label>
   <input type="text" name="Name" id="Name" size="18" maxlength="30" /><br />
  </div>
  <div>
   <label for="password">密码</label>
   <input type="password" name="password" id="password" size="18" maxlength="15" /><br />
  </div>
  <div class="cookiechk">
   <label><input type="checkbox" name="CookieYN" id="CookieYN" value="1" /> <a href="#" title="选择是否记录您的信息">记住我</a></label>
   <input name="login791" type="submit" class="buttom" value="登录" />
  </div> 
  <div class="forgotpass"><a href="#">您忘记密码?</a></div> 
 </fieldset>
 </form><br />
 <h3>未注册创建帐户</h3>
 <form action="" method="post" name="apForm" id="apForm">
 <fieldset>
  <legend>用户注册</legend>
  <p><strong>您的电子邮箱不会被公布出去,但是必须填写.</strong> 在您注册之前请先认真阅读服务条款.</p>
  <div>
  <label for="Name">用户名</label>
  <input type="text" name="Name" id="Name" value="" size="20" maxlength="30" />
  *(最多30个字符)<br /> 
 </div>
  <div>
  <label for="Email">电子邮箱</label>
  <input type="text" name="Email" id="Email" value="" size="20" maxlength="150" /> *<br /> 
 </div> 
  <div>
  <label for="password">密码</label>
  <input type="password" name="password" id="password" size="18" maxlength="15" />
  *(最多15个字符)<br />
 </div>
  <div>
  <label for="confirm_password">重复密码</label>
  <input type="password" name="confirm_password" id="confirm_password" size="18" maxlength="15" />
  *<br />

 </div>
  <div>
  <label for="AgreeToTerms">同意服务条款</label>
      <input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" />
      <a href="#" title="您是否同意服务条款">先看看条款?</a> * </div>  
  <div class="enter">
     <input name="create791" type="submit" class="buttom" value="提交" />
     <input name="Submit" type="reset" class="buttom" value="重置" />
 </div>

  <p><strong>* 在提交您的注册信息时, 我们认为您已经同意了我们的服务条款.<br />
     * 这些条款可能在未经您同意的时候进行修改.</strong></p> 
 </fieldset>
 </form>
</div>
</body>
</html>

2006-09-13

一个沉重的话题:代码工程师的出路在哪里?在国内,大部分搞技术写代码的人到了三十岁左右都要想办法另谋出路,不用另谋出路的是混入管理层的人们,混不进去的怎么办?程序员大多冒险去成立自己的公司,其中不乏成功者,战绩赫赫。然而程序员毕竟是做技术出身,从商不是他们的专长,因而在商海中触礁者不计其数。

那么Web重构工程师,俗称的网页制作出路又在哪里?我们的薪资水平普遍不如程序员高,到三十岁的时候拿不出本钱来组建自己的公司,连台服务器都租不到,拿什么创业?我们不会编程,要建网站就必须雇人。就算你家底丰厚开得起公司,办得起网站,那么你要开什么样的网站?大家都知道,现在的网站不好做。条条路都不好走,三十岁了,我们很迷惘。。

今日与同道们一起鉴赏国外的优秀Web标准站点,大家忍不住一片唏嘘。为什么国内的重构牛人那么少,我们似乎只能捡国外的残渣剩汤。很多人想学重构,但是找不到好的教材,就像我学js一样不得要领。大家都只知道《网站重构》,但连此书的译者阿捷自己也说它更适合管理者去读。想学习实战技巧该读哪本呢?据说《CSS权威指南》不错,我没有看过。每个人的学习方法不一样,我是那种必须对照实例才能明白的笨人,再好的书没有实例我也看不进去。

似乎离题了,接着说出路。造成这种三十岁现象的起因是什么?大家说因为过了三十岁很多公司就不愿意再接受了,另寻出路其实是逼不得已。为什么过三十就没有公司要了?因为他们更愿意要那些工作年限短的年轻孩子们,薪水相对低,可塑性强。于是造就了三十岁现象,这其实非常的可惜。三十岁就不能写代码了么?错,他们思想更成熟,经验更丰富,因为有着深厚的功底,因此也更容易接受新技术、钻研新技术。国外的代码工程师没有三十岁现象,写代码是他们终生的工作,不会怕失业,社会地位高。

啰嗦了这么多,还是不明白,我们的代码工程师们,出路到底在哪里?

2006-09-08

为什么叫重构工程师?因为我们不同于以往的网页制作人员,我们推翻了以往的table布局工作方式,而且采用xhtml+css来构建web界面。目前这个职位有很多种叫法,正式的职位名称有叫网页制作的,叫Web界面工作师的,叫UI设计师的,叫Web构建工程师的……林林总总,不一而同。南方一些城市对此职位俗称页面仔,个人对此称谓很不感冒,它让我联想到浑身臭汗满头油污的某类人,何况这个职业的从业者不一定都是男性,我的领导开玩笑地说与此对应的叫页面妞,汗。。。后来引入一个新名词:Csser,而WEB标准不是某一个标准,而是一系列标准的集合:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。因此称我们为Csser,过于片面。

很多未曾有过项目经验的重构爱好者或者初入此道的朋友对我们的工作流程很好奇,很迷惑,不知道我们如何与团队一起开发网站。而这个问题应该说是面试这个岗位最常见的一道面试题,如果你对自己所面试的职位工作流程一无所知,很难说你一定能得到这份工作,即使你的代码写得再完美也可能惨遭淘汰。

总结一下我的经验吧,其实也是一个常识。

做一个网站或者一个项目,首先得产品设计者提出需求文档,这里的产品设计者指的是产品经理或者网站策划。就如盖一栋房子,这个房子的雏形在他们脑子里酝酿,是要盖20层还是30层,三居室还是两居室,要不要阳台等等,这些由他们来决定。实施到网站中就如某个页面要不要放登录框,哪些页面必须有左侧菜单。

产品经理出需求文档,提交上级领导批示,通过后交由界面设计师出设计稿,设计师将按产品经理的要求设计效果图,这个时候,房子刷什么颜色的墙壁,屋内放些什么样的装修品都由设计师来掌握。效果图出来后请产品经理、项目经理及上级领导再批示,一般是先设计首页,首页风格确定并通过后再依此风格设计其它页面。为了高效完成网站开发,一般来说首页效果图确定之后网页制作人员也就是重构工作师就可以开始制作页面了。与此同时,设计师在设计首页之外其它的页面。

需要特别注意的是,工程师们制作页面的时候不能只是简单地按效果图来堆砌代码。拿到效果图时必须在大脑里对它进行立体思维,页面上哪些是静态的,哪些将是程序动态生成的,简单的说,就是将页面上的内容模块化。就像往一个盒子里放东西,画一个九宫格,每个格子里是一个模块,任意哪一个格子里的模块都可以一个整体挪往别处,互相调换。这样做的目的是为了便于程序开发,利于动态输入页面内容。在此我还想给各位重构工程师们一个小小的建议:书写页面代码时最好养成写注释的习惯。比如在登录模块的开始和结尾处用注释语句标明,这样会令以后的修改工作方便得多,也使程序员一目了然,不至于在进行程序输出时多输出或者少输出结构标签,甚至还有的套错容器。

当页面中需要加入某些特殊的交互效果时,工程师利用js来实现。比如隐藏或展开左侧菜单栏,页面中的弹出层等等,一般都是重构工程师份内之事。

重构工程师按效果图和产品经理的要求制作完页面,实现完前台交互效果,接下来程序员上场介入开发。这个时候,我们千万别以为自己已经完事了,高枕无忧了。要知道,程序员不是专业的重构工程师,他们中很多人对Web标准并不太熟悉,所以你必须时时监督引导他们按标准的代码输入页面,比如:标签小写,属性必须有属性值,属性值必须加上双引号,等等。琐碎的事情不是?如果你热爱你的工作,热爱Web重构,琐碎也能变乐趣。经常有程序员跑来问我,唉呀,怎么一样的结构,一样的CSS,偏偏我输出的页面与你交给我的demo表现不一样呢?这个时候我第一反映是检查页面DTD。许多程序员有一个习惯,就是有意无意把DTD忽略掉,或者干脆不写,或者与我们demo中的DTD不符。还有的原因是CSS文件调用不当,或者路径不对,或者head部分根本没有link语句。总之,程序员在开发过程中随时会出现各种或大或小的界面表现问题,我们不能以为交了demo就无事可做了,在项目正式上线之前,随时都应该处于备战状态。

程序开发完成后由测试部门进行测试。你得保证你的页面在各款浏览器下表现正常。一般我们在最初书写代码的时候已经有所注意,该写hack的写hack。如果你也是这么做的话,那么这时候你可以悠哉悠哉地端上一杯清香的绿茶去天台透透气、吹吹风了,呼吸一下室外的空气^_^

2006-09-08

从朋友处获得新名词:redesign,于是早有的想法终于成型,俺要写些关于web重构的文字,一直找不到合适的域名和blog主题,这次有了!

iZ设计的模板真是不错,据说是改装的wordpress一个风格,但感觉更清新,用户也可以自己设计个背景图,就像我,不是天蝎座,所以得把天蝎的背景图去掉,等晚上有时间再来改^_^

共1页 1