WebPageBuilding角色的思考

2024-04-27 13:53:20

字體：大中小

來源：轉載

供稿：網友

　　
　　Web Page Building頁面制作這個崗位不怎么被人重視，覺得這份工作很簡單，沒什么難度。或者很低級，沒有自己的想法，只是把設計稿變成了網頁。不涉及編程，不涉及設計，沒有自己的想法，很可能在某些公司被開發或者設計人員兼任著。

　　Web Page Building這個崗位在做什么？能做什么？做到了什么？憑自己的想法和經歷，整理了一下，見下圖：

我是從四個方面去考慮：

第一：用戶
　　面對用戶，我們需要做的當然是完全的還原ui稿給用戶，也就是把UI稿做成網頁呈現給用戶。而準確的說是呈現交互和視覺感受，交互邏輯，信息構建和視覺設計，這個的重要性最高，也是必須完成的。呈現的平臺就是可以解析網頁的軟件，需要呈現的平臺是存在產品用戶的那部分平臺，更多的是Windows下的IE5.5, IE6.0, IE7.0, 少量的Firefox，Opera，后兩個瀏覽器沒有限定版本，因為他們可以很輕易更新。支持到最新版本即可。
　　其次是附加的用戶體驗，網頁的打開速度很重要，如何減少文件和圖片的字節，如何根據流量去批量加載文件，整合css文件和圖片，降低http連接數，網頁內容是文本呈現（看似很白癡的一點，可是有些網頁真的把正常網頁能呈現的文字放在圖片中）。鏈接的動態表現形式，鼠標劃過，點擊后的等效果（UI稿不會有的），表單的可用和易用，如焦點，表單字體顏色，大小，下拉表單的分組等，優先顯示重要內容，也就是html中寫在前面。需要長時間閱讀的文字可支持縮放。再就是一些對于我不是很重要的部分，想親和力，可轉化為pdf格式，有需要打印的可打印，異狀處理，像圖片沒加載有信息提示，樣式沒加載的內容可讀性等等

第二：信息數據
　　海量的網站和網頁，誕生了信息的檢索和篩選工具，那就是搜索引擎，而且搜索引擎已經成為用戶上網找資源的一個必用工具，面向搜索引擎的要害字排名優化是很有必要的，IBM技術文檔的數據說明大概有30%的訪問量是來自搜索引擎的。
　　搜索引擎排名優化的要害是內容，也就是上面提到的信息構建，如何提供有價值的而且易于訪問的內容。手段是HTML編碼――搜索引擎信息數據的來源，爬蟲可以輕松的獲取html中重要的信息數據，如<title>，<meta>部分的描述，要害字，標題<hx>，加重強調<strong>，而且網頁前200單詞中關鍵詞出現的頻率對這個關鍵詞的排名的影響很大。
　　Web Page Building人員這個方面需要做的事情就是合理的使用html標記，遵循標記的語義，將表現元素和結構分離，提煉title和meta部分的內容，將重要內容放在代碼的前面，給用背景呈現的重要信息提供隱藏的替代文字，防止JS輸出重要內容（如導航）。假如有SEO人員，剩下的就交給他們了，假如沒有自己適當的承擔。

第三：開發者或者是開發流程
　　你的網頁是要交給開發的，開發根據產品的功能進行開發，包括一部分的前臺腳本。你的網頁是否方便開發人員加程序（表單驗證，分頁的數據等），這也是需要思考和做到的，還有非凡表現方式的處理，如鼠標劃過事件相應，tab切換，下拉菜單，浮出層，拖拽等動態交互效果。非凡的字符處理（如非凡字符換行，防止長字符撐大容器的截字處理）。
　　面對產品需求的臨時變更，版本迭代的變更，也要做到可以輕易的應對和維護，開發模式和效率上需要思考代碼的復用和多人協同開發。

第四：成本
　　流量和服務器是成本，你可以做到部分的降低這些成本，減少文件的字節，減少連接數和并發連接數。

頁面制作和web標準
　　雖然《網站重構――designing with web standards》提到web標準涉及結構，表現，行為的分離，WAI（網站內容可訪問性）可是大部分的讀者和推廣者還是更多的在結構和表現上面學習和實踐著，我也在圖上用關聯線段標明了結構，表現與以上四點的一些關系，結構更多的是面向信息數據的，表現更多的是面向還原UI稿的，當然不是很準確，本身結構也是UI稿的一部分，可以說是將UI稿分成了結構和表現兩個部分。

　　以上四個方面開看，Web Page Building這個崗位不是傳統認為的那么簡單和可替代性，從語言的角度要求必須熟練把握兩種語言html和css，以及當前的瀏覽器版本，瀏覽器類型和設備對這兩種語言的兼容性。其次是性能優化的方法和SEO的知識，再次是開發效率的提升。假如有哪位開發或者UI想兼職它，我也不介意，可能您的能力的確夠強。

　　我們期待的是這樣一個Web Page Building崗位，web前臺開發、網頁制作和前臺Javascript腳本開發。第一更有挑戰性，第二時代的要求，富客戶端的要求，前臺腳本越來越重要，越來越復雜。第三，崗位更具不可替代性。有不準確和遺漏的地方，歡迎您回復指正和補充。

上一篇：dipslay的值block,inline,none,list-item分別表示什么？

下一篇：符合WEB標準的滾動文字特效的實現方法