2011年9月3日

如何快速启动chrome插件

    最近开发了一段时间的chrome app,今将一些体会感想分享给大家(不是App开发基础教程)。

    chrome开放了丰富的API,涵盖了浏览器的方方面面,其应用可以说“只有想不到,没有做不到”。然而,酒香也怕巷子深,单纯依赖chrome工具栏上的简单入口(Browser Actions, Page Actions)难以引起用户注意,如何让一个功能强大的扩展被用户很方便的使用起来,困扰了我很长时间。

    经过一段时间的探索,总结了几种app入口方式 ,下面以webElements logowebElements (网页元素查看器,提取页面图片、正文,尤其适合论坛看图,轻松阅读文章) 为例,一一介绍。

    入口一:工具栏 Browser Actions 和 Page Actions

    这种方式是chrome应用开发文档中默认提供的入口,不过多介绍。

 

 

    优点:简单容易上手,不需要额外开发。

    缺点:通常展现在工具栏右上角,并且需要鼠标点击触发,无形中加大了用户的使用成本。并且很多应用图标摆放在一起,没有亮点,难以调动用户频繁使用

    难易程度:容易

    入口二:快捷键

    这个也比较容易理解,利用应用向页面注入JS脚本,监控页面按键(不记录任何按键信息),捕获到快捷键时直接启动应用。需要有选项页设置是否启用快捷键,以及快捷键设置等内容。

 

webElements Options

 

    优点:方便键盘操作,一键启动应用,不需要鼠标长距离移动点击,摆脱对鼠标的依赖

    缺点:快捷键定义容易与其他软件冲突;该方式比较隐蔽,不容易让用户知道;需要额外开发。

    难以程度:适中

    入口三:鼠标手势

    国内浏览器培养出了一大批鼠标手势的忠实粉丝,基于这个现状,就有了利用鼠标手势启动扩展应用的思路。chrome本身不带鼠标手势功能,应用商店也涌现出了一大批鼠标手势的扩展应用。拜于chrome扩展间可以相互通信的机制,使用鼠标手势启动扩展便有了理论条件支持。现webElements logowebElements已实现通过Chrome Mouse Gesture logoChrome Mouse Gesture 这款鼠标手势扩展直接调用,我个人最喜欢这种方式。

 

webElements Mouse Gesture

 

    优点:鼠标手势粉丝众多,无需长距离移动鼠标,增加趣味性

    缺点:需要另外安装鼠标手势扩展或将鼠标手势整合到应用中

    难易程度:难

    入口四:页面小助手

    所谓“小助手”是指在页面上展现一些内容,提醒一些信息,来引起用户注意。此方式较前三种入口,可谓最直接的方式。

    该方式要点:

        1、不易过分干扰用户浏览行为;

        2、抓住用户最感兴趣的内容提醒;

        3、突出品牌。

 

webElements Helper

 

    优点:使用户快速感知所关心的内容(快捷键和鼠标手势都无法做到);使应用品牌直面用户,加深品牌印象

    缺点:开发中需要注意页面兼容性

    难易程度:适中

   

    个人观点,难免疏漏,欢迎拍砖!赐教!

-------------------------------------------------- 无敌分隔线 ------------------------------------------------------

    贴几张 webElements logowebElements 截图,欢迎围观

 

webElements img

提取页面图片分类查看

 

webElements slide

启用幻灯片模式浏览图片

 

webElements text

抽取正文

posted @ 2011-09-03 13:18 eoiioe 阅读(1760) 评论(1) 编辑

2011年8月1日

深入解析IE兼容模式

英文原文:http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx

文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。


前言

为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式,文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。
新的IE为了确保网页在未来的版本中都有一支的外观,IE8引入了文件兼容性。当你引入一个增设的兼容性模式,
此文章说明文件兼容性的必要性,列出现有版本IE能使用的文件兼容性模式并示范如何选择特定的兼容性模式。


了解文件兼容性的必要性

每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色,其中一个风险就是旧版本网站无法正确的显示。

为了将这个风险降到最低,IE6允许网页开发人员选择IE编译和显示他们网页的方式。"Quirks mode"为预设,这会使页面以旧版本浏览器的视点显示,"Standards mode"(也称为"strict mode")特点是支持业界标准最为完善。然而要利用这个增强的支持功能,网页必须包含恰当的<!DOCTYPE>指令。

若一个网页没有包含<!DOCTYPE>指令,IE6会将它以quirks mode显示。若网页包含有效的<!DOCTYPE>指令但浏览器无法辨识,IE6会将它以IE6 standards mode显示。因为少数网站已经包含<!DOCTYPE>指令,兼容性模式的切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。

随著时间经过,更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说,IE6不支持universal selector(即css之全局选择器 * {}),一些网站便使用它来针对IE做特定的对应。

当 IE7增加了对全域选择器的支持,那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的特定对应无法应用于IE7,造成这些网站便无法如他们预期的显示。由于<!DOCTYPE>只支持两种兼容性模式,受到影响的网站拥有者被迫更新他们的网站使其能支持IE7。

IE8 比之前的任何版本浏览器都更支持业界标准,因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮助减轻所有问题,IE8引入文件兼容性的概念,使你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加了一些新的模式,这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示,你可以更新你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器编译你的页面。

这能让你选择将你的网站更新支持IE8新特点的时机。


认识文件兼容性模式

IE8支持几种文件兼容性模式,它们具有不同的特性并影响内容显示的方式。

•Emulate IE8 mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode,Emulate IE8 mode重视<!DOCTYPE>指令。
•Emulate IE7 mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE7 Standards mode而quirks mode会显示成IE5 mode。不同于IE7 mode,Emulate IE7 mode重视<!DOCTYPE>指令。对于许多网页来说这是最推荐的兼容性模式。
•IE5 mode 编译内容如同IE7的quirks mode之显示状况,和IE5中显示的非常类似。
•IE7 mode编译内容如同IE7的standards mode之显示状况,无论网页是否含有<!DOCTYPE>指令。
•IE8 mode提供对业界标准的最高支持,包含 W3C Cascading Style Sheets Level 2.1 SpecificationW3C Selectors API,并有限的支持 W3C Cascading Style Sheets Level 3 Specification (Working Draft)
•Edge mode指示IE以目前可用的最高模式显示内容。当使用IE8时其等同于IE8 mode。若(假定)未来放出支持更高兼容性模式的IE,使用Edge mode的页面会使用该版本能支持的最高模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示。

由于edge mode使用该IE版本所能支持的最高模式来显示所浏览的网页内容,建议仅使用于测试页及其他非商用页面。


指定文件兼容性模式

要为你的网页指定文件模式,需要在你的网页中使用meta元素放入X-UA-Compatible http-equiv 标头。以下是指定为Emulate IE7 mode 兼容性之范例。

 

<html>
<head>
<!-- Mimic Internet Explorer -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>My Web Page</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html> 


其内容随著指定的页面模式而更改,当要模拟IE7时,指定IE=EmulateIE7,指定IE=5IE=7, 或IE=8来选择其中一种兼容性模式。你也可以指定IE=edge来指示IE8使用它支持的最高模式。

X-UA-compatible标头没有大小写之分。然而除了title元素及其他的meta元素之外,它必须出现在网页header节其它元素之前的位置,


设定网站服务器以指定预设兼容性模式

网站管理员可籍着为网站定义一个自订标头来为他们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。举例来说,下列的 web.config文件使Microsoft Internet Information Services (IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。

 

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration> 


若你已于网站服务器指定了一个预设的文件兼容性模式,你可以在个别页面上指定不同的文件兼容性模式来盖过它。在网页中指定的模式优先权高于服务器中所指定的模式。

请查阅你的网站服务器关于指定自订标头的资讯,或看更多资料:

Implementing the META Switch on Apache
Implementing the META Switch on IIS


判定文件兼容性模式

要判定网页使用IE8浏览时的文件兼容性模式,使用document object(文档对象)的documentMode功能。例如在IE8的网址列输入下列程式码会显示目前页面的文件模式。

javascript:alert(document.documentMode);

 

documentMode功能会回传一个数值对应目前页面的文件兼容性模式,举例来说,若网页指定为支持IE8模式,documentMode便会回传值"8"。

在IE6引入的compatMode功能不支持在IE8引入的documentMode功能。目前使用compatMode建立的应用程式还能在IE8中作用,但它们必须更新为使用documentMode。

若你希望使用JavaScript判定一个文件的兼容性模式,引入下面范例的这段程式码可支持旧版本的IE。

 

engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
// This is an IE browser. What mode is the engine in?
   if (document.documentMode) // IE8
      engine = document.documentMode;
else // IE 5-7
   {
engine 
= 5// Assume quirks mode unless proven otherwise
      if (document.compatMode)
{
if (document.compatMode == "CSS1Compat")
engine 
= 7// standards mode
      }
}
// the engine variable now contains the document compatibility mode.
}

 

 

认识内容属性值

内容属性值在接收到异于先前叙述的数值时是具有弹性的。这能使你对于IE如何显示你的网页更有操控性。举例来说,你可以设定内容属性值为IE=7.5。当你这样做的时候,IE尝试将这个值转换为version vector并选择最接近的结果。在这个例子中,IE会将其设定为IE7 mode。下面的范例显示该模式设定为其他值的状况。

 

<meta http-equiv="X-UA-Compatible" content="IE=4">   <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a">   <!-- IE5 mode --> 

<!-- This header mimics Internet Explorer and uses 
<!DOCTYPE> to determine how to display the Web page 
-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">  

注意: 前面的范例显示单独的内容值。实际上IE只会执行网页中第一个X-UA-Compatible标头。

你也可以使用内容属性来指定复数的文件兼容性模式,这能帮助确保你的网页在未来的浏览器版本都能一致的显示。欲设定复数的文件模式,请设定内容属性以判别你想使用的模式。使用分号来分开各个模式。

如果一个特定版本的IE支持所要求的兼容性模式多于一种,将採用列于标头内容属性中最高的可用模式。你可以使用这个特性来排除特定的兼容性模式,虽然并不推荐这样做。举例来说,下列标头即会排除IE7 mode。

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />

 

 

结论

兼容性对于网页设计师来说是非常重要的顾虑。虽然最好是可以建立一个完全不需依赖任何网页浏览器特性或功能的网站,有时候这是不可能实现的。文件兼容性模式便能将网页限制在某个特定版本的IE中。

使用X-UA-Compatible标头来指定你的页面支持的IE版本。使用document.documentMode判定页面的兼容性模式。

选择支持某个特定版本的IE,你可以确保你的页面在未来的浏览器版本中也能有显示的一致

 

转自 : 

http://www.cnblogs.com/qqflying/archive/2010/11/29/1891330.html

 

 

 

posted @ 2011-08-01 09:44 eoiioe 阅读(837) 评论(0) 编辑

2011年7月29日

JS高级拖动技术--- setCapture ,releaseCapture

<script type="text/javascript">
<!--
window.onload=function(){
  objDiv = document.getElementById('drag');
  drag(objDiv);
};

function drag(dv){
  dv.onmousedown=function(e){
      var d=document;
      e = e || window.event;
      
      var x= e.layerX || e.offsetX;
      var y= e.layerY || e.offsetY;
      
      //设置捕获范围
      if(dv.setCapture){
          dv.setCapture();
      }else if(window.captureEvents){
          window.captureEvents(Event.MOUSEMOVE Event.MOUSEUP);
      }
     

      d.onmousemove=function(e){
           e= e || window.event;
           if(!e.pageX)e.pageX=e.clientX;
           if(!e.pageY)e.pageY=e.clientY;
           var tx=e.pageX-x;
           var ty=e.pageY-y;
           
           dv.style.left=tx;
           dv.style.top=ty;
      };

      d.onmouseup=function(){
           //取消捕获范围
           if(dv.releaseCapture){
              dv.releaseCapture();
           }else if(window.captureEvents){
              window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
           }
           
          //清除事件
          d.onmousemove=null;
          d.onmouseup=null;
      };
   };
}
//-->
</script>

<div id="drag" style="position:absolute;left:12px;top:24px;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">drag me</div>




--------------------------------------
setCapture 的意思就是设置一个对象的方法被触发的范围,或者作用域。
如果不设置,则div只在当前窗口内被触发。如果设置,则在整个浏览器范围内被触发,也就是可以拖到浏览器外面

 


转自:

http://www.cnblogs.com/Godblessyou/archive/2008/05/14/1196746.html

 

posted @ 2011-07-29 15:23 eoiioe 阅读(280) 评论(2) 编辑

2011年5月14日

转:浅说泛函与函数变换

摘要: 这里转一篇09年月影的关于泛函及函数变换的文章,很好的学习资料,着实学习了一下Javascript语言的灵巧强大之处。 浅说泛函与函数变换JavaScript是函数第一型(first calss)的语言,JavaScript函数具有两重含义:它既能作为过程调用,又是一个对象。函数本身的可操作性带来了函数变换的设计思想。函数变换和泛函有关泛函的概念这里借用数学的概念,简单来说,泛函就是定义域是一个函数,而值域是一个函数,推广开来, 泛函就是从任意的向量空间到标量的映射。泛函也是一种“函数”,它的独立变量一般不是通常函数的“自变量”,而是通常函数本身。泛函是函数的函数。泛函的英文是 Functio阅读全文

posted @ 2011-05-14 07:19 eoiioe 阅读(259) 评论(1) 编辑

2011年2月13日

缓存DataURI资源的解决方案

    在Html5中,可以将图片经过base64编码后直接写在HTML中来展示图片,使用这种方式可以减少Http请求数量,从而可加快页面展示,同时也减少了很多对服务器的压力。

    例: <img src="data:image/png;base64,iVBORw0KGgooCAMAAAC7...(此处略去N个字)...lFTkSuQmCC"/> 

    但这种将图片直接嵌入html中的用法,也会带来一些问题,
    问题一:同样的图片无法重复使用,每使用一次都要重复输出一遍图片代码,增加了html自身大小;
    问题二:假设html页面不做缓存(通常动态页面都会这么做),那么页面中引用的图片资源就无法缓存在浏览器中,相当于每次请求都会重新加载一遍图片。 

    由于存在着以上两个问题,就需要综合考虑是否值得使用DataURI的形式加载图片了。

    这里也说明一下,使用CSS Sprites同样也能减少图片产生的大量http请求。由于CSS Sprites必须将图片用做背景,就会导致以下缺点,
    一来:修改图片很不方便;
    二来:经常会在html代码中包含很多空标签(只为给background提供一个展示的空间);
    三来:会丧失许多图片自身的特性。 

    所以如果不能使用CSS Sprites,又要解决DataURI的问题,该怎么办呢?

    解决方案也很简单,
    第一步:建一个img.js文件,将DataURI的数据放到一个变量里,设置一下这个img.js文件的缓存时间(这段时间浏览器不会重复加载这个文件);
    第二步:将多个图片逐个转成base64编码,全部放到img.js文件中;
    第三步:在html文件中动态创建img标签,将前面变量里的DataURI数据赋给img的src(变量是固定的可以重复使用) 

    经过以上三步就可以达到和CSS Sprites一样的效果了(只用一个http请求即可下载多个图片,同时也可以设置图片缓存时间),但我们可以让每个图片按照图片的模式工作,从而摆脱了background的束缚。

    DataURI浏览器支持情况:
    Firefox 2+
    Opera 7.2+ - data URI必须少于4100个字符
    Chrome (all versions)
    Safari (all versions)
    Internet Explorer 8+ - data URI必须小于32k

    附上图片转base64的php代码,仅供参考!

    <?php
    $file = realpath($_GET['img']);
    $pathParts = pathinfo($file);
    $extName = $pathParts['extension'];
    if($fp = fopen($file,"rb", 0))
    {
      $picture = fread($fp,filesize($file));
      fclose($fp);
      $img = '<img src="data:image/' . $extName . ';base64,' . base64_encode($picture) . '"/>';
      file_put_contents("tmp/{$pathParts['basename']}.txt", $img);
    }
  ?>

    演示:os.heimali.com(DataURI演示仅支持Webkit内核)

 

转自:http://yu.heimali.com/dataURI-cache.html

 

posted @ 2011-02-13 12:28 eoiioe 阅读(1373) 评论(0) 编辑

2010年9月30日

体验一下小巧清爽的WebOS

摘要: WebOS是一种运行在网页上的简单伪操作系统,其优势在于易于集成应用,免安装,配置完全存储在网络上,在任何地方都能轻松获取。 近日,黒玛丽WebOS和大家见面了,其完全由Javascript编写。初始页面加载只有不到28KB,其小巧程度完全可满足网络不佳地区的使用。 默认内置应用有 计算器,日历,八音盒,账本,晒TV。虽然应用不是很多,但其工作模式已十分明了,应用也会随着日后开发逐渐完善。 黒玛...阅读全文

posted @ 2010-09-30 08:55 eoiioe 阅读(2766) 评论(20) 编辑

2010年9月12日

Google巴克球Logo源码公布

摘要: 还记得上周Google为纪念巴克球25周年公布的神奇Logo吗? 没错,Logo的实现就像巴克球一样完美。为了减小页面体积,Google对其实现代码做了压缩处理,这对于众多前端爱好者来说,的确是件糟糕透顶的事。 经过一翻努力,本人对Google的巴克球源码进行了重写,现已发布在黒玛丽网站。为了方便理解和调试,写入大量注释的同时还加入了调试窗口和控制台窗口,可以方便随时观察当前执行的动作及变量状态。...阅读全文

posted @ 2010-09-12 12:48 eoiioe 阅读(3162) 评论(14) 编辑

2010年8月8日

你还要与僵尸共舞吗?

摘要: 微软在2010年3月1日宣布结束对IE6的主流支持,世界各地的IE6粉丝们在美国科罗拉多州为IE6举办了葬礼,这个发布已经8年有余的老大爷浏览器终于安详地走下舞台了。 在中国大陆,这个已经过世的僵尸依然遍布在大街小巷,大家却能够不以为然 (僵尸都替你冏了)。My god,不会是最近“植物大战僵尸”太过流行的缘故吧!IE6 像僵尸一样,散发着恶臭截至2010年7月国内IE6...阅读全文

posted @ 2010-08-08 12:01 eoiioe 阅读(2908) 评论(54) 编辑

2010年8月7日

web 3D 即将到来

摘要: 最近apple官网的html5演示中增加了3D效果的相册,这代表着safari5 成为了第一个用css3实现3D效果的浏览器,由此可见web3D时代已指日可待。CSS3 3D Gallery  本文主要介绍 safari5(截至2010-08-07所有其他webkit内核浏览器均还不能支持3D效果) 中实现3D效果的CSS3样式  1、-webkit-perspective (3D透视属性)   ...阅读全文

posted @ 2010-08-07 13:54 eoiioe 阅读(3147) 评论(27) 编辑

2010年8月1日

WebRebuild-重构人生 北京站 2010.07.17

摘要: 到场嘉宾及PPT《dataontheweb》KlausBirkenbihl(W3C)《建立团队前端开发环境》蒋定宇(D-Link台湾)《HTML5,CSS3》谢子斌(Opera)《网页性能优化之路》范俊豪(腾讯)《关于前端架构,我说的其实是...》张克军(豆瓣)大会简述 来自德国的KlausBirkenbihl(中文名:岳林)(http://www.w3.org/People/Klaus/)老大爷...阅读全文

posted @ 2010-08-01 09:16 eoiioe 阅读(249) 评论(2) 编辑

导航

搜索

 

常用链接

我的标签

随笔分类

@_@

最新评论

阅读排行榜

评论排行榜

推荐排行榜