2 条评论弹出窗口[浮层]与切换页面的对比总结

2010年7月28日

看到这个标题很感兴趣，之前看过一个关于Tab效果的 这是交互设计的基础

转来分享给大家

作者：丽君 来源腾讯ISD

分享较早前的一个小总结，关于在选择弹出窗口还是选择切换页面来承载信息时，可用用来判断的几个角度，合适初学者来读。

1.弹出窗口与切换页面的区别

1） 操作的连贯性 弹出窗口的速度会比打开一个页面的速度要快，响应更及时一些，点击后可以比较快的得到操作的反馈，而切换页面则经常会让用户等待一段时间。

实例一：个人中心中，查看好友照片的操作：

之前查看照片的操作页面会跳转到该好友的空间“相册”页面，而现在则更改进为弹出窗口，能够很快看到照片的放大图，关掉窗口后，又可以继续浏览其他好友的信息了。

阅读全文…

分类: 交互设计 标签: , ,

1 条评论太NB了：Google Docs Ctrl + C 技术浅析

2010年7月27日

从玉伯那里转来的，Goole非常NB
用 google docs 打开 pdf 文件，选中文本：

表面上没有任何有趣的地方。但仔细一看，会发现选区的颜色是浅蓝色，而不是默认蓝。第一直觉是是有什么特殊的 CSS 属性，立马 firebug:

不看不知道，一看真蹊跷。selection-highlight 是选区，选区下面是一张图片 page-image!
于是立刻发现一个非常牛逼的特性：Ctrl + C 可以复制图片中的文字！

google 太强悍了，好在前端代码都是开源的，下面简单分析下。

首先数据在哪呢，这个比较容易找到，在 firebug 里有一个请求返回的数据如下：

<?xml version="1.0" encoding="UTF-8"?>

<pdf2xml>
<meta name="Creator" content="Adobe Acrobat 8.1 Combine Files"/>
<meta name="Producer" content="Adobe Acrobat 8.1"/>
<meta name="CreationDate" content="20100316080708-04'00'"/>
<page t="0" l="0" w="612" h="773">
 <text l="188" t="754" w="237" h="11" p="188,24,214,15,232,37,271,
7,280,39,322,7,330,11,344,24,370,23,395,20,418,7">
Please post comments or corrections to the Author Online forum at</text>
...

有了这份数据，就可以根据选区得到对应的文本。

接下来的问题是，如何将文本放到剪贴板里？第一反应是用 flash 实现，但感觉 google 不会这么做。禁用掉 flash 插件后，功能正常，这说明是用 js 实现的。

通过 Profile 工具 + Fiddler + 肉眼识别 + 运气，终于定位到了关键代码：

n.am = function(a) {
    if (! (!this.k.Ca && Mr(this, a))) {
        ac && this.lf.focus();
        this.lf.select();
        Nr(this, a)
    }
};

只要注释掉上面的代码，Ctrl + C 复制功能就无效。focus 和 select 为我们提供了进一步线索，在 HTML 里，发现了秘密：

到此真相大白：当用户按下 Ctrl + C 时，js 会注入事件，首先根据坐标从数据里取出对应文本，然后将文本赋值给 textarea, 并将其激活和选中。这样，就和用户选中 textarea 的内容，再按下 Ctrl + C 的效果是一样了。

强悍的 google, 技术创新无处不在！

注意：利用 textarea 只能复制纯文本，如果想复制富文本，可以借鉴 google docs 编辑 Word 文档时的处理方式：采用 iframe 充当临时容器，有兴趣的可以进一步研究。

简单演示：goog-docs-copy-demo.html

发现这个秘密后，最近在疯狂搞编辑的牛人承玉（欢迎搞编辑器的其他牛人加盟）立刻想到了各大站长们非常喜爱的功能：附带警告信息的禁止copy. 据说，能成功复制的，都不是“人”。

我的尝试是：点击按钮，复制指定文本到 Clipboard 里。应用场景是点击按钮复制证件号码等。尝试代码大家可以看上面 demo 页面源码中的注释。事件可以正常模拟并分发出去，但复制操作惨兮兮地失败了。感觉原因在于浏览器安全限制，对于触发的异步 Ctrl + C, 浏览器会限制其功能。

Google 的产品里有很多秘密，真诱人，创意无限！

分类: JavaScript脚本, 前端开发 标签: , , ,

1 条评论如何做得Banner通情达意

2010年7月27日

看到网易这篇文章就像看到前几天腾讯CDC的那篇专题banner设计一样激动，无论哪个网站对于banner的设计都格外重要

写在前面的话

有人觉得做个banner放2张图，排几个字的事，一点技术含量都没有，像其他门户banner基本上都是编辑们自己做的。我觉得这么说是不对的，其实一个banner可以研究的东西还是很多的，而且做一个banner是不难，难得是在短时间内做一个出彩的banner。门户的专题一般是编辑套模板拼成的，比较重要的专题，banner部分是由设计师来完成，一个banner的品质上去了，整个专题的质量感就上来了，所以这部分交给设计师来做也是重视品质的表现，这个毋庸置疑。但banner毕竟不比大型项目，从设计成本上说不可能给太多的时间给设计师，于是乎，设计师有时候是靠经验积累，有时候妙手偶得，质量也是时好时坏，更害怕的是当没有经验没头绪没有心情时，胸中无物，不知道如何下手，于是越急越乱，越乱越急，最后匆匆了事，这种状态下估计也出不了好的东西。在排除技术手段的前提下，如何通过一些经验的思考，让banner达到通情达意效果，也是我下面要说的，个人经验之谈，供大家参考。
阅读全文…

分类: 视觉设计 标签: , ,

没有评论WIN7安装VS2008出错怎么办（安装Web创作组件时发生了异常）

2010年7月25日

今天给系统换了WIN7 安了一个集成版本的Office2007导致安装VS2008时候出现了问题

网上搜索了解决方法：

安装VS Web创作组件时发生了异常，致使其它的组件也不能安装。怎么办呢？

可以按照如下操作进行解决：

首先，确定安装之前把其他的软件都退出；

然后，在安装DVD的\WCU\WebDesignerCore文件夹中找到了“Visual Studio Web 创作组件”的安装程序，将其复制到硬盘上并解压缩，例如加压至A文件夹，然后点击SETUP。

如果出错就找到OFFICE2007安装包，解压，找到里面的office.zh-cn，直接将整个文件夹COPY至A文件夹中，此组件就能正常安装了。

如果没有报错，则重新安装VS2008即可。

有人用了其他方法据说也成功了，但是相对来说这个方法比较简单。

分类: C# 标签: ,

1 条评论Webrebuild 2010分享

2010年7月20日

真的很荣幸，这次参加了webrebuild的大会，也非常遗憾，上次没有参加

说真的，这次的收获非常大，几位嘉宾演讲的主题和内容，都让我受益颇多

感谢为这次会议奔波劳累的工作人员，你们辛苦了

嘉宾分享的内容（转自崔凯的博客）：

以上为几位嘉宾分享的PPT，一个小细节：克军的PPT经验是html+css+js做的……前端无敌！

具体的我还在吸收中……

希望以后能有更多的前端会议推动整个前端行业的发展

分类: 前端开发 标签: ,