软件学院研究生实习报告

软件学院研究生实习报告学号14126086姓名范凌云专业方向软件开发实习单位北京陌游科技有限公司导师刘铎实习指导人黄鑫

实习单位名称北京陌游科技有限公司实习单位地址北京市海淀区大钟寺中坤广场C座西南角城投大厦单位联系方习日期2015/8/31---至今实习岗位和内容（不少于2000字）实习岗位：HTML5前端工程师实习内容：转眼间，研究生的生活已经接近尾声，毕业的钟声将要敲响。将课堂所学知识运用于实践成为毕业生们必经的道路。带着老师的忠告，2015年8月31日我有幸来到北京陌游信息科技有限公司的技术部实习。北京陌游信息科技有限公司始建于2013年，注册资金达到1000万美元，是APP中陌游的开发者。目前这家公司已经拥有员工50多人，陌游一款为游戏玩家设计的社交工具

。将基于游戏数据的深度分析,从多方面多纬度的发现您在游戏之中的成就,生成精美的头衔名片作为您在虚拟世界中荣誉的永久收藏.同时也是一个基于地理位置,游戏公会及相同兴趣的玩家间的社交平台。刚开始的两天技术老大让我熟悉公司工作环境以及了解公司做前端的大致框架。熟悉公司游戏页的“角色详情页”的各种JavaScript文件，熟悉使用ajax进行后台交互，请求数据。在熟悉以后我尝试着对“角色详情页”的各种JavaScript文件进行编写，于此同时我还要从中数据JQuery库中各函数的编写使用。接触到的第一个任务是修改资讯中文字排版样式，并将其传到测试线，接下来我试着做角色详情页中H5页面，之前没有做过这种整个网页的布局几乎是完全靠div的层层嵌套实现的。按照原始的布局一步一步的做，整个页面是杂乱无章的，因为原始网页的height是通过js文件获取的，所以在没有定义固定高度的情况下，我的整个页面特别乱。我后来把放弃的仿照模板的方式去完成制作，先按照自己原始的方法。为了调整整个网页的布局我查了好多关于多层嵌套下，div布局问题及解决方法，然后我又想到了，这么多层div的嵌套对于网页的布局和加载有没有影响，和被引擎搜到的几率有没有影响，答案是完全不会影响被搜到的几率，不过div的嵌套最多不要超过5层。完成在不同的接口下通过ajax异步请求数据，实现相对接口信息的输出。完成在不同的接口下通过ajax异步请求数据，实现相对接口信息的输出。我使用btn点击事件触发要调用哪个接口就点击哪个btn来实现的，写代码的过程中遇到405错误，后来截图给后台那边，他提示我token写错地方了，它是一个json中属性，我却把它写成params的一部分了，改过之后整个程序就完成了。让鑫哥检查的时候他指出应该尽量避免使用btn点击事件，其实整个过程的实现是只需要知道程序进入的接口，完了就自然触发事件的完成了，后来去掉以后同样实现了相同的效果，而且结果都显示出来了。做抽奖界面2，熟悉上一个界面布局后，做界面2就已经轻松了好多。自适应各种宽度布局，主要依靠的是JS函数中数学的计算。活动规则的div我添加了一个<p>标签，结果<p>标签由于字数的原因，高度超过了相应的div的高度，后来知道在W3的html4.0中明确规定P标签时不能包含块元素的孩子，虽然不会出现报错，但是对页面布局时有影响的。完成“小助手关键字差查询”，在做“小助手关键字差查询”时，和产品那边一直没沟通好，开小会的时候才知道需要动态把后台数据加载进来，最后实现了网页的详尽功能，通过接口请求数据，并将数据动态加载到网页中。更换realm和characterName可以变换该用户相应的关键字。我把entity中wordList看成是一个二维数组，通过wordList[i][0]和wordList[i][1]来把他们存到相应的数组当中，在用随机数据取相应的数据到div中。点击click事件是出现的对话框我是用div+div：after实现的，布局中关键多的时候会乱一个，after可能会出现兼容性问题，就改成嵌套div。后继又做了“陌游女神高校活动”，“四周年活动抽奖图”“聊游戏活动界面以及相应的资讯跳转”“获奖名单，“游戏规则”等HTML5页面。中奖纪录"图，根据后台数据来动态添加抽奖记录信息未完成.动态加载数据时，只能获取到最后一条object对象的信息。页面只显示该条信息.思路：我使用.html()方法奖信息加载到页面的，所以它会自动覆盖页面上的所有内容只显示这一条。解决方法：使用$("id")appendChild()方法来动态加载信息到页面。改变问题1的写法后出现UncaughtTypeError:$(...).appendChildisnotafunction。无思路，百度无结果。上网发帖，后来有人告诉我说：appendChild()是原生dom对象的方法jquery的是$("#mainContent").append(newDiv1);div动态创建成功，但是只有一条且没有内容。思路：通过console.log发现，之前的输出函数的思路有些问题，我把从后来获取到的数据按rank的奇偶性分成了两个数组，在分别用for循环从两个数组中取数据，但其实这两个for循环中的i只是局部变量，和总数组中for的i是无关的，所以不能根据i的1,2,3,4等等值取出相应的object对象。解决方法，把有关的奇偶信息的两个for循环放到，判断rank奇偶性相对应的if…else循环中。"聊游戏"界面及几个相应栏的资讯加载。问题1：设置width为100%时，body不能占满浏览器屏幕。思路：设置了body的float属性后是无法通过width来获取body的宽度的。解决方法:去掉浮动属性。问题2：根据url来动态加载相应资讯。思路及解决方法：根据type的值来判断加载相应的内容相关文献技术综述（不少于3000字）HTML5是近十年来Web开发标准巨大的飞跃。和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的新使命是将web带入一个成熟的平台，在HTML5平台上，视频、音频、图像、动画，以及同电脑的交互都被标准化。HTML5有很多优点，一，易用性。两个原因使得使用HTML5创建网站更加简单：语义上及其ARIA。新的HTML标签像<header>,<footer>，<nav>，<section>，<aside>等等，使得阅读者更加容易去访问内容。在以前，即使你定义了class或者ID你的阅读者也没有办法去了解给出的一个div究竟是什么。使用新的语义学的定义标签，你可以更好的了解HTML文档，并且创建一个更好的使用体验。ARIA是一个W3C的标准主要用来对HTML文章中的元素指定“角色“，通过角色属性来创建重要的页面地形例如,header，footer，navigation或者aritcle很有必要。这一点曾经被忽略掉了并且没有广泛被使用，因为事实上并不验证。然而，HTML5将会验证这样属性。同时，HTML5将会内建这些角色并且无法不覆盖。二．视频和音频支持忘了flash和其它第三方应用吧，让你的视频和音频通过HTML5标签<video>和<audio>来访问资源。正确播放媒体一直都是一个非常可怕的事情，你需要使用<embed>和<object>标签，并且为了它们能正确播放必须赋予一大堆的参数。你的媒体标签将会非常复杂，大堆得令人迷惑的代码。而且HTML5视频和音频标签基本将他们视为图片：<videosrc=”"/>。但是其它参数例如宽度和高度或者自动播放呢？不必担心，只需要像其它HTML标签一样定义：<videosrc=”url”width=”640px”height=”380px”autoplay/>。实际上这个过程非常简单，然而我们的老浏览器可能并不喜欢我们的HTML5，你需要添加更多代码来让他们正确工作。但是这个代码还是比<embed>和<object>来的简单的多。三．更清晰的代码HTML5允许写出简单清晰富于描述的代码。符合语义学的代码允许分开样式和内容。使用HTML5可以通过使用语义学的HTMLheader标签描述内容来最后解决你的div及其class定义问题。以前需要大量的使用div来定义每一个页面内容区域，但是使用新的<section>，<article>，<header>，<footer>，<aside>和<nav>标签，让代码更加清晰易于阅读。四．更聪明的存储HTML5中最酷的特性就是本地存储。有一点像比较老的技术cookie和客户端数据库的融合。它比cooke更好用因为支持多个windows存储，它拥有更好的安全和性能，即使浏览器关闭后也可以保存。因为它是个客户端的数据库，你不用担心用户删除任何cookie，并且所有主流浏览器都支持。本地存储对于很多情况来说都不错，它是HTML5工具中一个不需要第三方插件实现的。能够保存数据到用户的浏览器中意味你可以简单的创建一些应用特性例如：保存用户信息，缓存数据，加载用户上一次的应用状态。五．更好的互动我们都喜欢更好的互动，我们都喜欢对于用户有反馈的动态网站，用户可以享受互动的过程。输入<canvas>，HTML5的画图标签允许你做更多的互动和动画，就像我们使用Flash达到的效果。六．游戏开发使用HTML5的<canvas>开发游戏。HTML5提供了一个非常伟大的，移动友好的方式去开发有趣互动的游戏。如果你开发Flash游戏，你就会喜欢上HTML5的游戏开发。七遗留及其跨浏览器支持现代流行浏览器都支持HTML5（Chrome，Firefox，Safari，IE9和Opera），并且创建了HTML5doctype这样所有的浏览器，即使非常老非常令人厌恶浏览器像IE6都可以使用。但是因为老的浏览器能够识别doctype并不意味它可以处理HTML5标签和功能。幸运的是，HTML5已经使得开发更加简单了，更多支持更多浏览器，这样老的IE浏览器可以通过添加javascript代码来使用新的元素八．

移动你可以称之为“直觉”，但是我认为移动技术将会变得更加的流行。我知道，这里有些非常疯狂的猜测，有些可能你也想到了–Mobile是一个时尚！移动设备将占领世界。更多的接受移动设备将会增长的非常迅速。这意味着更多的用户会选择使用移动设备访问网站或者web应用。HTML5是最移动化的开发工具。随着Adobe宣布放弃移动flash开发，你将会考虑使用HTML5来开发webp应用。当手机浏览器完全支持HTML5那么开发移动项目将会和设计更小的触摸显示一样简单。这里有很多的meta标签允许你优化移动：viewport:允许你定义viewport宽度和缩放设置；全屏浏览器：ISO指定的数值允许Apple设备全屏模式显示；Homescreenicons:

就像桌面收藏，这些图标可以用来添加收藏到IOS和Android移动设备的首页。实习单位鉴定意见实习单位负责人：（盖章）年月日实习成绩（由实习指导人评定）（百分制）导师意见导师签字：年月日实习总结在北京陌游科技有限公司经历三个月的工作实习已经结束了，在这三个月里，我和公司的职工以及领导都相处得很是融洽，大家对我也关怀备至，时常给我鼓励和帮助。下面，我将实习三个月的工作总结如下：

一、工作成果与收获

在这三个月里，我作为一个HTML5技术人员，认真学习公司的质量管理流程，根据岗位职责的要求，主要有以下工作成果及收获：1、小助手关键字查询

。学习到页面的相对布局和绝对布局的定义2、陌游女神活动

。知道了页面中双层滚动是由于什么造成的，避免下次犯同样的错误。3、高校聊游戏活动

4、抽奖活动中获奖名单展示5、抽奖玩法的HTML5静态页面6、四周年活动图1和图2以上这些工作使我认识到质量改进是无极限的，产品只有更好，没有最好。

二、感想和体会

1、态度决定一切。

工作时一定要一丝不苟，认真仔细，一个职员在公司的大部分时间都是在工作的，这就要求他在这段时间内一定要小心谨慎，一丝不苟，不能老是出错,

有必要一定要检验自己的工作结果，以确保自己的万无一失.工作的时候我一直保持极大的工作热情，不仅顺利完成工作任务，工作之余还经常总结经验教训，不断提高工作效率，虽然工作中我也会犯一些错误，受到领导批评，但我认为这些错误和批评是能让我能在以后的工作中谨慎小心，提高工作效率。在和大家工作的这段时间里，他们严谨、认真的工作作风给我留下了很深刻的印象，我也从他们身上学到了很多自己缺少的东西。这次生产实习虽然说时间比较少，但是却让我了解了公司的企业文化、生产模式和质量体系管理等经验，这对我来说是很宝贵的。

2、勤于思考

，要善于学习。在工作岗位上一定要勤于思考，不断改进工作方法，提高工作效率.

公司的日常工作都会比较繁琐，而且几天下来也会比较枯燥，就是需要你多动脑筋，不断地想方设法改进自己的工作方法，提高工作效率，减少工作所需时间

。刚进技术部的时候，我什么也不会，就相当于一个文盲在一群知识分子中。此时学习能力就会很重要。我自我感觉我的适应能力还行，在工作后不久我就可以胜任很多工作。在现实的生活中，学习能力很大情况下决定你的未来。学习可以修养身心，可以适应各种各样的环境，可以使自己在不同的环境中很好的发挥自己的特长。

3、就是要服从领导的安排，各师其职在一个公司中，就是一个很大的整体，相当一个组织，服从组织的领导，是一个员工最基本的要求。一个领导都不希望自己的手下有越级的行为。在自己的工作上尚做好自己的事情，并且可以最好是多做一些力所能及的事情，尤其刚进入公司的新手，这些都有可能会提高你在领导心中的地位，从而有机会提高并且进一步发挥自己的实力。当然，现实的社会不会因为你的实力就会让你又发挥实力的机会，所以你要把握住一切可利用机会，当然能不腐败就不腐败了。在学校中我已经可以感觉到金钱的诱惑，更别说在社会这个大染缸。

当然，我刚进去公司的时候，一切都是一个新手。很多事情需要和别人沟通，否则你可能会什么也做不成。所以，要善于和同事们沟通。沟通是一门技巧，好的领导者会合理的利用这一手段提高企业的效益。我在实习中，也可以感觉到沟通的重要，有很多事情不是你不会做，而是你的经验不足，或者说是你的社会阅历不够。

还有就是要认真，全力以赴。自己能做的事情要做好，自己不能做的事情要尽自己最大的努力去做。这是我的感受。别认为自己什么也干不了，有很多的