Web前端實(shí)習(xí)報(bào)告

《Web前端實(shí)習(xí)報(bào)告》由會(huì)員分享，可在線閱讀，更多相關(guān)《Web前端實(shí)習(xí)報(bào)告（16頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、實(shí)習(xí)報(bào)告 學(xué)生姓名： 學(xué)號(hào)： 專業(yè)班級(jí)： 實(shí)習(xí)單位：_ 實(shí)習(xí)時(shí)間： 校外指導(dǎo)教師： 校內(nèi)指導(dǎo)教師： 成績(jī)： 1實(shí)習(xí)背景 1.1 實(shí)習(xí)目的1 1.2 實(shí)習(xí)起止時(shí)間1 1.3 實(shí)習(xí)內(nèi)容概要1 2 實(shí)習(xí)內(nèi)容2 2.1 實(shí)習(xí)過(guò)程2 2.2 實(shí)習(xí)內(nèi)容9 2.3 主要成果10 3 總結(jié)11 3.1 網(wǎng)頁(yè)游戲的認(rèn)識(shí)11 3.2 實(shí)習(xí)的自我評(píng)價(jià)13 1實(shí)習(xí)背景 1.1 實(shí)習(xí)目的 了解軟件開發(fā)的各種模式，開發(fā)流程，以及各種形式的建模 詳細(xì)學(xué)習(xí)敏捷開發(fā)的各個(gè)流程，并通過(guò)實(shí)習(xí)來(lái)體會(huì)敏捷開發(fā)所帶來(lái)的效率 掌握HTML5CSSJAVASCRIP得技術(shù) 1.2 實(shí)習(xí)起止時(shí)

2、間 開始時(shí)間：2015年7月12號(hào) 截止時(shí)間：2015年7月18號(hào) 1.3 實(shí)習(xí)內(nèi)容概要 學(xué)習(xí)軟件開發(fā)的各種模式，重點(diǎn)學(xué)習(xí)了敏捷開發(fā)（專業(yè)老師講授） 學(xué)習(xí)HTML5CSSJAVASCRI股術(shù)（形式：觀看視頻） 按照敏捷開發(fā)的流程，學(xué)員分組，制定每日的站立會(huì)議時(shí)間 觀看實(shí)習(xí)內(nèi)容例子的視頻，分工合作 提交實(shí)習(xí)成果，老師檢查打分 2實(shí)習(xí)內(nèi)容 2.1 實(shí)習(xí)過(guò)程 可以以周為時(shí)間單位概述實(shí)習(xí)各階段所從事的主要工作等； 學(xué)習(xí)階段 開發(fā)模式 1）軟件生命周期 同任何事物一樣，一個(gè)軟件產(chǎn)品或軟件系統(tǒng)也要經(jīng)歷孕育、誕生、成 長(zhǎng)、成熟、-衰亡等階段，這一般稱為軟件生命周期。 軟件開

3、發(fā)生命周期（SDLC）是指軟件開發(fā)的全部過(guò)程、活動(dòng)和任務(wù)的結(jié)構(gòu)框架。 SDLC勺一般步驟包括：確定問(wèn)題、可行性分析與開發(fā)計(jì)劃、收集需求、分析與設(shè)計(jì)、編碼開發(fā)、測(cè)試、安裝、維護(hù)。 2）軟件生命周期模式 典型的幾種生命周期模式包括：瀑布模式、演化模式、螺旋模式、快 速原型模式、噴泉模式和混合模式等。 3) 敏捷開發(fā) 敏捷開發(fā)(Agile)是一種關(guān)注價(jià)值、消除浪費(fèi)、以人為核心、迭代、 循序漸進(jìn)的開發(fā)方法。 特點(diǎn)： a) 是一種開發(fā)方法學(xué)(Methodology)，可以應(yīng)對(duì)客戶快速變更 的需求。 b) 強(qiáng)調(diào)以人為核心，采用迭代的方式，循序漸進(jìn)地開發(fā)軟件。 c) 在敏捷開發(fā)過(guò)程中

4、，軟件項(xiàng)目被劃分成多個(gè)相互聯(lián)系但也能獨(dú) 立運(yùn)行的子項(xiàng)目。 d) 每個(gè)子項(xiàng)目在開發(fā)、測(cè)試直至完成的過(guò)程中一直保持可使用的 狀態(tài)。 e) 這個(gè)過(guò)程就是要形成開發(fā)過(guò)程中團(tuán)隊(duì)之成員之間更加有效的 合作關(guān)系，使其靈活性更高，以適應(yīng)不斷變化的需求。 技術(shù)講解 1)講解內(nèi)容：HTML5CSSJAVASCRIPT^術(shù) 2)HTML5 HTML思一個(gè)描述用于幫助開發(fā)者向J建下一代網(wǎng)站和應(yīng)用的HTML CS所口JavaScript規(guī)格的涵蓋性術(shù)語(yǔ)。這個(gè)定義中最顯眼的三個(gè)部分是：HTMLCS序口JavaScript。他們定義了開發(fā)者如何使用優(yōu)化標(biāo)記，風(fēng)格更豐富的性能，以及新JavaScriptA

5、PI來(lái)制作最新的網(wǎng)絡(luò)開發(fā) 功能。簡(jiǎn)單而言，HTML5=HTML+CSS+JavaScript 特性： a)語(yǔ)義特性(Class：Semantic) b)本地存儲(chǔ)特性(Class:OFFLINE&STORAGE) c)設(shè)備兼容特性(Class:DEVICEACCESS) d)連接特性(Class:CONNECTIVITY)e)網(wǎng)頁(yè)多媒體特性(Class:MULTIMEDIA) f) 三維、圖形及特效特性(Class:3D,Graphics&Effects g) 性能與集成特性（Class:Performance&Integration） h) CSS潴,性（Class:CSS3

6、） 3） CSS CSS層疊樣式表）是一種用來(lái)表現(xiàn)HTML標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。 CSS使用方法： a）外聯(lián)式Linking（也叫外部樣式）：將網(wǎng)頁(yè)鏈接到外部樣式表。 b）嵌入式Embedding（也叫內(nèi)頁(yè)樣式）：在網(wǎng)頁(yè)上創(chuàng)建嵌入的樣式表。 c）內(nèi)聯(lián)式Inline（也叫行內(nèi)樣式）：應(yīng)用內(nèi)嵌樣式到各個(gè)網(wǎng)頁(yè)元 素。 CSS布局特點(diǎn): a) 精簡(jiǎn)代碼，降低重構(gòu)難度 b) 網(wǎng)頁(yè)訪問(wèn)速度 c) SEOffi化 d) 瀏覽器兼容性 基礎(chǔ)語(yǔ)法： a) CSS規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲 明

7、。 b) 選擇器{宣言1;宣言2;...宣言N} c) 選擇器通常是您需要改變樣式的HTML元素。 d) 每條聲明由一個(gè)屬性和一個(gè)值組成。 e) 屬性(property)是您希望設(shè)置的樣式屬性(styleattribute)。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開。 f) 選擇器{property:value} 4)JAVASCRIPT JavaScript一種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)類型、弱類型、基 于原型的語(yǔ)言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎， 為瀏覽器的一部分，廣泛用于客戶端的腳本語(yǔ)言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）網(wǎng)頁(yè)上使用，

8、用來(lái)給HTML網(wǎng)頁(yè)增加 動(dòng)態(tài)功能。 組成 a） ECMAScript，描述了該語(yǔ)言的語(yǔ)法和基本對(duì)象。 b） 文檔對(duì)象模型（DOM），描述處理網(wǎng)頁(yè)內(nèi)容的方法和接口。 c） 瀏覽器對(duì)象模型（BOM），描述與瀏覽器進(jìn)行交互的方法和接口。 特點(diǎn) a）是一種解釋性腳本語(yǔ)言（代碼不進(jìn)行預(yù)編譯）。 b）主要用來(lái)向HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）頁(yè)面添 加交互行為。 c）可以直接嵌入HTM頃面，但寫成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離。 d）跨平臺(tái)特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺(tái)下 運(yùn)行（如WindowsLinux、MacAndroid、iOS等）。 開發(fā)階段

9、 開發(fā)第一天 站立會(huì)議：8.00—8.15 會(huì)議內(nèi)容：小組分工，制定站立會(huì)議時(shí)間，了解每個(gè)人的學(xué)習(xí)情況，交 流學(xué)習(xí)的內(nèi)容 任務(wù)內(nèi)容：“打地鼠”網(wǎng)頁(yè)游戲的網(wǎng)頁(yè)布局一一＞HTML5+CSS術(shù) 開發(fā)第二天 站立會(huì)議：8.00—8.15 會(huì)議內(nèi)容：小組分工，完成情況，了解每個(gè)人的進(jìn)度，交流學(xué)習(xí)的內(nèi)容 任務(wù)內(nèi)容：“打地鼠”網(wǎng)頁(yè)游戲的功能實(shí)現(xiàn) 開發(fā)第三天 站立會(huì)議：8.00—8.15 會(huì)議內(nèi)容：小組分工，完成情況，查漏補(bǔ)缺，測(cè)試軟件，尋找bug,交 流學(xué)習(xí)的內(nèi)容 任務(wù)內(nèi)容：“打地鼠”網(wǎng)頁(yè)游戲的軟件測(cè)試，尋找不足，確認(rèn)無(wú)誤，提交實(shí)習(xí)結(jié)果 2.2 實(shí)習(xí)內(nèi)容 項(xiàng)目介紹 “打地鼠

10、”網(wǎng)頁(yè)游戲是安卓版“打地鼠”游戲的進(jìn)一步開發(fā)，可以實(shí)現(xiàn)在網(wǎng)頁(yè)中構(gòu)建游戲的所有功能，并且不用下載安裝既可以用的游戲，網(wǎng)頁(yè)版游戲的市場(chǎng)前景潛力無(wú)限，國(guó)內(nèi)逐漸發(fā)展起來(lái)一批喜歡網(wǎng)頁(yè)游戲的用戶群，并且網(wǎng)頁(yè)游戲?qū)儆谥行⌒偷捻?xiàng)目，易于開發(fā)，應(yīng)用于敏捷開發(fā)的流程，效率十分 我的任務(wù) “打地鼠”網(wǎng)頁(yè)游戲網(wǎng)頁(yè)布局的調(diào)整，以及“打地鼠”之所謂“打”的動(dòng)畫 實(shí)現(xiàn)，還有最后的“軟件測(cè)試”。 軟硬件平臺(tái) DREAMWEAVERS；SMOZILLAFIREFOX瀏覽器，PHOTOSHOPCS 使用技術(shù) HTML5 CSS JAVASCRIPT 瀏覽器中的開發(fā)人員調(diào)試 PHOTOSHOPCS的圖片處理技

11、術(shù) JAVASCRIPT勺進(jìn)階——>JQER微術(shù) 2.3 主要成果 “打地鼠”網(wǎng)頁(yè)游戲的成功開發(fā)，基本功能：打地鼠的動(dòng)畫，游戲的時(shí)間限制, 統(tǒng)計(jì)分?jǐn)?shù)，開始游戲，暫停游戲，結(jié)束游戲，走馬燈介紹等等。但是在實(shí)際測(cè)試的 時(shí)候仍然出現(xiàn)了一些Buq比如動(dòng)畫的遲緩（主要是因?yàn)閯?dòng)畫的緩沖沒(méi)有做好），還有一些分?jǐn)?shù)的統(tǒng)計(jì)不甚合理，這在我們應(yīng)用的時(shí)候及時(shí)的發(fā)現(xiàn)，并且處理了這樣的 問(wèn)題。 3總結(jié) 3.1 網(wǎng)頁(yè)游戲的認(rèn)識(shí) 網(wǎng)頁(yè)游戲又稱Web殍戲，無(wú)端網(wǎng)游，簡(jiǎn)稱頁(yè)游。是基于WebSU覽器的網(wǎng)絡(luò)在線多 人互動(dòng)游戲，無(wú)需下載客戶端，不存在機(jī)器配置不夠的問(wèn)題，最重要的是關(guān)閉或者 切換極其方便，尤其適合上

12、班族。 在那個(gè)網(wǎng)絡(luò)泡沫經(jīng)濟(jì)高速擴(kuò)張的年代，在那個(gè)大量菜鳥網(wǎng)民擁入網(wǎng)絡(luò)的年代，在 那個(gè)文字MUDE經(jīng)逐漸衰退而網(wǎng)絡(luò)游戲又尚未興起的年代，這種新穎玩意兒的推出， 無(wú)疑讓很多人為之驚艷。僅僅通過(guò)簡(jiǎn)單注冊(cè)，就可以邊玩游戲邊泡論壇。盡管只有 簡(jiǎn)陋的游戲界面、一堆文字、幾張圖片，游戲方式也不過(guò)是刷新頁(yè)面而已，但WebGame 卻帶來(lái)了無(wú)限的樂(lè)趣和遐想，同時(shí)還演繹了讓無(wú)數(shù)人刻骨銘心的愛恨情仇。如今網(wǎng) 絡(luò)游戲百花爭(zhēng)鳴，到處充斥著唯美的人物和絢麗的光影。你會(huì)偶爾緬懷那些逝去的 歲月嗎？至少在我心底，一直有數(shù)款難以忘懷的WebGanne 從誕生發(fā)展至今， WebGamie顧名思義就是基于Web?

13、J覽器的網(wǎng)絡(luò)在線多人游戲 WebGame概分為三種類型：一是基于Web瀏覽器，使用PHP/ASP/Perl等解釋語(yǔ)言建設(shè)的虛擬社區(qū)；二是基于Web?J覽器，使用Flash/JAVA技術(shù)制作的游戲；三是需要下載客戶端并連接專用服務(wù)器運(yùn)行的游戲。 網(wǎng)頁(yè)游戲盡管EBS將國(guó)內(nèi)WebGame發(fā)展往前推了一把，但是一段時(shí)間后，這類WebGam的弱點(diǎn)逐漸暴露出來(lái)。一些架設(shè)WebGam供網(wǎng)民免費(fèi)游玩的站點(diǎn)，由于質(zhì)量和管理不過(guò)關(guān)、服務(wù)器負(fù)載過(guò)大，丟失了不少玩家。同時(shí)，比WebGam華麗N倍的 網(wǎng)絡(luò)游戲興起后，WebGame然就逐漸沒(méi)落了。傳統(tǒng)意義上的WebGam依然為少部分熱愛者延續(xù)至今，而且游戲性與游戲

14、素材比以前豐富許多。 前景分析 網(wǎng)頁(yè)游戲的市場(chǎng)潛力巨大，與其他類型網(wǎng)游相比有著強(qiáng)勁優(yōu)勢(shì) 網(wǎng)頁(yè)游戲的用戶群逐漸培養(yǎng)起來(lái)，極有可能成為未來(lái)網(wǎng)游用戶的一支主力軍 避大型網(wǎng)游之鋒芒，堅(jiān)持走游擊路線。堅(jiān)持和中小站長(zhǎng)合作 針對(duì)用戶群大膽創(chuàng)新，敢于突破固有模式 游戲特點(diǎn) 混搭式類型成主流 策略游戲不斷豐富 游戲內(nèi)容多樣化 消費(fèi)群體不斷成熟 市場(chǎng)集中度提高 游戲跨形態(tài)融合 產(chǎn)品結(jié)構(gòu)漸豐富 步入全球化運(yùn)作 企業(yè)品牌意識(shí)增強(qiáng) 3.2 實(shí)習(xí)的自我評(píng)價(jià) 這次實(shí)訓(xùn)充分利用了課堂所學(xué)，掌握了許多關(guān)鍵技術(shù)，例如模版技術(shù)，CSS羊式, 使得制作過(guò)程方便了很多。在完成基本要求得基礎(chǔ)上，文件夾

15、、文件命名規(guī)范；文 件存放位置合理；制作完成之后進(jìn)行過(guò)現(xiàn)場(chǎng)清理：沒(méi)有無(wú)用的文件、文件夾，沒(méi)有斷鏈（外部鏈接不算）；工作量飽滿：內(nèi)容較豐富、自己設(shè)計(jì)制作的素材應(yīng)用多；色 不過(guò)也 系、布局合理美觀、考慮用戶訪問(wèn)方便；采用各種特效、并且運(yùn)用合理。 有些不足，比如一開始沒(méi)有把幾個(gè)人制作的文件夾分開，導(dǎo)致后面匯總時(shí)比較麻煩。還有就是文件名字開始中文命名，有的時(shí)候鏈接錯(cuò)誤。這次的作業(yè)隨說(shuō)我是在網(wǎng)上找了很多做好的模板但是我還是很有成就感，覺(jué)得自己很不錯(cuò)。不過(guò)總的來(lái)說(shuō)，對(duì)這次的作品相當(dāng)滿意，不僅選擇了我們自己喜歡的內(nèi)容，而且在我們的水平上把它做的很精美。在這個(gè)過(guò)程中我們意識(shí)到了自己在相關(guān)技術(shù)上的不足，通過(guò)學(xué)習(xí)，知道了如何改進(jìn)我們的缺點(diǎn)，相信在以后的應(yīng)用中，我們會(huì)做的更加完美！