载于《程序员》杂志09年第12期。

 婚姻警句——《神秘的程序员们》系列漫画

这个系列的漫画讲述程序员——这种神秘人类的囧事,故事多来源于我身边的程序员朋友,且以互联网开发背景为主。

如果你有什么可乐的关于程序员的故事、对话、代码,愿意通过漫画的形式分享,请给我发邮件。arthur369@gmail.com

从10月2日开始的“每日设计三推”计划。以web设计为主,兼之前端技术、平面、矢量、摄影以及素材。来源都是国外的blog。虽然都是英文的,但基本图像就可以说明一切,所以英语不好的同学也不用有负担。标签为#3dt

我的tw帐号:arthur369 。现在可登录tw的第三方是http://dabr.nl 。欢迎大家follow。

另外由于tinyurl类网站被大规模封锁,为方便持续登录,将tw中的短网址都在这里装换为原文的永久链接。点击英文标题或图片都可直接访问。
—————————————————————————————–

Interview With Digital Artist Ferdi Rizkiyanto aka Pepey

Pepey.是来自印尼著名平面设计师,他关于温室效应的招贴设计全球闻名(有沙漏的那幅)。他的作品中既有激动人心的创造力,又具备无与伦比的细节。在一些广告设计中使用的三维+灯光造型,制作出液体造型的质量是同类手法中的佼佼者。他生于岛国,从小迷恋科幻,作品总是带着迷人的魔幻气质

30 Web Designs with Amazing Attention to Detail

web设计中值得特别学习的细节。渐变和细节修饰的运用是赋予页面质感和层次感的不二法门。富有立体感的折角,细微的渐变和边缘处理,不易察觉的阴影,单像素高光。,这些可能不被留意到的细节设计在随时影响用户的感观:对网站品牌的理解,对设计质量的享受。

Comic Sans: The Font Everyone Loves to Hate

有意思的文章: Conmic Sans——一种人人痛恨的字体。作者分析了为什么微软的默认字体Comic sans 变得令许多设计师恨之入骨,因为其幼稚、不专业、不适合大部分场合……(有专门的反comic sans网站,和反IE6一样),它的历史(原本是为漫画对话设计的),典型的错误用法(正式场合,正文,标语)以及建议的替代品(它果然是最差的一个)。

35 Fresh & Outstanding Portfolio Websites for Your Design Inspiration

Protfolio site 指的是公司、创作者的作品及个人信息展示网站。这是设计师自己的地盘,当然大有可为。 更少的限制带来更多的个人风格色彩。本辑中列出了35款新鲜设计,承受了较少的内容展示负担,这些设计都显得非常轻盈优雅。

40 Textured Websites for Design Inspiration

在web设计中应用纹理背景?貌似是15年前的老土做法了? NO,不要当outman。纹理早已重新成为潮流,让页面增添质感、趣味、变化和个人色彩。诀窍就是用得更自然,更微妙,更隐晦。

30 Plus Fresh Typography Designs

Typography Designs是一种历史非常悠久的设计门类,伴随着书籍的诞生以纯手绘的方式出现,当然现在有了数字艺术的辅助。。以文字为绝对主角,辅以装饰花纹,立体,变形,纹理、排列等等,这是一种追求唯美的游戏,单纯的规则,不凡的力量。robertoblake.com是一个长久关注该类设计的网站。

34 Bodacious Folded Brochure Designs

34款出类拔萃的折页设计。印刷精良,形状奇特的彩色折页总能令人爱不释手,也减少了作为一个广告品被扔进垃圾桶里的几率。折叠具有天然的对称和立体感,在对比、材质、空间变换的魔术技巧上,总是大有文章可做。

Typography Inspiration Showcase

惊人的Typography design作品。前两天已经介绍过typography design了。这辑更强。感兴趣的同学可以持续关注http://typeinspire.com/

100 Premium Like But Free, Fresh WordPress Themes: Year 2009

比较惊人的一辑。作者花了不少时间精选出2009年免费模版中的100个上乘之作。里面有许多的设计和框架都不落俗套。使用WP模版的同学们还是尽快bookmark它吧。

25 Amazing Flash Portfolio Sites

25个令人震惊的flash Portfolio网站设计。 好的Flash Sites总是不会过时,设计师和客户有无穷的理由喜欢它。可以和平面设计媲美的大开大合的布局,令web设计师艳羡的全幅图片,交互和动画中的速度感、物理缓冲和无数可能性, 带给用户无限的惊喜和冲击力。所以漫长的载入缓冲和找不到可点击区域的尴尬……忍了把。


25 Examples of Mega Menus in Web Design

25例 海量下拉菜单设计。电子商务网站中经常会遭遇一个菜单项下面的二级菜单里有数量惊人的类目,如何处理棘手的菜单项,希望本文对你有所启发。


35+ Free Photoshop Brushes for Christmas Season
专为圣诞节准备的35款免费的PS笔刷设计。帮助你轻松面对应景题材,闪光、各自漂亮的雪花,还有传统的圣诞装饰物形象,看到了它们后你会想要尝试的。

50 Ultimate Useful Free Mac Apps for Graphic and Web Designers

mac平台上为web和图像设计师准备的50个终极应用。一张非常强大的菜单,而且关键:这些应用都是免费的(除了极个别)

Principles Of Effective Search In E-Commerce Design

全面指南——如何有效地设计电子商务网站搜索。搜索是电商成功的关键因素,本文探讨了包括 壁垒、有效性、分类、信息架构、高级搜索、沟通、分组、控件……在内的问题


44 Marvelous Sites Powerd by Drupal 44个使用Drupal系统搭建的不可思议的网站。

Drupal是一个和WP类似但比它庞大得多的开源自助CMS系统。拥有及其灵活的架构,可以用于搭建出任何类型的web应用。但也是它的繁复压制了它

Audrey Kawasaki’s Creative Workspace

Audrey Kawasaki 是一位在洛杉矶长大的日本艺术家,她从日本漫画中获得灵感,在木板上直接用油彩中描绘富于日本气质的年轻女孩,她们性感,美丽,优雅和忧伤。在潮湿温热的气息中被花朵和群鸟围绕。木质的纹理和颜色和亚洲人象牙黄的肤色融合在一起,浑然天成。

Famous Redesigned Logos of 2009 – A huge roundup!!

2009年做出重大变更的LOGO设计。可以看出这些历史悠久的LOGO是怎样感应新的设计风潮。它们修改的方向:更轻盈,更清晰简洁,表现真实的立体感,金属质感变得流行,渐变的运用更柔和。个性化色彩更强。

A Collection of HTML5 Resources and Tutorials

HTML5的资源和技巧 集中营

34 Inspiring Red Logo Designs – It’s Christmas time!!

34个红颜色的LOGO设计。圣诞节近了,希望大家能从红色这种喜庆的配色里找到节日主题设计的灵感。

Logo Design Inspiration: 70 Creative Fresh Designs

70个灵感创意logo。logo设计不应该是冷冰冰而抽象的,越来越多的logo设计得有人情味,并使用了具体的形象便于人们记住品牌名称。概念和形象的嫁接和移植中体现了非常高超的创意

The Funniest T-Shirt Designs of the Decade

10内最有趣的T恤图案设计。以反讽手法居多,其中很多有geek精神。

当朋友拜托你给他的公司或产品做一个简单的网站。或者你刚刚发布了一个软件,需要一个官网。或者想给你的WP blog加一个首页。。

Berita是一个专为此类需求设计的免费theme。较之于同类产品,它同时为了增加定制化程度还改造了wp系统,使用上更类似插件。只要掌握简单的html+css,就可以随意对页面进行改造。灵活度和拓展性在同类中是佼佼者。

下图是我昨天使用WP+ berita改造的网站。(这个网站主要是为了方便演示,里面的部分icon和图片有版权问题,请勿直接使用)

这是berita官网的demo

在此处下载我改造过的版本。(修改了css,header.php以及图片文件)

此处下载官方原版。官方地址:http://bizzartic.com/bizzthemes/berita/download/

我缩小了原版的header区域高度,在search框上方增加了一组url。添加了一些底栏版块的样式。

具体如何使用berita的插件系统,我会在下面详细说明流程。并放出我的代码。

————————————————————————————————————————————————————

首先,像安装所有theme一样,解压包放置在wp-content/themes,并在WP左侧菜单 Appearance – Themes 里启用该theme。

接下来看见的界面是这样的。。。空空如也。不要失望。还有大量的定制化和手写代码工作要做。

在左侧菜单的Appearance里可以发现多了一项Berita Theme Options .这就是定制系统。如下图。我做了粗略的说明。

Berita简单的工作原理:

一个简单的企业站是有一部分静态页面和一部分动态页面来共同构成的。诸如about us ,contact us ,service, feature, customs 之类不经常变动的页面直接写成静态html页面。 news,case 之类会需要更新维护的动态部分使用CMS系统来生成。

Berita 使用WP里的pages 来制作静态页面,用posts来制作动态部分。实际上pages和posts都使用同一个编辑器,在编辑代码时没有什么差别。

所以下面先来创建一些pages,一些posts和几个categories,来作为“建筑材料”。

有了材料,我们就可以组建首页了。

第一步:设置LOGO

在此处设置Logo图片。如果勾选Show Blog Title+Tagline,则logo图片不再生效,而直接显示blog title和tagline的文本。

第二步:首页导航。

创建完pages后,导航上会直接出现链接。可以在Berita Theme Options 去掉你不希望显示在导航上的page。

在Blog Section Settings 设置一个放在导航上的post 分类。链接到Categories页面。适用于”公司新闻”或者“产品的blog”

这里只允许设置1个。系统建议创建一个Category 名叫 BLOG ,然后把其它所有分类都设为它的子分类。这种做法适合想给blog加个首页的用户。

还可以设置在footer区显示的文字导航

还可以设置多级导航。在edit page的时候,将右侧的的Attributes – Parent 设为对应页面,就可以在导航里自动出现

我在搜索框上方加了几个about | contact的入口。在Appearance – Editor – header.php里可以修改链接和文本。在<div id=”search-spot”>下方加上

<p><a href=”http://clentrust.com/about” title=”About us”>About</a> | <a href=”http://clentrust.com/contact” title=”contact us”>contact</a> | Join</p>

第三步:首页的滚动推荐区(Front Slider)。

Berita系统中,这部分也是利用Pages来完成的。创建几个pages,有无title都可以。

然后如下图中设置page的id及排序。

这个区域的高度可以在Pick Height里设置,页面中超过该高度的部分不会显示。

下面的代码大家可以直接使用:注意要更换img时,要把class 改为class=”fr” (也就是float right的意思,完成图片的右浮动)

<div class=”slider-post”><a title=”Sample Slider Page”><img class=”fr” title=”1″ src=”http://clentrust.com/wp-content/uploads/2009/11/1.jpg” alt=”1″ width=”350″ height=”250″ /></a>

<div class=”slider-title”>Sample Slider Page</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra.<a class=”btn” href=”#”>view more</a></div>

第四步:底栏的3个版块。

在Appearance-Widgets菜单里,我们可以发现左边的可选widget窗体多了好几个以Bizz开头的。

右侧的Current Widget也从单一的Sidebar,增加了6组Footer。

Front Footer: 控制静态页面(首页和pages)底栏的3个版块区域

Blog Footer: 控制动态页面(posts 和 categories) 底栏的3个版块区域。

像设置传统的sidebar一样,只要将所需的窗体从左侧拖拽到右侧对应栏目里,可添加多个,并排序。

一般都是使用添加text窗体,在里面添加代码来进行页面的自定义。

下面的代码直接用,图片不要用了。___________________________________________________________________

<div class=”collumnblock”>

<div class=”itemtitle”>

<div class=”itemicon”><img width=”71″ height=”63″ alt=”Influencers” src=”http://www.dialogix.com.au/images/IconInfluencers.gif”/></div>

<div class=”text”>

<h2><a href=”features.html”>Find Key Online Influencers</a></h2>

</div>

</div>

<p>No other social media monitoring tool finds key influencers, ranks their social authority and charts sentiment as well as Dialogix…</p>

<div class=”itemtitle”>

<div class=”itemicon”><img width=”71″ height=”63″ alt=”Resellers” src=”http://www.dialogix.com.au/images/IconResell.gif”/></div>

<div class=”text”>

<h2><a href=”features.html”>Available for Agencies</a></h2>

</div>

</div>

<p>Offer Dialogix to your clients with your own branding. Generous re-seller packages are available…</p>

</div>

________________________有6个客户logo小图的代码__________________

<div class=”collumnblock2″>

<h2>Who’s already using Clentrust</h2>

<div class=”companysquare”><img width=”58″ height=”51″ alt=”Parmalat” src=”http://www.dialogix.com.au/images/LogoParmalat.jpg”/></div>

<div class=”companysquare”><img width=”58″ height=”51″ alt=”Ice Break” src=”http://www.dialogix.com.au/images/LogoIcebreak.jpg”/></div>

<div class=”companysquareend”><img width=”58″ height=”51″ alt=”ABC” src=”http://www.dialogix.com.au/images/LogoABC.jpg”/></div>

<div class=”companysquare”><img width=”58″ height=”51″ alt=”Royal Childrens Hospital” src=”http://www.dialogix.com.au/images/LogoRoyalChildrensHospital.jpg”/></div>

<div class=”companysquare”><img width=”58″ height=”51″ alt=”Breaka” src=”http://www.dialogix.com.au/images/LogoBreaka.jpg”/></div>

<div class=”companysquareend”><img width=”58″ height=”51″ alt=”Praemium” src=”http://www.dialogix.com.au/images/LogoPraemium.jpg”/></div>

<div id=”testimonials”>

<p>“Dialogix has given us insights that have changed the way our clients do business.” <strong>Remy Brassac, Gallery De Pasquale<br/></strong></p>

</div>

<p><strong>TEL: 086+12345678<br/>Mail: support@clentrust.com</strong></p>

</div>

__________________________________________________________________

Berita系统支持在widget里添加 twitter和flickr。配置非常方便

设置广告:

Berita 可以方便地在动态页面的侧边栏放置广告。支持两种尺寸。1个 320*250。或是几个125*125. 设置见下图。

125的广告支持放3组(6个)。也可以只放1组或2组。要勾选图示红框。

其他特色:

  • 支持最受欢迎的posts,好像是按评论来排序的。
  • 支持相关文章
  • 支持设置第三方订阅源及邮件订阅。
  • SEO设置
  • 它的分页也很友好

随便提两句和样式有关的。

这个系统使用的960Grid的css系统。

导航区的驼色背景不是写在css里的,是使用bgr.png。

一大张背景图。推荐一个压缩png的网站 http://www.gracepointafterfive.com/punypng 。在基本看不出来损耗的状况下,压个20%还是没有问题的。

Debug

这里有muzik
《Wordpress主题berita几处修改记录》可以看看

其他推荐

对此类theme有兴趣的同学,我再推荐两个不错的。适合更复杂的business网站或blog。

官方下载 VIEW MORE

官方下载 VIEW MORE

从10月2日开始的“每日设计三推”计划。以web设计为主,兼之前端技术、平面、矢量、摄影以及素材。来源都是国外的blog。虽然都是英文的,但基本图像就可以说明一切,所以英语不好的同学也不用有负担。标签为#3dt

我的tw帐号:arthur369 。现在可登录tw的第三方是http://dabr.nl 。欢迎大家follow。

另外由于tinyurl类网站被大规模封锁,为方便持续登录,将tw中的短网址都在这里装换为原文的永久链接。点击英文标题或图片都可直接访问。
—————————————————————————————–
《Ultimate Dark Package Design Inspiratio

乔布斯一直着迷于包装设计,将其视为用户体验的一部分。包装设计传达产品的理念、价值及品牌的本质。用户在拆箱过程中得到的惊喜和愉悦是他们探索产品的良好开始。

《Spectacular Illustrations of Spider-man》不同艺术家笔下的蜘蛛人。

高空、翻跃、紧身衣。展现力量、动感和平衡的人体,再加上怪兽,这是男性艺术家梦寐以求的题材。

《Wonderful Illustrations of the Wizard of Oz

观察不同艺术家为同一题材创作的艺术品是非常有趣的事情。尤其是描绘想象中情境。这里搜集了一批非常精彩的插画,都是描绘《绿野仙踪》。少女、狮子、铁皮人和稻草人一路同行。充满了各种温馨和想象力。

《Wonderful Illustrations of Alice in Wonderland》 风格迥异的《爱丽丝漫游仙境》插画。

从东方风格到西方,从写实到极度抽象,来自各地的艺术家塑造出了这部西方著名童话中性格各异的角色形象:小萝莉,大猫咪,女王人,小丑,各式怪物和想象种的仙境场景。

《The Craziest of Creatures

这是一组非常可爱的插画。一堆毛蓉蓉的“冒名顶替”或神秘错接的动物。特别是下面这张《大坏吃兔子》

《Amazing Colorful Sunset Photography 颜色惊艳的落日摄影》

说到色彩搭配,恐怕没有人能超过大自然。落日的橙色和暮时天空的蓝色形成层次优雅,极为优美的补色对比。在卓越的摄影作品中,我们可以学习到大量的配色、渐变和构图技巧。

《Fabulous Street Photography Inspiration 》来自穷街陋巷的摄影灵感

街道和深巷是一个容易入手又表现力无穷的题材。不仅仅是由于强烈的透视给构图带来的冲击力,还来自于对闲散生活和真实情态进行定格而形成的动感。对于摄影而言,最难和最容易都是捕捉“自然”的一刻

《illustrations by steve mcghee

Steve McGhee 是一个加拿大插画艺术家和设计师。他最拿手的题材是用ps制造灾难场景。如空难、雪灾、大洪水、漩涡。使用想象力和拼接手法 借以一己之力完成《后天》或《2012》里昂贵而震撼人心的镜头。从他的历史作品中来看,他真是完成地越来越酷了。

《50 Fresh Interactive Studio and Social Media Agency Websites 》50个新鲜的交互工作室和数字营销网站的设计。

大型广告或公关公司创建了数字化营销部门已经成为潮流,大量设计或开发工作室为广告主们提供差异化营销的广告方案。这里列举了50个杰出的交互广告工作室、数字营销或在线公关 网站。他们的设计风格都非常摩登,宽布局,幻灯片,浮动文本,大header去设计,平滑的首页动画,还有TW,facebook之类的社会化媒体元素。

《40+ Extremely Beautiful Icon Sets Hand-picked from deviantART

从deviantART 搜集的漂亮icon

《Calligraphy and Handwriting Showcase》

英文手写美术字体设计。英文字体的简单造型和流线型笔画,比中文更适合进行美术字体设计,风貌也截然迥异。

《40+ Absolutely Stylish & Creative Hand-picked Wallpapers

创意和风格壁纸精选 质量很高的设计素材

《River North Dance Company Ads》 一组效果比较猛的广告

《Ten Simple Rules for Choosing the Perfect CMS + Excellent Options

选择cms系统是你建站的第一步,正确的选择可以大大提高你更新维护网站的效率。本文列举了10条选择原则,并精选了10个出色的cms系统。产品设计师们应当熟悉这10个经典的后台系统。

《The Ultimate Ugly Showcase of Current Government Websites

最难看的政府网站。 看了那么stylish、createive、inspiration 的list,今天居然看到了一个 ugly的。里面中国和香港都有当选哦。

《250 Christmas Icons to Decorate Your Blog 》应景素材——250个装饰你网站用的圣诞icon

《Amazing Paintings from Leonid Afremo

Leonid Afremo 是出生于1955年的白俄罗斯画家。他的画作个人风格十分强烈:颜色饱满明亮,富有光感和立体感强烈的厚笔触。从浮雕般的画布表面上,仿佛能看见画家是如何在厚厚的油画颜料上游走着调色刀,创作出天才的配色。

《illustrator shonei otomo

我靠 这个插画师太无语了。。。日本恶搞变态色情暴力审美集大成者。。。他他他居然还把《渔人妻子之梦》改成了SM题材的

《32 Years In the Life of Alison by Jeff Radcliffe 》分分钟年华老去

一位父亲用黑白相机记录了他女儿32年内的变化。黑白胶片统一的成像画质和风格,许多照片仿佛就是昨天拍摄,被压缩的时间令你更清晰地观察岁月流逝是如何作用。从剪断脐带到迷茫的少女到伤感的少妇。你真切地看见时间的流向,预见一个女人的成熟和老去。

载于《程序员》杂志09年第11期。

 部门会议——《神秘的程序员们》系列漫画

这个系列的漫画讲述程序员——这种神秘人类的囧事,故事多来源于我身边的程序员朋友,且以互联网开发背景为主。

如果你有什么可乐的关于程序员的故事、对话、代码,愿意通过漫画的形式分享,请给我发邮件。arthur369@gmail.com



Copyright © 2007–2013. All rights reserved.

RSS Feed. powered by Wordpress a theme by Xiqiao.