伪类元素之美

通过使用:before和:after,你能创作出让人称奇的视觉效果。对页面中的每个元素,你都有两个额外的可以控制的元素,本来这些是需要额外的元素来实现。他们给设计带来了更多的趣味性的空间,而不是增加无语义的有负面影响的标签。这里给大家整理了一堆让人称奇的东西。让我们开始吧! Continue reading “伪类元素之美”

CSS减肥工具 — CSS Usage

前端构建工程师经常会遇到随着网站产品的规模扩大、产品数量、日常专题上下线等情况,造成网站的CSS慢慢变得臃肿从而影响了网站的用户体验,这种情况下,给网站CSS文件减肥类似于海底捞针的大工程,因为稍不留神,一个不经意的删除,就会造成线上的产品的事故。下面我们就给大家推荐一款CSS减肥的工具–Firefox插件 CSS Usage.

首先,我们需要安装Firefox(猛击此处下载),或者确定你已经安装的版本已经高于3.1;
第二步,安装前端开发人员最普及的开发工具 Firebug
第三步,安装CSS Usage 0.2.2(写此文时的版本);
第四步,在浏览器中打开我们要优化的页面(本地的页面也可以),点击右下角的firebug小图标,打开firebug工具窗口,我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。


首先我们来分析最上面的三个功能按钮的使用

Scan: 通过字面意思我们就能知道,这是一个扫描当前页面的工具,如果我们的站点只有一个页面或者几个页面,我们可以通过使用此功能按键来查看页面的css实用情况.

Clear: 清除扫描结果,但我们查看完网页,并对CSS 进行了修改后,我们就不需要以前的扫描结果了,那么我们就可以使用Clear功能键,清除以前的扫描结果缓存,重新开始我们的扫描.

AutoScan: 我们的网站可能会有很多的页面,更有可能有很多的弹出层,如果我们每次都点击扫描的话,会占用我们大量的时间,AutoScan功能键可以使我们的扫描工作更自动化,提高我们的工作效率.

当我们点击Scan按键后会有什么样的情况呢?我们以 独臂老宋的博客为案例http://blog.sina.com.cn/laosong11
点击Scan之后, CSS Usage会对当前的页面HTML和样式进行扫描,如下图

上图是我把扫描结果折叠后的样子,我们可以看到,CSS Usage对页面css样式表的内联(inline)样式和外链样式进行了扫描,HTML也作了扫描并显示加载时间.

下面我们展开一个内联样式

我们能看到这一句Line CSS Selector Seen, Seen before, Unseen, :hover,告诉我们” 列出CSS选择器的状态:
绿色–表示当前扫描看到的,
深绿色–的以前的扫描中看到的,
红色–的表示在当前和以前扫描中均未发现的.
灰色–的代表伪类的选择器CSS,这部分将会被忽视.
在这个列表的最下面,我们也会看到有个统计,告诉我们有多少被发现,多少没有发现,被忽视的是多少,CSS实用的覆盖率是多少的统计.

同时,CSS Usage还提供给我们关于CSS某个选择器被实用多少次的统计

如果我们一直使用 Auto Scan功能的话,我们的Scan次数也是在累积的,比如我们从首页到博文目录、再到图片、最后到达关于我,每一次页面跳转,CSS Usage 都会自动增加页面的扫描次数。如下图:

如果你想知道,我们都是在哪些页面进行的扫描,是不是覆盖到了所有的页面,你可以看到关于页面的扫描记录

如果我们仅仅是给CSS减肥的话,那我们就可以对红色的选择器开始动手了,CSS Usage给我们提供了一个更智能的工具, export cleaned css(导出清理后的CSS).但是直接使用这个工具对很多大型网站来说都需要勇气,我的建议还是保险一些的好,我们可以选择选择器的名称,通过文件夹的搜索功能,来查找这个css选择器的样式是不是已经作为下线 产品或者组件的组成部分,已经没有作用.或许我们在一个旮旯又 发现了它 ,那样我们只是当时出了冷汗,而不必等修改的文件上线后再出冷汗.

我们还要提一下这个工具的缺点:
如果网站使用了大量的ajax和dhtml的话,你需要尽可能多地打开那些隐藏的div/窗口和tab,让Css Usage爬取尽可能多的内容。
如果我们的网站页面数量很多的话,占用CPU和内存会比较大,需要足够的耐心。

我们本文只是介绍了关于移除无效CSS选择器 的方法,如果你想更全面的提升网站的速度,那么你可能需要结合Firebug\ Yslow\ Page Speed 组合应用,找到更优答案.

顺便推荐几款在线的CSS减肥工具:
CSS Validation Service http://jigsaw.w3.org/css-validator/
Css Optimiser http://www.cssoptimiser.com/
Clean CSS http://www.cleancss.com/
CSS Compressor http://www.cssdrive.com/index.php/main/csscompressor

原文:CSS减肥工具 — CSS Usage
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

两个在线调试css3.0的工具

两个在线调试css3.0的工具,css3 pleasecss3 generator。
css3.0增加的新属性,如投影、渐变、旋转、圆角等等!这些新标准属性在ie6、ie7、ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的。目前ie6、ie7、ie8浏览器不支持这些属性并不能说明ie就实现不了css3.0新属性的效果!css3please.com网站为我们收集整理了一些css3.0新属性效果在ie下的解决方案!

推荐内容:
6个关注css3的网站
关注css3.0
CSS 3.0 参考手册 (中文版)
1、css3please.com

css3.0
2、css3generator.com
css3.0tool

IETester最新版已经兼容Windows7

如果没有IETester工具,对于前端工程师来说绝对是一个天大的噩耗!IETester工具的重要性只有前端工程师知道!然而IETester不但没有给我们传来噩耗,而是给我们带了天大的利好消息!——IETester0.4最新版已经兼容Windows7了。因为IETester0.4之前的版本对于windows7的支持兼容是不完美的,总是出现莫名奇妙的报错。(xp系统则不存在此报错问题)(win7下无法使用IETester?)

IETester 0.4版本有了革命性的更新:

  1. IETester is now multi-processed, each tab having its own process so the main window should be more stable.
    采用了多线程。每一个tab就是一个独立的线程。大大的增强了软件的健壮性。
  2. It also provides Aero Feature under Windows 7 !
    支持玻璃效果,在windows7下更帅了。

IETester下载列表

  1. Download IETester v0.4
  2. IETester v0.4 zipped intaller
  3. IETester官方主页

DebugBar插件
其实IETester之前是做IE的网页开发插件DebugBar的。后来,发现IETester更有搞头,所以,现在就全力发展IETester了。当 然,IETester也整合了这个开发人员插件DebugBar。这个DebugBar虽然相比firebug一类的神器插件,还有几分逊色,但是在 IETester中能使用这样的插件已经是一件非常令人开心的事情了。所以,推荐大家在使用IETester的同时把DebugBar也安装上吧。

  1. DebugBar插件本地下载(rar文件-779k)
  2. DebugBar插件官方首页(不翻墙,不能访问)

varhi_IETester
关于IETester在Windows7下无法打开IE7的问题
如果大家在windows7下无法使用ie7的话,请参见”经典论坛’s Archiver“论坛
或者 “据说是因为IE8的代理设置导致的(原因请查阅 http://www.my-debugbar.com/forum/t502-Windows-crashes-every-time.html),在Internet选项-连接局域网设置里把“自动检测设置”的钩去掉。。。”

15个HTML5资源网站

作为一种尚未成型的技术,HTML5 对很多人来说仍然是陌生的。本文收集了 15 个非常值得收藏的 HTML5 资源,这些资源可以让你同 HTML5 的发展保持一致,并始终处于这门技术的最前沿。
1、WTF is HTML5
这是一个关于 HTML5 Infographics 的站点,包含诸如 HTML5 同 Flash 的对比,HTML5 不同浏览器支持情况,HTML5 最受欢迎的功能等资料。
wtf

2、Dive Into HTML 5
Mark Pilgrim 是知名软件开发师与博客作者,他在线编写了一本有关 HTML5 的书,侧重 HTML5 的编程方面的功能。
dive_html5

3、HTML5 Doctor
发布 HTML5 相关的文章,介绍目前我们可以借助 HTML5 实现的应用。站点中的一些文章和栏目,也是 HTML5 相应技术的最佳注解,如 dl elementarticle element 以及 Q&As 部分。这个站点由一群在 Future of Web Design 大会相遇相识的开发人员共同创办。
HTML5Doctor
4、When Can I Use…
这个简单的单页式站点是一份 HTML5 各种功能同当前主流浏览器(以及它们的不同版本)的兼容清单。
when_caniuse
5、HTML5 W3C  Specifications
这是 HTML5 的最新的草案,由 W3C 起草,如果你想对 HTML5 的方方面面有个权威的了解,这是最好的资源。
html5_specs
6、Yes,  You Can Use HTML 5 Today!
SitePoint 有一篇非常出色的文章,鼓励开发和设计者现在就开始部署使用 HTML5,还讲述了改如何编写代码,以适应那些尚不支持 HTML5 的浏览器,如 IE8。
html_today
7、Coding  A HTML 5 Layout from Scratch
这是来自 Smashing Magazine 的一篇文章,讲述了如何使用 HTML5 的新元素进行页面布局设计。
html5
8、HTML5  presentation
这是一份关于 HTML5 的演示,是一份有关 HTML5 非常超前的资料,原本是为 Google Chrome用户 设计,因此,在某些浏览器上可能无法观看。
html5_website
9、HTML5 Gallery
这是一个 HTML5 站点展示站点,定期推出一些基于 HTML5 的站点介绍,你可以藉此借鉴先行者们的技巧和经验。
html5_gallery
10、A Web Developer’s  Guide to HTML 5
这篇来自 W3C 的文章面向 Web 开发者,介绍了HTML5 的语法,API,术语以及各种开发者们关心的资源和技术。
html5_dev_guide
11、HTML5 Demos and Examples
Remy Sharp 是一位来自英国的 web 开发者,他编译了这套 HTML5 演示,包括简单的,基于浏览器的聊天程序.
html5_demos
12、Web  Designer’s Checklist: HTML5 Support Tables
一份非常全面的 HTML5 和 CSS3 浏览器兼容清单。
compatibility_tables
13、HTML  5 differences from HTML 4
HTML5 和 HTML4 到底有什么区别,这是 W3C 官方对比清单。
html4_html5_differences
14、HTML5-wikipedia
维基百科上有关 HTML5 的词条,非常权威,文章下方还提供了大量 HTML5 的权威资源。
wikipedia
15、The HTML5 test
这个站点可以帮您测试你的浏览器对 HTML5 的支持情况,并为你打出分数。
html5_score

35款高质量的免费电子商务模板

对于一个准备实施电子商务(e-commerce)的站长来说,这里有太多的系统选择来驱动网站和添加购物车功能。选择哪一种方案,这将取决于你的功能需求的设计来作出决策。当然,商业定制解决方案是大家通常会做出的选择,但是对于希望较少开支的的站长来说,选用模板是最佳的选择。优质的电子商务模板很容易不找到,但是通常价格都比较贵,免费的模板不好找,高质量的模板就更难找到了。

我们现在已经为你做了这方面的调查,在这篇文章中我们为您提供了35款高质量的免费电子商务模板,这些模板针对WordPress, Prestashop, osCommerce, Magento, Zen Cart, CubeCart, 和 CRE Loaded,还有一系列的通用的电子商务通用模板。请注意我们并不是希望你原封不动的使用这些模板,而是希望你能把他们作为电子商城的骨架,来减少你的开发时间,否则你不得不从草稿开始。

1. WordPress模板

Crafty WordPress Theme | Demo | 下载

varhi收集分享Crafty 35款高质量免费模板

WordPress e-Commerce Plugin | 下载

varhi收集分享Inst 35款高质量免费模板

2. Prestashop 免费模板

CleanBlue

varhi收集分享Theme 35款高质量免费模板

et-black

varhi收集分享Th2 35款高质量免费模板

PrestaThemes
PrestaShop一系列的高质量免费模板。

3. osCommerce 免费模板

Footwear | 下载

varhi收集分享 鞋 35款高质量免费模板

Appliance | 下载

varhi收集分享Appliance 35款高质量免费模板

Cosmetics Store | 下载

varhi收集分享varhi收集分享Cosmetics 35款高质量免费模板

电脑商城模板 | 下载

varhi收集分享Computeros 35款高质量免费模板

4. Magento 免费模板

Modern Theme | 从Magento下载

varhi收集分享Modern 35款高质量免费模板

蓝色 | 从Magento下载

varhi收集分享Blueskin 35款高质量免费模板

Telescope Theme | 从Magento下载

varhi收集分享Telescope 35款高质量免费模板

Pet Store Theme | 从Magento下载

varhi收集分享Pet 35款高质量免费模板

Free Magento Theme from Template Monster | 下载

varhi收集分享Monster 35款高质量免费模板

Electronics Store 3 | 从eCommerce-Themes下载

varhi收集分享Elec3 35款高质量免费模板

5. Zen Cart 免费模板

Free Zen Cart Template | 下载

varhi收集分享Zentemp 35款高质量免费模板

Acadame | Download from ichoze.net

varhi收集分享Acadame 35款高质量免费模板

Clothes Online | 下载

varhi收集分享Clothes2 35款高质量免费模板

6. CubeCart 免费模板

LiteFree

varhi收集分享Cube 35款高质量免费模板

Clean Blue
三款免费的CubeCart 3 皮肤. 更多免费Cubecart皮肤.

varhi收集分享Ch3 35款高质量免费模板

7. CRE Loaded 免费模板

Electronics Store | 下载

varhi收集分享Cre-elec 35款高质量免费模板

Clothes Store | 下载

varhi收集分享Clothes5 35款高质量免费模板

8. General E-Commerce 免费模板

下面的模板是为电子商务设计的但是他可能并不适合你的电子商城系统. 如果你想使用他们, 这需要去改进和结合到你选择的 e-commerce 系统中。 这些模板都符合HTML规范。

Tool Shop | 下载 (HTML 验证通过)

varhi收集分享Toolshop 35款高质量免费模板

Pet Shop | 下载 (HTML 验证通过)

varhi收集分享Petshop 35款高质量免费模板

Auto Parts | 下载 (HTML 验证通过)

varhi收集分享Autoparts 35款高质量免费模板

Clothes Collection | 下载

varhi收集分享Clothes 35款高质量免费模板

Gadgets Template | 下载 (HTML 验证通过)

varhi收集分享Gadgets 35款高质量免费模板

Online Movie Store | 下载 (HTML 验证通过)

varhi收集分享Movies 35款高质量免费模板

Books Online | 下载 (HTML 验证通过)

varhi收集分享Books 35款高质量免费模板

Beauty Company | 下载 (HTML 验证通过)

varhi收集分享Beautyco 35款高质量免费模板

Clothes Store | 下载

varhi收集分享Clothes4 35款高质量免费模板

Hardware Store | 下载

varhi收集分享Hardware 35款高质量免费模板

Online Store | 下载

varhi收集分享Onlinestore 35款高质量免费模板

Computer Store | 下载

varhi收集分享Compterstore 35款高质量免费模板

Mobile Phone Shop | 下载

varhi收集分享Mobilephones 35款高质量免费模板

Hi-Fi Technics Store | 下载

varhi收集分享Hifi 35款高质量免费模板

Electronics Store | 下载

varhi收集分享Electronics 35款高质量免费模板

中文原文:35款高质量的免费电子商务模板
英文原文:35 Free High-Quality E-Commerce Templates
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

在wordpress中如何为不同的分类定义不同的头部文件

在wordpress中如何为不同的分类定义不同的头部文件
你是不经常遇到这种情形,你希望对不同的分类运用不同的头部样式?我确定你肯定有这种需求。这里有一些简单有效的解决方案让你能够维布通的主题定义不同的头部样式。如果你需要更细节的内容,你可以去查看wordpress的开发文档。
首先你要为不同的分类创建不同的头部文件,需要有一个头部文件是默认的。这些文件将会被包含于主要的header.php 文件。下面的代码就是wordpress 主题模板需要的代码。
<?php
/**** Conditional Header for Per Category Example WordPress ****/
//  make sure we are in category listing
if (is_category()){
if (is_category(‘1’)){
<?php include(TEMPLATEPATH.’/header-cat1.php’); ?>
}
elseif (is_category(‘2’)){
<?php include(TEMPLATEPATH.’/header-cat2.php’); ?>
}
else {
// this is the deafult header
<?php include(TEMPLATEPATH.’/headerdefault.php’); ?>
}
}
?>
下面是用分类的名字和别名的例子
<?php
//  Alternative for using Category ID, You can use Category Name or Slug
if (is_category()){
// example of using a category name
if (is_category(‘Category 1’)){
<?php include(TEMPLATEPATH.’/header-cat1.php’); ?>
}
// example of using category slug
elseif (is_category(‘category-1’)){
<?php include(TEMPLATEPATH.’/header-cat2.php’); ?>
}
else {
// this is the deafult header
<?php include(TEMPLATEPATH.’/headerdefault.php’); ?>
}
}
?>
可能你也想为不同的页面使用不同的头部文件,所以我也把下面的代码例子写了出来。
<?php
//
// example of using header file based on pages
// note that you can either use page ID, Page Name or Page Slug
//
// this one uses page title
if (is_page(‘About’)){
<?php include(TEMPLATEPATH.’/header-contact.php’); ?>
}
// this one uses page slug
elseif (is_page(‘subscribe’)){
<?php include(TEMPLATEPATH.’/header-subscribe.php’); ?>
}
// this one uses page ID
elseif (is_page(‘6’)){
<?php include(TEMPLATEPATH.’/header-contact.php’); ?>
}
else {
<?php include(TEMPLATEPATH.’/headerdefault.php’); ?>
}
?>
提示:你需要根据你的实际情况用上面这些代码写入你的header.php文件来加载特殊的头部元素。

项目上线之前需要做什么

每当项目上线之前,我们都会忙的焦头烂额解决发现的bug,这些bug的发现是测试部门的同事随机发现的,那有没有一个排除bug的参照的列表呢?那下面是 varhi为大家所作的整理,希望对大家新产品的上线有所帮助。

每当项目上线之前,我们都会忙的焦头烂额解决发现的bug,这些bug的发现是测试部门的同事随机发现的,那有没有一个排除bug的参照的列表呢?那下面是 varhi为大家所作的整理,希望对大家新产品的上线有所帮助。

  1. 所有的文字没有拼写错误
  2. 内容完整
  3. 页面和内容的形式测试
  4. 打印样式存在并测试完毕
  5. Meta数据被包含尽力并恰当
  6. 页面标题和描述,搜索引擎友好
  7. 图片都有合适的alt值
  8. 标题属性恰当并对搜索引擎友好
  9. 收藏图片创立并展示良好
  10. 页脚的版权信息和网站创建者的链接
  11. HTML标签合法验证通过
  12. CSS文件验证通过
  13. 没有坏链
  14. JavaScript没有错误
  15. 在IE6中显示和功能正常
  16. 在IE7中显示和功能正常
  17. 在IE8中显示和功能正常
  18. 在火狐显示和功能正常
  19. 在Chrome显示和功能正常
  20. 在Safari显示和功能正常
  21. 在Opera显示和功能正常
  22. 在 1024X768分辨率下显示正常
  23. 在大分辨率下测试
  24. 表达提交测试,并且流程正确
  25. 必填项测试
  26. 表单提交接收结果正确
  27. 网站统计系统安装并设置正确
  28. 404页面存在并可用

如果你希望有一个可以在线记录上线前工作记录的表格,这边可以帮你解决:
launchlist

中文原文:项目上线之前需要做什么
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

网站设计师,请不要独自战斗

不管是自由职业者、小的代理机构的创建者还是站长们,我们中的大多数人都在独立战斗。数字革命的趋势就是我们独立。网络让我们能够本来需要集体一起的工作变成独立工作。也让我们不用再被地理环境约束,让我们可以在家办公。这些让我们受益的东西,也让我们变得越来越孤立。

独自战斗的危险

随着时间的推移,独自工作(即使你是一个小团队中的一员)会给你的精神、业务、网站带来伤害。事实上,即使有其他人和你一起在你的项目中工作,如果他比你年轻,你仍然会感到孤独。
如果你不能找到一个志同道合的人来一起分享你们的创意,探讨你们的业务或者项目,你将会面对无数的危险:

创造性枯竭
创造源于交流。通过你自己保持创造性是很困难的事情。最好的创意都是大家一起讨论,头脑风暴相互引导的结果。你周围没有人闪现新奇的创意,你的业务和项目就会缺少闪光的地方。

丧失信心
随着时间的推移,我们慢慢会对自己的能力和业务失去信心。特别是当我们出错时更明显。没有人来鼓励和安慰我们时,我们会对事情变的犹豫不决。

自负
当我们中的一部分人感到缺少信心的时候,还有一些人过于自信,他们需要接受挑战和质疑。这是我的亲身经历:如果没有合作者的质疑,我的项目一般会走向毁灭。没有人会喜欢这样,让你的业务方向错误是很容易的。

遇到技术瓶颈
我们不可能是每一方面的专家,运营一家网站或者一项业务需要多方面的技能。当我们独自工作时,问题往往会超出你的能力范围,你很容易就会遇到你能力的不足和无助。

.视野狭窄
另一个你自己独立工作会遇到的问题是在工作中你只有一个观点。如果另一个人看你的问题的话,他能给你另外想法,你的视野会更开阔,能从另一个角度切入问题。

挫折感
运行一项业务或者一个受批评的网站时,你会觉的是种负担。你经常面临重大的决定,特别是在招聘人手和经费方面。独自做这些决定会是一项责任和让人提心吊胆。让其他的人和你一起处理将会有很大的不同。

那么,你认同上面的观点吗?如果不认同,那我建议你再读一下自负的部分!我相信一个独立的网站所有者或者企业家能从外部观点或的好处。

问题是我们怎么找到这个人?

获得外部观点

最明显的一个解决方案就是我们在一开始的时候就找到一个拍档。不论是你和一个人一起经营一个网站或者开展一项业务,合作关系是很有益处的。这件事情在我现在的公司得到

验证。如果没有我的两个联合创办者–Chris 和 Marus,我将不知道做什么。

但是我要去说,并不是所有有过合作尽力的人都是愉快的。也许,当你读这篇文章的时候,这种不愉快的合作你已经经历过了。

你能做什么呢?在或的外部观点和灵感的途径中,还有其他的选择吗?

下面就是一些选项:

不参与管理的合伙人
这是我们采用的方案。我们有一个非执行董事,他叫Brian,他同很多公司工作,我们只是他微不足道的一部分。他对业务有独到的见解,他经常质疑我们。结果是将在业务方面危险降到了最低,他真是物超所值。

付费顾问
如果你不想在业务方面被其他人改变,为什么不去找一个外面的顾问,通过他你可以获得一些现实信息。毫无疑问,这种顾问的费用很贵,但是他给你带来了外部观点。

指导者
另外的选择途径是你可以找一个你敬佩的设计师或者网站所有者去指导你。很明显,这些人平时的工作都很忙,但是如果你为他们的时间付钱的话,你就会得到他们很多有价值的建议。你可能只需要每月一个小时,就会让你的前进方向保持正确。

好朋友
一个和你情况类似的朋友可能是一个比较便宜的解决方案。你们两个人可能会保持有规律的沟通,一起去面对业务或者网站所面临的问题,讨论不同的途径和想法。

社区
当然我们除了顾问、指导者或者朋友之外还有选择,线上的支持交流社区。我们周围有大量的这种社区,但是你要确信你他们不是太大。你要让其他人记住你和你的情况。

如何决定取决于你自己。我的观点是,如果你想实现你网站和业务的潜能,你需要别人的帮助和鼓励。人生来就是群组工作的,你也不例外。你也不会希望自己一个人工作!

中文原文:网页设计师,请不要独自战斗
英文原文:Web Designers, Don’t Do It Alone

转载请注明以上信息,以表示对作者和译者的尊重,多谢!