| 晃晃悠悠's profile晃晃悠悠~~~PhotosBlogLists |  Tools  Help |
|
|
6/16/2005 惊奇！发现我的第一个blog3/8/2005 加快 DHTML 的一组技巧偶然看到csdn中文站 上归档文件 中的一盘文章: 加快DHTML的一组技巧,感觉到DHTML虽然简单,但要做到很专业也不容易,绝不比java、jsp容易。以后还要多看些好的技术文档。 3/4/2005 学习示意图及职位技能介绍
3/2/2005 高科技风格的代表莫过于是2A Studio及它的作品了
2A Studio（2Advanced Studio）的站点： 他们的代表作品（到2003年11月20日止） http://www.fordvehicles.com/trucks/f150/index.asp?bhcp=1 http://www.fordvehicles.com/100/ http://www.fordvehicles.com/escapehybrid/ http://www.fordvehicles.com/fordgt/ http://www.2advanced.com/realtybid/ http://www.2advanced.com/webbasis/ http://www.seasonsrecordings.com/ 高科技派（Hi－Tech）更加追求细节的完美。2A在对细节的处理和对于动画程中时间线和空间感的把握差不多已到了炉火纯青的地步。相对而言，他们（高科技风格派的人）总是会在作品中增加一些可有可无的细节，以烘托作品的精准。当然这些细节的处理决不是只是随便放放就可以的。他需要你的直觉和对平面空间关系的把握。而且一条直线的精细的程度往往是1个像素。配合颜色和透明度（Alpha）的细致（一个Alpha值低的线条更加精细些，可以参考 http://www.diasin.com/ 站点）。 相对而言，高科技风格的flash所用的帧速率会高些（30-40甚至80以上），一个停停顿顿或者过渡生硬的作品不太可能给人高科技的感觉。 高科技风格派差不多是人类科技文明成果的最新体验者，他们锐意进取，追求时尚，有着对周围先进事物天生的敏感，光泽质感的金属、玲珑剔透的玻璃，无不渗透了对现代生活的理智感悟。冷色和钢质材料的的质感则更多的应用于他们的作品中。（当然，2ad现在也正在开始尝试使用暖色系的颜色，不过仍然还是冷暗的那种） 差不多他们的活力并不是体现在颜色和环境色的选择中，而是体现在他们的行动速度中（动画）。往往这种动画会体现一种爆发的力量感。 这种风格更倾向于将表现元素材料化、功能化。往往在其中也蕴藏着一部份简约风格的元素。 元素间的空间搭配和它们和实用性的联系相对而言的高求更高，以及它们所组成的稳定感。当然，还有创新的力量。 相信结合建筑业中的高科技风格你能得出一个更深的体会： 高科技感派通常运用以下方式?形容高科技感：
当然，未必是只有像2ad那样的作品才能算是高科技的风格（不是照抄）。这种风格的产生源自已你本身对周围科技事物进步所拥有有敏感和你的性格中对新生事物的追求成份。
当然，随着人性化关怀的理念的逐步深入和渗透，高科技风格中也会略带其中的一些因素。产品一体化的设计和那些大师级的产品设计风格以及流线条的设计这些都在影响着高科技的风格。但有一个非常值得思考的地方。高科技风格中的某部份因素是把功能模块外露在表现，随着一体化设计和发展，在一体化的表面中隐藏功能模块，然后在（鼠标）经过的时候无缝的凸现出来这种技术很难在真实的世界中实现（至少现在还未达到这样的物理或者生物水平-形变），但在flash 中，这却并不太难。你可以尝试使用它们。或者找到更多的表现手法。 2/3/2005 有关表单验证以下是checkdata.js代码片段： //去左空格; function ltrim(s){ return s.replace( /^\s*/, ""); } //去右空格; function rtrim(s){ return s.replace( /\s*$/, ""); } //去左右空格; function trim(s){ return rtrim(ltrim(s)); } //是否为空值; function IsEmpty(_str){ var tmp_str = trim(_str); return tmp_str.length == 0; } //是否有效的Email; function IsMail(_str){ var tmp_str = trim(_str); var pattern = /^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*$/; return pattern.test(tmp_str); } //是否有效的数字; function IsNumber(_str){ var tmp_str = trim(_str); var pattern = /^[0-9]/; return pattern.test(tmp_str); } //是否有效的颜色值; function IsColor(color){ var temp=color; if (temp=="") return true; if (temp.length!=7) return false; return (temp.search(/\#[a-fA-F0-9]{6}/) != -1); } //是否有效的链接; function IsURL(url){ var sTemp; var b=true; sTemp=url.substring(0,7); sTemp=sTemp.toUpperCase(); if ((sTemp!="HTTP://")||(url.length<10)){ b=false; } return b; } //是否有效的手机号码; function IsMobile(_str){ var tmp_str = trim(_str); var pattern = /13\d{9}/; return pattern.test(tmp_str); } 1/14/2005 MIME Type 引出的两难困境come from : http://jjgod.3322.org/2004/11/14/mime-type-oyouaaana/ 为什么这么说呢？首先，我们要了解浏览器是如何处理内容的。在浏览器中显示的内容有 HTML、有 XML、有 GIF、还有 Flash……那么，浏览器是如何区分它们，绝对什么内容用什么形式来显示呢？答案是 MIME Type，也就是该资源的媒体类型。 媒体类型通常是通过 HTTP 协议，由 Web 服务器告知浏览器的，更准确地说，是通过 Content-Type 来表示的，例如: Content-Type: text/html表示内容是 text/html 类型，也就是超文本文件。为什么是“text/html”而不是“html/text”或者别的什么？MIME Type 不是个人指定的，是经过 ietf 组织协商，以 RFC 的形式作为建议的标准发布在网上的，大多数的 Web 服务器和用户代理都会支持这个规范 (顺便说一句，Email 附件的类型也是通过 MIME Type 指定的)。 通常只有一些在互联网上获得广泛应用的格式才会获得一个 MIME Type，如果是某个客户端自己定义的格式，一般只能以 application/x- 开头。 XHTML 正是一个获得广泛应用的格式，因此，在 RFC 3236 中，说明了 XHTML 格式文件的 MIME Type 应该是 application/xhtml+xml。 当然，处理本地的文件，在没有人告诉浏览器某个文件的 MIME Type 的情况下，浏览器也会做一些默认的处理，这可能和你在操作系统中给文件配置的 MIME Type 有关。比如在 Windows 下，打开注册表的“HKEY_LOCAL_MACHINE\SOFTWARE\Classes\MIME\Database\Content Type”主键，你可以看到所有 MIME Type 的配置信息。 浏览器处理 XHTML 和 HTML 有什么区别？HTML 的语法过于随意了，有许多简写，标记不匹配的复杂情况，同时长期 Web 发展下来积累下来了许多错误的用法——比如一个文档里完全没有 <html></html> 标记——但浏览器还是得支持它，可想而知，为了支持这些“Tag Soup”——也就是我们所说的那些，乱成一锅粥的标签——浏览器要很费力地去猜测一段标记的意思，努力以用户期望的形式表达出来。一句话说，虽然 HTML 4.01 允许你用语义化、结构化的、内容与表现分离的方法来书写标记，但由于它沿袭了 HTML 这种格式，使得浏览器对于凡是 MIME Type 为“text/html”的文件，都得采用一种非常费劲的方法去处理，这对于 Web 的发展是很不利的。 再说除了浏览器，还有许多其他的用户代理要阅读 HTML：纯文本的浏览工具、读屏器等等。 创造 XHTML，很大一部分原因正是要通过 XML 重新严格地规范一遍标记，让这些用户代理可以以一种更简便的方式来解析这些标记。因此，XHTML 这种新的格式，天生就要求内容的发布者必须以严格的方式来标记自己的文档。 当然，XHTML 对于内容提供者也有好处，此处先不展开，详见下文。 MIME Type 与之又有什么关系？把前两节的内容合起来，你显然可以发现：一个正常支持 XHTML 的浏览器会根据服务器提供的 MIME Type 是 text/html 还是 application/xhtml+xml 来区分获取到的内容是 HTML 还是 XHTML，对这两种格式，分别以两种不同的方式来解析文档，后者解析起来要严格得多，但对于用户代理开发者和内容提供者都有很大的好处。 那么，那些浏览器正常的支持了 XHTML 呢？答案是 Mozilla、基于 Mozilla 的浏览器如 Netscape 7 和 Firefox、较新版本的 Opera 和 Safari 等等。但不包括 Microsoft Internet Explorer。问题是，这一“不包括”，就除掉了大约 90% 的浏览器市场啊，在我们抓狂以前，先来看看 IE 是什么处理 application/xhtml+xml 的：IE 不认得这种 MIME Type，它要么提示你是否下载那个文件，要么就把文件内容当作纯文本显示出来，反正是不可能正常显示标记。 这正是造成我们不得不给 XHTML 文档标以 text/html 的原因 1，实际上，目前 Web 上 95% 的 XHTML，都是扮成 HTML 的 XHTML (包括 w3.org)，浏览器 (包括我们引以为傲的 Mozilla) 压根没有用 XML 解析器去解析那些 XHTML，而是沿用处理标签汤的老办法。 这个时候你会问了，在我看起来，老办法显示得很好啊，干吗为此感到头疼呢？问题正是出在“看起来”这个词上，实际上，一些细微但是不可忽略的差别仍然存在。 用 application/xhtml+xml 方式解析 XHTML 与用 text/html 方式解析的差别下面所说的“HTML”，就是指 text/html 的解析方式；相应地“XHTML”就是指“application/xhtml+xml”的解析方式。
总结起来就是，我们正在广泛使用的其实是一种看起来已经 XHTML 化的 HTML，想象一下吧，如果要求所有这些网站立即把 MIME Type 换成 application/xhtml+xml，即便用可以正常解析 XHTML 的浏览器来浏览，它们多数会死在前面列举的某一条原因下，无法正常显示。然而这不好说是 XHTML 的错，正常的处理理应如此，只不过我们一直被纵容了。 可是 W3C 还是不断要求我们以正确的 MIME Type 来提供 XHTML，为什么呢？因为我们要用到 XHTML 提供的好处啊，只有被认为是 XHTML 或者 XML 文档的东西，浏览器才会启用这些“好处”，比如你可以试着在 IE 中打开 XHTML 中嵌入的 MathML 看看，没有效果，它被当作 HTML 一样显示。 现在的问题是，既然把文档设定为真正的 XHTML 是如此的麻烦，会带来如此多的问题，干吗不舒舒服服地呆在 HTML 上呢？为什么要往 XHTML 过渡？XHTML 提供的“好处”值得我们为此付出如此多的代价吗？ XHTML 的优势最重要的两点是：
显然，如果文档连 well-formed 都做不到，优点 1 对你是无效的，就算有效吧，就个人来说，其实也没有多少人对 XHTML 进行 XML 解析，因为能做到的，大概也就是从 h1、h2 这些标记中读出文档结构一类的功能，实在没什么大用处。 而第二点对大多数内容提供者来说，太远了，RDF 是什么东东？加入 RDF 信息有什么好处？没多少人知道或者有兴趣知道；MathML？这是可扩展性目前用得最多的地方，因为很多 MathML 阅读和编辑工具已经普及了，但如果你不是个成天在公式中打转的科学工作者，多半对此也没有兴趣；SVG 呢？倒是挺有意思，但目前显然没有获得广泛的应用，事实上，日后能否获得广泛的应用，还要看它能不能在与 Flash 的竞争中活下来：成为标准的东西被人抛弃也是常有的事。 总结起来，所有这些优点几乎都是一些空头支票，一些未来才能实现甚至未来都不知道能不能实现的东西，比如说你现在在开发一个 CMS 系统，如果现在都已经不能保证里面的内容 well-formed，有什么理由说以后，数据越来越多以后，反而会回头去把错误的标记一一改正？ 事实上，用不到这些空头支票，我们的生活几乎没有受到任何影响。 那么，是否这就是说，XHTML 几乎就是一个鸡肋了 2？ XHTML 啊 XHTML行文至此，已经陷入了僵局，其实我本无意把 XHTML 说得那么差的，但问题是我每句说的都是实话呀，也没有忽略什么有必要提到的因素，但反复查考，总结起来还是那一句话：XHTML 其实是一个带一点理想主义的，对普通用户来说，相比 HTML 4.01 并没有显见优势的格式。3 于是我们就陷入了两难困境：刨掉那些花言巧语，没有任何显见的优点吸引我们我们转向 XHTML，但如果我们永远躺在 HTML 4.01 舒服的被窝里，Web 岂不是永不前进了？ 答案还是个问号。 小结本来，仅仅为了未来的锦绣图景，大家多数还是愿意转向 XHTML 的，这大概是个博弈论中微妙的平衡，用户、浏览器厂家、标准制定者三家玩的一个游戏，但 IE 打破了这个平衡：它不支持 application/xhtml+xml，于是用户只好都以 text/html 来发布 XHTML 页面。 如果把他们人格化：我觉得“用户”大概是个剃头挑子一头热的家伙，他们为自己的 XHTML 页面在一切浏览器上都如此美好而感到满意，却浑不知道背后其实还是 HTML，自己没沾着一点“X”的好处。 这时标准制定者——他一定是个理想主义者——也不满意，因为用户其实还是在以 HTML 的方式来写 XHTML 的，根本没准备好向 XHTML 进行转变的决心，标准制定者一心领着大家往 Web 美好的未来远航，却发现无论是用户还是浏览器厂商都在尽给他添乱。 浏览器厂商们——他们拥有最大的筹码，却始终冷眼旁观——此时却在开心地内斗，对此情况耸耸肩表示无能为力。 你可能会对此感到沮丧，但这的确是目前 Web 中的事实，承认也好不承认也好，确定一个目标，然后艰难而执著地前行，大概是我们这些标准推广者唯一能做的。 注释
1/6/2005 Optimal Website Design
by: Elizabeth McGee Lead your viewers to the starting point and then direct them through your site without confusing them. Here are some excellent tips that can help you develop a user friendly site and please your visitors senses. Give yourself a chance before they get away. 1. Use lots of white space. 2. Don't use animation and flashing objects. 3. Every page of your site should contain an 'about' link. 4. Include a 'Privacy' Link 5. Always keep your links in blue. 6. Keep navigation consistent 7. Understandable buttons and links. 8. Focus on the 'YOU', not the 'ME'. 9. Make sure your page loads fast. http://www.1-hit.com/all-in-one/tool.loading-time-checker.htm 10. Use a site map. 12/27/2004 CSS 陈列馆 - 一网打尽 CSS禅意花园是最富盛名的CSS设计陈列馆，Dave Shea在创办之初是为了让网页设计师通过CSS样式表针对同一个Html文件的设计不同的样式，却没想到这个项目成为了当今网页设计顶尖高手展现无穷创意的舞台，看看禅意花园的主人自己怎么说。  Cssvault是第一个以网站缩略图的方式呈现的优秀设计的网站，而CSS陈列馆（showcase）这一说法也是由这里开始，从开始至今大约一年的时间里面，收录了大量的优秀设计，是CSS设计师必去的网站之一。  Web Standards Award，顾名思义，这里也是收集符合“网页标准”设计的网站，除收集外，还对每月收集来的网站进行评选，获胜设计可以冠以当月“网页标准”设计奖的头衔，对于设计师来说，也是一种殊荣。  CSSBeauty属于后起之秀，今年五月成立至今，也收录了大量的优秀站点。而与前几个网站有所不同的是，他对说收录的网站进行了分类，诸如：商业，娱乐，个人等等，使得收集的内容对访问者更有针对性。  这个网站是最新出炉的一个CSS陈列馆，和前面介绍的几个网站大同小异，也是采用缩略图的方式呈现，当然每个网站收集者的审美特征都不同，多一个地方无疑也给钟情于CSS设计的朋友多了一个选择，而且他们的更新很勤快。  这里是我特别推荐的一个，前面的网站都收集了很多优秀的设计，符合“网页标准”，可为什么这些网站符合“网页标准”，到底这些网站好在哪里？除了外观之外，还有那些地方是需要设计者注意的？这里将带给你答案，每周一个案例分析，精彩纷呈。  还有呢，Stylegala，也是上个月才推出的一个CSS陈列馆项目，和前面介绍的如出一辙，唯一不同的地方是访问者可以对收集其中的优秀设计进行投票。而作者对色彩搭配方面颇为敏锐，所收录的网站皆有很强的视觉效果。  不好意思，还有最后一个，既然说了是一网打尽，当然要收集得全面一些。这个网站的主人好像是欧洲人，总之他写的不是英文，看不明白。不过他自己做的Postearte这个网页本身就是一个很优秀的设计。特别是导航条，别出心裁。 |
懒得翻译出来了：|
|
