假期web前端实习报告

《假期web前端实习报告》由会员分享，可在线阅读，更多相关《假期web前端实习报告（9页珍藏版）》请在金锄头文库上搜索。

1、郑州轻工业学院实 习 报 告学生姓名： 学 号： 专业班级： 实习单位： 实习时间： 校外指导教师： 校内指导教师： 成 绩： 目 录1 实习背景 .11.1 实习目的 .11.2 实习起止时间 .11.3 实习内容概要 .12 实习内容 .12.1 实习过程 .12.2 实习内容 .52.3 主要成果 .63 总 结 .63.1 网页游戏的认识 .63.2 实习的自我评价 .711 实习背景1.1 实习目的 了解软件开发的各种模式，开发流程，以及各种形式的建模 详细学习敏捷开发的各个流程，并通过实习来体会敏捷开发所带来的效率 掌握 HTML5、CSS、JAVASCRIPT 等技术1.2 实习

2、起止时间 开始时间：2015 年 7 月 12 号 截止时间：2015 年 7 月 18 号1.3 实习内容概要 学习软件开发的各种模式，重点学习了敏捷开发（专业老师讲授） 学习 HTML5、CSS、JAVASCRIP 技术（形式：观看视频） 按照敏捷开发的流程，学员分组，制定每日的站立会议时间 观看实习内容例子的视频，分工合作 提交实习成果，老师检查打分2 实习内容2.1 实习过程可以以周为时间单位概述实习各阶段所从事的主要工作等；2 学习阶段 开发模式1) 软件生命周期同任何事物一样,一个软件产品或软件系统也要经历孕育、诞生、成长、成熟、 -衰亡等阶段，这一般称为软件生命周期。软件开发生命

3、周期(SDLC)是指软件开发的全部过程、活动和任务的结构框架。SDLC的一般步骤包括：确定问题、可行性分析与开发计划、收集需求、分析与设计、编码开发、测试、安装、维护。2) 软件生命周期模式典型的几种生命周期模式包括：瀑布模式、演化模式、螺旋模式、快速原型模式、喷泉模式和混合模式等。3) 敏捷开发敏捷开发（Agile）是一种关注价值、消除浪费、以人为核心、迭代、循序渐进的开发方法。特点：a) 是一种开发方法学（Methodology） ，可以应对客户快速变 更的需求。b) 强调以人为核心，采用迭代的方式，循序渐进地开发软件。c) 在敏捷开发过程中，软件项目被划分成多个相互联系但也能独立运行的子

4、项目。d) 每个子项目在开发、测试直至完成的过程中一直保持可使用的状态。e) 这个过程就是要形成开发过程中团队之成员之间更加有效的合作关系，使其灵活性更高，以适应不断变化的需求。 技术讲解1) 讲解内容：HTML5、CSS 、JAVASCRIPT 技术2) HTML5HTML5 是一个描述用于帮助开发者创建下一代网站和应用的 HTML、CSS 和JavaScript 规格的涵盖性术语。这个定义中最显眼的三个部分是：HTML 、CSS 和3JavaScript。他们定义了开发者如何使用优化标记，风格更丰富的性能，以及新JavaScript API 来制作最新的网络开发功能。简单而言，HTML5=

5、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) CSSCSS(层叠样式表)是一

6、种用来表现 HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 使用方法：a) 外联式 Linking（也叫外部样式）：将网页链接到外部样式表。b) 嵌入式 Embedding（也叫内页样式）：在网页上创建嵌入的样式表。c) 内联式 Inline（也叫行内样式）：应用内嵌样式到各个网页元素。CSS 布局特点：a) 精简代码，降低重构难度b) 网页访问速度c) SEO优化d) 浏览器兼容性基础语法：a) CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。b) 选择器 宣言 1; 宣言 2; . 宣言 N 4c) 选择器通常是您需

7、要改变样式的 HTML 元素。d) 每条声明由一个属性和一个值组成。e) 属性（property）是您希望设置的样式属性（style attribute） 。每个属性有一个值。属性和值被冒号分开。f) 选择器 property: value4) JAVASCRIPTJavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给 HTML网页增加动态功能。组成a) ECMAScript，描述了该语言的语法和基本

8、对象。b) 文档对象模型（DOM） ，描述处理网页内容的方法和接口。c) 浏览器对象模型（BOM） ，描述与浏览器进行交互的方法和接口。特点a) 是一种解释性脚本语言（代码不进行预编译） 。b) 主要用来向 HTML（标准通用标记语言下的一个应用）页面添加交互行为。c) 可以直接嵌入 HTML页面，但写成单独的 js文件有利于结构和行为的分离。d) 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS 等） 。 开发阶段 开发第一天站立会议：8.008.15会议内容：小组分工，制定站立会议时间，了解每个人的学习情况，交流学习的

9、内容任务内容：“打地鼠”网页游戏的网页布局HTML5+CSS 技术 开发第二天5站立会议：8.008.15会议内容：小组分工，完成情况，了解每个人的进度，交流学习的内容任务内容：“打地鼠”网页游戏的功能实现 开发第三天站立会议：8.008.15会议内容：小组分工，完成情况，查漏补缺，测试软件，寻找 bug，交流学习的内容任务内容：“打地鼠”网页游戏的软件测试，寻找不足，确认无误，提交实习结果2.2 实习内容 项目介绍 “打地鼠”网页游戏是安卓版“打地鼠”游戏的进一步开发，可以实现在网页中构建游戏的所有功能，并且不用下载安装既可以用的游戏，网页版游戏的市场前景潜力无限，国内逐渐发展起来一批喜欢网

10、页游戏的用户群，并且网页游戏属于中小型的项目，易于开发，应用于敏捷开发的流程，效率十分高。 我的任务“打地鼠”网页游戏网页布局的调整，以及“打地鼠”之所谓“打”的动画实现，还有最后的“软件测试” 。 软硬件平台DREAMWEAVER CS6，MOZILLA F IREFOX 浏览器，PHOTOSHOP CS6 使用技术 HTML5 CSS JAVASCRIPT 浏览器中的开发人员调试 PHOTOSHOP CS6 的图片处理技术 JAVASCRIPT 的进阶JQERY 技术62.3 主要成果“打地鼠”网页游戏的成功开发，基本功能：打地鼠的动画，游戏的时间限制，统计分数，开始游戏，暂停游戏，结束游

11、戏，走马灯介绍等等。但是在实际测试的时候仍然出现了一些 BUG，比如动画的迟缓（主要是因为动画的缓冲没有做好） ，还有一些分数的统计不甚合理，这在我们应用的时候及时的发现，并且处理了这样的问题。3 总 结3.1 网页游戏的认识网页游戏又称 Web 游戏，无端网游，简称页游。是基于 Web 浏览器的网络在线多人互动游戏，无需下载客户端，不存在机器配置不够的问题，最重要的是关闭或者切换极其方便，尤其适合上班族。在那个网络泡沫经济高速扩张的年代，在那个大量菜鸟网民拥入网络的年代，在那个文字 MUD 已经逐渐衰退而网络游戏又尚未兴起的年代，这种新颖玩意儿的推出，无疑让很多人为之惊艳。仅仅通过简单注册，就可以边玩游戏边泡论坛。尽管只有简陋的游戏界面、一堆文字、几张图片，游戏方式也不过是刷新页面而已，但 WebGame 却带来了无限的乐趣和遐想，同时还演绎了让无数人刻骨铭心的爱恨情仇。如今网络游戏百花争鸣，到处充斥着唯美的人物和绚丽的光影。你会偶尔缅怀那些逝去的岁月吗？至少在我心底，一直有数款难以忘怀的 WebGame。WebGame，顾名思义就是基于 Web 浏览器的网络在线多人游戏。从诞生发展至今，WebGame 大概分为三种类型：一是基于 Web 浏览器，使用 PHP/ASP/Perl 等解释语言建设的虚拟社区；二是基于Web 浏览器，使用 Flash/JAV