htaccess技巧汇总记录

自定义 RSS 链接

  1. # 自定义 RSS 链接
  2. <IfModule mod_rewrite.c>
  3. RewriteEngine on
  4. RewriteCond %{HTTP_USER_AGENT} !FeedBurner [NC]
  5. RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC]
  6. RewriteRule ^feed/?([_09az-]+)?/?$ http://feeds2.feedburner.com/catswhocode [R=302,NC,L]
  7. </IfModule>

去除 WordPress 分类链接中的“/category/

  1. RewriteRule ^category/(.+)$ http://www.yourblog.com/$1 [R=301,L]

开启浏览器端缓存

  1. FileETag MTime Size
  2. <ifmodule mod_expires.c>
  3. <filesmatch “\.(jpg|gif|png|ico|css|js)$”>
  4. ExpiresActive on
  5. ExpiresDefault “access plus 1 year”
  6. </filesmatch>
  7. </ifmodule>

拦截机器人垃圾评论

  1. RewriteEngine On
  2. RewriteCond %{REQUEST_METHOD} POST
  3. RewriteCond %{REQUEST_URI} .wpcommentspost\.php*
  4. RewriteCond %{HTTP_REFERER} !.*yourblog.com.* [OR]
  5. RewriteCond %{HTTP_USER_AGENT} ^$
  6. RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]

开启维护模式

  1. RewriteEngine on
  2. RewriteCond %{REQUEST_URI} !/maintenance.html$
  3. RewriteCond %{REMOTE_ADDR} !^123\.123\.123\.123
  4. RewriteRule $ /maintenance.html [R=302,L]

图片防盗链

(替换 mysite 为自己的网址和/images/notlink.jpg 为自己定制的防盗链声明图片)

  1. RewriteEngine On
  2. #Replace ?mysite\.com/ with your blog url
  3. RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC]
  4. RewriteCond %{HTTP_REFERER} !^$
  5. #Replace /images/nohotlink.jpg with your “don’t hotlink” image url
  6. RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

阻止指定 ip 访问

  1. <Limit GET POST>
  2. order allow,deny
  3. deny from 200.49.176.139
  4. allow from all
  5. </Limit>

带 www 跳转不带 www 的

  1. <IfModule mod_rewrite.c>
  2. RewriteCond %{HTTPS} !=on
  3. RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  4. RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
  5. </IfModule>

不带 www 跳转带 www

  1. <IfModule mod_rewrite.c>
  2. RewriteCond %{HTTPS} !=on
  3. RewriteCond %{HTTP_HOST} !^www\..+$ [NC]
  4. RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
  5. </IfModule>

禁止展开目录

  1. # 禁止展开网站目录
  2. Options All Indexes

强制 https 浏览

  1. <IfModule mod_rewrite.c>
  2. RewriteEngine On
  3. RewriteCond %{HTTPS} !=on
  4. RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
  5. </IfModule>

如何在 NGINX 添加自定义 404 500 页面

原来用惯了 Apache 里边的 .htacess 文件,感觉 rewrite 挺容易的,结果搬家后换了 Nginx 发现好多 Rewrite 不好用了。原来 .htacess 对 Nginx 不好使。必须要去手动更改设置文件来实现文件的 Rewrite 规则。因为最近老出 500 错误,我还得顺道把自定义的 500、404 之类的错误页面给弄出来,不然就会被各大搜索引擎降权。因为搜索引擎检查到你的服务器经常宕机,各个页面无法索引的话,就会降权。那么如果你添加一个 404 或者 500 页面,那么他们就会认为你给了用户一个很好的体验,而不会遭到惩罚。今天嬴冰 来教大家如何在 Nginx 里配置404、500的错误页面。

默认参数设置文件路径 /usr/local/nginx/conf/nginx.conf

1. 更改 nginx.conf 在 http 定义区域加入: fastcgi_intercept_errors on;
必须要添加:fastcgi_intercept_errors on; 如果这个选项没有设置,即使创建了404.html和配置了 error_page 也没有效果。这个开关是在 http 区域的,不是在 server 区域的,记得不要搞混,。

2. 在 server 区域添加错误页面指向
error_page 404 /404.html;
error_page 500 /500.html;

3. 将你自己制作好的404、500页面上传到网站目录即可,需要对应第2步中的路径。

当然,你想加 502、503 也可以,照猫画虎就可以了。

WordPress伪动态设置 (win主机伪动态规则)

WordPress伪动态设置规矩,301重定向设置办法(win主机)

本站空间为win主机,对于伪动态和301重定向成绩,研讨了好长期终究好了。如今同享给win主机的同窗。
win主机伪动态和301重定向都必要用到httpd.ini文件,上传到网站根目次。
(有httpd.ini文件的改动,没有的间接新建)
先上完备代码:

[ISAPI_Rewrite]
# 3600 = 1 hour
CacheClockRate 3600
RepeatLimit 32
RewriteCond Host: ^yhaow.com$
RewriteRule (.*) http://blog.yhaow.com$1 [R,I]
# Protect httpd.ini and httpd.parse.errors files
# from accessing through HTTP
# wordpress 
# For tag
RewriteRule /tag/(.*)/page/(d+)$ /index.php?tag=$1&paged=$2
RewriteRule /tag/(.+)$ /index.php?tag=$1
# For category
RewriteRule /category/(.*)/page/(d+)$ /index.php?category_name=$1&paged=$2
RewriteRule /category/(.*) /index.php?category_name=$1
# For sitemapxml
RewriteRule /sitemap.xml /sitemap.xml [L]
RewriteRule /sitemap.html /sitemap.html [L]
RewriteRule /sitemap_baidu.xml /sitemap_baidu.xml [L]
RewriteRule /favicon.ico /favicon.ico [L]
# For file-based wordpress content (i.e. theme), admin, etc.
RewriteRule /wp-(.*) /wp-$1 [L]
# For normal wordpress content, via index.php
RewriteRule ^/$ /index.php [L]
RewriteRule /(.*) /index.php/$1 [L]

WP伪动态阐明:
必要在wordpress后盾 设置→牢固衔接→自定义为 /%category%/%postname%.html
[toggle title=”牢固衔接参数”]%year%:基于文章宣布的年份;
%monthnum%:基于文章宣布的月份;
%day%:基于文章宣布当日;
%hour%:基于文章宣布小时数;
%minute%:基于文章宣布分钟数;
%second%:基于文章宣布秒数;
%postname%:基于文章的postname,其值为撰写时指定的缩略名,不指定缩略名时是文章题目;
%post_id%:基于文章post_id;
%category%:基于文章分类,子分类会处置成“分类/子分类”这类情势;
%author%:基于文章作者名。[/toggle]
[toggle title=”网上罕见的几种设置办法”]/%year%/%monthnum%/%day%/%postname%/
/%year%/%monthnum%/%postname%/
/%year%/%monthnum%/%day%/%postname%.html
/%year%/%monthnum%/%postname%.html
/%category%/%postname%.html
/%post_id%.html
本站采纳/%post_id%.html格局,这样使我感到简略[/toggle]

301重定向阐明:

以本站为例:必要把win-ice.xin重定向到www.win-ice.xin
代码以下:RewriteCond Host: ^win-ice.xin$ RewriteRule (.*) http://www.win-ice.xin$1 [R,I] 以上代码,请依据你的网站自行改动。

WordPress数据库及各表结构

WordPress应用MySQL数据库。作为一个开辟者,咱们有需要控制WordPress数据库的根本结构,并在自己的插件或主题中应用他们。

停止WordPress3.0,WordPress一共有如下11个表。这里加之了默许的表前缀 wp_ 。

wp_commentmeta:存储驳倒的元数据
wp_comments:存储驳倒
wp_links:存储友情链接(Blogroll)
wp_options:存储WordPress体系选项和插件、主题设置装备摆设
wp_postmeta:存储文章(包含页面、上传文件、订正)的元数据
wp_posts:存储文章(包含页面、上传文件、订正)
wp_terms:存储每一个目次、标签
wp_term_relationships:存储每一个文章、链接和对应分类的相干
wp_term_taxonomy:存储每一个目次、标签所对应的分类
wp_usermeta:存储用户的元数据
wp_users:存储用户

在WordPress的数据库结构中,存储体系选项和插件设置装备摆设的wp_options表是比拟自力的结构,在后文中会提到,它采用了key-value形式存储,这样做的利益是易于拓展,各个插件都能够或者轻松地在这里存储自己的设置装备摆设。

post,comment,user 则是三个根本表加之拓展表的组合。以wp_users为例,wp_users曾经存储了每一个用户会用到的根本信息,好比 login_name、display_name、 password、email等罕用信息,但假如咱们还要存储一些不罕用的数据,最好的做法不是去在表后加之一列,去损坏默许的表结构,而是将数据存在wp_usermeta中。wp_usermeta这个拓展表和wp_options表有类似的结构,咱们能够或者在这里存储每一个用户的QQ号码、手机号码、登录WordPress后盾的主题选项等等。

比拟难以懂得的是term,即wp_terms、wp_term_relationships、wp_term_taxonomy。在WordPress的体系里,咱们罕有的分类有文章的分类、链接的分类,实际上另有TAG,它也是一种特别的分类方法,咱们乃至还能够或者创立自己的分类方法。WordPress将所有的分类及分类方法、对应结构都记载在这三个表中。wp_terms记载了每一个分类的名字和根本信息,如本站分为“WordPress开辟”、“WPCEO插件”等,这里的分类指广义上的分类,以是每一个TAG也是一个“分类”。wp_term_taxonomy记载了每一个分类所归属的分类方法,如“WordPress开辟”、“WPCEO插件”是文章分类(category),弃捐友情链接的“我的朋友”、“我的同事”分类属于友情链接分类(link_category)。wp_term_relationships记载了每一个文章(或链接)所对应的分类方法。

光荣的是,对于term的应用,WordPress中相干函数的应用方法照样比拟清晰清晰清晰清晰清晰清晰清晰清晰清晰清晰清晰清晰明了,咱们就没需要纠结于它的结构了。

 

 

在上文中咱们曾经先容了WordPress数据库中各个表的感化,本文将继承先容每一个表中每一个列的感化。WordPress民间文档曾经有比拟详细的表格,本文仅对罕用数据停止先容。

wp_commentmeta
meta_id:自增独一ID
comment_id:对应驳倒ID
meta_key:键名
meta_value:键值

wp_comments
comment_ID:自增独一ID
comment_post_ID:对应文章ID
comment_author:驳倒者
comment_author_email:驳倒者邮箱
comment_author_url:驳倒者网址
comment_author_IP:驳倒者IP
comment_date:驳倒光阴
comment_date_gmt:驳倒光阴(GMT+0光阴)
comment_content:驳倒正文
comment_karma:未知
comment_approved:驳倒能否被同意
comment_agent:驳倒者的USER AGENT
comment_type:驳倒范例(pingback/通俗)
comment_parent:父驳倒ID
user_id:驳倒者用户ID(不一定存在)
wp_links
link_id:自增独一ID
link_url:链接URL
link_name:链接题目
link_image:链接图片
link_target:链接关上方法
link_description:链接刻画
link_visible:能否可见(Y/N)
link_owner:增父老用户ID
link_rating:评分等级
link_updated:未知
link_rel:XFN相干
link_notes:XFN正文
link_rss:链接RSS地点
wp_options
option_id:自增独一ID
blog_id:博客ID,用于多用户博客,默许0
option_name:键名
option_value:键值
autoload:在WordPress载入时主动载入(yes/no)
wp_postmeta
meta_id:自增独一ID
post_id:对应文章ID
meta_key:键名
meta_value:键值
wp_posts
ID:自增独一ID
post_author:对应作者ID
post_date:宣布光阴
post_date_gmt:宣布光阴(GMT+0光阴)
post_content:正文
post_title:题目
post_excerpt:摘录
post_status:文章状况(publish/auto-draft/inherit等)
comment_status:驳倒状况(open/closed)
ping_status:PING状况(open/closed)
post_password:文章暗码
post_name:文章缩略名
to_ping:未知
pinged:曾经PING过的链接
post_modified:窜改光阴
post_modified_gmt:窜改光阴(GMT+0光阴)
post_content_filtered:未知
post_parent:父文章,重要用于PAGE
guid:未知
menu_order:排序ID
post_type:文章范例(post/page等)
post_mime_type:MIME范例
comment_count:驳倒总数
wp_terms
term_id:分类ID
name:分类名
slug:缩略名
term_group:未知
wp_term_relationships
object_id:对应文章ID/链接ID
term_taxonomy_id:对应分类方法ID
term_order:排序
wp_term_taxonomy
term_taxonomy_id:分类方法ID
term_id:taxonomy:分类方法(category/post_tag)
description:未知
parent:所属父分类方法ID
count:文章数统计
wp_usermeta
umeta_id:自增独一ID
user_id:对应用户ID
meta_key:键名
meta_value:键值
wp_users
ID:自增独一ID
user_login:登录名
user_pass:暗码
user_nicename:昵称
user_email:Email
user_url:网址
user_registered:注册光阴
user_activation_key:激活码
user_status:用户状况
display_name:表现称号

Sublime Text 3 安装,注册,设置中文

最近安装了sublime text3, 为了以后安装不再麻烦, 留个笔记. 同时希望能帮助有需要的你.

(过程有点简洁,照着一步步操作就行)

下载地址

下载地址 : http://www.sublimetext.com/ (官网)

注册

点击 help -> enter Licence ,然后输入如下信息:

Alexey Plutalov

Single User License

EA7E-860776

3DC19CC1 134CDF23 504DC871 2DE5CE55

585DC8A6 253BB0D9 637C87A2 D8D0BA85

AAE574AD BA7D6DA9 2B9773F2 324C5DEF

17830A4E FBCF9D1D 182406E9 F883EA87

E585BBA1 2538C270 E2E857C2 194283CA

7234FF9E D0392F93 1D16E021 F1914917

63909E12 203C0169 3F08FFC8 86D06EA8

73DDAEF0 AC559F30 A6A67947 B60104C6

(感谢 王鹏coder 的分享 亲测可用)

安装 package control

* 按 ctrl + ~ 键,调出控制台

* 在控制台里输入:

import urllib.request,os;pf=’Package Control.sublime-package’;ipp=sublime.installed_packages_path();

urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));

open(os.path.join(ipp,pf),’wb’).write(urllib.request.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read())

然后回车.看见在preferences里有package control就说明安装成功了

//命令来自互联网,感谢前辈分享

设置中文

preferences->package control->搜索框输入install->选择install package并回车->查找chinese->选择ChineseLocalization插件

//安装后会自动把字符变为中文,可以在help里的Language设置繁体,日语或者英语

(感谢 夜窗听雨 的分享)

安装过程亲测有效,软件版本为sublime text3

以上!

JavaScript实用校验及测试工具

JavaScript 是一款强大的广泛运用于现代Web站点及应用的脚本语言。作为一个技艺精湛的 Web 开发者,掌握JavaScript可以增强用户的使用体验,提供交互及富客户端等功能。

 尽管JavaScript 的语法非常简单,但对于写程序而言仍然是困难重重,就是因为它的运行环境:基于Web浏览器。

以下您可以看到收集的7个实用的 JavaScript 测试及效验工具,它们都可以在不同环境下进行单元测试及校验测试您的脚本。

JSLint JSLint是基于Web的验证JavaScript错误代码的工具。它拥有的功能及特定的设置来使用您的需求,自定义你的验证算法。

JsUnit
JsUnit是一款在客户端(在浏览时)的单元测试JavaScript框架。对JavaScript而言,JUnit就像是它的一个端口。当然它也可以在多 个浏览器、多个机器的不同操作系统中自动运行。它的发展始于2001年1月。

J3Unit J3Unit是一个面向对象的JavaScript单元测试框架。J3Unit在网页浏览器中直接运行JavaScript的测试,也可以自动运行 JUnit 和 Jetty。J3Unit是建立在JUint和Script.aculo.us的基础之上来更好地实现自动运行JavaScript 单元测试。面向对象的JavaScript单元测试是由Script.aculo.us的Test.Unit.Runner对象编写的,基于 prototype JavaScript库。

YUI Test
YUI测试是一款基于浏览器,提供解决方案的测试框架。使用YUI,您可以方便地添加单元测试,寻求JavaScript解决方案。它是由 Yahoo! UI Library开发的一个JavaScriptMVC测试插件,能够让你模范大部分DOM动作,比如写,拖拽,比如模范AJAX响应,并且能够使用断言 (assertions)。它能够象函数一样运行,并且能够在不同的console窗口进行集成测试。虽然它不是在任何 xUnit 框架基础上开发而来,但YUI Test仍然有很多nUnit 和 JUnit的所具有的特性。( While not a direct port from any specific xUnit framework, YUI Test does derive some characteristics from nUnit and JUnit. 这段翻译得不好,但相信大致意思是对的)。

Regular Expression Tool
Regular Expression Tool(正则表达式工具)是一款在线工具,用来测试您的正则表达式代码是否正确。当您想快速测试各种文本例子的正则表达式时非常得心应手。

JSLitmus
JSLitmus是款轻量级的工具,用来测试JavaScript执行性能情况,采用直观的API。

JavaScript Regular Expression Tester
这块便利的应用程序是在浏览器中使用JavaScript来测试JavaScript正则表达式的。操作界面跟其他正则表达式测试工具无异,不同的 是,它测试的是JavaScript正则表达式在JavaScript中的性能情况。

全球首款3D浏览器-Venus(维纳斯)3D浏览器

今天在网上找资料时看到了这篇文章,3D浏览器还是第一次听说,转载过来,有兴趣的下载试试~~
Venus(维纳斯)3D浏览器号称全球首款3D浏览器。以下是Venus官网对此款软件的介绍:
维纳斯,完全自由的网络体验。维纳斯为你打造一片特别的网络浏览环境,让你在一个开阔的界面同时浏览所有网页。用维纳斯进行网络搜索,所有结果尽在眼前。

想象一下这样一种上网模式:你想找的网页和图片全部一起展示在你面前。众多网站形成一个world,而你可以鸟瞰这个world;你随时可以放大感兴趣的网页进行查看。 这就是Venus的world。

下面是Venus的中文广告,做的还不错,亮点在最后一个镜头,那个熊猫是可以立在网页上的,3D效果!!

**制作3D效果**

把平日常见的平淡无奇的网站变成眩酷多彩的生动网页;Venus的3D魔力可以把你在网上找到的任何图片显示出立体效果;而且由你自己决定具体的效果。Venus还可以帮你把视频立起来。待你创建了自己的world之后,你还可以和你的朋友共享,简单又有趣。
直观搜索

一幅图胜过千言万语。图片往往最能传达你所需要的信息——快速、便捷。我们在你的网页搜索结果里面添加图片信息,让你的搜索事半功倍。放开你的心胸,来试试这新的搜索方式吧。
就是那么简单

有没有过这样一种经历,就是你想要的一个工具,偏偏就藏在一大堆菜单、子菜单、下拉菜单里面,而你就是找不到?在Venus里面,你只需进行简单的操作便可以随时随地找到你想要的工具。看看吧,就是那么简单。
再参考下一博友的使用体验:无意中看到了一个号称自己世界第一3D浏览器的软件Venus,下载下来测试了一下,效果不错,起初用起来有点麻烦,要上手就得多用用,用来看图片什么的效果不错(驴友们更是超前开发出新用途:专用此浏览器上美女图片网站)。测试了一下自己的网站,效果还不错,颜色字体什么的看起来更舒服。推荐尝试。
下载地址:官网下载

HTML5、CS5、CS4、Web2.0风格图标制作工具-Icon Generator Pro

如果用专业的图标制作工具设计一个图标,那并不是一件容易的事情。比如现在流行的HTML5、CS5、CS4、Web2.0风格的图标制作。但我们可以利用直接生产的图标制作工具。


Icon Generator Pro是一个基于AIR开发的小程序,利用它可以轻松地制作出HTML5、CS5、CS4、和Web2.0风格的图标。你所需要做的只是调色、输入文字或者导入图像即可。个人最喜欢它的图像输入功能,比如我现在导入一个twitter的图标制作成CS5风格的twitter图标:


简单几个步骤即可制作一个属于你自己的图标。除了简单的图像导入、背景反面颜色调整、图像留白设置,你还可以进行高级编辑:设置阴影、透明度和影子等。

Icon Generator Pro导出的图标格式支持PC、Android和iOS图标三种。软件支持 Windows XP/VISTA/7, Mac OS X, Linux.

虽然Icon Generator Pro可以设计图标,但是样式有限而且受限比较大。所以如果你想设计更加个性化的图标,还是要借助更专业的图标制作工具。
#####点击下载Icon Generator Pro (另外还有在线版和简化版)附上官网:点此转到

Dieter Rams 关于优秀网页设计的10个原则

Dieter Rams是20世纪最重要的设计大师之一,其闻名遐迩的优秀设计应具备的10项原则侧重于工业设计。Lisbon的设计师NunoLoureiro把这10项原则运用到web设计中,并在这篇文章中,谈到了一些他的心得。
“我倾心于细节,在我看来,它比整体更重要。细节必不可少,它决定一切,同时它也是质量的保证。”—Dieter Rams
在大学期间,我第一次见到Dieter Rams的作品,就被迷住了,那是Dieter Rams 20世纪50年代开始为Braun设计的非凡的作品。
他能够为我们使用家用电器的方式掀起一场革命,现在我们仍然把它作为现代世界的设计灵感,最好例子就是Apple。Apple的许多畅销产品的核心功能都采用了Dieter Rams的设计原则。
Dieter Rams最著名的设计思想是优秀设计的10项原则,这些原则通常用来做出好的设计或对其进行归类。这些原则包含了在创建项目的时候设 计师需要考虑到的问题,但是这些原则最适用于工业设计,因为Dieter Rams正是在这个领域做出了非同寻常的作品,并得出了这些灵感。
这些原则并不是古板的戒律,并不是不能变通的,这些只是准则,帮助定位一个优秀的设计是什么样的。
70年代中期,Rams开始举办有关设计的讲座,并提出了六项原则,多年来他不断的改进,在80年代中期把这些原则“升级到”10项,现在仍然被人们推崇。
因此,为什么不能把这10项原则运用到像素世界中去呢?为什么不能把他们运用到web设计中去,同时讨论一下什么事优秀的web设计呢?
我通过自己在web设计领域中8年的工作经验和工业设计领域的背景学历,我虚心地把这10项原则运用到web设计中,并根据自己的顿悟使其更好的适用于web设计。

1.优秀的设计应该是创新的
第一项原则同样也是web设计的基础—创新。设计者必须注意的是,在构思优秀的web设计,创新能够起到非常重要的作用。以下是两个基本点:
1.在UI和图片设计方面,应该用创新的心态和批判性的思维对待每一个项目,并试图开阔自己的思维,发掘其它的分支。把创造力作为创新工具,来脱颖而出。
2.多和身边的新人保持交流,不管是图片生成工具还是新的编程语言,多接触这些内容
管理创新是一项艰巨的任务,因为它总是不断的变化发展,但是要一直保持开阔的思维,尝试新的方式进行创造,只有像这样你才能够有多种途径做出优秀的web设计。

2.优秀的设计让产品更加实用
何谓实用性网站,如何使网站具有可用性?
这一点描述起来有点棘手,因为在不同的人看来网站的可用性是不同,但是我想强调实用性网站的三个方面。
1有助于访客浏览网站:尽可能使访客毫不费力就找到他们想找的内容,用户界面的细节和信息的显示都能够使网站变得实用。
2 实用的内容:网站的内容是网站最有用的部分,如果不重视网站的内容,你就轻而易举地丢掉了提升网站实用性的一大法宝。
3 :实用性网站的最后一点是你怎样编码你的网站,因为你需要考虑到网站优化和性能方面,以使网站实用。

3.优秀的设计富有美感
对于一个网站来讲,美感是可视细节和实用性之间的平衡关系。一个富有美感的网站,不仅给用户提供非同寻常的体验,而且呈现出相关的内容。
单纯从面向设计的视角来看,有三点能够帮助设计者做出优秀且富有美感的web设计。
1.颜色:谨慎对待色彩方案—它们给所有页面带来馨香。你可以尝试使用不用的组合,但是需要考虑到每种颜色的含义。如果你准备给不同的设备提供不同的体验,显示器上显示出的颜色不会比纸质的或某个物件上的颜色更好控制。
2.网格、空间:在组织网站的基本结构时,你需要决定用户如何看到网站的内容—按照次序或网格,对待空白部分要尤其小心。信息的不同尺寸/对称性/次序决定人们如何解释这些内容。
3.版式:显示文本的方式和字体的选择比一般人想象的更重要,能够阅读并且强调不同的内容取决于你为网站选择的版式。

4.优秀的设计使产品更简单易懂
为了确保网站易懂,你需要清醒地意识到目的,网站为了某些目标而进行设计。你需要保证网站的易用性,对于用户来说,怎样毫不费力地达到了他们的目的。
举个列子,如果你有一家网店,目的就是为了销售,因此,你的设计要尽可能简洁,小心改进浏览商品的体验和访客退出的方式。网站最好是一目了然的。

5.优秀的设计是谦虚的
谦虚的网站必须要注意两大点:
1.单纯从面向设计的观点看,Mies van der Rohe 有这么一则非常妙的格言:“少即是多。”的确,设计师很容易在装饰和图片细节中 迷失,切记不要这样!保持内容生动易懂—访客必须尽可能理解内容传递的信息,然后理解图片的细节,尽可能营造一种浏览网页的体验,而不是让访客感觉眼花缭 乱。设计应该是中性的。
2.另一方面是辅助功能,在设计网站的时候,你必须清楚网站辅助功能的基本规则。

伦敦的设计顾问 Bibliothèque 和生产商Vits? 最近做了一张7色A0海报来庆祝Rams的10条关于优秀设计的原则。

6.优秀的设计是诚实的
何谓诚实的网站?对于一个网站来说,所谓的诚实就是要对访客保持开放的态度,总是给他们提供几个选项以供选择,不要过分地强调你的设计的重要性。
举个例子:尽可能地阐述清楚某个选项或者按钮的目的,或者使用错误提示信息来指示错误的内容。
一个诚实的网站往往会提供工具来帮助用户达到他们的目的,一系列的选择、可视的链接和其它一些暗示会给用户满足他们所有可能的需要。

7.优秀的设计经得起岁月的考验
对于网站是否经得起岁月的考验这个问题是存在争议的,但是这项原则可以毫不费力的应用到设计方面的趋势中去。换言之,web设计中总存在着最新趋势。不要只跟随潮流,而不考虑你的设计中的根本性的改变。
网站的内容必须时刻保持最新,但是主要结构应该是可持续发展的,因此使用迭代设计来增强视觉体验,使用技术来
在web设计中,“可持续”跟现实中的“可持续”有些出入。最重要的是能够使用户喜欢你的设计,你也必须一直适应自己的工作,否则,这两方面会导致要重新设计,在我们这个时代,每两年就会出现一次这种情况。

8.优秀的设计考虑周到并且重视每一个细节
这项原则,顾名思义,把你所有的精力都投入到设计中去,就像它是你生命中最重要的一部分。试图从不同的角度来探寻自己的想法,并且小心设计浏览网站的体验。

9.优秀的设计重视环境
这一点做起来有些难度,我只指出优化的方法。在你设计网站的时候,不要大幅度地减少碳足迹,尽可能保留雨林。但是你要记住几点:
1.缩减页面的规模。
2.使用经过web优化的图片
3.使用尽可能好的办法优化代码,使你的游览器使用更少的损耗正确显示你的网站。

10.优秀的设计是简洁的
最后,并且必要的一点,这项原则确定了设计的好坏—要始终谨记你想法的目的,创建透明易用的系统。在设计网站的的时候,把重点放在其主要功能上,并保持它的简洁,使用户能够更好地理解。
使内容生动地显示出来,最好的设计是你感受到的,而不是理论上你支持的。
这些原则中传达出的最重要的信息之一就是我们是为人而设计。这是我们网站的最终目的,在创建新项目的时候,我们要时刻谨记这一点。就像Rams说的那样,“设计师是用户忠实的拥护者”,我们必须创造理性,同时也是感性的作品。
随着对Dieter Rams的作品的认识,你会不由自主地感觉振奋,开始创造出惊艳的作品,不管是哪个领域中的设计。
这就是我怎么把20世纪最著名的设计师之一的这些原则应用到新设计领域来的,数字领域和web设计。

转载自:伯乐在线

英文原文:http://www.netmagazine.com/features/dieter-rams-10-principles-good-web-design

【CSS】如何精简优化CSS代码?

我们知道,在 XHTML+CSS 布局流行的今天,CSS 已经成为布局网站的一个趋势,那么为什么我们需要一个尽可能小的 CSS 文件呢?这主要是基于流量和读取速度两方面考虑。小的 CSS 文件可以节省你的服务器流量,同时缩短用户打开你网页所需的时间。既节省了流量开支,又获得了更好的用户体验,下面我们一起看看有哪些缩小 CSS 的方法。

1.简化你的注释
很多情况下,特别是曾经从事过 C/Java 等语言开发工作的程序员,可能会喜欢写多行注释,例如:
在编译语言中这样的注释当然没有问题,但在 CSS 中他们会显著的增大 CSS 文件的体积,应该尝试简化成这样:
这样在保持可读性的同时,减小了文件体积。事实上,在一个真正发布版本的 CSS 文件中,你完全可以去掉这些注释。

2.简化颜色代码
在 CSS 中,我们经常会跟十六进制颜色代码打交道。你可能习惯于写成以下“标准形式”:
color: #ffffff;
color: #ff88ff;

事实上,在 CSS 中是可以简化这个写法的,我们可以写成:
color: #fff;
color: #f8f;

3.使用单行属性代替多行属性
在 CSS 中像 margin/padding/font/border 等属性均可以用一行来代替很多行设置,例如:
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;

我们可以写成:
padding: 10px 0 10px 0;

顺序为上、右、下、左,当然,对于 margin 和 padding 属性,当左右/上下的值相同时,还可以写的更简单,例如上面的例子,可写为:
padding: 10px 0;

上下左右都相同时,甚至可以写成:
padding: 10px;

对于其它缩写方法,可以参考网上一些资料。当然,我更推荐使用 TopStyle 这款软件在写 CSS 的过程中学习,它会给出具体提示。

4.当值为 0 时可省略掉单位
例如:padding: 0;

5.同时设定多个元素的属性
举例说明。例如:
h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}

更赞的写法是这样:
h1,h2,h3 {
margin: 0;
padding: 0;
}

6.删除空白和换行
这是个很不起眼的操作,但对于脱离了开发阶段,而要应用在网络上的 CSS 而言应该进行这样的处理,至少 Google 所有应用都是这样做的。举个例子:
h1 {
margin: 0;
padding: 0;
}
blockquote {
background-color: #ffcccc;
}

应该处理成:
h1{margin:0;padding:0;}
blockquote{background:#fcc;}

事实上,在 CSS 文件中可以不需要任何换行的。但是为了保持代码那么一点点可读性,我还是比较建议每个元素写成一行。现在可以利用一些工具来进行类似的操作,因此它将不会影响你的开发过程。

7.设定过期时间,使用 GZip
如果有条件的话,我们应该设定 CSS 文件的过期时间,并开启 GZip 来传输 CSS 文件。设定前者可以让流行的浏览器缓存你的 CSS 文件,从而避免每次 Load 都要读取文件,大大加快速度同时也降低流量消耗。而开启 GZip 则可以让你的 CSS 文件缩小的难以想象的程度,而且如今流行的浏览器都是支持 GZip 的。