您的位置: 首頁 > 技術文檔 > 網頁制作 > 頁面前端的水有多深?
回到列表 -webkit-filter是神馬?
 頁面前端的水有多深?

作者:lemon 時間: 2012-05-22 文檔類型:合作網站提供 來自:

但凡從事互聯網的人基本都會寫幾行 html,用過 Word 的人用 Dreamweaver 也能做出規整的頁面,所以大部分人會很自然地認為“頁面的開發沒什么技術含量,很簡單”。不僅有這種普遍的認知,對從業者來說也有很多疑惑:做頁面前端實現,沒問題;兼容性,小 case;圖片集成,一直都在用……還能有什么問題?瓶頸啊、天花板啊、轉型啊、出路啊就在從業者中廣泛討論。是不是真的沒什么問題了呢?網易郵箱前端技術中心也設立好幾年了,似乎有著討論不完的話題,也經常會有一些新的想法讓大家為之一振。那么頁面開發還有哪些要求,還要做些什么,這里面的水有多深,讓我們舀舀看。

在不同的時期對頁面前端的看法似乎是多變的。在互聯網早期的時候,小車還是比房子貴的,燒餅和粉絲還只是用來吃的,菊花還只是用來泡茶的。那時的頁面設計風格相對單一,對應的頁面需求比較簡單,并且當時的瀏覽器也基本是 IE6 的天下,javascript 也只是網頁特效的代名詞,HTML 頁面本身沒有引起太多人的關注,似乎只要能用 div 甚至 table 加 css 輔助把圖片定好位,把頁面內容預留好就 OK 了,并且這種觀念存在了很長一段時間。隨著頁面內容的豐富,設計風格的發展,交互復雜性的增加,AJAX 的應用,瀏覽器的更新換代,又讓大家重新對最基本的頁面本身重視起來。然后熱議的就是瀏覽器的兼容性,碰到問題最熱衷的就是滿網絡搜索 hack,順便再罵罵 IE6、7……當這些都做一遍后,似乎又遇到了瓶頸,又開始尋找出路。我們就從這個階段開始說起。

實現效果圖是最基本的工作

把視覺稿通過頁面代碼的方式表現出來包含了兩個基本訴求:1.能夠真實反映視覺稿;2.能夠通過瀏覽器的兼容。這兩個訴求的達成需要我們有追求細節的態度和一定的頁面功底,能完成這兩個內容就可以初步進入頁面前端的從業者行列了,但這就代表著我們可以勝任頁面開發的工作了?不,才剛剛開始!

與設計師的溝通和項目的參與

溝通很重要。先拋出幾個問題:我們有沒有和設計師探討過某些效果對低端瀏覽器渲染效率影響比較大?有沒有探討過部分效果可以用 CSS3 實現從而使得結構更加簡潔清晰?有沒有在代碼和視覺中尋追求過平衡?頁面前端的開發向基本用戶,編寫的代碼也直接作用在瀏覽器上,我們有義務對頁面的穩定性和渲染效率負責。我們也經常碰到項目在總體進度壓力下導致的設計與頁面前端開發同步進行,這時更有必要盡量多地獲取項目信息,了解我們還要做些什么,這些可以幫助我們充分考慮重用和框架拓展。

良好的頁面結構

頁面結構的編寫好比蓋房的地基建設,其好壞會直接影響到 CSS 代碼的質量、js 開發、后臺開發還會影響到以后的頁面拓展、迭代和頁面調整。拿到視覺稿后,不要忙著動手開始,多觀察思考。先分析布局,劃分框架,然后規劃結構,編寫代碼。特別在大型項目中,合理使用模塊化的開發不論從整體進行還是拓展維護都有相當大的好處。

關于 hack

很多同學在頁面開發時上網搜索最多的就是 hack 了,是否我們完全要依賴 hack 來實現頁面兼容性,答案是否定的。大家經常比喻 IE6 向我們撒了一個謊,結果我們要再撒一百個謊來圓這個謊。不否認 IE6 經常讓我們口吐鮮血,但不代表我們用更多的“謊言”來彌補就可以心安理得。大部分情況下可以通過變換思路調整 HTML 結構,或使用一些雖然無法解釋但相對安全的 css 來干掉 hack。誰都無法預計使用 hack 什么時候會讓我們栽一個大跟頭。比如觸發 layout 或 position:relative 就可以幫助解決很多 IE6 的問題。

優美的代碼

現在很多 web 項目功能復雜,代碼規模也會變得很龐大,如何更好地進行協同開發和維護是我們面臨的一個問題。需要考慮完善統一的規劃,還有要養成良好的代碼開發習慣才會在面臨各種情況時游刃有余。翻閱頁面代碼,看到合理的標簽使用、良好的注釋、清晰的代碼結構、用意準確的 css 不僅猶如欣賞一個藝術品,更為下游開發和協同開發降低了不小的溝通成本,我們有什么理由不去這么做呢?舉個反面例子:div 濫用是現在比較典型的一個問題。數數看自己使用的標簽有多少個呢?不同的語義都該使用對應的標簽代碼,特別是 HTML5 提供了更豐富的語義化標簽,它們都苦苦地在等待戰場上的沖鋒號,讓我們去解放它們吧!

無障礙頁面開

可訪問性與易用性是非常主觀且人性化的東西。普通人看上去上完美呈現的頁面在特殊群體中不一定顯得那么貼心。當盲人用讀屏軟件在頁面某個區域內陷入循環時,我們應該感到內疚。只能說目前國內的網站對此的重視程度還遠遠不夠,這就需要我們共同努力,讓更多的人感受到我們的熱情。

保障效率

作為項目開發中比較靠前的一環,頁面開發可能需要盡早完成為項目爭取時間,這就需要我們盡可能地提高效率。“工欲善其事,必先利其器”,除了實戰經驗和代碼習慣的形成可以幫助我們提高效率外,想要提高對自己開發的進度掌控能力,還有很多輔助工具可以幫助我們進行頁面開發。比如使用 Less 或 Sass 可以幫助我們拓展和組織 CSS,大大提高 CSS 的編寫效率增加了可維護性。比如可以通過 zen coding 的自動自動完成和自定義代碼塊讓你可以劍指如飛。甚至還見過通過自定義輸入法的代碼塊關鍵字來提升開發速度的。多多發掘一定會找到最合適自己使用的工具。

針對服務器的優化

頁面開發也需要了解服務器的優化,盡量減小服務器負擔。比如 css sprite 就是一個典型減小服務器請求數的例子。在網易郵箱的頁面前端開發中大家不停地在做著各種優化,比如一直在尋求文件大小與服務器請求數的平衡;為了盡可能提高緩存利用率采用了補丁升級;對 class 名進行了混淆壓縮避免命名過長的冗余;應用 base64 減少請求數量等等措施。這些都是綜合權衡的結果,需要考慮各個方面整體優化。因為當頁面訪問量達到一定的數量級時,再小的一點優化都會達到可觀的效果,再小的問題都可能會形成巨大的災難。

擁抱 HTML5

這是一個充滿機會的時代,HTML5時代的來臨伴隨著移動互聯網的興起創造了更大的機會,還有太多的東西值得我們去學習去發現。 HTML5 提供了豐富的 JS API 接口,需要我們去研究;CSS3的絢麗吸引了足夠多的眼球,需要我們去研究;移動設備上如何開發更加適配的頁面,需要我們去研究……

Stay Hungry, Stay Foolish

水是越舀越多了,卻發現原來下面還深不見底,上面的內容越是深入研究就越會發現更多山川需要翻越。保持饑餓狀態,用眼睛去努力發現發掘,不斷豐富技能才能找到定位,突破瓶頸,正所謂“唯有高屋建瓴方可水到渠成”。形成本文是因為之前和同行討論到瓶頸的問題,想給自己,給頁面前端的同學一起找找定位,梳理一下思路。拿蘋果 CEO 在斯坦福演講的一句話“Stay Hungry, Stay Foolish”和大家共勉。

本文鏈接:http://www.ditdrb.tw 

出處:
責任編輯:bluehearts

◎進入論壇網頁制作WEB標準化版塊參加討論,我還想發表評論

熱門搜索:CSS Fireworks 設計比賽 網頁制作 web標準 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大福“敬•自然”設計大賽開啟
國際體驗設計大會7月將在京舉行
中國國防科技信息中心標志征集
云計算如何讓安全問題可控
云計算是多數企業唯一擁抱互聯網的機會
阿里行云
云手機年終巨獻,送禮標配299起
阿里巴巴CTO王堅的"云和互聯網觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設計大賽
欄目最新 欄目最新列表
淺談JavaScript編程語言的編碼規范
如何在illustrator中繪制臺歷
Ps簡單繪制一個可愛的鉛筆圖標
數據同步算法研究
用ps作簡單的作品展示頁面
CSS定位機制之一:普通流
25個最佳最閃亮的Eclipse開發項目
Illustrator中制作針線縫制文字效果
Photoshop制作印刷凹凸字體
VS2010中創建自定義SQL Rule
分享按鈕

藍色理想版權申明:除部分特別聲明不要轉載,或者授權我站獨家播發的文章外,大家可以自由轉載我站點的原創文章,但原作者和來自我站的鏈接必須保留(非我站原創的,按照原來自一節,自行鏈接)。文章版權歸我站和作者共有。

轉載要求:轉載之圖片、文件,鏈接請不要盜鏈到本站,且不準打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯系,版權歸原作者所有,文章若有侵犯作者版權,請與我們聯系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內容無關的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網上道德,遵守中華人民共和國的各項有關法律法規
·承擔一切因您的行為而直接或間接導致的民事或刑事法律責任
·本站評論管理人員有權保留或刪除其管轄評論中的任意內容
·您在本站發表的作品,本站有權在網站內轉載或引用
·參與本評論即表明您已經閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業書推薦 更多內容
網站可用性測試及優化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網站UI 設計之道
《Flex 4.0 RIA開發寶典》
《贏在設計》
犀利開發—jQuery內核詳解與實踐
作品集 更多內容

雜⑦雜⑧ Gold NORMANA V2
公式规律一波中特