• Like
凌網-網頁設計新規格簡介
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

凌網-網頁設計新規格簡介

  • 485 views
Published

 

Published in Internet
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
485
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
18
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 網頁新規格簡介 HTML5 / CSS3 / Responsive Web Design
  • 2. 大綱  對網頁設計的了解?對GIP的了解?  手持裝置對網頁設計帶來的改變  關於HTML5  關於CSS3  Responsive Web Design自適應網頁/響應式網頁  對新規格的誤解  設計師會遇到的難題  企劃該注意到的事
  • 3. 對網頁設計的了解?對GIP的了解?  HTML是什麼?  CSS是什麼?  關於GIP  了解你配合的工程師  如何跟設計師溝通你要的切法?
  • 4. 手持裝置對網頁設計帶來的改變  手持裝置這些年來已經進入了大爆發的時代,為了配合手持裝置瀏覽, 網頁的設計方式這些年來也漸漸改變,但無論如何改變,最終的目的 都是要讓瀏覽經驗更方便、更快速。 趨勢 解決辦法 網頁內容精簡 滾動式、單頁式 減少Flash、JavaScript的使用 HTML5搭配CSS3 網頁設計精簡 扁平化設計Flat Design 跨媒體瀏覽 RWD自適應
  • 5. 關於 HTML5  HTML5是HTML下一個主要的修訂版本,現在仍處於發展階段。目 標是取代1999年所製定的HTML 4.01和XHTML 1.0標準。  廣義論及HTML5時,實際指的是包括HTML、CSS和JavaScript在內 的一套技術組合。  它希望能夠減少瀏覽器對於外掛程式需求,如Adobe Flash、 Microsoft Silverlight,與Oracle JavaFX的需求,並且提供更多能有 效增強網路應用的標準。
  • 6. HTML5的技術組成 離線功能 HTML5透過JavaScript提供了數種不同的離線儲存功能,相對於傳統的 Cookie而言有更好的彈性以及架構,並且可以儲存更多的內容。  WebStorage →比Cookies更大、更有彈性的的儲存  Web SQL Database →本地端的SQL資料庫  Indexed DB → Key-value的本地資料庫  Application Cache → 將部分常用的網頁內容cache起來
  • 7. HTML5的技術組成 即時通訊 以往網站由於HTTP協定以及瀏覽器的設計,即時的互動性相當的受限, 只能使用一些技巧來「模擬」即時的通訊效果,但HTML5提供了完善的 即時通訊支援。  WebSocket →即時的socket連線  Web Workers →以往JavaScript都是single thread,透過Worker可 以有多個運算  Notifications →原生的提示訊息,類似像OS X的Growl提示
  • 8. HTML5的技術組成 檔案以及硬體支援 在Gmail等新的網頁程式當中,可以透過拖拉的方式將檔案作為附件或是上 傳的方式,就是HTML5的Drag‘n Drop和File API。  Drag'n Drop → HTML元素的拖拉  File API →讀取使用者本機電腦的內容  Geolocation →地理定位  Device orientation →手持裝置的方向  Speech input →語音輸入
  • 9. HTML5的技術組成 語意化 語意化的網路可以讓電腦能夠更加理解網頁的內容,對於搜尋引擎的優 化(SEO)有很大的幫助。  New tags →新的標籤,像是<header>、<section>等  Application tags →也是新的標籤,像是<meter>、<progress>等  Microdata →加入語意的資料讓搜尋引擎等網站可以正確顯示  Form type → <form>可以加入的type便多了,包含email和tel等屬 性,瀏覽器會協助進行資料格式的驗證
  • 10. HTML5的技術組成 多媒體 Audio、Video的標籤支援以及Canvas的功能應該是大家對於HTML5最 熟悉的部份了,也是許多人認為Flash會被取代的主要原因。  Audio video → 影片和音樂的原生播放支援  Canvas → 2D的繪圖功能支援  Canvas 3D → 3D的繪圖功能支援  SVG → 向量圖支援
  • 11. 與HTML4的不同之處  檔案類型聲明(<!DOCTYPE>)僅有一型:<!DOCTYPE HTML>。  新的解析順序:不再基於SGML。  新的元素:section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。  input元素的新類型:date, email, url等等。  新的屬性:ping(用於a與area), charset(用於meta), async(用於script)。  全域屬性:id, tabindex, repeat。  新的全域屬性:contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。  解除安裝元素:acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。
  • 12. 與HTML4的不同之處
  • 13. HTML5的支援程度 各瀏覽器的支援  HTML 5 Test網站,是用以測試對瀏覽器對熱門新功能的支援。測試的滿分是550分 http://html5test.com/results/desktop.html  HTML5 & CSS3 Support http://fmbip.com/litmus/ CSS3 Properties:CSS3屬性支援列表 CSS3 Selectors:CSS選擇器支援列表 Web Applications:HTML5的Web應用功能支援列表 GFX & Embedded Content:HTML5的圖形及內嵌內容支援列表 Web Forms 2.0:HTML5的新表單元件支援列表  讓IE8勉強支援HTML5 http://diyland.biz/?opt=detail&topic=75&id=16977
  • 14. HTML5的支援程度 無障礙(Accessibility)  為了使HTML5的新元素或新屬性獲取最大化的相容性,開發人員需 要附加一點額外補助,或者有些特性根本沒有被任何瀏覽器實作,或 者瀏覽器根本不支援補助技術。因此有些特殊的HTML5特性根本不 能使用。 http://www.people.cd/html5-accessibility/
  • 15. 關於CSS3 各瀏覽器的支援  CSS又叫層疊樣式表(Cascading Style Sheets)用來為結構化文件(如HTML或XML) 添加樣式(字型、間距和顏色等),由W3C定義和維護。目前最新版本是CSS2.1,為 W3C的推薦標準。  CSS3新增許多CSS2.1沒有的功能,過去利用影像或是JavaScript才能呈現的網頁設計 (例如漸層色、圓角、陰影、英文網路字型、多欄位排版、動畫),現在只要利用 CSS3搭配HTML5就可以輕鬆完成,對於網頁在手持裝置上的執行速度有顯著的提升。 但因為目前只是草案,除了每家瀏覽器的CSS3寫法不同之外,也有支援度的問題。  W3C網站 http://www.w3.org/TR/CSS/ CSS3 school http://www.w3schools.com/css/css3_intro.asp 瀏覽器引擎CSS支援比較 http://ppt.cc/7qe0
  • 16. Responsive Web Design自適應網 頁 何謂自適應? 簡單來說就是讓同一 個網頁文本(即同一 個HTML)在 PC、 Mobile 上都可以有好 的瀏覽效果,稱為自 適應網頁 (Responsive Web Design,簡稱RWD)。
  • 17. Responsive Web Design自適應網 頁 Responsive design device resolution reference http://spirelightmedia.com/resources /responsive-design-device- resolution-reference Testing Tools http://designwebkit.com/web-and- trends/12-responsive-design-testing- tools-check-screen-resolutions/
  • 18. Responsive Web Design自適應網 頁 自適應原理  液態排版 vs 固定寬度排版 液態排版的對比設計方式就叫「固定寬度(fixed-width)排版」,傳統上 來說,比起液態方式,固定方式通常較受平面及視覺設計師歡迎,因為 他們較習慣先決定整體版面輸出的範圍,而液態方式則需要費多一點心 力去考量很多不同解析度的情況,雖然比較費工,但卻是互動介面不可 或缺的重要設計。 液態排版(通常用在文章Blog) http://alistapart.com/article/holygrail 固定寬度排版 http://www.japantimes.co.jp/
  • 19. Responsive Web Design自適應網 頁 自適應原理  CSS3 media query 自適應網頁設計的主要核心技術是CSS3 media query ,說穿了就是讓不同解析度去套用不同的CSS設定, 所以多少種尺寸,就要寫多少組CSS。  Max Width(@media screen and (max-width: 600px)) Min Width(@media screen and (min-width: 900px)) Device Width(@media screen and (max-device-width: 480px)) 針對iPhone4提供專用的css設定檔 <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /> 針對iPad的Portrait Mode(直立)與Landscape Mode(橫躺)兩種瀏覽模式給予不同的css設定檔 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">  參考設計 http://mediaqueri.es/ https://dribbble.com/shots/1004476-Wireframes/attachments/118672
  • 20. Responsive Web Design自適應網 頁 自適應的優點  開發成本與時間比APP低 APP必須開發iOS版及Android版兩個版本,一個版本皆數十萬元起跳,開發時間加上審核上架時 間相當長。  不需下載APP就能使用 這不只是自適應網頁的優點,可說是所有手機版網頁相較於手機APP的最大優勢。 APP必須到 iTunes、Google Play下載,APP若要更新,必須重新審核過後,再通知所有下載用戶更新。反觀 自適應網頁與手機網頁,只要管理者更新網站,每次連上網頁都會是最新版本。免費Wi-Fi熱點越 來越多、 3G費率持續調降,即使無法離線瀏覽也不再是問題了。  可以同時針對許多不同裝置分別調整 APP必須開發iOS版及Android版兩個版本。通常做 都是利用 CSS3 的 Media Queries 方法來實 現,而你可以使用這項 CSS 來對許多裝置做設計,不論是螢幕小到不行的入門款 Smart Phone、 螢幕大的 Galaxy Note、解析度超高的 iPad、輕巧的 Google Nexus 7 都可以做 Responsive Web Design 。
  • 21. Responsive Web Design自適應網 頁 自適應的優點  不需要重寫 HTML Responsive Web Design 不需要再重寫另一份 HTML ,直接使用 CSS 屬性來對不同裝置做調整 即可。  維護成本低 APP完成之後要不定期需針對新版本測試,才能確定APP在新手機上能運作順暢。以目前新手機 上市的頻率來看,這是永遠不會結束的測試地獄。手機版網站等於是另一個用在行動裝置的公司網 站,相對地,企業必須花2筆網站維護成本。  利於分享 APP沒有網址可以分享,做了手機版網頁,分享出的網址通常都是手機版網頁的網址,當朋友用 電腦開啟連結時,卻不見得會轉回電腦版網站。蘋果日報的手機網站就是如此。 同樣的網頁內容 拆成電腦版、手機版兩個網址,按讚數、流量分析等也會跟著拆成兩筆數據,對SEO相對比較弱。
  • 22. Responsive Web Design自適應網 頁 自適應的缺點  E7以下不支援,IE8雖然有hack但是很容易有bug  不適合複雜的功能、選單或介面 如果電腦版必須維持很複雜的介面,手機版則必須大量縮減內容,兩個版本架構不同 且差異相當大的話,另外做手機版網站是比較適合的。  載入速度問題 因為是使用同一份的 HTML & CSS ,所以不管 User 在手機上或者在 PC 上,要瀏覽 的網頁都是同一份網頁,當然速度也是會一樣。  必須花心思規劃及花較長的時間切版,前端開發時間較長 不單單只是程式碼的配合而己,整體網頁在架構及設計上一開始就要導入RWD的觀念, 所以網頁的使用上必須簡單直覺,訊息清楚明瞭,少用動畫及特效(輪播、跑馬燈、 動畫) 。
  • 23. Responsive Web Design自適應網 頁 什麼類型的網站適合做自適應網站設計 http://www.ibest.com.tw/news/ins.php?index_id=66&index_m_id=0
  • 24. 對新規格的誤解  用新規格開發會變快? 工程師或許會少套一個手機板,但是對於設計師來說會增加切版時間及修正BUG的時間。  是手機板還是自適應? 基本上自適應就是為了手持裝置瀏覽而誕生的,有了自適應自然不需要做手機板,除非是兩者採用 資料不同,或電腦版的內容過於龐雜,用手機瀏覽負擔會太重,這時候才需要另外製作手機板。  一欄?兩欄?三欄? 自適應其實無關乎幾欄,在於版面的編排是否符合自適應的邏輯。 當然欄位變動越大,製作時間就越長。幾本上解析度越小,欄位要越少,才不會讓使用者看到眼睛 脫窗,所以在手機上瀏覽網頁大部分都是一欄。  區塊可以任意變換? 在GIP的架構下必須遵守table的邏輯,但如果不用GIP開發則要考量到工程師的時程。 但是原有的HTML邏輯也是必須遵守的。
  • 25. 設計師會遇到的難題  不適合的規劃 小小的區塊擠太多內容 / 沒有按照HTML的邏輯 / 不先訂好稿切板後再修改  GIP的侷限 GIP2.0架構因為中間有table的關係,對於自適應的排版有相當程度的阻礙。  自適應CSS所需耗費的工時 一種規格尺寸,一份工時 ex:1024X768、960x640、480X320 規劃越複雜越不統一,切版越耗時  各家瀏覽器版本的整合 -moz / -webkit / -ms / ie9 、8、7、6  Javascript和JQ的修改 大部分的網頁設計都是學視覺傳達出身,為了工作逼不得已要學CSS和HTML,有時候還要會寫AS和JQ, 但畢竟我們不是寫程式的科班,只能找網路上的opensource來替代, opensource的好處是免費,壞處 就是有BUG不能修改,也無法客製。 其實這些工作都是前端設計師的專長,但我們公司並沒有前端工程師,通常都是請開發的工程師幫忙救火 或是設計師網路上找免費的硬上。所以當企劃在規劃某些功能時,必須考慮是否有可輔助這些效果的工程 師。
  • 26. 企劃該注意到的事  估執行該專案的條件 總金額 / 時間 / 人力資源 / 規格  客戶想要的?我們能做的?如何分析出效益最好的做法? 金額低→時間少人力少→簡化需求→push客戶開新案 寧可凹客戶開個維護案,也不要被凹但做的凌凌落落焦頭爛額還要被扣錢  如果真的要做,該如何設計出適合自適應的規劃? 先了解客戶的認知及需求 根據專案利潤來評估要做的尺寸規格 把需要的區塊表列出來,並儘量統一各區塊的規格 排列出適合的電腦版頁面 依據客戶需求、考量使用者行為,將電腦版頁面縮減內容至其他自適應版本 (化繁為簡) 針對獨特的區塊或是需要動態的部分和設計師及工程師討論可行度