1. ?前端开发所需掌握的技术(1)

也许你对前端开发所要掌握的技术不是特别的了解,下面我们再来看一下下面这段招聘信息:

网站前端工程师(Front-end Web developer)

工作职责:

负责网站前端设计及开发。

职位要求:

计算机相关专业,本科以上学历。

精通Java/Ajax/JavaScript/XML/CSS,有至少3年相关工作经验。

了解不同浏览器之间的差异,写出的代码具有良好的兼容性。

熟悉页面架构和布局,对Web标准和标签语有深入了解。

对用户体验、交互操作流程及用户需求有深入了解。

能根据设计效果图严谨落实界面,精确到像素意识。

有丰富的网站前端工作经验。

笔者认为上面这段招聘信息仅仅列出了一些基本的要求,一个优秀的前端工程师需要掌握很多与之相关的技术,绝大部分的团队都需要一个真正理解及应用这些技术的人才。正确地深入理解前端所应用到的各项技术和技能,并且能做到有的放矢,这对于个人及团队都是有利的。下面我们进行整体的概括。

2.1. 业内标准

关于业内标准,首先必须了解的是W3C的一系列标准,前面的章节中已经详细地介绍了,这里不再赘述,需要重点关注的有:HTML、XHTML、XML、CSS、JavaScript。

其次,根据你所归属的阵营熟悉一些标准,比如需要Java EE的相关标准或者是.NET的相关标准。

最后,需要掌握一些常用的前端设计的思路以及最佳实践。

2.2. 语言

在众多的开发语言中,属于前端技术的语言并不多,除了W3C所发布的HTML、CSS、XML等描述性语言外,还包括客户端脚本语言JavaScript等。另外还有一种语言也是非常重要的,即ActionScript,它是开发Adobe RIA的基础语言,Flex、Flash和AIR都采用它作为脚本语言。为什么这里要提到Flash?Flash并不是W3C标准,但它在目前的互联网领域中扮演着非常重要的角色。相比以前,如今声音、图像、动画、视频已遍布大大小小的网站,不管它们是以JavaScript实现的还是以Flash为基础实现的,今后的互联网都将是RIA的天下。而且目前90%的计算机都已安装Flash Player,基于Flash的应用将会越来越丰富。即使不知道如何设计一个Flash广告,你也要知道如何修改里面的字体,它与后台数据层如何交互。它的ActionScript编程是非常有趣的,它也是基于EMACScript这一标准的脚本语言,与JavaScript相似。本书不详细介绍Flash,有兴趣的读者可以关注Adobe实验室网站:http://labs.adobe.com

2.3. 视觉设计

视觉设计最早被应用于印刷宣传,电影海报、报刊杂志等传播媒体都可以理解为平面设计或图形设计,它们是利用视觉符号来传递各种信息的。随着科技的日新月异和互联网的发展,视觉设计在互联网这个大媒体中的作用越来越重要。不管是静态的网页还是画面炫丽的Flash动画或魔兽世界中的游戏画面,它们都离不开视觉设计。在软件系统领域中一般称视觉设计为UI(User-Inteface)设计。如果仅从UI来理解,那么它就是指界面设计,即在网页上看到的效果。抛开Web的话题,回到传统C/S模式的应用系统,那它要做哪些事情呢?我们先来看一下图1-9所示的苹果操作系统Xcode软件的界面。

前端开发所需掌握的技术(1)-魏星博客
(点击查看大图)图1-9? 苹果操作系统Xcode软件

无论是软件的工具栏还是菜单等,Mac都为其提供了相应的接口调用,操作时只需要执行文本及命令即可。同样的,开发VB应用时,开发库已为你提供了丰富的UI组件,那开发这样的应用软件需要视觉设计师吗?回答是需要,因为视觉设计师的工作不仅是将控件美化,为其加上一些色彩,对于Web视觉设计师来说,他还要将信息架构的内容友好且美观地表现在浏览器上或是PS工作区中,就像传统的海报设计一样,它还需要应用排版和字体。

我们常常会发现,UI设计师设计出来的稿子无法进行HTML编码,有些背景根本无法实现,或者只能像十年前的网页一样,通过先使用Photoshop画界面,然后转换到Firework切片,再自动导出为HTML这样一个工作流程来实现,得到的网页中全是图片,这样的效果是不符合目前的Web标准的。

所以,在了解色彩设计的同时,我们还需要了解Web的排版艺术及交互艺术。对于Web应用的视觉设计,不仅需要了解诸如Photoshop这类画图工具,还需要了解设计Web应用的一些方法,如布局、排版、色彩、字体、表单等的设计方法,能迅速将PSD文件内的要素或PNG图片的特殊效果通过HTML、CSS等代码来实现,比如,需要将相册内的所有图片都加上属于自己的印章,则首先应该想到要将印章制作成PNG格式的透明图片,再使用CSS的一些技术给相册图片加上印章。

视觉设计是前端开发的一项基础技能,前端开发的一个重要意义就是给予用户良好的视觉体验。

4. 交互设计

一般做UE的人都会强调可用性的概念,将可用性视作产品设计的最高层次。软件是人与机器的交互,这是软件所体现的“能力”。在ISO中这样定义可用性:某一事物的可用性应当可以以效力、效率、满意度三个维度进行衡量。效力即用户可以完成任务,效率即用户完成任务的快慢,满意度即衡量用户是否很享受完成任务的这个过程。不管是Web软件还是桌面软件,在可用性方面都必须遵守这三个标准。网站的可用性在很大程度上反映了其产品的人性化操作,这是交互设计中的一个部分。人机交互中包含的具体理论及技术如图1-10所示。

前端开发所需掌握的技术(1)-魏星博客
图1-10? 交互设计概念图

从图1-10可以看出,从比较基础的界面设计开始到概念表达,都能够完整地贯穿整个软件交互设计过程。交互设计必须以用户为中心,应用“以目标为导向的设计”方法。从用户角度来说,交互设计是一种如何让产品易用、有效且让人感到愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在与产品交互时彼此的行为,了解人的心理和行为特点。交互设计体现在小到一个链接的设计,大到一个大的操作流程等的过程都应受到重视。这些年人们对于用户体验及可用性等的研究也越来越多。最后我们要明白,交互设计是一个过程设计,不管是开发DVD播放机还是开发互联网应用,都需要交互设计。

转自:http://book.51cto.com/art/201008/222599.htm