Page 1 of 212»

用户体验

  子嘉 |  用户体验 |  [0]  

说起这个话题的时候,就想以很久以前想要说的用户体验,每每在一个网站,有交互互动的模式的网站都会要求你注册一个ID,从自己在网络里待的这么些年,也 不知道注册了多少个网站了,可谓熟能生巧,如果设计合理的网站,注册几秒都可以,像163注册也不过一分钟,熟悉了就好了,但倍感众多网站,在用户注册系 统这一块设计思考不够合理,让一些潜见的用户或客户无形流失。

怎么样的注册系统更能留住用户呢?
(more…)

掌握 Ajax,第 1 部分: Ajax 入门简介

  子嘉 |  AJAX, JavaScript |  [0]  

一般,我们编写应用程序时有两种基本的选择:

  • 桌面应用程序
  • Web 应用程序

两者是类似的,桌面应用程序通常以 CD 为介质(有时候可从网站下载)并完全安装到您的计算机上。桌面应用程序可能使用互联网下载更新,但运行这些应用程序的代码在桌面计算机上。Web 应用程序运行在某处的 Web 服务器上 —— 毫不奇怪,要通过 Web 浏览器访问这种应用程序。

不过,比这些应用程序的运行代码放在何处更重要的是,应用程序如何运转以及如何与其进行交互。桌面应用程序一般很快(就在您的计算机上运行,不用等待互联网连接),具有漂亮的用户界面(通常和操作系统有关)和非凡的动态性。可以单击、选择、输入、打开菜单和子菜单、到处巡游,基本上不需要等待。

另一方面,Web 应用程序是最新的潮流,它们提供了在桌面上不能实现的服务(比如 Amazon.com 和 eBay)。但是,伴随着 Web 的强大而出现的是等待,等待服务器响应,等待屏幕刷新,等待请求返回和生成新的页面。

显然这样说过于简略了,但基本的概念就是如此。您可能已经猜到,Ajax 尝试建立桌面应用程序的功能和交互性,与不断更新的 Web 应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件,不过是在 Web 应用程序中。

还等什么呢?我们来看看 Ajax 如何将笨拙的 Web 界面转化成能迅速响应的 Ajax 应用程序吧。

在谈到 Ajax 时,实际上涉及到多种技术,要灵活地运用它必须深入了解这些不同的技术(本系列的头几篇文章将分别讨论这些技术)。好消息是您可能已经非常熟悉其中的大部分技术,更好的是这些技术都很容易学习,并不像完整的编程语言(如 Java 或 Ruby)那样困难。


顺便说一下,Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。这个短语是 Adaptive Path 的 Jesse James Garrett 发明的,按照 Jesse 的解释,这不是 个首字母缩写词。

下面是 Ajax 应用程序所用到的基本技术:

  • HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
  • JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信。
  • DHTML 或 Dynamic HTML,用于动态更新表单。我们将使用 divspan 和其他动态 HTML 元素来标记 HTML。
  • 文档对象模型 DOM 用于(通过 JavaScript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XML。 (more…)

offsetHeight,offsetWidth,offsetLeft,offsetTop

  子嘉 |  CSS, JavaScript, 工作日志 |  [0]  

以前总是搞不明白,offsetHeight和obj.style.height的关系。就知道获得对象的高度要使用obj.style.height。
这么做只对了一半。
今天就碰到了一个问题。
#tips{
position:absolute;
right:0px;
bottom:0px;
border:1px solid #cdf;
width:200px;
height:100px;
overflow:hidden; //隐藏超出层的内容
}
<div id=’tips’></div>
function go(){
var obj = $(’tips’);
alert(obj.style.height);  //永远都获得不到值。
alert(obj.offsetHeight); //102
}
obj.style.height,需要在元素里定义style才可以获得。而使用offsetHeight就可以直接获得。(请注意,offsetHeight的属性是只读的。就是说,即使<div id=’tips’></div>里面有内容,obj.style.height返回的还是0。)查了一下手册,offsetHeight的解释是:Retrieves the height of the object relative to the layout or coordinate parent。大概意思是说,获得对象的高度相对于layout或者父坐标。(英文太烂)。

但新的问题 又出现了,明明定义的高度是100px,为什么返回的是102呢?多的2是哪里的?原来是css里定义的border:1px的原因。
得出的结论:offsetxxx是只读的。如果使用style来定义高度,可以使用obj.style.height来得到,并且值是个字符串,例如,21px,22px等。
如果使用offsetHeight返回的是数值。。同理,offsetWidth也是和offsetHeight一样的。同理,offsetLeft,offsetTop也是一样的。

谢亚龙下课

  子嘉 |  心情随笔 |  [0]  

最近一直在瞎忙,新闻好久不看了,今天中午和以前的同事一起吃饭,同事告诉我,现在有个叫谢亚龙下课的论坛比较火。上面都是广大中国球迷发表的对中国足球的不满和对龙王的不满的文章。谢亚龙下课的出现,个人觉得是对中国足球表示不满发泄的一个好出处。在现在国足不济的情况下,谢亚龙下课的出现正好满足部分球迷的要求。希望谢亚龙下课能让更多的人了解中国足球的内幕并且想办法拯救中国足球。

试用谷歌浏览器chrome

  子嘉 |  心情随笔 |  [0]  

北京时间9月3日凌晨消息,谷歌面向全球100多个国家推出“Google Chrome”浏览器(谷歌浏览器)。

先说说谷歌浏览器chrome的基本功能:

在功能特性上,谷歌浏览器的地址栏整合了搜索功能,只需几次点击,用户便能尽快地查到所需信息;另外,当在谷歌浏览器中打开一个新的标签页时,用户将看到一些使用谷歌浏览器记录的缩略图,其中包括以往经常用使用谷歌浏览器浏览的网站,最新的搜索结果以及书签页,使用户能更容易的浏览网页。

为了更一步促进网络的开放性,谷歌浏览器所有的代码全部开源,这个开源项目名为Chromium。谷歌希望能通过公开谷歌浏览器的基础架构,在提升谷歌浏览器的性能的同时,与整个业界合作从而促进互联网的健康发展。

官方下载地址:

http://www.google.com/chrome

Google Chrome的官方网站:

gears.google.com/chrome/

谷歌浏览器chrome 集成了JS调试工具,有调试JavaScript和JavaScript控制台。需要注意的是谷歌浏览器chrome的js调试工具占用内存是比较多的,甚至超过了ff,但仅在打开谷歌浏览器chrome调试器的时候。

总体说,谷歌浏览器chrome还是很不错的。谷歌浏览器chrome已经加入到了浏览器之争中,不知道是否谷歌浏览器chrome能于IE相抗衡。让我们试目以待。

Page 1 of 212»