设计 体验 生活 一直在继续

发表于2008年5月21日   1 comment

项目中的部分页面采用了Flex进行表现,用到WindowShade控件,搜索引擎中相关的资料比较少,通过阅读部分相关文档并根据自己的应用经验,关于WindowShade的样式进行整理如下。(部分文字翻译自英文文档,可能有叙述不准确之处)

WindowShade控件显示为一个Button,点击时,Button下会有一个Panel如同拉窗帘(windowshade)般展开;如果这个Panel已经是显示状态了,点击按钮后便会收起,如同窗帘的卷起。如果多个WindowShade存在于一个VBox下,他们的表现就会像是 Accordian,不同的是,多个WindowShade可以同时显示,而Accordian和Tabnavigator一样,每次只能显示一个 Panel。

Read more...

发表于2008年3月24日   (No comments)

稻草刚发布了新版的首页效果,页面看起来很舒服,像时尚杂志。
不过,更吸引我的是他对于</h1>、</span>等标签的运用,以及由这些标签组成的清晰的页面结构。抽空通读了一遍代码,获益匪浅。

先举一例,比如页面logo的处理方式是我没有想过的,之前在搜拍上也见过的这样的处理方式,既达到了logo应具备的内容,同时优化了代码。
HTML结构:

<div id=”logo”>
<a href=”#” title=”这里是logo”>
<h1>这里是logo</h1>
</a>
</div>

这里的</a>下面我经常就放个<img>完事,不去考虑什么</h1>,而从一个页面在搜索引擎下的表现这个角度讲,</h1>是不可或缺的。有人觉得</h1>不适合放在logo下,仁者见仁,智者见智吧,还要看在什么样的页面下,只要保证一个页面只有一个</h1>就好了,稻草同学显然是深知这一点的。

CSS方面也很好理解,背景放在</a>中,让</a>充满整个logo块,把</h1>隐藏掉就可以了。

#logo a{
display:block;
background: url(hope标志图.jpg) no-repeat;
width:200px;
height:72px;
}

#logo h1 {
display:block;
overflow:hidden;
width:0;
height:0;
}

发散一下,我觉得这里#logo h1 {}也可以用text-indent:-999em把文字内容处理掉。暂且不去考虑这样写是否规范了,呵呵。

另外,这样的结构是我没用过的:

<ul>
<li>
<a>
<p>baidu</p>
<p>百度一下</p>
</a>
</li>
</ul>

把</p>放在</a>里,效果不错!这个是以后经常会用到的一个方法。

做项目时间长了,处理页面往往只侧重表现,不去在意代码结构是否合理以及在搜索引擎下的更优化。
还是得多看多学习。

Read more...

发表于2008年2月26日   (No comments)

在b/s开发中经常用到的javaScript技术
一、验证类
1、数字验证内
1.1 整数
1.2 大于0的整数 (用于传来的ID的验证)
1.3 负整数的验证
1.4 整数不能大于iMax
1.5 整数不能小于iMin
2、时间类
2.1 短时间,形如 (13:04:06)
2.2 短日期,形如 (2003-12-05)
2.3 长时间,形如 (2003-12-05 13:04:06)
2.4 只有年和月。形如(2003-05,或者2003-5)
2.5 只有小时和分钟,形如(12:03)
3、表单类
3.1 所有的表单的值都不能为空
3.2 多行文本框的值不能为空。
3.3 多行文本框的值不能超过sMaxStrleng
3.4 多行文本框的值不能少于sMixStrleng
3.5 判断单选框是否选择。
3.6 判断复选框是否选择.
3.7 复选框的全选,多选,全不选,反选
3.8 文件上传过程中判断文件类型
4、字符类
4.1 判断字符全部由a-Z或者是A-Z的字字母组成
4.2 判断字符由字母和数字组成。
4.3 判断字符由字母和数字,下划线,点号组成.且开头的只能是下划线和字母
4.4 字符串替换函数.Replace();
5、浏览器类
5.1 判断浏览器的类型
5.2 判断ie的版本
5.3 判断客户端的分辨率

6、结合类
6.1 email的判断。
6.2 手机号码的验证
6.3 身份证的验证

Read more...

发表于2008年2月25日   (No comments)

1.网页中让整段文字左右对齐

text-align:justify; text-justify:inter-ideograph

2.层透明在IE和FF下的区别

filter:Alpha(opacity=30); //IE下
-moz-opacity:0.3; //FF下

Read more...

发表于2008年2月22日   (No comments)

今天在写一个列表显示效果的时候,正好看见QQ2008的好友列表显示的效果和正在写的效果有那么几分相似,索性就模仿写了起来
QQ2008好友列表的效果比较简单,主要方法是给ID换className.

Read more...

发表于2007年12月19日   (No comments)

一、空格运算符

(1)CSS语言
简单地说,CSS语言类似JS语言,是通过客户端下载后,通过本地浏览器解析。而CSS语言又是非常低级的“弱类型”语言,离JS这种基于对象的比较完善的“弱类型”语言,还差相当一段距离。要知道CSS样式是定义出来的,而样式的呈现是根据文档流顺序和CSS优先级别,浏览器自己识别计算后显示出来的。而浏览器又有忽略和纠错功能(尤以IE为甚),所以样式定义的语法有错误,并不影响浏览器正常工作,只不过显示不出应有的效果罢了。在我们设计定义样式的时候,排错是比较令人苦恼的,其本质原因是于这种弱类型CSS语言本身的不严禁性有关系的,所以我们就更应该注重CSS定义的严禁,才能出较少的错误,较快更好的完成工作。

(2)CSS的运算符

首先说,CSS语言的运算符就不多,有.#{}:”;还有一个非常重要的空格。这几个运算符,都是常用的定义声明符号。而在CSS样式定义中,空格就有点特殊,我们可以把它视为在.Net或Java中命名空间或类包定义中的 . 运算符。换句话说,我们可以把空格视为路径指向的箭头,表明HTML标签的父子级别关系。CSS是与HTML想关联的,也就是说,CSS的每一个定义都与 “某个HTML标签”或“某段模块化HTML代码”相对应,而HTML可以调用多个样式类。一个CSS样式类可以根据HTML代码来“复合定义”;一个 HTML标签也可以“复合调用”多个样式类。所以说,CSS样式定义的复杂性与关联的HTML是密不可分。

Read more...

发表于2007年11月25日   (No comments)

转自: 《样式之美 正在消失》aoao

有的网页看起来并不大但打开会很卡,有的网页虽然很长但使用流畅,占用用户电脑的内存与CPU就影响这些。

浏览器问题,有各自的浏览器处理内存问题会影响到,但几乎没办法控制得了,Windows上的:

1.IE系列,刷新回收的量不大,但最小化会释放内存,。
2.Firefox2据说也会在最小化回收,可我从没见过最垃圾,用多少是多少,基本不回收。据说prototype的ajax还会引起内存一直增加。
3.Opera最好。一直控制得很好。不存在什么问题。。
Linux的内存分配机制与Win的不一样,有多少用多少,如果浏览器占光时说不定会干掉系统。

页面问题,浏览器渲染页面会消耗内存和CPU,能减少一点就减少点。

结构上
1.使用DocType,告诉浏览器你在用什么,html4也有DTD。也许Transitional更适合你
2.如果使用的是XHTML并能保持良好结构的话,记得输出相应的MIME跟XML头1,可以减少浏览器的代码检查,
3.保持结构的完整,不要让浏览器帮你补全代码。
4.控制页面的文件大小,可以通过程序把为了看代码比较舒服的缩进去掉。2~3K也是大小。
5.iframe会产生新的页面,其实有很多方式可以代替iframe
6.引入的JS与CSS可以适当合并,同样背景图片也可以合并,甚至有人连Flash都合并
7.给已知宽高的内容图片/Object加上宽度的属性可以减少页面的局部重渲染

表现上
·质量99跟70的jpg在大多数情况下只有文件有大小不一样。gif的也一样,特别是小图标,256色跟128色的差别是文件大小.
·flash动得太快吃CPU很大,控制每秒的帧数及动画的效果可以减少一些,如果把品质用中低显示会省很多资源,但这样却牺牲了效果。。quality属性 有时选择Autolow2 或者Autohigh会更适合,没必要一直low 或者best,
·flash使用矢量图会节省文件大小,但计算复杂的图形跟动画时花的是CPU。复杂的太多滤镜,则会占用大量内存,模糊滤镜有减少些3。
·IE的滤镜也是比较占用内存,同时也有兼容性问题。全屏的半透明很吃资源的。
·2*2的图片跟8*8的图片大小差不多,但是平铺背景2*2却占用大很多。
·gif动画同样有帧的概念,别把gif当成flash来玩就行。

行为上
·别为了使用一个$()引入整个prototype或jQuery,它们有更多的作用。
·AJAX很帅。但是用xml会用上XML解析器,有人推荐用JSON,可是这样要eval数据,其实可以直接import已经是对象的script来用。只是要多传个对象名,或者把对象名写死,或者像flickr那样jsonFlickrApi({”xxx”:”xxx”}),直接当函数用,挖哈哈。
·实现某些效果时能用visibility:hidden解决时就别用display:none来玩。
·在这里强调js变量要注全局跟局部等等的意义并不大,JS复杂的地方也不是一两句能说得清的,关注大家关注月影的正在出版的新书吧。^^
·其实这里有的内容有不少跟如何快速的呈现我们的网页相近,不过那篇是以处理服务端为主,但在很多时候,节省服务端资源消耗的同时也会节省客户端的资源消耗。

再其实,这篇已经蹲在草稿箱里好久了,一直没有时间去整理。现在给的也不是完整的,因为没有完整,慢慢补充吧。

——————————————————————————–

·产生问题:虽然会引起浏览器的模式问题,但问题是可以解决滴。参考Serving up XHTML with the correct MIME type,派送XML头浏览器不会容错显示,出现错误结构会导致整个页面无法显法。
·Autolow: 优先考虑速度,但是也会尽可能改善外观。 回放开始时,消除锯齿功能处于关闭状态。 如果 Flash Player 检测到处理器可以处理消除锯齿功能,就会打开该功能。
·Autohigh:开始时回放速度和外观两者并重,必要时会牺牲外观来保证回放速度。 回放开始时,消除锯齿功能处于打开状态。如果实际帧频降到指定帧频之下,就会关闭消除锯齿功能以提高回放速度。使用此设置可模拟“消除锯齿”命令(“视图”>“预览模式”>“消除锯齿”)。
·模糊滤镜:使用模糊滤镜时,如果用于 blurX 和 blurY 的值是 2 的整数次幂(例如 2、4、8、16 和 32),则可以加快计算速度,并且可以使性能提高 20% 到 30%(flash的帮助是介样说滴)。

Read more...

发表于2007年11月23日   (No comments)

<?xml version=”1.0″?>
<!–xml-002.xml–>
<firstNode name=”1″>
<childNode name=”1.1″>
<Node name=”1.1.1″ />
<Node name=”1.1.2″ />
<Node name=”1.1.3″ />
</childNode>
<childNode name=”1.2″>
<Node name=”1.2.1″ />
<Node name=”1.2.2″ />
<Node name=”1.2.3″ />
</childNode>
<childNode name=”1.3″>
<Node name=”1.3.1″ />
<Node name=”1.3.2″ />
<Node name=”1.3.3″ />
</childNode>
</firstNode>

上面是一个多层嵌套节点的xml文档.结构是一个顶层节点中,嵌套3个子级节点,3个子级节点分别嵌套3个子级节点.

flash文档第一帧的代码

//xml-002.fla.
//实例化一个xml对象.
var myxml:XML = new XML();
//分析时忽略xml文档中的空格.
myxml.ignoreWhite = true;
//加载xml-002.xml文档.
myxml.load(”xml-002.xml”);
//调用XML.onLoad事件.
myxml.onLoad = function(success:Boolean)
{
//如果加载成功,success=true;否则success=false;
if (success) {
trace(”加载成功!”);
//输出顶层节点的节点名和顶层节点中属性name的值.
trace(myxml.firstChild.nodeName+”:”+myxml.firstChild.attributes.name);
//用一个数组来引用顶层节点中子级节点的数组.
var child_arr:Array = myxml.firstChild.childNodes;
//用嵌套for语句遍历出xml文档中的所有数据.
//这个for遍历的是顶层节点下的子级节点.
for (var i = 0; i<child_arr.length; i++) {
//输出顶层节点下的子级节点的节点名和顶层节点下的子级节点中属性name的值.
trace(child_arr[i].nodeName+”:”+child_arr[i].attributes.name);
//这个for遍历的是顶层节点下的子级节点下的子级节点.
for (var j = 0; j<child_arr[i].childNodes.length; j++) {
//输出顶层节点下的子级节点下的子级节点的节点名 和 顶层节点下的子级节点下的子级节点中属性name的值.不要晕.看看输出面板就会明白它们之间的关系了哦.
trace(child_arr[i].childNodes[j].nodeName+”:”+child_arr[i].childNodes[j].attributes.name);
}
}
} else {
trace(”加载失败!”);
}
};

Read more...

发表于2007年11月21日   (No comments)

最近几天忙于调试一个培训管理系统,主要是实现客户内部网络内计算机可访问管理系统,并且管理系统与网站之间的数据互通。

由于在这方面缺乏经验(主要是配置急及.net2.0),开始阶段比较吃力。甚至于都不能把系统在本地测试起来。

这个过程中主要是没有主要到以下几个问题:

1.iis在.net2.0上的设置。没有把framework从1.0升级到2.0。在.net方面的知识实在是太匮乏。
2.没有注意到系统的设置。该系统可以设置为单机版,局域网,广域网,局域网+广域网四种模式。

经过一段时间的折腾,才看到该系统的真实面目。

c#写的程序我看不懂,甚至于想把一个类似于asp里<%=id%>的从数据库传递过来的信息给删掉都不会,最后只能用margin-left:-999em给挪走。

很尴尬。

一直以来都不是很倾向于要去学习.net领域内的技能,因为我站在很无知的姿态认为这个领域实在是庞大,而且我的目标在前端,后台我只想在下一个阶段好好修炼一下php.

现在看来,有些领域,不触及触及就不会对以后的工作有利。

今天终于把最需要实现的功能都实现了,只是在端口映射上面还是无法前行,因为想用动态ip访问我的web服务器,只能把路由器的端口映射到我的主机上。查阅了很多资料,就是实现不起来。

下班前又把安装配置过程重温了一遍,不幸的是我的iis又出现了http 500d的错误。

明天把文档撰写一下这个事情应该算是了结了,就等着实际安装了。

经验很重要。

Read more...

发表于2007年11月01日   (No comments)

项目中还是出现了一些浏览器不兼容的问题,布局基本上没有问题,javascript那边开始不能很好的兼容了。

我仔细研究了一下,有些代码如果不加DOCTYPE那么需要javascript支持的效果也是能正常显示,但是,IE下其他地方却出现了错位等现象,原因是DOCTYPE定义了代码的解释方式, 有些代码IE是很难理解的。

我所权衡的是到底是放弃FF下的Js效果还是把Doctype去掉然后针对IE6写hack。

最终我还是放弃了FF下的特效,因为Doctype是起码的标准基础,没有这个是不行的,这个可以在阿捷的网站看到。另一方面,我们的项目所面向的使用群体大多数使用的还是IE浏览器,IE6尚不会那么快退出历史舞台,就算IE6退出了,IE7也是他们的首选,毕竟IE7将是系统捆绑的浏览器,IE7又开放非正版用户的注册了。

想来想去,其实还是自己的技术不精,还是很难把几个浏览器熟练的使用,把他们脾性都了解的很清楚,还是会有时候被他们的作怪搞得有点烦。不应该去埋怨标准的不统一,应该更好的去了解他们。

记得看过一篇文章,作者以一个opera使用者的身份倡导开发者使用较少的ajax,毕竟很多浏览器根本就是不支持的。想想也是,搞那么多花哨的东西出来,主流的IE浏览器才支持到DOM1,好多人还是无法接受一个被误解了的界面的。宁缺毋滥。

项目最终还是完成了,浏览器的困扰是没完没了的。假如做梦梦见一个比较开心的是事情,浏览器标准的慢慢统一应该算是其中一个吧。

Read more...