竹磬网-邵珠庆の日记 生命只有一次，你可以用它来做些更多伟大的事情–Make the world a little better and easier


78月/180

【干货】超全web开发工具资源集合

发布在 邵珠庆

作为Web开发者，这是好的时代，也是坏的时代。Web开发技术也在不断变化。虽然很令人兴奋，但是这也意味着Web开发人员需要要积极主动的学习新技术和新的编程语言，并愿意和渴望接受新的挑战，以适应变化。新的挑战可能会包括一些开发上的要求，如利用适应现有的框架来满足业务需求。测试一个网站，能从中知道出了哪些技术上的问题，并且我们针对这些问题进行优化和消除。便于后端的开发进程加快和测试。所以我们列出了完整的web开发所需要的工具和资源，助力开发者提高开发效率！学不止步，让我们努力成为一个优秀的开发者！

Web开发工具和资源整合

在这里说声抱歉，对于开发者开发使用的工具，我们无法一一囊括，这里是选取较为热门的工具和资源作为范例。我们希望能从中找到适合自己的工具助力自己的开发！

注：工具和资源排序不分先后。

JavaScript库

自动草稿

我敢说JavaScript语言是目前web开发最流行的编程语言。JavaScript库又称JavaScript框架，封装了很多预定义的对象和使用函数。是网站更容易兼容各式各样的浏览器。那么您就可以使用以下JavaScript库来帮助你的开发更好进行。

  • jQuery：快y速，小巧，功能丰富的JavaScript库。
  • BackBoneJS：为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。
  • D3.js：D3是基于数据的文档操作javascript库,D3能够把数据和HTML、SVG、CSS结合起来,创造出可交互的数据图表。
  • React:：Facebook的Javascript库为构建用户界面而开发。
  • jQuery UI：jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。
  • jQuery Mobile：基于HTML5用于创建移动 web 应用程序的框架。
  • Underscore.js：JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象。
  • Moment.js：一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期。
  • Lodash：一个 JavaScript 实用工具库,提供一致性,模块化,性能和配件等功能。
  • Vue：Vue.js（读音 /vjuː/, 类似于view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

 

前端框架

自动草稿

通俗的前端由HTML，CSS，JavasScript等构成。当然为了适应Web开发日益增长的需求，应运而生许多独立的前端框架，例如Bootstrap。一个优秀的框架可以为前端开发人员在开发过程中增益，减小开发压力。

  • Bootstrap： Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
  • Foundation： 迄今为止最好的响应式前端框架，更快、更轻、更多功能、更灵活、更强大！
  • Semantic UI：Semantic UI 是一款语义化设计的前端开源框架,其功能强大,使用简单,为设计师和开发师提供可复用的完美设计方案。
  • uikit：UIKit使用的变量基于LESS,具有体积小、模块化、可轻松地自定义主题及响应式界面。

 

Web应用框架

自动草稿

Web应用框架作为一个软件框架，意在帮助和缓解开发者在进行Web应用的开发与维护时遇见的开发问题。例如：AngularJS，您可以在您的项目完全免费使用它，详细文档请您参见 angularcdn.com.

  • Ruby：Ruby on Rails 是使用 Ruby 语言编写的网页程序开发框架，目的是为开发者提供常用组件，简化网页程序的开发。
  • React：React 起源于 Facebook 的内部项目，React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。是现在非长热门的框架。
  • Vue：Vue.js 是用于构建交互式的 Web  界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。
  • AngularJS：AngularJS 通过新的属性和表达式扩展了 HTML，可以构建一个单一页面应用程序。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
  • Ember.js：一个用于创建 web 应用的 JavaScript MVC 框架，采用基于字符串的Handlebars模板，支持双向绑定、观察者模式、计算属性（依赖其他属性动态变化）、自动更新模板、路由控制、状态机等。
  • Express：基于 Node.js 平台的 web 应用开发框架 基于Node.js 平台,快速、开放、极简的 web 开发框架。
  • Meteor：Meteor 是一个构建在 Node.js 之上的平台，用来开发实时网页程序。Meteor 位于程序数据库和用户界面之间，保持二者之间的数据同步更新。
  • Django：Django是一个开放源代码的Web应用框架,由Python写成。采用了MVC的软件设计模式,即模型M,视图V和控制器C。
  • ASP.net：ASP.NET是免费，高兼容的WEB应用框架，能够提供标准化WEB应用构建时所需的解决方案。
  • Laravel：一个免费，开源的PHP Web应用程序框架，可以基于MVC模式来创建Web应用程序。
  • Zend Framework 2：一款的Web应用框架，基于PHP来创建Web应用和服务端应用。
  • Phalcon：Phalcon 是开源、全功能栈、使用 C 扩展编写、针对高性能优化的 PHP 5 框架。
  • Symfony：Symfony是一个基于MVC模式的面向对象的PHP5框架。Symfony允许在一个web应用中分离事务控制，服务逻辑和表示层。
  • CakePHP：CakePHP是一个运用了诸如ActiveRecord、Association Data Mapping、Front Controller和MVC等著名设计模式的快速开发框架。主要目标是提供一个可以让各种层次的PHP开发人员快速地开发出健壮的Web应用，而 又不失灵活性。
  • Flask：Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2
  • CodeIgniter：CodeIgniter 是一个简单快速的PHP MVC框架。它为团队提供了足够的自由支持，允许开发人员更迅速地工作。

任务批处理工具/包管理器

自动草稿

任务批量处理工具可将你的工作流程全自动化.例如你可以创建一个任务，使用JavaScript语言编写的工具来进行自动化的处理。 然后打包，这样会大大提高开发效率。包管理器它能跟踪所有已安装的软件、自动化进行安装和删除应用程序、以及确保所有软件都保持更新以获得最新的增强功能和错误修复。

  • Grunt：Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。
  • Gulp：Gulp.js 是基于 Node.js 构建的一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。
  • npm：NPM（node package manager），通常称为node包管理器。顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。
  • Bower：Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。
  • Webpack：Webpack一个前端资源加载/打包工具，只需要相对简单的配置就可以提供前端工程化需要的各种功能，并且如果有需要它还可以被整合到其他比如 Grunt / Gulp 的工作流。

 

编程语言 / 开发平台

自动草稿

所有Web开发都需要编程语言的支持.编程语言（programming language），是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧，用来向计算机发出指令。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据，并精确地定义在不同情况下所应当采取的行动。.当然进行Web开发不仅仅只有一门语言来进开发。

  • PHP：PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域
  • NodeJS：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
  • Javascript：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言
  • HTML5：标记语言，是HTML和XHTML的最新版本。
  • Python：Python是一种解释型、面向对象、动态数据类型的高级程序设计语言。
  • Ruby：Ruby，一种为简单快捷的面向对象编程（面向对象程序设计）而创的脚本语言
  • Scala：Scala是一门多范式的编程语言，一种类似java的编程语言，设计初衷是实现可伸缩的语言、并集成面向对象编程和函数式编程的各种特性。
  • CSS3：CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS3是CSS的最新版本。
  • SQL：结构化查询语言(Structured Query Language)简称SQL，是一种特殊目的的编程语言，是一种数据库查询和程序设计语言，用于存取数据以及查询、更新和管理关系数据库系统；同时也是数据库脚本文件的扩展名。
  • Golang：Go是Google开发的一种编译型，可平行化，并具有垃圾回收功能的编程语言。
  • Rust：Rust是Mozilla开发的注重安全、性能和并发性的编程语言。
  • Elixir：Elixir 是一种函数式编程语言,建立在Erlang虚拟机之上。它是一种动态语言,灵活的语法与宏支持,利用Erlang的能力来构建并发、分布式、容错应用程序与热代码升级。

 

数据库

自动草稿

数据库（Database）是按照数据结构来组织、存储和管理数据的仓库。

  • MySQL：MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。
  • MariaDB：MariaDB数据库管理系统是MySQL的一个分支，主要由开源社区在维护，采用GPL授权许可MariaDB的目的是完全兼容MySQL，包括API和命令行，使之能轻松成为MySQL的代替品。
  • MongoDB：MongoDB 教程MongoDB 是一个基于分布式文件存储的数据库。由 C 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。
  • Redis：Redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。
  • PostgreSQL：ostgreSQL支持大部分 SQL标准并且提供了许多其他现代特性：复杂查询、外键、触发器、视图、事务完整性、MVCC。

CSS 预处理器

自动草稿

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。例如：Sass，Less，Stylus。

  • Sass： Sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
  • Less：Lesscss是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
  • Stylus：Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。

如果你是刚刚开始使用CSS的预处理器，你可能要先使用第三方编译器进行开发，如下所示。

文本编辑器 /代码编辑器

自动草稿

无论你是做笔记，敲代码，或者Markdown文档编写，一个好的文本编辑器都是必须拥有的！

  • Atom：Atom 更为先进的文本代码编辑器 - 由 Github 打造的下一代编程开发利器在代码编辑器、文本编辑器领域,有着不少的「神器」级的产品。
  • Sublime Text：Sublime Text 是一个代码编辑器（Sublime Text 2和3是收费软件，但可以无限期试用），也是HTML和散文先进的文本编辑器。
  • Notepad ：Notepad 是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能。
  • Visual Studio Code：微软推出，一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。
  • TextMate：TextMate是Mac下的著名的文本编辑器软件，与BBedit一起并称苹果机上的emacs和vim。
  • Coda 2:  OS X下快速，简洁，功能强大的编辑器【需要付费】.
  • WebStorm：jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。
  • Vim：Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器，在Vi的基础上改进和增加了很多特性。
  • Brackets：Brackets 是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。
  • Emacs：著名的集成开发环境和文本编辑器。Emacs被公认为是最受专业程序员喜爱的代码编辑器之一。

Markdown 编辑器

自动草稿

Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。Markdown 十分轻量,学习成本也不高。

  • MWeb：专业的 Markdown 写作、记笔记、静态博客生成软件 【付费】
  • Markeditor：MarkEditor 是最新的一款 Markdown 编辑器，除了基本功能外，还包含了诸如表格编辑、图表、高亮、公式等等丰富的功能！【付费】
  • StackEdit：一个开放源码免费使用的 MarkDown 编辑器, 基于 PageDown,使用了 Stack Overflow 和其他 Stack Exchange 网站的 MarkDown 库
  • Dillinger：Dillinger 是一款在线的 Markdown 编辑器,支持更换主题,字数统计,云服务保存,导出 HTML、PDF 等功能。
  • Mou: Mac OS X下的免费Markdown编辑器【作者貌似已经跑路了】
  • Texts：Windows和Mac OS X下纯文本编辑器。

表示有些付费的Markdown编辑器宝宝买不起。

 

icon图标

自动草稿

几乎每一个Web开发者，尤其是前端开发人员都会需要icon图标来增色项目。

  • Font Awesome：Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
  • IconMonster：免费，高质量, 庞大且资源不断增长的简洁的icon图标库。
  • IconFinder：Iconfinder提供美丽的图标,服务数以百万计的设计师,开发商和其他有创意的专业人员。
  • Fontello：一个目测有200 个图标（数量还在增加）的 Web-font 图标市场，对于广大设计师、前端开发者来说是很棒的资源。
  • 阿里妈妈矢量图标库 ：Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中

Git 代理 / 服务

自动草稿

Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
  • SourceTree：SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端。支持创建、克隆、提交、push、pull 和合并等操作。
  • GitKraken (Beta)：一款自由、直观、快捷、美观的跨平台Git客户端。
  • Tower 2：一款美丽，高效，强大的Git管理，让Git版本控制变得容易。
  • GitHub Client：有助于无缝连接GitHub和GitHub的企业的项目。
  • Gogs：Gogs (Go Git Service) 是一款极易搭建的自助 Git 服务。 开发目的Gogs 的目标是打造一个最简单、最快速和最轻松的方式搭建自助 Git 服务。
  • GitLab:  GitLab是利用 Ruby on Rails 一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。
  • Coding：Coding 的代码托管功能除了基本的 Git 仓库以外，还有保护分支，分屏对比， Code Review 等高级功能。并且整合了 Pages 服务，质量管理，演示平台等开发工具，提升研发效率。

本地开发环境搭建

自动草稿

根据您运行的是什么操作系统和计算机配置，有时候进行测试的时候就有可能需要搭建一个快速的本地开发环境。自己搭建很是蛮烦，不用担心，有很多将Apache，Nginx，MySQL和phpMyAdmin进行打包一体化的软件。这些软件很是方便我们来进行本地测试。

  • XAMPP：XAMPP（Apache MySQL PHP PERL）是一个功能强大的建站集成软件包。
  • MAMP PRO：MAMP Pro for mac是Mac OS平台搭建本地服务器环境的组合软件套装,包含 Macintosh、Apache、MySQL和PHP 四大开发环境。
  • WampServer：Wamp就是Windows Apache Mysql PHP集成安装环境，即在window下的apache、php和mysql的服务器软件。
  • Vagrant：Vagrant是一个基于Ruby的工具，用于创建和部署虚拟化开发环境。它 使用Oracle的开源VirtualBox虚拟化系统，使用 Chef创建自动化虚拟环境。
  • Laragon：Laragon工具就是Laravel的一键安装工具吧，还集成了一整套wamp工具，除去Laravel安装外，它也是一款不错的wamp工具，干净简单，便捷迅速。Diff Checkers
  • Wnmp：WNMP是Windows下便捷，安全的Nginx MariaDB PHP开发环境环境集成套件包。

 

文本对比检查

自动草稿

Diff checkers 可以帮助您比较文件之间的差异，然后合并更改。帮助我们更直观的看见文本之间的差异。

  • Diffchecker：Diffchecker 是一款非常好用的在线文本对比工具,能够高亮显示有差异的行和字符。Diffchecker 提供了文件上传对比功能,还可以选择对比的存储时间。
  • Beyond Compare：Beyond Compare是一套由Scooter Software推出的软件，主要用途是对比两个文件夹或者文件，并将差异以颜色标示。

当然有很多免费的文本编辑器，包括我们上面提到的也有插件和扩展，可以协助开发者方便的进行文件比较。

代码共享 / 代码测试

自动草稿

前端开发者在公司内或者团体间需要进行协作，共享代码，那么一下工具很值得开发者一试。

  • JS Bin：JS Bin能够让你编辑和测试JavaScript和HTML代码。你还可以将编辑后的代码保存到本地,或将URL地址发给其他人,让其协助调试代码。
  • JSfiddle：jsFiddle是一个在线的shell编辑器,通过流行的JS框架创建自定义的环境,以简化JS代码。可以用于测试示例代码。
  • codeshare：与其他开发者实时共享代码。
  • Dabblet：Dabblet是一个开源互动测试工具,用于测试CSS和HTML。Dabblet支持实时更新、匿名备份、嵌入网站、与他人共享或者存储到GitHub。

协作工具

自动草稿

每一个很棒的开发团队需要一种方式来保持联系，协作，来帮助提高生产力。

  • Slack：Slack 是聊天群组 大规模工具集成 文件整合 统一搜索。
  • Trello：Trello的目标是提供简洁清晰的团队协作工具。不过弥缝在这里将介绍如果将Trello用来建立自己的时间管理系统。
  • Glip：Glip:在线团队办公协作平台是一个类似于Slack网站的网络办公集合体,内置了邮箱、网盘、即时通讯应用、协作服务等,把所有和网络办公有关的服务和工具都整合在了一起。
  • Asana：Asana是一款团队任务管理软件 方便人们去制定和跟踪团队的项目任务的完成情况
  • Jira：JIRA是Atlassian公司出品的项目与事务跟踪工具，被广泛应用于缺陷跟踪、客户服务、需求收集、流程审批、任务跟踪、项目跟踪和敏捷管理等工作领域。

灵感创意

自动草稿

当我们进行开发时，偶尔迸发的灵感会使我们的项目或者产品增色不少。当然不仅仅依靠自我的灵感，我们也需要从别人的作品中得到灵感来保证我们的Web设计界面或者产品不落后这个时代。

  • CodePen：全球web前端开发人员的圣地！可以展示个人的创意和建立一个测试实例来解决bug。 来寻找你的项目设计方式和灵感吧。
  • Dribble：Dribbble是一个面向创作家、艺术工作者、设计师等创意类作品的人群，提供作品在线服务，供网友在线查看已经完成的作品或者正在创作的作品的交流网站。

 

网站测速工具

自动草稿

网站的速度是用户体验关键因素。网站速度快与慢决定是否能更高的搜索引擎排名，更高的转换率，更低的跳出率，以及更好的整体用户体验和。值得高兴的是很多免费软件可以用于测试网站速度，帮助我们找出加载缓慢的问题，方便我们去解决。

  • Google PageSpeed Insights：PageSpeed Insights是一款可以分析网页速度瓶颈,让网页设计人员开发出速度更快的网站的谷歌浏览器插件。
  • Google Chrome DevTools：Chrome DevTools 是公认的优秀的前端调试工具，功能强大，使用起来有一定的学习门槛，
  • WebPageTest：WebPagetest是一款Web应用程序,它将一个URL以及一系列配置参数作为输入,并对那个URL运行性能测试。
  • Pingdom：pingdom全面的网站监测服务网站,可测速和ping跟踪路由,可以免费监测1个站点,最短1分钟监测一次。
  • GTmetrix：主要优点在于提供了丰富的详细的测量结果，并建议如何来优化网页中每个元素的，最重要的是会根据网站的具体情况，直接告诉你导致网站加载速度变慢的根源在哪里

Web开发社区

自动草稿

当开发者在开发的过程中有遇到问题时，除了询问他人以外，还可以使用搜索引擎搜索。社区的重要性就显而易见了，大部分开发者会在开发社区分享他们经验，如何避过不必要踩的坑。

国内：

  • 谷歌开发者社区(GDG)：开放 · 分享 · 创新
  • segmentfault：是中国领先的开发者技术社区。 为编程爱好者提供一个纯粹、高质的技术交流的平台, 与开发者一起学习、交流与成长。【老实话我觉得这名字不好记】
  • 全栈社区：中国最大的全栈开发者社区,致力于打造一个问题解答,技术文章分享,全栈人员创业的服务平台,让开发更容易,让创业更简单.
  • 稀土区：专注开发设计资源分享，UI模板资源，ICONS资源，HTML模板资源等等.......

国外：

Web开发新闻聚合

自动草稿阅读开发和设计的技术干货，及时的知道技术圈内更新了什么，保持信息流新鲜，有助于我们更好的开发！

国内：

  • 掘金：掘金是中国质量最高的技术分享社区，邀请稀土用户作为Co-Editor 来分享优质的技术干货，从前端到后端开发，从设计到产品，让每一个掘金用户都能挖掘到有价值的干货。
  • 开发者头条：一个以程序员为中心，基于学习和分享的开发者社区。你可以阅读头条新闻、分享技术文章、发布开源项目，订阅技术极客们创建的学习主题和关注编程牛人。
  • 极客头条：技术文章聚合站点，目测现在运营力度减弱。
  • 推酷：以技术为驱动，以聚合挖掘为核心，打造个性推荐和订阅，给你一站式的阅读。 更汇聚优质公开课和线下活动，让信息知识获取更便捷。

国外：

标签: , , , , , , 没有评论
144月/170

浅谈围绕业务和资源的成熟度，设计团队和项目管理模型

发布在 邵珠庆

房如华： 从五人到五十人：浅谈围绕业务和资源的成熟度，设计团队和项目管理模型

 

如何度量研发和项目管理模型是否良好的支持了业务发展？

互联网的产品植根于高度充分竞争的土壤中，对外界环境的变化是非常敏感的，我们不能保证时刻都做正确的事，因为正确是相对的。在传统软件行业里，通常软件会被交付给明确的客户群体，那么软件的品质只与是否满足了客户需求，以及与同类产品的相对优势有关。而一款互联网产品，在出生之日起，就面临着用户的不确定性，用户需求迁移的不确定及复杂性，竞品可能来自多个领域等因素，我们唯一能够确定的就是变化本身。

研发和项目的管理模型，实际上就是团队的能力成熟度模型。我们既不能在缺人的时候才开始招人、培养人，也不能在业务尚未成熟时招到无法施展拳脚的专家，同时还要确认团队中的大多数同学的潜力能够跟随业务一起成长，否则团队在早期的波动会严重影响甚至毁灭整个业务的进程。因此，业务的成熟度与团队的能力成熟度是呈双螺旋不断迭代的，两者不能产生较大的偏差。

评估两者是否匹配的标准，我认为主要有以下两点：

  1. 敏捷性：能够控制从“决定做某种修改”到“该修改结果正式上线”的这段时间，也叫做周期时间（cycle time）
  2. 灵活性：只有当能够控制每一次从引入变更到发布的整个过程时，你才能开始优化和改进软件交付的速度和质量。

下面，为了简化表述，我们把业务和团队的成熟度分为四个阶段，每个阶段有其自身的特点和面临的挑战，接受并克服了这些挑战，团队将变得更为强大。

0-5人：挖下成功的第一锹泥土

当你想办法向你的老板或者投资人讲完一个美妙的故事之后，你就拥有资源了，这时你需要的是招募（确切的说是说服）一个能够把事情做起来的初始团队，也许一开始只有5个人，但不要紧，明确好从0到1的目标，马上开始工作吧。

这一步通常是用最小的抛弃成本来验证目标、团队的可行性。你要想办法在团队没有产生自我怀疑之前，把事情尽快做成。此时，应遵循INVEST原则，即独立的（Independent）、可协商的（Negotiable）、有价值的（Valuable）、可估计的（Estimable）、小的（Small）并且可测试的（Testable）。

对于这5个人，角色分工很简单，你是项目经理，其他成员都是研发人员，一切资源面向把事情做成。沟通方式是次要的，大家坐在一起，早期不会有太大的沟通障碍。此时人员的单点不是最大的风险，没人测试也不是最大的风险，因为很多项目没等第一个Demo做出来就已经失败了。

但不关心沟通不代表工具是次要的。好的工具可以极大的提高工作的效率，例如代码控制、Wiki这些基本的工具还是要使用的，而且等团队成型之后，容易成为团队文化基因的一部分。

这个阶段对团队的技能和经验也提出了一些必要的挑战：

  1. 需要有解决问题能力很强的人，在项目因各种原因停滞的时候需要有人站出来解决；
  2. 需要有较强项目过程管理能力的人，在优先级、项目品质等方面受资源影响需要调整计划时，要能基于不全面的信息做出合理的决定。
  3. 要从一开始就让团队养成持续交付的习惯。持续交付就是要形成需求、开发、测试、部署的流水线。对于早期团队来说，就要想办法让部署的工作流水线化。首先，版本控制是必要的，它能够保证随时checkout一个版本用于上线，并且随时回滚；其次，配置管理也是必要的，方便我们基于部署环境编写不同的配置文件；最后，部署的变更管理也是重要的，而且需要尽可能的自动化，为什么要自动化？因为早期你的产品很显然会出现大量的缺陷，你唯一能做到的就是把缺陷在代码里修复之后，以秒级的速度发布到线上。目前国内有很多初始成本低廉的公有云产品可以使用，通过写一些简单的脚本，可以把程序和配置快速发布到一个高可用的环境中。
5-20人：踌躇满志，更快的奔跑

初始的业务模式得到验证，团队活下来了，可以沿着预计的大方向前进了，这时候，终于可以把之前的Demo细化了，因为Demo只是跑通了流程，但此时产品可能连可用性还谈不上呢。

你招来了一名产品经理，他开始兴致勃勃的编制未来半年，甚至一年的路线图。假设能够完成这些需求，并保证品质，那么前途是一片光明，并有望领先大部分竞争对手。

这时，作为项目负责人的你，欣慰的发现产品经理在大多数方面和你的业务见解是一致的，因为都提出了大量不得不做的需求，我们确实辜负了用户太多的期待，但你突然意识到一个更关键的问题，完成这些的资源远远不够！

要开始做取舍了，你知道在这个冗长的列表里，永远存在“更有价值“的需求。

好的，列一个Excel，我们开始排个序。

判断优先级的标准是什么？很简单，做两个极端的假设，一个是：哪个需求不做会死人？另一个是：哪个需求带来的预期收益更大？

可能有的需求需要加三个月的班才能完成呢，浪费了时间，贻误战机怎么办？其实不用担心，先把可用性做好，再找你的目标用户群体不晚，在此之前，患得患失是无意义的。

与其患得患失，不如多花点开发量，做点更“精益”的事吧。比如通过小范围的用户测试、灰度发布等方法，快速验证产品的可用性，使用尽可能多的用户行为分析软件来评估你的用户按照你的预期使用了功能并且留存下来。这样万一你先前的决定是错误的，你也可以用较小的抛弃成本来调整方向，少留些遗憾给未来。

努力奔跑的日子总是充满期待的，但你也经常会从资深的员工嘴里听到些许纠结：“我是不是该重构了？”先重构后开发总是没坏处的，这正是素养优秀的表现。然而此时你仍需要帮助他们进行取舍，合理的留下一些技术负债。

如何判断要留下哪些负债呢？

负债产生利息吗？也就是未来团队和业务复杂度不断增加的情况下，是否会让技术问题的影响范围扩大，或是优化成本不断升高直至失控？如果负债会产生短期的利息，那么把精力花在减少利息和让业务加速奔跑相比，哪个更合算？

当前的负债，能够通过后期招募一名专业、资深的成员，用更少的时间、更好的经验或者更成熟的组件来一次性解决它吗？

如果某个业务模块的需求变化本身是频繁的，那么此处产生的负债也是不确定的，刻舟求剑的优化之后，发现需求已经变化了，也是一种浪费。

在这个阶段，因为引入了制定需求和跟踪缺陷的角色—产品经理，所以需要使用工具来对需求和确信进行追踪，一个类似Bugzilla的开源缺陷跟踪软件就能满足你大部分的需求了。

20-35人：总体产出随人数增加减缓，团队能力出现瓶颈

你的团队成型了，80%的成员都是工程师，他们努力的实现着一个一个小的目标，照此速度运转下去，似乎你脑海中的那个路线图就要实现了！

“继续招人吧！多一倍的资源投入就能换来多一倍的回报，因为他们负责的业务模块是不同的，不会产生沟通上的麻烦。”

观点听起来很有道理，但实际是错误的，你的团队毕竟不是流水线上的组装工人，更何况，随着事情越来越复杂，沟通的交集是不可避免的。这就好比一片森林，地表以上的树干都是笔直挺拔，互不影响，但地表以下的树根已不可避免的盘根错节在一起，更可怕的是，没人能完整的掌握这种交集的状态，更不要提如何改进了。于是，一辆战车抛锚了，而看起来任何人都没做错什么。

瓶颈到来了。

我们知道在早期的网络通信技术里有一个名词叫做“广播风暴”，指的是在集线器组成的共享网络下，所有用户的实际可用带宽，随用户数的增加而递减，并且在争抢信道的时候产生用户的等待。

这是不是很像目前你的未被治理的早期团队遇到的情况？为了确保每个人都得到足够的信息，全员会议在增加，人数越多，会议议程越复杂导致沟通成本的进一步增加，这还不包括团队成员随时被打断、叫到某个会议中的情况。

集线器最终被交换机和路由器彻底的取代了。随着团队增长，也需要主动革新现有的成员之间的沟通协作方式。

沟通的本质是解决信息传递问题，让信息的生产者能够尽快抵达必要的受众。但自发的信息传递并不保证效率，也不保证可达，所以需要一个协调员来优化沟通的效率，当然协调员就不能总是组织全体会议了。

  1. 必要的信息，还是要广播出去，提到Dashboard的概念，Dashboard是团队成员需要得到的信息的最小子集，通过这些信息，团队成员能够基于自身角色和目标的考量，迅速开展后续行动。如何让Dashboard的变更成本最小化？就必须协作了，一开始这种协作是痛苦的，因为并没有流程来保证不同角色间信息传递是一致的，所以只好让团队中的每个角色的关键成员都来更新Dashboard，刚开始会出现大量的信息不完善、不一致甚至自相矛盾的情况，但不要怕，频繁的去做，坚持两三周，情况一定会好转，管理就是不断重复，把主观上想做好变为真正有能力做好的过程。
  2. 局部的信息传递给团队中局部的群体，该如何来操作呢？如果你的团队中有几个人具备项目经验和较强的责任心，还是可以通过定期的会议和不定期的沟通来解决的，但你一定觉得在这个阶段投入专职的项目管理或流程优化的人员还是过于奢侈了，那么不要紧，充分利用好工作流这个IT界的伟大发明吧。工作流能够让你的团队根据一系列预先设定好的过程规则，将文档、信息、任务在不同的执行者之间进行传递与执行，避免人工的方式造成的低效、等待和错误。可以考虑购买Atlassian的Jira软件，这可能是你的第一笔软件投资了，或许觉得有些昂贵，但这一定比你招募一个专职的员工便宜多了。
  3. 加强团队不同角色对信息中“一致”的部分的约定，例如版本，版本用于识别一篇文档、一份代码的各个时间点的历史快照，不同角色的成员基于对版本的一致命名，可以有效的识别需求、实现、部署工作之间的对应关系。
35-50人：重装上阵，提高整体交付品质和团队成熟度

你拖着沉重的身躯，靠一己之力把团队带到了一个执行力和结果都还不错的状态，终于可以停下来歇一歇了。

这是大多数业务负责人梦寐以求的状态，但要想从同行中杀出血路，保持进一步的竞争优势，这还不够完美。

你望着窗外鳞次栉比的建筑物，发现大多数二三十层的楼房并没有什么不同，但鹤立鸡群的几幢摩天大楼，让你意识到，一定有一些工作是只有某些人才能完成的，而当你的进取心激发你要建造摩天大楼的时候，你也需要他们。这就是专家的价值。

如果你想停止修修补补的民工游击队的日子，就在这个时候引入专家团队，来让团队变得更加高大上吧。

专家能扮演怎样的角色，取决于你需要他们发挥怎样的作用，每位专家都有自己擅长的工作模式，你需要了解他们的工作偏好，以帮助你改善团队的能力基因。

  1. 架构师：具备一定的理论高度，并在相当规模的环境下，成功的完成过研发或管理能力的升级。他倾向于了解到具体情况后去务实的推进解决问题，并怀着积极和包容的沟通心态获取团队的支持。这种工作模式的优势是目标明确，执行有力；劣势是可能过程中需要调用较多的资源，会与业务线的资源调配产生优先级上的冲突。
  2. 咨询师：他不是最主动或者最敏感解决问题的人，也许平常他只是收到各个项目组抄送给他的邮件，但遇到紧急情况时，能够快速亲自解决，或者叫上其他同学一起会诊，对于可能会重复出现的问题，或者重复产生的工作量，会设法通过优化流程来降低内部消耗。这种工作模式的优势是面向问题持续迭代团队，确保短期的成果总是可被衡量的；劣势是受团队现有成员的视野的限制较大，总是踩过坑后才能促使团队意识到问题并统一思想。

此外，还要使用IT管理的思想来提高团队的流程成熟度和专业度，从而提高整体交付品质。

互联网的商业化只经历了短短的不到二十年的时间，但在此之前，IT的信息化就已经在国外很多企业中普及开来了，企业中的大部分员工是使用IT设备作为生产力工具和协作沟通的渠道，那么如何支持好IT基础设施就变成了很重要的工作，并由此催生了IT服务管理的概念，在20世纪80年代末期，还由英国政府部门发起制订了一个信息技术基础架构库即ITIL，到目前已修订至第3版，从流程的规范制订，发展为面向全生命周期的服务管理。

虽然前面反复提到：互联网与IT企业对于需求的管理存在相当大的差异，但这只会促使我们思考如何吸取面向交付品质的ITIL的理念，并在此基础上让一切环节运转在一条流水线上，并想方设法让流水线变得更快。

让流水线变的更快，可以从两个角度进行优化，一个是提高效率，一个是减少损耗。工具的高度自动化，把尽可能多的事情交给机器去做是提高效率的最显而易见的方法。那么减少损耗呢？通常因为测试资源、环境复杂性等问题，导致原本在测试环境运转正常的软件，在服务器或者用户的手机上出现了问题，你几乎没有办法在生产运行环境下远程调试和修改程序，但这些问题又无法复现，所以捕获现场就变成了非常重要的事。日志和监控是经无数团队和项目证明的最重要的两种捕获现场、衡量线上交付品质的方式，所以在你的团队有允许的资源时，一定要有专人面向其进行持续的分析、优化和质量评价。

总结
  1. 在业务还比较小的时候，要面向成功率最大化进行团队资源配置，随着业务的逐步发展，资源配置的原则要逐步倾斜至执行效率、交付品质，直至从理论的高度设计相应的流程和角色来固化你的团队，使之变得优质、高效、稳定、可控。
  2. 充分利用工具，尽可能将一切工作自动化。
  3. 重复、频繁的做一件事，尤其是你发现这件事情既重要又困难的时候。
  4. 在你的团队没有强大到能够筑巢引凤的时候，不用花精力弥补技能的短板，因为成功率低，回报也有限，反而对团队的项目管理要亲力亲为，识别损耗并推动改进。
标签: , , , , , , , , 没有评论
107月/150

国内外权威的网上学习资源网站

发布在 邵珠庆

艺术与音乐

  • Dave Conservatoire — 一个完全免费的音乐学习网站，口号是“让每一个人都可以接受世界级的音乐教育”，有视频，有练习。
  • Drawspace — 如果你想学习绘画，或者提高自己的绘画技能，就来Drawspace吧。
  • Justin Guitar — 超过800节免费的吉他课程，有自己的app，还有电子书、DVD等实用内容。

数学，数据科学与工程

设计，网页设计与开发

  • HOW Design University — 主要教授图像与交互设计。
  • HTML Dog — 学习 HTML, CSS 和 JavaScript 编程技能。
  • Skillcrush — 提供职业网页设计与开发课程。
  • Hack Design — 全球顶级设计师教你网页/app设计，完全免费。

综合

  • Scratch – Imagine, Program, Share — 为小孩子设计，通过游戏学编程。
  • Udemy — 通过教学视频教你生活和工作中的实用技能，需要付费。
  • E-learning for kids — 向5-12岁的儿童提供小学程度基础课程。
  • Ed2go — 又一个学习技能的线上课程网站，主要面向成年人。
  • GCF Learn Free — 由 Goodwill Community Foundation 和 Goodwill Industries 创办，教授实用技能。（我已经词穷了。。）
  • Stack Exchange — 嘿！一个类似果壳问答的超赞的问答网站，回答质量都超级高。
  • HippoCampus — 主要面向中学生。
  • Howcast — 通过视频学习日常生活小技能。
  • Memrise — 用游戏化的概念学习语言。
  • SchoolTube — 面向中小学生，称有50万视频。。
  • Instructables — 一个DIY网站。
  • creativeLIVE — 教你摄影、音乐、设计等技能，要付费。
  • Do It Yourself — 教你成为家居改造达人。
  • Adafruit Learning System — 提供免费电子设备DIY教程。
  • Grovo — 学习如何使用上百种网站应用，提高自己的工作效率。

大学课程

IT与软件开发

语言类

  • Duolingo – 中文名「多邻国」，据说学习方式非常有效。我感觉它的app设计得不错。主要推荐英语和别的欧洲语言。（@秋纫 补充）
  • lernu.net – 在多邻国的世界语课程出来之前，这应该是学习世界语最好的网站了吧。不过，它除了课程以外还有一个挺好玩的社区，和一些阅读材料。（@秋纫 补充）

—

标签: , , , , 没有评论
105月/123

SEOer人员必用十六个外链资源检查工具

发布在 邵珠庆

做为一位从SEOer一路走过来的人来讲，SEO优化离不开网站的外链，为了做外链很多人苦恼到底该哪里做起?怎么做有效果?在这里小戴整理了一些外链比 较好的基地分享给你们，要想在一些主流搜索引擎上获得好的排名，当然这也是优化人士希望得到的一个效果，同时作为一个外链建设工作者，我觉得必须要了解自 己竞争对手外链的分布情况。这样才能知道自己缺在哪里?哪一块没跟上?在充分了解对手的基础上，可以让我们的外链建设工作更加容易，而且更加有效率!虽然 我们在一些文章中都有提及如何寻找更多的外链资源，但如果配合以合适的工具，会事半功倍!下面列举的这些工具，不但可以帮你挖掘竞争对手的外链情况，而且 还能帮你找到更多的免费外链机会：那下面我就把这十六种比较好的外链工具分享给你们吧。

　　NO.1：Link Appeal Tool – 这个是网站友情链接质量检测工具，想必还有一些初学者不知道的，没关系，今天你看到了这篇文章，你就知道了。检测你站点里的外链情况以及其他因素，然后寻找一些高质量的其他链接!这样有益网站更好的发展!

　　NO.2：Recip Links – 同时也是网站上友情链接检测工具，但是用起来不是很方便，不过要耐心一点可以检查一个或者多个站点是否有反链到某一指定站点。懂我的意思了吗?

　　NO.3：Search Combination – 同样是外链资源查找工具，和Webconfs’ Back link Builder以及SoloSEO Link Search Tool的功能差不多，但是这个工具可以让你自行组合，非常的个性化，本人很喜欢用。

　　NO.4：Link Harvester – 同样是SEObook出品的在线工具，出来上面那些工具的功能外，这个工具不提供锚文本分析，但是却可以将同一域名的外链进行整理，而且碰到教育及GVM网站外链时，会做特别提示!相信你用了就会明白是怎么回事了。

　　NO.5：Google管理员工具 – 相信很多人会搭配Yahoo Site Explorer以及Google管理员工具一起使用，但是只能分析自己网站的外链状况，以及锚文本。而前面两个工具生成的“Footprints”都是 系统内置的，无法根据自己的需求来生成脚印!值得一用!

　　NO.6：Yahoo Site Explorer – 这个恐怕是国内最为熟知的外链分析工具了。功能上其实并不必上面两个强，但是可以快速的得到网站的外链数量，以及前1000个外链连接，而且可以显示外链页面的标题，这是与上面两个工具只列出URL不同的地方!

　　NO.7：Analyze Backlinks(分析反链) – 一个挖掘竞争对手外链的好工具。这个工具提供了过个选项，可以选择是否过滤同一个域名下的其他来连接，是否只显示首页连接，是否分析锚文本，是否分析外链数量等。让你有更多的控制权。

　　NO.8：Backlink Watch(反链观察) – Backlink Watch是非常流行的一个外链检测工具，可以非常方便的分析出网站的外链地址，使用的锚文本以及外链页面的到处连接数(OBL)，以及连接属性，nofollow时会做标示。

　　NO.9：Google搜索 (link:yoursite.com) – 和Yahoo的工具没多大的区别，不过通常Google语法搜索出来的外链比Yahoo分析出来的少很多，但是这些搜索出来的页面往往都是影响了网站排名的链接，利用价值很高!

　　NO.10：Alexa外链检测工具 – 这个比较少用，当你查看网站Alexa数据时，可以看到有多少域名链接到了该站，而且会给出详细列表。更新速度相当缓慢，但是质量却是很高。Alexa主要是用来查看网站的排名数据!

　　NO.11：Bad Nei**orhood Text Link Tool – 一个检测链接健康状况的检测工具，可以同时检测你的内链，友情链接，已经对方链接页面的链接健康状况!

　　NO.12：SoloSEO Link Search Tool – 一个非常另类的工具，当你输入一个关键词时，该站可以为你自动生成各种“外链脚印(Footprint)”，包括目录站，博客，论坛等搜索语法， 利用这些footprints到Google去搜索，你会找到大量的相关链接资源!

　　NO.13：Webconfs’ Back link Anchor Text Analysis – 这是一个专门分析网站外链所使用的锚文本的工具，可以用来查看对手网站外链所使用的锚文本状况，以便作为自己的参考!

　　NO.14：Webconfs’ Back link Builder – 很简单的外链资源查找工具，输入你的关键词，工具会自动为你查找含有包含你关键词的可能链接资源，主要利用“Add site”，“Add URL”，”比如Add URL+www.ysbyb.com 然后点击Submit link”等等特征符进行列举，等于是SoloSEO Link Search Tool的一个进化版。

　　NO.15：Webconfs’ Backlink Summary – 基本的网站外链挖掘工具，和前面介绍的几个没有太大的区别，可以一用.

　　NO.16：火狐浏览器SEO插件 – 大名鼎鼎的SEObook出的插件，可以分析出网站的各项数据，包括PR值，外链状况，GVM教育站链接，社会化网络等等，最大的特点是，当链接属性是Nofollow时，会以红色标出，SEO必备插件!

　　好了，今天就分享到这里吧，建议大家有空常上chinaz和A5里面学习交流，能学到不少的东西。以上16个工具，可以根据自己的需要选择使用。并不 是每个人都喜欢的，看个人爱好吧，记住工具是死的，我们伟大的人是活的，要灵活运用，如果更好的利用这些免费的工具，好好的学习，明天会有不一样的成绩出 来。祝大家学习进步，有好的东西可以拿出来分享。

标签: , , , , 3 评论
36月/110

用户体验参考资源

发布在 邵珠庆

（一）关于体验

约瑟夫。派恩和詹姆士。吉尔摩在《体验经济》一书中提出其观点：所谓“体验”就是企业以商品为道具，以服务为舞台，以顾客为中心，创造出可以使消费者全面参与、让消费者感到值得回忆的活动。

体验是使每个人以个性化的方式参与消费，在消费过程中产生情绪、体力、心理、智力、精神等方面的满足，并产生预期或更为美好的感觉。

体验的核心就是顾客参与，体验营销的消费者充分发挥自身的想象力和创造力，主动参与产品的设计、创造和再加工。

通过创造性的消费来体现独特的个性和价值，获得更大的满足和成就感。体验营销的焦点放在顾客体验上，把顾客作为价值创造的主体，及时回应消费者的感情诉求。

（二）网络体验

网站体验，指的是利用网络特性，为客户提供完善的网络体验，提高客户的满意度，从而与客户建立起紧密而持续的关系。

网络的体验，是体验的延伸。随着网络的普及，网络体验成为体验营销不可缺少的重要组成部分。

（三）网站体验的分类

1、感官体验：呈现给用户视听上的体验，强调舒适性。
2、交互体验：呈现给用户操作上的体验，强调易用/可用性。
3、情感体验：呈现给用户心理上的体验，强调友好性。
4、浏览体验：呈现给用户浏览上的体验，强调吸引性。
5、信任体验：呈现给用户的信任体验，强调可靠性。

（四）网站体验的76个体验点

一、感官体验：呈现给用户视听上的体验，强调舒适性。

1. 设计风格：符合目标客户的审美习惯，并具有良好的引导性。
网站在设计之前，必须明确目标客户群体，并针对目标客户的审美喜好，进行分析，从而确定网站的总体设计风格。
2. 网站LOGO：确保logo的保护空间，确保品牌的清晰展示而又不占据过分空间。
3. 页面速度：正常情况下，尽量确保页面在5秒内打开。如果是大 型门户网站，必须考虑南北互通问题，进行必要的压力测试。
4. 页面布局：重点突出，主次分明，图文并茂。与企业的营销目标相结合，将目标客户最感兴趣的，最具有销售力的信息放置在最重要的位置。
5. 页面色彩：与品牌整体形象相统一，主色调+辅助色不超过三种颜色。以恰当的色彩明度和亮度，确保浏览者的浏览舒适度。
6. 动画效果：与主画面相协调，打开速度快，动画效果节奏适中，不干扰主画面浏览。
7. 页面导航：导航条清晰明了、突出，层级分明。
8. 页面大小：适合多数浏览器浏览（以15寸及17寸显示器为主）。
9. 图片展示：比例协调、不变形，图片清晰。图片排列既不过于密集，也不会过于疏远。
10. 图标使用：简洁、明了、易懂、准确，与页面整体风格统一。
11. 广告位：避免干扰视线，广告图片符合整体风格，避免喧宾夺主。
12. 背景音乐：与整体网站主题统一，文件要小，不能干扰阅读。要设置开关按钮及音量控制按钮。

二、交互体验：呈现给用户操作上的体验，强调易用和可用性。

13. 会员申请：介绍清晰的会员权责，并提示用户确认已阅读条款。
14. 会员注册：流程清晰、简洁。待会员注册成功后，再详细完善资料。
15. 表单填写：尽量采用下拉选择，需填写部分需注明要填写内容，并对必填字段作出限制。（如手机位数、邮编等等，避免无效信息）
16. 表单提交：表单填写后需输入验证码，防止注水。提交成功后，应显示感谢提示。
17. 按钮设置：对于交互性的按钮必须清晰突出，以确保用户可以清楚地点击。
18. 点击提示：点击浏览过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避免重复阅读。
19. 错误提示：若表单填写错误，应指明填写错误之处，并保存原有填写内容，减少重复工作。
20. 在线问答：用户提问后后台要及时反馈，后台显示有新提问以确保回复及时。
21. 意见反馈：当用户在使用中发生任何问题，都可随时提供反馈意见。
22. 在线调查：为用户关注的问题设置调查，并显示调查结果，提高用户的参与度。
23. 在线搜索：搜索提交后，显示清晰列表，并对该搜索结果中的相关字符以不同颜色加以区分。
24. 页面刷新：尽量采用无刷新（AJAX）技术，以减少页面的刷新率。Ajax是新兴的网络开发技术的象征。它将JavaScript和XML技术结合在一起，用户每次调用新数据时，无需反复向服务器发出请求，而是在浏览器的缓存区预先获取下次可能用到的数据，界面的响应速度因此得到了显著提升。
25. 新开窗口：尽量减少新开的窗口，以避免开过多的无效窗口，关闭弹出窗口的功能。
26. 资料安全：确保资料的安全保密，对于客户密码和资料进行加密保存。
27. 显示路径：无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。

三、浏览体验：呈现给用户浏览上的体验，强调吸引性。

28. 栏目的命名：与栏目内容准确相关，简洁清晰，不宜过于深奥。
29. 栏目的层级：最多不超过三层，导航清晰，运用JAVAscrip等技术使得层级之间伸缩便利。
30. 内容的分类：同一栏目下，不同分类区隔清晰，不要互相包含或混淆。
31. 内容的丰富性：每一个栏目应确保足够的信息量，避免栏目无内容情况出现。
32. 内容的原创性：尽量多采用原创性内容，以确保内容的可读性。
33. 信息的更新频率：确保稳定的更新频率，以吸引浏览者经常浏览。
34. 信息的编写方式：段落标题加粗，以区别于内文。采用倒金字塔结构。
35. 新文章的标记：为新文章提供不同标识（如new），吸引浏览者查看。
36. 文章导读：为重要内容在首页设立导读，使得浏览者可以了解到所需信息。文字截取字数准确，避免断章取义。
37. 精彩内容的推荐：在频道首页或文章左右侧，提供精彩内容推荐，吸引浏览者浏览。
38. 相关内容的推荐：在用户浏览文章的左右侧或下部，提供相关内容推荐，吸引浏览者浏览。
39. 收藏夹的设置：为会员设置收藏夹，对于喜爱的产品或信息，可进行收藏。
40. 栏目的订阅：提供Rss或邮件订阅功能
41. 信息的搜索：在页面的醒目位置，提供信息搜索框，便于查找到所需内容。
42. 页面打印：允许用户打印该页资料，以便于保存。
43. 文字排列：标题与正文明显区隔，段落清晰。
44. 文字字体：采用易于阅读的字体，避免文字过小或过密造成的阅读障碍。可对字体进行大中小设置，以满足不同的浏览习惯。
45. 页面底色：不能干扰主体页面的阅读。
46. 页面的长度：设置一定的页面长度，避免页面过长而影响阅读。
47. 分页浏览：对于长篇文章 进行分页浏览。
48. 语言版本：为面向不同国家的客户提供不同语言的浏览版本。
49. 快速通道：为有明确目的的用户提供快速的入口。

四、情感体验：呈现给用户心理上的体验，强调友好性。

50. 客户分类：将不同的浏览者进行划分（如消费者、经销商、内部员工），为客户提供不同的服务。
51. 友好提示：对于每一个操作进行友好提示，以增加浏览者的亲和度。
52. 会员交流：提供便利的会员交流功能（如论坛），增进会员感情。
53. 售后反馈：定期进行售后的反馈跟踪，提高客户满意度。
54. 会员优惠：定期举办会员优惠活动，让会员感觉到实实在在的利益。
55. 会员推荐：根据会员资料及购买习惯，为其推荐适合的产品或服务。
56. 鼓励用户参与：提供用户评论、投票等功能，让会员更多地参与进来。
57. 会员活动：定期举办网上会员活动，提供会员网下交流机会。
58. 专家答疑：为用户提出的疑问进行专业解答。
59. 邮件/短信问候：针对不同客户，为客户定期提供邮件/短信问候，增进与客户间感情。
60. 好友推荐：提供邮件推荐功能。
61. 网站地图：为用户提供清晰的网站指引。

五、信任体验：呈现给用户的信任体验，强调可靠性。

62. 搜索引擎：查找相关内容可以显示在搜索引擎前列。
63. 公司介绍：真实可靠的信息发布，包括公司规模、发展状况、公司资质等。
64. 投资者关系：上市公司需为股民提供真实准确的年报，财务信息等。
65. 服务保障：将公司的服务保障清晰列出，增强客户信任。
66. 页面标题：准确地描述公司名称以及相关内容。
67. 文章来源：为摘引的文章标注摘引来源，避免版权纠纷。
68. 文章编辑作者：为原创性文章注明编辑或作者，以提高文章的可信度。
69. 联系方式：准确有效的地址、电话等联系方式，便于查找。
70. 服务热线：将公司的服务热线列在醒目的地方，便于客户查找。
71. 有效的投诉途径：为客户提供投诉或建议邮箱或在线反馈。
72. 安全及隐私条款：对于交互式网站，注明安全及隐私条款可以减少客户顾虑，避免纠纷。
73. 法律声明：对于网站法律条款的声明可以避免企业陷入不必要的纠纷中。
74. 网站备案：让浏览者确认网站的合法性。
75. 相关链接：对于集团企业及相关企业的链接，应该具有相关性。
76. 帮助中心：对于流程较复杂的服务，必须具备帮助中心进行服务介绍

标签: , , 没有评论
75月/110

75个最佳Web设计资源，强烈推荐！

发布在 邵珠庆

字体

Typography Resources

- 60 套公司用设计字体 [Smashing Magazine]

- 20 套免费手写字体与资源 [Fuel Your Creativity]

- 50 套专业Web设计与印刷用字体 [Noupe]

- 15 套漂亮的高质量免费字体 [Smashing Magazine]

- 21 套来自 DeviantArt 的艺术字体 [Designflavr]

- 设计专业人士使用的7套最佳字体 [Just Creative design ]

- 45 套符合现代设计趋势的免费漂亮字体 [Six Revisions]

css

- 50 个强大的 CSS 实用工具 [Smashing Magazine]

- 30 套 CSS 小炒资料 [All Web design Resources]

- CSS 编辑器评测 [Smashing Magazine]

- CSS 高手的 10 个原则 [NETTUTS]

- 2008 最佳 CSS 设计 （中文 ） [Web Designer Wall]

- 40 个 CSS 生成器 [All Web design Resources]

- 重置你的CSS [Six Revisions]

- 实现干净代码的12条定律 （中文 ） [Smashing Magazine]

Logo 设计

Logo Design Resources

- 81 个最佳 Logo 设计资源 [Logo design Love]

- 最佳Logo设计资源 [Just Creative design ]

- 105 个Logo设计资源 [Elite By design ]

- 35 个令人目眩的黑白 Logo [Siah design ]

- 50 套能够带来启发的 Logo [Fuel Your Creativity]

- 2008 年 33 个不俗的 Logo 重设计 [Smashing Apps]

- 30 个精彩的矢量 Logo 设计 [VECTORTUTS]

- 10 个成功的 Logo 设计 [Logo design Love]

图标

Icons

- 2008年50套最漂亮的图标 [Noupe]

- 40 套漂亮的免费图标 [Six Revisions]

- 22 套全新高品质免费图标 [Elite By design ]

- 40 套超漂亮的图标 [Noupe]

设计启发

Inspiration Resources

- 50 个漂亮的博客设计 [Smashing Magazine]

- 40 个有创意的按钮 [PSDTUTS]

- 60 个非常 Cool 非常有创意的 404 页面 [Hongkiat]

- 30 个漂亮的 Web 设计例子 [Six Revisions]

- 2008年40个具有启发性的 Web 设计 [CrazyLeaf design Blog]

- 50 个漂亮的导航菜单 [Vandelay Website design ]

- Web 设计中的57个矢量字符 [CSSLeak]

- 50 个漂亮的，有创意的展示类站点设计 [Smashing Magazine]

- 40 个漂亮的暗色系 CSS 设计 [Toxel]

- 40 个漂亮的手画 Web 设计 [CSSBuilt]

- 79 个精彩的专辑封面 [Inspiredology]

- 40 套有创意的名片设计 [Toxel]

- 纹理与图样设计展示 [Smashing Magazine]

- 54 幅令人灵魂出窍的数字画 [PSDTUTS]

- 50 个出色的博客页脚设计 [Hongkiat]

- 24 个漂亮的，有创意的网站 Header 设计 [Toxel]

- 富有灵感的 PDF 杂志设计 [Smashing Magazine]

教程

Tutorials

- 41 个最好的 Photoshop 效果教程 [Hongkiat]

- 30 个漂亮的 Photoshop 文字效果教程 [Six Revisions]

- 70 个 Photoshop 美容教程 [Smashing Magazine]

- 50 个很棒的 Photoshop 教程 [PSDTUTS]

- 30 个 Fireworks 教程 [Arbent]

- Adobe Fireworks 教程与下载 [Smashing Magazine]

- 40 个 Wacom 数字画板教程 [DesignM.ag]

- 50 个出色的 AJAX 教程 [Smashing Magazine]

- 50 个富有创意的 Photoshop 文字效果教程 [PSDTUTS]

- 23 个不可思议的 Photoshop 教程 [Elite By design ]

- Adobe Illustrator 教程 [Smashing Magazine]

Photoshop 资源下载

Photoshop Downloads

- Photoshop Custom Shapes 集 [Smashing Magazine]

- 20 个 Photoshop 印刷作品与画笔资源 [PSDTUTS]

- 75 个超高分辨率 Photoshop 画笔 [Elite By design ]

- 50 个不可或缺的 Photoshop 画笔 [Smashing Magazine]

- 200 套 Photoshop 画笔 [You the Designer]

- 50 套免费的 Photoshop Pattern [Emma Alvarez]

- 55 套免费的画笔与矢量图 [Web Resources Depot]

- 40 套 Photoshop 万圣节主题画笔 [PSDFan]

wordpress

WordPress Resources

- 100 出色的 WordPress 免费主题 [Smashing Magazine]

- 30 个最实用的 WordPress 技巧 [Hongkiat]

- 45 套免费的 WordPress 网格布局主题 [WPZOOM]

- 45 套必须要看到 WordPress 主题 [Noupe]

- 20 套 WordPress 公司网站主题 [Blogsessive]

- 24 套高质量免费 WordPress 主题 [Toxel]

- 21 套令人耳目一新的免费Wordpress主题 [Smashing Apps]

- 50 套漂亮的免费 WordPress 主题 [Six Revisions]

- 10 个寻找免费 WordPress 主题的地方 [UPrinting]

- 50 个最好的 WordPress 主题 [CrazyLeaf design Blog]

- 10 个 WordPress 实用 RSS 技巧 [Smashing Magazine]

- 45 个出色的免费 WordPress 主题 [DzineBlog]

标签: , , , , 没有评论
175月/080

资源文件查找顺序

发布在 邵珠庆

资源文件查找顺序

之所以说Struts 2.0的国际化更灵活是因为它可以能根据不同需要配置和获取资源（properties）文件。在Struts 2.0中有下面几种方法：

  1. 使用全局的资源文件，方法如上例所示。这适用于遍布于整个应用程序的国际化字符串，它们在不同的包（package）中被引用，如一些比较共用的出错提示；
  2. 使用包范围内的资源文件。做法是在包的根目录下新建名的package.properties和package_xx_XX.properties文件。这就适用于在包中不同类访问的资源；
  3. 使用Action范围的资源文件。做法为Action的包下新建文件名（除文件扩展名外）与Action类名同样的资源文件。它只能在该Action中访问。如此一来，我们就可以在不同的Action里使用相同的properties名表示不同的值。例如，在ActonOne中title为“动作一”，而同样用title在ActionTwo表示“动作二”，节省一些命名工夫；
  4. 使用<s:i18n>标志访问特定路径的properties文件。使用方法请参考文章《常用的Struts 2.0的标志（Tag）介绍》。在您使用这一方法时，请注意<s:i18n>标志的范围。在<s:i18n name="xxxxx">到</s:i18n>之间，所有的国际化字符串都会在名为xxxxx资源文件查找，如果找不到，Struts 2.0就会输出默认值（国际化字符串的名字）。

上面我列举了四种配置和访问资源的方法，它们的范围分别是从大到小，而Struts 2.0在查找国际化字符串所遵循的是特定的顺序，如图3所示：

图3 资源文件查找顺序图
图3 资源文件查找顺序图

假设我们在某个ChildAction中调用了getText("user.title")，Struts 2.0的将会执行以下的操作：

  1. 查找ChildAction_xx_XX.properties文件或ChildAction.properties；
  2. 查找ChildAction实现的接口，查找与接口同名的资源文件MyInterface.properties；
  3. 查找ChildAction的父类ParentAction的properties文件，文件名为ParentAction.properties；
  4. 判断当前ChildAction是否实现接口ModelDriven。如果是，调用getModel()获得对象，查找与其同名的资源文件；
  5. 查找当前包下的package.properties文件；
  6. 查找当前包的父包，直到最顶层包；
  7. 在值栈（Value Stack）中，查找名为user的属性，转到user类型同名的资源文件，查找键为title的资源;
  8. 查找在struts.properties配置的默认的资源文件，参考例1;
  9. 输出user.title。
标签: , , , 没有评论
   

支持博主

了解慈善捐款计划

关于邵珠庆博客

文章标签

API GA Git Google Analytics HTML5 jquery JS Linux MySQL nginx PHP SaaS web 互联网 代码 使用 分析 创业 原理 命令 好东西 如何 工具 常用 开发 总结 技巧 技术 插件 数据 文件 方法 时间 架构 框架 汇总 百度 管理 系统 网站 网站分析 设计 详解 问题 阿里云

记事邵珠庆博客

1、Web前端网址导航
2、邵珠庆极客筛站
3、识别移动设备访问代码


最近文章

最近评论

博客日历

2024年5月
一 二 三 四 五 六 日
« 8月    
 12345
6789101112
13141516171819
20212223242526
2728293031  

目录分类

文章归档

博客功能