Web前端开发技术与实践 第2章:开发工具 阮晓龙 13938213680/ rxl@hactcmeducn http://web.51xueweb.cr 问南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9
Web前端开发技术与实践 第2章：开发工具 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9 1
2 本章主要内容 口开发工具综述 口原型设计工具 口开发工具 口调试工具 米 口代码托管工具 口项目管理系统 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 本章主要内容 开发工具综述 原型设计工具 开发工具 调试工具 代码托管工具 项目管理系统 2
3 1开发工具综述 口Web前端开发工具根据开发的阶段和用途不同,可分为: ■Web设计工具 ■Web开发工具 ■Web管理与维护工具 Web调试工具 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.开发工具综述 Web前端开发工具根据开发的阶段和用途不同，可分为: Web设计工具 Web开发工具 Web管理与维护工具 Web调试工具 3
4 表201Web前端开发常用工具表 开发阶段 使用工具 Axure RP 原型设计 Microsoft office visio Adobe dreamweaver 技术开发 Oracle Netbeans Microsoft Visual studio FireFox Web调试 Google Chrome Internet Explore GitHub 代码托管 SVN Microsoft Project 项目管理 Collabtive 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 4
2原型设计工具 2.1什么是原型设计 口原型设计是将页面的模块、元素、人机、交互的形式,利用线 框描述的方法,将功能更加具体、生动的进行表达。 口原型划可分为以下3种类型 纸原型:画在文档纸、白板上的设计原型、示意图,便于修改和绘 制,不便于保存和展示。 低保真原型:基于现有的界面或系统,通过电脑进行一些加工后的 设计稿,示意更加明确,能够包含设计的交互和反馈,但在美观、 效果等方面欠佳。 高保真原型:包括产品演示Dem或概念设计展示,视觉上与实际产 品等效,体验上也与真实产品接近。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 2.原型设计工具 原型设计是将页面的模块、元素、人机、交互的形式，利用线 框描述的方法，将功能更加具体、生动的进行表达。 原型划可分为以下3种类型： 纸原型：画在文档纸、白板上的设计原型、示意图，便于修改和绘 制，不便于保存和展示。 低保真原型：基于现有的界面或系统，通过电脑进行一些加工后的 设计稿，示意更加明确，能够包含设计的交互和反馈，但在美观、 效果等方面欠佳。 高保真原型：包括产品演示Demo或概念设计展示，视觉上与实际产 品等效，体验上也与真实产品接近。 5 2.1什么是原型设计
项目启动 需求分析 市场调研 概念设计 跟进实现 用户访谈 数据挖掘 用户测试 文案策划 视觉设计 交互设计 风格设计 情景分析 力能设计 导航设计 原型设计的传统流程 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 6 原型设计的传统流程
2原型设计工具 22原型设计工具 Axure Rp 口简介 Axure是目前最受关注的原型设计工具,可以通过组件的方式帮助 网站或软件设计师快速建立带有注释的原型,并凭借自定义的可重 用元件、动态面板以及丰富的脚本建立能够展示基本功能或页面逻 辑的动态演示文件。 Axure借鉴 Office的界面,为用户提供了丰富的组件样式,通过该 工具能够创建低保真、高保真甚至接近于实际效果的界面。 aXure SEE IT HAPPEN 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 2.原型设计工具 简介 Axure是目前最受关注的原型设计工具，可以通过组件的方式帮助 网站或软件设计师快速建立带有注释的原型，并凭借自定义的可重 用元件、动态面板以及丰富的脚本建立能够展示基本功能或页面逻 辑的动态演示文件。 Axure借鉴Office的界面，为用户提供了丰富的组件样式，通过该 工具能够创建低保真、高保真甚至接近于实际效果的界面。 7 2.2原型设计工具-Axure RP
8 2原型设计工具 22原型设计工具 Axure Rp 口主要特点 快速建构概念原型 口利用 Axure几何形状、文字物件等可快速建立逼真的网站或APP原型。 ¤建立格线系统,精确实现汇入图片、建立色块、改变物件形状和半透 明填色等各种视觉表现的概念。 ■呈现逼真互动效果 口提供下拉选单、动态内容、状况逻辑设定、计算、动态Hide/Show Layer效果等互动物件与功能。 口模拟AJAX/ Flash动态效果,可以为客户提供一个真实网站的意象。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 2.原型设计工具 主要特点 快速建构概念原型 利用Axure几何形状、文字物件等可快速建立逼真的网站或APP原型。 建立格线系统，精确实现汇入图片、建立色块、改变物件形状和半透 明填色等各种视觉表现的概念。 呈现逼真互动效果 提供下拉选单、动态内容、状况逻辑设定、计算、动态Hide/Show Layer效果等互动物件与功能。 模拟AJAX/Flash动态效果，可以为客户提供一个真实网站的意象。 8 2.2原型设计工具-Axure RP
9 十 2 现场演示: 在 Windows7系统平台上安装 Axure rP Pro7.0 Axure rpz软件界面和基本使用方法。 ■使用 Axure rp实现百度登录页(或其他页面)的原型设计。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 9 现场演示： 在Windows 7系统平台上安装Axure RP Pro 7.0。 Axure RP软件界面和基本使用方法。 使用Axure RP实现百度登录页（或其他页面）的原型设计
10 3开发工具 3.1开发工具的作用 口开发工具的作用: ■用于对HTM、CSS和 JavaScripυt程序的编写。 将设计好的信息更好地呈现出来。 口目前基本上所有的软件开发ⅠDE工具,均能够较好的支持Web前 端开发的需求。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 3.开发工具 开发工具的作用： 用于对HTML、CSS和JavaScript程序的编写。 将设计好的信息更好地呈现出来。 目前基本上所有的软件开发IDE工具，均能够较好的支持Web前 端开发的需求。 10 3.1开发工具的作用
