web进行时|baobao's Blog

集结号的观感

kurt_qian — Mon, 28 Jan 2008 11:42:00 +0800

昨天去搜秀影城看了集结号，看完后觉得这是在是一部国内拍的非常好的一部影片，兄弟间生死与共的感情，军人对命令的绝对服从，当战争的残酷把指导员王金存的懦弱全部蚕食，在最后时刻爆发出了坚定的斗志，谷子地在全连47名战友倒下之后成了唯一的幸存者，在随后几年为了给战友追认为烈士的称号想尽了一切的办法，最终在战役结束10年之后终于由司号员吹响了战斗结束的集结号。

看到那帮9连的战士为了共同的信仰同仇敌忾，一个接着一个倒下，我的心情也是跌宕起伏，相比较我们这一辈人缺失的信仰，团结，坚韧之可贵精神，我不禁对那时的战士产生了由衷的崇敬之情，和平年代，经济年代，物质生活和条件有了巨大的改善，但是我们内心深处最渴望得到的东西，比如别人的尊重和认同感，我不禁产生了一个很大的疑问，现在的我们精神世界丰富么？我们现在这代人的人生意义是什么？当初学校学习的什么报效祖国，立志成才感觉都是空话，在这个物欲横流的年代，人几乎都已变的冷漠，自私，记得一次打车时听一位的哥说：现在时代变了，人不能做损人的事情，但是不做利己的事情那就是个笨蛋。在现在物质生活上去的同时，我们的精神世界呢？越来越觉得一个人的价值观，道德观的培养更比那些个不实用的课本知识来得重要，因为前者可以培养你的人生目标，而后者只是你将来谋生的手段

房屋出租信息

kurt_qian — Fri, 09 Nov 2007 14:44:00 +0800

西坝河一单间出租，自己的房子，月租1100，水电，家用电器基本齐全，简单装修，有朋友感兴趣的请留言

现在的工作，现在的公司

kurt_qian — Fri, 09 Nov 2007 14:40:00 +0800

6月来到了一家做域名的互联网公司做开发，域名被称作是互联网界的房地产，但几个月了解和亲身实践下来，发现不像外界说的那么邪乎，这是一个烧钱的行业，试想一个.com域名最低也要60-70RMB，好的域名更是在几千甚至几万以上，没一定的资金实力根本玩不起，公司现在的战略是we monetize chinese traffic,而且现阶段.cn一元一个把投资的门槛降低了，正适合普通米农门投资，想想当初对这行业的基础几乎为0，现在真有点不识庐山真面目，只缘身在此山中的味道了

2007年来了

kurt_qian — Tue, 27 Feb 2007 15:17:00 +0800

过完年了，从家回来之后第一天上班，team leader不在了，虽然年前就已经知道这个消息了，但是新的一年我还是有所期盼，主要是自己的工作和事业的关系，web开发现在已然成为自己的最大兴趣了，但可惜还不是我的职业，虽说还是在做和IT相关的工作，但现在的工作显然缺乏创造性，我一直在关注互联网，虽然有人说它是泡沫，有人说IT分销很不错，至少在IT这个变化非常快的领域它相对来说还比较稳定，但是我一直觉得现在的职位和我的能力差距比较大，content前途过去也一直是一波三折，不知道今年做BPO之后是否能够带来转机，我需要未雨绸缪，提高自身的综合素质，另外，明白了一个道理，除了本职工作之外的劳动一定要有报酬的，不然到最后竹篮打水一场空，吃亏的还在自己

滑雪之初体验

kurt_qian — Sun, 04 Feb 2007 13:25:00 +0800

第一次去滑雪，而且是赶在立春前的最后一天，一直觉得这是一项挺刺激的运动，看看那些个极限运动员在电视里的表演，单板的，双板的从倾斜的陡坡上一跃而下而且都能做出各种高难度的技术动作，当然那些个都是专业水准的，对于我这个门外汉而言，能从斜坡上顺利的滑下来就已经不错了，滑雪出体验让我喜欢这项上了运动，一口气在初级道上滑了10多个来回，除了开始有几次没有掌握好重心，让自己偏向了滑道的左侧，其余都是有条不紊的顺利滑了下来，下午还去中级道尝试了一把，结果第一个稍陡的斜坡一紧张失去了重心自己便摔了个大跟头，因为速度一块心理就有点发慌了，后来还是决定先在初级道上把身体的平衡掌握好了下此再去尝试中级道，好在自己的领悟能力较快，在初级道上一直没有摔跤，自信和稳定的心理是这项运动给我带来的最大收获。
本人用v705拍摄的照片已经放在了flickr相册里面了，其中一些照片由于光线有些暗所以我用picasa处理了一下，增加了补光和高光效果，现在就和朋友们一起分享。

由DOM scripting想到的

kurt_qian — Tue, 30 Jan 2007 14:10:00 +0800

要想成为真正的web designer，有三门技术是一定要精通的，那便是xhtml，css,DOM，不仅仅因为现在他们都有了统一的W3C制定的标准，而且各个浏览器都已经普遍支持，最近在看的Jeremy Keith写的DOM scripting可以说是让我对网页的树层结构和交互技术有了新的认识，对于一个成功的网站来说structure,presentation,behavior三者缺一不可，我学到了不仅DOM能用来组织，建立网页的node，还能控制css的表现，可以说用好DOM也是网站不可缺少的一项技能，这本书的条理很清晰，最后用了一个乐队的网页实例来概括所有学到的知识点，相比较来说，国内能写出这种水平教材的人太少了，再看看国外很多的技术型网站和blog原创的东西很多，但中国大部分都是copy和转载，看来不断的实践和创新，多看国外大师们的精彩作品，我才能跟上这个互联网的时代，要厚积而勃发

如何设计简洁易用的表单

kurt_qian — Thu, 18 Jan 2007 12:00:00 +0800

以text和label为例，用<fieldset>分成两组来组织form元素，而<legend>用来描述每组的类似于title的功能，默认文本框是水平排列，可以给label用display:block来形成垂直排列的效果，别的如dropdownlist,checkbox,radio等更多内容参考:

http://www.netmag.co.uk/zine/home/designing-simple-accessible-forms

代码如下:

<html>
<head>
<style>
fieldset{
border:1px solid #666666;
background-color:#cccccc;
}
legend{
font-size:bigger;
font-weight: bolder;
}
label{
display:block;
}
input{
color:#ccc;
}
input:focus{
background-color: #ffffcc;
color:#000000;S
}
em{
font-weight: bold;
color:#ff0000;
}
input.required_Field{
border-left:3px solid #ff0000;
}

</style>
</head>
<body>
<form action="sendit.php" method="post">
<fieldset>
<legend>Tell us a little about yourself</legend>
<label for="your_Name">Your name: <em>(required field)</em></label>
<input type="text" name="your_Name" id="your_Name" class="required_Field">
<label for="your_Email">Your email address: <em>(required field)</em></label>
<input type="text" name="your_Email" id="your_Email" class="required_Field" >
<label for="your_Postcode">Your postcode:</label>
<input type="text" name="your_Postcode" id="your_Postcode" class="required_
Field" >
</fieldset>
<fieldset>
<legend>Tell us a little about your preferences</legend>
<label for="favourite_Food">What’s your favourite food?</label>
<input type="text" name="favourite_Food" id="favourite_Food">
<label for="favourite_Movie">What’s your favourite movie?</label>
<input type="text" name="favourite_Movie" id="favourite_Movie">
<label for="favourite_Car">What’s your favourite car?</label>
<input type="text" name="favourite_Car" id="favourite_Car">
</fieldset>
<button type="submit">Submit</button>
</form>
</body>
</html>

用css和javascrip实现的一种表单互动的效果

kurt_qian — Wed, 17 Jan 2007 17:40:00 +0800

运用到label文本的缩进(text-indent)属性来控制其在文本框中的位置，然后用鼠标的onfocus和onblur事件来控制label在文本框中是否可见，技巧性比较强。

代码如下:

<!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" xml:lang="en" lang="en">
<head>
<title>Keeping Compact Forms Accessible: Example #3: Completed form with script and CSS.</title>

h1 {
font-size:1.3em;
}

form#login {
padding:6px;
position:relative;
border:1px solid grey;
}

div#username,
div#password {
position:relative;
float:left;
margin-right:3px;
}

input#username-field,
input#password-field {
width:10em;
}

label.overlabel {
color:#999;
}
label.overlabel-apply {
position:absolute;
top:3px;
left:5px;
z-index:1;
color:#999;
}
</style>

function initOverLabels () {
if (!document.getElementById) return;

var labels, id, field;

// Set focus and blur handlers to hide and show
// LABELs with ‘overlabel’ class names.
labels = document.getElementsByTagName(’label’);
for (var i = 0; i < labels.length; i++) {

if (labels[i].className == ‘overlabel’) {

      // Skip labels that do not have a named association
      // with another field.
      id = labels[i].htmlFor || labels[i].getAttribute(’for’);
      if (!id || !(field = document.getElementById(id))) {
        continue;
      }

      // Change the applied class to hover the label
      // over the form field.
      labels[i].className = ‘overlabel-apply’;

      // Hide any fields having an initial value.
      if (field.value !== ”) {
        hideLabel(field.getAttribute(’id’), true);
      }

      // Set handlers to show and hide labels.
      field.onfocus = function () {
        hideLabel(this.getAttribute(’id’), true);
      };
      field.onblur = function () {
        if (this.value === ”) {
          hideLabel(this.getAttribute(’id’), false);
        }
      };

      // Handle clicks to LABEL elements (for Safari).
      labels[i].onclick = function () {
        var id, field;
        id = this.getAttribute(’for’);
        if (id && (field = document.getElementById(id))) {
          field.focus();
        }
      };

}
}
};

window.onload = function () {
setTimeout(initOverLabels, 50);
};

</script>

</head>
<body>

<h1>Keeping Compact Forms Accessible: Example #3: Completed form with script and CSS.</h1>

<div id="username">
<label for="username-field" class="overlabel">Username</label>
<input id="username-field" type="text" name="username" title="Username" value="" tabindex="1" />
</div>

<div id="password">
<label for="password-field" class="overlabel">Password</label>
<input id="password-field" type="password" name="password" title="Password" value="" tabindex="2" />
</div>

</form>

</body>
</html>

引用来自:http://www.alistapart.com/articles/makingcompactformsmoreaccessible

一种用css滤镜+javascript制作的相册功能

kurt_qian — Mon, 15 Jan 2007 18:48:00 +0800

用了css中的滤镜功能，在IE,firefox,netscape下均能通过，实现一种不错的相册播放功能.

另外找了一篇不错的关于滤镜透明效果介绍的文章:

http://bitesizestandards.com/bites/easy-cross-browser-transparency

在线demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /> <title>image</title><br /> <script language="javascript"></p> <p> // // CSS Photo Shuffler v1.0 by // Carl Camera // http://iamacamera.org // // SetOpacity Function and inpiration from Photo Fade by // Richard Rutter // http://clagnut.com // // License: Creative Commons Attribution 2.5 License // http://creativecommons.org/licenses/by/2.5/ //</p> <p> // Customize your photo shuffle settings // // * Surround the target with a <div>. specify id= in both // * set background-repeat:no-repeat in CSS for the div // * The first and final photo displayed is in the html tag // * The array contains paths to photos you want in the rotation. // If you want the first photo in the rotation, then it's best to // put it as the final array image. All photos must be same dimension // * The rotations variable specifies how many times to repeat array. // images. zero is a valid rotation value.</p> <p> var gblPhotoShufflerDivId = "photodiv"; var gblPhotoShufflerImgId = "photoimg"; var gblImg = new Array( "http://blog.donews.com/images/blog_donews_com/kurt198211/129754/o_ss01094.jpg", "http://blog.donews.com/images/blog_donews_com/kurt198211/129754/o_ss07049.jpg", "http://blog.donews.com/images/blog_donews_com/kurt198211/129754/o_ss05058.jpg" ); var gblPauseSeconds = 2.25; var gblFadeSeconds = .85; var gblRotations = 1;</p> <p> // End Customization section</p> <p> var gblDeckSize = gblImg.length; var gblOpacity = 100; var gblOnDeck = 0; var gblStartImg; var gblImageRotations = gblDeckSize * gblRotations;</p> <p> window.onload = photoShufflerLaunch;</p> <p> function photoShufflerLaunch() { var theimg = document.getElementById(gblPhotoShufflerImgId); gblStartImg = theimg.src; // save away to show as final image</p> <p> setTimeout("photoShufflerFade()",gblPauseSeconds*1000); }</p> <p> function photoShufflerFade() { var theimg = document.getElementById(gblPhotoShufflerImgId);</p> <p> // determine delta based on number of fade seconds // the slower the fade the more increments needed var fadeDelta = 100 / (30 * gblFadeSeconds);</p> <p> // fade top out to reveal bottom image if (gblOpacity < 2*fadeDelta ) { gblOpacity = 100; // stop the rotation if we're done if (gblImageRotations < 1) return photoShufflerShuffle(); photoShufflerShuffle(); // pause before next fade setTimeout("photoShufflerFade()",gblPauseSeconds*1000); } else { gblOpacity -= fadeDelta; setOpacity(theimg,gblOpacity); setTimeout("photoShufflerFade()",30); // 1/30th of a second } }</p> <p> function photoShufflerShuffle() { var thediv = document.getElementById(gblPhotoShufflerDivId); var theimg = document.getElementById(gblPhotoShufflerImgId);</p> <p> // copy div background-image to img.src</p> <p> theimg.src = gblImg[gblOnDeck]; // set img opacity to 100</p> <p> setOpacity(theimg,100); // shuffle the deck</p> <p> gblOnDeck = ++gblOnDeck % gblDeckSize; // decrement rotation counter if (--gblImageRotations < 1) { // insert start/final image if we're done gblImg[gblOnDeck] = gblStartImg; }</p> <p>// slide next image underneath</p> <p> }</p> <p> function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity;</p> <p> // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")";</p> <p> // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100;</p> <p> // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100;</p> <p> // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; }</p> <p></script><br /> </head><br /> <body><br /> <div id="photodiv"><br /> <img id="photoimg" src="http://blog.donews.com/images/blog_donews_com/kurt198211/129754/o_1118023l.jpg" _fcksavedurl="http://blog.donews.com/images/blog_donews_com/kurt198211/129754/o_1118023l.jpg" /><br /> </div><br /> <input type="button" onClick="javascript:window.location.reload();" value="show again"/><br /> </body><br /> </html><br />

超酷的slideshow图片网站

kurt_qian — Mon, 15 Jan 2007 10:48:00 +0800

今天发现了一个运用3d技术来实现图片展示和管理的酷站，记得以前学asp.net的时候看到过3d效果在电子商务网站建设中的运用，今天找到的这个又是一种典型3d技术运用的代表

http://www.picturetrail.com/photoFlick/samples/pflicks.shtml