⊹⊱⋛⋋ISong榮耀ζ組織™⋋⋛⊱⊹ » Web development http://www.isonge.cn Freelance. Graphic design, illustration, print and web. Sat, 09 Jul 2011 22:42:40 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 网页设计线框工具大搜集 10枚 http://www.isonge.cn/2010/04/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e7%ba%bf%e6%a1%86%e5%b7%a5%e5%85%b7%e5%a4%a7%e6%90%9c%e9%9b%86-10%e6%9e%9a/ http://www.isonge.cn/2010/04/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e7%ba%bf%e6%a1%86%e5%b7%a5%e5%85%b7%e5%a4%a7%e6%90%9c%e9%9b%86-10%e6%9e%9a/#comments Thu, 01 Apr 2010 06:26:39 +0000 911 http://www.isonge.cn/?p=669 原文地址：http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes

MockFlow

wireframing

Axure

wireframing

Balsamiq Mockups

wireframing

Pencil Project

wireframing

HotGloo

wireframing

Mockingbird

wireframing

Cacoo

wireframing

ProtoShare

wireframing

iPlotz

wireframing

OmniGraffle

wireframing

]]> http://www.isonge.cn/2010/04/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e7%ba%bf%e6%a1%86%e5%b7%a5%e5%85%b7%e5%a4%a7%e6%90%9c%e9%9b%86-10%e6%9e%9a/feed/ 5 10个老外的设计与开发工作板 RSS Feeds http://www.isonge.cn/2010/01/10%e4%b8%aa%e8%80%81%e5%a4%96%e7%9a%84%e8%ae%be%e8%ae%a1%e4%b8%8e%e5%bc%80%e5%8f%91%e5%b7%a5%e4%bd%9c%e6%9d%bf-rss-feeds/ http://www.isonge.cn/2010/01/10%e4%b8%aa%e8%80%81%e5%a4%96%e7%9a%84%e8%ae%be%e8%ae%a1%e4%b8%8e%e5%bc%80%e5%8f%91%e5%b7%a5%e4%bd%9c%e6%9d%bf-rss-feeds/#comments Fri, 22 Jan 2010 10:38:05 +0000 911 http://www.isonge.cn/?p=648 下 载OPML 文件 导入你的rss阅读器

1. Authentic Jobs

Authentic Jobs

2. Coroflot

Coroflot


3. Freelance Switch Job Boards

Freelance Switch Job Boards

4. Krop

Krop


5. 37signals Job Board

37signals Job Board

6. Ars Technica Job Board

Ars Technica Job Board

7. ReadWriteWeb Job Board

ReadWriteWeb Job Board

8. DesignM.ag Job Board

DesignM.ag Job Board

9. Smashing Jobs

Smashing Jobs

10. Design Jobs on the Wall

Design Jobs on the Wall



]]> http://www.isonge.cn/2010/01/10%e4%b8%aa%e8%80%81%e5%a4%96%e7%9a%84%e8%ae%be%e8%ae%a1%e4%b8%8e%e5%bc%80%e5%8f%91%e5%b7%a5%e4%bd%9c%e6%9d%bf-rss-feeds/feed/ 2 如何让IE彻底听从你 http://www.isonge.cn/2009/10/%e5%a6%82%e4%bd%95%e8%ae%a9ie%e5%bd%bb%e5%ba%95%e5%90%ac%e4%bb%8e%e4%bd%a0/ http://www.isonge.cn/2009/10/%e5%a6%82%e4%bd%95%e8%ae%a9ie%e5%bd%bb%e5%ba%95%e5%90%ac%e4%bb%8e%e4%bd%a0/#comments Mon, 26 Oct 2009 06:41:16 +0000 911 http://www.isonge.cn/?p=594 原作者 Paul Andrew (Speckyboy 和 speckyboy@twitter).

原文：http://designreviver.com/tips/internet-explorer-resources-for-web-developers/

在开发者与设计者眼里没有比通过IE浏览网站更糟糕的事情了，随着IE8的到来，事情有所好转，但是仍然有大量的用户在使用IE6和IE7，请升级，立刻升级！！！

IE 仍然占有绝大部分的用户，所以，很遗憾，开发者和设计者还要和他相伴工作（我非常的扫瑞啊）。

今天，我们整理了一部分很好的资源，提示和备忘录来帮助您为IE做开发。

终极 IE6 备忘录:如何解决25+ Internet Explorer 6 臭虫

IE Hacks

CSS 在 Internet Explorer 6, 7 和 8 中的不同之处

IE Hacks

开发者必须在所有目前使用的Internet Explorer浏览器工作中为客户的网站与个人项目进行彻底测试，保证目标拥有更广泛的受众。

本文为开发人员提供了一个详尽的，易于使用的参考，让您清楚CSS中的IE6中，IE7和IE8的支持的差异。

Internet Explorer 6, 7 和 8 通盘测试战略

IE Hacks

这篇文章中，作者向我们展示了如何通过Microsoft提供的虚拟PC（VPC在线）和Internet Explorer VPC镜像中的应用程序兼容性来降低成本，安装多个合法版本的IE来进行测试，当您完成后，您就可以放心地测试在IE6，IE7和IE8中测试了。

]]> http://www.isonge.cn/2009/10/%e5%a6%82%e4%bd%95%e8%ae%a9ie%e5%bd%bb%e5%ba%95%e5%90%ac%e4%bb%8e%e4%bd%a0/feed/ 0 WordPress技巧（9）： 未着装Theme Starkers http://www.isonge.cn/2009/10/wordpress%e6%8a%80%e5%b7%a7%ef%bc%888%ef%bc%89%ef%bc%9a-%e6%9c%aa%e7%9d%80%e8%a3%85theme-starkers/ http://www.isonge.cn/2009/10/wordpress%e6%8a%80%e5%b7%a7%ef%bc%888%ef%bc%89%ef%bc%9a-%e6%9c%aa%e7%9d%80%e8%a3%85theme-starkers/#comments Fri, 02 Oct 2009 10:08:49 +0000 911 http://www.isonge.cn/?p=570 Starkers: the completely naked theme for WordPress

假如你是新手，又不想从头写那些反复的theme基本文件，请看这里。一款未穿上衣服的theme衣架。适合初学者全面了解，wordpress theme 的文件框架。

这里还有几个测试xml，可以import一下，看看效果。

Dummy Content:

WP XML Test Data Import

When developing themes one of the biggest frustrations can be the lack on content on a new installation of WordPress. Self Conclusion has put together an XML file with several posts and pages of dummy content with tags, categories, comments, links, lists, and everything you will need to test a theme. You can easily download this file and import it into WordPress to save the time of adding your own dummy content.

Sandbox Dummy Content

For Sandbox design competitions, a set of dummy content was released. It achieves the same purpose as the content from Self Conclusion that was just mentioned.

WordPress Test Post Pack

Think Design Blog also has a pack of dummy content that can be downloaded and imported into WordPres

]]> http://www.isonge.cn/2009/10/wordpress%e6%8a%80%e5%b7%a7%ef%bc%888%ef%bc%89%ef%bc%9a-%e6%9c%aa%e7%9d%80%e8%a3%85theme-starkers/feed/ 0 WordPress技巧（8）： WordPress Theme Bundle http://www.isonge.cn/2009/09/wordpress%e6%8a%80%e5%b7%a7%ef%bc%887%ef%bc%89%ef%bc%9a-wordpress-theme-bundle/ http://www.isonge.cn/2009/09/wordpress%e6%8a%80%e5%b7%a7%ef%bc%887%ef%bc%89%ef%bc%9a-wordpress-theme-bundle/#comments Thu, 10 Sep 2009 08:48:09 +0000 911 http://www.isonge.cn/?p=566 假如你正在开发WP的theme，那么这个此篇文章正是你所需要的，这是有关wp theme bundle的tip.

假如你在使用Mac下的TextMate,或者Windows下的E-TextEditor，Check Out

1. cd ~/Library/Application\ Support/TextMate/Bundles/
2. svn co http://svn.sofanaranja.com/projects/brettbundles/trunk/Bundles/Wordpress\ Theme.tmbundle WordPress\ Theme.tmbundle或者

直接下载: Wordpress_Theme.tmbundle.zip

开发愉快！～

]]> http://www.isonge.cn/2009/09/wordpress%e6%8a%80%e5%b7%a7%ef%bc%887%ef%bc%89%ef%bc%9a-wordpress-theme-bundle/feed/ 0 有关CSS的Class命名 http://www.isonge.cn/2009/08/%e6%9c%89%e5%85%b3css%e7%9a%84class%e5%91%bd%e5%90%8d/ http://www.isonge.cn/2009/08/%e6%9c%89%e5%85%b3css%e7%9a%84class%e5%91%bd%e5%90%8d/#comments Fri, 14 Aug 2009 12:02:41 +0000 911 http://www.isonge.cn/?p=547 My Top 10 Most Used CSS Class Names

看到这篇文章以后，做下自己的整理。

在写css的过程中，Class的命名是非常重要的一项内同，简洁有语义的Class命名有利于代码的可读性。虽然伴随着HTML5的到来，会逐渐弱化，直接在HTML标签上进行简化和加强语义，但是这里还是有必要写一下。

class=”fixed”

这里是清除浮动的新写法，自动产生一个不显示的字符”.”，清除浮动，非常的实用。我自己使用class=”clearfix”

.fixed:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}
.fixed{
	display:block;
	}
/*  \*/
.fixed{
	min-height:1%;
	}
* html .fixed{
	height:1%;
	}

class=”alt”

alt是”alternative”的缩写

#content img{
	float:left;
	display:inline;
	margin-right:10px;
	border:1px solid #ccc;
	padding:1em 0;
	background:#fff;
	}
#content img.alt{
	float:right;
	margin-right:0;
	margin-left:10px;
	}

class=”selected”

<li class=“selected”><a href="/about">About Us</a></li>

class=”first”,class=”last”

直到所有的浏览器都支持:first-child 和 :last-child属性以后，这个写法将会消失。

class=”inner”

作为内容器经常与container一起使用

<div id="container">
	<div>

	</div>
</div>

class=”even”，calss=”odd”

使用在隔行变色的li或者table tr上

<ul>

<li>Content</li>

<li>Content</li>

<li>Content</li>

<li>Content</li>

</ul>

class=”section”

替代以前常用的class=“box”

<div>
	content here...
</div>
]]> http://www.isonge.cn/2009/08/%e6%9c%89%e5%85%b3css%e7%9a%84class%e5%91%bd%e5%90%8d/feed/ 0 Xenocode Browsers http://www.isonge.cn/2009/08/xenocode-browsers/ http://www.isonge.cn/2009/08/xenocode-browsers/#comments Thu, 06 Aug 2009 07:48:26 +0000 911 http://www.isonge.cn/?p=527
Xenocode Browsers这个工具我认为是必须拥有的，只需要安装一个插件，就可以在线测试多种浏览器效果 (IE 6, 7 和 8, Firefox 2 and 3, Google Chrome 和 Opera) 。

不过这个工具只能在Windows (XP with SP2 和更高级的系统)下工作，但非常的不错。访问 Xenocode Browsers

]]> http://www.isonge.cn/2009/08/xenocode-browsers/feed/ 0 WordPress技巧（5）： 模板框架 http://www.isonge.cn/2009/08/wordpress%e6%8a%80%e5%b7%a7%ef%bc%885%ef%bc%89%ef%bc%9a-%e6%a8%a1%e6%9d%bf%e6%a1%86%e6%9e%b6/ http://www.isonge.cn/2009/08/wordpress%e6%8a%80%e5%b7%a7%ef%bc%885%ef%bc%89%ef%bc%9a-%e6%a8%a1%e6%9d%bf%e6%a1%86%e6%9e%b6/#comments Sun, 02 Aug 2009 14:31:37 +0000 911 http://www.isonge.cn/?p=511 使用Wordpress主题框架的原因
  • 能有建立任何类型的网站
  • 如果你不知道如何从零开始创建自己的主题
  • 有效的和有语义的XHTML
  • 如果你打算开始学习主题设计
  • 网页开发人员需要快速转变他们的客户网站
  • SEO优化主题
  • 支持多种流行插件
  • 灵活的结构类别，可以通过CSS针对任何特定的页面
  • 利用微格式

Sandbox

06_sandbox

可能是第一个真正意义上的主题框架，Sandbox是 WordPress主题设计者和开发者强有力的工具。Sandbox能轻松的通过CSS进行设计，所以新手会感觉到非常的舒服，而不会被PHP打扰。

Thematic

01_thematic

Thematic是免费的开源的高扩展的SEO优化的WordPress主题框架，13个widget准备区,简洁的网格排版，适用很多受欢迎的插件，背后拥有一整套的社区。非常适合新手blogger和 WordPress个人开发。

Hybrid

02_hybrid

Carrington


WPframework

04_wpframework

Parallel

05_parallel

]]> http://www.isonge.cn/2009/08/wordpress%e6%8a%80%e5%b7%a7%ef%bc%885%ef%bc%89%ef%bc%9a-%e6%a8%a1%e6%9d%bf%e6%a1%86%e6%9e%b6/feed/ 0 13个验证与浏览器兼容测试方法 http://www.isonge.cn/2009/08/13%e4%b8%aa%e9%aa%8c%e8%af%81%e4%b8%8e%e6%b5%8f%e8%a7%88%e5%99%a8%e5%85%bc%e5%ae%b9%e6%b5%8b%e8%af%95%e6%96%b9%e6%b3%95/ http://www.isonge.cn/2009/08/13%e4%b8%aa%e9%aa%8c%e8%af%81%e4%b8%8e%e6%b5%8f%e8%a7%88%e5%99%a8%e5%85%bc%e5%ae%b9%e6%b5%8b%e8%af%95%e6%96%b9%e6%b3%95/#comments Sun, 02 Aug 2009 08:15:44 +0000 911 http://www.isonge.cn/?p=497

每天在回顾浏览ThemeForest上的模板的时候，我都会测试验证浏览器的兼容-更不用说我自己的工作。随着时间的推移，我已经收集到了网上最好的验证和浏览器兼容性测试的工具。以下是我最爱的。

PG

作者: Jarel Remick

我是个“讨人厌”的人，花费了大量时间在计算机和所喜爱的网络上.我在ThemeForest.net上制作模板,为Theme Forest写blog。当我不“讨人厌”的时候,我把时间花在了阳光明媚的内华达州拉斯维加斯与我的女朋友一起。

HTML和CSS验证

首先让我们先看一看检查验证HTML与CSS的方法。我应该说到的是由于我在MAC上工作，会略微偏向于MAC。不要担心，仍然有许多平台独立解决方案的。

除了验证你的文件以外,你也应该很好的格式化自己的代码”HTML/CSS格式化实例与提示“是有关此类主题的文章。

1. W3C 验证 – HTML

可能大多数人都知道在线的W3C验证服务你可以通过链接地址进行验证，或者是上传文件或者直接提交代码。有很多的验证选项，尽管很多时间你不真的需要他们。

W3C HTML Validation

2. W3C 验证 – CSS

你很可能知道W3C的也有一个CSS校验服务。与HTML验证服务一样，这个CSS版本更多的选择，并允许在必要时通过的URI验证，文件上传和直接提交代码。

W3C CSS Validation

3. [Firefox] 网页开发工具条

The Web Developer toolbar extension for Firefox的网页开发工具条非常受欢迎，拥有很多非常棒个的功能，附加了很棒的HTML与CSS验证工具，你可以快速的对当前浏览的本地文件网站进行 验证。他会发送URI或者文件到W3C，并在新的选项页里面显示验证结果。

你也可以打开“验证显示页面”来快速查看HTML和CSS的验证信息，无需再打开新的标签页面。假如你在开发一个项目非常有帮助。不仅仅是HTML与CSS你也可以验证更多的选项。

Web Developer Toolbar

4. [独立的浏览器] W3C Validator Favelets

我使用Safari浏览器作为我的主要网络浏览器，但是Firefox已经宠坏了我，它拥有强大的扩展选择，如网络开发工具栏和Firebug。 Safari浏览器的Web Inspector，一个类似Firebug的工具，但不能进行文件验证。

涵盖几乎任何主要浏览器验证HTML和CSS的快速和轻松的方法是使用favelets 。 Favelets是通过JavaScript增加额外的功能的书签片段。 W3C的提供了几种验证favelets，我经常使用的是Safari 。

Safari W3C Validation Favelets

5. 你的开发编辑器

大多数的编辑器提供少许的验证工具。目前我使用的编辑器Coda和CSSEdit都提供验证工具。

Coda's Validator

6. 验证 S.A.C.

如果您需要迅速验证大量的文件，在最喜爱的编辑器或通过浏览器打开所有文件是痛苦的事情。这个应用会让这个过程快速而且简单。

S.A.C验证器是OS X的单机应用程序，可以使用favelet验证HTML文件（with W3C），拖放或者通过URL的或仅仅是应用程序的文件> 打开。我用的是拖放方法尤其频繁。 ;-)

Validator S.A.C.

验证的一些想法

虽然验证是非常重要的，不过它只是一种工具，以帮助确保您的代码达到标准和接近完美。如果您使用的是一些新的网络技术，它可能无法验证，这并不意味着你不应该使用它。创新的问世往往是打破了规则。

尽管如此，如果需要提交的模板进行销售，请确保所有的文件验证后提交。如果有由于CSS3这样的验证错误，只需要在后面的说明中注明。 ;-)

浏览器兼容测试

如果每个人都只使用最新版本的Firefox或Safari浏览器，浏览器的测试将是一件轻而易举的事。还是让我们面对现实吧，这是不会发生，我们未来几年都将会与Internet Explorer的问题做斗争（不只是IE6） 。

以下是一些我常用的和一些我不用的工具，测试Internet Explorer，Safari，Firefox和其他浏览器的兼容性。

当前的IE, Firefox 与 Safari

很明显，如果你在使用的Windows，目前肯定安装了例如Firefox 3.5 ， Safari4 ， Opera和Internet Explorer等浏览器。

browsers

7. 老版本的Firefox

如果需要测试的旧版本Firefox。这里有几个我认为最简单的方法可以做到这一点。

Portableapps在Windows上作为单独的应用软件运行Firefox，因此没有必要安装，也不会干扰到当前安装的Firefox。

Mac下的MultiFirefox 2.0，可以让你运行不同版本的Firefox，并管理不同的账户。

MultiFirefox 2.0

你可以访问 http://releases.mozilla.org/pub/mozilla.org/firefox/releases/ 下载其他版本

8.老版本的Safari

不幸的是，基于Windows的Web开发人员，我没有测试多个版本的Safari浏览器的简单解决办法。对Mac用户来说，这是个不错的独立版本的Safari浏览器收集，Michel Fortin提供。

Muli-Safari

9 & 10. 老版本的Internet Explorer

在Mac下交互测试IE是不轻松的，所以我安装了虚拟机运行XP安装了IETester，这个产品可以帮助你在Windows XP, Vista 和 7下测试IE从5.5开始的各个版本。

IETester

每隔一段时间我都会在IETester中发现一个古怪的问题,我不能确定是不是在原版本的IE6或7中是存在。所以我也使用Internet Explorer Collection安装了独立版本的IE6, 7 和 8。

Internet Explorer Collection

快照服务

假如你不需要在这些浏览器中与你的网站实际互动，你还可以使用多种浏览器的快照服务，这将只显示网站在各种各样的浏览器中的图像效果。

11. Adobe BrowserLab

Adobe最近放出一个新的名叫BrowserLab的服务，它可以通过网站的网址让你看到不同浏览器下的不同效果。快速，免费，你可以进行两个不同浏览器版本的浏览效果进行对比。

Adobe BrowserLab

12. Browsershots.org

Browsershots.org 与Adobe BrowserLab有着相同想法，但是也有很多的不同之处。你可以在更多的平台上设置更多的选项例如屏幕大小，颜色深度，JS，flash等，来测试更多的浏览器效果。服务的趋势在下降，因为速度有点慢（有的时候太慢了），几乎没有很好的UI.

Browsershots.org

13. Browsercam

如果你没有读到”25个设计师必不可少的网络服务“, 那你应该去读一下。你会发现有很多很棒的服务，Browsercam 就是我在其中发现的。

Browsercam也可以做基础的浏览效果截图，但是进一步使用别的功能和快速显示需要付费，然而我没有再次使用。

Browsercam.com

最后的一些想法

现在你拥有了一些在Windows和Mac中验证和测试工作的的方法。如果你要提交模板到Theme Fores，你现在没有验证错误或者浏览器不兼容的接口了吧。大多数我审查拒绝的模板，都是由于浏览器验证错误和浏览器兼容问题而造成的，需要在提交前修正这些问题。

]]> http://www.isonge.cn/2009/08/13%e4%b8%aa%e9%aa%8c%e8%af%81%e4%b8%8e%e6%b5%8f%e8%a7%88%e5%99%a8%e5%85%bc%e5%ae%b9%e6%b5%8b%e8%af%95%e6%96%b9%e6%b3%95/feed/ 0 WordPress技巧（1）： 主题中快速调用JQuery http://www.isonge.cn/2009/07/wordpress%e6%8a%80%e5%b7%a7%ef%bc%881%ef%bc%89%ef%bc%9a-%e4%b8%bb%e9%a2%98%e4%b8%ad%e5%bf%ab%e9%80%9f%e8%b0%83%e7%94%a8jquery/ http://www.isonge.cn/2009/07/wordpress%e6%8a%80%e5%b7%a7%ef%bc%881%ef%bc%89%ef%bc%9a-%e4%b8%bb%e9%a2%98%e4%b8%ad%e5%bf%ab%e9%80%9f%e8%b0%83%e7%94%a8jquery/#comments Wed, 29 Jul 2009 06:21:16 +0000 911 http://www.isonge.cn/?p=462 jQuery是一个非常棒的js框架，假如你想在你的WordPress中使用，你知道如何更快捷的调用么？

首先要说的是WordPress已经包含了JQuery，所以你不无需再去下载一个新的JQuery拷贝。只需要使用wp_enqueue_script() 函数,就可以自动在主题的头部调用。打开header.php文件，将以下的代码插入<head> 和 </head> 标签中:

<?php wp_enqueue_script("jquery"); ?>
]]> http://www.isonge.cn/2009/07/wordpress%e6%8a%80%e5%b7%a7%ef%bc%881%ef%bc%89%ef%bc%9a-%e4%b8%bb%e9%a2%98%e4%b8%ad%e5%bf%ab%e9%80%9f%e8%b0%83%e7%94%a8jquery/feed/ 0