Web前端实习报告

实习报告

学生姓名：

学号：

专业班级：

实习单位：

实习时间：

校外指导教师：

校内指导教师：

成绩：

目录

1实习背景 (1)

1.1实习目的 (1)

1.2实习起止时间 (1)

1.3实习内容概要 (1)

2实习内容 (1)

2.1实习过程 (1)

2.2实习内容 (4)

2.3主要成果 (5)

3总结 (5)

3.1网页游戏的认识 (5)

3.2实习的自我评价 (6)

1实习背景

1.1实习目的

?了解软件开发的各种模式，开发流程，以及各种形式的建模

?详细学习敏捷开发的各个流程，并通过实习来体会敏捷开发所带来的效率?掌握HTML5、CSS、JA V ASCRIPT等技术

1.2实习起止时间

?开始时间：2015年7月12号

?截止时间：2015年7月18号

1.3实习内容概要

?学习软件开发的各种模式，重点学习了敏捷开发（专业老师讲授）

?学习HTML5、CSS、JAVASCRIP技术（形式：观看视频）

?按照敏捷开发的流程，学员分组，制定每日的站立会议时间

?观看实习内容例子的视频，分工合作

?提交实习成果，老师检查打分

2 实习内容

2.1 实习过程

可以以周为时间单位概述实习各阶段所从事的主要工作等；

?学习阶段

?开发模式

1)软件生命周期

同任何事物一样,一个软件产品或软件系统也要经历孕育、诞生、成长、成熟、 -衰亡等阶段，这一般称为软件生命周期。

软件开发生命周期(SDLC)是指软件开发的全部过程、活动和任务的结构框架。

SDLC的一般步骤包括：确定问题、可行性分析与开发计划、收集需求、分析与设计、编码开发、测试、安装、维护。

2)软件生命周期模式

典型的几种生命周期模式包括：瀑布模式、演化模式、螺旋模式、快速原型模式、喷泉模式和混合模式等。

3)敏捷开发

敏捷开发（Agile）是一种关注价值、消除浪费、以人为核心、迭代、循序渐进的开发方法。

特点：

a)是一种开发方法学（Methodology），可以应对客户快速变更的需求。

b)强调以人为核心，采用迭代的方式，循序渐进地开发软件。

c)在敏捷开发过程中，软件项目被划分成多个相互联系但也能独立运行的子项

目。

d)每个子项目在开发、测试直至完成的过程中一直保持可使用的状态。

e)这个过程就是要形成开发过程中团队之成员之间更加有效的合作关系，使其

灵活性更高，以适应不断变化的需求。

技术讲解

1)讲解内容：HTML5、CSS、JA V ASCRIPT技术

2)HTML5

HTML5是一个描述用于帮助开发者创建下一代网站和应用的HTML、CSS和JavaScript规格的涵盖性术语。这个定义中最显眼的三个部分是：HTML、CSS和JavaScript。他们定义了开发者如何使用优化标记，风格更丰富的性能，以及新JavaScript API来制作最新的网络开发功能。简单而言，HTML5=HTML+CSS+JavaScript。

特性：

a)语义特性（Class：Semantic）

b)本地存储特性（Class: OFFLINE & STORAGE）

c)设备兼容特性(Class: DEVICE ACCESS)

d)连接特性（Class: CONNECTIVITY）

e)网页多媒体特性(Class: MULTIMEDIA)

f)三维、图形及特效特性（Class: 3D, Graphics & Effects）

g)性能与集成特性（Class: Performance & Integration）

h)CSS3特性(Class: CSS3)

3)CSS

CSS(层叠样式表)是一种用来表现HTML（标准通用标记语言的一个应用）或XML （标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS使用方法：

a)外联式Linking（也叫外部样式）：将网页链接到外部样式表。

b)嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。

c)内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。

CSS布局特点：

a)精简代码，降低重构难度

b)网页访问速度

c)SEO优化

d)浏览器兼容性

基础语法：

a)CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

b)选择器 {宣言1; 宣言2; ... 宣言N }

c)选择器通常是您需要改变样式的 HTML 元素。

d)每条声明由一个属性和一个值组成。

e)属性（property）是您希望设置的样式属性（style attribute）。每个属性

有一个值。属性和值被冒号分开。

f)选择器 {property: value}

4)JA V ASCRIPT

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

组成

a)ECMAScript，描述了该语言的语法和基本对象。

b)文档对象模型（DOM），描述处理网页内容的方法和接口。

c)浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

特点

a)是一种解释性脚本语言（代码不进行预编译）。

b)主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

c)可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

d)跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如

Windows、Linux、Mac、Android、iOS等）。

?开发阶段

?开发第一天

站立会议：8.00—8.15

会议内容：小组分工，制定站立会议时间，了解每个人的学习情况，交流学习的内容

任务内容：“打地鼠”网页游戏的网页布局——>HTML5+CSS技术

?开发第二天

站立会议：8.00—8.15

会议内容：小组分工，完成情况，了解每个人的进度，交流学习的内容

任务内容：“打地鼠”网页游戏的功能实现

?开发第三天

站立会议：8.00—8.15

会议内容：小组分工，完成情况，查漏补缺，测试软件，寻找bug，交流学习的内容

任务内容：“打地鼠”网页游戏的软件测试，寻找不足，确认无误，提交实习结果

2.2 实习内容

?项目介绍

“打地鼠”网页游戏是安卓版“打地鼠”游戏的进一步开发，可以实现在网页中构建游戏的所有功能，并且不用下载安装既可以用的游戏，网页版游戏的市场前景潜力无限，国内逐渐发展起来一批喜欢网页游戏的用户群，并且网页游戏属于中小型的项目，易于开发，应用于敏捷开发的流程，效率十分高。

?我的任务

“打地鼠”网页游戏网页布局的调整，以及“打地鼠”之所谓“打”的动画实现，还有最后的“软件测试”。

?软硬件平台

DREAMWEA VER CS6，M OZILLA F IREFOX浏览器，PHOTOSHOP CS6

?使用技术

?HTML5

?CSS

?JA V ASCRIPT

?浏览器中的开发人员调试

?PHOTOSHOP CS6的图片处理技术

?JA V ASCRIPT的进阶——>JQERY技术

2.3 主要成果

“打地鼠”网页游戏的成功开发，基本功能：打地鼠的动画，游戏的时间限制，统计分数，开始游戏，暂停游戏，结束游戏，走马灯介绍等等。但是在实际测试的时候仍然出现了一些BUG，比如动画的迟缓（主要是因为动画的缓冲没有做好），还有一些分数的统计不甚合理，这在我们应用的时候及时的发现，并且处理了这样的问题。

3 总结

3.1 网页游戏的认识

网页游戏又称Web游戏，无端网游，简称页游。是基于Web浏览器的网络在线多人互动游戏，无需下载客户端，不存在机器配置不够的问题，最重要的是关闭或者切换极其方便，尤其适合上班族。

在那个网络泡沫经济高速扩张的年代，在那个大量菜鸟网民拥入网络的年代，在那个文字MUD已经逐渐衰退而网络游戏又尚未兴起的年代，这种新颖玩意儿的推出，无疑让很多人为之惊艳。仅仅通过简单注册，就可以边玩游戏边泡论坛。尽管只有简陋的游戏界面、一堆文字、几张图片，游戏方式也不过是刷新页面而已，但WebGame却带来了无限的乐趣和遐想，同时还演绎了让无数人刻骨铭心的爱恨情仇。如今网络游戏百花争鸣，到处充斥着唯美的人物和绚丽的光影。你会偶尔缅怀那些逝去的岁月吗？至少在我心底，一直有数款难以忘怀的WebGame。