网站用户体验整合设计http://www.zhangmeigong.cn/张明工作室RainbowSoft Studio Z-Blog 1.8 Spirit Build 80605zh-CNCopyright zhangming WebSite. Some Rights Reserved.Mon, 18 Jul 2011 10:47:03 +0800通讯录交互稿a@b.com (张美工)http://www.zhangmeigong.cn/post/219.htmlMon, 18 Jul 2011 10:22:13 +0800http://www.zhangmeigong.cn/post/219.html 

通讯录名片交互稿：
 
1.       联系人卡片：

 

 

2.新建联系人名片：（点击功能icon直接发起操作，若该文本框为空，则点击icon后自动focus到当前文本框）

 

3.联系人名片（所添加字段按顺序自动排位，即添加字段不一定都排到最后，而是会按该字段的排位自动嵌入相应的位置，并自动被focus）：

4.我的名片：

]]>用户体验http://www.zhangmeigong.cn/post/219.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=219http://www.zhangmeigong.cn/cmd.asp?act=tb&id=219&key=a453d720通讯录交互稿a@b.com (张美工)http://www.zhangmeigong.cn/post/220.htmlMon, 18 Jul 2011 10:22:13 +0800http://www.zhangmeigong.cn/post/220.html 

通讯录名片交互稿：
 
1.       联系人卡片：

 

 

2.新建联系人名片：（点击功能icon直接发起操作，若该文本框为空，则点击icon后自动focus到当前文本框）

 

3.联系人名片（所添加字段按顺序自动排位，即添加字段不一定都排到最后，而是会按该字段的排位自动嵌入相应的位置，并自动被focus）：

4.我的名片：

]]>用户体验http://www.zhangmeigong.cn/post/220.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=220http://www.zhangmeigong.cn/cmd.asp?act=tb&id=220&key=2f63ae02用户体验工作a@b.com (张美工)http://www.zhangmeigong.cn/post/218.htmlTue, 02 Nov 2010 11:11:15 +0800http://www.zhangmeigong.cn/post/218.html

就是当你有一个产品概念的时候，用户体验人员能够帮助你快速形成一个原形，比如说简单的可以直接在纸上面画两笔，复杂的可以是我们做成交互类小动画，或者交互类简单原形，这样可以请我们用户试用。从这个过程当中我们可以得到用户直接的反馈，这样就避免可能我要花两三个月开发一套系统，这个系统出来以后用户一用，发现有问题，不行。所以用户体验团队对大家最大的帮助，是帮助能够快速获得原形，快速获得反馈。

所以正是因为这个特点，实际上越早期投入用户体验，那么给整个产品带来的帮助越大。

用户体验的特点是擅长于把一件事情能够从用户角度做好，能够快速形成原形，快速获得反馈，这样从流程上，从质量上都给大家有一个很好的提升。

当腾讯科技问一个好的用户体验工程师究竟该怎样才能练成，吴卓浩建议如下：

其一，以抓住用户根本需求作为突破口。“任何时候都不要迷失在功能、技术或者设计的细节当中。所有的最成功的创新产品，全部都是抓住了用户的根本需求，它也许并没有去创造一个新的需求，并没有创造全新的产品，但是它重新定义了一个，重新发明了一个产品，满足了用户的根本需求。”

其二，方法很重要，选择了正确的方法，就成功一半。

其三，要时刻记住，用户体验团队是帮助别人更成功。

 

更多用户体验信息：http://tech.qq.com/a/20100901/000497.htm

]]>用户体验http://www.zhangmeigong.cn/post/218.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=218http://www.zhangmeigong.cn/cmd.asp?act=tb&id=218&key=5cd63fe6Ext学习及应用经验小结a@b.com (张美工)http://www.zhangmeigong.cn/post/217.htmlThu, 02 Sep 2010 15:29:23 +0800http://www.zhangmeigong.cn/post/217.html一、理解Html DOM、Ext Element及Component 　　

        要学习及应用好Ext框架，需要理解Html DOM、Ext Element及Component三者的区别。
　　Ext是基于Web的富客户端框架，其完全是基于标准W3C技术构建设的，使用到的都是HTML、CSS、DIV等相关技术。Ext最杰出之处，是开发了一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发。　　无论组件有多少配置属性、还是事件、方法等等，其最终都会转化为HTML在浏览器上显示出来，而每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。
 　仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript才能完成。因此，Ext在DOM的基础上，创建了Ext Element，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。　　对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此，除了Element以外，Ext 还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现相关数据展示及交互等，而 Component是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最终的页面效果。
 　　在使用Ext开发的应用程序中，组件Component是最高层次的抽象，是直接给用户使用的，Ext Element是Ext的底层API，主要是由Ext或自定义组件调用的，而DOM是W3C标准定义的原始API，Ext的Element通过操作DOM 来实现页面的效果显示。 　　在Ext中，组件渲染以后可以通过访问组件的el属性来得到组件对应的Element，通过访问Element的dom属性可以得到其下面的DOM对象。另外，我们可以通过通过Ext类的快捷方法getCmp、get、getDom等方法来得组件Component、Ext元素Element及DOM节点。比如：
　　var view=new Ext.Viewport();//创建了一个组件Component
　　view.el.setOpacity(.5);//调用Element的setOpacity方法
　　view.el.dom.innerHTML="Hello Ext";//通过Element的dom属性操作DOM对象
　　再看下面的代码：
　　var win=new Ext.Window({id:"win1",title:"我的窗口",width:200,height:200});
　　win.show();
　　var c=Ext.getCmp("win1");//得到组件win
　　var e=Ext.get("win1");//根据id得到组件win相应的Element
var dom=Ext.getDom("win1");//得到id为win1的DOM节点
二、熟悉ext组件体系
Ext2.0对整个框架进行了重构，最为杰出的是推出了一个以Component类为基础的组件体系，在Component类基础上，使用面向对象的方法，设计了一系列的组件及控件。因此，要能游刃有余地使用Ext，熟悉Ext组件体系是最基本的。
 　　在《ExtJS实用开发指南》中，有如下面一幅组件图：
 　　通过组件结构图我们可以一目了然的看出整个Ext组件继承及组成体系，当使用一个组件的时间，了解他的继承体系，这样可以便于我们掌握组件的各种特性。　　三、掌握核心控件
控件其实也是组件，比如用于显示树信息的TreePanel、用于显示表格的GridPanel及EditorGridPanel，还有代表应用程序窗口的Ext.Window等都属于Ext控件。在使用Ext的时候，一定要掌握一些核心控件，特别是处于基类的控件。比如上面提到的几个控件，他们都是继承于面板Panel，所以我们要重点掌握面板这个核心控件的特性。比如面板由以下几个部分组成：一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。只要掌握了Panel的应用，那么学习TreePanel、Window等就会变得简单得多。
      同样的道理，对于Ext的表单字段来说，不管是ComboBox，NumberField、还是DateField，他们其它都是 Ext.form.Field类的子类，在他上面定义了表单字段的各种基本操作及特性。在学习使用表单字段组件时，一定要重点研究Field这个类，掌握他的主要方法、事件等，就能有助于更好的学习使用其它的字段。
四、学习及研究示例
由于javascript语言非常灵活，不像静态强类型语言（比如Java）那样有固定的代码设计模式，而往往是不同的人就有不同的编程风格。在实际应用开发中，只有见多识广，才能在自己的在脑中建立一个开发库。
学习别人的示例对于我们开发帮助会非常大，示例包括基本组件的应用、综合应用等多个方面。在此，简单推荐几个。
１、Ext官方示例，在ext项目下载包的examples目录中，包括各个控件的基本应用演示，同时还有一些比较复杂的组合示例，有简有繁，非常适合初学者认真研究。
２、Vifir推出的示例，Vifir推出的一些示例主要包括两类，一种是开源的示例应用，另外一种是针对VIP用户的实用示例。开源的示例主要是指 wlr单用户blog系统，这个一个集合了前后台技术的ext综合示例，而针对VIP用户的实用示例则是可以作为开发骨架或扩展组件的示例。
３、其它示例，在ext社区中还有很多比较优秀的ext应用示例，有些只是一个应用演示，虽然没有提供源码下载，但我们可以直接下载引用的js文件来得到这些示例的ext应用代码，同样能取起到非常好的学习效果。
五、多运用
 　　Ext看起来是非常简单的东西，稍有点编程知识的人，按照《ExtJS实用开发指南》中的入门指南，半小时就能学会使用Ext。然而，当准备使用Ext开发一个项目时，却不知道从何处入手，或者是在使用Ext的时候，出了一点小问题自己不知道该如何解决。编程是一门实践性的科学，仅仅靠看书、看别人写的代码是远远不够的，因此，必须多做实践才行，只有通过不断的练习，大量的使用，才能对Ext的组件特性、事件、事件处理机制以及与服务器端交互接口等深入的掌握，只有多做运用，深入了解ext的组件的工作原理及机制，才能编写出高级的Ext的应用。
六、熟读Ext项目的源代码
如果要想深入应用Ext，那么阅读Ext项目的源代码这是必不可少的环节，Ext的代码质量非常高，通过阅读他的代码我们可以更加深刻的了解 javascript面向对象编程，Ext代码中包含了很多高级的js技巧以及设计模式。在使用Ext的过程中，我们经常根据项目的需要对Ext组件进行扩展，设计自己的组件或控件，而如何实现一个自定义的Ext组件，我们可以从Ext的各个组件源代码中找到答案。
Ext的源代码在Ext项目的source目录。读Ext源码，并不一定非要从某一个地方开始，而组件核心代码Component.js、容器组件代码 Container.js、面板Panel.js等这些是必看的； core目录中的Element.js、Ext.js等也是必看的。当需要从一个控件进行扩展的时候，最好能简单看一看这个控件的源代码。
七、理解，熟悉，掌握Json 　
在项目中，Ext本身的华丽外表就很吸引眼球了，但这仅仅是其外在的美，还有最核心的内在美，即：Json。Json(JavaScript Object Notation) 是一种数据交互格式，一个不能实现数据交互功能的项目是没有任何意义的，大多的Ajax框架的数据交互都基于Json，如：jQuery、ExtJs等。因此理解Json掌握Json并熟练运用是很重要的。以目前主流的开发语言为例，.NET已经把Json封装到类中，无需配置，直接与数据库交互，轻松的封装直接使用；Java就麻烦些，必须去下一个Json包，然后再做一些配置，才可以使用；PHP和Java差不多，也必须下载一个Json插件（和类相似），但是不用配置，直接封装使用。在实际的项目中，各自的取舍配置，都基于项目和需求，并不是每个项目（针对WEB）都一定要用到。但是，如果想在项目中用到此类的Ajax框架，Json的掌握又是必须的。
 
]]>css+divhttp://www.zhangmeigong.cn/post/217.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=217http://www.zhangmeigong.cn/cmd.asp?act=tb&id=217&key=c7158f14IE6弹出层盖不住下拉菜单的解决方案 a@b.com (张美工)http://www.zhangmeigong.cn/post/216.htmlMon, 23 Aug 2010 13:19:51 +0800http://www.zhangmeigong.cn/post/216.html
 

方案 I :

使用iframe方式解决，如下例子

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

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<style type="text/css">

body {margin:0;padding:0;text-align:center;background-color:#eee;}  

#bd {margin:20px auto;padding:5px 20px 20px;border:1px solid #bbb;width:760px;background-color:#9CCE2E;}  

#popup {position:absolute;left: 443px;top:87px;}

.layer{width:300px;height:100px;padding:10px;border: 1px solid blue;background-color:#fff; }  

#popup iframe{display:none;_display:block;position:absolute;top:0;left:0px;z-index:-1;filter:mask();width:320px;height:120px;}

</style>

</head>

<body>

<div id="bd">

     <h1>IE6下div遮盖select的解决方案</h1>

     <div><label for="ddTest">Test</label>

         <select id="ddTest">

             <option>…</option>

             <option>pick me</option>

         </select>

     </div>

</div>

<div id="popup">

<div class="layer">Is the select element poking through? </div>

<iframe></iframe>

</div>

</body>

</html>

注意绿色代码段。

工作原理：iframe能盖住select下拉菜单。

在弹出层增加iframe，并采用绝对定位，z-index:-1让iframe浮于弹出层下方；

filter:mask();让iframe透明~

display:none;_display:block;保证FF，IE7以上版本不受影响

width,height值确保iframe大小跟弹出层大小相同

注意事项：

弹出层 最外层区域只设置定位样式（position，left，top,z-index...），避免设置风格显示样式(特别注意边框) 因为iframe在其内，当边线刚好和select框重叠，边线将被select覆盖，影响显示效果

缺陷：需要根据弹出层大小不同，设置iframe大小，局限比较大。

当弹出层为半透明时，被覆盖的下拉菜单消失

方案 II :


改进思路：

在有弹出层页面，增加一个<iframe></iframe>绝对层，处于主页面内容上方，弹出层下方。并且iframe层大小为窗口或网页的大小，覆盖主内容。

当页面弹出绝对层时，同时显示iframe层；绝对层隐藏，同时iframe也隐藏。

页面代码如下：

<form>

   <select><option>这里是主页面内容区的下拉菜单</option></select>
</form>
<div id="PopupDiv">这里是弹出层区域</div>
<iframe id="DivShim" src="javascript:false;" scrolling="no" frameborder="0"> </iframe> //这里是 iframe层

主要样式表如下：

#PopupDiv{position:absolute;left:***;top:***;z-index:***;...display:none;}

#DivShim{position:absolute;top:0;left:0px;filter:mask();display:none;}

js代码如下：

<script>

   function DivSetVisible(state)
   {
     var DivRef = document.getElementById('PopupDiv');
     var IfrRef = document.getElementById('DivShim');
       if(state)
       {
       DivRef.style.display = "block";
       IfrRef.style.width = document.body.offsetWidth;
       IfrRef.style.height = document.body.offsetHeight;  


       IfrRef.style.zIndex = DivRef.style.zIndex - 1;
       IfrRef.style.display = "block";
       }
       else
       {
       DivRef.style.display = "none";
       IfrRef.style.display = "none";
       }
   }
</script>

其中state为逻辑值,当需要显示时,触发DivSetVisible(ture)函数; 当需要隐藏时,触发DivSetVisible(false);

注意：脚本取属性值有问题，只能取标签里定义的样式，无法取到样式表里的值。 此问题在后面补充

方案 III :

进一步优化：

不采用整体主页面内容覆盖，而是使iframe层大小，位置等于弹出层大小和位置，并处于弹出层下方。

并使用getStyle函数取样式表里的属性值。

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

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<style type="text/css">

body{margin:0;padding:0;text-align:center;background-color:#eee;}

#bd{margin:20px auto;padding:5px 20px 20px;border:1px solid #bbb;width:760px;background-color:#9CCE2E;}

#popup{position:absolute;left:443px;top:80px;z-index:10;width:300px;height:100px;padding:10px;border:1px solid #333;background:#fff;display:none;}

#DivShim{position:absolute;filter:mask();border:none;display:none;}

</style>

</head>

<body>

<div id="bd">

<h1>IE6下div遮盖select的解决方案</h1>

<div><label for="ddTest">Test</label>

     <select id="ddTest">

     <option>…</option>

     <option>pick me</option>

     </select>

</div>

</div>

<div id="popup">Is the select element poking through?<br/><p >关闭弹出层</p></div>

<iframe id="DivShim" src="javascript:;" scrolling="no"> </iframe>

<br/><br/>

<br/><br/>

<br/><br/>

<br/><br/>

<b >打开弹出层</b>

<b >关闭弹出层</b>

<script>

//触发显示隐藏方法

function DivSetVisible(idName,state)

{

var DivRef = document.getElementById(idName);

var IfrRef = document.getElementById('DivShim');

if(state){

     DivRef.style.display = "block";

     IfrRef.style.display = "block";

     IfrRef.style.width = DivRef.offsetWidth + "px";

     IfrRef.style.height = DivRef.offsetHeight + "px";

     IfrRef.style.top = getStyle(DivRef,"top");

     IfrRef.style.left = getStyle(DivRef,"left");

     IfrRef.style.zIndex = getStyle(DivRef,"zIndex")-1;

}

else{

     DivRef.style.display = "none";

     IfrRef.style.display = "none";

}

}

//取样式表里的属性值 方法

function getStyle(elem, name){

if (elem.style[name])

     return elem.style[name];

else if (elem.currentStyle)

     return elem.currentStyle[name];

else if (window.getComputedStyle)

     return document.defaultView.getComputedStyle(elem,null).getPropertyValue(name);

else return null;

}

</script>

</body>

</html>

]]>css+divhttp://www.zhangmeigong.cn/post/216.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=216http://www.zhangmeigong.cn/cmd.asp?act=tb&id=216&key=7d6edf51分享几种JS烟花a@b.com (张美工)http://www.zhangmeigong.cn/post/215.htmlWed, 04 Aug 2010 14:24:45 +0800http://www.zhangmeigong.cn/post/215.html蓝色理想发了自己写的烟花效果，弄的心里痒痒，自己也想写一个出来玩，结果把IE写死好几次，还是放弃了，这里转几个别人写的效果上来分享


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>firework - Zehee</title>
<script type="text/javascript">
var fireworks = function(){
 this.size = 20;
 this.rise();
}
fireworks.prototype = {
 color:function(){
  var c = ['0','3','6','9','c','f'];
  var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
  t.sort(function(){return Math.random()>0.5?-1:1;});
  return '#'+t.join('');
 },
 aheight:function(){
  var h = document.documentElement.clientHeight-250;
  return Math.abs(Math.floor(Math.random()*h-200))+201;
 },
 firecracker:function(){
  var b = document.createElement('div');
  var w = document.documentElement.clientWidth;
  b.style.position = 'absolute';
  b.style.color = this.color();
  b.style.bottom = 0;
  b.style.left = Math.floor(Math.random()*w)+1+'px';
  document.body.appendChild(b);
  return b;
 },
 rise:function(){
  var o = this.firecracker();
  var n = this.aheight();
  var c = this.color;
  var e = this.expl;
  var s = this.size;
  var k = n;
  var m = function(){
   o.style.bottom = parseFloat(o.style.bottom)+k*0.1+'px';
   k-=k*0.1;
   if(k<2){
    clearInterval(clear);
    e(o,n,s,c);
   }
  }
  o.innerHTML = '.';
  if(parseInt(o.style.bottom)<n){
   var clear = setInterval(m,20);
  }
 },
 expl:function(o,n,s,c){
  var R=n/3,Ri=n/6,Rii=n/9;
  var r=0,ri=0,rii=0;
  for(var i=0;i<s;i++){
   var span = document.createElement('span');
   var p = document.createElement('i');
   var a = document.createElement('a');
   span.style.position = 'absolute';
   span.style.fontSize = n/10+'px';
   span.style.left = 0;
   span.style.top = 0;
   span.innerHTML = '*';
   p.style.position = 'absolute';
   p.style.left = 0;
   p.style.top = 0;
   p.innerHTML = '*';
   a.style.position = 'absolute';
   a.style.left = 0;
   a.style.top = 0;
   a.innerHTML = '*';
   o.appendChild(span);
   o.appendChild(p);
   o.appendChild(a);
  }
  function spr(){
   r += R*0.1;
   ri+= Ri*0.06;
   rii+= Rii*0.06;
   sp = o.getElementsByTagName('span');
   p = o.getElementsByTagName('i');
   a = o.getElementsByTagName('a');
   for(var i=0; i<sp.length;i++){
    sp[i].style.color = c();
    p[i].style.color = c();
    a[i].style.color = c();
    sp[i].style.left=r*Math.cos(360/s*i)+'px';
    sp[i].style.top=r*Math.sin(360/s*i)+'px';
    sp[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';
    p[i].style.left=ri*Math.cos(360/s*i)+'px';
    p[i].style.top=ri*Math.sin(360/s*i)+'px';
    p[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';
    a[i].style.left=rii*Math.cos(360/s*i)+'px';
    a[i].style.top=rii*Math.sin(360/s*i)+'px';
    a[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';
   }
   R-=R*0.1;
   if(R<2){
    o.innerHTML = '';
    o.parentNode.removeChild(o);
    clearInterval(clearI);
   }
  }
  var clearI = setInterval(spr,20);
 }
}
window.onload = function(){
 function happyNewYear(){
  new fireworks();
 }
 setInterval(happyNewYear,1000);
}
</script>
<style type="text/css">
</style>
</head>
<body style="background:#000;font:12px Georgia, 'Times New Roman', Times, serif">
</body>
</html>


提示：您可以先修改部分 代码再运行

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>firework - Zehee</title>
<script type="text/javascript">
var firework = function(){
 this.size = 40;
 this.speed = 0.1;
 this.rise();
}
firework.prototype = {
 color:function(){
  var c = ['0','3','6','9','c','f'];
  var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
  t.sort(function(){return Math.random()>0.5?-1:1;});
  return '#'+t.join('');
 },
 aheight:function(){
  var h = document.documentElement.clientHeight;
  return Math.abs(Math.floor(Math.random()*h-200))+201;
 },
 firecracker:function(){
  var b = document.createElement('div');
  var w = document.body.clientWidth;
  b.style.color = this.color();
  b.style.position = 'absolute';
  b.style.bottom = 0;
  b.style.left = Math.floor(Math.random()*w)+1+'px';
  document.body.appendChild(b);
  return b;
 },
 rise:function(){
  var o = this.firecracker();
  var n = this.aheight();
  var speed = this.speed;
  var e = this.expl;
  var s = this.size;
  var k = n;
  var m = function(){
   o.style.bottom = parseFloat(o.style.bottom)+k*speed+'px';
   k-=k*speed;
   if(k<2){
    clearInterval(clear);
    e(o,n,s,speed);
   }
  }
  o.innerHTML = '*';
  if(parseInt(o.style.bottom)<n){
   var clear = setInterval(m,20);
  }
 },
 expl:function(o,n,s,speed){
  var R = n/3;
  var Ri = n/6;
  var r = 0;
  var ri = 0;
  for(var i=0;i<s;i++){
   var span = document.createElement('span');
   var p = document.createElement('p');
   span.style.position = 'absolute';
   span.style.left = 0;
   span.style.top = 0;
   span.innerHTML = '*';
   p.style.position = 'absolute';
   p.style.left = 0;
   p.style.top = 0;
   p.innerHTML = '+';
   o.appendChild(span);
   o.appendChild(p);
  }
  function spr(){
   r += R*speed;
   ri+= Ri*speed/2;
   sp = o.getElementsByTagName('span');
   p = o.getElementsByTagName('p');
   for(var i=0; i<sp.length;i++){
    sp[i].style.left=r*Math.cos(360/s*i)+'px';
    sp[i].style.top=r*Math.sin(360/s*i)+'px';
    p[i].style.left=ri*Math.cos(360/s*i)+'px';
    p[i].style.top=ri*Math.sin(360/s*i)+'px';
   }
   R-=R*speed;
   if(R<2){
    clearInterval(clearI);
    o.parentNode.removeChild(o);
   }
  }
  var clearI = setInterval(spr,20);
 }
}
window.onload = function(){
 function happyNewYear(){
  new firework();
 }
 setInterval(happyNewYear,400);
}
</script>
<style type="text/css">
</style>
</head>
<body style="background:#000;font:12px Arial">
</body>
</html>


提示：您可以先修改部分 代码再运行

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<style type="text/css">
.fire{display:block; overflow:hidden; font-size:12px; position:absolute};
body{overflow:hidden; background:#000}
html{overflow:hidden; background:#000}
</style>
<body>
</body>
<script type="text/javascript">
var Fire = function(r, color) {
 this.radius = r || 12;
 this.color = color || "FF6600";
 this.xpos = 0;
 this.ypos = 0;
 this.zpos = 0;
 this.vx = 0;
 this.vy = 0;
 this.vz = 0;
 this.mass = 1;
 this.p = document.createElement("span");
 this.p.className = "fire";
 this.p.innerHTML = "*";
 this.p.style.fontSize = this.radius + "px";
 this.p.style.color = "#" + this.color;
}
Fire.prototype = {
 append: function(parent) {
  parent.appendChild(this.p);
 },
 setSize: function(scale) {
  this.p.style.fontSize = this.radius * scale + "px";
 },
 setPosition:function(x, y) {
  this.p.style.left = x + "px";
  this.p.style.top =  y + "px";
 },
 setVisible: function(b) {
  this.p.style.display = b ? "block" : "none";
 }
}
var fireworks = function() {
 var fires = new Array();
 var count = 100;
 var fl = 250;
 var vpx = 500;
 var vpy = 300;
 var gravity = .3;
 var floor = 200;
 var bounce = -.8;
 var timer;
 return {
  init: function() {
   for (var i=0; i<count; i++) {
    var color = 0xFF0000;
    color = (Math.random() * 0xFFFFFF).toString(16).toString().split(".")[0];
    while(color.length < 6) {
     color = "0" + color;
    }
    var fire = new Fire(12, color);
    fires.push(fire);
    fire.ypos = -100;
    fire.vx = Math.random() * 6 - 3;
    fire.vy = Math.random() * 6 - 3;
    fire.vz = Math.random() * 6 - 3;
    fire.append(document.body);
   }
   var that = this;
   timer = setInterval(function() {
    for (var i=0;i<count; i++) {
     that.move(fires[i]);
    }
   }, 30);
  },
  move: function(fire) {
   fire.vy += gravity;
   fire.xpos += fire.vx;
   fire.ypos += fire.vy;
   fire.zpos += fire.vz;
   if (fire.ypos > floor) {
    fire.ypos = floor;
    fire.vy *= bounce;
   }
   if (fire.zpos > -fl) {
    var scale = fl/ (fl+fire.zpos);
    fire.setSize(scale);
    fire.setPosition(vpx + fire.xpos * scale,
         vpy + fire.ypos * scale);
    fire.setVisible(true);
   } else {
    fire.setVisible(false);
   }
  }
 }
}
fireworks().init();
</script>
</html>


提示：您可以先修改部分 代码再运行

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<style type="text/css">
.fire{display:block; overflow:hidden; font-size:12px; position:absolute};
body{overflow:hidden; background:#000}
html{overflow:hidden; background:#000}
</style>
<body>
</body>
<script type="text/javascript">
var Fire = function(r, color) {
 this.radius = r || 12;
 this.color = color;
 this.xpos = 0;
 this.ypos = 0;
 this.zpos = 0;
 this.vx = 0;
 this.vy = 0;
 this.vz = 0;
 this.mass = 1;
 this.x =0;
 this.y=0;
 this.p = document.createElement("span");
 this.p.className = "fire";
 this.p.innerHTML = "*";
 this.p.style.fontSize = this.radius + "px";
 this.p.style.color = "#" + this.color;
}
Fire.prototype = {
 append: function(parent) {
  parent.appendChild(this.p);
 },
 setSize: function(scale) {
  this.p.style.fontSize = this.radius * scale + "px";
 },
 setPosition:function(x, y) {
  this.p.style.left = x + "px";
  this.p.style.top =  y + "px";
 },
 setVisible: function(b) {
  this.p.style.display = b ? "block" : "none";
 }
}
var fireworks = function() {
 var fires = new Array();
 var count = 150;
 var fl = 250;
 var vpx = 500;
 var vpy = 300;
 var gravity = .5;
 var floor = 200;
 var bounce = -.8;
 var timer;
 var wind = ((Math.floor(Math.random()*3) + 3)/10)*(Math.random()*2 - 1 > 0 ? 1 : -1)*.25;
 var wpos = 0;
 var wcount;
 return {
  init: function() {
   wcount = 50 + Math.floor(Math.random() * 100);
   for (var i=0; i<count; i++) {
    var color = 0xFF0000;
    color = (Math.random() * 0xFFFFFF).toString(16).toString().split(".")[0];
    while(color.length < 6) {
     color = "0" + color;
    }
    var fire = new Fire(12, color);
    fires.push(fire);
    fire.ypos = -100;
    fire.vz = Math.random() * 6 - 3;
    fire.vx = (Math.random()*2 - 1)*2 ;
    fire.vy = Math.random()*-15 - 15;
    fire.x = 500
    fire.y = 600;
    fire.append(document.body);
   }
   var that = this;
   timer = setInterval(function() {
    wpos++;
    if (wpos >= wcount) {
     wpos = 0;
     wcount = 50 + Math.floor(Math.random() * 100);
     wind = ((Math.floor(Math.random()*3) + 3)/10)*(Math.random()*2 - 1 > 0 ? 1 : -1)*.25;
    }
    for (var i=0;i<count; i++) {
     that.move(fires[i]);
    }
   }, 30);
  },
  move: function(fire) {
   fire.vy += gravity;
   fire.x += fire.vx;
   fire.y += fire.vy;
   fire.vx += wind;
   fire.setPosition(fire.x, fire.y);
    if (fire.x < 0 || fire.x >1000 || fire.y  < 0 || fire.y  > 600) {
     fire.vx = (Math.random()*2 - 1)*2;
     fire.vy = Math.random()*-15 - 15;
     fire.x = 500;
     fire.y = 600;
     fire.setPosition(fire.x, fire.y);
    }
  }
 }
}
fireworks().init();
</script>
</html>


提示：您可以先修改部分 代码再运行

]]>css+divhttp://www.zhangmeigong.cn/post/215.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=215http://www.zhangmeigong.cn/cmd.asp?act=tb&id=215&key=e1e90ef0Div+Css实例：用CSS控制字符宽度省略号效果a@b.com (张美工)http://www.zhangmeigong.cn/post/214.htmlWed, 04 Aug 2010 14:12:29 +0800http://www.zhangmeigong.cn/post/214.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div+Css实例：用CSS控制字符宽度省略号效果</title>
</head>
<style type="text/css">

*{ margin:0; padding:0; }
a{ text-decoration:none; color:#000000;}
a:hover{ text-decoration:none; color:#000000;}
ul{ width:300px; height:120px; margin:40px auto; padding:12px 4px 12px 24px; border:1px solid #D4D4D4; background:#F1F1F1;}
li{ margin:12px 0; }
li a{ display:block; width:200px; overflow:hidden;/*注意不要写在最后了*/white-space:nowrap; -o-text-overflow:ellipsis;text-overflow:ellipsis;}
/* firefox only */
li:not(p){ clear:both;}
li:not(p) a{ max-width:170px; float:left;}
li:not(p):after{ content: "..."; float:left; width:40px; padding-left:5px; color:#000;}

</style>
<body>
<ul>
 <li><a href="http://www.zhangmeigong.cn">一个在IE6下no-repeat依然重复背景图片的BUG</a></li>
 <li><a href="http://www.zhangmeigong.cn">Div+Css实例：用CSS制作的热门内容排行效果</a></li>
 <li><a href="http://www.zhangmeigong.cn">Div+Css:浅淡!important对CSS的重要性</a></li>
 <li><a href="http://www.zhangmeigong.cn">用CSS实现中英文双语导航菜单</a></li>
</ul>
</body>
</html>
 

]]>css+divhttp://www.zhangmeigong.cn/post/214.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=214http://www.zhangmeigong.cn/cmd.asp?act=tb&id=214&key=de77f34c控制文本框字符数a@b.com (张美工)http://www.zhangmeigong.cn/post/213.htmlTue, 03 Aug 2010 14:40:37 +0800http://www.zhangmeigong.cn/post/213.html<html>

<head>

<title>控制文本框字符数</title>

</head>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
maxLen = 20; //设置最大字符数

function checkMaxInput(form) {
if (form.message.value.length > maxLen) // if too long.... trim it!
form.message.value = form.message.value.substring(0, maxLen);
// otherwise, update 'characters left' counter
else form.remLen.value = maxLen - form.message.value.length;
}
//  End -->
</SCRIPT>

<form   name=myform    action="YOUR-SCRIPT.CGI">

<font  size="1"   face="arial, helvetica, sans-serif" > ( 最多只能输入20个字符！)<br>

<textarea   name=message   wrap=physical   cols=28   rows=4   onKeyDown="checkMaxInput(this.form)"   onKeyUp="checkMaxInput(this.form)"></textarea>
<br>
<input   readonly   type=text   name=remLen   size=3   maxlength=3   value="20"> characters left</font>
</form>

<body>

</body>

</html>

]]>css+divhttp://www.zhangmeigong.cn/post/213.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=213http://www.zhangmeigong.cn/cmd.asp?act=tb&id=213&key=0c0a292a基本的 HTML 标签 a@b.com (张美工)http://www.zhangmeigong.cn/post/212.htmlMon, 05 Jul 2010 10:27:26 +0800http://www.zhangmeigong.cn/post/212.html
标签描述
定义 HTML 文档。
定义文档的主体。
定义标题 1 至标题 6。
定义段落。
插入折行。
定义水平线。
定义注释。

                                        
 
标题
标题使用 <h1> 至 <h6> 标签进行定义。<h1> 定义最大的标题。<h6> 定义最小的标题。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML 会自动在标题前后添加一个额外的折行。
 
段落
段落使用 <p> 标签进行定义。
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML 会自动在段落前后添加一个额外的空行。
 
换行符
当你打算结束一行，而又不想开始一个新段落时，<br> 标签就派上用场了。无论你将它置于何处，<br> 标签都会产生一个强制的换行。
<p>This <br> is a para<br>graph with line breaks</p>
<br> 标签是空白标签，由于关闭标签没有任何意义，因此它没有类似 </br> 的终止标签。
<br> 还是 <br />
您会越来越多地发现 <br> 与 <br /> 很相似。
由于 <br> 没有结束标签，它也就违反了未来的 HTML 的规则之一，即所有的元素都必须关闭。
把这个标签写为 <br /> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。
 
HTML 注释
注释标签用于在 HTML 源码中插入注释。注释会被浏览器忽略。您可以使用注释对您的代码进行解释，这么做在以后的日子里会对您的代码编辑产生帮助。
<!-- This is a comment -->
注意：左括号后需要写一个惊叹号，右括号前就不需要了。
 
锚标签和 Href 属性
HTML 使用 <a> （锚）标签来创建连接另一个文档的链接。
锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等等。
创建锚的语法：
 
<a href="url">Text to be displayed</a>
<a> 用来创建锚。href 属性用于定位需要链接的文档，锚的开始标签和结束标签之间的文字被作为超级链接来显示。
这个锚定义了指向 Dosite 的链接：
<a href="http://www.Dosite.cn/">Visit Dosite!</a>
 
 
Target 属性
使用 Target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="http://www.Dosite.cn/" target="_blank">Visit Dosite!</a>
 
 
锚标签和 Name 属性
Name 属性用于创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。
以下是命名锚的语法：
<a name="label">Text to be displayed</a>
name 属性用于创建命名锚。锚的名称可以是任何你喜欢的名字。
下面这行定义了命名锚：
<a name="tips">Useful Tips Section</a>
你会注意到，命名锚会以特殊的方式来显示。
将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个节，就像这样：
<a href="http://www.Dosite.cn/html_links.asp#tips"> Jump to the Useful Tips Section </a>
 
 
框架结构标签（<frameset>）
  • 框架结构标签（<frameset>）定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积
编者注：frameset 标签也被某些文章和书籍译为框架集。
框架标签（Frame）
Frame 标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：
<frameset cols="25%,75%">    <frame src="frame_a.htm">    <frame src="frame_b.htm"> </frameset>
 
 
表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
 
表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
 
表格的表头
表格的表头使用 <th> 标签进行定义。
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
 
表格中的空单元格
在大多数浏览器中，没有内容的表格单元显示得不太好。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
 
HTML 列表
HTML 支持有序、无序和定义列表
 
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
 
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
浏览器显示如下：
Coffee Black hot drink Milk White cold drink
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
]]>css+divhttp://www.zhangmeigong.cn/post/212.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=212http://www.zhangmeigong.cn/cmd.asp?act=tb&id=212&key=616cfa19Web前端工程师技能列表a@b.com (张美工)http://www.zhangmeigong.cn/post/211.htmlTue, 08 Jun 2010 10:32:40 +0800http://www.zhangmeigong.cn/post/211.html         要打造一流的Web产品开发团队，在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说，仅仅掌握Web1.0时代简单的”网页套接”是完全不够的。我结合自己的团队配备，特此罗列了Web前端产品工程师所涉及的技能列表如下：

       通过许多实际项目，个人认为一个完备的前端产品开发团队，必须拥有如下的人才配备，也希望大家补充：
  • 团队全体成员达到所有技能中的a级标准
  • 团队全体成员必须掌握两项技能中的b级标准，并保证所有的b级标准在该团队中有50%以上成员能达到
  • 团队全体成员必须掌握一项技能中的c级标准，并保证所有的c级标准在该团队中有25%以上成员能达到
    具体技能描述：
  • 【必备】UserInterface
  •  
    1. PhotoShop/Fireworks Design
      a -       配合美工将草图形成具体的符合WebPage的设计
      b -       有快速制作分层高品质PSD、PNG的能力
      c -       能迅速将PSD、PNG的内容构思成div+css或者table等HTML代码
    2. Flash Design
      a -       基本动画效果
      b -       复杂的交互体系设计，了解第三方swf辅助设计软件
      c -       复杂的交互体系设计以及较强的对各类外埠资源（PNG、JPG、MP3、WAV等）的整合能力。精通部分第三方辅助设计软件（AE、SwishMax、Swift3D等）
  • 【必备】Browser-side (Web Application)
  •  
    1. XHTML/CSS
      a -       基本的layout实现
      b -       严格跨平台的layout实现以
      c -       优雅的HTML code，尽可能符合标准并有SEO的考虑因素。在任何平台、浏览器下基本保持一致。不要求了解各种CSS的hacks，但要求知道遇到问题应该如何查阅资料以在第一时间内解决。能够为JavaScript开发人员提供最好操作的DOM结构，让JS开发人员在开发的时候认为”一切都已经准备就绪了”，而不是”捉襟见肘”。
    2. JavaScript/Ajax/DOM
      a -       基本的DOM操作，了解AJAX，可以实现数据通信
      b -       基本的DOM操作，能写高效率的OOP代码，以降低维护成本
      c -       基于需求，进行不同的开发，选择合适的框架，做到代码效率最高，用户体验最好，代码下载量最小，并且可以在单独甚至更多产品线中最大限度重用代码
    3. Flash Developement
      a -       基于Timeline的ActionScript操作，能实现简单交互
      b -       掌握a外，能实现数据层通信（与服务器以及本地SharedObject）
      c -       精通AS1-3，能根据需求进行各类RIA开发。无论是要求支持FlashPlayer8的，还是FlashPlayer9的，都能做到开发效率最高、灵活性最大（比如对HTML层的接口设计，等等）。
  • 【必备】Client-side (Desktop Application)
    1. Apollo
      a -       产品级的封装，基本技术了解（如何打包、如何加入HTML和JavaScript等）
      b -       掌握a的同时，能利用Apollo的API独立设计、开发OS的文件I/O功能。
      c -       掌握基本技能的同时，对”3D概念体系”有所认知。这里”3D”即：Design（设计）、Development（开发）、Deploy（产品部署）。能用Apollo
    2. Windows Presentation Foundation、WPF/E（Silverlight）
      （待定，欢迎补充）
  • 【增补】Server-side（修改：经考虑，这个技能不参与评级）
    本来列举了”1、Server端简单的技术、脚本”和”2、MediaServer（Red5）接口”作为”Web前端工程师技能列表“的一种（服务器、数据逻辑层技能的）评判标准。但似乎很多朋友对于前端工程师是否应该掌握Server端技能的必要性表示怀疑。确实，要掌握好上述的展现层技能不是意见容易的事情，而且前端工程师的确非常辛苦。但是，站在另一方面来说，辛苦的原因是什么，我不知道在你日夜奋战div+CSS的时候思考过没有。就我的经验，前端的辛苦在于以下几个方面：
 
    1. 重复劳动多，大量的div+css都是重复的，即便可以复制粘贴，但几千行的div海洋中去寻找一个入口恐怕都非常痛苦
    2. 需求变更多，往往你折腾几个小时终于把跨平台问题解决好了，而且在IE6、7和Firefox下面都能显示同样的效果了，甚至连JavaScript交互都已经快搞定了。突然上面说需求要变。这无疑是莫大的痛苦。
       也许表面上看，这跟Server端技能无关，但我觉得有好的Server端的意识，一定会有所帮助（当然不可能解决所有的问题）。毕竟信息结构和数据库是密切相关的，而Server是连接数据库的唯一渠道（至少大多数B/S应用是如此）。掌握Server端的基本技能，对于同逻辑层开发人员设计接口是非常重要的。而且HTML表现层在开发时与数据的分离，也与Server端的各种模板技术有关。例如PHP中的Smarty模板（我曾经用的）、jsp的model2概念等等。HTML结构如何设计，如何让HTML重用，甚至在HTML层进行OOP的开发（我现在在新产品线中设计的前端开发流程），都需要Server端的支持。最起码，你要告诉php程序员你需要什么。如果你完全对PHP一无所知的话，那也无从谈起了。
此外，对于创业团队，往往人手非常有限。为了让运营成本降到最低，所有的技术人员都有义务对Server端技术有所了解。如果为了修改一个网页的标题还要跑去喊PHP程序员连接Remote Server的话，那实在是增加了整个公司的运营成本。
总结：我认为，可以不了解技术细节，但应该知道原理，最好能掌握一两套设计思想（毕竟数据逻辑都在这里走，光看HTML和JavaScript，对人的见识还是有局限的，这种局限限制了我自己很久的时间），那将是一比宝贵的财富。
  • 【增补】Mobile-side（不参与评级）
    1. Flashlite
      （待定，欢迎补充）
    2. Java？
      （待定，欢迎补充）
        看到很多朋友留言说前端工程师没前途，我在想，同时掌握移动设备的技能是否也是拓展前途的一个必要性？这里再多说几句，关于技术人员的前途，目前在国内确实得用”惨淡”来形容。浮躁的氛围让技术人才往往过早放弃了自己的技术生涯，而尔虞我诈的整体道德水平也让单纯的技术人员痛不欲生（我身边太多了，恩，不说具体细节了，呵呵）。
       作为一个技术人员，开发人员，在保持纯粹地敬业心态（这是前提，这么没有，啥也别谈）外，更要学会如何保护自己，如何壮大自身，社会不会同情你，只有你自己才能保护你自己。
http://www.awflasher.com/blog/archives/906
 
 
]]>用户体验http://www.zhangmeigong.cn/post/211.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=211http://www.zhangmeigong.cn/cmd.asp?act=tb&id=211&key=f7faf1f5