收集分享互联网资源! http://varhi.com 收集分享互联网里优秀的设计网站、前端技术网站、资源网站、博客、文章。 Mon, 06 Sep 2010 02:12:17 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 利用css3、html5重构varhi.com页面 http://varhi.com/?p=4268 http://varhi.com/?p=4268#comments Mon, 06 Sep 2010 01:45:24 +0000 adou http://varhi.com/?p=4268 最近闲来无事儿，用css3.0、hmtl5对www.varhi.com网站进行了试验性重构，点击查看效果！同时为了让移动设备也做到对页面很好的支持效果，特用了css3.0的新属性media就其进行了研究学习，在移动设备上的效果如下截屏(ie内核浏览器对css3.0、html5的支持情况不太乐观，所在基于ie内核的浏览器无法正常浏览)。欢迎在留言板里留言交流！
1、在浏览器上的效果

varhi_broses
2、在Motorola Droid移动设备上的效果
android

3、在Google Nexus One移动设备上的效果

googleone

4、在iPad移动设备上的效果

iPad
5、在iPhone移动设备上的效果

iPhone

]]> http://varhi.com/?feed=rss2&p=4268 1 15个HTML5资源网站 http://varhi.com/?p=4229 http://varhi.com/?p=4229#comments Tue, 17 Aug 2010 08:43:05 +0000 adou http://varhi.com/?p=4229 作为一种尚未成型的技术，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 element ，article 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

]]> http://varhi.com/?feed=rss2&p=4229 0 各浏览器对CSS3.0属性支持情况列表 http://varhi.com/?p=4216 http://varhi.com/?p=4216#comments Fri, 13 Aug 2010 02:02:23 +0000 adou http://varhi.com/?p=4216 支持 CSS3 .0属性的浏览器越来越多，甚至包括测试版本的 IE9，当然，所谓支持仅仅是部分支持，因为 CSS3.0 的W3C 规范都尚未形成。如果你现在就希望使用 CSS3 创建你的站点，至少要对各个浏览器对这种新技术的支持情况有一个全面了解。
需要指出的是，即使同一个浏览器的同一个版本，在 Mac 和 Windows 两个平台，它们对 CSS3 .0的支持也并不一致。本文是一份 Chrome， Safari， Firefox， Opera， IE 等5 大浏览器，在 Mac 和 Windows 两个平台，对 CSS3 .0各种功能的详细支持情况清单。
css3.0属性浏览器支持情况
可以看出，全盘支持 CSS3 属性的浏览器有 Chrome和 Safari，而且不管是 Mac 平台还是 Windows 平台全支持。
点击查看大图
css3.0pk

css3.0选择器
除了 IE 家族和 Firefox 3，其它几乎全部支持。Chrome，Safari，Firefox 3.6，Opera 10.5 成绩最好 。
点击查看大图
css3.0pk02

]]> http://varhi.com/?feed=rss2&p=4216 0 两个在线调试css3.0的工具 http://varhi.com/?p=4210 http://varhi.com/?p=4210#comments Thu, 12 Aug 2010 10:05:51 +0000 adou http://varhi.com/?p=4210 两个在线调试css3.0的工具，css3 please和css3 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

]]> http://varhi.com/?feed=rss2&p=4210 0 35款高质量的免费电子商务模板 http://varhi.com/?p=4159 http://varhi.com/?p=4159#comments Thu, 22 Jul 2010 04:24:36 +0000 alon http://varhi.com/?p=4159 对于一个准备实施电子商务（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
转载请注明以上信息，以表示对作者和译者的尊重，多谢！

]]> http://varhi.com/?feed=rss2&p=4159 3 在wordpress中如何为不同的分类定义不同的头部文件 http://varhi.com/?p=4147 http://varhi.com/?p=4147#comments Tue, 13 Jul 2010 14:16:00 +0000 alon http://varhi.com/?p=4147
在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文件来加载特殊的头部元素。
]]> http://varhi.com/?feed=rss2&p=4147 2 项目上线之前需要做什么 http://varhi.com/?p=4123 http://varhi.com/?p=4123#comments Mon, 05 Jul 2010 04:55:16 +0000 alon http://varhi.com/?p=4123 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

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

]]> http://varhi.com/?feed=rss2&p=4123 4