⊹⊱⋛⋋ISong榮耀ζ組織™⋋⋛⊱⊹ » E

网页设计师轮盘

911 — Wed, 04 Nov 2009 15:12:30 +0000

原文地址

这个网页设计师的轮盘是描述通过五个步骤进行管理小型网络项目与客户间关系的简要过程模型。这个方法能帮助你更好的工作，建立和考虑阶段性的关键点，并与客户建立起长期的商业关系。

模型

需求定义:在这第一个步骤中，您有“翻译”的要求和客户要求的所有功能执行。可以制定一个你必须要做的带有详细描述的项目清单。

规划: 为上一步中制定的项目清单规划开始与结束日期。罗列出每天需要做的清单,分阶段估算出开发与测试周期.

开发测试: 编写和测试执行的功能,履行上一步骤中制定的每日计划。根据每日进度判断是否有必要进行重新规划。每周和客户进行沟通，或者有重大改动的时候及时和客户交流。

检查: 做最后的“大规模”检测，与客户一同测试主要功能。

发布与追踪: 发布产品并追踪监视，获得客户回执.

Xenocode Browsers

911 — Thu, 06 Aug 2009 07:48:26 +0000

Xenocode Browsers这个工具我认为是必须拥有的，只需要安装一个插件，就可以在线测试多种浏览器效果 (IE 6, 7 和 8, Firefox 2 and 3, Google Chrome 和 Opera) 。

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

逛互联网动物园才是正经事

911 — Mon, 03 Aug 2009 11:35:20 +0000

13个验证与浏览器兼容测试方法

911 — Sun, 02 Aug 2009 08:15:44 +0000

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

作者: Jarel Remick

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

HTML和CSS验证

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

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

1. W3C 验证 – HTML

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

2. W3C 验证 – CSS

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

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

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

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

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

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

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

5. 你的开发编辑器

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

6. 验证 S.A.C.

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

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

验证的一些想法

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

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

浏览器兼容测试

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

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

当前的IE, Firefox 与 Safari

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

7. 老版本的Firefox

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

Windows: Standalone Firefox (older versions) via Portableapps.com
Mac: MultiFirefox 2.0

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

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

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

8.老版本的Safari

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

9 & 10. 老版本的Internet Explorer

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

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

快照服务

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

11. Adobe BrowserLab

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

12. Browsershots.org

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

13. Browsercam

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

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

最后的一些想法

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

10个网页开发有用的code片段

911 — Wed, 29 Jul 2009 05:34:52 +0000

1. CSS 打印框架

Hartija 是广泛使用的网页打印样式表框架。在这里下载 CSS 文件并在你网页中插入以下code使用:

“stylesheet” href=“print.css” type=“text/css” media=“print”>

2. CSS @font-face

作者可以运用下面这段代码无需使用图片即可制定网页的默认字:

@font-face {
font-family: MyFontFamily;
src: url(‘http://’);
}

3. HTML 5 CSS Reset

Richard Clark 在Eric Meyers的CSS重置基础上进行了一些新的改良和创新。

4. Unit PNG Fix

This snippet 修正了Internet Explorer 6下png 24 bit 透明问题 .

5. 圆角选项卡导航条

这段代码与图片展示了如何制作一个简单的圆角选项卡导航条

6. PHP: 使用isset()替代strlen()

这段代码使用 isset() 替代 strlen() 来核实PHP变量 (例子中 $username) 被设定最少六个字长。 (via Smashing Magazine).

if (isset($username[5])) {
// Do something…
}

7. PHP: 将字符串转化成可点击的url地址

这是段非常有用的，将字符串转化为可点击链接的代码。在此之前很多的教程中都使用过；例如这个简单的 PHP Twitter 搜索。

function convertToURL ($text) {
$text = preg_replace(“/([a-zA-Z]+:\/\/[a-z0-9\_\.\-]+”.”[a-z]{2,6}[a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/”,” $1”, $text);
$text = preg_replace(“/[^a-z]+[^:\/\/](www\.”.”[^\.]+[\w][\.|\/][a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/”,” $1”, $text);
$text = preg_replace(“/([\s|\,\>])([a-zA-Z][a-zA-Z0-9\_\.\-]*[a-z" . "A-Z]*\@[a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]{2,6})” . “([A-Za-z0-9\!\?\@\#\$\%\^\&\*\_\-\=\+]*)” . “([\s|\.|\,\<])/i”, “$1$2$4″,
$text);
return $text;
}
?>

8. jQuery: Ajax call

这是非常简单的使用 jQuery执行 Ajax call的用法。通过表单的ID和你要提交的输入框改变formId和inputFieldId:

9. CSS布局收集

这里收集包含了超过300种网格和CSS布局，你可以使用在你的项目中，看一看，非常有用。

10. Simple versatile multilevel navigation Menu简单的多功能多级导航菜单

“nav”

…使用下面这个基本的CSS代码:

#nav, #nav ul{

margin:0;

padding:0;

list-style-type:none;

list-style-position:outside;

position:relative;

line-height:26px;

}

#nav a:link,

#nav a:active,

#nav a:visited{

display:block;

color:#FFF;

text-decoration:none;

background:#444;

height:26px;

line-height:26px;

padding:0 6px;

margin-right:1px;

}

#nav a:hover{

background:#0066FF;

color:#FFF;

}

#nav li{

float:left;

position:relative;

}

#nav ul {

position:absolute;

width:12em;

top:26px;

display:none;

}

#nav li ul a{

width:12em;

float:left;

}

#nav ul ul{

width:12em;

top:auto;

}

#nav li ul ul {margin:0 0 0 13em;}

#nav li:hover ul ul,

#nav li:hover ul ul ul,

#nav li:hover ul ul ul ul{display:none;}

#nav li:hover ul,

#nav li li:hover ul,

#nav li li li:hover ul,

#nav li li li li:hover ul{display:block;}

…这里是js代码，放在中:

35个有创意的购物网站设计

911 — Wed, 29 Jul 2009 03:46:38 +0000

Chop Shop

Ooga Zone

Nine West

Nike

REI

TOOBYDOO

Crate & Barrel

House Industries

JAQK Wine Cellars

Kansas City Steaks

Abercrombie & Fitch

Nestliving

Red is White

Mouse to Minx

Cacties

Urban Originals

Russell & MacKenna

Lane Bryant

Nort Berlin

The Sak

Acne

Lucky Brand Jeans

TasteBook

Brio

Anna Scholz

Steve & Co.

Mohawk Paper Store

Hard Graft

Nicholas Deakins

ShopRush

Dirty Coast

Victoria’s Secret

Ginger Pup Lane

Bridge55

Design by Humans

资源整理

911 — Sat, 25 Jul 2009 15:48:18 +0000

1. 30 iPhone Apps with Sexy Interfaces

2. 20 Brilliant One-Page Portfolios

3. 25 Inspiring Examples of Sign-Up Pages

4. 50 Examples of Vintage Typography

5. 50 Kick-Ass And Creative Dark Website Designs

6. 17 Popular Universities That Are Using WordPress

7. Bumpbox

8. Anything Zoomer

9. QuickFlip 2

10. Horizontal Sub-nav with CSS & jQuery

11. jQuery Ajax Delete

12. Object-Oriented Programming with JavaScript

13. Up The Moo Herd: MooTools Tips and Tricks

14. 7 Golden Rule Before You Begin Any Web Site Project

15. Using CSS3 @font-face to “Fake” Multiple Font Weights

16. 50 New CSS Techniques for Your Next Web Design

17. 5 Web Design E-Books That Don’t Suck

18. 30 Information Packed UX and IA Resources

19. 22 Very Useful Adobe Illustrator Tutorials

20. An Explanation of Photoshop Blend Modes

55个激发灵感的网页设计

911 — Wed, 22 Jul 2009 13:27:04 +0000

via:http://vandelaydesign.com/blog/galleries/niche-web-design-galleries/

E-Commerce Galleries:

CartFrenzy
Our own gallery that showcases the best e-commerce designs.

Cart Craze
Cart Craze is another e-commerce gallery that has a lot of sites in the archives.

Other E-Commerce Galleries:

Carted Up – Not up-to-date
E-Commerce Gallery

Portfolio Galleries:

Folio Focus
Our own gallery of well-designed portfolio sites.

Foliostars
Foliostars was launched in 2008 and has over 200 featured sites.

Pixel Perfect Portfolios
An up-to-date gallery of the best Flash portfolios.

Mobile Galleries:

Mobile Awesomeness
Mobile Awesomeness is the best place to find inspiration from exemplary mobile sites.

CSS iPhone
A gallery of mobile website designs.

One-Page Sites:

One Page Love
An up-to-date gallery of one-page websites.

Other One-Page Galleries:

One Page Folios – the site is not available at the moment.

Layout-Based Galleries:

Design by Grid
Design by Grid is a showcase of grid-based design. There are not a lot of sites added, but it is up-to-date.

No Resolution
No Resolution is a gallery of liquid layouts. Only a few sites are added each month.

Other Layout-Based Galleries:

The Horizontal Way – hasn’t been updated in nearly two years, but still an interesting gallery.

Minimalist Website Galleries:

Minimal Exhibit
Our own gallery of the best websites with a minimalist design approach.

Minimalsites
Minimalsites is an up-to-date gallery with a lot of minimal inspiration.

Typography Galleries:

Typesites
Typesites showcases sites with excellent typography. It is infrequently updated.

TypeInspire
Our own typography-focused gallery. TypeInspire includes websites as well as other types of design.

Blog Design Galleries:

Blog Design Heroes
Our own gallery of the best blog designs, categorized by blogging platform.

Blog Design Lab
A blog design gallery with almost 200 sites being showcased.

CMS-Related Galleries:

CMSDesigns
CMSDesigns is a gallery of sites broken down by content management system. You can browse sites that are powered by WordPress, Drupal, Joomla, Movable Type, Typo3, and Typolight.

CMS Showcase
CMS Showcase is a gallery that categorizes the posts according to CMS.

CMS Webshow
CMS Webshow categorizes the featured sites into 20 different content management systems.

Buzz CMS
Buzz CMS currently includes over 1,000 featured sites categorized by CMS.

WordPress Galleries:

We Love WP
We Love WP is consistently updated. It’s an excellent source of WordPress inspiration.

WPInspiration
WPInspiration, run by the guys behind WPCandy, is another great source of WordPress Inspiration.

WPLuxe
WPLuxe is a similar gallery that focuses on WordPress-based sites.

WPForest
Another up-to-date WordPress gallery.

WP Float
A relatively new gallery that focuses on WordPress.

WPCount
Currently showcasing more than 300 sites powered by WordPress.

Other WordPress Galleries:

WP Cube – Not up-to-date
LoopPress – Also not up-to-date

Drupal Galleries:

DrupalSites
A large (over 3,000 sites) and current gallery of Drupal-powered sites.

DrupalSN
A Drupal social network that includes a gallery of sites built on Drupal.

Other Drupal Galleries:

Joomla Galleries:

Best of Joomla!

Best of Joomla! is a community site for Joomla! users, and it includes a gallery section.

Other Joomla Galleries:

MODx Gallery:

MODx Club
MODx Club is only a few months old and doesn’t have a huge number of posts yet, but it is up-to-date.

Django Gallery:

Django Sites
Django Sites hasn’t been updated in a few months, but there are over 2,000 sites in the archives.

Blogger Galleries:

We Love Blogger
A gallery of blogs powered by Blogger (not up-to-date)

Other Blogger Galleries:

Blogger Showcase

Textpattern Gallery:

We Love Textpattern
An up-to-date gallery with a decent number of sites in the archives.

TYPO3 Gallery:

We Love TYPO3
Not a huge gallery, but there are currently over 100 TYPO3 sites on display.

Dot Net Nuke Gallery:

dnnGallery
dnnGallery is about a year old and has more than 50 sites in the archives.

Other Galleries:

jQuery Style
Showcasing websites with excellent use of jQuery.

Light on Dark
Light on Dark showcases dark colored websites.

CSS Nature
CSS Nature features nature-inspired and environmentally-focused websites.

eduStyle
eduStyle is an excellent gallery that focuses on higher education websites.

CSS Illustrated
Showcasing illustrated website designs.

Colorgorize
Colorgorize lets you browse through the sites in it’s gallery by color.

CSS Princess
CSS Princess showcases the work of female designers. It is infrequently updated.

HTML5 Gallery
Showcasing sites that are using HTML5.

LaunchSoon
LaunchSoon is both a product to help you create a launching soon page and a gallery that showcasing launching soon pages.

For more design inspiration, please see:

20 Streetwear Blogs for Hype Shopping & Design Inspiration

911 — Fri, 17 Jul 2009 08:40:14 +0000

via：http://www.inspiredm.com/2009/07/15/20-streetwear-blogs-for-hype-shopping-design-inspiration/

Every now and then any design addict needs a break from the websites he’s on all the time, a breath of fresh air. And – as usual – Inspired Mag is here to save the day. We come up with a list of 20 absolutely inspiring streetwear blogs from head to toe. Enjoy and share others in the comments!