当前位置:首 页>> 百 宝 箱

用完美解码 Kmplayer 批量截图 微信扫一扫
分享给朋友

  完美解码20091225的版本。这个Google一下,应该有不少地方能下载。我一直用这个看片呢。
打开Kmplayer,视频窗里鼠标右键,选择捕获---》画面:高级捕获,或者直接Ctrl+G,如下图:
弹出下面的窗口,选择保存路径,文件名前缀,后面的位数表示文件名前缀之后跟的数字,会自动增加,当你开始批量截图的时候。图像格式可以选择位图,JPG,PNG。其他选项应该也不难看懂,自己折腾一下就知道了,捕获的爽的很,如果这样你还捕捉的不爽,只能自己打飞机了:-)
设置好了就开始播放片子吧,播放后,点击下面窗口里的开始......
见下图:

Google的用户体验 微信扫一扫
分享给朋友

  我们的愿景
  Google 用户体验团队致力于创建这样的设计:有用,快速,简单,有吸引力,创新,普适,盈利,漂亮,值得信赖和有人情味。使这十大准则达到和谐的平衡是一项持久的挑战。一个达到了这种平衡的产品就可以叫“Googley”,它会令全世界的用户感到满足和喜悦。
Googley 用户体验的十大准则
1. 以用户为中心——他们的生活,工作和梦想。
  Google 用户体验小组努力发现用户的真正需求,包括那些他们自己都无法阐明的需求。有了这些信息,Google 就可以创建解决现实问题并激发所有人创造力的产品。我们的目标不单单是简化按部就班的任务,而是改善人们的生活。
  总之,一个精心设计的 Google 产品在日常生活中是有用的。它并不努力依靠花哨的技术和视觉效果来打动用户,尽管它可能全都具备。它不会强制用户去使用他们不需要的特性,但是它会引导有 兴趣的用户自发地去使用它们。它不会入侵人们的生活,但是它会向那些想要探索世界的信息、想要更快更有创意地工作和想要向朋友或世界分享想法的用户敞开大 门。
2. 每一毫秒都有价值。
  没有什么比用户的时间更宝贵。幸好我们的精简的代码和精心挑选的图片文件让Google 的页面加载很快。最重要的功能和文本都放在了最容易找到的位置。不必要的点击、输入、步骤和其它操作都被去除了。Google 的产品只会请求一次信息并且包含了智能的默认选项。所有任务都是高效的。
  速度为用户带来便利,这是我们的竞争优势。如果没有充足的理由,Google 绝对不会牺牲速度。
3. 简单就是力量。
  简单造就了良好设计中的许多元素,包括易用性,速度,视觉效果和可访问性。一个产品从基本功能设计之初就应该保持简单。Google 不打算创建功能繁复的产品,我们最好的设计只包含那些用户完成目标过程中所必需的功能。理想情况下,即使产品需要大量的特性和复杂的视觉设计,也要看起来 简单而强大。
  在以牺牲简单为代价去追求一个不太重要的功能之前,Google 团队会三思而后行。我们希望将产品推向新的发展方向,而不仅仅是增加更多功能。
4. 引导新手,吸引专家。
  为多数人设计并不意味着为降低标准设计。最好的 Google 设计表面上看起来很简单,但是却包含了强大的功能,可以让需要的用户很容易地访问到。我们的目标是为新用户提供美妙的初始体验,同时也吸引那些经验丰富的 用户,他们的激情和专业知识将吸引其它的用户也来使用产品。
  一个精心设计的 Google 产品会让新用户很快熟悉,在必要的时候提供帮助,并且保证用户可以通过简单符合直觉的操作使用产品的大多数有价值的功能。逐步披露高级功能会鼓励用户去扩 展他们对产品的使用。在适当情况下,Google 会适时地提供一些智能功能来吸引那些资深网络用户——那些在多个设备和电脑之间共享数据的人,在线上和线下工作的人,以及需要存储空间的人。
5. 敢于创新。
  设计上的一致性是 Google 产品获得信任的基石,它令用户舒适并提高他们的工作效率。但是要想把设计从沉闷乏味变得令人愉快就要依靠想象力。
  Google 鼓励那些创新、冒险的设计,只要它们符合用户需求。我们的团队鼓励新的想法并发展它们。不是为了去适应现有的产品功能,Google 更着眼于改变整个游戏规则。
6. 为全世界设计。
  万维网已经向世界各地的人们开放了互联网上的所有资源。例如,很多用户通过移动设备来使用 Google 的产品,而不是坐在桌子前面通过电脑。我们设计出的产品应该在用户随意选择的任何一种媒介上都可以适时调整和使用。在可能的情况下,Google 会适时地支持较慢的连接速度和旧版的浏览器,而且 Google 会允许用户选择如何浏览信息(屏幕大小,字体大小)和如何输入信息(智能查询分析)。用户体验团队会研究世界上用户体验的根本差异,为每一个用户、每一个 设备和每一种文化设计出合适的产品。简单的翻译,或者功能上的“优雅降级”,都不足以满足人们的需要。
  Google 还致力于改善产品的可访问性。我们对简单和具有包容性产品的渴望,以及Google 让全世界的信息普遍可访问的使命,都要求我们的产品支持辅助技术,向包括有身体和认知缺陷在内的所有用户提供愉悦的体验。
7. 计划今天和明天的业务。
  那些盈利的 Google 产品竭力做到以有助于用户的方式赚钱。为了实现这一崇高目标,设计师将和产品团队一起确保商业计划能够和用户的目标无缝集成。他们会确保广告具有相关性、 有用并可以明确地识别出是广告。 Google 也会注意保护那些广告客户和其它靠 Google 谋生的人的利益。
  如果靠某个产品增加收入会减少 Google 未来的用户数量,那么 Google 绝对不会做这种尝试。如果一个有利可图的设计没有让用户满意,它就会被打回重做。不是每个产品都需要盈利,但是不能有产品对业务不利。
8. 愉悦用户的眼睛,但不分散注意力。
  如果人们看到一个 Google 的产品时说“哇,真漂亮!”,用户体验团队就可以欢呼了。一个积极的第一印象会让用户觉得舒服,使他们确信这个产品是可靠和专业的,并且会鼓励用户做出自己的产品。
  简约美学对于大部分的 Google 产品都是适用的,因为一个干净、清爽的设计加载迅速,而且不会分散用户的注意力。吸引人的图像、颜色和字体需要与速度、可扫描文本和简易导航取得平衡。尽 管如此,“简单优雅”并不是对所有产品来说都是最合适的。要考虑到用户和文化背景的因素。一个 Google 产品的视觉设计应该让用户感到满意并且有助于使用。
9. 值得信任。
  好的设计可以深深赢得使用 Google 产品的人们的信任。Google 的可靠性的建立是从基础就开始的,例如,界面确保高效和专业、动作容易撤销、广告被明确识别、术语的一致性以及令用户惊喜而非惊诧。此外,Google 的产品是向全世界开放的,它包含指向竞争对手的链接并且鼓励用户做出贡献,如社区地图或者 iGoogle 小工具。
  一个更大的挑战是确保 Google 对用户控制自己数据的权利表示了尊重。在如何使用信息和信息如何共享给他人(如果有的话)方面,Google 是透明的,所以用户可以做出知情的选择。我们的产品在有危险的时候会警告用户,比如不安全的链接,使用户容易受到垃圾邮件骚扰的行为,或者将数据分享在 Google 之外的其它地方而被存储的可能性。Google 越大,遵循我们“不作恶”的座右铭就越重要。
10. 有人情味。
  Google 包括了各种各样的人格特质,而我们的设计也是有人性的。文本和设计元素都是友好、机灵并且智能的,而不是枯燥、古板或傲慢的。Google 的文本直接和用户对话,并提供实际、非正式的协助,就像任何一个人回答邻居所提出的问题一样。而且 Google 不会让有趣或个性干扰到设计的其它元素,尤其是当人们被生活或找到重要信息的能力严重困扰的时候。
  Google 并非全知,而且没有设计是完美的。我们的产品希望得到反馈,Google 会根据这些反馈采取行动。当实践这些设计准则的时候,Google 用户体验团队会在每个产品的可用时间里寻找最佳的平衡。然后,迭代、创新和改善会循环往复。

仔细的研究了一下CSS的Image Sprites 微信扫一扫
分享给朋友

  sprite:鬼怪,小妖精,调皮鬼,(童话中的)小仙子,小精灵。这是词霸给的解释,不能是雪碧哦,呵呵。CSS的这个Image Sprites,暂且翻译成图片精灵吧。实际说的是一个图片集合,因为网页里的图片如果太多,加载的时间会很长,对服务器来说,一个下载就是一个请求,如果把一些相关的图片,很小,都放在一个大图片里,这样只需要下载着一个大图片就行了,然后用CSS的Image Sprites来控制什么时候显示大图片中的某一小块图片。这样可以节约带宽,减轻服务器负担。
  具体使用中,一般来说是导航菜单里使用翻转背景图片用的,做出一些动作的特效来(当然你用在其他地方也一样没问题)。比如一个导航的链接,鼠标没有移动上去显示的是一个图片,当鼠标移动上去之后显示另外一个图片,当导航里的链接项目比较多的时候,CSS的Image Sprites优势就体现出来了。
  先来看看要用到的css语句:background:url(img_navsprites.gif) 43px 0px;这是简洁型定义方法,完整的写法是这样的:background:#FFFFFF url(*.*) no-repeat scroll left top;用在Image Sprites上的话,无非是给一个块指定一个背景图片,背景色的参数就可以不要了,背景图片是否重复就看你实际需要了,但是咱们这里要用的背景图片只是一个大图片中的一部分,所以需要用left和top这两个参数来定位具体要用的那一部分图片。实质上是把块要用的图片背景部分显示出来,不用的就隐藏了,而块的宽高咱们已经定义了。看下面的代码:

.img_next{width:43px;height:44px;background:url(img_navsprites.gif) 43px 0px;}


  img_navsprites.gif这个图片里包含了3个小图标,如上图所示,每个小图标之间使用一个像素宽的竖线隔开,从左至右,三个小图标实际的宽度是46px/43px/43px,上面css代码里.img_home这个class定义了块的宽度width:43px;和高度height:44px;,那块能显示的背景图片的宽度和高度也是这么多。再来看最后一句background:url(img_navsprites.gif) 43px 0px;,指定的背景图片是img_navsprites.gif,背景是自动重复的,因为这种简洁写法里,如果没有出现的参数,就是用默认值,是否重复的参数如果没有定义,默认是自动重复背景的。最后的两个像素值就是默认参数的left top的值,在这里咱们理解成背景图像的左右和上下移动。这个43px表示图片img_navsprites.gif向右移动43个像素,因为会自动重复,所以移动的结果就是背景图片里会显示向右的箭头这个图标(也就是原图中最右边的那个图标)。当然,这个43px,你还可以给成-91px,这表示图片img_navsprites.gif向左移动91个像素,最终显示的还是向右的箭头这个图标。你可能会问为何是43px和91px,呵呵,那就麻烦你用Photoshop打开img_navsprites.gif这个图片,标尺的显示单位设置成像素,把图片放大,看看横向,从图片左上角开始,向右91px的位置在哪里;从图片右上角开始,向左43px的位置在哪里。其实这两个位置是同一个位置。也就说明css定义里,43px和-91px的效果是一样的。再说说最后的这个0px,前面说了是表示背景图片的上下移动,0px那就是不用上下移动了,如果你想让它上下移动也行,移动多少呢?呵呵,44px的倍数即可,正负都行,你可以自己测试一下,最后left top的值,用43px 0px和43px 44px,或者是43px -44px,或者是43px 88px,效果是一样的。当然,用-91px 0px和43px 44px,和用-91px 0px和43px -44px,也都是一样的,组合方式就多了去了,罗嗦这么多其实就为了说明白最后的left top这两个值是怎么工作的。left的值,正值表示向右,负值向左。top的值,负值向上,正值向下。从而得知,若咱们使用的大图片里,横向和纵向都有多个小图的时候,left和top这两个值还是都使用负值来的更直观一点。

  为了进一步说明一下,特意弄了个图,把下面例子中的包含两行三列图标的图放大了,纯为演示说明问题。看上图,图中红框就是下例css中.img_home所定义的块,蓝色框表示背景图完整的大小,以红框为基准,咱们幻想一下蓝色框周围是自动重复的多个背景图,块img_home的基准点就是红框左上角带X的地方,以X为基准点,依照块的宽度和高度,background定义里left和top的值都是0,表示蓝色框内的背景图原地不动,但.img_home:hover里定义了left和top的值是0px -45px,表示蓝色框内的背景图左右原地不动,向上移动45个像素,这时,图中B处的颜色稍暗的图标就移动到红色框里了,那img_home这个块的背景图片就变化了,当鼠标移动到img_home块上的时候就显示颜色稍暗一点的这个图标了。原理我理解的是这样的。当然,你也可以把A点的背景图移动下来,top的值给成正值即可,至于给多少,答案留给你自己。剩下的两个块显示的pre和next的图标原理是一样的,只是红框的宽度稍有变化而已。如果background定义里你给定背景不自动重复,加上no-repeat的话,那上图中蓝色框的周围就是空白了啥也没有,你只能使用负值来定义left和top的值了,仅此而已,自己可以试验一下。[因为img_navsprites_hover.gif是个透明的gif图片,所以上图背景是灰白相间的格子表示透明,无他意。]
  下面就弄个具体的实例吧,图片用的是img_navsprites_hover.gif,两行三列共六个图标,如下图所示。具体的css定义看代码。点击运行代码按钮查看,代码框里的内容可以修改,修改之后再次点击运行代码按钮查看修改结果。




DIV+CSS 学习心得<9>:Position和Float 微信扫一扫
分享给朋友

  Position的意思比较多,我理解成定位,就是用于给块来安排位置用的,一个块怎么放,放哪里,什么方式,当块内的内容超出了块定义的宽和高后怎么个表现方式(是覆盖其他块,还是被其他块覆盖)等,都是可以定义的。定位用的属性有四个:top, bottom, left, right,就是上下左右了,但必须是先定义了定位的方式,这四个属性才会起作用,否则无效。属性具体的效果也根据定位方式的不同而有差别。
  Position的方式:Static/Fixed/Relative/Absolute,按照字面意思翻译就是静态/固定/相对/绝对,我是这么翻译的。下面就一个一个唠叨一下。
  Static:HTML的元素,缺省情况下都是这个定位方式, A static positioned element is always positioned according to the normal flow of the page.这句英文我确实不知道怎么翻译才好,尤其是最后的页面的标准流这个概念,我理解是页面的逐行方式,页面的自然位置安排。由此可知,默认情况下,定位的方式是static,所以上面说的的四个属性top, bottom, left, right是没有的,即便是你定义了值也是和没定义一样。暂且咱就把这种状态称作一个块的原始状态。
  Fixed:这个固定,是相对于浏览器窗口而言的,如果一个块被position:fixed,那这个块的位置的宽高的起点是浏览器显示网页内容区域的左上角,具体显示的位置是你定义的top, bottom, left, right的值。同时,这个块是不会随着浏览器的滚动条滚动发生位置变化的,说白了,这块就已经被钉死在那里了。所以这个fixed方式一般是用作页面上浮动面板,导航等等需要固定位置显示的内容用的。
  Relative:相对定位,这里的相对,是说的相对与这个元素本身在Static方式时的位置,就是上面说的原始状态,下看下图:

  图中有9个块,假如都是按照static状态排列的(实际可能不可能,只是为了说明问题),用中间的编号为5的块来举例,现在把5这个块的position:relative;top:100px;left:100px之后,块的位置会发生变化,变化见上图,其中的top和left的起点是该块原始位置的左上角标注X的地方,位置变化后,块的左上角同样我标注了一个X,这样就好理解位置是如何发生变化的了。既然位置发生变化了,是要和其他块发生位置重叠的,图中的块5和块6、8、9产生了位置重叠,这样就有个块内容谁覆盖谁的问题,也就是哪个块显示在上,哪个在下。假如9个块是按照编号依次放置,那后放置的会覆盖前面块的内容,这个我在图中没有表示出来,按照前面说的都是按照static状态排列的话,块5位置变化后,和块6、8、9重叠的部分,应该是被块6、8、9的内容覆盖的,这个实验留给你自己去体会吧。当然,你要是不想让块6、8、9的内容覆盖块5的内容,可以给块5指定一个大于块6、8、9的z-index的值,这个z-index的值用于控制各个块在垂直于屏幕的方向上的显示顺序,类似于Photoshop里层的概念,就是哪个块在上面,哪个块在下面。如果都没有指定,那就按照块的自然顺序,越靠后的块会覆盖前面的块。
  Absolute:绝对定位,这里说的绝对是说对于一个块的父级元素、父级块而言的,如果没有父级元素、父级块,那默认的父级块是<html>,同时父级元素、父级块必须是除static之外的position定位方式,也就是父级块、父级元素需要有position为Fixed/Relative/Absolute的定位方式才有效。如果一个合适的父级都没找到,那父级块就又成了<html>了。用下面我写的代码测试一下吧,先直接点击运行代码按钮查看效果,修改了值以后再次点击运行代码按钮看看修改后的效果:




  最后说一下Float,说白了就是一个HTML元素的左对齐和右对齐的问题,跟在这个元素之后的内容将会环绕包围着它,之前的元素不受影响,Float一般应用于图片,当然,也可以用在其他元素,或者用于块。所以,float是水平方向的移动,上下是不行的。至于一个块或者元素能向左和向右float的程度,是依据它的父级元素、块给留下的空间有多大。如果有多个元素或块是float的,且这多个元素和块都在同一个父级元素或块中,它们会一个挨一个的排成一排,顺序吗当然就是元素或块出现的先后顺序。
  上面也说了,一个float的元素或块之后的元素或块是环绕它周围的,如果之后的元素或块你需要从新开始一行,那就需要在从新开始一行的元素或块的css定义clear一下,clear:both;就这句了,both表示左右都不环绕了,也可以单独clear left或者clear right。具体的例子我就不说了,自己动手实验一下吧。
  到这里,俺个人的DIV+CSS之旅心得算是讲的差不多了,以后就是零零星星一些具体细节上使用的东西了,活到老学到老吗,整个这九回的心得,也花了我不少时间和精力,当然,我知道这对我自己是有好处的,等过段日子,再回过头来看看那自己写的东西,估计还会有新发现,到时候会补充进来。如果哪里说的不对,或者有问题,还请高手高抬贵手留言指出,俺万分感谢。如果也有初学的,大家可以多交流,至于怎么找到我,博客最下面关于我&博客的页面里有联系方式,欢迎骚扰^_^
[Edit on 2011-2-12 0:40:55 By 笑傲江湖]

DIV+CSS 学习心得<8>:分组,嵌套,伪类,伪元素 微信扫一扫
分享给朋友

  这次说的东东,基本是CSS样式里写法的一些细节和技巧问题了,因为我也只初学,也不一定说的就全是对的,具体问题具体对待,您还得自己研究之后消化了才行。
  样式相同的定义是可以分组的,下面例子中,两种写法效果是一模一样的,使用分组的方法可以简化css代码,只需要将不同的样式定义名称(官方叫selector选择器)用逗号(英文状态下的逗号)隔开。

h1{
color:green;
}
h2{
color:green;
}
p{
color:green;
}


h1,h2,p{
color:green;
}

  当然,分组也有不好的地方,如果你后来只想修改其中的一个,那不是麻烦了,所以还是看实际应用情况,这里只是告诉你有这么一种可以分组的写法。
  然后是样式定义的嵌套,英文说法是Nesting Selectors,我英文不是很好,不知道这个Nesting(nest是巢的意思)在这里该翻译成什么好,所以我理解就是嵌套吧,或者叫级联?。官方解释是可以给一个选择器(比如A)内的选择器(B)定义样式,这样的话,在A作用的元素中如果出现了B所定义的元素,那这个元素就只使用B定义的样式,看例子,说的有些拗口,容易绕晕:

p{
color:blue;
text-align:center;
}
.marked{
background-color:blue;
}
.marked p{
color:white;
}

  上面的css样式定义,第一个定义了所有p这个元素的样式为文字颜色蓝色,文字居中显示,marked这个class定义了元素的背景色是蓝色,.marked p则表示:如果p元素的父级元素的样式如果是.marked,那么这个p元素内的文字颜色就是白色,会脱离第一个p的样式定义。这第三个.marked p的写法就是Nesting Selectors,自己有时间在DW里写好可以测试一下具体是怎么玩的。
  Pseudo-classes,直译就是伪类,我也没搞明白这个伪到底是啥意思。假的?冒充的?忽悠用的?What ever!下面是伪类的语法:

selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}

下面是咱能用的伪类的列表:

Pseudo name    Description
:active        Adds a style to an element that is activated 
:first-child        Adds a style to an element that is the first child of another element
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang        Adds a style to an element with a specific lang attribute
:link            Adds a style to an unvisited link
:visited        Adds a style to a visited link

  咱们用的最多的伪类估计就是给链接定义四个不同状态样式的时候了,其他的用的不多。你可以给其他HTML元素,比如DIV,定义一个:hover的样式试试看,很给力哦。
  Pseudo-elements,直译就是伪元素,同上,不是很明白。下面是伪元素的语法:

selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}

下面是咱能用的伪元素的列表:

Pseudo name    Description
:after        Adds content after an element
:before        Adds content before an element
:first-letter    Adds a style to the first character of a text
:first-line        Adds a style to the first line of a text

  其中first-line只能作用于block级别的元素,能用的属性property有:

font properties
color properties 
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

  其中first-letter也只能作用于block级别的元素,能用的属性property有:

font properties
color properties 
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

  :after和:before的写法如下,具体有啥效果,烦请自己准备好图片在DW里实验。

h1:before{
content:url(smiley.gif);
}

h1:after{
content:url(smiley.gif);
}

  这回就说到这里了,还是那句老话,我说的你不一定能看懂,还得靠你自己Google去研究,如果我理解错了,还麻烦您给指点一下,别让俺一错再错哦。
[Edit on 2011-2-11 0:06:21 By 笑傲江湖]

人到穷途应一笑,几凡失意仍能傲。成败何须问江湖,我心依旧任逍遥。
这一生只想好好做个平凡的人,有个家有个梦,陪我迎接每一个早晨。
这一生只想好好做个平凡的人,何必争何必问,只有快乐开心才是真。