第四章 媒體項(xiàng)目開發(fā)

第四章媒體項(xiàng)目開發(fā)計(jì)算機(jī)主機(jī)（CPU、RAM）紙質(zhì)圖片聲音視頻遠(yuǎn)程計(jì)算機(jī)網(wǎng)絡(luò)交換文本感覺媒體存儲(chǔ)媒體表現(xiàn)媒體表示媒體表現(xiàn)媒體傳輸媒體紙質(zhì)圖片聲音視頻文本感覺媒體磁盤、光盤等輸入設(shè)備輸出設(shè)備4．1數(shù)字媒體出版角度看媒體分類感覺媒體——最終傳達(dá)給讀者（使用者）感覺的形式。媒體的研究以用戶感受（感覺媒體）為出發(fā)點(diǎn)和目標(biāo)表示媒體——文字、音樂、圖像等信息的編碼、組織、加工，技術(shù)處理方式表現(xiàn)媒體——接收設(shè)備，信息終端。影響受眾的范圍和使用方式存儲(chǔ)媒體——載體，復(fù)制品中介物。物的屬性，出版物存在形式傳輸媒體——信息傳遞方式。發(fā)行與傳播形式數(shù)字出版中表現(xiàn)媒體、存儲(chǔ)媒體、傳輸媒體的關(guān)系！數(shù)字媒體數(shù)字媒體以信息科學(xué)和數(shù)字技術(shù)為主導(dǎo)以大眾傳播理論為依據(jù)以現(xiàn)代藝術(shù)為指導(dǎo)將信息傳播技術(shù)應(yīng)用到文化、藝術(shù)、商業(yè)、教育和管理等領(lǐng)域《2005中國數(shù)字媒體技術(shù)發(fā)展白皮書》數(shù)字媒體是數(shù)字化的內(nèi)容作品，以現(xiàn)代網(wǎng)絡(luò)為主要傳播載體，通過完善的服務(wù)體系，分發(fā)到終端和用戶進(jìn)行消費(fèi)的全過程數(shù)字媒體數(shù)字媒體技術(shù)是通過現(xiàn)代計(jì)算和通信手段綜合處理各種信息使抽象的信息變成可感知、可管理和可交互的技術(shù)手段對(duì)象目的4．2媒體表現(xiàn)4．2．1媒體特征及其性質(zhì)不同類型的媒體所表達(dá)的信息的程度不同每種媒體有自己承載信息的形式特征，人類對(duì)不同種類信息的接受程度和理解不同一般來說，越接近人類原始表達(dá)的信息越豐富，但也越模糊，如人類的表情，動(dòng)作；越是抽象化（即遠(yuǎn)離原始信息的表達(dá)）的信息，所含信息量越少，但也越精確，如數(shù)字，符號(hào)等提供具體信息的媒體使用于最初的探索階段，能描述抽象概念的文本媒體使用于最后的分析階段，而直觀信息介于兩者之間，比較適合于綜合媒體的信息表現(xiàn)媒體的信息表現(xiàn)信息系統(tǒng)角度看，不同類型的媒體數(shù)據(jù)適合表示的媒體信息不同，數(shù)據(jù)組織和處理的方法也不同文本適合于表現(xiàn)抽象的概念和從各方面刻劃細(xì)節(jié)圖形適合于表述事物的輪廓以及蘊(yùn)涵大量數(shù)值數(shù)據(jù)內(nèi)在聯(lián)系的趨勢性信息視頻適合于表現(xiàn)真實(shí)的場景聲音與視頻同時(shí)出現(xiàn)時(shí)，適用于說明和示意，或起到效果渲染和烘托作用。也可在強(qiáng)調(diào)聽覺的地方單獨(dú)出現(xiàn)運(yùn)動(dòng)媒體則可反映用戶直接的交互意圖有目的的直接經(jīng)驗(yàn)設(shè)計(jì)模型、模擬學(xué)習(xí)環(huán)境(間接的經(jīng)驗(yàn)）演戲的經(jīng)驗(yàn)觀摩示范參觀、訪問、考察參觀展覽電視電影錄音、廣播

靜畫視覺符號(hào)抽象的形象的能動(dòng)的語言符號(hào)戴爾經(jīng)驗(yàn)之塔最底層的經(jīng)驗(yàn)最具體，越往上越抽象位于“塔”中間部位的那些視聽經(jīng)驗(yàn)，比上層的言語和視覺符號(hào)具體、形象，又能突破時(shí)間和空間的限制，彌補(bǔ)下層各種直接經(jīng)驗(yàn)方式之不足教學(xué)活動(dòng)應(yīng)從具體經(jīng)驗(yàn)入手，逐步進(jìn)入抽象經(jīng)驗(yàn)在學(xué)校教學(xué)中使用各種媒體，可以使教學(xué)活動(dòng)更具體，也能為抽象概括創(chuàng)造條件4．2．2媒體信息的心理感受聲音心理特征觀測者經(jīng)驗(yàn)，響度和聲調(diào)，低頻敏感，高頻不敏感

頻率越低或越高，響度感覺越差，而對(duì)中高頻率（1kHz～5kHz）的聲音相對(duì)比較靈敏

203003K20Kf(Hz)音頻（Audio）帶寬語音(Speech)帶寬次聲帶超聲帶媒體信息的心理感受視覺心理特征亮度，色調(diào)，飽和度，對(duì)比度視覺敏感程度：對(duì)亮度信息敏感，顏色敏感度相對(duì)較弱視覺時(shí)間特征：視覺圖像建立、持續(xù)、消逝色彩記憶性感覺：暖色較冷色記憶性強(qiáng)色彩心理感受：不同顏色對(duì)人的心理影響色彩好惡：地域、文化、宗教、年齡……基于心理學(xué)的技術(shù)處理編碼：壓縮對(duì)人不敏感的信息以減少數(shù)據(jù)量DVD（MPEG）聲音—減損式壓縮模式，將聽覺上采擷不到的信息刪除再現(xiàn)：依據(jù)人對(duì)信息的接受方式表現(xiàn)信息立體聲—聽覺空間的心理模擬，時(shí)間差、強(qiáng)度差例：基于心理學(xué)的應(yīng)用——JPGFDCT熵編碼器量化表有失真編碼器源圖像數(shù)據(jù)壓縮圖像數(shù)據(jù)量化器編碼表88塊例：基于心理學(xué)的應(yīng)用——MP3MPEG音頻壓縮的主要依據(jù)是人耳朵的聽覺特性，利用了“心理聲學(xué)模型”心理聲學(xué)模型的一個(gè)基本概念：聽覺閾值。低于聽覺閾值的聲音信號(hào)聽不到，因此就可以把這部分信號(hào)去掉心理聲學(xué)模型的另一個(gè)概念：聽覺掩飾特性，即聽覺閾值會(huì)隨聽到的不同頻率的聲音而發(fā)生變化例如，同時(shí)有兩種頻率的聲音存在，一種是1000Hz的聲音，另一種是1100Hz的聲音，但它的強(qiáng)度比前者低18分貝，在這種情況下，1100Hz的聲音就聽不到MP3文件結(jié)構(gòu)MP3文件大體分為三部分：TAG_V2(ID3V2)，F(xiàn)rame,

TAG_V1(ID3V1)ID3V2包含作者，作曲，專輯等信息，長度不固定，擴(kuò)展了ID3V1的信息量Frame...Frame一系列的幀，個(gè)數(shù)由文件大小和幀長決定，每個(gè)FRAME的長度可能不固定，也可能固定，由位率bitrate決定。每個(gè)FRAME又分為幀頭和數(shù)據(jù)實(shí)體兩部分，幀頭記錄了mp3的位率，采樣率，版本等信息，每個(gè)幀之間相互獨(dú)立ID3V1包含作者，作曲，專輯等信息，長度為128BYTEMPEGaudio層3編碼器和解碼器的結(jié)構(gòu)例：基于心理學(xué)的應(yīng)用——立體聲雙耳效應(yīng)人雙耳之間有一定的距離（約17cm），若一點(diǎn)聲源偏離聽音人前方主軸方向，到達(dá)兩耳的聲音就會(huì)產(chǎn)生差別，聽覺系統(tǒng)根據(jù)這些差別就可以判斷出聲源的方位，即“雙耳效應(yīng)”理論。雙耳效應(yīng)理論認(rèn)為：人耳對(duì)聲源方位的判斷能力是根據(jù)雙耳距離差引起的四個(gè)物理因素產(chǎn)生的聲音到達(dá)雙耳間的時(shí)間差聲音到達(dá)雙耳間的強(qiáng)度差（聲音在空氣中傳播由于距離造成的衰減差異）聲音低頻分量由于時(shí)間差產(chǎn)生的相位差（低頻聲音的波長長，因而在時(shí)間差產(chǎn)生的相位差在一定數(shù)量值內(nèi)，可以作為判斷聲源方位的信息）由于人的頭部對(duì)高頻分量的遮蔽作用產(chǎn)生的音色差基于心理學(xué)的應(yīng)用——立體聲聲像聽音人在一定條件（兩揚(yáng)聲器的信號(hào)完全一致）下感覺不到兩個(gè)聲源的存在，而是感覺好象在兩個(gè)揚(yáng)聲器之間有一個(gè)空間點(diǎn)在發(fā)聲，即聲像，因?yàn)檫@個(gè)點(diǎn)實(shí)際不存在，所以也稱幻象聲像，或虛聲像幻象聲像的產(chǎn)生利用了“雙耳效應(yīng)”理論。由于幻象聲像的存在使聽音人能夠在聽音活動(dòng)過程中感受到聲音方位的變化，使再現(xiàn)聲音的方位信息成為可能基于心理學(xué)的應(yīng)用——立體聲在立體聲重放系統(tǒng)中若在一定范圍內(nèi)調(diào)整兩個(gè)揚(yáng)聲器間信號(hào)的時(shí)間差或強(qiáng)度差，聲像就會(huì)從兩揚(yáng)聲器連線的中心點(diǎn)沿著這條連線向其中一只揚(yáng)聲器傳遞，并定位在某一點(diǎn)上。這個(gè)現(xiàn)象就是立體聲重放的基礎(chǔ)。某一聲像的定位是兩只揚(yáng)聲器發(fā)出的兩個(gè)聲音重疊后到達(dá)聽音人雙耳的結(jié)果媒體結(jié)合的影響從信息理解角度看，多種媒體的合理結(jié)合有利于信息的接受和理解，反映在理解程度和記憶駐留效果上

心理學(xué)實(shí)驗(yàn)理解程度：視覺83%，聽覺11%，觸覺3%，其他<4%

記憶駐留：

方式 2小時(shí)后 72小時(shí)后 談話 70% 10%

觀看 72% 20%視聽并舉 85% 65%“感覺相乘”效應(yīng)4．2．3出版物的媒體特征文本媒體主要形式：書﹑報(bào)﹑刊一般用途：報(bào)道，描述，分析主要特點(diǎn)：可以細(xì)致地﹑多角度地刻劃事物或人物的各個(gè)方面，也可以做深刻的分析，可以表達(dá)人們的思想，也可以描述抽象的規(guī)律和概念形態(tài)：靜態(tài)功能：“述”、“析”觀點(diǎn)：文字是人類思維的工具，以文本表示的信息帶有更多的主觀色彩，帶有較多的邏輯思維特征。由于主要是文本媒體記錄了人類的知識(shí)﹑文化和思想，因此，它也是各種媒體中最重要﹑最基本的出版物的媒體特征圖畫媒體主要形式：圖片﹑畫冊(cè)及幻燈﹑膠片等

一般用途：可以和文字相互補(bǔ)充，用于直觀報(bào)道和形象描述，也可以專門用于欣賞

主要特點(diǎn)：直觀，形象

形態(tài)：靜態(tài)

功能：“示”

觀點(diǎn)：圖畫媒體給人的感覺要比文字客觀，表達(dá)的信息也更容易使人接受

出版物的媒體特征音像媒體一般用途：欣賞、報(bào)道主要特點(diǎn)：比圖畫更加直觀形象，強(qiáng)調(diào)可信度和感染力形態(tài)：動(dòng)態(tài)，過程功能：“演/播”

觀點(diǎn)：音像媒體往往可以給人最客觀的感覺，表達(dá)的信息也最容易使人接受，是形象化思維表現(xiàn)4．2．4多媒體的信息表現(xiàn)多媒體綜合各種媒體的表現(xiàn)特征，媒體之間相互作用，可以表達(dá)出比各種媒體簡單合在一起更多的信息與心理學(xué)中“感覺相乘”對(duì)應(yīng)，可以稱之為“媒體相乘”作用多媒體既適合表現(xiàn)形象的，也適合表現(xiàn)抽象的，既可以含有靜態(tài)的展示，又可以進(jìn)行動(dòng)態(tài)的演播，表現(xiàn)既可直觀生動(dòng)，又可深刻理智，而且各方面可以有機(jī)的結(jié)合在一起4．2．5形象媒體與抽象媒體抽象符號(hào)需要較多理性的思考，如文字、數(shù)學(xué)符號(hào)形象媒體傳遞給人較多的是感覺人類對(duì)信息的接受首先是感覺，然后是感受（與經(jīng)驗(yàn)、知識(shí)相關(guān)）人類心理傾向于感覺、理解，而不是理性分析與探究！多媒體中抽象、理性的內(nèi)容將受到嚴(yán)重影響媒體心理學(xué)專家觀點(diǎn)媒體心理學(xué)專家彼特.溫特浩夫－斯伯克（德）電視使社會(huì)的情感結(jié)構(gòu)趨于膚淺，人的情感趨于做作和以性為取向。結(jié)果是情感交流變成了經(jīng)過精心設(shè)計(jì)的自我表演，人們不斷追求新的刺激。感情只是被表演給人看，而實(shí)際上并沒有被感受到未來的公民將是這樣一種類型的人：他們精神脆弱，自我中心，只注重外在表現(xiàn)，醉心于人工策劃的事件在所謂的具有絕對(duì)靈活性和移動(dòng)性的時(shí)代，社會(huì)聯(lián)系的紐帶越來越不可靠，而電視就成為了一個(gè)隱蔽的教育工作者技術(shù)是偏方，人本是正道有人說，他設(shè)計(jì)了一個(gè)實(shí)驗(yàn)室，從這個(gè)門進(jìn)去，你還不是老師；從那個(gè)門出來，你就是一個(gè)好老師了。你信嗎？4．3媒體設(shè)計(jì)4．3．1人機(jī)交互技術(shù)用戶：我又錯(cuò)了？用戶必須不斷地適應(yīng)計(jì)算機(jī)，而不是相反！人機(jī)交互技術(shù)人機(jī)交互定義（ACM,1992）一門研究人類所使用的交互式計(jì)算系統(tǒng)的設(shè)計(jì)、實(shí)施、評(píng)估及相關(guān)主要現(xiàn)象的學(xué)科控制信息顯示信息人機(jī)交互技術(shù)人機(jī)交互技術(shù)信息表示的多樣化和如何通過多種輸入輸出設(shè)備與計(jì)算機(jī)進(jìn)行交互是人機(jī)交互技術(shù)的重要內(nèi)容未來的用戶界面將更多的運(yùn)用虛擬現(xiàn)實(shí)技術(shù)，使用戶能夠擺脫鍵盤與鼠標(biāo)的交互方式，而通過動(dòng)作、語言，甚至是腦電波來控制計(jì)算機(jī)基于視線跟蹤、語音識(shí)別、手勢輸入、感覺反饋等交互技術(shù)人機(jī)交互技術(shù)人機(jī)交互方式鍵盤輸入：傳統(tǒng)方式鼠標(biāo)輸入：圖形用戶界面的重要輸入方式折疊鍵盤西門子虛擬鍵盤最古老的鼠標(biāo)無線電式鼠標(biāo)人機(jī)交互方式手寫輸入：手寫漢字的識(shí)別，“平板電腦”語音輸入觸摸屏輸入數(shù)字化儀輸入：適用于CAD/CAM系統(tǒng)掃描輸入：條形碼、掃描儀、光電閱讀器人機(jī)交互方式三維輸入：數(shù)據(jù)手套、三維鼠標(biāo)、力矩球等視覺輸入：攝像設(shè)備。機(jī)器人的視覺顯示終端輸出：重要工具聲響輸出：聲波打印輸出：標(biāo)準(zhǔn)輸出設(shè)備之一三維輸出：產(chǎn)生三維輸出的設(shè)備有投影顯示器、頭盔顯示器、電視眼鏡等3維鼠標(biāo)人機(jī)交互技術(shù)人機(jī)交互技術(shù)應(yīng)用領(lǐng)域軟件界面設(shè)計(jì)：多媒體化自然語言人機(jī)交互輸入輸出裝置的設(shè)計(jì)計(jì)算機(jī)輔助設(shè)計(jì)和制造(ComputerAideddesignCAD/ComputeraidedmanufacturingCAM)人機(jī)交互技術(shù)人機(jī)交互技術(shù)發(fā)展人機(jī)交互是基于視線跟蹤、語音識(shí)別、手勢輸入、感覺反饋等新的交互技術(shù)視線跟蹤手勢輸入體驗(yàn)“接吻”感覺的觸覺交互設(shè)備人機(jī)交互設(shè)計(jì)原理人機(jī)界面的設(shè)計(jì)需考慮三個(gè)元素：人的因素、交互設(shè)備、實(shí)現(xiàn)人機(jī)對(duì)話的軟件人機(jī)工程與界面設(shè)計(jì)人機(jī)工程學(xué)人機(jī)系統(tǒng)總體設(shè)計(jì)人機(jī)系統(tǒng)由人和機(jī)組成，相互聯(lián)系構(gòu)成整體強(qiáng)調(diào)人機(jī)系統(tǒng)的各個(gè)成分，克服忽視人和人的效能的問題設(shè)計(jì)目標(biāo)：使系統(tǒng)的每個(gè)成分都為實(shí)現(xiàn)系統(tǒng)目標(biāo)而能夠協(xié)調(diào)一致地發(fā)揮各自的功能人機(jī)交互設(shè)計(jì)原理——屏幕人機(jī)交互的創(chuàng)意設(shè)計(jì)創(chuàng)意設(shè)計(jì)：即屏幕設(shè)計(jì)、界面設(shè)計(jì)屏幕設(shè)計(jì)創(chuàng)意通過各種手法表現(xiàn)與主題向適應(yīng)的意境屏幕的各構(gòu)成要素按照視覺運(yùn)動(dòng)的法則精心安排，主次、大小、疏密得當(dāng)狹義：研究各種視覺元素的位置、面積、大小的排列組合和視覺流程問題廣義：研究各種視覺元素得搭配格調(diào)，能通過屏幕信息強(qiáng)化主題人機(jī)交互設(shè)計(jì)原理屏幕創(chuàng)意設(shè)計(jì)原則內(nèi)容與形式表現(xiàn)必須統(tǒng)一，形式服從內(nèi)容充分考慮各視覺元素的視覺流程，突出主題保持屏幕界面視覺上的相對(duì)均衡感注意屏幕設(shè)計(jì)中的空白的處理注重整體的對(duì)比因素，強(qiáng)化界面的整體吸引力注意提高屏幕界面信息內(nèi)容的視讀性創(chuàng)造一定的韻律感，界面流暢人機(jī)交互設(shè)計(jì)原理屏幕創(chuàng)意設(shè)計(jì)表現(xiàn)手法視覺流程：在閱讀信息時(shí)，視線通常是從左到右，從上到下的過程點(diǎn)、線、面的關(guān)系形狀間的組合對(duì)比與統(tǒng)一節(jié)奏與韻律裝飾與趣味視覺流向人機(jī)交互設(shè)計(jì)原理多媒體人機(jī)交互設(shè)計(jì)原理使界面一致使界面具有指導(dǎo)性使界面健全易用使界面友好使界面功能強(qiáng)大圖形用戶界面交互方式GUI：GraphicsUserInterface4．3．２布局版面結(jié)構(gòu)設(shè)計(jì)版面指的是瀏覽器看到的完整的一個(gè)頁面（可以包含框架和層）布局，就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置首先看到什么（用戶）要傳達(dá)什么信息（表達(dá)者）如何傳達(dá)（技術(shù)）布局標(biāo)題欄子欄目名稱主要內(nèi)容內(nèi)容提示附加信息網(wǎng)頁布局設(shè)計(jì)基本布局元素標(biāo)題：將被顯示在瀏覽器的標(biāo)題欄中網(wǎng)站標(biāo)志（LOGO)：放在網(wǎng)頁中最顯眼的位置標(biāo)識(shí)代表網(wǎng)站的形象頁眉：是網(wǎng)頁中最顯眼的位置，用來放置網(wǎng)站中瀏覽者最希望看到網(wǎng)站的內(nèi)容導(dǎo)航：是提供網(wǎng)站中內(nèi)容的索引。通過導(dǎo)航可以方便到達(dá)網(wǎng)站的各個(gè)欄目。一個(gè)合理的導(dǎo)航設(shè)計(jì)可以使得網(wǎng)站變得合理應(yīng)用正文內(nèi)容：是網(wǎng)站的精神所在。有方向性頁腳：提供了字?jǐn)?shù)，版權(quán)信息，聯(lián)系方式等4.3.3色彩配色與設(shè)計(jì)風(fēng)格給人感覺不同每個(gè)人對(duì)色彩的感覺不同，所以無法設(shè)計(jì)出讓瀏覽者感覺相同的網(wǎng)頁配色方案——網(wǎng)頁設(shè)計(jì)者根據(jù)什么設(shè)計(jì)網(wǎng)頁顏色和色系呢？根據(jù)色彩的聯(lián)想決定顏色和色系色彩紅色代表：熱情、活潑、熱鬧、溫暖、幸福橙色代表：光明、華麗、興奮、快樂黃色代表：明朗、愉快、高貴、希望綠色代表：平靜、和平、柔和、安靜、青春藍(lán)色代表：永恒、沉靜、理智、誠實(shí)紫色代表：高貴、魅力、自傲白色代表：純潔、樸實(shí)、神圣灰色代表：消極、謙虛、平凡、中庸、寂寞黑色代表：堅(jiān)實(shí)、嚴(yán)肅、粗莽色彩灰色：象征冷靜、中立（蘋果、維基百科、紐約時(shí)報(bào)……）綠色：象征健康、生命（BP石油、食品超市wholefoods、星巴克……）藍(lán)色：象征可靠、力量（戴爾、大眾汽車、IBM……）紫色：象征智慧、想象（雅虎、T-Mobile、科幻主題電視臺(tái)Syfy……）紅色：象征血?dú)?、年輕（可口可樂、樂高、肯德基……）橙色：象征歡樂、信任（芬達(dá)、亞馬遜、火狐……）黃色：象征溫暖、透明（百思買、法拉利、麥當(dāng)勞……）色彩的搭配——使用單色通過調(diào)整色彩的飽和度和透明度也可以產(chǎn)生變化，避免單調(diào)色彩的搭配——使用鄰近色所謂鄰近色，就是在色輪上相鄰近的顏色，例如綠色和藍(lán)色，紅色和黃色就互為鄰近色。采用鄰近色設(shè)計(jì)可以使網(wǎng)頁避色彩雜亂，易于達(dá)到和諧統(tǒng)一色彩的搭配——使用對(duì)比色對(duì)比色可以突出重點(diǎn)，產(chǎn)生了強(qiáng)烈的視覺效果，通過合理使用對(duì)比色能夠使特色鮮明、重點(diǎn)突出。在設(shè)計(jì)時(shí)一般以一種顏色為主色調(diào)，對(duì)比色作為點(diǎn)綴，可以起到畫龍點(diǎn)睛的作用分割互補(bǔ)色——使用一個(gè)色調(diào)和兩個(gè)與它的補(bǔ)色鄰近色調(diào)三分色階——使用色輪中的等距三個(gè)色調(diào)

雙互補(bǔ)色——使用兩個(gè)色調(diào)和它們的補(bǔ)色

近似互補(bǔ)色——使用兩個(gè)互補(bǔ)色調(diào)和一個(gè)顏色相近色調(diào)

中間色——使用沒有色度的顏色

突出色——在沒有色調(diào)的顏色中突出一個(gè)高飽和度的色調(diào)

使用暖色調(diào)的顏色

使用冷色調(diào)的顏色

色彩的整體感網(wǎng)頁色彩的整體感很大程度決定了網(wǎng)站風(fēng)格的確認(rèn)

色彩的系統(tǒng)性網(wǎng)頁色彩整體感首先指的是網(wǎng)頁之間色彩的系統(tǒng)性

協(xié)調(diào)感網(wǎng)頁色彩整體感還體現(xiàn)為網(wǎng)頁頁面本身的協(xié)調(diào)感

色彩的形式感

馬蒂斯說：“色彩因自身而存在，色彩具有它自身的美?！鄙适悄痰囊魳?，色彩的音樂感是伴隨著視線的流動(dòng)而產(chǎn)生的。色彩的音樂感類似于音樂表現(xiàn)的色彩感覺。

www.jazzsaalfelden.at

色彩的節(jié)奏和韻律色彩的節(jié)奏和韻律也是網(wǎng)頁色彩的形式感體現(xiàn)，它是通過色彩的交替變化出現(xiàn)的

www.slagtehal3.dk色彩的均衡與對(duì)比色彩的均衡是指各色塊之間的平衡

www.visionmedia.nl

色彩的均衡與對(duì)比對(duì)比是自然界普遍存在的規(guī)律，色彩的對(duì)比也始終存在于網(wǎng)頁色彩當(dāng)中。應(yīng)用好色彩的對(duì)比，關(guān)鍵是把握好“對(duì)比之中求調(diào)和，調(diào)和之中求對(duì)比”這一設(shè)計(jì)法則fuse-media.co.uk

網(wǎng)頁色彩的情感

色調(diào)與情感色彩的色調(diào)如同音樂中的調(diào)子，它確定了網(wǎng)頁的整體感覺，決定了網(wǎng)頁的情感傾向

www.download-days.de

色彩排列與情感色彩的排列方式也影響著色彩的情感表現(xiàn)。同樣的色調(diào)因色彩的排列方式不同，也會(huì)影響著人的情緒

網(wǎng)頁色彩的風(fēng)格

色彩風(fēng)格的確立取決于網(wǎng)站的目標(biāo)定位，網(wǎng)頁的終端受眾首先決定了色彩的傾向

色彩的使用藍(lán)色調(diào)為主，加上白色和紅色，強(qiáng)調(diào)權(quán)威與真實(shí)色彩的使用橙色為主，白色為輔，具有輕快，時(shí)尚的效果色彩的使用綠色為主，白色為輔，產(chǎn)生舒適、優(yōu)雅、適于閱讀的氣氛色彩的使用紅色為主，產(chǎn)生熱情、活力的感覺，充滿歡樂的氣氛4．3．4用戶體驗(yàn)用戶體驗(yàn)：UE（UX）用戶體驗(yàn)并不是指產(chǎn)品本身是如何工作的，而是指產(chǎn)品如何和外界聯(lián)系并發(fā)揮作用，也就是人們?nèi)绾巍敖佑|“或者“使用”它Web中的用戶體驗(yàn)是指用戶在訪問平臺(tái)的過程中的全部體驗(yàn)，它包括平臺(tái)是否有用，疑惑或者bug程度，功能是否易用、簡約，界面設(shè)計(jì)和交互設(shè)計(jì)是否友好等方面。用戶體驗(yàn)的核心是UCD，即“以用戶為中心的設(shè)計(jì)”用戶體驗(yàn)?zāi)康牧糇‖F(xiàn)有的用戶（提升用戶忠誠度）吸引更多的用戶（口碑傳播）形式幫助人們提升效率減少人們犯錯(cuò)的幾率“AJAX之父”JesseJamesGarrett（2000）《用戶體驗(yàn)的要素：以用戶為中心的Web設(shè)計(jì)》戰(zhàn)略層為底層，表現(xiàn)層為最上層想象一個(gè)產(chǎn)品像大樹一樣。從根到軀干，到枝葉，最后到開花結(jié)果用戶體驗(yàn)的要素——戰(zhàn)略層戰(zhàn)略層【自身目標(biāo)與用戶需求】成功的用戶體驗(yàn)，其基礎(chǔ)是一個(gè)被明確表達(dá)的“戰(zhàn)略”戰(zhàn)略層關(guān)注的內(nèi)容主要為用戶需求以及網(wǎng)站目標(biāo)“我們想要什么”“我們的用戶想要什么用戶體驗(yàn)的要素——范圍層范圍層【對(duì)需求的整合】帶著“我們想要什么”、“我們的用戶想要什么”的明確認(rèn)識(shí)，弄清如何滿足所有這些戰(zhàn)略的目標(biāo)。當(dāng)把用戶需求和網(wǎng)站目標(biāo)轉(zhuǎn)變成網(wǎng)站應(yīng)該提供給用戶什么樣的內(nèi)容和功能時(shí)，戰(zhàn)略就變成了范圍可以理解成為功能層，產(chǎn)品可以干些什么。這個(gè)產(chǎn)品有哪些功能。例如“”，能發(fā)圖片，發(fā)文字，能互相關(guān)注，這就是范圍層需要考慮的東西。范圍層關(guān)注的內(nèi)容為：產(chǎn)品的功能設(shè)計(jì)和信息的內(nèi)容需求（定義內(nèi)容的詳細(xì)屬性）用戶體驗(yàn)的要素——結(jié)構(gòu)層結(jié)構(gòu)層【交互。如何、可以、應(yīng)該……】在收集完用戶需求并將其排列好優(yōu)先級(jí)別之后，對(duì)于最終產(chǎn)品將會(huì)包括什么特性已經(jīng)有了清楚的圖像。然而，這些需求并沒有說明如何將這些分散的片段組成一個(gè)整體。這就是范圍層的上面一層：為網(wǎng)站創(chuàng)建一個(gè)概念結(jié)構(gòu)結(jié)構(gòu)層比較抽象，主要用于設(shè)計(jì)用戶如何到達(dá)某個(gè)頁面，當(dāng)完成了這個(gè)頁面的任務(wù)以后，用戶又要去什么地方?？蚣軐佣x了導(dǎo)航條上各項(xiàng)的排列方式，而結(jié)構(gòu)層則確定了哪些類別應(yīng)該出現(xiàn)在導(dǎo)航條上。結(jié)構(gòu)層關(guān)注的內(nèi)容：產(chǎn)品的交互設(shè)計(jì)和信息架構(gòu)設(shè)計(jì)

用戶體驗(yàn)的要素——框架層框架層（skeleton）【布局】表現(xiàn)層之下是框架層：按鈕、表格、照片和文本區(qū)域的位置?？蚣軐佑糜趦?yōu)化設(shè)計(jì)布局，以達(dá)到這些元素的最大效果和效率——使你在需要的時(shí)候，能記得標(biāo)識(shí)并找到購物車的按鈕結(jié)構(gòu)層體現(xiàn)需求，這些需求來自戰(zhàn)略目標(biāo)需求。在框架層，確定很詳細(xì)的界面外觀、導(dǎo)航和信息設(shè)計(jì)，這能讓晦澀的結(jié)構(gòu)變得更實(shí)在用戶體驗(yàn)的要素——表現(xiàn)層表現(xiàn)層（surface）【視覺呈現(xiàn)】看到的是一系列的網(wǎng)頁，由圖片和文字組成。一些圖片是可以點(diǎn)擊的，從而執(zhí)行某種功能，例如把你帶到購物車?yán)锶?。一些圖片就只是圖片，比如一本書的封面或網(wǎng)站自己的標(biāo)志在這個(gè)五層模型的頂端，我們把注意力轉(zhuǎn)移到網(wǎng)站用戶會(huì)首先注意到的那方面：視覺設(shè)計(jì)。這里，內(nèi)容、功能和美學(xué)匯集導(dǎo)一起來產(chǎn)生一個(gè)最終設(shè)計(jì)，這將滿足其他四個(gè)層面的所有目標(biāo)交互設(shè)計(jì)交互：用戶通過某種方式發(fā)出指令，且系統(tǒng)對(duì)此作出相應(yīng)的反應(yīng)交互設(shè)計(jì)是關(guān)于創(chuàng)建新的用戶體驗(yàn)的問題，目的在于增強(qiáng)和擴(kuò)充人們的工作、通信及交互方式，使他們能夠更加有效地進(jìn)行日常工作和學(xué)習(xí)UI設(shè)計(jì)UserInterfaceDesign用戶界面設(shè)計(jì)，在很大程度上就是在探討如何讓產(chǎn)品的界面更加具有可用性，如何讓用戶有更良好的體驗(yàn)。這是一種優(yōu)化后的界面，通過這種界面，用戶能更方面地完成任務(wù)，獲得良好的感覺例如：一個(gè)按鈕的設(shè)計(jì)，美工設(shè)計(jì)考慮如何好看，而用戶界面設(shè)計(jì)師則考慮按鈕如何擺放，上面顯示什么文字，甚至到底要不要這個(gè)按鈕的問題軟件設(shè)計(jì)、UI設(shè)計(jì)、交互設(shè)計(jì)《軟件設(shè)計(jì)的藝術(shù)》TerryWinograd（2004年度的ACM人機(jī)交互院士）開發(fā)軟件建房子土木工程師裝修設(shè)計(jì)師建筑設(shè)計(jì)師軟件設(shè)計(jì)ＵＩ設(shè)計(jì)交互設(shè)計(jì)實(shí)現(xiàn)模型和心理模型心理模型表現(xiàn)模型實(shí)現(xiàn)模型容易使用，體驗(yàn)良好記憶負(fù)擔(dān)，體驗(yàn)較差最好的技術(shù)是消失在生活當(dāng)中的技術(shù)JakobNielson博士交互設(shè)計(jì)十原則1.讓用戶隨時(shí)了解系統(tǒng)的狀態(tài)例如導(dǎo)入導(dǎo)出的提示功能2.系統(tǒng)應(yīng)該與真實(shí)世界相符合（使用用戶慣用的詞匯和概念）3.給用戶控制權(quán)和自主權(quán)當(dāng)系統(tǒng)出錯(cuò)或者誤操作后能夠緊急退出4.提倡一致性和標(biāo)準(zhǔn)化相似的任務(wù)提供相似的元素JakobNielson博士交互設(shè)計(jì)十原則5.幫助用戶診斷、識(shí)別和恢復(fù)錯(cuò)誤。告訴用戶大概的原因和解決辦法6.預(yù)防錯(cuò)誤7.依賴于識(shí)別而不是記憶8.強(qiáng)調(diào)實(shí)用的靈活性和有效性：輸入搜索內(nèi)容后直接按回車鍵就能搜索而不一定要點(diǎn)擊搜索圖標(biāo)

9．最小化設(shè)計(jì)10.提供幫助及文檔BenShneiderman交互設(shè)計(jì)原則性力求一致性：高度一致性的界面能夠給人清晰和整體的感覺提供明確的反饋設(shè)計(jì)對(duì)話，告訴用戶任務(wù)已經(jīng)完成提供錯(cuò)誤預(yù)防和簡單的糾錯(cuò)功能應(yīng)該方便用戶取消某個(gè)操作用戶應(yīng)掌握控制權(quán)（授課計(jì)劃的跳過該動(dòng)畫）減輕用戶的記憶負(fù)擔(dān)4．4Web前端技術(shù)網(wǎng)站標(biāo)準(zhǔn)的簡單歷史XHTML1ContentCSS2.1Presentation2001-2006HTML5ContentCSS3Presentation2007-Present2013年Web設(shè)計(jì)三大趨勢趨勢1：響應(yīng)式設(shè)計(jì)響應(yīng)式設(shè)計(jì)，是指XHTML/HTML5、CSS（3）和JavaScript技術(shù)的組合。使用這三種技術(shù)，檢測用戶的屏幕尺寸，自動(dòng)調(diào)整網(wǎng)站的布局以適應(yīng)用戶的屏幕尺寸不管用戶是使用智能手機(jī)瀏覽網(wǎng)站，還是使用Retina高分辨率屏幕的iPad4瀏覽網(wǎng)站，都能獲得很好的視覺效果響應(yīng)式設(shè)計(jì)RWD（ResponsiveWebDesign），伊?！ゑR克特（EthanMarcotte），2010三種已有開發(fā)技巧彈性網(wǎng)格布局彈性圖片媒體查詢響應(yīng)式網(wǎng)頁設(shè)計(jì)，即是一種針對(duì)任意設(shè)備對(duì)網(wǎng)頁內(nèi)容都能進(jìn)行完美布局的顯示機(jī)制

媒體查詢例body{background-color:grey;}@mediascreenand(max-width:960px){body{background-color:red;}}@mediascreenand(max-width:768px){body{background-color:orange;}}媒體查詢例@mediascreenand(max-width:550px){body{background-color:yellow;}}@mediascreenand(max-width:320px){body{background-color:green;}}

2013年Web設(shè)計(jì)三大趨勢趨勢2：Metro（地鐵）風(fēng)格MetroUI是一種界面展示技術(shù)，和蘋果的iOS、谷歌的Android界面最大的區(qū)別在于：后兩種都是以應(yīng)用為主要呈現(xiàn)對(duì)象，而Metro界面強(qiáng)調(diào)的是信息本身，而不是冗余的界面元素為Metro設(shè)計(jì)主題應(yīng)該是：“光滑、快、現(xiàn)代”2013年Web設(shè)計(jì)三大趨勢趨勢3：大按鈕操作Web設(shè)計(jì)正在受到智能手機(jī)和平板電腦的影響手機(jī)之類的屏幕，尺寸很小，用手指觸摸操作，如果按鈕很小，那么操作極為不便為了給用戶提供更好的體驗(yàn)，大按鈕的設(shè)計(jì)勢在必行4.1.1Web前端技術(shù)簡介Web前端主要指瀏覽器端Web2.0時(shí)代，網(wǎng)站前端發(fā)生重大變化，網(wǎng)頁不再只呈現(xiàn)供人瀏覽的信息，而是出現(xiàn)大量類似于傳統(tǒng)桌面軟件的應(yīng)用，媒體信息和交互方式越來越豐富，用戶體驗(yàn)越來越好智能手機(jī)、平板電腦等移動(dòng)數(shù)字終端的普及使移動(dòng)互聯(lián)網(wǎng)成為信息產(chǎn)業(yè)當(dāng)前最重要的應(yīng)用，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動(dòng)，網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)的Web前端技術(shù)簡介通俗講：通過瀏覽器到用戶端計(jì)算機(jī)的統(tǒng)稱為前端技術(shù)，相反存貯于服務(wù)器端的統(tǒng)稱為后端技術(shù)前端開發(fā)工作通常需要視覺設(shè)計(jì)師、交互設(shè)計(jì)師和網(wǎng)頁設(shè)計(jì)師相互配合完成，也可以一人兼任多種角色前端開發(fā)主要方向網(wǎng)頁設(shè)計(jì)（重構(gòu)）：根據(jù)設(shè)計(jì)圖用HTML和CSS完成頁面制作（與視覺設(shè)計(jì)師和交互設(shè)計(jì)師配合）web前端開發(fā)：主要負(fù)責(zé)交互設(shè)計(jì)。根據(jù)網(wǎng)站的可用性分析和用戶反饋改進(jìn)和優(yōu)化網(wǎng)站的前端。利用JavaScript結(jié)合html+css技術(shù)開發(fā)出用戶體驗(yàn)更好的網(wǎng)站頁面Web前端模型MVC（ModelViewController）模型（model）－視圖（view）－控制器（controller）的縮寫一種軟件設(shè)計(jì)典范，用于組織代碼一種業(yè)務(wù)邏輯和數(shù)據(jù)顯示分離的方法方法假設(shè)前提是，如果業(yè)務(wù)邏輯被聚集到一個(gè)部件里面，且界面和用戶圍繞數(shù)據(jù)的交互能被改進(jìn)和個(gè)性化定制，而不需要重新編寫業(yè)務(wù)邏輯MVC用于把傳統(tǒng)的輸入、處理和輸出功能映射在一個(gè)邏輯的圖形化用戶界面結(jié)構(gòu)中Web前端技術(shù)簡介Web前端技術(shù)簡介Web前端開發(fā)利用(X)HTML/CSS/JavaScript/DOM/Flash等各種Web技術(shù)進(jìn)行產(chǎn)品的界面開發(fā)制作標(biāo)準(zhǔn)優(yōu)化的代碼，并增加交互動(dòng)態(tài)功能，開發(fā)JavaScript以及Flash模塊同時(shí)結(jié)合后臺(tái)開發(fā)技術(shù)模擬整體效果，進(jìn)行豐富互聯(lián)網(wǎng)的Web開發(fā)致力于通過技術(shù)改善用戶體驗(yàn)前端開發(fā)所需技能精通HTML(5)/XHTML、CSS(3)等網(wǎng)頁制作技術(shù)，熟悉頁面架構(gòu)和布局（盒模型，定位，浮動(dòng)，段落、圖片、文字的屬性控制，瀏覽器bug…）熟悉W3C標(biāo)準(zhǔn)，對(duì)表現(xiàn)與數(shù)據(jù)分離、Web語義化等有深刻理解（至此即可實(shí)現(xiàn)靜態(tài)頁面開發(fā)）精通JavaScript、Ajax等Web開發(fā)技術(shù)

對(duì)算法、數(shù)據(jù)結(jié)構(gòu)以及后臺(tái)開發(fā)(C/C++/PHP/Java等)有一定了解（可實(shí)現(xiàn)交互、動(dòng)畫等功能）前端開發(fā)基本流程需求分析，設(shè)計(jì)UI界面構(gòu)建HTML框架結(jié)構(gòu)編寫外部樣式（CSS）編寫外部js文件頁面細(xì)節(jié)的完善和優(yōu)化頁面（瀏覽器）兼容性和js效果測試及修正上傳服務(wù)器及后期維護(hù)Web前端—瀏覽器端瀏覽器主要功能是呈現(xiàn)用戶選擇的Web資源，它從服務(wù)器請(qǐng)求資源，并將其顯示在瀏覽器窗口中資源的格式通常是HTML，也包括PDF、image及其他格式用戶用URI(UniformResourceIdentifier統(tǒng)一資源標(biāo)識(shí)符)來指定所請(qǐng)求資源的位置Web即計(jì)算機(jī)，瀏覽器即桌面瀏覽器演變1995～1998，IEvs.Netscape2005～2007，IEvs.Firefox2012，Chrome份額超過IE今天，IE……瀏覽器的結(jié)構(gòu)與遠(yuǎn)程服務(wù)器通信輸出至顯示器從鼠標(biāo)和鍵盤輸入網(wǎng)絡(luò)接口可選客戶程序HTML解釋程序可選解釋程序控制程序驅(qū)動(dòng)程序……HTTP客戶程序緩存瀏覽器的主要組件用戶界面-包括地址欄、后退/前進(jìn)按鈕、書簽?zāi)夸浀?，就是除了用來顯示所請(qǐng)求頁面的主窗口之外的其他部分瀏覽器引擎-用來查詢及操作渲染引擎的接口渲染引擎

–也被稱為瀏覽器內(nèi)核，用來顯示請(qǐng)求的內(nèi)容，例如，如果請(qǐng)求內(nèi)容為html，它負(fù)責(zé)解析html及css，并將解析后的結(jié)果顯示出來網(wǎng)絡(luò)

-用來完成網(wǎng)絡(luò)調(diào)用，例如http請(qǐng)求，它具有平臺(tái)無關(guān)的接口，可以在不同平臺(tái)上工作瀏覽器的主要組件UI后端

-用來繪制類似組合選擇框及對(duì)話框等基本組件，具有不特定于某個(gè)平臺(tái)的通用接口，底層使用操作系統(tǒng)的用戶接口JS解釋器

-用來解釋執(zhí)行JS代碼數(shù)據(jù)存儲(chǔ)

-屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)，HTML5定義了webdatabase技術(shù)，這是一種輕量級(jí)完整的客戶端存儲(chǔ)技術(shù)瀏覽器的主要組件

組件間的通信渲染引擎（Renderingengines）渲染引擎的職責(zé)就是渲染，即在瀏覽器窗口中顯示所請(qǐng)求的內(nèi)容默認(rèn)情況下，渲染引擎可以顯示html、xml文檔及圖片也可以借助插件(一種瀏覽器擴(kuò)展)顯示其他類型數(shù)據(jù)例如使用PDF閱讀器插件，可以顯示PDF格式Flash也是插件——與HTML5之爭Firefox使用GeokoSafari和Chrome使用webkitIE以webcontrol控件為內(nèi)核，QQ、360、搜狗、獵豹……h(huán)ttp://

組件間的通信主流程（Themainflow）渲染引擎首先通過網(wǎng)絡(luò)獲得所請(qǐng)求文檔的內(nèi)容解析html以構(gòu)建dom樹構(gòu)建render樹布局render樹繪制render樹內(nèi)容屬性布局繪制Webkit渲染引擎主流程

Mozilla的Geoko渲染引擎主流程HTML頁面加載和解析流程

用戶輸入網(wǎng)址（假設(shè)是個(gè)html頁面，并且是第一次訪問），瀏覽器向服務(wù)器發(fā)出請(qǐng)求（http），服務(wù)器返回html文件（http）瀏覽器開始載入html代碼，發(fā)現(xiàn)<head>標(biāo)簽內(nèi)有一個(gè)<link>標(biāo)簽引用外部CSS文件瀏覽器發(fā)出CSS文件的請(qǐng)求，服務(wù)器返回CSS文件（http）瀏覽器繼續(xù)載入html中<body>部分代碼，由于CSS文件已經(jīng)載入，可以開始渲染頁面（看來不錯(cuò)）瀏覽器在代碼中發(fā)現(xiàn)一個(gè)<img>標(biāo)簽引用了一張圖片，向服務(wù)器發(fā)出請(qǐng)求。此時(shí)瀏覽器不會(huì)等到圖片下載完，而是繼續(xù)渲染后面的代碼（http）HTML頁面加載和解析流程服務(wù)器返回圖片文件，由于圖片占用了一定面積，影響后面段落布局，因此瀏覽器要重新渲染這部分代碼（MyGod）瀏覽器發(fā)現(xiàn)包含Javascript代碼的<script>標(biāo)簽，趕快運(yùn)行它Javascript腳本執(zhí)行這條語句，它命令瀏覽器隱藏代碼中的某個(gè)<style>（style.display=“none”）。少了這個(gè)元素，瀏覽器不得不重新渲染這部分代碼（MyGod）執(zhí)行到</html>（終于……）HTML頁面加載和解析流程用戶點(diǎn)了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下＜link＞標(biāo)簽的CSS路徑（淚奔淚流……）瀏覽器召集在座的各位<div><span><ul><li>們，“大伙兒收拾收拾行李，咱得重新來過……”，瀏覽器向服務(wù)器請(qǐng)求了新的CSS文件，重新渲染頁面（唉……）瀏覽器加載和渲染HTML的順序下載順序從上到下，渲染（即把請(qǐng)求內(nèi)容顯示到瀏覽器屏幕）順序也是從上到下，下載和渲染同時(shí)進(jìn)行在渲染到頁面的某一部分時(shí)，其上面的所有部分都已經(jīng)下載完成（并不是說所有相關(guān)聯(lián)的元素都已經(jīng)下載完）如果遇到語義解釋性的標(biāo)簽嵌入文件（JS腳本，CSS樣式），那么此時(shí)的下載過程會(huì)啟用單獨(dú)連接進(jìn)行下載樣式表在下載完成后，將和以前下載的所有樣式表一起進(jìn)行解析，解析完成后，將對(duì)此前所有元素（含以前已經(jīng)渲染的）重新進(jìn)行渲染JS、CSS中如有重定義，后定義函數(shù)將覆蓋前定義函數(shù)頁面加載速度優(yōu)化近年Web網(wǎng)頁顯著增大。HTTPArchive研究表明，平均一個(gè)頁面1.25M，2015年達(dá)2M頁面性能優(yōu)化策略不論P(yáng)C還是移動(dòng)瀏覽器，頁面展示需要的時(shí)間里，20%用來讀取頁面的HTML，80%用來加載額外的像樣式表、腳本文件、或者圖片這樣的資源和執(zhí)行客戶端的程序主要改善性能的策略減少每個(gè)頁面需要獲取額外資源的HTTP請(qǐng)求數(shù)（少訪問服務(wù)器）減少每個(gè)請(qǐng)求加載的大?。ㄉ購姆?wù)器傳數(shù)據(jù)）優(yōu)化客戶端執(zhí)行的優(yōu)先級(jí)和腳本執(zhí)行的效率（提高處理速度）YSlowYahoo發(fā)布的一款基于FireFox的插件（YSlowforChrome）分析網(wǎng)站頁面，并告之為了提高網(wǎng)站性能，基于某些規(guī)則（23條）如何進(jìn)行優(yōu)化頁面加載速度優(yōu)化建議（Radware）合并Js文件和CSS-減http次數(shù)不僅簡化代碼，而且減少Get（http）請(qǐng)求次數(shù)Sprites圖片技術(shù)-減http次數(shù)一種網(wǎng)頁圖片應(yīng)用處理方式。將零星圖片包含到一張大圖中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字精確的定位出背景圖片的位置壓縮文本和圖片-減文件大小壓縮技術(shù)如gzip可以有效減少頁面加載的時(shí)間包括HTML，XML，JSON（JavaScript對(duì)象符號(hào)），JavaScript和CSS等，壓縮率都可以在大小70%左右頁面加載速度優(yōu)化建議延遲顯示可見區(qū)域外的內(nèi)容-顯示調(diào)度策略為了確保用戶可以更快看見可見區(qū)域的網(wǎng)頁，可以延遲加載或展現(xiàn)可見區(qū)域外的內(nèi)容，為了避免頁面變形，可以使用占位符標(biāo)簽制定正確的高度和寬度如jQueryImage

LazyLoad可以在用戶停留在第一屏?xí)r，不加載任何第一屏以下的圖片信息，當(dāng)鼠標(biāo)往下滾動(dòng)時(shí)，這些圖片才開始加載確保功能圖片優(yōu)先加載-顯示調(diào)度策略主要考慮可用性的重要性，一個(gè)功能按鈕要提前加載頁面加載速度優(yōu)化建議重新布置Call-to-Action按鈕-顯示調(diào)度策略從用戶體驗(yàn)速度著手，跳過了網(wǎng)頁的整體加載速度，讓一些行為按鈕提前，Call-to-Action按鈕一般習(xí)慣設(shè)計(jì)在頁面底部可以調(diào)整CTA按鈕位置或使用滑動(dòng)圖片按鈕。很多大型購物網(wǎng)站的加入購物車就是這種類型圖片格式優(yōu)化-減文件大小正確的圖片格式可以讓圖片縮小數(shù)倍，可以節(jié)省大量帶寬，減少處理時(shí)間，加快頁面加載速度圖片減肥工具如Smush.it和TinyPNG頁面加載速度優(yōu)化建議使用ProgressiveJPEGs-JPEG2000漸進(jìn)方式低速網(wǎng)絡(luò)精簡代碼-減文件大小網(wǎng)頁代碼瘦身，刪除不必要的沉冗代碼，比如不必要的空格、換行符、注釋等，包括JS代碼中的無用代碼也需要清除延遲加載和執(zhí)行非必要腳本-執(zhí)行調(diào)度策略網(wǎng)頁中很多腳本在頁面完全加載完前不需要執(zhí)行，可以延遲加載和執(zhí)行非必要腳本這些腳本可以在onload事件之后執(zhí)行，避免對(duì)網(wǎng)頁上重要內(nèi)容的呈現(xiàn)造成影響這些腳本往往是一些第三方腳本，這樣的有很多，比如評(píng)論、廣告、智能推薦、百度云圖、分享等等，這些完全可以等主體內(nèi)容加載完后再執(zhí)行頁面加載速度優(yōu)化建議使用AJAX-異步（調(diào)度）+減文件大小AJAX即“AsynchronousJavascript+XML”，通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX可以使網(wǎng)頁實(shí)現(xiàn)異步操作局部更新自動(dòng)化的頁面性能優(yōu)化自動(dòng)化的頁面性能優(yōu)化是借助工具如Radware推薦了自家的RadwareFastView簡單建議外部JS和CSSHead（顯示主要頁面用）Body尾部（被調(diào)用）可以用CSS處盡量用少調(diào)文件減少HTTP，DNS（不同域名使用越少越好）合并文件網(wǎng)址尾部加/（不是文件時(shí)）圖片或表格指定height和width參數(shù)（減少計(jì)算）用緩存（特別是HTML5）減少圖片（如能用HTML或JS生成）和FLASH（特別是HTML5）網(wǎng)頁數(shù)據(jù)分析工具（Httpfox）HttpWatch（Httpfox）記錄HTTP

與Internet瀏覽器和Firefox集成獨(dú)立的日志文件查看器按頁面的請(qǐng)求分組請(qǐng)求LevelTime圖表頁面事件可定制的數(shù)據(jù)列自動(dòng)化支持毫秒級(jí)的計(jì)時(shí)HTTP壓縮可擴(kuò)展的Cookie信息原始HTTP流網(wǎng)頁數(shù)據(jù)分析工具導(dǎo)入HAR文件鍵盤加速器準(zhǔn)確地記錄請(qǐng)求和響應(yīng)支持國際字符集容易，簡單而且功能強(qiáng)大‘解密HTTPS流量壓縮型和綜合性日志文件記錄的流量摘要信息從您的客戶中收集日志文件實(shí)時(shí)頁面級(jí)時(shí)間圖表檢測潛在的問題網(wǎng)頁數(shù)據(jù)分析工具數(shù)據(jù)提示先進(jìn)的過濾功能動(dòng)態(tài)排序網(wǎng)絡(luò)級(jí)的性能數(shù)據(jù)顯示與瀏覽器Cache的交互將數(shù)據(jù)導(dǎo)出到CSV,HAR和XML文件中可定制的CSV導(dǎo)出訪問緩存的和已下載的內(nèi)容自動(dòng)記錄和保存支持打印Web前端技術(shù)簡介基本模型：HTML（5）展示外觀：CSS（3）實(shí)現(xiàn)操作：JavaScriptJquery（尤其Chrome）數(shù)據(jù)庫技術(shù)MySql\SQLServer\Oracle\SQLilePHP/JSP/ASP服務(wù)器技術(shù)Node.js架構(gòu)Jquery/Bootstrap4．4．2HTML5HTML發(fā)展歷史19982000200220042007HTML4.0XHTML1XHTML2WHATWGHTML5WHATWG：WebHypertextApplicationTechnologyWorkingGroupHTML5DEMOHTML發(fā)展歷史HTMLfirstpublished199120122002-20092000HTML2.0HTML3.2HTML4.01XHTML1.0XHTML2.0HTML5199519971999HTML5ismuchmoretolerantandcanhandlemarkupfromallthepriorversions.ThoughHTML5waspublishedofficiallyin2012,ithasbeenindevelopmentsince2004.AfterHTML4.01wasreleased,focusshiftedtoXHTMLanditsstricterstandards.XHTML2.0hadevenstricterstandardsthan1.0,rejectingwebpagesthatdidnotcomply.Itfelloutoffavorgraduallyandwasabandonedcompletelyin2009.支持HTML5的瀏覽器Opera9.5+Cross-documentmessagingServer-senteventsWebForms2.0CanvasandvideoSafari3.1+<video>and<audio>tagsOfflinedatastorageAPIWebkit(Iphone/Chrome/Android/

Nokias60/Palm'sWebOS)支持HTML5的瀏覽器FireFox3.1+offlinestorageandcanvasGeolocation/WebWorkers/

ContentEditableGecko(moreHTML5APIs)InternetExplorer8.0+embedelementand

contentEditableattributecross-documentmessagingHTML5概覽通用適合所有瀏覽器結(jié)構(gòu)清晰標(biāo)簽代替DIV減少JavaScript編程標(biāo)簽代替API代替插件安全性、兼容性、……TobeornottobeAPIs,還有庫的支持，如jQueryFlash的噩夢:網(wǎng)頁中地位下降HTML5概覽強(qiáng)化Web網(wǎng)頁的表現(xiàn)性能，提供了繪制、視頻和音頻工具，追加本地?cái)?shù)據(jù)庫等Web應(yīng)用的功能促進(jìn)Web上的和便攜設(shè)備的跨瀏覽器應(yīng)用的開發(fā)。HTML5是驅(qū)動(dòng)移動(dòng)云計(jì)算服務(wù)方面發(fā)展的技術(shù)之一瀏覽器支持程度評(píng)測網(wǎng)站

/HTML5技術(shù)概覽HTML5新增和移除的元素HTML5基本布局HTML5對(duì)表單的支持HTML5DOM變化HTML5的JavascriptAPIsCanvasVideo/AudioDrag&DropGeolocationApplicationCacheDatabaseStorageX-DocumentMessagingHTML5新增的元素多媒體及交互式元素video,audio...details,menu,command...結(jié)構(gòu)元素header,footer,section,article,nav...塊級(jí)語義及行內(nèi)元素aside,figure,dialog...time,meter,mark,progress...表單控件email,url,datetime,number,range,color...HTML5新增的屬性contenteditable,contextmenu,data-*,hidden,item,itemprop,subject,

role,aria-*,spellcheck,draggable,irrelevant,template,placeholder,autofocus,required,async,manifest...HTML5新增的事件onabort,onbeforeunload,oncontextmenu,ondrag,ondragend,ondragenter,ondragleave,ondragover,ondragstart,ondrop,onerror,onmessage,onmousewheel,onresize,onscroll,onunload...HTML5移除的元素移除的元素font,center,strike,big,s,u,acronym,applet,dir...移除的屬性如a,area,button,input,label,legend和textarea元素的accesskey屬性如link和a元素的rev和charset屬性,link元素的target屬性,td的scope屬性，script元素的language屬性,body元素的alink，link，text和vlink屬性HTML5基本布局HTML4HTML5<!DOCTYPEhtml><htmlang="en"><head><metacharset="utf-8"><title>HTML5Demo</title><body><header><h1></h1><h2></h2></header><nav><ul><li></li><li></li></ul></nav><section><article></article><article></article></section><aside></aside><footer></footer></body></html><!DOCTYPEhtml><html><head><style>*{margin:0;padding:0;}body{width:962px;background-color:white;margin:15pxauto;border:1pxsolidblack;}h1{padding:10px;}header{border-bottom:2pxsolid#ef9c00;}section{height:400px;width:600px;float:left;border-right:2pxsolid#ef9c00;float:left;}aside{width:360px;float:right;}footer{clear:both;border-top:2pxsolid#ef9c00;}</style></head><body><header><h1>Header</h1></header><section><h1>Section</h1></section><aside><h1>Aside</h1></aside><footer><h1>Footer</h1></footer></body></html>標(biāo)簽CSSHTML5對(duì)表單的支持新的控件類型<inputtype="url|email|date|tel|search|datetime|date|month|week|datetime-local|number|range|color">,<selectdata="http://domain/getoptions"></select>文件上傳控件<inputtype="file"accept="image/png"/>重復(fù)的模型add,remove,move-up,move-down內(nèi)建表單驗(yàn)證<inputtype="email"required/>,<inputtype="number"min=10max=100/>XMLSubmissionapplication/x-www-form+xml

<formaction='/register'enctype="application/x-www-form+xml"method="post"><p><labelfor='name'>ID(請(qǐng)使用Email注冊(cè))</label><inputname='name'requiredtype='email'/><p><labelfor='password'>密碼</label><inputname='password'requiredtype='password'/><p><labelfor='birthday'>出生日期</label><inputtype='date'name='birthday'/><p><labelfor='gender'>國籍</label><selectname='country'data='countries.xml'></select><p><labelfor='photo'>個(gè)性頭像</label><inputtype='file'name='photo'accept='image/*'/><table><thead><td><buttontype="add"template="questionId">+</button>保密問題</td><td>答案</td><td></td></thead><trid="questionId"repeat="template"repeat-start="1"repeat-min="1"repeat-max="3"><td><inputtype="text"name="questions[questionId].q"/></td><td><inputtype="text"name="questions[questionId].a"/></td><td><buttontype="remove">刪除</button></td></tr></table><p><inputtype='submit'value='send'class='submit'/></p></form>/Demo/Speech/Demo/form-html5.html

HTML5DOM變化getElementsByClassNameSelectorAPIdocument.querySelector()document.querySelectorAll()TraversalAPI.nextElementSibling.previousElementSibling.firstElementChild.lastElementChild.childrenHTML5的JavascriptAPIsWebForms2.0MessagingOfflineApplicationsHistoryAPIVideo&AudioDrag&DropUndoCanvasEditableX-DomainStorageGeolocationLocalDatabaseVideo&Audio在無需安裝第三方插件的情況下添加圖形和視頻<videoheight="280"width="498"poster="border.png"id="video">

<sourcesrc="coldplay.mp4">

</video><audiosrc="music.oga"controls>

<ahref="music.oga">Downloadsong</a>

</audio>Canvas<canvas>是一個(gè)新的HTML元素，這個(gè)元素可以被Script語言（通常是JavaScript）用來繪制圖形。例如可以用它來畫圖、合成圖像、或做簡單的（和不那么簡單的）動(dòng)畫varcanvas=document.getElementById("canvas"),context=canvas.getContext("2d");

context.fillStyle="rgb(0,0,200)";

context.fillRect(10,10,50,50);context.save();

context.restore();

context.scale(x,y);

context.rotate(angle);

context.translate(x,y);

Canvasvs.DOM+CSSCanvas提供像素級(jí)API，只要精通算法，理論上幾乎可以做出任何效果大量游戲工程師進(jìn)入Web前端實(shí)現(xiàn)在瀏覽器中的WebGL失去DOM和CSS支持（瀏覽器引擎的核心工作之一），開發(fā)成本增加HTML是DOM樹，瀏覽器引擎解析DOM樹提供瀏覽功能CSS將外觀從內(nèi)容中分離，提高開發(fā)效率和可維護(hù)性平衡的解決方案（結(jié)構(gòu)+處理）甚至PhotoShopDrag&Drop拖拽事件:dragstart,dragend,dragenter,dragleave,dragover,drag,drop<divdraggable="true"ondragstart="dragstartHandler(event)"></div>

functiondragstartHandler(e){

alert('dragstart');}WebWorkers讓JavaScript多線程，可以在后臺(tái)做很多工作而不會(huì)阻斷當(dāng)前的瀏覽器（異步化）創(chuàng)建后臺(tái)運(yùn)行的線程varw=newWorker(“worker.js”);

w.onmessage=function(event){ alert(event.data);}

w.postMessage('run');WebWorkers//worker.jsimportScripts(“xhr.js”,“db.js”);onmessage=function(event){

if(event.data=='run'){

run();

}

}functionrun(){

vardata=doCrazyNumberCrunch();

postMessage(data);

}Geolocationnavigator

.geolocation

.getCurrentPosition(

success,

error);支持共享地理位置；通過使用移動(dòng)智能設(shè)備定位功能納入移動(dòng)云服務(wù)和應(yīng)用ApplicationCache離線存儲(chǔ)<htmlmanifest="rubiks.manifest">rubiks.manifestCACHEMANIFEST

/demo/rubiks/style.css

/demo/rubiks/jquery.min.js

/demo/rubiks/rubiks.js

#version15http:///demo/rubiks

StorageWebSQLDatabases支持SQL規(guī)范的本地?cái)?shù)據(jù)庫本地存儲(chǔ)（大小限制5MB,HTTPCookie大小4KB）databasestorage（客戶端數(shù)據(jù)庫SQLite）WebKit中已經(jīng)實(shí)現(xiàn)vardatabase=openDatabase('db','1.0');database.executeSql('SELECT*FROMtest',function(result){

database.executeSql('DROPTABLEtest');

});Storagekey/val存儲(chǔ)()sessionStorage(windowbased)localStorage(domainbased)WebKit/IE8/Firefox3.5已經(jīng)實(shí)現(xiàn).setItem(key,value).getItem(key)Cross-DocumentMessaging.postMessage(message,targetOrigin).onMessage(event)event.data==messagedocument.getElementById('iframe').contentWindow.postMessage('mymessage','');window.addEventListener('message',

function(e){

if(e.origion!==''){

return;

}

alert(e.origion+'said:'+e.data);

},false);跨域:不同url/

2022?4．4．3CSS3199619982001CSS1.0CSS2.0CSS3.0CascadingStyleSheetsCSS的發(fā)展歷史CSS3DEMOCSS3技術(shù)概況CSS技術(shù)的升級(jí)版本模塊化發(fā)展以前規(guī)范，一個(gè)模塊，太龐大且比較復(fù)雜分解為一些小模塊加入新模塊模塊盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局……CSS3技術(shù)概況選擇器布局樣式動(dòng)畫其它CSS3-選擇器屬性選擇器a[href$='.pdf'],a[href^='mailto'],a[class*=‘item’]兄弟選擇器Div~img偽類選擇器:nth-child(n),:nth-last-child(n),:last-child,:checked,:empty,:only-child,:nth-of-type(odd),:nth-of-type(even)CSS3-樣式圓角border-radius:3px-moz-border-radius-topleft-webkit-border-top-left-radius陰影box-shadow:5px5px5pxrgba(0,0,0,0.5)text-shadow:2px2px#444,3px3px#555自定義字體@font-face{

font-family:Adam,src:url(adam.ttf);

}

p{font-family:Adam,serif;}文本換行word-wrap:normal|break-wordCSS3-樣式邊框背景border-image:url(border.png)27272727roundround;漸變background:-moz-linear-gradient(20%,center,30%,center,from(blue),to(yellow))no-repeat;背景background-size:100px50px;background-origin:content-box|border-box|padding-box;background-clip:border-box|padding-boxCSS3-樣式透明opacity:0.5;RGBAcolor:rgba(0,255,0,0.5);HSL/Acolor:hsl(240,50%,50%);hsla(240,50%,50%,0.5)調(diào)整元素尺寸resize:both|horizontal|verticalCSS3-布局盒模型box-sizing:content-box|border-box;網(wǎng)格模型column-count:3;column-width:13em;column-gap:1em;column-rule:1pxsolidblack;CSSTableDisplay#content{display:table;}

#main{display:table-cell;width:620px;padding-right:22px;}

#side{display:table-cell;width:300px;}Outlineoutline-offsetCSS3-動(dòng)畫變換transform:rotate(30deg);transform:scale(0.5,2.0);transform:skew(-30deg);transform:translate(30px,0);過渡transition:all1sease-out;動(dòng)畫animation:greenPulseinfiniteease-in-out3s;CSS3-其它媒體查詢.entry{color:red;}

@mediaalland{min-width:100em}{

.entry{color:black