前端开发必备!在Sublime text 3里安装Emmet!

看清楚~~这是Sublime text 3版本,经过测试安装没问题。

先关闭Sublime text 3:

第一步:下载sublime_package_control-master,解压命名文件夹为Package Control。(一定要注意大小写)

第二步:下载sublime_package_control-python3,解压后覆盖到刚刚的Package Control中,完成插件API函数的更新。

第三步:打开Sublime Text 3,选择菜单:Preference–>Browse Package… 浏览插件

第四步:把Package Control复制到此目录,重启 Sublime text 3。

然后菜单Preferences就会多了两个Package..的东西如下: Package Control 安装成功

第五步:

点击菜单Preference–>Package Control

点击Install Package

等待几秒后再弹出如下内容,敲键盘emmet,选择如下:

在 Emmet 安装完成后,会显示如下屏幕:然后会自动安装PyV8,安装完成,重启 Sublime Text 3。

 

如果搜索框没有emmet相关内容,恭喜你,你被墙了。还有个解决办法,那就手动把emmet插件放入第三步打开的文件夹,点这里下载emmet-sublime-master

 

测试:

重启之后还会看到左下角再次呈现 Loading PyV8 的提示,待其载入完毕,打开一个新文档最后测试,输入指令(不行就再重启一下)

ul#test>li*4

按Ctrl+e 生成

完工!

20 步打造完美网站布局设计

Claudio Guglieri 在纽约广告公司 B-Reel 任职总监,他撰写了本网站设计培训指南,旨在帮助您了解设计网站布局的全过程。

开始讲述设计网站布局的主题之前,我想先分享自己多年从事设计工作中看到的一些常见错误,尤其是实习生和新手们的通病。

本文罗列了打造完美网站布局的步骤,旨在涵盖开始新项目前以及项目设计过程中的各项应知应会,适合所有网站设计师新人阅读。

以下原则不仅包含各种设计细节,还提供了常规工作流程,从而帮助您出色地完成工作。遵循这些原则,您很快就能上手,设计出专业的网站布局。

 

01. 先在纸上整理思绪

 initial sketch

世界各处城市插图系列简笔

此条显然很重要,但是我经常发现一些设计师会跳过这步直接使用 Photoshop CS6而不去思考他们需要解决的问题。设计的目的在于解决问题,而这些有待解决的问题无法通过渐变或阴影效果得到解决,而是需要完美的布局和清晰的结构。想一想内容、布局和功能,然后再开始上阴影效果。

 

02. 从顶层框架草图入手

 UX sketch

草绘基本的框架将帮助你解决 UX 问题,并组织布局结构

如果我要做一个项目的外观和感觉,第一件事就是先建一个顶层框架,可解决所有设计问题。框架是指内容周围的 UI,有助于执行操作并进行浏览。其中包括导航和各类组件,例如边栏和底栏。

如果你从这点着手设计,则设计主页以外的部分时,布局内容将了然于心。

 

 

03. PSD 添加网格

 grid

以 10 像素基线绘制的 978 网格示例

这步操作非常简单。在 Photoshop 中着手设计任何内容前,你需要创建一个合适的网格。这一步的道理众所周知,如果你没有这么做,我可以断言,最后的设计总是无法尽善尽美。

借助于网格,你能安排不同部分的布局结构;还能指导你按照特定屏幕尺寸要求进行设计,并能帮助你创建相应的模板,以便符合间距和其他设计问题。

 

 

04. 选择排版样式

 typography

根据常规经验,一个网站布局中所用字型最好不要超过两种

了解不同的字型和配色是项目开发阶段的工作。我建议一个网站中所用字型不要超过两种,不过实际上,还需取决于你可用的色系。总之,所选字体需便于阅读大量文字,且与标题和操作相映成趣。大胆使用大字体,并在使用字型时保持整体一致性和生动感。

 

 

05. 选择主题颜色

 colours

使用有限的色阶和色调以免产生视觉疲劳

选完要使用的一系列字型后,你应开始研究 UI、背景和文本该用什么颜色。关于颜色,我建议在处理常规用户界面是用色及色调需简洁。

根据元素功能在设计 UI 时保持一致性非常重要。想想 Facebook、Twitter、Quora 和 Vimeo 之类的网站布局。除 UI 外,插图或图形细节部分只要没有干扰组件功能的话,在用色方面也没什么限制。

 

 

06. 划分布局

 B-reel homepage

网站结构越简单,用户浏览时就越方便

网站各个部分都需要发挥各自的作用。对于用户而言,每个部分都有各自存在的理由,并能得到相应的最终结果。布局需要帮助强调其内容着重显示该部分最重要的信息。实际上,一个页面并不需要太多调用按钮,因此每个内容都应推动到最终“我可以在此实现什么目的”。

思考一下,你可以为一个简单的目标构想到的最简单的布局,并开始添加所需组件。最后你会惊喜的发现简洁也并非易事。

 

 

07. 重新思考已建内容

 search button

我们真的还需要一个搜索按钮吗?在大多数情况下,答案是不。

作为设计人员,我们构建了用户浏览互联网的方式,需要采取多少步骤才能执行一个简单的操作以及网站的复杂性都是由我们来决定的。我们一直都在遵循一 些设计模式和惯例,因为它们切实有效,但有时候只是因为没人有足够的时间进行衡量或者重新思考。重新思考组件上已建的交互模式,并看看是否可以进行改进, 这点至关重要。

 

 

08. 自我挑战

我鼓励每位设计人员不要墨守成规,而是在每个项目上进行自我挑战。并非每个项目都要求创新,因此,需要我们自己决定是否要增加一些交互设计相关的内 容。比如,各种自我挑战可能包括使用新的网格系统、创建新的组件,或者甚至包括一些小挑战,诸如避免混合模式或者避免使用特定的颜色。

 

 

09. 注意细节

 game work in progress

正在进行的游戏项目:细节视图

这条也算是老生常谈了,但并非始终在成品中得到应用。根据项目的概念,“关注点”也会有所不同。

可以注重小型交互、意想不到的动画或审美感受,例如按钮上的小渐变或是背景盒子周围的微妙笔画之类。但是总的来说,如果你乐在其中,这种感受非常重要,而且非常自然。

 

 

10. 认真对待每个组件,就当参加设计比赛

 video component

注重每个组件,一加一大于二

我必须承认这并不是我首创的理论。过去曾在 Fantasy Interactive 上听到这种说法,当时我就震惊了,这句话如此明确中肯。每个组件都需单独设计,使其卓绝超凡。有时候,设计师会将一些部分归为最不重要的内容,最终并不会对其引起重视。

 

 

11. 提高设计作品清晰度

 blurry pixels

避免出现像素模糊的现象,尝试正确设置笔触效果和背景之间的对比度或背景颜色

除美学考量之外,有些共同的问题需要予以避免,从而创造出一个干净正确的作品。尝试提高设计清晰度时应注意以下几点:梯度条带、模糊的边缘、字体渲染选项(部分字体取决于字体大小,最好在特定的渲染模式下查看)以及与背景融合的笔触效果。

以上列出了一些基本注意事项,但实际上需要注意的问题还有很多。务必以整体视角检查设计,看看是不是都非常完美,然后再单独分析每个组件还有什么问题。

 

 

12. 整理 PSD

如果你通过 Photoshop 进行设计,那么这点至关重要(结合网格使用)。无论项目有多大,有多少设计师参与其中,你都需要保证文件干净。这样就能保证不同部分都能轻松导出,从而提高设计流程的速度,并能处理与其他设计师共享的文件。

 

 

13. 设计最好的情况,但为最坏的情况做准备

 

 Clear app

谨记不同设备和尺寸大小上如何让你的设计发挥作用

作为设计师,我们的工作就是通过不同的限制解决问题。网页设计过程中,会遇到各种限制,包括概念和技术问题以及内容相关的问题。

我们需要创建一个网站,其不仅可以在理想状态下运行,同时也可以在最糟糕的环境下运行。例如,用户可使用相当小的屏幕查看网站,此时网站上的内容看起来支离破碎。

但是,鉴于我们展示设计作品的目的,我个人强烈建议为其创建最佳环境。因此我们将要显示最理想的内容量,同时以最佳浏览器尺寸进行展示,也就是用户最常用的环境。

 

 

14. 沉迷于设计,因爱生恨

如果你钻研设计,我保证你已经干过这种事。只要完成一项设计就会倍感自豪,设计已经成为生活的一部分了。还会截图,与其他设备比较,将其设为桌面背景,甚至打印出来挂在墙上。

整个过程中,我达到某个临界点,最终产生厌恶;我开始发现各种缺点和错误,然后进行修改。不喜欢自己以前的设计是成熟的表现,也就是说,你最终发现自己的问题。

 

 

15. 与客户交流前避免浪费太多时间设计概念

提交交互概念或设计外观与体验时,你需要确保你和客户尽快同步。初始概念通过审核后,你可以稍作放松,然后开始设计。

但是如果提交后初始概念后,并未深得客户的欢心,你就应该收集各种反馈,以便第二次提交的概念方案能够符合客户的要求。

 

 

16. 和你的开发者成为好友

 developer Rafael Mumme

纽约广告公司 HUGE 的 Rafael Mumme 就设计师如何更好地与开发者合作的提出的建议,请访问 www.netmagazine.com/opinions/20-things-drive-web-developers-crazy

开发者创意十足,而且热爱自己的工作,和你一样。但是他们并非总是在项目一开始就参与其中,而且大多时候,他们都是在概念设计敲定之后才开始参与设 计的,因此他们的创意工作就遭到了抹杀。这种流程是错误的;一些非常优秀的想法都是开发团队提出的。分享你的概念,你会惊喜地发现他们会把它变成更加美 观、更加便于设计。

 

 

17. 展示:说明时请将受众想象为四岁儿童

展示作品和设计作品一样重要。使用错误的展示方式,可能会埋没优秀的设计或者使其惨遭淘汰。谨记,受众第一次看到你的设计时,并不了解你了然于心的各个重点。

 

 

18. 肯定自己的创意,但不要成为其奴隶

了解何时宣传自己的创意,或是了解团队或客户何时会产生分歧,这里存在一个小小的临界点。作为设计师,你需要坚信自己的设计,但是你也应乐于接受他人意见,快速改变自己的创意以及展开后续调整。不要忘记条条大路通罗马。

 

 

19. 开发过程中跟进设计

如果您在广告公司中工作,你必须明白,虽然你刚刚完成的一个项目已经投入开发,你不得不参加另一个新项目的设计,这是家常便饭。大家普遍认为 PSD 和样式表提交后就万事大吉了,这是不对的,其实一切还刚刚开始。

如果你真的关心自己的设计和交互理念是否完全贯彻,可以实时与开发者友人沟通,并尽量提供帮助,以便达到至臻至美的效果。

 

 

20. 逐步正在设计的作品

 style sheets

与大家分享样式表和正在设计的组件

作为设计团队的一员,我们不仅希望看到最终的成品,同时也想看一看正在设计的作品。有时候,出于种种原因,项目最优秀的部分可能会被忽略,然后一直 存放在归档文件夹中。项目完成并获得客户/制作方认可后,可以着手进行改善,如有可能,可以创建案例研究,分析设计中的作品以及最终并未采用的作品。这有 助于帮助拓宽团队知识,同时你也能收集宝贵的反馈意见。

 

Claudio Guglieri 目前在纽约国际电子广告公司 B-Reel 就任艺术总监。之前在 Fantasy Interactive 任艺术总监,负责领导和制作客户端交互体验,如 Google、EA CNN、Nikelodeon、History Channel、Range Roverand Microsoft

 

微信为什么会成功?

 

有时候判断一个互联网产品的成败,你都不需要看数据,只需要看看周围人就可以了。最近,我发现周围几个和我一样上岁数的人都开始用微信了,我知道这已经是一个非常成功的产品了。

当然,我还是去查了一下公开数据:截至2011年11月,微信的注册用户已经超过5000万。这是个可以给米聊很大压力的数字。米聊是初创公司小米科技在微信之前推出的一款类似产品。这似乎是过去几年数亿故事的再次上演而已——一个新的互联网产品兴起之后,后加入进来的腾讯往往会最终抓住机会。

对于这样的故事,一个惯有的思路是,腾讯是一个大公司,拥有小公司所没有的资源,而QQ聚集起了庞大的有粘性的用户群,所以每每能够成功复制新的产品和应用,而且影响到了小公司的生存空间,进而扼杀了创新。

如果你了解一下美国互联网的竞争路线,你就会觉得这种思路有问题了。Skype同腾讯一样聚集了数以亿计的即时通讯用户,也同样拥有很高的用户粘性,但Skype最终沦落到了一个被数次出售的境地;Google、雅虎也拥有庞大的用户群,也曾经什么都去尝试一下,但极少有成功的模仿产品。

那么为什么腾讯能够做到呢?

懂产品 从模仿的角度来说,腾讯是一个很懂产品的公司。这使得腾讯模仿的每一款产品都能够稳定在一个既定的水准上,类似那种工厂化的产品开发。这使得腾讯在产品层面上不会出太大的问题。对于其他大部分也是模仿国外应用的小公司来说,要达到类似的水准其实需要更长的磨合期。

微创新 微信和米聊最初的模仿对象其实是kik,但后来随着微信的发展,你会发现其实更像是Color。Color最初的定位就是那种典型的陌生人交往应用,微信从陌生人交往的角度做出了一系列小的创新功能,如漂流瓶、摇一摇、查看附近的人、秀二维码等。正是这些创新的功能真正让微信的用户激增,而不是仅仅依靠与QQ和QQ邮箱的互通。

执行力 作为一个大公司,腾讯在新产品上的执行力似乎并不逊色于初创公司。2010年12月10日,米聊发布Android版,12月23日,发布iPhone版;2011年1月12日,发布Symbian版。微信2011年1月24日发布iPhone版;27日,发布Android版;29日,发布Symbian版。去年一年,微信共发布4个平台版本共44次更新。

你看,同样是模仿国外出现的某个新的互联网产品,假如一个大公司在稳定性、微创新和执行力上都做得不差,甚至比初创公司做得更好的时候,初创公司还有什么可抱怨的呢?即使你有一个原创的好想法被大公司复制成功了,那你仍然无需抱怨——很可能关键的原因是你的点子太简单了,或者你没有把这个好点子做出门槛。

对创业公司来说,最难复制的就是企业家精神和真正的创新能力。假如扎克伯格把点子还给Winklevoss兄弟,恐怕就不会有现在的Facebook了,因为像墙、戳一下以及开放平台这些真正将Facebook推向高潮的东西不是每个人都能做出来的。

国内的创业者经常指责腾讯利用其强大的用户资源来整合新业务,以至于让创业公司丧失成功机会,但真正的问题在于,在指责腾讯创新的时候,创业者也要思考自己是否是真的在创新,如果大家都是模仿者,那么腾讯表现出的创业公司才具有的灵活性和创新能力,也是值得称道的。

我们甚至可以换个思路去看待创新问题。美国媒体在评价这个历史堪比美国在线的公司的时候,更多的是带着羡慕的口吻,它们最初提供的服务都以即时通讯著称,而美国在线在美国互联网领域打酱油,而腾讯经过不断的创新,是全球不多的几个在用户规模和用户依赖度上接近Facebook的公司。十几年历史在互联网业差不多是骨灰级公司了,对比那些曾经表现为一统江湖架势的公司来说,腾讯大而不倒的秘诀,恐怕也只有创新才是唯一解释,商业就是这样。

文|CBN记者 黄晓常

网站设计页面形式的分析

没有一个好的网站设计基础,就不会取得理想的网站排名效果。一直以来都非常坚定的认为网站设计应该有别于其他的平面设计,在做网站设计时不仅仅是设计师个性的表现,最重要的是体现对客户及用户的使用友好度。

1、网站设计之框架页面

当我们从浏览器窗口查看一个基于框架的网站制作页面时,每一个框架其实就是一个web页面,但搜索引擎在读取框架定义信息时却不能很好的理解它的意思,从而很难对框架定义页面和当前实际页面做出正确的分辨,也就没有办法百分百的抓取到有效的页面内容信息,自然也就会影响到网站关键字的排名情况。

如果我们在网站制作的过程中使用的是iframe框架形式则表示链接指向另一页面,搜索引擎更加无法从这个网站制作框架中抓取任何信息,同时造成页面权重的丢失。

所以,在进行网站制作的过程中应该要尽量避免此类页面的出现,即便要使用也要注意加强框架定义的搜索引擎索引功能。

2、网站设计之不可见导航

这里所说的不可见指的是搜索引擎的不可见,而不是人眼的不可见。网站制作当中的不可见导航是目前普通存在的一个现象,即导航栏的创建只实现了客户端浏览器编译,从而被搜索引擎所忽略。

3、网站设计之flash页面

相信这是所有网站建设公司都多次强调的网站制作页面形式之一,页面设计的美观创意固然重要,但能被认知与读取以及顺畅的运行更为重要。

4、网站设计之动态页面

现在越来越多的客户在进行网站制作要求说明时都开始强调静态页面的实现程度,但是动态的网站制作页面形式究竟不好在哪里呢?

首先,搜索引擎对动态形式的网站制作页面不敏感;其次,过多的动态形式的网站制作页面会造成服务器的崩溃。

5、网站设计之纯链接页面

很多朋友在进行网站制作之初就想着如何才能让自己的网站在完成上传后迅速拥有一个好的排名,因此可谓是煞费苦心,但往往容易弄巧成拙。大家应该遵守规则,循序渐进的开展行为,谨记,欲速则不达的道理。

网页设计师是如何变成“杯具”的

偶尔看到一篇文章。觉得还不错,和大家分享一下。在欢乐之余,也希望能引起大家的思考。原文标题为《How A Web Design Goes Straight To Hell》,直译的话大概可为《网页设计师是怎么下地狱的》,文字中我加入了一些口水话;但凡做过设计类工作的同志,肯定会在这篇文章中找到知音般的同感。

客户和设计师开始交流。才开始的时候一切都很好。客户提出需求,设计也充满期望、热情高涨、精神亢奋……。

客户:新网站肯定会很TMD好。
设计:岂止好?肯定是难以置信的大气、美观、豪华、尊贵、高雅,就像在太空翱翔的雄鹰样无法想象!
客户让你看现在的网站。大家都嘲笑它简直是个“极品”。
客户:哈哈,这就TMD是砣屎!原来那个设计师简直是个杯具。
设计:那确实!怎么会搞成这个样子?!这网站简直是违反人道。
你重新设计了网站(现在流行叫“重构”)。看上去美观大方也很好用,堪称设计史的典范之作。
设计:咔咔咔咔!
客户:我太喜欢了!简直让人惊讶!我都想向它求爱了!但……是……
但是还需要一些“很细微”的调整。
客户自言自语:虽然这个设计基本已经相当很完美了,但我作为堂堂CEO就有义务提出点整改意见来好让自己的工作显得更完善。并且,我还得用“用户体验”、“转换导向”这类听上去很装B的专业术语尽管我还大会用电脑。
客户:你能不能再设计得更“Pop”一点?活泼?潮流?时尚?需要更“前卫”一点,现在总感觉不太对头。
作者:客户确实跟我说过这些的话。但至今我都还无法理解他所谓的网页设计上的“Pop”和“Edgy”是什么意思,我也不知道如何用他人的感觉来设计(以用户为中心?站在用户的角度?以用户为本?)

 

“很细微”的调整越来越多。很快就变得不那么小。
客户:我考虑了一下,我们最终决定改用Comic Sans 字体。还有,你可不可以做个镜头光晕的效果?要让它们看上去很有Web 2.0 的感觉。另外还有,这个网站千万不要太“线条化”。在我看来,这网站全部都是一行一行的。你能再调整一下么?
作者:有个客户确实像这样对我说过,这个设计里完全没有任何标尺或水平线条之类的东西,他们可能是指用〈DIV〉和〈P〉等标签构成的块状区域。

 

客户还让其它人搅和进来。“看上去不错,但是我还想听到更多来自朋友、同事、叔叔、乃至仓鼠的反馈”。
客户:我让我母亲也参与这次讨论,她在1982年设计过面包销售回执单,所以你可以认为她也是有设计“眼光”的。
客户他母:你的这个设计需要点更明亮的颜色,它看上去太灰暗了。可以尝试加点粉色?还可以用一只小猫,人人都喜欢小猫的。
作者:确实有个客户让他母亲也参与进了设计项目,以便让她提出建议和意见。

 

全部希望破灭。你开始幻想做其它行业来生存,比如挖沟或给老人搓澡。
客户:我的狗,Miffles 是个小不起的人物,可以说是我生命中最重要的一部分,我希望你把它的“意识流”也加进网页,就像是Miffles 在和访客说话一样。我会给你描述几页Miffles 可能会说的话,比如“我喜欢美食!”,还有“哈喽!欢迎访问我的网站!我是一只小狗,你可以和我握手!-_-”
作者:这不是我乱编的,有一个客户确实有过这样的要求。我从来没有像那天一样那么急切的想拿车用蓄电池给他敲过去。

 

你再也不是网页设计师了。现在变成了画图程序里的鼠标,客户可以通过语音、邮件或聊天软件直接远程控制你。
客户自言自语:哇咔咔咔,我也会做网页了!咔咔咔咔!
作者:曾经有个客户拿走我的设计稿后自己直接用Photoshop修改,直到改出他们满意的效果后再发给我。在收到他的第13个修改版后,我TMD不干了。

 

憎恨由此而生。客户完全忘记了他们是雇一个网页设计师来设计一个好产品。试问,如果,你是一个商业飞机的涡轮设计工程师,他们还会乱搅和么?
客户:哈哈,现在这个效果总算是“POPS”了!
设计:够了,受不了了……

学习JavaScript的最佳方法

学习新的东西是件可怕的事。对我来说,掌握一项新技能最大的问题是,我不知道自己懂什么。鉴于此,定个计划,学习你感兴趣的东西应该会有用。这篇文章的主旨就是:你为学习JavaScript 制定的蓝图、路线、行动计划!你不必担心找不到最好的资源,先整理些不好的资源,再确定下一步该学什么。遵循它,一步一步来。

任务0:了解什么是JavaScript

      在你真正开始学习JavaScript 之前,花一分钟了解一下什么是JavaScript,它有哪些功能。

       JavaScript不是jQuery、Flash或Java。与它们不同,它是一种独立的编程语言。

       JavaScript 是浏览器语言(尽管现在不完全是)。主要目的是给静态页面增加交互性。在浏览器里,它不会为你更换PHP或Ruby,也不会更改你的HTML或CSS;你可以把它们串在一起使用。另外,它没有你想的那么难学。

       补充说明:你应该听过jQuery,它可能是被使用最广泛的JavaScript 库。也许你还听说过其他比较流行的JavaScript 框架,比如Mootools,,YUI,Dojo 等等。可以将它们统一看做JavaScript辅助工具集;当你使用它们的时候,你还在写JavaScript,但都是些很抽象的JavaScript。它会让你事半功倍。

      “你甚至可能听到有人说,你应该先学jQuery(或其他库)再学JavaScript。我很尊重他们但完全不同意这种说法。先把JavaScript 学好再用其他库,你会发现你会做的更好;结果就是,你会编写更好的JavaScript。”

任务1:通过Codecademy.com站点的课程来学习

        Codecademy是一个相对较新的网站,其广告语是“最易学的编码方法”。目前,该网站仅有两个课程,“初级编程”和“JavaScript快速入门指南”。沉浸在JavaScript 中是种不错的体验。跟 Try Ruby 练习非常相似,你会学到简短的课程、在浏览器里编码,然后看结果。得到全部分数、打开成就徽章。

(Ruby,一种为简单快捷的面向对象编程(面向对象程序设计)而创的脚本语言。)

      如果你已熟悉了另一种编程语言,你也许可以先学“JavaScript快速入门指南”;如果这是您第一次编程(HTML和CSS除外),你会发现“初级编程”课程相当有用。Codecademy是一家免费网站,但需要注册。

任务2:appendTo 截屏方法

       appendTo 视频有一套特别适合初学者的截屏方法。 如果你想用正确(容易)的方法学习JavaScript,学习这些课程绝对管用。视觉训练总是有效的!

     “用我们提供的点播内容、务实的训练解决方案来提升自己的技能。无需注册、无需绑定、绝不忽悠。”

任务3:阅读一本好的关于JavaScript 的说明书

       一旦你通过Codecademy上的课程来学习,你就会想搞到一本关于JavaScript的详细说明书–介绍所有的类型、运算符、控件架构等等。

       如果可以的话,我来介绍几个好的说明书:

       《再说JavaScript》 – 这本说明书可在Mozilla开发者网络上找到,语言公正。这本书内容很丰富,有很多代码实例和文段介绍。

       《Eloquent JavaScript》 – 该书由Marijn Haverbeke 编写,可免费在线阅读,如果你想弄个硬拷贝可以上亚马逊网站购买。它比MDN说明更详细,因为它不仅涵盖了JavaScript 语言,而且包括编码风格以及在浏览器里使用JavaScript。当然,“eloquent”并非言过其实。(eloquent – 雄辩的、口若悬河的)

       《Getting Good with JavaScript》 – 没错,这本书是我写的,但是我介绍这本书是另有原因的。它跟我在前面介绍的两本说明不同;在这本书里我只介绍了编程人员快速掌握编程技巧所需要的部分。此外,它还附带超过6个小时的截屏视频,因此,想要就去看看吧。(当然,这本不是免费的。)

任务4:安装、学习Firebug(或开发人员工具)

       一旦你开始在浏览器里使用JavaScript,就需要安装Firebug并熟悉它的性能。Firebug是一款用于Firefox的插件,它能帮你创建和调试网页:对网页开发者来说,它就像外科医生的‘手术刀’。如果你不用Firefox?喜欢Safari 或者Chrome怎么办?没问题:可以查找类似Firebug的内置开发人员工具。

      “你可以在Mac地址栏里按选项+命令+I 或者按快捷键Control + Shift + I ,来打开设计工具面板。”

       通过打开你选的工具,只需在你喜欢的其中一个网站上点击点击,你就会学到很多东西。这里有一些能加速你学习的资源:

Firebug 

Firebug

Firebug website and wiki

Firebug网站和维基百科

Introduction to Firebug on CSS-Tricks

Firebug的CSS-技巧说明

10 Reasons Why You Should Be Using Firebug here on Nettuts+.

你应该在Nettuts+上使用Firebug的10大理由。

Firebug: White to Black Belt by me, on the Tuts+ Marketplace.

Firebug:从白带到黑带,Tuts+ Marketplace 网站http://marketplace.tutsplus.com/item/firebug-white-to-black-belt/118795

Developer Tools 

设计工具

Developer tools website

设计工具网站

Google I/O 2011: Chrome Dev Tools Reloaded by Paul Irish

Google I/O 2011:由Paul Irish重组的浏览器设计工具

Google Chrome Developer Tools: 12 Tricks to Develop Quicker by Paul Irish

Google 浏览器设计工具:Paul Irish 的快速开发12技巧

 

任务5:读一本有关JavaScript的书籍

       现在你已经熟悉了些基础知识,但是还有很多东西要学。尽管我推荐的一些书可能会让你‘破产’,但你会发现任何时候我都会推荐4本高质量的书:                                                            

       前两本是一般的、较深入的JavaScript 资源,它们会让你从简介到较深层次逐步理解;当然,简介里会有一些重叠的说明,但不多:刚好让你看起来很舒服。

(注:虽然这些书在亚马逊网站能买到,我已经链接了出版商的网站,因此,你能看看范例章节。)

   《JavaScript高级程序设计》- Nicolas C. Zakas 编写,这本书涵盖了它能涵盖的所有内容。如果你以前看过Zakas的任何作品,你会发现他是个不折不扣的天才。除了涵盖了JavaScript语言,这本书还能让您在浏览器里很好的使用JavaScript。

       《JavaScript 24-hour Trainer 》由Jeremy McPeak 编撰,该作者也写过Nettuts+。它不仅仅是一本书:还附带了一张长达四小时的教学光碟。全书共43节课,涉及编码句法指导和代码优化。

       虽然这些书非常适合编程人员学习JavaScript语言以及如何在浏览器中使用这些语言,但是学无止境。虽然这些书的确进入了一些模式和实练中,我再推荐两本我认为有用的书。

1)《JavaScript Patterns 》- Stoyan Stefanov著。我也是刚刚读完这本书,我真希望能尽快读完它。在读过上面的资源之后,你可以学到如何编写JavaScript,但是这本书会教你如何对资源进行重组,这项技能很重要,并非如你想象般简单。

2)《JavaScript:The Good Parts 》- Douglas Crockford 著。该书介绍了JavaScript的优缺点。

任务6:做些事情!

        在学习完上述资源后,你应该已经尝试了一些代码样本:修改代码、整合代码看看会怎么样。但是是时候让自己休息一下,做点东西出来了。

       你能做什么呢?你能做很多东西。这里有一些意见。

1) 图片库:显示一套图片缩略图和主图。当用户点击缩略图的时候,要用较大的缩略图(不是原缩略图)替代当前的主图。如果你能覆盖缩略图alt 标记的标题就奖励积分,或是在用户一分钟内未点击的时候进行图片循环。

2) 待办列表:听起来有点难,我也不打算推荐你制作一个完整的待办列表。只需要做一个文本框并在其旁放上按钮;点击按钮的时候,已输入的文字会在一个无序列表下面变成一个项目。点击列表项目便可移除。这听起来很容易,但有几个陷阱,对初学者来说仔细想想还是很有好处的。

3) 动画框:动画其实是小把戏而已,并不需要弄得太复杂。做一个包含了少许文本的div,其上要有若干按钮。一个按钮用来调整宽度,一个用来调整高度;还有一个用来调整背景颜色。关键是不要让更改发生得太快,但在一秒钟之内。记住,Google 是你的朋友,特别是如果迄今为止你还未用JavaScript 做任何动画的话。

       我相信你能想到其他的很好的练习的计划。当然,学习的唯一方法是把自己从安乐窝里拽出来。

“此外,在所有的技能水平上,确保JavaScript 类别在Nettuts+上有大量教程列表。”

(Nettuts是一个专注于提供网络开发教程的网站。)

任务7:开始学习如何使用JavaScript库

        如果你学到了这个地步,就会意识到有些JavaScript 编写任务很难(或根本不能)通过跨浏览器的方式实现。最可能违规的便是过量的DOM操作,AJAX和动画。这也就是为什么我们需要JavaScript 库的原因。

        正如我前面提到的,一个JavaScript 库的详细内容犹如减轻痛苦的蜜糖。因此,现在有必要来看一下。这里有大量库供你选择,我会让你自己决定从哪个开始。无论是jQuery 还是Mootools,YUI 还是Dojo,它们各自的网站会为你提供开始学习时你所需要的一切信息。如果你觉得用得着就来试试吧。

      最流行的库:

      虽然很容易得到大量的库,你还是应该选一个受欢迎的– 至少排名第一。

jQuery

       jQuery

Dojo

       Dojo

YUI

       YUI

MooTools

       MooTools

Prototype

       Prototype

 

任务8:紧随大师的步伐

       有很多令人难以置信的JavaScript  天才,他们一直在做些很酷的东西,你一定不想错过。值得庆幸的是,我们的工作狂Siddharth 副主编已经搞到一份33名设计人员列表,要想成为一名JavaScript 发烧友你就必须订阅它。扔下手头的工作,订阅/跟随这些设计人员。这是必须要做的。

       但是,你还能做更多事情。这个公平网站经常发布关于JavaScript 的信息,所以不要走开。此外,关注JavaScript Show ,一档全世界关于JavaScript最新最大的播客。你可能还想注册JavaScript电子周刊简讯。

       还想要更多吗?关注Tuts+Marketplace 的JavaScript 类。

      最后感谢阅读此文!真诚的希望它能帮你成为一名JavaScript 爱好者。如果你已对JavaScript 很熟悉,你可以在评论中推荐其他任何相关资源。

用流程图教你如何看懂流程图

流程图定义:表示生产过程中事物各个环节进行顺序的简图

流程图:使用图形表示算法的思路是一种极好的方法,因为千言万语不如一张图。流程图在汇编语言和早期的BASIC语言环境中得到应用.相关的还有一种PAD图,对PASCAL或C语言都极适用。

什么是流程图

以特定的图形符号加上说明,表示算法的图,称为流程图或框图

流程图是流经一个系统的信息流、观点流或部件流的图形代表。在企业中,流程图主要用来说明某一过程。这种过程既可以是生产线上的工艺流程,也可以是完成一项任务必需的管理过程。

例如,一张流程图能够成为解释某个零件的制造工序,甚至组织决策制定程序的方式之一。这些过程的各个阶段均用图形块表示,不同图形块之间以箭头相连,代表它们在系统内的流动方向。下一步何去何从,要取决于上一步的结果,典型做法是用“是”或“否”的逻辑分支加以判断。

流程图是揭示和掌握封闭系统运动状况的有效方式。作为诊断工具,它能够辅助决策制定,让管理者清楚地知道,问题可能出在什么地方,从而确定出可供选择的行动方案。

流程图有时也称作输入-输出图。该图直观地描述一个工作过程的具体步骤。流程图对准确了解事情是如何进行的,以及决定应如何改进过程极有帮助。这一方法可以用于整个企业,以便直观地跟踪和图解企业的运作方式。

流程图使用一些标准符号代表某些类型的动作,如决策用菱形框表示,具体活动用方框表示。但比这些符号规定更重要的,是必须清楚地描述工作过程的顺序。流程图也可用于设计改进工作过程,具体做法是先画出事情应该怎么做,再将其与实际情况进行比较。

OK  下面这张图很有意思。源自Mandall Munroe

客户说网站要做大气一点

在百度UEO看到篇文章,觉得还满有点意思,分享给大家看看。
在的设计师最怕听到的两个字就是“大气”。
“你对设计稿有什么要求呢?” “哦,我希望大气一些!”“。。。。”
“您觉的哪些地方不满意呢?”“嗯,就是希望再大气一些!”“。。。。”
“你看这次的视觉稿,风格怎么样?”“挺好的,稍微大气一些就OK”“。。。。”
这些对话一点也不夸张,都是同行们常常抱怨的话题。设计师已经无数次倒在了这两个字下。
不过,抱怨并不能解决所有问题。那么我们该考虑如何解决这个令人头疼的形容词呢? 简单分析,从两种不同类型的需求说起

 

第一种:商务性质中的“大气”

 

简约的页面风格容易受到用户的喜欢,而且能给用户带来一定的安全感。拿IBM这个来说,页面给人的第一感觉是专业和安全。焦点图构成也比较简单,左侧醒目的标语用了简单的渐变,右侧也运用了简单的几何图形。下面几个例子也是如此,还有一些没有列举出来的,比如大家很熟悉的apple官网。


商务性质的页面表现“大气”的感觉一般注意几点:
1.留白。大量留白会使页面有空间感,不会因为页面内容密密麻麻而产生厌恶。
2.尽量少的颜色。太多颜色控制不好会容易失去整体平衡,主要在制作前定一个主色系和辅助色系。可以发现上面列举的这几个网站色彩使用的数量都不是很多,一个主色,一个辅助色,一个点缀色。
商务页面主要以凸显内容和展示信息为主,而且给访问用户有一定的安全感和信任感。所以建议不要用比较花哨的元素和另类的设计风格。

 

第二种:活动性质中的“大气”

这类的页面,“大气”的实现比较复杂,当然也不能用上一种方法。比如一个开业庆典的页面,如果用白色的底,简单的图形和文字,可能就烘托不出好的氛围。方案往往被否定的原因在于烘托气氛不够。
所以在选取素材的时候,可以首先考虑,山河湖海,全景图,或者有代表性的建筑或者标识;再者可以挑选带有积极向上性质的元素,如“鸽子,绸带,马路,教堂,屋顶、太阳、贵族元素”等

中国风是近年设计师们喜欢使用的一种风格,利用传统的中国元素加上现在的设计风格而形成。
标志性的元素:水墨风格、书写体、古代物品(瓷器,鼎之类)

以上只是笔者对“大气”的简单理解,好的设计要多从细节入手,即使简约的设计风格也要谨慎处理细节。比如小的阴影,光泽,质感等等。把握好全局,才能控制你的风格。试图和需求人良好的沟通,表达设计师自己的想法和建议。在修改设计稿的时候,对方所想要的“大气”可能只是某个元素问题,但他也确定不了是哪个部分有问题,所以会用含糊的概念去告诉你。但作为设计师本人也要仔细思考,先尝试关键部分的内容修改,比如尝试换新的字体,去掉多余元素等等。

总之,不断的探索和尝试,所有的需求都是浮云。

文章出自百度联盟志 http://ueo.baidu.com/?p=185

Windows平台上的强大的文本编辑器

这里介绍两款灰常强大的软件,就是那些能让你们保持高效率的东西。或许你喜欢MAC OS,因为它的“简单”。也许你偏爱Windows,因为你是个游戏发烧友。总之,谁也不能否认Windows平台上有一个庞大的第三方软件库供用户遨游其中。

       我每天至少对着Windows 系统工作10个小时。在Windows平台上编写代码是我的工作,虽然大部分的工作可以在DREAMWAVER里完成。但是因为本人比较懒,能用简单的工具解决的,就决不愿意用复杂的软件。所以每天和文本代码打交道。于是有个强大的文本编辑器就显得尤为重要。

       让我们对比一下Windows平台上的强大的2款文本编辑器。

1.值得尊敬的Notepad++

         Notepad++是个开源的文本编辑器,它为日常用户以及黑客提供了大量功能。NP++由C++语言撰写而成,它能实现大部分的文本编辑任务。NP++的功能有代码折叠,支持正则表达式的优秀的搜索功能,支持你能想到的所有语言的语法高亮显示,列编辑,标签式界面,编码转换,还支持第三方插件。如果你在找一种免费软件来撰写代码编写文本,那么对于Windows系统来说没有什么比NP++更好了。

   2.UltraEdit

       以我的经验的来说,UltraEdit就算不是用于Windows或Mac的文本编辑程序中最强大的,也是最强大的之一。我是在做现在这个工作时开始接触它的,不得不说它实在太牛X了。它有多行标签界面,脚本浏览器,宏功能,XML管理器(帮你浏览XML文件),当你处理源代码的时候还会给你一个函数列表,代码语法高亮显示等等功能。唯一会让你觉得美中不足的是用户界面比较凌乱,但这是可以补救的。无论是Windows还是Mac,很难想像用户只要为之支付59.95美元就能使用UltraEdit的所有功能。

       所以,如果你想在Windows系统的机器上真正做点什么的话,这些就是你需要的工具。如果你不想付费的话,NotePad++是你的不二之选。但以我的经验,如果你想要一个专业级别的应用进行编辑,UltraEdit的大门将向你敞开。总之,你会使用Windows下最好的文本编辑应用之一。

notepad++ 下载地址:http://dl.pconline.com.cn/html_2/1/117/id=10699&pn=0.html

Web设计趋势

遵循最为流行的设计原则是开办设计公司的重要一环。过去的一年或多或少造就了这样的观念,即设计越简单就越好越有效。下面简单列了几个设计的原则,仅供参考。

一、更大的LOGO

曾几何时,醒目页面(Splash page)极为流行,连那时的男用背包也是如此。但今天,这两者都风光不再了!何不用一个超大的LOGO来营造醒目页面的感觉呢?你可以把页首(header)做得比普通的尺寸大一点,来获得同样的效果。没错,我们说的是,你可以把Logo弄到屏幕的一半那么大!如果你想要更好的用户体验,就得这么做。哦!好吧。如果你真的这么做了,肯定会吸引人的,起码我回去看看这么大的LOGO你是怎么做的 :)

二、保持简单

简单风格也存在了一些时日了。像Facebook、Twitter这些大牌们一直在引导“少就是多”这一理念。大批的媒体网站追随着他们的脚步,在设计模板上使用大量的留白。这与拥挤型设计截然相反。现代派的真经是破除左导航、右导航的纠结,让用户尽可能专注在页面内容上,而不要被分心!如果哪天你的网站发达了,设计中的空白区再来用于广告用途也为时不晚啊。

三、去除Flash

网站以拥有Flash动画为傲的日子一去不返了。今天的用户有着太多的动画在吞噬他们的带宽。的确,Flash能做的不仅仅是让你多了一种展示方式,它还增加你页面的载入时间,而今天的互联网用户比之前的任何时间都缺乏耐心。你大概只有2秒时间来给你的初次用户留下印象!此外,flash动画在很多移动设备上面无法播放,而我们都知道这点有多么的重要。今天人们要的是可以通过手机很容易地访问页面。

四、有没有想过在版面设计上多花点时间?

这点恐怕可以看作是最重要的一个设计趋向,同时也可能是最为棘手的问题之一。设计师需要了解这些趋势,选择某些逻辑模型来配合其字体大小,并作出适当的修正以符合设计模板的美学需要。版面设计被认为是吸引初次访客的主要影响因素!如果这一最重要的因素弄错了,其造成的影响不难想象。

五、社交媒体规则

今天,如果你的博客没有整合诸如人人网,开心网这些社交媒体功能,你会损失一大块流量。一个简单的人人网“分享”按钮即可将你网站的流量翻好几番。今天的互联网用户希望成为社区的一份子,而不会仅仅因为你是一个博主而采纳你。他们想要知道其他网友对你所谓的“专业水准”是如何看待的。没错,你尽可以将之称为“从众心理充斥网络”,但是,既然现实如此,那它就是现实!

六、移动化

你的站点能用移动设备访问吗?如果能,其功能是否最佳发挥了?2011年里,移动设备变得越来越便宜,也越来越容易使用。我们也可以这个趋势会在2012年继续,人们会通过各种各样的设备保持连线,无论是通过iphone、iPad或者其他可以上网的手机。如果你还没有考虑移动化,相信我,你的竞争者们已经这么做了,而且很可能已经领先于你,就算你的站点比他们的优秀也没用—-就因为你的站点不方便用手机访问。

七、想想杂志的设计

自然,杂志的排版最初并非是为移动设备比如iPad而设计的。不过,由于用户喜欢这些简练的设计,因而这些设计模板也就逐渐在网上流行起来。优美的杂志模板的确可以拨动用户的心弦。想想看,通过加粗字体、丰富的子标题、大量的图片、类型多变的文章和文字,让用户产生手不释卷的阅读欲。想想杂志版面、想着更多的用户,再想想怎样努力达成!至于我本人,最厌恶的就是国内的几大门户了,充斥着文字和广告。

八、大于常规的LOGO

这听上去和第一点很像,但也不尽相同。干嘛不用logo和文头来抓住人们的注意力呢?毕竟logo是公司视觉形象中最重要的元素啊。如果你所服务的公司已经有一个广为人知的logo,那就只要把尺寸稍微放大一点来抓住普通用户的注意力。如果这间公司正在考虑重整公司形象,这招尤其有效。除非公司想要把logo全部换掉,否则大胆地突出logo的呈现可以让用户感觉到他们正在访问的站点是正确的,对常来访问的老客户也有强化的作用。

九、手绘设计

少一些几何形,多一点手工作业,这就是我们想说的。干嘛不试试完全用手绘来做设计模板呢?只要一个手写笔,会有卓尔不群的效果!

十、精准的字体设计

完美的字体设计恐怕是设计师所需面临的最大挑战之一。干嘛不花一点点精力创造你自己的新字体呢?它会给人一种非常专业与个性化的感觉,这种技能是不折不扣的专业水准。