JavaScript—计算图片加载的张数。
通过JavaScript 来计算当前图片加载的张数。
原理:
先定义一个图片的数组,然后通过image的onload事件来计算,注意,onload在ie和火狐有所不同。
最后需要一个进度条与之结合即可。
这个脚本在做游戏的地方用得比较多。
演示:
通过JavaScript 来计算当前图片加载的张数。
原理:
先定义一个图片的数组,然后通过image的onload事件来计算,注意,onload在ie和火狐有所不同。
最后需要一个进度条与之结合即可。
这个脚本在做游戏的地方用得比较多。
演示:
为了让移动设备也能用上jQuery,jQuery开发团队发布了jQuery移动设备版开发项目jQuery Mobile Project(http://jquerymobile.com)。jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。
对于大名鼎鼎的jQuery开发团队来说,当然要让jQuery Mobile支持全球主流的移动平台,而不仅仅是北美流行的移动平台。想要知道jQuery Mobile项目将要做些什么吗?请看jQuery移动平台策略;想要知道jQuery Mobile项目将会支持哪些浏览器吗?请看Mobile Graded Browser Support。
jQuery Mobile开发团队正在紧张工作,准备那些要支持的移动设备并针对这些设备进行测试。他们争取在今年晚些时候发布jQuery Mobile。如果你想为jQuery Mobile提供帮助,请加入jQuery Mobile社区的讨论组。
刚刚启动的jQuery Mobile测试实验室
jQuery Mobile项目已经得到了Palm, Mozilla等移动浏览器厂商的赞助。
jQuery Mobile开发团队说:“能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。”
编者:移动互联网,挡不住的趋势…
英文原文:Announcing the jQuery Mobile Project
转载博客园编译
关于亚信联创科技:
职位描述:
1、将切片好的设计稿转换成Web界面,HTML代码要求结构清晰,符合语意。
2、精通CSS,并且能够保证Web界面做到浏览器兼容(IE6,7,Firefox)。
3、JavaScript基础知识扎实,能完成Web项目中常用的脚本,并且能结合CSS实现基本的页面动态效果。
4、有JavaScript框架应用和项目开发经验,熟练使用jQuery或Ext框架。
5、根据用户的需求,分析并给出最优的前台技术解决方案。
任职要求:
1、有 1-2 年以上的Web项目开发和前端开发经验;
2、精通HTML、CSS、JavaScript等前台相关技术,熟悉W3C网页标准,了解后台开发语言(JAVA);
3、熟练运用常见JavaScript框架,如jQuery或 Extjs等;
4、有解决问题、钻研新技术的兴趣和能力,善于交流和表达,有良好的团队合作精神;
5、对业内新技术及趋势有较强的敏感度;
6、抗压能力强,可应对较大的工作压力。
如果你有这些本事,请投送你的简历吧: cssrain#gmail.com (#换成@)
最近有读者求助,说在iframe中,创建一个元素,然后添加到父页面中在ie6,ie7中行不通,而firefox和IE8可以。
代码如下:
var $alertPanel = $( document.createElement(“div”) );
$alertPanel.css(“width”,”120px”).css(“height”,”50px”).text(“Hello CssRain!”);
$(‘body’,parent.document).append($alertPanel);
顺着他的意思,我也写了个Demo,发现确实是这样。
翻了翻资料,也没看到类似的问题。
然后使用原生的DOM方法写了一次,发现也不行,一样。
var div = document.createElement(“div”);
div.style.width = “120px”;
div.style.height = “50px”;
div.style.border = “solid 1px #000000″;
div.innerHTML = “Hello CssRain!”;
parent.document.body.appendChild(div);
于是想到既然appendChild要parent.document,那么创建的时候是否也要parent.document.createElement呢?
于是把代码改成:
var div = parent.document.createElement(“div”);
div.style.width = “120px”;
div.style.height = “50px”;
div.style.border = “solid 1px #000000″;
div.innerHTML = “Hello CssRain!”;
parent.document.body.appendChild(div);
这样就成功了, IE6和IE7能用。
看例子:
http://www.cssrain.cn/demo/IEcreateElement/page1.html
总结:
如果你想在IE6,IE7中创建一个父页面元素,那么你必须使创建元素属于父页面。
var dummy = parent.document.createElement(“div”);
var t = parent.document.createElement(“table”);
…
在Firefox,IE8中,它允许在一个文档中创建要追加到另一个文档的元素。
所以在Firefox,IE8中,可以使用parent.document也可以使用document。
另外google浏览器非常怪异,很乱。如果要兼容google浏览器,那么建议换种思路吧,比如直接用 parent.函数名() 调父页面的方法。
项目中遇到一个小问题,但严重影响了用户体验。
我们先看一个例子:
http://www.cssrain.cn/demo/dialog_jQuery_ui/modal_looseState.html
这是我们项目中采用的jquery ui dialog 做的页面,我把他提取出来,简化一下。
例子中,点击add按钮弹出遮罩层,层中有2个文本框和2个多选框。
现在我们开始测试这个问题:
首先,我们在文本框上输入文本,把多选框也选中。然后点击窗口关闭。
接下来,我们再点击add按钮,重新打开层。
在ie7下,发现刚才所填写的,所选中的一切正常。
在ie6下,文本框的内容还存在,但多选框的选中已经丢失。
接下来为了找出原因,我看了下jquery的源码,然后发现jquery使用了appendChild这个方法,
于是我写了个简单的例子来验证是不是它引起的:
http://www.cssrain.cn/demo/dialog_jQuery_ui/b.html
经验证,果真如此,ie6下多选框选中状态在点击appendChild后,丢失了。
暂时解决办法是:
在多选框上添加:onclick="this.defaultChecked=(!this.defaultChecked)"
修改后的例子:
http://www.cssrain.cn/demo/dialog_jQuery_ui/modal.html
我们认为目标导向设计方法由4个P组成,即process、pattern、principles、practices(过程、模式、原则、实践),下面我将和大家一起讨论前3个P。
交互设计原则:交互设计不是凭空猜想
我的用户在试图实现什么?
我的用户如何看待我们要实现的产品?
我的用户会发现哪些体验是吸引人并且是有收获的?
我的产品应当如何工作?
我的产品应当采用何种形式?
用户如何同产品交互?
我的产品功能如何能最有效地组织在一起?
我的产品以何种方式面向首次使用的用户?
我的产品如何体现在技术上易于理解,让人喜欢,并易于控制?
我的产品如何处理用户遇到的问题?
我的产品如何帮助偶尔使用的用户或者生手用户变得更熟练?
我的产品如何为专家级用户提供足够的深度和力度?
交互设计原则:用户界面应该基于用户的心理模型,而不能基于实现模型
如果产品的表现模型非常符合用户的心理模型,通过提供能使用用户很容易理解其目标和需要如何得到满足的认知框架,便可以消除用户界面中一些不必要复杂性。
交互设计原则:目标导向的交互反映了用户的心理模型
用户的心理模型并不一定要真实或者准确,但它应该能够让用户更有效地工作,例如大多数非技术类的用户想象计算机的屏幕是其心脏,这很自然因为计算机屏幕是他们一直盯着的,CPU不同于视频显示器的事实并不能帮助他们思考与计算机交互的方式,即使这在技术上是更准确的概念。
交互设计原则:用户不理解布尔逻辑
虽然布尔逻辑是科学的理性的,但任何使用布尔逻辑来与用户交互的应用注定会遇到严重的用户界面问题,既然能熟练地使用自然语言,为什么一定还要他们用另一种不能熟悉的语言来表达呢?并且让人痛恨的是为什么还要重新定义一些关键词呢?
交互设计原则:不要全盘复制机械时代产品的用户界面,而一定要按照信息时代的客观情况进行改良
交互设计原则:没有人愿意停留在新手级别
交互设计原则:为中间用户优化
我们的目标既不是吸引新手,也不是将中间用户推向专家层,我们的目标有3个方面,即首先让新手快速和无痛苦地成为中间用户;其次避免为那些想成为专家的用户设置障碍;最后最为重要的让永久的中间用户感到愉快,因为他们的技能将稳定地处于中间层。
交互设计原则:将用户想象成非常聪明但非常忙的人
如果界面的表现模型紧密地符合用户的心理模型,则其可以在不强迫用户了解实现模型的情况下为用户提供所需要的理解。让新手转变成中间用户需要程序提供特别的帮助,而一旦成为中间用户,这种帮助反过来会妨碍用户。这意味着无论你提供什么样的帮助,它都不应该在界面中固定下来,当不再需要这种服务时这种帮助应该消失。
专家也是非常重要的人群,因为他们对缺少经验的用户有着导乎寻常的影响。当一个用户思考产品时,他会更加信赖专家,而不是中间用户的看法,听从专家的建议,即使这些建议并不适用,专家用户持续而积极地学习更多的内容,以更多了解其自身行动和程序的行为,以及表达之间的关系。专家欣赏更新的且更强大的功能,对程序的精通使他们不会受到复杂性增加的干扰。
永久的中间用户知道如何使用参考,只要不是必须一次解决所有问题,他们就有深入学习和研究的动机,这意味着在线帮助是永久中间用户的极工具,他们通过索引使用帮助,因此索引部分必须非常全面。
永久的中间用户会确定其经常使用和很少使用的功能,用户可能会遇到一些模糊的特性,但会很快地识别出自己经常使用的功能,中间用户通常要求这些常用功能中的工具放在用户界面的前端和中心位置,容易寻找和记忆。
永久和中间用户通常知道高级功能的存在,即使他们可能不需要,也不知道如何使用这些功能,但是产品具有这些高级特性的事实让永久的中间用户放心,让他们确信,投资购买使用这个程序是正确的选择。
同时我们的产品必须同时解决业余爱好者和专家可能会遇到的各种情况,但是不要让这样的技术需求,影响你们的设计理念,你必须为专家用户提供那些功能,也必须为新手提供支持,但必须半大部分的才智,时间,和资源为大部分代表用户—永久的中间用户而设计,为期提供最好的交互。
交互设计原则:交互设计“什么”,在设计产品的“如何”行为之前,要先定义产品做“什么”
在需求定义阶段确定的是设计什么,即我们的用户角色需要什么样的信息和能力来完成他们的目标,那么产品看起来是什么样?是什么为?怎样操作?感觉如何等。在需求没有经过明确定义和对问题是什么缺乏统一认识的情况下,我们无法对提出的方案评估设计的合理之处,所以我们一定要明确交互设计“什么”。
交互设计原则:需求定义阶段的五个步骤
1.创建问题和前景综述
2.头脑风暴
3.人物角色的期望
4.构建情境场景剧本
5.确定需要
交互设计原则:定性研究更快帮助识别用户和潜在用户的行为模式,帮助我们理解
产品潜在用户的行为,态度与能力(aptitude)
将要设计产品中所含的技术,业务和情境—问题域(domain)
问题域中的词汇和其他社会方面
已有的产品及其使用方式
交互设计原则:定性研究也通过以下方式帮助解决设计项目的进展问题
为设计团队提供可信性和权威性方面的依据,因为设计决定可能追溯到研究结果,
统一团队对问题域和用户所关心问题的理解,
使管理者能够在产品设计问题上做出更综合的决定,否则这种决定只能基于猜测和个人偏好。
产品如何融入用户生活的大背景之中?
用户使用该用产品时的基本目标是什么?
哪些基本任务能帮助人们达成这些目标?
哪些经历容易引起人们注意?这些经历同将要设计的产品有什么关系?
用户采用当前的方法完成产品预计完成的功能时会遇到一些什么样的问题?
交互设计原则:定性研究的类型
访谈利益关系人
访谈主题专家.
访谈顾客
访谈用户
用户观察、人种学现场研究
文献调研
产品/原形和竞争审查
交互设计原则:用户访谈和用户观察
情境调查的改进
人物角色假设
业务和消费领域的角色
行为和人口统计变量
环境因素
组织计划
交互设计原则:访谈者遵守以下规则,会收获大量有用的定性数据
1在交互发生的地方进行访谈
2避免一组固定的问题
3首先关注目标,任务其次
4避免让用户成为设计师
5避免讨论技术
6鼓励讲故事
7请求演示和讲解
8避免诱导性的问题
交互设计原则:通过问卷调查或者开放式访谈详细了解人们完成特定任务的现状,任务分析应当关注如下方面
1用户执行任务的原因,即任务背后的目标
2任务的频繁与重要性
3提示,是什么促使任务开始执行?
4依从关系—哪些事是任务执行的条件,哪些事以任务完成为前提?
5有关人员,他们的角色与职责
6执行的具体动作
7做出的决策
8支持决策的信息
9有哪些问题—失误与意外情况
10如何纪正这些失误与意外
问卷调查完毕或者访谈结束以后,任务被分解为流程图或类似的形式,以表现动作之间的关系,也常常表现人与流程的关系。尽管任务分析是理解用户当前行为,识别困难所在并发现改进机会的重要途径,但是我们在这里优先关注用户的目标,用户的目前行为常常只是与陈旧的系统及组织交互的产物,通常与其喜欢的做法,或者最有效的行为方式极为不同。
交互设计原则:基于定性数据研究支持的模型,一旦有了稳定的设计想法,要判断你所做出设计选择是否有效,可用性测试是个有效的工具,而定性研究能帮助你们在设计中这一艰难的过程中有一个好的开始。
交互设计原则:通过构造人物角色获得以下信息
1.发现并确定行为的变量
2.将访问对象和行为变量对应试起来
3.发现并确定那些显著的行为模式
4.综合各种特征和相关目标
5.检查是否有重复并且是否齐全
6.较为详细地描述属性和行为
7.指定人物角色类型(首人,次要,补充,顾客,接受服务的,负面人物)
交互设计原则:工作流或者序列模型对于捕捉企业组织内的信息流和决策过程非常有用,并且通常被表达为捕捉多种现象的流程表。这种工作方法要推行。
1.某个过程预期的目标或者结果
2.该过程的频度和重要程度,以及每个动作
3.是什么引发或者促进了该过程,以及每个动作
4.信赖关系,即在某个阶段必须执行的过程以及每个动作,哪个过程是依赖于该过程的完成及每个动作
5.牵扯到的人及其角色和责任
6.具体执行的动作
7.做出的决定
8.用来支持决定的信息
9.出了哪些错误—错误和特例情况
10.错误和特例情况如何被更正
交互设计原则:定义交互框架
1)定义产品外形因素,你要设计的是什么产品?研究用户将投入多大的注意力和产品互动,产品的行为将会对用户投入的注意力做出如何的反应;
2)定义功能和数据元素;
3)决定功能组和层次,从属关系;
4)绘制出大致的交互框架,线框图,交互原型;
5)构建关键线路场景流程,通过线框设计充分描述所提供设计如何帮助用户来完成他们的目标,描述用户频繁使用界面的主要路径,流程,用户与组成线框图的不同功能和数据元素的交互,通过设计描述用户动作和产品响应的更为具体的细节。
6)通过验证性的情景测试来检查你的设计,比如清空数据库,配置,以及其他特别的请求等交互设计。
交互设计原则:作用于不同层面的设计原则分别是,设计价值,概念原则,行为原则,界面原则,多数交互设计与视觉设计的原则跨平台适用,同时运用行为与界面层面的设计原则使工作负荷降至最低
应当遵守以下设计原则:
设计价值(设计原则指导行为,其核心基于一系列价值理念);
概念原则(用来界定产品定义,产品如何融入广泛的使用情境);
行为原则(描述产品在一般情境与特殊情境中应有的行为);
界面原则(描述对于特定的活动或过程,不同的人们有不同的心理模型,但人们很少按照计算机如何行动的机制来想象自己的心理模型,每个用户都自然地对软件如何执行任务有一个心理想象,用户通过这种心理想象来寻找原因而后深入了解机器的行为。
(2)少就是多;
(3)让用户直接操作产品,而不是强迫用户与产品讨论;
(4)工具就放在手边;
(5)提供非模态的反馈;
(6)为可能的设计,为可能做好准备;
(7)提供符合情境的信息;
(8)提供直接的操作和图形输入;
(9)反映对象和程序的状态;
(10)避免不必要的报告;
(11)不要用对话框来报告常态内容;
(12)避免空白的状态;
(13)请求原谅,而不是许可;
(14)要把命令和设置区别开来;
(15)提供选择,而不是提问;
(16)隐藏弹射座椅的操纵杆;
(17)优化响应能力,调节延迟时间;
待续 MSN:aleendesign@hotmail.com
Userfly
Userfly可以提供免费的网页访客动作记录服务。只需要在网页中添加一段简单的Javascript代码,就可以记录访客从打开该网页到关闭整个过程中的动作。 Userfly能够记录的内容包括鼠标的移动、点击以及键盘输入等动作。下面这个视频很好的讲解了Userfly的使用方法和主要的功能http://userfly.com
免费用户每个小时记录10位用户(10个IP)的动作。Userfly也提供收费服务,除了可以记录更多的用户外,还支持身份验证和网页加密。对于网站拥有者来说,Userfly可以很方便的对用户行为进行检测和分析,通过A/B Testing等方法为网站UI/UE提供非常有价值的信息。但是对于很多网页访问者来说,如果知道他们所浏览的网页有这样的功能,可能就会敬而远之了。
Mouseflow
mouseflow是一款在线分析工具,它能对访客的浏览习惯和鼠标操作行为进行跟踪,从而获取人们对页面的关注范围和操作习惯,为你对页面进行优化提供了重要依据。它将汇总分析人们在页面上的鼠标操作动作,并以直观的“热区图”形式反映出来。
打个比方:大家都见过baidu和google的页面热区图,从图中可以看出用户对于页面最点击最多,也就是最关注的区域。那么,如果你的站出现在红、黄色区域中,将收到的点击次数也将是最多的。
接下来是查看跟踪记录。在这个页面中我们可以查看到访客情况信息。如访客的地理位置,来源链接,进入页面,浏览页面量,停留时间,浏览器等。最酷的是,点击绿色播放按钮,还可以回放某访客在你页面上的每一次鼠标操作动作。看看他在浏览你的页面时做了怎样的操作。比如鼠标在哪里点击了,并且完整地回放是怎样浏览你的页面的。
ClickTale
ClickTale是一家国外的免费网站统计服务网站,但ClickTale并不以流量统计见长,它是对你的网站访客浏览行为进行分析的一个工具,以类似视频的方式将访问者在你的网站上进行的操作全部记录下来,你可以在线观看也可以下载到电脑上。利用ClickTale的访客行为视频记录,可以帮你更好的布局你的网页,给访问者带来更好的用户体验,以使你的网站回头客越来越多!有点类似Free8之前介绍的CrazyEgg,不过ClickTale提供的是访客动态行为记录,CrazyEgg提供的是网页热点分析图像,各有所长,可同时使用,相互参考。
上海五分钟诚聘前端开发工程师
职位名称:前端开发工程师
你有两个方向可供选择:
平台方向
职位描述
1. 负责公司各游戏产品的web页面输出及优化;
2. 能快速处理主流浏览器的兼容性问题(FF/IE6/IE7/
3. 使用Facebook/人人网/
负责公司各管理系统后台界面的输出和Javascript开发;
游戏WAP版方向
职位描述
1.负责游戏wap版的前端开发工作;
2.保证在各种不同的移动设备中有良好的可用性;
职位要求
1. 本科或以上学历,一年以上前端开发相关工作经验,
2. 精通各种Web前端技术,包括XHTML/XML/CSS/
3. 能熟练使用一门服务器端语言者优先考虑(如Java/PHP/
4. 有良好的沟通能力,善于和各种背景的人合作;
5. 理解Web标准,对可用性、可访问性等相关知识有实际的了解。
6. 关注前端技术发展方向,对HTML5和CSS3有所了解;
注:简历请附上作品链接,若有技术BLOG,
简历请投递:jobs[at]fminutes.com 或 kai.zhang[at]fminutes.com
加入我们,一起创造快乐!
上海五分钟是世界上成长最快、创造性最强的社交游戏公司之一。
DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.
DWZ富客户端框架设计目标是简单实用,快速开发。
欢迎大家提出建议,我们将在下一版本中进一步调整和完善功能.
DWZ富客户端框架是开源项目,可以免费获取源码。希望更多的开发人员使用,共同推进国内整体ajax开发水平。
在线演示地址 http://dwz.duqn.com
在线文档 http://dwz.duqn.com/doc/dwz-user-guide.pdf
视频教材 http://dwz.duqn.com/doc/dwz-user-guide.swf
Google Code下载: http://code.google.com/p/dwz/
DWZ QQ群 107983317
|
|
|||||||||||||||||
|
|
|||||||||||||||||
|
|
|||||||||||||||||
|
|||||||||||||||||